@ceed/cds 0.0.186 → 0.0.187-treeshaking.1

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

@@ -0,0 +1,247 @@
+import { useState, useCallback } from 'react';
+import { getYearName, getMonthName, isWithinRange, isSameDay, isToday, isSameMonth } from '../utils/index.js';
+
+const useCalendar = (ownerState) => {
+    const [hoverDay, setHoverDay] = useState(null);
+    const [hoverMonth, setHoverMonth] = useState(null);
+    return {
+        calendarTitle: ownerState.view === "month"
+            ? getYearName(ownerState.viewMonth, ownerState.locale || "default")
+            : getMonthName(ownerState.viewMonth, ownerState.locale || "default"),
+        onPrev: 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: 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: 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 &&
+                    isWithinRange(ownerState.value[0], hoverDay, thisDay)) ||
+                    // NOTE: Selected range is included in the range
+                    (ownerState.value[1] &&
+                        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: 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 &&
+                    isWithinRange(ownerState.value[0], hoverMonth, thisMonth)) ||
+                    // NOTE: Selected range is included in the range
+                    (ownerState.value[1] &&
+                        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: useCallback((day) => {
+            const thisDay = new Date(ownerState.viewMonth || new Date());
+            thisDay.setHours(0, 0, 0, 0);
+            thisDay.setDate(day);
+            const isSelected = !!ownerState.value &&
+                (isSameDay(thisDay, ownerState.value[0]) ||
+                    (ownerState.value[1] && isSameDay(thisDay, ownerState.value[1])));
+            const inRange = ownerState.rangeSelection &&
+                ownerState.value &&
+                ownerState.value[0] &&
+                // NOTE: hover day is not included in the range
+                ((hoverDay &&
+                    isWithinRange(ownerState.value[0], hoverDay, thisDay)) ||
+                    // NOTE: Selected range is included in the range
+                    (ownerState.value[1] &&
+                        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: 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: 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 &&
+                (isSameMonth(thisMonth, ownerState.value[0]) ||
+                    (ownerState.value[1] &&
+                        isSameMonth(thisMonth, ownerState.value[1])));
+            const inRange = isMonthRangeSelection &&
+                ownerState.value &&
+                ownerState.value[0] &&
+                // NOTE: hover day is not included in the range
+                ((hoverMonth &&
+                    isWithinRange(ownerState.value[0], hoverMonth, thisMonth)) ||
+                    // NOTE: Selected range is included in the range
+                    (ownerState.value[1] &&
+                        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() &&
+                        !isSameMonth(thisMonth, new Date())),
+                onClick: handleMonthClick,
+                tabIndex: -1,
+                "aria-label": 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,
+        ]),
+    };
+};
+
+export { useCalendar };

package/dist/components/Calendar/index.d.ts

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

package/dist/components/Calendar/index.js

@@ -0,0 +1,5 @@
+import { Calendar } from './Calendar.js';
+
+
+
+export { Calendar, Calendar as default };

package/dist/components/Calendar/utils/index.js

@@ -0,0 +1,74 @@
+const getCalendarDates = (date) => {
+    const dates = [];
+    const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
+    const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    const firstWeekInThisMonth = Math.ceil((firstDay.getDay() + 1) / 7);
+    const lastWeekInThisMonth = Math.ceil((lastDay.getDate() + firstDay.getDay()) / 7);
+    let day = 1;
+    for (let i = 1; i <= lastWeekInThisMonth; i++) {
+        const week = [];
+        for (let j = 1; j <= 7; j++) {
+            if (i === firstWeekInThisMonth && j < firstDay.getDay() + 1) {
+                week.push(undefined);
+            }
+            else if (day > lastDay.getDate()) {
+                week.push(undefined);
+            }
+            else {
+                week.push(day);
+                day++;
+            }
+        }
+        dates.push(week);
+    }
+    return dates;
+};
+const getYearName = (date, locale) => {
+    return date.toLocaleString(locale, { year: "numeric" });
+};
+const getMonthName = (date, locale) => {
+    return date.toLocaleString(locale, { year: "numeric", month: "long" });
+};
+const getMonthNameFromIndex = (index, locale) => {
+    return new Date(0, index).toLocaleString(locale, { month: "short" });
+};
+/**
+ * 일~토 / Sun ~ Sat 같은 요일 이름을 가져옵니다.
+ */
+const getWeekdayNames = (locale) => {
+    const currentDay = new Date().getDay();
+    const date = new Date();
+    date.setDate(date.getDate() - currentDay);
+    return Array.from({ length: 7 }).map(() => {
+        const day = date.toLocaleString(locale, { weekday: "short" });
+        date.setDate(date.getDate() + 1);
+        return day;
+    });
+};
+const isToday = (date) => {
+    const today = new Date();
+    const d = new Date(date);
+    d.setHours(0, 0, 0, 0);
+    today.setHours(0, 0, 0, 0);
+    return d.getTime() === today.getTime();
+};
+const isSameDay = (date1, date2) => {
+    const d1 = new Date(date1);
+    const d2 = new Date(date2);
+    d1.setHours(0, 0, 0, 0);
+    d2.setHours(0, 0, 0, 0);
+    return d1.getTime() === d2.getTime();
+};
+const isWithinRange = (d1, d2, date) => {
+    const dateToCheck = new Date(date);
+    dateToCheck.setHours(0, 0, 0, 0);
+    const minDate = new Date(Math.min(d1.getTime(), d2.getTime()));
+    const maxDate = new Date(Math.max(d1.getTime(), d2.getTime()));
+    return dateToCheck >= minDate && dateToCheck <= maxDate;
+};
+const isSameMonth = (date1, date2) => {
+    return (date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth());
+};
+
+export { getCalendarDates, getMonthName, getMonthNameFromIndex, getWeekdayNames, getYearName, isSameDay, isSameMonth, isToday, isWithinRange };

package/dist/components/Card/Card.js

@@ -0,0 +1,20 @@
+import { Card as Card$1, CardContent as CardContent$1, CardCover as CardCover$1, CardActions as CardActions$1, CardOverflow as CardOverflow$1 } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionCard = motion(Card$1);
+const Card = MotionCard;
+Card.displayName = "Card";
+const MotionCardContent = motion(CardContent$1);
+const CardContent = MotionCardContent;
+CardContent.displayName = "CardContent";
+const MotionCardCover = motion(CardCover$1);
+const CardCover = MotionCardCover;
+CardCover.displayName = "CardCover";
+const MotionCardActions = motion(CardActions$1);
+const CardActions = MotionCardActions;
+CardActions.displayName = "CardActions";
+const MotionCardOverflow = motion(CardOverflow$1);
+const CardOverflow = MotionCardOverflow;
+CardOverflow.displayName = "CardOverflow";
+
+export { Card, CardActions, CardContent, CardCover, CardOverflow };

package/dist/components/Card/index.d.ts

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

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { Checkbox as Checkbox$1 } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionCheckbox = motion(Checkbox$1);
+const Checkbox = (props) => {
+    // prop destruction
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return React__default.createElement(MotionCheckbox, { ...props });
+};
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

package/dist/components/Checkbox/index.d.ts

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

package/dist/components/Checkbox/index.js

@@ -0,0 +1,5 @@
+import { Checkbox } from './Checkbox.js';
+
+
+
+export { Checkbox, Checkbox as default };

package/dist/components/Chip/Chip.js

@@ -0,0 +1,8 @@
+import { Chip as Chip$1 } from '@mui/joy';
+import { motion } from 'framer-motion';
+
+const MotionChip = motion(Chip$1);
+const Chip = MotionChip;
+Chip.displayName = "Chip";
+
+export { Chip };

package/dist/components/Chip/index.d.ts

@@ -1,3 +1,3 @@
-import { Chip } from './Chip';
-export * from './Chip';
+import { Chip } from "./Chip.js";
+export * from "./Chip.js";
 export default Chip;

package/dist/components/Chip/index.js

@@ -0,0 +1,5 @@
+import { Chip } from './Chip.js';
+
+
+
+export { Chip, Chip as default };

package/dist/components/Container/Container.js

@@ -0,0 +1,49 @@
+import { styled } from '@mui/joy';
+import React__default, { forwardRef } from 'react';
+
+const ContainerRoot = styled("div", {
+    name: "Container",
+    slot: "root",
+    shouldForwardProp: (prop) => prop !== "maxWidth" && prop !== "overrideBreakpoint",
+})(({ theme, maxWidth = "lg", overrideBreakpoint }) => [
+    {
+        width: "100%",
+        marginLeft: "auto",
+        boxSizing: "border-box",
+        marginRight: "auto",
+        display: "block", // Fix IE11 layout when used with main.
+        paddingLeft: theme.spacing(4),
+        paddingRight: theme.spacing(4),
+        [theme.breakpoints.up("md")]: {
+            paddingLeft: theme.spacing(8),
+            paddingRight: theme.spacing(8),
+        },
+        maxWidth: theme.breakpoints.values[maxWidth],
+    },
+    overrideBreakpoint
+        ? {
+            paddingLeft: theme.breakpoints.values[overrideBreakpoint] >=
+                theme.breakpoints.values.lg
+                ? theme.spacing(8)
+                : theme.spacing(4),
+            paddingRight: theme.breakpoints.values[overrideBreakpoint] >=
+                theme.breakpoints.values.lg
+                ? theme.spacing(8)
+                : theme.spacing(4),
+        }
+        : null,
+]);
+const Container = forwardRef(function Container(props, ref) {
+    // prop destruction
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return React__default.createElement(ContainerRoot, { ref: ref, ...props });
+});
+Container.displayName = "Container";
+
+export { Container };

package/dist/components/Container/index.d.ts

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

package/dist/components/CurrencyInput/CurrencyInput.js

@@ -0,0 +1,91 @@
+import React__default, { useCallback, useMemo, useState } from 'react';
+import { IntlMessageFormat } from 'intl-messageformat';
+import { NumericFormat } from 'react-number-format';
+import { Input } from '../Input/Input.js';
+import { styled, useThemeProps } from '@mui/joy';
+import { useCurrencySetting } from './hooks/use-currency-setting.js';
+import { useControlledState } from '../../hooks/use-controlled-state/index.js';
+
+const TextMaskAdapter = React__default.forwardRef(function TextMaskAdapter(props, ref) {
+    // prop destruction
+    const { onChange, ...innerProps } = props;
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React__default.createElement(NumericFormat, { ...innerProps, onValueChange: ({ value }) => {
+            onChange?.({
+                target: { name: props.name, value },
+            });
+        }, valueIsNumericString: true, getInputRef: ref, allowNegative: false }));
+});
+const CurrencyInputRoot = styled(Input, {
+    name: "CurrencyInput",
+    slot: "root",
+    overridesResolver: (props, styles) => styles.root,
+})({});
+const CurrencyInput = React__default.forwardRef(function CurrencyInput(inProps, ref) {
+    // prop destruction
+    const props = useThemeProps({ props: inProps, name: "CurrencyInput" });
+    const { currency = "USD", name, onChange, label, error, helperText, required, disabled, useMinorUnit, 
+    // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
+    sx, className, ...innerProps } = props;
+    // lib hooks
+    const { symbol, thousandSeparator, decimalSeparator, placeholder, fixedDecimalScale, decimalScale, } = useCurrencySetting(currency);
+    // state, ref, querystring hooks
+    const [_value, setValue] = useControlledState(props.value, props.defaultValue, useCallback((value) => onChange?.({ target: { name, value } }), [onChange, name]));
+    const value = useMemo(() => {
+        if (_value && useMinorUnit) {
+            return _value / Math.pow(10, decimalScale);
+        }
+        return _value;
+    }, [_value, useMinorUnit, decimalScale]);
+    const max = useMemo(() => {
+        if (props.max && useMinorUnit) {
+            return props.max / Math.pow(10, decimalScale);
+        }
+        return props.max;
+    }, [props.max, useMinorUnit, decimalScale]);
+    const [isOverLimit, setIsOverLimit] = useState(!!max && !!value && value > max);
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    const handleChange = useCallback((event) => {
+        if (event.target.value === "") {
+            setValue(undefined);
+            return;
+        }
+        const amount = useMinorUnit
+            ? Number(event.target.value?.replace(decimalSeparator, ""))
+            : Number(event.target.value);
+        if (!!max && Number(event.target.value) > max) {
+            setIsOverLimit(true);
+        }
+        else {
+            setIsOverLimit(false);
+        }
+        setValue(amount);
+    }, [decimalSeparator, max, useMinorUnit, setValue]);
+    return (React__default.createElement(CurrencyInputRoot, { ...innerProps, ref: ref, value: value, placeholder: placeholder, onChange: handleChange, error: error || isOverLimit, disabled: disabled, required: required, color: error || isOverLimit ? "danger" : props.color, label: label, helperText: isOverLimit
+            ? new IntlMessageFormat(`limit: {amount, number, ::currency/${currency} unit-width-narrow}`).format({ amount: max })
+            : helperText, slotProps: {
+            input: {
+                component: TextMaskAdapter,
+                decimalSeparator,
+                thousandSeparator,
+                prefix: symbol,
+                fixedDecimalScale,
+                decimalScale,
+                "aria-label": innerProps["aria-label"],
+            },
+        }, sx: {
+            ...sx,
+        }, className: className }));
+});
+
+export { CurrencyInput };