/// <reference types="react" />
import { type AppBarProps, type CustomAppBarComponent } from "../app-bar/AppBar.js";
import { type SkipToMainContentProps } from "../link/SkipToMainContent.js";
import { type CssPosition, type PropsWithRef } from "../types.js";
/**
 * @since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props
 */
export interface LayoutAppBarProps extends AppBarProps {
    /** @defaultValue `"header"` */
    as?: CustomAppBarComponent;
    /** @defaultValue `"fixed"` */
    position?: CssPosition;
    /**
     * Any additional props to pass to the {@link SkipToMainContent} component.
     */
    skipProps?: PropsWithRef<SkipToMainContentProps, HTMLAnchorElement>;
}
/**
 * **Client Component**
 *
 * This component is used to dynamically update the `--rmd-layout-header-offset`
 * based on the current height of this app bar. If you are concerned about
 * javascript bundle size, it is recommended to configure this variable in SCSS
 * instead.
 *
 * @example Static Height
 * ```scss
 * @use "everything";
 *
 * :root {
 *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
 * }
 * ```
 *
 * @example Media Query Height Changes
 * ```scss
 * @use "everything";
 *
 * :root {
 *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
 *   @include everything.tablet-media {
 *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);
 *   }
 * }
 * ```
 *
 * @since 6.0.0 This component no longer renders the `LayoutNavToggle` and
 * `LayoutAppBarTitle` since they no longer exist. The only purpose of this
 * component is to dynamically set the `--rmd-layout-header-height` variable.
 */
export declare const LayoutAppBar: import("react").ForwardRefExoticComponent<LayoutAppBarProps & import("react").RefAttributes<HTMLDivElement>>;
