@tamagui/web 1.114.4 → 1.115.0

package/dist/cjs/hooks/useMedia.cjs

@@ -0,0 +1,227 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var useMedia_exports = {};
+__export(useMedia_exports, {
+  _dmt: () => _dmt,
+  configureMedia: () => configureMedia,
+  getMedia: () => getMedia,
+  getMediaImportanceIfMoreImportant: () => getMediaImportanceIfMoreImportant,
+  getMediaKeyImportance: () => getMediaKeyImportance,
+  getMediaState: () => getMediaState,
+  isMediaKey: () => isMediaKey,
+  mediaKeyMatch: () => mediaKeyMatch,
+  mediaKeyToQuery: () => mediaKeyToQuery,
+  mediaKeys: () => mediaKeys,
+  mediaObjectToString: () => mediaObjectToString,
+  mediaQueryConfig: () => mediaQueryConfig,
+  mediaState: () => mediaState,
+  setMediaShouldUpdate: () => setMediaShouldUpdate,
+  setupMediaListeners: () => setupMediaListeners,
+  useMedia: () => useMedia
+});
+module.exports = __toCommonJS(useMedia_exports);
+var import_react = __toESM(require("react")),
+  import_constants = require("@tamagui/constants"),
+  import_config = require("../config.cjs"),
+  import_matchMedia = require("../helpers/matchMedia.cjs"),
+  import_pseudoDescriptors = require("../helpers/pseudoDescriptors.cjs"),
+  import_useDisableSSR = require("./useDisableSSR.cjs");
+let mediaState =
+// development only safeguard
+process.env.NODE_ENV === "development" ? new Proxy({}, {
+  get(target, key) {
+    if (typeof key == "string" && key[0] === "$" &&
+    // dont error on $$typeof
+    key[1] !== "$") throw new Error(`Access mediaState should not use "$": ${key}`);
+    return Reflect.get(target, key);
+  }
+}) : {};
+const mediaQueryConfig = {},
+  getMedia = () => mediaState,
+  mediaKeys = /* @__PURE__ */new Set(),
+  mediaKeyRegex = /\$(platform|theme|group)-/,
+  isMediaKey = key => {
+    if (mediaKeys.has(key)) return !0;
+    if (key[0] === "$") {
+      const match = key.match(mediaKeyRegex);
+      if (match) return match[1];
+    }
+    return !1;
+  };
+let initState;
+const defaultMediaImportance = Object.keys(import_pseudoDescriptors.pseudoDescriptors).length;
+let mediaKeysOrdered;
+const getMediaKeyImportance = key => {
+    if (process.env.NODE_ENV === "development" && key[0] === "$") throw new Error("use short key");
+    return (0, import_config.getConfig)().settings.mediaPropOrder ? defaultMediaImportance : mediaKeysOrdered.indexOf(key) + 100;
+  },
+  dispose = /* @__PURE__ */new Set();
+let mediaVersion = 0;
+const configureMedia = config => {
+  const {
+      media
+    } = config,
+    mediaQueryDefaultActive = (0, import_config.getSetting)("mediaQueryDefaultActive");
+  if (media) {
+    mediaVersion++;
+    for (const key in media) mediaState[key] = mediaQueryDefaultActive?.[key] || !1, mediaKeys.add(`$${key}`);
+    Object.assign(mediaQueryConfig, media), initState = {
+      ...mediaState
+    }, mediaKeysOrdered = Object.keys(media), config.disableSSR ? setupMediaListeners() : updateCurrentState();
+  }
+};
+function unlisten() {
+  dispose.forEach(cb => cb()), dispose.clear();
+}
+let setupVersion = -1;
+function setupMediaListeners() {
+  if (!(import_constants.isWeb && import_constants.isServer) && setupVersion !== mediaVersion) {
+    setupVersion = mediaVersion, unlisten();
+    for (const key in mediaQueryConfig) {
+      let update = function () {
+        const next = !!getMatch().matches;
+        next !== mediaState[key] && (mediaState = {
+          ...mediaState,
+          [key]: next
+        }, updateCurrentState());
+      };
+      const str = mediaObjectToString(mediaQueryConfig[key], key),
+        getMatch = () => (0, import_matchMedia.matchMedia)(str),
+        match = getMatch();
+      if (!match) throw new Error("\u26A0\uFE0F No match");
+      match.addListener(update), dispose.add(() => {
+        match.removeListener(update);
+      }), update();
+    }
+  }
+}
+const listeners = /* @__PURE__ */new Set();
+let flushing = !1,
+  flushVersion = -1;
+function updateCurrentState() {
+  flushing && flushVersion === mediaVersion || (flushVersion = mediaVersion, flushing = !0, Promise.resolve().then(() => {
+    flushing = !1, listeners.forEach(cb => cb(mediaState));
+  }));
+}
+const States = /* @__PURE__ */new WeakMap();
+function setMediaShouldUpdate(ref, enabled, keys) {
+  const cur = States.get(ref);
+  (!cur || cur.enabled !== enabled || keys) && States.set(ref, {
+    ...cur,
+    enabled,
+    keys
+  });
+}
+function subscribe(subscriber) {
+  return listeners.add(subscriber), () => {
+    listeners.delete(subscriber);
+  };
+}
+function useMedia(uidIn, componentContext, debug) {
+  const uid = uidIn ?? import_react.default.useRef(),
+    disableSSR = (0, import_useDisableSSR.getDisableSSR)(componentContext),
+    initialState = (disableSSR || !import_constants.isWeb ? mediaState : initState) || {};
+  let componentState = States.get(uid);
+  componentState || (componentState = {
+    prev: initialState
+  }, States.set(uid, componentState));
+  const getSnapshot = () => {
+    if (!componentState) return initialState;
+    const {
+      enabled,
+      keys,
+      prev = initialState
+    } = componentState;
+    if (enabled === !1) return prev;
+    const testKeys = keys ?? (enabled && keys) ?? null;
+    return !testKeys || Object.keys(testKeys).every(key => mediaState[key] === prev[key]) ? prev : (componentState.prev = mediaState, mediaState);
+  };
+  let state;
+  if (process.env.TAMAGUI_SYNC_MEDIA_QUERY) state = import_react.default.useSyncExternalStore(subscribe, getSnapshot, () => initialState);else {
+    const [_state, setState] = import_react.default.useState(initialState);
+    state = _state, (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      function update() {
+        setState(getSnapshot);
+      }
+      return update(), disableSSR || Promise.resolve().then(() => {
+        update();
+      }), subscribe(update);
+    }, []);
+  }
+  return new Proxy(state, {
+    get(_, key) {
+      if (!disableMediaTouch) return typeof key == "string" && (componentState.keys ||= {}, componentState.keys[key] = !0, process.env.NODE_ENV === "development" && debug && console.info("useMedia() TOUCH", key)), Reflect.get(state, key);
+    }
+  });
+}
+let disableMediaTouch = !1;
+function _dmt(val) {
+  disableMediaTouch = val;
+}
+function getMediaState(mediaGroups, layout) {
+  disableMediaTouch = !0;
+  let res;
+  try {
+    res = Object.fromEntries([...mediaGroups].map(mediaKey => [mediaKey, mediaKeyMatch(mediaKey, layout)]));
+  } finally {
+    disableMediaTouch = !1;
+  }
+  return res;
+}
+const getMediaImportanceIfMoreImportant = (mediaKey, key, importancesUsed, isSizeMedia) => {
+  const importance = isSizeMedia && !(0, import_config.getSetting)("mediaPropOrder") ? getMediaKeyImportance(mediaKey) : defaultMediaImportance;
+  return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null;
+};
+function camelToHyphen(str) {
+  return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).toLowerCase();
+}
+const cache = /* @__PURE__ */new WeakMap(),
+  cachedMediaKeyToQuery = {};
+function mediaObjectToString(query, key) {
+  if (typeof query == "string") return query;
+  if (cache.has(query)) return cache.get(query);
+  const res = Object.entries(query).map(([feature, value]) => (feature = camelToHyphen(feature), typeof value == "string" ? `(${feature}: ${value})` : (typeof value == "number" && /[height|width]$/.test(feature) && (value = `${value}px`), `(${feature}: ${value})`))).join(" and ");
+  return key && (cachedMediaKeyToQuery[key] = res), cache.set(query, res), res;
+}
+function mediaKeyToQuery(key) {
+  return cachedMediaKeyToQuery[key] || mediaObjectToString(mediaQueryConfig[key], key);
+}
+function mediaKeyMatch(key, dimensions) {
+  const mediaQueries = mediaQueryConfig[key];
+  return Object.keys(mediaQueries).every(query => {
+    const expectedVal = +mediaQueries[query],
+      isMax = query.startsWith("max"),
+      isWidth = query.endsWith("Width"),
+      givenVal = dimensions[isWidth ? "width" : "height"];
+    return isMax ? givenVal < expectedVal : givenVal > expectedVal;
+  });
+}

