sh-ui-cli 0.45.2 → 0.45.3

package/data/registry/react/components/dropdown-menu/index.tsx

@@ -4,11 +4,9 @@ import * as React from "react";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 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(" ");
-}
 
 /* ───────── Root ───────── */
 
@@ -23,7 +21,7 @@ export const DropdownMenuTrigger = React.forwardRef<
   return (
     <BaseMenu.Trigger
       ref={ref}
-      className={cx("sh-ui-dm__trigger", className)}
+      className={cn("sh-ui-dm__trigger", className)}
       {...props}
     />
   );
@@ -63,7 +61,7 @@ export const DropdownMenuContent = React.forwardRef<
       >
         <BaseMenu.Popup
           ref={ref}
-          className={cx("sh-ui-dm__content", className)}
+          className={cn("sh-ui-dm__content", className)}
           {...props}
         >
           {children}
@@ -82,7 +80,7 @@ export const DropdownMenuItem = React.forwardRef<
   return (
     <BaseMenu.Item
       ref={ref}
-      className={cx("sh-ui-dm__item", className)}
+      className={cn("sh-ui-dm__item", className)}
       {...props}
     />
   );
@@ -102,7 +100,7 @@ export const DropdownMenuCheckboxItem = React.forwardRef<
   return (
     <BaseMenu.CheckboxItem
       ref={ref}
-      className={cx("sh-ui-dm__item", "sh-ui-dm__item--check", className)}
+      className={cn("sh-ui-dm__item", "sh-ui-dm__item--check", className)}
       {...props}
     >
       <span className="sh-ui-dm__item-indicator" aria-hidden>
@@ -131,7 +129,7 @@ export const DropdownMenuRadioItem = React.forwardRef<
   return (
     <BaseMenu.RadioItem
       ref={ref}
-      className={cx("sh-ui-dm__item", "sh-ui-dm__item--check", className)}
+      className={cn("sh-ui-dm__item", "sh-ui-dm__item--check", className)}
       {...props}
     >
       <span className="sh-ui-dm__item-indicator" aria-hidden>
@@ -153,7 +151,7 @@ export const DropdownMenuGroup = React.forwardRef<
   return (
     <BaseMenu.Group
       ref={ref}
-      className={cx("sh-ui-dm__group", className)}
+      className={cn("sh-ui-dm__group", className)}
       {...props}
     />
   );
@@ -166,7 +164,7 @@ export const DropdownMenuLabel = React.forwardRef<
   return (
     <BaseMenu.GroupLabel
       ref={ref}
-      className={cx("sh-ui-dm__label", className)}
+      className={cn("sh-ui-dm__label", className)}
       {...props}
     />
   );
@@ -185,7 +183,7 @@ export const DropdownMenuSeparator = React.forwardRef<
       ref={ref}
       role="separator"
       aria-orientation="horizontal"
-      className={cx("sh-ui-dm__separator", className)}
+      className={cn("sh-ui-dm__separator", className)}
       {...props}
     />
   );
@@ -204,7 +202,7 @@ export const DropdownMenuSubTrigger = React.forwardRef<
   return (
     <BaseMenu.SubmenuTrigger
       ref={ref}
-      className={cx("sh-ui-dm__item", "sh-ui-dm__sub-trigger", className)}
+      className={cn("sh-ui-dm__item", "sh-ui-dm__sub-trigger", className)}
       {...props}
     >
       <span className="sh-ui-dm__item-text">{children}</span>

package/data/registry/react/components/file-upload/index.tailwind.tsx

@@ -2,10 +2,8 @@
 
 import * as React from "react";
 
-function cx(...args: (string | false | undefined)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 function formatBytes(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -100,7 +98,7 @@ export const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
 
     return (
       <FileUploadContext.Provider value={ctx}>
-        <div className={cx("flex flex-col gap-[var(--space-3)]", className)} style={style}>
+        <div className={cn("flex flex-col gap-[var(--space-3)]", className)} style={style}>
           <input
             ref={inputRef}
             id={id}
@@ -154,7 +152,7 @@ export const FileUploadDropzone = React.forwardRef<HTMLDivElement, FileUploadDro
         tabIndex={disabled ? -1 : 0}
         aria-disabled={disabled || undefined}
         data-dragging={dragging || undefined}
-        className={cx(
+        className={cn(
           "relative flex flex-col items-center justify-center gap-[var(--space-2)] py-[var(--space-8)] px-[var(--space-6)] min-h-40 bg-background-subtle text-foreground-muted border-[1.5px] border-dashed border-border rounded-[var(--radius)] cursor-pointer text-center transition-[border-color,background-color,color] duration-[var(--duration-fast)] hover:border-border-strong hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 focus-visible:border-foreground motion-reduce:transition-none",
           dragging && "border-foreground bg-background-muted text-foreground",
           disabled && "opacity-[var(--opacity-disabled)] cursor-not-allowed pointer-events-none",
@@ -190,7 +188,7 @@ export const FileUploadTrigger = React.forwardRef<HTMLButtonElement, FileUploadT
         ref={ref}
         type={type ?? "button"}
         disabled={disabled || rest.disabled}
-        className={cx(
+        className={cn(
           "inline-flex items-center justify-center gap-[var(--space-2)] py-[var(--space-2)] px-[var(--space-3)] text-[length:var(--text-sm)] font-medium text-foreground bg-background border border-border rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color,border-color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed",
           className,
         )}
@@ -220,7 +218,7 @@ export const FileUploadList = React.forwardRef<HTMLUListElement, FileUploadListP
       : (children ?? files.map((f, i) => <FileUploadItem key={`${f.name}-${i}`} file={f} index={i} />));
 
     return (
-      <ul ref={ref} className={cx("list-none m-0 p-0 flex flex-col gap-1.5", className)} {...rest}>
+      <ul ref={ref} className={cn("list-none m-0 p-0 flex flex-col gap-1.5", className)} {...rest}>
         {content}
       </ul>
     );
@@ -239,7 +237,7 @@ export const FileUploadItem = React.forwardRef<HTMLLIElement, FileUploadItemProp
     return (
       <li
         ref={ref}
-        className={cx(
+        className={cn(
           "flex items-center gap-2.5 py-[var(--space-2)] px-[var(--space-3)] bg-background border border-border rounded-[calc(var(--radius)-2px)] text-[length:var(--text-sm)] text-foreground [&>svg]:text-foreground-muted [&>svg]:shrink-0",
           className,
         )}

package/data/registry/react/components/file-upload/index.tsx

@@ -3,10 +3,8 @@
 import * as React from "react";
 import "./styles.css";
 
-function cx(...args: (string | false | undefined)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 function formatBytes(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -200,7 +198,7 @@ export const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
 
     return (
       <FileUploadContext.Provider value={ctx}>
-        <div className={cx("sh-ui-file-upload", className)} style={style}>
+        <div className={cn("sh-ui-file-upload", className)} style={style}>
           {/* 공유 네이티브 input. Trigger/Dropzone 모두 이를 통해 파일 선택을 연다. */}
           <input
             ref={inputRef}
@@ -283,7 +281,7 @@ export const FileUploadDropzone = React.forwardRef<
       tabIndex={disabled ? -1 : 0}
       aria-disabled={disabled || undefined}
       data-dragging={dragging || undefined}
-      className={cx(
+      className={cn(
         "sh-ui-file-upload__dropzone",
         dragging && "sh-ui-file-upload__dropzone--drag",
         disabled && "sh-ui-file-upload__dropzone--disabled",
@@ -332,7 +330,7 @@ export const FileUploadTrigger = React.forwardRef<
       ref={ref}
       type={type ?? "button"}
       disabled={disabled || rest.disabled}
-      className={cx("sh-ui-file-upload__trigger", className)}
+      className={cn("sh-ui-file-upload__trigger", className)}
       onClick={(e) => {
         // Dropzone 내부에 있을 때 상위 onClick이 중복 트리거되지 않도록 버블 차단
         e.stopPropagation();
@@ -391,7 +389,7 @@ export const FileUploadList = React.forwardRef<
   return (
     <ul
       ref={ref}
-      className={cx("sh-ui-file-upload__list", className)}
+      className={cn("sh-ui-file-upload__list", className)}
       {...rest}
     >
       {content}
@@ -418,7 +416,7 @@ export const FileUploadItem = React.forwardRef<
   return (
     <li
       ref={ref}
-      className={cx("sh-ui-file-upload__item", className)}
+      className={cn("sh-ui-file-upload__item", className)}
       {...rest}
     >
       {children ?? (

package/data/registry/react/components/form/field.tailwind.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
 import { FormContext, FieldContext, SectionContext, StepContext, DisabledContext, useFormField } from "./context";
 import type { FieldValidate, ValidateOn } from "./types";
 import { scopedPath } from "./utils";
@@ -127,7 +128,7 @@ export function FormControl({ children, valueAs = "value", render }: FormControl
   const store = React.useContext(FormContext)!;
   const field = useFormField(ctx.path);
 
-  const describedBy = [ctx.descId, field.hasError ? ctx.errorId : null].filter(Boolean).join(" ") || undefined;
+  const describedBy = cn(ctx.descId, field.hasError ? ctx.errorId : null) || undefined;
 
   const ctrl: ControlProps = {
     id: ctx.id, name: ctx.path,

package/data/registry/react/components/form/field.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
 import {
   FormContext,
   FieldContext,
@@ -195,9 +196,7 @@ export function FormControl({
   const field = useFormField(ctx.path);
 
   const describedBy =
-    [ctx.descId, field.hasError ? ctx.errorId : null]
-      .filter(Boolean)
-      .join(" ") || undefined;
+    cn(ctx.descId, field.hasError ? ctx.errorId : null) || undefined;
 
   const ctrl: ControlProps = {
     id: ctx.id,

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

@@ -3,10 +3,8 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 const FOCUSABLE_SELECTOR =
   'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
@@ -151,7 +149,7 @@ export const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header
     <HeaderContext.Provider value={ctx}>
       <header
         ref={setRefs}
-        className={cx(
+        className={cn(
           "relative flex items-center gap-[var(--space-4)] h-[var(--control-md)] px-[var(--space-3)] border-b border-border transition-[transform,background-color] duration-[var(--duration-base)] [--sh-ui-header-hover-bg:var(--background-muted)] [--sh-ui-header-blur-opacity:85%] [--sh-ui-header-blur-radius:16px] motion-reduce:transition-none max-md:gap-[var(--space-2)] data-[sticky-hide][data-hidden]:-translate-y-full",
           variantClasses[variant],
           className,
@@ -169,19 +167,19 @@ export const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header
 
 export const HeaderBrand = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   function HeaderBrand({ className, ...props }, ref) {
-    return <div ref={ref} className={cx("inline-flex items-center gap-[var(--space-2)] shrink-0", className)} {...props} />;
+    return <div ref={ref} className={cn("inline-flex items-center gap-[var(--space-2)] shrink-0", className)} {...props} />;
   },
 );
 
 export const HeaderLogo = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
   function HeaderLogo({ className, ...props }, ref) {
-    return <span ref={ref} className={cx("inline-flex items-center text-foreground", className)} {...props} />;
+    return <span ref={ref} className={cn("inline-flex items-center text-foreground", className)} {...props} />;
   },
 );
 
 export const HeaderTitle = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
   function HeaderTitle({ className, ...props }, ref) {
-    return <span ref={ref} className={cx("text-[length:var(--text-base)] font-bold text-foreground tracking-[-0.3px]", className)} {...props} />;
+    return <span ref={ref} className={cn("text-[length:var(--text-base)] font-bold text-foreground tracking-[-0.3px]", className)} {...props} />;
   },
 );
 
@@ -198,7 +196,7 @@ export const HeaderTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTM
       <button
         ref={setRefs}
         type="button"
-        className={cx(
+        className={cn(
           "hidden items-center justify-center w-9 h-9 p-0 bg-transparent border-0 text-foreground rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color] duration-[var(--duration-fast)] hover:bg-[var(--sh-ui-header-hover-bg)] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 max-md:inline-flex max-md:order-[-1]",
           className,
         )}
@@ -244,7 +242,7 @@ export const HeaderNav = React.forwardRef<HTMLElement, HeaderNavProps>(
         <NavLocationContext.Provider value="inline">
           <nav
             ref={ref}
-            className={cx(
+            className={cn(
               "flex items-center gap-[var(--space-1)] flex-1 min-w-0 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-md:hidden",
               className,
             )}
@@ -293,7 +291,7 @@ export const HeaderItem = React.forwardRef<
     <a
       ref={ref}
       href={href}
-      className={cx(
+      className={cn(
         "inline-flex items-center gap-[var(--space-1)] py-[var(--space-2)] px-[var(--space-3)] text-[length:var(--text-sm)] font-medium text-foreground-muted no-underline bg-transparent border-0 rounded-[calc(var(--radius)-2px)] cursor-pointer whitespace-nowrap transition-[color,background-color] duration-[var(--duration-fast)] hover:text-foreground hover:bg-[var(--sh-ui-header-hover-bg)] data-[active]:text-foreground data-[active]:font-semibold focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none max-md:py-[var(--space-3)] max-md:px-[var(--space-3)]",
         className,
       )}
@@ -311,19 +309,19 @@ export const HeaderItem = React.forwardRef<
 
 export const HeaderActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   function HeaderActions({ className, ...props }, ref) {
-    return <div ref={ref} className={cx("inline-flex items-center gap-[var(--space-2)] ml-auto shrink-0", className)} {...props} />;
+    return <div ref={ref} className={cn("inline-flex items-center gap-[var(--space-2)] ml-auto shrink-0", className)} {...props} />;
   },
 );
 
 export const HeaderDesktopOnly = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   function HeaderDesktopOnly({ className, ...props }, ref) {
-    return <div ref={ref} className={cx("contents max-md:hidden", className)} {...props} />;
+    return <div ref={ref} className={cn("contents max-md:hidden", className)} {...props} />;
   },
 );
 
 export const HeaderMobileOnly = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   function HeaderMobileOnly({ className, ...props }, ref) {
-    return <div ref={ref} className={cx("hidden max-md:contents", className)} {...props} />;
+    return <div ref={ref} className={cn("hidden max-md:contents", className)} {...props} />;
   },
 );
 
@@ -335,12 +333,12 @@ export const HeaderNavGroup = React.forwardRef<HTMLDivElement, HeaderNavGroupPro
   function HeaderNavGroup({ className, label, children, ...props }, ref) {
     const location = React.useContext(NavLocationContext);
     if (location === "inline") {
-      return <div ref={ref} className={cx("contents", className)} {...props}>{children}</div>;
+      return <div ref={ref} className={cn("contents", className)} {...props}>{children}</div>;
     }
     return (
       <div
         ref={ref}
-        className={cx("flex flex-col mt-[var(--space-3)] first:mt-0", className)}
+        className={cn("flex flex-col mt-[var(--space-3)] first:mt-0", className)}
         role="group"
         aria-label={typeof label === "string" ? label : undefined}
         {...props}
@@ -407,7 +405,7 @@ export function HeaderMenu({ children, className, defaultOpen = false }: { child
     <MenuContext.Provider value={ctx}>
       <div
         ref={containerRef}
-        className={cx(
+        className={cn(
           "relative",
           location === "inline" ? "inline-block" : "flex flex-col",
           className,
@@ -438,7 +436,7 @@ export const HeaderMenuTrigger = React.forwardRef<HTMLButtonElement, React.Butto
         aria-expanded={open}
         aria-controls={contentId}
         data-open={open ? "" : undefined}
-        className={cx(
+        className={cn(
           "inline-flex items-center gap-[var(--space-1)] py-[var(--space-2)] px-[var(--space-3)] text-[length:var(--text-sm)] font-medium text-foreground-muted bg-transparent border-0 rounded-[calc(var(--radius)-2px)] cursor-pointer whitespace-nowrap transition-[color,background-color] duration-[var(--duration-fast)] hover:text-foreground hover:bg-[var(--sh-ui-header-hover-bg)] data-[open]:text-foreground data-[open]:bg-[var(--sh-ui-header-hover-bg)] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none",
           location === "drawer" && "max-md:justify-between max-md:w-full max-md:py-[var(--space-3)] max-md:px-[var(--space-3)]",
           className,
@@ -471,7 +469,7 @@ export const HeaderMenuContent = React.forwardRef<HTMLDivElement, React.HTMLAttr
           aria-labelledby={triggerId}
           data-open={open ? "" : undefined}
           hidden={!open}
-          className={cx(
+          className={cn(
             "max-md:flex max-md:flex-col max-md:py-[var(--space-1)] max-md:pl-[var(--space-4)] max-md:gap-px max-md:[&[hidden]]:hidden",
             className,
           )}
@@ -513,7 +511,7 @@ export const HeaderMenuContent = React.forwardRef<HTMLDivElement, React.HTMLAttr
         role="menu"
         aria-labelledby={triggerId}
         data-open=""
-        className={cx(
+        className={cn(
           "z-[var(--z-dropdown,50)] p-[var(--space-1)] bg-background border border-border rounded-[var(--radius)] shadow-[0_8px_24px_-8px_rgba(0,0,0,0.18)] flex flex-col gap-px text-foreground",
           className,
         )}

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

@@ -4,10 +4,8 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 const FOCUSABLE_SELECTOR =
   'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
@@ -264,7 +262,7 @@ export const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header
     <HeaderContext.Provider value={ctx}>
       <header
         ref={setRefs}
-        className={cx("sh-ui-header", `sh-ui-header--${variant}`, className)}
+        className={cn("sh-ui-header", `sh-ui-header--${variant}`, className)}
         data-drawer-open={open ? "" : undefined}
         data-sticky-hide={stickyHide ? "" : undefined}
         data-hidden={hidden ? "" : undefined}
@@ -282,21 +280,21 @@ export const HeaderBrand = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(function HeaderBrand({ className, ...props }, ref) {
-  return <div ref={ref} className={cx("sh-ui-header__brand", className)} {...props} />;
+  return <div ref={ref} className={cn("sh-ui-header__brand", className)} {...props} />;
 });
 
 export const HeaderLogo = React.forwardRef<
   HTMLSpanElement,
   React.HTMLAttributes<HTMLSpanElement>
 >(function HeaderLogo({ className, ...props }, ref) {
-  return <span ref={ref} className={cx("sh-ui-header__logo", className)} {...props} />;
+  return <span ref={ref} className={cn("sh-ui-header__logo", className)} {...props} />;
 });
 
 export const HeaderTitle = React.forwardRef<
   HTMLSpanElement,
   React.HTMLAttributes<HTMLSpanElement>
 >(function HeaderTitle({ className, ...props }, ref) {
-  return <span ref={ref} className={cx("sh-ui-header__title", className)} {...props} />;
+  return <span ref={ref} className={cn("sh-ui-header__title", className)} {...props} />;
 });
 
 /* ───────── Trigger ─────────
@@ -322,7 +320,7 @@ export const HeaderTrigger = React.forwardRef<
     <button
       ref={setRefs}
       type="button"
-      className={cx("sh-ui-header__trigger", className)}
+      className={cn("sh-ui-header__trigger", className)}
       aria-label={open ? "메뉴 닫기" : "메뉴 열기"}
       aria-expanded={open}
       data-open={open ? "" : undefined}
@@ -399,7 +397,7 @@ export const HeaderNav = React.forwardRef<HTMLElement, HeaderNavProps>(
     return (
       <NavMatchContext.Provider value={navMatch}>
         <NavLocationContext.Provider value="inline">
-          <nav ref={ref} className={cx("sh-ui-header__nav", className)} {...props}>
+          <nav ref={ref} className={cn("sh-ui-header__nav", className)} {...props}>
             {children}
           </nav>
         </NavLocationContext.Provider>
@@ -457,7 +455,7 @@ export const HeaderItem = React.forwardRef<
     <a
       ref={ref}
       href={href}
-      className={cx("sh-ui-header__item", className)}
+      className={cn("sh-ui-header__item", className)}
       data-active={computedActive ? "" : undefined}
       aria-current={computedActive ? "page" : undefined}
       onClick={(e) => {
@@ -478,7 +476,7 @@ export const HeaderActions = React.forwardRef<
   React.HTMLAttributes<HTMLDivElement>
 >(function HeaderActions({ className, ...props }, ref) {
   return (
-    <div ref={ref} className={cx("sh-ui-header__actions", className)} {...props} />
+    <div ref={ref} className={cn("sh-ui-header__actions", className)} {...props} />
   );
 });
 
@@ -493,7 +491,7 @@ export const HeaderDesktopOnly = React.forwardRef<
   React.HTMLAttributes<HTMLDivElement>
 >(function HeaderDesktopOnly({ className, ...props }, ref) {
   return (
-    <div ref={ref} className={cx("sh-ui-header__desktop-only", className)} {...props} />
+    <div ref={ref} className={cn("sh-ui-header__desktop-only", className)} {...props} />
   );
 });
 
@@ -503,7 +501,7 @@ export const HeaderMobileOnly = React.forwardRef<
   React.HTMLAttributes<HTMLDivElement>
 >(function HeaderMobileOnly({ className, ...props }, ref) {
   return (
-    <div ref={ref} className={cx("sh-ui-header__mobile-only", className)} {...props} />
+    <div ref={ref} className={cn("sh-ui-header__mobile-only", className)} {...props} />
   );
 });
 
@@ -524,7 +522,7 @@ export const HeaderNavGroup = React.forwardRef<HTMLDivElement, HeaderNavGroupPro
       return (
         <div
           ref={ref}
-          className={cx("sh-ui-header__group sh-ui-header__group--inline", className)}
+          className={cn("sh-ui-header__group sh-ui-header__group--inline", className)}
           {...props}
         >
           {children}
@@ -534,7 +532,7 @@ export const HeaderNavGroup = React.forwardRef<HTMLDivElement, HeaderNavGroupPro
     return (
       <div
         ref={ref}
-        className={cx("sh-ui-header__group sh-ui-header__group--drawer", className)}
+        className={cn("sh-ui-header__group sh-ui-header__group--drawer", className)}
         role="group"
         aria-label={typeof label === "string" ? label : undefined}
         {...props}
@@ -626,7 +624,7 @@ export function HeaderMenu({
     <MenuContext.Provider value={ctx}>
       <div
         ref={containerRef}
-        className={cx(
+        className={cn(
           "sh-ui-header__menu",
           `sh-ui-header__menu--${location}`,
           open && "is-open",
@@ -665,7 +663,7 @@ export const HeaderMenuTrigger = React.forwardRef<
       aria-expanded={open}
       aria-controls={contentId}
       data-open={open ? "" : undefined}
-      className={cx("sh-ui-header__menu-trigger", className)}
+      className={cn("sh-ui-header__menu-trigger", className)}
       onClick={(e) => {
         setOpen(!open);
         onClick?.(e);
@@ -704,7 +702,7 @@ export const HeaderMenuContent = React.forwardRef<
         aria-labelledby={triggerId}
         data-open={open ? "" : undefined}
         hidden={!open}
-        className={cx("sh-ui-header__menu-content", className)}
+        className={cn("sh-ui-header__menu-content", className)}
         style={style}
         {...props}
       >
@@ -754,7 +752,7 @@ export const HeaderMenuContent = React.forwardRef<
       role="menu"
       aria-labelledby={triggerId}
       data-open=""
-      className={cx("sh-ui-header__menu-content sh-ui-header__menu-content--portal", className)}
+      className={cn("sh-ui-header__menu-content sh-ui-header__menu-content--portal", className)}
       style={{
         position: "absolute",
         top: pos.top,

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

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
   /** input 우측에 부착할 보조 노드(아이콘·단위·버튼 등). 더 많은 슬롯이 필요하면 InputGroup 사용. */
   suffix?: React.ReactNode;
@@ -9,9 +10,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   prefix?: React.ReactNode;
 }
 
-function cx(...args: (string | undefined | null | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /* ───────── Base utility 묶음 (반복 줄이기) ───────── */
 
@@ -69,7 +67,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       <InputGroupContext.Provider value={{ inGroup: true }}>
         <div
           ref={mergedRef}
-          className={cx(baseGroupClasses, className)}
+          className={cn(baseGroupClasses, className)}
           data-disabled={disabled || undefined}
           aria-invalid={ariaInvalid}
           onClick={handleClick}
@@ -91,7 +89,7 @@ export const InputAdornment = React.forwardRef<HTMLSpanElement, InputAdornmentPr
   ({ className, interactive, ...props }, ref) => (
     <span
       ref={ref}
-      className={cx(
+      className={cn(
         "inline-flex items-center justify-center flex-none text-foreground-muted px-[var(--space-1)] data-[interactive]:p-0",
         className,
       )}
@@ -112,7 +110,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         ref={ref}
         type={type}
-        className={cx(
+        className={cn(
           baseInputClasses,
           inGroupOverrides,
           !!prefix && "pl-[var(--space-10)]",

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

@@ -3,6 +3,7 @@
 import * as React from "react";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
   /** input 우측에 부착할 보조 노드(아이콘·단위·버튼 등). 더 많은 슬롯이 필요하면 InputGroup 사용. */
   suffix?: React.ReactNode;
@@ -10,9 +11,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   prefix?: React.ReactNode;
 }
 
-function cx(...args: (string | undefined | null | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /* ───────── InputGroup + InputAdornment (compound) ─────────
  * <InputGroup>
@@ -87,7 +85,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       <InputGroupContext.Provider value={{ inGroup: true }}>
         <div
           ref={mergedRef}
-          className={cx("sh-ui-input-group", className)}
+          className={cn("sh-ui-input-group", className)}
           data-disabled={disabled || undefined}
           aria-invalid={ariaInvalid}
           onClick={handleClick}
@@ -123,7 +121,7 @@ export const InputAdornment = React.forwardRef<
   return (
     <span
       ref={ref}
-      className={cx("sh-ui-input-group__adornment", className)}
+      className={cn("sh-ui-input-group__adornment", className)}
       data-interactive={interactive || undefined}
       {...props}
     />
@@ -143,7 +141,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         ref={ref}
         type={type}
-        className={cx(
+        className={cn(
           "sh-ui-input",
           !!prefix && "sh-ui-input--with-prefix",
           !!suffix && "sh-ui-input--with-suffix",