@tamagui/core 3.0.0-beta.1125.1 → 3.0.0-beta.1141.1

package/dist/native.cjs

@@ -1027,16 +1027,11 @@ var unitlessNumbers = {
 	flexShrink: true,
 	flexNegative: true,
 	fontWeight: true,
-	gap: true,
-	columnGap: true,
-	rowGap: true,
 	gridRow: true,
 	gridRowEnd: true,
-	gridRowGap: true,
 	gridRowStart: true,
 	gridColumn: true,
 	gridColumnEnd: true,
-	gridColumnGap: true,
 	gridColumnStart: true,
 	lineClamp: true,
 	opacity: true,
@@ -12029,6 +12024,7 @@ var setConfig = function(next) {
 	if (conf !== previous || globalThis.__tamaguiConfig !== previousGlobal) return;
 	conf = next;
 	globalThis.__tamaguiConfig = next;
+	if (process.env.TAMAGUI_ENVIRONMENT === "tamagui") globalThis.__tamaguiEvaluationConfig = next;
 };
 var setConfigFont = function(name, font, fontParsed) {
 	var config = getConfigFromGlobalOrLocal();
@@ -12655,6 +12651,10 @@ function getDynamicVal(param) {
 		[oppositeScheme]: oppositeVal
 	} };
 }
+function extractValueFromDynamic(val, scheme) {
+	if (val === null || val === void 0 ? void 0 : val["dynamic"]) return val["dynamic"][scheme];
+	return val;
+}
 //#endregion
 //#region ../web/dist/esm/helpers/themeUpdateState.native.js
 var themeUpdateStateKey = "_tmgInlineLayer";
@@ -15057,8 +15057,21 @@ function contributeProp(pass, keyOg, valOg) {
 			}
 			var styleOriginals = shouldTrackStyleTokenProvenance ? styleOriginalValues.get(style) : void 0;
 			for (var key1 in style) {
-				if (style[key1] == null) continue;
-				contributeValue(styleState, key1, style[key1], styleOriginals === null || styleOriginals === void 0 ? void 0 : styleOriginals[key1]);
+				var value1 = style[key1];
+				if (value1 == null) continue;
+				var inline = !styleState.styleProps.stylePieceEntries;
+				if (inline) {
+					if (typeof value1 === "string") {
+						var [segments] = getConfigRevisionState(conf).parseFlatValue(value1);
+						for (var index2 = 4; index2 < segments.length; index2 += 5) if (!(segments[index2] & 1)) {
+							inline = false;
+							break;
+						}
+					} else if (value1 && typeof value1 === "object" && !Array.isArray(value1) && !isVariable(value1) && classifyConditionalObject(value1, styleState) !== 0) inline = false;
+				}
+				styleState.flatInlineStyleProp = inline;
+				contributeValue(styleState, key1, value1, styleOriginals === null || styleOriginals === void 0 ? void 0 : styleOriginals[key1]);
+				styleState.flatInlineStyleProp = false;
 			}
 		}
 		pass[passSourceLayer] = layerBeforeStyle;
@@ -15134,7 +15147,7 @@ function contributeProp(pass, keyOg, valOg) {
 		if (valInit === "unset") {
 			var expanded = expandStyle(keyInit, valInit, conf.settings.styleCompat || "web");
 			clearDirectStyle(styleState, keyInit);
-			if (expanded) for (var index2 = 0; index2 < expanded.length; index2++) clearDirectStyle(styleState, expanded[index2][0]);
+			if (expanded) for (var index3 = 0; index3 < expanded.length; index3++) clearDirectStyle(styleState, expanded[index3][0]);
 		} else contributeValue(styleState, keyInit, valInit, originalOg, !isHostStyleKey);
 		return;
 	}
