@ngrok/mantle 0.0.2 → 0.0.3

package/dist/dts/theme-provider/index.d.ts

@@ -37,9 +37,9 @@ declare function useTheme(): ThemeProviderState;
  * determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.
  * @private
  */
-export declare function determineThemeFromMediaQuery({ prefersDarkMode, prefersContrastMore, }: {
+export declare function determineThemeFromMediaQuery({ prefersDarkMode, prefersHighContrast, }: {
     prefersDarkMode: boolean;
-    prefersContrastMore: boolean;
+    prefersHighContrast: boolean;
 }): "dark" | "light" | "light-high-contrast" | "dark-high-contrast";
 /**
  * PreventWrongThemeFlash is a React component that prevents the wrong theme from flashing on initial page load.

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 /**
- * @ngrok/mantle v0.0.2
+ * @ngrok/mantle v0.0.3
  *
  * Copyright (c) ngrok.
  *

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * @ngrok/mantle v0.0.2
+ * @ngrok/mantle v0.0.3
  *
  * Copyright (c) ngrok.
  *
@@ -1193,15 +1193,19 @@ var isBrowser = function isBrowser() {
   return typeof window !== "undefined";
 };
 /**
- * determines the initial theme based on the default theme and the value stored in localStorage by the storageKey
+ * Gets the stored theme from localStorage or returns the default theme if no theme is stored.
  */
-function determineInitialTheme(defaultTheme, storageKey) {
-  var fallback = defaultTheme != null ? defaultTheme : "system";
+function getStoredTheme(storageKey, defaultTheme) {
+  var _defaultTheme;
+  if (defaultTheme === void 0) {
+    defaultTheme = "system";
+  }
+  var fallbackTheme = (_defaultTheme = defaultTheme) != null ? _defaultTheme : "system";
   if (isBrowser()) {
-    var _window$localStorage$;
-    return (_window$localStorage$ = window.localStorage.getItem(storageKey)) != null ? _window$localStorage$ : fallback;
+    var storedTheme = window.localStorage.getItem(storageKey);
+    return isTheme(storedTheme) ? storedTheme : fallbackTheme;
   }
-  return fallback;
+  return fallbackTheme;
 }
 /**
  * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.
@@ -1213,26 +1217,43 @@ function ThemeProvider(_ref) {
     _ref$storageKey = _ref.storageKey,
     storageKey = _ref$storageKey === void 0 ? DEFAULT_STORAGE_KEY : _ref$storageKey;
   var _useState = useState(function () {
-      var initialTheme = determineInitialTheme(defaultTheme, storageKey);
+      var initialTheme = getStoredTheme(storageKey, defaultTheme);
       applyTheme(initialTheme);
       return initialTheme;
     }),
     theme = _useState[0],
     setTheme = _useState[1];
   useEffect(function () {
-    var storedTheme = window.localStorage.getItem(storageKey);
-    if (isTheme(storedTheme)) {
-      setTheme(storedTheme);
-      applyTheme(storedTheme);
-    }
-  }, [storageKey]);
+    var storedTheme = getStoredTheme(storageKey, defaultTheme);
+    setTheme(storedTheme);
+    applyTheme(storedTheme);
+  }, [defaultTheme, storageKey]);
+  useEffect(function () {
+    var prefersDarkMql = window.matchMedia(prefersDarkModeMediaQuery);
+    var prefersHighContrastMql = window.matchMedia(prefersHighContrastMediaQuery);
+    var onChange = function onChange() {
+      var storedTheme = getStoredTheme(storageKey, defaultTheme);
+      // If the stored theme is not "system", then the user has explicitly set a theme and we should not
+      // automatically change the theme when the user's system preferences change.
+      if (storedTheme !== "system") {
+        return;
+      }
+      applyTheme("system");
+    };
+    prefersDarkMql.addEventListener("change", onChange);
+    prefersHighContrastMql.addEventListener("change", onChange);
+    return function () {
+      prefersDarkMql.removeEventListener("change", onChange);
+      prefersHighContrastMql.removeEventListener("change", onChange);
+    };
+  }, [defaultTheme, storageKey]);
   var value = useMemo(function () {
     return [theme, function (theme) {
       window.localStorage.setItem(storageKey, theme);
       setTheme(theme);
       applyTheme(theme);
     }];
-  }, [theme, storageKey]);
+  }, [storageKey, theme]);
   return jsx(ThemeProviderContext.Provider, {
     value: value,
     children: children
@@ -1259,10 +1280,10 @@ function applyTheme(theme) {
   var htmlElement = window.document.documentElement;
   (_htmlElement$classLis = htmlElement.classList).remove.apply(_htmlElement$classLis, themes);
   var prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;
-  var prefersContrastMore = window.matchMedia(prefersHighContrastMediaQuery).matches;
+  var prefersHighContrast = window.matchMedia(prefersHighContrastMediaQuery).matches;
   var newTheme = theme === "system" ? determineThemeFromMediaQuery({
     prefersDarkMode: prefersDarkMode,
-    prefersContrastMore: prefersContrastMore
+    prefersHighContrast: prefersHighContrast
   }) : theme;
   htmlElement.classList.add(newTheme);
   htmlElement.dataset.theme = newTheme;
@@ -1273,8 +1294,8 @@ function applyTheme(theme) {
  */
 function determineThemeFromMediaQuery(_ref2) {
   var prefersDarkMode = _ref2.prefersDarkMode,
-    prefersContrastMore = _ref2.prefersContrastMore;
-  if (prefersContrastMore) {
+    prefersHighContrast = _ref2.prefersHighContrast;
+  if (prefersHighContrast) {
     return prefersDarkMode ? "dark-high-contrast" : "light-high-contrast";
   }
   return prefersDarkMode ? "dark" : "light";
@@ -1290,7 +1311,7 @@ var PreventWrongThemeFlash = function PreventWrongThemeFlash(_ref3) {
     storageKey = _ref3$storageKey === void 0 ? DEFAULT_STORAGE_KEY : _ref3$storageKey;
   return jsx("script", {
     dangerouslySetInnerHTML: {
-      __html: ("\n(function() {\n\tconst themes = " + JSON.stringify(themes) + ";\n\tconst isTheme = (value) => typeof value === \"string\" && themes.includes(value);\n\tconst fallbackTheme = \"" + defaultTheme + "\" ?? \"system\";\n\tconst maybeStoredTheme = window.localStorage.getItem(\"" + storageKey + "\");\n\tconst themePreference = isTheme(maybeStoredTheme) ? maybeStoredTheme : fallbackTheme;\n\tconst prefersDarkMode = window.matchMedia(\"" + prefersDarkModeMediaQuery + "\").matches;\n\tconst prefersContrastMore = window.matchMedia(\"" + prefersHighContrastMediaQuery + "\").matches;\n\tlet initialTheme = themePreference;\n\tif (initialTheme === \"system\") {\n\t\tif (prefersContrastMore) {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t\t} else {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark\" : \"light\";\n\t\t}\n\t}\n\tconst htmlElement = document.documentElement;\n\thtmlElement.classList.remove(...themes);\n\thtmlElement.classList.add(initialTheme);\n\thtmlElement.dataset.theme = initialTheme;\n})();\n").trim()
+      __html: ("\n(function() {\n\tconst themes = " + JSON.stringify(themes) + ";\n\tconst isTheme = (value) => typeof value === \"string\" && themes.includes(value);\n\tconst fallbackTheme = \"" + defaultTheme + "\" ?? \"system\";\n\tconst maybeStoredTheme = window.localStorage.getItem(\"" + storageKey + "\");\n\tconst hasStoredTheme = isTheme(maybeStoredTheme);\n\tif (!hasStoredTheme) {\n\t\twindow.localStorage.setItem(\"" + storageKey + "\", fallbackTheme);\n\t}\n\tconst themePreference = hasStoredTheme ? maybeStoredTheme : fallbackTheme;\n\tconst prefersDarkMode = window.matchMedia(\"" + prefersDarkModeMediaQuery + "\").matches;\n\tconst prefersHighContrast = window.matchMedia(\"" + prefersHighContrastMediaQuery + "\").matches;\n\tlet initialTheme = themePreference;\n\tif (initialTheme === \"system\") {\n\t\tif (prefersHighContrast) {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t\t} else {\n\t\t\tinitialTheme = prefersDarkMode ? \"dark\" : \"light\";\n\t\t}\n\t}\n\tconst htmlElement = document.documentElement;\n\thtmlElement.classList.remove(...themes);\n\thtmlElement.classList.add(initialTheme);\n\thtmlElement.dataset.theme = initialTheme;\n})();\n").trim()
     }
   });
 };

package/dist/tailwind.preset.js

@@ -1,5 +1,5 @@
 /**
- * @ngrok/mantle v0.0.2
+ * @ngrok/mantle v0.0.3
  *
  * Copyright (c) ngrok.
  *

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -98,7 +98,7 @@
     "prettier-plugin-tailwindcss": "0.5.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rollup": "4.6.0",
+    "rollup": "4.6.1",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-dts": "6.1.0",
     "rollup-plugin-extensions": "0.1.0",