sellmate-design-system-react 9.0.0-beta.2 → 9.0.0-beta.21

package/dist/components/SDatePicker/README.md

@@ -2,18 +2,40 @@
 
 > 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
 
+### SDatePickerMonthListbox
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string \| null` | — | 선택 월 (YYYY-MM) |
+| `anchorYear?` | `number` | — | 연도 리스트가 처음 열릴 때 중앙에 둘 연도. 기본값은 올해 |
+| `selectable?` | `[string, string]` | — | 선택 가능 범위 [시작, 종료] |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: string) => void` |  |
+| `onMonthSelect` | `(value: string) => void` | 월 컬럼에서 월을 선택했을 때 호출 |
+
 ### SDatePicker
 
 #### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `value?` | `string \| null` | — | 선택 날짜 (YYYY-MM-DD) |
+| `value?` | `string \| null` | — | 선택 값 (date: YYYY-MM-DD, month: YYYY-MM, year: YYYY) |
+| `mode?` | `SDatePickerMode` | `'date'` | 선택 모드 |
 | `size?` | `SDatePickerSize` | `'sm'` |  |
-| `placeholder?` | `string` | `'YYYY-MM-DD'` |  |
+| `placeholder?` | `string` | — |  |
 | `selectable?` | `[string, string]` | — | 선택 가능 범위 [시작, 종료] |
 | `disabled?` | `boolean` | `false` |  |
-| `width?` | `number \| string` | — |  |
+| `clearable?` | `boolean` | `false` | 선택값 지우기 버튼. 값이 있을 때만 나타나고, 누르면 `onValueChange` 로 `null` 이 온다. **필수 입력 필드에는 켜지 않는다** — 지우면 다시 고르기 전까지 폼이 통과하지 못한다. `STimePicker` · `STimeRangePicker` · `SSelect` 의 `clearable` 과 같은 규칙이다. |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
+| `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`YYYY-MM-DD`)에 맞춘 내장 상한(`size='md'` → `lg`, `'sm'` → `md`)이 걸려, `width="100%"` 를 받아도 행 전체로 늘어나지 않는다. 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께 `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야 할 때만 쓴다. |
 | `name?` | `string` | — |  |
 | `rules?` | `Rule[]` | — |  |
 | `status?` | `SFieldStatus` | — |  |
