{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "title": "Button",
  "description": "Triggers an action. Variants default, secondary, outline, ghost, destructive and link; sizes sm, default, lg and three square icon sizes. Supports asChild and a loading state.",
  "dependencies": [
    "@radix-ui/react-slot",
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@corsair-ui/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/button.tsx",
      "content": "import { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { LoaderCircleIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\n\nconst buttonVariants = cva(\n  [\n    \"inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap select-none\",\n    \"transition-[color,background-color,border-color,box-shadow,opacity] outline-none motion-reduce:transition-none\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n    \"aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        outline: \"border-input bg-field hover:bg-accent hover:text-accent-foreground border\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        // A face on a 4 px base that it sinks into while pressed. Both are\n        // pseudo-elements in the button's own stacking context, below the\n        // label: only the button's transform moves, and the base is moved\n        // back so it stays put. mb-[4px] keeps it clear of what sits below.\n        raised: [\n          \"text-primary-foreground relative isolate mb-[4px] bg-transparent hover:brightness-105\",\n          \"transition-[color,background-color,border-color,box-shadow,opacity,transform,translate] duration-100\",\n          // The face (::after) sits on the base (::before), both under the label.\n          \"after:bg-primary after:absolute after:inset-0 after:-z-10 after:rounded-[inherit]\",\n          \"before:bg-primary before:absolute before:inset-0 before:-z-20 before:translate-y-[4px] before:rounded-[inherit] before:brightness-75\",\n          \"active:translate-y-[4px] active:before:translate-y-0\",\n        ],\n      },\n      size: {\n        sm: \"h-8 gap-1.5 px-3 has-[>svg]:px-2.5\",\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        lg: \"h-10 px-6 has-[>svg]:px-4\",\n        \"icon-sm\": \"size-8\",\n        icon: \"size-9\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\ninterface ButtonProps extends ComponentProps<\"button\">, VariantProps<typeof buttonVariants> {\n  /** Render the single child element (a link, for example) with the button styles instead. */\n  asChild?: boolean;\n  /** Shows a spinner and blocks interaction while an action is running. */\n  loading?: boolean;\n}\n\n/**\n * `variant=\"raised\"` stands on a 4 px base, darker than the face, and sinks\n * into it while pressed, like a key. It takes 4 px of margin below for the\n * base. With `prefers-reduced-motion` the press still moves, without a\n * transition.\n *\n * The icon sizes render a square button: give it an `aria-label`, since there\n * is no visible text to name it.\n *\n * Icons inside without a `size-*` class are set to `size-4`; give an icon its\n * own `size-*` (`size-5`, `size-[18px]`) to change it. `w-*` / `h-*` alone are\n * overridden.\n */\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  loading = false,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot : \"button\";\n  const inactive = disabled || loading;\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant ?? \"default\"}\n      data-size={size ?? \"default\"}\n      className={cn(buttonVariants({ variant, size, className }))}\n      // A native button can be disabled; any other element only announces it.\n      disabled={asChild ? undefined : inactive}\n      aria-disabled={asChild && inactive ? true : undefined}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      {loading ? (\n        <LoaderCircleIcon\n          aria-hidden=\"true\"\n          data-slot=\"button-spinner\"\n          className=\"animate-spin motion-reduce:animate-[spin_1.5s_linear_infinite]\"\n        />\n      ) : null}\n      <Slottable>{children}</Slottable>\n    </Comp>\n  );\n}\n\nexport { Button, buttonVariants, type ButtonProps };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}