{
  "name": "segmented-input-demo",
  "type": "registry:example",
  "registryDependencies": [
    "segmented-input"
  ],
  "files": [
    {
      "path": "examples/segmented-input-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 SegmentedInputDemo() {\n  const [values, setValues] = React.useState({\n    first: \"\",\n    second: \"\",\n    third: \"\",\n  });\n\n  const onValueChange = React.useCallback(\n    (field: keyof typeof values) =>\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        setValues((prev) => ({\n          ...prev,\n          [field]: event.target.value,\n        }));\n      },\n    [],\n  );\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <label className=\"text-sm leading-none font-medium\">\n        Enter your details\n      </label>\n      <SegmentedInput className=\"w-full max-w-sm\">\n        <SegmentedInputItem\n          placeholder=\"First\"\n          value={values.first}\n          onChange={onValueChange(\"first\")}\n          aria-label=\"First name\"\n        />\n        <SegmentedInputItem\n          placeholder=\"Second\"\n          value={values.second}\n          onChange={onValueChange(\"second\")}\n          aria-label=\"Middle name\"\n        />\n        <SegmentedInputItem\n          placeholder=\"Third\"\n          value={values.third}\n          onChange={onValueChange(\"third\")}\n          aria-label=\"Last name\"\n        />\n      </SegmentedInput>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}