sellmate-design-system-react 3.0.0 → 3.1.0

package/dist/components/SNumberInput/README.md

@@ -0,0 +1,74 @@
+# SNumberInput
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SNumberInput
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string \| number \| null` | — | 입력 값 |
+| `size?` | `SNumberInputSize` | `'sm'` | 크기 |
+| `min?` | `number` | `Number.NEGATIVE_INFINITY` | 최솟값 |
+| `max?` | `number` | `Number.POSITIVE_INFINITY` | 최댓값 |
+| `step?` | `number` | `1` | 스텝 단위 |
+| `useButton?` | `boolean` | `false` | 증감 버튼 표시 |
+| `useDecimal?` | `boolean` | `false` | 소수점 입력 허용 |
+| `maxDecimalLength?` | `number` | — | 소수점 이하 최대 자리수 |
+| `inputPrefix?` | `string` | `''` | 입력 앞 접두 텍스트 |
+| `inputSuffix?` | `string` | `''` | 입력 뒤 접미 텍스트 |
+| `inputClass?` | `string` | — | 네이티브 input className |
+| `inputStyle?` | `CSSProperties` | — | 네이티브 input style |
+| `autoFocus?` | `boolean` | — | 마운트 시 자동 포커스 |
+| `name?` | `string` | — | 폼 연동 name |
+| `placeholder?` | `string` | `'입력해 주세요.'` |  |
+| `disabled?` | `boolean` | `false` |  |
+| `readOnly?` | `boolean` | `false` |  |
+| `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 검증 |
+| `status?` | `SFieldStatus` | — |  |
+| `focused?` | `boolean` | — |  |
+| `hovered?` | `boolean` | — |  |
+| `label?` | `string` | — |  |
+| `labelWidth?` | `number \| string` | — |  |
+| `icon?` | `SIconName` | — |  |
+| `iconColor?` | `SColor` | — |  |
+| `labelTooltip?` | `string` | — |  |
+| `labelTooltipProps?` | `Partial<STooltipProps>` | — |  |
+| `addonLabel?` | `string` | — |  |
+| `addonAlign?` | `SFieldAddonAlign` | — |  |
+| `hint?` | `string` | — |  |
+| `error?` | `boolean` | — |  |
+| `errorMessage?` | `string` | — |  |
+| `width?` | `number \| string` | — |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: number \| null) => void` | 값 변경 (sdUpdate) — number|null 전달 |
+| `onFocus` | `(e: React.FocusEvent<HTMLInputElement>) => void` | 포커스 이벤트 (sdFocus) |
+| `onBlur` | `(e: React.FocusEvent<HTMLInputElement>) => void` | 블러 이벤트 (sdBlur) |
+
+## Dependencies
+
+### Used by
+
+ - [SKeyValueTable](../SKeyValueTable)
+
+### Depends on
+
+- [SField](../SField)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SNumberInput --> SField
+  SNumberInput --> SIcon
+  SKeyValueTable --> SNumberInput
+  style SNumberInput fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SPage/README.md

@@ -0,0 +1,25 @@
+# SPage
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SPage
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `background?` | `SPageBackground` | `'frame'` | 페이지 배경 표면. frame=흰 콘텐츠 면, neutral=옅은 회색 면, screen=앱 바탕. 스크롤바 처리도 여기 묶여 있다 — 셋 다 구분선+트랙 배경이고, 트랙 색만 neutral 에서 흰색이 된다. |
+
+## Dependencies
+
+### Depends on
+
+- [SLayout](../SLayout)
+
+### Graph
+
+```mermaid
+graph TD;
+  SPage --> SLayout
+  style SPage fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SPagination/README.md

