# TimePicker

## 2026-08-05 — `selectable` prop (click-to-pick dropdown)

**Prompted by:** campaign schedule review — the time should be pickable with the mouse like the date field, not only typed.

### What changed
- New optional `selectable` prop (default `false`, so existing usages are unchanged). Adds a chevron that opens a scrollable list of times on the `minuteStep` grid; clicking one sets the value. The segments stay keyboard-editable, so it's additive to the segmented input, not a replacement.
- The list opens scrolled to the current value; it falls back to an hourly grid when `minuteStep` is too fine (<5) to avoid a 1440-row list.
- The campaign composer's schedule step passes `selectable` (with `minuteStep={30}`).

### Why
- Keeps the fast keyboard-first segmented entry the component was built for, while giving mouse users the same click-to-select affordance as the DatePicker — without regressing to a plain `Select`.

## 2026-08-05 — `minuteStep` prop (minute granularity)

**Prompted by:** campaign schedule review — a start time of `4:40 PM` read as too fine-grained.

### What changed
- New optional `minuteStep` prop (default `1`, so existing usages are unchanged). Arrow keys step the minute by it and any typed minute snaps to the nearest multiple, so the segment can only emit a legal value.
- The campaign composer's schedule step passes `minuteStep={30}` — the send/start time is now restricted to `:00`/`:30`.

### Why
- A campaign start time only needs half-hour resolution; letting it land on arbitrary minutes (`:40`) is noise, not flexibility. Kept as a per-usage opt-in so other time inputs stay any-minute.

## 2026-07-28 — New component (segmented time input)

**Prompted by:** Hellen (PO)

### What changed
- New `TimePicker`: a compact segmented `HH : MM AM/PM` input, replacing a long `Select` time dropdown that read as clunky UX.
- Type digits directly; ↑/↓ increment/decrement (loop); ←/→ move between segments; two-digit entry auto-advances. "a"/"p" set AM/PM.
- Controlled via a 24-hour `"HH:MM"` string, matching `<input type="time">` values.

### Why
- A single scrollable Select of 48+ time options is slow to scan and clumsy to operate; a segmented, keyboard-first input is faster and more compact for entering a known time (campaign schedule / batch send window).

### Affected tokens / files
- `packages/shadcn/src/components/ui/time-picker.tsx` (new)
- Chrome: border/focus tokens mirror `input.tsx` (`border-input`, `focus-within:border-primary` + `ring-primary/20`), sharp corners (no radius), `text-body-medium`.