sh-ui-cli 0.42.0 → 0.43.0

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

@@ -0,0 +1,405 @@
+"use client";
+
+import * as React from "react";
+
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+  /** input 우측에 부착할 보조 노드(아이콘·단위·버튼 등). 더 많은 슬롯이 필요하면 InputGroup 사용. */
+  suffix?: React.ReactNode;
+  /** input 좌측에 부착할 보조 노드. */
+  prefix?: React.ReactNode;
+}
+
+function cx(...args: (string | undefined | null | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/* ───────── Base utility 묶음 (반복 줄이기) ───────── */
+
+const baseInputClasses =
+  "block w-full h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-none transition-[border-color,box-shadow] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:not-focus:border-border-strong focus:outline-none focus:border-foreground focus:shadow-[0_0_0_1px_var(--foreground)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle read-only:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--danger)]";
+
+const inGroupOverrides =
+  "data-[in-group]:flex-1 data-[in-group]:min-w-0 data-[in-group]:h-auto data-[in-group]:p-0 data-[in-group]:bg-transparent data-[in-group]:border-none data-[in-group]:rounded-none data-[in-group]:shadow-none data-[in-group]:hover:border-none data-[in-group]:focus:border-none data-[in-group]:focus:outline-none data-[in-group]:focus:shadow-none data-[in-group]:disabled:bg-transparent";
+
+const baseGroupClasses =
+  "flex items-center w-full min-h-[var(--control-md)] px-[var(--space-2)] gap-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] transition-[border-color,box-shadow] duration-[var(--duration-fast)] cursor-text hover:not-data-[disabled]:not-focus-within:border-border-strong focus-within:border-foreground focus-within:shadow-[0_0_0_1px_var(--foreground)] aria-[invalid=true]:border-danger aria-[invalid=true]:focus-within:shadow-[0_0_0_1px_var(--danger)] data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed data-[disabled]:bg-background-subtle";
+
+/* ───────── InputGroup + InputAdornment (compound) ───────── */
+
+interface InputGroupContextValue {
+  inGroup: true;
+}
+
+const InputGroupContext = React.createContext<InputGroupContextValue | null>(null);
+
+function useInputGroup() {
+  return React.useContext(InputGroupContext);
+}
+
+export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  "aria-invalid"?: boolean | "true" | "false";
+  disabled?: boolean;
+}
+
+export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
+  (
+    { className, children, "aria-invalid": ariaInvalid, disabled, onClick, ...props },
+    ref,
+  ) => {
+    const innerRef = React.useRef<HTMLDivElement | null>(null);
+    const mergedRef = React.useCallback(
+      (el: HTMLDivElement | null) => {
+        innerRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+      },
+      [ref],
+    );
+
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      onClick?.(e);
+      if (e.defaultPrevented) return;
+      const target = e.target as HTMLElement;
+      if (target.closest("button, input, textarea, select, a")) return;
+      const input = innerRef.current?.querySelector<HTMLInputElement>("input");
+      input?.focus();
+    };
+
+    return (
+      <InputGroupContext.Provider value={{ inGroup: true }}>
+        <div
+          ref={mergedRef}
+          className={cx(baseGroupClasses, className)}
+          data-disabled={disabled || undefined}
+          aria-invalid={ariaInvalid}
+          onClick={handleClick}
+          {...props}
+        >
+          {children}
+        </div>
+      </InputGroupContext.Provider>
+    );
+  },
+);
+InputGroup.displayName = "InputGroup";
+
+export interface InputAdornmentProps extends React.HTMLAttributes<HTMLSpanElement> {
+  interactive?: boolean;
+}
+
+export const InputAdornment = React.forwardRef<HTMLSpanElement, InputAdornmentProps>(
+  ({ className, interactive, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cx(
+        "inline-flex items-center justify-center flex-none text-foreground-muted px-[var(--space-1)] data-[interactive]:p-0",
+        className,
+      )}
+      data-interactive={interactive || undefined}
+      {...props}
+    />
+  ),
+);
+InputAdornment.displayName = "InputAdornment";
+
+/* ───────── Input (Tailwind utility 변종) ───────── */
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = "text", prefix, suffix, ...props }, ref) => {
+    const group = useInputGroup();
+    const hasAffix = Boolean(prefix || suffix);
+    const input = (
+      <input
+        ref={ref}
+        type={type}
+        className={cx(
+          baseInputClasses,
+          inGroupOverrides,
+          !!prefix && "pl-[var(--space-10)]",
+          !!suffix && "pr-[var(--space-10)]",
+          className,
+        )}
+        data-in-group={group ? "" : undefined}
+        {...props}
+      />
+    );
+
+    if (!hasAffix) return input;
+
+    return (
+      <div
+        className="relative w-full block data-[in-group]:flex-1 data-[in-group]:min-w-0"
+        data-in-group={group ? "" : undefined}
+      >
+        {prefix && (
+          <span className="absolute top-1/2 -translate-y-1/2 left-[var(--space-3)] inline-flex items-center justify-center text-foreground-muted pointer-events-none [&>*]:pointer-events-auto">
+            {prefix}
+          </span>
+        )}
+        {input}
+        {suffix && (
+          <span className="absolute top-1/2 -translate-y-1/2 right-[var(--space-1)] inline-flex items-center justify-center text-foreground-muted pointer-events-none [&>*]:pointer-events-auto">
+            {suffix}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+Input.displayName = "Input";
+
+/* ───────── PasswordInput ───────── */
+
+const passwordToggleClasses =
+  "inline-flex items-center justify-center w-8 h-8 p-0 bg-transparent border-none rounded-[calc(var(--radius)-2px)] text-foreground-muted cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] hover:text-foreground hover:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2";
+
+function EyeIcon() {
+  return (
+    <svg viewBox="0 0 20 20" width="16" height="16" fill="none" aria-hidden>
+      <path d="M2 10s3-5.5 8-5.5S18 10 18 10s-3 5.5-8 5.5S2 10 2 10Z" stroke="currentColor" strokeWidth="1.5" />
+      <circle cx="10" cy="10" r="2.25" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+function EyeOffIcon() {
+  return (
+    <svg viewBox="0 0 20 20" width="16" height="16" fill="none" aria-hidden>
+      <path
+        d="M3 3l14 14M8 5a8 8 0 0 1 2-.3c5 0 8 5.3 8 5.3a13 13 0 0 1-2.3 2.9M12 12a2.5 2.5 0 0 1-3.4-3.4m-2.3-2.5A13 13 0 0 0 2 10s3 5.5 8 5.5a8 8 0 0 0 3.3-.7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export interface PasswordInputProps extends Omit<InputProps, "type" | "suffix"> {
+  hideToggle?: boolean;
+}
+
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ hideToggle, ...props }, ref) => {
+    const [visible, setVisible] = React.useState(false);
+
+    const toggle = hideToggle ? undefined : (
+      <button
+        type="button"
+        className={passwordToggleClasses}
+        onClick={() => setVisible((v) => !v)}
+        aria-label={visible ? "비밀번호 숨기기" : "비밀번호 표시"}
+        aria-pressed={visible}
+        tabIndex={-1}
+      >
+        {visible ? <EyeOffIcon /> : <EyeIcon />}
+      </button>
+    );
+
+    return <Input ref={ref} type={visible ? "text" : "password"} suffix={toggle} {...props} />;
+  },
+);
+PasswordInput.displayName = "PasswordInput";
+
+/* ───────── NumberInput / PhoneInput / BusinessNumberInput
+ * 이 세 컴포넌트는 Input 을 wrap 만 — 자체 className 사용 안 함.
+ * plain 변종과 동일한 로직을 그대로 노출. */
+
+export interface NumberInputProps
+  extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type"> {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number | undefined) => void;
+  thousandsSeparator?: boolean;
+  min?: number;
+  max?: number;
+  allowNegative?: boolean;
+}
+
+const formatNumber = (digits: string, thousandsSeparator: boolean): string => {
+  if (digits === "" || digits === "-") return digits;
+  const negative = digits.startsWith("-");
+  const body = negative ? digits.slice(1) : digits;
+  if (!body) return negative ? "-" : "";
+  const formatted = thousandsSeparator ? body.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : body;
+  return negative ? `-${formatted}` : formatted;
+};
+
+const parseNumber = (s: string): number | undefined => {
+  const cleaned = s.replace(/[^\d-]/g, "");
+  if (!cleaned || cleaned === "-") return undefined;
+  const n = Number(cleaned);
+  return Number.isFinite(n) ? n : undefined;
+};
+
+export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  (
+    { value, defaultValue, onValueChange, thousandsSeparator = true, min, max, allowNegative = true, onBlur, ...rest },
+    ref,
+  ) => {
+    const isControlled = value !== undefined;
+    const initial =
+      defaultValue !== undefined ? formatNumber(String(defaultValue), thousandsSeparator) : "";
+    const [internal, setInternal] = React.useState(initial);
+
+    const display = isControlled
+      ? value === undefined
+        ? ""
+        : formatNumber(String(value), thousandsSeparator)
+      : internal;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const raw = e.target.value;
+      const allowedRe = allowNegative ? /[^\d-]/g : /[^\d]/g;
+      let cleaned = raw.replace(allowedRe, "");
+      if (allowNegative) cleaned = cleaned.replace(/(?!^)-/g, "");
+      const formatted = formatNumber(cleaned, thousandsSeparator);
+      if (!isControlled) setInternal(formatted);
+      onValueChange?.(parseNumber(cleaned));
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      const n = parseNumber(display);
+      if (n !== undefined) {
+        let clamped = n;
+        if (min !== undefined && clamped < min) clamped = min;
+        if (max !== undefined && clamped > max) clamped = max;
+        if (clamped !== n) {
+          const f = formatNumber(String(clamped), thousandsSeparator);
+          if (!isControlled) setInternal(f);
+          onValueChange?.(clamped);
+        }
+      }
+      onBlur?.(e);
+    };
+
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        inputMode="numeric"
+        value={display}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        {...rest}
+      />
+    );
+  },
+);
+NumberInput.displayName = "NumberInput";
+
+const formatPhoneKR = (digits: string): string => {
+  const d = digits.replace(/\D/g, "").slice(0, 11);
+  if (d.length === 0) return "";
+  if (d.startsWith("02")) {
+    if (d.length <= 2) return d;
+    if (d.length <= 5) return `${d.slice(0, 2)}-${d.slice(2)}`;
+    if (d.length <= 9) return `${d.slice(0, 2)}-${d.slice(2, 5)}-${d.slice(5)}`;
+    return `${d.slice(0, 2)}-${d.slice(2, 6)}-${d.slice(6, 10)}`;
+  }
+  if (d.length <= 3) return d;
+  if (d.length <= 6) return `${d.slice(0, 3)}-${d.slice(3)}`;
+  if (d.length <= 10) return `${d.slice(0, 3)}-${d.slice(3, 6)}-${d.slice(6)}`;
+  return `${d.slice(0, 3)}-${d.slice(3, 7)}-${d.slice(7, 11)}`;
+};
+
+export interface PhoneInputProps
+  extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (digits: string) => void;
+}
+
+export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
+  ({ value, defaultValue, onValueChange, onBlur, ...rest }, ref) => {
+    const isControlled = value !== undefined;
+    const initial = formatPhoneKR(defaultValue ?? "");
+    const [internal, setInternal] = React.useState(initial);
+
+    const display = isControlled ? formatPhoneKR(value ?? "") : internal;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const digits = e.target.value.replace(/\D/g, "").slice(0, 11);
+      const formatted = formatPhoneKR(digits);
+      if (!isControlled) setInternal(formatted);
+      onValueChange?.(digits);
+    };
+
+    return (
+      <Input
+        ref={ref}
+        type="tel"
+        inputMode="tel"
+        autoComplete="tel"
+        value={display}
+        onChange={handleChange}
+        onBlur={onBlur}
+        {...rest}
+      />
+    );
+  },
+);
+PhoneInput.displayName = "PhoneInput";
+
+const formatBRN = (digits: string): string => {
+  const d = digits.replace(/\D/g, "").slice(0, 10);
+  if (d.length <= 3) return d;
+  if (d.length <= 5) return `${d.slice(0, 3)}-${d.slice(3)}`;
+  return `${d.slice(0, 3)}-${d.slice(3, 5)}-${d.slice(5)}`;
+};
+
+export function isValidBRN(digits: string): boolean {
+  const d = digits.replace(/\D/g, "");
+  if (d.length !== 10) return false;
+  const w = [1, 3, 7, 1, 3, 7, 1, 3, 5];
+  let sum = 0;
+  for (let i = 0; i < 9; i++) sum += parseInt(d[i], 10) * w[i];
+  sum += Math.floor((parseInt(d[8], 10) * 5) / 10);
+  const check = (10 - (sum % 10)) % 10;
+  return check === parseInt(d[9], 10);
+}
+
+export interface BusinessNumberInputProps
+  extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (digits: string) => void;
+  validateChecksum?: boolean;
+}
+
+export const BusinessNumberInput = React.forwardRef<HTMLInputElement, BusinessNumberInputProps>(
+  ({ value, defaultValue, onValueChange, validateChecksum, onBlur, "aria-invalid": ariaInvalidProp, ...rest }, ref) => {
+    const isControlled = value !== undefined;
+    const initial = formatBRN(defaultValue ?? "");
+    const [internal, setInternal] = React.useState(initial);
+
+    const display = isControlled ? formatBRN(value ?? "") : internal;
+    const digits = display.replace(/\D/g, "");
+
+    const invalid =
+      ariaInvalidProp !== undefined
+        ? ariaInvalidProp
+        : validateChecksum && digits.length === 10 && !isValidBRN(digits);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const next = e.target.value.replace(/\D/g, "").slice(0, 10);
+      const formatted = formatBRN(next);
+      if (!isControlled) setInternal(formatted);
+      onValueChange?.(next);
+    };
+
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        inputMode="numeric"
+        value={display}
+        onChange={handleChange}
+        onBlur={onBlur}
+        aria-invalid={invalid || undefined}
+        {...rest}
+      />
+    );
+  },
+);
+BusinessNumberInput.displayName = "BusinessNumberInput";

