sh-ui-cli 0.45.2 → 0.46.0

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

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

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

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

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

@@ -5,6 +5,7 @@ import { useEditor, EditorContent, type Editor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
 import Link from "@tiptap/extension-link";
+import { cn } from "@SH_UI_UTILS@";
 import {
   BoldIcon, ItalicIcon, StrikethroughIcon,
   Heading1Icon, Heading2Icon, Heading3Icon,
@@ -26,9 +27,6 @@ export interface RichTextEditorProps {
   "aria-label"?: string;
 }
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 export function RichTextEditor({
   value: valueProp, defaultValue, onChange, placeholder, readOnly = false, hideToolbar = false,
@@ -68,7 +66,7 @@ export function RichTextEditor({
 
   return (
     <div
-      className={cx(
+      className={cn(
         "sh-ui-rte flex flex-col border border-border rounded-[var(--radius)] bg-background overflow-hidden transition-[border-color] duration-[var(--duration-fast)] focus-within:border-foreground focus-within:outline-[length:var(--border-width-strong)] focus-within:outline-foreground focus-within:outline-offset-2 data-[readonly]:bg-background-subtle motion-reduce:transition-none",
         className,
       )}
@@ -158,7 +156,7 @@ function ToolbarButton({ editor, label, icon, isActive, canRun, run, disabled }:
   return (
     <button
       type="button"
-      className={cx(
+      className={cn(
         "inline-flex items-center justify-center w-7 h-7 p-0 bg-transparent text-foreground-muted border border-transparent rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[color,background-color,border-color] duration-[var(--duration-fast)] hover:not-disabled:text-foreground hover:not-disabled:bg-background hover:not-disabled:border-border focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-1 disabled:opacity-50 disabled:cursor-not-allowed motion-reduce:transition-none",
         isActive && "text-foreground bg-background border-border-strong",
       )}

package/data/registry/react/components/rich-text-editor/index.tsx

@@ -5,6 +5,7 @@ import { useEditor, EditorContent, type Editor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
 import Link from "@tiptap/extension-link";
+import { cn } from "@SH_UI_UTILS@";
 import {
   BoldIcon,
   ItalicIcon,
@@ -51,9 +52,6 @@ export interface RichTextEditorProps {
   "aria-label"?: string;
 }
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 /**
  * Tiptap 기반 리치 텍스트 에디터.
@@ -117,7 +115,7 @@ export function RichTextEditor({
 
   return (
     <div
-      className={cx("sh-ui-rte", className)}
+      className={cn("sh-ui-rte", className)}
       data-readonly={readOnly || undefined}
       style={
         {
@@ -330,7 +328,7 @@ function ToolbarButton({
   return (
     <button
       type="button"
-      className={cx("sh-ui-rte__btn", isActive && "is-active")}
+      className={cn("sh-ui-rte__btn", isActive && "is-active")}
       aria-label={label}
       aria-pressed={isActive || undefined}
       title={label}

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

@@ -3,17 +3,15 @@
 import * as React from "react";
 import { Select as BaseSelect } from "@base-ui/react/select";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export const Select = BaseSelect.Root;
 
 export function SelectValue({ placeholder, className, ...props }: { placeholder?: string; className?: string } & Omit<
   React.ComponentPropsWithoutRef<typeof BaseSelect.Value>, "children"
 >) {
   return (
-    <BaseSelect.Value className={cx("flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap", className)} {...props}>
+    <BaseSelect.Value className={cn("flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap", className)} {...props}>
       {(value) =>
         value !== null && value !== undefined && value !== "" ? (
           (value as React.ReactNode)
@@ -31,7 +29,7 @@ export const SelectTrigger = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <BaseSelect.Trigger
     ref={ref}
-    className={cx(
+    className={cn(
       "inline-flex items-center justify-between gap-[var(--space-2)] min-w-40 h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] text-[length:var(--text-sm)] leading-none cursor-pointer transition-[border-color,background-color] duration-[var(--duration-fast)] select-none hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[popup-open]:border-border-strong disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none",
       className,
     )}
@@ -61,7 +59,7 @@ export const SelectContent = React.forwardRef<
     <BaseSelect.Positioner className="outline-none z-[var(--z-dropdown)]" sideOffset={4} align="start">
       <BaseSelect.Popup
         ref={ref}
-        className={cx(
+        className={cn(
           "min-w-[var(--anchor-width,10rem)] max-h-[min(24rem,var(--available-height,24rem))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_4px_6px_-1px_rgba(0,0,0,0.08),0_2px_4px_-2px_rgba(0,0,0,0.05)] text-[length:var(--text-sm)] origin-[var(--transform-origin)] animate-[sh-ui-select-in_140ms_ease-out] data-[ending-style]:animate-[sh-ui-select-out_100ms_ease-in_forwards] motion-reduce:animate-none motion-reduce:data-[ending-style]:animate-none",
           className,
         )}
@@ -82,7 +80,7 @@ export const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseSelect.GroupLabel
     ref={ref}
-    className={cx(
+    className={cn(
       "py-[var(--space-2)] px-[var(--space-2)] pb-[var(--space-1)] text-[length:var(--text-xs)] font-semibold text-foreground-muted uppercase tracking-[0.04em]",
       className,
     )}
@@ -97,7 +95,7 @@ export const SelectItem = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <BaseSelect.Item
     ref={ref}
-    className={cx(
+    className={cn(
       "flex items-center gap-[var(--space-2)] py-2 px-3 rounded-[calc(var(--radius)-2px)] cursor-pointer outline-none select-none transition-colors duration-[80ms] data-[highlighted]:bg-background-muted hover:bg-background-muted data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:pointer-events-none",
       className,
     )}
@@ -122,7 +120,7 @@ export const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseSelect.Separator
     ref={ref}
-    className={cx("h-px bg-border my-[var(--space-1)]", className)}
+    className={cn("h-px bg-border my-[var(--space-1)]", className)}
     {...props}
   />
 ));
@@ -178,7 +176,7 @@ export function MultiSelectValue({
 } & Omit<React.ComponentPropsWithoutRef<typeof BaseSelect.Value>, "children" | "render">) {
   const { remove, clear } = useMultiSelect();
   return (
-    <BaseSelect.Value className={cx("flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap", className)} {...props}>
+    <BaseSelect.Value className={cn("flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap", className)} {...props}>
       {(value) => {
         const arr = Array.isArray(value) ? (value as string[]) : [];
         if (arr.length === 0) return <span className="text-foreground-subtle">{placeholder}</span>;

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

@@ -4,10 +4,8 @@ import * as React from "react";
 import { Select as BaseSelect } from "@base-ui/react/select";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export const Select = BaseSelect.Root;
 
 /** shadcn 호환: <SelectValue placeholder="..." /> */
@@ -20,7 +18,7 @@ export function SelectValue({
   "children"
 >) {
   return (
-    <BaseSelect.Value className={cx("sh-ui-select__value", className)} {...props}>
+    <BaseSelect.Value className={cn("sh-ui-select__value", className)} {...props}>
       {(value) =>
         value !== null && value !== undefined && value !== "" ? (
           (value as React.ReactNode)
@@ -38,7 +36,7 @@ export const SelectTrigger = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <BaseSelect.Trigger
     ref={ref}
-    className={cx("sh-ui-select__trigger", className)}
+    className={cn("sh-ui-select__trigger", className)}
     {...props}
   >
     {children}
@@ -74,7 +72,7 @@ export const SelectContent = React.forwardRef<
     >
       <BaseSelect.Popup
         ref={ref}
-        className={cx("sh-ui-select__content", className)}
+        className={cn("sh-ui-select__content", className)}
         {...props}
       >
         {children}
@@ -92,7 +90,7 @@ export const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseSelect.GroupLabel
     ref={ref}
-    className={cx("sh-ui-select__label", className)}
+    className={cn("sh-ui-select__label", className)}
     {...props}
   />
 ));
@@ -104,7 +102,7 @@ export const SelectItem = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <BaseSelect.Item
     ref={ref}
-    className={cx("sh-ui-select__item", className)}
+    className={cn("sh-ui-select__item", className)}
     {...props}
   >
     <BaseSelect.ItemIndicator className="sh-ui-select__indicator" aria-hidden>
@@ -131,7 +129,7 @@ export const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseSelect.Separator
     ref={ref}
-    className={cx("sh-ui-select__separator", className)}
+    className={cn("sh-ui-select__separator", className)}
     {...props}
   />
 ));
@@ -223,7 +221,7 @@ export function MultiSelectValue({
 >) {
   const { remove, clear } = useMultiSelect();
   return (
-    <BaseSelect.Value className={cx("sh-ui-select__value", className)} {...props}>
+    <BaseSelect.Value className={cn("sh-ui-select__value", className)} {...props}>
       {(value) => {
         const arr = Array.isArray(value) ? (value as string[]) : [];
         if (arr.length === 0) {

package/data/registry/react/components/separator/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 type SeparatorOrientation = "horizontal" | "vertical";
 
 export interface SeparatorProps
@@ -33,7 +31,7 @@ export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
         aria-orientation={decorative ? undefined : orientation}
         aria-hidden={decorative || undefined}
         data-orientation={orientation}
-        className={cx("bg-border shrink-0", sizing, className)}
+        className={cn("bg-border shrink-0", sizing, className)}
         {...props}
       />
     );

package/data/registry/react/components/separator/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 SeparatorOrientation = "horizontal" | "vertical";
 
 export interface SeparatorProps
@@ -35,7 +33,7 @@ export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
         aria-orientation={decorative ? undefined : orientation}
         aria-hidden={decorative || undefined}
         data-orientation={orientation}
-        className={cx(
+        className={cn(
           "sh-ui-separator",
           `sh-ui-separator--${orientation}`,
           className,