@tamagui/web 1.114.3 → 1.115.0

package/dist/cjs/views/FontLanguage.cjs

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var FontLanguage_exports = {};
+__export(FontLanguage_exports, {
+  FontLanguage: () => FontLanguage
+});
+module.exports = __toCommonJS(FontLanguage_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+const FontLanguage = ({
+  children,
+  ...props
+}) => /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+  style: {
+    display: "contents"
+  },
+  className: Object.entries(props).map(([name, language]) => `t_lang-${name}-${language}`).join(" "),
+  children
+});
+FontLanguage.displayName = "FontLanguage";

package/dist/cjs/views/FontLanguage.native.cjs

@@ -0,0 +1,50 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var FontLanguage_native_exports = {};
+__export(FontLanguage_native_exports, {
+  FontLanguage: () => FontLanguage
+});
+module.exports = __toCommonJS(FontLanguage_native_exports);
+var import_react = __toESM(require("react")),
+  import_ComponentContext = require("../contexts/ComponentContext.cjs"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const FontLanguage = ({
+  children,
+  ...props
+}) => {
+  const language = import_react.default.useMemo(() => props, [JSON.stringify(props)]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
+    language,
+    children
+  });
+};
+FontLanguage.displayName = "FontLanguage";

package/dist/cjs/views/FontLanguage.native.cjs.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/FontLanguage.native.tsx"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB,2BAElB,0BAAiC,yCAM7B;AAHG,MAAM,eAAe,CAAC,EAAE,UAAU,GAAG,MAAM,MAAyB;AACzE,QAAM,WAAW,aAAAA,QAAM,QAAQ,MAAM,OAAO,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AACnE,SACE,4CAAC,yCAAiB,UAAjB,EAA0B,UAAqB,UAAS;AAE7D;AAEA,aAAa,cAAiB;",
+  "names": ["React"]
+}

package/dist/cjs/views/FontLanguage.types.cjs

@@ -0,0 +1,16 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+    get: () => from[key],
+    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+  });
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var FontLanguage_types_exports = {};
+module.exports = __toCommonJS(FontLanguage_types_exports);

package/dist/cjs/views/Slot.cjs

@@ -0,0 +1,78 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var Slot_exports = {};
+__export(Slot_exports, {
+  Slot: () => Slot,
+  Slottable: () => Slottable
+});
+module.exports = __toCommonJS(Slot_exports);
+var import_compose_refs = require("@tamagui/compose-refs"),
+  import_constants = require("@tamagui/constants"),
+  import_helpers = require("@tamagui/helpers"),
+  import_react = require("react"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const is19 = import_react.version.startsWith("19."),
+  Slot = (0, import_react.memo)((0, import_react.forwardRef)(function (props, forwardedRef) {
+    const {
+      children,
+      ...slotProps
+    } = props;
+    if ((0, import_react.isValidElement)(children)) {
+      const mergedProps = mergeSlotProps(children, slotProps);
+      return (0, import_react.cloneElement)(children, children.type.avoidForwardRef ? mergedProps : {
+        ...mergedProps,
+        ref: (0, import_compose_refs.composeRefs)(forwardedRef, is19 ? children.props.ref : children.ref)
+      });
+    }
+    return import_react.Children.count(children) > 1 ? import_react.Children.only(null) : null;
+  })),
+  Slottable = ({
+    children
+  }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children
+  });
+Slottable.displayName = "Slottable";
+const pressMap = import_constants.isWeb ? {
+  onPress: "onClick",
+  onPressOut: "onMouseUp",
+  onPressIn: "onMouseDown"
+} : {};
+function mergeSlotProps(child, slotProps) {
+  const childProps = child.props,
+    overrideProps = {
+      ...childProps
+    },
+    isHTMLChild = typeof child.type == "string";
+  if (isHTMLChild) for (const key in pressMap) key in slotProps && (slotProps[pressMap[key]] = slotProps[key], delete slotProps[key]);
+  for (let propName in childProps) {
+    const slotPropValue = slotProps[propName],
+      childPropValue = childProps[propName];
+    isHTMLChild && propName in pressMap && (propName = pressMap[propName], delete overrideProps[propName]), handleRegex.test(propName) ? overrideProps[propName] = (0, import_helpers.composeEventHandlers)(childPropValue, slotPropValue) : propName === "style" ? overrideProps[propName] = {
+      ...slotPropValue,
+      ...childPropValue
+    } : propName === "className" && (overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" "));
+  }
+  return {
+    ...slotProps,
+    ...overrideProps
+  };
+}
+const handleRegex = /^on[A-Z]/;

