/**
 * @file SideNav.tsx
 * @input Uses React, HTMLAttributes, ReactNode, StyleX
 * @output Exports SideNav component and SideNavProps
 * @position Core implementation; consumed by index.ts, tested by SideNav.test.tsx
 *
 * Sidebar navigation container with five zones: header + topContent (sticky together),
 * children (scrollable), footer, and footerIcons (sticky bottom).
 *
 * Supports optional resize via drag handle at the inline-end edge.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/SideNav/SideNav.doc.mjs
 * - /packages/core/src/SideNav/SideNav.test.tsx
 * - /packages/core/src/SideNav/index.ts
 * - /apps/storybook/stories/SideNav.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
 */
import { type ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
import type { StyleXStyles } from '@stylexjs/stylex';
import { type SideNavCollapsibleConfig, type SideNavImperativeCollapseHandle } from './SideNavCollapseContext';
import type { ResizableConfig } from '../Resizable/useResizable';
export interface SideNavProps extends BaseProps<HTMLElement> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLElement>;
    /**
     * Imperative collapse handle for SideNavCollapseButton instances rendered
     * outside this SideNav. This intentionally stays separate from `ref`, which
     * continues to expose the root HTMLElement.
     *
     * @deprecated Hand the same controlled `collapsible` config to SideNav and
     * to the outside button instead.
     */
    handleRef?: React.Ref<SideNavImperativeCollapseHandle>;
    /**
     * Header area — typically SideNavHeading. Sticky at top.
     */
    header?: ReactNode;
    /**
     * Content pinned below header (e.g., create button, top-level items). Sticky.
     */
    topContent?: ReactNode;
    /**
     * Navigation sections and items. Scrollable.
     */
    children: ReactNode;
    /**
     * Footer area above icon bar (e.g., promo cards).
     */
    footer?: ReactNode;
    /**
     * Footer icon bar (e.g., help, notifications, avatar).
     */
    footerIcons?: ReactNode;
    /**
     * StyleX styles created via `stylex.create()`. Merged with the component's
     * base styles inside a single `stylex.props()` call for optimal deduplication.
     *
     * @example
     * ```
     * const overrides = stylex.create({ root: { marginBottom: 8 } });
     * <Component xstyle={overrides.root} />
     * ```
     */
    xstyle?: StyleXStyles;
    /**
     * CSS class name(s) appended to the root element.
     * If you're using StyleX, prefer `xstyle` for optimal style deduplication.
     */
    className?: string;
    /**
     * Inline styles to apply to the root element. Spread after StyleX
     * inline styles, so these values take priority.
     */
    style?: React.CSSProperties;
    /**
     * Test ID for the root element.
     */
    'data-testid'?: string;
    /**
     * Enables a resize handle at the inline-end edge for resizing the sidebar.
     * Uses `useResizable` internally and renders `ResizeHandle` in
     * overlay mode. When collapsed, the handle is hidden.
     *
     * - `true` — resizable with defaults (260px initial, 180–480px range)
     * - Object — configured via `ResizableConfig`:
     *   - `defaultWidth` — initial width in pixels (default: 260)
     *   - `minWidth` — minimum width in pixels (default: 180)
     *   - `maxWidth` — maximum width in pixels (default: 480)
     *   - `autoSaveId` — localStorage key for persisting width
     *   - `onWidthChange` — called when the width changes
     *
     * @default false
     */
    resizable?: boolean | ResizableConfig;
    /**
     * Enables collapse behavior. The sidebar can be collapsed to a narrow
     * icon-only toolbar.
     *
     * - `true` — enables collapse with default toggle button and uncontrolled state
     * - Object — enables collapse with advanced configuration:
     *   - `defaultIsCollapsed` — start collapsed (uncontrolled)
     *   - `isCollapsed` + `onCollapsedChange` — controlled mode. Pass the same
     *     object to a `SideNavCollapseButton` rendered outside this SideNav
     *   - `hasButton` — render built-in collapse button (default: true)
     *   - `buttonLabel` — accessibility label for the collapse button
     *
     * @default false
     */
    collapsible?: boolean | SideNavCollapsibleConfig;
}
/**
 * Sidebar navigation container for application pages.
 *
 * Five vertical zones: sticky header + action area at top,
 * scrollable nav content in the middle, and sticky footer + icon bar at bottom.
 *
 * @example
 * ```
 * <SideNav
 *   header={<SideNavHeading heading="My App" headingHref="/" />}
 *   topContent={<Button label="Create new" variant="primary" />}>
 *   <SideNavSection heading="Main">
 *     <SideNavItem label="Dashboard" isSelected href="/dashboard" />
 *     <SideNavItem label="Projects" href="/projects" />
 *   </SideNavSection>
 * </SideNav>
 * ```
 */
export declare function SideNav({ header, topContent, children, footer, footerIcons, collapsible, resizable, xstyle, className, style, 'data-testid': testId, ref, handleRef, ...props }: SideNavProps): import("react").JSX.Element;
export declare namespace SideNav {
    var displayName: string;
}
//# sourceMappingURL=SideNav.d.ts.map