import * as CSS from 'csstype';

type CSSProperties = CSS.PropertiesFallback<number | string>;
type CSSPropertiesWithCallback<Props extends object> = {
    [K in keyof CSSProperties]: CSSProperties[K] | Array<Extract<CSSProperties[K], string>> | ((props: Props) => CSSProperties[K]);
};
type CSSPseudos<Props extends object> = {
    [K in CSS.Pseudos]?: CSSObject<Props>;
};
interface CSSOthersObject<Props extends object> {
    [selector: string]: CSSObject<Props>;
}
type CSSObject<Props extends object> = CSSPropertiesWithCallback<Props> | CSSPseudos<Props> | CSSOthersObject<Props>;

interface ThemeInput<ColorScheme extends string = string> extends Record<string, any> {
    /**
     * The prefix to be used for the CSS variables.
     */
    cssVarPrefix?: string;
    /**
     * The color schemes to be used for the theme.
     */
    colorSchemes?: Record<ColorScheme, any>;
    /**
     * The default color scheme to be used for the theme. It must be one of the keys from `theme.colorSchemes`.
     * Required when `colorSchemes` is provided.
     * @default 'light'
     */
    defaultColorScheme?: ColorScheme;
    /**
     * If provided, it will be used to create a selector for the color scheme.
     * This is useful if you want to use class or data-* attributes to apply the color scheme.
     *
     * The callback receives the colorScheme with the possible values of:
     * - undefined: the selector for tokens that are not color scheme dependent
     * - string: the selector for the color scheme
     *
     * @example
     * // class selector
     * (colorScheme) => colorScheme !== 'light' ? `.theme-${colorScheme}` : ":root"
     *
     * @example
     * // data-* attribute selector
     * (colorScheme) => colorScheme !== 'light' ? `[data-theme="${colorScheme}"]` : ":root"
     */
    getSelector?: (colorScheme: ColorScheme | undefined, css: Record<string, any>) => string | Record<string, any>;
    /**
     * A function to skip generating a CSS variable for a specific path or value.
     *
     * Note: properties with function as a value are always skipped.
     *
     * @example
     * // skip the `meta.*` fields from generating CSS variables and `theme.vars`
     * (keys, value) => keys[0] === 'meta'
     *
     */
    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
    components?: Partial<Record<string, {
        styleOverrides?: Record<string, any>;
        defaultProps: Record<string, any>;
    }>>;
}
type ExtendTheme<Options extends {
    colorScheme: string;
    tokens: Record<string, any>;
} = {
    colorScheme: string;
    tokens: Record<string, any>;
}> = ThemeInput<Options['colorScheme']> & Options['tokens'] & {
    vars: Options['tokens'];
    applyStyles: (colorScheme: Options['colorScheme'], styles: CSSObject<any>) => Record<string, CSSObject<any>>;
    getColorSchemeSelector: (colorScheme: Options['colorScheme']) => string;
    generateStyleSheets: () => Array<Record<string, any>>;
};
type Theme = Record<string, any>;
/**
 * A utility to tell zero-runtime to generate CSS variables for the theme.
 */
declare function extendTheme<Options extends {
    colorScheme: string;
    tokens: Record<string, any>;
} = {
    colorScheme: string;
    tokens: Record<string, any>;
}>(theme: ThemeInput): ExtendTheme<{
    colorScheme: Options["colorScheme"];
    tokens: Options["tokens"];
}>;

type PluginCustomOptions = {
    /**
     * Object to pass as parameter to the styled css callback functions.
     */
    themeArgs?: {
        theme?: Theme;
    };
    /**
     * Customize the output CSS. Mainly used for RTL support right now.
     */
    css?: {
        /**
         * To denote that whatever default css is being authored pertains to this
         * direction so that when Pigment CSS generates the CSS for the other direction,
         * it can revert the direction of the selector accordingly.
         * @default 'ltr'
         */
        defaultDirection: 'ltr' | 'rtl';
        /**
         * Pass this as true if you want to output the CSS for both ltr and rtl.
         * The css of the non-default direction will be wrapped in a `dir` selector.
         */
        generateForBothDir: boolean;
        /**
         * Pass this callback to customize the selector for the `dir` attribute. The default
         * is [dir=ltr] or [dir=rtl].
         */
        getDirSelector?: (dir: 'ltr' | 'rtl') => string;
    };
    /**
     * Customize the replacement package name that should be added in-place of
     * the actually imported package name, ie,
     *
     * ```js
     * import { styled } from '@pigment-css/react';
     * ```
     *
     * will turn into
     *
     * ```js
     * import { styled } from '@mui/material-pigment-css';
     * ```
     *
     * if packageMap has this
     *
     * ```js
     * {
     *   packageMap: {
     *     '@pigment-css/react': '@mui/material-pigment-css',
     *   }
     * }
     * ```
     */
    packageMap?: Record<string, string>;
};

declare function getGlobalSelector(asSelector: string): string;
declare function preprocessor(selector: string, cssText: string, options?: PluginCustomOptions['css']): string;
declare function matchAdapterPath(path: string): boolean;

declare function generateTokenCss(theme?: Theme): string;
declare function generateThemeTokens(theme?: Theme): {
    vars?: undefined;
} | {
    vars: any;
};

declare function generateThemeSource(theme?: Theme): any;

export { type ExtendTheme, type PluginCustomOptions, type Theme, type ThemeInput, extendTheme, generateThemeSource, generateThemeTokens, generateTokenCss, getGlobalSelector, matchAdapterPath, preprocessor };