@@ -35,9 +57,41 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(date: string) => void` | 선택 변경 (sdUpdate) |
+| `onValueChange` | `(value: string \| null) => void` | 선택 변경 (sdUpdate). `clearable` 로 지우면 `null` 이 온다 |
 | `onViewChange` | `(view: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
 
+### SDatePickerYearListbox
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string \| null` | — | 선택 연도 (YYYY) |
+| `anchorYear?` | `number` | — | 리스트가 처음 열릴 때 중앙에 둘 연도. 기본값은 올해 |
+| `selectable?` | `[string, string]` | — | 선택 가능 범위 [시작, 종료] |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(year: string) => void` |  |
+
+## Types
+
+### SDatePickerMode
+
+```ts
+export type SDatePickerMode = 'date' | 'month' | 'year';
+```
+
+### SDatePickerSize
+
+```ts
+export type SDatePickerSize = SFieldSize;
+```
+
 ## Dependencies
 
 ### Used by
@@ -49,6 +103,7 @@
 
 - [SCalendar](../SCalendar)
 - [SField](../SField)
+- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 
 ### Graph
@@ -57,6 +112,7 @@
 graph TD;
   SDatePicker --> SCalendar
   SDatePicker --> SField
+  SDatePicker --> SGhostButton
   SDatePicker --> SIcon
   SChipFilter --> SDatePicker
   SKeyValueTable --> SDatePicker

package/dist/components/SDatePicker/SDatePicker.d.ts

@@ -4,23 +4,49 @@ import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
 import { type STooltipProps } from '../STooltip';
+import { type SFieldWidth } from '../../lib/field-width';
 export type SDatePickerSize = SFieldSize;
+export type SDatePickerMode = 'date' | 'month' | 'year';
 export interface SDatePickerProps {
-    /** 선택 날짜 (YYYY-MM-DD) */
+    /** 선택 값 (date: YYYY-MM-DD, month: YYYY-MM, year: YYYY) */
     value?: string | null;
-    /** 선택 변경 (sdUpdate) */
-    onValueChange?: (date: string) => void;
+    /** 선택 변경 (sdUpdate). `clearable` 로 지우면 `null` 이 온다 */
+    onValueChange?: (value: string | null) => void;
     /** 보이는 연·월 변경 (sdViewChange) */
     onViewChange?: (view: {
         year: number;
         month: number;
     }) => void;
+    /** 선택 모드 */
+    mode?: SDatePickerMode;
     size?: SDatePickerSize;
     placeholder?: string;
     /** 선택 가능 범위 [시작, 종료] */
     selectable?: [string, string];
     disabled?: boolean;
-    width?: number | string;
+    /**
+     * 선택값 지우기 버튼. 값이 있을 때만 나타나고, 누르면 `onValueChange` 로 `null` 이 온다.
+     *
+     * **필수 입력 필드에는 켜지 않는다** — 지우면 다시 고르기 전까지 폼이 통과하지 못한다.
+     * `STimePicker` · `STimeRangePicker` · `SSelect` 의 `clearable` 과 같은 규칙이다.
+     */
+    clearable?: boolean;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     */
+    width?: SFieldWidth;
+    /**
+     * 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`YYYY-MM-DD`)에 맞춘
+     * 내장 상한(`size='md'` → `lg`, `'sm'` → `md`)이 걸려, `width="100%"` 를 받아도 행 전체로
+     * 늘어나지 않는다.
+     *
+     * 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께
+     * `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야
+     * 할 때만 쓴다.
+     */
+    maxWidth?: SFieldWidth;
     name?: string;
     rules?: Rule[];
     status?: SFieldStatus;
@@ -38,5 +64,35 @@ export interface SDatePickerProps {
     className?: string;
     style?: CSSProperties;
 }
+export interface SDatePickerYearListboxProps {
+    /** 선택 연도 (YYYY) */
+    value?: string | null;
+    /** 리스트가 처음 열릴 때 중앙에 둘 연도. 기본값은 올해 */
+    anchorYear?: number;
+    /** 선택 가능 범위 [시작, 종료] */
+    selectable?: [string, string];
+    onValueChange?: (year: string) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/** SDatePickerYearListbox — SDatePicker의 연도 선택 listbox 조각.
+ * 자체 트리거/팝오버 없이 연도 리스트만 필요한 커스텀 조합에 재사용한다. */
+export declare function SDatePickerYearListbox({ value, anchorYear, selectable, onValueChange, className, style, }: SDatePickerYearListboxProps): import("react").JSX.Element;
+export interface SDatePickerMonthListboxProps {
+    /** 선택 월 (YYYY-MM) */
+    value?: string | null;
+    /** 연도 리스트가 처음 열릴 때 중앙에 둘 연도. 기본값은 올해 */
+    anchorYear?: number;
+    /** 선택 가능 범위 [시작, 종료] */
+    selectable?: [string, string];
+    onValueChange?: (value: string) => void;
+    /** 월 컬럼에서 월을 선택했을 때 호출 */
+    onMonthSelect?: (value: string) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/** SDatePickerMonthListbox — SDatePicker의 월 선택 listbox 조각.
+ * 자체 트리거/팝오버 없이 연도+월 리스트만 필요한 커스텀 조합에 재사용한다. */
+export declare function SDatePickerMonthListbox({ value, anchorYear, selectable, onValueChange, onMonthSelect, className, style, }: SDatePickerMonthListboxProps): import("react").JSX.Element;
 /** SDatePicker — sd-date-picker 포팅. SField + SPopover(SCalendar). */
-export declare function SDatePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, disabled, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;
+export declare function SDatePicker({ value, onValueChange, onViewChange, mode, size, placeholder, selectable, disabled, clearable, width, maxWidth, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;

package/dist/components/SDatePicker/index.d.ts

@@ -1 +1 @@
-export { SDatePicker, type SDatePickerProps, type SDatePickerSize } from './SDatePicker';
+export { SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, type SDatePickerMode, type SDatePickerMonthListboxProps, type SDatePickerProps, type SDatePickerSize, type SDatePickerYearListboxProps, } from './SDatePicker';

package/dist/components/SDateRangePicker/README.md

@@ -15,7 +15,8 @@
 | `maxRange?` | `number` | — | 최대 선택 일수 |
 | `useTimePicker?` | `boolean` | `false` | 시간(시:분) 선택 푸터 사용 여부. true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시된다. |
 | `disabled?` | `boolean` | `false` |  |
-| `width?` | `number \| string` | — |  |
+| `clearable?` | `boolean` | `false` | 선택값 지우기 버튼. 값이 있을 때만 나타나고, 누르면 `onValueChange` 로 `null` 이 온다. **필수 입력 필드에는 켜지 않는다** — 지우면 다시 고르기 전까지 폼이 통과하지 못한다. `SDatePicker` · `STimePicker` · `SSelect` 의 `clearable` 과 같은 규칙이다. |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
 | `name?` | `string` | — |  |
 | `rules?` | `Rule[]` | — |  |
 | `status?` | `SFieldStatus` | — |  |
@@ -37,7 +38,7 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(range: SDateRangeValue) => void` | 선택 변경 (sdUpdate) — [start, end] |
+| `onValueChange` | `(range: SDateRangeValue) => void` | 선택 변경 (sdUpdate) — [start, end]. `clearable` 로 지우면 `null` 이 온다 |
 | `onViewChange` | `(view: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
 
 ### SRangeCalendar
@@ -59,6 +60,20 @@
 | `onPendingStartChange` | `(start: string \| null) => void` | 시작일만 선택된(종료일 대기) 상태를 상위로 전달 — 트리거에 `start ~` 프리뷰 표시용 |
 | `onViewChange` | `(view: { year: number; month: number }) => void` |  |
 
+## Types
+
+### SDateRangeValue
+
+```ts
+export type SDateRangeValue = [string, string] | null;
+```
+
+### SDateRangePickerSize
+
+```ts
+export type SDateRangePickerSize = SFieldSize;
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SDateRangePicker/SDateRangePicker.d.ts

@@ -4,11 +4,12 @@ import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
 import { type STooltipProps } from '../STooltip';
+import { type SFieldWidth } from '../../lib/field-width';
 export type SDateRangeValue = [string, string] | null;
 export type SDateRangePickerSize = SFieldSize;
 export interface SDateRangePickerProps {
     value?: SDateRangeValue;
-    /** 선택 변경 (sdUpdate) — [start, end] */
+    /** 선택 변경 (sdUpdate) — [start, end]. `clearable` 로 지우면 `null` 이 온다 */
     onValueChange?: (range: SDateRangeValue) => void;
     /** 보이는 연·월 변경 (sdViewChange) */
     onViewChange?: (view: {
@@ -26,7 +27,19 @@ export interface SDateRangePickerProps {
      */
     useTimePicker?: boolean;
     disabled?: boolean;
-    width?: number | string;
+    /**
+     * 선택값 지우기 버튼. 값이 있을 때만 나타나고, 누르면 `onValueChange` 로 `null` 이 온다.
+     *
+     * **필수 입력 필드에는 켜지 않는다** — 지우면 다시 고르기 전까지 폼이 통과하지 못한다.
+     * `SDatePicker` · `STimePicker` · `SSelect` 의 `clearable` 과 같은 규칙이다.
+     */
+    clearable?: boolean;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     */
+    width?: SFieldWidth;
     name?: string;
     rules?: Rule[];
     status?: SFieldStatus;
@@ -61,4 +74,4 @@ export interface SRangeCalendarProps {
  *  캘린더 그리드만 필요한 커스텀 조합(예: 다른 트리거에 팝오버로 얹는 경우)에 재사용한다. */
 export declare function RangeCalendar({ value, selectable, maxRange, useTimePicker, onSelect, onPendingStartChange, onViewChange, }: SRangeCalendarProps): import("react").JSX.Element;
 /** SDateRangePicker — sd-date-range-picker 포팅. SField + SPopover(범위 캘린더). */
-export declare function SDateRangePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, maxRange, useTimePicker, disabled, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDateRangePickerProps): import("react").JSX.Element;
+export declare function SDateRangePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, maxRange, useTimePicker, disabled, clearable, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDateRangePickerProps): import("react").JSX.Element;

package/dist/components/SDivider/README.md

@@ -16,6 +16,8 @@
 
  - [SCalendar](../SCalendar)
  - [SDateRangePicker](../SDateRangePicker)
+ - [SList](../SList)
+ - [STable](../STable)
  - [STableBar](../STableBar)
 
 ### Graph
@@ -24,6 +26,8 @@
 graph TD;
   SCalendar --> SDivider
   SDateRangePicker --> SDivider
+  SList --> SDivider
+  STable --> SDivider
   STableBar --> SDivider
   style SDivider fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SDraggableItem/README.md

@@ -12,6 +12,7 @@
 | `supportingText?` | `SDraggableItemSlot` | — | 제목을 보조하는 텍스트 |
 | `supportingTextPosition?` | `SDraggableItemSupportingTextPosition` | `'right'` | 보조 텍스트 위치 |
 | `trailing?` | `SDraggableItemSlot` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
+| `depth?` | `number` | `1` | 중첩 단계. `SListItem`·`SExpansionItem` 과 같은 들여쓰기 간격을 사용한다 |
 | `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
 | `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
 | `selected?` | `boolean` | `false` | 선택 상태 여부 |
@@ -29,6 +30,42 @@
 |-------|------|-------------|
 | `onDragHandleMouseDown` | `(event: MouseEvent<HTMLDivElement>) => void` | 드래그 핸들 mouse down 이벤트 |
 
+## Types
+
+### SDraggableItemSlot
+
+```ts
+export type SDraggableItemSlot = ReactNode | SDraggableItemRenderProp;
+```
+
+### SDraggableItemSupportingTextPosition
+
+```ts
+export type SDraggableItemSupportingTextPosition = 'right' | 'bottom';
+```
+
+### SDraggableItemSize
+
+```ts
+export type SDraggableItemSize = 'sm' | 'md';
+```
+
+### SDraggableItemRenderProp
+
+```ts
+export type SDraggableItemRenderProp = (state: SDraggableItemRenderState) => ReactNode;
+```
+
+### SDraggableItemRenderState
+
+```ts
+export interface SDraggableItemRenderState {
+  hovered: boolean;
+  dragging: boolean;
+  disabled: boolean;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SDraggableItem/SDraggableItem.d.ts

@@ -17,6 +17,8 @@ export interface SDraggableItemProps extends Omit<HTMLAttributes<HTMLDivElement>
     supportingTextPosition?: SDraggableItemSupportingTextPosition;
     /** 타이틀 뒤에 표시할 태그/콘텐츠 */
     trailing?: SDraggableItemSlot;
+    /** 중첩 단계. `SListItem`·`SExpansionItem` 과 같은 들여쓰기 간격을 사용한다 */
+    depth?: number;
     /** 아이템 왼쪽 accent stripe 표시 여부 */
     accentStripe?: boolean;
     /** 외곽 테두리 사용 여부 */

package/dist/components/SDraggableList/README.md

@@ -28,6 +28,10 @@
 | `selectedKey?` | `string` | — | 외부에서 제어하는 selected 아이템 key |
 | `defaultSelectedKey?` | `string` | — | 초기 selected 아이템 key |
 | `getDisabled?` | `(item: T, index: number) => boolean` | — | disabled 아이템은 선택 및 드래그에서 제외 |
+| `getDepth?` | `(item: T, index: number) => number` | — | 아이템의 중첩 단계. 기본값은 1 |
+| `setDepth?` | `(item: T, depth: number) => T` | — | depth 변경이 필요한 드롭에서 다음 아이템을 만드는 함수 |
+| `getCanHaveChildren?` | `(item: T, index: number) => boolean` | — | 하위 depth 를 가질 수 있는 아이템인지 판정 |
+| `maxDepth?` | `number` | `3` | 허용할 최대 depth |
 | `listId?` | `string` | — | Provider 안에서 사용할 리스트 식별자 |
 | `group?` | `string` | — | 같은 group 값을 가진 리스트끼리 드래그 이벤트를 공유 |
 
@@ -46,6 +50,31 @@
 |------|------|---------|-------------|
 | `children` | `ReactNode` | — |  |
 
+## Types
+
+### SDraggableGroupMoveEvent
+
+```ts
+export interface SDraggableGroupMoveEvent {
+  group: string;
+  itemKey: string;
+  fromListId: string;
+  fromIndex: number;
+  toListId: string;
+  toIndex: number;
+}
+```
+
+### SDraggableListRenderState
+
+```ts
+export interface SDraggableListRenderState {
+  onDragHandleMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
+  selected: boolean;
+  depth: number;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SDraggableList/SDraggableList.d.ts

@@ -3,7 +3,9 @@ import { type SListProps } from '../SList';
 export interface SDraggableListRenderState {
     onDragHandleMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
     selected: boolean;
+    depth: number;
 }
+export type SDraggableListDropIntent = 'before' | 'inside' | 'after';
 export interface SDraggableListProps<T> extends Omit<SListProps, 'children' | 'onChange'> {
     /** 현재 순서대로 렌더링할 아이템 목록 */
     items: T[];
@@ -21,6 +23,14 @@ export interface SDraggableListProps<T> extends Omit<SListProps, 'children' | 'o
     onSelectedKeyChange?: (key: string) => void;
     /** disabled 아이템은 선택 및 드래그에서 제외 */
     getDisabled?: (item: T, index: number) => boolean;
+    /** 아이템의 중첩 단계. 기본값은 1 */
+    getDepth?: (item: T, index: number) => number;
+    /** depth 변경이 필요한 드롭에서 다음 아이템을 만드는 함수 */
+    setDepth?: (item: T, depth: number) => T;
+    /** 하위 depth 를 가질 수 있는 아이템인지 판정 */
+    getCanHaveChildren?: (item: T, index: number) => boolean;
+    /** 허용할 최대 depth */
+    maxDepth?: number;
     /** Provider 안에서 사용할 리스트 식별자 */
     listId?: string;
     /** 같은 group 값을 가진 리스트끼리 드래그 이벤트를 공유 */

package/dist/components/SDraggableList/index.d.ts

@@ -1,2 +1,2 @@
-export { SDraggableList, type SDraggableListProps, type SDraggableListRenderState, } from './SDraggableList';
+export { SDraggableList, type SDraggableListDropIntent, type SDraggableListProps, type SDraggableListRenderState, } from './SDraggableList';
 export { SDraggableProvider, SDraggableGroup, type SDraggableGroupMoveEvent, type SDraggableGroupProps, type SDraggableProviderProps, } from './SDraggableGroup';

package/dist/components/SDrawer/README.md

@@ -29,6 +29,14 @@
 | `onClose` | `() => void` | 닫기(X) 버튼 클릭 |
 | `onWidthChange` | `(width: number) => void` | 너비가 확정될 때(드래그를 놓거나 방향키 조작). 드래그하는 동안에는 오지 않는다 |
 
+## Types
+
+### SDrawerButton
+
+```ts
+export type SDrawerButton = SFooterButton;
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SDropdownButton/README.md

@@ -33,6 +33,25 @@
 | `open` | `() => void` | 드롭다운 열기 (sdOpen) |
 | `close` | `() => void` | 드롭다운 닫기 (sdClose) |
 
+## Types
+
+### SDropdownButtonSize
+
+```ts
+export type SDropdownButtonSize = 'xs' | 'sm' | 'md';
+```
+
+### SDropdownButtonItem
+
+```ts
+export interface SDropdownButtonItem {
+  value: string | number;
+  label: string;
+  icon?: SIconName;
+  disabled?: boolean;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SEditor/EditorBody.d.ts

@@ -0,0 +1,40 @@
+import { type CSSProperties, type RefObject } from 'react';
+import { type SEditorColorOption, type SEditorToolbarItem } from './editor.config';
+import type { SEditorHandle } from './SEditor';
+import type { TiptapApi } from './tiptap-api';
+export interface EditorBodyProps {
+    /** 다 불러온 tiptap — 이 컴포넌트는 준비된 뒤에만 마운트된다 */
+    api: TiptapApi;
+    value?: string;
+    defaultValue?: string;
+    /** 지금 화면에 있는 HTML. 껍데기(SEditor)가 규칙 검증·폼 제출에 쓴다 */
+    htmlRef: RefObject<string>;
+    /** 사용자가 고쳐서 값이 바뀌었다 (setHTML·clear 같은 프로그램 조작은 제외) */
+    onInput: (html: string) => void;
+    onFocusChange: (focused: boolean) => void;
+    /** 에디터 인스턴스가 생겼다 — 껍데기가 밀린 focus() 를 흘려보낸다 */
+    onReady: () => void;
+    placeholder: string;
+    typography: boolean;
+    editable: boolean;
+    disabled: boolean;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    toolbar: SEditorToolbarItem[] | false;
+    /** 선택 영역 위에 뜨는 서식 판. `false` 면 그리지 않는다 */
+    bubbleMenu: SEditorToolbarItem[] | false;
+    fontSizes: number[];
+    colors: SEditorColorOption[];
+    highlights: SEditorColorOption[];
+    onImageUpload?: (file: File) => Promise<string>;
+    editorClass?: string;
+    editorStyle?: CSSProperties;
+}
+/**
+ * SEditor 의 편집 영역 (내부 전용 — 배럴로 내보내지 않는다).
+ *
+ * tiptap 을 실제로 부리는 곳은 여기뿐이고, 그 tiptap 조차 `api` prop 으로 받는다.
+ * 이 파일이 `@tiptap/*` 을 정적으로 import 하면 그 순간 SEditor 를 쓰지 않는 소비 앱까지
+ * tiptap 이 번들에 남는다 (tiptap-api.ts 주석 참고) — 타입만 가져온다.
+ */
+export declare const EditorBody: import("react").ForwardRefExoticComponent<EditorBodyProps & import("react").RefAttributes<SEditorHandle>>;

package/dist/components/SEditor/EditorToolbar.d.ts

@@ -0,0 +1,87 @@
+import type { Editor } from '@tiptap/core';
+import { type SEditorColorOption, type SEditorHeadingLevel, type SEditorToolbarItem } from './editor.config';
+import type { TiptapApi } from './tiptap-api';
+/** 툴바 막대 — 엔진을 불러오는 동안 SEditor 가 같은 높이를 잡아 두는 데도 쓴다 */
+export declare const TOOLBAR_BAR_CLASS = "flex flex-wrap items-center gap-[2px] border-b border-solid px-[8px] py-[4px]";
+export declare const TOOLBAR_BAR_STYLE: {
+    borderBottomColor: string;
+};
+/** 버튼의 눌림 표시에 필요한 것만 추린 에디터 상태 */
+declare const readEditorState: (e: Editor) => {
+    heading: SEditorHeadingLevel | 0;
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strike: boolean;
+    code: boolean;
+    superscript: boolean;
+    subscript: boolean;
+    alignLeft: boolean;
+    alignCenter: boolean;
+    alignRight: boolean;
+    alignJustify: boolean;
+    bulletList: boolean;
+    orderedList: boolean;
+    taskList: boolean;
+    blockquote: boolean;
+    codeBlock: boolean;
+    link: boolean;
+    linkHref: string;
+    color: string;
+    highlight: string;
+    fontSize: string;
+    canUndo: boolean;
+    canRedo: boolean;
+};
+export type EditorToolbarState = ReturnType<typeof readEditorState>;
+/** 에디터가 아직 없을 때의 상태 — 아무것도 켜져 있지 않고 되돌릴 것도 없다 */
+export declare const IDLE_TOOLBAR_STATE: EditorToolbarState;
+export interface EditorToolbarBarProps {
+    /** 눌림 표시 — 에디터가 아직 없으면 `IDLE_TOOLBAR_STATE` */
+    state: EditorToolbarState;
+    /** 없으면 버튼을 눌러도 아무 일도 하지 않는다 (그때는 disabled 로 함께 잠근다) */
+    editor: Editor | null;
+    items: SEditorToolbarItem[];
+    fontSizes: readonly number[];
+    colors: SEditorColorOption[];
+    highlights: SEditorColorOption[];
+    /** 이미지 업로드 훅. 없으면 `image` 항목을 그리지 않는다 */
+    onImageUpload?: (file: File) => Promise<string>;
+    /** 편집 불가(비활성·읽기전용·엔진 로딩 중) — 모든 버튼을 잠근다 */
+    disabled: boolean;
+    /**
+     * `'bar'` 는 편집 영역 위에 붙는 막대, `'bubble'` 은 선택 영역 위에 뜨는 판이다.
+     * 그리는 버튼은 같고 담는 상자와 줄바꿈만 다르다.
+     */
+    variant?: 'bar' | 'bubble';
+}
+interface EditorToolbarProps extends Omit<EditorToolbarBarProps, 'state'> {
+    /** 동적으로 불러온 tiptap (useEditorState) */
+    api: TiptapApi;
+}
+/**
+ * 툴바 막대 (내부 전용 — 배럴로 내보내지 않는다).
+ *
+ * tiptap 을 모른다 — 눌림 상태는 `state` 로 받고 명령은 `editor` 가 있을 때만 나간다.
+ * 그래서 엔진을 불러오는 동안에도 SEditor 가 같은 막대를 그려 자리를 지킬 수 있다.
+ * 버튼 개수·아이콘이 같아야 줄바꿈까지 같아, 엔진이 붙는 순간 화면이 밀리지 않는다.
+ */
+export declare function EditorToolbarBar({ state, editor, items, fontSizes, colors, highlights, onImageUpload, disabled, variant, }: EditorToolbarBarProps): import("react").JSX.Element;
+/**
+ * 버블 메뉴 — 글을 선택하면 그 위에 서식 판이 뜬다.
+ *
+ * tiptap Simple Editor 에는 없는 것이다(템플릿은 막대 하나뿐이다). 막대와 같은 버튼을
+ * 같은 코드로 그리고 담는 상자만 바꾼다 — 두 곳의 눌림 표시가 어긋날 일이 없다.
+ *
+ * 판은 `appendTo` 로 소속 모달(없으면 `body`)에 붙인다. 그대로 두면 tiptap 이 편집 영역의
+ * 부모에 붙이는데, 그 부모는 `maxHeight` 를 받으면 스크롤 상자가 되어 판 위쪽이 잘린다.
+ */
+export declare function EditorBubbleMenu({ api, editor, ...rest }: EditorToolbarProps): import("react").JSX.Element | null;
+/**
+ * SEditor 툴바 — 눌림 상태를 tiptap 에서 구독해 막대에 넘긴다.
+ *
+ * `useEditorState` 를 거치는 이유: tiptap v3 는 트랜잭션마다 리렌더하지 않으므로, 이걸
+ * 거치지 않으면 커서를 굵은 글자 위로 옮겨도 B 버튼이 켜지지 않는다.
+ */
+export declare function EditorToolbar({ api, editor, ...rest }: EditorToolbarProps): import("react").JSX.Element;
+export {};