@astryxdesign/core 0.7.9-canary.2ea8f68 → 0.7.9-canary.45f77d0

package/dist/Calendar/Calendar.d.ts

@@ -1,4 +1,5 @@
 import type { BaseProps } from '../BaseProps.js';
+import { type CalendarSystem } from '../utils/calendarSystem.js';
 export type { ISODateString, DayOfWeek, DayOfWeekName, DateRange, } from '../utils/dateTypes.js';
 import type { ISODateString, DayOfWeek, DayOfWeekName, DateRange } from '../utils/dateTypes.js';
 /** Imperative handle for Calendar handleRef */
@@ -56,12 +57,14 @@ interface CalendarBaseProps extends Omit<BaseProps<HTMLDivElement>, 'onChange' |
      */
     hasOutsideDays?: boolean;
     /**
-     * Show ISO week numbers in a side column.
+     * Show ISO 8601 week numbers in a side column. They are ISO 8601 week
+     * numbers in every calendar system.
      * Default: false
      */
     hasWeekNumbers?: boolean;
     /**
-     * Use variable rows per month vs. fixed 6-row grid.
+     * Give each month only the rows it needs instead of a fixed 6-row grid.
+     * The fixed grid keeps the same height from month to month.
      * Default: false (fixed 6 rows for consistent height)
      */
     hasVariableRowCount?: boolean;
@@ -71,6 +74,15 @@ interface CalendarBaseProps extends Omit<BaseProps<HTMLDivElement>, 'onChange' |
      * Default: 0 (Sunday)
      */
     weekStartsOn?: DayOfWeek | DayOfWeekName;
+    /**
+     * The calendar system the grid shows, such as `'persian'` or `'hebrew'`.
+     * It sets the months, their labels, and month and year navigation. `value`,
+     * `min`, `max`, `focusDate`, and every callback stay Gregorian ISO dates.
+     * Default: the `InternationalizationProvider` calendar, else Gregorian.
+     * Calendars other than `gregory`, `iso8601`, `buddhist`, `roc`, and
+     * `japanese` need `Temporal`; without it the grid shows Gregorian months.
+     */
+    calendar?: CalendarSystem;
 }
 interface CalendarSingleProps extends CalendarBaseProps {
     /** Selection mode */

package/dist/Calendar/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0D5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAgB5B,+CAA+C;AAC/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,mFAAmF;IACnF,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAE7B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAEzB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAqBrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BAkhBtD;yBAlhBe,QAAQ"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,EAEL,KAAK,cAAc,EASpB,MAAM,yBAAyB,CAAC;AAoBjC,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAiB5B,+CAA+C;AAC/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IAEzC;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,mFAAmF;IACnF,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAE7B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAEzB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AA4BrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BAogBtD;yBApgBe,QAAQ"}

package/dist/Calendar/Calendar.js

@@ -22,10 +22,11 @@ import * as stylex from '@stylexjs/stylex';
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
 import { useAnnounce, useGridFocus } from "../hooks/index.js";
-import { useCalendarDays, useCalendarConstraints } from "./hooks/index.js";
+import { useCalendarConstraints } from "./hooks/index.js";
+import { useCalendarDays } from "./hooks/useCalendarDays.js";
 import { calendarStyles, monthGridStyles, dayCellStyles, dayCellTheme } from "./styles.js";
-import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateDiffDays, getDaysInMonth, plainDateIsAfter, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, plainDateWeekFieldName, DATE_FORMAT_WITH_WEEKDAY } from "../utils/plainDate.js";
-import { plainDateFormatDayNumber, plainDateFormatStandaloneMonthYear } from "../utils/plainDate.js";
+import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateToday, plainDateAddDays, plainDateDiffDays, plainDateIsAfter, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateWeekFieldName, plainDateFormatDayNumber, DATE_FORMAT_WITH_WEEKDAY } from "../utils/plainDate.js";
+import { calendarAddMonths, calendarMonthOf, calendarShiftMonths, calendarShiftYears, calendarYearMonthOf, formatCalendarDate, formatCalendarMonthLabel, isInCalendarMonth } from "../utils/calendarSystem.js";
 import { mergeProps, composeEventHandlers, rtlStyles } from "../utils/index.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
