@tamagui/core 3.0.0-beta.748.1 → 3.0.0-beta.752.1

package/dist/native.cjs

@@ -14976,7 +14976,9 @@ function flushDirectStyles(state) {
 		var styleObject = atomics[property].styleObject;
 		var identifier = styleObject[2];
 		if (shouldInsertStyleRules(identifier)) {
-			updateRules(identifier, styleObject[4]);
+			var rules = styleObject[4].slice();
+			styleObject[4] = rules;
+			updateRules(identifier, rules);
 			state.flatRulesToInsert[identifier] = styleObject;
 		}
 	}
@@ -15548,10 +15550,18 @@ function _type_of$8(obj) {
 	"@swc/helpers - typeof";
 	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-function appendFlatClause(prev, conditionSource, value) {
-	if (prev != null && typeof prev !== "string" && typeof prev !== "number") return;
-	if (typeof value !== "string" && typeof value !== "number") return;
-	return prev == null ? `${conditionSource}:${value}` : `${prev} ${conditionSource}:${value}`;
+function appendFlatClause(state, prev, conditionSource, value) {
+	if (typeof value === "string" || typeof value === "number") {
+		if (prev == null) return `${conditionSource}:${value}`;
+		if (typeof prev === "string" || typeof prev === "number") return `${prev} ${conditionSource}:${value}`;
+	}
+	if (prev == null) return { [conditionSource]: value };
+	if (typeof prev === "string" && prev.includes(":")) return;
+	if ((typeof prev === "undefined" ? "undefined" : _type_of$8(prev)) === "object" && !Array.isArray(prev) && !isVariable(prev) && isConditionalStyleObject(state, prev)) return _objectSpread2(_objectSpread2({}, prev), {}, { [conditionSource]: value });
+	return {
+		default: prev,
+		[conditionSource]: value
+	};
 }
 var propMapperHandler = {
 	segment(ctx, start, end, isBase, valid, source, chainStart, chainEnd, chainValid) {
@@ -15813,7 +15823,7 @@ var resolveTokensAndVariants = function(key, value, styleProps, styleState, pare
 							var [_$key, val1, originalVal, conditionSource] = _step.value;
 							if (val1 == null) continue;
 							if (conditionSource !== void 0) {
-								var appended = appendFlatClause(res[_$key], conditionSource, val1);
+								var appended = appendFlatClause(styleState, res[_$key], conditionSource, val1);
 								if (appended === void 0) continue;
 								res[_$key] = appended;
 								continue;
@@ -16050,12 +16060,130 @@ function compoundMatcherMatches(expected, actual) {
 	});
 	return Object.is(expected, actual);
 }
-function compoundVariantMatches(compoundVariant, props) {
+function compoundMatcherMatchesPayload(expected, payload) {
+	if (Array.isArray(expected)) return expected.some(function(value) {
+		return compoundMatcherMatchesPayload(value, payload);
+	});
+	return typeof expected === "string" ? expected === payload : String(expected) === payload;
+}
+var compoundScanHandler = {
+	segment(ctx, start, end, isBase, valid, source, chainStart, chainEnd, chainValid) {
+		if (!valid || start >= end) return;
+		if (!compoundMatcherMatchesPayload(ctx[1], source.slice(start, end))) return;
+		if (isBase) {
+			ctx[4] = true;
+			return;
+		}
+		if (!chainValid) return;
+		var chain = source.slice(chainStart, chainEnd);
+		if (ctx[2](chain)) ctx[3].push(chain);
+	},
+	chain() {
+		return true;
+	},
+	error() {}
+};
+function matcherChains(expected, actual, isChain) {
+	if (typeof actual === "string" && actual.indexOf(":") !== -1) {
+		var scan = [
+			actual,
+			expected,
+			isChain,
+			[],
+			false
+		];
+		scanFlatValue(actual, compoundScanHandler, scan);
+		if (scan[4]) return [""];
+		return scan[3].length ? scan[3] : null;
+	}
+	if (actual && (typeof actual === "undefined" ? "undefined" : _type_of$6(actual)) === "object" && !Array.isArray(actual) && !isVariable(actual)) {
+		var conditional = Object.prototype.hasOwnProperty.call(actual, "default");
+		if (!conditional) for (var key in actual) {
+			conditional = key.length > 0 && isChain(key);
+			break;
+		}
+		if (conditional) {
+			var chains = [];
+			for (var key1 in actual) {
+				var payload = actual[key1];
+				if (payload == null || !compoundMatcherMatches(expected, payload)) continue;
+				if (key1 === "default") return [""];
+				if (isChain(key1)) chains.push(key1);
+			}
+			return chains.length ? chains : null;
+		}
+	}
+	return compoundMatcherMatches(expected, actual) ? [""] : null;
+}
+function isConditionalObjectValue(value, isChain) {
+	if (Object.prototype.hasOwnProperty.call(value, "default")) return true;
+	for (var key in value) return key.length > 0 && isChain(key);
+	return false;
+}
+var joinChains = function(a, b) {
+	if (!a) return b;
+	if (!b) return a;
+	var segments = a.split(":");
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = b.split(":")[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var segment = _step.value;
+			if (!segments.includes(segment)) segments.push(segment);
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+		} finally {
+			if (_didIteratorError) throw _iteratorError;
+		}
+	}
+	return segments.join(":");
+};
+function compoundVariantMatchChains(compoundVariant, props, isChain) {
+	var chains = [""];
 	for (var key in compoundVariant) {
 		if (key === "style") continue;
-		if (!compoundMatcherMatches(compoundVariant[key], props[key])) return false;
+		var keyChains = matcherChains(compoundVariant[key], props[key], isChain);
+		if (!keyChains) return null;
+		var next = [];
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = chains[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var a = _step.value;
+				var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+				try {
+					for (var _iterator1 = keyChains[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+						var b = _step1.value;
+						var joined = joinChains(a, b);
+						if (!next.includes(joined)) next.push(joined);
+					}
+				} catch (err) {
+					_didIteratorError1 = true;
+					_iteratorError1 = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion1 && _iterator1.return != null) _iterator1.return();
+					} finally {
+						if (_didIteratorError1) throw _iteratorError1;
+					}
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+			} finally {
+				if (_didIteratorError) throw _iteratorError;
+			}
+		}
+		chains = next;
 	}
-	return true;
+	return chains;
 }
 var styledDefaultsCache = /* @__PURE__ */ new WeakMap();
 function getStyledDefaults(staticConfig) {
@@ -16068,6 +16196,9 @@ function getStyledDefaults(staticConfig) {
 	}
 	return entries;
 }
+var maybeStyleProgram = function(value) {
+	return typeof value === "string" ? value.includes(":") : !!value && (typeof value === "undefined" ? "undefined" : _type_of$6(value)) === "object" && !Array.isArray(value) && !isVariable(value);
+};
 function contributeDisplacedStyledDefaults(styledDefaults, processedProps, shorthands, contribute) {
 	if (!styledDefaults) return;
 	for (var index = 0; index < styledDefaults.length; index++) {
@@ -16075,10 +16206,10 @@ function contributeDisplacedStyledDefaults(styledDefaults, processedProps, short
 		var styledValue = styledDefaults[index][1];
 		var propValue = processedProps[key];
 		if (!(key in stylePropsAll) && !(key in shorthands)) continue;
-		if (propValue !== void 0 && propValue !== styledValue && (typeof styledValue === "string" && styledValue.includes(":") || typeof propValue === "string" && propValue.includes(":"))) contribute(key, styledValue);
+		if (propValue !== void 0 && propValue !== styledValue && (maybeStyleProgram(styledValue) || maybeStyleProgram(propValue))) contribute(key, styledValue);
 	}
 }
-function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contribute) {
+function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contribute, isChain) {
 	var processedBaseStyle = staticConfig.baseStyle;
 	var compoundVariants = staticConfig.compoundVariants;
 	var styledDefaults = getStyledDefaults(staticConfig);
@@ -16098,7 +16229,8 @@ function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, con
 	try {
 		for (var _iterator = compoundVariants[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
 			var compoundVariant = _step.value;
-			if (!compoundVariantMatches(compoundVariant, processedProps)) continue;
+			var chains = compoundVariantMatchChains(compoundVariant, processedProps, isChain);
+			if (!chains) continue;
 			var { style } = compoundVariant;
 			if (!isPlainObject(style)) continue;
 			var anchor = -1;
@@ -16110,7 +16242,36 @@ function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, con
 				}
 			}
 			var entries = compoundsByAnchor.get(anchor) || [];
-			for (var key2 in style) entries.push([key2, style[key2]]);
+			for (var key2 in style) {
+				var value = style[key2];
+				var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+				try {
+					for (var _iterator1 = chains[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+						var chain = _step1.value;
+						if (!chain) {
+							entries.push([key2, value]);
+							continue;
+						}
+						if (value && (typeof value === "undefined" ? "undefined" : _type_of$6(value)) === "object" && !Array.isArray(value) && !isVariable(value) && isConditionalObjectValue(value, isChain)) {
+							var composed = {};
+							for (var inner in value) composed[inner === "default" ? chain : `${chain}:${inner}`] = value[inner];
+							entries.push([key2, composed]);
+							continue;
+						}
+						if (typeof value === "string" && value.includes(":")) continue;
+						entries.push([key2, { [chain]: value }]);
+					}
+				} catch (err) {
+					_didIteratorError1 = true;
+					_iteratorError1 = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion1 && _iterator1.return != null) _iterator1.return();
+					} finally {
+						if (_didIteratorError1) throw _iteratorError1;
+					}
+				}
+			}
 			compoundsByAnchor.set(anchor, entries);
 		}
 	} catch (err) {
@@ -16334,7 +16495,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 			if (conditionSource !== void 0) {
 				if (isHostStyleKey || isContextProgramKey) contributeVariantClauseValue(styleState, key8, val2, conditionSource, mergeStyle, originalVal, !isHostStyleKey);
 				else if (isHOC) {
-					var appended = appendFlatClause(viewProps[key8], conditionSource, val2);
+					var appended = appendFlatClause(styleState, viewProps[key8], conditionSource, val2);
 					if (appended !== void 0) viewProps[key8] = appended;
 				}
 				return;
@@ -16359,7 +16520,9 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 			}
 		});
 	};
