sh-ui-cli 0.45.1 → 0.45.3

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

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
   /** input 우측에 부착할 보조 노드(아이콘·단위·버튼 등). 더 많은 슬롯이 필요하면 InputGroup 사용. */
   suffix?: React.ReactNode;
@@ -9,9 +10,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   prefix?: React.ReactNode;
 }
 
-function cx(...args: (string | undefined | null | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /* ───────── Base utility 묶음 (반복 줄이기) ───────── */
 
@@ -69,7 +67,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       <InputGroupContext.Provider value={{ inGroup: true }}>
         <div
           ref={mergedRef}
-          className={cx(baseGroupClasses, className)}
+          className={cn(baseGroupClasses, className)}
           data-disabled={disabled || undefined}
           aria-invalid={ariaInvalid}
           onClick={handleClick}
@@ -91,7 +89,7 @@ export const InputAdornment = React.forwardRef<HTMLSpanElement, InputAdornmentPr
   ({ className, interactive, ...props }, ref) => (
     <span
       ref={ref}
-      className={cx(
+      className={cn(
         "inline-flex items-center justify-center flex-none text-foreground-muted px-[var(--space-1)] data-[interactive]:p-0",
         className,
       )}
@@ -112,7 +110,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         ref={ref}
         type={type}
-        className={cx(
+        className={cn(
           baseInputClasses,
           inGroupOverrides,
           !!prefix && "pl-[var(--space-10)]",

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

@@ -3,6 +3,7 @@
 import * as React from "react";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
   /** input 우측에 부착할 보조 노드(아이콘·단위·버튼 등). 더 많은 슬롯이 필요하면 InputGroup 사용. */
   suffix?: React.ReactNode;
@@ -10,9 +11,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   prefix?: React.ReactNode;
 }
 
-function cx(...args: (string | undefined | null | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /* ───────── InputGroup + InputAdornment (compound) ─────────
  * <InputGroup>
@@ -87,7 +85,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
       <InputGroupContext.Provider value={{ inGroup: true }}>
         <div
           ref={mergedRef}
-          className={cx("sh-ui-input-group", className)}
+          className={cn("sh-ui-input-group", className)}
           data-disabled={disabled || undefined}
           aria-invalid={ariaInvalid}
           onClick={handleClick}
@@ -123,7 +121,7 @@ export const InputAdornment = React.forwardRef<
   return (
     <span
       ref={ref}
-      className={cx("sh-ui-input-group__adornment", className)}
+      className={cn("sh-ui-input-group__adornment", className)}
       data-interactive={interactive || undefined}
       {...props}
     />
@@ -143,7 +141,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         ref={ref}
         type={type}
-        className={cx(
+        className={cn(
           "sh-ui-input",
           !!prefix && "sh-ui-input--with-prefix",
           !!suffix && "sh-ui-input--with-suffix",

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   /**
    * 필수 필드 표시. `true`면 LabelTitle 뒤에 `*` 표시.
@@ -10,15 +11,12 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
   isRequired?: boolean;
 }
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
   ({ className, children, isRequired, ...props }, ref) => (
     <label
       ref={ref}
-      className={cx(
+      className={cn(
         "flex flex-col gap-0.5 text-[length:var(--text-sm)] font-medium leading-snug text-foreground cursor-pointer select-none not-has-[[data-sh-ui-label-part]]:block",
         // 필수 표시 — title 이 있으면 title 뒤, 없으면 label 뒤에 * 부착
         isRequired &&
@@ -38,7 +36,7 @@ export function LabelTitle({ className, ...props }: React.HTMLAttributes<HTMLSpa
   return (
     <span
       data-sh-ui-label-part="title"
-      className={cx("font-semibold text-[length:var(--text-sm)] text-foreground", className)}
+      className={cn("font-semibold text-[length:var(--text-sm)] text-foreground", className)}
       {...props}
     />
   );
@@ -48,7 +46,7 @@ export function LabelSubtitle({ className, ...props }: React.HTMLAttributes<HTML
   return (
     <span
       data-sh-ui-label-part="subtitle"
-      className={cx("font-normal text-[0.8125rem] text-foreground", className)}
+      className={cn("font-normal text-[0.8125rem] text-foreground", className)}
       {...props}
     />
   );
@@ -58,7 +56,7 @@ export function LabelDescription({ className, ...props }: React.HTMLAttributes<H
   return (
     <p
       data-sh-ui-label-part="description"
-      className={cx("m-0 font-normal text-[0.8125rem] leading-snug text-foreground-muted", className)}
+      className={cn("m-0 font-normal text-[0.8125rem] leading-snug text-foreground-muted", className)}
       {...props}
     />
   );
@@ -68,7 +66,7 @@ export function LabelCaption({ className, ...props }: React.HTMLAttributes<HTMLP
   return (
     <p
       data-sh-ui-label-part="caption"
-      className={cx(
+      className={cn(
         "m-0 font-normal text-[length:var(--text-xs)] leading-tight text-[var(--foreground-subtle,var(--foreground-muted))] opacity-75",
         className,
       )}

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   /**
    * 필수 필드 표시. `true`면 `::after`로 `*` 표시가 붙는다.
@@ -11,9 +12,6 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
   isRequired?: boolean;
 }
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /**
  * 폼 컨트롤과 1:1로 연결되는 레이블. `htmlFor`로 컨트롤의 `id`와 매칭하거나
@@ -23,7 +21,7 @@ export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
   ({ className, children, isRequired, ...props }, ref) => (
     <label
       ref={ref}
-      className={cx("sh-ui-label", className)}
+      className={cn("sh-ui-label", className)}
       data-required={isRequired || undefined}
       {...props}
     >
@@ -35,20 +33,20 @@ Label.displayName = "Label";
 
 /** Label 안의 주 라벨 텍스트. 구조적 그룹핑이 필요할 때 Label과 함께 사용. */
 export function LabelTitle({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
-  return <span className={cx("sh-ui-label__title", className)} {...props} />;
+  return <span className={cn("sh-ui-label__title", className)} {...props} />;
 }
 
 /** 라벨 옆에 약하게 표시되는 보조 텍스트(예: "선택 사항"). */
 export function LabelSubtitle({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
-  return <span className={cx("sh-ui-label__subtitle", className)} {...props} />;
+  return <span className={cn("sh-ui-label__subtitle", className)} {...props} />;
 }
 
 /** 라벨 아래에 붙는 안내 문구. 컨트롤과 `aria-describedby`로 연결할 것. */
 export function LabelDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cx("sh-ui-label__description", className)} {...props} />;
+  return <p className={cn("sh-ui-label__description", className)} {...props} />;
 }
 
 /** 라벨 아래의 보조 캡션(예: 입력 형식 예시, 글자 수 제한). */
 export function LabelCaption({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cx("sh-ui-label__caption", className)} {...props} />;
+  return <p className={cn("sh-ui-label__caption", className)} {...props} />;
 }

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

@@ -5,6 +5,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { CodeEditor } from "../code-editor";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface MarkdownEditorProps {
   value?: string;
   defaultValue?: string;
@@ -19,9 +20,6 @@ export interface MarkdownEditorProps {
   "aria-label"?: string;
 }
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /**
  * 마크다운 에디터 (Tailwind 변종) — react-markdown 의 출력 HTML 트리에 대한
@@ -50,7 +48,7 @@ export function MarkdownEditor({
 
   return (
     <div
-      className={cx("grid gap-[var(--space-3)]", layoutClass, className)}
+      className={cn("grid gap-[var(--space-3)]", layoutClass, className)}
       data-readonly={readOnly || undefined}
     >
       <div className="min-w-0">

package/data/registry/react/components/markdown-editor/index.tsx

@@ -6,6 +6,7 @@ import remarkGfm from "remark-gfm";
 import { CodeEditor } from "../code-editor";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 export interface MarkdownEditorProps {
   /**
    * Controlled — 현재 마크다운. 명시 시 외부 상태가 진실원천.
@@ -42,9 +43,6 @@ export interface MarkdownEditorProps {
   "aria-label"?: string;
 }
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /**
  * 마크다운 에디터 — CodeEditor(소스) + react-markdown(라이브 프리뷰)의 합성.
@@ -79,7 +77,7 @@ export function MarkdownEditor({
 
   return (
     <div
-      className={cx(
+      className={cn(
         "sh-ui-md-editor",
         preview && `sh-ui-md-editor--${previewPosition}`,
         !preview && "sh-ui-md-editor--no-preview",

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

@@ -1,11 +1,9 @@
 import * as React from "react";
 import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
 
+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(" ");
-}
 
 /**
  * 상단 앱 메뉴바 (Tailwind 변종). DropdownMenu 와 함께 사용 — DropdownMenu 의
@@ -22,7 +20,7 @@ export const Menubar = React.forwardRef<
   return (
     <BaseMenubar
       ref={ref}
-      className={cx(
+      className={cn(
         "inline-flex items-center gap-[var(--space-1)] p-[var(--space-1)] bg-background border border-border rounded-[var(--radius)] shadow-[0_1px_2px_rgba(0,0,0,0.04)]",
         className,
       )}

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

@@ -2,11 +2,9 @@ import * as React from "react";
 import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
 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(" ");
-}
 
 /**
  * 상단 앱 메뉴바(파일/편집/보기 등). 내부에 DropdownMenu를 나란히 배치하여
@@ -27,7 +25,7 @@ export const Menubar = React.forwardRef<
   return (
     <BaseMenubar
       ref={ref}
-      className={cx("sh-ui-menubar", className)}
+      className={cn("sh-ui-menubar", className)}
       {...props}
     />
   );

package/data/registry/react/components/numeric-input/index.tailwind.tsx

@@ -2,10 +2,8 @@
 
 import * as React from "react";
 
-function cx(...args: (string | undefined | null | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export interface NumericInputProps
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
@@ -59,7 +57,7 @@ export const NumericInput = React.forwardRef<HTMLInputElement, NumericInputProps
           ref={ref}
           type="text"
           inputMode="decimal"
-          className={cx(inputClasses, className)}
+          className={cn(inputClasses, className)}
           value={buffer}
           onChange={(e) => {
             const raw = e.target.value;

package/data/registry/react/components/numeric-input/index.tsx

@@ -3,10 +3,8 @@
 import * as React from "react";
 import "./styles.css";
 
-function cx(...args: (string | undefined | null | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export interface NumericInputProps
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
@@ -93,7 +91,7 @@ export const NumericInput = React.forwardRef<HTMLInputElement, NumericInputProps
           ref={ref}
           type="text"
           inputMode="decimal"
-          className={cx("sh-ui-numeric-input__input", className)}
+          className={cn("sh-ui-numeric-input__input", className)}
           value={buffer}
           onChange={(e) => {
             const raw = e.target.value;

package/data/registry/react/components/page-toc/index.tailwind.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 
+import { cn } from "@SH_UI_UTILS@";
 export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
 export interface PageTOCProps {
@@ -120,7 +121,7 @@ export function PageTOC({
 
   return (
     <nav
-      className={cx(
+      className={cn(
         "fixed top-20 right-6 w-56 max-h-[calc(100vh-7rem)] overflow-y-auto pl-4 pr-2 py-3 border-l border-border text-[0.8125rem] z-[5] max-[80rem]:hidden",
         className,
       )}
@@ -135,7 +136,7 @@ export function PageTOC({
             <a
               href={`#${item.id}`}
               onClick={(e) => handleClick(e, item.id)}
-              className={cx(linkBase, linkClassesForLevel(item.level))}
+              className={cn(linkBase, linkClassesForLevel(item.level))}
               data-active={activeId === item.id ? "true" : undefined}
               aria-current={activeId === item.id ? "true" : undefined}
             >

package/data/registry/react/components/page-toc/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
 import "./styles.css";
 
 export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
@@ -52,8 +53,6 @@ interface TocItem {
   level: HeadingLevel;
 }
 
-const cx = (...args: (string | undefined | false | null)[]) =>
-  args.filter(Boolean).join(" ");
 
 /**
  * 페이지 내 자동 목차 (On this page).
@@ -151,7 +150,7 @@ export function PageTOC({
 
   return (
     <nav
-      className={cx("sh-ui-page-toc", className)}
+      className={cn("sh-ui-page-toc", className)}
       aria-label={typeof label === "string" ? label : "목차"}
     >
       <div className="sh-ui-page-toc__label">{label}</div>

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

@@ -1,16 +1,14 @@
 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 Pagination = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
   function Pagination({ className, ...props }, ref) {
     return (
       <nav
         ref={ref}
         aria-label="Pagination"
-        className={cx("flex justify-center text-[length:var(--text-sm)] text-foreground", className)}
+        className={cn("flex justify-center text-[length:var(--text-sm)] text-foreground", className)}
         {...props}
       />
     );
@@ -22,7 +20,7 @@ export const PaginationContent = React.forwardRef<HTMLUListElement, React.HTMLAt
     return (
       <ul
         ref={ref}
-        className={cx("flex flex-wrap items-center gap-1 m-0 p-0 list-none", className)}
+        className={cn("flex flex-wrap items-center gap-1 m-0 p-0 list-none", className)}
         {...props}
       />
     );
@@ -31,7 +29,7 @@ export const PaginationContent = React.forwardRef<HTMLUListElement, React.HTMLAt
 
 export const PaginationItem = React.forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
   function PaginationItem({ className, ...props }, ref) {
-    return <li ref={ref} className={cx("inline-flex items-center", className)} {...props} />;
+    return <li ref={ref} className={cn("inline-flex items-center", className)} {...props} />;
   },
 );
 
@@ -51,7 +49,7 @@ export const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLink
         aria-current={isActive ? "page" : undefined}
         data-active={isActive ? "" : undefined}
         data-size={size}
-        className={cx(linkBase, className)}
+        className={cn(linkBase, className)}
         {...props}
       />
     );
@@ -61,7 +59,7 @@ export const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLink
 export const PaginationPrevious = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
   function PaginationPrevious({ className, children, ...props }, ref) {
     return (
-      <PaginationLink ref={ref} aria-label="이전 페이지" className={cx("px-2.5", className)} {...props}>
+      <PaginationLink ref={ref} aria-label="이전 페이지" className={cn("px-2.5", className)} {...props}>
         <ChevronLeftIcon />
         {children ?? <span>이전</span>}
       </PaginationLink>
@@ -72,7 +70,7 @@ export const PaginationPrevious = React.forwardRef<HTMLAnchorElement, Pagination
 export const PaginationNext = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
   function PaginationNext({ className, children, ...props }, ref) {
     return (
-      <PaginationLink ref={ref} aria-label="다음 페이지" className={cx("px-2.5", className)} {...props}>
+      <PaginationLink ref={ref} aria-label="다음 페이지" className={cn("px-2.5", className)} {...props}>
         {children ?? <span>다음</span>}
         <ChevronRightIcon />
       </PaginationLink>
@@ -87,7 +85,7 @@ export const PaginationEllipsis = React.forwardRef<HTMLSpanElement, React.HTMLAt
         ref={ref}
         role="presentation"
         aria-hidden="true"
-        className={cx("inline-flex items-center justify-center w-9 h-9 text-foreground-muted", className)}
+        className={cn("inline-flex items-center justify-center w-9 h-9 text-foreground-muted", className)}
         {...props}
       >
         <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden>

package/data/registry/react/components/pagination/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@";
 /* ───────── Pagination (nav) ─────────
  * 시맨틱: <nav aria-label="Pagination"><ul>...</ul></nav>.
  * 현재 페이지 링크에 aria-current="page"를 부여해 스크린리더가 위치를 읽게 한다.
@@ -22,7 +20,7 @@ export const Pagination = React.forwardRef<
     <nav
       ref={ref}
       aria-label="Pagination"
-      className={cx("sh-ui-pagination", className)}
+      className={cn("sh-ui-pagination", className)}
       {...props}
     />
   );
@@ -38,7 +36,7 @@ export const PaginationContent = React.forwardRef<
   return (
     <ul
       ref={ref}
-      className={cx("sh-ui-pagination__content", className)}
+      className={cn("sh-ui-pagination__content", className)}
       {...props}
     />
   );
@@ -54,7 +52,7 @@ export const PaginationItem = React.forwardRef<
   return (
     <li
       ref={ref}
-      className={cx("sh-ui-pagination__item", className)}
+      className={cn("sh-ui-pagination__item", className)}
       {...props}
     />
   );
@@ -98,7 +96,7 @@ export const PaginationLink = React.forwardRef<
       aria-current={isActive ? "page" : undefined}
       data-active={isActive ? "" : undefined}
       data-size={size}
-      className={cx("sh-ui-pagination__link", className)}
+      className={cn("sh-ui-pagination__link", className)}
       {...props}
     />
   );
@@ -117,7 +115,7 @@ export const PaginationPrevious = React.forwardRef<
     <PaginationLink
       ref={ref}
       aria-label="이전 페이지"
-      className={cx("sh-ui-pagination__nav", className)}
+      className={cn("sh-ui-pagination__nav", className)}
       {...props}
     >
       <ChevronLeftIcon />
@@ -135,7 +133,7 @@ export const PaginationNext = React.forwardRef<
     <PaginationLink
       ref={ref}
       aria-label="다음 페이지"
-      className={cx("sh-ui-pagination__nav", className)}
+      className={cn("sh-ui-pagination__nav", className)}
       {...props}
     >
       {children ?? <span>다음</span>}
@@ -156,7 +154,7 @@ export const PaginationEllipsis = React.forwardRef<
       ref={ref}
       role="presentation"
       aria-hidden="true"
-      className={cx("sh-ui-pagination__ellipsis", className)}
+      className={cn("sh-ui-pagination__ellipsis", className)}
       {...props}
     >
       <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden>

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

@@ -1,11 +1,9 @@
 import * as React from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
 
+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 Popover = BasePopover.Root;
 export const PopoverTrigger = BasePopover.Trigger;
@@ -35,7 +33,7 @@ export const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentPro
         >
           <BasePopover.Popup
             ref={ref}
-            className={cx(
+            className={cn(
               "min-w-48 p-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_8px_24px_rgba(0,0,0,0.12)] outline-none text-[length:var(--text-sm)] leading-snug origin-[var(--transform-origin)] transition-[opacity,transform] duration-[140ms] 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 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2",
               className,
             )}
@@ -57,7 +55,7 @@ export const PopoverTitle = React.forwardRef<
   return (
     <BasePopover.Title
       ref={ref}
-      className={cx("m-0 mb-[var(--space-1)] font-semibold text-[0.9375rem]", className)}
+      className={cn("m-0 mb-[var(--space-1)] font-semibold text-[0.9375rem]", className)}
       {...props}
     />
   );
@@ -70,7 +68,7 @@ export const PopoverDescription = React.forwardRef<
   return (
     <BasePopover.Description
       ref={ref}
-      className={cx("m-0 text-foreground-muted text-[0.8125rem]", className)}
+      className={cn("m-0 text-foreground-muted text-[0.8125rem]", className)}
       {...props}
     />
   );

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

@@ -2,11 +2,9 @@ import * as React from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
 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(" ");
-}
 
 /**
  * 트리거 요소에 떠다니는 가벼운 패널을 띄우는 비모달 컨테이너. 포커스를 가두지 않으므로
@@ -72,7 +70,7 @@ export const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentPro
         >
           <BasePopover.Popup
             ref={ref}
-            className={cx("sh-ui-popover__content", className)}
+            className={cn("sh-ui-popover__content", className)}
             {...props}
           >
             {showArrow && (
@@ -94,7 +92,7 @@ export const PopoverTitle = React.forwardRef<
   return (
     <BasePopover.Title
       ref={ref}
-      className={cx("sh-ui-popover__title", className)}
+      className={cn("sh-ui-popover__title", className)}
       {...props}
     />
   );
@@ -108,7 +106,7 @@ export const PopoverDescription = React.forwardRef<
   return (
     <BasePopover.Description
       ref={ref}
-      className={cx("sh-ui-popover__description", className)}
+      className={cn("sh-ui-popover__description", className)}
       {...props}
     />
   );

package/data/registry/react/components/progress/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@";
 function clamp(n: number, min: number, max: number) {
   return Math.min(max, Math.max(min, n));
 }
@@ -32,14 +30,14 @@ export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
         aria-valuemax={isDeterminate ? max : undefined}
         aria-valuenow={isDeterminate ? value : undefined}
         data-state={isDeterminate ? "determinate" : "indeterminate"}
-        className={cx(
+        className={cn(
           "relative w-full h-2 overflow-hidden bg-background-muted rounded-full",
           className,
         )}
         {...props}
       >
         <div
-          className={cx(
+          className={cn(
             "h-full bg-primary rounded-full transition-[width] duration-[var(--duration-base)] ease-out motion-reduce:transition-none",
             !isDeterminate &&
               "w-2/5 animate-[sh-ui-progress-slide_1.2s_ease-in-out_infinite] motion-reduce:animate-none motion-reduce:translate-x-3/4",

package/data/registry/react/components/progress/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@";
 function clamp(n: number, min: number, max: number) {
   return Math.min(max, Math.max(min, n));
 }
@@ -42,7 +40,7 @@ export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
         aria-valuemax={isDeterminate ? max : undefined}
         aria-valuenow={isDeterminate ? value : undefined}
         data-state={isDeterminate ? "determinate" : "indeterminate"}
-        className={cx("sh-ui-progress", className)}
+        className={cn("sh-ui-progress", className)}
         {...props}
       >
         <div