@x-plat/design-system 0.4.2 → 0.4.4

package/dist/components/Calendar/index.cjs

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

package/dist/components/Calendar/index.css

@@ -1,7 +1,7 @@
 /* src/components/Calendar/calendar.scss */
 .lib-xplat-calendar {
   width: 100%;
-  min-width: 280px;
+  min-width: 200px;
   user-select: none;
   container-type: inline-size;
 }
@@ -17,6 +17,15 @@
   color: var(--xplat-neutral-900);
   min-width: 120px;
   text-align: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  transition: background-color 0.15s;
+}
+.lib-xplat-calendar .calendar-title:hover {
+  background-color: var(--xplat-neutral-100);
 }
 .lib-xplat-calendar .calendar-nav {
   display: flex;
@@ -106,33 +115,17 @@
   color: var(--xplat-neutral-300);
 }
 .lib-xplat-calendar .calendar-day.today .calendar-day-number {
-  position: relative;
   font-weight: 700;
   color: var(--xplat-blue-600);
 }
-.lib-xplat-calendar .calendar-day.today .calendar-day-number::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: -6px;
-  transform: translateY(-50%);
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background-color: var(--xplat-blue-600);
-}
 .lib-xplat-calendar .calendar-day.selected {
-  background-color: var(--calendar-selected-color, var(--xplat-neutral-900));
+  box-shadow: inset 0 0 0 1.5px var(--calendar-selected-color, var(--xplat-neutral-500));
 }
 .lib-xplat-calendar .calendar-day.selected .calendar-day-number {
-  color: var(--xplat-white);
-  font-weight: 600;
+  font-weight: 700;
 }
 .lib-xplat-calendar .calendar-day.selected:hover {
-  background-color: color-mix(in srgb, var(--calendar-selected-color, var(--xplat-neutral-900)), black 12%);
-}
-.lib-xplat-calendar .calendar-day.selected.today .calendar-day-number::before {
-  background-color: var(--xplat-white);
+  background-color: color-mix(in srgb, var(--calendar-selected-color, var(--xplat-neutral-500)) 10%, transparent);
 }
 .lib-xplat-calendar .calendar-day.sunday:not(.outside) .calendar-day-number {
   color: var(--xplat-red-500);
@@ -140,9 +133,6 @@
 .lib-xplat-calendar .calendar-day.saturday:not(.outside) .calendar-day-number {
   color: var(--xplat-blue-500);
 }
-.lib-xplat-calendar .calendar-day.selected .calendar-day-number {
-  color: var(--xplat-white);
-}
 .lib-xplat-calendar .calendar-day-number {
   font-size: clamp(0.75rem, 2.5cqi, 1rem);
   line-height: 1;
@@ -166,3 +156,30 @@
   color: var(--xplat-neutral-400);
   line-height: 1;
 }
+.lib-xplat-calendar .calendar-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+}
+.lib-xplat-calendar .calendar-picker-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: none;
+  font-size: clamp(0.75rem, 2.5cqi, 0.9375rem);
+  color: var(--xplat-neutral-700);
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+.lib-xplat-calendar .calendar-picker-cell:hover {
+  background-color: var(--xplat-neutral-100);
+}
+.lib-xplat-calendar .calendar-picker-cell.active {
+  background-color: var(--xplat-neutral-900);
+  color: var(--xplat-white);
+  font-weight: 600;
+}

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

@@ -29,31 +29,18 @@ interface CalendarEvent {
     data?: unknown;
 }
 interface CalendarProps {
-    /** 초기 연도 */
     year?: number;
-    /** 초기 월 (0-11) */
     month?: number;
-    /** 선택된 날짜 */
     selectedDate?: Date | null;
-    /** 날짜 선택 콜백 */
     onSelect?: (date: Date) => void;
-    /** 월 변경 콜백 */
     onMonthChange?: (year: number, month: number) => void;
-    /** 이벤트 목록 */
     events?: CalendarEvent[];
-    /** 날짜별 커스텀 렌더 */
     renderDay?: (day: CalendarDay, events: CalendarEvent[]) => React.ReactNode;
-    /** 이벤트 클릭 콜백 */
     onEventClick?: (event: CalendarEvent) => void;
-    /** 언어 */
     locale?: "ko" | "en";
-    /** 최소 선택 가능 날짜 */
     minDate?: Date;
-    /** 최대 선택 가능 날짜 */
     maxDate?: Date;
-    /** 선택 날짜 색상 (CSS 변수명, 예: "xplat-blue-500") */
     selectedColor?: string;
-    /** 오늘 버튼 표시 */
     showToday?: boolean;
     className?: string;
 }

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

@@ -29,31 +29,18 @@ interface CalendarEvent {
     data?: unknown;
 }
 interface CalendarProps {
-    /** 초기 연도 */
     year?: number;
-    /** 초기 월 (0-11) */
     month?: number;
-    /** 선택된 날짜 */
     selectedDate?: Date | null;
-    /** 날짜 선택 콜백 */
     onSelect?: (date: Date) => void;
-    /** 월 변경 콜백 */
     onMonthChange?: (year: number, month: number) => void;
-    /** 이벤트 목록 */
     events?: CalendarEvent[];
-    /** 날짜별 커스텀 렌더 */
     renderDay?: (day: CalendarDay, events: CalendarEvent[]) => React.ReactNode;
-    /** 이벤트 클릭 콜백 */
     onEventClick?: (event: CalendarEvent) => void;
-    /** 언어 */
     locale?: "ko" | "en";
-    /** 최소 선택 가능 날짜 */
     minDate?: Date;
-    /** 최대 선택 가능 날짜 */
     maxDate?: Date;
-    /** 선택 날짜 색상 (CSS 변수명, 예: "xplat-blue-500") */
     selectedColor?: string;
-    /** 오늘 버튼 표시 */
     showToday?: boolean;
     className?: string;
 }