@tamagui/core 1.0.1-beta.220 → 1.0.1-beta.222

package/dist/esm/hooks/useTheme.js

@@ -1,244 +1,199 @@
-import { isRSC, isServer, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { useForceUpdate } from "@tamagui/use-force-update";
+import { isClient, isRSC, isServer, isWeb } from "@tamagui/constants";
 import { useContext, useLayoutEffect, useMemo, useState } from "react";
 import { getConfig } from "../config";
 import { isDevTools } from "../constants/isDevTools";
-import { ThemeContext } from "../contexts/ThemeContext";
-import { areEqualSets } from "../helpers/areEqualSets";
 import { createProxy } from "../helpers/createProxy";
-import {
-  ThemeManager,
-  ThemeManagerContext,
-  emptyManager
-} from "../helpers/ThemeManager";
+import { ThemeManager, hasNoThemeUpdatingProps } from "../helpers/ThemeManager";
+import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
 import { GetThemeUnwrapped } from "./getThemeUnwrapped";
-import { useServerRef } from "./useServerHooks";
-const useTheme = (themeName, componentName, props, forceUpdate, disableTracking) => {
+const emptyProps = { name: null };
+const useTheme = (props = emptyProps) => {
+  var _a;
   if (isRSC) {
     const config = getConfig();
-    return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme);
-  }
-  const state = useServerRef();
-  if (!state.current) {
-    state.current = {
-      uuid: {},
-      keys: /* @__PURE__ */ new Set(),
-      isRendering: true
-    };
+    const name2 = Object.keys(config.themes)[0];
+    return getThemeProxied({
+      theme: config.themes[name2],
+      name: name2
+    });
   }
-  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(
-    themeName,
-    componentName,
-    props,
-    forceUpdate,
-    state.current.uuid
-  );
+  const { name, theme, themes, themeManager, className, isNewTheme } = useChangeThemeEffect(props);
   if (process.env.NODE_ENV === "development") {
-    if ((props == null ? void 0 : props.debug) === "verbose") {
+    if (isWeb && isNewTheme && className === ((_a = themeManager == null ? void 0 : themeManager.parentManager) == null ? void 0 : _a.state.className)) {
+      console.error(`Should always change, duplicating ThemeMananger bug`, themeManager);
+      debugger;
+    }
+    if (props.debug === "verbose") {
       console.groupCollapsed("  \u{1F539} useTheme =>", name);
-      const logs = { themeName, componentName, name, className, ...isDevTools && { theme } };
+      const logs = { ...props, name, className, ...isDevTools && { theme } };
       for (const key in logs) {
         console.log("  ", key, logs[key]);
       }
       console.groupEnd();
     }
   }
-  state.current.isRendering = true;
-  useIsomorphicLayoutEffect(() => {
-    const st = state.current;
-    st.isRendering = false;
-    const cur = themeManager == null ? void 0 : themeManager.keys.get(st.uuid);
-    if (!cur || !areEqualSets(st.keys, cur)) {
-      themeManager == null ? void 0 : themeManager.track(st.uuid, st.keys);
-    }
-  });
-  const debugProp = props && props["debug"];
   if (!theme) {
     if (process.env.NODE_ENV === "development") {
-      console.warn("No theme with name", themeName);
+      console.warn("No theme found", name, props, themeManager);
     }
     return themes[Object.keys(themes)[0]];
   }
   return useMemo(() => {
     return getThemeProxied({
+      isNewTheme,
       theme,
       name,
       className,
-      themeManager,
-      onStringKeyAccess(key) {
-        if (disableTracking)
-          return;
-        if (state) {
-          if (state.current.isRendering && !state.current.keys.has(key)) {
-            state.current.keys.add(key);
-            if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
-              console.log("  \u{1F538} tracking theme", key);
-            }
-          }
-        }
-      }
+      themeManager
     });
-  }, [theme, name, className, themeManager, debugProp, disableTracking]);
+  }, [theme, isNewTheme, name, className, themeManager]);
 };
 function getThemeProxied({
   theme,
   name,
   className,
   themeManager,
-  onStringKeyAccess
+  isNewTheme
 }) {
   return createProxy(theme, {
     has(_, key) {
-      if (typeof key === "string" && key[0] === "$") {
-        key = key.slice(1);
+      if (typeof key === "string") {
+        if (key[0] === "$")
+          key = key.slice(1);
+        return themeManager == null ? void 0 : themeManager.allKeys.has(key);
       }
       return Reflect.has(theme, key);
     },
     get(_, key) {
       if (key === GetThemeUnwrapped) {
         return theme;
-      }
-      if (key === GetThemeManager) {
+      } else if (key === GetThemeManager) {
         return themeManager;
-      }
-      if (key === "name") {
+      } else if (key === GetIsNewTheme) {
+        return isNewTheme;
+      } else if (key === "name") {
         return name;
-      }
-      if (key === "className") {
+      } else if (key === "className") {
         return className;
-      }
-      if (!name || key === "__proto__" || typeof key === "symbol" || key === "$typeof") {
+      } else if (!name || key === "__proto__" || typeof key === "symbol" || key === "$typeof") {
         return Reflect.get(_, key);
       }
-      if (key[0] === "$") {
+      if (key[0] === "$")
         key = key.slice(1);
-      }
       if (!themeManager) {
         return theme[key];
       }
-      onStringKeyAccess == null ? void 0 : onStringKeyAccess(key);
       return themeManager.getValue(key);
     }
   });
 }
 const GetThemeManager = Symbol();
-const getThemeManager = (theme) => {
-  if (!theme)
-    return;
-  return theme[GetThemeManager];
-};
-function useThemeName(opts) {
-  if (isRSC) {
-    const config = getConfig();
-    return config.themes[Object.keys(config.themes)[0]];
-  }
-  const parent = useContext(ThemeManagerContext);
-  const [name, setName] = useState((parent == null ? void 0 : parent.name) || "");
-  useIsomorphicLayoutEffect(() => {
-    if (!parent)
-      return;
-    return parent.onChangeTheme((next, manager) => {
-      const name2 = (opts == null ? void 0 : opts.parent) ? manager.parentName || next : next;
-      if (!name2)
-        return;
-      setName(name2);
-    });
-  }, [parent]);
-  return name;
-}
-const useDefaultThemeName = () => {
-  var _a;
-  return (_a = useContext(ThemeContext)) == null ? void 0 : _a.defaultTheme;
-};
+const GetIsNewTheme = Symbol();
+const getThemeManager = (theme) => theme == null ? void 0 : theme[GetThemeManager];
+const getThemeIsNewTheme = (theme) => theme == null ? void 0 : theme[GetIsNewTheme];
 const activeThemeManagers = /* @__PURE__ */ new Set();
-const useChangeThemeEffect = (name, componentName, props, forceUpdateProp, uuid) => {
+const useChangeThemeEffect = (props, root = false) => {
+  const parentManager = useContext(ThemeManagerContext);
   const config = getConfig();
-  if (process.env.NODE_ENV === "development") {
-    if (!config) {
-      throw new Error(
-        `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.`
-      );
-    }
-  }
+  const { debug } = props;
+  const disable = props.disable;
   const { themes } = config;
   if (isRSC) {
-    const parentManager2 = new ThemeManager("light", "light", themes.light);
-    const next2 = parentManager2.getNextTheme({
-      name,
-      componentName,
-      themes,
-      reset: props == null ? void 0 : props.reset
-    });
     return {
-      ...next2,
+      ...createState().state,
       themes,
       themeManager: null
     };
   }
-  const debug = props && props["debug"];
-  const parentManager = useContext(ThemeManagerContext) || emptyManager;
-  const reset = (props == null ? void 0 : props.reset) || false;
-  const getThemeProps = {
-    name,
-    componentName,
-    themes,
-    reset
-  };
-  const next = parentManager.getNextTheme(getThemeProps, debug);
-  const forceUpdate = forceUpdateProp || useForceUpdate();
-  const themeManager = useMemo(() => {
-    return new ThemeManager(next.name, next.className, next.theme, parentManager, reset);
-  }, []);
-  let didChange = false;
-  if (process.env.TAMAGUI_TARGET === "native") {
-    didChange = Boolean(
-      (next == null ? void 0 : next.name) !== themeManager.name || (next == null ? void 0 : next.className) !== themeManager.className
-    );
-    if (didChange) {
-      themeManager.update(next, false, false);
-    }
+  if (disable) {
+    if (!parentManager)
+      throw new Error(`Disable topmost`);
+    return {
+      ...parentManager.state,
+      isNewTheme: false,
+      themes,
+      themeManager: parentManager
+    };
   }
+  const [themeState, setThemeState] = useState(createState);
+  const { isNewTheme, state, themeManager, mounted } = themeState;
   if (!isServer) {
     useLayoutEffect(() => {
-      themeManager.update(next, didChange);
+      if (disable)
+        return;
+      if (props.inverse && !mounted) {
+        setThemeState({ ...themeState, mounted: true });
+        return;
+      }
       activeThemeManagers.add(themeManager);
-      const disposeParentOnChange = parentManager.onChangeTheme(() => {
-        const next2 = parentManager.getNextTheme(getThemeProps, debug);
-        if (!next2)
-          return;
-        if (themeManager.update(next2)) {
-          if (uuid && !themeManager.isTracking(uuid)) {
-            return;
-          }
-          if (process.env.NODE_ENV === "development" && debug) {
-            console.log("Changed theme", componentName, next2, { props });
-          }
-          forceUpdate();
+      const disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme(() => {
+        if (!isNewTheme && !isWeb) {
+          setThemeState({
+            ...themeState,
+            state: { ...themeManager.state },
+            isNewTheme: false
+          });
+        } else {
+          updateState();
         }
       });
       return () => {
         activeThemeManagers.delete(themeManager);
-        disposeParentOnChange();
+        disposeChangeListener == null ? void 0 : disposeChangeListener();
       };
-    }, [didChange, themes, next == null ? void 0 : next.name, next == null ? void 0 : next.className, componentName, debug]);
+    }, [disable, state, isNewTheme, debug]);
+  }
+  if (process.env.NODE_ENV === "development" && debug)
+    console.log("useTheme.render isNewTheme", isNewTheme, props, themeManager.state.name, parentManager == null ? void 0 : parentManager.state.name);
+  if (hasNoThemeUpdatingProps(props)) {
+    if (!parentManager)
+      throw new Error(`Nada`);
+    return {
+      ...parentManager.state,
+      themes,
+      themeManager: parentManager,
+      isNewTheme: false
+    };
+  }
+  updateState();
+  if (!mounted && !parentManager) {
+    throw new Error(`Impossible`);
   }
   return {
-    ...parentManager && {
-      name: parentManager.name,
-      theme: parentManager.theme
-    },
-    ...next,
-    className: next.className === parentManager.className ? void 0 : next.className,
+    ...state,
+    isNewTheme,
     themes,
-    themeManager
+    themeManager,
+    ...!mounted && parentManager && {
+      ...parentManager.state,
+      isNewTheme: false,
+      themeManager: parentManager
+    }
   };
+  function createState(prev) {
+    const _ = new ThemeManager(props, root ? "root" : parentManager);
+    const isNewTheme2 = _ !== parentManager;
+    if (process.env.NODE_ENV === "development" && debug)
+      [console.groupCollapsed("useTheme create() isNewTheme", isNewTheme2), console.log("parent.state.name", parentManager == null ? void 0 : parentManager.state.name, "\n", "props", props, "\n", isClient ? parentManager : "", "getState", isNewTheme2 && isClient ? _.getState(props) : "", "\n", "state", isClient ? { ..._.state } : ""), console.groupEnd()];
+    const mounted2 = !props.inverse ? true : root || (prev == null ? void 0 : prev.mounted) || false;
+    return {
+      isNewTheme: isNewTheme2,
+      state: { ..._.state },
+      themeManager: _,
+      mounted: mounted2
+    };
+  }
+  function updateState() {
+    if (themeManager.getStateIfChanged(props, state, parentManager)) {
+      setThemeState(createState);
+    }
+  }
 };
 export {
   activeThemeManagers,
+  getThemeIsNewTheme,
   getThemeManager,
   useChangeThemeEffect,
-  useDefaultThemeName,
-  useTheme,
-  useThemeName
+  useTheme
 };
 //# sourceMappingURL=useTheme.js.map

package/dist/esm/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import { isRSC, isServer, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { createProxy } from '../helpers/createProxy'\nimport {\n  GetNextThemeProps,\n  ThemeManager,\n  ThemeManagerContext,\n  emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeParsed } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useServerRef } from './useServerHooks'\n\nexport interface ThemeProps {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ninterface UseThemeState {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any,\n  disableTracking?: boolean\n): ThemeParsed => {\n  // TODO this can use useChangeThemeEffect almost ready\n  if (isRSC) {\n    const config = getConfig()\n    // @ts-ignore\n    return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n  }\n\n  const state = useServerRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate,\n    state.current.uuid\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      // eslint-disable-next-line no-console\n      console.groupCollapsed('  \uD83D\uDD39 useTheme =>', name)\n      const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n      for (const key in logs) {\n        // eslint-disable-next-line no-console\n        console.log('  ', key, logs[key])\n      }\n      // eslint-disable-next-line no-console\n      console.groupEnd()\n    }\n  }\n\n  // track usage\n  state.current.isRendering = true\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  const debugProp = props && props['debug']\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.warn('No theme with name', themeName)\n    }\n    return themes[Object.keys(themes)[0]]\n  }\n\n  return useMemo(() => {\n    return getThemeProxied({\n      theme,\n      name,\n      className,\n      themeManager,\n      onStringKeyAccess(key) {\n        if (disableTracking) return\n        if (state) {\n          if (state.current.isRendering && !state.current.keys.has(key)) {\n            state.current.keys.add(key)\n            if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n              // eslint-disable-next-line no-console\n              console.log('  \uD83D\uDD38 tracking theme', key)\n            }\n          }\n        }\n      },\n    })\n  }, [theme, name, className, themeManager, debugProp, disableTracking])\n}\n\nfunction getThemeProxied({\n  theme,\n  name,\n  className,\n  themeManager,\n  onStringKeyAccess,\n}: {\n  theme: any\n  name: string\n  onStringKeyAccess?: (cb: string) => void\n  className?: string\n  themeManager?: ThemeManager | null\n}) {\n  return createProxy(theme, {\n    has(_, key) {\n      if (typeof key === 'string' && key[0] === '$') {\n        key = key.slice(1)\n      }\n      return Reflect.has(theme, key)\n    },\n    get(_, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      }\n      if (key === GetThemeManager) {\n        return themeManager\n      }\n      if (key === 'name') {\n        return name\n      }\n      if (key === 'className') {\n        return className\n      }\n      if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n        return Reflect.get(_, key)\n      }\n      // auto convert variables to plain\n      if (key[0] === '$') {\n        key = key.slice(1)\n      }\n      if (!themeManager) {\n        return theme[key]\n      }\n      onStringKeyAccess?.(key)\n      return themeManager.getValue(key)\n    },\n  })\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport function useThemeName(opts?: { parent?: true }): ThemeName {\n  if (isRSC) {\n    const config = getConfig()\n    return config.themes[Object.keys(config.themes)[0]] as any\n  }\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any,\n  uuid?: Object\n): {\n  themes: Record<string, ThemeParsed>\n  themeManager: ThemeManager | null\n  name: string\n  theme: ThemeParsed | null\n  className?: string\n} => {\n  const config = getConfig()\n\n  if (process.env.NODE_ENV === 'development') {\n    if (!config) {\n      throw new Error(\n        `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.`\n      )\n    }\n  }\n\n  const { themes } = config\n\n  if (isRSC) {\n    // we need context working for this to work well\n    const parentManager = new ThemeManager('light', 'light', themes.light)\n    const next = parentManager.getNextTheme({\n      name,\n      componentName,\n      themes,\n      reset: props?.reset,\n    })\n    return {\n      ...next,\n      themes,\n      themeManager: null,\n    }\n  }\n\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = {\n    name,\n    componentName,\n    themes,\n    reset,\n  }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n\n  const themeManager = useMemo(() => {\n    return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // not concurrent safe but fixes native (but breaks SSR and not needed on web (i think) so leave only on native)\n  let didChange = false\n  if (process.env.TAMAGUI_TARGET === 'native') {\n    didChange = Boolean(\n      next?.name !== themeManager.name || next?.className !== themeManager.className\n    )\n    if (didChange) {\n      themeManager.update(next, false, false)\n    }\n  }\n\n  if (!isServer) {\n    useLayoutEffect(() => {\n      themeManager.update(next, didChange)\n      activeThemeManagers.add(themeManager)\n\n      const disposeParentOnChange = parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          if (uuid && !themeManager.isTracking(uuid)) {\n            // no need to re-render if not tracking any keys\n            return\n          }\n          if (process.env.NODE_ENV === 'development' && debug) {\n            // eslint-disable-next-line no-console\n            console.log('Changed theme', componentName, next, { props })\n          }\n          forceUpdate()\n        }\n      })\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeParentOnChange()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [didChange, themes, next?.name, next?.className, componentName, debug])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    className: next.className === parentManager.className ? undefined : next.className,\n    themes,\n    themeManager,\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["name", "parentManager", "next"]
+  "sourcesContent": ["/* eslint-disable no-console */\nimport { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'\nimport { useContext, useLayoutEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { createProxy } from '../helpers/createProxy'\nimport { ThemeManager, ThemeManagerState, hasNoThemeUpdatingProps } from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { ThemeParsed, ThemeProps } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\n\nexport type ChangedThemeResponse = {\n  themes: Record<string, ThemeParsed>\n  themeManager: ThemeManager | null\n  name: string\n  isNewTheme?: boolean\n  theme?: ThemeParsed | null\n  className?: string\n}\n\nconst emptyProps = { name: null }\nexport const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {\n  if (isRSC) {\n    const config = getConfig()\n    const name = Object.keys(config.themes)[0]\n    return getThemeProxied({\n      theme: config.themes[name],\n      name,\n    })\n  }\n\n  const { name, theme, themes, themeManager, className, isNewTheme } = useChangeThemeEffect(props)\n\n  if (process.env.NODE_ENV === 'development') {\n    // ensure we aren't creating too many ThemeManagers\n    if (isWeb && isNewTheme && className === themeManager?.parentManager?.state.className) {\n      console.error(`Should always change, duplicating ThemeMananger bug`, themeManager)\n      // eslint-disable-next-line no-debugger\n      debugger\n    }\n    if (props.debug === 'verbose') {\n      console.groupCollapsed('  \uD83D\uDD39 useTheme =>', name)\n      const logs = { ...props, name, className, ...(isDevTools && { theme }) }\n      for (const key in logs) {\n        console.log('  ', key, logs[key])\n      }\n      console.groupEnd()\n    }\n  }\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn('No theme found', name, props, themeManager)\n    }\n    return themes[Object.keys(themes)[0]]\n  }\n\n  return useMemo(() => {\n    return getThemeProxied({\n      isNewTheme,\n      theme,\n      name,\n      className,\n      themeManager,\n    })\n  }, [theme, isNewTheme, name, className, themeManager])\n}\n\nfunction getThemeProxied({\n  theme,\n  name,\n  className,\n  themeManager,\n  isNewTheme,\n}: {\n  theme: any\n  name: string\n  className?: string\n  themeManager?: ThemeManager | null\n  isNewTheme?: boolean\n}) {\n  return createProxy(theme, {\n    has(_, key) {\n      if (typeof key === 'string') {\n        if (key[0] === '$') key = key.slice(1)\n        return themeManager?.allKeys.has(key)\n      }\n      return Reflect.has(theme, key)\n    },\n    get(_, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      } else if (key === GetThemeManager) {\n        return themeManager\n      } else if (key === GetIsNewTheme) {\n        return isNewTheme\n      } else if (key === 'name') {\n        return name\n      } else if (key === 'className') {\n        return className\n      } else if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n        return Reflect.get(_, key)\n      }\n      // auto convert variables to plain\n      if (key[0] === '$') key = key.slice(1)\n      if (!themeManager) {\n        return theme[key]\n      }\n      return themeManager.getValue(key)\n    },\n  })\n}\n\nconst GetThemeManager = Symbol()\nconst GetIsNewTheme = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => theme?.[GetThemeManager]\nexport const getThemeIsNewTheme = (theme: any): ThemeManager | undefined => theme?.[GetIsNewTheme]\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (props: ThemeProps, root = false): ChangedThemeResponse => {\n  const parentManager = useContext(ThemeManagerContext)\n  const config = getConfig()\n  const { debug } = props\n  // @ts-expect-error internal use only\n  const disable = props.disable\n  const { themes } = config\n  if (isRSC) {\n    // we need context working for this to work well\n    return {\n      ...createState().state,\n      themes,\n      themeManager: null,\n    }\n  }\n  if (disable) {\n    if (!parentManager) throw new Error(`Disable topmost`)\n    return {\n      ...parentManager.state,\n      isNewTheme: false,\n      themes,\n      themeManager: parentManager,\n    }\n  }\n\n  type State = {\n    isNewTheme: boolean\n    state: ThemeManagerState\n    themeManager: ThemeManager\n    mounted?: boolean\n  }\n\n  const [themeState, setThemeState] = useState<State>(createState)\n  const { isNewTheme, state, themeManager, mounted } = themeState\n\n  if (!isServer) {\n    useLayoutEffect(() => {\n      if (disable) return\n      // SSR safe inverse (because server can't know prefers scheme)\n      // could be done through fancy selectors like how we do prefers-media\n      // but may be a bit of explosion of selectors\n      if (props.inverse && !mounted) {\n        setThemeState({ ...themeState, mounted: true })\n        return\n      }\n      activeThemeManagers.add(themeManager)\n      const disposeChangeListener = parentManager?.onChangeTheme(() => {\n        if (!isNewTheme && !isWeb) {\n          setThemeState({\n            ...themeState,\n            state: { ...themeManager.state },\n            isNewTheme: false,\n          })\n        } else {\n          updateState()\n        }\n      })\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeChangeListener?.()\n      }\n    }, [disable, state, isNewTheme, debug])\n  }\n\n  // prettier-ignore\n  if (process.env.NODE_ENV === 'development' && debug) console.log('useTheme.render isNewTheme', isNewTheme, props, themeManager.state.name, parentManager?.state.name)\n\n  // this seems unnecessary\n  if (hasNoThemeUpdatingProps(props)) {\n    if (!parentManager) throw new Error(`Nada`)\n    return {\n      ...parentManager.state,\n      themes,\n      themeManager: parentManager,\n      isNewTheme: false,\n    }\n  }\n\n  // run inline in render\n  updateState()\n\n  if (!mounted && !parentManager) {\n    throw new Error(`Impossible`)\n  }\n\n  return {\n    ...state,\n    isNewTheme,\n    themes,\n    themeManager,\n    ...(!mounted &&\n      parentManager && {\n        ...parentManager.state,\n        isNewTheme: false,\n        themeManager: parentManager,\n      }),\n  }\n\n  function createState(prev?: State) {\n    const _ = new ThemeManager(props, root ? 'root' : parentManager)\n    const isNewTheme = _ !== parentManager\n    // prettier-ignore\n    if (process.env.NODE_ENV === 'development' && debug) [console.groupCollapsed('useTheme create() isNewTheme', isNewTheme), console.log('parent.state.name', parentManager?.state.name, '\\n', 'props', props, '\\n', isClient ? parentManager : '', 'getState', isNewTheme && isClient ? _.getState(props) : '', '\\n', 'state', isClient ? { ..._.state } : ''), console.groupEnd()]\n    // only inverse relies on this for ssr\n    const mounted = !props.inverse ? true : root || prev?.mounted || false\n    return {\n      // ThemeManager returns parentManager if no change\n      isNewTheme,\n      state: { ..._.state },\n      themeManager: _,\n      mounted,\n    }\n  }\n\n  function updateState() {\n    if (themeManager.getStateIfChanged(props, state, parentManager)) {\n      setThemeState(createState)\n    }\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["name", "isNewTheme", "mounted"]
 }

package/dist/esm/hooks/useThemeName.js

@@ -0,0 +1,28 @@
+import { isRSC, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { useContext, useState } from "react";
+import { getConfig } from "../config";
+import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
+function useThemeName(opts) {
+  if (isRSC) {
+    const config = getConfig();
+    return config.themes[Object.keys(config.themes)[0]];
+  }
+  const manager = useContext(ThemeManagerContext);
+  const [name, setName] = useState((manager == null ? void 0 : manager.state.name) || "");
+  useIsomorphicLayoutEffect(() => {
+    if (!manager)
+      return;
+    setName(manager.state.name);
+    return manager.onChangeTheme((next, manager2) => {
+      const name2 = (opts == null ? void 0 : opts.parent) ? manager2.state.parentName || next : next;
+      if (!name2)
+        return;
+      setName(name2);
+    });
+  }, [manager == null ? void 0 : manager.state.name]);
+  return name;
+}
+export {
+  useThemeName
+};
+//# sourceMappingURL=useThemeName.js.map

package/dist/esm/hooks/useThemeName.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useThemeName.tsx"],
+  "sourcesContent": ["import { isRSC, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useContext, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { ThemeName } from '../types'\n\nexport function useThemeName(opts?: { parent?: true }): ThemeName {\n  if (isRSC) {\n    const config = getConfig()\n    return config.themes[Object.keys(config.themes)[0]] as any\n  }\n  const manager = useContext(ThemeManagerContext)\n  const [name, setName] = useState(manager?.state.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!manager) return\n    setName(manager.state.name)\n    return manager.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.state.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [manager?.state.name])\n\n  return name\n}\n"],
+  "mappings": "AAAA,SAAS,OAAO,iCAAiC;AACjD,SAAS,YAAY,gBAAgB;AAErC,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AAG7B,SAAS,aAAa,MAAqC;AAChE,MAAI,OAAO;AACT,UAAM,SAAS,UAAU;AACzB,WAAO,OAAO,OAAO,OAAO,KAAK,OAAO,MAAM,EAAE;AAAA,EAClD;AACA,QAAM,UAAU,WAAW,mBAAmB;AAC9C,QAAM,CAAC,MAAM,OAAO,IAAI,UAAS,mCAAS,MAAM,SAAQ,EAAE;AAE1D,4BAA0B,MAAM;AAC9B,QAAI,CAAC;AAAS;AACd,YAAQ,QAAQ,MAAM,IAAI;AAC1B,WAAO,QAAQ,cAAc,CAAC,MAAMA,aAAY;AAC9C,YAAMC,SAAO,6BAAM,UAASD,SAAQ,MAAM,cAAc,OAAO;AAC/D,UAAI,CAACC;AAAM;AACX,cAAQA,KAAI;AAAA,IACd,CAAC;AAAA,EACH,GAAG,CAAC,mCAAS,MAAM,IAAI,CAAC;AAExB,SAAO;AACT;",
+  "names": ["manager", "name"]
+}

package/dist/esm/index.js

@@ -13,7 +13,7 @@ export * from "./updateTheme";
 export * from "./styled";
 export * from "./types";
 export * from "./setupReactNative";
-import { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from "./config";
+import { getConfig, getThemes, getTokens, onConfiguredOnce } from "./config";
 export * from "./constants/constants";
 export * from "./helpers/useShallowSetState";
 export * from "./helpers/getVariantExtras";
@@ -30,7 +30,7 @@ export * from "./helpers/isTamaguiComponent";
 export * from "./helpers/matchMedia";
 export * from "./helpers/themeable";
 export * from "./helpers/withStaticProperties";
-export * from "./contexts/ButtonInsideButtonContext";
+export * from "./contexts/ButtonNestingContext";
 export * from "./hooks/useId";
 export * from "./hooks/useIsTouchDevice";
 import {
@@ -45,15 +45,14 @@ import {
   mediaQueryConfig
 } from "./hooks/useMedia";
 export * from "./hooks/useTheme";
+export * from "./hooks/useThemeName";
 export * from "./hooks/useSafeRef";
 export * from "./views/Slot";
 export * from "./views/Stack";
 export * from "./views/Text";
 export * from "./contexts/TextAncestorContext";
 export * from "./views/Theme";
-export * from "./views/ThemeInverse";
 export * from "./views/ThemeProvider";
-export * from "./views/ThemeReset";
 export * from "./views/FontLanguage";
 export * from "./views/TamaguiProvider";
 export * from "@tamagui/use-force-update";
@@ -66,7 +65,6 @@ export {
   addMediaQueryListener,
   configureMedia,
   getConfig,
-  getHasConfigured,
   getMedia,
   getThemes,
   getTokens,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './addTheme'\nexport * from './updateTheme'\nexport * from './styled'\nexport * from './types'\nexport * from './setupReactNative'\n\n// for type portability\nexport type { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config'\n\nexport * from './constants/constants'\n\nexport * from './helpers/useShallowSetState'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getAnimationDriver'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/mergeProps'\nexport * from './helpers/expandStyles'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useId'\nexport * from './hooks/useIsTouchDevice'\n\nexport {\n  configureMedia,\n  getMedia,\n  mediaState,\n  useMedia,\n  useMediaPropsActive,\n  mediaObjectToString,\n  addMediaQueryListener,\n  removeMediaQueryListener,\n  mediaQueryConfig,\n} from './hooks/useMedia'\nexport * from './hooks/useTheme'\nexport * from './hooks/useSafeRef'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './contexts/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\nexport * from './views/FontLanguage'\nexport * from './views/TamaguiProvider'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-did-finish-ssr'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/compose-refs'\nexport * from '@tamagui/helpers'\nexport * from '@tamagui/constants'\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,SAAS,kBAAkB,WAAW,WAAW,WAAW,wBAAwB;AAEpF,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,cAAc;AACd,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './addTheme'\nexport * from './updateTheme'\nexport * from './styled'\nexport * from './types'\nexport * from './setupReactNative'\n\n// for type portability\nexport type { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getConfig, getThemes, getTokens, onConfiguredOnce } from './config'\n\nexport * from './constants/constants'\n\nexport * from './helpers/useShallowSetState'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getAnimationDriver'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/mergeProps'\nexport * from './helpers/expandStyles'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonNestingContext'\n\nexport * from './hooks/useId'\nexport * from './hooks/useIsTouchDevice'\n\nexport {\n  configureMedia,\n  getMedia,\n  mediaState,\n  useMedia,\n  useMediaPropsActive,\n  mediaObjectToString,\n  addMediaQueryListener,\n  removeMediaQueryListener,\n  mediaQueryConfig,\n} from './hooks/useMedia'\nexport * from './hooks/useTheme'\nexport * from './hooks/useThemeName'\nexport * from './hooks/useSafeRef'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './contexts/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeProvider'\nexport * from './views/FontLanguage'\nexport * from './views/TamaguiProvider'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-did-finish-ssr'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/compose-refs'\nexport * from '@tamagui/helpers'\nexport * from '@tamagui/constants'\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,SAAS,WAAW,WAAW,WAAW,wBAAwB;AAElE,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AAEd,cAAc;AACd,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/esm/setupReactNative.js

@@ -1,12 +1,24 @@
-let rn;
-function getReactNative() {
-  return rn;
+const ReactNativeStaticConfigs = /* @__PURE__ */ new WeakMap();
+function getReactNativeConfig(Component) {
+  return ReactNativeStaticConfigs.get(Component);
 }
-function setupReactNative(_) {
-  rn = _;
+function setupReactNative(rnExports) {
+  for (const key in rnExports) {
+    if (key[0].toLowerCase() === key[0])
+      continue;
+    if (!rnExports[key])
+      continue;
+    ReactNativeStaticConfigs.set(rnExports[key], {
+      isReactNative: true,
+      isText: key === "Text" || key === "TextInput",
+      isInput: key === "TextInput",
+      inlineProps: key === "Image" ? /* @__PURE__ */ new Set(["src", "width", "height"]) : void 0
+    });
+  }
 }
 export {
-  getReactNative,
+  ReactNativeStaticConfigs,
+  getReactNativeConfig,
   setupReactNative
 };
 //# sourceMappingURL=setupReactNative.js.map

package/dist/esm/setupReactNative.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/setupReactNative.ts"],
-  "sourcesContent": ["let rn\n\nexport function getReactNative() {\n  return rn\n}\n\nexport function setupReactNative(_) {\n  rn = _\n}\n"],
-  "mappings": "AAAA,IAAI;AAEG,SAAS,iBAAiB;AAC/B,SAAO;AACT;AAEO,SAAS,iBAAiB,GAAG;AAClC,OAAK;AACP;",
+  "sourcesContent": ["import { StaticConfig } from './types'\n\nexport const ReactNativeStaticConfigs = new WeakMap<any, Partial<StaticConfig> | null>()\n\nexport function getReactNativeConfig(Component: any) {\n  return ReactNativeStaticConfigs.get(Component)\n}\n\nexport function setupReactNative(rnExports: Record<string, any>) {\n  for (const key in rnExports) {\n    if (key[0].toLowerCase() === key[0]) continue\n    if (!rnExports[key]) continue\n    ReactNativeStaticConfigs.set(rnExports[key], {\n      isReactNative: true,\n      isText: key === 'Text' || key === 'TextInput',\n      isInput: key === 'TextInput',\n      inlineProps: key === 'Image' ? new Set(['src', 'width', 'height']) : undefined,\n    })\n  }\n}\n"],
+  "mappings": "AAEO,MAAM,2BAA2B,oBAAI,QAA2C;AAEhF,SAAS,qBAAqB,WAAgB;AACnD,SAAO,yBAAyB,IAAI,SAAS;AAC/C;AAEO,SAAS,iBAAiB,WAAgC;AAC/D,aAAW,OAAO,WAAW;AAC3B,QAAI,IAAI,GAAG,YAAY,MAAM,IAAI;AAAI;AACrC,QAAI,CAAC,UAAU;AAAM;AACrB,6BAAyB,IAAI,UAAU,MAAM;AAAA,MAC3C,eAAe;AAAA,MACf,QAAQ,QAAQ,UAAU,QAAQ;AAAA,MAClC,SAAS,QAAQ;AAAA,MACjB,aAAa,QAAQ,UAAU,oBAAI,IAAI,CAAC,OAAO,SAAS,QAAQ,CAAC,IAAI;AAAA,IACvE,CAAC;AAAA,EACH;AACF;",
   "names": []
 }