sellmate-design-system-react 9.0.0-beta.7 → 9.0.0-beta.71

package/dist/components/SSelect/README.md

@@ -8,23 +8,31 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `value?` | `(string \| number \| SSelectOption) \| (string \| number \| SSelectOption)[] \| null` | — | 선택 값. multi 타입이면 배열. emitValue=false(기본) 라운드트립을 위해 SSelectOption 객체도 허용 |
-| `emitValue?` | `boolean` | `false` | true면 SSelectOption 대신 원시값(string|number) 방출 |
+| `value?` | `(string \| number \| SSelectOption) \| (string \| number \| SSelectOption)[] \| null` | — | 선택 값. multi 타입이면 배열. 기본(valueAsPrimitive=false) 라운드트립을 위해 SSelectOption 객체도 허용 |
+| `valueAsPrimitive?` | `boolean` | `false` | `value`·`onValueChange` 가 옵션 객체 대신 원시값(string|number)을 주고받는다. **기본값 `false`(옵션 객체)는 유지한다** — 원본(sd-select) 호환 때문이고, 뒤집으면 이 값을 주지 않던 화면이 조용히 다른 모양의 값을 받게 되어 타입으로도 잡히지 않는다. 새로 쓰는 화면은 켜는 쪽이 다루기 쉽다 — 서버로 보내는 것도, 폼 상태에 담는 것도 결국 값 하나이기 때문이다. |
 | `name?` | `string` | — | 폼 연동용 name 속성 |
 | `options?` | `SSelectOption[]` | `[]` | 옵션 목록 (children으로 계층 표현) |
 | `type?` | `SSelectType` | `'default'` | 타입: default | multi | default_depth | multi_depth |
-| `useSearch?` | `boolean` | `false` | 검색 입력 사용 |
-| `useSelectAll?` | `boolean` | `false` | 전체선택 옵션 사용 (multi 전용) |
+| `showSearch?` | `boolean` | `false` | 검색 입력 사용 |
+| `showSelectAll?` | `boolean` | `false` | 전체선택 옵션 사용 (multi 전용) |
 | `allSelectedLabel?` | `string` | `'전체'` | 전체선택 레이블 |
 | `placeholder?` | `string` | `'선택'` | placeholder |
 | `disabled?` | `boolean` | `false` | 비활성 |
+| `clearable?` | `boolean` | `false` | 선택값 지우기(×) 버튼 노출. 선택값이 있고 비활성이 아닐 때만 나타나며, 누르면 드롭다운을 열지 않고 값만 비운다. |
 | `error?` | `boolean` | `false` | 에러 상태 |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — 닫힐 때 자동 검증 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |
-| `dropdownHeight?` | `string` | `'260px'` | 드롭다운 최대 높이 |
+| `dropdownHeight?` | `string` | `'640px'` | 드롭다운 최대 높이. 기본 640px — 창이 이보다 작으면 창 안에 남는 만큼까지만 채워진다 |
 | `dropdownWidth?` | `string` | — | 드롭다운 너비 (없으면 트리거 너비). 창보다 넓게 줘도 창 폭까지만 벌어진다. |
 | `maxDropdownWidth?` | `string` | `'640px'` | 드롭다운 최대 너비. 창이 이보다 좁으면 창 폭이 상한이 된다. |
