@x-plat/design-system 0.4.2 → 0.4.4

package/dist/components/Calendar/index.js

@@ -1024,7 +1024,7 @@ var MONTH_LABELS = {
 };
 
 // src/components/Calendar/Calendar.tsx
-import { jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
 var Calendar = (props) => {
   const {
     year: yearProp,
@@ -1052,6 +1052,10 @@ var Calendar = (props) => {
     setYear,
     setMonth
   } = useCalendar(yearProp, monthProp);
+  const [pickerMode, setPickerMode] = React2.useState("days");
+  const [yearRangeStart, setYearRangeStart] = React2.useState(
+    Math.floor(year / 12) * 12
+  );
   React2.useEffect(() => {
     if (yearProp !== void 0) setYear(yearProp);
   }, [yearProp, setYear]);
@@ -1059,22 +1063,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;
@@ -1082,6 +1118,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__ */ jsxs189(
     "div",
     {
@@ -1089,29 +1127,71 @@ var Calendar = (props) => {
       style: selectedColor ? { "--calendar-selected-color": `var(--${selectedColor})` } : void 0,
       children: [
         /* @__PURE__ */ jsxs189("div", { className: "calendar-header", children: [
-          /* @__PURE__ */ jsx295("button", { className: "calendar-nav", onClick: handlePrev, "aria-label": "\uC774\uC804 \uB2EC", children: /* @__PURE__ */ jsx295(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ jsx295("span", { className: "calendar-title", children: locale === "ko" ? `${year}\uB144 ${MONTH_LABELS.ko[month]}` : `${MONTH_LABELS.en[month]} ${year}` }),
-          /* @__PURE__ */ jsx295("button", { className: "calendar-nav", onClick: handleNext, "aria-label": "\uB2E4\uC74C \uB2EC", children: /* @__PURE__ */ jsx295(ChevronRightIcon_default, {}) }),
+          /* @__PURE__ */ jsx295("button", { className: "calendar-nav", onClick: handlePrev, "aria-label": "\uC774\uC804", children: /* @__PURE__ */ jsx295(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ jsx295("button", { className: "calendar-title", onClick: handleTitleClick, type: "button", children: titleText }),
+          /* @__PURE__ */ jsx295("button", { className: "calendar-nav", onClick: handleNext, "aria-label": "\uB2E4\uC74C", children: /* @__PURE__ */ jsx295(ChevronRightIcon_default, {}) }),
           showToday && /* @__PURE__ */ jsx295("button", { className: "calendar-today-btn", onClick: handleToday, children: locale === "ko" ? "\uC624\uB298" : "Today" })
         ] }),
-        /* @__PURE__ */ jsx295("div", { className: "calendar-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx295(
-          "div",
+        pickerMode === "years" && /* @__PURE__ */ jsx295("div", { className: "calendar-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+          const y = yearRangeStart + i;
+          return /* @__PURE__ */ jsx295(
+            "button",
+            {
+              type: "button",
+              className: clsx_default("calendar-picker-cell", y === year && "active"),
+              onClick: () => handleYearSelect(y),
+              children: y
+            },
+            y
+          );
+        }) }),
+        pickerMode === "months" && /* @__PURE__ */ jsx295("div", { className: "calendar-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ jsx295(
+          "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__ */ jsx295("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__ */ jsx295(
+        pickerMode === "days" && /* @__PURE__ */ jsxs189(Fragment, { children: [
+          /* @__PURE__ */ jsx295("div", { className: "calendar-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ jsx295(
+            "div",
+            {
+              className: clsx_default(
+                "calendar-weekday",
+                i === 0 && "sunday",
+                i === 6 && "saturday"
+              ),
+              children: label
+            },
+            label
+          )) }),
+          /* @__PURE__ */ jsx295("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__ */ jsx295(
+                "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__ */ jsxs189(
               "div",
               {
                 className: clsx_default(
@@ -1119,57 +1199,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__ */ jsx295("span", { className: "calendar-day-number", children: day.day }),
+                  dayEvents.length > 0 && /* @__PURE__ */ jsxs189("div", { className: "calendar-day-events", children: [
+                    dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ jsx295(
+                      "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__ */ jsxs189("span", { className: "calendar-event-more", children: [
+                      "+",
+                      dayEvents.length - 3
+                    ] })
+                  ] })
+                ]
               },
               idx
             );
-          }
-          return /* @__PURE__ */ jsxs189(
-            "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__ */ jsx295("span", { className: "calendar-day-number", children: day.day }),
-                dayEvents.length > 0 && /* @__PURE__ */ jsxs189("div", { className: "calendar-day-events", children: [
-                  dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ jsx295(
-                    "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__ */ jsxs189("span", { className: "calendar-event-more", children: [
-                    "+",
-                    dayEvents.length - 3
-                  ] })
-                ] })
-              ]
-            },
-            idx
-          );
-        }) })
+          }) })
+        ] })
       ]
     }
   );

