@x-plat/design-system 0.2.2 → 0.2.4

package/dist/index.js

@@ -5596,131 +5596,9 @@ var Alert = (props) => {
 Alert.displayName = "Alert";
 var Alert_default = Alert;
 
-// src/tokens/colors.ts
-var colors = {
-  xplat: {
-    red: {
-      50: "#FFF0F0",
-      100: "#FFDDDE",
-      200: "#FFC1C2",
-      300: "#FF9698",
-      400: "#FF5A5D",
-      500: "#FF272B",
-      600: "#F80409",
-      700: "#D40105",
-      800: "#AE0609",
-      900: "#900C0F"
-    },
-    green: {
-      50: "#E5F6EA",
-      100: "#C1E7CC",
-      200: "#98D8AC",
-      300: "#6CCA8B",
-      400: "#47BE72",
-      500: "#10B259",
-      600: "#00A34F",
-      700: "#009143",
-      800: "#007F38",
-      900: "#006024"
-    },
-    orange: {
-      50: "#FFF8EC",
-      100: "#FFF0D3",
-      200: "#FFDDA5",
-      300: "#FFC46D",
-      400: "#FF9F32",
-      500: "#FF820A",
-      600: "#FF6900",
-      700: "#CC4B02",
-      800: "#A13A0B",
-      900: "#82320C"
-    },
-    yellow: {
-      50: "#FFFDE7",
-      100: "#FFFAC1",
-      200: "#FFF186",
-      300: "#FFE041",
-      400: "#FFCC0D",
-      500: "#F0B100",
-      600: "#D18800",
-      700: "#A66002",
-      800: "#894B0A",
-      900: "#743D0F"
-    },
-    blue: {
-      50: "#F1F4FD",
-      100: "#DFE7FA",
-      200: "#C5D4F8",
-      300: "#9EB8F2",
-      400: "#7093EA",
-      500: "#4D6DE3",
-      600: "#3950D7",
-      700: "#303EC5",
-      800: "#2D35A0",
-      900: "#29317F"
-    },
-    lightblue: {
-      50: "#EEFAFF",
-      100: "#D9F4FF",
-      200: "#BBEDFF",
-      300: "#8DE3FF",
-      400: "#57D0FF",
-      500: "#30B6FF",
-      600: "#1999F7",
-      700: "#1280E3",
-      800: "#1566B8",
-      900: "#175791"
-    },
-    purple: {
-      50: "#FBF6FE",
-      100: "#F5EAFD",
-      200: "#EDD8FC",
-      300: "#E0BAF8",
-      400: "#CD8DF3",
-      500: "#B961EB",
-      600: "#A541DC",
-      700: "#9230C5",
-      800: "#782B9E",
-      900: "#62247F"
-    },
-    pink: {
-      50: "#FFF4FE",
-      100: "#FFE7FD",
-      200: "#FFCFFA",
-      300: "#FEA9F1",
-      400: "#FD75E7",
-      500: "#F553DA",
-      600: "#D821B6",
-      700: "#B31892",
-      800: "#921676",
-      900: "#781761"
-    },
-    neutral: {
-      50: "#FAFAFA",
-      100: "#F5F5F5",
-      200: "#E5E5E5",
-      300: "#D4D4D4",
-      400: "#A1A1A1",
-      500: "#737373",
-      600: "#525252",
-      700: "#404040",
-      800: "#262626",
-      900: "#171717"
-    },
-    black: "#000000",
-    white: "#FFFFFF"
-  },
-  test: {
-    default: "#ffffff"
-  }
-};
-
 // src/util/getColor.ts
 var getColorClass = (namespace, palette, shade) => {
-  const namespaceMap = colors[namespace];
-  const paletteMap = namespaceMap[palette];
-  const hasShade = paletteMap && typeof paletteMap === "object" && shade !== void 0 && shade in paletteMap;
-  return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
+  return `${String(namespace)}-${String(palette)}${shade !== void 0 ? `-${String(shade)}` : ""}`;
 };
 
 // src/components/Avatar/Avatar.tsx
@@ -5734,9 +5612,10 @@ var Avatar = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -5759,9 +5638,10 @@ var Badge = (props) => {
     colorNamespace = "xplat",
     color: color2 = "red",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -5801,11 +5681,12 @@ var Button = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     disabled,
     className,
     ...rest
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -5906,6 +5787,125 @@ var CardTab_default = CardTab;
 // src/components/Chart/Chart.tsx
 import React3 from "react";
 
+// src/tokens/colors.ts
+var colors = {
+  xplat: {
+    red: {
+      50: "#FFF0F0",
+      100: "#FFDDDE",
+      200: "#FFC1C2",
+      300: "#FF9698",
+      400: "#FF5A5D",
+      500: "#FF272B",
+      600: "#F80409",
+      700: "#D40105",
+      800: "#AE0609",
+      900: "#900C0F"
+    },
+    green: {
+      50: "#E5F6EA",
+      100: "#C1E7CC",
+      200: "#98D8AC",
+      300: "#6CCA8B",
+      400: "#47BE72",
+      500: "#10B259",
+      600: "#00A34F",
+      700: "#009143",
+      800: "#007F38",
+      900: "#006024"
+    },
+    orange: {
+      50: "#FFF8EC",
+      100: "#FFF0D3",
+      200: "#FFDDA5",
+      300: "#FFC46D",
+      400: "#FF9F32",
+      500: "#FF820A",
+      600: "#FF6900",
+      700: "#CC4B02",
+      800: "#A13A0B",
+      900: "#82320C"
+    },
+    yellow: {
+      50: "#FFFDE7",
+      100: "#FFFAC1",
+      200: "#FFF186",
+      300: "#FFE041",
+      400: "#FFCC0D",
+      500: "#F0B100",
+      600: "#D18800",
+      700: "#A66002",
+      800: "#894B0A",
+      900: "#743D0F"
+    },
+    blue: {
+      50: "#F1F4FD",
+      100: "#DFE7FA",
+      200: "#C5D4F8",
+      300: "#9EB8F2",
+      400: "#7093EA",
+      500: "#4D6DE3",
+      600: "#3950D7",
+      700: "#303EC5",
+      800: "#2D35A0",
+      900: "#29317F"
+    },
+    lightblue: {
+      50: "#EEFAFF",
+      100: "#D9F4FF",
+      200: "#BBEDFF",
+      300: "#8DE3FF",
+      400: "#57D0FF",
+      500: "#30B6FF",
+      600: "#1999F7",
+      700: "#1280E3",
+      800: "#1566B8",
+      900: "#175791"
+    },
+    purple: {
+      50: "#FBF6FE",
+      100: "#F5EAFD",
+      200: "#EDD8FC",
+      300: "#E0BAF8",
+      400: "#CD8DF3",
+      500: "#B961EB",
+      600: "#A541DC",
+      700: "#9230C5",
+      800: "#782B9E",
+      900: "#62247F"
+    },
+    pink: {
+      50: "#FFF4FE",
+      100: "#FFE7FD",
+      200: "#FFCFFA",
+      300: "#FEA9F1",
+      400: "#FD75E7",
+      500: "#F553DA",
+      600: "#D821B6",
+      700: "#B31892",
+      800: "#921676",
+      900: "#781761"
+    },
+    neutral: {
+      50: "#FAFAFA",
+      100: "#F5F5F5",
+      200: "#E5E5E5",
+      300: "#D4D4D4",
+      400: "#A1A1A1",
+      500: "#737373",
+      600: "#525252",
+      700: "#404040",
+      800: "#262626",
+      900: "#171717"
+    },
+    black: "#000000",
+    white: "#FFFFFF"
+  },
+  test: {
+    default: "#ffffff"
+  }
+};
+
 // ../../node_modules/@kurkle/color/dist/color.esm.js
 function round(v) {
   return v + 0.5 | 0;
@@ -20324,6 +20324,7 @@ var CheckBox = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     checked,
     label,
     onChange,
@@ -20335,7 +20336,7 @@ var CheckBox = (props) => {
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
-  const mainColor = getColorClass(
+  const mainColor = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -20370,11 +20371,12 @@ var Chip = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     type = "primary",
     size: size4 = "md",
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32248,9 +32250,10 @@ var Pagination = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32367,9 +32370,10 @@ var Progress = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32422,6 +32426,7 @@ var Radio = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     size: sizeProp,
     ...rest
   } = props;
@@ -32434,7 +32439,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32506,9 +32511,10 @@ var Spinner = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32557,9 +32563,10 @@ var Steps = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32594,6 +32601,7 @@ var Switch = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
   const [isAnimating, setIsAnimating] = React27.useState(false);
@@ -32613,7 +32621,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32862,6 +32870,7 @@ var TableRow = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     type = "secondary",
     isHover,
     onClick
@@ -32874,7 +32883,7 @@ var TableRow = (props) => {
       return [...prev, ref];
     });
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -32908,9 +32917,10 @@ var Tag = (props) => {
     colorNamespace = "xplat",
     color: color2 = "neutral",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -33080,11 +33090,12 @@ var Tooltip2 = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     description,
     children
   } = props;
   const iconRef = React37.useRef(null);
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500

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 { d as ColorDepth, b as ColorName, a as ColorNamespace, e as ColorProps, C as CustomColors, c as colors } from '../colors-DmMsWD7G.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';
 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 { d as ColorDepth, b as ColorName, a as ColorNamespace, e as ColorProps, C as CustomColors, c as colors } from '../colors-DmMsWD7G.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';
 import React from 'react';
 
 declare const CopyIcon: React.FC;

package/package.json

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