{
  "name": "time-picker-controlled-demo",
  "type": "registry:example",
  "files": [
    {
      "path": "examples/time-picker-controlled-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  TimePicker,\n  TimePickerContent,\n  TimePickerHour,\n  TimePickerInput,\n  TimePickerInputGroup,\n  TimePickerLabel,\n  TimePickerMinute,\n  TimePickerSeparator,\n  TimePickerTrigger,\n} from \"@/registry/bases/radix/ui/time-picker\";\n\nexport default function TimePickerControlledDemo() {\n  const [value, setValue] = React.useState(\"14:30\");\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <TimePicker className=\"w-[280px]\" value={value} onValueChange={setValue}>\n        <TimePickerLabel>Controlled Time Picker</TimePickerLabel>\n        <TimePickerInputGroup>\n          <TimePickerInput segment=\"hour\" />\n          <TimePickerSeparator />\n          <TimePickerInput segment=\"minute\" />\n          <TimePickerTrigger />\n        </TimePickerInputGroup>\n        <TimePickerContent>\n          <TimePickerHour />\n          <TimePickerMinute />\n        </TimePickerContent>\n      </TimePicker>\n      <div className=\"flex gap-2\">\n        <Button variant=\"outline\" size=\"sm\" onClick={() => setValue(\"09:00\")}>\n          Set 9:00 AM\n        </Button>\n        <Button variant=\"outline\" size=\"sm\" onClick={() => setValue(\"14:30\")}>\n          Set 2:30 PM\n        </Button>\n        <Button variant=\"outline\" size=\"sm\" onClick={() => setValue(\"\")}>\n          Clear\n        </Button>\n      </div>\n      <div className=\"text-sm text-muted-foreground\">\n        Selected time:{\" \"}\n        <span className=\"font-mono font-semibold\">{value || \"None\"}</span>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}