@ceed/ads 1.31.1 → 1.32.0

package/dist/index.cjs

@@ -1026,8 +1026,12 @@ var useCalendarProps = (inProps) => {
 // src/components/Calendar/hooks/use-calendar.ts
 var import_react13 = require("react");
 var useCalendar = (ownerState) => {
-  const [hoverDay, setHoverDay] = (0, import_react13.useState)(null);
-  const [hoverMonth, setHoverMonth] = (0, import_react13.useState)(null);
+  const [localHoverDay, setLocalHoverDay] = (0, import_react13.useState)(null);
+  const [localHoverMonth, setLocalHoverMonth] = (0, import_react13.useState)(null);
+  const hoverDay = ownerState.hoverDay !== void 0 ? ownerState.hoverDay : localHoverDay;
+  const setHoverDay = ownerState.onHoverDayChange ?? setLocalHoverDay;
+  const hoverMonth = ownerState.hoverMonth !== void 0 ? ownerState.hoverMonth : localHoverMonth;
+  const setHoverMonth = ownerState.onHoverMonthChange ?? setLocalHoverMonth;
   return {
     calendarTitle: ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default"),
     onPrev: (0, import_react13.useCallback)(() => {
@@ -1226,11 +1230,18 @@ var MONTH_NAV_CLICK_THRESHOLD = 3;
 var MONTH_VIEW_HINT_DURATION_MS = 5e3;
 var MONTH_VIEW_HINT_COOLDOWN_MS = 3e4;
 var lastMonthViewAssistHintShownAt = 0;
+var CALENDAR_PANEL_WIDTH = 264;
+var CALENDAR_PANEL_GAP = 16;
 var CalendarRoot = (0, import_joy19.styled)("div", {
   name: "Calendar",
   slot: "root"
+})({});
+var CalendarMultiContainer = (0, import_joy19.styled)("div", {
+  name: "Calendar",
+  slot: "multiContainer"
 })({
-  maxWidth: "264px"
+  display: "flex",
+  gap: `${CALENDAR_PANEL_GAP}px`
 });
 var CalendarHeader = (0, import_joy19.styled)("div", {
   name: "Calendar",
@@ -1265,6 +1276,16 @@ var CalendarViewTable = (0, import_joy19.styled)(import_framer_motion13.motion.t
     paddingBottom: theme.spacing(2)
   }
 }));
+var StaticCalendarViewTable = (0, import_joy19.styled)("table")(({ theme }) => ({
+  borderSpacing: 0,
+  "& td, & th": {
+    padding: 0
+  },
+  "& th": {
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2)
+  }
+}));
 var CalendarWeekHeaderContainer = (0, import_joy19.styled)("thead", {
   name: "Calendar",
   slot: "weekHeaderContainer"
@@ -1513,6 +1534,133 @@ var PickerMonths = (props) => {
     /* @__PURE__ */ import_react14.default.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ import_react14.default.createElement(import_react14.Fragment, { key: months.join("_") }, /* @__PURE__ */ import_react14.default.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ import_react14.default.createElement(import_react14.Fragment, { key: monthIndex }, /* @__PURE__ */ import_react14.default.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ import_react14.default.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, getMonthNameFromIndex(monthIndex, ownerState.locale))), j < 3 && /* @__PURE__ */ import_react14.default.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))), i < chunkedMonths.length - 1 && /* @__PURE__ */ import_react14.default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ import_react14.default.createElement("td", { colSpan: 7, style: { height: 4 } })))))
   )));
 };
