{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-time-picker-10","type":"registry:block","title":"Confirm before applying","description":"Column picks stay a draft until OK, so a shift change applies once.","dependencies":[],"registryDependencies":["field","@reui/time-picker"],"files":[{"path":"c-time-picker-10.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useId, useState } from \"react\"\nimport { TimePicker } 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  /* Only a committed value reaches this state. Column picks, Now and Clear\n     stay a draft in the popover until OK, and closing it discards them, so\n     the roster never sees a half-made change. */\n  const [shiftStart, setShiftStart] = useState<string | null>(\"08:00\")\n\n  return (\n    <div className=\"mx-auto flex w-full max-w-xs flex-col gap-3\">\n      <Field>\n        <FieldLabel id={`${id}-label`} htmlFor={id}>\n          Shift start\n        </FieldLabel>\n        <TimePicker\n          id={id}\n          aria-labelledby={`${id}-label`}\n          aria-describedby={`${id}-hint`}\n          value={shiftStart}\n          onValueChange={setShiftStart}\n          minuteStep={15}\n          /* Also adds OK to the footer, drawn as the primary button. */\n          requireConfirm\n        />\n        <FieldDescription id={`${id}-hint`}>\n          Changes apply when you press OK.\n        </FieldDescription>\n      </Field>\n      {/* Announced once per applied change, not on every pick in the\n          columns. */}\n      <p role=\"status\" className=\"text-muted-foreground text-sm\">\n        {shiftStart ? `Shift starts at ${shiftStart}` : \"No shift start set\"}\n      </p>\n    </div>\n  )\n}","target":"components/examples/c-time-picker-10.tsx"}],"meta":{"order":10,"label":"Confirm Before Apply"}}