{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segmented-control",
  "title": "Segmented Control",
  "description": "A pill of liquid glass you can drag between options.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://liquikit.dev/r/core.json",
    "https://liquikit.dev/r/glass.json",
    "https://liquikit.dev/r/segments.json"
  ],
  "files": [
    {
      "path": "src/segmented-control.tsx",
      "content": "\"use client\";\n\nimport { Radio } from \"@base-ui/react/radio\";\nimport { RadioGroup } from \"@base-ui/react/radio-group\";\nimport { type CSSProperties, useRef, useState } from \"react\";\nimport { GlassSegmentedSurface, type UseGlassSegmentedResult } from \"./glass\";\nimport { indicesOf, Name, over } from \"./segments\";\nimport { cx, type GlassOptions, type Segment, toSegment } from \"./types\";\nimport \"./liquikit.css\";\n\nexport type SegmentedControlProps = Omit<\n\tRadioGroup.Props,\n\t| \"value\"\n\t| \"defaultValue\"\n\t| \"onValueChange\"\n\t| \"children\"\n\t| \"render\"\n\t| \"className\"\n\t| \"style\"\n> &\n\tGlassOptions & {\n\t\toptions: ReadonlyArray<string | Segment>;\n\t\tvalue?: string;\n\t\tdefaultValue?: string;\n\t\tonValueChange?: (\n\t\t\tvalue: string,\n\t\t\teventDetails?: RadioGroup.ChangeEventDetails,\n\t\t) => void;\n\t\theight?: number;\n\t\tclassName?: string;\n\t\tstyle?: CSSProperties;\n\t};\n\nexport function SegmentedControl({\n\toptions,\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\theight,\n\ttheme,\n\tlens,\n\tliquid,\n\tdisabled,\n\tclassName,\n\tstyle,\n\t...groupProps\n}: SegmentedControlProps) {\n\tconst segments = options.map(toSegment);\n\tconst controls = useRef<UseGlassSegmentedResult>(null);\n\tconst [uncontrolled, setUncontrolled] = useState(\n\t\tdefaultValue ?? segments[0]?.value,\n\t);\n\tconst current = value ?? uncontrolled;\n\n\tconst choose = (\n\t\tchosen: string,\n\t\teventDetails?: RadioGroup.ChangeEventDetails,\n\t) => {\n\t\tif (chosen === current) return;\n\t\tif (value === undefined) setUncontrolled(chosen);\n\t\tonValueChange?.(chosen, eventDetails);\n\t};\n\n\treturn (\n\t\t<RadioGroup\n\t\t\t{...groupProps}\n\t\t\tvalue={current}\n\t\t\tonValueChange={(next, eventDetails) => {\n\t\t\t\tchoose(String(next), eventDetails);\n\t\t\t\tcontrols.current?.flash();\n\t\t\t}}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={cx(\"glass-ui-segmented\", className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t<GlassSegmentedSurface\n\t\t\t\toptions={segments}\n\t\t\t\tselected={indicesOf(segments, [current])}\n\t\t\t\theight={height}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tlens={lens}\n\t\t\t\ttheme={theme}\n\t\t\t\tliquid={liquid}\n\t\t\t\tonDragSelect={(index) => {\n\t\t\t\t\tconst segment = segments[index];\n\t\t\t\t\tif (segment && !segment.disabled) choose(segment.value);\n\t\t\t\t}}\n\t\t\t\tcontrolsRef={controls}\n\t\t\t\titems={(bounds) =>\n\t\t\t\t\tsegments.map((segment, index) => (\n\t\t\t\t\t\t<Radio.Root\n\t\t\t\t\t\t\tkey={segment.value}\n\t\t\t\t\t\t\tvalue={segment.value}\n\t\t\t\t\t\t\tdisabled={segment.disabled}\n\t\t\t\t\t\t\tclassName=\"glass-segmented__hit glass-ui-item\"\n\t\t\t\t\t\t\tstyle={over(bounds, index)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Name segment={segment} />\n\t\t\t\t\t\t</Radio.Root>\n\t\t\t\t\t))\n\t\t\t\t}\n\t\t\t/>\n\t\t</RadioGroup>\n\t);\n}\n",
      "type": "registry:ui",
      "target": "@components/liquikit/segmented-control.tsx"
    }
  ],
  "type": "registry:ui"
}