@multiplatform.one/forms 7.6.2 → 7.7.0

package/src/fields/TimePicker/index.tsx

@@ -1,263 +1,8 @@
-import type { ReactNode } from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import type { LabelProps, SizeTokens } from "tamagui";
-import { isWeb } from "tamagui";
-import { Skeleton } from "../../Skeleton";
-import { Field, FieldLayout } from "../../fieldLayout";
-import { FloatingPanel } from "../../FloatingPanel";
-import { Input as InputParts } from "../../InputParts";
-import { t } from "../../shared/t";
-import {
-  getFieldError,
-  mergeFieldHandler,
-  useFormField,
-  useResolvedValidators,
-} from "../../shared/utils";
-import type { AnyFormApi } from "../../types";
-import {
-  TimePanel,
-  TimePickerClearButton,
-  TimePickerInputTrigger,
+export {
+  TimePicker,
   formatTimeDisplay,
   isValidTimeString,
-  type TimeFormat,
-} from "./parts";
-
-export type { TimeFormat } from "./parts";
-export { formatTimeDisplay, isValidTimeString, parseTimeString, toTimeString } from "./parts";
-
-export interface TimePickerProps {
-  name?: string;
-  form?: AnyFormApi;
-  validators?: Record<string, unknown>;
-  label?: ReactNode;
-  labelProps?: Omit<LabelProps, "htmlFor" | "ref">;
-  helperText?: string;
-  error?: string | boolean;
-  required?: boolean;
-  size?: SizeTokens;
-  id?: string;
-  /** Time string in "HH:MM" or "HH:MM:SS" 24h format */
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  onBlur?: (...args: any[]) => void;
-  disabled?: boolean;
-  readOnly?: boolean;
-  /** Display format (default "12h") */
-  timeFormat?: TimeFormat;
-  /** Minute step increment (default 5) */
-  minuteStep?: number;
-  /** Show seconds column (default false) */
-  showSeconds?: boolean;
-  placeholder?: string;
-  clockIcon?: ReactNode;
-  /** When true, renders a skeleton placeholder instead of the time picker */
-  skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
-}
-
-export function TimePicker({
-  name,
-  form: formProp,
-  validators,
-  label,
-  labelProps,
-  helperText,
-  error,
-  required,
-  size,
-  id: idProp,
-  value: valueProp,
-  defaultValue,
-  onChange,
-  onBlur,
-  disabled,
-  readOnly,
-  timeFormat = "12h",
-  minuteStep = 5,
-  showSeconds = false,
-  placeholder = t("Select time"),
-  clockIcon,
-  skeleton,
-  compact,
-}: TimePickerProps) {
-  const { resolvedForm, knobProps, id } = useFormField({
-    form: formProp,
-    id: idProp,
-    compact,
-  });
-  const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const [open, setOpen] = useState(false);
-  const [internalValue, setInternalValue] = useState<string>(() => valueProp ?? defaultValue ?? "");
-  useEffect(() => {
-    if (valueProp === undefined) return;
-    setInternalValue(valueProp);
-  }, [valueProp]);
-  const value = internalValue;
-  const valueIsInvalid = !!value.trim() && !isValidTimeString(value);
-  const formatError = valueIsInvalid ? t("Invalid time value") : undefined;
-
-  const displayValue = useMemo(
-    () => (valueIsInvalid ? "" : formatTimeDisplay(value, timeFormat, showSeconds)),
-    [value, valueIsInvalid, timeFormat, showSeconds],
-  );
-
-  const handleChange = useCallback(
-    (time: string, fieldChange?: (v: any) => void) => {
-      setInternalValue(time);
-      fieldChange?.(time);
-      onChange?.(time);
-    },
-    [onChange],
-  );
-
-  const handleClear = useCallback(
-    (fieldChange?: (v: any) => void) => {
-      handleChange("", fieldChange);
-    },
-    [handleChange],
-  );
-
-  const renderTrigger = (
-    triggerValue: string,
-    hasError?: boolean,
-    fieldChange?: (v: any) => void,
-    readonly?: boolean,
-  ) => (
-    <TimePickerInputTrigger
-      value={triggerValue}
-      placeholder={placeholder}
-      disabled={disabled}
-      error={hasError}
-      id={id}
-      clockIcon={clockIcon}
-      onOpen={() => setOpen(true)}
-      onClear={() => handleClear(fieldChange)}
-      aria-label={label ? undefined : t("Time")}
-      aria-readonly={readonly || undefined}
-      aria-required={required || undefined}
-      aria-invalid={hasError || undefined}
-    />
-  );
-
-  const panelContent = (currentValue: string, onValueChange: (next: string) => void) => (
-    <TimePanel
-      value={currentValue || "00:00"}
-      onChange={onValueChange}
-      timeFormat={timeFormat}
-      minuteStep={minuteStep}
-      showSeconds={showSeconds}
-    />
-  );
-
-  if (skeleton) {
-    return (
-      <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
-        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
-      </FieldLayout>
-    );
-  }
-
-  const renderField = (
-    triggerValue: string,
-    hasError?: boolean,
-    blurHandler?: (...args: any[]) => void,
-    fieldChange?: (v: any) => void,
-    fieldValue?: string,
-  ) => {
-    if (readOnly) {
-      return renderTrigger(triggerValue, hasError, undefined, true);
-    }
-    return (
-      <FloatingPanel
-        open={open}
-        onOpenChange={(isOpen) => {
-          setOpen(isOpen);
-          if (!isOpen) blurHandler?.();
-        }}
-        disabled={disabled}
-        sizing="grow"
-        widthMode="at-least-trigger"
-        triggerA11y={{
-          label: (typeof label === "string" && label) || t("Time"),
-          value: triggerValue || placeholder,
-          hint: typeof helperText === "string" ? helperText : undefined,
-        }}
-        trigger={renderTrigger(triggerValue, hasError, fieldChange)}
-        triggerEnd={
-          !isWeb && triggerValue ? (
-            <TimePickerClearButton onClear={() => handleClear(fieldChange)} disabled={disabled} />
-          ) : undefined
-        }
-      >
-        {panelContent(fieldValue ?? value, (time) => handleChange(time, fieldChange))}
-      </FloatingPanel>
-    );
-  };
-
-  if (!resolvedForm || !name) {
-    return (
-      <FieldLayout
-        id={id}
-        label={label}
-        labelProps={labelProps}
-        error={error || formatError}
-        helperText={helperText}
-        required={required}
-        size={size}
-        knobProps={knobProps}
-        onBlur={onBlur}
-        disabled={disabled}
-      >
-        <InputParts size={size || knobProps.sizeToken}>
-          {renderField(displayValue, !!error || valueIsInvalid, onBlur)}
-        </InputParts>
-      </FieldLayout>
-    );
-  }
-
-  return (
-    <Field
-      form={resolvedForm}
-      name={name}
-      defaultValue={defaultValue}
-      validators={resolvedValidators}
-    >
-      {(field) => {
-        const resolvedError = getFieldError(field, error);
-        const fieldValue = (field.state.value as string) ?? "";
-        const fieldIsInvalid = !!fieldValue.trim() && !isValidTimeString(fieldValue);
-        const fieldFormatError = fieldIsInvalid ? t("Invalid time value") : undefined;
-        const fieldDisplay = fieldIsInvalid
-          ? ""
-          : formatTimeDisplay(fieldValue, timeFormat, showSeconds);
-        return (
-          <FieldLayout
-            id={id}
-            label={label}
-            labelProps={labelProps}
-            error={resolvedError || fieldFormatError}
-            helperText={helperText}
-            required={required}
-            size={size}
-            knobProps={knobProps}
-            onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
-            disabled={disabled}
-          >
-            <InputParts size={size || knobProps.sizeToken}>
-              {renderField(
-                fieldDisplay,
-                !!resolvedError || fieldIsInvalid,
-                mergeFieldHandler(field, "handleBlur", onBlur),
-                (v) => field.handleChange(v),
-                fieldValue,
-              )}
-            </InputParts>
-          </FieldLayout>
-        );
-      }}
-    </Field>
-  );
-}
+  parseTimeString,
+  toTimeString,
+} from "./catalog";
+export type { TimeFormat, TimePickerProps } from "./catalog";

