{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "description": "Toggles that merge into one capsule of glass.",
  "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/toggle-group.tsx",
      "content": "\"use client\";\n\nimport { Toggle } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as BaseToggleGroup } from \"@base-ui/react/toggle-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 ToggleGroupProps = Omit<\n\tBaseToggleGroup.Props,\n\t| \"value\"\n\t| \"defaultValue\"\n\t| \"onValueChange\"\n\t| \"children\"\n\t| \"render\"\n\t| \"className\"\n\t| \"style\"\n\t| \"orientation\"\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?: BaseToggleGroup.ChangeEventDetails,\n\t\t) => void;\n\t\theight?: number;\n\t\tclassName?: string;\n\t\tstyle?: CSSProperties;\n\t};\n\nexport function ToggleGroup({\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}: ToggleGroupProps) {\n\tconst segments = options.map(toSegment);\n\tconst controls = useRef<UseGlassSegmentedResult>(null);\n\tconst [uncontrolled, setUncontrolled] = useState<string[]>(defaultValue);\n\tconst current = value ?? uncontrolled;\n\n\tconst press = (\n\t\tpressed: string[],\n\t\teventDetails?: BaseToggleGroup.ChangeEventDetails,\n\t) => {\n\t\tif (value === undefined) setUncontrolled(pressed);\n\t\tonValueChange?.(pressed, eventDetails);\n\t};\n\n\treturn (\n\t\t<BaseToggleGroup\n\t\t\t{...groupProps}\n\t\t\tvalue={current}\n\t\t\tonValueChange={(next, eventDetails) => {\n\t\t\t\tpress(next.map(String), 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={\n\t\t\t\t\tgroupProps.multiple\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: (index) => {\n\t\t\t\t\t\t\t\tconst segment = segments[index];\n\t\t\t\t\t\t\t\tif (!segment || segment.disabled) return;\n\t\t\t\t\t\t\t\tif (current[0] !== segment.value) press([segment.value]);\n\t\t\t\t\t\t\t}\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<Toggle\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</Toggle>\n\t\t\t\t\t))\n\t\t\t\t}\n\t\t\t/>\n\t\t</BaseToggleGroup>\n\t);\n}\n",
      "type": "registry:ui",
      "target": "@components/liquikit/toggle-group.tsx"
    }
  ],
  "type": "registry:ui"
}