sh-ui-cli 0.48.0 → 0.49.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.49.0",
+      "date": "2026-05-04",
+      "title": "vanilla-extract 변종 파일럿 — button/card/input",
+      "type": "minor",
+      "highlights": [
+        "**vanilla-extract 변종 파일럿** — button/card/input 에 `index.vanilla-extract.tsx` + `styles.css.ts` 추가. CSS 룰을 TypeScript 객체로 작성하고 빌드 타임에 정적 CSS 로 컴파일 — 런타임 비용 0. 사용자가 `sh-ui.config.json` 의 `cssFramework` 를 `\"vanilla-extract\"` 로 직접 두면 동작 (파일럿 단계라 PLANNED 유지, 전수 롤아웃 후 SUPPORTED 승격 예정).",
+        "**peer-versions + 의존성 분기** — `@vanilla-extract/css` (^1.16.0) 가 vanilla-extract 변종에만 install 큐에 들어가도록 registry.json 의 dependencies 분기 추가. plain/tailwind/css-modules 사용자에게는 영향 없음.",
+        "**tokens emitter + utils.cn 공유** — vanilla-extract 도 `:root` CSS custom property 를 그대로 참조 (`backgroundColor: \"var(--primary)\"`) 하므로 tokens.css 를 plain 과 그대로 공유. utils.cn.ts 도 같이 매칭되어 추가 cn 변종 불필요.",
+        "**docs 페이지 보강** — css-framework 가이드에 vanilla-extract 섹션 추가 (CSS-in-TS 사용 예시 + Next.js/Vite 빌드 플러그인 셋업 안내). VariantSource 컴포넌트도 vanilla-extract 탭을 자동 노출."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.49.0"
+    },
     {
       "version": "0.48.0",
       "date": "2026-05-04",

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

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
+import { button, sizes, variants } from "./styles.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;
+}
+
+/**
+ * 사용자 액션을 트리거하는 기본 버튼 (vanilla-extract 변종).
+ * 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(button, sizes[size], variants[variant], className)}
+      {...props}
+    />
+  ),
+);
+Button.displayName = "Button";

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

@@ -0,0 +1,120 @@
+import { style, styleVariants } from "@vanilla-extract/css";
+
+export const button = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "var(--space-2)",
+  border: "1px solid transparent",
+  borderRadius: "var(--radius)",
+  fontWeight: "var(--weight-medium)",
+  lineHeight: 1,
+  cursor: "pointer",
+  transition:
+    "background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform 80ms ease-out, filter 80ms",
+  userSelect: "none",
+  WebkitTapHighlightColor: "transparent",
+
+  selectors: {
+    "&:disabled": {
+      opacity: "var(--opacity-disabled)",
+      pointerEvents: "none",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+    "&:active:not(:disabled)": {
+      transform: "scale(0.97)",
+      filter: "brightness(0.92)",
+      transitionDuration: "40ms",
+    },
+  },
+
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transition: "none",
+    },
+  },
+});
+
+export const sizes = styleVariants({
+  sm: {
+    height: "var(--control-sm)",
+    padding: "0 var(--space-3)",
+    fontSize: "var(--text-sm)",
+    "@media": {
+      "(hover: none) and (pointer: coarse)": {
+        height: "2.25rem",
+      },
+    },
+  },
+  md: {
+    height: "var(--control-md)",
+    padding: "0 var(--space-4)",
+    fontSize: "var(--text-sm)",
+    "@media": {
+      "(hover: none) and (pointer: coarse)": {
+        height: "2.75rem",
+      },
+    },
+  },
+  lg: {
+    height: "var(--control-lg)",
+    padding: "0 var(--space-5)",
+    fontSize: "var(--text-base)",
+  },
+});
+
+export const variants = styleVariants({
+  primary: {
+    backgroundColor: "var(--primary)",
+    color: "var(--primary-foreground)",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "var(--primary-hover)",
+      },
+    },
+  },
+  secondary: {
+    backgroundColor: "var(--background-muted)",
+    color: "var(--foreground)",
+    borderColor: "var(--border)",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "var(--background-subtle)",
+      },
+    },
+  },
+  ghost: {
+    backgroundColor: "transparent",
+    color: "var(--foreground)",
+    selectors: {
+      "&:hover": {
+        backgroundColor: "var(--background-muted)",
+      },
+    },
+  },
+  danger: {
+    backgroundColor: "var(--danger)",
+    color: "var(--danger-foreground)",
+  },
+  link: {
+    backgroundColor: "transparent",
+    color: "var(--foreground)",
+    borderColor: "transparent",
+    height: "auto",
+    padding: 0,
+    textUnderlineOffset: "3px",
+    selectors: {
+      "&:hover": {
+        textDecoration: "underline",
+      },
+      "&:active:not(:disabled)": {
+        transform: "none",
+        filter: "none",
+        color: "var(--foreground-muted)",
+      },
+    },
+  },
+});

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

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
+import { action, card, content, description, footer, header, title } from "./styles.css";
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Card = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(card, className)} {...props} />
+  ),
+);
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-header"
+      className={cn(header, className)}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(title, className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(description, className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+/**
+ * 헤더 우측에 배치되는 슬롯. CardHeader 내부에서 grid 2번째 컬럼을 차지.
+ * CardHeader가 `:has(.action)`으로 감지해 레이아웃을 전환한다.
+ */
+export const CardAction = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(action, className)} {...props} />
+  ),
+);
+CardAction.displayName = "CardAction";
+
+export const CardContent = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(content, className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(footer, className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";

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

@@ -0,0 +1,88 @@
+import { style } from "@vanilla-extract/css";
+
+export const card = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--space-6)",
+  padding: "var(--space-6) 0",
+  background: "var(--background)",
+  color: "var(--foreground)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+
+  "@media": {
+    "(max-width: 640px)": {
+      gap: "var(--space-4)",
+      padding: "var(--space-4) 0",
+    },
+  },
+});
+
+export const action = style({
+  gridColumn: 2,
+  gridRow: "1 / span 2",
+  alignSelf: "start",
+  justifySelf: "end",
+});
+
+export const header = style({
+  display: "grid",
+  gridTemplateColumns: "1fr",
+  gridAutoRows: "auto",
+  rowGap: "0.375rem",
+  padding: "0 var(--space-6)",
+
+  selectors: {
+    [`&:has(.${action})`]: {
+      gridTemplateColumns: "1fr auto",
+    },
+  },
+
+  "@media": {
+    "(max-width: 640px)": {
+      paddingLeft: "var(--space-4)",
+      paddingRight: "var(--space-4)",
+    },
+  },
+});
+
+export const title = style({
+  fontSize: "var(--text-base)",
+  fontWeight: "var(--weight-semibold)",
+  lineHeight: 1.25,
+  letterSpacing: "-0.01em",
+});
+
+export const description = style({
+  fontSize: "var(--text-sm)",
+  lineHeight: 1.5,
+  color: "var(--foreground-muted)",
+});
+
+export const content = style({
+  padding: "0 var(--space-6)",
+  fontSize: "var(--text-sm)",
+  lineHeight: 1.6,
+
+  "@media": {
+    "(max-width: 640px)": {
+      paddingLeft: "var(--space-4)",
+      paddingRight: "var(--space-4)",
+    },
+  },
+});
+
+export const footer = style({
+  padding: "0 var(--space-6)",
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--space-2)",
+
+  "@media": {
+    "(max-width: 640px)": {
+      paddingLeft: "var(--space-4)",
+      paddingRight: "var(--space-4)",
+      flexWrap: "wrap",
+    },
+  },
+});

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

