@x-plat/design-system 0.1.2 → 0.1.4

package/dist/components/CheckBox/index.css

@@ -18,7 +18,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 0.25rem;
-  transition: border-color 0.2s, background-color 0.2s;
+  transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
 }
 .lib-xplat-checkbox > .checkbox.unchecked {
   border: 1px solid #A1A1A1;
@@ -585,6 +585,18 @@
 .lib-xplat-checkbox > .checkbox.checked.test-default:hover {
   background-color: rgb(234.6, 234.6, 234.6);
 }
+.lib-xplat-checkbox > .checkbox .check-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transform: scale(0.5);
+  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
+}
+.lib-xplat-checkbox > .checkbox .check-icon.visible {
+  opacity: 1;
+  transform: scale(1);
+}
 .lib-xplat-checkbox > .checkbox.disabled {
   cursor: not-allowed;
   background-color: #A1A1A1 !important;

package/dist/components/CheckBox/index.js

@@ -1078,7 +1078,7 @@ var CheckBox = (props) => {
         ...rest
       }
     ),
-    /* @__PURE__ */ jsx295("span", { className: clsx_default("checkbox", boxClasses), children: checked && /* @__PURE__ */ jsx295(CheckIcon_default, {}) }),
+    /* @__PURE__ */ jsx295("span", { className: clsx_default("checkbox", boxClasses), children: /* @__PURE__ */ jsx295("span", { className: clsx_default("check-icon", { visible: checked }), children: /* @__PURE__ */ jsx295(CheckIcon_default, {}) }) }),
     label && /* @__PURE__ */ jsx295("span", { className: "label", children: label })
   ] });
 };

package/dist/components/DatePicker/index.cjs

@@ -1529,6 +1529,8 @@ var Modal = (props) => {
           "div",
           {
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
+            role: "dialog",
+            "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children
           }
@@ -1545,13 +1547,48 @@ var Modal_default = Modal;
 var import_react_datepicker3 = __toESM(require("react-datepicker"), 1);
 var import_react_datepicker4 = require("react-datepicker/dist/react-datepicker.css");
 var import_jsx_runtime301 = require("react/jsx-runtime");
+function getColorValue(ns, color, depth) {
+  const nsColors = colors[ns];
+  const colorEntry = nsColors[color];
+  if (typeof colorEntry === "string") return colorEntry;
+  return colorEntry[String(depth)] ?? "";
+}
 var SingleDatePicker = (props) => {
-  const { value, onChange, ...rest } = props;
+  const {
+    value,
+    onChange,
+    colorNamespace = "xplat",
+    color = "blue",
+    colorDepth,
+    highlightDates,
+    ...rest
+  } = props;
   const handleChange = (date) => {
     if (Array.isArray(date)) return;
     onChange?.(date);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("div", { className: "lib-xplat-datepicker", children: /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(import_react_datepicker3.default, { selected: value, onChange: handleChange, inline: true, ...rest }) });
+  const activeColor = getColorValue(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+    "div",
+    {
+      className: "lib-xplat-datepicker",
+      style: { "--datepicker-active-color": activeColor },
+      children: /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+        import_react_datepicker3.default,
+        {
+          selected: value,
+          onChange: handleChange,
+          inline: true,
+          highlightDates,
+          ...rest
+        }
+      )
+    }
+  );
 };
 SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
@@ -1612,9 +1649,40 @@ PopupPicker.displayName = "PopupPicker";
 var PopupPicker_default = PopupPicker;
 
 // src/components/DatePicker/RangePicker/index.tsx
+var import_react7 = __toESM(require("react"), 1);
 var import_jsx_runtime303 = require("react/jsx-runtime");
+function getDatesBetween(start, end) {
+  const dates = [];
+  const current = new Date(start);
+  current.setHours(0, 0, 0, 0);
+  const last = new Date(end);
+  last.setHours(0, 0, 0, 0);
+  while (current <= last) {
+    dates.push(new Date(current));
+    current.setDate(current.getDate() + 1);
+  }
+  return dates;
+}
 var RangePicker = (props) => {
-  const { startDate, endDate, onChange, minDate, maxDate } = props;
+  const {
+    startDate,
+    endDate,
+    onChange,
+    minDate,
+    maxDate,
+    colorNamespace,
+    color,
+    colorDepth
+  } = props;
+  const rangeDates = import_react7.default.useMemo(
+    () => getDatesBetween(startDate, endDate),
+    [startDate, endDate]
+  );
+  const colorProps = {
+    ...colorNamespace !== void 0 && { colorNamespace },
+    ...color !== void 0 && { color },
+    ...colorDepth !== void 0 && { colorDepth }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "lib-xplat-range-datepicker", children: [
     /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "lib-xplat-range-datepicker-from", children: [
       /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("span", { className: "lib-xplat-range-datepicker-label", children: "\uC2DC\uC791" }),
@@ -1624,7 +1692,9 @@ var RangePicker = (props) => {
           value: startDate,
           onChange: (date) => date != null && onChange?.({ startDate: date, endDate }),
           minDate,
-          maxDate: endDate
+          maxDate: endDate,
+          highlightDates: rangeDates,
+          ...colorProps
         }
       )
     ] }),
@@ -1636,7 +1706,9 @@ var RangePicker = (props) => {
           value: endDate,
           onChange: (date) => date != null && onChange?.({ startDate, endDate: date }),
           minDate: startDate,
-          maxDate
+          maxDate,
+          highlightDates: rangeDates,
+          ...colorProps
         }
       )
     ] })

