{
  "name": "segmented-input-rgb-demo",
  "type": "registry:example",
  "registryDependencies": [
    "segmented-input"
  ],
  "files": [
    {
      "path": "examples/segmented-input-rgb-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  SegmentedInput,\n  SegmentedInputItem,\n} from \"@/registry/bases/radix/ui/segmented-input\";\n\nexport default function SegmentedInputRgbDemo() {\n  const [rgb, setRgb] = React.useState({\n    r: 255,\n    g: 128,\n    b: 0,\n  });\n\n  const onChannelChange = React.useCallback(\n    (channel: keyof typeof rgb) =>\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const value = Number.parseInt(event.target.value, 10);\n        if (!Number.isNaN(value) && value >= 0 && value <= 255) {\n          setRgb((prev) => ({\n            ...prev,\n            [channel]: value,\n          }));\n        }\n      },\n    [],\n  );\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <label className=\"text-sm leading-none font-medium\">RGB Color</label>\n      <SegmentedInput className=\"w-fit\" aria-label=\"RGB color input\">\n        <SegmentedInputItem\n          placeholder=\"255\"\n          value={rgb.r}\n          onChange={onChannelChange(\"r\")}\n          className=\"w-16\"\n          inputMode=\"numeric\"\n          pattern=\"[0-9]*\"\n          min=\"0\"\n          max=\"255\"\n          aria-label=\"Red channel (0-255)\"\n        />\n        <SegmentedInputItem\n          placeholder=\"128\"\n          value={rgb.g}\n          onChange={onChannelChange(\"g\")}\n          className=\"w-16\"\n          inputMode=\"numeric\"\n          pattern=\"[0-9]*\"\n          min=\"0\"\n          max=\"255\"\n          aria-label=\"Green channel (0-255)\"\n        />\n        <SegmentedInputItem\n          placeholder=\"0\"\n          value={rgb.b}\n          onChange={onChannelChange(\"b\")}\n          className=\"w-16\"\n          inputMode=\"numeric\"\n          pattern=\"[0-9]*\"\n          min=\"0\"\n          max=\"255\"\n          aria-label=\"Blue channel (0-255)\"\n        />\n      </SegmentedInput>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}