{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:component",
  "title": "Button",
  "description": "Interactive button with multiple variants and sizes.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/button/button.tsx",
      "content": "import { forwardRef } from \"react\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@vllnt/ui\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-10 px-4 py-2\",\n        icon: \"size-10\",\n        lg: \"h-11 rounded-md px-8\",\n        sm: \"h-9 rounded-md px-3\",\n      },\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      },\n    },\n  },\n);\n\nexport type ButtonProps = {\n  asChild?: boolean;\n} & React.ButtonHTMLAttributes<HTMLButtonElement> &\n  VariantProps<typeof buttonVariants>;\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ asChild = false, className, size, variant, ...props }, reference) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ className, size, variant }))}\n        ref={reference}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable",
  "examples": [
    {
      "title": "Default",
      "description": "Default button with primary variant.",
      "code": "import { Button } from \"@vllnt/ui\";\n\nexport function Demo() {\n  return <Button>Click me</Button>;\n}\n",
      "framework": "react"
    },
    {
      "title": "Variants",
      "description": "All variant styles in one row.",
      "code": "import { Button } from \"@vllnt/ui\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex gap-2\">\n      <Button variant=\"default\">Default</Button>\n      <Button variant=\"secondary\">Secondary</Button>\n      <Button variant=\"outline\">Outline</Button>\n      <Button variant=\"ghost\">Ghost</Button>\n      <Button variant=\"destructive\">Delete</Button>\n    </div>\n  );\n}\n",
      "framework": "react"
    },
    {
      "title": "Loading state",
      "description": "Disabled button with a spinner — keeps width stable so layouts don't jump.",
      "code": "import { Button, Spinner } from \"@vllnt/ui\";\n\nexport function Demo() {\n  return (\n    <Button disabled>\n      <Spinner className=\"h-4 w-4\" />\n      Saving…\n    </Button>\n  );\n}\n",
      "framework": "react"
    }
  ],
  "props": [
    {
      "name": "variant",
      "type": "\"default\" | \"secondary\" | \"outline\" | \"ghost\" | \"destructive\" | \"link\"",
      "required": false,
      "defaultValue": "\"default\"",
      "description": "Visual variant. Use \"destructive\" only for irreversible actions; \"link\" only inside text flow."
    },
    {
      "name": "size",
      "type": "\"default\" | \"sm\" | \"lg\" | \"icon\"",
      "required": false,
      "defaultValue": "\"default\"",
      "description": "Size token. Use \"icon\" for icon-only buttons."
    },
    {
      "name": "asChild",
      "type": "boolean",
      "required": false,
      "defaultValue": "false",
      "description": "If true, the underlying element is the first child (Radix Slot pattern). Use to render a Next.js Link or another routing element while keeping Button styles."
    },
    {
      "name": "disabled",
      "type": "boolean",
      "required": false,
      "defaultValue": "false",
      "description": "Visually and functionally disabled. Pair with `aria-disabled` if you need event handlers to keep firing."
    },
    {
      "name": "type",
      "type": "\"button\" | \"submit\" | \"reset\"",
      "required": false,
      "defaultValue": "\"button\"",
      "description": "HTML button type. Set explicitly to \"submit\" inside <form>, otherwise the implicit submit behaviour can surprise users."
    },
    {
      "name": "...rest",
      "type": "ButtonHTMLAttributes<HTMLButtonElement>",
      "required": false,
      "description": "All native <button> attributes are forwarded."
    }
  ]
}