aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
157 lines (154 loc) • 5.75 kB
JavaScript
'use client';
import { jsx } from 'react/jsx-runtime';
import { cn } from '../../lib/utilsComprehensive.js';
import { forwardRef } from 'react';
import { useReducedMotion } from '../../hooks/useReducedMotion.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 { MotionFramer } from '../../primitives/motion/MotionFramer.js';
import { LiquidGlassMaterial } from '../../primitives/LiquidGlassMaterial.js';
/**
* DimensionalGlass Component
* Modern implementation using OptimizedGlass with dimensional effects
*/
const DimensionalGlass = /*#__PURE__*/forwardRef(({
children,
className,
style,
elevation = 'level2',
blurStrength = 'standard',
opacity = 'medium',
borderOpacity = 'medium',
borderWidth = 1,
fullWidth = false,
fullHeight = false,
borderRadius = 12,
interactive = true,
padding = 16,
depth = 0.5,
dynamicShadow = true,
animate = false,
zIndex = 1,
backgroundColor = 'var(--glass-bg-default)',
maxTilt = 5,
hoverScale = 1.02,
animationConfig,
disableAnimation,
motionSensitivity,
material = 'glass',
materialProps,
...rest
}, ref) => {
const prefersReducedMotion = useReducedMotion();
const shouldAnimate = animate && !disableAnimation && !prefersReducedMotion;
// Map blur strength to intensity
const intensityMap = {
none: 'subtle',
light: 'subtle',
standard: 'medium',
heavy: 'strong'
};
// Map elevation to OptimizedGlass elevation levels
const getElevationLevel = elev => {
if (typeof elev === 'string' && elev.startsWith('level')) {
return elev;
}
// Map numeric elevation to level
const numElev = typeof elev === 'number' ? elev : 2;
if (numElev <= 1) return 'level1';
if (numElev <= 2) return 'level2';
if (numElev <= 3) return 'level3';
return 'level4';
};
// Calculate depth transform
const depthTransform = depth > 0 ? `translateZ(${depth * 10}px)` : '';
return jsx(MotionFramer, {
preset: shouldAnimate ? "fadeIn" : "none",
className: cn('transform-gpu', shouldAnimate && 'animate-pulse-subtle', className),
children: material === 'liquid' ? jsx(LiquidGlassMaterial, {
ref: ref,
ior: materialProps?.ior || 1.52,
thickness: materialProps?.thickness || depth * 20 + 8,
tint: materialProps?.tint || {
r: 0,
g: 0,
b: 0,
a: depth * 0.05 + 0.03
},
variant: materialProps?.variant === 'clear' ? 'clear' : materialProps?.variant === 'regular' ? 'regular' : 'regular',
quality: materialProps?.quality || 'ultra',
environmentAdaptation: true,
motionResponsive: true,
interactive: interactive,
className: cn(
// Base styles
'relative overflow-hidden transition-all duration-300', 'liquid-glass-dimensional-surface',
// Dimensions
fullWidth && 'w-full', fullHeight && 'h-full',
// Interactive states
interactive && ['hover:scale-[var(--hover-scale)] active:scale-95', 'cursor-pointer'],
// Animation states
shouldAnimate && 'animate-dimensional-float', className),
style: {
...style,
'--hover-scale': hoverScale.toString(),
'--liquid-glass-dimensional-depth': depth.toString(),
'--liquid-glass-tilt-max': `${maxTilt}deg`,
transform: depthTransform,
zIndex,
padding: typeof padding === 'number' ? `${padding}px` : padding,
borderRadius: typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius
},
"data-liquid-glass-dimensional": "true",
"data-dimensional-depth": depth,
"data-dimensional-elevation": elevation,
...Object.fromEntries(Object.entries(rest).filter(([key]) => key !== 'variant')),
children: children
}) : jsx(OptimizedGlassCore, {
ref: ref,
intent: "neutral",
elevation: getElevationLevel(elevation),
intensity: intensityMap[blurStrength],
depth: Math.round(depth * 4),
tint: "neutral",
border: borderOpacity === 'none' ? 'none' : 'subtle',
animation: shouldAnimate ? 'float' : 'none',
performanceMode: "medium",
liftOnHover: interactive,
press: interactive,
className: cn(
// Base styles
'relative overflow-hidden transition-all duration-300',
// Dimensional effects
'transform-style-preserve-3d', depthTransform && '[transform:' + depthTransform + ']',
// Size
fullWidth && 'w-full', fullHeight && 'h-full',
// Spacing
typeof padding === 'number' ? `p-${Math.round(padding / 4)}` : 'glass-p-4',
// Border radius
typeof borderRadius === 'number' ? borderRadius <= 4 ? 'glass-radius-md' : borderRadius <= 8 ? 'glass-radius-lg' : 'glass-radius-xl' : 'glass-radius-xl',
// Z-index
zIndex > 1 && `z-${Math.min(zIndex, 50)}`, className),
style: {
backgroundColor,
borderWidth: borderWidth > 0 ? `${borderWidth}px` : undefined,
perspective: interactive ? '1000px' : undefined,
...style
},
...rest,
children: jsx("div", {
className: cn('relative h-full w-full', interactive && 'transform-gpu transition-transform duration-200', depth > 0 && 'transform-style-preserve-3d'),
style: {
transform: depth > 0 ? `translateZ(${depth * 5}px)` : undefined
},
children: children
})
})
});
});
DimensionalGlass.displayName = 'DimensionalGlass';
export { DimensionalGlass, DimensionalGlass as default };
//# sourceMappingURL=DimensionalGlass.js.map