@colixsystems/widget-sdk 0.233.0 → 0.235.0

package/dist/datetimepicker-sheet-header.js

@@ -0,0 +1,159 @@
+// REQ-WSDK-PLATFORM §6 — the controls of the web `<DateTimePicker>` sheet:
+// the header that pages and zooms the calendar, its buttons, and the items of
+// the month and year grids.
+
+import React from "react";
+import { Icon } from "./icon.js";
+import { FIELD_OUTLINE_OFF } from "./form-control-tokens.js";
+import { YEARS_PER_PAGE, isMonthAllowed, isYearAllowed, shiftMonth } from "./datetimepicker-calendar.js";
+import { monthNames, monthTitle } from "./datetimepicker-names.js";
+import { CELL_SIZE } from "./datetimepicker-cells.js";
+
+const h = React.createElement;
+export const CALENDAR_WIDTH = CELL_SIZE * 7;
+const NAV_SIZE = 36;
+
+function yearPageStart(year) {
+  return Math.floor(year / YEARS_PER_PAGE) * YEARS_PER_PAGE;
+}
+
+function yearRange(start) {
+  return `${start} – ${start + YEARS_PER_PAGE - 1}`;
+}
+
+/** What the header shows and does at the sheet's current level. */
+function headerModel(state, bounds, locale) {
+  const { view, level } = state;
+  if (level === "days") {
+    const prev = shiftMonth(view, -1);
+    const next = shiftMonth(view, 1);
+    return {
+      title: monthTitle(view.year, view.month, locale),
+      zoom: () => state.showLevel("months"),
+      prev: { label: monthTitle(prev.year, prev.month, locale), disabled: !isMonthAllowed(prev.year, prev.month, bounds), go: () => state.pageMonths(-1) },
+      next: { label: monthTitle(next.year, next.month, locale), disabled: !isMonthAllowed(next.year, next.month, bounds), go: () => state.pageMonths(1) },
+    };
+  }
+  if (level === "months") {
+    const year = (delta) => ({ label: String(view.year + delta), disabled: !isYearAllowed(view.year + delta, bounds), go: () => state.showPeriod({ ...view, year: view.year + delta }) });
+    return { title: String(view.year), zoom: () => state.showLevel("years"), prev: year(-1), next: year(1) };
+  }
+  const start = yearPageStart(view.year);
+  const page = (delta) => ({
+    label: yearRange(start + delta),
+    disabled: !isYearAllowed(delta < 0 ? start - 1 : start + YEARS_PER_PAGE, bounds),
+    go: () => state.showPeriod({ ...view, year: view.year + delta }),
+  });
+  return { title: yearRange(start), zoom: null, prev: page(-YEARS_PER_PAGE), next: page(YEARS_PER_PAGE) };
+}
+
+/** The months of the shown year, or the years of the shown page. */
+export function periodItems(state, bounds, locale) {
+  const { view, draft, today, level } = state;
+  if (level === "months") {
+    return monthNames(locale, "short").map((label, month) => ({
+      key: month,
+      testKey: `month-${month + 1}`,
+      label,
+      spoken: monthTitle(view.year, month, locale),
+      selected: !!draft && draft.year === view.year && draft.month === month,
+      current: today.year === view.year && today.month === month,
+      disabled: !isMonthAllowed(view.year, month, bounds),
+      period: { year: view.year, month },
+    }));
+  }
+  const start = yearPageStart(view.year);
+  return Array.from({ length: YEARS_PER_PAGE }, (_, i) => start + i).map((year) => ({
+    key: year,
+    testKey: `year-${year}`,
+    label: String(year),
+    spoken: String(year),
+    selected: !!draft && draft.year === year,
+    current: today.year === year,
+    disabled: !isYearAllowed(year, bounds),
+    period: { year, month: view.month },
+  }));
+}
+
+/** @param {{View: any, Text: any, Pressable: any}} rn */
+export function makeSheetControls(rn) {
+  const { View, Text, Pressable } = rn;
+
+  const ringed = (t, extra) => ({ hovered, focused, pressed }) => [
+    FIELD_OUTLINE_OFF,
+    ...extra({ hovered, pressed }),
+    focused ? { boxShadow: `0 0 0 2px ${t.focusColor}` } : null,
+  ];
+
+  function NavButton({ t, icon, step, testID }) {
+    return h(
+      Pressable,
+      {
+        onPress: () => {
+          if (!step.disabled) step.go();
+        },
+        accessibilityRole: "button",
+        accessibilityLabel: step.label,
+        disabled: step.disabled,
+        testID,
+        style: ringed(t, ({ hovered }) => [
+          { width: NAV_SIZE, height: NAV_SIZE, borderRadius: NAV_SIZE / 2, alignItems: "center", justifyContent: "center" },
+          hovered && !step.disabled ? { backgroundColor: t.background } : null,
+          step.disabled ? { opacity: t.disabledOpacity } : null,
+        ]),
+      },
+      h(Icon, { name: icon, size: 18, color: t.popover.textColor }),
+    );
+  }
+
+  function TextButton({ t, label, filled, disabled = false, onPress, testID }) {
+    return h(
+      Pressable,
+      {
+        onPress: () => {
+          if (!disabled) onPress();
+        },
+        accessibilityRole: "button",
+        disabled,
+        testID,
+        style: ringed(t, ({ hovered, pressed }) => [
+          { minHeight: 36, paddingHorizontal: 14, borderRadius: t.radius, alignItems: "center", justifyContent: "center" },
+          filled ? { backgroundColor: t.accent } : hovered && !disabled ? { backgroundColor: t.background } : null,
+          pressed ? { opacity: 0.8 } : null,
+          disabled ? { opacity: t.disabledOpacity } : null,
+        ]),
+      },
+      h(Text, { style: { fontFamily: t.fontFamily, fontSize: t.labelSize, fontWeight: "600", color: filled ? t.onAccent : t.accent } }, label),
+    );
+  }
+
+  function Header({ t, state, bounds, locale, titleId, testID }) {
+    const model = headerModel(state, bounds, locale);
+    const title = h(
+      Pressable,
+      {
+        nativeID: titleId,
+        onPress: model.zoom || undefined,
+        disabled: !model.zoom,
+        accessibilityRole: model.zoom ? "button" : "text",
+        accessibilityLabel: model.title,
+        testID: testID ? `${testID}-title` : undefined,
+        style: ringed(t, ({ hovered }) => [
+          { flexDirection: "row", alignItems: "center", gap: 4, minHeight: NAV_SIZE, paddingHorizontal: 10, borderRadius: t.radius },
+          hovered && model.zoom ? { backgroundColor: t.background } : null,
+        ]),
+      },
+      h(Text, { style: { fontFamily: t.fontFamily, fontSize: t.fontSize, fontWeight: "600", color: t.popover.textColor } }, model.title),
+      model.zoom ? h(Icon, { name: "chevron-down", size: 16, color: t.helperColor }) : null,
+    );
+    return h(
+      View,
+      { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", width: CALENDAR_WIDTH } },
+      h(NavButton, { t, icon: "chevron-left", step: model.prev, testID: testID ? `${testID}-previous` : undefined }),
+      title,
+      h(NavButton, { t, icon: "chevron-right", step: model.next, testID: testID ? `${testID}-next` : undefined }),
+    );
+  }
+
+  return { Header, TextButton };
+}

package/dist/datetimepicker-sheet-parts.js

@@ -0,0 +1,146 @@
+// REQ-WSDK-PLATFORM §6 — the grids of the web `<DateTimePicker>` sheet: the
+// month's days, and the months or years of the jump. Bound to react-native-web
+// by ./datetimepicker-sheet.js.
+
+import React from "react";
+import { spaceActivates } from "./form-control-logic.js";
+import { dayKey, isDayAllowed, monthGrid, moveDay } from "./datetimepicker-calendar.js";
+import { dayLabel } from "./datetimepicker-names.js";
+import { CELL_SIZE, cellStyle, cellText, makeFocus, register } from "./datetimepicker-cells.js";
+
+const h = React.createElement;
+const PERIOD_COLUMNS = 3;
+const PERIOD_STEPS = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -PERIOD_COLUMNS, ArrowDown: PERIOD_COLUMNS };
+
+/** @param {{View: any, Text: any, Pressable: any, Platform: any}} rn */
+export function makeSheetParts(rn) {
+  const { View, Text, Pressable, Platform } = rn;
+  const { focusNode, useFocusOn, useRovingStop } = makeFocus(Platform);
+
+  function WeekdayRow({ t, headings }) {
+    return h(
+      View,
+      { role: "row", style: { flexDirection: "row" } },
+      ...headings.map((heading) =>
+        h(
+          View,
+          { key: heading.long, role: "columnheader", "aria-label": heading.long, style: { width: CELL_SIZE, alignItems: "center", paddingVertical: 4 } },
+          h(Text, { "aria-hidden": true, style: { fontFamily: t.fontFamily, fontSize: t.helperSize, fontWeight: "500", color: t.helperColor } }, heading.short),
+        ),
+      ),
+    );
+  }
+
+  function DayCell({ t, cell, state, bounds, locale, weekStart, nodes, onPick, onMove, testID }) {
+    const { outside, ...day } = cell;
+    const key = dayKey(day);
+    const disabled = !isDayAllowed(day, bounds);
+    const selected = key === state.selectedKey;
+    const isToday = key === state.todayKey;
+    const pick = () => {
+      if (!disabled) onPick(day);
+    };
+    return h(
+      Pressable,
+      {
+        ref: register(nodes, key),
+        onPress: pick,
+        onKeyDown: (event) => {
+          const next = moveDay(day, event.key, { shiftKey: event.shiftKey, weekStart });
+          if (!next) {
+            spaceActivates(pick)(event);
+            return;
+          }
+          event.preventDefault();
+          // A bound is a wall: focus never lands on a day it refuses.
+          if (isDayAllowed(next, bounds)) onMove(next);
+        },
+        focusable: key === state.focusKey,
+        role: "gridcell",
+        "aria-selected": selected,
+        "aria-current": isToday ? "date" : undefined,
+        disabled,
+        accessibilityLabel: dayLabel(day, locale),
+        testID: testID ? `${testID}-day-${key}` : undefined,
+        style: cellStyle(t, { selected, current: isToday, disabled, width: CELL_SIZE, height: CELL_SIZE, round: true }),
+      },
+      h(Text, { style: cellText(t, { selected, current: isToday, muted: outside }) }, String(day.day)),
+    );
+  }
+
+  function DayGrid({ t, view, weekStart, headings, selected, today, focusDay, focusRequest, bounds, locale, labelledBy, onPick, onMove, testID }) {
+    const nodes = React.useRef(new Map());
+    useFocusOn(focusRequest, nodes, dayKey(focusDay));
+    const state = {
+      selectedKey: selected && selected.year != null ? dayKey(selected) : null,
+      todayKey: dayKey(today),
+      focusKey: dayKey(focusDay),
+    };
+    const cellProps = { t, state, bounds, locale, weekStart, nodes, onPick, onMove, testID };
+    return h(
+      View,
+      { role: "grid", "aria-labelledby": labelledBy },
+      h(WeekdayRow, { t, headings }),
+      ...monthGrid(view.year, view.month, weekStart).map((week, row) =>
+        h(
+          View,
+          { key: row, role: "row", style: { flexDirection: "row" } },
+          ...week.map((cell) => h(DayCell, { key: dayKey(cell), cell, ...cellProps })),
+        ),
+      ),
+    );
+  }
+
+  // The next pickable item `step` away, or `from` when there is none.
+  function nextPeriod(items, from, step) {
+    for (let i = from + step; i >= 0 && i < items.length; i += step) {
+      if (!items[i].disabled) return i;
+    }
+    return from;
+  }
+
+  /** A 3-column grid of months or years; `items` carry their own state. */
+  function PeriodGrid({ t, items, focusRequest, onPick, testID }) {
+    const nodes = React.useRef(new Map());
+    const pickable = items.filter((item) => !item.disabled);
+    const fallback = (pickable.find((item) => item.selected) || pickable[0] || {}).key;
+    const [stop, setStop] = useRovingStop(fallback, items.map((item) => item.key));
+    useFocusOn(focusRequest, nodes, fallback);
+    const width = (CELL_SIZE * 7) / PERIOD_COLUMNS;
+    const moveFrom = (index, event) => {
+      const step = PERIOD_STEPS[event.key];
+      if (!step) return;
+      event.preventDefault();
+      const target = items[nextPeriod(items, index, step)];
+      setStop(target.key);
+      focusNode(nodes.current.get(target.key));
+    };
+    return h(
+      View,
+      { style: { flexDirection: "row", flexWrap: "wrap", width: CELL_SIZE * 7, rowGap: 8 } },
+      ...items.map((item, index) =>
+        h(
+          Pressable,
+          {
+            key: item.key,
+            ref: register(nodes, item.key),
+            onPress: () => {
+              if (!item.disabled) onPick(item);
+            },
+            onKeyDown: (event) => moveFrom(index, event),
+            focusable: item.key === stop,
+            accessibilityRole: "button",
+            "aria-pressed": item.selected,
+            disabled: item.disabled,
+            accessibilityLabel: item.spoken,
+            testID: testID ? `${testID}-${item.testKey}` : undefined,
+            style: cellStyle(t, { selected: item.selected, current: item.current, disabled: item.disabled, width, height: CELL_SIZE, round: false }),
+          },
+          h(Text, { style: cellText(t, { selected: item.selected, current: item.current }) }, item.label),
+        ),
+      ),
+    );
+  }
+
+  return { DayGrid, PeriodGrid };
+}

