@x-plat/design-system 0.2.3 → 0.3.0

package/dist/components/index.d.ts

@@ -37,5 +37,5 @@ export { Tooltip } from './Tooltip/index.js';
 export { Video, VideoProps } from './Video/index.js';
 import 'react';
 import 'react/jsx-runtime';
-import '../colors-BNxEsOY3.js';
+import '../colors-BgzpjYfN.js';
 import '../attributes-DJIWir_0.js';

package/dist/components/index.js

@@ -1378,11 +1378,6 @@ var Alert = (props) => {
 Alert.displayName = "Alert";
 var Alert_default = Alert;
 
-// src/util/getColor.ts
-var getColorClass = (namespace, palette, shade) => {
-  return `${String(namespace)}-${String(palette)}${shade !== void 0 ? `-${String(shade)}` : ""}`;
-};
-
 // src/components/Avatar/Avatar.tsx
 import { jsx as jsx297 } from "react/jsx-runtime";
 var Avatar = (props) => {
@@ -1391,16 +1386,10 @@ var Avatar = (props) => {
     alt,
     name,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   const initials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
   return /* @__PURE__ */ jsx297("div", { className: clsx_default("lib-xplat-avatar", size4, className), children: src ? /* @__PURE__ */ jsx297("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ jsx297("div", { className: clsx_default("fallback", colorClass), children: initials || /* @__PURE__ */ jsx297("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx297("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
 };
@@ -1416,16 +1405,10 @@ var Badge = (props) => {
     maxCount = 99,
     dot = false,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "red",
-    colorDepth,
+    color: color2 = "xplat-red-500",
     className
   } = props;
-  const colorClass = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   const showBadge = dot || count2 !== void 0 && count2 > 0;
   const displayCount = count2 !== void 0 && count2 > maxCount ? `${maxCount}+` : count2;
   return /* @__PURE__ */ jsxs191("div", { className: clsx_default("lib-xplat-badge", size4, className), children: [
@@ -1458,18 +1441,12 @@ var Button = (props) => {
     children,
     type = "primary",
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "black",
-    colorDepth,
+    color: color2 = "xplat-black",
     disabled,
     className,
     ...rest
   } = props;
-  const colorClass = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsx300(
     "button",
     {
@@ -16087,9 +16064,7 @@ var Chart_default = Chart3;
 import { jsx as jsx306, jsxs as jsxs195 } from "react/jsx-runtime";
 var CheckBox = (props) => {
   const {
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
+    color: color2 = "xplat-blue-500",
     checked,
     label,
     onChange,
@@ -16101,11 +16076,7 @@ var CheckBox = (props) => {
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
-  const mainColor = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const mainColor = color2;
   const uncheckedClasses = `unchecked`;
   const checkedClasses = `checked ${mainColor}`;
   const disabledClasses = "disabled";
@@ -16133,18 +16104,12 @@ import { jsx as jsx307 } from "react/jsx-runtime";
 var Chip = (props) => {
   const {
     children,
-    colorNamespace = "xplat",
-    color: color2 = "black",
-    colorDepth,
+    color: color2 = "xplat-black",
     type = "primary",
     size: size4 = "md",
     className
   } = props;
-  const colorClass = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsx307("div", { className: clsx_default("lib-xplat-chip", type, size4, colorClass, className), children });
 };
 Chip.displayName = "Chip";
@@ -27138,19 +27103,11 @@ var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
 import { jsx as jsx314 } from "react/jsx-runtime";
-function getColorValue(ns, color2, depth) {
-  const nsColors = colors[ns];
-  const colorEntry = nsColors[color2];
-  if (typeof colorEntry === "string") return colorEntry;
-  return colorEntry[String(depth)] ?? "";
-}
 var SingleDatePicker = (props) => {
   const {
     value,
     onChange,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
+    color: color2 = "xplat-blue-500",
     highlightDates,
     ...rest
   } = props;
@@ -27158,16 +27115,11 @@ var SingleDatePicker = (props) => {
     if (Array.isArray(date)) return;
     onChange?.(date);
   };
-  const activeColor = getColorValue(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
   return /* @__PURE__ */ jsx314(
     "div",
     {
       className: "lib-xplat-datepicker",
-      style: { "--datepicker-active-color": activeColor },
+      style: { "--datepicker-active-color": `var(--${color2})` },
       children: /* @__PURE__ */ jsx314(
         DatePicker,
         {
@@ -27225,13 +27177,12 @@ var PopupPicker = (props) => {
           Button_default,
           {
             type: "secondary",
-            color: "neutral",
-            colorDepth: 400,
+            color: "xplat-neutral-400",
             onClick: handleClose,
             children: "\uCDE8\uC18C"
           }
         ),
-        /* @__PURE__ */ jsx315(Button_default, { type: "primary", color: "blue", onClick: handleClose, children: "\uC801\uC6A9" })
+        /* @__PURE__ */ jsx315(Button_default, { type: "primary", color: "xplat-blue-500", onClick: handleClose, children: "\uC801\uC6A9" })
       ] })
     ] }) })
   ] });
@@ -27261,19 +27212,12 @@ var RangePicker = (props) => {
     onChange,
     minDate,
     maxDate,
-    colorNamespace,
-    color: color2,
-    colorDepth
+    color: color2
   } = props;
   const rangeDates = React13.useMemo(
     () => getDatesBetween(startDate, endDate),
     [startDate, endDate]
   );
-  const colorProps = {
-    ...colorNamespace !== void 0 && { colorNamespace },
-    ...color2 !== void 0 && { color: color2 },
-    ...colorDepth !== void 0 && { colorDepth }
-  };
   return /* @__PURE__ */ jsxs200("div", { className: "lib-xplat-range-datepicker", children: [
     /* @__PURE__ */ jsxs200("div", { className: "lib-xplat-range-datepicker-from", children: [
       /* @__PURE__ */ jsx316("span", { className: "lib-xplat-range-datepicker-label", children: "\uC2DC\uC791" }),
@@ -27285,7 +27229,7 @@ var RangePicker = (props) => {
           minDate,
           maxDate: endDate,
           highlightDates: rangeDates,
-          ...colorProps
+          color: color2
         }
       )
     ] }),
@@ -27299,7 +27243,7 @@ var RangePicker = (props) => {
           minDate: startDate,
           maxDate,
           highlightDates: rangeDates,
-          ...colorProps
+          color: color2
         }
       )
     ] })
@@ -28011,16 +27955,10 @@ var Pagination = (props) => {
     siblingCount = 1,
     onChange,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const pages = getPageRange(current, totalPages, siblingCount);
   const handleClick = (page) => {
@@ -28130,16 +28068,10 @@ var Progress = (props) => {
     max: max3 = 100,
     size: size4 = "md",
     showLabel = false,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   const percentage = Math.min(100, Math.max(0, value / max3 * 100));
   return /* @__PURE__ */ jsxs209("div", { className: clsx_default("lib-xplat-progress", size4, className), children: [
     /* @__PURE__ */ jsx328(
@@ -28185,9 +28117,7 @@ var Radio = (props) => {
     label,
     value,
     className,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
+    color: color2 = "xplat-blue-500",
     size: sizeProp,
     ...rest
   } = props;
@@ -28200,11 +28130,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsxs210(
     "label",
     {
@@ -28269,16 +28195,10 @@ import { jsx as jsx332, jsxs as jsxs211 } from "react/jsx-runtime";
 var Spinner = (props) => {
   const {
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsx332(
     "div",
     {
@@ -28320,16 +28240,10 @@ var Steps = (props) => {
   const {
     items,
     current,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsx333("div", { className: clsx_default("lib-xplat-steps", className), children: items.map((item, index3) => {
     const status = index3 < current ? "completed" : index3 === current ? "active" : "pending";
     return /* @__PURE__ */ jsxs212("div", { className: clsx_default("step-item", status), children: [
@@ -28357,9 +28271,7 @@ var Switch = (props) => {
     size: size4 = "md",
     disabled,
     onChange,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
   const [isAnimating, setIsAnimating] = React27.useState(false);
@@ -28379,11 +28291,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const colorClass = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsx334(
     "div",
     {
@@ -28625,9 +28533,7 @@ var TableRow = (props) => {
   const {
     children,
     className,
-    colorNamespace = "xplat",
-    color: color2 = "black",
-    colorDepth,
+    color: color2 = "xplat-blue-500",
     type = "secondary",
     isHover,
     onClick
@@ -28640,11 +28546,7 @@ var TableRow = (props) => {
       return [...prev, ref];
     });
   };
-  const colorClass = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsx341(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx341(
     "tr",
     {
@@ -28671,16 +28573,10 @@ var Tag = (props) => {
     children,
     onClose,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "neutral",
-    colorDepth,
+    color: color2 = "xplat-neutral-500",
     className
   } = props;
-  const colorClass = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsxs214("span", { className: clsx_default("lib-xplat-tag", size4, colorClass, className), children: [
     /* @__PURE__ */ jsx342("span", { className: "tag-label", children }),
     onClose && /* @__PURE__ */ jsx342("button", { className: "tag-close", onClick: onClose, "aria-label": "\uC0AD\uC81C", children: /* @__PURE__ */ jsx342(XIcon_default, {}) })
@@ -28843,18 +28739,12 @@ import { jsx as jsx345, jsxs as jsxs216 } from "react/jsx-runtime";
 var Tooltip2 = (props) => {
   const {
     type = "primary",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
+    color: color2 = "xplat-neutral-900",
     description,
     children
   } = props;
   const iconRef = React37.useRef(null);
-  const colorClass = getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsxs216("div", { className: "lib-xplat-tooltip", children: [
     /* @__PURE__ */ jsx345("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
     /* @__PURE__ */ jsx345("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })