sellmate-design-system-react 9.0.0-beta.3 → 9.0.0-beta.30

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
@@ -34,7 +48,7 @@
  - [SBarcodeInput](../SBarcodeInput)
  - [SCalendar](../SCalendar)
  - [SChip](../SChip)
- - [SChipFilter](../SChipFilter)
+ - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SFilePicker](../SFilePicker)
  - [SGnb](../SGnb)
@@ -44,7 +58,8 @@
  - [SOverlayHeader](../SOverlayHeader)
  - [SPage](../SPage)
  - [SPopover](../SPopover)
- - [SSelect](../SSelect)
+ - [SSearchInput](../SSearchInput)
+ - [STable](../STable)
  - [STimePicker](../STimePicker)
  - [STimeRangePicker](../STimeRangePicker)
  - [SToast](../SToast)
@@ -65,7 +80,7 @@ graph TD;
   SBarcodeInput --> SGhostButton
   SCalendar --> SGhostButton
   SChip --> SGhostButton
-  SChipFilter --> SGhostButton
+  SDatePicker --> SGhostButton
   SDateRangePicker --> SGhostButton
   SFilePicker --> SGhostButton
   SGnb --> SGhostButton
@@ -75,7 +90,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

@@ -26,6 +26,7 @@
 | `resizable?` | `boolean` | `false` | 메뉴 폭을 드래그로 조절할 수 있게 한다. 레일 폭은 고정이고 **메뉴 컬럼만** 늘고 준다. 조절선은 GNB 컬럼의 오른쪽 경계 전체다 — fix 는 상단바 높이까지, full 은 상단바가 전폭이라 본문 높이까지. 접혀 있거나 깔 메뉴가 없으면(레일 리프가 활성) 조절선이 나오지 않는다. |
 | `menuWidth?` | `number` | — | 메뉴 폭(px). 주면 controlled — onMenuWidthChange 로 직접 갱신해야 움직인다 |
 | `defaultMenuWidth?` | `number` | — | 메뉴 초기 폭(px). uncontrolled |
+| `system?` | `ReactNode` | — | GNB 맨 아래에 붙는 system 패널(`SGnbSystem`) 슬롯. 펼치면 메뉴 컬럼 바닥에, 접히면(header="fix" 레일) `foldedFooter` 아래 레일 바닥에 여백 없이 붙는다. 색·형태(펼침/접힘)는 GNB 가 내려주므로 SGnbSystem 에 다시 넘기지 않아도 된다. useRail 에서 메뉴가 없는 레일 아이템이 활성이면 메뉴 컬럼째 사라지므로 이 슬롯도 함께 빠진다. |
 | `ariaLabel?` | `string` | `'global navigation'` | 메뉴 landmark(nav) 의 접근성 레이블. 한 화면에 nav 가 여럿일 때 구분한다. |
 
 #### Events
@@ -38,8 +39,57 @@
 | `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
 
+### Used by
+
+ - [SGnbSystem](../SGnbSystem)
+
 ### Depends on
 
 - [SGhostButton](../SGhostButton)
@@ -55,5 +105,6 @@ graph TD;
   SGnb --> SIcon
   SGnb --> SLayout
   SGnb --> STag
+  SGnbSystem --> SGnb
   style SGnb fill:#f9f,stroke:#333,stroke-width:4px
 ```

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

@@ -1,5 +1,20 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type SGnbType, type SGnbHeader, type SGnbColor, type SGnbMenuItem } from './gnb.config';
+/**
+ * SGnb 가 `system` 슬롯에 내려주는 값. 슬롯에 놓인 SGnbSystem 이 이걸 읽어
+ * 색과 형태(펼침/접힘)를 GNB 에 맞춘다 — 앱이 같은 값을 두 번 넘기지 않게 한다.
+ *
+ * `folded` 는 GNB 의 접힘 상태가 아니라 **그 자리가 접힌 레일인지**다. 슬롯은 두 곳에 놓이고
+ * (메뉴 컬럼 바닥 · 접힘 레일 바닥) 각 자리가 자기 형태를 못 박으므로, 접는 동안 아직 미끄러져
+ * 나가는 중인 메뉴 컬럼의 패널이 min 형태로 튀지 않는다.
+ */
+export interface SGnbSystemContextValue {
+    /** GNB 색 */
+    color: SGnbColor;
+    /** 이 자리가 접힌(48px) 레일인지 */
+    folded: boolean;
+}
+export declare const SGnbSystemContext: import("react").Context<SGnbSystemContextValue | null>;
 export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     /** 메뉴 스타일: box(라운드) / belt(풀폭 행). 미지정 시 SLayout 의 type 을 따른다. */
     type?: SGnbType;
