@tamagui/next-theme 1.0.1-beta.140 → 1.0.1-beta.141

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/next-theme",
-  "version": "1.0.1-beta.140",
+  "version": "1.0.1-beta.141",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -16,13 +16,13 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@tamagui/core": "^1.0.1-beta.140"
+    "@tamagui/core": "^1.0.1-beta.141"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.140",
+    "@tamagui/build": "^1.0.1-beta.141",
     "react": "*"
   },
   "publishConfig": {

package/dist/jsx/NextTheme.js

@@ -1,219 +0,0 @@
-import NextHead from "next/head";
-import {
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-const ThemeContext = createContext({
-  toggleTheme: () => {
-  },
-  setTheme: (_) => {
-  },
-  themes: []
-});
-const useTheme = () => useContext(ThemeContext);
-const colorSchemes = ["light", "dark"];
-const MEDIA = "(prefers-color-scheme: dark)";
-const useRootTheme = () => {
-  const isClient = typeof document !== "undefined";
-  const classes = isClient ? [...document.documentElement.classList] : [];
-  const isDark = classes.includes("t_dark");
-  return useState(isDark ? "dark" : "light");
-};
-const NextThemeProvider = ({
-  forcedTheme,
-  disableTransitionOnChange = true,
-  enableSystem = true,
-  enableColorScheme = true,
-  storageKey = "theme",
-  themes = ["light", "dark"],
-  defaultTheme = enableSystem ? "system" : "light",
-  attribute = "class",
-  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 = useCallback((e) => {
-    const systemTheme = getSystemTheme(e);
-    setResolvedTheme(systemTheme);
-    if (theme === "system" && !forcedTheme)
-      handleChangeTheme(systemTheme, false);
-  }, [theme, forcedTheme]);
-  const mediaListener = useRef(handleMediaQuery);
-  mediaListener.current = handleMediaQuery;
-  const handleChangeTheme = useCallback((theme2, updateStorage = true, updateDOM = true) => {
-    let name = (value == null ? void 0 : value[theme2]) || theme2;
-    const enable = disableTransitionOnChange && updateDOM ? disableAnimation() : null;
-    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);
-      }
-      enable == null ? void 0 : enable();
-    }
-  }, []);
-  useIsomorphicLayoutEffect(() => {
-    const handler = (...args) => mediaListener.current(...args);
-    const media = window.matchMedia(MEDIA);
-    media.addListener(handler);
-    handler(media);
-    return () => {
-      media.removeListener(handler);
-    };
-  }, []);
-  const setTheme = useCallback((newTheme) => {
-    if (forcedTheme) {
-      handleChangeTheme(newTheme, true, false);
-    } else {
-      handleChangeTheme(newTheme);
-    }
-    setThemeState(newTheme);
-  }, [forcedTheme]);
-  useEffect(() => {
-    const handleStorage = (e) => {
-      if (e.key !== storageKey) {
-        return;
-      }
-      const theme2 = e.newValue || defaultTheme;
-      setTheme(theme2);
-    };
-    window.addEventListener("storage", handleStorage);
-    return () => {
-      window.removeEventListener("storage", handleStorage);
-    };
-  }, []);
-  useIsomorphicLayoutEffect(() => {
-    if (!enableColorScheme)
-      return;
-    let colorScheme = forcedTheme && colorSchemes.includes(forcedTheme) ? forcedTheme : theme && colorSchemes.includes(theme) ? theme : theme === "system" ? resolvedTheme || null : null;
-    document.documentElement.style.setProperty("color-scheme", colorScheme);
-  }, [enableColorScheme, theme, resolvedTheme, forcedTheme]);
-  const contextValue = useMemo(() => {
-    return {
-      theme,
-      setTheme,
-      toggleTheme() {
-        const order = resolvedTheme === "dark" ? ["system", "light", "dark"] : ["system", "dark", "light"];
-        const next = order[(order.indexOf(theme) + 1) % order.length];
-        setTheme(next);
-      },
-      forcedTheme,
-      resolvedTheme: theme === "system" ? resolvedTheme : theme,
-      themes: enableSystem ? [...themes, "system"] : themes,
-      systemTheme: enableSystem ? resolvedTheme : void 0
-    };
-  }, [theme, forcedTheme, resolvedTheme, enableSystem]);
-  return <ThemeContext.Provider value={contextValue}>
-    <ThemeScript {...{
-      forcedTheme,
-      storageKey,
-      systemTheme: resolvedTheme,
-      attribute,
-      value,
-      enableSystem,
-      defaultTheme,
-      attrs
-    }} />
-    {children}
-  </ThemeContext.Provider>;
-};
-const ThemeScript = memo(({
-  forcedTheme,
-  storageKey,
-  attribute,
-  enableSystem,
-  defaultTheme,
-  value,
-  attrs
-}) => {
-  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";
-  return <NextHead>{forcedTheme ? <script key="next-themes-script" dangerouslySetInnerHTML={{
-    __html: `!function(){${optimization}${updateDOM(forcedTheme)}}()`
-  }} /> : enableSystem ? <script key="next-themes-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){}}()`
-  }} /> : <script key="next-themes-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){}}();`
-  }} />}</NextHead>;
-}, (prevProps, nextProps) => {
-  if (prevProps.forcedTheme !== nextProps.forcedTheme)
-    return false;
-  return true;
-});
-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 disableAnimation = () => {
-  const css = document.createElement("style");
-  css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
-  document.head.appendChild(css);
-  return () => {
-    ;
-    (() => window.getComputedStyle(document.body))();
-    setTimeout(() => {
-      document.head.removeChild(css);
-    }, 1);
-  };
-};
-const getSystemTheme = (e) => {
-  if (!e) {
-    e = window.matchMedia(MEDIA);
-  }
-  const isDark = e.matches;
-  const systemTheme = isDark ? "dark" : "light";
-  return systemTheme;
-};
-export {
-  NextThemeProvider,
-  useRootTheme,
-  useTheme
-};

package/dist/jsx/index.js

@@ -1 +0,0 @@
-export * from "./NextTheme";