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

package/dist/esm/views/Text.mjs

@@ -1,37 +1,44 @@
 import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
 import { createComponent } from "../createComponent.mjs";
-import { setComponentDisplayName } from "../helpers/componentDisplayName.mjs";
+import { styledDynamic } from "../helpers/styledDynamic.mjs";
 
-const ellipsisStyle = {
-	maxWidth: "100%",
-	overflow: "hidden",
-	textOverflow: "ellipsis",
-	whiteSpace: "nowrap"
-};
 const textStaticConfig = {
 	acceptsClassName: true,
 	isText: true,
 	defaultProps: void 0,
 	inlineProps: /* @__PURE__ */ new Set(["maxFontSizeMultiplier"]),
 	variants: {
-		numberOfLines: {
-			1: ellipsisStyle,
-			number: (numberOfLines) => numberOfLines >= 1 ? {
+		numberOfLines: styledDynamic((numberOfLines) => {
+			if (numberOfLines === 1) return {
+				maxWidth: "100%",
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			};
+			return numberOfLines >= 1 ? {
 				maxWidth: "100%",
 				WebkitLineClamp: numberOfLines,
 				WebkitBoxOrient: "vertical",
 				display: "-webkit-box",
 				overflow: "hidden"
-			} : null
-		},
-		ellipsis: { true: ellipsisStyle }
+			} : null;
+		}),
+		ellipsis: { true: {
+			maxWidth: "100%",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
+		} }
 	},
 	validStyles: {
 		...validStyles,
 		...stylePropsTextOnly
 	}
 };
-const Text = setComponentDisplayName(createComponent(textStaticConfig), "Text");
+const Text = createComponent({
+	...textStaticConfig,
+	displayName: "Text"
+});
 
 export { Text, textStaticConfig };
 //# sourceMappingURL=Text.mjs.map

package/dist/esm/views/Text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":[],"sources":["esm/views/Text.js"],"sourcesContent":["import { stylePropsTextOnly, validStyles } from \"@tamagui/helpers\";\nimport { createComponent } from \"../createComponent\";\nimport { setComponentDisplayName } from \"../helpers/componentDisplayName\";\n\nconst ellipsisStyle = {\n\tmaxWidth: \"100%\",\n\toverflow: \"hidden\",\n\ttextOverflow: \"ellipsis\",\n\twhiteSpace: \"nowrap\"\n};\nconst textStaticConfig = {\n\tacceptsClassName: true,\n\tisText: true,\n\tdefaultProps: void 0,\n\tinlineProps: /* @__PURE__ */ new Set([\"maxFontSizeMultiplier\"]),\n\tvariants: {\n\t\tnumberOfLines: {\n\t\t\t1: ellipsisStyle,\n\t\t\tnumber: (numberOfLines) => numberOfLines >= 1 ? {\n\t\t\t\tmaxWidth: \"100%\",\n\t\t\t\tWebkitLineClamp: numberOfLines,\n\t\t\t\tWebkitBoxOrient: \"vertical\",\n\t\t\t\tdisplay: \"-webkit-box\",\n\t\t\t\toverflow: \"hidden\"\n\t\t\t} : null\n\t\t},\n\t\tellipsis: { true: ellipsisStyle }\n\t},\n\tvalidStyles: {\n\t\t...validStyles,\n\t\t...stylePropsTextOnly\n\t}\n};\nconst Text = setComponentDisplayName(createComponent(textStaticConfig), \"Text\");\n\nexport { Text, textStaticConfig };"],"mappings":";;;;;AAIA,MAAM,gBAAgB;CACrB,UAAU;CACV,UAAU;CACV,cAAc;CACd,YAAY;AACb;AACA,MAAM,mBAAmB;CACxB,kBAAkB;CAClB,QAAQ;CACR,cAAc,KAAK;CACnB,6BAA6B,IAAI,IAAI,CAAC,uBAAuB,CAAC;CAC9D,UAAU;EACT,eAAe;GACd,GAAG;GACH,SAAS,kBAAkB,iBAAiB,IAAI;IAC/C,UAAU;IACV,iBAAiB;IACjB,iBAAiB;IACjB,SAAS;IACT,UAAU;GACX,IAAI;EACL;EACA,UAAU,EAAE,MAAM,cAAc;CACjC;CACA,aAAa;EACZ,GAAG;EACH,GAAG;CACJ;AACD;AACA,MAAM,OAAO,wBAAwB,gBAAgB,gBAAgB,GAAG,MAAM"}
+{"version":3,"file":"Text.js","names":[],"sources":["esm/views/Text.js"],"sourcesContent":["import { stylePropsTextOnly, validStyles } from \"@tamagui/helpers\";\nimport { createComponent } from \"../createComponent\";\nimport { styledDynamic } from \"../helpers/styledDynamic\";\n\nconst textStaticConfig = {\n\tacceptsClassName: true,\n\tisText: true,\n\tdefaultProps: void 0,\n\tinlineProps: /* @__PURE__ */ new Set([\"maxFontSizeMultiplier\"]),\n\tvariants: {\n\t\tnumberOfLines: styledDynamic((numberOfLines) => {\n\t\t\tif (numberOfLines === 1) return {\n\t\t\t\tmaxWidth: \"100%\",\n\t\t\t\toverflow: \"hidden\",\n\t\t\t\ttextOverflow: \"ellipsis\",\n\t\t\t\twhiteSpace: \"nowrap\"\n\t\t\t};\n\t\t\treturn numberOfLines >= 1 ? {\n\t\t\t\tmaxWidth: \"100%\",\n\t\t\t\tWebkitLineClamp: numberOfLines,\n\t\t\t\tWebkitBoxOrient: \"vertical\",\n\t\t\t\tdisplay: \"-webkit-box\",\n\t\t\t\toverflow: \"hidden\"\n\t\t\t} : null;\n\t\t}),\n\t\tellipsis: { true: {\n\t\t\tmaxWidth: \"100%\",\n\t\t\toverflow: \"hidden\",\n\t\t\ttextOverflow: \"ellipsis\",\n\t\t\twhiteSpace: \"nowrap\"\n\t\t} }\n\t},\n\tvalidStyles: {\n\t\t...validStyles,\n\t\t...stylePropsTextOnly\n\t}\n};\nconst Text = createComponent({\n\t...textStaticConfig,\n\tdisplayName: \"Text\"\n});\n\nexport { Text, textStaticConfig };"],"mappings":";;;;;AAIA,MAAM,mBAAmB;CACxB,kBAAkB;CAClB,QAAQ;CACR,cAAc,KAAK;CACnB,6BAA6B,IAAI,IAAI,CAAC,uBAAuB,CAAC;CAC9D,UAAU;EACT,eAAe,eAAe,kBAAkB;GAC/C,IAAI,kBAAkB,GAAG,OAAO;IAC/B,UAAU;IACV,UAAU;IACV,cAAc;IACd,YAAY;GACb;GACA,OAAO,iBAAiB,IAAI;IAC3B,UAAU;IACV,iBAAiB;IACjB,iBAAiB;IACjB,SAAS;IACT,UAAU;GACX,IAAI;EACL,CAAC;EACD,UAAU,EAAE,MAAM;GACjB,UAAU;GACV,UAAU;GACV,cAAc;GACd,YAAY;EACb,EAAE;CACH;CACA,aAAa;EACZ,GAAG;EACH,GAAG;CACJ;AACD;AACA,MAAM,OAAO,gBAAgB;CAC5B,GAAG;CACH,aAAa;AACd,CAAC"}

package/dist/esm/views/Text.native.js

@@ -1,6 +1,5 @@
 import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
 import { createComponent } from "../createComponent.native.js";
-import { setComponentDisplayName } from "../helpers/componentDisplayName.native.js";
 
 var textStaticConfig = {
 	acceptsClassName: true,
@@ -16,7 +15,10 @@ var textStaticConfig = {
 		...stylePropsTextOnly
 	}
 };
-var Text = setComponentDisplayName(createComponent(textStaticConfig), "Text");
+var Text = createComponent({
+	...textStaticConfig,
+	displayName: "Text"
+});
 
 export { Text, textStaticConfig };
 //# sourceMappingURL=Text.native.js.map