@@ -15466,7 +15479,10 @@ function writeCapturedStyleRecord(slots, slot, source, sourceLayer) {
 	for (var index = 0; index < list.length; index++) {
 		var entry = list[index];
 		var entryFlags = entry[7] & 31;
-		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) continue;
+		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) {
+			if (sourceLayer === sourceLayerStyle && entry[7] >> 5 === sourceLayerStyle && entry[0] === source[0] && !condition && !entry[2]) list.splice(index--, 1);
+			continue;
+		}
 		if (entry[0] !== source[0]) continue;
 		if (flags & recordDefault) {
 			if (!(entryFlags & recordDefault) && (!entry[2] || entry[3] === identity)) return;
@@ -15524,8 +15540,8 @@ function recordStyleTokenProvenance(styleState, key, originalVal) {
 	var tokenName = typeof originalVal === "string" ? originalVal : "";
 	if (tokenName) {
 		var slash = tokenName.lastIndexOf("/");
-		var opacity = slash === -1 ? NaN : Number(tokenName.slice(slash + 1));
-		if (Number.isInteger(opacity) && opacity >= 0 && opacity <= 100) tokenName = tokenName.slice(0, slash);
+		var opacity = slash === -1 ? NaN : +tokenName.slice(slash + 1);
+		if (opacity % 1 === 0 && opacity >= 0 && opacity <= 100) tokenName = tokenName.slice(0, slash);
 	}
 	if (tokenName !== "" && (tokenName in styleState.theme || tokenName in (((_styleState_conf_themes = styleState.conf.themes) === null || _styleState_conf_themes === void 0 ? void 0 : _styleState_conf_themes[styleState.flatThemeName || ""]) || {}) || Object.values(styleState.conf.tokensParsed).some(function(category) {
 		return tokenName in category;
@@ -15574,27 +15590,39 @@ var recordDefault = 8;
 var recordCSS = 16;
 function writeStyleRecord(state, property, value, cursor, original, flags) {
 	var conditionOverride = arguments.length > 6 && arguments[6] !== void 0 ? arguments[6] : -1;
-	var _state_flatPass;
+	var _direct_flatPass;
 	var _direct;
 	var condition = conditionOverride !== -1 ? conditionOverride : cursor ? cursor[conditionValue] : 0;
 	var identity = cursor ? cursor[conditionKey] : "";
-	var slots = (_direct = state).flatSlots || (_direct.flatSlots = /* @__PURE__ */ new Map());
-	var slot = property.startsWith("transition") ? "transition" : property;
+	var direct = state;
+	var slots = (_direct = direct).flatSlots || (_direct.flatSlots = /* @__PURE__ */ new Map());
+	var sourceLayer = ((_direct_flatPass = direct.flatPass) === null || _direct_flatPass === void 0 ? void 0 : _direct_flatPass[passSourceLayer]) || 0;
+	if (direct.flatInlineStyleProp) flags |= recordInline;
+	var cssSlot = property.startsWith("transition") ? "transition" : property;
+	var slot = flags & recordInline && cssSlot !== property ? property : cssSlot;
 	var list = slots.get(slot);
 	if (!list) slots.set(slot, list = []);
-	for (var index = 0; index < list.length; index++) {
-		var entry = list[index];
-		var entryFlags = entry[7];
-		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) continue;
-		if (entry[0] !== property) continue;
+	if (sourceLayer === sourceLayerStyle && !condition) {
+		var other = slot === cssSlot ? list : slots.get(flags & recordInline ? cssSlot : property);
+		if (other) for (var index = 0; index < other.length; index++) {
+			var entry = other[index];
+			var entryFlags = entry[7];
+			if (entry[0] === property && !entry[2] && entryFlags >> 5 === sourceLayerStyle && (entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) other.splice(index--, 1);
+		}
+	}
+	for (var index1 = 0; index1 < list.length; index1++) {
+		var entry1 = list[index1];
+		var entryFlags1 = entry1[7];
+		if ((entryFlags1 & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) continue;
+		if (entry1[0] !== property) continue;
 		if (flags & recordDefault) {
-			if (!(entryFlags & recordDefault) && (!entry[2] || entry[3] === identity)) return;
-		} else if (entryFlags & recordDefault && (!condition || entry[3] === identity)) {
-			list.splice(index--, 1);
+			if (!(entryFlags1 & recordDefault) && (!entry1[2] || entry1[3] === identity)) return;
+		} else if (entryFlags1 & recordDefault && (!condition || entry1[3] === identity)) {
+			list.splice(index1--, 1);
 			continue;
 		}
-		if (entry[3] === identity) {
-			list.splice(index, 1);
+		if (entry1[3] === identity) {
+			list.splice(index1, 1);
 			break;
 		}
 	}
@@ -15606,7 +15634,7 @@ function writeStyleRecord(state, property, value, cursor, original, flags) {
 		cursor ? cursor[conditionSelector] : "",
 		cursor ? cursor[conditionWrappers] : void 0,
 		original,
-		flags | (((_state_flatPass = state.flatPass) === null || _state_flatPass === void 0 ? void 0 : _state_flatPass[passSourceLayer]) || 0) << 5
+		flags | sourceLayer << 5
 	]);
 }
 function streamWriteInline(state, property, value, cursor, original) {
@@ -15763,14 +15791,14 @@ var valueCacheEntries = 0;
 var valueCacheRoot = {};
 var parsedSlices = /* @__PURE__ */ new WeakMap();
 function configuredValue(state, property, raw) {
-	var embedded = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false;
+	var embedded = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, nativeColors = arguments.length > 4 ? arguments[4] : void 0;
 	var grammar = getConfigRevisionState(state.conf);
 	var name = raw;
 	var opacity;
 	var slash = raw.lastIndexOf("/");
 	if (slash > 0) {
-		var amount = Number(raw.slice(slash + 1));
-		if (Number.isInteger(amount) && amount >= 0 && amount <= 100) {
+		var amount = +raw.slice(slash + 1);
+		if (amount % 1 === 0 && amount >= 0 && amount <= 100) {
 			name = raw.slice(0, slash);
 			opacity = amount;
 		}
@@ -15783,7 +15811,7 @@ function configuredValue(state, property, raw) {
 	var fontProperty = property.startsWith("font") || property === "lineHeight" || property === "letterSpacing";
 	var resolveValues = state.styleProps.resolveValues;
 	var byRaw;
-	if (!fontProperty) {
+	if (!fontProperty && !nativeColors) {
 		var _maps;
 		var revision = grammar.revision;
 		if (state.conf !== valueCacheConf || revision !== valueCacheRevision) {
@@ -15847,20 +15875,25 @@ function configuredValue(state, property, raw) {
 	}
 	var out = raw;
 	if (isVariable(value)) {
-		out = resolveValues === "except-theme" && fromTheme ? `${THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : resolveVariableValue(property, value, resolveValues);
+		out = resolveValues === "except-theme" && fromTheme ? `${THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : resolveVariableValue(nativeColors ? "color" : property, value, resolveValues);
 		if (opacity !== void 0) {
 			var _normalizeColor;
 			out = (_normalizeColor = normalizeColor(out, opacity / 100)) !== null && _normalizeColor !== void 0 ? _normalizeColor : out;
 		}
 	}
+	if (nativeColors && out && typeof out === "object") {
+		var reference = `__tamagui_native_color_${nativeColors.size}`;
+		nativeColors.set(reference, out);
+		out = reference;
+	}
 	if (embedded && out === raw) {
 		var usedSafeArea = state.flatUsesSafeArea;
 		out = grammar.embeddedTokens(raw, function(word) {
-			return configuredValue(state, property, word);
+			return configuredValue(state, property, word, false, nativeColors);
 		});
 		if (!usedSafeArea && state.flatUsesSafeArea) return out;
 	}
-	if (!fontProperty && !fromTheme) if (valueCacheEntries > 8192) {
+	if (!fontProperty && !fromTheme && !nativeColors) if (valueCacheEntries > 8192) {
 		valueCaches = /* @__PURE__ */ new WeakMap();
 		valueCacheEntries = 0;
 	} else {
@@ -15898,9 +15931,21 @@ function emitProperty(state, property, value, cursor, originalValue, contextOnly
 	var theme = cursor ? cursor[conditionTheme] : "";
 	if (theme) {
 		if (supportsDynamicColorIOS && isColorStyleKey(property)) {
-			var _direct, _ref, _property;
-			var schemes = (_ref = (_direct = direct).flatDynamicColors || (_direct.flatDynamicColors = {}))[_property = property] || (_ref[_property] = {});
-			schemes[theme] = typeof originalValue === "string" && /^[a-z]+$/i.test(originalValue) ? originalValue : value;
+			var _direct;
+			var colors = (_direct = direct).flatDynamicColors || (_direct.flatDynamicColors = {});
+			var schemes = colors[property];
+			if (!schemes) {
+				var _direct_flatSlots_get_find, _direct_flatSlots_get, _direct_flatSlots;
+				schemes = colors[property] = {};
+				var base = (_direct_flatSlots = direct.flatSlots) === null || _direct_flatSlots === void 0 ? void 0 : (_direct_flatSlots_get = _direct_flatSlots.get(property)) === null || _direct_flatSlots_get === void 0 ? void 0 : (_direct_flatSlots_get_find = _direct_flatSlots_get.find(function(entry) {
+					return !entry[2];
+				})) === null || _direct_flatSlots_get_find === void 0 ? void 0 : _direct_flatSlots_get_find[1];
+				if (base !== void 0) {
+					schemes.light = extractValueFromDynamic(base, "light");
+					schemes.dark = extractValueFromDynamic(base, "dark");
+				}
+			}
+			schemes[theme] = extractValueFromDynamic(value, theme);
 			streamWriteInline(state, property, { dynamic: _objectSpread2({}, schemes) }, cursor, originalValue, true, condition & 1 ? condition : condition + 1);
 			return;
 		}
@@ -15923,10 +15968,8 @@ function numericUnitValue(value, first, second) {
 	return value.length > first.length && (value.endsWith(first) || value.endsWith(second)) ? +value.slice(0, -first.length) : NaN;
 }
 function resolveNumericValue(value) {
-	var unitValue = numericUnitValue(value, "px", "dp");
-	if (Number.isFinite(unitValue)) return unitValue;
-	var numeric = +value;
-	return Number.isFinite(numeric) ? numeric : value;
+	var numeric = numericUnitValue(value, "px", "dp");
+	return isFinite(numeric) ? numeric : isFinite(numeric = +value) ? numeric : value;
 }
 function emitBorder(state, property, raw, cursor, originalValue, contextOnly) {
 	if (property === "borderBlock" || property === "borderInline") return;
@@ -15980,9 +16023,9 @@ function emitTextDecoration(state, raw, cursor, originalValue, contextOnly) {
 function emitResolved(state, property, raw, cursor, originalValue, contextOnly) {
 	emitProperty(state, property, resolveValue(state, property, raw), cursor, originalValue, contextOnly);
 }
-function resolveValue(state, property, raw) {
-	var value = typeof raw === "string" ? configuredValue(state, property, raw, true) : raw;
-	if (typeof value === "string" && value !== "") value = resolveNumericValue(value);
+function resolveValue(state, property, raw, nativeColors) {
+	var value = typeof raw === "string" ? configuredValue(state, property, raw, true, nativeColors) : raw;
+	if (typeof value === "string" && value !== "" && true) value = resolveNumericValue(value);
 	return value;
 }
 function shadowUnit(part) {
@@ -16026,7 +16069,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	if (property === "x" || property === "y" || property === "scale" || property === "scaleX" || property === "scaleY" || property === "rotate") {
 		var value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
 		if (typeof value2 === "string" && !value2.startsWith("
theme:")) {
-			if (property === "rotate" && !Number.isFinite(numericUnitValue(value2, "deg", "rad")) && true) {
+			if (property === "rotate" && !isFinite(numericUnitValue(value2, "deg", "rad")) && true) {
 				if (condition & 1) {
 					removeTransformValue(state.transformAccumulator, property);
 					writeStyleRecord(state, property, void 0, cursor, void 0, recordRetract);
@@ -16038,9 +16081,10 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 		emitProperty(state, property, value2, cursor, originalValue, contextOnly);
 		return;
 	}
-	var value3 = resolveValue(state, property, raw);
+	var nativeColors = typeof raw === "string" && (property === "backgroundImage" || property === "boxShadow" || property === "textShadow") ? /* @__PURE__ */ new Map() : void 0;
+	var value3 = resolveValue(state, property, raw, nativeColors);
 	if (typeof value3 === "string" && (property === "backgroundImage" || property === "boxShadow" || property === "textShadow")) {
-		var parsed = parseNativeStyle(property, value3);
+		var parsed = parseNativeStyle(property, value3, nativeColors);
 		if (parsed) {
 			if (property === "textShadow") {
 				var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
@@ -16108,9 +16152,9 @@ function walkConditionalValue(state, property, value, parent, sink) {
 		if (slices === void 0) parsedSlices.set(parsed, slices = []);
 		var chainCount = segments.length / 5 - 1;
 		if (property === "aspectRatio" && chainCount === 1) {
-			var left = Number(value.slice(segments[7], segments[8]));
-			var right = Number(value.slice(segments[5], segments[6]));
-			if (left > 0 && right > 0 && Number.isFinite(left) && Number.isFinite(right)) return false;
+			var left = +value.slice(segments[7], segments[8]);
+			var right = +value.slice(segments[5], segments[6]);
+			if (left > 0 && right > 0 && isFinite(left) && isFinite(right)) return false;
 		}
 		for (var index = 0; index < segments.length; index += 5) {
 			var start = segments[index];
@@ -16218,18 +16262,20 @@ function contributeValue(state, property, value, originalValue) {
 function clearDirectStyle(state, property) {
 	var _direct_flatAtomics;
 	var direct = state;
+	if (direct.flatDynamicColors) delete direct.flatDynamicColors[property];
 	var propertyKind = getConfigRevisionState(state.conf).propertyKind(property);
 	var atomicKey = property.startsWith("transition") ? "transition" : propertyKind > 0 && propertyKind < 5 ? "boxShadow" : propertyKind === 6 ? "textShadow" : propertyKind === 5 ? "transform" : property;
 	var slot = atomicKey;
 	(_direct_flatAtomics = direct.flatAtomics) === null || _direct_flatAtomics === void 0 || _direct_flatAtomics.delete(slot);
 	if (direct.flatSlots) {
-		if (slot !== atomicKey) {
+		if (slot !== atomicKey || atomicKey === "flex") {
 			var entries = direct.flatSlots.get(slot);
 			if (entries) {
 				for (var index = entries.length; index--;) if (entries[index][0] === atomicKey) entries.splice(index, 1);
+				if (!entries.length) direct.flatSlots.delete(slot);
 			}
 		}
-		direct.flatSlots.delete(atomicKey);
+		if (atomicKey !== "flex") direct.flatSlots.delete(atomicKey);
 	}
 	if (atomicKey === "transform") state.transformAccumulator = void 0;
 	if (state.style) delete state.style[atomicKey];

package/dist/test.native.cjs

@@ -2200,7 +2200,7 @@ Haven't called createTamagui yet. ${MISSING_THEME_MESSAGE}
 var getConfigFromGlobalOrLocal = function() {
 	if (conf) return conf;
 	if (globalThis.__tamaguiConfig) {
-		if (globalThis.process.env.NODE_ENV === "development" && !globalThis.__tamaguiHasWarnedGlobalFallback && !globalThis.__tamaguiPendingCheck) {
+		if (globalThis.process.env.NODE_ENV === "development" && globalThis.__tamaguiEvaluationConfig !== globalThis.__tamaguiConfig && !globalThis.__tamaguiHasWarnedGlobalFallback && !globalThis.__tamaguiPendingCheck) {
 			globalThis.__tamaguiPendingCheck = true;
 			setTimeout(function() {
 				if (!setConfigCalledByThisInstance && !globalThis.__tamaguiHasWarnedGlobalFallback) {
@@ -2238,6 +2238,7 @@ var setConfig = function(next) {
 	if (conf !== previous || globalThis.__tamaguiConfig !== previousGlobal) return;
 	conf = next;
 	globalThis.__tamaguiConfig = next;
+	if (process.env.TAMAGUI_ENVIRONMENT === "tamagui") globalThis.__tamaguiEvaluationConfig = next;
 };
 var setConfigFont = function(name, font, fontParsed) {
 	var config = getConfigFromGlobalOrLocal();
@@ -2896,6 +2897,10 @@ function getDynamicVal(param) {
 		[oppositeScheme]: oppositeVal
 	} };
 }
+function extractValueFromDynamic(val, scheme) {
+	if (val === null || val === void 0 ? void 0 : val["dynamic"]) return val["dynamic"][scheme];
+	return val;
+}
 //#endregion
 //#region ../web/dist/esm/helpers/themeUpdateState.native.js
 var themeUpdateStateKey = "_tmgInlineLayer";
@@ -5757,8 +5762,21 @@ function contributeProp(pass, keyOg, valOg) {
 			}
 			var styleOriginals = shouldTrackStyleTokenProvenance ? styleOriginalValues.get(style) : void 0;
 			for (var key1 in style) {
-				if (style[key1] == null) continue;
-				contributeValue(styleState, key1, style[key1], styleOriginals === null || styleOriginals === void 0 ? void 0 : styleOriginals[key1]);
+				var value1 = style[key1];
+				if (value1 == null) continue;
+				var inline = !styleState.styleProps.stylePieceEntries;
+				if (inline) {
+					if (typeof value1 === "string") {
+						var [segments] = getConfigRevisionState(conf).parseFlatValue(value1);
+						for (var index2 = 4; index2 < segments.length; index2 += 5) if (!(segments[index2] & 1)) {
+							inline = false;
+							break;
+						}
+					} else if (value1 && typeof value1 === "object" && !Array.isArray(value1) && !isVariable(value1) && classifyConditionalObject(value1, styleState) !== 0) inline = false;
+				}
+				styleState.flatInlineStyleProp = inline;
+				contributeValue(styleState, key1, value1, styleOriginals === null || styleOriginals === void 0 ? void 0 : styleOriginals[key1]);
+				styleState.flatInlineStyleProp = false;
 			}
 		}
 		pass[passSourceLayer] = layerBeforeStyle;
@@ -5867,7 +5885,7 @@ function contributeProp(pass, keyOg, valOg) {
 		if (valInit === "unset") {
 			var expanded = expandStyle(keyInit, valInit, conf.settings.styleCompat || "web");
 			clearDirectStyle(styleState, keyInit);
-			if (expanded) for (var index2 = 0; index2 < expanded.length; index2++) clearDirectStyle(styleState, expanded[index2][0]);
+			if (expanded) for (var index3 = 0; index3 < expanded.length; index3++) clearDirectStyle(styleState, expanded[index3][0]);
 		} else contributeValue(styleState, keyInit, valInit, originalOg, !isHostStyleKey);
 		return;
 	}
@@ -6249,7 +6267,10 @@ function writeCapturedStyleRecord(slots, slot, source, sourceLayer) {
 	for (var index = 0; index < list.length; index++) {
 		var entry = list[index];
 		var entryFlags = entry[7] & 31;
-		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) continue;
+		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) {
+			if (sourceLayer === sourceLayerStyle && entry[7] >> 5 === sourceLayerStyle && entry[0] === source[0] && !condition && !entry[2]) list.splice(index--, 1);
+			continue;
+		}
 		if (entry[0] !== source[0]) continue;
 		if (flags & recordDefault) {
 			if (!(entryFlags & recordDefault) && (!entry[2] || entry[3] === identity)) return;
@@ -6307,8 +6328,8 @@ function recordStyleTokenProvenance(styleState, key, originalVal) {
 	var tokenName = typeof originalVal === "string" ? originalVal : "";
 	if (tokenName) {
 		var slash = tokenName.lastIndexOf("/");
-		var opacity = slash === -1 ? NaN : Number(tokenName.slice(slash + 1));
-		if (Number.isInteger(opacity) && opacity >= 0 && opacity <= 100) tokenName = tokenName.slice(0, slash);
+		var opacity = slash === -1 ? NaN : +tokenName.slice(slash + 1);
+		if (opacity % 1 === 0 && opacity >= 0 && opacity <= 100) tokenName = tokenName.slice(0, slash);
 	}
 	if (tokenName !== "" && (tokenName in styleState.theme || tokenName in (((_styleState_conf_themes = styleState.conf.themes) === null || _styleState_conf_themes === void 0 ? void 0 : _styleState_conf_themes[styleState.flatThemeName || ""]) || {}) || Object.values(styleState.conf.tokensParsed).some(function(category) {
 		return tokenName in category;
@@ -6357,27 +6378,39 @@ var recordDefault = 8;
 var recordCSS = 16;
 function writeStyleRecord(state, property, value, cursor, original, flags) {
 	var conditionOverride = arguments.length > 6 && arguments[6] !== void 0 ? arguments[6] : -1;
-	var _state_flatPass;
+	var _direct_flatPass;
 	var _direct;
 	var condition = conditionOverride !== -1 ? conditionOverride : cursor ? cursor[conditionValue] : 0;
 	var identity = cursor ? cursor[conditionKey] : "";
-	var slots = (_direct = state).flatSlots || (_direct.flatSlots = /* @__PURE__ */ new Map());
-	var slot = property.startsWith("transition") ? "transition" : property;
+	var direct = state;
+	var slots = (_direct = direct).flatSlots || (_direct.flatSlots = /* @__PURE__ */ new Map());
+	var sourceLayer = ((_direct_flatPass = direct.flatPass) === null || _direct_flatPass === void 0 ? void 0 : _direct_flatPass[passSourceLayer]) || 0;
+	if (direct.flatInlineStyleProp) flags |= recordInline;
+	var cssSlot = property.startsWith("transition") ? "transition" : property;
+	var slot = flags & recordInline && cssSlot !== property ? property : cssSlot;
 	var list = slots.get(slot);
 	if (!list) slots.set(slot, list = []);
-	for (var index = 0; index < list.length; index++) {
-		var entry = list[index];
-		var entryFlags = entry[7];
-		if ((entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) continue;
-		if (entry[0] !== property) continue;
+	if (sourceLayer === sourceLayerStyle && !condition) {
+		var other = slot === cssSlot ? list : slots.get(flags & recordInline ? cssSlot : property);
+		if (other) for (var index = 0; index < other.length; index++) {
+			var entry = other[index];
+			var entryFlags = entry[7];
+			if (entry[0] === property && !entry[2] && entryFlags >> 5 === sourceLayerStyle && (entryFlags & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) other.splice(index--, 1);
+		}
+	}
+	for (var index1 = 0; index1 < list.length; index1++) {
+		var entry1 = list[index1];
+		var entryFlags1 = entry1[7];
+		if ((entryFlags1 & (recordInline | recordCSS)) !== (flags & (recordInline | recordCSS))) continue;
+		if (entry1[0] !== property) continue;
 		if (flags & recordDefault) {
-			if (!(entryFlags & recordDefault) && (!entry[2] || entry[3] === identity)) return;
-		} else if (entryFlags & recordDefault && (!condition || entry[3] === identity)) {
-			list.splice(index--, 1);
+			if (!(entryFlags1 & recordDefault) && (!entry1[2] || entry1[3] === identity)) return;
+		} else if (entryFlags1 & recordDefault && (!condition || entry1[3] === identity)) {
+			list.splice(index1--, 1);
 			continue;
 		}
-		if (entry[3] === identity) {
-			list.splice(index, 1);
+		if (entry1[3] === identity) {
+			list.splice(index1, 1);
 			break;
 		}
 	}
@@ -6389,7 +6422,7 @@ function writeStyleRecord(state, property, value, cursor, original, flags) {
 		cursor ? cursor[conditionSelector] : "",
 		cursor ? cursor[conditionWrappers] : void 0,
 		original,
-		flags | (((_state_flatPass = state.flatPass) === null || _state_flatPass === void 0 ? void 0 : _state_flatPass[passSourceLayer]) || 0) << 5
+		flags | sourceLayer << 5
 	]);
 }
 function streamWriteInline(state, property, value, cursor, original) {
@@ -6564,14 +6597,14 @@ var cssWideColorKeywords = /* @__PURE__ */ new Set([
 	"transparent"
 ]);
 function configuredValue(state, property, raw) {
-	var embedded = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false;
+	var embedded = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, nativeColors = arguments.length > 4 ? arguments[4] : void 0;
 	var grammar = getConfigRevisionState(state.conf);
 	var name = raw;
 	var opacity;
 	var slash = raw.lastIndexOf("/");
 	if (slash > 0) {
-		var amount = Number(raw.slice(slash + 1));
-		if (Number.isInteger(amount) && amount >= 0 && amount <= 100) {
+		var amount = +raw.slice(slash + 1);
+		if (amount % 1 === 0 && amount >= 0 && amount <= 100) {
 			name = raw.slice(0, slash);
 			opacity = amount;
 		}
@@ -6584,7 +6617,7 @@ function configuredValue(state, property, raw) {
 	var fontProperty = property.startsWith("font") || property === "lineHeight" || property === "letterSpacing";
 	var resolveValues = state.styleProps.resolveValues;
 	var byRaw;
-	if (!fontProperty) {
+	if (!fontProperty && !nativeColors) {
 		var _maps;
 		var revision = grammar.revision;
 		if (state.conf !== valueCacheConf || revision !== valueCacheRevision) {
@@ -6660,27 +6693,18 @@ function configuredValue(state, property, raw) {
 				var rawNum = Number(name);
 				var tokens = category1 ? state.conf.tokensParsed[category1] : void 0;
 				if (tokens && Number.isFinite(rawNum)) for (var key in tokens) {
-					var keyNum = Number(key);
-					if (Number.isFinite(keyNum)) {
-						var dist = Math.abs(keyNum - rawNum);
+					var _tokens_key;
+					var val = (_tokens_key = tokens[key]) === null || _tokens_key === void 0 ? void 0 : _tokens_key.val;
+					var valNum = typeof val === "number" ? val : Number(val);
+					if (Number.isFinite(valNum)) {
+						var dist = Math.abs(valNum - rawNum);
 						if (dist < minDistance) {
 							minDistance = dist;
 							nearest = key;
 						}
-					} else {
-						var _tokens_key;
-						var val = (_tokens_key = tokens[key]) === null || _tokens_key === void 0 ? void 0 : _tokens_key.val;
-						var valNum = typeof val === "number" ? val : Number(val);
-						if (Number.isFinite(valNum)) {
-							var dist1 = Math.abs(valNum - rawNum);
-							if (dist1 < minDistance) {
-								minDistance = dist1;
-								nearest = key;
-							}
-						}
 					}
 				}
-				warnOnce(`numeric-token:${property}=${raw}`, `${property}="${raw}" was passed to CSS as-is with px units${nearest ? `; nearest token is "${nearest}"` : ""}`);
+				if (nearest) warnOnce(`numeric-token:${property}=${raw}`, `${property}="${raw}" was passed to CSS as-is${category1 === "zIndex" ? "" : " with px units"}${nearest ? `; nearest token is "${nearest}"` : ""}`);
 			} else if (category1 === "color" && /^[a-zA-Z0-9-]+$/.test(name) && /[a-zA-Z]/.test(name)) {
 				var lower = name.toLowerCase();
 				if (!namedCssColors.has(lower) && !cssWideColorKeywords.has(lower)) {
@@ -6711,9 +6735,9 @@ function configuredValue(state, property, raw) {
 									prev = temp;
 								}
 							}
-							var dist2 = d[m];
-							if (dist2 <= 2 && dist2 < minDistance1) {
-								minDistance1 = dist2;
+							var dist1 = d[m];
+							if (dist1 <= 2 && dist1 < minDistance1) {
+								minDistance1 = dist1;
 								bestMatch = key1;
 							}
 						}
@@ -6734,20 +6758,25 @@ function configuredValue(state, property, raw) {
 	}
 	var out = raw;
 	if (isVariable(value)) {
-		out = resolveValues === "except-theme" && fromTheme ? `${THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : resolveVariableValue(property, value, resolveValues);
+		out = resolveValues === "except-theme" && fromTheme ? `${THEME_REF_PREFIX}${lookupName}${opacity !== void 0 ? `/${opacity}` : ""}` : resolveVariableValue(nativeColors ? "color" : property, value, resolveValues);
 		if (opacity !== void 0) {
 			var _normalizeColor;
 			out = (_normalizeColor = normalizeColor(out, opacity / 100)) !== null && _normalizeColor !== void 0 ? _normalizeColor : out;
 		}
 	}
+	if (nativeColors && out && typeof out === "object") {
+		var reference = `__tamagui_native_color_${nativeColors.size}`;
+		nativeColors.set(reference, out);
+		out = reference;
+	}
 	if (embedded && out === raw) {
 		var usedSafeArea = state.flatUsesSafeArea;
 		out = grammar.embeddedTokens(raw, function(word) {
-			return configuredValue(state, property, word);
+			return configuredValue(state, property, word, false, nativeColors);
 		});
 		if (!usedSafeArea && state.flatUsesSafeArea) return out;
 	}
-	if (!fontProperty && !fromTheme) if (valueCacheEntries > 8192) {
+	if (!fontProperty && !fromTheme && !nativeColors) if (valueCacheEntries > 8192) {
 		valueCaches = /* @__PURE__ */ new WeakMap();
 		valueCacheEntries = 0;
 	} else {
@@ -6785,9 +6814,21 @@ function emitProperty(state, property, value, cursor, originalValue, contextOnly
 	var theme = cursor ? cursor[conditionTheme] : "";
 	if (theme) {
 		if (supportsDynamicColorIOS && isColorStyleKey(property)) {
-			var _direct, _ref, _property;
-			var schemes = (_ref = (_direct = direct).flatDynamicColors || (_direct.flatDynamicColors = {}))[_property = property] || (_ref[_property] = {});
-			schemes[theme] = typeof originalValue === "string" && /^[a-z]+$/i.test(originalValue) ? originalValue : value;
+			var _direct;
+			var colors = (_direct = direct).flatDynamicColors || (_direct.flatDynamicColors = {});
+			var schemes = colors[property];
+			if (!schemes) {
+				var _direct_flatSlots_get_find, _direct_flatSlots_get, _direct_flatSlots;
+				schemes = colors[property] = {};
+				var base = (_direct_flatSlots = direct.flatSlots) === null || _direct_flatSlots === void 0 ? void 0 : (_direct_flatSlots_get = _direct_flatSlots.get(property)) === null || _direct_flatSlots_get === void 0 ? void 0 : (_direct_flatSlots_get_find = _direct_flatSlots_get.find(function(entry) {
+					return !entry[2];
+				})) === null || _direct_flatSlots_get_find === void 0 ? void 0 : _direct_flatSlots_get_find[1];
+				if (base !== void 0) {
+					schemes.light = extractValueFromDynamic(base, "light");
+					schemes.dark = extractValueFromDynamic(base, "dark");
+				}
+			}
+			schemes[theme] = extractValueFromDynamic(value, theme);
 			streamWriteInline(state, property, { dynamic: _objectSpread2({}, schemes) }, cursor, originalValue, true, condition & 1 ? condition : condition + 1);
 			return;
 		}
@@ -6810,10 +6851,8 @@ function numericUnitValue(value, first, second) {
 	return value.length > first.length && (value.endsWith(first) || value.endsWith(second)) ? +value.slice(0, -first.length) : NaN;
 }
 function resolveNumericValue(value) {
-	var unitValue = numericUnitValue(value, "px", "dp");
-	if (Number.isFinite(unitValue)) return unitValue;
-	var numeric = +value;
-	return Number.isFinite(numeric) ? numeric : value;
+	var numeric = numericUnitValue(value, "px", "dp");
+	return isFinite(numeric) ? numeric : isFinite(numeric = +value) ? numeric : value;
 }
 function emitBorder(state, property, raw, cursor, originalValue, contextOnly) {
 	if (property === "borderBlock" || property === "borderInline") {
@@ -6870,9 +6909,9 @@ function emitTextDecoration(state, raw, cursor, originalValue, contextOnly) {
 function emitResolved(state, property, raw, cursor, originalValue, contextOnly) {
 	emitProperty(state, property, resolveValue(state, property, raw), cursor, originalValue, contextOnly);
 }
-function resolveValue(state, property, raw) {
-	var value = typeof raw === "string" ? configuredValue(state, property, raw, true) : raw;
-	if (typeof value === "string" && value !== "") value = resolveNumericValue(value);
+function resolveValue(state, property, raw, nativeColors) {
+	var value = typeof raw === "string" ? configuredValue(state, property, raw, true, nativeColors) : raw;
+	if (typeof value === "string" && value !== "" && true) value = resolveNumericValue(value);
 	return value;
 }
 function shadowUnit(part) {
@@ -6917,7 +6956,7 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 	if (property === "x" || property === "y" || property === "scale" || property === "scaleX" || property === "scaleY" || property === "rotate") {
 		var value2 = typeof raw === "string" ? configuredValue(state, property, raw) : raw;
 		if (typeof value2 === "string" && !value2.startsWith("
theme:")) {
-			if (property === "rotate" && !Number.isFinite(numericUnitValue(value2, "deg", "rad")) && true) {
+			if (property === "rotate" && !isFinite(numericUnitValue(value2, "deg", "rad")) && true) {
 				if (globalThis.process.env.NODE_ENV === "development") warnOnce(`native transform "${property}" cannot represent "${value2}"; dropping it`);
 				if (condition & 1) {
 					removeTransformValue(state.transformAccumulator, property);
@@ -6930,9 +6969,10 @@ function emitValue(state, property, raw, cursor, originalValue, contextOnly) {
 		emitProperty(state, property, value2, cursor, originalValue, contextOnly);
 		return;
 	}
-	var value3 = resolveValue(state, property, raw);
+	var nativeColors = typeof raw === "string" && (property === "backgroundImage" || property === "boxShadow" || property === "textShadow") ? /* @__PURE__ */ new Map() : void 0;
+	var value3 = resolveValue(state, property, raw, nativeColors);
 	if (typeof value3 === "string" && (property === "backgroundImage" || property === "boxShadow" || property === "textShadow")) {
-		var parsed = parseNativeStyle(property, value3);
+		var parsed = parseNativeStyle(property, value3, nativeColors);
 		if (parsed) {
 			if (property === "textShadow") {
 				var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
@@ -7006,9 +7046,9 @@ function walkConditionalValue(state, property, value, parent, sink) {
 		if (slices === void 0) parsedSlices.set(parsed, slices = []);
 		var chainCount = segments.length / 5 - 1;
 		if (property === "aspectRatio" && chainCount === 1) {
-			var left = Number(value.slice(segments[7], segments[8]));
-			var right = Number(value.slice(segments[5], segments[6]));
-			if (left > 0 && right > 0 && Number.isFinite(left) && Number.isFinite(right)) return false;
+			var left = +value.slice(segments[7], segments[8]);
+			var right = +value.slice(segments[5], segments[6]);
+			if (left > 0 && right > 0 && isFinite(left) && isFinite(right)) return false;
 		}
 		for (var index = 0; index < segments.length; index += 5) {
 			var start = segments[index];
@@ -7069,7 +7109,7 @@ function walkConditionalValue(state, property, value, parent, sink) {
 			if (cursor1[conditionValue] & conditionResolvedFlag || warnMode) emitConditionalValue(state, property, value[key], cursor1, value[key], sink, warnMode, contextOnly);
 		}
 	}
-	if (warnMode && globalThis.process.env.NODE_ENV === "development" && typeof value === "string" && !hasBase && conditions && getConfigRevisionState(state.conf).tokenCategory(property) && splitComponents(lastPayload).length > 1) warnOnce(`${property}="${value}" has multiple values after its first conditional. Write the base value before the first conditional.`);
+	if (warnMode && globalThis.process.env.NODE_ENV === "development" && typeof value === "string" && !hasBase && conditions && getConfigRevisionState(state.conf).tokenCategory(property) && getConfigRevisionState(state.conf).propertyKind(property) !== 8 && property !== "boxShadow" && property !== "textShadow" && property !== "fontFamily" && property !== "gap" && splitComponents(lastPayload).length > 1) warnOnce(`${property}="${value}" has multiple values after its first conditional. Write the base value before the first conditional.`);
 	if (warnMode === 1 && conditions & 12 && !hasBase) {
 		var _state_flatPropertyLayers;
 		var resting = property === "opacity" || property.startsWith("scale") ? 1 : property === "rotate" ? "0deg" : property === "x" || property === "y" ? 0 : null;
@@ -7132,18 +7172,20 @@ function contributeValue(state, property, value, originalValue) {
 function clearDirectStyle(state, property) {
 	var _direct_flatAtomics;
 	var direct = state;
+	if (direct.flatDynamicColors) delete direct.flatDynamicColors[property];
 	var propertyKind = getConfigRevisionState(state.conf).propertyKind(property);
 	var atomicKey = property.startsWith("transition") ? "transition" : propertyKind > 0 && propertyKind < 5 ? "boxShadow" : propertyKind === 6 ? "textShadow" : propertyKind === 5 ? "transform" : property;
 	var slot = atomicKey;
 	(_direct_flatAtomics = direct.flatAtomics) === null || _direct_flatAtomics === void 0 || _direct_flatAtomics.delete(slot);
 	if (direct.flatSlots) {
-		if (slot !== atomicKey) {
+		if (slot !== atomicKey || atomicKey === "flex") {
 			var entries = direct.flatSlots.get(slot);
 			if (entries) {
 				for (var index = entries.length; index--;) if (entries[index][0] === atomicKey) entries.splice(index, 1);
+				if (!entries.length) direct.flatSlots.delete(slot);
 			}
 		}
-		direct.flatSlots.delete(atomicKey);
+		if (atomicKey !== "flex") direct.flatSlots.delete(atomicKey);
 	}
 	if (atomicKey === "transform") state.transformAccumulator = void 0;
 	if (state.style) delete state.style[atomicKey];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "3.0.0-beta.1125.1",
+  "version": "3.0.0-beta.1141.1",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "license": "MIT",
   "author": {
@@ -137,20 +137,20 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "3.0.0-beta.1125.1",
-    "@tamagui/constants": "3.0.0-beta.1125.1",
-    "@tamagui/helpers": "3.0.0-beta.1125.1",
-    "@tamagui/react-native-media-driver": "3.0.0-beta.1125.1",
-    "@tamagui/react-native-use-pressable": "3.0.0-beta.1125.1",
-    "@tamagui/size": "3.0.0-beta.1125.1",
-    "@tamagui/use-element-layout": "3.0.0-beta.1125.1",
-    "@tamagui/use-event": "3.0.0-beta.1125.1",
-    "@tamagui/web": "3.0.0-beta.1125.1"
+    "@tamagui/compose-refs": "3.0.0-beta.1141.1",
+    "@tamagui/constants": "3.0.0-beta.1141.1",
+    "@tamagui/helpers": "3.0.0-beta.1141.1",
+    "@tamagui/react-native-media-driver": "3.0.0-beta.1141.1",
+    "@tamagui/react-native-use-pressable": "3.0.0-beta.1141.1",
+    "@tamagui/size": "3.0.0-beta.1141.1",
+    "@tamagui/use-element-layout": "3.0.0-beta.1141.1",
+    "@tamagui/use-event": "3.0.0-beta.1141.1",
+    "@tamagui/web": "3.0.0-beta.1141.1"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.1125.1",
-    "@tamagui/native-bundle": "3.0.0-beta.1125.1",
-    "@tamagui/react-native-web-lite": "3.0.0-beta.1125.1",
+    "@tamagui/build": "3.0.0-beta.1141.1",
+    "@tamagui/native-bundle": "3.0.0-beta.1141.1",
+    "@tamagui/react-native-web-lite": "3.0.0-beta.1141.1",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": "19.2.3",