@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
57 lines (56 loc) • 2.35 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Typography as TypographyMaterial, } from "@material-tailwind/react";
import "./Typography.css";
import { TypographyStyles } from "./Typography.styles";
var Breakpoint;
(function (Breakpoint) {
Breakpoint["SM"] = "sm";
Breakpoint["MD"] = "md";
Breakpoint["LG"] = "lg";
Breakpoint["XL"] = "xl";
Breakpoint["XL2"] = "2xl";
})(Breakpoint || (Breakpoint = {}));
export const Typography = forwardRef(({ className, children, variant = "p", breakpointVariants, ...props }, ref) => {
// If className exists, and if it does not define a font-weight class, use font-normal
// otherwise use font-normal as className
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 (_jsx(TypographyMaterial, { className: `${className ? className : ""} ${concatenatedClassName}`, ...props, ref: ref, children: 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(" ");
};