import { type ReactElement, type ReactNode } from "react";
import { type UseStateSetter } from "../types.js";
declare module "react" {
    interface CSSProperties {
        "--rmd-background-color"?: string;
        "--rmd-on-background-color"?: string;
        "--rmd-surface-color"?: string;
        "--rmd-primary-color"?: string;
        "--rmd-on-primary-color"?: string;
        "--rmd-secondary-color"?: string;
        "--rmd-on-secondary-color"?: string;
        "--rmd-warning-color"?: string;
        "--rmd-on-warning-color"?: string;
        "--rmd-error-color"?: string;
        "--rmd-on-error-color"?: string;
        "--rmd-success-color"?: string;
        "--rmd-on-success-color"?: string;
        "--rmd-text-primary-color"?: string;
        "--rmd-text-secondary-color"?: string;
        "--rmd-text-hint-color"?: string;
        "--rmd-text-disabled-color"?: string;
        "--rmd-outline-width"?: string | number;
        "--rmd-outline-color"?: string;
        "--rmd-outline-grey-color"?: string;
    }
}
/** @since 6.0.0 */
export interface ThemeColors {
    primaryColor: string;
    onPrimaryColor: string;
    secondaryColor: string;
    onSecondaryColor: string;
    warningColor: string;
    onWarningColor: string;
    errorColor: string;
    onErrorColor: string;
    successColor: string;
    onSuccessColor: string;
}
/** @since 6.0.0 */
export interface ThemeTextColors {
    textPrimaryColor: string;
    textSecondaryColor: string;
    textHintColor: string;
    textDisabledColor: string;
}
/** @since 6.0.0 */
export interface ConfigurableThemeColors extends ThemeColors, ThemeTextColors {
    backgroundColor: string;
}
/** @since 6.0.0 */
export type ConfigurableThemeColorsName = keyof ConfigurableThemeColors;
/** @since 6.0.0 */
export interface ThemeContext extends ConfigurableThemeColors {
    /**
     * This will be `true` if a `theme` was not provided to the {@link ThemeProvider}
     */
    derived: boolean;
    /**
     * @example Simple Example
     * ```tsx
     * import { getDerivedTheme, useHtmlClassName, useTheme } from "@react-md/core";
     * import { useEffect } from "react";
     *
     * import styles from "./LightTheme.module.scss";
     *
     * let loadedOnce = false;
     *
     * export default function LightTheme(): null {
     *   useHtmlClassName(styles.container);
     *   const { setDerivedTheme } = useTheme();
     *   useEffect(() => {
     *     if (loadedOnce) {
     *       return;
     *     }
     *
     *     loadedOnce = true;
     *     setDerivedTheme(getDerivedTheme());
     *   }, [setDerivedTheme]);
     *   return null;
     * }
     * ```
     */
    setDerivedTheme: UseStateSetter<Readonly<ConfigurableThemeColors>>;
}
/** @since 6.0.0 */
export declare const DEFAULT_THEME_COLORS: Readonly<ThemeColors>;
/** @since 6.0.0 */
export declare const DEFAULT_LIGHT_THEME: Readonly<ConfigurableThemeColors>;
/** @since 6.0.0 */
export declare const DEFAULT_DARK_THEME: Readonly<ConfigurableThemeColors>;
/** @since 6.0.0 */
export declare const getDerivedTheme: (container?: Element) => Readonly<ConfigurableThemeColors>;
/**
 * This hook can be used to access the current theme set by the
 * {@link ThemeProvider}.
 *
 * @example Simple Example
 * ```tsx
 * import { useTheme } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   const theme = useTheme();
 *
 *   return <pre><code>{JSON.stringify(theme, null, 2)}</code></pre>;
 * }
 * ```
 *
 * @since 6.0.0
 * @throws "The `ThemeProvider` has not been initialized."
 */
export declare function useTheme(): Readonly<ThemeContext>;
/**
 * @internal
 * @since 6.0.0
 */
export declare function useTheme(allowUndefined: true): Readonly<ThemeContext> | undefined;
/** @since 6.0.0 */
export interface ThemeProviderProps {
    /**
     * When this is `undefined`, the theme will be derived by computing the
     * `document.documentElement`'s styles for all the `react-md` theme custom
     * properties. The theme will also automatically update whenever the
     * `colorScheme` or `colorSchemeMode` change.
     *
     * It is recommended to manually provide your theme if you know it beforehand.
     * Deriving the theme is really only useful if you allow your user to
     * customize all these theme values themselves and persist through local
     * storage/cookies.
     *
     * @see {@link DEFAULT_DARK_THEME}
     * @see {@link DEFAULT_LIGHT_THEME}
     * @defaultValue `colorScheme === "dark" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME`
     */
    theme?: Readonly<ConfigurableThemeColors>;
    children: ReactNode;
}
/**
 * **Client Component**
 *
 * The `ThemeProvider` should be added to the root of your app but as a child of
 * the `CoreProviders`.
 *
 * @example
 * ```tsx
 * import {
 *   black,
 *   blue500,
 *   greenAccent700,
 *   orangeAccent200,
 *   orangeAccent400,
 *   red500,
 *   CoreProviders,
 *   ThemeProvider,
 * } from "@react-md/core";
 * import type { ConfigurableThemeColors } from "@react-md/core";
 * import type { ReactElement } from "react";
 * import { createRoot } from "react-dom/client";
 *
 * import App from "./App";
 *
 * const theme: Readonly<ConfigurableThemeColors> = {
 *   primaryColor: blue500,
 *   onPrimaryColor: black,
 *   secondaryColor: orangeAccent400,
 *   onSecondaryColor: black,
 *   warningColor: orangeAccent200,
 *   onWarningColor: black,
 *   errorColor: red500,
 *   onErrorColor: black,
 *   successColor: greenAccent700,
 *   onSuccessColor: black,
 *   backgroundColor: "#121212",
 *   textPrimaryColor: "#d9d9d9",
 *   textSecondaryColor: "#b3b3b3",
 *   textHintColor: "gray", // #808080
 *   textDisabledColor: "gray", // #808080
 * };
 *
 * const container = document.getElementById("app");
 * const root = createRoot(container);
 * root.render(
 *   <CoreProviders>
 *     <ThemeProvider theme={theme}>
 *       <App />
 *     </ThemeProvider>
 *   </CoreProviders>
 * );
 * ```
 *
 * @example Automatically Deriving the Theme
 * ```tsx
 * import {
 *   CoreProviders,
 *   LocalStorageColorSchemeProvider,
 *   ThemeProvider,
 * } from "@react-md/core";
 * import { type ReactElement } from "react";
 * import { createRoot } from "react-dom/client";
 *
 * import App from "./App";
 *
 * const container = document.getElementById("app");
 * const root = createRoot(container);
 * root.render(
 *   <CoreProviders>
 *     <LocalStorageColorSchemeProvider>
 *       <ThemeProvider>
 *         <App />
 *       </ThemeProvider>
 *     </LocalStorageColorSchemeProvider>
 *   </CoreProviders>
 * );
 * ```
 *
 * @since 6.0.0
 */
export declare function ThemeProvider(props: ThemeProviderProps): ReactElement;
