import type { RefObject } from "react";
import type { CSSVariableName, DefinedCSSVariableName } from "./types.js";
/**
 * @since 6.0.0
 */
export interface CSSVariable<Name extends CSSVariableName = DefinedCSSVariableName> {
    name: Name;
    value: string | number;
}
/**
 * @since 6.0.0
 */
export type CSSVariablesProperties<Name extends CSSVariableName = DefinedCSSVariableName> = {
    [key in Name]?: string | number;
};
/**
 * @since 6.0.0
 */
export type ReadonlyCSSVariableList<Name extends CSSVariableName = DefinedCSSVariableName> = readonly Readonly<CSSVariable<Name>>[];
/**
 * @example Applying Variables the root html element
 * ```ts
 * import {
 *   contrastColor,
 *   pinkAccent200,
 *   purple500,
 *   useCSSVariables,
 *  } from "@react-md/core";
 * import { useMemo } from "react";
 *
 * function Example(): null {
 *   // Note: You should use `useMemo` so that the custom variables are not
 *   // added and removed during each render.
 *   useCSSVariables(useMemo(() => {
 *     return [
 *       {
 *         name: "--rmd-primary-color",
 *         value: purple500,
 *       },
 *       {
 *         name: "--rmd-on-primary-color",
 *         value: contrastColor(purple500),
 *       },
 *     ];
 *   }, []));
 *
 *   return null;
 * }
 * ```
 *
 * @since 6.0.0
 */
export declare function useCSSVariables<Name extends CSSVariableName>(variables: ReadonlyCSSVariableList<Name>, rootNode?: RefObject<HTMLElement> | HTMLElement): void;
/**
 * @example Applying variables through inline styles
 * ```tsx
 * import {
 *   contrastColor,
 *   ReadonlyCSSVariableList,
 *   pinkAccent200,
 *   purple500,
 *   useCSSVariables,
 *  } from "@react-md/core";
 * import { useMemo } from "react";
 * import type { ReactElement, ReactNode } from "react";
 *
 * function Example({ children }: { children: ReactNode }): ReactElement {
 *   const customVariables = useMemo<ReadonlyCSSVariableList>(() => {
 *     return [
 *       {
 *         name: "--rmd-primary-color",
 *         value: purple500,
 *       },
 *       {
 *         name: "--rmd-on-primary-color",
 *         value: contrastColor(purple500),
 *       },
 *     ];
 *   }, []);
 *   const style = useCSSVariables(customVariables, true);
 *
 *   return <div style={style}>{children}</div>;
 * }
 * ```
 *
 * @since 6.0.0
 */
export declare function useCSSVariables<Name extends CSSVariableName>(variables: ReadonlyCSSVariableList<Name>, inlineStyle: true): CSSVariablesProperties<Name>;
