{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "button",
  "title": "Button",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/button/Button.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from './button.variants'\n\n// Why inline these unions instead of `ButtonVariants['variant']` /\n// `ButtonVariants['size']`:\n//\n// `ButtonVariants` is `VariantProps<typeof buttonVariants>`. cva's\n// type machinery wraps the variant keys in a conditional + indexed\n// access (`{ [K in keyof Variants]?: ... }`), which Vue 3.5+'s SFC\n// compiler can't resolve. Result: defineProps<> silently drops\n// `variant`/`size` from the runtime declarations, every <Button\n// variant=\"ghost\"> falls back to `default`, and SidebarTrigger\n// renders as a filled primary block.\n//\n// Inline the unions and Vue extracts them cleanly. The cva runtime\n// still validates against the same option set at runtime; we just\n// give the SFC compiler a type it can handle.\ntype Variant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'\ntype Size = 'default' | 'sm' | 'lg' | 'xs' | 'icon' | 'icon-sm' | 'icon-lg'\n\ninterface Props {\n  as?: string\n  asChild?: boolean\n  variant?: Variant\n  size?: Size\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    data-uipkge\n    data-slot=\"button\"\n    :data-variant=\"variant\"\n    :data-size=\"size\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/button/Button.vue"
    },
    {
      "path": "packages/registry-vue/components/button/button.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so `Button.vue` can `import { buttonVariants } from\n * './button.variants'` without creating a circular dependency through the\n * index. See card.variants.ts for the same pattern + the SSR symptom that\n * motivated the split.\n */\nexport const buttonVariants = cva(\n  \"inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 active:scale-[0.97] active:duration-100 touch-manipulation disabled:cursor-not-allowed 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  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline:\n          '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        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        xs: 'h-7 rounded-md gap-1 px-2 has-[>svg]:px-1.5 text-xs',\n        icon: 'size-9',\n        'icon-sm': 'size-8',\n        'icon-lg': 'size-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/button/button.variants.ts"
    },
    {
      "path": "packages/registry-vue/components/button/index.ts",
      "content": "export { default as Button } from './Button.vue'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// Button.vue <-> index.ts circular import that broke dev SSR for Card).\nexport { buttonVariants, type ButtonVariants } from './button.variants'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/button/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "reka-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "The primary clickable primitive — six variants (default, destructive, outline, secondary, ghost, link), seven sizes (default, sm, lg, xs, icon, icon-sm, icon-lg), and an as-child mode that lets you render a router-link or anchor with full button styling.",
  "categories": [
    "control"
  ]
}