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

package/dist/components/SGnbSystem/gnbSystem.config.d.ts

@@ -0,0 +1,122 @@
+import type { SSystemActionButtonColor } from '../SSystemActionButton';
+/**
+ * SGnbSystem 설정.
+ *
+ * 토큰은 GNB system 패널 한 벌(`--cmp-gnb-system-*`)이다.
+ *   패널(배경·경계·구분선·간격)      → --cmp-gnb-system-panel-*
+ *   도메인 태그                       → --cmp-gnb-system-domainTag-*
+ *   행 공통(높이·라운드·아이콘 프레임) → --cmp-gnb-system-item-*        (SSystemActionButton 과 공유)
+ *   알림 버튼                         → --cmp-gnb-system-alertButton-*
+ *   설정 버튼                         → --cmp-gnb-system-setting-*
+ *   펼침·접힘 패널 여백                → --cmp-gnb-system-project-padding · --cmp-gnb-system-min-padding
+ *
+ * 타이포그래피는 CSS 변수가 아니라 `.typo-*` 프리셋으로 나온다.
+ *   domainTag.typography      → typo-body-sm-medium   (12/500/20)
+ *   item.label.typography     → typo-body-sm-semibold (12/600/20)
+ *   alertButton.count         → typo-body-md-bold     (13/700/22)
+ */
+/** 색상(표면). light = 흰 면, dark = 오션블루 면. GNB 의 color 를 그대로 따라간다 */
+export declare const GNB_SYSTEM_COLORS: readonly ["light", "dark"];
+export type SGnbSystemColor = (typeof GNB_SYSTEM_COLORS)[number];
+/**
+ * 조각들이 놓이는 자리. GNB 의 `header` 가 정하므로 앱이 고르지 않는다.
+ * - `panel` — GNB 바닥에 깔리는 세로 판 (header="fix"). 접히면 48px 레일용 min 형태가 된다.
+ * - `top`   — 레이아웃 전폭 상단바 위 (header="full"). 판을 깔지 않고 가로 한 줄로 선다.
+ */
+export declare const GNB_SYSTEM_PLACEMENTS: readonly ["panel", "top"];
+export type SGnbSystemPlacement = (typeof GNB_SYSTEM_PLACEMENTS)[number];
+/**
+ * 패널 색이 곧 행 색이다 — 행(아이콘 프레임·라벨·hover)은 SSystemActionButton 과 같은
+ * `--cmp-gnb-system-item-*` 토큰을 쓰므로, 그 색표를 그대로 빌려 두 컴포넌트가 어긋나지 않게 한다.
+ * `darker`(판 없이 어두운 GNB 면에 바로 얹는 색)는 판을 깔지 않는 `top` 자리가 쓴다
+ * → GNB_SYSTEM_TOP_COLOR_CONFIG.
+ */
+export type GnbSystemItemColor = SSystemActionButtonColor;
+export interface GnbSystemColorTokens {
+    /** 패널 배경 */
+    bg: string;
+    /**
+     * 패널 위쪽 경계 (GNB 본문과 나누는 선). 배경만으로 경계가 읽히는 색에서는 없다.
+     * 토큰에는 light·dark 모두 정의돼 있지만, dark 는 시안이 선을 긋지 않는다 — 아래 주석 참고.
+     */
+    border?: string;
+    /** 패널 안 구분선 (가로 divider · 알림↔설정 세로선) */
+    divider: string;
+    /** 도메인 태그 배경 */
+    domainBg: string;
+    /** 도메인 태그 글자색 */
+    domainText: string;
+    /** 알림이 있을 때의 벨 글리프색 */
+    alertIcon: string;
+    /** 알림 개수(펼침) · 점 배지(접힘) 색 */
+    alertCount: string;
+    /** 알림이 있을 때의 hover 배경. 없으면 행 기본 hover 를 쓴다 */
+    alertHoverBg?: string;
+}
+export declare const GNB_SYSTEM_COLOR_CONFIG: Record<SGnbSystemColor, GnbSystemColorTokens>;
+/**
+ * `top` 자리(전폭 상단바)의 색.
+ *
+ * 상단바에는 판을 깔지 않고 조각을 GNB 면에 바로 얹는다 — 그래서 행 색이 패널과 한 단계 다르다.
+ * dark 는 패널의 오션블루(`dark`)가 아니라 GNB 네이비 면용 `darker` 를 쓰고, 구분선·도메인 태그도
+ * 그에 맞춘 `*-darker-*` 토큰을 쓴다. 알림 강조색은 darker 대응 토큰이 없어 dark 값을 그대로 쓴다
+ * (두 면 모두 어두운 면이라 같은 노랑이 맞는다).
+ */
+export interface GnbSystemTopColorTokens {
+    /** 조각(액션·알림·설정·계정)이 쓰는 행 색 */
+    item: GnbSystemItemColor;
+    /** 조각 사이 세로 구분선 */
+    divider: string;
+    /** 도메인 태그 배경 */
+    domainBg: string;
+    /** 도메인 태그 글자색 */
+    domainText: string;
+    /** 알림이 있을 때의 벨 글리프색 */
+    alertIcon: string;
+    /** 알림 개수 색 */
+    alertCount: string;
+    /** 알림이 있을 때의 hover 배경. 없으면 행 기본 hover 를 쓴다 */
+    alertHoverBg?: string;
+}
+export declare const GNB_SYSTEM_TOP_COLOR_CONFIG: Record<SGnbSystemColor, GnbSystemTopColorTokens>;
+/** 치수 — 전부 토큰 참조 */
+export declare const GNB_SYSTEM_LAYOUT: {
+    /** 펼친 패널의 안쪽 여백 */
+    readonly padding: "var(--cmp-gnb-system-project-padding)";
+    /** 접힌(min) 패널의 안쪽 여백 */
+    readonly foldedPadding: "var(--cmp-gnb-system-min-padding)";
+    /**
+     * 패널이 쌓는 블록 사이 간격. 알림↔설정 사이의 가로 간격도 전용 토큰이 없어 이 값을 쓴다
+     * (시안에서 두 간격이 같다).
+     */
+    readonly gap: string;
+    /** 행 높이 */
+    readonly itemHeight: string;
+    /** 행 라운드 */
+    readonly itemRadius: string;
+    /** 아이콘 프레임 한 변 */
+    readonly iconFrame: string;
+    /** 아이콘 글리프 크기 */
+    readonly iconGlyph: string;
+    /** 아이콘 프레임 라운드 */
+    readonly iconRadius: string;
+    /** 아이콘 프레임 ↔ 라벨 간격 */
+    readonly iconLabelGap: string;
+    /** 알림 버튼 좌우 여백 */
+    readonly alertPaddingX: string;
+    /** 설정 버튼 좌우 여백 */
+    readonly settingPaddingX: "var(--cmp-gnb-system-setting-paddingX)";
+    /** 도메인 태그 */
+    readonly domainPaddingX: string;
+    readonly domainPaddingY: string;
+    readonly domainRadius: string;
+};
+/**
+ * 알림 점 배지 지름(px). 접힌 패널에는 개수를 적을 자리가 없어 점만 찍는다.
+ * 전용 토큰이 없어 시안 값을 상수로 둔다.
+ */
+export declare const GNB_SYSTEM_ALERT_DOT_SIZE = 6;
+/** 알림 버튼 기본 라벨 */
+export declare const GNB_SYSTEM_ALERT_LABEL = "\uC54C\uB9BC";
+/** 설정 버튼 기본 라벨 */
+export declare const GNB_SYSTEM_SETTING_LABEL = "\uC124\uC815";

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

