@tamagui/web 1.82.1 → 1.82.2

package/dist/esm/views/Theme.js

@@ -1,48 +1,42 @@
 import { isWeb } from "@tamagui/constants";
-import React, {
-  Children,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  useMemo,
-  useRef
-} from "react";
+import React, { Children, cloneElement, forwardRef, isValidElement, useRef } from "react";
 import { variableToString } from "../createVariable";
 import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
 import { useChangeThemeEffect } from "../hooks/useTheme";
 import { ThemeDebug } from "./ThemeDebug";
 import { jsx } from "react/jsx-runtime";
-const Theme = forwardRef(function(props, ref) {
+const Theme = forwardRef(function({ children, ...props }, ref) {
   if (props.disable)
-    return props.children;
-  const isRoot = !!props._isRoot, disableDirectChildTheme = props["disable-child-theme"], themeState = useChangeThemeEffect(props, isRoot), children = useMemo(() => {
-    let children2 = disableDirectChildTheme ? Children.map(
-      props.children,
-      (child) => cloneElement(child, { "data-disable-theme": !0 })
-    ) : props.children;
-    if (ref)
-      try {
-        React.Children.only(children2), children2 = cloneElement(children2, { ref });
-      } catch {
-      }
-    return process.env.NODE_ENV === "development" && props.debug === "visualize" && (children2 = /* @__PURE__ */ jsx(ThemeDebug, { themeState, themeProps: props, children: children2 })), children2;
-  }, [props.children, disableDirectChildTheme]);
-  return useThemedChildren(themeState, children, props, isRoot);
+    return children;
+  const isRoot = !!props._isRoot, themeState = useChangeThemeEffect(props, isRoot);
+  let finalChildren = props["disable-child-theme"] ? Children.map(
+    children,
+    (child) => cloneElement(child, { "data-disable-theme": !0 })
+  ) : children;
+  if (ref)
+    try {
+      React.Children.only(finalChildren), finalChildren = cloneElement(finalChildren, { ref });
+    } catch {
+    }
+  return process.env.NODE_ENV === "development" && props.debug === "visualize" && (finalChildren = /* @__PURE__ */ jsx(ThemeDebug, { themeState, themeProps: props, children: finalChildren })), getThemedChildren(themeState, finalChildren, props, isRoot);
 });
 Theme.displayName = "Theme";
 Theme.avoidForwardRef = !0;
-function useThemedChildren(themeState, children, props, isRoot = !1, avoidWrap = !1) {
-  const { themeManager, isNewTheme } = themeState, { shallow, forceClassName } = props, hasEverThemed = useRef(!1);
-  if (isNewTheme && (hasEverThemed.current = !0), !(isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot))
+function getThemedChildren(themeState, children, props, isRoot = !1) {
+  const { themeManager, isNewTheme } = themeState;
+  if (!themeManager)
+    throw "\u274C";
+  const { shallow, forceClassName } = props, hasEverThemed = useRef(!1), shouldRenderChildrenWithTheme = isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot;
+  if (shouldRenderChildrenWithTheme && (hasEverThemed.current = !0), !shouldRenderChildrenWithTheme)
     return children;
   let next = children;
-  shallow && themeManager && (next = Children.toArray(children).map((child) => isValidElement(child) ? cloneElement(
+  shallow && (next = Children.toArray(children).map((child) => isValidElement(child) ? cloneElement(
     child,
     void 0,
     /* @__PURE__ */ jsx(Theme, { name: themeManager.state.parentName, children: child.props.children })
   ) : child));
-  const elementsWithContext = themeManager ? /* @__PURE__ */ jsx(ThemeManagerContext.Provider, { value: themeManager, children: next }) : next;
-  return forceClassName === !1 ? elementsWithContext : isWeb && !avoidWrap ? wrapThemeElements({
+  const elementsWithContext = /* @__PURE__ */ jsx(ThemeManagerContext.Provider, { value: themeManager, children: next });
+  return forceClassName === !1 ? elementsWithContext : isWeb ? wrapThemeElements({
     children: elementsWithContext,
     themeState,
     forceClassName,
@@ -57,10 +51,7 @@ function wrapThemeElements({
 }) {
   if (isRoot && forceClassName === !1)
     return children;
-  const inverse = themeState.inversed, requiresExtraWrapper = inverse != null || forceClassName;
-  if (!themeState.isNewTheme && !requiresExtraWrapper)
-    return /* @__PURE__ */ jsx("span", { className: "_dsp_contents is_Theme", children });
-  const { className, style } = getThemeClassNameAndStyle(themeState, isRoot);
+  const inverse = themeState.inversed, requiresExtraWrapper = inverse != null || forceClassName, { className, style } = getThemeClassNameAndStyle(themeState, isRoot);
   let themedChildren = /* @__PURE__ */ jsx("span", { className: `${className} _dsp_contents is_Theme`, style, children });
   if (requiresExtraWrapper) {
     const name = themeState.state?.name || "", inverseClassName = name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "";
@@ -68,7 +59,10 @@ function wrapThemeElements({
   }
   return themedChildren;
 }
+const emptyObj = {};
 function getThemeClassNameAndStyle(themeState, isRoot = !1) {
+  if (!themeState.isNewTheme)
+    return { className: "", style: emptyObj };
   const themeColor = themeState.state?.theme && themeState.isNewTheme ? variableToString(themeState.state.theme.color) : "", style = themeColor ? {
     color: themeColor
   } : void 0;
@@ -77,6 +71,6 @@ function getThemeClassNameAndStyle(themeState, isRoot = !1) {
 }
 export {
   Theme,
-  useThemedChildren
+  getThemedChildren
 };
 //# sourceMappingURL=Theme.js.map

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "mappings": "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",
-  "names": ["children"]
+  "mappings": "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",
+  "names": []
 }

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

@@ -1,48 +1,42 @@
 import { isWeb } from "@tamagui/constants";
-import React, {
-  Children,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  useMemo,
-  useRef
-} from "react";
+import React, { Children, cloneElement, forwardRef, isValidElement, useRef } from "react";
 import { variableToString } from "../createVariable";
 import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
 import { useChangeThemeEffect } from "../hooks/useTheme";
 import { ThemeDebug } from "./ThemeDebug";
 import { jsx } from "react/jsx-runtime";
-const Theme = forwardRef(function(props, ref) {
+const Theme = forwardRef(function({ children, ...props }, ref) {
   if (props.disable)
-    return props.children;
-  const isRoot = !!props._isRoot, disableDirectChildTheme = props["disable-child-theme"], themeState = useChangeThemeEffect(props, isRoot), children = useMemo(() => {
-    let children2 = disableDirectChildTheme ? Children.map(
-      props.children,
-      (child) => cloneElement(child, { "data-disable-theme": !0 })
-    ) : props.children;
-    if (ref)
-      try {
-        React.Children.only(children2), children2 = cloneElement(children2, { ref });
-      } catch {
-      }
-    return process.env.NODE_ENV === "development" && props.debug === "visualize" && (children2 = /* @__PURE__ */ jsx(ThemeDebug, { themeState, themeProps: props, children: children2 })), children2;
-  }, [props.children, disableDirectChildTheme]);
-  return useThemedChildren(themeState, children, props, isRoot);
+    return children;
+  const isRoot = !!props._isRoot, themeState = useChangeThemeEffect(props, isRoot);
+  let finalChildren = props["disable-child-theme"] ? Children.map(
+    children,
+    (child) => cloneElement(child, { "data-disable-theme": !0 })
+  ) : children;
+  if (ref)
+    try {
+      React.Children.only(finalChildren), finalChildren = cloneElement(finalChildren, { ref });
+    } catch {
+    }
+  return process.env.NODE_ENV === "development" && props.debug === "visualize" && (finalChildren = /* @__PURE__ */ jsx(ThemeDebug, { themeState, themeProps: props, children: finalChildren })), getThemedChildren(themeState, finalChildren, props, isRoot);
 });
 Theme.displayName = "Theme";
 Theme.avoidForwardRef = !0;
-function useThemedChildren(themeState, children, props, isRoot = !1, avoidWrap = !1) {
-  const { themeManager, isNewTheme } = themeState, { shallow, forceClassName } = props, hasEverThemed = useRef(!1);
-  if (isNewTheme && (hasEverThemed.current = !0), !(isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot))
+function getThemedChildren(themeState, children, props, isRoot = !1) {
+  const { themeManager, isNewTheme } = themeState;
+  if (!themeManager)
+    throw "\u274C";
+  const { shallow, forceClassName } = props, hasEverThemed = useRef(!1), shouldRenderChildrenWithTheme = isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot;
+  if (shouldRenderChildrenWithTheme && (hasEverThemed.current = !0), !shouldRenderChildrenWithTheme)
     return children;
   let next = children;
-  shallow && themeManager && (next = Children.toArray(children).map((child) => isValidElement(child) ? cloneElement(
+  shallow && (next = Children.toArray(children).map((child) => isValidElement(child) ? cloneElement(
     child,
     void 0,
     /* @__PURE__ */ jsx(Theme, { name: themeManager.state.parentName, children: child.props.children })
   ) : child));
-  const elementsWithContext = themeManager ? /* @__PURE__ */ jsx(ThemeManagerContext.Provider, { value: themeManager, children: next }) : next;
-  return forceClassName === !1 ? elementsWithContext : isWeb && !avoidWrap ? wrapThemeElements({
+  const elementsWithContext = /* @__PURE__ */ jsx(ThemeManagerContext.Provider, { value: themeManager, children: next });
+  return forceClassName === !1 ? elementsWithContext : isWeb ? wrapThemeElements({
     children: elementsWithContext,
     themeState,
     forceClassName,
@@ -57,10 +51,7 @@ function wrapThemeElements({
 }) {
   if (isRoot && forceClassName === !1)
     return children;
-  const inverse = themeState.inversed, requiresExtraWrapper = inverse != null || forceClassName;
-  if (!themeState.isNewTheme && !requiresExtraWrapper)
-    return /* @__PURE__ */ jsx("span", { className: "_dsp_contents is_Theme", children });
-  const { className, style } = getThemeClassNameAndStyle(themeState, isRoot);
+  const inverse = themeState.inversed, requiresExtraWrapper = inverse != null || forceClassName, { className, style } = getThemeClassNameAndStyle(themeState, isRoot);
   let themedChildren = /* @__PURE__ */ jsx("span", { className: `${className} _dsp_contents is_Theme`, style, children });
   if (requiresExtraWrapper) {
     const name = themeState.state?.name || "", inverseClassName = name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "";
@@ -68,7 +59,10 @@ function wrapThemeElements({
   }
   return themedChildren;
 }
+const emptyObj = {};
 function getThemeClassNameAndStyle(themeState, isRoot = !1) {
+  if (!themeState.isNewTheme)
+    return { className: "", style: emptyObj };
   const themeColor = themeState.state?.theme && themeState.isNewTheme ? variableToString(themeState.state.theme.color) : "", style = themeColor ? {
     color: themeColor
   } : void 0;
@@ -77,6 +71,6 @@ function getThemeClassNameAndStyle(themeState, isRoot = !1) {
 }
 export {
   Theme,
-  useThemedChildren
+  getThemedChildren
 };
 //# sourceMappingURL=Theme.js.map

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "mappings": "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",
-  "names": ["children"]
+  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,SAAS,UAAU,cAAc,YAAY,gBAAgB,cAAc;AAElF,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAA+B,4BAA4B;AAE3D,SAAS,kBAAkB;AA8BnB;AA5BD,MAAM,QAAQ,WAAW,SAAe,EAAE,UAAU,GAAG,MAAM,GAAe,KAAK;AAEtF,MAAI,MAAM;AACR,WAAO;AAGT,QAAM,SAAS,CAAC,CAAC,MAAM,SACjB,aAAa,qBAAqB,OAAO,MAAM;AAGrD,MAAI,gBAF4B,MAAM,qBAAqB,IAGvD,SAAS;AAAA,IAAI;AAAA,IAAU,CAAC,UACtB,aAAa,OAAO,EAAG,sBAAuB,GAAK,CAAC;AAAA,EACtD,IACA;AAEJ,MAAI;AACF,QAAI;AACF,YAAM,SAAS,KAAK,aAAa,GACjC,gBAAgB,aAAa,eAAe,EAAE,IAAI,CAAC;AAAA,IACrD,QAAQ;AAAA,IAER;AAGF,SAAI,QAAQ,IAAI,aAAa,iBACvB,MAAM,UAAU,gBAClB,gBACE,oBAAC,cAAW,YAAwB,YAAY,OAC7C,yBACH,IAKC,kBAAkB,YAAY,eAAe,OAAO,MAAM;AACnE,CAAC;AACD,MAAM,cAAiB;AACvB,MAAM,kBAAqB;AAEpB,SAAS,kBACd,YACA,UACA,OACA,SAAS,IACT;AACA,QAAM,EAAE,cAAc,WAAW,IAAI;AAGrC,MAAI,CAAC;AAAc,UAAM;AAEzB,QAAM,EAAE,SAAS,eAAe,IAAI,OAC9B,gBAAgB,OAAO,EAAK,GAE5B,gCACJ,cAAc,MAAM,WAAW,cAAc,WAAW,kBAAkB;AAK5E,MAJI,kCACF,cAAc,UAAU,KAGtB,CAAC;AACH,WAAO;AAGT,MAAI,OAAO;AAGX,EAAI,YACF,OAAO,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,UAC9B,eAAe,KAAK,IACvB;AAAA,IACE;AAAA,IACA;AAAA,IACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,EACF,IACA,KACL;AAGH,QAAM,sBACJ,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,SAAI,mBAAmB,KACd,sBAGL,QACK,kBAAkB;AAAA,IACvB,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,IAGI;AACT;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,UAAU,mBAAmB;AAC/B,WAAO;AAGT,QAAM,UAAU,WAAW,UACrB,uBAAuB,WAAW,QAAQ,gBAE1C,EAAE,WAAW,MAAM,IAAI,0BAA0B,YAAY,MAAM;AAEzE,MAAI,iBACF,oBAAC,UAAK,WAAW,GAAG,SAAS,2BAA2B,OACrD,UACH;AAIF,MAAI,sBAAsB;AACxB,UAAM,OAAO,WAAW,OAAO,QAAQ,IACjC,mBAAmB,KAAK,WAAW,OAAO,IAC5C,wBACA,KAAK,WAAW,MAAM,IACtB,uBACA;AACJ,qBACE,oBAAC,UAAK,WAAW,GAAG,UAAU,mBAAmB,EAAE,kBAChD,0BACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,MAAM,WAAW,CAAC;AAElB,SAAS,0BAA0B,YAAkC,SAAS,IAAO;AACnF,MAAI,CAAC,WAAW;AACd,WAAO,EAAE,WAAW,IAAI,OAAO,SAAS;AAI1C,QAAM,aACJ,WAAW,OAAO,SAAS,WAAW,aAClC,iBAAiB,WAAW,MAAM,MAAM,KAAK,IAC7C,IAEA,QAAQ,aACV;AAAA,IACE,OAAO;AAAA,EACT,IACA;AAEJ,MAAI,YAAY,WAAW,OAAO,aAAa;AAC/C,SAAI,WACF,YAAY,UAAU,QAAQ,eAAe,EAAE,IAE1C,EAAE,OAAO,UAAU;AAC5B;",
+  "names": []
 }

package/dist/esm/views/ThemeDebug.js

@@ -1,3 +1,4 @@
+import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
 import { useForceUpdate } from "@tamagui/use-force-update";
 import { useEffect, useId, useState } from "react";
 import { createPortal } from "react-dom";
@@ -8,10 +9,8 @@ function ThemeDebug({
   themeProps,
   children
 }) {
-  if (themeProps["disable-child-theme"])
-    return children;
   if (process.env.NODE_ENV === "development") {
-    const [onChangeCount, setOnChangeCount] = useState(0), rerender = useForceUpdate(), id = useId();
+    const isHydrated = useDidFinishSSR(), [onChangeCount, setOnChangeCount] = useState(0), rerender = useForceUpdate(), id = useId();
     return process.env.NODE_ENV === "development" && typeof document < "u" && (node || (node = document.createElement("div"), node.style.height = "200px", node.style.overflowY = "scroll", node.style.position = "fixed", node.style.zIndex = 1e7, node.style.bottom = "30px", node.style.left = "30px", node.style.right = "30px", node.style.display = "flex", node.style.border = "1px solid #888", node.style.flexDirection = "row", node.style.background = "var(--background)", document.body.appendChild(node))), useEffect(() => {
       themeState.themeManager?.parentManager?.onChangeTheme((name, manager) => {
         setOnChangeCount((p) => ++p), console.warn(
@@ -22,7 +21,7 @@ function ThemeDebug({
     }, [themeState.themeManager]), useEffect(() => {
       const tm = setInterval(rerender, 1e3);
       return () => clearTimeout(tm);
-    }, []), /* @__PURE__ */ jsxs(Fragment, { children: [
+    }, []), themeProps["disable-child-theme"] || !isHydrated ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
       createPortal(
         /* @__PURE__ */ jsxs(
           "code",

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeDebug.tsx"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAC/B,SAAS,WAAW,OAAO,gBAAgB;AAC3C,SAAS,oBAAoB;AA6DvB,mBA+BE,KA7BE,YAFJ;AAxDN,IAAI;AAEG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AAED,MAAI,WAAW,qBAAqB;AAClC,WAAO;AAGT,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC,GAC9C,WAAW,eAAe,GAC1B,KAAK,MAAM;AAEjB,WAAI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,WAAa,QAC3D,SACH,OAAO,SAAS,cAAc,KAAK,GACnC,KAAK,MAAM,SAAS,SACpB,KAAK,MAAM,YAAY,UACvB,KAAK,MAAM,WAAW,SACtB,KAAK,MAAM,SAAS,KACpB,KAAK,MAAM,SAAS,QACpB,KAAK,MAAM,OAAO,QAClB,KAAK,MAAM,QAAQ,QACnB,KAAK,MAAM,UAAU,QACrB,KAAK,MAAM,SAAS,kBACpB,KAAK,MAAM,gBAAgB,OAC3B,KAAK,MAAM,aAAa,qBACxB,SAAS,KAAK,YAAY,IAAI,KAIlC,UAAU,MAAM;AACd,iBAAW,cAAc,eAAe,cAAc,CAAC,MAAM,YAAY;AACvE,yBAAiB,CAAC,MAAM,EAAE,CAAC,GAC3B,QAAQ;AAAA,UACN,qBAAqB,WAAW,cAAc,EAAE,gBAAgB,WAAW,cAAc,eAAe,EAAE;AAAA,UAC1G;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,WAAW,YAAY,CAAC,GAE5B,UAAU,MAAM;AAEd,YAAM,KAAK,YAAY,UAAU,GAAI;AACrC,aAAO,MAAM,aAAa,EAAS;AAAA,IACrC,GAAG,CAAC,CAAC,GAGH,iCACG;AAAA;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,cACY;AAAA,cAAG;AAAA,cACb,KAAK;AAAA,gBACJ;AAAA,kBACE,MAAM,YAAY,OAAO;AAAA,kBACzB,WAAW,YAAY,OAAO;AAAA,kBAC9B,SAAS,WAAW;AAAA,kBACpB,gBAAgB,WAAW;AAAA,kBAC3B,QAAQ,WAAW,cAAc,MAAM;AAAA,kBACvC,IAAI,WAAW,cAAc;AAAA,kBAC7B,UAAU,WAAW,cAAc,eAAe;AAAA,kBAClD,OAAO,WAAW;AAAA,kBAClB;AAAA,kBACA,WAAW,CAAC,GAAI,WAAW,cAAe,iBAAoB,CAAC,CAAE,EAAE;AAAA,oBACjE;AAAA,kBACF;AAAA,kBACA,sBAAsB,WAAW,cAAe;AAAA,gBAClD;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MAEA,oBAAC,SAAI,OAAO,EAAE,OAAO,MAAM,GAAI,cAAG;AAAA,MAEjC;AAAA,OACH;AAAA,EAEJ;AACA,SAAO;AACT;AAEA,WAAW,cAAiB;",
+  "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,WAAW,OAAO,gBAAgB;AAC3C,SAAS,oBAAoB;AA6DvB,mBA+BE,KA7BE,YAFJ;AAxDN,IAAI;AAEG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,aAAa,gBAAgB,GAC7B,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC,GAC9C,WAAW,eAAe,GAC1B,KAAK,MAAM;AAoCjB,WAlCI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,WAAa,QAC3D,SACH,OAAO,SAAS,cAAc,KAAK,GACnC,KAAK,MAAM,SAAS,SACpB,KAAK,MAAM,YAAY,UACvB,KAAK,MAAM,WAAW,SACtB,KAAK,MAAM,SAAS,KACpB,KAAK,MAAM,SAAS,QACpB,KAAK,MAAM,OAAO,QAClB,KAAK,MAAM,QAAQ,QACnB,KAAK,MAAM,UAAU,QACrB,KAAK,MAAM,SAAS,kBACpB,KAAK,MAAM,gBAAgB,OAC3B,KAAK,MAAM,aAAa,qBACxB,SAAS,KAAK,YAAY,IAAI,KAIlC,UAAU,MAAM;AACd,iBAAW,cAAc,eAAe,cAAc,CAAC,MAAM,YAAY;AACvE,yBAAiB,CAAC,MAAM,EAAE,CAAC,GAC3B,QAAQ;AAAA,UACN,qBAAqB,WAAW,cAAc,EAAE,gBAAgB,WAAW,cAAc,eAAe,EAAE;AAAA,UAC1G;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,WAAW,YAAY,CAAC,GAE5B,UAAU,MAAM;AAEd,YAAM,KAAK,YAAY,UAAU,GAAI;AACrC,aAAO,MAAM,aAAa,EAAS;AAAA,IACrC,GAAG,CAAC,CAAC,GAED,WAAW,qBAAqB,KAAK,CAAC,aACjC,WAIP,iCACG;AAAA;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,YACd;AAAA,YACD;AAAA;AAAA,cACY;AAAA,cAAG;AAAA,cACb,KAAK;AAAA,gBACJ;AAAA,kBACE,MAAM,YAAY,OAAO;AAAA,kBACzB,WAAW,YAAY,OAAO;AAAA,kBAC9B,SAAS,WAAW;AAAA,kBACpB,gBAAgB,WAAW;AAAA,kBAC3B,QAAQ,WAAW,cAAc,MAAM;AAAA,kBACvC,IAAI,WAAW,cAAc;AAAA,kBAC7B,UAAU,WAAW,cAAc,eAAe;AAAA,kBAClD,OAAO,WAAW;AAAA,kBAClB;AAAA,kBACA,WAAW,CAAC,GAAI,WAAW,cAAe,iBAAoB,CAAC,CAAE,EAAE;AAAA,oBACjE;AAAA,kBACF;AAAA,kBACA,sBAAsB,WAAW,cAAe;AAAA,gBAClD;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MAEA,oBAAC,SAAI,OAAO,EAAE,OAAO,MAAM,GAAI,cAAG;AAAA,MAEjC;AAAA,OACH;AAAA,EAEJ;AACA,SAAO;AACT;AAEA,WAAW,cAAiB;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.82.1",
+  "version": "1.82.2",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,20 +27,20 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.82.1",
-    "@tamagui/constants": "1.82.1",
-    "@tamagui/helpers": "1.82.1",
-    "@tamagui/normalize-css-color": "1.82.1",
-    "@tamagui/timer": "1.82.1",
-    "@tamagui/use-did-finish-ssr": "1.82.1",
-    "@tamagui/use-event": "1.82.1",
-    "@tamagui/use-force-update": "1.82.1"
+    "@tamagui/compose-refs": "1.82.2",
+    "@tamagui/constants": "1.82.2",
+    "@tamagui/helpers": "1.82.2",
+    "@tamagui/normalize-css-color": "1.82.2",
+    "@tamagui/timer": "1.82.2",
+    "@tamagui/use-did-finish-ssr": "1.82.2",
+    "@tamagui/use-event": "1.82.2",
+    "@tamagui/use-force-update": "1.82.2"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.82.1",
+    "@tamagui/build": "1.82.2",
     "@testing-library/react": "^14.0.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -65,7 +65,7 @@ import {
   WebOnlyPressEvents,
 } from './types'
 import { Slot } from './views/Slot'
-import { useThemedChildren } from './views/Theme'
+import { getThemedChildren } from './views/Theme'
 import { ThemeDebug } from './views/ThemeDebug'
 
 // this appears to fix expo / babel not picking this up sometimes? really odd
@@ -1205,9 +1205,9 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development' && time) time`group-context`
 
     // disable theme prop is deterministic so conditional hook ok here
-    content = disableThemeProp
+    content = disableTheme
       ? content
-      : useThemedChildren(themeState, content, themeStateProps, false)
+      : getThemedChildren(themeState, content, themeStateProps, false)
 
     if (process.env.NODE_ENV === 'development' && time) time`themed-children`
 

package/src/helpers/ThemeManager.tsx

@@ -30,7 +30,7 @@ export type ThemeManagerState = {
 const emptyState: ThemeManagerState = { name: '' }
 
 export function getHasThemeUpdatingProps(props: ThemeProps) {
-  return props.name || props.componentName || props.inverse || props.reset
+  return Boolean(props.name || props.componentName || props.inverse || props.reset)
 }
 
 let uid = 0
@@ -228,7 +228,7 @@ function getState(
 
   if (
     process.env.NODE_ENV !== 'production' &&
-    typeof props.debug === 'string' &&
+    props.debug &&
     typeof window !== 'undefined'
   ) {
     console.groupCollapsed('ThemeManager.getState()')
@@ -257,19 +257,22 @@ function getState(
     }
 
     if (componentName && !props.reset) {
+      const baseLen = base.length
       let componentPotentials: string[] = []
       // components only look for component themes
-      if (nextName) {
-        const beforeSeparator = prefix.slice(0, prefix.indexOf(THEME_NAME_SEPARATOR))
+      if (nextName && baseLen > 1) {
+        const beforeSeparator = base[0]
         componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`)
       }
       componentPotentials.push(`${prefix}_${componentName}`)
       if (nextName) {
         // do this one and one level up
-        const prefixLessOne = base.slice(0, i - 1).join(THEME_NAME_SEPARATOR)
-        if (prefixLessOne) {
-          const lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`
-          componentPotentials.unshift(lessSpecific)
+        if (i > baseLen) {
+          const prefixLessOne = base.slice(0, i - 1).join(THEME_NAME_SEPARATOR)
+          if (prefixLessOne) {
+            const lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`
+            componentPotentials.unshift(lessSpecific)
+          }
         }
         const moreSpecific = `${prefix}_${nextName}_${componentName}`
         componentPotentials.unshift(moreSpecific)
@@ -282,6 +285,7 @@ function getState(
 
     if (process.env.NODE_ENV !== 'production' && typeof props.debug === 'string') {
       console.info(' getState ', {
+        props,
         found,
         potentials,
         baseManager,

package/src/helpers/getSplitStyles.tsx

@@ -284,7 +284,7 @@ export const getSplitStyles: StyleSplitter = (
     }
 
     // keyInit === 'style' is handled in skipProps
-    if (keyInit in skipProps && !isHOC) {
+    if (keyInit in skipProps && !styleProps.noSkip && !isHOC) {
       if (keyInit === 'group') {
         if (process.env.TAMAGUI_TARGET === 'web') {
           // add container style

package/src/helpers/themeable.tsx

@@ -10,8 +10,10 @@ export function themeable<ComponentType extends (props: any) => any>(
   const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {
     const { themeInverse, theme, componentName, themeReset, ...rest } = props
 
-    // @ts-expect-error its ok
-    const element = <Component ref={ref} {...rest} data-disable-theme />
+    const element = (
+      // @ts-expect-error its ok
+      <Component ref={ref} {...rest} data-disable-theme />
+    )
 
     let contents = (
       <Theme

package/src/hooks/useTheme.tsx

@@ -493,7 +493,7 @@ export const useChangeThemeEffect = (
 
     const wasInversed = prev?.inversed
     const nextInversed = isNewTheme && state.scheme !== parentManager?.state.scheme
-    const inversed = nextInversed ? true : wasInversed ? false : null
+    const inversed = nextInversed ? true : wasInversed != null ? false : null
 
     const response: ChangedThemeResponse = {
       themeManager,

package/src/views/Theme.tsx

@@ -1,12 +1,5 @@
 import { isWeb } from '@tamagui/constants'
-import React, {
-  Children,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  useMemo,
-  useRef,
-} from 'react'
+import React, { Children, cloneElement, forwardRef, isValidElement, useRef } from 'react'
 
 import { variableToString } from '../createVariable'
 import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
@@ -14,66 +7,65 @@ import { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme'
 import type { ThemeProps } from '../types'
 import { ThemeDebug } from './ThemeDebug'
 
-export const Theme = forwardRef(function Theme(props: ThemeProps, ref) {
+export const Theme = forwardRef(function Theme({ children, ...props }: ThemeProps, ref) {
   // @ts-expect-error only for internal views
   if (props.disable) {
-    return props.children
+    return children
   }
 
   const isRoot = !!props['_isRoot']
-  const disableDirectChildTheme = props['disable-child-theme']
   const themeState = useChangeThemeEffect(props, isRoot)
+  const disableDirectChildTheme = props['disable-child-theme']
 
-  const children = useMemo(() => {
-    let children = disableDirectChildTheme
-      ? Children.map(props.children, (child) =>
-          cloneElement(child, { ['data-disable-theme']: true })
-        )
-      : props.children
-
-    if (ref) {
-      try {
-        React.Children.only(children)
-        children = cloneElement(children, { ref })
-      } catch {
-        //ok
-      }
+  let finalChildren = disableDirectChildTheme
+    ? Children.map(children, (child) =>
+        cloneElement(child, { ['data-disable-theme']: true })
+      )
+    : children
+
+  if (ref) {
+    try {
+      React.Children.only(finalChildren)
+      finalChildren = cloneElement(finalChildren, { ref })
+    } catch {
+      //ok
     }
+  }
 
-    if (process.env.NODE_ENV === 'development') {
-      if (props.debug === 'visualize') {
-        children = (
-          <ThemeDebug themeState={themeState} themeProps={props}>
-            {children}
-          </ThemeDebug>
-        )
-      }
+  if (process.env.NODE_ENV === 'development') {
+    if (props.debug === 'visualize') {
+      finalChildren = (
+        <ThemeDebug themeState={themeState} themeProps={props}>
+          {finalChildren}
+        </ThemeDebug>
+      )
     }
+  }
 
-    return children
-  }, [props.children, disableDirectChildTheme])
-
-  return useThemedChildren(themeState, children, props, isRoot)
+  return getThemedChildren(themeState, finalChildren, props, isRoot)
 })
 Theme['displayName'] = 'Theme'
 Theme['avoidForwardRef'] = true
 
-export function useThemedChildren(
+export function getThemedChildren(
   themeState: ChangedThemeResponse,
   children: any,
   props: ThemeProps,
-  isRoot = false,
-  avoidWrap = false
+  isRoot = false
 ) {
   const { themeManager, isNewTheme } = themeState
+
+  // its always there.. should fix type
+  if (!themeManager) throw `❌`
+
   const { shallow, forceClassName } = props
   const hasEverThemed = useRef(false)
-  if (isNewTheme) {
-    hasEverThemed.current = true
-  }
 
   const shouldRenderChildrenWithTheme =
     isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot
+  if (shouldRenderChildrenWithTheme) {
+    hasEverThemed.current = true
+  }
 
   if (!shouldRenderChildrenWithTheme) {
     return children
@@ -82,7 +74,7 @@ export function useThemedChildren(
   let next = children
 
   // each children of these children wont get the theme
-  if (shallow && themeManager) {
+  if (shallow) {
     next = Children.toArray(children).map((child) => {
       return isValidElement(child)
         ? cloneElement(
@@ -96,19 +88,17 @@ export function useThemedChildren(
     })
   }
 
-  const elementsWithContext = themeManager ? (
+  const elementsWithContext = (
     <ThemeManagerContext.Provider value={themeManager}>
       {next}
     </ThemeManagerContext.Provider>
-  ) : (
-    next
   )
 
   if (forceClassName === false) {
     return elementsWithContext
   }
 
-  if (isWeb && !avoidWrap) {
+  if (isWeb) {
     return wrapThemeElements({
       children: elementsWithContext,
       themeState,
@@ -138,10 +128,6 @@ function wrapThemeElements({
   const inverse = themeState.inversed
   const requiresExtraWrapper = inverse != null || forceClassName
 
-  if (!themeState.isNewTheme && !requiresExtraWrapper) {
-    return <span className="_dsp_contents is_Theme">{children}</span>
-  }
-
   const { className, style } = getThemeClassNameAndStyle(themeState, isRoot)
 
   let themedChildren = (
@@ -168,7 +154,13 @@ function wrapThemeElements({
   return themedChildren
 }
 
+const emptyObj = {}
+
 function getThemeClassNameAndStyle(themeState: ChangedThemeResponse, isRoot = false) {
+  if (!themeState.isNewTheme) {
+    return { className: '', style: emptyObj }
+  }
+
   // in order to provide currentColor, set color by default
   const themeColor =
     themeState.state?.theme && themeState.isNewTheme

package/src/views/ThemeDebug.tsx

@@ -1,3 +1,5 @@
+import { isServer } from '@tamagui/constants'
+import { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'
 import { useForceUpdate } from '@tamagui/use-force-update'
 import { useEffect, useId, useState } from 'react'
 import { createPortal } from 'react-dom'
@@ -16,12 +18,8 @@ export function ThemeDebug({
   themeProps: ThemeProps
   children: any
 }) {
-  // disabled
-  if (themeProps['disable-child-theme']) {
-    return children
-  }
-
   if (process.env.NODE_ENV === 'development') {
+    const isHydrated = useDidFinishSSR()
     const [onChangeCount, setOnChangeCount] = useState(0)
     const rerender = useForceUpdate()
     const id = useId()
@@ -60,6 +58,10 @@ export function ThemeDebug({
       return () => clearTimeout(tm as any)
     }, [])
 
+    if (themeProps['disable-child-theme'] || !isHydrated) {
+      return children
+    }
+
     return (
       <>
         {createPortal(

package/types/helpers/ThemeManager.d.ts

@@ -15,7 +15,7 @@ export type ThemeManagerState = {
     className?: string;
     scheme?: ColorScheme;
 };
-export declare function getHasThemeUpdatingProps(props: ThemeProps): string | boolean | undefined;
+export declare function getHasThemeUpdatingProps(props: ThemeProps): boolean;
 export declare class ThemeManager {
     props: ThemeProps;
     id: number;