@tamagui/animations-motion 2.0.0-rc.8 → 2.0.0

package/dist/cjs/createAnimations.native.js

@@ -4,246 +4,383 @@ 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 createAnimations_exports = {};
 __export(createAnimations_exports, {
-  createAnimations: () => createAnimations
+  createAnimations: () => createAnimations,
+  disableAnimationProps: () => disableAnimationProps
 });
 module.exports = __toCommonJS(createAnimations_exports);
-var import_jsx_runtime = require("react/jsx-runtime"),
-  import_animation_helpers = require("@tamagui/animation-helpers"),
-  import_use_presence = require("@tamagui/use-presence"),
-  import_web = require("@tamagui/web"),
-  import_react = require("motion/react"),
-  import_react2 = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_animation_helpers = require("@tamagui/animation-helpers");
+var import_use_presence = require("@tamagui/use-presence");
+var import_web = require("@tamagui/web");
+var import_react = require("motion/react");
+var import_react2 = __toESM(require("react"), 1);
 function _instanceof(left, right) {
-  return right != null && typeof Symbol < "u" && right[Symbol.hasInstance] ? !!right[Symbol.hasInstance](left) : left instanceof right;
+  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+    return !!right[Symbol.hasInstance](left);
+  } else {
+    return left instanceof right;
+  }
 }
 function _type_of(obj) {
   "@swc/helpers - typeof";
 
-  return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+var isServer = typeof window === "undefined";
+function useAnimateSSRSafe() {
+  if (isServer) {
+    return [(0, import_react2.useRef)(null), function () {}];
+  }
+  return (0, import_react.useAnimate)();
+}
+var MotionValueStrategy = /* @__PURE__ */new WeakMap();
+var PendingMotionOnFinish = /* @__PURE__ */new WeakMap();
+function settlePendingMotionOnFinish(mv, controls) {
+  var onFinish = PendingMotionOnFinish.get(mv);
+  if (!onFinish) return;
+  PendingMotionOnFinish.delete(mv);
+  controls.then(function () {
+    return onFinish();
+  }).catch(function () {
+    return onFinish();
+  });
 }
-var MotionValueStrategy = /* @__PURE__ */new WeakMap(),
-  nonPositionTransformRe = /scale|rotate|skew|matrix|perspective/;
 function createAnimations(animations) {
-  var isHydratingGlobal,
-    hydratingComponents = /* @__PURE__ */new Set();
+  var isHydratingGlobal;
+  var hydratingComponents = /* @__PURE__ */new Set();
   return {
-    // this is only used by Sheet basically for now to pass result of useAnimatedStyle to
     View: MotionView,
     Text: MotionText,
-    isReactNative: !1,
-    supportsCSS: !0,
+    isReactNative: false,
     inputStyle: "css",
     outputStyle: "inline",
-    needsWebStyles: !0,
-    avoidReRenders: !0,
+    avoidReRenders: true,
     animations,
     usePresence: import_use_presence.usePresence,
     ResetPresence: import_use_presence.ResetPresence,
     onMount() {
-      isHydratingGlobal = !1, hydratingComponents.forEach(function (cb) {
+      isHydratingGlobal = false;
+      hydratingComponents.forEach(function (cb) {
         return cb();
       });
     },
     useAnimations: function (animationProps) {
-      isHydratingGlobal === void 0 && !(0, import_web.getConfig)().settings.disableSSR && (isHydratingGlobal = !0);
+      if (isHydratingGlobal === void 0 && !(0, import_web.getConfig)().settings.disableSSR) {
+        isHydratingGlobal = true;
+      }
       var {
-          props,
-          style,
-          componentState,
-          stateRef,
-          useStyleEmitter,
-          presence
-        } = animationProps,
-        animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition,
-        isComponentHydrating = componentState.unmounted === !0,
-        isMounting = componentState.unmounted === "should-enter",
-        isEntering = !!componentState.unmounted,
-        isExiting = presence?.[0] === !1,
-        sendExitComplete = presence?.[1],
-        wasEnteringRef = (0, import_react2.useRef)(isEntering),
-        justFinishedEntering = wasEnteringRef.current && !isEntering;
+        props,
+        style,
+        componentState,
+        stateRef,
+        useStyleEmitter,
+        presence
+      } = animationProps;
+      var animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
+      var isComponentHydrating = componentState.unmounted === true;
+      var isMounting = componentState.unmounted === "should-enter";
+      var isEntering = !!componentState.unmounted;
+      var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
+      var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
+      var refs = (0, import_react2.useRef)(null);
+      if (!refs.current) {
+        refs.current = {
+          isFirstRender: true,
+          lastDoAnimate: null,
+          lastDontAnimate: null,
+          controls: null,
+          lastAnimateAt: 0,
+          disposed: false,
+          wasExiting: false,
+          isExiting: false,
+          sendExitComplete: void 0,
+          animationState: "default",
+          frozenExitTarget: null,
+          exitCompleteScheduled: false,
+          wasEntering: false,
+          wasDisabled: false
+        };
+      }
+      var justFinishedEntering = refs.current.wasEntering && !isEntering;
       (0, import_react2.useEffect)(function () {
-        wasEnteringRef.current = isEntering;
+        refs.current.wasEntering = isEntering;
       });
-      var animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default",
-        disableAnimation = isComponentHydrating || isMounting || !animationKey,
-        isFirstRender = (0, import_react2.useRef)(!0),
-        [scope, animate] = (0, import_react.useAnimate)(),
-        lastDoAnimate = (0, import_react2.useRef)(null),
-        controls = (0, import_react2.useRef)(null),
-        styleKey = JSON.stringify(style),
-        shouldDebug =
-        // process.env.NODE_ENV === 'development' &&
-        props.debug && props.debug !== "profile",
-        {
-          dontAnimate = {},
-          doAnimate,
-          animationOptions
-        } = (0, import_react2.useMemo)(function () {
-          var motionAnimationState = getMotionAnimatedProps(props, style, disableAnimation, animationState);
-          return motionAnimationState;
-        }, [isExiting, animationKey, styleKey, animationState, disableAnimation]),
-        id = (0, import_react2.useId)(),
-        debugId = process.env.NODE_ENV === "development" ? id : "",
-        lastAnimateAt = (0, import_react2.useRef)(0),
-        disposed = (0, import_react2.useRef)(!1),
-        [firstRenderStyle] = (0, import_react2.useState)(style),
-        lastDontAnimate = (0, import_react2.useRef)(firstRenderStyle),
-        [isHydrating, setIsHydrating] = (0, import_react2.useState)(isHydratingGlobal);
+      var animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
+      var disableAnimation = isComponentHydrating || isMounting || !animationKey;
+      var [scope, animate] = useAnimateSSRSafe();
+      refs.current.isExiting = isExiting;
+      refs.current.sendExitComplete = sendExitComplete;
+      refs.current.animationState = animationState;
+      var justStartedExiting = isExiting && !refs.current.wasExiting;
+      var justStoppedExiting = !isExiting && refs.current.wasExiting;
+      if (justStartedExiting || justStoppedExiting) {
+        refs.current.frozenExitTarget = null;
+        refs.current.exitCompleteScheduled = false;
+      }
+      (0, import_react2.useEffect)(function () {
+        refs.current.wasExiting = isExiting;
+      });
+      var {
+        dontAnimate = {},
+        doAnimate,
+        animationOptions
+      } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
+      var [firstRenderStyle] = (0, import_react2.useState)(style);
+      if (refs.current.isFirstRender) {
+        refs.current.lastDontAnimate = firstRenderStyle;
+      }
+      var [isHydrating, setIsHydrating] = (0, import_react2.useState)(isHydratingGlobal);
       (0, import_react2.useLayoutEffect)(function () {
-        return isHydratingGlobal && hydratingComponents.add(function () {
-          setIsHydrating(!1);
-        }), function () {
-          disposed.current = !0;
+        if (isHydratingGlobal) {
+          hydratingComponents.add(function () {
+            setIsHydrating(false);
+          });
+        }
+        return function () {
+          refs.current.disposed = true;
         };
       }, []);
       var flushAnimation = function (param) {
         var {
-          doAnimate: doAnimate2 = {},
-          animationOptions: animationOptions2 = {},
+          doAnimate: doAnimateRaw = {},
+          animationOptions: passedOptions = {},
           dontAnimate: dontAnimate2
         } = param;
+        var startedControls = null;
+        var isCurrentlyExiting = refs.current.isExiting;
+        var currentSendExitComplete = refs.current.sendExitComplete;
+        var doAnimate2 = doAnimateRaw;
+        if (isCurrentlyExiting && refs.current.frozenExitTarget) {
+          doAnimate2 = refs.current.frozenExitTarget;
+        }
+        var _props_transition;
+        var animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions((_props_transition = props.transition) !== null && _props_transition !== void 0 ? _props_transition : null, "exit") : passedOptions;
         try {
           var node = stateRef.current.host;
-          if (isFirstRender.current && (lastDontAnimate.current = null, lastDoAnimate.current = null), shouldDebug && (console.groupCollapsed(`[motion] ${debugId} \u{1F30A} animate (${JSON.stringify(getDiff(lastDoAnimate.current, doAnimate2), null, 2)})`), console.info({
-            props,
-            componentState,
-            doAnimate: doAnimate2,
-            dontAnimate: dontAnimate2,
-            animationOptions: animationOptions2,
-            animationProps,
-            lastDoAnimate: {
-              ...lastDoAnimate.current
-            },
-            lastDontAnimate: {
-              ...lastDontAnimate.current
-            },
-            isExiting,
-            style,
-            node
-          }), console.groupCollapsed("trace >"), console.trace(), console.groupEnd(), console.groupEnd()), !_instanceof(node, HTMLElement)) return;
-          var prevDont = lastDontAnimate.current;
-          if (dontAnimate2) if (prevDont) {
-            removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
-            var changed = getDiff(prevDont, dontAnimate2);
-            changed && Object.assign(node.style, changed);
-          } else Object.assign(node.style, dontAnimate2);
+          if (refs.current.isFirstRender) {
+            refs.current.lastDontAnimate = null;
+            refs.current.lastDoAnimate = null;
+          }
+          if (process.env.NODE_ENV === "development") {
+            if (props["debug"] && props["debug"] !== "profile") {
+              console.groupCollapsed(`[motion] animate (${JSON.stringify(getDiff(refs.current.lastDoAnimate, doAnimate2), null, 2)})`);
+              console.info({
+                props,
+                componentState,
+                doAnimate: doAnimate2,
+                dontAnimate: dontAnimate2,
+                animationOptions: animationOptions2,
+                animationProps,
+                lastDoAnimate: {
+                  ...refs.current.lastDoAnimate
+                },
+                lastDontAnimate: {
+                  ...refs.current.lastDontAnimate
+                },
+                isExiting,
+                style,
+                node
+              });
+              console.groupCollapsed(`trace >`);
+              console.trace();
+              console.groupEnd();
+              console.groupEnd();
+            }
+          }
+          if (!_instanceof(node, HTMLElement)) {
+            return;
+          }
+          var prevDont = refs.current.lastDontAnimate;
+          if (dontAnimate2) {
+            if (prevDont) {
+              removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
+              var changed = getDiff(prevDont, dontAnimate2);
+              if (changed) {
+                Object.assign(node.style, changed);
+              }
+            } else {
+              Object.assign(node.style, dontAnimate2);
+            }
+          }
           if (doAnimate2) {
             if (prevDont) {
-              var movedToAnimate = {};
-              for (var key in prevDont) key in doAnimate2 && (node.style[key] = prevDont[key], movedToAnimate[key] = prevDont[key], lastDoAnimate.current && (lastDoAnimate.current[key] = prevDont[key]));
-              Object.keys(movedToAnimate).length > 0 && animate(scope.current, {
-                ...movedToAnimate
-              }, {
-                duration: 0
-              });
+              for (var key in prevDont) {
+                if (key in doAnimate2) {
+                  node.style[key] = prevDont[key];
+                  if (refs.current.lastDoAnimate) {
+                    refs.current.lastDoAnimate[key] = prevDont[key];
+                  }
+                }
+              }
+            }
+            var lastAnimated = refs.current.lastDoAnimate;
+            if (lastAnimated) {
+              removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
             }
-            var lastAnimated = lastDoAnimate.current;
-            lastAnimated && removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
-            var diff = getDiff(lastDoAnimate.current, doAnimate2);
+            var diff = getDiff(refs.current.lastDoAnimate, doAnimate2);
             if (diff) {
-              var _controls_current_animations,
-                _controls_current,
-                _controls_current1,
-                isRunning = ((_controls_current = controls.current) === null || _controls_current === void 0 || (_controls_current_animations = _controls_current.animations) === null || _controls_current_animations === void 0 ? void 0 : _controls_current_animations.length) === 0 ? !1 : ((_controls_current1 = controls.current) === null || _controls_current1 === void 0 ? void 0 : _controls_current1.state) === "running",
-                targetTransform = typeof diff.transform == "string" ? diff.transform : null,
-                isPositionOnlyTransform = targetTransform && targetTransform.includes("translate") && !nonPositionTransformRe.test(targetTransform),
-                isPopperElement = node.hasAttribute("data-popper-animate-position"),
-                isEnteringPresenceChild = presence && justFinishedEntering;
-              if (isRunning && controls.current && isPositionOnlyTransform && (isPopperElement || isEnteringPresenceChild)) {
-                var currentTransform = getComputedStyle(node).transform;
-                if (currentTransform && currentTransform !== "none") {
-                  var matrixMatch = currentTransform.match(/matrix\([^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*([^,]+),\s*([^)]+)\)/);
-                  if (matrixMatch) {
-                    controls.current.stop(), node.style.transform = currentTransform;
-                    var currentX = Number.parseFloat(matrixMatch[1]),
-                      currentY = Number.parseFloat(matrixMatch[2]),
-                      keyframeDiff = {
-                        ...diff,
-                        transform: [`translateX(${currentX}px) translateY(${currentY}px)`, targetTransform]
-                      };
-                    controls.current = animate(scope.current, keyframeDiff, animationOptions2), lastAnimateAt.current = Date.now(), lastDontAnimate.current = dontAnimate2 ? {
-                      ...dontAnimate2
-                    } : {}, lastDoAnimate.current = doAnimate2 ? {
-                      ...doAnimate2
-                    } : {};
-                    return;
+              if (isCurrentlyExiting && !refs.current.frozenExitTarget) {
+                refs.current.frozenExitTarget = {
+                  ...doAnimate2
+                };
+              }
+              var isPopperPosition = node.hasAttribute("data-popper-animate-position");
+              var midFlightValues = null;
+              if (refs.current.controls) {
+                try {
+                  var computed = getComputedStyle(node);
+                  midFlightValues = {};
+                  for (var key1 in diff) {
+                    var val = computed[key1];
+                    if (val !== void 0 && val !== "") {
+                      midFlightValues[key1] = val;
+                    }
                   }
+                } catch (e) {}
+                if (isCurrentlyExiting) {
+                  refs.current.controls.stop();
                 }
+                if (midFlightValues) {
+                  for (var key2 in midFlightValues) {
+                    ;
+                    node.style[key2] = midFlightValues[key2];
+                  }
+                }
+                if (isPopperPosition) {
+                  var anims = node.getAnimations();
+                  var _iteratorNormalCompletion = true,
+                    _didIteratorError = false,
+                    _iteratorError = void 0;
+                  try {
+                    for (var _iterator = anims[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+                      var anim = _step.value;
+                      anim.cancel();
+                    }
+                  } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                  } finally {
+                    try {
+                      if (!_iteratorNormalCompletion && _iterator.return != null) {
+                        _iterator.return();
+                      }
+                    } finally {
+                      if (_didIteratorError) {
+                        throw _iteratorError;
+                      }
+                    }
+                  }
+                }
+              }
+              var fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
+              if ((midFlightValues === null || midFlightValues === void 0 ? void 0 : midFlightValues.transform) && fixedDiff.transform) {
+                fixedDiff.transform = [midFlightValues.transform, fixedDiff.transform];
               }
-              var fixedDiff = fixTransparentColors({
-                ...diff
-              }, lastDoAnimate.current);
-              controls.current = animate(scope.current, fixedDiff, animationOptions2), lastAnimateAt.current = Date.now();
+              startedControls = animate(scope.current, fixedDiff, animationOptions2);
+              refs.current.controls = startedControls;
+              refs.current.lastAnimateAt = Date.now();
             }
           }
-          lastDontAnimate.current = dontAnimate2 ? {
+          refs.current.lastDontAnimate = dontAnimate2 ? {
             ...dontAnimate2
-          } : {}, lastDoAnimate.current = doAnimate2 ? {
+          } : {};
+          refs.current.lastDoAnimate = doAnimate2 ? {
             ...doAnimate2
           } : {};
         } finally {
-          isExiting && (controls.current ? controls.current.finished.then(function () {
-            sendExitComplete?.();
-          }) : sendExitComplete?.());
+          if (isCurrentlyExiting && currentSendExitComplete) {
+            if (startedControls) {
+              refs.current.exitCompleteScheduled = true;
+              startedControls.finished.then(function () {
+                if (refs.current.isExiting) {
+                  currentSendExitComplete();
+                }
+              }).catch(function () {
+                if (refs.current.isExiting) {
+                  currentSendExitComplete();
+                }
+              });
+            } else if (!refs.current.exitCompleteScheduled) {
+              currentSendExitComplete();
+            }
+          }
         }
       };
-      return useStyleEmitter?.(function (nextStyle) {
-        var _$animationProps = getMotionAnimatedProps(props, nextStyle, disableAnimation, animationState);
+      useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function (nextStyle, effectiveTransition) {
+        var _$animationProps = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
         flushAnimation(_$animationProps);
-      }), (0, import_web.useIsomorphicLayoutEffect)(function () {
-        if (isFirstRender.current) {
-          if (isFirstRender.current = !1, isHydrating) {
-            var node = stateRef.current.host;
-            _instanceof(node, HTMLElement) && (dontAnimate && (Object.assign(node.style, dontAnimate), animate(scope.current, {
-              ...dontAnimate
-            }, {
-              duration: 0
-            })), doAnimate && Object.keys(doAnimate).length > 0 ? (lastDoAnimate.current = {
-              ...doAnimate
-            }, animate(scope.current, {
-              ...doAnimate
-            }, {
-              duration: 0
-            })) : lastDoAnimate.current = dontAnimate ? {
-              ...dontAnimate
-            } : {}), lastDontAnimate.current = dontAnimate ? {
+      });
+      (0, import_web.useIsomorphicLayoutEffect)(function () {
+        if (refs.current.isFirstRender) {
+          refs.current.isFirstRender = false;
+          refs.current.wasDisabled = disableAnimation;
+          if (isHydrating) {
+            if (doAnimate && Object.keys(doAnimate).length > 0) {
+              refs.current.lastDoAnimate = {
+                ...doAnimate
+              };
+            } else {
+              refs.current.lastDoAnimate = dontAnimate ? {
+                ...dontAnimate
+              } : {};
+            }
+            refs.current.lastDontAnimate = dontAnimate ? {
               ...dontAnimate
-            } : {}, lastAnimateAt.current = Date.now();
+            } : {};
+            refs.current.lastAnimateAt = Date.now();
             return;
           }
-          lastDontAnimate.current = dontAnimate ? {
+          refs.current.lastDontAnimate = dontAnimate ? {
+            ...dontAnimate
+          } : {};
+          refs.current.lastDoAnimate = doAnimate ? {
+            ...doAnimate
+          } : {};
+          return;
+        }
+        var justEnabled = refs.current.wasDisabled && !disableAnimation;
+        refs.current.wasDisabled = disableAnimation;
+        if (justEnabled && animationState !== "enter") {
+          var node = stateRef.current.host;
+          if (_instanceof(node, HTMLElement)) {
+            if (dontAnimate) Object.assign(node.style, dontAnimate);
+            if (doAnimate) Object.assign(node.style, doAnimate);
+          }
+          refs.current.lastDontAnimate = dontAnimate ? {
             ...dontAnimate
-          } : {}, lastDoAnimate.current = doAnimate ? {
+          } : {};
+          refs.current.lastDoAnimate = doAnimate ? {
             ...doAnimate
           } : {};
           return;
@@ -253,18 +390,24 @@ function createAnimations(animations) {
           dontAnimate,
           animationOptions
         });
-      }, [styleKey, isExiting, disableAnimation]), shouldDebug && (console.groupCollapsed("[motion] \u{1F30A} render"), console.info({
-        style,
-        doAnimate,
-        dontAnimate,
-        styleKey,
-        scope,
-        animationOptions,
-        isExiting,
-        isFirstRender: isFirstRender.current,
-        animationProps
-      }), console.groupEnd()), {
-        // we never change this, after first render on
+      }, [style, isExiting, disableAnimation]);
+      if (process.env.NODE_ENV === "development") {
+        if (props["debug"] && props["debug"] !== "profile") {
+          console.groupCollapsed(`[motion] render`);
+          console.info({
+            style,
+            doAnimate,
+            dontAnimate,
+            scope,
+            animationOptions,
+            isExiting,
+            isFirstRender: refs.current.isFirstRender,
+            animationProps
+          });
+          console.groupEnd();
+        }
+      }
+      return {
         style: firstRenderStyle,
         ref: scope,
         render: "div"
@@ -285,16 +428,25 @@ function createAnimations(animations) {
                 type: "spring"
               },
               onFinish = arguments.length > 2 ? arguments[2] : void 0;
-            if (config.type === "direct") MotionValueStrategy.set(motionValue, {
-              type: "direct"
-            }), motionValue.set(next), onFinish?.();else {
-              if (MotionValueStrategy.set(motionValue, config), onFinish) var unsubscribe = motionValue.on("change", function (value) {
-                Math.abs(value - next) < 0.01 && (unsubscribe(), onFinish());
+            if (config.type === "direct") {
+              MotionValueStrategy.set(motionValue, {
+                type: "direct"
               });
               motionValue.set(next);
+              onFinish === null || onFinish === void 0 ? void 0 : onFinish();
+              return;
+            }
+            MotionValueStrategy.set(motionValue, config);
+            if (onFinish) {
+              var prior = PendingMotionOnFinish.get(motionValue);
+              if (prior) {
+                PendingMotionOnFinish.delete(motionValue);
+                prior();
+              }
+              PendingMotionOnFinish.set(motionValue, onFinish);
             }
+            motionValue.set(next);
           },
-          // Motion doesn't have a direct onFinish callback, so we simulate it
           stop() {
             motionValue.stop();
           }
@@ -303,15 +455,16 @@ function createAnimations(animations) {
     },
     useAnimatedNumberReaction(param, onValue) {
       var {
-          value
-        } = param,
-        instance = value.getInstance();
+        value
+      } = param;
+      var instance = value.getInstance();
       (0, import_react.useMotionValueEvent)(instance, "change", onValue);
     },
     useAnimatedNumberStyle(val, getStyleProp) {
-      var motionValue = val.getInstance(),
-        getStyleRef = (0, import_react2.useRef)(getStyleProp);
-      return getStyleRef.current = getStyleProp, (0, import_react2.useMemo)(function () {
+      var motionValue = val.getInstance();
+      var getStyleRef = (0, import_react2.useRef)(getStyleProp);
+      getStyleRef.current = getStyleProp;
+      return (0, import_react2.useMemo)(function () {
         return {
           getStyle: function (cur) {
             return getStyleRef.current(cur);
@@ -319,20 +472,48 @@ function createAnimations(animations) {
           motionValue
         };
       }, []);
+    },
+    useAnimatedNumbersStyle(vals, getStyleProp) {
+      var motionValues = vals.map(function (v) {
+        return v.getInstance();
+      });
+      var getStyleRef = (0, import_react2.useRef)(getStyleProp);
+      getStyleRef.current = getStyleProp;
+      return (0, import_react2.useMemo)(function () {
+        return {
+          getStyle: function () {
+            for (var _len = arguments.length, currentValues = new Array(_len), _key = 0; _key < _len; _key++) {
+              currentValues[_key] = arguments[_key];
+            }
+            return getStyleRef.current(...currentValues);
+          },
+          motionValues
+        };
+      }, []);
     }
   };
   function getMotionAnimatedProps(props, style, disable) {
-    var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default";
-    if (disable) return {
-      dontAnimate: style
-    };
-    var animationOptions = getAnimationOptions(props.transition, animationState),
-      dontAnimate,
-      doAnimate,
-      animateOnly = props.animateOnly;
+    var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default",
+      transitionOverride = arguments.length > 4 ? arguments[4] : void 0;
+    if (disable) {
+      return {
+        dontAnimate: style
+      };
+    }
+    var _ref;
+    var animationOptions = getAnimationOptions((_ref = transitionOverride !== null && transitionOverride !== void 0 ? transitionOverride : props.transition) !== null && _ref !== void 0 ? _ref : null, animationState);
+    var dontAnimate;
+    var doAnimate;
+    var animateOnly = props.animateOnly;
     for (var key in style) {
       var value = style[key];
-      disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key) ? (dontAnimate || (dontAnimate = {}), dontAnimate[key] = value) : (doAnimate || (doAnimate = {}), doAnimate[key] = value);
+      if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
+        dontAnimate || (dontAnimate = {});
+        dontAnimate[key] = value;
+      } else {
+        doAnimate || (doAnimate = {});
+        doAnimate[key] = value;
+      }
     }
     return {
       dontAnimate,
@@ -341,31 +522,51 @@ function createAnimations(animations) {
     };
   }
   function getAnimationOptions(transitionProp) {
-    var animationState = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default",
-      normalized = (0, import_animation_helpers.normalizeTransition)(transitionProp),
-      effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
-    if (!effectiveKey && Object.keys(normalized.properties).length === 0) return {};
-    var defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null,
-      delay = typeof normalized.delay == "number" ? normalized.delay / 1e3 : void 0,
-      globalConfigOverride;
-    normalized.config && (globalConfigOverride = {
+    var animationState = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default";
+    var normalized = (0, import_animation_helpers.normalizeTransition)(transitionProp);
+    var effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
+    if (!effectiveKey && animationState === "default") {
+      effectiveKey = normalized.enter || normalized.exit || null;
+    }
+    var globalConfigOverride = normalized.config ? {
       ...normalized.config
-    }, typeof normalized.config.duration == "number" && (globalConfigOverride.duration = normalized.config.duration / 1e3));
+    } : void 0;
+    if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
+      return {};
+    }
+    var defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
+    var delay = normalized.delay;
     var result = {};
-    defaultConfig && Object.assign(result, defaultConfig), globalConfigOverride && Object.assign(result, globalConfigOverride), delay && (result.delay = delay), (defaultConfig || globalConfigOverride || delay) && (result.default = {
-      ...defaultConfig,
-      ...globalConfigOverride,
-      ...(delay ? {
-        delay
-      } : null)
-    });
-    var _iteratorNormalCompletion = !0,
-      _didIteratorError = !1,
+    if (defaultConfig) {
+      Object.assign(result, defaultConfig);
+    }
+    if (globalConfigOverride) {
+      Object.assign(result, globalConfigOverride);
+      if (result.type === void 0 && result.duration !== void 0 && result.damping === void 0 && result.stiffness === void 0 && result.mass === void 0) {
+        result.type = "tween";
+      }
+    }
+    if (delay) {
+      result.delay = delay;
+    }
+    if (defaultConfig || globalConfigOverride || delay) {
+      result.default = {
+        ...defaultConfig,
+        ...globalConfigOverride,
+        ...(delay ? {
+          delay
+        } : null)
+      };
+    }
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
       _iteratorError = void 0;
     try {
-      for (var _iterator = Object.entries(normalized.properties)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+      for (var _iterator = Object.entries(normalized.properties)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
         var [propName, animationNameOrConfig] = _step.value;
-        if (typeof animationNameOrConfig == "string") result[propName] = withInferredType(animations[animationNameOrConfig]);else if (animationNameOrConfig && (typeof animationNameOrConfig > "u" ? "undefined" : _type_of(animationNameOrConfig)) === "object") {
+        if (typeof animationNameOrConfig === "string") {
+          result[propName] = withInferredType(animations[animationNameOrConfig]);
+        } else if (animationNameOrConfig && (typeof animationNameOrConfig === "undefined" ? "undefined" : _type_of(animationNameOrConfig)) === "object") {
           var baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
           result[propName] = {
             ...baseConfig,
@@ -374,20 +575,35 @@ function createAnimations(animations) {
         }
       }
     } catch (err) {
-      _didIteratorError = !0, _iteratorError = err;
+      _didIteratorError = true;
+      _iteratorError = err;
     } finally {
       try {
-        !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
       } finally {
-        if (_didIteratorError) throw _iteratorError;
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
       }
     }
+    convertMsToS(result);
     convertMsToS(result.default);
-    for (var key in result) key !== "default" && convertMsToS(result[key]);
+    for (var key in result) {
+      if (key !== "default" && _type_of(result[key]) === "object") {
+        convertMsToS(result[key]);
+      }
+    }
     return result;
   }
 }
 function withInferredType(config) {
+  if (!config) {
+    return {
+      type: "spring"
+    };
+  }
   var isTimingBased = config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
   return {
     type: isTimingBased ? "tween" : "spring",
@@ -395,110 +611,229 @@ function withInferredType(config) {
   };
 }
 function convertMsToS(config) {
-  !config || config.type !== "tween" || (typeof config.duration == "number" && (config.duration = config.duration / 1e3), typeof config.delay == "number" && (config.delay = config.delay / 1e3));
+  if (!config) return;
+  if (typeof config.delay === "number") config.delay = config.delay / 1e3;
+  if (typeof config.duration === "number") {
+    var isTimingBased = config.type === "tween" || config.type === void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
+    if (isTimingBased) {
+      config.duration = config.duration / 1e3;
+    }
+  }
 }
 function removeRemovedStyles(prev, next, node, dontClearIfIn) {
-  for (var key in prev) if (!(key in next)) {
-    if (dontClearIfIn && key in dontClearIfIn) continue;
-    node.style[key] = "";
+  for (var key in prev) {
+    if (!(key in next)) {
+      if (dontClearIfIn && key in dontClearIfIn) {
+        continue;
+      }
+      node.style[key] = "";
+    }
   }
 }
-var disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "aspectRatio", "backdropFilter", "boxSizing", "contain", "containerType", "display", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "fontFamily", "justifyContent", "marginBottom", "marginLeft", "marginRight", "marginTop", "maxHeight", "maxWidth", "minHeight", "minWidth", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "textWrap", "transformOrigin", "userSelect", "WebkitBackdropFilter", "zIndex"]),
-  MotionView = createMotionView("div"),
-  MotionText = createMotionView("span");
+var disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "boxSizing", "contain", "containerType", "display", "flexBasis", "flexDirection", "fontFamily", "justifyContent", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "textWrap", "userSelect"]);
+var MotionView = createMotionView("div");
+var MotionText = createMotionView("span");
 function createMotionView(defaultTag) {
-  var isText = defaultTag === "span",
-    Component = /* @__PURE__ */(0, import_react2.forwardRef)(function (propsIn, ref) {
-      var _hooks_usePropsTransform,
-        {
-          forwardedRef,
-          animation,
-          render = defaultTag,
-          style,
-          ...propsRest
-        } = propsIn,
-        [scope, animate] = (0, import_react.useAnimate)(),
-        hostRef = (0, import_react2.useRef)(null),
-        composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref, hostRef, scope),
-        stateRef = (0, import_react2.useRef)(null);
-      stateRef.current || (stateRef.current = {
+  var isText = defaultTag === "span";
+  var Component = /* @__PURE__ */(0, import_react2.forwardRef)(function (propsIn, ref) {
+    var _hooks_usePropsTransform;
+    var {
+      forwardedRef,
+      animation,
+      render = defaultTag,
+      style,
+      ...propsRest
+    } = propsIn;
+    var [scope, animate] = useAnimateSSRSafe();
+    var hostRef = (0, import_react2.useRef)(null);
+    var composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref, hostRef, scope);
+    var stateRef = (0, import_react2.useRef)(null);
+    if (!stateRef.current) {
+      stateRef.current = {
         get host() {
           return hostRef.current;
         }
+      };
+    }
+    var [_, state] = (0, import_web.useThemeWithState)({});
+    var styles = Array.isArray(style) ? style : [style];
+    var [animatedStyle, nonAnimatedStyles] = function () {
+      var animatedStyle2;
+      var nonAnimatedStyles2 = [];
+      var _iteratorNormalCompletion = true,
+        _didIteratorError = false,
+        _iteratorError = void 0;
+      try {
+        for (var _iterator = styles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var style2 = _step.value;
+          if (style2.getStyle) {
+            animatedStyle2 = style2;
+          } else {
+            nonAnimatedStyles2.push(style2);
+          }
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+      return [animatedStyle2, nonAnimatedStyles2];
+    }();
+    function getProps(props2) {
+      var out = (0, import_web.getSplitStyles)(props2, isText ? import_web.Text.staticConfig : import_web.View.staticConfig, state === null || state === void 0 ? void 0 : state.theme, state === null || state === void 0 ? void 0 : state.name, {
+        unmounted: false
+      }, {
+        isAnimated: false,
+        noClass: true,
+        resolveValues: "auto"
       });
-      var [_, state] = (0, import_web.useThemeWithState)({}),
-        styles = Array.isArray(style) ? style : [style],
-        [animatedStyle, nonAnimatedStyles] = function () {
-          return [styles.find(function (x) {
-            return x.getStyle;
-          }), styles.filter(function (x) {
-            return !x.getStyle;
-          })];
-        }();
-      function getProps(props2) {
-        var out = (0, import_web.getSplitStyles)(props2, isText ? import_web.Text.staticConfig : import_web.View.staticConfig, state?.theme, state?.name, {
-          unmounted: !1
-        }, {
-          isAnimated: !1,
-          noClass: !0,
-          // noMergeStyle: true,
-          resolveValues: "auto"
-        });
-        return out ? (out.viewProps.style && ((0, import_web.fixStyles)(out.viewProps.style), (0, import_web.styleToCSS)(out.viewProps.style)), out.viewProps) : {};
+      if (!out) {
+        return {};
+      }
+      if (out.viewProps.style) {
+        (0, import_web.fixStyles)(out.viewProps.style);
+        (0, import_web.styleToCSS)(out.viewProps.style);
       }
-      var props = getProps({
-          ...propsRest,
-          style: nonAnimatedStyles
-        }),
-        Element = render || "div",
-        transformedProps = (_hooks_usePropsTransform = import_web.hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(import_web.hooks, render, props, stateRef, !1);
-      return (0, import_react2.useEffect)(function () {
-        if (animatedStyle) return animatedStyle.motionValue.on("change", function (value) {
-          var nextStyle = animatedStyle.getStyle(value),
-            animationConfig = MotionValueStrategy.get(animatedStyle.motionValue),
-            node = hostRef.current,
-            webStyle = getProps({
+      return out.viewProps;
+    }
+    var props = getProps({
+      ...propsRest,
+      style: nonAnimatedStyles
+    });
+    var Element = render || "div";
+    var transformedProps = (_hooks_usePropsTransform = import_web.hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(import_web.hooks, render, props, stateRef, false);
+    (0, import_react2.useEffect)(function () {
+      if (!animatedStyle) return;
+      if (animatedStyle.motionValues) {
+        var mvs = animatedStyle.motionValues;
+        var unsubs = mvs.map(function (mv) {
+          return mv.on("change", function () {
+            var currentValues = mvs.map(function (v) {
+              return v.get();
+            });
+            var nextStyle = animatedStyle.getStyle(...currentValues);
+            var animationConfig = MotionValueStrategy.get(mv);
+            var node = hostRef.current;
+            var webStyle = getProps({
               style: nextStyle
             }).style;
-          if (webStyle && _instanceof(node, HTMLElement)) {
-            var motionAnimationConfig = animationConfig?.type === "timing" ? {
-              type: "tween",
-              duration: (animationConfig?.duration || 0) / 1e3
-            } : animationConfig?.type === "direct" ? {
-              type: "tween",
-              duration: 0
-            } : {
-              type: "spring",
-              ...animationConfig
-            };
-            animate(node, webStyle, motionAnimationConfig);
-          }
+            if (webStyle && _instanceof(node, HTMLElement)) {
+              var motionAnimationConfig = (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "timing" ? {
+                type: "tween",
+                duration: ((animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.duration) || 0) / 1e3
+              } : (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "direct" ? {
+                type: "tween",
+                duration: 0
+              } : {
+                type: "spring",
+                ...animationConfig
+              };
+              var controls = animate(node, webStyle, motionAnimationConfig);
+              settlePendingMotionOnFinish(mv, controls);
+            }
+          });
         });
-      }, [animatedStyle]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Element, {
-        ...transformedProps,
-        ref: composedRefs
+        return function () {
+          return unsubs.forEach(function (fn) {
+            return fn();
+          });
+        };
+      }
+      if (!animatedStyle.motionValue) return;
+      return animatedStyle.motionValue.on("change", function (value) {
+        var nextStyle = animatedStyle.getStyle(value);
+        var animationConfig = MotionValueStrategy.get(animatedStyle.motionValue);
+        var node = hostRef.current;
+        var webStyle = getProps({
+          style: nextStyle
+        }).style;
+        if (webStyle && _instanceof(node, HTMLElement)) {
+          var motionAnimationConfig = (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "timing" ? {
+            type: "tween",
+            duration: ((animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.duration) || 0) / 1e3
+          } : (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "direct" ? {
+            type: "tween",
+            duration: 0
+          } : {
+            type: "spring",
+            ...animationConfig
+          };
+          var controls = animate(node, webStyle, motionAnimationConfig);
+          settlePendingMotionOnFinish(animatedStyle.motionValue, controls);
+        }
       });
+    }, [animatedStyle]);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Element, {
+      ...transformedProps,
+      ref: composedRefs
     });
-  return Component.acceptTagProp = !0, Component;
+  });
+  Component["acceptRenderProp"] = true;
+  return Component;
 }
 function getDiff(previous, next) {
-  if (!previous) return next;
+  if (!previous) {
+    return next;
+  }
   var diff = null;
-  for (var key in next) next[key] !== previous[key] && (diff || (diff = {}), diff[key] = next[key]);
+  for (var key in next) {
+    if (next[key] !== previous[key]) {
+      diff || (diff = {});
+      diff[key] = next[key];
+    }
+  }
   return diff;
 }
-function fixTransparentColors(diff, previous) {
+function fixTransparentColors(diff, previous, next) {
   var result = diff;
-  for (var key in diff) if (diff[key] === "transparent") {
-    var prev = previous?.[key],
-      fixed = "rgba(0, 0, 0, 0)";
-    if (typeof prev == "string") {
-      var rgbaMatch = prev.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
-      rgbaMatch && (fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`);
+  for (var key in diff) {
+    if (diff[key] === "transparent") {
+      var fixed = "rgba(0, 0, 0, 0)";
+      var candidates = [previous === null || previous === void 0 ? void 0 : previous[key], next === null || next === void 0 ? void 0 : next[key]];
+      var _iteratorNormalCompletion = true,
+        _didIteratorError = false,
+        _iteratorError = void 0;
+      try {
+        for (var _iterator = candidates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var candidate = _step.value;
+          if (typeof candidate === "string" && candidate !== "transparent") {
+            var rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
+            if (rgbaMatch) {
+              fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
+              break;
+            }
+          }
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+      if (result === diff) {
+        result = {
+          ...diff
+        };
+      }
+      result[key] = fixed;
     }
-    result === diff && (result = {
-      ...diff
-    }), result[key] = fixed;
   }
   return result;
 }