sh-ui-cli 0.45.2 → 0.45.3

package/data/changelog/versions.json

@@ -2,6 +2,19 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.45.3",
+      "date": "2026-04-30",
+      "title": "공유 `cn` 유틸 + CSS 프레임워크 가이드 docs",
+      "type": "patch",
+      "highlights": [
+        "**공유 `cn` 유틸** — 컴포넌트 74 곳에 흩어져 있던 로컬 `cx`/`mergeClass` 함수 제거. 모두 `lib/utils.ts` 의 `cn` 으로 통일. plain 변종은 zero-dep custom 구현, tailwind 변종은 `clsx + tailwind-merge` 로 utility 충돌 머지(예: `cn(\"bg-primary\", \"bg-red-500\")` → `\"bg-red-500\"`). registry.json 에 `utils` 엔트리 신설, styled 컴포넌트 43 개가 `registryDependencies: [\"utils\"]` 로 자동 의존 — `add button` 시 `utils` 도 함께 카피.",
+        "**`@SH_UI_UTILS@` placeholder 치환** — 컴포넌트가 `import { cn } from \"@SH_UI_UTILS@\"` 로 import 하면 CLI 가 add 시점에 `aliases.utils` 값(예: `@/lib/utils`)으로 치환. cn 유틸 import 경로가 사용자 프로젝트 alias 와 자동 맞아떨어짐. `aliases.utils` 미설정 시 친절 에러로 안내.",
+        "**CSS 프레임워크 docs 페이지 추가** — `apps/docs/(docs)/css-framework/page.tsx` 신설. 변종 시스템 큰 그림 (현재 plain/tailwind + 계획 중 css-modules/vanilla-extract) + 모드별 차이·전환·fallback 설명. 사이드바 nav 에 \"CSS 프레임워크\" 링크 추가, cli 페이지에서 cross-link.",
+        "**ui-app-template config 보강** — 누락됐던 `aliases.utils` 추가. 신규 init 도 동일하게 채워짐."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.45.3"
+    },
     {
       "version": "0.45.2",
       "date": "2026-04-30",

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

@@ -1,10 +1,8 @@
 import * as React from "react";
 import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
 
-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 AccordionSize = "sm" | "md";
@@ -19,7 +17,7 @@ export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
   ({ className, size = "md", ...props }, ref) => (
     <BaseAccordion.Root
       ref={ref}
-      className={cx("flex flex-col w-full", className)}
+      className={cn("flex flex-col w-full", className)}
       data-size={size}
       {...props}
     />
@@ -33,7 +31,7 @@ export const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseAccordion.Item
     ref={ref}
-    className={cx("border-b border-border first:border-t", className)}
+    className={cn("border-b border-border first:border-t", className)}
     {...props}
   />
 ));
@@ -46,7 +44,7 @@ export const AccordionTrigger = React.forwardRef<
   <BaseAccordion.Header className="m-0 font-[inherit]">
     <BaseAccordion.Trigger
       ref={ref}
