@x-plat/design-system 0.1.2 → 0.1.4

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

@@ -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.js';
 
 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 };

package/dist/components/DatePicker/index.js

@@ -1490,6 +1490,8 @@ var Modal = (props) => {
           "div",
           {
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
+            role: "dialog",
+            "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children
           }
@@ -1506,13 +1508,48 @@ var Modal_default = Modal;
 import DatePicker2 from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { jsx as jsx301 } from "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__ */ jsx301("div", { className: "lib-xplat-datepicker", children: /* @__PURE__ */ jsx301(DatePicker2, { selected: value, onChange: handleChange, inline: true, ...rest }) });
+  const activeColor = getColorValue(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  return /* @__PURE__ */ jsx301(
+    "div",
+    {
+      className: "lib-xplat-datepicker",
+      style: { "--datepicker-active-color": activeColor },
+      children: /* @__PURE__ */ jsx301(
+        DatePicker2,
+        {
+          selected: value,
+          onChange: handleChange,
+          inline: true,
+          highlightDates,
+          ...rest
+        }
+      )
+    }
+  );
 };
 SingleDatePicker.displayName = "SingleDatePicker";
 var SingleDatePicker_default = SingleDatePicker;
@@ -1573,9 +1610,40 @@ PopupPicker.displayName = "PopupPicker";
 var PopupPicker_default = PopupPicker;
 
 // src/components/DatePicker/RangePicker/index.tsx
+import React6 from "react";
 import { jsx as jsx303, jsxs as jsxs192 } from "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 = React6.useMemo(
+    () => getDatesBetween(startDate, endDate),
+    [startDate, endDate]
+  );
+  const colorProps = {
+    ...colorNamespace !== void 0 && { colorNamespace },
+    ...color !== void 0 && { color },
+    ...colorDepth !== void 0 && { colorDepth }
+  };
   return /* @__PURE__ */ jsxs192("div", { className: "lib-xplat-range-datepicker", children: [
     /* @__PURE__ */ jsxs192("div", { className: "lib-xplat-range-datepicker-from", children: [
       /* @__PURE__ */ jsx303("span", { className: "lib-xplat-range-datepicker-label", children: "\uC2DC\uC791" }),
@@ -1585,7 +1653,9 @@ var RangePicker = (props) => {
           value: startDate,
           onChange: (date) => date != null && onChange?.({ startDate: date, endDate }),
           minDate,
-          maxDate: endDate
+          maxDate: endDate,
+          highlightDates: rangeDates,
+          ...colorProps
         }
       )
     ] }),
@@ -1597,7 +1667,9 @@ var RangePicker = (props) => {
           value: endDate,
           onChange: (date) => date != null && onChange?.({ startDate, endDate: date }),
           minDate: startDate,
-          maxDate
+          maxDate,
+          highlightDates: rangeDates,
+          ...colorProps
         }
       )
     ] })

package/dist/components/Divider/index.cjs

@@ -0,0 +1,61 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Divider/index.ts
+var Divider_exports = {};
+__export(Divider_exports, {
+  Divider: () => Divider_default
+});
+module.exports = __toCommonJS(Divider_exports);
+
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Divider/Divider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Divider = (props) => {
+  const { orientation = "horizontal", className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-divider", orientation, className),
+      role: "separator",
+      "aria-orientation": orientation
+    }
+  );
+};
+Divider.displayName = "Divider";
+var Divider_default = Divider;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Divider
+});

package/dist/components/Divider/index.css

@@ -0,0 +1,15 @@
+/* src/components/Divider/divider.scss */
+.lib-xplat-divider {
+  border: none;
+  flex-shrink: 0;
+}
+.lib-xplat-divider.horizontal {
+  width: 100%;
+  height: 1px;
+  background-color: #E5E5E5;
+}
+.lib-xplat-divider.vertical {
+  width: 1px;
+  align-self: stretch;
+  background-color: #E5E5E5;
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+
+type DividerOrientation = "horizontal" | "vertical";
+interface DividerProps {
+    orientation?: DividerOrientation;
+    className?: string;
+}
+declare const Divider: React.FC<DividerProps>;
+
+export { Divider };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+
+type DividerOrientation = "horizontal" | "vertical";
+interface DividerProps {
+    orientation?: DividerOrientation;
+    className?: string;
+}
+declare const Divider: React.FC<DividerProps>;
+
+export { Divider };

package/dist/components/Divider/index.js

@@ -0,0 +1,34 @@
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Divider/Divider.tsx
+import { jsx } from "react/jsx-runtime";
+var Divider = (props) => {
+  const { orientation = "horizontal", className } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx_default("lib-xplat-divider", orientation, className),
+      role: "separator",
+      "aria-orientation": orientation
+    }
+  );
+};
+Divider.displayName = "Divider";
+var Divider_default = Divider;
+export {
+  Divider_default as Divider
+};

package/dist/components/Drawer/index.cjs

@@ -0,0 +1,111 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Drawer/index.ts
+var Drawer_exports = {};
+__export(Drawer_exports, {
+  Drawer: () => Drawer_default
+});
+module.exports = __toCommonJS(Drawer_exports);
+
+// src/components/Drawer/Drawer.tsx
+var import_react = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Drawer/Drawer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ANIMATION_DURATION_MS = 250;
+var Drawer = (props) => {
+  const { isOpen, onClose, placement = "right", width = 320, title, children } = props;
+  const [mounted, setMounted] = import_react.default.useState(false);
+  const [visible, setVisible] = import_react.default.useState(false);
+  import_react.default.useEffect(() => {
+    if (isOpen) {
+      setMounted(true);
+      const t2 = setTimeout(() => setVisible(true), 1);
+      return () => clearTimeout(t2);
+    }
+    setVisible(false);
+    const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS);
+    return () => clearTimeout(t);
+  }, [isOpen]);
+  if (typeof document === "undefined") return null;
+  if (!mounted) return null;
+  const stateClass = visible ? "enter" : "exit";
+  const widthValue = typeof width === "number" ? `${width}px` : width;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: clsx_default("lib-xplat-drawer-overlay", stateClass),
+        onClick: onClose,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: clsx_default("lib-xplat-drawer", placement, stateClass),
+            style: { width: widthValue },
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "drawer-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "drawer-title", children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "drawer-body", children })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+};
+Drawer.displayName = "Drawer";
+var Drawer_default = Drawer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Drawer
+});