@react-md/core 1.0.0-next.19 → 1.0.0-next.20

package/dist/theme/LocalStorageColorSchemeProvider.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement, type ReactNode } from "react";
-import { type ColorSchemeMode } from "./types.js";
+import { type ColorScheme } from "./types.js";
 /**
  * @since 6.0.0
  */
@@ -12,19 +12,19 @@ export interface LocalStorageColorSchemeProviderProps {
      */
     disableMetaTag?: boolean;
     /**
-     * Set this to a string like `"colorScheme"` if you want to store the user's
-     * color scheme preference in local storage.
+     * Set this to an empty string to disable the local storage behavior. Otherwise,
+     * this can be used to customize the name.
      *
-     * @defaultValue `""`
+     * @defaultValue `"colorScheme"`
      */
     localStorageKey?: string;
     /**
-     * The current color scheme mode that is being used by your app. This should
+     * The current color scheme that is being used by your app. This should
      * match the `$color-scheme` SCSS variable.
      *
      * @defaultValue `"light"`
      */
-    defaultColorSchemeMode?: ColorSchemeMode;
+    defaultColorScheme?: ColorScheme;
     children: ReactNode;
 }
 /**
@@ -43,34 +43,34 @@ export interface LocalStorageColorSchemeProviderProps {
  * import { createRoot } from "react-dom/client";
  *
  * function MyComponent(): ReactElement {
- *   const { colorScheme, colorSchemeMode, setColorSchemeMode } = useColorScheme();
- *   // colorScheme: "light" | "dark"
- *   // colorSchemeMode: "light" | "dark" | "system"
+ *   const { currentColor, colorScheme, setColorScheme } = useColorScheme();
+ *   // currentColor: "light" | "dark"
+ *   // colorScheme: "light" | "dark" | "system"
  *
  *   return (
  *     <>
- *       The current color scheme is {colorScheme}
+ *       The current color scheme is {currentColor}
  *       <SegmentedButtonContainer>
  *         <SegmentedButton
- *           selected={colorSchemeMode === "light"}
+ *           selected={colorScheme === "light"}
  *           onClick={() => {
- *             setColorSchemeMode("light")
+ *             setColorScheme("light")
  *           }}
  *         >
  *           Light
  *         </SegmentedButton>
  *         <SegmentedButton
- *           selected={colorSchemeMode === "dark"}
+ *           selected={colorScheme === "dark"}
  *           onClick={() => {
- *             setColorSchemeMode("dark")
+ *             setColorScheme("dark")
  *           }}
  *         >
  *           Dark
  *         </SegmentedButton>
  *         <SegmentedButton
- *           selected={colorSchemeMode === "system"}
+ *           selected={colorScheme === "system"}
  *           onClick={() => {
- *             setColorSchemeMode("system")
+ *             setColorScheme("system")
  *           }}
  *         >
  *           System
@@ -84,7 +84,7 @@ export interface LocalStorageColorSchemeProviderProps {
  * const root = createRoot(container);
  *
  * root.render(
- *   <LocalStorageColorSchemeProvider defaultColorSchemeMode="system">
+ *   <LocalStorageColorSchemeProvider defaultColorScheme="system">
  *     <MyComponent />
  *   </LocalStorageColorSchemeProvider>
  * );

package/dist/theme/LocalStorageColorSchemeProvider.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLocalStorage } from "../useLocalStorage.js";
+import { useStorage } from "../storage/useStorage.js";
+import { isColorScheme } from "./isColorScheme.js";
 import { ColorSchemeProvider } from "./useColorScheme.js";
 import { useColorSchemeProvider } from "./useColorSchemeProvider.js";
-import { isColorSchemeMode } from "./isColorScheme.js";
 /**
  * An optional implementation of the {@link ColorSchemeProvider} that supports
  * storing the value in local storage if the
@@ -20,34 +20,34 @@ import { isColorSchemeMode } from "./isColorScheme.js";
  * import { createRoot } from "react-dom/client";
  *
  * function MyComponent(): ReactElement {
- *   const { colorScheme, colorSchemeMode, setColorSchemeMode } = useColorScheme();
- *   // colorScheme: "light" | "dark"
- *   // colorSchemeMode: "light" | "dark" | "system"
+ *   const { currentColor, colorScheme, setColorScheme } = useColorScheme();
+ *   // currentColor: "light" | "dark"
+ *   // colorScheme: "light" | "dark" | "system"
  *
  *   return (
  *     <>
- *       The current color scheme is {colorScheme}
+ *       The current color scheme is {currentColor}
  *       <SegmentedButtonContainer>
  *         <SegmentedButton
- *           selected={colorSchemeMode === "light"}
+ *           selected={colorScheme === "light"}
  *           onClick={() => {
- *             setColorSchemeMode("light")
+ *             setColorScheme("light")
  *           }}
  *         >
  *           Light
  *         </SegmentedButton>
  *         <SegmentedButton
- *           selected={colorSchemeMode === "dark"}
+ *           selected={colorScheme === "dark"}
  *           onClick={() => {
- *             setColorSchemeMode("dark")
+ *             setColorScheme("dark")
  *           }}
  *         >
  *           Dark
  *         </SegmentedButton>
  *         <SegmentedButton
- *           selected={colorSchemeMode === "system"}
+ *           selected={colorScheme === "system"}
  *           onClick={() => {
- *             setColorSchemeMode("system")
+ *             setColorScheme("system")
  *           }}
  *         >
  *           System
@@ -61,7 +61,7 @@ import { isColorSchemeMode } from "./isColorScheme.js";
  * const root = createRoot(container);
  *
  * root.render(
- *   <LocalStorageColorSchemeProvider defaultColorSchemeMode="system">
+ *   <LocalStorageColorSchemeProvider defaultColorScheme="system">
  *     <MyComponent />
  *   </LocalStorageColorSchemeProvider>
  * );
@@ -69,16 +69,16 @@ import { isColorSchemeMode } from "./isColorScheme.js";
  *
  * @since 6.0.0
  */ export function LocalStorageColorSchemeProvider(props) {
-    const { localStorageKey = "", defaultColorSchemeMode = "light", disableMetaTag, children } = props;
-    const { value: colorSchemeMode, setValue: setColorSchemeMode } = useLocalStorage({
+    const { localStorageKey = "colorScheme", defaultColorScheme = "light", disableMetaTag, children } = props;
+    const { value: colorScheme, setValue: setColorScheme } = useStorage({
         key: localStorageKey,
-        defaultValue: defaultColorSchemeMode,
-        deserializer: (item)=>isColorSchemeMode(item) ? item : defaultColorSchemeMode
+        defaultValue: defaultColorScheme,
+        deserializer: (item)=>isColorScheme(item) ? item : defaultColorScheme
     });
     const value = useColorSchemeProvider({
         disableMetaTag,
-        colorSchemeMode,
-        setColorSchemeMode
+        colorScheme,
+        setColorScheme
     });
     return /*#__PURE__*/ _jsx(ColorSchemeProvider, {
         value: value,

package/dist/theme/LocalStorageColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/LocalStorageColorSchemeProvider.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { useLocalStorage } from \"../useLocalStorage.js\";\nimport { type ColorSchemeMode } from \"./types.js\";\nimport { ColorSchemeProvider } from \"./useColorScheme.js\";\nimport { useColorSchemeProvider } from \"./useColorSchemeProvider.js\";\nimport { isColorSchemeMode } from \"./isColorScheme.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LocalStorageColorSchemeProviderProps {\n  /**\n   * Set this to `true` to prevent a `<meta name=\"color-scheme\" content=\"{COLOR_SCHEME}\">`\n   * from being added to the `document.head`.\n   *\n   * @defaultValue `false`\n   */\n  disableMetaTag?: boolean;\n\n  /**\n   * Set this to a string like `\"colorScheme\"` if you want to store the user's\n   * color scheme preference in local storage.\n   *\n   * @defaultValue `\"\"`\n   */\n  localStorageKey?: string;\n\n  /**\n   * The current color scheme mode that is being used by your app. This should\n   * match the `$color-scheme` SCSS variable.\n   *\n   * @defaultValue `\"light\"`\n   */\n  defaultColorSchemeMode?: ColorSchemeMode;\n\n  children: ReactNode;\n}\n\n/**\n * An optional implementation of the {@link ColorSchemeProvider} that supports\n * storing the value in local storage if the\n * {@link LocalStorageColorSchemeProviderProps.localStorageKey} is provided.\n *\n * @example\n * ```tsx\n * import {\n *   LocalStorageColorSchemeProvider,\n *   SegmentedButtonContainer,\n *   SegmentedButton,\n *   useColorScheme,\n * } from \"@react-md/core\";\n * import { createRoot } from \"react-dom/client\";\n *\n * function MyComponent(): ReactElement {\n *   const { colorScheme, colorSchemeMode, setColorSchemeMode } = useColorScheme();\n *   // colorScheme: \"light\" | \"dark\"\n *   // colorSchemeMode: \"light\" | \"dark\" | \"system\"\n *\n *   return (\n *     <>\n *       The current color scheme is {colorScheme}\n *       <SegmentedButtonContainer>\n *         <SegmentedButton\n *           selected={colorSchemeMode === \"light\"}\n *           onClick={() => {\n *             setColorSchemeMode(\"light\")\n *           }}\n *         >\n *           Light\n *         </SegmentedButton>\n *         <SegmentedButton\n *           selected={colorSchemeMode === \"dark\"}\n *           onClick={() => {\n *             setColorSchemeMode(\"dark\")\n *           }}\n *         >\n *           Dark\n *         </SegmentedButton>\n *         <SegmentedButton\n *           selected={colorSchemeMode === \"system\"}\n *           onClick={() => {\n *             setColorSchemeMode(\"system\")\n *           }}\n *         >\n *           System\n *         </SegmentedButton>\n *       </SegmentedButtonContainer>\n *     </>\n *   )l\n * }\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <LocalStorageColorSchemeProvider defaultColorSchemeMode=\"system\">\n *     <MyComponent />\n *   </LocalStorageColorSchemeProvider>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function LocalStorageColorSchemeProvider(\n  props: LocalStorageColorSchemeProviderProps\n): ReactElement {\n  const {\n    localStorageKey = \"\",\n    defaultColorSchemeMode = \"light\",\n    disableMetaTag,\n    children,\n  } = props;\n\n  const { value: colorSchemeMode, setValue: setColorSchemeMode } =\n    useLocalStorage({\n      key: localStorageKey,\n      defaultValue: defaultColorSchemeMode,\n      deserializer: (item) =>\n        isColorSchemeMode(item) ? item : defaultColorSchemeMode,\n    });\n\n  const value = useColorSchemeProvider({\n    disableMetaTag,\n    colorSchemeMode,\n    setColorSchemeMode,\n  });\n\n  return <ColorSchemeProvider value={value}>{children}</ColorSchemeProvider>;\n}\n"],"names":["useLocalStorage","ColorSchemeProvider","useColorSchemeProvider","isColorSchemeMode","LocalStorageColorSchemeProvider","props","localStorageKey","defaultColorSchemeMode","disableMetaTag","children","value","colorSchemeMode","setValue","setColorSchemeMode","key","defaultValue","deserializer","item"],"mappings":"AAAA;;AAEA,SAASA,eAAe,QAAQ,wBAAwB;AAExD,SAASC,mBAAmB,QAAQ,sBAAsB;AAC1D,SAASC,sBAAsB,QAAQ,8BAA8B;AACrE,SAASC,iBAAiB,QAAQ,qBAAqB;AAiCvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,SAASC,gCACdC,KAA2C;IAE3C,MAAM,EACJC,kBAAkB,EAAE,EACpBC,yBAAyB,OAAO,EAChCC,cAAc,EACdC,QAAQ,EACT,GAAGJ;IAEJ,MAAM,EAAEK,OAAOC,eAAe,EAAEC,UAAUC,kBAAkB,EAAE,GAC5Db,gBAAgB;QACdc,KAAKR;QACLS,cAAcR;QACdS,cAAc,CAACC,OACbd,kBAAkBc,QAAQA,OAAOV;IACrC;IAEF,MAAMG,QAAQR,uBAAuB;QACnCM;QACAG;QACAE;IACF;IAEA,qBAAO,KAACZ;QAAoBS,OAAOA;kBAAQD;;AAC7C"}
+{"version":3,"sources":["../../src/theme/LocalStorageColorSchemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\n\nimport { useStorage } from \"../storage/useStorage.js\";\nimport { isColorScheme } from \"./isColorScheme.js\";\nimport { type ColorScheme } from \"./types.js\";\nimport { ColorSchemeProvider } from \"./useColorScheme.js\";\nimport { useColorSchemeProvider } from \"./useColorSchemeProvider.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface LocalStorageColorSchemeProviderProps {\n  /**\n   * Set this to `true` to prevent a `<meta name=\"color-scheme\" content=\"{COLOR_SCHEME}\">`\n   * from being added to the `document.head`.\n   *\n   * @defaultValue `false`\n   */\n  disableMetaTag?: boolean;\n\n  /**\n   * Set this to an empty string to disable the local storage behavior. Otherwise,\n   * this can be used to customize the name.\n   *\n   * @defaultValue `\"colorScheme\"`\n   */\n  localStorageKey?: string;\n\n  /**\n   * The current color scheme that is being used by your app. This should\n   * match the `$color-scheme` SCSS variable.\n   *\n   * @defaultValue `\"light\"`\n   */\n  defaultColorScheme?: ColorScheme;\n\n  children: ReactNode;\n}\n\n/**\n * An optional implementation of the {@link ColorSchemeProvider} that supports\n * storing the value in local storage if the\n * {@link LocalStorageColorSchemeProviderProps.localStorageKey} is provided.\n *\n * @example\n * ```tsx\n * import {\n *   LocalStorageColorSchemeProvider,\n *   SegmentedButtonContainer,\n *   SegmentedButton,\n *   useColorScheme,\n * } from \"@react-md/core\";\n * import { createRoot } from \"react-dom/client\";\n *\n * function MyComponent(): ReactElement {\n *   const { currentColor, colorScheme, setColorScheme } = useColorScheme();\n *   // currentColor: \"light\" | \"dark\"\n *   // colorScheme: \"light\" | \"dark\" | \"system\"\n *\n *   return (\n *     <>\n *       The current color scheme is {currentColor}\n *       <SegmentedButtonContainer>\n *         <SegmentedButton\n *           selected={colorScheme === \"light\"}\n *           onClick={() => {\n *             setColorScheme(\"light\")\n *           }}\n *         >\n *           Light\n *         </SegmentedButton>\n *         <SegmentedButton\n *           selected={colorScheme === \"dark\"}\n *           onClick={() => {\n *             setColorScheme(\"dark\")\n *           }}\n *         >\n *           Dark\n *         </SegmentedButton>\n *         <SegmentedButton\n *           selected={colorScheme === \"system\"}\n *           onClick={() => {\n *             setColorScheme(\"system\")\n *           }}\n *         >\n *           System\n *         </SegmentedButton>\n *       </SegmentedButtonContainer>\n *     </>\n *   )l\n * }\n *\n * const container = document.getElementById(\"root\");\n * const root = createRoot(container);\n *\n * root.render(\n *   <LocalStorageColorSchemeProvider defaultColorScheme=\"system\">\n *     <MyComponent />\n *   </LocalStorageColorSchemeProvider>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function LocalStorageColorSchemeProvider(\n  props: LocalStorageColorSchemeProviderProps\n): ReactElement {\n  const {\n    localStorageKey = \"colorScheme\",\n    defaultColorScheme = \"light\",\n    disableMetaTag,\n    children,\n  } = props;\n\n  const { value: colorScheme, setValue: setColorScheme } = useStorage({\n    key: localStorageKey,\n    defaultValue: defaultColorScheme,\n    deserializer: (item) => (isColorScheme(item) ? item : defaultColorScheme),\n  });\n\n  const value = useColorSchemeProvider({\n    disableMetaTag,\n    colorScheme,\n    setColorScheme,\n  });\n\n  return <ColorSchemeProvider value={value}>{children}</ColorSchemeProvider>;\n}\n"],"names":["useStorage","isColorScheme","ColorSchemeProvider","useColorSchemeProvider","LocalStorageColorSchemeProvider","props","localStorageKey","defaultColorScheme","disableMetaTag","children","value","colorScheme","setValue","setColorScheme","key","defaultValue","deserializer","item"],"mappings":"AAAA;;AAIA,SAASA,UAAU,QAAQ,2BAA2B;AACtD,SAASC,aAAa,QAAQ,qBAAqB;AAEnD,SAASC,mBAAmB,QAAQ,sBAAsB;AAC1D,SAASC,sBAAsB,QAAQ,8BAA8B;AAiCrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEC,GACD,OAAO,SAASC,gCACdC,KAA2C;IAE3C,MAAM,EACJC,kBAAkB,aAAa,EAC/BC,qBAAqB,OAAO,EAC5BC,cAAc,EACdC,QAAQ,EACT,GAAGJ;IAEJ,MAAM,EAAEK,OAAOC,WAAW,EAAEC,UAAUC,cAAc,EAAE,GAAGb,WAAW;QAClEc,KAAKR;QACLS,cAAcR;QACdS,cAAc,CAACC,OAAUhB,cAAcgB,QAAQA,OAAOV;IACxD;IAEA,MAAMG,QAAQP,uBAAuB;QACnCK;QACAG;QACAE;IACF;IAEA,qBAAO,KAACX;QAAoBQ,OAAOA;kBAAQD;;AAC7C"}

package/dist/theme/ThemeProvider.d.ts

@@ -122,7 +122,7 @@ 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.
+     * `currentColor` or `colorScheme` 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
@@ -131,7 +131,7 @@ export interface ThemeProviderProps {
      *
      * @see {@link DEFAULT_DARK_THEME}
      * @see {@link DEFAULT_LIGHT_THEME}
-     * @defaultValue `colorScheme === "dark" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME`
+     * @defaultValue `currentColor === "dark" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME`
      */
     theme?: Readonly<ConfigurableThemeColors>;
     children: ReactNode;

package/dist/theme/ThemeProvider.js

@@ -164,7 +164,7 @@ const { Provider } = context;
  */ export function ThemeProvider(props) {
     const { children, theme } = props;
     const ssr = useSsr();
-    const { colorScheme, colorSchemeMode } = useColorScheme();
+    const { currentColor, colorScheme } = useColorScheme();
     const [derivedTheme, setDerivedTheme] = useState(()=>{
         if (theme) {
             return theme;
@@ -172,7 +172,7 @@ const { Provider } = context;
         if (!ssr && typeof document !== "undefined") {
             return getDerivedTheme(document.documentElement);
         }
-        return colorScheme === "dark" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME;
+        return currentColor === "dark" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME;
     });
     const derived = !theme;
     useEffect(()=>{
@@ -194,8 +194,8 @@ const { Provider } = context;
         };
     }, [
         theme,
-        colorScheme,
-        colorSchemeMode
+        currentColor,
+        colorScheme
     ]);
     const value = useMemo(()=>{
         const backgroundColor = theme?.backgroundColor ?? derivedTheme.backgroundColor;

package/dist/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { useSsr } from \"../SsrProvider.js\";\nimport { type UseStateSetter } from \"../types.js\";\nimport {\n  black,\n  blue500,\n  greenAccent700,\n  orangeAccent200,\n  orangeAccent400,\n  red500,\n} from \"./colors.js\";\nimport {\n  backgroundColorVar,\n  errorColorVar,\n  onErrorColorVar,\n  onPrimaryColorVar,\n  onSecondaryColorVar,\n  onSuccessColorVar,\n  onWarningColorVar,\n  primaryColorVar,\n  secondaryColorVar,\n  successColorVar,\n  textDisabledColorVar,\n  textHintColorVar,\n  textPrimaryColorVar,\n  textSecondaryColorVar,\n  warningColorVar,\n} from \"./cssVars.js\";\nimport { useColorScheme } from \"./useColorScheme.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-background-color\"?: string;\n    \"--rmd-on-background-color\"?: string;\n    \"--rmd-surface-color\"?: string;\n    \"--rmd-primary-color\"?: string;\n    \"--rmd-on-primary-color\"?: string;\n    \"--rmd-secondary-color\"?: string;\n    \"--rmd-on-secondary-color\"?: string;\n    \"--rmd-warning-color\"?: string;\n    \"--rmd-on-warning-color\"?: string;\n    \"--rmd-error-color\"?: string;\n    \"--rmd-on-error-color\"?: string;\n    \"--rmd-success-color\"?: string;\n    \"--rmd-on-success-color\"?: string;\n    \"--rmd-text-primary-color\"?: string;\n    \"--rmd-text-secondary-color\"?: string;\n    \"--rmd-text-hint-color\"?: string;\n    \"--rmd-text-disabled-color\"?: string;\n\n    \"--rmd-outline-width\"?: string | number;\n    \"--rmd-outline-color\"?: string;\n    \"--rmd-outline-grey-color\"?: string;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface ThemeColors {\n  primaryColor: string;\n  onPrimaryColor: string;\n  secondaryColor: string;\n  onSecondaryColor: string;\n  warningColor: string;\n  onWarningColor: string;\n  errorColor: string;\n  onErrorColor: string;\n  successColor: string;\n  onSuccessColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeTextColors {\n  textPrimaryColor: string;\n  textSecondaryColor: string;\n  textHintColor: string;\n  textDisabledColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ConfigurableThemeColors extends ThemeColors, ThemeTextColors {\n  backgroundColor: string;\n}\n\n/** @since 6.0.0 */\nexport type ConfigurableThemeColorsName = keyof ConfigurableThemeColors;\n\n/** @since 6.0.0 */\nexport interface ThemeContext extends ConfigurableThemeColors {\n  /**\n   * This will be `true` if a `theme` was not provided to the {@link ThemeProvider}\n   */\n  derived: boolean;\n\n  /**\n   * @example Simple Example\n   * ```tsx\n   * import { getDerivedTheme, useHtmlClassName, useTheme } from \"@react-md/core\";\n   * import { useEffect } from \"react\";\n   *\n   * import styles from \"./LightTheme.module.scss\";\n   *\n   * let loadedOnce = false;\n   *\n   * export default function LightTheme(): null {\n   *   useHtmlClassName(styles.container);\n   *   const { setDerivedTheme } = useTheme();\n   *   useEffect(() => {\n   *     if (loadedOnce) {\n   *       return;\n   *     }\n   *\n   *     loadedOnce = true;\n   *     setDerivedTheme(getDerivedTheme());\n   *   }, [setDerivedTheme]);\n   *   return null;\n   * }\n   * ```\n   */\n  setDerivedTheme: UseStateSetter<Readonly<ConfigurableThemeColors>>;\n}\n\n/** @since 6.0.0 */\nexport const DEFAULT_THEME_COLORS: Readonly<ThemeColors> = {\n  primaryColor: blue500,\n  onPrimaryColor: black,\n  secondaryColor: orangeAccent400,\n  onSecondaryColor: black,\n  warningColor: orangeAccent200,\n  onWarningColor: black,\n  errorColor: red500,\n  onErrorColor: black,\n  successColor: greenAccent700,\n  onSuccessColor: black,\n};\n\n/** @since 6.0.0 */\nexport const DEFAULT_LIGHT_THEME: Readonly<ConfigurableThemeColors> = {\n  ...DEFAULT_THEME_COLORS,\n  backgroundColor: \"#fafafa\",\n  textPrimaryColor: \"#212121\",\n  textSecondaryColor: \"#757575\",\n  textHintColor: \"#a8a8a8\",\n  textDisabledColor: \"#9e9e9e\",\n};\n\n/** @since 6.0.0 */\nexport const DEFAULT_DARK_THEME: Readonly<ConfigurableThemeColors> = {\n  ...DEFAULT_THEME_COLORS,\n  backgroundColor: \"#121212\",\n  textPrimaryColor: \"#d9d9d9\",\n  textSecondaryColor: \"#b3b3b3\",\n  textHintColor: \"gray\", // #808080\n  textDisabledColor: \"gray\", // #808080\n};\n\nconst context = createContext<Readonly<ThemeContext> | undefined>(undefined);\ncontext.displayName = \"Theme\";\nconst { Provider } = context;\n\n/** @since 6.0.0 */\nexport const getDerivedTheme = (\n  container: Element = document.documentElement\n): Readonly<ConfigurableThemeColors> => {\n  const rootStyles = window.getComputedStyle(container);\n  const backgroundColor = rootStyles.getPropertyValue(backgroundColorVar);\n  const primaryColor = rootStyles.getPropertyValue(primaryColorVar);\n  const onPrimaryColor = rootStyles.getPropertyValue(onPrimaryColorVar);\n  const secondaryColor = rootStyles.getPropertyValue(secondaryColorVar);\n  const onSecondaryColor = rootStyles.getPropertyValue(onSecondaryColorVar);\n  const warningColor = rootStyles.getPropertyValue(warningColorVar);\n  const onWarningColor = rootStyles.getPropertyValue(onWarningColorVar);\n  const errorColor = rootStyles.getPropertyValue(errorColorVar);\n  const onErrorColor = rootStyles.getPropertyValue(onErrorColorVar);\n  const successColor = rootStyles.getPropertyValue(successColorVar);\n  const onSuccessColor = rootStyles.getPropertyValue(onSuccessColorVar);\n  const textPrimaryColor = rootStyles.getPropertyValue(textPrimaryColorVar);\n  const textSecondaryColor = rootStyles.getPropertyValue(textSecondaryColorVar);\n  const textHintColor = rootStyles.getPropertyValue(textHintColorVar);\n  const textDisabledColor = rootStyles.getPropertyValue(textDisabledColorVar);\n\n  return {\n    backgroundColor,\n    primaryColor,\n    onPrimaryColor,\n    secondaryColor,\n    onSecondaryColor,\n    warningColor,\n    onWarningColor,\n    errorColor,\n    onErrorColor,\n    successColor,\n    onSuccessColor,\n    textPrimaryColor,\n    textSecondaryColor,\n    textHintColor,\n    textDisabledColor,\n  };\n};\n\n/**\n * This hook can be used to access the current theme set by the\n * {@link ThemeProvider}.\n *\n * @example Simple Example\n * ```tsx\n * import { useTheme } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const theme = useTheme();\n *\n *   return <pre><code>{JSON.stringify(theme, null, 2)}</code></pre>;\n * }\n * ```\n *\n * @since 6.0.0\n * @throws \"The `ThemeProvider` has not been initialized.\"\n */\nexport function useTheme(): Readonly<ThemeContext>;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useTheme(\n  allowUndefined: true\n): Readonly<ThemeContext> | undefined;\n\n/**\n * @internal\n * @since 6.0.0\n * @throws \"The `ThemeProvider` has not been initialized.\"\n */\nexport function useTheme(\n  allowUndefined?: boolean\n): Readonly<ThemeContext> | undefined {\n  const theme = useContext(context);\n  if (!theme && !allowUndefined) {\n    throw new Error(\"The `ThemeProvider` has not been initialized.\");\n  }\n\n  return theme;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeProviderProps {\n  /**\n   * When this is `undefined`, the theme will be derived by computing the\n   * `document.documentElement`'s styles for all the `react-md` theme custom\n   * properties. The theme will also automatically update whenever the\n   * `colorScheme` or `colorSchemeMode` change.\n   *\n   * It is recommended to manually provide your theme if you know it beforehand.\n   * Deriving the theme is really only useful if you allow your user to\n   * customize all these theme values themselves and persist through local\n   * storage/cookies.\n   *\n   * @see {@link DEFAULT_DARK_THEME}\n   * @see {@link DEFAULT_LIGHT_THEME}\n   * @defaultValue `colorScheme === \"dark\" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME`\n   */\n  theme?: Readonly<ConfigurableThemeColors>;\n\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * The `ThemeProvider` should be added to the root of your app but as a child of\n * the `CoreProviders`.\n *\n * @example\n * ```tsx\n * import {\n *   black,\n *   blue500,\n *   greenAccent700,\n *   orangeAccent200,\n *   orangeAccent400,\n *   red500,\n *   CoreProviders,\n *   ThemeProvider,\n * } from \"@react-md/core\";\n * import type { ConfigurableThemeColors } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * import App from \"./App\";\n *\n * const theme: Readonly<ConfigurableThemeColors> = {\n *   primaryColor: blue500,\n *   onPrimaryColor: black,\n *   secondaryColor: orangeAccent400,\n *   onSecondaryColor: black,\n *   warningColor: orangeAccent200,\n *   onWarningColor: black,\n *   errorColor: red500,\n *   onErrorColor: black,\n *   successColor: greenAccent700,\n *   onSuccessColor: black,\n *   backgroundColor: \"#121212\",\n *   textPrimaryColor: \"#d9d9d9\",\n *   textSecondaryColor: \"#b3b3b3\",\n *   textHintColor: \"gray\", // #808080\n *   textDisabledColor: \"gray\", // #808080\n * };\n *\n * const container = document.getElementById(\"app\");\n * const root = createRoot(container);\n * root.render(\n *   <CoreProviders>\n *     <ThemeProvider theme={theme}>\n *       <App />\n *     </ThemeProvider>\n *   </CoreProviders>\n * );\n * ```\n *\n * @example Automatically Deriving the Theme\n * ```tsx\n * import {\n *   CoreProviders,\n *   LocalStorageColorSchemeProvider,\n *   ThemeProvider,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * import App from \"./App\";\n *\n * const container = document.getElementById(\"app\");\n * const root = createRoot(container);\n * root.render(\n *   <CoreProviders>\n *     <LocalStorageColorSchemeProvider>\n *       <ThemeProvider>\n *         <App />\n *       </ThemeProvider>\n *     </LocalStorageColorSchemeProvider>\n *   </CoreProviders>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function ThemeProvider(props: ThemeProviderProps): ReactElement {\n  const { children, theme } = props;\n  const ssr = useSsr();\n  const { colorScheme, colorSchemeMode } = useColorScheme();\n  const [derivedTheme, setDerivedTheme] = useState<ConfigurableThemeColors>(\n    () => {\n      if (theme) {\n        return theme;\n      }\n\n      if (!ssr && typeof document !== \"undefined\") {\n        return getDerivedTheme(document.documentElement);\n      }\n\n      return colorScheme === \"dark\" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME;\n    }\n  );\n\n  const derived = !theme;\n  useEffect(() => {\n    if (theme) {\n      return;\n    }\n\n    // This has to be recalculated after an animation to ensure the new theme\n    // styles have been applied. It will use the previous theme styles without\n    // this frame.\n    //\n    // NOTE: This will not be correct the first time a new theme is lazy-loaded\n    // and applied. It might be good to have a way to manually force this flow\n    // again?\n    const frame = window.requestAnimationFrame(() => {\n      setDerivedTheme(getDerivedTheme(document.documentElement));\n    });\n\n    return () => {\n      window.cancelAnimationFrame(frame);\n    };\n  }, [theme, colorScheme, colorSchemeMode]);\n\n  const value = useMemo<ThemeContext>(() => {\n    const backgroundColor =\n      theme?.backgroundColor ?? derivedTheme.backgroundColor;\n    const primaryColor = theme?.primaryColor ?? derivedTheme.primaryColor;\n    const onPrimaryColor = theme?.onPrimaryColor ?? derivedTheme.onPrimaryColor;\n    const secondaryColor = theme?.secondaryColor ?? derivedTheme.secondaryColor;\n    const onSecondaryColor =\n      theme?.onSecondaryColor ?? derivedTheme.onSecondaryColor;\n    const warningColor = theme?.warningColor ?? derivedTheme.warningColor;\n    const onWarningColor = theme?.onWarningColor ?? derivedTheme.onWarningColor;\n    const errorColor = theme?.errorColor ?? derivedTheme.errorColor;\n    const onErrorColor = theme?.onErrorColor ?? derivedTheme.onErrorColor;\n    const successColor = theme?.successColor ?? derivedTheme.successColor;\n    const onSuccessColor = theme?.onSuccessColor ?? derivedTheme.onSuccessColor;\n    const textPrimaryColor =\n      theme?.textPrimaryColor ?? derivedTheme.textPrimaryColor;\n    const textSecondaryColor =\n      theme?.textSecondaryColor ?? derivedTheme.textSecondaryColor;\n    const textHintColor = theme?.textHintColor ?? derivedTheme.textHintColor;\n    const textDisabledColor =\n      theme?.textDisabledColor ?? derivedTheme.textDisabledColor;\n\n    return {\n      derived,\n      backgroundColor,\n      primaryColor,\n      onPrimaryColor,\n      secondaryColor,\n      onSecondaryColor,\n      warningColor,\n      onWarningColor,\n      errorColor,\n      onErrorColor,\n      successColor,\n      onSuccessColor,\n      textPrimaryColor,\n      textSecondaryColor,\n      textHintColor,\n      textDisabledColor,\n      setDerivedTheme,\n    };\n  }, [\n    derived,\n    derivedTheme.backgroundColor,\n    derivedTheme.errorColor,\n    derivedTheme.onErrorColor,\n    derivedTheme.onPrimaryColor,\n    derivedTheme.onSecondaryColor,\n    derivedTheme.onSuccessColor,\n    derivedTheme.onWarningColor,\n    derivedTheme.primaryColor,\n    derivedTheme.secondaryColor,\n    derivedTheme.successColor,\n    derivedTheme.textDisabledColor,\n    derivedTheme.textHintColor,\n    derivedTheme.textPrimaryColor,\n    derivedTheme.textSecondaryColor,\n    derivedTheme.warningColor,\n    theme?.backgroundColor,\n    theme?.errorColor,\n    theme?.onErrorColor,\n    theme?.onPrimaryColor,\n    theme?.onSecondaryColor,\n    theme?.onSuccessColor,\n    theme?.onWarningColor,\n    theme?.primaryColor,\n    theme?.secondaryColor,\n    theme?.successColor,\n    theme?.textDisabledColor,\n    theme?.textHintColor,\n    theme?.textPrimaryColor,\n    theme?.textSecondaryColor,\n    theme?.warningColor,\n  ]);\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useMemo","useState","useSsr","black","blue500","greenAccent700","orangeAccent200","orangeAccent400","red500","backgroundColorVar","errorColorVar","onErrorColorVar","onPrimaryColorVar","onSecondaryColorVar","onSuccessColorVar","onWarningColorVar","primaryColorVar","secondaryColorVar","successColorVar","textDisabledColorVar","textHintColorVar","textPrimaryColorVar","textSecondaryColorVar","warningColorVar","useColorScheme","DEFAULT_THEME_COLORS","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","DEFAULT_LIGHT_THEME","backgroundColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor","DEFAULT_DARK_THEME","context","undefined","displayName","Provider","getDerivedTheme","container","document","documentElement","rootStyles","window","getComputedStyle","getPropertyValue","useTheme","allowUndefined","theme","Error","ThemeProvider","props","children","ssr","colorScheme","colorSchemeMode","derivedTheme","setDerivedTheme","derived","frame","requestAnimationFrame","cancelAnimationFrame","value"],"mappings":"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"}
+{"version":3,"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { type UseStateSetter } from \"../types.js\";\nimport {\n  black,\n  blue500,\n  greenAccent700,\n  orangeAccent200,\n  orangeAccent400,\n  red500,\n} from \"./colors.js\";\nimport {\n  backgroundColorVar,\n  errorColorVar,\n  onErrorColorVar,\n  onPrimaryColorVar,\n  onSecondaryColorVar,\n  onSuccessColorVar,\n  onWarningColorVar,\n  primaryColorVar,\n  secondaryColorVar,\n  successColorVar,\n  textDisabledColorVar,\n  textHintColorVar,\n  textPrimaryColorVar,\n  textSecondaryColorVar,\n  warningColorVar,\n} from \"./cssVars.js\";\nimport { useColorScheme } from \"./useColorScheme.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-background-color\"?: string;\n    \"--rmd-on-background-color\"?: string;\n    \"--rmd-surface-color\"?: string;\n    \"--rmd-primary-color\"?: string;\n    \"--rmd-on-primary-color\"?: string;\n    \"--rmd-secondary-color\"?: string;\n    \"--rmd-on-secondary-color\"?: string;\n    \"--rmd-warning-color\"?: string;\n    \"--rmd-on-warning-color\"?: string;\n    \"--rmd-error-color\"?: string;\n    \"--rmd-on-error-color\"?: string;\n    \"--rmd-success-color\"?: string;\n    \"--rmd-on-success-color\"?: string;\n    \"--rmd-text-primary-color\"?: string;\n    \"--rmd-text-secondary-color\"?: string;\n    \"--rmd-text-hint-color\"?: string;\n    \"--rmd-text-disabled-color\"?: string;\n\n    \"--rmd-outline-width\"?: string | number;\n    \"--rmd-outline-color\"?: string;\n    \"--rmd-outline-grey-color\"?: string;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface ThemeColors {\n  primaryColor: string;\n  onPrimaryColor: string;\n  secondaryColor: string;\n  onSecondaryColor: string;\n  warningColor: string;\n  onWarningColor: string;\n  errorColor: string;\n  onErrorColor: string;\n  successColor: string;\n  onSuccessColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeTextColors {\n  textPrimaryColor: string;\n  textSecondaryColor: string;\n  textHintColor: string;\n  textDisabledColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ConfigurableThemeColors extends ThemeColors, ThemeTextColors {\n  backgroundColor: string;\n}\n\n/** @since 6.0.0 */\nexport type ConfigurableThemeColorsName = keyof ConfigurableThemeColors;\n\n/** @since 6.0.0 */\nexport interface ThemeContext extends ConfigurableThemeColors {\n  /**\n   * This will be `true` if a `theme` was not provided to the {@link ThemeProvider}\n   */\n  derived: boolean;\n\n  /**\n   * @example Simple Example\n   * ```tsx\n   * import { getDerivedTheme, useHtmlClassName, useTheme } from \"@react-md/core\";\n   * import { useEffect } from \"react\";\n   *\n   * import styles from \"./LightTheme.module.scss\";\n   *\n   * let loadedOnce = false;\n   *\n   * export default function LightTheme(): null {\n   *   useHtmlClassName(styles.container);\n   *   const { setDerivedTheme } = useTheme();\n   *   useEffect(() => {\n   *     if (loadedOnce) {\n   *       return;\n   *     }\n   *\n   *     loadedOnce = true;\n   *     setDerivedTheme(getDerivedTheme());\n   *   }, [setDerivedTheme]);\n   *   return null;\n   * }\n   * ```\n   */\n  setDerivedTheme: UseStateSetter<Readonly<ConfigurableThemeColors>>;\n}\n\n/** @since 6.0.0 */\nexport const DEFAULT_THEME_COLORS: Readonly<ThemeColors> = {\n  primaryColor: blue500,\n  onPrimaryColor: black,\n  secondaryColor: orangeAccent400,\n  onSecondaryColor: black,\n  warningColor: orangeAccent200,\n  onWarningColor: black,\n  errorColor: red500,\n  onErrorColor: black,\n  successColor: greenAccent700,\n  onSuccessColor: black,\n};\n\n/** @since 6.0.0 */\nexport const DEFAULT_LIGHT_THEME: Readonly<ConfigurableThemeColors> = {\n  ...DEFAULT_THEME_COLORS,\n  backgroundColor: \"#fafafa\",\n  textPrimaryColor: \"#212121\",\n  textSecondaryColor: \"#757575\",\n  textHintColor: \"#a8a8a8\",\n  textDisabledColor: \"#9e9e9e\",\n};\n\n/** @since 6.0.0 */\nexport const DEFAULT_DARK_THEME: Readonly<ConfigurableThemeColors> = {\n  ...DEFAULT_THEME_COLORS,\n  backgroundColor: \"#121212\",\n  textPrimaryColor: \"#d9d9d9\",\n  textSecondaryColor: \"#b3b3b3\",\n  textHintColor: \"gray\", // #808080\n  textDisabledColor: \"gray\", // #808080\n};\n\nconst context = createContext<Readonly<ThemeContext> | undefined>(undefined);\ncontext.displayName = \"Theme\";\nconst { Provider } = context;\n\n/** @since 6.0.0 */\nexport const getDerivedTheme = (\n  container: Element = document.documentElement\n): Readonly<ConfigurableThemeColors> => {\n  const rootStyles = window.getComputedStyle(container);\n  const backgroundColor = rootStyles.getPropertyValue(backgroundColorVar);\n  const primaryColor = rootStyles.getPropertyValue(primaryColorVar);\n  const onPrimaryColor = rootStyles.getPropertyValue(onPrimaryColorVar);\n  const secondaryColor = rootStyles.getPropertyValue(secondaryColorVar);\n  const onSecondaryColor = rootStyles.getPropertyValue(onSecondaryColorVar);\n  const warningColor = rootStyles.getPropertyValue(warningColorVar);\n  const onWarningColor = rootStyles.getPropertyValue(onWarningColorVar);\n  const errorColor = rootStyles.getPropertyValue(errorColorVar);\n  const onErrorColor = rootStyles.getPropertyValue(onErrorColorVar);\n  const successColor = rootStyles.getPropertyValue(successColorVar);\n  const onSuccessColor = rootStyles.getPropertyValue(onSuccessColorVar);\n  const textPrimaryColor = rootStyles.getPropertyValue(textPrimaryColorVar);\n  const textSecondaryColor = rootStyles.getPropertyValue(textSecondaryColorVar);\n  const textHintColor = rootStyles.getPropertyValue(textHintColorVar);\n  const textDisabledColor = rootStyles.getPropertyValue(textDisabledColorVar);\n\n  return {\n    backgroundColor,\n    primaryColor,\n    onPrimaryColor,\n    secondaryColor,\n    onSecondaryColor,\n    warningColor,\n    onWarningColor,\n    errorColor,\n    onErrorColor,\n    successColor,\n    onSuccessColor,\n    textPrimaryColor,\n    textSecondaryColor,\n    textHintColor,\n    textDisabledColor,\n  };\n};\n\n/**\n * This hook can be used to access the current theme set by the\n * {@link ThemeProvider}.\n *\n * @example Simple Example\n * ```tsx\n * import { useTheme } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const theme = useTheme();\n *\n *   return <pre><code>{JSON.stringify(theme, null, 2)}</code></pre>;\n * }\n * ```\n *\n * @since 6.0.0\n * @throws \"The `ThemeProvider` has not been initialized.\"\n */\nexport function useTheme(): Readonly<ThemeContext>;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useTheme(\n  allowUndefined: true\n): Readonly<ThemeContext> | undefined;\n\n/**\n * @internal\n * @since 6.0.0\n * @throws \"The `ThemeProvider` has not been initialized.\"\n */\nexport function useTheme(\n  allowUndefined?: boolean\n): Readonly<ThemeContext> | undefined {\n  const theme = useContext(context);\n  if (!theme && !allowUndefined) {\n    throw new Error(\"The `ThemeProvider` has not been initialized.\");\n  }\n\n  return theme;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeProviderProps {\n  /**\n   * When this is `undefined`, the theme will be derived by computing the\n   * `document.documentElement`'s styles for all the `react-md` theme custom\n   * properties. The theme will also automatically update whenever the\n   * `currentColor` or `colorScheme` change.\n   *\n   * It is recommended to manually provide your theme if you know it beforehand.\n   * Deriving the theme is really only useful if you allow your user to\n   * customize all these theme values themselves and persist through local\n   * storage/cookies.\n   *\n   * @see {@link DEFAULT_DARK_THEME}\n   * @see {@link DEFAULT_LIGHT_THEME}\n   * @defaultValue `currentColor === \"dark\" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME`\n   */\n  theme?: Readonly<ConfigurableThemeColors>;\n\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * The `ThemeProvider` should be added to the root of your app but as a child of\n * the `CoreProviders`.\n *\n * @example\n * ```tsx\n * import {\n *   black,\n *   blue500,\n *   greenAccent700,\n *   orangeAccent200,\n *   orangeAccent400,\n *   red500,\n *   CoreProviders,\n *   ThemeProvider,\n * } from \"@react-md/core\";\n * import type { ConfigurableThemeColors } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * import App from \"./App\";\n *\n * const theme: Readonly<ConfigurableThemeColors> = {\n *   primaryColor: blue500,\n *   onPrimaryColor: black,\n *   secondaryColor: orangeAccent400,\n *   onSecondaryColor: black,\n *   warningColor: orangeAccent200,\n *   onWarningColor: black,\n *   errorColor: red500,\n *   onErrorColor: black,\n *   successColor: greenAccent700,\n *   onSuccessColor: black,\n *   backgroundColor: \"#121212\",\n *   textPrimaryColor: \"#d9d9d9\",\n *   textSecondaryColor: \"#b3b3b3\",\n *   textHintColor: \"gray\", // #808080\n *   textDisabledColor: \"gray\", // #808080\n * };\n *\n * const container = document.getElementById(\"app\");\n * const root = createRoot(container);\n * root.render(\n *   <CoreProviders>\n *     <ThemeProvider theme={theme}>\n *       <App />\n *     </ThemeProvider>\n *   </CoreProviders>\n * );\n * ```\n *\n * @example Automatically Deriving the Theme\n * ```tsx\n * import {\n *   CoreProviders,\n *   LocalStorageColorSchemeProvider,\n *   ThemeProvider,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * import App from \"./App\";\n *\n * const container = document.getElementById(\"app\");\n * const root = createRoot(container);\n * root.render(\n *   <CoreProviders>\n *     <LocalStorageColorSchemeProvider>\n *       <ThemeProvider>\n *         <App />\n *       </ThemeProvider>\n *     </LocalStorageColorSchemeProvider>\n *   </CoreProviders>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function ThemeProvider(props: ThemeProviderProps): ReactElement {\n  const { children, theme } = props;\n  const ssr = useSsr();\n  const { currentColor, colorScheme } = useColorScheme();\n  const [derivedTheme, setDerivedTheme] = useState<ConfigurableThemeColors>(\n    () => {\n      if (theme) {\n        return theme;\n      }\n\n      if (!ssr && typeof document !== \"undefined\") {\n        return getDerivedTheme(document.documentElement);\n      }\n\n      return currentColor === \"dark\" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME;\n    }\n  );\n\n  const derived = !theme;\n  useEffect(() => {\n    if (theme) {\n      return;\n    }\n\n    // This has to be recalculated after an animation to ensure the new theme\n    // styles have been applied. It will use the previous theme styles without\n    // this frame.\n    //\n    // NOTE: This will not be correct the first time a new theme is lazy-loaded\n    // and applied. It might be good to have a way to manually force this flow\n    // again?\n    const frame = window.requestAnimationFrame(() => {\n      setDerivedTheme(getDerivedTheme(document.documentElement));\n    });\n\n    return () => {\n      window.cancelAnimationFrame(frame);\n    };\n  }, [theme, currentColor, colorScheme]);\n\n  const value = useMemo<ThemeContext>(() => {\n    const backgroundColor =\n      theme?.backgroundColor ?? derivedTheme.backgroundColor;\n    const primaryColor = theme?.primaryColor ?? derivedTheme.primaryColor;\n    const onPrimaryColor = theme?.onPrimaryColor ?? derivedTheme.onPrimaryColor;\n    const secondaryColor = theme?.secondaryColor ?? derivedTheme.secondaryColor;\n    const onSecondaryColor =\n      theme?.onSecondaryColor ?? derivedTheme.onSecondaryColor;\n    const warningColor = theme?.warningColor ?? derivedTheme.warningColor;\n    const onWarningColor = theme?.onWarningColor ?? derivedTheme.onWarningColor;\n    const errorColor = theme?.errorColor ?? derivedTheme.errorColor;\n    const onErrorColor = theme?.onErrorColor ?? derivedTheme.onErrorColor;\n    const successColor = theme?.successColor ?? derivedTheme.successColor;\n    const onSuccessColor = theme?.onSuccessColor ?? derivedTheme.onSuccessColor;\n    const textPrimaryColor =\n      theme?.textPrimaryColor ?? derivedTheme.textPrimaryColor;\n    const textSecondaryColor =\n      theme?.textSecondaryColor ?? derivedTheme.textSecondaryColor;\n    const textHintColor = theme?.textHintColor ?? derivedTheme.textHintColor;\n    const textDisabledColor =\n      theme?.textDisabledColor ?? derivedTheme.textDisabledColor;\n\n    return {\n      derived,\n      backgroundColor,\n      primaryColor,\n      onPrimaryColor,\n      secondaryColor,\n      onSecondaryColor,\n      warningColor,\n      onWarningColor,\n      errorColor,\n      onErrorColor,\n      successColor,\n      onSuccessColor,\n      textPrimaryColor,\n      textSecondaryColor,\n      textHintColor,\n      textDisabledColor,\n      setDerivedTheme,\n    };\n  }, [\n    derived,\n    derivedTheme.backgroundColor,\n    derivedTheme.errorColor,\n    derivedTheme.onErrorColor,\n    derivedTheme.onPrimaryColor,\n    derivedTheme.onSecondaryColor,\n    derivedTheme.onSuccessColor,\n    derivedTheme.onWarningColor,\n    derivedTheme.primaryColor,\n    derivedTheme.secondaryColor,\n    derivedTheme.successColor,\n    derivedTheme.textDisabledColor,\n    derivedTheme.textHintColor,\n    derivedTheme.textPrimaryColor,\n    derivedTheme.textSecondaryColor,\n    derivedTheme.warningColor,\n    theme?.backgroundColor,\n    theme?.errorColor,\n    theme?.onErrorColor,\n    theme?.onPrimaryColor,\n    theme?.onSecondaryColor,\n    theme?.onSuccessColor,\n    theme?.onWarningColor,\n    theme?.primaryColor,\n    theme?.secondaryColor,\n    theme?.successColor,\n    theme?.textDisabledColor,\n    theme?.textHintColor,\n    theme?.textPrimaryColor,\n    theme?.textSecondaryColor,\n    theme?.warningColor,\n  ]);\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useMemo","useState","useSsr","black","blue500","greenAccent700","orangeAccent200","orangeAccent400","red500","backgroundColorVar","errorColorVar","onErrorColorVar","onPrimaryColorVar","onSecondaryColorVar","onSuccessColorVar","onWarningColorVar","primaryColorVar","secondaryColorVar","successColorVar","textDisabledColorVar","textHintColorVar","textPrimaryColorVar","textSecondaryColorVar","warningColorVar","useColorScheme","DEFAULT_THEME_COLORS","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","DEFAULT_LIGHT_THEME","backgroundColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor","DEFAULT_DARK_THEME","context","undefined","displayName","Provider","getDerivedTheme","container","document","documentElement","rootStyles","window","getComputedStyle","getPropertyValue","useTheme","allowUndefined","theme","Error","ThemeProvider","props","children","ssr","currentColor","colorScheme","derivedTheme","setDerivedTheme","derived","frame","requestAnimationFrame","cancelAnimationFrame","value"],"mappings":"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"}

package/dist/theme/_theme.scss

@@ -16,10 +16,6 @@
 // Setting this value to `system` will default to a light theme unless the user
 // has set their preferred color scheme to dark on their OS.
 //
-// If this value is changed from the default `light` value, the
-// `colorSchemeMode` on the `CoreProviders` component should be updated to
-// match the new value.
-//
 // @type string
 $color-scheme: light !default;
 

package/dist/theme/isColorScheme.d.ts

@@ -1,16 +1,16 @@
-import { type ColorSchemeMode, type ColorScheme } from "./types.js";
+import { type ColorScheme, type LightDarkColorScheme } from "./types.js";
 /**
- * A type assertion helper to check if a value is a valid {@link ColorScheme}
+ * A type assertion helper to check if a value is a valid {@link LightDarkColorScheme}
  * when it is pulled from unknown sources (like local storage).
  *
  * @since 6.0.0
  */
-export declare function isColorScheme(value: unknown): value is ColorScheme;
+export declare function isLightDarkColorScheme(value: unknown): value is LightDarkColorScheme;
 /**
  * A type assertion helper to check if a value is a valid
- * {@link ColorSchemeMode} when it is pulled from unknown sources (like local
+ * {@link ColorScheme} when it is pulled from unknown sources (like local
  * storage).
  *
  * @since 6.0.0
  */
-export declare function isColorSchemeMode(value: unknown): value is ColorSchemeMode;
+export declare function isColorScheme(value: unknown): value is ColorScheme;

package/dist/theme/isColorScheme.js

@@ -1,19 +1,19 @@
 /**
- * A type assertion helper to check if a value is a valid {@link ColorScheme}
+ * A type assertion helper to check if a value is a valid {@link LightDarkColorScheme}
  * when it is pulled from unknown sources (like local storage).
  *
  * @since 6.0.0
- */ export function isColorScheme(value) {
+ */ export function isLightDarkColorScheme(value) {
     return value === "light" || value === "dark";
 }
 /**
  * A type assertion helper to check if a value is a valid
- * {@link ColorSchemeMode} when it is pulled from unknown sources (like local
+ * {@link ColorScheme} when it is pulled from unknown sources (like local
  * storage).
  *
  * @since 6.0.0
- */ export function isColorSchemeMode(value) {
-    return isColorScheme(value) || value === "system";
+ */ export function isColorScheme(value) {
+    return isLightDarkColorScheme(value) || value === "system";
 }
 
 //# sourceMappingURL=isColorScheme.js.map

package/dist/theme/isColorScheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/isColorScheme.ts"],"sourcesContent":["import { type ColorSchemeMode, type ColorScheme } from \"./types.js\";\n\n/**\n * A type assertion helper to check if a value is a valid {@link ColorScheme}\n * when it is pulled from unknown sources (like local storage).\n *\n * @since 6.0.0\n */\nexport function isColorScheme(value: unknown): value is ColorScheme {\n  return value === \"light\" || value === \"dark\";\n}\n\n/**\n * A type assertion helper to check if a value is a valid\n * {@link ColorSchemeMode} when it is pulled from unknown sources (like local\n * storage).\n *\n * @since 6.0.0\n */\nexport function isColorSchemeMode(value: unknown): value is ColorSchemeMode {\n  return isColorScheme(value) || value === \"system\";\n}\n"],"names":["isColorScheme","value","isColorSchemeMode"],"mappings":"AAEA;;;;;CAKC,GACD,OAAO,SAASA,cAAcC,KAAc;IAC1C,OAAOA,UAAU,WAAWA,UAAU;AACxC;AAEA;;;;;;CAMC,GACD,OAAO,SAASC,kBAAkBD,KAAc;IAC9C,OAAOD,cAAcC,UAAUA,UAAU;AAC3C"}
+{"version":3,"sources":["../../src/theme/isColorScheme.ts"],"sourcesContent":["import { type ColorScheme, type LightDarkColorScheme } from \"./types.js\";\n\n/**\n * A type assertion helper to check if a value is a valid {@link LightDarkColorScheme}\n * when it is pulled from unknown sources (like local storage).\n *\n * @since 6.0.0\n */\nexport function isLightDarkColorScheme(\n  value: unknown\n): value is LightDarkColorScheme {\n  return value === \"light\" || value === \"dark\";\n}\n\n/**\n * A type assertion helper to check if a value is a valid\n * {@link ColorScheme} when it is pulled from unknown sources (like local\n * storage).\n *\n * @since 6.0.0\n */\nexport function isColorScheme(value: unknown): value is ColorScheme {\n  return isLightDarkColorScheme(value) || value === \"system\";\n}\n"],"names":["isLightDarkColorScheme","value","isColorScheme"],"mappings":"AAEA;;;;;CAKC,GACD,OAAO,SAASA,uBACdC,KAAc;IAEd,OAAOA,UAAU,WAAWA,UAAU;AACxC;AAEA;;;;;;CAMC,GACD,OAAO,SAASC,cAAcD,KAAc;IAC1C,OAAOD,uBAAuBC,UAAUA,UAAU;AACpD"}

package/dist/theme/types.d.ts

@@ -51,36 +51,24 @@ export type CSSVariablesProperties<Name extends CSSVariableName = DefinedCSSVari
  */
 export type ReadonlyCSSVariableList<Name extends CSSVariableName = DefinedCSSVariableName> = readonly Readonly<CSSVariable<Name>>[];
 /** @since 6.0.0 */
-export type ColorScheme = "light" | "dark";
+export type LightDarkColorScheme = "light" | "dark";
 /** @since 6.0.0 */
-export type ColorSchemeMode = ColorScheme | "system";
+export type ColorScheme = LightDarkColorScheme | "system";
 /**
  * @since 6.0.0
  */
-export interface ColorSchemeModeBehavior {
+export interface ColorSchemeState {
     /**
-     * The current color scheme mode that is being used by your app that should
-     * default to the `$color-scheme` SCSS variable. If the
-     * {@link setColorSchemeMode} is called, this will update to that new value.
-     *
-     * TODO: Figure out how to document this
-     *
-     * - `colorScheme` - only `light` or `dark` -- only useful when the `colorSchemeMode` is set to `system`
-     * - `colorSchemeMode` - current **user** defined color scheme behavior? should default to `$color-scheme`, but will change based on `setColorSchemeMode`
+     * The defined color scheme for the app that should match the `$color-scheme`
+     * SCSS variable.
      */
-    colorSchemeMode: ColorSchemeMode;
-    /**
-     * A function to update the color scheme.
-     *
-     * @see {@link useColorScheme} for an example usage
-     */
-    setColorSchemeMode: UseStateSetter<ColorSchemeMode>;
+    colorScheme: ColorScheme;
+    setColorScheme: UseStateSetter<ColorScheme>;
 }
 /** @since 6.0.0 */
-export interface ColorSchemeContext extends ColorSchemeModeBehavior {
+export interface ColorSchemeContext extends ColorSchemeState {
     /**
-     * The current color scheme that is being used. This is only useful when the
-     * {@link colorSchemeMode} is set to `"system"`.
+     * When the {@link colorScheme} is set to `"system"`, this will reflect
      */
-    colorScheme: ColorScheme;
+    currentColor: LightDarkColorScheme;
 }

package/dist/theme/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/types.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\nimport { type UseStateSetter } from \"../types.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CSSVariableName = `--${string}`;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type DefinedCustomProperty<Property = keyof CSSProperties> =\n  Property extends CSSVariableName ? Property : never;\n\n/**\n * This is a utility type that can be used to auto-complete and type-check css\n * variables that are defined through module augmentation.\n *\n * ```ts\n * declare module \"react\" {\n *   interface CSSProperties {\n *     \"--custom-property\"?: number | string;\n *   }\n * }\n *\n * // will no longer throw a type error. also the `--custom-property` will\n * // appear as an auto-complete item\n * const style: CSSProperties = {\n *   \"--custom-property\": \"red\",\n * };\n *\n * // `DefinedCSSVariableName` will also include `--custom-property` with all\n * // defined react-md custom properties\n * ```\n *\n * @since 6.0.0\n */\nexport type DefinedCSSVariableName = DefinedCustomProperty;\n\n/**\n * @since 6.0.0\n */\nexport interface CSSVariable<\n  Name extends CSSVariableName = DefinedCSSVariableName,\n> {\n  name: Name;\n  value: string | number;\n}\n\n/**\n * @since 6.0.0\n */\nexport type CSSVariablesProperties<\n  Name extends CSSVariableName = DefinedCSSVariableName,\n> = {\n  [key in Name]?: string | number;\n};\n\n/**\n * @since 6.0.0\n */\nexport type ReadonlyCSSVariableList<\n  Name extends CSSVariableName = DefinedCSSVariableName,\n> = readonly Readonly<CSSVariable<Name>>[];\n\n/** @since 6.0.0 */\nexport type ColorScheme = \"light\" | \"dark\";\n\n/** @since 6.0.0 */\nexport type ColorSchemeMode = ColorScheme | \"system\";\n\n/**\n * @since 6.0.0\n */\nexport interface ColorSchemeModeBehavior {\n  /**\n   * The current color scheme mode that is being used by your app that should\n   * default to the `$color-scheme` SCSS variable. If the\n   * {@link setColorSchemeMode} is called, this will update to that new value.\n   *\n   * TODO: Figure out how to document this\n   *\n   * - `colorScheme` - only `light` or `dark` -- only useful when the `colorSchemeMode` is set to `system`\n   * - `colorSchemeMode` - current **user** defined color scheme behavior? should default to `$color-scheme`, but will change based on `setColorSchemeMode`\n   */\n  colorSchemeMode: ColorSchemeMode;\n\n  /**\n   * A function to update the color scheme.\n   *\n   * @see {@link useColorScheme} for an example usage\n   */\n  setColorSchemeMode: UseStateSetter<ColorSchemeMode>;\n}\n\n/** @since 6.0.0 */\nexport interface ColorSchemeContext extends ColorSchemeModeBehavior {\n  /**\n   * The current color scheme that is being used. This is only useful when the\n   * {@link colorSchemeMode} is set to `\"system\"`.\n   */\n  colorScheme: ColorScheme;\n}\n"],"names":[],"mappings":"AAgGA,iBAAiB,GACjB,WAMC"}
+{"version":3,"sources":["../../src/theme/types.ts"],"sourcesContent":["import { type CSSProperties } from \"react\";\n\nimport { type UseStateSetter } from \"../types.js\";\n\n/**\n * @since 6.0.0\n */\nexport type CSSVariableName = `--${string}`;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport type DefinedCustomProperty<Property = keyof CSSProperties> =\n  Property extends CSSVariableName ? Property : never;\n\n/**\n * This is a utility type that can be used to auto-complete and type-check css\n * variables that are defined through module augmentation.\n *\n * ```ts\n * declare module \"react\" {\n *   interface CSSProperties {\n *     \"--custom-property\"?: number | string;\n *   }\n * }\n *\n * // will no longer throw a type error. also the `--custom-property` will\n * // appear as an auto-complete item\n * const style: CSSProperties = {\n *   \"--custom-property\": \"red\",\n * };\n *\n * // `DefinedCSSVariableName` will also include `--custom-property` with all\n * // defined react-md custom properties\n * ```\n *\n * @since 6.0.0\n */\nexport type DefinedCSSVariableName = DefinedCustomProperty;\n\n/**\n * @since 6.0.0\n */\nexport interface CSSVariable<\n  Name extends CSSVariableName = DefinedCSSVariableName,\n> {\n  name: Name;\n  value: string | number;\n}\n\n/**\n * @since 6.0.0\n */\nexport type CSSVariablesProperties<\n  Name extends CSSVariableName = DefinedCSSVariableName,\n> = {\n  [key in Name]?: string | number;\n};\n\n/**\n * @since 6.0.0\n */\nexport type ReadonlyCSSVariableList<\n  Name extends CSSVariableName = DefinedCSSVariableName,\n> = readonly Readonly<CSSVariable<Name>>[];\n\n/** @since 6.0.0 */\nexport type LightDarkColorScheme = \"light\" | \"dark\";\n\n/** @since 6.0.0 */\nexport type ColorScheme = LightDarkColorScheme | \"system\";\n\n/**\n * @since 6.0.0\n */\nexport interface ColorSchemeState {\n  /**\n   * The defined color scheme for the app that should match the `$color-scheme`\n   * SCSS variable.\n   */\n  colorScheme: ColorScheme;\n  setColorScheme: UseStateSetter<ColorScheme>;\n}\n\n/** @since 6.0.0 */\nexport interface ColorSchemeContext extends ColorSchemeState {\n  /**\n   * When the {@link colorScheme} is set to `\"system\"`, this will reflect\n   */\n  currentColor: LightDarkColorScheme;\n}\n"],"names":[],"mappings":"AAqFA,iBAAiB,GACjB,WAKC"}

package/dist/theme/useCSSVariables.d.ts

@@ -3,12 +3,9 @@ import { type CSSVariableName, type CSSVariablesProperties, type ReadonlyCSSVari
 /**
  * @example Applying Variables the root html element
  * ```ts
- * import {
- *   contrastColor,
- *   pinkAccent200,
- *   purple500,
- *   useCSSVariables,
- *  } from "@react-md/core";
+ * import { purple500 } from "@react-md/core/theme/colors";
+ * import { useCSSVariables } from "@react-md/core/theme/useCSSVariables";
+ * import { contrastColor } from "@react-md/core/theme/utils";
  * import { useMemo } from "react";
  *
  * function Example(): null {
@@ -37,15 +34,11 @@ export declare function useCSSVariables<Name extends CSSVariableName>(variables:
 /**
  * @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";
+ * import { purple500 } from "@react-md/core/theme/colors";
+ * import { type ReadonlyCSSVariableList } from "@react-md/core/theme/types";
+ * import { useCSSVariables } from "@react-md/core/theme/useCSSVariables";
+ * 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>(() => {

package/dist/theme/useCSSVariables.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/useCSSVariables.ts"],"sourcesContent":["\"use client\";\nimport { type RefObject, useEffect, useMemo } from \"react\";\nimport {\n  type CSSVariableName,\n  type CSSVariablesProperties,\n  type ReadonlyCSSVariableList,\n} from \"./types.js\";\n\n/**\n * @example Applying Variables the root html element\n * ```ts\n * import {\n *   contrastColor,\n *   pinkAccent200,\n *   purple500,\n *   useCSSVariables,\n *  } from \"@react-md/core\";\n * import { useMemo } from \"react\";\n *\n * function Example(): null {\n *   // Note: You should use `useMemo` so that the custom variables are not\n *   // added and removed during each render.\n *   useCSSVariables(useMemo(() => {\n *     return [\n *       {\n *         name: \"--rmd-primary-color\",\n *         value: purple500,\n *       },\n *       {\n *         name: \"--rmd-on-primary-color\",\n *         value: contrastColor(purple500),\n *       },\n *     ];\n *   }, []));\n *\n *   return null;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useCSSVariables<Name extends CSSVariableName>(\n  variables: ReadonlyCSSVariableList<Name>,\n  rootNode?: RefObject<HTMLElement> | HTMLElement\n): void;\n/**\n * @example Applying variables through inline styles\n * ```tsx\n * import {\n *   contrastColor,\n *   ReadonlyCSSVariableList,\n *   pinkAccent200,\n *   purple500,\n *   useCSSVariables,\n *  } from \"@react-md/core\";\n * import { useMemo } from \"react\";\n * import type { ReactElement, ReactNode } from \"react\";\n *\n * function Example({ children }: { children: ReactNode }): ReactElement {\n *   const customVariables = useMemo<ReadonlyCSSVariableList>(() => {\n *     return [\n *       {\n *         name: \"--rmd-primary-color\",\n *         value: purple500,\n *       },\n *       {\n *         name: \"--rmd-on-primary-color\",\n *         value: contrastColor(purple500),\n *       },\n *     ];\n *   }, []);\n *   const style = useCSSVariables(customVariables, true);\n *\n *   return <div style={style}>{children}</div>;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useCSSVariables<Name extends CSSVariableName>(\n  variables: ReadonlyCSSVariableList<Name>,\n  inlineStyle: true\n): CSSVariablesProperties<Name>;\n/**\n * @since 6.0.0\n */\nexport function useCSSVariables<Name extends CSSVariableName>(\n  variables: ReadonlyCSSVariableList<Name>,\n  rootNodeOrInlineStyle?: RefObject<HTMLElement> | HTMLElement | boolean\n): CSSVariablesProperties<Name> | undefined {\n  useEffect(() => {\n    if (rootNodeOrInlineStyle === true || !variables.length) {\n      return;\n    }\n\n    // use an iife so that hoisting doesn't cause a possible \"null\" issue for\n    // the root\n    const root = (() => {\n      if (!rootNodeOrInlineStyle) {\n        return document.documentElement;\n      }\n\n      if (\"current\" in rootNodeOrInlineStyle) {\n        return rootNodeOrInlineStyle.current;\n      }\n\n      return rootNodeOrInlineStyle;\n    })();\n\n    if (!root) {\n      return;\n    }\n\n    // const root = document.documentElement;\n    variables.forEach(({ name, value }) => {\n      if (\n        process.env.NODE_ENV !== \"production\" &&\n        root.style.getPropertyValue(name)\n      ) {\n        const currentValue = root.style.getPropertyValue(name);\n        const overwritten =\n          currentValue !== value\n            ? ` and will be overwritten to \"${value}\"`\n            : \"\";\n        // eslint-disable-next-line no-console\n        console.warn(\n          `The \"${name}\" css variable has already been set to \"${currentValue}\" ` +\n            `on the root element${overwritten}. There might be conflicting overrides.`\n        );\n      }\n\n      root.style.setProperty(name, `${value}`);\n    });\n    return () => {\n      variables.forEach(({ name }) => {\n        root.style.removeProperty(name);\n      });\n    };\n  }, [variables, rootNodeOrInlineStyle]);\n\n  return useMemo(() => {\n    if (rootNodeOrInlineStyle !== true) {\n      return;\n    }\n\n    return variables.reduce<CSSVariablesProperties<Name>>(\n      (style, { name, value }) => {\n        style[name] = value;\n        return style;\n      },\n      {}\n    );\n  }, [rootNodeOrInlineStyle, variables]);\n}\n"],"names":["useEffect","useMemo","useCSSVariables","variables","rootNodeOrInlineStyle","length","root","document","documentElement","current","forEach","name","value","process","env","NODE_ENV","style","getPropertyValue","currentValue","overwritten","console","warn","setProperty","removeProperty","reduce"],"mappings":"AAAA;AACA,SAAyBA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AAkF3D;;CAEC,GACD,OAAO,SAASC,gBACdC,SAAwC,EACxCC,qBAAsE;IAEtEJ,UAAU;QACR,IAAII,0BAA0B,QAAQ,CAACD,UAAUE,MAAM,EAAE;YACvD;QACF;QAEA,yEAAyE;QACzE,WAAW;QACX,MAAMC,OAAO,AAAC,CAAA;YACZ,IAAI,CAACF,uBAAuB;gBAC1B,OAAOG,SAASC,eAAe;YACjC;YAEA,IAAI,aAAaJ,uBAAuB;gBACtC,OAAOA,sBAAsBK,OAAO;YACtC;YAEA,OAAOL;QACT,CAAA;QAEA,IAAI,CAACE,MAAM;YACT;QACF;QAEA,yCAAyC;QACzCH,UAAUO,OAAO,CAAC,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAE;YAChC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACzBT,KAAKU,KAAK,CAACC,gBAAgB,CAACN,OAC5B;gBACA,MAAMO,eAAeZ,KAAKU,KAAK,CAACC,gBAAgB,CAACN;gBACjD,MAAMQ,cACJD,iBAAiBN,QACb,CAAC,6BAA6B,EAAEA,MAAM,CAAC,CAAC,GACxC;gBACN,sCAAsC;gBACtCQ,QAAQC,IAAI,CACV,CAAC,KAAK,EAAEV,KAAK,wCAAwC,EAAEO,aAAa,EAAE,CAAC,GACrE,CAAC,mBAAmB,EAAEC,YAAY,uCAAuC,CAAC;YAEhF;YAEAb,KAAKU,KAAK,CAACM,WAAW,CAACX,MAAM,GAAGC,OAAO;QACzC;QACA,OAAO;YACLT,UAAUO,OAAO,CAAC,CAAC,EAAEC,IAAI,EAAE;gBACzBL,KAAKU,KAAK,CAACO,cAAc,CAACZ;YAC5B;QACF;IACF,GAAG;QAACR;QAAWC;KAAsB;IAErC,OAAOH,QAAQ;QACb,IAAIG,0BAA0B,MAAM;YAClC;QACF;QAEA,OAAOD,UAAUqB,MAAM,CACrB,CAACR,OAAO,EAAEL,IAAI,EAAEC,KAAK,EAAE;YACrBI,KAAK,CAACL,KAAK,GAAGC;YACd,OAAOI;QACT,GACA,CAAC;IAEL,GAAG;QAACZ;QAAuBD;KAAU;AACvC"}
+{"version":3,"sources":["../../src/theme/useCSSVariables.ts"],"sourcesContent":["\"use client\";\n\nimport { type RefObject, useEffect, useMemo } from \"react\";\n\nimport {\n  type CSSVariableName,\n  type CSSVariablesProperties,\n  type ReadonlyCSSVariableList,\n} from \"./types.js\";\n\n/**\n * @example Applying Variables the root html element\n * ```ts\n * import { purple500 } from \"@react-md/core/theme/colors\";\n * import { useCSSVariables } from \"@react-md/core/theme/useCSSVariables\";\n * import { contrastColor } from \"@react-md/core/theme/utils\";\n * import { useMemo } from \"react\";\n *\n * function Example(): null {\n *   // Note: You should use `useMemo` so that the custom variables are not\n *   // added and removed during each render.\n *   useCSSVariables(useMemo(() => {\n *     return [\n *       {\n *         name: \"--rmd-primary-color\",\n *         value: purple500,\n *       },\n *       {\n *         name: \"--rmd-on-primary-color\",\n *         value: contrastColor(purple500),\n *       },\n *     ];\n *   }, []));\n *\n *   return null;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useCSSVariables<Name extends CSSVariableName>(\n  variables: ReadonlyCSSVariableList<Name>,\n  rootNode?: RefObject<HTMLElement> | HTMLElement\n): void;\n/**\n * @example Applying variables through inline styles\n * ```tsx\n * import { purple500 } from \"@react-md/core/theme/colors\";\n * import { type ReadonlyCSSVariableList } from \"@react-md/core/theme/types\";\n * import { useCSSVariables } from \"@react-md/core/theme/useCSSVariables\";\n * import { contrastColor } from \"@react-md/core/theme/utils\";\n * import { type ReactElement, type ReactNode, useMemo } from \"react\";\n *\n * function Example({ children }: { children: ReactNode }): ReactElement {\n *   const customVariables = useMemo<ReadonlyCSSVariableList>(() => {\n *     return [\n *       {\n *         name: \"--rmd-primary-color\",\n *         value: purple500,\n *       },\n *       {\n *         name: \"--rmd-on-primary-color\",\n *         value: contrastColor(purple500),\n *       },\n *     ];\n *   }, []);\n *   const style = useCSSVariables(customVariables, true);\n *\n *   return <div style={style}>{children}</div>;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useCSSVariables<Name extends CSSVariableName>(\n  variables: ReadonlyCSSVariableList<Name>,\n  inlineStyle: true\n): CSSVariablesProperties<Name>;\n/**\n * @since 6.0.0\n */\nexport function useCSSVariables<Name extends CSSVariableName>(\n  variables: ReadonlyCSSVariableList<Name>,\n  rootNodeOrInlineStyle?: RefObject<HTMLElement> | HTMLElement | boolean\n): CSSVariablesProperties<Name> | undefined {\n  useEffect(() => {\n    if (rootNodeOrInlineStyle === true || !variables.length) {\n      return;\n    }\n\n    // use an iife so that hoisting doesn't cause a possible \"null\" issue for\n    // the root\n    const root = (() => {\n      if (!rootNodeOrInlineStyle) {\n        return document.documentElement;\n      }\n\n      if (\"current\" in rootNodeOrInlineStyle) {\n        return rootNodeOrInlineStyle.current;\n      }\n\n      return rootNodeOrInlineStyle;\n    })();\n\n    if (!root) {\n      return;\n    }\n\n    // const root = document.documentElement;\n    variables.forEach(({ name, value }) => {\n      if (\n        process.env.NODE_ENV !== \"production\" &&\n        root.style.getPropertyValue(name)\n      ) {\n        const currentValue = root.style.getPropertyValue(name);\n        const overwritten =\n          currentValue !== value\n            ? ` and will be overwritten to \"${value}\"`\n            : \"\";\n        // eslint-disable-next-line no-console\n        console.warn(\n          `The \"${name}\" css variable has already been set to \"${currentValue}\" ` +\n            `on the root element${overwritten}. There might be conflicting overrides.`\n        );\n      }\n\n      root.style.setProperty(name, `${value}`);\n    });\n    return () => {\n      variables.forEach(({ name }) => {\n        root.style.removeProperty(name);\n      });\n    };\n  }, [variables, rootNodeOrInlineStyle]);\n\n  return useMemo(() => {\n    if (rootNodeOrInlineStyle !== true) {\n      return;\n    }\n\n    return variables.reduce<CSSVariablesProperties<Name>>(\n      (style, { name, value }) => {\n        style[name] = value;\n        return style;\n      },\n      {}\n    );\n  }, [rootNodeOrInlineStyle, variables]);\n}\n"],"names":["useEffect","useMemo","useCSSVariables","variables","rootNodeOrInlineStyle","length","root","document","documentElement","current","forEach","name","value","process","env","NODE_ENV","style","getPropertyValue","currentValue","overwritten","console","warn","setProperty","removeProperty","reduce"],"mappings":"AAAA;AAEA,SAAyBA,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AA4E3D;;CAEC,GACD,OAAO,SAASC,gBACdC,SAAwC,EACxCC,qBAAsE;IAEtEJ,UAAU;QACR,IAAII,0BAA0B,QAAQ,CAACD,UAAUE,MAAM,EAAE;YACvD;QACF;QAEA,yEAAyE;QACzE,WAAW;QACX,MAAMC,OAAO,AAAC,CAAA;YACZ,IAAI,CAACF,uBAAuB;gBAC1B,OAAOG,SAASC,eAAe;YACjC;YAEA,IAAI,aAAaJ,uBAAuB;gBACtC,OAAOA,sBAAsBK,OAAO;YACtC;YAEA,OAAOL;QACT,CAAA;QAEA,IAAI,CAACE,MAAM;YACT;QACF;QAEA,yCAAyC;QACzCH,UAAUO,OAAO,CAAC,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAE;YAChC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACzBT,KAAKU,KAAK,CAACC,gBAAgB,CAACN,OAC5B;gBACA,MAAMO,eAAeZ,KAAKU,KAAK,CAACC,gBAAgB,CAACN;gBACjD,MAAMQ,cACJD,iBAAiBN,QACb,CAAC,6BAA6B,EAAEA,MAAM,CAAC,CAAC,GACxC;gBACN,sCAAsC;gBACtCQ,QAAQC,IAAI,CACV,CAAC,KAAK,EAAEV,KAAK,wCAAwC,EAAEO,aAAa,EAAE,CAAC,GACrE,CAAC,mBAAmB,EAAEC,YAAY,uCAAuC,CAAC;YAEhF;YAEAb,KAAKU,KAAK,CAACM,WAAW,CAACX,MAAM,GAAGC,OAAO;QACzC;QACA,OAAO;YACLT,UAAUO,OAAO,CAAC,CAAC,EAAEC,IAAI,EAAE;gBACzBL,KAAKU,KAAK,CAACO,cAAc,CAACZ;YAC5B;QACF;IACF,GAAG;QAACR;QAAWC;KAAsB;IAErC,OAAOH,QAAQ;QACb,IAAIG,0BAA0B,MAAM;YAClC;QACF;QAEA,OAAOD,UAAUqB,MAAM,CACrB,CAACR,OAAO,EAAEL,IAAI,EAAEC,KAAK,EAAE;YACrBI,KAAK,CAACL,KAAK,GAAGC;YACd,OAAOI;QACT,GACA,CAAC;IAEL,GAAG;QAACZ;QAAuBD;KAAU;AACvC"}

package/dist/theme/useColorScheme.d.ts

@@ -3,45 +3,47 @@ export declare const ColorSchemeProvider: import("react").Provider<ColorSchemeCo
 /**
  * @example Lazy Load Configurable Themes
  * ```tsx
- * import type { ChangeEvent, ReactElement } from "react";
- * import { lazy } from "react";
- * import { createRoot } from "react-doc/client";
- * import { Checkbox, ColorSchemeProvider, useColorScheme } from "@react-md/core";
+ * import { Checkbox } from "@react-md/core/form/Checkbox";
+ * import { ColorSchemeProvider, useColorScheme } from "@react-md/core/theme/useColorScheme";
+ * import { type ChangeEvent, lazy, type ReactElement } from "react";
+ * import { createRoot } from "react-dom/client";
  *
- * const DarkTheme = lazy(() => import("./DarkTheme"));
- * const SystemTheme = lazy(() => import("./SystemTheme"));
+ * const DarkTheme = lazy(() => import("./DarkTheme.jsx"));
+ * const SystemTheme = lazy(() => import("./SystemTheme.jsx"));
  *
  * function App(): ReactElement {
- *   const { colorScheme, colorSchemeMode, setColorSchemeMode } =
+ *   const { currentColor, colorScheme, setColorScheme } =
  *     useColorScheme();
  *
  *   const onChange = (event: ChangeEvent<HTMLInputElement>): void => {
  *     const { value } = event.currentTarget;
  *     if (value === "light" || value === "dark" || value === "system") {
- *       setColorSchemeMode(value);
+ *       setColorScheme(value);
  *     }
  *   };
  *
  *   return (
  *     <>
- *       {colorSchemeMode === "dark" && <DarkTheme />}
- *       {colorSchemeMode === "system" && <SystemTheme />}
+ *       <NullSuspense>
+ *         {colorScheme === "dark" && <DarkTheme />}
+ *         {colorScheme === "system" && <SystemTheme />}
+ *       </NullSuspense>
  *       <Checkbox
  *         label="Light"
  *         value="light"
- *         checked={colorSchemeMode === "light"}
+ *         checked={colorScheme === "light"}
  *         onChange={onChange}
  *       />
  *       <Checkbox
  *         label="Dark"
  *         value="dark"
- *         checked={colorSchemeMode === "dark"}
+ *         checked={colorScheme === "dark"}
  *         onChange={onChange}
  *       />
  *       <Checkbox
  *         label="System"
  *         value="system"
- *         checked={colorSchemeMode === "system"}
+ *         checked={colorScheme === "system"}
  *         onChange={onChange}
  *       />
  *     </>