@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd

package/dist/DateInput/TouchDateField.js

@@ -0,0 +1,810 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file TouchDateField.tsx
+ * @input Uses React, Field, BottomSheet, Button, Icon, Calendar hooks, MonthScroller, MonthYearWheels
+ * @output Exports TouchDateField — the touch surface behind DateInput
+ * @position Internal component; consumed by DateInput.tsx
+ *
+ * The touch half of `DateInput`, holding `DateInput`'s whole prop
+ * contract so the two are interchangeable. Everything field-shaped —
+ * `Field` wrapper, status treatment, optimistic `changeAction`, the
+ * disabled-reason tooltip, `InputGroup` membership — behaves exactly as it
+ * does on the desktop control; only the picker differs.
+ *
+ * ## The closed field is deliberately the same control
+ *
+ * It is a real `<input>`, not a button: same element, same `role="combobox"`,
+ * same border, same clear button, so `ref` (typed `Ref<HTMLInputElement>` by
+ * `DateInputProps`) is honestly a reference to an input, the label's `for`
+ * names it natively, and the switch between surfaces moves nothing on screen.
+ *
+ * It just cannot be typed into: `readOnly` blocks entry, and `inputMode="none"`
+ * stops the virtual keyboard from opening over the sheet. Text entry is the
+ * one part of the desktop control that has no place here — the keyboard it
+ * summons would cover the picker it is meant to fill in.
+ *
+ * ## Three ideas in the picker
+ *
+ * 1. One month per screen. Every pane is exactly the height of the scrollport
+ *    and snaps to its start, so the picker is a fixed height and there is no
+ *    resting position showing half of two months. See MonthScroller.
+ * 2. Swiping is the month control, and the arrows are the backup. A flick
+ *    reaches a neighbouring month in the direction you already think of it;
+ *    the pair of arrows in the header's trailing corner is there for a
+ *    deliberate single step, and for anyone not swiping at all.
+ * 3. The title is the escape hatch. Tap it and the same box becomes a month
+ *    wheel and a year wheel — a flick each to reach 2019 instead of forty.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/DateInput/DateInput.tsx
+ * - /packages/core/src/DateInput/DateInput.doc.mjs
+ * - /packages/core/src/DateInput/DateInputTouch.test.tsx
+ */
+import { useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { BottomSheet } from "../BottomSheet/index.js";
+import { Button } from "../Button/index.js";
+import { useCalendarConstraints } from "../Calendar/index.js";
+import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
+import { useInputStatusIcon } from "../hooks/index.js";
+import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
+import { Icon } from "../Icon/index.js";
+import { IconButton } from "../IconButton/index.js";
+import { useTranslator } from "../i18n/index.js";
+import { useInputGroup } from "../InputGroup/index.js";
+import { groupStyles } from "../InputGroup/groupStyles.js";
+import { stableClassName } from "../naming.js";
+import { useSize } from "../SizeContext/index.js";
+import { Spinner } from "../Spinner/index.js";
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars, sizeVars, borderVars, fontWeightVars, typeScaleVars, typographyVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
+import { useTooltip } from "../Tooltip/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { focusOutlineStyles, getInputARIA, isImeKeyEvent, mergeProps, mergeRefs, rtlStyles, themeProps, formatSharedDate, plainDateFromISO, plainDateToday, plainDateFormat, DATE_FORMAT_MONTH_YEAR, DATE_FORMAT_WEEKDAY_ONLY } from "../utils/index.js";
+import { normalizeDayOfWeek } from "../utils/dateTypes.js";
+import { MonthScroller } from "./MonthScroller.js";
+import { MonthYearWheels } from "./MonthYearWheels.js";
+import { DEFAULT_MONTH_REACH, clampIndex, fromMonthIndex, monthIndexOf } from "./monthGeometry.js";
+import "./tokens.stylex.js";
+import { dateInputTouchSizes, dateInputTouchGeometry } from "./tokens.stylex.js";
+
+/**
+ * The comfortable minimum tap target on both iOS and Android. Applied as a
+ * FLOOR under the size prop rather than replacing it: `size` still means what
+ * it means, it just cannot produce a control a thumb misses.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TOUCH_TARGET = dateInputTouchSizes.daySize;
+
+/**
+ * The whole surface swap, in one leg.
+ *
+ * It used to be two: the outgoing surface faded out, then the incoming one
+ * faded in, 110ms each. The sequencing existed for one reason — the wheels'
+ * panel was transparent, so overlapping the two put the wheels' translucent
+ * selection band over the calendar grid and tinted a band-shaped strip of it,
+ * which read as "the grey area animates differently from the content".
+ *
+ * Giving the wheels an opaque background removes the reason. Nothing shows
+ * through them, so they can simply fade in ON TOP of a calendar that does not
+ * move at all — no empty middle, no outgoing animation, and one duration
+ * instead of a wait plus a fade.
+ *
+ * `--duration-fast` rather than a literal now that this is a whole duration
+ * and not half of one.
+ */
+const SWAP_DURATION = durationVars['--duration-fast'];
+const sizeStyles = {
+  sm: {
+    kZKoxP: "x6k0iem",
+    k7Eaqz: "xfb3i0g",
+    kAzted: "xygd9yz",
+    $$css: true
+  },
+  md: {
+    kZKoxP: "x1ueg155",
+    k7Eaqz: "xfb3i0g",
+    kAzted: "xygd9yz",
+    $$css: true
+  },
+  lg: {
+    kZKoxP: "xssyfek",
+    k7Eaqz: "xfb3i0g",
+    kAzted: "xygd9yz",
+    $$css: true
+  }
+};
+const styles = {
+  wrapper: {
+    kOIVth: "x1txdalj",
+    $$css: true
+  },
+  iconButton: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kkrTdU: "x1ypdohk x16khyan",
+    kaIpWk: "xh6dtrn",
+    $$css: true
+  },
+  iconButtonDisabled: {
+    kkrTdU: "xt0e3qv",
+    $$css: true
+  },
+  monthArrowUnavailable: {
+    k33iCy: "xlshs6z",
+    $$css: true
+  },
+  monthArrow: {
+    kAzted: "xygd9yz",
+    k7Eaqz: "xngvp7v",
+    $$css: true
+  },
+  monthArrowIcon: {
+    k1xSpc: "x3nfvp2",
+    $$css: true
+  },
+  title: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "xzye2dw",
+    kZKoxP: "x5yr21d",
+    kg3NbH: "xf314gf",
+    keTefX: "x1s1akpx",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kaIpWk: "xh6dtrn",
+    kWkggS: "xjbqb8w xyxi2l3 x150ydqw xoevpu5",
+    kMwMTN: "x1tgivj0",
+    kGuDYH: "x18juvz8",
+    k63SB2: "x2mo6ok",
+    kkrTdU: "x1ypdohk x16khyan",
+    khDVqt: "xuxw1ft",
+    $$css: true
+  },
+  titleChevron: {
+    k1xSpc: "x3nfvp2",
+    k1ekBW: "x11xpdln",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    k6CgDc: "xzg1mie",
+    $$css: true
+  },
+  titleChevronOpen: {
+    k3aq6I: "x19jd1h0",
+    $$css: true
+  }
+};
+
+/**
+ * The touch surface. Takes `DateInput`'s props verbatim; see
+ * {@link DateInput} for when it is chosen over the desktop control.
+ */
+export function TouchDateField({
+  label,
+  isLabelHidden = false,
+  description,
+  isOptional = false,
+  isRequired = false,
+  isDisabled = false,
+  disabledMessage,
+  value,
+  onChange,
+  changeAction,
+  isLoading = false,
+  min,
+  max,
+  dateConstraints,
+  placeholder: placeholderFromProps,
+  size: sizeProp,
+  status,
+  statusVariant = 'attached',
+  labelTooltip,
+  hasClear = false,
+  // Desktop-only: the scroller is a single continuously paged column, so a
+  // second month would be the month already one flick away. Accepted (the
+  // prop types are shared) and ignored.
+  numberOfMonths: _numberOfMonths,
+  weekStartsOn: weekStartsOnProp = 0,
+  format = 'date_long',
+  width,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...rest
+}) {
+  const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({
+    isRequired,
+    isOptional
+  });
+  const placeholder = placeholderFromProps ?? t('@astryx.dateInput.placeholder');
+  const size = useSize(sizeProp, 'md');
+  const weekStartsOn = normalizeDayOfWeek(weekStartsOnProp);
+  const id = useId();
+  const inputLabelID = useId();
+  const descriptionID = useId();
+  const statusMessageID = useId();
+  const inputRef = useRef(null);
+  const inputGroup = useInputGroup();
+  const [, startTransition] = useTransition();
+  const [optimisticValue, setOptimisticValue] = useOptimistic(value);
+  const isBusy = isLoading || optimisticValue !== value;
+  const isEffectivelyDisabled = isDisabled || isBusy;
+
+  // Disabled-reason tooltip, same contract as DateInput: a disabled control
+  // swallows pointer events, so the listeners attach to the wrapper and the
+  // input stays focusable via aria-disabled rather than the disabled
+  // attribute. Only the persistent disabled state surfaces a reason, never
+  // the transient busy one.
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
+  const {
+    isDateDisabled
+  } = useCalendarConstraints({
+    min,
+    max,
+    dateConstraints
+  });
+  const {
+    statusIcon,
+    describedBy: statusTooltipDescribedBy
+  } = useInputStatusIcon({
+    status,
+    statusVariant,
+    isInGroup: !!inputGroup
+  });
+  const {
+    ariaLabelledBy,
+    ariaDescribedBy
+  } = getInputARIA(inputLabelID, [description ? descriptionID : null, statusVariant !== 'tooltip' && status?.message ? statusMessageID : null, statusTooltipDescribedBy, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [isWheelOpen, setIsWheelOpen] = useState(false);
+  const scrollerHandleRef = useRef(null);
+  const today = useMemo(() => plainDateToday(), []);
+  const selectedDate = useMemo(() => optimisticValue != null && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue) ? plainDateFromISO(optimisticValue) : null, [optimisticValue]);
+
+  // The reachable range. Explicit bounds win; otherwise the scroller reaches a
+  // century in each direction from wherever it opened. Anchored once, in a
+  // state initializer: recomputing it as the selection moves would shift every
+  // pane's scroll offset under the user mid-gesture.
+  const [anchorMonthIndex] = useState(() => monthIndexOf(value != null && /^\d{4}-\d{2}-\d{2}$/.test(value) ? plainDateFromISO(value) : plainDateToday()));
+  const minMonthIndex = min != null ? monthIndexOf(plainDateFromISO(min)) : anchorMonthIndex - DEFAULT_MONTH_REACH;
+  const maxMonthIndex = max != null ? monthIndexOf(plainDateFromISO(max)) : anchorMonthIndex + DEFAULT_MONTH_REACH;
+  const [monthIndex, setMonthIndex] = useState(() => clampIndex(anchorMonthIndex, minMonthIndex, maxMonthIndex));
+  const {
+    year,
+    month
+  } = fromMonthIndex(monthIndex);
+
+  /**
+   * Three-letter weekday names — "Sun", not Calendar's "Su".
+   *
+   * The sheet is full width and the columns are ~51px, so there is room for
+   * the form people actually read, and a picker operated by thumb should not
+   * make anyone decode "Tu" against "Th".
+   *
+   * This is CLDR's `abbreviated` width, which `Intl` produces natively — no
+   * truncation, so the 28 non-English locales stay correct rather than being
+   * sliced to three characters. (Verified against the CLDR tables for all 30
+   * locales in the catalog.) Calendar's 2-letter row is CLDR's *short* width,
+   * which `Intl` cannot express, which is exactly why that surface needs a
+   * generated table and this one does not.
+   *
+   * Built here rather than taken from `useCalendarDays`, which supplies the
+   * short form for Calendar's own header. The rotation matches: day 4 of
+   * January 1970 was a Sunday, so offsetting from it by `weekStartsOn` walks
+   * the week in the same order the panes lay out their columns.
+   */
+  const dayNames = useMemo(() => Array.from({
+    length: 7
+  }, (_, offset) => plainDateFormat({
+    year: 1970,
+    month: 1,
+    day: 4 + (weekStartsOn + offset) % 7
+  }, DATE_FORMAT_WEEKDAY_ONLY)), [weekStartsOn]);
+  const monthYearLabel = plainDateFormat({
+    year,
+    month,
+    day: 1
+  }, DATE_FORMAT_MONTH_YEAR);
+
+  // Formats the committed value only. A function format is called with the ISO
+  // value; a named one reuses Timestamp's shared date mapping, so the same
+  // literal renders the same shape here and on the desktop control.
+  const displayValue = optimisticValue != null && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue) ? typeof format === 'function' ? format(optimisticValue) : formatSharedDate(plainDateFromISO(optimisticValue), format) : '';
+  const fireChange = useCallback(newValue => {
+    if (isBusy) {
+      return;
+    }
+    onChange?.(newValue);
+    if (changeAction) {
+      startTransition(async () => {
+        setOptimisticValue(newValue);
+        await changeAction(newValue);
+      });
+    }
+  }, [isBusy, onChange, changeAction, startTransition, setOptimisticValue]);
+  const openSheet = useCallback(() => {
+    if (!isEffectivelyDisabled) {
+      // Always onto the calendar, whatever was showing last time. The wheels
+      // are a detour taken to reach a far month, not a mode to be left in:
+      // reopening into them would answer a question the user has not asked
+      // yet, and hide the dates they came back for behind another tap.
+      setIsWheelOpen(false);
+      setIsSheetOpen(true);
+    }
+  }, [isEffectivelyDisabled]);
+  const handleClear = useCallback(() => {
+    fireChange(undefined);
+    inputRef.current?.focus();
+  }, [fireChange]);
+
+  /**
+   * Put the picker back to how it opens: no date, current month.
+   *
+   * Two things, because clearing a date and then being left staring at the
+   * month of the date you just cleared is a half-finished action — the
+   * calendar should look the way it does before anything is chosen.
+   *
+   * "If possible" is load-bearing: a range can exclude the current month
+   * entirely (a booking window starting next quarter), and there is no
+   * honest place to go in that case. `clampIndex` would silently land on the
+   * nearest edge, which is a different month presented as if it were today's,
+   * so the move is skipped instead and the calendar stays where it is. The
+   * value is still cleared either way — that half never depends on the range.
+   */
+  const handleResetInSheet = useCallback(() => {
+    fireChange(undefined);
+    const currentMonth = monthIndexOf(today);
+    if (currentMonth < minMonthIndex || currentMonth > maxMonthIndex) {
+      return;
+    }
+    if (currentMonth === monthIndex) {
+      return;
+    }
+    setMonthIndex(currentMonth);
+    scrollerHandleRef.current?.scrollToMonth(currentMonth, 'smooth');
+  }, [fireChange, today, monthIndex, minMonthIndex, maxMonthIndex]);
+
+  // Selection commits on the tap and leaves the sheet up, so a mistake can be
+  // corrected in place and a nearby date reconsidered without reopening.
+  // Dismissal is the footer's Done (and the handle, the scrim, Escape) — none
+  // of which commit anything, because this already has.
+  const handleSelect = useCallback(next => {
+    fireChange(next);
+  }, [fireChange]);
+
+  // Whether there is anywhere to step. An arrow with nowhere to go is hidden
+  // rather than disabled: a disabled control still says "this is a thing you
+  // could do", and at the end of a range it is not — the range is the whole
+  // truth, and there is no state the user can reach where it becomes
+  // available. A greyed chevron sitting there permanently reads as broken.
+  const canStepBack = monthIndex > minMonthIndex;
+  const canStepForward = monthIndex < maxMonthIndex;
+
+  // One month either way, clamped to the reachable range. Goes through the
+  // same scrollToMonth the swipe settles on, so the arrows and the gesture
+  // cannot disagree about where a month rests.
+  const stepMonth = useCallback(delta => {
+    const target = clampIndex(monthIndex + delta, minMonthIndex, maxMonthIndex);
+    if (target === monthIndex) {
+      return;
+    }
+    setMonthIndex(target);
+    scrollerHandleRef.current?.scrollToMonth(target, 'smooth');
+  }, [monthIndex, minMonthIndex, maxMonthIndex]);
+
+  // A wheel commit steers the scroller immediately, even though it is behind
+  // the wheels: it keeps its layout box while hidden, so by the time the
+  // wheels close it is already resting on the new month.
+  const handleWheelChange = useCallback(next => {
+    setMonthIndex(next);
+    scrollerHandleRef.current?.scrollToMonth(next, 'auto');
+  }, []);
+
+  /**
+   * The calendar reports the month it has scrolled to — but only while it is
+   * the surface being scrolled.
+   *
+   * While the wheels are up the wheels are the source of truth, and the
+   * calendar is being STEERED by them: a wheel commit calls `scrollToMonth`
+   * above, the calendar scrolls, and it would report that month straight back
+   * here. That closes a cycle — wheel commits, calendar echoes, the echo moves
+   * the wheel's selected row, the wheel is repositioned onto it, and the
+   * resulting scroll reads as another commit.
+   *
+   * Whether that cycle converges depends on how precisely a browser reports
+   * "scrolling stopped", which is not something to rely on. With `scrollend`
+   * (Chrome) it settles at once; on iOS below Safari 26 there is no
+   * `scrollend` and momentum runs on for a second or more after the finger
+   * lifts, so each lap committed the next month along and the value climbed
+   * on its own. Ignoring the echo removes the cycle instead of damping it.
+   */
+  const handleVisibleMonthChange = useCallback(next => {
+    if (isWheelOpen) {
+      return;
+    }
+    setMonthIndex(next);
+  }, [isWheelOpen]);
+
+  /**
+   * Put the calendar back where it belongs when the wheels close.
+   *
+   * The wheels steer it while it is hidden, and a hidden scroller is not a
+   * reliable place to leave a scroll position: `visibility: hidden` keeps the
+   * layout box, but iOS re-snaps the scroller when it becomes visible again,
+   * and it does not necessarily re-snap to the pane we put it on. That fires
+   * a scroll at the exact moment reports start being trusted again — which is
+   * why the month drifted on the way back to the dates.
+   *
+   * Re-asserting is cheap when nothing moved (the scroller is already there,
+   * so nothing scrolls) and exactly right when something did. `scrollToMonth`
+   * marks the target as steered, so this correction does not report itself
+   * back either.
+   */
+  // Read through a ref so this effect depends on the surface change alone.
+  // Listing `monthIndex` would re-run it on every month the user swipes to,
+  // yanking the scroller back mid-gesture.
+  const monthIndexRef = useRef(monthIndex);
+  monthIndexRef.current = monthIndex;
+  useEffect(() => {
+    if (isWheelOpen) {
+      return;
+    }
+    scrollerHandleRef.current?.scrollToMonth(monthIndexRef.current, 'auto');
+  }, [isWheelOpen]);
+
+  // APG combobox keys. The field takes no text, so every printable key is
+  // free — but only the documented openers are wired, so a stray keystroke
+  // does not pop a sheet.
+  const handleInputKeyDown = useCallback(event => {
+    // Same guard core's pointer surface carries. This field is readOnly and
+    // takes no composition of its own, but an IME sitting over it still
+    // sends its committing Enter here first — and opening a date sheet on
+    // the keystroke that finishes a Korean syllable is the same wrong
+    // answer. See utils/ime.ts.
+    if (isImeKeyEvent(event.nativeEvent)) {
+      return;
+    }
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+      event.preventDefault();
+      openSheet();
+    }
+  }, [openSheet]);
+  const surface = /*#__PURE__*/_jsxs("div", {
+    ...{
+      className: "x78zum5 xdt5ytf xh8yej3"
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x78zum5 x6s0dn4 x1qughib x1txdalj xssyfek"
+      },
+      children: [/*#__PURE__*/_jsxs("button", {
+        type: "button",
+        onClick: () => setIsWheelOpen(open => !open),
+        "aria-expanded": isWheelOpen
+        // One string, not a template: the comma and the word order are
+        // the translator's to choose, not English's.
+        ,
+        "aria-label": t('@astryx.dateInput.chooseMonthYear', {
+          monthYear: monthYearLabel
+        })
+        // A `data-` hook rather than a theme target. `themeProps` would
+        // publish `astryx-date-input-touch-title` as a themeable selector,
+        // and this is internal structure of the sheet — the field and its
+        // toggle icon are the documented targets, and nothing has asked to
+        // restyle the header button. Adding a target later is additive;
+        // withdrawing one is not.
+        ,
+        "data-title": "month-year",
+        ...stylex.props(styles.title, focusOutlineStyles.focusVisible),
+        children: [/*#__PURE__*/_jsx("span", {
+          children: monthYearLabel
+        }), /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronDown",
+          size: "sm",
+          color: "secondary"
+          // The transform rides on the Icon itself, not a wrapper span, so
+          // the element a theme can target is the element that moves.
+          ,
+          xstyle: [styles.titleChevron, isWheelOpen && styles.titleChevronOpen]
+        })]
+      }), /*#__PURE__*/_jsxs("span", {
+        "data-arrows": "months"
+        // `inert` as well as the hidden styling: the fade keeps them
+        // `visible` until it finishes, and a control that is on its way out
+        // should not answer a click or a Tab in the meantime.
+        ,
+        inert: isWheelOpen ? true : undefined,
+        ...{
+          0: {
+            className: "x78zum5 x6s0dn4 x1lsbc85 xvc5jky x1jl3cmp xuedmi6 xcj1dhv xzg1mie"
+          },
+          1: {
+            className: "x78zum5 x6s0dn4 x1lsbc85 xvc5jky x1jl3cmp xuedmi6 xcj1dhv xzg1mie xlshs6z xg01cxk x47corl"
+          }
+        }[!!isWheelOpen << 0],
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          variant: "ghost",
+          size: "sm",
+          xstyle: [styles.monthArrow, !canStepBack && styles.monthArrowUnavailable],
+          isDisabled: !canStepBack,
+          onClick: () => stepMonth(-1),
+          label: t('@astryx.calendar.previousMonth'),
+          icon: /*#__PURE__*/_jsx("span", {
+            ...stylex.props(styles.monthArrowIcon, rtlStyles.mirror),
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "chevronLeft",
+              size: "sm",
+              color: "inherit"
+            })
+          })
+        }), /*#__PURE__*/_jsx(IconButton, {
+          variant: "ghost",
+          size: "sm",
+          xstyle: [styles.monthArrow, !canStepForward && styles.monthArrowUnavailable],
+          isDisabled: !canStepForward,
+          onClick: () => stepMonth(1),
+          label: t('@astryx.calendar.nextMonth'),
+          icon: /*#__PURE__*/_jsx("span", {
+            ...stylex.props(styles.monthArrowIcon, rtlStyles.mirror),
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "chevronRight",
+              size: "sm",
+              color: "inherit"
+            })
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      "aria-hidden": "true",
+      ...{
+        0: {
+          className: "xrvj5dj x1mzazjb x6k0iem x6s0dn4 x1jl3cmp xuedmi6 xcj1dhv xzg1mie"
+        },
+        1: {
+          className: "xrvj5dj x1mzazjb x6k0iem x6s0dn4 x1jl3cmp xuedmi6 xcj1dhv xzg1mie xlshs6z xg01cxk"
+        }
+      }[!!isWheelOpen << 0],
+      children: dayNames.map(name => /*#__PURE__*/_jsx("div", {
+        ...{
+          className: "x2b8uid x141an7d x1sodnla xv1l7n4"
+        },
+        children: name
+      }, name))
+    }), /*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "xrvj5dj xm8gem x1n2onr6"
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        "data-panel": "calendar"
+        // `inert` as well as the hidden styling: the panel keeps its layout
+        // box (so the scroller holds its position and the wheels can steer
+        // it), which means without this it would still be tabbable behind
+        // the layer on top.
+        ,
+        inert: isWheelOpen ? true : undefined,
+        ...{
+          0: {
+            className: "x15r89dc xeuugli x74b7sa xuedmi6 xzg1mie"
+          },
+          1: {
+            className: "x15r89dc xeuugli x74b7sa xuedmi6 xzg1mie xlshs6z x47corl"
+          }
+        }[!!isWheelOpen << 0],
+        children: /*#__PURE__*/_jsx(MonthScroller, {
+          handleRef: scrollerHandleRef,
+          minMonthIndex: minMonthIndex,
+          maxMonthIndex: maxMonthIndex,
+          initialMonthIndex: monthIndex,
+          onVisibleMonthChange: handleVisibleMonthChange,
+          selectedDate: selectedDate,
+          today: today,
+          isDateDisabled: isDateDisabled,
+          weekStartsOn: weekStartsOn,
+          onSelect: handleSelect
+        }, `${minMonthIndex}:${maxMonthIndex}`)
+      }), /*#__PURE__*/_jsx("div", {
+        "data-panel": "wheels",
+        inert: isWheelOpen ? undefined : true,
+        ...{
+          0: {
+            className: "x15r89dc xeuugli x10xzikg xc8icb0 x1jl3cmp xuedmi6 xcj1dhv xzg1mie"
+          },
+          1: {
+            className: "x15r89dc xeuugli x10xzikg xc8icb0 x1jl3cmp xuedmi6 xcj1dhv xzg1mie xlshs6z xg01cxk x47corl"
+          }
+        }[!!!isWheelOpen << 0],
+        children: /*#__PURE__*/_jsx(MonthYearWheels, {
+          monthIndex: monthIndex,
+          minMonthIndex: minMonthIndex,
+          maxMonthIndex: maxMonthIndex,
+          onChange: handleWheelChange,
+          monthLabel: t('@astryx.dateInput.monthWheel'),
+          yearLabel: t('@astryx.dateInput.yearWheel'),
+          isActive: isWheelOpen
+        })
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x1xye8es xrvj5dj x1y6fwsi"
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        inert: isWheelOpen ? true : undefined,
+        ...{
+          0: {
+            className: "x15r89dc x78zum5 x1txdalj x74b7sa xuedmi6 xzg1mie"
+          },
+          1: {
+            className: "x15r89dc x78zum5 x1txdalj x74b7sa xuedmi6 xzg1mie xlshs6z x47corl"
+          }
+        }[!!isWheelOpen << 0],
+        children: [/*#__PURE__*/_jsx(Button, {
+          variant: "secondary",
+          size: "md",
+          width: "100%",
+          label: t('@astryx.dateInput.resetPicking'),
+          onClick: handleResetInSheet
+        }), /*#__PURE__*/_jsx(Button, {
+          variant: "primary"
+          // md, not sm: it is the action a thumb reaches for, so it gets
+          // the comfortable size rather than the compact one the header's
+          // ghost buttons use.
+          ,
+          size: "md",
+          width: "100%",
+          label: t('@astryx.dateInput.savePicking'),
+          onClick: () => setIsSheetOpen(false)
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        inert: isWheelOpen ? undefined : true,
+        ...{
+          0: {
+            className: "x15r89dc x78zum5 x1txdalj x10xzikg xc8icb0 x1jl3cmp xuedmi6 xcj1dhv xzg1mie"
+          },
+          1: {
+            className: "x15r89dc x78zum5 x1txdalj x10xzikg xc8icb0 x1jl3cmp xuedmi6 xcj1dhv xzg1mie xlshs6z xg01cxk x47corl"
+          }
+        }[!!!isWheelOpen << 0],
+        children: /*#__PURE__*/_jsx(Button
+        // secondary, not primary: this one does not finish the task, it
+        // finishes a step. Giving both surfaces a primary button would
+        // say the wheels are somewhere you can complete from.
+        , {
+          variant: "secondary",
+          size: "md",
+          width: "100%",
+          label: t('@astryx.dateInput.doneChoosingMonth'),
+          onClick: () => setIsWheelOpen(false)
+        })
+      })]
+    })]
+  });
+  const inputWrapper = /*#__PURE__*/_jsxs("div", {
+    ref: el => {
+      // Anchor + hover/focus listeners for the disabled-message tooltip.
+      // Gated internally by isEnabled, so attaching unconditionally is safe.
+      disabledMessageTooltip.ref(el);
+    },
+    ...rest,
+    ...mergeProps(themeProps('date-input', {
+      size,
+      status: status?.type ?? null,
+      disabled: isDisabled ? 'disabled' : null
+    }), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.wrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),
+    children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
+      id: inputLabelID,
+      children: label
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: openSheet,
+      disabled: isEffectivelyDisabled,
+      "aria-label": t('@astryx.dateInput.openCalendar'),
+      tabIndex: -1,
+      ...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton, isEffectivelyDisabled && styles.iconButtonDisabled),
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "calendar",
+        size: "sm",
+        color: "secondary",
+        ...themeProps('date-input-toggle-icon', {
+          state: isSheetOpen ? 'expanded' : 'collapsed'
+        })
+      })
+    }), /*#__PURE__*/_jsx("input", {
+      ref: mergeRefs(ref, inputRef),
+      id: id,
+      type: "text",
+      role: "combobox",
+      value: displayValue
+      // No typing on this surface: the picker is the input method, and the
+      // virtual keyboard would cover the sheet it is meant to fill in.
+      // readOnly blocks entry; inputMode="none" is what actually keeps the
+      // keyboard down when the field takes focus.
+      ,
+      readOnly: true,
+      inputMode: "none",
+      onChange: () => {},
+      onClick: openSheet,
+      onKeyDown: handleInputKeyDown,
+      placeholder: placeholder,
+      disabled: isEffectivelyDisabled && !showsDisabledMessage,
+      "aria-disabled": showsDisabledMessage ? 'true' : undefined,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-required": isEffectivelyRequired ? 'true' : undefined,
+      "aria-invalid": status?.type === 'error' ? 'true' : undefined,
+      "aria-busy": isBusy || undefined,
+      "aria-expanded": isSheetOpen,
+      "aria-haspopup": "dialog",
+      "aria-autocomplete": "none",
+      autoComplete: "off",
+      ...{
+        0: {
+          className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xbuiw85 x1ypdohk x16khyan x87ps6o xeyghm5"
+        },
+        1: {
+          className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xbuiw85 x87ps6o xeyghm5 xt0e3qv"
+        }
+      }[!!isEffectivelyDisabled << 0]
+    }), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
+      label: t('@astryx.dateInput.clear', {
+        label
+      }),
+      onClick: handleClear,
+      iconClassName: stableClassName('date-input-clear-icon')
+    }), isBusy && /*#__PURE__*/_jsx(Spinner, {
+      size: "sm"
+    }), statusIcon, /*#__PURE__*/_jsx(BottomSheet, {
+      isOpen: isSheetOpen,
+      onOpenChange: setIsSheetOpen,
+      label: t('@astryx.dateInput.dialogLabel')
+      // The picker is a fixed height by construction, so the sheet should be
+      // exactly as tall as it is rather than claiming a viewport budget.
+      ,
+      height: "hug",
+      children: /*#__PURE__*/_jsx("div", {
+        ...{
+          className: "x1pzlopt x1adxfkp x1awphl8"
+        },
+        children: surface
+      })
+    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+  });
+  if (inputGroup) {
+    return inputWrapper;
+  }
+  return /*#__PURE__*/_jsx(Field, {
+    label: label,
+    isLabelHidden: isLabelHidden,
+    description: description,
+    inputID: id,
+    descriptionID: description ? descriptionID : undefined,
+    isOptional: isOptional,
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    status: status ? {
+      type: status.type,
+      message: status.message,
+      messageID: status.message ? statusMessageID : undefined
+    } : undefined,
+    statusVariant: statusVariant,
+    labelTooltip: labelTooltip,
+    width: width,
+    children: inputWrapper
+  });
+}
+TouchDateField.displayName = 'TouchDateField';