+| `virtualBuffer?` | `number` | `DEFAULT_VIRTUAL_BUFFER` | 화면 위·아래로 더 그려둘 여유 행 수 — 빠르게 스크롤할 때 빈 칸이 보이지 않게 한다. 목록은 **언제나 보이는 범위만 렌더한다**(끄는 prop 은 없다). 그래서 여는 비용이 옵션 수와 무관하고, 이 값만이 DOM 에 남는 행 수를 정한다 — 한 화면 분량 + 앞뒤로 이만큼. |
+| `reachEndThreshold?` | `number` | `DEFAULT_REACH_END_THRESHOLD` | 목록 끝에서 이만큼 행이 남았을 때 `onReachEnd` 를 부른다 — 스크롤이 바닥에 닿기 전에 미리 받아 둔다. **한 페이지 크기보다 충분히 작게 잡는다.** 한 페이지가 드롭다운을 채우고도 이 문턱만큼 남기지 못하면, 페이지가 도착하는 족족 다음 페이지를 다시 청하게 된다 — 사용자가 스크롤을 하지 않아도 목록 전체를 받아 오므로 페이징을 한 의미가 사라진다. (한 페이지 50개 · 드롭다운에 20행이 보인다면 남는 것은 30행이므로, 문턱은 그보다 작아야 한다) |
+| `hasMore?` | `boolean` | `false` | 더 받아올 페이지가 남았는가. `false` 면 `onReachEnd` 를 더 부르지 않는다 |
+| `loading?` | `boolean` | `false` | 다음 페이지를 받는 중 — 목록 하단에 로딩 표시를 내고, 그동안 `onReachEnd` 를 다시 부르지 않는다 |
+| `serverSearch?` | `boolean` | `false` | 검색을 서버로 넘긴다 — 내부 필터링을 하지 않고 `options` 를 받은 그대로 보여준다. `onSearchChange` 로 온 검색어에 맞는 목록을 소비 앱이 다시 내려줘야 한다. 켜면 검색바가 옵션 수와 무관하게 항상 나온다 — 검색 결과가 줄었다고 검색바가 사라지면 검색어를 지울 수단이 없어지기 때문이다. |
+| `searchDebounce?` | `number` | `DEFAULT_SEARCH_DEBOUNCE` | `serverSearch` 에서 검색어를 서버로 넘기기 전 기다리는 시간(ms) |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — | 레이블 영역 아이콘 |
 | `iconColor?` | `SColor` | — |  |
@@ -33,7 +41,7 @@
 | `addonAlign?` | `SFieldAddonAlign` | — | 어드온 정렬 |
 | `hint?` | `string` | — |  |
 | `errorMessage?` | `string` | — |  |
-| `width?` | `number \| string` | — |  |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. 셀렉트는 `maxLength` 개념이 없어 목록 최장값을 담는 등급으로 고른다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -41,8 +49,10 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(value: any) => void` | 값 변경 (sdUpdate). emitValue=false(기본)면 SSelectOption(들), true면 원시값 |
+| `onValueChange` | `(value: any) => void` | 값 변경. 기본은 SSelectOption(들)이 오고, `valueAsPrimitive` 면 원시값이 온다 |
 | `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 (sdDropDownShow) |
+| `onReachEnd` | `() => void` | 목록 끝이 가까워지면 부른다 — 다음 페이지를 받아 `options` 뒤에 이어붙이라는 신호다. `hasMore` 가 `false` 이거나 `loading` 중이면 부르지 않고, 같은 목록 길이로 두 번 부르지 않는다. **`options` 는 갈아끼우지 말고 이어붙인다.** depth 타입이면 이미 있는 그룹의 `children` 에 이어야 한다 — 같은 그룹을 새 항목으로 또 밀어 넣으면 목록에 같은 헤더가 두 번 뜬다. 아직 받지 않은 옵션은 라벨을 알 수 없다. 그래서 이 prop 을 쓰는 화면은 `valueAsPrimitive` 를 켜지 않는 편이 안전하다 — 기본값(옵션 객체)이면 선택값이 라벨을 함께 들고 다녀서, 그 옵션이 목록에서 사라져도 트리거에 이름이 그대로 남는다. |
+| `onSearchChange` | `(query: string) => void` | 검색어 변경. `serverSearch` 면 `searchDebounce` 만큼 묶어서 온다 |
 
 #### Methods (ref)
 
@@ -51,30 +61,47 @@
 | `focus` | `() => void` | 트리거 버튼에 포커스 (sdFocus) |
 | `open` | `() => void` | 드롭다운 열기 (sdOpen) |
 
