@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/dist/Calendar/hooks/useCalendarRovingTabindex.js

@@ -0,0 +1,96 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useCalendarRovingTabindex.ts
+ * @input Uses React useMemo, PlainDate utilities
+ * @output Exports useCalendarRovingTabindex hook for accessible grid navigation
+ * @position Calendar-specific hook; used by Calendar
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Calendar/hooks/index.ts
+ */
+import { useMemo } from 'react';
+import { plainDateToISO } from "../../utils/plainDate.js";
+
+/**
+ * Configuration for calendar roving tabindex
+ */
+
+/**
+ * Return type for useCalendarRovingTabindex hook
+ */
+
+/**
+ * Hook for managing roving tabindex in calendar grids.
+ *
+ * Implements the WAI-ARIA roving tabindex pattern where only one element
+ * in a group has tabindex="0" while others have tabindex="-1".
+ *
+ * Priority for tabbable element:
+ * 1. Today if visible in the current month and enabled
+ * 2. First enabled day in the month
+ *
+ * @example
+ * ```
+ * const {tabbableDate, isTabbable} = useCalendarRovingTabindex({
+ *   days,
+ *   today: {year: 2026, month: 1, day: 20},
+ *   year: 2026,
+ *   month: 1, // January (1-based)
+ *   isDateDisabled,
+ * });
+ *
+ * // In day rendering:
+ * <button tabIndex={isTabbable(day.iso) ? 0 : -1}>
+ *   {day.dayNumber}
+ * </button>
+ * ```
+ */
+export function useCalendarRovingTabindex(options) {
+  const {
+    days,
+    today,
+    year,
+    month,
+    isDateDisabled,
+    selectedDate
+  } = options;
+
+  // Determine which day should be tabbable
+  const tabbableDate = useMemo(() => {
+    // Priority 1: Selected date if visible in this month and enabled
+    if (selectedDate) {
+      const isSelectedInMonth = selectedDate.year === year && selectedDate.month === month;
+      if (isSelectedInMonth && !isDateDisabled(selectedDate)) {
+        return plainDateToISO(selectedDate);
+      }
+    }
+
+    // Priority 2: Today if visible in this month and enabled
+    const isTodayInMonth = today.year === year && today.month === month;
+    if (isTodayInMonth && !isDateDisabled(today)) {
+      return plainDateToISO(today);
+    }
+
+    // Priority 3: First enabled day in this month
+    for (const day of days) {
+      if (!day.isOutside && !isDateDisabled(day.date)) {
+        return day.iso;
+      }
+    }
+    return null;
+  }, [days, today, year, month, isDateDisabled, selectedDate]);
+
+  // Check if a specific date is tabbable
+  const isTabbable = useMemo(() => {
+    return iso => {
+      return tabbableDate !== null && iso === tabbableDate;
+    };
+  }, [tabbableDate]);
+  return {
+    tabbableDate,
+    isTabbable
+  };
+}

package/dist/Calendar/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file index.ts
+ * @input Imports calendar components and types
+ * @output Exports Calendar and related types
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ *
+ * 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 { isSameDay, isDateInRange, getWeekNumber, formatAccessibleDate, } from './utils';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/Calendar/index.js

@@ -0,0 +1,19 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports calendar components and types
+ * @output Exports Calendar and related types
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ *
+ * SYNC: When modified, update this header and /packages/core/src/Calendar/Calendar.doc.mjs
+ */
+export { Calendar } from "./Calendar.js";
+// Re-export hooks for advanced usage
+export { useCalendarDays, useCalendarConstraints, useCalendarNavigation, useCalendarRovingTabindex } from "./hooks/index.js";
+// Re-export calendar-specific utilities for advanced usage
+export { isSameDay, isDateInRange, getWeekNumber, formatAccessibleDate } from "./utils.js";
+
+// Re-export theme styles for customization

package/dist/Calendar/styles.d.ts

