aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
88 lines • 3.66 kB
TypeScript
import React from 'react';
interface HoudiniGlassContextType {
isSupported: boolean;
hasPropertyAPI: boolean;
hasPaintAPI: boolean;
globalPreset: keyof typeof glassPresets;
setGlobalPreset: (preset: keyof typeof glassPresets) => void;
globalProperties: Record<string, string>;
updateGlobalProperty: (property: string, value: string) => void;
enabledEffects: string[];
toggleEffect: (effect: string) => void;
performanceMode: boolean;
setPerformanceMode: (enabled: boolean) => void;
debugMode: boolean;
setDebugMode: (enabled: boolean) => void;
}
export declare const glassPresets: {
readonly standard: {
readonly '--glass-background': "var(--glass-bg-default)";
readonly '--glass-border': "var(--glass-border-default)";
readonly '--glass-blur': "var(--glass-blur-lg)";
readonly '--glass-shadow': "var(--glass-elev-2)";
readonly '--glass-animation-speed': "1";
readonly '--glass-blur-intensity': "10";
};
readonly frosted: {
readonly '--glass-background': "var(--glass-bg-hover)";
readonly '--glass-border': "var(--glass-border-hover)";
readonly '--glass-blur': "var(--glass-blur-xl)";
readonly '--glass-shadow': "var(--glass-elev-3)";
readonly '--glass-animation-speed': "1.2";
readonly '--glass-blur-intensity': "15";
};
readonly minimal: {
readonly '--glass-background': "var(--glass-bg-active)";
readonly '--glass-border': "var(--glass-border-disabled)";
readonly '--glass-blur': "var(--glass-blur-sm)";
readonly '--glass-shadow': "var(--glass-elev-1)";
readonly '--glass-animation-speed': "0.8";
readonly '--glass-blur-intensity': "5";
};
readonly heavy: {
readonly '--glass-background': "var(--glass-bg-strong)";
readonly '--glass-border': "var(--glass-border-strong)";
readonly '--glass-blur': "var(--glass-blur-2xl)";
readonly '--glass-shadow': "var(--glass-elev-4)";
readonly '--glass-animation-speed': "1.5";
readonly '--glass-blur-intensity': "20";
};
readonly crystal: {
readonly '--glass-background': "var(--glass-bg-active)";
readonly '--glass-border': "var(--glass-border-disabled)";
readonly '--glass-blur': "var(--glass-blur-sm)";
readonly '--glass-shadow': "var(--glass-elev-1)";
readonly '--glass-animation-speed': "0.5";
readonly '--glass-blur-intensity': "2";
};
};
export interface HoudiniGlassProviderProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
defaultPreset?: keyof typeof glassPresets;
defaultProperties?: Record<string, string>;
enabledEffects?: string[];
performanceMode?: boolean;
debugMode?: boolean;
}
export declare const HoudiniGlassProvider: React.ForwardRefExoticComponent<HoudiniGlassProviderProps & React.RefAttributes<HTMLDivElement>>;
export declare function useHoudiniGlass(): HoudiniGlassContextType;
export declare function useGlassEffect(elementRef: React.RefObject<HTMLElement>, effects?: string[], options?: {
preset?: keyof typeof glassPresets;
customProperties?: Record<string, string>;
enableWorklets?: boolean;
}): {
isSupported: boolean;
appliedEffects: string[];
canUseWorklets: boolean;
};
declare global {
interface CSS {
paintWorklet?: Worklet;
}
interface Window {
__AURAGLASS_WORKLETS_REGISTERED__?: boolean;
__AURAGLASS_PROPERTIES_REGISTERED__?: boolean;
}
}
export default HoudiniGlassProvider;
//# sourceMappingURL=HoudiniGlassProvider.d.ts.map