-      className={cx(
+      className={cn(
         "flex items-center justify-between gap-[var(--space-4)] w-full px-[var(--space-1)] py-[var(--space-4)] bg-transparent border-none text-foreground text-[0.9375rem] font-medium leading-snug text-left cursor-pointer transition-[background-color] duration-[var(--duration-fast)] hover:not-disabled:not-data-[disabled]:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 focus-visible:rounded-[calc(var(--radius)-2px)] disabled:cursor-not-allowed disabled:text-foreground-muted data-[disabled]:cursor-not-allowed data-[disabled]:text-foreground-muted [[data-size=sm]_&]:py-[var(--space-2)] [[data-size=sm]_&]:text-[length:var(--text-xs)] [[data-size=sm]_&]:leading-[1.2] motion-reduce:transition-none",
         className,
       )}
@@ -74,7 +72,7 @@ export const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <BaseAccordion.Panel
     ref={ref}
-    className={cx(
+    className={cn(
       "overflow-hidden h-[var(--accordion-panel-height)] transition-[height] duration-[var(--duration-slow)] data-[starting-style]:h-0 data-[ending-style]:h-0 motion-reduce:transition-none",
       className,
     )}

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

@@ -2,10 +2,8 @@ import * as React from "react";
 import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
 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 AccordionSize = "sm" | "md";
@@ -26,7 +24,7 @@ export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
   ({ className, size = "md", ...props }, ref) => (
     <BaseAccordion.Root
       ref={ref}
-      className={cx("sh-ui-accordion", className)}
+      className={cn("sh-ui-accordion", className)}
       data-size={size}
       {...props}
     />
@@ -40,7 +38,7 @@ export const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseAccordion.Item
     ref={ref}
-    className={cx("sh-ui-accordion__item", className)}
+    className={cn("sh-ui-accordion__item", className)}
     {...props}
   />
 ));
@@ -59,7 +57,7 @@ export const AccordionTrigger = React.forwardRef<
   <BaseAccordion.Header className="sh-ui-accordion__header">
     <BaseAccordion.Trigger
       ref={ref}
-      className={cx("sh-ui-accordion__trigger", className)}
+      className={cn("sh-ui-accordion__trigger", className)}
       {...props}
     >
       <span className="sh-ui-accordion__trigger-label">{children}</span>
@@ -90,7 +88,7 @@ export const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <BaseAccordion.Panel
     ref={ref}
-    className={cx("sh-ui-accordion__panel", className)}
+    className={cn("sh-ui-accordion__panel", className)}
     {...props}
   >
     <div className="sh-ui-accordion__content">{children}</div>

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

@@ -2,11 +2,9 @@ import * as React from "react";
 import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
 import { cva, type VariantProps } from "class-variance-authority";
 
+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 avatarVariants = cva(
   "relative inline-flex items-center justify-center shrink-0 align-middle overflow-hidden rounded-full bg-background-muted text-foreground-muted font-medium select-none",
@@ -37,7 +35,7 @@ export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
     return (
       <BaseAvatar.Root
         ref={ref}
-        className={cx(avatarVariants({ size }), className)}
+        className={cn(avatarVariants({ size }), className)}
         {...props}
       />
     );
@@ -51,7 +49,7 @@ export const AvatarImage = React.forwardRef<
   return (
     <BaseAvatar.Image
       ref={ref}
-      className={cx("w-full h-full object-cover block", className)}
+      className={cn("w-full h-full object-cover block", className)}
       {...props}
     />
   );
@@ -64,7 +62,7 @@ export const AvatarFallback = React.forwardRef<
   return (
     <BaseAvatar.Fallback
       ref={ref}
-      className={cx(
+      className={cn(
         "inline-flex items-center justify-center w-full h-full uppercase tracking-[0.02em]",
         className,
       )}

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

@@ -2,11 +2,9 @@ import * as React from "react";
 import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
 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(" ");
-}
 
 export type AvatarSize = "sm" | "md" | "lg" | "xl";
 
@@ -35,7 +33,7 @@ export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
     return (
       <BaseAvatar.Root
         ref={ref}
-        className={cx("sh-ui-avatar", `sh-ui-avatar--${size}`, className)}
+        className={cn("sh-ui-avatar", `sh-ui-avatar--${size}`, className)}
         {...props}
       />
     );
@@ -52,7 +50,7 @@ export const AvatarImage = React.forwardRef<
   return (
     <BaseAvatar.Image
       ref={ref}
-      className={cx("sh-ui-avatar__image", className)}
+      className={cn("sh-ui-avatar__image", className)}
       {...props}
     />
   );
@@ -68,7 +66,7 @@ export const AvatarFallback = React.forwardRef<
   return (
     <BaseAvatar.Fallback
       ref={ref}
-      className={cx("sh-ui-avatar__fallback", className)}
+      className={cn("sh-ui-avatar__fallback", className)}
       {...props}
     />
   );

package/data/registry/react/components/badge/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 badgeVariants = cva(
   "inline-flex items-center gap-1 px-2 border border-transparent rounded-full font-medium leading-none whitespace-nowrap align-middle select-none",
   {
@@ -39,7 +37,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     return (
       <span
         ref={ref}
-        className={cx(badgeVariants({ variant, size }), className)}
+        className={cn(badgeVariants({ variant, size }), className)}
         {...props}
       />
     );

package/data/registry/react/components/badge/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 BadgeVariant =
   | "primary"
   | "secondary"
@@ -29,7 +27,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     return (
       <span
         ref={ref}
-        className={cx(
+        className={cn(
           "sh-ui-badge",
           `sh-ui-badge--${variant}`,
           `sh-ui-badge--${size}`,

package/data/registry/react/components/breadcrumb/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 const Breadcrumb = React.forwardRef<
   HTMLElement,
   React.HTMLAttributes<HTMLElement>
@@ -12,7 +10,7 @@ export const Breadcrumb = React.forwardRef<
     <nav
       ref={ref}
       aria-label="Breadcrumb"
-      className={cx("text-[length:var(--text-sm)] text-foreground-muted", className)}
+      className={cn("text-[length:var(--text-sm)] text-foreground-muted", className)}
       {...props}
     />
   );
@@ -25,7 +23,7 @@ export const BreadcrumbList = React.forwardRef<
   return (
     <ol
       ref={ref}
-      className={cx(
+      className={cn(
         "flex items-center flex-wrap gap-1.5 m-0 p-0 list-none",
         className,
       )}
@@ -41,7 +39,7 @@ export const BreadcrumbItem = React.forwardRef<
   return (
     <li
       ref={ref}
-      className={cx("inline-flex items-center gap-1.5 min-w-0", className)}
+      className={cn("inline-flex items-center gap-1.5 min-w-0", className)}
       {...props}
     />
   );
@@ -54,7 +52,7 @@ export const BreadcrumbLink = React.forwardRef<
   return (
     <a
       ref={ref}
-      className={cx(
+      className={cn(
         "text-foreground-muted no-underline rounded-[calc(var(--radius)-2px)] px-0.5 transition-colors duration-[var(--duration-fast)] hover:text-foreground hover:underline hover:underline-offset-[3px] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none",
         className,
       )}
@@ -73,7 +71,7 @@ export const BreadcrumbPage = React.forwardRef<
       role="link"
       aria-current="page"
       aria-disabled="true"
-      className={cx(
+      className={cn(
         "text-foreground font-medium overflow-hidden text-ellipsis whitespace-nowrap",
         className,
       )}
@@ -91,7 +89,7 @@ export const BreadcrumbSeparator = React.forwardRef<
       ref={ref}
       role="presentation"
       aria-hidden="true"
-      className={cx(
+      className={cn(
         "inline-flex items-center text-foreground-muted opacity-60",
         className,
       )}
@@ -111,7 +109,7 @@ export const BreadcrumbEllipsis = React.forwardRef<
       ref={ref}
       role="presentation"
       aria-hidden="true"
-      className={cx(
+      className={cn(
         "inline-flex items-center w-6 h-6 justify-center text-foreground-muted",
         className,
       )}

package/data/registry/react/components/breadcrumb/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@";
 /* ───────── Breadcrumb (nav) ─────────
  * 시맨틱: <nav aria-label="Breadcrumb"><ol>...</ol></nav>.
  */
@@ -21,7 +19,7 @@ export const Breadcrumb = React.forwardRef<
     <nav
       ref={ref}
       aria-label="Breadcrumb"
-      className={cx("sh-ui-breadcrumb", className)}
+      className={cn("sh-ui-breadcrumb", className)}
       {...props}
     />
   );
@@ -37,7 +35,7 @@ export const BreadcrumbList = React.forwardRef<
   return (
     <ol
       ref={ref}
-      className={cx("sh-ui-breadcrumb__list", className)}
+      className={cn("sh-ui-breadcrumb__list", className)}
       {...props}
     />
   );
@@ -53,7 +51,7 @@ export const BreadcrumbItem = React.forwardRef<
   return (
     <li
       ref={ref}
-      className={cx("sh-ui-breadcrumb__item", className)}
+      className={cn("sh-ui-breadcrumb__item", className)}
       {...props}
     />
   );
@@ -69,7 +67,7 @@ export const BreadcrumbLink = React.forwardRef<
   return (
     <a
       ref={ref}
-      className={cx("sh-ui-breadcrumb__link", className)}
+      className={cn("sh-ui-breadcrumb__link", className)}
       {...props}
     />
   );
@@ -88,7 +86,7 @@ export const BreadcrumbPage = React.forwardRef<
       role="link"
       aria-current="page"
       aria-disabled="true"
-      className={cx("sh-ui-breadcrumb__page", className)}
+      className={cn("sh-ui-breadcrumb__page", className)}
       {...props}
     />
   );
@@ -106,7 +104,7 @@ export const BreadcrumbSeparator = React.forwardRef<
       ref={ref}
       role="presentation"
       aria-hidden="true"
-      className={cx("sh-ui-breadcrumb__separator", className)}
+      className={cn("sh-ui-breadcrumb__separator", className)}
       {...props}
     >
       {children ?? <ChevronRightIcon />}
@@ -126,7 +124,7 @@ export const BreadcrumbEllipsis = React.forwardRef<
       ref={ref}
       role="presentation"
       aria-hidden="true"
-      className={cx("sh-ui-breadcrumb__ellipsis", className)}
+      className={cn("sh-ui-breadcrumb__ellipsis", className)}
       {...props}
     >
       <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden>

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const buttonVariants = cva(
@@ -62,7 +63,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ variant = "primary", size = "md", className, ...props }, ref) => (
     <button
       ref={ref}
-      className={[buttonVariants({ variant, size }), className].filter(Boolean).join(" ")}
+      className={cn(buttonVariants({ variant, size }), className)}
       {...props}
     />
   ),

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
 import "./styles.css";
 
 type Variant = "primary" | "secondary" | "ghost" | "danger" | "link";
@@ -33,14 +34,12 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
  */
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ variant = "primary", size = "md", className, ...props }, ref) => {
-    const classes = [
+    const classes = cn(
       "sh-ui-button",
       `sh-ui-button--${variant}`,
       `sh-ui-button--${size}`,
       className,
-    ]
-      .filter(Boolean)
-      .join(" ");
+    );
     return <button ref={ref} className={classes} {...props} />;
   },
 );

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

@@ -3,10 +3,8 @@
 import * as React from "react";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "../select";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 const DEFAULT_WEEKDAYS_KO = ["일", "월", "화", "수", "목", "금", "토"] as const;
 
 const isSameDay = (a: Date, b: Date) =>
@@ -287,7 +285,7 @@ export function Calendar(props: CalendarProps) {
 
   return (
     <div
-      className={cx("inline-flex gap-[var(--space-4)] select-none", numberOfMonths > 1 && "flex-wrap", className)}
+      className={cn("inline-flex gap-[var(--space-4)] select-none", numberOfMonths > 1 && "flex-wrap", className)}
       aria-label={ariaLabel}
     >
       {children
@@ -316,7 +314,7 @@ export function Calendar(props: CalendarProps) {
 export interface CalendarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 export const CalendarHeader = React.forwardRef<HTMLDivElement, CalendarHeaderProps>(
   function CalendarHeader({ className, ...props }, ref) {
-    return <div ref={ref} className={cx("flex items-center justify-between gap-[var(--space-1)] mb-[var(--space-2)]", className)} {...props} />;
+    return <div ref={ref} className={cn("flex items-center justify-between gap-[var(--space-1)] mb-[var(--space-2)]", className)} {...props} />;
   },
 );
 
@@ -324,7 +322,7 @@ const navButtonClasses =
   "inline-flex items-center justify-center w-7 h-7 p-0 border-none rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground-muted cursor-pointer shrink-0 transition-[background-color,color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted hover:not-disabled:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none";
 
 function CalendarNavPlaceholder() {
-  return <span className={cx(navButtonClasses, "invisible pointer-events-none")} aria-hidden />;
+  return <span className={cn(navButtonClasses, "invisible pointer-events-none")} aria-hidden />;
 }
 
 export interface CalendarNavButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -344,7 +342,7 @@ function makeNavButton(
         <button
           ref={ref}
           type="button"
-          className={cx(navButtonClasses, className)}
+          className={cn(navButtonClasses, className)}
           aria-label={ariaLabel ?? defaultLabel}
           onClick={(e) => { resolveHandler(ctx)(); onClick?.(e); }}
           {...props}
@@ -377,7 +375,7 @@ export function CalendarYearSelect({ className, formatYear = (y) => `${y}년` }:
   const items = ctx.yearOptions.includes(year) ? ctx.yearOptions : [...ctx.yearOptions, year].sort((a, b) => a - b);
   return (
     <Select value={String(year)} onValueChange={(v) => ctx.setYearForVisible(Number(v))}>
-      <SelectTrigger className={cx(calendarSelectTriggerClasses, className)} aria-label="연도">
+      <SelectTrigger className={cn(calendarSelectTriggerClasses, className)} aria-label="연도">
         <span>{formatYear(year)}</span>
       </SelectTrigger>
       <SelectContent>
@@ -397,7 +395,7 @@ export function CalendarMonthSelect({ className, formatMonth = (m) => `${m + 1}
   const month = ctx.visibleMonth.getMonth();
   return (
     <Select value={String(month)} onValueChange={(v) => ctx.setMonthForVisible(Number(v))}>
-      <SelectTrigger className={cx(calendarSelectTriggerClasses, className)} aria-label="월">
+      <SelectTrigger className={cn(calendarSelectTriggerClasses, className)} aria-label="월">
         <span>{formatMonth(month)}</span>
       </SelectTrigger>
       <SelectContent>
@@ -420,7 +418,7 @@ export const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(
     const ariaLabel = ctx.ariaLabel ?? monthLabel;
 
     return (
-      <div ref={ref} className={cx("", className)} {...rest}>
+      <div ref={ref} className={cn("", className)} {...rest}>
         <div className="grid grid-cols-7 mb-[var(--space-1)]" role="row">
           {ctx.weekdayLabels.map((label) => (
             <span key={label} className="flex items-center justify-center h-8 text-[length:var(--text-xs)] font-medium text-foreground-muted" role="columnheader" aria-label={label}>
@@ -450,10 +448,10 @@ export const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(
               isStart && isEnd ? "rounded-[calc(var(--radius)-2px)]" : "";
 
             return (
-              <div key={i} className={cx("flex items-center justify-center w-full h-[2.375rem] min-w-0", cellRangeBg, cellRangeRadius)}>
+              <div key={i} className={cn("flex items-center justify-center w-full h-[2.375rem] min-w-0", cellRangeBg, cellRangeRadius)}>
                 <button
                   type="button"
-                  className={cx(
+                  className={cn(
                     "flex items-center justify-center w-9 h-9 p-0 border-none rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground text-[0.8125rem] font-[inherit] cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-30 disabled:cursor-not-allowed motion-reduce:transition-none",
                     !current && "text-[var(--foreground-subtle,var(--foreground-muted))] opacity-40",
                     isToday && "font-bold underline underline-offset-[0.125rem]",

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

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
 import {
   Select,
   SelectContent,
@@ -11,9 +12,6 @@ import "./styles.css";
 
 /* ───────── Helpers ───────── */
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 const DEFAULT_WEEKDAYS_KO = ["일", "월", "화", "수", "목", "금", "토"] as const;
 
@@ -505,7 +503,7 @@ export function Calendar(props: CalendarProps) {
 
   return (
     <div
-      className={cx("sh-ui-calendar", numberOfMonths > 1 && "sh-ui-calendar--multi", className)}
+      className={cn("sh-ui-calendar", numberOfMonths > 1 && "sh-ui-calendar--multi", className)}
       aria-label={ariaLabel}
     >
       {children
@@ -545,7 +543,7 @@ export interface CalendarHeaderProps extends React.HTMLAttributes<HTMLDivElement
 /** 헤더 컨테이너. 화살표/dropdown 등을 children 으로 자유롭게 배치. */
 export const CalendarHeader = React.forwardRef<HTMLDivElement, CalendarHeaderProps>(
   function CalendarHeader({ className, ...props }, ref) {
-    return <div ref={ref} className={cx("sh-ui-calendar__header", className)} {...props} />;
+    return <div ref={ref} className={cn("sh-ui-calendar__header", className)} {...props} />;
   },
 );
 
@@ -574,7 +572,7 @@ function makeNavButton(
         <button
           ref={ref}
           type="button"
-          className={cx("sh-ui-calendar__nav", className)}
+          className={cn("sh-ui-calendar__nav", className)}
           aria-label={ariaLabel ?? defaultLabel}
           onClick={(e) => {
             resolveHandler(ctx)();
@@ -649,7 +647,7 @@ export function CalendarYearSelect({
       onValueChange={(v) => ctx.setYearForVisible(Number(v))}
     >
       <SelectTrigger
-        className={cx("sh-ui-calendar__select-trigger", className)}
+        className={cn("sh-ui-calendar__select-trigger", className)}
         aria-label="연도"
       >
         <span className="sh-ui-calendar__select-value">{formatYear(year)}</span>
@@ -684,7 +682,7 @@ export function CalendarMonthSelect({
       onValueChange={(v) => ctx.setMonthForVisible(Number(v))}
     >
       <SelectTrigger
-        className={cx("sh-ui-calendar__select-trigger", className)}
+        className={cn("sh-ui-calendar__select-trigger", className)}
         aria-label="월"
       >
         <span className="sh-ui-calendar__select-value">{formatMonth(month)}</span>
@@ -716,7 +714,7 @@ export const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(
     const ariaLabel = ctx.ariaLabel ?? monthLabel;
 
     return (
-      <div ref={ref} className={cx("sh-ui-calendar__grid-wrap", className)} {...rest}>
+      <div ref={ref} className={cn("sh-ui-calendar__grid-wrap", className)} {...rest}>
         <div className="sh-ui-calendar__weekdays" role="row">
           {ctx.weekdayLabels.map((label) => (
             <span
@@ -751,7 +749,7 @@ export const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(
             return (
               <div
                 key={i}
-                className={cx(
+                className={cn(
                   "sh-ui-calendar__cell",
                   inRange && "sh-ui-calendar__cell--in-range",
                   isStart && "sh-ui-calendar__cell--range-start",
@@ -760,7 +758,7 @@ export const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(
               >
                 <button
                   type="button"
-                  className={cx(
+                  className={cn(
                     "sh-ui-calendar__day",
                     !current && "sh-ui-calendar__day--outside",
                     selected && "sh-ui-calendar__day--selected",

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

@@ -1,16 +1,14 @@
 import * as React from "react";
 
+import { cn } from "@SH_UI_UTILS@";
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
 
-function mergeClass(base: string, extra?: string) {
-  return extra ? `${base} ${extra}` : base;
-}
 
 export const Card = React.forwardRef<HTMLDivElement, DivProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={mergeClass(
+      className={cn(
         "flex flex-col gap-[var(--space-6)] py-[var(--space-6)] bg-background text-foreground border border-border rounded-[var(--radius)] max-sm:gap-[var(--space-4)] max-sm:py-[var(--space-4)]",
         className,
       )}
@@ -25,7 +23,7 @@ export const CardHeader = React.forwardRef<HTMLDivElement, DivProps>(
     <div
       ref={ref}
       data-slot="card-header"
-      className={mergeClass(
+      className={cn(
         "grid grid-cols-1 auto-rows-auto gap-y-1.5 px-[var(--space-6)] has-[[data-slot=card-action]]:grid-cols-[1fr_auto] max-sm:px-[var(--space-4)]",
         className,
       )}
@@ -39,7 +37,7 @@ export const CardTitle = React.forwardRef<HTMLDivElement, DivProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={mergeClass(
+      className={cn(
         "text-[length:var(--text-base)] font-semibold leading-tight tracking-tight",
         className,
       )}
@@ -53,7 +51,7 @@ export const CardDescription = React.forwardRef<HTMLDivElement, DivProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={mergeClass(
+      className={cn(
         "text-[length:var(--text-sm)] leading-normal text-foreground-muted",
         className,
       )}
@@ -72,7 +70,7 @@ export const CardAction = React.forwardRef<HTMLDivElement, DivProps>(
     <div
       ref={ref}
       data-slot="card-action"
-      className={mergeClass(
+      className={cn(
         "col-start-2 row-span-2 self-start justify-self-end",
         className,
       )}
@@ -86,7 +84,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, DivProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={mergeClass(
+      className={cn(
         "px-[var(--space-6)] text-[length:var(--text-sm)] leading-relaxed max-sm:px-[var(--space-4)]",
         className,
       )}
@@ -100,7 +98,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, DivProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={mergeClass(
+      className={cn(
         "px-[var(--space-6)] flex items-center gap-[var(--space-2)] max-sm:px-[var(--space-4)] max-sm:flex-wrap",
         className,
       )}