@astryxdesign/core 0.7.8 → 0.7.9-canary.0200dfe

package/dist/DateInput/DateInput.d.ts

@@ -1,6 +1,7 @@
 import * as stylex from '@stylexjs/stylex';
 import { type InputStatus } from '../Field/index.js';
 import { type ISODateString, type DayOfWeek, type DayOfWeekName } from '../Calendar/index.js';
+import type { CalendarSystem } from '../utils/calendarSystem.js';
 import type { TimestampFormat } from '../Timestamp/index.js';
 import { type PickerPresentation } from '../utils/inputPresentation.js';
 declare const sizeStyles: Readonly<{
@@ -136,7 +137,8 @@ export interface DateInputProps extends Omit<FieldInputBaseProps<HTMLInputElemen
      */
     dateConstraints?: ReadonlyArray<(date: Date) => boolean>;
     /**
-     * Placeholder text shown when no date is selected.
+     * Placeholder text shown when no date is selected. A caller placeholder
+     * replaces the calendar format hint.
      * @default "Select a date"
      */
     placeholder?: string;
@@ -202,9 +204,10 @@ export interface DateInputProps extends Omit<FieldInputBaseProps<HTMLInputElemen
      * - `(value: ISODateString) => string`: fully custom display string
      *
      * Formatting applies only to the committed value — never to text the user is
-     * actively typing. A custom function's output that `parseDateInput` cannot
-     * read back can't be re-committed after an edit; external `value` changes
-     * always recompute the display from the ISO value.
+     * actively typing. Named formats write the date in the field's `calendar`;
+     * `'system_date'` stays the Gregorian ISO date. A custom function's output
+     * that the field cannot read back can't be re-committed after an edit;
+     * external `value` changes always recompute the display from the ISO value.
      *
      * @default 'date_long'
      * @example
@@ -219,6 +222,28 @@ export interface DateInputProps extends Omit<FieldInputBaseProps<HTMLInputElemen
      * ```
      */
     format?: DateInputFormat | ((value: ISODateString) => string);
+    /**
+     * The calendar the field shows dates in, such as `'persian'`, `'hebrew'`, or
+     * `'buddhist'`: the text field, its calendar popover, and the bottom sheet's
+     * months and wheels. `value`, `onChange`, `min`, and `max` stay Gregorian
+     * ISO dates in every calendar. People type a date the way the locale writes
+     * it in this calendar, and the committed text uses it.
+     * Years are years of this calendar, so a Buddhist field reads `2026` as
+     * Buddhist year 2026; set `min` and `max` to catch a year typed in the
+     * wrong calendar. Calendars other than `gregory`, `iso8601`, `buddhist`,
+     * `roc`, and `japanese` need `Temporal`, native or a polyfill the
+     * application loads; without it the field uses the Gregorian calendar.
+     * The native date control is Gregorian, so with a calendar other than
+     * `gregory` or `iso8601` every presentation that would show it uses the
+     * popover on a fine pointer and the bottom sheet on a coarse pointer.
+     *
+     * @default the InternationalizationProvider's calendar, else `'gregory'`
+     * @example
+     * ```
+     * <DateInput label="Start date" calendar="persian" value={date} onChange={setDate} />
+     * ```
+     */
+    calendar?: CalendarSystem;
     /**
      * 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
@@ -244,6 +269,9 @@ export interface DateInputProps extends Omit<FieldInputBaseProps<HTMLInputElemen
      * picker. `dateConstraints` is enforced the same way, on commit, and is
      * reason enough to prefer `'never'` on a field that uses it.
      *
+     * In a calendar other than `gregory` or `iso8601`, `'touch'` and `'always'`
+     * use the calendar popover on a mouse and the touch picker on a finger.
+     *
      * @default 'touch'
      * @deprecated Use `presentation` (`spec:AST-043` FR3):
      * `'touch'` → `'adaptive-native'`, `'always'` → `'native'`,
@@ -258,12 +286,15 @@ export interface DateInputProps extends Omit<FieldInputBaseProps<HTMLInputElemen
      * - `'popover'`: Astryx's typed field + calendar popover on every pointer
      * - `'bottom-sheet'`: Astryx's bottom-sheet calendar on every pointer
      * - `'native'`: the browser/OS picker on every pointer, with no Astryx
-     *   fallback (FR2)
+     *   fallback (FR2), except in a calendar other than `gregory` or
+     *   `iso8601`, where it is `'adaptive-bottom-sheet'` and warns in
+     *   development
      * - `'adaptive-bottom-sheet'`: popover on a fine pointer, bottom sheet on
      *   a coarse pointer
      * - `'adaptive-native'` (default): popover on a fine pointer, browser/OS
      *   picker on a coarse pointer, keeping the released Astryx fallbacks
-     *   where a native control cannot express the value (FR2)
+     *   where a native control cannot express the value (FR2), and the bottom
+     *   sheet in a calendar other than `gregory` or `iso8601`
      *
      * @default 'adaptive-native'
      */

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

@@ -4,7 +4,7 @@
 
 /**
  * @file DateInput.tsx
- * @input Uses React, useId, useState, useCallback, useRef, Field, Icon, Calendar, usePopover, InputGroupContext
+ * @input Uses React, useId, useCallback, useRef, useTypedDateField, Field, Icon, Calendar, usePopover, InputGroupContext
  * @output Exports DateInput component, DateInputProps
  * @position Core implementation; consumed by index.ts, tested by DateInput.test.tsx
  *
@@ -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 { use, useId, useCallback, useRef, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
 import "../theme/tokens.stylex.js";
@@ -35,14 +35,16 @@ import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { usePopover } from "../Popover/index.js";
-import { isFocusInsideOwnedLayer, isPressInsideOwnedLayer, useOutsidePress } from "../Layer/outsidePress.js";
+import { isFocusInsideOwnedLayer, isPressInsideOwnedLayer, noteOutsideDismissal, useOutsidePress } from "../Layer/outsidePress.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";
+import { getInputARIA, isImeKeyEvent } from "../utils/index.js";
 import { chainEventHandlers } from "../utils/chainEventHandlers.js";
-import { plainDateFromISO, plainDateToISO, formatSharedDate } from "../utils/plainDate.js";
-import { effectivePickerPresentation, resolvePickerPresentation } from "../utils/inputPresentation.js";
+import { isRenderable } from "../utils/isRenderable.js";
+import { useTypedDateField } from "./useTypedDate.js";
+import { resolvePickerPresentation } from "../utils/inputPresentation.js";
+import { useCalendarPresentation } from "./useCalendarPresentation.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 const styles = {
   iconButton: {
@@ -115,7 +117,6 @@ import { joinAriaIDs } from "../utils/inputAria.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
-import { useLocale } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/DateInput/DateInput.generated.js";
@@ -178,6 +179,7 @@ function PointerDateField({
   numberOfMonths = 1,
   weekStartsOn,
   format = 'date_long',
+  calendar,
   width,
   containerXstyle,
   containerClassName,
@@ -202,11 +204,11 @@ function PointerDateField({
     'aria-labelledby': ariaLabelledByProp,
     onBlur: onBlurProp,
     onClick: onClickProp,
+    onFocus: onFocusProp,
     onKeyDown: onKeyDownProp,
     ...controlProps
   } = rest;
   const t = useComponentTranslator();
-  const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({
     isRequired,
     isOptional
@@ -219,9 +221,9 @@ function PointerDateField({
   const inputLabelID = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
+  const calendarDescriptionID = useId();
   const inputRef = useRef(null);
   const calendarRef = useRef(null);
-  const lastFiredValueRef = useRef(undefined);
   const inputGroup = useInputGroup();
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
@@ -255,51 +257,71 @@ function PointerDateField({
     max,
     dateConstraints
   });
+  const fireChange = useCallback(newValue => {
+    if (isEffectivelyDisabled) {
+      return;
+    }
+    onChange?.(newValue);
+    if (changeAction) {
+      startTransition(async () => {
+        setOptimisticValue(newValue);
+        await changeAction(newValue);
+      });
+    }
+  }, [isEffectivelyDisabled, onChange, changeAction, startTransition, setOptimisticValue]);
+  const clearTypedDate = useCallback(() => {
+    if (value !== undefined) {
+      fireChange(undefined);
+    }
+  }, [value, fireChange]);
+  const navigateToTypedDate = useCallback(date => {
+    calendarRef.current?.navigateTo(date);
+  }, []);
+  const {
+    typedDate,
+    displayValue,
+    formatHint,
+    isPending,
+    isInvalid,
+    fieldStatus,
+    alertMessage,
+    handleChange: handleTypedChange,
+    commit: commitPendingInput,
+    handleFocus,
+    handleBlur,
+    reset: resetTypedInput
+  } = useTypedDateField({
+    source: 'DateInput',
+    calendar,
+    format,
+    min,
+    max,
+    isDateDisabled,
+    value,
+    shownValue: optimisticValue,
+    onChange: fireChange,
+    onClear: clearTypedDate,
+    onTypedDate: navigateToTypedDate,
+    isDisabled: isEffectivelyDisabled,
+    status,
+    isStatusAnnounced: !inputGroup,
+    hasPlaceholder: placeholderFromProps != null
+  });
   const {
     statusIcon,
     describedBy: statusTooltipDescribedBy
   } = useInputStatusIcon({
-    status,
+    status: fieldStatus,
     statusVariant,
     isInGroup: !!inputGroup
   });
   const {
     ariaLabelledBy,
     ariaDescribedBy
-  } = getInputARIA(inputLabelID, [description ? descriptionID : null, statusVariant !== 'tooltip' && status?.message ? statusMessageID : null,
+  } = getInputARIA(inputLabelID, [description ? descriptionID : null, typedDate.calendarDescription != null ? calendarDescriptionID : null, statusVariant !== 'tooltip' && fieldStatus?.message ? statusMessageID : null,
   // The tooltip variant renders no message box; describe the input by the
   // tooltip's content instead so the status is still announced.
   statusTooltipDescribedBy, showsDisabledMessage ? disabledMessageTooltip.describedBy : null, ariaDescribedByProp], inputGroup);
-
-  // Pending input while user is typing (null = show formatted value)
-  const [pendingInput, setPendingInput] = useState(null);
-
-  // Clear pending input when value changes externally (computed during render
-  // via prev-value ref instead of useEffect to avoid an extra render cycle)
-  const prevValueRef = useRef(value);
-  if (value !== prevValueRef.current) {
-    prevValueRef.current = value;
-    if (value !== lastFiredValueRef.current) {
-      lastFiredValueRef.current = undefined;
-      if (pendingInput !== null) {
-        setPendingInput(null);
-      }
-    }
-  }
-
-  // Format a committed ISO value for display. The default `date_long` renders
-  // the long-month shape (byte-identical to the historical hardcoded
-  // DATE_FORMAT_LONG rendering, so still non-breaking); a function is called
-  // with the ISO value; every other named member reuses Timestamp's shared
-  // date mapping. Applies ONLY to the committed value, never to in-progress
-  // typed input.
-  const formatCommittedValue = useCallback(iso => typeof format === 'function' ? format(iso) : formatSharedDate(plainDateFromISO(iso), format, locale), [format, locale]);
-
-  // Display value: pending input if typing, otherwise formatted value
-  const displayValue = pendingInput !== null ? pendingInput : optimisticValue && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue) ? formatCommittedValue(optimisticValue) : '';
-
-  // Check if current input is valid (for styling purposes)
-  const isInputValid = pendingInput === null || !pendingInput.trim() ? true : parseDateInput(pendingInput, locale) !== null;
   const fieldElementRef = useRef(null);
   // Set just before a close that focus already left the field for, so onHide
   // does not pull focus back to the input.
@@ -359,20 +381,6 @@ function PointerDateField({
     }
   }, [isEffectivelyDisabled, popover]);
 
-  // Unified change handler that fires both onChange and changeAction
-  const fireChange = useCallback(newValue => {
-    if (isEffectivelyDisabled) {
-      return;
-    }
-    onChange?.(newValue);
-    if (changeAction) {
-      startTransition(async () => {
-        setOptimisticValue(newValue);
-        await changeAction(newValue);
-      });
-    }
-  }, [isEffectivelyDisabled, onChange, changeAction, startTransition, setOptimisticValue]);
-
   // Handle clear button click
   const handleClear = useCallback(e => {
     fireChange(undefined);
@@ -397,62 +405,12 @@ function PointerDateField({
       return;
     }
     fireChange(selectedDate);
-    setPendingInput(null);
+    resetTypedInput();
     popover.hide();
-  }, [isDisabled, fireChange, popover]);
-
-  // Handle input text change - update immediately if valid and allowed
+  }, [isDisabled, fireChange, resetTypedInput, popover]);
   const handleInputChange = useCallback(e => {
-    // The input is never natively disabled (spec:AST-085 FR1), so guard
-    // value mutation explicitly (readOnly also blocks typing).
-    if (isEffectivelyDisabled) {
-      return;
-    }
-    const newValue = e.target.value;
-    setPendingInput(newValue);
-
-    // If the input is valid and passes constraints, update immediately
-    const parsed = parseDateInput(newValue, locale);
-    if (parsed && plainDateToISO(parsed) !== value && !isDateDisabled(parsed)) {
-      const parsedISO = plainDateToISO(parsed);
-      lastFiredValueRef.current = parsedISO;
-      fireChange(parsedISO);
-      // Navigate calendar to show the parsed date's month
-      calendarRef.current?.navigateTo(parsedISO);
-    }
-  }, [value, fireChange, isDateDisabled, isEffectivelyDisabled, locale]);
-
-  // Commit pending input (shared by blur and Enter key)
-  const commitPendingInput = useCallback(() => {
-    if (pendingInput === null) {
-      return;
-    }
-    // Disabled or busy: keep the value, drop the draft (spec:AST-085 FR2).
-    if (isEffectivelyDisabled) {
-      setPendingInput(null);
-      return;
-    }
-    if (!pendingInput.trim()) {
-      if (value !== undefined) {
-        fireChange(undefined);
-      }
-      setPendingInput(null);
-      return;
-    }
-    const parsed = parseDateInput(pendingInput, locale);
-    if (parsed && !isDateDisabled(parsed)) {
-      const parsedISO = plainDateToISO(parsed);
-      if (parsedISO !== value) {
-        fireChange(parsedISO);
-      }
-    }
-    setPendingInput(null);
-  }, [pendingInput, isEffectivelyDisabled, value, fireChange, isDateDisabled, locale]);
-
-  // Handle blur - validate, check constraints, and clear pending input.
-  const handleBlur = useCallback(() => {
-    commitPendingInput();
-  }, [commitPendingInput]);
+    handleTypedChange(e.target.value);
+  }, [handleTypedChange]);
 
   // A manual popover has no auto-popover exclusivity, so without this close
   // the next field's calendar would open beside this one. Focus going nowhere
@@ -463,6 +421,7 @@ function PointerDateField({
       return;
     }
     isFocusMovingAwayRef.current = true;
+    noteOutsideDismissal(e.currentTarget.ownerDocument);
     popover.hide();
   }, [popover]);
 
@@ -488,14 +447,14 @@ function PointerDateField({
           skipAutoFocus: true
         });
       }
-    } else if (e.key === 'Enter' && (pendingInput !== null || isEffectivelyDisabled)) {
+    } else if (e.key === 'Enter' && (isPending || isEffectivelyDisabled)) {
       // Typed text holds Enter back, or a form would submit the value from
       // before the commit. A disabled or busy field must not submit its
       // form either. Otherwise Enter keeps its default, as in any text field.
       e.preventDefault();
       commitPendingInput();
     }
-  }, [popover, commitPendingInput, isEffectivelyDisabled, pendingInput]);
+  }, [popover, commitPendingInput, isEffectivelyDisabled, isPending]);
   const inputWrapper = /*#__PURE__*/_jsxs("div", {
     ref: el => {
       fieldElementRef.current = el;
@@ -509,13 +468,13 @@ function PointerDateField({
     ...(inputGroup ? inputGroupItemProps : undefined),
     ...mergeProps(themeProps('date-input', {
       size,
-      status: status?.type ?? null,
+      status: fieldStatus?.type ?? null,
       disabled: isDisabled ? 'disabled' : null
     }), stylex.props(inputWrapperStyles.base, sizeStyles[size],
     // Disabled paint belongs to the disabled state only; a busy field
     // keeps its ordinary paint and shows the Spinner (spec:AST-085
     // FR6, family:buttons FR4).
-    isDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && inputDisabledFocusStyles.inputFocusRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
+    isDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && inputDisabledFocusStyles.inputFocusRing, fieldStatus && inputStatusBorderStyles[fieldStatus.type], fieldStatus && !isEffectivelyDisabled && inputStatusHoverShadowStyles[fieldStatus.type], fieldStatus && inputStatusFocusWithinStyles[fieldStatus.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
     children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
       id: inputLabelID,
       children: label
@@ -552,15 +511,16 @@ function PointerDateField({
       value: displayValue,
       onChange: handleInputChange,
       onBlur: chainEventHandlers(handleBlur, onBlurProp),
+      onFocus: chainEventHandlers(handleFocus, onFocusProp),
       onClick: isEffectivelyDisabled ? undefined : chainEventHandlers(handleInputClick, onClickProp),
       onKeyDown: chainEventHandlers(handleInputKeyDown, onKeyDownProp),
-      placeholder: placeholder,
+      placeholder: formatHint ?? placeholder,
       "aria-disabled": isEffectivelyDisabled ? 'true' : undefined,
       readOnly: isEffectivelyDisabled || undefined,
       "aria-labelledby": ariaLabelledByProp != null ? joinAriaIDs(ariaLabelledBy ?? fieldLabelID, ariaLabelledByProp) : ariaLabelledBy,
       "aria-describedby": ariaDescribedBy,
       "aria-required": isEffectivelyRequired ? 'true' : undefined,
-      "aria-invalid": status?.type === 'error' || !isInputValid ? 'true' : undefined,
+      "aria-invalid": fieldStatus?.type === 'error' || isInvalid ? 'true' : undefined,
       "aria-busy": isBusy || undefined,
       "aria-expanded": popover.isOpen,
       "aria-haspopup": "dialog",
@@ -580,12 +540,15 @@ function PointerDateField({
         3: {
           className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 xf9zqsd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xt0e3qv xv1l7n4"
         }
-      }[!!isEffectivelyDisabled << 1 | !!!isInputValid << 0]
+      }[!!isEffectivelyDisabled << 1 | !!isInvalid << 0]
     }), /*#__PURE__*/_jsx(VisuallyHidden, {
       as: "div",
       role: "alert",
       "aria-live": "assertive",
-      children: !isInputValid ? t('@astryx.dateInput.invalidDate') : ''
+      children: alertMessage
+    }), isRenderable(typedDate.calendarDescription) && /*#__PURE__*/_jsx(VisuallyHidden, {
+      id: calendarDescriptionID,
+      children: typedDate.calendarDescription
     }), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
       label: t('@astryx.dateInput.clear', {
         label
@@ -599,6 +562,7 @@ function PointerDateField({
     // calendar only while it is open; it opens on the current value.
     !popover.isOpen ? null : /*#__PURE__*/_jsx(Calendar, {
       handleRef: calendarRef,
+      calendar: typedDate.calendar,
       mode: "single",
       value: optimisticValue ?? null,
       onChange: handleDateSelect,
@@ -626,10 +590,10 @@ function PointerDateField({
     isOptional: isOptional,
     isRequired: isRequired,
     isDisabled: isDisabled,
-    status: status ? {
-      type: status.type,
-      message: status.message,
-      messageID: status.message ? statusMessageID : undefined
+    status: fieldStatus ? {
+      type: fieldStatus.type,
+      message: fieldStatus.message,
+      messageID: fieldStatus.message ? statusMessageID : undefined
     } : undefined,
     statusVariant: statusVariant,
     labelTooltip: labelTooltip,
@@ -690,10 +654,15 @@ export function DateInput(props) {
   const isDisabled = props.isDisabled || inputGroupState.isDisabled;
   const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
   useDevWarning('DateInput', '`nativePicker` is deprecated; use `presentation` instead (`touch` → `adaptive-native`, `always` → `native`, `never` → `adaptive-bottom-sheet`). `presentation` wins when both are set.', props.nativePicker !== undefined);
-  const surface = resolvePickerPresentation(effectivePickerPresentation(props.presentation, props.nativePicker), isTouch);
+  const {
+    calendar,
+    presentation
+  } = useCalendarPresentation('DateInput', props.calendar, props.presentation, props.nativePicker);
+  const surface = resolvePickerPresentation(presentation, isTouch);
   const {
     presentation: _presentation,
     nativePicker: _nativePicker,
+    calendar: _calendar,
     ...rest
   } = props;
   switch (surface) {
@@ -703,13 +672,17 @@ export function DateInput(props) {
         isDisabled: isDisabled
       });
     case 'sheet':
-      return /*#__PURE__*/_jsx(TouchDateField, {
+      return /*#__PURE__*/_jsx(TouchDateField
+      // Month indexes depend on the calendar. A new calendar remounts the sheet.
+      , {
         ...rest,
+        calendar: calendar,
         isDisabled: isDisabled
-      });
+      }, calendar);
     case 'desktop':
       return /*#__PURE__*/_jsx(PointerDateField, {
         ...rest,
+        calendar: calendar,
         isDisabled: isDisabled
       });
   }

package/dist/DateInput/MonthScroller.d.ts

@@ -1,4 +1,5 @@
-import { type DayOfWeek, type ISODateString, type PlainDate } from '../utils/index.js';
+import type { DayOfWeek, ISODateString, PlainDate } from '../utils/dateTypes.js';
+import { type MonthModel } from './monthGeometry.js';
 export interface MonthScrollerHandle {
     /** Bring a month to rest at the top of the scrollport. */
     scrollToMonth: (monthIndex: number, behavior?: ScrollBehavior) => void;
@@ -6,6 +7,8 @@ export interface MonthScrollerHandle {
 export interface MonthScrollerProps {
     /** Imperative handle for programmatic navigation (Today, the wheels). */
     handleRef?: React.RefObject<MonthScrollerHandle | null>;
+    /** The calendar's months, by index. */
+    monthModel: MonthModel;
     /** First reachable month, as a month index. */
     minMonthIndex: number;
     /** Last reachable month, as a month index. */
@@ -28,7 +31,7 @@ export interface MonthScrollerProps {
 /**
  * A vertically continuous, snap-paged run of month grids.
  */
-export declare function MonthScroller({ handleRef, minMonthIndex, maxMonthIndex, initialMonthIndex, onVisibleMonthChange, selectedDate, today, isDateDisabled, weekStartsOn, onSelect, }: MonthScrollerProps): import("react").JSX.Element;
+export declare function MonthScroller({ handleRef, monthModel, minMonthIndex, maxMonthIndex, initialMonthIndex, onVisibleMonthChange, selectedDate, today, isDateDisabled, weekStartsOn, onSelect, }: MonthScrollerProps): import("react").JSX.Element;
 export declare namespace MonthScroller {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAyDA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,SAAS,EAOf,MAAM,UAAU,CAAC;AAqNlB,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,+BA6iBpB;yBAxjBe,aAAa"}
+{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAC,SAAS,EAAE,aAAa,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAuB5E,OAAO,EACL,KAAK,UAAU,EAKhB,MAAM,iBAAiB,CAAC;AAqMzB,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,uCAAuC;IACvC,UAAU,EAAE,UAAU,CAAC;IACvB,+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,UAAU,EACV,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,GACT,EAAE,kBAAkB,+BA8iBpB;yBA1jBe,aAAa"}