@ceed/cds 0.0.126 → 0.0.128

package/dist/components/Button/Button.js

@@ -1,28 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React, { forwardRef } from "react";
-import { Button as JoyButton } from "@mui/joy";
-import { motion } from "framer-motion";
-var MotionButton = motion(JoyButton);
-var Button = forwardRef(function (props, ref) {
-    // prop destruction
-    // lib hooks
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    return (React.createElement(MotionButton, __assign({ ref: ref }, props)));
-});
-export { Button };
-Button.displayName = "Button";

package/dist/components/Button/index.js

@@ -1,3 +0,0 @@
-import { Button } from "./Button";
-export * from "./Button";
-export default Button;

package/dist/components/Calendar/Calendar.js

@@ -1,383 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { Fragment, forwardRef, useMemo } from "react";
-import { styled } from "@mui/joy";
-// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
-import ChevronLeftIcon from "@mui/icons-material/esm/ChevronLeft.js";
-// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
-import ChevronRightIcon from "@mui/icons-material/esm/ChevronRight.js";
-import { AnimatePresence, motion } from "framer-motion";
-import Button from "../Button";
-import Typography from "../Typography";
-import { getCalendarDates, getMonthNameFromIndex, getWeekdayNames, } from "./utils";
-import IconButton from "../IconButton";
-import { useCalendarProps } from "./hooks/use-calendar-props";
-import { useCalendar } from "./hooks/use-calendar";
-var CalendarRoot = styled("div", {
-    name: "Calendar",
-    slot: "root",
-})({
-    maxWidth: "264px",
-});
-var CalendarHeader = styled("div", {
-    name: "Calendar",
-    slot: "calendarHeader",
-})(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        padding: theme.spacing(1),
-    });
-});
-var CalendarViewContainer = styled("div", {
-    name: "Calendar",
-    slot: "viewContainer",
-})(function (_a) {
-    var theme = _a.theme, calendarType = _a.calendarType;
-    return ({
-        paddingLeft: theme.spacing(1),
-        paddingRight: theme.spacing(1),
-        position: "relative",
-        overflow: "hidden",
-        minHeight: calendarType === 'datePicker' ? "250px" : "unset",
-    });
-});
-var CalendarViewTable = styled(motion.table, {
-    name: "Calendar",
-    slot: "viewTable",
-})(function (_a) {
-    var theme = _a.theme;
-    return ({
-        borderSpacing: 0,
-        "& td, & th": {
-            padding: 0,
-        },
-        "& th": {
-            paddingTop: theme.spacing(1),
-            paddingBottom: theme.spacing(1),
-        },
-    });
-});
-var CalendarWeekHeaderContainer = styled("thead", {
-    name: "Calendar",
-    slot: "weekHeaderContainer",
-})({});
-var CalendarDayPickerContainer = styled("tbody", {
-    name: "Calendar",
-    slot: "dayPickerContainer",
-})({});
-var CalendarSwitchViewButton = styled(Button, {
-    name: "Calendar",
-    slot: "switchViewButton",
-})(function (_a) {
-    var ownerState = _a.ownerState;
-    return [
-        ownerState.view === "month" && {
-            pointerEvents: "none",
-        },
-    ];
-});
-var CalendarDayCell = styled("td", {
-    name: "Calendar",
-    slot: "dayCell",
-})(function (_a) {
-    var theme = _a.theme;
-    return ({
-        // aria-current=date === range에 포함된 버튼
-        "&[aria-current=date]": {
-            position: "relative",
-            "& button[aria-current=date]:not([aria-selected=true]):not(:hover):not(:active)": {
-                backgroundColor: "rgb(".concat(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(".concat(theme.palette.primary.lightChannel, ")"),
-                zIndex: -1,
-            },
-        },
-    });
-});
-var CalendarMonthCell = styled("td", {
-    name: "Calendar",
-    slot: "monthCell",
-})(function (_a) {
-    var theme = _a.theme;
-    return ({
-        // aria-current=date === range에 포함된 버튼
-        "&[aria-current=date]": {
-            position: "relative",
-            "& button[aria-current=date]:not([aria-selected=true]):not(:hover):not(:active)": {
-                backgroundColor: "rgb(".concat(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(".concat(theme.palette.primary.lightChannel, ")"),
-                zIndex: -1,
-            },
-        },
-    });
-});
-var CalendarMonth = styled(Button, {
-    name: "Calendar",
-    slot: "month",
-})(function (_a) {
-    var theme = _a.theme, isSelected = _a.isSelected, disabled = _a.disabled;
-    return [
-        {
-            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,
-        },
-    ];
-});
-var CalendarDay = styled(Button, {
-    name: "Calendar",
-    slot: "day",
-})(function (_a) {
-    var theme = _a.theme, isToday = _a.isToday, isSelected = _a.isSelected, disabled = _a.disabled;
-    return [
-        {
-            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 ".concat(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,
-        },
-    ];
-});
-var variants = {
-    enter: function (direction) {
-        return {
-            x: direction > 0 ? 300 : -300,
-            opacity: 0,
-        };
-    },
-    center: {
-        position: 'relative',
-        zIndex: 1,
-        x: 0,
-        opacity: 1,
-    },
-    exit: function (direction) {
-        return {
-            position: 'absolute',
-            zIndex: 0,
-            x: direction < 0 ? 300 : -300,
-            opacity: 0,
-        };
-    },
-};
-var swipeConfidenceThreshold = 10000;
-var swipePower = function (offset, velocity) {
-    return Math.abs(offset) * velocity;
-};
-var PickerDays = function (props) {
-    // prop destruction
-    var ownerState = props.ownerState;
-    // lib hooks
-    var _a = useCalendar(ownerState), getPickerDayProps = _a.getPickerDayProps, getDayCellProps = _a.getDayCellProps;
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    var calendarDates = useMemo(function () { return getCalendarDates(ownerState.viewMonth); }, [ownerState.viewMonth]);
-    var weekdayNames = useMemo(function () { return getWeekdayNames(ownerState.locale || "default"); }, [ownerState.locale]);
-    // effects
-    // handlers
-    return (React.createElement(CalendarViewContainer, { calendarType: "datePicker" },
-        React.createElement(AnimatePresence, { initial: false, custom: ownerState.direction },
-            React.createElement(CalendarViewTable
-            // #region framer-motion
-            , { 
-                // #region framer-motion
-                key: "".concat(ownerState.viewMonth.toString(), "_").concat(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: function (e, _a) {
-                    var _b, _c;
-                    var offset = _a.offset, velocity = _a.velocity;
-                    var swipe = swipePower(offset.x, velocity.x);
-                    if (swipe < -swipeConfidenceThreshold) {
-                        var date = new Date(ownerState.viewMonth || new Date());
-                        date.setMonth(date.getMonth() + 1);
-                        (_b = ownerState.onMonthChange) === null || _b === void 0 ? void 0 : _b.call(ownerState, date);
-                    }
-                    else if (swipe > swipeConfidenceThreshold) {
-                        var date = new Date(ownerState.viewMonth || new Date());
-                        date.setMonth(date.getMonth() - 1);
-                        (_c = ownerState.onMonthChange) === null || _c === void 0 ? void 0 : _c.call(ownerState, date);
-                    }
-                } },
-                React.createElement(CalendarWeekHeaderContainer, null,
-                    React.createElement("tr", null, weekdayNames.map(function (name, i) { return (React.createElement(React.Fragment, null,
-                        React.createElement("th", null,
-                            React.createElement(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(function (weekDates, rowIndex) { return (React.createElement(Fragment, { key: "".concat(ownerState.viewMonth, "_").concat(rowIndex) },
-                    React.createElement("tr", null, weekDates.map(function (date, i) {
-                        return date ? (React.createElement(Fragment, { key: i },
-                            React.createElement(CalendarDayCell, __assign({}, getDayCellProps(date)),
-                                React.createElement(CalendarDay, __assign({ size: "sm", variant: "plain", color: "neutral" }, getPickerDayProps(date)), date)),
-                            i < 6 && (React.createElement("td", { "aria-hidden": "true", "aria-description": "cell-gap" })))) : (React.createElement(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 } }))))); }))))));
-};
-var PickerMonths = function (props) {
-    var _a;
-    var ownerState = props.ownerState;
-    var _b = useCalendar(ownerState), getPickerMonthProps = _b.getPickerMonthProps, getMonthCellProps = _b.getMonthCellProps;
-    var chunkedMonths = Array.from({ length: 12 }, function (_, i) { return i; }).reduce(function (acc, month) {
-        if (acc[acc.length - 1].length === 4) {
-            acc.push([]);
-        }
-        acc[acc.length - 1].push(month);
-        return acc;
-    }, [[]]);
-    var isMonthRangeSelection = !((_a = ownerState.views) === null || _a === void 0 ? void 0 : _a.find(function (view) { return view === 'day'; })) && ownerState.rangeSelection;
-    return (React.createElement(CalendarViewContainer, { calendarType: isMonthRangeSelection ? 'monthPicker' : 'datePicker' },
-        React.createElement(AnimatePresence, { initial: false, custom: ownerState.direction },
-            React.createElement(CalendarViewTable
-            // #region framer-motion
-            , { 
-                // #region framer-motion
-                key: "".concat(ownerState.viewMonth.getFullYear(), "_").concat(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: function (e, _a) {
-                    var _b, _c;
-                    var offset = _a.offset, velocity = _a.velocity;
-                    var swipe = swipePower(offset.x, velocity.x);
-                    if (swipe < -swipeConfidenceThreshold) {
-                        var date = new Date(ownerState.viewMonth || new Date());
-                        date.setMonth(date.getMonth() + 1);
-                        (_b = ownerState.onMonthChange) === null || _b === void 0 ? void 0 : _b.call(ownerState, date);
-                    }
-                    else if (swipe > swipeConfidenceThreshold) {
-                        var date = new Date(ownerState.viewMonth || new Date());
-                        date.setMonth(date.getMonth() - 1);
-                        (_c = ownerState.onMonthChange) === null || _c === void 0 ? void 0 : _c.call(ownerState, date);
-                    }
-                } },
-                React.createElement("tbody", null, chunkedMonths.map(function (months, i) { return (React.createElement(Fragment, { key: i },
-                    React.createElement("tr", null, months.map(function (monthIndex, j) { return (React.createElement(Fragment, { key: monthIndex },
-                        React.createElement(CalendarMonthCell, __assign({}, getMonthCellProps(monthIndex)),
-                            React.createElement(CalendarMonth, __assign({ size: "sm", variant: "plain", color: "neutral" }, getPickerMonthProps(monthIndex)), 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/ 인터페이스 참고
- */
-var Calendar = forwardRef(function (inProps, ref) {
-    // prop destruction
-    var _a = useCalendarProps(inProps), props = _a[0], ownerState = _a[1];
-    var value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, locale = props.locale, onViewChange = props.onViewChange, onMonthChange = props.onMonthChange, view = props.view, views = props.views, rangeSelection = props.rangeSelection, others = __rest(props, ["value", "defaultValue", "onChange", "locale", "onViewChange", "onMonthChange", "view", "views", "rangeSelection"]);
-    // lib hooks
-    var _b = useCalendar(ownerState), calendarTitle = _b.calendarTitle, onPrev = _b.onPrev, onNext = _b.onNext;
-    // state, ref, querystring hooks
-    // form hooks
-    // query hooks
-    // calculated values
-    // effects
-    // handlers
-    return (React.createElement(CalendarRoot, __assign({ ref: ref }, others),
-        React.createElement(CalendarHeader, null,
-            React.createElement(IconButton, { size: "sm", onClick: onPrev },
-                React.createElement(ChevronLeftIcon, null)),
-            React.createElement(CalendarSwitchViewButton, { ownerState: ownerState, variant: "plain", color: "neutral", onClick: onViewChange }, calendarTitle),
-            React.createElement(IconButton, { size: "sm", onClick: onNext },
-                React.createElement(ChevronRightIcon, null))),
-        view === "day" && React.createElement(PickerDays, { ownerState: ownerState }),
-        view === "month" && React.createElement(PickerMonths, { ownerState: ownerState })));
-});
-export { Calendar };
-Calendar.displayName = "Calendar";

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

@@ -1,80 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { useCallback, useMemo, useState } from "react";
-import { useThemeProps } from "@mui/joy";
-var resolveView = function (view, views) {
-    return views.includes(view) ? view : views[0];
-};
-export var useCalendarProps = function (inProps) {
-    var _a, _b;
-    var _c = useState(function () {
-        return resolveView(inProps.view || "day", inProps.views || ["day", "month"]);
-    }), uncontrolledView = _c[0], setUncontrolledView = _c[1];
-    var _d = useState(inProps.defaultValue), uncontrolledValue = _d[0], setUncontrolledValue = _d[1];
-    var _e = useState(function () {
-        var _a, _b;
-        var today = new Date();
-        today.setDate(1);
-        today.setHours(0, 0, 0, 0);
-        return ((_a = inProps.value) === null || _a === void 0 ? void 0 : _a[0]) || ((_b = inProps.defaultValue) === null || _b === void 0 ? void 0 : _b[0]) || today;
-    }), viewMonth = _e[0], setViewMonth = _e[1];
-    var _f = useState([0, 0]), _g = _f[0], page = _g[0], direction = _g[1], setPage = _f[1];
-    var resolvedView = (_a = inProps.view) !== null && _a !== void 0 ? _a : uncontrolledView;
-    var paginate = function (newDirection) {
-        setPage([page + newDirection, newDirection]);
-    };
-    var handleViewMonthChange = useCallback(function (newMonth) {
-        var _a;
-        setViewMonth(newMonth);
-        if (resolvedView === "month") {
-            if (viewMonth.getFullYear() !== newMonth.getFullYear()) {
-                paginate(newMonth > viewMonth ? 1 : -1);
-            }
-        }
-        else {
-            paginate(newMonth > viewMonth ? 1 : -1);
-        }
-        (_a = inProps.onMonthChange) === null || _a === void 0 ? void 0 : _a.call(inProps, newMonth);
-    }, [inProps.onMonthChange, viewMonth, resolvedView]);
-    var props = useThemeProps({
-        props: __assign(__assign({ locale: "default", views: ["day", "month"], view: resolvedView, value: (_b = inProps.value) !== null && _b !== void 0 ? _b : uncontrolledValue }, inProps), { 
-            // overrides
-            onChange: inProps.value
-                ? // Controlled
-                    inProps.onChange
-                : // Uncontrolled
-                    function (value) {
-                        var _a;
-                        setUncontrolledValue(value);
-                        (_a = inProps.onChange) === null || _a === void 0 ? void 0 : _a.call(inProps, value);
-                    }, onMonthChange: handleViewMonthChange, onViewChange: function () {
-                var newView = resolvedView === "month" ? "day" : "month";
-                var 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
-     */
-    var ownerState = useMemo(function () { return (__assign(__assign({}, props), { viewMonth: viewMonth, direction: direction })); }, [props, viewMonth, direction]);
-    return [props, ownerState];
-};