sh-ui-cli 0.42.0 → 0.43.0

package/README.md

@@ -151,7 +151,7 @@ npx -y sh-ui-cli mcp init --client claude-code --scope user
 ```json
 {
   "platform": "react",
-  "style": "default",
+  "cssFramework": "plain",
   "theme": { "base": "neutral", "radius": "md", "mode": "light-dark" },
   "paths": {
     "tokens": "src/shared/styles/tokens.css",
@@ -161,6 +161,11 @@ npx -y sh-ui-cli mcp init --client claude-code --scope user
 }
 ```
 
+`cssFramework` 옵션:
+
+- `"plain"` — CSS custom properties + 일반 .css 파일. 모든 컴포넌트 지원 (기본).
+- `"tailwind"` — Tailwind v4 utility class TSX 변종 (`class-variance-authority` 기반). button/card/input 부터 시작해 점진적으로 확대 중. 변종 미제공 컴포넌트는 add 시 plain 으로 자동 fallback — Tailwind v4 의 `@theme inline` 브리지가 sh-ui 토큰을 매핑하므로 plain CSS 도 그대로 동작.
+
 ## 더 알아보기
 
 - sh-ui 디자인 시스템: https://github.com/sanghyeonKim0201/sh-ui

package/data/changelog/versions.json

