@sytechui/calendar 2.2.32

package/dist/calendar-base.js

@@ -0,0 +1,604 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/calendar-base.tsx
+var calendar_base_exports = {};
+__export(calendar_base_exports, {
+  CalendarBase: () => CalendarBase
+});
+module.exports = __toCommonJS(calendar_base_exports);
+var import_react3 = require("react");
+var import_visually_hidden = require("@react-aria/visually-hidden");
+var import_button2 = require("@sytechui/button");
+var import_shared_utils3 = require("@sytechui/shared-utils");
+var import_framer_motion3 = require("framer-motion");
+var import_i18n4 = require("@react-aria/i18n");
+var import_framer_utils = require("@sytechui/framer-utils");
+
+// src/chevron-left.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ChevronLeftIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    focusable: "false",
+    height: "1em",
+    role: "presentation",
+    viewBox: "0 0 16 16",
+    width: "1em",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M10 3.33334L6 8.00001L10 12.6667",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5"
+      }
+    )
+  }
+);
+
+// src/chevron-right.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ChevronRightIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    focusable: "false",
+    height: "1em",
+    role: "presentation",
+    viewBox: "0 0 16 16",
+    width: "1em",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M6 3.33334L10 8.00001L6 12.6667",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5"
+      }
+    )
+  }
+);
+
+// src/calendar-month.tsx
+var import_date2 = require("@internationalized/date");
+var import_i18n2 = require("@react-aria/i18n");
+var import_calendar2 = require("@react-aria/calendar");
+var import_framer_motion = require("framer-motion");
+var import_shared_utils2 = require("@sytechui/shared-utils");
+
+// src/calendar-cell.tsx
+var import_date = require("@internationalized/date");
+var import_calendar = require("@react-aria/calendar");
+var import_i18n = require("@react-aria/i18n");
+var import_focus = require("@react-aria/focus");
+var import_interactions = require("@react-aria/interactions");
+var import_react = require("react");
+var import_shared_utils = require("@sytechui/shared-utils");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function CalendarCell(originalProps) {
+  const { state, slots, isPickerVisible, currentMonth, classNames, firstDayOfWeek, ...props } = originalProps;
+  const ref = (0, import_react.useRef)(null);
+  const {
+    cellProps,
+    buttonProps,
+    isPressed,
+    isSelected,
+    isDisabled,
+    isFocused,
+    isInvalid,
+    formattedDate
+  } = (0, import_calendar.useCalendarCell)(
+    {
+      ...props,
+      isDisabled: !(0, import_date.isSameMonth)(props.date, currentMonth) || isPickerVisible
+    },
+    state,
+    ref
+  );
+  const isUnavailable = state.isCellUnavailable(props.date);
+  const isLastSelectedBeforeDisabled = !isDisabled && !isInvalid && state.isCellUnavailable(props.date.add({ days: 1 }));
+  const isFirstSelectedAfterDisabled = !isDisabled && !isInvalid && state.isCellUnavailable(props.date.subtract({ days: 1 }));
+  const highlightedRange = "highlightedRange" in state && state.highlightedRange;
+  const isSelectionStart = isSelected && highlightedRange ? (0, import_date.isSameDay)(props.date, highlightedRange.start) : false;
+  const isSelectionEnd = isSelected && highlightedRange ? (0, import_date.isSameDay)(props.date, highlightedRange.end) : false;
+  const { locale } = (0, import_i18n.useLocale)();
+  const dayOfWeek = (0, import_date.getDayOfWeek)(props.date, locale, firstDayOfWeek);
+  const isRangeStart = isSelected && (isFirstSelectedAfterDisabled || dayOfWeek === 0 || props.date.day === 1);
+  const isRangeEnd = isSelected && (isLastSelectedBeforeDisabled || dayOfWeek === 6 || props.date.day === currentMonth.calendar.getDaysInMonth(currentMonth));
+  const { focusProps, isFocusVisible } = (0, import_focus.useFocusRing)();
+  const { hoverProps, isHovered } = (0, import_interactions.useHover)({
+    isDisabled: isDisabled || isUnavailable || state.isReadOnly
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: slots == null ? void 0 : slots.cell({ class: classNames == null ? void 0 : classNames.cell }), "data-slot": "cell", ...cellProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    {
+      ...(0, import_shared_utils.mergeProps)(buttonProps, hoverProps, focusProps),
+      ref,
+      className: slots == null ? void 0 : slots.cellButton({ class: classNames == null ? void 0 : classNames.cellButton }),
+      "data-disabled": (0, import_shared_utils.dataAttr)(isDisabled && !isInvalid),
+      "data-focus-visible": (0, import_shared_utils.dataAttr)(isFocused && isFocusVisible),
+      "data-hover": (0, import_shared_utils.dataAttr)(isHovered),
+      "data-invalid": (0, import_shared_utils.dataAttr)(isInvalid),
+      "data-outside-month": (0, import_shared_utils.dataAttr)(!(0, import_date.isSameMonth)(props.date, currentMonth)),
+      "data-pressed": (0, import_shared_utils.dataAttr)(isPressed && !state.isReadOnly),
+      "data-range-end": (0, import_shared_utils.dataAttr)(isRangeEnd),
+      "data-range-selection": (0, import_shared_utils.dataAttr)(isSelected && "highlightedRange" in state),
+      "data-range-start": (0, import_shared_utils.dataAttr)(isRangeStart),
+      "data-readonly": (0, import_shared_utils.dataAttr)(state.isReadOnly),
+      "data-selected": (0, import_shared_utils.dataAttr)(isSelected),
+      "data-selection-end": (0, import_shared_utils.dataAttr)(isSelectionEnd),
+      "data-selection-start": (0, import_shared_utils.dataAttr)(isSelectionStart),
+      "data-today": (0, import_shared_utils.dataAttr)((0, import_date.isToday)(props.date, state.timeZone)),
+      "data-unavailable": (0, import_shared_utils.dataAttr)(isUnavailable),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: formattedDate })
+    }
+  ) });
+}
+
+// src/calendar-transitions.ts
+var transition = {
+  type: "spring",
+  bounce: 0,
+  duration: 0.3
+};
+var slideVariants = {
+  enter: (direction) => ({
+    x: `${direction * 100}%`
+  }),
+  center: {
+    x: "0%"
+  },
+  exit: (direction) => ({
+    x: `${direction * -100}%`
+  })
+};
+
+// src/calendar-context.ts
+var import_react_utils = require("@sytechui/react-utils");
+var [CalendarProvider, useCalendarContext] = (0, import_react_utils.createContext)({
+  name: "CalendarContext",
+  strict: true,
+  errorMessage: "useContext: `context` is undefined. Seems you forgot to wrap component within the CalendarProvider"
+});
+
+// src/calendar-month.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function CalendarMonth(props) {
+  const { startDate, direction, currentMonth, firstDayOfWeek } = props;
+  const { locale } = (0, import_i18n2.useLocale)();
+  const weeksInMonth = (0, import_date2.getWeeksInMonth)(startDate, locale, firstDayOfWeek);
+  const { state, slots, weekdayStyle, isHeaderExpanded, disableAnimation, classNames } = useCalendarContext();
+  const { gridProps, headerProps, weekDays } = (0, import_calendar2.useCalendarGrid)(
+    {
+      ...props,
+      weekdayStyle,
+      endDate: (0, import_date2.endOfMonth)(startDate),
+      firstDayOfWeek
+    },
+    state
+  );
+  const bodyContent = [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "tr",
+    {
+      className: slots == null ? void 0 : slots.gridBodyRow({ class: classNames == null ? void 0 : classNames.gridBodyRow }),
+      "data-slot": "grid-body-row",
+      inert: isHeaderExpanded ? true : void 0,
+      children: state.getDatesInWeek(weekIndex, startDate).map(
+        (date, i) => date ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          CalendarCell,
+          {
+            classNames,
+            currentMonth: startDate,
+            date,
+            firstDayOfWeek,
+            isPickerVisible: isHeaderExpanded,
+            slots,
+            state
+          },
+          i
+        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", {}, i)
+      )
+    },
+    weekIndex
+  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "table",
+    {
+      ...gridProps,
+      "aria-hidden": (0, import_shared_utils2.dataAttr)(isHeaderExpanded),
+      className: slots == null ? void 0 : slots.grid({ class: classNames == null ? void 0 : classNames.grid }),
+      "data-slot": "grid",
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "thead",
+          {
+            ...headerProps,
+            className: slots == null ? void 0 : slots.gridHeader({ class: classNames == null ? void 0 : classNames.gridHeader }),
+            "data-slot": "grid-header",
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "tr",
+              {
+                className: slots == null ? void 0 : slots.gridHeaderRow({ class: classNames == null ? void 0 : classNames.gridHeaderRow }),
+                "data-slot": "grid-header-row",
+                children: weekDays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "th",
+                  {
+                    className: slots == null ? void 0 : slots.gridHeaderCell({ class: classNames == null ? void 0 : classNames.gridHeaderCell }),
+                    "data-slot": "grid-header-cell",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: day })
+                  },
+                  index
+                ))
+              }
+            )
+          }
+        ),
+        disableAnimation ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "tbody",
+          {
+            className: slots == null ? void 0 : slots.gridBody({ class: classNames == null ? void 0 : classNames.gridBody }),
+            "data-slot": "grid-body",
+            tabIndex: isHeaderExpanded ? -1 : 0,
+            children: bodyContent
+          },
+          currentMonth
+        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_framer_motion.m.tbody,
+          {
+            animate: "center",
+            className: slots == null ? void 0 : slots.gridBody({ class: classNames == null ? void 0 : classNames.gridBody }),
+            custom: direction,
+            "data-slot": "grid-body",
+            exit: "exit",
+            initial: "enter",
+            variants: slideVariants,
+            children: bodyContent
+          },
+          currentMonth
+        )
+      ]
+    }
+  );
+}
+
+// src/calendar-header.tsx
+var import_i18n3 = require("@react-aria/i18n");
+var import_framer_motion2 = require("framer-motion");
+var import_button = require("@sytechui/button");
+var import_react2 = require("react");
+
+// src/chevron-down.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ChevronDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    focusable: "false",
+    height: "1em",
+    role: "presentation",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "path",
+      {
+        d: "M19 9L12 15L5 9",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5"
+      }
+    )
+  }
+);
+
+// src/calendar-header.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function CalendarHeader(props) {
+  const { direction, date, currentMonth, buttonPickerProps } = props;
+  const {
+    state,
+    slots,
+    headerRef,
+    showMonthAndYearPickers,
+    isHeaderExpanded,
+    setIsHeaderExpanded,
+    disableAnimation,
+    classNames
+  } = useCalendarContext();
+  const monthAndYearDateFormatter = (0, import_i18n3.useDateFormatter)({
+    month: "long",
+    era: currentMonth.calendar.identifier === "gregory" && currentMonth.era === "BC" ? "short" : void 0,
+    calendar: currentMonth.calendar.identifier,
+    timeZone: state.timeZone,
+    year: "numeric"
+  });
+  const monthDateContent = monthAndYearDateFormatter.format(date.toDate(state.timeZone));
+  const headerTitle = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: disableAnimation ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "span",
+    {
+      "aria-hidden": true,
+      className: slots == null ? void 0 : slots.title({ class: classNames == null ? void 0 : classNames.title }),
+      "data-slot": "title",
+      children: monthDateContent
+    },
+    currentMonth.month
+  ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_framer_motion2.m.span,
+    {
+      animate: "center",
+      "aria-hidden": true,
+      className: slots == null ? void 0 : slots.title({ class: classNames == null ? void 0 : classNames.title }),
+      custom: direction,
+      "data-slot": "title",
+      exit: "exit",
+      initial: "enter",
+      variants: isHeaderExpanded ? {} : slideVariants,
+      children: monthDateContent
+    },
+    currentMonth.month
+  ) });
+  const headerProps = {
+    ref: headerRef,
+    className: slots == null ? void 0 : slots.header({ class: classNames == null ? void 0 : classNames.header }),
+    "data-slot": "header"
+  };
+  const handleKeyDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsHeaderExpanded == null ? void 0 : setIsHeaderExpanded(false);
+      }
+    },
+    [setIsHeaderExpanded]
+  );
+  return showMonthAndYearPickers ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_button.Button,
+    {
+      ...headerProps,
+      "aria-label": "switch to year and month view",
+      disableAnimation,
+      endContent: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronDownIcon, { className: "chevron-icon" }),
+      onKeyDown: handleKeyDown,
+      ...buttonPickerProps,
+      children: headerTitle
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("header", { ...headerProps, children: headerTitle });
+}
+
+// src/calendar-picker.tsx
+var import_time_picker = require("@sytechui/time-picker");
+
+// src/use-calendar-picker.ts
+function useCalendarPicker(_props) {
+  const { slots, state, isHeaderExpanded, classNames } = useCalendarContext();
+  return {
+    state,
+    slots,
+    classNames,
+    isHeaderExpanded
+  };
+}
+
+// src/calendar-picker.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CalendarPicker(props) {
+  const { state, slots, classNames, isHeaderExpanded } = useCalendarPicker(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: slots == null ? void 0 : slots.pickerWrapper({
+        class: classNames == null ? void 0 : classNames.pickerWrapper
+      }),
+      "data-slot": "picker-wrapper",
+      inert: !isHeaderExpanded ? true : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_time_picker.TimePicker,
+        {
+          isMonth: true,
+          isYear: true,
+          isDay: false,
+          value: state.focusedDate,
+          onChange: (date) => {
+            state.setFocusedDate(
+              state.focusedDate.set({
+                year: date.year,
+                month: date.month
+              })
+            );
+          }
+        }
+      )
+    }
+  );
+}
+
+// src/calendar-base.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var domAnimation = () => import("@sytechui/dom-animation").then((res) => res.default);
+var PopLayoutWrapper = (0, import_react3.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref, ...props });
+  }
+);
+PopLayoutWrapper.displayName = "HeroUI - PopLayoutWrapper";
+function CalendarBase(props) {
+  const {
+    Component = "div",
+    showHelper,
+    topContent,
+    bottomContent,
+    calendarProps,
+    nextButtonProps,
+    prevButtonProps,
+    buttonPickerProps,
+    errorMessageProps,
+    calendarRef: ref,
+    errorMessage,
+    firstDayOfWeek,
+    ...otherProps
+  } = props;
+  const { state, slots, visibleMonths, showMonthAndYearPickers, disableAnimation, classNames } = useCalendarContext();
+  const [direction, setDirection] = (0, import_react3.useState)(0);
+  const { direction: localeDirection } = (0, import_i18n4.useLocale)();
+  const currentMonth = state.visibleRange.start;
+  const headers = [];
+  const calendars = [];
+  const isRTL = localeDirection === "rtl";
+  for (let i = 0; i < visibleMonths; i++) {
+    let d = currentMonth.add({ months: i });
+    headers.push(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react3.Fragment, { children: [
+        i === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_button2.Button,
+          {
+            ...isRTL ? nextButtonProps : prevButtonProps,
+            onPress: (0, import_shared_utils3.chain)(
+              isRTL ? nextButtonProps.onPress : prevButtonProps.onPress,
+              () => setDirection(-1)
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronLeftIcon, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          CalendarHeader,
+          {
+            buttonPickerProps,
+            currentMonth,
+            date: d,
+            direction
+          }
+        ),
+        i === visibleMonths - 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_button2.Button,
+          {
+            ...isRTL ? prevButtonProps : nextButtonProps,
+            onPress: (0, import_shared_utils3.chain)(
+              isRTL ? prevButtonProps.onPress : nextButtonProps.onPress,
+              () => setDirection(1)
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRightIcon, {})
+          }
+        )
+      ] }, `calendar-header-${i}`)
+    );
+    const calendarMonthContent = /* @__PURE__ */ (0, import_react4.createElement)(
+      CalendarMonth,
+      {
+        ...props,
+        key: `calendar-month-${i}`,
+        currentMonth: currentMonth.month,
+        direction,
+        firstDayOfWeek,
+        startDate: d
+      }
+    );
+    calendars.push(
+      showMonthAndYearPickers ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react3.Fragment, { children: [
+        calendarMonthContent,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CalendarPicker, { currentMonth, date: d })
+      ] }, `calendar-month-with-pickers-${i}`) : calendarMonthContent
+    );
+  }
+  const calendarContent = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        className: slots == null ? void 0 : slots.headerWrapper({ class: classNames == null ? void 0 : classNames.headerWrapper }),
+        "data-slot": "header-wrapper",
+        children: headers
+      },
+      "header-wrapper"
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        className: slots == null ? void 0 : slots.gridWrapper({ class: classNames == null ? void 0 : classNames.gridWrapper }),
+        "data-slot": "grid-wrapper",
+        children: calendars
+      },
+      "grid-wrapper"
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Component, { ...(0, import_shared_utils3.mergeProps)(calendarProps, otherProps), ref, children: [
+    topContent,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { children: calendarProps["aria-label"] }) }),
+    disableAnimation ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: slots == null ? void 0 : slots.content({ class: classNames == null ? void 0 : classNames.content }), "data-slot": "content", children: calendarContent }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_framer_utils.ResizablePanel,
+      {
+        className: slots == null ? void 0 : slots.content({ class: classNames == null ? void 0 : classNames.content }),
+        "data-slot": "content",
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_framer_motion3.AnimatePresence, { custom: direction, initial: false, mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PopLayoutWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_framer_motion3.MotionConfig, { transition, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_framer_motion3.LazyMotion, { features: domAnimation, children: calendarContent }) }) }) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_visually_hidden.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        "aria-label": nextButtonProps["aria-label"],
+        disabled: nextButtonProps.isDisabled,
+        tabIndex: -1,
+        onClick: () => state.focusNextPage()
+      }
+    ) }),
+    state.isValueInvalid && showHelper && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        className: slots == null ? void 0 : slots.helperWrapper({ class: classNames == null ? void 0 : classNames.helperWrapper }),
+        "data-slot": "helper-wrapper",
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "span",
+          {
+            ...errorMessageProps,
+            className: slots == null ? void 0 : slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage }),
+            "data-slot": "error-message",
+            children: errorMessage || "Selected date unavailable."
+          }
+        )
+      }
+    ),
+    bottomContent
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CalendarBase
+});

