sellmate-design-system-react 3.0.0 → 3.2.0

package/dist/components/SField/README.md

@@ -0,0 +1,91 @@
+# SField
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SField
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name?` | `string` | — | 폼 연동용 name 속성 |
+| `label?` | `string` | `''` | 레이블 텍스트 |
+| `icon?` | `SIconName` | — | 레이블 영역 아이콘명 (크기는 size 토큰 16px 고정) |
+| `iconColor?` | `SColor` | — | 레이블 영역 아이콘 색상. 미지정 시 currentColor 상속 |
+| `labelTooltip?` | `string` | `''` | 레이블 툴팁 텍스트 |
+| `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 (SdTooltipProps 대응) |
+| `labelWidth?` | `number \| string` | — | 레이블/어드온 레이블 너비 (숫자=px). label·addonLabel 폭에 공통 적용 |
+| `labelHeight?` | `number \| string` | — | 레이블 박스 높이 (숫자=px). 미지정 시 size별 기본값 사용. 컨트롤 박스가 기본 필드 높이보다 큰 경우(multiline 등) 첫 행에 세로 중앙 정렬을 맞추기 위해 컨트롤 박스 높이를 넘겨받는다. |
+| `size?` | `SFieldSize` | `'sm'` | 필드 크기 |
+| `addonLabel?` | `string` | `''` | 우측 어드온 레이블 |
+| `addonAlign?` | `SFieldAddonAlign` | `'start'` | 어드온 정렬 |
+| `error?` | `boolean` | `false` | 에러 상태 |
+| `errorMessage?` | `string` | `''` | 에러 메시지 |
+| `status?` | `SFieldStatus` | — | 필드 상태 — 'error' | 'pass' | 'default'. 'pass'면 초록 테두리 |
+| `focused?` | `boolean` | `false` | 포커스 상태 (제어/반영) |
+| `hovered?` | `boolean` | `false` | 호버 상태 (제어/반영) |
+| `rules?` | `Rule[]` | — | 유효성 규칙 (검증은 컨트롤에서 수행, API 패리티) |
+| `hint?` | `string` | `''` | 하단 힌트 |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `readOnly?` | `boolean` | `false` | 읽기 전용 (회색 배경) |
+| `width?` | `number \| string` | — | 컨트롤 너비 (숫자=px). 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다. 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다. |
+| `minWidth?` | `number \| string` | — | 컨트롤 최소 너비 (숫자=px). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 |
+| `multiline?` | `boolean` | `false` | 멀티라인(textarea) — 컨트롤 높이를 고정하지 않고 min-height만 적용 |
+| `borderless?` | `boolean` | `false` | 테두리 박스 제거 (inline 컨트롤용) — border/배경/hover·focus 강조만 사라지고 label·hint·errorMessage 등 나머지 필드 구성은 그대로 동작한다. |
+| `children?` | `ReactNode` | — | 실제 컨트롤 (input/select 등) — 테두리 없이 렌더, 테두리는 SField가 제공 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onMouseEnter` | `() => void` |  |
+| `onMouseLeave` | `() => void` |  |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `focus` | `() => void` | 내부 컨트롤에 포커스하고 필드를 화면에 스크롤합니다. |
+
+## Dependencies
+
+### Used by
+
+ - [SBarcodeInput](../SBarcodeInput)
+ - [SChipInput](../SChipInput)
+ - [SDatePicker](../SDatePicker)
+ - [SDateRangePicker](../SDateRangePicker)
+ - [SFilePicker](../SFilePicker)
+ - [SInput](../SInput)
+ - [SNumberInput](../SNumberInput)
+ - [SSelect](../SSelect)
+ - [STextarea](../STextarea)
+ - [STimePicker](../STimePicker)
+ - [STimeRangePicker](../STimeRangePicker)
+
+### Depends on
+
+- [SIcon](../SIcon)
+- [STooltip](../STooltip)
+
+### Graph
+
+```mermaid
+graph TD;
+  SField --> SIcon
+  SField --> STooltip
+  SBarcodeInput --> SField
+  SChipInput --> SField
+  SDatePicker --> SField
+  SDateRangePicker --> SField
+  SFilePicker --> SField
+  SInput --> SField
+  SNumberInput --> SField
+  SSelect --> SField
+  STextarea --> SField
+  STimePicker --> SField
+  STimeRangePicker --> SField
+  style SField fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SFilePicker/README.md