@@ -80,6 +95,13 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
     defaultMenuWidth?: number;
     /** 메뉴 폭이 확정될 때(드래그를 놓거나 방향키 조작). 드래그하는 동안에는 오지 않는다 */
     onMenuWidthChange?: (width: number) => void;
+    /**
+     * GNB 맨 아래에 붙는 system 패널(`SGnbSystem`) 슬롯. 펼치면 메뉴 컬럼 바닥에,
+     * 접히면(header="fix" 레일) `foldedFooter` 아래 레일 바닥에 여백 없이 붙는다.
+     * 색·형태(펼침/접힘)는 GNB 가 내려주므로 SGnbSystem 에 다시 넘기지 않아도 된다.
+     * useRail 에서 메뉴가 없는 레일 아이템이 활성이면 메뉴 컬럼째 사라지므로 이 슬롯도 함께 빠진다.
+     */
+    system?: ReactNode;
     /** 메뉴 landmark(nav) 의 접근성 레이블. 한 화면에 nav 가 여럿일 때 구분한다. */
     ariaLabel?: string;
 }

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/SGnb/index.d.ts

@@ -1,2 +1,2 @@
-export { SGnb, type SGnbProps } from './SGnb';
+export { SGnb, SGnbSystemContext, type SGnbProps, type SGnbSystemContextValue } from './SGnb';
 export { GNB_HEADER, GNB_MENU, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, findGnbAncestors, findGnbRailValue, type SGnbType, type SGnbHeader, type SGnbColor, type SGnbMenuItem, } from './gnb.config';

package/dist/components/SGnbSystem/README.md

