sh-ui-cli 0.49.0 → 0.50.0

package/data/changelog/versions.json

@@ -2,6 +2,20 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.50.0",
+      "date": "2026-05-04",
+      "title": "vanilla-extract 전수 롤아웃 + SUPPORTED 승격",
+      "type": "minor",
+      "highlights": [
+        "**vanilla-extract 전수 롤아웃** — v0.49.0 의 button/card/input 파일럿에 이어 나머지 40 개 styled 컴포넌트에 `index.vanilla-extract.tsx` + `styles.css.ts` 추가. 총 43/43 styled 컴포넌트가 plain · tailwind · css-modules · vanilla-extract 4 변종을 모두 갖춤. CSS Modules `.module.css` 를 vanilla-extract `style/styleVariants/keyframes` API 로 자동 변환하는 스크립트로 일괄 처리.",
+        "**SUPPORTED 승격** — `CSS_FRAMEWORKS_SUPPORTED` 에 vanilla-extract 추가. CSS_FRAMEWORKS_PLANNED 는 빈 배열 (시스템은 새 변종 추가에 열려 있음). CLI 의 `--cssFramework vanilla-extract`, init 인터랙티브 메뉴, CreateProjectDialog 토글 모두 활성화.",
+        "**동적 키 lookup** — 컴포넌트 tsx 의 `styles[\\`badge--${variant}\\`]` 같은 동적 패턴을 처리하기 위해 `byKey: Record<string, string>` 을 css.ts 가 export. 정적 export 만 허용하는 vanilla-extract 의 한계를 우회.",
+        "**docs + UI 갱신** — css-framework 가이드의 vanilla-extract 섹션을 SUPPORTED 로 갱신, PLANNED 안내문 일반화, VariantSource 컴포넌트가 4 번째 탭(vanilla-extract) 자동 노출.",
+        "원래 사용자 의도였던 \"취향대로 CSS 라이브러리 선택\" 이 plain · tailwind · css-modules · vanilla-extract 4 가지 SUPPORTED 변종으로 fully 달성됨. 시스템은 frameworks 분기 + fallback + 동적 emitter 등 미래 변종 추가에도 열려 있음."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.50.0"
+    },
     {
       "version": "0.49.0",
       "date": "2026-05-04",

package/data/registry/react/components/accordion/index.vanilla-extract.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import { byKey, accordion, accordion__item, accordion__header, accordion__trigger, accordionTriggerLabel, accordion__chevron, accordion__panel, accordion__content } from "./styles.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(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(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={accordion__header}>
+    <BaseAccordion.Trigger
+      ref={ref}
+      className={cn(accordion__trigger, className)}
+      {...props}
+    >
+      <span className={accordionTriggerLabel}>{children}</span>
+      <svg
+        className={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(accordion__panel, className)}
+    {...props}
+  >
+    <div className={accordion__content}>{children}</div>
+  </BaseAccordion.Panel>
+));
+AccordionContent.displayName = "AccordionContent";

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