+## Types
+
+### SSelectOption
+
+```ts
+export interface SSelectOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+  children?: SSelectOption[];
+}
+```
+
+### SSelectType
+
+```ts
+export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
+```
+
 ## Dependencies
 
 ### Used by
 
- - [SChipFilter](../SChipFilter)
  - [SKeyValueTable](../SKeyValueTable)
  - [STable](../STable)
 
 ### Depends on
 
 - [SField](../SField)
-- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 - [SPortal](../SPortal)
+- [SSearchInput](../SSearchInput)
 
 ### Graph
 
 ```mermaid
 graph TD;
   SSelect --> SField
-  SSelect --> SGhostButton
   SSelect --> SIcon
   SSelect --> SPortal
-  SChipFilter --> SSelect
+  SSelect --> SSearchInput
   SKeyValueTable --> SSelect
   STable --> SSelect
   style SSelect fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/SSelect/SSelect.d.ts

@@ -1,10 +1,11 @@
 import { type CSSProperties } from 'react';
 import { type Rule } from '../../lib/form';
-import { type SFieldAddonAlign } from '../SField';
+import { type SFieldAddonAlign, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type STooltipProps } from '../STooltip';
 import { type SSelectOption, type SSelectType } from './select.config';
+import { type SFieldWidth } from '../../lib/field-width';
 export type { SSelectOption, SSelectType } from './select.config';
 export interface SSelectHandle {
     /** 트리거 버튼에 포커스 (sdFocus) */
@@ -13,14 +14,22 @@ export interface SSelectHandle {
     open: () => void;
 }
 export interface SSelectProps {
-    /** 선택 값. multi 타입이면 배열. emitValue=false(기본) 라운드트립을 위해 SSelectOption 객체도 허용 */
+    /** 선택 값. multi 타입이면 배열. 기본(valueAsPrimitive=false) 라운드트립을 위해 SSelectOption 객체도 허용 */
     value?: (string | number | SSelectOption) | (string | number | SSelectOption)[] | null;
-    /** 값 변경 (sdUpdate). emitValue=false(기본)면 SSelectOption(들), true면 원시값 */
+    /** 값 변경. 기본은 SSelectOption(들)이 오고, `valueAsPrimitive` 면 원시값이 온다 */
     onValueChange?: (value: any) => void;
     /** 열림/닫힘 변경 (sdDropDownShow) */
     onOpenChange?: (open: boolean) => void;
-    /** true면 SSelectOption 대신 원시값(string|number) 방출 */
-    emitValue?: boolean;
+    /**
+     * `value`·`onValueChange` 가 옵션 객체 대신 원시값(string|number)을 주고받는다.
+     *
+     * **기본값 `false`(옵션 객체)는 유지한다** — 원본(sd-select) 호환 때문이고, 뒤집으면 이 값을
+     * 주지 않던 화면이 조용히 다른 모양의 값을 받게 되어 타입으로도 잡히지 않는다.
+     *
+     * 새로 쓰는 화면은 켜는 쪽이 다루기 쉽다 — 서버로 보내는 것도, 폼 상태에 담는 것도
+     * 결국 값 하나이기 때문이다.
+     */
+    valueAsPrimitive?: boolean;
     /** 폼 연동용 name 속성 */
     name?: string;
     /** 옵션 목록 (children으로 계층 표현) */
@@ -28,28 +37,84 @@ export interface SSelectProps {
     /** 타입: default | multi | default_depth | multi_depth */
     type?: SSelectType;
     /** 검색 입력 사용 */
-    useSearch?: boolean;
+    showSearch?: boolean;
     /** 전체선택 옵션 사용 (multi 전용) */
-    useSelectAll?: boolean;
+    showSelectAll?: boolean;
     /** 전체선택 레이블 */
     allSelectedLabel?: string;
     /** placeholder */
     placeholder?: string;
     /** 비활성 */
     disabled?: boolean;
+    /**
+     * 선택값 지우기(×) 버튼 노출. 선택값이 있고 비활성이 아닐 때만 나타나며,
+     * 누르면 드롭다운을 열지 않고 값만 비운다.
+     */
+    clearable?: boolean;
     /** 에러 상태 */
     error?: boolean;
     /** 유효성 규칙 — 닫힐 때 자동 검증 */
     rules?: Rule[];
     /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps?: Partial<STooltipProps>;
-    /** 드롭다운 최대 높이 */
+    /** 드롭다운 최대 높이. 기본 640px — 창이 이보다 작으면 창 안에 남는 만큼까지만 채워진다 */
     dropdownHeight?: string;
     /** 드롭다운 너비 (없으면 트리거 너비). 창보다 넓게 줘도 창 폭까지만 벌어진다. */
     dropdownWidth?: string;
     /** 드롭다운 최대 너비. 창이 이보다 좁으면 창 폭이 상한이 된다. */
     maxDropdownWidth?: string;
+    /**
+     * 화면 위·아래로 더 그려둘 여유 행 수 — 빠르게 스크롤할 때 빈 칸이 보이지 않게 한다.
+     *
+     * 목록은 **언제나 보이는 범위만 렌더한다**(끄는 prop 은 없다). 그래서 여는 비용이 옵션
+     * 수와 무관하고, 이 값만이 DOM 에 남는 행 수를 정한다 — 한 화면 분량 + 앞뒤로 이만큼.
+     */
+    virtualBuffer?: number;
+    /**
+     * 목록 끝이 가까워지면 부른다 — 다음 페이지를 받아 `options` 뒤에 이어붙이라는 신호다.
+     * `hasMore` 가 `false` 이거나 `loading` 중이면 부르지 않고, 같은 목록 길이로 두 번 부르지 않는다.
+     *
+     * **`options` 는 갈아끼우지 말고 이어붙인다.** depth 타입이면 이미 있는 그룹의 `children`
+     * 에 이어야 한다 — 같은 그룹을 새 항목으로 또 밀어 넣으면 목록에 같은 헤더가 두 번 뜬다.
+     *
+     * 아직 받지 않은 옵션은 라벨을 알 수 없다. 그래서 이 prop 을 쓰는 화면은
+     * `valueAsPrimitive` 를 켜지 않는 편이 안전하다 — 기본값(옵션 객체)이면 선택값이 라벨을
+     * 함께 들고 다녀서, 그 옵션이 목록에서 사라져도 트리거에 이름이 그대로 남는다.
+     */
+    onReachEnd?: () => void;
+    /**
+     * 목록 끝에서 이만큼 행이 남았을 때 `onReachEnd` 를 부른다 — 스크롤이 바닥에 닿기 전에 미리 받아 둔다.
+     *
+     * **한 페이지 크기보다 충분히 작게 잡는다.** 한 페이지가 드롭다운을 채우고도 이 문턱만큼
+     * 남기지 못하면, 페이지가 도착하는 족족 다음 페이지를 다시 청하게 된다 — 사용자가 스크롤을
+     * 하지 않아도 목록 전체를 받아 오므로 페이징을 한 의미가 사라진다.
+     * (한 페이지 50개 · 드롭다운에 20행이 보인다면 남는 것은 30행이므로, 문턱은 그보다 작아야 한다)
+     */
+    reachEndThreshold?: number;
+    /** 더 받아올 페이지가 남았는가. `false` 면 `onReachEnd` 를 더 부르지 않는다 */
+    hasMore?: boolean;
+    /** 다음 페이지를 받는 중 — 목록 하단에 로딩 표시를 내고, 그동안 `onReachEnd` 를 다시 부르지 않는다 */
+    loading?: boolean;
+    /**
+     * 검색을 서버로 넘긴다 — 내부 필터링을 하지 않고 `options` 를 받은 그대로 보여준다.
+     * `onSearchChange` 로 온 검색어에 맞는 목록을 소비 앱이 다시 내려줘야 한다.
+     *
+     * 켜면 검색바가 옵션 수와 무관하게 항상 나온다 — 검색 결과가 줄었다고 검색바가 사라지면
+     * 검색어를 지울 수단이 없어지기 때문이다.
+     */
+    serverSearch?: boolean;
+    /** 검색어 변경. `serverSearch` 면 `searchDebounce` 만큼 묶어서 온다 */
+    onSearchChange?: (query: string) => void;
+    /** `serverSearch` 에서 검색어를 서버로 넘기기 전 기다리는 시간(ms) */
+    searchDebounce?: number;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     /** 레이블 영역 아이콘 */
     icon?: SIconName;
@@ -62,7 +127,13 @@ export interface SSelectProps {
     addonAlign?: SFieldAddonAlign;
     hint?: string;
     errorMessage?: string;
-    width?: number | string;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     * 셀렉트는 `maxLength` 개념이 없어 목록 최장값을 담는 등급으로 고른다.
+     */
+    width?: SFieldWidth;
     className?: string;
     style?: CSSProperties;
 }

package/dist/components/SSelect/select.config.d.ts

@@ -29,3 +29,18 @@ export declare function collectGroupLeafValues(flat: FlatOption[], groupIndex: n
 export declare const isHtmlLabel: (label: string) => boolean;
 /** HTML 라벨에서 태그를 제거한 텍스트 (검색 매칭용, 원본 extractText) */
 export declare const extractText: (html: string) => string;
+/**
+ * 아직 한 번도 그려지지 않은 행의 **추정** 높이(px). 리프 옵션은 세로 패딩 4px + 행간 20px
+ * 이라 보통 이 값이지만, 그룹 헤더나 큰 글씨가 섞인 라벨은 다르다 — 화면에 나온 행은
+ * 실측으로 덮이므로(`lib/row-metrics.ts`) 이 값은 처음 스크롤바 길이를 잡는 출발점일 뿐이다.
+ */
+export declare const OPTION_ROW_HEIGHT = 28;
+/**
+ * 화면 위·아래로 더 그려둘 기본 여유 행 수.
+ * 640px 드롭다운이 20행 남짓 보이므로, 앞뒤 10행이면 한 화면을 굴리는 동안 빈 칸이 보이지 않는다.
+ */
+export declare const DEFAULT_VIRTUAL_BUFFER = 10;
+/** 목록 끝에서 이만큼 행이 남았을 때 다음 페이지를 청하는 기본값 */
+export declare const DEFAULT_REACH_END_THRESHOLD = 10;
+/** `serverSearch` 에서 검색어를 서버로 넘기기 전 기다리는 기본 시간(ms) */
+export declare const DEFAULT_SEARCH_DEBOUNCE = 300;

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,5 +23,20 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(value: number) => void` | 크기가 확정될 때. emitImmediately 가 아니면 드래그를 놓는 순간 한 번만 온다 |
+| `onValueChange` | `(value: number) => void` | 크기가 확정될 때. `updateWhileDragging` 이 아니면 드래그를 놓는 순간 한 번만 온다 |
+
+## Types
+
+### SSplitterUnit
+
+```ts
+/** 모델·limits 를 읽는 단위. Quasar QSplitter 의 `unit` 과 같다. */
+export type SSplitterUnit = (typeof SSPLITTER_UNITS)[number];
+```
+
+### SSPLITTER_UNITS
+
+```ts
+export const SSPLITTER_UNITS = ['%', 'px'] as const;
+```
 

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

