@tamagui/web 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/views/Text.native.js

@@ -5,49 +5,48 @@ 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, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var Text_exports = {};
 __export(Text_exports, {
   Text: () => Text
 });
 module.exports = __toCommonJS(Text_exports);
-var import_helpers = require("@tamagui/helpers"),
-  import_createComponent = require("../createComponent.native.js"),
-  ellipsisStyle = {
-    numberOfLines: 1,
-    lineBreakMode: "clip"
+var import_helpers = require("@tamagui/helpers");
+var Text = (0, require("../createComponent.native.js").createComponent)({
+  componentName: "Text",
+  acceptsClassName: true,
+  isText: true,
+  defaultProps: {
+    suppressHighlighting: true
   },
-  Text = (0, import_createComponent.createComponent)({
-    componentName: "Text",
-    acceptsClassName: !0,
-    isText: !0,
-    defaultProps: {
-      suppressHighlighting: !0
-    },
-    inlineWhenUnflattened: /* @__PURE__ */new Set(["fontFamily"]),
-    variants: {
-      ellipsis: {
-        true: ellipsisStyle
+  inlineWhenUnflattened: /* @__PURE__ */new Set(["fontFamily"]),
+  variants: {
+    ellipsis: {
+      true: {
+        numberOfLines: 1,
+        lineBreakMode: "clip"
       }
-    },
-    validStyles: {
-      ...import_helpers.validStyles,
-      ...import_helpers.stylePropsTextOnly
     }
-  });
-Text.displayName = "Text";
+  },
+  validStyles: {
+    ...import_helpers.validStyles,
+    ...import_helpers.stylePropsTextOnly
+  }
+});
 //# sourceMappingURL=Text.native.js.map

package/dist/cjs/views/Text.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Text_exports","__export","Text","module","exports","import_helpers","require","import_createComponent","ellipsisStyle","numberOfLines","lineBreakMode","createComponent","componentName","acceptsClassName","isText","defaultProps","suppressHighlighting","inlineWhenUnflattened","Set","variants","ellipsis","true","validStyles","stylePropsTextOnly","displayName"],"sources":["../../../src/views/Text.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,YAAA;AAAAC,QAAA,CAAAD,YAAA;EAAAE,IAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAgD,CAAAK,YAAA;AAYhD,IAAAK,cAAM,GAAAC,OAEA;EAAAC,sBAAA,GAAAD,OAAA;EAAAE,aAAA;IACEC,aAAU;IACVC,aAAU;EAAA;EACVR,IAAA,OAAAK,sBAAc,CAAAI,eAAA;IACdC,aAAY;IACdC,gBAMc;IAMlBC,MAAA;IACAC,YAAA;MACAC,oBAAQ;IAER;IAEMC,qBACW,qBAAAC,GAAA,gBACT;IAAWC,QACX;MACAC,QAAA;QACAC,IAAA,EAAQb;MACV;IAKN;IAEAc,WAAU;MAEN,GAAAjB,cAAe,CAAAiB,WAAA;MAAA,GACbjB,cAAG,CAAAkB;IAAA;EAIG;AACmBrB,IAAA,CAAAsB,WACjB,SAAiB","ignoreList":[]}
+{"version":3,"names":["to","__toCommonJS","mod","__copyProps","__defProp","value","Text_exports","__export","Text","module","exports","import_helpers","require","createComponent","componentName","acceptsClassName","isText","defaultProps","suppressHighlighting","inlineWhenUnflattened","Set","variants","ellipsis","true","numberOfLines","lineBreakMode","validStyles","stylePropsTextOnly"],"sources":["../../../src/views/Text.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;EAAA;EAAA,OAAAA,EAAA;AAAA;AAAA,IAAAC,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,YAAA;AAAAC,QAAA,CAAAD,YAAgD;EAAAE,IAAA,EAAAA,CAAA,KAAAA;AAAA;AAEhDC,MAAA,CAAAC,OAAA,GAAAT,YAAgC,CAAAK,YAAA;AAUhC,IAAAK,cAAM,GAAAC,OACJ,mBAAY;AACR,IACEJ,IAAA,IAAU,GAAAI,OAAA,iCAAAC,eAAA;EAAAC,aACA;EAAAC,gBACI;EAAAC,MACd;EACFC,YACA;IAAAC,oBAAA;EAAA;EAAAC,qBACiB,qBAAAC,GAAA;EAAAC,QACf;IAAAC,QAAe;MAAAC,IAAA;QACjBC,aAAA;QAECC,aAAM,EAAO;MAKlB;IACA;EAAA;EAAeC,WACf;IACA,GAAAf,cAAQ,CAAAe,WAAA;IAER,GAAAf,cACE,CAAAgB;EAEI;AACwB,EACxB","ignoreList":[]}

package/dist/cjs/views/Theme.cjs

@@ -2,121 +2,155 @@ 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 __getProtoOf = Object.getPrototypeOf;
+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, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  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);
+// 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: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), 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"), 1),
-  import_createVariable = require("../createVariable.cjs"),
-  import_useTheme = require("../hooks/useTheme.cjs"),
-  import_useThemeState = require("../hooks/useThemeState.cjs"),
-  import_ThemeDebug = require("./ThemeDebug.cjs"),
-  import_jsx_runtime = require("react/jsx-runtime");
-const Theme = (0, import_react.forwardRef)(function (props, ref) {
-  if (props.disable) return props.children;
+var import_constants = require("@tamagui/constants");
+var import_react = __toESM(require("react"), 1);
+var import_createVariable = require("../createVariable.cjs");
+var import_useTheme = require("../hooks/useTheme.cjs");
+var import_useThemeState = require("../hooks/useThemeState.cjs");
+var import_ThemeDebug = require("./ThemeDebug.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const Theme = (0, import_react.forwardRef)(function Theme2(props, ref) {
+  "use no memo";
+
+  if (props.disable) {
+    return props.children;
+  }
   const {
-      passThrough
-    } = props,
-    isRoot = !!props._isRoot,
-    [_, themeState] = (0, import_useTheme.useThemeWithState)(props, isRoot);
-  let finalChildren = props["disable-child-theme"] ? import_react.Children.map(props.children, child => passThrough || !(0, import_react.isValidElement)(child) ? child : (0, import_react.cloneElement)(child, {
-    "data-disable-theme": !0
+    passThrough
+  } = props;
+  const isRoot = !!props["_isRoot"];
+  const [_, themeState] = (0, import_useTheme.useThemeWithState)(props, isRoot);
+  const disableDirectChildTheme = props["disable-child-theme"];
+  let finalChildren = disableDirectChildTheme ? import_react.Children.map(props.children, child => passThrough || !(0, import_react.isValidElement)(child) ? child : (0, import_react.cloneElement)(child, {
+    ["data-disable-theme"]: true
   })) : props.children;
-  if (ref) try {
-    import_react.default.Children.only(finalChildren), finalChildren = (0, import_react.cloneElement)(finalChildren, {
-      ref
-    });
-  } catch {}
+  if (ref) {
+    try {
+      import_react.default.Children.only(finalChildren);
+      finalChildren = (0, import_react.cloneElement)(finalChildren, {
+        ref
+      });
+    } catch {}
+  }
   const stateRef = (0, import_react.useRef)({
-    hasEverThemed: !1
+    hasEverThemed: false
   });
   return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);
 });
-Theme.avoidForwardRef = !0;
-function getThemedChildren(themeState, children, props, isRoot = !1, stateRef, passThrough = !1) {
+Theme["avoidForwardRef"] = true;
+function getThemedChildren(themeState, children, props, isRoot = false, stateRef, passThrough = false) {
   const {
-      shallow,
-      forceClassName
-    } = props,
-    state = stateRef.current;
-  let shouldRenderChildrenWithTheme = state.hasEverThemed || themeState.isNew || isRoot || (0, import_useThemeState.hasThemeUpdatingProps)(props);
-  if (process.env.NODE_ENV === "development" && props.debug === "visualize" && (children = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
-    themeState,
-    themeProps: props,
-    children
-  })), !shouldRenderChildrenWithTheme) return children;
+    shallow,
+    forceClassName
+  } = props;
+  const state = stateRef.current;
+  let hasEverThemed = state.hasEverThemed;
+  let shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || (0, import_useThemeState.hasThemeUpdatingProps)(props);
+  if (process.env.NODE_ENV === "development" && props.debug === "visualize") {
+    children = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
+      themeState,
+      themeProps: props,
+      children
+    });
+  }
+  if (!shouldRenderChildrenWithTheme) {
+    return children;
+  }
   children = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_useThemeState.ThemeStateContext.Provider, {
     value: themeState.id,
     children
   });
   const {
-      isInverse,
-      name
-    } = themeState,
-    requiresExtraWrapper = isInverse || forceClassName;
-  if (state.hasEverThemed || (state.hasEverThemed = !0), (requiresExtraWrapper ||
+    isInverse,
+    name
+  } = themeState;
+  const requiresExtraWrapper = isInverse || forceClassName;
+  if (!state.hasEverThemed) {
+    state.hasEverThemed = true;
+  }
+  if (requiresExtraWrapper ||
   // if the theme is exactly dark or light, its likely to change between dark/light
   // and that would require wrapping which would re-parent, so to avoid re-parenting do this
-  themeState.name === "dark" || themeState.name === "light") && (state.hasEverThemed = "wrapped"), shallow && themeState.parentId) {
-    const parentState = (0, import_useThemeState.getThemeState)(themeState.isNew ? themeState.id : themeState.parentId);
-    if (!parentState) throw new Error("\u203C\uFE0F010");
-    children = import_react.Children.toArray(children).map(child => (0, import_react.isValidElement)(child) ? passThrough ? child : (0, import_react.cloneElement)(child, void 0, /* @__PURE__ */(0, import_jsx_runtime.jsx)(Theme, {
-      name: parentState.name,
-      children: child.props.children
-    })) : child);
+  themeState.name === "dark" || themeState.name === "light") {
+    state.hasEverThemed = "wrapped";
+  }
+  if (shallow) {
+    if (!themeState.parentId) {} else {
+      const parentState = (0, import_useThemeState.getThemeState)(themeState.isNew ? themeState.id : themeState.parentId);
+      if (!parentState) throw new Error(`\u203C\uFE0F010`);
+      children = import_react.Children.toArray(children).map(child => {
+        return (0, import_react.isValidElement)(child) ? passThrough ? child : (0, import_react.cloneElement)(child, void 0, /* @__PURE__ */(0, import_jsx_runtime.jsx)(Theme, {
+          name: parentState.name,
+          children: child.props.children
+        })) : child;
+      });
+    }
+  }
+  if (process.env.NODE_ENV === "development") {
+    if (!passThrough && props.debug) {
+      console.warn(` getThemedChildren`, {
+        requiresExtraWrapper,
+        forceClassName,
+        themeState,
+        state,
+        themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)
+      });
+    }
+  }
+  if (forceClassName === false) {
+    return children;
   }
