@sytechui/calendar 2.2.32

package/dist/chunk-H34OUI62.mjs

@@ -0,0 +1,157 @@
+"use client";
+
+// src/use-calendar-base.ts
+import { createCalendar, CalendarDate, DateFormatter } from "@internationalized/date";
+import { mapPropsVariants, useProviderContext } from "@sytechui/system";
+import { useCallback, useMemo } from "react";
+import { calendar } from "@sytechui/theme";
+import { useControlledState } from "@react-stately/utils";
+import { useDOMRef } from "@sytechui/react-utils";
+import { useLocale } from "@react-aria/i18n";
+import {
+  clamp,
+  dataAttr,
+  objectToDeps,
+  getGregorianYearOffset,
+  mergeProps
+} from "@sytechui/shared-utils";
+function useCalendarBase(originalProps) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const [props, variantProps] = mapPropsVariants(originalProps, calendar.variantKeys);
+  const globalContext = useProviderContext();
+  const { locale, direction } = useLocale();
+  const isRTL = direction === "rtl";
+  const calendarProp = createCalendar(
+    new DateFormatter(locale).resolvedOptions().calendar
+  );
+  const gregorianYearOffset = 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 CalendarDate(calendarProp, 1900 + gregorianYearOffset, 1, 1),
+    maxValue = (_e = (_d = globalContext == null ? void 0 : globalContext.defaultDates) == null ? void 0 : _d.maxDate) != null ? _e : new CalendarDate(calendarProp, 2099 + gregorianYearOffset, 12, 31),
+    prevButtonProps: prevButtonPropsProp,
+    nextButtonProps: nextButtonPropsProp,
+    errorMessage,
+    classNames,
+    ...otherProps
+  } = props;
+  const Component = as || "div";
+  const visibleMonths = clamp(visibleMonthsProp, 1, 3);
+  const showMonthAndYearPickers = originalProps.showMonthAndYearPickers && visibleMonths === 1;
+  const domRef = useDOMRef(ref);
+  const handleHeaderExpandedChange = useCallback(
+    (isExpanded) => {
+      onHeaderExpandedChange(isExpanded || false);
+    },
+    [onHeaderExpandedChange]
+  );
+  const [isHeaderExpanded, setIsHeaderExpanded] = useControlledState(
+    isHeaderExpandedProp,
+    isHeaderDefaultExpanded != null ? isHeaderDefaultExpanded : false,
+    handleHeaderExpandedChange
+  );
+  const visibleDuration = useMemo(() => ({ months: visibleMonths }), [visibleMonths]);
+  const hasMultipleMonths = visibleMonths > 1;
+  const shouldFilterDOMProps = typeof Component === "string";
+  const slots = useMemo(
+    () => calendar({
+      ...variantProps,
+      showMonthAndYearPickers,
+      isRange: !!originalProps.isRange,
+      isHeaderWrapperExpanded: isHeaderExpanded,
+      className,
+      isRTL
+    }),
+    [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": 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 }),
+      ...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 }),
+      ...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
+  };
+}
+
+export {
+  useCalendarBase
+};

package/dist/chunk-HUKPVIZ5.mjs

@@ -0,0 +1,31 @@
+"use client";
+
+// src/chevron-left.tsx
+import { jsx } from "react/jsx-runtime";
+var ChevronLeftIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    focusable: "false",
+    height: "1em",
+    role: "presentation",
+    viewBox: "0 0 16 16",
+    width: "1em",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M10 3.33334L6 8.00001L10 12.6667",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5"
+      }
+    )
+  }
+);
+
+export {
+  ChevronLeftIcon
+};

package/dist/chunk-IDU5RSFL.mjs

