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

package/dist/CommandPalette/CommandPaletteItem.js

@@ -20,9 +20,9 @@ import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars } fro
 import { useCommandPaletteContext } from "./CommandPaletteContext.js";
 import { useDialogContext } from "../Dialog/DialogContext.js";
 import { themeProps } from "../utils/themeProps.js";
+import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const HOVER_HOVER = '@media (hover: hover)';
 const styles = {
   item: {
     k1xSpc: "x78zum5",
@@ -42,11 +42,6 @@ const styles = {
     kfSwDN: "x87ps6o",
     $$css: true
   },
-  itemHover: {
-    kRL5z6: "xoevpu5",
-    kSReZ0: "xyxi2l3",
-    $$css: true
-  },
   itemHighlighted: {
     kWkggS: "x1lmrjuc",
     $$css: true
@@ -147,7 +142,7 @@ export function CommandPaletteItem({
     "data-value": value,
     onClick: composeEventHandlers(onClickProp, handleClick),
     onMouseEnter: composeEventHandlers(onMouseEnterProp, handleMouseEnter),
-    ...mergeProps(themeProps('command-palette-item'), stylex.props(styles.item, !isDisabled && styles.itemHover, isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, isDisabled && styles.itemDisabled, xstyle), className, style),
+    ...mergeProps(themeProps('command-palette-item'), stylex.props(styles.item, !isDisabled && interactionOverlayStyles.backgroundColor, isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, isDisabled && styles.itemDisabled, xstyle), className, style),
     children: children
   });
 }

package/dist/ComplexSelector/ComplexSelector.d.ts

@@ -36,7 +36,8 @@ export interface ComplexSelectorRenderState {
  * they respect focus restoration, light dismiss, and Escape. Prefer these
  * callbacks over mirroring open state in the parent — the selector owns its
  * visibility, and imperative calls avoid the focus-management pitfalls of
- * syncing an external `isOpen` prop.
+ * syncing an external `isOpen` prop. Pair with `onOpenChange` to observe every
+ * open and close, including the ones the selector performs itself.
  */
 export interface ComplexSelectorHandle {
     /** Open the selector surface. No-op when disabled or already open. */
@@ -103,6 +104,13 @@ export interface ComplexSelectorProps<Value> extends Omit<BaseProps<HTMLDivEleme
      * state in the parent — the selector owns its visibility.
      */
     handleRef?: React.Ref<ComplexSelectorHandle>;
+    /**
+     * Called whenever the selector surface opens or closes, however it happened
+     * — the trigger, the keyboard, a light dismiss, Escape, content that calls
+     * `close()`, or the imperative handle. Pair it with `handleRef` to drive the
+     * surface from outside without mirroring its state.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
     /** StyleX styles for the popup content container. */
     contentXstyle?: StyleXStyles;
     /** Test ID for the trigger container. */
@@ -135,7 +143,7 @@ export interface ComplexSelectorProps<Value> extends Omit<BaseProps<HTMLDivEleme
  * </ComplexSelector>
  * ```
  */
-export declare function ComplexSelector<Value>({ label, value, onChange, changeAction, children, triggerLabel, placeholder: placeholderFromProps, isLabelHidden, description, isOptional, isRequired, isDisabled, isLoading, status, statusVariant, labelTooltip, size, variant, startIcon, width, placement, alignment, handleRef, contentXstyle, xstyle, className, style, 'data-testid': testId, onClick: onClickProp, ...props }: ComplexSelectorProps<Value>): React.JSX.Element;
+export declare function ComplexSelector<Value>({ label, value, onChange, changeAction, children, triggerLabel, placeholder: placeholderFromProps, isLabelHidden, description, isOptional, isRequired, isDisabled, isLoading, status, statusVariant, labelTooltip, size, variant, startIcon, width, placement, alignment, handleRef, onOpenChange, contentXstyle, xstyle, className, style, 'data-testid': testId, onClick: onClickProp, ...props }: ComplexSelectorProps<Value>): React.JSX.Element;
 export declare namespace ComplexSelector {
     var displayName: string;
 }

package/dist/ComplexSelector/ComplexSelector.d.ts.map

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

package/dist/ComplexSelector/ComplexSelector.js

@@ -29,6 +29,7 @@ import { colorVars, durationVars, easeVars, fontWeightVars, radiusVars, sizeVars
 import { isRenderable, mergeProps } from "../utils/index.js";
 import { composeEventHandlers } from "../utils/composeEventHandlers.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {
@@ -88,7 +89,6 @@ const styles = {
     kzqmXN: "x14atkfc",
     kMzoRj: "xc342km",
     kWkggS: "xjbqb8w",
-    kKwaWg: "xmvprkv xq8i9tn",
     kGVxlE: "x1gnnqk1 x1s17dad x15ysqaf",
     k63SB2: "x1e4wzip",
     k1ekBW: "xrafxwg",
@@ -150,7 +150,8 @@ const styles = {
  * they respect focus restoration, light dismiss, and Escape. Prefer these
  * callbacks over mirroring open state in the parent — the selector owns its
  * visibility, and imperative calls avoid the focus-management pitfalls of
- * syncing an external `isOpen` prop.
+ * syncing an external `isOpen` prop. Pair with `onOpenChange` to observe every
+ * open and close, including the ones the selector performs itself.
  */
 
 /**
@@ -204,6 +205,7 @@ export function ComplexSelector({
   placement = 'below',
   alignment = 'start',
   handleRef,
+  onOpenChange,
   contentXstyle,
   xstyle,
   className,
@@ -226,24 +228,29 @@ export function ComplexSelector({
   const statusMessageId = useId();
   const ariaDescribedBy = [description ? descriptionId : null, status?.message ? statusMessageId : null].filter(id => id != null).join(' ') || undefined;
   const triggerRef = useRef(null);
-  const lastHideTimeRef = useRef(0);
   const [isPending, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || isPending;
+  const handlePopoverShow = useCallback(() => {
+    onOpenChange?.(true);
+  }, [onOpenChange]);
   const handlePopoverHide = useCallback(() => {
-    lastHideTimeRef.current = Date.now();
+    // Focus is restored first so a consumer that moves focus elsewhere from
+    // the callback wins, instead of being overwritten a line later.
     triggerRef.current?.focus();
-  }, []);
+    onOpenChange?.(false);
+  }, [onOpenChange]);
   const popover = usePopover({
     dialogLabel: label,
     hasCloseButton: false,
     hasAutoFocus: true,
     surfaceTarget: 'complex-selector-popup',
+    onShow: handlePopoverShow,
     onHide: handlePopoverHide
   });
   const isOpen = popover.isOpen;
   const handleTriggerClick = useCallback(() => {
-    if (isDisabled || Date.now() - lastHideTimeRef.current < 50) {
+    if (isDisabled) {
       return;
     }
     if (popover.isOpen) {
@@ -313,7 +320,7 @@ export function ComplexSelector({
       // inside it), but it must still be a KEYBOARD ring: `:focus-within`
       // matched a mouse click on the trigger and drew the outline for
       // pointer users too. `focusWithin` here is `:has(:focus-visible)`.
-      focusOutlineStyles.focusWithin, variant === 'ghost' && styles.triggerGhost, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, isDisabled && styles.disabled, triggerLabel == null && styles.placeholder, xstyle), className, style),
+      focusOutlineStyles.focusWithin, variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && interactionOverlayStyles.backgroundImage, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, isDisabled && styles.disabled, triggerLabel == null && styles.placeholder, xstyle), className, style),
       children: [isRenderable(startIconSlot) && startIconSlot, /*#__PURE__*/_jsx("button", {
         ref: triggerRef,
         id: triggerId,

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

@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/DateInput.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/DateInput/ (showcase blocks)
  */
-import { use, useId, useState, useCallback, useRef, useOptimistic, useTransition } from 'react';
+import { useId, useState, useCallback, useRef, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, radiusVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.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
 
@@ -94,7 +104,7 @@ import { mergeProps, isFocusDetached } from "../utils/index.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 { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -153,13 +163,11 @@ function PointerDateField({
   ...rest
 }) {
   const t = useTranslator();
+  const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({
     isRequired,
     isOptional
   });
-  const {
-    locale
-  } = use(InternationalizationContext);
   const placeholder = placeholderFromProps ?? t('@astryx.dateInput.placeholder');
   const size = useSize(sizeProp, 'md');
   const id = useId();
@@ -560,6 +568,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/MonthScroller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAmDA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,SAAS,EAQf,MAAM,UAAU,CAAC;AA6MlB,MAAM,WAAW,mBAAmB;IAClC,0DAA0D;IAC1D,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACxD,+CAA+C;IAC/C,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,+BAA+B;IAC/B,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC7C,gCAAgC;IAChC,YAAY,EAAE,SAAS,CAAC;IACxB,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,GACT,EAAE,kBAAkB,+BAkapB;yBA7ae,aAAa"}
+{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAoDA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,SAAS,EAQf,MAAM,UAAU,CAAC;AA6MlB,MAAM,WAAW,mBAAmB;IAClC,0DAA0D;IAC1D,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACxD,+CAA+C;IAC/C,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,+BAA+B;IAC/B,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC7C,gCAAgC;IAChC,YAAY,EAAE,SAAS,CAAC;IACxB,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,GACT,EAAE,kBAAkB,+BAkapB;yBA7ae,aAAa"}

package/dist/DateInput/MonthScroller.js

@@ -25,13 +25,14 @@
  *
  * 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
  */
 import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { useCalendarDays } from "../Calendar/index.js";
-import { useDirection } from "../i18n/index.js";
+import { useDirection, useLocale } from "../i18n/index.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, fontWeightVars, typeScaleVars, durationVars, borderVars } from "../theme/tokens.stylex.js";
 import { focusOutlineStyles } from "../utils/index.js";
@@ -539,6 +540,7 @@ function MonthPane({
   onDayKeyDown,
   onDayFocus
 }) {
+  const locale = useLocale();
   const {
     year,
     month
@@ -557,7 +559,7 @@ function MonthPane({
     year,
     month,
     day: 1
-  }, DATE_FORMAT_MONTH_YEAR);
+  }, DATE_FORMAT_MONTH_YEAR, locale);
 
   // Exactly one day per pane is tab-reachable, so Tab moves through the
   // picker rather than through 42 buttons: the focused day if the keyboard
@@ -604,7 +606,7 @@ function MonthPane({
             type: "button",
             "data-date": day.iso,
             tabIndex: day.iso === tabbableISO ? 0 : -1,
-            "aria-label": plainDateFormat(day.date, DATE_FORMAT_WITH_WEEKDAY),
+            "aria-label": plainDateFormat(day.date, DATE_FORMAT_WITH_WEEKDAY, locale),
             "aria-disabled": isDisabled || undefined,
             "aria-current": isToday ? 'date' : undefined,
             onClick: () => {

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

@@ -1 +1 @@
-{"version":3,"file":"MonthYearWheels.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthYearWheels.tsx"],"names":[],"mappings":"AAuCA,MAAM,WAAW,oBAAoB;IACnC,2CAA2C;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,2CAA2C;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,aAAa,EACb,aAAa,EACb,QAAQ,EACR,UAAU,EACV,SAAS,EACT,QAAe,GAChB,EAAE,oBAAoB,+BA6EtB;yBArFe,eAAe"}
+{"version":3,"file":"MonthYearWheels.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthYearWheels.tsx"],"names":[],"mappings":"AAyCA,MAAM,WAAW,oBAAoB;IACnC,2CAA2C;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,2CAA2C;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,aAAa,EACb,aAAa,EACb,QAAQ,EACR,UAAU,EACV,SAAS,EACT,QAAe,GAChB,EAAE,oBAAoB,+BA8EtB;yBAtFe,eAAe"}

package/dist/DateInput/MonthYearWheels.js

@@ -17,11 +17,13 @@
  *
  * 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
  */
 import { useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
+import { useLocale } from "../i18n/index.js";
 import { DATE_FORMAT_MONTH_ONLY, plainDateFormat } from "../utils/index.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
@@ -42,6 +44,7 @@ export function MonthYearWheels({
   yearLabel,
   isActive = true
 }) {
+  const locale = useLocale();
   const {
     year,
     month
@@ -52,16 +55,15 @@ export function MonthYearWheels({
   //
   // `plainDateFormat` rather than a raw `Intl.DateTimeFormat`, which the
   // shared lint rule forbids and which would duplicate the format vocabulary
-  // besides. It resolves the locale itself, so there is nothing here for the
-  // memo to depend on — the same is true of Calendar's own month labels, and
-  // is why this list is constant for the life of the component.
+  // besides. Recompute when the provider locale changes so the wheel labels
+  // stay in sync with the field and calendar.
   const monthNames = useMemo(() => Array.from({
     length: 12
   }, (_, index) => plainDateFormat({
     year: 2021,
     month: index + 1,
     day: 15
-  }, DATE_FORMAT_MONTH_ONLY)), []);
+  }, DATE_FORMAT_MONTH_ONLY, locale)), [locale]);
 
   // Months outside the range stay on the wheel rather than vanishing: a list
   // whose length changes with the year would jump under the finger.

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":"AA+BA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AA0LhD;;;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,+BAkYhB;yBAjae,eAAe"}