package/dist/cjs/views/Stack.cjs

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var Stack_exports = {};
+__export(Stack_exports, {
+  Stack: () => Stack
+});
+module.exports = __toCommonJS(Stack_exports);
+var import_helpers = require("@tamagui/helpers"),
+  import_constants = require("../constants/constants.cjs"),
+  import_createComponent = require("../createComponent.cjs");
+const Stack = (0, import_createComponent.createComponent)({
+  acceptsClassName: !0,
+  defaultProps: import_constants.stackDefaultStyles,
+  validStyles: import_helpers.validStyles
+});
+Stack.displayName = "Stack";

package/dist/cjs/views/TamaguiProvider.cjs

@@ -0,0 +1,93 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var TamaguiProvider_exports = {};
+__export(TamaguiProvider_exports, {
+  TamaguiProvider: () => TamaguiProvider
+});
+module.exports = __toCommonJS(TamaguiProvider_exports);
+var import_constants = require("@tamagui/constants"),
+  import_react = __toESM(require("react")),
+  import_config = require("../config.cjs"),
+  import_ComponentContext = require("../contexts/ComponentContext.cjs"),
+  import_useMedia = require("../hooks/useMedia.cjs"),
+  import_ThemeProvider = require("./ThemeProvider.cjs"),
+  import_jsx_runtime = require("react/jsx-runtime");
+function TamaguiProvider({
+  children,
+  disableInjectCSS,
+  config,
+  className,
+  defaultTheme,
+  disableRootThemeClass,
+  reset,
+  themeClassNameOnRoot
+}) {
+  return (0, import_useMedia.setupMediaListeners)(), process.env.TAMAGUI_REACT_19 || import_constants.isClient && (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    if (config && !disableInjectCSS) {
+      const style = document.createElement("style");
+      return style.appendChild(document.createTextNode(config.getCSS())), document.head.appendChild(style), () => {
+        document.head.removeChild(style);
+      };
+    }
+  }, [config, disableInjectCSS]), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(UnmountedClassName, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
+        animationDriver: config?.animations,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ThemeProvider.ThemeProvider, {
+          themeClassNameOnRoot: themeClassNameOnRoot ?? (0, import_config.getSetting)("themeClassNameOnRoot"),
+          disableRootThemeClass: disableRootThemeClass ?? (0, import_config.getSetting)("disableRootThemeClass"),
+          defaultTheme: defaultTheme ?? (config ? Object.keys(config.themes)[0] : ""),
+          reset,
+          className,
+          children
+        })
+      })
+    }), process.env.TAMAGUI_REACT_19 && config && !disableInjectCSS && /* @__PURE__ */(0, import_jsx_runtime.jsx)("style", {
+      precedence: "default",
+      href: "tamagui-css",
+      children: config.getCSS()
+    }, "tamagui-css")]
+  });
+}
+function UnmountedClassName(props) {
+  const [mounted, setMounted] = import_react.default.useState(!1);
+  return import_react.default.useEffect(() => {
+    setMounted(!0);
+  }, []), import_constants.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+    style: {
+      display: "contents"
+    },
+    className: mounted ? "" : "t_unmounted",
+    children: props.children
+  }) : props.children;
+}
+TamaguiProvider.displayName = "TamaguiProvider";

package/dist/cjs/views/Text.cjs

