aura-glass/dist/theme/ThemeProvider.d.ts

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

import React from "react";
import type { ColorMode, GlassSurfaceProps } from "../core/types";
import { type PersonaConfig, type PersonaId } from "./designMatrix";
interface ColorModeContextType {
    colorMode: ColorMode;
    setColorMode: (mode: ColorMode) => void;
    isDarkMode: boolean;
    toggleColorMode: () => void;
    systemPrefersDark: boolean;
}
interface ThemeVariantContextType {
    themeVariant: string;
    setThemeVariant: (variant: string) => void;
    availableThemes: string[];
}
export interface PersonaContextType {
    personaId: PersonaId;
    persona: PersonaConfig;
    setPersona: (persona: PersonaId) => void;
    personas: PersonaConfig[];
}
interface StyleUtilsContextType {
    getColor: (path: string, fallback?: string) => string;
    getSpacing: (size: string | number) => string;
    getShadow: (level: number, color?: string) => string;
    getBorderRadius: (size: string) => string;
    getZIndex: (layer: string) => number;
    getTypography: (variant: string) => React.CSSProperties;
}
interface GlassEffectsContextType {
    qualityTier: "ultra" | "high" | "medium" | "low" | "minimal";
    setQualityTier: (tier: "ultra" | "high" | "medium" | "low" | "minimal") => void;
    getBlurStrength: (strength: string | number) => string;
    getBackgroundOpacity: (opacity: string | number) => number;
    getBorderOpacity: (opacity: string | number) => number;
    getGlowIntensity: (intensity: string | number) => number;
    createSurface: (props: GlassSurfaceProps) => string;
    GlassSurface: any;
}
interface PreferencesContextType {
    reducedMotion: boolean;
    reducedTransparency: boolean;
    highContrastMode: boolean;
    setPreference: (key: string, value: boolean) => void;
    getUserPreference: (key: string) => boolean;
}
interface ResponsiveContextType {
    breakpoints: Record<string, number>;
    currentBreakpoint: string;
    isMobile: boolean;
    isTablet: boolean;
    isDesktop: boolean;
    mediaQuery: (breakpoint: string) => string;
}
export declare const useThemeProviderPresence: () => boolean;
export interface ThemeProviderProps {
    /**
     * Children to render
     */
    children: React.ReactNode;
    /**
     * Initial color mode
     */
    initialColorMode?: ColorMode;
    /**
     * Initial theme variant
     */
    initialTheme?: string;
    /**
     * Initial persona to hydrate with. Falls back to stored preference or default if absent.
     */
    initialPersona?: PersonaId;
    /**
     * Controlled persona id. When provided, internal state will mirror this value.
     */
    persona?: PersonaId;
    /**
     * Persist persona selection in localStorage. Defaults to true.
     */
    persistPersona?: boolean;
    /**
     * If true, automatically detect system preferences
     */
    enableAutoDetection?: boolean;
    /**
     * If true, respect system color mode preference
     */
    respectSystemPreference?: boolean;
    /**
     * Force specific color mode (overrides other settings)
     */
    forceColorMode?: ColorMode;
    /**
     * If true, disable CSS transitions during theme changes
     */
    disableTransitions?: boolean;
    /**
     * If true, optimize glass effects during scrolling
     */
    enableScrollOptimization?: boolean;
    /**
     * Initial glass quality tier
     */
    initialQualityTier?: "ultra" | "high" | "medium" | "low" | "minimal";
    /**
     * If true, theme will isolate from parent themes
     */
    isolateTheme?: boolean;
    /**
     * If true, enable performance optimizations
     */
    enableOptimizations?: boolean;
    /**
     * If true, enable additional debug information
     */
    debug?: boolean;
    /**
     * If true, enable performance monitoring
     */
    performanceMonitoring?: boolean;
    /**
     * Throttle time in ms for context updates
     */
    contextUpdateThrottle?: number;
    /**
     * If true, only update on React commit phases
     */
    updateOnlyOnCommit?: boolean;
    /**
     * Callback when color mode changes
     */
    onColorModeChange?: (mode: ColorMode) => void;
    /**
     * Callback when theme variant changes
     */
    onThemeChange?: (theme: string) => void;
    /**
     * Callback when persona changes
     */
    onPersonaChange?: (persona: PersonaId) => void;
}
/**
 * ThemeProvider component (exporting the unified provider directly for now).
 *
 * This component provides theme context.
 */
export declare const ThemeProvider: React.FC<ThemeProviderProps>;
/**
 * Returns the full theme object based on current settings.
 */
export declare const useTheme: () => {
    getColor: (path: string, fallback?: string) => string;
    getSpacing: (size: string | number) => string;
    getShadow: (level: number, color?: string) => string;
    getBorderRadius: (size: string) => string;
    getZIndex: (layer: string) => number;
    getTypography: (variant: string) => React.CSSProperties;
    isDark: boolean;
    currentColorMode: ColorMode;
    toggleColorMode: () => void;
    setColorMode: (mode: ColorMode) => void;
    currentTheme: string;
    setTheme: (variant: string) => void;
    availableThemes: string[];
    personaId: PersonaId;
    setPersona: (persona: PersonaId) => void;
    persona: PersonaConfig;
    personas: PersonaConfig[];
};
/**
 * Hook for accessing only color mode aspects of the theme.
 * More efficient than useTheme when only color mode is needed.
 */
export declare const useColorMode: () => ColorModeContextType;
/**
 * Hook for accessing only theme variant aspects.
 * More efficient than useTheme when only theme variant is needed.
 */
export declare const useThemeVariant: () => ThemeVariantContextType;
export declare const usePersonaTheme: () => PersonaContextType;
/**
 * Hook for accessing only style utilities.
 */
export declare const useStyleUtils: () => StyleUtilsContextType;
/**
 * Hook for accessing only glass effect utilities.
 */
export declare const useGlassEffects: () => GlassEffectsContextType;
/**
 * Hook for accessing only preference settings.
 */
export declare const usePreferences: () => PreferencesContextType;
/**
 * Hook for accessing only responsive context.
 */
export declare const useResponsive: () => ResponsiveContextType;
/**
 * ThemeObserver hook for subscribing to theme changes without re-rendering.
 */
export declare const useThemeObserver: (callback: (theme: any, isDark: boolean) => void) => void;
export declare const GlassThemeProvider: React.FC<ThemeProviderProps>;
export {};
//# sourceMappingURL=ThemeProvider.d.ts.map