aura-glass/dist/primitives/LiquidGlassMaterial.d.ts

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

import React from "react";
import { type GlassElevation, type GlassIntent, type LiquidGlassTokens, type LiquidGlassMaterial as MaterialType, type MaterialVariant, type SheenIntensity, type TintMode } from "../tokens/glass";
import { type ContrastLevel } from "../utils/contrastGuard";
export interface LiquidGlassMaterialProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
    /** Material type - standard or liquid */
    material?: MaterialType;
    /** Material variant - regular or clear transparency */
    variant?: MaterialVariant;
    /** Glass semantic intent */
    intent?: GlassIntent;
    /** Glass elevation level */
    elevation?: GlassElevation;
    /** Index of refraction (1.0-2.0) - higher values = more refraction */
    ior?: number;
    /** Visual thickness for depth perception (0-8px) */
    thickness?: number;
    /** Edge sheen intensity (0-3) */
    sheen?: SheenIntensity;
    /** Content-aware tinting mode */
    tintMode?: TintMode;
    /** Enable environmental adaptation */
    adaptToContent?: boolean;
    /** Enable motion responsiveness */
    adaptToMotion?: boolean;
    /** Target accessibility contrast level */
    contrastLevel?: ContrastLevel;
    /** Performance optimization level */
    performanceLevel?: keyof LiquidGlassTokens["performance"];
    /** Enable refraction effects */
    enableRefraction?: boolean;
    /** Enable environmental reflections */
    enableReflection?: boolean;
    /** Enable parallax depth effects */
    enableParallax?: boolean;
    /** Enable micro-interactions */
    enableMicroInteractions?: boolean;
    /** Tint color for glass material */
    tint?: {
        r: number;
        g: number;
        b: number;
        a: number;
    };
    /** Quality level for rendering */
    quality?: "high" | "ultra" | "balanced" | "efficient";
    /** Enable environmental adaptation */
    environmentAdaptation?: boolean;
    /** Enable motion responsiveness */
    motionResponsive?: boolean;
    /** Custom CSS classes */
    className?: string;
    /** Border radius preset */
    radius?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
    /** Enable hover effects */
    interactive?: boolean;
    /** Disable all effects */
    disabled?: boolean;
    /** Content to render inside the glass surface */
    children?: React.ReactNode;
    /** Callback when contrast adjustment occurs */
    onContrastAdjustment?: (adjustment: any) => void;
    /** Callback when backdrop analysis completes */
    onBackdropAnalysis?: (sample: any) => void;
}
/**
 * LiquidGlassMaterial - Core primitive for Apple Liquid Glass parity
 *
 * Features:
 * - IOR-based refraction physics
 * - Environmental content awareness
 * - Motion-responsive effects
 * - Automatic contrast enforcement
 * - GPU-accelerated rendering with fallbacks
 * - Performance-optimized across devices
 */
export declare const LiquidGlassMaterial: React.ForwardRefExoticComponent<LiquidGlassMaterialProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Higher-order component for adding Liquid Glass material to existing components
 */
export declare function withLiquidGlass<P extends object>(Component: React.ComponentType<P>, defaultProps?: Partial<LiquidGlassMaterialProps>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & LiquidGlassMaterialProps> & React.RefAttributes<HTMLDivElement>>;
/**
 * Utility hook for managing Liquid Glass state in custom components
 */
export declare function useLiquidGlassState(material?: MaterialType, options?: {
    adaptToContent?: boolean;
    adaptToMotion?: boolean;
    performanceLevel?: keyof LiquidGlassTokens["performance"];
}): {
    backdropSample: any;
    deviceTilt: {
        x: number;
        y: number;
    };
    isInteracting: boolean;
    performanceConfig: {
        enableRefraction: true;
        enableReflection: true;
        enableParallax: false;
        enableMicroInteractions: true;
        sampleRate: 60;
    } | {
        enableRefraction: true;
        enableReflection: true;
        enableParallax: true;
        enableMicroInteractions: true;
        sampleRate: 60;
    } | {
        enableRefraction: true;
        enableReflection: false;
        enableParallax: false;
        enableMicroInteractions: true;
        sampleRate: 30;
    } | {
        enableRefraction: false;
        enableReflection: false;
        enableParallax: false;
        enableMicroInteractions: false;
        sampleRate: 30;
    };
    prefersReducedMotion: boolean;
    setBackdropSample: React.Dispatch<any>;
    setDeviceTilt: React.Dispatch<React.SetStateAction<{
        x: number;
        y: number;
    }>>;
    setIsInteracting: React.Dispatch<React.SetStateAction<boolean>>;
};
export type { MaterialType, MaterialVariant, SheenIntensity, TintMode };
//# sourceMappingURL=LiquidGlassMaterial.d.ts.map