sh-ui-cli 0.39.0 → 0.40.0

package/data/changelog/versions.json

@@ -2,6 +2,25 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.40.0",
+      "date": "2026-04-29",
+      "title": "NumericInput 컴포넌트 + 토큰 편집기 UX 대폭 개선 (Accordion size, ShadowBuilder, XY 패드)",
+      "type": "minor",
+      "highlights": [
+        "**NumericInput** — 정식 sh-ui 컴포넌트 신설. 슬라이더 동반·토큰 편집기 같은 컴팩트 컨텍스트용 숫자 입력. type=text + inputMode=decimal + buffer state — Chrome 의 type=number select() 미지원 회피, '-'/'1.' 같은 transient 입력 허용, ArrowUp/Down step. NumberInput(폼·금액용) 과 책임 분리. `npx sh-ui-cli add numeric-input`",
+        "**Accordion size prop** — `size: 'sm' | 'md'`. sm 은 padding 8/4 + font 12px + chevron 12px 로 좁은 사이드바·다중 섹션에 적합. 페이지별 CSS override 대신 컴포넌트 레벨 variant 로 승격",
+        "**ShadowBuilder** (playground) — raw CSS `0 4px 12px rgba(...)` 직접 입력 → Figma 스타일 시각 편집기. X/Y/Blur/Spread NumericInput + ColorPicker + alpha %",
+        "**XY 패드 드래그** — ShadowBuilder 의 미리보기 박스가 ColorPicker 색공간처럼 클릭/드래그 가능. pointer 위치 → X/Y offset (1:1 px, ±50 클램프). pointer capture + touch-action: none 으로 모바일 터치 드래그도 지원",
+        "**advanced 모드 8 섹션** native details → sh-ui Accordion size=sm 으로 교체. chevron 인디케이터로 클릭 가능 신호 명확. 내보내기 섹션도 동일 패턴",
+        "**Accordion trigger hover** underline → background var(--background-muted) 틴트, disabled 가드(`:not([disabled]):not([data-disabled])`) — disabled 항목은 hover 무효과",
+        "**슬라이더 동반 키보드 입력** — 8 카테고리 31 슬라이더 + 그라데이션 9 슬라이더 옆 값 표시를 NumericInput 으로 교체. 드래그 + 키보드 입력 둘 다 지원. Slider docs 의 ControlledDemo 도 양방향 동기화로 업그레이드",
+        "**초기화 3분기** — '전체 초기화' / 'Light 초기화' / 'Dark 초기화'. 이전엔 모드별 한 버튼 (색만 reset) 또는 전체 한 버튼만 — 모드 색만 빠르게 되돌리는 use case + 모든 카테고리 nuke 둘 다 지원",
+        "**encodeTheme UTF-8 안전** — shadow/ease/gradient 가 자유 string 이라 한글 IME 입력 시 btoa(Latin1-only) InvalidCharacterError 회귀. TextEncoder UTF-8 바이트 → byte 별 String.fromCharCode → btoa 패턴으로 교체",
+        "**docs 페이지** — /components/numeric-input 신규 (server component + _demos 분리), Accordion size 예시 + API Reference 보강, '스타일 커스터마이즈' 에 hover 효과 override 안내"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.40.0"
+    },
     {
       "version": "0.39.0",
       "date": "2026-04-29",

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

@@ -8,16 +8,30 @@ function cx(...args: (string | undefined | false)[]) {
 
 type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
 
-export const Accordion = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAccordion.Root>>
->(({ className, ...props }, ref) => (
-  <BaseAccordion.Root
-    ref={ref}
-    className={cx("sh-ui-accordion", className)}
-    {...props}
-  />
-));
+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={cx("sh-ui-accordion", className)}
+      data-size={size}
+      {...props}
+    />
+  ),
+);
 Accordion.displayName = "Accordion";
 
 export const AccordionItem = React.forwardRef<

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

@@ -32,12 +32,13 @@
   line-height: 1.4;
   text-align: left;
   cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-standard);
   -webkit-tap-highlight-color: transparent;
 }
 
