tamagui 1.128.1 → 1.129.0

package/dist/native.js

@@ -2419,6 +2419,9 @@ var require_createVariable_native = __commonJS({
       isVariable: function() {
         return isVariable2;
       },
+      px: function() {
+        return px;
+      },
       setDidGetVariableValue: function() {
         return setDidGetVariableValue;
       },
@@ -2482,6 +2485,12 @@ var require_createVariable_native = __commonJS({
       var name = (0, import_helpers.simpleHash)(nameProp, 60);
       return includeVar ? constructCSSVariableName(name) : name;
     };
+    function px(value) {
+      return {
+        val: value,
+        needsPx: !0
+      };
+    }
   }
 });
 
@@ -9038,7 +9047,12 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         return Component2.staticConfig = extendStyledConfig(extended), Component2.styleable = styleable, Component2;
       }
       function styleable(Component2, options) {
-        var _Component_render, isForwardedRefAlready = ((_Component_render = Component2.render) === null || _Component_render === void 0 ? void 0 : _Component_render.length) === 2, out = isForwardedRefAlready ? Component2 : /* @__PURE__ */ import_react3.default.forwardRef(Component2), extendedConfig = extendStyledConfig(options == null ? void 0 : options.staticConfig);
+        var _Component_render, isForwardedRefAlready = ((_Component_render = Component2.render) === null || _Component_render === void 0 ? void 0 : _Component_render.length) === 2 || Component2.length === 2, out = isForwardedRefAlready ? Component2 : /* @__PURE__ */ import_react3.default.forwardRef(function(props, ref) {
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Component2, {
+            ...props,
+            ref
+          });
+        }), extendedConfig = extendStyledConfig(options == null ? void 0 : options.staticConfig);
         return out = options != null && options.disableTheme ? out : (0, import_themeable.themeable)(out, extendedConfig, !0), process.env.TAMAGUI_MEMOIZE_STYLEABLE && (out = /* @__PURE__ */ import_react3.default.memo(out)), out.staticConfig = extendedConfig, out.styleable = styleable, out;
       }
       return res.extractable = extractable, res.styleable = styleable, res;
