sellmate-design-system-react 9.0.0-beta.7 → 9.0.0-beta.71

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

@@ -3,9 +3,15 @@ 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 alignCenter: (p: IconRenderProps) => import("react").JSX.Element;
     readonly alignKorean: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly alignLeft: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly alignMiddle: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly alignRight: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly alignTop: (p: IconRenderProps) => import("react").JSX.Element;
     readonly archive: (p: IconRenderProps) => import("react").JSX.Element;
     readonly arrowDown: (p: IconRenderProps) => import("react").JSX.Element;
     readonly arrowLeft: (p: IconRenderProps) => import("react").JSX.Element;
@@ -13,8 +19,10 @@ export declare const ICONS: {
     readonly arrowUp: (p: IconRenderProps) => import("react").JSX.Element;
     readonly asterisk: (p: IconRenderProps) => import("react").JSX.Element;
     readonly attachFile: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly back: (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;
@@ -25,6 +33,7 @@ export declare const ICONS: {
     readonly caretLeft: (p: IconRenderProps) => import("react").JSX.Element;
     readonly caretRight: (p: IconRenderProps) => import("react").JSX.Element;
     readonly caretUp: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly chat: (p: IconRenderProps) => import("react").JSX.Element;
     readonly check: (p: IconRenderProps) => import("react").JSX.Element;
     readonly checkFill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly checkOutline: (p: IconRenderProps) => import("react").JSX.Element;
@@ -39,28 +48,36 @@ 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 connect: (p: IconRenderProps) => import("react").JSX.Element;
     readonly copy: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly counsel: (p: IconRenderProps) => import("react").JSX.Element;
     readonly coupon: (p: IconRenderProps) => import("react").JSX.Element;
     readonly dashboard: (p: IconRenderProps) => import("react").JSX.Element;
     readonly date: (p: IconRenderProps) => import("react").JSX.Element;
-    readonly delete: (p: IconRenderProps) => import("react").JSX.Element;
     readonly dot: (p: IconRenderProps) => import("react").JSX.Element;
     readonly download: (p: IconRenderProps) => import("react").JSX.Element;
     readonly drag: (p: IconRenderProps) => import("react").JSX.Element;
     readonly edit: (p: IconRenderProps) => import("react").JSX.Element;
     readonly etc: (p: IconRenderProps) => import("react").JSX.Element;
     readonly event: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly focus: (p: IconRenderProps) => import("react").JSX.Element;
     readonly global: (p: IconRenderProps) => import("react").JSX.Element;
     readonly helpFill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly helpOutline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly history: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly home: (p: IconRenderProps) => import("react").JSX.Element;
     readonly image: (p: IconRenderProps) => import("react").JSX.Element;
     readonly inline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly launcher: (p: IconRenderProps) => import("react").JSX.Element;
     readonly leftRight: (p: IconRenderProps) => import("react").JSX.Element;
     readonly line: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly link: (p: IconRenderProps) => import("react").JSX.Element;
     readonly location: (p: IconRenderProps) => import("react").JSX.Element;
     readonly logout: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly megaphone: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly messageClose: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly messageOpen: (p: IconRenderProps) => import("react").JSX.Element;
     readonly minus: (p: IconRenderProps) => import("react").JSX.Element;
     readonly monitor: (p: IconRenderProps) => import("react").JSX.Element;
     readonly new: (p: IconRenderProps) => import("react").JSX.Element;
@@ -76,6 +93,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;
@@ -84,6 +102,7 @@ export declare const ICONS: {
     readonly shield: (p: IconRenderProps) => import("react").JSX.Element;
     readonly sidebar: (p: IconRenderProps) => import("react").JSX.Element;
     readonly star: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly stop: (p: IconRenderProps) => import("react").JSX.Element;
     readonly store: (p: IconRenderProps) => import("react").JSX.Element;
     readonly synchronize: (p: IconRenderProps) => import("react").JSX.Element;
     readonly thumbsDown: (p: IconRenderProps) => import("react").JSX.Element;

package/dist/components/SImage/README.md

@@ -15,10 +15,13 @@
 | `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 등) |
+| `previewOnHover?` | `boolean` | `false` | 호버하면 큰 이미지를 포털로 띄운다. 썸네일이 작아 내용을 알아볼 수 없는 자리에 쓴다 |
+| `previewSrc?` | `string` | — | 미리보기에 띄울 경로. 원본 URL 이 썸네일과 다를 때 준다 (기본: `src` 와 같은 경로) |
+| `previewSize?` | `number` | `PREVIEW_MAX_SIZE` | 미리보기 상자의 한 변(px). 상자는 정사각형이고 이미지는 `contain` 으로 들어간다. **200px 이 상한이라 더 큰 값을 줘도 200 으로 잘린다** — 미리보기가 화면을 덮지 않게 하는 규격이다. |
 
 #### Events
 
@@ -27,8 +30,26 @@
 | `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
 
+### Used by
+
+ - [SChatMessage](../SChatMessage)
+
 ### Depends on
 
 - [SCircleProgress](../SCircleProgress)
@@ -40,5 +61,6 @@
 graph TD;
   SImage --> SCircleProgress
   SImage --> SIcon
+  SChatMessage --> SImage
   style SImage fill:#f9f,stroke:#333,stroke-width:4px
 ```

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

@@ -19,23 +19,26 @@ export interface SImageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoa
      * 캐시된 이미지에서 스피너가 한 프레임 번쩍이는 것을 막는다.
      */
     loadingShowDelay?: number;
-    /** 로딩 중에도 스피너를 그리지 않는다 */
-    noSpinner?: boolean;
+    /** 로딩 중 스피너를 그릴지. 끄면 `loadingSlot` 도 없을 때 로딩 표시가 아무것도 남지 않는다. */
+    showSpinner?: boolean;
     /** 로딩 중 표시를 직접 지정한다 (기본: 스피너) */
     loadingSlot?: ReactNode;
     /** 실패·빈 상태 표시를 직접 지정한다 (기본: 빈 이미지 아이콘) */
     errorSlot?: ReactNode;
     /** 안쪽 `<img>` 로 넘길 네이티브 속성 (srcSet · sizes · crossOrigin · draggable 등) */
     imgProps?: ImgHTMLAttributes<HTMLImageElement>;
+    /** 호버하면 큰 이미지를 포털로 띄운다. 썸네일이 작아 내용을 알아볼 수 없는 자리에 쓴다 */
+    previewOnHover?: boolean;
+    /** 미리보기에 띄울 경로. 원본 URL 이 썸네일과 다를 때 준다 (기본: `src` 와 같은 경로) */
+    previewSrc?: string;
+    /**
+     * 미리보기 상자의 한 변(px). 상자는 정사각형이고 이미지는 `contain` 으로 들어간다.
+     * **200px 이 상한이라 더 큰 값을 줘도 200 으로 잘린다** — 미리보기가 화면을 덮지 않게 하는 규격이다.
+     */
+    previewSize?: number;
     /** 로드 완료. 로드된 src 를 넘긴다 */
     onLoad?: (src: string) => void;
     /** 로드 실패 */
     onError?: (event: SyntheticEvent<HTMLImageElement>) => void;
 }
-/**
- * SImage — 이미지 로딩·실패 상태를 스스로 표현하는 이미지 상자.
- *
- * 로딩 중에는 스피너, `src` 가 없거나 로드에 실패하면 빈 이미지 아이콘을 컨테이너 높이에
- * 비례한 크기로 가운데에 그린다.
- */
 export declare const SImage: import("react").ForwardRefExoticComponent<SImageProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SInput/README.md

@@ -18,11 +18,12 @@
 | `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` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다) |
 | `labelWidth?` | `number \| string` | — |  |
 | `labelTooltip?` | `string` | — | 레이블 툴팁 텍스트 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |
@@ -31,7 +32,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 +49,7 @@
 
 ### Used by
 
+ - [SEditor](../SEditor)
  - [SKeyValueTable](../SKeyValueTable)
 
 ### Depends on
@@ -61,6 +63,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

@@ -1,9 +1,10 @@
 import { type InputHTMLAttributes, type CSSProperties, type ReactNode } from 'react';
-import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition } from '../SField';
 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,15 +30,17 @@ 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;
+    /** 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다) */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     /** 레이블 툴팁 텍스트 */
     labelTooltip?: string;
@@ -49,7 +52,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

@@ -10,9 +10,11 @@
 |------|------|---------|-------------|
 | `fields?` | `SKeyValueField[][]` | `[]` | 2차원 배열. row → [th|td] 필드들 |
 | `values?` | `Record<string, unknown>` | `{}` | field name을 key로 하는 값 객체 (`{ [name]: value }`). 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다. `onChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다. |
+| `dense?` | `boolean` | `false` | 행을 좁게 그린다 — 셀의 상하 패딩(8px → 6px)과 짝이 되는 최소 높이(44px → 32px)를 함께 내린다. 한 화면에 행이 많아 훑어보기가 목적인 상세 조회 표에 쓴다. 좌우 패딩과 글자 크기는 그대로다. **`STable` 과 달리 밀도 토글이 붙지 않는 고정값이다** — 준 값 그대로 그린다. 읽기 전용(`text`) 행에서만 실제로 좁아진다: 폼 필드 행은 필드 높이가 행 높이를 정한다 |
 | `search?` | `boolean` | `false` | 우측 검색 패널 |
 | `radius?` | `'default' \| 'useTop' \| 'full'` | `'default'` | border-radius 제어 |
 | `bordered?` | `boolean` | `true` | 바깥 테두리. 기본은 `true`. `SSectionHeaderCard` 의 `padding="none"` 안에 넣어 카드 가장자리까지 채울 때 `false` 로 끈다 — 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다. |
+| `fieldWidth?` | `'auto' \| 'fill'` | `'auto'` | 필드 폭 정책 — **표 하나가 한 번에 정한다**. 필드마다 따로 정하지 않는다. 표는 모든 컨트롤에 `width="100%"` 를 넘기지만, 값 길이를 아는 컨트롤(날짜·기간 피커)은 자기 상한에서 멈춘다. 그래서 한 행에 그런 필드가 섞이면 **왼쪽 끝만 맞고 오른쪽 끝이 어긋나** 보인다. - `'auto'`(기본) — 컨트롤이 자기 폭을 정한다. 상한이 그대로 살아 있어 폭이 "이 칸에 얼마나 긴 값이 들어가는가" 를 알려준다. 등록·수정 폼처럼 입력 길이를 짐작하게 하는 편이 나은 표에 쓴다. - `'fill'` — 모든 컨트롤이 셀 끝까지 찬다. 셀 폭은 열 수와 `tdColSpan` 이 정하므로 오른쪽 끝이 저절로 맞는다. 조회 필터처럼 가지런함이 우선인 표에 쓴다. 대신 폭이 값 길이를 알려주지 않는다 — 날짜 칸이 메모 칸만큼 넓어진다. 개별 필드만 예외로 두려면 그 필드의 `options.maxWidth` 를 준다 — 이 정책보다 우선한다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -23,6 +25,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 +123,7 @@
 - [SNumberInput](../SNumberInput)
 - [SRadio](../SRadio)
 - [SSelect](../SSelect)
+- [SSwitch](../SSwitch)
 - [STextarea](../STextarea)
 - [STooltip](../STooltip)
 
@@ -54,6 +141,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[];
@@ -100,6 +104,13 @@ export interface SKeyValueTableProps {
      * `onChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다.
      */
     values?: Record<string, unknown>;
+    /**
+     * 행을 좁게 그린다 — 셀의 상하 패딩(8px → 6px)과 짝이 되는 최소 높이(44px → 32px)를 함께
+     * 내린다. 한 화면에 행이 많아 훑어보기가 목적인 상세 조회 표에 쓴다. 좌우 패딩과 글자 크기는
+     * 그대로다. **`STable` 과 달리 밀도 토글이 붙지 않는 고정값이다** — 준 값 그대로 그린다.
+     * 읽기 전용(`text`) 행에서만 실제로 좁아진다: 폼 필드 행은 필드 높이가 행 높이를 정한다
+     */
+    dense?: boolean;
     /** 우측 검색 패널 */
     search?: boolean;
     /** border-radius 제어 */
@@ -111,6 +122,22 @@ export interface SKeyValueTableProps {
      * 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다.
      */
     bordered?: boolean;
+    /**
+     * 필드 폭 정책 — **표 하나가 한 번에 정한다**. 필드마다 따로 정하지 않는다.
+     *
+     * 표는 모든 컨트롤에 `width="100%"` 를 넘기지만, 값 길이를 아는 컨트롤(날짜·기간 피커)은
+     * 자기 상한에서 멈춘다. 그래서 한 행에 그런 필드가 섞이면 **왼쪽 끝만 맞고 오른쪽 끝이
+     * 어긋나** 보인다.
+     *
+     * - `'auto'`(기본) — 컨트롤이 자기 폭을 정한다. 상한이 그대로 살아 있어 폭이 "이 칸에 얼마나 긴 값이 들어가는가" 를
+     *   알려준다. 등록·수정 폼처럼 입력 길이를 짐작하게 하는 편이 나은 표에 쓴다.
+     * - `'fill'` — 모든 컨트롤이 셀 끝까지 찬다. 셀 폭은 열 수와 `tdColSpan` 이 정하므로 오른쪽
+     *   끝이 저절로 맞는다. 조회 필터처럼 가지런함이 우선인 표에 쓴다. 대신 폭이 값 길이를
+     *   알려주지 않는다 — 날짜 칸이 메모 칸만큼 넓어진다.
+     *
+     * 개별 필드만 예외로 두려면 그 필드의 `options.maxWidth` 를 준다 — 이 정책보다 우선한다.
+     */
+    fieldWidth?: 'auto' | 'fill';
     /** 값 변경 (sdChange) */
     onChange?: (detail: SKeyValueChangeDetail) => void;
     /** 검색 클릭 (sdSearch) */
@@ -119,5 +146,5 @@ export interface SKeyValueTableProps {
     style?: CSSProperties;
 }
 /** SKeyValueTable — sd-key-value-table 포팅. th/td 폼 레이아웃 + 필드 렌더러. */
-export declare function SKeyValueTable({ fields, values, search, radius, bordered, onChange, onSearch, className, style, }: SKeyValueTableProps): import("react").JSX.Element | null;
+export declare function SKeyValueTable({ fields, values, dense, search, radius, bordered, fieldWidth, onChange, onSearch, className, style, }: SKeyValueTableProps): import("react").JSX.Element | null;
 export {};

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

@@ -0,0 +1,81 @@
+# SLauncherListBox
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SLauncherListBox
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items?` | `SLauncherListBoxItem[]` | — | 목록에 세울 서비스. 비어 있으면 아무것도 렌더하지 않는다. **순서는 넘긴 대로가 아니라 카탈로그 순서다**(`LAUNCHER_SERVICES`) — 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다. 같은 서비스를 두 번 넘기면 처음 것만 선다. |
+| `ariaLabel?` | `string` | — | 목록(ul)의 접근성 레이블 |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onSelect` | `(service: SLauncherService) => void` | 서비스를 고름. **가는 것은 이 콜백이 하지 않는다** — 줄이 링크라 브라우저가 `href` 를 새 탭으로 연다. 고른 것을 앱이 알아야 할 때만(기록·목록 닫기) 준다. 갈 수 없는 줄(주소가 없거나 카탈로그가 아직 출시 전으로 든 서비스)은 눌리지 않으므로 여기로 오지 않는다. |
+
+## Types
+
+### SLauncherListBoxItem
+
+```ts
+/** 리스트박스의 한 줄 — 옮겨 갈 수 있는 서비스 하나 */
+export interface SLauncherListBoxItem {
+  /**
+   * 어느 서비스인가. **로고·표기·이름·상태 태그는 이 키 하나로 정해진다** — 카탈로그
+   * (`LAUNCHER_SERVICE_CATALOG`)가 들고 있으므로 앱이 넘기지 않는다.
+   */
+  service: SLauncherService;
+  /**
+   * 새 탭에서 열 주소. **디자인 시스템은 주소를 들지 않는다** — 앱마다 QA·실서버가 달라
+   * 여기서 관리할 수 없다.
+   *
+   * **주소를 주는 것이 곧 "갈 수 있다"는 뜻이다.** 비우면 줄은 목록에 남되 눌리지 않고
+   * 물러난다 — 지금 보고 있는 서비스든, 이 앱이 계약하지 않은 서비스든 갈 곳이 없기는 같다.
+   * 못 가는 줄을 막는 별도의 prop 은 없다.
+   */
+  href?: string;
+}
+```
+
+### SLauncherService
+
+```ts
+export type SLauncherService = (typeof LAUNCHER_SERVICES)[number];
+```
+
+### LAUNCHER_SERVICES
+
+```ts
+/**
+ * 런처에 설 수 있는 서비스 — **목록의 순서이기도 하다.**
+ * 앱이 넘긴 순서가 아니라 이 순서로 선다: 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다.
+ */
+export const LAUNCHER_SERVICES = ['sellmate', 'wms', 'account', 'crm'] as const;
+```
+
+## Dependencies
+
+### Used by
+
+ - [SGnb](../SGnb)
+
+### Depends on
+
+- [SIcon](../SIcon)
+- [SLogo](../SLogo)
+- [STag](../STag)
+
+### Graph
+
+```mermaid
+graph TD;
+  SLauncherListBox --> SIcon
+  SLauncherListBox --> SLogo
+  SLauncherListBox --> STag
+  SGnb --> SLauncherListBox
+  style SLauncherListBox fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SLauncherListBox/SLauncherListBox.d.ts

@@ -0,0 +1,67 @@
+import { type HTMLAttributes } from 'react';
+import { type SLauncherService } from './launcherListBox.config';
+/** 리스트박스의 한 줄 — 옮겨 갈 수 있는 서비스 하나 */
+export interface SLauncherListBoxItem {
+    /**
+     * 어느 서비스인가. **로고·표기·이름·상태 태그는 이 키 하나로 정해진다** — 카탈로그
+     * (`LAUNCHER_SERVICE_CATALOG`)가 들고 있으므로 앱이 넘기지 않는다.
+     */
+    service: SLauncherService;
+    /**
+     * 새 탭에서 열 주소. **디자인 시스템은 주소를 들지 않는다** — 앱마다 QA·실서버가 달라
+     * 여기서 관리할 수 없다.
+     *
+     * **주소를 주는 것이 곧 "갈 수 있다"는 뜻이다.** 비우면 줄은 목록에 남되 눌리지 않고
+     * 물러난다 — 지금 보고 있는 서비스든, 이 앱이 계약하지 않은 서비스든 갈 곳이 없기는 같다.
+     * 못 가는 줄을 막는 별도의 prop 은 없다.
+     */
+    href?: string;
+}
+export interface SLauncherListBoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /**
+     * 목록에 세울 서비스. 비어 있으면 아무것도 렌더하지 않는다.
+     *
+     * **순서는 넘긴 대로가 아니라 카탈로그 순서다**(`LAUNCHER_SERVICES`) — 같은 런처가 앱마다
+     * 다른 순서로 뜨면 사용자가 매번 다시 찾는다. 같은 서비스를 두 번 넘기면 처음 것만 선다.
+     */
+    items?: SLauncherListBoxItem[];
+    /**
+     * 서비스를 고름. **가는 것은 이 콜백이 하지 않는다** — 줄이 링크라 브라우저가 `href` 를
+     * 새 탭으로 연다. 고른 것을 앱이 알아야 할 때만(기록·목록 닫기) 준다.
+     *
+     * 갈 수 없는 줄(주소가 없거나 카탈로그가 아직 출시 전으로 든 서비스)은 눌리지 않으므로
+     * 여기로 오지 않는다.
+     */
+    onSelect?: (service: SLauncherService) => void;
+    /** 목록(ul)의 접근성 레이블 */
+    ariaLabel?: string;
+}
+/**
+ * SLauncherListBox — GNB 의 앱런처 버튼을 눌렀을 때 뜨는 서비스 목록.
+ *
+ * 한 줄이 서비스 하나다: 위에 브랜드 로고(+ 상태 태그), 아래에 한글 이름.
+ *
+ * **앱이 넘기는 것은 서비스 키와 주소 둘뿐이다.** 로고·서비스 표기·이름·상태 태그는 카탈로그
+ * (`LAUNCHER_SERVICE_CATALOG`)가 서비스마다 한 모습으로 정해 두므로 앱이 넘기지 않는다 —
+ * 넘기게 하면 같은 서비스가 앱마다 다른 이름·색·문구로 선다.
+ *
+ * **주소는 카탈로그에 두지 않는다.** 앱마다 QA·실서버 주소가 달라 디자인 시스템이 관리할 수 없다.
+ * 앱이 `href` 로 넘기면 줄이 링크가 되어 **새 탭에서 열린다** — 가운데 클릭·⌘클릭도 그대로 듣는다.
+ * **주소를 주는 것이 곧 "갈 수 있다"는 뜻이다**: 주지 않은 줄은 눌리지 않는다(지금 보고 있는
+ * 서비스이거나 이 앱이 계약하지 않은 서비스). 줄을 막는 별도의 prop 은 없다.
+ *
+ * **줄에 얹으면 "여기서 나간다"는 것이 드러난다** — 배경이 옅은 파랑으로 물들고 이름이 한 단계
+ * 진해지며, 오른쪽 끝에 페이지 이동 아이콘이 떠오른다. 아이콘 자리는 늘 비워 두므로 얹었다 뗄 때
+ * 글자가 밀리지 않는다.
+ *
+ * 갈 수 없는 줄은 눌리지 않고 로고는 색이 빠지며 이름은 비활성 글자색이 된다. **목록에서 빼지
+ * 않는 것이 기본이다**: 그 서비스가 있다는 사실과 지금은 못 간다는 사실을 함께 알리는 것이 런처의
+ * 일이다. 출시 전인 서비스는 카탈로그가 `출시예정` 태그와 함께 막아 두므로 앱이 할 일이 없다.
+ *
+ * **이 컴포넌트는 패널만 그린다.** 런처 버튼에 붙여 띄우는 것은 `SGnb` 의 `launcher` 가 맡으므로
+ * (`launcher.items` 에 이 목록을 넘긴다), 앱이 직접 팝오버를 조립할 일은 없다.
+ *
+ * 토큰은 `--cmp-gnb-launcher-listBox-*`(패널) · `--cmp-gnb-launcher-button-*`(줄).
+ * **줄 높이는 상수가 아니라 여백에서 나온다** — 토큰이 바뀌면 따라 바뀐다.
+ */
+export declare const SLauncherListBox: import("react").ForwardRefExoticComponent<SLauncherListBoxProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { SLauncherListBox, type SLauncherListBoxProps, type SLauncherListBoxItem, } from './SLauncherListBox';
+export { LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_LOGO_SERVICE_GAP, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, type SLauncherService, type SLauncherServiceEntry, } from './launcherListBox.config';