@@ -0,0 +1,234 @@
+/**
+ * @file styles.ts
+ * @input Uses stylex, theme tokens
+ * @output Exports calendar styles (structural) and theme styles (customizable)
+ * @position Shared styles; used by Calendar
+ *
+ * Style Organization:
+ * - *Styles objects: Structural/layout styles (spacing, sizing, positioning)
+ * - *Theme objects: Themeable styles (colors, borders) that can be overridden
+ *
+ * SYNC: When modified, update this header
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const calendarStyles: Readonly<{
+    readonly calendar: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-block">;
+        readonly padding: stylex.StyleXClassNameFor<"padding", "12px">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", "220px">;
+    }>;
+    readonly header: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly marginBottom: stylex.StyleXClassNameFor<"marginBottom", "8px">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "8px">;
+    }>;
+    readonly monthYearLabel: Readonly<{
+        readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "600">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-base)">;
+        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0A1317, #DFE2E5)">;
+    }>;
+    readonly monthsContainer: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "16px">;
+    }>;
+    readonly srOnly: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
+        readonly width: stylex.StyleXClassNameFor<"width", "1px">;
+        readonly height: stylex.StyleXClassNameFor<"height", "1px">;
+        readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+        readonly margin: stylex.StyleXClassNameFor<"margin", "-1px">;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly clip: stylex.StyleXClassNameFor<"clip", "rect(0, 0, 0, 0)">;
+        readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+    }>;
+    readonly navIcon: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "16px">;
+        readonly height: stylex.StyleXClassNameFor<"height", "16px">;
+    }>;
+}>;
+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 display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-sm)">;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "400">;
+        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#4E606F, #AAAFB5)">;
+    }>;
+    readonly weekNumberHeader: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "32px">;
+    }>;
+    readonly daysGrid: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "grid">;
+        readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "repeat(7, 1fr)">;
+    }>;
+    readonly daysGridWithNumbers: Readonly<{
+        readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "auto repeat(7, 1fr)">;
+    }>;
+    readonly weekNumber: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "32px">;
+        readonly height: stylex.StyleXClassNameFor<"height", "32px">;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-sm)">;
+        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#4E606F, #AAAFB5)">;
+    }>;
+    readonly weekRow: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "contents">;
+    }>;
+}>;
+export declare const dayCellStyles: Readonly<{
+    readonly cell: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly height: stylex.StyleXClassNameFor<"height", "32px">;
+        readonly isolation: stylex.StyleXClassNameFor<"isolation", "isolate">;
+    }>;
+    readonly rangeBg: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
+        readonly top: stylex.StyleXClassNameFor<"top", "2px">;
+        readonly bottom: stylex.StyleXClassNameFor<"bottom", "2px">;
+        readonly left: stylex.StyleXClassNameFor<"left", 0>;
+        readonly right: stylex.StyleXClassNameFor<"right", 0>;
+    }>;
+    readonly rangeBgRadiusLeft: Readonly<{
+        readonly left: stylex.StyleXClassNameFor<"left", "2px">;
+        readonly borderTopLeftRadius: stylex.StyleXClassNameFor<"borderTopLeftRadius", "9999px">;
+        readonly borderBottomLeftRadius: stylex.StyleXClassNameFor<"borderBottomLeftRadius", "9999px">;
+    }>;
+    readonly rangeBgRadiusRight: Readonly<{
+        readonly right: stylex.StyleXClassNameFor<"right", "2px">;
+        readonly borderTopRightRadius: stylex.StyleXClassNameFor<"borderTopRightRadius", "9999px">;
+        readonly borderBottomRightRadius: stylex.StyleXClassNameFor<"borderBottomRightRadius", "9999px">;
+    }>;
+    readonly rangeInsetLeft: Readonly<{
+        readonly left: stylex.StyleXClassNameFor<"left", "2px">;
+    }>;
+    readonly rangeInsetRight: Readonly<{
+        readonly right: stylex.StyleXClassNameFor<"right", "2px">;
+    }>;
+    readonly previewBg: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
+        readonly top: stylex.StyleXClassNameFor<"top", "2px">;
+        readonly bottom: stylex.StyleXClassNameFor<"bottom", "2px">;
+        readonly left: stylex.StyleXClassNameFor<"left", 0>;
+        readonly right: stylex.StyleXClassNameFor<"right", 0>;
+    }>;
+    readonly previewBgRadiusLeft: Readonly<{
+        readonly left: stylex.StyleXClassNameFor<"left", "2px">;
+        readonly borderTopLeftRadius: stylex.StyleXClassNameFor<"borderTopLeftRadius", "9999px">;
+        readonly borderBottomLeftRadius: stylex.StyleXClassNameFor<"borderBottomLeftRadius", "9999px">;
+    }>;
+    readonly previewBgRadiusRight: Readonly<{
+        readonly right: stylex.StyleXClassNameFor<"right", "2px">;
+        readonly borderTopRightRadius: stylex.StyleXClassNameFor<"borderTopRightRadius", "9999px">;
+        readonly borderBottomRightRadius: stylex.StyleXClassNameFor<"borderBottomRightRadius", "9999px">;
+    }>;
+    readonly previewStart: Readonly<{
+        readonly left: stylex.StyleXClassNameFor<"left", "2px">;
+        readonly borderTopLeftRadius: stylex.StyleXClassNameFor<"borderTopLeftRadius", "9999px">;
+        readonly borderBottomLeftRadius: stylex.StyleXClassNameFor<"borderBottomLeftRadius", "9999px">;
+    }>;
+    readonly previewEnd: Readonly<{
+        readonly right: stylex.StyleXClassNameFor<"right", "2px">;
+        readonly borderTopRightRadius: stylex.StyleXClassNameFor<"borderTopRightRadius", "9999px">;
+        readonly borderBottomRightRadius: stylex.StyleXClassNameFor<"borderBottomRightRadius", "9999px">;
+    }>;
+    readonly day: Readonly<{
+        readonly width: stylex.StyleXClassNameFor<"width", "28px">;
+        readonly height: stylex.StyleXClassNameFor<"height", "28px">;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "50%">;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", "inherit">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-base)">;
+        readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+        readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 1>;
+        readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "none" | "background-color, color">;
+        readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "175ms">;
+        readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
+        readonly '::before': stylex.StyleXClassNameFor<"::before", {
+            readonly content: "\"\"";
+            readonly position: "absolute";
+            readonly top: "-2px";
+            readonly right: "-2px";
+            readonly bottom: "-2px";
+            readonly left: "-2px";
+        }>;
+    }>;
+    readonly dayOutside: Readonly<{
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.5>;
+    }>;
+    readonly dayToday: Readonly<{}>;
+    readonly dayTodayInRange: Readonly<{}>;
+    readonly daySelected: Readonly<{}>;
+    readonly dayDisabled: Readonly<{
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "not-allowed">;
+    }>;
+}>;
+export declare const dayCellTheme: Readonly<{
+    readonly rangeBg: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#0082FB33, #0082FB3F)">;
+    }>;
+    readonly previewBg: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#0536590C, #FFFFFF0C)">;
+    }>;
+    readonly day: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0A1317, #DFE2E5)">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", {
+            readonly '@media (hover: hover)': `linear-gradient(${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">}, ${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">})`;
+        } | null>;
+        readonly outline: stylex.StyleXClassNameFor<"outline", `2px solid ${stylex.StyleXVar<"light-dark(#0064E0, #2694FE)">}` | null>;
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", "0" | "2px">;
+    }>;
+    readonly dayOutside: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#4E606F, #AAAFB5)">;
+    }>;
+    readonly dayToday: Readonly<{
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `inset 0 0 0 1px ${stylex.StyleXVar<"light-dark(#CCD3DB, #494D53)">}`>;
+    }>;
+    readonly dayTodayInRange: Readonly<{
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `inset 0 0 0 1px ${stylex.StyleXVar<"light-dark(#0A1317, #DFE2E5)">}`>;
+    }>;
+    readonly daySelected: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#0064E0, #2694FE)">;
+        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#FFFFFF, #FFFFFF)">;
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", {
+            readonly '@media (hover: hover)': `linear-gradient(${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">}, ${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">})`;
+        } | null>;
+    }>;
+    readonly dayDisabled: Readonly<{
+        readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.3>;
+        readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", "none" | {
+            readonly '@media (hover: hover)': "none";
+        }>;
+    }>;
+}>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +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"}

package/dist/Calendar/styles.js

@@ -0,0 +1,293 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file styles.ts
+ * @input Uses stylex, theme tokens
+ * @output Exports calendar styles (structural) and theme styles (customizable)
+ * @position Shared styles; used by Calendar
+ *
+ * Style Organization:
+ * - *Styles objects: Structural/layout styles (spacing, sizing, positioning)
+ * - *Theme objects: Themeable styles (colors, borders) that can be overridden
+ *
+ * SYNC: When modified, update this header
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, sizeVars, radiusVars, durationVars, easeVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
+
+// =============================================================================
+// Calendar Container Styles
+// =============================================================================
+
+export const calendarStyles = {
+  calendar: {
+    k1xSpc: "x1rg5ohu",
+    kmVPX3: "x1b2ylru",
+    k7Eaqz: "x12rczxh",
+    $$css: true
+  },
+  header: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "x1qughib",
+    k1K539: "x1p37lm5",
+    kOIVth: "x1txdalj",
+    $$css: true
+  },
+  monthYearLabel: {
+    kUk6DE: "x98rzlu",
+    k9WMMc: "x2b8uid",
+    k63SB2: "x2mo6ok",
+    kGuDYH: "xcr08ib",
+    kMwMTN: "x1tgivj0",
+    $$css: true
+  },
+  monthsContainer: {
+    k1xSpc: "x78zum5",
+    kOIVth: "x18g69wz",
+    $$css: true
+  },
+  srOnly: {
+    kVAEAm: "x10l6tqk",
+    kzqmXN: "x1i1rx1s",
+    kZKoxP: "xjm9jq1",
+    kmVPX3: "x1717udv",
+    kogj98: "xkdpibf",
+    kVQacm: "xb3r6kr",
+    kMcinP: "xzpqnlu",
+    khDVqt: "xuxw1ft",
+    kMzoRj: "xc342km",
+    $$css: true
+  },
+  navIcon: {
+    kzqmXN: "x12xnipv",
+    kZKoxP: "x6b6gus",
+    $$css: true
+  }
+};
+
+// =============================================================================
+// Month Grid Styles
+// =============================================================================
+
+export const monthGridStyles = {
+  monthGrid: {
+    kUk6DE: "x1cqoux5",
+    $$css: true
+  },
+  weekHeader: {
+    k1xSpc: "xrvj5dj",
+    kumcoG: "x1mzazjb",
+    k1K539: "x14cgwvg",
+    $$css: true
+  },
+  weekHeaderWithNumbers: {
+    kumcoG: "x1wthsqz",
+    $$css: true
+  },
+  dayName: {
+    kzqmXN: "x805d0l",
+    kZKoxP: "x1ueg155",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kGuDYH: "x141an7d",
+    k63SB2: "x1sodnla",
+    kMwMTN: "xv1l7n4",
+    $$css: true
+  },
+  weekNumberHeader: {
+    kzqmXN: "x805d0l",
+    $$css: true
+  },
+  daysGrid: {
+    k1xSpc: "xrvj5dj",
+    kumcoG: "x1mzazjb",
+    $$css: true
+  },
+  daysGridWithNumbers: {
+    kumcoG: "x1wthsqz",
+    $$css: true
+  },
+  weekNumber: {
+    kzqmXN: "x805d0l",
+    kZKoxP: "x1ueg155",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kGuDYH: "x141an7d",
+    kMwMTN: "xv1l7n4",
+    $$css: true
+  },
+  weekRow: {
+    k1xSpc: "xjp7ctv",
+    $$css: true
+  }
+};
+
+// =============================================================================
+// Day Cell Styles - Structural (layout, sizing, positioning)
+// =============================================================================
+
+export const dayCellStyles = {
+  cell: {
+    kVAEAm: "x1n2onr6",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kZKoxP: "x1ueg155",
+    kHBbk8: "xc8icb0",
+    $$css: true
+  },
+  rangeBg: {
+    kVAEAm: "x10l6tqk",
+    k87sOh: "xs7f9wi",
+    krVfgx: "x1c7jfne",
+    kbCHJM: "xu96u03",
+    kCIrl2: "x3m8u43",
+    $$css: true
+  },
+  rangeBgRadiusLeft: {
+    kbCHJM: "x54rlcq",
+    kIxVMA: "x99wiku",
+    kqGeR4: "xi9l6n1",
+    $$css: true
+  },
+  rangeBgRadiusRight: {
+    kCIrl2: "x3lmqil",
+    ksF3WI: "x11ly021",
+    kYm2EN: "x1gu3054",
+    $$css: true
+  },
+  rangeInsetLeft: {
+    kbCHJM: "x54rlcq",
+    $$css: true
+  },
+  rangeInsetRight: {
+    kCIrl2: "x3lmqil",
+    $$css: true
+  },
+  previewBg: {
+    kVAEAm: "x10l6tqk",
+    k87sOh: "xs7f9wi",
+    krVfgx: "x1c7jfne",
+    kbCHJM: "xu96u03",
+    kCIrl2: "x3m8u43",
+    $$css: true
+  },
+  previewBgRadiusLeft: {
+    kbCHJM: "x54rlcq",
+    kIxVMA: "x99wiku",
+    kqGeR4: "xi9l6n1",
+    $$css: true
+  },
+  previewBgRadiusRight: {
+    kCIrl2: "x3lmqil",
+    ksF3WI: "x11ly021",
+    kYm2EN: "x1gu3054",
+    $$css: true
+  },
+  previewStart: {
+    kbCHJM: "x54rlcq",
+    kIxVMA: "x99wiku",
+    kqGeR4: "xi9l6n1",
+    $$css: true
+  },
+  previewEnd: {
+    kCIrl2: "x3lmqil",
+    ksF3WI: "x11ly021",
+    kYm2EN: "x1gu3054",
+    $$css: true
+  },
+  day: {
+    kzqmXN: "x1fvqzum",
+    kZKoxP: "x6k0iem",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kaIpWk: "x16rqkct",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kkrTdU: "x1ypdohk",
+    kMv6JI: "xjb2p0i",
+    kGuDYH: "xjm74w1",
+    kmVPX3: "x1717udv",
+    kVAEAm: "x1n2onr6",
+    kY2c9j: "x1vjfegm",
+    k1ekBW: "xs2xxs2 x4wkmsb",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    kgeoSG: "x1cpjm7i",
+    kEoFBp: "x1hmns74",
+    k96MEf: "x51xajf",
+    kLBHJ3: "x1ydowbf",
+    k5Ofw7: "xe80sof",
+    k75S9Q: "xabwq6t",
+    $$css: true
+  },
+  dayOutside: {
+    kSiTet: "xbyyjgo",
+    $$css: true
+  },
+  dayToday: {
+    $$css: true
+  },
+  dayTodayInRange: {
+    $$css: true
+  },
+  daySelected: {
+    $$css: true
+  },
+  dayDisabled: {
+    kkrTdU: "x1h6gzvc",
+    $$css: true
+  }
+};
+
+// =============================================================================
+// Day Cell Theme - Colors and visual appearance (customizable)
+// =============================================================================
+
+export const dayCellTheme = {
+  rangeBg: {
+    kWkggS: "xgcxg3y",
+    $$css: true
+  },
+  previewBg: {
+    kWkggS: "x1lmrjuc",
+    $$css: true
+  },
+  day: {
+    kMwMTN: "x1tgivj0",
+    kWkggS: "xjbqb8w",
+    kKwaWg: "x1ilzqfv",
+    kI3sdo: "x17nn4n9",
+    kInvED: "x1wfwxd8 x7s97pk",
+    $$css: true
+  },
+  dayOutside: {
+    kMwMTN: "xv1l7n4",
+    $$css: true
+  },
+  dayToday: {
+    kGVxlE: "x1lp15jv",
+    $$css: true
+  },
+  dayTodayInRange: {
+    kGVxlE: "x1iobdd1",
+    $$css: true
+  },
+  daySelected: {
+    kWkggS: "x1ewilqj",
+    kMwMTN: "x17wrial",
+    kKwaWg: "x1ilzqfv",
+    $$css: true
+  },
+  dayDisabled: {
+    kSiTet: "xuzhngd",
+    kKwaWg: "x18o3ruo x8o3jvd",
+    $$css: true
+  }
+};

package/dist/Calendar/utils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @file utils.ts
+ * @input None
+ * @output Re-exports shared date utility functions for calendar components
+ * @position Shared utilities; used by Calendar, CalendarMonthGrid, CalendarDayCell
+ */
+import { plainDateFormat, DATE_FORMAT_WITH_WEEKDAY } from '../utils/plainDate';
+export { type PlainDate, plainDateFromISO as parseISO, plainDateToISO as dateToISO, plainDateIsEqual as isSameDay, plainDateIsInRange as isDateInRange, plainDateGetWeekNumber as getWeekNumber, } from '../utils/plainDate';
+export { plainDateFormat, DATE_FORMAT_WITH_WEEKDAY };
+/** @deprecated Use `plainDateFormat(pd, DATE_FORMAT_WITH_WEEKDAY)` instead. */
+export declare function formatAccessibleDate(...args: Parameters<typeof plainDateFormat>): string;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/Calendar/utils.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,EAAC,eAAe,EAAE,wBAAwB,EAAC,MAAM,oBAAoB,CAAC;AAE7E,OAAO,EACL,KAAK,SAAS,EACd,gBAAgB,IAAI,QAAQ,EAC5B,cAAc,IAAI,SAAS,EAC3B,gBAAgB,IAAI,SAAS,EAC7B,kBAAkB,IAAI,aAAa,EACnC,sBAAsB,IAAI,aAAa,GACxC,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAC,eAAe,EAAE,wBAAwB,EAAC,CAAC;AAEnD,+EAA+E;AAC/E,wBAAgB,oBAAoB,CAClC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,GAC1C,MAAM,CAER"}