@astryxdesign/core 0.5.0-canary.7b60efa → 0.5.0-canary.c050bc5

package/dist/DateInput/DateInput.d.ts

@@ -31,6 +31,16 @@ export type DateInputSize = keyof typeof sizeStyles;
  * types stay in compile-time lockstep: renaming or removing one of these
  * members from `TimestampFormat` breaks this type at build time.
  */
+/**
+ * When DateInput hands date picking to the browser/OS instead of its own
+ * surfaces.
+ *
+ * - `'touch'`: native on touch devices (coarse pointer), Astryx's calendar
+ *   popover on mouse-driven ones
+ * - `'always'`: native wherever the browser supports `<input type="date">`
+ * - `'never'`: Astryx's own pickers everywhere
+ */
+export type DateInputNativePicker = 'touch' | 'always' | 'never';
 export type DateInputFormat = Extract<TimestampFormat, 'date' | 'date_long' | 'date_weekday' | 'system_date'>;
 export type { InputStatus as DateInputStatus, InputStatusType as DateInputStatusType, } from '../Field';
 import type { BaseProps } from '../BaseProps';
@@ -202,6 +212,39 @@ export interface DateInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
      * ```
      */
     format?: DateInputFormat | ((value: ISODateString) => string);
+    /**
+     * When date picking is handed to the browser/OS instead of Astryx's own
+     * surfaces: the field becomes an `<input type="date">` and the platform
+     * draws the picker — the iOS wheel, the Android calendar dialog — with the
+     * OS's own hit areas, momentum scrolling, locale and accessibility
+     * settings.
+     *
+     * - `'touch'` (default): native on touch devices (coarse pointer), the text
+     *   field and calendar popover on mouse-driven ones
+     * - `'always'`: native wherever the browser supports `<input type="date">`
+     * - `'never'`: Astryx's own pickers everywhere — the touch picker on a
+     *   finger, the calendar popover on a mouse
+     *
+     * `format` and `placeholder` still apply in native mode: DateInput paints
+     * the closed field's text itself, over the control. `numberOfMonths` and
+     * `weekStartsOn` do not — they describe a calendar grid the native picker
+     * does not have — so a field that needs either should pass `'never'`.
+     *
+     * `min` and `max` are forwarded, but note that a native picker may not
+     * *show* them: on iOS they are constraint-validation flags rather than
+     * clamps, so an out-of-range date can be selected and is refused on commit
+     * (announced to assistive technology) rather than being greyed out in the
+     * picker. `dateConstraints` is enforced the same way, on commit, and is
+     * reason enough to prefer `'never'` on a field that uses it.
+     *
+     * @default 'touch'
+     * @example
+     * ```
+     * // Astryx's own touch picker instead of the platform's
+     * <DateInput label="Event date" value={date} onChange={setDate} nativePicker="never" />
+     * ```
+     */
+    nativePicker?: DateInputNativePicker;
 }
 /**
  * A date picker that fits the pointer it is being used with.

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

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

package/dist/DateInput/DateInput.js

@@ -32,6 +32,7 @@ import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { usePopover } from "../Popover/index.js";
+import { NativeDateField } from "./NativeDateField.js";
 import { TouchDateField } from "./TouchDateField.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { getInputARIA, isImeKeyEvent, parseDateInput } from "../utils/index.js";
@@ -87,6 +88,15 @@ const sizeStyles = {
  * types stay in compile-time lockstep: renaming or removing one of these
  * members from `TimestampFormat` breaks this type at build time.
  */
+/**
+ * When DateInput hands date picking to the browser/OS instead of its own
+ * surfaces.
+ *
+ * - `'touch'`: native on touch devices (coarse pointer), Astryx's calendar
+ *   popover on mouse-driven ones
+ * - `'always'`: native wherever the browser supports `<input type="date">`
+ * - `'never'`: Astryx's own pickers everywhere
+ */
 
 // Re-export shared types for convenience
 
@@ -560,6 +570,15 @@ PointerDateField.displayName = 'PointerDateField';
  */
 export function DateInput(props) {
   const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
+  const nativePicker = props.nativePicker ?? 'touch';
+
+  // The platform's picker, where the consumer asked for it — see the
+  // `nativePicker` prop for what that trades away.
+  if (nativePicker === 'always' || nativePicker === 'touch' && isTouch) {
+    return /*#__PURE__*/_jsx(NativeDateField, {
+      ...props
+    });
+  }
   return isTouch ? /*#__PURE__*/_jsx(TouchDateField, {
     ...props
   }) : /*#__PURE__*/_jsx(PointerDateField, {

package/dist/DateInput/NativeDateField.d.ts

@@ -0,0 +1,10 @@
+import type { DateInputProps } from './DateInput';
+/**
+ * The OS-picker surface. Takes `DateInput`'s props verbatim; see
+ * {@link DateInput} for when it is chosen over the other two.
+ */
+export declare function NativeDateField({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, isLoading, min, max, dateConstraints, placeholder: placeholderFromProps, size: sizeProp, status, statusVariant, labelTooltip, hasClear, numberOfMonths: _numberOfMonths, weekStartsOn: _weekStartsOn, format, width, xstyle, className, style, ref, ...rest }: DateInputProps): import("react").JSX.Element;
+export declare namespace NativeDateField {
+    var displayName: string;
+}
+//# sourceMappingURL=NativeDateField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NativeDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/NativeDateField.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAwLhD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAGhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,aAAa,EAC3B,MAAoB,EACpB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAmXhB;yBAlZe,eAAe"}

package/dist/DateInput/NativeDateField.js

@@ -0,0 +1,477 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file NativeDateField.tsx
+ * @input Uses React, Field, Icon, InputClearButton, Spinner, useCalendarConstraints
+ * @output Exports NativeDateField — the OS-picker touch surface
+ * @position One of DateInput's three surfaces. `DateInput` picks the pointer
+ *   field on a mouse and, on touch, either `TouchDateField` (the default) or
+ *   this one when the consumer opts in with `nativePicker`.
+ *
+ * Hands date picking to the platform: a real `<input type="date">`, whose
+ * picker the OS draws — the iOS wheel, the Android calendar dialog. The field
+ * itself still looks like every other Astryx input, and DateInput paints its
+ * text so `format` and `placeholder` keep applying.
+ *
+ * Everything unusual in here was measured on a real iOS device; the comments
+ * say which behaviour forced which decision, because none of them are
+ * reproducible in a desktop browser.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/DateInput/DateInput.tsx (the `nativePicker` prop)
+ * - /packages/core/src/DateInput/DateInput.doc.mjs (prop table)
+ * - /packages/core/src/DateInput/DateInputNative.test.tsx (tests)
+ */
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { useCalendarConstraints } from "../Calendar/index.js";
+import { Field, InputClearButton, inputStatusBorderStyles, inputStatusFocusWithinStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
+import { useInputStatusIcon, useMergedRefs } from "../hooks/index.js";
+import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
+import { Icon } from "../Icon/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";
+import { useSize } from "../SizeContext/index.js";
+import { Spinner } from "../Spinner/index.js";
+import "../theme/tokens.stylex.js";
+import { colorVars, radiusVars, sizeVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
+import { useTooltip } from "../Tooltip/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { focusOutlineStyles, formatSharedDate, getInputARIA, mergeProps, parseDateInput, plainDateFromISO, plainDateToISO, themeProps } from "../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  wrapper: {
+    kOIVth: "x167g77z",
+    $$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
+  }
+};
+const sizeStyles = {
+  sm: {
+    kZKoxP: "x6k0iem",
+    k7Eaqz: "xfb3i0g",
+    $$css: true
+  },
+  md: {
+    kZKoxP: "x1ueg155",
+    k7Eaqz: "xfb3i0g",
+    $$css: true
+  },
+  lg: {
+    kZKoxP: "xssyfek",
+    k7Eaqz: "xfb3i0g",
+    $$css: true
+  }
+};
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+
+/**
+ * The OS-picker surface. Takes `DateInput`'s props verbatim; see
+ * {@link DateInput} for when it is chosen over the other two.
+ */
+export function NativeDateField({
+  label,
+  isLabelHidden = false,
+  description,
+  isOptional = false,
+  isRequired = false,
+  isDisabled = false,
+  disabledMessage,
+  value,
+  onChange,
+  isLoading = false,
+  min,
+  max,
+  dateConstraints,
+  placeholder: placeholderFromProps,
+  size: sizeProp,
+  status,
+  statusVariant = 'attached',
+  labelTooltip,
+  hasClear = false,
+  // The OS draws the picker, so neither reaches it: both describe a calendar
+  // grid it does not have. Accepted (the prop types are shared) and ignored.
+  numberOfMonths: _numberOfMonths,
+  weekStartsOn: _weekStartsOn,
+  format = 'date_long',
+  width,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...rest
+}) {
+  const t = useTranslator();
+  const locale = useLocale();
+  const isEffectivelyRequired = useResolvedRequired({
+    isRequired,
+    isOptional
+  });
+  const placeholder = placeholderFromProps ?? t('@astryx.dateInput.placeholder');
+  const size = useSize(sizeProp, 'md');
+  const id = useId();
+  const inputLabelID = useId();
+  const descriptionID = useId();
+  const statusMessageID = useId();
+  const inputRef = useRef(null);
+  const mergedInputRef = useMergedRefs(ref, inputRef);
+  const inputGroup = useInputGroup();
+  const isEffectivelyDisabled = isDisabled || isLoading;
+
+  // Disabled-reason tooltip, same contract as the other two surfaces: a
+  // disabled control swallows pointer events, so the listeners attach to the
+  // wrapper and the input stays focusable via aria-disabled.
+  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);
+
+  // A date the picker produced that `dateConstraints` refuses, held so the
+  // refusal can be announced instead of looking like a dead tap.
+  const [rejectedValue, setRejectedValue] = useState(null);
+  // Whether the control has focus — which, on a touch device, means its
+  // picker is open.
+  const [isFocused, setIsFocused] = useState(false);
+  // The raw value the control last reported and we acted on, so the same edit
+  // arriving through both commit paths only fires one change.
+  const lastCommitRef = useRef(null);
+  const prevValueRef = useRef(value);
+  if (value !== prevValueRef.current) {
+    prevValueRef.current = value;
+    lastCommitRef.current = null;
+    if (rejectedValue !== null) {
+      setRejectedValue(null);
+    }
+  }
+
+  // The control's own value is always ISO — the only form it accepts, and
+  // what the picker reads and writes. `format` rides on the overlay instead.
+  const nativeValue = value && ISO_DATE.test(value) ? value : '';
+  const isInputValid = rejectedValue === null;
+  const formatValue = useCallback(iso => typeof format === 'function' ? format(iso) : formatSharedDate(plainDateFromISO(iso), format, locale), [format, locale]);
+
+  // This field paints the closed control's text itself, which is what keeps
+  // `format` and `placeholder` applying: the OS picker has no segments to
+  // edit, so our text holds even while the picker is open, and tracks it live.
+  const overlayText = nativeValue ? formatValue(nativeValue) : placeholder;
+  const showsOverlay = !!overlayText;
+  const commitValue = useCallback(newValue => {
+    if (isEffectivelyDisabled) {
+      return;
+    }
+    // The same edit can arrive twice — React's synthetic change and the
+    // native listener below both report it — so act on a raw value once.
+    if (lastCommitRef.current === newValue) {
+      return;
+    }
+    lastCommitRef.current = newValue;
+    if (!newValue) {
+      setRejectedValue(null);
+      if (value !== undefined) {
+        onChange?.(undefined);
+      }
+      return;
+    }
+    const parsed = parseDateInput(newValue, locale);
+    if (!parsed) {
+      return;
+    }
+    if (isDateDisabled(parsed)) {
+      // iOS does not enforce min/max in its picker — those attributes are
+      // constraint-validation flags, not clamps, and the sheet lets the
+      // user land on any date. Refuse it here and let the sync effect snap
+      // the control back; the live region below announces the refusal.
+      setRejectedValue(newValue);
+      return;
+    }
+    setRejectedValue(null);
+    const parsedISO = plainDateToISO(parsed);
+    if (parsedISO !== value) {
+      onChange?.(parsedISO);
+    }
+  }, [value, onChange, isDateDisabled, isEffectivelyDisabled, locale]);
+  const handleChange = useCallback(e => {
+    commitValue(e.target.value);
+  }, [commitValue]);
+
+  // React's synthetic change system does not reliably observe the iOS
+  // picker's edits. Measured on an iPhone: picking a date fired a native
+  // `input` event carrying the new date while React's `onChange` never ran —
+  // so React re-rendered and wrote its own stale value straight back over the
+  // picker's, and the user's pick (and their Reset) silently reverted. A
+  // native listener reads what the control actually holds, whatever React's
+  // synthetic layer made of it.
+  const commitRef = useRef(commitValue);
+  useEffect(() => {
+    commitRef.current = commitValue;
+  });
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const handleNative = () => commitRef.current(input.value);
+    input.addEventListener('input', handleNative);
+    input.addEventListener('change', handleNative);
+    return () => {
+      input.removeEventListener('input', handleNative);
+      input.removeEventListener('change', handleNative);
+    };
+  }, []);
+
+  // The value the control mounts with. Deliberately captured once: React
+  // writes to the element whenever a `value` OR `defaultValue` prop changes,
+  // and on iOS ANY write while the picker sheet is open detaches the sheet
+  // from the field — the wheel and Reset keep moving the sheet's own
+  // highlight, but nothing they do reaches the input and no event fires, so
+  // the user's pick appears to do nothing. Holding this constant means React
+  // touches the element exactly once, at mount; the effect below owns every
+  // later update and only writes while the field is unfocused.
+  const initialValueRef = useRef(null);
+  if (initialValueRef.current === null) {
+    initialValueRef.current = nativeValue;
+  }
+
+  // Push an externally-changed value in — but never while the control has
+  // focus, for the reason above. Blur flips `isFocused`, so this doubles as
+  // the reconcile once the picker closes. (Self-heals a stale
+  // `initialValueRef` too, on the commit right after a remount.)
+  useEffect(() => {
+    if (isFocused) {
+      return;
+    }
+    const input = inputRef.current;
+    if (input && input.value !== nativeValue) {
+      input.value = nativeValue;
+    }
+  }, [isFocused, nativeValue]);
+  const handleBlur = useCallback(() => {
+    const domValue = inputRef.current?.value;
+    setIsFocused(false);
+    // A refused date is reverted by the sync effect the moment focus leaves,
+    // so the field is once again showing a date that IS valid. Keeping the
+    // rejection past that point would mark good data invalid, with no way
+    // back except changing the field again. The live region announced the
+    // refusal while it happened; that is the feedback.
+    setRejectedValue(null);
+    if (domValue !== undefined && domValue !== nativeValue) {
+      commitValue(domValue);
+    }
+  }, [commitValue, nativeValue]);
+
+  // Focusing a date control is what raises the OS picker, so the usual
+  // focus-restore after a clear would pop the picker the tap just dismissed —
+  // and on iOS that reads as the clear having done nothing.
+  const handleClear = useCallback(() => {
+    onChange?.(undefined);
+  }, [onChange]);
+  const openPicker = useCallback(() => {
+    if (isEffectivelyDisabled) {
+      return;
+    }
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    // Focus first: on touch browsers focusing the control is itself what
+    // raises the picker, and iOS implements no `showPicker()` for type=date
+    // (WebKit bug 261703), so focus is the whole mechanism there.
+    input.focus();
+    if (typeof input.showPicker === 'function') {
+      try {
+        input.showPicker();
+      } catch {
+        // showPicker throws without transient user activation and inside a
+        // cross-origin iframe. The focus above is the fallback.
+      }
+    }
+  }, [isEffectivelyDisabled]);
+  const inputWrapper = /*#__PURE__*/_jsxs("div", {
+    ref: el => {
+      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: openPicker,
+      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: 'collapsed'
+        })
+      })
+    }), /*#__PURE__*/_jsxs("span", {
+      ...{
+        className: "x1n2onr6 x78zum5 x6s0dn4 x98rzlu xeuugli"
+      },
+      children: [/*#__PURE__*/_jsx("input", {
+        ref: mergedInputRef,
+        id: id,
+        type: "date"
+        // UNCONTROLLED on purpose, with a value React never rewrites after
+        // mount — see `initialValueRef` and the sync effect above.
+        ,
+        defaultValue: initialValueRef.current ?? '',
+        onChange: handleChange,
+        onFocus: () => setIsFocused(true),
+        onBlur: handleBlur,
+        min: min,
+        max: max,
+        disabled: isEffectivelyDisabled && !showsDisabledMessage,
+        "aria-disabled": showsDisabledMessage ? 'true' : undefined,
+        readOnly: showsDisabledMessage || undefined,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-required": isEffectivelyRequired ? 'true' : undefined,
+        "aria-invalid": status?.type === 'error' || !isInputValid ? 'true' : undefined,
+        "aria-busy": isLoading || undefined,
+        ...{
+          0: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3"
+          },
+          4: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 x19co3pv xg7jpbn"
+          },
+          2: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 xt0e3qv"
+          },
+          6: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 x19co3pv xg7jpbn xt0e3qv"
+          },
+          1: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 xv1l7n4"
+          },
+          5: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 xg7jpbn xv1l7n4"
+          },
+          3: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 xt0e3qv xv1l7n4"
+          },
+          7: {
+            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz x1oglpa6 x1lugfcp xjyslct xolhmmf x9rmy9g xpsyfx0 x1qqcexc x1x4c3m6 xkqr7wz x1f74mqm xec4aax xtbxizx xslb4at x15bqym3 xg7jpbn xt0e3qv xv1l7n4"
+          }
+        }[!!showsOverlay << 2 | !!isEffectivelyDisabled << 1 | !!!isInputValid << 0]
+      }), showsOverlay && /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        ...{
+          0: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv xv1l7n4"
+          },
+          4: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv x1tgivj0"
+          },
+          2: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv xv1l7n4 xt0e3qv"
+          },
+          6: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv x1tgivj0 xt0e3qv"
+          },
+          1: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv xv1l7n4"
+          },
+          5: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv xv1l7n4"
+          },
+          3: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv xt0e3qv xv1l7n4"
+          },
+          7: {
+            className: "x10l6tqk x1o0tod xtijo5x x10no89f x1lliihq xjm74w1 x6pjikd xw6l6zx x47corl xb3r6kr xuxw1ft xlyipyv xt0e3qv xv1l7n4"
+          }
+        }[!!nativeValue << 2 | !!isEffectivelyDisabled << 1 | !!(!isInputValid && !!nativeValue) << 0],
+        children: overlayText
+      })]
+    }), /*#__PURE__*/_jsx(VisuallyHidden, {
+      as: "div",
+      role: "alert",
+      "aria-live": "assertive",
+      children: !isInputValid ? t('@astryx.dateInput.invalidDate') : ''
+    }), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
+      label: t('@astryx.dateInput.clear', {
+        label
+      }),
+      onClick: handleClear,
+      iconClassName: stableClassName('date-input-clear-icon')
+    }), isLoading && /*#__PURE__*/_jsx(Spinner, {
+      size: "sm"
+    }), statusIcon, 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
+  });
+}
+NativeDateField.displayName = 'NativeDateField';

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"}