tamagui 1.85.3 → 1.85.5

package/dist/test.native.js

@@ -1341,7 +1341,7 @@ var require_insertStyleRule_native = __commonJS({
         theme: values
       };
       for (let selector of selectors) {
-        let scheme = selector.includes("t_dark") ? "dark" : selector.includes("t_light") ? "light" : "", name = selector.slice(selector.lastIndexOf(".t_") + 3);
+        let di = selector.indexOf("t_dark"), li = selector.indexOf("t_light"), scheme = di && li ? di < li ? "dark" : "light" : "", name = selector.slice(selector.lastIndexOf(".t_") + 3);
         name.startsWith(scheme) && (name = name.slice(scheme.length + 1)), scheme === name && (scheme = "");
         let themeName = `${scheme}${scheme && name ? "_" : ""}${name}`;
         dedupedEntry.names.includes(themeName) || dedupedEntry.names.push(themeName);
@@ -1476,7 +1476,7 @@ var require_pseudoDescriptors_native = __commonJS({
       ...pseudoDescriptorsBase,
       enterStyle: {
         name: "enter",
-        stateKey: "unmounted",
+        selector: ".t_unmounted",
         priority: 4
       },
       exitStyle: {
@@ -1962,10 +1962,10 @@ var require_createShallowSetState_native = __commonJS({
       mergeIfNotShallowEqual: () => mergeIfNotShallowEqual
     });
     module2.exports = __toCommonJS2(createShallowSetState_exports);
-    function createShallowSetState(setter) {
-      return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next));
+    function createShallowSetState(setter, debug) {
+      return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next, debug));
     }
-    function mergeIfNotShallowEqual(prev, next) {
+    function mergeIfNotShallowEqual(prev, next, debug) {
       return isEqualShallow(prev, next) ? prev : { ...prev, ...next };
     }
     function isEqualShallow(prev, next) {
@@ -3302,7 +3302,7 @@ var require_getSplitStyles_native = __commonJS({
         inlineWhenUnflattened,
         parentStaticConfig,
         acceptsClassName
-      } = staticConfig, viewProps = {}, mediaState3 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants4.isWeb && !styleProps.noClassNames, rulesToInsert = [], classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, style = {}, className = "", mediaStylesSeen = 0, styleState = {
+      } = staticConfig, viewProps = {}, mediaState3 = styleProps.mediaState || import_useMedia.mediaState, usedKeys = {}, shouldDoClasses = acceptsClassName && import_constants4.isWeb && !styleProps.noClassNames, rulesToInsert = [], classNames = {}, transforms = {}, pseudos = null, space = props.space, hasMedia = !1, dynamicThemeAccess, pseudoGroups, mediaGroups, style = {}, className = props.className ?? "", mediaStylesSeen = 0, styleState = {
         curProps: { ...props },
         classNames,
         conf,
@@ -3409,13 +3409,14 @@ var require_getSplitStyles_native = __commonJS({
                   Object.assign(pseudos[key], pseudoStyleObject);
                   continue;
                 }
-                if (shouldDoClasses && !isEnter && !isExit) {
+                if (shouldDoClasses && !isExit) {
                   let pseudoStyles = (0, import_getStylesAtomic.generateAtomicStyles)(pseudoStyleObject, descriptor);
                   for (let psuedoStyle of pseudoStyles)
                     `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}` in usedKeys || psuedoStyle.identifier;
-                } else {
-                  let descriptorKey = descriptor.stateKey || descriptor.name, pseudoState = componentState[descriptorKey], isDisabled = isExit ? !styleProps.isExiting : !pseudoState;
-                  import_constants4.isWeb && !import_constants4.isClient && isEnter && (isDisabled = !1);
+                }
+                if (!shouldDoClasses || isExit || isEnter) {
+                  let descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = componentState[descriptorKey] === !1;
+                  isExit && (isDisabled = !styleProps.isExiting), isEnter && (isDisabled = componentState.unmounted === "should-enter" ? !0 : !componentState.unmounted);
                   let importance = descriptor.priority;
                   for (let pkey in pseudoStyleObject) {
                     let val2 = pseudoStyleObject[pkey];
@@ -3718,37 +3719,6 @@ var require_mergeProps_native = __commonJS({
   }
 });
 
-// ../web/dist/cjs/helpers/proxyThemeVariables.native.js
-var require_proxyThemeVariables_native = __commonJS({
-  "../web/dist/cjs/helpers/proxyThemeVariables.native.js"(exports2, module2) {
-    "use strict";
-    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: !0 });
-    }, __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from == "object" || typeof from == "function")
-        for (let key of __getOwnPropNames2(from))
-          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      return to;
-    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), proxyThemeVariables_exports = {};
-    __export2(proxyThemeVariables_exports, {
-      proxyThemeVariables: () => proxyThemeVariables
-    });
-    module2.exports = __toCommonJS2(proxyThemeVariables_exports);
-    function proxyThemeVariables(obj) {
-      return new Proxy(obj || {}, {
-        has(target, key) {
-          return Reflect.has(target, removeStarting$(key));
-        },
-        get(target, key) {
-          return Reflect.get(target, removeStarting$(key));
-        }
-      });
-    }
-    var removeStarting$ = (str) => typeof str == "string" && str[0] === "$" ? str.slice(1) : str;
-  }
-});
-
 // ../web/dist/cjs/helpers/ThemeManagerContext.native.js
 var require_ThemeManagerContext_native = __commonJS({
   "../web/dist/cjs/helpers/ThemeManagerContext.native.js"(exports2, module2) {
@@ -3861,7 +3831,6 @@ var require_ThemeManager_native = __commonJS({
       let nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map((x) => (x == null ? void 0 : x.state.name) || "");
       isDirectParentAComponentTheme && allComponentThemes.shift();
       let base = baseName.split(import_constants22.THEME_NAME_SEPARATOR), max2 = base.length, min2 = props.componentName && !nextName ? max2 : 0;
-      props.debug && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min: min2, max: max2 }));
       for (let i = max2; i >= min2; i--) {
         let prefix = base.slice(0, i).join(import_constants22.THEME_NAME_SEPARATOR);
         props.inverse && (prefix = inverseThemeName(prefix));
@@ -3911,7 +3880,7 @@ var require_ThemeManager_native = __commonJS({
           break;
         }
       }
-      return typeof props.debug == "string" && typeof window < "u" && (console.warn("ThemeManager.getState():", { result }), console.trace(), console.groupEnd()), result;
+      return props.debug === "verbose" && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min: min2, max: max2 }), console.warn("result", { result }), console.trace(), console.groupEnd()), result;
     }
     var inverseThemeName = (themeName) => themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
     function getManagers(themeManager) {
@@ -4214,7 +4183,7 @@ var require_Theme_native = __commonJS({
       let { themeManager, isNewTheme } = themeState;
       if (!themeManager)
         throw new Error(
-          "\u274C"
+          "\u274C 005"
         );
       let { shallow, forceClassName } = props, hasEverThemed = (0, import_react2.useRef)(!1), shouldRenderChildrenWithTheme = isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot;
       if (shouldRenderChildrenWithTheme && (hasEverThemed.current = !0), !shouldRenderChildrenWithTheme)
@@ -4412,7 +4381,7 @@ var require_createComponent_native = __commonJS({
       spacedChildren: () => spacedChildren2
     });
     module2.exports = __toCommonJS2(createComponent_exports);
-    var import_compose_refs = require_index_native10(), import_constants4 = require_index_native(), import_helpers = require_index_native7(), import_use_did_finish_ssr = require_index_native2(), import_react2 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native2(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_proxyThemeVariables = require_proxyThemeVariables_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime6 = require("react/jsx-runtime"), tamaguiConfig, initialTheme, mouseUps = /* @__PURE__ */ new Set();
+    var import_compose_refs = require_index_native10(), import_constants4 = require_index_native(), import_helpers = require_index_native7(), import_use_did_finish_ssr = require_index_native2(), import_react2 = __toESM2(require("react")), import_config = require_config_native(), import_constants22 = require_constants_native2(), import_ComponentContext = require_ComponentContext_native(), import_createVariable = require_createVariable_native(), import_defaultComponentState = require_defaultComponentState_native(), import_createShallowSetState = require_createShallowSetState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_log = require_log_native(), import_mergeProps = require_mergeProps_native(), import_themeable = require_themeable_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native(), import_setupHooks = require_setupHooks_native(), import_Slot = require_Slot_native(), import_Theme = require_Theme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime6 = require("react/jsx-runtime"), mouseUps = /* @__PURE__ */ new Set();
     if (typeof document < "u") {
       let cancelTouches = () => {
         mouseUps.forEach((x) => x()), mouseUps.clear();
@@ -4422,17 +4391,13 @@ var require_createComponent_native = __commonJS({
     var BaseText, BaseView, hasSetupBaseViews = !1;
     function createComponent2(staticConfig) {
       var _a;
-      let config = null, defaultProps = staticConfig.defaultProps;
+      let { componentName } = staticConfig, config = null, defaultProps = staticConfig.defaultProps;
       (0, import_config.onConfiguredOnce)((conf) => {
         var _a2;
-        if (config = conf, staticConfig.componentName) {
-          let defaultForComponent = (_a2 = conf.defaultProps) == null ? void 0 : _a2[staticConfig.componentName];
+        if (config = conf, componentName) {
+          let defaultForComponent = (_a2 = conf.defaultProps) == null ? void 0 : _a2[componentName];
           defaultForComponent && (defaultProps = { ...defaultForComponent, ...defaultProps });
         }
-        if (!tamaguiConfig && (tamaguiConfig = conf, !initialTheme)) {
-          let next = conf.themes[Object.keys(conf.themes)[0]];
-          initialTheme = (0, import_proxyThemeVariables.proxyThemeVariables)(next);
-        }
       });
       let {
         Component,
@@ -4441,8 +4406,8 @@ var require_createComponent_native = __commonJS({
         isHOC,
         validStyles: validStyles2 = {},
         variants = {}
-      } = staticConfig, defaultComponentClassName = `is_${staticConfig.componentName}`, component = (0, import_react2.forwardRef)((propsIn, forwardedRef) => {
-        var _a2, _b, _c, _d, _e, _f, _i, _j, _k, _l, _m, _n;
+      } = staticConfig, component = (0, import_react2.forwardRef)((propsIn, forwardedRef) => {
+        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
         let internalID = "";
         if (!hasSetupBaseViews) {
           hasSetupBaseViews = !0;
@@ -4464,17 +4429,21 @@ var require_createComponent_native = __commonJS({
         }
         let curDefaultProps = styledContextProps ? { ...defaultProps, ...styledContextProps } : defaultProps, props = propsIn;
         curDefaultProps && (props = (0, import_mergeProps.mergeProps)(curDefaultProps, propsIn));
-        let debugProp = props.debug, componentName = props.componentName || staticConfig.componentName, isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)(), stateRef = (0, import_react2.useRef)(
+        let debugProp = props.debug, componentName2 = props.componentName || staticConfig.componentName, stateRef = (0, import_react2.useRef)(
           {}
-        ), hostRef = (0, import_react2.useRef)(null), animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars, willBeAnimated = (() => {
-          if (import_constants4.isServer && !supportsCSSVars)
-            return !1;
-          let curState = stateRef.current;
-          return !!(hasAnimationProp && !isHOC && useAnimations || curState.hasAnimated);
-        })(), usePresence = animationsConfig == null ? void 0 : animationsConfig.usePresence, presence = willBeAnimated && (usePresence == null ? void 0 : usePresence()) || null, hasEnterStyle = !!props.enterStyle, needsMount = !!((!import_constants4.isWeb || import_constants4.isClient) && willBeAnimated), initialState = willBeAnimated ? supportsCSSVars ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, states = (0, import_react2.useState)(initialState), state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: !0 } : states[0], setState = states[1], setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState), groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
-        if (groupName && !stateRef.current.group) {
+        ), hostRef = (0, import_react2.useRef)(null), animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars, curState = stateRef.current, willBeAnimatedClient = !!(hasAnimationProp && !isHOC && useAnimations || curState.hasAnimated), willBeAnimated = !import_constants4.isServer && willBeAnimatedClient;
+        willBeAnimated && !curState.hasAnimated && (curState.hasAnimated = !0);
+        let isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)(), presence = willBeAnimated && ((_c = animationsConfig == null ? void 0 : animationsConfig.usePresence) == null ? void 0 : _c.call(animationsConfig)) || null, presenceState = presence == null ? void 0 : presence[2], enterExitVariant = presenceState == null ? void 0 : presenceState.enterExitVariant, enterVariant = enterExitVariant ?? (presenceState == null ? void 0 : presenceState.enterVariant), hasEnterStyle = !!props.enterStyle, hasRNAnimation = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = staticConfig.isReactNative, isAnimated = willBeAnimated;
+        !isReactNative && hasRNAnimation && !isHOC && !isHydrated && (isAnimated = !1, curState.willHydrate = !0);
+        let initialState = hasEnterStyle || enterVariant ? isHydrated ? import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentStateMounted, states = (0, import_react2.useState)(initialState), state = props.forceStyle ? { ...states[0], [props.forceStyle]: !0 } : states[0], setState = states[1], setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, debugProp);
+        if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated) {
+          let isExiting2 = !presenceState.isPresent, exitVariant = enterExitVariant ?? presenceState.exitVariant;
+          state.unmounted && enterVariant ? props[enterVariant] = !0 : isExiting2 && exitVariant && (props[exitVariant] = !enterExitVariant);
+        }
+        let shouldAvoidClasses = !!(!import_constants4.isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
+        if (groupName && !curState.group) {
           let listeners = /* @__PURE__ */ new Set();
-          stateRef.current.group = {
+          curState.group = {
             listeners,
             emit(name, state2) {
               listeners.forEach((l) => l(name, state2));
@@ -4489,7 +4458,7 @@ var require_createComponent_native = __commonJS({
         if (groupName) {
           let groupContextState = componentContext.groups.state, og = setStateShallow;
           setStateShallow = (state2) => {
-            og(state2), stateRef.current.group.emit(groupName, {
+            og(state2), curState.group.emit(groupName, {
               pseudo: state2
             });
             let next = {
@@ -4499,27 +4468,19 @@ var require_createComponent_native = __commonJS({
             groupContextState[groupName] = next;
           };
         }
-        let isAnimated = willBeAnimated;
-        willBeAnimated && !supportsCSSVars && !presence && isHydrated && (import_constants4.isServer || state.unmounted === !0) && (isAnimated = !1), willBeAnimated && !stateRef.current.hasAnimated && (stateRef.current.hasAnimated = !0);
-        let componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName, hasTextAncestor = !!(import_constants4.isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? ((_c = props.accessibilityState) == null ? void 0 : _c.disabled), element = import_constants4.isWeb && (!Component || typeof Component == "string") && props.tag || Component, elementType = isText ? BaseText || element || "span" : BaseView || element || (hasTextAncestor ? "span" : "div");
-        if (animationsConfig && willBeAnimated && (elementType = animationsConfig[isText ? "Text" : "View"] || elementType), isAnimated && presence) {
-          let presenceState = presence[2];
-          if (presenceState) {
-            let isEntering = state.unmounted, isExiting2 = !presenceState.isPresent, enterExitVariant = presenceState.enterExitVariant, enterVariant = enterExitVariant ?? presenceState.enterVariant, exitVariant = enterExitVariant ?? presenceState.exitVariant;
-            isEntering && enterVariant ? props[enterVariant] = !0 : isExiting2 && exitVariant && (props[exitVariant] = !enterExitVariant);
-          }
-        }
-        let isAnimatedReactNative = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = !!(staticConfig.isReactNative || isAnimatedReactNative), shouldAvoidClasses = !!(!import_constants4.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableTheme = isHOC;
-        props.themeShallow && (stateRef.current.themeShallow = !0);
+        let componentNameFinal = props.componentName || componentName2, componentClassName = props.asChild || !componentNameFinal ? "" : `is_${componentNameFinal}`, hasTextAncestor = !!(import_constants4.isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? ((_d = props.accessibilityState) == null ? void 0 : _d.disabled), element = import_constants4.isWeb && (!Component || typeof Component == "string") && props.tag || Component, elementType = isText ? BaseText || element || "span" : BaseView || element || (hasTextAncestor ? "span" : "div");
+        animationsConfig && isAnimated && (elementType = animationsConfig[isText ? "Text" : "View"] || elementType);
+        let disableTheme = isHOC;
+        props.themeShallow && (curState.themeShallow = !0);
         let themeStateProps = {
           name: props.theme,
-          componentName,
+          componentName: componentName2,
           disable: disableTheme,
-          shallow: stateRef.current.themeShallow,
+          shallow: curState.themeShallow,
           inverse: props.themeInverse,
           debug: debugProp
         };
-        typeof stateRef.current.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), themeStateProps.deopt = willBeAnimated;
+        typeof curState.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), themeStateProps.deopt = willBeAnimated;
         let isExiting = !state.unmounted && (presence == null ? void 0 : presence[0]) === !1, [themeState, theme] = (0, import_useTheme.useThemeWithState)(themeStateProps);
         elementType = Component || elementType;
         let isStringElement = typeof elementType == "string", mediaState3 = (0, import_useMedia.useMedia)(stateRef, componentContext);
@@ -4527,18 +4488,17 @@ var require_createComponent_native = __commonJS({
         let resolveValues = (
           // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
           isAnimated && !supportsCSSVars || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto"
-        ), keepStyleSSR = willBeAnimated && (animationsConfig == null ? void 0 : animationsConfig.keepStyleSSR), styleProps = {
+        ), styleProps = {
           mediaState: mediaState3,
           noClassNames,
           resolveValues,
           isExiting,
-          isAnimated,
-          keepStyleSSR
+          isAnimated
         }, splitStyles = (0, import_getSplitStyles.useSplitStyles)(
           props,
           staticConfig,
           theme,
-          ((_d = themeState == null ? void 0 : themeState.state) == null ? void 0 : _d.name) || "",
+          ((_e = themeState == null ? void 0 : themeState.state) == null ? void 0 : _e.name) || "",
           state,
           styleProps,
           null,
@@ -4546,34 +4506,36 @@ var require_createComponent_native = __commonJS({
           elementType,
           debugProp
         );
-        props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured && (splitStyles.style.opacity = 0), stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
+        props.group && props.untilMeasured === "hide" && !curState.hasMeasured && (splitStyles.style.opacity = 0), curState.isListeningToTheme = splitStyles.dynamicThemeAccess;
         let isMediaArray = splitStyles.hasMedia && Array.isArray(splitStyles.hasMedia), shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || isMediaArray || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = isMediaArray ? splitStyles.hasMedia : null;
         (0, import_useMedia.setMediaShouldUpdate)(stateRef, {
           enabled: shouldListenForMedia,
           keys: mediaListeningKeys
         });
-        let isAnimatedReactNativeWeb = hasAnimationProp && isReactNative, {
+        let {
           viewProps: viewPropsIn,
           pseudos,
           style: splitStylesStyle,
           classNames,
           space
         } = splitStyles, propsWithAnimation = props, animationStyles;
-        if (willBeAnimated && useAnimations && !isHOC) {
+        if (
+          // if it supports css vars we run it on server too to get matching initial style
+          (supportsCSSVars ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
+        ) {
           let animations = useAnimations({
             props: propsWithAnimation,
             // if hydrating, send empty style
             style: splitStylesStyle,
-            // style: splitStylesStyle,
             presence,
             componentState: state,
             styleProps,
-            theme: (_e = themeState.state) == null ? void 0 : _e.theme,
+            theme: (_f = themeState.state) == null ? void 0 : _f.theme,
             pseudos: pseudos || null,
             hostRef,
             staticConfig
           });
-          isAnimated && animations && (animationStyles = animations.style);
+          (isAnimated || supportsCSSVars) && animations && (animationStyles = animations.style);
         }
         let {
           asChild,
@@ -4602,7 +4564,7 @@ var require_createComponent_native = __commonJS({
           // @ts-ignore
           defaultVariants,
           ...nonTamaguiProps
-        } = viewPropsIn, disabled = ((_f = props.accessibilityState) == null ? void 0 : _f.disabled) || // @ts-expect-error (comes from core)
+        } = viewPropsIn, disabled = ((_g = props.accessibilityState) == null ? void 0 : _g.disabled) || // @ts-expect-error (comes from core)
         props.accessibilityDisabled, viewProps = nonTamaguiProps;
         hasAnimationProp && props.tag && !props.role && !props.accessibilityRole && (viewProps.role = props.tag), isHOC && _themeProp && (viewProps.theme = _themeProp), groupName && (nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(
           nonTamaguiProps.onLayout,
@@ -4611,19 +4573,21 @@ var require_createComponent_native = __commonJS({
               layout: e.nativeEvent.layout
             }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState((prev) => ({ ...prev })), stateRef.current.hasMeasured = !0;
           }
-        )), viewProps = nonTamaguiProps;
+        )), viewProps = ((_i = (_h = import_setupHooks.hooks).usePropsTransform) == null ? void 0 : _i.call(
+          _h,
+          elementType,
+          nonTamaguiProps,
+          hostRef,
+          curState.willHydrate
+        )) ?? nonTamaguiProps;
         let composedRef = (0, import_compose_refs.useComposedRefs)(hostRef, forwardedRef);
         viewProps.ref = composedRef;
-        let unPress = () => setStateShallow({
-          press: !1,
-          pressIn: !1
-        }), shouldSetMounted = needsMount && state.unmounted, { pseudoGroups, mediaGroups } = splitStyles;
+        let { pseudoGroups, mediaGroups } = splitStyles;
+        curState.unPress || (curState.unPress = () => setStateShallow({ press: !1, pressIn: !1 }));
+        let unPress = curState.unPress, shouldEnter = state.unmounted;
         (0, import_react2.useEffect)(() => {
-          if (shouldSetMounted) {
-            let unmounted = state.unmounted === !0 && hasEnterStyle ? "should-enter" : !1;
-            setStateShallow({
-              unmounted
-            });
+          if (shouldEnter) {
+            setStateShallow({ unmounted: !1 });
             return;
           }
           let disposeGroupsListener;
@@ -4656,14 +4620,13 @@ var require_createComponent_native = __commonJS({
             disposeGroupsListener == null || disposeGroupsListener(), mouseUps.delete(unPress);
           };
         }, [
-          shouldSetMounted,
-          state.unmounted,
+          shouldEnter,
           pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0,
           mediaGroups ? Object.keys([...mediaGroups]).join("") : 0
         ]);
-        let avoidAnimationStyle = keepStyleSSR && state.unmounted === !0, fontFamily = isText ? splitStyles.fontFamily || ((_i = staticConfig.defaultProps) == null ? void 0 : _i.fontFamily) : null;
+        let fontFamily = isText ? splitStyles.fontFamily || ((_j = staticConfig.defaultProps) == null ? void 0 : _j.fontFamily) : null;
         fontFamily && fontFamily[0] === "$" && (fontFamily = fontFamily.slice(1));
-        let fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", style = avoidAnimationStyle ? splitStyles.style : animationStyles || splitStyles.style, className;
+        let fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", style = animationStyles || splitStyles.style, className;
         asChild === "except-style" || asChild === "except-style-web" || (viewProps.style = style);
         let runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants4.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), events = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle) && !isDisabled && !props.asChild ? {
           onPressOut: attachPress ? (e) => {
@@ -4715,7 +4678,7 @@ var require_createComponent_native = __commonJS({
           delayPressOut: viewProps.delayPressOut,
           focusable: viewProps.focusable ?? !0,
           minPressDuration: 0
-        }), (_k = (_j = import_setupHooks.hooks).useEvents) == null || _k.call(_j, viewProps, events, splitStyles, setStateShallow, staticConfig);
+        }), (_l = (_k = import_setupHooks.hooks).useEvents) == null || _l.call(_k, viewProps, events, splitStyles, setStateShallow, staticConfig);
         let direction = props.spaceDirection || "both", content = !children || asChild ? children : spacedChildren2({
           separator,
           children,
@@ -4733,9 +4696,9 @@ var require_createComponent_native = __commonJS({
           events,
           staticConfig
         )), useChildrenResult ? content = useChildrenResult : content = (0, import_react2.createElement)(elementType, viewProps, content);
-        let ResetPresence = (_l = config == null ? void 0 : config.animations) == null ? void 0 : _l.ResetPresence;
-        willBeAnimated && presence && ResetPresence && typeof content != "string" && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ResetPresence, { children: content }));
-        let groupState = stateRef.current.group, subGroupContext = (0, import_react2.useMemo)(() => {
+        let ResetPresence = (_m = config == null ? void 0 : config.animations) == null ? void 0 : _m.ResetPresence;
+        willBeAnimated && hasEnterStyle && ResetPresence && content && typeof content != "string" && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ResetPresence, { children: content }));
+        let groupState = curState.group, subGroupContext = (0, import_react2.useMemo)(() => {
           if (!(!groupState || !groupName))
             return groupState.listeners.clear(), {
               ...componentContext.groups,
@@ -4743,7 +4706,7 @@ var require_createComponent_native = __commonJS({
               state: {
                 ...componentContext.groups.state,
                 [groupName]: {
-                  pseudo: initialState,
+                  pseudo: import_defaultComponentState.defaultComponentStateMounted,
                   // capture just initial width and height if they exist
                   // will have top, left, width, height (not x, y)
                   layout: {
@@ -5726,6 +5689,37 @@ var require_isTamaguiElement_native = __commonJS({
   }
 });
 
+// ../web/dist/cjs/helpers/proxyThemeVariables.native.js
+var require_proxyThemeVariables_native = __commonJS({
+  "../web/dist/cjs/helpers/proxyThemeVariables.native.js"(exports2, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), proxyThemeVariables_exports = {};
+    __export2(proxyThemeVariables_exports, {
+      proxyThemeVariables: () => proxyThemeVariables
+    });
+    module2.exports = __toCommonJS2(proxyThemeVariables_exports);
+    function proxyThemeVariables(obj) {
+      return new Proxy(obj || {}, {
+        has(target, key) {
+          return Reflect.has(target, removeStarting$(key));
+        },
+        get(target, key) {
+          return Reflect.get(target, removeStarting$(key));
+        }
+      });
+    }
+    var removeStarting$ = (str) => typeof str == "string" && str[0] === "$" ? str.slice(1) : str;
+  }
+});
+
 // ../web/dist/cjs/internalWithTheme.native.js
 var require_internalWithTheme_native = __commonJS({
   "../web/dist/cjs/internalWithTheme.native.js"(exports2, module2) {
@@ -6088,12 +6082,12 @@ var require_TamaguiProvider_native = __commonJS({
       ...themePropsProvider
     }) {
       return (0, import_useMedia.setupMediaListeners)(), import_constants4.isClient && React2.useLayoutEffect(() => {
-        if (document.documentElement.classList.contains("t_unmounted") && document.documentElement.classList.remove("t_unmounted"), disableInjectCSS)
-          return;
-        let style = document.createElement("style");
-        return style.appendChild(document.createTextNode(config.getCSS())), document.head.appendChild(style), () => {
-          document.head.removeChild(style);
-        };
+        if (config.disableSSR || document.documentElement.classList.contains("t_unmounted") && document.documentElement.classList.remove("t_unmounted"), !disableInjectCSS) {
+          let style = document.createElement("style");
+          return style.appendChild(document.createTextNode(config.getCSS())), document.head.appendChild(style), () => {
+            document.head.removeChild(style);
+          };
+        }
       }, [config, disableInjectCSS]), /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ComponentContext.ComponentContext.Provider, { animationDriver: config.animations, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_ThemeProvider.ThemeProvider,
         {
@@ -7397,7 +7391,7 @@ var require_usePlatformMethods_native = __commonJS({
     function usePlatformMethods(hostRef) {
       (0, import_constants4.useIsomorphicLayoutEffect)(() => {
         let node = hostRef.current;
-        node && (node.measure = (callback) => (0, import_useElementLayout.measureLayout)(node, null, callback), node.measureLayout = (relativeToNode, success) => (0, import_useElementLayout.measureLayout)(node, relativeToNode, success), node.measureInWindow = (callback) => {
+        !node || node.measure || (node.measure = (callback) => (0, import_useElementLayout.measureLayout)(node, null, callback), node.measureLayout = (relativeToNode, success) => (0, import_useElementLayout.measureLayout)(node, relativeToNode, success), node.measureInWindow = (callback) => {
           node && setTimeout(() => {
             let { height, left, top, width } = (0, import_getRect.getRect)(node);
             callback(left, top, width, height);
@@ -7519,57 +7513,7 @@ var require_index_native15 = __commonJS({
     var baseViews = (0, import_getBaseViews.getBaseViews)();
     (0, import_web.setupHooks)({
       getBaseViews: import_getBaseViews.getBaseViews,
-      usePropsTransform(elementType, propsIn, hostRef) {
-        let {
-          // event props
-          onMoveShouldSetResponder,
-          onMoveShouldSetResponderCapture,
-          onResponderEnd,
-          onResponderGrant,
-          onResponderMove,
-          onResponderReject,
-          onResponderRelease,
-          onResponderStart,
-          onResponderTerminate,
-          onResponderTerminationRequest,
-          onScrollShouldSetResponder,
-          onScrollShouldSetResponderCapture,
-          onSelectionChangeShouldSetResponder,
-          onSelectionChangeShouldSetResponderCapture,
-          onStartShouldSetResponder,
-          onStartShouldSetResponderCapture,
-          // android
-          collapsable,
-          focusable,
-          // deprecated,
-          accessible,
-          accessibilityDisabled,
-          onLayout,
-          hrefAttrs,
-          ...viewProps
-        } = propsIn;
-        if ((0, import_usePlatformMethods.usePlatformMethods)(hostRef), (0, import_useElementLayout.useElementLayout)(hostRef, onLayout), (0, import_react_native_use_responder_events.useResponderEvents)(hostRef, {
-          onMoveShouldSetResponder,
-          onMoveShouldSetResponderCapture,
-          onResponderEnd,
-          onResponderGrant,
-          onResponderMove,
-          onResponderReject,
-          onResponderRelease,
-          onResponderStart,
-          onResponderTerminate,
-          onResponderTerminationRequest,
-          onScrollShouldSetResponder,
-          onScrollShouldSetResponderCapture,
-          onSelectionChangeShouldSetResponder,
-          onSelectionChangeShouldSetResponderCapture,
-          onStartShouldSetResponder,
-          onStartShouldSetResponderCapture
-        }), viewProps.href && hrefAttrs) {
-          let { download, rel, target } = hrefAttrs;
-          download != null && (viewProps.download = download), rel && (viewProps.rel = rel), typeof target == "string" && (viewProps.target = target.charAt(0) !== "_" ? `_${target}` : target);
-        }
-        return viewProps;
+      usePropsTransform(elementType, propsIn, hostRef, willHydrate) {
       },
       useEvents(viewProps, events, { pseudos }, setStateShallow, staticConfig) {
         if (events && (events.onFocus && (viewProps.onFocus = events.onFocus), events.onBlur && (viewProps.onBlur = events.onBlur)), staticConfig.isInput) {