@astryxdesign/core 0.5.0 → 0.5.1-canary.70169cd

package/dist/DateInput/TouchDateField.js

@@ -38,6 +38,10 @@
  * 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.
  *
+ * Reset is chrome, so it sits in the header beside the arrows rather than in
+ * the footer: the footer is where the task ends, and an undo of equal weight
+ * beside Save is a mis-tap that throws away the date just chosen.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DateInput/DateInput.tsx
  * - /packages/core/src/DateInput/DateInput.doc.mjs
@@ -53,7 +57,7 @@ import { useInputStatusIcon, useMergedRefs } 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 { useLocale, useTranslator } from "../i18n/index.js";
 import { useInputGroup } from "../InputGroup/index.js";
 import { groupStyles } from "../InputGroup/groupStyles.js";
 import { stableClassName } from "../naming.js";
@@ -64,6 +68,7 @@ import { colorVars, spacingVars, radiusVars, sizeVars, borderVars, fontWeightVar
 import { useTooltip } from "../Tooltip/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { focusOutlineStyles, getInputARIA, isImeKeyEvent, mergeProps, rtlStyles, themeProps, formatSharedDate, plainDateFromISO, plainDateToday, plainDateFormat, DATE_FORMAT_MONTH_YEAR, DATE_FORMAT_WEEKDAY_ONLY } from "../utils/index.js";
+import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { normalizeDayOfWeek } from "../utils/dateTypes.js";
 import { MonthScroller } from "./MonthScroller.js";
 import { MonthYearWheels } from "./MonthYearWheels.js";
@@ -72,9 +77,8 @@ 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.
+ * The comfortable minimum tap target on both iOS and Android, honoured by
+ * every target inside the sheet.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TOUCH_TARGET = dateInputTouchSizes.daySize;
@@ -101,19 +105,16 @@ 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
   }
 };
@@ -152,6 +153,10 @@ const styles = {
     k1xSpc: "x3nfvp2",
     $$css: true
   },