@@ -0,0 +1,425 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
+import {
+  adornment,
+  affix,
+  affixPrefix,
+  affixSuffix,
+  group,
+  input,
+  inputWrap,
+  toggle,
+  withPrefix,
+  withSuffix,
+} from "./styles.css";
+
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+  /** input 우측에 부착할 보조 노드(아이콘·단위·버튼 등). 더 많은 슬롯이 필요하면 InputGroup 사용. */
+  suffix?: React.ReactNode;
+  /** input 좌측에 부착할 보조 노드. */
+  prefix?: React.ReactNode;
+}
+
+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;
+}
+
+/**
+ * Input과 좌우 보조 요소(`InputAdornment`)를 한 박스로 묶는 컴파운드 래퍼.
+ */
+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 inputEl = innerRef.current?.querySelector<HTMLInputElement>("input");
+      inputEl?.focus();
+    };
+
+    return (
+      <InputGroupContext.Provider value={{ inGroup: true }}>
+        <div
+          ref={mergedRef}
+          className={cn(group, 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> {
+  /**
+   * 클릭이 input 으로 버블링되지 않도록 한다. 버튼·체크박스 등 인터랙티브 요소를
+   * Adornment 에 담을 때 켤 것.
+   *
+   * @default false
+   */
+  interactive?: boolean;
+}
+
+export const InputAdornment = React.forwardRef<HTMLSpanElement, InputAdornmentProps>(
+  ({ className, interactive, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(adornment, className)}
+        data-interactive={interactive || undefined}
+        {...props}
+      />
+    );
+  },
+);
+InputAdornment.displayName = "InputAdornment";
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = "text", prefix, suffix, ...props }, ref) => {
+    const groupCtx = useInputGroup();
+    const hasAffix = Boolean(prefix || suffix);
+    const inputEl = (
+      <input
+        ref={ref}
+        type={type}
+        className={cn(input, !!prefix && withPrefix, !!suffix && withSuffix, className)}
+        data-in-group={groupCtx ? "" : undefined}
+        {...props}
+      />
+    );
+
+    if (!hasAffix) return inputEl;
+
+    return (
+      <div className={inputWrap} data-in-group={groupCtx ? "" : undefined}>
+        {prefix && <span className={cn(affix, affixPrefix)}>{prefix}</span>}
+        {inputEl}
+        {suffix && <span className={cn(affix, affixSuffix)}>{suffix}</span>}
+      </div>
+    );
+  },
+);
+Input.displayName = "Input";
+
+/* ───────── PasswordInput ───────── */
+
+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"> {
+  /** 비밀번호 표시 토글 버튼을 숨긴다. @default false */
+  hideToggle?: boolean;
+}
+
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ hideToggle, ...props }, ref) => {
+    const [visible, setVisible] = React.useState(false);
+
+    const toggleBtn = hideToggle ? undefined : (
+      <button
+        type="button"
+        className={toggle}
+        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={toggleBtn}
+        {...props}
+      />
+    );
+  },
+);
+PasswordInput.displayName = "PasswordInput";
+
+/* ───────── NumberInput ───────── */
+
+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";
+
+/* ───────── PhoneInput (KR) ───────── */
+
+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";
+
+/* ───────── BusinessNumberInput (KR) ───────── */
+
+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/components/input/styles.css.ts

