sellmate-design-system-react 2.2.0 → 3.1.0

package/dist/components/SCard/README.md

@@ -0,0 +1,12 @@
+# SCard
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SCard
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `bordered?` | `boolean` | `false` | 테두리 표시 여부 |
+

package/dist/components/SCheckbox/README.md

@@ -0,0 +1,44 @@
+# SCheckbox
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SCheckbox
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `SCheckboxValue` | `false` | 선택 상태. boolean(단일) / 배열(그룹) / null(indeterminate) |
+| `val?` | `unknown` | — | 배열(그룹) 모드에서 이 체크박스의 값 |
+| `label?` | `string` | `''` | 라벨 |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `inverse?` | `boolean` | `false` | 어두운 배경용 흰색 스타일 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: boolean \| unknown[]) => void` | 값 변경 (sdUpdate) |
+
+## Dependencies
+
+### Used by
+
+ - [SKeyValueTable](../SKeyValueTable)
+ - [STable](../STable)
+
+### Depends on
+
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SCheckbox --> SIcon
+  SKeyValueTable --> SCheckbox
+  STable --> SCheckbox
+  style SCheckbox fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SChip/README.md

@@ -0,0 +1,57 @@
+# SChip
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SChip
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name?` | `string` | — | 폼 연동용 name |
+| `value?` | `string` | `''` | 칩 텍스트 값 |
+| `error?` | `boolean` | — | 에러 상태 |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `editable?` | `boolean` | `false` | 인라인 편집 가능 (기본값 false) |
+| `showRemove?` | `boolean` | `true` | 닫기 버튼 표시 |
+| `placeholder?` | `string` | `''` | 편집 중 placeholder |
+| `rules?` | `Rule[]` | — | 유효성 규칙 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: string) => void` | 편집 완료 (sdUpdate) |
+| `onRemove` | `() => void` | 삭제 (sdRemove) |
+| `onFocus` | `() => void` | 편집 진입 (sdFocus) |
+| `onBlur` | `() => void` | 편집 이탈 (sdBlur) |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `focus` | `() => void` | 편집 input에 포커스합니다. |
+| `getNativeElement` | `() => HTMLElement \| null` | 네이티브 편집 엘리먼트를 반환합니다. |
+
+## Dependencies
+
+### Used by
+
+ - [SChipInput](../SChipInput)
+ - [SFilePicker](../SFilePicker)
+
+### Depends on
+
+- [SGhostButton](../SGhostButton)
+
+### Graph
+
+```mermaid
+graph TD;
+  SChip --> SGhostButton
+  SChipInput --> SChip
+  SFilePicker --> SChip
+  style SChip fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SChipInput/README.md

@@ -0,0 +1,77 @@
+# SChipInput
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SChipInput
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `values?` | `string[]` | `[]` | 칩 값 목록 |
+| `errors?` | `boolean[] \| ((value: string) => boolean)` | `[]` | 칩별 에러 (배열 또는 판별 함수) |
+| `disabledChips?` | `boolean[] \| ((value: string) => boolean)` | `[]` | 칩별 비활성 (배열 또는 판별 함수) |
+| `size?` | `SChipInputSize` | `'sm'` |  |
+| `disabled?` | `boolean` | `false` |  |
+| `placeholder?` | `string` | `'태그 입력 (Enter로 등록 / 콤마로 구분 / 띄어쓰기 불가)'` |  |
+| `name?` | `string` | — |  |
+| `rules?` | `Rule[]` | — |  |
+| `error?` | `boolean` | — |  |
+| `useReset?` | `boolean` | `false` | 입력 초기화 버튼 표시 |
+| `maxCount?` | `number` | — | 최대 칩 개수 |
+| `metaPlacement?` | `SChipInputMetaPlacement` | `'end'` | 최대 개수·초기화 meta 위치 |
+| `duplicateLabel?` | `string` | — | 중복 에러 메시지 항목명 |
+| `suggestions?` | `string[]` | `[]` | 자동완성 후보 |
+| `loadingSuggestions?` | `boolean` | `false` |  |
+| `recommendedItems?` | `string[]` | `[]` | 추천 항목 (입력값 없을 때) |
+| `loadingRecommendedItems?` | `boolean` | `false` |  |
+| `dropdownMinWidth?` | `number \| string` | `200` | 드롭다운 최소 너비 (숫자=px) |
+| `label?` | `string` | — |  |
+| `labelWidth?` | `number \| string` | — |  |
+| `hint?` | `string` | — |  |
+| `errorMessage?` | `string` | — |  |
+| `width?` | `number \| string` | — |  |
+| `status?` | `SFieldStatus` | — |  |
+| `icon?` | `SIconName` | — |  |
+| `iconColor?` | `SColor` | — |  |
+| `labelTooltip?` | `string` | — |  |
+| `labelTooltipProps?` | `Partial<STooltipProps>` | — |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(values: string[]) => void` | 값 변경 (sdUpdate) — 전체 배열 |
+| `onInput` | `(value: string) => void` | 입력 중 문자열 변경 (sdInput) |
+| `onFocus` | `() => void` |  |
+| `onBlur` | `() => void` |  |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `focus` | `() => void` | 입력 필드에 포커스를 이동합니다. |
+
+## Dependencies
+
+### Depends on
+
+- [SChip](../SChip)
+- [SField](../SField)
+- [SIcon](../SIcon)
+- [SPortal](../SPortal)
+- [STextLink](../STextLink)
+
+### Graph
+
+```mermaid
+graph TD;
+  SChipInput --> SChip
+  SChipInput --> SField
+  SChipInput --> SIcon
+  SChipInput --> SPortal
+  SChipInput --> STextLink
+  style SChipInput fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SCircleProgress/README.md