@@ -0,0 +1,93 @@
+"use client";
+import {
+  ChevronDownIcon
+} from "./chunk-JJRY4BYN.mjs";
+import {
+  useCalendarContext
+} from "./chunk-MCZLP73P.mjs";
+import {
+  slideVariants
+} from "./chunk-5CY7DCRB.mjs";
+
+// src/calendar-header.tsx
+import { useDateFormatter } from "@react-aria/i18n";
+import { m } from "framer-motion";
+import { Button } from "@sytechui/button";
+import { useCallback } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+function CalendarHeader(props) {
+  const { direction, date, currentMonth, buttonPickerProps } = props;
+  const {
+    state,
+    slots,
+    headerRef,
+    showMonthAndYearPickers,
+    isHeaderExpanded,
+    setIsHeaderExpanded,
+    disableAnimation,
+    classNames
+  } = useCalendarContext();
+  const monthAndYearDateFormatter = 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__ */ jsx(Fragment, { children: disableAnimation ? /* @__PURE__ */ 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__ */ jsx(
+    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 = useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsHeaderExpanded == null ? void 0 : setIsHeaderExpanded(false);
+      }
+    },
+    [setIsHeaderExpanded]
+  );
+  return showMonthAndYearPickers ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...headerProps,
+      "aria-label": "switch to year and month view",
+      disableAnimation,
+      endContent: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "chevron-icon" }),
+      onKeyDown: handleKeyDown,
+      ...buttonPickerProps,
+      children: headerTitle
+    }
+  ) : /* @__PURE__ */ jsx("header", { ...headerProps, children: headerTitle });
+}
+
+export {
+  CalendarHeader
+};

package/dist/chunk-IFK7FCNU.mjs

@@ -0,0 +1,42 @@
+"use client";
+import {
+  useCalendarPicker
+} from "./chunk-JQFIYCMS.mjs";
+
+// src/calendar-picker.tsx
+import { TimePicker } from "@sytechui/time-picker";
+import { jsx } from "react/jsx-runtime";
+function CalendarPicker(props) {
+  const { state, slots, classNames, isHeaderExpanded } = useCalendarPicker(props);
+  return /* @__PURE__ */ 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__ */ jsx(
+        TimePicker,
+        {
+          isMonth: true,
+          isYear: true,
+          isDay: false,
+          value: state.focusedDate,
+          onChange: (date) => {
+            state.setFocusedDate(
+              state.focusedDate.set({
+                year: date.year,
+                month: date.month
+              })
+            );
+          }
+        }
+      )
+    }
+  );
+}
+
+export {
+  CalendarPicker
+};

package/dist/chunk-JJRY4BYN.mjs

@@ -0,0 +1,31 @@
+"use client";
+
+// src/chevron-down.tsx
+import { jsx } from "react/jsx-runtime";
+var ChevronDownIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    focusable: "false",
+    height: "1em",
+    role: "presentation",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M19 9L12 15L5 9",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5"
+      }
+    )
+  }
+);
+
+export {
+  ChevronDownIcon
+};

package/dist/chunk-JQFIYCMS.mjs

@@ -0,0 +1,19 @@
+"use client";
+import {
+  useCalendarContext
+} from "./chunk-MCZLP73P.mjs";
+
+// src/use-calendar-picker.ts
+function useCalendarPicker(_props) {
+  const { slots, state, isHeaderExpanded, classNames } = useCalendarContext();
+  return {
+    state,
+    slots,
+    classNames,
+    isHeaderExpanded
+  };
+}
+
+export {
+  useCalendarPicker
+};

package/dist/chunk-MCZLP73P.mjs

@@ -0,0 +1,14 @@
+"use client";
+
+// src/calendar-context.ts
+import { createContext } from "@sytechui/react-utils";
+var [CalendarProvider, useCalendarContext] = createContext({
+  name: "CalendarContext",
+  strict: true,
+  errorMessage: "useContext: `context` is undefined. Seems you forgot to wrap component within the CalendarProvider"
+});
+
+export {
+  CalendarProvider,
+  useCalendarContext
+};

package/dist/chunk-MDGP3JHC.mjs