@@ -0,0 +1,202 @@
+import { style } from "@vanilla-extract/css";
+
+export const input = style({
+  display: "block",
+  width: "100%",
+  height: "var(--control-md)",
+  padding: "0 var(--space-3)",
+  background: "var(--background)",
+  color: "var(--foreground)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+  fontFamily: "inherit",
+  fontSize: "var(--text-sm)",
+  lineHeight: 1,
+  transition: "border-color var(--duration-fast), box-shadow var(--duration-fast)",
+  WebkitTapHighlightColor: "transparent",
+
+  selectors: {
+    "&::placeholder": {
+      color: "var(--foreground-subtle)",
+    },
+    "&:hover:not(:disabled):not(:focus)": {
+      borderColor: "var(--border-strong)",
+    },
+    "&:focus": {
+      outline: "none",
+      borderColor: "var(--foreground)",
+      boxShadow: "0 0 0 1px var(--foreground)",
+    },
+    "&:disabled": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+      background: "var(--background-subtle)",
+    },
+    "&:read-only": {
+      background: "var(--background-subtle)",
+    },
+    '&[type="number"]::-webkit-outer-spin-button': {
+      WebkitAppearance: "none",
+      margin: 0,
+    },
+    '&[type="number"]::-webkit-inner-spin-button': {
+      WebkitAppearance: "none",
+      margin: 0,
+    },
+    '&[type="number"]': {
+      MozAppearance: "textfield",
+    },
+    '&[aria-invalid="true"]': {
+      borderColor: "var(--danger)",
+    },
+    '&[aria-invalid="true"]:focus': {
+      boxShadow: "0 0 0 1px var(--danger)",
+    },
+    "&[data-in-group]": {
+      flex: "1 1 auto",
+      minWidth: 0,
+      height: "auto",
+      padding: 0,
+      background: "transparent",
+      border: "none",
+      borderRadius: 0,
+      boxShadow: "none",
+    },
+    "&[data-in-group]:focus, &[data-in-group]:hover": {
+      border: "none",
+      boxShadow: "none",
+      outline: "none",
+    },
+    "&[data-in-group]:disabled": {
+      background: "transparent",
+    },
+  },
+
+  "@media": {
+    "(hover: none) and (pointer: coarse)": {
+      height: "2.75rem",
+      fontSize: "var(--text-base)",
+    },
+  },
+});
+
+export const inputWrap = style({
+  position: "relative",
+  width: "100%",
+  display: "block",
+
+  selectors: {
+    "&[data-in-group]": {
+      flex: "1 1 auto",
+      minWidth: 0,
+    },
+  },
+});
+
+export const withPrefix = style({ paddingLeft: "var(--space-10)" });
+export const withSuffix = style({ paddingRight: "var(--space-10)" });
+
+export const affix = style({
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "var(--foreground-muted)",
+  pointerEvents: "none",
+
+  selectors: {
+    "& > *": {
+      pointerEvents: "auto",
+    },
+  },
+});
+
+export const affixPrefix = style({ left: "var(--space-3)" });
+export const affixSuffix = style({ right: "var(--space-1)" });
+
+export const toggle = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "2rem",
+  height: "2rem",
+  padding: 0,
+  background: "transparent",
+  border: "none",
+  borderRadius: "calc(var(--radius) - 2px)",
+  color: "var(--foreground-muted)",
+  cursor: "pointer",
+  transition: "color var(--duration-fast), background-color var(--duration-fast)",
+  WebkitTapHighlightColor: "transparent",
+
+  selectors: {
+    "&:hover": {
+      color: "var(--foreground)",
+      background: "var(--background-muted)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+  },
+});
+
+export const group = style({
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  minHeight: "var(--control-md)",
+  padding: "0 var(--space-2)",
+  gap: "var(--space-2)",
+  background: "var(--background)",
+  color: "var(--foreground)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+  transition: "border-color var(--duration-fast), box-shadow var(--duration-fast)",
+  cursor: "text",
+  WebkitTapHighlightColor: "transparent",
+
+  selectors: {
+    "&:hover:not([data-disabled]):not(:focus-within)": {
+      borderColor: "var(--border-strong)",
+    },
+    "&:focus-within": {
+      borderColor: "var(--foreground)",
+      boxShadow: "0 0 0 1px var(--foreground)",
+    },
+    '&[aria-invalid="true"]': {
+      borderColor: "var(--danger)",
+    },
+    '&[aria-invalid="true"]:focus-within': {
+      boxShadow: "0 0 0 1px var(--danger)",
+    },
+    "&[data-disabled]": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+      background: "var(--background-subtle)",
+    },
+  },
+
+  "@media": {
+    "(hover: none) and (pointer: coarse)": {
+      minHeight: "2.75rem",
+    },
+  },
+});
+
+export const adornment = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flex: "0 0 auto",
+  color: "var(--foreground-muted)",
+  padding: "0 var(--space-1)",
+
+  selectors: {
+    "&[data-interactive]": {
+      padding: 0,
+    },
+  },
+});

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

