sh-ui-cli 0.46.0 → 0.47.0

package/data/changelog/versions.json

@@ -2,6 +2,19 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.47.0",
+      "date": "2026-05-04",
+      "title": "CSS Modules 전수 롤아웃 — SUPPORTED 승격",
+      "type": "minor",
+      "highlights": [
+        "**css-modules 전 styled 컴포넌트 변종 보유** — v0.46.0 의 button/card/input 파일럿에 이어 나머지 40 개 styled 컴포넌트(accordion, avatar, badge, calendar, carousel, checkbox, color-picker, combobox, context-menu, date-picker, dialog, dropdown-menu, file-upload, form, header, label, menubar, popover, progress, radio, select, sidebar, skeleton, slider, spinner, switch, tabs, textarea, toast, toggle, tooltip 외) 에 `index.module.tsx` + `styles.module.css` 추가. 총 43/43 styled 컴포넌트가 plain · tailwind · css-modules 3 변종을 모두 갖춤.",
+        "**css-modules SUPPORTED 승격** — `CSS_FRAMEWORKS_SUPPORTED` 에 추가, `CSS_FRAMEWORKS_PLANNED` 에서 제거. CLI 의 `--cssFramework css-modules` 와 init 인터랙티브 메뉴에서 정상 선택 가능. CreateProjectDialog 의 토글에서도 활성화됨 (vanilla-extract 만 disabled).",
+        "**docs 페이지 업데이트** — `apps/docs/(docs)/css-framework/page.tsx` 에 css-modules 섹션 추가 (.module.css + styles.X 사용 예시·적합한 경우·내부 동작). PLANNED 섹션은 vanilla-extract 만 남김. fallback 메시지·registry.json 예시도 css-modules 분기 포함하도록 갱신.",
+        "**Fallback 메시지 일반화** — 기존 `Tailwind 변종 미제공, plain 변종으로 설치 (Tailwind v4 환경에서 그대로 동작)` → `<framework> 변종 미제공, plain 변종으로 설치 (어떤 환경에서도 그대로 동작)`. 이전 마이너 (v0.46.0) 에서 `effectiveFramework` 일반화한 효과가 사용자 안내 문구에까지 반영."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.47.0"
+    },
     {
       "version": "0.46.0",
       "date": "2026-05-04",

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

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import styles from "./styles.module.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+export type AccordionSize = "sm" | "md";
+
+type AccordionProps = WithStringClassName<
+  React.ComponentPropsWithoutRef<typeof BaseAccordion.Root>
+> & {
+  /**
+   * 트리거 + chevron + content 의 패딩·폰트 크기 묶음.
+   * - `md` (기본) — padding 16/4, font 15px, chevron 16px
+   * - `sm` — padding 8/4, font 12px, chevron 12px. 좁은 사이드바·다중 섹션에 적합.
+   * @default "md"
+   */
+  size?: AccordionSize;
+};
+
+export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  ({ className, size = "md", ...props }, ref) => (
+    <BaseAccordion.Root
+      ref={ref}
+      className={cn(styles.accordion, className)}
+      data-size={size}
+      {...props}
+    />
+  ),
+);
+Accordion.displayName = "Accordion";
+
+export const AccordionItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAccordion.Item>>
+>(({ className, ...props }, ref) => (
+  <BaseAccordion.Item
+    ref={ref}
+    className={cn(styles.accordion__item, className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+/**
+ * Trigger: 헤더 버튼. 우측에 chevron이 자동으로 붙고 expanded 상태에서 회전한다.
+ * Base UI의 AccordionHeader(h3)로 감싸 의미론적 헤더 구조를 유지한다.
+ */
+export const AccordionTrigger = React.forwardRef<
+  HTMLButtonElement,
+  WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseAccordion.Trigger>
+  >
+>(({ className, children, ...props }, ref) => (
+  <BaseAccordion.Header className={styles.accordion__header}>
+    <BaseAccordion.Trigger
+      ref={ref}
+      className={cn(styles.accordion__trigger, className)}
+      {...props}
+    >
+      <span className={styles["accordion__trigger-label"]}>{children}</span>
+      <svg
+        className={styles.accordion__chevron}
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M4 6l4 4 4-4"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </BaseAccordion.Trigger>
+  </BaseAccordion.Header>
+));
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export const AccordionContent = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAccordion.Panel>>
+>(({ className, children, ...props }, ref) => (
+  <BaseAccordion.Panel
+    ref={ref}
+    className={cn(styles.accordion__panel, className)}
+    {...props}
+  >
+    <div className={styles.accordion__content}>{children}</div>
+  </BaseAccordion.Panel>
+));
+AccordionContent.displayName = "AccordionContent";

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

@@ -0,0 +1,111 @@
+.accordion {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.accordion__item {
+  border-bottom: 1px solid var(--border);
+}
+
+.accordion__item:first-child {
+  border-top: 1px solid var(--border);
+}
+
+.accordion__header {
+  margin: 0;
+  font: inherit;
+}
+
+.accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  width: 100%;
+  padding: var(--space-4) var(--space-1);
+  background: transparent;
+  border: none;
+  color: var(--foreground);
+  font-size: 0.9375rem;
+  font-weight: var(--weight-medium);
+  line-height: 1.4;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-standard);
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* hover는 enabled 일 때만. background tint — 다른 hover 효과를 원하면 className/style 로 override. */
+.accordion__trigger:not([disabled]):not([data-disabled]):hover {
+  background: var(--background-muted);
+}
+
+.accordion__trigger:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+  border-radius: calc(var(--radius) - 2px);
+}
+
+.accordion__trigger[disabled],
+.accordion__trigger[data-disabled] {
+  cursor: not-allowed;
+  color: var(--foreground-muted);
+}
+
+.accordion__trigger-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.accordion__chevron {
+  flex-shrink: 0;
+  color: var(--foreground-muted);
+  transition: transform 180ms var(--ease-standard);
+}
+
+.accordion__trigger[data-panel-open] .accordion__chevron {
+  transform: rotate(180deg);
+}
+
+/* 패널: Base UI가 --accordion-panel-height CSS 변수를 제공. grid trick으로 열림/닫힘 전환. */
+.accordion__panel {
+  overflow: hidden;
+  height: var(--accordion-panel-height);
+  transition: height var(--duration-slow) var(--ease-standard);
+}
+
+.accordion__panel[data-starting-style],
+.accordion__panel[data-ending-style] {
+  height: 0;
+}
+
+.accordion__content {
+  padding: 0 var(--space-1) var(--space-4);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+  color: var(--foreground-muted);
+}
+
+/* size="sm" — 좁은 사이드바·다중 섹션에 적합한 컴팩트 변형. */
+.accordion[data-size="sm"] .accordion__trigger {
+  padding: var(--space-2) var(--space-1);
+  font-size: var(--text-xs);
+  line-height: 1.2;
+}
+.accordion[data-size="sm"] .accordion__chevron {
+  width: 12px;
+  height: 12px;
+}
+.accordion[data-size="sm"] .accordion__content {
+  padding: 0 var(--space-1) var(--space-2);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .accordion__panel,
+  .accordion__chevron {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import styles from "./styles.module.css";
+
+import { cn } from "@SH_UI_UTILS@";
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+
+export interface AvatarProps
+  extends WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseAvatar.Root>
+  > {
+  /**
+   * 크기.
+   * - `sm` (24px) — 댓글·리스트 행
+   * - `md` (32px) — 일반 (기본)
+   * - `lg` (40px) — 헤더·프로필 카드
+   * - `xl` (56px) — 프로필 페이지
+   *
+   * @default "md"
+   */
+  size?: AvatarSize;
+}
+
+/**
+ * 사용자/엔티티를 대표하는 원형 이미지. `Avatar` 안에 `AvatarImage`와
+ * `AvatarFallback`을 함께 둬, 이미지 로드 실패 시 자동으로 fallback이 표시되도록 한다.
+ */
+export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
+  function Avatar({ className, size = "md", ...props }, ref) {
+    return (
+      <BaseAvatar.Root
+        ref={ref}
+        className={cn(styles.avatar, styles[`avatar--${size}`], className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/** Avatar 내부의 실제 이미지. 로드 실패 시 자동으로 가려지고 fallback이 노출된다. */
+export const AvatarImage = React.forwardRef<
+  HTMLImageElement,
+  WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseAvatar.Image>
+  >
+>(function AvatarImage({ className, ...props }, ref) {
+  return (
+    <BaseAvatar.Image
+      ref={ref}
+      className={cn(styles.avatar__image, className)}
+      {...props}
+    />
+  );
+});
+
+/** 이미지가 로드되지 않을 때 표시되는 대체 콘텐츠. 이니셜이나 아이콘을 권장. */
+export const AvatarFallback = React.forwardRef<
+  HTMLSpanElement,
+  WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseAvatar.Fallback>
+  >
+>(function AvatarFallback({ className, ...props }, ref) {
+  return (
+    <BaseAvatar.Fallback
+      ref={ref}
+      className={cn(styles.avatar__fallback, className)}
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,36 @@
+.avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  vertical-align: middle;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--background-muted);
+  color: var(--foreground-muted);
+  font-weight: var(--weight-medium);
+  user-select: none;
+}
+
+.avatar--sm { width: 1.75rem; height: 1.75rem; font-size: var(--text-xs); }
+.avatar--md { width: 2.5rem;  height: 2.5rem;  font-size: 0.8125rem; }
+.avatar--lg { width: 3rem;    height: 3rem;    font-size: var(--text-sm); }
+.avatar--xl { width: 4rem;    height: 4rem;    font-size: var(--text-base); }
+
+.avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.avatar__fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import styles from "./styles.module.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+export type BadgeVariant =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "outline";
+
+export type BadgeSize = "sm" | "md";
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+}
+
+/**
+ * 상태·카테고리·수량 등을 짧게 표기하는 인라인 라벨. 의미 전달이 색에만
+ * 의존하지 않도록 텍스트나 아이콘과 함께 사용할 것.
+ */
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  function Badge({ className, variant = "primary", size = "md", ...props }, ref) {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          styles.badge,
+          styles[`badge--${variant}`],
+          styles[`badge--${size}`],
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);

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

@@ -0,0 +1,57 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-weight: var(--weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+}
+
+/* sizes */
+.badge--sm {
+  height: 1.25rem;
+  font-size: 0.6875rem;
+  padding: 0 0.375rem;
+}
+.badge--md {
+  height: 1.5rem;
+  font-size: var(--text-xs);
+}
+
+/* variants */
+.badge--primary {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.badge--secondary {
+  background: var(--background-muted);
+  color: var(--foreground);
+  border-color: var(--border);
+}
+
+.badge--success {
+  background: var(--success, #16a34a);
+  color: #fff;
+}
+
+.badge--warning {
+  background: var(--warning, #d97706);
+  color: #fff;
+}
+
+.badge--danger {
+  background: var(--danger);
+  color: var(--danger-foreground, #fff);
+}
+
+.badge--outline {
+  background: transparent;
+  color: var(--foreground);
+  border-color: var(--border-strong);
+}

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

@@ -0,0 +1,152 @@
+import * as React from "react";
+import styles from "./styles.module.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+/* ───────── Breadcrumb (nav) ─────────
+ * 시맨틱: <nav aria-label="Breadcrumb"><ol>...</ol></nav>.
+ */
+
+/**
+ * 현재 페이지의 위치를 사이트 계층 위에서 보여주는 내비게이션. 항상 `BreadcrumbList`로
+ * 감싸고, 마지막 항목은 링크 대신 `BreadcrumbPage`로 표기해 현재 위치를 알린다.
+ */
+export const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement>
+>(function Breadcrumb({ className, ...props }, ref) {
+  return (
+    <nav
+      ref={ref}
+      aria-label="Breadcrumb"
+      className={cn(styles.breadcrumb, className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── List (ol) ───────── */
+
+/** 항목들을 담는 정렬 리스트(`<ol>`). Breadcrumb 직계 자식으로 사용. */
+export const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.OlHTMLAttributes<HTMLOListElement>
+>(function BreadcrumbList({ className, ...props }, ref) {
+  return (
+    <ol
+      ref={ref}
+      className={cn(styles.breadcrumb__list, className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Item (li) ───────── */
+
+/** 한 단계의 항목(`<li>`). 안에 `BreadcrumbLink` 또는 `BreadcrumbPage`를 둔다. */
+export const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.LiHTMLAttributes<HTMLLIElement>
+>(function BreadcrumbItem({ className, ...props }, ref) {
+  return (
+    <li
+      ref={ref}
+      className={cn(styles.breadcrumb__item, className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Link ───────── */
+
+/** 상위 단계로 이동하는 링크. 라우터 사용 시 `asChild` 패턴 대신 직접 `<a>` 속성으로 전달. */
+export const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.AnchorHTMLAttributes<HTMLAnchorElement>
+>(function BreadcrumbLink({ className, ...props }, ref) {
+  return (
+    <a
+      ref={ref}
+      className={cn(styles.breadcrumb__link, className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Page (현재 위치 — 링크 아님) ───────── */
+
+/** 마지막(현재) 항목. 링크가 아니므로 `aria-current="page"`가 자동 부여된다. */
+export const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(function BreadcrumbPage({ className, ...props }, ref) {
+  return (
+    <span
+      ref={ref}
+      role="link"
+      aria-current="page"
+      aria-disabled="true"
+      className={cn(styles.breadcrumb__page, className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Separator ───────── */
+
+/** 항목 사이 구분자. 기본은 `>` 아이콘이며 children으로 교체 가능. 스크린리더에서는 무시된다. */
+export const BreadcrumbSeparator = React.forwardRef<
+  HTMLLIElement,
+  React.LiHTMLAttributes<HTMLLIElement>
+>(function BreadcrumbSeparator({ className, children, ...props }, ref) {
+  return (
+    <li
+      ref={ref}
+      role="presentation"
+      aria-hidden="true"
+      className={cn(styles.breadcrumb__separator, className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon />}
+    </li>
+  );
+});
+
+/* ───────── Ellipsis — 중간 항목 축약 ───────── */
+
+/** 깊은 경로에서 중간 항목들을 축약하는 점 3개 표시. 클릭 가능한 전체 경로 메뉴와 함께 쓰면 유용. */
+export const BreadcrumbEllipsis = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(function BreadcrumbEllipsis({ className, ...props }, ref) {
+  return (
+    <span
+      ref={ref}
+      role="presentation"
+      aria-hidden="true"
+      className={cn(styles.breadcrumb__ellipsis, className)}
+      {...props}
+    >
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden>
+        <circle cx="3" cy="8" r="1.25" />
+        <circle cx="8" cy="8" r="1.25" />
+        <circle cx="13" cy="8" r="1.25" />
+      </svg>
+      <span className={styles["breadcrumb__ellipsis-sr"]}>더 보기</span>
+    </span>
+  );
+});
+
+function ChevronRightIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M6 4l4 4-4 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,82 @@
+.breadcrumb {
+  font-size: var(--text-sm);
+  color: var(--foreground-muted);
+}
+
+.breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.breadcrumb__link {
+  color: var(--foreground-muted);
+  text-decoration: none;
+  border-radius: calc(var(--radius) - 2px);
+  padding: 0 0.125rem;
+  transition: color var(--duration-fast);
+}
+
+.breadcrumb__link:hover {
+  color: var(--foreground);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.breadcrumb__link:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.breadcrumb__page {
+  color: var(--foreground);
+  font-weight: var(--weight-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--foreground-muted);
+  opacity: 0.6;
+}
+
+.breadcrumb__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  justify-content: center;
+  color: var(--foreground-muted);
+}
+
+.breadcrumb__ellipsis-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .breadcrumb__link {
+    transition: none;
+  }
+}