/**
 * @file MobileNav.tsx
 * @input Uses React, useEffect, useRef, useCallback, ReactNode, StyleX
 * @output Exports MobileNav component and MobileNavProps
 * @position Core implementation; consumed by index.ts
 *
 * Full-height slide-out drawer overlay for mobile navigation.
 * The mobile counterpart to SideNav — accepts the same children
 * (SideNavSection, SideNavItem, or any ReactNode).
 *
 * Uses the native `<dialog>` element with `showModal()` for top-layer rendering.
 * This eliminates z-index stacking issues — the drawer renders above everything
 * without manual z-index management. The browser provides:
 * - Top layer promotion (no z-index needed)
 * - `::backdrop` pseudo-element
 * - Body scroll lock
 * - Focus trapping
 * - Escape key handling via `cancel` event
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/MobileNav/index.ts (exports if types change)
 * - /packages/cli/assets/templates/blocks/components/MobileNav/ (showcase blocks)
 */
import { type ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
export interface MobileNavProps extends Omit<BaseProps, 'title'> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLDialogElement>;
    /**
     * Whether the drawer is open.
     * Inside AppShell, this is managed automatically via context.
     * Outside AppShell, provide this prop to control the drawer yourself.
     */
    isOpen?: boolean;
    /**
     * Callback fired when the drawer visibility changes.
     * Called with `false` when the drawer should close
     * (backdrop click, escape, close button).
     * Inside AppShell, this is managed automatically via context.
     * Outside AppShell, provide this prop to control the drawer yourself.
     */
    onOpenChange?: (isOpen: boolean) => void;
    /**
     * Drawer content — typically SideNavSection/SideNavItem, or any ReactNode.
     */
    children: ReactNode;
    /**
     * Header content for the drawer. Rendered next to the close button.
     * Pass a string for a simple text heading, or a ReactNode for
     * custom content (logo, SideNavHeading, search bar, etc.).
     */
    header?: ReactNode;
    /**
     * Width of the drawer in pixels.
     * @default 320
     */
    width?: number;
    /**
     * Which side the drawer slides from.
     * - `'start'` — slides from the inline-start edge (left in LTR)
     * - `'end'` — slides from the inline-end edge (right in LTR)
     * - `'auto'` — determined by the trigger element's position: if the
     *   toggle is in the start half of the viewport the drawer opens from
     *   start, otherwise from end.
     * @default 'auto'
     */
    side?: 'start' | 'end' | 'auto';
    /**
     * Accessible label for the drawer. Falls back to header string, then 'Navigation'.
     */
    label?: string;
    /**
     * Test ID for the root element.
     */
    'data-testid'?: string;
}
/**
 * A slide-out drawer overlay for mobile navigation.
 *
 * The mobile counterpart to SideNav. Renders a full-height drawer that slides
 * in from the start (left in LTR) or end (right in LTR) edge of the viewport,
 * with a semi-transparent backdrop behind it.
 *
 * Uses the native `<dialog>` element with `showModal()` for top-layer rendering,
 * which provides built-in focus trapping, body scroll lock, and `::backdrop`.
 * No manual z-index needed — the browser's top layer handles stacking.
 *
 * When used inside AppShell, `isOpen` and `onOpenChange` are managed
 * automatically via context. When used standalone, provide them as props.
 *
 * @example
 * ```
 * <AppShell mobileNav={
 *   <MobileNav header="Navigation">
 *     <SideNavItem label="Home" href="/" />
 *   </MobileNav>
 * }>
 * <MobileNav isOpen={isOpen} onOpenChange={setIsOpen} header="Navigation">
 *   <SideNavItem label="Home" href="/" />
 * </MobileNav>
 * ```
 */
export declare function MobileNav({ isOpen: isOpenProp, onOpenChange: onOpenChangeProp, children, header, width, side, label, 'data-testid': testId, xstyle, className, style, onClick: onClickProp, ref, ...rest }: MobileNavProps): import("react").JSX.Element;
export declare namespace MobileNav {
    var displayName: string;
}
//# sourceMappingURL=MobileNav.d.ts.map