package/dist/components/DatePicker/index.cjs

@@ -1493,10 +1493,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] = import_react6.default.useState("days");
+  const [yearRangeStart, setYearRangeStart] = import_react6.default.useState(
+    Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
+  );
   const minTime = import_react6.default.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
@@ -1518,7 +1522,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__ */ (0, import_jsx_runtime298.jsxs)(
     "div",
     {
@@ -1526,41 +1557,66 @@ var SingleDatePicker = (props) => {
       style: { "--datepicker-active-color": `var(--${color})` },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)("div", { className: "datepicker-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("button", { className: "datepicker-nav", onClick: goToPrevMonth, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(ChevronLeftIcon_default, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("span", { className: "datepicker-title", children: locale === "ko" ? `${year}\uB144 ${MONTH_LABELS.ko[month]}` : `${MONTH_LABELS.en[month]} ${year}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("button", { className: "datepicker-nav", onClick: goToNextMonth, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(ChevronRightIcon_default, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("button", { className: "datepicker-title", onClick: handleTitleClick, type: "button", children: titleText }),
+          /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("button", { className: "datepicker-nav", onClick: handleNext, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(ChevronRightIcon_default, {}) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
-          "div",
+        pickerMode === "years" && /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("div", { className: "datepicker-picker-grid", children: Array.from({ length: 12 }, (_, i) => {
+          const y = yearRangeStart + i;
+          return /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
+            "button",
+            {
+              type: "button",
+              className: clsx_default("datepicker-picker-cell", y === year && "active"),
+              onClick: () => handleYearSelect(y),
+              children: y
+            },
+            y
+          );
+        }) }),
+        pickerMode === "months" && /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("div", { className: "datepicker-picker-grid", children: monthLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
+          "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__ */ (0, import_jsx_runtime298.jsx)("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__ */ (0, import_jsx_runtime298.jsx)(
-            DayCell,
+        pickerMode === "days" && /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)(import_jsx_runtime298.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
+            "div",
             {
-              day,
-              disabled,
-              selected,
-              highlighted,
-              onSelect: handleSelect
+              className: clsx_default(
+                "datepicker-weekday",
+                i === 0 && "sunday",
+                i === 6 && "saturday"
+              ),
+              children: label
             },
-            idx
-          );
-        }) })
+            label
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("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__ */ (0, import_jsx_runtime298.jsx)(
+              DayCell,
+              {
+                day,
+                disabled,
+                selected,
+                highlighted,
+                onSelect: handleSelect
+              },
+              idx
+            );
+          }) })
+        ] })
       ]
     }
   );