@@ -0,0 +1,40 @@
+# SPagination
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SPagination
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `currentPage?` | `number` | `1` | 현재 페이지 |
+| `lastPage?` | `number` | `1` | 마지막 페이지 |
+| `simple?` | `boolean` | `false` | 단순 모드 (현재/마지막만 표시) |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onPageChange` | `(page: number) => void` | 페이지 변경 (sdPageChange) |
+
+## Dependencies
+
+### Used by
+
+ - [STable](../STable)
+
+### Depends on
+
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SPagination --> SIcon
+  STable --> SPagination
+  style SPagination fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SPopover/README.md

@@ -0,0 +1,54 @@
+# SPopover
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SPopover
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open?` | `boolean` | — | 표시 여부 (제어). onOpenChange 와 함께 사용 |
+| `defaultOpen?` | `boolean` | — | 기본 표시 여부 (비제어) |
+| `placement?` | `SPopoverPlacement` | `'bottom'` | 표시 방향 |
+| `type?` | `SPopoverType` | `'default'` | 색상 타입 (default: 다크 / danger·warning·accent: 라이트 배경) |
+| `menuTitle` | `string` | — | 메뉴 제목 (필수) |
+| `titleIcon?` | `SIconName` | — | 제목 좌측 아이콘 (선택) |
+| `children?` | `ReactNode` | — | 본문 내용 |
+| `trigger?` | `ReactNode` | — | 커스텀 트리거. 없으면 아이콘 트리거 렌더 |
+| `icon?` | `SIconName` | `'helpOutline'` | 기본(아이콘) 트리거 설정 |
+| `iconSize?` | `number` | `12` |  |
+| `color?` | `SColor` | `'#01BB4B'` | 트리거 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 |
+| `leftLinkLabel?` | `string` | — | 하단 좌측 링크 레이블 (선택). 스타일은 chevron 링크로 고정 |
+| `buttonLabel` | `string` | — | 하단 우측 버튼 레이블 (필수). 색상/스타일은 type 별로 고정 |
+| `ariaLabel?` | `string` | — |  |
+| `menuClassName?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onOpenChange` | `(open: boolean) => void` | 표시 상태 변경 (sdShowChange) |
+| `onLeftLinkClick` | `() => void` | 하단 좌측 링크 클릭 |
+| `onButtonClick` | `() => void` | 하단 우측 버튼 클릭 |
+
+## Dependencies
+
+### Depends on
+
+- [SButton](../SButton)
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+- [STextLink](../STextLink)
+
+### Graph
+
+```mermaid
+graph TD;
+  SPopover --> SButton
+  SPopover --> SGhostButton
+  SPopover --> SIcon
+  SPopover --> STextLink
+  style SPopover fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SPopup/README.md

@@ -0,0 +1,38 @@
+# SPopup
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SPopup
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `popupTitle?` | `string` | `''` | 헤더 제목 |
+| `type?` | `SPopupType` | `'default'` | 타입 (헤더 색상) |
+| `useFooter?` | `boolean` | `true` | 하단 footer 표시 여부 |
+| `submitButton?` | `SPopupSubmitButton` | — | 확인 버튼 설정 |
+| `footerLeft?` | `ReactNode` | — | footer 좌측 영역 |
+| `children?` | `ReactNode` | — | 본문 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onSubmit` | `() => void` | 확인 버튼 클릭 (sdSubmit) |
+
+## Dependencies
+
+### Depends on
+
+- [SButton](../SButton)
+
+### Graph
+
+```mermaid
+graph TD;
+  SPopup --> SButton
+  style SPopup fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SPortal/README.md

@@ -0,0 +1,51 @@
+# SPortal
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SPortal
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | — | 표시 여부 (제어). onClose 와 함께 사용한다. |
+| `anchorRef` | `RefObject<HTMLElement \| null>` | — | 위치 기준이 되는 앵커 엘리먼트 ref (sd-portal `parentRef` 대응). 트리거 버튼 등에 그대로 걸면 그 엘리먼트에 붙어서 뜬다. |
+| `placement?` | `SPortalPlacement` | `'bottom'` | 표시 방향 (공간이 부족하면 자동으로 반대 방향으로 전환). |
+| `align?` | `SPortalAlign` | `'start'` | 교차축 정렬 (start·center·end). |
+| `offset?` | `number` | `4` | 앵커로부터의 간격 px (sd-portal offset[1]). |
+| `alignOffset?` | `number` | `0` | 정렬축 오프셋 px (sd-portal offset[0]). |
+| `fit?` | `boolean` | `false` | 앵커 너비에 맞춰 최소 너비를 잡는다. |
+| `maxHeight?` | `number` | — | 콘텐츠 최대 높이 px. 넘치면 세로 스크롤. |
+| `autoClose?` | `boolean` | `false` | 콘텐츠 내부를 클릭하면 자동으로 닫는다. |
+| `persistent?` | `boolean` | `false` | 외부 클릭 · ESC 로 닫히지 않게 한다. |
+| `viewportPadding?` | `number` | `0` | 뷰포트 경계 여백 px (충돌 회피 패딩). |
+| `children?` | `ReactNode` | — | 본문 내용 (콘텐츠 자유). |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+| `ariaLabel?` | `string` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onClose` | `() => void` | 외부 클릭 · ESC 등으로 닫힘이 요청될 때 (sd-portal `sdClose` 대응). |
+| `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 전체 콜백 (선택). |
+| `onOpenAutoFocus` | `(event: Event) => void` | 열릴 때 포커스 이동 처리 (기본은 Radix가 콘텐츠로 포커스를 옮김). e.preventDefault()로 막을 수 있다. |
+| `onCloseAutoFocus` | `(event: Event) => void` | 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. |
+| `onPointerDownOutside` | `(event: Event) => void` | 바깥 영역 pointerdown 으로 닫힘이 시작될 때 (앵커 위 클릭·persistent 는 제외). |
+
+## Dependencies
+
+### Used by
+
+ - [SChipInput](../SChipInput)
+ - [SSelect](../SSelect)
+
+### Graph
+
+```mermaid
+graph TD;
+  SChipInput --> SPortal
+  SSelect --> SPortal
+  style SPortal fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SRadio/README.md

