@metamask/design-system-react
Version:
Design system react ui components
20 lines • 1.52 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Text = void 0;
const react_slot_1 = require("@radix-ui/react-slot");
const react_1 = __importDefault(require("react"));
const types_1 = require("../../types/index.cjs");
const tw_merge_1 = require("../../utils/tw-merge.cjs");
const Text_constants_1 = require("./Text.constants.cjs");
const Text = ({ variant = types_1.TextVariant.BodyMd, children, className, fontWeight, fontFamily = types_1.FontFamily.Default, fontStyle, textTransform, textAlign, overflowWrap, ellipsis, asChild, color = types_1.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 ? react_slot_1.Slot : Text_constants_1.MAP_TEXT_VARIANT_TAG[variant];
const mergedClassName = `${(0, tw_merge_1.twMerge)(color, Text_constants_1.CLASSMAP_TEXT_VARIANT_FONTSTYLE[variant], fontWeight || Text_constants_1.CLASSMAP_TEXT_VARIANT_FONTWEIGHT[variant], fontStyle, fontFamily, textTransform, textAlign, overflowWrap, ellipsis && 'truncate', className)}`;
return (react_1.default.createElement(Component, { className: mergedClassName, style: style, ...props }, children));
};
exports.Text = Text;
//# sourceMappingURL=Text.cjs.map