import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react"; import { Loader2 } from "lucide-react"; const variantClasses = { primary: "bg-accent-600 text-white hover:bg-accent-500 active:scale-[0.98]", secondary: "border border-zinc-700/60 bg-zinc-800/60 text-zinc-300 hover:bg-zinc-700/60 active:scale-[0.98]", danger: "border border-red-500/20 bg-red-500/10 text-red-400 hover:bg-red-500/20 active:scale-[0.98]", ghost: "text-zinc-400 hover:bg-zinc-800/70 hover:text-zinc-100 active:scale-[0.97]", } as const; const sizeClasses = { sm: "gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium", md: "gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold", } as const; export type ButtonVariant = keyof typeof variantClasses; export type ButtonSize = keyof typeof sizeClasses; const baseClasses = "inline-flex items-center justify-center transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500/50 focus-visible:ring-offset-2 focus-visible:ring-offset-canvas disabled:pointer-events-none disabled:opacity-50"; export function buttonClasses({ variant = "secondary", size = "sm", className, }: { variant?: ButtonVariant; size?: ButtonSize; className?: string; } = {}) { return [baseClasses, variantClasses[variant], sizeClasses[size], className].filter(Boolean).join(" "); } interface ButtonProps extends ButtonHTMLAttributes { variant?: ButtonVariant; size?: ButtonSize; loading?: boolean; icon?: ReactNode; } export const Button = forwardRef( ({ variant = "secondary", size = "sm", loading, icon, children, className, disabled, ...rest }, ref) => { return ( ); }, ); Button.displayName = "Button";