@@ -0,0 +1,72 @@
+# SFilePicker
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SFilePicker
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `SFilePickerValue` | `null` |  |
+| `placeholder?` | `string` | `'Click to upload'` |  |
+| `disabled?` | `boolean` | `false` |  |
+| `focused?` | `boolean` | `false` | 포커스 상태 여부 |
+| `hovered?` | `boolean` | `false` | 호버 상태 여부 |
+| `inline?` | `boolean` | `false` | 인라인 표시 — SField 테두리 박스만 사라지고 label/rules/hint 는 그대로 동작 |
+| `multiple?` | `boolean` | `false` |  |
+| `useMultipleListBox?` | `boolean` | `false` | multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 (바깥 클릭 시 닫힘) |
+| `accept?` | `string` | — |  |
+| `maxFileSize?` | `number \| string` | — |  |
+| `maxTotalSize?` | `number \| string` | — |  |
+| `maxFiles?` | `number \| string` | — |  |
+| `name?` | `string` | — |  |
+| `rules?` | `Rule[]` | — |  |
+| `status?` | `SFieldStatus` | — |  |
+| `size?` | `SFieldSize` | `'sm'` |  |
+| `label?` | `string` | — |  |
+| `labelWidth?` | `number \| string` | — |  |
+| `icon?` | `SIconName` | — |  |
+| `iconColor?` | `SColor` | — |  |
+| `labelTooltip?` | `string` | — |  |
+| `labelTooltipProps?` | `Partial<STooltipProps>` | — |  |
+| `addonLabel?` | `string` | — |  |
+| `addonAlign?` | `SFieldAddonAlign` | `'start'` |  |
+| `hint?` | `string` | — |  |
+| `error?` | `boolean` | — |  |
+| `errorMessage?` | `string` | — |  |
+| `width?` | `number \| string` | — |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: SFilePickerValue) => void` | 파일 변경 (sdUpdate) |
+| `onReject` | `(detail: { files: File[]; reason: SFilePickerRejectReason }) => void` | 제한 초과 거부 (sdReject) |
+
+## Dependencies
+
+### Used by
+
+ - [SKeyValueTable](../SKeyValueTable)
+
+### Depends on
+
+- [SChip](../SChip)
+- [SField](../SField)
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SFilePicker --> SChip
+  SFilePicker --> SField
+  SFilePicker --> SGhostButton
+  SFilePicker --> SIcon
+  SKeyValueTable --> SFilePicker
+  style SFilePicker fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SForm/README.md

@@ -0,0 +1,31 @@
+# SForm
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SForm
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `formClass?` | `string` | — | form 엘리먼트에 추가할 클래스 (sd-form formClass 대응) |
+| `children?` | `ReactNode` | — |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onSubmit` | `() => void` | 모든 필드 검증 통과 후 발생 (sd-form sdSubmit 대응) |
+| `onValidationError` | `(error: SFormValidationError) => void` | 검증 실패 시 실패한 필드 name 목록 전달 (sd-form sdValidationError 대응) |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `validate` | `() => boolean` | 등록된 모든 필드를 검증하고 통과 여부를 반환 |
+| `resetValidation` | `() => void` | 모든 필드의 검증 상태만 초기화 (값은 소비자 소유) |
+| `reset` | `() => void` | resetValidation 별칭 — sd-form sdReset 대응. 값 리셋은 소비자(value/onChange) 책임 |
+| `focusFirstInvalid` | `() => void` | 첫 번째 실패 필드로 포커스 이동 |
+

package/dist/components/SGhostButton/README.md