@@ -0,0 +1,86 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var Text_exports = {};
+__export(Text_exports, {
+  Text: () => Text
+});
+module.exports = __toCommonJS(Text_exports);
+var import_helpers = require("@tamagui/helpers"),
+  import_createComponent = require("../createComponent.cjs");
+const ellipseStyle = {
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  defaultWebStyle = {
+    display: "inline",
+    // display: inline breaks css transform styles
+    boxSizing: "border-box",
+    wordWrap: "break-word",
+    whiteSpace: "pre-wrap",
+    margin: 0
+  },
+  ellipsisStyle = ellipseStyle,
+  Text = (0, import_createComponent.createComponent)({
+    acceptsClassName: !0,
+    isText: !0,
+    defaultProps: {
+      fontFamily: "unset",
+      ...defaultWebStyle
+    },
+    inlineWhenUnflattened: /* @__PURE__ */new Set(["fontFamily"]),
+    variants: {
+      numberOfLines: {
+        1: ellipseStyle,
+        ":number": numberOfLines => numberOfLines >= 1 ? {
+          WebkitLineClamp: numberOfLines,
+          WebkitBoxOrient: "vertical",
+          display: "-webkit-box",
+          overflow: "hidden"
+        } : null
+      },
+      selectable: {
+        true: {
+          userSelect: "text",
+          cursor: "text"
+        },
+        false: {
+          userSelect: "none",
+          cursor: "default"
+        }
+      },
+      /**
+       * @deprecated Use ellipsis instead
+       */
+      ellipse: {
+        true: ellipsisStyle
+      },
+      ellipsis: {
+        true: ellipsisStyle
+      }
+    },
+    validStyles: {
+      ...import_helpers.validStyles,
+      ...import_helpers.stylePropsTextOnly
+    }
+  });
+Text.displayName = "Text";

package/dist/cjs/views/Theme.cjs

@@ -0,0 +1,145 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var Theme_exports = {};
+__export(Theme_exports, {
+  Theme: () => Theme,
+  getThemedChildren: () => getThemedChildren
+});
+module.exports = __toCommonJS(Theme_exports);
+var import_constants = require("@tamagui/constants"),
+  import_react = __toESM(require("react")),
+  import_createVariable = require("../createVariable.cjs"),
+  import_ThemeManagerContext = require("../helpers/ThemeManagerContext.cjs"),
+  import_useTheme = require("../hooks/useTheme.cjs"),
+  import_ThemeDebug = require("./ThemeDebug.cjs"),
+  import_log = require("../helpers/log.cjs"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const Theme = (0, import_react.forwardRef)(function ({
+  children,
+  ...props
+}, ref) {
+  if (props.disable) return children;
+  const isRoot = !!props._isRoot,
+    themeState = (0, import_useTheme.useChangeThemeEffect)(props, isRoot);
+  let finalChildren = props["disable-child-theme"] ? import_react.Children.map(children, child => (0, import_react.cloneElement)(child, {
+    "data-disable-theme": !0
+  })) : children;
+  if (ref) try {
+    import_react.default.Children.only(finalChildren), finalChildren = (0, import_react.cloneElement)(finalChildren, {
+      ref
+    });
+  } catch {}
+  process.env.NODE_ENV === "development" && props.debug === "visualize" && (finalChildren = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
+    themeState,
+    themeProps: props,
+    children: finalChildren
+  }));
+  const stateRef = (0, import_react.useRef)({
+    hasEverThemed: !1
+  });
+  return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef);
+});
+Theme.displayName = "Theme";
+Theme.avoidForwardRef = !0;
+function getThemedChildren(themeState, children, props, isRoot = !1, stateRef) {
+  const {
+    themeManager,
+    isNewTheme
+  } = themeState;
+  if (!themeManager) return children;
+  const {
+    shallow,
+    forceClassName
+  } = props;
+  let shouldRenderChildrenWithTheme = isNewTheme || isRoot || stateRef.current.hasEverThemed || typeof props.inverse == "boolean";
+  if (shouldRenderChildrenWithTheme && (stateRef.current.hasEverThemed = !0), !shouldRenderChildrenWithTheme) return children;
+  process.env.NODE_ENV === "development" && shouldRenderChildrenWithTheme && props.debug === "verbose" && (0, import_log.log)(`adding theme: isRoot ${isRoot}, inverse ${"inverse" in props}, isNewTheme ${isNewTheme}, hasEver ${stateRef.current.hasEverThemed}`, props);
+  let next = children;
+  shallow && (next = import_react.Children.toArray(children).map(child => (0, import_react.isValidElement)(child) ? (0, import_react.cloneElement)(child, void 0, /* @__PURE__ */(0, import_jsx_runtime.jsx)(Theme, {
+    name: themeManager.state.parentName,
+    children: child.props.children
+  })) : child));
+  const elementsWithContext = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ThemeManagerContext.ThemeManagerIDContext.Provider, {
+    value: themeManager.id,
+    children: next
+  });
+  return forceClassName === !1 ? elementsWithContext : import_constants.isWeb ? wrapThemeElements({
+    children: elementsWithContext,
+    themeState,
+    forceClassName,
+    isRoot
+  }) : elementsWithContext;
+}
+function wrapThemeElements({
+  children,
+  themeState,
+  forceClassName,
+  isRoot
+}) {
+  if (isRoot && forceClassName === !1) return children;
+  const inverse = themeState.inversed,
+    requiresExtraWrapper = inverse != null || forceClassName,
+    {
+      className,
+      style
+    } = getThemeClassNameAndStyle(themeState, isRoot);
+  let themedChildren = /* @__PURE__ */(0, import_jsx_runtime.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" : "";
+    themedChildren = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      className: `${inverse ? inverseClassName : ""} _dsp_contents`,
+      children: themedChildren
+    });
+  }
+  return themedChildren;
+}
+const emptyObj = {};
+function getThemeClassNameAndStyle(themeState, isRoot = !1) {
+  if (!themeState.isNewTheme) return {
+    className: "",
+    style: emptyObj
+  };
+  const themeColor = themeState.state?.theme && themeState.isNewTheme ? (0, import_createVariable.variableToString)(themeState.state.theme.color) : "",
+    style = themeColor ? {
+      color: themeColor
+    } : void 0;
+  let className = themeState.state?.className || "";
+  return isRoot && (className = className.replace("t_sub_theme", "")), {
+    style,
+    className
+  };
+}

