sh-ui-cli 0.45.2 → 0.46.0

package/data/registry/react/components/sidebar/index.tailwind.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";
 
@@ -116,14 +117,12 @@ export function SidebarProvider({
   return (
     <SidebarContext.Provider value={value}>
       <div
-        className={[
-          "[--sidebar-width:16rem] [--sidebar-width-icon:3rem] [--sidebar-width-mobile:18rem]",
+        className={cn("[--sidebar-width:16rem] [--sidebar-width-icon:3rem] [--sidebar-width-mobile:18rem]",
           "[--sidebar-bg:var(--background-subtle)] [--sidebar-fg:var(--foreground)] [--sidebar-border:var(--border)]",
           "[--sidebar-accent:var(--background-muted)] [--sidebar-accent-fg:var(--foreground)]",
           "flex w-full",
           embedded ? "min-h-0 h-full" : "min-h-[100svh]",
-          className,
-        ].filter(Boolean).join(" ")}
+          className)}
         style={style}
         data-embedded={embedded || undefined}
         data-panel-open={activePanel ? "true" : undefined}
@@ -160,7 +159,7 @@ export function Sidebar({ side = "left", variant = "sidebar", collapsible = "off
   if (collapsible === "none") {
     return wrap(
       <aside
-        className={[sidebarRoot, "h-[100svh] sticky top-0", className].filter(Boolean).join(" ")}
+        className={cn(sidebarRoot, "h-[100svh] sticky top-0", className)}
         data-side={side}
         data-variant={variant}
         {...props}
@@ -180,7 +179,7 @@ export function Sidebar({ side = "left", variant = "sidebar", collapsible = "off
 
   return wrap(
     <aside
-      className={[sidebarRoot, className].filter(Boolean).join(" ")}
+      className={cn(sidebarRoot, className)}
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -208,13 +207,11 @@ function MobileSidebar({ side, className, openMobile, setOpenMobile, children, .
       )}
       <aside
         ref={asideRef}
-        className={[
-          "fixed top-0 bottom-0 w-[var(--sidebar-width-mobile)] z-[var(--z-overlay)] transition-transform duration-[var(--duration-slow)] flex flex-col bg-[var(--sidebar-bg)] text-[var(--sidebar-fg)] motion-reduce:transition-none",
+        className={cn("fixed top-0 bottom-0 w-[var(--sidebar-width-mobile)] z-[var(--z-overlay)] transition-transform duration-[var(--duration-slow)] flex flex-col bg-[var(--sidebar-bg)] text-[var(--sidebar-fg)] motion-reduce:transition-none",
           side === "left"
             ? "left-0 border-r border-[var(--sidebar-border)] data-[state=open]:translate-x-0 data-[state=closed]:-translate-x-full"
             : "right-0 border-l border-[var(--sidebar-border)] data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full",
-          className,
-        ].filter(Boolean).join(" ")}
+          className)}
         data-side={side}
         data-state={openMobile ? "open" : "closed"}
         role="dialog"
@@ -236,10 +233,8 @@ export function SidebarTrigger({ className, onClick, ...props }: SidebarTriggerP
     <button
       type="button"
       aria-label="Toggle Sidebar"
-      className={[
-        "inline-flex items-center justify-center w-8 h-8 border border-transparent bg-transparent text-foreground-muted rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color,color,border-color] duration-[var(--duration-fast)] hover:bg-[var(--sidebar-accent)] 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,
-      ].filter(Boolean).join(" ")}
+      className={cn("inline-flex items-center justify-center w-8 h-8 border border-transparent bg-transparent text-foreground-muted rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[background-color,color,border-color] duration-[var(--duration-fast)] hover:bg-[var(--sidebar-accent)] 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)}
       onClick={(e) => { onClick?.(e); toggleSidebar(); }}
       {...props}
     >
@@ -267,10 +262,8 @@ export function SidebarPanel({ id, className, children, ...props }: SidebarPanel
   return (
     <aside
       ref={ref}
-      className={[
-        "[--sidebar-panel-width:20rem] flex flex-col w-[var(--sidebar-panel-width)] shrink-0 bg-background border-r border-[var(--sidebar-border)] relative z-[4] overflow-hidden animate-[sh-ui-sidebar-panel-in_180ms_ease-out] data-[state=closed]:hidden max-md:fixed max-md:top-0 max-md:bottom-0 max-md:left-0 max-md:w-[min(var(--sidebar-panel-width),90vw)] max-md:z-[var(--z-modal)] max-md:shadow-[0_10px_30px_rgba(0,0,0,0.15)] motion-reduce:animate-none",
-        className,
-      ].filter(Boolean).join(" ")}
+      className={cn("[--sidebar-panel-width:20rem] flex flex-col w-[var(--sidebar-panel-width)] shrink-0 bg-background border-r border-[var(--sidebar-border)] relative z-[4] overflow-hidden animate-[sh-ui-sidebar-panel-in_180ms_ease-out] data-[state=closed]:hidden max-md:fixed max-md:top-0 max-md:bottom-0 max-md:left-0 max-md:w-[min(var(--sidebar-panel-width),90vw)] max-md:z-[var(--z-modal)] max-md:shadow-[0_10px_30px_rgba(0,0,0,0.15)] motion-reduce:animate-none",
+        className)}
       data-state={open ? "open" : "closed"}
       role={isMobile ? "dialog" : undefined}
       aria-modal={open && isMobile ? "true" : undefined}
@@ -293,7 +286,7 @@ export function SidebarPanel({ id, className, children, ...props }: SidebarPanel
 export function SidebarPanelHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={["flex items-center gap-[var(--space-2)] py-3.5 px-[var(--space-4)] border-b border-[var(--sidebar-border)] font-semibold text-[0.9375rem]", className].filter(Boolean).join(" ")}
+      className={cn("flex items-center gap-[var(--space-2)] py-3.5 px-[var(--space-4)] border-b border-[var(--sidebar-border)] font-semibold text-[0.9375rem]", className)}
       {...props}
     />
   );
@@ -302,58 +295,56 @@ export function SidebarPanelHeader({ className, ...props }: React.HTMLAttributes
 export function SidebarPanelContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={["flex-1 min-h-0 overflow-y-auto py-[var(--space-3)] px-[var(--space-4)] pb-[var(--space-4)]", className].filter(Boolean).join(" ")}
+      className={cn("flex-1 min-h-0 overflow-y-auto py-[var(--space-3)] px-[var(--space-4)] pb-[var(--space-4)]", className)}
       {...props}
     />
   );
 }
 
 export function SidebarInset({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
-  return <main className={["flex-1 min-w-0 bg-background flex flex-col", className].filter(Boolean).join(" ")} {...props} />;
+  return <main className={cn("flex-1 min-w-0 bg-background flex flex-col", className)} {...props} />;
 }
 
 export function SidebarHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={["flex flex-col gap-[var(--space-2)] p-[var(--space-2)] overflow-hidden", className].filter(Boolean).join(" ")} {...props} />;
+  return <div className={cn("flex flex-col gap-[var(--space-2)] p-[var(--space-2)] overflow-hidden", className)} {...props} />;
 }
 
 export function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={["flex flex-col gap-[var(--space-2)] p-[var(--space-2)] overflow-hidden", className].filter(Boolean).join(" ")} {...props} />;
+  return <div className={cn("flex flex-col gap-[var(--space-2)] p-[var(--space-2)] overflow-hidden", className)} {...props} />;
 }
 
 export function SidebarContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={["flex flex-col flex-1 min-h-0 overflow-y-auto gap-0", className].filter(Boolean).join(" ")} {...props} />;
+  return <div className={cn("flex flex-col flex-1 min-h-0 overflow-y-auto gap-0", className)} {...props} />;
 }
 
 export function SidebarSeparator({ className, ...props }: React.HTMLAttributes<HTMLHRElement>) {
-  return <hr className={["my-[var(--space-1)] mx-[var(--space-2)] border-0 border-t border-[var(--sidebar-border)] w-auto", className].filter(Boolean).join(" ")} {...props} />;
+  return <hr className={cn("my-[var(--space-1)] mx-[var(--space-2)] border-0 border-t border-[var(--sidebar-border)] w-auto", className)} {...props} />;
 }
 
 export function SidebarGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={["flex flex-col p-[var(--space-2)] min-w-0", className].filter(Boolean).join(" ")} {...props} />;
+  return <div className={cn("flex flex-col p-[var(--space-2)] min-w-0", className)} {...props} />;
 }
 
 export function SidebarGroupLabel({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={[
-        "flex items-center h-8 px-[var(--space-2)] text-[length:var(--text-xs)] font-medium text-foreground-muted rounded-[calc(var(--radius)-2px)] [[data-state=collapsed][data-collapsible=icon]_&]:hidden",
-        className,
-      ].filter(Boolean).join(" ")}
+      className={cn("flex items-center h-8 px-[var(--space-2)] text-[length:var(--text-xs)] font-medium text-foreground-muted rounded-[calc(var(--radius)-2px)] [[data-state=collapsed][data-collapsible=icon]_&]:hidden",
+        className)}
       {...props}
     />
   );
 }
 
 export function SidebarGroupContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={["w-full text-[length:var(--text-sm)]", className].filter(Boolean).join(" ")} {...props} />;
+  return <div className={cn("w-full text-[length:var(--text-sm)]", className)} {...props} />;
 }
 
 export function SidebarMenu({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) {
-  return <ul className={["list-none m-0 p-0 flex flex-col min-w-0 gap-0", className].filter(Boolean).join(" ")} {...props} />;
+  return <ul className={cn("list-none m-0 p-0 flex flex-col min-w-0 gap-0", className)} {...props} />;
 }
 
 export function SidebarMenuItem({ className, ...props }: React.HTMLAttributes<HTMLLIElement>) {
-  return <li className={["relative m-0", className].filter(Boolean).join(" ")} {...props} />;
+  return <li className={cn("relative m-0", className)} {...props} />;
 }
 
 export interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -385,14 +376,14 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
       if (!e.defaultPrevented && panelId != null && ctx) ctx.setActivePanel(panelId);
     }, [onClick, panelId, ctx]);
 
-    const cls = [menuButtonBase, menuButtonSize[size], className].filter(Boolean).join(" ");
+    const cls = cn(menuButtonBase, menuButtonSize[size], 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);
@@ -409,17 +400,15 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
 export function SidebarMenuSub({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) {
   return (
     <ul
-      className={[
-        "list-none mt-0.5 ml-3.5 pt-0.5 pr-0 pb-0.5 pl-2.5 border-l border-[var(--sidebar-border)] flex flex-col gap-0.5 min-w-0 [[data-state=collapsed][data-collapsible=icon]_&]:hidden",
-        className,
-      ].filter(Boolean).join(" ")}
+      className={cn("list-none mt-0.5 ml-3.5 pt-0.5 pr-0 pb-0.5 pl-2.5 border-l border-[var(--sidebar-border)] flex flex-col gap-0.5 min-w-0 [[data-state=collapsed][data-collapsible=icon]_&]:hidden",
+        className)}
       {...props}
     />
   );
 }
 
 export function SidebarMenuSubItem({ className, ...props }: React.HTMLAttributes<HTMLLIElement>) {
-  return <li className={["relative", className].filter(Boolean).join(" ")} {...props} />;
+  return <li className={cn("relative", className)} {...props} />;
 }
 
 export interface SidebarMenuSubButtonProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -436,13 +425,13 @@ export const SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarM
   function SidebarMenuSubButton({ className, isActive, size = "md", asChild, sectionId, children, ...props }, ref) {
     const tocActive = useTOCActiveId();
     const resolvedIsActive = isActive ?? (sectionId != null ? tocActive === sectionId : undefined);
-    const cls = [menuSubButtonBase, size === "sm" && "text-[length:var(--text-xs)]", className].filter(Boolean).join(" ");
+    const cls = cn(menuSubButtonBase, size === "sm" && "text-[length:var(--text-xs)]", 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);
@@ -503,7 +492,7 @@ export interface SidebarCollapsibleTriggerProps extends React.ButtonHTMLAttribut
 
 export function SidebarCollapsibleTrigger({ className, size = "md", children, onClick, ...props }: SidebarCollapsibleTriggerProps) {
   const { open, toggle, flyoutMode, flyoutOpen } = useCollapsible();
-  const cls = [menuButtonBase, menuButtonSize[size], className].filter(Boolean).join(" ");
+  const cls = cn(menuButtonBase, menuButtonSize[size], className);
   const isOpen = flyoutMode ? flyoutOpen : open;
 
   const content = (

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 />