@lotics/ui 17.0.2 → 18.1.0

package/src/linked_record_box.tsx

@@ -6,21 +6,21 @@ import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { colors } from "./colors";
 
-interface LinkedRecordBoxProps {
+/** One reference fact. `V` is the value the variant admits — text under a door, any node without one. */
+interface LinkedRecordFact<V = ReactNode> {
+  label: string;
+  value: V;
+}
+
+interface LinkedRecordBoxBaseProps {
   /** The linked record's kind glyph (building-2 for a company, file-text for a record…). */
   icon: IconName;
   /** The linked record's display name. */
   name: string;
   /** A secondary identity line — a code, tax id, country, or "<desk> record". */
   subtitle?: string;
-  /** Reference facts, stacked VERTICALLY (legible at any width, never squeezed). */
-  facts?: { label: string; value: string }[];
   /** Width of the facts' label column (default 80). Widen for longer labels. */
   factLabelWidth?: number;
-  /** Accessible name for opening the record (e.g. "Acme Corp — details"). */
-  doorLabel: string;
-  /** Opens the linked record's detail (drawer/page) — the WHOLE box presses this. */
-  onOpen: () => void;
   /** The verbs, in a hairline-fenced footer at the bottom of the box, lifted above the door's
    *  hit area. Convention: destructive LEFT, go-to RIGHT (a `<View style={{ flex: 1 }} />`
    *  spacer between). The divider is drawn automatically when actions are present. Supplied by
@@ -28,22 +28,61 @@ interface LinkedRecordBoxProps {
   actions?: ReactNode;
 }
 
+/** The box that OPENS — the whole surface is the door into the linked record's own detail. */
+interface LinkedRecordBoxDoorProps extends LinkedRecordBoxBaseProps {
+  /** Opens the linked record's detail (drawer/page) — the WHOLE box presses this. */
+  onOpen: () => void;
+  /** Accessible name for opening the record (e.g. "Acme Corp — details"). */
+  doorLabel: string;
+  /** Reference facts, stacked VERTICALLY (legible at any width, never squeezed). TEXT only
+   *  (`""` renders "—"): the box is one press target, so the only controls it may hold are the
+   *  `actions` verbs, which the footer fences off and lifts above the door. A fact the reader
+   *  must EDIT belongs on the linked record's own page — that is what the door is for. */
+  facts?: LinkedRecordFact<string>[];
+}
+
+/** The box with nothing to open — the linked record has no detail surface of its own. */
+interface LinkedRecordBoxStaticProps extends LinkedRecordBoxBaseProps {
+  /** Absent by construction. Typed `never` rather than left off so `doorLabel` can never arrive
+   *  without a handler — a named door that goes nowhere. */
+  onOpen?: never;
+  doorLabel?: never;
+  /** Reference facts, stacked VERTICALLY. A string renders as text (`""` → "—"); a NODE renders
+   *  as given (no placeholder), so a fact can carry its own inline editor — safe here precisely
+   *  because nothing about this box presses. */
+  facts?: LinkedRecordFact[];
+}
+
+type LinkedRecordBoxProps = LinkedRecordBoxDoorProps | LinkedRecordBoxStaticProps;
+
 /**
  * A LINKED RECORD shown for reference — a bordered box scoping ANOTHER record's data
- * (identity glyph · name · facts), the WHOLE box a keyboard-accessible door into that record's
- * detail. Use it wherever one record points at another (a shipment's customer, an invoice's
- * party, a case's sibling); the picker / empty-state that REASSIGNS the link is the consumer's,
- * shown in place of the box.
+ * (identity glyph · name · facts). Use it wherever one record points at another (a shipment's
+ * customer, an invoice's party, a case's sibling); the picker / empty-state that REASSIGNS the
+ * link is the consumer's, shown in place of the box.
+ *
+ * `onOpen` picks the variant:
+ *
+ * - **With `onOpen`** (+ `doorLabel`) the WHOLE box is a keyboard-accessible door into the
+ *   record's detail. Its facts are TEXT, and the `actions` footer is the one place a control
+ *   may live — everything else is press-through to the door.
+ * - **Without it** the box is a STATIC reference card: no door, no tab stop, no pointer, nothing
+ *   announced as a button; the only interactive parts are `actions` and whatever a fact node
+ *   holds. This is the shape for a record with NO page of its own — there is nothing to open, so
+ *   the box IS where its values are read and edited, and an inline editor in a fact is honest.
  *
- * The a11y contract it enforces (the error-prone part, hence a primitive): a container with
- * interactive descendants must NEVER be `role="button"` (invalid HTML). So the box is a
- * role-less `PressableRow`, a `PressDoor` sibling carries the tab stop / accessible name /
- * focus ring, and the interior verbs lift above it via `zIndex`.
+ * The a11y contract the door variant enforces (the error-prone part, hence a primitive): a
+ * container with interactive descendants must NEVER be `role="button"` (invalid HTML). So the
+ * box is a role-less `PressableRow`, a `PressDoor` sibling carries the tab stop / accessible
+ * name / focus ring, and the interior verbs lift above it via `zIndex`.
  */
-export function LinkedRecordBox({ icon, name, subtitle, facts, factLabelWidth = 80, doorLabel, onOpen, actions }: LinkedRecordBoxProps) {
-  return (
-    <PressableRow onPress={onOpen} style={styles.box}>
-      <PressDoor accessibilityLabel={doorLabel} onPress={onOpen} />
+export function LinkedRecordBox(props: LinkedRecordBoxProps) {
+  const { icon, name, subtitle, factLabelWidth = 80, actions } = props;
+  // A door box's facts are strings, and a string IS a ReactNode — so both variants render
+  // through one path typed at the wider value.
+  const facts: LinkedRecordFact[] = props.facts ?? [];
+  const body = (
+    <>
       <View style={styles.identity}>
         <View style={styles.glyph}>
           <Icon name={icon} size={17} color={colors.zinc[600]} />
@@ -53,12 +92,18 @@ export function LinkedRecordBox({ icon, name, subtitle, facts, factLabelWidth =
           {subtitle ? <Text size="xs" color="muted" numberOfLines={1}>{subtitle}</Text> : null}
         </View>
       </View>
-      {facts && facts.length > 0 ? (
+      {facts.length > 0 ? (
         <View style={{ gap: 6 }}>
           {facts.map((f) => (
             <View key={f.label} style={styles.fact}>
               <Text size="sm" color="muted" style={{ width: factLabelWidth }}>{f.label}</Text>
-              <Text size="sm" style={{ flex: 1 }}>{f.value || "—"}</Text>
+              {typeof f.value === "string" ? (
+                <Text size="sm" style={{ flex: 1 }}>{f.value || "—"}</Text>
+              ) : (
+                // A node prints as authored — the "—" placeholder is a TEXT affordance, and a
+                // control renders its own empty state.
+                <View style={{ flex: 1, minWidth: 0 }}>{f.value}</View>
+              )}
             </View>
           ))}
         </View>
@@ -70,6 +115,17 @@ export function LinkedRecordBox({ icon, name, subtitle, facts, factLabelWidth =
           <View style={styles.actions}>{actions}</View>
         </>
       ) : null}
+    </>
+  );
+
+  // Nothing to open → a plain View, so the box takes no tab stop, announces no role, and paints
+  // no pointer/hover promise of a destination it doesn't have.
+  if (!props.onOpen) return <View style={styles.box}>{body}</View>;
+
+  return (
+    <PressableRow onPress={props.onOpen} style={styles.box}>
+      <PressDoor accessibilityLabel={props.doorLabel} onPress={props.onOpen} />
+      {body}
     </PressableRow>
   );
 }

package/src/locale.tsx

@@ -162,7 +162,7 @@ export const en: LoticsLocale = {
     descending: ", descending",
   },
   optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…" },
-  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", startDate: "Start date", endDate: "End date", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date" },
+  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", startDate: "Start date", endDate: "End date", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date", invalidTime: "Enter a complete time" },
   calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
   filterChip: { clear: "Clear" },
   floatingActionBar: { clear: "Clear" },
@@ -260,7 +260,7 @@ export const vi: LoticsLocale = {
     descending: " (giảm dần)",
   },
   optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…" },
-  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ" },
+  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ", invalidTime: "Nhập giờ đầy đủ" },
   calendar: { previousMonth: "Tháng trước", nextMonth: "Tháng sau" },
   filterChip: { clear: "Xóa" },
   floatingActionBar: { clear: "Bỏ chọn" },

package/src/menu_button.tsx

@@ -12,7 +12,23 @@ export interface MenuButtonProps {
   right?: React.ReactNode;
   onPress?: () => void;
   onHoverIn?: () => void;
+  /**
+   * Persistent SELECTION highlight — the listbox pattern, where the row is an
+   * `option` and `aria-selected` is the property that carries its state. On any
+   * other role it is the highlight only: `aria-selected` is valid on
+   * option/tab/row/gridcell and nowhere else, so it is not emitted there (a menu
+   * carries state in the `right` slot — a check glyph).
+   */
   selected?: boolean;
+  /**
+   * This row is the CURRENT item in a set of NAVIGATION items — the section an
+   * outline rail sits on (`useSectionNav`'s `activeKey`), the open pane of a
+   * settings dialog. Renders `aria-current`, which is global (valid on any
+   * role): `true` is the generic "this is the current one", or name the set it
+   * is current WITHIN. Navigation is not selection — a rail item is `current`,
+   * a listbox row is `selected`. Both paint the same highlight.
+   */
+  current?: boolean | "page" | "step" | "location";
   focused?: boolean;
   disabled?: boolean;
   danger?: boolean;
@@ -42,6 +58,7 @@ export function MenuButton(props: MenuButtonProps) {
     onPress,
     onHoverIn,
     selected,
+    current,
     focused,
     disabled,
     danger,
@@ -84,18 +101,26 @@ export function MenuButton(props: MenuButtonProps) {
     </>
   );
 
+  // Selection and current-ness are different states with the same visual weight
+  // — a row is at most one of them, and either owns the resting highlight.
+  const highlighted = !!selected || !!current;
   const containerStyle = [
     styles.container,
-    selected && styles.selected,
-    focused && !selected && styles.focused,
+    highlighted && styles.highlighted,
+    focused && !highlighted && styles.focused,
     style,
   ];
 
+  // `aria-current` takes a TOKEN, and absence — never `false` — is how the other
+  // items in the set say "not this one".
+  const ariaCurrent = current === true ? "true" : current === false ? undefined : current;
+
   if (onPress) {
     return (
       <PressableHighlight
         focusRing
-        ref={ref}        testID={testID}
+        ref={ref}
+        testID={testID}
         nativeID={nativeID}
         onPress={() => {
           onPress?.();
@@ -106,7 +131,9 @@ export function MenuButton(props: MenuButtonProps) {
         style={containerStyle}
         role={role}
         accessibilityLabel={resolvedLabel}
-        aria-selected={!!selected} aria-disabled={disabled || undefined}
+        aria-selected={role === "option" ? !!selected : undefined}
+        aria-current={ariaCurrent}
+        aria-disabled={disabled || undefined}
       >
         {inner}
       </PressableHighlight>
@@ -133,7 +160,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "flex-start",
   },
-  selected: {
+  highlighted: {
     backgroundColor: colors.zinc["100"],
   },
   focused: {

package/src/pressable_highlight.tsx

@@ -50,6 +50,13 @@ export interface PressableHighlightProps extends PressableProps {
    * explicitly because the base React Native `PressableProps` type omits it.
    */
   onKeyDown?: (event: { key: string; preventDefault?: () => void }) => void;
+  /**
+   * The item is the current one in a set of navigation items. Exposed
+   * explicitly because React Native's accessibility props carry only the ARIA
+   * attributes with a native counterpart, and `aria-current` has none —
+   * react-native-web forwards it to the DOM like any other `aria-*` prop.
+   */
+  "aria-current"?: "true" | "page" | "step" | "location";
   /**
    * Pass "none" on row/card surfaces: a pressable surface is a button, not a
    * text-selection surface — drag jitter on selectable text starts a

package/src/section_heading.tsx

@@ -53,7 +53,8 @@ export interface SubsectionProps {
  * One named group INSIDE a `Section` — the level below `Section` on a long
  * record surface (`###` in the heading ramp). Compose a `SubsectionHeading`
  * then the group's rows; sibling subsections stack in a `SubsectionStack`
- * (24 + hairline between groups — no margins, no hand-rolled dividers). A
+ * (32, space-only while the groups are short — no margins, no hand-rolled
+ * dividers; see `SubsectionStack` for when length earns `divided`). A
  * headingless `Subsection` is fine for the section's lead group.
  *
  *   <Section>

package/src/section_stack.tsx

@@ -4,8 +4,9 @@ import { Divider } from "./divider";
 
 interface StackProps {
   children: React.ReactNode;
-  /** Hairline between blocks (default true). Turn off for a short surface
-   *  where the beat alone is enough. */
+  /** Hairline between blocks. Each stack defaults to what its altitude wants
+   *  (on for sections, off for subsections); the rule for overriding it is on
+   *  `SubsectionStack`. */
   divided?: boolean;
   style?: StyleProp<ViewStyle>;
 }
@@ -49,12 +50,17 @@ export function SectionStack(props: SectionStackProps) {
 export type SubsectionStackProps = StackProps;
 
 /**
- * The stack of `Subsection` groups INSIDE a `Section` — a fixed 32px beat,
- * SPACE-ONLY: subsection titles carry the grouping; hairlines belong to the
- * SECTION level (`SectionStack`), one rule per altitude. Compose it as the
- * section's body (after the `SectionHeading`); a section's groups divide
- * without hand-rolled gaps. `divided` stays an explicit opt-in for a rare
- * headingless stack that still needs a rule.
+ * The stack of `Subsection` groups INSIDE a `Section` — a fixed 32px beat.
+ * Compose it as the section's body (after the `SectionHeading`); a section's
+ * groups divide without hand-rolled gaps.
+ *
+ * SPACE-ONLY while the groups are SHORT (a handful of rows, taken in at a
+ * glance): the titles carry the grouping, and hairlines belong to the SECTION
+ * level (`SectionStack`), one rule per altitude. Turn `divided` on once the
+ * groups are LONG — past a screenful of rows, 32px reads as one more row gap
+ * and the next title arrives with nothing marking that a new group started, so
+ * the hairline becomes the boundary. LENGTH is the discriminator, not whether
+ * the groups are titled: a headingless stack follows the same rule.
  *
  *   <Section>
  *     <SectionHeading><SectionHeadingTitle>Delivery</SectionHeadingTitle></SectionHeading>

package/src/text_input_field.tsx

@@ -3,12 +3,13 @@ import {
   TextInput as RNTextInput,
   TextInputProps as RNTextInputProps,
   View,
+  type LayoutChangeEvent,
 } from "react-native";
 import { colors } from "./colors";
 import { CONTROL_RADIUS, FOCUS_RING, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
 import { useFocusRing, composeHandler } from "./use_focus_ring";
 import { useHover } from "./use_hover";
-import { Ref, useCallback } from "react";
+import { Ref, useCallback, useState } from "react";
 import { Icon, IconName } from "./icon";
 import { IconButton } from "./icon_button";
 import { ShortcutBadge } from "./shortcut_badge";
@@ -99,6 +100,23 @@ export function TextInputField(props: TextInputFieldProps) {
 
   const editable = !!(!disabled || inputProps.editable);
 
+  // The ONE source for what occupies the trailing slot — the same flags decide
+  // which affordance renders AND how much the text reserves for it. Derived once
+  // so the two can never disagree (a gutter gated on anything else is how a long
+  // value ends up running underneath the ✕).
+  const showClear = !!clearable && !!value;
+  // The badge is a hint for reaching an EMPTY field; once there's a value the
+  // clear ✕ owns the slot and the hint is spent.
+  const showShortcut = !!shortcut && !value;
+  // The badge's width is content- AND screen-dependent (⌘B vs Ctrl+Shift+S;
+  // `ShortcutBadge` renders NOTHING on small screens), so unlike the fixed-size
+  // ✕ its gutter cannot be a constant — it is measured, which also makes the
+  // small-screen reserve correctly zero.
+  const [shortcutWidth, setShortcutWidth] = useState(0);
+  const onShortcutLayout = useCallback((e: LayoutChangeEvent) => {
+    setShortcutWidth(e.nativeEvent.layout.width);
+  }, []);
+
   const { measure, inputRef } = autoGrowResult;
 
   const handleChangeText = useCallback(
@@ -145,6 +163,8 @@ export function TextInputField(props: TextInputFieldProps) {
           autoGrow && !autoGrowResult.scrollEnabled && { overflow: "hidden" as const },
           !editable && styles.disabled,
           icon && styles.withIcon,
+          showClear && styles.withClear,
+          showShortcut && shortcutWidth > 0 && { paddingRight: SHORTCUT_INSET + shortcutWidth },
           hovered && editable && { borderColor: HOVER_BORDER },
           style,
           focusVisible && { boxShadow: FOCUS_RING },
@@ -157,7 +177,7 @@ export function TextInputField(props: TextInputFieldProps) {
         scrollEnabled={autoGrow ? autoGrowResult.scrollEnabled : undefined}
         onContentSizeChange={autoGrow ? autoGrowResult.onContentSizeChange : undefined}
       />
-      {!!clearable && !!value ? (
+      {showClear ? (
         <IconButton
           icon="x"
           tooltip={clearLabel}
@@ -167,8 +187,8 @@ export function TextInputField(props: TextInputFieldProps) {
           }}
           style={styles.clear}
         />
-      ) : shortcut ? (
-        <View style={styles.shortcut}>
+      ) : showShortcut ? (
+        <View style={styles.shortcut} onLayout={onShortcutLayout}>
           <ShortcutBadge shortcut={shortcut} />
         </View>
       ) : null}
@@ -176,6 +196,20 @@ export function TextInputField(props: TextInputFieldProps) {
   );
 }
 
+/**
+ * The trailing slot (the clear ✕, the shortcut badge) is ABSOLUTELY POSITIONED —
+ * out of flow, so the input's text does not stop at it. Whichever affordance is
+ * up, the text reserves the span it occupies; these constants drive BOTH the
+ * affordance's `right` offset and the reserved padding, so the two cannot drift
+ * apart. A slot standing empty reserves nothing, so an input with no trailing
+ * affordance is untouched.
+ */
+const CLEAR_INSET = 6;
+/** `IconButton size="md"` is a 28px box around an 18px glyph, so the button's own
+ *  interior padding IS the visual gap — text may sit against the box edge. */
+const CLEAR_GUTTER = CLEAR_INSET + 28;
+const SHORTCUT_INSET = 12;
+
 const styles = StyleSheet.create({
   input: {
     borderRadius: CONTROL_RADIUS,
@@ -200,19 +234,24 @@ const styles = StyleSheet.create({
   withIcon: {
     paddingLeft: 34,
   },
+  withClear: {
+    paddingRight: CLEAR_GUTTER,
+  },
   icon: {
     top: 9,
     left: 8,
     position: "absolute",
   },
   clear: {
-    top: 6,
-    right: 6,
+    // Pinned to the TOP, not centred: on a multiline/auto-grow field the ✕ must
+    // stay reachable at the first line, not float in the middle of a tall box.
+    top: CLEAR_INSET,
+    right: CLEAR_INSET,
     position: "absolute",
   },
   shortcut: {
     position: "absolute",
-    right: 12,
+    right: SHORTCUT_INSET,
     top: 0,
     bottom: 0,
     justifyContent: "center",

package/src/time_picker.tsx

@@ -1,56 +1,114 @@
-import type { KeyboardEvent } from "react";
-import { colors } from "@lotics/ui/colors";
-import { fontFamilyRegular, inputTextStyleWeb } from "@lotics/ui/text_utils";
+import { useMemo, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors } from "./colors";
 import { CONTROL_RADIUS, FOCUS_RING, HOVER_BORDER } from "./control_surface";
-import { useFocusRing } from "./use_focus_ring";
 import { useHover } from "./use_hover";
+import { DateSegments } from "./date_segments_field";
+import { SegmentLabels, timeSegmentsConfig } from "./date_segments";
+import { useLoticsLocale, useLocaleTag } from "./locale";
+
 export interface TimePickerProps {
+  /** Canonical 24-hour "HH:mm", `""` when empty — independent of how it displays. */
   value?: string;
   onValueChange: (value: string) => void;
   onBlur?: () => void;
-  /** Web key handler — e.g. an inline editor committing on Enter / reverting on Escape. */
-  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
   autoFocus?: boolean;
   disabled?: boolean;
   accessibilityLabel?: string;
+  /**
+   * BCP-47 locale deciding 12- vs 24-hour DISPLAY. Defaults to the active
+   * `LoticsLocaleProvider` locale.
+   *
+   * This is the whole reason the field is segments and not `<input type="time">`:
+   * a native time input takes its 12/24-hour form from the BROWSER's UI locale
+   * and ignores `lang` entirely, so a Vietnamese screen on an en-US browser read
+   * "01:45 PM" next to its own 24-hour "13:45 02/01/2023".
+   */
+  locale?: string;
+  /** Accessible names per segment. Defaults to the `datePicker` locale slice. */
+  segmentLabels?: SegmentLabels;
+  /** Escape pressed in a segment — an inline editor cancels its session. */
+  onEscape?: () => void;
+  /** True while the entry is non-empty but still half-typed (an hour, no minute).
+   *  An inline editor blocks its commit on this. */
+  onIncompleteChange?: (incomplete: boolean) => void;
+  testID?: string;
 }
 
+/**
+ * A time of day. The value is always canonical 24-hour "HH:mm"; the locale only
+ * decides what the user sees and types (an AM/PM segment appears only where the
+ * locale uses one).
+ */
 export function TimePicker(props: TimePickerProps) {
-  const { value, onValueChange, onBlur, onKeyDown, autoFocus, disabled, accessibilityLabel } = props;
-  const { focusVisible, focusProps } = useFocusRing({ always: true });
+  const {
+    value = "",
+    onValueChange,
+    onBlur,
+    autoFocus,
+    disabled,
+    accessibilityLabel,
+    locale,
+    onEscape,
+    onIncompleteChange,
+    testID,
+  } = props;
+  const localeTag = useLocaleTag(locale);
+  const loc = useLoticsLocale().datePicker;
+  const segmentLabels = props.segmentLabels ?? loc;
+  const config = useMemo(() => timeSegmentsConfig(localeTag), [localeTag]);
   const { hovered, hoverProps } = useHover();
+  const [focused, setFocused] = useState(false);
 
   return (
-    <input
-      value={value}
-      onChange={(e) => {
-        onValueChange(e.target.value);
-      }}
-      type="time"
-      {...hoverProps}
-      onFocus={focusProps.onFocus}
-      onBlur={() => { focusProps.onBlur(); onBlur?.(); }}
-      onKeyDown={onKeyDown}
-      autoFocus={autoFocus}
-      disabled={disabled}
-      aria-label={accessibilityLabel}
-      style={{
-        height: 40,
-        paddingLeft: 8,
-        paddingRight: 8,
-        borderRadius: CONTROL_RADIUS,
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderColor: hovered && !disabled ? HOVER_BORDER : colors.border,
-        backgroundColor: colors.background,
-        fontFamily: fontFamilyRegular,
-        ...inputTextStyleWeb,
-        letterSpacing: -0.4,
-        boxShadow: focusVisible ? FOCUS_RING : "none",
-        outline: "none",
-        boxSizing: "border-box",
-        transition: "border-color 0.12s, box-shadow 0.12s",
-      }}
-    />
+    <View
+      {...(hoverProps as object)}
+      style={[
+        styles.frame,
+        hovered && !disabled && styles.frameHovered,
+        focused && !disabled && styles.frameFocused,
+        disabled && styles.frameDisabled,
+      ]}
+      testID={testID}
+    >
+      <DateSegments
+        value={value}
+        onChange={onValueChange}
+        config={config}
+        segmentLabels={segmentLabels}
+        disabled={disabled}
+        autoFocus={autoFocus}
+        accessibilityLabel={accessibilityLabel}
+        onFocus={() => setFocused(true)}
+        onBlur={() => {
+          setFocused(false);
+          onBlur?.();
+        }}
+        onEscape={onEscape}
+        onIncompleteChange={onIncompleteChange}
+      />
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  frame: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: 40,
+    paddingHorizontal: 8,
+    borderRadius: CONTROL_RADIUS,
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.background,
+  },
+  frameHovered: {
+    borderColor: HOVER_BORDER,
+  },
+  frameFocused: {
+    boxShadow: FOCUS_RING,
+  },
+  frameDisabled: {
+    backgroundColor: colors.zinc[50],
+  },
+});