feat: cn develop

packages/xds/package.json

@@ -480,7 +480,8 @@
     "generate:component": "turbo gen react-component",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "serve-storybook": "npx serve storybook-static"
+    "serve-storybook": "npx serve storybook-static",
+    "test": "vitest"
   },
   "publishConfig": {
     "access": "public"
@@ -547,7 +548,7 @@
     "class-variance-authority": "catalog:",
     "clsx": "catalog:",
     "sonner": "^1.5.0",
-    "tailwind-merge": "1.14.0",
+    "tailwind-merge": "2.6.0",
     "vaul": "^0.9.1"
   },
   "peerDependencies": {

packages/xds/src/cn.test.ts

@@ -0,0 +1,12 @@
+import { cn } from "./cn";
+
+describe("Cn를 테스트합니다.", () => {
+  it("Cn는", () => {
+    const result = cn(" text-primary-50 text-primary-100 ");
+    expect(result).toBe("text-primary-100");
+  });
+  it("Cn는", () => {
+    const result = cn(" text-primary-50 text-primary-100  text-size-5");
+    expect(result).toBe("text-primary-100 text-size-5");
+  });
+});

packages/xds/src/cn.ts

@@ -1,11 +1,19 @@
 import { type ClassValue, clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 
-import { XION_STYLE } from "@xionwcfm/token";
+import { vars } from "@xionwcfm/token";
 
 const customTwMerge = extendTailwindMerge({
-  classGroups: {
-    "font-size": [{ text: Object.keys(XION_STYLE.fontSize) }],
+  extend: {
+    theme: {
+      colors: Object.entries(vars.colors).map(([key, value]) => {
+        const childKeys = typeof value === "object" ? Object.keys(value) : [value];
+        return { [key]: childKeys };
+      }),
+    },
+    classGroups: {
+      "font-size": Object.keys(vars.fontSize).map((item) => `text-${item}`),
+    },
   },
 });