aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
130 lines (127 loc) • 4.31 kB
JavaScript
'use client';
import { jsx } from 'react/jsx-runtime';
import React, { forwardRef, useState, useEffect } 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 { MotionFramer } from '../../primitives/motion/MotionFramer.js';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
/**
* PageGlassContainer Component
* Modern implementation using OptimizedGlass with full page layout capabilities
*/
const PageGlassContainer = /*#__PURE__*/React.memo(/*#__PURE__*/forwardRef(({
children,
className,
style,
elevation = "level2",
blurStrength = "standard",
borderRadius = "none",
fullWidth = true,
fullHeight = false,
fullPage = false,
maxWidth,
backgroundColor,
scrollFade = false,
dimensionalChildren = false,
...rest
}, ref) => {
const prefersReducedMotion = useReducedMotion();
const shouldAnimate = !prefersReducedMotion;
const [scrollPosition, setScrollPosition] = useState(0);
// Map blur strength to intensity
const intensityMap = {
none: "subtle",
light: "subtle",
standard: "medium",
heavy: "strong"
};
// Map border radius
const radiusMap = {
none: "rounded-none",
sm: "glass-radius-sm",
md: "glass-radius-md",
lg: "glass-radius-lg",
xl: "glass-radius-xl",
full: "glass-radius-full"
};
// Map elevation to OptimizedGlass elevation levels
const getElevationLevel = elev => {
if (typeof elev === "string" && elev.startsWith("level")) {
return elev;
}
const numElev = typeof elev === "number" ? elev : 2;
if (numElev <= 1) return "level1";
if (numElev <= 2) return "level2";
if (numElev <= 3) return "level3";
return "level4";
};
// Handle scroll events for scroll fade effect
useEffect(() => {
if (!scrollFade || prefersReducedMotion) return;
const handleScroll = () => {
setScrollPosition(window.scrollY);
};
window.addEventListener("scroll", handleScroll, {
passive: true
});
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, [scrollFade, prefersReducedMotion]);
// Calculate max width style
const maxWidthStyle = maxWidth ? typeof maxWidth === "number" ? {
maxWidth: `${maxWidth}px`
} : {
maxWidth
} : {};
return jsx(MotionFramer, {
preset: shouldAnimate ? "fadeIn" : "none",
className: 'relative',
children: jsx(OptimizedGlassCore, {
ref: ref,
intent: "neutral",
elevation: getElevationLevel(elevation),
intensity: intensityMap[blurStrength],
depth: 1,
tint: "neutral",
border: "subtle",
animation: shouldAnimate && scrollFade ? "breathe" : "none",
performanceMode: "high",
className: cn(
// Base positioning and sizing
fullPage ? "fixed inset-0" : "relative", fullWidth ? "w-full" : "w-auto", fullHeight || fullPage ? "h-full" : "h-auto", !fullWidth && "mx-auto",
// Border radius
radiusMap[borderRadius],
// Layout and spacing
"p-5 box-border z-0", fullPage ? "overflow-auto" : "overflow-hidden",
// Scroll fade effect
scrollFade && shouldAnimate && "transition-opacity duration-300", className),
style: {
backgroundColor,
...maxWidthStyle,
// Scroll fade opacity
opacity: scrollFade && scrollPosition > 0 ? Math.max(0.3, 1 - scrollPosition / 500) : 1,
...style
},
...rest,
children: jsx("div", {
className: cn("relative z-10", dimensionalChildren && shouldAnimate && "preserve-3d"),
style: {
// Parallax effect for dimensional children
...(dimensionalChildren && shouldAnimate && {
transform: `translateZ(${Math.min(20, scrollPosition / 20)}px)`,
transition: "transform 100ms ease-out"
})
},
children: children
})
})
});
}));
PageGlassContainer.displayName = "PageGlassContainer";
export { PageGlassContainer, PageGlassContainer as default };
//# sourceMappingURL=PageGlassContainer.js.map