@tamagui/core 2.3.3 → 2.4.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 $ tamagui-build
-built @tamagui/core in 1195 ms
+built @tamagui/core in 710 ms
 Running afterBuild script...
-afterBuild completed in 402 ms
+afterBuild completed in 212 ms

package/dist/native.cjs

@@ -12144,6 +12144,43 @@ function updateMediaListeners() {
 		return cb(getMedia());
 	});
 }
+function buildTouchTrackerProto() {
+	var proto = {};
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		var _loop = function() {
+			var fullKey = _step.value;
+			var key = fullKey[0] === "$" ? fullKey.slice(1) : fullKey;
+			proto[key] = {
+				enumerable: true,
+				configurable: true,
+				get() {
+					var slot = this[refSlot];
+					if (!disableMediaTouch) slot.keys.add(key);
+					return slot.proxyTarget[key];
+				}
+			};
+		};
+		for (var _iterator = mediaKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _loop();
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+		} finally {
+			if (_didIteratorError) throw _iteratorError;
+		}
+	}
+	return Object.create(null, proto);
+}
+function getTouchTrackerProto() {
+	if (!touchTrackerProto) touchTrackerProto = buildTouchTrackerProto();
+	return touchTrackerProto;
+}
+function resetMediaTouchTracker() {
+	touchTrackerProto = null;
+}
 function setMediaShouldUpdate(ref, enabled, keys) {
 	var cur = States.get(ref);
 	if (!cur || cur.enabled !== enabled || keys) States.set(ref, _objectSpread2(_objectSpread2({}, cur), {}, {
@@ -12159,53 +12196,99 @@ function subscribe(subscriber) {
 }
 function useMedia(componentContext, debug) {
 	"use no memo";
-	var componentState = componentContext ? States.get(componentContext) : null;
 	var internalRef = (0, react.useRef)(null);
-	if (!internalRef.current) internalRef.current = {
-		keys: /* @__PURE__ */ new Set(),
-		lastState: getMedia()
-	};
-	if (internalRef.current.pendingState) {
-		internalRef.current.lastState = internalRef.current.pendingState;
-		internalRef.current.pendingState = void 0;
-	}
-	var { keys } = internalRef.current;
-	if (keys.size) keys.clear();
-	var state = (0, react.useSyncExternalStore)(subscribe, function() {
-		var curKeys = (componentState === null || componentState === void 0 ? void 0 : componentState.keys) || keys;
-		var { lastState, pendingState } = internalRef.current;
-		if (!curKeys.size) return lastState;
-		var ms = getMedia();
-		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
-		try {
-			for (var _iterator = curKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-				var key = _step.value;
-				if (ms[key] !== (pendingState || lastState)[key]) {
-					if (componentContext === null || componentContext === void 0 ? void 0 : componentContext.mediaEmit) {
-						componentContext.mediaEmit(ms);
-						internalRef.current.pendingState = ms;
-						return lastState;
+	if (!internalRef.current) {
+		var initial = getMedia();
+		var r = {
+			keys: /* @__PURE__ */ new Set(),
+			lastState: initial,
+			renderVersion: 0,
+			proxyTarget: initial,
+			proxy: void 0,
+			getSnapshot: void 0,
+			componentContext,
+			debug
+		};
+		var tracker = Object.create(getTouchTrackerProto());
+		tracker[refSlot] = {
+			proxyTarget: initial,
+			keys: r.keys
+		};
+		r.proxy = tracker;
+		r.getSnapshot = function() {
+			var _States_get;
+			var curKeys = r.componentContext ? ((_States_get = States.get(r.componentContext)) === null || _States_get === void 0 ? void 0 : _States_get.keys) || r.keys : r.keys;
+			var { lastState, pendingState } = r;
+			if (!curKeys.size) return lastState;
+			var ms = getMedia();
+			var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+			try {
+				for (var _iterator = curKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+					var key = _step.value;
+					if (ms[key] !== (pendingState || lastState)[key]) {
+						var _r_componentContext;
+						if ((_r_componentContext = r.componentContext) === null || _r_componentContext === void 0 ? void 0 : _r_componentContext.mediaEmit) {
+							r.componentContext.mediaEmit(ms);
+							r.pendingState = ms;
+							return lastState;
+						}
+						r.lastState = ms;
+						return ms;
 					}
-					internalRef.current.lastState = ms;
-					return ms;
 				}
-			}
-		} catch (err) {
-			_didIteratorError = true;
-			_iteratorError = err;
-		} finally {
-			try {
-				if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+			} catch (err) {
+				_didIteratorError = true;
+				_iteratorError = err;
 			} finally {
-				if (_didIteratorError) throw _iteratorError;
+				try {
+					if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+				} finally {
+					if (_didIteratorError) throw _iteratorError;
+				}
 			}
+			return lastState;
+		};
+		internalRef.current = r;
+	} else {
+		internalRef.current.componentContext = componentContext;
+		internalRef.current.debug = debug;
+	}
+	var ref = internalRef.current;
+	ref.renderVersion++;
+	if (ref.pendingState) {
+		ref.lastState = ref.pendingState;
+		ref.pendingState = void 0;
+	}
+	if (ref.keys.size) ref.keys.clear();
+	var [, forceUpdate] = (0, react.useReducer)(incReducer$1, 0);
+	var state = ref.getSnapshot();
+	ref.proxyTarget = state;
+	ref.proxy[refSlot].proxyTarget = state;
+	(0, react.useEffect)(function() {
+		var _States_get;
+		var renderVersion = ref.renderVersion;
+		if (!ref.componentContext || !!((_States_get = States.get(ref.componentContext)) === null || _States_get === void 0 ? void 0 : _States_get.enabled)) {
+			if (!ref.unsubscribe) ref.unsubscribe = subscribe(function() {
+				var next = ref.getSnapshot();
+				if (next !== ref.proxyTarget) {
+					ref.proxyTarget = next;
+					ref.proxy[refSlot].proxyTarget = next;
+					forceUpdate();
+				}
+			});
+		} else if (ref.unsubscribe) {
+			ref.unsubscribe();
+			ref.unsubscribe = void 0;
 		}
-		return lastState;
-	}, getServerSnapshot);
-	return new Proxy(state, { get(_, key) {
-		if (!disableMediaTouch && typeof key === "string") keys.add(key);
-		return Reflect.get(state, key);
-	} });
+		return function() {
+			if (ref.renderVersion === renderVersion) {
+				var _ref_unsubscribe;
+				(_ref_unsubscribe = ref.unsubscribe) === null || _ref_unsubscribe === void 0 || _ref_unsubscribe.call(ref);
+				ref.unsubscribe = void 0;
+			}
+		};
+	});
+	return ref.proxy;
 }
 function _disableMediaTouch(val) {
 	disableMediaTouch = val;
@@ -12231,7 +12314,7 @@ function mediaKeyMatch(key, dimensions) {
 		return isMax ? givenVal < expectedVal : givenVal > expectedVal;
 	});
 }
-var mediaKeyRegex, getMediaKey, initState, mediaKeysOrdered, getMediaKeyImportance, dispose, mediaVersion, configureMedia, setupVersion, listeners, States, getServerSnapshot, disableMediaTouch, getMediaImportanceIfMoreImportant;
+var mediaKeyRegex, getMediaKey, mediaKeysOrdered, getMediaKeyImportance, dispose, mediaVersion, configureMedia, setupVersion, listeners, States, touchTrackerProto, refSlot, incReducer$1, disableMediaTouch, getMediaImportanceIfMoreImportant;
 var init_useMedia_native = __esmMin((() => {
 	init_index_native$7();
 	init_config_native();
@@ -12260,20 +12343,23 @@ var init_useMedia_native = __esmMin((() => {
 		if (!media) return;
 		mediaVersion++;
 		resetMediaStyleCache();
+		resetMediaTouchTracker();
 		for (var key in media) {
 			getMedia()[key] = (mediaQueryDefaultActive === null || mediaQueryDefaultActive === void 0 ? void 0 : mediaQueryDefaultActive[key]) || false;
 			mediaKeys.add(`$${key}`);
 		}
 		Object.assign(mediaQueryConfig, media);
-		initState = _objectSpread2({}, getMedia());
+		_objectSpread2({}, getMedia());
 		mediaKeysOrdered = Object.keys(media);
 		setupMediaListeners();
 	};
 	setupVersion = -1;
 	listeners = /* @__PURE__ */ new Set();
 	States = /* @__PURE__ */ new WeakMap();
-	getServerSnapshot = function() {
-		return initState;
+	touchTrackerProto = null;
+	refSlot = /* @__PURE__ */ Symbol("mediaRefSlot");
+	incReducer$1 = function(c) {
+		return c + 1;
 	};
 	disableMediaTouch = false;
 	getMediaImportanceIfMoreImportant = function(mediaKey, key, styleState, isSizeMedia) {
@@ -12904,6 +12990,18 @@ var init_getDynamicVal_native = __esmMin((() => {
 }));
 //#endregion
 //#region ../web/dist/esm/hooks/useThemeState.native.js
+function cleanupThemeSubscription(r) {
+	var _r_unsubscribe;
+	(_r_unsubscribe = r.unsubscribe) === null || _r_unsubscribe === void 0 || _r_unsubscribe.call(r);
+}
+function cleanupThemeState(r) {
+	if (r.unsubscribe) cleanupThemeSubscription(r);
+	else {
+		localStates.delete(r.id);
+		states.delete(r.id);
+		PendingUpdate.delete(r.id);
+	}
+}
 function scheduleUpdate(id) {
 	var queue = [id];
 	var visited = /* @__PURE__ */ new Set();
@@ -13077,7 +13175,7 @@ function getNewThemeName() {
 	themeNameCache.set(cacheKey, found);
 	return found;
 }
-var ThemeStateContext, allListeners, listenersByParent, HasRenderedOnce, HadTheme, PendingUpdate, states, localStates, shouldForce, forceUpdateThemes, getThemeState, cacheVersion, themeNameCache, themeNameCacheVer, themes, rootThemeState, getRootThemeState, getThemeBaseName, useThemeState, getNextState, validSchemes, getPropsKey, hasThemeUpdatingProps;
+var ThemeStateContext, allListeners, listenersByParent, HasRenderedOnce, HadTheme, PendingUpdate, states, localStates, shouldForce, forceUpdateThemes, getThemeState, cacheVersion, themeNameCache, themeNameCacheVer, themes, rootThemeState, getRootThemeState, getThemeBaseName, incReducer, useThemeState, shouldSubscribeToTheme, getSnapshotImpl, getNextState, validSchemes, getPropsKey, hasThemeUpdatingProps;
 var init_useThemeState_native = __esmMin((() => {
 	init_index_native$7();
 	init_config_native();
@@ -13114,9 +13212,12 @@ var init_useThemeState_native = __esmMin((() => {
 	getThemeBaseName = function(name) {
 		return name.replace(/^(light|dark)_/, "");
 	};
+	incReducer = function(c) {
+		return c + 1;
+	};
 	useThemeState = function(props) {
 		"use no memo";
-		var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, keys = arguments.length > 2 ? arguments[2] : void 0, schemeKeys = arguments.length > 3 ? arguments[3] : void 0;
+		var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, keys = arguments.length > 2 ? arguments[2] : void 0, schemeKeys = arguments.length > 3 ? arguments[3] : void 0, cascadeOnChange = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : false;
 		var { disable } = props;
 		var parentId = (0, react.useContext)(ThemeStateContext);
 		if (!parentId && !isRoot) throw new Error(MISSING_THEME_MESSAGE);
@@ -13126,53 +13227,69 @@ var init_useThemeState_native = __esmMin((() => {
 			theme: getConfig().themes.light
 		};
 		var id = (0, react.useId)();
-		var subscribe = (0, react.useCallback)(function(cb) {
-			listenersByParent[parentId] = listenersByParent[parentId] || /* @__PURE__ */ new Set();
-			listenersByParent[parentId].add(id);
-			allListeners.set(id, function() {
-				PendingUpdate.set(id, shouldForce ? "force" : true);
-				cb();
-			});
-			return function() {
-				allListeners.delete(id);
-				listenersByParent[parentId].delete(id);
-				localStates.delete(id);
-				states.delete(id);
-				PendingUpdate.delete(id);
-			};
-		}, [id, parentId]);
 		var propsKey = getPropsKey(props);
-		var getSnapshot = function() {
-			var _keys_current, _schemeKeys_current, _keys_current1, _props_needsUpdate;
-			var local = localStates.get(id);
-			var parentState = states.get(parentId);
-			if (local && !PendingUpdate.has(id)) {
-				if (parentState && local._parentName === parentState.name && local._propsKey === propsKey) return local;
-			}
-			var isSchemeOnlyChange = supportsDynamicColorIOS && getSetting("fastSchemeChange") && local && parentState && local.scheme !== parentState.scheme && getThemeBaseName(local.name) === getThemeBaseName(parentState.name);
-			var _keys_current_size;
-			var keysSize = (_keys_current_size = keys === null || keys === void 0 ? void 0 : (_keys_current = keys.current) === null || _keys_current === void 0 ? void 0 : _keys_current.size) !== null && _keys_current_size !== void 0 ? _keys_current_size : 0;
-			var _schemeKeys_current_size;
-			var allKeysSchemeOptimized = ((_schemeKeys_current_size = schemeKeys === null || schemeKeys === void 0 ? void 0 : (_schemeKeys_current = schemeKeys.current) === null || _schemeKeys_current === void 0 ? void 0 : _schemeKeys_current.size) !== null && _schemeKeys_current_size !== void 0 ? _schemeKeys_current_size : 0) === keysSize && keysSize > 0;
-			var canSkipForSchemeChange = isSchemeOnlyChange && allKeysSchemeOptimized;
-			var needsUpdate = props.passThrough ? false : isRoot || props.name === "light" || props.name === "dark" || props.name === null ? true : !HasRenderedOnce.get(keys) ? true : canSkipForSchemeChange ? false : (keys === null || keys === void 0 ? void 0 : (_keys_current1 = keys.current) === null || _keys_current1 === void 0 ? void 0 : _keys_current1.size) ? true : (_props_needsUpdate = props.needsUpdate) === null || _props_needsUpdate === void 0 ? void 0 : _props_needsUpdate.call(props);
-			var [rerender, next] = getNextState(local, props, propsKey, isRoot, id, parentId, needsUpdate, PendingUpdate.get(id));
-			PendingUpdate.delete(id);
-			if (!local || rerender) {
-				local = _objectSpread2({}, next);
-				localStates.set(id, local);
-			}
-			if (next !== local) {
-				Object.assign(local, next);
-				local.id = id;
-			}
-			local._parentName = parentState === null || parentState === void 0 ? void 0 : parentState.name;
-			local._propsKey = propsKey;
-			states.set(id, next);
-			return local;
+		var ref = (0, react.useRef)(null);
+		if (!ref.current) ref.current = {
+			id,
+			parentId,
+			props,
+			propsKey,
+			isRoot,
+			keys,
+			schemeKeys,
+			renderVersion: 0
 		};
-		var state = (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-		useIsomorphicLayoutEffect(function() {
+		else {
+			ref.current.props = props;
+			ref.current.propsKey = propsKey;
+			ref.current.isRoot = isRoot;
+			ref.current.keys = keys;
+			ref.current.schemeKeys = schemeKeys;
+			ref.current.parentId = parentId;
+		}
+		ref.current.renderVersion++;
+		var [, forceUpdate] = (0, react.useReducer)(incReducer, 0);
+		var state = getSnapshotImpl(ref.current);
+		ref.current.lastSnap = state;
+		(0, react.useEffect)(function() {
+			var r = ref.current;
+			var renderVersion = r.renderVersion;
+			if (r.unsubscribe && r.subscribedParentId !== r.parentId) cleanupThemeSubscription(r);
+			if (shouldSubscribeToTheme(r, cascadeOnChange)) {
+				if (!r.unsubscribe) {
+					var pid = r.parentId;
+					var sid = r.id;
+					var cb = function() {
+						var next = getSnapshotImpl(r);
+						if (next !== r.lastSnap) {
+							r.lastSnap = next;
+							forceUpdate();
+						}
+					};
+					listenersByParent[pid] = listenersByParent[pid] || /* @__PURE__ */ new Set();
+					listenersByParent[pid].add(sid);
+					allListeners.set(sid, function() {
+						PendingUpdate.set(sid, shouldForce ? "force" : true);
+						cb();
+					});
+					r.subscribedParentId = pid;
+					r.unsubscribe = function() {
+						var _listenersByParent_pid;
+						allListeners.delete(sid);
+						(_listenersByParent_pid = listenersByParent[pid]) === null || _listenersByParent_pid === void 0 || _listenersByParent_pid.delete(sid);
+						localStates.delete(sid);
+						states.delete(sid);
+						PendingUpdate.delete(sid);
+						r.unsubscribe = void 0;
+						r.subscribedParentId = void 0;
+					};
+				}
+			} else if (r.unsubscribe) cleanupThemeSubscription(r);
+			return function() {
+				if (r.renderVersion === renderVersion) cleanupThemeState(r);
+			};
+		});
+		if (cascadeOnChange) useIsomorphicLayoutEffect(function() {
 			if (!HasRenderedOnce.get(keys)) {
 				HasRenderedOnce.set(keys, true);
 				return;
@@ -13187,6 +13304,40 @@ var init_useThemeState_native = __esmMin((() => {
 		}, [keys, propsKey]);
 		return state;
 	};
+	shouldSubscribeToTheme = function(r, cascadeOnChange) {
+		var _r_keys_current, _r_props_needsUpdate, _r_props;
+		return r.isRoot || cascadeOnChange || hasThemeUpdatingProps(r.props) || !!((_r_keys_current = r.keys.current) === null || _r_keys_current === void 0 ? void 0 : _r_keys_current.size) || !!((_r_props_needsUpdate = (_r_props = r.props).needsUpdate) === null || _r_props_needsUpdate === void 0 ? void 0 : _r_props_needsUpdate.call(_r_props));
+	};
+	getSnapshotImpl = function(r) {
+		var _keys_current, _schemeKeys_current, _keys_current1, _props_needsUpdate;
+		var { id, parentId, props, propsKey, isRoot, keys, schemeKeys } = r;
+		var local = localStates.get(id);
+		var parentState = states.get(parentId);
+		if (local && !PendingUpdate.has(id)) {
+			if (parentState && local._parentName === parentState.name && local._propsKey === propsKey) return local;
+		}
+		var isSchemeOnlyChange = supportsDynamicColorIOS && getSetting("fastSchemeChange") && local && parentState && local.scheme !== parentState.scheme && getThemeBaseName(local.name) === getThemeBaseName(parentState.name);
+		var _keys_current_size;
+		var keysSize = (_keys_current_size = keys === null || keys === void 0 ? void 0 : (_keys_current = keys.current) === null || _keys_current === void 0 ? void 0 : _keys_current.size) !== null && _keys_current_size !== void 0 ? _keys_current_size : 0;
+		var _schemeKeys_current_size;
+		var allKeysSchemeOptimized = ((_schemeKeys_current_size = schemeKeys === null || schemeKeys === void 0 ? void 0 : (_schemeKeys_current = schemeKeys.current) === null || _schemeKeys_current === void 0 ? void 0 : _schemeKeys_current.size) !== null && _schemeKeys_current_size !== void 0 ? _schemeKeys_current_size : 0) === keysSize && keysSize > 0;
+		var canSkipForSchemeChange = isSchemeOnlyChange && allKeysSchemeOptimized;
+		var needsUpdate = props.passThrough ? false : isRoot || props.name === "light" || props.name === "dark" || props.name === null ? true : !HasRenderedOnce.get(keys) ? true : canSkipForSchemeChange ? false : (keys === null || keys === void 0 ? void 0 : (_keys_current1 = keys.current) === null || _keys_current1 === void 0 ? void 0 : _keys_current1.size) ? true : (_props_needsUpdate = props.needsUpdate) === null || _props_needsUpdate === void 0 ? void 0 : _props_needsUpdate.call(props);
+		var [rerender, next] = getNextState(local, props, propsKey, isRoot, id, parentId, needsUpdate, PendingUpdate.get(id));
+		PendingUpdate.delete(id);
+		if (!local || rerender) {
+			local = _objectSpread2({}, next);
+			localStates.set(id, local);
+		}
+		if (next !== local) {
+			Object.assign(local, next);
+			local.id = id;
+		}
+		local._parentName = parentState === null || parentState === void 0 ? void 0 : parentState.name;
+		local._propsKey = propsKey;
+		states.set(id, next);
+		return local;
+	};
 	getNextState = function(lastState, props, propsKey) {
 		var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, id = arguments.length > 4 ? arguments[4] : void 0, parentId = arguments.length > 5 ? arguments[5] : void 0, needsUpdate = arguments.length > 6 ? arguments[6] : void 0, pendingUpdate = arguments.length > 7 ? arguments[7] : void 0;
 		var { debug } = props;
@@ -13201,9 +13352,13 @@ var init_useThemeState_native = __esmMin((() => {
 			return [shouldRerender, _objectSpread2(_objectSpread2({}, parentState), {}, { isNew: false })];
 		}
 		if (!name) {
-			var next = lastState !== null && lastState !== void 0 ? lastState : parentState;
-			if (!next) throw new Error(MISSING_THEME_MESSAGE);
-			if (shouldRerender) return [true, _objectSpread2({}, parentState || lastState)];
+			var _ref, _ref1;
+			var next = (_ref1 = (_ref = lastState !== null && lastState !== void 0 ? lastState : parentState) !== null && _ref !== void 0 ? _ref : rootThemeState) !== null && _ref1 !== void 0 ? _ref1 : {
+				id,
+				name: "light",
+				theme: getConfig().themes.light
+			};
+			if (shouldRerender) return [true, _objectSpread2({}, parentState || lastState || next)];
 			return [false, next];
 		}
 		var scheme = getScheme(name);
@@ -13324,10 +13479,14 @@ var init_useTheme_native = __esmMin((() => {
 	};
 	useThemeWithState = function(props) {
 		"use no memo";
-		var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
-		var keys = (0, react.useRef)(null);
-		var schemeKeys = (0, react.useRef)(null);
-		var themeState = useThemeState(props, isRoot, keys, schemeKeys);
+		var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, forThemeView = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
+		var bag = (0, react.useRef)(null);
+		if (!bag.current) bag.current = {
+			keys: { current: null },
+			schemeKeys: { current: null }
+		};
+		var { keys, schemeKeys } = bag.current;
+		var themeState = useThemeState(props, isRoot, keys, schemeKeys, forThemeView);
 		return [props.passThrough ? {} : getThemeProxied(props, themeState, keys, schemeKeys), themeState];
 	};
 }));
@@ -15159,6 +15318,11 @@ function normalizeGroupKey(key, groupContext) {
 function isValidStyleKey(key, validStyles, accept) {
 	return key in validStyles ? true : accept && key in accept;
 }
+function shouldSkipNativeHoverProp(key, isMedia) {
+	if (key === "hoverStyle") return true;
+	if (isMedia === "group") return getGroupPropParts(key.slice(1)).pseudo === "hover";
+	return false;
+}
 function mergeFlatTransforms(target, flatTransforms) {
 	Object.entries(flatTransforms).sort(function(param, param1) {
 		var [a] = param, [b] = param1;
@@ -15269,6 +15433,7 @@ var init_getSplitStyles_native = __esmMin((() => {
 				viewProps[keyInit] = valInit;
 				return "continue";
 			}
+			if (keyInit[0] === "d" && keyInit.startsWith("data-")) return "continue";
 			if (accept) {
 				var accepted = accept[keyInit];
 				if ((accepted === "style" || accepted === "textStyle") && valInit && (typeof valInit === "undefined" ? "undefined" : _type_of$3(valInit)) === "object") {
@@ -15310,6 +15475,7 @@ var init_getSplitStyles_native = __esmMin((() => {
 			var isMediaOrPseudo = Boolean(isMedia || isPseudo);
 			if (isMediaOrPseudo && isMedia === "group") keyInit = normalizeGroupKey(keyInit, groupContext);
 			var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
+			if (shouldSkipNativeHoverProp(keyInit, isMedia)) return "continue";
 			if (isStyleProp && (asChild === "except-style" || asChild === "except-style-web")) return "continue";
 			var shouldPassProp = !isStyleProp && isHOC || isHOC && parentVariants && keyInit in parentVariants || (inlineProps === null || inlineProps === void 0 ? void 0 : inlineProps.has(keyInit));
 			var parentVariant = parentVariants === null || parentVariants === void 0 ? void 0 : parentVariants[keyInit];
@@ -15347,6 +15513,7 @@ var init_getSplitStyles_native = __esmMin((() => {
 				isMediaOrPseudo = Boolean(isMedia || isPseudo);
 				isVariant = variants && key5 in variants;
 				if (isMedia === "group") key5 = normalizeGroupKey(key5, groupContext);
+				if (shouldSkipNativeHoverProp(key5, isMedia)) return;
 				if ((inlineProps === null || inlineProps === void 0 ? void 0 : inlineProps.has(key5)) || process.env.IS_STATIC === "is_static" && (inlineWhenUnflattened === null || inlineWhenUnflattened === void 0 ? void 0 : inlineWhenUnflattened.has(key5))) {
 					var _props_key;
 					viewProps[key5] = (_props_key = props[key5]) !== null && _props_key !== void 0 ? _props_key : val2;
@@ -15511,6 +15678,7 @@ var init_getSplitStyles_native = __esmMin((() => {
 							var groupState = groupContext === null || groupContext === void 0 ? void 0 : (_groupContext_groupName = groupContext[groupName]) === null || _groupContext_groupName === void 0 ? void 0 : _groupContext_groupName.state;
 							var groupPseudoKey = groupInfo.pseudo;
 							var groupMediaKey = groupInfo.media;
+							if (groupPseudoKey === "hover") return;
 							if (!groupState) {
 								pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set());
 								return;
@@ -15864,13 +16032,17 @@ var init_mergeRenderElementProps_native = __esmMin((() => {
 function usePointerEvents(props, viewProps) {
 	var { onPointerDown, onPointerUp, onPointerMove, onPointerCancel, onPointerEnter, onPointerLeave } = props;
 	var hasPointerEvents = onPointerDown || onPointerUp || onPointerMove || onPointerCancel || onPointerEnter || onPointerLeave;
-	var isInsideRef = (0, react.useRef)(false);
-	var layoutRef = (0, react.useRef)({
-		width: 0,
-		height: 0
-	});
-	var isCapturedRef = (0, react.useRef)(false);
+	var ref = (0, react.useRef)(null);
+	if (!ref.current) ref.current = {
+		isInside: false,
+		layout: {
+			width: 0,
+			height: 0
+		},
+		isCaptured: false
+	};
 	if (!hasPointerEvents) return;
+	var bag = ref.current;
 	var createNormalizedEvent = function(e) {
 		var touch = e.nativeEvent;
 		var _touch_identifier;
@@ -15886,10 +16058,10 @@ function usePointerEvents(props, viewProps) {
 			nativeEvent: touch,
 			target: {
 				setPointerCapture: function(_pointerId) {
-					isCapturedRef.current = true;
+					bag.isCaptured = true;
 				},
 				releasePointerCapture: function(_pointerId) {
-					isCapturedRef.current = false;
+					bag.isCaptured = false;
 				}
 			}
 		});
@@ -15898,46 +16070,46 @@ function usePointerEvents(props, viewProps) {
 		onPointerDown(createNormalizedEvent(e));
 	});
 	if (onPointerUp) viewProps.onTouchEnd = composeEventHandlers(viewProps.onTouchEnd, function(e) {
-		isCapturedRef.current = false;
+		bag.isCaptured = false;
 		onPointerUp(createNormalizedEvent(e));
 	});
 	if (onPointerMove) viewProps.onTouchMove = composeEventHandlers(viewProps.onTouchMove, function(e) {
 		var { locationX, locationY } = e.nativeEvent;
-		var { width, height } = layoutRef.current;
+		var { width, height } = bag.layout;
 		var isInBounds = locationX >= 0 && locationX <= width && locationY >= 0 && locationY <= height;
-		if (isCapturedRef.current || isInBounds) onPointerMove(createNormalizedEvent(e));
+		if (bag.isCaptured || isInBounds) onPointerMove(createNormalizedEvent(e));
 	});
 	if (onPointerCancel) viewProps.onTouchCancel = composeEventHandlers(viewProps.onTouchCancel, function(e) {
-		isCapturedRef.current = false;
+		bag.isCaptured = false;
 		onPointerCancel(createNormalizedEvent(e));
 	});
 	if (onPointerEnter || onPointerLeave || onPointerMove) viewProps.onLayout = composeEventHandlers(viewProps.onLayout, function(e) {
-		layoutRef.current = {
+		bag.layout = {
 			width: e.nativeEvent.layout.width,
 			height: e.nativeEvent.layout.height
 		};
 	});
 	if (onPointerEnter) viewProps.onTouchStart = composeEventHandlers(viewProps.onTouchStart, function(e) {
 		var { locationX, locationY } = e.nativeEvent;
-		var { width, height } = layoutRef.current;
+		var { width, height } = bag.layout;
 		if (locationX >= 0 && locationX <= width && locationY >= 0 && locationY <= height) {
-			isInsideRef.current = true;
+			bag.isInside = true;
 			onPointerEnter(createNormalizedEvent(e));
 		}
 	});
 	if (onPointerLeave) {
 		viewProps.onTouchMove = composeEventHandlers(viewProps.onTouchMove, function(e) {
 			var { locationX, locationY } = e.nativeEvent;
-			var { width, height } = layoutRef.current;
+			var { width, height } = bag.layout;
 			var isInside = locationX >= 0 && locationX <= width && locationY >= 0 && locationY <= height;
-			if (isInsideRef.current && !isInside) {
-				isInsideRef.current = false;
+			if (bag.isInside && !isInside) {
+				bag.isInside = false;
 				onPointerLeave(createNormalizedEvent(e));
 			}
 		});
 		viewProps.onTouchEnd = composeEventHandlers(viewProps.onTouchEnd, function(e) {
-			if (isInsideRef.current) {
-				isInsideRef.current = false;
+			if (bag.isInside) {
+				bag.isInside = false;
 				onPointerLeave(createNormalizedEvent(e));
 			}
 		});
@@ -16133,7 +16305,7 @@ var init_Theme_native = __esmMin((() => {
 		if (props.disable) return props.children;
 		var { passThrough } = props;
 		var isRoot = !!props["_isRoot"];
-		var [_, themeState] = useThemeWithState(props, isRoot);
+		var [_, themeState] = useThemeWithState(props, isRoot, true);
 		var finalChildren = props["disable-child-theme"] ? react.Children.map(props.children, function(child) {
 			return passThrough || !/* @__PURE__ */ (0, react.isValidElement)(child) ? child : /* @__PURE__ */ (0, react.cloneElement)(child, { ["data-disable-theme"]: true });
 		}) : props.children;
@@ -16302,7 +16474,15 @@ var init_useComponentState_native = __esmMin((() => {
 			});
 		}
 		var groupName = props.group;
-		var setStateShallow = useCreateShallowSetState(setState, props.debug);
+		if (!stateRef.current.baseSetStateShallow) {
+			var r = stateRef.current;
+			r.baseSetStateShallow = function(stateOrGetState) {
+				setState(function(prev) {
+					return mergeIfNotShallowEqual(prev, typeof stateOrGetState === "function" ? stateOrGetState(prev) : stateOrGetState);
+				});
+			};
+		}
+		var setStateShallow = stateRef.current.baseSetStateShallow;
 		if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
 			var { enterVariant, exitVariant, enterExitVariant, custom } = presenceState;
 			if (isObj(custom)) Object.assign(props, custom);
@@ -16422,7 +16602,7 @@ function createComponent(staticConfig) {
 		var overriddenContextProps = null;
 		var componentContext = react.default.useContext(ComponentContext);
 		var hasTextAncestor = false;
-		var isInsideNativeMenu = react.default.useContext(NativeMenuContext);
+		var isInsideNativeMenu = isAndroid ? react.default.useContext(NativeMenuContext) : false;
 		var props = propsIn;
 		var componentName = props.componentName || staticConfig.componentName;
 		var [nextProps, overrides] = mergeComponentProps(getDefaultProps(staticConfig, props.componentName), styledContextValue, propsIn);
@@ -19005,6 +19185,7 @@ exports.rgba = rgba;
 exports.setConfig = setConfig;
 exports.setDidGetVariableValue = setDidGetVariableValue;
 exports.setIdentifierValue = setIdentifierValue;
+exports.setMediaState = setMediaState;
 exports.setNonce = setNonce;
 exports.setOnLayoutStrategy = setOnLayoutStrategy;
 exports.setRef = setRef;
@@ -19030,6 +19211,7 @@ exports.tokenCategories = tokenCategories;
 exports.transformsToString = transformsToString;
 exports.updateConfig = updateConfig;
 exports.updateFont = updateFont;
+exports.updateMediaListeners = updateMediaListeners;
 exports.useClientValue = useClientValue;
 exports.useComposedRefs = useComposedRefs;
 exports.useConfiguration = useConfiguration;

package/dist/test.native.cjs

@@ -634,7 +634,6 @@ var getMediaKey = function(key) {
 	if (match) return match[1];
 	return false;
 };
-var initState;
 var mediaKeysOrdered;
 var getMediaKeyImportance = function(key) {
 	return mediaKeysOrdered.indexOf(key) + 100;
@@ -647,12 +646,13 @@ var configureMedia = function(config) {
 	if (!media) return;
 	mediaVersion++;
 	resetMediaStyleCache();
+	resetMediaTouchTracker();
 	for (var key in media) {
 		getMedia()[key] = (mediaQueryDefaultActive === null || mediaQueryDefaultActive === void 0 ? void 0 : mediaQueryDefaultActive[key]) || false;
 		mediaKeys.add(`$${key}`);
 	}
 	Object.assign(mediaQueryConfig, media);
-	initState = _objectSpread2({}, getMedia());
+	_objectSpread2({}, getMedia());
 	mediaKeysOrdered = Object.keys(media);
 	setupMediaListeners();
 };
@@ -696,6 +696,45 @@ function updateMediaListeners() {
 	});
 }
 var States = /* @__PURE__ */ new WeakMap();
+var touchTrackerProto = null;
+var refSlot = /* @__PURE__ */ Symbol("mediaRefSlot");
+function buildTouchTrackerProto() {
+	var proto = {};
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		var _loop = function() {
+			var fullKey = _step.value;
+			var key = fullKey[0] === "$" ? fullKey.slice(1) : fullKey;
+			proto[key] = {
+				enumerable: true,
+				configurable: true,
+				get() {
+					var slot = this[refSlot];
+					if (!disableMediaTouch) slot.keys.add(key);
+					return slot.proxyTarget[key];
+				}
+			};
+		};
+		for (var _iterator = mediaKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _loop();
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+		} finally {
+			if (_didIteratorError) throw _iteratorError;
+		}
+	}
+	return Object.create(null, proto);
+}
+function getTouchTrackerProto() {
+	if (!touchTrackerProto) touchTrackerProto = buildTouchTrackerProto();
+	return touchTrackerProto;
+}
+function resetMediaTouchTracker() {
+	touchTrackerProto = null;
+}
 function setMediaShouldUpdate(ref, enabled, keys) {
 	var cur = States.get(ref);
 	if (!cur || cur.enabled !== enabled || keys) States.set(ref, _objectSpread2(_objectSpread2({}, cur), {}, {
@@ -711,56 +750,102 @@ function subscribe(subscriber) {
 }
 function useMedia(componentContext, debug) {
 	"use no memo";
-	var componentState = componentContext ? States.get(componentContext) : null;
 	var internalRef = (0, react.useRef)(null);
-	if (!internalRef.current) internalRef.current = {
-		keys: /* @__PURE__ */ new Set(),
-		lastState: getMedia()
-	};
-	if (internalRef.current.pendingState) {
-		internalRef.current.lastState = internalRef.current.pendingState;
-		internalRef.current.pendingState = void 0;
-	}
-	var { keys } = internalRef.current;
-	if (keys.size) keys.clear();
-	var state = (0, react.useSyncExternalStore)(subscribe, function() {
-		var curKeys = (componentState === null || componentState === void 0 ? void 0 : componentState.keys) || keys;
-		var { lastState, pendingState } = internalRef.current;
-		if (!curKeys.size) return lastState;
-		var ms = getMedia();
-		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
-		try {
-			for (var _iterator = curKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-				var key = _step.value;
-				if (ms[key] !== (pendingState || lastState)[key]) {
-					if (componentContext === null || componentContext === void 0 ? void 0 : componentContext.mediaEmit) {
-						componentContext.mediaEmit(ms);
-						internalRef.current.pendingState = ms;
-						return lastState;
+	if (!internalRef.current) {
+		var initial = getMedia();
+		var r = {
+			keys: /* @__PURE__ */ new Set(),
+			lastState: initial,
+			renderVersion: 0,
+			proxyTarget: initial,
+			proxy: void 0,
+			getSnapshot: void 0,
+			componentContext,
+			debug
+		};
+		var tracker = Object.create(getTouchTrackerProto());
+		tracker[refSlot] = {
+			proxyTarget: initial,
+			keys: r.keys
+		};
+		r.proxy = tracker;
+		r.getSnapshot = function() {
+			var _States_get;
+			var curKeys = r.componentContext ? ((_States_get = States.get(r.componentContext)) === null || _States_get === void 0 ? void 0 : _States_get.keys) || r.keys : r.keys;
+			var { lastState, pendingState } = r;
+			if (!curKeys.size) return lastState;
+			var ms = getMedia();
+			var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+			try {
+				for (var _iterator = curKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+					var key = _step.value;
+					if (ms[key] !== (pendingState || lastState)[key]) {
+						var _r_componentContext;
+						if ((_r_componentContext = r.componentContext) === null || _r_componentContext === void 0 ? void 0 : _r_componentContext.mediaEmit) {
+							r.componentContext.mediaEmit(ms);
+							r.pendingState = ms;
+							return lastState;
+						}
+						r.lastState = ms;
+						return ms;
 					}
-					internalRef.current.lastState = ms;
-					return ms;
 				}
-			}
-		} catch (err) {
-			_didIteratorError = true;
-			_iteratorError = err;
-		} finally {
-			try {
-				if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+			} catch (err) {
+				_didIteratorError = true;
+				_iteratorError = err;
 			} finally {
-				if (_didIteratorError) throw _iteratorError;
+				try {
+					if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+				} finally {
+					if (_didIteratorError) throw _iteratorError;
+				}
 			}
+			return lastState;
+		};
+		internalRef.current = r;
+	} else {
+		internalRef.current.componentContext = componentContext;
+		internalRef.current.debug = debug;
+	}
+	var ref = internalRef.current;
+	ref.renderVersion++;
+	if (ref.pendingState) {
+		ref.lastState = ref.pendingState;
+		ref.pendingState = void 0;
+	}
+	if (ref.keys.size) ref.keys.clear();
+	var [, forceUpdate] = (0, react.useReducer)(incReducer$1, 0);
+	var state = ref.getSnapshot();
+	ref.proxyTarget = state;
+	ref.proxy[refSlot].proxyTarget = state;
+	(0, react.useEffect)(function() {
+		var _States_get;
+		var renderVersion = ref.renderVersion;
+		if (!ref.componentContext || !!((_States_get = States.get(ref.componentContext)) === null || _States_get === void 0 ? void 0 : _States_get.enabled)) {
+			if (!ref.unsubscribe) ref.unsubscribe = subscribe(function() {
+				var next = ref.getSnapshot();
+				if (next !== ref.proxyTarget) {
+					ref.proxyTarget = next;
+					ref.proxy[refSlot].proxyTarget = next;
+					forceUpdate();
+				}
+			});
+		} else if (ref.unsubscribe) {
+			ref.unsubscribe();
+			ref.unsubscribe = void 0;
 		}
-		return lastState;
-	}, getServerSnapshot);
-	return new Proxy(state, { get(_, key) {
-		if (!disableMediaTouch && typeof key === "string") keys.add(key);
-		return Reflect.get(state, key);
-	} });
+		return function() {
+			if (ref.renderVersion === renderVersion) {
+				var _ref_unsubscribe;
+				(_ref_unsubscribe = ref.unsubscribe) === null || _ref_unsubscribe === void 0 || _ref_unsubscribe.call(ref);
+				ref.unsubscribe = void 0;
+			}
+		};
+	});
+	return ref.proxy;
 }
-var getServerSnapshot = function() {
-	return initState;
+var incReducer$1 = function(c) {
+	return c + 1;
 };
 var disableMediaTouch = false;
 function _disableMediaTouch(val) {
@@ -1400,9 +1485,12 @@ var getRootThemeState = function() {
 var getThemeBaseName = function(name) {
 	return name.replace(/^(light|dark)_/, "");
 };
+var incReducer = function(c) {
+	return c + 1;
+};
 var useThemeState = function(props) {
 	"use no memo";
-	var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, keys = arguments.length > 2 ? arguments[2] : void 0, schemeKeys = arguments.length > 3 ? arguments[3] : void 0;
+	var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, keys = arguments.length > 2 ? arguments[2] : void 0, schemeKeys = arguments.length > 3 ? arguments[3] : void 0, cascadeOnChange = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : false;
 	var { disable } = props;
 	var parentId = (0, react.useContext)(ThemeStateContext);
 	if (!parentId && !isRoot) throw new Error(MISSING_THEME_MESSAGE);
@@ -1412,53 +1500,69 @@ var useThemeState = function(props) {
 		theme: getConfig().themes.light
 	};
 	var id = (0, react.useId)();
-	var subscribe = (0, react.useCallback)(function(cb) {
-		listenersByParent[parentId] = listenersByParent[parentId] || /* @__PURE__ */ new Set();
-		listenersByParent[parentId].add(id);
-		allListeners.set(id, function() {
-			PendingUpdate.set(id, shouldForce ? "force" : true);
-			cb();
-		});
-		return function() {
-			allListeners.delete(id);
-			listenersByParent[parentId].delete(id);
-			localStates.delete(id);
-			states.delete(id);
-			PendingUpdate.delete(id);
-		};
-	}, [id, parentId]);
 	var propsKey = getPropsKey(props);
-	var getSnapshot = function() {
-		var _keys_current, _schemeKeys_current, _keys_current1, _props_needsUpdate;
-		var local = localStates.get(id);
-		var parentState = states.get(parentId);
-		if (local && !PendingUpdate.has(id)) {
-			if (parentState && local._parentName === parentState.name && local._propsKey === propsKey) return local;
-		}
-		var isSchemeOnlyChange = supportsDynamicColorIOS && getSetting("fastSchemeChange") && local && parentState && local.scheme !== parentState.scheme && getThemeBaseName(local.name) === getThemeBaseName(parentState.name);
-		var _keys_current_size;
-		var keysSize = (_keys_current_size = keys === null || keys === void 0 ? void 0 : (_keys_current = keys.current) === null || _keys_current === void 0 ? void 0 : _keys_current.size) !== null && _keys_current_size !== void 0 ? _keys_current_size : 0;
-		var _schemeKeys_current_size;
-		var allKeysSchemeOptimized = ((_schemeKeys_current_size = schemeKeys === null || schemeKeys === void 0 ? void 0 : (_schemeKeys_current = schemeKeys.current) === null || _schemeKeys_current === void 0 ? void 0 : _schemeKeys_current.size) !== null && _schemeKeys_current_size !== void 0 ? _schemeKeys_current_size : 0) === keysSize && keysSize > 0;
-		var canSkipForSchemeChange = isSchemeOnlyChange && allKeysSchemeOptimized;
-		var needsUpdate = props.passThrough ? false : isRoot || props.name === "light" || props.name === "dark" || props.name === null ? true : !HasRenderedOnce.get(keys) ? true : canSkipForSchemeChange ? false : (keys === null || keys === void 0 ? void 0 : (_keys_current1 = keys.current) === null || _keys_current1 === void 0 ? void 0 : _keys_current1.size) ? true : (_props_needsUpdate = props.needsUpdate) === null || _props_needsUpdate === void 0 ? void 0 : _props_needsUpdate.call(props);
-		var [rerender, next] = getNextState(local, props, propsKey, isRoot, id, parentId, needsUpdate, PendingUpdate.get(id));
-		PendingUpdate.delete(id);
-		if (!local || rerender) {
-			local = _objectSpread2({}, next);
-			localStates.set(id, local);
-		}
-		if (next !== local) {
-			Object.assign(local, next);
-			local.id = id;
-		}
-		local._parentName = parentState === null || parentState === void 0 ? void 0 : parentState.name;
-		local._propsKey = propsKey;
-		states.set(id, next);
-		return local;
+	var ref = (0, react.useRef)(null);
+	if (!ref.current) ref.current = {
+		id,
+		parentId,
+		props,
+		propsKey,
+		isRoot,
+		keys,
+		schemeKeys,
+		renderVersion: 0
 	};
-	var state = (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-	useIsomorphicLayoutEffect(function() {
+	else {
+		ref.current.props = props;
+		ref.current.propsKey = propsKey;
+		ref.current.isRoot = isRoot;
+		ref.current.keys = keys;
+		ref.current.schemeKeys = schemeKeys;
+		ref.current.parentId = parentId;
+	}
+	ref.current.renderVersion++;
+	var [, forceUpdate] = (0, react.useReducer)(incReducer, 0);
+	var state = getSnapshotImpl(ref.current);
+	ref.current.lastSnap = state;
+	(0, react.useEffect)(function() {
+		var r = ref.current;
+		var renderVersion = r.renderVersion;
+		if (r.unsubscribe && r.subscribedParentId !== r.parentId) cleanupThemeSubscription(r);
+		if (shouldSubscribeToTheme(r, cascadeOnChange)) {
+			if (!r.unsubscribe) {
+				var pid = r.parentId;
+				var sid = r.id;
+				var cb = function() {
+					var next = getSnapshotImpl(r);
+					if (next !== r.lastSnap) {
+						r.lastSnap = next;
+						forceUpdate();
+					}
+				};
+				listenersByParent[pid] = listenersByParent[pid] || /* @__PURE__ */ new Set();
+				listenersByParent[pid].add(sid);
+				allListeners.set(sid, function() {
+					PendingUpdate.set(sid, shouldForce ? "force" : true);
+					cb();
+				});
+				r.subscribedParentId = pid;
+				r.unsubscribe = function() {
+					var _listenersByParent_pid;
+					allListeners.delete(sid);
+					(_listenersByParent_pid = listenersByParent[pid]) === null || _listenersByParent_pid === void 0 || _listenersByParent_pid.delete(sid);
+					localStates.delete(sid);
+					states.delete(sid);
+					PendingUpdate.delete(sid);
+					r.unsubscribe = void 0;
+					r.subscribedParentId = void 0;
+				};
+			}
+		} else if (r.unsubscribe) cleanupThemeSubscription(r);
+		return function() {
+			if (r.renderVersion === renderVersion) cleanupThemeState(r);
+		};
+	});
+	if (cascadeOnChange) useIsomorphicLayoutEffect(function() {
 		if (!HasRenderedOnce.get(keys)) {
 			HasRenderedOnce.set(keys, true);
 			return;
@@ -1473,6 +1577,52 @@ var useThemeState = function(props) {
 	}, [keys, propsKey]);
 	return state;
 };
+var shouldSubscribeToTheme = function(r, cascadeOnChange) {
+	var _r_keys_current, _r_props_needsUpdate, _r_props;
+	return r.isRoot || cascadeOnChange || hasThemeUpdatingProps(r.props) || !!((_r_keys_current = r.keys.current) === null || _r_keys_current === void 0 ? void 0 : _r_keys_current.size) || !!((_r_props_needsUpdate = (_r_props = r.props).needsUpdate) === null || _r_props_needsUpdate === void 0 ? void 0 : _r_props_needsUpdate.call(_r_props));
+};
+function cleanupThemeSubscription(r) {
+	var _r_unsubscribe;
+	(_r_unsubscribe = r.unsubscribe) === null || _r_unsubscribe === void 0 || _r_unsubscribe.call(r);
+}
+function cleanupThemeState(r) {
+	if (r.unsubscribe) cleanupThemeSubscription(r);
+	else {
+		localStates.delete(r.id);
+		states.delete(r.id);
+		PendingUpdate.delete(r.id);
+	}
+}
+var getSnapshotImpl = function(r) {
+	var _keys_current, _schemeKeys_current, _keys_current1, _props_needsUpdate;
+	var { id, parentId, props, propsKey, isRoot, keys, schemeKeys } = r;
+	var local = localStates.get(id);
+	var parentState = states.get(parentId);
+	if (local && !PendingUpdate.has(id)) {
+		if (parentState && local._parentName === parentState.name && local._propsKey === propsKey) return local;
+	}
+	var isSchemeOnlyChange = supportsDynamicColorIOS && getSetting("fastSchemeChange") && local && parentState && local.scheme !== parentState.scheme && getThemeBaseName(local.name) === getThemeBaseName(parentState.name);
+	var _keys_current_size;
+	var keysSize = (_keys_current_size = keys === null || keys === void 0 ? void 0 : (_keys_current = keys.current) === null || _keys_current === void 0 ? void 0 : _keys_current.size) !== null && _keys_current_size !== void 0 ? _keys_current_size : 0;
+	var _schemeKeys_current_size;
+	var allKeysSchemeOptimized = ((_schemeKeys_current_size = schemeKeys === null || schemeKeys === void 0 ? void 0 : (_schemeKeys_current = schemeKeys.current) === null || _schemeKeys_current === void 0 ? void 0 : _schemeKeys_current.size) !== null && _schemeKeys_current_size !== void 0 ? _schemeKeys_current_size : 0) === keysSize && keysSize > 0;
+	var canSkipForSchemeChange = isSchemeOnlyChange && allKeysSchemeOptimized;
+	var needsUpdate = props.passThrough ? false : isRoot || props.name === "light" || props.name === "dark" || props.name === null ? true : !HasRenderedOnce.get(keys) ? true : canSkipForSchemeChange ? false : (keys === null || keys === void 0 ? void 0 : (_keys_current1 = keys.current) === null || _keys_current1 === void 0 ? void 0 : _keys_current1.size) ? true : (_props_needsUpdate = props.needsUpdate) === null || _props_needsUpdate === void 0 ? void 0 : _props_needsUpdate.call(props);
+	var [rerender, next] = getNextState(local, props, propsKey, isRoot, id, parentId, needsUpdate, PendingUpdate.get(id));
+	PendingUpdate.delete(id);
+	if (!local || rerender) {
+		local = _objectSpread2({}, next);
+		localStates.set(id, local);
+	}
+	if (next !== local) {
+		Object.assign(local, next);
+		local.id = id;
+	}
+	local._parentName = parentState === null || parentState === void 0 ? void 0 : parentState.name;
+	local._propsKey = propsKey;
+	states.set(id, next);
+	return local;
+};
 var getNextState = function(lastState, props, propsKey) {
 	var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, id = arguments.length > 4 ? arguments[4] : void 0, parentId = arguments.length > 5 ? arguments[5] : void 0, needsUpdate = arguments.length > 6 ? arguments[6] : void 0, pendingUpdate = arguments.length > 7 ? arguments[7] : void 0;
 	var { debug } = props;
@@ -1487,9 +1637,13 @@ var getNextState = function(lastState, props, propsKey) {
 		return [shouldRerender, _objectSpread2(_objectSpread2({}, parentState), {}, { isNew: false })];
 	}
 	if (!name) {
-		var next = lastState !== null && lastState !== void 0 ? lastState : parentState;
-		if (!next) throw new Error(MISSING_THEME_MESSAGE);
-		if (shouldRerender) return [true, _objectSpread2({}, parentState || lastState)];
+		var _ref, _ref1;
+		var next = (_ref1 = (_ref = lastState !== null && lastState !== void 0 ? lastState : parentState) !== null && _ref !== void 0 ? _ref : rootThemeState) !== null && _ref1 !== void 0 ? _ref1 : {
+			id,
+			name: "light",
+			theme: getConfig().themes.light
+		};
+		if (shouldRerender) return [true, _objectSpread2({}, parentState || lastState || next)];
 		return [false, next];
 	}
 	var scheme = getScheme(name);
@@ -1769,10 +1923,14 @@ var useTheme = function() {
 };
 var useThemeWithState = function(props) {
 	"use no memo";
-	var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
-	var keys = (0, react.useRef)(null);
-	var schemeKeys = (0, react.useRef)(null);
-	var themeState = useThemeState(props, isRoot, keys, schemeKeys);
+	var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, forThemeView = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
+	var bag = (0, react.useRef)(null);
+	if (!bag.current) bag.current = {
+		keys: { current: null },
+		schemeKeys: { current: null }
+	};
+	var { keys, schemeKeys } = bag.current;
+	var themeState = useThemeState(props, isRoot, keys, schemeKeys, forThemeView);
 	return [props.passThrough ? {} : getThemeProxied(props, themeState, keys, schemeKeys), themeState];
 };
 //#endregion
@@ -3709,6 +3867,11 @@ function normalizeGroupKey(key, groupContext) {
 function isValidStyleKey(key, validStyles, accept) {
 	return key in validStyles ? true : accept && key in accept;
 }
+function shouldSkipNativeHoverProp(key, isMedia) {
+	if (key === "hoverStyle") return true;
+	if (isMedia === "group") return getGroupPropParts(key.slice(1)).pseudo === "hover";
+	return false;
+}
 var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug, animationDriver) {
 	var _loop = function(keyOg2) {
 		var keyInit = keyOg2;
@@ -3717,6 +3880,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 			viewProps[keyInit] = valInit;
 			return "continue";
 		}
+		if (keyInit[0] === "d" && keyInit.startsWith("data-")) return "continue";
 		if (keyInit === "jestAnimatedStyle") return "continue";
 		if (accept) {
 			var accepted = accept[keyInit];
@@ -3759,6 +3923,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 		var isMediaOrPseudo = Boolean(isMedia || isPseudo);
 		if (isMediaOrPseudo && isMedia === "group") keyInit = normalizeGroupKey(keyInit, groupContext);
 		var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
+		if (shouldSkipNativeHoverProp(keyInit, isMedia)) return "continue";
 		if (isStyleProp && (asChild === "except-style" || asChild === "except-style-web")) return "continue";
 		var shouldPassProp = !isStyleProp && isHOC || isHOC && parentVariants && keyInit in parentVariants || (inlineProps === null || inlineProps === void 0 ? void 0 : inlineProps.has(keyInit));
 		var parentVariant = parentVariants === null || parentVariants === void 0 ? void 0 : parentVariants[keyInit];
@@ -3796,6 +3961,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 			isMediaOrPseudo = Boolean(isMedia || isPseudo);
 			isVariant = variants && key5 in variants;
 			if (isMedia === "group") key5 = normalizeGroupKey(key5, groupContext);
+			if (shouldSkipNativeHoverProp(key5, isMedia)) return;
 			if ((inlineProps === null || inlineProps === void 0 ? void 0 : inlineProps.has(key5)) || process.env.IS_STATIC === "is_static" && (inlineWhenUnflattened === null || inlineWhenUnflattened === void 0 ? void 0 : inlineWhenUnflattened.has(key5))) {
 				var _props_key;
 				viewProps[key5] = (_props_key = props[key5]) !== null && _props_key !== void 0 ? _props_key : val2;
@@ -3960,6 +4126,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 						var groupState = groupContext === null || groupContext === void 0 ? void 0 : (_groupContext_groupName = groupContext[groupName]) === null || _groupContext_groupName === void 0 ? void 0 : _groupContext_groupName.state;
 						var groupPseudoKey = groupInfo.pseudo;
 						var groupMediaKey = groupInfo.media;
+						if (groupPseudoKey === "hover") return;
 						if (!groupState) {
 							pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set());
 							return;
@@ -4380,13 +4547,17 @@ function mergeRenderElementProps(elementProps, viewProps, children) {
 function usePointerEvents(props, viewProps) {
 	var { onPointerDown, onPointerUp, onPointerMove, onPointerCancel, onPointerEnter, onPointerLeave } = props;
 	var hasPointerEvents = onPointerDown || onPointerUp || onPointerMove || onPointerCancel || onPointerEnter || onPointerLeave;
-	var isInsideRef = (0, react.useRef)(false);
-	var layoutRef = (0, react.useRef)({
-		width: 0,
-		height: 0
-	});
-	var isCapturedRef = (0, react.useRef)(false);
+	var ref = (0, react.useRef)(null);
+	if (!ref.current) ref.current = {
+		isInside: false,
+		layout: {
+			width: 0,
+			height: 0
+		},
+		isCaptured: false
+	};
 	if (!hasPointerEvents) return;
+	var bag = ref.current;
 	var createNormalizedEvent = function(e) {
 		var touch = e.nativeEvent;
 		var _touch_identifier;
@@ -4402,10 +4573,10 @@ function usePointerEvents(props, viewProps) {
 			nativeEvent: touch,
 			target: {
 				setPointerCapture: function(_pointerId) {
-					isCapturedRef.current = true;
+					bag.isCaptured = true;
 				},
 				releasePointerCapture: function(_pointerId) {
-					isCapturedRef.current = false;
+					bag.isCaptured = false;
 				}
 			}
 		});
@@ -4414,46 +4585,46 @@ function usePointerEvents(props, viewProps) {
 		onPointerDown(createNormalizedEvent(e));
 	});
 	if (onPointerUp) viewProps.onTouchEnd = composeEventHandlers(viewProps.onTouchEnd, function(e) {
-		isCapturedRef.current = false;
+		bag.isCaptured = false;
 		onPointerUp(createNormalizedEvent(e));
 	});
 	if (onPointerMove) viewProps.onTouchMove = composeEventHandlers(viewProps.onTouchMove, function(e) {
 		var { locationX, locationY } = e.nativeEvent;
-		var { width, height } = layoutRef.current;
+		var { width, height } = bag.layout;
 		var isInBounds = locationX >= 0 && locationX <= width && locationY >= 0 && locationY <= height;
-		if (isCapturedRef.current || isInBounds) onPointerMove(createNormalizedEvent(e));
+		if (bag.isCaptured || isInBounds) onPointerMove(createNormalizedEvent(e));
 	});
 	if (onPointerCancel) viewProps.onTouchCancel = composeEventHandlers(viewProps.onTouchCancel, function(e) {
-		isCapturedRef.current = false;
+		bag.isCaptured = false;
 		onPointerCancel(createNormalizedEvent(e));
 	});
 	if (onPointerEnter || onPointerLeave || onPointerMove) viewProps.onLayout = composeEventHandlers(viewProps.onLayout, function(e) {
-		layoutRef.current = {
+		bag.layout = {
 			width: e.nativeEvent.layout.width,
 			height: e.nativeEvent.layout.height
 		};
 	});
 	if (onPointerEnter) viewProps.onTouchStart = composeEventHandlers(viewProps.onTouchStart, function(e) {
 		var { locationX, locationY } = e.nativeEvent;
-		var { width, height } = layoutRef.current;
+		var { width, height } = bag.layout;
 		if (locationX >= 0 && locationX <= width && locationY >= 0 && locationY <= height) {
-			isInsideRef.current = true;
+			bag.isInside = true;
 			onPointerEnter(createNormalizedEvent(e));
 		}
 	});
 	if (onPointerLeave) {
 		viewProps.onTouchMove = composeEventHandlers(viewProps.onTouchMove, function(e) {
 			var { locationX, locationY } = e.nativeEvent;
-			var { width, height } = layoutRef.current;
+			var { width, height } = bag.layout;
 			var isInside = locationX >= 0 && locationX <= width && locationY >= 0 && locationY <= height;
-			if (isInsideRef.current && !isInside) {
-				isInsideRef.current = false;
+			if (bag.isInside && !isInside) {
+				bag.isInside = false;
 				onPointerLeave(createNormalizedEvent(e));
 			}
 		});
 		viewProps.onTouchEnd = composeEventHandlers(viewProps.onTouchEnd, function(e) {
-			if (isInsideRef.current) {
-				isInsideRef.current = false;
+			if (bag.isInside) {
+				bag.isInside = false;
 				onPointerLeave(createNormalizedEvent(e));
 			}
 		});
@@ -4604,7 +4775,7 @@ var Theme = /* @__PURE__ */ (0, react.forwardRef)(function Theme2(props, ref) {
 	if (props.disable) return props.children;
 	var { passThrough } = props;
 	var isRoot = !!props["_isRoot"];
-	var [_, themeState] = useThemeWithState(props, isRoot);
+	var [_, themeState] = useThemeWithState(props, isRoot, true);
 	var finalChildren = props["disable-child-theme"] ? react.Children.map(props.children, function(child) {
 		return passThrough || !/* @__PURE__ */ (0, react.isValidElement)(child) ? child : /* @__PURE__ */ (0, react.cloneElement)(child, { ["data-disable-theme"]: true });
 	}) : props.children;
@@ -4769,7 +4940,15 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
 		});
 	}
 	var groupName = props.group;
-	var setStateShallow = useCreateShallowSetState(setState, props.debug);
+	if (!stateRef.current.baseSetStateShallow) {
+		var r = stateRef.current;
+		r.baseSetStateShallow = function(stateOrGetState) {
+			setState(function(prev) {
+				return mergeIfNotShallowEqual(prev, typeof stateOrGetState === "function" ? stateOrGetState(prev) : stateOrGetState);
+			});
+		};
+	}
+	var setStateShallow = stateRef.current.baseSetStateShallow;
 	if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
 		var { enterVariant, exitVariant, enterExitVariant, custom } = presenceState;
 		if (isObj(custom)) Object.assign(props, custom);
@@ -4941,7 +5120,7 @@ function createComponent(staticConfig) {
 		var overriddenContextProps = null;
 		var componentContext = react.default.useContext(ComponentContext);
 		var hasTextAncestor = false;
-		var isInsideNativeMenu = react.default.useContext(NativeMenuContext);
+		var isInsideNativeMenu = isAndroid ? react.default.useContext(NativeMenuContext) : false;
 		var props = propsIn;
 		var componentName = props.componentName || staticConfig.componentName;
 		var [nextProps, overrides] = mergeComponentProps(getDefaultProps(staticConfig, props.componentName), styledContextValue, propsIn);
@@ -7343,6 +7522,7 @@ exports.rgba = rgba;
 exports.setConfig = setConfig;
 exports.setDidGetVariableValue = setDidGetVariableValue;
 exports.setIdentifierValue = setIdentifierValue;
+exports.setMediaState = setMediaState;
 exports.setNonce = setNonce;
 exports.setOnLayoutStrategy = setOnLayoutStrategy;
 exports.setRef = setRef;
@@ -7368,6 +7548,7 @@ exports.tokenCategories = tokenCategories;
 exports.transformsToString = transformsToString;
 exports.updateConfig = updateConfig;
 exports.updateFont = updateFont;
+exports.updateMediaListeners = updateMediaListeners;
 exports.useClientValue = useClientValue;
 exports.useComposedRefs = useComposedRefs;
 exports.useConfiguration = useConfiguration;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "license": "MIT",
   "author": {
@@ -79,17 +79,17 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/helpers": "2.3.3",
-    "@tamagui/react-native-media-driver": "2.3.3",
-    "@tamagui/react-native-use-pressable": "2.3.3",
-    "@tamagui/use-element-layout": "2.3.3",
-    "@tamagui/use-event": "2.3.3",
-    "@tamagui/web": "2.3.3"
+    "@tamagui/helpers": "2.4.0",
+    "@tamagui/react-native-media-driver": "2.4.0",
+    "@tamagui/react-native-use-pressable": "2.4.0",
+    "@tamagui/use-element-layout": "2.4.0",
+    "@tamagui/use-event": "2.4.0",
+    "@tamagui/web": "2.4.0"
   },
   "devDependencies": {
-    "@tamagui/build": "2.3.3",
-    "@tamagui/native-bundle": "2.3.3",
-    "@tamagui/react-native-web-lite": "2.3.3",
+    "@tamagui/build": "2.4.0",
+    "@tamagui/native-bundle": "2.4.0",
+    "@tamagui/react-native-web-lite": "2.4.0",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": ">=19",