import type { SColor } from '../../lib/color';
import type { SIconName } from '../SIcon';
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. */
export interface SGnbMenuItem {
    /** 표시 텍스트 */
    label: string;
    /** 고유 식별값 (선택 상태 비교 기준) */
    value: string;
    /** depth1 전용 아이콘명 */
    icon?: SIconName;
    /** 우측 Tag 뱃지 텍스트 */
    tag?: string;
    /** 뱃지 색. 미지정 시 blue. */
    tagColor?: STagColor;
    /** 비활성 여부 */
    disabled?: boolean;
    /** 하위 아이템 (있으면 펼침/접힘 대상) */
    children?: SGnbMenuItem[];
}
export declare const GNB_HEADER: Record<SGnbHeader, {
    topHeight: string;
    topPaddingX: string;
    topGap: string;
    logoHeight: string;
}>;
/** 메뉴(type 축). box → --cmp-gnb-box-*, belt → --cmp-gnb-belt-* (공통 치수는 --cmp-gnb-*) */
export declare const GNB_MENU: Record<SGnbType, {
    bodyPaddingY: string;
    itemMarginX: string;
    itemPaddingY: string;
    itemPaddingRight: string;
    itemGap: string;
    itemRadius: string;
    itemArrow: string;
    depth1PaddingLeft: string;
    depth2PaddingLeft: string;
    depth3PaddingLeft: string;
    depth1Icon: string;
    depth1FontSize: number;
    depth1LineHeight: number;
    depth1FontWeight: number;
    itemFontSize: number;
    itemLineHeight: number;
}>;
/**
 * 색상(color 축). light → --cmp-gnb-light-* 색, dark → --cmp-gnb-dark-* 색
 * 상단바 아이콘 색(--cmp-gnb-*-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;
    itemBgDefault: string;
    itemBgHover: string;
    itemBgSelected: string;
    itemColorDefault: string;
    itemColorHover: string;
    itemColorActive: string;
    itemChevron: string;
    /** depth1 아이콘 색. 대응 --cmp-gnb-*-item-icon 토큰이 없어 팔레트 키로 직접 지정한다. */
    itemIcon: SColor;
    /**
     * 레일 아이템 기본 색. 버튼에 얹어 아이콘·라벨이 같은 색으로 물든다.
     * 선택 시엔 itemColorActive 를 쓴다.
     */
    railFgDefault: string;
}>;
/** 축과 무관한 공통 레이아웃. */
export declare const GNB_COMMON: {
    /** 접힘 레일 폭. header="full" 은 접으면 메뉴만 사라져 레일이 없으므로 fix 전용. */
    foldWidth: string;
};
/**
 * 좌측 레일(useRail) — items 의 첫 depth 를 아이콘+라벨 버튼으로 세우는 1차 내비게이션.
 * 선택 색은 레일 전용 토큰이 없어 메뉴 아이템의 선택 색(item-bg-selected / item-fg-selected)을 함께 쓴다.
 */
export declare const GNB_RAIL: {
    padding: string;
    gap: string;
    itemWidth: string;
    itemPaddingTop: string;
    itemPaddingBottom: string;
    itemRadius: string;
    itemIcon: string;
    itemFontSize: number;
    itemLineHeight: number;
    itemFontWeight: number;
    itemFontWeightSelected: number;
};
/**
 * 레일 컬럼 폭 = rail-item-width(44) + rail-padding(12)*2.
 * 토큰이 CSS 변수라 JS 에서 더할 수 없어 합을 상수로 둔다 (GNB_MENU_WIDTH 와 같은 이유).
 */
export declare const GNB_RAIL_WIDTH = 68;
/**
 * 접힘/펼침 전환 시간(ms). GNB 폭·메뉴 슬라이드·상단바 페이드와 SLayout 의 메뉴 열 폭이
 * 이 값을 공유해야 한 덩어리로 미끄러진다.
 */
