import { default as React, ReactNode } from 'react';
export interface SidebarProps {
    children: ReactNode;
    /** Fixed width in px. @default 236 */
    width?: number;
    /**
     * Narrow icon-rail mode. Pair with `iconOnly` on the `NavTree` inside, and
     * swap wordmark → mark in `Sidebar.Header` — the consumer owns the toggle
     * state. Width animates between the two modes.
     */
    collapsed?: boolean;
    /** Width in px when `collapsed`. @default 64 */
    collapsedWidth?: number;
    /**
     * Offset in px for a full-width app topbar rendered ABOVE the sidebar
     * (outside it): the sidebar sticks below it and fills the remaining
     * viewport height — one value drives both `top` and `height`. Unrelated
     * to `Sidebar.Header`, which lives inside the sidebar. Leave at 0 for a
     * full-height sidebar with the logo in `Sidebar.Header`. @default 0
     */
    top?: number;
    /** Accessible label for the aside landmark. */
    'aria-label'?: string;
    className?: string;
    /**
     * Merged last, so it can override the computed `width`/`height` — e.g.
     * `style={{ height: '100%' }}` inside a fixed-height container.
     */
    style?: React.CSSProperties;
    testId?: string;
}
interface SidebarSlotProps {
    children: ReactNode;
    className?: string;
}
export interface SidebarComponent extends React.FC<SidebarProps> {
    Header: React.FC<SidebarSlotProps>;
    Body: React.FC<SidebarSlotProps>;
    Footer: React.FC<SidebarSlotProps>;
}
/**
 * Sidebar — the sticky aside chrome for admin consoles and docs shells:
 * fixed width, sticky under the app header, right hairline border, and a
 * flex column for its parts. Content-agnostic; a `NavTree` is the typical
 * body.
 *
 * Compose with the slots (same vocabulary as `Drawer`):
 * - `Sidebar.Header` — pinned top (logo / workspace switcher)
 * - `Sidebar.Body` — the scrollable middle (put the nav here)
 * - `Sidebar.Footer` — pinned bottom behind a hairline (theme/language)
 *
 * For small screens, hide it (`className="hidden lg:flex"`) and reuse the
 * same nav inside a `Drawer` — see the stories for the pairing.
 *
 * @example
 * <Sidebar width={236} top={62} aria-label="Console">
 *   <Sidebar.Header>…logo…</Sidebar.Header>
 *   <Sidebar.Body>
 *     <NavTree groups={…} currentPath={path} />
 *   </Sidebar.Body>
 *   <Sidebar.Footer>…theme toggle…</Sidebar.Footer>
 * </Sidebar>
 */
declare const Sidebar: SidebarComponent;
export { Sidebar };
//# sourceMappingURL=Sidebar.d.ts.map