{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/badge/Badge.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { reactiveOmit } from '@vueuse/core'\nimport { Primitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { badgeVariants } from './badge.variants'\n\n// Inlined unions: SFC compiler can't extract runtime props from\n// `BadgeVariants['variant']` or reka-ui's PrimitiveProps.\nconst props = defineProps<{\n  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info'\n  class?: HTMLAttributes['class']\n  asChild?: boolean\n  as?: string | object\n}>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n</script>\n\n<template>\n  <Primitive data-uipkge data-slot=\"badge\" :class=\"cn(badgeVariants({ variant }), props.class)\" v-bind=\"delegatedProps\">\n    <slot />\n  </Primitive>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/badge/Badge.vue"
    },
    {
      "path": "packages/registry-vue/components/badge/badge.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 consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\nexport const badgeVariants = cva(\n  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-colors duration-200 overflow-hidden',\n  {\n    variants: {\n      variant: {\n        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',\n        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',\n        destructive:\n          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n        success:\n          'border-transparent bg-[var(--success)]/10 text-[var(--success)] dark:text-[var(--success)] [a&]:hover:bg-[var(--success)]/20',\n        warning:\n          'border-transparent bg-[var(--warning)]/10 text-[var(--warning)] dark:text-[var(--warning)] [a&]:hover:bg-[var(--warning)]/20',\n        info: 'border-transparent bg-[var(--info)]/10 text-[var(--info)] dark:text-[var(--info)] [a&]:hover:bg-[var(--info)]/20',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/badge/badge.variants.ts"
    },
    {
      "path": "packages/registry-vue/components/badge/index.ts",
      "content": "export { default as Badge } from './Badge.vue'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// Component.vue <-> index.ts circular import that broke dev SSR for Card).\nexport { badgeVariants, type BadgeVariants } from './badge.variants'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/badge/index.ts"
    }
  ],
  "dependencies": [
    "@vueuse/core",
    "class-variance-authority",
    "reka-ui"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Small inline label for status, counts, or tags — sits beside other content, not as a standalone control. Seven variants: `default`, `secondary`, `destructive`, `outline`, `success`, `warning`, `info`.",
  "categories": [
    "data-display"
  ]
}