@@ -41,13 +42,14 @@ import { computeDayCellState, computeRangeRounding, computePreviewRounding, comp
 import { normalizeDayOfWeek } from "../utils/dateTypes.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useLocale } from "../i18n/index.js";
+import { useCalendarSystem } from "../i18n/useCalendarSystem.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/Calendar/Calendar.generated.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 registerEnglishFallback(english);
 
-/** How a month navigation moves the focused day: by its row offset in days, or by whole months or years. */
+/** How a month navigation moves the focused day: by its row offset in days, or by whole calendar months or years. */
 
 /** Imperative handle for Calendar handleRef */
 
@@ -55,15 +57,9 @@ registerEnglishFallback(english);
 
 // ─── Mode-specific Props (discriminated union) ────────────────
 
-/** The first day of `month`'s month that `isDisabled` allows, or null. */
 function firstEnabledDayOfMonth(month, isDisabled) {
-  const days = getDaysInMonth(month.year, month.month);
-  for (let day = 1; day <= days; day += 1) {
-    const pd = {
-      year: month.year,
-      month: month.month,
-      day
-    };
+  for (let offset = 0; offset < month.length; offset += 1) {
+    const pd = plainDateAddDays(month.start, offset);
     if (!isDisabled(pd)) {
       return pd;
     }
@@ -71,6 +67,11 @@ function firstEnabledDayOfMonth(month, isDisabled) {
   return null;
 }
 
+/** A day's full label, such as "Friday, Aban 8, 1405 AP", in the calendar. */
+function formatDateLabel(date, calendar, locale) {
+  return formatCalendarDate(calendar, date, DATE_FORMAT_WITH_WEEKDAY, locale);
+}
+
 // =============================================================================
 // Main Component
 // =============================================================================
@@ -107,12 +108,14 @@ export function Calendar({
     hasWeekNumbers = false,
     hasVariableRowCount = false,
     weekStartsOn: weekStartsOnProp = 0,
+    calendar: calendarProp,
     xstyle,
     className,
     style,
     onKeyDown,
     ...rest
   } = props;
+  const calendar = useCalendarSystem(calendarProp, 'Calendar');
 
   // Normalize `weekStartsOn` (number or three-letter day name) to a numeric
   // DayOfWeek so all downstream date math keeps working with an index.
@@ -150,7 +153,8 @@ export function Calendar({
     min,
     max,
     numberOfMonths,
-    today
+    today,
+    calendar
   }));
 
   // Use controlled focusDate if callback is provided, otherwise use internal state
@@ -168,19 +172,20 @@ export function Calendar({
     }
   }), [isControlledFocus, onFocusDateChange]);
 
-  // Base month (first day of focus month)
-  const baseMonth = useMemo(() => {
-    return plainDateSetFirstOfMonth(focusDate);
-  }, [focusDate]);
+  // A controlled focus date is a new object on each render. Key the memo on
+  // its ISO string.
+  const focusIso = plainDateToISO(focusDate);
+  const baseMonth = useMemo(() => calendarMonthOf(calendar, plainDateFromISO(focusIso)), [calendar, focusIso]);
 
   // Generate visible months
   const visibleMonths = useMemo(() => {
     return Array.from({
       length: numberOfMonths
     }, (_, i) => {
-      return plainDateAddMonths(baseMonth, i);
+      return calendarAddMonths(calendar, baseMonth, i);
     });
-  }, [baseMonth, numberOfMonths]);
+  }, [calendar, baseMonth, numberOfMonths]);
+  const lastVisibleMonth = visibleMonths[visibleMonths.length - 1];
 
   // A pending target is claimed by the grid that shows its month, or dropped
   // by the next focus move that is not onto the target day: when a controlled
