sellmate-design-system-react 0.1.11 → 0.3.0

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

@@ -0,0 +1,39 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type SGnbType, type SGnbHeader, type SGnbColor, type SGnbMenuItem } from './gnb.config';
+export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** 메뉴 스타일: box(라운드) / belt(풀폭 행). 미지정 시 SLayout 의 type 을 따른다. */
+    type?: SGnbType;
+    /** 상단바 구조: fix(GNB 폭 고정) / full(레이아웃 전폭). 미지정 시 SLayout 의 header 를 따른다. */
+    header?: SGnbHeader;
+    /** 색상 테마: light / dark */
+    color?: SGnbColor;
+    /** 메뉴 트리 (depth1 → depth2 → depth3) */
+    items: SGnbMenuItem[];
+    /** 현재 선택된 아이템 value */
+    value?: string;
+    /** 선택 변경 (sdUpdate) */
+    onValueChange?: (value: string) => void;
+    /** 접힘(레일) 상태. 미지정 시 SLayout 의 folded 를 따른다. */
+    folded?: boolean;
+    /** 접힘 토글 (sdFoldChange) */
+    onFoldChange?: (folded: boolean) => void;
+    /** 앱런처(그리드) 버튼 클릭. 미지정 시 런처 버튼을 렌더하지 않는다. */
+    onLauncherClick?: () => void;
+    /** 상단바 로고 영역 (slot) */
+    logo?: ReactNode;
+    /** 메뉴 landmark(nav) 의 접근성 레이블. 한 화면에 nav 가 여럿일 때 구분한다. */
+    ariaLabel?: string;
+}
+/**
+ * SGnb — 글로벌 네비게이션.
+ * 세 축이 독립이다: type(box/belt) = 메뉴 스타일, header(fix/full) = 상단바 구조,
+ * color(light/dark) = 색. 치수는 --cmp-gnbBox / --cmp-gnbBelt, 색은 --cmp-light / --cmp-dark 토큰 합성.
+ *
+ * header 가 배치와 접힘 형태를 정한다:
+ * - fix: 상단바가 GNB 컬럼(메뉴 폭) 안에 있다. 접으면 48px 세로 레일로 좁혀진다.
+ * - full: 상단바가 레이아웃 전폭을 가로지르고 그 아래 [메뉴 | 페이지]. 접으면 메뉴만 사라진다.
+ *
+ * SLayout 안에서 쓰면 type·header·folded 를 context 에서 읽어 앱이 중복으로 넘길 필요가 없다.
+ * SLayout 없이 단독으로도 동작한다(prop 또는 기본값 사용).
+ */
+export declare const SGnb: import("react").ForwardRefExoticComponent<SGnbProps & import("react").RefAttributes<HTMLDivElement>>;