@@ -3,6 +3,7 @@
   "versions": {
     "@base-ui/react": "^1.4.1",
     "@tanstack/react-form": "^1.29.1",
+    "@vanilla-extract/css": "^1.16.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.11.0",

package/data/registry/react/registry.json

@@ -39,6 +39,20 @@
           "frameworks": [
             "css-modules"
           ]
+        },
+        {
+          "src": "components/button/index.vanilla-extract.tsx",
+          "dest": "{components}/button/index.tsx",
+          "frameworks": [
+            "vanilla-extract"
+          ]
+        },
+        {
+          "src": "components/button/styles.css.ts",
+          "dest": "{components}/button/styles.css.ts",
+          "frameworks": [
+            "vanilla-extract"
+          ]
         }
       ],
       "dependencies": [
@@ -47,6 +61,12 @@
           "frameworks": [
             "tailwind"
           ]
+        },
+        {
+          "name": "@vanilla-extract/css",
+          "frameworks": [
+            "vanilla-extract"
+          ]
         }
       ],
       "registryDependencies": [
@@ -91,9 +111,30 @@
           "frameworks": [
             "css-modules"
           ]
+        },
+        {
+          "src": "components/card/index.vanilla-extract.tsx",
+          "dest": "{components}/card/index.tsx",
+          "frameworks": [
+            "vanilla-extract"
+          ]
+        },
+        {
+          "src": "components/card/styles.css.ts",
+          "dest": "{components}/card/styles.css.ts",
+          "frameworks": [
+            "vanilla-extract"
+          ]
+        }
+      ],
+      "dependencies": [
+        {
+          "name": "@vanilla-extract/css",
+          "frameworks": [
+            "vanilla-extract"
+          ]
         }
       ],
