@x-plat/design-system 0.3.9 → 0.4.1

package/dist/components/index.cjs

@@ -1658,6 +1658,7 @@ var Calendar = (props) => {
     locale = "ko",
     minDate,
     maxDate,
+    selectedColor,
     showToday = true,
     className
   } = props;
@@ -1701,90 +1702,97 @@ var Calendar = (props) => {
   };
   const getEventsForDay = (date) => events.filter((e) => isSameDay(e.date, date));
   const weekdays = WEEKDAY_LABELS[locale];
-  return /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: clsx_default("lib-xplat-calendar", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "calendar-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("button", { className: "calendar-nav", onClick: handlePrev, "aria-label": "\uC774\uC804 \uB2EC", children: /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(ChevronLeftIcon_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("span", { className: "calendar-title", children: locale === "ko" ? `${year}\uB144 ${MONTH_LABELS.ko[month]}` : `${MONTH_LABELS.en[month]} ${year}` }),
-      /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("button", { className: "calendar-nav", onClick: handleNext, "aria-label": "\uB2E4\uC74C \uB2EC", children: /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(ChevronRightIcon_default, {}) }),
-      showToday && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("button", { className: "calendar-today-btn", onClick: handleToday, children: locale === "ko" ? "\uC624\uB298" : "Today" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("div", { className: "calendar-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
-      "div",
-      {
-        className: clsx_default(
-          "calendar-weekday",
-          i === 0 && "sunday",
-          i === 6 && "saturday"
-        ),
-        children: label
-      },
-      label
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime301.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_runtime301.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-calendar", className),
+      style: selectedColor ? { "--calendar-selected-color": `var(--${selectedColor})` } : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "calendar-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("button", { className: "calendar-nav", onClick: handlePrev, "aria-label": "\uC774\uC804 \uB2EC", children: /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(ChevronLeftIcon_default, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("span", { className: "calendar-title", children: locale === "ko" ? `${year}\uB144 ${MONTH_LABELS.ko[month]}` : `${MONTH_LABELS.en[month]} ${year}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("button", { className: "calendar-nav", onClick: handleNext, "aria-label": "\uB2E4\uC74C \uB2EC", children: /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(ChevronRightIcon_default, {}) }),
+          showToday && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("button", { className: "calendar-today-btn", onClick: handleToday, children: locale === "ko" ? "\uC624\uB298" : "Today" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("div", { className: "calendar-weekdays", children: weekdays.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
           "div",
           {
             className: clsx_default(
-              "calendar-day",
-              !day.isCurrentMonth && "outside",
-              disabled && "disabled",
-              isSelected && "selected",
-              day.isToday && "today"
+              "calendar-weekday",
+              i === 0 && "sunday",
+              i === 6 && "saturday"
             ),
-            onClick: () => {
-              if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
-            },
-            children: renderDay(day, dayEvents)
-          },
-          idx
-        );
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime301.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: label
           },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("span", { className: "calendar-day-number", children: day.day }),
-            dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "calendar-day-events", children: [
-              dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
-                "span",
-                {
-                  className: "calendar-event-dot",
-                  style: { backgroundColor: event.color ?? "var(--xplat-blue-500)" },
-                  title: event.label,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onEventClick?.(event);
-                  }
+          label
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime301.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_runtime301.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);
                 },
-                ei
-              )),
-              dayEvents.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("span", { className: "calendar-event-more", children: [
-                "+",
-                dayEvents.length - 3
-              ] })
-            ] })
-          ]
-        },
-        idx
-      );
-    }) })
-  ] });
+                children: renderDay(day, dayEvents)
+              },
+              idx
+            );
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime301.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_runtime301.jsx)("span", { className: "calendar-day-number", children: day.day }),
+                dayEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "calendar-day-events", children: [
+                  dayEvents.slice(0, 3).map((event, ei) => /* @__PURE__ */ (0, import_jsx_runtime301.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_runtime301.jsxs)("span", { className: "calendar-event-more", children: [
+                    "+",
+                    dayEvents.length - 3
+                  ] })
+                ] })
+              ]
+            },
+            idx
+          );
+        }) })
+      ]
+    }
+  );
 };
 Calendar.displayName = "Calendar";
 var Calendar_default = Calendar;
@@ -16669,7 +16677,7 @@ var DayCell = import_react11.default.memo(
     disabled,
     selected,
     highlighted,
-    onClick
+    onSelect
   }) => /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
     "button",
     {
@@ -16685,10 +16693,13 @@ var DayCell = import_react11.default.memo(
         day.isSaturday && "saturday"
       ),
       disabled: disabled || !day.isCurrentMonth,
-      onClick,
+      onClick: () => {
+        if (!disabled && day.isCurrentMonth) onSelect(day.date);
+      },
       children: day.day
     }
-  )
+  ),
+  (prev, next) => prev.selected === next.selected && prev.disabled === next.disabled && prev.highlighted === next.highlighted && prev.day === next.day
 );
 DayCell.displayName = "DayCell";
 var SingleDatePicker = (props) => {
@@ -16766,9 +16777,7 @@ var SingleDatePicker = (props) => {
               disabled,
               selected,
               highlighted,
-              onClick: () => {
-                if (!disabled && day.isCurrentMonth) handleSelect(day.date);
-              }
+              onSelect: handleSelect
             },
             idx
           );

