{
  "name": "segmented-control",
  "type": "registry:ui",
  "title": "SegmentedControl",
  "description": "2–4 visible exclusive options. More than 4 or an unknown count belongs in a Select/Combobox.",
  "dependencies": [
    "@candlelight-ds/tokens",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "components/ui/SegmentedControl.tsx",
      "type": "registry:ui",
      "content": "'use client'\n\n/**\n * SegmentedControl — 2–4 mutually exclusive options, all visible.\n * The selected segment sits on fill-active; the rest ride the hover ramp.\n *\n * Use when: switching between a few exclusive views or modes.\n * Don't use when: more than 4 options or an unknown count (Select/Combobox)\n * or navigation (links).\n */\n\nimport { cn } from '@/lib/utils'\n\nexport interface SegmentedOption<T extends string> {\n  value: T\n  label: string\n  /** Trailing count badge. */\n  count?: number\n}\n\ninterface SegmentedControlProps<T extends string> {\n  options: ReadonlyArray<SegmentedOption<T>>\n  value: T\n  onChange: (value: T) => void\n  /** Accessible name for the group. */\n  label: string\n  className?: string\n}\n\nexport function SegmentedControl<T extends string>({\n  options,\n  value,\n  onChange,\n  label,\n  className,\n}: SegmentedControlProps<T>) {\n  return (\n    <div role=\"tablist\" aria-label={label} className={cn('flex gap-1 rounded-sm bg-fill-rest p-1', className)}>\n      {options.map((option) => {\n        const selected = option.value === value\n        return (\n          <button\n            key={option.value}\n            role=\"tab\"\n            aria-selected={selected}\n            onClick={() => onChange(option.value)}\n            className={cn(\n              'flex flex-1 items-center justify-center gap-1.5 rounded-sm px-3 py-1 text-meta font-medium transition-colors',\n              selected\n                ? 'bg-fill-active text-ink'\n                : 'text-ink-mute hover:bg-fill-hover hover:text-ink'\n            )}\n          >\n            {option.label}\n            {typeof option.count === 'number' ? (\n              <span className=\"tabular-nums text-micro text-ink-faint\">{option.count}</span>\n            ) : null}\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n",
      "target": "components/ui/SegmentedControl.tsx"
    }
  ],
  "meta": {
    "candlelight": {
      "category": "primitive",
      "gRules": [
        "G1"
      ],
      "useWhen": "Switching between a few exclusive views or modes.",
      "dontUseWhen": "More than 4 options, unknown counts, or navigation.",
      "states": [
        "selected (fill-active)",
        "unselected (hover ramp)",
        "with counts"
      ],
      "keyboard": [
        {
          "keys": "click/tab",
          "does": "switches; selection is immediate (optimistic)"
        }
      ],
      "acceptanceTests": [
        "The selected segment sits on fill-active; the rest ride the hover ramp."
      ]
    }
  },
  "registryDependencies": [
    "utils"
  ]
}