{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segmented-control",
  "title": "Segmented control",
  "description": "Sliding-thumb exclusive switch.",
  "dependencies": [
    "radix-ui@^1.6.7"
  ],
  "registryDependencies": [
    "https://components.exe.xyz/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/segmented-control.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype SegmentedControlContextValue = {\n  size: \"sm\" | \"md\"\n}\n\nconst SegmentedControlContext =\n  React.createContext<SegmentedControlContextValue>({ size: \"md\" })\n\nfunction itemIds(children: React.ReactNode) {\n  const ids: string[] = []\n  React.Children.forEach(children, (child) => {\n    if (\n      React.isValidElement<{ id?: string }>(child) &&\n      typeof child.props.id === \"string\"\n    ) {\n      ids.push(child.props.id)\n    }\n  })\n  return ids\n}\n\nfunction SegmentedControl({\n  selectedKey,\n  defaultSelectedKey,\n  onSelectionChange,\n  size = \"md\",\n  className,\n  children,\n  \"aria-label\": ariaLabel,\n}: {\n  selectedKey?: string\n  defaultSelectedKey?: string\n  onSelectionChange?: (key: string) => void\n  size?: \"sm\" | \"md\"\n  className?: string\n  children?: React.ReactNode\n  \"aria-label\": string\n}) {\n  const ids = itemIds(children)\n  const fallback = defaultSelectedKey ?? ids.at(0) ?? \"\"\n  const [uncontrolled, setUncontrolled] = React.useState(fallback)\n  const value =\n    selectedKey && selectedKey.length > 0\n      ? selectedKey\n      : uncontrolled || fallback\n\n  const rootRef = React.useRef<HTMLDivElement>(null)\n  const [thumb, setThumb] = React.useState({ left: 0, width: 0 })\n\n  const measure = React.useCallback(() => {\n    const root = rootRef.current\n    if (!root) return\n    const selected = root.querySelector<HTMLElement>(\n      '[data-slot=\"segmented-control-item\"][data-state=\"on\"]'\n    )\n    if (!selected) return\n    setThumb({ left: selected.offsetLeft, width: selected.offsetWidth })\n  }, [])\n\n  React.useLayoutEffect(() => {\n    measure()\n  }, [measure, value, children, size])\n\n  React.useEffect(() => {\n    const root = rootRef.current\n    if (!root) return\n    const ro = new ResizeObserver(measure)\n    ro.observe(root)\n    return () => ro.disconnect()\n  }, [measure])\n\n  return (\n    <SegmentedControlContext.Provider value={{ size }}>\n      <ToggleGroupPrimitive.Root\n        ref={rootRef}\n        type=\"single\"\n        data-slot=\"segmented-control\"\n        data-size={size}\n        aria-label={ariaLabel}\n        value={value}\n        onValueChange={(next) => {\n          if (!next) return\n          if (selectedKey === undefined) setUncontrolled(next)\n          onSelectionChange?.(next)\n        }}\n        className={cn(\n          \"relative inline-flex items-stretch rounded-[2px] border border-border bg-muted p-0.5\",\n          size === \"sm\" ? \"h-7\" : \"h-8\",\n          className\n        )}\n      >\n        <span\n          aria-hidden\n          data-slot=\"segmented-control-thumb\"\n          className=\"pointer-events-none absolute top-0.5 bottom-0.5 rounded-[2px] bg-card shadow-sm transition-[left,width] duration-150 ease-out motion-reduce:transition-none\"\n          style={{ left: thumb.left, width: thumb.width }}\n        />\n        {children}\n      </ToggleGroupPrimitive.Root>\n    </SegmentedControlContext.Provider>\n  )\n}\n\nfunction SegmentedControlItem({\n  id,\n  isDisabled,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"button\">, \"value\" | \"disabled\"> & {\n  id: string\n  isDisabled?: boolean\n}) {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      value={id}\n      disabled={isDisabled}\n      data-slot=\"segmented-control-item\"\n      className={cn(\n        \"relative z-10 inline-flex items-center justify-center rounded-[2px] px-2.5 font-medium whitespace-nowrap text-muted-foreground transition-colors outline-none select-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-foreground\",\n        size === \"sm\" ? \"text-xs\" : \"text-sm\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { SegmentedControl, SegmentedControlItem }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}