package/dist/components/index.css

@@ -676,6 +676,7 @@
 /* src/components/Calendar/calendar.scss */
 .lib-xplat-calendar {
   width: 100%;
+  min-width: 280px;
   user-select: none;
   container-type: inline-size;
 }
@@ -796,14 +797,14 @@
   background-color: var(--xplat-blue-600);
 }
 .lib-xplat-calendar .calendar-day.selected {
-  background-color: var(--xplat-neutral-900);
+  background-color: var(--calendar-selected-color, var(--xplat-neutral-900));
 }
 .lib-xplat-calendar .calendar-day.selected .calendar-day-number {
   color: var(--xplat-white);
   font-weight: 600;
 }
 .lib-xplat-calendar .calendar-day.selected:hover {
-  background-color: var(--xplat-neutral-800);
+  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);
@@ -1157,6 +1158,7 @@
 .lib-xplat-datepicker {
   user-select: none;
   container-type: inline-size;
+  width: 280px;
 }
 .lib-xplat-datepicker .datepicker-header {
   display: flex;
@@ -1274,9 +1276,11 @@
 .lib-xplat-datepicker.range {
   display: flex;
   gap: 1.5rem;
+  width: auto;
 }
 .lib-xplat-datepicker .datepicker-range-panel {
-  flex: 1;
+  width: 280px;
+  flex-shrink: 0;
 }
 .lib-xplat-datepicker .datepicker-range-label {
   display: block;
@@ -1288,6 +1292,7 @@
 }
 .lib-xplat-datepicker.input-datepicker {
   position: relative;
+  width: auto;
 }
 .lib-xplat-datepicker.input-datepicker .input-datepicker-dropdown {
   position: absolute;
@@ -1326,6 +1331,10 @@
   border-radius: 12px;
   background-color: #fff;
   padding: 24px;
+  width: fit-content;
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100vh - 2rem);
+  overflow: auto;
   transform: translate(-50%, -50%) scale(0.9);
   opacity: 0;
   transition: transform 0.2s ease, opacity 0.2s ease;

package/dist/components/index.js

@@ -1572,6 +1572,7 @@ var Calendar = (props) => {
     locale = "ko",
     minDate,
     maxDate,
+    selectedColor,
     showToday = true,
     className
   } = props;
@@ -1615,90 +1616,97 @@ var Calendar = (props) => {
   };
   const getEventsForDay = (date) => events.filter((e) => isSameDay(e.date, date));
   const weekdays = WEEKDAY_LABELS[locale];
-  return /* @__PURE__ */ jsxs193("div", { className: clsx_default("lib-xplat-calendar", className), 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, {}) }),
-      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",
-      {
-        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(
+  return /* @__PURE__ */ jsxs193(
+    "div",
+    {
+      className: clsx_default("lib-xplat-calendar", className),
+      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, {}) }),
+          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",
           {
             className: clsx_default(
-              "calendar-day",
-              !day.isCurrentMonth && "outside",
-              disabled && "disabled",
-              isSelected && "selected",
-              day.isToday && "today"
+              "calendar-weekday",
+              i === 0 && "sunday",
+              i === 6 && "saturday"
             ),
-            onClick: () => {
-              if (!disabled && day.isCurrentMonth) onSelect?.(day.date);
-            },
-            children: renderDay(day, dayEvents)
-          },
-          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: label
           },
-          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);
-                  }
+          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);
                 },
-                ei
-              )),
-              dayEvents.length > 3 && /* @__PURE__ */ jsxs193("span", { className: "calendar-event-more", children: [
-                "+",
-                dayEvents.length - 3
-              ] })
-            ] })
-          ]
-        },
-        idx
-      );
-    }) })
-  ] });
+                children: renderDay(day, dayEvents)
+              },
+              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
+          );
+        }) })
+      ]
+    }
+  );
 };
 Calendar.displayName = "Calendar";
 var Calendar_default = Calendar;
@@ -16583,7 +16591,7 @@ var DayCell = React9.memo(
     disabled,
     selected,
     highlighted,
-    onClick
+    onSelect
   }) => /* @__PURE__ */ jsx312(
     "button",
     {
@@ -16599,10 +16607,13 @@ var DayCell = React9.memo(
         day.isSaturday && "saturday"
       ),
       disabled: disabled || !day.isCurrentMonth,
-      onClick,
+      onClick: () => {
+        if (!disabled && day.isCurrentMonth) onSelect(day.date);
+      },
       children: day.day
     }
-  )
+  ),
+  (prev, next) => prev.selected === next.selected && prev.disabled === next.disabled && prev.highlighted === next.highlighted && prev.day === next.day
 );
 DayCell.displayName = "DayCell";
 var SingleDatePicker = (props) => {
@@ -16680,9 +16691,7 @@ var SingleDatePicker = (props) => {
               disabled,
               selected,
               highlighted,
-              onClick: () => {
-                if (!disabled && day.isCurrentMonth) handleSelect(day.date);
-              }
+              onSelect: handleSelect
             },
             idx
           );