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

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

@@ -36,6 +36,7 @@
  - [SFilePicker](../SFilePicker)
  - [SGhostButton](../SGhostButton)
  - [SGnb](../SGnb)
+ - [SGnbSystem](../SGnbSystem)
  - [SGuide](../SGuide)
  - [SImage](../SImage)
  - [SKeyValueTable](../SKeyValueTable)
@@ -77,6 +78,7 @@ graph TD;
   SFilePicker --> SIcon
   SGhostButton --> SIcon
   SGnb --> SIcon
+  SGnbSystem --> SIcon
   SGuide --> SIcon
   SImage --> SIcon
   SKeyValueTable --> SIcon

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

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

package/dist/components/SLoadingModal/README.md

@@ -10,7 +10,7 @@
 |------|------|---------|-------------|
 | `open?` | `boolean` | — |  |
 | `persistent?` | `boolean` | — | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** |
-| `state?` | `LoadingModalState` | `'loading'` | 상태 (loading: 스피너, error: 경고 아이콘) |
+| `state?` | `SLoadingModalState` | `'loading'` | 상태 (loading: 스피너, error: 경고 아이콘) |
 | `progress?` | `number` | — | 진행률 (0–100) — 지정 시 determinate 스피너 |
 | `message?` | `string \| string[]` | — | 메시지 (없으면 state 기본값) |
 | `useButton?` | `boolean` | `false` | 하단 버튼 표시 |
@@ -28,10 +28,10 @@
 
 ## Types
 
-### LoadingModalState
+### SLoadingModalState
 
 ```ts
-export type LoadingModalState = 'loading' | 'error';
+export type SLoadingModalState = 'loading' | 'error';
 ```
 
 ## Dependencies

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

@@ -1,4 +1,4 @@
-export type LoadingModalState = 'loading' | 'error';
+export type SLoadingModalState = 'loading' | 'error';
 export interface SLoadingModalProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -7,7 +7,7 @@ export interface SLoadingModalProps {
     /** 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** */
     persistent?: boolean;
     /** 상태 (loading: 스피너, error: 경고 아이콘) */
-    state?: LoadingModalState;
+    state?: SLoadingModalState;
     /** 진행률 (0–100) — 지정 시 determinate 스피너 */
     progress?: number;
     /** 메시지 (없으면 state 기본값) */

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

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

package/dist/components/SSystemActionButton/README.md

@@ -114,6 +114,10 @@ export const SYSTEM_ACTION_BUTTON_COLORS = ['light', 'dark', 'darker'] as const;
 
 ## Dependencies
 
+### Used by
+
+ - [SGnbSystem](../SGnbSystem)
+
 ### Depends on
 
 - [SIcon](../SIcon)
@@ -125,5 +129,6 @@ export const SYSTEM_ACTION_BUTTON_COLORS = ['light', 'dark', 'darker'] as const;
 graph TD;
   SSystemActionButton --> SIcon
   SSystemActionButton --> STag
+  SGnbSystem --> SSystemActionButton
   style SSystemActionButton fill:#f9f,stroke:#333,stroke-width:4px
 ```

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

@@ -1 +1 @@
-export { SToggle, type SToggleProps } from './SToggle';
+export { SToggle, type SToggleProps, type SToggleSize } from './SToggle';