import { ComponentPropsWithRef } from '@clutchd/component';
import * as React from 'react';

/**
 * `Footer` - A layout component designed to contain a page's footer content. Renders as a `footer` element.
 * @param props `IFooterHtmlProps` used to render this `Footer`.
 * @returns `Footer` component.
 */
declare function Footer({ className, ...props }: ComponentPropsWithRef<"footer">): React.JSX.Element;
declare namespace Footer {
    var displayName: string;
}

/**
 * `Header` - A layout component designed to contain a page's header content. Renders as a `header` element.
 * @param props `IHeaderHtmlProps` used to render this `Header`.
 * @returns `Header` component.
 */
declare function Header({ className, ...props }: ComponentPropsWithRef<"header">): React.JSX.Element;
declare namespace Header {
    var displayName: string;
}

/**
 * `Main` - A layout component designed to contain a page's primary Main. Renders as a `main` element.
 * @param props `IMainHtmlProps` used to render this `Main`.
 * @returns `Main` component.
 */
declare function Main({ className, ...props }: ComponentPropsWithRef<"main">): React.JSX.Element;
declare namespace Main {
    var displayName: string;
}

/**
 * `Page` - A `Container` designed to contain an entire page. Renders as a `div` element that fills the screen.
 * @param props `IPageHtmlProps` used to render this `Page`.
 * @returns `Page` component.
 */
declare function Page({ className, ...props }: ComponentPropsWithRef<"div">): React.JSX.Element;
declare namespace Page {
    var displayName: string;
}

export { Footer, Header, Main, Page };