@tamagui/static 3.0.0-beta.807.1 → 3.0.0-beta.881.1

package/dist/esm/compilerHost.mjs

@@ -1,11 +1,17 @@
 import { collectLeaves, zeroRuleMessage, zeroThemeBoundaryMessage } from "@tamagui/compiler-core";
-import { StyleObjectIdentifier, StyleObjectProperty, StyleObjectRules, StyleObjectValue, stylePropsAll, stylePropsText, validStyles } from "@tamagui/helpers";
+import { StyleObjectIdentifier, StyleObjectProperty, StyleObjectRules, StyleObjectValue, stylePropsAll, stylePropsInput, stylePropsText, validStyles } from "@tamagui/helpers";
 import { ATTRIBUTES, DISPLAY_WEB_RESET, EVENTS, NATIVE_BACKING, NATIVE_BLOCK_DEFAULTS, NATIVE_ELEMENT_DEFAULTS, NATIVE_FLEX_DEFAULTS, NATIVE_INPUT_TYPES, NATIVE_PRIMITIVE_MODULE, TAGS, TAG_WEB_DEFAULTS } from "@tamagui/dom";
 import { createModifierRegistry, parseTransition, parseValue } from "@tamagui/style-grammar/tooling";
 import { isValidStyleKey } from "@tamagui/web";
 import { concatClassName } from "./extractor/concatClassName.mjs";
 import { requireTamaguiCore } from "./helpers/requireTamaguiCore.mjs";
 
