@tamagui/web 3.0.0-beta.661.1 → 3.0.0-beta.719.1

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

@@ -1 +1 @@
-{"version":3,"file":"SafeAreaTracker.native.js","names":[],"sources":["esm/views/SafeAreaTracker.native.js"],"sourcesContent":["import { getSafeArea, hasSafeAreaSetup } from \"@tamagui/native\";\nfunction hasSafeAreaTracker() {\n  return hasSafeAreaSetup();\n}\nfunction SafeAreaTracker() {\n  getSafeArea().state.useSafeAreaInsets();\n  return null;\n}\nexport {\n  SafeAreaTracker,\n  hasSafeAreaTracker\n};\n//# sourceMappingURL=SafeAreaTracker.native.js.map\n"],"mappings":";;;AACA,SAAS,qBAAqB;CAC5B,OAAO,iBAAiB;AAC1B;AACA,SAAS,kBAAkB;CACzB,YAAY,EAAE,MAAM,kBAAkB;CACtC,OAAO;AACT"}
+{"version":3,"file":"SafeAreaTracker.native.js","names":[],"sources":["esm/views/SafeAreaTracker.native.js"],"sourcesContent":["import { getSafeArea, hasSafeAreaSetup } from \"@tamagui/native\";\nfunction hasSafeAreaTracker() {\n  return hasSafeAreaSetup();\n}\nfunction SafeAreaTracker() {\n  getSafeArea().state.useSafeAreaInsets();\n  return null;\n}\nexport {\n  SafeAreaTracker,\n  hasSafeAreaTracker\n};\n//# sourceMappingURL=SafeAreaTracker.native.js.map\n"],"mappings":";;;AACA,SAAS,qBAAqB;CAC5B,OAAO,iBAAiB;AAC1B;AACA,SAAS,kBAAkB;CACzB,YAAY,CAAC,CAAC,MAAM,kBAAkB;CACtC,OAAO;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"TamaguiProvider.js","names":[],"sources":["esm/views/TamaguiProvider.js"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { ClientOnly } from \"@tamagui/use-did-finish-ssr\";\nimport React, { useEffect } from \"react\";\nimport { getSetting } from \"../config\";\nimport { ComponentContext } from \"../contexts/ComponentContext\";\nimport { stopAccumulatingRules } from \"../helpers/insertStyleRule\";\nimport { updateMediaListeners } from \"../hooks/useMedia\";\nimport { resolveAnimationDriver } from \"../helpers/resolveAnimationDriver\";\nimport { ConfigRevisionCheck } from \"./ConfigRevisionCheck\";\nimport { SafeAreaTracker, hasSafeAreaTracker } from \"./SafeAreaTracker\";\nimport { TamaguiRoot } from \"./TamaguiRoot\";\nimport { ThemeProvider } from \"./ThemeProvider\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\n\nlet _cachedFirstKey;\nlet _cachedConfig;\nfunction firstThemeKey(config) {\n\tif (config !== _cachedConfig) {\n\t\t_cachedConfig = config;\n\t\t_cachedFirstKey = config?.themes ? Object.keys(config.themes)[0] : void 0;\n\t}\n\treturn _cachedFirstKey;\n}\nfunction TamaguiProvider({ children, disableInjectCSS, config, className, defaultTheme: defaultThemeProp, reset, insets, isSubtreeRoot }) {\n\tconst defaultTheme = defaultThemeProp || firstThemeKey(config) || \"light\";\n\tuseIsomorphicLayoutEffect(() => {\n\t\tconst resumeAccumulatingRules = stopAccumulatingRules();\n\t\tupdateMediaListeners();\n\t\treturn resumeAccumulatingRules;\n\t}, []);\n\tconst memoizedInsets = React.useMemo(() => insets, [\n\t\tinsets?.top,\n\t\tinsets?.right,\n\t\tinsets?.bottom,\n\t\tinsets?.left\n\t]);\n\tconst defaultAnimationDriver = React.useMemo(() => {\n\t\tconst driver = resolveAnimationDriver(config?.animations);\n\t\treturn driver?.isStub ? null : driver;\n\t}, [config?.animations]);\n\tuseEffect(() => {\n\t\tdefaultAnimationDriver?.onMount?.();\n\t}, []);\n\tlet contents = /* @__PURE__ */ jsx(ComponentContext.Provider, {\n\t\tanimationDriver: defaultAnimationDriver,\n\t\tinsets: memoizedInsets,\n\t\tchildren: /* @__PURE__ */ jsx(ThemeProvider, {\n\t\t\tdefaultTheme,\n\t\t\treset,\n\t\t\tclassName,\n\t\t\tisSubtreeRoot,\n\t\t\tchildren: /* @__PURE__ */ jsx(TamaguiRoot, {\n\t\t\t\ttheme: defaultTheme,\n\t\t\t\tisRootRoot: true,\n\t\t\t\tchildren\n\t\t\t})\n\t\t})\n\t});\n\tif (getSetting(\"disableSSR\")) contents = /* @__PURE__ */ jsx(ClientOnly, {\n\t\tenabled: true,\n\t\tchildren: contents\n\t});\n\treturn /* @__PURE__ */ jsxs(Fragment, { children: [\n\t\tconfig && !disableInjectCSS && /* @__PURE__ */ jsx(\"style\", {\n\t\t\tprecedence: \"default\",\n\t\t\thref: \"tamagui-css\",\n\t\t\tchildren: config.getCSS()\n\t\t}, \"tamagui-css\"),\n\t\tprocess.env.NODE_ENV !== \"production\" && config && /* @__PURE__ */ jsx(ConfigRevisionCheck, { config }),\n\t\thasSafeAreaTracker() && /* @__PURE__ */ jsx(SafeAreaTracker, {}),\n\t\tcontents\n\t] });\n}\n\nexport { TamaguiProvider };"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAI;AACJ,IAAI;AACJ,SAAS,cAAc,QAAQ;CAC9B,IAAI,WAAW,eAAe;EAC7B,gBAAgB;EAChB,kBAAkB,QAAQ,SAAS,OAAO,KAAK,OAAO,MAAM,EAAE,KAAK,KAAK;CACzE;CACA,OAAO;AACR;AACA,SAAS,gBAAgB,EAAE,UAAU,kBAAkB,QAAQ,WAAW,cAAc,kBAAkB,OAAO,QAAQ,iBAAiB;CACzI,MAAM,eAAe,oBAAoB,cAAc,MAAM,KAAK;CAClE,gCAAgC;EAC/B,MAAM,0BAA0B,sBAAsB;EACtD,qBAAqB;EACrB,OAAO;CACR,GAAG,CAAC,CAAC;CACL,MAAM,iBAAiB,MAAM,cAAc,QAAQ;EAClD,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;CACT,CAAC;CACD,MAAM,yBAAyB,MAAM,cAAc;EAClD,MAAM,SAAS,uBAAuB,QAAQ,UAAU;EACxD,OAAO,QAAQ,SAAS,OAAO;CAChC,GAAG,CAAC,QAAQ,UAAU,CAAC;CACvB,gBAAgB;EACf,wBAAwB,UAAU;CACnC,GAAG,CAAC,CAAC;CACL,IAAI,WAA2B,oBAAI,iBAAiB,UAAU;EAC7D,iBAAiB;EACjB,QAAQ;EACR,UAA0B,oBAAI,eAAe;GAC5C;GACA;GACA;GACA;GACA,UAA0B,oBAAI,aAAa;IAC1C,OAAO;IACP,YAAY;IACZ;GACD,CAAC;EACF,CAAC;CACF,CAAC;CACD,IAAI,WAAW,YAAY,GAAG,WAA2B,oBAAI,YAAY;EACxE,SAAS;EACT,UAAU;CACX,CAAC;CACD,OAAuB,qBAAK,UAAU,EAAE,UAAU;EACjD,UAAU,CAAC,oBAAoC,oBAAI,SAAS;GAC3D,YAAY;GACZ,MAAM;GACN,UAAU,OAAO,OAAO;EACzB,GAAG,aAAa;EAChB,QAAQ,IAAI,aAAa,gBAAgB,UAA0B,oBAAI,qBAAqB,EAAE,OAAO,CAAC;EACtG,mBAAmB,KAAqB,oBAAI,iBAAiB,CAAC,CAAC;EAC/D;CACD,EAAE,CAAC;AACJ"}
+{"version":3,"file":"TamaguiProvider.js","names":[],"sources":["esm/views/TamaguiProvider.js"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { ClientOnly } from \"@tamagui/use-did-finish-ssr\";\nimport React, { useEffect } from \"react\";\nimport { getSetting } from \"../config\";\nimport { ComponentContext } from \"../contexts/ComponentContext\";\nimport { stopAccumulatingRules } from \"../helpers/insertStyleRule\";\nimport { updateMediaListeners } from \"../hooks/useMedia\";\nimport { resolveAnimationDriver } from \"../helpers/resolveAnimationDriver\";\nimport { ConfigRevisionCheck } from \"./ConfigRevisionCheck\";\nimport { SafeAreaTracker, hasSafeAreaTracker } from \"./SafeAreaTracker\";\nimport { TamaguiRoot } from \"./TamaguiRoot\";\nimport { ThemeProvider } from \"./ThemeProvider\";\nimport { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\n\nlet _cachedFirstKey;\nlet _cachedConfig;\nfunction firstThemeKey(config) {\n\tif (config !== _cachedConfig) {\n\t\t_cachedConfig = config;\n\t\t_cachedFirstKey = config?.themes ? Object.keys(config.themes)[0] : void 0;\n\t}\n\treturn _cachedFirstKey;\n}\nfunction TamaguiProvider({ children, disableInjectCSS, config, className, defaultTheme: defaultThemeProp, reset, insets, isSubtreeRoot }) {\n\tconst defaultTheme = defaultThemeProp || firstThemeKey(config) || \"light\";\n\tuseIsomorphicLayoutEffect(() => {\n\t\tconst resumeAccumulatingRules = stopAccumulatingRules();\n\t\tupdateMediaListeners();\n\t\treturn resumeAccumulatingRules;\n\t}, []);\n\tconst memoizedInsets = React.useMemo(() => insets, [\n\t\tinsets?.top,\n\t\tinsets?.right,\n\t\tinsets?.bottom,\n\t\tinsets?.left\n\t]);\n\tconst defaultAnimationDriver = React.useMemo(() => {\n\t\tconst driver = resolveAnimationDriver(config?.animations);\n\t\treturn driver?.isStub ? null : driver;\n\t}, [config?.animations]);\n\tuseEffect(() => {\n\t\tdefaultAnimationDriver?.onMount?.();\n\t}, []);\n\tlet contents = /* @__PURE__ */ jsx(ComponentContext.Provider, {\n\t\tanimationDriver: defaultAnimationDriver,\n\t\tinsets: memoizedInsets,\n\t\tchildren: /* @__PURE__ */ jsx(ThemeProvider, {\n\t\t\tdefaultTheme,\n\t\t\treset,\n\t\t\tclassName,\n\t\t\tisSubtreeRoot,\n\t\t\tchildren: /* @__PURE__ */ jsx(TamaguiRoot, {\n\t\t\t\ttheme: defaultTheme,\n\t\t\t\tisRootRoot: true,\n\t\t\t\tchildren\n\t\t\t})\n\t\t})\n\t});\n\tif (getSetting(\"disableSSR\")) contents = /* @__PURE__ */ jsx(ClientOnly, {\n\t\tenabled: true,\n\t\tchildren: contents\n\t});\n\treturn /* @__PURE__ */ jsxs(Fragment, { children: [\n\t\tconfig && !disableInjectCSS && /* @__PURE__ */ jsx(\"style\", {\n\t\t\tprecedence: \"default\",\n\t\t\thref: \"tamagui-css\",\n\t\t\tchildren: config.getCSS()\n\t\t}, \"tamagui-css\"),\n\t\tprocess.env.NODE_ENV !== \"production\" && config && /* @__PURE__ */ jsx(ConfigRevisionCheck, { config }),\n\t\thasSafeAreaTracker() && /* @__PURE__ */ jsx(SafeAreaTracker, {}),\n\t\tcontents\n\t] });\n}\n\nexport { TamaguiProvider };"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAI;AACJ,IAAI;AACJ,SAAS,cAAc,QAAQ;CAC9B,IAAI,WAAW,eAAe;EAC7B,gBAAgB;EAChB,kBAAkB,QAAQ,SAAS,OAAO,KAAK,OAAO,MAAM,CAAC,CAAC,KAAK,KAAK;CACzE;CACA,OAAO;AACR;AACA,SAAS,gBAAgB,EAAE,UAAU,kBAAkB,QAAQ,WAAW,cAAc,kBAAkB,OAAO,QAAQ,iBAAiB;CACzI,MAAM,eAAe,oBAAoB,cAAc,MAAM,KAAK;CAClE,gCAAgC;EAC/B,MAAM,0BAA0B,sBAAsB;EACtD,qBAAqB;EACrB,OAAO;CACR,GAAG,CAAC,CAAC;CACL,MAAM,iBAAiB,MAAM,cAAc,QAAQ;EAClD,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;CACT,CAAC;CACD,MAAM,yBAAyB,MAAM,cAAc;EAClD,MAAM,SAAS,uBAAuB,QAAQ,UAAU;EACxD,OAAO,QAAQ,SAAS,OAAO;CAChC,GAAG,CAAC,QAAQ,UAAU,CAAC;CACvB,gBAAgB;EACf,wBAAwB,UAAU;CACnC,GAAG,CAAC,CAAC;CACL,IAAI,WAA2B,oBAAI,iBAAiB,UAAU;EAC7D,iBAAiB;EACjB,QAAQ;EACR,UAA0B,oBAAI,eAAe;GAC5C;GACA;GACA;GACA;GACA,UAA0B,oBAAI,aAAa;IAC1C,OAAO;IACP,YAAY;IACZ;GACD,CAAC;EACF,CAAC;CACF,CAAC;CACD,IAAI,WAAW,YAAY,GAAG,WAA2B,oBAAI,YAAY;EACxE,SAAS;EACT,UAAU;CACX,CAAC;CACD,OAAuB,qBAAK,UAAU,EAAE,UAAU;EACjD,UAAU,CAAC,oBAAoC,oBAAI,SAAS;GAC3D,YAAY;GACZ,MAAM;GACN,UAAU,OAAO,OAAO;EACzB,GAAG,aAAa;EAChB,QAAQ,IAAI,aAAa,gBAAgB,UAA0B,oBAAI,qBAAqB,EAAE,OAAO,CAAC;EACtG,mBAAmB,KAAqB,oBAAI,iBAAiB,CAAC,CAAC;EAC/D;CACD,EAAE,CAAC;AACJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"TamaguiProvider.native.js","names":[],"sources":["esm/views/TamaguiProvider.native.js"],"sourcesContent":["import { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nimport { useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { ClientOnly } from \"@tamagui/use-did-finish-ssr\";\nimport React, { useEffect } from \"react\";\nimport { getSetting } from \"../config\";\nimport { ComponentContext } from \"../contexts/ComponentContext\";\nimport { stopAccumulatingRules } from \"../helpers/insertStyleRule\";\nimport { updateMediaListeners } from \"../hooks/useMedia\";\nimport { resolveAnimationDriver } from \"../helpers/resolveAnimationDriver\";\nimport { SafeAreaTracker, hasSafeAreaTracker } from \"./SafeAreaTracker\";\nimport { TamaguiRoot } from \"./TamaguiRoot\";\nimport { ThemeProvider } from \"./ThemeProvider\";\n\nvar _cachedFirstKey;\nvar _cachedConfig;\nfunction firstThemeKey(config) {\n\tif (config !== _cachedConfig) {\n\t\t_cachedConfig = config;\n\t\t_cachedFirstKey = (config === null || config === void 0 ? void 0 : config.themes) ? Object.keys(config.themes)[0] : void 0;\n\t}\n\treturn _cachedFirstKey;\n}\nfunction TamaguiProvider(param) {\n\tvar { children, disableInjectCSS, config, className, defaultTheme: defaultThemeProp, reset, insets, isSubtreeRoot } = param;\n\tvar defaultTheme = defaultThemeProp || firstThemeKey(config) || \"light\";\n\tuseIsomorphicLayoutEffect(function() {\n\t\tvar resumeAccumulatingRules = stopAccumulatingRules();\n\t\tupdateMediaListeners();\n\t\treturn resumeAccumulatingRules;\n\t}, []);\n\tvar memoizedInsets = React.useMemo(function() {\n\t\treturn insets;\n\t}, [\n\t\tinsets === null || insets === void 0 ? void 0 : insets.top,\n\t\tinsets === null || insets === void 0 ? void 0 : insets.right,\n\t\tinsets === null || insets === void 0 ? void 0 : insets.bottom,\n\t\tinsets === null || insets === void 0 ? void 0 : insets.left\n\t]);\n\tvar defaultAnimationDriver = React.useMemo(function() {\n\t\tvar driver = resolveAnimationDriver(config === null || config === void 0 ? void 0 : config.animations);\n\t\treturn (driver === null || driver === void 0 ? void 0 : driver.isStub) ? null : driver;\n\t}, [config === null || config === void 0 ? void 0 : config.animations]);\n\tuseEffect(function() {\n\t\tvar _defaultAnimationDriver_onMount;\n\t\tdefaultAnimationDriver === null || defaultAnimationDriver === void 0 || (_defaultAnimationDriver_onMount = defaultAnimationDriver.onMount) == null || _defaultAnimationDriver_onMount.call(defaultAnimationDriver);\n\t}, []);\n\tvar contents = /* @__PURE__ */ jsx(ComponentContext.Provider, {\n\t\tanimationDriver: defaultAnimationDriver,\n\t\tinsets: memoizedInsets,\n\t\tchildren: /* @__PURE__ */ jsx(ThemeProvider, {\n\t\t\tdefaultTheme,\n\t\t\treset,\n\t\t\tclassName,\n\t\t\tisSubtreeRoot,\n\t\t\tchildren: /* @__PURE__ */ jsx(TamaguiRoot, {\n\t\t\t\ttheme: defaultTheme,\n\t\t\t\tisRootRoot: true,\n\t\t\t\tchildren\n\t\t\t})\n\t\t})\n\t});\n\tif (getSetting(\"disableSSR\")) contents = /* @__PURE__ */ jsx(ClientOnly, {\n\t\tenabled: true,\n\t\tchildren: contents\n\t});\n\treturn /* @__PURE__ */ jsxs(Fragment, { children: [\n\t\tfalse,\n\t\tprocess.env.NODE_ENV !== \"production\" && false,\n\t\thasSafeAreaTracker() && /* @__PURE__ */ jsx(SafeAreaTracker, {}),\n\t\tcontents\n\t] });\n}\n\nexport { TamaguiProvider };"],"mappings":";;;;;;;;;;;;;;AAaA,IAAI;AACJ,IAAI;AACJ,SAAS,cAAc,QAAQ;CAC9B,IAAI,WAAW,eAAe;EAC7B,gBAAgB;EAChB,mBAAmB,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO,UAAU,OAAO,KAAK,OAAO,MAAM,EAAE,KAAK,KAAK;CAC1H;CACA,OAAO;AACR;AACA,SAAS,gBAAgB,OAAO;CAC/B,IAAI,EAAE,UAAU,kBAAkB,QAAQ,WAAW,cAAc,kBAAkB,OAAO,QAAQ,kBAAkB;CACtH,IAAI,eAAe,oBAAoB,cAAc,MAAM,KAAK;CAChE,0BAA0B,WAAW;EACpC,IAAI,0BAA0B,sBAAsB;EACpD,qBAAqB;EACrB,OAAO;CACR,GAAG,CAAC,CAAC;CACL,IAAI,iBAAiB,MAAM,QAAQ,WAAW;EAC7C,OAAO;CACR,GAAG;EACF,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO;EACvD,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO;EACvD,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO;EACvD,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO;CACxD,CAAC;CACD,IAAI,yBAAyB,MAAM,QAAQ,WAAW;EACrD,IAAI,SAAS,uBAAuB,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO,UAAU;EACrG,QAAQ,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO,UAAU,OAAO;CACjF,GAAG,CAAC,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO,UAAU,CAAC;CACtE,UAAU,WAAW;EACpB,IAAI;EACJ,2BAA2B,QAAQ,2BAA2B,KAAK,MAAM,kCAAkC,uBAAuB,YAAY,QAAQ,gCAAgC,KAAK,sBAAsB;CAClN,GAAG,CAAC,CAAC;CACL,IAAI,WAA2B,oBAAI,iBAAiB,UAAU;EAC7D,iBAAiB;EACjB,QAAQ;EACR,UAA0B,oBAAI,eAAe;GAC5C;GACA;GACA;GACA;GACA,UAA0B,oBAAI,aAAa;IAC1C,OAAO;IACP,YAAY;IACZ;GACD,CAAC;EACF,CAAC;CACF,CAAC;CACD,IAAI,WAAW,YAAY,GAAG,WAA2B,oBAAI,YAAY;EACxE,SAAS;EACT,UAAU;CACX,CAAC;CACD,OAAuB,qBAAK,UAAU,EAAE,UAAU;EACjD;EACA,QAAQ,IAAI,aAAa,gBAAgB;EACzC,mBAAmB,KAAqB,oBAAI,iBAAiB,CAAC,CAAC;EAC/D;CACD,EAAE,CAAC;AACJ"}
+{"version":3,"file":"TamaguiProvider.native.js","names":[],"sources":["esm/views/TamaguiProvider.native.js"],"sourcesContent":["import { Fragment, jsx, jsxs } from \"react/jsx-runtime\";\nimport { useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { ClientOnly } from \"@tamagui/use-did-finish-ssr\";\nimport React, { useEffect } from \"react\";\nimport { getSetting } from \"../config\";\nimport { ComponentContext } from \"../contexts/ComponentContext\";\nimport { stopAccumulatingRules } from \"../helpers/insertStyleRule\";\nimport { updateMediaListeners } from \"../hooks/useMedia\";\nimport { resolveAnimationDriver } from \"../helpers/resolveAnimationDriver\";\nimport { SafeAreaTracker, hasSafeAreaTracker } from \"./SafeAreaTracker\";\nimport { TamaguiRoot } from \"./TamaguiRoot\";\nimport { ThemeProvider } from \"./ThemeProvider\";\n\nvar _cachedFirstKey;\nvar _cachedConfig;\nfunction firstThemeKey(config) {\n\tif (config !== _cachedConfig) {\n\t\t_cachedConfig = config;\n\t\t_cachedFirstKey = (config === null || config === void 0 ? void 0 : config.themes) ? Object.keys(config.themes)[0] : void 0;\n\t}\n\treturn _cachedFirstKey;\n}\nfunction TamaguiProvider(param) {\n\tvar { children, disableInjectCSS, config, className, defaultTheme: defaultThemeProp, reset, insets, isSubtreeRoot } = param;\n\tvar defaultTheme = defaultThemeProp || firstThemeKey(config) || \"light\";\n\tuseIsomorphicLayoutEffect(function() {\n\t\tvar resumeAccumulatingRules = stopAccumulatingRules();\n\t\tupdateMediaListeners();\n\t\treturn resumeAccumulatingRules;\n\t}, []);\n\tvar memoizedInsets = React.useMemo(function() {\n\t\treturn insets;\n\t}, [\n\t\tinsets === null || insets === void 0 ? void 0 : insets.top,\n\t\tinsets === null || insets === void 0 ? void 0 : insets.right,\n\t\tinsets === null || insets === void 0 ? void 0 : insets.bottom,\n\t\tinsets === null || insets === void 0 ? void 0 : insets.left\n\t]);\n\tvar defaultAnimationDriver = React.useMemo(function() {\n\t\tvar driver = resolveAnimationDriver(config === null || config === void 0 ? void 0 : config.animations);\n\t\treturn (driver === null || driver === void 0 ? void 0 : driver.isStub) ? null : driver;\n\t}, [config === null || config === void 0 ? void 0 : config.animations]);\n\tuseEffect(function() {\n\t\tvar _defaultAnimationDriver_onMount;\n\t\tdefaultAnimationDriver === null || defaultAnimationDriver === void 0 || (_defaultAnimationDriver_onMount = defaultAnimationDriver.onMount) == null || _defaultAnimationDriver_onMount.call(defaultAnimationDriver);\n\t}, []);\n\tvar contents = /* @__PURE__ */ jsx(ComponentContext.Provider, {\n\t\tanimationDriver: defaultAnimationDriver,\n\t\tinsets: memoizedInsets,\n\t\tchildren: /* @__PURE__ */ jsx(ThemeProvider, {\n\t\t\tdefaultTheme,\n\t\t\treset,\n\t\t\tclassName,\n\t\t\tisSubtreeRoot,\n\t\t\tchildren: /* @__PURE__ */ jsx(TamaguiRoot, {\n\t\t\t\ttheme: defaultTheme,\n\t\t\t\tisRootRoot: true,\n\t\t\t\tchildren\n\t\t\t})\n\t\t})\n\t});\n\tif (getSetting(\"disableSSR\")) contents = /* @__PURE__ */ jsx(ClientOnly, {\n\t\tenabled: true,\n\t\tchildren: contents\n\t});\n\treturn /* @__PURE__ */ jsxs(Fragment, { children: [\n\t\tfalse,\n\t\tprocess.env.NODE_ENV !== \"production\" && false,\n\t\thasSafeAreaTracker() && /* @__PURE__ */ jsx(SafeAreaTracker, {}),\n\t\tcontents\n\t] });\n}\n\nexport { TamaguiProvider };"],"mappings":";;;;;;;;;;;;;;AAaA,IAAI;AACJ,IAAI;AACJ,SAAS,cAAc,QAAQ;CAC9B,IAAI,WAAW,eAAe;EAC7B,gBAAgB;EAChB,mBAAmB,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO,UAAU,OAAO,KAAK,OAAO,MAAM,CAAC,CAAC,KAAK,KAAK;CAC1H;CACA,OAAO;AACR;AACA,SAAS,gBAAgB,OAAO;CAC/B,IAAI,EAAE,UAAU,kBAAkB,QAAQ,WAAW,cAAc,kBAAkB,OAAO,QAAQ,kBAAkB;CACtH,IAAI,eAAe,oBAAoB,cAAc,MAAM,KAAK;CAChE,0BAA0B,WAAW;EACpC,IAAI,0BAA0B,sBAAsB;EACpD,qBAAqB;EACrB,OAAO;CACR,GAAG,CAAC,CAAC;CACL,IAAI,iBAAiB,MAAM,QAAQ,WAAW;EAC7C,OAAO;CACR,GAAG;EACF,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO;EACvD,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO;EACvD,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO;EACvD,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO;CACxD,CAAC;CACD,IAAI,yBAAyB,MAAM,QAAQ,WAAW;EACrD,IAAI,SAAS,uBAAuB,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO,UAAU;EACrG,QAAQ,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO,UAAU,OAAO;CACjF,GAAG,CAAC,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO,UAAU,CAAC;CACtE,UAAU,WAAW;EACpB,IAAI;EACJ,2BAA2B,QAAQ,2BAA2B,KAAK,MAAM,kCAAkC,uBAAuB,YAAY,QAAQ,gCAAgC,KAAK,sBAAsB;CAClN,GAAG,CAAC,CAAC;CACL,IAAI,WAA2B,oBAAI,iBAAiB,UAAU;EAC7D,iBAAiB;EACjB,QAAQ;EACR,UAA0B,oBAAI,eAAe;GAC5C;GACA;GACA;GACA;GACA,UAA0B,oBAAI,aAAa;IAC1C,OAAO;IACP,YAAY;IACZ;GACD,CAAC;EACF,CAAC;CACF,CAAC;CACD,IAAI,WAAW,YAAY,GAAG,WAA2B,oBAAI,YAAY;EACxE,SAAS;EACT,UAAU;CACX,CAAC;CACD,OAAuB,qBAAK,UAAU,EAAE,UAAU;EACjD;EACA,QAAQ,IAAI,aAAa,gBAAgB;EACzC,mBAAmB,KAAqB,oBAAI,iBAAiB,CAAC,CAAC;EAC/D;CACD,EAAE,CAAC;AACJ"}

package/dist/esm/views/Theme.mjs

@@ -1,49 +1,24 @@
 import { createRefComponent } from "@tamagui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { getThemeClassNames } from "@tamagui/helpers";
+import { getThemeClassNames, reservedThemeProps } from "@tamagui/helpers";
 import React, { Children, cloneElement, isValidElement, useRef } from "react";
-import { getConfig } from "../config.mjs";
 import { variableToString } from "../createVariable.mjs";
 import { formatDiagnostic } from "../helpers/formatDiagnostic.mjs";
-import { insertStyleRules, shouldInsertStyleRules, updateRules } from "../helpers/insertStyleRule.mjs";
-import { getInlineValuesFromProps, getVariablesCSSRules } from "../helpers/variables.mjs";
+import { warnOnce } from "../helpers/warnOnce.mjs";
 import { useThemeWithState } from "../hooks/useTheme.mjs";
 import { ThemeStateContext, getThemeState, hasThemeUpdatingProps } from "../hooks/useThemeState.mjs";
 import { ThemeDebug } from "./ThemeDebug.mjs";
 import { jsx } from "react/jsx-runtime";
 
-const useInsertEffectCompat = isWeb ? React.useInsertionEffect || useIsomorphicLayoutEffect : () => {};
 const Theme = createRefComponent(function Theme2(props, ref) {
 	"use no memo";
 	if (props.disable) return props.children;
+	if (process.env.NODE_ENV === "development") {
+		for (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.`);
+	}
 	const { passThrough } = props;
 	const isRoot = !!props["_isRoot"];
-	const config = getConfig();
-	const inlineValues = getInlineValuesFromProps(props, config);
-	let inlineCSS = null;
-	let rulesToInsert = null;
-	if (inlineValues) {
-		inlineCSS = getVariablesCSSRules(inlineValues, config);
-		if (inlineCSS && shouldInsertStyleRules(inlineCSS.identifier)) {
-			updateRules(inlineCSS.identifier, inlineCSS.rules);
-			rulesToInsert = { [inlineCSS.identifier]: [
-				"variables",
-				"",
-				inlineCSS.identifier,
-				void 0,
-				inlineCSS.rules
-			] };
-		}
-	}
-	useInsertEffectCompat(() => {
-		if (rulesToInsert) insertStyleRules(rulesToInsert);
-	}, [inlineCSS?.identifier]);
-	const themeProps = inlineValues ? {
-		...props,
-		inlineValues,
-		inlineClassName: inlineCSS?.identifier
-	} : props;
-	const [_, themeState] = useThemeWithState(themeProps, isRoot, true);
+	const [_, themeState] = useThemeWithState(props, isRoot, true);
 	useIsomorphicLayoutEffect(() => {}, [
 		themeState.id,
 		themeState.name,
@@ -55,7 +30,7 @@ const Theme = createRefComponent(function Theme2(props, ref) {
 		finalChildren = cloneElement(finalChildren, { ref });
 	} catch {}
 	const stateRef = useRef({ hasEverThemed: false });
-	return getThemedChildren(themeState, finalChildren, themeProps, isRoot, stateRef, passThrough);
+	return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);
 });
 Theme["avoidForwardRef"] = true;
 function getThemedChildren(themeState, children, props, isRoot = false, stateRef, passThrough = false) {
@@ -102,7 +77,7 @@ function getThemedChildren(themeState, children, props, isRoot = false, stateRef
 	if (isWeb) {
 		const baseStyle = props.contain ? inertContainedStyle : inertStyle;
 		const { className = "", color } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
-		const inlineClassName = passThrough ? void 0 : props.inlineClassName;
+		const inlineClassName = passThrough ? void 0 : props._themeUpdate?.className;
 		children = /* @__PURE__ */ jsx("span", {
 			className: `${className} is_Theme${inlineClassName ? ` ${inlineClassName}` : ""}`,
 			style: passThrough ? baseStyle : {

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 } from \"@tamagui/helpers\";\nimport React, { Children, cloneElement, isValidElement, useRef } from \"react\";\nimport { getConfig } from \"../config\";\nimport { variableToString } from \"../createVariable\";\nimport { formatDiagnostic } from \"../helpers/formatDiagnostic\";\nimport { insertStyleRules, shouldInsertStyleRules, updateRules } from \"../helpers/insertStyleRule\";\nimport { getInlineValuesFromProps, getVariablesCSSRules } from \"../helpers/variables\";\nimport { useThemeWithState } from \"../hooks/useTheme\";\nimport { ThemeStateContext, getThemeState, hasThemeUpdatingProps } from \"../hooks/useThemeState\";\nimport { ThemeDebug } from \"./ThemeDebug\";\nimport { jsx } from \"react/jsx-runtime\";\n\nconst useInsertEffectCompat = isWeb ? React.useInsertionEffect || useIsomorphicLayoutEffect : () => {};\nconst Theme = createRefComponent(function Theme2(props, ref) {\n\t\"use no memo\";\n\tif (props.disable) return props.children;\n\tconst { passThrough } = props;\n\tconst isRoot = !!props[\"_isRoot\"];\n\tconst config = getConfig();\n\tconst inlineValues = getInlineValuesFromProps(props, config);\n\tlet inlineCSS = null;\n\tlet rulesToInsert = null;\n\tif (inlineValues) {\n\t\tinlineCSS = getVariablesCSSRules(inlineValues, config);\n\t\tif (inlineCSS && shouldInsertStyleRules(inlineCSS.identifier)) {\n\t\t\tupdateRules(inlineCSS.identifier, inlineCSS.rules);\n\t\t\trulesToInsert = { [inlineCSS.identifier]: [\n\t\t\t\t\"variables\",\n\t\t\t\t\"\",\n\t\t\t\tinlineCSS.identifier,\n\t\t\t\tvoid 0,\n\t\t\t\tinlineCSS.rules\n\t\t\t] };\n\t\t}\n\t}\n\tuseInsertEffectCompat(() => {\n\t\tif (rulesToInsert) insertStyleRules(rulesToInsert);\n\t}, [inlineCSS?.identifier]);\n\tconst themeProps = inlineValues ? {\n\t\t...props,\n\t\tinlineValues,\n\t\tinlineClassName: inlineCSS?.identifier\n\t} : props;\n\tconst [_, themeState] = useThemeWithState(themeProps, 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, themeProps, 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.inlineClassName;\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(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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"}

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

@@ -1,36 +1,25 @@
 import { jsx } from "react/jsx-runtime";
 import { createRefComponent } from "@tamagui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { getThemeClassNames } from "@tamagui/helpers";
+import { getThemeClassNames, reservedThemeProps } from "@tamagui/helpers";
 import React, { Children, cloneElement, isValidElement, useRef } from "react";
-import { getConfig } from "../config.native.js";
 import { variableToString } from "../createVariable.native.js";
 import { formatDiagnostic } from "../helpers/formatDiagnostic.native.js";
-import { insertStyleRules } from "../helpers/insertStyleRule.native.js";
 import { removeNativeStyleScope, updateNativeStyleScope } from "../helpers/nativeStyleEngine.native.js";
-import { getInlineValuesFromProps } from "../helpers/variables.native.js";
+import { warnOnce } from "../helpers/warnOnce.native.js";
 import { useThemeWithState } from "../hooks/useTheme.native.js";
 import { ThemeStateContext, getThemeState, hasThemeUpdatingProps } from "../hooks/useThemeState.native.js";
 import { ThemeDebug } from "./ThemeDebug.native.js";
 
-var useInsertEffectCompat = isWeb ? React.useInsertionEffect || useIsomorphicLayoutEffect : function() {};
 var Theme = createRefComponent(function Theme2(props, ref) {
 	"use no memo";
 	if (props.disable) return props.children;
+	if (process.env.NODE_ENV === "development") {
+		for (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.`);
+	}
 	var { passThrough } = props;
 	var isRoot = !!props["_isRoot"];
-	var inlineValues = getInlineValuesFromProps(props, getConfig());
-	var inlineCSS = null;
-	var rulesToInsert = null;
-	useInsertEffectCompat(function() {
-		if (rulesToInsert) insertStyleRules(rulesToInsert);
-	}, [inlineCSS === null || inlineCSS === void 0 ? void 0 : inlineCSS.identifier]);
-	var themeProps = inlineValues ? {
-		...props,
-		inlineValues,
-		inlineClassName: inlineCSS === null || inlineCSS === void 0 ? void 0 : inlineCSS.identifier
-	} : props;
-	var [_, themeState] = useThemeWithState(themeProps, isRoot, true);
+	var [_, themeState] = useThemeWithState(props, isRoot, true);
 	useIsomorphicLayoutEffect(function() {
 		updateNativeStyleScope(themeState.id, themeState.name, themeState.theme);
 		return function() {
@@ -49,7 +38,7 @@ var Theme = createRefComponent(function Theme2(props, ref) {
 		finalChildren = /* @__PURE__ */ cloneElement(finalChildren, { ref });
 	} catch (e) {}
 	var stateRef = useRef({ hasEverThemed: false });
-	return getThemedChildren(themeState, finalChildren, themeProps, isRoot, stateRef, passThrough);
+	return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);
 });
 Theme["avoidForwardRef"] = true;
 function getThemedChildren(themeState, children, props) {
@@ -95,9 +84,10 @@ function getThemedChildren(themeState, children, props) {
 	}
 	if (forceClassName === false) return children;
 	if (isWeb) {
+		var _props__themeUpdate;
 		var baseStyle = props.contain ? inertContainedStyle : inertStyle;
 		var { className = "", color } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
-		var inlineClassName = passThrough ? void 0 : props.inlineClassName;
+		var inlineClassName = passThrough ? void 0 : (_props__themeUpdate = props._themeUpdate) === null || _props__themeUpdate === void 0 ? void 0 : _props__themeUpdate.className;
 		children = /* @__PURE__ */ jsx("span", {
 			className: `${className} is_Theme${inlineClassName ? ` ${inlineClassName}` : ""}`,
 			style: passThrough ? baseStyle : {

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 } from \"@tamagui/helpers\";\nimport React, { Children, cloneElement, isValidElement, useRef } from \"react\";\nimport { getConfig } from \"../config\";\nimport { variableToString } from \"../createVariable\";\nimport { formatDiagnostic } from \"../helpers/formatDiagnostic\";\nimport { insertStyleRules } from \"../helpers/insertStyleRule\";\nimport { removeNativeStyleScope, updateNativeStyleScope } from \"../helpers/nativeStyleEngine\";\nimport { getInlineValuesFromProps } from \"../helpers/variables\";\nimport { useThemeWithState } from \"../hooks/useTheme\";\nimport { ThemeStateContext, getThemeState, hasThemeUpdatingProps } from \"../hooks/useThemeState\";\nimport { ThemeDebug } from \"./ThemeDebug\";\n\nvar useInsertEffectCompat = isWeb ? React.useInsertionEffect || useIsomorphicLayoutEffect : function() {};\nvar Theme = createRefComponent(function Theme2(props, ref) {\n\t\"use no memo\";\n\tif (props.disable) return props.children;\n\tvar { passThrough } = props;\n\tvar isRoot = !!props[\"_isRoot\"];\n\tvar inlineValues = getInlineValuesFromProps(props, getConfig());\n\tvar inlineCSS = null;\n\tvar rulesToInsert = null;\n\tuseInsertEffectCompat(function() {\n\t\tif (rulesToInsert) insertStyleRules(rulesToInsert);\n\t}, [inlineCSS === null || inlineCSS === void 0 ? void 0 : inlineCSS.identifier]);\n\tvar themeProps = inlineValues ? {\n\t\t...props,\n\t\tinlineValues,\n\t\tinlineClassName: inlineCSS === null || inlineCSS === void 0 ? void 0 : inlineCSS.identifier\n\t} : props;\n\tvar [_, themeState] = useThemeWithState(themeProps, 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, themeProps, 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 baseStyle = props.contain ? inertContainedStyle : inertStyle;\n\t\tvar { className = \"\", color } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);\n\t\tvar inlineClassName = passThrough ? void 0 : props.inlineClassName;\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(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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"}

package/dist/esm/views/ThemeUpdate.mjs

@@ -0,0 +1,54 @@
+import { createRefComponent } from "@tamagui/compose-refs";
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import React from "react";
+import { getConfig } from "../config.mjs";
+import { insertStyleRules, shouldInsertStyleRules, updateRules } from "../helpers/insertStyleRule.mjs";
+import { getInlineValuesFromProps, getInlineValuesKey, getMergedInlineTheme, getVariablesCSSRules } from "../helpers/variables.mjs";
+import { Theme } from "./Theme.mjs";
+import { jsx } from "react/jsx-runtime";
+
+const useInsertEffectCompat = isWeb ? React.useInsertionEffect || useIsomorphicLayoutEffect : () => {};
+const updateStates = /* @__PURE__ */ new WeakMap();
+function createThemeUpdateState(values, className) {
+	const cached = updateStates.get(values);
+	if (cached) return cached;
+	const state = {
+		key: getInlineValuesKey(values),
+		className,
+		values,
+		getTheme(parentTheme, themeName, config) {
+			return getMergedInlineTheme(parentTheme, values, themeName, config);
+		}
+	};
+	updateStates.set(values, state);
+	return state;
+}
+const ThemeUpdate = createRefComponent(function ThemeUpdate2(props, ref) {
+	"use no memo";
+	const config = getConfig();
+	const values = getInlineValuesFromProps(props, config);
+	const css = !values ? null : getVariablesCSSRules(values, config);
+	let rulesToInsert = null;
+	if (css && shouldInsertStyleRules(css.identifier)) {
+		updateRules(css.identifier, css.rules);
+		rulesToInsert = { [css.identifier]: [
+			"variables",
+			"",
+			css.identifier,
+			void 0,
+			css.rules
+		] };
+	}
+	useInsertEffectCompat(() => {
+		if (rulesToInsert) insertStyleRules(rulesToInsert);
+	}, [css?.identifier]);
+	if (!values) return props.children;
+	return /* @__PURE__ */ jsx(Theme, {
+		ref,
+		_themeUpdate: createThemeUpdateState(values, css?.identifier),
+		children: props.children
+	});
+});
+
+export { ThemeUpdate, createThemeUpdateState };
+//# sourceMappingURL=ThemeUpdate.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeUpdate.js","names":[],"sources":["esm/views/ThemeUpdate.js"],"sourcesContent":["import { createRefComponent } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport React from \"react\";\nimport { getConfig } from \"../config\";\nimport { insertStyleRules, shouldInsertStyleRules, updateRules } from \"../helpers/insertStyleRule\";\nimport { getInlineValuesFromProps, getInlineValuesKey, getMergedInlineTheme, getVariablesCSSRules } from \"../helpers/variables\";\nimport { Theme } from \"./Theme\";\nimport { jsx } from \"react/jsx-runtime\";\n\nconst useInsertEffectCompat = isWeb ? React.useInsertionEffect || useIsomorphicLayoutEffect : () => {};\nconst updateStates = /* @__PURE__ */ new WeakMap();\nfunction createThemeUpdateState(values, className) {\n\tconst cached = updateStates.get(values);\n\tif (cached) return cached;\n\tconst state = {\n\t\tkey: getInlineValuesKey(values),\n\t\tclassName,\n\t\tvalues,\n\t\tgetTheme(parentTheme, themeName, config) {\n\t\t\treturn getMergedInlineTheme(parentTheme, values, themeName, config);\n\t\t}\n\t};\n\tupdateStates.set(values, state);\n\treturn state;\n}\nconst ThemeUpdate = createRefComponent(function ThemeUpdate2(props, ref) {\n\t\"use no memo\";\n\tconst config = getConfig();\n\tconst values = getInlineValuesFromProps(props, config);\n\tconst css = !values ? null : getVariablesCSSRules(values, config);\n\tlet rulesToInsert = null;\n\tif (css && shouldInsertStyleRules(css.identifier)) {\n\t\tupdateRules(css.identifier, css.rules);\n\t\trulesToInsert = { [css.identifier]: [\n\t\t\t\"variables\",\n\t\t\t\"\",\n\t\t\tcss.identifier,\n\t\t\tvoid 0,\n\t\t\tcss.rules\n\t\t] };\n\t}\n\tuseInsertEffectCompat(() => {\n\t\tif (rulesToInsert) insertStyleRules(rulesToInsert);\n\t}, [css?.identifier]);\n\tif (!values) return props.children;\n\treturn /* @__PURE__ */ jsx(Theme, {\n\t\tref,\n\t\t_themeUpdate: createThemeUpdateState(values, css?.identifier),\n\t\tchildren: props.children\n\t});\n});\n\nexport { ThemeUpdate, createThemeUpdateState };"],"mappings":";;;;;;;;;;AASA,MAAM,wBAAwB,QAAQ,MAAM,sBAAsB,kCAAkC,CAAC;AACrG,MAAM,+BAA+B,IAAI,QAAQ;AACjD,SAAS,uBAAuB,QAAQ,WAAW;CAClD,MAAM,SAAS,aAAa,IAAI,MAAM;CACtC,IAAI,QAAQ,OAAO;CACnB,MAAM,QAAQ;EACb,KAAK,mBAAmB,MAAM;EAC9B;EACA;EACA,SAAS,aAAa,WAAW,QAAQ;GACxC,OAAO,qBAAqB,aAAa,QAAQ,WAAW,MAAM;EACnE;CACD;CACA,aAAa,IAAI,QAAQ,KAAK;CAC9B,OAAO;AACR;AACA,MAAM,cAAc,mBAAmB,SAAS,aAAa,OAAO,KAAK;CACxE;CACA,MAAM,SAAS,UAAU;CACzB,MAAM,SAAS,yBAAyB,OAAO,MAAM;CACrD,MAAM,MAAM,CAAC,SAAS,OAAO,qBAAqB,QAAQ,MAAM;CAChE,IAAI,gBAAgB;CACpB,IAAI,OAAO,uBAAuB,IAAI,UAAU,GAAG;EAClD,YAAY,IAAI,YAAY,IAAI,KAAK;EACrC,gBAAgB,GAAG,IAAI,aAAa;GACnC;GACA;GACA,IAAI;GACJ,KAAK;GACL,IAAI;EACL,EAAE;CACH;CACA,4BAA4B;EAC3B,IAAI,eAAe,iBAAiB,aAAa;CAClD,GAAG,CAAC,KAAK,UAAU,CAAC;CACpB,IAAI,CAAC,QAAQ,OAAO,MAAM;CAC1B,OAAuB,oBAAI,OAAO;EACjC;EACA,cAAc,uBAAuB,QAAQ,KAAK,UAAU;EAC5D,UAAU,MAAM;CACjB,CAAC;AACF,CAAC"}

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

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { createRefComponent } from "@tamagui/compose-refs";
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import React from "react";
+import { getConfig } from "../config.native.js";
+import { insertStyleRules, shouldInsertStyleRules, updateRules } from "../helpers/insertStyleRule.native.js";
+import { getInlineValuesFromProps, getInlineValuesKey, getMergedInlineTheme } from "../helpers/variables.native.js";
+import { Theme } from "./Theme.native.js";
+
+var useInsertEffectCompat = isWeb ? React.useInsertionEffect || useIsomorphicLayoutEffect : function() {};
+var updateStates = /* @__PURE__ */ new WeakMap();
+function createThemeUpdateState(values, className) {
+	var cached = updateStates.get(values);
+	if (cached) return cached;
+	var state = {
+		key: getInlineValuesKey(values),
+		className,
+		values,
+		getTheme(parentTheme, themeName, config) {
+			return getMergedInlineTheme(parentTheme, values, themeName, config);
+		}
+	};
+	updateStates.set(values, state);
+	return state;
+}
+var ThemeUpdate = createRefComponent(function ThemeUpdate2(props, ref) {
+	"use no memo";
+	var values = getInlineValuesFromProps(props, getConfig());
+	var css = null;
+	var rulesToInsert = null;
+	if (css && shouldInsertStyleRules(css.identifier)) {
+		updateRules(css.identifier, css.rules);
+		rulesToInsert = { [css.identifier]: [
+			"variables",
+			"",
+			css.identifier,
+			void 0,
+			css.rules
+		] };
+	}
+	useInsertEffectCompat(function() {
+		if (rulesToInsert) insertStyleRules(rulesToInsert);
+	}, [css === null || css === void 0 ? void 0 : css.identifier]);
+	if (!values) return props.children;
+	return /* @__PURE__ */ jsx(Theme, {
+		ref,
+		_themeUpdate: createThemeUpdateState(values, css === null || css === void 0 ? void 0 : css.identifier),
+		children: props.children
+	});
+});
+
+export { ThemeUpdate, createThemeUpdateState };
+//# sourceMappingURL=ThemeUpdate.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeUpdate.native.js","names":[],"sources":["esm/views/ThemeUpdate.native.js"],"sourcesContent":["import { jsx } from \"react/jsx-runtime\";\nimport { createRefComponent } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport React from \"react\";\nimport { getConfig } from \"../config\";\nimport { insertStyleRules, shouldInsertStyleRules, updateRules } from \"../helpers/insertStyleRule\";\nimport { getInlineValuesFromProps, getInlineValuesKey, getMergedInlineTheme } from \"../helpers/variables\";\nimport { Theme } from \"./Theme\";\n\nvar useInsertEffectCompat = isWeb ? React.useInsertionEffect || useIsomorphicLayoutEffect : function() {};\nvar updateStates = /* @__PURE__ */ new WeakMap();\nfunction createThemeUpdateState(values, className) {\n\tvar cached = updateStates.get(values);\n\tif (cached) return cached;\n\tvar state = {\n\t\tkey: getInlineValuesKey(values),\n\t\tclassName,\n\t\tvalues,\n\t\tgetTheme(parentTheme, themeName, config) {\n\t\t\treturn getMergedInlineTheme(parentTheme, values, themeName, config);\n\t\t}\n\t};\n\tupdateStates.set(values, state);\n\treturn state;\n}\nvar ThemeUpdate = createRefComponent(function ThemeUpdate2(props, ref) {\n\t\"use no memo\";\n\tvar values = getInlineValuesFromProps(props, getConfig());\n\tvar css = null;\n\tvar rulesToInsert = null;\n\tif (css && shouldInsertStyleRules(css.identifier)) {\n\t\tupdateRules(css.identifier, css.rules);\n\t\trulesToInsert = { [css.identifier]: [\n\t\t\t\"variables\",\n\t\t\t\"\",\n\t\t\tcss.identifier,\n\t\t\tvoid 0,\n\t\t\tcss.rules\n\t\t] };\n\t}\n\tuseInsertEffectCompat(function() {\n\t\tif (rulesToInsert) insertStyleRules(rulesToInsert);\n\t}, [css === null || css === void 0 ? void 0 : css.identifier]);\n\tif (!values) return props.children;\n\treturn /* @__PURE__ */ jsx(Theme, {\n\t\tref,\n\t\t_themeUpdate: createThemeUpdateState(values, css === null || css === void 0 ? void 0 : css.identifier),\n\t\tchildren: props.children\n\t});\n});\n\nexport { ThemeUpdate, createThemeUpdateState };"],"mappings":";;;;;;;;;;AASA,IAAI,wBAAwB,QAAQ,MAAM,sBAAsB,4BAA4B,WAAW,CAAC;AACxG,IAAI,+BAA+B,IAAI,QAAQ;AAC/C,SAAS,uBAAuB,QAAQ,WAAW;CAClD,IAAI,SAAS,aAAa,IAAI,MAAM;CACpC,IAAI,QAAQ,OAAO;CACnB,IAAI,QAAQ;EACX,KAAK,mBAAmB,MAAM;EAC9B;EACA;EACA,SAAS,aAAa,WAAW,QAAQ;GACxC,OAAO,qBAAqB,aAAa,QAAQ,WAAW,MAAM;EACnE;CACD;CACA,aAAa,IAAI,QAAQ,KAAK;CAC9B,OAAO;AACR;AACA,IAAI,cAAc,mBAAmB,SAAS,aAAa,OAAO,KAAK;CACtE;CACA,IAAI,SAAS,yBAAyB,OAAO,UAAU,CAAC;CACxD,IAAI,MAAM;CACV,IAAI,gBAAgB;CACpB,IAAI,OAAO,uBAAuB,IAAI,UAAU,GAAG;EAClD,YAAY,IAAI,YAAY,IAAI,KAAK;EACrC,gBAAgB,GAAG,IAAI,aAAa;GACnC;GACA;GACA,IAAI;GACJ,KAAK;GACL,IAAI;EACL,EAAE;CACH;CACA,sBAAsB,WAAW;EAChC,IAAI,eAAe,iBAAiB,aAAa;CAClD,GAAG,CAAC,QAAQ,QAAQ,QAAQ,KAAK,IAAI,KAAK,IAAI,IAAI,UAAU,CAAC;CAC7D,IAAI,CAAC,QAAQ,OAAO,MAAM;CAC1B,OAAuB,oBAAI,OAAO;EACjC;EACA,cAAc,uBAAuB,QAAQ,QAAQ,QAAQ,QAAQ,KAAK,IAAI,KAAK,IAAI,IAAI,UAAU;EACrG,UAAU,MAAM;CACjB,CAAC;AACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "3.0.0-beta.661.1",
+  "version": "3.0.0-beta.719.1",
   "license": "MIT",
   "author": {
     "name": "Nate Wienert"
@@ -39,6 +39,15 @@
       "require": "./dist/cjs/index.cjs",
       "default": "./dist/esm/index.mjs"
     },
+    "./theme-update": {
+      "types": "./types/theme-update.d.ts",
+      "react-native": "./dist/esm/theme-update.native.js",
+      "browser": "./dist/esm/theme-update.mjs",
+      "module": "./dist/esm/theme-update.mjs",
+      "import": "./dist/esm/theme-update.mjs",
+      "require": "./dist/cjs/theme-update.cjs",
+      "default": "./dist/esm/theme-update.mjs"
+    },
     "./dom": {
       "react-native": {
         "types": "./types/dom/index.native.d.ts",
@@ -81,26 +90,26 @@
     "test:web": "vitest --typecheck --run"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "3.0.0-beta.661.1",
-    "@tamagui/constants": "3.0.0-beta.661.1",
-    "@tamagui/dom": "3.0.0-beta.661.1",
-    "@tamagui/helpers": "3.0.0-beta.661.1",
-    "@tamagui/is-equal-shallow": "3.0.0-beta.661.1",
-    "@tamagui/native": "3.0.0-beta.661.1",
-    "@tamagui/normalize-css-color": "3.0.0-beta.661.1",
-    "@tamagui/style-grammar": "3.0.0-beta.661.1",
-    "@tamagui/timer": "3.0.0-beta.661.1",
-    "@tamagui/types": "3.0.0-beta.661.1",
-    "@tamagui/use-did-finish-ssr": "3.0.0-beta.661.1",
-    "@tamagui/use-event": "3.0.0-beta.661.1",
-    "@tamagui/use-force-update": "3.0.0-beta.661.1"
+    "@tamagui/compose-refs": "3.0.0-beta.719.1",
+    "@tamagui/constants": "3.0.0-beta.719.1",
+    "@tamagui/dom": "3.0.0-beta.719.1",
+    "@tamagui/helpers": "3.0.0-beta.719.1",
+    "@tamagui/is-equal-shallow": "3.0.0-beta.719.1",
+    "@tamagui/native": "3.0.0-beta.719.1",
+    "@tamagui/normalize-css-color": "3.0.0-beta.719.1",
+    "@tamagui/style-grammar": "3.0.0-beta.719.1",
+    "@tamagui/timer": "3.0.0-beta.719.1",
+    "@tamagui/types": "3.0.0-beta.719.1",
+    "@tamagui/use-did-finish-ssr": "3.0.0-beta.719.1",
+    "@tamagui/use-event": "3.0.0-beta.719.1",
+    "@tamagui/use-force-update": "3.0.0-beta.719.1"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.661.1",
+    "@tamagui/build": "3.0.0-beta.719.1",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
-    "react": ">=19",
-    "react-dom": "*",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-native": "0.86.2",
     "typescript": "~6.0.3",
     "vitest": "4.0.4"

package/src/config.ts

@@ -10,6 +10,7 @@ import type {
   TokensParsed,
 } from './types'
 import { formatDiagnostic } from './helpers/formatDiagnostic'
+import { prepareConfigRevision } from './helpers/grammarConfig'
 
 export type StyleCompat = 'legacy' | 'react-native' | 'web'
 
@@ -84,6 +85,10 @@ export function getStyleCompat(): StyleCompat {
 
 export const setConfig = (next: TamaguiInternalConfig) => {
   setConfigCalledByThisInstance = true
+  const previous = conf
+  const previousGlobal = globalThis.__tamaguiConfig
+  prepareConfigRevision(next)
+  if (conf !== previous || globalThis.__tamaguiConfig !== previousGlobal) return
   conf = next
   globalThis.__tamaguiConfig = next
 }
@@ -95,6 +100,7 @@ export const setConfigFont = (name: string, font: any, fontParsed: any) => {
   }
   config!.fonts[name] = font
   config!.fontsParsed[name] = fontParsed
+  prepareConfigRevision(config!)
 }
 
 export const getConfig = () => {
@@ -167,6 +173,7 @@ export const updateConfig = (key: string, value: any) => {
     return
   }
   Object.assign(config[key], value)
+  prepareConfigRevision(config)
 }
 
 // searches by value name or token name

package/src/createTamagui.ts

@@ -14,7 +14,7 @@ import {
 import { scanAllSheets } from './helpers/insertStyleRule'
 import { proxyThemesToParents } from './helpers/proxyThemeToParents'
 import { ensureThemeVariable } from './helpers/themes'
-import { mergeConfigVariablesIntoTheme } from './helpers/variables'
+import { mergeConfigVariablesIntoTheme } from './helpers/configVariables'
 import { configureMedia } from './hooks/useMedia'
 import { parseFont, registerFontVariables } from './insertFont'
 import { Tamagui } from './Tamagui'
@@ -348,7 +348,7 @@ function getThemesDeduped(
 
     // custom variables merge into base themes only; sub-themes inherit them
     // via proxyThemesToParents (native) and the CSS cascade (web), so a
-    // inline <Theme> patch survives sub-theme switches below it
+    // a ThemeUpdate patch survives sub-theme switches below it
     if (variables && variablesCtx && !themeName.includes('_')) {
       mergeConfigVariablesIntoTheme(
         theme as any,

package/src/dom/primitives.native.tsx

@@ -15,7 +15,7 @@ import {
   type ReactNode,
   type Ref,
 } from 'react'
-import { unitlessNumberProperties } from '@tamagui/style-grammar'
+import { unitlessNumberProperties } from '@tamagui/style-grammar/runtime'
 
 import {
   clickFromPress,

package/src/helpers/configVariables.ts

@@ -0,0 +1,64 @@
+import { createVariable, isVariable } from '../createVariable'
+import type { GenericVariables, TokensParsed, Variable } from '../types'
+import { findVariableToken, isUnitlessVariableKey } from './variableValue'
+import { warnOnce } from './warnOnce'
+
+export function mergeConfigVariablesIntoTheme(
+  theme: Record<string, Variable>,
+  themeName: string,
+  variables: GenericVariables,
+  tokensParsed: TokensParsed
+) {
+  const scheme = themeName.startsWith('dark') ? 'dark' : 'light'
+  const resolving = new Set<string>()
+
+  const resolveRawValue = (key: string, value: unknown): unknown => {
+    if (typeof value === 'object' && value !== null) {
+      if (isVariable(value)) return value.val
+      if ('needsPx' in value) return value
+      if ('light' in value || 'dark' in value) {
+        return resolveRawValue(key, (value as any)[scheme] ?? (value as any).light)
+      }
+      return
+    }
+    if (typeof value === 'string') {
+      const name = value
+      if (name in variables && !(name in theme)) {
+        if (resolving.has(name)) {
+          warnOnce(
+            `config-cycle:${name}`,
+            `createTamagui variables: reference cycle at "${name}". Dropping.`
+          )
+          return
+        }
+        resolving.add(name)
+        const res = resolveRawValue(name, variables[name])
+        resolving.delete(name)
+        return res
+      }
+      const themeValue = theme[name]
+      if (themeValue !== undefined) {
+        return isVariable(themeValue) ? themeValue.val : themeValue
+      }
+      const token = findVariableToken(tokensParsed, name)
+      return token ? token.val : value
+    }
+    return value
+  }
+
+  for (const key in variables) {
+    if (key in theme) continue
+    let raw = resolveRawValue(key, variables[key])
+    if (raw === undefined) continue
+    let needsPx = typeof raw === 'number' && !isUnitlessVariableKey(key)
+    if (typeof raw === 'object' && raw !== null && 'needsPx' in raw) {
+      needsPx = true
+      raw = (raw as unknown as { val: number }).val
+    }
+    const variable = createVariable({ key, name: key, val: raw as any })
+    if (needsPx) {
+      variable.needsPx = true
+    }
+    theme[key] = variable
+  }
+}