@astryxdesign/core 0.5.2-canary.2da7a39 → 0.5.2-canary.2e51213

package/dist/DateTimeInput/DateTimeInput.js

@@ -4,11 +4,14 @@
 
 /**
  * @file DateTimeInput.tsx
- * @input Uses React, Field, Calendar, usePopover, useAnnounce, time parsing utilities, TouchDateTimeField, StyleX intrinsic flex layout
- * @output Exports DateTimeInput component, DateTimeInputProps
+ * @input Uses React, Field, Calendar, NativeDateSegment, NativeTimeSegment, TouchDateTimeField, usePopover, useAnnounce, time parsing utilities, StyleX intrinsic flex layout
+ * @output Exports DateTimeInput component, DateTimeInputProps, and native picker type
  * @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/NativeDateSegment.tsx (native date surface)
+ * - /packages/core/src/DateTimeInput/NativeTimeSegment.tsx (native time surface)
+ * - /packages/core/src/DateTimeInput/NativePickerSegments.test.tsx (native surface tests)
  * - /packages/core/src/DateTimeInput/DateTimeInput.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/DateTimeInput/DateTimeInput.test.tsx (desktop tests for new/changed behavior)
  * - /packages/core/src/DateTimeInput/DateTimeInputTouch.test.tsx (touch-surface tests)
@@ -40,6 +43,8 @@ import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { useLocale, useTranslator } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { NativeDateSegment } from "./NativeDateSegment.js";
+import { NativeTimeSegment } from "./NativeTimeSegment.js";
 import { TouchDateTimeField } from "./TouchDateTimeField.js";
 
 /** Supported minute increments for arrow-key stepping of the time field. */
@@ -48,7 +53,7 @@ import { TouchDateTimeField } from "./TouchDateTimeField.js";
  * Supported minute cadences for the preset-time dropdown. Every value divides
  * an hour evenly, so each option lands on a round clock time.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, 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;
@@ -59,6 +64,10 @@ const styles = {
     kOIVth: "x1txdalj",
     $$css: true
   },
+  nativeRow: {
+    k7Eaqz: "xfb3i0g",
+    $$css: true
+  },
   iconButton: {
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
@@ -134,6 +143,7 @@ const timeOptionSizeStyles = {
     $$css: true
   }
 };
