sh-ui-cli 0.45.2 → 0.45.3

package/data/registry/react/components/rich-text-editor/index.tailwind.tsx

@@ -5,6 +5,7 @@ import { useEditor, EditorContent, type Editor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
 import Link from "@tiptap/extension-link";
+import { cn } from "@SH_UI_UTILS@";
 import {
   BoldIcon, ItalicIcon, StrikethroughIcon,
   Heading1Icon, Heading2Icon, Heading3Icon,
@@ -26,9 +27,6 @@ export interface RichTextEditorProps {
   "aria-label"?: string;
 }
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 export function RichTextEditor({
   value: valueProp, defaultValue, onChange, placeholder, readOnly = false, hideToolbar = false,
@@ -68,7 +66,7 @@ export function RichTextEditor({
 
   return (
     <div
-      className={cx(
+      className={cn(
         "sh-ui-rte flex flex-col border border-border rounded-[var(--radius)] bg-background overflow-hidden transition-[border-color] duration-[var(--duration-fast)] focus-within:border-foreground focus-within:outline-[length:var(--border-width-strong)] focus-within:outline-foreground focus-within:outline-offset-2 data-[readonly]:bg-background-subtle motion-reduce:transition-none",
         className,
       )}
@@ -158,7 +156,7 @@ function ToolbarButton({ editor, label, icon, isActive, canRun, run, disabled }:
   return (
     <button
       type="button"
-      className={cx(
+      className={cn(
         "inline-flex items-center justify-center w-7 h-7 p-0 bg-transparent text-foreground-muted border border-transparent rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[color,background-color,border-color] duration-[var(--duration-fast)] hover:not-disabled:text-foreground hover:not-disabled:bg-background hover:not-disabled:border-border focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-1 disabled:opacity-50 disabled:cursor-not-allowed motion-reduce:transition-none",
         isActive && "text-foreground bg-background border-border-strong",
       )}

package/data/registry/react/components/rich-text-editor/index.tsx

@@ -5,6 +5,7 @@ import { useEditor, EditorContent, type Editor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
 import Link from "@tiptap/extension-link";
+import { cn } from "@SH_UI_UTILS@";
 import {
   BoldIcon,
   ItalicIcon,
@@ -51,9 +52,6 @@ export interface RichTextEditorProps {
   "aria-label"?: string;
 }
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /**
  * Tiptap 기반 리치 텍스트 에디터.
@@ -117,7 +115,7 @@ export function RichTextEditor({
 
   return (
     <div
-      className={cx("sh-ui-rte", className)}
+      className={cn("sh-ui-rte", className)}
       data-readonly={readOnly || undefined}
       style={
         {
@@ -330,7 +328,7 @@ function ToolbarButton({
   return (
     <button
       type="button"
-      className={cx("sh-ui-rte__btn", isActive && "is-active")}
+      className={cn("sh-ui-rte__btn", isActive && "is-active")}
       aria-label={label}
       aria-pressed={isActive || undefined}
       title={label}

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

@@ -3,17 +3,15 @@
 import * as React from "react";
 import { Select as BaseSelect } from "@base-ui/react/select";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export const Select = BaseSelect.Root;
 
 export function SelectValue({ placeholder, className, ...props }: { placeholder?: string; className?: string } & Omit<
   React.ComponentPropsWithoutRef<typeof BaseSelect.Value>, "children"
 >) {
   return (
-    <BaseSelect.Value className={cx("flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap", className)} {...props}>
+    <BaseSelect.Value className={cn("flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap", className)} {...props}>
       {(value) =>
         value !== null && value !== undefined && value !== "" ? (
           (value as React.ReactNode)
@@ -31,7 +29,7 @@ export const SelectTrigger = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <BaseSelect.Trigger
     ref={ref}
-    className={cx(
+    className={cn(
       "inline-flex items-center justify-between gap-[var(--space-2)] 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 cursor-pointer transition-[border-color,background-color] duration-[var(--duration-fast)] select-none hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[popup-open]:border-border-strong disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none",
       className,
     )}
@@ -61,7 +59,7 @@ export const SelectContent = React.forwardRef<
     <BaseSelect.Positioner className="outline-none z-[var(--z-dropdown)]" sideOffset={4} align="start">
       <BaseSelect.Popup
         ref={ref}
-        className={cx(
+        className={cn(
           "min-w-[var(--anchor-width,10rem)] max-h-[min(24rem,var(--available-height,24rem))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_4px_6px_-1px_rgba(0,0,0,0.08),0_2px_4px_-2px_rgba(0,0,0,0.05)] text-[length:var(--text-sm)] origin-[var(--transform-origin)] animate-[sh-ui-select-in_140ms_ease-out] data-[ending-style]:animate-[sh-ui-select-out_100ms_ease-in_forwards] motion-reduce:animate-none motion-reduce:data-[ending-style]:animate-none",
           className,
         )}
@@ -82,7 +80,7 @@ export const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseSelect.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,
     )}
@@ -97,7 +95,7 @@ export const SelectItem = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <BaseSelect.Item
     ref={ref}
-    className={cx(
+    className={cn(
       "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",
       className,
     )}
@@ -122,7 +120,7 @@ export const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseSelect.Separator
     ref={ref}
-    className={cx("h-px bg-border my-[var(--space-1)]", className)}
+    className={cn("h-px bg-border my-[var(--space-1)]", className)}
     {...props}
   />
 ));
@@ -178,7 +176,7 @@ export function MultiSelectValue({
 } & Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Value>, "children" | "render">) {
   const { remove, clear } = useMultiSelect();
   return (
-    <BaseSelect.Value className={cx("flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap", className)} {...props}>
+    <BaseSelect.Value className={cn("flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap", className)} {...props}>
       {(value) => {
         const arr = Array.isArray(value) ? (value as string[]) : [];
         if (arr.length === 0) return <span className="text-foreground-subtle">{placeholder}</span>;

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

@@ -4,10 +4,8 @@ import * as React from "react";
 import { Select as BaseSelect } from "@base-ui/react/select";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export const Select = BaseSelect.Root;
 
 /** shadcn 호환: <SelectValue placeholder="..." /> */
@@ -20,7 +18,7 @@ export function SelectValue({
   "children"
 >) {
   return (
-    <BaseSelect.Value className={cx("sh-ui-select__value", className)} {...props}>
+    <BaseSelect.Value className={cn("sh-ui-select__value", className)} {...props}>
       {(value) =>
         value !== null && value !== undefined && value !== "" ? (
           (value as React.ReactNode)
@@ -38,7 +36,7 @@ export const SelectTrigger = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <BaseSelect.Trigger
     ref={ref}
-    className={cx("sh-ui-select__trigger", className)}
+    className={cn("sh-ui-select__trigger", className)}
     {...props}
   >
     {children}
@@ -74,7 +72,7 @@ export const SelectContent = React.forwardRef<
     >
       <BaseSelect.Popup
         ref={ref}
-        className={cx("sh-ui-select__content", className)}
+        className={cn("sh-ui-select__content", className)}
         {...props}
       >
         {children}
@@ -92,7 +90,7 @@ export const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseSelect.GroupLabel
     ref={ref}
-    className={cx("sh-ui-select__label", className)}
+    className={cn("sh-ui-select__label", className)}
     {...props}
   />
 ));
@@ -104,7 +102,7 @@ export const SelectItem = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <BaseSelect.Item
     ref={ref}
-    className={cx("sh-ui-select__item", className)}
+    className={cn("sh-ui-select__item", className)}
     {...props}
   >
     <BaseSelect.ItemIndicator className="sh-ui-select__indicator" aria-hidden>
@@ -131,7 +129,7 @@ export const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseSelect.Separator
     ref={ref}
-    className={cx("sh-ui-select__separator", className)}
+    className={cn("sh-ui-select__separator", className)}
     {...props}
   />
 ));
@@ -223,7 +221,7 @@ export function MultiSelectValue({
 >) {
   const { remove, clear } = useMultiSelect();
   return (
-    <BaseSelect.Value className={cx("sh-ui-select__value", className)} {...props}>
+    <BaseSelect.Value className={cn("sh-ui-select__value", className)} {...props}>
       {(value) => {
         const arr = Array.isArray(value) ? (value as string[]) : [];
         if (arr.length === 0) {

package/data/registry/react/components/separator/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@";
 export type SeparatorOrientation = "horizontal" | "vertical";
 
 export interface SeparatorProps
@@ -33,7 +31,7 @@ export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
         aria-orientation={decorative ? undefined : orientation}
         aria-hidden={decorative || undefined}
         data-orientation={orientation}
-        className={cx("bg-border shrink-0", sizing, className)}
+        className={cn("bg-border shrink-0", sizing, className)}
         {...props}
       />
     );

package/data/registry/react/components/separator/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 SeparatorOrientation = "horizontal" | "vertical";
 
 export interface SeparatorProps
@@ -35,7 +33,7 @@ export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
         aria-orientation={decorative ? undefined : orientation}
         aria-hidden={decorative || undefined}
         data-orientation={orientation}
-        className={cx(
+        className={cn(
           "sh-ui-separator",
           `sh-ui-separator--${orientation}`,
           className,

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 = (