{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-button",
  "type": "registry:ui",
  "title": "Button",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/Button.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {\n  Button as RACButton,\n  type ButtonProps as RACButtonProps\n} from 'react-aria-components/Button';\nimport {tv} from 'tailwind-variants';\nimport {focusRing} from '@/registry/react-aria/lib/react-aria-utils';\n\nexport interface ButtonProps extends RACButtonProps {\n  /** @default 'primary' */\n  variant?: 'primary' | 'secondary' | 'destructive' | 'quiet';\n}\n\nlet button = tv({\n  extend: focusRing,\n  base: 'relative inline-flex items-center justify-center gap-2 border border-transparent dark:border-white/10 h-9 box-border px-3.5 py-0 [&:has(>svg:only-child)]:px-0 [&:has(>svg:only-child)]:h-8 [&:has(>svg:only-child)]:w-8 font-sans text-sm text-center transition rounded-lg cursor-default [-webkit-tap-highlight-color:transparent]',\n  variants: {\n    variant: {\n      primary: 'bg-blue-600 hover:bg-blue-700 pressed:bg-blue-800 text-white',\n      secondary:\n        'border-black/10 bg-neutral-50 hover:bg-neutral-100 pressed:bg-neutral-200 text-neutral-800 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:pressed:bg-neutral-500 dark:text-neutral-100',\n      destructive: 'bg-red-700 hover:bg-red-800 pressed:bg-red-900 text-white',\n      quiet:\n        'border-0 bg-transparent hover:bg-neutral-200 pressed:bg-neutral-300 text-neutral-800 dark:hover:bg-neutral-700 dark:pressed:bg-neutral-600 dark:text-neutral-100'\n    },\n    isDisabled: {\n      true: 'border-transparent dark:border-transparent bg-neutral-100 dark:bg-neutral-800 text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]'\n    },\n    isPending: {\n      true: 'text-transparent'\n    }\n  },\n  defaultVariants: {\n    variant: 'primary'\n  },\n  compoundVariants: [\n    {\n      variant: 'quiet',\n      isDisabled: true,\n      class: 'bg-transparent dark:bg-transparent'\n    }\n  ]\n});\n\nexport function Button(props: ButtonProps) {\n  return (\n    <RACButton\n      {...props}\n      className={composeRenderProps(props.className, (className, renderProps) =>\n        button({...renderProps, variant: props.variant, className})\n      )}>\n      {composeRenderProps(props.children, (children, {isPending}) => (\n        <>\n          {children}\n          {isPending && (\n            <span aria-hidden className=\"flex absolute inset-0 justify-center items-center\">\n              <svg\n                className=\"w-4 h-4 text-white animate-spin\"\n                viewBox=\"0 0 24 24\"\n                stroke={\n                  props.variant === 'secondary' || props.variant === 'quiet'\n                    ? 'light-dark(black, white)'\n                    : 'white'\n                }>\n                <circle cx=\"12\" cy=\"12\" r=\"10\" strokeWidth=\"4\" fill=\"none\" className=\"opacity-25\" />\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"10\"\n                  strokeWidth=\"4\"\n                  strokeLinecap=\"round\"\n                  fill=\"none\"\n                  pathLength=\"100\"\n                  strokeDasharray=\"60 140\"\n                  strokeDashoffset=\"0\"\n                />\n              </svg>\n            </span>\n          )}\n        </>\n      ))}\n    </RACButton>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}