Time Picker

1import { TimePicker } from '@/ui/Input'23<Field label="Deployment window" description="Times are in Europe/London (BST).">4  <TimePicker5    value={time}                    // minutes since midnight6    onChange={setTime}7    interval={30}                   // the design decision8    min={9 * 60}                    // constrain to what is valid…9    max={17 * 60}                   // …and the list stops being a scroll10    hour12={locale.hour12}11  />12</Field>1314// Parse loosely. "1430", "14:30", "2:30 pm" and "2.30pm" are one time.15function parseTime(input: string): number | null {16  const s = input.trim().toLowerCase()17  const m = /^(\d{1,2})[:.]?(\d{2})?\s*(am|pm)?$/.exec(s)18  if (!m) return null19  let h = Number(m[1])20  const min = Number(m[2] ?? 0)21  if (m[3] === 'pm' && h < 12) h += 1222  if (m[3] === 'am' && h === 12) h = 023  if (h > 23 || min > 59) return null24  return h * 60 + min25}2627// Open at the current value. A list that starts at 00:00 hides the user's28// own selection thirty-five rows down.29React.useEffect(() => {30  if (!open) return31  listRef.current32    ?.querySelector('[aria-selected="true"]')33    ?.scrollIntoView({ block: 'center' })34}, [open])3536// Store the instant, not the wall-clock time, whenever a date is involved.37const instant = zonedTimeToUtc(setMinutes(setHours(date, h), m), zone)

<div class="ds-field">
  <label for="time">Deployment window</label>
  <p id="time-hint">Times are in Europe/London (BST). Between 09:00 and 17:00.</p>

  <input
    id="time"
    type="text"
    inputmode="numeric"
    role="combobox"
    aria-expanded="true"
    aria-controls="time-list"
    aria-activedescendant="slot-1730"
    aria-describedby="time-hint"
    autocomplete="off"
    value="17:30"
  />
</div>

<ul id="time-list" role="listbox" aria-label="Time">
  <li id="slot-1700" role="option" aria-selected="false">17:00</li>
  <li id="slot-1730" role="option" aria-selected="true">17:30</li>
  <li id="slot-1800" role="option" aria-selected="false" aria-disabled="true">18:00</li>
</ul>

.ds-timepicker input {
  /* Width is a hint about the value. "11:45 pm" is the widest case. */
  inline-size: 7rem;
  block-size: 36px;
  padding-inline: 12px 32px;
  border: 1px solid var(--ds-border-interactive);
  border-radius: var(--radius-md);
  background: var(--ds-surface-inset);
  /* Aligns a column of times on the colon and stops the field shifting. */
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.ds-timepicker__list {
  inline-size: 9rem;
  max-block-size: 224px;             /* ~8 rows, then scroll */
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-lg);
  background: var(--ds-surface-overlay);
  box-shadow: var(--shadow-e4);
  /* Slots snap so a flick lands on a row rather than between two. */
  scroll-snap-type: y proximity;
}

[role='option'] {
  block-size: 30px;
  padding-inline: 8px;
  border-radius: var(--radius-md);
  scroll-snap-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ds-fg-secondary);
}

[role='option'][aria-selected='true'] {
  background: var(--ds-accent-subtle);
  color: var(--ds-fg);
}
[role='option'][aria-disabled='true'] { color: var(--ds-fg-disabled); }

@media (pointer: coarse) {
  [role='option'] { block-size: 44px; }
  .ds-timepicker input { block-size: 44px; }
}