@tamagui/core 1.0.1-beta.66 → 1.0.1-beta.69

package/dist/cjs/constants/rnw.js

@@ -21,21 +21,10 @@ __export(rnw_exports, {
   rnw: () => rnw
 });
 module.exports = __toCommonJS(rnw_exports);
-const interopRequire = /* @__PURE__ */ __name((src) => "default" in src ? src.default : src, "interopRequire");
+const interopRequire = /* @__PURE__ */ __name((x) => "default" in x ? x.default : x, "interopRequire");
 const rnw = {};
 if (process.env.IS_STATIC === "is_static") {
-  const createDOMProps = require("react-native-web/dist/cjs/modules/createDOMProps/index.js");
-  const createCompileableStyle = require("react-native-web/dist/cjs/exports/StyleSheet/createCompileableStyle");
-  const createReactDOMStyle = require("react-native-web/dist/cjs/exports/StyleSheet/createReactDOMStyle");
-  const i18Style = require("react-native-web/dist/cjs/exports/StyleSheet/i18nStyle");
-  const atomic = require("react-native-web/dist/cjs/exports/StyleSheet/compile").atomic;
-  Object.assign(rnw, {
-    createDOMProps,
-    createCompileableStyle,
-    createReactDOMStyle,
-    i18Style,
-    atomic
-  });
+  Object.assign(rnw, interopRequire(require("react-native-web/dist/cjs/tamagui-exports")));
 } else if (process.env.TAMAGUI_TARGET === "web") {
   Object.assign(rnw, interopRequire(require("react-native-web").TamaguiExports));
 }

