sh-ui-cli 0.45.2 → 0.46.0

package/data/changelog/versions.json

@@ -2,6 +2,32 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.46.0",
+      "date": "2026-05-04",
+      "title": "CSS Modules 변종 파일럿 — button/card/input",
+      "type": "minor",
+      "highlights": [
+        "**CSS Modules 변종 파일럿** — `button`, `card`, `input` 에 `index.module.tsx` + `styles.module.css` 변종 추가. `sh-ui.config.json` 의 `cssFramework` 를 `\"css-modules\"` 로 두면 CLI 가 `import styles from \"./styles.module.css\"` 형태로 설치하고, 클래스 이름은 모듈 해시로 격리됨. 토큰은 plain/tailwind 와 동일한 `tokens.css` (`:root` CSS custom properties) 를 공유.",
+        "**Fallback 일반화** — 기존엔 tailwind 한정이던 `effectiveFramework` 가 모든 변종 공통으로 동작. `cssFramework` 에 변종이 없는 컴포넌트는 plain 으로 자동 fallback 되며 `ℹ <name> — <fw> 변종 미제공, plain 변종으로 설치` 한 줄 안내 출력. 점진적 rollout 패턴 그대로 — 컴포넌트마다 변종을 갖출 필요 없이 가능한 것부터 제공.",
+        "**`utils` 의 frameworks 분기** — `lib/cn.ts` 가 `[\"plain\", \"css-modules\"]` 로 매칭. CSS Modules 환경도 zero-dep `cn` 을 그대로 공유 (clsx/tailwind-merge 가 필요한 건 tailwind 변종뿐).",
+        "css-modules 는 여전히 `CSS_FRAMEWORKS_PLANNED` 유지 — 파일럿 3개만 변종이 있어 UI 노출은 다음 라운드에서 전체 컴포넌트 롤아웃 후 SUPPORTED 로 승격. 지금도 사용자가 직접 `sh-ui.config.json` 을 손대면 동작."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.46.0"
+    },
+    {
+      "version": "0.45.3",
+      "date": "2026-04-30",
+      "title": "공유 `cn` 유틸 + CSS 프레임워크 가이드 docs",
+      "type": "patch",
+      "highlights": [
+        "**공유 `cn` 유틸** — 컴포넌트 74 곳에 흩어져 있던 로컬 `cx`/`mergeClass` 함수 제거. 모두 `lib/utils.ts` 의 `cn` 으로 통일. plain 변종은 zero-dep custom 구현, tailwind 변종은 `clsx + tailwind-merge` 로 utility 충돌 머지(예: `cn(\"bg-primary\", \"bg-red-500\")` → `\"bg-red-500\"`). registry.json 에 `utils` 엔트리 신설, styled 컴포넌트 43 개가 `registryDependencies: [\"utils\"]` 로 자동 의존 — `add button` 시 `utils` 도 함께 카피.",
+        "**`@SH_UI_UTILS@` placeholder 치환** — 컴포넌트가 `import { cn } from \"@SH_UI_UTILS@\"` 로 import 하면 CLI 가 add 시점에 `aliases.utils` 값(예: `@/lib/utils`)으로 치환. cn 유틸 import 경로가 사용자 프로젝트 alias 와 자동 맞아떨어짐. `aliases.utils` 미설정 시 친절 에러로 안내.",
+        "**CSS 프레임워크 docs 페이지 추가** — `apps/docs/(docs)/css-framework/page.tsx` 신설. 변종 시스템 큰 그림 (현재 plain/tailwind + 계획 중 css-modules/vanilla-extract) + 모드별 차이·전환·fallback 설명. 사이드바 nav 에 \"CSS 프레임워크\" 링크 추가, cli 페이지에서 cross-link.",
+        "**ui-app-template config 보강** — 누락됐던 `aliases.utils` 추가. 신규 init 도 동일하게 채워짐."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.45.3"
+    },
     {
       "version": "0.45.2",
       "date": "2026-04-30",

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

@@ -1,10 +1,8 @@
 import * as React from "react";
 import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
 export type AccordionSize = "sm" | "md";
@@ -19,7 +17,7 @@ export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
   ({ className, size = "md", ...props }, ref) => (
     <BaseAccordion.Root
       ref={ref}
-      className={cx("flex flex-col w-full", className)}
+      className={cn("flex flex-col w-full", className)}
       data-size={size}
       {...props}
     />
@@ -33,7 +31,7 @@ export const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseAccordion.Item
     ref={ref}
-    className={cx("border-b border-border first:border-t", className)}
+    className={cn("border-b border-border first:border-t", className)}
     {...props}
   />
 ));
@@ -46,7 +44,7 @@ export const AccordionTrigger = React.forwardRef<
   <BaseAccordion.Header className="m-0 font-[inherit]">
     <BaseAccordion.Trigger
       ref={ref}
-      className={cx(
+      className={cn(
         "flex items-center justify-between gap-[var(--space-4)] w-full px-[var(--space-1)] py-[var(--space-4)] bg-transparent border-none text-foreground text-[0.9375rem] font-medium leading-snug text-left cursor-pointer transition-[background-color] duration-[var(--duration-fast)] hover:not-disabled:not-data-[disabled]:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 focus-visible:rounded-[calc(var(--radius)-2px)] disabled:cursor-not-allowed disabled:text-foreground-muted data-[disabled]:cursor-not-allowed data-[disabled]:text-foreground-muted [[data-size=sm]_&]:py-[var(--space-2)] [[data-size=sm]_&]:text-[length:var(--text-xs)] [[data-size=sm]_&]:leading-[1.2] motion-reduce:transition-none",
         className,
       )}
@@ -74,7 +72,7 @@ export const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <BaseAccordion.Panel
     ref={ref}
-    className={cx(
+    className={cn(
       "overflow-hidden h-[var(--accordion-panel-height)] transition-[height] duration-[var(--duration-slow)] data-[starting-style]:h-0 data-[ending-style]:h-0 motion-reduce:transition-none",
       className,
     )}

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

@@ -2,10 +2,8 @@ import * as React from "react";
 import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
 import "./styles.css";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
 export type AccordionSize = "sm" | "md";
@@ -26,7 +24,7 @@ export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
   ({ className, size = "md", ...props }, ref) => (
     <BaseAccordion.Root
       ref={ref}
-      className={cx("sh-ui-accordion", className)}
+      className={cn("sh-ui-accordion", className)}
       data-size={size}
       {...props}
     />
@@ -40,7 +38,7 @@ export const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <BaseAccordion.Item
     ref={ref}
-    className={cx("sh-ui-accordion__item", className)}
+    className={cn("sh-ui-accordion__item", className)}
     {...props}
   />
 ));
@@ -59,7 +57,7 @@ export const AccordionTrigger = React.forwardRef<
   <BaseAccordion.Header className="sh-ui-accordion__header">
     <BaseAccordion.Trigger
       ref={ref}
-      className={cx("sh-ui-accordion__trigger", className)}
+      className={cn("sh-ui-accordion__trigger", className)}
       {...props}
     >
       <span className="sh-ui-accordion__trigger-label">{children}</span>
@@ -90,7 +88,7 @@ export const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <BaseAccordion.Panel
     ref={ref}
-    className={cx("sh-ui-accordion__panel", className)}
+    className={cn("sh-ui-accordion__panel", className)}
     {...props}
   >
     <div className="sh-ui-accordion__content">{children}</div>

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

@@ -2,11 +2,9 @@ import * as React from "react";
 import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
 import { cva, type VariantProps } from "class-variance-authority";
 
+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(" ");
-}
 
 const avatarVariants = cva(
   "relative inline-flex items-center justify-center shrink-0 align-middle overflow-hidden rounded-full bg-background-muted text-foreground-muted font-medium select-none",
@@ -37,7 +35,7 @@ export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
     return (
       <BaseAvatar.Root
         ref={ref}
-        className={cx(avatarVariants({ size }), className)}
+        className={cn(avatarVariants({ size }), className)}
         {...props}
       />
     );
@@ -51,7 +49,7 @@ export const AvatarImage = React.forwardRef<
   return (
     <BaseAvatar.Image
       ref={ref}
-      className={cx("w-full h-full object-cover block", className)}
+      className={cn("w-full h-full object-cover block", className)}
       {...props}
     />
   );
@@ -64,7 +62,7 @@ export const AvatarFallback = React.forwardRef<
   return (
     <BaseAvatar.Fallback
       ref={ref}
-      className={cx(
+      className={cn(
         "inline-flex items-center justify-center w-full h-full uppercase tracking-[0.02em]",
         className,
       )}

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

@@ -2,11 +2,9 @@ import * as React from "react";
 import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
 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(" ");
-}
 
 export type AvatarSize = "sm" | "md" | "lg" | "xl";
 
@@ -35,7 +33,7 @@ export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
     return (
       <BaseAvatar.Root
         ref={ref}
-        className={cx("sh-ui-avatar", `sh-ui-avatar--${size}`, className)}
+        className={cn("sh-ui-avatar", `sh-ui-avatar--${size}`, className)}
         {...props}
       />
     );
@@ -52,7 +50,7 @@ export const AvatarImage = React.forwardRef<
   return (
     <BaseAvatar.Image
       ref={ref}
-      className={cx("sh-ui-avatar__image", className)}
+      className={cn("sh-ui-avatar__image", className)}
       {...props}
     />
   );
@@ -68,7 +66,7 @@ export const AvatarFallback = React.forwardRef<
   return (
     <BaseAvatar.Fallback
       ref={ref}
-      className={cx("sh-ui-avatar__fallback", className)}
+      className={cn("sh-ui-avatar__fallback", className)}
       {...props}
     />
   );

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

@@ -1,10 +1,8 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-function cx(...args: (string | undefined | false | null)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 const badgeVariants = cva(
   "inline-flex items-center gap-1 px-2 border border-transparent rounded-full font-medium leading-none whitespace-nowrap align-middle select-none",
   {
@@ -39,7 +37,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     return (
       <span
         ref={ref}
-        className={cx(badgeVariants({ variant, size }), className)}
+        className={cn(badgeVariants({ variant, size }), className)}
         {...props}
       />
     );

package/data/registry/react/components/badge/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 BadgeVariant =
   | "primary"
   | "secondary"
@@ -29,7 +27,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     return (
       <span
         ref={ref}
-        className={cx(
+        className={cn(
           "sh-ui-badge",
           `sh-ui-badge--${variant}`,
           `sh-ui-badge--${size}`,

package/data/registry/react/components/breadcrumb/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 const Breadcrumb = React.forwardRef<
   HTMLElement,
   React.HTMLAttributes<HTMLElement>
@@ -12,7 +10,7 @@ export const Breadcrumb = React.forwardRef<
     <nav
       ref={ref}
       aria-label="Breadcrumb"
-      className={cx("text-[length:var(--text-sm)] text-foreground-muted", className)}
+      className={cn("text-[length:var(--text-sm)] text-foreground-muted", className)}
       {...props}
     />
   );
@@ -25,7 +23,7 @@ export const BreadcrumbList = React.forwardRef<
   return (
     <ol
       ref={ref}
-      className={cx(
+      className={cn(
         "flex items-center flex-wrap gap-1.5 m-0 p-0 list-none",
         className,
       )}
@@ -41,7 +39,7 @@ export const BreadcrumbItem = React.forwardRef<
   return (
     <li
       ref={ref}
-      className={cx("inline-flex items-center gap-1.5 min-w-0", className)}
+      className={cn("inline-flex items-center gap-1.5 min-w-0", className)}
       {...props}
     />
   );
@@ -54,7 +52,7 @@ export const BreadcrumbLink = React.forwardRef<
   return (
     <a
       ref={ref}
-      className={cx(
+      className={cn(
         "text-foreground-muted no-underline rounded-[calc(var(--radius)-2px)] px-0.5 transition-colors duration-[var(--duration-fast)] hover:text-foreground hover:underline hover:underline-offset-[3px] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none",
         className,
       )}
@@ -73,7 +71,7 @@ export const BreadcrumbPage = React.forwardRef<
       role="link"
       aria-current="page"
       aria-disabled="true"
-      className={cx(
+      className={cn(
         "text-foreground font-medium overflow-hidden text-ellipsis whitespace-nowrap",
         className,
       )}
@@ -91,7 +89,7 @@ export const BreadcrumbSeparator = React.forwardRef<
       ref={ref}
       role="presentation"
       aria-hidden="true"
-      className={cx(
+      className={cn(
         "inline-flex items-center text-foreground-muted opacity-60",
         className,
       )}
@@ -111,7 +109,7 @@ export const BreadcrumbEllipsis = React.forwardRef<
       ref={ref}
       role="presentation"
       aria-hidden="true"
-      className={cx(
+      className={cn(
         "inline-flex items-center w-6 h-6 justify-center text-foreground-muted",
         className,
       )}

package/data/registry/react/components/breadcrumb/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@";
 /* ───────── Breadcrumb (nav) ─────────
  * 시맨틱: <nav aria-label="Breadcrumb"><ol>...</ol></nav>.
  */
@@ -21,7 +19,7 @@ export const Breadcrumb = React.forwardRef<
     <nav
       ref={ref}
       aria-label="Breadcrumb"
-      className={cx("sh-ui-breadcrumb", className)}
+      className={cn("sh-ui-breadcrumb", className)}
       {...props}
     />
   );
@@ -37,7 +35,7 @@ export const BreadcrumbList = React.forwardRef<
   return (
     <ol
       ref={ref}
-      className={cx("sh-ui-breadcrumb__list", className)}
+      className={cn("sh-ui-breadcrumb__list", className)}
       {...props}
     />
   );
@@ -53,7 +51,7 @@ export const BreadcrumbItem = React.forwardRef<
   return (
     <li
       ref={ref}
-      className={cx("sh-ui-breadcrumb__item", className)}
+      className={cn("sh-ui-breadcrumb__item", className)}
       {...props}
     />
   );
@@ -69,7 +67,7 @@ export const BreadcrumbLink = React.forwardRef<
   return (
     <a
       ref={ref}
-      className={cx("sh-ui-breadcrumb__link", className)}
+      className={cn("sh-ui-breadcrumb__link", className)}
       {...props}
     />
   );
@@ -88,7 +86,7 @@ export const BreadcrumbPage = React.forwardRef<
       role="link"
       aria-current="page"
       aria-disabled="true"
-      className={cx("sh-ui-breadcrumb__page", className)}
+      className={cn("sh-ui-breadcrumb__page", className)}
       {...props}
     />
   );
@@ -106,7 +104,7 @@ export const BreadcrumbSeparator = React.forwardRef<
       ref={ref}
       role="presentation"
       aria-hidden="true"
-      className={cx("sh-ui-breadcrumb__separator", className)}
+      className={cn("sh-ui-breadcrumb__separator", className)}
       {...props}
     >
       {children ?? <ChevronRightIcon />}
@@ -126,7 +124,7 @@ export const BreadcrumbEllipsis = React.forwardRef<
       ref={ref}
       role="presentation"
       aria-hidden="true"
-      className={cx("sh-ui-breadcrumb__ellipsis", className)}
+      className={cn("sh-ui-breadcrumb__ellipsis", className)}
       {...props}
     >
       <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden>

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

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
+import styles from "./styles.module.css";
+
+type Variant = "primary" | "secondary" | "ghost" | "danger" | "link";
+type Size = "sm" | "md" | "lg";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * 시각적 위계.
+   * - `primary` — 페이지의 주요 액션. 한 화면에 하나만 권장.
+   * - `secondary` — 보조 액션. 약한 배경 + border.
+   * - `ghost` — 배경 없는 hover 강조 액션. 툴바/메뉴 항목에 적합.
+   * - `danger` — 파괴적 액션(삭제, 취소 등).
+   * - `link` — 텍스트 링크처럼 보이는 인라인 버튼.
+   *
+   * @default "primary"
+   */
+  variant?: Variant;
+  /**
+   * 크기.
+   * - `sm` — 조밀한 영역(테이블 행, 툴바)
+   * - `md` — 일반
+   * - `lg` — CTA·랜딩 영역
+   *
+   * @default "md"
+   */
+  size?: Size;
+}
+
+/**
+ * 사용자 액션을 트리거하는 기본 버튼 (CSS Modules 변종).
+ * variant로 시각적 위계(primary/secondary/ghost/danger/link)를,
+ * size로 크기를 결정한다. 페이지 이동 목적이면 anchor를 감싼 `link` variant를 사용할 것.
+ */
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "primary", size = "md", className, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(styles.button, styles[variant], styles[size], className)}
+      {...props}
+    />
+  ),
+);
+Button.displayName = "Button";

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const buttonVariants = cva(
@@ -62,7 +63,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ variant = "primary", size = "md", className, ...props }, ref) => (
     <button
       ref={ref}
-      className={[buttonVariants({ variant, size }), className].filter(Boolean).join(" ")}
+      className={cn(buttonVariants({ variant, size }), className)}
       {...props}
     />
   ),

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
 import "./styles.css";
 
 type Variant = "primary" | "secondary" | "ghost" | "danger" | "link";
@@ -33,14 +34,12 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
  */
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ variant = "primary", size = "md", className, ...props }, ref) => {
-    const classes = [
+    const classes = cn(
       "sh-ui-button",
       `sh-ui-button--${variant}`,
       `sh-ui-button--${size}`,
       className,
-    ]
-      .filter(Boolean)
-      .join(" ");
+    );
     return <button ref={ref} className={classes} {...props} />;
   },
 );

package/data/registry/react/components/button/styles.module.css

@@ -0,0 +1,92 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  font-weight: var(--weight-medium);
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast),
+    transform 80ms ease-out, filter 80ms;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.button:disabled {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+.button:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.button:active:not(:disabled) {
+  transform: scale(0.97);
+  filter: brightness(0.92);
+  transition-duration: 40ms;
+}
+
+/* sizes */
+.sm { height: var(--control-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
+.md { height: var(--control-md); padding: 0 var(--space-4); font-size: var(--text-sm); }
+.lg { height: var(--control-lg); padding: 0 var(--space-5); font-size: var(--text-base); }
+
+/* 모바일/터치 디바이스: 최소 탭 영역 보장 */
+@media (hover: none) and (pointer: coarse) {
+  .sm { height: 2.25rem; }
+  .md { height: 2.75rem; }
+}
+
+/* variants */
+.primary {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.primary:hover { background-color: var(--primary-hover); }
+
+.secondary {
+  background-color: var(--background-muted);
+  color: var(--foreground);
+  border-color: var(--border);
+}
+.secondary:hover { background-color: var(--background-subtle); }
+
+.ghost {
+  background-color: transparent;
+  color: var(--foreground);
+}
+.ghost:hover { background-color: var(--background-muted); }
+
+.danger {
+  background-color: var(--danger);
+  color: var(--danger-foreground);
+}
+
+.link {
+  background-color: transparent;
+  color: var(--foreground);
+  border-color: transparent;
+  height: auto;
+  padding: 0;
+  text-underline-offset: 3px;
+}
+.link:hover { text-decoration: underline; }
+.link:active:not(:disabled) {
+  transform: none;
+  filter: none;
+  color: var(--foreground-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: none;
+  }
+  .button:active:not(:disabled) {
+    transform: none;
+    filter: none;
+  }
+}

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

@@ -3,10 +3,8 @@
 import * as React from "react";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "../select";
 
-function cx(...args: (string | undefined | false)[]) {
-  return args.filter(Boolean).join(" ");
-}
 
+import { cn } from "@SH_UI_UTILS@";
 const DEFAULT_WEEKDAYS_KO = ["일", "월", "화", "수", "목", "금", "토"] as const;
 
 const isSameDay = (a: Date, b: Date) =>
@@ -287,7 +285,7 @@ export function Calendar(props: CalendarProps) {
 
   return (
     <div
-      className={cx("inline-flex gap-[var(--space-4)] select-none", numberOfMonths > 1 && "flex-wrap", className)}
+      className={cn("inline-flex gap-[var(--space-4)] select-none", numberOfMonths > 1 && "flex-wrap", className)}
       aria-label={ariaLabel}
     >
       {children
@@ -316,7 +314,7 @@ export function Calendar(props: CalendarProps) {
 export interface CalendarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 export const CalendarHeader = React.forwardRef<HTMLDivElement, CalendarHeaderProps>(
   function CalendarHeader({ className, ...props }, ref) {
-    return <div ref={ref} className={cx("flex items-center justify-between gap-[var(--space-1)] mb-[var(--space-2)]", className)} {...props} />;
+    return <div ref={ref} className={cn("flex items-center justify-between gap-[var(--space-1)] mb-[var(--space-2)]", className)} {...props} />;
   },
 );
 
@@ -324,7 +322,7 @@ const navButtonClasses =
   "inline-flex items-center justify-center w-7 h-7 p-0 border-none rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground-muted cursor-pointer shrink-0 transition-[background-color,color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted hover:not-disabled:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none";
 
 function CalendarNavPlaceholder() {
-  return <span className={cx(navButtonClasses, "invisible pointer-events-none")} aria-hidden />;
+  return <span className={cn(navButtonClasses, "invisible pointer-events-none")} aria-hidden />;
 }
 
 export interface CalendarNavButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -344,7 +342,7 @@ function makeNavButton(
         <button
           ref={ref}
           type="button"
-          className={cx(navButtonClasses, className)}
+          className={cn(navButtonClasses, className)}
           aria-label={ariaLabel ?? defaultLabel}
           onClick={(e) => { resolveHandler(ctx)(); onClick?.(e); }}
           {...props}
@@ -377,7 +375,7 @@ export function CalendarYearSelect({ className, formatYear = (y) => `${y}년` }:
   const items = ctx.yearOptions.includes(year) ? ctx.yearOptions : [...ctx.yearOptions, year].sort((a, b) => a - b);
   return (
     <Select value={String(year)} onValueChange={(v) => ctx.setYearForVisible(Number(v))}>
-      <SelectTrigger className={cx(calendarSelectTriggerClasses, className)} aria-label="연도">
+      <SelectTrigger className={cn(calendarSelectTriggerClasses, className)} aria-label="연도">
         <span>{formatYear(year)}</span>
       </SelectTrigger>
       <SelectContent>
@@ -397,7 +395,7 @@ export function CalendarMonthSelect({ className, formatMonth = (m) => `${m + 1}
   const month = ctx.visibleMonth.getMonth();
   return (
     <Select value={String(month)} onValueChange={(v) => ctx.setMonthForVisible(Number(v))}>
-      <SelectTrigger className={cx(calendarSelectTriggerClasses, className)} aria-label="월">
+      <SelectTrigger className={cn(calendarSelectTriggerClasses, className)} aria-label="월">
         <span>{formatMonth(month)}</span>
       </SelectTrigger>
       <SelectContent>
@@ -420,7 +418,7 @@ export const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(
     const ariaLabel = ctx.ariaLabel ?? monthLabel;
 
     return (
-      <div ref={ref} className={cx("", className)} {...rest}>
+      <div ref={ref} className={cn("", className)} {...rest}>
         <div className="grid grid-cols-7 mb-[var(--space-1)]" role="row">
           {ctx.weekdayLabels.map((label) => (
             <span key={label} className="flex items-center justify-center h-8 text-[length:var(--text-xs)] font-medium text-foreground-muted" role="columnheader" aria-label={label}>
@@ -450,10 +448,10 @@ export const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(
               isStart && isEnd ? "rounded-[calc(var(--radius)-2px)]" : "";
 
             return (
-              <div key={i} className={cx("flex items-center justify-center w-full h-[2.375rem] min-w-0", cellRangeBg, cellRangeRadius)}>
+              <div key={i} className={cn("flex items-center justify-center w-full h-[2.375rem] min-w-0", cellRangeBg, cellRangeRadius)}>
                 <button
                   type="button"
-                  className={cx(
+                  className={cn(
                     "flex items-center justify-center w-9 h-9 p-0 border-none rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground text-[0.8125rem] font-[inherit] cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-30 disabled:cursor-not-allowed motion-reduce:transition-none",
                     !current && "text-[var(--foreground-subtle,var(--foreground-muted))] opacity-40",
                     isToday && "font-bold underline underline-offset-[0.125rem]",