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

package/dist/esm/views/Text.mjs

@@ -1,29 +1,34 @@
 import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
 import { createComponent } from "../createComponent.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,

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\";\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 = createComponent({\n\t...textStaticConfig,\n\tdisplayName: \"Text\"\n});\n\nexport { Text, textStaticConfig };"],"mappings":";;;;AAGA,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,gBAAgB;CAC5B,GAAG;CACH,aAAa;AACd,CAAC"}
+{"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/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":";;;;;;;;;;;;;AAYA,MAAM,QAAQ,mBAAmB,SAAS,OAAO,OAAO,KAAK;CAC5D;CACA,IAAI,MAAM,SAAS,OAAO,MAAM;CAChC,IAAI,QAAQ,IAAI,aAAa,eAAe;EAC3C,KAAK,MAAM,OAAO,OAAO,IAAI,CAAC,mBAAmB,MAAM,SAAS,gBAAgB,OAAO,UAAU,IAAI,0EAA0E,IAAI,eAAe;CACnM;CACA,MAAM,EAAE,gBAAgB;CACxB,MAAM,SAAS,CAAC,CAAC,MAAM;CACvB,MAAM,CAAC,GAAG,cAAc,kBAAkB,OAAO,QAAQ,IAAI;CAC7D,gCAAgC,CAAC,GAAG;EACnC,WAAW;EACX,WAAW;EACX,WAAW;CACZ,CAAC;CACD,IAAI,gBAAgB,MAAM,yBAAyB,SAAS,IAAI,MAAM,WAAW,UAAU,eAAe,CAAC,eAAe,KAAK,IAAI,QAAQ,aAAa,OAAO,GAAG,uBAAuB,KAAK,CAAC,CAAC,IAAI,MAAM;CAC1M,IAAI,KAAK,IAAI;EACZ,MAAM,SAAS,KAAK,aAAa;EACjC,gBAAgB,aAAa,eAAe,EAAE,IAAI,CAAC;CACpD,QAAQ,CAAC;CACT,MAAM,WAAW,OAAO,EAAE,eAAe,MAAM,CAAC;CAChD,OAAO,kBAAkB,YAAY,eAAe,OAAO,QAAQ,UAAU,WAAW;AACzF,CAAC;AACD,MAAM,qBAAqB;AAC3B,SAAS,kBAAkB,YAAY,UAAU,OAAO,SAAS,OAAO,UAAU,cAAc,OAAO;CACtG,MAAM,EAAE,SAAS,mBAAmB;CACpC,MAAM,QAAQ,SAAS;CACvB,IAAI,gCAAgC,MAAM,iBAAiB,WAAW,SAAS,UAAU,sBAAsB,KAAK;CACpH,IAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,UAAU,aAAa,WAA2B,oBAAI,YAAY;EACrH;EACA,YAAY;EACZ;CACD,CAAC;CACD,IAAI,CAAC,+BAA+B,OAAO;CAC3C,WAA2B,oBAAI,kBAAkB,UAAU;EAC1D,OAAO,WAAW;EAClB;CACD,CAAC;CACD,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,uBAAuB,aAAa;CAC1C,IAAI,CAAC,MAAM,eAAe,MAAM,gBAAgB;CAChD,IAAI,wBAAwB,WAAW,SAAS,UAAU,WAAW,SAAS,SAAS,MAAM,gBAAgB;CAC7G,IAAI,SAAS,IAAI,CAAC,WAAW,UAAU,CAAC,OAAO;EAC9C,MAAM,cAAc,cAAc,WAAW,QAAQ,WAAW,KAAK,WAAW,QAAQ;EACxF,IAAI,CAAC,aAAa,MAAM,IAAI,MAAM,iBAAiB,SAAS,SAAS,uDAAuD,wDAAwD,iBAAiB;GACpM,MAAM,WAAW;GACjB,UAAU,WAAW;EACtB,CAAC,CAAC;EACF,WAAW,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,UAAU;GACpD,OAAO,eAAe,KAAK,IAAI,cAAc,QAAQ,aAAa,OAAO,KAAK,GAAmB,oBAAI,OAAO;IAC3G,MAAM,YAAY;IAClB,UAAU,MAAM,MAAM;GACvB,CAAC,CAAC,IAAI;EACP,CAAC;CACF;CACA,IAAI,QAAQ,IAAI,aAAa,eAAe;EAC3C,IAAI,CAAC,eAAe,MAAM,OAAO,QAAQ,KAAK,sBAAsB;GACnE;GACA;GACA;GACA;GACA,gBAAgB,0BAA0B,YAAY,OAAO,MAAM;EACpE,CAAC;CACF;CACA,IAAI,mBAAmB,OAAO,OAAO;CACrC,IAAI,OAAO;EACV,MAAM,YAAY,MAAM,UAAU,sBAAsB;EACxD,MAAM,EAAE,YAAY,IAAI,UAAU,cAAc,CAAC,IAAI,0BAA0B,YAAY,OAAO,MAAM;EACxG,MAAM,kBAAkB,cAAc,KAAK,IAAI,MAAM,cAAc;EACnE,WAA2B,oBAAI,QAAQ;GACtC,WAAW,GAAG,UAAU,WAAW,kBAAkB,IAAI,oBAAoB;GAC7E,OAAO,cAAc,YAAY;IAChC;IACA,GAAG;GACJ;GACA;EACD,CAAC;EACD,IAAI,MAAM,kBAAkB,WAAW,WAA2B,oBAAI,QAAQ;GAC7E,WAAW,uBAAuB,GAAG,KAAK,WAAW,OAAO,IAAI,YAAY,KAAK,WAAW,MAAM,IAAI,WAAW,GAAG,kBAAkB;GACtI;EACD,CAAC;EACD,OAAO;CACR;CACA,OAAO;AACR;AACA,MAAM,aAAa,EAAE,SAAS,WAAW;AACzC,MAAM,sBAAsB;CAC3B,SAAS;CACT,SAAS;AACV;AACA,MAAM,QAAQ;CACb,WAAW;CACX,OAAO,KAAK;AACb;AACA,SAAS,0BAA0B,YAAY,OAAO,SAAS,OAAO;CACrE,IAAI,CAAC,WAAW,SAAS,CAAC,MAAM,gBAAgB,OAAO;CACvD,OAAO;EACN,OAAO,YAAY,SAAS,WAAW,QAAQ,iBAAiB,WAAW,MAAM,KAAK,IAAI;EAC1F,WAAW,mBAAmB,WAAW,MAAM,MAAM;CACtD;AACD"}
+{"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":";;;;;;;;;;;;;AAYA,MAAM,QAAQ,mBAAmB,SAAS,OAAO,OAAO,KAAK;CAC5D;CACA,IAAI,MAAM,SAAS,OAAO,MAAM;CAChC,IAAI,QAAQ,IAAI,aAAa,eAAe;EAC3C,KAAK,MAAM,OAAO,OAAO,IAAI,CAAC,mBAAmB,MAAM,SAAS,gBAAgB,OAAO,UAAU,IAAI,0EAA0E,IAAI,eAAe;CACnM;CACA,MAAM,EAAE,gBAAgB;CACxB,MAAM,SAAS,CAAC,CAAC,MAAM;CACvB,MAAM,CAAC,GAAG,cAAc,kBAAkB,OAAO,QAAQ,IAAI;CAC7D,gCAAgC,CAAC,GAAG;EACnC,WAAW;EACX,WAAW;EACX,WAAW;CACZ,CAAC;CACD,IAAI,gBAAgB,MAAM,yBAAyB,SAAS,IAAI,MAAM,WAAW,UAAU,eAAe,CAAC,eAAe,KAAK,IAAI,QAAQ,aAAa,OAAO,GAAG,uBAAuB,KAAK,CAAC,CAAC,IAAI,MAAM;CAC1M,IAAI,KAAK,IAAI;EACZ,MAAM,SAAS,KAAK,aAAa;EACjC,gBAAgB,aAAa,eAAe,EAAE,IAAI,CAAC;CACpD,QAAQ,CAAC;CACT,MAAM,WAAW,OAAO,EAAE,eAAe,MAAM,CAAC;CAChD,OAAO,kBAAkB,YAAY,eAAe,OAAO,QAAQ,UAAU,WAAW;AACzF,CAAC;AACD,MAAM,qBAAqB;AAC3B,SAAS,kBAAkB,YAAY,UAAU,OAAO,SAAS,OAAO,UAAU,cAAc,OAAO;CACtG,MAAM,EAAE,SAAS,mBAAmB;CACpC,MAAM,QAAQ,SAAS;CACvB,IAAI,gCAAgC,MAAM,iBAAiB,WAAW,SAAS,UAAU,sBAAsB,KAAK;CACpH,IAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,UAAU,aAAa,WAA2B,oBAAI,YAAY;EACrH;EACA,YAAY;EACZ;CACD,CAAC;CACD,IAAI,CAAC,+BAA+B,OAAO;CAC3C,WAA2B,oBAAI,kBAAkB,UAAU;EAC1D,OAAO,WAAW;EAClB;CACD,CAAC;CACD,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,uBAAuB,aAAa;CAC1C,IAAI,CAAC,MAAM,eAAe,MAAM,gBAAgB;CAChD,IAAI,wBAAwB,WAAW,SAAS,UAAU,WAAW,SAAS,SAAS,MAAM,gBAAgB;CAC7G,IAAI,SAAS,IAAI,CAAC,WAAW,UAAU,CAAC,OAAO;EAC9C,MAAM,cAAc,cAAc,WAAW,QAAQ,WAAW,KAAK,WAAW,QAAQ;EACxF,IAAI,CAAC,aAAa,MAAM,IAAI,MAAM,QAAQ,IAAI,aAAa,eAAe,iBAAiB,SAAS,SAAS,uDAAuD,wDAAwD,iBAAiB;GAC5O,MAAM,WAAW;GACjB,UAAU,WAAW;EACtB,CAAC,IAAI,aAAa;EAClB,WAAW,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,UAAU;GACpD,OAAO,eAAe,KAAK,IAAI,cAAc,QAAQ,aAAa,OAAO,KAAK,GAAmB,oBAAI,OAAO;IAC3G,MAAM,YAAY;IAClB,UAAU,MAAM,MAAM;GACvB,CAAC,CAAC,IAAI;EACP,CAAC;CACF;CACA,IAAI,QAAQ,IAAI,aAAa,eAAe;EAC3C,IAAI,CAAC,eAAe,MAAM,OAAO,QAAQ,KAAK,sBAAsB;GACnE;GACA;GACA;GACA;GACA,gBAAgB,0BAA0B,YAAY,OAAO,MAAM;EACpE,CAAC;CACF;CACA,IAAI,mBAAmB,OAAO,OAAO;CACrC,IAAI,OAAO;EACV,MAAM,YAAY,MAAM,UAAU,sBAAsB;EACxD,MAAM,EAAE,YAAY,IAAI,UAAU,cAAc,CAAC,IAAI,0BAA0B,YAAY,OAAO,MAAM;EACxG,MAAM,kBAAkB,cAAc,KAAK,IAAI,MAAM,cAAc;EACnE,WAA2B,oBAAI,QAAQ;GACtC,WAAW,GAAG,UAAU,WAAW,kBAAkB,IAAI,oBAAoB;GAC7E,OAAO,cAAc,YAAY;IAChC;IACA,GAAG;GACJ;GACA;EACD,CAAC;EACD,IAAI,MAAM,kBAAkB,WAAW,WAA2B,oBAAI,QAAQ;GAC7E,WAAW,uBAAuB,GAAG,KAAK,WAAW,OAAO,IAAI,YAAY,KAAK,WAAW,MAAM,IAAI,WAAW,GAAG,kBAAkB;GACtI;EACD,CAAC;EACD,OAAO;CACR;CACA,OAAO;AACR;AACA,MAAM,aAAa,EAAE,SAAS,WAAW;AACzC,MAAM,sBAAsB;CAC3B,SAAS;CACT,SAAS;AACV;AACA,MAAM,QAAQ;CACb,WAAW;CACX,OAAO,KAAK;AACb;AACA,SAAS,0BAA0B,YAAY,OAAO,SAAS,OAAO;CACrE,IAAI,CAAC,WAAW,SAAS,CAAC,MAAM,gBAAgB,OAAO;CACvD,OAAO;EACN,OAAO,YAAY,SAAS,WAAW,QAAQ,iBAAiB,WAAW,MAAM,KAAK,IAAI;EAC1F,WAAW,mBAAmB,WAAW,MAAM,MAAM;CACtD;AACD"}

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":";;;;;;;;;;;;;;AAaA,IAAI,QAAQ,mBAAmB,SAAS,OAAO,OAAO,KAAK;CAC1D;CACA,IAAI,MAAM,SAAS,OAAO,MAAM;CAChC,IAAI,QAAQ,IAAI,aAAa,eAAe;EAC3C,KAAK,IAAI,OAAO,OAAO,IAAI,CAAC,mBAAmB,MAAM,SAAS,gBAAgB,OAAO,UAAU,IAAI,0EAA0E,IAAI,eAAe;CACjM;CACA,IAAI,EAAE,gBAAgB;CACtB,IAAI,SAAS,CAAC,CAAC,MAAM;CACrB,IAAI,CAAC,GAAG,cAAc,kBAAkB,OAAO,QAAQ,IAAI;CAC3D,0BAA0B,WAAW;EACpC,uBAAuB,WAAW,IAAI,WAAW,MAAM,WAAW,KAAK;EACvE,OAAO,WAAW;GACjB,OAAO,uBAAuB,WAAW,EAAE;EAC5C;CACD,GAAG;EACF,WAAW;EACX,WAAW;EACX,WAAW;CACZ,CAAC;CACD,IAAI,gBAAgB,MAAM,yBAAyB,SAAS,IAAI,MAAM,UAAU,SAAS,OAAO;EAC/F,OAAO,eAAe,CAAiB,+BAAe,KAAK,IAAI,QAAwB,6BAAa,OAAO,GAAG,uBAAuB,KAAK,CAAC;CAC5I,CAAC,IAAI,MAAM;CACX,IAAI,KAAK,IAAI;EACZ,MAAM,SAAS,KAAK,aAAa;EACjC,gBAAgC,6BAAa,eAAe,EAAE,IAAI,CAAC;CACpE,SAAS,GAAG,CAAC;CACb,IAAI,WAAW,OAAO,EAAE,eAAe,MAAM,CAAC;CAC9C,OAAO,kBAAkB,YAAY,eAAe,OAAO,QAAQ,UAAU,WAAW;AACzF,CAAC;AACD,MAAM,qBAAqB;AAC3B,SAAS,kBAAkB,YAAY,UAAU,OAAO;CACvD,IAAI,SAAS,UAAU,SAAS,KAAK,UAAU,OAAO,KAAK,IAAI,UAAU,KAAK,OAAO,WAAW,UAAU,SAAS,IAAI,UAAU,KAAK,KAAK,GAAG,cAAc,UAAU,SAAS,KAAK,UAAU,OAAO,KAAK,IAAI,UAAU,KAAK;CAC7N,IAAI,EAAE,SAAS,mBAAmB;CAClC,IAAI,QAAQ,SAAS;CACrB,IAAI,gCAAgC,MAAM,iBAAiB,WAAW,SAAS,UAAU,sBAAsB,KAAK;CACpH,IAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,UAAU,aAAa,WAA2B,oBAAI,YAAY;EACrH;EACA,YAAY;EACZ;CACD,CAAC;CACD,IAAI,CAAC,+BAA+B,OAAO;CAC3C,WAA2B,oBAAI,kBAAkB,UAAU;EAC1D,OAAO,WAAW;EAClB;CACD,CAAC;CACD,IAAI,EAAE,WAAW,SAAS;CAC1B,IAAI,uBAAuB,aAAa;CACxC,IAAI,CAAC,MAAM,eAAe,MAAM,gBAAgB;CAChD,IAAI,wBAAwB,WAAW,SAAS,UAAU,WAAW,SAAS,SAAS,MAAM,gBAAgB;CAC7G,IAAI,SAAS,IAAI,CAAC,WAAW,UAAU,CAAC,OAAO;EAC9C,IAAI,cAAc,cAAc,WAAW,QAAQ,WAAW,KAAK,WAAW,QAAQ;EACtF,IAAI,CAAC,aAAa,MAAM,IAAI,MAAM,iBAAiB,SAAS,SAAS,uDAAuD,wDAAwD,iBAAiB;GACpM,MAAM,WAAW;GACjB,UAAU,WAAW;EACtB,CAAC,CAAC;EACF,WAAW,SAAS,QAAQ,QAAQ,CAAC,CAAC,IAAI,SAAS,OAAO;GACzD,OAAuB,+BAAe,KAAK,IAAI,cAAc,QAAwB,6BAAa,OAAO,KAAK,GAAmB,oBAAI,OAAO;IAC3I,MAAM,YAAY;IAClB,UAAU,MAAM,MAAM;GACvB,CAAC,CAAC,IAAI;EACP,CAAC;CACF;CACA,IAAI,QAAQ,IAAI,aAAa,eAAe;EAC3C,IAAI,CAAC,eAAe,MAAM,OAAO,QAAQ,KAAK,sBAAsB;GACnE;GACA;GACA;GACA;GACA,gBAAgB,0BAA0B,YAAY,OAAO,MAAM;EACpE,CAAC;CACF;CACA,IAAI,mBAAmB,OAAO,OAAO;CACrC,IAAI,OAAO;EACV,IAAI;EACJ,IAAI,YAAY,MAAM,UAAU,sBAAsB;EACtD,IAAI,EAAE,YAAY,IAAI,UAAU,cAAc,CAAC,IAAI,0BAA0B,YAAY,OAAO,MAAM;EACtG,IAAI,kBAAkB,cAAc,KAAK,KAAK,sBAAsB,MAAM,kBAAkB,QAAQ,wBAAwB,KAAK,IAAI,KAAK,IAAI,oBAAoB;EAClK,WAA2B,oBAAI,QAAQ;GACtC,WAAW,GAAG,UAAU,WAAW,kBAAkB,IAAI,oBAAoB;GAC7E,OAAO,cAAc,YAAY;IAChC;IACA,GAAG;GACJ;GACA;EACD,CAAC;EACD,IAAI,MAAM,kBAAkB,WAAW,WAA2B,oBAAI,QAAQ;GAC7E,WAAW,uBAAuB,GAAG,KAAK,WAAW,OAAO,IAAI,YAAY,KAAK,WAAW,MAAM,IAAI,WAAW,GAAG,kBAAkB;GACtI;EACD,CAAC;EACD,OAAO;CACR;CACA,OAAO;AACR;AACA,IAAI,aAAa,EAAE,SAAS,WAAW;AACvC,IAAI,sBAAsB;CACzB,SAAS;CACT,SAAS;AACV;AACA,IAAI,QAAQ;CACX,WAAW;CACX,OAAO,KAAK;AACb;AACA,SAAS,0BAA0B,YAAY,OAAO;CACrD,IAAI,SAAS,UAAU,SAAS,KAAK,UAAU,OAAO,KAAK,IAAI,UAAU,KAAK;CAC9E,IAAI,CAAC,WAAW,SAAS,CAAC,MAAM,gBAAgB,OAAO;CACvD,OAAO;EACN,QAAQ,eAAe,QAAQ,eAAe,KAAK,IAAI,KAAK,IAAI,WAAW,UAAU,WAAW,QAAQ,iBAAiB,WAAW,MAAM,KAAK,IAAI;EACnJ,WAAW,mBAAmB,WAAW,MAAM,MAAM;CACtD;AACD"}
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "3.0.0-beta.831.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.831.1",
-    "@tamagui/constants": "3.0.0-beta.831.1",
-    "@tamagui/dom": "3.0.0-beta.831.1",
-    "@tamagui/helpers": "3.0.0-beta.831.1",
-    "@tamagui/is-equal-shallow": "3.0.0-beta.831.1",
-    "@tamagui/native": "3.0.0-beta.831.1",
-    "@tamagui/normalize-css-color": "3.0.0-beta.831.1",
-    "@tamagui/style-grammar": "3.0.0-beta.831.1",
-    "@tamagui/timer": "3.0.0-beta.831.1",
-    "@tamagui/types": "3.0.0-beta.831.1",
-    "@tamagui/use-did-finish-ssr": "3.0.0-beta.831.1",
-    "@tamagui/use-event": "3.0.0-beta.831.1",
-    "@tamagui/use-force-update": "3.0.0-beta.831.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.831.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/createComponent.tsx

