phx-react
Version:
PHX REACT
67 lines • 2.63 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXTextV2 = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const Box_1 = require("../Box");
const helpers_1 = require("../../helpers/helpers");
const PHXTextV2 = ({ as: Tag = 'p', children, size = 'body', weight = 'regular', color = 'default', align = 'left', m, mt, mb, ml, mr, p, pt, pb, pl, pr, lineHeight = 'none', isTruncate = false, }) => {
const sizeMap = {
heading: '2xl',
title: 'xl',
body: 'base',
subtitle: 'sm',
caption: 'xs',
micro: '[11px]',
};
const weightMap = {
regular: 'font-normal',
medium: 'font-medium',
semibold: 'font-semibold',
bold: 'font-bold',
};
const colorMap = {
default: 'text-gray-800',
subdued: 'text-gray-500',
critical: 'text-red-600',
success: 'text-emerald-600',
primary: 'text-gray-900',
warning: 'text-[#FFD6A4]',
info: 'text-[#91D0FF]',
highlight: 'text-[#89F5B5]',
neutral: 'text-[#F0F0F0]',
attention: 'text-[#FFEF9D]',
decorative: 'text-[#F8D1FF]',
danger: 'text-[#FFC1BF]',
};
const lineHeightMap = {
none: 'none',
tight: 'tight',
base: 'normal',
loose: 'loose',
};
const classes = [
(0, helpers_1.getResponsiveClass)('text', size, sizeMap),
weightMap[weight],
colorMap[color],
`text-${align}`,
isTruncate ? 'truncate' : '',
// Margin classes
(0, helpers_1.getResponsiveClass)('m', m, Box_1.spacingMap),
(0, helpers_1.getResponsiveClass)('mt', mt, Box_1.spacingMap),
(0, helpers_1.getResponsiveClass)('mb', mb, Box_1.spacingMap),
(0, helpers_1.getResponsiveClass)('ml', ml, Box_1.spacingMap),
(0, helpers_1.getResponsiveClass)('mr', mr, Box_1.spacingMap),
// Padding classes
(0, helpers_1.getResponsiveClass)('p', p, Box_1.spacingMap),
(0, helpers_1.getResponsiveClass)('pt', pt, Box_1.spacingMap),
(0, helpers_1.getResponsiveClass)('pb', pb, Box_1.spacingMap),
(0, helpers_1.getResponsiveClass)('pl', pl, Box_1.spacingMap),
(0, helpers_1.getResponsiveClass)('pr', pr, Box_1.spacingMap),
(0, helpers_1.getResponsiveClass)('leading', lineHeight, lineHeightMap),
];
return react_1.default.createElement(Tag, { className: classes.filter(Boolean).join(' ') }, children);
};
exports.PHXTextV2 = PHXTextV2;
//# sourceMappingURL=TextV2.js.map