package/dist/cjs/views/ThemeDebug.cjs

@@ -0,0 +1,92 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var ThemeDebug_exports = {};
+__export(ThemeDebug_exports, {
+  ThemeDebug: () => ThemeDebug
+});
+module.exports = __toCommonJS(ThemeDebug_exports);
+var import_react = __toESM(require("react")),
+  import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"),
+  import_use_force_update = require("@tamagui/use-force-update"),
+  import_react_dom = require("react-dom"),
+  import_jsx_runtime = require("react/jsx-runtime");
+let node;
+function ThemeDebug({
+  themeState,
+  themeProps,
+  children
+}) {
+  if (process.env.NODE_ENV === "development") {
+    const isHydrated = (0, import_use_did_finish_ssr.useDidFinishSSR)(),
+      [onChangeCount, setOnChangeCount] = import_react.default.useState(0),
+      rerender = (0, import_use_force_update.useForceUpdate)(),
+      id = import_react.default.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))), import_react.default.useEffect(() => {
+      themeState.themeManager?.parentManager?.onChangeTheme((name, manager) => {
+        setOnChangeCount(p => ++p), console.warn(`theme changed for ${themeState.themeManager?.id} from parent ${themeState.themeManager?.parentManager?.id} to new name`, name);
+      });
+    }, [themeState.themeManager]), import_react.default.useEffect(() => {
+      const tm = setInterval(rerender, 1e3);
+      return () => clearTimeout(tm);
+    }, []), themeProps["disable-child-theme"] || !isHydrated ? children : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [(0, import_react_dom.createPortal)(/* @__PURE__ */(0, import_jsx_runtime.jsxs)("code", {
+        style: {
+          whiteSpace: "pre",
+          maxWidth: 250,
+          overflow: "auto",
+          padding: 5
+        },
+        children: ["<Theme ", id, " />\xA0", JSON.stringify({
+          propsName: themeProps.name,
+          name: themeState?.state?.name,
+          className: themeState?.state?.className,
+          inverse: themeProps.inverse,
+          forceClassName: themeProps.forceClassName,
+          parent: themeState.themeManager?.state.parentName,
+          id: themeState.themeManager?.id,
+          parentId: themeState.themeManager?.parentManager?.id,
+          isNew: themeState.isNewTheme,
+          onChangeCount,
+          listening: [...(themeState.themeManager?._listeningIds || [])].join(","),
+          _numChangeEventsSent: themeState.themeManager?._numChangeEventsSent
+        }, null, 2)]
+      }), node), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+        style: {
+          color: "red"
+        },
+        children: id
+      }), children]
+    });
+  }
+  return children;
+}
+ThemeDebug.displayName = "ThemeDebug";

package/dist/cjs/views/ThemeDebug.native.cjs

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var ThemeDebug_native_exports = {};
+__export(ThemeDebug_native_exports, {
+  ThemeDebug: () => ThemeDebug
+});
+module.exports = __toCommonJS(ThemeDebug_native_exports);
+function ThemeDebug({
+  themeState,
+  themeProps,
+  children
+}) {
+  return children;
+}
+ThemeDebug.displayName = "ThemeDebug";