@@ -30,6 +30,32 @@
 | `showItemTooltip` | `() => void` | error 아이템 중 첫 번째에 툴팁을 연다. error 아이템이 없으면 아무 일도 일어나지 않는다. |
 | `hideItemTooltip` | `() => void` | 열려있는 커스텀 툴팁을 닫는다. 활성 단계(value prop)가 바뀌면 별도 호출 없이도 자동으로 닫힌다. |
 
+## Types
+
+### SStepperItem
+
+```ts
+export type SStepperItem = {
+  label: string;
+  value?: string;
+  group?: string;
+  completed?: boolean;
+  error?: boolean;
+};
+```
+
+### SStepperSize
+
+```ts
+export type SStepperSize = (typeof STEPPER_SIZES)[number];
+```
+
+### STEPPER_SIZES
+
+```ts
+export const STEPPER_SIZES = ['sm', 'lg'] as const;
+```
+
 ## Dependencies
 
 ### Depends on

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` | — |  |
@@ -22,3 +21,16 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: boolean) => void` | 변경 (sdUpdate) |
 
+## 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,8 +6,6 @@ export interface SSwitchProps {
     leftLabel?: string;
     /** 스위치 우측 라벨 */
     rightLabel?: string;
-    /** @deprecated `rightLabel` 사용. 우측 라벨(하위호환) */
-    label?: string;
     /** 비활성 */
     disabled?: boolean;
     /** 변경 (sdUpdate) */