@@ -264,7 +264,9 @@ 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'
     )
   }
 
@@ -2227,6 +2229,24 @@ 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

package/src/createVariable.ts

@@ -100,16 +100,6 @@ export function getVariableValue(v: Variable | any, group?: TokenCategories) {
   return v
 }
 
-export function getVariableName(v: Variable | any) {
-  if (isVariable(v)) return v.name
-  return v
-}
-
-export function getVariableVariable(v: Variable | string | undefined) {
-  if (isVariable(v)) return v.variable
-  return v
-}
-
 // bugfix { space: { 0.5: 10 } } was generating var(--space-0.5) (invalid CSS):
 export const createCSSVariable = (nameProp: string, includeVar = true) => {
   if (process.env.NODE_ENV === 'development') {

package/src/helpers/borderComponents.ts

@@ -0,0 +1,62 @@
+// the one classifier for border/outline shorthand components. every parser
+// (web composite lowering, native border emission, native normalizeStyle
+// expansion) routes through it so they cannot disagree on what counts as a
+// width, a line style, or a color
+
+export const lineStyles = new Set([
+  'none',
+  'hidden',
+  'dotted',
+  'dashed',
+  'solid',
+  'double',
+  'groove',
+  'ridge',
+  'inset',
+  'outset',
+])
+
+// splits on whitespace outside parens and quotes, so `rgb(1, 2, 3)` and
+// `calc(1px + 1px)` stay single components
+export function splitComponents(value: string): string[] {
+  return (
+    value.match(
+      /(?:[^\s("']+|\((?:[^()]|\([^)]*\))*\)|"(?:\\.|[^"])*"|'(?:\\.|[^'])*')+/g
+    ) || []
+  )
+}
+
+export function startsValueFunction(value: string): boolean {
+  return /^-?[a-z][a-z0-9-]*\(/i.test(value)
+}
+
+const colorFunction =
+  /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix|light-dark)\(/i
+
+export type BorderComponents = {
+  width?: string
+  style?: string
+  color?: string
+}
+
+export function classifyBorderComponents(raw: string, allowAuto = false) {
+  const out: BorderComponents = {}
+  for (const part of splitComponents(raw)) {
+    if (lineStyles.has(part) || (allowAuto && part === 'auto')) {
+      out.style = part
+    } else if (colorFunction.test(part)) {
+      out.color = part
+    } else if (
+      part === 'thin' ||
+      part === 'medium' ||
+      part === 'thick' ||
+      /^[+-]?(?:\d+\.?\d*|\.\d+)(?:%|[a-z]+)?$/.test(part) ||
+      startsValueFunction(part)
+    ) {
+      out.width = part
+    } else {
+      out.color = part
+    }
+  }
+  return out
+}

package/src/helpers/createDesignSystem.ts

@@ -243,8 +243,6 @@ const getStaticCSS = (
 @scope (.is_Text) to (.is_View) { :where(.is_Text) { white-space: inherit; word-wrap: inherit; } }
 ._dsp_contents {display:contents;}
 ._no_backdrop::backdrop {display: none;}
-.is_Input::selection, .is_TextArea::selection {background-color: var(--t_selectionColor);}
-.is_Input::placeholder, .is_TextArea::placeholder {color: var(--t_placeholderColor);}
 ${pointerEventsCSS}
 ${hideScrollBarsCSS}
 ${autoVarCSS}

package/src/helpers/createStyledContext.tsx

@@ -6,14 +6,7 @@ import { mergeProps } from './mergeProps'
 import { objectIdentityKey } from './objectIdentityKey'
 
 type EmptyDefault = Record<PropertyKey, never>
-
-type EmptyDefaultOptions =
-  | string
-  | {
-      namespace?: string
-      keys?: never
-    }
-
+type EmptyDefaultOptions = string | { namespace?: string; keys?: never }
 type StyledContextKey<Props> = Extract<keyof Props, string>
 
 type OptionalStyledContextKeys<Props extends Record<string, any>> = {
@@ -64,60 +57,39 @@ type StyledContextFactory = {
   ): StyledContext<VariantProps, never>
 }
 
-// use const (not function declaration) to prevent esbuild from hoisting
-// above __esm lazy init - function declarations get hoisted before
-// import_react is initialized, causing undefined.default errors in SSR
 export const createStyledContext = (<VariantProps extends Record<string, any>>(
   defaultValues?: VariantProps,
   namespaceOrOptions:
     | string
     | StyledContextOptions<VariantProps, StyledContextKey<VariantProps>> = ''
 ): StyledContext<VariantProps, StyledContextKey<VariantProps>> => {
-  // avoid react compiler - we aren't breaking its rules but it mis-interprets
-  // how we change the context value
   'use no memo'
 
-  // lazy initialization fixes vite ssr hmr - module-level assignments can fail
-  // when React is undefined during __esm re-initialization order issues.
-  // also React.createContext is optimized oddly by React compiler and our
-  // uncommon usage confuses it, so we use dynamic access
-  const createReactContext = React[
-    Math.random() ? 'createContext' : 'createContext'
-  ] as typeof React.createContext
-  const useReactMemo = React[
-    Math.random() ? 'useMemo' : 'useMemo'
-  ] as typeof React.useMemo
-  const useReactContext = React[
-    Math.random() ? 'useContext' : 'useContext'
-  ] as typeof React.useContext
-
   const namespace =
     typeof namespaceOrOptions === 'string'
       ? namespaceOrOptions
       : namespaceOrOptions.namespace || ''
+  const defaultKeys = isPlainObject(defaultValues)
+    ? (Object.keys(defaultValues) as StyledContextKey<VariantProps>[])
+    : undefined
   const propKeys =
-    typeof namespaceOrOptions === 'string'
-      ? isPlainObject(defaultValues)
-        ? (Object.keys(defaultValues) as StyledContextKey<VariantProps>[])
-        : undefined
-      : namespaceOrOptions.keys ||
-        (isPlainObject(defaultValues)
-          ? (Object.keys(defaultValues) as StyledContextKey<VariantProps>[])
-          : undefined)
+    typeof namespaceOrOptions === 'object' && namespaceOrOptions.keys
+      ? namespaceOrOptions.keys
+      : defaultKeys
 
-  const OGContext = createReactContext<VariantProps | undefined>(defaultValues)
+  const OGContext = React.createContext<VariantProps | undefined>(defaultValues)
   const OGProvider = OGContext.Provider
   const Context = OGContext as any as StyledContext<
     VariantProps,
     StyledContextKey<VariantProps>
   >
   const scopedContexts = new Map<string, Context<VariantProps | undefined>>()
-  const LastScopeInNamespace = createReactContext<string>(namespace)
+  const LastScopeInNamespace = React.createContext<string>(namespace)
 
   function getOrCreateScopedContext(scope: string) {
     let ScopedContext = scopedContexts.get(scope)
     if (!ScopedContext) {
-      ScopedContext = createReactContext<VariantProps | undefined>(defaultValues)
+      ScopedContext = React.createContext<VariantProps | undefined>(defaultValues)
       scopedContexts.set(scope, ScopedContext)
     }
     return ScopedContext!
@@ -129,24 +101,16 @@ export const createStyledContext = (<VariantProps extends Record<string, any>>(
   const Provider = ({
     children,
     scope: scopeIn,
-    // performance: avoid creating objects
     __disableMergeDefaultValues,
     ...values
   }: VariantProps & { children?: ReactNode; scope: string }) => {
     const scope = getNamespacedScope(scopeIn)
-
-    const next = useReactMemo(() => {
-      if (__disableMergeDefaultValues) {
-        // we already merged and want to keep ordering
-        return values
-      }
+    const next = React.useMemo(() => {
+      if (__disableMergeDefaultValues) return values
       return mergeProps(defaultValues || {}, values)
     }, [objectIdentityKey(values)])
 
-    let ScopedProvider = OGProvider
-    if (scope) {
-      ScopedProvider = getOrCreateScopedContext(scope).Provider
-    }
+    const ScopedProvider = scope ? getOrCreateScopedContext(scope).Provider : OGProvider
     return (
       <LastScopeInNamespace.Provider value={scope}>
         <ScopedProvider value={next as VariantProps}>{children}</ScopedProvider>
@@ -154,17 +118,15 @@ export const createStyledContext = (<VariantProps extends Record<string, any>>(
     )
   }
 
-  // use consumerComponent just to give a better error message
   const useStyledContext = (scopeIn = '') => {
-    const lastScopeInNamespace = useReactContext(LastScopeInNamespace)
+    const lastScopeInNamespace = React.useContext(LastScopeInNamespace)
     const scope = namespace
       ? scopeIn
         ? getNamespacedScope(scopeIn)
         : lastScopeInNamespace
       : scopeIn
     const context = scope ? getOrCreateScopedContext(scope) : OGContext
-    const value = useReactContext(context!) as VariantProps
-    return value
+    return React.useContext(context!) as VariantProps
   }
 
   // @ts-expect-error we are overriding default provider

package/src/helpers/formatDiagnostic.ts

@@ -56,14 +56,14 @@ export function formatDiagnostic(
   prop?: string,
   received?: unknown
 ) {
-  if (process.env.NODE_ENV === 'production') {
-    return `${code}: ${message}`
+  if (process.env.NODE_ENV === 'development') {
+    const formattedValue = prop ? formatDiagnosticValue(received) : ''
+    const boundedValue =
+      formattedValue.length > maxDiagnosticValueLength
+        ? `${formattedValue.slice(0, maxDiagnosticValueLength - 1)}…`
+        : formattedValue
+    const value = prop ? ` Received ${prop}=${boundedValue}.` : ''
+    return `${code} ${component}: ${message}.${value} ${action}`
   }
-  const formattedValue = prop ? formatDiagnosticValue(received) : ''
-  const boundedValue =
-    formattedValue.length > maxDiagnosticValueLength
-      ? `${formattedValue.slice(0, maxDiagnosticValueLength - 1)}…`
-      : formattedValue
-  const value = prop ? ` Received ${prop}=${boundedValue}.` : ''
-  return `${code} ${component}: ${message}.${value} ${action}`
+  return `${code}: ${message}`
 }

package/src/helpers/getCSSStylesAtomic.native.ts

@@ -1,7 +1,10 @@
-const empty = () => {
-  console.warn('no-op native')
-}
+const empty = () => {}
 
+export const canGenerateCSS = false
+export const flushDirectStyles = empty
+export const addComposition = empty
+export const registerAtomicSlot = empty
+export const buildAtomicSlotCSS = empty
 export const getCSSStylesAtomic = empty
 export const getCSSStyleAtomic = empty
 export const getStyleAtomic = empty