package/dist/cjs/hooks/useProps.cjs

@@ -0,0 +1,108 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var useProps_exports = {};
+__export(useProps_exports, {
+  useProps: () => useProps,
+  usePropsAndStyle: () => usePropsAndStyle,
+  useStyle: () => useStyle
+});
+module.exports = __toCommonJS(useProps_exports);
+var import_react = __toESM(require("react")),
+  import_config = require("../config.cjs"),
+  import_ComponentContext = require("../contexts/ComponentContext.cjs"),
+  import_getSplitStyles = require("../helpers/getSplitStyles.cjs"),
+  import_subscribeToContextGroup = require("../helpers/subscribeToContextGroup.cjs"),
+  import_Stack = require("../views/Stack.cjs"),
+  import_useComponentState = require("./useComponentState.cjs"),
+  import_useMedia = require("./useMedia.cjs"),
+  import_useTheme = require("./useTheme.cjs");
+function useProps(props, opts) {
+  const [propsOut, styleOut] = usePropsAndStyle(props, {
+    ...opts,
+    noExpand: !0,
+    noNormalize: !0,
+    resolveValues: "none"
+  });
+  return {
+    ...propsOut,
+    ...styleOut
+  };
+}
+function useStyle(props, opts) {
+  return usePropsAndStyle(props, opts)[1] || {};
+}
+function usePropsAndStyle(props, opts) {
+  const staticConfig = opts?.forComponent?.staticConfig ?? import_Stack.Stack.staticConfig,
+    [themeState, theme] = (0, import_useTheme.useThemeWithState)({
+      componentName: staticConfig.componentName,
+      name: "theme" in props ? props.theme : void 0,
+      inverse: "themeInverse" in props ? props.themeInverse : void 0
+    }),
+    componentContext = import_react.default.useContext(import_ComponentContext.ComponentContext),
+    {
+      state,
+      disabled,
+      setStateShallow
+    } = (0, import_useComponentState.useComponentState)(props, componentContext, staticConfig, (0, import_config.getConfig)()),
+    mediaState = (0, import_useMedia.useMedia)(),
+    splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeState.state?.name || "", state, {
+      isAnimated: !1,
+      mediaState,
+      noSkip: !0,
+      noMergeStyle: !0,
+      noClassNames: !0,
+      resolveValues: "auto",
+      ...opts
+    }, null, componentContext),
+    {
+      mediaGroups,
+      pseudoGroups
+    } = splitStyles;
+  return import_react.default.useEffect(() => {
+    if (!disabled) {
+      if (state.unmounted) {
+        setStateShallow({
+          unmounted: !1
+        });
+        return;
+      }
+      return (0, import_subscribeToContextGroup.subscribeToContextGroup)({
+        disabled,
+        componentContext,
+        setStateShallow,
+        state,
+        mediaGroups,
+        pseudoGroups
+      });
+    }
+  }, [disabled, pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0, mediaGroups ? Object.keys([...mediaGroups]).join("") : 0]), [splitStyles.viewProps, splitStyles.style || {}, theme, mediaState];
+}

