@ceed/cds 0.0.186 → 0.0.187-cjs.0

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,335 @@
+'use strict';
+
+var React = require('react');
+var joy = require('@mui/joy');
+var ChevronLeft = require('../../external/@mui/icons-material/esm/ChevronLeft.js');
+var ChevronRight = require('../../external/@mui/icons-material/esm/ChevronRight.js');
+var framerMotion = require('framer-motion');
+var Button = require('../Button/Button.js');
+var Typography = require('../Typography/Typography.js');
+var index = require('./utils/index.js');
+var IconButton = require('../IconButton/IconButton.js');
+var useCalendarProps = require('./hooks/use-calendar-props.js');
+var useCalendar = require('./hooks/use-calendar.js');
+
+const CalendarRoot = joy.styled("div", {
+    name: "Calendar",
+    slot: "root",
+})({
+    maxWidth: "264px",
+});
+const CalendarHeader = joy.styled("div", {
+    name: "Calendar",
+    slot: "calendarHeader",
+})(({ theme }) => ({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: theme.spacing(2),
+}));
+const CalendarViewContainer = joy.styled("div", {
+    name: "Calendar",
+    slot: "viewContainer",
+    shouldForwardProp: (prop) => prop !== "calendarType",
+})(({ theme, calendarType }) => ({
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    position: "relative",
+    overflow: "hidden",
+    minHeight: calendarType === "datePicker" ? "250px" : "unset",
+}));
+const CalendarViewTable = joy.styled(framerMotion.motion.table, {
+    name: "Calendar",
+    slot: "viewTable",
+})(({ theme }) => ({
+    borderSpacing: 0,
+    "& td, & th": {
+        padding: 0,
+    },
+    "& th": {
+        paddingTop: theme.spacing(2),
+        paddingBottom: theme.spacing(2),
+    },
+}));
+const CalendarWeekHeaderContainer = joy.styled("thead", {
+    name: "Calendar",
+    slot: "weekHeaderContainer",
+})({});
+const CalendarDayPickerContainer = joy.styled("tbody", {
+    name: "Calendar",
+    slot: "dayPickerContainer",
+})({});
+const CalendarSwitchViewButton = joy.styled(Button.Button, {
+    name: "Calendar",
+    slot: "switchViewButton",
+})(({ ownerState }) => [
+    ownerState.view === "month" && {
+        pointerEvents: "none",
+    },
+]);
+const CalendarDayCell = joy.styled("td", {
+    name: "Calendar",
+    slot: "dayCell",
+})(({ theme }) => ({
+    // aria-current=date === range에 포함된 버튼
+    "&[aria-current=date]": {
+        position: "relative",
+        "& button[aria-current=date]:not([aria-selected=true]):not(:hover):not(:active)": {
+            backgroundColor: `rgb(${theme.palette.primary.lightChannel})`,
+        },
+        '& + td[aria-hidden] + td[aria-current="date"]::before': {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: "-10px",
+            bottom: 0,
+            width: "16px",
+            backgroundColor: `rgb(${theme.palette.primary.lightChannel})`,
+            zIndex: -1,
+        },
+    },
+}));
+const CalendarMonthCell = joy.styled("td", {
+    name: "Calendar",
+    slot: "monthCell",
+})(({ theme }) => ({
+    // aria-current=date === range에 포함된 버튼
+    "&[aria-current=date]": {
+        position: "relative",
+        "& button[aria-current=date]:not([aria-selected=true]):not(:hover):not(:active)": {
+            backgroundColor: `rgb(${theme.palette.primary.lightChannel})`,
+        },
+        '& + td[aria-hidden] + td[aria-current="date"]::before': {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: "-10px",
+            bottom: 0,
+            width: "16px",
+            backgroundColor: `rgb(${theme.palette.primary.lightChannel})`,
+            zIndex: -1,
+        },
+    },
+}));
+const CalendarMonth = joy.styled(Button.Button, {
+    name: "Calendar",
+    slot: "month",
+    shouldForwardProp: (prop) => prop !== "isSelected",
+})(({ theme, isSelected, disabled }) => [
+    {
+        width: "59px",
+        // height: "32px",
+        textAlign: "center",
+        "&:hover": {
+            color: theme.palette.primary.softColor,
+            backgroundColor: theme.palette.primary.softHoverBg,
+        },
+        "&:active": {
+            color: theme.palette.primary.softColor,
+            backgroundColor: theme.palette.primary.softActiveBg,
+        },
+    },
+    isSelected && {
+        backgroundColor: theme.palette.primary.solidBg,
+        color: theme.palette.primary.solidColor,
+        "&:hover": {
+            color: theme.palette.primary.solidColor,
+            backgroundColor: theme.palette.primary.solidHoverBg,
+        },
+        "&:active": {
+            color: theme.palette.primary.solidColor,
+            backgroundColor: theme.palette.primary.solidActiveBg,
+        },
+    },
+    disabled && {
+        color: theme.palette.neutral.solidDisabledColor,
+        backgroundColor: theme.palette.neutral.solidDisabledBg,
+    },
+]);
+const CalendarDay = joy.styled(Button.Button, {
+    name: "Calendar",
+    slot: "day",
+    shouldForwardProp: (prop) => !["isToday", "isSelected"].includes(prop),
+})(({ theme, isToday, isSelected, disabled }) => [
+    {
+        width: "32px",
+        height: "32px",
+        textAlign: "center",
+        "&:hover": {
+            color: theme.palette.primary.softColor,
+            backgroundColor: theme.palette.primary.softHoverBg,
+        },
+        "&:active": {
+            color: theme.palette.primary.softColor,
+            backgroundColor: theme.palette.primary.softActiveBg,
+        },
+    },
+    // NOTE: enabled, disabled 일때만 border 적용
+    isToday &&
+        !isSelected && {
+        "&:not([aria-current=date]):not(:hover)": {
+            border: `1px solid ${theme.palette.neutral.outlinedBorder}`,
+        },
+    },
+    isSelected && {
+        backgroundColor: theme.palette.primary.solidBg,
+        color: theme.palette.primary.solidColor,
+        "&:hover": {
+            color: theme.palette.primary.solidColor,
+            backgroundColor: theme.palette.primary.solidHoverBg,
+        },
+        "&:active": {
+            color: theme.palette.primary.solidColor,
+            backgroundColor: theme.palette.primary.solidActiveBg,
+        },
+    },
+    disabled && {
+        color: theme.palette.neutral.solidDisabledColor,
+        backgroundColor: theme.palette.neutral.solidDisabledBg,
+    },
+]);
+const variants = {
+    enter: (direction) => {
+        return {
+            x: direction > 0 ? 300 : -300,
+            opacity: 0,
+        };
+    },
+    center: {
+        position: "relative",
+        zIndex: 1,
+        x: 0,
+        opacity: 1,
+    },
+    exit: (direction) => {
+        return {
+            position: "absolute",
+            zIndex: 0,
+            x: direction < 0 ? 300 : -300,
+            opacity: 0,
+        };
+    },
+};
+const swipeConfidenceThreshold = 10000;
+const swipePower = (offset, velocity) => {
+    return Math.abs(offset) * velocity;
+};
+const PickerDays = (props) => {
+    // prop destruction
+    const { ownerState } = props;
+    // lib hooks
+    const { getPickerDayProps, getDayCellProps } = useCalendar.useCalendar(ownerState);
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    const calendarDates = React.useMemo(() => index.getCalendarDates(ownerState.viewMonth), [ownerState.viewMonth]);
+    const weekdayNames = React.useMemo(() => index.getWeekdayNames(ownerState.locale || "default"), [ownerState.locale]);
+    // effects
+    // handlers
+    return (React.createElement(CalendarViewContainer, { calendarType: "datePicker" },
+        React.createElement(framerMotion.AnimatePresence, { initial: false, custom: ownerState.direction },
+            React.createElement(CalendarViewTable
+            // #region framer-motion
+            , { 
+                // #region framer-motion
+                key: `${ownerState.viewMonth.toString()}_${ownerState.direction}`, custom: ownerState.direction, variants: variants, 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 < -1e4) {
+                        const date = new Date(ownerState.viewMonth || new Date());
+                        date.setMonth(date.getMonth() + 1);
+                        ownerState.onMonthChange?.(date);
+                    }
+                    else if (swipe > swipeConfidenceThreshold) {
+                        const date = new Date(ownerState.viewMonth || new Date());
+                        date.setMonth(date.getMonth() - 1);
+                        ownerState.onMonthChange?.(date);
+                    }
+                } },
+                React.createElement(CalendarWeekHeaderContainer, null,
+                    React.createElement("tr", null, weekdayNames.map((name, i) => (React.createElement(React.Fragment, { key: `${ownerState.viewMonth}_${name}_${i}` },
+                        React.createElement("th", null,
+                            React.createElement(Typography.Typography, { level: "body-xs", textAlign: "center" }, name)),
+                        i < 6 && (React.createElement("th", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" }))))))),
+                React.createElement(CalendarDayPickerContainer, null, calendarDates.map((weekDates, rowIndex) => (React.createElement(React.Fragment, { key: `${ownerState.viewMonth}_${rowIndex}` },
+                    React.createElement("tr", null, weekDates.map((date, i) => date ? (React.createElement(React.Fragment, { key: i },
+                        React.createElement(CalendarDayCell, { ...getDayCellProps(date) },
+                            React.createElement(CalendarDay, { size: "sm", variant: "plain", color: "neutral", ...getPickerDayProps(date) }, date)),
+                        i < 6 && (React.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })))) : (React.createElement(React.Fragment, { key: i },
+                        React.createElement("td", null),
+                        i < 6 && (React.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })))))),
+                    rowIndex < calendarDates.length - 1 && (React.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" },
+                        React.createElement("td", { colSpan: 13, style: { height: 4 } })))))))))));
+};
+const PickerMonths = (props) => {
+    const { ownerState } = props;
+    const { getPickerMonthProps, getMonthCellProps } = useCalendar.useCalendar(ownerState);
+    const chunkedMonths = Array.from({ length: 12 }, (_, i) => i).reduce((acc, month) => {
+        if (acc[acc.length - 1].length === 4) {
+            acc.push([]);
+        }
+        acc[acc.length - 1].push(month);
+        return acc;
+    }, [[]]);
+    const isMonthPicker = !ownerState.views?.find((view) => view === "day");
+    return (React.createElement(CalendarViewContainer, { calendarType: isMonthPicker ? "monthPicker" : "datePicker" },
+        React.createElement(framerMotion.AnimatePresence, { initial: false, custom: ownerState.direction },
+            React.createElement(CalendarViewTable
+            // #region framer-motion
+            , { 
+                // #region framer-motion
+                key: `${ownerState.viewMonth.getFullYear()}_${ownerState.direction}`, custom: ownerState.direction, variants: variants, 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 < -1e4) {
+                        const date = new Date(ownerState.viewMonth || new Date());
+                        date.setMonth(date.getMonth() + 1);
+                        ownerState.onMonthChange?.(date);
+                    }
+                    else if (swipe > swipeConfidenceThreshold) {
+                        const date = new Date(ownerState.viewMonth || new Date());
+                        date.setMonth(date.getMonth() - 1);
+                        ownerState.onMonthChange?.(date);
+                    }
+                } },
+                React.createElement("tbody", null, chunkedMonths.map((months, i) => (React.createElement(React.Fragment, { key: i },
+                    React.createElement("tr", null, months.map((monthIndex, j) => (React.createElement(React.Fragment, { key: monthIndex },
+                        React.createElement(CalendarMonthCell, { ...getMonthCellProps(monthIndex) },
+                            React.createElement(CalendarMonth, { size: "sm", variant: "plain", color: "neutral", ...getPickerMonthProps(monthIndex) }, index.getMonthNameFromIndex(monthIndex, ownerState.locale))),
+                        j < 3 && (React.createElement("td", { style: { width: 4 }, "aria-hidden": "true", "aria-description": "cell-gap" })))))),
+                    i < chunkedMonths.length - 1 && (React.createElement("tr", { "aria-hidden": "true", "aria-description": "row-gap" },
+                        React.createElement("td", { colSpan: 7, style: { height: 4 } })))))))))));
+};
+/**
+ * @see https://mui.com/x/api/date-pickers/date-calendar/ 인터페이스 참고
+ */
+const Calendar = React.forwardRef((inProps, ref) => {
+    // prop destruction
+    const [props, ownerState] = useCalendarProps.useCalendarProps(inProps);
+    const { value, defaultValue, onChange, locale, onViewChange, onMonthChange, view, views, rangeSelection, minDate, maxDate, disableFuture, disablePast, ...others } = props;
+    // lib hooks
+    const { calendarTitle, onPrev, onNext } = useCalendar.useCalendar(ownerState);
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement(CalendarRoot, { ref: ref, ...others },
+        React.createElement(CalendarHeader, null,
+            React.createElement(IconButton.IconButton, { size: "sm", onClick: onPrev, "aria-label": `Previous ${view === "day" ? "Month" : "Year"}` },
+                React.createElement(ChevronLeft, null)),
+            React.createElement(CalendarSwitchViewButton, { ownerState: ownerState, variant: "plain", color: "neutral", onClick: onViewChange, "aria-label": "Switch Calendar View" }, calendarTitle),
+            React.createElement(IconButton.IconButton, { size: "sm", onClick: onNext, "aria-label": `Next ${view === "day" ? "Month" : "Year"}` },
+                React.createElement(ChevronRight, null))),
+        view === "day" && React.createElement(PickerDays, { ownerState: ownerState }),
+        view === "month" && React.createElement(PickerMonths, { ownerState: ownerState })));
+});
+Calendar.displayName = "Calendar";
+
+exports.Calendar = Calendar;

