import { CSSProperties, ReactNode } from 'react';
export type SideNavSubItem = {
    id: string;
    label: ReactNode;
    onSelect?: () => void;
};
export type SideNavItem = {
    id: string;
    label: ReactNode;
    /** Leading icon node. */
    icon?: ReactNode;
    active?: boolean;
    /** Trailing badge/slot (hidden when collapsed). */
    badge?: ReactNode;
    /** Hover flyout entries. When present, clicking the row does not call `onSelect`. */
    nested?: SideNavSubItem[];
    onSelect?: () => void;
};
export type SideNavSection = {
    id?: string;
    /** Uppercase section title (hidden when collapsed). */
    title?: ReactNode;
    items: SideNavItem[];
    /** Optional action row shown under the items (e.g. "Create new"). Hidden when collapsed. */
    action?: ReactNode;
};
export type SideNavProps = {
    sections: SideNavSection[];
    collapsed?: boolean;
    /** Expanded width in px. Defaults to 240. */
    width?: number;
    /** Collapsed width in px. Defaults to 56. */
    collapsedWidth?: number;
    /** Top slot, above the scrollable nav (e.g. a primary CTA). */
    header?: ReactNode;
    /** Extra content rendered inside the scroll area after the sections (e.g. a recents list). */
    children?: ReactNode;
    /** Bottom slot (e.g. user + settings). */
    footer?: ReactNode;
    className?: string;
    style?: CSSProperties;
};
/**
 * Collapsible application sidebar navigation. Renders grouped sections of items
 * with active state, optional badges, and hover flyouts for nested items, plus
 * dedicated `header` and `footer` slots. All data (labels, icons, handlers) is
 * passed in — the component owns layout, collapse behavior, and chrome only.
 */
export declare function SideNav({ sections, collapsed, width, collapsedWidth, header, children, footer, className, style }: SideNavProps): import("react/jsx-runtime").JSX.Element;
export declare namespace SideNav {
    var displayName: string;
}
