sh-ui-cli 0.45.1 → 0.45.3

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,
       )}

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

@@ -1,15 +1,13 @@
 import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
 import "./styles.css";
 
 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("sh-ui-card", className)} {...props} />
+    <div ref={ref} className={cn("sh-ui-card", className)} {...props} />
   ),
 );
 Card.displayName = "Card";
@@ -19,7 +17,7 @@ export const CardHeader = React.forwardRef<HTMLDivElement, DivProps>(
     <div
       ref={ref}
       data-slot="card-header"
-      className={mergeClass("sh-ui-card__header", className)}
+      className={cn("sh-ui-card__header", className)}
       {...props}
     />
   ),
@@ -30,7 +28,7 @@ export const CardTitle = React.forwardRef<HTMLDivElement, DivProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={mergeClass("sh-ui-card__title", className)}
+      className={cn("sh-ui-card__title", className)}
       {...props}
     />
   ),
@@ -41,7 +39,7 @@ export const CardDescription = React.forwardRef<HTMLDivElement, DivProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={mergeClass("sh-ui-card__description", className)}
+      className={cn("sh-ui-card__description", className)}
       {...props}
     />
   ),
@@ -56,7 +54,7 @@ export const CardAction = React.forwardRef<HTMLDivElement, DivProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={mergeClass("sh-ui-card__action", className)}
+      className={cn("sh-ui-card__action", className)}
       {...props}
     />
   ),
@@ -67,7 +65,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, DivProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={mergeClass("sh-ui-card__content", className)}
+      className={cn("sh-ui-card__content", className)}
       {...props}
     />
   ),
@@ -78,7 +76,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, DivProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={mergeClass("sh-ui-card__footer", className)}
+      className={cn("sh-ui-card__footer", className)}
       {...props}
     />
   ),

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

