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

package/dist/DateInput/MonthScroller.js

@@ -4,7 +4,8 @@
 
 /**
  * @file MonthScroller.tsx
- * @input Month bounds, selected value, constraints, week start
+ * @input A calendar's month model, month bounds, selected value, constraints,
+ *   week start
  * @output Exports MonthScroller and MonthScrollerHandle
  * @position Internal component; consumed by TouchDateField.tsx
  *
@@ -29,22 +30,23 @@
  * - /packages/core/src/DateInput/DateInput.doc.mjs
  * - /packages/core/src/DateInput/DateInputTouch.test.tsx
  */
-import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useMemo, useState } from 'react';
 import { flushSync } from 'react-dom';
 import * as stylex from '@stylexjs/stylex';
-import { useCalendarDays } from "../Calendar/index.js";
-import { useDirection, useLocale } from "../i18n/index.js";
+import { useCalendarDays } from "../Calendar/hooks/useCalendarDays.js";
+import { useDirection } from "../i18n/useDirection.js";
+import { useLocale } from "../i18n/useLocale.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, fontWeightVars, typeScaleVars, durationVars, borderVars } from "../theme/tokens.stylex.js";
-import { focusOutlineStyles } from "../utils/index.js";
-import { plainDateFormatDayNumber, plainDateFormatStandaloneMonthYear } from "../utils/plainDate.js";
-import { plainDateAddDays, plainDateDayOfWeek, plainDateFormat, plainDateIsEqual, plainDateToISO, DATE_FORMAT_WITH_WEEKDAY } from "../utils/index.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { plainDateAddDays, plainDateDayOfWeek, plainDateFormatDayNumber, plainDateIsEqual, plainDateToISO, DATE_FORMAT_WITH_WEEKDAY } from "../utils/plainDate.js";
 import { playReducedMotionDip, reducedMotionFade } from "../motion/reducedMotion.js";
+import { calendarYearMonthOf, formatCalendarDate, formatCalendarMonthLabel, isInCalendarMonth } from "../utils/calendarSystem.js";
 import "./tokens.stylex.js";
 import { dateInputTouchSizes, dateInputTouchGeometry } from "./tokens.stylex.js";
 import { useOwnScrollGesture } from "./useOwnScrollGesture.js";
 import { useScrollSettle } from "./useScrollSettle.js";
-import { fromMonthIndex, monthIndexOf, paneWindow, rowAtScrollOffset, rowsIn, scrollOffsetForRow } from "./monthGeometry.js";
+import { paneWindow, rowAtScrollOffset, rowsIn, scrollOffsetForRow } from "./monthGeometry.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DAY_SIZE = dateInputTouchSizes.daySize;
 
