{
  "name": "chip",
  "type": "registry:ui",
  "title": "Chip",
  "description": "Tiny status/count/label tokens: live (pulsing dot), armed, ready, warn, danger, count, tag. Absorbs every bespoke pill.",
  "dependencies": [
    "@candlelight-ds/tokens",
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "components/ui/Chip.tsx",
      "type": "registry:ui",
      "content": "'use client'\n\n/**\n * Chip — tiny status/count/label tokens. Absorbs every bespoke pill.\n *\n * Use when: marking state (live/armed/ready), counts, or tags on rows and\n * headers.\n * Don't use when: the element triggers a primary action (Button) or fires a\n * one-shot (Pad).\n */\n\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\nconst chipVariants = cva(\n  'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-micro uppercase tracking-chip',\n  {\n    variants: {\n      variant: {\n        live: 'bg-live-chip text-live',\n        armed: 'bg-brass-chip text-brass-hot',\n        quiet: 'bg-fill-active text-ink-faint',\n        ready: 'bg-ready-chip text-ready',\n        warn: 'bg-warn-chip text-warn',\n        danger: 'bg-danger-chip text-danger',\n        count: 'bg-fill-active normal-case tracking-normal tabular-nums text-ink-faint',\n        tag: 'cursor-pointer bg-fill-rest normal-case tracking-normal text-ink-mute transition-colors hover:bg-fill-hover hover:text-ink',\n      },\n      size: {\n        sm: 'px-2 py-0.5 text-nano',\n        md: 'px-2.5 py-0.5 text-micro',\n        lg: 'px-3 py-1 text-micro',\n      },\n    },\n    defaultVariants: { variant: 'quiet', size: 'md' },\n  }\n)\n\ninterface ChipProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof chipVariants> {\n  /** Leading status dot; 'pulse' adds the live ping animation. */\n  dot?: boolean | 'pulse'\n}\n\nexport function Chip({ variant, size, dot, className, children, ...props }: ChipProps) {\n  return (\n    <span className={cn(chipVariants({ variant, size }), className)} {...props}>\n      {dot ? (\n        <span className=\"relative flex h-1.5 w-1.5 shrink-0\">\n          {dot === 'pulse' ? (\n            <span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-60 motion-reduce:animate-none\" />\n          ) : null}\n          <span className=\"relative inline-flex h-1.5 w-1.5 rounded-full bg-current\" />\n        </span>\n      ) : null}\n      {children}\n    </span>\n  )\n}\n",
      "target": "components/ui/Chip.tsx"
    }
  ],
  "meta": {
    "candlelight": {
      "category": "primitive",
      "gRules": [
        "G6",
        "G7"
      ],
      "useWhen": "Marking state (live/armed/ready), counts, or tags on rows and headers.",
      "dontUseWhen": "The element triggers a primary action (Button) or fires a one-shot (Pad).",
      "states": [
        "live",
        "armed",
        "quiet",
        "ready",
        "warn",
        "danger",
        "count",
        "tag",
        "with dot",
        "with pulsing dot"
      ],
      "keyboard": [],
      "acceptanceTests": [
        "The live pulse dies under prefers-reduced-motion.",
        "live and armed are different hues — the eye separates staged from live without reading."
      ]
    }
  },
  "registryDependencies": [
    "utils"
  ]
}