@@ -0,0 +1,76 @@
+# SGhostButton
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SGhostButton
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | `SIconName` | — | 표시할 아이콘명 (필수) |
+| `size?` | `SGhostButtonSize` | `'sm'` | 버튼 크기 |
+| `intent?` | `SGhostButtonIntent` | `'default'` | 색상 의도 |
+| `ariaLabel?` | `string` | `''` | 스크린리더용 접근성 레이블 |
+| `ariaPressed?` | `boolean` | — | 토글 버튼일 때 눌림 상태 (aria-pressed). 미지정 시 속성 자체를 내보내지 않는다. |
+| `tooltipText?` | `string` | — | 호버 시 표시할 툴팁 텍스트 |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `anchorClassName?` | `string` | — | tooltip anchor wrapper 클래스. tooltipText가 있을 때 위치 조정용으로 사용합니다. |
+| `anchorStyle?` | `CSSProperties` | — | tooltip anchor wrapper 스타일. tooltipText가 있을 때 위치 조정용으로 사용합니다. |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onClick` | `(e: MouseEvent<HTMLButtonElement>) => void` | 클릭 (sdClick) |
+
+## Dependencies
+
+### Used by
+
+ - [SBarcodeInput](../SBarcodeInput)
+ - [SCalendar](../SCalendar)
+ - [SChip](../SChip)
+ - [SDateRangePicker](../SDateRangePicker)
+ - [SFilePicker](../SFilePicker)
+ - [SGnb](../SGnb)
+ - [SGuide](../SGuide)
+ - [SInput](../SInput)
+ - [SModalContainer](../SModalContainer)
+ - [SPopover](../SPopover)
+ - [SSelect](../SSelect)
+ - [STimePicker](../STimePicker)
+ - [STimeRangePicker](../STimeRangePicker)
+ - [SToast](../SToast)
+ - [STooltip](../STooltip)
+
+### Depends on
+
+- [SIcon](../SIcon)
+- [STag](../STag)
+
+### Graph
+
+```mermaid
+graph TD;
+  SGhostButton --> SIcon
+  SGhostButton --> STag
+  SBarcodeInput --> SGhostButton
+  SCalendar --> SGhostButton
+  SChip --> SGhostButton
+  SDateRangePicker --> SGhostButton
+  SFilePicker --> SGhostButton
+  SGnb --> SGhostButton
+  SGuide --> SGhostButton
+  SInput --> SGhostButton
+  SModalContainer --> SGhostButton
+  SPopover --> SGhostButton
+  SSelect --> SGhostButton
+  STimePicker --> SGhostButton
+  STimeRangePicker --> SGhostButton
+  SToast --> SGhostButton
+  STooltip --> SGhostButton
+  style SGhostButton fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SGnb/README.md

