sh-ui-cli 0.45.2 → 0.45.3

package/data/registry/react/components/toggle/index.tailwind.tsx

@@ -5,10 +5,8 @@ import { Toggle as BaseToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import { cva, type VariantProps } from "class-variance-authority";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-1.5 border border-transparent rounded-[var(--radius)] font-medium leading-none cursor-pointer text-foreground-muted bg-transparent transition-[background-color,color,border-color] duration-[var(--duration-fast)] select-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none data-[pressed]:bg-background-muted data-[pressed]:text-foreground motion-reduce:transition-none",
   {
@@ -45,7 +43,7 @@ export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
   ({ className, variant = "ghost", size = "md", ...props }, ref) => (
     <BaseToggle
       ref={ref}
-      className={cx(toggleVariants({ variant, size }), className)}
+      className={cn(toggleVariants({ variant, size }), className)}
       {...props}
     />
   ),
@@ -78,7 +76,7 @@ export const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(
     <ToggleGroupContext.Provider value={{ variant, size }}>
       <BaseToggleGroup
         ref={ref}
-        className={cx(
+        className={cn(
           "inline-flex items-center gap-[var(--space-1)] data-[orientation=vertical]:flex-col",
           className,
         )}
@@ -102,7 +100,7 @@ export const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupIt
     return (
       <BaseToggle
         ref={ref}
-        className={cx(toggleVariants({ variant, size }), className)}
+        className={cn(toggleVariants({ variant, size }), className)}
         {...props}
       />
     );

package/data/registry/react/components/toggle/index.tsx

@@ -5,10 +5,8 @@ import { Toggle as BaseToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 /* ───────────── Toggle ───────────── */
 
 export type ToggleVariant = "outline" | "ghost";
@@ -43,7 +41,7 @@ export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
   ({ className, variant = "ghost", size = "md", ...props }, ref) => (
     <BaseToggle
       ref={ref}
-      className={cx(
+      className={cn(
         "sh-ui-toggle",
         `sh-ui-toggle--${variant}`,
         `sh-ui-toggle--${size}`,
@@ -95,7 +93,7 @@ export const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(
     <ToggleGroupContext.Provider value={{ variant, size }}>
       <BaseToggleGroup
         ref={ref}
-        className={cx("sh-ui-toggle-group", className)}
+        className={cn("sh-ui-toggle-group", className)}
         {...props}
       />
     </ToggleGroupContext.Provider>
@@ -119,7 +117,7 @@ export const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupIt
     return (
       <BaseToggle
         ref={ref}
-        className={cx(
+        className={cn(
           "sh-ui-toggle",
           `sh-ui-toggle--${variant}`,
           `sh-ui-toggle--${size}`,

package/data/registry/react/components/tooltip/index.tailwind.tsx

@@ -1,11 +1,9 @@
 import * as React from "react";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 
+import { cn } from "@SH_UI_UTILS@";
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 export const TooltipProvider = BaseTooltip.Provider;
 export const Tooltip = BaseTooltip.Root;
@@ -39,7 +37,7 @@ export const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentPro
         >
           <BaseTooltip.Popup
             ref={ref}
-            className={cx(
+            className={cn(
               "px-2.5 py-1.5 bg-foreground text-background rounded-[calc(var(--radius)-2px)] text-[length:var(--text-xs)] leading-snug max-w-xs shadow-[0_4px_12px_rgba(0,0,0,0.12)] origin-[var(--transform-origin)] outline-none transition-[opacity,transform] duration-[120ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:scale-100",
               className,
             )}

package/data/registry/react/components/tooltip/index.tsx

@@ -2,11 +2,9 @@ import * as React from "react";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /** 여러 Tooltip이 공통 delay를 공유하도록 묶는다. 앱 루트에 한 번 두는 것을 권장. */
 export const TooltipProvider = BaseTooltip.Provider;
@@ -71,7 +69,7 @@ export const TooltipContent = React.forwardRef<
       >
         <BaseTooltip.Popup
           ref={ref}
-          className={cx("sh-ui-tooltip__content", className)}
+          className={cn("sh-ui-tooltip__content", className)}
           {...props}
         >
           {showArrow && (

package/data/registry/react/lib/cn.tailwind.ts

@@ -0,0 +1,17 @@
+/**
+ * className 합성 헬퍼 (Tailwind 변종) — clsx + tailwind-merge.
+ * - falsy 값 자동 제외
+ * - 객체 형태 `{ "is-active": true }` 지원
+ * - **Tailwind utility 충돌 머지** — `cn("bg-red-500", "bg-blue-500")` → `"bg-blue-500"`
+ *   사용자가 `<Button className="bg-red-500" />` 로 default 를 깔끔히 override 가능.
+ *
+ *   cn("base", isActive && "active", { "with-icon": hasIcon }, className)
+ */
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export type { ClassValue };
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/data/registry/react/peer-versions.json

@@ -4,8 +4,10 @@
     "@base-ui/react": "^1.4.1",
     "@tanstack/react-form": "^1.29.1",
     "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "lucide-react": "^1.11.0",
     "react-hook-form": "^7.74.0",
-    "shiki": "^4.0.2"
+    "shiki": "^4.0.2",
+    "tailwind-merge": "^3.5.0"
   }
 }

package/data/registry/react/registry.json

@@ -35,7 +35,9 @@
           ]
         }
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "card": {
       "name": "card",
@@ -64,7 +66,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "input": {
       "name": "input",
@@ -93,7 +97,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "numeric-input": {
       "name": "numeric-input",
@@ -122,7 +128,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "file-upload": {
       "name": "file-upload",
@@ -151,7 +159,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "form": {
       "name": "form",
@@ -240,7 +250,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "form-yup": {
       "name": "form-yup",
@@ -292,7 +304,9 @@
       "dependencies": [
         "shiki"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "code-tabs": {
       "name": "code-tabs",
@@ -336,7 +350,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "code-editor": {
       "name": "code-editor",
@@ -374,7 +390,9 @@
         "@codemirror/lang-html",
         "@codemirror/lang-markdown"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "markdown-editor": {
       "name": "markdown-editor",
@@ -407,7 +425,8 @@
         "remark-gfm"
       ],
       "registryDependencies": [
-        "code-editor"
+        "code-editor",
+        "utils"
       ]
     },
     "rich-text-editor": {
@@ -444,7 +463,9 @@
         "@tiptap/extension-link",
         "lucide-react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "select": {
       "name": "select",
@@ -475,7 +496,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "sidebar": {
       "name": "sidebar",
@@ -507,7 +530,8 @@
         "lucide-react"
       ],
       "registryDependencies": [
-        "popover"
+        "popover",
+        "utils"
       ]
     },
     "header": {
@@ -537,7 +561,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "base": {
       "name": "base",
@@ -662,7 +688,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "color-picker": {
       "name": "color-picker",
@@ -691,7 +719,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "slider": {
       "name": "slider",
@@ -720,7 +750,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "tabs": {
       "name": "tabs",
@@ -751,7 +783,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "combobox": {
       "name": "combobox",
@@ -782,7 +816,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "popover": {
       "name": "popover",
@@ -813,7 +849,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "dialog": {
       "name": "dialog",
@@ -844,7 +882,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "dropdown-menu": {
       "name": "dropdown-menu",
@@ -875,7 +915,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "context-menu": {
       "name": "context-menu",
@@ -906,7 +948,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "menubar": {
       "name": "menubar",
@@ -938,7 +982,8 @@
         "@base-ui/react"
       ],
       "registryDependencies": [
-        "dropdown-menu"
+        "dropdown-menu",
+        "utils"
       ]
     },
     "tooltip": {
@@ -970,7 +1015,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "breadcrumb": {
       "name": "breadcrumb",
@@ -999,7 +1046,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "pagination": {
       "name": "pagination",
@@ -1028,7 +1077,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "avatar": {
       "name": "avatar",
@@ -1065,7 +1116,9 @@
           ]
         }
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "badge": {
       "name": "badge",
@@ -1101,7 +1154,9 @@
           ]
         }
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "progress": {
       "name": "progress",
@@ -1130,7 +1185,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "spinner": {
       "name": "spinner",
@@ -1166,7 +1223,9 @@
           ]
         }
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "separator": {
       "name": "separator",
@@ -1195,7 +1254,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "theme": {
       "name": "theme",
@@ -1238,7 +1299,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "radio": {
       "name": "radio",
@@ -1269,7 +1332,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "switch": {
       "name": "switch",
@@ -1306,7 +1371,9 @@
           ]
         }
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "toggle": {
       "name": "toggle",
@@ -1343,7 +1410,9 @@
           ]
         }
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "textarea": {
       "name": "textarea",
@@ -1372,7 +1441,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "toast": {
       "name": "toast",
@@ -1401,7 +1472,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "calendar": {
       "name": "calendar",
@@ -1431,7 +1504,8 @@
       ],
       "dependencies": [],
       "registryDependencies": [
-        "select"
+        "select",
+        "utils"
       ]
     },
     "date-picker": {
@@ -1464,7 +1538,8 @@
         "@base-ui/react"
       ],
       "registryDependencies": [
-        "calendar"
+        "calendar",
+        "utils"
       ]
     },
     "skeleton": {
@@ -1494,7 +1569,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "accordion": {
       "name": "accordion",
@@ -1525,7 +1602,9 @@
       "dependencies": [
         "@base-ui/react"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "carousel": {
       "name": "carousel",
@@ -1554,7 +1633,9 @@
         }
       ],
       "dependencies": [],
-      "registryDependencies": []
+      "registryDependencies": [
+        "utils"
+      ]
     },
     "form-rhf": {
       "name": "form-rhf",
@@ -1587,6 +1668,41 @@
       "registryDependencies": [
         "form"
       ]
+    },
+    "utils": {
+      "name": "utils",
+      "type": "lib",
+      "files": [
+        {
+          "src": "lib/cn.ts",
+          "dest": "{utils}",
+          "frameworks": [
+            "plain"
+          ]
+        },
+        {
+          "src": "lib/cn.tailwind.ts",
+          "dest": "{utils}",
+          "frameworks": [
+            "tailwind"
+          ]
+        }
+      ],
+      "dependencies": [
+        {
+          "name": "clsx",
+          "frameworks": [
+            "tailwind"
+          ]
+        },
+        {
+          "name": "tailwind-merge",
+          "frameworks": [
+            "tailwind"
+          ]
+        }
+      ],
+      "registryDependencies": []
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.45.2",
+  "version": "0.45.3",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {

package/src/add.mjs

@@ -84,6 +84,29 @@ function resolveDest(template, config) {
   });
 }
 
+/**
+ * registry source 안의 placeholder 를 사용자 config 값으로 치환.
+ * 현재 지원: `@SH_UI_UTILS@` → `aliases.utils` (예: `@/src/shared/lib/utils`).
+ *
+ * registry 컴포넌트는 cn 유틸을 `import { cn } from "@SH_UI_UTILS@"` 로 import 한다 —
+ * CLI 가 add 시점에 사용자 프로젝트의 alias 로 치환해 TS module resolution 이 동작.
+ *
+ * aliases.utils 가 미설정인데 placeholder 가 등장하면 친절 에러로 안내. 사용자가 매 컴포넌트
+ * 추가 후 import 깨진 것을 발견하기 전에 시점에 잡는다.
+ */
+function substitutePlaceholders(content, config, srcRel) {
+  const PLACEHOLDER = "@SH_UI_UTILS@";
+  if (!content.includes(PLACEHOLDER)) return content;
+  const alias = config.aliases?.utils;
+  if (!alias) {
+    throw new Error(
+      `${srcRel} 가 cn 유틸을 import 합니다. sh-ui.config.json 에 aliases.utils 를 설정하세요.\n` +
+        `  예: "aliases": { "utils": "@/src/lib/utils" }`,
+    );
+  }
+  return content.replaceAll(PLACEHOLDER, alias);
+}
+
 async function ensureDir(filePath) {
   await mkdir(dirname(filePath), { recursive: true });
 }
@@ -223,7 +246,8 @@ async function addComponent(name, config, cwd, installed, pendingDeps, diffMode,
     if (!frameworkMatches(file, cssFramework)) continue;
     const src = resolve(registryRoot, file.src);
     const dest = resolve(cwd, resolveDest(file.dest, config));
-    const content = await readFile(src, "utf8");
+    const raw = await readFile(src, "utf8");
+    const content = substitutePlaceholders(raw, config, file.src);
     const result = await writeOrDiff({ dest, content, cwd, diffMode, summary, conflictResolver });
     if (!diffMode && result !== "unchanged") {
       const prefix = result === "kept" ? "↷" : "✓";