-.sh-ui-accordion__trigger:hover .sh-ui-accordion__trigger-label {
-  text-decoration: underline;
-  text-underline-offset: 3px;
+/* hover는 enabled 일 때만. background tint — 다른 hover 효과를 원하면 className/style 로 override. */
+.sh-ui-accordion__trigger:not([disabled]):not([data-disabled]):hover {
+  background: var(--background-muted);
 }
 
 .sh-ui-accordion__trigger:focus-visible {
@@ -86,6 +87,22 @@
   color: var(--foreground-muted);
 }
 
+/* size="sm" — 좁은 사이드바·다중 섹션에 적합한 컴팩트 변형. */
+.sh-ui-accordion[data-size="sm"] .sh-ui-accordion__trigger {
+  padding: var(--space-2) var(--space-1);
+  font-size: var(--text-xs);
+  line-height: 1.2;
+}
+.sh-ui-accordion[data-size="sm"] .sh-ui-accordion__chevron {
+  width: 12px;
+  height: 12px;
+}
+.sh-ui-accordion[data-size="sm"] .sh-ui-accordion__content {
+  padding: 0 var(--space-1) var(--space-2);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sh-ui-accordion__panel,
   .sh-ui-accordion__chevron {

package/data/registry/react/components/numeric-input/index.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import * as React from "react";
+import "./styles.css";
+
+function cx(...args: (string | undefined | null | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export interface NumericInputProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "value" | "defaultValue" | "onChange" | "type" | "min" | "max" | "step"
+  > {
+  /** 제어 모드 값. */
+  value?: number;
+  /** 비제어 모드 초기값. */
+  defaultValue?: number;
+  /** 값 변경 콜백. min/max 범위로 자동 clamp 된 값이 전달된다. */
+  onValueChange?: (value: number) => void;
+  /** 허용 최솟값. 입력값이 이보다 작으면 자동 clamp. */
+  min?: number;
+  /** 허용 최댓값. 입력값이 이보다 크면 자동 clamp. */
+  max?: number;
+  /** 화살표 키 step 폭. 디폴트 1. */
+  step?: number;
+  /** 값 우측에 부착할 단위 표시 (px / ms / % / ° 등). */
+  unit?: React.ReactNode;
+}
+
+/**
+ * 슬라이더 동반·토큰 편집 등 컴팩트 컨텍스트에 적합한 숫자 입력.
+ *
+ * 구현 특이점:
+ * - `type="text"` + `inputMode="decimal"` — type=number 가 Chrome 에서 select() 와
+ *   selectionStart/End 를 지원하지 않아 "0 위에 2 타이핑 → 02" 회귀가 발생함.
+ *   text 로 바꾸고 우리가 직접 숫자 검증/클램프.
+ * - 내부 buffer state — "-", "1.", "" 같이 입력 중간 transient 상태 허용. 유효한
+ *   숫자가 되는 순간 onValueChange 즉시 호출. 포커스 잃을 때 정규화.
+ * - focus 시 setTimeout(0) → select() — mouseup 의 커서 재배치 이후에 selection
+ *   적용되도록.
+ * - ArrowUp/Down 으로 step 조정, Enter 로 blur(commit).
+ *
+ * 일반 폼 입력에는 `Input` / `NumberInput` 사용 권장.
+ */
+export const NumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      min,
+      max,
+      step = 1,
+      unit,
+      className,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = React.useState<number>(defaultValue ?? 0);
+    const current = isControlled ? value! : internal;
+
+    const [buffer, setBuffer] = React.useState<string>(() => String(current));
+    const focusedRef = React.useRef(false);
+
+    // 포커스 잡지 않은 동안 외부 value 변경되면 buffer 동기화.
+    React.useEffect(() => {
+      if (!focusedRef.current) setBuffer(String(current));
+    }, [current]);
+
+    const clamp = (n: number) => {
+      let v = n;
+      if (min !== undefined && v < min) v = min;
+      if (max !== undefined && v > max) v = max;
+      return v;
+    };
+
+    const commit = (n: number): number => {
+      const c = clamp(n);
+      if (!isControlled) setInternal(c);
+      onValueChange?.(c);
+      return c;
+    };
+
+    return (
+      <span className="sh-ui-numeric-input">
+        <input
+          ref={ref}
+          type="text"
+          inputMode="decimal"
+          className={cx("sh-ui-numeric-input__input", className)}
+          value={buffer}
+          onChange={(e) => {
+            const raw = e.target.value;
+            setBuffer(raw);
+            // 입력 중간 상태("", "-", ".", "-.") 는 commit 안 함 — 사용자 타이핑 흐름 유지.
+            if (raw === "" || raw === "-" || raw === "." || raw === "-.") return;
+            const n = Number(raw);
+            if (Number.isFinite(n)) commit(n);
+          }}
+          onFocus={(e) => {
+            focusedRef.current = true;
+            const t = e.currentTarget;
+            // setTimeout 0 로 미뤄야 mouseup 의 커서 재배치 이후에 select 가 적용됨.
+            setTimeout(() => t.select(), 0);
+            onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            focusedRef.current = false;
+            const n = Number(buffer);
+            if (buffer !== "" && Number.isFinite(n)) {
+              const c = commit(n);
+              setBuffer(String(c));
+            } else {
+              // 비어있거나 NaN — 마지막 유효 값으로 복원
+              setBuffer(String(current));
+            }
+            onBlur?.(e);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowUp") {
+              e.preventDefault();
+              const next = commit(current + step);
+              setBuffer(String(next));
+            } else if (e.key === "ArrowDown") {
+              e.preventDefault();
+              const next = commit(current - step);
+              setBuffer(String(next));
+            } else if (e.key === "Enter") {
+              e.currentTarget.blur();
+            }
+            onKeyDown?.(e);
+          }}
+          {...props}
+        />
+        {unit !== undefined && unit !== "" && (
+          <span className="sh-ui-numeric-input__unit" aria-hidden>
+            {unit}
+          </span>
+        )}
+      </span>
+    );
+  },
+);
+NumericInput.displayName = "NumericInput";

package/data/registry/react/components/numeric-input/styles.css

@@ -0,0 +1,56 @@
+/* NumericInput — 컴팩트 monospace 숫자 입력. 슬라이더 동반·토큰 편집기 같은
+   좁은 영역용. 일반 폼 입력은 Input / NumberInput 사용. */
+
+.sh-ui-numeric-input {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 2px;
+  min-width: 3rem;
+  justify-content: flex-end;
+}
+
+.sh-ui-numeric-input__input {
+  width: 2.5rem;
+  padding: 2px 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--text-xs);
+  line-height: 1.2;
+  text-align: right;
+  border: 1px solid transparent;
+  border-radius: calc(var(--radius) - 4px);
+  background: transparent;
+  color: var(--foreground);
+  appearance: textfield;
+  -moz-appearance: textfield;
+  transition: border-color var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard);
+}
+
+/* WebKit 의 스피너 버튼 숨김 — 컴팩트 영역에 노이즈. 키보드 step 은 유지됨. */
+.sh-ui-numeric-input__input::-webkit-inner-spin-button,
+.sh-ui-numeric-input__input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.sh-ui-numeric-input__input:hover:not(:disabled):not(:focus) {
+  border-color: var(--border);
+}
+
+.sh-ui-numeric-input__input:focus,
+.sh-ui-numeric-input__input:focus-visible {
+  outline: none;
+  border-color: var(--foreground);
+  background: var(--background);
+}
+
+.sh-ui-numeric-input__input:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
+
+.sh-ui-numeric-input__unit {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--text-xs);
+  color: var(--foreground-muted);
+}

