{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segmented-control",
  "type": "registry:ui",
  "title": "Segmented Control",
  "description": "A pill tab switcher with a sliding sky indicator that springs between options.",
  "files": [
    {
      "path": "registry/ui/segmented-control.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nexport interface SegmentedControlProps {\n  options: string[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  className?: string;\n}\n\nexport function SegmentedControl({\n  options,\n  value,\n  defaultValue,\n  onValueChange,\n  className = \"\",\n}: SegmentedControlProps) {\n  const [inner, setInner] = React.useState(defaultValue ?? options[0]);\n  const active = value ?? inner;\n  const refs = React.useRef<(HTMLButtonElement | null)[]>([]);\n  const [box, setBox] = React.useState({ left: 0, width: 0 });\n\n  React.useLayoutEffect(() => {\n    const el = refs.current[options.indexOf(active)];\n    if (el) setBox({ left: el.offsetLeft, width: el.offsetWidth });\n  }, [active, options]);\n\n  const select = (option: string) => {\n    if (value === undefined) setInner(option);\n    onValueChange?.(option);\n  };\n\n  return (\n    <div\n      role=\"tablist\"\n      className={[\"relative inline-flex rounded-full border border-white/15 p-[3px]\", className].join(\" \")}\n    >\n      <span\n        aria-hidden\n        className=\"absolute bottom-[3px] top-[3px] rounded-full bg-sky-300 transition-all duration-500 [transition-timing-function:cubic-bezier(.2,1.2,.4,1)]\"\n        style={{ left: box.left, width: box.width }}\n      />\n      {options.map((option, i) => (\n        <button\n          key={option}\n          ref={(el) => {\n            refs.current[i] = el;\n          }}\n          role=\"tab\"\n          aria-selected={active === option}\n          onClick={() => select(option)}\n          className={[\n            \"relative z-10 rounded-full px-[18px] py-1.5 text-[13px] transition-colors duration-300\",\n            active === option ? \"font-medium text-sky-950\" : \"text-zinc-400 hover:text-zinc-200\",\n          ].join(\" \")}\n        >\n          {option}\n        </button>\n      ))}\n    </div>\n  );\n}\n"
    }
  ]
}