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

package/dist/components/SField/SField.d.ts

@@ -3,6 +3,7 @@ import { type SIconName } from '../SIcon';
 import { type STooltipProps } from '../STooltip';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
+import { type SFieldWidth } from '../../lib/field-width';
 export type SFieldSize = 'sm' | 'md';
 export type SFieldAddonAlign = 'start' | 'center' | 'end';
 export type SFieldStatus = 'default' | 'pass' | 'error';
@@ -57,12 +58,29 @@ export interface SFieldProps {
     /** 읽기 전용 (회색 배경) */
     readOnly?: boolean;
     /**
-     * 컨트롤 너비 (숫자=px). 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다.
+     * 컨트롤 너비. 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다.
      * 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다.
+     *
+     * **폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`)으로 준다** — `--cmp-field-width-*` 토큰으로 풀리므로
+     * 토큰이 바뀌면 화면이 따라간다. 등급은 `maxLength`(= 스키마 상한)로 고르고, 상한이 `xl` 을
+     * 넘거나 상한이 없으면 `"100%"` 로 둔다. (`sellmate/field-width-grade` 가 검사한다)
+     * 숫자는 px, 그 밖의 문자열은 CSS 길이 그대로다.
      */
-    width?: number | string;
-    /** 컨트롤 최소 너비 (숫자=px). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 */
-    minWidth?: number | string;
+    width?: SFieldWidth;
+    /** 컨트롤 최소 너비 (등급 · 숫자=px · CSS 길이). 하한선만 지정하며 필드는 계속 부모 폭을 채운다 */
+    minWidth?: SFieldWidth;
+    /**
+     * 컨트롤 최대 너비 (등급 · 숫자=px · CSS 길이). 상한선만 지정하며 필드는 그 아래에서 부모 폭을 채운다.
+     *
+     * `width` 와 달리 hug 로 전환하지 않는다 — 부모가 좁으면 같이 좁아지고, 넓어도 여기서 멈춘다.
+     * 값 길이가 정해진 컨트롤(날짜·시간)이 `width="100%"` 를 받아 행 전체로 늘어나는 것을 막는 데 쓴다.
+     *
+     * **라벨은 상한에 들어가지 않는다** — 라벨은 컨트롤의 형제라 이 상한 밖이다.
+     * `addonLabel` 은 테두리 박스 안이라 상한을 나눠 먹으므로, `labelWidth`(= addon 폭)만큼
+     * 상한을 자동으로 늘린다. addon 이 있는데 `labelWidth` 가 없으면 폭을 알 수 없어 상한을
+     * 걸지 않는다 — 컨트롤이 잘리는 것보다 넓은 편이 낫다.
+     */
+    maxWidth?: SFieldWidth;
     /** 멀티라인(textarea) — 컨트롤 높이를 고정하지 않고 min-height만 적용 */
     multiline?: boolean;
     /**

package/dist/components/SFilePicker/README.md

@@ -35,7 +35,7 @@
 | `hint?` | `string` | — |  |
 | `error?` | `boolean` | — |  |
 | `errorMessage?` | `string` | — |  |
-| `width?` | `number \| string` | — |  |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -46,6 +46,20 @@
 | `onValueChange` | `(value: SFilePickerValue) => void` | 파일 변경 (sdUpdate) |
 | `onReject` | `(detail: { files: File[]; reason: SFilePickerRejectReason }) => void` | 제한 초과 거부 (sdReject) |
 
+## Types
+
+### SFilePickerValue
+
+```ts
+export type SFilePickerValue = File[] | File | null;
+```
+
+### SFilePickerRejectReason
+
+```ts
+export type SFilePickerRejectReason = 'max-file-size' | 'max-total-size' | 'max-files';
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SFilePicker/SFilePicker.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 type SFilePickerValue = File[] | File | null;
 export type SFilePickerRejectReason = 'max-file-size' | 'max-total-size' | 'max-files';
 export interface SFilePickerProps {
@@ -45,7 +46,12 @@ export interface SFilePickerProps {
     hint?: string;
     error?: boolean;
     errorMessage?: string;
-    width?: number | string;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
+     * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
+     */
+    width?: SFieldWidth;
     className?: string;
     style?: CSSProperties;
 }

