sh-ui-cli 0.45.1 → 0.45.3

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

@@ -3,11 +3,9 @@
 import * as React from "react";
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 
+import { cn } from "@SH_UI_UTILS@";
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 export const Combobox = BaseCombobox.Root;
 export const ComboboxIcon = BaseCombobox.Icon;
@@ -24,7 +22,7 @@ export const ComboboxInput = React.forwardRef<
   return (
     <BaseCombobox.Input
       ref={ref}
-      className={cx(
+      className={cn(
         "inline-flex w-full min-w-40 h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] text-[length:var(--text-sm)] leading-none outline-none transition-[border-color] duration-[var(--duration-fast)] placeholder:text-foreground-subtle 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:pointer-events-none",
         className,
       )}
@@ -49,7 +47,7 @@ export const ComboboxContent = React.forwardRef<
       >
         <BaseCombobox.Popup
           ref={ref}
-          className={cx(
+          className={cn(
             "max-h-[min(20rem,var(--available-height))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_8px_24px_rgba(0,0,0,0.08)] outline-none origin-[var(--transform-origin)] transition-[opacity,transform] duration-[140ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.97]",
             className,
           )}
@@ -71,7 +69,7 @@ export const ComboboxItem = React.forwardRef<
   return (
     <BaseCombobox.Item
       ref={ref}
-      className={cx(
+      className={cn(
         "flex items-center gap-[var(--space-2)] py-1.5 px-3 text-[length:var(--text-sm)] leading-snug rounded-[calc(var(--radius)-2px)] cursor-pointer select-none outline-none data-[highlighted]:bg-background-muted hover:bg-background-muted data-[selected]:text-foreground data-[selected]:font-medium data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:pointer-events-none",
         className,
       )}
@@ -92,7 +90,7 @@ export const ComboboxEmpty = React.forwardRef<
   return (
     <BaseCombobox.Empty
       ref={ref}
-      className={cx(
+      className={cn(
         "py-[var(--space-3)] px-[var(--space-2)] text-center text-[0.8125rem] text-foreground-muted",
         className,
       )}
@@ -108,7 +106,7 @@ export const ComboboxGroupLabel = React.forwardRef<
   return (
     <BaseCombobox.GroupLabel
       ref={ref}
-      className={cx(
+      className={cn(
         "py-1.5 px-[var(--space-2)] pb-[var(--space-1)] text-[length:var(--text-xs)] font-semibold text-foreground-muted uppercase tracking-[0.04em]",
         className,
       )}
@@ -124,7 +122,7 @@ export const ComboboxChip = React.forwardRef<
   return (
     <BaseCombobox.Chip
       ref={ref}
-      className={cx(
+      className={cn(
         "inline-flex items-center gap-[var(--space-1)] py-0.5 pr-1.5 pl-[var(--space-2)] mr-[var(--space-1)] text-[length:var(--text-xs)] leading-5 bg-background-muted rounded-[calc(var(--radius)-2px)] whitespace-nowrap",
         className,
       )}
@@ -140,7 +138,7 @@ export const ComboboxChipRemove = React.forwardRef<
   return (
     <BaseCombobox.ChipRemove
       ref={ref}
-      className={cx(
+      className={cn(
         "inline-flex items-center justify-center w-4 h-4 p-0 border-0 rounded-full bg-transparent text-foreground-muted text-[length:var(--text-sm)] leading-none cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:bg-background hover:text-foreground motion-reduce:transition-none",
         className,
       )}

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

@@ -4,11 +4,9 @@ import * as React from "react";
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /**
  * Select + Input의 결합 — 타이핑으로 목록이 자동 필터링된다.
@@ -40,7 +38,7 @@ export const ComboboxInput = React.forwardRef<
   return (
     <BaseCombobox.Input
       ref={ref}
-      className={cx("sh-ui-combobox__input", className)}
+      className={cn("sh-ui-combobox__input", className)}
       {...props}
     />
   );
@@ -66,7 +64,7 @@ export const ComboboxContent = React.forwardRef<
       >
         <BaseCombobox.Popup
           ref={ref}
-          className={cx("sh-ui-combobox__content", className)}
+          className={cn("sh-ui-combobox__content", className)}
           {...props}
         >
           {children}
@@ -85,7 +83,7 @@ export const ComboboxItem = React.forwardRef<
   return (
     <BaseCombobox.Item
       ref={ref}
-      className={cx("sh-ui-combobox__item", className)}
+      className={cn("sh-ui-combobox__item", className)}
       {...props}
     >
       <BaseCombobox.ItemIndicator className="sh-ui-combobox__item-indicator">
@@ -103,7 +101,7 @@ export const ComboboxEmpty = React.forwardRef<
   return (
     <BaseCombobox.Empty
       ref={ref}
-      className={cx("sh-ui-combobox__empty", className)}
+      className={cn("sh-ui-combobox__empty", className)}
       {...props}
     />
   );
@@ -116,7 +114,7 @@ export const ComboboxGroupLabel = React.forwardRef<
   return (
     <BaseCombobox.GroupLabel
       ref={ref}
-      className={cx("sh-ui-combobox__group-label", className)}
+      className={cn("sh-ui-combobox__group-label", className)}
       {...props}
     />
   );
@@ -130,7 +128,7 @@ export const ComboboxChip = React.forwardRef<
   return (
     <BaseCombobox.Chip
       ref={ref}
-      className={cx("sh-ui-combobox__chip", className)}
+      className={cn("sh-ui-combobox__chip", className)}
       {...props}
     />
   );
@@ -144,7 +142,7 @@ export const ComboboxChipRemove = React.forwardRef<
   return (
     <BaseCombobox.ChipRemove
       ref={ref}
-      className={cx("sh-ui-combobox__chip-remove", className)}
+      className={cn("sh-ui-combobox__chip-remove", className)}
       {...props}
     >
       {children ?? "×"}

package/data/registry/react/components/context-menu/index.tailwind.tsx

@@ -1,11 +1,9 @@
 import * as React from "react";
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
 
+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(" ");
-}
 
 const itemBase =
   "relative flex items-center gap-[var(--space-2)] py-2 px-3 rounded-[calc(var(--radius)-2px)] cursor-pointer outline-none select-none transition-colors duration-[80ms] data-[highlighted]:bg-background-muted hover:bg-background-muted data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:pointer-events-none motion-reduce:transition-none";
@@ -19,7 +17,7 @@ export const ContextMenuTrigger = React.forwardRef<
   HTMLDivElement,
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Trigger>>
 >(function ContextMenuTrigger({ className, ...props }, ref) {
-  return <BaseContextMenu.Trigger ref={ref} className={cx("contents", className)} {...props} />;
+  return <BaseContextMenu.Trigger ref={ref} className={cn("contents", className)} {...props} />;
 });
 
 export interface ContextMenuContentProps
@@ -32,7 +30,7 @@ export const ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuCo
     return (
       <BaseContextMenu.Portal container={container}>
         <BaseContextMenu.Positioner className="outline-none z-[var(--z-dropdown)]">
-          <BaseContextMenu.Popup ref={ref} className={cx(contentClasses, className)} {...props}>
+          <BaseContextMenu.Popup ref={ref} className={cn(contentClasses, className)} {...props}>
             {children}
           </BaseContextMenu.Popup>
         </BaseContextMenu.Positioner>
@@ -45,7 +43,7 @@ export const ContextMenuItem = React.forwardRef<
   HTMLDivElement,
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Item>>
 >(function ContextMenuItem({ className, ...props }, ref) {
-  return <BaseContextMenu.Item ref={ref} className={cx(itemBase, className)} {...props} />;
+  return <BaseContextMenu.Item ref={ref} className={cn(itemBase, className)} {...props} />;
 });
 
 export const ContextMenuCheckboxItem = React.forwardRef<
@@ -53,7 +51,7 @@ export const ContextMenuCheckboxItem = React.forwardRef<
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.CheckboxItem>>
 >(function ContextMenuCheckboxItem({ className, children, ...props }, ref) {
   return (
-    <BaseContextMenu.CheckboxItem ref={ref} className={cx(itemBase, itemCheck, className)} {...props}>
+    <BaseContextMenu.CheckboxItem ref={ref} className={cn(itemBase, itemCheck, className)} {...props}>
       <span className="absolute left-2 inline-flex items-center justify-center w-4 h-4 text-foreground" aria-hidden>
         <BaseContextMenu.CheckboxItemIndicator>
           <CheckIcon />
@@ -71,7 +69,7 @@ export const ContextMenuRadioItem = React.forwardRef<
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.RadioItem>>
 >(function ContextMenuRadioItem({ className, children, ...props }, ref) {
   return (
-    <BaseContextMenu.RadioItem ref={ref} className={cx(itemBase, itemCheck, className)} {...props}>
+    <BaseContextMenu.RadioItem ref={ref} className={cn(itemBase, itemCheck, className)} {...props}>
       <span className="absolute left-2 inline-flex items-center justify-center w-4 h-4 text-foreground" aria-hidden>
         <BaseContextMenu.RadioItemIndicator>
           <DotIcon />
@@ -86,7 +84,7 @@ export const ContextMenuGroup = React.forwardRef<
   HTMLDivElement,
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Group>>
 >(function ContextMenuGroup({ className, ...props }, ref) {
-  return <BaseContextMenu.Group ref={ref} className={cx("p-0", className)} {...props} />;
+  return <BaseContextMenu.Group ref={ref} className={cn("p-0", className)} {...props} />;
 });
 
 export const ContextMenuLabel = React.forwardRef<
@@ -96,7 +94,7 @@ export const ContextMenuLabel = React.forwardRef<
   return (
     <BaseContextMenu.GroupLabel
       ref={ref}
-      className={cx(
+      className={cn(
         "py-[var(--space-2)] px-[var(--space-2)] pb-[var(--space-1)] text-[length:var(--text-xs)] font-semibold text-foreground-muted uppercase tracking-[0.04em]",
         className,
       )}
@@ -112,7 +110,7 @@ export const ContextMenuSeparator = React.forwardRef<HTMLDivElement, React.HTMLA
         ref={ref}
         role="separator"
         aria-orientation="horizontal"
-        className={cx("h-px bg-border my-[var(--space-1)]", className)}
+        className={cn("h-px bg-border my-[var(--space-1)]", className)}
         {...props}
       />
     );
@@ -128,7 +126,7 @@ export const ContextMenuSubTrigger = React.forwardRef<
   return (
     <BaseContextMenu.SubmenuTrigger
       ref={ref}
-      className={cx(itemBase, "data-[popup-open]:bg-background-muted", className)}
+      className={cn(itemBase, "data-[popup-open]:bg-background-muted", className)}
       {...props}
     >
       <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>

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

@@ -2,11 +2,9 @@ import * as React from "react";
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-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 ───────── */
 
@@ -29,7 +27,7 @@ export const ContextMenuTrigger = React.forwardRef<
   return (
     <BaseContextMenu.Trigger
       ref={ref}
-      className={cx("sh-ui-cm__trigger", className)}
+      className={cn("sh-ui-cm__trigger", className)}
       {...props}
     />
   );
@@ -60,7 +58,7 @@ export const ContextMenuContent = React.forwardRef<
       <BaseContextMenu.Positioner className="sh-ui-cm__positioner">
         <BaseContextMenu.Popup
           ref={ref}
-          className={cx("sh-ui-cm__content", className)}
+          className={cn("sh-ui-cm__content", className)}
           {...props}
         >
           {children}
@@ -80,7 +78,7 @@ export const ContextMenuItem = React.forwardRef<
   return (
     <BaseContextMenu.Item
       ref={ref}
-      className={cx("sh-ui-cm__item", className)}
+      className={cn("sh-ui-cm__item", className)}
       {...props}
     />
   );
@@ -98,7 +96,7 @@ export const ContextMenuCheckboxItem = React.forwardRef<
   return (
     <BaseContextMenu.CheckboxItem
       ref={ref}
-      className={cx("sh-ui-cm__item", "sh-ui-cm__item--check", className)}
+      className={cn("sh-ui-cm__item", "sh-ui-cm__item--check", className)}
       {...props}
     >
       <span className="sh-ui-cm__item-indicator" aria-hidden>
@@ -124,7 +122,7 @@ export const ContextMenuRadioItem = React.forwardRef<
   return (
     <BaseContextMenu.RadioItem
       ref={ref}
-      className={cx("sh-ui-cm__item", "sh-ui-cm__item--check", className)}
+      className={cn("sh-ui-cm__item", "sh-ui-cm__item--check", className)}
       {...props}
     >
       <span className="sh-ui-cm__item-indicator" aria-hidden>
@@ -147,7 +145,7 @@ export const ContextMenuGroup = React.forwardRef<
   return (
     <BaseContextMenu.Group
       ref={ref}
-      className={cx("sh-ui-cm__group", className)}
+      className={cn("sh-ui-cm__group", className)}
       {...props}
     />
   );
@@ -163,7 +161,7 @@ export const ContextMenuLabel = React.forwardRef<
   return (
     <BaseContextMenu.GroupLabel
       ref={ref}
-      className={cx("sh-ui-cm__label", className)}
+      className={cn("sh-ui-cm__label", className)}
       {...props}
     />
   );
@@ -179,7 +177,7 @@ export const ContextMenuSeparator = React.forwardRef<
       ref={ref}
       role="separator"
       aria-orientation="horizontal"
-      className={cx("sh-ui-cm__separator", className)}
+      className={cn("sh-ui-cm__separator", className)}
       {...props}
     />
   );
@@ -200,7 +198,7 @@ export const ContextMenuSubTrigger = React.forwardRef<
   return (
     <BaseContextMenu.SubmenuTrigger
       ref={ref}
-      className={cx("sh-ui-cm__item", "sh-ui-cm__sub-trigger", className)}
+      className={cn("sh-ui-cm__item", "sh-ui-cm__sub-trigger", className)}
       {...props}
     >
       <span className="sh-ui-cm__item-text">{children}</span>

package/data/registry/react/components/date-picker/index.tailwind.tsx

@@ -4,11 +4,9 @@ import * as React from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import { Calendar, type DateRange } from "../calendar";
 
+import { cn } from "@SH_UI_UTILS@";
 export type { DateRange };
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 const formatDefault = (d: Date) =>
   `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
@@ -121,7 +119,7 @@ export const DatePickerTrigger = React.forwardRef<HTMLButtonElement, DatePickerT
       if (children !== undefined) return children;
       return (
         <>
-          <span className={cx("overflow-hidden text-ellipsis whitespace-nowrap", !displayText && "text-foreground-subtle")}>
+          <span className={cn("overflow-hidden text-ellipsis whitespace-nowrap", !displayText && "text-foreground-subtle")}>
             {displayText ?? ctx.placeholder}
           </span>
           <span className="shrink-0 inline-flex text-foreground-muted ml-[var(--space-2)]" aria-hidden>
@@ -133,7 +131,7 @@ export const DatePickerTrigger = React.forwardRef<HTMLButtonElement, DatePickerT
     return (
       <BasePopover.Trigger
         ref={ref}
-        className={cx(triggerClasses, className)}
+        className={cn(triggerClasses, className)}
         disabled={ctx.disabled}
         aria-invalid={ctx.ariaInvalid}
         aria-haspopup="dialog"
@@ -165,7 +163,7 @@ export const DatePickerContent = React.forwardRef<HTMLDivElement, DatePickerCont
     return (
       <BasePopover.Portal container={container}>
         <BasePopover.Positioner className="z-[var(--z-popover)] outline-none" sideOffset={sideOffset} side={side} align={align}>
-          <BasePopover.Popup ref={ref} className={cx(popupClasses, className)} {...props}>
+          <BasePopover.Popup ref={ref} className={cn(popupClasses, className)} {...props}>
             {children}
           </BasePopover.Popup>
         </BasePopover.Positioner>
@@ -199,7 +197,7 @@ export const DatePickerFooter = React.forwardRef<HTMLDivElement, DatePickerFoote
     return (
       <div
         ref={ref}
-        className={cx(
+        className={cn(
           "flex items-center justify-end gap-[var(--space-2)] mt-[var(--space-2)] pt-[var(--space-2)] border-t border-border",
           className,
         )}
@@ -257,13 +255,13 @@ export const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePick
       <BasePopover.Root open={open} onOpenChange={setOpen}>
         <BasePopover.Trigger
           ref={ref}
-          className={cx(triggerClasses, className)}
+          className={cn(triggerClasses, className)}
           disabled={disabled}
           aria-invalid={ariaInvalid}
           aria-haspopup="dialog"
           onClick={(e) => { if (readOnly) e.preventDefault(); }}
         >
-          <span className={cx("overflow-hidden text-ellipsis whitespace-nowrap", !displayText && "text-foreground-subtle")}>
+          <span className={cn("overflow-hidden text-ellipsis whitespace-nowrap", !displayText && "text-foreground-subtle")}>
             {displayText ?? placeholder}
           </span>
           <span className="shrink-0 inline-flex text-foreground-muted ml-[var(--space-2)]" aria-hidden>

package/data/registry/react/components/date-picker/index.tsx

@@ -5,13 +5,11 @@ import { Popover as BasePopover } from "@base-ui/react/popover";
 import { Calendar, type DateRange } from "../calendar";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 export type { DateRange };
 
 /* ───────── Helpers ───────── */
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 const formatDefault = (d: Date) =>
   `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
@@ -247,7 +245,7 @@ export const DatePickerTrigger = React.forwardRef<HTMLButtonElement, DatePickerT
       return (
         <>
           <span
-            className={cx(
+            className={cn(
               "sh-ui-date-picker__value",
               !displayText && "sh-ui-date-picker__placeholder",
             )}
@@ -264,7 +262,7 @@ export const DatePickerTrigger = React.forwardRef<HTMLButtonElement, DatePickerT
     return (
       <BasePopover.Trigger
         ref={ref}
-        className={cx("sh-ui-date-picker__trigger", className)}
+        className={cn("sh-ui-date-picker__trigger", className)}
         disabled={ctx.disabled}
         aria-invalid={ctx.ariaInvalid}
         aria-haspopup="dialog"
@@ -326,7 +324,7 @@ export const DatePickerContent = React.forwardRef<HTMLDivElement, DatePickerCont
         >
           <BasePopover.Popup
             ref={ref}
-            className={cx("sh-ui-date-picker__popup", className)}
+            className={cn("sh-ui-date-picker__popup", className)}
             {...props}
           >
             {children}
@@ -371,7 +369,7 @@ export const DatePickerFooter = React.forwardRef<HTMLDivElement, DatePickerFoote
     return (
       <div
         ref={ref}
-        className={cx("sh-ui-date-picker__footer", className)}
+        className={cn("sh-ui-date-picker__footer", className)}
         {...props}
       />
     );
@@ -478,7 +476,7 @@ export const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePick
       <BasePopover.Root open={open} onOpenChange={setOpen}>
         <BasePopover.Trigger
           ref={ref}
-          className={cx("sh-ui-date-picker__trigger", className)}
+          className={cn("sh-ui-date-picker__trigger", className)}
           disabled={disabled}
           aria-invalid={ariaInvalid}
           aria-haspopup="dialog"
@@ -486,7 +484,7 @@ export const DateRangePicker = React.forwardRef<HTMLButtonElement, DateRangePick
             if (readOnly) e.preventDefault();
           }}
         >
-          <span className={cx("sh-ui-date-picker__value", !displayText && "sh-ui-date-picker__placeholder")}>
+          <span className={cn("sh-ui-date-picker__value", !displayText && "sh-ui-date-picker__placeholder")}>
             {displayText ?? placeholder}
           </span>
           <span className="sh-ui-date-picker__icon" aria-hidden>

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

@@ -1,11 +1,9 @@
 import * as React from "react";
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 
+import { cn } from "@SH_UI_UTILS@";
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 export const Dialog = BaseDialog.Root;
 export const DialogTrigger = BaseDialog.Trigger;
@@ -14,7 +12,7 @@ export const DialogClose = BaseDialog.Close;
 export function DialogCloseX({ className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
     <BaseDialog.Close
-      className={cx(
+      className={cn(
         "absolute top-[var(--space-3)] right-[var(--space-3)] inline-flex items-center justify-center w-8 h-8 border-0 rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground-muted text-[length:var(--text-lg)] leading-none cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:bg-background-muted hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none",
         className,
       )}
@@ -29,7 +27,7 @@ export function DialogCloseX({ className, children, ...props }: React.ButtonHTML
 export function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cx(
+      className={cn(
         "flex items-center justify-end gap-[var(--space-2)] pt-[var(--space-4)] border-t border-border mt-auto",
         className,
       )}
@@ -50,7 +48,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
         <BaseDialog.Backdrop className="fixed inset-0 z-[var(--z-overlay)] bg-black/25 backdrop-blur-md transition-opacity duration-[var(--duration-slow)] motion-reduce:transition-none data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" />
         <BaseDialog.Popup
           ref={ref}
-          className={cx(
+          className={cn(
             "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[var(--z-modal)] flex flex-col w-[calc(100%-2rem)] max-w-md max-h-[calc(100dvh-4rem)] p-[var(--space-6)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[var(--shadow-xl)] outline-none overflow-y-auto transition-[opacity,transform] duration-[var(--duration-slow)] motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:translate-y-[calc(-50%+0.5rem)] data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:translate-y-[calc(-50%+0.25rem)] data-[ending-style]:scale-[0.98] motion-reduce:data-[starting-style]:translate-y-[-50%] motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:translate-y-[-50%] motion-reduce:data-[ending-style]:scale-100 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2",
             className,
           )}
@@ -70,7 +68,7 @@ export const DialogTitle = React.forwardRef<
   return (
     <BaseDialog.Title
       ref={ref}
-      className={cx(
+      className={cn(
         "m-0 mb-[var(--space-1)] font-semibold text-[length:var(--text-lg)] leading-snug",
         className,
       )}
@@ -86,7 +84,7 @@ export const DialogDescription = React.forwardRef<
   return (
     <BaseDialog.Description
       ref={ref}
-      className={cx(
+      className={cn(
         "m-0 mb-[var(--space-5)] text-foreground-muted text-[length:var(--text-sm)] leading-normal",
         className,
       )}

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

@@ -2,11 +2,9 @@ import * as React from "react";
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /**
  * 모달 다이얼로그 루트. 열림 상태를 가지며 자식으로 Trigger·Content를 둔다.
@@ -24,7 +22,7 @@ export const DialogClose = BaseDialog.Close;
 export function DialogCloseX({ className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
     <BaseDialog.Close
-      className={cx("sh-ui-dialog__close", className)}
+      className={cn("sh-ui-dialog__close", className)}
       aria-label="닫기"
       {...props}
     >
@@ -35,7 +33,7 @@ export function DialogCloseX({ className, children, ...props }: React.ButtonHTML
 
 /** Dialog 본문 하단의 액션 버튼 영역. 보통 [취소, 확인] 순서로 배치. */
 export function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("sh-ui-dialog__footer", className)} {...props} />;
+  return <div className={cn("sh-ui-dialog__footer", className)} {...props} />;
 }
 
 export interface DialogContentProps
@@ -58,7 +56,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
         <BaseDialog.Backdrop className="sh-ui-dialog__backdrop" />
         <BaseDialog.Popup
           ref={ref}
-          className={cx("sh-ui-dialog__content", className)}
+          className={cn("sh-ui-dialog__content", className)}
           {...props}
         >
           {children}
@@ -76,7 +74,7 @@ export const DialogTitle = React.forwardRef<
   return (
     <BaseDialog.Title
       ref={ref}
-      className={cx("sh-ui-dialog__title", className)}
+      className={cn("sh-ui-dialog__title", className)}
       {...props}
     />
   );
@@ -90,7 +88,7 @@ export const DialogDescription = React.forwardRef<
   return (
     <BaseDialog.Description
       ref={ref}
-      className={cx("sh-ui-dialog__description", className)}
+      className={cn("sh-ui-dialog__description", className)}
       {...props}
     />
   );