@@ -0,0 +1,2 @@
+export { SGnbSystem, type SGnbSystemProps, type SGnbSystemAction, type SGnbSystemAlert, type SGnbSystemSetting, type SGnbSystemAccount, } from './SGnbSystem';
+export { GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, type SGnbSystemColor, type SGnbSystemPlacement, type GnbSystemColorTokens, type GnbSystemTopColorTokens, } from './gnbSystem.config';

package/dist/components/SGuide/README.md

@@ -17,6 +17,21 @@
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
+## Types
+
+### SGuideType
+
+```ts
+export type SGuideType = 'tip' | 'notion';
+```
+
+### SGuideMessage
+
+```ts
+/** 중첩 배열로 depth 표현 (원본 renderListItem 대응). 예: ['상위', ['하위1', '하위2']] */
+export type SGuideMessage = string | SGuideMessage[];
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SIcon/README.md

@@ -20,6 +20,7 @@
 
 ### Used by
 
+ - [SAccountListBox](../SAccountListBox)
  - [SButton](../SButton)
  - [SCallout](../SCallout)
  - [SCheckbox](../SCheckbox)
@@ -30,11 +31,13 @@
  - [SDateRangePicker](../SDateRangePicker)
  - [SDraggableItem](../SDraggableItem)
  - [SDropdownButton](../SDropdownButton)
+ - [SEditor](../SEditor)
  - [SExpansionItem](../SExpansionItem)
  - [SField](../SField)
  - [SFilePicker](../SFilePicker)
  - [SGhostButton](../SGhostButton)
  - [SGnb](../SGnb)
+ - [SGnbSystem](../SGnbSystem)
  - [SGuide](../SGuide)
  - [SImage](../SImage)
  - [SKeyValueTable](../SKeyValueTable)
@@ -43,9 +46,11 @@
  - [SNumberInput](../SNumberInput)
  - [SPagination](../SPagination)
  - [SPopover](../SPopover)
+ - [SSearchInput](../SSearchInput)
  - [SSectionHeaderCard](../SSectionHeaderCard)
  - [SSelect](../SSelect)
  - [SStepper](../SStepper)
+ - [SSystemActionButton](../SSystemActionButton)
  - [STable](../STable)
  - [STag](../STag)
  - [STextLink](../STextLink)
@@ -58,6 +63,7 @@
 
 ```mermaid
 graph TD;