@@ -0,0 +1,131 @@
+import { style } from "@vanilla-extract/css";
+
+export const accordion = style({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  selectors: {
+    [`&[data-size="sm"] ${accordion__trigger}`]: {
+      padding: "var(--space-2) var(--space-1)",
+      fontSize: "var(--text-xs)",
+      lineHeight: 1.2,
+    },
+    [`&[data-size="sm"] ${accordion__chevron}`]: {
+      width: "12px",
+      height: "12px",
+    },
+    [`&[data-size="sm"] ${accordion__content}`]: {
+      padding: "0 var(--space-1) var(--space-2)",
+      fontSize: "var(--text-xs)",
+      lineHeight: 1.5,
+    },
+  },
+});
+
+export const accordion__item = style({
+  borderBottom: "1px solid var(--border)",
+  selectors: {
+    "&:first-child": {
+      borderTop: "1px solid var(--border)",
+    },
+  },
+});
+
+export const accordion__header = style({
+  margin: 0,
+  font: "inherit",
+});
+
+export const accordion__trigger = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "var(--space-4)",
+  width: "100%",
+  padding: "var(--space-4) var(--space-1)",
+  background: "transparent",
+  border: "none",
+  color: "var(--foreground)",
+  fontSize: "0.9375rem",
+  fontWeight: "var(--weight-medium)",
+  lineHeight: 1.4,
+  textAlign: "left",
+  cursor: "pointer",
+  transition: "background-color var(--duration-fast) var(--ease-standard)",
+  WebkitTapHighlightColor: "transparent",
+  selectors: {
+    "&:not([disabled]):not([data-disabled]):hover": {
+      background: "var(--background-muted)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+      borderRadius: "calc(var(--radius) - 2px)",
+    },
+    "&[disabled]": {
+      cursor: "not-allowed",
+      color: "var(--foreground-muted)",
+    },
+    "&[data-disabled]": {
+      cursor: "not-allowed",
+      color: "var(--foreground-muted)",
+    },
+    [`&[data-panel-open] ${accordion__chevron}`]: {
+      transform: "rotate(180deg)",
+    },
+  },
+});
+
+export const accordionTriggerLabel = style({
+  minWidth: 0,
+  overflowWrap: "anywhere",
+});
+
+export const accordion__chevron = style({
+  flexShrink: 0,
+  color: "var(--foreground-muted)",
+  transition: "transform 180ms var(--ease-standard)",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transition: "none",
+    },
+  },
+});
+
+export const accordion__panel = style({
+  overflow: "hidden",
+  height: "var(--accordion-panel-height)",
+  transition: "height var(--duration-slow) var(--ease-standard)",
+  selectors: {
+    "&[data-starting-style]": {
+      height: 0,
+    },
+    "&[data-ending-style]": {
+      height: 0,
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transition: "none",
+    },
+  },
+});
+
+export const accordion__content = style({
+  padding: "0 var(--space-1) var(--space-4)",
+  fontSize: "var(--text-sm)",
+  lineHeight: 1.6,
+  color: "var(--foreground-muted)",
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "accordion": accordion,
+  "accordion__item": accordion__item,
+  "accordion__header": accordion__header,
+  "accordion__trigger": accordion__trigger,
+  "accordion__trigger-label": accordionTriggerLabel,
+  "accordion__chevron": accordion__chevron,
+  "accordion__panel": accordion__panel,
+  "accordion__content": accordion__content,
+};

package/data/registry/react/components/avatar/index.vanilla-extract.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import { byKey, avatar, avatarSm, avatarMd, avatarLg, avatarXl, avatar__image, avatar__fallback } from "./styles.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(avatar, byKey[`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(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(avatar__fallback, className)}
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,68 @@
+import { style } from "@vanilla-extract/css";
+
+export const avatar = style({
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  verticalAlign: "middle",
+  overflow: "hidden",
+  borderRadius: "999px",
+  background: "var(--background-muted)",
+  color: "var(--foreground-muted)",
+  fontWeight: "var(--weight-medium)",
+  userSelect: "none",
+});
+
+export const avatarSm = style({
+  width: "1.75rem",
+  height: "1.75rem",
+  fontSize: "var(--text-xs)",
+});
+
+export const avatarMd = style({
+  width: "2.5rem",
+  height: "2.5rem",
+  fontSize: "0.8125rem",
+});
+
+export const avatarLg = style({
+  width: "3rem",
+  height: "3rem",
+  fontSize: "var(--text-sm)",
+});
+
+export const avatarXl = style({
+  width: "4rem",
+  height: "4rem",
+  fontSize: "var(--text-base)",
+});
+
+export const avatar__image = style({
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  display: "block",
+});
+
+export const avatar__fallback = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%",
+  textTransform: "uppercase",
+  letterSpacing: "0.02em",
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "avatar": avatar,
+  "avatar--sm": avatarSm,
+  "avatar--md": avatarMd,
+  "avatar--lg": avatarLg,
+  "avatar--xl": avatarXl,
+  "avatar__image": avatar__image,
+  "avatar__fallback": avatar__fallback,
+};

package/data/registry/react/components/badge/index.vanilla-extract.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { byKey, badge, badgeSm, badgeMd, badgePrimary, badgeSecondary, badgeSuccess, badgeWarning, badgeDanger, badgeOutline } from "./styles.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(
+          badge,
+          byKey[`badge--${variant}`],
+          byKey[`badge--${size}`],
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);

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

@@ -0,0 +1,71 @@
+import { style } from "@vanilla-extract/css";
+
+export const badge = style({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.25rem",
+  padding: "0 0.5rem",
+  border: "1px solid transparent",
+  borderRadius: "999px",
+  fontWeight: "var(--weight-medium)",
+  lineHeight: 1,
+  whiteSpace: "nowrap",
+  verticalAlign: "middle",
+  userSelect: "none",
+});
+
+export const badgeSm = style({
+  height: "1.25rem",
+  fontSize: "0.6875rem",
+  padding: "0 0.375rem",
+});
+
+export const badgeMd = style({
+  height: "1.5rem",
+  fontSize: "var(--text-xs)",
+});
+
+export const badgePrimary = style({
+  background: "var(--primary)",
+  color: "var(--primary-foreground)",
+});
+
+export const badgeSecondary = style({
+  background: "var(--background-muted)",
+  color: "var(--foreground)",
+  borderColor: "var(--border)",
+});
+
+export const badgeSuccess = style({
+  background: "var(--success, #16a34a)",
+  color: "#fff",
+});
+
+export const badgeWarning = style({
+  background: "var(--warning, #d97706)",
+  color: "#fff",
+});
+
+export const badgeDanger = style({
+  background: "var(--danger)",
+  color: "var(--danger-foreground, #fff)",
+});
+
+export const badgeOutline = style({
+  background: "transparent",
+  color: "var(--foreground)",
+  borderColor: "var(--border-strong)",
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "badge": badge,
+  "badge--sm": badgeSm,
+  "badge--md": badgeMd,
+  "badge--primary": badgePrimary,
+  "badge--secondary": badgeSecondary,
+  "badge--success": badgeSuccess,
+  "badge--warning": badgeWarning,
+  "badge--danger": badgeDanger,
+  "badge--outline": badgeOutline,
+};

package/data/registry/react/components/breadcrumb/index.vanilla-extract.tsx

@@ -0,0 +1,152 @@
+import * as React from "react";
+import { byKey, breadcrumb, breadcrumb__list, breadcrumb__item, breadcrumb__link, breadcrumb__page, breadcrumb__separator, breadcrumb__ellipsis, breadcrumbEllipsisSr } from "./styles.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(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(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(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(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(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(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(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={breadcrumbEllipsisSr}>더 보기</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>
+  );
+}