sellmate-design-system-react 3.0.0 → 3.1.0

package/dist/components/STableBar/README.md

@@ -0,0 +1,28 @@
+# STableBar
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### STableBar
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `total?` | `number` | — | 전체 건수. 지정하면 "총 N 건" 을 표시한다 (천단위 구분 자동) |
+| `selected?` | `number` | — | 선택 건수. 지정하면 "N건 선택" 을 표시한다 |
+| `actions?` | `ReactNode` | — | 구분선 오른쪽 좌측 액션 영역 |
+| `rightActions?` | `ReactNode` | — | 우측 정렬 액션 영역 |
+
+## Dependencies
+
+### Depends on
+
+- [SDivider](../SDivider)
+
+### Graph
+
+```mermaid
+graph TD;
+  STableBar --> SDivider
+  style STableBar fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/STabs/README.md

@@ -0,0 +1,37 @@
+# STabs
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### STabs
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | — | 현재 선택된 탭 value |
+| `tabs` | `STabOption[]` | — | 탭 옵션 목록 |
+| `size?` | `STabSize` | `'md'` | 탭 크기 (main 전용) |
+| `isSub?` | `boolean` | `false` | 서브 탭(밑줄형) 스타일 |
+| `vertical?` | `boolean` | `false` | 세로 배치 (sub 전용 — main 폴더형은 항상 가로) |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: string) => void` | 탭 변경 (sdUpdate) |
+
+## Dependencies
+
+### Depends on
+
+- [STag](../STag)
+
+### Graph
+
+```mermaid
+graph TD;
+  STabs --> STag
+  style STabs fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/STag/README.md

@@ -0,0 +1,44 @@
+# STag
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### STag
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `shape?` | `STagShape` | `'square'` | 모양 |
+| `size?` | `STagSize` | `'sm'` | 크기 |
+| `color?` | `STagColor` | `'grey'` | 색상 |
+| `label?` | `string` | `''` | 레이블 텍스트 |
+| `icon?` | `SIconName` | — | 아이콘명 |
+| `iconLeft?` | `boolean` | `true` | 아이콘을 레이블 왼쪽에 배치 |
+| `width?` | `string \| number` | — | 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기 |
+
+## Dependencies
+
+### Used by
+
+ - [SConfirmModal](../SConfirmModal)
+ - [SGhostButton](../SGhostButton)
+ - [SGnb](../SGnb)
+ - [STabs](../STabs)
+ - [STextLink](../STextLink)
+
+### Depends on
+
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  STag --> SIcon
+  SConfirmModal --> STag
+  SGhostButton --> STag
+  SGnb --> STag
+  STabs --> STag
+  STextLink --> STag
+  style STag fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/STextLink/README.md

@@ -0,0 +1,48 @@
+# STextLink
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### STextLink
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label?` | `string` | `''` | 레이블 |
+| `icon?` | `SIconName` | — | 좌측 아이콘 |
+| `iconColor?` | `SColor` | — | 좌측 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 |
+| `labelClass?` | `string` | — | 레이블 span에 추가할 클래스 |
+| `rightArrow?` | `STextLinkArrow` | `'none'` | 우측 화살표 |
+| `underline?` | `boolean` | `false` | 밑줄 여부 |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `size?` | `STextLinkSize` | `'sm'` | 크기 |
+| `tooltipText?` | `string` | — | 호버 시 표시할 툴팁 텍스트 (회색 STag 스타일) |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onClick` | `() => void` |  |
+
+## Dependencies
+
+### Used by
+
+ - [SChipInput](../SChipInput)
+ - [SPopover](../SPopover)
+
+### Depends on
+
+- [SIcon](../SIcon)
+- [STag](../STag)
+
+### Graph
+
+```mermaid
+graph TD;
+  STextLink --> SIcon
+  STextLink --> STag
+  SChipInput --> STextLink
+  SPopover --> STextLink
+  style STextLink fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/STextarea/README.md

@@ -0,0 +1,60 @@
+# STextarea
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### STextarea
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string` | — | 값 (제어) |
+| `rows?` | `number` | `3` | 행 수 |
+| `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 자동 검증 |
+| `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
+| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
+| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
+| `textareaClass?` | `string` | — | 내부 textarea 요소 className |
+| `textareaStyle?` | `CSSProperties` | — | 내부 textarea 요소 style |
+| `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` | — |  |
+| `disabled?` | `boolean` | `false` |  |
+| `readOnly?` | `boolean` | `false` |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: string) => void` | 값 변경 (sdUpdate) |
+| `onChange` | `TextareaHTMLAttributes<HTMLTextAreaElement>['onChange']` | 네이티브 onChange (form-agnostic) |
+
+## Dependencies
+
+### Used by
+
+ - [SKeyValueTable](../SKeyValueTable)
+
+### Depends on
+
+- [SField](../SField)
+
+### Graph
+
+```mermaid
+graph TD;
+  STextarea --> SField
+  SKeyValueTable --> STextarea
+  style STextarea fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/STimePicker/README.md

@@ -0,0 +1,65 @@
+# STimePicker
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### STimePicker
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string \| null` | — | 선택 시간 (HH:mm) |
+| `type?` | `STimePickerType` | `'default'` | 표시 타입: default(24시간) / midday(오전·오후) |
+| `size?` | `STimePickerSize` | `'sm'` |  |
+| `placeholder?` | `string` | `'00:00'` |  |
+| `disabled?` | `boolean` | `false` |  |
+| `clearable?` | `boolean` | `false` |  |
+| `useMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
+| `minuteStep?` | `number` | `1` |  |
+| `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` | `(time: string \| null) => void` | 선택 변경 (sdUpdate) |
+| `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 (sdDropDownShow) |
+
+## Dependencies
+
+### Used by
+
+ - [STimeRangePicker](../STimeRangePicker)
+
+### Depends on
+
+- [SField](../SField)
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  STimePicker --> SField
+  STimePicker --> SGhostButton
+  STimePicker --> SIcon
+  STimeRangePicker --> STimePicker
+  style STimePicker fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/STimeRangePicker/README.md