@@ -2,10 +2,8 @@
 
 import * as React from "react";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 type Orientation = "horizontal" | "vertical";
 
 interface CarouselContextValue {
@@ -144,7 +142,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
       <CarouselContext.Provider value={value}>
         <div
           ref={ref}
-          className={cx("relative w-full", className)}
+          className={cn("relative w-full", className)}
           data-orientation={orientation}
           role="region"
           aria-roledescription="carousel"
@@ -171,7 +169,7 @@ export const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttrib
     return (
       <div
         ref={mergedRef}
-        className={cx(
+        className={cn(
           "flex gap-[var(--space-4)] overflow-x-auto overflow-y-hidden snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch] overscroll-x-contain [&::-webkit-scrollbar]:hidden motion-reduce:scroll-auto",
           orientation === "vertical" && "flex-col overflow-x-hidden overflow-y-auto snap-y snap-mandatory h-80",
           className,
@@ -193,7 +191,7 @@ export const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttribute
         ref={ref}
         role="group"
         aria-roledescription="slide"
-        className={cx(
+        className={cn(
           "flex-[0_0_100%] min-w-0 snap-start snap-always",
           orientation === "vertical" && "basis-auto",
           className,
@@ -218,7 +216,7 @@ export const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.Button
         ref={ref}
         type="button"
         aria-label="이전"
-        className={cx(
+        className={cn(
           navClasses,
           orientation === "horizontal" ? "-left-4" : "-top-4 left-1/2",
           className,
@@ -248,7 +246,7 @@ export const CarouselNext = React.forwardRef<HTMLButtonElement, React.ButtonHTML
         ref={ref}
         type="button"
         aria-label="다음"
-        className={cx(
+        className={cn(
           navClasses,
           orientation === "horizontal" ? "-right-4" : "-bottom-4 left-1/2 [top:auto]",
           className,
@@ -282,7 +280,7 @@ export const CarouselIndicators = React.forwardRef<HTMLDivElement, CarouselIndic
         ref={ref}
         role="tablist"
         aria-label="슬라이드 선택"
-        className={cx(
+        className={cn(
           "flex justify-center items-center gap-[var(--space-2)] mt-[var(--space-3)]",
           orientation === "vertical" && "absolute top-1/2 right-2 mt-0 flex-col -translate-y-1/2",
           className,

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

@@ -3,10 +3,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@";
 type Orientation = "horizontal" | "vertical";
 
 interface CarouselContextValue {
@@ -259,7 +257,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
       <CarouselContext.Provider value={value}>
         <div
           ref={ref}
-          className={cx("sh-ui-carousel", className)}
+          className={cn("sh-ui-carousel", className)}
           data-orientation={orientation}
           role="region"
           aria-roledescription="carousel"
@@ -292,7 +290,7 @@ export const CarouselContent = React.forwardRef<
   return (
     <div
       ref={mergedRef}
-      className={cx("sh-ui-carousel__content", className)}
+      className={cn("sh-ui-carousel__content", className)}
       data-orientation={orientation}
       {...props}
     />
@@ -313,7 +311,7 @@ export const CarouselItem = React.forwardRef<
       ref={ref}
       role="group"
       aria-roledescription="slide"
-      className={cx("sh-ui-carousel__item", className)}
+      className={cn("sh-ui-carousel__item", className)}
       data-orientation={orientation}
       {...props}
     />
@@ -332,7 +330,7 @@ export const CarouselPrevious = React.forwardRef<
       ref={ref}
       type="button"
       aria-label="이전"
-      className={cx("sh-ui-carousel__nav", "sh-ui-carousel__nav--prev", className)}
+      className={cn("sh-ui-carousel__nav", "sh-ui-carousel__nav--prev", className)}
       data-orientation={orientation}
       disabled={disabled || atStart || count === 0}
       onClick={(e) => {
@@ -368,7 +366,7 @@ export const CarouselNext = React.forwardRef<
       ref={ref}
       type="button"
       aria-label="다음"
-      className={cx("sh-ui-carousel__nav", "sh-ui-carousel__nav--next", className)}
+      className={cn("sh-ui-carousel__nav", "sh-ui-carousel__nav--next", className)}
       data-orientation={orientation}
       disabled={disabled || atEnd || count === 0}
       onClick={(e) => {
@@ -410,7 +408,7 @@ export const CarouselIndicators = React.forwardRef<
       ref={ref}
       role="tablist"
       aria-label="슬라이드 선택"
-      className={cx("sh-ui-carousel__indicators", className)}
+      className={cn("sh-ui-carousel__indicators", className)}
       data-orientation={orientation}
       {...props}
     >

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

@@ -2,10 +2,8 @@ import * as React from "react";
 import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
 import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export type CheckboxProps = Omit<
   React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root>,
   "className"
@@ -17,7 +15,7 @@ export const Checkbox = React.forwardRef<HTMLElement, CheckboxProps>(
   ({ className, ...props }, ref) => (
     <BaseCheckbox.Root
       ref={ref}
-      className={cx(
+      className={cn(
         "inline-flex items-center justify-center w-[1.125rem] h-[1.125rem] border border-border-strong rounded-[calc(var(--radius)-2px)] bg-background text-primary-foreground cursor-pointer shrink-0 transition-[background-color,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]:bg-primary data-[checked]:border-primary data-[indeterminate]:bg-primary data-[indeterminate]: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,
       )}
@@ -43,7 +41,7 @@ export const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps
   ({ className, orientation = "vertical", ...props }, ref) => (
     <BaseCheckboxGroup
       ref={ref}
-      className={cx(
+      className={cn(
         "flex gap-2.5",
         orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
         className,

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

@@ -3,10 +3,8 @@ import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
 import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 /* ───────────── Checkbox ───────────── */
 
 export type CheckboxProps = Omit<
@@ -24,7 +22,7 @@ export const Checkbox = React.forwardRef<HTMLElement, CheckboxProps>(
   ({ className, ...props }, ref) => (
     <BaseCheckbox.Root
       ref={ref}
-      className={cx("sh-ui-checkbox", className)}
+      className={cn("sh-ui-checkbox", className)}
       {...props}
     >
       <BaseCheckbox.Indicator className="sh-ui-checkbox__indicator">
@@ -60,7 +58,7 @@ export const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps
   ({ className, orientation = "vertical", ...props }, ref) => (
     <BaseCheckboxGroup
       ref={ref}
-      className={cx("sh-ui-checkbox-group", className)}
+      className={cn("sh-ui-checkbox-group", className)}
       data-orientation={orientation}
       {...props}
     />

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

@@ -10,6 +10,7 @@ import { css as cssLang } from "@codemirror/lang-css";
 import { html } from "@codemirror/lang-html";
 import { markdown } from "@codemirror/lang-markdown";
 
+import { cn } from "@SH_UI_UTILS@";
 export type CodeEditorLanguage =
   | "text" | "javascript" | "typescript" | "jsx" | "tsx"
   | "json" | "css" | "html" | "markdown";
@@ -30,9 +31,6 @@ export interface CodeEditorProps {
   "aria-labelledby"?: string;
 }
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 function languageExtension(language: CodeEditorLanguage): Extension {
   switch (language) {
@@ -136,7 +134,7 @@ export function CodeEditor({
   return (
     <div
       ref={hostRef}
-      className={cx(
+      className={cn(
         "sh-ui-code-editor relative border border-border rounded-[var(--radius)] bg-background text-[0.8125rem] leading-relaxed 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,
       )}

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

@@ -11,6 +11,7 @@ import { html } from "@codemirror/lang-html";
 import { markdown } from "@codemirror/lang-markdown";
 import "./styles.css";
 
+import { cn } from "@SH_UI_UTILS@";
 export type CodeEditorLanguage =
   | "text"
   | "javascript"
@@ -59,9 +60,6 @@ export interface CodeEditorProps {
   "aria-labelledby"?: string;
 }
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
 function languageExtension(language: CodeEditorLanguage): Extension {
   switch (language) {
@@ -219,7 +217,7 @@ export function CodeEditor({
   return (
     <div
       ref={hostRef}
-      className={cx("sh-ui-code-editor", className)}
+      className={cn("sh-ui-code-editor", className)}
       data-readonly={readOnly || undefined}
       style={
         {

package/data/registry/react/components/code-panel/index.tailwind.tsx

@@ -1,10 +1,8 @@
 import { codeToHtml } from "shiki";
 import { CodePanelCopyButton } from "./copy";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export interface CodePanelProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   code?: string;
@@ -21,7 +19,7 @@ const rootClasses =
 export async function CodePanel({
   code, language = "text", filename, showLineNumbers = true, hideCopy, className, children, ...rest
 }: CodePanelProps) {
-  const classes = cx(rootClasses, className);
+  const classes = cn(rootClasses, className);
 
   if (children !== undefined) {
     return <div className={classes} {...rest}>{children}</div>;
@@ -52,7 +50,7 @@ export async function CodePanel({
 export function CodePanelHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cx(
+      className={cn(
         "flex items-center justify-between gap-[var(--space-2)] py-[var(--space-2)] pl-[var(--space-4)] pr-[var(--space-3)] border-b border-border bg-background-muted text-[length:var(--text-xs)] text-foreground-muted",
         className,
       )}
@@ -65,7 +63,7 @@ export function CodePanelHeader({ className, children, ...props }: React.HTMLAtt
 
 export function CodePanelFilename({ className, children, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
   return (
-    <span className={cx("font-mono text-foreground", className)} {...props}>{children}</span>
+    <span className={cn("font-mono text-foreground", className)} {...props}>{children}</span>
   );
 }
 
@@ -93,7 +91,7 @@ export async function CodePanelBody({
 
   return (
     <div
-      className={cx(
+      className={cn(
         "overflow-x-auto [&_pre]:m-0 [&_pre]:py-[var(--space-3)] [&_pre]:px-[var(--space-4)] [&_pre]:!bg-transparent [&_pre]:font-mono [&_pre]:text-[length:inherit] [&_pre]:leading-[inherit] [&_pre]:border-none [&_pre]:rounded-none [&_code]:bg-transparent [&_code]:p-0 [&_code]:text-[length:inherit] [&_code]:block [&_.shiki]:!text-[var(--shiki-light)] [&_.shiki_span]:!text-[var(--shiki-light)] [&_.shiki]:!bg-transparent [&_.shiki_span]:!bg-transparent [.dark_&_.shiki]:!text-[var(--shiki-dark)] [.dark_&_.shiki_span]:!text-[var(--shiki-dark)] data-[line-numbers]:[&_pre_code]:[counter-reset:step] data-[line-numbers]:[&_pre_code_.line]:before:[content:counter(step)] data-[line-numbers]:[&_pre_code_.line]:before:[counter-increment:step] data-[line-numbers]:[&_pre_code_.line]:before:inline-block data-[line-numbers]:[&_pre_code_.line]:before:w-7 data-[line-numbers]:[&_pre_code_.line]:before:mr-[var(--space-4)] data-[line-numbers]:[&_pre_code_.line]:before:text-right data-[line-numbers]:[&_pre_code_.line]:before:text-foreground-muted data-[line-numbers]:[&_pre_code_.line]:before:opacity-70 data-[line-numbers]:[&_pre_code_.line]:before:select-none",
         className,
       )}

package/data/registry/react/components/code-panel/index.tsx

@@ -2,10 +2,8 @@ import { codeToHtml } from "shiki";
 import { CodePanelCopyButton } from "./copy";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 export interface CodePanelProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   /** 하이라이팅할 코드 문자열. children을 제공하지 않을 때 필수. */
@@ -56,7 +54,7 @@ export async function CodePanel({
   children,
   ...rest
 }: CodePanelProps) {
-  const classes = cx("sh-ui-code", className);
+  const classes = cn("sh-ui-code", className);
 
   if (children !== undefined) {
     return (
@@ -104,7 +102,7 @@ export function CodePanelHeader({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={cx("sh-ui-code__header", className)} {...props}>
+    <div className={cn("sh-ui-code__header", className)} {...props}>
       {children}
     </div>
   );
@@ -119,7 +117,7 @@ export function CodePanelFilename({
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) {
   return (
-    <span className={cx("sh-ui-code__filename", className)} {...props}>
+    <span className={cn("sh-ui-code__filename", className)} {...props}>
       {children}
     </span>
   );
@@ -182,7 +180,7 @@ export async function CodePanelBody({
 
   return (
     <div
-      className={cx("sh-ui-code__body", className)}
+      className={cn("sh-ui-code__body", className)}
       data-line-numbers={showLineNumbers || undefined}
       dangerouslySetInnerHTML={{ __html: html }}
       {...rest}

package/data/registry/react/components/color-picker/index.tailwind.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 
+import { cn } from "@SH_UI_UTILS@";
 interface HSV { h: number; s: number; v: number; }
 interface HSVA extends HSV { a: number; }
 
@@ -136,7 +137,7 @@ export function ColorPicker({
 
   return (
     <ColorPickerContext.Provider value={ctx}>
-      <div className={["flex flex-col gap-2.5 w-full select-none", className].filter(Boolean).join(" ")} {...rest}>
+      <div className={cn("flex flex-col gap-2.5 w-full select-none", className)} {...rest}>
         {children ?? (<><ColorPickerSaturation /><ColorPickerHue /><ColorPickerHex /></>)}
       </div>
     </ColorPickerContext.Provider>
@@ -157,7 +158,7 @@ export function ColorPickerSaturation({ className, style, ...rest }: ColorPicker
     <div
       ref={drag.ref}
       onPointerDown={drag.onPointerDown}
-      className={["relative w-full aspect-[4/3] rounded-[var(--radius)] cursor-crosshair overflow-hidden touch-none", className].filter(Boolean).join(" ")}
+      className={cn("relative w-full aspect-[4/3] rounded-[var(--radius)] cursor-crosshair overflow-hidden touch-none", className)}
       style={{ background: pureHueHex, ...style }}
       role="slider"
       aria-label="채도/명도"
@@ -187,7 +188,7 @@ export function ColorPickerHue({ className, ...rest }: ColorPickerHueProps) {
     <div
       ref={drag.ref}
       onPointerDown={drag.onPointerDown}
-      className={["relative w-full h-3.5 rounded-full cursor-pointer touch-none bg-[linear-gradient(to_right,#f00_0%,#ff0_16.66%,#0f0_33.33%,#0ff_50%,#00f_66.66%,#f0f_83.33%,#f00_100%)]", className].filter(Boolean).join(" ")}
+      className={cn("relative w-full h-3.5 rounded-full cursor-pointer touch-none bg-[linear-gradient(to_right,#f00_0%,#ff0_16.66%,#0f0_33.33%,#0ff_50%,#00f_66.66%,#f0f_83.33%,#f00_100%)]", className)}
       role="slider"
       aria-label="색조"
       aria-valuemin={0} aria-valuemax={360} aria-valuenow={Math.round(hsva.h)}
@@ -215,7 +216,7 @@ export function ColorPickerAlpha({ className, style, ...rest }: ColorPickerAlpha
     <div
       ref={drag.ref}
       onPointerDown={drag.onPointerDown}
-      className={["relative w-full h-3.5 rounded-full cursor-pointer touch-none overflow-hidden bg-white bg-[length:8px_8px] bg-[position:0_0,0_4px,4px_-4px,-4px_0] [background-image:linear-gradient(45deg,#ccc_25%,transparent_25%),linear-gradient(-45deg,#ccc_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#ccc_75%),linear-gradient(-45deg,transparent_75%,#ccc_75%)]", className].filter(Boolean).join(" ")}
+      className={cn("relative w-full h-3.5 rounded-full cursor-pointer touch-none overflow-hidden bg-white bg-[length:8px_8px] bg-[position:0_0,0_4px,4px_-4px,-4px_0] [background-image:linear-gradient(45deg,#ccc_25%,transparent_25%),linear-gradient(-45deg,#ccc_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#ccc_75%),linear-gradient(-45deg,transparent_75%,#ccc_75%)]", className)}
       role="slider"
       aria-label="투명도"
       aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(hsva.a * 100)}
@@ -248,7 +249,7 @@ export function ColorPickerHex({ className, showSwatch = true, ...rest }: ColorP
 
   return (
     <div
-      className={["flex items-center gap-[var(--space-2)]", className].filter(Boolean).join(" ")}
+      className={cn("flex items-center gap-[var(--space-2)]", className)}
       {...rest}
     >
       {showSwatch && (
@@ -285,7 +286,7 @@ export function ColorPickerSwatches({ className, colors, ...rest }: ColorPickerS
     <div
       role="group"
       aria-label="미리 준비된 색상"
-      className={["flex flex-wrap gap-1.5", className].filter(Boolean).join(" ")}
+      className={cn("flex flex-wrap gap-1.5", className)}
       {...rest}
     >
       {colors.map((c) => {

package/data/registry/react/components/color-picker/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
 import "./styles.css";
 
 /* ───────────── types ───────────── */
@@ -234,7 +235,7 @@ export function ColorPicker({
   return (
     <ColorPickerContext.Provider value={ctx}>
       <div
-        className={["sh-ui-color-picker", className].filter(Boolean).join(" ")}
+        className={cn("sh-ui-color-picker", className)}
         {...rest}
       >
         {children ?? (
@@ -271,7 +272,7 @@ export function ColorPickerSaturation({
     <div
       ref={drag.ref}
       onPointerDown={drag.onPointerDown}
-      className={["sh-ui-color-picker__sv", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-color-picker__sv", className)}
       style={{ background: pureHueHex, ...style }}
       role="slider"
       aria-label="채도/명도"
@@ -309,7 +310,7 @@ export function ColorPickerHue({ className, ...rest }: ColorPickerHueProps) {
     <div
       ref={drag.ref}
       onPointerDown={drag.onPointerDown}
-      className={["sh-ui-color-picker__hue", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-color-picker__hue", className)}
       role="slider"
       aria-label="색조"
       aria-valuemin={0}
@@ -341,7 +342,7 @@ export function ColorPickerAlpha({ className, style, ...rest }: ColorPickerAlpha
     <div
       ref={drag.ref}
       onPointerDown={drag.onPointerDown}
-      className={["sh-ui-color-picker__alpha", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-color-picker__alpha", className)}
       role="slider"
       aria-label="투명도"
       aria-valuemin={0}
@@ -392,7 +393,7 @@ export function ColorPickerHex({
 
   return (
     <div
-      className={["sh-ui-color-picker__row", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-color-picker__row", className)}
       {...rest}
     >
       {showSwatch && (
@@ -442,7 +443,7 @@ export function ColorPickerSwatches({
     <div
       role="group"
       aria-label="미리 준비된 색상"
-      className={["sh-ui-color-picker__swatches", className].filter(Boolean).join(" ")}
+      className={cn("sh-ui-color-picker__swatches", className)}
       {...rest}
     >
       {colors.map((c) => {