@x-plat/design-system 0.3.8 → 0.3.9

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,12 +109,12 @@
   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%;
@@ -124,13 +130,13 @@
 .lib-xplat-calendar .calendar-day.selected:hover {
   background-color: var(--xplat-neutral-800);
 }
-.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/DatePicker/index.cjs

@@ -1450,6 +1450,34 @@ 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,
+    onClick
+  }) => /* @__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,
+      children: day.day
+    }
+  )
+);
+DayCell.displayName = "DayCell";
 var SingleDatePicker = (props) => {
   const {
     value,
@@ -1481,6 +1509,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 +1547,15 @@ 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,
+              day,
+              disabled,
+              selected,
+              highlighted,
               onClick: () => {
-                if (!disabled && day.isCurrentMonth) {
-                  onChange?.(day.date);
-                }
-              },
-              children: day.day
+                if (!disabled && day.isCurrentMonth) handleSelect(day.date);
+              }
             },
             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;

package/dist/components/DatePicker/index.js

@@ -1411,6 +1411,34 @@ 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,
+    onClick
+  }) => /* @__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,
+      children: day.day
+    }
+  )
+);
+DayCell.displayName = "DayCell";
 var SingleDatePicker = (props) => {
   const {
     value,
@@ -1442,6 +1470,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 +1508,15 @@ 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,
+              day,
+              disabled,
+              selected,
+              highlighted,
               onClick: () => {
-                if (!disabled && day.isCurrentMonth) {
-                  onChange?.(day.date);
-                }
-              },
-              children: day.day
+                if (!disabled && day.isCurrentMonth) handleSelect(day.date);
+              }
             },
             idx
           );

package/dist/components/index.cjs

@@ -16663,6 +16663,34 @@ 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,
+    onClick
+  }) => /* @__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,
+      children: day.day
+    }
+  )
+);
+DayCell.displayName = "DayCell";
 var SingleDatePicker = (props) => {
   const {
     value,
@@ -16694,6 +16722,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",
@@ -16726,26 +16760,15 @@ 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,
+              day,
+              disabled,
+              selected,
+              highlighted,
               onClick: () => {
-                if (!disabled && day.isCurrentMonth) {
-                  onChange?.(day.date);
-                }
-              },
-              children: day.day
+                if (!disabled && day.isCurrentMonth) handleSelect(day.date);
+              }
             },
             idx
           );

package/dist/components/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,12 +784,12 @@
   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%;
@@ -799,13 +805,13 @@
 .lib-xplat-calendar .calendar-day.selected:hover {
   background-color: var(--xplat-neutral-800);
 }
-.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;

package/dist/components/index.js

@@ -16577,6 +16577,34 @@ 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,
+    onClick
+  }) => /* @__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,
+      children: day.day
+    }
+  )
+);
+DayCell.displayName = "DayCell";
 var SingleDatePicker = (props) => {
   const {
     value,
@@ -16608,6 +16636,12 @@ var SingleDatePicker = (props) => {
     }
     return set2;
   }, [highlightDates]);
+  const handleSelect = React9.useCallback(
+    (date) => {
+      onChange?.(date);
+    },
+    [onChange]
+  );
   const weekdays = WEEKDAY_LABELS[locale];
   return /* @__PURE__ */ jsxs199(
     "div",
@@ -16640,26 +16674,15 @@ 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,
+              day,
+              disabled,
+              selected,
+              highlighted,
               onClick: () => {
-                if (!disabled && day.isCurrentMonth) {
-                  onChange?.(day.date);
-                }
-              },
-              children: day.day
+                if (!disabled && day.isCurrentMonth) handleSelect(day.date);
+              }
             },
             idx
           );

package/dist/index.cjs

@@ -21201,6 +21201,34 @@ 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,
+    onClick
+  }) => /* @__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,
+      children: day.day
+    }
+  )
+);
+DayCell.displayName = "DayCell";
 var SingleDatePicker = (props) => {
   const {
     value,
@@ -21232,6 +21260,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 +21298,15 @@ 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,
+              day,
+              disabled,
+              selected,
+              highlighted,
               onClick: () => {
-                if (!disabled && day.isCurrentMonth) {
-                  onChange?.(day.date);
-                }
-              },
-              children: day.day
+                if (!disabled && day.isCurrentMonth) handleSelect(day.date);
+              }
             },
             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,12 +784,12 @@
   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%;
@@ -799,13 +805,13 @@
 .lib-xplat-calendar .calendar-day.selected:hover {
   background-color: var(--xplat-neutral-800);
 }
-.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;

package/dist/index.js

@@ -20808,6 +20808,34 @@ 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,
+    onClick
+  }) => /* @__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,
+      children: day.day
+    }
+  )
+);
+DayCell.displayName = "DayCell";
 var SingleDatePicker = (props) => {
   const {
     value,
@@ -20839,6 +20867,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 +20905,15 @@ 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,
+              day,
+              disabled,
+              selected,
+              highlighted,
               onClick: () => {
-                if (!disabled && day.isCurrentMonth) {
-                  onChange?.(day.date);
-                }
-              },
-              children: day.day
+                if (!disabled && day.isCurrentMonth) handleSelect(day.date);
+              }
             },
             idx
           );

package/package.json

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