@@ -0,0 +1,63 @@
+# 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
+```

package/dist/components/SToast/README.md

@@ -0,0 +1,70 @@
+# SToast
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SToastContainer
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `position?` | `SToastPosition` | `'bottom-center'` |  |
+| `maxVisible?` | `number` | `3` |  |
+| `defaultDuration?` | `number` | `4000` | 자동 닫힘 기본 지연(ms) |
+| `zIndex?` | `number` | `1100` | 스택 z-index. 기본값(1100)은 모달(1000/1001) 위 — 토스트는 전역 알림이라 항상 최상단 |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onShow` | `(payload: { id: string }) => void` | 토스트가 표시될 때 (sdToastShow) |
+| `onDismiss` | `(payload: { id: string }) => void` | 토스트가 제거될 때 (sdToastDismiss) |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `create` | `(options: SToastNotifyOptions) => string` |  |
+| `dismiss` | `(id: string) => void` |  |
+| `dismissAll` | `() => void` |  |
+
+### SToast
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon?` | `SIconName` | — | 좌측 아이콘 |
+| `message` | `string` | — | 메시지 |
+| `link?` | `string` | — | 우측 링크 URL |
+| `linkLabel?` | `string` | — | 링크 레이블 (없으면 URL) |
+| `buttonLabel?` | `string` | — | 우측 버튼 레이블 |
+| `useClose?` | `boolean` | `false` | 닫기 버튼 표시 |
+| `type?` | `SToastType` | `'default'` | 타입(색상/프리셋) |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onClose` | `() => void` | 닫기 (sdClose) |
+| `onButtonClick` | `(e: MouseEvent) => void` | 버튼 클릭 (sdButtonClick) |
+
+## Dependencies
+
+### Depends on
+
+- [SButton](../SButton)
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SToast --> SButton
+  SToast --> SGhostButton
+  SToast --> SIcon
+  style SToast fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SToggle/README.md

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

package/dist/components/STooltip/README.md

@@ -0,0 +1,57 @@
+# STooltip
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### STooltip
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `content?` | `ReactNode` | — | 툴팁 본문 (ReactNode). message 보다 우선 |
+| `message?` | `string[]` | `[]` | 툴팁 본문 줄 목록 (각 항목이 한 줄, HTML 문자열 허용 — innerHTML 렌더링) |
+| `trigger?` | `STooltipTrigger` | `'hover'` | 트리거 방식 |
+| `placement?` | `STooltipPlacement` | `'top'` | 표시 방향 |
+| `tooltipType?` | `STooltipType` | `'default'` | 배경/텍스트 색상 타입 |
+| `useClose?` | `boolean` | `false` | 우측 상단 닫기 버튼. 켜면 자동 닫힘이 비활성화되고 X(또는 hide())로만 닫힘 (hover·click 공통) |
+| `disabled?` | `boolean` | `false` | 비활성 — 트리거만 렌더하고 툴팁을 열지 않음 |
+| `children?` | `ReactNode` | — | 커스텀 트리거. 없으면 아이콘 트리거를 렌더 |
+| `icon?` | `SIconName` | `'helpOutline'` | 기본(아이콘) 트리거 설정 |
+| `iconSize?` | `number` | `12` |  |
+| `color?` | `SColor` | `'#01BB4B'` | 트리거 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 |
+| `ariaLabel?` | `string` | — | 접근성 레이블 |
+| `className?` | `string` | — |  |
+| `triggerClassName?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `show` | `() => void` | 툴팁을 표시합니다. |
+| `hide` | `() => void` | 툴팁을 숨깁니다. |
+
+## Dependencies
+
+### Used by
+
+ - [SField](../SField)
+ - [SKeyValueTable](../SKeyValueTable)
+ - [SList](../SList)
+
+### Depends on
+
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  STooltip --> SGhostButton
+  STooltip --> SIcon
+  SField --> STooltip
+  SKeyValueTable --> STooltip
+  SList --> STooltip
+  style STooltip fill:#f9f,stroke:#333,stroke-width:4px
+```