@@ -16,4 +14,4 @@ export interface SSwitchProps {
     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;
+export declare function SSwitch({ value, leftLabel, rightLabel, disabled, onValueChange, className, style, }: SSwitchProps): import("react").JSX.Element;

package/dist/components/SSystemActionButton/README.md

@@ -0,0 +1,246 @@
+# SSystemActionButton
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SSystemActionButtonAccount
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'account'` | — | 계정 행 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option` | `SSystemActionButtonAccountOption` | — | 누르면 뜨는 계정 리스트박스. **필수다** — 계정 행은 늘 이 패널의 트리거이고, 눌러도 아무것도 뜨지 않는 계정 행은 없다. 아이콘은 `user` 로 고정이라 여기서 받지 않는다. |
+
+### SSystemActionButtonBase
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color?` | `SSystemActionButtonColor` | — | 색상(놓이는 표면). light = 흰 면, dark = 오션블루 면, darker = 네이비 면. 기본 `'light'` |
+| `disabled?` | `boolean` | — | 비활성 여부. 기본 `false` |
+
+### SSystemActionButton
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'account' \| 'select' \| 'switch' \| 'subSelect' \| 'status'` | — | 계정 행 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option?` | `<union 5종>` | — | 누르면 뜨는 계정 리스트박스. **필수다** — 계정 행은 늘 이 패널의 트리거이고, 눌러도 아무것도 뜨지 않는 계정 행은 없다. 아이콘은 `user` 로 고정이라 여기서 받지 않는다. |
+
+### SSystemActionButtonSelect
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'select'` | — | 화살표만 붙는 행 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option?` | `SSystemActionButtonIconOption` | — | 선행 아이콘. 아이콘 없이 라벨만 두는 행이면 통째로 생략한다 |
+
+### SSystemActionButtonStatus
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'status'` | — | 라벨 자리에 상태 태그가 들어가는 행 |
+| `label?` | `never` | — | 태그가 라벨 자리를 차지하므로 받지 않는다 |
+| `option` | `SSystemActionButtonStatusOption` | — | 상태 태그 + 고를 목록. **필수다** — 상태 행은 늘 그 상태를 바꾸는 메뉴의 트리거다. |
+
+### SSystemActionButtonSubSelect
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'subSelect'` | — | 우측에 지금 선택된 값이 붙는 행 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option` | `SSystemActionButtonSubSelectOption` | — | 선행 아이콘 + 우측 값 + 고를 목록 |
+
+### SSystemActionButtonSwitch
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'switch'` | — | 우측에 보조 조작 문구가 붙는 행 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option?` | `SSystemActionButtonTextOption` | — | 선행 아이콘 + 우측 액션 텍스트. 둘 다 두지 않으면 통째로 생략한다 |
+
+### SSystemActionButtonText
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'switch' \| 'subSelect'` | — | 우측에 보조 조작 문구가 붙는 행 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option?` | `SSystemActionButtonTextOption \| SSystemActionButtonSubSelectOption` | — | 선행 아이콘 + 우측 액션 텍스트. 둘 다 두지 않으면 통째로 생략한다 |
+
+## Types
+
+### SSystemActionButtonAccountOption
+
+```ts
+/**
+ * `account` 타입의 option — 행을 눌렀을 때 뜨는 계정 리스트박스.
+ * 내용(이메일·이름·권한·행들)은 `SAccountListBox` 와 같다.
+ *
+ * **뜨는 자리는 받지 않는다.** 계정 행이 놓인 자리가 정한다 — 판이면 행 위로 · 왼쪽 끝에 맞춰,
+ * 전폭 상단바면 행 아래로 · 오른쪽 끝에 맞춰 펼친다(시안). 화면마다 고를 값이 아니라,
+ * prop 으로 열면 같은 계정 행이 앱마다 다른 방향으로 뜬다.
+ */
+export interface SSystemActionButtonAccountOption extends SAccountListBoxContent {
+  /**
+   * 리스트박스 열림 상태를 밖에서 쥔다(controlled). 주지 않으면 버튼이 스스로 여닫는다.
+   * 행을 담은 쪽이 닫아야 하는 자리가 있어 열어 둔 통로다 — 리스트박스는 SPortal 로 떠 있어
+   * 트리거가 화면에서 빠져도(GNB 를 접으면 메뉴 컬럼이 미끄러져 나간다) 따라 사라지지 않는다.
+   */
+  open?: boolean;
+  /** 리스트박스 열림/닫힘 변경 */
+  onOpenChange?: (open: boolean) => void;
+}
+```
+
+### SSystemActionButtonColor
+
+```ts
+export type SSystemActionButtonColor = (typeof SYSTEM_ACTION_BUTTON_COLORS)[number];
+```
+
+### SSystemActionButtonIconOption
+
+```ts
+/** 선행 아이콘만 받는 타입(`select`)의 option */
+export interface SSystemActionButtonIconOption {
+  /** 선행 아이콘명. 주지 않으면 아이콘 프레임 없이 라벨부터 시작한다 */
+  icon?: SIconName;
+}
+```
+
+### SSystemActionButtonStatusOption
+
+```ts
+/**
+ * `status` 타입의 option — 라벨 자리에 들어가는 상태 태그 + 고를 목록.
+ *
+ * `options` 는 **필수다** — 상태 행은 늘 그 상태를 바꾸는 메뉴의 트리거이고, 지금 상태(`value`)에
+ * 해당하는 칸의 색·이름이 곧 태그가 된다. 보여주기만 하는 상태 줄이 필요하면 이 버튼이 아니라
+ * `STag` 를 쓴다.
+ */
+export interface SSystemActionButtonStatusOption {
+  /** 지금 상태. `options` 에서 같은 `value` 를 찾아 그 색·이름으로 태그를 그린다 */
+  value?: string;
+  /** 고를 수 있는 상태. **필수다** — 이 목록이 행 오른쪽으로 펼쳐진다 */
+  options: SSystemActionButtonStatusMenuOption[];
+  /** 메뉴에서 상태를 고름. 고르면 메뉴가 닫힌다 */
+  onChange?: (value: string) => void;
+}
+```
+
+### SSystemActionButtonSubSelectOption
+
+```ts
+/**
+ * `subSelect` 타입의 option — 지금 값 + 고를 목록.
+ *
+ * `options` 는 **필수다** — `subSelect` 는 "지금 값이 적혀 있고 눌러서 바꾸는 행"이라, 눌러도
+ * 아무것도 뜨지 않으면 그것은 `select`(눌러 들어가는 행)이지 `subSelect` 가 아니다.
+ */
+export interface SSystemActionButtonSubSelectOption extends SSystemActionButtonIconOption {
+  /**
+   * 선행 아이콘. `select` · `switch` 와 달리 **필수다** — 우측이 지금 값에 쓰이는 행이라
+   * 라벨 왼쪽까지 비면 무엇에 대한 값인지 가리키는 것이 라벨 글자 하나뿐이 된다.
+   */
+  icon: SIconName;
+  /**
+   * 지금 값. `options` 에서 같은 `value` 를 찾아 우측에 그 `label` 로 적는다
+   * (못 찾으면 `value` 가 그대로 남는다).
+   */
+  value?: string;
+  /** 고를 수 있는 값. **필수다** — 이 목록이 행 오른쪽으로 펼쳐진다 */
+  options: SSystemActionButtonMenuOption[];
+  /** 메뉴에서 값을 고름. 고르면 메뉴가 닫힌다 */
+  onChange?: (value: string) => void;
+}
+```
+
+### SSystemActionButtonTextOption
+
+```ts
+/** 우측 액션 텍스트까지 받는 타입(`switch`)의 option */
+export interface SSystemActionButtonTextOption extends SSystemActionButtonIconOption {
+  /** 우측 액션 텍스트 */
+  text?: string;
+}
+```
+
+### SYSTEM_ACTION_BUTTON_COLORS
+
+```ts
+/**
+ * SSystemActionButton 설정.
+ *
+ * 토큰은 GNB system 패널 한 벌(`--cmp-gnb-system-*`)을 그대로 쓴다.
+ *   행 공통(높이·라운드·아이콘 프레임·라벨)  → --cmp-gnb-system-item-*
+ *   색(color 축) light / dark / darker        → --cmp-gnb-system-item-<color>-*
+ *   우측 액션(패딩·간격·아이콘·텍스트색)      → --cmp-gnb-system-actionButton-*
+ *
+ * 타이포그래피는 CSS 변수가 아니라 `.typo-*` 프리셋으로 나온다.
+ *   item.label              → typo-body-sm-semibold  (12/600/20)
+ *   actionButton.switch     → typo-field-sm-default   (12/400/20)
+ *   actionButton.selectData → typo-control-xs-medium  (12/500/20)
+ */
+
+/** 색상(표면). light = 흰 면, dark = 오션블루 면, darker = 네이비 면 */
+export const SYSTEM_ACTION_BUTTON_COLORS = ['light', 'dark', 'darker'] as const;
+```
+
+### SSystemActionButtonStatusMenuOption
+
+```ts
+/** 상태 메뉴의 한 칸 — 점과 글자가 그 상태의 색으로 함께 물든다 */
+export interface SSystemActionButtonStatusMenuOption extends SSystemActionButtonMenuOption {
+  /** 상태 색. 기본 `'blue'` */
+  color?: STagColor;
+}
+```
+
+### SSystemActionButtonMenuOption
+
+```ts
+/** 값 고르기 메뉴의 한 칸 */
+export interface SSystemActionButtonMenuOption {
+  /** 값. `option.value` 와 맞춰 지금 값을 가린다 */
+  value: string;
+  /** 화면에 적히는 이름 */
+  label: string;
+}
+```
+
+## Dependencies
+
+### Used by
+
+ - [SGnbSystem](../SGnbSystem)
+
+### Depends on
+
+- [SAccountListBox](../SAccountListBox)
+- [SIcon](../SIcon)
+- [STag](../STag)
+
+### Graph
+
+```mermaid
+graph TD;
+  SSystemActionButton --> SAccountListBox
+  SSystemActionButton --> SIcon
+  SSystemActionButton --> STag
+  SGnbSystem --> SSystemActionButton
+  style SSystemActionButton fill:#f9f,stroke:#333,stroke-width:4px
+```