import { type ElementType, type HTMLAttributes, type ReactNode, type Ref } from "react";
import { type MainClassNameOptions } from "./mainStyles.js";
/**
 * @since 6.0.0
 */
export type CustomMainElement = ElementType<HTMLAttributes<HTMLElement> & {
    ref: Ref<HTMLElement>;
    className?: string;
    tabIndex?: number;
}>;
/**
 * @since 6.0.0
 */
export interface MainProps extends HTMLAttributes<HTMLElement>, MainClassNameOptions {
    /**
     * @defaultValue `"main"`
     */
    as?: CustomMainElement;
    children: ReactNode;
}
/**
 * **Client Component**
 *
 * This component is really only used to dynamically set the `tabIndex` to `-1`
 * while using a keyboard for the `SkipToMainContent` component's focus behavior
 * to work correctly. If you don't need that functionality, use the {@link main}
 * style utility instead.
 *
 * @example Styles Only
 * ```tsx
 * import { main as mainStyles } from "@react-md/core/layout/mainStyles":
 *
 * function MyCustomMainElement({ children }) {
 *   return (
 *     <main
 *       className={mainStyles({
 *         navOffset: true,
 *         appBarOffset: true,
 *       })}
 *     >
 *       {children}
 *     </main>
 *   );
 * }
 * ```
 *
 * @see {@link https://react-md.dev/getting-started/layout | Layout Demos}
 * @since 6.0.0 Renamed from `LayoutMain` removed a lot of
 * functionality to keep this component simple.
 */
export declare const Main: import("react").ForwardRefExoticComponent<MainProps & import("react").RefAttributes<HTMLElement>>;
