# SExpansionItem

> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.

### SExpansionItem

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `ReactNode` | — |  |
| `supportingText?` | `ReactNode` | — | 제목을 보조하는 텍스트 |
| `supportingTextPosition?` | `SExpansionItemSupportingTextPosition` | `'right'` | 보조 텍스트 위치 |
| `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` |  |
| `selected?` | `boolean` | `false` |  |
| `interaction?` | `SExpansionItemInteraction` | — | hover/selected 상태에서 적용할 인터랙션 preset |
| `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
| `dense?` | `boolean` | `false` |  |
| `size?` | `SExpansionItemSize` | `'sm'` | 타이포그래피 크기 |
| `disabled?` | `boolean` | `false` |  |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onToggle` | `(expanded: boolean, event: MouseEvent<HTMLButtonElement>) => void` |  |

## Dependencies

### Used by

 - [SExpansionList](../SExpansionList)

### Depends on

- [SIcon](../SIcon)

### Graph

```mermaid
graph TD;
  SExpansionItem --> SIcon
  SExpansionList --> SExpansionItem
  style SExpansionItem fill:#f9f,stroke:#333,stroke-width:4px
```