package/data/registry/react/peer-versions.json

@@ -3,6 +3,7 @@
   "versions": {
     "@base-ui/react": "^1.4.1",
     "@tanstack/react-form": "^1.29.1",
+    "class-variance-authority": "^0.7.1",
     "lucide-react": "^1.11.0",
     "react-hook-form": "^7.74.0",
     "shiki": "^4.0.2"

package/data/registry/react/registry.json

@@ -1,5 +1,5 @@
 {
-  "$description": "React 레지스트리 매니페스트 — CLI가 각 컴포넌트 name으로 조회해 files를 사용자 프로젝트로 복사한다.",
+  "$description": "React 레지스트리 매니페스트 — CLI가 각 컴포넌트 name으로 조회해 files를 사용자 프로젝트로 복사한다. 컴포넌트 또는 file 엔트리에 frameworks?: string[] 옵션 — 미지정시 모든 cssFramework 에 적용, 지정시 해당 배열에 포함된 경우만 복사.",
   "components": {
     "button": {
       "name": "button",
@@ -7,14 +7,23 @@
       "files": [
         {
           "src": "components/button/index.tsx",
-          "dest": "{components}/button/index.tsx"
+          "dest": "{components}/button/index.tsx",
+          "frameworks": ["plain"]
         },
         {
           "src": "components/button/styles.css",
-          "dest": "{components}/button/styles.css"
+          "dest": "{components}/button/styles.css",
+          "frameworks": ["plain"]
+        },
+        {
+          "src": "components/button/index.tailwind.tsx",
+          "dest": "{components}/button/index.tsx",
+          "frameworks": ["tailwind"]
         }
       ],
-      "dependencies": [],
+      "dependencies": [
+        { "name": "class-variance-authority", "frameworks": ["tailwind"] }
+      ],
       "registryDependencies": []
     },
     "card": {
@@ -23,11 +32,18 @@
       "files": [
         {
           "src": "components/card/index.tsx",
-          "dest": "{components}/card/index.tsx"
+          "dest": "{components}/card/index.tsx",
+          "frameworks": ["plain"]
         },
         {
           "src": "components/card/styles.css",
-          "dest": "{components}/card/styles.css"
+          "dest": "{components}/card/styles.css",
+          "frameworks": ["plain"]
+        },
+        {
+          "src": "components/card/index.tailwind.tsx",
+          "dest": "{components}/card/index.tsx",
+          "frameworks": ["tailwind"]
         }
       ],
       "dependencies": [],
@@ -39,11 +55,18 @@
       "files": [
         {
           "src": "components/input/index.tsx",
-          "dest": "{components}/input/index.tsx"
+          "dest": "{components}/input/index.tsx",
+          "frameworks": ["plain"]
         },
         {
           "src": "components/input/styles.css",
-          "dest": "{components}/input/styles.css"
+          "dest": "{components}/input/styles.css",
+          "frameworks": ["plain"]
+        },
+        {
+          "src": "components/input/index.tailwind.tsx",
+          "dest": "{components}/input/index.tsx",
+          "frameworks": ["tailwind"]
         }
       ],
       "dependencies": [],

package/data/tokens/build.mjs

@@ -102,6 +102,29 @@ function mergeThemeIndependent(tokens) {
   return out;
 }
 
+/**
+ * Tailwind v4 의 @theme inline 블록에 sh-ui 토큰을 매핑해
+ * `bg-primary`, `border-border`, `rounded-md` 같은 Tailwind utility 가
+ * 동작하도록 한다. 매핑은 light 토큰 맵에서 파생 — 모든 색 키를
+ * Tailwind 의 --color-* 네임스페이스로 옮김.
+ *
+ * radius 는 단일 토큰 (--radius) 이지만 Tailwind 의 rounded-{sm,md,lg,xl}
+ * 4 단계로 expand. 템플릿이 손으로 박아두던 패턴을 단일 소스로 옮긴 것.
+ */
+function buildTailwindThemeBlock(lightTokens) {
+  const lines = [];
+  for (const path of Object.keys(lightTokens)) {
+    const cssVar = toCssVar(path);
+    const themeKey = cssVar.replace(/^--/, "--color-");
+    lines.push(`  ${themeKey}: var(${cssVar});`);
+  }
+  lines.push(`  --radius-sm: calc(var(--radius) - 2px);`);
+  lines.push(`  --radius-md: var(--radius);`);
+  lines.push(`  --radius-lg: calc(var(--radius) + 2px);`);
+  lines.push(`  --radius-xl: calc(var(--radius) + 4px);`);
+  return `@theme inline {\n${lines.join("\n")}\n}`;
+}
+
 export async function buildTokensCss(config) {
   const tokens = await resolveTokens(config);
   const mode = config.theme.mode;
@@ -116,6 +139,7 @@ export async function buildTokensCss(config) {
   if (mode === "light-dark") {
     blocks.push(emitCssBlock(".dark", tokens.dark));
   }
+  blocks.push(buildTailwindThemeBlock(tokens.light));
   const header = `/* Generated by @sh-ui/tokens — do not edit directly */\n/* base=${config.theme.base} radius=${config.theme.radius} mode=${config.theme.mode} */\n`;
   return header + "\n" + blocks.join("\n\n") + "\n";
 }
@@ -533,6 +557,48 @@ import 'package:flutter/material.dart';
   return `${header}\n${classes.join("\n\n")}\n\n${themeClass}\n`;
 }
 
+/* ───────── Emitter 디스패처 ─────────
+ *
+ * (platform × cssFramework) → 토큰 emitter.
+ * 향후 Tailwind theme config / CSS Modules / vanilla-extract 추가 시
+ * 이 테이블에 한 줄만 등록하면 끝나도록 구조를 미리 잡아 둠.
+ *
+ * Flutter 는 CSS 프레임워크 개념이 무의미하지만, 일관된 디스패치를 위해
+ * "plain" 키로 통일 — 호출부가 platform 별 분기 없이 같은 진입점을 쓸 수 있게.
+ */
+const tokenEmitters = {
+  react: {
+    plain: buildTokensCss,
+    // Tailwind 변종은 같은 tokens.css 를 공유. 컴포넌트의 utility class 가
+    // var(--primary) 를 @theme inline 매핑을 통해 참조하므로 — 토큰 자체는
+    // 동일. 향후 Tailwind v3 theme.config.ts 를 별도 emit 하고 싶으면
+    // 여기에 다른 함수를 등록.
+    tailwind: buildTokensCss,
+  },
+  flutter: {
+    plain: buildTokensDart,
+  },
+};
+
+export async function buildTokens(config) {
+  const platform = config.platform;
+  const fw = config.cssFramework ?? "plain";
+  const platformEmitters = tokenEmitters[platform];
+  if (!platformEmitters) {
+    throw new Error(
+      `tokens: 알 수 없는 platform '${platform}'. 지원: ${Object.keys(tokenEmitters).join(", ")}`,
+    );
+  }
+  const emit = platformEmitters[fw];
+  if (!emit) {
+    const supported = Object.keys(platformEmitters).join(", ");
+    throw new Error(
+      `tokens emitter 미구현: ${platform}/${fw}. 현재 지원: ${platform}/{${supported}}`,
+    );
+  }
+  return emit(config);
+}
+
 /* ───────── CLI ───────── */
 
 if (import.meta.url === `file://${process.argv[1]}`) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {

package/src/add.mjs

@@ -149,11 +149,8 @@ async function addTokens(config, cwd, diffMode, summary, conflictResolver) {
   if (!destRel) throw new Error("paths.tokens 가 설정에 없습니다.");
   const dest = resolve(cwd, destRel);
 
-  const { buildTokensCss, buildTokensDart } = await loadTokensBuilder();
-  const content =
-    config.platform === "react"
-      ? await buildTokensCss(config)
-      : await buildTokensDart(config);
+  const { buildTokens } = await loadTokensBuilder();
+  const content = await buildTokens(config);
 
   const result = await writeOrDiff({ dest, content, cwd, diffMode, summary, conflictResolver });
   if (!diffMode && result !== "unchanged") {
@@ -163,6 +160,31 @@ async function addTokens(config, cwd, diffMode, summary, conflictResolver) {
   }
 }
 
+/**
+ * registry 엔트리의 frameworks 필드와 현재 cssFramework 가 호환되는지.
+ * 필드가 없으면 "모든 프레임워크에 적용" — 기본 케이스.
+ */
+function frameworkMatches(entry, cssFramework) {
+  if (!entry.frameworks) return true;
+  return entry.frameworks.includes(cssFramework);
+}
+
+/**
+ * cssFramework="tailwind" 인데 컴포넌트에 tailwind 전용 변종 파일이 없으면
+ * plain 으로 fallback. plain CSS 컴포넌트도 @theme inline 브리지 덕분에
+ * Tailwind v4 프로젝트에서 그대로 동작하므로 깨지지 않음.
+ *
+ * 점진적 rollout 전략 — 모든 컴포넌트가 한 번에 tailwind 변종을 갖출 필요 없이
+ * 가능한 것부터 utility-class 변종을 제공하고, 나머지는 plain 으로 자연 처리.
+ */
+function effectiveFramework(entry, cssFramework) {
+  if (cssFramework !== "tailwind") return cssFramework;
+  const hasTailwindVariant = (entry.files ?? []).some(
+    (f) => f.frameworks && f.frameworks.includes("tailwind"),
+  );
+  return hasTailwindVariant ? "tailwind" : "plain";
+}
+
 async function addComponent(name, config, cwd, installed, pendingDeps, diffMode, summary, conflictResolver) {
   const registryRoot = getRegistryRoot(config.platform);
   const registry = JSON.parse(
@@ -175,11 +197,30 @@ async function addComponent(name, config, cwd, installed, pendingDeps, diffMode,
     );
   }
 
+  const requestedFw = config.cssFramework ?? "plain";
+  const cssFramework = effectiveFramework(entry, requestedFw);
+
+  // 사용자가 tailwind 를 골랐는데 이 컴포넌트는 plain 으로 fallback 된 경우 한 줄 알림.
+  // 동작에 문제는 없지만 일관성에 대한 기대를 정확히 셋업하기 위함.
+  if (requestedFw === "tailwind" && cssFramework === "plain" && !diffMode) {
+    console.log(
+      `ℹ ${name} — Tailwind 변종 미제공, plain 변종으로 설치 (Tailwind v4 환경에서 그대로 동작)`,
+    );
+  }
+
+  if (!frameworkMatches(entry, cssFramework)) {
+    console.log(
+      `↷ ${name} skipped — cssFramework=${cssFramework} 미지원 (지원: ${entry.frameworks.join(", ")})`,
+    );
+    return;
+  }
+
   for (const dep of entry.registryDependencies ?? []) {
     await addOne(dep, config, cwd, installed, pendingDeps, diffMode, summary, conflictResolver);
   }
 
   for (const file of entry.files) {
+    if (!frameworkMatches(file, cssFramework)) continue;
     const src = resolve(registryRoot, file.src);
     const dest = resolve(cwd, resolveDest(file.dest, config));
     const content = await readFile(src, "utf8");
@@ -192,7 +233,14 @@ async function addComponent(name, config, cwd, installed, pendingDeps, diffMode,
   }
 
   for (const dep of entry.dependencies ?? []) {
-    pendingDeps.add(dep);
+    // dep 은 string ("react-hook-form") 또는 object ({name, frameworks?: string[]}).
+    // 후자는 cssFramework 에 따라 의존성을 분기 (예: cva 는 tailwind 변종에만 필요).
+    if (typeof dep === "string") {
+      pendingDeps.add(dep);
+    } else if (dep && typeof dep === "object" && dep.name) {
+      if (dep.frameworks && !dep.frameworks.includes(cssFramework)) continue;
+      pendingDeps.add(dep.name);
+    }
   }
 }