0cf4fcc
import { type ButtonHTMLAttributes, forwardRef } from 'react'
export type ButtonVariant = 'primary' | 'secondary' | 'ghost'
export type ButtonSize = 'default' | 'lg'
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: ButtonVariant
size?: ButtonSize
}
const variantClasses: Record<ButtonVariant, string> = {
primary:
'bg-primary text-primary-foreground font-mono font-bold tracking-[0.4px] hover:brightness-95 active:brightness-90',
secondary: 'border border-border bg-card text-foreground font-sans font-medium hover:bg-muted',
ghost: 'bg-transparent text-foreground hover:bg-muted',
}
const sizeClasses: Record<ButtonSize, string> = {
default: 'h-9 gap-2 rounded-field px-4 text-sm',
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={`inline-flex items-center justify-center transition-[filter,background-color] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
{...props}
/>
)
})