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

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

'use client';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import React, { forwardRef, useState } 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';

// SVG filters for heat distortion effect
const HeatDistortionFilters = /*#__PURE__*/React.memo(() => jsx("svg", {
  width: "0",
  height: "0",
  className: 'absolute invisible',
  children: jsxs("defs", {
    children: [jsxs("filter", {
      id: "heat-distortion-0",
      children: [jsx("feTurbulence", {
        type: "fractalNoise",
        baseFrequency: "0.01",
        numOctaves: "3",
        seed: "0"
      }), jsx("feDisplacementMap", {
        in: "SourceGraphic",
        scale: "5"
      })]
    }), jsxs("filter", {
      id: "heat-distortion-25",
      children: [jsx("feTurbulence", {
        type: "fractalNoise",
        baseFrequency: "0.01",
        numOctaves: "3",
        seed: "1"
      }), jsx("feDisplacementMap", {
        in: "SourceGraphic",
        scale: "5"
      })]
    }), jsxs("filter", {
      id: "heat-distortion-50",
      children: [jsx("feTurbulence", {
        type: "fractalNoise",
        baseFrequency: "0.01",
        numOctaves: "3",
        seed: "2"
      }), jsx("feDisplacementMap", {
        in: "SourceGraphic",
        scale: "5"
      })]
    }), jsxs("filter", {
      id: "heat-distortion-75",
      children: [jsx("feTurbulence", {
        type: "fractalNoise",
        baseFrequency: "0.01",
        numOctaves: "3",
        seed: "3"
      }), jsx("feDisplacementMap", {
        in: "SourceGraphic",
        scale: "5"
      })]
    })]
  })
}));
HeatDistortionFilters.displayName = "HeatDistortionFilters";
/**
 * HeatGlass Component
 * Modern implementation using OptimizedGlass with heat distortion effects
 */
const HeatGlass = /*#__PURE__*/forwardRef(({
  children,
  className,
  style,
  elevation = "level2",
  blurStrength = "standard",
  borderRadius = "md",
  interactive = true,
  heatColor = "rgba(255, 100, 50, 0.7)",
  animate = true,
  backgroundColor,
  ...rest
}, ref) => {
  const prefersReducedMotion = useReducedMotion();
  const shouldAnimate = animate && !prefersReducedMotion;
  const [isHovered, setIsHovered] = useState(false);
  // 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 mouse events
  const handleMouseEnter = () => setIsHovered(true);
  const handleMouseLeave = () => setIsHovered(false);
  return jsxs(Fragment, {
    children: [shouldAnimate && jsx(HeatDistortionFilters, {}), jsx(MotionFramer, {
      preset: shouldAnimate ? "pulseIn" : "none",
      className: 'relative',
      children: jsxs(OptimizedGlassCore, {
        ref: ref,
        intent: "danger",
        elevation: getElevationLevel(elevation),
        intensity: intensityMap[blurStrength],
        depth: 3,
        tint: "warm",
        border: "subtle",
        animation: shouldAnimate ? "pulse" : "none",
        performanceMode: "high",
        liftOnHover: interactive,
        press: interactive,
        className: cn(
        // Base styles
        "relative block w-full min-h-[100px] glass-p-4 box-border overflow-hidden", "transition-all duration-300",
        // Border radius
        radiusMap[borderRadius],
        // Heat glow effect
        "shadow-heat-glow",
        // Interactive styles
        interactive && ["cursor-pointer", "hover:-translate-y-0.5", "active:translate-y-0"],
        // Heat pulse animation (respects reduced motion via shouldAnimate)
        shouldAnimate && "glass-animate-heat-pulse", className),
        style: {
          // Heat glow box shadow
          boxShadow: `0 0 20px 5px ${heatColor}`,
          backgroundColor,
          ...style
        },
        onMouseEnter: handleMouseEnter,
        onMouseLeave: handleMouseLeave,
        ...rest,
        children: [jsx("div", {
          className: 'absolute inset-0 pointer-events-none glass-radius-inherit -z-10 opacity-30',
          style: {
            background: `radial-gradient(circle at 50% 50%, ${heatColor} 0%, transparent 70%)`
          }
        }), jsx("div", {
          className: cn("relative z-10", shouldAnimate && ["glass-animate-heat-distortion", "will-change-auto" // Use will-change-auto instead of will-change-filter
          ]),
          style: {
            // Apply heat distortion filters
            filter: shouldAnimate ? "url(#heat-distortion-0)" : undefined,
            animationDelay: shouldAnimate ? `${Math.random() * 2}s` : undefined
          },
          children: children
        }), interactive && isHovered && jsx("div", {
          className: 'absolute inset-0 pointer-events-none glass-radius-inherit transition-opacity duration-300',
          style: {
            boxShadow: `0 0 30px 10px ${heatColor}`,
            opacity: 0.8
          }
        })]
      })
    })]
  });
});
HeatGlass.displayName = "HeatGlass";

export { HeatGlass, HeatGlass as default };
//# sourceMappingURL=HeatGlass.js.map