+  SAccountListBox --> SIcon
   SButton --> SIcon
   SCallout --> SIcon
   SCheckbox --> SIcon
@@ -68,11 +74,13 @@ graph TD;
   SDateRangePicker --> SIcon
   SDraggableItem --> SIcon
   SDropdownButton --> SIcon
+  SEditor --> SIcon
   SExpansionItem --> SIcon
   SField --> SIcon
   SFilePicker --> SIcon
   SGhostButton --> SIcon
   SGnb --> SIcon
+  SGnbSystem --> SIcon
   SGuide --> SIcon
   SImage --> SIcon
   SKeyValueTable --> SIcon
@@ -81,9 +89,11 @@ graph TD;
   SNumberInput --> SIcon
   SPagination --> SIcon
   SPopover --> SIcon
+  SSearchInput --> SIcon
   SSectionHeaderCard --> SIcon
   SSelect --> SIcon
   SStepper --> SIcon
+  SSystemActionButton --> SIcon
   STable --> SIcon
   STag --> SIcon
   STextLink --> SIcon

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

@@ -17,6 +17,6 @@ export interface SIconProps {
 }
 /**
  * SIcon — sd-icon 포팅.
- * 94개 SVG(icons.gen.tsx)를 currentColor 기반으로 렌더한다.
+ * icons.gen.tsx 의 SVG 를 currentColor 기반으로 렌더한다.
  */
 export declare const SIcon: import("react").ForwardRefExoticComponent<SIconProps & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -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/SInput/README.md

@@ -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;
@@ -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

@@ -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

@@ -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

@@ -11,7 +11,6 @@
 | `children?` | `ReactNode` | — | 리스트 컨테이너 내부에 렌더링할 내용 |
 | `useGap?` | `boolean` | `false` | 리스트 아이템 사이 gap 토큰 적용 여부 |
 | `usePadding?` | `boolean` | `false` | 리스트 컨테이너 padding 토큰 적용 여부 |
-| `separator?` | `boolean` | `false` | 아이템 하단 구분선 표시 여부. 테두리를 가진 아이템(`bordered`)에는 쓰지 않는다 |
 
 ## Dependencies
 
@@ -20,10 +19,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

@@ -6,7 +6,5 @@ export interface SListProps extends HTMLAttributes<HTMLDivElement> {
     useGap?: boolean;
     /** 리스트 컨테이너 padding 토큰 적용 여부 */
     usePadding?: boolean;
-    /** 아이템 하단 구분선 표시 여부. 테두리를 가진 아이템(`bordered`)에는 쓰지 않는다 */
-    separator?: boolean;
 }
 export declare const SList: import("react").ForwardRefExoticComponent<SListProps & import("react").RefAttributes<HTMLDivElement>>;

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';