@tamagui/web 1.82.0 → 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": "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",
+  "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.0",
+  "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.0",
-    "@tamagui/constants": "1.82.0",
-    "@tamagui/helpers": "1.82.0",
-    "@tamagui/normalize-css-color": "1.82.0",
-    "@tamagui/timer": "1.82.0",
-    "@tamagui/use-did-finish-ssr": "1.82.0",
-    "@tamagui/use-event": "1.82.0",
-    "@tamagui/use-force-update": "1.82.0"
+    "@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.0",
+    "@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/expandStyles.ts

@@ -24,8 +24,8 @@ export function fixStyles(style: Record<string, any>) {
   // TODO could be native-only
   // ensure border style set by default to solid
   for (const key in borderDefaults) {
-    if (key in style && !style[borderDefaults[key]]) {
-      style[borderDefaults[key]] = 'solid'
+    if (key in style) {
+      style[borderDefaults[key]] ||= 'solid'
     }
   }
 }

package/src/helpers/expandStylesAndRemoveNullishValues.ts

@@ -1,4 +1,3 @@
-import { SplitStyleProps } from '../types'
 import { expandStyle } from './expandStyle'
 import { fixStyles } from './expandStyles'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'

package/src/helpers/getExpandedShorthands.ts

@@ -1,6 +1,9 @@
 import { getConfig } from '../config'
 import { Shorthands } from '../types'
 
+/**
+ * @deprecated use useProps instead
+ */
 export function getExpandedShorthands<A extends Object>(
   props: A
 ): Omit<A, keyof Shorthands> {

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/getVariantExtras.tsx

@@ -1,7 +1,6 @@
 import { getVariableValue } from '../createVariable'
 import { GenericFonts, GetStyleState } from '../types'
 import { LanguageContextType } from '../views/FontLanguage.types'
-import { createProxy } from './createProxy'
 
 export function getVariantExtras(styleState: GetStyleState) {
   const { curProps, conf, context, theme } = styleState
@@ -23,7 +22,7 @@ export function getVariantExtras(styleState: GetStyleState) {
     font: fonts[fontFamily] || fonts[styleState.conf.defaultFont!],
     // TODO do this in splitstlye
     // we avoid passing in default props for media queries because that would confuse things like SizableText.size:
-    props: createProxy(curProps, {
+    props: new Proxy(curProps, {
       // handles shorthands
       get(target, key) {
         const shorthand = conf.inverseShorthands[key as any]

package/src/helpers/mergeVariants.ts

@@ -5,51 +5,32 @@ import type { GenericVariantDefinitions } from '../types'
 
 export const mergeVariants = (
   parentVariants: GenericVariantDefinitions,
-  ourVariants: GenericVariantDefinitions
+  ourVariants: GenericVariantDefinitions,
+  level = 0
 ) => {
   const variants = {}
 
   for (const key in ourVariants) {
     const parentVariant = parentVariants?.[key]
     const ourVariant = ourVariants[key]
-
-    // do some early checks to avoid bad merges
     if (!parentVariant || typeof ourVariant === 'function') {
       variants[key] = ourVariant
-      continue
-    }
-
-    // do some early checks to avoid bad merges
-    if (parentVariant && !ourVariant) {
+    } else if (parentVariant && !ourVariant) {
       variants[key] = parentVariant[key]
-      continue
-    }
-
-    variants[key] = {}
-
-    for (const subKey in ourVariant) {
-      const val = ourVariant[subKey]
-      const parentVal = parentVariant?.[subKey]
-      if (typeof val === 'function') {
-        variants[key][subKey] = val
-      } else if (!parentVal || typeof parentVal === 'function') {
-        variants[key][subKey] = val
+    } else {
+      if (level === 0) {
+        variants[key] = mergeVariants(
+          parentVariant as Record<string, any>,
+          ourVariant as Record<string, any>,
+          level + 1
+        )
       } else {
-        variants[key][subKey] = {
-          // keep order
-          ...parentVal,
-          ...val,
+        variants[key] = {
+          ...parentVariant,
+          ...ourVariant,
         }
       }
     }
-
-    // merge parent variant keys that are superset
-    if (parentVariant) {
-      variants[key] = {
-        ...parentVariant,
-        ...variants[key],
-      }
-    }
   }
 
   return {

package/src/helpers/normalizeColor.ts

@@ -1,14 +1,10 @@
-import { isWeb } from '@tamagui/constants'
 import { normalizeCSSColor, rgba } from '@tamagui/normalize-css-color'
 
 export { rgba } from '@tamagui/normalize-css-color'
 
 export const normalizeColor = (color?: string | null, opacity?: number) => {
   if (!color) return
-  if (color[0] === '$' || (color[0] === 'v' && color.startsWith('var('))) {
-    return color
-  }
-  if (isWeb && opacity === 1) {
+  if (color[0] === '$' || color.startsWith('var(')) {
     return color
   }
   const colorProcessed = normalizeCSSColor(color)

package/src/helpers/propMapper.ts

@@ -19,6 +19,8 @@ import { isObj } from './isObj'
 import { pseudoDescriptors } from './pseudoDescriptors'
 
 export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) => {
+  lastFontFamilyToken = null
+
   if (!(process.env.TAMAGUI_TARGET === 'native' && isAndroid)) {
     // this shouldnt be necessary and handled in the outer loop
     if (key === 'elevationAndroid') return
@@ -99,7 +101,7 @@ export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) =>
       [key, value],
     ]
 
-    if (key === 'fontFamily') {
+    if (key === 'fontFamily' && lastFontFamilyToken) {
       fontFamilyCache.set(result, lastFontFamilyToken)
     }
 

package/src/helpers/proxyThemeToParents.ts

@@ -1,8 +1,7 @@
-import { getToken, getTokenObject, getTokens } from '../config'
-import { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped'
+import { getTokenObject } from '../config'
 import { DedupedThemes, ThemeParsed } from '../types'
 
-export const themesRaw: Record<string, ThemeParsed> = {}
+const themesRaw: Record<string, ThemeParsed> = {}
 
 // this seems expensive but its necessary to do two loops unless we want to refactor a variety of things again
 // not *too* much work but not a big cost doing the two loops
@@ -50,9 +49,8 @@ export function proxyThemeToParents(themeName: string, theme: ThemeParsed) {
   // proxy fallback values to parent theme values
   return new Proxy(theme, {
     get(target, key) {
-      if (key === GetThemeUnwrapped) return theme
       if (
-        key == null ||
+        !key ||
         // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
         // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
         key == 'undefined' ||
@@ -63,12 +61,11 @@ export function proxyThemeToParents(themeName: string, theme: ThemeParsed) {
       // check parents
       for (let i = numParents - 1; i >= 0; i--) {
         const parent = themesRaw[parents[i]]
-        if (!parent) continue
-        if (Reflect.has(parent, key)) {
+        if (parent && Reflect.has(parent, key)) {
           return Reflect.get(parent, key)
         }
       }
-      return getTokenObject(key as any) ?? Reflect.get(target, key)
+      return getTokenObject(key as any)
     },
   })
 }

package/src/helpers/proxyThemeVariables.tsx

@@ -1,7 +1,5 @@
-import { createProxy } from './createProxy'
-
 export function proxyThemeVariables<A extends Object>(obj: A): A {
-  return createProxy<A>(obj || {}, {
+  return new Proxy<A>(obj || {}, {
     has(target, key) {
       return Reflect.has(target, removeStarting$(key))
     },

package/src/helpers/themeable.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 import { StaticConfig, ThemeableProps } from '../types'
 import { Theme } from '../views/Theme'
@@ -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