package/dist/datetimepicker-sheet-state.js

@@ -0,0 +1,117 @@
+// REQ-WSDK-PLATFORM §6 — the state of an open web `<DateTimePicker>` sheet:
+// the draft value, the month or period on show, the day holding keyboard
+// focus, and every way the viewer changes them.
+
+import React from "react";
+import { nowParts } from "./datetimepicker-format.js";
+import {
+  clampToBounds,
+  isDayAllowed,
+  isTimeAllowed,
+  nearestAllowedDay,
+  shiftMonth,
+} from "./datetimepicker-calendar.js";
+
+function dayOf(parts) {
+  return { year: parts.year, month: parts.month, day: parts.day };
+}
+
+function canPickNow(now, mode, bounds) {
+  if (mode === "time") return isTimeAllowed(null, now.hours, now.minutes, bounds);
+  if (!isDayAllowed(now, bounds)) return false;
+  return mode === "date" || isTimeAllowed(now, now.hours, now.minutes, bounds);
+}
+
+// Where the calendar opens: the value, else today pulled inside the bounds.
+function useOpening(parts, bounds) {
+  return React.useMemo(() => {
+    const today = nowParts();
+    const anchor = parts && parts.year != null ? parts : clampToBounds(today, bounds);
+    return { today, anchor, focus: nearestAllowedDay(anchor, anchor.day, bounds) };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+}
+
+function useTimePicks({ mode, draft, anchor, bounds, commit }) {
+  const timeDay = mode === "datetime" ? dayOf(draft && draft.year != null ? draft : anchor) : null;
+  const base = draft || { ...(timeDay || {}), hours: 0, minutes: 0 };
+  const pickTime = (hours, minutes) =>
+    commit(clampToBounds(mode === "time" ? { ...base, hours, minutes } : { ...timeDay, hours, minutes }, bounds));
+  return {
+    timeDay,
+    pickHour: (hours) => pickTime(hours, base.minutes),
+    pickMinute: (minutes) => pickTime(base.hours, minutes),
+  };
+}
+
+function usePaging({ bounds, setView, focusDay, setFocusDay, setLevel, refocus }) {
+  return {
+    pageMonths(view, delta) {
+      const next = shiftMonth(view, delta);
+      setView(next);
+      setFocusDay(nearestAllowedDay(next, focusDay.day, bounds));
+    },
+    // Paging months or years keeps focus on the button that paged.
+    showPeriod(period) {
+      setView(period);
+    },
+    showLevel(next, period) {
+      if (period) setView(period);
+      if (period && next === "days") setFocusDay(nearestAllowedDay(period, focusDay.day, bounds));
+      setLevel(next);
+      refocus();
+    },
+  };
+}
+
+export function useSheetState({ mode, parts, bounds, onPick, onClose }) {
+  const opening = useOpening(parts, bounds);
+  const [draft, setDraft] = React.useState(parts);
+  const [view, setView] = React.useState({ year: opening.anchor.year, month: opening.anchor.month });
+  const [focusDay, setFocusDay] = React.useState(opening.focus);
+  const [level, setLevel] = React.useState("days");
+  const [focusRequest, setFocusRequest] = React.useState(1);
+  const refocus = () => setFocusRequest((n) => n + 1);
+  const commit = (next) => {
+    setDraft(next);
+    onPick(next);
+  };
+  const show = (day) => {
+    setView({ year: day.year, month: day.month });
+    setFocusDay(dayOf(day));
+  };
+  const time = useTimePicks({ mode, draft, anchor: opening.anchor, bounds, commit });
+  const paging = usePaging({ bounds, setView, focusDay, setFocusDay, setLevel, refocus });
+  const now = nowParts();
+
+  return {
+    draft, view, focusDay, level, focusRequest, ...time,
+    today: opening.today,
+    nowAllowed: canPickNow(now, mode, bounds),
+    pickDay(day) {
+      if (mode === "date") {
+        commit({ ...day, hours: 0, minutes: 0 });
+        onClose();
+        return;
+      }
+      const clock = draft || now;
+      commit(clampToBounds({ ...day, hours: clock.hours, minutes: clock.minutes }, bounds));
+      show(day);
+    },
+    moveFocus(day) {
+      show(day);
+      refocus();
+    },
+    pickNow() {
+      if (mode === "date") {
+        commit({ ...dayOf(now), hours: 0, minutes: 0 });
+        onClose();
+        return;
+      }
+      commit(now);
+      if (mode === "datetime") show(now);
+    },
+    pageMonths: (delta) => paging.pageMonths(view, delta),
+    showPeriod: paging.showPeriod,
+    showLevel: paging.showLevel,
+  };
+}

package/dist/datetimepicker-sheet.js

@@ -0,0 +1,113 @@
+// REQ-WSDK-PLATFORM §6 — the web `<DateTimePicker>`'s picking surface: a
+// themed calendar and time sheet in `<Overlay>`. The browser's own date popup
+// cannot be themed or styled, so the web draws its own; a device keeps the
+// operating system's picker (./datetimepicker.native.js).
+
+import React from "react";
+import { GRID_ROWS, firstDayOfWeek, isHourAllowed, isTimeAllowed } from "./datetimepicker-calendar.js";
+import { relativeNowLabel, weekdayHeadings } from "./datetimepicker-names.js";
+import { CELL_SIZE } from "./datetimepicker-cells.js";
+import { CALENDAR_WIDTH, makeSheetControls, periodItems } from "./datetimepicker-sheet-header.js";
+import { makeSheetParts } from "./datetimepicker-sheet-parts.js";
+import { makeTimeColumns } from "./datetimepicker-time-columns.js";
+import { useSheetState } from "./datetimepicker-sheet-state.js";
+
+const h = React.createElement;
+// The weekday row plus six weeks, so switching to months or years keeps the size.
+const CALENDAR_BODY_HEIGHT = CELL_SIZE * GRID_ROWS + 26;
+const TIME_ONLY_HEIGHT = 220;
+const SHEET_PADDING = 16;
+
+/** @param {{View: any, Text: any, Pressable: any, ScrollView: any, Platform: any, Overlay: any}} rn */
+export function makeDateTimeSheet(rn) {
+  const { View, Text, Overlay } = rn;
+  const { DayGrid, PeriodGrid } = makeSheetParts(rn);
+  const TimeColumns = makeTimeColumns(rn);
+  const { Header, TextButton } = makeSheetControls(rn);
+
+  function Calendar({ t, state, bounds, locale, testID }) {
+    const titleId = React.useId();
+    const weekStart = React.useMemo(() => firstDayOfWeek(locale), [locale]);
+    const headings = React.useMemo(() => weekdayHeadings(locale, weekStart), [locale, weekStart]);
+    const body =
+      state.level === "days"
+        ? h(DayGrid, {
+            t, view: state.view, weekStart, headings, bounds, locale, testID,
+            selected: state.draft, today: state.today, focusDay: state.focusDay,
+            focusRequest: state.focusRequest, labelledBy: titleId,
+            onPick: state.pickDay, onMove: state.moveFocus,
+          })
+        : h(PeriodGrid, {
+            t, testID, focusRequest: state.focusRequest,
+            items: periodItems(state, bounds, locale),
+            onPick: (item) => state.showLevel(state.level === "months" ? "days" : "months", item.period),
+          });
+    return h(
+      View,
+      { style: { width: CALENDAR_WIDTH, gap: 8 } },
+      h(Header, { t, state, bounds, locale, titleId, testID }),
+      h(View, { style: { minHeight: CALENDAR_BODY_HEIGHT } }, body),
+    );
+  }
+
+  function Time({ t, mode, state, bounds, locale, testID }) {
+    return h(TimeColumns, {
+      t, locale, testID,
+      parts: state.draft,
+      height: mode === "time" ? TIME_ONLY_HEIGHT : CALENDAR_BODY_HEIGHT,
+      focusRequest: mode === "time" ? 1 : 0,
+      isHourDisabled: (hours) => !isHourAllowed(state.timeDay, hours, bounds),
+      isMinuteDisabled: (minutes) => !!state.draft && !isTimeAllowed(state.timeDay, state.draft.hours, minutes, bounds),
+      onHour: state.pickHour,
+      onMinute: state.pickMinute,
+    });
+  }
+
+  function SheetBody({ t, mode, parts, bounds, locale, heading, onPick, onClose, doneLabel, testID }) {
+    const state = useSheetState({ mode, parts, bounds, onPick, onClose });
+    const shared = { t, state, bounds, locale, testID };
+    return h(
+      View,
+      { style: { gap: 16, alignItems: "center" } },
+      // The sheet covers its field, so it names the field it edits.
+      heading
+        ? h(Text, { style: { alignSelf: "stretch", fontFamily: t.fontFamily, fontSize: t.labelSize, fontWeight: "500", color: t.helperColor } }, heading)
+        : null,
+      h(
+        View,
+        { style: { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", alignItems: "flex-end", gap: 16 } },
+        mode === "time" ? null : h(Calendar, shared),
+        mode === "date" ? null : h(Time, { ...shared, mode }),
+      ),
+      h(
+        View,
+        { style: { flexDirection: "row", alignSelf: "stretch", justifyContent: "space-between", alignItems: "center" } },
+        h(TextButton, { t, label: relativeNowLabel(locale, mode), disabled: !state.nowAllowed, onPress: state.pickNow, testID: testID ? `${testID}-now` : undefined }),
+        mode === "date" ? null : h(TextButton, { t, label: doneLabel, filled: true, onPress: onClose, testID: testID ? `${testID}-done` : undefined }),
+      ),
+    );
+  }
+
+  function DateTimeSheet({ open, onClose, title, closeAccessibilityLabel, testID, t, ...rest }) {
+    return h(
+      Overlay,
+      {
+        visible: open,
+        onRequestClose: onClose,
+        size: rest.mode === "datetime" ? "md" : "sm",
+        accessibilityLabel: title,
+        ...(closeAccessibilityLabel ? { closeAccessibilityLabel } : null),
+        testID: testID ? `${testID}-sheet` : undefined,
+        style: {
+          backgroundColor: t.popover.background,
+          borderWidth: 1,
+          borderColor: t.popover.borderColor,
+          padding: SHEET_PADDING,
+        },
+      },
+      open ? h(SheetBody, { ...rest, t, onClose, testID }) : null,
+    );
+  }
+
+  return DateTimeSheet;
+}

package/dist/datetimepicker-time-columns.js

@@ -0,0 +1,107 @@
+// REQ-WSDK-PLATFORM §6 — the hour and minute columns of the web
+// `<DateTimePicker>` sheet. Bound to react-native-web by ./datetimepicker-sheet.js.
+
+import React from "react";
+import { nextOptionIndex } from "./form-control-tokens.js";
+import { spaceActivates } from "./form-control-logic.js";
+import { fieldName, twoDigits } from "./datetimepicker-names.js";
+import { cellStyle, cellText, makeFocus, register } from "./datetimepicker-cells.js";
+
+const h = React.createElement;
+const ITEM_HEIGHT = 40;
+const ITEM_GAP = 2;
+const COLUMN_WIDTH = 64;
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const MINUTES = Array.from({ length: 60 }, (_, i) => i);
+const LIST_KEYS = ["ArrowDown", "ArrowUp", "Home", "End"];
+
+/** @param {{View: any, Text: any, Pressable: any, ScrollView: any, Platform: any}} rn */
+export function makeTimeColumns(rn) {
+  const { View, Text, Pressable, ScrollView, Platform } = rn;
+  const { focusNode, useFocusOn, useRovingStop } = makeFocus(Platform);
+
+  // Centre the choice on open, so both columns hold it level; afterwards
+  // (Now, a pick) only bring it into view when it has scrolled out.
+  function useKeepInView(scroller, nodes, chosen, values, height) {
+    const mounted = React.useRef(false);
+    React.useEffect(() => {
+      if (!mounted.current) {
+        mounted.current = true;
+        const top = values.indexOf(chosen) * (ITEM_HEIGHT + ITEM_GAP) - (height - ITEM_HEIGHT) / 2;
+        if (scroller.current && typeof scroller.current.scrollTo === "function") {
+          scroller.current.scrollTo({ y: Math.max(0, top), animated: false });
+        }
+        return;
+      }
+      const node = nodes.current.get(chosen);
+      if (Platform.OS === "web" && node && typeof node.scrollIntoView === "function") {
+        node.scrollIntoView({ block: "nearest" });
+      }
+    }, [chosen]); // eslint-disable-line react-hooks/exhaustive-deps
+  }
+
+  function TimeColumn({ t, field, values, chosen, isDisabled, onPick, height, locale, focusRequest, testID }) {
+    const nodes = React.useRef(new Map());
+    const scroller = React.useRef(null);
+    const options = values.map((value) => ({ value, disabled: isDisabled(value) }));
+    const firstEnabled = options.find((option) => !option.disabled);
+    const fallback = chosen != null && !isDisabled(chosen) ? chosen : (firstEnabled || options[0]).value;
+    const [stop, setStop] = useRovingStop(fallback, values);
+    useFocusOn(focusRequest, nodes, fallback);
+    useKeepInView(scroller, nodes, chosen ?? fallback, values, height);
+    const name = fieldName(locale, field);
+    const item = (option, index) => {
+      const pick = () => {
+        if (!option.disabled) onPick(option.value);
+      };
+      const selected = option.value === chosen;
+      return h(
+        Pressable,
+        {
+          key: option.value,
+          ref: register(nodes, option.value),
+          onPress: pick,
+          onKeyDown: (event) => {
+            if (!LIST_KEYS.includes(event.key)) {
+              spaceActivates(pick)(event);
+              return;
+            }
+            event.preventDefault();
+            const target = values[nextOptionIndex(options, index, event.key)];
+            setStop(target);
+            focusNode(nodes.current.get(target));
+          },
+          focusable: option.value === stop,
+          role: "option",
+          "aria-selected": selected,
+          disabled: option.disabled,
+          testID: testID ? `${testID}-${field}-${twoDigits(option.value)}` : undefined,
+          style: cellStyle(t, { selected, current: false, disabled: option.disabled, width: COLUMN_WIDTH, height: ITEM_HEIGHT, round: true }),
+        },
+        h(Text, { style: cellText(t, { selected }) }, twoDigits(option.value)),
+      );
+    };
+    return h(
+      View,
+      { style: { width: COLUMN_WIDTH, gap: 8 } },
+      h(Text, { "aria-hidden": true, style: { textAlign: "center", fontFamily: t.fontFamily, fontSize: t.helperSize, fontWeight: "500", color: t.helperColor } }, name),
+      h(
+        ScrollView,
+        { ref: scroller, role: "listbox", accessibilityLabel: name, style: { height }, contentContainerStyle: { gap: ITEM_GAP, paddingVertical: ITEM_GAP } },
+        ...options.map(item),
+      ),
+    );
+  }
+
+  function TimeColumns({ t, parts, isHourDisabled, isMinuteDisabled, onHour, onMinute, height, locale, focusRequest, testID }) {
+    const shared = { t, height, locale, testID };
+    return h(
+      View,
+      { style: { flexDirection: "row", gap: 8, justifyContent: "center" } },
+      h(TimeColumn, { ...shared, field: "hour", values: HOURS, chosen: parts ? parts.hours : null, isDisabled: isHourDisabled, onPick: onHour, focusRequest }),
+      h(TimeColumn, { ...shared, field: "minute", values: MINUTES, chosen: parts ? parts.minutes : null, isDisabled: isMinuteDisabled, onPick: onMinute, focusRequest: 0 }),
+    );
+  }
+
+  return TimeColumns;
+}