phx-react
Version:
PHX REACT
62 lines • 2.2 kB
JavaScript
'use client';
import React from 'react';
import { spacingMap } from '../Box';
import { getResponsiveClass } from '../../helpers/helpers';
export 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 = [
getResponsiveClass('text', size, sizeMap),
weightMap[weight],
colorMap[color],
`text-${align}`,
isTruncate ? 'truncate' : '',
// Margin classes
getResponsiveClass('m', m, spacingMap),
getResponsiveClass('mt', mt, spacingMap),
getResponsiveClass('mb', mb, spacingMap),
getResponsiveClass('ml', ml, spacingMap),
getResponsiveClass('mr', mr, spacingMap),
// Padding classes
getResponsiveClass('p', p, spacingMap),
getResponsiveClass('pt', pt, spacingMap),
getResponsiveClass('pb', pb, spacingMap),
getResponsiveClass('pl', pl, spacingMap),
getResponsiveClass('pr', pr, spacingMap),
getResponsiveClass('leading', lineHeight, lineHeightMap),
];
return React.createElement(Tag, { className: classes.filter(Boolean).join(' ') }, children);
};
//# sourceMappingURL=TextV2.js.map