package/dist/esm/views/Text.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.native.js","names":[],"sources":["esm/views/Text.native.js"],"sourcesContent":["import { stylePropsTextOnly, validStyles } from \"@tamagui/helpers\";\nimport { createComponent } from \"../createComponent\";\nimport { setComponentDisplayName } from \"../helpers/componentDisplayName\";\n\nvar textStaticConfig = {\n\tacceptsClassName: true,\n\tisText: true,\n\tdefaultProps: { suppressHighlighting: true },\n\tinlineProps: /* @__PURE__ */ new Set([\"maxFontSizeMultiplier\"]),\n\tvariants: { ellipsis: { true: {\n\t\tnumberOfLines: 1,\n\t\tlineBreakMode: \"clip\"\n\t} } },\n\tvalidStyles: {\n\t\t...validStyles,\n\t\t...stylePropsTextOnly\n\t}\n};\nvar Text = setComponentDisplayName(createComponent(textStaticConfig), \"Text\");\n\nexport { Text, textStaticConfig };"],"mappings":";;;;;AAIA,IAAI,mBAAmB;CACtB,kBAAkB;CAClB,QAAQ;CACR,cAAc,EAAE,sBAAsB,KAAK;CAC3C,6BAA6B,IAAI,IAAI,CAAC,uBAAuB,CAAC;CAC9D,UAAU,EAAE,UAAU,EAAE,MAAM;EAC7B,eAAe;EACf,eAAe;CAChB,EAAE,EAAE;CACJ,aAAa;EACZ,GAAG;EACH,GAAG;CACJ;AACD;AACA,IAAI,OAAO,wBAAwB,gBAAgB,gBAAgB,GAAG,MAAM"}
+{"version":3,"file":"Text.native.js","names":[],"sources":["esm/views/Text.native.js"],"sourcesContent":["import { stylePropsTextOnly, validStyles } from \"@tamagui/helpers\";\nimport { createComponent } from \"../createComponent\";\n\nvar textStaticConfig = {\n\tacceptsClassName: true,\n\tisText: true,\n\tdefaultProps: { suppressHighlighting: true },\n\tinlineProps: /* @__PURE__ */ new Set([\"maxFontSizeMultiplier\"]),\n\tvariants: { ellipsis: { true: {\n\t\tnumberOfLines: 1,\n\t\tlineBreakMode: \"clip\"\n\t} } },\n\tvalidStyles: {\n\t\t...validStyles,\n\t\t...stylePropsTextOnly\n\t}\n};\nvar Text = createComponent({\n\t...textStaticConfig,\n\tdisplayName: \"Text\"\n});\n\nexport { Text, textStaticConfig };"],"mappings":";;;;AAGA,IAAI,mBAAmB;CACtB,kBAAkB;CAClB,QAAQ;CACR,cAAc,EAAE,sBAAsB,KAAK;CAC3C,6BAA6B,IAAI,IAAI,CAAC,uBAAuB,CAAC;CAC9D,UAAU,EAAE,UAAU,EAAE,MAAM;EAC7B,eAAe;EACf,eAAe;CAChB,EAAE,EAAE;CACJ,aAAa;EACZ,GAAG;EACH,GAAG;CACJ;AACD;AACA,IAAI,OAAO,gBAAgB;CAC1B,GAAG;CACH,aAAa;AACd,CAAC"}

package/dist/esm/views/Theme.mjs