@@ -2,6 +2,31 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.43.0",
+      "date": "2026-04-30",
+      "title": "CSS 프레임워크 변종 시스템 + Tailwind 1차 지원",
+      "type": "minor",
+      "highlights": [
+        "**`cssFramework` 옵션 신설** — `sh-ui.config.json` 에 `cssFramework: \"plain\" | \"tailwind\"`. CLI `--css` / `sh-ui-cli init --cssFramework` / MCP `sh_ui_create_project` 의 `cssFramework` / playground UI 에서 모두 선택 가능. 기존 `style: \"default\"` 필드는 deprecated (무시).",
+        "**Tailwind v4 utility-class 변종** — `button`, `card`, `input` 의 utility-class 변종 (`class-variance-authority` 기반) 추가. registry.json 의 `frameworks: [\"plain\" | \"tailwind\"]` 분기 + dependency 분기 (`{name, frameworks}` 객체 형식) 지원. `cssFramework=\"tailwind\"` 인데 변종이 없는 컴포넌트는 plain 으로 자동 fallback — Tailwind v4 환경에서 그대로 동작.",
+        "**`@theme inline` 단일 소스** — `tokens.css` 가 Tailwind v4 의 `@theme inline { --color-*: var(--*); --radius-{sm,md,lg,xl}; }` 블록을 자동 emit. 템플릿(`nextjs-standalone`, `ui-app-template`)의 하드코딩 `@theme` 제거 — 토큰이 추가/변경돼도 매핑이 자동 동기화.",
+        "**토큰 emitter 디스패처** — `packages/tokens/build.mjs` 에 `(platform × cssFramework) → emitter` 테이블. 향후 `react/css-modules`, `react/vanilla-extract` 등 추가 시 한 줄로 등록."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.43.0"
+    },
+    {
+      "version": "0.42.1",
+      "date": "2026-04-30",
+      "title": "Calendar range 셀 연결 + 검색 다이얼로그 픽스",
+      "type": "patch",
+      "highlights": [
+        "**Calendar range 시각 픽스** — `mode=\"range\"` 에서 시작/종료 사이 셀이 끊김 없는 한 줄의 띠로 이어지도록 수정. 이전엔 그리드 칼럼(1fr) 안에 가운데 정렬된 2.25rem 버튼에 배경을 직접 칠해 칼럼 사이마다 흰 틈이 보였던 이슈",
+        "각 날짜 셀을 wrapper `<div class=\"sh-ui-calendar__cell\">` 로 감싸고 in-range / range-start / range-end 배경을 cell 에 적용 — 칼럼을 100% 채우므로 인접 셀이 자연스럽게 맞닿고, 진한 pill (selected) 은 그대로 버튼에 올라감",
+        "docs 사이트: 헤더 검색 다이얼로그 버그 픽스 + 디자인 다듬기"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.42.1"
+    },
     {
       "version": "0.42.0",
       "date": "2026-04-30",

package/data/registry/flutter/registry.json

@@ -1,5 +1,5 @@
 {
-  "$description": "Flutter 레지스트리 매니페스트 — CLI가 각 컴포넌트 name으로 조회해 files를 사용자 프로젝트의 lib/ 아래로 복사한다.",
+  "$description": "Flutter 레지스트리 매니페스트 — CLI가 각 컴포넌트 name으로 조회해 files를 사용자 프로젝트의 lib/ 아래로 복사한다. 컴포넌트 또는 file 엔트리에 frameworks?: string[] 옵션 — 미지정시 모든 cssFramework 에 적용, 지정시 해당 배열에 포함된 경우만 복사.",
   "components": {
     "tokens": {
       "name": "tokens",

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

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-[var(--space-2)] border border-transparent rounded-[var(--radius)] font-medium leading-none cursor-pointer select-none transition-[background-color,color,border-color] duration-[var(--duration-fast)] disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none focus-visible:outline-2 focus-visible:outline-foreground focus-visible:outline-offset-2 active:scale-[0.97] active:brightness-90",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-primary text-primary-foreground hover:bg-primary-hover",
+        secondary:
+          "bg-background-muted text-foreground border-border hover:bg-background-subtle",
+        ghost:
+          "bg-transparent text-foreground hover:bg-background-muted",
+        danger:
+          "bg-danger text-danger-foreground hover:brightness-95",
+        link:
+          "bg-transparent text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        sm: "h-[var(--control-sm)] px-[var(--space-3)] text-[length:var(--text-sm)]",
+        md: "h-[var(--control-md)] px-[var(--space-4)] text-[length:var(--text-sm)]",
+        lg: "h-[var(--control-lg)] px-[var(--space-5)] text-[length:var(--text-base)]",
+      },
+    },
+    defaultVariants: { variant: "primary", size: "md" },
+  },
+);
+
+type Variant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
+type Size = NonNullable<VariantProps<typeof buttonVariants>["size"]>;
+
+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;
+}
+
+/**
+ * 사용자 액션을 트리거하는 기본 버튼 (Tailwind utility class 변종).
+ * 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={[buttonVariants({ variant, size }), className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  ),
+);
+Button.displayName = "Button";

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

@@ -745,33 +745,39 @@ export const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(
             const hidden = !current && !ctx.showOutsideDays;
 
             if (hidden) {
-              return <span key={i} className="sh-ui-calendar__day sh-ui-calendar__day--hidden" aria-hidden />;
+              return <span key={i} className="sh-ui-calendar__cell sh-ui-calendar__cell--hidden" aria-hidden />;
             }
 
             return (
-              <button
+              <div
                 key={i}
-                type="button"
                 className={cx(
-                  "sh-ui-calendar__day",
-                  !current && "sh-ui-calendar__day--outside",
-                  selected && "sh-ui-calendar__day--selected",
-                  isToday && "sh-ui-calendar__day--today",
-                  inRange && "sh-ui-calendar__day--in-range",
-                  isStart && "sh-ui-calendar__day--range-start",
-                  isEnd && "sh-ui-calendar__day--range-end",
+                  "sh-ui-calendar__cell",
+                  inRange && "sh-ui-calendar__cell--in-range",
+                  isStart && "sh-ui-calendar__cell--range-start",
+                  isEnd && "sh-ui-calendar__cell--range-end",
                 )}
-                disabled={dDisabled}
-                tabIndex={-1}
-                onClick={() => { if (!dDisabled) ctx.handleSelect(date); }}
-                onMouseEnter={() => ctx.setHoverDate(date)}
-                onMouseLeave={() => ctx.setHoverDate(undefined)}
-                aria-label={formatIsoDate(date)}
-                aria-selected={selected || inRange || undefined}
-                data-today={isToday || undefined}
               >
-                {date.getDate()}
-              </button>
+                <button
+                  type="button"
+                  className={cx(
+                    "sh-ui-calendar__day",
+                    !current && "sh-ui-calendar__day--outside",
+                    selected && "sh-ui-calendar__day--selected",
+                    isToday && "sh-ui-calendar__day--today",
+                  )}
+                  disabled={dDisabled}
+                  tabIndex={-1}
+                  onClick={() => { if (!dDisabled) ctx.handleSelect(date); }}
+                  onMouseEnter={() => ctx.setHoverDate(date)}
+                  onMouseLeave={() => ctx.setHoverDate(undefined)}
+                  aria-label={formatIsoDate(date)}
+                  aria-selected={selected || inRange || undefined}
+                  data-today={isToday || undefined}
+                >
+                  {date.getDate()}
+                </button>
+              </div>
             );
           })}
         </div>

package/data/registry/react/components/calendar/styles.css

@@ -128,7 +128,36 @@
   border-radius: calc(var(--radius) - 2px);
 }
 
-/* ── Day cell ── */
+/* ── Cell (column slot, range strip carrier) ── */
+
+.sh-ui-calendar__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 2.375rem;
+  min-width: 0;
+}
+
+.sh-ui-calendar__cell--in-range,
+.sh-ui-calendar__cell--range-start,
+.sh-ui-calendar__cell--range-end {
+  background: color-mix(in srgb, var(--primary) 12%, transparent);
+}
+
+.sh-ui-calendar__cell--range-start:not(.sh-ui-calendar__cell--range-end) {
+  border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px);
+}
+
+.sh-ui-calendar__cell--range-end:not(.sh-ui-calendar__cell--range-start) {
+  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
+}
+
+.sh-ui-calendar__cell--range-start.sh-ui-calendar__cell--range-end {
+  border-radius: calc(var(--radius) - 2px);
+}
+
+/* ── Day button ── */
 
 .sh-ui-calendar__day {
   display: flex;
@@ -136,7 +165,6 @@
   justify-content: center;
   width: 2.25rem;
   height: 2.25rem;
-  margin: 0.0625rem auto;
   padding: 0;
   border: none;
   border-radius: calc(var(--radius) - 2px);
@@ -162,13 +190,6 @@
   opacity: 0.4;
 }
 