package/dist/components/Calendar/hooks/use-calendar-props.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var React = require('react');
+var joy = require('@mui/joy');
+
+const resolveView = (view, views) => {
+    return views.includes(view) ? view : views[0];
+};
+const useCalendarProps = (inProps) => {
+    const [uncontrolledView, setUncontrolledView] = React.useState(() => resolveView(inProps.view || "day", inProps.views || ["day", "month"]));
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(inProps.defaultValue);
+    const [viewMonth, setViewMonth] = React.useState(() => {
+        const today = new Date();
+        today.setDate(1);
+        today.setHours(0, 0, 0, 0);
+        return inProps.value?.[0] || inProps.defaultValue?.[0] || today;
+    });
+    const [[page, direction], setPage] = React.useState([0, 0]);
+    const resolvedView = inProps.view ?? uncontrolledView;
+    const paginate = (newDirection) => {
+        setPage([page + newDirection, newDirection]);
+    };
+    const handleViewMonthChange = React.useCallback((newMonth) => {
+        setViewMonth(newMonth);
+        if (resolvedView === "month") {
+            if (viewMonth.getFullYear() !== newMonth.getFullYear()) {
+                paginate(newMonth > viewMonth ? 1 : -1);
+            }
+        }
+        else {
+            paginate(newMonth > viewMonth ? 1 : -1);
+        }
+        inProps.onMonthChange?.(newMonth);
+    }, [inProps.onMonthChange, viewMonth, resolvedView]);
+    const props = joy.useThemeProps({
+        props: {
+            locale: "default",
+            views: ["day", "month"],
+            view: resolvedView,
+            value: inProps.value ?? uncontrolledValue,
+            ...inProps,
+            // overrides
+            onChange: inProps.value
+                ? // Controlled
+                    inProps.onChange
+                : // Uncontrolled
+                    (value) => {
+                        setUncontrolledValue(value);
+                        inProps.onChange?.(value);
+                    },
+            onMonthChange: handleViewMonthChange,
+            onViewChange: () => {
+                const newView = resolvedView === "month" ? "day" : "month";
+                const isAllowedView = !inProps.views
+                    ? true
+                    : inProps.views.includes(newView);
+                if (!isAllowedView || inProps.view === newView)
+                    return;
+                if (inProps.onViewChange) {
+                    inProps.onViewChange(newView);
+                }
+                else {
+                    setUncontrolledView(newView);
+                }
+            },
+        },
+        name: "Calendar",
+    });
+    /**
+     * For ownerState
+     */
+    const ownerState = React.useMemo(() => ({ ...props, viewMonth, direction }), [props, viewMonth, direction]);
+    return [props, ownerState];
+};
+
+exports.useCalendarProps = useCalendarProps;

