@astryxdesign/core 0.1.1 → 0.1.2-canary.04e71b2

package/dist/Button/Button.js

@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/Button.stories.tsx (storybook stories)
  * - /packages/cli/templates/blocks/components/Button/ (showcase blocks)
  *
- * Last synced props: label, variant, size, isDisabled, isLoading, clickAction, icon, isIconOnly, children, tooltip, endContent, href, as, target, rel
+ * Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, children, tooltip, endContent, href, as, target, rel
  */
 import { useRef, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -23,6 +23,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, spacingVars, radiusVars, borderVars, durationVars, easeVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 import { Spinner } from "../Spinner/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
@@ -88,6 +89,10 @@ const styles = {
     kmuXW: "x2lah0s",
     $$css: true
   },
+  contentWrapper: {
+    k1xSpc: "xjp7ctv",
+    $$css: true
+  },
   link: {
     kybGjl: "x1hl2dhg",
     $$css: true
@@ -202,6 +207,27 @@ const variants = {
  * Button size type derived from the sizeStyles StyleX object
  */
 
+const spinnerReveal = "x18re5ia-B";
+const contentHide = "x188b6p3-B";
+
+// Hold the loading swap for a short delay so a fast action (e.g. clickAction)
+// that settles within the delay never flashes a spinner. The spinner fade-in
+// and the content hide share the same delay so the button never shows an empty
+// frame in between. Reduced motion is instant.
+const SPINNER_DELAY = durationVars['--duration-medium-min'];
+const loadingStyles = {
+  hiddenContent: {
+    kMwMTN: "x19co3pv",
+    $$css: true
+  },
+  hiddenContentDelayed: {
+    kKVMdj: "x1ffowhz",
+    k44tkh: "xjlvqhv",
+    kWV6AL: "x10e4vud",
+    kKxzle: "x17yabm6 x14q22ui",
+    $$css: true
+  }
+};
 const groupStyles = {
   horizontal: {
     krdFHd: "x15mokao x8eehn2",
@@ -265,6 +291,7 @@ export function Button({
   type = 'button',
   isDisabled = false,
   isLoading = false,
+  isInterruptible = false,
   clickAction,
   icon,
   isIconOnly = false,
@@ -284,10 +311,22 @@ export function Button({
   const size = useSize(sizeProp, 'md');
   const buttonGroup = useButtonGroup();
   const [isPending, startTransition] = useTransition();
+  // clickAction is normally fire-once (submit/save/pay), so a same-tick
+  // double-click must dedupe — which neither isPending nor useOptimistic do.
+  // Hence the ref guard. Interruptible callers (e.g. ToggleButton) opt out so a
+  // re-click can land and interrupt the in-flight action with a fresh one.
   const actionInFlightRef = useRef(false);
   const isLoadingState = isLoading || isPending;
+  // Delay the spinner reveal for action-driven loading (clickAction's own
+  // transition) so a fast action that settles within the delay does not flash
+  // a spinner. Interruptible loading is delayed too, so rapid re-clicks settle
+  // before any spinner shows. Explicit isLoading-only stays immediate, since
+  // the consumer is deliberately showing it.
+  const delaySpinner = isPending || isInterruptible;
   const groupDisabled = buttonGroup?.isDisabled ?? false;
-  const buttonDisabled = isDisabled || groupDisabled || isLoadingState;
+  // When interruptible, the loading state drives the spinner and aria-busy but
+  // not disabled, so clicks keep landing and can interrupt the in-flight action.
+  const buttonDisabled = isDisabled || groupDisabled || isLoadingState && !isInterruptible;
   // isIconOnly prop is the source of truth for icon-only rendering.
   // When false (default), label is always rendered as visible text.
 
@@ -301,7 +340,9 @@ export function Button({
   // for keyboard users to reach the tooltip. Otherwise use native disabled.
   const useAriaDisabled = tooltip != null && buttonDisabled;
   const handleClick = e => {
-    if (buttonDisabled || actionInFlightRef.current) {
+    // The ref guard dedupes fire-once actions. Interruptible callers skip it so
+    // a re-click while pending starts a fresh action that interrupts the prior.
+    if (buttonDisabled || actionInFlightRef.current && !isInterruptible) {
       e.preventDefault();
       return;
     }
@@ -344,22 +385,20 @@ export function Button({
   const buttonContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [isLoadingState && /*#__PURE__*/_jsx("span", {
       ...{
-        className: "x10l6tqk x13vifvy xu96u03 x3m8u43 x1ey2m1c xrvj5dj x1ku5rj1"
-      },
+        0: {
+          className: "x10l6tqk x13vifvy xu96u03 x3m8u43 x1ey2m1c xrvj5dj x1ku5rj1"
+        },
+        1: {
+          className: "x10l6tqk x13vifvy xu96u03 x3m8u43 x1ey2m1c xrvj5dj x1ku5rj1 xqcmdr3 xb2rp9n xskzprw x17yabm6 x14q22ui"
+        }
+      }[!!delaySpinner << 0],
       "aria-hidden": "true",
       children: /*#__PURE__*/_jsx(Spinner, {
         size: "sm",
         shade: "inherit"
       })
     }), /*#__PURE__*/_jsxs("span", {
-      ...{
-        0: {
-          className: "xjp7ctv"
-        },
-        1: {
-          className: "xjp7ctv x19co3pv"
-        }
-      }[!!isLoadingState << 0],
+      ...stylex.props(styles.contentWrapper, isLoadingState && (delaySpinner ? loadingStyles.hiddenContentDelayed : loadingStyles.hiddenContent)),
       "aria-hidden": isLoadingState || undefined,
       children: [icon && /*#__PURE__*/_jsx("span", {
         ...stylex.props(styles.iconWrapper, iconSizeStyles[size]),
@@ -375,10 +414,7 @@ export function Button({
         },
         children: endContent
       })]
-    }), /*#__PURE__*/_jsx("span", {
-      ...{
-        className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
-      },
+    }), /*#__PURE__*/_jsx(VisuallyHidden, {
       role: "status",
       "aria-live": "polite",
       children: isLoadingState ? 'Loading' : ''

package/dist/Calendar/Calendar.d.ts

@@ -1,6 +1,6 @@
 import type { BaseProps } from '../BaseProps';
-export type { ISODateString, DayOfWeek, DateRange } from '../utils/dateTypes';
-import type { ISODateString, DayOfWeek, DateRange } from '../utils/dateTypes';
+export type { ISODateString, DayOfWeek, DayOfWeekName, DateRange, } from '../utils/dateTypes';
+import type { ISODateString, DayOfWeek, DayOfWeekName, DateRange } from '../utils/dateTypes';
 /** Imperative handle for Calendar handleRef */
 export interface CalendarHandle {
     /** Navigate the calendar to show the month containing the given date */
@@ -45,10 +45,11 @@ interface CalendarBaseProps extends Omit<BaseProps<HTMLDivElement>, 'onChange' |
      */
     hasVariableRowCount?: boolean;
     /**
-     * First day of week.
+     * First day of week. Accepts a number (0 = Sunday … 6 = Saturday) or a
+     * three-letter day name ('sun'–'sat', case-insensitive) for readability.
      * Default: 0 (Sunday)
      */
-    weekStartsOn?: DayOfWeek;
+    weekStartsOn?: DayOfWeek | DayOfWeekName;
 }
 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":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8C5C,YAAY,EAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC5E,OAAO,KAAK,EAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAG5E,+CAA+C;AAE/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;;;OAGG;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;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,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,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,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;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BAwRtD;yBAxRe,QAAQ"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4C5C,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;AAI5B,+CAA+C;AAE/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;;;OAGG;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,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,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,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,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;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BA4RtD;yBA5Re,QAAQ"}

package/dist/Calendar/Calendar.js

@@ -21,9 +21,9 @@ import * as stylex from '@stylexjs/stylex';
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
 import { useGridFocus } from "../hooks/index.js";
-import { useCalendarDays, useCalendarConstraints, useCalendarRovingTabindex } from "./hooks/index.js";
+import { useCalendarDays, useCalendarConstraints } from "./hooks/index.js";
 import { calendarStyles, monthGridStyles, dayCellStyles, dayCellTheme } from "./styles.js";
-import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateFromDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
+import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
 import { mergeProps } from "../utils/index.js";
 import { computeDayCellState, computeRangeRounding, computePreviewRounding, isEndpoint } from "./dayCellUtils.js";
 
@@ -31,6 +31,7 @@ import { computeDayCellState, computeRangeRounding, computePreviewRounding, isEn
 // Types
 // =============================================================================
 
+import { normalizeDayOfWeek } from "../utils/dateTypes.js";
 import { themeProps } from "../utils/themeProps.js";
 
 /** Imperative handle for Calendar handleRef */
@@ -70,13 +71,17 @@ export function Calendar({
     hasOutsideDays = true,
     hasWeekNumbers = false,
     hasVariableRowCount = false,
-    weekStartsOn = 0,
+    weekStartsOn: weekStartsOnProp = 0,
     xstyle,
     className,
     style,
     ...rest
   } = props;
 
+  // Normalize `weekStartsOn` (number or three-letter day name) to a numeric
+  // DayOfWeek so all downstream date math keeps working with an index.
+  const weekStartsOn = normalizeDayOfWeek(weekStartsOnProp);
+
   // Today's date (memoized)
   const today = useMemo(() => plainDateToday(), []);
 
@@ -345,32 +350,46 @@ function MonthGrid({
     }
     return null;
   }, [mode, value]);
-  const {
-    isTabbable
-  } = useCalendarRovingTabindex({
-    days,
-    today,
-    year,
-    month: month.month,
-    isDateDisabled,
-    selectedDate: selectedDateForTabindex
-  });
 
-  // Helper to get the focused date from the currently focused element
+  // Seed the initial roving tab stop for this month. useGridFocus owns the
+  // live tab stop (see `hasRovingTabIndex` below) — it honors an existing
+  // `tabindex="0"` and repairs/moves it thereafter — so this only decides
+  // which day button starts tabbable. Priority: selected date (if visible and
+  // 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;
+      if (isSelectedInMonth && !isDateDisabled(selectedDateForTabindex)) {
+        return plainDateToISO(selectedDateForTabindex);
+      }
+    }
+    const isTodayInMonth = today.year === year && today.month === month.month;
+    if (isTodayInMonth && !isDateDisabled(today)) {
+      return plainDateToISO(today);
+    }
+    for (const day of days) {
+      if (!day.isOutside && !isDateDisabled(day.date)) {
+        return day.iso;
+      }
+    }
+    return null;
+  }, [days, today, year, month.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
+  // the human-readable `aria-label` with `new Date()`, which is locale/format
+  // dependent and returns Invalid Date in non-English locales (e.g. fr-FR,
+  // ja-JP), silently swallowing month-boundary arrow navigation (complex-4).
   const getFocusedDate = useCallback(() => {
     const activeElement = document.activeElement;
     if (!activeElement) {
       return null;
     }
-    const ariaLabel = activeElement.getAttribute('aria-label');
-    if (!ariaLabel) {
-      return null;
-    }
-    const parsed = new Date(ariaLabel);
-    if (isNaN(parsed.getTime())) {
+    const iso = activeElement.getAttribute('data-date');
+    if (!iso) {
       return null;
     }
-    return plainDateToISO(plainDateFromDate(parsed));
+    return iso;
   }, []);
 
   // Handle navigation to previous month
@@ -403,13 +422,25 @@ function MonthGrid({
     }
   }, [getFocusedDate, onNavigateNext]);
 
-  // Grid focus navigation
+  // Grid focus navigation.
+  //
+  // The hook enumerates ALL grid cells (every `role="gridcell"`, including
+  // disabled days and empty placeholder cells) so the true 7-column geometry is
+  // preserved. `isCellFocusable` / `getFocusTarget` tell the hook which cells
+  // can take focus (those containing an enabled day button) and where to send
+  // focus (the day button inside the cell). Arrow keys move to the target
+  // row/column and, if that cell is disabled, continue in the same direction to
+  // the next enabled cell.
   const {
     gridRef,
-    handleKeyDown: handleGridKeyDown
+    handleKeyDown: handleGridKeyDown,
+    handleFocus: handleGridFocus
   } = useGridFocus({
     columns: 7,
-    cellSelector: 'button:not([disabled])',
+    cellSelector: '[role="gridcell"]',
+    isCellFocusable: cell => cell.querySelector('button:not([disabled])') !== null,
+    getFocusTarget: cell => cell.querySelector('button'),
+    hasRovingTabIndex: true,
     onNavigateBefore: handleNavigatePrevious,
     onNavigateAfter: handleNavigateNext,
     onPageUp: handlePageUp,
@@ -423,10 +454,10 @@ function MonthGrid({
     }
     const buttons = gridRef.current.querySelectorAll('button:not([disabled])');
     const targetPd = plainDateFromISO(pendingFocus);
-    const targetLabel = plainDateFormat(targetPd, DATE_FORMAT_WITH_WEEKDAY);
+    const targetIso = plainDateToISO(targetPd);
     let targetButton = null;
     for (const button of buttons) {
-      if (button.getAttribute('aria-label') === targetLabel) {
+      if (button.getAttribute('data-date') === targetIso) {
         targetButton = button;
         break;
       }
@@ -477,30 +508,33 @@ function MonthGrid({
   const monthLabel = useMemo(() => {
     return plainDateFormat(month, DATE_FORMAT_MONTH_YEAR);
   }, [month]);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     ...stylex.props(monthGridStyles.monthGrid),
-    children: [/*#__PURE__*/_jsxs("div", {
-      ...stylex.props(monthGridStyles.weekHeader, hasWeekNumbers && monthGridStyles.weekHeaderWithNumbers),
-      children: [hasWeekNumbers && /*#__PURE__*/_jsx("div", {
-        ...stylex.props(monthGridStyles.dayName, monthGridStyles.weekNumberHeader)
-      }), dayNames.map(name => /*#__PURE__*/_jsx("div", {
-        role: "columnheader",
-        ...stylex.props(monthGridStyles.dayName),
-        children: name
-      }, name))]
-    }), /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxs("div", {
       ref: gridRef,
       role: "grid",
       "aria-label": monthLabel,
       onKeyDown: handleGridKeyDown,
+      onFocus: handleGridFocus,
       ...stylex.props(monthGridStyles.daysGrid, hasWeekNumbers && monthGridStyles.daysGridWithNumbers),
-      children: weeks.map(week => {
+      children: [/*#__PURE__*/_jsxs("div", {
+        role: "row",
+        ...stylex.props(monthGridStyles.weekRow),
+        children: [hasWeekNumbers && /*#__PURE__*/_jsx("div", {
+          ...stylex.props(monthGridStyles.dayName, monthGridStyles.weekNumberHeader)
+        }), dayNames.map(name => /*#__PURE__*/_jsx("div", {
+          role: "columnheader",
+          ...stylex.props(monthGridStyles.dayName),
+          children: name
+        }, name))]
+      }), weeks.map(week => {
         const weekDate = week.find(d => !d.isOutside)?.date || week[0].date;
         const weekNum = plainDateGetWeekNumber(weekDate);
         return /*#__PURE__*/_jsxs("div", {
           role: "row",
           ...stylex.props(monthGridStyles.weekRow),
           children: [hasWeekNumbers && /*#__PURE__*/_jsx("div", {
+            role: "rowheader",
             ...stylex.props(monthGridStyles.weekNumber),
             children: weekNum
           }), week.map((day, dayIndex) => /*#__PURE__*/_jsx(DayCell, {
@@ -515,13 +549,13 @@ function MonthGrid({
             today: today,
             hasOutsideDays: hasOutsideDays,
             isDisabled: isDateDisabled(day.date),
-            isTabbable: isTabbable(day.iso),
+            isTabbable: day.iso === seedTabbableIso,
             onDayClick: onDayClick,
             onDayHover: onDayHover
           }, day.iso))]
         }, plainDateToISO(weekDate));
-      })
-    })]
+      })]
+    })
   });
 }
 
@@ -551,7 +585,10 @@ function DayCell({
     dayNumber
   } = day;
   if (isOutside && !hasOutsideDays) {
+    // Empty placeholder cell — still a gridcell so the grid geometry stays a
+    // clean 7-per-row set for keyboard navigation.
     return /*#__PURE__*/_jsx("div", {
+      role: "gridcell",
       ...stylex.props(dayCellStyles.cell)
     });
   }
@@ -572,6 +609,7 @@ function DayCell({
   const rangeRounding = computeRangeRounding(state);
   const previewRounding = computePreviewRounding(state);
   return /*#__PURE__*/_jsxs("div", {
+    role: "gridcell",
     ...stylex.props(dayCellStyles.cell),
     children: [state.isInRange && /*#__PURE__*/_jsx("div", {
       ...stylex.props(dayCellStyles.rangeBg, dayCellTheme.rangeBg, rangeRounding.roundLeft && dayCellStyles.rangeBgRadiusLeft, rangeRounding.roundRight && dayCellStyles.rangeBgRadiusRight, state.isRangeStart && dayCellStyles.rangeInsetLeft, state.isRangeStart && rangeRounding.roundRight && dayCellStyles.rangeInsetRight, state.isRangeEnd && dayCellStyles.rangeInsetRight, state.isRangeStart && rangeRounding.roundLeft && dayCellStyles.rangeInsetLeft)
@@ -579,12 +617,13 @@ function DayCell({
       ...stylex.props(dayCellStyles.previewBg, dayCellTheme.previewBg, previewRounding.roundLeft && dayCellStyles.previewBgRadiusLeft, previewRounding.roundRight && dayCellStyles.previewBgRadiusRight, state.isPreviewStart && dayCellStyles.previewStart, state.isPreviewEnd && dayCellStyles.previewEnd)
     }), /*#__PURE__*/_jsx("button", {
       type: "button",
-      role: "gridcell",
       "data-date": day.iso,
       "aria-label": plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY),
       "aria-selected": state.isSelected || state.isInRange || undefined,
       "aria-disabled": state.effectivelyDisabled || undefined,
-      disabled: isDisabled,
+      disabled: isDisabled
+      // Initial roving tab-stop seed; useGridFocus owns it after mount.
+      ,
       tabIndex: isTabbableDay ? 0 : -1,
       onClick: () => !state.effectivelyDisabled && onDayClick(date),
       onMouseEnter: () => !state.effectivelyDisabled && onDayHover(date),

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

@@ -12,6 +12,4 @@ export { useCalendarConstraints } from './useCalendarConstraints';
 export type { UseCalendarConstraintsOptions, UseCalendarConstraintsReturn, } from './useCalendarConstraints';
 export { useCalendarNavigation } from './useCalendarNavigation';
 export type { UseCalendarNavigationOptions, UseCalendarNavigationReturn, } from './useCalendarNavigation';
-export { useCalendarRovingTabindex } from './useCalendarRovingTabindex';
-export type { UseCalendarRovingTabindexOptions, UseCalendarRovingTabindexReturn, } from './useCalendarRovingTabindex';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,YAAY,EACV,6BAA6B,EAC7B,4BAA4B,GAC7B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,YAAY,EACV,gCAAgC,EAChC,+BAA+B,GAChC,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,YAAY,EACV,6BAA6B,EAC7B,4BAA4B,GAC7B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,yBAAyB,CAAC"}

package/dist/Calendar/hooks/index.js

@@ -11,5 +11,4 @@
 
 export { useCalendarDays } from "./useCalendarDays.js";
 export { useCalendarConstraints } from "./useCalendarConstraints.js";
-export { useCalendarNavigation } from "./useCalendarNavigation.js";
-export { useCalendarRovingTabindex } from "./useCalendarRovingTabindex.js";
+export { useCalendarNavigation } from "./useCalendarNavigation.js";

package/dist/Calendar/index.d.ts

@@ -7,8 +7,8 @@
  * SYNC: When modified, update this header and /packages/core/src/Calendar/Calendar.doc.mjs
  */
 export { Calendar } from './Calendar';
-export type { CalendarProps, CalendarHandle, ISODateString, DayOfWeek, DateRange, } from './Calendar';
-export { useCalendarDays, useCalendarConstraints, useCalendarNavigation, useCalendarRovingTabindex, } from './hooks';
-export type { CalendarDay, UseCalendarDaysOptions, UseCalendarDaysReturn, UseCalendarConstraintsOptions, UseCalendarConstraintsReturn, UseCalendarNavigationOptions, UseCalendarNavigationReturn, UseCalendarRovingTabindexOptions, UseCalendarRovingTabindexReturn, } from './hooks';
+export type { CalendarProps, CalendarHandle, ISODateString, DayOfWeek, DayOfWeekName, DateRange, } from './Calendar';
+export { useCalendarDays, useCalendarConstraints, useCalendarNavigation, } from './hooks';
+export type { CalendarDay, UseCalendarDaysOptions, UseCalendarDaysReturn, UseCalendarConstraintsOptions, UseCalendarConstraintsReturn, UseCalendarNavigationOptions, UseCalendarNavigationReturn, } from './hooks';
 export { isSameDay, isDateInRange, getWeekNumber, formatAccessibleDate, } from './utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Calendar/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,SAAS,EACT,SAAS,GACV,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,EACrB,6BAA6B,EAC7B,4BAA4B,EAC5B,4BAA4B,EAC5B,2BAA2B,EAC3B,gCAAgC,EAChC,+BAA+B,GAChC,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,oBAAoB,GACrB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Calendar/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EACV,aAAa,EACb,cAAc,EACd,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,EACrB,6BAA6B,EAC7B,4BAA4B,EAC5B,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,SAAS,EACT,aAAa,EACb,aAAa,EACb,oBAAoB,GACrB,MAAM,SAAS,CAAC"}

package/dist/Calendar/index.js

@@ -12,7 +12,7 @@
  */
 export { Calendar } from "./Calendar.js";
 // Re-export hooks for advanced usage
-export { useCalendarDays, useCalendarConstraints, useCalendarNavigation, useCalendarRovingTabindex } from "./hooks/index.js";
+export { useCalendarDays, useCalendarConstraints, useCalendarNavigation } from "./hooks/index.js";
 // Re-export calendar-specific utilities for advanced usage
 export { isSameDay, isDateInRange, getWeekNumber, formatAccessibleDate } from "./utils.js";
 

package/dist/Calendar/styles.d.ts

@@ -55,17 +55,11 @@ export declare const monthGridStyles: Readonly<{
     readonly monthGrid: Readonly<{
         readonly flex: stylex.StyleXClassNameFor<"flex", "1 1 0">;
     }>;
-    readonly weekHeader: Readonly<{
-        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
-        readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "repeat(7, 1fr)">;
-        readonly marginBottom: stylex.StyleXClassNameFor<"marginBottom", "4px">;
-    }>;
-    readonly weekHeaderWithNumbers: Readonly<{
-        readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "auto repeat(7, 1fr)">;
-    }>;
     readonly dayName: Readonly<{
         readonly width: stylex.StyleXClassNameFor<"width", "32px">;
-        readonly height: stylex.StyleXClassNameFor<"height", "32px">;
+        readonly height: stylex.StyleXClassNameFor<"height", `calc(${stylex.StyleXVar<"32px">} + ${stylex.StyleXVar<"4px">})`>;
+        readonly paddingBottom: stylex.StyleXClassNameFor<"paddingBottom", "4px">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
         readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCzB,CAAC;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4C1B,CAAC;AAMH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GxB,CAAC;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCzB,CAAC;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1B,CAAC;AAMH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GxB,CAAC;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEvB,CAAC"}

package/dist/Calendar/styles.js

@@ -77,19 +77,11 @@ export const monthGridStyles = {
     kUk6DE: "x1cqoux5",
     $$css: true
   },
-  weekHeader: {
-    k1xSpc: "xrvj5dj",
-    kumcoG: "x1mzazjb",
-    k1K539: "x14cgwvg",
-    $$css: true
-  },
-  weekHeaderWithNumbers: {
-    kumcoG: "x1wthsqz",
-    $$css: true
-  },
   dayName: {
     kzqmXN: "x805d0l",
-    kZKoxP: "x1ueg155",
+    kZKoxP: "x1u5rhrp",
+    kGO01o: "xy143xn",
+    kB7OPa: "x9f619",
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
     kjj79g: "xl56j7k",

package/dist/Carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyJD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,SAAsB,EACpC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BAgIf;yBA9Ie,QAAQ"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyJD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,SAAsB,EACpC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BA+If;yBA7Je,QAAQ"}

package/dist/Carousel/Carousel.js

@@ -239,9 +239,13 @@ export function Carousel({
     const firstChild = el.firstElementChild;
     const itemWidth = firstChild ? firstChild.offsetWidth : 0;
     const amount = el.clientWidth - itemWidth * 0.5;
+    // Respect the user's reduced-motion preference — mirrors the CSS
+    // scroll-behavior override so button-driven scrolling doesn't animate
+    // for users who opted out of motion.
+    const prefersReducedMotion = typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     el.scrollBy({
       left: direction * Math.max(amount, itemWidth),
-      behavior: 'smooth'
+      behavior: prefersReducedMotion ? 'auto' : 'smooth'
     });
   }, []);
   const fadeStyle = hasEdgeFade ? overflowStart && overflowEnd ? styles.fadeBoth : overflowStart ? styles.fadeStart : overflowEnd ? styles.fadeEnd : null : null;
@@ -285,7 +289,13 @@ export function Carousel({
           label: "Scroll left",
           variant: "ghost",
           size: "sm",
-          isIconOnly: true,
+          isIconOnly: true
+          // Disabled when there's nothing to scroll toward. Keeps the
+          // button mounted (stable layout/focus) but removes it from the
+          // tab order and a11y tree while it's visually hidden, so
+          // keyboard users don't land on an invisible control.
+          ,
+          isDisabled: !overflowStart,
           onClick: () => scrollBy(-1),
           xstyle: styles.buttonRadiusOverride
         })
@@ -306,7 +316,11 @@ export function Carousel({
           label: "Scroll right",
           variant: "ghost",
           size: "sm",
-          isIconOnly: true,
+          isIconOnly: true
+          // See "Scroll left" — disabled while visually hidden so the
+          // button stays mounted but out of the tab order / a11y tree.
+          ,
+          isDisabled: !overflowEnd,
           onClick: () => scrollBy(1),
           xstyle: styles.buttonRadiusOverride
         })

package/dist/Center/Center.d.ts

@@ -35,6 +35,16 @@ export interface CenterProps extends BaseProps<HTMLDivElement> {
      * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
      */
     height?: SizeValue;
+    /**
+     * Maximum width of the container.
+     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
+     */
+    maxWidth?: SizeValue;
+    /**
+     * Minimum height of the container.
+     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
+     */
+    minHeight?: SizeValue;
     /**
      * Whether to make the container inline-flex (useful for text/icons).
      * @default false
@@ -58,7 +68,7 @@ export interface CenterProps extends BaseProps<HTMLDivElement> {
  * </Center>
  * ```
  */
-export declare function Center({ axis, width, height, isInline, children, xstyle, className, style, ref, ...props }: CenterProps): import("react").JSX.Element;
+export declare function Center({ axis, width, height, maxWidth, minHeight, isInline, children, xstyle, className, style, ref, ...props }: CenterProps): import("react").JSX.Element;
 export declare namespace Center {
     var displayName: string;
 }

package/dist/Center/Center.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../src/Center/Center.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA2B9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAG5D,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAa,EACb,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAmBb;yBA9Be,MAAM"}
+{"version":3,"file":"Center.d.ts","sourceRoot":"","sources":["../../src/Center/Center.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAkC9C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAa,EACb,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAgB,EAChB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAwBb;yBArCe,MAAM"}

package/dist/Center/Center.js

@@ -39,13 +39,17 @@ const styles = {
 
 // Dynamic styles for sizing props
 const dynamicStyles = {
-  sizing: (width, height) => [{
+  sizing: (width, height, maxWidth, minHeight) => [{
     kzqmXN: width != null ? "x5lhr3w" : width,
     kZKoxP: height != null ? "x16ye13r" : height,
+    ks0D6T: maxWidth != null ? "xf68679" : maxWidth,
+    kAzted: minHeight != null ? "x82snj4" : minHeight,
     $$css: true
   }, {
     "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width),
-    "--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(height)
+    "--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(height),
+    "--x-maxWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(maxWidth),
+    "--x-minHeight": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(minHeight)
   }]
 };
 /**
@@ -65,6 +69,8 @@ export function Center({
   axis = 'both',
   width,
   height,
+  maxWidth,
+  minHeight,
   isInline = false,
   children,
   xstyle,
@@ -75,7 +81,7 @@ export function Center({
 }) {
   const stylexProps = mergeProps(themeProps('center', {
     axis
-  }), stylex.props(isInline ? styles.inline : styles.base, (axis === 'both' || axis === 'vertical') && styles.alignItemsCenter, (axis === 'both' || axis === 'horizontal') && styles.justifyContentCenter, dynamicStyles.sizing(width ?? null, height ?? null), xstyle), className, style);
+  }), stylex.props(isInline ? styles.inline : styles.base, (axis === 'both' || axis === 'vertical') && styles.alignItemsCenter, (axis === 'both' || axis === 'horizontal') && styles.justifyContentCenter, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), xstyle), className, style);
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     ...stylexProps,