-.sh-ui-calendar__day--hidden {
-  visibility: hidden;
-  pointer-events: none;
-  cursor: default;
-  background: transparent;
-}
-
 .sh-ui-calendar__day--today {
   font-weight: var(--weight-bold);
   text-decoration: underline;
@@ -190,38 +211,3 @@
   opacity: 0.3;
   cursor: not-allowed;
 }
-
-/* ── Range ── */
-
-.sh-ui-calendar__day--in-range {
-  background: color-mix(in srgb, var(--primary) 12%, transparent);
-  border-radius: 0;
-}
-
-.sh-ui-calendar__day--in-range:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--primary) 22%, transparent);
-}
-
-.sh-ui-calendar__day--range-start {
-  background: var(--primary);
-  color: var(--primary-foreground);
-  font-weight: var(--weight-semibold);
-  border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px);
-}
-
-.sh-ui-calendar__day--range-end {
-  background: var(--primary);
-  color: var(--primary-foreground);
-  font-weight: var(--weight-semibold);
-  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
-}
-
-.sh-ui-calendar__day--range-start.sh-ui-calendar__day--range-end {
-  border-radius: calc(var(--radius) - 2px);
-}
-
-.sh-ui-calendar__day--range-start:hover:not(:disabled),
-.sh-ui-calendar__day--range-end:hover:not(:disabled) {
-  background: var(--primary-hover);
-  color: var(--primary-foreground);
-}

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

@@ -0,0 +1,111 @@
+import * as React from "react";
+
+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(
+        "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,
+      )}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-header"
+      className={mergeClass(
+        "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,
+      )}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass(
+        "text-[length:var(--text-base)] font-semibold leading-tight tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass(
+        "text-[length:var(--text-sm)] leading-normal text-foreground-muted",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+/**
+ * 헤더 우측에 배치되는 슬롯. CardHeader 내부에서 grid 2번째 컬럼을 차지.
+ * CardHeader가 `has-[[data-slot=card-action]]` 으로 감지해 레이아웃을 전환한다.
+ */
+export const CardAction = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-action"
+      className={mergeClass(
+        "col-start-2 row-span-2 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+CardAction.displayName = "CardAction";
+
+export const CardContent = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass(
+        "px-[var(--space-6)] text-[length:var(--text-sm)] leading-relaxed max-sm:px-[var(--space-4)]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass(
+        "px-[var(--space-6)] flex items-center gap-[var(--space-2)] max-sm:px-[var(--space-4)] max-sm:flex-wrap",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+CardFooter.displayName = "CardFooter";