@@ -194,7 +199,7 @@ export function Calendar({
       return null;
     }
     const target = plainDateFromISO(pendingFocus);
-    return visibleMonths.some(pd => pd.year === target.year && pd.month === target.month) ? pendingFocus : null;
+    return visibleMonths.some(month => isInCalendarMonth(target, month)) ? pendingFocus : null;
   }, [pendingFocus, visibleMonths]);
   const handleRootBlur = useCallback(e => {
     // Only the move onto the target day itself keeps the target: an arrow
@@ -209,7 +214,7 @@ export function Calendar({
   // Format month header
   // Each month is its own stand-alone label, so each starts with a capital
   // where the locale capitalizes one (FR1).
-  const monthYearLabel = useMemo(() => visibleMonths.map(m => plainDateFormatStandaloneMonthYear(m, locale)).join(' – '), [visibleMonths, locale]);
+  const monthYearLabel = useMemo(() => visibleMonths.map(m => formatCalendarMonthLabel(calendar, m, locale)).join(' – '), [calendar, visibleMonths, locale]);
 
   // Announce the newly visible month to screen readers whenever it changes.
   // The visible month label (`<span>`) carries no live semantics, so paging the
@@ -233,23 +238,10 @@ export function Calendar({
   // Determine if prev/next navigation is possible based on min/max
   const minDateForKeys = useMemo(() => min ? plainDateFromISO(min) : null, [min]);
   const maxDateForKeys = useMemo(() => max ? plainDateFromISO(max) : null, [max]);
-  const canNavigatePrevious = useMemo(() => {
-    if (!min) {
-      return true;
-    }
-    const minDate = plainDateFromISO(min);
-    // Can't go back if min is in the current focus month
-    return minDate.year < baseMonth.year || minDate.year === baseMonth.year && minDate.month < baseMonth.month;
-  }, [min, baseMonth]);
-  const canNavigateNext = useMemo(() => {
-    if (!max) {
-      return true;
-    }
-    const maxDate = plainDateFromISO(max);
-    // Check against the last visible month, not just baseMonth
-    const lastVisibleMonth = plainDateAddMonths(baseMonth, numberOfMonths - 1);
-    return maxDate.year > lastVisibleMonth.year || maxDate.year === lastVisibleMonth.year && maxDate.month > lastVisibleMonth.month;
-  }, [max, baseMonth, numberOfMonths]);
+
+  // A month button is available while a day past the shown months is in range.
+  const canNavigatePrevious = minDateForKeys == null || plainDateIsBefore(minDateForKeys, baseMonth.start);
+  const canNavigateNext = maxDateForKeys == null || plainDateIsAfter(maxDateForKeys, lastVisibleMonth.end);
 
   // Navigation handlers
   // The same constraint view the grids use, so a key can resolve its target
@@ -266,16 +258,12 @@ export function Calendar({
     rangeAnchor: rootRangeAnchor
   });
   const navigateMonth = useCallback((delta, focusedDate, offset, unit = 'days') => {
-    const monthIndex = pd => pd.year * 12 + pd.month;
-    const firstShown = monthIndex(baseMonth);
-    const lastShown = firstShown + numberOfMonths - 1;
-
     // The Previous/Next buttons move the month with no focused day.
     if (!focusedDate) {
       if (delta < 0 && !canNavigatePrevious || delta > 0 && !canNavigateNext) {
         return;
       }
-      const newPd = plainDateAddMonths(baseMonth, delta);
+      const newPd = calendarAddMonths(calendar, baseMonth, delta).start;
       if (onFocusDateChange) {
         onFocusDateChange(plainDateToISO(newPd));
       } else {
@@ -293,15 +281,15 @@ export function Calendar({
     const inRange = pd => !(minDateForKeys && plainDateIsBefore(pd, minDateForKeys)) && !(maxDateForKeys && plainDateIsAfter(pd, maxDateForKeys));
     let targetPd;
     if (unit === 'months' || unit === 'years') {
-      // A page or a year step keeps the day of the month and clamps it to the
-      // target month's length. A month with no enabled day is no target, the
-      // same as for an arrow.
-      const candidate = plainDateAddMonths(currentPd, unit === 'years' ? delta * 12 : delta);
+      // A page or a year step keeps the day of the calendar month and clamps
+      // it to the target month's length. A month with no enabled day is no
+      // target, the same as for an arrow.
+      const candidate = unit === 'years' ? calendarShiftYears(calendar, currentPd, delta) : calendarShiftMonths(calendar, currentPd, delta);
       if (!inRange(candidate)) {
         return;
       }
       if (isRootDateDisabled(candidate)) {
-        const firstEnabled = firstEnabledDayOfMonth(candidate, isRootDateDisabled);
+        const firstEnabled = firstEnabledDayOfMonth(calendarMonthOf(calendar, candidate), isRootDateDisabled);
         if (firstEnabled == null) {
           return;
         }
@@ -336,23 +324,19 @@ export function Calendar({
     // key's direction, so the target month becomes the first (backwards)
     // or last (forwards) month shown.
     const resolved = targetPd;
-    const targetMonth = monthIndex(resolved);
     setPendingFocus(plainDateToISO(resolved));
-    if (targetMonth >= firstShown && targetMonth <= lastShown) {
+    const isBeforeShown = plainDateIsBefore(resolved, baseMonth.start);
+    if (!isBeforeShown && !plainDateIsAfter(resolved, lastVisibleMonth.end)) {
       return;
     }
-    const targetFirst = {
-      year: resolved.year,
-      month: resolved.month,
-      day: 1
-    };
-    const newPd = targetMonth < firstShown ? targetFirst : plainDateAddMonths(targetFirst, -(numberOfMonths - 1));
+    const targetMonth = calendarMonthOf(calendar, resolved);
+    const newPd = isBeforeShown ? targetMonth.start : calendarAddMonths(calendar, targetMonth, -(numberOfMonths - 1)).start;
     if (onFocusDateChange) {
       onFocusDateChange(plainDateToISO(newPd));
     } else {
       setInternalFocusDate(newPd);
     }
-  }, [baseMonth, canNavigateNext, canNavigatePrevious, isRootDateDisabled, maxDateForKeys, minDateForKeys, numberOfMonths, onFocusDateChange]);
+  }, [baseMonth, calendar, canNavigateNext, canNavigatePrevious, isRootDateDisabled, lastVisibleMonth, maxDateForKeys, minDateForKeys, numberOfMonths, onFocusDateChange]);
 
   // Escape key handler to cancel range selection
   const handleCalendarKeyDown = useCallback(e => {
@@ -378,7 +362,7 @@ export function Calendar({
         // progress through the same polite live region.
         setRangeSelectionStart(iso);
         announce(t('@astryx.calendar.rangeStartAnnounce', {
-          date: plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY, locale)
+          date: formatDateLabel(date, calendar, locale)
         }));
       } else {
         // Second click - complete the range
@@ -392,7 +376,7 @@ export function Calendar({
         if (plainDateIsEqual(date, startPd) && (minRangeSpan ?? 1) > 1) {
           setRangeSelectionStart(null);
           announce(t('@astryx.calendar.rangeClearedAnnounce', {
-            date: plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY, locale)
+            date: formatDateLabel(date, calendar, locale)
           }));
           return;
         }
@@ -417,12 +401,12 @@ export function Calendar({
         // Completed-range announcement, in chronological order (matches the
         // swapped {start, end} above even for a reverse pick).
         announce(t('@astryx.calendar.rangeCompleteAnnounce', {
-          start: plainDateFormat(plainDateFromISO(start), DATE_FORMAT_WITH_WEEKDAY, locale),
-          end: plainDateFormat(plainDateFromISO(end), DATE_FORMAT_WITH_WEEKDAY, locale)
+          start: formatDateLabel(plainDateFromISO(start), calendar, locale),
+          end: formatDateLabel(plainDateFromISO(end), calendar, locale)
         }));
       }
     }
-  }, [mode, onChange, rangeSelectionStart, minRangeSpan, announce, t, locale]);
+  }, [mode, onChange, rangeSelectionStart, minRangeSpan, announce, t, locale, calendar]);
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     ...rest,
@@ -482,6 +466,7 @@ export function Calendar({
       ...stylex.props(calendarStyles.monthsContainer),
       children: visibleMonths.map(month => /*#__PURE__*/_jsx(MonthGrid, {
         month: month,
+        calendar: calendar,
         value: effectiveValue,
         mode: mode,
         rangeSelectionStart: rangeSelectionStart,
@@ -502,7 +487,7 @@ export function Calendar({
         onNavigateNext: (focusedDate, offset, unit) => navigateMonth(1, focusedDate, offset, unit),
         pendingFocus: claimablePendingFocus,
         onPendingFocusHandled: () => setPendingFocus(null)
-      }, `${month.year}-${month.month}`))
+      }, plainDateToISO(month.start)))
     })]
   });
 }
@@ -514,6 +499,7 @@ Calendar.displayName = 'Calendar';
 
 function MonthGrid({
   month,
+  calendar,
   value,
   mode,
   rangeSelectionStart,
@@ -536,15 +522,16 @@ function MonthGrid({
   onPendingFocusHandled
 }) {
   const locale = useLocale();
-  const year = month.year;
 
   // Use hooks for days generation and constraints
+  const yearMonth = useMemo(() => calendarYearMonthOf(calendar, month), [calendar, month]);
   const {
     days,
     weeks
   } = useCalendarDays({
-    year,
-    month: month.month,
+    year: yearMonth.year,
+    month: yearMonth.month,
+    calendar,
     weekStartsOn,
     hasVariableRowCount
   });
@@ -576,12 +563,12 @@ function MonthGrid({
   // enabled) > today (if visible and enabled) > first enabled in-month day.
   const seedTabbableIso = useMemo(() => {
     if (selectedDateForTabindex) {
-      const isSelectedInMonth = selectedDateForTabindex.year === year && selectedDateForTabindex.month === month.month;
+      const isSelectedInMonth = isInCalendarMonth(selectedDateForTabindex, month);
       if (isSelectedInMonth && !isDateDisabled(selectedDateForTabindex)) {
         return plainDateToISO(selectedDateForTabindex);
       }
     }
-    const isTodayInMonth = today.year === year && today.month === month.month;
+    const isTodayInMonth = isInCalendarMonth(today, month);
     if (isTodayInMonth && !isDateDisabled(today)) {
       return plainDateToISO(today);
     }
@@ -591,7 +578,7 @@ function MonthGrid({
       }
     }
     return null;
-  }, [days, today, year, month.month, isDateDisabled, selectedDateForTabindex]);
+  }, [days, today, month, isDateDisabled, selectedDateForTabindex]);
 
   // Helper to get the focused date from the currently focused element.
   // Reads the machine-readable `data-date` (ISO) attribute rather than parsing
@@ -681,7 +668,7 @@ function MonthGrid({
       return;
     }
     const targetPd = plainDateFromISO(pendingFocus);
-    if (targetPd.year !== year || targetPd.month !== month.month) {
+    if (!isInCalendarMonth(targetPd, month)) {
       return;
     }
     const targetIso = plainDateToISO(targetPd);
@@ -702,7 +689,7 @@ function MonthGrid({
       targetButton.focus();
     }
     onPendingFocusHandled?.();
-  }, [pendingFocus, gridRef, month.month, onPendingFocusHandled, year]);
+  }, [pendingFocus, gridRef, month, onPendingFocusHandled]);
 
   // Parse selection
   let selectedDate = null;
@@ -741,8 +728,8 @@ function MonthGrid({
 
   // Month label for announcements
   const monthLabel = useMemo(() => {
-    return plainDateFormatStandaloneMonthYear(month, locale);
-  }, [month, locale]);
+    return formatCalendarMonthLabel(calendar, month, locale);
+  }, [calendar, month, locale]);
   return /*#__PURE__*/_jsx("div", {
     ...stylex.props(monthGridStyles.monthGrid),
     children: /*#__PURE__*/_jsxs("div", {
@@ -820,6 +807,7 @@ function MonthGrid({
               neighbors: neighbors,
               isTabbable: day.iso === seedTabbableIso,
               isRangeSelectionInProgress: rangeSelectionStart !== null,
+              calendar: calendar,
               onDayClick: onDayClick,
               onDayHover: onDayHover
             }, day.iso);
@@ -849,6 +837,7 @@ function DayCell({
   neighbors,
   isTabbable: isTabbableDay,
   isRangeSelectionInProgress,
+  calendar,
   onDayClick,
   onDayHover
 }) {
@@ -899,7 +888,7 @@ function DayCell({
   // params rather than string concatenation. A mid-flight first pick (where
   // rangeStart === rangeEnd) reads as "range start" only; a completed one-day
   // range reads as both start and end.
-  const dateLabel = plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY, locale);
+  const dateLabel = formatDateLabel(date, calendar, locale);
   const dayLabel = state.isSelected ? t('@astryx.calendar.daySelected', {
     date: dateLabel
   }) : state.isRangeStart && state.isRangeEnd ? isRangeSelectionInProgress ? t('@astryx.calendar.dayRangeStart', {

package/dist/Calendar/getInitialFocusDate.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file getInitialFocusDate.ts
- * @input PlainDate utilities, min/max bounds, today
+ * @input PlainDate and calendar-system utilities, min/max bounds, today
  * @output Exports getInitialFocusDate — the month Calendar opens on
  * @position Calendar-specific helper; used by Calendar.tsx
  *
@@ -10,6 +10,7 @@
  */
 import type { ISODateString, DateRange } from '../utils/dateTypes.js';
 import { type PlainDate } from '../utils/plainDate.js';
+import { type CalendarSystem } from '../utils/calendarSystem.js';
 export interface InitialFocusDateOptions {
     /** Controlled visible month, if the consumer supplied one. */
     focusDate?: ISODateString;
@@ -23,6 +24,8 @@ export interface InitialFocusDateOptions {
     numberOfMonths: number;
     /** Today, injected so the caller keeps a single memoized source of "now". */
     today: PlainDate;
+    /** The calendar system whose months the panes show. Default: `gregory`. */
+    calendar?: CalendarSystem;
 }
 /**
  * Picks the date whose month the calendar opens on.

package/dist/Calendar/getInitialFocusDate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getInitialFocusDate.d.ts","sourceRoot":"","sources":["../../src/Calendar/getInitialFocusDate.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,uBAAuB;IACtC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,yEAAyE;IACzE,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,gCAAgC;IAChC,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,8BAA8B;IAC9B,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,0DAA0D;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,KAAK,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,uBAAuB,GAC/B,SAAS,CAkCX"}
+{"version":3,"file":"getInitialFocusDate.d.ts","sourceRoot":"","sources":["../../src/Calendar/getInitialFocusDate.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,KAAK,SAAS,EAIf,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,KAAK,cAAc,EAGpB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,uBAAuB;IACtC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,yEAAyE;IACzE,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,gCAAgC;IAChC,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,8BAA8B;IAC9B,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,0DAA0D;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,KAAK,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,uBAAuB,GAC/B,SAAS,CA2CX"}

package/dist/Calendar/getInitialFocusDate.js

@@ -2,7 +2,7 @@
 
 /**
  * @file getInitialFocusDate.ts
- * @input PlainDate utilities, min/max bounds, today
+ * @input PlainDate and calendar-system utilities, min/max bounds, today
  * @output Exports getInitialFocusDate — the month Calendar opens on
  * @position Calendar-specific helper; used by Calendar.tsx
  *
@@ -11,7 +11,8 @@
  * - /packages/core/src/Calendar/Calendar.tsx (the only caller)
  */
 
-import { plainDateFromISO, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateIsBefore, plainDateIsAfter } from "../utils/plainDate.js";
+import { plainDateFromISO, plainDateIsBefore, plainDateIsAfter } from "../utils/plainDate.js";
+import { calendarAddMonths, calendarMonthOf } from "../utils/calendarSystem.js";
 /**
  * Picks the date whose month the calendar opens on.
  *
@@ -37,7 +38,8 @@ export function getInitialFocusDate(options) {
     min,
     max,
     numberOfMonths,
-    today
+    today,
+    calendar = 'gregory'
   } = options;
   if (focusDate) {
     return plainDateFromISO(focusDate);
@@ -52,8 +54,8 @@ export function getInitialFocusDate(options) {
   }
   if (maxDate && plainDateIsAfter(today, maxDate)) {
     const lastPaneOffset = Math.max(0, numberOfMonths - 1);
-    const shifted = plainDateAddMonths(plainDateSetFirstOfMonth(maxDate), -lastPaneOffset);
-    if (minDate && plainDateIsBefore(shifted, plainDateSetFirstOfMonth(minDate))) {
+    const shifted = calendarAddMonths(calendar, calendarMonthOf(calendar, maxDate), -lastPaneOffset).start;
+    if (minDate && plainDateIsBefore(shifted, calendarMonthOf(calendar, minDate).start)) {
       return minDate;
     }
     return shifted;

package/dist/Calendar/hooks/useCalendarDays.d.ts

@@ -1,5 +1,6 @@
 import type { DayOfWeek, ISODateString } from '../../utils/dateTypes.js';
 import { type PlainDate } from '../../utils/plainDate.js';
+import { type CalendarSystem } from '../../utils/calendarSystem.js';
 /**
  * Represents a single day in the calendar grid.
  */
@@ -17,14 +18,27 @@ export interface CalendarDay {
  * Configuration for calendar days generation
  */
 export interface UseCalendarDaysOptions {
-    /** The year to generate days for */
+    /** The year to generate days for, in `calendar`'s numbering */
     year: number;
-    /** The month (1-based: 1 = January, 12 = December) */
+    /**
+     * The month's position in its year (1-based). In the Gregorian calendar,
+     * 1 is January and 12 is December. In other calendars it is numbered as
+     * `Temporal.PlainDate` numbers it: 1 through 13 in a Hebrew leap year.
+     */
     month: number;
     /** First day of week (0=Sunday through 6=Saturday) */
     weekStartsOn?: DayOfWeek;
     /** Use variable rows per month vs. fixed 6-row grid */
     hasVariableRowCount?: boolean;
+    /**
+     * The calendar system that numbers `year`, `month`, and each `dayNumber`.
+     * Each day keeps its Gregorian `date` and `iso`. The hook never reads the
+     * InternationalizationProvider calendar. Calendars other than gregory,
+     * iso8601, buddhist, roc, and japanese need Temporal; without it, the hook
+     * reads Gregorian numbers and warns once in development.
+     * @default 'gregory'
+     */
+    calendar?: CalendarSystem;
 }
 /**
  * Return type for useCalendarDays hook
@@ -53,6 +67,9 @@ export interface UseCalendarDaysReturn {
  *   weekStartsOn: 0, // Sunday
  * });
  * // days[i].date is a PlainDate { year, month (1-based), day }
+ *
+ * // Aban 1405 in the Persian calendar; dates stay Gregorian
+ * useCalendarDays({year: 1405, month: 8, calendar: 'persian'});
  * ```
  */
 export declare function useCalendarDays(options: UseCalendarDaysOptions): UseCalendarDaysReturn;

package/dist/Calendar/hooks/useCalendarDays.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCalendarDays.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/useCalendarDays.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAC,SAAS,EAAE,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACpE,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,uBAAuB,CAAC;AAI/B;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,IAAI,EAAE,SAAS,CAAC;IAChB,mCAAmC;IACnC,GAAG,EAAE,aAAa,CAAC;IACnB,oDAAoD;IACpD,SAAS,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,mDAAmD;IACnD,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,8BAA8B;IAC9B,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC;IACvB,yCAAyC;IACzC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,sBAAsB,GAC9B,qBAAqB,CA2EvB"}
+{"version":3,"file":"useCalendarDays.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/useCalendarDays.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAC,SAAS,EAAE,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACpE,OAAO,EACL,KAAK,SAAS,EAIf,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACL,KAAK,cAAc,EAGpB,MAAM,4BAA4B,CAAC;AAGpC;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,IAAI,EAAE,SAAS,CAAC;IAChB,mCAAmC;IACnC,GAAG,EAAE,aAAa,CAAC;IACnB,oDAAoD;IACpD,SAAS,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,mDAAmD;IACnD,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,8BAA8B;IAC9B,KAAK,EAAE,WAAW,EAAE,EAAE,CAAC;IACvB,yCAAyC;IACzC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,sBAAsB,GAC9B,qBAAqB,CAuBvB"}