@tamagui/web 1.15.8 → 1.15.9

package/dist/esm/helpers/themeable.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/themeable.tsx"],
-  "sourcesContent": ["import React, { forwardRef, useId } from 'react'\n\nimport { DebugProp, ThemeName } from '../types.js'\nimport { Theme } from '../views/Theme.js'\n\nexport interface ThemeableProps {\n  theme?: ThemeName | null\n  themeInverse?: boolean\n  themeReset?: boolean\n  componentName?: string\n  debug?: DebugProp\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {\n    const { themeInverse, theme, componentName, themeReset, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n\n    return (\n      <Theme\n        inverse={themeInverse}\n        componentName={componentName || opts?.componentName}\n        name={(theme as any) || null}\n        data-themeable\n        debug={props.debug}\n        reset={props.themeReset}\n      >\n        {element}\n      </Theme>\n    )\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R\n    : unknown\n}\n"],
-  "mappings": "AAsBM;AAtBN,OAAO,SAAS,kBAAyB;AAGzC,SAAS,aAAa;AAUf,SAAS,UACd,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,SAAS,UAAU,OAAuB,KAAK;AACnF,UAAM,EAAE,cAAc,OAAO,eAAe,YAAY,GAAG,KAAK,IAAI;AACpE,UAAM,UAAU,MAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AAEtE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe,kBAAiB,6BAAM;AAAA,QACtC,MAAO,SAAiB;AAAA,QACxB,kBAAc;AAAA,QACd,OAAO,MAAM;AAAA,QACb,OAAO,MAAM;AAAA,QAEZ;AAAA;AAAA,IACH;AAAA,EAEJ,CAAC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,WACrB,uCAAmB,iBAAgB,uCAAmB,SAAQ;AAGjE,SAAO;AAGT;",
+  "sourcesContent": ["import React, { forwardRef, useId } from 'react'\n\nimport { DebugProp, ThemeName } from '../types.js'\nimport { Theme } from '../views/Theme.js'\n\nexport interface ThemeableProps {\n  theme?: ThemeName | null\n  themeInverse?: boolean\n  themeReset?: boolean\n  componentName?: string\n  debug?: DebugProp\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {\n    const { themeInverse, theme, componentName, themeReset, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n\n    return (\n      <Theme\n        inverse={themeInverse}\n        componentName={componentName || opts?.componentName}\n        name={(theme as any) || null}\n        disable-child-theme\n        debug={props.debug}\n        reset={props.themeReset}\n      >\n        {element}\n      </Theme>\n    )\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R\n    : unknown\n}\n"],
+  "mappings": "AAsBM;AAtBN,OAAO,SAAS,kBAAyB;AAGzC,SAAS,aAAa;AAUf,SAAS,UACd,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,SAAS,UAAU,OAAuB,KAAK;AACnF,UAAM,EAAE,cAAc,OAAO,eAAe,YAAY,GAAG,KAAK,IAAI;AACpE,UAAM,UAAU,MAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AAEtE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe,kBAAiB,6BAAM;AAAA,QACtC,MAAO,SAAiB;AAAA,QACxB,uBAAmB;AAAA,QACnB,OAAO,MAAM;AAAA,QACb,OAAO,MAAM;AAAA,QAEZ;AAAA;AAAA,IACH;AAAA,EAEJ,CAAC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,WACrB,uCAAmB,iBAAgB,uCAAmB,SAAQ;AAGjE,SAAO;AAGT;",
   "names": []
 }

package/dist/esm/hooks/useTheme.js

