aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
70 lines • 2.98 kB
TypeScript
import React from 'react';
type PolymorphicComponentProps<T extends React.ElementType, Props = {}> = {
as?: T;
} & Props & Omit<React.ComponentPropsWithoutRef<T>, keyof Props>;
export interface OptimizedGlassProps extends React.HTMLAttributes<HTMLDivElement> {
/** The HTML element or component to render as */
as?: React.ElementType;
/** Glass intent (replaces variant) */
intent?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
/** Glass elevation level */
elevation?: 'level1' | 'level2' | 'level3' | 'level4' | 'level5';
/** Performance tier */
tier?: 'high' | 'medium' | 'low';
/** Border radius */
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
/** Enable glow effect */
glow?: boolean;
/** Glow color */
glowColor?: string;
/** Glow intensity */
glowIntensity?: number;
/** Enable hover effects */
hover?: boolean;
/** Performance optimization level */
optimization?: 'auto' | 'high' | 'medium' | 'low';
/** Enable hardware acceleration */
hardwareAcceleration?: boolean;
/** Glass intensity (blur strength level) */
intensity?: 'subtle' | 'medium' | 'strong' | 'intense' | 'ultra' | 'extreme';
/** Glass depth effect */
depth?: 'shallow' | 'medium' | 'deep' | 'extreme' | number;
/** Glass tint color */
tint?: string;
/** Border configuration */
border?: 'none' | 'subtle' | 'medium' | 'strong' | 'glow' | 'gradient' | 'neon' | 'dynamic' | 'particle';
/** Blur intensity for backdrop-filter */
blur?: 'none' | 'subtle' | 'medium' | 'strong' | 'intense';
/** Glass variant */
variant?: 'clear' | 'frosted' | 'tinted' | 'luminous' | 'dynamic' | 'crystal';
/** Enable interactive effects */
interactive?: boolean;
/** Enable press effect */
press?: boolean;
/** Animation preset */
animation?: 'none' | 'fade' | 'slide' | 'scale' | 'bounce' | 'pulse' | 'float' | string;
/** Performance mode */
performanceMode?: 'high' | 'balanced' | 'low' | 'medium' | 'ultra';
/** Enable lift on hover effect */
liftOnHover?: boolean;
/** Enable hover sheen effect */
hoverSheen?: boolean;
/** Lighting effect */
lighting?: 'ambient' | 'directional' | 'point' | 'spot' | 'none' | 'iridescent' | 'volumetric' | 'caustic' | 'natural' | 'studio';
/** Advanced visual flags (filtered from DOM) */
caustics?: boolean;
chromatic?: boolean;
parallax?: boolean;
refraction?: boolean;
adaptive?: boolean;
magnet?: boolean;
cursorHighlight?: boolean;
/** Custom CSS classes */
className?: string;
/** Children elements */
children?: React.ReactNode;
}
declare const OptimizedGlassCore: React.ForwardRefExoticComponent<Omit<PolymorphicComponentProps<any, OptimizedGlassProps>, "ref"> & React.RefAttributes<unknown>>;
export { OptimizedGlassCore };
export default OptimizedGlassCore;
//# sourceMappingURL=OptimizedGlassCore.d.ts.map