{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-tailwind",
  "type": "registry:item",
  "title": "Button (Tailwind)",
  "description": "A button component.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/brook/tailwind/ui/button.tsx",
      "content": "\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst buttonVariants = cva(\n  [\n    \"group inline-flex items-center justify-center rounded-[var(--radius)] font-[450]\",\n    \"transition-[transform,background-color,box-shadow] duration-200 ease-[var(--ease-out-quad)] will-change-transform\",\n    \"relative cursor-pointer overflow-hidden\",\n    \"leading-[1.2] tracking-[-0.014em]\",\n    \"focus-visible:outline-2 focus-visible:outline-[color:var(--ring)] focus-visible:outline-offset-2\",\n    \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          \"isolate border border-[color:var(--primary)] bg-[var(--primary)] text-[var(--primary-foreground)]\",\n          \"shadow-[0_1px_2px_oklch(from_var(--primary)_l_c_h/0.24)]\",\n          \"inset-shadow-[0_1px_oklch(1_0_0/0.16)]\",\n          \"before:-z-1 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius)-1px)]\",\n          \"hover:before:bg-[oklch(from_var(--primary-foreground)_l_c_h/0.1)]\",\n          \"[:active,[data-pressed]]:shadow-none [:active,[data-pressed]]:inset-shadow-[0_1px_oklch(0_0_0/0.08)]\",\n        ],\n        secondary: [\n          \"isolate border border-transparent bg-[var(--secondary)] text-[var(--secondary-foreground)]\",\n          \"before:-z-1 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius)-1px)]\",\n          \"hover:before:bg-[oklch(from_var(--secondary-foreground)_l_c_h/0.08)] data-[pressed]:before:bg-[oklch(from_var(--secondary-foreground)_l_c_h/0.08)]\",\n        ],\n        destructive: [\n          \"isolate border border-[color:var(--destructive)] bg-[var(--destructive)] text-[var(--destructive-foreground)]\",\n          \"shadow-[0_1px_2px_oklch(from_var(--destructive)_l_c_h/0.24)]\",\n          \"inset-shadow-[0_1px_oklch(1_0_0/0.16)]\",\n          \"before:-z-1 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius)-1px)]\",\n          \"hover:before:bg-[oklch(1_0_0/0.08)]\",\n          \"[:active,[data-pressed]]:shadow-none [:active,[data-pressed]]:inset-shadow-[0_1px_oklch(0_0_0/0.08)]\",\n        ],\n        ghost: [\n          \"bg-transparent text-[var(--foreground)]\",\n          \"hover:bg-[var(--accent)]\",\n          \"data-[popup-open]:bg-[var(--accent)]\",\n        ],\n        outline: [\n          \"isolate border border-[var(--input)] bg-[var(--card)] text-[var(--muted-foreground)]\",\n          \"not-dark:bg-clip-padding\",\n          \"shadow-[0_1px_2px_oklch(0_0_0/0.05)]\",\n          \"dark:shadow-[0_1px_2px_oklch(0_0_0/0.2)]\",\n          \"inset-shadow-[0_-1px_oklch(1_0_0/0.015)]\",\n          \"dark:inset-shadow-[0_-1px_oklch(1_0_0/0.03)]\",\n          \"before:-z-1 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius)-1px)]\",\n          \"hover:before:bg-[oklch(from_var(--muted)_l_c_h/0.8)] data-[pressed]:before:bg-[oklch(from_var(--muted)_l_c_h/0.8)]\",\n          \"data-[popup-open]:before:bg-[oklch(from_var(--muted)_l_c_h/0.8)]\",\n          \"[:active,[data-pressed]]:shadow-none\",\n        ],\n        link: [\n          \"bg-transparent p-0 text-[var(--muted-foreground)] no-underline\",\n          \"transition-[text-decoration] duration-200 ease-out\",\n          \"hover:text-[var(--foreground)] hover:underline\",\n        ],\n      },\n      size: {\n        sm: \"h-8 px-2 text-[13px]\",\n        md: \"h-10 px-4 py-2 text-[0.925rem]\",\n        lg: \"h-12 px-6 py-2 text-base\",\n        icon: [\n          \"aspect-square h-auto w-auto p-1.5 text-sm\",\n          \"before:absolute before:top-1/2 before:left-1/2 before:block before:content-['']\",\n          \"before:-translate-x-1/2 before:-translate-y-1/2 before:h-full before:w-full\",\n          \"before:-z-10 before:min-h-[44px] before:min-w-[44px]\",\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  }\n);\n\nfunction Spinner() {\n  return (\n    <svg className=\"mr-2 animate-[spinner_1s_linear_infinite]\" fill=\"none\" height=\"16\" viewBox=\"0 0 24 24\" width=\"16\">\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeDasharray=\"31.416\"\n        strokeDashoffset=\"31.416\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"2\"\n      />\n      <style>\n        {`\n          @keyframes spinner {\n            from {\n              transform: rotate(0deg);\n              stroke-dashoffset: 31.416;\n            }\n            to {\n              transform: rotate(360deg);\n              stroke-dashoffset: 0;\n            }\n          }\n        `}\n      </style>\n    </svg>\n  );\n}\n\nfunction ArrowPointer({ pointLeft = false, pointExternal = false }: { pointLeft?: boolean; pointExternal?: boolean }) {\n  const arrowClasses = cn(\n    \"-mr-2 relative top-[0.5px] ml-2 h-2.5 w-3 overflow-visible\",\n    \"transition-all duration-200 ease-[var(--ease-in-out-cubic)]\",\n    pointLeft && \"-ml-2 mr-2\",\n    pointExternal && \"group-hover:-rotate-45 origin-[8%] [transform-box:border-box]\"\n  );\n\n  const pointClasses = \"transition-transform duration-200 ease-[var(--ease-in-out-cubic)] group-hover:translate-x-0.5\";\n  const shaftClasses =\n    \"opacity-0 -translate-x-[0.5px] transition duration-200 ease-[var(--ease-in-out-cubic)] group-hover:opacity-100 group-hover:-translate-x-0.5\";\n\n  const pointLeftClasses = \"group-hover:-translate-x-0.5\";\n  const shaftLeftClasses = \"group-hover:opacity-100 group-hover:translate-x-px\";\n\n  return (\n    <svg className={arrowClasses} data-slot=\"arrow\" fill=\"none\" viewBox=\"0 0 14 10\" xmlns=\"http://www.w3.org/2000/svg\">\n      <g>\n        <path\n          className={cn(pointClasses, pointLeft ? pointLeftClasses : null)}\n          d={pointLeft ? \"M14.8 1l-4 4 4 4\" : \"M-0.8 1l4 4-4 4\"}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"square\"\n          strokeLinejoin=\"miter\"\n          strokeWidth=\"2\"\n        />\n        <path\n          className={cn(shaftClasses, pointLeft ? shaftLeftClasses : null)}\n          d={pointLeft ? \"M14.8 5H9.8\" : \"M0 5h4.8\"}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"square\"\n          strokeLinejoin=\"miter\"\n          strokeWidth=\"2\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nfunction Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return <ButtonPrimitive className={cn(buttonVariants({ variant, size, className }))} data-slot=\"button\" {...props} />;\n}\n\nexport { Button, buttonVariants, Spinner, ArrowPointer };\n",
      "type": "registry:file",
      "target": "~/components/ui/button/button.tsx"
    }
  ]
}