{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-time-picker-4","type":"registry:block","title":"12-hour clock with seconds","description":"Hour, minute, second and AM/PM columns for a stream go-live time.","dependencies":[],"registryDependencies":["field","@reui/time-picker"],"files":[{"path":"c-time-picker-4.tsx","type":"registry:block","content":"import { TimePicker } from \"@/components/reui/time-picker\"\n\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/components/ui/field\"\n\nexport function Pattern() {\n  return (\n    <div className=\"w-full max-w-xs\">\n      <Field>\n        <FieldLabel id=\"stream-live-label\" htmlFor=\"stream-live\">\n          Stream goes live\n        </FieldLabel>\n        {/* Only the display is 12-hour: the trigger shows 02:45:30 PM while\n            the value stays 24-hour `HH:mm:ss`, \"14:45:30\". The popover\n            gets 4 columns, hour, minute, second and AM/PM. */}\n        <TimePicker\n          id=\"stream-live\"\n          hourCycle={12}\n          granularity=\"second\"\n          defaultValue=\"14:45:30\"\n          aria-labelledby=\"stream-live-label\"\n          aria-describedby=\"stream-live-description\"\n        />\n        <FieldDescription id=\"stream-live-description\">\n          Pick the exact second the broadcast starts.\n        </FieldDescription>\n      </Field>\n    </div>\n  )\n}","target":"components/examples/c-time-picker-4.tsx"}],"meta":{"order":4,"label":"12-Hour Seconds"}}