sh-ui-cli 0.45.2 → 0.46.0

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

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

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

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
+import styles from "./styles.module.css";
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Card = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(styles.card, className)} {...props} />
+  ),
+);
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-header"
+      className={cn(styles.header, className)}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(styles.title, className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(styles.description, className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+/**
+ * 헤더 우측에 배치되는 슬롯. CardHeader 내부에서 grid 2번째 컬럼을 차지.
+ * CardHeader가 `:has(.action)`으로 감지해 레이아웃을 전환한다.
+ */
+export const CardAction = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(styles.action, className)} {...props} />
+  ),
+);
+CardAction.displayName = "CardAction";
+
+export const CardContent = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(styles.content, className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(styles.footer, className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";

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/card/styles.module.css

@@ -0,0 +1,73 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  padding: var(--space-6) 0;
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+/* 헤더: 기본은 타이틀/설명 세로 스택. action 있으면 2열 그리드로 전환. */
+.header {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: auto;
+  row-gap: 0.375rem;
+  padding: 0 var(--space-6);
+}
+
+.header:has(.action) {
+  grid-template-columns: 1fr auto;
+}
+
+.title {
+  font-size: var(--text-base);
+  font-weight: var(--weight-semibold);
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+
+.description {
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  color: var(--foreground-muted);
+}
+
+.action {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  align-self: start;
+  justify-self: end;
+}
+
+.content {
+  padding: 0 var(--space-6);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+}
+
+.footer {
+  padding: 0 var(--space-6);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* 모바일: 패딩 축소 */
+@media (max-width: 640px) {
+  .card {
+    gap: var(--space-4);
+    padding: var(--space-4) 0;
+  }
+  .header,
+  .content,
+  .footer {
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+  }
+  .footer {
+    flex-wrap: wrap;
+  }
+}

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