@x-plat/design-system 0.4.2 → 0.4.3

package/dist/components/index.js

@@ -1558,7 +1558,7 @@ var MONTH_LABELS = {
 };
 
 // src/components/Calendar/Calendar.tsx
-import { jsx as jsx301, jsxs as jsxs193 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx301, jsxs as jsxs193 } from "react/jsx-runtime";
 var Calendar = (props) => {
   const {
     year: yearProp,
@@ -1586,6 +1586,10 @@ var Calendar = (props) => {
     setYear,
     setMonth
   } = useCalendar(yearProp, monthProp);
+  const [pickerMode, setPickerMode] = React3.useState("days");
+  const [yearRangeStart, setYearRangeStart] = React3.useState(
+    Math.floor(year / 12) * 12
+  );
   React3.useEffect(() => {
     if (yearProp !== void 0) setYear(yearProp);
   }, [yearProp, setYear]);
@@ -1593,22 +1597,54 @@ var Calendar = (props) => {
     if (monthProp !== void 0) setMonth(monthProp);
   }, [monthProp, setMonth]);
   const handlePrev = () => {
-    goToPrevMonth();
-    const prevMonth = month === 0 ? 11 : month - 1;
-    const prevYear = month === 0 ? year - 1 : year;
-    onMonthChange?.(prevYear, prevMonth);
+    if (pickerMode === "days") {
+      goToPrevMonth();
+      const prevMonth = month === 0 ? 11 : month - 1;
+      const prevYear = month === 0 ? year - 1 : year;
+      onMonthChange?.(prevYear, prevMonth);
+    } else if (pickerMode === "months") {
+      setYear(year - 1);
+      onMonthChange?.(year - 1, month);
+    } else {
+      setYearRangeStart((s) => s - 12);
+    }
   };
   const handleNext = () => {
-    goToNextMonth();
-    const nextMonth = month === 11 ? 0 : month + 1;
-    const nextYear = month === 11 ? year + 1 : year;
-    onMonthChange?.(nextYear, nextMonth);
+    if (pickerMode === "days") {
+      goToNextMonth();
+      const nextMonth = month === 11 ? 0 : month + 1;
+      const nextYear = month === 11 ? year + 1 : year;
+      onMonthChange?.(nextYear, nextMonth);
+    } else if (pickerMode === "months") {
+      setYear(year + 1);
+      onMonthChange?.(year + 1, month);
+    } else {
+      setYearRangeStart((s) => s + 12);
+    }
   };
   const handleToday = () => {
     goToToday();
+    setPickerMode("days");
     const today = /* @__PURE__ */ new Date();
     onMonthChange?.(today.getFullYear(), today.getMonth());
   };
+  const handleTitleClick = () => {
+    if (pickerMode === "days") setPickerMode("months");
+    else if (pickerMode === "months") {
+      setYearRangeStart(Math.floor(year / 12) * 12);
+      setPickerMode("years");
+    }
+  };
+  const handleMonthSelect = (m) => {
+    setMonth(m);
+    setPickerMode("days");
+    onMonthChange?.(year, m);
+  };
+  const handleYearSelect = (y) => {
+    setYear(y);
+    setPickerMode("months");
+    onMonthChange?.(y, month);
+  };
   const isDisabled = (date) => {
     if (minDate && date < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
     if (maxDate && date > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
@@ -1616,6 +1652,8 @@ var Calendar = (props) => {
   };
   const getEventsForDay = (date) => events.filter((e) => isSameDay(e.date, date));
   const weekdays = WEEKDAY_LABELS[locale];
+  const monthLabels = MONTH_LABELS[locale];
+  const titleText = pickerMode === "days" ? locale === "ko" ? `${year}\uB144 ${monthLabels[month]}` : `${monthLabels[month]} ${year}` : pickerMode === "months" ? `${year}` : `${yearRangeStart} - ${yearRangeStart + 11}`;
   return /* @__PURE__ */ jsxs193(
     "div",
     {
@@ -1623,29 +1661,71 @@ var Calendar = (props) => {
       style: selectedColor ? { "--calendar-selected-color": `var(--${selectedColor})` } : void 0,
       children: [
         /* @__PURE__ */ jsxs193("div", { className: "calendar-header", children: [
-          /* @__PURE__ */ jsx301("button", { className: "calendar-nav", onClick: handlePrev, "aria-label": "\uC774\uC804 \uB2EC", children: /* @__PURE__ */ jsx301(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ jsx301("span", { className: "calendar-title", children: locale === "ko" ? `${year}\uB144 ${MONTH_LABELS.ko[month]}` : `${MONTH_LABELS.en[month]} ${year}` }),
-          /* @__PURE__ */ jsx301("button", { className: "calendar-nav", onClick: handleNext, "aria-label": "\uB2E4\uC74C \uB2EC", children: /* @__PURE__ */ jsx301(ChevronRightIcon_default, {}) }),
+          /* @__PURE__ */ jsx301("button", { className: "calendar-nav", onClick: handlePrev, "aria-label": "\uC774\uC804", children: /* @__PURE__ */ jsx301(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ jsx301("button", { className: "calendar-title", onClick: handleTitleClick, type: "button", children: titleText }),
+          /* @__PURE__ */ jsx301("button", { className: "calendar-nav", onClick: handleNext, "aria-label": "\uB2E4\uC74C", children: /* @__PURE__ */ jsx301(ChevronRightIcon_default, {}) }),
           showToday && /* @__PURE__ */ jsx301("button", { className: "calendar-today-btn", onClick: handleToday, children: locale === "ko" ? "\uC624\uB298" : "Today" })
         ] }),
-        /* @__PURE__ */ jsx301("div", { className: "calendar-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx301(
-          "div",
+        pickerMode === "years" && /* @__PURE__ */ jsx301("div", { className: "calendar-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+          const y = yearRangeStart + i;
+          return /* @__PURE__ */ jsx301(
+            "button",
+            {
+              type: "button",
+              className: clsx_default("calendar-picker-cell", y === year && "active"),
+              onClick: () => handleYearSelect(y),
+              children: y
+            },
+            y
+          );
+        }) }),
+        pickerMode === "months" && /* @__PURE__ */ jsx301("div", { className: "calendar-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ jsx301(
+          "button",
           {
-            className: clsx_default(
-              "calendar-weekday",
-              i === 0 && "sunday",
-              i === 6 && "saturday"
-            ),
+            type: "button",
+            className: clsx_default("calendar-picker-cell", i === month && "active"),
+            onClick: () => handleMonthSelect(i),
             children: label
           },
-          label
+          i
         )) }),
-        /* @__PURE__ */ jsx301("div", { className: "calendar-grid", children: days.map((day, idx) => {
-          const dayEvents = getEventsForDay(day.date);
-          const disabled = isDisabled(day.date);
-          const isSelected = selectedDate ? isSameDay(day.date, selectedDate) : false;
-          if (renderDay) {
-            return /* @__PURE__ */ jsx301(
+        pickerMode === "days" && /* @__PURE__ */ jsxs193(Fragment, { children: [
+          /* @__PURE__ */ jsx301("div", { className: "calendar-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx301(
+            "div",
+            {
+              className: clsx_default(
+                "calendar-weekday",
+                i === 0 && "sunday",
+                i === 6 && "saturday"
+              ),
+              children: label
+            },
+            label
+          )) }),
+          /* @__PURE__ */ jsx301("div", { className: "calendar-grid", children: days.map((day, idx) => {
+            const dayEvents = getEventsForDay(day.date);
+            const disabled = isDisabled(day.date);
+            const isSelected = selectedDate ? isSameDay(day.date, selectedDate) : false;
+            if (renderDay) {
+              return /* @__PURE__ */ jsx301(
+                "div",
+                {
+                  className: clsx_default(
+                    "calendar-day",
+                    !day.isCurrentMonth && "outside",
+                    disabled && "disabled",
+                    isSelected && "selected",
+                    day.isToday && "today"
+                  ),
+                  onClick: () => {
+                    if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
+                  },
+                  children: renderDay(day, dayEvents)
+                },
+                idx
+              );
+            }
+            return /* @__PURE__ */ jsxs193(
               "div",
               {
                 className: clsx_default(
@@ -1653,57 +1733,40 @@ var Calendar = (props) => {
                   !day.isCurrentMonth && "outside",
                   disabled && "disabled",
                   isSelected && "selected",
-                  day.isToday && "today"
+                  day.isToday && "today",
+                  day.isSunday && "sunday",
+                  day.isSaturday && "saturday"
                 ),
                 onClick: () => {
                   if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
                 },
-                children: renderDay(day, dayEvents)
+                children: [
+                  /* @__PURE__ */ jsx301("span", { className: "calendar-day-number", children: day.day }),
+                  dayEvents.length > 0 && /* @__PURE__ */ jsxs193("div", { className: "calendar-day-events", children: [
+                    dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ jsx301(
+                      "span",
+                      {
+                        className: "calendar-event-dot",
+                        style: { backgroundColor: event.color ?? "var(--xplat-blue-500)" },
+                        title: event.label,
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onEventClick?.(event);
+                        }
+                      },
+                      ei
+                    )),
+                    dayEvents.length > 3 && /* @__PURE__ */ jsxs193("span", { className: "calendar-event-more", children: [
+                      "+",
+                      dayEvents.length - 3
+                    ] })
+                  ] })
+                ]
               },
               idx
             );
-          }
-          return /* @__PURE__ */ jsxs193(
-            "div",
-            {
-              className: clsx_default(
-                "calendar-day",
-                !day.isCurrentMonth && "outside",
-                disabled && "disabled",
-                isSelected && "selected",
-                day.isToday && "today",
-                day.isSunday && "sunday",
-                day.isSaturday && "saturday"
-              ),
-              onClick: () => {
-                if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
-              },
-              children: [
-                /* @__PURE__ */ jsx301("span", { className: "calendar-day-number", children: day.day }),
-                dayEvents.length > 0 && /* @__PURE__ */ jsxs193("div", { className: "calendar-day-events", children: [
-                  dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ jsx301(
-                    "span",
-                    {
-                      className: "calendar-event-dot",
-                      style: { backgroundColor: event.color ?? "var(--xplat-blue-500)" },
-                      title: event.label,
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onEventClick?.(event);
-                      }
-                    },
-                    ei
-                  )),
-                  dayEvents.length > 3 && /* @__PURE__ */ jsxs193("span", { className: "calendar-event-more", children: [
-                    "+",
-                    dayEvents.length - 3
-                  ] })
-                ] })
-              ]
-            },
-            idx
-          );
-        }) })
+          }) })
+        ] })
       ]
     }
   );
@@ -16584,7 +16647,7 @@ var useClickOutside_default = useClickOutside;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 import React9 from "react";
-import { jsx as jsx312, jsxs as jsxs199 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx312, jsxs as jsxs199 } from "react/jsx-runtime";
 var DayCell = React9.memo(
   ({
     day,
@@ -16628,10 +16691,14 @@ var SingleDatePicker = (props) => {
   } = props;
   const initialYear = value?.getFullYear();
   const initialMonth = value?.getMonth();
-  const { year, month, days, goToPrevMonth, goToNextMonth } = useCalendar(
+  const { year, month, days, goToPrevMonth, goToNextMonth, setYear, setMonth } = useCalendar(
     initialYear,
     initialMonth
   );
+  const [pickerMode, setPickerMode] = React9.useState("days");
+  const [yearRangeStart, setYearRangeStart] = React9.useState(
+    Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
+  );
   const minTime = React9.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
@@ -16653,7 +16720,34 @@ var SingleDatePicker = (props) => {
     },
     [onChange]
   );
+  const handlePrev = () => {
+    if (pickerMode === "days") goToPrevMonth();
+    else if (pickerMode === "months") setYear(year - 1);
+    else setYearRangeStart((s) => s - 12);
+  };
+  const handleNext = () => {
+    if (pickerMode === "days") goToNextMonth();
+    else if (pickerMode === "months") setYear(year + 1);
+    else setYearRangeStart((s) => s + 12);
+  };
+  const handleTitleClick = () => {
+    if (pickerMode === "days") setPickerMode("months");
+    else if (pickerMode === "months") {
+      setYearRangeStart(Math.floor(year / 12) * 12);
+      setPickerMode("years");
+    }
+  };
+  const handleMonthSelect = (m) => {
+    setMonth(m);
+    setPickerMode("days");
+  };
+  const handleYearSelect = (y) => {
+    setYear(y);
+    setPickerMode("months");
+  };
   const weekdays = WEEKDAY_LABELS[locale];
+  const monthLabels = MONTH_LABELS[locale];
+  const titleText = pickerMode === "days" ? locale === "ko" ? `${year}\uB144 ${monthLabels[month]}` : `${monthLabels[month]} ${year}` : pickerMode === "months" ? `${year}` : `${yearRangeStart} - ${yearRangeStart + 11}`;
   return /* @__PURE__ */ jsxs199(
     "div",
     {
@@ -16661,41 +16755,66 @@ var SingleDatePicker = (props) => {
       style: { "--datepicker-active-color": `var(--${color2})` },
       children: [
         /* @__PURE__ */ jsxs199("div", { className: "datepicker-header", children: [
-          /* @__PURE__ */ jsx312("button", { className: "datepicker-nav", onClick: goToPrevMonth, type: "button", children: /* @__PURE__ */ jsx312(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ jsx312("span", { className: "datepicker-title", children: locale === "ko" ? `${year}\uB144 ${MONTH_LABELS.ko[month]}` : `${MONTH_LABELS.en[month]} ${year}` }),
-          /* @__PURE__ */ jsx312("button", { className: "datepicker-nav", onClick: goToNextMonth, type: "button", children: /* @__PURE__ */ jsx312(ChevronRightIcon_default, {}) })
+          /* @__PURE__ */ jsx312("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ jsx312(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ jsx312("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
+          /* @__PURE__ */ jsx312("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ jsx312(ChevronRightIcon_default, {}) })
         ] }),
-        /* @__PURE__ */ jsx312("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx312(
-          "div",
+        pickerMode === "years" && /* @__PURE__ */ jsx312("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+          const y = yearRangeStart + i;
+          return /* @__PURE__ */ jsx312(
+            "button",
+            {
+              type: "button",
+              className: clsx_default("datepicker-picker-cell", y === year && "active"),
+              onClick: () => handleYearSelect(y),
+              children: y
+            },
+            y
+          );
+        }) }),
+        pickerMode === "months" && /* @__PURE__ */ jsx312("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ jsx312(
+          "button",
           {
-            className: clsx_default(
-              "datepicker-weekday",
-              i === 0 && "sunday",
-              i === 6 && "saturday"
-            ),
+            type: "button",
+            className: clsx_default("datepicker-picker-cell", i === month && "active"),
+            onClick: () => handleMonthSelect(i),
             children: label
           },
-          label
+          i
         )) }),
-        /* @__PURE__ */ jsx312("div", { className: "datepicker-grid", children: days.map((day, idx) => {
-          const t = day.date.getTime();
-          const disabled = t < minTime || t > maxTime;
-          const selected = value ? isSameDay(day.date, value) : false;
-          const highlighted = highlightSet.has(
-            `${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
-          );
-          return /* @__PURE__ */ jsx312(
-            DayCell,
+        pickerMode === "days" && /* @__PURE__ */ jsxs199(Fragment2, { children: [
+          /* @__PURE__ */ jsx312("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx312(
+            "div",
             {
-              day,
-              disabled,
-              selected,
-              highlighted,
-              onSelect: handleSelect
+              className: clsx_default(
+                "datepicker-weekday",
+                i === 0 && "sunday",
+                i === 6 && "saturday"
+              ),
+              children: label
             },
-            idx
-          );
-        }) })
+            label
+          )) }),
+          /* @__PURE__ */ jsx312("div", { className: "datepicker-grid", children: days.map((day, idx) => {
+            const t = day.date.getTime();
+            const disabled = t < minTime || t > maxTime;
+            const selected = value ? isSameDay(day.date, value) : false;
+            const highlighted = highlightSet.has(
+              `${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
+            );
+            return /* @__PURE__ */ jsx312(
+              DayCell,
+              {
+                day,
+                disabled,
+                selected,
+                highlighted,
+                onSelect: handleSelect
+              },
+              idx
+            );
+          }) })
+        ] })
       ]
     }
   );
@@ -16810,9 +16929,24 @@ var RangePicker = (props) => {
   } = props;
   const startCal = useCalendar(startDate.getFullYear(), startDate.getMonth());
   const endCal = useCalendar(endDate.getFullYear(), endDate.getMonth());
-  const isDisabled = (date) => {
-    if (minDate && date < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
-    if (maxDate && date > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
+  const isDisabled = (date, type) => {
+    const d = date.getTime();
+    if (minDate) {
+      const min = new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime();
+      if (d < min) return true;
+    }
+    if (maxDate) {
+      const max = new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime();
+      if (d > max) return true;
+    }
+    if (type === "end") {
+      const start = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()).getTime();
+      if (d < start) return true;
+    }
+    if (type === "start") {
+      const end = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate()).getTime();
+      if (d > end) return true;
+    }
     return false;
   };
   const weekdays = WEEKDAY_LABELS[locale];
@@ -16821,9 +16955,25 @@ var RangePicker = (props) => {
     return /* @__PURE__ */ jsxs201("div", { className: "datepicker-range-panel", children: [
       /* @__PURE__ */ jsx315("span", { className: "datepicker-range-label", children: label }),
       /* @__PURE__ */ jsxs201("div", { className: "datepicker-header", children: [
-        /* @__PURE__ */ jsx315("button", { className: "datepicker-nav", onClick: cal.goToPrevMonth, type: "button", children: /* @__PURE__ */ jsx315(ChevronLeftIcon_default, {}) }),
+        /* @__PURE__ */ jsx315(
+          "button",
+          {
+            className: "datepicker-nav",
+            onClick: cal.goToPrevMonth,
+            type: "button",
+            children: /* @__PURE__ */ jsx315(ChevronLeftIcon_default, {})
+          }
+        ),
         /* @__PURE__ */ jsx315("span", { className: "datepicker-title", children: locale === "ko" ? `${cal.year}\uB144 ${MONTH_LABELS.ko[cal.month]}` : `${MONTH_LABELS.en[cal.month]} ${cal.year}` }),
-        /* @__PURE__ */ jsx315("button", { className: "datepicker-nav", onClick: cal.goToNextMonth, type: "button", children: /* @__PURE__ */ jsx315(ChevronRightIcon_default, {}) })
+        /* @__PURE__ */ jsx315(
+          "button",
+          {
+            className: "datepicker-nav",
+            onClick: cal.goToNextMonth,
+            type: "button",
+            children: /* @__PURE__ */ jsx315(ChevronRightIcon_default, {})
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx315("div", { className: "datepicker-weekdays", children: weekdays.map((w, i) => /* @__PURE__ */ jsx315(
         "div",
@@ -16838,7 +16988,7 @@ var RangePicker = (props) => {
         w
       )) }),
       /* @__PURE__ */ jsx315("div", { className: "datepicker-grid", children: cal.days.map((day, idx) => {
-        const disabled = isDisabled(day.date);
+        const disabled = isDisabled(day.date, type);
         const isStart = isSameDay(day.date, startDate);
         const isEnd = isSameDay(day.date, endDate);
         const inRange2 = isInRange(day.date, startDate, endDate);
@@ -16879,7 +17029,9 @@ var RangePicker = (props) => {
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "range"),
-      style: { "--datepicker-active-color": `var(--${color2})` },
+      style: {
+        "--datepicker-active-color": `var(--${color2})`
+      },
       children: [
         renderCalendar(startCal, "start"),
         renderCalendar(endCal, "end")
@@ -16904,7 +17056,7 @@ var PopupPicker = (props) => {
   };
   return /* @__PURE__ */ jsxs202("div", { className: "lib-xplat-popup-datepicker", children: [
     React12.cloneElement(component, { onClick: handleClick }),
-    /* @__PURE__ */ jsx316(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs202("div", { className: "lib-xplat-popup-datepicker-card", children: [
+    /* @__PURE__ */ jsx316(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs202("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ jsxs202("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ jsx316(
           SingleDatePicker_default,
@@ -17832,10 +17984,10 @@ Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-import { Fragment, jsx as jsx330 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx330 } from "react/jsx-runtime";
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ jsx330(Fragment, { children: /* @__PURE__ */ jsx330(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ jsx330(Fragment3, { children: /* @__PURE__ */ jsx330(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;