@@ -0,0 +1,35 @@
+# SCircleProgress
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SCircleProgress
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `number` | `0` | 진행률 (0–100) |
+| `type?` | `SCircleProgressType` | `'primary'` | 색상 테마 |
+| `indeterminate?` | `boolean` | `false` | 불확정(스피너) 모드 — value 무시 |
+| `label?` | `string` | — | 하단 레이블 |
+| `innerValue?` | `boolean` | `false` | true면 퍼센트를 원 아래가 아닌 원 가운데에 표시 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+## Dependencies
+
+### Used by
+
+ - [SLoadingContainer](../SLoadingContainer)
+ - [SLoadingModal](../SLoadingModal)
+ - [STable](../STable)
+
+### Graph
+
+```mermaid
+graph TD;
+  SLoadingContainer --> SCircleProgress
+  SLoadingModal --> SCircleProgress
+  STable --> SCircleProgress
+  style SCircleProgress fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SConfirmModal/README.md

@@ -0,0 +1,61 @@
+# SConfirmModal
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SConfirmModal
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open?` | `boolean` | — |  |
+| `persistent?` | `boolean` | — | true면 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent) |
+| `type?` | `SConfirmModalType` | `'positive'` | 타입 (아이콘·메인버튼 색 결정) |
+| `modalTitle?` | `string` | `''` |  |
+| `titleClass?` | `string` | — | 제목 엘리먼트에 추가할 클래스 (sd-confirm-modal titleClass) |
+| `topMessage?` | `string[]` | `[]` | 콘텐츠 박스 상단 메시지 목록 (각 항목이 한 줄, HTML 문자열 허용 — innerHTML 렌더링) |
+| `bottomMessage?` | `string[]` | `[]` | 콘텐츠 박스 하단 메시지 목록 (각 항목이 한 줄, HTML 문자열 허용 — innerHTML 렌더링) |
+| `tagLabel?` | `string` | — | tag 슬롯 기본 태그 레이블 (tagSlot 미지정 시) |
+| `tagShape?` | `STagShape` | `'square'` | 태그 프리셋 (shape/size/color) — sd-confirm-modal tagPreset 대응 |
+| `tagSize?` | `STagSize` | `'sm'` |  |
+| `tagColor?` | `STagColor` | `'grey'` |  |
+| `slotLabel?` | `string` | — | 콘텐츠 박스에서 태그 오른쪽에 오는 텍스트 (optionSlot 미지정 시) |
+| `tagSlot?` | `ReactNode` | — | 콘텐츠 박스 tag 위치 커스텀 콘텐츠 (미지정 시 tagLabel 기반 STag) |
+| `optionSlot?` | `ReactNode` | — | 콘텐츠 박스에서 태그 오른쪽 커스텀 콘텐츠 (미지정 시 slotLabel 텍스트) |
+| `mainButtonLabel?` | `string` | `'확인'` | 메인 버튼 |
+| `mainButtonName?` | `ConfirmModalMainButton` | — | 확인 버튼 프리셋 (없으면 type에 따라 자동 결정) |
+| `subButtonLabel?` | `string` | — | 서브(취소) 버튼 |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onOpenChange` | `(open: boolean) => void` |  |
+| `onOk` | `() => void` | 확인 버튼 클릭 (sdOk) |
+| `onCancel` | `() => void` |  |
+| `onClose` | `() => void` | 닫기(X) 버튼 클릭 (sdClose) |
+
+## Dependencies
+
+### Used by
+
+ - [SModal](../SModal)
+
+### Depends on
+
+- [SButton](../SButton)
+- [SIcon](../SIcon)
+- [SModalContainer](../SModalContainer)
+- [STag](../STag)
+
+### Graph
+
+```mermaid
+graph TD;
+  SConfirmModal --> SButton
+  SConfirmModal --> SIcon
+  SConfirmModal --> SModalContainer
+  SConfirmModal --> STag
+  SModal --> SConfirmModal
+  style SConfirmModal fill:#f9f,stroke:#333,stroke-width:4px
+```

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