-      "dependencies": [],
       "registryDependencies": [
         "utils"
       ]
@@ -136,9 +177,30 @@
           "frameworks": [
             "css-modules"
           ]
+        },
+        {
+          "src": "components/input/index.vanilla-extract.tsx",
+          "dest": "{components}/input/index.tsx",
+          "frameworks": [
+            "vanilla-extract"
+          ]
+        },
+        {
+          "src": "components/input/styles.css.ts",
+          "dest": "{components}/input/styles.css.ts",
+          "frameworks": [
+            "vanilla-extract"
+          ]
+        }
+      ],
+      "dependencies": [
+        {
+          "name": "@vanilla-extract/css",
+          "frameworks": [
+            "vanilla-extract"
+          ]
         }
       ],
-      "dependencies": [],
       "registryDependencies": [
         "utils"
       ]
@@ -2280,7 +2342,8 @@
           "dest": "{utils}",
           "frameworks": [
             "plain",
-            "css-modules"
+            "css-modules",
+            "vanilla-extract"
           ]
         },
         {

package/data/tokens/build.mjs

@@ -578,6 +578,9 @@ const tokenEmitters = {
     // 그대로 참조하면 되므로 tokens.css 를 공유. .module.css 안에서도
     // var(--primary) 같은 글로벌 변수는 정상 참조됨.
     "css-modules": buildTokensCss,
+    // vanilla-extract 도 마찬가지 — .css.ts 안에서 'var(--primary)' 처럼
+    // 문자열로 CSS var 를 참조할 수 있어 tokens.css 그대로 공유.
+    "vanilla-extract": buildTokensCss,
   },
   flutter: {
     plain: buildTokensDart,

package/package.json

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