phx-react
Version:
PHX REACT
63 lines • 2.69 kB
JavaScript
'use client';
import React from 'react';
import { getResponsiveClass } from '../../helpers/helpers';
export const spacingMap = {
none: '0',
atomic: '1',
tight: '2',
snappy: '3',
base: '4',
loose: '6',
spacious: '7',
distant: '8',
};
export const borderWidthMap = {
none: '0',
thin: '',
medium: '2',
};
export const lineStylesMap = {
solid: 'solid',
dotted: 'dotted',
};
export const PHXBox = ({ children, p, pt, pb, pl, pr, m, mt, mb, ml, mr, fullWidth = false, borderStyle, borderWidth, maxWidth, as = 'div', borderTop, borderBottom, borderLeft, borderRight, borderColor = 'default', cursor = 'default', widthFitContent = false, }) => {
const borderColorMap = {
default: 'border-gray-400',
};
const hasSideBorderWidth = !!(borderTop || borderBottom || borderLeft || borderRight);
const hasAnyBorderWidth = !!(borderWidth || hasSideBorderWidth);
const shouldApplyBorder = hasAnyBorderWidth || !!borderStyle;
const resolvedBorderWidth = borderWidth || (borderStyle && !hasSideBorderWidth ? 'thin' : undefined);
const resolvedBorderStyle = borderStyle || (hasAnyBorderWidth ? 'solid' : undefined);
const borderStyleClass = getResponsiveClass('border', resolvedBorderStyle, lineStylesMap);
const classes = [
// 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),
widthFitContent ? 'w-fit' : '',
fullWidth ? 'w-full' : '',
getResponsiveClass('border', resolvedBorderWidth, borderWidthMap),
borderStyleClass,
getResponsiveClass('border-t', borderTop, borderWidthMap),
getResponsiveClass('border-b', borderBottom, borderWidthMap),
getResponsiveClass('border-l', borderLeft, borderWidthMap),
getResponsiveClass('border-r', borderRight, borderWidthMap),
shouldApplyBorder ? borderColorMap[borderColor] : '',
cursor === 'pointer' ? 'cursor-pointer' : '',
];
const styles = {
maxWidth: maxWidth ? `${maxWidth}px` : undefined,
};
const Element = as;
return (React.createElement(Element, { className: classes.filter(Boolean).join(' '), style: styles }, children));
};
//# sourceMappingURL=Box.js.map