# STimeRangePicker

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

### STimeRangePicker

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value?` | `STimeRangeValue` | — | 선택 시간 범위 [시작, 종료] (HH:mm) |
| `type?` | `STimeRangePickerType` | `'default'` | 표시 타입: default(24시간) / midday(오전·오후) |
| `size?` | `STimeRangePickerSize` | `'sm'` |  |
| `placeholder?` | `string` | `'00:00 ~ 23:59'` |  |
| `disabled?` | `boolean` | `false` |  |
| `clearable?` | `boolean` | `false` |  |
| `useMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
| `minuteStep?` | `number` | `1` |  |
| `rangeOrder?` | `STimeRangePickerRangeOrder` | `'strict'` | 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. |
| `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: STimeRangeValue) => void` | 선택 변경 (sdUpdate) |
| `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 (sdDropDownShow) |

## Dependencies

### Depends on

- [SField](../SField)
- [SGhostButton](../SGhostButton)
- [SIcon](../SIcon)
- [STimePicker](../STimePicker)

### Graph

```mermaid
graph TD;
  STimeRangePicker --> SField
  STimeRangePicker --> SGhostButton
  STimeRangePicker --> SIcon
  STimeRangePicker --> STimePicker
  style STimeRangePicker fill:#f9f,stroke:#333,stroke-width:4px
```