{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "chip",
  "title": "Chip",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/chip/Chip.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { chipVariants } from './chip.variants'\n\n// Inlined unions: SFC compiler can't extract runtime props from\n// `ChipVariants['variant'] | ['size']`.\nconst props = defineProps<{\n  variant?: 'default' | 'filled' | 'outlined' | 'elevated' | 'success' | 'warning' | 'destructive'\n  size?: 'sm' | 'default' | 'lg'\n  class?: HTMLAttributes['class']\n  closable?: boolean\n}>()\n\nconst emit = defineEmits<{\n  close: []\n}>()\n</script>\n\n<template>\n  <span :class=\"cn(chipVariants({ variant, size }), props.class)\">\n    <slot />\n    <button\n      v-if=\"closable\"\n      type=\"button\"\n      aria-label=\"Remove item\"\n      class=\"focus-visible:ring-ring hover:bg-foreground/10 ml-0.5 inline-flex min-h-6 min-w-6 items-center justify-center rounded-full focus-visible:ring-1 focus-visible:outline-none\"\n      @click.stop=\"emit('close')\"\n    >\n      <X class=\"size-3\" aria-hidden=\"true\" />\n    </button>\n  </span>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/chip/Chip.vue"
    },
    {
      "path": "packages/registry-vue/components/chip/ChipGroup.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    class?: HTMLAttributes['class']\n    selected?: string[]\n    multiple?: boolean\n    filter?: boolean\n    column?: boolean\n    mandatory?: boolean\n    max?: number\n    disabled?: boolean\n  }>(),\n  {\n    selected: () => [],\n    multiple: false,\n    filter: false,\n    column: false,\n    mandatory: false,\n    disabled: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'update:selected': [value: string[]]\n}>()\n\nfunction isSelected(value: string) {\n  return props.selected.includes(value)\n}\n\nfunction toggle(value: string) {\n  if (props.disabled) return\n\n  let newSelected: string[]\n\n  if (props.multiple) {\n    if (isSelected(value)) {\n      newSelected = props.selected.filter((v) => v !== value)\n    } else {\n      if (props.max && props.selected.length >= props.max) {\n        newSelected = [...props.selected.slice(1), value]\n      } else {\n        newSelected = [...props.selected, value]\n      }\n    }\n  } else {\n    if (isSelected(value) && !props.mandatory) {\n      newSelected = []\n    } else {\n      newSelected = [value]\n    }\n  }\n\n  emit('update:selected', newSelected)\n}\n</script>\n\n<template>\n  <div\n    :class=\"['flex flex-wrap gap-2', column ? 'flex-col' : '', filter ? 'flex-wrap' : '', props.class]\"\n    :data-chip-group=\"true\"\n    :data-multiple=\"multiple || undefined\"\n    :data-filter=\"filter || undefined\"\n  >\n    <slot :selected=\"selected\" :multiple=\"multiple\" :filter=\"filter\" :is-selected=\"isSelected\" :toggle=\"toggle\" />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/chip/ChipGroup.vue"
    },
    {
      "path": "packages/registry-vue/components/chip/chip.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 chipVariants = cva(\n  'inline-flex items-center justify-center gap-1 rounded-full text-xs font-medium w-fit whitespace-nowrap shrink-0 transition-colors duration-200 overflow-hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default: 'bg-muted text-muted-foreground hover:bg-muted/80',\n        filled: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        outlined: 'border border-current bg-transparent hover:bg-accent',\n        elevated: 'bg-primary/10 text-primary shadow-sm hover:bg-primary/20',\n        success: 'bg-[var(--success)]/10 text-[var(--success)] dark:text-[var(--success)] hover:bg-[var(--success)]/20',\n        warning: 'bg-[var(--warning)]/10 text-[var(--warning)] dark:text-[var(--warning)] hover:bg-[var(--warning)]/20',\n        destructive: 'bg-destructive/10 text-destructive dark:text-destructive hover:bg-destructive/20',\n      },\n      size: {\n        sm: 'h-6 px-2 text-xs',\n        default: 'h-7 px-2.5 text-xs',\n        lg: 'h-8 px-3 text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ChipVariants = VariantProps<typeof chipVariants>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/chip/chip.variants.ts"
    },
    {
      "path": "packages/registry-vue/components/chip/index.ts",
      "content": "export { default as Chip } from './Chip.vue'\nexport { default as ChipGroup } from './ChipGroup.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 { chipVariants, type ChipVariants } from './chip.variants'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/chip/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Compact, removable tag — typically used inside `tags-input` or as a filter pill. Seven variants (`default`, `filled`, `outlined`, `elevated`, `success`, `warning`, `destructive`), three sizes, and an optional close button.",
  "categories": [
    "data-display"
  ]
}