sh-ui-cli 0.45.2 → 0.46.0

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}
       />
     );

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

@@ -5,10 +5,8 @@ import { Toggle as BaseToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 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 toggleVariants = cva(
   "inline-flex items-center justify-center gap-1.5 border border-transparent rounded-[var(--radius)] font-medium leading-none cursor-pointer text-foreground-muted bg-transparent transition-[background-color,color,border-color] duration-[var(--duration-fast)] select-none 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 data-[pressed]:bg-background-muted data-[pressed]:text-foreground motion-reduce:transition-none",
   {
@@ -45,7 +43,7 @@ export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
   ({ className, variant = "ghost", size = "md", ...props }, ref) => (
     <BaseToggle
       ref={ref}
-      className={cx(toggleVariants({ variant, size }), className)}
+      className={cn(toggleVariants({ variant, size }), className)}
       {...props}
     />
   ),
@@ -78,7 +76,7 @@ export const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(
     <ToggleGroupContext.Provider value={{ variant, size }}>
       <BaseToggleGroup
         ref={ref}
-        className={cx(
+        className={cn(
           "inline-flex items-center gap-[var(--space-1)] data-[orientation=vertical]:flex-col",
           className,
         )}
@@ -102,7 +100,7 @@ export const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupIt
     return (
       <BaseToggle
         ref={ref}
-        className={cx(toggleVariants({ variant, size }), className)}
+        className={cn(toggleVariants({ variant, size }), className)}
         {...props}
       />
     );

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

@@ -5,10 +5,8 @@ import { Toggle as BaseToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 /* ───────────── Toggle ───────────── */
 
 export type ToggleVariant = "outline" | "ghost";
@@ -43,7 +41,7 @@ export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
   ({ className, variant = "ghost", size = "md", ...props }, ref) => (
     <BaseToggle
       ref={ref}
-      className={cx(
+      className={cn(
         "sh-ui-toggle",
         `sh-ui-toggle--${variant}`,
         `sh-ui-toggle--${size}`,
@@ -95,7 +93,7 @@ export const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(
     <ToggleGroupContext.Provider value={{ variant, size }}>
       <BaseToggleGroup
         ref={ref}
-        className={cx("sh-ui-toggle-group", className)}
+        className={cn("sh-ui-toggle-group", className)}
         {...props}
       />
     </ToggleGroupContext.Provider>
@@ -119,7 +117,7 @@ export const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupIt
     return (
       <BaseToggle
         ref={ref}
-        className={cx(
+        className={cn(
           "sh-ui-toggle",
           `sh-ui-toggle--${variant}`,
           `sh-ui-toggle--${size}`,

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

@@ -1,11 +1,9 @@
 import * as React from "react";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 
+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(" ");
-}
 
 export const TooltipProvider = BaseTooltip.Provider;
 export const Tooltip = BaseTooltip.Root;
@@ -39,7 +37,7 @@ export const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentPro
         >
           <BaseTooltip.Popup
             ref={ref}
-            className={cx(
+            className={cn(
               "px-2.5 py-1.5 bg-foreground text-background rounded-[calc(var(--radius)-2px)] text-[length:var(--text-xs)] leading-snug max-w-xs shadow-[0_4px_12px_rgba(0,0,0,0.12)] origin-[var(--transform-origin)] outline-none transition-[opacity,transform] duration-[120ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:scale-100",
               className,
             )}

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

@@ -2,11 +2,9 @@ import * as React from "react";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 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(" ");
-}
 
 /** 여러 Tooltip이 공통 delay를 공유하도록 묶는다. 앱 루트에 한 번 두는 것을 권장. */
 export const TooltipProvider = BaseTooltip.Provider;
@@ -71,7 +69,7 @@ export const TooltipContent = React.forwardRef<
       >
         <BaseTooltip.Popup
           ref={ref}
-          className={cx("sh-ui-tooltip__content", className)}
+          className={cn("sh-ui-tooltip__content", className)}
           {...props}
         >
           {showArrow && (

package/data/registry/react/lib/cn.tailwind.ts

@@ -0,0 +1,17 @@
+/**
+ * className 합성 헬퍼 (Tailwind 변종) — clsx + tailwind-merge.
+ * - falsy 값 자동 제외
+ * - 객체 형태 `{ "is-active": true }` 지원
+ * - **Tailwind utility 충돌 머지** — `cn("bg-red-500", "bg-blue-500")` → `"bg-blue-500"`
+ *   사용자가 `<Button className="bg-red-500" />` 로 default 를 깔끔히 override 가능.
+ *
+ *   cn("base", isActive && "active", { "with-icon": hasIcon }, className)
+ */
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export type { ClassValue };
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/data/registry/react/peer-versions.json

@@ -4,8 +4,10 @@
     "@base-ui/react": "^1.4.1",
     "@tanstack/react-form": "^1.29.1",
     "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "lucide-react": "^1.11.0",
     "react-hook-form": "^7.74.0",
-    "shiki": "^4.0.2"
+    "shiki": "^4.0.2",
+    "tailwind-merge": "^3.5.0"
   }
 }