aura-glass/dist/esm/components/surfaces/GlassDepthLayer.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsx } from 'react/jsx-runtime';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { motion } from 'framer-motion';
import { forwardRef, useMemo } from 'react';
import { createGlassStyle } from '../../core/mixins/glassMixins.js';

const DEFAULT_DEPTH_CONFIGS = {
  background: {
    layer: "background",
    opacity: 0.02,
    blur: 2,
    brightness: 0.3,
    zIndex: 1,
    transform: "translateZ(-200px) scale(1.8)",
    shadow: "none"
  },
  far: {
    layer: "far",
    opacity: 0.05,
    blur: 8,
    brightness: 0.4,
    zIndex: 10,
    transform: "translateZ(-150px) scale(1.5)",
    shadow: "0 4px 20px rgba(var(--glass-color-black) / var(--glass-opacity-10))"
  },
  "mid-far": {
    layer: "mid-far",
    opacity: 0.08,
    blur: 12,
    brightness: 0.5,
    zIndex: 20,
    transform: "translateZ(-100px) scale(1.3)",
    shadow: "0 6px 25px rgba(var(--glass-color-black) / var(--glass-opacity-15))"
  },
  mid: {
    layer: "mid",
    opacity: 0.12,
    blur: 16,
    brightness: 0.6,
    zIndex: 30,
    transform: "translateZ(-50px) scale(1.1)",
    shadow: "0 8px 30px rgba(var(--glass-color-black) / var(--glass-opacity-20))"
  },
  "mid-near": {
    layer: "mid-near",
    opacity: 0.16,
    blur: 20,
    brightness: 0.7,
    zIndex: 40,
    transform: "translateZ(0px) scale(1)",
    shadow: "0 10px 35px rgba(0, 0, 0, 0.25)"
  },
  near: {
    layer: "near",
    opacity: 0.22,
    blur: 24,
    brightness: 0.8,
    zIndex: 50,
    transform: "translateZ(50px) scale(0.9)",
    shadow: "0 12px 40px rgba(var(--glass-color-black) / var(--glass-opacity-30))"
  },
  foreground: {
    layer: "foreground",
    opacity: 0.3,
    blur: 28,
    brightness: 0.9,
    zIndex: 60,
    transform: "translateZ(100px) scale(0.8)",
    shadow: "0 16px 50px rgba(0, 0, 0, 0.4)"
  },
  overlay: {
    layer: "overlay",
    opacity: 0.4,
    blur: 32,
    brightness: 1,
    zIndex: 70,
    transform: "translateZ(200px) scale(0.6)",
    shadow: "0 20px 60px rgba(var(--glass-color-black) / var(--glass-opacity-50))"
  }
};
const GlassDepthLayer = /*#__PURE__*/forwardRef(({
  layer,
  customConfig,
  children,
  enableParallax = false,
  parallaxStrength = 0.5,
  enableHover = true,
  hoverLift = 10,
  className = "",
  ...props
}, ref) => {
  useReducedMotion();
  // TODO: Integrate ContrastGuard for any section titles, labels, and helper text for WCAG AA compliance
  const config = useMemo(() => ({
    ...DEFAULT_DEPTH_CONFIGS[layer],
    ...customConfig
  }), [layer, customConfig]);
  const glassStyle = useMemo(() => createGlassStyle({
    intent: "neutral",
    elevation: "level2"
  }), [config]);
  const motionProps = {
    style: glassStyle,
    initial: {
      opacity: 0,
      y: 20
    },
    animate: {
      opacity: 1,
      y: 0
    },
    whileHover: enableHover ? {
      transform: `${config.transform} translateY(-${hoverLift}px)`,
      boxShadow: `0 ${20 + hoverLift}px ${60 + hoverLift}px rgba(0, 0, 0, 0.4)`,
      transition: {
        duration: 0.3,
        ease: "easeOut"
      }
    } : undefined,
    ...(enableParallax && {
      drag: false,
      onMouseMove: event => {
        const rect = event.currentTarget.getBoundingClientRect();
        const x = (event.clientX - rect.left) / rect.width;
        const y = (event.clientY - rect.top) / rect.height;
        const rotateX = (y - 0.5) * parallaxStrength * 10;
        const rotateY = (x - 0.5) * parallaxStrength * 10;
        event.currentTarget.style.transform = `${config.transform} rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
      },
      onMouseLeave: event => {
        event.currentTarget.style.transform = config.transform;
      }
    }),
    ...props
  };
  return jsx(motion.div, {
    ref: ref,
    className: className,
    ...motionProps,
    children: children
  });
});
GlassDepthLayer.displayName = "GlassDepthLayer";

export { DEFAULT_DEPTH_CONFIGS, GlassDepthLayer };
//# sourceMappingURL=GlassDepthLayer.js.map