@tamagui/next-theme 1.88.13 → 1.88.14

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+  Copyright (c) 2020 Nate Wienert
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

package/dist/cjs/useRootTheme.js

@@ -19,12 +19,11 @@ __export(useRootTheme_exports, {
 module.exports = __toCommonJS(useRootTheme_exports);
 var import_constants = require("@tamagui/constants"), import_react = require("react");
 const useRootTheme = ({ fallback = "light" } = {}) => {
-  const [val, setVal] = (0, import_react.useState)(fallback);
-  return (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    const classes = [...document.documentElement.classList], val2 = classes.includes("t_dark") ? "dark" : classes.includes("t_light") ? "light" : fallback;
-    (0, import_react.startTransition)(() => {
-      setVal(val2);
-    });
-  }, []), [val, setVal];
+  let initialVal = fallback;
+  if (import_constants.isClient) {
+    const classes = [...document.documentElement.classList];
+    initialVal = classes.includes("t_dark") ? "dark" : classes.includes("t_light") ? "light" : fallback;
+  }
+  return (0, import_react.useState)(initialVal);
 };
 //# sourceMappingURL=useRootTheme.js.map

package/dist/cjs/useRootTheme.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/useRootTheme.tsx"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0C,+BAC1C,eAA0C;AAInC,MAAM,eAAe,CAAC,EAAE,WAAW,QAAQ,IAAgC,CAAC,MAAM;AACvF,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAsB,QAAQ;AAEpD,yDAA0B,MAAM;AAE9B,UAAM,UAAU,CAAC,GAAG,SAAS,gBAAgB,SAAS,GAEhDA,OAAmB,QAAQ,SAAS,QAAQ,IAC9C,SACA,QAAQ,SAAS,SAAS,IACxB,UACA;AAIN,sCAAgB,MAAM;AACpB,aAAOA,IAAG;AAAA,IACZ,CAAC;AAAA,EACH,GAAG,CAAC,CAAC,GAEE,CAAC,KAAK,MAAM;AACrB;",
-  "names": ["val"]
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB,+BACzB,eAAyB;AAIlB,MAAM,eAAe,CAAC,EAAE,WAAW,QAAQ,IAAgC,CAAC,MAAM;AACvF,MAAI,aAAa;AAEjB,MAAI,2BAAU;AAEZ,UAAM,UAAU,CAAC,GAAG,SAAS,gBAAgB,SAAS;AACtD,iBAAa,QAAQ,SAAS,QAAQ,IAClC,SACA,QAAQ,SAAS,SAAS,IACxB,UACA;AAAA,EACR;AAEA,aAAO,uBAAsB,UAAU;AACzC;",
+  "names": []
 }

package/dist/cjs/useRootTheme.native.js

