aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
96 lines • 3.04 kB
TypeScript
/**
* AuraGlass Progressive Glass Enhancement
* Adaptive quality system that adjusts glass effects based on device capabilities
*/
import React from "react";
interface DeviceCapabilities {
gpu: {
renderer: string;
vendor: string;
tier: "low" | "mid" | "high" | "unknown";
webglSupport: boolean;
webgl2Support: boolean;
};
cpu: {
cores: number;
estimatedPerformance: "low" | "mid" | "high";
};
memory: {
deviceMemory?: number;
estimatedTier: "low" | "mid" | "high";
};
display: {
pixelRatio: number;
resolution: {
width: number;
height: number;
};
colorGamut: "srgb" | "p3" | "rec2020";
hdr: boolean;
};
network: {
effectiveType: "2g" | "3g" | "4g" | "5g" | "unknown";
saveData: boolean;
};
battery: {
level: number;
charging: boolean;
};
preferences: {
reducedMotion: boolean;
highContrast: boolean;
forcedColors: boolean;
};
}
interface QualityTier {
name: string;
level: "minimal" | "basic" | "standard" | "premium" | "ultra";
capabilities: {
backdropFilterEnabled: boolean;
boxShadow: boolean;
borderRadius: boolean;
transforms: boolean;
animations: boolean;
particles: boolean;
webgl: boolean;
complexGradients: boolean;
highResolution: boolean;
};
limits: {
maxBlur: number;
maxElements: number;
animationDuration: number;
particleCount: number;
};
}
interface GlassProgressiveEnhancementProps {
children: React.ReactNode;
className?: string;
autoDetect?: boolean;
forcedTier?: QualityTier["level"];
adaptToNetwork?: boolean;
adaptToBattery?: boolean;
respectUserPreferences?: boolean;
monitorPerformance?: boolean;
onTierChange?: (tier: QualityTier) => void;
onCapabilitiesDetected?: (capabilities: DeviceCapabilities) => void;
}
declare const qualityTiers: Record<QualityTier["level"], QualityTier>;
export declare function GlassProgressiveEnhancement({ children, className, autoDetect, forcedTier, adaptToNetwork, adaptToBattery, respectUserPreferences, monitorPerformance, onTierChange, onCapabilitiesDetected, }: GlassProgressiveEnhancementProps): import("react/jsx-runtime").JSX.Element;
export declare function useGlassQuality(): {
tier: QualityTier;
capabilities: DeviceCapabilities | null;
updateTier: (tier: QualityTier["level"]) => void;
};
export declare function EnhancedGlass({ children, className, blur, particles, animation, webgl, ...props }: {
children: React.ReactNode;
className?: string;
blur?: number;
particles?: boolean;
animation?: boolean;
webgl?: boolean;
[key: string]: any;
}): import("react/jsx-runtime").JSX.Element;
export { qualityTiers };
export type { DeviceCapabilities, QualityTier };
//# sourceMappingURL=GlassProgressiveEnhancement.d.ts.map