sellmate-design-system-react 0.2.0 → 0.3.0

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

@@ -1,6 +1,9 @@
 import type { SIconName } from '../SIcon';
-/** 구조(레이아웃): box = 라운드/좁은 들여쓰기, belt = 풀폭/넓은 들여쓰기 */
+import type { STagColor } from '../STag';
+/** 메뉴 스타일: box = 라운드/좁은 들여쓰기, belt = 풀폭 행/넓은 들여쓰기 */
 export type SGnbType = 'box' | 'belt';
+/** 상단바 구조: fix = GNB 폭에 고정, full = 레이아웃 전폭 */
+export type SGnbHeader = 'fix' | 'full';
 /** 색상(테마): light / dark */
 export type SGnbColor = 'light' | 'dark';
 /** GNB 메뉴 아이템 (재귀 트리). depth1 → depth2 → depth3. */
@@ -13,16 +16,28 @@ export interface SGnbMenuItem {
     icon?: SIconName;
     /** 우측 Tag 뱃지 텍스트 */
     tag?: string;
+    /** 뱃지 색. 미지정 시 blue. */
+    tagColor?: STagColor;
     /** 비활성 여부 */
     disabled?: boolean;
     /** 하위 아이템 (있으면 펼침/접힘 대상) */
     children?: SGnbMenuItem[];
 }
-/** 레이아웃(type 축). box → --cmp-gnbBox-*, belt → --cmp-gnbBelt-* */
-export declare const GNB_LAYOUT: Record<SGnbType, {
+/**
+ * 상단바(header 축). fix → gnbBelt-top-* 토큰, full → gnbBox-* 토큰.
+ * 배치까지 이 축이 정한다 — fix 는 GNB 컬럼 안, full 은 레이아웃 전폭.
+ */
+export declare const GNB_HEADER: Record<SGnbHeader, {
+    topHeight: string;
     topPaddingX: string;
     topGap: string;
-    bodyPadding: string;
+    logoHeight: string;
+}>;
+/** 메뉴(type 축). box → --cmp-gnbBox-*, belt → --cmp-gnbBelt-* */
+export declare const GNB_MENU: Record<SGnbType, {
+    bodyPaddingY: string;
+    itemMarginX: string;
+    itemPaddingY: string;
     itemPaddingRight: string;
     itemGap: string;
     itemRadius: string;
@@ -37,7 +52,11 @@ export declare const GNB_LAYOUT: Record<SGnbType, {
     itemFontSize: number;
     itemLineHeight: number;
 }>;
-/** 색상(color 축). light → --cmp-light-* 색, dark → --cmp-dark-* 색 (gnb colortype 토큰) */
+/**
+ * 색상(color 축). light → --cmp-light-* 색, dark → --cmp-dark-* 색 (gnb colortype 토큰)
+ * 상단바 아이콘 색(--cmp-*-top-icon)은 SGhostButton 이 자체 intent 토큰으로 칠한다:
+ * light → --cmp-ghostButton-default-content, dark → --cmp-ghostButton-inverse-content (값 동일).
+ */
 export declare const GNB_COLORS: Record<SGnbColor, {
     panelBg: string;
     topBorder: string;
@@ -45,18 +64,23 @@ export declare const GNB_COLORS: Record<SGnbColor, {
     itemBgHover: string;
     itemBgSelected: string;
     itemColorDefault: string;
+    itemColorHover: string;
     itemColorActive: string;
+    itemChevron: string;
 }>;
-/** 구조와 무관한 공통 레이아웃 */
+/** 축과 무관한 공통 레이아웃. */
 export declare const GNB_COMMON: {
-    topHeight: string;
-    logoHeight: string;
-    itemPaddingY: string;
+    /** 접힘 레일 폭. header="full" 은 접으면 메뉴만 사라져 레일이 없으므로 fix 전용. */
     foldWidth: string;
+    /**
+     * 상단바 아이콘 버튼 사이 간격. fix 레일(세로 스택)의 gap·상하 여백에 쓴다.
+     * 레일 전용 여백 토큰이 따로 없어 같은 값(8px)인 이 토큰으로 재해석했다.
+     */
+    buttonGap: string;
 };
 /**
- * 메뉴 고정 폭. belt/box 모두 메뉴는 이 폭으로 좌측에 붙는다(토큰 없음 → 상수).
- * box 에서 SLayout 이 "메뉴 오른쪽 = 페이지" 영역을 잡을 때도 이 값을 쓴다.
+ * 메뉴 고정 폭. 두 header 모두 메뉴는 이 폭으로 좌측에 붙는다(토큰 없음 → 상수).
+ * header="full" 에서 SLayout 이 "메뉴 오른쪽 = 페이지" 영역을 잡을 때도 이 값을 쓴다.
  */
 export declare const GNB_MENU_WIDTH = 240;
 /** value 로 선택된 아이템의 조상 value 목록(자기 자신 제외)을 반환 → 자동 펼침용 */

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

@@ -1,2 +1,2 @@
 export { SGnb, type SGnbProps } from './SGnb';
-export { GNB_LAYOUT, GNB_COLORS, GNB_COMMON, GNB_MENU_WIDTH, findGnbAncestors, type SGnbType, type SGnbColor, type SGnbMenuItem, } from './gnb.config';
+export { GNB_HEADER, GNB_MENU, GNB_COLORS, GNB_COMMON, GNB_MENU_WIDTH, findGnbAncestors, type SGnbType, type SGnbHeader, type SGnbColor, type SGnbMenuItem, } from './gnb.config';

package/dist/components/SGuide/SGuide.cjs

@@ -2993,6 +2993,7 @@ function SGhostButton({
   size = "sm",
   intent = "default",
   ariaLabel = "",
+  ariaPressed,
   tooltipText,
   disabled = false,
   onClick,
@@ -3029,6 +3030,7 @@ function SGhostButton({
       disabled,
       "aria-disabled": disabled ? "true" : void 0,
       "aria-label": ariaLabel.trim() || void 0,
+      "aria-pressed": ariaPressed,
       tabIndex: disabled ? -1 : void 0,
       onClick: (e) => {
         if (disabled) {