{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "square-button",
  "title": "Square Button",
  "description": "A sharp-cornered button with decorative corner brackets.",
  "files": [
    {
      "path": "components/library/square-button.tsx",
      "content": "\nimport React, { forwardRef } from 'react'\n\nexport interface SquareButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n    children?: React.ReactNode\n    size?: 'sm' | 'md' | 'lg'\n    variant?: 'primary' | 'ghost' | 'destructive' | 'outline'\n}\n\nconst sizeClasses: Record<NonNullable<SquareButtonProps['size']>, string> = {\n    // Use padding + fixed height so button auto-sizes with content instead of fixed width\n    sm: 'px-3 py-1.5 h-8 text-sm',\n    md: 'px-4 py-2 h-12 text-base',\n    lg: 'px-6 py-3 h-16 text-lg',\n}\n\nconst variantClasses: Record<NonNullable<SquareButtonProps['variant']>, string> = {\n    primary: 'bg-amber-500 hover:bg-amber-600 text-white',\n    ghost: 'bg-transparent text-amber-600',\n    destructive: 'bg-red-600 hover:bg-red-700 text-white',\n    outline: 'bg-transparent text-amber-600 border border-amber-500 ',\n}\n\nexport const SquareButton = forwardRef<HTMLButtonElement, SquareButtonProps>(\n    ({ children = 'Square Button', size = 'md', variant = 'primary', className = '', ...rest }, ref) => {\n        const isOutline = variant === 'outline'\n        const cornerBase = size === \"sm\" ? 'size-2' :'size-4'\n        const topRight = `absolute right-0 top-0 border-r-2 border-t-2 ${isOutline ? 'border-current translate-x-1 -translate-y-1 border-white' : 'border-white'} ${cornerBase}`\n        const topLeft = `absolute left-0 top-0 border-l-2 border-t-2 ${isOutline ? 'border-current -translate-x-1 -translate-y-1 border-white' : 'border-white'} ${cornerBase}`\n        const bottomRight = `absolute right-0 bottom-0 border-r-2 border-b-2 ${isOutline ? 'border-current translate-x-1 translate-y-1 border-white' : 'border-white'} ${cornerBase}`\n        const bottomLeft = `absolute left-0 bottom-0 border-l-2 border-b-2 ${isOutline ? 'border-current -translate-x-1 translate-y-1 border-white' : 'border-white'} ${cornerBase}`\n\n        return (\n            <button\n                ref={ref}\n                className={`${sizeClasses[size]} ${variantClasses[variant]} font-semibold shadow-md relative transform-gpu transition-transform duration-200 ease-out hover:scale-105 active:scale-95 motion-reduce:transition-none motion-reduce:transform-none focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-400 ${className}`}\n                {...rest}\n            >\n                <span className={topRight} />\n                <span className={topLeft} />\n\n                <span className=\"relative z-10 inline-flex items-center justify-center gap-2\">{children}</span>\n\n                <span className={bottomRight} />\n                <span className={bottomLeft} />\n            </button>\n        )\n    }\n)\n\nSquareButton.displayName = 'SquareButton'\n\n\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}