{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "title": "Button",
  "description": "A clickable control used to trigger an action or event.",
  "dependencies": [
    "@base-ui/react@^1.6.0",
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/ui/button.tsx",
      "content": "import { 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  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-semibold whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-4 focus-visible:ring-ring/25 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-4 aria-invalid:ring-destructive/25 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:transition-transform\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-xs-skeuomorphic hover:bg-bg-brand-solid_hover\",\n        outline:\n          \"border-input bg-background text-secondary-foreground shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary:\n          \"bg-background text-secondary-foreground border-input shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\n        ghost:\n          \"text-secondary-foreground hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-xs-skeuomorphic hover:bg-bg-error-solid_hover focus-visible:border-destructive focus-visible:ring-destructive/25\",\n        link: \"text-text-brand-secondary underline-offset-4 hover:underline hover:text-text-brand-secondary_hover\",\n        // Accent yellow on dark-brand surfaces (CTA banners, brand panels).\n        accent:\n          \"relative bg-accent-400 text-brand-600 shadow-xs-skeuomorphic ring-1 ring-transparent ring-inset hover:bg-accent-300 before:absolute before:inset-px before:border before:border-black/8 before:mask-b-from-0% *:data-icon:text-brand-600\",\n        // Outline button for solid-brand backgrounds.\n        \"secondary-on-brand\":\n          \"bg-transparent text-white ring-1 ring-white/30 ring-inset hover:bg-white/10 hover:text-white *:data-icon:text-white/70 hover:*:data-icon:text-white\",\n        // Inline text link, brand-coloured, underline-on-hover.\n        \"link-color\":\n          \"h-auto justify-normal rounded p-0! text-text-brand-secondary hover:text-text-brand-secondary_hover *:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-4 hover:*:data-text:decoration-fg-brand-secondary_alt *:data-icon:text-fg-brand-secondary_alt hover:*:data-icon:text-fg-brand-secondary_hover\",\n        // Inline text link, gray, underline-on-hover.\n        \"link-gray\":\n          \"h-auto justify-normal rounded p-0! text-text-tertiary hover:text-text-tertiary_hover *:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-4 hover:*:data-text:decoration-fg-quaternary *:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover\",\n      },\n      size: {\n        default:\n          \"h-10 gap-1.5 px-3.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        xs: \"h-8 gap-1 rounded-md px-2.5 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-9 gap-1 px-3 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5\",\n        lg: \"h-11 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5\",\n        xl: \"h-13 gap-2 px-5 text-md has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4 *:data-icon:size-5\",\n        icon: \"size-10\",\n        \"icon-xs\":\n          \"size-8 rounded-md in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-9 in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-11\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}