Section Title

import { type JSX } from "react"; import { type IntrinsicElement } from "../../utils"; import { type typographyVariants } from "./typography.css"; /** * Props for Typography components. * * @template Element - The HTML element type (e.g., "h1", "p", "span"). */ export type TypographyProps = JSX.IntrinsicElements[Element] & { /** * The HTML element to render. * @defaultValue Varies by component (e.g., "h1" for Display, "p" for Body). */ element?: Element; /** * The size variant of the typography. * @defaultValue "size" */ size?: keyof typeof typographyVariants; }; /** * Display typography component for large headings. * * @template Element - The HTML element type. * @param props - The component props. * @returns The rendered typography element. * * @example * ```tsx * Big Heading * ``` */ export declare function Display({ size, element, children, ...props }: TypographyProps): import("react").ReactElement, "size" | "element" | "children"> & { className: string; }, string | import("react").JSXElementConstructor>; /** * Title typography component for section headings. * * @template Element - The HTML element type. * @param props - The component props. * @returns The rendered typography element. * * @example * ```tsx * Section Title * ``` */ export declare function Title({ size, element, children, ...props }: TypographyProps): import("react").ReactElement, "size" | "element" | "children"> & { className: string; }, string | import("react").JSXElementConstructor>; /** * Subtitle typography component. * * @template Element - The HTML element type. * @param props - The component props. * @returns The rendered typography element. * * @example * ```tsx * Subtitle text * ``` */ export declare function Subtitle({ size, element, children, ...props }: TypographyProps): import("react").ReactElement, "size" | "element" | "children"> & { className: string; }, string | import("react").JSXElementConstructor>; /** * Body typography component for standard text. * * @template Element - The HTML element type. * @param props - The component props. * @returns The rendered typography element. * * @example * ```tsx * This is body text. * ``` */ export declare function Body({ size, element, children, ...props }: TypographyProps): import("react").ReactElement, "size" | "element" | "children"> & { className: string; }, string | import("react").JSXElementConstructor>; /** * Caption typography component for small text. * * @template Element - The HTML element type. * @param props - The component props. * @returns The rendered typography element. * * @example * ```tsx * Small note * ``` */ export declare function Caption({ size, element, children, ...props }: TypographyProps): import("react").ReactElement, "size" | "element" | "children"> & { className: string; }, string | import("react").JSXElementConstructor>; /** * Props for the Overline component. */ export type OverlineProps = JSX.IntrinsicElements[Element] & { /** * The HTML element to render. * @defaultValue "span" */ element?: Element; }; /** * Overline typography component (uppercase, small text). * * @template Element - The HTML element type. * @param props - The component props. * @returns The rendered typography element. * * @example * ```tsx * CATEGORY * ``` */ export declare function Overline({ element, children, ...props }: OverlineProps): import("react").ReactElement, "element" | "children"> & { className: string; }, string | import("react").JSXElementConstructor>;