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

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

'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { useGlassTheme } from '../../hooks/useGlassTheme.js';
import { ContextAwareGlass } from './ContextAwareGlass.js';

/**
 * CleanGlassContainer Component
 *
 * A minimal, clean glass container with high transparency.
 */
const CleanGlassContainer = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    baseBlurStrength = 5,
    baseOpacity = 0.1,
    baseBorderOpacity = 0.15,
    enableEdgeHighlight = false,
    enableGlow = false,
    extraDark = false,
    ...rest
  } = props;
  return jsx(ContextAwareGlass, {
    "data-glass-component": true,
    ref: ref,
    adaptationMode: "fixed",
    baseBlurStrength: extraDark ? 7 : baseBlurStrength,
    baseOpacity: extraDark ? 0.2 : baseOpacity,
    baseBorderOpacity: extraDark ? 0.25 : baseBorderOpacity,
    enableEdgeHighlight: enableEdgeHighlight,
    enableGlow: enableGlow,
    ...rest
  });
});
CleanGlassContainer.displayName = 'CleanGlassContainer';
/**
 * FrostedGlassContainer Component
 *
 * A frosted glass container with moderate blur and opacity.
 */
const FrostedGlassContainer = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    baseBlurStrength = 12,
    baseOpacity = 0.2,
    baseBorderOpacity = 0.25,
    enableEdgeHighlight = true,
    enableGlow = false,
    ...rest
  } = props;
  return jsx(ContextAwareGlass, {
    ref: ref,
    adaptationMode: "background",
    baseBlurStrength: baseBlurStrength,
    baseOpacity: baseOpacity,
    baseBorderOpacity: baseBorderOpacity,
    enableEdgeHighlight: enableEdgeHighlight,
    enableGlow: enableGlow,
    ...rest
  });
});
FrostedGlassContainer.displayName = 'FrostedGlassContainer';
/**
 * TexturedGlassContainer Component
 *
 * A textured glass container with noise pattern.
 */
const TexturedGlassContainer = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    baseBlurStrength = 8,
    baseOpacity = 0.15,
    baseBorderOpacity = 0.3,
    enableEdgeHighlight = true,
    enableGlow = false,
    children,
    ...rest
  } = props;
  // Add a noise texture overlay
  const noiseTexture = jsx("div", {
    style: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:, //www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
      opacity: 0.05,
      mixBlendMode: 'overlay',
      pointerEvents: 'none',
      zIndex: 1
    }
  });
  return jsxs(ContextAwareGlass, {
    ref: ref,
    adaptationMode: "hybrid",
    baseBlurStrength: baseBlurStrength,
    baseOpacity: baseOpacity,
    baseBorderOpacity: baseBorderOpacity,
    enableEdgeHighlight: enableEdgeHighlight,
    enableGlow: enableGlow,
    ...rest,
    children: [noiseTexture, jsx("div", {
      style: {
        position: 'relative',
        zIndex: 2
      },
      children: children
    })]
  });
});
TexturedGlassContainer.displayName = 'TexturedGlassContainer';
/**
 * SubtleGlassContainer Component
 *
 * A subtle glass container with minimal effects.
 */
const SubtleGlassContainer = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    baseBlurStrength = 3,
    baseOpacity = 0.08,
    baseBorderOpacity = 0.1,
    enableEdgeHighlight = false,
    enableGlow = false,
    ...rest
  } = props;
  return jsx(ContextAwareGlass, {
    ref: ref,
    adaptationMode: "content",
    baseBlurStrength: baseBlurStrength,
    baseOpacity: baseOpacity,
    baseBorderOpacity: baseBorderOpacity,
    enableEdgeHighlight: enableEdgeHighlight,
    enableGlow: enableGlow,
    ...rest
  });
});
SubtleGlassContainer.displayName = 'SubtleGlassContainer';
/**
 * StandardGlassContainer Component
 *
 * A standard glass container with balanced effects.
 */
const StandardGlassContainer = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    baseBlurStrength = 10,
    baseOpacity = 0.15,
    baseBorderOpacity = 0.2,
    enableEdgeHighlight = true,
    enableGlow = false,
    ...rest
  } = props;
  return jsx(ContextAwareGlass, {
    ref: ref,
    adaptationMode: "auto",
    baseBlurStrength: baseBlurStrength,
    baseOpacity: baseOpacity,
    baseBorderOpacity: baseBorderOpacity,
    enableEdgeHighlight: enableEdgeHighlight,
    enableGlow: enableGlow,
    ...rest
  });
});
StandardGlassContainer.displayName = 'StandardGlassContainer';
/**
 * ImmersiveGlassContainer Component
 *
 * An immersive glass container with strong effects.
 */
