{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "title": "Button",
  "description": "A button component that can be rendered as another tag or focusable when disabled.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/button.tsx",
      "content": "\"use client\";\n\nimport { Button as BaseButton } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/registry/lib/utils\";\n\nconst buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-2 text-sm font-medium rounded-md whitespace-nowrap transition-all\",\n    \"focus-visible:outline focus-visible:outline-ring focus-visible:ring-4 focus-visible:ring-ring/10\",\n    \"aria-invalid:outline aria-invalid:outline-destructive/80 aria-invalid:ring-4 aria-invalid:ring-destructive/20\",\n    \"aria-invalid:focus-visible:outline-destructive aria-invalid:focus-visible:outline-offset-2 aria-invalid:focus-visible:ring-destructive/20\",\n    \"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0\",\n    \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n  ],\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        icon: \"size-9 [&_svg:not([class*='size-'])]:size-4.5\",\n        \"icon-lg\": \"size-10 [&_svg:not([class*='size-'])]:size-5\",\n        \"icon-sm\": \"size-8\",\n        \"icon-xs\": \"size-6 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-10 px-6 has-[>svg]:px-4 text-base\",\n        sm: \"h-8 gap-1.5 px-3 has-[>svg]:px-2.5\",\n      },\n      variant: {\n        default: [\n          \"bg-primary text-primary-foreground hover:bg-primary/90\",\n          \"focus-visible:outline-offset-2 focus-visible:ring-primary/30\",\n          // override the background color when the button acts as a trigger for popups\n          \"data-popup-open:bg-primary/90\",\n        ],\n        destructive: [\n          \"text-white bg-destructive/80 hover:bg-destructive/70\",\n          \"focus-visible:outline-destructive focus-visible:outline-offset-2 focus-visible:ring-destructive/30 aria-invalid:focus-visible:outline-offset-2\",\n          \"data-popup-open:bg-destructive/70\",\n        ],\n        ghost: \"hover:bg-accent hover:text-accent-foreground shadow-none\",\n        glow: \"bg-transparent border border-primary/30 dark:border-primary/15 hover:bg-accent dark:hover:bg-input/30 shadow-md shadow-primary/10 dark:shadow-sm\",\n        link: \"text-primary underline-offset-4 hover:underline aria-invalid:text-destructive\",\n        outline: [\n          \"border hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:hover:bg-input/50\",\n          \"data-popup-open:bg-accent data-popup-open:text-accent-foreground dark:data-popup-open:bg-accent/60\",\n        ],\n        secondary: [\n          \"bg-secondary text-secondary-foreground border border-primary/5 hover:bg-secondary/80\",\n          \"data-popup-open:bg-secondary/80\",\n        ],\n        unstyled: \"bg-transparent hover:bg-transparent\",\n      },\n    },\n  },\n);\n\nconst Button = ({\n  className,\n  variant,\n  size,\n  isLoading,\n  disabled,\n  focusableWhenDisabled,\n  ...props\n}: BaseButton.Props &\n  VariantProps<typeof buttonVariants> & {\n    isLoading?: boolean;\n  }) => {\n  return (\n    <BaseButton\n      className={cn(buttonVariants({ className, size, variant }))}\n      disabled={disabled || isLoading}\n      focusableWhenDisabled={focusableWhenDisabled || isLoading}\n      {...props}\n    />\n  );\n};\n\nexport { Button, buttonVariants };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}