import React from 'react';
import { ModeType } from '../silke-color-swatches';
export type SilkeCSSContextType = {
    fontSize?: number;
    /**
     * Viewport is the size of the window/viewport
     * Required to be able to convert from/to vh/vw/vmin/vmax in SilkeCSSNumberField
     */
    viewport: [width: number, height: number];
    /**
     * Container is the size of the holder element,
     * required to be able to convert from/to % format in SilkeCssNumberField
     * */
    container?: [width: number, height: number];
    /**
     * Self is the size of the element itself,
     * required to be able convert auto into any other format in SilkeCssNumberField
     */
    self?: [width: number, height: number];
    variables: {
        [variableName: string]: string;
    };
    variablesv2: {
        key: string;
        name: string;
        type: 'color' | 'number' | 'font' | 'text' | 'image';
        value?: string;
        unit?: string;
        default?: boolean;
        hidden?: boolean;
        group?: string;
    }[];
    preferredColorMode?: ModeType;
    readonly?: boolean;
    getFontName?: (fontKey: string) => string;
    onVariableAdd?: (color: string) => void;
    onVariableDelete?: (color: string) => void;
    onVariableAttached?: (type: string) => void;
    onPreferredColorModeChange?: (mode: ModeType) => void;
};
export declare function useSilkeCSSContext(): SilkeCSSContextType;
export declare function SilkeCSSContext({ children, ...rest }: Partial<SilkeCSSContextType> & {
    children: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;