-	forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contributeProp);
+	forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contributeProp, function(chain) {
+		return !!resolveClauseChain(styleState, chain, 0, chain.length);
+	});
 	var conditionalStates = styleState.flatStateKeys || null;
 	var usesSafeArea = !!styleState.flatUsesSafeArea;
 	if ((_styleState_flatMediaKeys = styleState.flatMediaKeys) === null || _styleState_flatMediaKeys === void 0 ? void 0 : _styleState_flatMediaKeys.size) {
@@ -16983,7 +17146,7 @@ var lifecycleHandler = {
 		return true;
 	}
 };
-function hasFlatModifier(props, config, modifiers, ctx) {
+function hasFlatModifier(props, config, modifiers, ctx, variants) {
 	var _ctx;
 	var scan = (_ctx = ctx).flatScan || (_ctx.flatScan = [
 		"",
@@ -16996,7 +17159,7 @@ function hasFlatModifier(props, config, modifiers, ctx) {
 		var isString = typeof value === "string";
 		if (isString ? value.indexOf(":") === -1 : !value || (typeof value === "undefined" ? "undefined" : _type_of$5(value)) !== "object") continue;
 		var property = config.shorthands[key] || key;
-		if (!(property in stylePropsAll) && property !== "transition") continue;
+		if (!(property in stylePropsAll) && property !== "transition" && !(variants && key in variants)) continue;
 		if (!isString) {
 			if (property === "transition") continue;
 			for (var chain in value) {
@@ -17038,7 +17201,7 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
 	var outputStyle = (_animationDriver_outputStyle = animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.outputStyle) !== null && _animationDriver_outputStyle !== void 0 ? _animationDriver_outputStyle : "css";
 	var curStateRef = stateRef.current;
 	if (!needsHydration && hasAnimationProp) curStateRef.hasAnimated = true;
-	var platformPseudo = Boolean(!isHOC && useAnimations && (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders) && ((_getPlatformDriver = getPlatformDriver()) === null || _getPlatformDriver === void 0 ? void 0 : _getPlatformDriver.pseudo) && hasFlatModifier(props, config, platformPseudoModifiers, curStateRef));
+	var platformPseudo = Boolean(!isHOC && useAnimations && (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders) && ((_getPlatformDriver = getPlatformDriver()) === null || _getPlatformDriver === void 0 ? void 0 : _getPlatformDriver.pseudo) && hasFlatModifier(props, config, platformPseudoModifiers, curStateRef, staticConfig.variants));
 	var willBeAnimatedClient = (function() {
 		return Boolean(!!((hasAnimationProp || platformPseudo) && !isHOC && useAnimations) || curStateRef.hasAnimated);
 	})();
@@ -17049,7 +17212,7 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
 	var presenceState = presence === null || presence === void 0 ? void 0 : presence[2];
 	var isExiting = (presenceState === null || presenceState === void 0 ? void 0 : presenceState.isPresent) === false;
 	var isEntering = (presenceState === null || presenceState === void 0 ? void 0 : presenceState.isPresent) === true && presenceState.initial !== false;
-	var hasEnterStyle = hasFlatModifier(props, config, enterModifier, curStateRef);
+	var hasEnterStyle = hasFlatModifier(props, config, enterModifier, curStateRef, staticConfig.variants);
 	var hasAnimationThatNeedsHydrate = hasAnimationProp && !isHydrated && ((animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.isReactNative) || inputStyle !== "css");
 	var initialState = !isHOC && (hasEnterStyle || isEntering || hasAnimationThatNeedsHydrate || disableClassName) ? hasEnterStyle || isEntering ? defaultComponentStateShouldEnter : defaultComponentState : defaultComponentStateMounted;
 	var disabled = isDisabled(props);

package/dist/test.native.cjs

@@ -5196,7 +5196,9 @@ function flushDirectStyles(state) {
 		var styleObject = atomics[property].styleObject;
 		var identifier = styleObject[2];
 		if (shouldInsertStyleRules(identifier)) {
-			updateRules(identifier, styleObject[4]);
+			var rules = styleObject[4].slice();
+			styleObject[4] = rules;
+			updateRules(identifier, rules);
 			state.flatRulesToInsert[identifier] = styleObject;
 		}
 	}
@@ -5769,10 +5771,18 @@ function _type_of$9(obj) {
 	"@swc/helpers - typeof";
 	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-function appendFlatClause(prev, conditionSource, value) {
-	if (prev != null && typeof prev !== "string" && typeof prev !== "number") return;
-	if (typeof value !== "string" && typeof value !== "number") return;
-	return prev == null ? `${conditionSource}:${value}` : `${prev} ${conditionSource}:${value}`;
+function appendFlatClause(state, prev, conditionSource, value) {
+	if (typeof value === "string" || typeof value === "number") {
+		if (prev == null) return `${conditionSource}:${value}`;
+		if (typeof prev === "string" || typeof prev === "number") return `${prev} ${conditionSource}:${value}`;
+	}
+	if (prev == null) return { [conditionSource]: value };
+	if (typeof prev === "string" && prev.includes(":")) return;
+	if ((typeof prev === "undefined" ? "undefined" : _type_of$9(prev)) === "object" && !Array.isArray(prev) && !isVariable(prev) && isConditionalStyleObject(state, prev)) return _objectSpread2(_objectSpread2({}, prev), {}, { [conditionSource]: value });
+	return {
+		default: prev,
+		[conditionSource]: value
+	};
 }
 var propMapperHandler = {
 	segment(ctx, start, end, isBase, valid, source, chainStart, chainEnd, chainValid) {
@@ -6034,7 +6044,7 @@ var resolveTokensAndVariants = function(key, value, styleProps, styleState, pare
 							var [_$key, val1, originalVal, conditionSource] = _step.value;
 							if (val1 == null) continue;
 							if (conditionSource !== void 0) {
-								var appended = appendFlatClause(res[_$key], conditionSource, val1);
+								var appended = appendFlatClause(styleState, res[_$key], conditionSource, val1);
 								if (appended === void 0) continue;
 								res[_$key] = appended;
 								continue;
@@ -6271,12 +6281,130 @@ function compoundMatcherMatches(expected, actual) {
 	});
 	return Object.is(expected, actual);
 }
-function compoundVariantMatches(compoundVariant, props) {
+function compoundMatcherMatchesPayload(expected, payload) {
+	if (Array.isArray(expected)) return expected.some(function(value) {
+		return compoundMatcherMatchesPayload(value, payload);
+	});
+	return typeof expected === "string" ? expected === payload : String(expected) === payload;
+}
+var compoundScanHandler = {
+	segment(ctx, start, end, isBase, valid, source, chainStart, chainEnd, chainValid) {
+		if (!valid || start >= end) return;
+		if (!compoundMatcherMatchesPayload(ctx[1], source.slice(start, end))) return;
+		if (isBase) {
+			ctx[4] = true;
+			return;
+		}
+		if (!chainValid) return;
+		var chain = source.slice(chainStart, chainEnd);
+		if (ctx[2](chain)) ctx[3].push(chain);
+	},
+	chain() {
+		return true;
+	},
+	error() {}
+};
+function matcherChains(expected, actual, isChain) {
+	if (typeof actual === "string" && actual.indexOf(":") !== -1) {
+		var scan = [
+			actual,
+			expected,
+			isChain,
+			[],
+			false
+		];
+		scanFlatValue(actual, compoundScanHandler, scan);
+		if (scan[4]) return [""];
+		return scan[3].length ? scan[3] : null;
+	}
+	if (actual && (typeof actual === "undefined" ? "undefined" : _type_of$7(actual)) === "object" && !Array.isArray(actual) && !isVariable(actual)) {
+		var conditional = Object.prototype.hasOwnProperty.call(actual, "default");
+		if (!conditional) for (var key in actual) {
+			conditional = key.length > 0 && isChain(key);
+			break;
+		}
+		if (conditional) {
+			var chains = [];
+			for (var key1 in actual) {
+				var payload = actual[key1];
+				if (payload == null || !compoundMatcherMatches(expected, payload)) continue;
+				if (key1 === "default") return [""];
+				if (isChain(key1)) chains.push(key1);
+			}
+			return chains.length ? chains : null;
+		}
+	}
+	return compoundMatcherMatches(expected, actual) ? [""] : null;
+}
+function isConditionalObjectValue(value, isChain) {
+	if (Object.prototype.hasOwnProperty.call(value, "default")) return true;
+	for (var key in value) return key.length > 0 && isChain(key);
+	return false;
+}
+var joinChains = function(a, b) {
+	if (!a) return b;
+	if (!b) return a;
+	var segments = a.split(":");
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = b.split(":")[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var segment = _step.value;
+			if (!segments.includes(segment)) segments.push(segment);
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+		} finally {
+			if (_didIteratorError) throw _iteratorError;
+		}
+	}
+	return segments.join(":");
+};
+function compoundVariantMatchChains(compoundVariant, props, isChain) {
+	var chains = [""];
 	for (var key in compoundVariant) {
 		if (key === "style") continue;
-		if (!compoundMatcherMatches(compoundVariant[key], props[key])) return false;
+		var keyChains = matcherChains(compoundVariant[key], props[key], isChain);
+		if (!keyChains) return null;
+		var next = [];
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = chains[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var a = _step.value;
+				var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+				try {
+					for (var _iterator1 = keyChains[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+						var b = _step1.value;
+						var joined = joinChains(a, b);
+						if (!next.includes(joined)) next.push(joined);
+					}
+				} catch (err) {
+					_didIteratorError1 = true;
+					_iteratorError1 = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion1 && _iterator1.return != null) _iterator1.return();
+					} finally {
+						if (_didIteratorError1) throw _iteratorError1;
+					}
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+			} finally {
+				if (_didIteratorError) throw _iteratorError;
+			}
+		}
+		chains = next;
 	}
-	return true;
+	return chains;
 }
 var styledDefaultsCache = /* @__PURE__ */ new WeakMap();
 function getStyledDefaults(staticConfig) {
@@ -6289,6 +6417,9 @@ function getStyledDefaults(staticConfig) {
 	}
 	return entries;
 }
+var maybeStyleProgram = function(value) {
+	return typeof value === "string" ? value.includes(":") : !!value && (typeof value === "undefined" ? "undefined" : _type_of$7(value)) === "object" && !Array.isArray(value) && !isVariable(value);
+};
 function contributeDisplacedStyledDefaults(styledDefaults, processedProps, shorthands, contribute) {
 	if (!styledDefaults) return;
 	for (var index = 0; index < styledDefaults.length; index++) {
@@ -6296,10 +6427,10 @@ function contributeDisplacedStyledDefaults(styledDefaults, processedProps, short
 		var styledValue = styledDefaults[index][1];
 		var propValue = processedProps[key];
 		if (!(key in stylePropsAll) && !(key in shorthands)) continue;
-		if (propValue !== void 0 && propValue !== styledValue && (typeof styledValue === "string" && styledValue.includes(":") || typeof propValue === "string" && propValue.includes(":"))) contribute(key, styledValue);
+		if (propValue !== void 0 && propValue !== styledValue && (maybeStyleProgram(styledValue) || maybeStyleProgram(propValue))) contribute(key, styledValue);
 	}
 }
-function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contribute) {
+function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contribute, isChain) {
 	var processedBaseStyle = staticConfig.baseStyle;
 	var compoundVariants = staticConfig.compoundVariants;
 	var styledDefaults = getStyledDefaults(staticConfig);
@@ -6319,7 +6450,8 @@ function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, con
 	try {
 		for (var _iterator = compoundVariants[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
 			var compoundVariant = _step.value;
-			if (!compoundVariantMatches(compoundVariant, processedProps)) continue;
+			var chains = compoundVariantMatchChains(compoundVariant, processedProps, isChain);
+			if (!chains) continue;
 			var { style } = compoundVariant;
 			if (!isPlainObject(style)) continue;
 			var anchor = -1;
@@ -6331,7 +6463,36 @@ function forEachPropInForwardOrder(processedProps, staticConfig, shorthands, con
 				}
 			}
 			var entries = compoundsByAnchor.get(anchor) || [];
-			for (var key2 in style) entries.push([key2, style[key2]]);
+			for (var key2 in style) {
+				var value = style[key2];
+				var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+				try {
+					for (var _iterator1 = chains[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+						var chain = _step1.value;
+						if (!chain) {
+							entries.push([key2, value]);
+							continue;
+						}
+						if (value && (typeof value === "undefined" ? "undefined" : _type_of$7(value)) === "object" && !Array.isArray(value) && !isVariable(value) && isConditionalObjectValue(value, isChain)) {
+							var composed = {};
+							for (var inner in value) composed[inner === "default" ? chain : `${chain}:${inner}`] = value[inner];
+							entries.push([key2, composed]);
+							continue;
+						}
+						if (typeof value === "string" && value.includes(":")) continue;
+						entries.push([key2, { [chain]: value }]);
+					}
+				} catch (err) {
+					_didIteratorError1 = true;
+					_iteratorError1 = err;
+				} finally {
+					try {
+						if (!_iteratorNormalCompletion1 && _iterator1.return != null) _iterator1.return();
+					} finally {
+						if (_didIteratorError1) throw _iteratorError1;
+					}
+				}
+			}
 			compoundsByAnchor.set(anchor, entries);
 		}
 	} catch (err) {
@@ -6556,7 +6717,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 			if (conditionSource !== void 0) {
 				if (isHostStyleKey || isContextProgramKey) contributeVariantClauseValue(styleState, key8, val2, conditionSource, mergeStyle, originalVal, !isHostStyleKey);
 				else if (isHOC) {
-					var appended = appendFlatClause(viewProps[key8], conditionSource, val2);
+					var appended = appendFlatClause(styleState, viewProps[key8], conditionSource, val2);
 					if (appended !== void 0) viewProps[key8] = appended;
 				}
 				return;
@@ -6581,7 +6742,9 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
 			}
 		});
 	};
-	forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contributeProp);
+	forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contributeProp, function(chain) {
+		return !!resolveClauseChain(styleState, chain, 0, chain.length);
+	});
 	var conditionalStates = styleState.flatStateKeys || null;
 	var usesSafeArea = !!styleState.flatUsesSafeArea;
 	if ((_styleState_flatMediaKeys = styleState.flatMediaKeys) === null || _styleState_flatMediaKeys === void 0 ? void 0 : _styleState_flatMediaKeys.size) {
@@ -7205,7 +7368,7 @@ var lifecycleHandler = {
 		return true;
 	}
 };
-function hasFlatModifier(props, config, modifiers, ctx) {
+function hasFlatModifier(props, config, modifiers, ctx, variants) {
 	var _ctx;
 	var scan = (_ctx = ctx).flatScan || (_ctx.flatScan = [
 		"",
@@ -7218,7 +7381,7 @@ function hasFlatModifier(props, config, modifiers, ctx) {
 		var isString = typeof value === "string";
 		if (isString ? value.indexOf(":") === -1 : !value || (typeof value === "undefined" ? "undefined" : _type_of$6(value)) !== "object") continue;
 		var property = config.shorthands[key] || key;
-		if (!(property in stylePropsAll) && property !== "transition") continue;
+		if (!(property in stylePropsAll) && property !== "transition" && !(variants && key in variants)) continue;
 		if (!isString) {
 			if (property === "transition") continue;
 			for (var chain in value) {
@@ -7260,7 +7423,7 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
 	var outputStyle = (_animationDriver_outputStyle = animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.outputStyle) !== null && _animationDriver_outputStyle !== void 0 ? _animationDriver_outputStyle : "css";
 	var curStateRef = stateRef.current;
 	if (!needsHydration && hasAnimationProp) curStateRef.hasAnimated = true;
-	var platformPseudo = Boolean(!isHOC && useAnimations && (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders) && ((_getPlatformDriver = getPlatformDriver()) === null || _getPlatformDriver === void 0 ? void 0 : _getPlatformDriver.pseudo) && hasFlatModifier(props, config, platformPseudoModifiers, curStateRef));
+	var platformPseudo = Boolean(!isHOC && useAnimations && (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders) && ((_getPlatformDriver = getPlatformDriver()) === null || _getPlatformDriver === void 0 ? void 0 : _getPlatformDriver.pseudo) && hasFlatModifier(props, config, platformPseudoModifiers, curStateRef, staticConfig.variants));
 	var willBeAnimatedClient = (function() {
 		return Boolean(!!((hasAnimationProp || platformPseudo) && !isHOC && useAnimations) || curStateRef.hasAnimated);
 	})();
@@ -7271,7 +7434,7 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
 	var presenceState = presence === null || presence === void 0 ? void 0 : presence[2];
 	var isExiting = (presenceState === null || presenceState === void 0 ? void 0 : presenceState.isPresent) === false;
 	var isEntering = (presenceState === null || presenceState === void 0 ? void 0 : presenceState.isPresent) === true && presenceState.initial !== false;
-	var hasEnterStyle = hasFlatModifier(props, config, enterModifier, curStateRef);
+	var hasEnterStyle = hasFlatModifier(props, config, enterModifier, curStateRef, staticConfig.variants);
 	var hasAnimationThatNeedsHydrate = hasAnimationProp && !isHydrated && ((animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.isReactNative) || inputStyle !== "css");
 	var initialState = !isHOC && (hasEnterStyle || isEntering || hasAnimationThatNeedsHydrate || disableClassName) ? hasEnterStyle || isEntering ? defaultComponentStateShouldEnter : defaultComponentState : defaultComponentStateMounted;
 	var disabled = isDisabled(props);

package/package.json

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