@x-plat/design-system 0.2.2 → 0.2.4

package/dist/{colors-DmMsWD7G.d.cts → colors-cxE7RsuF.d.cts}

@@ -128,22 +128,39 @@ declare const colors: {
  * @example
  * // @x-plat/tokens-cbio/types.d.ts
  * declare module "@x-plat/design-system" {
+ *   interface CustomNamespaces {
+ *     cbio: {
+ *       green: { 500: string; 600: string };
+ *       primitive: { 500: string };
+ *     };
+ *   }
  *   interface CustomColors {
- *     primitive: { 500: string; 600: string };
+ *     textColor: { 500: string };
  *   }
  * }
  */
 interface CustomColors {
 }
+interface CustomNamespaces {
+}
 type DefaultColors = typeof colors;
-type MergedNamespaceColors<N extends keyof DefaultColors> = DefaultColors[N] & (N extends "xplat" ? CustomColors : {});
-type ColorNamespace = keyof DefaultColors;
+type AllNamespaces = DefaultColors & CustomNamespaces;
+type MergedNamespaceColors<N extends keyof AllNamespaces> = N extends keyof DefaultColors ? N extends keyof CustomNamespaces ? DefaultColors[N] & CustomNamespaces[N] & (N extends "xplat" ? CustomColors : {}) : DefaultColors[N] & (N extends "xplat" ? CustomColors : {}) : N extends keyof CustomNamespaces ? CustomNamespaces[N] : {};
+type ColorNamespace = keyof AllNamespaces;
 type ColorName<C extends ColorNamespace> = keyof MergedNamespaceColors<C>;
 type ColorDepth<C extends ColorNamespace, K extends ColorName<C>> = K extends keyof MergedNamespaceColors<C> ? MergedNamespaceColors<C>[K] extends string ? undefined : keyof MergedNamespaceColors<C>[K] : undefined;
+type BuildTokenStrings<N extends ColorNamespace> = {
+    [C in ColorName<N>]: ColorDepth<N, C> extends undefined ? `${N & string}-${C & string}` : `${N & string}-${C & string}-${ColorDepth<N, C> & (string | number)}`;
+}[ColorName<N>];
+type ColorToken = {
+    [N in ColorNamespace]: BuildTokenStrings<N>;
+}[ColorNamespace];
 interface ColorProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> {
+    /** 축약형: "xplat-blue-500" 형태로 한번에 지정 */
+    colorToken?: ColorToken;
     colorNamespace?: N;
     color?: C;
     colorDepth?: ColorDepth<N, C>;
 }
 
-export { type CustomColors as C, type ColorNamespace as a, type ColorName as b, colors as c, type ColorDepth as d, type ColorProps as e };
+export { type CustomColors as C, type CustomNamespaces as a, type ColorNamespace as b, colors as c, type ColorName as d, type ColorDepth as e, type ColorToken as f, type ColorProps as g };

package/dist/{colors-DmMsWD7G.d.ts → colors-cxE7RsuF.d.ts}

@@ -128,22 +128,39 @@ declare const colors: {
  * @example
  * // @x-plat/tokens-cbio/types.d.ts
  * declare module "@x-plat/design-system" {
+ *   interface CustomNamespaces {
+ *     cbio: {
+ *       green: { 500: string; 600: string };
+ *       primitive: { 500: string };
+ *     };
+ *   }
  *   interface CustomColors {
- *     primitive: { 500: string; 600: string };
+ *     textColor: { 500: string };
  *   }
  * }
  */
 interface CustomColors {
 }
+interface CustomNamespaces {
+}
 type DefaultColors = typeof colors;
-type MergedNamespaceColors<N extends keyof DefaultColors> = DefaultColors[N] & (N extends "xplat" ? CustomColors : {});
-type ColorNamespace = keyof DefaultColors;
+type AllNamespaces = DefaultColors & CustomNamespaces;
+type MergedNamespaceColors<N extends keyof AllNamespaces> = N extends keyof DefaultColors ? N extends keyof CustomNamespaces ? DefaultColors[N] & CustomNamespaces[N] & (N extends "xplat" ? CustomColors : {}) : DefaultColors[N] & (N extends "xplat" ? CustomColors : {}) : N extends keyof CustomNamespaces ? CustomNamespaces[N] : {};
+type ColorNamespace = keyof AllNamespaces;
 type ColorName<C extends ColorNamespace> = keyof MergedNamespaceColors<C>;
 type ColorDepth<C extends ColorNamespace, K extends ColorName<C>> = K extends keyof MergedNamespaceColors<C> ? MergedNamespaceColors<C>[K] extends string ? undefined : keyof MergedNamespaceColors<C>[K] : undefined;
+type BuildTokenStrings<N extends ColorNamespace> = {
+    [C in ColorName<N>]: ColorDepth<N, C> extends undefined ? `${N & string}-${C & string}` : `${N & string}-${C & string}-${ColorDepth<N, C> & (string | number)}`;
+}[ColorName<N>];
+type ColorToken = {
+    [N in ColorNamespace]: BuildTokenStrings<N>;
+}[ColorNamespace];
 interface ColorProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> {
+    /** 축약형: "xplat-blue-500" 형태로 한번에 지정 */
+    colorToken?: ColorToken;
     colorNamespace?: N;
     color?: C;
     colorDepth?: ColorDepth<N, C>;
 }
 
-export { type CustomColors as C, type ColorNamespace as a, type ColorName as b, colors as c, type ColorDepth as d, type ColorProps as e };
+export { type CustomColors as C, type CustomNamespaces as a, type ColorNamespace as b, colors as c, type ColorName as d, type ColorDepth as e, type ColorToken as f, type ColorProps as g };

package/dist/components/Avatar/index.cjs

@@ -24,131 +24,9 @@ __export(Avatar_exports, {
 });
 module.exports = __toCommonJS(Avatar_exports);
 
-// 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)}` : ""}`;
 };
 
 // ../../node_modules/clsx/dist/clsx.mjs
@@ -178,9 +56,10 @@ var Avatar = (props) => {
     colorNamespace = "xplat",
     color = "blue",
     colorDepth,
+    colorToken,
     className
   } = props;
-  const colorClass = getColorClass(
+  const colorClass = colorToken ?? getColorClass(
     colorNamespace,
     color,
     colorDepth ?? 500

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorNamespace, b as ColorName, e as ColorProps } from '../../colors-DmMsWD7G.cjs';
+import { b as ColorNamespace, d as ColorName, a as CustomNamespaces, C as CustomColors, g as ColorProps } from '../../colors-cxE7RsuF.cjs';
 
 type AvatarSize = "sm" | "md" | "lg";
 interface AvatarProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
@@ -10,7 +10,239 @@ interface AvatarProps<N extends ColorNamespace, C extends ColorName<N> = ColorNa
     className?: string;
 }
 declare const Avatar: {
-    <N extends ColorNamespace = "xplat", C extends ColorName<N> = ColorName<N>>(props: AvatarProps<N, C>): react_jsx_runtime.JSX.Element;
+    <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof (N extends "xplat" | "test" ? N extends never ? {
+        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] & CustomNamespaces[N] & (N extends "xplat" ? CustomColors : {}) : {
+        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] & (N extends "xplat" ? CustomColors : {}) : N extends never ? CustomNamespaces[N] : {})>(props: AvatarProps<N, C>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };