import { useMemo } from "react";
/**
 * @example Applying variables through inline styles
 * ```tsx
 * import { purple500 } from "@react-md/core/theme/colors";
 * import { type ReadonlyCSSVariableList } from "@react-md/core/theme/types";
 * import { useInlineCSSVariables } from "@react-md/core/theme/useInlineCSSVariables";
 * import { contrastColor } from "@react-md/core/theme/utils";
 * import { type ReactElement, type ReactNode, useMemo } 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 = useInlineCSSVariables(customVariables);
 *
 *   return <div style={style}>{children}</div>;
 * }
 * ```
 *
 * @since 6.0.0
 */ export function useInlineCSSVariables(variables) {
    return useMemo(()=>{
        return variables.reduce((style, { name, value })=>{
            style[name] = value;
            return style;
        }, {});
    }, [
        variables
    ]);
}

//# sourceMappingURL=useInlineCSSVariables.js.map