sellmate-design-system-react 3.0.0 → 3.1.0

package/dist/components/SDatePicker/README.md

@@ -0,0 +1,62 @@
+# SDatePicker
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SDatePicker
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string \| null` | — | 선택 날짜 (YYYY-MM-DD) |
+| `size?` | `SDatePickerSize` | `'sm'` |  |
+| `placeholder?` | `string` | `'YYYY-MM-DD'` |  |
+| `selectable?` | `[string, string]` | — | 선택 가능 범위 [시작, 종료] |
+| `disabled?` | `boolean` | `false` |  |
+| `width?` | `number \| string` | — |  |
+| `name?` | `string` | — |  |
+| `rules?` | `Rule[]` | — |  |
+| `status?` | `SFieldStatus` | — |  |
+| `label?` | `string` | — |  |
+| `labelWidth?` | `number \| string` | — |  |
+| `icon?` | `SIconName` | — |  |
+| `iconColor?` | `SColor` | — |  |
+| `labelTooltip?` | `string` | — |  |
+| `labelTooltipProps?` | `Partial<STooltipProps>` | — |  |
+| `addonLabel?` | `string` | — |  |
+| `addonAlign?` | `SFieldAddonAlign` | — |  |
+| `hint?` | `string` | — |  |
+| `error?` | `boolean` | — |  |
+| `errorMessage?` | `string` | — |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(date: string) => void` | 선택 변경 (sdUpdate) |
+| `onViewChange` | `(view: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
+
+## Dependencies
+
+### Used by
+
+ - [SKeyValueTable](../SKeyValueTable)
+
+### Depends on
+
+- [SCalendar](../SCalendar)
+- [SField](../SField)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SDatePicker --> SCalendar
+  SDatePicker --> SField
+  SDatePicker --> SIcon
+  SKeyValueTable --> SDatePicker
+  style SDatePicker fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SDateRangePicker/README.md

@@ -0,0 +1,64 @@
+# SDateRangePicker
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SDateRangePicker
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `SDateRangeValue` | — |  |
+| `size?` | `SDateRangePickerSize` | `'sm'` |  |
+| `placeholder?` | `string` | `'YYYY-MM-DD ~ YYYY-MM-DD'` |  |
+| `selectable?` | `[string, string]` | — |  |
+| `maxRange?` | `number` | — | 최대 선택 일수 |
+| `useTimePicker?` | `boolean` | `false` | 시간(시:분) 선택 푸터 사용 여부. true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시된다. |
+| `disabled?` | `boolean` | `false` |  |
+| `width?` | `number \| string` | — |  |
+| `name?` | `string` | — |  |
+| `rules?` | `Rule[]` | — |  |
+| `status?` | `SFieldStatus` | — |  |
+| `label?` | `string` | — |  |
+| `labelWidth?` | `number \| string` | — |  |
+| `icon?` | `SIconName` | — |  |
+| `iconColor?` | `SColor` | — |  |
+| `labelTooltip?` | `string` | — |  |
+| `labelTooltipProps?` | `Partial<STooltipProps>` | — |  |
+| `addonLabel?` | `string` | — |  |
+| `addonAlign?` | `SFieldAddonAlign` | — |  |
+| `hint?` | `string` | — |  |
+| `error?` | `boolean` | — |  |
+| `errorMessage?` | `string` | — |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(range: SDateRangeValue) => void` | 선택 변경 (sdUpdate) — [start, end] |
+| `onViewChange` | `(view: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
+
+## Dependencies
+
+### Used by
+
+ - [SKeyValueTable](../SKeyValueTable)
+
+### Depends on
+
+- [SField](../SField)
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SDateRangePicker --> SField
+  SDateRangePicker --> SGhostButton
+  SDateRangePicker --> SIcon
+  SKeyValueTable --> SDateRangePicker
+  style SDateRangePicker fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SDivider/README.md

@@ -0,0 +1,25 @@
+# SDivider
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SDivider
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `vertical?` | `boolean` | `false` | true면 수직 분할선, false면 수평 분할선 |
+
+## Dependencies
+
+### Used by
+
+ - [STableBar](../STableBar)
+
+### Graph
+
+```mermaid
+graph TD;
+  STableBar --> SDivider
+  style SDivider fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SDraggableItem/README.md

