{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segmented-control",
  "title": "Segmented control",
  "description": "2–4 options, sliding thumb",
  "dependencies": [
    "cn@^0.4.0"
  ],
  "registryDependencies": [
    "@kit/hook-use-reduced-motion"
  ],
  "files": [
    {
      "path": "components/kit/segmented-control.tsx",
      "content": "'use client';\nimport { cn } from 'cn';\nimport { useReducedMotion } from '@/hooks/use-reduced-motion';\n\ntype Props<T extends string> = {\n  segments: readonly { value: T; label: string }[];\n  value: T;\n  onChange: (value: T) => void;\n  /** Names the group for screen readers (\"View\"). */\n  'aria-label'?: string;\n  className?: string;\n};\n\n/** A sliding thumb over 2–4 mutually exclusive options. For content panes use Tabs. */\nexport function SegmentedControl<T extends string>({ segments, value, onChange, className, ...props }: Props<T>) {\n  const reduced = useReducedMotion();\n  const index = Math.max(\n    0,\n    segments.findIndex((s) => s.value === value)\n  );\n  return (\n    <div role=\"radiogroup\" aria-label={props['aria-label']} className={cn('bg-muted relative flex rounded-lg p-[3px]', className)}>\n      <span\n        aria-hidden\n        className={cn('bg-card absolute inset-y-[3px] left-[3px] rounded-md shadow-sm', !reduced && 'transition-transform duration-200 ease-out')}\n        style={{ width: `calc((100% - 6px) / ${segments.length})`, transform: `translateX(${index * 100}%)` }}\n      />\n      {segments.map((s) => {\n        const active = s.value === value;\n        return (\n          <button\n            key={s.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            onClick={() => onChange(s.value)}\n            className={cn(\n              'focus-visible:ring-ring/50 relative h-8 flex-1 truncate rounded-md px-3 text-sm outline-none focus-visible:ring-[3px]',\n              active ? 'text-foreground font-semibold' : 'text-muted-foreground hover:text-foreground'\n            )}>\n            {s.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/segmented-control.tsx"
    }
  ],
  "meta": {
    "exports": [
      "SegmentedControl"
    ],
    "api": "<SegmentedControl segments={[{value,label}]} value onChange aria-label />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "inputs"
  ],
  "type": "registry:component"
}