@@ -131,6 +133,7 @@ const dynamic = {
  */
 export function MonthScroller({
   handleRef,
+  monthModel,
   minMonthIndex,
   maxMonthIndex,
   initialMonthIndex,
@@ -570,16 +573,16 @@ export function MonthScroller({
   // by month is PageUp/PageDown; everything else is the APG grid vocabulary.
   const moveFocus = useCallback((from, deltaDays) => {
     const next = plainDateAddDays(from, deltaDays);
-    const nextIndex = monthIndexOf(next);
+    const nextIndex = monthModel.indexOf(next);
     if (nextIndex < minMonthIndex || nextIndex > maxMonthIndex) {
       return;
     }
     shouldRestoreFocusRef.current = true;
     setFocusedDate(next);
-    if (nextIndex !== monthIndexOf(from)) {
+    if (nextIndex !== monthModel.indexOf(from)) {
       scrollToMonth(nextIndex, 'smooth');
     }
-  }, [minMonthIndex, maxMonthIndex, scrollToMonth]);
+  }, [monthModel, minMonthIndex, maxMonthIndex, scrollToMonth]);
   const handleKeyDown = useCallback((event, date) => {
     // Column within the displayed week, which is what Home/End move to —
     // not the day of the month.
@@ -656,6 +659,7 @@ export function MonthScroller({
     children: /*#__PURE__*/_jsx("div", {
       ...stylex.props(styles.spacer, dynamic.spacer(rowCount * paneSize)),
       children: paneSize > 0 && rowsIn(visibleRows).map(row => /*#__PURE__*/_jsx(MonthPane, {
+        monthModel: monthModel,
         monthIndex: minMonthIndex + row,
         insetInlineStart: row * paneSize,
         inlineSize: paneSize,
@@ -680,6 +684,7 @@ MonthScroller.displayName = 'MonthScroller';
  * so each day instead carries its weekday in its accessible name.
  */
 function MonthPane({
+  monthModel,
   monthIndex,
   insetInlineStart,
   inlineSize,
@@ -694,40 +699,32 @@ function MonthPane({
 }) {
   const locale = useLocale();
   const {
-    year,
-    month
-  } = fromMonthIndex(monthIndex);
+    calendar
+  } = monthModel;
+  const month = useMemo(() => monthModel.monthAt(monthIndex), [monthModel, monthIndex]);
   const {
     weeks
   } = useCalendarDays({
-    year,
-    month,
+    ...calendarYearMonthOf(calendar, month),
+    calendar,
     weekStartsOn,
     // Always six rows: a variable grid would make pane heights differ, and
     // with them every snap offset below this month.
     hasVariableRowCount: false
   });
-  const monthLabel = plainDateFormatStandaloneMonthYear({
-    year,
-    month,
-    day: 1
-  }, locale);
+  const monthLabel = formatCalendarMonthLabel(calendar, month, 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
   // owns one, else the selection, else the first of the month.
   const tabbableISO = (() => {
-    if (focusedDate != null && focusedDate.year === year && focusedDate.month === month) {
+    if (focusedDate != null && isInCalendarMonth(focusedDate, month)) {
       return plainDateToISO(focusedDate);
     }
-    if (selectedDate != null && selectedDate.year === year && selectedDate.month === month) {
+    if (selectedDate != null && isInCalendarMonth(selectedDate, month)) {
       return plainDateToISO(selectedDate);
     }
-    return plainDateToISO({
-      year,
-      month,
-      day: 1
-    });
+    return plainDateToISO(month.start);
   })();
   return /*#__PURE__*/_jsx("div", {
     role: "grid",
@@ -759,7 +756,7 @@ function MonthPane({
             "data-date": day.iso,
             "data-outside": day.isOutside ? '' : undefined,
             tabIndex: day.iso === tabbableISO ? 0 : -1,
-            "aria-label": plainDateFormat(day.date, DATE_FORMAT_WITH_WEEKDAY, locale),
+            "aria-label": formatCalendarDate(calendar, day.date, DATE_FORMAT_WITH_WEEKDAY, locale),
             "aria-disabled": isDisabled || undefined,
             "aria-current": isToday ? 'date' : undefined,
             onClick: () => {

package/dist/DateInput/MonthYearWheels.d.ts

@@ -1,4 +1,7 @@
+import { type MonthModel } from './monthGeometry.js';
 export interface MonthYearWheelsProps {
+    /** The calendar's months, by index. */
+    monthModel: MonthModel;
     /** The month the wheels currently show. */
     monthIndex: number;
     /** First reachable month. */
@@ -13,11 +16,17 @@ export interface MonthYearWheelsProps {
     yearLabel: string;
     /** False while the panel is hidden. */
     isActive?: boolean;
+    /**
+     * The day of the month the picker keeps, such as the selected date's. A year
+     * that spans an era change is labeled with the era of this day in the
+     * selected month. The first day of the month applies when it is absent.
+     */
+    keptDay?: number;
 }
 /**
  * Month and year wheels, bounded by the same range as the scroller.
  */
-export declare function MonthYearWheels({ monthIndex, minMonthIndex, maxMonthIndex, onChange, monthLabel, yearLabel, isActive, }: MonthYearWheelsProps): import("react").JSX.Element;
+export declare function MonthYearWheels({ monthModel, monthIndex, minMonthIndex, maxMonthIndex, onChange, monthLabel, yearLabel, isActive, keptDay, }: MonthYearWheelsProps): import("react").JSX.Element;
 export declare namespace MonthYearWheels {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"MonthYearWheels.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthYearWheels.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAAa,KAAK,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAU5D,MAAM,WAAW,oBAAoB;IACnC,uCAAuC;IACvC,UAAU,EAAE,UAAU,CAAC;IACvB,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;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,UAAU,EACV,aAAa,EACb,aAAa,EACb,QAAQ,EACR,UAAU,EACV,SAAS,EACT,QAAe,EACf,OAAW,GACZ,EAAE,oBAAoB,+BAmFtB;yBA7Fe,eAAe"}

package/dist/DateInput/MonthYearWheels.js

@@ -4,8 +4,10 @@
 
 /**
  * @file MonthYearWheels.tsx
- * @input A month index, the reachable month bounds, a change callback
- * @output Exports MonthYearWheels — the month + year wheel pair
+ * @input A calendar's month model, a month index, the reachable month bounds,
+ *   a change callback
+ * @output Exports MonthYearWheels — the month wheel of a calendar year and the
+ *   year wheel with era labels
  * @position Internal component; consumed by TouchDateField.tsx
  *
  * The shortcut out of continuous scrolling. Scrolling is the right gesture for
@@ -23,72 +25,81 @@
  */
 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 { useLocale } from "../i18n/useLocale.js";
+import { calendarYearSpansEras, formatCalendarMonthName, formatCalendarYearLabel } from "../utils/calendarSystem.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import "./tokens.stylex.js";
 import { dateInputTouchGeometry } from "./tokens.stylex.js";
 import { Wheel } from "./Wheel.js";
-import { fromMonthIndex, toMonthIndex } from "./monthGeometry.js";
+import { clampIndex } from "./monthGeometry.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Month and year wheels, bounded by the same range as the scroller.
  */
 export function MonthYearWheels({
+  monthModel,
   monthIndex,
   minMonthIndex,
   maxMonthIndex,
   onChange,
   monthLabel,
   yearLabel,
-  isActive = true
+  isActive = true,
+  keptDay = 1
 }) {
   const locale = useLocale();
+  const {
+    calendar
+  } = monthModel;
   const {
     year,
     month
-  } = fromMonthIndex(monthIndex);
-
-  // Day 15 of a fixed year: no timezone can push it into an adjacent month
-  // the way day 1 or day 31 can.
-  //
-  // `plainDateFormat` rather than a raw `Intl.DateTimeFormat`, which the
-  // shared lint rule forbids and which would duplicate the format vocabulary
-  // 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, locale)), [locale]);
+  } = monthModel.yearMonthAt(monthIndex);
 
   // Months outside the range stay on the wheel rather than vanishing: a list
-  // whose length changes with the year would jump under the finger.
-  const monthOptions = useMemo(() => monthNames.map((name, index) => {
-    const candidate = toMonthIndex(year, index + 1);
+  // whose length changed with the range would jump under the finger. Only the
+  // calendar changes its length, for a year with a leap month.
+  const monthOptions = useMemo(() => Array.from({
+    length: monthModel.monthsInYear(year)
+  }, (_, index) => {
+    const candidate = monthModel.indexOfYearMonth(year, index + 1);
     return {
       value: index + 1,
-      label: name,
+      label: formatCalendarMonthName(calendar, monthModel.monthAt(candidate), locale),
       isDisabled: candidate < minMonthIndex || candidate > maxMonthIndex
     };
-  }), [monthNames, year, minMonthIndex, maxMonthIndex]);
-  const yearOptions = useMemo(() => {
-    const first = fromMonthIndex(minMonthIndex).year;
-    const last = fromMonthIndex(maxMonthIndex).year;
-    const options = [];
+  }), [monthModel, calendar, year, locale, minMonthIndex, maxMonthIndex]);
+
+  // Every listed year holds a reachable month: the list runs from the year of
+  // the first reachable month to the year of the last.
+  const years = useMemo(() => {
+    const first = monthModel.yearMonthAt(minMonthIndex).year;
+    const last = monthModel.yearMonthAt(maxMonthIndex).year;
+    const result = [];
     for (let candidate = first; candidate <= last; candidate++) {
-      options.push({
+      result.push({
         value: candidate,
-        label: String(candidate),
-        // A year is reachable when any of its months is.
-        isDisabled: toMonthIndex(candidate, 12) < minMonthIndex || toMonthIndex(candidate, 1) > maxMonthIndex
+        label: formatCalendarYearLabel(calendar, candidate, locale),
+        spansEras: calendarYearSpansEras(calendar, candidate, locale)
       });
     }
-    return options;
-  }, [minMonthIndex, maxMonthIndex]);
+    return result;
+  }, [monthModel, calendar, locale, minMonthIndex, maxMonthIndex]);
+
+  // A year with an era change takes the era of the shown date, as iOS does.
+  // Its row text changes as the month turns. Each row keeps one fixed size.
+  const yearOptions = useMemo(() => years.map(({
+    value,
+    label,
+    spansEras
+  }) => ({
+    value,
+    label: spansEras ? formatCalendarYearLabel(calendar, value, locale, {
+      month,
+      day: keptDay
+    }) : label
+  })), [years, calendar, locale, month, keptDay]);
   return /*#__PURE__*/_jsxs("div", {
     ...{
       className: "x78zum5 xm8gem x1txdalj"
@@ -98,17 +109,18 @@ export function MonthYearWheels({
       options: monthOptions,
       value: month,
       isActive: isActive,
-      onChange: nextMonth => onChange(toMonthIndex(year, nextMonth))
+      onChange: nextMonth => onChange(monthModel.indexOfYearMonth(year, nextMonth))
     }), /*#__PURE__*/_jsx(Wheel, {
       label: yearLabel,
       options: yearOptions,
       value: year,
       isActive: isActive,
       onChange: nextYear => {
-        // Jan 31 -> Feb has no equivalent here (months carry no day), but a
-        // year change can still land outside the range; clamp to it.
-        const candidate = toMonthIndex(nextYear, month);
-        onChange(Math.min(Math.max(candidate, minMonthIndex), maxMonthIndex));
+        // The same month of the new year, or its common counterpart when
+        // the new year lacks a leap month (Adar I becomes Adar). A year
+        // change can still land outside the range; clamp to it.
+        const candidate = monthModel.shiftYears(monthIndex, nextYear - year);
+        onChange(clampIndex(candidate, minMonthIndex, maxMonthIndex));
       }
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"file":"PickerWheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/PickerWheel.tsx"],"names":[],"mappings":"AA2DA,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AA2HxB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,EACf,GAAG,GACJ,EAAE,UAAU,+BAuiBZ;yBA9iBe,WAAW"}
+{"version":3,"file":"PickerWheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/PickerWheel.tsx"],"names":[],"mappings":"AA2DA,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAgIxB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,EACf,GAAG,GACJ,EAAE,UAAU,+BAuiBZ;yBA9iBe,WAAW"}

package/dist/DateInput/PickerWheel.js

@@ -46,6 +46,12 @@ const ROW_HEIGHT = WHEEL_ROW_HEIGHT;
 const UIKIT_SCALE = ROW_HEIGHT / picker.geometry.rowHeight;
 /** UIKit's rubber band dimension for the picker's table, at that pitch. */
 const RUBBER_BAND_DIMENSION = picker.geometry.rubberBandDimension * UIKIT_SCALE;
+
+/**
+ * The rows' opacity at the column's edges. At 0.7 the row four from the band
+ * keeps 5:1 or more in every shipped theme, a margin over WCAG AA's 4.5:1.
+ */
+const FADE_FLOOR = 0.7;
 const _temp = {
   k87sOh: "x5mnzd7",
   "$$css": true
@@ -587,7 +593,7 @@ export function PickerWheel({
     children: /*#__PURE__*/_jsxs("div", {
       "data-wheel-fade": "",
       ...{
-        className: "x10l6tqk x10a8y8t x47corl xheapza"
+        className: "x10l6tqk x10a8y8t x47corl xsshixw"
       },
       children: [/*#__PURE__*/_jsx("div", {
         "aria-hidden": "true",

package/dist/DateInput/TouchDateField.d.ts

@@ -3,7 +3,7 @@ import type { DateInputProps } from './DateInput.js';
  * The touch surface. Takes `DateInput`'s props verbatim; see
  * {@link DateInput} for when it is chosen over the desktop control.
  */
-export declare function TouchDateField({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, placeholder: placeholderFromProps, size: sizeProp, status, statusVariant, labelTooltip, hasClear, numberOfMonths: _numberOfMonths, weekStartsOn: weekStartsOnProp, format, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, ref, ...restProps }: DateInputProps): import("react").JSX.Element;
+export declare function TouchDateField({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, placeholder: placeholderFromProps, size: sizeProp, status, statusVariant, labelTooltip, hasClear, numberOfMonths: _numberOfMonths, weekStartsOn: weekStartsOnProp, format, calendar: calendarProp, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, ref, ...restProps }: DateInputProps): import("react").JSX.Element;
 export declare namespace TouchDateField {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAuehD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAIhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,MAAoB,EACpB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BAuvBhB;yBA3xBe,cAAc"}
+{"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AA0ehD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAIhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,MAAoB,EACpB,QAAQ,EAAE,YAAY,EACtB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BA+wBhB;yBApzBe,cAAc"}

package/dist/DateInput/TouchDateField.js

@@ -4,7 +4,7 @@
 
 /**
  * @file TouchDateField.tsx
- * @input Uses React, Field, BottomSheet, Button, Icon, Calendar hooks, MonthScroller, MonthYearWheels
+ * @input Uses React, Field, BottomSheet, Button, Icon, Calendar hooks, the resolved calendar, MonthScroller, MonthYearWheels
  * @output Exports TouchDateField — the touch surface behind DateInput
  * @position Internal component; consumed by DateInput.tsx
  *
@@ -70,8 +70,10 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, sizeVars, borderVars, fontWeightVars, typeScaleVars, typographyVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
-import { focusOutlineStyles, getInputARIA, isImeKeyEvent, mergeProps, rtlStyles, themeProps, formatSharedDate, plainDateFromISO, plainDateToday } from "../utils/index.js";
-import { plainDateFormatStandaloneMonthYear } from "../utils/plainDate.js";
+import { focusOutlineStyles, getInputARIA, isImeKeyEvent, mergeProps, rtlStyles, themeProps, plainDateFromISO, plainDateToday } from "../utils/index.js";
+import { useCalendarSystem } from "../i18n/useCalendarSystem.js";
+import { calendarDayOfMonth, formatCalendarMonthLabel } from "../utils/calendarSystem.js";
+import { formatCalendarDateText } from "../utils/calendarDateParser.js";
 import { chainEventHandlers } from "../utils/chainEventHandlers.js";
 import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { usePressFeedback } from "../hooks/usePressFeedback.js";
@@ -79,7 +81,7 @@ import { normalizeDayOfWeek } from "../utils/dateTypes.js";
 import { getWeekdayHeaders } from "../Calendar/getWeekdayHeaderNames.js";
 import { MonthScroller } from "./MonthScroller.js";
 import { MonthYearWheels } from "./MonthYearWheels.js";
-import { DEFAULT_MONTH_REACH, clampIndex, fromMonthIndex, monthIndexOf } from "./monthGeometry.js";
+import { DEFAULT_MONTH_REACH, clampIndex, createMonthModel } from "./monthGeometry.js";
 import "./tokens.stylex.js";
 import { dateInputTouchSizes, dateInputTouchGeometry } from "./tokens.stylex.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
@@ -233,6 +235,7 @@ export function TouchDateField({
   numberOfMonths: _numberOfMonths,
   weekStartsOn: weekStartsOnProp = 0,
   format = 'date_long',
+  calendar: calendarProp,
   width,
   containerXstyle,
   containerClassName,
@@ -269,6 +272,8 @@ export function TouchDateField({
   const placeholder = placeholderFromProps ?? t('@astryx.dateInput.placeholder');
   const size = useSize(sizeProp, 'md');
   const weekStartsOn = normalizeDayOfWeek(weekStartsOnProp);
+  const calendar = useCalendarSystem(calendarProp, 'DateInput');
+  const monthModel = useMemo(() => createMonthModel(calendar), [calendar]);
   const generatedID = useId();
   const id = idProp ?? generatedID;
   const fieldLabelID = useId();
@@ -336,25 +341,22 @@ export function TouchDateField({
   // century in each direction from wherever it opened. Anchored once, in a
   // state initializer: recomputing it as the selection moves would shift every
   // pane's scroll offset under the user mid-gesture.
-  const [anchorMonthIndex] = useState(() => monthIndexOf(value != null && /^\d{4}-\d{2}-\d{2}$/.test(value) ? plainDateFromISO(value) : plainDateToday()));
-  const minMonthIndex = min != null ? monthIndexOf(plainDateFromISO(min)) : anchorMonthIndex - DEFAULT_MONTH_REACH;
-  const maxMonthIndex = max != null ? monthIndexOf(plainDateFromISO(max)) : anchorMonthIndex + DEFAULT_MONTH_REACH;
+  // Indexes belong to the calendar, so DateInput remounts this surface when
+  // the calendar changes.
+  const [anchorMonthIndex] = useState(() => monthModel.indexOf(value != null && /^\d{4}-\d{2}-\d{2}$/.test(value) ? plainDateFromISO(value) : plainDateToday()));
+  const minMonthIndex = min != null ? monthModel.indexOf(plainDateFromISO(min)) : anchorMonthIndex - DEFAULT_MONTH_REACH;
+  const maxMonthIndex = max != null ? monthModel.indexOf(plainDateFromISO(max)) : anchorMonthIndex + DEFAULT_MONTH_REACH;
   const [monthIndex, setMonthIndex] = useState(() => clampIndex(anchorMonthIndex, minMonthIndex, maxMonthIndex));
-  const {
-    year,
-    month
-  } = fromMonthIndex(monthIndex);
   const weekdayHeaders = useMemo(() => getWeekdayHeaders(locale, weekStartsOn), [locale, weekStartsOn]);
-  const monthYearLabel = plainDateFormatStandaloneMonthYear({
-    year,
-    month,
-    day: 1
-  }, locale);
+  // The day the picker keeps: the selected date's day of its month. A month
+  // with an era change takes its heading era from this day.
+  const keptDay = selectedDate == null ? 1 : calendarDayOfMonth(calendar, selectedDate);
+  const monthYearLabel = formatCalendarMonthLabel(calendar, monthModel.monthAt(monthIndex), locale, keptDay);
 
   // Formats the committed value only. A function format is called with the ISO
-  // value; a named one reuses Timestamp's shared date mapping, so the same
-  // literal renders the same shape here and on the desktop control.
-  const displayValue = optimisticValue != null && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue) ? typeof format === 'function' ? format(optimisticValue) : formatSharedDate(plainDateFromISO(optimisticValue), format, locale) : '';
+  // value; a named one writes the date in the calendar exactly as the desktop
+  // control commits it.
+  const displayValue = optimisticValue != null && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue) ? typeof format === 'function' ? format(optimisticValue) : formatCalendarDateText(plainDateFromISO(optimisticValue), format, locale, calendar) : '';
   const fireChange = useCallback(newValue => {
     if (isEffectivelyDisabled) {
       return;
@@ -429,7 +431,7 @@ export function TouchDateField({
       return;
     }
     fireChange(undefined);
-    const currentMonth = monthIndexOf(today);
+    const currentMonth = monthModel.indexOf(today);
     if (currentMonth < minMonthIndex || currentMonth > maxMonthIndex) {
       return;
     }
@@ -438,7 +440,7 @@ export function TouchDateField({
     }
     setMonthIndex(currentMonth);
     scrollerHandleRef.current?.scrollToMonth(currentMonth, 'smooth');
-  }, [isDisabled, fireChange, today, monthIndex, minMonthIndex, maxMonthIndex]);
+  }, [isDisabled, fireChange, monthModel, today, monthIndex, minMonthIndex, maxMonthIndex]);
 
   // Selection commits on the tap and leaves the sheet up, so a mistake can be
   // corrected in place and a nearby date reconsidered without reopening.
@@ -696,6 +698,7 @@ export function TouchDateField({
         }[!!isWheelOpen << 0],
         children: /*#__PURE__*/_jsx(MonthScroller, {
           handleRef: scrollerHandleRef,
+          monthModel: monthModel,
           minMonthIndex: minMonthIndex,
           maxMonthIndex: maxMonthIndex,
           initialMonthIndex: monthIndex,
@@ -718,7 +721,9 @@ export function TouchDateField({
           }
         }[!!!isWheelOpen << 0],
         children: /*#__PURE__*/_jsx(MonthYearWheels, {
+          monthModel: monthModel,
           monthIndex: monthIndex,
+          keptDay: keptDay,
           minMonthIndex: minMonthIndex,
           maxMonthIndex: maxMonthIndex,
           onChange: handleWheelChange,

package/dist/DateInput/monthGeometry.d.ts

@@ -1,20 +1,23 @@
 /**
  * @file monthGeometry.ts
- * @input PlainDate values, scroll offsets, pane heights
- * @output Pure month-index arithmetic and the virtualized pane window
- * @position Internal helper; consumed by MonthScroller.tsx and DateInput.tsx
+ * @input PlainDate values, a calendar system, scroll offsets, pane heights
+ * @output Month-index arithmetic for a calendar and the virtualized pane window
+ * @position Internal helper; consumed by the touch date surfaces
  *
- * A "month index" is a single integer that totally orders calendar months:
- * `year * 12 + (month - 1)`. The scroller is a list of equal-width panes, so
- * one integer converts freely between a month, a row in that list, and a
- * scroll offset — which is the whole trick behind continuous scrolling.
+ * A "month index" is a single integer that totally orders calendar months. In
+ * the Gregorian-aligned calendars it is `year * 12 + (month - 1)`; in the
+ * others it counts calendar months from a fixed month, because their years
+ * have 12 or 13 months. The scroller is a list of equal-width panes, so one
+ * integer converts freely between a month, a row in that list, and a scroll
+ * offset — which is the whole trick behind continuous scrolling.
  *
  * These are pure functions on purpose: the scroll math is the part most likely
  * to be wrong, and it is testable without a layout engine.
  *
  * SYNC: When modified, update DateInputTouch.test.tsx.
  */
-import type { PlainDate } from '../utils/index.js';
+import type { PlainDate } from '../utils/dateTypes.js';
+import { type CalendarMonth, type CalendarSystem } from '../utils/calendarSystem.js';
 /** How many months are reachable in either direction when unbounded. */
 export declare const DEFAULT_MONTH_REACH = 600;
 /** `year * 12 + (month - 1)`, for a 1-based month. */
@@ -62,4 +65,35 @@ export interface PaneWindow {
 export declare function paneWindow(centerRow: number, rowCount: number, overscan: number): PaneWindow;
 /** `[start, end]` inclusive, as an array of rows. */
 export declare function rowsIn({ start, end }: PaneWindow): number[];
+/**
+ * Month indexes for one calendar. Years and month positions are the ones
+ * `calendarMonthOfYear` counts.
+ */
+export interface MonthModel {
+    readonly calendar: CalendarSystem;
+    /** The index of the calendar month that contains a date. */
+    indexOf: (date: PlainDate) => number;
+    /** The calendar month at an index. */
+    monthAt: (index: number) => CalendarMonth;
+    /** The calendar year of an index and the month's position in it. */
+    yearMonthAt: (index: number) => {
+        year: number;
+        month: number;
+    };
+    /** The index of a month position in a calendar year. */
+    indexOfYearMonth: (year: number, month: number) => number;
+    /** The number of months in a calendar year. */
+    monthsInYear: (year: number) => number;
+    /**
+     * The index `years` calendar years from `index`, in the same month. A leap
+     * month that the target year does not have becomes its common counterpart.
+     */
+    shiftYears: (index: number, years: number) => number;
+}
+/**
+ * The month model of a calendar. A calendar that needs Temporal must be
+ * available in this runtime; `useCalendarSystem` resolves one that is not to
+ * `gregory`.
+ */
+export declare function createMonthModel(calendar: CalendarSystem): MonthModel;
 //# sourceMappingURL=monthGeometry.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"monthGeometry.d.ts","sourceRoot":"","sources":["../../src/DateInput/monthGeometry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AAExC,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAEvC,sDAAsD;AACtD,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhE;AAED,sCAAsC;AACtC,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAEpD;AAED,iEAAiE;AACjE,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAK3E;AAED,uCAAuC;AACvC,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE1E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,OAAe,GACrB,MAAM,CAMR;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,OAAe,GACrB,MAAM,CAGR;AAED,MAAM,WAAW,UAAU;IACzB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CACxB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,GACf,UAAU,CAKZ;AAED,qDAAqD;AACrD,wBAAgB,MAAM,CAAC,EAAC,KAAK,EAAE,GAAG,EAAC,EAAE,UAAU,GAAG,MAAM,EAAE,CAMzD"}
+{"version":3,"file":"monthGeometry.d.ts","sourceRoot":"","sources":["../../src/DateInput/monthGeometry.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,cAAc,EASpB,MAAM,yBAAyB,CAAC;AAEjC,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAEvC,sDAAsD;AACtD,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhE;AAED,sCAAsC;AACtC,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAEpD;AAED,iEAAiE;AACjE,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAK3E;AAED,uCAAuC;AACvC,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE1E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,OAAe,GACrB,MAAM,CAMR;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,OAAe,GACrB,MAAM,CAGR;AAED,MAAM,WAAW,UAAU;IACzB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CACxB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,GACf,UAAU,CAKZ;AAED,qDAAqD;AACrD,wBAAgB,MAAM,CAAC,EAAC,KAAK,EAAE,GAAG,EAAC,EAAE,UAAU,GAAG,MAAM,EAAE,CAMzD;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,4DAA4D;IAC5D,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,MAAM,CAAC;IACrC,sCAAsC;IACtC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC;IAC1C,oEAAoE;IACpE,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC;IAC9D,wDAAwD;IACxD,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D,+CAA+C;IAC/C,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC;;;OAGG;IACH,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACtD;AAwDD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,cAAc,GAAG,UAAU,CAIrE"}