@multiplatform.one/forms 7.71.0 → 7.72.0

package/src/FloatingPanel/useFloatingPanel.ts

@@ -22,6 +22,7 @@ import {
 import { getTokenValue, type TransitionProp } from "tamagui";
 import { clampDropdownRadius, scrollArrowThreshold } from "../shared/floatingList";
 import { containsAcrossPanels } from "../shared/panelPortal";
+import { type PanelWidth, panelWidthBox, screenBounds } from "./panelWidth";
 
 // React Native defines a `window` global without DOM event methods, so a bare
 // `typeof window` check is not enough — the floating cores mount this hook on
@@ -43,6 +44,24 @@ function roundToDevicePixel(value: number): number {
 export const panelAnimationDuration = motionDurationMs(motionFor("quick").overlay.transition);
 export const panelGrowDuration = panelAnimationDuration;
 export const panelViewportPadding = 10;
+
+/** The room a `"screen"` panel spans for this trigger (see `screenBounds`). */
+function screenRoom(
+  reference: { getBoundingClientRect(): { left: number; right: number } },
+  viewportWidth: number,
+) {
+  const box = reference.getBoundingClientRect();
+  return screenBounds({
+    triggerLeft: box.left,
+    triggerRight: box.right,
+    boundsLeft: panelViewportPadding,
+    boundsRight: viewportWidth - panelViewportPadding,
+    rtl:
+      typeof Element !== "undefined" &&
+      reference instanceof Element &&
+      getComputedStyle(reference).direction === "rtl",
+  });
+}
 /** Gap between trigger and panel: ZERO for the FloatingPanel family (one
  * source, Axiom 5); `OVERLAY_ANCHOR_GAP` still governs FREE overlays. */
 export const panelAnchorOffset = OVERLAY_ATTACH_GAP;
@@ -127,6 +146,14 @@ export interface UseFloatingPanelOptions {
    */
   freeOverlay?: boolean;
   cover?: boolean;
+  /**
+   * How wide the panel opens (LC-112, FZ-8438 r3): `"content"`, `"trigger"`,
+   * `"screen"` or a fixed width. Wins over `widthMode` when set; unset keeps
+   * `widthMode`'s behaviour, so no consumer changes until it asks.
+   */
+  panelWidth?: PanelWidth;
+  /** The panel's first row echoes the trigger. Default: a covering panel. */
+  echo?: boolean;
 }
 
 /** One place that resolves the deprecated boolean onto the three modes, so
@@ -168,9 +195,15 @@ export interface UseFloatingPanelReturn {
   /**
    * Panel corner radius: CONTAINER-CAP on the panel's own padding (DG-RAD-04),
    * lowered to the trigger's measured drawn radius once open when that arc
-   * is smaller, so the panel never rounds past the control it hangs from.
+   * is smaller. A covering panel (LC-112 seamless cover) takes the trigger's
+   * arc whole, past the cap.
    */
   dropdownRadius: string | number;
+  /**
+   * Bottom inset a covering panel adds when its arc runs past the cap, so the
+   * last row's highlight and the scroll arrow clear the rounded corners.
+   */
+  coverCornerInset: number;
   hasBorder: boolean;
   panelTransition: string;
   knobProps: ReturnType<typeof useResolvedKnobs>["knobProps"];
@@ -202,7 +235,7 @@ function paintsACorner(el: HTMLElement): boolean {
  * top-left corner and actually paints one. Nothing painted → null, so the
  * caller falls back to the clamped token rather than to zero.
  */
-function paintedCornerBox(root: HTMLElement): HTMLElement | null {
+export function paintedCornerBox(root: HTMLElement): HTMLElement | null {
   if (paintsACorner(root)) return root;
   const rootRect = root.getBoundingClientRect();
   for (const el of Array.from(root.querySelectorAll<HTMLElement>("*"))) {
@@ -250,6 +283,8 @@ export function useFloatingPanel({
   fitContent,
   freeOverlay = false,
   cover = true,
+  panelWidth,
+  echo = cover && !freeOverlay,
 }: UseFloatingPanelOptions): UseFloatingPanelReturn {
   const widthMode = resolvePanelWidthMode(widthModeProp, fitContent);
   // An overlay floats over the page: it never inherits a painted ancestor.
@@ -268,10 +303,18 @@ export function useFloatingPanel({
     radiusStop && typeof panelPadPx === "number"
       ? resolveRadiusClass("CONTAINER-CAP", radiusStop, { paddingPx: panelPadPx })
       : undefined;
-  const dropdownRadius =
+  const capped =
     radiusCap === undefined
       ? (measuredRadius ?? clampDropdownRadius(knobProps.borderRadius.borderRadius))
       : Math.min(measuredRadius ?? radiusCap, radiusCap);
+  // LC-112 seamless cover (FZ-8438): a panel laid over its trigger IS the
+  // trigger grown open, so all four corners take the trigger's drawn arc.
+  // The container cap only governs panels that sit beside their trigger.
+  const dropdownRadius = cover && !freeOverlay && measuredRadius != null ? measuredRadius : capped;
+  const coverCornerInset =
+    typeof dropdownRadius === "number" && typeof capped === "number" && dropdownRadius > capped
+      ? Math.ceil(dropdownRadius * (1 - Math.SQRT1_2))
+      : 0;
 
   // ── State ─────────────────────────────────────────────────
 
@@ -381,40 +424,69 @@ export function useFloatingPanel({
     // Horizontal collision handling: panels anchored near the right viewport
     // edge (e.g. a ColorPicker in the last table column) shift back into view
     // instead of clipping. Vertical placement is handled by computePlacement.
-    shift({ padding: panelViewportPadding }),
-    ...(widthMode === "fit-content"
-      ? []
-      : [
+    // A screen-wide panel shifts inside the same room its width was cut to,
+    // so a trigger in the page gutter keeps its start edge.
+    shift(({ elements }) => {
+      if (panelWidth !== "screen") return { padding: panelViewportPadding };
+      const viewportWidth = document.documentElement.clientWidth || window.innerWidth || 0;
+      const room = screenRoom(elements.reference, viewportWidth);
+      return { padding: { left: room.left, right: viewportWidth - room.right } };
+    }),
+    ...(panelWidth !== undefined
+      ? [
           size({
-            apply({
-              rects: {
-                reference: { width },
-              },
-              elements,
-            }) {
-              // MPO-38 width modes. `at-least-trigger` writes only min-width,
-              // so content may still grow the panel wider; `match-trigger`
-              // pins all three so the panel is the trigger's width EXACTLY,
-              // for content narrower AND wider than it.
-              //
-              // Any oversize on an anchored listbox breaks the flush
-              // start-alignment (a wider panel near the viewport edge gets
-              // shift()ed off the trigger's x) and lets trigger decorations
-              // peek around the panel as ghosted edges.
-              const style: Record<string, number> =
-                widthMode === "match-trigger"
-                  ? { minWidth: width, width, maxWidth: width }
-                  : { minWidth: width };
-              Object.assign(floatingStyleRef.current, style);
-              elements.floating.style.minWidth = `${width}px`;
-              if (widthMode === "match-trigger") {
-                elements.floating.style.width = `${width}px`;
-                elements.floating.style.maxWidth = `${width}px`;
-              }
+            apply({ rects: { reference }, elements }) {
+              const viewportWidth = document.documentElement.clientWidth || window.innerWidth || 0;
+              const room =
+                panelWidth === "screen"
+                  ? screenRoom(elements.reference, viewportWidth)
+                  : { left: panelViewportPadding, right: viewportWidth - panelViewportPadding };
+              const box = panelWidthBox(panelWidth, {
+                trigger: reference.width,
+                available: room.right - room.left,
+                echo,
+              });
+              Object.assign(floatingStyleRef.current, box);
+              elements.floating.style.minWidth = `${box.minWidth}px`;
+              elements.floating.style.maxWidth = `${box.maxWidth}px`;
+              elements.floating.style.width = box.width === undefined ? "" : `${box.width}px`;
             },
             padding: panelViewportPadding,
           }),
-        ]),
+        ]
+      : widthMode === "fit-content"
+        ? []
+        : [
+            size({
+              apply({
+                rects: {
+                  reference: { width },
+                },
+                elements,
+              }) {
+                // MPO-38 width modes. `at-least-trigger` writes only min-width,
+                // so content may still grow the panel wider; `match-trigger`
+                // pins all three so the panel is the trigger's width EXACTLY,
+                // for content narrower AND wider than it.
+                //
+                // Any oversize on an anchored listbox breaks the flush
+                // start-alignment (a wider panel near the viewport edge gets
+                // shift()ed off the trigger's x) and lets trigger decorations
+                // peek around the panel as ghosted edges.
+                const style: Record<string, number> =
+                  widthMode === "match-trigger"
+                    ? { minWidth: width, width, maxWidth: width }
+                    : { minWidth: width };
+                Object.assign(floatingStyleRef.current, style);
+                elements.floating.style.minWidth = `${width}px`;
+                if (widthMode === "match-trigger") {
+                  elements.floating.style.width = `${width}px`;
+                  elements.floating.style.maxWidth = `${width}px`;
+                }
+              },
+              padding: panelViewportPadding,
+            }),
+          ]),
   ];
 
   const { x, y, strategy, context, refs, update } = useFloating({
@@ -556,6 +628,7 @@ export function useFloatingPanel({
     setReferenceRef,
     setMounted,
     dropdownRadius,
+    coverCornerInset,
     hasBorder,
     panelTransition: panelTransitionFor(knobProps.motion.overlay.transition),
     knobProps,

package/src/InputParts/index.tsx

@@ -28,6 +28,7 @@ import {
   View,
   XGroup,
   createStyledContext,
+  getTokenValue,
   getVariable,
   isWeb,
   styled,
@@ -61,6 +62,7 @@ import { useControlGroupVertical, useControlGrouped } from "../shared/groupConte
 import { nativeAutoFocus } from "../shared/nativeAutoFocus";
 import { pressSlopProps } from "../shared/pressSlopProps";
 import { useIsInTableCell } from "../shared/tableCellContext";
+import { useInPanelEcho, usePanelTriggerRadiusReporter } from "../FloatingPanel/echoContext";
 import { useFieldA11y, useFieldDescribedBy } from "../fieldLayout";
 
 /**
@@ -498,6 +500,29 @@ const InputGroupImpl = InputGroupFrame.styleable<{
     (props as { width?: unknown }).width == null
       ? { minWidth: 0, maxWidth: "100%" as const }
       : undefined;
+  // LC-112 seamless cover (FZ-8438): a covering panel repeats this frame's
+  // arc at its corners, and an echo of this frame draws no chrome of its own.
+  const inPanelEcho = useInPanelEcho();
+  const reportRadius = usePanelTriggerRadiusReporter();
+  const drawnRadiusToken = sizeTableRadius?.borderRadius ?? knobProps.borderRadius.borderRadius;
+  const drawnRadius =
+    typeof drawnRadiusToken === "number"
+      ? drawnRadiusToken
+      : Number(getTokenValue(drawnRadiusToken as never, "radius"));
+  useEffect(() => {
+    if (reportRadius && !inPanelEcho && !grouped && !inTableCell && Number.isFinite(drawnRadius)) {
+      reportRadius(drawnRadius);
+    }
+  }, [reportRadius, inPanelEcho, grouped, inTableCell, drawnRadius]);
+  const echoChrome = inPanelEcho
+    ? {
+        borderColor: "transparent",
+        backgroundColor: "transparent",
+        elevation: undefined,
+        shadowColor: "transparent",
+        shadowOpacity: 0,
+      }
+    : undefined;
 
   // Chromeless rendering inside table cells
   if (inTableCell) {
@@ -615,6 +640,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
                 hoverStyle: { ...disabledState.surfaceKnobProps },
               }
             : undefined)}
+          {...echoChrome}
           overflow={boxOverflow}
         >
           {children}

package/src/Wheel/NativeWheel.native.tsx

@@ -347,7 +347,7 @@ export function NativeWheel<T = string | number>(props: WheelProps<T>) {
         right={0}
         top={padTop}
         height={itemHeight}
-        backgroundColor="$color4"
+        backgroundColor={layout.selectedFill}
         pointerEvents="none"
         style={layout.highlightStyle as never}
         data-testid="wheel-selection"

package/src/Wheel/Wheel.spec.tsx

@@ -209,6 +209,15 @@ describe("Wheel iOS picker contract", () => {
     expect(style.borderBottomWidth === "0px" || style.borderBottomWidth === "").toBe(true);
   });
 
+  it("does not paint the band with the dark elevated surface colour (FZ-8438)", () => {
+    renderWithProviders(
+      <Wheel items={[1, 2, 3, 4, 5]} value={3} onChange={() => {}} visibleItems={5} />,
+    );
+    const band = screen.getByTestId("wheel-selection");
+    const paint = `${band.className} ${band.getAttribute("style") ?? ""}`;
+    expect(paint).not.toMatch(/_bg-color4|--color4/);
+  });
+
   it("seats the selected row in the highlight band", () => {
     renderWithProviders(
       <Wheel

package/src/Wheel/index.tsx

@@ -154,8 +154,15 @@ function WebWheel<T = string | number>(props: WheelProps<T>) {
     onItemCross,
     "aria-label": ariaLabel,
   } = props;
-  const { knobProps, size, itemHeight, snapDurationMs, highlightStyle, highlightClassName } =
-    useWheelLayout(props);
+  const {
+    knobProps,
+    selectedFill,
+    size,
+    itemHeight,
+    snapDurationMs,
+    highlightStyle,
+    highlightClassName,
+  } = useWheelLayout(props);
   const columnWidth = widthProp ?? defaultColumnWidth;
   ensureWheelFocusStyles();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -672,7 +679,9 @@ function WebWheel<T = string | number>(props: WheelProps<T>) {
       {/* iOS 14+ selection fill — LC-71 selected=fill, never hairline borders */}
       <SelectionIndicator
         className={highlightClassName}
-        backgroundColor="$color4"
+        // FZ-8438: the selection tint (FZ-8355). $color4 is the dark elevated
+        // surface itself, so the band vanished on a dark cover panel.
+        backgroundColor={selectedFill}
         top={paddingItems * itemHeight}
         height={itemHeight}
         style={highlightStyle}

package/src/Wheel/wheelShared.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from "react";
 import { motionDurationMs, sizeTokenStep, useResolvedKnobs } from "@multiplatform.one/theme";
-import type { SizeTokens } from "tamagui";
+import type { ColorTokens, SizeTokens } from "tamagui";
 import { getConfig, getTokens } from "tamagui";
 
 export interface WheelItem<T = string | number> {
@@ -198,7 +198,7 @@ export function useWheelLayout<T>({
   size: sizeProp,
   highlightEdges = "all",
 }: Pick<WheelProps<T>, "visibleItems" | "itemHeight" | "size" | "highlightEdges">) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps, state } = useResolvedKnobs();
   const size = sizeProp ?? wheelFontByStep[sizeTokenStep(knobProps.sizeToken)];
   const bodyFont = (knobProps.body as { fontFamily?: unknown }).fontFamily;
   const itemHeight =
@@ -208,6 +208,10 @@ export function useWheelLayout<T>({
   const radiusToken = knobProps.borderRadius.borderRadius as string | number;
   return {
     knobProps,
+    // The band is the selection tint (LC-131, FZ-8355) from the state recipe;
+    // a preset with no accent tint falls back one step above the elevated
+    // dark surface, so the band still shows on a cover panel (FZ-8438).
+    selectedFill: (state.selected.surfaceKnobProps.backgroundColor ?? "$color5") as ColorTokens,
     size,
     itemHeight,
     frameHeight,

package/src/fields/Combobox/index.tsx

@@ -1502,6 +1502,7 @@ function FloatingComboboxCore({
               {...elevatedSurfaceProps}
               borderRadius={panel.dropdownRadius}
               data-testid="combobox-dropdown"
+              paddingBottom={panel.coverCornerInset || undefined}
             >
               {!hideSearch && (
                 <InputParts size={knobProps.sizeToken}>

package/src/fields/DatePicker/DatePicker.stories.tsx

@@ -131,9 +131,9 @@ export const StateContract: Story = {
 };
 
 /**
- * LC-266 (FZ-8114): on a coarse-pointer browser each field opens the
- * browser's own picker; a fine pointer keeps the MPO calendar and wheels. The
- * lines below show the committed value, which is the same on both paths.
+ * LC-112 seamless cover (FZ-8438): on a coarse-pointer browser each field
+ * opens the same MPO panel as on desktop, one surface over the field with
+ * the calendar or the wheels. The lines below show the committed value.
  */
 export const TouchWeb: Story = {
   render: () => {

package/src/fields/DatePicker/DatetimePicker.catalog.tsx

@@ -7,6 +7,7 @@ import { Text, View, useProps, isWeb } from "tamagui";
 
 import { Field, FieldLayout } from "../../fieldLayout";
 import { FloatingPanel } from "../../FloatingPanel";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 import { t } from "../../shared/t";
 import { TimeWheels } from "../../shared/TimeColumn";
 import {
@@ -19,12 +20,6 @@ import type { FormFieldProps } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
 import { Skeleton } from "../../Skeleton";
 import type { FieldComponentProps, Validator } from "../../types";
-import {
-  fromNativeDateValue,
-  toDatetimeLocalValue,
-  TouchWebPickerInput,
-  useCoarsePointer,
-} from "../../shared/touchWebPicker";
 
 import {
   CalendarDays,
@@ -87,6 +82,11 @@ export type DatetimePickerProps<
     onValueChange?: (value: Date | null) => void;
     /** Native only. `false` keeps the catalog overlay; omit for the OS picker. */
     native?: boolean;
+    /**
+     * How wide the open picker is (LC-112, FZ-8438 r3): `"content"`,
+     * `"trigger"`, `"screen"` or a fixed width. Unset: at least the field.
+     */
+    panelWidth?: PanelWidth;
   };
 
 // ---------------------------------------------------------------------------
@@ -273,8 +273,10 @@ function DatetimePickerBody({
               justifyContent="center"
               cursor={tabDisabled ? "default" : "pointer"}
               opacity={tabDisabled ? 0.5 : 1}
-              theme={active ? ("accent" as any) : undefined}
-              backgroundColor={active ? "$background" : "transparent"}
+              // LC-131 / FZ-8355: the chosen tab is the selection tint with a
+              // rounded arc, not an inverted accent slab (FZ-8438 critique).
+              backgroundColor={active ? "$selectedBackground" : "transparent"}
+              borderRadius={knobProps.borderRadius.borderRadius}
               onPress={() => {
                 if (!tabDisabled) setActiveTab(tab);
               }}
@@ -381,12 +383,12 @@ export function DatetimePicker<
     showSeconds = false,
     skeleton,
     id: idProp,
+    panelWidth,
     ..._restProps
   } = useProps(props);
 
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const touchWeb = useCoarsePointer();
 
   const [open, setOpen] = useState(false);
   const [selectedDatetime, setSelectedDatetime] = useState<Date | null>(() =>
@@ -470,40 +472,6 @@ export function DatetimePicker<
     />
   );
 
-  const renderTouchTrigger = (
-    hasError?: boolean,
-    blurHandler?: (...args: any[]) => void,
-    fieldChange?: (value: any) => void,
-  ) => (
-    <DatePickerInputTrigger
-      value={displayValue}
-      placeholder={placeholder}
-      disabled={disabled}
-      onReset={() => handleClearDatetime(fieldChange)}
-      onButtonPress={() => {}}
-      touchInput={
-        <TouchWebPickerInput
-          kind="datetime-local"
-          id={id}
-          value={toDatetimeLocalValue(selectedDatetime, showSeconds)}
-          min={toDatetimeLocalValue(minDate, showSeconds)}
-          max={toDatetimeLocalValue(maxDate, showSeconds)}
-          showSeconds={showSeconds}
-          disabled={disabled}
-          required={required}
-          invalid={hasError}
-          aria-label={label ? undefined : t("Date and time")}
-          onValue={(next) => {
-            const date = fromNativeDateValue(next);
-            if (date) handleDatetimeSelect(date, fieldChange);
-            else handleClearDatetime(fieldChange);
-          }}
-          onBlur={blurHandler}
-        />
-      }
-    />
-  );
-
   const renderPopover = (
     hasError?: boolean,
     blurHandler?: (...args: any[]) => void,
@@ -521,7 +489,6 @@ export function DatetimePicker<
         />
       );
     }
-    if (touchWeb) return renderTouchTrigger(hasError, blurHandler, fieldChange);
     const handleOpenChange = (isOpen: boolean) => {
       // Re-seed the visible month from the current value on every open.
       if (isOpen && selectedDatetimeRef.current) setDisplayDate(selectedDatetimeRef.current);
@@ -544,7 +511,12 @@ export function DatetimePicker<
         disabled={disabled}
         sizing="grow"
         contentPadding="none"
-        widthMode="fit-content"
+        widthMode="at-least-trigger"
+        panelWidth={panelWidth}
+        // LC-112 seamless cover (FZ-8438): touch and narrow web open the same
+        // panel over the field, never the browser's own popover; a field too
+        // low for the panel takes MPO's bottom sheet (LC-105 collision).
+        compactFace={isWeb ? "menu" : undefined}
       >
         {pickerContent(fieldChange)}
       </FloatingPanel>

package/src/fields/DatePicker/DatetimePicker.native.tsx

@@ -2,6 +2,7 @@
  * Native DatetimePicker — iOS calendar then time wheel; Android date then time.
  */
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 import { formatAbsoluteDateTime } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Pressable as RNPressable } from "react-native";
@@ -56,6 +57,8 @@ export type DatetimePickerProps<
     onChange?: (value: Date | null) => void;
     onValueChange?: (value: Date | null) => void;
     native?: boolean;
+    /** How wide the catalog picker opens (`native={false}`), LC-112. */
+    panelWidth?: PanelWidth;
   };
 
 function formatDatetimeDisplay(

package/src/fields/DatePicker/catalog.tsx

@@ -16,12 +16,6 @@ import type { FormFieldProps } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
 import { Skeleton } from "../../Skeleton";
 import type { FieldComponentProps, Validator } from "../../types";
-import {
-  fromNativeDateValue,
-  toDateInputValue,
-  TouchWebPickerInput,
-  useCoarsePointer,
-} from "../../shared/touchWebPicker";
 
 import {
   CalendarDays,
@@ -39,6 +33,7 @@ import {
 } from "./parts";
 
 import type { ViewMode } from "./parts";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 
 export type { ViewMode } from "./parts";
 
@@ -84,6 +79,11 @@ export type DatePickerProps<
     onValueChange?: (value: Date | null) => void;
     /** Native only. `false` keeps the catalog calendar; omit for the OS picker. */
     native?: boolean;
+    /**
+     * How wide the open picker is (LC-112, FZ-8438 r3): `"content"`,
+     * `"trigger"`, `"screen"` or a fixed width. Unset: at least the field.
+     */
+    panelWidth?: PanelWidth;
   };
 
 // ---------------------------------------------------------------------------
@@ -211,13 +211,13 @@ export function DatePicker<
     onBlur,
     skeleton,
     id: idProp,
+    panelWidth,
     ..._restProps
   } = useProps(props);
 
   const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const hasLabel = Boolean(label);
-  const touchWeb = useCoarsePointer();
 
   const [open, setOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState<Date | null>(() =>
@@ -308,38 +308,6 @@ export function DatePicker<
         .filter(Boolean)
         .join(" ") || undefined;
 
-    if (touchWeb) {
-      return (
-        <DatePickerInputTrigger
-          value={formatDateDisplay(selectedDate)}
-          placeholder={placeholder}
-          disabled={disabled}
-          onReset={() => handleClearDate(fieldChange)}
-          onButtonPress={() => {}}
-          touchInput={
-            <TouchWebPickerInput
-              kind="date"
-              id={id}
-              value={toDateInputValue(selectedDate)}
-              min={toDateInputValue(minDate)}
-              max={toDateInputValue(maxDate)}
-              disabled={disabled}
-              required={required}
-              invalid={hasError}
-              aria-label={hasLabel ? undefined : t("Date")}
-              aria-describedby={describedBy}
-              onValue={(next) => {
-                const date = fromNativeDateValue(next);
-                if (date) handleDateSelect(date, fieldChange);
-                else handleClearDate(fieldChange);
-              }}
-              onBlur={blurHandler}
-            />
-          }
-        />
-      );
-    }
-
     const handleOpenChange = (isOpen: boolean) => {
       // Re-seed the visible month from the current value on every open —
       // the value may have changed (externally or by a pick) since mount.
@@ -361,6 +329,7 @@ export function DatePicker<
         // TimePicker already pass it.
         disabled={disabled}
         popoverRef={popoverRef}
+        panelWidth={panelWidth}
         // "Date, Jul 15 2026": VO gets the field name + current value on the
         // native trigger (the web trigger announces via aria on the Area).
         triggerA11y={{

package/src/fields/DatePicker/index.native.tsx

@@ -5,6 +5,7 @@
  * calendar) stay the catalog implementations.
  */
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 import { useCallback, useEffect, useState } from "react";
 import { Pressable as RNPressable } from "react-native";
 import { useProps } from "tamagui";
@@ -58,6 +59,8 @@ export type DatePickerProps<
      * native is the OS picker (iOS calendar / time wheel).
      */
     native?: boolean;
+    /** How wide the catalog picker opens (`native={false}`), LC-112. */
+    panelWidth?: PanelWidth;
   };
 
 export type { ViewMode } from "./parts";