import React from 'react';
export interface HeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'> {
    /** Figma's Logo slot. Rendered at the start, never shrinks. */
    brand?: React.ReactNode;
    /** Figma's `Center Slot` — nav items. Inline on Desktop and Tablet; moves
     *  into the Mobile-Open menu below the mobile breakpoint. */
    center?: React.ReactNode;
    /** Figma's `End Slot` — buttons and actions. Same placement rules as `center`. */
    end?: React.ReactNode;
    /** Controlled Mobile-Open state. Pair with `onOpenChange`. */
    open?: boolean;
    /** Initial Mobile-Open state when uncontrolled. */
    defaultOpen?: boolean;
    /** Fires whenever the menu toggle changes the state, controlled or not. */
    onOpenChange?: (open: boolean) => void;
    /** Accessible name for the mobile menu toggle. */
    menuLabel?: string;
    /**
     * What the mobile toggle opens.
     *
     * `panel` (default) is Figma's Mobile-Open: `center` and `end` drop below the
     * bar. `dialog` is for an app whose navigation lives in a Sidebar: the toggle
     * sits at the start of the bar and only reports `onOpenChange`, the caller
     * opens a Drawer with it, and `center` and `end` stay in the bar at every
     * width — so keep `center` empty and `end` short.
     */
    menuType?: 'panel' | 'dialog';
    children?: React.ReactNode;
}
/**
 * Header renders Figma's four Device variants — Desktop, Tablet,
 * Mobile-Closed, Mobile-Open — from one DOM tree.
 *
 * TWO AXES, AND THEY ARE NOT THE SAME KIND OF THING
 *
 * Figma spells Device as a single four-way variant, but it is really two: a
 * *breakpoint* (Desktop / Tablet / Mobile) and a *state* (Closed / Open). They
 * are modelled differently here because they are known by different people.
 *
 *   Breakpoint is a media query. It is the one variant axis in the system the
 *   browser already knows the answer to — a header is Mobile because the
 *   viewport is narrow — and having React duplicate that judgement is how the
 *   two drift apart. Breakpoints match the Breakpoint collection's container
 *   widths: Tablet below 1216, Mobile below 896.
 *
 *   Open/Closed is a prop, because only the caller knows. It follows the
 *   controlled/uncontrolled pair the rest of the system uses.
 *
 * ONE TREE, TWO LAYOUTS
 *
 * `center` and `end` sit inline in the bar on Desktop and Tablet, and inside
 * the dropped Menu-Container on Mobile-Open. They are rendered once, in one
 * wrapper, which is `display: contents` above the mobile breakpoint and an
 * absolutely positioned panel below it. Rendering them twice — or moving them
 * with JavaScript — would mean the same nav link exists twice in the
 * accessibility tree, and would reset any state a caller put in a slot every
 * time the viewport crossed 896px.
 *
 * The centre slot is no longer hidden on Tablet. Figma's Tablet variant ships
 * it populated; the previous release collapsed it, which was correct for the
 * previous design and is not for this one.
 *
 * A `<header>` element with no explicit role: it is a landmark already when it
 * is a direct child of body, which is where a page header sits.
 */
export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
//# sourceMappingURL=Header.d.ts.map