@multiplatform.one/forms 7.77.1 → 7.78.0

package/src/FloatingPanel/index.native.tsx

@@ -123,6 +123,12 @@ import { RegularPanel } from "./RegularPanel";
 import { panelViewportPadding, resolvePanelWidthMode } from "./useFloatingPanel";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 import { iconEchoElement, iconEchoOverlays, type IconEcho } from "./iconEcho";
+import { echoInCover, iconCoverRect } from "./coverRect";
+import {
+  IconButtonGroupSurfaceContext,
+  useIconButtonGroupSurface,
+  type IconButtonGroupPlate,
+} from "../Button/iconButtonGroupContext";
 
 // Re-export the hook + constants so Select / Combobox / external consumers
 // resolve identically on native (their floating cores are unused on device
@@ -189,10 +195,13 @@ export function FloatingPanel({
   const { knobProps } = useResolvedKnobs({ painted: false });
   const triggerSurface = SurfaceContext.useStyledContext();
   const windowZIndex = useOverlayZIndex("sheet");
+  // A grouped trigger's capsule is its own: a panel's content never covers it.
   const children = (
-    <Surface painted={false} elevated>
-      {panelChildren}
-    </Surface>
+    <IconButtonGroupSurfaceContext.Provider value={null}>
+      <Surface painted={false} elevated>
+        {panelChildren}
+      </Surface>
+    </IconButtonGroupSurfaceContext.Provider>
   );
   const slideTransition = knobProps.motion.slide.transition;
   const enterDuration = motionDurationMs(slideTransition);
@@ -250,6 +259,10 @@ export function FloatingPanel({
   const anchored = asMenu || asRegular;
   const triggerRef = useRef<RNView | null>(null);
   const [anchor, setAnchor] = useState<TriggerRect | null>(null);
+  // LC-112 (FZ-8550): a trigger in a bar's glass capsule covers the capsule.
+  const groupSurface = useIconButtonGroupSurface();
+  // `undefined` while the capsule is still being measured.
+  const [group, setGroup] = useState<IconButtonGroupPlate | null | undefined>(null);
   const [triggerRadius, setTriggerRadius] = useState<number | null>(null);
   const reportTriggerRadius = useCallback(
     (radius: number) => setTriggerRadius((prev) => (prev === radius ? prev : radius)),
@@ -260,6 +273,7 @@ export function FloatingPanel({
   useLayoutEffect(() => {
     if (!anchored || !open) {
       setAnchor(null);
+      setGroup(null);
       return;
     }
     const node = triggerRef.current as
@@ -275,10 +289,18 @@ export function FloatingPanel({
     } else {
       setAnchor({ x: 0, y: 0, width: 0, height: 0 });
     }
+    if (iconEcho && anchorMode !== "attach" && groupSurface) {
+      setGroup(undefined);
+      groupSurface.measure((plate) => {
+        if (live) setGroup(plate);
+      });
+    } else {
+      setGroup(null);
+    }
     return () => {
       live = false;
     };
-  }, [anchored, open]);
+  }, [anchored, open, iconEcho, anchorMode, groupSurface]);
 
   const handleBackdropPress = useCallback(() => {
     if (backdropArmed) close();
@@ -636,7 +658,7 @@ export function FloatingPanel({
             <TriggerMenuPanel
               // An attached menu (an icon trigger, no echo row) opens under its
               // trigger instead of over it, the UIMenu pull-down (LC-262).
-              anchor={anchor}
+              anchor={group === undefined ? null : anchor}
               attach={anchorMode === "attach"}
               bounds={{
                 top: topInset + panelViewportPadding,
@@ -655,6 +677,7 @@ export function FloatingPanel({
                   : null
               }
               iconEchoKind={iconEcho}
+              group={iconEcho && anchorMode !== "attach" ? (group ?? null) : null}
               coverAlign={anchorMode === "attach" ? "start" : coverAlign}
               panelWidth={panelWidth}
               triggerRadius={anchorMode === "attach" ? null : triggerRadius}
@@ -824,6 +847,7 @@ function TriggerMenuPanel({
   echoLabel,
   iconEcho = null,
   iconEchoKind = "menu",
+  group = null,
   coverAlign,
   panelWidth,
   triggerRadius,
@@ -841,6 +865,8 @@ function TriggerMenuPanel({
   /** LC-112 (FZ-8480): the icon trigger drawn again in its own spot. */
   iconEcho?: ReactNode;
   iconEchoKind?: IconEcho;
+  /** LC-112 (FZ-8550): the glass capsule a grouped trigger sits on. */
+  group?: IconButtonGroupPlate | null;
   coverAlign: "start" | "auto";
   panelWidth: PanelWidth;
   triggerRadius: number | null;
@@ -852,6 +878,11 @@ function TriggerMenuPanel({
 }) {
   const { knobProps } = useResolvedKnobs({ painted: false });
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+  // LC-112 (FZ-8480, FZ-8550): an icon trigger's panel covers the surface the
+  // trigger is seen on, its capsule or its press target, and the X keeps the
+  // trigger's own box inside it.
+  const cover = anchor && iconEcho != null ? iconCoverRect(anchor, group) : anchor;
+  const echoCover = anchor && cover && iconEcho != null ? echoInCover(anchor, cover) : null;
   // LC-112 width setting (FZ-8438 r3). `"content"` keeps the iOS pull-down's
   // 250pt floor (FZ-8220), and no panel is narrower than an echoed trigger.
   const room =
@@ -871,12 +902,12 @@ function TriggerMenuPanel({
     trigger: anchor?.width ?? 0,
     available: room.right - room.left,
     echo: echo != null,
-    floor: Math.max(MENU_MIN_WIDTH, anchor?.width ?? 0),
+    floor: Math.max(MENU_MIN_WIDTH, cover?.width ?? 0),
   });
   const placement =
-    anchor && size
+    anchor && cover && size
       ? (attach ? placeBesideTrigger : placeOverTrigger)({
-          trigger: anchor,
+          trigger: cover,
           width: size.width,
           height: size.height,
           bounds: room,
@@ -888,13 +919,15 @@ function TriggerMenuPanel({
   // LC-112 seamless cover: the menu is its trigger grown open, so it draws the
   // trigger's corner arc at all four corners. A field reports its radius; an
   // icon button with no echo is a circle or capsule, half its short side.
-  const half = anchor ? Math.min(anchor.width, anchor.height) / 2 : undefined;
+  const half = cover ? Math.min(cover.width, cover.height) / 2 : undefined;
   const radius =
-    triggerRadius != null && half != null
-      ? Math.min(triggerRadius, half)
-      : coverAlign === "auto" && half
-        ? half
-        : undefined;
+    group != null && iconEcho != null
+      ? Math.min(group.radius, half ?? group.radius)
+      : triggerRadius != null && half != null
+        ? Math.min(triggerRadius, half)
+        : coverAlign === "auto" && half
+          ? half
+          : undefined;
   const borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
   const echoOverlays = iconEchoOverlays(iconEchoKind, placement?.up ?? false);
   // A panel slid along the screen (a `"screen"` or fixed width, or one pushed
@@ -981,7 +1014,13 @@ function TriggerMenuPanel({
               </Pressable>
             ) : null}
             {iconEcho != null && anchor && !placement?.up && !echoOverlays ? (
-              <IconEchoBand anchor={anchor} shift={echoShift} borderWidth={borderWidth} edge="top">
+              <IconEchoBand
+                anchor={anchor}
+                cover={echoCover}
+                shift={echoShift}
+                borderWidth={borderWidth}
+                edge="top"
+              >
                 {iconEcho}
               </IconEchoBand>
             ) : null}
@@ -996,7 +1035,7 @@ function TriggerMenuPanel({
                       ? echoHeaderBox({
                           offset: echoShift,
                           width: anchor.width,
-                          height: anchor.height,
+                          height: echoCover?.height ?? anchor.height,
                           panelWidth: placement.width,
                           rtl: I18nManager.isRTL,
                         })
@@ -1010,6 +1049,7 @@ function TriggerMenuPanel({
             {iconEcho != null && anchor && (placement?.up || echoOverlays) ? (
               <IconEchoBand
                 anchor={anchor}
+                cover={echoCover}
                 shift={echoShift}
                 borderWidth={borderWidth}
                 edge={echoOverlays ? "overlay" : "bottom"}
@@ -1032,18 +1072,22 @@ function TriggerMenuPanel({
  */
 function IconEchoBand({
   anchor,
+  cover = null,
   shift,
   borderWidth,
   edge,
   children,
 }: {
   anchor: TriggerRect;
+  /** The trigger's offset in, and the height of, a cover larger than it. */
+  cover?: { top: number; height: number } | null;
   shift: number;
   borderWidth: number;
   /** `"overlay"`: an X laid over the content's top corner, taking no height. */
   edge: "top" | "bottom" | "overlay";
   children: ReactNode;
 }) {
+  const bandHeight = cover?.height ?? anchor.height;
   return (
     <RNView
       testID="floating-panel-icon-echo-band"
@@ -1055,11 +1099,11 @@ function IconEchoBand({
               top: -borderWidth,
               start: -borderWidth,
               end: -borderWidth,
-              height: anchor.height,
+              height: bandHeight,
               zIndex: 1,
             }
           : {
-              height: anchor.height,
+              height: bandHeight,
               marginHorizontal: -borderWidth,
               ...(edge === "top" ? { marginTop: -borderWidth } : { marginBottom: -borderWidth }),
             }
@@ -1070,6 +1114,7 @@ function IconEchoBand({
           width: anchor.width,
           height: anchor.height,
           marginStart: shift,
+          marginTop: cover?.top ?? 0,
           alignItems: "flex-start",
           justifyContent: "flex-start",
         }}

package/src/FloatingPanel/index.tsx

@@ -48,6 +48,7 @@ import {
   type PanelIconEchoBox,
 } from "./echoContext";
 import { iconEchoElement, iconEchoOverlays, type IconEcho } from "./iconEcho";
+import { echoInCover, iconCoverRect } from "./coverRect";
 import { groupSurfaceOf, paintedTriggerBox } from "./paintedBox";
 import {
   contextMenuPoint,
@@ -566,8 +567,9 @@ function placeIconEcho(
     up: boolean;
     overlay: boolean;
     /**
-     * The shared plate a grouped trigger sits on: the band covers all of it,
-     * and only the pressed trigger shows, at its own spot in the plate.
+     * The surface the panel covers when it is not the trigger's own box (a
+     * grouped capsule, or the 44pt target of a smaller avatar): the band
+     * covers all of it, and only the pressed trigger shows, at its own spot.
      */
     group?: { top: number; height: number } | null;
   },
@@ -1065,22 +1067,43 @@ function FloatingPanelWeb({
             measured.height + firstActionHeight + bodyPadding + totalBorderWidth,
           )
         : totalContentHeight;
+      // LC-112 (FZ-8480): an icon trigger's panel covers the surface the
+      // trigger is seen on: its capsule, else its press target.
+      const painted = showIconEcho ? paintedTriggerBox(trig, measured) : null;
+      const coverRect = painted
+        ? iconCoverRect(
+            {
+              x: painted.left,
+              y: measured.top,
+              width: painted.right - painted.left,
+              height: measured.height,
+            },
+            groupBox
+              ? {
+                  x: groupBox.left,
+                  y: groupBox.top,
+                  width: groupBox.width,
+                  height: groupBox.height,
+                }
+              : null,
+          )
+        : null;
+      const echoCover = coverRect
+        ? echoInCover(
+            { x: measured.left, y: measured.top, width: measured.width, height: measured.height },
+            coverRect,
+          )
+        : null;
       let placedTop = measured.top;
       let placedLeft = left;
       let placedMaxHeight: number | null = null;
       iconEchoUpRef.current = false;
-      if (showIconEcho && measured.width > 0 && measured.height > 0) {
+      if (coverRect && measured.width > 0 && measured.height > 0) {
         // LC-112 (FZ-8480): the button is drawn again in its own spot, so the
         // panel stays on it: down from its top edge, or up from its bottom.
         // It covers the button's plate and press box where they reach past it.
-        const painted = groupBox ?? paintedTriggerBox(trig, measured);
         const placed = placeOverTrigger({
-          trigger: {
-            x: painted.left,
-            y: groupBox ? groupBox.top : measured.top,
-            width: painted.right - painted.left,
-            height: groupBox ? groupBox.height : measured.height,
-          },
+          trigger: coverRect,
           width,
           height: totalContentHeight,
           bounds: {
@@ -1152,7 +1175,7 @@ function FloatingPanelWeb({
           ? echoHeaderBox({
               offset: echoStart,
               width: measured.width,
-              height: measured.height,
+              height: echoCover?.height ?? measured.height,
               panelWidth: width,
               rtl,
             })
@@ -1164,10 +1187,7 @@ function FloatingPanelWeb({
         height: measured.height,
         up: iconEchoUpRef.current,
         overlay: echoOverlays,
-        group:
-          groupSurface && groupBox
-            ? { top: measured.top - groupBox.top, height: groupBox.height }
-            : null,
+        group: echoCover,
       });
       placeEchoOverTrigger(
         dropdownElement,

package/src/InputParts/index.tsx

@@ -34,6 +34,7 @@ import {
   styled,
   useGetThemedIcon,
   useTheme,
+  useThemeName,
 } from "tamagui";
 import {
   ensureCompositeFocusRing,
@@ -64,6 +65,7 @@ import { pressSlopProps } from "../shared/pressSlopProps";
 import { useFieldRow } from "../shared/fieldRowContext";
 import { useIsInTableCell } from "../shared/tableCellContext";
 import { useInPanelEcho, usePanelTriggerRadiusReporter } from "../FloatingPanel/echoContext";
+import { keyboardAppearanceFor } from "./keyboardAppearance";
 import { useFieldA11y, useFieldDescribedBy } from "../fieldLayout";
 
 /**
@@ -857,6 +859,7 @@ const InputAreaImpl = InputFrame.styleable<{
   // field given `size` directly (no Surface) must not type at `$true`.
   const { knobProps } = useResolvedKnobs({ size: size as SizeTokens });
   const theme = useTheme();
+  const themeName = useThemeName();
   const fieldDescribedBy = useFieldDescribedBy();
   const nativeA11yProps = useNativeFieldA11yProps();
   const inTableCell = useIsInTableCell();
@@ -929,6 +932,9 @@ const InputAreaImpl = InputFrame.styleable<{
         paddingHorizontal={0}
         paddingVertical={0}
         keyboardType={resolvedKeyboardType}
+        // The iOS keyboard follows the OS appearance unless told, so a light
+        // app on a dark phone typed on a dark keypad (FZ-8111).
+        {...(isWeb ? undefined : { keyboardAppearance: keyboardAppearanceFor(themeName) })}
         textContentType={textContentType}
         inputMode={resolvedInputMode}
         autoComplete={

package/src/InputParts/keyboardAppearance.spec.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { keyboardAppearanceFor } from "./keyboardAppearance";
+
+describe("keyboardAppearanceFor (FZ-8111)", () => {
+  it("follows the app's scheme, not the phone's", () => {
+    expect(keyboardAppearanceFor("light")).toBe("light");
+    expect(keyboardAppearanceFor("light_accent")).toBe("light");
+    expect(keyboardAppearanceFor("dark")).toBe("dark");
+    expect(keyboardAppearanceFor("dark_accent")).toBe("dark");
+    expect(keyboardAppearanceFor(undefined)).toBe("light");
+  });
+});

package/src/InputParts/keyboardAppearance.ts

@@ -0,0 +1,4 @@
+/** The iOS keypad's appearance from the active theme, not the phone's setting. */
+export function keyboardAppearanceFor(themeName: string | undefined): "light" | "dark" {
+  return String(themeName ?? "").startsWith("dark") ? "dark" : "light";
+}

package/src/fields/Duration/Duration.spec.tsx

@@ -104,14 +104,14 @@ describe("Duration", () => {
 
     it("supplies a default clock affordance", () => {
       const result = renderWithProviders(<Duration label="Clock" name="c" value={3600} />);
-      expect(result.container.querySelector("svg")).toBeTruthy();
+      expect(result.container.querySelector("[data-duration-box] svg")).toBeTruthy();
     });
 
     it("hides the clock when clockIcon is null", () => {
       const result = renderWithProviders(
         <Duration label="No clock" name="c" value={3600} clockIcon={null} />,
       );
-      expect(result.container.querySelector("svg")).toBeNull();
+      expect(result.container.querySelector("[data-duration-box] svg")).toBeNull();
     });
 
     it("normalises a negative value in the hours segment", () => {
@@ -193,7 +193,7 @@ describe("Duration", () => {
       expect(DURATION_PRESET_SIZE).toBe("$2");
       expect(sizeRecipeForToken(DURATION_PRESET_SIZE).height).toBe(26);
       const result = renderWithProviders(<Duration label="P" value={0} />);
-      const chips = result.container.querySelectorAll("[data-duration-preset]");
+      const chips = result.container.querySelectorAll("[data-duration-preset] [data-mp-chip]");
       expect(chips).toHaveLength(6);
       for (const chip of chips) {
         const el = chip as HTMLElement;
@@ -222,8 +222,8 @@ describe("Duration", () => {
     it("clock glyph follows the icon recipe, not a hardcoded 16 (LC-75)", () => {
       const small = renderWithProviders(<Duration label="S" size="$2" value={3600} />);
       const large = renderWithProviders(<Duration label="L" size="$6" value={3600} />);
-      const sSvg = small.container.querySelector("svg");
-      const lSvg = large.container.querySelector("svg");
+      const sSvg = small.container.querySelector("[data-duration-box] svg");
+      const lSvg = large.container.querySelector("[data-duration-box] svg");
       const sSize = Number(sSvg?.getAttribute("width") ?? sSvg?.getAttribute("height"));
       const lSize = Number(lSvg?.getAttribute("width") ?? lSvg?.getAttribute("height"));
       expect(sSize).toBe(sizeRecipeForToken("$2").iconSize);
@@ -244,13 +244,22 @@ describe("Duration", () => {
     it("fires onChange with seconds (LC-14) from a preset", () => {
       const onChange = vi.fn();
       const result = renderWithProviders(<Duration label="P" value={0} onChange={onChange} />);
-      const chip = result.container.querySelector(
-        "[data-duration-preset], [data-duration-presets] button, [data-duration-presets] [role='button']",
-      );
+      const chip = result.container.querySelector("[data-duration-preset='1h'] [role='button']");
       expect(chip).toBeTruthy();
       fireEvent.click(chip as HTMLElement);
-      expect(onChange).toHaveBeenCalled();
-      expect(typeof onChange.mock.calls[0]?.[0]).toBe("number");
+      expect(onChange).toHaveBeenCalledWith(3600);
+    });
+
+    it("presets are MPO chips, the current value's chip selected (FZ-8111)", () => {
+      const result = renderWithProviders(<Duration label="P" value={3600} />);
+      const selected = result.container.querySelectorAll(
+        "[data-duration-preset] [data-mp-chip][data-selected='true']",
+      );
+      expect(selected).toHaveLength(1);
+      expect(
+        selected[0]!.closest("[data-duration-preset]")?.getAttribute("data-duration-preset"),
+      ).toBe("1h");
+      expect(result.container.querySelector("[data-duration-presets] button")).toBeNull();
     });
 
     it("arrow-up on hours commits via onChange", () => {

package/src/fields/Duration/Duration.wheel.native.spec.tsx

@@ -0,0 +1,98 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const picker = vi.hoisted(() => ({ available: true, props: [] as Record<string, unknown>[] }));
+
+vi.mock("react-native", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  return { ...actual, Platform: { ...actual.Platform, OS: "ios" } };
+});
+
+vi.mock("@multiplatform.one/platform", async (importOriginal) => {
+  const actual = (await importOriginal()) as Record<string, unknown>;
+  const real = actual.platform as Record<string, unknown>;
+  return {
+    ...actual,
+    platform: new Proxy(
+      {},
+      {
+        get(_target, prop) {
+          if (prop === "isIos") return true;
+          if (prop === "isAndroid") return false;
+          return real[prop as string];
+        },
+      },
+    ),
+  };
+});
+
+vi.mock("./DurationWheel", async () => await import("./DurationWheel.native"));
+
+vi.mock("../nativeDateTime/dateTimePickerLoader", () => ({
+  loadDateTimePicker: () =>
+    picker.available
+      ? (props: Record<string, unknown>) => {
+          picker.props.push(props);
+          return <div data-testid="os-picker" />;
+        }
+      : null,
+}));
+
+const { Duration } = await import("./index");
+
+const at = (h: number, m: number) => {
+  const d = new Date(2026, 9, 29);
+  d.setHours(h, m, 0, 0);
+  return d;
+};
+
+describe("Duration on a phone (FZ-8111, LC-266)", () => {
+  beforeEach(() => {
+    picker.available = true;
+    picker.props = [];
+  });
+
+  it("shows the value on a trigger, not typed segments", () => {
+    const result = renderWithProviders(<Duration label="Duration" value={3720} />);
+    expect(result.getByTestId("duration-wheel-trigger")).toBeTruthy();
+    expect(result.container.querySelector("[data-duration-value]")?.textContent).toBe("1 h 2 m");
+    expect(result.container.querySelector('input[aria-label="Hours"]')).toBeNull();
+  });
+
+  it("opens the countdown wheel at the value and writes the pick back as seconds", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Duration label="Duration" value={3720} hideDays onChange={onChange} />,
+    );
+    fireEvent.click(result.getByTestId("duration-wheel-trigger"));
+    const props = picker.props.at(-1)!;
+    expect(props.mode).toBe("countdown");
+    expect([(props.value as Date).getHours(), (props.value as Date).getMinutes()]).toEqual([1, 2]);
+    act(() => {
+      (props.onChange as (e: unknown, d: Date) => void)({ type: "set" }, at(2, 30));
+    });
+    fireEvent.click(result.getByRole("button", { name: "Done" }));
+    expect(onChange).toHaveBeenCalledWith(9000);
+  });
+
+  it("keeps the typed segments when the binary has no picker module", () => {
+    picker.available = false;
+    const result = renderWithProviders(<Duration label="Duration" value={3720} />);
+    expect(result.queryByTestId("duration-wheel-trigger")).toBeNull();
+    expect(result.container.querySelector('input[aria-label="Hours"]')).toBeTruthy();
+  });
+
+  it("keeps the typed segments for a field that shows seconds", () => {
+    const result = renderWithProviders(<Duration label="Duration" value={3725} showSeconds />);
+    expect(result.queryByTestId("duration-wheel-trigger")).toBeNull();
+    expect(result.container.querySelector('input[aria-label="Hours"]')).toBeTruthy();
+  });
+
+  it("keeps the MPO chip presets under the wheel trigger", () => {
+    const result = renderWithProviders(<Duration label="Duration" value={0} />);
+    expect(result.container.querySelectorAll("[data-duration-preset] [data-mp-chip]")).toHaveLength(
+      6,
+    );
+  });
+});

package/src/fields/Duration/DurationWheel.native.tsx

@@ -0,0 +1,101 @@
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
+import { ClockIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { Pressable as RNPressable } from "react-native";
+import type { SizeTokens } from "tamagui";
+import { Text } from "tamagui";
+import { Input as InputParts } from "../../InputParts";
+import { formCommonColors } from "../../shared/colorRamps";
+import { t } from "../../shared/t";
+import { loadDateTimePicker } from "../nativeDateTime/dateTimePickerLoader";
+import { OsDateTimeSheet } from "../nativeDateTime/OsDateTimeSheet";
+import {
+  durationToWheelDate,
+  formatDurationParts,
+  secondsToParts,
+  wheelDateToDuration,
+} from "./durationMath";
+import type { DurationWheelFieldProps } from "./durationWheelTypes";
+
+export type { DurationWheelFieldProps };
+
+export function durationWheelAvailable(): boolean {
+  return loadDateTimePicker() != null;
+}
+
+export function DurationWheelField({
+  seconds,
+  onChange,
+  disabled,
+  readOnly,
+  foldDays,
+  clockIcon,
+  hasError,
+  id,
+  hasLabel,
+  required,
+  size,
+  knobProps,
+}: DurationWheelFieldProps) {
+  const [open, setOpen] = useState(false);
+  const sizeToken = String(size || knobProps.sizeToken);
+  const recipe = sizeRecipeForToken(sizeToken);
+  const resolvedClock = clockIcon === undefined ? <ClockIcon size={recipe.iconSize} /> : clockIcon;
+  const shown = formatDurationParts(secondsToParts(seconds, foldDays), foldDays, {
+    d: t("d"),
+    h: t("h"),
+    m: t("m"),
+  });
+  const interactive = !disabled && !readOnly;
+
+  return (
+    <InputParts size={size || knobProps.sizeToken} {...(hasError ? { theme: "error" } : undefined)}>
+      <RNPressable
+        nativeID={id}
+        onPress={interactive ? () => setOpen(true) : undefined}
+        disabled={!interactive}
+        accessibilityRole="button"
+        accessibilityLabel={hasLabel ? undefined : t("Duration")}
+        accessibilityValue={{ text: shown }}
+        accessibilityState={{ disabled: !!disabled }}
+        aria-required={required || undefined}
+        aria-invalid={hasError || undefined}
+        style={{ width: "100%" }}
+        testID="duration-wheel-trigger"
+      >
+        <InputParts.Box
+          disabled={disabled}
+          data-duration-box=""
+          data-duration-wheel=""
+          justifyContent="flex-start"
+          size={sizeToken as SizeTokens}
+          pointerEvents="none"
+        >
+          {resolvedClock != null ? (
+            <InputParts.Icon adornment="leading">{resolvedClock}</InputParts.Icon>
+          ) : null}
+          <Text
+            {...knobProps.body}
+            {...knobProps.controlType}
+            fontSize={recipe.fontSize}
+            color={formCommonColors.text}
+            numberOfLines={1}
+            data-duration-value=""
+          >
+            {shown}
+          </Text>
+        </InputParts.Box>
+      </RNPressable>
+      <OsDateTimeSheet
+        open={open}
+        value={durationToWheelDate(seconds)}
+        mode="countdown"
+        onCancel={() => setOpen(false)}
+        onConfirm={(picked) => {
+          setOpen(false);
+          onChange(wheelDateToDuration(picked, seconds));
+        }}
+      />
+    </InputParts>
+  );
+}

package/src/fields/Duration/DurationWheel.tsx

@@ -0,0 +1,11 @@
+import type { DurationWheelFieldProps } from "./durationWheelTypes";
+
+export type { DurationWheelFieldProps };
+
+export function durationWheelAvailable(): boolean {
+  return false;
+}
+
+export function DurationWheelField(_props: DurationWheelFieldProps) {
+  return null;
+}