@@ -0,0 +1,57 @@
+# SRadio
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SRadioGroup
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options?` | `SRadioOption[]` | `[]` | 옵션 목록 |
+| `value?` | `SRadioValue \| null` | — | 현재 선택 값 |
+| `direction?` | `'vertical' \| 'horizontal'` | `'vertical'` | 배치 방향 |
+| `disabled?` | `boolean` | `false` | 전체 비활성 |
+| `groupName?` | `string` | — | 라디오 name 속성 (form-agnostic 그룹핑) |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(val: SRadioValue) => void` | 선택 변경 (sdUpdate) |
+
+### SRadio
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `val` | `SRadioValue` | — | 이 라디오의 값 |
+| `value?` | `SRadioValue \| null` | — | 그룹의 현재 선택 값 |
+| `label?` | `string` | — | 라벨 |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `name?` | `string` | — | native radio name (form-agnostic 그룹핑) |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(val: SRadioValue) => void` | 선택 변경 (sdUpdate) — 선택된 val 전달 |
+
+## Dependencies
+
+### Used by
+
+ - [SKeyValueTable](../SKeyValueTable)
+
+### Graph
+
+```mermaid
+graph TD;
+  SKeyValueTable --> SRadio
+  style SRadio fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SRadioButton/README.md

@@ -0,0 +1,24 @@
+# SRadioButton
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SRadioButton
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options?` | `SRadioButtonOption[]` | `[]` | 옵션 목록 |
+| `value?` | `string \| number \| null` | — | 현재 선택 값 |
+| `size?` | `SRadioButtonSize` | `'sm'` | 크기 |
+| `disabled?` | `boolean` | `false` | 전체 비활성 |
+| `name?` | `string` | — | input name 속성 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: string \| number) => void` | 변경 (sdUpdate) |
+

package/dist/components/SScrollArea/README.md

@@ -0,0 +1,16 @@
+# SScrollArea
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SScrollArea
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `axis?` | `SScrollAreaAxis` | `'both'` | 스크롤 방향. vertical=세로만, horizontal=가로만, both=양방향 |
+| `background?` | `boolean` | `false` | true면 스크롤바 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. |
+| `bordered?` | `boolean` | `false` | true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. |
+| `maxHeight?` | `string` | — | viewport 최대 높이 (예: '400px'). 비우면 부모 크기를 따른다. |
+| `maxWidth?` | `string` | — | viewport 최대 너비 (예: '480px'). 비우면 부모 크기를 따른다. |
+

package/dist/components/SSectionHeaderCard/README.md

