{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "title": "Button",
  "description": "A versatile button component with multiple variants, sizes, and states.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority",
    "lucide-react"
  ],
  "files": [
    {
      "path": "packages/ui/src/button.tsx",
      "content": "\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { LoaderCircle as LoaderCircleIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\n// ---------------------------------------------------------------------------\n// Variants\n// ---------------------------------------------------------------------------\n\nconst buttonVariants = cva(\n  \"relative z-0 inline-flex shrink-0 cursor-pointer touch-manipulation select-none items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-lg font-medium text-sm transition-[transform,background-color,color,border-color,box-shadow,outline-color] duration-[160ms] ease-out focus:ring-0 focus:ring-offset-0 focus-visible:outline-2 focus-visible:outline-ring/50 focus-visible:outline-offset-2 active:scale-[0.98] disabled:cursor-not-allowed disabled:active:scale-100 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/90 disabled:bg-primary/50 disabled:text-primary-foreground/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-hover disabled:bg-secondary/50 disabled:text-secondary-foreground/50\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:outline-destructive/50 active:bg-destructive/90 disabled:bg-destructive/50 disabled:text-destructive-foreground/50\",\n        ghost:\n          \"bg-transparent hover:bg-accent active:bg-accent disabled:bg-transparent disabled:text-foreground/50\",\n        outline:\n          \"border border-input bg-background shadow-xs hover:bg-accent hover:text-foreground active:bg-accent active:text-foreground disabled:border-border/50 disabled:bg-transparent disabled:text-foreground/50 aria-expanded:bg-accent aria-expanded:text-foreground dark:border-input dark:bg-input-bg dark:active:bg-input/50 dark:hover:bg-input/50\",\n        link: \"text-primary underline-offset-4 hover:underline active:scale-100\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        xs: \"h-6 px-2.5 py-1 text-xs\",\n        sm: \"h-8 px-3 py-1.5\",\n        lg: \"h-12 px-5 py-3.5 text-base\",\n        icon: \"size-10 p-2\",\n        \"icon-xs\": \"size-6 p-0.5\",\n        \"icon-sm\": \"size-8 p-1.5\",\n        \"icon-lg\": \"size-12 p-2.5\",\n      },\n      fullWidth: {\n        true: \"w-full\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\ntype ButtonVariantsProps = VariantProps<typeof buttonVariants>;\n\n// ---------------------------------------------------------------------------\n// Button\n// ---------------------------------------------------------------------------\n\nexport interface ButtonProps\n  extends ButtonPrimitive.Props,\n    ButtonVariantsProps {\n  /** Whether the button should span the full width of its container. */\n  fullWidth?: boolean;\n  /** Shows a loading spinner and disables the button. */\n  isLoading?: boolean;\n  /**\n   * The size of the button.\n   * @default \"default\"\n   */\n  size?:\n    | \"xs\"\n    | \"sm\"\n    | \"default\"\n    | \"lg\"\n    | \"icon\"\n    | \"icon-xs\"\n    | \"icon-sm\"\n    | \"icon-lg\";\n  /**\n   * The visual style of the button.\n   * @default \"default\"\n   */\n  variant?:\n    | \"default\"\n    | \"secondary\"\n    | \"destructive\"\n    | \"ghost\"\n    | \"outline\"\n    | \"link\";\n}\n\nconst Button = ({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  fullWidth,\n  isLoading = false,\n  disabled,\n  type = \"button\",\n  children,\n  ref,\n  ...props\n}: ButtonProps & React.RefAttributes<HTMLButtonElement>) => {\n  const isDisabled = isLoading || disabled;\n\n  return (\n    <ButtonPrimitive\n      className={cn(\n        buttonVariants({ variant, size, fullWidth }),\n        isLoading && \"relative\",\n        className\n      )}\n      data-loading={isLoading || undefined}\n      data-slot=\"button\"\n      disabled={isDisabled}\n      ref={ref}\n      type={type}\n      {...props}\n    >\n      <span\n        className={cn(\n          \"inline-flex items-center justify-center gap-2\",\n          isLoading ? \"invisible\" : \"visible\"\n        )}\n      >\n        {children}\n      </span>\n      {isLoading && (\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          <LoaderCircleIcon\n            aria-hidden=\"true\"\n            className=\"animate-spin\"\n            size={16}\n          />\n        </div>\n      )}\n    </ButtonPrimitive>\n  );\n};\n\nButton.displayName = \"Button\";\n\nexport type { ButtonVariantsProps };\nexport { Button, buttonVariants };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}