@@ -9314,7 +9328,7 @@ var require_createVariables_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(createVariables_exports);
-    var import_helpers = require_index_native7(), import_createVariable = require_createVariable_native(), cache = /* @__PURE__ */ new WeakMap(), createVariables = function(tokens) {
+    var import_constants4 = require_index_native6(), import_helpers = require_index_native7(), import_createVariable = require_createVariable_native(), cache = /* @__PURE__ */ new WeakMap(), createVariables = function(tokens) {
       var parentPath = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "", isFont = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
       if (cache.has(tokens)) return tokens;
       var res = {}, i = 0;
@@ -9326,16 +9340,25 @@ var require_createVariables_native = __commonJS({
           continue;
         }
         var niceKey = (0, import_helpers.simpleHash)(key, 1e3), name = parentPath && parentPath !== "t-color" ? `${parentPath}-${niceKey}` : `c-${niceKey}`;
+        if (val && typeof val == "object" && "needsPx" in val && "val" in val) {
+          var finalValue = (0, import_createVariable.createVariable)({
+            val: val.val,
+            name,
+            key: keyWithPrefix
+          });
+          import_constants4.isWeb && (finalValue.needsPx = val.needsPx), res[key] = finalValue;
+          continue;
+        }
         if (val && typeof val == "object") {
           res[key] = createVariables(tokens[key], name, !1);
           continue;
         }
-        var finalValue = (0, import_createVariable.isVariable)(val) ? val : (0, import_createVariable.createVariable)({
+        var finalValue1 = (0, import_createVariable.isVariable)(val) ? val : (0, import_createVariable.createVariable)({
           val,
           name,
           key: keyWithPrefix
         });
-        res[key] = finalValue;
+        res[key] = finalValue1;
       }
       return cache.set(res, !0), res;
     };
@@ -9855,6 +9878,14 @@ var require_createTamagui_native = __commonJS({
     });
     module2.exports = __toCommonJS2(createTamagui_exports);
     var import_constants4 = require_index_native6(), import_config = require_config_native(), import_createVariables = require_createVariables_native(), import_getThemeCSSRules = require_getThemeCSSRules_native(), import_insertStyleRule = require_insertStyleRule_native(), import_proxyThemeToParents = require_proxyThemeToParents_native(), import_registerCSSVariable = require_registerCSSVariable_native(), import_themes = require_themes_native(), import_useMedia = require_useMedia_native(), import_insertFont = require_insertFont_native(), import_Tamagui = require_Tamagui_native(), createdConfigs = /* @__PURE__ */ new WeakMap();
+    function shouldTokenCategoryHaveUnits(category) {
+      var UNIT_CATEGORIES = /* @__PURE__ */ new Set([
+        "size",
+        "space",
+        "radius"
+      ]);
+      return UNIT_CATEGORIES.has(category);
+    }
     function createTamagui2(configIn) {
       var _configIn_settings;
       if (process.env.NODE_ENV === "test" && globalThis.__tamaguiConfig) return console.warn("Warning: You somehow have duplicate Tamagui dependencies, this can cause issues. Tamagui is working around this by loading a previously loaded config in test mode. "), globalThis.__tamaguiConfig;
@@ -9901,7 +9932,11 @@ var require_createTamagui_native = __commonJS({
           var variable = tokens[key2][skey];
           if (specificTokens[`$${key2}.${skey}`] = variable, process.env.NODE_ENV === "development" && typeof variable > "u") throw new Error(`No value for tokens.${key2}.${skey}:
 ${JSON.stringify(variable, null, 2)}`);
-          import_constants4.isWeb && ((0, import_registerCSSVariable.registerCSSVariable)(variable), declarations.push((0, import_registerCSSVariable.variableToCSS)(variable, key2 === "zIndex")));
+          if (import_constants4.isWeb) {
+            (0, import_registerCSSVariable.registerCSSVariable)(variable);
+            var variableNeedsPx = variable.needsPx === !0, categoryNeedsPx = shouldTokenCategoryHaveUnits(key2), shouldBeUnitless = !(variableNeedsPx || categoryNeedsPx);
+            declarations.push((0, import_registerCSSVariable.variableToCSS)(variable, shouldBeUnitless));
+          }
         }
         if (0) {
           var declarationsToRuleSet;
@@ -23993,9 +24028,18 @@ var require_Animate_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(Animate_exports);
-    var import_jsx_runtime6 = require("react/jsx-runtime"), import_animate_presence = require_index_native4();
+    var import_jsx_runtime6 = require("react/jsx-runtime"), import_animate_presence = require_index_native4(), import_react3 = require("react");
     function Animate(param) {
-      var { children, type, ...props } = param;
+      var { children, lazyMount, type, present, ...props } = param, [lazyMounted, setLazyMounted] = (0, import_react3.useState)(lazyMount ? !1 : present);
+      (0, import_react3.useEffect)(function() {
+        lazyMount && present && (0, import_react3.startTransition)(function() {
+          setLazyMounted(present);
+        });
+      }, [
+        lazyMount,
+        present
+      ]);
+      var mounted = present ? lazyMount ? lazyMounted : present : !1;
       return type === "presence" ? props.keepChildrenMounted ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_animate_presence.PresenceChild, {
         initial: props.initial ? void 0 : !1,
         onExitComplete: props.onExitComplete,
@@ -24005,12 +24049,12 @@ var require_Animate_native = __commonJS({
         // BUGFIX: this causes continous re-renders if keepChildrenMounted is true, see HeaderMenu
         // but since we always re-render this component on open changes this should be fine to leave off?
         presenceAffectsLayout: !1,
-        isPresent: props.present,
+        isPresent: present,
         custom: props.custom,
         children
       }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_animate_presence.AnimatePresence, {
         ...props,
-        children: props.present ? children : null
+        children: mounted ? children : null
       }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, {
         children
       });
@@ -24458,21 +24502,21 @@ var require_Popper_native = __commonJS({
         x,
         y
       ]);
-      var show = !0, frameProps = {
+      var hide2 = x === 0 && y === 0, frameProps = {
         ref: contentRefs,
         x: x || 0,
         y: y || 0,
         top: 0,
         left: 0,
         position: strategy,
-        opacity: show ? 1 : 0,
+        opacity: 1,
         ...enableAnimationForPositionChange && {
           // apply animation but disable it on initial render to avoid animating from 0 to the first position
           animation: rest.animation,
           animateOnly: needsMeasure ? [] : rest.animateOnly,
           animatePresence: !1
         },
-        ...x === 0 && y === 0 && {
+        ...hide2 && {
           opacity: 0,
           animateOnly: []
         }
@@ -24905,7 +24949,7 @@ var require_Popover_native = __commonJS({
       });
     }
     var PopoverContentImpl = /* @__PURE__ */ React4.forwardRef(function(props, forwardedRef) {
-      var { trapFocus, __scopePopover, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, disableFocusScope, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, children, disableRemoveScroll, freezeContentsWhenHidden, setIsFullyHidden, ...contentProps } = props, context = usePopoverContext(__scopePopover), { open, keepChildrenMounted } = context, popperContext = (0, import_popper.usePopperContext)(__scopePopover || POPOVER_SCOPE), handleExitComplete = React4.useCallback(function() {
+      var { trapFocus, __scopePopover, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, disableFocusScope, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, children, disableRemoveScroll, freezeContentsWhenHidden, setIsFullyHidden, lazyMount, ...contentProps } = props, context = usePopoverContext(__scopePopover), { open, keepChildrenMounted } = context, popperContext = (0, import_popper.usePopperContext)(__scopePopover || POPOVER_SCOPE), handleExitComplete = React4.useCallback(function() {
         setIsFullyHidden == null || setIsFullyHidden(!0);
       }, [
         setIsFullyHidden
@@ -24923,6 +24967,7 @@ var require_Popover_native = __commonJS({
         present: !!open,
         keepChildrenMounted,
         onExitComplete: handleExitComplete,
+        lazyMount,
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_popper.PopperContent, {
           __scopePopper: __scopePopover || POPOVER_SCOPE,
           "data-state": getState(open),