+const TOUCH_POINTER_QUERY = '(pointer: coarse)';
 const sizeStyles = {
   sm: {
     kZKoxP: "x6k0iem",
@@ -225,6 +235,7 @@ function PointerDateTimeField({
   labelTooltip,
   numberOfMonths = 1,
   weekStartsOn,
+  nativePicker = 'touch',
   width,
   xstyle,
   className,
@@ -234,6 +245,12 @@ function PointerDateTimeField({
 }) {
   const t = useTranslator();
   const locale = useLocale();
+  const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
+  const usesNativePicker = nativePicker === 'always' || nativePicker === 'touch' && isTouch;
+  // iOS's native time picker has no seconds wheel, treats step as validation
+  // rather than picker cadence, and cannot express our preset-time list. Keep
+  // the Astryx time field for those explicit contracts instead of losing them.
+  const usesNativeTimePicker = usesNativePicker && !hasSeconds && timeIncrement === 1 && timeOptionInterval === undefined;
   const isEffectivelyRequired = useResolvedRequired({
     isRequired,
     isOptional
@@ -250,14 +267,20 @@ function PointerDateTimeField({
   const descriptionID = useId();
   const statusMessageID = useId();
   const dateInputRef = useRef(null);
+  const mergedDateInputRef = useMergedRefs(ref, dateInputRef);
   const timeInputRef = useRef(null);
   const timeContainerRef = useRef(null);
   const calendarRef = useRef(null);
   const lastFiredDateRef = useRef(undefined);
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
-  const isBusy = isLoading || optimisticValue !== value;
-  const isEffectivelyDisabled = isDisabled || isBusy;
+  const isPendingChange = optimisticValue !== value;
+  const isBusy = isLoading || isPendingChange;
+  // A native wheel emits several edits while it remains open. Disabling the
+  // control after the first optimistic edit detaches the iOS picker, so pending
+  // changeAction work stays interactive just like TouchDateTimeField. Explicit
+  // loading still disables every surface.
+  const isEffectivelyDisabled = isDisabled || isLoading || !usesNativePicker && isPendingChange;
 
   // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
   // tooltip listeners attach to the outer row container (which already exists)
@@ -336,6 +359,17 @@ function PointerDateTimeField({
   // --- Time input state ---
   const [timePendingInput, setTimePendingInput] = useState(null);
   const [isTimeFocused, setIsTimeFocused] = useState(false);
+  // Native date and time are separate OS pickers. Hold a time chosen before the
+  // date exists, then combine it when the date picker commits.
+  const [nativeTimeDraft, setNativeTimeDraft] = useState(undefined);
+  const previousNativeValueRef = useRef(optimisticValue);
+  if (optimisticValue !== previousNativeValueRef.current) {
+    previousNativeValueRef.current = optimisticValue;
+    if (nativeTimeDraft !== undefined) {
+      setNativeTimeDraft(undefined);
+    }
+  }
+  const nativeTimeValue = nativeTimeDraft ?? valueParts.time;
   const formatDisplayTime = hourFormat === '12h' ? formatDisplayTime12h : formatDisplayTime24h;
   const timeDisplayValue = useMemo(() => {
     if (timePendingInput !== null) {
@@ -371,9 +405,9 @@ function PointerDateTimeField({
   // Opt-in: without timeOptionInterval the time field keeps exactly the
   // semantics it shipped with — a plain text input, no combobox role, no
   // second listbox in the accessibility tree.
-  const hasTimeOptions = timeOptionInterval !== undefined;
+  const hasTimeOptions = !usesNativeTimePicker && timeOptionInterval !== undefined;
   const timeOptions = useMemo(() => {
-    if (timeOptionInterval === undefined) {
+    if (!hasTimeOptions || timeOptionInterval === undefined) {
       return [];
     }
     const options = [];
@@ -394,11 +428,11 @@ function PointerDateTimeField({
       });
     }
     return options;
-  }, [timeOptionInterval, hasSeconds, timeMin, timeMax, formatDisplayTime]);
+  }, [hasTimeOptions, timeOptionInterval, hasSeconds, timeMin, timeMax, formatDisplayTime]);
 
   // --- Unified change handler ---
   const fireChange = useCallback(newValue => {
-    if (isBusy) {
+    if (isEffectivelyDisabled) {
       return;
     }
     onChange(newValue);
@@ -408,7 +442,7 @@ function PointerDateTimeField({
         await changeAction(newValue);
       });
     }
-  }, [isBusy, onChange, changeAction, startTransition, setOptimisticValue]);
+  }, [isEffectivelyDisabled, onChange, changeAction, startTransition, setOptimisticValue]);
 
   // --- Popover ---
   const popover = usePopover({
@@ -446,7 +480,7 @@ function PointerDateTimeField({
 
   // --- Date handlers ---
   const handleDateChange = useCallback((newDate, source) => {
-    const currentTime = valueParts.time ?? getDefaultTime(hasSeconds);
+    const currentTime = valueParts.time ?? nativeTimeDraft ?? getDefaultTime(hasSeconds);
     let effectiveTime = currentTime;
     if (minParts.date && newDate === minParts.date && minParts.time) {
       if (!isTimeInRange(effectiveTime, minParts.time, undefined)) {
@@ -466,7 +500,34 @@ function PointerDateTimeField({
       setDatePendingInput(null);
       popover.hide();
     }
-  }, [valueParts.time, hasSeconds, minParts, maxParts, fireChange, popover]);
+  }, [valueParts.time, nativeTimeDraft, hasSeconds, minParts, maxParts, fireChange, popover]);
+  const handleNativeDateChange = useCallback(newDate => {
+    if (newDate === undefined) {
+      fireChange(undefined);
+      return;
+    }
+    handleDateChange(newDate, 'input');
+  }, [fireChange, handleDateChange]);
+  const handleNativeTimeChange = useCallback(newTime => {
+    if (newTime === undefined) {
+      setNativeTimeDraft(undefined);
+      if (optimisticValue !== undefined) {
+        fireChange(undefined);
+      }
+      return;
+    }
+    if (valueParts.date) {
+      const combined = combineDateTime(valueParts.date, newTime);
+      if (combined) {
+        fireChange(combined);
+      }
+      return;
+    }
+    // A datetime cannot be emitted until its date exists, but the OS time
+    // picker is independently reachable. Preserve this draft for the date
+    // commit instead of making the user's first choice disappear.
+    setNativeTimeDraft(newTime);
+  }, [fireChange, optimisticValue, valueParts.date]);
   const handleDateInputChange = useCallback(e => {
     // With a disabledMessage the input drops `disabled` for focusability, so
     // guard value mutation explicitly (readOnly also blocks typing).
@@ -875,9 +936,12 @@ function PointerDateTimeField({
 
   // --- Clear ---
   const handleClear = useCallback(() => {
+    setNativeTimeDraft(undefined);
     fireChange(undefined);
-    dateInputRef.current?.focus();
-  }, [fireChange]);
+    if (!usesNativePicker) {
+      dateInputRef.current?.focus();
+    }
+  }, [fireChange, usesNativePicker]);
 
   // Focus time input when clicking wrapper padding/icon
   const {
@@ -912,81 +976,98 @@ function PointerDateTimeField({
         size,
         status: status?.type ?? null,
         disabled: isDisabled ? 'disabled' : null
-      }), stylex.props(styles.row, xstyle), className, style),
+      }), stylex.props(styles.row, usesNativePicker && styles.nativeRow, xstyle), className, style),
       children: [/*#__PURE__*/_jsxs("div", {
-        ref: popover.triggerRef,
+        ref: usesNativePicker ? undefined : popover.triggerRef,
         ...mergeProps(themeProps('date-time-input-date-segment', {
           size,
           status: status?.type ?? null
         }), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.dateWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type])),
-        children: [/*#__PURE__*/_jsx("button", {
-          type: "button",
-          onClick: handleCalendarToggle,
-          disabled: isEffectivelyDisabled,
-          "aria-label": popover.isOpen ? t('@astryx.dateInput.toggleCalendarClose') : t('@astryx.dateInput.openCalendar'),
-          ...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton, isEffectivelyDisabled && styles.iconButtonDisabled),
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: "calendar",
-            size: "sm",
-            color: "secondary"
-            // Stable theme target on the calendar toggle glyph, so a theme
-            // can restyle just this icon (color, size, hover) — and each
-            // open/closed state — via `defineTheme`, mirroring
-            // `date-input-toggle-icon`. Same-element rules in
-            // @layer astryx-theme win over the icon's own base color/size,
-            // which a segment-level target could not reach.
-            ,
-            ...themeProps('date-time-input-toggle-icon', {
-              state: popover.isOpen ? 'expanded' : 'collapsed'
-            })
-          })
-        }), /*#__PURE__*/_jsx("input", {
-          ref: useMergedRefs(ref, dateInputRef),
+        children: [usesNativePicker ? /*#__PURE__*/_jsx(NativeDateSegment, {
           id: dateInputId,
-          type: "text",
-          role: "combobox",
-          value: dateDisplayValue,
-          onChange: handleDateInputChange,
-          onBlur: handleDateBlur,
-          onClick: handleDateInputClick,
-          onKeyDown: handleDateKeyDown,
-          placeholder: placeholder
-          // With a disabledMessage the input keeps focusability via
-          // aria-disabled so the reason is focus-discoverable; typing is
-          // blocked with readOnly and the mutation guards, and calendar
-          // activation is blocked by the isEffectivelyDisabled guards.
-          ,
-          disabled: isEffectivelyDisabled && !showsDisabledMessage,
-          "aria-disabled": showsDisabledMessage ? 'true' : undefined,
-          readOnly: showsDisabledMessage || undefined,
-          "aria-describedby": ariaDescribedBy,
-          "aria-required": isEffectivelyRequired ? 'true' : undefined,
-          "aria-invalid": status?.type === 'error' || !isDateInputValid ? 'true' : undefined,
-          "aria-busy": isBusy || undefined,
-          "aria-expanded": popover.isOpen,
-          "aria-haspopup": "dialog",
-          "aria-controls": popover.isOpen ? popover.id : undefined,
-          "aria-autocomplete": "none",
-          autoComplete: "off",
-          ...{
-            0: {
-              className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
-            },
-            2: {
-              className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 xt0e3qv"
-            },
-            1: {
-              className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xv1l7n4"
-            },
-            3: {
-              className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xt0e3qv xv1l7n4"
-            }
-          }[!!isEffectivelyDisabled << 1 | !!!isDateInputValid << 0]
-        }), /*#__PURE__*/_jsx(VisuallyHidden, {
-          as: "div",
-          role: "alert",
-          "aria-live": "assertive",
-          children: !isDateInputValid ? t('@astryx.dateInput.invalidDate') : ''
+          inputRef: mergedDateInputRef,
+          value: valueParts.date,
+          onChange: handleNativeDateChange,
+          placeholder: placeholder,
+          min: calendarMin,
+          max: calendarMax,
+          isDateDisabled: isDateDisabled,
+          isEffectivelyDisabled: isEffectivelyDisabled,
+          hasDisabledMessage: showsDisabledMessage,
+          isEffectivelyRequired: isEffectivelyRequired,
+          isBusy: isBusy,
+          statusType: status?.type,
+          ariaDescribedBy: ariaDescribedBy
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("button", {
+            type: "button",
+            onClick: handleCalendarToggle,
+            disabled: isEffectivelyDisabled,
+            "aria-label": popover.isOpen ? t('@astryx.dateInput.toggleCalendarClose') : t('@astryx.dateInput.openCalendar'),
+            ...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton, isEffectivelyDisabled && styles.iconButtonDisabled),
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "calendar",
+              size: "sm",
+              color: "secondary"
+              // Stable theme target on the calendar toggle glyph, so a theme
+              // can restyle just this icon (color, size, hover) — and each
+              // open/closed state — via `defineTheme`, mirroring
+              // `date-input-toggle-icon`. Same-element rules in
+              // @layer astryx-theme win over the icon's own base color/size,
+              // which a segment-level target could not reach.
+              ,
+              ...themeProps('date-time-input-toggle-icon', {
+                state: popover.isOpen ? 'expanded' : 'collapsed'
+              })
+            })
+          }), /*#__PURE__*/_jsx("input", {
+            ref: mergedDateInputRef,
+            id: dateInputId,
+            type: "text",
+            role: "combobox",
+            value: dateDisplayValue,
+            onChange: handleDateInputChange,
+            onBlur: handleDateBlur,
+            onClick: handleDateInputClick,
+            onKeyDown: handleDateKeyDown,
+            placeholder: placeholder
+            // With a disabledMessage the input keeps focusability via
+            // aria-disabled so the reason is focus-discoverable; typing is
+            // blocked with readOnly and the mutation guards, and calendar
+            // activation is blocked by the isEffectivelyDisabled guards.
+            ,
+            disabled: isEffectivelyDisabled && !showsDisabledMessage,
+            "aria-disabled": showsDisabledMessage ? 'true' : undefined,
+            readOnly: showsDisabledMessage || undefined,
+            "aria-describedby": ariaDescribedBy,
+            "aria-required": isEffectivelyRequired ? 'true' : undefined,
+            "aria-invalid": status?.type === 'error' || !isDateInputValid ? 'true' : undefined,
+            "aria-busy": isBusy || undefined,
+            "aria-expanded": popover.isOpen,
+            "aria-haspopup": "dialog",
+            "aria-controls": popover.isOpen ? popover.id : undefined,
+            "aria-autocomplete": "none",
+            autoComplete: "off",
+            ...{
+              0: {
+                className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
+              },
+              2: {
+                className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 xt0e3qv"
+              },
+              1: {
+                className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xv1l7n4"
+              },
+              3: {
+                className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xt0e3qv xv1l7n4"
+              }
+            }[!!isEffectivelyDisabled << 1 | !!!isDateInputValid << 0]
+          }), /*#__PURE__*/_jsx(VisuallyHidden, {
+            as: "div",
+            role: "alert",
+            "aria-live": "assertive",
+            children: !isDateInputValid ? t('@astryx.dateInput.invalidDate') : ''
+          })]
         }), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
           label: t('@astryx.dateInput.clear', {
             label
@@ -995,10 +1076,10 @@ function PointerDateTimeField({
         }), isBusy && /*#__PURE__*/_jsx(Spinner, {
           size: "sm"
         }), statusIcon]
-      }), /*#__PURE__*/_jsxs("div", {
+      }), /*#__PURE__*/_jsx("div", {
         ref: timeContainerRef,
-        onClick: handleTimeWrapperClick,
-        onMouseUp: handleTimeWrapperMouseUp
+        onClick: usesNativeTimePicker ? undefined : handleTimeWrapperClick,
+        onMouseUp: usesNativeTimePicker ? undefined : handleTimeWrapperMouseUp
         // On the wrapper, not just the input: clicking the clock icon or the
         // padding is routed to the input as a synthetic click, which would
         // otherwise open the list mid-gesture and let light dismiss eat it.
@@ -1008,75 +1089,97 @@ function PointerDateTimeField({
           size,
           status: status?.type ?? null
         }), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.timeWrapper, isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type])),
-        children: [/*#__PURE__*/_jsx("div", {
-          ...{
-            className: "x78zum5 x6s0dn4 xl56j7k x2lah0s"
-          },
-          children: /*#__PURE__*/_jsx(Icon, {
-            icon: "clock",
-            size: "sm",
-            color: "secondary"
-            // Stable theme target on the leading clock glyph, so a theme can
-            // restyle just this icon (color, size) via `defineTheme`. The
-            // time segment has no toggle button — the clock is a static
-            // leading affordance — so this carries no interactive state.
-            ,
-            ...themeProps('date-time-input-clock-icon')
-          })
-        }), /*#__PURE__*/_jsx("input", {
-          ref: timeInputRef,
+        children: usesNativeTimePicker ? /*#__PURE__*/_jsx(NativeTimeSegment, {
           id: timeInputId,
-          type: "text",
-          value: timeDisplayValue,
-          onChange: handleTimeInputChange,
-          onFocus: handleTimeFocus,
-          onBlur: handleTimeBlur,
-          onKeyDown: handleTimeKeyDown,
-          onClick: hasTimeOptions ? showTimeOptions : undefined,
-          onPointerDown: hasTimeOptions ? markTimePointerActive : undefined,
-          placeholder: resolvedTimePlaceholder
-          // Combobox semantics appear only with the dropdown opted in, so a
-          // field without it keeps a single combobox on the date half.
-          ,
-          role: hasTimeOptions ? 'combobox' : undefined,
-          "aria-expanded": hasTimeOptions ? timePopover.isOpen : undefined,
-          "aria-controls": hasTimeOptions && timePopover.isOpen ? timeListboxId : undefined,
-          "aria-autocomplete": hasTimeOptions ? 'list' : undefined,
-          "aria-activedescendant": hasTimeOptions && timePopover.isOpen && activeTimeIndex >= 0 && activeTimeIndex < timeOptions.length ? timeOptionId(activeTimeIndex) : undefined
-          // With a disabledMessage the input keeps focusability via
-          // aria-disabled so the reason is focus-discoverable; typing is
-          // blocked with readOnly and the mutation guards.
-          ,
-          disabled: isEffectivelyDisabled && !showsDisabledMessage,
-          "aria-disabled": showsDisabledMessage ? 'true' : undefined,
-          readOnly: showsDisabledMessage || undefined,
-          "aria-label": resolvedTimeLabel,
-          "aria-describedby": ariaDescribedBy,
-          "aria-required": isEffectivelyRequired ? 'true' : undefined,
-          "aria-invalid": status?.type === 'error' || !isTimeInputValid ? 'true' : undefined,
-          "aria-busy": isBusy || undefined,
-          ...{
-            0: {
-              className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
-            },
-            2: {
-              className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 xt0e3qv"
-            },
-            1: {
-              className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xv1l7n4"
+          inputRef: timeInputRef,
+          value: nativeTimeValue,
+          onChange: handleNativeTimeChange,
+          placeholder: timePlaceholder,
+          inputLabel: resolvedTimeLabel,
+          openPickerLabel: t('@astryx.dateTimeInput.openTimePicker', {
+            label: resolvedTimeLabel
+          }),
+          iconThemeProps: themeProps('date-time-input-clock-icon'),
+          min: timeMin,
+          max: timeMax,
+          hourFormat: hourFormat,
+          isEffectivelyDisabled: isEffectivelyDisabled,
+          hasDisabledMessage: showsDisabledMessage,
+          isEffectivelyRequired: isEffectivelyRequired,
+          isBusy: isBusy,
+          statusType: status?.type,
+          ariaDescribedBy: ariaDescribedBy
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("div", {
+            ...{
+              className: "x78zum5 x6s0dn4 xl56j7k x2lah0s"
             },
-            3: {
-              className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xt0e3qv xv1l7n4"
-            }
-          }[!!isEffectivelyDisabled << 1 | !!!isTimeInputValid << 0]
-        }), /*#__PURE__*/_jsx(VisuallyHidden, {
-          as: "div",
-          role: "alert",
-          "aria-live": "assertive",
-          children: !isTimeInputValid ? t('@astryx.timeInput.invalidTime') : ''
-        })]
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "clock",
+              size: "sm",
+              color: "secondary"
+              // Stable theme target on the leading clock glyph, so a theme can
+              // restyle just this icon (color, size) via `defineTheme`. The
+              // time segment has no toggle button — the clock is a static
+              // leading affordance — so this carries no interactive state.
+              ,
+              ...themeProps('date-time-input-clock-icon')
+            })
+          }), /*#__PURE__*/_jsx("input", {
+            ref: timeInputRef,
+            id: timeInputId,
+            type: "text",
+            value: timeDisplayValue,
+            onChange: handleTimeInputChange,
+            onFocus: handleTimeFocus,
+            onBlur: handleTimeBlur,
+            onKeyDown: handleTimeKeyDown,
+            onClick: hasTimeOptions ? showTimeOptions : undefined,
+            onPointerDown: hasTimeOptions ? markTimePointerActive : undefined,
+            placeholder: resolvedTimePlaceholder
+            // Combobox semantics appear only with the dropdown opted in, so a
+            // field without it keeps a single combobox on the date half.
+            ,
+            role: hasTimeOptions ? 'combobox' : undefined,
+            "aria-expanded": hasTimeOptions ? timePopover.isOpen : undefined,
+            "aria-controls": hasTimeOptions && timePopover.isOpen ? timeListboxId : undefined,
+            "aria-autocomplete": hasTimeOptions ? 'list' : undefined,
+            "aria-activedescendant": hasTimeOptions && timePopover.isOpen && activeTimeIndex >= 0 && activeTimeIndex < timeOptions.length ? timeOptionId(activeTimeIndex) : undefined
+            // With a disabledMessage the input keeps focusability via
+            // aria-disabled so the reason is focus-discoverable; typing is
+            // blocked with readOnly and the mutation guards.
+            ,
+            disabled: isEffectivelyDisabled && !showsDisabledMessage,
+            "aria-disabled": showsDisabledMessage ? 'true' : undefined,
+            readOnly: showsDisabledMessage || undefined,
+            "aria-label": resolvedTimeLabel,
+            "aria-describedby": ariaDescribedBy,
+            "aria-required": isEffectivelyRequired ? 'true' : undefined,
+            "aria-invalid": status?.type === 'error' || !isTimeInputValid ? 'true' : undefined,
+            "aria-busy": isBusy || undefined,
+            ...{
+              0: {
+                className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
+              },
+              2: {
+                className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 xt0e3qv"
+              },
+              1: {
+                className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xv1l7n4"
+              },
+              3: {
+                className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xt0e3qv xv1l7n4"
+              }
+            }[!!isEffectivelyDisabled << 1 | !!!isTimeInputValid << 0]
+          }), /*#__PURE__*/_jsx(VisuallyHidden, {
+            as: "div",
+            role: "alert",
+            "aria-live": "assertive",
+            children: !isTimeInputValid ? t('@astryx.timeInput.invalidTime') : ''
+          })]
+        })
       })]
-    }), popover.render(/*#__PURE__*/_jsx(Calendar, {
+    }), !usesNativePicker && popover.render(/*#__PURE__*/_jsx(Calendar, {
       handleRef: calendarRef,
       mode: "single",
       value: valueParts.date,
@@ -1126,20 +1229,24 @@ function PointerDateTimeField({
   });
 }
 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.
+ * A combined date and time picker whose `nativePicker` prop chooses both
+ * surfaces. Native modes use OS-owned date and time controls in Astryx field
+ * chrome. With `nativePicker="never"`, fine pointers keep the typed fields and
+ * popovers while coarse pointers get Astryx's coordinated Date/Time bottom
+ * sheet.
  */
-export function DateTimeInput(props) {
+export function DateTimeInput({
+  nativePicker = 'touch',
+  ...props
+}) {
   const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
-  return isTouch ? /*#__PURE__*/_jsx(TouchDateTimeField, {
-    ...props
-  }) : /*#__PURE__*/_jsx(PointerDateTimeField, {
+  const usesNativePicker = nativePicker === 'always' || nativePicker === 'touch' && isTouch;
+  return usesNativePicker || !isTouch ? /*#__PURE__*/_jsx(PointerDateTimeField, {
+    ...props,
+    nativePicker: nativePicker
+  }) : /*#__PURE__*/_jsx(TouchDateTimeField, {
     ...props
   });
 }

package/dist/DateTimeInput/NativeDateSegment.d.ts

@@ -0,0 +1,24 @@
+import { plainDateFromISO, type ISODateString } from '../utils';
+import type { InputStatusType } from '../Field';
+export type NativeDateSegmentProps = {
+    id: string;
+    inputRef: React.Ref<HTMLInputElement>;
+    value?: ISODateString;
+    onChange: (value: ISODateString | undefined) => void;
+    placeholder: string;
+    min?: ISODateString;
+    max?: ISODateString;
+    isDateDisabled: (date: ReturnType<typeof plainDateFromISO>) => boolean;
+    isEffectivelyDisabled: boolean;
+    hasDisabledMessage: boolean;
+    isEffectivelyRequired: boolean;
+    isBusy: boolean;
+    statusType?: InputStatusType;
+    ariaDescribedBy?: string;
+};
+/** The native date half rendered inside DateTimeInput's date wrapper. */
+export declare function NativeDateSegment({ id, inputRef, value, onChange, placeholder, min, max, isDateDisabled, isEffectivelyDisabled, hasDisabledMessage, isEffectivelyRequired, isBusy, statusType, ariaDescribedBy, }: NativeDateSegmentProps): import("react").JSX.Element;
+export declare namespace NativeDateSegment {
+    var displayName: string;
+}
+//# sourceMappingURL=NativeDateSegment.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NativeDateSegment.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/NativeDateSegment.tsx"],"names":[],"mappings":"AAiCA,OAAO,EAIL,gBAAgB,EAGhB,KAAK,aAAa,EACnB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAK9C,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,cAAc,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,KAAK,OAAO,CAAC;IACvE,qBAAqB,EAAE,OAAO,CAAC;IAC/B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,WAAW,EACX,GAAG,EACH,GAAG,EACH,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EAClB,qBAAqB,EACrB,MAAM,EACN,UAAU,EACV,eAAe,GAChB,EAAE,sBAAsB,+BAiOxB;yBAhPe,iBAAiB"}