import { default as React } from 'react';
export declare const createOptimizedStyles: (baseStyles: Record<string, unknown>) => Record<string, unknown>;
export declare const loadCriticalCSS: (css: string) => void;
export declare const loadNonCriticalCSS: (href: string) => void;
export declare const createCSSVariables: (variables: Record<string, string | number>) => Record<string, string>;
interface BreakpointConfig {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
    '2xl': number;
}
export declare const useResponsiveStyles: (styles: Partial<Record<keyof BreakpointConfig | "base", React.CSSProperties>>, breakpoints?: BreakpointConfig) => React.CSSProperties;
export declare const prefersReducedMotion: () => boolean;
export declare const useReducedMotion: () => boolean;
export declare const optimizeContainment: (element: HTMLElement, containTypes?: Array<"layout" | "paint" | "size" | "style">) => void;
export declare const optimizeWillChange: (element: HTMLElement, properties: string[]) => (() => void) | undefined;
export declare const batchDOMUpdates: (updates: (() => void)[]) => void;
export declare const optimizeClassNames: (...classes: (string | undefined | null | false)[]) => string;
export declare const inlineCriticalStyles: (styles: React.CSSProperties) => React.CSSProperties;
export declare const useLazyStyles: (getStyles: () => Promise<{
    default: any;
}>, deps?: React.DependencyList) => {
    styles: any;
    loading: boolean;
};
export declare const optimizeGrid: (columns: number, gap?: string) => {
    display: string;
    gridTemplateColumns: string;
    gap: string;
    contain: string;
    willChange: string;
};
export declare const optimizeFlex: (direction?: "row" | "column", align?: string, justify?: string) => {
    display: string;
    flexDirection: "row" | "column";
    alignItems: string;
    justifyContent: string;
    contain: string;
};
export declare const useMediaQuery: (query: string) => boolean;
export declare const useOptimizedTheme: <T extends Record<string, any>>(lightTheme: T, darkTheme: T) => T;
declare const _default: {
    createOptimizedStyles: (baseStyles: Record<string, unknown>) => Record<string, unknown>;
    loadCriticalCSS: (css: string) => void;
    loadNonCriticalCSS: (href: string) => void;
    createCSSVariables: (variables: Record<string, string | number>) => Record<string, string>;
    useResponsiveStyles: (styles: Partial<Record<keyof BreakpointConfig | "base", React.CSSProperties>>, breakpoints?: BreakpointConfig) => React.CSSProperties;
    prefersReducedMotion: () => boolean;
    useReducedMotion: () => boolean;
    optimizeContainment: (element: HTMLElement, containTypes?: Array<"layout" | "paint" | "size" | "style">) => void;
    optimizeWillChange: (element: HTMLElement, properties: string[]) => (() => void) | undefined;
    batchDOMUpdates: (updates: (() => void)[]) => void;
    optimizeClassNames: (...classes: (string | undefined | null | false)[]) => string;
    inlineCriticalStyles: (styles: React.CSSProperties) => React.CSSProperties;
    useLazyStyles: (getStyles: () => Promise<{
        default: any;
    }>, deps?: React.DependencyList) => {
        styles: any;
        loading: boolean;
    };
    optimizeGrid: (columns: number, gap?: string) => {
        display: string;
        gridTemplateColumns: string;
        gap: string;
        contain: string;
        willChange: string;
    };
    optimizeFlex: (direction?: "row" | "column", align?: string, justify?: string) => {
        display: string;
        flexDirection: "row" | "column";
        alignItems: string;
        justifyContent: string;
        contain: string;
    };
    useMediaQuery: (query: string) => boolean;
    useOptimizedTheme: <T extends Record<string, any>>(lightTheme: T, darkTheme: T) => T;
};
export default _default;
//# sourceMappingURL=css-optimization.d.ts.map