import type { ReactNode } from "react";
declare const sidebarBreakpointWidths: {
    readonly md: 768;
    readonly lg: 1024;
    readonly xl: 1280;
};
export type AppSidebarLayoutBreakpoint = keyof typeof sidebarBreakpointWidths;
export interface AppSidebarLayoutProps {
    /**
     * Left column from `sidebarBreakpoint` — typically an `AppSidebar`. Below it
     * it is not rendered visibly: the `header` takes over.
     */
    sidebar: ReactNode;
    /**
     * Top chrome below `sidebarBreakpoint` only — typically an `AppHeader`. It
     * scrolls with the screen, as in an `AppShell`. What it holds depends on the
     * navigation: a few destinations fit in a `NavBar` or an `HeaderNav`; a long
     * one belongs behind a menu button opening a drawer.
     */
    header?: ReactNode;
    /**
     * Width from which the sidebar shows (`md` 768px, `lg` 1024px, `xl`
     * 1280px). Below it the `header` takes over. Defaults to `lg`, the narrowest
     * width leaving the screen beside a 280px sidebar room for a layout of its
     * own.
     */
    sidebarBreakpoint?: AppSidebarLayoutBreakpoint;
    /** The screen itself, in a `main` landmark. */
    children?: ReactNode;
    "aria-label"?: string;
    className?: string;
}
/**
 * Application layout: from `sidebarBreakpoint` a sidebar beside the screen,
 * which sits in a raised panel and scrolls on its own; below it, a header
 * scrolling with the screen as one page. The layout applies the safe-area
 * insets around the body, so the screen inside needs no scroll container and
 * no insets of its own.
 */
export declare function AppSidebarLayout({ sidebar, header, sidebarBreakpoint, children, className, "aria-label": ariaLabel, }: AppSidebarLayoutProps): ReactNode;
export {};
//# sourceMappingURL=AppSidebarLayout.d.ts.map