aura-glass/dist/esm/components/interactive/ThemedGlassComponents.js

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

'use client';
import { jsx } from 'react/jsx-runtime';
import { useContext, forwardRef, useState, useEffect, createContext } 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';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { useGlassTheme } from '../../hooks/useGlassTheme.js';

const ThemedGlassContext = /*#__PURE__*/createContext({
  glassIntensity: 0.7,
  applyGlassEffect: true
});
// Hook to use the themed glass context
const useThemedGlass = () => useContext(ThemedGlassContext);
// Helper to map glass intensity to elevation level
const mapIntensityToElevation = intensity => {
  if (intensity <= 0.3) return 'level1';
  if (intensity <= 0.6) return 'level2';
  if (intensity <= 0.8) return 'level3';
  return 'level4';
};
const ThemedGlassComponents = /*#__PURE__*/forwardRef(({
  children,
  variant,
  colorMode,
  glassIntensity = 0.7,
  animated = true,
  className,
  style,
  applyGlassEffect = true,
  preserveOriginalStyle = true,
  contextData,
  transitionDuration = 300,
  ...rest
}, ref) => {
  // Hooks
  const {
    theme
  } = useGlassTheme();
  const prefersReducedMotion = useReducedMotion();
  const isDarkMode = theme === 'dark';
  // Track transitions for animation
  const [isTransitioning, setIsTransitioning] = useState(false);
  // Use provided values or fallback to current context
  const effectiveColorMode = colorMode || (isDarkMode ? 'dark' : 'light');
  const effectiveVariant = variant || 'default';
  // Map glass intensity to elevation level
  const elevation = mapIntensityToElevation(glassIntensity);
  // Create context value
  const contextValue = {
    glassIntensity,
    applyGlassEffect,
    contextData
  };
  // Handle transition state
  useEffect(() => {
    if (animated) {
      setIsTransitioning(true);
      const timer = setTimeout(() => {
        setIsTransitioning(false);
      }, transitionDuration);
      return () => clearTimeout(timer);
    }
  }, [effectiveColorMode, effectiveVariant, animated, transitionDuration]);
  // Render with OptimizedGlass architecture
  return jsx(ThemedGlassContext.Provider, {
    value: contextValue,
    children: jsx(OptimizedGlassCore, {
      ref: ref,
      elevation: elevation,
      intent: "neutral",
      tier: "high",
      interactive: animated && !prefersReducedMotion,
      className: cn('themed-glass-container', animated && !prefersReducedMotion && 'transition-all duration-300', isTransitioning && 'glass-transitioning', className),
      style: {
        ...style,
        ...(animated && !prefersReducedMotion && {
          transitionDuration: `${transitionDuration}ms`
        })
      },
      ...rest,
      children: children
    })
  });
});
ThemedGlassComponents.displayName = 'ThemedGlassComponents';

export { ThemedGlassComponents, useThemedGlass };
//# sourceMappingURL=ThemedGlassComponents.js.map