material-you-react/src/primitive-components/typography/typography.tsx

import { forwardRef, HTMLAttributes } from 'react';

export const Typography = {
    h1: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
        (props, ref) => {
            return (
                <h1
                    className={`m3 m3-typography display-hero ${props.className}`}
                    ref={ref}
                >
                    {props.children}
                </h1>
            );
        },
    ),
    h2: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
        (props, ref) => {
            return (
                <h2
                    className={`m3 m3-typography display-large ${props.className}`}
                    ref={ref}
                >
                    {props.children}
                </h2>
            );
        },
    ),
    h3: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
        (props, ref) => {
            return (
                <h3
                    className={`m3 m3-typography headline-medium ${props.className}`}
                    ref={ref}
                >
                    {props.children}
                </h3>
            );
        },
    ),
    h4: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
        (props, ref) => {
            return (
                <h4
                    className={`m3 m3-typography headline-small ${props.className}`}
                    ref={ref}
                >
                    {props.children}
                </h4>
            );
        },
    ),
    h5: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
        (props, ref) => {
            return (
                <h5
                    className={`m3 m3-typography title-medium ${props.className}`}
                    ref={ref}
                >
                    {props.children}
                </h5>
            );
        },
    ),
    h6: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
        (props, ref) => {
            return (
                <h6
                    className={`m3 m3-typography title-small ${props.className}`}
                    ref={ref}
                >
                    {props.children}
                </h6>
            );
        },
    ),
};