-  if (process.env.NODE_ENV === "development" && !passThrough && props.debug && console.warn(" getThemedChildren", {
-    requiresExtraWrapper,
-    forceClassName,
-    themeState,
-    state,
-    themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)
-  }), forceClassName === !1) return children;
   if (import_constants.isWeb) {
-    const baseStyle = props.contain ? inertContainedStyle : inertStyle,
-      {
-        className = "",
-        color
-      } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
-    if (children = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+    const baseStyle = props.contain ? inertContainedStyle : inertStyle;
+    const {
+      className = "",
+      color
+    } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
+    children = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
       className: `${className} is_Theme`,
       style: passThrough ? baseStyle : {
         color,
         ...baseStyle
       },
       children
-    }), state.hasEverThemed === "wrapped") {
-      const className2 = requiresExtraWrapper ? `${name.startsWith("light") ? "t_light" : name.startsWith("dark") ? "t_dark" : ""} _dsp_contents` : "_dsp_contents";
+    });
+    if (state.hasEverThemed === "wrapped") {
+      const className2 = requiresExtraWrapper ? `${name.startsWith("light") ? "t_light" : name.startsWith("dark") ? "t_dark" : ""} _dsp_contents` : `_dsp_contents`;
       children = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
         className: className2,
         children
@@ -127,28 +161,32 @@ function getThemedChildren(themeState, children, props, isRoot = !1, stateRef, p
   return children;
 }
 const inertStyle = {
-    display: "contents"
-  },
-  inertContainedStyle = {
-    display: "contents",
-    contain: "strict"
-  },
-  empty = {
-    className: "",
-    color: void 0
-  };
-function getThemeClassNameAndColor(themeState, props, isRoot = !1) {
-  if (!themeState.isNew && !props.forceClassName) return empty;
-  const themeColor = themeState?.theme && themeState.isNew ? (0, import_createVariable.variableToString)(themeState.theme.color) : "",
-    style = themeColor ? {
-      color: themeColor
-    } : void 0,
-    themeClassName = themeState.name.replace(schemePrefix, ""),
-    themeNameParts = themeClassName.split("_");
+  display: "contents"
+};
+const inertContainedStyle = {
+  display: "contents",
+  contain: "strict"
+};
+const empty = {
+  className: "",
+  color: void 0
+};
+function getThemeClassNameAndColor(themeState, props, isRoot = false) {
+  if (!themeState.isNew && !props.forceClassName) {
+    return empty;
+  }
+  const themeColor = themeState?.theme && themeState.isNew ? (0, import_createVariable.variableToString)(themeState.theme.color) : "";
+  const style = themeColor ? {
+    color: themeColor
+  } : void 0;
+  const themeClassName = themeState.name.replace(schemePrefix, "");
+  const themeNameParts = themeClassName.split("_");
   let themeClasses = `t_${themeClassName}`;
   if (themeNameParts.length > 1) {
     const hierarchyClasses = [];
-    for (let i = 1; i <= themeNameParts.length; i++) hierarchyClasses.push(`t_${themeNameParts.slice(0, i).join("_")}`);
+    for (let i = 1; i <= themeNameParts.length; i++) {
+      hierarchyClasses.push(`t_${themeNameParts.slice(0, i).join("_")}`);
+    }
     themeClasses = hierarchyClasses.join(" ");
   }
   const className = `${isRoot ? "" : "t_sub_theme"} ${themeClasses}`;