@@ -53,10 +53,10 @@ function getThemedChildren(themeState, children, props, isRoot = false, stateRef
 	if (requiresExtraWrapper || themeState.name === "dark" || themeState.name === "light") state.hasEverThemed = "wrapped";
 	if (shallow) if (!themeState.parentId) {} else {
 		const parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);
-		if (!parentState) throw new Error(formatDiagnostic("‼️010", "Theme", "parent theme state is missing for shallow rendering", "Keep <Theme shallow> inside its mounted parent Theme", "name,parentId", {
+		if (!parentState) throw new Error(process.env.NODE_ENV !== "production" ? formatDiagnostic("‼️010", "Theme", "parent theme state is missing for shallow rendering", "Keep <Theme shallow> inside its mounted parent Theme", "name,parentId", {
 			name: themeState.name,
 			parentId: themeState.parentId
-		}));
+		}) : "❌ Error 014");
 		children = Children.toArray(children).map((child) => {
 			return isValidElement(child) ? passThrough ? child : cloneElement(child, void 0, /* @__PURE__ */ jsx(Theme, {
 				name: parentState.name,

package/dist/esm/views/Theme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.js","names":[],"sources":["esm/views/Theme.js"],"sourcesContent":["import { createRefComponent } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { getThemeClassNames, reservedThemeProps } from \"@tamagui/helpers\";\nimport React, { Children, cloneElement, isValidElement, useRef } from \"react\";\nimport { variableToString } from \"../createVariable\";\nimport { formatDiagnostic } from \"../helpers/formatDiagnostic\";\nimport { warnOnce } from \"../helpers/warnOnce\";\nimport { useThemeWithState } from \"../hooks/useTheme\";\nimport { ThemeStateContext, getThemeState, hasThemeUpdatingProps } from \"../hooks/useThemeState\";\nimport { ThemeDebug } from \"./ThemeDebug\";\nimport { jsx } from \"react/jsx-runtime\";\n\nconst Theme = createRefComponent(function Theme2(props, ref) {\n\t\"use no memo\";\n\tif (props.disable) return props.children;\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tfor (const key in props) if (!reservedThemeProps[key]) warnOnce(`theme-update:${key}`, `<Theme ${key}=...> no longer accepts inline values. Wrap the subtree in <ThemeUpdate ${key}=...> instead.`);\n\t}\n\tconst { passThrough } = props;\n\tconst isRoot = !!props[\"_isRoot\"];\n\tconst [_, themeState] = useThemeWithState(props, isRoot, true);\n\tuseIsomorphicLayoutEffect(() => {}, [\n\t\tthemeState.id,\n\t\tthemeState.name,\n\t\tthemeState.theme\n\t]);\n\tlet finalChildren = props[\"disable-child-theme\"] ? Children.map(props.children, (child) => passThrough || !isValidElement(child) ? child : cloneElement(child, { [\"data-disable-theme\"]: true })) : props.children;\n\tif (ref) try {\n\t\tReact.Children.only(finalChildren);\n\t\tfinalChildren = cloneElement(finalChildren, { ref });\n\t} catch {}\n\tconst stateRef = useRef({ hasEverThemed: false });\n\treturn getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);\n});\nTheme[\"avoidForwardRef\"] = true;\nfunction getThemedChildren(themeState, children, props, isRoot = false, stateRef, passThrough = false) {\n\tconst { shallow, forceClassName } = props;\n\tconst state = stateRef.current;\n\tlet shouldRenderChildrenWithTheme = state.hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);\n\tif (process.env.NODE_ENV === \"development\" && props.debug === \"visualize\") children = /* @__PURE__ */ jsx(ThemeDebug, {\n\t\tthemeState,\n\t\tthemeProps: props,\n\t\tchildren\n\t});\n\tif (!shouldRenderChildrenWithTheme) return children;\n\tchildren = /* @__PURE__ */ jsx(ThemeStateContext.Provider, {\n\t\tvalue: themeState.id,\n\t\tchildren\n\t});\n\tconst { isInverse, name } = themeState;\n\tconst requiresExtraWrapper = isInverse || forceClassName;\n\tif (!state.hasEverThemed) state.hasEverThemed = true;\n\tif (requiresExtraWrapper || themeState.name === \"dark\" || themeState.name === \"light\") state.hasEverThemed = \"wrapped\";\n\tif (shallow) if (!themeState.parentId) {} else {\n\t\tconst parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);\n\t\tif (!parentState) throw new Error(formatDiagnostic(\"‼️010\", \"Theme\", \"parent theme state is missing for shallow rendering\", \"Keep <Theme shallow> inside its mounted parent Theme\", \"name,parentId\", {\n\t\t\tname: themeState.name,\n\t\t\tparentId: themeState.parentId\n\t\t}));\n\t\tchildren = Children.toArray(children).map((child) => {\n\t\t\treturn isValidElement(child) ? passThrough ? child : cloneElement(child, void 0, /* @__PURE__ */ jsx(Theme, {\n\t\t\t\tname: parentState.name,\n\t\t\t\tchildren: child.props.children\n\t\t\t})) : child;\n\t\t});\n\t}\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tif (!passThrough && props.debug) console.warn(` getThemedChildren`, {\n\t\t\trequiresExtraWrapper,\n\t\t\tforceClassName,\n\t\t\tthemeState,\n\t\t\tstate,\n\t\t\tthemeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)\n\t\t});\n\t}\n\tif (forceClassName === false) return children;\n\tif (isWeb) {\n\t\tconst baseStyle = props.contain ? inertContainedStyle : inertStyle;\n\t\tconst { className = \"\", color } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);\n\t\tconst inlineClassName = passThrough ? void 0 : props._themeUpdate?.className;\n\t\tchildren = /* @__PURE__ */ jsx(\"span\", {\n\t\t\tclassName: `${className} is_Theme${inlineClassName ? ` ${inlineClassName}` : \"\"}`,\n\t\t\tstyle: passThrough ? baseStyle : {\n\t\t\t\tcolor,\n\t\t\t\t...baseStyle\n\t\t\t},\n\t\t\tchildren\n\t\t});\n\t\tif (state.hasEverThemed === \"wrapped\") children = /* @__PURE__ */ jsx(\"span\", {\n\t\t\tclassName: requiresExtraWrapper ? `${name.startsWith(\"light\") ? \"t_light\" : name.startsWith(\"dark\") ? \"t_dark\" : \"\"} _dsp_contents` : `_dsp_contents`,\n\t\t\tchildren\n\t\t});\n\t\treturn children;\n\t}\n\treturn children;\n}\nconst inertStyle = { display: \"contents\" };\nconst inertContainedStyle = {\n\tdisplay: \"contents\",\n\tcontain: \"strict\"\n};\nconst empty = {\n\tclassName: \"\",\n\tcolor: void 0\n};\nfunction getThemeClassNameAndColor(themeState, props, isRoot = false) {\n\tif (!themeState.isNew && !props.forceClassName) return empty;\n\treturn {\n\t\tcolor: themeState?.theme && themeState.isNew ? variableToString(themeState.theme.color) : \"\",\n\t\tclassName: getThemeClassNames(themeState.name, isRoot)\n\t};\n}\n\nexport { Theme, getThemedChildren };"],"mappings":"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"}
+{"version":3,"file":"Theme.js","names":[],"sources":["esm/views/Theme.js"],"sourcesContent":["import { createRefComponent } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { getThemeClassNames, reservedThemeProps } from \"@tamagui/helpers\";\nimport React, { Children, cloneElement, isValidElement, useRef } from \"react\";\nimport { variableToString } from \"../createVariable\";\nimport { formatDiagnostic } from \"../helpers/formatDiagnostic\";\nimport { warnOnce } from \"../helpers/warnOnce\";\nimport { useThemeWithState } from \"../hooks/useTheme\";\nimport { ThemeStateContext, getThemeState, hasThemeUpdatingProps } from \"../hooks/useThemeState\";\nimport { ThemeDebug } from \"./ThemeDebug\";\nimport { jsx } from \"react/jsx-runtime\";\n\nconst Theme = createRefComponent(function Theme2(props, ref) {\n\t\"use no memo\";\n\tif (props.disable) return props.children;\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tfor (const key in props) if (!reservedThemeProps[key]) warnOnce(`theme-update:${key}`, `<Theme ${key}=...> no longer accepts inline values. Wrap the subtree in <ThemeUpdate ${key}=...> instead.`);\n\t}\n\tconst { passThrough } = props;\n\tconst isRoot = !!props[\"_isRoot\"];\n\tconst [_, themeState] = useThemeWithState(props, isRoot, true);\n\tuseIsomorphicLayoutEffect(() => {}, [\n\t\tthemeState.id,\n\t\tthemeState.name,\n\t\tthemeState.theme\n\t]);\n\tlet finalChildren = props[\"disable-child-theme\"] ? Children.map(props.children, (child) => passThrough || !isValidElement(child) ? child : cloneElement(child, { [\"data-disable-theme\"]: true })) : props.children;\n\tif (ref) try {\n\t\tReact.Children.only(finalChildren);\n\t\tfinalChildren = cloneElement(finalChildren, { ref });\n\t} catch {}\n\tconst stateRef = useRef({ hasEverThemed: false });\n\treturn getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);\n});\nTheme[\"avoidForwardRef\"] = true;\nfunction getThemedChildren(themeState, children, props, isRoot = false, stateRef, passThrough = false) {\n\tconst { shallow, forceClassName } = props;\n\tconst state = stateRef.current;\n\tlet shouldRenderChildrenWithTheme = state.hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);\n\tif (process.env.NODE_ENV === \"development\" && props.debug === \"visualize\") children = /* @__PURE__ */ jsx(ThemeDebug, {\n\t\tthemeState,\n\t\tthemeProps: props,\n\t\tchildren\n\t});\n\tif (!shouldRenderChildrenWithTheme) return children;\n\tchildren = /* @__PURE__ */ jsx(ThemeStateContext.Provider, {\n\t\tvalue: themeState.id,\n\t\tchildren\n\t});\n\tconst { isInverse, name } = themeState;\n\tconst requiresExtraWrapper = isInverse || forceClassName;\n\tif (!state.hasEverThemed) state.hasEverThemed = true;\n\tif (requiresExtraWrapper || themeState.name === \"dark\" || themeState.name === \"light\") state.hasEverThemed = \"wrapped\";\n\tif (shallow) if (!themeState.parentId) {} else {\n\t\tconst parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);\n\t\tif (!parentState) throw new Error(process.env.NODE_ENV !== \"production\" ? formatDiagnostic(\"‼️010\", \"Theme\", \"parent theme state is missing for shallow rendering\", \"Keep <Theme shallow> inside its mounted parent Theme\", \"name,parentId\", {\n\t\t\tname: themeState.name,\n\t\t\tparentId: themeState.parentId\n\t\t}) : \"❌ Error 014\");\n\t\tchildren = Children.toArray(children).map((child) => {\n\t\t\treturn isValidElement(child) ? passThrough ? child : cloneElement(child, void 0, /* @__PURE__ */ jsx(Theme, {\n\t\t\t\tname: parentState.name,\n\t\t\t\tchildren: child.props.children\n\t\t\t})) : child;\n\t\t});\n\t}\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tif (!passThrough && props.debug) console.warn(` getThemedChildren`, {\n\t\t\trequiresExtraWrapper,\n\t\t\tforceClassName,\n\t\t\tthemeState,\n\t\t\tstate,\n\t\t\tthemeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)\n\t\t});\n\t}\n\tif (forceClassName === false) return children;\n\tif (isWeb) {\n\t\tconst baseStyle = props.contain ? inertContainedStyle : inertStyle;\n\t\tconst { className = \"\", color } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);\n\t\tconst inlineClassName = passThrough ? void 0 : props._themeUpdate?.className;\n\t\tchildren = /* @__PURE__ */ jsx(\"span\", {\n\t\t\tclassName: `${className} is_Theme${inlineClassName ? ` ${inlineClassName}` : \"\"}`,\n\t\t\tstyle: passThrough ? baseStyle : {\n\t\t\t\tcolor,\n\t\t\t\t...baseStyle\n\t\t\t},\n\t\t\tchildren\n\t\t});\n\t\tif (state.hasEverThemed === \"wrapped\") children = /* @__PURE__ */ jsx(\"span\", {\n\t\t\tclassName: requiresExtraWrapper ? `${name.startsWith(\"light\") ? \"t_light\" : name.startsWith(\"dark\") ? \"t_dark\" : \"\"} _dsp_contents` : `_dsp_contents`,\n\t\t\tchildren\n\t\t});\n\t\treturn children;\n\t}\n\treturn children;\n}\nconst inertStyle = { display: \"contents\" };\nconst inertContainedStyle = {\n\tdisplay: \"contents\",\n\tcontain: \"strict\"\n};\nconst empty = {\n\tclassName: \"\",\n\tcolor: void 0\n};\nfunction getThemeClassNameAndColor(themeState, props, isRoot = false) {\n\tif (!themeState.isNew && !props.forceClassName) return empty;\n\treturn {\n\t\tcolor: themeState?.theme && themeState.isNew ? variableToString(themeState.theme.color) : \"\",\n\t\tclassName: getThemeClassNames(themeState.name, isRoot)\n\t};\n}\n\nexport { Theme, getThemedChildren };"],"mappings":"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"}

package/dist/esm/views/Theme.native.js

@@ -62,10 +62,10 @@ function getThemedChildren(themeState, children, props) {
 	if (requiresExtraWrapper || themeState.name === "dark" || themeState.name === "light") state.hasEverThemed = "wrapped";
 	if (shallow) if (!themeState.parentId) {} else {
 		var parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);
-		if (!parentState) throw new Error(formatDiagnostic("‼️010", "Theme", "parent theme state is missing for shallow rendering", "Keep <Theme shallow> inside its mounted parent Theme", "name,parentId", {
+		if (!parentState) throw new Error(process.env.NODE_ENV !== "production" ? formatDiagnostic("‼️010", "Theme", "parent theme state is missing for shallow rendering", "Keep <Theme shallow> inside its mounted parent Theme", "name,parentId", {
 			name: themeState.name,
 			parentId: themeState.parentId
-		}));
+		}) : "❌ Error 014");
 		children = Children.toArray(children).map(function(child) {
 			return /* @__PURE__ */ isValidElement(child) ? passThrough ? child : /* @__PURE__ */ cloneElement(child, void 0, /* @__PURE__ */ jsx(Theme, {
 				name: parentState.name,

package/dist/esm/views/Theme.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.native.js","names":[],"sources":["esm/views/Theme.native.js"],"sourcesContent":["import { jsx } from \"react/jsx-runtime\";\nimport { createRefComponent } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { getThemeClassNames, reservedThemeProps } from \"@tamagui/helpers\";\nimport React, { Children, cloneElement, isValidElement, useRef } from \"react\";\nimport { variableToString } from \"../createVariable\";\nimport { formatDiagnostic } from \"../helpers/formatDiagnostic\";\nimport { removeNativeStyleScope, updateNativeStyleScope } from \"../helpers/nativeStyleEngine\";\nimport { warnOnce } from \"../helpers/warnOnce\";\nimport { useThemeWithState } from \"../hooks/useTheme\";\nimport { ThemeStateContext, getThemeState, hasThemeUpdatingProps } from \"../hooks/useThemeState\";\nimport { ThemeDebug } from \"./ThemeDebug\";\n\nvar Theme = createRefComponent(function Theme2(props, ref) {\n\t\"use no memo\";\n\tif (props.disable) return props.children;\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tfor (var key in props) if (!reservedThemeProps[key]) warnOnce(`theme-update:${key}`, `<Theme ${key}=...> no longer accepts inline values. Wrap the subtree in <ThemeUpdate ${key}=...> instead.`);\n\t}\n\tvar { passThrough } = props;\n\tvar isRoot = !!props[\"_isRoot\"];\n\tvar [_, themeState] = useThemeWithState(props, isRoot, true);\n\tuseIsomorphicLayoutEffect(function() {\n\t\tupdateNativeStyleScope(themeState.id, themeState.name, themeState.theme);\n\t\treturn function() {\n\t\t\treturn removeNativeStyleScope(themeState.id);\n\t\t};\n\t}, [\n\t\tthemeState.id,\n\t\tthemeState.name,\n\t\tthemeState.theme\n\t]);\n\tvar finalChildren = props[\"disable-child-theme\"] ? Children.map(props.children, function(child) {\n\t\treturn passThrough || !/* @__PURE__ */ isValidElement(child) ? child : /* @__PURE__ */ cloneElement(child, { [\"data-disable-theme\"]: true });\n\t}) : props.children;\n\tif (ref) try {\n\t\tReact.Children.only(finalChildren);\n\t\tfinalChildren = /* @__PURE__ */ cloneElement(finalChildren, { ref });\n\t} catch (e) {}\n\tvar stateRef = useRef({ hasEverThemed: false });\n\treturn getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);\n});\nTheme[\"avoidForwardRef\"] = true;\nfunction getThemedChildren(themeState, children, props) {\n\tvar isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, stateRef = arguments.length > 4 ? arguments[4] : void 0, passThrough = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : false;\n\tvar { shallow, forceClassName } = props;\n\tvar state = stateRef.current;\n\tvar shouldRenderChildrenWithTheme = state.hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);\n\tif (process.env.NODE_ENV === \"development\" && props.debug === \"visualize\") children = /* @__PURE__ */ jsx(ThemeDebug, {\n\t\tthemeState,\n\t\tthemeProps: props,\n\t\tchildren\n\t});\n\tif (!shouldRenderChildrenWithTheme) return children;\n\tchildren = /* @__PURE__ */ jsx(ThemeStateContext.Provider, {\n\t\tvalue: themeState.id,\n\t\tchildren\n\t});\n\tvar { isInverse, name } = themeState;\n\tvar requiresExtraWrapper = isInverse || forceClassName;\n\tif (!state.hasEverThemed) state.hasEverThemed = true;\n\tif (requiresExtraWrapper || themeState.name === \"dark\" || themeState.name === \"light\") state.hasEverThemed = \"wrapped\";\n\tif (shallow) if (!themeState.parentId) {} else {\n\t\tvar parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);\n\t\tif (!parentState) throw new Error(formatDiagnostic(\"‼️010\", \"Theme\", \"parent theme state is missing for shallow rendering\", \"Keep <Theme shallow> inside its mounted parent Theme\", \"name,parentId\", {\n\t\t\tname: themeState.name,\n\t\t\tparentId: themeState.parentId\n\t\t}));\n\t\tchildren = Children.toArray(children).map(function(child) {\n\t\t\treturn /* @__PURE__ */ isValidElement(child) ? passThrough ? child : /* @__PURE__ */ cloneElement(child, void 0, /* @__PURE__ */ jsx(Theme, {\n\t\t\t\tname: parentState.name,\n\t\t\t\tchildren: child.props.children\n\t\t\t})) : child;\n\t\t});\n\t}\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tif (!passThrough && props.debug) console.warn(` getThemedChildren`, {\n\t\t\trequiresExtraWrapper,\n\t\t\tforceClassName,\n\t\t\tthemeState,\n\t\t\tstate,\n\t\t\tthemeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)\n\t\t});\n\t}\n\tif (forceClassName === false) return children;\n\tif (isWeb) {\n\t\tvar _props__themeUpdate;\n\t\tvar baseStyle = props.contain ? inertContainedStyle : inertStyle;\n\t\tvar { className = \"\", color } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);\n\t\tvar inlineClassName = passThrough ? void 0 : (_props__themeUpdate = props._themeUpdate) === null || _props__themeUpdate === void 0 ? void 0 : _props__themeUpdate.className;\n\t\tchildren = /* @__PURE__ */ jsx(\"span\", {\n\t\t\tclassName: `${className} is_Theme${inlineClassName ? ` ${inlineClassName}` : \"\"}`,\n\t\t\tstyle: passThrough ? baseStyle : {\n\t\t\t\tcolor,\n\t\t\t\t...baseStyle\n\t\t\t},\n\t\t\tchildren\n\t\t});\n\t\tif (state.hasEverThemed === \"wrapped\") children = /* @__PURE__ */ jsx(\"span\", {\n\t\t\tclassName: requiresExtraWrapper ? `${name.startsWith(\"light\") ? \"t_light\" : name.startsWith(\"dark\") ? \"t_dark\" : \"\"} _dsp_contents` : `_dsp_contents`,\n\t\t\tchildren\n\t\t});\n\t\treturn children;\n\t}\n\treturn children;\n}\nvar inertStyle = { display: \"contents\" };\nvar inertContainedStyle = {\n\tdisplay: \"contents\",\n\tcontain: \"strict\"\n};\nvar empty = {\n\tclassName: \"\",\n\tcolor: void 0\n};\nfunction getThemeClassNameAndColor(themeState, props) {\n\tvar isRoot = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;\n\tif (!themeState.isNew && !props.forceClassName) return empty;\n\treturn {\n\t\tcolor: (themeState === null || themeState === void 0 ? void 0 : themeState.theme) && themeState.isNew ? variableToString(themeState.theme.color) : \"\",\n\t\tclassName: getThemeClassNames(themeState.name, isRoot)\n\t};\n}\n\nexport { Theme, getThemedChildren };"],"mappings":"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"}
+{"version":3,"file":"Theme.native.js","names":[],"sources":["esm/views/Theme.native.js"],"sourcesContent":["import { jsx } from \"react/jsx-runtime\";\nimport { createRefComponent } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { getThemeClassNames, reservedThemeProps } from \"@tamagui/helpers\";\nimport React, { Children, cloneElement, isValidElement, useRef } from \"react\";\nimport { variableToString } from \"../createVariable\";\nimport { formatDiagnostic } from \"../helpers/formatDiagnostic\";\nimport { removeNativeStyleScope, updateNativeStyleScope } from \"../helpers/nativeStyleEngine\";\nimport { warnOnce } from \"../helpers/warnOnce\";\nimport { useThemeWithState } from \"../hooks/useTheme\";\nimport { ThemeStateContext, getThemeState, hasThemeUpdatingProps } from \"../hooks/useThemeState\";\nimport { ThemeDebug } from \"./ThemeDebug\";\n\nvar Theme = createRefComponent(function Theme2(props, ref) {\n\t\"use no memo\";\n\tif (props.disable) return props.children;\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tfor (var key in props) if (!reservedThemeProps[key]) warnOnce(`theme-update:${key}`, `<Theme ${key}=...> no longer accepts inline values. Wrap the subtree in <ThemeUpdate ${key}=...> instead.`);\n\t}\n\tvar { passThrough } = props;\n\tvar isRoot = !!props[\"_isRoot\"];\n\tvar [_, themeState] = useThemeWithState(props, isRoot, true);\n\tuseIsomorphicLayoutEffect(function() {\n\t\tupdateNativeStyleScope(themeState.id, themeState.name, themeState.theme);\n\t\treturn function() {\n\t\t\treturn removeNativeStyleScope(themeState.id);\n\t\t};\n\t}, [\n\t\tthemeState.id,\n\t\tthemeState.name,\n\t\tthemeState.theme\n\t]);\n\tvar finalChildren = props[\"disable-child-theme\"] ? Children.map(props.children, function(child) {\n\t\treturn passThrough || !/* @__PURE__ */ isValidElement(child) ? child : /* @__PURE__ */ cloneElement(child, { [\"data-disable-theme\"]: true });\n\t}) : props.children;\n\tif (ref) try {\n\t\tReact.Children.only(finalChildren);\n\t\tfinalChildren = /* @__PURE__ */ cloneElement(finalChildren, { ref });\n\t} catch (e) {}\n\tvar stateRef = useRef({ hasEverThemed: false });\n\treturn getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);\n});\nTheme[\"avoidForwardRef\"] = true;\nfunction getThemedChildren(themeState, children, props) {\n\tvar isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, stateRef = arguments.length > 4 ? arguments[4] : void 0, passThrough = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : false;\n\tvar { shallow, forceClassName } = props;\n\tvar state = stateRef.current;\n\tvar shouldRenderChildrenWithTheme = state.hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);\n\tif (process.env.NODE_ENV === \"development\" && props.debug === \"visualize\") children = /* @__PURE__ */ jsx(ThemeDebug, {\n\t\tthemeState,\n\t\tthemeProps: props,\n\t\tchildren\n\t});\n\tif (!shouldRenderChildrenWithTheme) return children;\n\tchildren = /* @__PURE__ */ jsx(ThemeStateContext.Provider, {\n\t\tvalue: themeState.id,\n\t\tchildren\n\t});\n\tvar { isInverse, name } = themeState;\n\tvar requiresExtraWrapper = isInverse || forceClassName;\n\tif (!state.hasEverThemed) state.hasEverThemed = true;\n\tif (requiresExtraWrapper || themeState.name === \"dark\" || themeState.name === \"light\") state.hasEverThemed = \"wrapped\";\n\tif (shallow) if (!themeState.parentId) {} else {\n\t\tvar parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);\n\t\tif (!parentState) throw new Error(process.env.NODE_ENV !== \"production\" ? formatDiagnostic(\"‼️010\", \"Theme\", \"parent theme state is missing for shallow rendering\", \"Keep <Theme shallow> inside its mounted parent Theme\", \"name,parentId\", {\n\t\t\tname: themeState.name,\n\t\t\tparentId: themeState.parentId\n\t\t}) : \"❌ Error 014\");\n\t\tchildren = Children.toArray(children).map(function(child) {\n\t\t\treturn /* @__PURE__ */ isValidElement(child) ? passThrough ? child : /* @__PURE__ */ cloneElement(child, void 0, /* @__PURE__ */ jsx(Theme, {\n\t\t\t\tname: parentState.name,\n\t\t\t\tchildren: child.props.children\n\t\t\t})) : child;\n\t\t});\n\t}\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tif (!passThrough && props.debug) console.warn(` getThemedChildren`, {\n\t\t\trequiresExtraWrapper,\n\t\t\tforceClassName,\n\t\t\tthemeState,\n\t\t\tstate,\n\t\t\tthemeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)\n\t\t});\n\t}\n\tif (forceClassName === false) return children;\n\tif (isWeb) {\n\t\tvar _props__themeUpdate;\n\t\tvar baseStyle = props.contain ? inertContainedStyle : inertStyle;\n\t\tvar { className = \"\", color } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);\n\t\tvar inlineClassName = passThrough ? void 0 : (_props__themeUpdate = props._themeUpdate) === null || _props__themeUpdate === void 0 ? void 0 : _props__themeUpdate.className;\n\t\tchildren = /* @__PURE__ */ jsx(\"span\", {\n\t\t\tclassName: `${className} is_Theme${inlineClassName ? ` ${inlineClassName}` : \"\"}`,\n\t\t\tstyle: passThrough ? baseStyle : {\n\t\t\t\tcolor,\n\t\t\t\t...baseStyle\n\t\t\t},\n\t\t\tchildren\n\t\t});\n\t\tif (state.hasEverThemed === \"wrapped\") children = /* @__PURE__ */ jsx(\"span\", {\n\t\t\tclassName: requiresExtraWrapper ? `${name.startsWith(\"light\") ? \"t_light\" : name.startsWith(\"dark\") ? \"t_dark\" : \"\"} _dsp_contents` : `_dsp_contents`,\n\t\t\tchildren\n\t\t});\n\t\treturn children;\n\t}\n\treturn children;\n}\nvar inertStyle = { display: \"contents\" };\nvar inertContainedStyle = {\n\tdisplay: \"contents\",\n\tcontain: \"strict\"\n};\nvar empty = {\n\tclassName: \"\",\n\tcolor: void 0\n};\nfunction getThemeClassNameAndColor(themeState, props) {\n\tvar isRoot = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;\n\tif (!themeState.isNew && !props.forceClassName) return empty;\n\treturn {\n\t\tcolor: (themeState === null || themeState === void 0 ? void 0 : themeState.theme) && themeState.isNew ? variableToString(themeState.theme.color) : \"\",\n\t\tclassName: getThemeClassNames(themeState.name, isRoot)\n\t};\n}\n\nexport { Theme, getThemedChildren };"],"mappings":"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"}

package/dist/esm/views/ThemeDebug.mjs

@@ -48,10 +48,7 @@ function ThemeDebug({ themeState, themeProps, children }) {
 						color1: themeState.theme.color1.val,
 						parentId: themeState.parentId,
 						isNew: themeState.isNew,
-						themeProps: {
-							name: themeProps.name,
-							reset: themeProps.reset
-						},
+						themeProps: { name: themeProps.name },
 						parentState: {
 							name: parentState?.name,
 							isNew: parentState?.isNew

package/dist/esm/views/ThemeDebug.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeDebug.js","names":[],"sources":["esm/views/ThemeDebug.js"],"sourcesContent":["import { useDidFinishSSR } from \"@tamagui/use-did-finish-ssr\";\nimport { useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { getThemeState } from \"../hooks/useThemeState\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nlet node;\nfunction ThemeDebug({\n  themeState,\n  themeProps,\n  children\n}) {\n  if (process.env.NODE_ENV === \"development\") {\n    const isHydrated = useDidFinishSSR();\n    if (process.env.NODE_ENV === \"development\" && typeof document !== \"undefined\") {\n      if (!node) {\n        node = document.createElement(\"div\");\n        node.style.height = \"200px\";\n        node.style.overflowY = \"scroll\";\n        node.style.position = \"fixed\";\n        node.style.zIndex = 1e7;\n        node.style.bottom = \"30px\";\n        node.style.left = \"30px\";\n        node.style.right = \"30px\";\n        node.style.display = \"flex\";\n        node.style.border = \"1px solid #888\";\n        node.style.flexDirection = \"row\";\n        node.style.background = \"var(--background)\";\n      }\n    }\n    useEffect(() => {\n      document.body.appendChild(node);\n    }, []);\n    if (themeProps[\"disable-child-theme\"] || !isHydrated) {\n      return children;\n    }\n    const parentState = themeState.parentId ? getThemeState(themeState.parentId) : null;\n    return /* @__PURE__ */ jsxs(Fragment, { children: [\n      createPortal(\n        /* @__PURE__ */ jsxs(\n          \"code\",\n          {\n            style: {\n              whiteSpace: \"pre\",\n              maxWidth: 250,\n              overflow: \"auto\",\n              padding: 5\n            },\n            children: [\n              \"<Theme \",\n              themeState.id,\n              \" />\\xA0\",\n              JSON.stringify(\n                {\n                  name: themeState.name,\n                  color1: themeState.theme.color1.val,\n                  parentId: themeState.parentId,\n                  // inverses: themeState.inverses,\n                  isNew: themeState.isNew,\n                  themeProps: {\n                    name: themeProps.name,\n                    reset: themeProps.reset\n                  },\n                  parentState: {\n                    name: parentState?.name,\n                    isNew: parentState?.isNew\n                  }\n                },\n                null,\n                2\n              )\n            ]\n          }\n        ),\n        node\n      ),\n      /* @__PURE__ */ jsx(\"div\", { style: { color: \"red\" }, children: themeState.id }),\n      children\n    ] });\n  }\n  return children;\n}\nThemeDebug[\"displayName\"] = \"ThemeDebug\";\nexport {\n  ThemeDebug\n};\n//# sourceMappingURL=ThemeDebug.js.map\n"],"mappings":";;;;;;;AAKA,IAAI;AACJ,SAAS,WAAW,EAClB,YACA,YACA,YACC;CACD,IAAI,QAAQ,IAAI,aAAa,eAAe;EAC1C,MAAM,aAAa,gBAAgB;EACnC,IAAI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,aAAa,aAAa;GAC7E,IAAI,CAAC,MAAM;IACT,OAAO,SAAS,cAAc,KAAK;IACnC,KAAK,MAAM,SAAS;IACpB,KAAK,MAAM,YAAY;IACvB,KAAK,MAAM,WAAW;IACtB,KAAK,MAAM,SAAS;IACpB,KAAK,MAAM,SAAS;IACpB,KAAK,MAAM,OAAO;IAClB,KAAK,MAAM,QAAQ;IACnB,KAAK,MAAM,UAAU;IACrB,KAAK,MAAM,SAAS;IACpB,KAAK,MAAM,gBAAgB;IAC3B,KAAK,MAAM,aAAa;GAC1B;EACF;EACA,gBAAgB;GACd,SAAS,KAAK,YAAY,IAAI;EAChC,GAAG,CAAC,CAAC;EACL,IAAI,WAAW,0BAA0B,CAAC,YAAY;GACpD,OAAO;EACT;EACA,MAAM,cAAc,WAAW,WAAW,cAAc,WAAW,QAAQ,IAAI;EAC/E,OAAuB,qBAAK,UAAU,EAAE,UAAU;GAChD,aACkB,qBACd,QACA;IACE,OAAO;KACL,YAAY;KACZ,UAAU;KACV,UAAU;KACV,SAAS;IACX;IACA,UAAU;KACR;KACA,WAAW;KACX;KACA,KAAK,UACH;MACE,MAAM,WAAW;MACjB,QAAQ,WAAW,MAAM,OAAO;MAChC,UAAU,WAAW;MAErB,OAAO,WAAW;MAClB,YAAY;OACV,MAAM,WAAW;OACjB,OAAO,WAAW;MACpB;MACA,aAAa;OACX,MAAM,aAAa;OACnB,OAAO,aAAa;MACtB;KACF,GACA,MACA,CACF;IACF;GACF,CACF,GACA,IACF;GACgB,oBAAI,OAAO;IAAE,OAAO,EAAE,OAAO,MAAM;IAAG,UAAU,WAAW;GAAG,CAAC;GAC/E;EACF,EAAE,CAAC;CACL;CACA,OAAO;AACT;AACA,WAAW,iBAAiB"}
+{"version":3,"file":"ThemeDebug.js","names":[],"sources":["esm/views/ThemeDebug.js"],"sourcesContent":["import { useDidFinishSSR } from \"@tamagui/use-did-finish-ssr\";\nimport { useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { getThemeState } from \"../hooks/useThemeState\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nlet node;\nfunction ThemeDebug({\n  themeState,\n  themeProps,\n  children\n}) {\n  if (process.env.NODE_ENV === \"development\") {\n    const isHydrated = useDidFinishSSR();\n    if (process.env.NODE_ENV === \"development\" && typeof document !== \"undefined\") {\n      if (!node) {\n        node = document.createElement(\"div\");\n        node.style.height = \"200px\";\n        node.style.overflowY = \"scroll\";\n        node.style.position = \"fixed\";\n        node.style.zIndex = 1e7;\n        node.style.bottom = \"30px\";\n        node.style.left = \"30px\";\n        node.style.right = \"30px\";\n        node.style.display = \"flex\";\n        node.style.border = \"1px solid #888\";\n        node.style.flexDirection = \"row\";\n        node.style.background = \"var(--background)\";\n      }\n    }\n    useEffect(() => {\n      document.body.appendChild(node);\n    }, []);\n    if (themeProps[\"disable-child-theme\"] || !isHydrated) {\n      return children;\n    }\n    const parentState = themeState.parentId ? getThemeState(themeState.parentId) : null;\n    return /* @__PURE__ */ jsxs(Fragment, { children: [\n      createPortal(\n        /* @__PURE__ */ jsxs(\n          \"code\",\n          {\n            style: {\n              whiteSpace: \"pre\",\n              maxWidth: 250,\n              overflow: \"auto\",\n              padding: 5\n            },\n            children: [\n              \"<Theme \",\n              themeState.id,\n              \" />\\xA0\",\n              JSON.stringify(\n                {\n                  name: themeState.name,\n                  color1: themeState.theme.color1.val,\n                  parentId: themeState.parentId,\n                  // inverses: themeState.inverses,\n                  isNew: themeState.isNew,\n                  themeProps: {\n                    name: themeProps.name\n                  },\n                  parentState: {\n                    name: parentState?.name,\n                    isNew: parentState?.isNew\n                  }\n                },\n                null,\n                2\n              )\n            ]\n          }\n        ),\n        node\n      ),\n      /* @__PURE__ */ jsx(\"div\", { style: { color: \"red\" }, children: themeState.id }),\n      children\n    ] });\n  }\n  return children;\n}\nThemeDebug[\"displayName\"] = \"ThemeDebug\";\nexport {\n  ThemeDebug\n};\n//# sourceMappingURL=ThemeDebug.js.map\n"],"mappings":";;;;;;;AAKA,IAAI;AACJ,SAAS,WAAW,EAClB,YACA,YACA,YACC;CACD,IAAI,QAAQ,IAAI,aAAa,eAAe;EAC1C,MAAM,aAAa,gBAAgB;EACnC,IAAI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,aAAa,aAAa;GAC7E,IAAI,CAAC,MAAM;IACT,OAAO,SAAS,cAAc,KAAK;IACnC,KAAK,MAAM,SAAS;IACpB,KAAK,MAAM,YAAY;IACvB,KAAK,MAAM,WAAW;IACtB,KAAK,MAAM,SAAS;IACpB,KAAK,MAAM,SAAS;IACpB,KAAK,MAAM,OAAO;IAClB,KAAK,MAAM,QAAQ;IACnB,KAAK,MAAM,UAAU;IACrB,KAAK,MAAM,SAAS;IACpB,KAAK,MAAM,gBAAgB;IAC3B,KAAK,MAAM,aAAa;GAC1B;EACF;EACA,gBAAgB;GACd,SAAS,KAAK,YAAY,IAAI;EAChC,GAAG,CAAC,CAAC;EACL,IAAI,WAAW,0BAA0B,CAAC,YAAY;GACpD,OAAO;EACT;EACA,MAAM,cAAc,WAAW,WAAW,cAAc,WAAW,QAAQ,IAAI;EAC/E,OAAuB,qBAAK,UAAU,EAAE,UAAU;GAChD,aACkB,qBACd,QACA;IACE,OAAO;KACL,YAAY;KACZ,UAAU;KACV,UAAU;KACV,SAAS;IACX;IACA,UAAU;KACR;KACA,WAAW;KACX;KACA,KAAK,UACH;MACE,MAAM,WAAW;MACjB,QAAQ,WAAW,MAAM,OAAO;MAChC,UAAU,WAAW;MAErB,OAAO,WAAW;MAClB,YAAY,EACV,MAAM,WAAW,KACnB;MACA,aAAa;OACX,MAAM,aAAa;OACnB,OAAO,aAAa;MACtB;KACF,GACA,MACA,CACF;IACF;GACF,CACF,GACA,IACF;GACgB,oBAAI,OAAO;IAAE,OAAO,EAAE,OAAO,MAAM;IAAG,UAAU,WAAW;GAAG,CAAC;GAC/E;EACF,EAAE,CAAC;CACL;CACA,OAAO;AACT;AACA,WAAW,iBAAiB"}

package/dist/esm/views/View.mjs

@@ -1,12 +1,14 @@
 import { validStyles } from "@tamagui/helpers";
 import { createComponent } from "../createComponent.mjs";
-import { setComponentDisplayName } from "../helpers/componentDisplayName.mjs";
 
 const viewStaticConfig = {
 	acceptsClassName: true,
 	validStyles
 };
-const View = setComponentDisplayName(createComponent(viewStaticConfig), "View");
+const View = createComponent({
+	...viewStaticConfig,
+	displayName: "View"
+});
 
 export { View, viewStaticConfig };
 //# sourceMappingURL=View.mjs.map

package/dist/esm/views/View.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"View.js","names":[],"sources":["esm/views/View.js"],"sourcesContent":["import { validStyles } from \"@tamagui/helpers\";\nimport { createComponent } from \"../createComponent\";\nimport { setComponentDisplayName } from \"../helpers/componentDisplayName\";\nconst viewStaticConfig = {\n  acceptsClassName: true,\n  validStyles\n};\nconst View = setComponentDisplayName(\n  createComponent(\n    viewStaticConfig\n  ),\n  \"View\"\n);\nexport {\n  View,\n  viewStaticConfig\n};\n//# sourceMappingURL=View.js.map\n"],"mappings":";;;;;AAGA,MAAM,mBAAmB;CACvB,kBAAkB;CAClB;AACF;AACA,MAAM,OAAO,wBACX,gBACE,gBACF,GACA,MACF"}
+{"version":3,"file":"View.js","names":[],"sources":["esm/views/View.js"],"sourcesContent":["import { validStyles } from \"@tamagui/helpers\";\nimport { createComponent } from \"../createComponent\";\nconst viewStaticConfig = {\n  acceptsClassName: true,\n  validStyles\n};\nconst View = createComponent({ ...viewStaticConfig, displayName: \"View\" });\nexport {\n  View,\n  viewStaticConfig\n};\n//# sourceMappingURL=View.js.map\n"],"mappings":";;;;AAEA,MAAM,mBAAmB;CACvB,kBAAkB;CAClB;AACF;AACA,MAAM,OAAO,gBAAgB;CAAE,GAAG;CAAkB,aAAa;AAAO,CAAC"}

package/dist/esm/views/View.native.js

@@ -1,12 +1,14 @@
 import { validStyles } from "@tamagui/helpers";
 import { createComponent } from "../createComponent.native.js";
-import { setComponentDisplayName } from "../helpers/componentDisplayName.native.js";
 
 var viewStaticConfig = {
 	acceptsClassName: true,
 	validStyles
 };
-var View = setComponentDisplayName(createComponent(viewStaticConfig), "View");
+var View = createComponent({
+	...viewStaticConfig,
+	displayName: "View"
+});
 
 export { View, viewStaticConfig };
 //# sourceMappingURL=View.native.js.map

package/dist/esm/views/View.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.native.js","names":[],"sources":["esm/views/View.native.js"],"sourcesContent":["import { validStyles } from \"@tamagui/helpers\";\nimport { createComponent } from \"../createComponent\";\nimport { setComponentDisplayName } from \"../helpers/componentDisplayName\";\nvar viewStaticConfig = {\n  acceptsClassName: true,\n  validStyles\n};\nvar View = setComponentDisplayName(createComponent(viewStaticConfig), \"View\");\nexport {\n  View,\n  viewStaticConfig\n};\n//# sourceMappingURL=View.js.map\n"],"mappings":";;;;;AAGA,IAAI,mBAAmB;CACrB,kBAAkB;CAClB;AACF;AACA,IAAI,OAAO,wBAAwB,gBAAgB,gBAAgB,GAAG,MAAM"}
+{"version":3,"file":"View.native.js","names":[],"sources":["esm/views/View.native.js"],"sourcesContent":["import { validStyles } from \"@tamagui/helpers\";\nimport { createComponent } from \"../createComponent\";\nvar viewStaticConfig = {\n  acceptsClassName: true,\n  validStyles\n};\nvar View = createComponent({\n  ...viewStaticConfig,\n  displayName: \"View\"\n});\nexport {\n  View,\n  viewStaticConfig\n};\n//# sourceMappingURL=View.js.map\n"],"mappings":";;;;AAEA,IAAI,mBAAmB;CACrB,kBAAkB;CAClB;AACF;AACA,IAAI,OAAO,gBAAgB;CACzB,GAAG;CACH,aAAa;AACf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "3.0.0-beta.807.1",
+  "version": "3.0.0-beta.881.1",
   "license": "MIT",
   "author": {
     "name": "Nate Wienert"
@@ -100,22 +100,22 @@
     "test:web": "vitest --typecheck --run"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "3.0.0-beta.807.1",
-    "@tamagui/constants": "3.0.0-beta.807.1",
-    "@tamagui/dom": "3.0.0-beta.807.1",
-    "@tamagui/helpers": "3.0.0-beta.807.1",
-    "@tamagui/is-equal-shallow": "3.0.0-beta.807.1",
-    "@tamagui/native": "3.0.0-beta.807.1",
-    "@tamagui/normalize-css-color": "3.0.0-beta.807.1",
-    "@tamagui/style-grammar": "3.0.0-beta.807.1",
-    "@tamagui/timer": "3.0.0-beta.807.1",
-    "@tamagui/types": "3.0.0-beta.807.1",
-    "@tamagui/use-did-finish-ssr": "3.0.0-beta.807.1",
-    "@tamagui/use-event": "3.0.0-beta.807.1",
-    "@tamagui/use-force-update": "3.0.0-beta.807.1"
+    "@tamagui/compose-refs": "3.0.0-beta.881.1",
+    "@tamagui/constants": "3.0.0-beta.881.1",
+    "@tamagui/dom": "3.0.0-beta.881.1",
+    "@tamagui/helpers": "3.0.0-beta.881.1",
+    "@tamagui/is-equal-shallow": "3.0.0-beta.881.1",
+    "@tamagui/native": "3.0.0-beta.881.1",
+    "@tamagui/normalize-css-color": "3.0.0-beta.881.1",
+    "@tamagui/style-grammar": "3.0.0-beta.881.1",
+    "@tamagui/timer": "3.0.0-beta.881.1",
+    "@tamagui/types": "3.0.0-beta.881.1",
+    "@tamagui/use-did-finish-ssr": "3.0.0-beta.881.1",
+    "@tamagui/use-event": "3.0.0-beta.881.1",
+    "@tamagui/use-force-update": "3.0.0-beta.881.1"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.807.1",
+    "@tamagui/build": "3.0.0-beta.881.1",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": "19.2.3",

package/src/config.ts

@@ -169,7 +169,7 @@ export const getThemes = () => getConfigFromGlobalOrLocal()!.themes
 export const updateConfig = (key: string, value: any) => {
   // for usage internally only
   const config = getConfigFromGlobalOrLocal()
-  if (!config || !Object.prototype.hasOwnProperty.call(config, key)) {
+  if (!config || key === '__proto__' || !(key in config)) {
     return
   }
   Object.assign(config[key], value)

package/src/createComponent.tsx

@@ -19,9 +19,10 @@ import { GroupContext } from './contexts/GroupContext'
 import { didGetVariableValue, setDidGetVariableValue } from './createVariable'
 import { defaultComponentStateMounted } from './defaultComponentState'
 import { getWebEvents, useEvents, wrapWithGestureDetector } from './eventHandling'
-import { getDefaultProps } from './helpers/getDefaultProps'
 import { componentDisplayName } from './helpers/componentDisplayName'
-import { getSplitStyles, prepareStyleStaticConfig } from './helpers/getSplitStyles'
+import { getSplitStyles } from './helpers/getSplitStyles'
+import { getConfigRevisionState } from './helpers/grammarConfig'
+import { getStyleStaticConfig, type StyleStaticConfig } from './helpers/styleStaticConfig'
 import {
   getNativeStyleEngine,
   queueNativeViewState,
@@ -263,20 +264,16 @@ export function createComponent<
   // a const, a config read) makes it unfoldable.
   if (process.env.TAMAGUI_RUNTIME === 'zero') {
     throw new Error(
-      `[tamagui zero-runtime] createComponent ran in a zero-runtime graph. No Tamagui component renderer ships in this mode, so a component reference survived compilation. Fix the site or move the owning module to a declared full-runtime island.`
+      process.env.NODE_ENV !== 'production'
+        ? `[tamagui zero-runtime] createComponent ran in a zero-runtime graph. No Tamagui component renderer ships in this mode, so a component reference survived compilation. Fix the site or move the owning module to a declared full-runtime island.`
+        : '❌ Error 010'
     )
   }
 
-  prepareStyleStaticConfig(staticConfig)
-
   let config: TamaguiInternalConfig | null = null
   let resolvedDefaultProps: Record<string, any> | undefined
-  let didResolveDefaultProps = false
-  const styledContextPropKeys =
-    staticConfig.contextProps || staticConfig.context?.propKeys
-  const styledContextKeys = styledContextPropKeys
-    ? new Set(styledContextPropKeys)
-    : undefined
+  let resolvedStyleRevision = -1
+  let resolvedStyleStaticConfig: StyleStaticConfig | undefined
 
   const { Component, isText, isHOC } = staticConfig
 
@@ -290,11 +287,11 @@ export function createComponent<
 
   let res: ComponentType
 
+  const { displayName } = staticConfig
+
   const component = (propsInWithRef: ComponentPropTypes & { ref?: React.Ref<Ref> }) => {
     'use no memo'
 
-    const displayName = (res as any)[componentDisplayName] as string | undefined
-
     // read the forwarded ref directly off the incoming props — do NOT clone the
     // whole object every render just to strip `ref`. the original props object is
     // passed straight through; `ref` is skipped in the getSplitStyles pass (so it
@@ -305,6 +302,29 @@ export function createComponent<
 
     config = config || getConfig()
 
+    const styleRevision = getConfigRevisionState(config).revision
+    if (resolvedStyleRevision !== styleRevision) {
+      resolvedStyleRevision = styleRevision
+      const nextStyleStaticConfig = getStyleStaticConfig(staticConfig, config)
+      resolvedStyleStaticConfig = nextStyleStaticConfig
+      resolvedDefaultProps = nextStyleStaticConfig.defaultProps
+      // the relative-position default is a style, so it joins the base layer
+      // under everything the call site writes
+      if (
+        isWeb &&
+        !staticConfig.isText &&
+        config.settings.defaultPosition === 'relative' &&
+        nextStyleStaticConfig.baseStyle?.position === undefined
+      ) {
+        resolvedStyleStaticConfig = {
+          ...nextStyleStaticConfig,
+          baseStyle: { position: 'relative', ...nextStyleStaticConfig.baseStyle },
+        }
+      }
+    }
+    const styleStaticConfig = resolvedStyleStaticConfig!
+    const styledContextKeys = styleStaticConfig.styledContextKeys
+
     const internalID = process.env.NODE_ENV === 'development' ? React.useId() : ''
 
     if (process.env.NODE_ENV === 'development') {
@@ -386,20 +406,6 @@ export function createComponent<
     let props: ViewProps | TextProps = propsIn
 
     // merge both default props and styled context props - ensure order is preserved
-    if (!didResolveDefaultProps) {
-      didResolveDefaultProps = true
-      const staticDefaultProps = getDefaultProps(staticConfig)
-      resolvedDefaultProps =
-        isWeb &&
-        !isText &&
-        config.settings.defaultPosition === 'relative' &&
-        staticDefaultProps?.position === undefined
-          ? staticDefaultProps
-            ? { position: 'relative', ...staticDefaultProps }
-            : { position: 'relative' }
-          : staticDefaultProps
-    }
-
     // merge styled context props over defaults, ensure order is preserved
     const [nextProps, overrides] = mergeComponentProps(
       resolvedDefaultProps,
@@ -763,7 +769,6 @@ export function createComponent<
       canPlatformPseudo: componentState.platformPseudo,
       displayName,
       styledContext: styledContextValue,
-      styledContextKeys,
     } as const
 
     const themeName = themeState?.name || ''
@@ -783,7 +788,8 @@ export function createComponent<
       elementType,
       startedUnhydrated,
       debugProp,
-      animationDriver
+      animationDriver,
+      styleStaticConfig
     )
 
     const finalizedComponentState = componentState.finalizeStyleFlags(
@@ -957,7 +963,8 @@ export function createComponent<
               elementType,
               startedUnhydrated,
               debugProp,
-              animationDriver
+              animationDriver,
+              styleStaticConfig
             )
             if (!nextStyles?.style) return false
 
@@ -1117,7 +1124,8 @@ export function createComponent<
           elementType,
           startedUnhydrated,
           debugProp,
-          animationDriver
+          animationDriver,
+          styleStaticConfig
         )
 
         const effectiveTransition =
@@ -2221,6 +2229,29 @@ export function createComponent<
 
   res.staticConfig = staticConfig
 
+  // `.resolve` chains a component resolver (complete props + env -> style
+  // fragment) by returning a NEW component with the resolver appended
+  res.resolve = (resolver: any) => {
+    const next: any = createComponent({
+      ...staticConfig,
+      resolvers: staticConfig.resolvers
+        ? [...staticConfig.resolvers, resolver]
+        : [resolver],
+    })
+    // carry over statics assigned after creation (styled() copies parent
+    // statics onto the finished component)
+    for (const key in res) {
+      if (key === 'propTypes' || key in next) continue
+      next[key] = (res as any)[key]
+    }
+    return next
+  }
+
+  if (displayName) {
+    res.displayName = displayName
+    ;(res as any)[componentDisplayName] = displayName
+  }
+
   return res
 }
 

package/src/createStyledHOC.tsx

@@ -1,9 +1,6 @@
 import React, { type ReactNode, type Ref as ReactRef } from 'react'
-import {
-  componentDisplayName,
-  setComponentDisplayName,
-} from './helpers/componentDisplayName'
-import { themeable } from './helpers/themeable'
+import { componentDisplayName } from './helpers/componentDisplayName'
+import { Theme } from './views/Theme'
 import type {
   GetFinalProps,
   StaticConfig,
@@ -11,6 +8,7 @@ import type {
   StyledHOCOptions,
   TamaguiComponent,
   TamaDefer,
+  ThemeProps,
 } from './types'
 
 export function createStyledHOC<
@@ -70,18 +68,67 @@ export function createStyledHOC<
   }
 
   let out: any = function StyledHOCComponent(props: any) {
+    'use no memo'
+
     const { ref, ...rest } = props
-    return render(rest, ref)
-  }
+    if (options?.disableTheme) {
+      return render(rest, ref)
+    }
+
+    const defaultTheme = extendedConfig.defaultProps?.theme
+    const { theme: _, ...themedRest } = rest
+    const element = render({ ...themedRest, 'data-disable-theme': true }, ref)
+
+    let themeProps: Partial<ThemeProps> | null = null
+    if ('debug' in props) {
+      themeProps = { debug: props.debug }
+    }
+    if ('theme' in props || defaultTheme) {
+      ;(themeProps ||= {}).name = 'theme' in props ? props.theme : defaultTheme
+    }
 
-  out = options?.disableTheme ? out : themeable(out, extendedConfig, true)
+    // keeping the theme key present with a null value keeps the tree stable
+    // across theme changes, while an entirely absent key avoids mounting Theme.
+    if (!themeProps) {
+      return element
+    }
+
+    const context = extendedConfig.context
+    if (!context) {
+      return (
+        <Theme disable-child-theme {...themeProps}>
+          {element}
+        </Theme>
+      )
+    }
+
+    const contextValue = React.useContext(context)
+    let overriddenContextProps: object | undefined
+    for (const key in context.props) {
+      const value = props[key]
+      if (value !== undefined) {
+        ;(overriddenContextProps ||= {})[key] = value
+      }
+    }
+    const Provider = context.Provider
+    return (
+      <Provider {...contextValue} {...overriddenContextProps}>
+        <Theme disable-child-theme {...themeProps}>
+          {element}
+        </Theme>
+      </Provider>
+    )
+  }
 
   if (extendedConfig.memo || process.env.TAMAGUI_MEMOIZE_STYLED_HOC) {
     out = React.memo(out)
   }
 
   const displayName = options?.displayName || (component as any)[componentDisplayName]
-  setComponentDisplayName(out, displayName)
+  if (displayName) {
+    out.displayName = displayName
+    out[componentDisplayName] = displayName
+  }
 
   out.staticConfig = extendedConfig
   return out

package/src/createTokens.ts

@@ -13,7 +13,7 @@ function validateNoTrueTokenKeys(tokens: CreateTokens) {
     const tokenSet = tokens[category]
     if (!tokenSet || typeof tokenSet !== 'object') continue
 
-    if (Object.prototype.hasOwnProperty.call(tokenSet, 'true')) {
+    if ('true' in tokenSet) {
       throw new Error(
         `tokens.${category}.true is reserved because boolean values select component defaults. Use an explicit token name instead.`
       )