package/dist/components/Calendar/hooks/use-calendar.js

@@ -0,0 +1,249 @@
+'use strict';
+
+var React = require('react');
+var index = require('../utils/index.js');
+
+const useCalendar = (ownerState) => {
+    const [hoverDay, setHoverDay] = React.useState(null);
+    const [hoverMonth, setHoverMonth] = React.useState(null);
+    return {
+        calendarTitle: ownerState.view === "month"
+            ? index.getYearName(ownerState.viewMonth, ownerState.locale || "default")
+            : index.getMonthName(ownerState.viewMonth, ownerState.locale || "default"),
+        onPrev: React.useCallback(() => {
+            if (ownerState.view === "day") {
+                const prevMonth = new Date(ownerState.viewMonth || new Date());
+                prevMonth.setMonth(prevMonth.getMonth() - 1);
+                ownerState.onMonthChange?.(prevMonth);
+            }
+            else if (ownerState.view === "month") {
+                const prevYear = new Date(ownerState.viewMonth || new Date());
+                prevYear.setFullYear(prevYear.getFullYear() - 1);
+                ownerState.onMonthChange?.(prevYear);
+            }
+        }, [ownerState.onMonthChange, ownerState.viewMonth, ownerState.view]),
+        onNext: React.useCallback(() => {
+            if (ownerState.view === "day") {
+                const nextMonth = new Date(ownerState.viewMonth || new Date());
+                nextMonth.setMonth(nextMonth.getMonth() + 1);
+                ownerState.onMonthChange?.(nextMonth);
+            }
+            else if (ownerState.view === "month") {
+                const nextYear = new Date(ownerState.viewMonth || new Date());
+                nextYear.setFullYear(nextYear.getFullYear() + 1);
+                ownerState.onMonthChange?.(nextYear);
+            }
+        }, [ownerState.onMonthChange, ownerState.viewMonth, ownerState.view]),
+        getDayCellProps: React.useCallback((day) => {
+            const thisDay = new Date(ownerState.viewMonth || new Date());
+            thisDay.setHours(0, 0, 0, 0);
+            thisDay.setDate(day);
+            const inRange = ownerState.rangeSelection &&
+                ownerState.value &&
+                ownerState.value[0] &&
+                // NOTE: hover day is not included in the range
+                ((hoverDay &&
+                    index.isWithinRange(ownerState.value[0], hoverDay, thisDay)) ||
+                    // NOTE: Selected range is included in the range
+                    (ownerState.value[1] &&
+                        index.isWithinRange(ownerState.value[0], ownerState.value[1], thisDay)));
+            return {
+                "aria-label": thisDay.toLocaleDateString(),
+                "aria-current": inRange ? "date" : undefined,
+            };
+        }, [
+            ownerState.rangeSelection,
+            ownerState.value,
+            ownerState.viewMonth,
+            hoverDay,
+        ]),
+        getMonthCellProps: React.useCallback((monthIndex) => {
+            const thisMonth = new Date(ownerState.viewMonth || new Date());
+            thisMonth.setDate(1);
+            thisMonth.setHours(0, 0, 0, 0);
+            thisMonth.setMonth(monthIndex);
+            const isMonthRangeSelection = !ownerState.views?.find((view) => view === "day") &&
+                ownerState.rangeSelection;
+            const inRange = isMonthRangeSelection &&
+                ownerState.value &&
+                ownerState.value[0] &&
+                // NOTE: hover day is not included in the range
+                ((hoverMonth &&
+                    index.isWithinRange(ownerState.value[0], hoverMonth, thisMonth)) ||
+                    // NOTE: Selected range is included in the range
+                    (ownerState.value[1] &&
+                        index.isWithinRange(ownerState.value[0], ownerState.value[1], thisMonth)));
+            return {
+                "aria-label": thisMonth.toLocaleDateString(),
+                "aria-current": inRange ? "date" : undefined,
+            };
+        }, [
+            ownerState.rangeSelection,
+            ownerState.value,
+            ownerState.viewMonth,
+            hoverMonth,
+        ]),
+        getPickerDayProps: React.useCallback((day) => {
+            const thisDay = new Date(ownerState.viewMonth || new Date());
+            thisDay.setHours(0, 0, 0, 0);
+            thisDay.setDate(day);
+            const isSelected = !!ownerState.value &&
+                (index.isSameDay(thisDay, ownerState.value[0]) ||
+                    (ownerState.value[1] && index.isSameDay(thisDay, ownerState.value[1])));
+            const inRange = ownerState.rangeSelection &&
+                ownerState.value &&
+                ownerState.value[0] &&
+                // NOTE: hover day is not included in the range
+                ((hoverDay &&
+                    index.isWithinRange(ownerState.value[0], hoverDay, thisDay)) ||
+                    // NOTE: Selected range is included in the range
+                    (ownerState.value[1] &&
+                        index.isWithinRange(ownerState.value[0], ownerState.value[1], thisDay)));
+            const handleDayClick = () => {
+                if (ownerState.rangeSelection) {
+                    if (!ownerState.value) {
+                        ownerState.onChange?.([thisDay, undefined]);
+                    }
+                    else if (ownerState.value[0] && !ownerState.value[1]) {
+                        ownerState.onChange?.([
+                            new Date(Math.min(ownerState.value[0].getTime(), thisDay.getTime())),
+                            new Date(Math.max(ownerState.value[0].getTime(), thisDay.getTime())),
+                        ]);
+                    }
+                    else {
+                        ownerState.onChange?.([thisDay, undefined]);
+                    }
+                }
+                else {
+                    ownerState.onChange?.([thisDay, undefined]);
+                }
+                setHoverDay(null);
+            };
+            return {
+                isToday: index.isToday(thisDay),
+                isSelected,
+                onClick: handleDayClick,
+                onMouseEnter: ownerState.rangeSelection &&
+                    ownerState.value?.[0] &&
+                    !ownerState.value?.[1]
+                    ? () => setHoverDay(thisDay)
+                    : undefined,
+                disabled: (ownerState.minDate && thisDay < ownerState.minDate) ||
+                    (ownerState.maxDate && thisDay > ownerState.maxDate) ||
+                    (ownerState.disableFuture && thisDay > new Date()) ||
+                    (ownerState.disablePast &&
+                        thisDay <
+                            (() => {
+                                const today = new Date();
+                                today.setHours(0, 0, 0, 0);
+                                return today;
+                            })()),
+                tabIndex: -1,
+                "aria-label": thisDay.toLocaleDateString(),
+                "aria-selected": isSelected ? "true" : undefined,
+                "aria-current": inRange ? "date" : undefined,
+            };
+        }, [
+            ownerState.onChange,
+            ownerState.value,
+            ownerState.viewMonth,
+            ownerState.rangeSelection,
+            ownerState.minDate,
+            ownerState.maxDate,
+            ownerState.disableFuture,
+            ownerState.disablePast,
+            hoverDay,
+        ]),
+        getPickerMonthProps: React.useCallback((monthIndex) => {
+            const thisMonth = new Date(ownerState.viewMonth || new Date());
+            thisMonth.setDate(1);
+            thisMonth.setHours(0, 0, 0, 0);
+            thisMonth.setMonth(monthIndex);
+            const isMonthPicker = !ownerState.views?.find((view) => view === "day");
+            const isMonthRangeSelection = isMonthPicker && ownerState.rangeSelection;
+            const isSelected = !!ownerState.value &&
+                (index.isSameMonth(thisMonth, ownerState.value[0]) ||
+                    (ownerState.value[1] &&
+                        index.isSameMonth(thisMonth, ownerState.value[1])));
+            const inRange = isMonthRangeSelection &&
+                ownerState.value &&
+                ownerState.value[0] &&
+                // NOTE: hover day is not included in the range
+                ((hoverMonth &&
+                    index.isWithinRange(ownerState.value[0], hoverMonth, thisMonth)) ||
+                    // NOTE: Selected range is included in the range
+                    (ownerState.value[1] &&
+                        index.isWithinRange(ownerState.value[0], ownerState.value[1], thisMonth)));
+            const handleMonthClick = () => {
+                if (isMonthRangeSelection) {
+                    if (!ownerState.value) {
+                        ownerState.onChange?.([thisMonth, undefined]);
+                    }
+                    else if (ownerState.value[0] && !ownerState.value[1]) {
+                        ownerState.onChange?.([
+                            new Date(Math.min(ownerState.value[0].getTime(), thisMonth.getTime())),
+                            new Date(Math.max(ownerState.value[0].getTime(), thisMonth.getTime())),
+                        ]);
+                    }
+                    else {
+                        ownerState.onChange?.([thisMonth, undefined]);
+                    }
+                }
+                else if (isMonthPicker) {
+                    ownerState.onChange?.([thisMonth, undefined]);
+                }
+                else {
+                    ownerState.onViewChange?.("day");
+                    ownerState.onMonthChange?.(thisMonth);
+                }
+                setHoverMonth(null);
+            };
+            return {
+                isSelected,
+                onMouseEnter: isMonthRangeSelection &&
+                    ownerState.value?.[0] &&
+                    !ownerState.value?.[1]
+                    ? () => setHoverMonth(thisMonth)
+                    : undefined,
+                disabled: (ownerState.minDate &&
+                    (() => {
+                        // check all days disabled in this month
+                        const lastDay = new Date(thisMonth);
+                        lastDay.setMonth(lastDay.getMonth() + 1);
+                        lastDay.setDate(0);
+                        return lastDay < ownerState.minDate;
+                    })()) ||
+                    (ownerState.maxDate &&
+                        (() => {
+                            // check all days disabled in this month
+                            const lastDay = new Date(thisMonth);
+                            lastDay.setDate(0);
+                            return lastDay > ownerState.maxDate;
+                        })()) ||
+                    (ownerState.disableFuture && thisMonth > new Date()) ||
+                    (ownerState.disablePast &&
+                        thisMonth < new Date() &&
+                        !index.isSameMonth(thisMonth, new Date())),
+                onClick: handleMonthClick,
+                tabIndex: -1,
+                "aria-label": index.getMonthName(thisMonth, ownerState.locale || "default"),
+                "aria-selected": isSelected ? "true" : undefined,
+                "aria-current": inRange ? "date" : undefined,
+            };
+        }, [
+            ownerState.onMonthChange,
+            ownerState.onViewChange,
+            ownerState.onChange,
+            ownerState.viewMonth,
+            ownerState.locale,
+            ownerState.value,
+            ownerState.minDate,
+            ownerState.maxDate,
+            ownerState.disableFuture,
+            ownerState.disablePast,
+            hoverMonth,
+        ]),
+    };
+};
+
+exports.useCalendar = useCalendar;

package/dist/components/Calendar/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Calendar = require('./Calendar.js');
+
+
+
+exports.Calendar = Calendar.Calendar;
+exports.default = Calendar.Calendar;