@x-plat/design-system 0.2.4 → 0.3.0

package/dist/index.js

@@ -5596,11 +5596,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) => {
@@ -5609,17 +5604,10 @@ var Avatar = (props) => {
     alt,
     name,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? 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" }) }) }) });
 };
@@ -5635,17 +5623,10 @@ var Badge = (props) => {
     maxCount = 99,
     dot = false,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "red",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-red-500",
     className
   } = props;
-  const colorClass = colorToken ?? 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: [
@@ -5678,19 +5659,12 @@ var Button = (props) => {
     children,
     type = "primary",
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "black",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-black",
     disabled,
     className,
     ...rest
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsx300(
     "button",
     {
@@ -20321,10 +20295,7 @@ var gridColumns = {
 import { jsx as jsx306, jsxs as jsxs195 } from "react/jsx-runtime";
 var CheckBox = (props) => {
   const {
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     checked,
     label,
     onChange,
@@ -20336,11 +20307,7 @@ var CheckBox = (props) => {
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
-  const mainColor = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const mainColor = color2;
   const uncheckedClasses = `unchecked`;
   const checkedClasses = `checked ${mainColor}`;
   const disabledClasses = "disabled";
@@ -20368,19 +20335,12 @@ import { jsx as jsx307 } from "react/jsx-runtime";
 var Chip = (props) => {
   const {
     children,
-    colorNamespace = "xplat",
-    color: color2 = "black",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-black",
     type = "primary",
     size: size4 = "md",
     className
   } = props;
-  const colorClass = colorToken ?? 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";
@@ -31374,19 +31334,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;
@@ -31394,16 +31346,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,
         {
@@ -31461,13 +31408,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" })
       ] })
     ] }) })
   ] });
@@ -31497,19 +31443,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" }),
@@ -31521,7 +31460,7 @@ var RangePicker = (props) => {
           minDate,
           maxDate: endDate,
           highlightDates: rangeDates,
-          ...colorProps
+          color: color2
         }
       )
     ] }),
@@ -31535,7 +31474,7 @@ var RangePicker = (props) => {
           minDate: startDate,
           maxDate,
           highlightDates: rangeDates,
-          ...colorProps
+          color: color2
         }
       )
     ] })
@@ -32247,17 +32186,10 @@ var Pagination = (props) => {
     siblingCount = 1,
     onChange,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? 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) => {
@@ -32367,17 +32299,10 @@ var Progress = (props) => {
     max: max3 = 100,
     size: size4 = "md",
     showLabel = false,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? 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(
@@ -32423,10 +32348,7 @@ var Radio = (props) => {
     label,
     value,
     className,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     size: sizeProp,
     ...rest
   } = props;
@@ -32439,11 +32361,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsxs210(
     "label",
     {
@@ -32508,17 +32426,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,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsx332(
     "div",
     {
@@ -32560,17 +32471,10 @@ var Steps = (props) => {
   const {
     items,
     current,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
-  const colorClass = colorToken ?? 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: [
@@ -32598,10 +32502,7 @@ var Switch = (props) => {
     size: size4 = "md",
     disabled,
     onChange,
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     className
   } = props;
   const [isAnimating, setIsAnimating] = React27.useState(false);
@@ -32621,11 +32522,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsx334(
     "div",
     {
@@ -32867,10 +32764,7 @@ var TableRow = (props) => {
   const {
     children,
     className,
-    colorNamespace = "xplat",
-    color: color2 = "black",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-blue-500",
     type = "secondary",
     isHover,
     onClick
@@ -32883,11 +32777,7 @@ var TableRow = (props) => {
       return [...prev, ref];
     });
   };
-  const colorClass = colorToken ?? getColorClass(
-    colorNamespace,
-    color2,
-    colorDepth ?? 500
-  );
+  const colorClass = color2;
   return /* @__PURE__ */ jsx341(TableRowContext_default.Provider, { value: { stickyCells, registerStickyCell }, children: /* @__PURE__ */ jsx341(
     "tr",
     {
@@ -32914,17 +32804,10 @@ var Tag = (props) => {
     children,
     onClose,
     size: size4 = "md",
-    colorNamespace = "xplat",
-    color: color2 = "neutral",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-neutral-500",
     className
   } = props;
-  const colorClass = colorToken ?? 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, {}) })
@@ -33087,19 +32970,12 @@ import { jsx as jsx345, jsxs as jsxs216 } from "react/jsx-runtime";
 var Tooltip2 = (props) => {
   const {
     type = "primary",
-    colorNamespace = "xplat",
-    color: color2 = "blue",
-    colorDepth,
-    colorToken,
+    color: color2 = "xplat-neutral-900",
     description,
     children
   } = props;
   const iconRef = React37.useRef(null);
-  const colorClass = colorToken ?? 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 })

package/dist/tokens/index.d.cts

@@ -1,5 +1,5 @@
 export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.cjs';
-export { e as ColorDepth, d as ColorName, b as ColorNamespace, g as ColorProps, f as ColorToken, C as CustomColors, a as CustomNamespaces, c as colors } from '../colors-cxE7RsuF.cjs';
+export { e as ColorDepth, d as ColorName, b as ColorNamespace, g as ColorProps, f as ColorToken, C as CustomColors, a as CustomNamespaces, c as colors } from '../colors-BgzpjYfN.cjs';
 import React from 'react';
 
 declare const CopyIcon: React.FC;

package/dist/tokens/index.d.ts

@@ -1,5 +1,5 @@
 export { B as BREAKPOINT_KEYS_ORDERED, a as BreakpointKey, b as GridColumnConfig, G as GridSpanFor, c as breakpoints, g as gridColumns } from '../breakpoints-DsXkJgdl.js';
-export { e as ColorDepth, d as ColorName, b as ColorNamespace, g as ColorProps, f as ColorToken, C as CustomColors, a as CustomNamespaces, c as colors } from '../colors-cxE7RsuF.js';
+export { e as ColorDepth, d as ColorName, b as ColorNamespace, g as ColorProps, f as ColorToken, C as CustomColors, a as CustomNamespaces, c as colors } from '../colors-BgzpjYfN.js';
 import React from 'react';
 
 declare const CopyIcon: React.FC;

package/package.json

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