@@ -0,0 +1,51 @@
+# SSectionHeaderCard
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SSectionHeaderCardBody
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children?` | `SSectionHeaderCardBodyChildren` | — | 바디 슬롯. 특정 컴포넌트 타입으로 제한하지 않습니다. |
+
+### SSectionHeaderCardHeader
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `ReactNode` | — | 헤더 제목 |
+| `marker?` | `boolean` | `false` | 제목 앞 점 표시 여부 |
+| `required?` | `boolean` | `false` | 제목 뒤 필수 별 표시 여부 |
+| `helpText?` | `string[]` | — | 도움말 툴팁 메시지 |
+| `subtitle?` | `ReactNode` | — | 부제 |
+| `slot?` | `ReactNode` | — | 헤더 우측 슬롯 |
+| `thickness?` | `SSectionHeaderCardThickness` | `false` | 상단 border 색상 타입. false면 표시하지 않습니다. |
+
+### SSectionHeaderCard
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children?` | `SSectionHeaderCardChildren` | — | SSectionHeaderCard 슬롯. 특정 컴포넌트 타입으로 제한하지 않습니다. |
+
+## Dependencies
+
+### Depends on
+
+- [SBadge](../SBadge)
+- [SIcon](../SIcon)
+- [STooltip](../STooltip)
+
+### Graph
+
+```mermaid
+graph TD;
+  SSectionHeaderCard --> SBadge
+  SSectionHeaderCard --> SIcon
+  SSectionHeaderCard --> STooltip
+  style SSectionHeaderCard fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SSelect/README.md

@@ -0,0 +1,79 @@
+# SSelect
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SSelect
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `(string \| number \| SSelectOption) \| (string \| number \| SSelectOption)[] \| null` | — | 선택 값. multi 타입이면 배열. emitValue=false(기본) 라운드트립을 위해 SSelectOption 객체도 허용 |
+| `emitValue?` | `boolean` | `false` | true면 SSelectOption 대신 원시값(string|number) 방출 |
+| `name?` | `string` | — | 폼 연동용 name 속성 |
+| `options?` | `SSelectOption[]` | `[]` | 옵션 목록 (children으로 계층 표현) |
+| `type?` | `SSelectType` | `'default'` | 타입: default | multi | default_depth | multi_depth |
+| `useSearch?` | `boolean` | `false` | 검색 입력 사용 |
+| `useSelectAll?` | `boolean` | `false` | 전체선택 옵션 사용 (multi 전용) |
+| `allSelectedLabel?` | `string` | `'전체'` | 전체선택 레이블 |
+| `placeholder?` | `string` | `'선택'` | placeholder |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `error?` | `boolean` | `false` | 에러 상태 |
+| `rules?` | `Rule[]` | — | 유효성 규칙 — 닫힐 때 자동 검증 |
+| `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |
+| `dropdownHeight?` | `string` | `'260px'` | 드롭다운 최대 높이 |
+| `dropdownWidth?` | `string` | — | 드롭다운 너비 (없으면 트리거 너비) |
+| `maxDropdownWidth?` | `string` | `'640px'` | 드롭다운 최대 너비 |
+| `label?` | `string` | — |  |
+| `labelWidth?` | `number \| string` | — |  |
+| `icon?` | `SIconName` | — | 레이블 영역 아이콘 |
+| `iconColor?` | `SColor` | — |  |
+| `labelTooltip?` | `string` | — | 레이블 툴팁 텍스트 |
+| `addonLabel?` | `string` | — | 우측 어드온 레이블 |
+| `addonAlign?` | `SFieldAddonAlign` | — | 어드온 정렬 |
+| `hint?` | `string` | — |  |
+| `errorMessage?` | `string` | — |  |
+| `width?` | `number \| string` | — |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: any) => void` | 값 변경 (sdUpdate). emitValue=false(기본)면 SSelectOption(들), true면 원시값 |
+| `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 (sdDropDownShow) |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `focus` | `() => void` | 트리거 버튼에 포커스 (sdFocus) |
+| `open` | `() => void` | 드롭다운 열기 (sdOpen) |
+
+## Dependencies
+
+### Used by
+
+ - [SKeyValueTable](../SKeyValueTable)
+ - [STable](../STable)
+
+### Depends on
+
+- [SField](../SField)
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+- [SPortal](../SPortal)
+
+### Graph
+
+```mermaid
+graph TD;
+  SSelect --> SField
+  SSelect --> SGhostButton
+  SSelect --> SIcon
+  SSelect --> SPortal
+  SKeyValueTable --> SSelect
+  STable --> SSelect
+  style SSelect fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SStepper/README.md

@@ -0,0 +1,30 @@
+# SStepper
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SStepper
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `SStepperItem[]` | — | 단계 목록 |
+| `value?` | `string` | — | 현재 활성 단계 value |
+| `size?` | `SStepperSize` | `'sm'` | 크기 |
+| `ariaLabel?` | `string` | `'진행 단계'` | 접근성 레이블 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+## Dependencies
+
+### Depends on
+
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SStepper --> SIcon
+  style SStepper fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SSwitch/README.md

@@ -0,0 +1,24 @@
+# SSwitch
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SSwitch
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `boolean` | `false` | on/off 상태 |
+| `leftLabel?` | `string` | — | 스위치 좌측 라벨 |
+| `rightLabel?` | `string` | — | 스위치 우측 라벨 |
+| `label?` | `string` | — |  |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: boolean) => void` | 변경 (sdUpdate) |
+