@@ -0,0 +1,74 @@
+"use client";
+
+// src/calendar-cell.tsx
+import { getDayOfWeek, isSameDay, isSameMonth, isToday } from "@internationalized/date";
+import { useCalendarCell } from "@react-aria/calendar";
+import { useLocale } from "@react-aria/i18n";
+import { useFocusRing } from "@react-aria/focus";
+import { useHover } from "@react-aria/interactions";
+import { useRef } from "react";
+import { dataAttr, mergeProps } from "@sytechui/shared-utils";
+import { jsx } from "react/jsx-runtime";
+function CalendarCell(originalProps) {
+  const { state, slots, isPickerVisible, currentMonth, classNames, firstDayOfWeek, ...props } = originalProps;
+  const ref = useRef(null);
+  const {
+    cellProps,
+    buttonProps,
+    isPressed,
+    isSelected,
+    isDisabled,
+    isFocused,
+    isInvalid,
+    formattedDate
+  } = useCalendarCell(
+    {
+      ...props,
+      isDisabled: !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 ? isSameDay(props.date, highlightedRange.start) : false;
+  const isSelectionEnd = isSelected && highlightedRange ? isSameDay(props.date, highlightedRange.end) : false;
+  const { locale } = useLocale();
+  const dayOfWeek = 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 } = useFocusRing();
+  const { hoverProps, isHovered } = useHover({
+    isDisabled: isDisabled || isUnavailable || state.isReadOnly
+  });
+  return /* @__PURE__ */ jsx("td", { className: slots == null ? void 0 : slots.cell({ class: classNames == null ? void 0 : classNames.cell }), "data-slot": "cell", ...cellProps, children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...mergeProps(buttonProps, hoverProps, focusProps),
+      ref,
+      className: slots == null ? void 0 : slots.cellButton({ class: classNames == null ? void 0 : classNames.cellButton }),
+      "data-disabled": dataAttr(isDisabled && !isInvalid),
+      "data-focus-visible": dataAttr(isFocused && isFocusVisible),
+      "data-hover": dataAttr(isHovered),
+      "data-invalid": dataAttr(isInvalid),
+      "data-outside-month": dataAttr(!isSameMonth(props.date, currentMonth)),
+      "data-pressed": dataAttr(isPressed && !state.isReadOnly),
+      "data-range-end": dataAttr(isRangeEnd),
+      "data-range-selection": dataAttr(isSelected && "highlightedRange" in state),
+      "data-range-start": dataAttr(isRangeStart),
+      "data-readonly": dataAttr(state.isReadOnly),
+      "data-selected": dataAttr(isSelected),
+      "data-selection-end": dataAttr(isSelectionEnd),
+      "data-selection-start": dataAttr(isSelectionStart),
+      "data-today": dataAttr(isToday(props.date, state.timeZone)),
+      "data-unavailable": dataAttr(isUnavailable),
+      children: /* @__PURE__ */ jsx("span", { children: formattedDate })
+    }
+  ) });
+}
+
+export {
+  CalendarCell
+};

package/dist/chunk-MUYVZHWM.mjs

@@ -0,0 +1,31 @@
+"use client";
+
+// src/chevron-right.tsx
+import { jsx } from "react/jsx-runtime";
+var ChevronRightIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    fill: "none",
+    focusable: "false",
+    height: "1em",
+    role: "presentation",
+    viewBox: "0 0 16 16",
+    width: "1em",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M6 3.33334L10 8.00001L6 12.6667",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5"
+      }
+    )
+  }
+);
+
+export {
+  ChevronRightIcon
+};

package/dist/chunk-OEB7VI2R.mjs

@@ -0,0 +1,125 @@
+"use client";
+import {
+  useCalendarBase
+} from "./chunk-H34OUI62.mjs";
+
+// src/use-calendar.ts
+import { useMemo, useRef } from "react";
+import { filterDOMProps } from "@sytechui/react-utils";
+import { useCalendar as useAriaCalendar } from "@react-aria/calendar";
+import { useCalendarState } from "@react-stately/calendar";
+import { createCalendar } from "@internationalized/date";
+import { chain, mergeProps } from "@sytechui/shared-utils";
+import { cn } from "@sytechui/theme";
+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 = useRef(null);
+  const state = useCalendarState({
+    ...originalProps,
+    locale,
+    minValue,
+    maxValue,
+    visibleDuration,
+    createCalendar: !createCalendarProp || typeof createCalendarProp !== "function" ? createCalendar : createCalendarProp
+  });
+  const { title, calendarProps, prevButtonProps, nextButtonProps, errorMessageProps } = useAriaCalendar(originalProps, state);
+  const baseStyles = cn(classNames == null ? void 0 : classNames.base, className);
+  const buttonPickerProps = {
+    ...mergeProps(buttonPickerPropsProp, { isDisabled: originalProps.isDisabled }),
+    onPress: 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,
+      ...filterDOMProps(otherProps, {
+        enabled: shouldFilterDOMProps
+      }),
+      ...props
+    };
+  };
+  const context = 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
+  };
+}
+
+export {
+  useCalendar
+};