package/dist/calendar-base.mjs

@@ -0,0 +1,17 @@
+"use client";
+import {
+  CalendarBase
+} from "./chunk-ZJZG3P2K.mjs";
+import "./chunk-HUKPVIZ5.mjs";
+import "./chunk-MUYVZHWM.mjs";
+import "./chunk-IDU5RSFL.mjs";
+import "./chunk-JJRY4BYN.mjs";
+import "./chunk-CPBF6DM2.mjs";
+import "./chunk-MDGP3JHC.mjs";
+import "./chunk-IFK7FCNU.mjs";
+import "./chunk-JQFIYCMS.mjs";
+import "./chunk-MCZLP73P.mjs";
+import "./chunk-5CY7DCRB.mjs";
+export {
+  CalendarBase
+};

package/dist/calendar-cell.d.mts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
+import { CalendarReturnType, SlotsToClasses, CalendarSlots } from '@sytechui/theme';
+import { AriaCalendarCellProps } from '@react-aria/calendar';
+import { HTMLHeroUIProps } from '@sytechui/system';
+import { CalendarDate } from '@internationalized/date';
+
+interface CalendarCellProps extends HTMLHeroUIProps<"td">, AriaCalendarCellProps {
+    state: CalendarState | RangeCalendarState;
+    isPickerVisible?: boolean;
+    slots?: CalendarReturnType;
+    classNames?: SlotsToClasses<CalendarSlots>;
+    currentMonth: CalendarDate;
+    firstDayOfWeek?: "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
+}
+declare function CalendarCell(originalProps: CalendarCellProps): react_jsx_runtime.JSX.Element;
+
+export { CalendarCell, type CalendarCellProps };

package/dist/calendar-cell.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
+import { CalendarReturnType, SlotsToClasses, CalendarSlots } from '@sytechui/theme';
+import { AriaCalendarCellProps } from '@react-aria/calendar';
+import { HTMLHeroUIProps } from '@sytechui/system';
+import { CalendarDate } from '@internationalized/date';
+
+interface CalendarCellProps extends HTMLHeroUIProps<"td">, AriaCalendarCellProps {
+    state: CalendarState | RangeCalendarState;
+    isPickerVisible?: boolean;
+    slots?: CalendarReturnType;
+    classNames?: SlotsToClasses<CalendarSlots>;
+    currentMonth: CalendarDate;
+    firstDayOfWeek?: "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
+}
+declare function CalendarCell(originalProps: CalendarCellProps): react_jsx_runtime.JSX.Element;
+
+export { CalendarCell, type CalendarCellProps };