@@ -0,0 +1,56 @@
+# SGnb
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SGnb
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type?` | `SGnbType` | — | 메뉴 스타일: box(라운드) / belt(풀폭 행). 미지정 시 SLayout 의 type 을 따른다. |
+| `header?` | `SGnbHeader` | — | 상단바 구조: fix(GNB 폭 고정) / full(레이아웃 전폭). 미지정 시 SLayout 의 header 를 따른다. 단, useRail 이고 레일에 children 없는 아이템이 있으면 메뉴 폭이 출렁이므로 full 로 강제된다. |
+| `color?` | `SGnbColor` | `'light'` | 색상 테마: light / dark |
+| `items` | `SGnbMenuItem[]` | — | 메뉴 트리 (depth1 → depth2 → depth3). useRail 이면 첫 depth 가 레일이 되고 그 children 이 depth1 이 된다. |
+| `useRail?` | `boolean` | — | 좌측 레일 사용 여부. 켜면 items 의 첫 depth 가 아이콘+라벨 버튼의 세로 레일로 서고, 선택된 레일 아이템의 children 이 오른쪽 메뉴 패널에 깔린다. 미지정 시 SLayout 의 useRail 을 따른다. children 없는 레일 아이템이 활성이면 메뉴 패널은 렌더되지 않고 레일만 남는다. |
+| `value?` | `string` | `''` | 현재 선택된 아이템 value |
+| `folded?` | `boolean` | — | 접힘(레일) 상태. 미지정 시 SLayout 의 folded 를 따른다. |
+| `logo?` | `ReactNode` | — | 상단바 로고 영역 (slot) |
+| `railFooter?` | `ReactNode` | — | 레일 하단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 하단에 붙어 고정된다. useRail 일 때만 렌더된다. |
+| `menuFooter?` | `ReactNode` | — | 메뉴 하단 고정 슬롯. 메뉴 아이템이 많아 넘치면 메뉴 목록(ul)만 스크롤되고 이 슬롯은 메뉴 하단에 붙어 고정된다. 메뉴가 렌더될 때만(showMenu) 나타난다. |
+| `foldedFooter?` | `ReactNode` | — | 접힘(fix 레일) 하단 고정 슬롯. 접으면 본문이 빠져나가며 rail/menu footer 도 사라지므로, 48px 폴드 레일 바닥에 붙는 별도 슬롯이다. header="fix" 로 접혔을 때만 나타난다. |
+| `ariaLabel?` | `string` | `'global navigation'` | 메뉴 landmark(nav) 의 접근성 레이블. 한 화면에 nav 가 여럿일 때 구분한다. |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: string) => void` | 선택 변경 (sdUpdate) |
+| `onRailChange` | `(value: string) => void` | 레일 선택 변경. 레일 아이템을 눌러 패널이 바뀔 때 알린다(선택 상태는 SGnb 가 자체 관리). |
+| `onFoldChange` | `(folded: boolean) => void` | 접힘 토글 (sdFoldChange) |
+| `onLauncherClick` | `() => void` | 앱런처(그리드) 버튼 클릭. 미지정 시 런처 버튼을 렌더하지 않는다. 접힘 레일(fix)에는 폴드 버튼만 남으므로 표시되지 않는다. |
+
+## Dependencies
+
+### Used by
+
+ - [SLayout](../SLayout)
+
+### Depends on
+
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+- [SLayout](../SLayout)
+- [STag](../STag)
+
+### Graph
+
+```mermaid
+graph TD;
+  SGnb --> SGhostButton
+  SGnb --> SIcon
+  SGnb --> SLayout
+  SGnb --> STag
+  SLayout --> SGnb
+  style SGnb fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SGuide/README.md

@@ -0,0 +1,34 @@
+# SGuide
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SGuide
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type?` | `SGuideType` | `'tip'` | 가이드 타입 (tip: 팝업, notion: 외부 링크) |
+| `label?` | `string` | `''` | 버튼 레이블 (없으면 type 기본값) |
+| `message?` | `SGuideMessage` | `''` | 팝업 메시지 (배열이면 리스트, 중첩 배열이면 depth 표현) |
+| `url?` | `string` | `''` | notion 타입 클릭 시 이동 URL |
+| `popupTitle?` | `string` | `''` | 팝업 제목 (없으면 type 기본값) |
+| `popupWidth?` | `number` | — | 팝업 너비 (px, 기본 426) |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+## Dependencies
+
+### Depends on
+
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SGuide --> SGhostButton
+  SGuide --> SIcon
+  style SGuide fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SIcon/README.md

