6ee2d8b
import { type ButtonHTMLAttributes, forwardRef } from 'react'
export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'
export type ButtonSize = 'default' | 'lg'
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: ButtonVariant
size?: ButtonSize
}
const variantClasses: Record<ButtonVariant, string> = {
primary: 'btn btn-primary font-mono font-bold tracking-[0.4px]',
secondary: 'btn btn-outline border-border bg-card text-foreground font-sans font-medium hover:bg-muted',
ghost: 'btn btn-ghost text-foreground',
danger: 'btn btn-error bg-[#f23f43] text-white hover:bg-[#d9363a]',
}
const sizeClasses: Record<ButtonSize, string> = {
default: 'btn-sm h-9 gap-2 rounded-field px-4 text-sm',
lg: 'btn-lg h-12 gap-[9px] rounded-field px-6 text-sm',
}
/** Business-free UI kit primitive: no domain logic, no store, no requests. */
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
{ variant = 'primary', size = 'default', className = '', type = 'button', ...props },
ref,
) {
return (
<button
ref={ref}
type={type}
className={`${variantClasses[variant]} ${sizeClasses[size]} transition-[filter,background-color] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 ${className}`}
{...props}
/>
)
})