import { type Ref, type RefCallback } from "react";
import { type CSSVariable } from "../theme/types.js";
declare module "react" {
    interface CSSProperties {
        "--rmd-layout-size"?: string;
        "--rmd-layout-header-height"?: string;
    }
}
/**
 * @since 6.0.0
 */
export interface LayoutAppBarHeightResult {
    height: number | undefined;
    variables: readonly CSSVariable[];
    appBarRef: RefCallback<HTMLDivElement>;
}
/**
 * @example Main Usage
 * ```tsx
 * import { AppBar } from "@react-md/core/app-bar/AppBar";
 * import { useLayoutAppBarHeight } from "@react-md/core/layout/useLayoutAppBarHeight";
 * import { useCSSVariables } from "@react-md/core/theme/useCSSVariables";
 * import type { PropsWithChildren, ReactElement } from "react";
 *
 * export function LayoutHeader({ children }: PropsWithChildren): ReactElement {
 *   const { appBarRef, variables } = useLayoutAppBarHeight();
 *   useCSSVariables(variables);
 *
 *   return (
 *     <AppBar ref={appBarRef} {...customProps}>
 *       <CustomChildren />
 *     </AppBar>
 *   );
 * };
 * ```
 *
 * @example Inline Variables
 * ```tsx
 * import { AppBar } from "@react-md/core/app-bar/AppBar";
 * import { useLayoutAppBarHeight } from "@react-md/core/layout/useLayoutAppBarHeight";
 * import { useInlineCSSVariables } from "@react-md/core/theme/useInlineCSSVariables";
 * import type { PropsWithChildren, ReactElement } from "react";
 *
 * export function Layout({ children }: PropsWithChildren): ReactElement {
 *   const { appBarRef, variables } = useLayoutAppBarHeight();
 *   const inlineStyle = useCSSVariables(variables);
 *
 *   return (
 *     <div style={inlineStyle}>
 *       <AppBar ref={appBarRef} {...customProps}>
 *         <CustomChildren />
 *       </AppBar>
 *       {children}
 *     </div>
 *   );
 * };
 * ```
 *
 * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
 * @since 6.0.0
 */
export declare function useLayoutAppBarHeight(ref?: Ref<HTMLDivElement>): LayoutAppBarHeightResult;