package/dist/components/STable/README.md

@@ -0,0 +1,82 @@
+# STable
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### STable
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `columns?` | `STableColumn[]` | `[]` |  |
+| `rows?` | `SRow[]` | `[]` |  |
+| `rowKey?` | `string` | `'id'` | 행 식별 필드 |
+| `selectable?` | `boolean` | `false` | 행 선택 체크박스 |
+| `selected?` | `SRow[]` | `[]` |  |
+| `resizable?` | `boolean` | `false` | 컬럼 너비 조절 |
+| `width?` | `string` | — |  |
+| `height?` | `string` | — |  |
+| `stickyHeader?` | `boolean` | — |  |
+| `stickyColumn?` | `STableStickyColumn` | — | 고정할 좌/우 컬럼 수 |
+| `radius?` | `'default' \| 'useTop' \| 'full'` | `'default'` | border-radius 제어 |
+| `noDataLabel?` | `string` | `'데이터가 없습니다.'` |  |
+| `noDataSlot?` | `ReactNode` | — | 데이터가 없을 때 body 영역 전체를 대체하는 슬롯. 지정하면 `noDataLabel` 대신 이 콘텐츠가 헤더 아래 영역을 채우며, 버튼 등 인터랙션도 동작한다. |
+| `isLoading?` | `boolean` | `false` |  |
+| `dense?` | `boolean` | `false` |  |
+| `noHover?` | `boolean` | `false` | true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 |
+| `pagination?` | `STablePagination` | — | 페이지네이션 (있으면 하단 표시) |
+| `useInternalPagination?` | `boolean` | `false` | 테이블 내부에서 페이지네이션을 직접 관리 (rows를 내부 슬라이싱) |
+| `useRowsPerPageSelect?` | `boolean` | `false` | 페이지당 행 수 셀렉트 표시 |
+| `rowsPerPageOption?` | `SSelectOption[]` | `DEFAULT_ROWS_PER_PAGE_OPTION` |  |
+| `useVirtualScroll?` | `boolean` | `false` | 가상 스크롤 |
+| `rowHeight?` | `number` | — |  |
+| `virtualBuffer?` | `number` | `5` |  |
+| `virtualEndThreshold?` | `number` | `10` |  |
+| `tableId?` | `string` | — | 테이블 식별자 (없으면 자동 생성) |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onSelectedChange` | `(rows: SRow[]) => void` |  |
+| `onPageChange` | `(page: number) => void` |  |
+| `onRowsPerPageChange` | `(perPage: number) => void` |  |
+| `onVirtualUpdate` | `(range: { from: number; to: number }) => void` |  |
+| `onVirtualReachEnd` | `(info: { from: number; to: number; rowCount: number; threshold: number; }) =>…` |  |
+| `onRowClick` | `(row: SRow) => void` | 행 클릭 |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `isRowSelected` | `(row: SRow) => boolean` | 행 선택 여부 |
+| `getIsAllChecked` | `(rows: SRow[]) => boolean \| null` | 주어진 행들의 전체 선택 상태 (true/false/null=indeterminate) |
+| `getPaginationInfo` | `<union 2종>` | 내부 페이지네이션 정보 (useInternalPagination 아니면 null) |
+| `getStickyStyle` | `(colIdx: number) => CSSProperties` | 컬럼 sticky 스타일 (CSS 변수 + 고정폭) |
+| `setRowCount` | `(count: number) => void` | 가상 스크롤 총 행 수 설정 |
+| `updateRowSelect` | `(row: SRow) => void` | 단일 행 선택 토글 (sd-table updateRowSelect) — onSelectedChange 발생 |
+| `toggleSelectAll` | `(checked: boolean, rows: SRow[]) => void` | 주어진 행들 전체 선택/해제 (sd-table toggleSelectAll) — onSelectedChange 발생 |
+
+## Dependencies
+
+### Depends on
+
+- [SCheckbox](../SCheckbox)
+- [SCircleProgress](../SCircleProgress)
+- [SIcon](../SIcon)
+- [SPagination](../SPagination)
+- [SSelect](../SSelect)
+
+### Graph
+
+```mermaid
+graph TD;
+  STable --> SCheckbox
+  STable --> SCircleProgress
+  STable --> SIcon
+  STable --> SPagination
+  STable --> SSelect
+  style STable fill:#f9f,stroke:#333,stroke-width:4px
+```