@@ -0,0 +1,40 @@
+# SDraggableItem
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SDraggableItem
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `SDraggableItemSlot` | — | 드래그 아이템 제목 |
+| `trailing?` | `SDraggableItemSlot` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
+| `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
+| `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
+| `selected?` | `boolean` | `false` | 선택 상태 여부 |
+| `dense?` | `boolean` | `false` | 조밀한 높이 사용 여부 |
+| `disabled?` | `boolean` | `false` | 비활성 상태 여부 |
+| `dragOverlay?` | `boolean` | `true` | 드래그 시 마우스를 따라가는 overlay 표시 여부 |
+| `dragOverlayOpacity?` | `number` | `0.75` | 드래그 overlay 투명도 |
+| `dragHandleProps?` | `HTMLAttributes<HTMLDivElement>` | — | 드래그 핸들에 전달할 속성 |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onDragHandleMouseDown` | `(event: MouseEvent<HTMLDivElement>) => void` | 드래그 핸들 mouse down 이벤트 |
+
+## Dependencies
+
+### Depends on
+
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SDraggableItem --> SIcon
+  style SDraggableItem fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SDropdownButton/README.md

@@ -0,0 +1,50 @@
+# SDropdownButton
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SDropdownButton
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color?` | `SButtonColor` | `'primary'` | 버튼 색상 |
+| `outline?` | `boolean` | `false` | 아웃라인(테두리) 스타일 |
+| `size?` | `SDropdownButtonSize` | `'sm'` | 크기 (lg 미지원) |
+| `label?` | `string` | `''` | 버튼 레이블 |
+| `items?` | `SDropdownButtonItem[]` | `[]` | 메뉴 아이템 목록 |
+| `split?` | `boolean` | `false` | split 모드 — 레이블 버튼과 토글 분리 |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onItemClick` | `(value: string \| number) => void` | 메뉴 아이템 선택 (sdClick) |
+| `onLabelClick` | `() => void` | split 레이블 버튼 클릭 (sdButtonClick) |
+| `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 (sdDropDownShow) |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `open` | `() => void` | 드롭다운 열기 (sdOpen) |
+| `close` | `() => void` | 드롭다운 닫기 (sdClose) |
+
+## Dependencies
+
+### Depends on
+
+- [SButton](../SButton)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SDropdownButton --> SButton
+  SDropdownButton --> SIcon
+  style SDropdownButton fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SExpansionItem/README.md

@@ -0,0 +1,40 @@
+# SExpansionItem
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SExpansionItem
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `ReactNode` | — |  |
+| `depth?` | `1 \| 2 \| 3` | `1` | 중첩 단계. Figma 기준 1~3단계 |
+| `leading?` | `ReactNode \| SExpansionItemRenderProp` | — | 타이틀 앞에 표시할 아이콘/콘텐츠 |
+| `trailing?` | `ReactNode` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
+| `bodyPadding?` | `boolean` | `true` | body 내부 패딩 사용 여부 |
+| `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
+| `expanded?` | `boolean` | — |  |
+| `defaultExpanded?` | `boolean` | `false` |  |
+| `dense?` | `boolean` | `false` |  |
+| `disabled?` | `boolean` | `false` |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onToggle` | `(expanded: boolean, event: MouseEvent<HTMLButtonElement>) => void` |  |
+
+## Dependencies
+
+### Depends on
+
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SExpansionItem --> SIcon
+  style SExpansionItem fill:#f9f,stroke:#333,stroke-width:4px
+```

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
+```