@x-plat/design-system 0.4.2 → 0.4.4

package/dist/components/DatePicker/index.js

@@ -1410,7 +1410,7 @@ var MONTH_LABELS = {
 };
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-import { jsx as jsx298, jsxs as jsxs191 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx298, jsxs as jsxs191 } from "react/jsx-runtime";
 var DayCell = React5.memo(
   ({
     day,
@@ -1454,10 +1454,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] = React5.useState("days");
+  const [yearRangeStart, setYearRangeStart] = React5.useState(
+    Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
+  );
   const minTime = React5.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
@@ -1479,7 +1483,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__ */ jsxs191(
     "div",
     {
@@ -1487,41 +1518,66 @@ var SingleDatePicker = (props) => {
       style: { "--datepicker-active-color": `var(--${color})` },
       children: [
         /* @__PURE__ */ jsxs191("div", { className: "datepicker-header", children: [
-          /* @__PURE__ */ jsx298("button", { className: "datepicker-nav", onClick: goToPrevMonth, type: "button", children: /* @__PURE__ */ jsx298(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ jsx298("span", { className: "datepicker-title", children: locale === "ko" ? `${year}\uB144 ${MONTH_LABELS.ko[month]}` : `${MONTH_LABELS.en[month]} ${year}` }),
-          /* @__PURE__ */ jsx298("button", { className: "datepicker-nav", onClick: goToNextMonth, type: "button", children: /* @__PURE__ */ jsx298(ChevronRightIcon_default, {}) })
+          /* @__PURE__ */ jsx298("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ jsx298(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ jsx298("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
+          /* @__PURE__ */ jsx298("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ jsx298(ChevronRightIcon_default, {}) })
         ] }),
-        /* @__PURE__ */ jsx298("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx298(
-          "div",
+        pickerMode === "years" && /* @__PURE__ */ jsx298("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+          const y = yearRangeStart + i;
+          return /* @__PURE__ */ jsx298(
+            "button",
+            {
+              type: "button",
+              className: clsx_default("datepicker-picker-cell", y === year && "active"),
+              onClick: () => handleYearSelect(y),
+              children: y
+            },
+            y
+          );
+        }) }),
+        pickerMode === "months" && /* @__PURE__ */ jsx298("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ jsx298(
+          "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__ */ jsx298("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__ */ jsx298(
-            DayCell,
+        pickerMode === "days" && /* @__PURE__ */ jsxs191(Fragment, { children: [
+          /* @__PURE__ */ jsx298("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx298(
+            "div",
             {
-              day,
-              disabled,
-              selected,
-              highlighted,
-              onSelect: handleSelect
+              className: clsx_default(
+                "datepicker-weekday",
+                i === 0 && "sunday",
+                i === 6 && "saturday"
+              ),
+              children: label
             },
-            idx
-          );
-        }) })
+            label
+          )) }),
+          /* @__PURE__ */ jsx298("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__ */ jsx298(
+              DayCell,
+              {
+                day,
+                disabled,
+                selected,
+                highlighted,
+                onSelect: handleSelect
+              },
+              idx
+            );
+          }) })
+        ] })
       ]
     }
   );
@@ -1662,9 +1718,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];
@@ -1673,9 +1744,25 @@ var RangePicker = (props) => {
     return /* @__PURE__ */ jsxs193("div", { className: "datepicker-range-panel", children: [
       /* @__PURE__ */ jsx302("span", { className: "datepicker-range-label", children: label }),
       /* @__PURE__ */ jsxs193("div", { className: "datepicker-header", children: [
-        /* @__PURE__ */ jsx302("button", { className: "datepicker-nav", onClick: cal.goToPrevMonth, type: "button", children: /* @__PURE__ */ jsx302(ChevronLeftIcon_default, {}) }),
+        /* @__PURE__ */ jsx302(
+          "button",
+          {
+            className: "datepicker-nav",
+            onClick: cal.goToPrevMonth,
+            type: "button",
+            children: /* @__PURE__ */ jsx302(ChevronLeftIcon_default, {})
+          }
+        ),
         /* @__PURE__ */ jsx302("span", { className: "datepicker-title", children: locale === "ko" ? `${cal.year}\uB144 ${MONTH_LABELS.ko[cal.month]}` : `${MONTH_LABELS.en[cal.month]} ${cal.year}` }),
-        /* @__PURE__ */ jsx302("button", { className: "datepicker-nav", onClick: cal.goToNextMonth, type: "button", children: /* @__PURE__ */ jsx302(ChevronRightIcon_default, {}) })
+        /* @__PURE__ */ jsx302(
+          "button",
+          {
+            className: "datepicker-nav",
+            onClick: cal.goToNextMonth,
+            type: "button",
+            children: /* @__PURE__ */ jsx302(ChevronRightIcon_default, {})
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx302("div", { className: "datepicker-weekdays", children: weekdays.map((w, i) => /* @__PURE__ */ jsx302(
         "div",
@@ -1690,7 +1777,7 @@ var RangePicker = (props) => {
         w
       )) }),
       /* @__PURE__ */ jsx302("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 inRange = isInRange(day.date, startDate, endDate);
@@ -1731,7 +1818,9 @@ var RangePicker = (props) => {
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "range"),
-      style: { "--datepicker-active-color": `var(--${color})` },
+      style: {
+        "--datepicker-active-color": `var(--${color})`
+      },
       children: [
         renderCalendar(startCal, "start"),
         renderCalendar(endCal, "end")
@@ -1756,7 +1845,7 @@ var PopupPicker = (props) => {
   };
   return /* @__PURE__ */ jsxs194("div", { className: "lib-xplat-popup-datepicker", children: [
     React8.cloneElement(component, { onClick: handleClick }),
-    /* @__PURE__ */ jsx303(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs194("div", { className: "lib-xplat-popup-datepicker-card", children: [
+    /* @__PURE__ */ jsx303(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs194("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ jsxs194("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ jsx303(
           SingleDatePicker_default,

package/dist/components/ImageSelector/index.css

@@ -9,6 +9,7 @@
   background-color: var(--xplat-white);
   border-radius: 0.25rem;
   overflow: hidden;
+  padding: 0.75rem;
 }
 .lib-xplat-imageselector > input {
   display: none;

package/dist/components/Modal/index.css

@@ -8,7 +8,7 @@
   padding: 24px;
   max-width: calc(100vw - 2rem);
   max-height: calc(100vh - 2rem);
-  overflow: auto;
+  overflow: visible;
   transform: scale(0.9);
   opacity: 0;
   transition: transform 0.2s ease, opacity 0.2s ease;

package/dist/components/PopOver/index.css

@@ -2,6 +2,7 @@
 .lib-xplat-pop-over {
   position: relative;
   z-index: 10;
+  width: fit-content;
   cursor: pointer;
   user-select: none;
 }