@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
63 lines (62 loc) • 1.99 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Typography as Typography$1 } from "@material-tailwind/react";
import "./Typography.css.esm.js";
import { TypographyStyles } from "./Typography.styles.esm.js";
const Typography = forwardRef(
({
className,
children,
variant = "p",
breakpointVariants,
...props
}, ref) => {
const classNameWithFontWeight = className ? hasFontWeightTailwind(className) ? className : className + " font-normal" : "font-normal";
const breakpointClassNames = getBreakpointClassNames(breakpointVariants);
const variantStyle = TypographyStyles[variant].default;
const concatenatedClassName = `${variantStyle} ${classNameWithFontWeight} ${breakpointClassNames}`;
return /* @__PURE__ */ jsx(
Typography$1,
{
className: `${className ? className : ""} ${concatenatedClassName}`,
...props,
ref,
children
}
);
}
);
const hasFontWeightTailwind = (className) => {
const tailwindFontWeightClasses = [
"font-thin",
"font-extralight",
"font-light",
"font-normal",
"font-medium",
"font-semibold",
"font-bold",
"font-extrabold",
"font-black"
];
if (tailwindFontWeightClasses.some(
(fontWeightClass) => className.includes(fontWeightClass)
))
return true;
return false;
};
const getBreakpointClassNames = (breakpointVariants) => {
if (!breakpointVariants)
return "";
const breakpoints = Object.keys(breakpointVariants).map((breakpoint) => {
const variantAtBreakpoint = breakpointVariants[breakpoint];
const classNamesForVariant = TypographyStyles[variantAtBreakpoint];
const breakpointSpecificClassNames = typeof classNamesForVariant === "string" ? classNamesForVariant : classNamesForVariant[breakpoint];
return breakpointSpecificClassNames;
});
return breakpoints.join(" ");
};
export {
Typography
};
//# sourceMappingURL=Typography.esm.js.map