package/dist/components/SFooter/README.md

@@ -16,13 +16,36 @@
 | `leftClassName?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
+## Types
+
+### SFooterBg
+
+```ts
+export type SFooterBg = 'white' | 'grey';
+```
+
+### SFooterButton
+
+```ts
+export interface SFooterButton {
+  label?: string;
+  color?: SButtonColor;
+  outline?: boolean;
+  size?: SButtonSize;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+```
+
 ## Dependencies
 
 ### Used by
 
  - [SActionModal](../SActionModal)
+ - [SCard](../SCard)
  - [SDrawer](../SDrawer)
  - [SPopup](../SPopup)
+ - [SSectionHeaderCard](../SSectionHeaderCard)
 
 ### Depends on
 
@@ -34,7 +57,9 @@
 graph TD;
   SFooter --> SButton
   SActionModal --> SFooter
+  SCard --> SFooter
   SDrawer --> SFooter
   SPopup --> SFooter
+  SSectionHeaderCard --> SFooter
   style SFooter fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SFooter/SFooter.d.ts

@@ -11,7 +11,7 @@ export interface SFooterButton {
 }
 /**
  * @internal
- * 모달·드로어·팝업 하단 영역 공통 props.
+ * 모달·드로어·팝업·카드 하단 영역 공통 props.
  */
 export interface SFooterProps {
     /** 배경색 */
@@ -27,10 +27,11 @@ export interface SFooterProps {
     style?: CSSProperties;
 }
 /**
- * SFooter — overlay 계열 내부 전용 footer.
+ * SFooter — 오버레이·카드 내부 전용 footer.
  *
  * @internal
- * SActionModal/SConfirmModal/SDrawer/SPopup 의 하단 액션 영역만 공통화한다.
+ * SActionModal/SConfirmModal/SDrawer/SPopup 과 SCard/SSectionHeaderCard 의 하단 액션 영역만
+ * 공통화한다. 소비자는 호스트 컴포넌트의 `footerLeft`·`button` prop 으로만 닿는다 —
  * 패키지 public export 에 추가하지 말 것.
  */
 export declare function SFooter({ bg, left, button, children, className, leftClassName, style, }: SFooterProps): import("react").JSX.Element;

package/dist/components/SForm/README.md

@@ -29,3 +29,14 @@
 | `reset` | `() => void` | resetValidation 별칭 — sd-form sdReset 대응. 값 리셋은 소비자(value/onChange) 책임 |
 | `focusFirstInvalid` | `() => void` | 첫 번째 실패 필드로 포커스 이동 |
 
+## Types
+
+### SFormValidationError
+
+```ts
+export interface SFormValidationError {
+  /** 검증에 실패한 필드 name 목록 (DOM 순서) */
+  names: string[];
+}
+```
+

package/dist/components/SGhostButton/README.md

@@ -27,6 +27,20 @@
 |-------|------|-------------|
 | `onClick` | `(e: MouseEvent<HTMLButtonElement>) => void` | 클릭 (sdClick) |
 
+## Types
+
+### SGhostButtonSize
+
+```ts
+export type SGhostButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+```
+
+### SGhostButtonIntent
+
+```ts
+export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' | 'inverse';
+```
+
 ## Dependencies
 
 ### Used by
@@ -35,6 +49,7 @@
  - [SCalendar](../SCalendar)
  - [SChip](../SChip)
  - [SChipFilter](../SChipFilter)
+ - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SFilePicker](../SFilePicker)
  - [SGnb](../SGnb)
@@ -44,7 +59,8 @@
  - [SOverlayHeader](../SOverlayHeader)
  - [SPage](../SPage)
  - [SPopover](../SPopover)
- - [SSelect](../SSelect)
+ - [SSearchInput](../SSearchInput)
+ - [STable](../STable)
  - [STimePicker](../STimePicker)
  - [STimeRangePicker](../STimeRangePicker)
  - [SToast](../SToast)
@@ -66,6 +82,7 @@ graph TD;
   SCalendar --> SGhostButton
   SChip --> SGhostButton
   SChipFilter --> SGhostButton
+  SDatePicker --> SGhostButton
   SDateRangePicker --> SGhostButton
   SFilePicker --> SGhostButton
   SGnb --> SGhostButton
@@ -75,7 +92,8 @@ graph TD;
   SOverlayHeader --> SGhostButton
   SPage --> SGhostButton
   SPopover --> SGhostButton
-  SSelect --> SGhostButton
+  SSearchInput --> SGhostButton
+  STable --> SGhostButton
   STimePicker --> SGhostButton
   STimeRangePicker --> SGhostButton
   SToast --> SGhostButton

package/dist/components/SGnb/README.md

@@ -38,6 +38,51 @@
 | `onLauncherClick` | `() => void` | 앱런처(그리드) 버튼 클릭. 미지정 시 런처 버튼을 렌더하지 않는다. 접힘 레일(fix)에는 폴드 버튼만 남으므로 표시되지 않는다. |
 | `onMenuWidthChange` | `(width: number) => void` | 메뉴 폭이 확정될 때(드래그를 놓거나 방향키 조작). 드래그하는 동안에는 오지 않는다 |
 
+## Types
+
+### SGnbType
+
+```ts
+/** 메뉴 스타일: box = 라운드/좁은 들여쓰기, belt = 풀폭 행/넓은 들여쓰기 */
+export type SGnbType = 'box' | 'belt';
+```
+
+### SGnbHeader
+
+```ts
+/** 상단바 구조: fix = GNB 폭에 고정, full = 레이아웃 전폭 */
+export type SGnbHeader = 'fix' | 'full';
+```
+
+### SGnbColor
+
+```ts
+/** 색상(테마): light / dark */
+export type SGnbColor = 'light' | 'dark';
+```
+
+### SGnbMenuItem
+
+```ts
+/** GNB 메뉴 아이템 (재귀 트리). depth1 → depth2 → depth3. */
+export interface SGnbMenuItem {
+  /** 표시 텍스트 */
+  label: string;
+  /** 고유 식별값 (선택 상태 비교 기준) */
+  value: string;
+  /** depth1 전용 아이콘명 */
+  icon?: SIconName;
+  /** 우측 Tag 뱃지 텍스트 */
+  tag?: string;
+  /** 뱃지 색. 미지정 시 blue. */
+  tagColor?: STagColor;
+  /** 비활성 여부 */
+  disabled?: boolean;
+  /** 하위 아이템 (있으면 펼침/접힘 대상) */
+  children?: SGnbMenuItem[];
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SGnb/gnb.config.d.ts

@@ -48,6 +48,8 @@ export declare const GNB_MENU: Record<SGnbType, {
     depth1FontWeight: number;
     itemFontSize: number;
     itemLineHeight: number;
+    itemFontWeight: number;
+    itemFontWeightSelected: number;
 }>;
 /**
  * 색상(color 축). light → --cmp-gnb-light-* 색, dark → --cmp-gnb-dark-* 색
@@ -160,3 +162,8 @@ export declare function findGnbRailValue(items: SGnbMenuItem[], value: string):
 export declare function findGnbSiblingValues(items: SGnbMenuItem[], value: string): string[];
 /** value 로 선택된 아이템의 조상 value 목록(자기 자신 제외)을 반환 → 자동 펼침용 */
 export declare function findGnbAncestors(items: SGnbMenuItem[], value: string): string[];
+/**
+ * value 를 가진 아이템 아래의 **하위 가지**(children 을 가진 자손) value 목록을 반환.
+ * 부모를 펼칠 때 그 아래 가지도 전부 함께 펼치는 용도 — 리프는 펼침 대상이 아니라 제외한다.
+ */
+export declare function findGnbDescendantBranchValues(items: SGnbMenuItem[], value: string): string[];

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

@@ -30,6 +30,7 @@
  - [SDateRangePicker](../SDateRangePicker)
  - [SDraggableItem](../SDraggableItem)
  - [SDropdownButton](../SDropdownButton)
+ - [SEditor](../SEditor)
  - [SExpansionItem](../SExpansionItem)
  - [SField](../SField)
  - [SFilePicker](../SFilePicker)
@@ -43,6 +44,7 @@
  - [SNumberInput](../SNumberInput)
  - [SPagination](../SPagination)
  - [SPopover](../SPopover)
+ - [SSearchInput](../SSearchInput)
  - [SSectionHeaderCard](../SSectionHeaderCard)
  - [SSelect](../SSelect)
  - [SStepper](../SStepper)
@@ -68,6 +70,7 @@ graph TD;
   SDateRangePicker --> SIcon
   SDraggableItem --> SIcon
   SDropdownButton --> SIcon
+  SEditor --> SIcon
   SExpansionItem --> SIcon
   SField --> SIcon
   SFilePicker --> SIcon
@@ -81,6 +84,7 @@ graph TD;
   SNumberInput --> SIcon
   SPagination --> SIcon
   SPopover --> SIcon
+  SSearchInput --> SIcon
   SSectionHeaderCard --> SIcon
   SSelect --> SIcon
   SStepper --> 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

@@ -39,6 +39,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 +77,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

@@ -12,6 +12,7 @@
 | `values?` | `Record<string, unknown>` | `{}` | field name을 key로 하는 값 객체 (`{ [name]: value }`). 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다. `onChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다. |
 | `search?` | `boolean` | `false` | 우측 검색 패널 |
 | `radius?` | `'default' \| 'useTop' \| 'full'` | `'default'` | border-radius 제어 |
+| `bordered?` | `boolean` | `true` | 바깥 테두리. 기본은 `true`. `SSectionHeaderCard` 의 `padding="none"` 안에 넣어 카드 가장자리까지 채울 때 `false` 로 끈다 — 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -22,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
@@ -36,6 +121,7 @@
 - [SNumberInput](../SNumberInput)
 - [SRadio](../SRadio)
 - [SSelect](../SSelect)
+- [SSwitch](../SSwitch)
 - [STextarea](../STextarea)
 - [STooltip](../STooltip)
 
@@ -53,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[];
@@ -104,6 +108,13 @@ export interface SKeyValueTableProps {
     search?: boolean;
     /** border-radius 제어 */
     radius?: 'default' | 'useTop' | 'full';
+    /**
+     * 바깥 테두리. 기본은 `true`.
+     *
+     * `SSectionHeaderCard` 의 `padding="none"` 안에 넣어 카드 가장자리까지 채울 때 `false` 로 끈다 —
+     * 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다.
+     */
+    bordered?: boolean;
     /** 값 변경 (sdChange) */
     onChange?: (detail: SKeyValueChangeDetail) => void;
     /** 검색 클릭 (sdSearch) */
@@ -112,5 +123,5 @@ export interface SKeyValueTableProps {
     style?: CSSProperties;
 }
 /** SKeyValueTable — sd-key-value-table 포팅. th/td 폼 레이아웃 + 필드 렌더러. */
-export declare function SKeyValueTable({ fields, values, search, radius, onChange, onSearch, className, style, }: SKeyValueTableProps): import("react").JSX.Element | null;
+export declare function SKeyValueTable({ fields, values, search, radius, bordered, onChange, onSearch, className, style, }: SKeyValueTableProps): import("react").JSX.Element | null;
 export {};

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

package/dist/components/SLinearProgress/README.md

@@ -15,3 +15,11 @@
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
+## Types
+
+### SLinearProgressType
+
+```ts
+export type SLinearProgressType = 'primary' | 'error' | 'complete';
+```
+