+function createComponentRegistry(components, componentModules) {
+	return {
+		modulesById: new Map(componentModules.map((module) => [module.resolvedId, module.moduleName])),
+		componentsByModule: new Map(components.map((component) => [component.moduleName, component]))
+	};
+}
 const DOM_FRONTENDS = /* @__PURE__ */ new Set([
 	"tamagui",
 	"tamagui/dom",
@@ -214,6 +220,11 @@ const runtimeAnimationProps = /* @__PURE__ */ new Set([
 	"animatePresence",
 	"animatedBy"
 ]);
+const componentOnlyProps = /* @__PURE__ */ new Set([
+	"asChild",
+	"disableOptimization",
+	"themeInverse"
+]);
 const cssShorthandConflicts = {
 	background: [
 		"backgroundAttachment",
@@ -390,6 +401,12 @@ const cssShorthandConflicts = {
 	]
 };
 const cssConflictFamilies = [
+	/* @__PURE__ */ new Set(["width", "inlineSize"]),
+	/* @__PURE__ */ new Set(["minWidth", "minInlineSize"]),
+	/* @__PURE__ */ new Set(["maxWidth", "maxInlineSize"]),
+	/* @__PURE__ */ new Set(["height", "blockSize"]),
+	/* @__PURE__ */ new Set(["minHeight", "minBlockSize"]),
+	/* @__PURE__ */ new Set(["maxHeight", "maxBlockSize"]),
 	/* @__PURE__ */ new Set([
 		"marginInline",
 		"marginInlineEnd",
@@ -529,8 +546,8 @@ function nativeDOMProps(input, tag) {
 	const consume = (entry) => consumed.push(entry);
 	for (const entry of entries) {
 		const value = entrySource(input, entry);
-		const attribute = (Object.hasOwn(ATTRIBUTES, entry.name) ? ATTRIBUTES[entry.name] : void 0) ?? (entry.name.startsWith("data-") ? ATTRIBUTES["data-*"] : void 0);
-		const event = Object.hasOwn(EVENTS, entry.name) ? EVENTS[entry.name] : void 0;
+		const attribute = (entry.name in ATTRIBUTES ? ATTRIBUTES[entry.name] : void 0) ?? (entry.name.startsWith("data-") ? ATTRIBUTES["data-*"] : void 0);
+		const event = entry.name in EVENTS ? EVENTS[entry.name] : void 0;
 		if (event) {
 			if (event.native === "none") {
 				return {
@@ -701,6 +718,7 @@ function webDOMProps(input, tag) {
 function createTamaguiCompilerHost(options) {
 	const platform = options.target === "native" ? "native" : "web";
 	const core = requireTamaguiCore(platform);
+	const compilerVariantStyleResolver = core.styled(core.View, {}).staticConfig.variantStyleResolver;
 	const firstThemeName = Object.keys(options.tamaguiConfig.themes ?? {})[0] ?? "";
 	const firstTheme = options.tamaguiConfig.themes?.[firstThemeName] ?? {};
 	const theme = firstTheme;
@@ -723,6 +741,27 @@ function createTamaguiCompilerHost(options) {
 		}
 		return false;
 	};
+	const platformModifiersRegistered = modifierRegistry.get("web") === "platform" && modifierRegistry.get("native") === "platform";
+	const nativeClauseValue = (value) => {
+		if (typeof value !== "string" || !flatClausePattern.test(value)) {
+			return isClauseObjectValue(value) ? "live" : null;
+		}
+		if (!platformModifiersRegistered) return "live";
+		const parsed = parseValue(value, modifierRegistry);
+		if (!parsed.ok || parsed.value.clauses.length === 0) return "live";
+		let payload = parsed.value.base;
+		let matched = parsed.value.base !== null;
+		for (const clause of parsed.value.clauses) {
+			if (clause.modifiers.includes("web")) continue;
+			if (clause.modifiers.length !== 1 || clause.modifiers[0] !== "native") return "live";
+			payload = clause.payload;
+			matched = true;
+		}
+		return {
+			payload,
+			matched
+		};
+	};
 	const configuredAnimationDriver = options.tamaguiConfig.animations;
 	const configuredCssAnimationDriver = platform === "web" && configuredAnimationDriver?.outputStyle === "css" && !options.tamaguiConfig.animationDrivers ? configuredAnimationDriver : null;
 	const resolveStaticCssTransition = (value, transitionPresets) => {
@@ -761,9 +800,21 @@ function createTamaguiCompilerHost(options) {
 		}
 		return resolved.join(" ");
 	};
-	const modulesById = new Map(options.componentModules.map((module) => [module.resolvedId, module.moduleName]));
-	const componentsByModule = new Map(options.components.map((component) => [component.moduleName, component]));
-	const normalizeStaticConfig = (staticConfig) => staticConfig.styleFrontend?.normalizeStaticConfig?.(staticConfig, options.tamaguiConfig) ?? staticConfig;
+	const { modulesById, componentsByModule } = options.registry ?? createComponentRegistry(options.components, options.componentModules);
+	const normalizedStyleConfigs = /* @__PURE__ */ new WeakMap();
+	const normalizeStaticConfig = (staticConfig) => {
+		if (!staticConfig.styleFrontend) return staticConfig;
+		const normalized = core.getStyleStaticConfig(staticConfig, options.tamaguiConfig);
+		const result = {
+			...staticConfig,
+			baseStyle: normalized.baseStyle,
+			defaultProps: normalized.defaultProps,
+			variants: normalized.variants,
+			passthroughClassName: normalized.passthroughClassName
+		};
+		normalizedStyleConfigs.set(result, normalized);
+		return result;
+	};
 	const directStaticConfig = (element) => {
 		const identity = element.component.provenance;
 		if (!identity) return null;
@@ -779,7 +830,7 @@ function createTamaguiCompilerHost(options) {
 	const domStaticConfig = (element) => {
 		const identity = element.component.provenance;
 		const tag = element.component.name;
-		if (identity?.importedName !== "html" || !DOM_FRONTENDS.has(identity.specifier) || !Object.hasOwn(TAGS, tag)) {
+		if (identity?.importedName !== "html" || !DOM_FRONTENDS.has(identity.specifier) || !(tag in TAGS)) {
 			return null;
 		}
 		const row = TAGS[tag];
@@ -805,7 +856,7 @@ function createTamaguiCompilerHost(options) {
 				isInput: row.backing === "textinput",
 				validStyles: {
 					...validStyles,
-					...stylePropsText
+					...row.backing === "textinput" ? stylePropsInput : stylePropsText
 				},
 				defaultProps: {
 					...base.defaultProps,
@@ -828,42 +879,43 @@ function createTamaguiCompilerHost(options) {
 			bailouts: []
 		});
 		if (!base || !staticObject(definition.options.value)) return null;
-		const { variants, defaultVariants, compoundVariants, displayName, context, contextProps, ...defaultProps } = definition.options.value;
+		const { variants, defaultVariants, displayName, context, contextProps, ...defaultProps } = definition.options.value;
 		const baseClassName = definition.baseClassName?.kind === "static" && typeof definition.baseClassName.value === "string" ? definition.baseClassName.value : void 0;
+		const localStaticConfig = {
+			...base.staticConfig,
+			variants: {
+				...base.staticConfig.variants,
+				...variants
+			},
+			defaultProps: {
+				...base.staticConfig.defaultProps,
+				...defaultProps,
+				...defaultVariants
+			},
+			defaultVariants,
+			baseClassName: [base.staticConfig.baseClassName, baseClassName].filter(Boolean).join(" "),
+			context: context ?? base.staticConfig.context,
+			contextProps: context ? contextProps : contextProps ?? base.staticConfig.contextProps
+		};
+		localStaticConfig.variantStyleResolver = compilerVariantStyleResolver;
 		return {
 			key: componentKey(definition.id, definition.name),
 			displayName: displayName || base.displayName,
-			staticConfig: normalizeStaticConfig({
-				...base.staticConfig,
-				variants: {
-					...base.staticConfig.variants,
-					...variants
-				},
-				compoundVariants: [...base.staticConfig.compoundVariants ?? [], ...compoundVariants ?? []],
-				defaultProps: {
-					...base.staticConfig.defaultProps,
-					...defaultProps,
-					...defaultVariants
-				},
-				defaultVariants,
-				baseClassName: [base.staticConfig.baseClassName, baseClassName].filter(Boolean).join(" "),
-				context: context ?? base.staticConfig.context,
-				contextProps: context ? contextProps : contextProps ?? base.staticConfig.contextProps
-			})
+			staticConfig: normalizeStaticConfig(localStaticConfig)
 		};
 	};
 	const resolve = (element, styledDefinition) => {
 		const dom = domStaticConfig(element);
 		const resolved = dom ?? styledStaticConfig(styledDefinition) ?? directStaticConfig(element);
 		if (!resolved) return null;
-		const defaultProps = core.getDefaultProps(resolved.staticConfig) ?? {};
+		const defaultProps = resolved.staticConfig.defaultProps ?? {};
 		return {
 			key: resolved.key,
 			canFlatten: resolved.staticConfig.acceptsClassName !== false && !resolved.staticConfig.neverFlatten && !resolved.staticConfig.context,
 			staticConfig: resolved.staticConfig,
 			displayName: resolved.displayName,
 			...dom && { domTag: dom.tag },
-			partialRuntimeSafe: !dom && !styledDefinition && Object.keys(defaultProps).length === 0 && !resolved.staticConfig.defaultVariants && !resolved.staticConfig.baseClassName && !resolved.staticConfig.baseStyle && (resolved.staticConfig.compoundVariants?.length ?? 0) === 0
+			partialRuntimeSafe: !dom && !styledDefinition && Object.keys(defaultProps).length === 0 && !resolved.staticConfig.defaultVariants && !resolved.staticConfig.baseClassName && !resolved.staticConfig.baseStyle
 		};
 	};
 	const isStyleProp = (name, component) => {
@@ -884,8 +936,8 @@ function createTamaguiCompilerHost(options) {
 	const canLowerConditionalStyleProp = (name, component) => isStyleProp(name, component) && !runtimeOnlyStyleProps.has(name);
 	const isInvalidHostStyleProp = (name, component) => {
 		const staticConfig = component.staticConfig;
-		const validStyles$1 = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStyles);
-		return name in stylePropsAll && !isValidStyleKey(name, validStyles$1, staticConfig.accept);
+		const validStyles$1 = staticConfig.validStyles || (staticConfig.isInput ? stylePropsInput : staticConfig.isText ? stylePropsText : validStyles);
+		return name in stylePropsAll && !isValidStyleKey(name, validStyles$1);
 	};
 	const directStyleName = (name, component) => {
 		if (compilerStyleProps.has(name) || name === "style") {
@@ -906,13 +958,13 @@ function createTamaguiCompilerHost(options) {
 		}
 		process.env.TAMAGUI_TARGET = platform;
 		try {
-			core.prepareStyleStaticConfig(staticConfig);
 			return core.getSplitStyles(props, staticConfig, theme, firstThemeName, componentState, {
+				isStatic: true,
 				resolveValues: platform === "native" ? "except-theme" : "variable",
 				noClass: platform === "native",
 				isAnimated: false,
 				displayName
-			}, void 0, void 0, void 0, void 0, void 0, void 0, animationDriver);
+			}, void 0, void 0, void 0, void 0, void 0, void 0, animationDriver, normalizedStyleConfigs.get(staticConfig));
 		} finally {
 			if (previousStatic === void 0) delete process.env.IS_STATIC;
 			else process.env.IS_STATIC = previousStatic;
@@ -925,7 +977,6 @@ function createTamaguiCompilerHost(options) {
 		baseStyle: void 0,
 		defaultProps: {},
 		defaultVariants: void 0,
-		compoundVariants: [],
 		variants: {}
 	});
 	const styleOwners = (name, value, staticConfig) => {
@@ -1031,6 +1082,9 @@ function createTamaguiCompilerHost(options) {
 			if (!options.disablePartialExtraction && valueKind === "conditional" && canLowerConditionalStyleProp(name, component)) {
 				return true;
 			}
+			if (component.staticConfig.resolvers?.length) {
+				return false;
+			}
 			return !options.disablePartialExtraction && (platform === "web" && !!directStyleName(name, component) || platform === "native" && directStyleName(name, component) === "opacity");
 		},
 		developmentDebugInstrumentation,
@@ -1061,9 +1115,30 @@ function createTamaguiCompilerHost(options) {
 					props[entry.name] = entry.value.value;
 				}
 			}
-			const disableOptimizationEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "disableOptimization");
-			if (disableOptimizationEntry || Object.hasOwn(props, "disableOptimization")) {
-				return bailout(input, "local/unsupported-target", "disableOptimization keeps the component on the runtime path", disableOptimizationEntry?.span);
+			if (component.staticConfig.resolvers?.length) {
+				const unresolvedProps = input.element.entries.filter((entry) => entry.kind === "prop" && entry.value.kind !== "static");
+				const onlyStaticBranchConditional = unresolvedProps.length === 1 && unresolvedProps[0]?.kind === "prop" && unresolvedProps[0].value.kind === "conditional" && canLowerConditionalStyleProp(unresolvedProps[0].name, component);
+				const unresolvedProp = onlyStaticBranchConditional ? void 0 : unresolvedProps[0];
+				if (unresolvedProp?.kind === "prop") {
+					return bailout(input, "local/dynamic-style-value", `Component resolver prop ${unresolvedProp.name} could not be evaluated`, unresolvedProp.span, void 0, unresolvedProp.name);
+				}
+			}
+			const componentOnlyProp = (name) => {
+				let span;
+				let unknown = false;
+				for (const entry of input.element.entries) {
+					if (entry.kind !== "prop" || entry.name !== name) continue;
+					span = entry.span;
+					if (entry.value.kind !== "static") unknown = true;
+				}
+				return {
+					unknown,
+					span
+				};
+			};
+			const disableOptimization = componentOnlyProp("disableOptimization");
+			if (disableOptimization.unknown || props.disableOptimization) {
+				return bailout(input, "local/unsupported-target", "disableOptimization keeps the component on the runtime path", disableOptimization.span);
 			}
 			if (component.domTag && props.hidden) props.display = "none";
 			if (component.domTag && platform === "native") {
@@ -1086,7 +1161,7 @@ function createTamaguiCompilerHost(options) {
 					return bailout(input, "local/unsupported-target", `${runtimeEvent} requires Tamagui runtime event mapping`);
 				}
 			}
-			const animationDefaultProps = core.getDefaultProps(component.staticConfig) ?? {};
+			const animationDefaultProps = component.staticConfig.defaultProps ?? {};
 			const animationProps = core.mergeProps(animationDefaultProps, props);
 			const animationNames = /* @__PURE__ */ new Set([...input.element.entries.flatMap((entry) => entry.kind === "prop" && runtimeAnimationProps.has(entry.name) ? [entry.name] : []), ...Object.keys(animationProps).filter((name) => runtimeAnimationProps.has(name) && animationProps[name] !== void 0)]);
 			const animateOnlyEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "animateOnly");
@@ -1130,7 +1205,7 @@ function createTamaguiCompilerHost(options) {
 					const expression = input.source.slice(entry.value.span.start, entry.value.span.end);
 					if (resolvedCssTransition !== null && (name === "opacity" || name === "scale")) {
 						property = name === "opacity" ? `opacity: (${expression})` : `transform: "scale(" + (${expression}) + ")"`;
-					} else if (entry.value.kind === "bailout" && owners.size === 1 && owners.has(name)) {
+					} else if (entry.value.kind === "bailout" && owners.has(name)) {
 						const dynamic = entry.value.dynamic;
 						if (dynamic?.type === "number") {
 							property = `${JSON.stringify(name)}: (${expression})`;
@@ -1168,16 +1243,19 @@ function createTamaguiCompilerHost(options) {
 				}
 			}
 			const supportsWebConditionalClasses = platform === "web" && !options.disablePartialExtraction && (input.element.form === "jsx" || input.element.propsSpan !== null) && dynamicHostStyleProperties === null && dynamicStyleEntries.length > 0 && dynamicStyleEntries.every((entry) => entry.kind === "prop" && entry.value.kind === "conditional" && canLowerConditionalStyleProp(entry.name, component));
-			if ("theme" in props || "themeInverse" in props) {
-				const themeProp = "theme" in props ? "theme" : "themeInverse";
+			const themeEntry = componentOnlyProp("theme");
+			const themeInverseEntry = componentOnlyProp("themeInverse");
+			const themeBoundary = themeEntry.unknown || "theme" in props;
+			if (themeBoundary || themeInverseEntry.unknown || props.themeInverse) {
+				const themeProp = themeBoundary ? "theme" : "themeInverse";
 				return bailout(input, "local/unsupported-target", "Theme boundary candidates remain on the runtime path", input.element.span, {
 					rule: 4,
 					message: zeroThemeBoundaryMessage(input.element.component.name, themeProp)
 				});
 			}
-			const asChildEntry = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "asChild");
-			if (asChildEntry || Object.hasOwn(props, "asChild")) {
-				return bailout(input, "local/unsupported-target", "asChild renders a Slot, not a host view", asChildEntry?.span);
+			const asChild = componentOnlyProp("asChild");
+			if (asChild.unknown || props.asChild) {
+				return bailout(input, "local/unsupported-target", "asChild renders a Slot, not a host view", asChild.span);
 			}
 			if (platform === "native" && ("group" in props || "container" in props || "containerName" in props || "containerType" in props)) {
 				return bailout(input, "local/unsupported-target", "Native group and container providers remain on the runtime path");
@@ -1276,12 +1354,17 @@ function createTamaguiCompilerHost(options) {
 				const entry = dynamicStyleEntries[0];
 				return bailout(input, "local/dynamic-style-value", `Style prop ${entry.kind === "prop" ? entry.name : "unknown"} could not be safely extracted`, entry.span);
 			}
-			const staticDefaultProps = core.getDefaultProps(component.staticConfig) ?? {};
+			const resolvedStyleStaticConfig = core.getStyleStaticConfig(component.staticConfig, core.getConfig());
+			const staticDefaultProps = resolvedStyleStaticConfig.defaultProps ?? {};
 			const defaultProps = platform === "web" && !component.staticConfig.isText && options.tamaguiConfig.settings.defaultPosition === "relative" && staticDefaultProps.position === void 0 ? core.mergeProps({ position: "relative" }, staticDefaultProps) : staticDefaultProps;
 			let completeProps = core.mergeProps(defaultProps, props);
 			if (platform === "native" && component.domTag && props.display === "flex") {
 				completeProps = core.mergeProps(core.mergeProps(defaultProps, NATIVE_FLEX_DEFAULTS), props);
 			}
+			const domStyleProgram = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "style" && entry.value.kind === "dom-style");
+			if (platform === "native" && !component.domTag && domStyleProgram) {
+				return bailout(input, "local/unsupported-target", "Native style() pieces remain on the runtime path");
+			}
 			const propsForConditional = (target, value) => {
 				const branchProps = {};
 				for (const entry of input.element.entries) {
@@ -1309,6 +1392,14 @@ function createTamaguiCompilerHost(options) {
 					}
 				}
 				const branchCompleteProps = platform === "native" && component.domTag && branchProps.display === "flex" ? core.mergeProps(core.mergeProps(defaultProps, NATIVE_FLEX_DEFAULTS), branchProps) : core.mergeProps(defaultProps, branchProps);
+				if (platform === "native") {
+					for (const [name, value2] of Object.entries(branchCompleteProps)) {
+						const clause = isStyleProp(name, component) ? nativeClauseValue(value2) : null;
+						if (clause === null || clause === "live") continue;
+						if (clause.matched) branchCompleteProps[name] = clause.payload;
+						else delete branchCompleteProps[name];
+					}
+				}
 				return {
 					branchProps,
 					branchCompleteProps
@@ -1317,10 +1408,30 @@ function createTamaguiCompilerHost(options) {
 			if (platform === "native") {
 				const isClauseValue = (name, value) => isStyleProp(name, component) && (typeof value === "string" && flatClausePattern.test(value) || isClauseObjectValue(value));
 				const defaultVariants = component.staticConfig.defaultVariants ?? {};
-				const carriesClause = Object.entries(completeProps).some(([name, value]) => isClauseValue(name, value)) || Object.entries(component.staticConfig.variants ?? {}).some(([variantName, definitions]) => (completeProps[variantName] !== void 0 || defaultVariants[variantName] !== void 0) && staticObject(definitions) && Object.values(definitions).some((definition) => staticObject(definition) && Object.entries(definition).some(([name, value]) => isClauseValue(name, value)))) || (component.staticConfig.compoundVariants ?? []).some((compound) => staticObject(compound) && staticObject(compound.style) && Object.entries(compound.style).some(([name, value]) => isClauseValue(name, value)));
-				if (carriesClause) {
+				const definitionCarriesClause = Object.entries(resolvedStyleStaticConfig.baseStyle ?? {}).some(([name, value]) => isClauseValue(name, value)) || Object.entries(component.staticConfig.variants ?? {}).some(([variantName, definitions]) => (completeProps[variantName] !== void 0 || defaultVariants[variantName] !== void 0) && staticObject(definitions) && Object.values(definitions).some((definition) => staticObject(definition) && Object.entries(definition).some(([name, value]) => isClauseValue(name, value))));
+				if (definitionCarriesClause) {
 					return bailout(input, "local/unsupported-target", "Native conditional value programs remain on the runtime path");
 				}
+				const reducedProps = {};
+				for (const [name, value] of Object.entries(completeProps)) {
+					const clause = isStyleProp(name, component) ? nativeClauseValue(value) : null;
+					if (clause === "live") {
+						return bailout(input, "local/unsupported-target", "Native conditional value programs remain on the runtime path");
+					}
+					if (clause === null) {
+						reducedProps[name] = value;
+						continue;
+					}
+					if (clause.matched) reducedProps[name] = clause.payload;
+				}
+				completeProps = reducedProps;
+				for (const entry of dynamicStyleEntries) {
+					if (entry.value.kind !== "conditional") continue;
+					for (const leaf of collectLeaves(entry.value.tree)) {
+						if (nativeClauseValue(leaf.value) !== "live") continue;
+						return bailout(input, "local/unsupported-target", "Native conditional value programs remain on the runtime path");
+					}
+				}
 			}
 			const split = resolveSplitStyles(completeProps, component.staticConfig, cssAnimationDriver, component.displayName);
 			if (!split) {
@@ -1332,7 +1443,6 @@ function createTamaguiCompilerHost(options) {
 					message: zeroRuleMessage(5, { detail: `an enter or exit style program on ${input.element.component.name}` })
 				});
 			}
-			const domStyleProgram = input.element.entries.find((entry) => entry.kind === "prop" && entry.name === "style" && entry.value.kind === "dom-style");
 			const flatTag = component.domTag ?? (typeof props.render === "string" ? props.render : typeof defaultProps.render === "string" ? defaultProps.render : component.staticConfig.isText ? "span" : "div");
 			const tagEdits = [input.element.component.span, input.element.component.closingSpan].filter((span) => !!span).map((span) => ({
 				start: span.start,
@@ -1340,7 +1450,7 @@ function createTamaguiCompilerHost(options) {
 				content: input.element.form === "jsx" ? flatTag : JSON.stringify(flatTag),
 				origin: span
 			}));
-			const isPropIgnored = (name) => isStyleProp(name, component) || isInvalidHostStyleProp(name, component);
+			const isPropIgnored = (name) => isStyleProp(name, component) || isInvalidHostStyleProp(name, component) || componentOnlyProps.has(name);
 			const spreadReplacement = (form, entry) => spreadNonStyleReplacement(form, entry, isPropIgnored, (name, value) => {
 				if (platform !== "web") return [name, value];
 				if (name === "testID") return ["data-testid", value];
@@ -1350,7 +1460,7 @@ function createTamaguiCompilerHost(options) {
 				}
 				return [name, value];
 			});
-			let styleEntries = input.element.entries.filter((entry) => entry.kind === "prop" && (isStyleProp(entry.name, component) || isInvalidHostStyleProp(entry.name, component)) || entry.kind === "spread" && entry.value.kind === "static" && staticObject(entry.value.value) && Object.keys(entry.value.value).some((name) => isStyleProp(name, component) || isInvalidHostStyleProp(name, component)));
+			let styleEntries = input.element.entries.filter((entry) => entry.kind === "prop" && isPropIgnored(entry.name) || entry.kind === "spread" && entry.value.kind === "static" && staticObject(entry.value.value) && Object.keys(entry.value.value).some(isPropIgnored));
 			let invalidHostStyle;
 			for (const entry of input.element.entries) {
 				if (entry.kind === "prop") {
@@ -2018,7 +2128,7 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 		}
 	};
 }
-function bailout(input, code, message, span = input.element.span, zero) {
+function bailout(input, code, message, span = input.element.span, zero, prop) {
 	return {
 		ok: false,
 		bailout: {
@@ -2027,6 +2137,7 @@ function bailout(input, code, message, span = input.element.span, zero) {
 			message,
 			span,
 			component: input.element.component.name,
+			...prop && { prop },
 			...zero && {
 				zeroRule: zero.rule,
 				zeroMessage: zero.message
@@ -2035,5 +2146,5 @@ function bailout(input, code, message, span = input.element.span, zero) {
 	};
 }
 
-export { createTamaguiCompilerHost };
+export { createComponentRegistry, createTamaguiCompilerHost };
 //# sourceMappingURL=compilerHost.mjs.map