sellmate-design-system-react 9.0.0-beta.11 → 9.0.0-beta.112

package/dist/components/SSkeleton/README.md

@@ -0,0 +1,67 @@
+# SSkeleton
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SSkeleton
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type?` | `SSkeletonType` | `'rect'` | 자리표시 모양 - `rect`: 사각형. 폭은 부모를, 높이는 한 줄 높이를 따른다 — 이미지·카드 영역은 `height` 를 준다 - `circle`: 원형(아바타 등) - `text`: 텍스트 한 줄. 부모 타이포의 line-height 를 따르고 세로로 절반만 칠한다 - `button`·`input`·`tag`·`checkbox`·`radio`·`switch`: 해당 컴포넌트 기본 size 의 크기·모서리 |
+| `mode?` | `SSkeletonMode` | `'light'` | 놓이는 바탕의 밝기 - `light`: 흰 면·회색 면 위. 바탕보다 짙은 반투명 회색 - `dark`: 어두운 면 위. 바탕보다 밝은 반투명 회색 |
+| `animation?` | `SSkeletonAnimation` | `'wave'` | 로딩 애니메이션 - `wave`: 하이라이트 띠가 왼쪽에서 오른쪽으로 지나간다 - `pulse`: 크기가 숨쉬듯 줄었다 커진다. 블록 전체가 움직이므로 아바타처럼 작은 모양에만 쓴다 - `fade`: 투명도가 숨쉬듯 바뀐다 - `none`: 애니메이션 없음 OS 의 동작 줄이기 설정이 켜져 있으면 어떤 값이든 멈춘다. |
+| `animationSpeed?` | `number` | `1500` | 애니메이션 한 주기 (ms) |
+| `square?` | `boolean` | `false` | 모서리를 각지게 |
+| `size?` | `string \| number` | — | 가로·세로를 한 번에 지정. `width`·`height` 가 있으면 그쪽이 우선한다. 숫자는 px |
+| `width?` | `string \| number` | — | 폭. 숫자는 px |
+| `height?` | `string \| number` | — | 높이. 숫자는 px |
+
+## Types
+
+### SSkeletonType
+
+```ts
+export type SSkeletonType = (typeof SKELETON_TYPES)[number];
+```
+
+### SSkeletonMode
+
+```ts
+export type SSkeletonMode = (typeof SKELETON_MODES)[number];
+```
+
+### SSkeletonAnimation
+
+```ts
+export type SSkeletonAnimation = (typeof SKELETON_ANIMATIONS)[number];
+```
+
+### SKELETON_TYPES
+
+```ts
+export const SKELETON_TYPES = [
+  'rect',
+  'circle',
+  'text',
+  'button',
+  'input',
+  'tag',
+  'checkbox',
+  'radio',
+  'switch',
+] as const;
+```
+
+### SKELETON_MODES
+
+```ts
+export const SKELETON_MODES = ['light', 'dark'] as const;
+```
+
+### SKELETON_ANIMATIONS
+
+```ts
+export const SKELETON_ANIMATIONS = ['wave', 'pulse', 'fade', 'none'] as const;
+```
+

package/dist/components/SSkeleton/SSkeleton.d.ts

@@ -0,0 +1,43 @@
+import { type HTMLAttributes } from 'react';
+import { type SSkeletonAnimation, type SSkeletonMode, type SSkeletonType } from './skeleton.config';
+export interface SSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * 자리표시 모양
+     * - `rect`: 사각형. 폭은 부모를, 높이는 한 줄 높이를 따른다 — 이미지·카드 영역은 `height` 를 준다
+     * - `circle`: 원형(아바타 등)
+     * - `text`: 텍스트 한 줄. 부모 타이포의 line-height 를 따르고 세로로 절반만 칠한다
+     * - `button`·`input`·`tag`·`checkbox`·`radio`·`switch`: 해당 컴포넌트 기본 size 의 크기·모서리
+     */
+    type?: SSkeletonType;
+    /**
+     * 놓이는 바탕의 밝기
+     * - `light`: 흰 면·회색 면 위. 바탕보다 짙은 반투명 회색
+     * - `dark`: 어두운 면 위. 바탕보다 밝은 반투명 회색
+     */
+    mode?: SSkeletonMode;
+    /**
+     * 로딩 애니메이션
+     * - `wave`: 하이라이트 띠가 왼쪽에서 오른쪽으로 지나간다
+     * - `pulse`: 크기가 숨쉬듯 줄었다 커진다. 블록 전체가 움직이므로 아바타처럼 작은 모양에만 쓴다
+     * - `fade`: 투명도가 숨쉬듯 바뀐다
+     * - `none`: 애니메이션 없음
+     *
+     * OS 의 동작 줄이기 설정이 켜져 있으면 어떤 값이든 멈춘다.
+     */
+    animation?: SSkeletonAnimation;
+    /** 애니메이션 한 주기 (ms) */
+    animationSpeed?: number;
+    /** 모서리를 각지게 */
+    square?: boolean;
+    /** 가로·세로를 한 번에 지정. `width`·`height` 가 있으면 그쪽이 우선한다. 숫자는 px */
+    size?: string | number;
+    /** 폭. 숫자는 px */
+    width?: string | number;
+    /** 높이. 숫자는 px */
+    height?: string | number;
+}
+/**
+ * SSkeleton — 데이터가 오기 전 콘텐츠 자리를 같은 모양으로 채워 두는 자리표시. Quasar QSkeleton 모티브.
+ * 장식이라 보조기기에는 숨긴다(`aria-hidden`). 로딩 중이라는 사실은 감싸는 영역에 `aria-busy` 로 알린다.
+ */
+export declare const SSkeleton: import("react").ForwardRefExoticComponent<SSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SSkeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { SSkeleton, type SSkeletonProps } from './SSkeleton';
+export { SKELETON_TYPES, SKELETON_ANIMATIONS, SKELETON_MODES, SKELETON_TYPE_CONFIG, type SSkeletonType, type SSkeletonAnimation, type SSkeletonMode, } from './skeleton.config';

package/dist/components/SSkeleton/skeleton.config.d.ts

@@ -0,0 +1,24 @@
+export declare const SKELETON_TYPES: readonly ["rect", "circle", "text", "button", "input", "tag", "checkbox", "radio", "switch"];
+export type SSkeletonType = (typeof SKELETON_TYPES)[number];
+export declare const SKELETON_ANIMATIONS: readonly ["wave", "pulse", "fade", "none"];
+export type SSkeletonAnimation = (typeof SKELETON_ANIMATIONS)[number];
+export declare const SKELETON_MODES: readonly ["light", "dark"];
+export type SSkeletonMode = (typeof SKELETON_MODES)[number];
+/**
+ * type 별 기본 크기·모서리. 값이 없는 축은 내용(공백 한 글자)과 부모 폭을 따른다.
+ * DS 모양(button·input…)은 해당 컴포넌트의 **기본 size** 토큰을 그대로 가리켜
+ * 토큰이 바뀌어도 실제 컴포넌트와 어긋나지 않는다. 폭은 토큰이 없어 Quasar 기본값을 따른다.
+ */
+export declare const SKELETON_TYPE_CONFIG: Record<SSkeletonType, {
+    width?: string;
+    height?: string;
+    radius: string;
+}>;
+/**
+ * mode 별 색. 배경색을 반투명(`cmp-skeleton-opacity`)으로 깔아 흰 면·회색 면 어디서든 바탕보다 한 단계 짙게(dark 는 밝게) 보인다.
+ * 밝은 면(light)에는 어두운 색(`bg-dark`)을, 어두운 면(dark)에는 밝은 색(`bg-light`)을 쓴다 — Quasar 의 검정·흰색 반투명과 같은 축.
+ */
+export declare const SKELETON_COLORS: Record<SSkeletonMode, {
+    bg: string;
+    wave: string;
+}>;

package/dist/components/SSlider/README.md

@@ -0,0 +1,86 @@
+# SSlider
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SSlider
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `V` | — | 값 (제어). **`number` 면 단일, `[시작, 끝]` 이면 범위 슬라이더**가 된다 — 손잡이 개수와 `onValueChange` 가 돌려주는 모양이 이 값을 따른다. 범위는 두 손잡이가 서로를 넘어가지 않는다. |
+| `min?` | `number` | `0` | 최솟값 |
+| `max?` | `number` | `100` | 최댓값 |
+| `step?` | `number` | `1` | 한 칸 크기. 값은 `min` 에서 이 간격으로만 움직인다 |
+| `marks?` | `boolean \| SSliderMark[]` | — | 눈금. `true` 면 `step` 마다 점을 찍고, 배열이면 그 위치에만 찍는다(라벨을 함께 줄 수 있다). 고를 수 있는 값이 몇 개 안 될 때 어디서 멈추는지 보여 주는 용도다 — `step` 이 촘촘하면 `true` 대신 배열로 대표 위치만 준다. |
+| `showValue?` | `SSliderShowValue` | `'drag'` | 값 말풍선 표시 시점. - `drag` — 드래그·키보드 조작 중, 손잡이에 마우스를 올렸을 때만 보인다 - `always` — 늘 보인다. 값을 숫자로 따로 보여 주지 않는 자리에서 쓴다 - `none` — 보이지 않는다. 옆에 값을 따로 적어 둘 때 쓴다 `none` 이 아니면 말풍선 자리만큼 위쪽 공간을 미리 잡아 두어, 나타날 때 레이아웃이 밀리지 않는다. |
+| `formatValue?` | `(value: number) => string` | `String` | 말풍선·스크린리더에 읽히는 값 표기 (예: `v => \`${v}%\``) |
+| `size?` | `SFieldSize` | `'sm'` | 크기 — 다른 필드와 나란히 놓일 때 라벨과 높이를 맞추는 등급이다. 슬라이더 모양 자체는 같다. |
+| `rules?` | `Rule[]` | — | 유효성 규칙 — 조작이 끝날 때(`onValueCommit` 시점)와 SForm 제출 시 검증 |
+| `name?` | `string` | — | 폼 연동용 name |
+| `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
+| `label?` | `string` | — | 레이블 텍스트. 손잡이의 접근성 이름으로도 쓰인다 |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
+| `labelWidth?` | `number \| string` | — | 레이블 너비 (숫자=px) |
+| `icon?` | `SIconName` | — | 레이블 영역 아이콘 |
+| `iconColor?` | `SColor` | — | 레이블 영역 아이콘 색상 |
+| `labelTooltip?` | `string` | — | 레이블 툴팁 텍스트 |
+| `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |
+| `hint?` | `string` | — | 하단 힌트 |
+| `error?` | `boolean` | — | 에러 상태 |
+| `errorMessage?` | `string` | — | 에러 메시지 |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급 · 숫자=px · CSS 길이. 기본은 부모 폭을 채운다. |
+| `disabled?` | `boolean` | `false` | 비활성 — 조작·포커스가 모두 막힌다 |
+| `readOnly?` | `boolean` | `false` | 읽기 전용 — 값은 그대로 보이고 키보드 포커스는 받지만 값이 바뀌지 않는다 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: V) => void` | 값 변경 — 드래그 중 매 step 마다 호출된다 |
+| `onValueCommit` | `(value: V) => void` | 조작이 끝났을 때 한 번 호출된다 (포인터를 놓을 때, 키보드로 한 칸 움직일 때). 값을 서버에 보내거나 목록을 다시 불러오는 등 **매 step 마다 하면 안 되는 일**은 여기서 한다. |
+
+## Types
+
+### SSliderValue
+
+```ts
+/** 단일 값은 `number`, 범위는 `[시작, 끝]` */
+export type SSliderValue = number | [number, number];
+```
+
+### SSliderMark
+
+```ts
+/** 눈금 하나 */
+export interface SSliderMark {
+  /** 눈금 위치 값 (`min`~`max`) */
+  value: number;
+  /** 눈금 아래 라벨. 없으면 점만 찍힌다 */
+  label?: string;
+}
+```
+
+### SSliderShowValue
+
+```ts
+/** 값 말풍선을 언제 보일지 */
+export type SSliderShowValue = 'none' | 'drag' | 'always';
+```
+
+## Dependencies
+
+### Depends on
+
+- [SField](../SField)
+
+### Graph
+
+```mermaid
+graph TD;
+  SSlider --> SField
+  style SSlider fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SSlider/SSlider.d.ts