package/data/registry/react/registry.json

@@ -49,6 +49,22 @@
       "dependencies": [],
       "registryDependencies": []
     },
+    "numeric-input": {
+      "name": "numeric-input",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/numeric-input/index.tsx",
+          "dest": "{components}/numeric-input/index.tsx"
+        },
+        {
+          "src": "components/numeric-input/styles.css",
+          "dest": "{components}/numeric-input/styles.css"
+        }
+      ],
+      "dependencies": [],
+      "registryDependencies": []
+    },
     "file-upload": {
       "name": "file-upload",
       "type": "component",

package/data/summaries/react.json

@@ -3,7 +3,8 @@
   "summaries": {
     "button": "기본 버튼 — variant(primary/secondary/ghost/danger/link) + size(sm/md/lg).",
     "card": "카드 컨테이너 — compound (Card.Header / Card.Body / Card.Footer / Card.Title / Card.Description).",
-    "input": "단일 행 텍스트 입력 — hasError 지원.",
+    "input": "단일 행 텍스트 입력 — hasError 지원. 같은 모듈에 NumberInput / PasswordInput / PhoneInput / BusinessNumberInput 변형 포함.",
+    "numeric-input": "슬라이더 동반·토큰 편집기용 컴팩트 숫자 입력 — onChange 즉시 min/max clamp, focus select-all, 단위(px/ms/%/° 등) suffix. 일반 폼 입력은 NumberInput 권장.",
     "textarea": "여러 행 텍스트 입력 — rows, autoResize.",
     "label": "폼 레이블 — htmlFor로 입력과 연결.",
     "checkbox": "체크박스 — indeterminate 지원 (Base UI).",

package/package.json

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