@@ -0,0 +1,91 @@
+# SIcon
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SIcon
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `SIconName` | — | 아이콘명 |
+| `size?` | `number \| string` | `24` | 아이콘 크기(px 또는 CSS 길이) |
+| `color?` | `SColor` | — | 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상. 미지정 시 currentColor 상속 |
+| `rotate?` | `0 \| 90 \| 180 \| 270` | — | 회전 각도 |
+| `label?` | `string` | — | 접근성 라벨. 없으면 aria-hidden 처리 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+## Dependencies
+
+### Used by
+
+ - [SButton](../SButton)
+ - [SCallout](../SCallout)
+ - [SCheckbox](../SCheckbox)
+ - [SChipInput](../SChipInput)
+ - [SConfirmModal](../SConfirmModal)
+ - [SDatePicker](../SDatePicker)
+ - [SDateRangePicker](../SDateRangePicker)
+ - [SDraggableItem](../SDraggableItem)
+ - [SDropdownButton](../SDropdownButton)
+ - [SExpansionItem](../SExpansionItem)
+ - [SField](../SField)
+ - [SFilePicker](../SFilePicker)
+ - [SGhostButton](../SGhostButton)
+ - [SGnb](../SGnb)
+ - [SGuide](../SGuide)
+ - [SKeyValueTable](../SKeyValueTable)
+ - [SList](../SList)
+ - [SLoadingModal](../SLoadingModal)
+ - [SNumberInput](../SNumberInput)
+ - [SPagination](../SPagination)
+ - [SPopover](../SPopover)
+ - [SSectionHeaderCard](../SSectionHeaderCard)
+ - [SSelect](../SSelect)
+ - [SStepper](../SStepper)
+ - [STable](../STable)
+ - [STag](../STag)
+ - [STextLink](../STextLink)
+ - [STimePicker](../STimePicker)
+ - [STimeRangePicker](../STimeRangePicker)
+ - [SToast](../SToast)
+ - [STooltip](../STooltip)
+
+### Graph
+
+```mermaid
+graph TD;
+  SButton --> SIcon
+  SCallout --> SIcon
+  SCheckbox --> SIcon
+  SChipInput --> SIcon
+  SConfirmModal --> SIcon
+  SDatePicker --> SIcon
+  SDateRangePicker --> SIcon
+  SDraggableItem --> SIcon
+  SDropdownButton --> SIcon
+  SExpansionItem --> SIcon
+  SField --> SIcon
+  SFilePicker --> SIcon
+  SGhostButton --> SIcon
+  SGnb --> SIcon
+  SGuide --> SIcon
+  SKeyValueTable --> SIcon
+  SList --> SIcon
+  SLoadingModal --> SIcon
+  SNumberInput --> SIcon
+  SPagination --> SIcon
+  SPopover --> SIcon
+  SSectionHeaderCard --> SIcon
+  SSelect --> SIcon
+  SStepper --> SIcon
+  STable --> SIcon
+  STag --> SIcon
+  STextLink --> SIcon
+  STimePicker --> SIcon
+  STimeRangePicker --> SIcon
+  SToast --> SIcon
+  STooltip --> SIcon
+  style SIcon fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SInput/README.md

@@ -0,0 +1,66 @@
+# SInput
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SInput
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string \| number` | — | 값 (제어) |
+| `type?` | `'text' \| 'password' \| 'email' \| 'number' \| 'tel' \| 'search' \| 'url'` | `'text'` | 입력 타입 |
+| `size?` | `SFieldSize` | `'sm'` | 크기 |
+| `icon?` | `SIconName` | — | 좌측 아이콘명 |
+| `iconColor?` | `SColor` | — | 좌측 아이콘 색상 |
+| `prefix?` | `ReactNode` | — | 입력 앞(좌측) 커스텀 노드 — 원본 slot="prefix" |
+| `suffix?` | `ReactNode` | — | 입력 뒤(우측) 커스텀 노드 — 원본 slot="suffix" |
+| `clearable?` | `boolean` | `false` | 지우기 버튼 |
+| `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 자동 검증 |
+| `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
+| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
+| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
+| `inputClass?` | `string` | — | 내부 input 요소 className |
+| `inputStyle?` | `CSSProperties` | — | 내부 input 요소 style |
+| `label?` | `string` | — |  |
+| `labelWidth?` | `number \| string` | — |  |
+| `labelTooltip?` | `string` | — | 레이블 툴팁 텍스트 |
+| `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |
+| `hint?` | `string` | — |  |
+| `error?` | `boolean` | — |  |
+| `errorMessage?` | `string` | — |  |
+| `addonLabel?` | `string` | — |  |
+| `addonAlign?` | `SFieldAddonAlign` | — | 어드온 정렬 |
+| `width?` | `number \| string` | — |  |
+| `disabled?` | `boolean` | `false` |  |
+| `readOnly?` | `boolean` | `false` |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: string) => void` | 값 변경 (sdUpdate) — 문자열 전달 |
+| `onChange` | `InputHTMLAttributes<HTMLInputElement>['onChange']` | 네이티브 onChange (form-agnostic 연동용, RHF 등) |
+
+## Dependencies
+
+### Used by
+
+ - [SKeyValueTable](../SKeyValueTable)
+
+### Depends on
+
+- [SField](../SField)
+- [SGhostButton](../SGhostButton)
+
+### Graph
+
+```mermaid
+graph TD;
+  SInput --> SField
+  SInput --> SGhostButton
+  SKeyValueTable --> SInput
+  style SInput fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SKeyValueTable/README.md

@@ -0,0 +1,59 @@
+# SKeyValueTable
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SKeyValueTable
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `fields?` | `SKeyValueField[][]` | `[]` | 2차원 배열. row → [th|td] 필드들 |
+| `values?` | `Record<string, unknown>` | `{}` | field name을 key로 하는 값 객체 (`{ [name]: value }`). 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다. `onChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다. |
+| `search?` | `boolean` | `false` | 우측 검색 패널 |
+| `radius?` | `'default' \| 'useTop' \| 'full'` | `'default'` | border-radius 제어 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onChange` | `(detail: SKeyValueChangeDetail) => void` | 값 변경 (sdChange) |
+| `onSearch` | `() => void` | 검색 클릭 (sdSearch) |
+
+## Dependencies
+
+### Depends on
+
+- [SButton](../SButton)
+- [SCheckbox](../SCheckbox)
+- [SDatePicker](../SDatePicker)
+- [SDateRangePicker](../SDateRangePicker)
+- [SFilePicker](../SFilePicker)
+- [SIcon](../SIcon)
+- [SInput](../SInput)
+- [SNumberInput](../SNumberInput)
+- [SRadio](../SRadio)
+- [SSelect](../SSelect)
+- [STextarea](../STextarea)
+- [STooltip](../STooltip)
+
+### Graph
+
+```mermaid
+graph TD;
+  SKeyValueTable --> SButton
+  SKeyValueTable --> SCheckbox
+  SKeyValueTable --> SDatePicker
+  SKeyValueTable --> SDateRangePicker
+  SKeyValueTable --> SFilePicker
+  SKeyValueTable --> SIcon
+  SKeyValueTable --> SInput
+  SKeyValueTable --> SNumberInput
+  SKeyValueTable --> SRadio
+  SKeyValueTable --> SSelect
+  SKeyValueTable --> STextarea
+  SKeyValueTable --> STooltip
+  style SKeyValueTable fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SLayout/README.md

