@12-apps/ui 5.0.0 → 5.0.1

package/dist/chunk-DFVRZ3UK.js

@@ -0,0 +1,689 @@
+// src/components/form/Calendar/Calendar.tsx
+import { Box as Box3, Paper } from "@mui/material";
+import React from "react";
+
+// src/components/form/Calendar/Calendar.helpers.ts
+var CALENDAR_DEFAULTS = {
+  selectionMode: "single",
+  value: null,
+  range: { start: null, end: null },
+  firstDayOfWeek: 0,
+  locale: "en-US",
+  showOutsideDays: true,
+  minRangeLength: 1,
+  allowSameDayRange: true,
+  autoFocus: false
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveCalendarProps = (props) => {
+  const merged = { ...CALENDAR_DEFAULTS, ...definedProps(props) };
+  const defaultMonths = merged.selectionMode === "range" ? 2 : 1;
+  return { ...merged, monthsToShow: merged.numberOfMonths ?? defaultMonths };
+};
+
+// src/components/form/Calendar/Calendar.hooks.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+// src/components/form/Calendar/Calendar.dates.ts
+var DAYS_PER_WEEK = 7;
+var MAX_CELLS = 42;
+var NOON = 12;
+var normalizeDate = (date) => {
+  const normalized = new Date(date);
+  normalized.setHours(NOON, 0, 0, 0);
+  return normalized;
+};
+var isSameDay = (date1, date2) => date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+var isBetween = (date, start, end) => {
+  const normalized = normalizeDate(date);
+  return normalized >= normalizeDate(start) && normalized <= normalizeDate(end);
+};
+var addDays = (date, days) => {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+};
+var addMonths = (date, months) => {
+  const result = new Date(date);
+  result.setMonth(result.getMonth() + months);
+  return result;
+};
+var startOfWeek = (date, firstDayOfWeek = 0) => {
+  const result = new Date(date);
+  const day = result.getDay();
+  const diff = (day < firstDayOfWeek ? DAYS_PER_WEEK : 0) + day - firstDayOfWeek;
+  result.setDate(result.getDate() - diff);
+  return result;
+};
+var endOfMonth = (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0);
+var dayKey = (date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+var generateMonthMatrix = (month, year, firstDayOfWeek = 0) => {
+  const firstDay = new Date(year, month, 1);
+  const lastDay = endOfMonth(firstDay);
+  const currentDate = startOfWeek(firstDay, firstDayOfWeek);
+  const weeks = [];
+  let currentWeek = [];
+  for (let i = 0; i < MAX_CELLS; i++) {
+    currentWeek.push({
+      date: new Date(currentDate),
+      inCurrentMonth: currentDate.getMonth() === month,
+      key: dayKey(currentDate)
+    });
+    if (currentWeek.length === DAYS_PER_WEEK) {
+      weeks.push(currentWeek);
+      currentWeek = [];
+    }
+    currentDate.setDate(currentDate.getDate() + 1);
+    if (currentWeek.length === 0 && currentDate > lastDay) break;
+  }
+  return { weeks, month, year };
+};
+var getWeekdayNames = (locale = "en-US", firstDayOfWeek = 0) => {
+  const baseDate = new Date(2025, 0, 5);
+  const weekdays = [];
+  for (let i = 0; i < DAYS_PER_WEEK; i++) {
+    const date = addDays(baseDate, (i + firstDayOfWeek) % DAYS_PER_WEEK);
+    weekdays.push(date.toLocaleDateString(locale, { weekday: "narrow" }));
+  }
+  return weekdays;
+};
+var getMonthName = (month, year, locale = "en-US") => new Date(year, month, 1).toLocaleDateString(locale, { month: "long", year: "numeric" });
+
+// src/components/form/Calendar/Calendar.keyboard.ts
+var DAYS_PER_WEEK2 = 7;
+var MONTHS_PER_YEAR = 12;
+var NAVIGATION = {
+  ArrowLeft: (date) => addDays(date, -1),
+  ArrowRight: (date) => addDays(date, 1),
+  ArrowUp: (date) => addDays(date, -DAYS_PER_WEEK2),
+  ArrowDown: (date) => addDays(date, DAYS_PER_WEEK2),
+  Home: (date, { firstDayOfWeek }) => startOfWeek(date, firstDayOfWeek),
+  End: (date, { firstDayOfWeek }) => addDays(startOfWeek(date, firstDayOfWeek), DAYS_PER_WEEK2 - 1),
+  // Shift jumps a year rather than a month.
+  PageUp: (date, { shiftKey }) => addMonths(date, shiftKey ? -MONTHS_PER_YEAR : -1),
+  PageDown: (date, { shiftKey }) => addMonths(date, shiftKey ? MONTHS_PER_YEAR : 1)
+};
+var ACTIVATION_KEYS = ["Enter", " "];
+var navigateFocus = (key, date, context) => NAVIGATION[key]?.(date, context) ?? null;
+
+// src/components/form/Calendar/Calendar.selection.ts
+var MS_PER_DAY = 1e3 * 60 * 60 * 24;
+var strictlyBetween = (date, start, end) => isBetween(date, start, end) && !isSameDay(date, start) && !isSameDay(date, end);
+var violatesLength = (nights, minRangeLength, maxRangeLength) => {
+  if (minRangeLength && nights < minRangeLength - 1) return true;
+  if (maxRangeLength && nights > maxRangeLength - 1) return true;
+  return false;
+};
+var nextRangeStep = ({
+  start,
+  end,
+  candidate,
+  allowSameDayRange,
+  minRangeLength,
+  maxRangeLength
+}) => {
+  if (!start || end) return { kind: "start", range: { start: candidate, end: null } };
+  const [rangeStart, rangeEnd] = candidate < start ? [candidate, start] : [start, candidate];
+  if (!allowSameDayRange && isSameDay(rangeStart, rangeEnd)) return { kind: "rejected" };
+  const nights = Math.ceil((rangeEnd.getTime() - rangeStart.getTime()) / MS_PER_DAY);
+  if (violatesLength(nights, minRangeLength, maxRangeLength)) return { kind: "rejected" };
+  return { kind: "complete", range: { start: rangeStart, end: rangeEnd } };
+};
+var isDateSelected = ({
+  selectionMode,
+  value,
+  range,
+  date
+}) => {
+  if (selectionMode === "single") return value ? isSameDay(date, value) : false;
+  const { start, end } = range;
+  return Boolean(start && isSameDay(date, start) || end && isSameDay(date, end));
+};
+var isDateInRange = ({
+  selectionMode,
+  range,
+  hoveredDate,
+  date,
+  isDisabled
+}) => {
+  if (selectionMode !== "range") return false;
+  const { start, end } = range;
+  if (start && end) return strictlyBetween(date, start, end);
+  if (!start || !hoveredDate || isDisabled(hoveredDate)) return false;
+  const [previewStart, previewEnd] = start < hoveredDate ? [start, hoveredDate] : [hoveredDate, start];
+  return strictlyBetween(date, previewStart, previewEnd);
+};
+var isDateDisabledBy = ({
+  date,
+  minDate,
+  maxDate,
+  isDateDisabled
+}) => {
+  if (minDate && date < normalizeDate(minDate)) return true;
+  if (maxDate && date > normalizeDate(maxDate)) return true;
+  return Boolean(isDateDisabled?.(date));
+};
+var buildDayArgs = ({
+  day,
+  selectionMode,
+  value,
+  range,
+  hoveredDate,
+  today,
+  isDisabled
+}) => {
+  const { date, inCurrentMonth } = day;
+  const inRangeMode = selectionMode === "range";
+  return {
+    date,
+    inCurrentMonth,
+    selected: isDateSelected({ selectionMode, value, range, date }),
+    inRange: isDateInRange({ selectionMode, range, hoveredDate, date, isDisabled }),
+    rangeStart: Boolean(inRangeMode && range.start && isSameDay(date, range.start)),
+    rangeEnd: Boolean(inRangeMode && range.end && isSameDay(date, range.end)),
+    disabled: isDisabled(date),
+    today: isSameDay(date, today),
+    hovered: hoveredDate ? isSameDay(date, hoveredDate) : false
+  };
+};
+
+// src/components/form/Calendar/Calendar.hooks.ts
+var startOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+var initialFocus = (props, today) => {
+  if (props.selectionMode === "single" && props.value) return normalizeDate(props.value);
+  if (props.selectionMode === "range" && props.range.start) return normalizeDate(props.range.start);
+  return today;
+};
+var useCalendarState = (props, today) => {
+  const [focusedDate, setFocusedDate] = useState(() => initialFocus(props, today));
+  const [hoveredDate, setHoveredDate] = useState(null);
+  const [currentMonth, setCurrentMonth] = useState(() => startOfMonth(focusedDate));
+  return {
+    focusedDate,
+    setFocusedDate,
+    hoveredDate,
+    setHoveredDate,
+    currentMonth,
+    setCurrentMonth
+  };
+};
+var useAutoFocusGrid = (autoFocus) => {
+  const gridRef = useRef(null);
+  useEffect(() => {
+    if (autoFocus && gridRef.current) gridRef.current.focus();
+  }, [autoFocus]);
+  return gridRef;
+};
+var useVisibleMonths = ({
+  currentMonth,
+  monthsToShow,
+  firstDayOfWeek
+}) => useMemo(() => {
+  const matrices = [];
+  let cursor = currentMonth;
+  for (let i = 0; i < monthsToShow; i++) {
+    matrices.push(generateMonthMatrix(cursor.getMonth(), cursor.getFullYear(), firstDayOfWeek));
+    cursor = addMonths(cursor, 1);
+  }
+  return matrices;
+}, [currentMonth, monthsToShow, firstDayOfWeek]);
+var useDateClick = ({
+  props,
+  isDisabled,
+  setFocusedDate
+}) => {
+  const {
+    selectionMode,
+    range,
+    onChange,
+    onRangeChange,
+    onIntermediateRangeChange,
+    allowSameDayRange,
+    minRangeLength,
+    maxRangeLength
+  } = props;
+  return useCallback(
+    (date) => {
+      if (isDisabled(date)) return;
+      const candidate = normalizeDate(date);
+      setFocusedDate(candidate);
+      if (selectionMode === "single") {
+        onChange?.(candidate);
+        return;
+      }
+      const step = nextRangeStep({
+        start: range.start,
+        end: range.end,
+        candidate,
+        allowSameDayRange,
+        minRangeLength,
+        maxRangeLength
+      });
+      if (step.kind === "rejected") return;
+      if (step.kind === "complete") onRangeChange?.(step.range);
+      onIntermediateRangeChange?.(step.range);
+    },
+    [
+      selectionMode,
+      range,
+      onChange,
+      onRangeChange,
+      onIntermediateRangeChange,
+      isDisabled,
+      allowSameDayRange,
+      minRangeLength,
+      maxRangeLength,
+      setFocusedDate
+    ]
+  );
+};
+var useHoverHandlers = ({
+  selectionMode,
+  range,
+  isDisabled,
+  setHoveredDate
+}) => {
+  const handleDateMouseEnter = useCallback(
+    (date) => {
+      if (selectionMode === "range" && range.start && !range.end && !isDisabled(date)) {
+        setHoveredDate(normalizeDate(date));
+      }
+    },
+    [selectionMode, range, isDisabled, setHoveredDate]
+  );
+  const handleDateMouseLeave = useCallback(() => setHoveredDate(null), [setHoveredDate]);
+  return { handleDateMouseEnter, handleDateMouseLeave };
+};
+var useKeyboardHandler = ({
+  focusedDate,
+  firstDayOfWeek,
+  currentMonth,
+  handleDateClick,
+  setFocusedDate,
+  setCurrentMonth,
+  setHoveredDate
+}) => useCallback(
+  (event) => {
+    const { key } = event;
+    const moved = navigateFocus(key, focusedDate, { firstDayOfWeek, shiftKey: event.shiftKey });
+    if (moved) {
+      event.preventDefault();
+      setFocusedDate(normalizeDate(moved));
+      const month = startOfMonth(moved);
+      if (month.getTime() !== currentMonth.getTime()) setCurrentMonth(month);
+      return;
+    }
+    if (ACTIVATION_KEYS.includes(key)) {
+      event.preventDefault();
+      handleDateClick(focusedDate);
+      return;
+    }
+    if (key === "Escape") {
+      event.preventDefault();
+      setHoveredDate(null);
+    }
+  },
+  [
+    focusedDate,
+    firstDayOfWeek,
+    currentMonth,
+    handleDateClick,
+    setFocusedDate,
+    setCurrentMonth,
+    setHoveredDate
+  ]
+);
+var useCalendar = (props) => {
+  const { monthsToShow, firstDayOfWeek, locale, minDate, maxDate, isDateDisabled } = props;
+  const today = useMemo(() => normalizeDate(/* @__PURE__ */ new Date()), []);
+  const state = useCalendarState(props, today);
+  const gridRef = useAutoFocusGrid(props.autoFocus);
+  const monthMatrices = useVisibleMonths({
+    currentMonth: state.currentMonth,
+    monthsToShow,
+    firstDayOfWeek
+  });
+  const weekdayNames = useMemo(
+    () => getWeekdayNames(locale, firstDayOfWeek),
+    [locale, firstDayOfWeek]
+  );
+  const isDisabled = useCallback(
+    (date) => isDateDisabledBy({ date, minDate, maxDate, isDateDisabled }),
+    [minDate, maxDate, isDateDisabled]
+  );
+  const { setCurrentMonth } = state;
+  const goToPreviousMonth = useCallback(
+    () => setCurrentMonth((prev) => addMonths(prev, -1)),
+    [setCurrentMonth]
+  );
+  const goToNextMonth = useCallback(
+    () => setCurrentMonth((prev) => addMonths(prev, 1)),
+    [setCurrentMonth]
+  );
+  const handleDateClick = useDateClick({
+    props,
+    isDisabled,
+    setFocusedDate: state.setFocusedDate
+  });
+  const { handleDateMouseEnter, handleDateMouseLeave } = useHoverHandlers({
+    selectionMode: props.selectionMode,
+    range: props.range,
+    isDisabled,
+    setHoveredDate: state.setHoveredDate
+  });
+  const handleKeyDown = useKeyboardHandler({
+    focusedDate: state.focusedDate,
+    firstDayOfWeek,
+    currentMonth: state.currentMonth,
+    handleDateClick,
+    setFocusedDate: state.setFocusedDate,
+    setCurrentMonth: state.setCurrentMonth,
+    setHoveredDate: state.setHoveredDate
+  });
+  return {
+    gridRef,
+    today,
+    focusedDate: state.focusedDate,
+    hoveredDate: state.hoveredDate,
+    monthMatrices,
+    weekdayNames,
+    isDisabled,
+    goToPreviousMonth,
+    goToNextMonth,
+    handleDateClick,
+    handleDateMouseEnter,
+    handleDateMouseLeave,
+    handleKeyDown
+  };
+};
+
+// src/components/form/Calendar/CalendarMonth.tsx
+import ChevronLeft from "@mui/icons-material/ChevronLeft";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import { Box as Box2, IconButton, Typography } from "@mui/material";
+
+// src/components/form/Calendar/CalendarDay.tsx
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CELL_SIZE = 40;
+var CLASS_FLAGS = [
+  ["selected", "selected"],
+  ["inRange", "in-range"],
+  ["rangeStart", "range-start"],
+  ["rangeEnd", "range-end"],
+  ["disabled", "disabled"],
+  ["today", "today"],
+  ["outside", "outside"],
+  ["hovered", "hovered"],
+  ["focused", "focused"]
+];
+var dayClassNames = (state, custom) => [
+  "calendar-day",
+  ...CLASS_FLAGS.filter(([flag]) => state[flag]).map(([, name]) => name),
+  ...custom ? [custom] : []
+].join(" ");
+var isEndpoint = (day) => day.selected || day.rangeStart || day.rangeEnd;
+var backgroundFor = (day) => {
+  if (isEndpoint(day)) return "primary.main";
+  if (day.inRange || day.hovered) return "primary.light";
+  return "transparent";
+};
+var colorFor = (day, visible) => {
+  if (isEndpoint(day)) return "primary.contrastText";
+  if (day.disabled) return "text.disabled";
+  if (!visible) return "transparent";
+  return "text.primary";
+};
+var hoverBackgroundFor = (day) => {
+  if (day.disabled) return void 0;
+  return day.selected ? "primary.dark" : "action.hover";
+};
+var dayCellSx = (day, visible) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: CELL_SIZE,
+  height: CELL_SIZE,
+  border: "none",
+  borderRadius: 1,
+  cursor: day.disabled ? "not-allowed" : "pointer",
+  backgroundColor: backgroundFor(day),
+  color: colorFor(day, visible),
+  opacity: !day.inCurrentMonth && visible ? 0.5 : 1,
+  fontWeight: day.today ? "bold" : "normal",
+  "&:hover": {
+    backgroundColor: hoverBackgroundFor(day)
+  },
+  "&:focus": {
+    outline: "2px solid",
+    outlineColor: "primary.main",
+    outlineOffset: 1
+  }
+});
+var CalendarDay = ({
+  day,
+  focused,
+  showOutsideDays,
+  dayClassName,
+  onSelect,
+  onHover,
+  onHoverEnd
+}) => {
+  const visible = day.inCurrentMonth || showOutsideDays;
+  const state = { ...day, outside: !day.inCurrentMonth, focused };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "button",
+      role: "gridcell",
+      tabIndex: focused ? 0 : -1,
+      "aria-selected": day.selected,
+      "aria-disabled": day.disabled,
+      "aria-current": day.today ? "date" : void 0,
+      className: dayClassNames(state, dayClassName?.(day)),
+      "data-testid": `calendar-date-${day.date.getDate()}`,
+      onClick: () => onSelect(day.date),
+      onMouseEnter: () => onHover(day.date),
+      onMouseLeave: onHoverEnd,
+      sx: dayCellSx(day, visible),
+      children: [
+        day.selected && /* @__PURE__ */ jsx(Box, { component: "span", "data-testid": "calendar-selected-date", sx: { display: "none" } }),
+        day.today && /* @__PURE__ */ jsx(Box, { component: "span", "data-testid": "calendar-today", sx: { display: "none" } }),
+        visible ? day.date.getDate() : ""
+      ]
+    }
+  );
+};
+
+// src/components/form/Calendar/CalendarDayCell.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var CalendarDayCell = ({
+  day,
+  focusedDate,
+  showOutsideDays,
+  renderDay,
+  dayClassName,
+  onSelect,
+  onHover,
+  onHoverEnd,
+  ...context
+}) => {
+  const args = buildDayArgs({ day, ...context });
+  if (renderDay) return /* @__PURE__ */ jsx2(Fragment, { children: renderDay(args) });
+  return /* @__PURE__ */ jsx2(
+    CalendarDay,
+    {
+      day: args,
+      focused: isSameDay(args.date, focusedDate),
+      showOutsideDays,
+      dayClassName,
+      onSelect,
+      onHover,
+      onHoverEnd
+    }
+  );
+};
+
+// src/components/form/Calendar/CalendarMonth.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SPACER_WIDTH = 32;
+var GRID_SX = { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0.5 };
+var MonthNavHeader = ({ title, showPrevious, showNext, onPreviousMonth, onNextMonth }) => /* @__PURE__ */ jsxs2(
+  Box2,
+  {
+    sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 },
+    "data-testid": "calendar-header",
+    children: [
+      showPrevious && /* @__PURE__ */ jsx3(IconButton, { onClick: onPreviousMonth, size: "small", "data-testid": "calendar-prev-month", children: /* @__PURE__ */ jsx3(ChevronLeft, {}) }),
+      /* @__PURE__ */ jsx3(
+        Typography,
+        {
+          variant: "h6",
+          component: "h2",
+          sx: { fontWeight: "bold", flex: 1, textAlign: "center" },
+          children: title
+        }
+      ),
+      showNext && /* @__PURE__ */ jsx3(IconButton, { onClick: onNextMonth, size: "small", "data-testid": "calendar-next-month", children: /* @__PURE__ */ jsx3(ChevronRight, {}) }),
+      !showPrevious && !showNext && /* @__PURE__ */ jsx3(Box2, { sx: { width: SPACER_WIDTH } })
+    ]
+  }
+);
+var WeekdayHeader = ({ weekdayNames }) => /* @__PURE__ */ jsx3(Box2, { sx: { ...GRID_SX, mb: 1 }, children: weekdayNames.map((weekday, index) => /* @__PURE__ */ jsx3(
+  Box2,
+  {
+    role: "columnheader",
+    "data-testid": `calendar-weekday-${index}`,
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: SPACER_WIDTH,
+      fontSize: "0.875rem",
+      fontWeight: "bold",
+      color: "text.secondary"
+    },
+    children: weekday
+  },
+  `weekday-${index}`
+)) });
+var CalendarMonth = ({
+  matrix,
+  monthIndex,
+  monthsToShow,
+  locale,
+  weekdayNames,
+  renderHeader,
+  onPreviousMonth,
+  onNextMonth,
+  dayContext
+}) => {
+  const monthName = getMonthName(matrix.month, matrix.year, locale);
+  const title = renderHeader ? renderHeader({ month: matrix.month, year: matrix.year }) : monthName;
+  return (
+    /* The month is addressable by its position, because in a multi-month
+       calendar every day number appears once PER MONTH — `calendar-date-5` is
+       January's 5th and February's. Without a per-month hook a test can only
+       reach a day positionally, which is exactly what the flakiness gate
+       refuses. Additive: `calendar-grid` below is unchanged. */
+    /* @__PURE__ */ jsxs2(Box2, { sx: { minWidth: 280 }, "data-testid": `calendar-month-${monthIndex}`, children: [
+      /* @__PURE__ */ jsx3(
+        MonthNavHeader,
+        {
+          title,
+          showPrevious: monthIndex === 0,
+          showNext: monthIndex === monthsToShow - 1,
+          onPreviousMonth,
+          onNextMonth
+        }
+      ),
+      /* @__PURE__ */ jsx3(WeekdayHeader, { weekdayNames }),
+      /* @__PURE__ */ jsx3(
+        Box2,
+        {
+          role: "grid",
+          "aria-labelledby": `month-${monthIndex}`,
+          "data-testid": "calendar-grid",
+          sx: GRID_SX,
+          children: matrix.weeks.flat().map((day) => /* @__PURE__ */ jsx3(CalendarDayCell, { day, ...dayContext }, day.key))
+        }
+      )
+    ] })
+  );
+};
+
+// src/components/form/Calendar/Calendar.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var containerSx = (monthsToShow) => ({
+  p: 3,
+  display: "flex",
+  flexDirection: monthsToShow > 1 ? "row" : "column",
+  gap: 3,
+  outline: "none",
+  "&:focus-within": {
+    outline: "2px solid",
+    outlineColor: "primary.main",
+    outlineOffset: 2
+  }
+});
+var Calendar = React.forwardRef((componentProps, ref) => {
+  const props = resolveCalendarProps(componentProps);
+  const { monthsToShow, locale, renderHeader, renderFooter, className } = props;
+  const calendar = useCalendar(props);
+  const dayContext = {
+    selectionMode: props.selectionMode,
+    value: props.value,
+    range: props.range,
+    showOutsideDays: props.showOutsideDays,
+    renderDay: props.renderDay,
+    dayClassName: props.dayClassName,
+    hoveredDate: calendar.hoveredDate,
+    focusedDate: calendar.focusedDate,
+    today: calendar.today,
+    isDisabled: calendar.isDisabled,
+    onSelect: calendar.handleDateClick,
+    onHover: calendar.handleDateMouseEnter,
+    onHoverEnd: calendar.handleDateMouseLeave
+  };
+  return /* @__PURE__ */ jsxs3(
+    Paper,
+    {
+      ref,
+      className,
+      role: "application",
+      "aria-label": "Calendar",
+      tabIndex: 0,
+      onKeyDown: calendar.handleKeyDown,
+      "data-testid": "calendar-container",
+      sx: containerSx(monthsToShow),
+      children: [
+        /* @__PURE__ */ jsx4(Box3, { ref: calendar.gridRef, sx: { display: "flex", gap: 3, flexWrap: "wrap" }, children: calendar.monthMatrices.map((matrix, index) => /* @__PURE__ */ jsx4(
+          CalendarMonth,
+          {
+            matrix,
+            monthIndex: index,
+            monthsToShow,
+            locale,
+            weekdayNames: calendar.weekdayNames,
+            renderHeader,
+            onPreviousMonth: calendar.goToPreviousMonth,
+            onNextMonth: calendar.goToNextMonth,
+            dayContext
+          },
+          `month-${matrix.year}-${matrix.month}`
+        )) }),
+        renderFooter && /* @__PURE__ */ jsx4(Box3, { sx: { mt: 2, pt: 2, borderTop: 1, borderColor: "divider" }, children: renderFooter })
+      ]
+    }
+  );
+});
+Calendar.displayName = "Calendar";
+
+export {
+  addDays,
+  startOfWeek,
+  Calendar
+};
+//# sourceMappingURL=chunk-DFVRZ3UK.js.map