import { type ElementType, type HTMLAttributes } from "react";
import { type TypographyClassNameOptions } from "./typographyStyles.js";
/**
 * A union of the default supported elements that the `Typography` component can
 * be rendered as. This is mostly used for adding the correct `HTMLAttributes`
 * and enabling the forward ref.
 *
 * @since 4.0.0
 */
export type TypographyHTMLElement = HTMLHeadingElement | HTMLParagraphElement | HTMLSpanElement | HTMLDivElement | HTMLAnchorElement | HTMLBodyElement | HTMLHtmlElement;
/** @since 6.0.0 */
export type CustomTypographyComponent = ElementType<HTMLAttributes<TypographyHTMLElement> & {
    className: string;
}>;
/**
 * @since 6.0.0 Renamed `component` to `as`.
 * @since 6.0.0 Removed the children render function behavior. Use the
 * `typography` class name utility instead.
 */
export interface TypographyProps extends HTMLAttributes<TypographyHTMLElement>, TypographyClassNameOptions {
    /**
     * The component to render as when the children are not a render function. If
     * this prop is omitted, the component will be determined by the `type` prop
     * where:
     *
     * - `"headline-1" -> <h1>`
     * - `"headline-2" -> <h2>`
     * - `"headline-3" -> <h3>`
     * - `"headline-4" -> <h4>`
     * - `"headline-5" -> <h5>`
     * - `"headline-6" -> <h6>`
     * - `"subtitle-1" -> <h5>`
     * - `"subtitle-2" -> <h6>`
     * - `"body-1"     -> <p>`
     * - `"body-2"     -> <p>`
     * - `"caption"    -> <caption>`
     * - `"overline"   -> <span>`
     *
     * @since 6.0.0 Renamed from `component`
     */
    as?: CustomTypographyComponent;
}
/**
 * Render text with one of the material design typography styles applied and
 * optional styles like font-weight, font-style, text color, etc.
 *
 * @example All Example
 * ```tsx
 * import { Typography } from "@react-md/core/typography/Typography":
 *
 * export function Example() {
 *   return (
 *    <>
 *      <Typography type="headline-1">Headline 1</Typography>
 *      <Typography type="headline-2">Headline 2</Typography>
 *      <Typography type="headline-3">Headline 3</Typography>
 *      <Typography type="headline-4">Headline 4</Typography>
 *      <Typography type="headline-5">Headline 5</Typography>
 *      <Typography type="headline-6">Headline 6</Typography>
 *      <Typography type="subtitle-1">Subtitle 1</Typography>
 *      <Typography type="subtitle-2">Subtitle 2</Typography>
 *      <Typography>
 *        A paragraph of text.
 *      </Typography>
 *      <Typography type="body-1">
 *        A paragraph of text.
 *      </Typography>
 *      <Typography type="body-2">
 *        Another paragraph of text.
 *      </Typography>
 *      <Typography type="caption" component="h5">
 *        Caption text
 *      </Typography>
 *      <Typography type="overline" component="h5">
 *        Overline text
 *      </Typography>
 *    </>
 *   ):
 * }
 * ```
 *
 * @see {@link https://react-md.dev/components/typography | Typography Demos}
 * @since 6.0.0 Removed the children render function behavior . Use the
 * `typography` class name utility instead.
 */
export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<TypographyHTMLElement>>;