@@ -1701,9 +1757,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];
@@ -1712,9 +1783,25 @@ var RangePicker = (props) => {
     return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "datepicker-range-panel", children: [
       /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("span", { className: "datepicker-range-label", children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "datepicker-header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("button", { className: "datepicker-nav", onClick: cal.goToPrevMonth, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(ChevronLeftIcon_default, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+          "button",
+          {
+            className: "datepicker-nav",
+            onClick: cal.goToPrevMonth,
+            type: "button",
+            children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(ChevronLeftIcon_default, {})
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("span", { className: "datepicker-title", children: locale === "ko" ? `${cal.year}\uB144 ${MONTH_LABELS.ko[cal.month]}` : `${MONTH_LABELS.en[cal.month]} ${cal.year}` }),
-        /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("button", { className: "datepicker-nav", onClick: cal.goToNextMonth, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(ChevronRightIcon_default, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+          "button",
+          {
+            className: "datepicker-nav",
+            onClick: cal.goToNextMonth,
+            type: "button",
+            children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(ChevronRightIcon_default, {})
+          }
+        )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("div", { className: "datepicker-weekdays", children: weekdays.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
         "div",
@@ -1729,7 +1816,7 @@ var RangePicker = (props) => {
         w
       )) }),
       /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("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);
@@ -1770,7 +1857,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")
@@ -1795,7 +1884,7 @@ var PopupPicker = (props) => {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
     import_react9.default.cloneElement(component, { onClick: handleClick }),
-    /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "lib-xplat-popup-datepicker-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
           SingleDatePicker_default,

package/dist/components/DatePicker/index.css

@@ -88,7 +88,8 @@
 .lib-xplat-datepicker {
   user-select: none;
   container-type: inline-size;
-  width: 280px;
+  min-width: 200px;
+  width: 100%;
 }
 .lib-xplat-datepicker .datepicker-header {
   display: flex;
@@ -98,12 +99,48 @@
   margin-bottom: 0.75rem;
 }
 .lib-xplat-datepicker .datepicker-title {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  transition: background-color 0.15s;
   font-size: clamp(0.8125rem, 3cqi, 1.125rem);
   font-weight: 600;
   color: var(--xplat-neutral-900);
   min-width: 110px;
   text-align: center;
 }
+.lib-xplat-datepicker .datepicker-title:hover {
+  background-color: var(--xplat-neutral-100);
+}
+.lib-xplat-datepicker .datepicker-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.25rem;
+  padding: 0.25rem 0;
+}
+.lib-xplat-datepicker .datepicker-picker-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: none;
+  font-size: clamp(0.6875rem, 2cqi, 0.8125rem);
+  color: var(--xplat-neutral-700);
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+.lib-xplat-datepicker .datepicker-picker-cell:hover {
+  background-color: var(--xplat-neutral-100);
+}
+.lib-xplat-datepicker .datepicker-picker-cell.active {
+  background-color: var(--datepicker-active-color, var(--xplat-blue-500));
+  color: var(--xplat-white);
+  font-weight: 600;
+}
 .lib-xplat-datepicker .datepicker-nav {
   display: flex;
   align-items: center;
@@ -197,20 +234,27 @@
   background-color: color-mix(in srgb, var(--datepicker-active-color, var(--xplat-blue-500)) 12%, transparent);
   border-radius: 0;
 }
-.lib-xplat-datepicker .datepicker-day.sunday:not(.selected):not(.outside) {
+.lib-xplat-datepicker .datepicker-day.sunday:not(.selected):not(.outside):not(.disabled) {
   color: var(--xplat-red-500);
 }
-.lib-xplat-datepicker .datepicker-day.saturday:not(.selected):not(.outside) {
+.lib-xplat-datepicker .datepicker-day.saturday:not(.selected):not(.outside):not(.disabled) {
   color: var(--xplat-blue-500);
 }
+.lib-xplat-datepicker .datepicker-day.outside.sunday,
+.lib-xplat-datepicker .datepicker-day.disabled.sunday {
+  color: color-mix(in srgb, var(--xplat-red-500) 35%, transparent);
+}
+.lib-xplat-datepicker .datepicker-day.outside.saturday,
+.lib-xplat-datepicker .datepicker-day.disabled.saturday {
+  color: color-mix(in srgb, var(--xplat-blue-500) 35%, transparent);
+}
 .lib-xplat-datepicker.range {
   display: flex;
   gap: 1.5rem;
-  width: auto;
 }
 .lib-xplat-datepicker .datepicker-range-panel {
-  width: 280px;
-  flex-shrink: 0;
+  flex: 1;
+  min-width: 200px;
 }
 .lib-xplat-datepicker .datepicker-range-label {
   display: block;
@@ -222,7 +266,6 @@
 }
 .lib-xplat-datepicker.input-datepicker {
   position: relative;
-  width: auto;
 }
 .lib-xplat-datepicker.input-datepicker .input-datepicker-dropdown {
   position: absolute;
@@ -304,7 +347,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;