sellmate-design-system-react 9.0.0-beta.4 → 9.0.0-beta.41

package/dist/components/SIcon/icons.gen.d.ts

@@ -3,6 +3,7 @@ export type IconRenderProps = {
     size?: number | string;
 } & SVGProps<SVGSVGElement>;
 export declare const ICONS: {
+    readonly account: (p: IconRenderProps) => import("react").JSX.Element;
     readonly add: (p: IconRenderProps) => import("react").JSX.Element;
     readonly alert: (p: IconRenderProps) => import("react").JSX.Element;
     readonly alignKorean: (p: IconRenderProps) => import("react").JSX.Element;
@@ -15,6 +16,7 @@ export declare const ICONS: {
     readonly attachFile: (p: IconRenderProps) => import("react").JSX.Element;
     readonly barcode: (p: IconRenderProps) => import("react").JSX.Element;
     readonly bell: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly bellRinging: (p: IconRenderProps) => import("react").JSX.Element;
     readonly bill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly board: (p: IconRenderProps) => import("react").JSX.Element;
     readonly box: (p: IconRenderProps) => import("react").JSX.Element;
@@ -39,6 +41,7 @@ export declare const ICONS: {
     readonly clockFill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly clockOutline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly close: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly company: (p: IconRenderProps) => import("react").JSX.Element;
     readonly copy: (p: IconRenderProps) => import("react").JSX.Element;
     readonly coupon: (p: IconRenderProps) => import("react").JSX.Element;
     readonly dashboard: (p: IconRenderProps) => import("react").JSX.Element;
@@ -76,6 +79,7 @@ export declare const ICONS: {
     readonly reset: (p: IconRenderProps) => import("react").JSX.Element;
     readonly robot: (p: IconRenderProps) => import("react").JSX.Element;
     readonly row: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly rowDense: (p: IconRenderProps) => import("react").JSX.Element;
     readonly save: (p: IconRenderProps) => import("react").JSX.Element;
     readonly search: (p: IconRenderProps) => import("react").JSX.Element;
     readonly send: (p: IconRenderProps) => import("react").JSX.Element;

package/dist/components/SImage/README.md

@@ -15,7 +15,7 @@
 | `position?` | `string` | `'50% 50%'` | 이미지 정렬 위치 (object-position) |
 | `loading?` | `'lazy' \| 'eager'` | `'lazy'` | 브라우저 로딩 방식 |
 | `loadingShowDelay?` | `number` | `0` | 스피너를 띄우기까지 기다리는 시간(ms). 이 시간 안에 로드되면 스피너를 아예 그리지 않는다 — 캐시된 이미지에서 스피너가 한 프레임 번쩍이는 것을 막는다. |
-| `noSpinner?` | `boolean` | `false` | 로딩 중에도 스피너를 그리지 않는다 |
+| `showSpinner?` | `boolean` | `true` | 로딩 중 스피너를 그릴지. 끄면 `loadingSlot` 도 없을 때 로딩 표시가 아무것도 남지 않는다. |
 | `loadingSlot?` | `ReactNode` | — | 로딩 중 표시를 직접 지정한다 (기본: 스피너) |
 | `errorSlot?` | `ReactNode` | — | 실패·빈 상태 표시를 직접 지정한다 (기본: 빈 이미지 아이콘) |
 | `imgProps?` | `ImgHTMLAttributes<HTMLImageElement>` | — | 안쪽 `<img>` 로 넘길 네이티브 속성 (srcSet · sizes · crossOrigin · draggable 등) |
@@ -27,6 +27,20 @@
 | `onLoad` | `(src: string) => void` | 로드 완료. 로드된 src 를 넘긴다 |
 | `onError` | `(event: SyntheticEvent<HTMLImageElement>) => void` | 로드 실패 |
 
+## Types
+
+### SImageFit
+
+```ts
+export type SImageFit = (typeof IMAGE_FITS)[number];
+```
+
+### IMAGE_FITS
+
+```ts
+export const IMAGE_FITS = ['cover', 'contain', 'fill', 'none', 'scale-down'] as const;
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SImage/SImage.d.ts

@@ -19,8 +19,8 @@ export interface SImageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoa
      * 캐시된 이미지에서 스피너가 한 프레임 번쩍이는 것을 막는다.
      */
     loadingShowDelay?: number;
-    /** 로딩 중에도 스피너를 그리지 않는다 */
-    noSpinner?: boolean;
+    /** 로딩 중 스피너를 그릴지. 끄면 `loadingSlot` 도 없을 때 로딩 표시가 아무것도 남지 않는다. */
+    showSpinner?: boolean;
     /** 로딩 중 표시를 직접 지정한다 (기본: 스피너) */
     loadingSlot?: ReactNode;
     /** 실패·빈 상태 표시를 직접 지정한다 (기본: 빈 이미지 아이콘) */

package/dist/components/SInput/README.md

@@ -18,9 +18,9 @@
 | `clearable?` | `boolean` | `false` | 지우기 버튼 |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 자동 검증 |
 | `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
-| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
-| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
-| `inputClass?` | `string` | — | 내부 input 요소 className |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
+| `inputClassName?` | `string` | — | 내부 input 요소 className |
 | `inputStyle?` | `CSSProperties` | — | 내부 input 요소 style |
 | `label?` | `string` | — |  |
 | `labelWidth?` | `number \| string` | — |  |
@@ -31,7 +31,7 @@
 | `errorMessage?` | `string` | — |  |
 | `addonLabel?` | `string` | — |  |
 | `addonAlign?` | `SFieldAddonAlign` | — | 어드온 정렬 |
-| `width?` | `number \| string` | — |  |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리며 `maxLength`(= 스키마 상한)로 고른다. 상한이 `xl` 을 넘거나 상한이 없으면 `"100%"`. (`sellmate/field-width-grade` 가 검사한다) |
 | `disabled?` | `boolean` | `false` |  |
 | `readOnly?` | `boolean` | `false` |  |
 | `className?` | `string` | — |  |
@@ -48,6 +48,7 @@
 
 ### Used by
 
+ - [SEditor](../SEditor)
  - [SKeyValueTable](../SKeyValueTable)
 
 ### Depends on
@@ -61,6 +62,7 @@
 graph TD;
   SInput --> SField
   SInput --> SGhostButton
+  SEditor --> SInput
   SKeyValueTable --> SInput
   style SInput fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SInput/SInput.d.ts

@@ -4,6 +4,7 @@ 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 interface SInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange' | 'type' | 'prefix' | 'suffix'> {
     /** 값 (제어) */
     value?: string | number;
@@ -29,12 +30,12 @@ export interface SInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     rules?: Rule[];
     /** 필드 상태 ('default' | 'pass' | 'error') */
     status?: SFieldStatus;
-    /** 포커스 상태 (제어/반영) */
+    /** 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) */
     focused?: boolean;
-    /** 호버 상태 (제어/반영) */
+    /** 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) */
     hovered?: boolean;
     /** 내부 input 요소 className */
-    inputClass?: string;
+    inputClassName?: string;
     /** 내부 input 요소 style */
     inputStyle?: CSSProperties;
     label?: string;
@@ -49,7 +50,12 @@ export interface SInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     addonLabel?: string;
     /** 어드온 정렬 */
     addonAlign?: SFieldAddonAlign;
-    width?: number | string;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리며 `maxLength`(= 스키마 상한)로 고른다.
+     * 상한이 `xl` 을 넘거나 상한이 없으면 `"100%"`. (`sellmate/field-width-grade` 가 검사한다)
+     */
+    width?: SFieldWidth;
     disabled?: boolean;
     readOnly?: boolean;
     className?: string;

package/dist/components/SKeyValueTable/README.md

@@ -23,6 +23,90 @@
 | `onChange` | `(detail: SKeyValueChangeDetail) => void` | 값 변경 (sdChange) |
 | `onSearch` | `() => void` | 검색 클릭 (sdSearch) |
 
+## Types
+
+### SKeyValueField
+
+```ts
+export type SKeyValueField = SKeyValueFieldBase & SKeyValueFieldByType;
+```
+
+### SKeyValueChangeDetail
+
+```ts
+/**
+ * `onChange` 콜백 detail.
+ * 제네릭 `V`에 폼 값 형태(`{ [name]: value }`)를 넘기면 `name`/`value`/`values`가 정밀하게 타이핑됩니다.
+ * 미지정 시 `value`는 {@link SKeyValueFieldValue} 유니온으로 잡힙니다.
+ */
+export interface SKeyValueChangeDetail<
+  V extends Record<string, SKeyValueFieldValue> = Record<string, SKeyValueFieldValue>,
+> {
+  /** 변경된 field의 name */
+  name: Extract<keyof V, string>;
+  /** 변경된 field의 새 값 */
+  value: V[Extract<keyof V, string>];
+  /** 변경이 반영된 전체 값 객체 (`{ [name]: value }`). controlled 패턴에서 그대로 상태에 반영하면 됩니다. */
+  values: V;
+}
+```
+
+### SKeyValueFieldBase
+
+```ts
+/** field type과 무관한 공통 속성 (레이아웃·레이블·스팬 등) */
+export interface SKeyValueFieldBase {
+  name: string;
+  label?: string;
+  required?: boolean;
+  helpText?: string[];
+  hideTh?: boolean;
+  thRowSpan?: number;
+  thColSpan?: number;
+  tdRowSpan?: number;
+  tdColSpan?: number;
+  thWidth?: number | string;
+  thClass?: string;
+  tdClass?: string;
+  /** 셀 커스텀 렌더 (React 확장). 지정 시 type/options는 무시되고 이 노드가 그대로 렌더됩니다. */
+  render?: ReactNode;
+}
+```
+
+### SKeyValueFieldByType
+
+```ts
+/**
+ * `type`에 따라 `options`가 해당 컴포넌트의 props로 좁혀지는 discriminated union.
+ * `type` 생략 시 `text`로 동작합니다.
+ */
+export type SKeyValueFieldByType =
+  | { type?: 'text'; options?: { value?: ReactNode } }
+  | { type: 'input'; options?: FieldOptions<SInputProps> }
+  | { type: 'textarea'; options?: FieldOptions<STextareaProps> }
+  | { type: 'number-input'; options?: FieldOptions<SNumberInputProps> }
+  | { type: 'select'; options?: FieldOptions<SSelectProps> }
+  | { type: 'radio'; options?: FieldOptions<SRadioGroupProps> }
+  | { type: 'checkbox'; options?: FieldOptions<SCheckboxProps> }
+  | { type: 'switch'; options?: FieldOptions<SSwitchProps> }
+  | { type: 'date-picker'; options?: FieldOptions<SDatePickerProps> }
+  | { type: 'date-range-picker'; options?: FieldOptions<SDateRangePickerProps> }
+  | { type: 'file-picker'; options?: FieldOptions<SFilePickerProps> };
+```
+
+### SKeyValueFieldValue
+
+```ts
+/**
+ * field type별 `onChange`로 올라오는 값 타입.
+ * - `string`: input · textarea · select · radio · date-picker
+ * - `number`: number-input
+ * - `boolean`: checkbox · switch
+ * - `string[]`: date-range-picker
+ */
+export type SKeyValueFieldValue = string | number | boolean | string[];
+```
+
 ## Dependencies
 
 ### Depends on
@@ -37,6 +121,7 @@
 - [SNumberInput](../SNumberInput)
 - [SRadio](../SRadio)
 - [SSelect](../SSelect)
+- [SSwitch](../SSwitch)
 - [STextarea](../STextarea)
 - [STooltip](../STooltip)
 
@@ -54,6 +139,7 @@ graph TD;
   SKeyValueTable --> SNumberInput
   SKeyValueTable --> SRadio
   SKeyValueTable --> SSelect
+  SKeyValueTable --> SSwitch
   SKeyValueTable --> STextarea
   SKeyValueTable --> STooltip
   style SKeyValueTable fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/SKeyValueTable/SKeyValueTable.d.ts

@@ -5,10 +5,11 @@ import { type SNumberInputProps } from '../SNumberInput';
 import { type SSelectProps } from '../SSelect';
 import { type SRadioGroupProps } from '../SRadio';
 import { type SCheckboxProps } from '../SCheckbox';
+import { type SSwitchProps } from '../SSwitch';
 import { type SDatePickerProps } from '../SDatePicker';
 import { type SDateRangePickerProps } from '../SDateRangePicker';
 import { type SFilePickerProps } from '../SFilePicker';
-export type SKeyValueFieldType = 'text' | 'input' | 'textarea' | 'number-input' | 'select' | 'radio' | 'checkbox' | 'date-picker' | 'date-range-picker' | 'file-picker';
+export type SKeyValueFieldType = 'text' | 'input' | 'textarea' | 'number-input' | 'select' | 'radio' | 'checkbox' | 'switch' | 'date-picker' | 'date-range-picker' | 'file-picker';
 /** field type과 무관한 공통 속성 (레이아웃·레이블·스팬 등) */
 export interface SKeyValueFieldBase {
     name: string;
@@ -59,6 +60,9 @@ export type SKeyValueFieldByType = {
 } | {
     type: 'checkbox';
     options?: FieldOptions<SCheckboxProps>;
+} | {
+    type: 'switch';
+    options?: FieldOptions<SSwitchProps>;
 } | {
     type: 'date-picker';
     options?: FieldOptions<SDatePickerProps>;
@@ -74,7 +78,7 @@ export type SKeyValueField = SKeyValueFieldBase & SKeyValueFieldByType;
  * field type별 `onChange`로 올라오는 값 타입.
  * - `string`: input · textarea · select · radio · date-picker
  * - `number`: number-input
- * - `boolean`: checkbox
+ * - `boolean`: checkbox · switch
  * - `string[]`: date-range-picker
  */
 export type SKeyValueFieldValue = string | number | boolean | string[];

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

@@ -1 +1 @@
-export { SKeyValueTable, type SKeyValueTableProps, type SKeyValueField, type SKeyValueFieldType, type SKeyValueChangeDetail, } from './SKeyValueTable';
+export { SKeyValueTable, type SKeyValueTableProps, type SKeyValueField, type SKeyValueFieldBase, type SKeyValueFieldByType, type SKeyValueFieldType, type SKeyValueFieldValue, type SKeyValueChangeDetail, } from './SKeyValueTable';

package/dist/components/SLayout/README.md

@@ -10,7 +10,7 @@
 |------|------|---------|-------------|
 | `type?` | `SLayoutType` | `'box'` | 메뉴 스타일: box(라운드) / belt(풀폭 행). 자식 SGnb 가 이 값을 따른다. |
 | `header?` | `SLayoutHeader` | `'fix'` | 레이아웃 구조: fix(가로 분할) / full(풀폭 상단바). 자식 SGnb·SPage 가 이 값을 따른다. |
-| `useRail?` | `boolean` | `false` | GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, 그만큼 넓어진 컬럼 폭을 되올린다. 레일에 children 없는 아이템이 있으면 SGnb 가 full 상단바를 요구하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다. |
+| `showRail?` | `boolean` | `false` | GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, 그만큼 넓어진 컬럼 폭을 되올린다. 레일에 children 없는 아이템이 있으면 SGnb 가 full 상단바를 요구하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다. |
 | `folded?` | `boolean` | — | GNB 접힘 상태 (controlled) |
 | `defaultFolded?` | `boolean` | `false` | GNB 초기 접힘 상태 (uncontrolled) |
 
@@ -20,6 +20,22 @@
 |-------|------|-------------|
 | `onFoldedChange` | `(folded: boolean) => void` | 접힘 상태 변경 |
 
+## Types
+
+### SLayoutType
+
+```ts
+/** 메뉴 스타일: box(라운드) / belt(풀폭 행) — 자식 SGnb 의 메뉴 모양 */
+export type SLayoutType = SGnbType;
+```
+
+### SLayoutHeader
+
+```ts
+/** 레이아웃 구조: fix(좌측 GNB + 페이지 가로 분할) / full(풀폭 상단바 + 아래에 메뉴|페이지) */
+export type SLayoutHeader = SGnbHeader;
+```
+
 ## Dependencies
 
 ### Used by
@@ -27,10 +43,15 @@
  - [SGnb](../SGnb)
  - [SPage](../SPage)
 
+### Depends on
+
+- [SPage](../SPage)
+
 ### Graph
 
 ```mermaid
 graph TD;
+  SLayout --> SPage
   SGnb --> SLayout
   SPage --> SLayout
   style SLayout fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/SLayout/SLayout.d.ts

@@ -42,7 +42,7 @@ export interface SLayoutContextValue {
      */
     header: SLayoutHeader;
     /** GNB 좌측 레일 사용 여부 — 자식 SGnb 가 따른다 */
-    useRail: boolean;
+    showRail: boolean;
     /** GNB 접힘 상태 */
     folded: boolean;
     /** 접힘 상태 변경 */
@@ -81,7 +81,7 @@ export interface SLayoutProps extends HTMLAttributes<HTMLDivElement> {
      * GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, 그만큼 넓어진 컬럼 폭을 되올린다.
      * 레일에 children 없는 아이템이 있으면 SGnb 가 full 상단바를 요구하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다.
      */
-    useRail?: boolean;
+    showRail?: boolean;
     /** GNB 접힘 상태 (controlled) */
     folded?: boolean;
     /** GNB 초기 접힘 상태 (uncontrolled) */
@@ -106,5 +106,9 @@ export interface SLayoutProps extends HTMLAttributes<HTMLDivElement> {
  *     "header header"  ← 전폭 상단바 (1행, 높이 = 등록된 topHeight)
  *     "nav    page"    ← 메뉴 열(등록된 columnWidth) | 페이지
  *   접으면 nav 열을 0 으로 접어 페이지가 전폭을 쓴다.
+ *
+ * 자식 순서는 `SGnb` → (선택) `SPageHeader` → `SPage` 다. `SPageHeader` 를 두면 **그 자식부터 뒤가**
+ * 하나의 페이지 열로 묶여(page-column.tsx) 헤더가 페이지 위에 고정되고, 그 아래에서만 스크롤이 일어난다.
+ * 헤더를 두지 않으면 아무것도 감싸지 않는다 — `SPage` 가 예전처럼 프레임의 자식으로 남는다.
  */
 export declare const SLayout: import("react").ForwardRefExoticComponent<SLayoutProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-export { SLayout, SLayoutContext, SLAYOUT_MIN_WIDTH, useSLayout, type SLayoutProps, type SLayoutType, type SLayoutHeader, type SLayoutContextValue, } from './SLayout';
+export { SLayout, SLayoutContext, SLAYOUT_MIN_WIDTH, useSLayout, type SLayoutProps, type SLayoutType, type SLayoutHeader, type SLayoutNavState, type SLayoutContextValue, } from './SLayout';

package/dist/components/SLinearProgress/README.md

@@ -10,8 +10,23 @@
 |------|------|---------|-------------|
 | `value?` | `number` | `0` | 진행률 (0–100) |
 | `type?` | `SLinearProgressType` | `'primary'` | 색상 타입 |
+| `size?` | `SLinearProgressSize` | `'sm'` | 바 높이. xs 는 바 안에 퍼센트 텍스트를 넣지 않는다 |
 | `indeterminate?` | `boolean` | `false` | 진행률 없이 무한 애니메이션 |
 | `label?` | `string` | — | 하단 레이블 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
+## Types
+
+### SLinearProgressType
+
+```ts
+export type SLinearProgressType = 'primary' | 'error' | 'complete';
+```
+
+### SLinearProgressSize
+
+```ts
+export type SLinearProgressSize = 'xs' | 'sm' | 'md';
+```
+

package/dist/components/SLinearProgress/SLinearProgress.d.ts

@@ -1,10 +1,13 @@
 import { type CSSProperties } from 'react';
 export type SLinearProgressType = 'primary' | 'error' | 'complete';
+export type SLinearProgressSize = 'xs' | 'sm' | 'md';
 export interface SLinearProgressProps {
     /** 진행률 (0–100) */
     value?: number;
     /** 색상 타입 */
     type?: SLinearProgressType;
+    /** 바 높이. xs 는 바 안에 퍼센트 텍스트를 넣지 않는다 */
+    size?: SLinearProgressSize;
     /** 진행률 없이 무한 애니메이션 */
     indeterminate?: boolean;
     /** 하단 레이블 */

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

@@ -1 +1 @@
-export { SLinearProgress, type SLinearProgressProps, type SLinearProgressType, } from './SLinearProgress';
+export { SLinearProgress, type SLinearProgressProps, type SLinearProgressType, type SLinearProgressSize, } from './SLinearProgress';

package/dist/components/SList/README.md

@@ -9,9 +9,16 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `children?` | `ReactNode` | — | 리스트 컨테이너 내부에 렌더링할 내용 |
-| `useGap?` | `boolean` | `false` | 리스트 아이템 사이 gap 토큰 적용 여부 |
-| `usePadding?` | `boolean` | `false` | 리스트 컨테이너 padding 토큰 적용 여부 |
-| `separator?` | `boolean` | `false` | 아이템 하단 구분선 표시 여부. 테두리를 가진 아이템(`bordered`)에는 쓰지 않는다 |
+| `gap?` | `boolean` | `false` | 리스트 아이템 사이 gap 토큰 적용 여부 |
+| `padding?` | `SListPadding` | `'none'` | 컨테이너 안쪽 여백. 기본은 `none` — 목록이 담긴 면이 이미 여백을 쥔 경우가 많다. 목록이 배경 위에 직접 얹혀 스스로 여백을 쥐어야 할 때만 `default`. |
+
+## Types
+
+### SListPadding
+
+```ts
+export type SListPadding = 'default' | 'none';
+```
 
 ## Dependencies
 
@@ -20,10 +27,15 @@
  - [SDraggableList](../SDraggableList)
  - [SExpansionList](../SExpansionList)
 
+### Depends on
+
+- [SDivider](../SDivider)
+
 ### Graph
 
 ```mermaid
 graph TD;
+  SList --> SDivider
   SDraggableList --> SList
   SExpansionList --> SList
   style SList fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/SList/SList.d.ts

@@ -1,12 +1,14 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+export type SListPadding = 'default' | 'none';
 export interface SListProps extends HTMLAttributes<HTMLDivElement> {
     /** 리스트 컨테이너 내부에 렌더링할 내용 */
     children?: ReactNode;
     /** 리스트 아이템 사이 gap 토큰 적용 여부 */
-    useGap?: boolean;
-    /** 리스트 컨테이너 padding 토큰 적용 여부 */
-    usePadding?: boolean;
-    /** 아이템 하단 구분선 표시 여부. 테두리를 가진 아이템(`bordered`)에는 쓰지 않는다 */
-    separator?: boolean;
+    gap?: boolean;
+    /**
+     * 컨테이너 안쪽 여백. 기본은 `none` — 목록이 담긴 면이 이미 여백을 쥔 경우가 많다.
+     * 목록이 배경 위에 직접 얹혀 스스로 여백을 쥐어야 할 때만 `default`.
+     */
+    padding?: SListPadding;
 }
 export declare const SList: import("react").ForwardRefExoticComponent<SListProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-export { SList, type SListProps } from './SList';
+export { SList, type SListPadding, type SListProps } from './SList';

package/dist/components/SListItem/README.md

@@ -23,6 +23,47 @@
 | `size?` | `SListItemSize` | `'sm'` | 타이포그래피 크기 |
 | `disabled?` | `boolean` | `false` | 비활성 상태 여부 |
 
+## Types
+
+### SListItemSlot
+
+```ts
+export type SListItemSlot = ReactNode | SListItemRenderProp;
+```
+
+### SListItemSupportingTextPosition
+
+```ts
+export type SListItemSupportingTextPosition = 'right' | 'bottom';
+```
+
+### SListItemInteraction
+
+```ts
+export type SListItemInteraction = 'chevron';
+```
+
+### SListItemSize
+
+```ts
+export type SListItemSize = 'sm' | 'md';
+```
+
+### SListItemRenderProp
+
+```ts
+export type SListItemRenderProp = (state: SListItemRenderState) => ReactNode;
+```
+
+### SListItemRenderState
+
+```ts
+export interface SListItemRenderState {
+  hovered: boolean;
+  disabled: boolean;
+}
+```
+
 ## Dependencies
 
 ### Used by

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

@@ -1 +1 @@
-export { SListItem, type SListItemProps, type SListItemSupportingTextPosition } from './SListItem';
+export { SListItem, type SListItemInteraction, type SListItemProps, type SListItemRenderProp, type SListItemRenderState, type SListItemSize, type SListItemSlot, type SListItemSupportingTextPosition, } from './SListItem';

package/dist/components/SLoadingContainer/loading.d.ts

@@ -1,10 +1,26 @@
 /** 오버레이 뷰포트 — 스토어를 구독해 SLoadingContainer 를 렌더한다. 직접 배치도 가능. */
 export declare function SLoadingViewport(): import("react").JSX.Element;
 export declare const loading: {
-    /** 로딩 오버레이 표시 (메시지 갱신도 동일 호출) */
+    /**
+     * 로딩 오버레이 표시. 겹쳐 부르면 그만큼 쌓이고 **마지막 하나가 걷힐 때** 닫힌다.
+     * 반환값은 이 호출 하나만 걷는 함수다(두 번 불러도 한 번만 걷힌다) — `hide()` 대신 이것을
+     * 쓰면 짝이 어긋나지 않는다.
+     *
+     * ⚠️ 메시지만 바꾸려면 `update()` 를 쓴다. `show()` 를 다시 부르면 하나 더 쌓여
+     * `hide()` 한 번으로는 닫히지 않는다.
+     */
     show(options?: {
         message?: string;
+    }): () => void;
+    /** 표시 중인 메시지 갱신 — 쌓인 수는 그대로다 */
+    update(options: {
+        message?: string;
     }): void;
-    /** 로딩 오버레이 숨김 */
+    /** 가장 나중의 show 하나를 걷는다. 남은 것이 없을 때만 오버레이가 닫힌다 */
     hide(): void;
+    /**
+     * 쌓인 것을 모두 걷고 즉시 닫는다. 화면 전환·에러 복구처럼 진행 중이던 작업의 짝을 더는
+     * 맞출 수 없을 때만 쓴다 — 평소에는 `hide()` 나 `show()` 가 준 함수로 하나씩 걷는다.
+     */
+    hideAll(): void;
 };

package/dist/components/SLoadingModal/README.md

@@ -10,10 +10,10 @@
 |------|------|---------|-------------|
 | `open?` | `boolean` | — |  |
 | `persistent?` | `boolean` | — | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** |
-| `state?` | `LoadingModalState` | `'loading'` | 상태 (loading: 스피너, error: 경고 아이콘) |
+| `state?` | `SLoadingModalState` | `'loading'` | 상태 (loading: 스피너, error: 경고 아이콘) |
 | `progress?` | `number` | — | 진행률 (0–100) — 지정 시 determinate 스피너 |
 | `message?` | `string \| string[]` | — | 메시지 (없으면 state 기본값) |
-| `useButton?` | `boolean` | `false` | 하단 버튼 표시 |
+| `showButton?` | `boolean` | `false` | 하단 버튼 표시 |
 | `buttonLabel?` | `string` | — | 버튼 레이블 (없으면 state 기본값) |
 | `width?` | `number \| string` | `520` |  |
 | `height?` | `number \| string` | `320` |  |
@@ -26,6 +26,14 @@
 | `onClose` | `() => void` | 닫기(X) 버튼 클릭 (sdClose) — error 상태에서만 노출 |
 | `onButtonClick` | `() => void` | 버튼 클릭 (sdClick) |
 
+## Types
+
+### SLoadingModalState
+
+```ts
+export type SLoadingModalState = 'loading' | 'error';
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SLoadingModal/SLoadingModal.d.ts

@@ -1,4 +1,4 @@
-export type LoadingModalState = 'loading' | 'error';
+export type SLoadingModalState = 'loading' | 'error';
 export interface SLoadingModalProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -7,13 +7,13 @@ export interface SLoadingModalProps {
     /** 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** */
     persistent?: boolean;
     /** 상태 (loading: 스피너, error: 경고 아이콘) */
-    state?: LoadingModalState;
+    state?: SLoadingModalState;
     /** 진행률 (0–100) — 지정 시 determinate 스피너 */
     progress?: number;
     /** 메시지 (없으면 state 기본값) */
     message?: string | string[];
     /** 하단 버튼 표시 */
-    useButton?: boolean;
+    showButton?: boolean;
     /** 버튼 레이블 (없으면 state 기본값) */
     buttonLabel?: string;
     /** 버튼 클릭 (sdClick) */
@@ -22,4 +22,4 @@ export interface SLoadingModalProps {
     height?: number | string;
 }
 /** SLoadingModal — sd-loading-modal 포팅. state(loading/error) + progress + 옵션 버튼. */
-export declare function SLoadingModal({ open, onOpenChange, onClose, persistent, state, progress, message, useButton, buttonLabel, onButtonClick, width, height, }: SLoadingModalProps): import("react").JSX.Element;
+export declare function SLoadingModal({ open, onOpenChange, onClose, persistent, state, progress, message, showButton, buttonLabel, onButtonClick, width, height, }: SLoadingModalProps): import("react").JSX.Element;

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

@@ -1 +1 @@
-export { SLoadingModal, type SLoadingModalProps } from './SLoadingModal';
+export { SLoadingModal, type SLoadingModalProps, type SLoadingModalState } from './SLoadingModal';

package/dist/components/SModal/README.md

@@ -61,7 +61,7 @@ SModal.confirm({
   .onCancel(() => {});
 ```
 
-**옵션 (`SConfirmOptions`)** — 선언형 `SConfirmModalProps` 에서 제어 흐름 props(`open`/`onOpenChange`/`onOk`/`onCancel`/`onClose`)를 제외한 전부. 주요 키: `type`, `modalTitle`, `topMessage`/`bottomMessage`, `mainButtonLabel`/`mainButtonName`, `subButtonLabel`, `tagSlot`/`optionSlot`/`contentSlot`, `persistent`.
+**옵션 (`SConfirmOptions`)** — 선언형 `SConfirmModalProps` 에서 제어 흐름 props(`open`/`onOpenChange`/`onOk`/`onCancel`/`onClose`)를 제외한 전부. 주요 키: `type`, `modalTitle`, `topMessage`/`bottomMessage`, `mainButtonLabel`/`mainButtonOutline`, `subButtonLabel`, `tagSlot`/`optionSlot`/`contentSlot`, `persistent`.
 
 ---