+var PlainPickerDays = ({ ownerState }) => {
+  const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
+  const calendarDates = (0, import_react14.useMemo)(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
+  const weekdayNames = (0, import_react14.useMemo)(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
+  return /* @__PURE__ */ import_react14.default.createElement(StaticCalendarViewTable, null, /* @__PURE__ */ import_react14.default.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ import_react14.default.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ import_react14.default.createElement(import_react14.Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ import_react14.default.createElement("th", null, /* @__PURE__ */ import_react14.default.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ import_react14.default.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))), /* @__PURE__ */ import_react14.default.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ import_react14.default.createElement(import_react14.Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ import_react14.default.createElement("tr", null, weekDates.map(
+    (date, i) => date ? /* @__PURE__ */ import_react14.default.createElement(import_react14.Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ import_react14.default.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ import_react14.default.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)), i < 6 && /* @__PURE__ */ import_react14.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ import_react14.default.createElement(import_react14.Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ import_react14.default.createElement("td", null), i < 6 && /* @__PURE__ */ import_react14.default.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
+  )), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ import_react14.default.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ import_react14.default.createElement("td", { colSpan: 13, style: { height: 4 } }))))));
+};
+var MultiMonthPickerDays = ({
+  panels,
+  direction,
+  numberOfMonths
+}) => {
+  const slideDistance = CALENDAR_PANEL_WIDTH * numberOfMonths + CALENDAR_PANEL_GAP * (numberOfMonths - 1) + CALENDAR_PANEL_WIDTH;
+  const multiVariants = {
+    enter: (dir) => ({ x: dir > 0 ? slideDistance : -slideDistance, opacity: 0 }),
+    center: { position: "relative", zIndex: 1, x: 0, opacity: 1 },
+    exit: (dir) => ({
+      position: "absolute",
+      zIndex: 0,
+      x: dir < 0 ? slideDistance : -slideDistance,
+      opacity: 0
+    })
+  };
+  const key = `${panels[0].viewMonth.toISOString()}_${direction}`;
+  return /* @__PURE__ */ import_react14.default.createElement("div", { style: { position: "relative", overflow: "hidden", minHeight: "250px" } }, /* @__PURE__ */ import_react14.default.createElement(import_framer_motion13.AnimatePresence, { initial: false, custom: direction }, /* @__PURE__ */ import_react14.default.createElement(
+    import_framer_motion13.motion.div,
+    {
+      key,
+      custom: direction,
+      variants: multiVariants,
+      initial: "enter",
+      animate: "center",
+      exit: "exit",
+      transition: {
+        x: { type: "spring", stiffness: 300, damping: 30 },
+        opacity: { duration: 0.2 }
+      },
+      drag: "x",
+      dragConstraints: { left: 0, right: 0 },
+      dragElastic: 1,
+      onDragEnd: (e, { offset, velocity }) => {
+        const swipe = swipePower(offset.x, velocity.x);
+        if (swipe < -swipeConfidenceThreshold) {
+          const date = new Date(panels[0].viewMonth);
+          date.setMonth(date.getMonth() + 1);
+          panels[0].onMonthChange?.(date);
+        } else if (swipe > swipeConfidenceThreshold) {
+          const date = new Date(panels[0].viewMonth);
+          date.setMonth(date.getMonth() - 1);
+          panels[0].onMonthChange?.(date);
+        }
+      },
+      style: { display: "flex", gap: `${CALENDAR_PANEL_GAP}px`, top: 0, left: 0, width: "100%" }
+    },
+    panels.map((panelOwnerState) => /* @__PURE__ */ import_react14.default.createElement(
+      "div",
+      {
+        key: panelOwnerState.viewMonth.toISOString(),
+        style: {
+          flex: "0 0 auto",
+          width: `${CALENDAR_PANEL_WIDTH}px`,
+          paddingLeft: "16px",
+          paddingRight: "16px",
+          boxSizing: "border-box"
+        }
+      },
+      /* @__PURE__ */ import_react14.default.createElement(PlainPickerDays, { ownerState: panelOwnerState })
+    ))
+  )));
+};
+var CalendarPanel = ({
+  ownerState,
+  panelIndex,
+  totalPanels,
+  onPrev,
+  onNext,
+  onSwitchView,
+  isMonthViewAssistHintOpen,
+  monthViewHintMessage
+}) => {
+  const showPrev = panelIndex === 0;
+  const showNext = panelIndex === totalPanels - 1;
+  const title = ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default");
+  return /* @__PURE__ */ import_react14.default.createElement("div", { style: { flex: 1, maxWidth: `${CALENDAR_PANEL_WIDTH}px` } }, /* @__PURE__ */ import_react14.default.createElement(CalendarHeader, null, /* @__PURE__ */ import_react14.default.createElement(
+    IconButton_default,
+    {
+      size: "sm",
+      onClick: onPrev,
+      "aria-label": `Previous ${ownerState.view === "day" ? "Month" : "Year"}`,
+      style: { visibility: showPrev ? "visible" : "hidden" }
+    },
+    /* @__PURE__ */ import_react14.default.createElement(import_ChevronLeft.default, null)
+  ), /* @__PURE__ */ import_react14.default.createElement(
+    Tooltip_default,
+    {
+      title: monthViewHintMessage,
+      arrow: true,
+      open: panelIndex === 0 && isMonthViewAssistHintOpen,
+      placement: "bottom",
+      disableFocusListener: true,
+      disableHoverListener: true,
+      disableTouchListener: true,
+      variant: "solid"
+    },
+    /* @__PURE__ */ import_react14.default.createElement(
+      CalendarSwitchViewButton,
+      {
+        ownerState,
+        variant: "plain",
+        color: "neutral",
+        onClick: onSwitchView,
+        "aria-label": "Switch Calendar View"
+      },
+      title
+    )
+  ), /* @__PURE__ */ import_react14.default.createElement(
+    IconButton_default,
+    {
+      size: "sm",
+      onClick: onNext,
+      "aria-label": `Next ${ownerState.view === "day" ? "Month" : "Year"}`,
+      style: { visibility: showNext ? "visible" : "hidden" }
+    },
+    /* @__PURE__ */ import_react14.default.createElement(import_ChevronRight.default, null)
+  )));
+};
 var Calendar = (0, import_react14.forwardRef)((inProps, ref) => {
   const [props, ownerState] = useCalendarProps(inProps);
   const {
@@ -1529,6 +1677,7 @@ var Calendar = (0, import_react14.forwardRef)((inProps, ref) => {
     maxDate,
     disableFuture,
     disablePast,
+    numberOfMonths,
     ...others
   } = props;
   const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
@@ -1536,6 +1685,9 @@ var Calendar = (0, import_react14.forwardRef)((inProps, ref) => {
   const monthNavClickTimestampsRef = (0, import_react14.useRef)([]);
   const monthViewAssistHintShownInSessionRef = (0, import_react14.useRef)(false);
   const monthViewAssistHintTimeoutRef = (0, import_react14.useRef)(null);
+  const [hoverDay, setHoverDay] = (0, import_react14.useState)(null);
+  const [hoverMonth, setHoverMonth] = (0, import_react14.useState)(null);
+  const resolvedNumberOfMonths = numberOfMonths ?? 1;
   const hasEndDate = Boolean(value?.[1]);
   const isRangeHintEligible = Boolean(rangeSelection && !hasEndDate);
   const isHintEligible = Boolean(view === "day" && (!rangeSelection || isRangeHintEligible));
@@ -1598,7 +1750,71 @@ var Calendar = (0, import_react14.forwardRef)((inProps, ref) => {
     closeMonthViewAssistHint();
     onViewChange?.();
   }, [closeMonthViewAssistHint, onViewChange]);
-  return /* @__PURE__ */ import_react14.default.createElement(CalendarRoot, { ref, ...others }, /* @__PURE__ */ import_react14.default.createElement(CalendarHeader, null, /* @__PURE__ */ import_react14.default.createElement(IconButton_default, { size: "sm", onClick: handlePrevClick, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ import_react14.default.createElement(import_ChevronLeft.default, null)), /* @__PURE__ */ import_react14.default.createElement(
+  const maxWidth = CALENDAR_PANEL_WIDTH * resolvedNumberOfMonths + CALENDAR_PANEL_GAP * (resolvedNumberOfMonths - 1);
+  if (resolvedNumberOfMonths > 1) {
+    const panels = Array.from({ length: resolvedNumberOfMonths }, (_, i) => {
+      const panelViewMonth = new Date(ownerState.viewMonth);
+      panelViewMonth.setMonth(panelViewMonth.getMonth() + i);
+      panelViewMonth.setDate(1);
+      panelViewMonth.setHours(0, 0, 0, 0);
+      return {
+        ...ownerState,
+        viewMonth: panelViewMonth,
+        hoverDay,
+        onHoverDayChange: setHoverDay,
+        hoverMonth,
+        onHoverMonthChange: setHoverMonth
+      };
+    });
+    return /* @__PURE__ */ import_react14.default.createElement(CalendarRoot, { ref, ...others, style: { maxWidth: `${maxWidth}px` } }, view === "month" ? (
+      // Month view: single header + single month grid (consistent with single-month path)
+      /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(CalendarHeader, null, /* @__PURE__ */ import_react14.default.createElement(IconButton_default, { size: "sm", onClick: handlePrevClick, "aria-label": "Previous Year" }, /* @__PURE__ */ import_react14.default.createElement(import_ChevronLeft.default, null)), /* @__PURE__ */ import_react14.default.createElement(
+        Tooltip_default,
+        {
+          title: monthViewHintMessage,
+          arrow: true,
+          open: false,
+          placement: "bottom",
+          disableFocusListener: true,
+          disableHoverListener: true,
+          disableTouchListener: true,
+          variant: "solid"
+        },
+        /* @__PURE__ */ import_react14.default.createElement(
+          CalendarSwitchViewButton,
+          {
+            ownerState,
+            variant: "plain",
+            color: "neutral",
+            onClick: handleSwitchViewClick,
+            "aria-label": "Switch Calendar View"
+          },
+          calendarTitle
+        )
+      ), /* @__PURE__ */ import_react14.default.createElement(IconButton_default, { size: "sm", onClick: handleNextClick, "aria-label": "Next Year" }, /* @__PURE__ */ import_react14.default.createElement(import_ChevronRight.default, null))), /* @__PURE__ */ import_react14.default.createElement(PickerMonths, { ownerState }))
+    ) : /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement(CalendarMultiContainer, null, panels.map((panelOwnerState, i) => /* @__PURE__ */ import_react14.default.createElement(
+      CalendarPanel,
+      {
+        key: panelOwnerState.viewMonth.toISOString(),
+        ownerState: panelOwnerState,
+        panelIndex: i,
+        totalPanels: resolvedNumberOfMonths,
+        onPrev: handlePrevClick,
+        onNext: handleNextClick,
+        onSwitchView: handleSwitchViewClick,
+        isMonthViewAssistHintOpen,
+        monthViewHintMessage
+      }
+    ))), /* @__PURE__ */ import_react14.default.createElement(
+      MultiMonthPickerDays,
+      {
+        panels,
+        direction: ownerState.direction,
+        numberOfMonths: resolvedNumberOfMonths
+      }
+    )));
+  }
+  return /* @__PURE__ */ import_react14.default.createElement(CalendarRoot, { ref, ...others, style: { maxWidth: `${maxWidth}px` } }, /* @__PURE__ */ import_react14.default.createElement(CalendarHeader, null, /* @__PURE__ */ import_react14.default.createElement(IconButton_default, { size: "sm", onClick: handlePrevClick, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ import_react14.default.createElement(import_ChevronLeft.default, null)), /* @__PURE__ */ import_react14.default.createElement(
     Tooltip_default,
     {
       title: monthViewHintMessage,
@@ -4965,6 +5181,7 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
     hideClearButton,
     readOnly,
     presets,
+    numberOfMonths,
     ...innerProps
   } = props;
   const innerRef = (0, import_react29.useRef)(null);
@@ -5161,7 +5378,7 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ import_react29.default.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react29.default.createElement(CalendarSheetContent2, null, /* @__PURE__ */ import_react29.default.createElement(CalendarSection2, null, /* @__PURE__ */ import_react29.default.createElement(
+    /* @__PURE__ */ import_react29.default.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ import_react29.default.createElement(CalendarSheetContent2, null, /* @__PURE__ */ import_react29.default.createElement(CalendarSection2, { style: { width: "auto" } }, /* @__PURE__ */ import_react29.default.createElement(
       Calendar_default,
       {
         rangeSelection: true,
@@ -5171,7 +5388,8 @@ var DateRangePicker = (0, import_react29.forwardRef)((inProps, ref) => {
         maxDate: maxDate ? new Date(maxDate) : void 0,
         disableFuture,
         disablePast,
-        locale
+        locale,
+        numberOfMonths
       }
     ), !hideClearButton && /* @__PURE__ */ import_react29.default.createElement(
       DialogActions_default,

package/dist/index.js

@@ -878,8 +878,12 @@ var useCalendarProps = (inProps) => {
 // src/components/Calendar/hooks/use-calendar.ts
 import { useCallback as useCallback4, useState as useState3 } from "react";
 var useCalendar = (ownerState) => {
-  const [hoverDay, setHoverDay] = useState3(null);
-  const [hoverMonth, setHoverMonth] = useState3(null);
+  const [localHoverDay, setLocalHoverDay] = useState3(null);
+  const [localHoverMonth, setLocalHoverMonth] = useState3(null);
+  const hoverDay = ownerState.hoverDay !== void 0 ? ownerState.hoverDay : localHoverDay;
+  const setHoverDay = ownerState.onHoverDayChange ?? setLocalHoverDay;
+  const hoverMonth = ownerState.hoverMonth !== void 0 ? ownerState.hoverMonth : localHoverMonth;
+  const setHoverMonth = ownerState.onHoverMonthChange ?? setLocalHoverMonth;
   return {
     calendarTitle: ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default"),
     onPrev: useCallback4(() => {
@@ -1078,11 +1082,18 @@ var MONTH_NAV_CLICK_THRESHOLD = 3;
 var MONTH_VIEW_HINT_DURATION_MS = 5e3;
 var MONTH_VIEW_HINT_COOLDOWN_MS = 3e4;
 var lastMonthViewAssistHintShownAt = 0;
+var CALENDAR_PANEL_WIDTH = 264;
+var CALENDAR_PANEL_GAP = 16;
 var CalendarRoot = styled5("div", {
   name: "Calendar",
   slot: "root"
+})({});
+var CalendarMultiContainer = styled5("div", {
+  name: "Calendar",
+  slot: "multiContainer"
 })({
-  maxWidth: "264px"
+  display: "flex",
+  gap: `${CALENDAR_PANEL_GAP}px`
 });
 var CalendarHeader = styled5("div", {
   name: "Calendar",
@@ -1117,6 +1128,16 @@ var CalendarViewTable = styled5(motion13.table, {
     paddingBottom: theme.spacing(2)
   }
 }));
+var StaticCalendarViewTable = styled5("table")(({ theme }) => ({
+  borderSpacing: 0,
+  "& td, & th": {
+    padding: 0
+  },
+  "& th": {
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2)
+  }
+}));
 var CalendarWeekHeaderContainer = styled5("thead", {
   name: "Calendar",
   slot: "weekHeaderContainer"
@@ -1365,6 +1386,133 @@ var PickerMonths = (props) => {
     /* @__PURE__ */ React12.createElement("tbody", null, chunkedMonths.map((months, i) => /* @__PURE__ */ React12.createElement(Fragment, { key: months.join("_") }, /* @__PURE__ */ React12.createElement("tr", null, months.map((monthIndex, j) => /* @__PURE__ */ React12.createElement(Fragment, { key: monthIndex }, /* @__PURE__ */ React12.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) }, /* @__PURE__ */ React12.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, getMonthNameFromIndex(monthIndex, ownerState.locale))), j < 3 && /* @__PURE__ */ React12.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))), i < chunkedMonths.length - 1 && /* @__PURE__ */ React12.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React12.createElement("td", { colSpan: 7, style: { height: 4 } })))))
   )));
 };
+var PlainPickerDays = ({ ownerState }) => {
+  const { getPickerDayProps, getDayCellProps } = useCalendar(ownerState);
+  const calendarDates = useMemo4(() => getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
+  const weekdayNames = useMemo4(() => getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
+  return /* @__PURE__ */ React12.createElement(StaticCalendarViewTable, null, /* @__PURE__ */ React12.createElement(CalendarWeekHeaderContainer, null, /* @__PURE__ */ React12.createElement("tr", null, weekdayNames.map((name, i) => /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` }, /* @__PURE__ */ React12.createElement("th", null, /* @__PURE__ */ React12.createElement(Typography_default, { level: "body-xs", textAlign: "center" }, name)), i < 6 && /* @__PURE__ */ React12.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))), /* @__PURE__ */ React12.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` }, /* @__PURE__ */ React12.createElement("tr", null, weekDates.map(
+    (date, i) => date ? /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${date}_${i}` }, /* @__PURE__ */ React12.createElement(CalendarDayCell, { ...getDayCellProps(date) }, /* @__PURE__ */ React12.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)), i < 6 && /* @__PURE__ */ React12.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })) : /* @__PURE__ */ React12.createElement(Fragment, { key: `${ownerState.viewMonth}_${i}` }, /* @__PURE__ */ React12.createElement("td", null), i < 6 && /* @__PURE__ */ React12.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" }))
+  )), rowIndex < calendarDates.length - 1 && /* @__PURE__ */ React12.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" }, /* @__PURE__ */ React12.createElement("td", { colSpan: 13, style: { height: 4 } }))))));
+};
+var MultiMonthPickerDays = ({
+  panels,
+  direction,
+  numberOfMonths
+}) => {
+  const slideDistance = CALENDAR_PANEL_WIDTH * numberOfMonths + CALENDAR_PANEL_GAP * (numberOfMonths - 1) + CALENDAR_PANEL_WIDTH;
+  const multiVariants = {
+    enter: (dir) => ({ x: dir > 0 ? slideDistance : -slideDistance, opacity: 0 }),
+    center: { position: "relative", zIndex: 1, x: 0, opacity: 1 },
+    exit: (dir) => ({
+      position: "absolute",
+      zIndex: 0,
+      x: dir < 0 ? slideDistance : -slideDistance,
+      opacity: 0
+    })
+  };
+  const key = `${panels[0].viewMonth.toISOString()}_${direction}`;
+  return /* @__PURE__ */ React12.createElement("div", { style: { position: "relative", overflow: "hidden", minHeight: "250px" } }, /* @__PURE__ */ React12.createElement(AnimatePresence, { initial: false, custom: direction }, /* @__PURE__ */ React12.createElement(
+    motion13.div,
+    {
+      key,
+      custom: direction,
+      variants: multiVariants,
+      initial: "enter",
+      animate: "center",
+      exit: "exit",
+      transition: {
+        x: { type: "spring", stiffness: 300, damping: 30 },
+        opacity: { duration: 0.2 }
+      },
+      drag: "x",
+      dragConstraints: { left: 0, right: 0 },
+      dragElastic: 1,
+      onDragEnd: (e, { offset, velocity }) => {
+        const swipe = swipePower(offset.x, velocity.x);
+        if (swipe < -swipeConfidenceThreshold) {
+          const date = new Date(panels[0].viewMonth);
+          date.setMonth(date.getMonth() + 1);
+          panels[0].onMonthChange?.(date);
+        } else if (swipe > swipeConfidenceThreshold) {
+          const date = new Date(panels[0].viewMonth);
+          date.setMonth(date.getMonth() - 1);
+          panels[0].onMonthChange?.(date);
+        }
+      },
+      style: { display: "flex", gap: `${CALENDAR_PANEL_GAP}px`, top: 0, left: 0, width: "100%" }
+    },
+    panels.map((panelOwnerState) => /* @__PURE__ */ React12.createElement(
+      "div",
+      {
+        key: panelOwnerState.viewMonth.toISOString(),
+        style: {
+          flex: "0 0 auto",
+          width: `${CALENDAR_PANEL_WIDTH}px`,
+          paddingLeft: "16px",
+          paddingRight: "16px",
+          boxSizing: "border-box"
+        }
+      },
+      /* @__PURE__ */ React12.createElement(PlainPickerDays, { ownerState: panelOwnerState })
+    ))
+  )));
+};
+var CalendarPanel = ({
+  ownerState,
+  panelIndex,
+  totalPanels,
+  onPrev,
+  onNext,
+  onSwitchView,
+  isMonthViewAssistHintOpen,
+  monthViewHintMessage
+}) => {
+  const showPrev = panelIndex === 0;
+  const showNext = panelIndex === totalPanels - 1;
+  const title = ownerState.view === "month" ? getYearName(ownerState.viewMonth, ownerState.locale || "default") : getMonthName(ownerState.viewMonth, ownerState.locale || "default");
+  return /* @__PURE__ */ React12.createElement("div", { style: { flex: 1, maxWidth: `${CALENDAR_PANEL_WIDTH}px` } }, /* @__PURE__ */ React12.createElement(CalendarHeader, null, /* @__PURE__ */ React12.createElement(
+    IconButton_default,
+    {
+      size: "sm",
+      onClick: onPrev,
+      "aria-label": `Previous ${ownerState.view === "day" ? "Month" : "Year"}`,
+      style: { visibility: showPrev ? "visible" : "hidden" }
+    },
+    /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null)
+  ), /* @__PURE__ */ React12.createElement(
+    Tooltip_default,
+    {
+      title: monthViewHintMessage,
+      arrow: true,
+      open: panelIndex === 0 && isMonthViewAssistHintOpen,
+      placement: "bottom",
+      disableFocusListener: true,
+      disableHoverListener: true,
+      disableTouchListener: true,
+      variant: "solid"
+    },
+    /* @__PURE__ */ React12.createElement(
+      CalendarSwitchViewButton,
+      {
+        ownerState,
+        variant: "plain",
+        color: "neutral",
+        onClick: onSwitchView,
+        "aria-label": "Switch Calendar View"
+      },
+      title
+    )
+  ), /* @__PURE__ */ React12.createElement(
+    IconButton_default,
+    {
+      size: "sm",
+      onClick: onNext,
+      "aria-label": `Next ${ownerState.view === "day" ? "Month" : "Year"}`,
+      style: { visibility: showNext ? "visible" : "hidden" }
+    },
+    /* @__PURE__ */ React12.createElement(ChevronRightIcon, null)
+  )));
+};
 var Calendar = forwardRef4((inProps, ref) => {
   const [props, ownerState] = useCalendarProps(inProps);
   const {
@@ -1381,6 +1529,7 @@ var Calendar = forwardRef4((inProps, ref) => {
     maxDate,
     disableFuture,
     disablePast,
+    numberOfMonths,
     ...others
   } = props;
   const { calendarTitle, onPrev, onNext } = useCalendar(ownerState);
@@ -1388,6 +1537,9 @@ var Calendar = forwardRef4((inProps, ref) => {
   const monthNavClickTimestampsRef = useRef3([]);
   const monthViewAssistHintShownInSessionRef = useRef3(false);
   const monthViewAssistHintTimeoutRef = useRef3(null);
+  const [hoverDay, setHoverDay] = useState4(null);
+  const [hoverMonth, setHoverMonth] = useState4(null);
+  const resolvedNumberOfMonths = numberOfMonths ?? 1;
   const hasEndDate = Boolean(value?.[1]);
   const isRangeHintEligible = Boolean(rangeSelection && !hasEndDate);
   const isHintEligible = Boolean(view === "day" && (!rangeSelection || isRangeHintEligible));
@@ -1450,7 +1602,71 @@ var Calendar = forwardRef4((inProps, ref) => {
     closeMonthViewAssistHint();
     onViewChange?.();
   }, [closeMonthViewAssistHint, onViewChange]);
-  return /* @__PURE__ */ React12.createElement(CalendarRoot, { ref, ...others }, /* @__PURE__ */ React12.createElement(CalendarHeader, null, /* @__PURE__ */ React12.createElement(IconButton_default, { size: "sm", onClick: handlePrevClick, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null)), /* @__PURE__ */ React12.createElement(
+  const maxWidth = CALENDAR_PANEL_WIDTH * resolvedNumberOfMonths + CALENDAR_PANEL_GAP * (resolvedNumberOfMonths - 1);
+  if (resolvedNumberOfMonths > 1) {
+    const panels = Array.from({ length: resolvedNumberOfMonths }, (_, i) => {
+      const panelViewMonth = new Date(ownerState.viewMonth);
+      panelViewMonth.setMonth(panelViewMonth.getMonth() + i);
+      panelViewMonth.setDate(1);
+      panelViewMonth.setHours(0, 0, 0, 0);
+      return {
+        ...ownerState,
+        viewMonth: panelViewMonth,
+        hoverDay,
+        onHoverDayChange: setHoverDay,
+        hoverMonth,
+        onHoverMonthChange: setHoverMonth
+      };
+    });
+    return /* @__PURE__ */ React12.createElement(CalendarRoot, { ref, ...others, style: { maxWidth: `${maxWidth}px` } }, view === "month" ? (
+      // Month view: single header + single month grid (consistent with single-month path)
+      /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(CalendarHeader, null, /* @__PURE__ */ React12.createElement(IconButton_default, { size: "sm", onClick: handlePrevClick, "aria-label": "Previous Year" }, /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null)), /* @__PURE__ */ React12.createElement(
+        Tooltip_default,
+        {
+          title: monthViewHintMessage,
+          arrow: true,
+          open: false,
+          placement: "bottom",
+          disableFocusListener: true,
+          disableHoverListener: true,
+          disableTouchListener: true,
+          variant: "solid"
+        },
+        /* @__PURE__ */ React12.createElement(
+          CalendarSwitchViewButton,
+          {
+            ownerState,
+            variant: "plain",
+            color: "neutral",
+            onClick: handleSwitchViewClick,
+            "aria-label": "Switch Calendar View"
+          },
+          calendarTitle
+        )
+      ), /* @__PURE__ */ React12.createElement(IconButton_default, { size: "sm", onClick: handleNextClick, "aria-label": "Next Year" }, /* @__PURE__ */ React12.createElement(ChevronRightIcon, null))), /* @__PURE__ */ React12.createElement(PickerMonths, { ownerState }))
+    ) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(CalendarMultiContainer, null, panels.map((panelOwnerState, i) => /* @__PURE__ */ React12.createElement(
+      CalendarPanel,
+      {
+        key: panelOwnerState.viewMonth.toISOString(),
+        ownerState: panelOwnerState,
+        panelIndex: i,
+        totalPanels: resolvedNumberOfMonths,
+        onPrev: handlePrevClick,
+        onNext: handleNextClick,
+        onSwitchView: handleSwitchViewClick,
+        isMonthViewAssistHintOpen,
+        monthViewHintMessage
+      }
+    ))), /* @__PURE__ */ React12.createElement(
+      MultiMonthPickerDays,
+      {
+        panels,
+        direction: ownerState.direction,
+        numberOfMonths: resolvedNumberOfMonths
+      }
+    )));
+  }
+  return /* @__PURE__ */ React12.createElement(CalendarRoot, { ref, ...others, style: { maxWidth: `${maxWidth}px` } }, /* @__PURE__ */ React12.createElement(CalendarHeader, null, /* @__PURE__ */ React12.createElement(IconButton_default, { size: "sm", onClick: handlePrevClick, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` }, /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null)), /* @__PURE__ */ React12.createElement(
     Tooltip_default,
     {
       title: monthViewHintMessage,
@@ -4840,6 +5056,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
     hideClearButton,
     readOnly,
     presets,
+    numberOfMonths,
     ...innerProps
   } = props;
   const innerRef = useRef8(null);
@@ -5036,7 +5253,7 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
       "aria-label": "Calendar Tooltip",
       "aria-expanded": open
     },
-    /* @__PURE__ */ React26.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React26.createElement(CalendarSheetContent2, null, /* @__PURE__ */ React26.createElement(CalendarSection2, null, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React26.createElement(CalendarSheet2, { tabIndex: -1, role: "presentation" }, /* @__PURE__ */ React26.createElement(CalendarSheetContent2, null, /* @__PURE__ */ React26.createElement(CalendarSection2, { style: { width: "auto" } }, /* @__PURE__ */ React26.createElement(
       Calendar_default,
       {
         rangeSelection: true,
@@ -5046,7 +5263,8 @@ var DateRangePicker = forwardRef8((inProps, ref) => {
         maxDate: maxDate ? new Date(maxDate) : void 0,
         disableFuture,
         disablePast,
-        locale
+        locale,
+        numberOfMonths
       }
     ), !hideClearButton && /* @__PURE__ */ React26.createElement(
       DialogActions_default,