Blame · button.tsx

4dfd09b	1	import { forwardRef } from "react";
4dfd09b	2
4dfd09b	3	const variantStyles = {
4dfd09b	4	primary: {
4dfd09b	5	backgroundColor: "var(--accent)",
4dfd09b	6	color: "var(--accent-text)",
4dfd09b	7	},
4dfd09b	8	secondary: {
4dfd09b	9	backgroundColor: "var(--bg-inset)",
4dfd09b	10	border: "1px solid var(--border)",
4dfd09b	11	color: "var(--text-secondary)",
4dfd09b	12	},
4dfd09b	13	ghost: {
4dfd09b	14	background: "none",
4dfd09b	15	border: "none",
4dfd09b	16	color: "var(--accent)",
4dfd09b	17	},
4dfd09b	18	danger: {
4dfd09b	19	backgroundColor: "var(--status-closed-bg)",
4dfd09b	20	border: "1px solid var(--status-closed-border)",
4dfd09b	21	color: "var(--status-closed-text)",
4dfd09b	22	},
4dfd09b	23	} as const;
4dfd09b	24
4dfd09b	25	const sizeClasses = {
4dfd09b	26	sm: "text-sm px-3 py-1",
4dfd09b	27	md: "text-sm px-3 py-1.5",
4dfd09b	28	} as const;
4dfd09b	29
4dfd09b	30	export interface ButtonProps
4dfd09b	31	extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4dfd09b	32	variant?: keyof typeof variantStyles;
4dfd09b	33	size?: "sm" \| "md";
4dfd09b	34	loading?: boolean;
4dfd09b	35	loadingText?: string;
4dfd09b	36	}
4dfd09b	37
4dfd09b	38	export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
4dfd09b	39	function Button(
4dfd09b	40	{
4dfd09b	41	variant = "primary",
4dfd09b	42	size = "sm",
4dfd09b	43	loading = false,
4dfd09b	44	loadingText,
4dfd09b	45	disabled,
4dfd09b	46	className = "",
4dfd09b	47	style,
4dfd09b	48	children,
4dfd09b	49	...props
4dfd09b	50	},
4dfd09b	51	ref
4dfd09b	52	) {
4dfd09b	53	const isDisabled = disabled \|\| loading;
4dfd09b	54
4dfd09b	55	return (
4dfd09b	56	<button
4dfd09b	57	ref={ref}
4dfd09b	58	disabled={isDisabled}
4dfd09b	59	className={`${sizeClasses[size]} ${className}`}
4dfd09b	60	style={{
4dfd09b	61	...variantStyles[variant],
4dfd09b	62	opacity: isDisabled ? 0.5 : 1,
4dfd09b	63	cursor: loading ? "wait" : isDisabled ? "default" : "pointer",
4dfd09b	64	font: "inherit",
4dfd09b	65	...style,
4dfd09b	66	}}
4dfd09b	67	{...props}
4dfd09b	68	>
4dfd09b	69	{loading && loadingText ? loadingText : children}
4dfd09b	70	</button>
4dfd09b	71	);
4dfd09b	72	}
4dfd09b	73	);