package/dist/cjs/constants/rnw.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/rnw.tsx"],
-  "sourcesContent": ["const interopRequire = (src: any) => ('default' in src ? src.default : src)\n\nexport const rnw: any = {}\n\n// in static mode, require them directly since we can't import react-native-web at all (it has flow stuff in it)\nif (process.env.IS_STATIC === 'is_static') {\n  const createDOMProps = require('react-native-web/dist/cjs/modules/createDOMProps/index.js')\n  const createCompileableStyle = require('react-native-web/dist/cjs/exports/StyleSheet/createCompileableStyle')\n  const createReactDOMStyle = require('react-native-web/dist/cjs/exports/StyleSheet/createReactDOMStyle')\n  const i18Style = require('react-native-web/dist/cjs/exports/StyleSheet/i18nStyle')\n  const atomic = require('react-native-web/dist/cjs/exports/StyleSheet/compile').atomic\n  Object.assign(rnw, {\n    createDOMProps,\n    createCompileableStyle,\n    createReactDOMStyle,\n    i18Style,\n    atomic,\n  })\n} else if (process.env.TAMAGUI_TARGET === 'web') {\n  // when targeting web (client) import it like so\n  Object.assign(rnw, interopRequire(require('react-native-web').TamaguiExports))\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAM,iBAAiB,wBAAC,QAAc,aAAa,MAAM,IAAI,UAAU,KAAhD;AAEhB,MAAM,MAAW,CAAC;AAGzB,IAAI,QAAQ,IAAI,cAAc,aAAa;AACzC,QAAM,iBAAiB,QAAQ,2DAA2D;AAC1F,QAAM,yBAAyB,QAAQ,qEAAqE;AAC5G,QAAM,sBAAsB,QAAQ,kEAAkE;AACtG,QAAM,WAAW,QAAQ,wDAAwD;AACjF,QAAM,SAAS,QAAQ,sDAAsD,EAAE;AAC/E,SAAO,OAAO,KAAK;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,WAAW,QAAQ,IAAI,mBAAmB,OAAO;AAE/C,SAAO,OAAO,KAAK,eAAe,QAAQ,kBAAkB,EAAE,cAAc,CAAC;AAC/E;",
+  "sourcesContent": ["const interopRequire = (x: any) => ('default' in x ? x.default : x)\nexport const rnw: any = {}\n\n// in static mode, require them directly since we can't import react-native-web at all (it has flow stuff in it)\nif (process.env.IS_STATIC === 'is_static') {\n  Object.assign(rnw, interopRequire(require('react-native-web/dist/cjs/tamagui-exports')))\n} else if (process.env.TAMAGUI_TARGET === 'web') {\n  Object.assign(rnw, interopRequire(require('react-native-web').TamaguiExports))\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAM,iBAAiB,wBAAC,MAAY,aAAa,IAAI,EAAE,UAAU,GAA1C;AAChB,MAAM,MAAW,CAAC;AAGzB,IAAI,QAAQ,IAAI,cAAc,aAAa;AACzC,SAAO,OAAO,KAAK,eAAe,QAAQ,2CAA2C,CAAC,CAAC;AACzF,WAAW,QAAQ,IAAI,mBAAmB,OAAO;AAC/C,SAAO,OAAO,KAAK,eAAe,QAAQ,kBAAkB,EAAE,cAAc,CAAC;AAC/E;",
   "names": []
 }

package/dist/cjs/createComponent.js

@@ -84,14 +84,14 @@ var import_Pressability = require("./Pressability");
 var import_Slot = require("./views/Slot");
 var import_TextAncestorContext = require("./views/TextAncestorContext");
 import_react.default["keep"];
-const defaultComponentState = {
+const defaultComponentState = Object.freeze({
   hover: false,
   press: false,
   pressIn: false,
   focus: false,
   mounted: false,
   animation: null
-};
+});
 const mouseUps = /* @__PURE__ */ new Set();
 if (typeof document !== "undefined") {
   document.addEventListener("mouseup", () => {
@@ -132,18 +132,6 @@ function createComponent(configIn, ParentComponent) {
   let defaultNativeStyleSheet;
   let tamaguiDefaultProps;
   let initialSplitStyles;
-  function addPseudoToStyles(styles, name, pseudos) {
-    const pseudoStyle = pseudos[name];
-    const shouldNestObject = import_platform.isWeb && name !== "enterStyle" && name !== "exitStyle";
-    const defaultPseudoStyle = initialSplitStyles.pseudos[name];
-    if (defaultPseudoStyle) {
-      styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
-    }
-    if (pseudoStyle) {
-      styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
-    }
-  }
-  __name(addPseudoToStyles, "addPseudoToStyles");
   const component = (0, import_react.forwardRef)((propsIn, forwardedRef) => {
     var _a, _d, _e, _f;
     let props;
@@ -155,7 +143,7 @@ function createComponent(configIn, ParentComponent) {
     const { Component, isText, isZStack } = staticConfig;
     const componentName = props.componentName || staticConfig.componentName;
     const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
-    if (process.env.NODE_ENV === "development") {
+    if (true) {
       if (props["debug"]) {
         console.log("\u26A0\uFE0F", componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
         console.log("props in:", {
@@ -169,17 +157,27 @@ function createComponent(configIn, ParentComponent) {
     }
     const forceUpdate = (0, import_use_force_update.useForceUpdate)();
     const theme = (0, import_useTheme.useTheme)(props.theme, componentName, props, forceUpdate);
-    const [state, set_] = (0, import_react.useState)(defaultComponentState);
-    const setStateShallow = (0, import_createShallowUpdate.createShallowUpdate)(set_);
+    const statesUsed = (0, import_react.useState)(defaultComponentState);
+    const setStateShallow = (0, import_createShallowUpdate.createShallowUpdate)(statesUsed[1]);
+    let state = statesUsed[0];
+    if (propsIn.forceStyle) {
+      state = __spreadProps(__spreadValues({}, state), {
+        [propsIn.forceStyle]: true
+      });
+    }
     const shouldAvoidClasses = !!(props.animation && avoidClasses);
-    const splitStyleState = !shouldAvoidClasses ? __spreadProps(__spreadValues({}, state), {
+    const shouldForcePseudo = !!propsIn.forceStyle;
+    const hasTextAncestor = !!(import_platform.isWeb ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false);
+    const splitStyleState = !shouldAvoidClasses && !shouldForcePseudo ? __spreadProps(__spreadValues({}, state), {
+      hasTextAncestor,
       dynamicStylesInline: true
     }) : __spreadProps(__spreadValues({}, state), {
       noClassNames: true,
       dynamicStylesInline: true,
+      hasTextAncestor,
       resolveVariablesAs: "value"
     });
-    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, splitStyleState, shouldAvoidClasses || props.asChild ? null : initialSplitStyles.classNames, props["debug"]);
+    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, splitStyleState, props.asChild ? null : initialSplitStyles.classNames, props["debug"]);
     const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
@@ -216,6 +214,7 @@ function createComponent(configIn, ParentComponent) {
       onMouseLeave,
       hrefAttrs,
       separator,
+      forceStyle: _forceStyle,
       onClick,
       theme: _themeProp,
       defaultVariants
@@ -237,12 +236,12 @@ function createComponent(configIn, ParentComponent) {
       "onMouseLeave",
       "hrefAttrs",
       "separator",
+      "forceStyle",
       "onClick",
       "theme",
       "defaultVariants"
     ]);
     const isTaggable = !Component || typeof Component === "string";
-    const hasTextAncestor = import_platform.isWeb ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false;
     const element = import_platform.isWeb ? isTaggable ? tag || Component : Component : Component;
     const BaseTextComponent = !import_platform.isWeb ? import_react_native.Text : element || "span";
     const BaseViewComponent = !import_platform.isWeb ? import_react_native.View : element || (hasTextAncestor ? "span" : "div");
@@ -461,7 +460,7 @@ function createComponent(configIn, ParentComponent) {
         viewProps.ref = forwardedRef;
       }
     }
-    if (process.env.NODE_ENV === "development" && !isText && import_platform.isWeb) {
+    if (!isText && import_platform.isWeb) {
       import_react.Children.toArray(props.children).forEach((item) => {
         if (typeof item === "string") {
           console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
@@ -490,7 +489,7 @@ function createComponent(configIn, ParentComponent) {
     }, [hasEnterStyle, props.animation]);
     let styles;
     const animationStyles = state.animation ? state.animation.style : null;
-    if (isStringElement && shouldAvoidClasses) {
+    if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
       styles = __spreadValues(__spreadValues(__spreadValues({}, defaultNativeStyle), animationStyles ?? style), medias);
     } else {
       styles = [
@@ -499,10 +498,21 @@ function createComponent(configIn, ParentComponent) {
         medias
       ];
       if (!animationStyles) {
-        !state.mounted && addPseudoToStyles(styles, "enterStyle", pseudos);
-        state.hover && addPseudoToStyles(styles, "hoverStyle", pseudos);
-        state.focus && addPseudoToStyles(styles, "focusStyle", pseudos);
-        state.press && addPseudoToStyles(styles, "pressStyle", pseudos);
+        const initPseudos = initialSplitStyles.pseudos;
+        const force = shouldForcePseudo;
+        !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, "enterStyle");
+        state.hover && addPseudoToStyles(styles, initPseudos, pseudos, "hoverStyle", force);
+        state.focus && addPseudoToStyles(styles, initPseudos, pseudos, "focusStyle", force);
+        state.press && addPseudoToStyles(styles, initPseudos, pseudos, "pressStyle", force);
+      }
+      if (shouldForcePseudo) {
+        const next = {};
+        for (const style2 of styles) {
+          if (style2) {
+            Object.assign(next, style2);
+          }
+        }
+        Object.assign(splitStyles.style, next);
       }
     }
     if (import_platform.isWeb) {
@@ -514,20 +524,20 @@ function createComponent(configIn, ParentComponent) {
         theme.className,
         classNames ? Object.values(classNames).join(" ") : ""
       ];
-      if (!shouldAvoidClasses) {
-        if (classNames) {
-          classList.push(Object.values(classNames).join(" "));
-        }
-      }
       const className = classList.join(" ");
       const style2 = animationStyles ?? splitStyles.style;
       if (process.env.NODE_ENV === "development" && props["debug"]) {
         console.log("  \xBB className", { splitStyles, style: style2, isStringElement, pseudos, state, classNames, propsClassName: props.className, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, (0, import_insertStyleRule.getAllSelectors)()[v]])) });
       }
-      if (staticConfig.isReactNativeWeb) {
+      const isAnimatedReactNativeWeb = props.animation && avoidClasses;
+      if (staticConfig.isReactNativeWeb || isAnimatedReactNativeWeb) {
         viewProps.dataSet = __spreadProps(__spreadValues({}, viewProps.dataSet), {
-          className
+          className,
+          id: props.id
         });
+        if (props["data-is"]) {
+          viewProps.dataSet.is = props["data-is"];
+        }
       } else {
         viewProps.className = className;
       }
@@ -719,7 +729,7 @@ function createComponent(configIn, ParentComponent) {
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.log("  \xBB ", __spreadValues({ propsIn: __spreadValues({}, props), propsOut: __spreadValues({}, viewProps), state, splitStyles, animationStyles, isStringElement, classNamesIn: (_e = props.className) == null ? void 0 : _e.split(" "), classNamesOut: (_f = viewProps.className) == null ? void 0 : _f.split(" "), events, shouldAttach, ViewComponent: elementType, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles }, typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig } : null));
+        console.log("\u2B50\uFE0F", __spreadValues({ propsIn: __spreadValues({}, props), propsOut: __spreadValues({}, viewProps), elementType, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_e = props.className) == null ? void 0 : _e.split(" "), classNamesOut: (_f = viewProps.className) == null ? void 0 : _f.split(" "), events, shouldAttach, ViewComponent: elementType, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles }, typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo } : null));
       }
     }
     if (features.elements.length) {
@@ -768,6 +778,9 @@ function createComponent(configIn, ParentComponent) {
         defaultPropsIn = (0, import_mergeProps.mergeProps)(defaultPropsIn, ourDefaultsMerged);
       }
     }
+    if (process.env.NODE_ENV === "development" && defaultPropsIn["debug"] === "break") {
+      debugger;
+    }
     initialSplitStyles = (0, import_getSplitStyles.insertSplitStyles)(defaultPropsIn, staticConfig, initialTheme, {
       mounted: true,
       hover: false,
@@ -782,7 +795,7 @@ function createComponent(configIn, ParentComponent) {
     const validStyles2 = staticConfig.validStyles || import_helpers.stylePropsView;
     for (const key in staticConfig.defaultProps) {
       const val = staticConfig.defaultProps[key];
-      if (typeof val === "string" && val[0] === "$" || !validStyles2[key]) {
+      if (typeof val === "string" && val[0] === "$" || !validStyles2[key] || val[0] === "_") {
         defaults[key] = val;
       } else {
         defaultNativeStyle[key] = val;
@@ -881,11 +894,11 @@ function spacedChildren({
 }) {
   const hasSpace = !!(space || spaceFlex);
   const hasSeparator = !(separator === void 0 || separator === null);
-  if (!hasSpace && !hasSeparator) {
+  if (!hasSpace && !hasSeparator && !isZStack) {
     return children;
   }
   const childrenList = import_react.Children.toArray(children);
-  if (childrenList.length <= 1) {
+  if (childrenList.length <= 1 && !isZStack) {
     return childrenList;
   }
   const final = [];
@@ -898,6 +911,12 @@ function spacedChildren({
         key: index
       }, isZStack ? /* @__PURE__ */ import_react.default.createElement(AbsoluteFill, null, child) : child));
     }
+    if (isUnspaced(child) && index === 0) {
+      continue;
+    }
+    if (isZStack) {
+      continue;
+    }
     const next = childrenList[index + 1];
     if (next && !isUnspaced(next)) {
       if (separator) {
@@ -947,17 +966,10 @@ function isUnspaced(child) {
 }
 __name(isUnspaced, "isUnspaced");
 function AbsoluteFill(props) {
-  return import_platform.isWeb ? /* @__PURE__ */ import_react.default.createElement("div", {
-    style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0
-    }
-  }, props.children) : /* @__PURE__ */ import_react.default.createElement(import_react_native.View, {
+  return /* @__PURE__ */ import_react.default.createElement(import_react_native.View, {
+    pointerEvents: "box-none",
     style: import_react_native.StyleSheet.absoluteFill
-  }, props.child);
+  }, props.children);
 }
 __name(AbsoluteFill, "AbsoluteFill");
 function processIDRefList(idRefList) {
@@ -1138,6 +1150,16 @@ function assignNativePropsToWeb(elementType, viewProps, nativeProps) {
   }
 }
 __name(assignNativePropsToWeb, "assignNativePropsToWeb");
+function addPseudoToStyles(styles, initialPseudos, pseudos, name, force = false) {
+  const pseudoStyle = pseudos[name];
+  const shouldNestObject = import_platform.isWeb && name !== "enterStyle" && name !== "exitStyle";
+  const defaultPseudoStyle = initialPseudos[name];
+  const style = defaultPseudoStyle ? __spreadValues(__spreadValues({}, defaultPseudoStyle), pseudoStyle) : pseudoStyle;
+  if (style) {
+    styles.push(shouldNestObject && !force ? { [name]: style } : style);
+  }
+}
+__name(addPseudoToStyles, "addPseudoToStyles");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AbsoluteFill,