@x-plat/design-system 0.3.8 → 0.4.0

package/dist/index.cjs

@@ -6183,6 +6183,7 @@ var Calendar = (props) => {
     locale = "ko",
     minDate,
     maxDate,
+    selectedColor,
     showToday = true,
     className
   } = props;
@@ -6226,90 +6227,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;
@@ -21201,6 +21209,37 @@ var useClickOutside_default = useClickOutside;
 // src/components/DatePicker/SingleDatePicker/index.tsx
 var import_react11 = __toESM(require("react"), 1);
 var import_jsx_runtime312 = require("react/jsx-runtime");
+var DayCell = import_react11.default.memo(
+  ({
+    day,
+    disabled,
+    selected,
+    highlighted,
+    onSelect
+  }) => /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+    "button",
+    {
+      type: "button",
+      className: clsx_default(
+        "datepicker-day",
+        !day.isCurrentMonth && "outside",
+        disabled && "disabled",
+        selected && "selected",
+        highlighted && !selected && "highlighted",
+        day.isToday && "today",
+        day.isSunday && "sunday",
+        day.isSaturday && "saturday"
+      ),
+      disabled: disabled || !day.isCurrentMonth,
+      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) => {
   const {
     value,
@@ -21232,6 +21271,12 @@ var SingleDatePicker = (props) => {
     }
     return set2;
   }, [highlightDates]);
+  const handleSelect = import_react11.default.useCallback(
+    (date) => {
+      onChange?.(date);
+    },
+    [onChange]
+  );
   const weekdays = WEEKDAY_LABELS[locale];
   return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
     "div",
@@ -21264,26 +21309,13 @@ var SingleDatePicker = (props) => {
             `${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
           );
           return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
-            "button",
+            DayCell,
             {
-              type: "button",
-              className: clsx_default(
-                "datepicker-day",
-                !day.isCurrentMonth && "outside",
-                disabled && "disabled",
-                selected && "selected",
-                highlighted && !selected && "highlighted",
-                day.isToday && "today",
-                day.isSunday && "sunday",
-                day.isSaturday && "saturday"
-              ),
-              disabled: disabled || !day.isCurrentMonth,
-              onClick: () => {
-                if (!disabled && day.isCurrentMonth) {
-                  onChange?.(day.date);
-                }
-              },
-              children: day.day
+              day,
+              disabled,
+              selected,
+              highlighted,
+              onSelect: handleSelect
             },
             idx
           );

package/dist/index.css

@@ -767,6 +767,12 @@
 .lib-xplat-calendar .calendar-day.outside .calendar-day-number {
   color: var(--xplat-neutral-300);
 }
+.lib-xplat-calendar .calendar-day.outside.sunday .calendar-day-number {
+  color: color-mix(in srgb, var(--xplat-red-500) 35%, transparent);
+}
+.lib-xplat-calendar .calendar-day.outside.saturday .calendar-day-number {
+  color: color-mix(in srgb, var(--xplat-blue-500) 35%, transparent);
+}
 .lib-xplat-calendar .calendar-day.disabled {
   cursor: not-allowed;
 }
@@ -778,34 +784,34 @@
   font-weight: 700;
   color: var(--xplat-blue-600);
 }
-.lib-xplat-calendar .calendar-day.today .calendar-day-number::after {
+.lib-xplat-calendar .calendar-day.today .calendar-day-number::before {
   content: "";
   position: absolute;
-  bottom: -2px;
-  left: 50%;
-  transform: translateX(-50%);
+  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(--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::after {
+.lib-xplat-calendar .calendar-day.selected.today .calendar-day-number::before {
   background-color: var(--xplat-white);
 }
-.lib-xplat-calendar .calendar-day.sunday .calendar-day-number {
+.lib-xplat-calendar .calendar-day.sunday:not(.outside) .calendar-day-number {
   color: var(--xplat-red-500);
 }
-.lib-xplat-calendar .calendar-day.saturday .calendar-day-number {
+.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 {
@@ -1230,6 +1236,12 @@
   color: var(--xplat-neutral-300);
   cursor: default;
 }
+.lib-xplat-datepicker .datepicker-day.outside.sunday {
+  color: color-mix(in srgb, var(--xplat-red-500) 35%, transparent);
+}
+.lib-xplat-datepicker .datepicker-day.outside.saturday {
+  color: color-mix(in srgb, var(--xplat-blue-500) 35%, transparent);
+}
 .lib-xplat-datepicker .datepicker-day.disabled {
   color: var(--xplat-neutral-300);
   cursor: not-allowed;
@@ -1314,6 +1326,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/index.js

@@ -5790,6 +5790,7 @@ var Calendar = (props) => {
     locale = "ko",
     minDate,
     maxDate,
+    selectedColor,
     showToday = true,
     className
   } = props;
@@ -5833,90 +5834,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;
@@ -20808,6 +20816,37 @@ 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";
+var DayCell = React9.memo(
+  ({
+    day,
+    disabled,
+    selected,
+    highlighted,
+    onSelect
+  }) => /* @__PURE__ */ jsx312(
+    "button",
+    {
+      type: "button",
+      className: clsx_default(
+        "datepicker-day",
+        !day.isCurrentMonth && "outside",
+        disabled && "disabled",
+        selected && "selected",
+        highlighted && !selected && "highlighted",
+        day.isToday && "today",
+        day.isSunday && "sunday",
+        day.isSaturday && "saturday"
+      ),
+      disabled: disabled || !day.isCurrentMonth,
+      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) => {
   const {
     value,
@@ -20839,6 +20878,12 @@ var SingleDatePicker = (props) => {
     }
     return set2;
   }, [highlightDates]);
+  const handleSelect = React9.useCallback(
+    (date) => {
+      onChange?.(date);
+    },
+    [onChange]
+  );
   const weekdays = WEEKDAY_LABELS[locale];
   return /* @__PURE__ */ jsxs199(
     "div",
@@ -20871,26 +20916,13 @@ var SingleDatePicker = (props) => {
             `${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
           );
           return /* @__PURE__ */ jsx312(
-            "button",
+            DayCell,
             {
-              type: "button",
-              className: clsx_default(
-                "datepicker-day",
-                !day.isCurrentMonth && "outside",
-                disabled && "disabled",
-                selected && "selected",
-                highlighted && !selected && "highlighted",
-                day.isToday && "today",
-                day.isSunday && "sunday",
-                day.isSaturday && "saturday"
-              ),
-              disabled: disabled || !day.isCurrentMonth,
-              onClick: () => {
-                if (!disabled && day.isCurrentMonth) {
-                  onChange?.(day.date);
-                }
-              },
-              children: day.day
+              day,
+              disabled,
+              selected,
+              highlighted,
+              onSelect: handleSelect
             },
             idx
           );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",