package/dist/cjs/hooks/useTheme.cjs

@@ -0,0 +1,277 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var useTheme_exports = {};
+__export(useTheme_exports, {
+  activeThemeManagers: () => activeThemeManagers,
+  getThemeManager: () => getThemeManager,
+  getThemeProxied: () => getThemeProxied,
+  useChangeThemeEffect: () => useChangeThemeEffect,
+  useTheme: () => useTheme,
+  useThemeWithState: () => useThemeWithState
+});
+module.exports = __toCommonJS(useTheme_exports);
+var import_react = __toESM(require("react")),
+  import_constants = require("@tamagui/constants"),
+  import_config = require("../config.cjs"),
+  import_createVariable = require("../createVariable.cjs"),
+  import_ThemeManager = require("../helpers/ThemeManager.cjs"),
+  import_ThemeManagerContext = require("../helpers/ThemeManagerContext.cjs"),
+  import_createShallowSetState = require("../helpers/createShallowSetState.cjs");
+const emptyProps = {
+  name: null
+};
+let cached;
+function getDefaultThemeProxied() {
+  if (cached) return cached;
+  const config = (0, import_config.getConfig)(),
+    name = config.themes.light ? "light" : Object.keys(config.themes)[0],
+    defaultTheme = config.themes[name];
+  return cached = getThemeProxied({
+    theme: defaultTheme,
+    name
+  }), cached;
+}
+const useTheme = (props = emptyProps) => {
+    const [_, theme] = useThemeWithState(props);
+    return theme || getDefaultThemeProxied();
+  },
+  useThemeWithState = props => {
+    const keys = import_react.default.useRef([]),
+      changedThemeState = useChangeThemeEffect(props, !1, keys.current, import_constants.isServer ? void 0 : () => {
+        const next = props.shouldUpdate?.() ?? (keys.current.length > 0 ? !0 : void 0);
+        return process.env.NODE_ENV === "development" && typeof props.debug == "string" && props.debug !== "profile" && console.info(`  \u{1F3A8} useTheme() shouldUpdate? tracking keys ${keys.current.length} ${props.shouldUpdate?.()}`, next), next;
+      }),
+      {
+        themeManager,
+        state
+      } = changedThemeState;
+    process.env.NODE_ENV === "development" && (state?.theme || process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.error(`[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(props)}).
+
+If this is intended and you are using Tamagui without any themes, you can disable this warning by setting the environment variable TAMAGUI_DISABLE_NO_THEME_WARNING=1`));
+    const themeProxied = import_react.default.useMemo(() => (keys.current = [], !themeManager || !state?.theme ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug)), [state?.theme, themeManager, props.deopt, props.debug]);
+    return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed(`  \u{1F539} [${themeManager?.id}] useTheme =>`, state?.name), console.info("returning state", changedThemeState.state, changedThemeState.isNewTheme, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
+  };
+function getThemeProxied({
+  theme,
+  name,
+  scheme
+}, deopt = !1, themeManager, keys, debug) {
+  if (!theme) return {};
+  const config = (0, import_config.getConfig)();
+  function track(key) {
+    keys && !keys.includes(key) && (keys.length || setTimeout(() => {
+      themeManager?.selfUpdate();
+    }), keys.push(key), process.env.NODE_ENV === "development" && debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`));
+  }
+  return new Proxy(theme, {
+    has(_, key) {
+      if (Reflect.has(theme, key)) return !0;
+      if (typeof key == "string") return key[0] === "$" && (key = key.slice(1)), themeManager?.allKeys.has(key);
+    },
+    get(_, key) {
+      if (
+      // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
+      // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
+      key !== "undefined" && typeof key == "string") {
+        const keyString = key[0] === "$" ? key.slice(1) : key,
+          val = theme[keyString];
+        if (val && typeof val == "object") return new Proxy(val, {
+          // when they touch the actual value we only track it
+          // if its a variable (web), its ignored!
+          get(_2, subkey) {
+            if (subkey === "val") globalThis.tamaguiAvoidTracking || (process.env.NODE_ENV === "development" && debug === "verbose" && console.info(" \u{1F3A8} useTheme() tracking new key because of .val access", new Error().stack), track(keyString));else if (subkey === "get") return platform => (0, import_createVariable.getVariable)(val);
+            return Reflect.get(val, subkey);
+          }
+        });
+        if (process.env.NODE_ENV === "development" && process.env.TAMAGUI_FEAT_THROW_ON_MISSING_THEME_VALUE === "1") throw new Error(`[tamagui] No theme key "${key}" found in theme ${name}. 
+  Keys in theme: ${Object.keys(theme).join(", ")}`);
+      }
+      return Reflect.get(_, key);
+    }
+  });
+}
+const activeThemeManagers = /* @__PURE__ */new Set(),
+  _uidToManager = /* @__PURE__ */new WeakMap(),
+  _idToUID = {},
+  getId = id => _idToUID[id],
+  getThemeManager = id => _uidToManager.get(getId(id)),
+  registerThemeManager = t => {
+    if (!_idToUID[t.id]) {
+      const id = _idToUID[t.id] = {};
+      _uidToManager.set(id, t);
+    }
+  },
+  ogLog = console.error,
+  preventWarnSetState = process.env.NODE_ENV === "production" ? ogLog :
+  // temporary fix for logs, they are harmless in that i've tried to rewrite this
+  // a few times using the "right" ways, but they are always slower. maybe skill issue
+  (a, ...args) => {
+    if (!(typeof a == "string" && a.includes("Cannot update a component"))) return ogLog(a, ...args);
+  },
+  useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
+    const {
+        disable
+      } = props,
+      parentManagerId = import_react.default.useContext(import_ThemeManagerContext.ThemeManagerIDContext),
+      parentManager = getThemeManager(parentManagerId);
+    if (!isRoot && !parentManager || disable) return {
+      isNewTheme: !1,
+      state: parentManager?.state,
+      themeManager: parentManager
+    };
+    const [themeState, setThemeState] = import_react.default.useState(createState),
+      {
+        state,
+        mounted,
+        isNewTheme,
+        themeManager,
+        inversed,
+        prevState
+      } = themeState,
+      isInversingOnMount = !!(!themeState.mounted && props.inverse);
+    function getShouldUpdateTheme(manager = themeManager, nextState, prevState2 = state, forceShouldChange = !1) {
+      const forceUpdate = shouldUpdate?.();
+      if (!manager || !forceShouldChange && forceUpdate === !1) return;
+      const next = nextState || manager.getState(props, parentManager);
+      if (forceShouldChange) return next;
+      if (next && !(forceUpdate !== !0 && !manager.getStateShouldChange(next, prevState2))) return next;
+    }
+    if (!import_constants.isWeb && themeManager && getShouldUpdateTheme(themeManager)) {
+      const next = createState(themeState);
+      next.state?.name !== themeState.state?.name && (setThemeState(next), console.error = preventWarnSetState, themeManager.notify(), console.error = ogLog);
+    }
+    if (import_constants.isServer || (import_react.default.useLayoutEffect(() => {
+      themeManager && state && prevState && state !== prevState && themeManager.notify();
+    }, [state]), import_react.default.useEffect(() => {
+      if (!themeManager) return;
+      if (props.inverse && !mounted) {
+        setThemeState(prev => createState({
+          ...prev,
+          mounted: !0
+        }));
+        return;
+      }
+      (isNewTheme || getShouldUpdateTheme(themeManager)) && (activeThemeManagers.add(themeManager), setThemeState(createState));
+      const selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
+          forced && setThemeState(prev => createState(prev, forced !== "self"));
+        }, !0),
+        disposeChangeListener = parentManager?.onChangeTheme((name, manager, forced) => {
+          const force = forced || shouldUpdate?.() || props.deopt || void 0,
+            shouldTryUpdate = force ?? !!(keys?.length || isNewTheme);
+          process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F538} onChange", {
+            id: themeManager.id,
+            force,
+            shouldTryUpdate,
+            props,
+            name,
+            keys
+          }), shouldTryUpdate && setThemeState(prev => createState(prev, force));
+        }, themeManager.id);
+      return () => {
+        selfListenerDispose(), disposeChangeListener?.(), isNewTheme && activeThemeManagers.delete(themeManager);
+      };
+    }, [themeManager, parentManager, isNewTheme, props.componentName, props.inverse, props.name, props.reset, mounted]), process.env.NODE_ENV === "development" && props.debug !== "profile" && import_react.default.useEffect(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
+      globalThis.TamaguiThemeManagers.delete(themeManager);
+    }), [themeManager])), import_constants.isWeb && isInversingOnMount) return {
+      isNewTheme: !1,
+      inversed: !1,
+      themeManager: parentManager,
+      state: {
+        name: "",
+        ...parentManager?.state,
+        className: ""
+      }
+    };
+    return {
+      state,
+      isNewTheme,
+      inversed,
+      themeManager
+    };
+    function createState(prev, force = !1) {
+      if (prev && shouldUpdate?.() === !1 && !force) return prev;
+      let themeManager2 = parentManager,
+        state2;
+      if ((0, import_ThemeManager.getHasThemeUpdatingProps)(props)) {
+        const getNewThemeManager = () => new import_ThemeManager.ThemeManager(props, isRoot ? "root" : parentManager);
+        if (prev?.themeManager) {
+          themeManager2 = prev.themeManager;
+          const forceChange = force || !!keys?.length,
+            next = themeManager2.getState(props, parentManager),
+            nextState = getShouldUpdateTheme(themeManager2, next, prev.state, forceChange);
+          nextState ? (state2 = nextState, !prev.isNewTheme && !isRoot ? themeManager2 = getNewThemeManager() : themeManager2.updateState(nextState)) : prev.isNewTheme && parentManager && !next && (themeManager2 = parentManager);
+        } else themeManager2 = getNewThemeManager(), state2 = {
+          ...themeManager2.state
+        };
+      }
+      const isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse);
+      isNewTheme2 && registerThemeManager(themeManager2);
+      const isWebSSR = import_constants.isWeb ? !(0, import_config.getSetting)("disableSSR") : !1,
+        mounted2 = isWebSSR ? isRoot || prev?.mounted : !0;
+      state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager));
+      const wasInversed = prev?.inversed,
+        isInherentlyInversed = isNewTheme2 && state2.scheme !== parentManager?.state.scheme,
+        inversed2 = isRoot ? !1 : isInherentlyInversed ? !0 : isWebSSR ? wasInversed != null ? !1 : null : props.inverse,
+        response = {
+          themeManager: themeManager2,
+          isNewTheme: isNewTheme2,
+          mounted: mounted2,
+          inversed: inversed2
+        },
+        shouldReturnPrev = prev && !force &&
+        // isEqualShallow uses the second arg as the keys so this should compare without state first...
+        (0, import_createShallowSetState.isEqualShallow)(prev, response) &&
+        // ... and then compare just the state, because we make a new state obj but is likely the same
+        (0, import_createShallowSetState.isEqualShallow)(prev.state, state2);
+      if (prev && shouldReturnPrev) return prev;
+      if (response.state = state2, response.prevState = prev?.state, process.env.NODE_ENV === "development" && props.debug && import_constants.isClient) {
+        console.groupCollapsed(`\u{1F537} [${themeManager2.id}] useChangeThemeEffect createState`);
+        const parentState = {
+            ...parentManager?.state
+          },
+          parentId = parentManager?.id,
+          themeManagerState = {
+            ...themeManager2.state
+          };
+        console.info({
+          props,
+          parentState,
+          parentId,
+          themeManager: themeManager2,
+          prev,
+          response,
+          themeManagerState
+        }), console.groupEnd();
+      }
+      return response;
+    }
+  };

package/dist/cjs/hooks/useThemeName.cjs

@@ -0,0 +1,50 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var useThemeName_exports = {};
+__export(useThemeName_exports, {
+  useThemeName: () => useThemeName
+});
+module.exports = __toCommonJS(useThemeName_exports);
+var import_react = __toESM(require("react")),
+  import_constants = require("@tamagui/constants"),
+  import_ThemeManagerContext = require("../helpers/ThemeManagerContext.cjs"),
+  import_useTheme = require("./useTheme.cjs");
+function useThemeName(opts) {
+  const manager = (0, import_useTheme.getThemeManager)(import_react.default.useContext(import_ThemeManagerContext.ThemeManagerIDContext)),
+    [name, setName] = import_react.default.useState(manager?.state.name || "");
+  return (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    if (manager) return setName(manager.state.name), manager.onChangeTheme((next, manager2) => {
+      const name2 = opts?.parent && manager2.state.parentName || next;
+      name2 && setName(name2);
+    });
+  }, [manager?.state.name]), name;
+}