@@ -126,13 +126,13 @@ const useChangeThemeEffect = (props, root = false, keys, disableUpdate) => {
   const { state, themeManager, mounted, isNewTheme } = themeState;
   const isInversingOnMount = Boolean(!themeState.mounted && props.inverse);
   const shouldReturnParentState = isInversingOnMount;
-  function getShouldUpdateTheme(manager = themeManager, nextState, forceShouldChange = false) {
+  function getShouldUpdateTheme(manager = themeManager, nextState, prevState = state, forceShouldChange = false) {
     const next = nextState || manager.getState(props, parentManager);
     if (!next)
       return;
     if ((disableUpdate == null ? void 0 : disableUpdate()) === true)
       return;
-    if (!forceShouldChange && !manager.getStateShouldChange(next, state))
+    if (!forceShouldChange && !manager.getStateShouldChange(next, prevState))
       return;
     return next;
   }
@@ -221,7 +221,7 @@ const useChangeThemeEffect = (props, root = false, keys, disableUpdate) => {
       themeManager2 = prev.themeManager;
       const forceChange = Boolean(keys == null ? void 0 : keys.length);
       const next = themeManager2.getState(props, parentManager);
-      const nextState = getShouldUpdateTheme(themeManager2, next, forceChange);
+      const nextState = getShouldUpdateTheme(themeManager2, next, prev.state, forceChange);
       if (nextState) {
         state2 = nextState;
         if (!prev.isNewTheme || !isWeb) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["/* eslint-disable no-console */\nimport { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'\nimport { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config.js'\nimport { isDevTools } from '../constants/isDevTools.js'\nimport { isVariable } from '../createVariable.js'\nimport { createProxy } from '../helpers/createProxy.js'\nimport {\n  ThemeManager,\n  ThemeManagerState,\n  getNonComponentParentManager,\n  hasNoThemeUpdatingProps,\n} from '../helpers/ThemeManager.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport type { ThemeParsed, ThemeProps } from '../types.js'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped.js'\nimport { useServerRef } from './useServerHooks.js'\n\nexport type ChangedThemeResponse = {\n  isNewTheme: boolean\n  themeManager: ThemeManager | null\n  name: string\n  theme?: ThemeParsed | null\n  className?: string\n}\n\ntype State = {\n  state: ThemeManagerState\n  themeManager: ThemeManager\n  isNewTheme: boolean\n  mounted?: boolean\n}\n\nconst emptyProps = { name: null }\n\nfunction getDefaultThemeProxied() {\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\nexport const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {\n  return (isRSC ? null : useThemeWithState(props)?.theme) || getDefaultThemeProxied()\n}\n\nexport const useThemeWithState = (props: ThemeProps) => {\n  const keys = useServerRef<string[]>([])\n\n  const changedTheme = useChangeThemeEffect(\n    props,\n    false,\n    keys.current,\n    isClient\n      ? () => {\n          return props.shouldUpdate?.() ?? keys.current.length === 0\n        }\n      : undefined\n  )\n\n  const { themeManager, theme, name, className } = changedTheme\n\n  if (process.env.NODE_ENV === 'development' && 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  if (!changedTheme.theme) {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn('No theme found', name, props, themeManager)\n    }\n    return null\n  }\n\n  const proxiedTheme = useMemo(() => {\n    return getThemeProxied(changedTheme as any, keys.current)\n  }, [theme, name, className, themeManager])\n\n  return {\n    ...changedTheme,\n    theme: proxiedTheme,\n  }\n}\n\nexport function getThemeProxied(\n  {\n    theme,\n    themeManager,\n  }: Partial<ChangedThemeResponse> & {\n    theme: ThemeParsed\n  },\n  keys?: string[]\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      }\n      if (\n        key === '__proto__' ||\n        key === '$typeof' ||\n        typeof key !== 'string' ||\n        !themeManager\n      ) {\n        return Reflect.get(_, key)\n      }\n\n      // auto convert variables to plain\n      const keyString = key[0] === '$' ? key.slice(1) : key\n      const val = themeManager.getValue(keyString)\n\n      if (val && keys) {\n        return new Proxy(val as any, {\n          // when they touch the actual value we only track it\n          // if its a variable (web), its ignored!\n          get(_, subkey) {\n            if (subkey === 'val' && !keys.includes(keyString)) {\n              keys.push(keyString)\n            }\n            return Reflect.get(val as any, subkey)\n          },\n        })\n      }\n\n      return val\n    },\n  })\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  props: ThemeProps,\n  root = false,\n  keys?: string[],\n  disableUpdate?: () => boolean\n): ChangedThemeResponse => {\n  if (isRSC) {\n    // we need context working for this to work well\n    return {\n      isNewTheme: false,\n      ...createState().state,\n      themeManager: null,\n    }\n  }\n\n  const {\n    debug,\n    // @ts-expect-error internal use only\n    disable,\n  } = props\n\n  let parentManager = useContext(ThemeManagerContext)\n\n  if (!disable) {\n    parentManager = getNonComponentParentManager(parentManager)\n  }\n\n  if (disable) {\n    if (!parentManager) throw `\u274C`\n    return {\n      isNewTheme: false,\n      ...parentManager.state,\n      themeManager: parentManager,\n    }\n  }\n\n  const [themeState, setThemeState] = useState<State>(createState)\n  const { state, themeManager, mounted, isNewTheme } = themeState\n  const isInversingOnMount = Boolean(!themeState.mounted && props.inverse)\n  const shouldReturnParentState = isInversingOnMount\n\n  function getShouldUpdateTheme(\n    manager = themeManager,\n    nextState?: ThemeManagerState | null,\n    forceShouldChange = false\n  ) {\n    const next = nextState || manager.getState(props, parentManager)\n    if (!next) return\n    if (disableUpdate?.() === true) return\n    if (!forceShouldChange && !manager.getStateShouldChange(next, state)) return\n    return next\n  }\n\n  if (!isServer) {\n    useEffect(() => {\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\n      if (!isNewTheme) return\n      if (!themeManager) return\n\n      activeThemeManagers.add(themeManager)\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n      }\n    }, [isNewTheme, themeManager, state])\n\n    // listen for parent change + notify children change\n    useLayoutEffect(() => {\n      const nextState = getShouldUpdateTheme(themeManager)\n\n      if (nextState) {\n        if (isNewTheme) {\n          // if it's a new theme we can just update + publish to children\n          themeManager.updateState(nextState, true)\n        }\n\n        // if not we will be creating a whole new themeManager\n        setThemeState(createState)\n      } else {\n        if (isNewTheme) {\n          // need to revert to parent\n          setThemeState(createState)\n        }\n      }\n\n      const disposeChangeListener = parentManager?.onChangeTheme((name, manager) => {\n        const shouldUpdate = Boolean(keys?.length || isNewTheme)\n        if (shouldUpdate) {\n          if (process.env.NODE_ENV === 'development' && props['debug']) {\n            console.log(`onChangeTheme`, shouldUpdate, { props, name, manager, keys })\n          }\n          setThemeState(createState)\n        }\n      }, themeManager.id)\n\n      return () => {\n        disposeChangeListener?.()\n      }\n    }, [\n      parentManager,\n      isNewTheme,\n      props.componentName,\n      props.inverse,\n      props.name,\n      props.reset,\n    ])\n\n    if (process.env.NODE_ENV === 'development') {\n      useEffect(() => {\n        globalThis['TamaguiThemeManagers'] ??= new Set()\n        globalThis['TamaguiThemeManagers'].add(themeManager)\n        return () => {\n          globalThis['TamaguiThemeManagers'].delete(themeManager)\n        }\n      }, [themeManager])\n    }\n  }\n\n  if (shouldReturnParentState) {\n    if (!parentManager) throw 'impossible'\n    return {\n      isNewTheme: false,\n      ...parentManager.state,\n      className: isInversingOnMount ? '' : parentManager.state.className,\n      themeManager: parentManager,\n    }\n  }\n\n  return {\n    ...state,\n    isNewTheme,\n    themeManager,\n  }\n\n  function createState(prev?: State): State {\n    if (prev && disableUpdate?.()) {\n      return prev\n    }\n\n    //  returns previous theme manager if no change\n    let themeManager: ThemeManager\n    let state: ThemeManagerState | undefined\n\n    const getNewThemeManager = () => {\n      return new ThemeManager(props, root ? 'root' : parentManager)\n    }\n\n    if (prev?.themeManager) {\n      themeManager = prev.themeManager\n\n      // this could be a bit better, problem is on toggling light/dark the state is actually\n      // showing light even when the last was dark. but technically allso onChangeTheme should\n      // basically always call on a change, so i'm wondering if we even need the shouldUpdate\n      // at all anymore. this forces updates onChangeTheme for all dynamic style accessed components\n      // which is correct, potentially in the future we can avoid forceChange and just know to\n      // update if keys.length is set + onChangeTheme called\n      const forceChange = Boolean(keys?.length)\n\n      const next = themeManager.getState(props, parentManager)\n      const nextState = getShouldUpdateTheme(themeManager, next, forceChange)\n\n      if (nextState) {\n        state = nextState\n\n        if (!prev.isNewTheme || !isWeb) {\n          themeManager = getNewThemeManager()\n        } else {\n          themeManager.updateState(nextState, true)\n        }\n      } else {\n        if (prev.isNewTheme) {\n          // reset to parent\n          if (parentManager && !next) {\n            themeManager = parentManager\n          }\n        }\n      }\n    } else {\n      themeManager = getNewThemeManager()\n    }\n\n    const isNewTheme = Boolean(themeManager !== parentManager)\n\n    // only inverse relies on this for ssr\n    const mounted = !props.inverse ? true : root || prev?.mounted\n\n    if (!state) {\n      state = isNewTheme ? { ...themeManager.state } : { ...parentManager!.state }\n    }\n\n    const response = {\n      state,\n      themeManager,\n      isNewTheme,\n      mounted,\n    }\n\n    if (process.env.NODE_ENV === 'development' && props['debug']) {\n      console.groupCollapsed(` \uD83D\uDD37 ${themeManager.id} useChangeThemeEffect createState`)\n      const parentState = { ...parentManager?.state }\n      const parentId = parentManager?.id\n      const themeManagerState = { ...themeManager.state }\n      console.log({\n        props,\n        parentState,\n        parentId,\n        themeManager,\n        prev,\n        response,\n        themeManagerState,\n      })\n      console.groupEnd()\n    }\n\n    return response\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable no-console */\nimport { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'\nimport { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config.js'\nimport { isDevTools } from '../constants/isDevTools.js'\nimport { isVariable } from '../createVariable.js'\nimport { createProxy } from '../helpers/createProxy.js'\nimport {\n  ThemeManager,\n  ThemeManagerState,\n  getNonComponentParentManager,\n  hasNoThemeUpdatingProps,\n} from '../helpers/ThemeManager.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport type { ThemeParsed, ThemeProps } from '../types.js'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped.js'\nimport { useServerRef } from './useServerHooks.js'\n\nexport type ChangedThemeResponse = {\n  isNewTheme: boolean\n  themeManager: ThemeManager | null\n  name: string\n  theme?: ThemeParsed | null\n  className?: string\n}\n\ntype State = {\n  state: ThemeManagerState\n  themeManager: ThemeManager\n  isNewTheme: boolean\n  mounted?: boolean\n}\n\nconst emptyProps = { name: null }\n\nfunction getDefaultThemeProxied() {\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\nexport const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {\n  return (isRSC ? null : useThemeWithState(props)?.theme) || getDefaultThemeProxied()\n}\n\nexport const useThemeWithState = (props: ThemeProps) => {\n  const keys = useServerRef<string[]>([])\n\n  const changedTheme = useChangeThemeEffect(\n    props,\n    false,\n    keys.current,\n    isClient\n      ? () => {\n          return props.shouldUpdate?.() ?? keys.current.length === 0\n        }\n      : undefined\n  )\n\n  const { themeManager, theme, name, className } = changedTheme\n\n  if (process.env.NODE_ENV === 'development' && 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  if (!changedTheme.theme) {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn('No theme found', name, props, themeManager)\n    }\n    return null\n  }\n\n  const proxiedTheme = useMemo(() => {\n    return getThemeProxied(changedTheme as any, keys.current)\n  }, [theme, name, className, themeManager])\n\n  return {\n    ...changedTheme,\n    theme: proxiedTheme,\n  }\n}\n\nexport function getThemeProxied(\n  {\n    theme,\n    themeManager,\n  }: Partial<ChangedThemeResponse> & {\n    theme: ThemeParsed\n  },\n  keys?: string[]\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      }\n      if (\n        key === '__proto__' ||\n        key === '$typeof' ||\n        typeof key !== 'string' ||\n        !themeManager\n      ) {\n        return Reflect.get(_, key)\n      }\n\n      // auto convert variables to plain\n      const keyString = key[0] === '$' ? key.slice(1) : key\n      const val = themeManager.getValue(keyString)\n\n      if (val && keys) {\n        return new Proxy(val as any, {\n          // when they touch the actual value we only track it\n          // if its a variable (web), its ignored!\n          get(_, subkey) {\n            if (subkey === 'val' && !keys.includes(keyString)) {\n              keys.push(keyString)\n            }\n            return Reflect.get(val as any, subkey)\n          },\n        })\n      }\n\n      return val\n    },\n  })\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  props: ThemeProps,\n  root = false,\n  keys?: string[],\n  disableUpdate?: () => boolean\n): ChangedThemeResponse => {\n  if (isRSC) {\n    // we need context working for this to work well\n    return {\n      isNewTheme: false,\n      ...createState().state,\n      themeManager: null,\n    }\n  }\n\n  const {\n    debug,\n    // @ts-expect-error internal use only\n    disable,\n  } = props\n\n  let parentManager = useContext(ThemeManagerContext)\n\n  if (!disable) {\n    parentManager = getNonComponentParentManager(parentManager)\n  }\n\n  if (disable) {\n    if (!parentManager) throw `\u274C`\n    return {\n      isNewTheme: false,\n      ...parentManager.state,\n      themeManager: parentManager,\n    }\n  }\n\n  const [themeState, setThemeState] = useState<State>(createState)\n  const { state, themeManager, mounted, isNewTheme } = themeState\n  const isInversingOnMount = Boolean(!themeState.mounted && props.inverse)\n  const shouldReturnParentState = isInversingOnMount\n\n  function getShouldUpdateTheme(\n    manager = themeManager,\n    nextState?: ThemeManagerState | null,\n    prevState: ThemeManagerState = state,\n    forceShouldChange = false\n  ) {\n    const next = nextState || manager.getState(props, parentManager)\n    if (!next) return\n    if (disableUpdate?.() === true) return\n    if (!forceShouldChange && !manager.getStateShouldChange(next, prevState)) return\n    return next\n  }\n\n  if (!isServer) {\n    useEffect(() => {\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\n      if (!isNewTheme) return\n      if (!themeManager) return\n\n      activeThemeManagers.add(themeManager)\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n      }\n    }, [isNewTheme, themeManager, state])\n\n    // listen for parent change + notify children change\n    useLayoutEffect(() => {\n      const nextState = getShouldUpdateTheme(themeManager)\n\n      if (nextState) {\n        if (isNewTheme) {\n          // if it's a new theme we can just update + publish to children\n          themeManager.updateState(nextState, true)\n        }\n\n        // if not we will be creating a whole new themeManager\n        setThemeState(createState)\n      } else {\n        if (isNewTheme) {\n          // need to revert to parent\n          setThemeState(createState)\n        }\n      }\n\n      const disposeChangeListener = parentManager?.onChangeTheme((name, manager) => {\n        const shouldUpdate = Boolean(keys?.length || isNewTheme)\n        if (shouldUpdate) {\n          if (process.env.NODE_ENV === 'development' && props['debug']) {\n            console.log(`onChangeTheme`, shouldUpdate, { props, name, manager, keys })\n          }\n          setThemeState(createState)\n        }\n      }, themeManager.id)\n\n      return () => {\n        disposeChangeListener?.()\n      }\n    }, [\n      parentManager,\n      isNewTheme,\n      props.componentName,\n      props.inverse,\n      props.name,\n      props.reset,\n    ])\n\n    if (process.env.NODE_ENV === 'development') {\n      useEffect(() => {\n        globalThis['TamaguiThemeManagers'] ??= new Set()\n        globalThis['TamaguiThemeManagers'].add(themeManager)\n        return () => {\n          globalThis['TamaguiThemeManagers'].delete(themeManager)\n        }\n      }, [themeManager])\n    }\n  }\n\n  if (shouldReturnParentState) {\n    if (!parentManager) throw 'impossible'\n    return {\n      isNewTheme: false,\n      ...parentManager.state,\n      className: isInversingOnMount ? '' : parentManager.state.className,\n      themeManager: parentManager,\n    }\n  }\n\n  return {\n    ...state,\n    isNewTheme,\n    themeManager,\n  }\n\n  function createState(prev?: State): State {\n    if (prev && disableUpdate?.()) {\n      return prev\n    }\n\n    //  returns previous theme manager if no change\n    let themeManager: ThemeManager\n    let state: ThemeManagerState | undefined\n\n    const getNewThemeManager = () => {\n      return new ThemeManager(props, root ? 'root' : parentManager)\n    }\n\n    if (prev?.themeManager) {\n      themeManager = prev.themeManager\n\n      // this could be a bit better, problem is on toggling light/dark the state is actually\n      // showing light even when the last was dark. but technically allso onChangeTheme should\n      // basically always call on a change, so i'm wondering if we even need the shouldUpdate\n      // at all anymore. this forces updates onChangeTheme for all dynamic style accessed components\n      // which is correct, potentially in the future we can avoid forceChange and just know to\n      // update if keys.length is set + onChangeTheme called\n      const forceChange = Boolean(keys?.length)\n      const next = themeManager.getState(props, parentManager)\n      const nextState = getShouldUpdateTheme(themeManager, next, prev.state, forceChange)\n\n      if (nextState) {\n        state = nextState\n\n        if (!prev.isNewTheme || !isWeb) {\n          themeManager = getNewThemeManager()\n        } else {\n          themeManager.updateState(nextState, true)\n        }\n      } else {\n        if (prev.isNewTheme) {\n          // reset to parent\n          if (parentManager && !next) {\n            themeManager = parentManager\n          }\n        }\n      }\n    } else {\n      themeManager = getNewThemeManager()\n    }\n\n    const isNewTheme = Boolean(themeManager !== parentManager)\n\n    // only inverse relies on this for ssr\n    const mounted = !props.inverse ? true : root || prev?.mounted\n\n    if (!state) {\n      state = isNewTheme ? { ...themeManager.state } : { ...parentManager!.state }\n    }\n\n    const response = {\n      state,\n      themeManager,\n      isNewTheme,\n      mounted,\n    }\n\n    if (process.env.NODE_ENV === 'development' && props['debug']) {\n      console.groupCollapsed(` \uD83D\uDD37 ${themeManager.id} useChangeThemeEffect createState`)\n      const parentState = { ...parentManager?.state }\n      const parentId = parentManager?.id\n      const themeManagerState = { ...themeManager.state }\n      console.log({\n        props,\n        parentState,\n        parentId,\n        themeManager,\n        prev,\n        response,\n        themeManagerState,\n      })\n      console.groupEnd()\n    }\n\n    return response\n  }\n}\n"],
+  "mappings": "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",
   "names": ["_", "themeManager", "state", "isNewTheme", "mounted"]
 }

package/dist/esm/hooks/useTheme.mjs

@@ -126,13 +126,13 @@ const useChangeThemeEffect = (props, root = false, keys, disableUpdate) => {
   const { state, themeManager, mounted, isNewTheme } = themeState;
   const isInversingOnMount = Boolean(!themeState.mounted && props.inverse);
   const shouldReturnParentState = isInversingOnMount;
-  function getShouldUpdateTheme(manager = themeManager, nextState, forceShouldChange = false) {
+  function getShouldUpdateTheme(manager = themeManager, nextState, prevState = state, forceShouldChange = false) {
     const next = nextState || manager.getState(props, parentManager);
     if (!next)
       return;
     if ((disableUpdate == null ? void 0 : disableUpdate()) === true)
       return;
-    if (!forceShouldChange && !manager.getStateShouldChange(next, state))
+    if (!forceShouldChange && !manager.getStateShouldChange(next, prevState))
       return;
     return next;
   }
@@ -221,7 +221,7 @@ const useChangeThemeEffect = (props, root = false, keys, disableUpdate) => {
       themeManager2 = prev.themeManager;
       const forceChange = Boolean(keys == null ? void 0 : keys.length);
       const next = themeManager2.getState(props, parentManager);
-      const nextState = getShouldUpdateTheme(themeManager2, next, forceChange);
+      const nextState = getShouldUpdateTheme(themeManager2, next, prev.state, forceChange);
       if (nextState) {
         state2 = nextState;
         if (!prev.isNewTheme || !isWeb) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["/* eslint-disable no-console */\nimport { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'\nimport { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config.js'\nimport { isDevTools } from '../constants/isDevTools.js'\nimport { isVariable } from '../createVariable.js'\nimport { createProxy } from '../helpers/createProxy.js'\nimport {\n  ThemeManager,\n  ThemeManagerState,\n  getNonComponentParentManager,\n  hasNoThemeUpdatingProps,\n} from '../helpers/ThemeManager.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport type { ThemeParsed, ThemeProps } from '../types.js'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped.js'\nimport { useServerRef } from './useServerHooks.js'\n\nexport type ChangedThemeResponse = {\n  isNewTheme: boolean\n  themeManager: ThemeManager | null\n  name: string\n  theme?: ThemeParsed | null\n  className?: string\n}\n\ntype State = {\n  state: ThemeManagerState\n  themeManager: ThemeManager\n  isNewTheme: boolean\n  mounted?: boolean\n}\n\nconst emptyProps = { name: null }\n\nfunction getDefaultThemeProxied() {\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\nexport const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {\n  return (isRSC ? null : useThemeWithState(props)?.theme) || getDefaultThemeProxied()\n}\n\nexport const useThemeWithState = (props: ThemeProps) => {\n  const keys = useServerRef<string[]>([])\n\n  const changedTheme = useChangeThemeEffect(\n    props,\n    false,\n    keys.current,\n    isClient\n      ? () => {\n          return props.shouldUpdate?.() ?? keys.current.length === 0\n        }\n      : undefined\n  )\n\n  const { themeManager, theme, name, className } = changedTheme\n\n  if (process.env.NODE_ENV === 'development' && 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  if (!changedTheme.theme) {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn('No theme found', name, props, themeManager)\n    }\n    return null\n  }\n\n  const proxiedTheme = useMemo(() => {\n    return getThemeProxied(changedTheme as any, keys.current)\n  }, [theme, name, className, themeManager])\n\n  return {\n    ...changedTheme,\n    theme: proxiedTheme,\n  }\n}\n\nexport function getThemeProxied(\n  {\n    theme,\n    themeManager,\n  }: Partial<ChangedThemeResponse> & {\n    theme: ThemeParsed\n  },\n  keys?: string[]\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      }\n      if (\n        key === '__proto__' ||\n        key === '$typeof' ||\n        typeof key !== 'string' ||\n        !themeManager\n      ) {\n        return Reflect.get(_, key)\n      }\n\n      // auto convert variables to plain\n      const keyString = key[0] === '$' ? key.slice(1) : key\n      const val = themeManager.getValue(keyString)\n\n      if (val && keys) {\n        return new Proxy(val as any, {\n          // when they touch the actual value we only track it\n          // if its a variable (web), its ignored!\n          get(_, subkey) {\n            if (subkey === 'val' && !keys.includes(keyString)) {\n              keys.push(keyString)\n            }\n            return Reflect.get(val as any, subkey)\n          },\n        })\n      }\n\n      return val\n    },\n  })\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  props: ThemeProps,\n  root = false,\n  keys?: string[],\n  disableUpdate?: () => boolean\n): ChangedThemeResponse => {\n  if (isRSC) {\n    // we need context working for this to work well\n    return {\n      isNewTheme: false,\n      ...createState().state,\n      themeManager: null,\n    }\n  }\n\n  const {\n    debug,\n    // @ts-expect-error internal use only\n    disable,\n  } = props\n\n  let parentManager = useContext(ThemeManagerContext)\n\n  if (!disable) {\n    parentManager = getNonComponentParentManager(parentManager)\n  }\n\n  if (disable) {\n    if (!parentManager) throw `\u274C`\n    return {\n      isNewTheme: false,\n      ...parentManager.state,\n      themeManager: parentManager,\n    }\n  }\n\n  const [themeState, setThemeState] = useState<State>(createState)\n  const { state, themeManager, mounted, isNewTheme } = themeState\n  const isInversingOnMount = Boolean(!themeState.mounted && props.inverse)\n  const shouldReturnParentState = isInversingOnMount\n\n  function getShouldUpdateTheme(\n    manager = themeManager,\n    nextState?: ThemeManagerState | null,\n    forceShouldChange = false\n  ) {\n    const next = nextState || manager.getState(props, parentManager)\n    if (!next) return\n    if (disableUpdate?.() === true) return\n    if (!forceShouldChange && !manager.getStateShouldChange(next, state)) return\n    return next\n  }\n\n  if (!isServer) {\n    useEffect(() => {\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\n      if (!isNewTheme) return\n      if (!themeManager) return\n\n      activeThemeManagers.add(themeManager)\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n      }\n    }, [isNewTheme, themeManager, state])\n\n    // listen for parent change + notify children change\n    useLayoutEffect(() => {\n      const nextState = getShouldUpdateTheme(themeManager)\n\n      if (nextState) {\n        if (isNewTheme) {\n          // if it's a new theme we can just update + publish to children\n          themeManager.updateState(nextState, true)\n        }\n\n        // if not we will be creating a whole new themeManager\n        setThemeState(createState)\n      } else {\n        if (isNewTheme) {\n          // need to revert to parent\n          setThemeState(createState)\n        }\n      }\n\n      const disposeChangeListener = parentManager?.onChangeTheme((name, manager) => {\n        const shouldUpdate = Boolean(keys?.length || isNewTheme)\n        if (shouldUpdate) {\n          if (process.env.NODE_ENV === 'development' && props['debug']) {\n            console.log(`onChangeTheme`, shouldUpdate, { props, name, manager, keys })\n          }\n          setThemeState(createState)\n        }\n      }, themeManager.id)\n\n      return () => {\n        disposeChangeListener?.()\n      }\n    }, [\n      parentManager,\n      isNewTheme,\n      props.componentName,\n      props.inverse,\n      props.name,\n      props.reset,\n    ])\n\n    if (process.env.NODE_ENV === 'development') {\n      useEffect(() => {\n        globalThis['TamaguiThemeManagers'] ??= new Set()\n        globalThis['TamaguiThemeManagers'].add(themeManager)\n        return () => {\n          globalThis['TamaguiThemeManagers'].delete(themeManager)\n        }\n      }, [themeManager])\n    }\n  }\n\n  if (shouldReturnParentState) {\n    if (!parentManager) throw 'impossible'\n    return {\n      isNewTheme: false,\n      ...parentManager.state,\n      className: isInversingOnMount ? '' : parentManager.state.className,\n      themeManager: parentManager,\n    }\n  }\n\n  return {\n    ...state,\n    isNewTheme,\n    themeManager,\n  }\n\n  function createState(prev?: State): State {\n    if (prev && disableUpdate?.()) {\n      return prev\n    }\n\n    //  returns previous theme manager if no change\n    let themeManager: ThemeManager\n    let state: ThemeManagerState | undefined\n\n    const getNewThemeManager = () => {\n      return new ThemeManager(props, root ? 'root' : parentManager)\n    }\n\n    if (prev?.themeManager) {\n      themeManager = prev.themeManager\n\n      // this could be a bit better, problem is on toggling light/dark the state is actually\n      // showing light even when the last was dark. but technically allso onChangeTheme should\n      // basically always call on a change, so i'm wondering if we even need the shouldUpdate\n      // at all anymore. this forces updates onChangeTheme for all dynamic style accessed components\n      // which is correct, potentially in the future we can avoid forceChange and just know to\n      // update if keys.length is set + onChangeTheme called\n      const forceChange = Boolean(keys?.length)\n\n      const next = themeManager.getState(props, parentManager)\n      const nextState = getShouldUpdateTheme(themeManager, next, forceChange)\n\n      if (nextState) {\n        state = nextState\n\n        if (!prev.isNewTheme || !isWeb) {\n          themeManager = getNewThemeManager()\n        } else {\n          themeManager.updateState(nextState, true)\n        }\n      } else {\n        if (prev.isNewTheme) {\n          // reset to parent\n          if (parentManager && !next) {\n            themeManager = parentManager\n          }\n        }\n      }\n    } else {\n      themeManager = getNewThemeManager()\n    }\n\n    const isNewTheme = Boolean(themeManager !== parentManager)\n\n    // only inverse relies on this for ssr\n    const mounted = !props.inverse ? true : root || prev?.mounted\n\n    if (!state) {\n      state = isNewTheme ? { ...themeManager.state } : { ...parentManager!.state }\n    }\n\n    const response = {\n      state,\n      themeManager,\n      isNewTheme,\n      mounted,\n    }\n\n    if (process.env.NODE_ENV === 'development' && props['debug']) {\n      console.groupCollapsed(` \uD83D\uDD37 ${themeManager.id} useChangeThemeEffect createState`)\n      const parentState = { ...parentManager?.state }\n      const parentId = parentManager?.id\n      const themeManagerState = { ...themeManager.state }\n      console.log({\n        props,\n        parentState,\n        parentId,\n        themeManager,\n        prev,\n        response,\n        themeManagerState,\n      })\n      console.groupEnd()\n    }\n\n    return response\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable no-console */\nimport { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'\nimport { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config.js'\nimport { isDevTools } from '../constants/isDevTools.js'\nimport { isVariable } from '../createVariable.js'\nimport { createProxy } from '../helpers/createProxy.js'\nimport {\n  ThemeManager,\n  ThemeManagerState,\n  getNonComponentParentManager,\n  hasNoThemeUpdatingProps,\n} from '../helpers/ThemeManager.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport type { ThemeParsed, ThemeProps } from '../types.js'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped.js'\nimport { useServerRef } from './useServerHooks.js'\n\nexport type ChangedThemeResponse = {\n  isNewTheme: boolean\n  themeManager: ThemeManager | null\n  name: string\n  theme?: ThemeParsed | null\n  className?: string\n}\n\ntype State = {\n  state: ThemeManagerState\n  themeManager: ThemeManager\n  isNewTheme: boolean\n  mounted?: boolean\n}\n\nconst emptyProps = { name: null }\n\nfunction getDefaultThemeProxied() {\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\nexport const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {\n  return (isRSC ? null : useThemeWithState(props)?.theme) || getDefaultThemeProxied()\n}\n\nexport const useThemeWithState = (props: ThemeProps) => {\n  const keys = useServerRef<string[]>([])\n\n  const changedTheme = useChangeThemeEffect(\n    props,\n    false,\n    keys.current,\n    isClient\n      ? () => {\n          return props.shouldUpdate?.() ?? keys.current.length === 0\n        }\n      : undefined\n  )\n\n  const { themeManager, theme, name, className } = changedTheme\n\n  if (process.env.NODE_ENV === 'development' && 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  if (!changedTheme.theme) {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn('No theme found', name, props, themeManager)\n    }\n    return null\n  }\n\n  const proxiedTheme = useMemo(() => {\n    return getThemeProxied(changedTheme as any, keys.current)\n  }, [theme, name, className, themeManager])\n\n  return {\n    ...changedTheme,\n    theme: proxiedTheme,\n  }\n}\n\nexport function getThemeProxied(\n  {\n    theme,\n    themeManager,\n  }: Partial<ChangedThemeResponse> & {\n    theme: ThemeParsed\n  },\n  keys?: string[]\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      }\n      if (\n        key === '__proto__' ||\n        key === '$typeof' ||\n        typeof key !== 'string' ||\n        !themeManager\n      ) {\n        return Reflect.get(_, key)\n      }\n\n      // auto convert variables to plain\n      const keyString = key[0] === '$' ? key.slice(1) : key\n      const val = themeManager.getValue(keyString)\n\n      if (val && keys) {\n        return new Proxy(val as any, {\n          // when they touch the actual value we only track it\n          // if its a variable (web), its ignored!\n          get(_, subkey) {\n            if (subkey === 'val' && !keys.includes(keyString)) {\n              keys.push(keyString)\n            }\n            return Reflect.get(val as any, subkey)\n          },\n        })\n      }\n\n      return val\n    },\n  })\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  props: ThemeProps,\n  root = false,\n  keys?: string[],\n  disableUpdate?: () => boolean\n): ChangedThemeResponse => {\n  if (isRSC) {\n    // we need context working for this to work well\n    return {\n      isNewTheme: false,\n      ...createState().state,\n      themeManager: null,\n    }\n  }\n\n  const {\n    debug,\n    // @ts-expect-error internal use only\n    disable,\n  } = props\n\n  let parentManager = useContext(ThemeManagerContext)\n\n  if (!disable) {\n    parentManager = getNonComponentParentManager(parentManager)\n  }\n\n  if (disable) {\n    if (!parentManager) throw `\u274C`\n    return {\n      isNewTheme: false,\n      ...parentManager.state,\n      themeManager: parentManager,\n    }\n  }\n\n  const [themeState, setThemeState] = useState<State>(createState)\n  const { state, themeManager, mounted, isNewTheme } = themeState\n  const isInversingOnMount = Boolean(!themeState.mounted && props.inverse)\n  const shouldReturnParentState = isInversingOnMount\n\n  function getShouldUpdateTheme(\n    manager = themeManager,\n    nextState?: ThemeManagerState | null,\n    prevState: ThemeManagerState = state,\n    forceShouldChange = false\n  ) {\n    const next = nextState || manager.getState(props, parentManager)\n    if (!next) return\n    if (disableUpdate?.() === true) return\n    if (!forceShouldChange && !manager.getStateShouldChange(next, prevState)) return\n    return next\n  }\n\n  if (!isServer) {\n    useEffect(() => {\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\n      if (!isNewTheme) return\n      if (!themeManager) return\n\n      activeThemeManagers.add(themeManager)\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n      }\n    }, [isNewTheme, themeManager, state])\n\n    // listen for parent change + notify children change\n    useLayoutEffect(() => {\n      const nextState = getShouldUpdateTheme(themeManager)\n\n      if (nextState) {\n        if (isNewTheme) {\n          // if it's a new theme we can just update + publish to children\n          themeManager.updateState(nextState, true)\n        }\n\n        // if not we will be creating a whole new themeManager\n        setThemeState(createState)\n      } else {\n        if (isNewTheme) {\n          // need to revert to parent\n          setThemeState(createState)\n        }\n      }\n\n      const disposeChangeListener = parentManager?.onChangeTheme((name, manager) => {\n        const shouldUpdate = Boolean(keys?.length || isNewTheme)\n        if (shouldUpdate) {\n          if (process.env.NODE_ENV === 'development' && props['debug']) {\n            console.log(`onChangeTheme`, shouldUpdate, { props, name, manager, keys })\n          }\n          setThemeState(createState)\n        }\n      }, themeManager.id)\n\n      return () => {\n        disposeChangeListener?.()\n      }\n    }, [\n      parentManager,\n      isNewTheme,\n      props.componentName,\n      props.inverse,\n      props.name,\n      props.reset,\n    ])\n\n    if (process.env.NODE_ENV === 'development') {\n      useEffect(() => {\n        globalThis['TamaguiThemeManagers'] ??= new Set()\n        globalThis['TamaguiThemeManagers'].add(themeManager)\n        return () => {\n          globalThis['TamaguiThemeManagers'].delete(themeManager)\n        }\n      }, [themeManager])\n    }\n  }\n\n  if (shouldReturnParentState) {\n    if (!parentManager) throw 'impossible'\n    return {\n      isNewTheme: false,\n      ...parentManager.state,\n      className: isInversingOnMount ? '' : parentManager.state.className,\n      themeManager: parentManager,\n    }\n  }\n\n  return {\n    ...state,\n    isNewTheme,\n    themeManager,\n  }\n\n  function createState(prev?: State): State {\n    if (prev && disableUpdate?.()) {\n      return prev\n    }\n\n    //  returns previous theme manager if no change\n    let themeManager: ThemeManager\n    let state: ThemeManagerState | undefined\n\n    const getNewThemeManager = () => {\n      return new ThemeManager(props, root ? 'root' : parentManager)\n    }\n\n    if (prev?.themeManager) {\n      themeManager = prev.themeManager\n\n      // this could be a bit better, problem is on toggling light/dark the state is actually\n      // showing light even when the last was dark. but technically allso onChangeTheme should\n      // basically always call on a change, so i'm wondering if we even need the shouldUpdate\n      // at all anymore. this forces updates onChangeTheme for all dynamic style accessed components\n      // which is correct, potentially in the future we can avoid forceChange and just know to\n      // update if keys.length is set + onChangeTheme called\n      const forceChange = Boolean(keys?.length)\n      const next = themeManager.getState(props, parentManager)\n      const nextState = getShouldUpdateTheme(themeManager, next, prev.state, forceChange)\n\n      if (nextState) {\n        state = nextState\n\n        if (!prev.isNewTheme || !isWeb) {\n          themeManager = getNewThemeManager()\n        } else {\n          themeManager.updateState(nextState, true)\n        }\n      } else {\n        if (prev.isNewTheme) {\n          // reset to parent\n          if (parentManager && !next) {\n            themeManager = parentManager\n          }\n        }\n      }\n    } else {\n      themeManager = getNewThemeManager()\n    }\n\n    const isNewTheme = Boolean(themeManager !== parentManager)\n\n    // only inverse relies on this for ssr\n    const mounted = !props.inverse ? true : root || prev?.mounted\n\n    if (!state) {\n      state = isNewTheme ? { ...themeManager.state } : { ...parentManager!.state }\n    }\n\n    const response = {\n      state,\n      themeManager,\n      isNewTheme,\n      mounted,\n    }\n\n    if (process.env.NODE_ENV === 'development' && props['debug']) {\n      console.groupCollapsed(` \uD83D\uDD37 ${themeManager.id} useChangeThemeEffect createState`)\n      const parentState = { ...parentManager?.state }\n      const parentId = parentManager?.id\n      const themeManagerState = { ...themeManager.state }\n      console.log({\n        props,\n        parentState,\n        parentId,\n        themeManager,\n        prev,\n        response,\n        themeManagerState,\n      })\n      console.groupEnd()\n    }\n\n    return response\n  }\n}\n"],
+  "mappings": "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",
   "names": ["_", "themeManager", "state", "isNewTheme", "mounted"]
 }

package/dist/esm/views/Theme.js

@@ -12,9 +12,9 @@ function Theme(props) {
   }
   const isRoot = !!props["_isRoot"];
   const themeState = useChangeThemeEffect(props, isRoot);
-  let children = props["data-themeable"] ? Children.map(
+  let children = props["disable-child-theme"] ? Children.map(
     props.children,
-    (child) => cloneElement(child, { ["data-themeable"]: true })
+    (child) => cloneElement(child, { ["data-disable-theme"]: true })
   ) : props.children;
   if (process.env.NODE_ENV === "development") {
     if (props["debug"] === "visualize") {

package/dist/esm/views/Theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement, useEffect, useId, useMemo } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { DebugProp, ThemeProps } from '../types.js'\nimport { ThemeDebug } from './ThemeDebug'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n\n  let children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props['debug'] === 'visualize') {\n      children = (\n        <ThemeDebug themeState={themeState} themeProps={props}>\n          {children}\n        </ThemeDebug>\n      )\n    }\n  }\n\n  return useThemedChildren(themeState, children, props, isRoot)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  props: {\n    forceClassName?: boolean\n    shallow?: boolean\n    passPropsToChildren?: boolean\n    debug?: DebugProp\n  },\n  isRoot = false\n) {\n  const { themeManager, className, theme, isNewTheme } = themeState\n  const { shallow, forceClassName } = props\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  const shouldRenderChildrenWithTheme =\n    isNewTheme || hasEverThemed.current || forceClassName || isRoot\n\n  return useMemo(() => {\n    if (!shouldRenderChildrenWithTheme) {\n      return children\n    }\n\n    // be sure to memoize shouldReset to avoid reparenting\n    let next = Children.toArray(children)\n\n    // each children of these children wont get the theme\n    if (shallow && themeManager) {\n      next = next.map((child) => {\n        return isValidElement(child)\n          ? cloneElement(\n              child,\n              undefined,\n              <Theme name={themeManager.state.parentName}>\n                {(child as any).props.children}\n              </Theme>\n            )\n          : child\n      })\n    }\n\n    const wrapped = (\n      <ThemeManagerContext.Provider value={themeManager}>\n        {next}\n      </ThemeManagerContext.Provider>\n    )\n\n    if (forceClassName === false) {\n      return wrapped\n    }\n\n    if (isWeb && !props.passPropsToChildren) {\n      // in order to provide currentColor, set color by default\n      const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n      const colorStyle = {\n        color: themeColor,\n      }\n\n      return (\n        <span className={`${className || ''} _dsp_contents is_Theme`} style={colorStyle}>\n          {wrapped}\n        </span>\n      )\n    }\n\n    return wrapped\n  }, [\n    forceClassName,\n    props.passPropsToChildren,\n    shouldRenderChildrenWithTheme,\n    themeManager,\n    children,\n    theme,\n    isNewTheme,\n    className,\n  ])\n}\n"],
-  "mappings": "AA4BQ;AA5BR,SAAS,aAAa;AACtB,SAAS,UAAU,cAAc,gBAAkC,eAAe;AAElF,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAE3D,SAAS,kBAAkB;AAEpB,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM,SAAS;AACjB,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AAErD,MAAI,WAAW,MAAM,gBAAgB,IACjC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,MAAM,OAAO,MAAM,aAAa;AAClC,iBACE,oBAAC,cAAW,YAAwB,YAAY,OAC7C,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO,kBAAkB,YAAY,UAAU,OAAO,MAAM;AAC9D;AAEO,SAAS,kBACd,YACA,UACA,OAMA,SAAS,OACT;AACA,QAAM,EAAE,cAAc,WAAW,OAAO,WAAW,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,QAAM,gCACJ,cAAc,cAAc,WAAW,kBAAkB;AAE3D,SAAO,QAAQ,MAAM;AACnB,QAAI,CAAC,+BAA+B;AAClC,aAAO;AAAA,IACT;AAGA,QAAI,OAAO,SAAS,QAAQ,QAAQ;AAGpC,QAAI,WAAW,cAAc;AAC3B,aAAO,KAAK,IAAI,CAAC,UAAU;AACzB,eAAO,eAAe,KAAK,IACvB;AAAA,UACE;AAAA,UACA;AAAA,UACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,QACF,IACA;AAAA,MACN,CAAC;AAAA,IACH;AAEA,UAAM,UACJ,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,QAAI,mBAAmB,OAAO;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,CAAC,MAAM,qBAAqB;AAEvC,YAAM,aAAa,SAAS,aAAa,iBAAiB,MAAM,KAAK,IAAI;AACzE,YAAM,aAAa;AAAA,QACjB,OAAO;AAAA,MACT;AAEA,aACE,oBAAC,UAAK,WAAW,GAAG,aAAa,6BAA6B,OAAO,YAClE,mBACH;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement, useEffect, useId, useMemo } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { DebugProp, ThemeProps } from '../types.js'\nimport { ThemeDebug } from './ThemeDebug'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n\n  let children = props['disable-child-theme']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-disable-theme']: true })\n      )\n    : props.children\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props['debug'] === 'visualize') {\n      children = (\n        <ThemeDebug themeState={themeState} themeProps={props}>\n          {children}\n        </ThemeDebug>\n      )\n    }\n  }\n\n  return useThemedChildren(themeState, children, props, isRoot)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  props: {\n    forceClassName?: boolean\n    shallow?: boolean\n    passPropsToChildren?: boolean\n    debug?: DebugProp\n  },\n  isRoot = false\n) {\n  const { themeManager, className, theme, isNewTheme } = themeState\n  const { shallow, forceClassName } = props\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  const shouldRenderChildrenWithTheme =\n    isNewTheme || hasEverThemed.current || forceClassName || isRoot\n\n  return useMemo(() => {\n    if (!shouldRenderChildrenWithTheme) {\n      return children\n    }\n\n    // be sure to memoize shouldReset to avoid reparenting\n    let next = Children.toArray(children)\n\n    // each children of these children wont get the theme\n    if (shallow && themeManager) {\n      next = next.map((child) => {\n        return isValidElement(child)\n          ? cloneElement(\n              child,\n              undefined,\n              <Theme name={themeManager.state.parentName}>\n                {(child as any).props.children}\n              </Theme>\n            )\n          : child\n      })\n    }\n\n    const wrapped = (\n      <ThemeManagerContext.Provider value={themeManager}>\n        {next}\n      </ThemeManagerContext.Provider>\n    )\n\n    if (forceClassName === false) {\n      return wrapped\n    }\n\n    if (isWeb && !props.passPropsToChildren) {\n      // in order to provide currentColor, set color by default\n      const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n      const colorStyle = {\n        color: themeColor,\n      }\n\n      return (\n        <span className={`${className || ''} _dsp_contents is_Theme`} style={colorStyle}>\n          {wrapped}\n        </span>\n      )\n    }\n\n    return wrapped\n  }, [\n    forceClassName,\n    props.passPropsToChildren,\n    shouldRenderChildrenWithTheme,\n    themeManager,\n    children,\n    theme,\n    isNewTheme,\n    className,\n  ])\n}\n"],
+  "mappings": "AA4BQ;AA5BR,SAAS,aAAa;AACtB,SAAS,UAAU,cAAc,gBAAkC,eAAe;AAElF,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAE3D,SAAS,kBAAkB;AAEpB,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM,SAAS;AACjB,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AAErD,MAAI,WAAW,MAAM,qBAAqB,IACtC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,oBAAoB,GAAG,KAAK,CAAC;AAAA,EACtD,IACA,MAAM;AAEV,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,MAAM,OAAO,MAAM,aAAa;AAClC,iBACE,oBAAC,cAAW,YAAwB,YAAY,OAC7C,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO,kBAAkB,YAAY,UAAU,OAAO,MAAM;AAC9D;AAEO,SAAS,kBACd,YACA,UACA,OAMA,SAAS,OACT;AACA,QAAM,EAAE,cAAc,WAAW,OAAO,WAAW,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,QAAM,gCACJ,cAAc,cAAc,WAAW,kBAAkB;AAE3D,SAAO,QAAQ,MAAM;AACnB,QAAI,CAAC,+BAA+B;AAClC,aAAO;AAAA,IACT;AAGA,QAAI,OAAO,SAAS,QAAQ,QAAQ;AAGpC,QAAI,WAAW,cAAc;AAC3B,aAAO,KAAK,IAAI,CAAC,UAAU;AACzB,eAAO,eAAe,KAAK,IACvB;AAAA,UACE;AAAA,UACA;AAAA,UACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,QACF,IACA;AAAA,MACN,CAAC;AAAA,IACH;AAEA,UAAM,UACJ,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,QAAI,mBAAmB,OAAO;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,CAAC,MAAM,qBAAqB;AAEvC,YAAM,aAAa,SAAS,aAAa,iBAAiB,MAAM,KAAK,IAAI;AACzE,YAAM,aAAa;AAAA,QACjB,OAAO;AAAA,MACT;AAEA,aACE,oBAAC,UAAK,WAAW,GAAG,aAAa,6BAA6B,OAAO,YAClE,mBACH;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/dist/esm/views/Theme.mjs

@@ -12,9 +12,9 @@ function Theme(props) {
   }
   const isRoot = !!props["_isRoot"];
   const themeState = useChangeThemeEffect(props, isRoot);
-  let children = props["data-themeable"] ? Children.map(
+  let children = props["disable-child-theme"] ? Children.map(
     props.children,
-    (child) => cloneElement(child, { ["data-themeable"]: true })
+    (child) => cloneElement(child, { ["data-disable-theme"]: true })
   ) : props.children;
   if (process.env.NODE_ENV === "development") {
     if (props["debug"] === "visualize") {

package/dist/esm/views/Theme.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement, useEffect, useId, useMemo } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { DebugProp, ThemeProps } from '../types.js'\nimport { ThemeDebug } from './ThemeDebug'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n\n  let children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props['debug'] === 'visualize') {\n      children = (\n        <ThemeDebug themeState={themeState} themeProps={props}>\n          {children}\n        </ThemeDebug>\n      )\n    }\n  }\n\n  return useThemedChildren(themeState, children, props, isRoot)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  props: {\n    forceClassName?: boolean\n    shallow?: boolean\n    passPropsToChildren?: boolean\n    debug?: DebugProp\n  },\n  isRoot = false\n) {\n  const { themeManager, className, theme, isNewTheme } = themeState\n  const { shallow, forceClassName } = props\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  const shouldRenderChildrenWithTheme =\n    isNewTheme || hasEverThemed.current || forceClassName || isRoot\n\n  return useMemo(() => {\n    if (!shouldRenderChildrenWithTheme) {\n      return children\n    }\n\n    // be sure to memoize shouldReset to avoid reparenting\n    let next = Children.toArray(children)\n\n    // each children of these children wont get the theme\n    if (shallow && themeManager) {\n      next = next.map((child) => {\n        return isValidElement(child)\n          ? cloneElement(\n              child,\n              undefined,\n              <Theme name={themeManager.state.parentName}>\n                {(child as any).props.children}\n              </Theme>\n            )\n          : child\n      })\n    }\n\n    const wrapped = (\n      <ThemeManagerContext.Provider value={themeManager}>\n        {next}\n      </ThemeManagerContext.Provider>\n    )\n\n    if (forceClassName === false) {\n      return wrapped\n    }\n\n    if (isWeb && !props.passPropsToChildren) {\n      // in order to provide currentColor, set color by default\n      const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n      const colorStyle = {\n        color: themeColor,\n      }\n\n      return (\n        <span className={`${className || ''} _dsp_contents is_Theme`} style={colorStyle}>\n          {wrapped}\n        </span>\n      )\n    }\n\n    return wrapped\n  }, [\n    forceClassName,\n    props.passPropsToChildren,\n    shouldRenderChildrenWithTheme,\n    themeManager,\n    children,\n    theme,\n    isNewTheme,\n    className,\n  ])\n}\n"],
-  "mappings": "AA4BQ;AA5BR,SAAS,aAAa;AACtB,SAAS,UAAU,cAAc,gBAAkC,eAAe;AAElF,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAE3D,SAAS,kBAAkB;AAEpB,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM,SAAS;AACjB,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AAErD,MAAI,WAAW,MAAM,gBAAgB,IACjC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,MAAM,OAAO,MAAM,aAAa;AAClC,iBACE,oBAAC,cAAW,YAAwB,YAAY,OAC7C,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO,kBAAkB,YAAY,UAAU,OAAO,MAAM;AAC9D;AAEO,SAAS,kBACd,YACA,UACA,OAMA,SAAS,OACT;AACA,QAAM,EAAE,cAAc,WAAW,OAAO,WAAW,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,QAAM,gCACJ,cAAc,cAAc,WAAW,kBAAkB;AAE3D,SAAO,QAAQ,MAAM;AACnB,QAAI,CAAC,+BAA+B;AAClC,aAAO;AAAA,IACT;AAGA,QAAI,OAAO,SAAS,QAAQ,QAAQ;AAGpC,QAAI,WAAW,cAAc;AAC3B,aAAO,KAAK,IAAI,CAAC,UAAU;AACzB,eAAO,eAAe,KAAK,IACvB;AAAA,UACE;AAAA,UACA;AAAA,UACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,QACF,IACA;AAAA,MACN,CAAC;AAAA,IACH;AAEA,UAAM,UACJ,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,QAAI,mBAAmB,OAAO;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,CAAC,MAAM,qBAAqB;AAEvC,YAAM,aAAa,SAAS,aAAa,iBAAiB,MAAM,KAAK,IAAI;AACzE,YAAM,aAAa;AAAA,QACjB,OAAO;AAAA,MACT;AAEA,aACE,oBAAC,UAAK,WAAW,GAAG,aAAa,6BAA6B,OAAO,YAClE,mBACH;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement, useEffect, useId, useMemo } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { DebugProp, ThemeProps } from '../types.js'\nimport { ThemeDebug } from './ThemeDebug'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n\n  let children = props['disable-child-theme']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-disable-theme']: true })\n      )\n    : props.children\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props['debug'] === 'visualize') {\n      children = (\n        <ThemeDebug themeState={themeState} themeProps={props}>\n          {children}\n        </ThemeDebug>\n      )\n    }\n  }\n\n  return useThemedChildren(themeState, children, props, isRoot)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  props: {\n    forceClassName?: boolean\n    shallow?: boolean\n    passPropsToChildren?: boolean\n    debug?: DebugProp\n  },\n  isRoot = false\n) {\n  const { themeManager, className, theme, isNewTheme } = themeState\n  const { shallow, forceClassName } = props\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  const shouldRenderChildrenWithTheme =\n    isNewTheme || hasEverThemed.current || forceClassName || isRoot\n\n  return useMemo(() => {\n    if (!shouldRenderChildrenWithTheme) {\n      return children\n    }\n\n    // be sure to memoize shouldReset to avoid reparenting\n    let next = Children.toArray(children)\n\n    // each children of these children wont get the theme\n    if (shallow && themeManager) {\n      next = next.map((child) => {\n        return isValidElement(child)\n          ? cloneElement(\n              child,\n              undefined,\n              <Theme name={themeManager.state.parentName}>\n                {(child as any).props.children}\n              </Theme>\n            )\n          : child\n      })\n    }\n\n    const wrapped = (\n      <ThemeManagerContext.Provider value={themeManager}>\n        {next}\n      </ThemeManagerContext.Provider>\n    )\n\n    if (forceClassName === false) {\n      return wrapped\n    }\n\n    if (isWeb && !props.passPropsToChildren) {\n      // in order to provide currentColor, set color by default\n      const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n      const colorStyle = {\n        color: themeColor,\n      }\n\n      return (\n        <span className={`${className || ''} _dsp_contents is_Theme`} style={colorStyle}>\n          {wrapped}\n        </span>\n      )\n    }\n\n    return wrapped\n  }, [\n    forceClassName,\n    props.passPropsToChildren,\n    shouldRenderChildrenWithTheme,\n    themeManager,\n    children,\n    theme,\n    isNewTheme,\n    className,\n  ])\n}\n"],
+  "mappings": "AA4BQ;AA5BR,SAAS,aAAa;AACtB,SAAS,UAAU,cAAc,gBAAkC,eAAe;AAElF,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAE3D,SAAS,kBAAkB;AAEpB,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM,SAAS;AACjB,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AAErD,MAAI,WAAW,MAAM,qBAAqB,IACtC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,oBAAoB,GAAG,KAAK,CAAC;AAAA,EACtD,IACA,MAAM;AAEV,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,MAAM,OAAO,MAAM,aAAa;AAClC,iBACE,oBAAC,cAAW,YAAwB,YAAY,OAC7C,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO,kBAAkB,YAAY,UAAU,OAAO,MAAM;AAC9D;AAEO,SAAS,kBACd,YACA,UACA,OAMA,SAAS,OACT;AACA,QAAM,EAAE,cAAc,WAAW,OAAO,WAAW,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,QAAM,gCACJ,cAAc,cAAc,WAAW,kBAAkB;AAE3D,SAAO,QAAQ,MAAM;AACnB,QAAI,CAAC,+BAA+B;AAClC,aAAO;AAAA,IACT;AAGA,QAAI,OAAO,SAAS,QAAQ,QAAQ;AAGpC,QAAI,WAAW,cAAc;AAC3B,aAAO,KAAK,IAAI,CAAC,UAAU;AACzB,eAAO,eAAe,KAAK,IACvB;AAAA,UACE;AAAA,UACA;AAAA,UACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,QACF,IACA;AAAA,MACN,CAAC;AAAA,IACH;AAEA,UAAM,UACJ,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,QAAI,mBAAmB,OAAO;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,CAAC,MAAM,qBAAqB;AAEvC,YAAM,aAAa,SAAS,aAAa,iBAAiB,MAAM,KAAK,IAAI;AACzE,YAAM,aAAa;AAAA,QACjB,OAAO;AAAA,MACT;AAEA,aACE,oBAAC,UAAK,WAAW,GAAG,aAAa,6BAA6B,OAAO,YAClE,mBACH;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/dist/esm/views/ThemeDebug.js

@@ -9,6 +9,9 @@ function ThemeDebug({
   children
 }) {
   var _a, _b, _c, _d, _e, _f;
+  if (themeProps["disable-child-theme"]) {
+    return children;
+  }
   if (process.env.NODE_ENV === "development") {
     const [onChangeCount, setOnChangeCount] = useState(0);
     const rerender = useForceUpdate();
@@ -75,7 +78,7 @@ function ThemeDebug({
         ),
         node
       ),
-      /* @__PURE__ */ jsx("div", { children: id }),
+      /* @__PURE__ */ jsx("div", { style: { color: "red" }, children: id }),
       children
     ] });
   }

package/dist/esm/views/ThemeDebug.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeDebug.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useEffect, useId, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { ChangedThemeResponse } from '../hooks/useTheme.js'\nimport { ThemeProps } from '../types.js'\n\nlet node\n\nexport function ThemeDebug({\n  themeState,\n  themeProps,\n  children,\n}: {\n  themeState: ChangedThemeResponse\n  themeProps: ThemeProps\n  children: any\n}) {\n  if (process.env.NODE_ENV === 'development') {\n    const [onChangeCount, setOnChangeCount] = useState(0)\n    const rerender = useForceUpdate()\n    const id = useId()\n\n    if (process.env.NODE_ENV === 'development' && typeof document !== 'undefined') {\n      if (!node) {\n        node = document.createElement('div')\n        node.style.width = '100%'\n        node.style.height = '200px'\n        node.style.overflowY = 'scroll'\n        node.style.position = 'fixed'\n        node.style.top = '0px'\n        node.style.left = '0px'\n        node.style.display = 'flex'\n        node.style.flexDirection = 'row'\n        node.style.background = 'var(--background)'\n        document.body.appendChild(node)\n      }\n    }\n\n    useEffect(() => {\n      themeState.themeManager?.parentManager?.onChangeTheme((name, manager) => {\n        setOnChangeCount((p) => ++p)\n        console.warn(`theme changed`, name)\n      })\n    }, [themeState.themeManager])\n\n    useEffect(() => {\n      // to refresh _listeningIds every so often\n      const tm = setInterval(rerender, 100)\n      return () => clearTimeout(tm)\n    }, [])\n\n    return (\n      <>\n        {createPortal(\n          <code\n            style={{\n              whiteSpace: 'pre',\n            }}\n          >\n            &lt;Theme {id} /&gt;&nbsp;\n            {JSON.stringify(\n              {\n                name: themeState.name,\n                className: themeState.className,\n                inverse: themeProps.inverse,\n                forceClassName: themeProps.forceClassName,\n                parent: themeState.themeManager?.state.parentName,\n                id: themeState.themeManager?.id,\n                parentId: themeState.themeManager?.parentManager?.id,\n                isNew: themeState.isNewTheme,\n                onChangeCount,\n                listening: [...(themeState.themeManager?.['_listeningIds'] || [])].join(\n                  ','\n                ),\n                _numChangeEventsSent: themeState.themeManager?.['_numChangeEventsSent'],\n              },\n              null,\n              2\n            )}\n          </code>,\n          node\n        )}\n\n        <div>{id}</div>\n\n        {children}\n      </>\n    )\n  }\n  return children\n}\n"],
-  "mappings": "AAqDM,mBA+BE,KA7BE,YAFJ;AArDN,SAAS,sBAAsB;AAC/B,SAAS,WAAW,OAAe,gBAAgB;AACnD,SAAS,oBAAoB;AAK7B,IAAI;AAEG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AAjBH;AAkBE,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AACpD,UAAM,WAAW,eAAe;AAChC,UAAM,KAAK,MAAM;AAEjB,QAAI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,aAAa,aAAa;AAC7E,UAAI,CAAC,MAAM;AACT,eAAO,SAAS,cAAc,KAAK;AACnC,aAAK,MAAM,QAAQ;AACnB,aAAK,MAAM,SAAS;AACpB,aAAK,MAAM,YAAY;AACvB,aAAK,MAAM,WAAW;AACtB,aAAK,MAAM,MAAM;AACjB,aAAK,MAAM,OAAO;AAClB,aAAK,MAAM,UAAU;AACrB,aAAK,MAAM,gBAAgB;AAC3B,aAAK,MAAM,aAAa;AACxB,iBAAS,KAAK,YAAY,IAAI;AAAA,MAChC;AAAA,IACF;AAEA,cAAU,MAAM;AAvCpB,UAAAA,KAAAC;AAwCM,OAAAA,OAAAD,MAAA,WAAW,iBAAX,gBAAAA,IAAyB,kBAAzB,gBAAAC,IAAwC,cAAc,CAAC,MAAM,YAAY;AACvE,yBAAiB,CAAC,MAAM,EAAE,CAAC;AAC3B,gBAAQ,KAAK,iBAAiB,IAAI;AAAA,MACpC;AAAA,IACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,cAAU,MAAM;AAEd,YAAM,KAAK,YAAY,UAAU,GAAG;AACpC,aAAO,MAAM,aAAa,EAAE;AAAA,IAC9B,GAAG,CAAC,CAAC;AAEL,WACE,iCACG;AAAA;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,cACY;AAAA,cAAG;AAAA,cACb,KAAK;AAAA,gBACJ;AAAA,kBACE,MAAM,WAAW;AAAA,kBACjB,WAAW,WAAW;AAAA,kBACtB,SAAS,WAAW;AAAA,kBACpB,gBAAgB,WAAW;AAAA,kBAC3B,SAAQ,gBAAW,iBAAX,mBAAyB,MAAM;AAAA,kBACvC,KAAI,gBAAW,iBAAX,mBAAyB;AAAA,kBAC7B,WAAU,sBAAW,iBAAX,mBAAyB,kBAAzB,mBAAwC;AAAA,kBAClD,OAAO,WAAW;AAAA,kBAClB;AAAA,kBACA,WAAW,CAAC,KAAI,gBAAW,iBAAX,mBAA0B,qBAAoB,CAAC,CAAE,EAAE;AAAA,oBACjE;AAAA,kBACF;AAAA,kBACA,uBAAsB,gBAAW,iBAAX,mBAA0B;AAAA,gBAClD;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MAEA,oBAAC,SAAK,cAAG;AAAA,MAER;AAAA,OACH;AAAA,EAEJ;AACA,SAAO;AACT;",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useEffect, useId, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { ChangedThemeResponse } from '../hooks/useTheme.js'\nimport { ThemeProps } from '../types.js'\n\nlet node\n\nexport function ThemeDebug({\n  themeState,\n  themeProps,\n  children,\n}: {\n  themeState: ChangedThemeResponse\n  themeProps: ThemeProps\n  children: any\n}) {\n  // disabled\n  if (themeProps['disable-child-theme']) {\n    return children\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    const [onChangeCount, setOnChangeCount] = useState(0)\n    const rerender = useForceUpdate()\n    const id = useId()\n\n    if (process.env.NODE_ENV === 'development' && typeof document !== 'undefined') {\n      if (!node) {\n        node = document.createElement('div')\n        node.style.width = '100%'\n        node.style.height = '200px'\n        node.style.overflowY = 'scroll'\n        node.style.position = 'fixed'\n        node.style.top = '0px'\n        node.style.left = '0px'\n        node.style.display = 'flex'\n        node.style.flexDirection = 'row'\n        node.style.background = 'var(--background)'\n        document.body.appendChild(node)\n      }\n    }\n\n    useEffect(() => {\n      themeState.themeManager?.parentManager?.onChangeTheme((name, manager) => {\n        setOnChangeCount((p) => ++p)\n        console.warn(`theme changed`, name)\n      })\n    }, [themeState.themeManager])\n\n    useEffect(() => {\n      // to refresh _listeningIds every so often\n      const tm = setInterval(rerender, 100)\n      return () => clearTimeout(tm)\n    }, [])\n\n    return (\n      <>\n        {createPortal(\n          <code\n            style={{\n              whiteSpace: 'pre',\n            }}\n          >\n            &lt;Theme {id} /&gt;&nbsp;\n            {JSON.stringify(\n              {\n                name: themeState.name,\n                className: themeState.className,\n                inverse: themeProps.inverse,\n                forceClassName: themeProps.forceClassName,\n                parent: themeState.themeManager?.state.parentName,\n                id: themeState.themeManager?.id,\n                parentId: themeState.themeManager?.parentManager?.id,\n                isNew: themeState.isNewTheme,\n                onChangeCount,\n                listening: [...(themeState.themeManager?.['_listeningIds'] || [])].join(\n                  ','\n                ),\n                _numChangeEventsSent: themeState.themeManager?.['_numChangeEventsSent'],\n              },\n              null,\n              2\n            )}\n          </code>,\n          node\n        )}\n\n        <div style={{ color: 'red' }}>{id}</div>\n\n        {children}\n      </>\n    )\n  }\n  return children\n}\n"],
+  "mappings": "AA0DM,mBA+BE,KA7BE,YAFJ;AA1DN,SAAS,sBAAsB;AAC/B,SAAS,WAAW,OAAe,gBAAgB;AACnD,SAAS,oBAAoB;AAK7B,IAAI;AAEG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AAjBH;AAmBE,MAAI,WAAW,qBAAqB,GAAG;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AACpD,UAAM,WAAW,eAAe;AAChC,UAAM,KAAK,MAAM;AAEjB,QAAI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,aAAa,aAAa;AAC7E,UAAI,CAAC,MAAM;AACT,eAAO,SAAS,cAAc,KAAK;AACnC,aAAK,MAAM,QAAQ;AACnB,aAAK,MAAM,SAAS;AACpB,aAAK,MAAM,YAAY;AACvB,aAAK,MAAM,WAAW;AACtB,aAAK,MAAM,MAAM;AACjB,aAAK,MAAM,OAAO;AAClB,aAAK,MAAM,UAAU;AACrB,aAAK,MAAM,gBAAgB;AAC3B,aAAK,MAAM,aAAa;AACxB,iBAAS,KAAK,YAAY,IAAI;AAAA,MAChC;AAAA,IACF;AAEA,cAAU,MAAM;AA5CpB,UAAAA,KAAAC;AA6CM,OAAAA,OAAAD,MAAA,WAAW,iBAAX,gBAAAA,IAAyB,kBAAzB,gBAAAC,IAAwC,cAAc,CAAC,MAAM,YAAY;AACvE,yBAAiB,CAAC,MAAM,EAAE,CAAC;AAC3B,gBAAQ,KAAK,iBAAiB,IAAI;AAAA,MACpC;AAAA,IACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,cAAU,MAAM;AAEd,YAAM,KAAK,YAAY,UAAU,GAAG;AACpC,aAAO,MAAM,aAAa,EAAE;AAAA,IAC9B,GAAG,CAAC,CAAC;AAEL,WACE,iCACG;AAAA;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,cACY;AAAA,cAAG;AAAA,cACb,KAAK;AAAA,gBACJ;AAAA,kBACE,MAAM,WAAW;AAAA,kBACjB,WAAW,WAAW;AAAA,kBACtB,SAAS,WAAW;AAAA,kBACpB,gBAAgB,WAAW;AAAA,kBAC3B,SAAQ,gBAAW,iBAAX,mBAAyB,MAAM;AAAA,kBACvC,KAAI,gBAAW,iBAAX,mBAAyB;AAAA,kBAC7B,WAAU,sBAAW,iBAAX,mBAAyB,kBAAzB,mBAAwC;AAAA,kBAClD,OAAO,WAAW;AAAA,kBAClB;AAAA,kBACA,WAAW,CAAC,KAAI,gBAAW,iBAAX,mBAA0B,qBAAoB,CAAC,CAAE,EAAE;AAAA,oBACjE;AAAA,kBACF;AAAA,kBACA,uBAAsB,gBAAW,iBAAX,mBAA0B;AAAA,gBAClD;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MAEA,oBAAC,SAAI,OAAO,EAAE,OAAO,MAAM,GAAI,cAAG;AAAA,MAEjC;AAAA,OACH;AAAA,EAEJ;AACA,SAAO;AACT;",
   "names": ["_a", "_b"]
 }

package/dist/esm/views/ThemeDebug.mjs

@@ -9,6 +9,9 @@ function ThemeDebug({
   children
 }) {
   var _a, _b, _c, _d, _e, _f;
+  if (themeProps["disable-child-theme"]) {
+    return children;
+  }
   if (process.env.NODE_ENV === "development") {
     const [onChangeCount, setOnChangeCount] = useState(0);
     const rerender = useForceUpdate();
@@ -75,7 +78,7 @@ function ThemeDebug({
         ),
         node
       ),
-      /* @__PURE__ */ jsx("div", { children: id }),
+      /* @__PURE__ */ jsx("div", { style: { color: "red" }, children: id }),
       children
     ] });
   }

package/dist/esm/views/ThemeDebug.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeDebug.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useEffect, useId, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { ChangedThemeResponse } from '../hooks/useTheme.js'\nimport { ThemeProps } from '../types.js'\n\nlet node\n\nexport function ThemeDebug({\n  themeState,\n  themeProps,\n  children,\n}: {\n  themeState: ChangedThemeResponse\n  themeProps: ThemeProps\n  children: any\n}) {\n  if (process.env.NODE_ENV === 'development') {\n    const [onChangeCount, setOnChangeCount] = useState(0)\n    const rerender = useForceUpdate()\n    const id = useId()\n\n    if (process.env.NODE_ENV === 'development' && typeof document !== 'undefined') {\n      if (!node) {\n        node = document.createElement('div')\n        node.style.width = '100%'\n        node.style.height = '200px'\n        node.style.overflowY = 'scroll'\n        node.style.position = 'fixed'\n        node.style.top = '0px'\n        node.style.left = '0px'\n        node.style.display = 'flex'\n        node.style.flexDirection = 'row'\n        node.style.background = 'var(--background)'\n        document.body.appendChild(node)\n      }\n    }\n\n    useEffect(() => {\n      themeState.themeManager?.parentManager?.onChangeTheme((name, manager) => {\n        setOnChangeCount((p) => ++p)\n        console.warn(`theme changed`, name)\n      })\n    }, [themeState.themeManager])\n\n    useEffect(() => {\n      // to refresh _listeningIds every so often\n      const tm = setInterval(rerender, 100)\n      return () => clearTimeout(tm)\n    }, [])\n\n    return (\n      <>\n        {createPortal(\n          <code\n            style={{\n              whiteSpace: 'pre',\n            }}\n          >\n            &lt;Theme {id} /&gt;&nbsp;\n            {JSON.stringify(\n              {\n                name: themeState.name,\n                className: themeState.className,\n                inverse: themeProps.inverse,\n                forceClassName: themeProps.forceClassName,\n                parent: themeState.themeManager?.state.parentName,\n                id: themeState.themeManager?.id,\n                parentId: themeState.themeManager?.parentManager?.id,\n                isNew: themeState.isNewTheme,\n                onChangeCount,\n                listening: [...(themeState.themeManager?.['_listeningIds'] || [])].join(\n                  ','\n                ),\n                _numChangeEventsSent: themeState.themeManager?.['_numChangeEventsSent'],\n              },\n              null,\n              2\n            )}\n          </code>,\n          node\n        )}\n\n        <div>{id}</div>\n\n        {children}\n      </>\n    )\n  }\n  return children\n}\n"],
-  "mappings": "AAqDM,mBA+BE,KA7BE,YAFJ;AArDN,SAAS,sBAAsB;AAC/B,SAAS,WAAW,OAAe,gBAAgB;AACnD,SAAS,oBAAoB;AAK7B,IAAI;AAEG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AAjBH;AAkBE,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AACpD,UAAM,WAAW,eAAe;AAChC,UAAM,KAAK,MAAM;AAEjB,QAAI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,aAAa,aAAa;AAC7E,UAAI,CAAC,MAAM;AACT,eAAO,SAAS,cAAc,KAAK;AACnC,aAAK,MAAM,QAAQ;AACnB,aAAK,MAAM,SAAS;AACpB,aAAK,MAAM,YAAY;AACvB,aAAK,MAAM,WAAW;AACtB,aAAK,MAAM,MAAM;AACjB,aAAK,MAAM,OAAO;AAClB,aAAK,MAAM,UAAU;AACrB,aAAK,MAAM,gBAAgB;AAC3B,aAAK,MAAM,aAAa;AACxB,iBAAS,KAAK,YAAY,IAAI;AAAA,MAChC;AAAA,IACF;AAEA,cAAU,MAAM;AAvCpB,UAAAA,KAAAC;AAwCM,OAAAA,OAAAD,MAAA,WAAW,iBAAX,gBAAAA,IAAyB,kBAAzB,gBAAAC,IAAwC,cAAc,CAAC,MAAM,YAAY;AACvE,yBAAiB,CAAC,MAAM,EAAE,CAAC;AAC3B,gBAAQ,KAAK,iBAAiB,IAAI;AAAA,MACpC;AAAA,IACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,cAAU,MAAM;AAEd,YAAM,KAAK,YAAY,UAAU,GAAG;AACpC,aAAO,MAAM,aAAa,EAAE;AAAA,IAC9B,GAAG,CAAC,CAAC;AAEL,WACE,iCACG;AAAA;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,cACY;AAAA,cAAG;AAAA,cACb,KAAK;AAAA,gBACJ;AAAA,kBACE,MAAM,WAAW;AAAA,kBACjB,WAAW,WAAW;AAAA,kBACtB,SAAS,WAAW;AAAA,kBACpB,gBAAgB,WAAW;AAAA,kBAC3B,SAAQ,gBAAW,iBAAX,mBAAyB,MAAM;AAAA,kBACvC,KAAI,gBAAW,iBAAX,mBAAyB;AAAA,kBAC7B,WAAU,sBAAW,iBAAX,mBAAyB,kBAAzB,mBAAwC;AAAA,kBAClD,OAAO,WAAW;AAAA,kBAClB;AAAA,kBACA,WAAW,CAAC,KAAI,gBAAW,iBAAX,mBAA0B,qBAAoB,CAAC,CAAE,EAAE;AAAA,oBACjE;AAAA,kBACF;AAAA,kBACA,uBAAsB,gBAAW,iBAAX,mBAA0B;AAAA,gBAClD;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MAEA,oBAAC,SAAK,cAAG;AAAA,MAER;AAAA,OACH;AAAA,EAEJ;AACA,SAAO;AACT;",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useEffect, useId, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { ChangedThemeResponse } from '../hooks/useTheme.js'\nimport { ThemeProps } from '../types.js'\n\nlet node\n\nexport function ThemeDebug({\n  themeState,\n  themeProps,\n  children,\n}: {\n  themeState: ChangedThemeResponse\n  themeProps: ThemeProps\n  children: any\n}) {\n  // disabled\n  if (themeProps['disable-child-theme']) {\n    return children\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    const [onChangeCount, setOnChangeCount] = useState(0)\n    const rerender = useForceUpdate()\n    const id = useId()\n\n    if (process.env.NODE_ENV === 'development' && typeof document !== 'undefined') {\n      if (!node) {\n        node = document.createElement('div')\n        node.style.width = '100%'\n        node.style.height = '200px'\n        node.style.overflowY = 'scroll'\n        node.style.position = 'fixed'\n        node.style.top = '0px'\n        node.style.left = '0px'\n        node.style.display = 'flex'\n        node.style.flexDirection = 'row'\n        node.style.background = 'var(--background)'\n        document.body.appendChild(node)\n      }\n    }\n\n    useEffect(() => {\n      themeState.themeManager?.parentManager?.onChangeTheme((name, manager) => {\n        setOnChangeCount((p) => ++p)\n        console.warn(`theme changed`, name)\n      })\n    }, [themeState.themeManager])\n\n    useEffect(() => {\n      // to refresh _listeningIds every so often\n      const tm = setInterval(rerender, 100)\n      return () => clearTimeout(tm)\n    }, [])\n\n    return (\n      <>\n        {createPortal(\n          <code\n            style={{\n              whiteSpace: 'pre',\n            }}\n          >\n            &lt;Theme {id} /&gt;&nbsp;\n            {JSON.stringify(\n              {\n                name: themeState.name,\n                className: themeState.className,\n                inverse: themeProps.inverse,\n                forceClassName: themeProps.forceClassName,\n                parent: themeState.themeManager?.state.parentName,\n                id: themeState.themeManager?.id,\n                parentId: themeState.themeManager?.parentManager?.id,\n                isNew: themeState.isNewTheme,\n                onChangeCount,\n                listening: [...(themeState.themeManager?.['_listeningIds'] || [])].join(\n                  ','\n                ),\n                _numChangeEventsSent: themeState.themeManager?.['_numChangeEventsSent'],\n              },\n              null,\n              2\n            )}\n          </code>,\n          node\n        )}\n\n        <div style={{ color: 'red' }}>{id}</div>\n\n        {children}\n      </>\n    )\n  }\n  return children\n}\n"],
+  "mappings": "AA0DM,mBA+BE,KA7BE,YAFJ;AA1DN,SAAS,sBAAsB;AAC/B,SAAS,WAAW,OAAe,gBAAgB;AACnD,SAAS,oBAAoB;AAK7B,IAAI;AAEG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AAjBH;AAmBE,MAAI,WAAW,qBAAqB,GAAG;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AACpD,UAAM,WAAW,eAAe;AAChC,UAAM,KAAK,MAAM;AAEjB,QAAI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,aAAa,aAAa;AAC7E,UAAI,CAAC,MAAM;AACT,eAAO,SAAS,cAAc,KAAK;AACnC,aAAK,MAAM,QAAQ;AACnB,aAAK,MAAM,SAAS;AACpB,aAAK,MAAM,YAAY;AACvB,aAAK,MAAM,WAAW;AACtB,aAAK,MAAM,MAAM;AACjB,aAAK,MAAM,OAAO;AAClB,aAAK,MAAM,UAAU;AACrB,aAAK,MAAM,gBAAgB;AAC3B,aAAK,MAAM,aAAa;AACxB,iBAAS,KAAK,YAAY,IAAI;AAAA,MAChC;AAAA,IACF;AAEA,cAAU,MAAM;AA5CpB,UAAAA,KAAAC;AA6CM,OAAAA,OAAAD,MAAA,WAAW,iBAAX,gBAAAA,IAAyB,kBAAzB,gBAAAC,IAAwC,cAAc,CAAC,MAAM,YAAY;AACvE,yBAAiB,CAAC,MAAM,EAAE,CAAC;AAC3B,gBAAQ,KAAK,iBAAiB,IAAI;AAAA,MACpC;AAAA,IACF,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,cAAU,MAAM;AAEd,YAAM,KAAK,YAAY,UAAU,GAAG;AACpC,aAAO,MAAM,aAAa,EAAE;AAAA,IAC9B,GAAG,CAAC,CAAC;AAEL,WACE,iCACG;AAAA;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,cACY;AAAA,cAAG;AAAA,cACb,KAAK;AAAA,gBACJ;AAAA,kBACE,MAAM,WAAW;AAAA,kBACjB,WAAW,WAAW;AAAA,kBACtB,SAAS,WAAW;AAAA,kBACpB,gBAAgB,WAAW;AAAA,kBAC3B,SAAQ,gBAAW,iBAAX,mBAAyB,MAAM;AAAA,kBACvC,KAAI,gBAAW,iBAAX,mBAAyB;AAAA,kBAC7B,WAAU,sBAAW,iBAAX,mBAAyB,kBAAzB,mBAAwC;AAAA,kBAClD,OAAO,WAAW;AAAA,kBAClB;AAAA,kBACA,WAAW,CAAC,KAAI,gBAAW,iBAAX,mBAA0B,qBAAoB,CAAC,CAAE,EAAE;AAAA,oBACjE;AAAA,kBACF;AAAA,kBACA,uBAAsB,gBAAW,iBAAX,mBAA0B;AAAA,gBAClD;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MAEA,oBAAC,SAAI,OAAO,EAAE,OAAO,MAAM,GAAI,cAAG;AAAA,MAEjC;AAAA,OACH;AAAA,EAEJ;AACA,SAAO;AACT;",
   "names": ["_a", "_b"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.15.8",
+  "version": "1.15.9",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.15.8",
-    "@tamagui/constants": "1.15.8",
-    "@tamagui/helpers": "1.15.8",
-    "@tamagui/normalize-css-color": "1.15.8",
-    "@tamagui/use-did-finish-ssr": "1.15.8",
-    "@tamagui/use-event": "1.15.8",
-    "@tamagui/use-force-update": "1.15.8"
+    "@tamagui/compose-refs": "1.15.9",
+    "@tamagui/constants": "1.15.9",
+    "@tamagui/helpers": "1.15.9",
+    "@tamagui/normalize-css-color": "1.15.9",
+    "@tamagui/use-did-finish-ssr": "1.15.9",
+    "@tamagui/use-event": "1.15.9",
+    "@tamagui/use-force-update": "1.15.9"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.15.8",
+    "@tamagui/build": "1.15.9",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -289,13 +289,16 @@ export function createComponent<
     const shouldForcePseudo = !!propsIn.forceStyle
     const noClassNames = shouldAvoidClasses || shouldForcePseudo
 
+    // internal use only
+    const disableTheme = props['data-disable-theme']
+
     const themeState = useThemeWithState({
       name: props.theme,
       componentName,
       reset: props.reset,
       inverse: props.themeInverse,
       // @ts-ignore this is internal use only
-      disable: props['data-themeable'],
+      disable: disableTheme,
       debug:
         process.env.NODE_ENV === 'development' && props.debug ? { hostRef } : undefined,
       shouldUpdate: () => !!stateRef.current.didAccessThemeVariableValue,

package/src/helpers/themeable.tsx

@@ -24,7 +24,7 @@ export function themeable<Component extends (props: any) => any>(
         inverse={themeInverse}
         componentName={componentName || opts?.componentName}
         name={(theme as any) || null}
-        data-themeable
+        disable-child-theme
         debug={props.debug}
         reset={props.themeReset}
       >

package/src/hooks/useTheme.tsx

@@ -187,12 +187,13 @@ export const useChangeThemeEffect = (
   function getShouldUpdateTheme(
     manager = themeManager,
     nextState?: ThemeManagerState | null,
+    prevState: ThemeManagerState = state,
     forceShouldChange = false
   ) {
     const next = nextState || manager.getState(props, parentManager)
     if (!next) return
     if (disableUpdate?.() === true) return
-    if (!forceShouldChange && !manager.getStateShouldChange(next, state)) return
+    if (!forceShouldChange && !manager.getStateShouldChange(next, prevState)) return
     return next
   }
 
@@ -307,9 +308,8 @@ export const useChangeThemeEffect = (
       // which is correct, potentially in the future we can avoid forceChange and just know to
       // update if keys.length is set + onChangeTheme called
       const forceChange = Boolean(keys?.length)
-
       const next = themeManager.getState(props, parentManager)
-      const nextState = getShouldUpdateTheme(themeManager, next, forceChange)
+      const nextState = getShouldUpdateTheme(themeManager, next, prev.state, forceChange)
 
       if (nextState) {
         state = nextState

package/src/views/Theme.tsx

@@ -17,9 +17,9 @@ export function Theme(props: ThemeProps) {
   const isRoot = !!props['_isRoot']
   const themeState = useChangeThemeEffect(props, isRoot)
 
-  let children = props['data-themeable']
+  let children = props['disable-child-theme']
     ? Children.map(props.children, (child) =>
-        cloneElement(child, { ['data-themeable']: true })
+        cloneElement(child, { ['data-disable-theme']: true })
       )
     : props.children
 

package/src/views/ThemeDebug.tsx

@@ -16,6 +16,11 @@ export function ThemeDebug({
   themeProps: ThemeProps
   children: any
 }) {
+  // disabled
+  if (themeProps['disable-child-theme']) {
+    return children
+  }
+
   if (process.env.NODE_ENV === 'development') {
     const [onChangeCount, setOnChangeCount] = useState(0)
     const rerender = useForceUpdate()
@@ -82,7 +87,7 @@ export function ThemeDebug({
           node
         )}
 
-        <div>{id}</div>
+        <div style={{ color: 'red' }}>{id}</div>
 
         {children}
       </>

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAYN,MAAM,OAAO,CAAA;AAiBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAEhB,qBAAqB,EAErB,cAAc,EAIf,MAAM,SAAS,CAAA;AAsBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAeD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AA8B3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EAEjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EACpD,eAAe,CAAC,EAAE,iBAAiB,wDAixBpC;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAAmB,CAAA;AAMrE,eAAO,MAAM,MAAM,sDA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAYN,MAAM,OAAO,CAAA;AAiBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAEhB,qBAAqB,EAErB,cAAc,EAIf,MAAM,SAAS,CAAA;AAsBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAeD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AA8B3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EAEjB,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EACpD,eAAe,CAAC,EAAE,iBAAiB,wDAoxBpC;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAAmB,CAAA;AAMrE,eAAO,MAAM,MAAM,sDA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}

package/types/views/ThemeDebug.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeDebug.d.ts","sourceRoot":"","sources":["../../src/views/ThemeDebug.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIxC,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,UAAU,EACV,QAAQ,GACT,EAAE;IACD,UAAU,EAAE,oBAAoB,CAAA;IAChC,UAAU,EAAE,UAAU,CAAA;IACtB,QAAQ,EAAE,GAAG,CAAA;CACd,OA0EA"}
+{"version":3,"file":"ThemeDebug.d.ts","sourceRoot":"","sources":["../../src/views/ThemeDebug.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAIxC,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,UAAU,EACV,QAAQ,GACT,EAAE;IACD,UAAU,EAAE,oBAAoB,CAAA;IAChC,UAAU,EAAE,UAAU,CAAA;IACtB,QAAQ,EAAE,GAAG,CAAA;CACd,OA+EA"}