@lotics/ui 42.4.0 → 43.1.0

package/src/slider.tsx

@@ -263,7 +263,7 @@ const styles = StyleSheet.create({
   trackArea: {
     height: 28,
     justifyContent: "center",
-    ...({ cursor: "pointer", touchAction: "none" } as ViewStyle),
+    ...({ cursor: "auto", touchAction: "none" } as ViewStyle),
   },
   trackBg: {
     position: "absolute",
@@ -289,7 +289,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white,
     borderWidth: 2,
     ...({
-      cursor: "pointer",
+      cursor: "auto",
       boxShadow: "0 1px 3px rgba(38,38,38,0.18)",
     } as ViewStyle),
   },

package/src/summary.tsx

@@ -28,6 +28,16 @@ export interface SummaryBucket {
   color: string;
   /** What this bucket means — the ⓘ beside its count. */
   info?: string;
+  /**
+   * Valence on the bucket's COUNT, for a bucket that represents work someone has
+   * to do. Reserve it: a screen where every bucket is toned has said nothing, and
+   * the bucket holding the largest number is usually the one that needs it least
+   * (work that has left the building is not a queue).
+   *
+   * It colours the figure only. The segment keeps the bucket's own `color`, so
+   * the bar goes on reading as a distribution rather than as a heat map.
+   */
+  tone?: MetricTone;
 }
 
 interface SummaryContext {
@@ -99,13 +109,26 @@ function Header(props: { children: ReactNode }) {
 /**
  * The set's SIZE, at display scale — the band's headline.
  *
- * The number is the sum of the buckets and is never passed in. A page that
- * restates its own total eventually restates it wrongly: a bucket gets added,
+ * By DEFAULT it is the sum of the buckets, and that default is the point: a page
+ * that restates its own total eventually restates it wrongly — a bucket is added,
  * the constant does not move, and the headline quietly disagrees with the bar
  * directly beneath it.
+ *
+ * `value` overrides it, for the one case that is not a restatement: a total with
+ * its OWN authority, counted by the same source that counted the buckets. A
+ * server-paginated register is the example — the buckets are per-stage `COUNT`s
+ * over the filtered view and the size is a fourth count over that same view, so
+ * summing the three client-side would replace an authoritative number with a
+ * derived one that can differ (a bucket query filtered a shade differently, or
+ * landed a moment later) and would be believed because it is the biggest figure
+ * on the screen.
+ *
+ * The line, then: pass `value` when something ELSE counted it, never to write a
+ * literal. A number typed into this prop is the defect the default prevents.
  */
-function Total(props: { label: string; formatValue?: (n: number) => string }) {
-  const { total } = useSummary("Total");
+function Total(props: { label: string; value?: number; formatValue?: (n: number) => string }) {
+  const { total: summed } = useSummary("Total");
+  const total = props.value ?? summed;
   const tag = useLocaleTag();
   // Grouped by the reader's locale by default — a set of 12,345 was rendering
   // "12345" in the one place on the screen sized to be read first, because the
@@ -187,6 +210,7 @@ function Facts(props: { extra?: readonly SummaryLineItem[] }) {
     value: b.value,
     color: b.color,
     info: b.info,
+    tone: b.tone,
   }));
   return <SummaryLine items={[...items, ...(props.extra ?? [])]} />;
 }

package/src/switch.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef } from "react";
 import { Animated, StyleSheet, Pressable, View } from "react-native";
 import { colors } from "./colors";
 import { Icon } from "./icon";
-import { FOCUS_RING } from "./control_surface";
+import { CURSOR_DEFAULT, FOCUS_RING } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
 export interface SwitchProps {
   testID?: string;
@@ -89,6 +89,8 @@ export function Switch(props: SwitchProps) {
 
 const styles = StyleSheet.create({
   root: {
+    // A switch SETS A VALUE — the arrow, see `CURSOR_DEFAULT`.
+    cursor: CURSOR_DEFAULT,
     borderRadius: 999,
     width: 48,
     height: 32,

package/src/table.tsx

@@ -17,6 +17,7 @@ import { Divider } from "./divider";
 import { DetailRow } from "./detail_row";
 import { SortHeader, type SortState, type SortHeaderLabels } from "./sort_header";
 import { COLUMN_GAP, ROW_GUTTER, computeTableFit, type TableFit, type TableFitColumn } from "./table_fit";
+import { ROW_WASH_BLEED } from "./control_surface";
 
 /**
  * One column of a register — its width/flex/align/label/sortability defined ONCE,
@@ -120,8 +121,36 @@ export interface TableProps {
    * Positions are yours for the same reason — see `TableRowProps.ordinal`. This
    * prop only says "this register is counted", which is what reserves the gutter
    * on the header and on every row at once, so they cannot disagree.
+   *
+   * Pass {@link TableProps.counted} INSTEAD when the page already states the
+   * total somewhere the reader will see first.
    */
   count?: number;
+  /**
+   * Number the rows WITHOUT heading the gutter with a total.
+   *
+   * The total earns its place in the header by answering "how many" without
+   * scrolling to the last row — so it stops earning it the moment the page
+   * answers that louder. A register whose band opens with the count in display
+   * type was printing the same figure twice within a hundred pixels, at the same
+   * left edge, one huge and one muted, which reads as a mistake rather than as
+   * two deliberate statements.
+   *
+   * Ignored when `count` is given; the gutter is reserved either way, so header
+   * and rows can never disagree about its width.
+   */
+  counted?: boolean;
+  /**
+   * Paint the column-header band with the brand's wash.
+   *
+   * OPT-IN, and deliberately not the default: a filled header is a real restyle
+   * of every table in every app, and the kit's language is a white canvas where
+   * a hairline does the separating. It earns its place on a register that is the
+   * page's whole content, where the band gives the columns a lid and the table
+   * stops floating; it is noise on a small table inside a card that already has
+   * edges of its own.
+   */
+  headerFill?: boolean;
   /** Reserve a trailing gutter (px) for rows that render a `trailing` slot (a ⋯ / button). */
   trailing?: number;
   /** The `TableRow`s. */
@@ -143,8 +172,11 @@ export interface TableProps {
  * keeps its current order). See `computeTableFit`.
  */
 export function Table(props: TableProps) {
-  const { columns, sort, onSort, sortLabels, selectAll, leading = 0, count, trailing = 0, children } = props;
-  const ordinal = count != null ? ORDINAL_W : 0;
+  const { columns, sort, onSort, sortLabels, selectAll, leading = 0, count, counted, headerFill, trailing = 0, children } = props;
+  // Either prop reserves the gutter; only `count` puts a number in its header.
+  // `LeadGutter` already renders an empty box when it has no number — the same
+  // path a group band takes — so nothing new is needed to draw it.
+  const ordinal = count != null || counted ? ORDINAL_W : 0;
   const rows = Children.toArray(children).filter(isValidElement);
 
   // Measure-then-REVEAL (the `DetailTable` contract): the unmeasured first
@@ -174,12 +206,12 @@ export function Table(props: TableProps) {
           // select-all checkbox keeps its band: it's the bulk-select entry point,
           // aligned over the rows' leading checkboxes.
           (selectAll != null && leading > 0) || ordinal > 0 ? (
-            <View style={styles.headerBand}>
+            <View style={[styles.headerBand, headerFill ? styles.headerBandFilled : null]}>
               <LeadGutter ordinal={count}>{selectAll}</LeadGutter>
             </View>
           ) : null
         ) : (
-          <View style={styles.headerBand}>
+          <View style={[styles.headerBand, headerFill ? styles.headerBandFilled : null]}>
             {/* The TOTAL heads the column of positions — the one number that
                 answers "how many" without the reader scrolling to the last row. */}
             <LeadGutter ordinal={count}>{selectAll}</LeadGutter>
@@ -458,6 +490,16 @@ const styles = StyleSheet.create({
   },
   // A hairline under the column header anchors the columns; the rows below it are
   // Divider-separated.
+  headerBandFilled: {
+    backgroundColor: colors.accent_wash,
+    // The band bleeds to the row wash's width so its edges line up with a hovered
+    // row beneath it; without this the lid is narrower than the rows it caps.
+    marginHorizontal: -ROW_WASH_BLEED,
+    paddingHorizontal: ROW_GUTTER + ROW_WASH_BLEED,
+    paddingTop: 8,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
   headerBand: {
     paddingHorizontal: ROW_GUTTER,
     // NO top padding (GAP-85): a Table is borderless, so its container ALWAYS owns

package/src/text.tsx

@@ -1,6 +1,7 @@
 import "./text.css";
 import React from "react";
 import { Platform, Text as RNText, TextProps as RNTextProps, StyleSheet } from "react-native";
+import { fontFamilyDisplay } from "./display_font";
 import {
   fontFamilyMedium,
   fontFamilyRegular,
@@ -14,6 +15,16 @@ export interface TextProps {
   testID?: string;
   size?: TextSize;
   color?: TextColor;
+  /**
+   * `display` renders in the app's display face — a headline, a wordmark, a
+   * figure the page exists to show. Everything else stays the body face, which
+   * is not themeable (see `display_font.ts`).
+   *
+   * A ROLE, not a font name: the call site says what the text IS, and the theme
+   * decides what that looks like. Threading family strings through call sites is
+   * how one screen ends up in a different face from the next.
+   */
+  family?: "display";
   align?: TextAlign;
   weight?: TextWeight;
   numberOfLines?: number;
@@ -62,13 +73,14 @@ type TextUserSelect = "none" | "auto" | "text";
  */
 export function Text(props: TextProps) {
   const {
-    userSelect = "text",
+    userSelect,
     align = "left",
     children,
     testID,
     color = "default",
     size = "sm",
     weight = "regular",
+    family,
     numberOfLines,
     decoration,
     tabular,
@@ -107,7 +119,14 @@ export function Text(props: TextProps) {
         styles.text,
         Platform.OS !== "web" && styles[size],
         styles[weight],
-        styles[userSelect],
+        // AFTER the weight, because the weight ladder sets a family too — each
+        // rung is a distinct Inter family, not a `font-weight` — so the display
+        // face has to win the family while leaving the numeric weight alone.
+        family === "display" && { fontFamily: fontFamilyDisplay },
+        // Only when ASKED for. Left to inherit, a label inside a button is
+        // unselectable and a paragraph is selectable, each from its container —
+        // which is what a container setting `userSelect` is trying to say.
+        userSelect && selectStyles[userSelect],
         styles[align],
         decoration && styles[decoration],
         tabular && styles.tabular,
@@ -123,10 +142,20 @@ export function Text(props: TextProps) {
   );
 }
 
+/**
+ * Selectability, applied only when a caller states it. Its own sheet because the
+ * value `"text"` shares a name with the BASE text style — mapped through the main
+ * sheet, asking for `userSelect="text"` resolved to that base and set nothing.
+ */
+const selectStyles = StyleSheet.create({
+  text: { userSelect: "text" },
+  auto: { userSelect: "auto" },
+  none: { userSelect: "none" },
+});
+
 const styles = StyleSheet.create({
   text: {
     letterSpacing: -0.4,
-    userSelect: "text",
   },
 
   // Text size styles
@@ -197,14 +226,6 @@ const styles = StyleSheet.create({
     textDecorationLine: "underline line-through",
   },
 
-  // User select styles
-  auto: {
-    userSelect: "auto",
-  },
-  none: {
-    userSelect: "none",
-  },
-
   tabular: {
     fontVariant: ["tabular-nums"],
   },

package/src/text_utils.ts

@@ -47,17 +47,9 @@ export function getTextColor(color?: TextColor): string {
   }
 }
 
-export const fontFamilyRegular = `Inter_400Regular, "apple-system", "BlinkMacSystemFont",
-    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", sans-serif`;
-
-export const fontFamilyMedium = `Inter_500Medium, "apple-system", "BlinkMacSystemFont",
-    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", sans-serif`;
-
-export const fontFamilySemiBold = `Inter_600SemiBold, "apple-system", "BlinkMacSystemFont",
-    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", sans-serif`;
+// The three rungs live in their own platform-split module — see `font_family.ts`.
+// Re-exported here so every existing consumer keeps one import.
+export { fontFamilyRegular, fontFamilyMedium, fontFamilySemiBold } from "./font_family";
 
 /** Line height for mobile web (prevents Safari iOS auto-zoom) */
 export const INPUT_LINE_HEIGHT_MOBILE = 24;

package/src/theme.web.tsx

@@ -1,5 +1,5 @@
 import { useMemo, type CSSProperties, type ReactNode } from "react";
-import { LoticsThemeContext, THEME_VARS, type LoticsTheme } from "./theme_context";
+import { ACCENT_WASH_VAR, deriveAccentWash, FONT_MEDIUM_VAR, FONT_SEMIBOLD_VAR, LoticsThemeContext, THEME_VARS, type LoticsTheme } from "./theme_context";
 
 export { DEFAULT_ACCENT, useLoticsTheme, THEME_VARS, type LoticsTheme } from "./theme_context";
 
@@ -46,6 +46,21 @@ export function LoticsThemeProvider(props: LoticsThemeProviderProps) {
       const value = theme[role as keyof LoticsTheme];
       if (value !== undefined) vars[name] = value;
     }
+    // The wash is DERIVED here, where the accent is still a literal — see
+    // `deriveAccentWash`. An accent the parser cannot read leaves it undefined,
+    // so those surfaces keep the neutral default instead of breaking.
+    if (theme.accent !== undefined) {
+      const wash = deriveAccentWash(theme.accent);
+      if (wash !== undefined) vars[ACCENT_WASH_VAR] = wash;
+    }
+    // ONE font value, THREE rungs. `THEME_VARS` already mapped `bodyFont` to the
+    // regular rung; medium and semibold follow it here, because a family set on
+    // only one rung would leave every medium and semibold run in Inter — the
+    // screen would come out in two typefaces and look like a loading bug.
+    if (theme.bodyFont !== undefined) {
+      vars[FONT_MEDIUM_VAR] = theme.bodyFont;
+      vars[FONT_SEMIBOLD_VAR] = theme.bodyFont;
+    }
     // `display: contents` — the provider generates NO box. Custom properties
     // inherit down the DOM tree rather than the box tree, so the variables still
     // reach every descendant while the element itself adds no layout at all.

package/src/theme_context.ts

@@ -19,8 +19,40 @@ export interface LoticsTheme {
    *  on almost every app; set it only for a deliberately toned surface. */
   background?: string;
   /** Hairlines — 48 sites in the kit, and a register is mostly these lines, so a
-   *  small change here is felt across a whole screen. */
+   *  small change here is felt against a whole screen. */
   border?: string;
+  /**
+   * THE TYPEFACE, for everything. One value — a CSS font stack — and the whole
+   * app follows it.
+   *
+   * It fans out to the three weight rungs (`font_family.ts`), because weight is
+   * a FAMILY in this kit rather than a `font-weight`. Themed, all three resolve
+   * to this family and the numeric weight already on every style makes the
+   * ladder; unthemed, each keeps its own Inter face.
+   *
+   * Pass a stack you know RESOLVES — a face nobody `@font-face`d falls silently
+   * through to system sans, which is the one failure here that looks like
+   * nothing happening. And check Vietnamese: a face without the diacritics turns
+   * "Thẩm định" into tofu.
+   *
+   * The kit's letter-spacing curve is tuned for Inter's glyphs, so another face
+   * inherits tracking chosen for a different drawing. It is a refinement, not a
+   * defect — worth an eye, not a blocker.
+   */
+  bodyFont?: string;
+  /**
+   * The typeface for DISPLAY text only — what `<Text family="display">` renders
+   * in. A headline, a wordmark, a figure the page exists to show.
+   *
+   * Defaults to `bodyFont` when that is set, so ONE parameter changes the whole
+   * app and a SECOND one is only needed to make display type differ from body —
+   * a serif masthead over a sans register, say.
+   */
+  displayFont?: string;
+  /** The PRIMARY action's fill. Defaults to the kit's near-black, so an app that
+   *  themes nothing is unchanged; set it to put the brand on the one filled
+   *  button a surface gets. Distinct from `accent`, which marks identity. */
+  primary?: string;
 }
 
 /**
@@ -31,8 +63,38 @@ export const THEME_VARS: Record<keyof LoticsTheme, string> = {
   accent: "--lotics-accent",
   background: "--lotics-background",
   border: "--lotics-border",
+  primary: "--lotics-primary",
+  bodyFont: "--lotics-font-regular",
+  displayFont: "--lotics-display-font",
 };
 
+/** The extra variable the provider DERIVES — not a role an app sets, because it
+ *  is the accent seen through alpha and two sources for one colour drift. */
+export const ACCENT_WASH_VAR = "--lotics-accent-wash";
+
+/** The two rungs `bodyFont` fans out to beyond its own `THEME_VARS` entry. */
+export const FONT_MEDIUM_VAR = "--lotics-font-medium";
+export const FONT_SEMIBOLD_VAR = "--lotics-font-semibold";
+
+/**
+ * The accent at wash strength.
+ *
+ * Computed from the literal hex the app passed, because it CANNOT be computed
+ * downstream: on web the token is a `var()`, and the kit's alpha helpers parse
+ * `rgba()` strings. Returns undefined for a value it cannot parse (a named
+ * colour, an `oklch()`), so an unparseable accent falls back to the neutral wash
+ * rather than painting rows in garbage.
+ */
+export function deriveAccentWash(accent: string): string | undefined {
+  const hex = accent.trim();
+  const m = /^#([0-9a-f]{6})$/i.exec(hex);
+  if (!m) return undefined;
+  const n = parseInt(m[1], 16);
+  // 0.07 — heavy enough to read as a tint on white, light enough that body text
+  // on top keeps its contrast; the neutral it replaces (zinc-100) sits about here.
+  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, 0.07)`;
+}
+
 export const LoticsThemeContext = createContext<LoticsTheme>({});
 
 /**

package/src/time_columns.tsx

@@ -0,0 +1,225 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
+import { MenuButton } from "./menu_button";
+import { Text } from "./text";
+import { useLoticsLocale, useLocaleTag } from "./locale";
+import {
+  composeTime,
+  dayPeriodOptions,
+  decomposeTime,
+  hourOptions,
+  minuteOptions,
+} from "./time_options";
+import type { PickerOption } from "./picker";
+
+/** Row height, and the unit the seat scroll counts in. */
+const ROW_HEIGHT = 36;
+/** How many rows a column shows before it scrolls. Odd, so the seated row can
+ *  sit near the middle with context above and below it rather than at an edge. */
+const VISIBLE_ROWS = 7;
+
+export interface TimeColumnsProps {
+  /** Canonical 24-hour `"HH:mm"`, `""` when empty (the columns then sit on midnight). */
+  value: string;
+  /** Fires on every pick, with a complete canonical time — one column at a time,
+   *  so the value is live rather than staged behind a confirm. */
+  onValueChange: (value: string) => void;
+  /** BCP-47 locale deciding 12- vs 24-hour, and whether there is a period column
+   *  at all. Defaults to the active `LoticsLocaleProvider` locale. */
+  locale?: string;
+  /** Accessible names for the three columns. Defaults to the `datePicker` slice. */
+  labels?: { hour: string; minute: string; dayPeriod: string };
+}
+
+/**
+ * The picking face of a time: an hour column, a minute column, and — only where
+ * the locale uses one — a day period.
+ *
+ * Split by UNIT rather than offered as composed times, which is what a native
+ * picker does and what makes every time reachable: a list of whole times has to
+ * choose a step, and any step makes the times between its rungs pickable only by
+ * typing. It also puts AM/PM where it belongs. A period is a choice between two
+ * named things and never a thing to spell — leaving it on a keyboard was the
+ * clearest sign the composed list was the wrong model.
+ *
+ * Each column commits on its own, so the value is always a real time and the
+ * face can be read back from it. There is no draft to confirm and nothing
+ * half-entered to guard against.
+ */
+export function TimeColumns(props: TimeColumnsProps) {
+  const { value, onValueChange } = props;
+  const localeTag = useLocaleTag(props.locale);
+  const loc = useLoticsLocale().datePicker;
+  const labels = props.labels ?? loc;
+
+  const parts = useMemo(() => decomposeTime(value, localeTag), [value, localeTag]);
+  const hours = useMemo(() => hourOptions(localeTag), [localeTag]);
+  const minutes = useMemo(() => minuteOptions(), []);
+  const periods = useMemo(() => dayPeriodOptions(localeTag), [localeTag]);
+
+  const pad = (n: number) => String(n).padStart(2, "0");
+
+  return (
+    <View style={styles.columns}>
+      <TimeColumn
+        accessibilityLabel={labels.hour}
+        options={hours}
+        value={pad(parts.displayHour)}
+        onValueChange={(next) => onValueChange(composeTime({ ...parts, displayHour: Number(next) }))}
+      />
+      <TimeColumn
+        accessibilityLabel={labels.minute}
+        options={minutes}
+        value={pad(parts.minute)}
+        onValueChange={(next) => onValueChange(composeTime({ ...parts, minute: Number(next) }))}
+      />
+      {periods.length > 0 && (
+        <TimeColumn
+          accessibilityLabel={labels.dayPeriod}
+          options={periods}
+          value={parts.pm ? "pm" : "am"}
+          onValueChange={(next) => onValueChange(composeTime({ ...parts, pm: next === "pm" }))}
+        />
+      )}
+    </View>
+  );
+}
+
+interface TimeColumnProps {
+  options: PickerOption<string>[];
+  value: string;
+  onValueChange: (value: string) => void;
+  accessibilityLabel: string;
+}
+
+/**
+ * One unit's column: a listbox that scrolls to its selection on open and moves
+ * on arrows.
+ *
+ * Roving tabindex, per the composite-widget rule — the selected row is the one
+ * tab stop and the rest are reached with arrows, so Tab crosses the three
+ * columns in three stops instead of sixty. Not `OptionList`: that body owns a
+ * hidden autofocus input for its typeahead, and three of them side by side would
+ * fight over focus the moment the popover opened.
+ */
+function TimeColumn(props: TimeColumnProps) {
+  const { options, value, onValueChange, accessibilityLabel } = props;
+  const scrollRef = useRef<ScrollView>(null);
+  const rowRefs = useRef<(View | null)[]>([]);
+
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  // A value the column does not offer still needs a tab stop, or the column
+  // becomes unreachable by keyboard.
+  const tabStopIndex = selectedIndex === -1 ? 0 : selectedIndex;
+
+  const scrollToIndex = useCallback((index: number) => {
+    if (index < 0) return;
+    // Centre the row: subtract half the visible window, floored at the top.
+    const offset = index * ROW_HEIGHT - ((VISIBLE_ROWS - 1) / 2) * ROW_HEIGHT;
+    scrollRef.current?.scrollTo({ y: Math.max(0, offset), animated: false });
+  }, []);
+
+  // Seat on OPEN only. The column mounts with the popover, so this runs once per
+  // opening; re-running it on every pick would yank the list back under the
+  // pointer while someone is scanning it.
+  const seatedRef = useRef(false);
+  useEffect(() => {
+    if (seatedRef.current) return;
+    seatedRef.current = true;
+    scrollToIndex(tabStopIndex);
+  }, [tabStopIndex, scrollToIndex]);
+
+  const handleKeyDown = useCallback(
+    (event: { key: string; preventDefault?: () => void }, index: number) => {
+      const last = options.length - 1;
+      let next = index;
+      switch (event.key) {
+        case "ArrowDown":
+          next = index === last ? 0 : index + 1;
+          break;
+        case "ArrowUp":
+          next = index === 0 ? last : index - 1;
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = last;
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault?.();
+          onValueChange(options[index].value);
+          return;
+        default:
+          return;
+      }
+      event.preventDefault?.();
+      // Selection follows focus, the listbox pattern for a single-select column:
+      // arrowing IS choosing, so the value under the cursor is always the value.
+      onValueChange(options[next].value);
+      scrollToIndex(next);
+      rowRefs.current[next]?.focus();
+    },
+    [options, onValueChange, scrollToIndex],
+  );
+
+  return (
+    <ScrollView
+      ref={scrollRef}
+      style={styles.column}
+      contentContainerStyle={styles.columnContent}
+      showsVerticalScrollIndicator={false}
+      accessibilityLabel={accessibilityLabel}
+      // `listbox` is valid ARIA but absent from RN's Role enum; rn-web forwards it.
+      role={"listbox" as "list"}
+    >
+      {options.map((option, index) => (
+        <MenuButton
+          key={option.value}
+          ref={(node: View | null) => {
+            rowRefs.current[index] = node;
+          }}
+          role="option"
+          selected={index === selectedIndex}
+          title={
+            <Text size="sm" userSelect="none">
+              {option.label}
+            </Text>
+          }
+          accessibilityLabel={option.label}
+          onPress={() => onValueChange(option.value)}
+          onKeyDown={(event) => handleKeyDown(event, index)}
+          // Exactly one stop per column; the rest are reached with arrows.
+          // tabIndex, NOT focusable — RN-Web's Pressable ignores `focusable`.
+          tabIndex={index === tabStopIndex ? 0 : -1}
+          style={styles.row}
+        />
+      ))}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  columns: {
+    flexDirection: "row",
+    gap: 4,
+  },
+  column: {
+    maxHeight: ROW_HEIGHT * VISIBLE_ROWS,
+    borderRadius: CONTROL_RADIUS,
+    backgroundColor: colors.white,
+  },
+  columnContent: {
+    // Padding rather than a spacer row, so the first and last values can still
+    // reach the middle of the window when the column is scrolled to an end.
+    paddingVertical: 2,
+  },
+  row: {
+    height: ROW_HEIGHT,
+    minWidth: 56,
+    justifyContent: "center",
+  },
+});