npm - sh-ui-cli - Versions diffs - 0.45.2 → 0.45.3 - Mend

sh-ui-cli 0.45.2 → 0.45.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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

package/data/registry/react/components/radio/index.tailwind.tsx CHANGED Viewed

@@ -2,10 +2,8 @@ import * as React from "react";
 import { Radio as BaseRadio } from "@base-ui/react/radio";
 import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
+import { cn } from "@SH_UI_UTILS@";
 export type RadioProps = Omit<
   React.ComponentPropsWithoutRef<typeof BaseRadio.Root>,
   "className"
@@ -17,7 +15,7 @@ export const Radio = React.forwardRef<HTMLElement, RadioProps>(
   ({ className, ...props }, ref) => (
     <BaseRadio.Root
       ref={ref}
-      className={cx(
+      className={cn(
         "inline-flex items-center justify-center w-[1.125rem] h-[1.125rem] border border-border-strong rounded-full bg-background cursor-pointer shrink-0 transition-[border-color] duration-[var(--duration-fast)] hover:not-data-[disabled]:border-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[checked]:border-primary data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5",
         className,
       )}
@@ -41,7 +39,7 @@ export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
   ({ className, orientation = "vertical", ...props }, ref) => (
     <BaseRadioGroup
       ref={ref}
-      className={cx(
+      className={cn(
         "flex gap-2.5",
         orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
         className,

package/data/registry/react/components/radio/index.tsx CHANGED Viewed

@@ -3,10 +3,8 @@ import { Radio as BaseRadio } from "@base-ui/react/radio";
 import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
 import "./styles.css";
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
+import { cn } from "@SH_UI_UTILS@";
 /* ───────────── Radio ───────────── */
 export type RadioProps = Omit<
@@ -24,7 +22,7 @@ export const Radio = React.forwardRef<HTMLElement, RadioProps>(
   ({ className, ...props }, ref) => (
     <BaseRadio.Root
       ref={ref}
-      className={cx("sh-ui-radio", className)}
+      className={cn("sh-ui-radio", className)}
       {...props}
     >
       <BaseRadio.Indicator className="sh-ui-radio__indicator" />
@@ -58,7 +56,7 @@ export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
   ({ className, orientation = "vertical", ...props }, ref) => (
     <BaseRadioGroup
       ref={ref}
-      className={cx("sh-ui-radio-group", className)}
+      className={cn("sh-ui-radio-group", className)}
       data-orientation={orientation}
       {...props}
     />