@@ -0,0 +1,149 @@
+import { type CSSProperties, type ReactElement, type RefAttributes } from 'react';
+import { type SFieldSize, type SFieldStatus, type SFieldLabelPosition } from '../SField';
+import { type SIconName } from '../SIcon';
+import { type STooltipProps } from '../STooltip';
+import { type SColor } from '../../lib/color';
+import { type Rule } from '../../lib/form';
+import { type SFieldWidth } from '../../lib/field-width';
+/** 단일 값은 `number`, 범위는 `[시작, 끝]` */
+export type SSliderValue = number | [number, number];
+/** 값 말풍선을 언제 보일지 */
+export type SSliderShowValue = 'none' | 'drag' | 'always';
+/** 눈금 하나 */
+export interface SSliderMark {
+    /** 눈금 위치 값 (`min`~`max`) */
+    value: number;
+    /** 눈금 아래 라벨. 없으면 점만 찍힌다 */
+    label?: string;
+}
+export interface SSliderProps<V extends SSliderValue = number> {
+    /**
+     * 값 (제어). **`number` 면 단일, `[시작, 끝]` 이면 범위 슬라이더**가 된다 —
+     * 손잡이 개수와 `onValueChange` 가 돌려주는 모양이 이 값을 따른다.
+     * 범위는 두 손잡이가 서로를 넘어가지 않는다.
+     */
+    value?: V;
+    /** 값 변경 — 드래그 중 매 step 마다 호출된다 */
+    onValueChange?: (value: V) => void;
+    /**
+     * 조작이 끝났을 때 한 번 호출된다 (포인터를 놓을 때, 키보드로 한 칸 움직일 때).
+     * 값을 서버에 보내거나 목록을 다시 불러오는 등 **매 step 마다 하면 안 되는 일**은 여기서 한다.
+     */
+    onValueCommit?: (value: V) => void;
+    /** 최솟값 */
+    min?: number;
+    /** 최댓값 */
+    max?: number;
+    /** 한 칸 크기. 값은 `min` 에서 이 간격으로만 움직인다 */
+    step?: number;
+    /**
+     * 눈금. `true` 면 `step` 마다 점을 찍고, 배열이면 그 위치에만 찍는다(라벨을 함께 줄 수 있다).
+     * 고를 수 있는 값이 몇 개 안 될 때 어디서 멈추는지 보여 주는 용도다 —
+     * `step` 이 촘촘하면 `true` 대신 배열로 대표 위치만 준다.
+     */
+    marks?: boolean | SSliderMark[];
+    /**
+     * 값 말풍선 표시 시점.
+     * - `drag` — 드래그·키보드 조작 중, 손잡이에 마우스를 올렸을 때만 보인다
+     * - `always` — 늘 보인다. 값을 숫자로 따로 보여 주지 않는 자리에서 쓴다
+     * - `none` — 보이지 않는다. 옆에 값을 따로 적어 둘 때 쓴다
+     *
+     * `none` 이 아니면 말풍선 자리만큼 위쪽 공간을 미리 잡아 두어, 나타날 때 레이아웃이 밀리지 않는다.
+     */
+    showValue?: SSliderShowValue;
+    /** 말풍선·스크린리더에 읽히는 값 표기 (예: `v => \`${v}%\``) */
+    formatValue?: (value: number) => string;
+    /**
+     * 크기 — 다른 필드와 나란히 놓일 때 라벨과 높이를 맞추는 등급이다. 슬라이더 모양 자체는 같다.
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    size?: SFieldSize;
+    /** 유효성 규칙 — 조작이 끝날 때(`onValueCommit` 시점)와 SForm 제출 시 검증 */
+    rules?: Rule[];
+    /** 폼 연동용 name */
+    name?: string;
+    /**
+     * 필드 상태 ('default' | 'pass' | 'error')
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    status?: SFieldStatus;
+    /** 레이블 텍스트. 손잡이의 접근성 이름으로도 쓰인다 */
+    label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
+    /**
+     * 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    subLabel?: string;
+    /**
+     * 레이블 너비 (숫자=px)
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelWidth?: number | string;
+    /**
+     * 레이블 영역 아이콘
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    icon?: SIconName;
+    /**
+     * 레이블 영역 아이콘 색상
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    iconColor?: SColor;
+    /**
+     * 레이블 툴팁 텍스트
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelTooltip?: string;
+    /**
+     * 레이블 툴팁 상세 옵션
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelTooltipProps?: Partial<STooltipProps>;
+    /** 하단 힌트 */
+    hint?: string;
+    /** 에러 상태 */
+    error?: boolean;
+    /** 에러 메시지 */
+    errorMessage?: string;
+    /**
+     * 컨트롤 너비 — 폭 등급 · 숫자=px · CSS 길이. 기본은 부모 폭을 채운다.
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    width?: SFieldWidth;
+    /** 비활성 — 조작·포커스가 모두 막힌다 */
+    disabled?: boolean;
+    /** 읽기 전용 — 값은 그대로 보이고 키보드 포커스는 받지만 값이 바뀌지 않는다 */
+    readOnly?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SSlider — 끌어서 수치 하나 또는 범위를 고르는 필드 (Radix Slider 기반).
+ * SField 를 테두리 없이 두르고, 라벨·힌트·에러·SForm 검증은 다른 필드와 같게 동작한다.
+ */
+export declare const SSlider: <V extends SSliderValue = number>(props: SSliderProps<V> & RefAttributes<HTMLDivElement>) => ReactElement;

package/dist/components/SSlider/index.d.ts

@@ -0,0 +1 @@
+export { SSlider, type SSliderProps, type SSliderValue, type SSliderShowValue, type SSliderMark, } from './SSlider';

package/dist/components/SSplitter/README.md

@@ -12,7 +12,7 @@
 | `defaultValue?` | `number` | — | 첫 패널 초기 크기. uncontrolled. 기본은 '%' 면 50, 'px' 면 240 |
 | `unit?` | `SSplitterUnit` | `'%'` | 모델·limits 를 읽는 단위 |
 | `limits?` | `readonly [number, number]` | — | [최소, 최대]. 생략하면 '%' 는 [10, 90], 'px' 는 [50, Infinity] |
-| `emitImmediately?` | `boolean` | `false` | 드래그하는 동안에도 onValueChange 를 계속 보낸다 |
+| `updateWhileDragging?` | `boolean` | `false` | 드래그하는 동안에도 `onValueChange` 를 계속 보낸다. 기본은 놓는 순간 한 번만 — 미리보기는 컴포넌트가 내부에서 그리므로, 값을 저장하는 쪽이 프레임마다 불릴 이유가 없다. 패널 크기에 맞춰 밖의 무언가를 실시간으로 다시 그려야 할 때만 켠다. |
 | `vertical?` | `boolean` | `false` | true면 패널을 위아래로 쌓는다 (Quasar q-splitter 의 horizontal 에 해당) |
 | `disabled?` | `boolean` | `false` | true면 크기를 바꿀 수 없다. 커서도 구분선도 나오지 않는다 |
 | `dividerClassName?` | `string` | — | 구분선에 얹을 클래스 |
@@ -23,7 +23,7 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(value: number) => void` | 크기가 확정될 때. emitImmediately 가 아니면 드래그를 놓는 순간 한 번만 온다 |
+| `onValueChange` | `(value: number) => void` | 크기가 확정될 때. `updateWhileDragging` 이 아니면 드래그를 놓는 순간 한 번만 온다 |
 
 ## Types
 

package/dist/components/SSplitter/SSplitter.d.ts

@@ -7,14 +7,18 @@ export interface SSplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'de
     value?: number;
     /** 첫 패널 초기 크기. uncontrolled. 기본은 '%' 면 50, 'px' 면 240 */
     defaultValue?: number;
-    /** 크기가 확정될 때. emitImmediately 가 아니면 드래그를 놓는 순간 한 번만 온다 */
+    /** 크기가 확정될 때. `updateWhileDragging` 이 아니면 드래그를 놓는 순간 한 번만 온다 */
     onValueChange?: (value: number) => void;
     /** 모델·limits 를 읽는 단위 */
     unit?: SSplitterUnit;
     /** [최소, 최대]. 생략하면 '%' 는 [10, 90], 'px' 는 [50, Infinity] */
     limits?: readonly [number, number];
-    /** 드래그하는 동안에도 onValueChange 를 계속 보낸다 */
-    emitImmediately?: boolean;
+    /**
+     * 드래그하는 동안에도 `onValueChange` 를 계속 보낸다. 기본은 놓는 순간 한 번만 —
+     * 미리보기는 컴포넌트가 내부에서 그리므로, 값을 저장하는 쪽이 프레임마다 불릴 이유가 없다.
+     * 패널 크기에 맞춰 밖의 무언가를 실시간으로 다시 그려야 할 때만 켠다.
+     */
+    updateWhileDragging?: boolean;
     /** true면 패널을 위아래로 쌓는다 (Quasar q-splitter 의 horizontal 에 해당) */
     vertical?: boolean;
     /** true면 크기를 바꿀 수 없다. 커서도 구분선도 나오지 않는다 */

package/dist/components/SStepper/README.md

@@ -13,7 +13,7 @@
 | `size?` | `SStepperSize` | `'sm'` | 크기 |
 | `vertical?` | `boolean` | `false` | 세로형 여부 |
 | `clickable?` | `boolean` | — | 단계 클릭 가능 여부. 미지정 시 가로형=false, 세로형=true |
-| `ariaLabel?` | `string` | `'진행 단계'` | 접근성 레이블 |
+| `ariaLabel?` | `string` | — | 접근성 레이블. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "진행 단계")를 쓴다 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 

package/dist/components/SStepper/SStepper.d.ts

@@ -13,7 +13,7 @@ export interface SStepperProps {
     clickable?: boolean;
     /** 단계 선택 시 호출 */
     onValueChange?: (value: string, item: SStepperItem, index: number) => void;
-    /** 접근성 레이블 */
+    /** 접근성 레이블. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "진행 단계")를 쓴다 */
     ariaLabel?: string;
     className?: string;
     style?: CSSProperties;
@@ -22,7 +22,7 @@ export interface SStepperProps {
  * ref 로 노출되는 커스텀 툴팁 제어 API. 세로형 전용 — items 중 error 가 true 인 첫 번째
  * 아이템의 텍스트+뱃지 영역에 표시된다.
  *
- * 지금은 대상(첫 번째 error 아이템 하나)·문구·스타일이 hover 툴팁(ERROR_TOOLTIP_MESSAGE, danger)과
+ * 지금은 대상(첫 번째 error 아이템 하나)·문구·스타일이 hover 툴팁(로케일의 stepper.errorTooltip, danger)과
  * 동일하게 고정되어 있다 — 열고 닫는 타이밍만 소비자가 제어한다. 대상 아이템을 지정하거나
  * content·type 을 커스터마이즈하는 기능은 필요해지면 추가한다(지금은 만들지 않음).
  */
@@ -32,5 +32,5 @@ export interface SStepperHandle {
     /** 열려있는 커스텀 툴팁을 닫는다. 활성 단계(value prop)가 바뀌면 별도 호출 없이도 자동으로 닫힌다. */
     hideItemTooltip: () => void;
 }
-/** SStepper — sd-stepper 포팅. 단계 진행 상태 표시 전용. */
+/** SStepper — 단계 진행 상태 표시 전용. */
 export declare const SStepper: import("react").ForwardRefExoticComponent<SStepperProps & import("react").RefAttributes<SStepperHandle>>;

package/dist/components/SStepper/stepper.config.d.ts

@@ -9,10 +9,14 @@ export type SStepperItem = {
 };
 export declare const STEPPER_SIZE_CONFIG: Record<SStepperSize, {
     sequenceSize: string;
+    /** 루트에 거는 글자 크기 — 시퀀스 배지와 typoActive 가 없는 진행 중 타이틀이 상속한다 */
     fontSize: string;
     lineHeight: string;
+    /** 기본·완료 타이틀 타이포 (stepper.<size>.typography.default) */
+    typoDefault: string;
+    /** 진행 중 타이틀 타이포 (stepper.<size>.typography.active). null 이면 fontWeightActive 로 그린다 */
+    typoActive: string | null;
     fontWeightActive: number;
-    fontWeightDefault: number;
 }>;
 export declare const STEPPER_LAYOUT: {
     containerGap: string;
@@ -52,14 +56,15 @@ export declare const STEPPER_HORIZONTAL_COMPLETED_COLORS: {
     text: string;
 };
 export declare const STEPPER_VERTICAL_LAYOUT: {
+    /** 세로형 폭. 대응 토큰이 없어 디자인 값을 그대로 쓴다(stepper.vertical 에 width 가 없음). */
     width: string;
     itemGap: string;
     itemPaddingX: string;
     itemPaddingY: string;
     titlePaddingTop: string;
     titlePaddingBottom: string;
-    titleFontSize: string;
-    titleLineHeight: string;
+    /** 구간 제목 타이포 — stepper.vertical.title.typography (= heading.xxs) */
+    titleTypo: string;
     accentStripeWidth: string;
     accentStripeColor: string;
 };
@@ -69,6 +74,7 @@ export declare const STEPPER_VERTICAL_COLORS: {
         hover: string;
         selected: string;
     };
+    titleBg: string;
     titleText: string;
     textDefault: string;
     textCompleted: string;

package/dist/components/SSwitch/README.md

@@ -11,7 +11,6 @@
 | `value?` | `boolean` | `false` | on/off 상태 |
 | `leftLabel?` | `string` | — | 스위치 좌측 라벨 |
 | `rightLabel?` | `string` | — | 스위치 우측 라벨 |
-| `label?` | `string` | — |  |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -20,5 +19,18 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(value: boolean) => void` | 변경 (sdUpdate) |
+| `onValueChange` | `(value: boolean) => void` | 변경 |
 
+## Dependencies
+
+### Used by
+
+ - [SKeyValueTable](../SKeyValueTable)
+
+### Graph
+
+```mermaid
+graph TD;
+  SKeyValueTable --> SSwitch
+  style SSwitch fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SSwitch/SSwitch.d.ts

@@ -6,14 +6,12 @@ export interface SSwitchProps {
     leftLabel?: string;
     /** 스위치 우측 라벨 */
     rightLabel?: string;
-    /** @deprecated `rightLabel` 사용. 우측 라벨(하위호환) */
-    label?: string;
     /** 비활성 */
     disabled?: boolean;
-    /** 변경 (sdUpdate) */
+    /** 변경 */
     onValueChange?: (value: boolean) => void;
     className?: string;
     style?: CSSProperties;
 }
-/** SSwitch — sd-switch 포팅 (Radix SSwitch). 32×20 트랙, 16 노브. 좌/우 라벨 지원. */
-export declare function SSwitch({ value, leftLabel, rightLabel, label, disabled, onValueChange, className, style, }: SSwitchProps): import("react").JSX.Element;
+/** SSwitch — Radix Switch 기반. 32×20 트랙, 16 노브. 좌/우 라벨 지원. */
+export declare function SSwitch({ value, leftLabel, rightLabel, disabled, onValueChange, className, style, }: SSwitchProps): import("react").JSX.Element;