aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
123 lines • 3.45 kB
TypeScript
/**
* ContextAwareGlass Component
*
* A glass container that adapts its appearance based on content and background.
* Migrated to use OptimizedGlass architecture.
*/
import React from 'react';
export type AdaptationMode = 'auto' | 'content' | 'background' | 'hybrid' | 'fixed' | 'dynamic' | 'contrast' | 'immersive';
export type ContentType = 'text' | 'image' | 'mixed' | 'data' | 'form' | 'interactive' | 'multimedia' | 'unknown';
export type BackgroundType = 'light' | 'dark' | 'image' | 'gradient' | 'pattern' | 'video' | 'complex' | 'unknown';
export interface ContextAwareGlassProps {
/**
* The content to render within the glass container
*/
children: React.ReactNode;
/**
* The adaptation mode to use
*/
adaptationMode?: AdaptationMode;
/**
* If provided, explicitly sets the content type instead of auto-detection
*/
contentType?: ContentType;
/**
* If provided, explicitly sets the background type instead of auto-detection
*/
backgroundType?: BackgroundType;
/**
* Base blur strength (will be adjusted based on context)
*/
baseBlurStrength?: number;
/**
* Base background opacity (will be adjusted based on context)
*/
baseOpacity?: number;
/**
* Base border opacity (will be adjusted based on context)
*/
baseBorderOpacity?: number;
/**
* Enable edge highlighting effect
*/
enableEdgeHighlight?: boolean;
/**
* Enable glow effect
*/
enableGlow?: boolean;
/**
* Color for glow effect (if enabled)
*/
glowColor?: string;
/**
* Enable continuous adaptation (analyzes content periodically)
*/
enableContinuousAdaptation?: boolean;
/**
* Interval (ms) for continuous adaptation checks
*/
adaptationInterval?: number;
/**
* Handle adaptation changes
*/
onAdaptationChange?: (settings: {
blurStrength: number;
opacity: number;
borderOpacity: number;
contentType: ContentType;
backgroundType: BackgroundType;
}) => void;
/**
* Optional element ID to analyze as background instead of parent element
*/
backgroundElementId?: string;
/**
* Border radius for the container
*/
borderRadius?: string | number;
/**
* Optional CSS class
*/
className?: string;
/**
* Content padding
*/
padding?: string | number;
/**
* Enable debug mode (shows adaptation information)
*/
debug?: boolean;
/**
* Force light mode settings
*/
forceLightMode?: boolean;
/**
* Force dark mode settings
*/
forceDarkMode?: boolean;
/**
* Minimum blur strength (px)
*/
minBlurStrength?: number;
/**
* Maximum blur strength (px)
*/
maxBlurStrength?: number;
/**
* Minimum background opacity (0-1)
*/
minOpacity?: number;
/**
* Maximum background opacity (0-1)
*/
maxOpacity?: number;
}
/**
* ContextAwareGlass Component
*
* A glass container that adapts its appearance based on content and background.
* Now optimized with OptimizedGlass architecture for better performance.
*/
export declare const ContextAwareGlass: React.ForwardRefExoticComponent<ContextAwareGlassProps & React.RefAttributes<HTMLDivElement>>;
export default ContextAwareGlass;
//# sourceMappingURL=ContextAwareGlass.d.ts.map