@x-plat/design-system 0.3.8 → 0.4.0

package/dist/components/Calendar/index.cjs

@@ -1077,6 +1077,7 @@ var Calendar = (props) => {
     locale = "ko",
     minDate,
     maxDate,
+    selectedColor,
     showToday = true,
     className
   } = props;
@@ -1120,90 +1121,97 @@ var Calendar = (props) => {
   };
   const getEventsForDay = (date) => events.filter((e) => isSameDay(e.date, date));
   const weekdays = WEEKDAY_LABELS[locale];
-  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: clsx_default("lib-xplat-calendar", className), 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, {}) }),
-      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",
-      {
-        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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-calendar", className),
+      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, {}) }),
+          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",
           {
             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_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: label
           },
-          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);
-                  }
+          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);
                 },
-                ei
-              )),
-              dayEvents.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("span", { className: "calendar-event-more", children: [
-                "+",
-                dayEvents.length - 3
-              ] })
-            ] })
-          ]
-        },
-        idx
-      );
-    }) })
-  ] });
+                children: renderDay(day, dayEvents)
+              },
+              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
+          );
+        }) })
+      ]
+    }
+  );
 };
 Calendar.displayName = "Calendar";
 var Calendar_default = Calendar;

package/dist/components/Calendar/index.css

@@ -92,6 +92,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;
 }
@@ -103,34 +109,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 {

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

@@ -51,6 +51,8 @@ interface CalendarProps {
     minDate?: Date;
     /** 최대 선택 가능 날짜 */
     maxDate?: Date;
+    /** 선택 날짜 색상 (CSS 변수명, 예: "xplat-blue-500") */
+    selectedColor?: string;
     /** 오늘 버튼 표시 */
     showToday?: boolean;
     className?: string;

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

@@ -51,6 +51,8 @@ interface CalendarProps {
     minDate?: Date;
     /** 최대 선택 가능 날짜 */
     maxDate?: Date;
+    /** 선택 날짜 색상 (CSS 변수명, 예: "xplat-blue-500") */
+    selectedColor?: string;
     /** 오늘 버튼 표시 */
     showToday?: boolean;
     className?: string;

package/dist/components/Calendar/index.js

@@ -1038,6 +1038,7 @@ var Calendar = (props) => {
     locale = "ko",
     minDate,
     maxDate,
+    selectedColor,
     showToday = true,
     className
   } = props;
@@ -1081,90 +1082,97 @@ var Calendar = (props) => {
   };
   const getEventsForDay = (date) => events.filter((e) => isSameDay(e.date, date));
   const weekdays = WEEKDAY_LABELS[locale];
-  return /* @__PURE__ */ jsxs189("div", { className: clsx_default("lib-xplat-calendar", className), 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, {}) }),
-      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",
-      {
-        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(
+  return /* @__PURE__ */ jsxs189(
+    "div",
+    {
+      className: clsx_default("lib-xplat-calendar", className),
+      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, {}) }),
+          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",
           {
             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__ */ 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: label
           },
-          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);
-                  }
+          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);
                 },
-                ei
-              )),
-              dayEvents.length > 3 && /* @__PURE__ */ jsxs189("span", { className: "calendar-event-more", children: [
-                "+",
-                dayEvents.length - 3
-              ] })
-            ] })
-          ]
-        },
-        idx
-      );
-    }) })
-  ] });
+                children: renderDay(day, dayEvents)
+              },
+              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
+          );
+        }) })
+      ]
+    }
+  );
 };
 Calendar.displayName = "Calendar";
 var Calendar_default = Calendar;

package/dist/components/DatePicker/index.cjs

@@ -1450,6 +1450,37 @@ var MONTH_LABELS = {
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 var import_jsx_runtime298 = require("react/jsx-runtime");
+var DayCell = import_react6.default.memo(
+  ({
+    day,
+    disabled,
+    selected,
+    highlighted,
+    onSelect
+  }) => /* @__PURE__ */ (0, import_jsx_runtime298.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,
@@ -1481,6 +1512,12 @@ var SingleDatePicker = (props) => {
     }
     return set;
   }, [highlightDates]);
+  const handleSelect = import_react6.default.useCallback(
+    (date) => {
+      onChange?.(date);
+    },
+    [onChange]
+  );
   const weekdays = WEEKDAY_LABELS[locale];
   return /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)(
     "div",
@@ -1513,26 +1550,13 @@ var SingleDatePicker = (props) => {
             `${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
           );
           return /* @__PURE__ */ (0, import_jsx_runtime298.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/components/DatePicker/index.css

@@ -167,6 +167,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;
@@ -295,6 +301,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/DatePicker/index.js

@@ -1411,6 +1411,37 @@ var MONTH_LABELS = {
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 import { jsx as jsx298, jsxs as jsxs191 } from "react/jsx-runtime";
+var DayCell = React5.memo(
+  ({
+    day,
+    disabled,
+    selected,
+    highlighted,
+    onSelect
+  }) => /* @__PURE__ */ jsx298(
+    "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,
@@ -1442,6 +1473,12 @@ var SingleDatePicker = (props) => {
     }
     return set;
   }, [highlightDates]);
+  const handleSelect = React5.useCallback(
+    (date) => {
+      onChange?.(date);
+    },
+    [onChange]
+  );
   const weekdays = WEEKDAY_LABELS[locale];
   return /* @__PURE__ */ jsxs191(
     "div",
@@ -1474,26 +1511,13 @@ var SingleDatePicker = (props) => {
             `${day.date.getFullYear()}-${day.date.getMonth()}-${day.date.getDate()}`
           );
           return /* @__PURE__ */ jsx298(
-            "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/components/Modal/index.css

@@ -9,6 +9,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;