@tamagui/web 1.115.4 → 1.116.0

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeDebug.tsx"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAE/B,SAAS,oBAAoB;AAyDvB,mBAmCE,KAjCE,YAFJ;AApDN,IAAI;AAEG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAAgF;AAC9E,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,aAAa,gBAAgB,GAC7B,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,CAAC,GACpD,WAAW,eAAe,GAC1B,KAAK,MAAM,MAAM;AAoCvB,WAlCI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,WAAa,QAC3D,SACH,OAAO,SAAS,cAAc,KAAK,GACnC,KAAK,MAAM,SAAS,SACpB,KAAK,MAAM,YAAY,UACvB,KAAK,MAAM,WAAW,SACtB,KAAK,MAAM,SAAS,KACpB,KAAK,MAAM,SAAS,QACpB,KAAK,MAAM,OAAO,QAClB,KAAK,MAAM,QAAQ,QACnB,KAAK,MAAM,UAAU,QACrB,KAAK,MAAM,SAAS,kBACpB,KAAK,MAAM,gBAAgB,OAC3B,KAAK,MAAM,aAAa,qBACxB,SAAS,KAAK,YAAY,IAAI,KAIlC,MAAM,UAAU,MAAM;AACpB,iBAAW,cAAc,eAAe,cAAc,CAAC,MAAM,YAAY;AACvE,yBAAiB,CAAC,MAAM,EAAE,CAAC,GAC3B,QAAQ;AAAA,UACN,qBAAqB,WAAW,cAAc,EAAE,gBAAgB,WAAW,cAAc,eAAe,EAAE;AAAA,UAC1G;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,WAAW,YAAY,CAAC,GAE5B,MAAM,UAAU,MAAM;AAEpB,YAAM,KAAK,YAAY,UAAU,GAAI;AACrC,aAAO,MAAM,aAAa,EAAS;AAAA,IACrC,GAAG,CAAC,CAAC,GAED,WAAW,qBAAqB,KAAK,CAAC,aACjC,WAIP,iCACG;AAAA;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,UAAU;AAAA,cACV,SAAS;AAAA,YACX;AAAA,YACD;AAAA;AAAA,cACY;AAAA,cAAG;AAAA,cACb,KAAK;AAAA,gBACJ;AAAA,kBACE,WAAW,WAAW;AAAA,kBACtB,MAAM,YAAY,OAAO;AAAA,kBACzB,WAAW,YAAY,OAAO;AAAA,kBAC9B,SAAS,WAAW;AAAA,kBACpB,gBAAgB,WAAW;AAAA,kBAC3B,QAAQ,WAAW,cAAc,MAAM;AAAA,kBACvC,IAAI,WAAW,cAAc;AAAA,kBAC7B,UAAU,WAAW,cAAc,eAAe;AAAA,kBAClD,OAAO,WAAW;AAAA,kBAClB;AAAA,kBACA,WAAW,CAAC,GAAI,WAAW,cAAe,iBAAoB,CAAC,CAAE,EAAE;AAAA,oBACjE;AAAA,kBACF;AAAA,kBACA,sBAAsB,WAAW,cAAe;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;AAEA,WAAW,cAAiB;",
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAyDvB,mBAmCE,KAjCE,YAFJ;AApDN,IAAI;AAEG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAAgF;AAC9E,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,aAAa,gBAAgB,GAC7B,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,CAAC,GACpD,WAAW,eAAe,GAC1B,KAAK,MAAM,MAAM;AAoCvB,WAlCI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,WAAa,QAC3D,SACH,OAAO,SAAS,cAAc,KAAK,GACnC,KAAK,MAAM,SAAS,SACpB,KAAK,MAAM,YAAY,UACvB,KAAK,MAAM,WAAW,SACtB,KAAK,MAAM,SAAS,KACpB,KAAK,MAAM,SAAS,QACpB,KAAK,MAAM,OAAO,QAClB,KAAK,MAAM,QAAQ,QACnB,KAAK,MAAM,UAAU,QACrB,KAAK,MAAM,SAAS,kBACpB,KAAK,MAAM,gBAAgB,OAC3B,KAAK,MAAM,aAAa,qBACxB,SAAS,KAAK,YAAY,IAAI,KAIlC,MAAM,UAAU,MAAM;AACpB,iBAAW,cAAc,eAAe,cAAc,CAAC,MAAM,YAAY;AACvE,yBAAiB,CAAC,MAAM,EAAE,CAAC,GAC3B,QAAQ;AAAA,UACN,qBAAqB,WAAW,cAAc,EAAE,gBAAgB,WAAW,cAAc,eAAe,EAAE;AAAA,UAC1G;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,WAAW,YAAY,CAAC,GAE5B,MAAM,UAAU,MAAM;AAEpB,YAAM,KAAK,YAAY,UAAU,GAAI;AACrC,aAAO,MAAM,aAAa,EAAS;AAAA,IACrC,GAAG,CAAC,CAAC,GAED,WAAW,qBAAqB,KAAK,CAAC,aACjC,WAIP,iCACG;AAAA;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,UAAU;AAAA,cACV,SAAS;AAAA,YACX;AAAA,YACD;AAAA;AAAA,cACY;AAAA,cAAG;AAAA,cACb,KAAK;AAAA,gBACJ;AAAA,kBACE,WAAW,WAAW;AAAA,kBACtB,MAAM,YAAY,OAAO;AAAA,kBACzB,WAAW,YAAY,OAAO;AAAA,kBAC9B,SAAS,WAAW;AAAA,kBACpB,gBAAgB,WAAW;AAAA,kBAC3B,QAAQ,WAAW,cAAc,MAAM;AAAA,kBACvC,IAAI,WAAW,cAAc;AAAA,kBAC7B,UAAU,WAAW,cAAc,eAAe;AAAA,kBAClD,OAAO,WAAW;AAAA,kBAClB;AAAA,kBACA,WAAW,CAAC,GAAI,WAAW,cAAe,iBAAoB,CAAC,CAAE,EAAE;AAAA,oBACjE;AAAA,kBACF;AAAA,kBACA,sBAAsB,WAAW,cAAe;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;AAEA,WAAW,cAAiB;",
   "names": []
 }

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