export declare const GNB_FOLD_MS = 200;
/**
 * 하위 메뉴 펼침/접힘 전환 시간(ms). 아이템을 눌러 children 이 열리고 닫힐 때
 * 높이(grid-template-rows 0fr↔1fr)가 이 길이만큼 부드럽게 늘고 줄어든다.
 * 폴드와 같은 값을 써서 두 모션이 한 언어로 읽히게 한다.
 */
export declare const GNB_EXPAND_MS = 200;
/**
 * 메뉴 고정 폭. 두 header 모두 메뉴는 이 폭으로 좌측에 붙는다(토큰 없음 → 상수).
 * header="full" 에서 SLayout 이 "메뉴 오른쪽 = 페이지" 영역을 잡을 때도 이 값을 쓴다.
 */
export declare const GNB_MENU_WIDTH = 240;
/**
 * resizable 일 때 메뉴 폭이 움직일 수 있는 범위(px). 레일 폭은 고정이고 메뉴 컬럼만 늘고 준다.
 * 디자인이 아직 확정한 값이 아니라 임시다 — 확정되면 토큰으로 내려온다.
 */
export declare const GNB_MENU_MIN_WIDTH = 200;
export declare const GNB_MENU_MAX_WIDTH = 300;
/** 메뉴 폭 조절에서 방향키 한 번에 움직이는 양(px). Shift 를 함께 누르면 large. */
export declare const GNB_MENU_RESIZE_KEY_STEP: {
    normal: number;
    large: number;
};
/** 메뉴 폭을 허용 범위 안으로 자른다. */
export declare const clampGnbMenuWidth: (width: number) => number;
/**
 * header="full" 상단바의 로고 슬롯 고정 폭(토큰 없음 → 상수).
 * 전폭 상단바에서는 로고 오른쪽에 topContent 슬롯이 이어지므로, 로고 내용이 바뀌어도
 * 그 시작점이 흔들리지 않도록 자리를 못 박는다. fix 는 상단바가 GNB 컬럼 안이라 내용 폭을 따른다.
 * 런처를 쓰지 않으면 그 자리를 로고가 이어받는다 → GNB_FULL_LOGO_WIDTH_NO_LAUNCHER.
 */
export declare const GNB_FULL_LOGO_WIDTH = 140;
/**
 * 상단바에서 아이콘 버튼끼리 붙는 간격(px, 디자인 스펙 — 전용 토큰 없음).
 * header="full" 의 런처↔폴드가 여기 해당한다. 슬롯(로고·topContent)과의 간격은
 * 이보다 넓은 --cmp-gnb-top-gap 을 쓴다.
 */
export declare const GNB_TOP_ICON_GAP = 8;
/**
 * 상단바 아이콘 버튼(xs 고스트) 폭 = --cmp-ghostButton-xs-size.
 * 토큰이 CSS 변수라 JS 에서 더할 수 없어 값을 상수로 둔다(GNB_RAIL_WIDTH 와 같은 이유).
 */
export declare const GNB_TOP_ICON_SIZE = 24;
/**
 * 런처를 쓰지 않는 header="full" 의 로고 슬롯 폭 = 기본 폭 + 런처가 비운 자리(버튼 + 간격).
 * 런처 유무로 topContent 시작점이 32px 씩 밀리지 않도록, 빈 자리를 로고가 흡수한다.
 */
export declare const GNB_FULL_LOGO_WIDTH_NO_LAUNCHER: number;
/**
 * useRail 에서 value 를 품은 첫 depth(레일) 아이템의 value.
 * value 자체가 레일 아이템이면 그 값을, 어디에도 없으면 undefined 를 반환한다.
 */
export declare function findGnbRailValue(items: SGnbMenuItem[], value: string): string | undefined;
/** value 를 가진 아이템의 형제(같은 부모의 나머지 아이템) value 목록을 반환 → 아코디언 펼침용 */
export declare function findGnbSiblingValues(items: SGnbMenuItem[], value: string): string[];
/** value 로 선택된 아이템의 조상 value 목록(자기 자신 제외)을 반환 → 자동 펼침용 */
export declare function findGnbAncestors(items: SGnbMenuItem[], value: string): string[];