{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-time-picker-3","type":"registry:block","title":"Typable time input","description":"Type 930, 14:30 or 2:30 pm, or step through free times with the arrow keys.","dependencies":[],"registryDependencies":["field","@reui/time-picker"],"files":[{"path":"c-time-picker-3.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useId, useState } from \"react\"\nimport {\n  TimePicker,\n  TimePickerContent,\n  TimePickerInput,\n} from \"@/components/reui/time-picker\"\n\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/components/ui/field\"\n\nexport function Pattern() {\n  const id = useId()\n  const [value, setValue] = useState<string | null>(null)\n\n  return (\n    <div className=\"flex w-full max-w-xs flex-col gap-3\">\n      <Field>\n        {/* `htmlFor` alone is enough: the input speaks its own value. */}\n        <FieldLabel htmlFor={id}>Pickup time</FieldLabel>\n        <TimePicker\n          id={id}\n          minuteStep={5}\n          value={value}\n          onValueChange={setValue}\n          aria-describedby={`${id}-description`}\n        >\n          {/* Typed text commits on blur or Enter; unreadable text reverts.\n              The popover anchors on the clock button at the end of the\n              field, so `align=\"end\"` keeps it under the field. */}\n          <TimePickerInput />\n          <TimePickerContent align=\"end\" />\n        </TimePicker>\n        <FieldDescription id={`${id}-description`}>\n          Type 930, 14:30 or 2:30 pm. Times snap to 5 minutes.\n        </FieldDescription>\n      </Field>\n      <p role=\"status\" className=\"text-muted-foreground text-sm\">\n        {value ? `Pickup at ${value}` : \"No pickup time yet\"}\n      </p>\n    </div>\n  )\n}","target":"components/examples/c-time-picker-3.tsx"}],"meta":{"order":3,"label":"Typable Input"}}