sellmate-design-system-react 9.0.0-beta.32 → 9.0.0-beta.34

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

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 import { type SAccountListBoxContent } from '../SAccountListBox';
 import { type SSystemActionButtonProps } from '../SSystemActionButton';
 import { type SGnbSystemColor } from './gnbSystem.config';
@@ -23,12 +23,50 @@ export interface SGnbSystemAlert {
     /** 라벨 텍스트. 기본 `'알림'` */
     label?: string;
     /**
-     * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수(접히면 점)가 붙는다.
+     * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수가 붙는다.
+     * 개수를 적을 가로가 모자란 자리(접힌 레일 · 기본 폭보다 좁게 줄인 판)에서는 점 배지로 바뀐다.
      * 표기는 컴포넌트가 맡는다 — 세 자리마다 콤마를 넣어 그리므로 앱이 포맷한 문자열을 넘기지 않는다.
      */
     count?: number;
     /** 클릭 */
     onClick?: () => void;
+    /**
+     * 알림 버튼에 붙는 안내 툴팁의 문구(한 줄이 한 항목). 주면 뜬다 — **문구만 앱이 정하고**
+     * 색·방향·여닫힘은 컴포넌트가 쥔다: 색은 판이 light 면 기본, 그 밖(dark·상단바)이면 강조색이고
+     * 방향은 자리가 정한다(판·접힌 레일이면 오른쪽, 상단바면 아래).
+     *
+     * 스스로 사라지지 않는다 — **알림 버튼을 누르거나, 버튼에 얹었다 커서를 뺄 때** 닫히고,
+     * 같은 값을 계속 넘기는 동안에는 다시 뜨지 않는다.
+     *
+     * **다시 띄우려면 비웠다가 다시 넘긴다**(`undefined` → 문구). 문구가 같아도 상관없다 —
+     * 컴포넌트는 닫았다는 사실만 기억하고 문구 내용은 기억하지 않으므로, 새 알림마다 같은 안내를
+     * 다시 띄우는 화면도 막히지 않는다.
+     */
+    tooltip?: string[];
+    /**
+     * 알림을 누르면 뜨는 목록의 **내용**. 주면 컴포넌트가 알림 버튼에 붙여 띄운다 —
+     * 목록에 무엇을 쌓을지는 서비스마다 다르지만 **뜨는 자리는 늘 같아야 하므로**, 방향·앵커·
+     * 여닫힘(바깥 클릭·ESC 포함)과 배경·라운드·그림자는 컴포넌트가 쥐고 앱은 안에 담을 것만 준다.
+     * 방향은 자리가 정한다 — 판·접힌 레일이면 버튼 오른쪽, 상단바면 아래.
+     */
+    listBox?: ReactNode;
+    /**
+     * 알림 목록이 열리고 닫힐 때. 여닫는 것은 알림 버튼이 스스로 하므로 **그 사실을 알아야 할
+     * 때만** 준다(연 김에 읽음 처리하거나, 열려 있는 동안 다른 층을 접어 두는 화면).
+     *
+     * 앱이 누르지 않은 닫힘도 온다: GNB 를 접거나 펴면 알림 버튼이 다른 자리로 옮겨 서므로
+     * 목록이 닫히고 `false` 가 온다(계정 행과 같다).
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * 안내 툴팁이 닫힐 때. 받아서 `tooltip` 을 비워 두는 것이 기본 사용법이다 — 그러면 앱이
+     * 다음에 넘기는 문구가 곧 다음 안내가 된다.
+     *
+     * 컴포넌트가 아는 "다시 뜨지 않는다" 는 **이 자리가 서 있는 동안**뿐이라(새로고침하거나
+     * GNB 를 접어 알림이 다른 자리로 옮겨 서면 새로 마운트된다), 그 사용자에게 두 번 다시 보이지
+     * 않아야 하면 앱이 이 신호를 저장해 두고 `tooltip` 을 그만 넘긴다.
+     */
+    onTooltipDismiss?: () => void;
 }
 /** 설정 버튼 */
 export interface SGnbSystemSetting {
@@ -121,6 +159,14 @@ export interface SGnbSystemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'c
  * `alert.count` 가 1 이상이면 벨이 울리는 아이콘(`bellRinging`)과 강조색으로 바뀐다 — light 는 파랑,
  * 어두운 면은 노랑(토큰이 정한다). 0 이거나 없으면 조용한 벨(`bell`)에 기본 색이다.
  *
+ * 안내 툴팁(`alert.tooltip`)은 문구를 받은 동안 떠 있다가 알림을 누르거나 커서를 빼면 닫힌다.
+ * 다시 띄우는 신호는 문구가 **없음 → 있음** 으로 바뀌는 것이라, 같은 문구도 비웠다 다시 넘기면
+ * 새 안내로 뜬다.
+ *
+ * 판이 **메뉴 기본 폭보다 좁으면**(GNB 의 `resizable` 로 줄인 컬럼) 알림 개수를 적을 가로가
+ * 모자라 접힘과 같은 점 배지로 바뀐다 — 숫자가 설정 버튼을 밀어내거나 잘리는 대신, 알림이
+ * 있다는 사실만 남긴다. 좁은지는 담은 SGnb 가 내려주므로 앱이 고르는 prop 이 없다.
+ *
  * 색은 놓인 면을 따른다: 판 위는 `light`/`dark`(오션블루 판), 판 없이 상단바 면에 바로 얹는 `top` 의
  * dark 는 한 단계 어두운 `darker`(네이비) 색표다 — GNB_SYSTEM_TOP_COLOR_CONFIG 가 그 대응을 쥔다.
  *

package/dist/components/SPortal/README.md

@@ -54,6 +54,7 @@ export type SPortalAlign = 'start' | 'center' | 'end';
 
  - [SAccountListBox](../SAccountListBox)
  - [SChipInput](../SChipInput)
+ - [SGnbSystem](../SGnbSystem)
  - [SSelect](../SSelect)
 
 ### Graph
@@ -62,6 +63,7 @@ export type SPortalAlign = 'start' | 'center' | 'end';
 graph TD;
   SAccountListBox --> SPortal
   SChipInput --> SPortal
+  SGnbSystem --> SPortal
   SSelect --> SPortal
   style SPortal fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SScrollArea/README.md

@@ -28,3 +28,16 @@ export type SScrollAreaAxis = (typeof SCROLL_AREA_AXES)[number];
 export const SCROLL_AREA_AXES = ['vertical', 'horizontal', 'both'] as const;
 ```
 
+## Dependencies
+
+### Used by
+
+ - [SCalendarBoard](../SCalendarBoard)
+
+### Graph
+
+```mermaid
+graph TD;
+  SCalendarBoard --> SScrollArea
+  style SScrollArea fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SSystemActionButton/systemActionButton.config.d.ts

@@ -34,7 +34,7 @@ export interface SystemActionButtonColorTokens {
     bgHover: string;
     /** 아이콘 프레임 배경 (기본) */
     iconBg: string;
-    /** 아이콘 프레임 배경 (hover·selected) */
+    /** 아이콘 프레임 배경 (hover·selected). 지금은 어느 색에서도 기본과 같다 — 아래 주석 참고 */
     iconBgHover: string;
     /** 아이콘 글리프색 (기본) */
     iconGlyph: string;
@@ -64,7 +64,7 @@ export interface SystemActionButtonTypeSpec {
 }
 /** 타입이 정하는 고정 구성 — 무엇이 그려지는가 */
 export declare const SYSTEM_ACTION_BUTTON_TYPE_CONFIG: Record<SSystemActionButtonType, SystemActionButtonTypeSpec>;
-/** 치수 — 전부 토큰 참조 */
+/** 치수 — 대응 토큰이 있으면 전부 토큰 참조 */
 export declare const SYSTEM_ACTION_BUTTON_LAYOUT: {
     /** 행 높이 */
     readonly height: string;
@@ -84,4 +84,10 @@ export declare const SYSTEM_ACTION_BUTTON_LAYOUT: {
     readonly paddingRight: string;
     /** 액션 텍스트 ↔ 액션 아이콘 간격 */
     readonly actionGap: string;
+    /**
+     * 액션 아이콘 글리프 한 변. 프레임 한 변은 타입별 토큰(`actionButton.*-icon`)이 정하고
+     * 그 안에 글리프가 이 크기로 놓인다 — 선행 아이콘의 프레임(24)/글리프(20) 과 같은 구조다.
+     * 대응 토큰이 없어 디자인 값을 그대로 쓴다.
+     */
+    readonly actionIconGlyph: "12px";
 };

package/dist/components/STooltip/README.md

@@ -66,6 +66,7 @@ export type STooltipType = 'default' | 'danger' | 'warning' | 'accent';
 
  - [SChipFilter](../SChipFilter)
  - [SField](../SField)
+ - [SGnbSystem](../SGnbSystem)
  - [SKeyValueTable](../SKeyValueTable)
  - [SSectionHeaderCard](../SSectionHeaderCard)
  - [SStepper](../SStepper)
@@ -84,6 +85,7 @@ graph TD;
   STooltip --> SIcon
   SChipFilter --> STooltip
   SField --> STooltip
+  SGnbSystem --> STooltip
   SKeyValueTable --> STooltip
   SSectionHeaderCard --> STooltip
   SStepper --> STooltip