package/dist/components/DatePicker/index.css

@@ -74,6 +74,9 @@
 }
 
 /* src/components/DatePicker/datepicker.scss */
+.lib-xplat-datepicker {
+  user-select: none;
+}
 .lib-xplat-datepicker .react-datepicker {
   border: 1px solid #D4D4D4;
   border-radius: 0.375rem;
@@ -100,12 +103,27 @@
   cursor: not-allowed;
   pointer-events: none;
 }
+.lib-xplat-datepicker .react-datepicker__day--highlighted {
+  background-color: var(--datepicker-active-color, #4D6DE3) !important;
+  color: #FFFFFF !important;
+  opacity: 0.4;
+}
+.lib-xplat-datepicker .react-datepicker__day--highlighted.react-datepicker__day--selected,
+.lib-xplat-datepicker .react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected {
+  opacity: 1;
+}
+.lib-xplat-datepicker .react-datepicker__day--highlighted.react-datepicker__day--outside-month {
+  opacity: 0.25;
+}
 .lib-xplat-datepicker .react-datepicker__day--selected,
 .lib-xplat-datepicker .react-datepicker__day--keyboard-selected {
-  background-color: #4D6DE3;
+  background-color: var(--datepicker-active-color, #4D6DE3);
+  color: #FFFFFF;
 }
 .lib-xplat-datepicker .react-datepicker__day:not(.react-datepicker__day--disabled):hover {
-  background-color: #7093EA;
+  background-color: var(--datepicker-active-color, #4D6DE3);
+  color: #FFFFFF !important;
+  opacity: 0.8;
 }
 .lib-xplat-popup-datepicker-card {
   min-width: 20rem;

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.cjs';
 
 interface InputDatePickerProps {
     value: Date;
@@ -33,7 +35,7 @@ interface PopupPickerBaseProps {
 type PopupPickerProps = PopupPickerBaseProps & (SinglePickerProps | RangePickerProps$1);
 declare const PopupPicker: React.FC<PopupPickerProps>;
 
-interface RangePickerProps {
+interface RangePickerProps<N extends ColorNamespace = "xplat", C extends ColorName<N> = ColorName<N>> extends Partial<ColorProps<N, C>> {
     startDate: Date;
     endDate: Date;
     onChange?: (range: {
@@ -43,14 +45,253 @@ interface RangePickerProps {
     minDate?: Date;
     maxDate?: Date;
 }
-declare const RangePicker: React.FC<RangePickerProps>;
+declare const RangePicker: {
+    <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof {
+        readonly xplat: {
+            readonly red: {
+                readonly 50: "#FFF0F0";
+                readonly 100: "#FFDDDE";
+                readonly 200: "#FFC1C2";
+                readonly 300: "#FF9698";
+                readonly 400: "#FF5A5D";
+                readonly 500: "#FF272B";
+                readonly 600: "#F80409";
+                readonly 700: "#D40105";
+                readonly 800: "#AE0609";
+                readonly 900: "#900C0F";
+            };
+            readonly green: {
+                readonly 50: "#E5F6EA";
+                readonly 100: "#C1E7CC";
+                readonly 200: "#98D8AC";
+                readonly 300: "#6CCA8B";
+                readonly 400: "#47BE72";
+                readonly 500: "#10B259";
+                readonly 600: "#00A34F";
+                readonly 700: "#009143";
+                readonly 800: "#007F38";
+                readonly 900: "#006024";
+            };
+            readonly orange: {
+                readonly 50: "#FFF8EC";
+                readonly 100: "#FFF0D3";
+                readonly 200: "#FFDDA5";
+                readonly 300: "#FFC46D";
+                readonly 400: "#FF9F32";
+                readonly 500: "#FF820A";
+                readonly 600: "#FF6900";
+                readonly 700: "#CC4B02";
+                readonly 800: "#A13A0B";
+                readonly 900: "#82320C";
+            };
+            readonly yellow: {
+                readonly 50: "#FFFDE7";
+                readonly 100: "#FFFAC1";
+                readonly 200: "#FFF186";
+                readonly 300: "#FFE041";
+                readonly 400: "#FFCC0D";
+                readonly 500: "#F0B100";
+                readonly 600: "#D18800";
+                readonly 700: "#A66002";
+                readonly 800: "#894B0A";
+                readonly 900: "#743D0F";
+            };
+            readonly blue: {
+                readonly 50: "#F1F4FD";
+                readonly 100: "#DFE7FA";
+                readonly 200: "#C5D4F8";
+                readonly 300: "#9EB8F2";
+                readonly 400: "#7093EA";
+                readonly 500: "#4D6DE3";
+                readonly 600: "#3950D7";
+                readonly 700: "#303EC5";
+                readonly 800: "#2D35A0";
+                readonly 900: "#29317F";
+            };
+            readonly lightblue: {
+                readonly 50: "#EEFAFF";
+                readonly 100: "#D9F4FF";
+                readonly 200: "#BBEDFF";
+                readonly 300: "#8DE3FF";
+                readonly 400: "#57D0FF";
+                readonly 500: "#30B6FF";
+                readonly 600: "#1999F7";
+                readonly 700: "#1280E3";
+                readonly 800: "#1566B8";
+                readonly 900: "#175791";
+            };
+            readonly purple: {
+                readonly 50: "#FBF6FE";
+                readonly 100: "#F5EAFD";
+                readonly 200: "#EDD8FC";
+                readonly 300: "#E0BAF8";
+                readonly 400: "#CD8DF3";
+                readonly 500: "#B961EB";
+                readonly 600: "#A541DC";
+                readonly 700: "#9230C5";
+                readonly 800: "#782B9E";
+                readonly 900: "#62247F";
+            };
+            readonly pink: {
+                readonly 50: "#FFF4FE";
+                readonly 100: "#FFE7FD";
+                readonly 200: "#FFCFFA";
+                readonly 300: "#FEA9F1";
+                readonly 400: "#FD75E7";
+                readonly 500: "#F553DA";
+                readonly 600: "#D821B6";
+                readonly 700: "#B31892";
+                readonly 800: "#921676";
+                readonly 900: "#781761";
+            };
+            readonly neutral: {
+                readonly 50: "#FAFAFA";
+                readonly 100: "#F5F5F5";
+                readonly 200: "#E5E5E5";
+                readonly 300: "#D4D4D4";
+                readonly 400: "#A1A1A1";
+                readonly 500: "#737373";
+                readonly 600: "#525252";
+                readonly 700: "#404040";
+                readonly 800: "#262626";
+                readonly 900: "#171717";
+            };
+            readonly black: "#000000";
+            readonly white: "#FFFFFF";
+        };
+        readonly test: {
+            readonly default: "#ffffff";
+        };
+    }[N]>(props: RangePickerProps<N, C>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface SingleDatePickerProps {
+interface SingleDatePickerProps<N extends ColorNamespace = "xplat", C extends ColorName<N> = ColorName<N>> extends Partial<ColorProps<N, C>> {
     value: Date | null;
     onChange?: (date: Date | null) => void;
     minDate?: Date;
     maxDate?: Date;
+    highlightDates?: Date[];
 }
-declare const SingleDatePicker: React.FC<SingleDatePickerProps>;
+declare const SingleDatePicker: {
+    <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof {
+        readonly xplat: {
+            readonly red: {
+                readonly 50: "#FFF0F0";
+                readonly 100: "#FFDDDE";
+                readonly 200: "#FFC1C2";
+                readonly 300: "#FF9698";
+                readonly 400: "#FF5A5D";
+                readonly 500: "#FF272B";
+                readonly 600: "#F80409";
+                readonly 700: "#D40105";
+                readonly 800: "#AE0609";
+                readonly 900: "#900C0F";
+            };
+            readonly green: {
+                readonly 50: "#E5F6EA";
+                readonly 100: "#C1E7CC";
+                readonly 200: "#98D8AC";
+                readonly 300: "#6CCA8B";
+                readonly 400: "#47BE72";
+                readonly 500: "#10B259";
+                readonly 600: "#00A34F";
+                readonly 700: "#009143";
+                readonly 800: "#007F38";
+                readonly 900: "#006024";
+            };
+            readonly orange: {
+                readonly 50: "#FFF8EC";
+                readonly 100: "#FFF0D3";
+                readonly 200: "#FFDDA5";
+                readonly 300: "#FFC46D";
+                readonly 400: "#FF9F32";
+                readonly 500: "#FF820A";
+                readonly 600: "#FF6900";
+                readonly 700: "#CC4B02";
+                readonly 800: "#A13A0B";
+                readonly 900: "#82320C";
+            };
+            readonly yellow: {
+                readonly 50: "#FFFDE7";
+                readonly 100: "#FFFAC1";
+                readonly 200: "#FFF186";
+                readonly 300: "#FFE041";
+                readonly 400: "#FFCC0D";
+                readonly 500: "#F0B100";
+                readonly 600: "#D18800";
+                readonly 700: "#A66002";
+                readonly 800: "#894B0A";
+                readonly 900: "#743D0F";
+            };
+            readonly blue: {
+                readonly 50: "#F1F4FD";
+                readonly 100: "#DFE7FA";
+                readonly 200: "#C5D4F8";
+                readonly 300: "#9EB8F2";
+                readonly 400: "#7093EA";
+                readonly 500: "#4D6DE3";
+                readonly 600: "#3950D7";
+                readonly 700: "#303EC5";
+                readonly 800: "#2D35A0";
+                readonly 900: "#29317F";
+            };
+            readonly lightblue: {
+                readonly 50: "#EEFAFF";
+                readonly 100: "#D9F4FF";
+                readonly 200: "#BBEDFF";
+                readonly 300: "#8DE3FF";
+                readonly 400: "#57D0FF";
+                readonly 500: "#30B6FF";
+                readonly 600: "#1999F7";
+                readonly 700: "#1280E3";
+                readonly 800: "#1566B8";
+                readonly 900: "#175791";
+            };
+            readonly purple: {
+                readonly 50: "#FBF6FE";
+                readonly 100: "#F5EAFD";
+                readonly 200: "#EDD8FC";
+                readonly 300: "#E0BAF8";
+                readonly 400: "#CD8DF3";
+                readonly 500: "#B961EB";
+                readonly 600: "#A541DC";
+                readonly 700: "#9230C5";
+                readonly 800: "#782B9E";
+                readonly 900: "#62247F";
+            };
+            readonly pink: {
+                readonly 50: "#FFF4FE";
+                readonly 100: "#FFE7FD";
+                readonly 200: "#FFCFFA";
+                readonly 300: "#FEA9F1";
+                readonly 400: "#FD75E7";
+                readonly 500: "#F553DA";
+                readonly 600: "#D821B6";
+                readonly 700: "#B31892";
+                readonly 800: "#921676";
+                readonly 900: "#781761";
+            };
+            readonly neutral: {
+                readonly 50: "#FAFAFA";
+                readonly 100: "#F5F5F5";
+                readonly 200: "#E5E5E5";
+                readonly 300: "#D4D4D4";
+                readonly 400: "#A1A1A1";
+                readonly 500: "#737373";
+                readonly 600: "#525252";
+                readonly 700: "#404040";
+                readonly 800: "#262626";
+                readonly 900: "#171717";
+            };
+            readonly black: "#000000";
+            readonly white: "#FFFFFF";
+        };
+        readonly test: {
+            readonly default: "#ffffff";
+        };
+    }[N]>(props: SingleDatePickerProps<N, C>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 export { InputDatePicker, PopupPicker as PopupDatePicker, RangePicker as RangeDatePicker, SingleDatePicker };