+  resetButton: {
+    kAzted: "xygd9yz",
+    $$css: true
+  },
   title: {
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
@@ -162,16 +167,19 @@ const styles = {
     kMzoRj: "xc342km",
     ksu8eU: "xng3xce",
     kaIpWk: "xh6dtrn",
-    kWkggS: "xjbqb8w xyxi2l3 x150ydqw xoevpu5",
+    kWkggS: "xjbqb8w",
     kMwMTN: "x1tgivj0",
     kGuDYH: "x18juvz8",
     k63SB2: "x2mo6ok",
     kkrTdU: "x1ypdohk x16khyan",
     khDVqt: "xuxw1ft",
+    k7Eaqz: "xeuugli",
+    kVQacm: "xb3r6kr",
     $$css: true
   },
   titleChevron: {
     k1xSpc: "x3nfvp2",
+    kmuXW: "x2lah0s",
     k1ekBW: "x11xpdln",
     kIyJzY: "xuedmi6",
     kAMwcw: "xlr8y92",
@@ -223,6 +231,7 @@ export function TouchDateField({
   ...rest
 }) {
   const t = useTranslator();
+  const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({
     isRequired,
     isOptional
@@ -323,17 +332,17 @@ export function TouchDateField({
     year: 1970,
     month: 1,
     day: 4 + (weekStartsOn + offset) % 7
-  }, DATE_FORMAT_WEEKDAY_ONLY)), [weekStartsOn]);
+  }, DATE_FORMAT_WEEKDAY_ONLY, locale)), [locale, weekStartsOn]);
   const monthYearLabel = plainDateFormat({
     year,
     month,
     day: 1
-  }, DATE_FORMAT_MONTH_YEAR);
+  }, DATE_FORMAT_MONTH_YEAR, locale);
 
   // 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 displayValue = optimisticValue != null && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue) ? typeof format === 'function' ? format(optimisticValue) : formatSharedDate(plainDateFromISO(optimisticValue), format, locale) : '';
   const fireChange = useCallback(newValue => {
     if (isBusy) {
       return;
@@ -545,8 +554,11 @@ export function TouchDateField({
         // withdrawing one is not.
         ,
         "data-title": "month-year",
-        ...stylex.props(styles.title, focusOutlineStyles.focusVisible),
+        ...stylex.props(styles.title, interactionOverlayStyles.backgroundColor, focusOutlineStyles.focusVisible),
         children: [/*#__PURE__*/_jsx("span", {
+          ...{
+            className: "xeuugli xb3r6kr xlyipyv"
+          },
           children: monthYearLabel
         }), /*#__PURE__*/_jsx(Icon, {
           icon: "chevronDown",
@@ -603,6 +615,27 @@ export function TouchDateField({
             })
           })
         })]
+      }), /*#__PURE__*/_jsx("span", {
+        "data-action": "reset",
+        inert: isWheelOpen ? true : undefined,
+        ...{
+          0: {
+            className: "x78zum5 x6s0dn4 x1jl3cmp xuedmi6 xcj1dhv xzg1mie"
+          },
+          1: {
+            className: "x78zum5 x6s0dn4 x1jl3cmp xuedmi6 xcj1dhv xzg1mie xlshs6z xg01cxk x47corl"
+          }
+        }[!!isWheelOpen << 0],
+        children: /*#__PURE__*/_jsx(Button
+        // ghost: a filled button up here would outrank the Save that
+        // finishes the task.
+        , {
+          variant: "ghost",
+          size: "sm",
+          xstyle: styles.resetButton,
+          label: t('@astryx.dateInput.resetPicking'),
+          onClick: handleResetInSheet
+        })
       })]
     }), /*#__PURE__*/_jsx("div", {
       "aria-hidden": "true",
@@ -677,23 +710,17 @@ export function TouchDateField({
       ...{
         className: "x1xye8es xrvj5dj x1y6fwsi"
       },
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
         inert: isWheelOpen ? true : undefined,
         ...{
           0: {
-            className: "x15r89dc x78zum5 x1txdalj x74b7sa xuedmi6 xzg1mie"
+            className: "x15r89dc x78zum5 x74b7sa xuedmi6 xzg1mie"
           },
           1: {
-            className: "x15r89dc x78zum5 x1txdalj x74b7sa xuedmi6 xzg1mie xlshs6z x47corl"
+            className: "x15r89dc x78zum5 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, {
+        children: /*#__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
@@ -703,15 +730,15 @@ export function TouchDateField({
           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"
+            className: "x15r89dc x78zum5 x10xzikg xc8icb0 x1jl3cmp xuedmi6 xcj1dhv xzg1mie"
           },
           1: {
-            className: "x15r89dc x78zum5 x1txdalj x10xzikg xc8icb0 x1jl3cmp xuedmi6 xcj1dhv xzg1mie xlshs6z xg01cxk x47corl"
+            className: "x15r89dc x78zum5 x10xzikg xc8icb0 x1jl3cmp xuedmi6 xcj1dhv xzg1mie xlshs6z xg01cxk x47corl"
           }
         }[!!!isWheelOpen << 0],
         children: /*#__PURE__*/_jsx(Button

package/dist/DateInput/Wheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AA0MA,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BAgOZ;yBAtOe,KAAK"}
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AA2MA,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BAgOZ;yBAtOe,KAAK"}

package/dist/DateInput/Wheel.js

@@ -28,6 +28,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/DateInput/TouchDateField.tsx
+ * - /packages/core/src/DateTimeInput/TouchDateTimeField.tsx
  * - /packages/core/src/DateInput/DateInput.doc.mjs
  * - /packages/core/src/DateInput/DateInputTouch.test.tsx
  */

package/dist/DateInput/index.d.ts

@@ -5,5 +5,5 @@
  * @position Package entry point for DateInput
  */
 export { DateInput } from './DateInput';
-export type { DateInputProps, DateInputSize, DateInputFormat, DateInputStatus, DateInputStatusType, } from './DateInput';
+export type { DateInputProps, DateInputSize, DateInputFormat, DateInputNativePicker, DateInputStatus, DateInputStatusType, } from './DateInput';
 //# sourceMappingURL=index.d.ts.map

package/dist/DateInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateInput/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,YAAY,EACV,cAAc,EACd,aAAa,EACb,eAAe,EACf,eAAe,EACf,mBAAmB,GACpB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateInput/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,YAAY,EACV,cAAc,EACd,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,eAAe,EACf,mBAAmB,GACpB,MAAM,aAAa,CAAC"}

package/dist/DateInput/nativeDateSegments.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Whether the user can type into this engine's `<input type="date">`.
+ *
+ * Firefox exposes neither pseudo-element, so it — and any future engine —
+ * comes back `'unknown'` and the pointer breaks the tie. That is the right
+ * fallback precisely where the probe is blind: the pointer is wrong for
+ * Chromium because Blink's answer is fixed at build time and contradicts it,
+ * and an engine we cannot see is not in that position. It lands Firefox on
+ * the desktop (segmented) and on Android (picker-only) correctly.
+ *
+ * @param isTouchPointer Whether `(pointer: coarse)` matches.
+ * @internal Exported for tests.
+ */
+export declare function hasEditableDateSegments(isTouchPointer: boolean): boolean;
+/**
+ * Drops the cached classification.
+ *
+ * @internal Exists for tests, which render against several engines in one
+ *   document.
+ */
+export declare function resetDateSegmentProbe(): void;
+//# sourceMappingURL=nativeDateSegments.d.ts.map

package/dist/DateInput/nativeDateSegments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nativeDateSegments.d.ts","sourceRoot":"","sources":["../../src/DateInput/nativeDateSegments.ts"],"names":[],"mappings":"AAoGA;;;;;;;;;;;;GAYG;AACH,wBAAgB,uBAAuB,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,CAGxE;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,IAAI,IAAI,CAE5C"}

package/dist/DateInput/nativeDateSegments.js

@@ -0,0 +1,111 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file nativeDateSegments.ts
+ * @input Uses the DOM only
+ * @output Exports hasEditableDateSegments, resetDateSegmentProbe
+ * @position Internal helper for NativeDateField; answers "can the user type
+ *   into this engine's `<input type="date">`?"
+ *
+ * `<input type="date">` is two different controls wearing one tag name: a
+ * single untypable run the OS picker drives (iOS, Android), or a row of
+ * editable `mm`/`dd`/`yyyy` fields (desktop engines). Hiding the first costs
+ * nothing; hiding the second hides what the user is editing.
+ *
+ * Neither obvious test tells them apart. The pointer is wrong on Chrome's
+ * touch simulator, a Windows tablet and a ChromeOS convertible, which report
+ * a coarse pointer while Blink still renders segments. And measured, iOS and
+ * Chromium BOTH accept every `-webkit-datetime-*` selector, so
+ * `CSS.supports('selector(...)')` only proves the parser knows the name. What
+ * separates them is which pseudo is a real box, so this measures that.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/DateInput/NativeDateField.tsx (the caller)
+ * - /packages/core/src/DateInput/NativeDateField.test.tsx (tests)
+ */
+
+/** Marks the throwaway probe element for the probe stylesheet. */
+const PROBE_ATTR = 'data-astryx-date-probe';
+
+/** How much padding the probe adds, in px. Large enough to beat rounding. */
+const PROBE_PADDING = 100;
+let cachedEngine = null;
+
+/** Whether padding this pseudo-element moves the control's box. */
+function pseudoIsRealBox(input, style, pseudo, baseWidth) {
+  style.textContent = `[${PROBE_ATTR}]${pseudo}{padding-inline-start:${PROBE_PADDING}px !important}`;
+  // Reading geometry flushes style and layout, so this already reflects it.
+  return input.getBoundingClientRect().width > baseWidth + PROBE_PADDING / 2;
+}
+
+/**
+ * Classifies the engine's date control. Cached: the answer is a build-time
+ * property of the browser, not of the field or the pointer in use.
+ */
+function probeEngine() {
+  if (cachedEngine !== null) {
+    return cachedEngine;
+  }
+  if (typeof document === 'undefined' || !document.body) {
+    return 'unknown';
+  }
+  const input = document.createElement('input');
+  input.setAttribute('type', 'date');
+  input.setAttribute(PROBE_ATTR, '');
+  // Off-screen, and immune to the page's own `input` rules: the probe reads a
+  // width DELTA, so anything pinning the width would swallow the signal.
+  input.style.cssText = 'position:fixed;top:-9999px;left:0;width:auto;min-width:0;max-width:none;' + 'padding:0;border:0;font-size:16px;box-sizing:content-box;';
+  const style = document.createElement('style');
+  let kind = 'unknown';
+  try {
+    document.body.appendChild(input);
+    document.head.appendChild(style);
+    const base = input.getBoundingClientRect().width;
+    if (pseudoIsRealBox(input, style, '::-webkit-datetime-edit', base)) {
+      // Chromium's editable field row, and WebKit's on macOS/GTK. Probe the
+      // container: the individual field pseudos overflow it rather than
+      // expand it, so they do not move the box even in Chromium.
+      kind = 'segmented';
+    } else if (pseudoIsRealBox(input, style, '::-webkit-date-and-time-value', base)) {
+      // The single, untypable run iOS Safari and Chrome on Android paint.
+      kind = 'picker-only';
+    }
+  } catch {
+    // A hostile CSSOM leaves the answer unknown, resolved by the pointer.
+  } finally {
+    input.remove();
+    style.remove();
+  }
+  cachedEngine = kind;
+  return kind;
+}
+
+/**
+ * Whether the user can type into this engine's `<input type="date">`.
+ *
+ * Firefox exposes neither pseudo-element, so it — and any future engine —
+ * comes back `'unknown'` and the pointer breaks the tie. That is the right
+ * fallback precisely where the probe is blind: the pointer is wrong for
+ * Chromium because Blink's answer is fixed at build time and contradicts it,
+ * and an engine we cannot see is not in that position. It lands Firefox on
+ * the desktop (segmented) and on Android (picker-only) correctly.
+ *
+ * @param isTouchPointer Whether `(pointer: coarse)` matches.
+ * @internal Exported for tests.
+ */
+export function hasEditableDateSegments(isTouchPointer) {
+  const engine = probeEngine();
+  return engine === 'unknown' ? !isTouchPointer : engine === 'segmented';
+}
+
+/**
+ * Drops the cached classification.
+ *
+ * @internal Exists for tests, which render against several engines in one
+ *   document.
+ */
+export function resetDateSegmentProbe() {
+  cachedEngine = null;
+}

package/dist/DateRangeInput/DateRangeInput.d.ts

@@ -111,8 +111,10 @@ export interface DateRangeInputProps extends Omit<BaseProps, 'onChange' | 'defau
      * Minimum number of days the selected range must span, counting both
      * endpoints — `minRangeSpan={2}` forbids a single-day range. Once a start
      * date is picked, days closer than this to it are disabled — except the
-     * start itself, which stays selectable as the active anchor. Defaults to 1
-     * (a same-day start and end is allowed).
+     * start itself, which stays selectable. Clicking the start again commits a
+     * one-day range when the minimum allows it; otherwise it cancels the
+     * in-progress selection so the start can be moved. Defaults to 1 (a
+     * same-day start and end is allowed).
      */
     minRangeSpan?: number;
     /**

package/dist/DateRangeInput/DateRangeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"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"}

package/dist/DateRangeInput/DateRangeInput.js

@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/DateRangeInput.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/DateRangeInput/ (showcase blocks)
  */
-import { use, useId, useCallback, useMemo, useOptimistic, useTransition } from 'react';
+import { useId, useCallback, useMemo, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { plainDateFromISO, plainDateToday, plainDateFormat, plainDateDiffDays, DATE_FORMAT_SHORT, DATE_FORMAT_SHORT_WITH_YEAR } from "../utils/plainDate.js";
 import "../theme/tokens.stylex.js";
@@ -33,7 +33,7 @@ import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { stableClassName } from "../naming.js";
-import { useTranslator, InternationalizationContext } from "../i18n/index.js";
+import { useLocale, useTranslator } from "../i18n/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   iconButton: {
@@ -187,13 +187,11 @@ export function DateRangeInput({
   ...rest
 }) {
   const t = useTranslator();
+  const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({
     isRequired,
     isOptional
   });
-  const {
-    locale
-  } = use(InternationalizationContext);
   const placeholder = placeholderFromProps ?? t('@astryx.dateRangeInput.placeholder');
   const size = useSize(sizeProp, 'md');
   const id = useId();

package/dist/DateTimeInput/DateTimeInput.d.ts

@@ -112,24 +112,27 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
      */
     hourFormat?: DateTimeInputHourFormat;
     /**
-     * Minutes added or subtracted when stepping the time field with the arrow
-     * keys. Constrained to a set of sensible increments.
+     * Minutes added or subtracted when stepping the desktop time field with the
+     * arrow keys. Ignored on the mobile touch sheet, where time is changed with
+     * wheels. Constrained to a set of sensible increments.
      * @default 1
      */
     timeIncrement?: DateTimeInputTimeIncrement;
     /**
-     * Minute cadence for a dropdown of preset times on the time field. Set it to
-     * turn the time field into a combobox listing every valid time at that
+     * Minute cadence for a dropdown of preset times on the desktop time field. Set
+     * it to turn the time field into a combobox listing every valid time at that
      * cadence (`60` gives the 12 AM - 11 PM list, `15` a quarter-hour list).
      *
-     * Omitted, the time field stays a plain text input: typed entry and
+     * Omitted, the desktop time field stays a plain text input: typed entry and
      * arrow-key stepping only, with no combobox semantics added to the
-     * accessibility tree. Typed entry keeps working when the dropdown is on —
-     * the list is a shortcut, not a restriction, so a time between two options
-     * can still be typed.
+     * accessibility tree. Typed entry keeps working when the dropdown is on — the
+     * list is a shortcut, not a restriction, so a time between two options can
+     * still be typed.
      *
-     * Independent of `timeIncrement`, which governs arrow-key stepping. Setting
-     * both to the same value is the usual choice for scheduling flows.
+     * Ignored on the mobile touch sheet, where the wheels expose every
+     * hour/minute/second. Independent of `timeIncrement`, which governs desktop
+     * arrow-key stepping. Setting both to the same value is the usual choice for
+     * scheduling flows on desktop.
      */
     timeOptionInterval?: DateTimeInputTimeOptionInterval;
     /**
@@ -144,6 +147,7 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
     placeholder?: string;
     /**
      * Placeholder text shown in the time portion when no time is selected.
+     * On touch, this appears in the closed time segment before a time is chosen.
      * @default "Select a time"
      */
     timePlaceholder?: string;
@@ -173,7 +177,9 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
      */
     labelTooltip?: string;
     /**
-     * Number of months to display in the calendar.
+     * Number of months to display in the desktop calendar popover. Ignored on the
+     * mobile touch sheet, whose Date panel always shows one swipe-paged month at a
+     * time.
      * @default 1
      */
     numberOfMonths?: 1 | 2;
@@ -186,20 +192,13 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
     weekStartsOn?: DayOfWeek | DayOfWeekName;
 }
 /**
- * A combined date and time picker with side-by-side date input and
- * time input under a single label. The date input opens a calendar
- * popover; the time input supports typed entry and arrow-key adjustment.
- *
- * @example
- * ```
- * <DateTimeInput
- *   label="Meeting time"
- *   value={dateTime}
- *   onChange={setDateTime}
- * />
- * ```
+ * A combined date and time picker that keeps the desktop text-entry surface on
+ * mouse/trackpad devices and uses Astryx's custom bottom-sheet picker on coarse
+ * pointers. Unlike DateInput, this never hands touch picking to the browser/OS:
+ * the mobile flow has to coordinate date and time together, preserve drafted
+ * time before a date exists, and enforce datetime min/max across both panels.
  */
-export declare function DateTimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, hasSeconds, hourFormat, timeIncrement, timeOptionInterval, hasClear, placeholder: placeholderFromProps, timePlaceholder: timePlaceholderFromProps, timeLabel, size: sizeProp, status, labelTooltip, numberOfMonths, weekStartsOn, width, xstyle, className, style, ref, ...rest }: DateTimeInputProps): import("react").JSX.Element;
+export declare function DateTimeInput(props: DateTimeInputProps): import("react").JSX.Element;
 export declare namespace DateTimeInput {
     var displayName: string;
 }

package/dist/DateTimeInput/DateTimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAGL,KAAK,WAAW,EAKjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AA2BrB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAW9C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG;IACvC,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,KAAK,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,4EAA4E;AAC5E,MAAM,MAAM,0BAA0B,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9D;;;GAGG;AACH,MAAM,MAAM,+BAA+B,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEpE,YAAY,EACV,WAAW,IAAI,mBAAmB,EAClC,eAAe,IAAI,uBAAuB,GAC3C,MAAM,UAAU,CAAC;AAyIlB,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAElC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,GAAG,CAAC,EAAE,iBAAiB,CAAC;IAExB;;;OAGG;IACH,GAAG,CAAC,EAAE,iBAAiB,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,uBAAuB,CAAC;IAErC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAE3C;;;;;;;;;;;;;;;OAeG;IACH,kBAAkB,CAAC,EAAE,+BAA+B,CAAC;IAErD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAkuCD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAOtD;yBAPe,aAAa"}

package/dist/DateTimeInput/DateTimeInput.js

@@ -4,18 +4,19 @@
 
 /**
  * @file DateTimeInput.tsx
- * @input Uses React, Field, Calendar, usePopover, useAnnounce, time parsing utilities
+ * @input Uses React, Field, Calendar, usePopover, useAnnounce, time parsing utilities, TouchDateTimeField, StyleX intrinsic flex layout
  * @output Exports DateTimeInput component, DateTimeInputProps
  * @position Core implementation; consumed by index.ts, tested by DateTimeInput.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DateTimeInput/DateTimeInput.doc.mjs (props table, features, implementation notes)
- * - /packages/core/src/DateTimeInput/DateTimeInput.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/DateTimeInput/DateTimeInput.test.tsx (desktop tests for new/changed behavior)
+ * - /packages/core/src/DateTimeInput/DateTimeInputTouch.test.tsx (touch-surface tests)
  * - /packages/core/src/DateTimeInput/index.ts (exports if types change)
  * - /apps/storybook/stories/DateTimeInput.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/DateTimeInput/ (showcase blocks)
  */
-import { use, useId, useState, useCallback, useEffect, useRef, useMemo, useOptimistic, useTransition } from 'react';
+import { useId, useState, useCallback, useEffect, useRef, useMemo, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars, fontWeightVars } from "../theme/tokens.stylex.js";
@@ -32,12 +33,14 @@ import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { parseDateInput, parseISOTime, parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, adjustTime, isImeKeyEvent, mergeProps, isFocusDetached } from "../utils/index.js";
 import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
+import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
-import { useTranslator, InternationalizationContext } from "../i18n/index.js";
+import { useLocale, useTranslator } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { TouchDateTimeField } from "./TouchDateTimeField.js";
 
 /** Supported minute increments for arrow-key stepping of the time field. */
 
@@ -46,9 +49,13 @@ import { useMergedRefs } from "../hooks/useMergedRefs.js";
  * an hour evenly, so each option lands on a round clock time.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Two 196px segments plus the 8px gap fit at exactly 400px. Below that,
+// flex wrapping moves each growing segment onto its own full-width row.
+const HORIZONTAL_SEGMENT_BASIS = 196;
 const styles = {
   row: {
     k1xSpc: "x78zum5",
+    kwnvtZ: "x1a02dak",
     kOIVth: "x1txdalj",
     $$css: true
   },
@@ -71,12 +78,14 @@ const styles = {
   },
   dateWrapper: {
     kUk6DE: "x98rzlu",
-    kCS8Yb: "x1r8uery",
+    kCS8Yb: "xrjwirl",
+    k7Eaqz: "xeuugli",
     $$css: true
   },
   timeWrapper: {
     kUk6DE: "x98rzlu",
-    kCS8Yb: "x1r8uery",
+    kCS8Yb: "xrjwirl",
+    k7Eaqz: "xeuugli",
     $$css: true
   },
   timeOption: {
@@ -188,7 +197,7 @@ function getDefaultTime(hasSeconds) {
  * />
  * ```
  */
-export function DateTimeInput({
+function PointerDateTimeField({
   label,
   isLabelHidden = false,
   description,
@@ -224,13 +233,11 @@ export function DateTimeInput({
   ...rest
 }) {
   const t = useTranslator();
+  const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({
     isRequired,
     isOptional
   });
-  const {
-    locale
-  } = use(InternationalizationContext);
   // Speaks arrow-key stepping results through the persistent live regions:
   // stepping programmatically rewrites a plain textbox's value, which screen
   // readers do not announce on their own (WCAG 4.1.2).
@@ -1118,4 +1125,22 @@ export function DateTimeInput({
     }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
+PointerDateTimeField.displayName = 'PointerDateTimeField';
+const TOUCH_POINTER_QUERY = '(pointer: coarse)';
+
+/**
+ * A combined date and time picker that keeps the desktop text-entry surface on
+ * mouse/trackpad devices and uses Astryx's custom bottom-sheet picker on coarse
+ * pointers. Unlike DateInput, this never hands touch picking to the browser/OS:
+ * the mobile flow has to coordinate date and time together, preserve drafted
+ * time before a date exists, and enforce datetime min/max across both panels.
+ */
+export function DateTimeInput(props) {
+  const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
+  return isTouch ? /*#__PURE__*/_jsx(TouchDateTimeField, {
+    ...props
+  }) : /*#__PURE__*/_jsx(PointerDateTimeField, {
+    ...props
+  });
+}
 DateTimeInput.displayName = 'DateTimeInput';