{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:component",
  "title": "Button",
  "author": "George Drury <info@georgedrury.co.uk",
  "description": "A versatile button component with multiple variants and sizes. Supports asChild pattern for rendering as different elements. Uses whitelabel CSS variables for theming.",
  "dependencies": [
    "@radix-ui/react-slot",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/spoke/button.tsx",
      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n\t\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-button text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault:\n\t\t\t\t\t\"bg-button-primary text-button-primary-foreground hover:bg-button-secondary/90\",\n\t\t\t\tdestructive:\n\t\t\t\t\t\"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n\t\t\t\tsecondary:\n\t\t\t\t\t\"bg-button-secondary text-button-secondary-foreground hover:bg-button-secondary/80\",\n\t\t\t\tghost:\n\t\t\t\t\t\"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n\t\t\t\tsm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n\t\t\t\tlg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n\t\t\t\ticon: \"size-9\",\n\t\t\t\t\"icon-sm\": \"size-8\",\n\t\t\t\t\"icon-lg\": \"size-10\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t}\n)\n\nfunction Button({\n\tclassName,\n\tvariant,\n\tsize,\n\tasChild = false,\n\t...props\n}: React.ComponentProps<\"button\"> &\n\tVariantProps<typeof buttonVariants> & {\n\t\tasChild?: boolean\n\t}) {\n\tconst Comp = asChild ? Slot : \"button\"\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"button\"\n\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport { Button, buttonVariants }\n",
      "type": "registry:component"
    }
  ],
  "cssVars": {
    "theme": {
      "color-button-primary": "var(--button-primary, var(--primary))",
      "color-button-primary-foreground": "var(--button-primary-foreground, var(--primary-foreground))",
      "color-button-secondary": "var(--button-secondary, var(--secondary))",
      "color-button-secondary-foreground": "var(--button-secondary-foreground, var(--secondary-foreground))",
      "radius-button": "var(--button-radius, var(--radius))"
    }
  },
  "meta": {
    "example": "<Button>Click me</Button>",
    "lineage": [
      {
        "name": "Shadcn",
        "href": "https://ui.shadcn.com/docs/components/button"
      },
      {
        "name": "Spoke"
      }
    ]
  },
  "categories": [
    "shadcn"
  ]
}