@@ -0,0 +1,42 @@
+# SLayout
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SLayout
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type?` | `SLayoutType` | `'box'` | 메뉴 스타일: box(라운드) / belt(풀폭 행). 자식 SGnb 가 이 값을 따른다. |
+| `header?` | `SLayoutHeader` | `'fix'` | 레이아웃 구조: fix(가로 분할) / full(풀폭 상단바). 자식 SGnb·SPage 가 이 값을 따른다. |
+| `useRail?` | `boolean` | `false` | GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, full 의 메뉴 열 폭도 레일만큼 넓어진다. 레일에 children 없는 아이템이 있으면 SGnb 가 header 를 full 로 강제하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다. |
+| `folded?` | `boolean` | — | GNB 접힘 상태 (controlled) |
+| `defaultFolded?` | `boolean` | `false` | GNB 초기 접힘 상태 (uncontrolled) |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onFoldedChange` | `(folded: boolean) => void` | 접힘 상태 변경 |
+
+## Dependencies
+
+### Used by
+
+ - [SGnb](../SGnb)
+ - [SPage](../SPage)
+
+### Depends on
+
+- [SGnb](../SGnb)
+
+### Graph
+
+```mermaid
+graph TD;
+  SLayout --> SGnb
+  SGnb --> SLayout
+  SPage --> SLayout
+  style SLayout fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SLinearProgress/README.md

@@ -0,0 +1,17 @@
+# SLinearProgress
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SLinearProgress
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `number` | `0` | 진행률 (0–100) |
+| `type?` | `SLinearProgressType` | `'primary'` | 색상 타입 |
+| `indeterminate?` | `boolean` | `false` | 진행률 없이 무한 애니메이션 |
+| `label?` | `string` | — | 하단 레이블 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+

package/dist/components/SList/README.md

@@ -0,0 +1,14 @@
+# SList
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SList
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children?` | `ReactNode` | — | 리스트 컨테이너 내부에 렌더링할 내용 |
+| `useGap?` | `boolean` | `false` | 리스트 아이템 사이 gap 토큰 적용 여부 |
+| `usePadding?` | `boolean` | `false` | 리스트 컨테이너 padding 토큰 적용 여부 |
+

package/dist/components/SListItem/README.md

@@ -0,0 +1,19 @@
+# SListItem
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SListItem
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `SListItemSlot` | — | 리스트 아이템 제목 |
+| `depth?` | `1 \| 2 \| 3` | `1` | 중첩 단계. Figma 기준 1~3단계 |
+| `leading?` | `SListItemSlot` | — | 타이틀 앞에 표시할 아이콘/콘텐츠 |
+| `trailing?` | `SListItemSlot` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
+| `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
+| `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
+| `dense?` | `boolean` | `false` | 조밀한 높이 사용 여부 |
+| `disabled?` | `boolean` | `false` | 비활성 상태 여부 |
+