@@ -20,13 +20,12 @@ __export(useRootTheme_exports, {
 module.exports = __toCommonJS(useRootTheme_exports);
 var import_constants = require("@tamagui/constants"), import_react = require("react");
 const useRootTheme = ({ fallback = "light" } = {}) => {
-  const [val, setVal] = (0, import_react.useState)(fallback);
-  return (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    const classes = [...document.documentElement.classList], val2 = classes.includes("t_dark") ? "dark" : classes.includes("t_light") ? "light" : fallback;
-    (0, import_react.startTransition)(() => {
-      setVal(val2);
-    });
-  }, []), [val, setVal];
+  let initialVal = fallback;
+  if (import_constants.isClient) {
+    const classes = [...document.documentElement.classList];
+    initialVal = classes.includes("t_dark") ? "dark" : classes.includes("t_light") ? "light" : fallback;
+  }
+  return (0, import_react.useState)(initialVal);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/useRootTheme.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/useRootTheme.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0C,+BAC1C,eAA0C;AAInC,MAAM,eAAe,CAAC,EAAE,WAAW,QAAQ,IAAgC,CAAC,MAAM;AACvF,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAsB,QAAQ;AAEpD,yDAA0B,MAAM;AAE9B,UAAM,UAAU,CAAC,GAAG,SAAS,gBAAgB,SAAS,GAEhDA,OAAmB,QAAQ,SAAS,QAAQ,IAC9C,SACA,QAAQ,SAAS,SAAS,IACxB,UACA;AAIN,sCAAgB,MAAM;AACpB,aAAOA,IAAG;AAAA,IACZ,CAAC;AAAA,EACH,GAAG,CAAC,CAAC,GAEE,CAAC,KAAK,MAAM;AACrB;",
-  "names": ["val"]
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB,+BACzB,eAAyB;AAIlB,MAAM,eAAe,CAAC,EAAE,WAAW,QAAQ,IAAgC,CAAC,MAAM;AACvF,MAAI,aAAa;AAEjB,MAAI,2BAAU;AAEZ,UAAM,UAAU,CAAC,GAAG,SAAS,gBAAgB,SAAS;AACtD,iBAAa,QAAQ,SAAS,QAAQ,IAClC,SACA,QAAQ,SAAS,SAAS,IACxB,UACA;AAAA,EACR;AAEA,aAAO,uBAAsB,UAAU;AACzC;",
+  "names": []
 }

package/dist/esm/NextTheme.mjs

@@ -0,0 +1,8 @@
+export * from "./NextThemeProvider.mjs";
+export * from "./ThemeSettingContext.mjs";
+export * from "./UseThemeProps.mjs";
+export * from "./helpers.mjs";
+export * from "./constants.mjs";
+export * from "./useTheme.mjs";
+export * from "./types.mjs";
+export * from "./useRootTheme.mjs";

package/dist/esm/NextThemeProvider.mjs

@@ -0,0 +1,146 @@
+import { useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { useEvent } from "@tamagui/use-event";
+import NextHead from "next/head";
+import * as React from "react";
+import { memo, useEffect, useMemo, useState } from "react";
+import { MEDIA, colorSchemes } from "./constants.mjs";
+import { getSystemTheme, getTheme } from "./helpers.mjs";
+import { ThemeSettingContext } from "./ThemeSettingContext.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const NextThemeProvider = memo(({
+    forcedTheme,
+    disableTransitionOnChange = !1,
+    enableSystem = !0,
+    enableColorScheme = !0,
+    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)),
+      [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey)),
+      attrs = value ? Object.values(value) : themes,
+      handleMediaQuery = useEvent(e => {
+        const _ = getSystemTheme(e),
+          update = () => setResolvedTheme(_);
+        disableTransitionOnChange ? update() : React.startTransition(() => update()), theme === "system" && !forcedTheme && handleChangeTheme(_, !1);
+      }),
+      handleChangeTheme = useEvent((theme2, updateStorage = !0, updateDOM = !0) => {
+        let name = value?.[theme2] || theme2;
+        if (updateStorage) try {
+          localStorage.setItem(storageKey, theme2);
+        } catch {}
+        if (theme2 === "system" && enableSystem) {
+          const resolved = getSystemTheme();
+          name = value?.[resolved] || resolved;
+        }
+        if (onChangeTheme?.(name.replace("t_", "")), updateDOM) {
+          const d = document.documentElement;
+          attribute === "class" ? (d.classList.remove(...attrs), d.classList.add(name)) : d.setAttribute(attribute, name);
+        }
+      });
+    useIsomorphicLayoutEffect(() => {
+      const media = window.matchMedia(MEDIA);
+      return media.addListener(handleMediaQuery), handleMediaQuery(media), () => {
+        media.removeListener(handleMediaQuery);
+      };
+    }, []);
+    const set = useEvent(newTheme => {
+      forcedTheme ? handleChangeTheme(newTheme, !0, !1) : handleChangeTheme(newTheme), setThemeState(newTheme);
+    });
+    useEffect(() => {
+      const handleStorage = e => {
+        if (e.key !== storageKey) return;
+        const theme2 = e.newValue || defaultTheme;
+        set(theme2);
+      };
+      return window.addEventListener("storage", handleStorage), () => {
+        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;
+      (typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") !== (colorScheme || "light") && document.documentElement.style.setProperty("color-scheme", colorScheme);
+    }, [enableColorScheme, theme, resolvedTheme, forcedTheme]);
+    const toggle = useEvent(() => {
+        const order = resolvedTheme === "dark" ? ["system", "light", "dark"] : ["system", "dark", "light"],
+          next = order[(order.indexOf(theme) + 1) % order.length];
+        set(next);
+      }),
+      systemTheme = enableSystem ? resolvedTheme : void 0,
+      contextValue = useMemo(() => ({
+        theme,
+        current: theme,
+        set,
+        toggle,
+        forcedTheme,
+        resolvedTheme: theme === "system" ? resolvedTheme : theme,
+        themes: enableSystem ? [...themes, "system"] : themes,
+        systemTheme
+      }), [theme, set, toggle, forcedTheme, resolvedTheme, 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])]
+    });
+  }),
+  ThemeScript = memo(({
+    forcedTheme,
+    storageKey,
+    attribute,
+    enableSystem,
+    defaultTheme,
+    value,
+    attrs,
+    skipNextHead
+  }) => {
+    const optimization = attribute === "class" ? `var d=document.documentElement.classList;${attrs.map(t => `d.remove('${t}')`).join(";")};` : "var d=document.documentElement;",
+      updateDOM = (name, literal) => {
+        name = value?.[name] || name;
+        const val = literal ? name : `'${name}'`;
+        return attribute === "class" ? `d.add(${val})` : `d.setAttribute('${attribute}', ${val})`;
+      },
+      defaultSystem = defaultTheme === "system",
+      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", !0)}}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", !0)}}else{${updateDOM(defaultTheme)};}}catch(t){}}();`
+          }
+        }, "next-themes-script")
+      });
+    return skipNextHead ? contents : /* @__PURE__ */jsx(NextHead, {
+      children: contents
+    });
+  }, (prevProps, nextProps) => prevProps.forcedTheme === nextProps.forcedTheme);
+export { NextThemeProvider };

package/dist/esm/ThemeSettingContext.mjs

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+const ThemeSettingContext = createContext({
+  toggle: () => {},
+  set: _ => {},
+  themes: []
+});
+export { ThemeSettingContext };

package/dist/esm/constants.mjs

@@ -0,0 +1,4 @@
+const constants = {},
+  colorSchemes = ["light", "dark"],
+  MEDIA = "(prefers-color-scheme: dark)";
+export { MEDIA, colorSchemes, constants };

package/dist/esm/helpers.mjs

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

package/dist/esm/index.mjs

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

package/dist/esm/useRootTheme.js

@@ -1,13 +1,12 @@
-import { useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { startTransition, useState } from "react";
+import { isClient } from "@tamagui/constants";
+import { useState } from "react";
 const useRootTheme = ({ fallback = "light" } = {}) => {
-  const [val, setVal] = useState(fallback);
-  return useIsomorphicLayoutEffect(() => {
-    const classes = [...document.documentElement.classList], val2 = classes.includes("t_dark") ? "dark" : classes.includes("t_light") ? "light" : fallback;
-    startTransition(() => {
-      setVal(val2);
-    });
-  }, []), [val, setVal];
+  let initialVal = fallback;
+  if (isClient) {
+    const classes = [...document.documentElement.classList];
+    initialVal = classes.includes("t_dark") ? "dark" : classes.includes("t_light") ? "light" : fallback;
+  }
+  return useState(initialVal);
 };
 export {
   useRootTheme

package/dist/esm/useRootTheme.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/useRootTheme.tsx"],
-  "mappings": "AAAA,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB,gBAAgB;AAInC,MAAM,eAAe,CAAC,EAAE,WAAW,QAAQ,IAAgC,CAAC,MAAM;AACvF,QAAM,CAAC,KAAK,MAAM,IAAI,SAAsB,QAAQ;AAEpD,mCAA0B,MAAM;AAE9B,UAAM,UAAU,CAAC,GAAG,SAAS,gBAAgB,SAAS,GAEhDA,OAAmB,QAAQ,SAAS,QAAQ,IAC9C,SACA,QAAQ,SAAS,SAAS,IACxB,UACA;AAIN,oBAAgB,MAAM;AACpB,aAAOA,IAAG;AAAA,IACZ,CAAC;AAAA,EACH,GAAG,CAAC,CAAC,GAEE,CAAC,KAAK,MAAM;AACrB;",
-  "names": ["val"]
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAIlB,MAAM,eAAe,CAAC,EAAE,WAAW,QAAQ,IAAgC,CAAC,MAAM;AACvF,MAAI,aAAa;AAEjB,MAAI,UAAU;AAEZ,UAAM,UAAU,CAAC,GAAG,SAAS,gBAAgB,SAAS;AACtD,iBAAa,QAAQ,SAAS,QAAQ,IAClC,SACA,QAAQ,SAAS,SAAS,IACxB,UACA;AAAA,EACR;AAEA,SAAO,SAAsB,UAAU;AACzC;",
+  "names": []
 }

package/dist/esm/useRootTheme.mjs

@@ -0,0 +1,13 @@
+import { isClient } from "@tamagui/constants";
+import { useState } from "react";
+const useRootTheme = ({
+  fallback = "light"
+} = {}) => {
+  let initialVal = fallback;
+  if (isClient) {
+    const classes = [...document.documentElement.classList];
+    initialVal = classes.includes("t_dark") ? "dark" : classes.includes("t_light") ? "light" : fallback;
+  }
+  return useState(initialVal);
+};
+export { useRootTheme };

package/dist/esm/useRootTheme.native.js

@@ -20,13 +20,12 @@ __export(useRootTheme_exports, {
 module.exports = __toCommonJS(useRootTheme_exports);
 var import_constants = require("@tamagui/constants"), import_react = require("react");
 const useRootTheme = ({ fallback = "light" } = {}) => {
-  const [val, setVal] = (0, import_react.useState)(fallback);
-  return (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    const classes = [...document.documentElement.classList], val2 = classes.includes("t_dark") ? "dark" : classes.includes("t_light") ? "light" : fallback;
-    (0, import_react.startTransition)(() => {
-      setVal(val2);
-    });
-  }, []), [val, setVal];
+  let initialVal = fallback;
+  if (import_constants.isClient) {
+    const classes = [...document.documentElement.classList];
+    initialVal = classes.includes("t_dark") ? "dark" : classes.includes("t_light") ? "light" : fallback;
+  }
+  return (0, import_react.useState)(initialVal);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/esm/useRootTheme.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/useRootTheme.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0C,+BAC1C,eAA0C;AAInC,MAAM,eAAe,CAAC,EAAE,WAAW,QAAQ,IAAgC,CAAC,MAAM;AACvF,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAsB,QAAQ;AAEpD,yDAA0B,MAAM;AAE9B,UAAM,UAAU,CAAC,GAAG,SAAS,gBAAgB,SAAS,GAEhDA,OAAmB,QAAQ,SAAS,QAAQ,IAC9C,SACA,QAAQ,SAAS,SAAS,IACxB,UACA;AAIN,sCAAgB,MAAM;AACpB,aAAOA,IAAG;AAAA,IACZ,CAAC;AAAA,EACH,GAAG,CAAC,CAAC,GAEE,CAAC,KAAK,MAAM;AACrB;",
-  "names": ["val"]
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB,+BACzB,eAAyB;AAIlB,MAAM,eAAe,CAAC,EAAE,WAAW,QAAQ,IAAgC,CAAC,MAAM;AACvF,MAAI,aAAa;AAEjB,MAAI,2BAAU;AAEZ,UAAM,UAAU,CAAC,GAAG,SAAS,gBAAgB,SAAS;AACtD,iBAAa,QAAQ,SAAS,QAAQ,IAClC,SACA,QAAQ,SAAS,SAAS,IACxB,UACA;AAAA,EACR;AAEA,aAAO,uBAAsB,UAAU;AACzC;",
+  "names": []
 }

package/dist/esm/useTheme.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/next-theme",
-  "version": "1.88.13",
+  "version": "1.88.14",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -20,14 +20,14 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/constants": "1.88.13",
-    "@tamagui/use-event": "1.88.13"
+    "@tamagui/constants": "1.88.14",
+    "@tamagui/use-event": "1.88.14"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.88.13",
+    "@tamagui/build": "1.88.14",
     "react": "^18.2.0"
   },
   "publishConfig": {

package/src/NextThemeProvider.tsx

@@ -7,8 +7,8 @@ import { memo, useEffect, useMemo, useState } from 'react'
 import { MEDIA, colorSchemes } from './constants'
 import { getSystemTheme, getTheme } from './helpers'
 import { ThemeSettingContext } from './ThemeSettingContext'
-import { ValueObject } from './types'
-import { ThemeProviderProps, UseThemeProps } from './UseThemeProps'
+import type { ValueObject } from './types'
+import type { ThemeProviderProps, UseThemeProps } from './UseThemeProps'
 
 export const NextThemeProvider = memo(
   ({

package/src/ThemeSettingContext.tsx

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
-import { UseThemeProps } from './UseThemeProps'
+import type { UseThemeProps } from './UseThemeProps'
 
 export const ThemeSettingContext = createContext<UseThemeProps>({
   toggle: () => {},

package/src/UseThemeProps.tsx

@@ -1,4 +1,4 @@
-import { ValueObject } from './types'
+import type { ValueObject } from './types'
 
 export interface UseThemeProps {
   /** List of all available theme names */

package/src/useRootTheme.tsx

@@ -1,27 +1,20 @@
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { startTransition, useState } from 'react'
+import { isClient } from '@tamagui/constants'
+import { useState } from 'react'
 
-import { ColorScheme } from './types'
+import type { ColorScheme } from './types'
 
 export const useRootTheme = ({ fallback = 'light' }: { fallback?: ColorScheme } = {}) => {
-  const [val, setVal] = useState<ColorScheme>(fallback)
+  let initialVal = fallback
 
-  useIsomorphicLayoutEffect(() => {
+  if (isClient) {
     // @ts-ignore
     const classes = [...document.documentElement.classList]
-
-    const val: ColorScheme = classes.includes(`t_dark`)
+    initialVal = classes.includes(`t_dark`)
       ? 'dark'
       : classes.includes(`t_light`)
         ? 'light'
         : fallback
+  }
 
-    // this seems to prevent hydration errors, but not always so if you remove it and it doesn't error
-    // you may regress some peoples apps
-    startTransition(() => {
-      setVal(val)
-    })
-  }, [])
-
-  return [val, setVal] as const
+  return useState<ColorScheme>(initialVal)
 }

package/types/NextThemeProvider.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { ThemeProviderProps } from './UseThemeProps';
+import type { ThemeProviderProps } from './UseThemeProps';
 export declare const NextThemeProvider: React.MemoExoticComponent<({ forcedTheme, disableTransitionOnChange, enableSystem, enableColorScheme, storageKey, themes, defaultTheme, attribute, skipNextHead, onChangeTheme, value, children, }: ThemeProviderProps) => JSX.Element>;
 //# sourceMappingURL=NextThemeProvider.d.ts.map

package/types/NextThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NextThemeProvider.d.ts","sourceRoot":"","sources":["../src/NextThemeProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,kBAAkB,EAAiB,MAAM,iBAAiB,CAAA;AAEnE,eAAO,MAAM,iBAAiB,sMAiBzB,kBAAkB,iBA+KtB,CAAA"}
+{"version":3,"file":"NextThemeProvider.d.ts","sourceRoot":"","sources":["../src/NextThemeProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,KAAK,EAAE,kBAAkB,EAAiB,MAAM,iBAAiB,CAAA;AAExE,eAAO,MAAM,iBAAiB,sMAiBzB,kBAAkB,iBA+KtB,CAAA"}

package/types/ThemeSettingContext.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { UseThemeProps } from './UseThemeProps';
+import type { UseThemeProps } from './UseThemeProps';
 export declare const ThemeSettingContext: import("react").Context<UseThemeProps>;
 //# sourceMappingURL=ThemeSettingContext.d.ts.map

package/types/ThemeSettingContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeSettingContext.d.ts","sourceRoot":"","sources":["../src/ThemeSettingContext.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,eAAO,MAAM,mBAAmB,wCAI9B,CAAA"}
+{"version":3,"file":"ThemeSettingContext.d.ts","sourceRoot":"","sources":["../src/ThemeSettingContext.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEpD,eAAO,MAAM,mBAAmB,wCAI9B,CAAA"}

package/types/UseThemeProps.d.ts

@@ -1,4 +1,4 @@
-import { ValueObject } from './types';
+import type { ValueObject } from './types';
 export interface UseThemeProps {
     /** List of all available theme names */
     themes: string[];

package/types/UseThemeProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UseThemeProps.d.ts","sourceRoot":"","sources":["../src/UseThemeProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,MAAM,WAAW,aAAa;IAC5B,wCAAwC;IACxC,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uBAAuB;IACvB,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,uHAAuH;IACvH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4KAA4K;IAC5K,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,4HAA4H;IAC5H,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC/B;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oFAAoF;IACpF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wDAAwD;IACxD,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,yHAAyH;IACzH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+HAA+H;IAC/H,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oJAAoJ;IACpJ,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,yHAAyH;IACzH,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAGtC,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB"}
+{"version":3,"file":"UseThemeProps.d.ts","sourceRoot":"","sources":["../src/UseThemeProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,MAAM,WAAW,aAAa;IAC5B,wCAAwC;IACxC,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uBAAuB;IACvB,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,uHAAuH;IACvH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4KAA4K;IAC5K,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,4HAA4H;IAC5H,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC/B;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oFAAoF;IACpF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wDAAwD;IACxD,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,yHAAyH;IACzH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+HAA+H;IAC/H,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oJAAoJ;IACpJ,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,yHAAyH;IACzH,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAGtC,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB"}

package/types/useRootTheme.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ColorScheme } from './types';
+import type { ColorScheme } from './types';
 export declare const useRootTheme: ({ fallback }?: {
     fallback?: ColorScheme | undefined;
-}) => readonly [ColorScheme, import("react").Dispatch<import("react").SetStateAction<ColorScheme>>];
+}) => [ColorScheme, import("react").Dispatch<import("react").SetStateAction<ColorScheme>>];
 //# sourceMappingURL=useRootTheme.d.ts.map

package/types/useRootTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRootTheme.d.ts","sourceRoot":"","sources":["../src/useRootTheme.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,eAAO,MAAM,YAAY;;mGAqBxB,CAAA"}
+{"version":3,"file":"useRootTheme.d.ts","sourceRoot":"","sources":["../src/useRootTheme.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,eAAO,MAAM,YAAY;;0FAcxB,CAAA"}