@tamagui/next-theme 1.27.2 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/next-theme",
-  "version": "1.27.2",
+  "version": "1.28.0",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -16,13 +16,13 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@tamagui/use-event": "1.27.2"
+    "@tamagui/use-event": "1.28.0"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.27.2",
+    "@tamagui/build": "1.28.0",
     "react": "^18.2.0"
   },
   "publishConfig": {

package/dist/esm/NextTheme.mjs

@@ -1,9 +0,0 @@
-export * from "./NextThemeProvider";
-export * from "./ThemeSettingContext";
-export * from "./UseThemeProps";
-export * from "./helpers";
-export * from "./constants";
-export * from "./useTheme";
-export * from "./types";
-export * from "./useRootTheme";
-//# sourceMappingURL=NextTheme.mjs.map

package/dist/esm/NextThemeProvider.mjs

@@ -1,233 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEvent } from "@tamagui/use-event";
-import NextHead from "next/head";
-import * as React from "react";
-import { memo, useEffect, useMemo, useRef, useState } from "react";
-import { MEDIA, colorSchemes } from "./constants";
-import { getSystemTheme, getTheme } from "./helpers";
-import { ThemeSettingContext } from "./ThemeSettingContext";
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
-const NextThemeProvider = ({
-  forcedTheme,
-  disableTransitionOnChange = true,
-  enableSystem = true,
-  enableColorScheme = true,
-  storageKey = "theme",
-  themes = colorSchemes,
-  defaultTheme = enableSystem ? "system" : "light",
-  attribute = "class",
-  skipNextHead,
-  onChangeTheme,
-  value = {
-    dark: "t_dark",
-    light: "t_light"
-  },
-  children
-}) => {
-  const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme));
-  const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey));
-  const attrs = !value ? themes : Object.values(value);
-  const handleMediaQuery = useEvent((e) => {
-    const systemTheme2 = getSystemTheme(e);
-    React.startTransition(() => {
-      setResolvedTheme(systemTheme2);
-    });
-    if (theme === "system" && !forcedTheme) {
-      handleChangeTheme(systemTheme2, false);
-    }
-  });
-  const mediaListener = useRef(handleMediaQuery);
-  mediaListener.current = handleMediaQuery;
-  const handleChangeTheme = useEvent((theme2, updateStorage = true, updateDOM = true) => {
-    let name = (value == null ? void 0 : value[theme2]) || theme2;
-    if (updateStorage) {
-      try {
-        localStorage.setItem(storageKey, theme2);
-      } catch (e) {
-      }
-    }
-    if (theme2 === "system" && enableSystem) {
-      const resolved = getSystemTheme();
-      name = (value == null ? void 0 : value[resolved]) || resolved;
-    }
-    onChangeTheme == null ? void 0 : onChangeTheme(name.replace("t_", ""));
-    if (updateDOM) {
-      const d = document.documentElement;
-      if (attribute === "class") {
-        d.classList.remove(...attrs);
-        d.classList.add(name);
-      } else {
-        d.setAttribute(attribute, name);
-      }
-    }
-  });
-  useIsomorphicLayoutEffect(() => {
-    const handler = (...args) => mediaListener.current(...args);
-    const media = window.matchMedia(MEDIA);
-    media.addListener(handler);
-    handler(media);
-    return () => {
-      media.removeListener(handler);
-    };
-  }, []);
-  const set = useEvent((newTheme) => {
-    if (forcedTheme) {
-      handleChangeTheme(newTheme, true, false);
-    } else {
-      handleChangeTheme(newTheme);
-    }
-    setThemeState(newTheme);
-  });
-  useEffect(() => {
-    const handleStorage = (e) => {
-      if (e.key !== storageKey) {
-        return;
-      }
-      const theme2 = e.newValue || defaultTheme;
-      set(theme2);
-    };
-    window.addEventListener("storage", handleStorage);
-    return () => {
-      window.removeEventListener("storage", handleStorage);
-    };
-  }, [defaultTheme, set, storageKey]);
-  useIsomorphicLayoutEffect(() => {
-    if (!enableColorScheme)
-      return;
-    const colorScheme = (
-      // If theme is forced to light or dark, use that
-      forcedTheme && colorSchemes.includes(forcedTheme) ? forcedTheme : (
-        // If regular theme is light or dark
-        theme && colorSchemes.includes(theme) ? theme : (
-          // If theme is system, use the resolved version
-          theme === "system" ? resolvedTheme || null : null
-        )
-      )
-    );
-    const userPrefers = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    const wePrefer = colorScheme || "light";
-    if (userPrefers !== wePrefer || wePrefer === "dark") {
-      document.documentElement.style.setProperty("color-scheme", colorScheme);
-    }
-  }, [enableColorScheme, theme, resolvedTheme, forcedTheme]);
-  const toggle = useEvent(() => {
-    const order = resolvedTheme === "dark" ? ["system", "light", "dark"] : ["system", "dark", "light"];
-    const next = order[(order.indexOf(theme) + 1) % order.length];
-    set(next);
-  });
-  const contextResolvedTheme = theme === "system" ? resolvedTheme : theme;
-  const systemTheme = enableSystem ? resolvedTheme : void 0;
-  const contextValue = useMemo(() => {
-    const value2 = {
-      theme,
-      current: theme,
-      set,
-      toggle,
-      forcedTheme,
-      resolvedTheme: contextResolvedTheme,
-      themes: enableSystem ? [...themes, "system"] : themes,
-      systemTheme
-    };
-    return value2;
-  }, [
-    theme,
-    set,
-    toggle,
-    forcedTheme,
-    contextResolvedTheme,
-    enableSystem,
-    themes,
-    systemTheme
-  ]);
-  return /* @__PURE__ */ jsxs(ThemeSettingContext.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ jsx(
-      ThemeScript,
-      {
-        ...{
-          forcedTheme,
-          storageKey,
-          systemTheme: resolvedTheme,
-          attribute,
-          value,
-          enableSystem,
-          defaultTheme,
-          attrs,
-          skipNextHead
-        }
-      }
-    ),
-    useMemo(() => children, [children])
-  ] });
-};
-const ThemeScript = memo(
-  ({
-    forcedTheme,
-    storageKey,
-    attribute,
-    enableSystem,
-    defaultTheme,
-    value,
-    attrs,
-    skipNextHead
-  }) => {
-    const optimization = (() => {
-      if (attribute === "class") {
-        const removeClasses = attrs.map((t) => `d.remove('${t}')`).join(";");
-        return `var d=document.documentElement.classList;${removeClasses};`;
-      } else {
-        return `var d=document.documentElement;`;
-      }
-    })();
-    const updateDOM = (name, literal) => {
-      name = (value == null ? void 0 : value[name]) || name;
-      const val = literal ? name : `'${name}'`;
-      if (attribute === "class") {
-        return `d.add(${val})`;
-      }
-      return `d.setAttribute('${attribute}', ${val})`;
-    };
-    const defaultSystem = defaultTheme === "system";
-    const contents = /* @__PURE__ */ jsx(Fragment, { children: forcedTheme ? /* @__PURE__ */ jsx(
-      "script",
-      {
-        dangerouslySetInnerHTML: {
-          // These are minified via Terser and then updated by hand, don't recommend
-          __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`
-        }
-      },
-      "next-themes-script"
-    ) : enableSystem ? /* @__PURE__ */ jsx(
-      "script",
-      {
-        dangerouslySetInnerHTML: {
-          __html: `!function(){try {${optimization}var e=localStorage.getItem('${storageKey}');${!defaultSystem ? updateDOM(defaultTheme) + ";" : ""}if("system"===e||(!e&&${defaultSystem})){var t="${MEDIA}",m=window.matchMedia(t);m.media!==t||m.matches?${updateDOM(
-            "dark"
-          )}:${updateDOM("light")}}else if(e) ${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? "x[e]" : "e", true)}}catch(e){}}()`
-        }
-      },
-      "next-themes-script"
-    ) : /* @__PURE__ */ jsx(
-      "script",
-      {
-        dangerouslySetInnerHTML: {
-          __html: `!function(){try{${optimization}var e=localStorage.getItem("${storageKey}");if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? "x[e]" : "e", true)}}else{${updateDOM(
-            defaultTheme
-          )};}}catch(t){}}();`
-        }
-      },
-      "next-themes-script"
-    ) });
-    if (skipNextHead)
-      return contents;
-    return /* @__PURE__ */ jsx(NextHead, { children: contents });
-  },
-  (prevProps, nextProps) => {
-    if (prevProps.forcedTheme !== nextProps.forcedTheme)
-      return false;
-    return true;
-  }
-);
-export {
-  NextThemeProvider
-};
-//# sourceMappingURL=NextThemeProvider.mjs.map

package/dist/esm/ThemeSettingContext.mjs

@@ -1,12 +0,0 @@
-import { createContext } from "react";
-const ThemeSettingContext = createContext({
-  toggle: () => {
-  },
-  set: (_) => {
-  },
-  themes: []
-});
-export {
-  ThemeSettingContext
-};
-//# sourceMappingURL=ThemeSettingContext.mjs.map

package/dist/esm/UseThemeProps.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=UseThemeProps.mjs.map

package/dist/esm/constants.mjs

@@ -1,9 +0,0 @@
-const constants = {};
-const colorSchemes = ["light", "dark"];
-const MEDIA = "(prefers-color-scheme: dark)";
-export {
-  MEDIA,
-  colorSchemes,
-  constants
-};
-//# sourceMappingURL=constants.mjs.map

package/dist/esm/helpers.mjs

@@ -1,26 +0,0 @@
-import { MEDIA } from "./constants";
-const helpers = {};
-const getTheme = (key, fallback) => {
-  if (typeof window === "undefined")
-    return void 0;
-  let theme;
-  try {
-    theme = localStorage.getItem(key) || void 0;
-  } catch (e) {
-  }
-  return theme || fallback;
-};
-const getSystemTheme = (e) => {
-  if (!e) {
-    e = window.matchMedia(MEDIA);
-  }
-  const isDark = e.matches;
-  const systemTheme = isDark ? "dark" : "light";
-  return systemTheme;
-};
-export {
-  getSystemTheme,
-  getTheme,
-  helpers
-};
-//# sourceMappingURL=helpers.mjs.map

package/dist/esm/index.mjs

@@ -1,2 +0,0 @@
-export * from "./NextTheme";
-//# sourceMappingURL=index.mjs.map

package/dist/esm/types.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=types.mjs.map

package/dist/esm/useIsomorphicLayoutEffect.mjs

@@ -1,6 +0,0 @@
-import { useEffect, useLayoutEffect } from "react";
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-export {
-  useIsomorphicLayoutEffect
-};
-//# sourceMappingURL=useIsomorphicLayoutEffect.mjs.map

package/dist/esm/useRootTheme.mjs

@@ -1,18 +0,0 @@
-import { startTransition, useLayoutEffect, useState } from "react";
-const useRootTheme = ({ fallback = "light" } = {}) => {
-  const [val, setVal] = useState(fallback);
-  if (typeof document !== "undefined") {
-    useLayoutEffect(() => {
-      const classes = [...document.documentElement.classList];
-      const val2 = classes.includes(`t_dark`) ? "dark" : classes.includes(`t_light`) ? "light" : fallback;
-      startTransition(() => {
-        setVal(val2);
-      });
-    }, []);
-  }
-  return [val, setVal];
-};
-export {
-  useRootTheme
-};
-//# sourceMappingURL=useRootTheme.mjs.map

package/dist/esm/useTheme.mjs

@@ -1,9 +0,0 @@
-import { useContext } from "react";
-import { ThemeSettingContext } from "./ThemeSettingContext";
-const useTheme = () => useContext(ThemeSettingContext);
-const useThemeSetting = () => useContext(ThemeSettingContext);
-export {
-  useTheme,
-  useThemeSetting
-};
-//# sourceMappingURL=useTheme.mjs.map