@metamask/design-system-react
Version:
Design system react ui components
20 lines • 1.37 kB
JavaScript
function $importDefault(module) {
if (module?.__esModule) {
return module.default;
}
return module;
}
import { Slot } from "@radix-ui/react-slot";
import $React from "react";
const React = $importDefault($React);
import { FontFamily, TextColor, TextVariant } from "../../types/index.mjs";
import { twMerge } from "../../utils/tw-merge.mjs";
import { CLASSMAP_TEXT_VARIANT_FONTSTYLE, CLASSMAP_TEXT_VARIANT_FONTWEIGHT, MAP_TEXT_VARIANT_TAG } from "./Text.constants.mjs";
export const Text = ({ variant = TextVariant.BodyMd, children, className, fontWeight, fontFamily = FontFamily.Default, fontStyle, textTransform, textAlign, overflowWrap, ellipsis, asChild, color = TextColor.TextDefault, style, ...props }) => {
// When asChild is true, use Radix Slot to merge props onto the child component.
// Otherwise, render the semantic HTML element mapped to this variant (e.g. h1-h4, p).
const Component = asChild ? Slot : MAP_TEXT_VARIANT_TAG[variant];
const mergedClassName = `${twMerge(color, CLASSMAP_TEXT_VARIANT_FONTSTYLE[variant], fontWeight || CLASSMAP_TEXT_VARIANT_FONTWEIGHT[variant], fontStyle, fontFamily, textTransform, textAlign, overflowWrap, ellipsis && 'truncate', className)}`;
return (React.createElement(Component, { className: mergedClassName, style: style, ...props }, children));
};
//# sourceMappingURL=Text.mjs.map