aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
223 lines (220 loc) • 6.9 kB
JavaScript
'use client';
import { jsx } from 'react/jsx-runtime';
import React, { forwardRef } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
// Helper function to convert spacing to Tailwind class
const spacingToTailwind = (value, prefix) => {
if (value === undefined) return '';
if (typeof value === 'string') return `${prefix}-[${value}]`;
// Map 8px units to Tailwind spacing scale
const spacing = Math.round(value);
if (spacing === 0) return `${prefix}-0`;
if (spacing <= 1) return `${prefix}-1`;
if (spacing <= 2) return `${prefix}-2`;
if (spacing <= 3) return `${prefix}-3`;
if (spacing <= 4) return `${prefix}-4`;
if (spacing <= 6) return `${prefix}-6`;
if (spacing <= 8) return `${prefix}-8`;
return `${prefix}-[${spacing * 8}px]`;
};
/**
* Box Component
*
* A flexible container with system props for layout and styling.
*/
const Box = /*#__PURE__*/forwardRef((props, ref) => {
const {
children,
component: Component = 'div',
display,
flexDirection,
flexWrap,
justifyContent,
alignItems,
alignContent,
alignSelf,
p,
pt,
pr,
pb,
pl,
px,
py,
m,
mt,
mr,
mb,
ml,
mx,
my,
width,
height,
minWidth,
minHeight,
maxWidth,
maxHeight,
borderRadius,
bgcolor,
glass = false,
elevation = 'level1',
className,
style,
onClick,
...rest
} = props;
// Build dynamic classes
const displayClasses = {
block: 'block',
flex: 'flex',
inline: 'inline',
'inline-block': 'inline-block',
'inline-flex': 'inline-flex',
grid: 'grid',
'inline-grid': 'inline-grid',
none: 'hidden'
};
const flexDirectionClasses = {
row: 'flex-row',
'row-reverse': 'flex-row-reverse',
column: 'flex-col',
'column-reverse': 'flex-col-reverse'
};
const flexWrapClasses = {
nowrap: 'flex-nowrap',
wrap: 'flex-wrap',
'wrap-reverse': 'flex-wrap-reverse'
};
const justifyContentClasses = {
'flex-start': 'justify-start',
'flex-end': 'justify-end',
center: 'justify-center',
'space-between': 'justify-between',
'space-around': 'justify-around',
'space-evenly': 'justify-evenly'
};
const alignItemsClasses = {
'flex-start': 'items-start',
'flex-end': 'items-end',
center: 'items-center',
baseline: 'items-baseline',
stretch: 'items-stretch'
};
const alignContentClasses = {
'flex-start': 'content-start',
'flex-end': 'content-end',
center: 'content-center',
'space-between': 'content-between',
'space-around': 'content-around',
stretch: 'content-stretch'
};
const alignSelfClasses = {
auto: 'self-auto',
'flex-start': 'self-start',
'flex-end': 'self-end',
center: 'self-center',
baseline: 'self-baseline',
stretch: 'self-stretch'
};
const combinedClassName = cn('box-border', display && displayClasses[display], flexDirection && flexDirectionClasses[flexDirection], flexWrap && flexWrapClasses[flexWrap], justifyContent && justifyContentClasses[justifyContent], alignItems && alignItemsClasses[alignItems], alignContent && alignContentClasses[alignContent], alignSelf && alignSelfClasses[alignSelf],
// Padding
p !== undefined && spacingToTailwind(p, 'p'), pt !== undefined && spacingToTailwind(pt, 'pt'), pr !== undefined && spacingToTailwind(pr, 'pr'), pb !== undefined && spacingToTailwind(pb, 'pb'), pl !== undefined && spacingToTailwind(pl, 'pl'), px !== undefined && spacingToTailwind(px, 'px'), py !== undefined && spacingToTailwind(py, 'py'),
// Margin
m !== undefined && spacingToTailwind(m, 'm'), mt !== undefined && spacingToTailwind(mt, 'mt'), mr !== undefined && spacingToTailwind(mr, 'mr'), mb !== undefined && spacingToTailwind(mb, 'mb'), ml !== undefined && spacingToTailwind(ml, 'ml'), mx !== undefined && spacingToTailwind(mx, 'mx'), my !== undefined && spacingToTailwind(my, 'my'), className);
const combinedStyle = {
...(width !== undefined && {
width: typeof width === 'number' ? `${width}px` : width
}),
...(height !== undefined && {
height: typeof height === 'number' ? `${height}px` : height
}),
...(minWidth !== undefined && {
minWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth
}),
...(minHeight !== undefined && {
minHeight: typeof minHeight === 'number' ? `${minHeight}px` : minHeight
}),
...(maxWidth !== undefined && {
maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth
}),
...(maxHeight !== undefined && {
maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
}),
...(borderRadius !== undefined && {
borderRadius: typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius
}),
...(bgcolor && {
backgroundColor: bgcolor
}),
...style
};
if (glass) {
// Map elevation to OptimizedGlass elevation
const getElevationLevel = elev => {
if (typeof elev === 'string' && elev.startsWith('level')) {
return elev;
}
const numElev = typeof elev === 'number' ? elev : 1;
if (numElev <= 1) return 'level1';
if (numElev <= 2) return 'level2';
if (numElev <= 3) return 'level3';
return 'level4';
};
return jsx(OptimizedGlassCore, {
"data-glass-component": true,
ref: ref,
intent: "neutral",
elevation: getElevationLevel(elevation),
intensity: "medium",
depth: 2,
tint: "neutral",
border: "subtle",
animation: "none",
performanceMode: "medium",
className: combinedClassName,
style: combinedStyle,
onClick: onClick,
...rest,
children: children
});
}
return /*#__PURE__*/React.createElement(Component, {
ref,
className: cn(combinedClassName),
style: combinedStyle,
onClick,
...rest
}, children);
});
Box.displayName = 'Box';
/**
* GlassBox Component
*
* A box component with glass morphism styling.
*/
const GlassBox = /*#__PURE__*/forwardRef((props, ref) => {
// TODO: Integrate ContrastGuard for any section titles, labels, and helper text for WCAG AA compliance
const {
glass = true,
elevation = 'level2',
borderRadius = 8,
className,
...rest
} = props;
return jsx(Box, {
ref: ref,
glass: glass,
elevation: elevation,
borderRadius: borderRadius,
className: cn('glass-box', className),
...rest
});
});
GlassBox.displayName = 'GlassBox';
export { Box, GlassBox };
//# sourceMappingURL=GlassBox.js.map