@x-plat/design-system 0.2.2 → 0.2.4

package/dist/components/index.js

@@ -1378,131 +1378,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
@@ -1516,9 +1394,10 @@ var Avatar = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -1541,9 +1420,10 @@ var Badge = (props) => {
     colorNamespace = "xplat",
     color: color2 = "red",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -1583,11 +1463,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
@@ -1688,6 +1569,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;
@@ -16093,6 +16093,7 @@ var CheckBox = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     checked,
     label,
     onChange,
@@ -16104,7 +16105,7 @@ var CheckBox = (props) => {
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
-  const mainColor = getColorClass(
+  const mainColor = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -16139,11 +16140,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
@@ -28017,9 +28019,10 @@ var Pagination = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28136,9 +28139,10 @@ var Progress = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28191,6 +28195,7 @@ var Radio = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     size: sizeProp,
     ...rest
   } = props;
@@ -28203,7 +28208,7 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28275,9 +28280,10 @@ var Spinner = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28326,9 +28332,10 @@ var Steps = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28363,6 +28370,7 @@ var Switch = (props) => {
     colorNamespace = "xplat",
     color: color2 = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
   const [isAnimating, setIsAnimating] = React27.useState(false);
@@ -28382,7 +28390,7 @@ var Switch = (props) => {
       timeoutRef.current = null;
     }, KNOB_TRANSITION_MS);
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28631,6 +28639,7 @@ var TableRow = (props) => {
     colorNamespace = "xplat",
     color: color2 = "black",
     colorDepth,
+    colorToken,
     type = "secondary",
     isHover,
     onClick
@@ -28643,7 +28652,7 @@ var TableRow = (props) => {
       return [...prev, ref];
     });
   };
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28677,9 +28686,10 @@ var Tag = (props) => {
     colorNamespace = "xplat",
     color: color2 = "neutral",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color2,
     colorDepth ?? 500
@@ -28849,11 +28859,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