sh-ui-cli 0.45.2 → 0.46.0

package/data/registry/react/components/code-panel/index.tsx

@@ -2,10 +2,8 @@ import { codeToHtml } from "shiki";
 import { CodePanelCopyButton } from "./copy";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export interface CodePanelProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   /** 하이라이팅할 코드 문자열. children을 제공하지 않을 때 필수. */
@@ -56,7 +54,7 @@ export async function CodePanel({
   children,
   ...rest
 }: CodePanelProps) {
-  const classes = cx("sh-ui-code", className);
+  const classes = cn("sh-ui-code", className);
 
   if (children !== undefined) {
     return (
@@ -104,7 +102,7 @@ export function CodePanelHeader({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={cx("sh-ui-code__header", className)} {...props}>
+    <div className={cn("sh-ui-code__header", className)} {...props}>
       {children}
     </div>
   );
@@ -119,7 +117,7 @@ export function CodePanelFilename({
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) {
   return (
-    <span className={cx("sh-ui-code__filename", className)} {...props}>
+    <span className={cn("sh-ui-code__filename", className)} {...props}>
       {children}
     </span>
   );
@@ -182,7 +180,7 @@ export async function CodePanelBody({
 
   return (
     <div
-      className={cx("sh-ui-code__body", className)}
+      className={cn("sh-ui-code__body", className)}
       data-line-numbers={showLineNumbers || undefined}
       dangerouslySetInnerHTML={{ __html: html }}
       {...rest}

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

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 
+import { cn } from "@SH_UI_UTILS@";
 interface HSV { h: number; s: number; v: number; }
 interface HSVA extends HSV { a: number; }
 
@@ -136,7 +137,7 @@ export function ColorPicker({
 
   return (
     <ColorPickerContext.Provider value={ctx}>
-      <div className={["flex flex-col gap-2.5 w-full select-none", className].filter(Boolean).join(" ")} {...rest}>
+      <div className={cn("flex flex-col gap-2.5 w-full select-none", className)} {...rest}>
         {children ?? (<><ColorPickerSaturation /><ColorPickerHue /><ColorPickerHex /></>)}
       </div>
     </ColorPickerContext.Provider>
@@ -157,7 +158,7 @@ export function ColorPickerSaturation({ className, style, ...rest }: ColorPicker
     <div
       ref={drag.ref}
       onPointerDown={drag.onPointerDown}
-      className={["relative w-full aspect-[4/3] rounded-[var(--radius)] cursor-crosshair overflow-hidden touch-none", className].filter(Boolean).join(" ")}
+      className={cn("relative w-full aspect-[4/3] rounded-[var(--radius)] cursor-crosshair overflow-hidden touch-none", className)}
       style={{ background: pureHueHex, ...style }}
       role="slider"
       aria-label="채도/명도"
@@ -187,7 +188,7 @@ export function ColorPickerHue({ className, ...rest }: ColorPickerHueProps) {
     <div
       ref={drag.ref}
       onPointerDown={drag.onPointerDown}
-      className={["relative w-full h-3.5 rounded-full cursor-pointer touch-none bg-[linear-gradient(to_right,#f00_0%,#ff0_16.66%,#0f0_33.33%,#0ff_50%,#00f_66.66%,#f0f_83.33%,#f00_100%)]", className].filter(Boolean).join(" ")}
+      className={cn("relative w-full h-3.5 rounded-full cursor-pointer touch-none bg-[linear-gradient(to_right,#f00_0%,#ff0_16.66%,#0f0_33.33%,#0ff_50%,#00f_66.66%,#f0f_83.33%,#f00_100%)]", className)}
       role="slider"
       aria-label="색조"
       aria-valuemin={0} aria-valuemax={360} aria-valuenow={Math.round(hsva.h)}
@@ -215,7 +216,7 @@ export function ColorPickerAlpha({ className, style, ...rest }: ColorPickerAlpha
     <div
       ref={drag.ref}
       onPointerDown={drag.onPointerDown}
-      className={["relative w-full h-3.5 rounded-full cursor-pointer touch-none overflow-hidden bg-white bg-[length:8px_8px] bg-[position:0_0,0_4px,4px_-4px,-4px_0] [background-image:linear-gradient(45deg,#ccc_25%,transparent_25%),linear-gradient(-45deg,#ccc_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#ccc_75%),linear-gradient(-45deg,transparent_75%,#ccc_75%)]", className].filter(Boolean).join(" ")}
+      className={cn("relative w-full h-3.5 rounded-full cursor-pointer touch-none overflow-hidden bg-white bg-[length:8px_8px] bg-[position:0_0,0_4px,4px_-4px,-4px_0] [background-image:linear-gradient(45deg,#ccc_25%,transparent_25%),linear-gradient(-45deg,#ccc_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#ccc_75%),linear-gradient(-45deg,transparent_75%,#ccc_75%)]", className)}
       role="slider"
       aria-label="투명도"
       aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(hsva.a * 100)}
@@ -248,7 +249,7 @@ export function ColorPickerHex({ className, showSwatch = true, ...rest }: ColorP
 
   return (
     <div
-      className={["flex items-center gap-[var(--space-2)]", className].filter(Boolean).join(" ")}
+      className={cn("flex items-center gap-[var(--space-2)]", className)}
       {...rest}
     >
       {showSwatch && (
@@ -285,7 +286,7 @@ export function ColorPickerSwatches({ className, colors, ...rest }: ColorPickerS
     <div
       role="group"
       aria-label="미리 준비된 색상"
-      className={["flex flex-wrap gap-1.5", className].filter(Boolean).join(" ")}
+      className={cn("flex flex-wrap gap-1.5", className)}
       {...rest}
     >
       {colors.map((c) => {

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

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
 import "./styles.css";
 
 /* ───────────── types ───────────── */
@@ -234,7 +235,7 @@ export function ColorPicker({
   return (
     <ColorPickerContext.Provider value={ctx}>
       <div
-        className={["sh-ui-color-picker", className].filter(Boolean).join(" ")}
+        className={cn("sh-ui-color-picker", className)}
         {...rest}
       >
         {children ?? (
@@ -271,7 +272,7 @@ export function ColorPickerSaturation({
     <div
       ref={drag.ref}
       onPointerDown={drag.onPointerDown}
-      className={["sh-ui-color-picker__sv", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-color-picker__sv", className)}
       style={{ background: pureHueHex, ...style }}
       role="slider"
       aria-label="채도/명도"
@@ -309,7 +310,7 @@ export function ColorPickerHue({ className, ...rest }: ColorPickerHueProps) {
     <div
       ref={drag.ref}
       onPointerDown={drag.onPointerDown}
-      className={["sh-ui-color-picker__hue", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-color-picker__hue", className)}
       role="slider"
       aria-label="색조"
       aria-valuemin={0}
@@ -341,7 +342,7 @@ export function ColorPickerAlpha({ className, style, ...rest }: ColorPickerAlpha
     <div
       ref={drag.ref}
       onPointerDown={drag.onPointerDown}
-      className={["sh-ui-color-picker__alpha", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-color-picker__alpha", className)}
       role="slider"
       aria-label="투명도"
       aria-valuemin={0}
@@ -392,7 +393,7 @@ export function ColorPickerHex({
 
   return (
     <div
-      className={["sh-ui-color-picker__row", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-color-picker__row", className)}
       {...rest}
     >
       {showSwatch && (
@@ -442,7 +443,7 @@ export function ColorPickerSwatches({
     <div
       role="group"
       aria-label="미리 준비된 색상"
-      className={["sh-ui-color-picker__swatches", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-color-picker__swatches", className)}
       {...rest}
     >
       {colors.map((c) => {

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>