{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-time-picker-1","type":"registry:block","title":"Inline time panel","description":"Hour and minute columns rendered in place, with Now, Clear and a live readout.","dependencies":[],"registryDependencies":["card","@reui/time-picker"],"files":[{"path":"c-time-picker-1.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  TimePicker,\n  TimePickerPanel,\n} from \"@/components/reui/time-picker\"\n\nimport { Card } from \"@/components/ui/card\"\n\nexport function Pattern() {\n  /* `HH:mm` in 24-hour time, or `null` once Clear empties it. Preselected\n     so each column opens centered on its selected row. */\n  const [value, setValue] = useState<string | null>(\"14:30\")\n\n  return (\n    <div className=\"flex flex-col items-center gap-3\">\n      {/* `py-0` lets the panel sit flush, so it reads like the popover. */}\n      <Card className=\"w-fit py-0\">\n        <TimePicker\n          value={value}\n          onValueChange={setValue}\n          aria-label=\"Meeting time\"\n        >\n          <TimePickerPanel />\n        </TimePicker>\n      </Card>\n      <p role=\"status\" className=\"text-muted-foreground text-sm\">\n        {value ? `Meeting at ${value}` : \"No meeting time set\"}\n      </p>\n    </div>\n  )\n}","target":"components/examples/c-time-picker-1.tsx"}],"meta":{"order":1,"label":"Inline Panel"}}