@x-plat/design-system 0.1.5 → 0.2.0

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.cjs';
+import { a as ColorNamespace, b as ColorName, e as ColorProps } from '../../colors-DmMsWD7G.cjs';
 
 type SwitchSize = "sm" | "md" | "lg";
 interface SwitchProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
@@ -10,123 +10,7 @@ interface SwitchProps<N extends ColorNamespace, C extends ColorName<N> = ColorNa
     onChange?: (value: boolean) => void;
 }
 declare const Switch: {
-    <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: SwitchProps<N, C>): react_jsx_runtime.JSX.Element;
+    <N extends ColorNamespace = "xplat", C extends ColorName<N> = ColorName<N>>(props: SwitchProps<N, C>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.js';
+import { a as ColorNamespace, b as ColorName, e as ColorProps } from '../../colors-DmMsWD7G.js';
 
 type SwitchSize = "sm" | "md" | "lg";
 interface SwitchProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
@@ -10,123 +10,7 @@ interface SwitchProps<N extends ColorNamespace, C extends ColorName<N> = ColorNa
     onChange?: (value: boolean) => void;
 }
 declare const Switch: {
-    <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: SwitchProps<N, C>): react_jsx_runtime.JSX.Element;
+    <N extends ColorNamespace = "xplat", C extends ColorName<N> = ColorName<N>>(props: SwitchProps<N, C>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/components/Switch/index.js

@@ -128,7 +128,7 @@ var getColorClass = (namespace, palette, shade) => {
   return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
 };
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/components/Tab/index.cjs

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(Tab_exports);
 // src/components/Tab/Tab.tsx
 var import_react2 = __toESM(require("react"), 1);
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -74,7 +74,7 @@ var TabItem_default = TabItem;
 // src/components/Tab/Tab.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Tab = (props) => {
-  const { activeIndex, onChange, tabs, type } = props;
+  const { activeIndex, onChange, tabs, type, size = "md" } = props;
   const [underlineStyle, setUnderlineStyle] = import_react2.default.useState({
     left: 0,
     width: 0
@@ -89,7 +89,7 @@ var Tab = (props) => {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
     tabs.map((tab, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       TabItem_default,
       {

package/dist/components/Tab/index.css

@@ -3,12 +3,23 @@
   position: relative;
   display: flex;
   width: fit-content;
-  height: 2.5rem;
   overflow: hidden;
   align-items: center;
 }
+.lib-xplat-tab.sm {
+  height: 2rem;
+  font-size: 14px;
+}
+.lib-xplat-tab.md {
+  height: 2.5rem;
+  font-size: 16px;
+}
+.lib-xplat-tab.lg {
+  height: 3rem;
+  font-size: 18px;
+}
 .lib-xplat-tab.type-default {
-  background-color: #737373;
+  background-color: var(--xplat-neutral-500);
   border-radius: 0.5rem;
 }
 .lib-xplat-tab.type-default > .tab-item {
@@ -17,17 +28,17 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  border-right: 1px solid #A1A1A1;
-  color: #FFFFFF;
+  border-right: 1px solid var(--xplat-neutral-400);
+  color: var(--xplat-white);
 }
 .lib-xplat-tab.type-default > .tab-item:last-child {
   border-right: none;
 }
 .lib-xplat-tab.type-default > .tab-item.active {
-  background-color: #4D6DE3;
+  background-color: var(--xplat-blue-500);
 }
 .lib-xplat-tab.type-toggle {
-  border-bottom: 1px solid #E5E5E5;
+  border-bottom: 1px solid var(--xplat-neutral-200);
   gap: 1.5rem;
 }
 .lib-xplat-tab.type-toggle > .tab-item {
@@ -42,10 +53,10 @@
   border: none;
   cursor: pointer;
   transition: color 0.2s;
-  color: #737373;
+  color: var(--xplat-neutral-500);
 }
 .lib-xplat-tab.type-toggle > .tab-item.active {
-  color: #3950D7;
+  color: var(--xplat-blue-600);
 }
 .lib-xplat-tab.type-toggle > .tab-toggle-underline {
   position: absolute;
@@ -53,7 +64,7 @@
   right: 0;
   bottom: -1px;
   height: 2px;
-  background-color: #3950D7;
+  background-color: var(--xplat-blue-600);
   transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
   will-change: left, width;
 }

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

@@ -4,11 +4,13 @@ interface TabItemType {
     value: string | number;
     title: string;
 }
+type TabSize = "sm" | "md" | "lg";
 interface TabProps {
     activeIndex: number;
     tabs: TabItemType[];
     onChange: (value: TabItemType, index: number) => void;
     type: "default" | "toggle";
+    size?: TabSize;
 }
 declare const Tab: {
     (props: TabProps): react_jsx_runtime.JSX.Element;

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

@@ -4,11 +4,13 @@ interface TabItemType {
     value: string | number;
     title: string;
 }
+type TabSize = "sm" | "md" | "lg";
 interface TabProps {
     activeIndex: number;
     tabs: TabItemType[];
     onChange: (value: TabItemType, index: number) => void;
     type: "default" | "toggle";
+    size?: TabSize;
 }
 declare const Tab: {
     (props: TabProps): react_jsx_runtime.JSX.Element;

package/dist/components/Tab/index.js

@@ -1,7 +1,7 @@
 // src/components/Tab/Tab.tsx
 import React2 from "react";
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -38,7 +38,7 @@ var TabItem_default = TabItem;
 // src/components/Tab/Tab.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Tab = (props) => {
-  const { activeIndex, onChange, tabs, type } = props;
+  const { activeIndex, onChange, tabs, type, size = "md" } = props;
   const [underlineStyle, setUnderlineStyle] = React2.useState({
     left: 0,
     width: 0
@@ -53,7 +53,7 @@ var Tab = (props) => {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
     }
   }, [activeIndex, tabs.length]);
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-tab", `type-${type}`), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-tab", `type-${type}`, size), children: [
     tabs.map((tab, idx) => /* @__PURE__ */ jsx2(
       TabItem_default,
       {

package/dist/components/Table/index.cjs

@@ -38,7 +38,7 @@ __export(Table_exports, {
 });
 module.exports = __toCommonJS(Table_exports);
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;