@@ -0,0 +1,121 @@
+# SGnbSystem
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SGnbSystem
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color?` | `SGnbSystemColor` | — | 색상(패널 표면). light = 흰 면, dark = 오션블루 면. 미지정 시 자기를 담은 SGnb 의 color 를 따른다(단독으로 쓰면 `'light'`). |
+| `folded?` | `boolean` | — | 접힌(min) 형태 — 48px 레일 폭에 맞춰 알림·계정 아이콘만 남는다. 미지정 시 자기를 담은 SGnb 의 접힘 상태를 따른다. |
+| `actions?` | `SGnbSystemAction[]` | — | 패널 상단에 쌓는 행 목록. 각 원소는 `SSystemActionButton` 의 props 다(`color` 제외). 아래에 다른 조각이 있으면 그 사이에 구분선이 그어진다. 접히면 자리가 없어 렌더되지 않는다. |
+| `domain?` | `string` | — | 도메인 태그 텍스트. 접히면 자리가 없어 렌더되지 않는다 |
+| `alert?` | `SGnbSystemAlert` | — | 알림 버튼. 없으면 렌더하지 않는다. 설정과 나란히 서면 남는 폭을 먹고, 혼자면 폭을 다 먹는다 |
+| `setting?` | `SGnbSystemSetting` | — | 설정 버튼. 없으면 렌더하지 않는다. 알림과 나란히 서면 제 폭만 갖고, 혼자면 폭을 다 먹는다. 접히면 자리가 없어 렌더되지 않는다 — 접힌 상태에서도 닿아야 하면 SGnb 의 `foldedFooter` 에 둔다. |
+| `account?` | `SGnbSystemAccount` | — | 계정 행. 없으면 렌더하지 않는다 |
+
+## Types
+
+### SGnbSystemColor
+
+```ts
+export type SGnbSystemColor = (typeof GNB_SYSTEM_COLORS)[number];
+```
+
+### SGnbSystemAction
+
+```ts
+/**
+ * 패널 상단에 쌓이는 행 하나. `SSystemActionButton` 의 props 를 그대로 받는다 —
+ * 단 `color` 는 패널이 정하므로 받지 않고, 목록 key 로 쓸 `value` 만 더한다.
+ */
+export type SGnbSystemAction = DistributiveOmit<SSystemActionButtonProps, 'color'> & {
+  /** 목록 key. 없으면 순서를 key 로 쓴다 */
+  value?: string;
+};
+```
+
+### SGnbSystemAlert
+
+```ts
+/** 알림 버튼 */
+export interface SGnbSystemAlert {
+  /** 라벨 텍스트. 기본 `'알림'` */
+  label?: string;
+  /**
+   * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수(접히면 점)가 붙는다.
+   * 표기는 컴포넌트가 맡는다 — 세 자리마다 콤마를 넣어 그리므로 앱이 포맷한 문자열을 넘기지 않는다.
+   */
+  count?: number;
+  /** 클릭 */
+  onClick?: () => void;
+}
+```
+
+### SGnbSystemSetting
+
+```ts
+/** 설정 버튼 */
+export interface SGnbSystemSetting {
+  /** 라벨 텍스트. 기본 `'설정'` */
+  label?: string;
+  /** 클릭 */
+  onClick?: () => void;
+}
+```
+
+### SGnbSystemAccount
+
+```ts
+/** 계정 행 */
+export interface SGnbSystemAccount {
+  /** 계정 이름 */
+  label?: string;
+  /** 클릭 */
+  onClick?: () => void;
+}
+```
+
+### GNB_SYSTEM_COLORS
+
+```ts
+/**
+ * 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 const GNB_SYSTEM_COLORS = ['light', 'dark'] as const;
+```
+
+## Dependencies
+
+### Depends on
+
+- [SGnb](../SGnb)
+- [SIcon](../SIcon)
+- [SSystemActionButton](../SSystemActionButton)
+
+### Graph
+
+```mermaid
+graph TD;
+  SGnbSystem --> SGnb
+  SGnbSystem --> SIcon
+  SGnbSystem --> SSystemActionButton
+  style SGnbSystem fill:#f9f,stroke:#333,stroke-width:4px
+```

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

@@ -0,0 +1,93 @@
+import { type HTMLAttributes } from 'react';
+import { type SSystemActionButtonProps } from '../SSystemActionButton';
+import { type SGnbSystemColor } from './gnbSystem.config';
+/** 유니온을 유지한 채 키를 걷어낸다 — 그냥 Omit 하면 판별 유니온이 한 덩어리로 뭉개진다. */
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+/**
+ * 패널 상단에 쌓이는 행 하나. `SSystemActionButton` 의 props 를 그대로 받는다 —
+ * 단 `color` 는 패널이 정하므로 받지 않고, 목록 key 로 쓸 `value` 만 더한다.
+ */
+export type SGnbSystemAction = DistributiveOmit<SSystemActionButtonProps, 'color'> & {
+    /** 목록 key. 없으면 순서를 key 로 쓴다 */
+    value?: string;
+};
+/** 알림 버튼 */
+export interface SGnbSystemAlert {
+    /** 라벨 텍스트. 기본 `'알림'` */
+    label?: string;
+    /**
+     * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수(접히면 점)가 붙는다.
+     * 표기는 컴포넌트가 맡는다 — 세 자리마다 콤마를 넣어 그리므로 앱이 포맷한 문자열을 넘기지 않는다.
+     */
+    count?: number;
+    /** 클릭 */
+    onClick?: () => void;
+}
+/** 설정 버튼 */
+export interface SGnbSystemSetting {
+    /** 라벨 텍스트. 기본 `'설정'` */
+    label?: string;
+    /** 클릭 */
+    onClick?: () => void;
+}
+/** 계정 행 */
+export interface SGnbSystemAccount {
+    /** 계정 이름 */
+    label?: string;
+    /** 클릭 */
+    onClick?: () => void;
+}
+export interface SGnbSystemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /**
+     * 색상(패널 표면). light = 흰 면, dark = 오션블루 면.
+     * 미지정 시 자기를 담은 SGnb 의 color 를 따른다(단독으로 쓰면 `'light'`).
+     */
+    color?: SGnbSystemColor;
+    /**
+     * 접힌(min) 형태 — 48px 레일 폭에 맞춰 알림·계정 아이콘만 남는다.
+     * 미지정 시 자기를 담은 SGnb 의 접힘 상태를 따른다.
+     */
+    folded?: boolean;
+    /**
+     * 패널 상단에 쌓는 행 목록. 각 원소는 `SSystemActionButton` 의 props 다(`color` 제외).
+     * 아래에 다른 조각이 있으면 그 사이에 구분선이 그어진다. 접히면 자리가 없어 렌더되지 않는다.
+     */
+    actions?: SGnbSystemAction[];
+    /** 도메인 태그 텍스트. 접히면 자리가 없어 렌더되지 않는다 */
+    domain?: string;
+    /** 알림 버튼. 없으면 렌더하지 않는다. 설정과 나란히 서면 남는 폭을 먹고, 혼자면 폭을 다 먹는다 */
+    alert?: SGnbSystemAlert;
+    /**
+     * 설정 버튼. 없으면 렌더하지 않는다. 알림과 나란히 서면 제 폭만 갖고, 혼자면 폭을 다 먹는다.
+     * 접히면 자리가 없어 렌더되지 않는다 — 접힌 상태에서도 닿아야 하면 SGnb 의 `foldedFooter` 에 둔다.
+     */
+    setting?: SGnbSystemSetting;
+    /** 계정 행. 없으면 렌더하지 않는다 */
+    account?: SGnbSystemAccount;
+}
+/**
+ * SGnbSystem — GNB 맨 아래에 붙는 system 패널.
+ *
+ * 위에서부터 [행 목록(`actions`)] · 구분선 · [도메인 태그] · [알림 | 설정] · [계정] 을 쌓는다.
+ * 각 조각은 해당 prop 을 줄 때만 나타나므로, 서비스마다 필요한 만큼만 켜서 쓴다 — 계정만, 알림만,
+ * 설정만, 알림+계정 … 어떤 부분집합이어도 그 조합만으로 판이 성립하도록 다음을 지킨다.
+ *
+ * - **구분선은 위아래 양쪽에 내용이 있을 때만** 긋는다. `actions` 만 주면 바닥에 뜻 없는 선이 남지 않는다.
+ * - **알림·설정은 혼자 서면 폭을 다 먹는다.** 둘이 나란히 서면 알림이 남는 폭을, 설정이 제 폭을 갖고
+ *   사이에 세로선이 놓인다. 어느 쪽이 빠져도 왼쪽 끝은 위아래 행과 맞는다.
+ * - **켜진 조각이 하나도 없으면 아무것도 렌더하지 않는다** — 빈 판은 GNB 바닥에 정체 모를 경계선만 남긴다.
+ *
+ * 알림·설정·계정은 늘 함께 붙어 다니는 한 덩어리라 사이를 띄우지 않고, 그 위 조각들만 간격을 갖는다.
+ *
+ * `folded` 면 48px 레일 폭에 맞춘 min 형태가 된다 — **알림·계정 아이콘만** 남고 라벨·태그·행 목록·설정은
+ * 빠진다(시안). 알림 개수는 적을 자리가 없어 점 배지로 바뀐다. 둘 다 없는 조합(설정만 쓰는 앱 등)이면
+ * 접힌 패널은 렌더되지 않으므로, 접힌 상태에서도 닿아야 하는 것은 SGnb 의 `foldedTop`·`foldedFooter` 에 둔다.
+ *
+ * `alert.count` 가 1 이상이면 벨이 울리는 아이콘(`alert`)과 강조색으로 바뀐다 — light 는 파랑,
+ * dark 는 노랑(토큰이 정한다). 0 이거나 없으면 조용한 벨(`bell`)에 기본 색이다.
+ *
+ * SGnb 의 `system` 슬롯에 넣으면 `color` 와 `folded` 를 GNB 에서 받아오므로 앱이 다시 넘길 필요가 없다.
+ * 단독으로 쓰면 두 prop 을 직접 준다. 폭은 늘 부모를 가득 채운다 — 좁은 GNB 컬럼에 놓이는 패널이다.
+ */
+export declare const SGnbSystem: import("react").ForwardRefExoticComponent<SGnbSystemProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,89 @@
+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];
+/**
+ * 패널 색이 곧 행 색이다 — 행(아이콘 프레임·라벨·hover)은 SSystemActionButton 과 같은
+ * `--cmp-gnb-system-item-*` 토큰을 쓰므로, 그 색표를 그대로 빌려 두 컴포넌트가 어긋나지 않게 한다.
+ * `darker`(패널 없이 어두운 GNB 면에 바로 얹는 색)는 패널에 대응 토큰이 없어 노출하지 않는다.
+ */
+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>;
+/** 치수 — 전부 토큰 참조 */
+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, type SGnbSystemColor, type GnbSystemColorTokens, } 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

@@ -30,11 +30,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 +45,11 @@
  - [SNumberInput](../SNumberInput)
  - [SPagination](../SPagination)
  - [SPopover](../SPopover)
+ - [SSearchInput](../SSearchInput)
  - [SSectionHeaderCard](../SSectionHeaderCard)
  - [SSelect](../SSelect)
  - [SStepper](../SStepper)
+ - [SSystemActionButton](../SSystemActionButton)
  - [STable](../STable)
  - [STag](../STag)
  - [STextLink](../STextLink)
@@ -68,11 +72,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 +87,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

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