const ImmersiveGlassContainer = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    baseBlurStrength = 15,
    baseOpacity = 0.12,
    baseBorderOpacity = 0.3,
    enableEdgeHighlight = true,
    enableGlow = true,
    glowColor = '#6366F1',
    ...rest
  } = props;
  useGlassTheme();
  return jsx(ContextAwareGlass, {
    ref: ref,
    adaptationMode: "immersive",
    baseBlurStrength: baseBlurStrength,
    baseOpacity: baseOpacity,
    baseBorderOpacity: baseBorderOpacity,
    enableEdgeHighlight: enableEdgeHighlight,
    enableGlow: enableGlow,
    glowColor: glowColor || 'var(--glass-color-primary)',
    ...rest
  });
});
ImmersiveGlassContainer.displayName = 'ImmersiveGlassContainer';
/**
 * DashboardGlassContainer Component
 *
 * A glass container optimized for dashboard UIs.
 */
const DashboardGlassContainer = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    baseBlurStrength = 8,
    baseOpacity = 0.15,
    baseBorderOpacity = 0.2,
    enableEdgeHighlight = true,
    enableGlow = false,
    ...rest
  } = props;
  return jsx(ContextAwareGlass, {
    ref: ref,
    adaptationMode: "content",
    baseBlurStrength: baseBlurStrength,
    baseOpacity: baseOpacity,
    baseBorderOpacity: baseBorderOpacity,
    enableEdgeHighlight: enableEdgeHighlight,
    enableGlow: enableGlow,
    ...rest
  });
});
DashboardGlassContainer.displayName = 'DashboardGlassContainer';
/**
 * FormGlassContainer Component
 *
 * A glass container optimized for forms.
 */
const FormGlassContainer = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    baseBlurStrength = 7,
    baseOpacity = 0.2,
    baseBorderOpacity = 0.25,
    enableEdgeHighlight = true,
    enableGlow = false,
    ...rest
  } = props;
  return jsx(ContextAwareGlass, {
    ref: ref,
    adaptationMode: "contrast",
    baseBlurStrength: baseBlurStrength,
    baseOpacity: baseOpacity,
    baseBorderOpacity: baseBorderOpacity,
    enableEdgeHighlight: enableEdgeHighlight,
    enableGlow: enableGlow,
    contentType: "form",
    ...rest
  });
});
FormGlassContainer.displayName = 'FormGlassContainer';
/**
 * ModalGlassContainer Component
 *
 * A glass container optimized for modals and dialogs.
 */
const ModalGlassContainer = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    baseBlurStrength = 12,
    baseOpacity = 0.2,
    baseBorderOpacity = 0.25,
    enableEdgeHighlight = true,
    enableGlow = true,
    glowColor,
    ...rest
  } = props;
  useGlassTheme();
  return jsx(ContextAwareGlass, {
    ref: ref,
    adaptationMode: "hybrid",
    baseBlurStrength: baseBlurStrength,
    baseOpacity: baseOpacity,
    baseBorderOpacity: baseBorderOpacity,
    enableEdgeHighlight: enableEdgeHighlight,
    enableGlow: enableGlow,
    glowColor: glowColor || 'var(--glass-color-primary)',
    ...rest
  });
});
ModalGlassContainer.displayName = 'ModalGlassContainer';
const GlassPresets = /*#__PURE__*/forwardRef(({
  variant = 'clean',
  extraDark,
  ...rest
}, ref) => {
  switch (variant) {
    case 'clean':
      return jsx(CleanGlassContainer, {
        ref: ref,
        extraDark: extraDark,
        ...rest
      });
    case 'frosted':
      return jsx(FrostedGlassContainer, {
        ref: ref,
        ...rest
      });
    case 'textured':
      return jsx(TexturedGlassContainer, {
        ref: ref,
        ...rest
      });
    case 'subtle':
      return jsx(SubtleGlassContainer, {
        ref: ref,
        ...rest
      });
    case 'immersive':
      return jsx(ImmersiveGlassContainer, {
        ref: ref,
        ...rest
      });
    case 'dashboard':
      return jsx(DashboardGlassContainer, {
        ref: ref,
        ...rest
      });
    case 'form':
      return jsx(FormGlassContainer, {
        ref: ref,
        ...rest
      });
    case 'modal':
      return jsx(ModalGlassContainer, {
        ref: ref,
        ...rest
      });
    case 'standard':
    default:
      return jsx(StandardGlassContainer, {
        ref: ref,
        ...rest
      });
  }
});
GlassPresets.displayName = 'GlassPresets';

export { CleanGlassContainer, DashboardGlassContainer, FormGlassContainer, FrostedGlassContainer, GlassPresets, ImmersiveGlassContainer, ModalGlassContainer, StandardGlassContainer, SubtleGlassContainer, TexturedGlassContainer };
//# sourceMappingURL=GlassPresets.js.map