Section Title

import { createElement } from "react";
import { cx } from "../../utils";
import { body, caption, display, overline, subtitle, title } from "./typography.css";
/**
 * Display typography component for large headings.
 *
 * @template Element - The HTML element type.
 * @param props - The component props.
 * @returns The rendered typography element.
 *
 * @example
 * ```tsx
 * <Display size="large">Big Heading</Display>
 * ```
 */
export function Display({ size = "size", element, children, ...props }) {
    return createElement(element ?? "h1", {
        ...props,
        className: cx(display[size], props.className),
    }, children);
}
/**
 * Title typography component for section headings.
 *
 * @template Element - The HTML element type.
 * @param props - The component props.
 * @returns The rendered typography element.
 *
 * @example
 * ```tsx
 * <Title element="h3">Section Title</Title>
 * ```
 */
export function Title({ size = "size", element, children, ...props }) {
    return createElement(element ?? "h2", {
        ...props,
        className: cx(title[size], props.className),
    }, children);
}
/**
 * Subtitle typography component.
 *
 * @template Element - The HTML element type.
 * @param props - The component props.
 * @returns The rendered typography element.
 *
 * @example
 * ```tsx
 * <Subtitle>Subtitle text</Subtitle>
 * ```
 */
export function Subtitle({ size = "size", element, children, ...props }) {
    return createElement(element ?? "h3", {
        ...props,
        className: cx(subtitle[size], props.className),
    }, children);
}
/**
 * Body typography component for standard text.
 *
 * @template Element - The HTML element type.
 * @param props - The component props.
 * @returns The rendered typography element.
 *
 * @example
 * ```tsx
 * <Body>This is body text.</Body>
 * ```
 */
export function Body({ size = "size", element, children, ...props }) {
    return createElement(element ?? "p", {
        ...props,
        className: cx(body[size], props.className),
    }, children);
}
/**
 * Caption typography component for small text.
 *
 * @template Element - The HTML element type.
 * @param props - The component props.
 * @returns The rendered typography element.
 *
 * @example
 * ```tsx
 * <Caption>Small note</Caption>
 * ```
 */
export function Caption({ size = "size", element, children, ...props }) {
    return createElement(element ?? "span", {
        ...props,
        className: cx(caption[size], props.className),
    }, children);
}
/**
 * Overline typography component (uppercase, small text).
 *
 * @template Element - The HTML element type.
 * @param props - The component props.
 * @returns The rendered typography element.
 *
 * @example
 * ```tsx
 * <Overline>CATEGORY</Overline>
 * ```
 */
export function Overline({ element, children, ...props }) {
    return createElement(element ?? "span", {
        ...props,
        className: cx(overline, props.className),
    }, children);
}