import { ReactNode } from 'react';
import { IconDefinition } from '@gnome-ui/icons';
export interface AdaptiveNavItem {
    /** Unique identifier — matched against `value`. */
    id: string;
    /** Display label. */
    label: string;
    /** Icon from `@gnome-ui/icons`. */
    icon: IconDefinition;
    /** Optional badge count. */
    badge?: number | null;
    /**
     * Group name. Items sharing the same string are wrapped in a named section
     * on desktop/tablet. On mobile they collapse into a single group button that
     * opens a BottomSheet. Items without `group` appear at root level.
     */
    group?: string;
}
export interface AdaptiveLayoutProps {
    /** Navigation items rendered in the bar (mobile) or sidebar (tablet/desktop). */
    items: AdaptiveNavItem[];
    /** Id of the currently active item. */
    value: string;
    /** Called with the id of the newly selected item. */
    onValueChange: (id: string) => void;
    /** Content for the top HeaderBar zone — spans full width. */
    topBar?: ReactNode;
    /**
     * Content shown at the top of the sidebar in expanded mode (desktop).
     * Typically a `UserCard` with name and avatar. Hidden on mobile.
     */
    sidebarHeader?: ReactNode;
    /**
     * Content shown at the top of the sidebar in collapsed (icon-only) mode.
     * Typically just an `Avatar`. Falls back to `sidebarHeader` when omitted.
     */
    sidebarHeaderCollapsed?: ReactNode;
    /** Main scrollable content area. */
    children?: ReactNode;
}
/**
 * Application shell that automatically switches between a bottom
 * `ViewSwitcherBar` (mobile) and a collapsible `ViewSwitcherSidebar`
 * (tablet / desktop) based on the current viewport width.
 *
 * Breakpoints:
 * - **Mobile** (≤ 400 px): `ViewSwitcherBar` pinned at the bottom.
 * - **Tablet** (401–860 px): `ViewSwitcherSidebar` collapsed (icon-only).
 * - **Desktop** (> 860 px): `ViewSwitcherSidebar` expanded (icon + label).
 *
 * Mobile overflow: when there are more than 4 bar slots the first 3 are shown
 * and a "More" button opens a `BottomSheet` for the rest.
 */
export declare function AdaptiveLayout({ items, value, onValueChange, topBar, sidebarHeader, sidebarHeaderCollapsed, children, }: AdaptiveLayoutProps): import("react/jsx-runtime").JSX.Element;