@@ -1 +1 @@
-{"version":3,"names":["React","useDidFinishSSR","useForceUpdate","createPortal","Fragment","jsx","jsxs","node","ThemeDebug","themeState","themeProps","children","process","env","NODE_ENV","isHydrated","onChangeCount","setOnChangeCount","useState","rerender","id","useId","document","createElement","style","height","overflowY","position","zIndex","bottom","left","right","display","border","flexDirection","background","body","appendChild","useEffect","themeManager","parentManager","onChangeTheme","name","manager","p","console","warn","tm","setInterval","clearTimeout","whiteSpace","maxWidth","overflow","padding","JSON","stringify","propsName","state","className","inverse","forceClassName","parent","parentName","parentId","isNew","isNewTheme","listening","_listeningIds","join","_numChangeEventsSent","color","displayName"],"sources":["../../../src/views/ThemeDebug.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useDidFinishSSR","useForceUpdate","createPortal","Fragment","jsx","jsxs","node","ThemeDebug","themeState","themeProps","children","process","env","NODE_ENV","isHydrated","onChangeCount","setOnChangeCount","useState","rerender","id","useId","document","createElement","style","height","overflowY","position","zIndex","bottom","left","right","display","border","flexDirection","background","body","appendChild","useEffect","themeManager","parentManager","onChangeTheme","name","manager","p","console","warn","tm","setInterval","clearTimeout","whiteSpace","maxWidth","overflow","padding","JSON","stringify","propsName","state","className","inverse","forceClassName","parent","parentName","parentId","isNew","isNewTheme","listening","_listeningIds","join","_numChangeEventsSent","color","displayName"],"sources":["../../../src/views/ThemeDebug.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.115.4",
+  "version": "1.116.0",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,18 +27,20 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.115.4",
-    "@tamagui/constants": "1.115.4",
-    "@tamagui/helpers": "1.115.4",
-    "@tamagui/normalize-css-color": "1.115.4",
-    "@tamagui/timer": "1.115.4",
-    "@tamagui/types": "1.115.4",
-    "@tamagui/use-did-finish-ssr": "1.115.4",
-    "@tamagui/use-event": "1.115.4",
-    "@tamagui/use-force-update": "1.115.4"
+    "@tamagui/compose-refs": "1.116.0",
+    "@tamagui/constants": "1.116.0",
+    "@tamagui/helpers": "1.116.0",
+    "@tamagui/normalize-css-color": "1.116.0",
+    "@tamagui/timer": "1.116.0",
+    "@tamagui/types": "1.116.0",
+    "@tamagui/use-did-finish-ssr": "1.116.0",
+    "@tamagui/use-event": "1.116.0",
+    "@tamagui/use-force-update": "1.116.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@tamagui/build": "1.115.4",
+    "@tamagui/build": "1.116.0",
     "@testing-library/react": "^16.0.1",
     "csstype": "^3.0.10",
     "typescript": "^5.5.2",

package/src/createComponent.tsx

@@ -353,7 +353,7 @@ export function createComponent<
       presenceState,
       setState,
       setStateShallow,
-      shouldAvoidClasses,
+      noClass,
       state,
       stateRef,
       supportsCSSVars,
@@ -361,9 +361,6 @@ export function createComponent<
       willBeAnimatedClient,
     } = useComponentState(props, componentContext, staticConfig, config!)
 
-    const shouldForcePseudo = !!propsIn.forceStyle
-    const noClassNames = shouldAvoidClasses || shouldForcePseudo
-
     if (process.env.NODE_ENV === 'development' && time) time`use-state`
 
     const hasTextAncestor = !!(isWeb && isText ? componentContext.inText : false)
@@ -434,7 +431,7 @@ export function createComponent<
           (hasEnterStyle ? '(hasEnter)' : ' ') +
           (isAnimated ? '(animated)' : ' ') +
           (isReactNative ? '(rnw)' : ' ') +
-          (shouldAvoidClasses ? '(shouldAvoidClasses)' : ' ') +
+          (noClass ? '(noClass)' : ' ') +
           (state.press || state.pressIn ? '(PRESSED)' : ' ') +
           (state.hover ? '(HOVERED)' : ' ') +
           (state.focus ? '(FOCUSED)' : ' ') +
@@ -448,7 +445,7 @@ export function createComponent<
         )
 
         if (isServer) {
-          log({ noClassNames, isAnimated, shouldAvoidClasses, isWeb, supportsCSSVars })
+          log({ noClass, isAnimated, isWeb, supportsCSSVars })
         } else {
           // if strict mode or something messes with our nesting this fixes:
           console.groupEnd()
@@ -480,7 +477,7 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`theme`
 
-    const mediaState = useMedia(stateRef, componentContext, debugProp)
+    const mediaState = useMedia(componentContext, debugProp)
 
     setDidGetVariableValue(false)
 
@@ -495,7 +492,7 @@ export function createComponent<
 
     const styleProps = {
       mediaState,
-      noClassNames,
+      noClass,
       resolveValues,
       isExiting,
       isAnimated,
@@ -532,7 +529,7 @@ export function createComponent<
     const shouldListenForMedia =
       didGetVariableValue() ||
       hasRuntimeMediaKeys ||
-      (noClassNames && splitStyles.hasMedia === true)
+      (noClass && splitStyles.hasMedia === true)
 
     const mediaListeningKeys = hasRuntimeMediaKeys
       ? (splitStyles.hasMedia as Record<string, boolean>)
@@ -720,23 +717,21 @@ export function createComponent<
         return
       }
 
+      let tm
+
       if (state.unmounted === true && hasEnterStyle) {
         setStateShallow({ unmounted: 'should-enter' })
         return
       }
 
-      let tm
-
       if (state.unmounted) {
-        if (animationDriver?.supportsCSSVars) {
-          // this fixes css driver enter animations - from what i can tell they are correct but react 19 somehow messing it up
-          tm = setTimeout(() => {
-            setStateShallow({ unmounted: false })
-          })
-        } else {
+        // this setTimeout fixes moti and css driver enter animations
+        // not sure why
+        tm = setTimeout(() => {
           setStateShallow({ unmounted: false })
-        }
-        return
+        })
+
+        return () => clearTimeout(tm)
       }
 
       const dispose = subscribeToContextGroup({
@@ -762,10 +757,9 @@ export function createComponent<
 
     // if its a group its gotta listen for pseudos to emit them to children
 
-    const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle
-    const runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle
-    const runtimeFocusVisibleStyle =
-      !disabled && noClassNames && pseudos?.focusVisibleStyle
+    const runtimePressStyle = !disabled && noClass && pseudos?.pressStyle
+    const runtimeFocusStyle = !disabled && noClass && pseudos?.focusStyle
+    const runtimeFocusVisibleStyle = !disabled && noClass && pseudos?.focusVisibleStyle
     const attachFocus = Boolean(
       runtimePressStyle ||
         runtimeFocusStyle ||
@@ -785,7 +779,7 @@ export function createComponent<
         onClick ||
         pseudos?.focusVisibleStyle
     )
-    const runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle
+    const runtimeHoverStyle = !disabled && noClass && pseudos?.hoverStyle
     const needsHoverState = Boolean(
       groupName || runtimeHoverStyle || onHoverIn || onHoverOut
     )
@@ -1151,8 +1145,7 @@ export function createComponent<
                 mediaListeningKeys,
                 pseudos,
                 shouldAttach,
-                shouldAvoidClasses,
-                shouldForcePseudo,
+                noClass,
                 shouldListenForMedia,
                 splitStyles,
                 splitStylesStyle,

package/src/defaultComponentState.tsx

@@ -14,8 +14,3 @@ export const defaultComponentStateMounted: TamaguiComponentState = {
   ...defaultComponentState,
   unmounted: false,
 }
-
-export const defaultComponentStateShouldEnter: TamaguiComponentState = {
-  ...defaultComponentState,
-  unmounted: 'should-enter',
-}

package/src/helpers/getSplitStyles.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   isAndroid,
   isClient,
@@ -17,6 +16,7 @@ import {
   validPseudoKeys,
   validStyles,
 } from '@tamagui/helpers'
+import React from 'react'
 
 import { getConfig, getFont } from '../config'
 import { accessibilityDirectMap } from '../constants/accessibilityDirectMap'
@@ -61,6 +61,8 @@ import {
   shouldInsertStyleRules,
   updateRules,
 } from './insertStyleRule'
+import { isActivePlatform } from './isActivePlatform'
+import { isActiveTheme } from './isActiveTheme'
 import { log } from './log'
 import {
   normalizeValueWithProperty,
@@ -69,9 +71,8 @@ import {
 import { getPropMappedFontFamily, propMapper } from './propMapper'
 import { pseudoDescriptors, pseudoPriorities } from './pseudoDescriptors'
 import { skipProps } from './skipProps'
-import { transformsToString } from './transformsToString'
-import { isActivePlatform } from './isActivePlatform'
 import { sortString } from './sortString'
+import { transformsToString } from './transformsToString'
 
 const consoleGroupCollapsed = isWeb ? console.groupCollapsed : console.info
 
@@ -168,7 +169,7 @@ export const getSplitStyles: StyleSplitter = (
   const viewProps: GetStyleResult['viewProps'] = {}
   const mediaState = styleProps.mediaState || globalMediaState
   const usedKeys: Record<string, number> = {}
-  const shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClassNames
+  const shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClass
   const rulesToInsert: RulesToInsert =
     process.env.TAMAGUI_TARGET === 'native' ? (undefined as any) : {}
   const classNames: ClassNamesObject = {}
@@ -241,12 +242,7 @@ export const getSplitStyles: StyleSplitter = (
         valInit &&
         typeof valInit === 'object'
       ) {
-        viewProps[keyInit] = getSubStyle(
-          styleState,
-          keyInit,
-          valInit,
-          styleProps.noClassNames
-        )
+        viewProps[keyInit] = getSubStyle(styleState, keyInit, valInit, styleProps.noClass)
         continue
       }
     }
@@ -556,7 +552,7 @@ export const getSplitStyles: StyleSplitter = (
       //     valInit,
       //     fontFamily,
       //     true,
-      //     state.noClassNames
+      //     state.noClass
       //   )
       //   const descriptor = pseudoDescriptors[keyInit]
       //   for (const key in pseudoStyleObject) {
@@ -685,12 +681,7 @@ export const getSplitStyles: StyleSplitter = (
 
         // TODO can avoid processing this if !shouldDoClasses + state is off
         // (note: can't because we need to set defaults on enter/exit or else enforce that they should)
-        const pseudoStyleObject = getSubStyle(
-          styleState,
-          key,
-          val,
-          styleProps.noClassNames
-        )
+        const pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClass)
 
         const descriptor = pseudoDescriptors[key as keyof typeof pseudoDescriptors]
         const isEnter = key === 'enterStyle'
@@ -874,10 +865,8 @@ export const getSplitStyles: StyleSplitter = (
             // for now we're doing weird stuff, getStylesAtomic will put the
             // $platform-web into property so we can check it here
             const property = style[0]
-            if (property[0] === '$') {
-              if (property.startsWith('$platform') && !isActivePlatform(property)) {
-                continue
-              }
+            if (property[0] === '$' && !isActivePlatform(property)) {
+              continue
             }
 
             const out = createMediaStyle(
@@ -930,8 +919,8 @@ export const getSplitStyles: StyleSplitter = (
           if (isThemeMedia) {
             // needed to get updates when theme changes
             dynamicThemeAccess = true
-            const mediaThemeName = mediaKeyShort.slice(6)
-            if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName))) {
+
+            if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) {
               continue
             }
           } else if (isGroupMedia) {
@@ -1024,9 +1013,8 @@ export const getSplitStyles: StyleSplitter = (
               continue
             }
             if (subKey[0] === '$') {
-              if (!isActivePlatform(subKey)) {
-                continue
-              }
+              if (!isActivePlatform(subKey)) continue
+              if (!isActiveTheme(subKey, themeName)) continue
               for (const subSubKey in mediaStyle[subKey]) {
                 mergeMediaStyle(subSubKey, mediaStyle[subKey][subSubKey])
               }
@@ -1162,7 +1150,7 @@ export const getSplitStyles: StyleSplitter = (
           const [key, value, identifier] = atomicStyle
           const isAnimatedAndAnimateOnly =
             styleProps.isAnimated &&
-            styleProps.noClassNames &&
+            styleProps.noClass &&
             (!props.animateOnly || props.animateOnly.includes(key))
 
           // or not animated but you have animateOnly

package/src/helpers/isActivePlatform.ts

@@ -1,6 +1,9 @@
 import { currentPlatform } from '@tamagui/constants'
 
 export function isActivePlatform(key: string) {
+  if (!key.startsWith('$platform')) {
+    return true
+  }
   const platform = key.slice(10)
   return (
     // web, ios, android

package/src/helpers/isActiveTheme.ts

@@ -0,0 +1,4 @@
+export function isActiveTheme(key: string, activeThemeName: string) {
+  if (!key.startsWith('$theme-')) return
+  return key.slice(7).startsWith(activeThemeName)
+}

package/src/helpers/log.ts

@@ -1,8 +1,8 @@
-import { _dmt } from '../hooks/useMedia'
+import { _disableMediaTouch } from '../hooks/useMedia'
 
 export function log(...args: any[]) {
   if (process.env.NODE_ENV === 'production') return
-  _dmt(true)
+  _disableMediaTouch(true)
   try {
     if (process.env.TAMAGUI_TARGET === 'web') {
       return console.info(...args)
@@ -11,6 +11,6 @@ export function log(...args: any[]) {
     // biome-ignore lint/suspicious/noConsoleLog: <explanation>
     return console.log(...args)
   } finally {
-    _dmt(false)
+    _disableMediaTouch(false)
   }
 }

package/src/helpers/themeable.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import type { StaticConfig, ThemeableProps } from '../types'
+import type { StaticConfig, ThemeableProps, ThemeProps } from '../types'
 import { Theme } from '../views/Theme'
 
 export function themeable<ComponentType extends (props: any) => any>(
@@ -30,15 +30,33 @@ export function themeable<ComponentType extends (props: any) => any>(
       <Component ref={ref} {...rest} data-disable-theme />
     )
 
+    // we filter out the props here, why?
+    // Theme internally avoids wrapping <span /> unless 'theme' in props
+    // reason for this is to avoid wrapping every single component with span
+    // *if* ever it themes once, it leaves the span, to avoid reparenting
+    // its expected if users want to avoid re-parenting, they keep the theme prop
+    // and just set it to null. but we need to "respect" that here by filtering
+    // one example of a bug caused by not doing this is in <Select native> on web
+    // where it renders to an <option />, and then Theme would wrap a <span /> in that
+    // which is not allowed in HTML and causes hydration errors / logs
+    const filteredProps: Partial<ThemeProps> = {
+      componentName: componentName || staticConfig?.componentName,
+    }
+    if ('debug' in props) {
+      filteredProps.debug = props.debug
+    }
+    if ('theme' in props) {
+      filteredProps.name = props.theme
+    }
+    if ('themeInverse' in props) {
+      filteredProps.inverse = props.themeInverse
+    }
+    if ('themeReset' in props) {
+      filteredProps.reset = themeReset
+    }
+
     let contents = (
-      <Theme
-        componentName={componentName || staticConfig?.componentName}
-        name={theme}
-        disable-child-theme
-        debug={props.debug}
-        inverse={themeInverse}
-        reset={themeReset}
-      >
+      <Theme disable-child-theme {...filteredProps}>
         {element}
       </Theme>
     )

package/src/hooks/useComponentState.ts

@@ -1,10 +1,12 @@
+import { isServer, isWeb } from '@tamagui/constants'
+import { useRef, useState } from 'react'
 import {
   defaultComponentState,
   defaultComponentStateMounted,
-  defaultComponentStateShouldEnter,
 } from '../defaultComponentState'
-import { useDidHydrateOnce } from '../hooks/useDidHydrateOnce'
-import { useRef, useState } from 'react'
+import { createShallowSetState } from '../helpers/createShallowSetState'
+import { isObj } from '../helpers/isObj'
+import { log } from '../helpers/log'
 import type {
   ComponentContextI,
   GroupStateListener,
@@ -16,10 +18,6 @@ import type {
   TextProps,
   UseAnimationHook,
 } from '../types'
-import { isServer, isWeb } from '@tamagui/constants'
-import { createShallowSetState } from '../helpers/createShallowSetState'
-import { isObj } from '../helpers/isObj'
-import { log } from '../helpers/log'
 
 export const useComponentState = (
   props: StackProps | TextProps | Record<string, any>,
@@ -57,6 +55,8 @@ export const useComponentState = (
     curStateRef.hasAnimated = true
   }
 
+  const { disableClassName } = props
+
   // HOOK
   const presence =
     (willBeAnimated &&
@@ -68,15 +68,24 @@ export const useComponentState = (
   const isEntering = presenceState?.isPresent === true && presenceState.initial !== false
 
   const hasEnterStyle = !!props.enterStyle
-  // finish animated logic, avoid isAnimated when unmounted
-  const hasRNAnimation = hasAnimationProp && animationDriver?.isReactNative
+
+  const hasAnimationThatNeedsHydrate =
+    hasAnimationProp && (animationDriver?.isReactNative || !supportsCSSVars)
 
   const hasEnterState = hasEnterStyle || isEntering
 
   // this can be conditional because its only ever needed with animations
-  const didHydrateOnce = willBeAnimated ? useDidHydrateOnce() : true
-  const shouldEnter = hasEnterState || (!didHydrateOnce && hasRNAnimation)
-  const shouldEnterFromUnhydrated = isWeb && !didHydrateOnce
+  const shouldEnter =
+    hasEnterState ||
+    hasAnimationThatNeedsHydrate ||
+    // disableClassName doesnt work server side, only client, so needs hydrate
+    // this is just for a better ux, supports css variables for light/dark, media queries, etc
+    disableClassName
+
+  // two stage enter: because we switch from css driver to spring driver
+  //   - first render: render to match server with css driver
+  //   - second render: state.unmounted = should-enter, still rendering the initial,
+  //     non-entered state but now with the spring animation driver
 
   const initialState = shouldEnter
     ? // on the very first render we switch all spring animation drivers to css rendering
@@ -84,9 +93,7 @@ export const useComponentState = (
       // without flickers of the wrong colors.
       // but once we do that initial hydration and we are in client side rendering mode,
       // we can avoid the extra re-render on mount
-      shouldEnterFromUnhydrated
-      ? defaultComponentState
-      : defaultComponentStateShouldEnter
+      defaultComponentState
     : defaultComponentStateMounted
 
   // will be nice to deprecate half of these:
@@ -102,11 +109,16 @@ export const useComponentState = (
   const state = props.forceStyle ? { ...states[0], [props.forceStyle]: true } : states[0]
   const setState = states[1]
 
-  const isHydrated = state.unmounted === false || state.unmounted === 'should-enter'
+  const isHydrated = state.unmounted === false
 
   // only web server + initial client render run this when not hydrated:
   let isAnimated = willBeAnimated
-  if (isWeb && hasRNAnimation && !staticConfig.isHOC && state.unmounted === true) {
+  if (
+    isWeb &&
+    hasAnimationThatNeedsHydrate &&
+    !staticConfig.isHOC &&
+    state.unmounted === true
+  ) {
     isAnimated = false
     curStateRef.willHydrate = true
   }
@@ -123,10 +135,6 @@ export const useComponentState = (
 
   let setStateShallow = createShallowSetState(setState, disabled, false, props.debug)
 
-  // if (isHydrated && state.unmounted === 'should-enter') {
-  //   state.unmounted = true
-  // }
-
   // set enter/exit variants onto our new props object
   if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
     if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
@@ -151,33 +159,33 @@ export const useComponentState = (
     }
   }
 
-  let shouldAvoidClasses = !isWeb
+  let noClass = !isWeb || !!props.forceStyle
 
   // on server for SSR and animation compat added the && isHydrated but perhaps we want
   // disableClassName="until-hydrated" to be more straightforward
   // see issue if not, Button sets disableClassName to true <Button animation="" /> with
   // the react-native driver errors because it tries to animate var(--color) to rbga(..)
   if (isWeb) {
-    const { disableClassName } = props
-
-    const isAnimatedAndHydrated =
-      isAnimated && !supportsCSSVars && didHydrateOnce && !isServer
+    // no matter what if fully unmounted or on the server we use className
+    // only once we hydrate do we switch to spring animation drivers or disableClassName etc
+    if (!isServer || isHydrated) {
+      const isAnimatedAndHydrated = isAnimated && !supportsCSSVars
 
-    const isClassNameDisabled =
-      !staticConfig.acceptsClassName && (config.disableSSR || didHydrateOnce)
+      const isClassNameDisabled =
+        !staticConfig.acceptsClassName && (config.disableSSR || !state.unmounted)
 
-    const isDisabledManually =
-      disableClassName && !isServer && didHydrateOnce && state.unmounted === true
+      const isDisabledManually = disableClassName && !state.unmounted
 
-    if (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) {
-      shouldAvoidClasses = true
+      if (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) {
+        noClass = true
 
-      if (process.env.NODE_ENV === 'development' && props.debug) {
-        log(`avoiding className`, {
-          isAnimatedAndHydrated,
-          isDisabledManually,
-          isClassNameDisabled,
-        })
+        if (process.env.NODE_ENV === 'development' && props.debug) {
+          log(`avoiding className`, {
+            isAnimatedAndHydrated,
+            isDisabledManually,
+            isClassNameDisabled,
+          })
+        }
       }
     }
   }
@@ -231,7 +239,7 @@ export const useComponentState = (
     presenceState,
     setState,
     setStateShallow,
-    shouldAvoidClasses,
+    noClass,
     state,
     stateRef,
     supportsCSSVars,