package/src/fields/TimeRangeScrubber/TimeRangeScrubber.spec.tsx

@@ -13,6 +13,7 @@ import {
   DEFAULT_QUICK_RANGES,
   applyQuickRange,
   assertAbsoluteDateRange,
+  clampCapLeft,
   dateRangeKeys,
   fractionToTime,
   getScrubberGripRenderSize,
@@ -150,6 +151,14 @@ describe("TimeRangeScrubber geometry", () => {
     expect(resolveScrubberTransition("jump", "quick", true)).toBe("none");
     expect(resolveScrubberTransition("jump", undefined, false)).toBe("none");
   });
+
+  it("clamps the playhead cap inside the rail, including at the right edge", () => {
+    expect(clampCapLeft(0, 400, 79.6)).toBe(0);
+    expect(clampCapLeft(1, 400, 79.6)).toBeCloseTo(320.4);
+    expect(clampCapLeft(0.5, 400, 80)).toBe(160);
+    expect(clampCapLeft(1, 400, 79.6)).toBeLessThanOrEqual(400 - 79.6);
+    expect(clampCapLeft(0.5, 0, 80)).toBeNull();
+  });
 });
 
 describe("TimeRangeScrubber", () => {
@@ -183,6 +192,33 @@ describe("TimeRangeScrubber", () => {
     expect(result.container.querySelector("[data-part='activity']")).toBeTruthy();
   });
 
+  it("keeps the 28px playhead cap to a single clock line; frame stale sits outside", () => {
+    const scrub = new Date("2026-08-28T14:22:31.000Z");
+    const result = renderWithProviders(
+      <TimeRangeScrubber
+        label="Session"
+        now={NOW}
+        window={WINDOW}
+        scrubTime={scrub}
+        frames={[new Date("2026-08-28T14:22:00.000Z")]}
+        value={{
+          start: new Date("2026-08-28T14:17:30.000Z"),
+          end: new Date("2026-08-28T14:27:30.000Z"),
+        }}
+      />,
+    );
+    const cap = result.container.querySelector("[data-part='cap']");
+    expect(cap).toBeTruthy();
+    expect(cap?.textContent?.trim()).toMatch(/^\d{2}:\d{2}:\d{2}$/);
+    expect(cap?.textContent).not.toMatch(/frame/i);
+    const nested = cap?.querySelector("[data-part='frame-stale']");
+    expect(nested).toBeFalsy();
+    const stale = result.container.querySelector("[data-part='frame-stale']");
+    expect(stale).toBeTruthy();
+    expect(stale?.textContent).toMatch(/frame/i);
+    expect(cap?.contains(stale)).toBe(false);
+  });
+
   it("paints the grip 0 at borderRadius:none and h/2 at medium", () => {
     const none = renderWithProviders(
       <Preset overrides={{ borderRadius: "none" }}>

package/src/fields/TimeRangeScrubber/geometry.ts

@@ -17,8 +17,10 @@ export const BRUSH_HANDLE = { width: 7, height: 28 } as const;
 export const BRUSH_BAND_HEIGHT = 28;
 export const PLAYHEAD_WIDTH = 1;
 export const CHIP_HEIGHT = 28;
+/** Board-measured pin (D-scrubber 28/r5). Family vs per-part radius is RULE MISSING. */
 export const CHIP_RADIUS = 5;
 export const CAP_HEIGHT = 28;
+/** Board-measured pin (D-scrubber 28/r9). Family vs per-part radius is RULE MISSING. */
 export const CAP_RADIUS = 9;
 
 /** LC-43 recognition constant: touch must hold before a lift, so swipe-scroll survives. */
@@ -142,6 +144,17 @@ export function timeToFraction(time: Date, window: TimeWindow): number {
   return Math.min(1, Math.max(0, (time.getTime() - window.start.getTime()) / span));
 }
 
+/**
+ * Pixel left for a playhead cap so it stays inside the rail.
+ * Centering with `x="-50%"` at fraction=1 hangs by half the cap (the 39.8px
+ * spill on a 79.6px / 28px pill).
+ */
+export function clampCapLeft(fraction: number, railWidth: number, capWidth: number): number | null {
+  if (railWidth <= 0 || capWidth <= 0) return null;
+  const center = fraction * railWidth;
+  return Math.min(Math.max(center - capWidth / 2, 0), Math.max(0, railWidth - capWidth));
+}
+
 export function fractionToTime(fraction: number, window: TimeWindow): Date {
   const span = window.end.getTime() - window.start.getTime();
   const clamped = Math.min(1, Math.max(0, fraction));

package/src/fields/TimeRangeScrubber/index.tsx

@@ -2,6 +2,7 @@ import {
   defaultKnobs,
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
+  FOCUS_RING_HALO_OFFSET,
   formatAbsoluteDateTime,
   pressTargetHitSlop,
   usePresetContext,
@@ -49,6 +50,7 @@ import {
   activityUnder,
   applyQuickRange,
   assertAbsoluteDateRange,
+  clampCapLeft,
   clampRangeToWindow,
   defaultWindow,
   formatDurationMs,
@@ -80,6 +82,7 @@ export {
   TOUCH_HOLD_MS,
   applyQuickRange,
   assertAbsoluteDateRange,
+  clampCapLeft,
   getScrubberGripRenderSize,
   resolveScrubberRadius,
 } from "./geometry";
@@ -272,6 +275,8 @@ function TimeRangeScrubberControl({
   const [kbFocus, setKbFocus] = useState<string | null>(null);
   const [moreOpen, setMoreOpen] = useState(false);
   const [announce, setAnnounce] = useState("");
+  const [capTrackWidth, setCapTrackWidth] = useState(0);
+  const [capWidth, setCapWidth] = useState(0);
   const railRef = useRef<HTMLElement | null>(null);
   const dragRoleRef = useRef<DragRole | null>(null);
   const liftOriginRef = useRef<Date | null>(null);
@@ -294,7 +299,12 @@ function TimeRangeScrubberControl({
   const frameAt = latestFrameAtOrBefore(frames, scrubTime);
   const activityAt = activityUnder(activity, scrubTime);
   const fieldThemeOutline = (theme.outlineColor?.val as string | undefined) ?? "$outlineColor";
-  const focusRing = ensureFocusVisibleRing({ outlineColor: fieldThemeOutline, outlineOffset: 2 });
+  // LC-71 §4 halo: circular thumb. At offset 0 the band is concentric with
+  // the handle's own edge and reads as a thicker handle, not a ring around it.
+  const focusRing = ensureFocusVisibleRing({
+    outlineColor: fieldThemeOutline,
+    outlineOffset: FOCUS_RING_HALO_OFFSET,
+  });
 
   const emitScrub = useCallback(
     (next: Date, nextSession: ScrubberSession) => {
@@ -490,6 +500,8 @@ function TimeRangeScrubberControl({
   };
 
   const leftPct = (time: Date) => `${timeToFraction(time, windowValue) * 100}%`;
+  const scrubFraction = timeToFraction(scrubTime, windowValue);
+  const capLeft = clampCapLeft(scrubFraction, capTrackWidth, capWidth);
   const gripFocus = kbFocus === "grip" ? focusRing : undefined;
   const startFocus = kbFocus === "brush-start" ? focusRing : undefined;
   const endFocus = kbFocus === "brush-end" ? focusRing : undefined;
@@ -551,7 +563,7 @@ function TimeRangeScrubberControl({
       data-testid="time-range-scrubber"
       opacity={disabled ? 0.5 : 1}
     >
-      <XStack alignItems="baseline" gap="$3" justifyContent="flex-end">
+      <XStack alignItems="baseline" gap="$3" justifyContent="flex-end" flexWrap="wrap">
         <Text
           fontFamily="$mono"
           fontSize={12}
@@ -563,6 +575,17 @@ function TimeRangeScrubberControl({
         >
           {formatRangeReadout(value)}
         </Text>
+        {frameAt ? (
+          <Text
+            fontFamily="$mono"
+            fontSize={12}
+            lineHeight={22}
+            color="$color11"
+            data-part="frame-stale"
+          >
+            {`${t("frame")} −${frameStale}`}
+          </Text>
+        ) : null}
       </XStack>
       <XStack alignItems="center" gap={7}>
         <View
@@ -606,23 +629,41 @@ function TimeRangeScrubberControl({
         width="100%"
         minHeight={AXIS_BAND}
       >
-        <XStack height={32} position="relative" marginBottom={4}>
+        <XStack
+          height={CAP_HEIGHT}
+          position="relative"
+          marginBottom={4}
+          width="100%"
+          onLayout={(event) => setCapTrackWidth(event.nativeEvent.layout.width)}
+        >
           <View
             position="absolute"
-            left={leftPct(scrubTime)}
-            x="-50%"
+            left={capLeft ?? `${scrubFraction * 100}%`}
+            x={capLeft == null ? "-50%" : 0}
             height={CAP_HEIGHT}
             paddingHorizontal={10}
+            flexDirection="row"
+            alignItems="center"
+            justifyContent="center"
+            overflow="hidden"
+            maxHeight={CAP_HEIGHT}
             borderRadius={CAP_RADIUS}
             borderWidth={1}
             borderColor="$borderColor"
             backgroundColor="$color2"
-            justifyContent="center"
+            onLayout={(event) => setCapWidth(event.nativeEvent.layout.width)}
             data-part="cap"
           >
-            <Text fontFamily="$mono" fontSize={12} lineHeight={22} color="$color12">
+            <Text
+              fontFamily="$mono"
+              fontSize={12}
+              lineHeight={16}
+              color="$color12"
+              numberOfLines={1}
+              ellipsizeMode="clip"
+              whiteSpace="nowrap"
+            >
               {formatClock(scrubTime)}
-              {frameAt ? <Text color="$color11">{`  ${t("frame")} −${frameStale}`}</Text> : null}
             </Text>
           </View>
         </XStack>

package/src/fields/nativeDateTime/OsDateTimeSheet.spec.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { osDateTimeIosDisplay } from "./osDateTimeIosDisplay";
+
+describe("osDateTimeIosDisplay", () => {
+  it("uses the iOS 14+ inline calendar for dates", () => {
+    expect(osDateTimeIosDisplay("date")).toBe("inline");
+  });
+
+  it("keeps the time wheel", () => {
+    expect(osDateTimeIosDisplay("time")).toBe("spinner");
+  });
+});

package/src/fields/nativeDateTime/OsDateTimeSheet.tsx

@@ -0,0 +1,197 @@
+/**
+ * OS date/time sheet — iOS spinner/calendar, Android Material dialog.
+ *
+ * Catalog DatePicker/TimePicker/DatetimePicker on web keep the house calendar
+ * and time panel. On native those controls are the ones users expect: the
+ * iOS 14+ inline calendar, the time *wheel*, and Android's dialog. This
+ * sheet is the shared chrome so the three fields do not each invent a Modal.
+ *
+ * `native={false}` on a field skips this and keeps the catalog overlay.
+ */
+import { useCallback, useState } from "react";
+import { Modal, Pressable, StyleSheet, useColorScheme, Platform } from "react-native";
+import DateTimePicker, { type DateTimePickerEvent } from "@react-native-community/datetimepicker";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Text, View, XStack, YStack, useTheme, useThemeName } from "tamagui";
+import { formCommonColors } from "../../shared/colorRamps";
+import { t } from "../../shared/t";
+import { osDateTimeIosDisplay } from "./osDateTimeIosDisplay";
+
+export type OsDateTimeMode = "date" | "time" | "datetime";
+
+export type OsDateTimeSheetProps = {
+  open: boolean;
+  value: Date;
+  mode: OsDateTimeMode;
+  minDate?: Date;
+  maxDate?: Date;
+  onCancel: () => void;
+  onConfirm: (value: Date) => void;
+};
+
+function useNativePickerScheme(): "light" | "dark" {
+  const themeName = useThemeName();
+  const osScheme = useColorScheme();
+  if (themeName) return String(themeName).startsWith("dark") ? "dark" : "light";
+  return osScheme === "dark" ? "dark" : "light";
+}
+
+export function OsDateTimeSheet({
+  open,
+  value,
+  mode,
+  minDate,
+  maxDate,
+  onCancel,
+  onConfirm,
+}: OsDateTimeSheetProps) {
+  const { knobProps } = useResolvedKnobs();
+  const themeVariant = useNativePickerScheme();
+  const theme = useTheme();
+  const accentColor = theme.accentBackground?.val;
+  const isIOS = Platform.OS === "ios";
+  const [showTimePicker, setShowTimePicker] = useState(false);
+  const [temp, setTemp] = useState(value);
+  const pickerMode: "date" | "time" =
+    mode === "time" || (mode === "datetime" && showTimePicker) ? "time" : "date";
+  const iosDisplay = osDateTimeIosDisplay(pickerMode);
+
+  const reset = useCallback(() => {
+    setShowTimePicker(false);
+    setTemp(value);
+  }, [value]);
+
+  const [wasOpen, setWasOpen] = useState(false);
+  if (open && !wasOpen) {
+    setWasOpen(true);
+    setTemp(value);
+    setShowTimePicker(false);
+  } else if (!open && wasOpen) {
+    setWasOpen(false);
+  }
+
+  function handleAndroidChange(event: DateTimePickerEvent, selected?: Date) {
+    if (event.type === "dismissed") {
+      reset();
+      onCancel();
+      return;
+    }
+    if (event.type !== "set" || !selected) return;
+    if (mode === "datetime" && !showTimePicker) {
+      setTemp(selected);
+      setShowTimePicker(true);
+      return;
+    }
+    const picked =
+      mode === "datetime"
+        ? new Date(
+            temp.getFullYear(),
+            temp.getMonth(),
+            temp.getDate(),
+            selected.getHours(),
+            selected.getMinutes(),
+            selected.getSeconds(),
+          )
+        : selected;
+    onConfirm(picked);
+    reset();
+  }
+
+  function handleIOSChange(_event: DateTimePickerEvent, selected?: Date) {
+    if (!selected) return;
+    if (mode === "datetime" && showTimePicker) {
+      setTemp(
+        new Date(
+          temp.getFullYear(),
+          temp.getMonth(),
+          temp.getDate(),
+          selected.getHours(),
+          selected.getMinutes(),
+          selected.getSeconds(),
+        ),
+      );
+      return;
+    }
+    setTemp(selected);
+  }
+
+  function confirm() {
+    onConfirm(temp);
+    reset();
+  }
+
+  if (!open) return null;
+
+  if (!isIOS) {
+    return (
+      <DateTimePicker
+        value={temp}
+        mode={pickerMode}
+        display="default"
+        onChange={handleAndroidChange}
+        minimumDate={mode !== "time" ? minDate : undefined}
+        maximumDate={mode !== "time" ? maxDate : undefined}
+      />
+    );
+  }
+
+  return (
+    <Modal transparent animationType="fade" visible={open} onRequestClose={onCancel}>
+      <Pressable style={styles.modalOverlay} onPress={onCancel}>
+        <View
+          pointerEvents="none"
+          position="absolute"
+          top={0}
+          right={0}
+          bottom={0}
+          left={0}
+          backgroundColor="$shadow6"
+        />
+        <Pressable onPress={(e) => e.stopPropagation()}>
+          <YStack
+            {...knobProps.elevatedSurface}
+            borderBottomLeftRadius={0}
+            borderBottomRightRadius={0}
+          >
+            <XStack justifyContent="space-between" {...knobProps.panelPadding}>
+              <Pressable onPress={onCancel} accessibilityRole="button">
+                <Text color={formCommonColors.text}>{t("Cancel")}</Text>
+              </Pressable>
+              {mode === "datetime" && !showTimePicker ? (
+                <Pressable onPress={() => setShowTimePicker(true)} accessibilityRole="button">
+                  <Text color="$accentBackground">{t("Next")}</Text>
+                </Pressable>
+              ) : (
+                <Pressable onPress={confirm} accessibilityRole="button">
+                  <Text color="$accentBackground">{t("Done")}</Text>
+                </Pressable>
+              )}
+            </XStack>
+            <YStack {...knobProps.panelPadding}>
+              <DateTimePicker
+                value={temp}
+                mode={pickerMode}
+                display={iosDisplay}
+                themeVariant={themeVariant}
+                accentColor={accentColor}
+                onChange={handleIOSChange}
+                minimumDate={mode !== "time" ? minDate : undefined}
+                maximumDate={mode !== "time" ? maxDate : undefined}
+                style={pickerMode === "time" ? styles.wheel : styles.calendar}
+              />
+            </YStack>
+          </YStack>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  wheel: { height: 216 },
+  calendar: { height: 360 },
+});

package/src/fields/nativeDateTime/osDateTimeIosDisplay.ts

@@ -0,0 +1,4 @@
+/** iOS date is the inline calendar; time keeps the wheel users expect. */
+export function osDateTimeIosDisplay(mode: "date" | "time"): "inline" | "spinner" {
+  return mode === "time" ? "spinner" : "inline";
+}