@sytechui/calendar 2.2.32

package/dist/index.js

@@ -0,0 +1,1020 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Calendar: () => calendar_default,
+  CalendarProvider: () => CalendarProvider,
+  RangeCalendar: () => range_calendar_default,
+  useCalendar: () => useCalendar,
+  useCalendarContext: () => useCalendarContext,
+  useRangeCalendar: () => useRangeCalendar
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/calendar.tsx
+var import_system2 = require("@sytechui/system");
+
+// src/use-calendar.ts
+var import_react2 = require("react");
+var import_react_utils2 = require("@sytechui/react-utils");
+var import_calendar = require("@react-aria/calendar");
+var import_calendar2 = require("@react-stately/calendar");
+var import_date2 = require("@internationalized/date");
+var import_shared_utils2 = require("@sytechui/shared-utils");
+var import_theme2 = require("@sytechui/theme");
+
+// src/use-calendar-base.ts
+var import_date = require("@internationalized/date");
+var import_system = require("@sytechui/system");
+var import_react = require("react");
+var import_theme = require("@sytechui/theme");
+var import_utils = require("@react-stately/utils");
+var import_react_utils = require("@sytechui/react-utils");
+var import_i18n = require("@react-aria/i18n");
+var import_shared_utils = require("@sytechui/shared-utils");
+function useCalendarBase(originalProps) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.calendar.variantKeys);
+  const globalContext = (0, import_system.useProviderContext)();
+  const { locale, direction } = (0, import_i18n.useLocale)();
+  const isRTL = direction === "rtl";
+  const calendarProp = (0, import_date.createCalendar)(
+    new import_date.DateFormatter(locale).resolvedOptions().calendar
+  );
+  const gregorianYearOffset = (0, import_shared_utils.getGregorianYearOffset)(calendarProp.identifier);
+  const {
+    ref,
+    as,
+    children,
+    className,
+    topContent,
+    bottomContent,
+    showHelper = true,
+    firstDayOfWeek,
+    calendarWidth = 256,
+    visibleMonths: visibleMonthsProp = 1,
+    weekdayStyle = "narrow",
+    navButtonProps = {},
+    isHeaderExpanded: isHeaderExpandedProp,
+    isHeaderDefaultExpanded,
+    onHeaderExpandedChange = () => {
+    },
+    createCalendar: createCalendarProp = (_a = globalContext == null ? void 0 : globalContext.createCalendar) != null ? _a : null,
+    minValue = (_c = (_b = globalContext == null ? void 0 : globalContext.defaultDates) == null ? void 0 : _b.minDate) != null ? _c : new import_date.CalendarDate(calendarProp, 1900 + gregorianYearOffset, 1, 1),
+    maxValue = (_e = (_d = globalContext == null ? void 0 : globalContext.defaultDates) == null ? void 0 : _d.maxDate) != null ? _e : new import_date.CalendarDate(calendarProp, 2099 + gregorianYearOffset, 12, 31),
+    prevButtonProps: prevButtonPropsProp,
+    nextButtonProps: nextButtonPropsProp,
+    errorMessage,
+    classNames,
+    ...otherProps
+  } = props;
+  const Component = as || "div";
+  const visibleMonths = (0, import_shared_utils.clamp)(visibleMonthsProp, 1, 3);
+  const showMonthAndYearPickers = originalProps.showMonthAndYearPickers && visibleMonths === 1;
+  const domRef = (0, import_react_utils.useDOMRef)(ref);
+  const handleHeaderExpandedChange = (0, import_react.useCallback)(
+    (isExpanded) => {
+      onHeaderExpandedChange(isExpanded || false);
+    },
+    [onHeaderExpandedChange]
+  );
+  const [isHeaderExpanded, setIsHeaderExpanded] = (0, import_utils.useControlledState)(
+    isHeaderExpandedProp,
+    isHeaderDefaultExpanded != null ? isHeaderDefaultExpanded : false,
+    handleHeaderExpandedChange
+  );
+  const visibleDuration = (0, import_react.useMemo)(() => ({ months: visibleMonths }), [visibleMonths]);
+  const hasMultipleMonths = visibleMonths > 1;
+  const shouldFilterDOMProps = typeof Component === "string";
+  const slots = (0, import_react.useMemo)(
+    () => (0, import_theme.calendar)({
+      ...variantProps,
+      showMonthAndYearPickers,
+      isRange: !!originalProps.isRange,
+      isHeaderWrapperExpanded: isHeaderExpanded,
+      className,
+      isRTL
+    }),
+    [(0, import_shared_utils.objectToDeps)(variantProps), showMonthAndYearPickers, isHeaderExpanded, className]
+  );
+  const disableAnimation = (_g = (_f = originalProps.disableAnimation) != null ? _f : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _g : false;
+  const commonButtonProps = {
+    size: "sm",
+    variant: "light",
+    radius: "full",
+    isIconOnly: true,
+    disableAnimation,
+    ...navButtonProps
+  };
+  const baseProps = {
+    "data-slot": "base",
+    "data-has-multiple-months": (0, import_shared_utils.dataAttr)(hasMultipleMonths),
+    style: {
+      // @ts-ignore
+      "--visible-months": typeof visibleMonths === "number" ? `${visibleMonths}` : visibleMonths,
+      "--calendar-width": typeof calendarWidth === "number" ? `${calendarWidth}px` : calendarWidth
+    }
+  };
+  const getPrevButtonProps = (props2 = {}) => {
+    return {
+      "data-slot": "prev-button",
+      tabIndex: isHeaderExpanded ? -1 : 0,
+      className: slots.prevButton({ class: classNames == null ? void 0 : classNames.prevButton }),
+      ...(0, import_shared_utils.mergeProps)(commonButtonProps, prevButtonPropsProp, props2)
+    };
+  };
+  const getNextButtonProps = (props2 = {}) => {
+    return {
+      "data-slot": "next-button",
+      tabIndex: isHeaderExpanded ? -1 : 0,
+      className: slots.nextButton({ class: classNames == null ? void 0 : classNames.nextButton }),
+      ...(0, import_shared_utils.mergeProps)(commonButtonProps, nextButtonPropsProp, props2)
+    };
+  };
+  const getErrorMessageProps = (props2 = {}) => {
+    return {
+      "data-slot": "error-message",
+      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage }),
+      ...props2
+    };
+  };
+  return {
+    Component,
+    children,
+    domRef,
+    slots,
+    locale,
+    minValue,
+    maxValue,
+    baseProps,
+    showHelper,
+    firstDayOfWeek,
+    weekdayStyle,
+    visibleMonths,
+    visibleDuration,
+    shouldFilterDOMProps,
+    isHeaderExpanded,
+    showMonthAndYearPickers,
+    disableAnimation,
+    createCalendar: createCalendarProp,
+    getPrevButtonProps,
+    getNextButtonProps,
+    getErrorMessageProps,
+    setIsHeaderExpanded,
+    topContent,
+    bottomContent,
+    errorMessage,
+    classNames,
+    otherProps
+  };
+}
+
+// src/use-calendar.ts
+function useCalendar({
+  buttonPickerProps: buttonPickerPropsProp,
+  className,
+  ...originalProps
+}) {
+  const {
+    Component,
+    slots,
+    children,
+    domRef,
+    locale,
+    minValue,
+    maxValue,
+    showHelper,
+    firstDayOfWeek,
+    weekdayStyle,
+    visibleDuration,
+    baseProps,
+    disableAnimation,
+    shouldFilterDOMProps,
+    isHeaderExpanded,
+    visibleMonths,
+    createCalendar: createCalendarProp,
+    showMonthAndYearPickers,
+    getPrevButtonProps,
+    getNextButtonProps,
+    getErrorMessageProps,
+    setIsHeaderExpanded,
+    topContent,
+    bottomContent,
+    errorMessage,
+    classNames,
+    otherProps
+  } = useCalendarBase(originalProps);
+  const headerRef = (0, import_react2.useRef)(null);
+  const state = (0, import_calendar2.useCalendarState)({
+    ...originalProps,
+    locale,
+    minValue,
+    maxValue,
+    visibleDuration,
+    createCalendar: !createCalendarProp || typeof createCalendarProp !== "function" ? import_date2.createCalendar : createCalendarProp
+  });
+  const { title, calendarProps, prevButtonProps, nextButtonProps, errorMessageProps } = (0, import_calendar.useCalendar)(originalProps, state);
+  const baseStyles = (0, import_theme2.cn)(classNames == null ? void 0 : classNames.base, className);
+  const buttonPickerProps = {
+    ...(0, import_shared_utils2.mergeProps)(buttonPickerPropsProp, { isDisabled: originalProps.isDisabled }),
+    onPress: (0, import_shared_utils2.chain)(buttonPickerPropsProp == null ? void 0 : buttonPickerPropsProp.onPress, () => setIsHeaderExpanded(!isHeaderExpanded))
+  };
+  const getBaseCalendarProps = (props = {}) => {
+    return {
+      ...baseProps,
+      Component,
+      showHelper,
+      firstDayOfWeek,
+      topContent,
+      bottomContent,
+      buttonPickerProps,
+      calendarRef: domRef,
+      calendarProps,
+      prevButtonProps: getPrevButtonProps(prevButtonProps),
+      nextButtonProps: getNextButtonProps(nextButtonProps),
+      errorMessageProps: getErrorMessageProps(errorMessageProps),
+      className: slots.base({ class: baseStyles }),
+      errorMessage,
+      ...(0, import_react_utils2.filterDOMProps)(otherProps, {
+        enabled: shouldFilterDOMProps
+      }),
+      ...props
+    };
+  };
+  const context = (0, import_react2.useMemo)(
+    () => ({
+      state,
+      slots,
+      headerRef,
+      weekdayStyle,
+      isHeaderExpanded,
+      setIsHeaderExpanded,
+      visibleMonths,
+      classNames,
+      showMonthAndYearPickers,
+      disableAnimation
+    }),
+    [
+      state,
+      slots,
+      classNames,
+      weekdayStyle,
+      isHeaderExpanded,
+      setIsHeaderExpanded,
+      visibleMonths,
+      disableAnimation,
+      showMonthAndYearPickers
+    ]
+  );
+  return {
+    Component,
+    children,
+    domRef,
+    context,
+    state,
+    slots,
+    title,
+    classNames,
+    getBaseCalendarProps
+  };
+}
+
+// src/calendar-context.ts
+var import_react_utils3 = require("@sytechui/react-utils");
+var [CalendarProvider, useCalendarContext] = (0, import_react_utils3.createContext)({
+  name: "CalendarContext",
+  strict: true,
+  errorMessage: "useContext: `context` is undefined. Seems you forgot to wrap component within the CalendarProvider"
+});
+
+// src/calendar-base.tsx
+var import_react5 = require("react");
+var import_visually_hidden = require("@react-aria/visually-hidden");
+var import_button2 = require("@sytechui/button");
+var import_shared_utils5 = require("@sytechui/shared-utils");
+var import_framer_motion3 = require("framer-motion");
+var import_i18n5 = 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_date4 = require("@internationalized/date");
+var import_i18n3 = require("@react-aria/i18n");
+var import_calendar4 = require("@react-aria/calendar");
+var import_framer_motion = require("framer-motion");
+var import_shared_utils4 = require("@sytechui/shared-utils");
+
+// src/calendar-cell.tsx
+var import_date3 = require("@internationalized/date");
+var import_calendar3 = require("@react-aria/calendar");
+var import_i18n2 = require("@react-aria/i18n");
+var import_focus = require("@react-aria/focus");
+var import_interactions = require("@react-aria/interactions");
+var import_react3 = require("react");
+var import_shared_utils3 = 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_react3.useRef)(null);
+  const {
+    cellProps,
+    buttonProps,
+    isPressed,
+    isSelected,
+    isDisabled,
+    isFocused,
+    isInvalid,
+    formattedDate
+  } = (0, import_calendar3.useCalendarCell)(
+    {
+      ...props,
+      isDisabled: !(0, import_date3.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_date3.isSameDay)(props.date, highlightedRange.start) : false;
+  const isSelectionEnd = isSelected && highlightedRange ? (0, import_date3.isSameDay)(props.date, highlightedRange.end) : false;
+  const { locale } = (0, import_i18n2.useLocale)();
+  const dayOfWeek = (0, import_date3.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_utils3.mergeProps)(buttonProps, hoverProps, focusProps),
+      ref,
+      className: slots == null ? void 0 : slots.cellButton({ class: classNames == null ? void 0 : classNames.cellButton }),
+      "data-disabled": (0, import_shared_utils3.dataAttr)(isDisabled && !isInvalid),
+      "data-focus-visible": (0, import_shared_utils3.dataAttr)(isFocused && isFocusVisible),
+      "data-hover": (0, import_shared_utils3.dataAttr)(isHovered),
+      "data-invalid": (0, import_shared_utils3.dataAttr)(isInvalid),
+      "data-outside-month": (0, import_shared_utils3.dataAttr)(!(0, import_date3.isSameMonth)(props.date, currentMonth)),
+      "data-pressed": (0, import_shared_utils3.dataAttr)(isPressed && !state.isReadOnly),
+      "data-range-end": (0, import_shared_utils3.dataAttr)(isRangeEnd),
+      "data-range-selection": (0, import_shared_utils3.dataAttr)(isSelected && "highlightedRange" in state),
+      "data-range-start": (0, import_shared_utils3.dataAttr)(isRangeStart),
+      "data-readonly": (0, import_shared_utils3.dataAttr)(state.isReadOnly),
+      "data-selected": (0, import_shared_utils3.dataAttr)(isSelected),
+      "data-selection-end": (0, import_shared_utils3.dataAttr)(isSelectionEnd),
+      "data-selection-start": (0, import_shared_utils3.dataAttr)(isSelectionStart),
+      "data-today": (0, import_shared_utils3.dataAttr)((0, import_date3.isToday)(props.date, state.timeZone)),
+      "data-unavailable": (0, import_shared_utils3.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-month.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function CalendarMonth(props) {
+  const { startDate, direction, currentMonth, firstDayOfWeek } = props;
+  const { locale } = (0, import_i18n3.useLocale)();
+  const weeksInMonth = (0, import_date4.getWeeksInMonth)(startDate, locale, firstDayOfWeek);
+  const { state, slots, weekdayStyle, isHeaderExpanded, disableAnimation, classNames } = useCalendarContext();
+  const { gridProps, headerProps, weekDays } = (0, import_calendar4.useCalendarGrid)(
+    {
+      ...props,
+      weekdayStyle,
+      endDate: (0, import_date4.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_utils4.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_i18n4 = require("@react-aria/i18n");
+var import_framer_motion2 = require("framer-motion");
+var import_button = require("@sytechui/button");
+var import_react4 = 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_i18n4.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_react4.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_react6 = require("react");
+var domAnimation = () => import("@sytechui/dom-animation").then((res) => res.default);
+var PopLayoutWrapper = (0, import_react5.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_react5.useState)(0);
+  const { direction: localeDirection } = (0, import_i18n5.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_react5.Fragment, { children: [
+        i === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_button2.Button,
+          {
+            ...isRTL ? nextButtonProps : prevButtonProps,
+            onPress: (0, import_shared_utils5.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_utils5.chain)(
+              isRTL ? prevButtonProps.onPress : nextButtonProps.onPress,
+              () => setDirection(1)
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronRightIcon, {})
+          }
+        )
+      ] }, `calendar-header-${i}`)
+    );
+    const calendarMonthContent = /* @__PURE__ */ (0, import_react6.createElement)(
+      CalendarMonth,
+      {
+        ...props,
+        key: `calendar-month-${i}`,
+        currentMonth: currentMonth.month,
+        direction,
+        firstDayOfWeek,
+        startDate: d
+      }
+    );
+    calendars.push(
+      showMonthAndYearPickers ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react5.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_utils5.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
+  ] });
+}
+
+// src/calendar.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Calendar = (0, import_system2.forwardRef)(function Calendar2(props, ref) {
+  const { context, getBaseCalendarProps } = useCalendar({ ...props, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CalendarProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CalendarBase, { ...getBaseCalendarProps() }) });
+});
+var calendar_default = Calendar;
+
+// src/range-calendar.tsx
+var import_system3 = require("@sytechui/system");
+
+// src/use-range-calendar.ts
+var import_react7 = require("react");
+var import_react_utils4 = require("@sytechui/react-utils");
+var import_calendar5 = require("@react-aria/calendar");
+var import_calendar6 = require("@react-stately/calendar");
+var import_date5 = require("@internationalized/date");
+var import_shared_utils6 = require("@sytechui/shared-utils");
+var import_theme3 = require("@sytechui/theme");
+function useRangeCalendar({
+  buttonPickerProps: buttonPickerPropsProp,
+  className,
+  ...originalProps
+}) {
+  const {
+    Component,
+    slots,
+    children,
+    domRef,
+    locale,
+    showHelper,
+    firstDayOfWeek,
+    minValue,
+    maxValue,
+    weekdayStyle,
+    visibleDuration,
+    shouldFilterDOMProps,
+    isHeaderExpanded,
+    visibleMonths,
+    disableAnimation,
+    createCalendar: createCalendarProp,
+    showMonthAndYearPickers,
+    baseProps,
+    getPrevButtonProps,
+    getNextButtonProps,
+    getErrorMessageProps,
+    setIsHeaderExpanded,
+    topContent,
+    bottomContent,
+    errorMessage,
+    classNames,
+    otherProps
+  } = useCalendarBase({ ...originalProps, isRange: true });
+  const headerRef = (0, import_react7.useRef)(null);
+  const state = (0, import_calendar6.useRangeCalendarState)({
+    ...originalProps,
+    locale,
+    minValue,
+    maxValue,
+    visibleDuration,
+    createCalendar: !createCalendarProp || typeof createCalendarProp !== "function" ? import_date5.createCalendar : createCalendarProp
+  });
+  const { title, calendarProps, prevButtonProps, nextButtonProps, errorMessageProps } = (0, import_calendar5.useRangeCalendar)(originalProps, state, domRef);
+  const baseStyles = (0, import_theme3.cn)(classNames == null ? void 0 : classNames.base, className);
+  const buttonPickerProps = {
+    ...buttonPickerPropsProp,
+    onPress: (0, import_shared_utils6.chain)(buttonPickerPropsProp == null ? void 0 : buttonPickerPropsProp.onPress, () => setIsHeaderExpanded(!isHeaderExpanded))
+  };
+  const getBaseCalendarProps = (props = {}) => {
+    return {
+      ...baseProps,
+      Component,
+      showHelper,
+      firstDayOfWeek,
+      topContent,
+      bottomContent,
+      buttonPickerProps,
+      calendarRef: domRef,
+      calendarProps,
+      prevButtonProps: getPrevButtonProps(prevButtonProps),
+      nextButtonProps: getNextButtonProps(nextButtonProps),
+      errorMessageProps: getErrorMessageProps(errorMessageProps),
+      className: slots.base({ class: baseStyles }),
+      errorMessage,
+      ...(0, import_react_utils4.filterDOMProps)(otherProps, {
+        enabled: shouldFilterDOMProps
+      }),
+      ...props
+    };
+  };
+  const context = (0, import_react7.useMemo)(
+    () => ({
+      state,
+      slots,
+      headerRef,
+      weekdayStyle,
+      isHeaderExpanded,
+      setIsHeaderExpanded,
+      visibleMonths,
+      showMonthAndYearPickers,
+      classNames,
+      disableAnimation
+    }),
+    [
+      state,
+      slots,
+      classNames,
+      weekdayStyle,
+      isHeaderExpanded,
+      setIsHeaderExpanded,
+      visibleMonths,
+      disableAnimation,
+      showMonthAndYearPickers
+    ]
+  );
+  return {
+    Component,
+    children,
+    domRef,
+    context,
+    state,
+    slots,
+    title,
+    classNames,
+    getBaseCalendarProps
+  };
+}
+
+// src/range-calendar.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var RangeCalendar = (0, import_system3.forwardRef)(function RangeCalendar2(props, ref) {
+  const { context, getBaseCalendarProps } = useRangeCalendar({ ...props, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CalendarProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CalendarBase, { ...getBaseCalendarProps() }) });
+});
+var range_calendar_default = RangeCalendar;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Calendar,
+  CalendarProvider,
+  RangeCalendar,
+  useCalendar,
+  useCalendarContext,
+  useRangeCalendar
+});