import { jsx as _jsx } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { cssUtils } from "../cssUtils.js";
/**
 * Get a typography class name based on different typography options. This is
 * only useful if you are unable to use the {@link Typography} component for
 * some reason.
 *
 * @example
 * Simple Example
 * ```ts
 * import { getTypographyClassName } from "@react-md/core";
 *
 * function Example() {
 *   return (
 *     <>
 *       <h1 className={getTypographyClassName({ type: "headline-1" })} />
 *       <h2 className={getTypographyClassName({ type: "headline-2" })} />
 *       <h3 className={getTypographyClassName({ type: "headline-3" })} />
 *       <h4 className={getTypographyClassName({ type: "headline-4" })} />
 *       <h5 className={getTypographyClassName({ type: "headline-5" })} />
 *       <h6 className={getTypographyClassName({ type: "headline-6" })} />
 *       <h5 className={getTypographyClassName({ type: "subtitle-1" })} />
 *       <h6 className={getTypographyClassName({ type: "subtitle-2" })} />
 *       <p className={getTypographyClassName()} />
 *       <p className={getTypographyClassName({ type "body-1" })} />
 *       <p className={getTypographyClassName({ type "body-1" })} />
 *       <caption className={getTypographyClassName({ type: "caption" })} />
 *       <span className={getTypographyClassName({ type: "overline" })} />
 *     </>
 *   );
 * }
 * ```
 *
 * @example
 * Applying Additional Styles
 * ```ts
 * import { getTypography } from "@react-md/core";
 *
 * function Example() {
 *   return (
 *     <>
 *       <h1
 *         // only maintain the default margin-bottom
 *         className={getTypographyClassName({
 *           type: "headline-1",
 *           margin: "bottom",
 *         })}
 *        />
 *
 *       <h2
 *         // remove all default margin
 *         className={getTypographyClassName({
 *           type: "headline-2",
 *           margin: "none",
 *         })}
 *       />
 *
 *       <h3
 *         // only maintain the default margin-top
 *         className={getTypographyClassName({
 *           type: "headline-3",
 *           margin: "top",
 *         })}
 *       />
 *
 *       <p
 *         // center the text, set to bold, and only maintain default margin-bottom
 *         className={getTypographyClassName({
 *           type "subtitle-1",
 *           align: "center",
 *           margin: "bottom",
 *         })}
 *       />
 *     </>
 *   );
 * }
 * ```
 *
 * @see {@link Typography}
 * @param options - An optional object of options used to create the typography
 * class name.
 * @returns a typography class name string
 * @remarks \@since 6.0.0
 */ export function typography(options = {}) {
    const { type = "body-1" } = options;
    // using `&&` instead of `bem` since the latest version of typescript does not
    // support setting the same object key (empty string)
    return cnb("rmd-typography", type && `rmd-typography--${type}`, cssUtils(options));
}
/** @internal */ function getComponent(as, type) {
    if (as) {
        return as;
    }
    switch(type){
        case "headline-1":
            return "h1";
        case "headline-2":
            return "h2";
        case "headline-3":
            return "h3";
        case "headline-4":
            return "h4";
        case "headline-5":
            return "h5";
        case "headline-6":
        case "subtitle-1":
        case "subtitle-2":
            return "h6";
        case "body-1":
        case "body-2":
            return "p";
        case "caption":
            return "caption";
        default:
            return "span";
    }
}
/**
 * **Server Component**
 *
 * 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":
 *
 * 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>
 *    </>
 *   ):
 * }
 * ```
 */ export const Typography = /*#__PURE__*/ forwardRef(function Typography(props, ref) {
    const { as, type = "body-1", className, margin, fontStyle, fontWeight, textAlign, textColor, textDecoration, textTransform, textOverflow, children, ...remaining } = props;
    const Component = getComponent(as, type);
    return /*#__PURE__*/ _jsx(Component, {
        ...remaining,
        ref: ref,
        className: typography({
            type,
            margin,
            fontStyle,
            fontWeight,
            textAlign,
            textColor,
            textDecoration,
            textTransform,
            textOverflow,
            className
        }),
        children: children
    });
});

//# sourceMappingURL=Typography.js.map