sh-ui-cli 0.45.1 → 0.45.3

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

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
 import { ChevronRightIcon, PanelLeftIcon } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 import "./styles.css";
@@ -205,7 +206,7 @@ export function SidebarProvider({
     [state, open, setOpen, isMobile, openMobile, toggleSidebar, activePanel, setActivePanel]
   );
 
-  const classes = ["sh-ui-sidebar-wrapper", className].filter(Boolean).join(" ");
+  const classes = cn("sh-ui-sidebar-wrapper", className);
 
   return (
     <SidebarContext.Provider value={value}>
@@ -288,7 +289,7 @@ export function Sidebar({
   );
 
   if (collapsible === "none") {
-    const classes = ["sh-ui-sidebar", "sh-ui-sidebar--static", className].filter(Boolean).join(" ");
+    const classes = cn("sh-ui-sidebar", "sh-ui-sidebar--static", className);
     return wrap(
       <aside className={classes} data-side={side} data-variant={variant} {...props}>
         {children}
@@ -312,7 +313,7 @@ export function Sidebar({
 
   return wrap(
     <aside
-      className={["sh-ui-sidebar", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar", className)}
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -351,9 +352,7 @@ function MobileSidebar({
       )}
       <aside
         ref={asideRef}
-        className={["sh-ui-sidebar", "sh-ui-sidebar--mobile", className]
-          .filter(Boolean)
-          .join(" ")}
+        className={cn("sh-ui-sidebar", "sh-ui-sidebar--mobile", className)}
         data-side={side}
         data-state={openMobile ? "open" : "closed"}
         role="dialog"
@@ -378,7 +377,7 @@ export function SidebarTrigger({ className, onClick, ...props }: SidebarTriggerP
     <button
       type="button"
       aria-label="Toggle Sidebar"
-      className={["sh-ui-sidebar__trigger", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__trigger", className)}
       onClick={(e) => {
         onClick?.(e);
         toggleSidebar();
@@ -429,7 +428,7 @@ export function SidebarPanel({ id, className, children, ...props }: SidebarPanel
   return (
     <aside
       ref={ref}
-      className={["sh-ui-sidebar__panel", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__panel", className)}
       data-state={open ? "open" : "closed"}
       role={isMobile ? "dialog" : undefined}
       aria-modal={open && isMobile ? "true" : undefined}
@@ -453,7 +452,7 @@ export function SidebarPanel({ id, className, children, ...props }: SidebarPanel
 export function SidebarPanelHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={["sh-ui-sidebar__panel-header", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__panel-header", className)}
       {...props}
     />
   );
@@ -463,7 +462,7 @@ export function SidebarPanelHeader({ className, ...props }: React.HTMLAttributes
 export function SidebarPanelContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={["sh-ui-sidebar__panel-content", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__panel-content", className)}
       {...props}
     />
   );
@@ -475,7 +474,7 @@ export function SidebarPanelContent({ className, ...props }: React.HTMLAttribute
 export function SidebarInset({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
   return (
     <main
-      className={["sh-ui-sidebar-inset", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar-inset", className)}
       {...props}
     />
   );
@@ -487,7 +486,7 @@ export function SidebarInset({ className, ...props }: React.HTMLAttributes<HTMLE
 export function SidebarHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={["sh-ui-sidebar__header", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__header", className)}
       {...props}
     />
   );
@@ -497,7 +496,7 @@ export function SidebarHeader({ className, ...props }: React.HTMLAttributes<HTML
 export function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={["sh-ui-sidebar__footer", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__footer", className)}
       {...props}
     />
   );
@@ -507,7 +506,7 @@ export function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTML
 export function SidebarContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={["sh-ui-sidebar__content", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__content", className)}
       {...props}
     />
   );
@@ -517,7 +516,7 @@ export function SidebarContent({ className, ...props }: React.HTMLAttributes<HTM
 export function SidebarSeparator({ className, ...props }: React.HTMLAttributes<HTMLHRElement>) {
   return (
     <hr
-      className={["sh-ui-sidebar__separator", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__separator", className)}
       {...props}
     />
   );
@@ -529,7 +528,7 @@ export function SidebarSeparator({ className, ...props }: React.HTMLAttributes<H
 export function SidebarGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={["sh-ui-sidebar__group", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__group", className)}
       {...props}
     />
   );
@@ -539,7 +538,7 @@ export function SidebarGroup({ className, ...props }: React.HTMLAttributes<HTMLD
 export function SidebarGroupLabel({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={["sh-ui-sidebar__group-label", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__group-label", className)}
       {...props}
     />
   );
@@ -549,7 +548,7 @@ export function SidebarGroupLabel({ className, ...props }: React.HTMLAttributes<
 export function SidebarGroupContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={["sh-ui-sidebar__group-content", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__group-content", className)}
       {...props}
     />
   );
@@ -561,7 +560,7 @@ export function SidebarGroupContent({ className, ...props }: React.HTMLAttribute
 export function SidebarMenu({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) {
   return (
     <ul
-      className={["sh-ui-sidebar__menu", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__menu", className)}
       {...props}
     />
   );
@@ -571,7 +570,7 @@ export function SidebarMenu({ className, ...props }: React.HTMLAttributes<HTMLUL
 export function SidebarMenuItem({ className, ...props }: React.HTMLAttributes<HTMLLIElement>) {
   return (
     <li
-      className={["sh-ui-sidebar__menu-item", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__menu-item", className)}
       {...props}
     />
   );
@@ -637,22 +636,16 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
       [onClick, panelId, ctx]
     );
 
-    const cls = [
-      "sh-ui-sidebar__menu-button",
+    const cls = cn("sh-ui-sidebar__menu-button",
       `sh-ui-sidebar__menu-button--${size}`,
-      className,
-    ]
-      .filter(Boolean)
-      .join(" ");
+      className);
 
     if (asChild && React.isValidElement(children)) {
       const child = children as React.ReactElement<Record<string, unknown>>;
       const merged: Record<string, unknown> = {
         ...props,
         onClick: handleClick,
-        className: [(child.props.className as string) || "", cls]
-          .filter(Boolean)
-          .join(" "),
+        className: cn((child.props.className as string) || "", cls),
         "data-active": resolvedIsActive || undefined,
       };
       return React.cloneElement(child, merged);
@@ -679,7 +672,7 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
 export function SidebarMenuSub({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) {
   return (
     <ul
-      className={["sh-ui-sidebar__menu-sub", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__menu-sub", className)}
       {...props}
     />
   );
@@ -689,7 +682,7 @@ export function SidebarMenuSub({ className, ...props }: React.HTMLAttributes<HTM
 export function SidebarMenuSubItem({ className, ...props }: React.HTMLAttributes<HTMLLIElement>) {
   return (
     <li
-      className={["sh-ui-sidebar__menu-sub-item", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-sidebar__menu-sub-item", className)}
       {...props}
     />
   );
@@ -721,21 +714,15 @@ export const SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarM
     const tocActive = useTOCActiveId();
     const resolvedIsActive =
       isActive ?? (sectionId != null ? tocActive === sectionId : undefined);
-    const cls = [
-      "sh-ui-sidebar__menu-sub-button",
+    const cls = cn("sh-ui-sidebar__menu-sub-button",
       `sh-ui-sidebar__menu-sub-button--${size}`,
-      className,
-    ]
-      .filter(Boolean)
-      .join(" ");
+      className);
 
     if (asChild && React.isValidElement(children)) {
       const child = children as React.ReactElement<Record<string, unknown>>;
       const merged: Record<string, unknown> = {
         ...props,
-        className: [(child.props.className as string) || "", cls]
-          .filter(Boolean)
-          .join(" "),
+        className: cn((child.props.className as string) || "", cls),
         "data-active": resolvedIsActive || undefined,
       };
       return React.cloneElement(child, merged);
@@ -859,14 +846,10 @@ export function SidebarCollapsibleTrigger({
 }: SidebarCollapsibleTriggerProps) {
   const { open, toggle, flyoutMode, flyoutOpen } = useCollapsible();
 
-  const cls = [
-    "sh-ui-sidebar__menu-button",
+  const cls = cn("sh-ui-sidebar__menu-button",
     `sh-ui-sidebar__menu-button--${size}`,
     "sh-ui-sidebar__collapsible-trigger",
-    className,
-  ]
-    .filter(Boolean)
-    .join(" ");
+    className);
 
   const isOpen = flyoutMode ? flyoutOpen : open;
 

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

@@ -1,9 +1,7 @@
 import * as React from "react";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 /**
  * 로딩 중 콘텐츠 자리를 채우는 placeholder 박스 (Tailwind utility 변종).
  * `aria-hidden`이 기본 적용되므로 스크린리더에 노출되지 않는다.
@@ -15,7 +13,7 @@ export const Skeleton = React.forwardRef<
   <div
     ref={ref}
     aria-hidden="true"
-    className={cx(
+    className={cn(
       "block w-full h-4 bg-background-muted rounded-[calc(var(--radius)-2px)] animate-[sh-ui-skeleton-pulse_1.6s_ease-in-out_infinite] motion-reduce:animate-none",
       className,
     )}

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

@@ -1,10 +1,8 @@
 import * as React from "react";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 /**
  * 로딩 중 콘텐츠 자리를 채우는 placeholder 박스. 폭/높이는 인라인 스타일이나
  * 클래스로 직접 지정한다. `aria-hidden`이 기본 적용되므로 스크린리더에 노출되지
@@ -17,7 +15,7 @@ export const Skeleton = React.forwardRef<
   <div
     ref={ref}
     aria-hidden="true"
-    className={cx("sh-ui-skeleton", className)}
+    className={cn("sh-ui-skeleton", className)}
     {...props}
   />
 ));

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

@@ -2,10 +2,8 @@
 
 import * as React from "react";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 function clamp(n: number, min: number, max: number) {
   return Math.min(max, Math.max(min, n));
 }
@@ -109,7 +107,7 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
         <div
           ref={ref}
           {...rest}
-          className={cx(
+          className={cn(
             "relative w-full py-[var(--space-2)] select-none",
             disabled && "opacity-[var(--opacity-disabled)] pointer-events-none",
             className,
@@ -171,7 +169,7 @@ export const SliderTrack = React.forwardRef<HTMLDivElement, React.HTMLAttributes
     return (
       <div
         ref={mergedRef}
-        className={cx(
+        className={cn(
           "relative w-full h-1.5 bg-background-muted rounded-full cursor-pointer touch-none",
           className,
         )}
@@ -196,7 +194,7 @@ export const SliderRange = React.forwardRef<HTMLDivElement, React.HTMLAttributes
     return (
       <div
         ref={ref}
-        className={cx(
+        className={cn(
           "absolute top-0 left-0 h-full bg-primary rounded-full pointer-events-none",
           className,
         )}
@@ -243,7 +241,7 @@ export const SliderThumb = React.forwardRef<
       aria-valuenow={value}
       aria-disabled={disabled || undefined}
       onKeyDown={onKeyDown}
-      className={cx(
+      className={cn(
         "absolute top-1/2 w-4 h-4 -ml-2 -translate-y-1/2 bg-background border-2 border-primary rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.1)] cursor-grab transition-transform duration-[80ms] active:cursor-grabbing active:scale-110 active:-translate-y-1/2 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5 [@media(hover:none)_and_(pointer:coarse)]:-ml-2.5",
         className,
       )}

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

@@ -3,10 +3,8 @@
 import * as React from "react";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 function clamp(n: number, min: number, max: number) {
   return Math.min(max, Math.max(min, n));
 }
@@ -128,7 +126,7 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
         <div
           ref={ref}
           {...rest}
-          className={cx(
+          className={cn(
             "sh-ui-slider",
             disabled && "sh-ui-slider--disabled",
             className,
@@ -199,7 +197,7 @@ export const SliderTrack = React.forwardRef<
   return (
     <div
       ref={mergedRef}
-      className={cx("sh-ui-slider__track", className)}
+      className={cn("sh-ui-slider__track", className)}
       onPointerDown={onPointerDown}
       {...props}
     >
@@ -225,7 +223,7 @@ export const SliderRange = React.forwardRef<
   return (
     <div
       ref={ref}
-      className={cx("sh-ui-slider__range", className)}
+      className={cn("sh-ui-slider__range", className)}
       style={{ width: percent, ...style }}
       {...props}
     />
@@ -291,7 +289,7 @@ export const SliderThumb = React.forwardRef<
       aria-valuenow={value}
       aria-disabled={disabled || undefined}
       onKeyDown={onKeyDown}
-      className={cx("sh-ui-slider__thumb", className)}
+      className={cn("sh-ui-slider__thumb", className)}
       style={{ left: percent, ...style }}
       {...props}
     />

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

@@ -1,10 +1,8 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 const spinnerVariants = cva(
   "inline-flex items-center justify-center align-middle text-current",
   {
@@ -39,12 +37,12 @@ export const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(
         role="status"
         aria-live="polite"
         aria-label={ariaLabel}
-        className={cx(spinnerVariants({ size }), className)}
+        className={cn(spinnerVariants({ size }), className)}
         {...props}
       >
         <span
           aria-hidden
-          className={cx(
+          className={cn(
             "inline-block w-full h-full rounded-full border-current border-t-transparent opacity-80 animate-[sh-ui-spinner-rotate_0.8s_linear_infinite] motion-reduce:[animation-duration:3s]",
             ringBorder,
           )}

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

@@ -1,10 +1,8 @@
 import * as React from "react";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export type SpinnerSize = "sm" | "md" | "lg";
 
 export interface SpinnerProps
@@ -29,7 +27,7 @@ export const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(
         role="status"
         aria-live="polite"
         aria-label={ariaLabel}
-        className={cx("sh-ui-spinner", `sh-ui-spinner--${size}`, className)}
+        className={cn("sh-ui-spinner", `sh-ui-spinner--${size}`, className)}
         {...props}
       >
         <span className="sh-ui-spinner__ring" aria-hidden />

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

@@ -2,10 +2,8 @@ import * as React from "react";
 import { Switch as BaseSwitch } from "@base-ui/react/switch";
 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 switchRoot = cva(
   "inline-flex items-center border-none rounded-full bg-background-muted cursor-pointer shrink-0 p-0.5 transition-colors duration-150 hover:not-data-[disabled]:bg-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[checked]:bg-primary data-[checked]:hover:not-data-[disabled]:bg-primary-hover data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none",
   {
@@ -46,11 +44,11 @@ export const Switch = React.forwardRef<HTMLElement, SwitchProps>(
   ({ className, size = "md", ...props }, ref) => (
     <BaseSwitch.Root
       ref={ref}
-      className={cx(switchRoot({ size }), className)}
+      className={cn(switchRoot({ size }), className)}
       {...props}
     >
       <BaseSwitch.Thumb
-        className={cx(
+        className={cn(
           switchThumb({ size }),
           size === "sm" && "data-[checked]:translate-x-3.5",
           size === "md" && "data-[checked]:translate-x-[1.125rem]",

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

@@ -2,10 +2,8 @@ import * as React from "react";
 import { Switch as BaseSwitch } from "@base-ui/react/switch";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 /* ───────────── Switch ───────────── */
 
 export type SwitchProps = Omit<
@@ -31,7 +29,7 @@ export const Switch = React.forwardRef<HTMLElement, SwitchProps>(
   ({ className, size = "md", ...props }, ref) => (
     <BaseSwitch.Root
       ref={ref}
-      className={cx("sh-ui-switch", `sh-ui-switch--${size}`, className)}
+      className={cn("sh-ui-switch", `sh-ui-switch--${size}`, className)}
       {...props}
     >
       <BaseSwitch.Thumb className="sh-ui-switch__thumb" />

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

@@ -3,10 +3,8 @@
 import * as React from "react";
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
 export type TabsVariant = "underline" | "pill" | "plain";
@@ -26,7 +24,7 @@ export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
       <BaseTabs.Root
         ref={ref}
         data-variant={variant}
-        className={cx("flex flex-col gap-[var(--space-3)] w-full data-[orientation=vertical]:flex-row", className)}
+        className={cn("flex flex-col gap-[var(--space-3)] w-full data-[orientation=vertical]:flex-row", className)}
         {...props}
       />
     </TabsContext.Provider>
@@ -46,7 +44,7 @@ export const TabsList = React.forwardRef<
     <BaseTabs.List
       ref={ref}
       data-variant={variant}
-      className={cx(
+      className={cn(
         "relative inline-flex items-center gap-[var(--space-1)] w-fit",
         listVariantClasses,
         className,
@@ -66,7 +64,7 @@ export const TabsTrigger = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseTabs.Tab
     ref={ref}
-    className={cx(
+    className={cn(
       "relative z-[1] inline-flex items-center justify-center gap-1.5 py-[var(--space-2)] px-[var(--space-3)] bg-transparent text-foreground-muted border-0 text-[length:var(--text-sm)] font-medium leading-none cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] select-none whitespace-nowrap hover:not-disabled:not-data-[selected]:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[selected]:text-foreground disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed",
       triggerVariantClasses,
       className,
@@ -85,7 +83,7 @@ export const TabsIndicator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseTabs.Indicator
     ref={ref}
-    className={cx(
+    className={cn(
       "absolute z-0 pointer-events-none transition-[top,left,width,height] duration-[180ms] data-[activation-direction=none]:transition-none top-[var(--active-tab-top)] left-[var(--active-tab-left)] w-[var(--active-tab-width)] h-[var(--active-tab-height)]",
       indicatorVariantClasses,
       className,
@@ -101,7 +99,7 @@ export const TabsContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseTabs.Panel
     ref={ref}
-    className={cx(
+    className={cn(
       "outline-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 focus-visible:rounded-[var(--radius)]",
       className,
     )}

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

@@ -4,10 +4,8 @@ import * as React from "react";
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
 export type TabsVariant = "underline" | "pill" | "plain";
@@ -41,7 +39,7 @@ export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
       <BaseTabs.Root
         ref={ref}
         data-variant={variant}
-        className={cx("sh-ui-tabs", className)}
+        className={cn("sh-ui-tabs", className)}
         {...props}
       />
     </TabsContext.Provider>
@@ -54,7 +52,7 @@ export const TabsList = React.forwardRef<
   HTMLDivElement,
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.List>>
 >(({ className, ...props }, ref) => (
-  <BaseTabs.List ref={ref} className={cx("sh-ui-tabs__list", className)} {...props} />
+  <BaseTabs.List ref={ref} className={cn("sh-ui-tabs__list", className)} {...props} />
 ));
 TabsList.displayName = "TabsList";
 
@@ -63,7 +61,7 @@ export const TabsTrigger = React.forwardRef<
   HTMLButtonElement,
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.Tab>>
 >(({ className, ...props }, ref) => (
-  <BaseTabs.Tab ref={ref} className={cx("sh-ui-tabs__trigger", className)} {...props} />
+  <BaseTabs.Tab ref={ref} className={cn("sh-ui-tabs__trigger", className)} {...props} />
 ));
 TabsTrigger.displayName = "TabsTrigger";
 
@@ -74,7 +72,7 @@ export const TabsIndicator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseTabs.Indicator
     ref={ref}
-    className={cx("sh-ui-tabs__indicator", className)}
+    className={cn("sh-ui-tabs__indicator", className)}
     {...props}
   />
 ));
@@ -85,7 +83,7 @@ export const TabsContent = React.forwardRef<
   HTMLDivElement,
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.Panel>>
 >(({ className, ...props }, ref) => (
-  <BaseTabs.Panel ref={ref} className={cx("sh-ui-tabs__content", className)} {...props} />
+  <BaseTabs.Panel ref={ref} className={cn("sh-ui-tabs__content", className)} {...props} />
 ));
 TabsContent.displayName = "TabsContent";
 

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

@@ -1,16 +1,14 @@
 import * as React from "react";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => (
     <textarea
       ref={ref}
-      className={cx(
+      className={cn(
         "block w-full min-h-20 px-[var(--space-3)] py-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-normal resize-y transition-[border-color,box-shadow] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:not-focus:border-border-strong focus:outline-none focus:border-foreground focus:shadow-[0_0_0_1px_var(--foreground)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle read-only:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--danger)] [@media(hover:none)_and_(pointer:coarse)]:text-[length:var(--text-base)]",
         className,
       )}

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

@@ -1,11 +1,9 @@
 import * as React from "react";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /**
  * 여러 줄 텍스트 입력. 네이티브 `<textarea>` 위에 sh-ui 토큰 스타일만 입혔다.
@@ -16,7 +14,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         ref={ref}
-        className={cx("sh-ui-textarea", className)}
+        className={cn("sh-ui-textarea", className)}
         {...props}
       />
     );