@hanzogui/animations-motion 3.0.6 → 4.3.1

package/dist/esm/createAnimations.mjs

@@ -4,9 +4,12 @@ import { fixStyles, getConfig, getSplitStyles, hooks, styleToCSS, Text, useCompo
 import { useAnimate, useMotionValue, useMotionValueEvent } from "motion/react";
 import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-const isServer = typeof window > "u";
+const isServer = typeof window === "undefined";
 function useAnimateSSRSafe() {
-  return isServer ? [useRef(null), () => {}] : useAnimate();
+  if (isServer) {
+    return [useRef(null), () => {}];
+  }
+  return useAnimate();
 }
 const MotionValueStrategy = /* @__PURE__ */new WeakMap();
 function createAnimations(animations) {
@@ -15,119 +18,174 @@ function createAnimations(animations) {
   return {
     View: MotionView,
     Text: MotionText,
-    isReactNative: !1,
+    isReactNative: false,
     inputStyle: "css",
     outputStyle: "inline",
-    avoidReRenders: !0,
+    avoidReRenders: true,
     animations,
     usePresence,
     ResetPresence,
     onMount() {
-      isHydratingGlobal = !1, hydratingComponents.forEach(cb => cb());
+      isHydratingGlobal = false;
+      hydratingComponents.forEach(cb => cb());
     },
     useAnimations: animationProps => {
-      isHydratingGlobal === void 0 && !getConfig().settings.disableSSR && (isHydratingGlobal = !0);
+      if (isHydratingGlobal === void 0 && !getConfig().settings.disableSSR) {
+        isHydratingGlobal = true;
+      }
       const {
-          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],
-        refs = useRef(null);
-      refs.current || (refs.current = {
-        isFirstRender: !0,
-        lastDoAnimate: null,
-        lastDontAnimate: null,
-        controls: null,
-        lastAnimateAt: 0,
-        disposed: !1,
-        wasExiting: !1,
-        isExiting: !1,
-        sendExitComplete: void 0,
-        animationState: "default",
-        frozenExitTarget: null,
-        exitCompleteScheduled: !1,
-        wasEntering: !1
-      });
+        props,
+        style,
+        componentState,
+        stateRef,
+        useStyleEmitter,
+        presence
+      } = animationProps;
+      const animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
+      const isComponentHydrating = componentState.unmounted === true;
+      const isMounting = componentState.unmounted === "should-enter";
+      const isEntering = !!componentState.unmounted;
+      const isExiting = presence?.[0] === false;
+      const sendExitComplete = presence?.[1];
+      const refs = 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
+        };
+      }
       const justFinishedEntering = refs.current.wasEntering && !isEntering;
       useEffect(() => {
         refs.current.wasEntering = isEntering;
       });
-      const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default",
-        disableAnimation = isComponentHydrating || isMounting || !animationKey,
-        [scope, animate] = useAnimateSSRSafe();
-      refs.current.isExiting = isExiting, refs.current.sendExitComplete = sendExitComplete, refs.current.animationState = animationState;
-      const justStartedExiting = isExiting && !refs.current.wasExiting,
-        justStoppedExiting = !isExiting && refs.current.wasExiting;
-      (justStartedExiting || justStoppedExiting) && (refs.current.frozenExitTarget = null, refs.current.exitCompleteScheduled = !1), useEffect(() => {
+      const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
+      const disableAnimation = isComponentHydrating || isMounting || !animationKey;
+      const [scope, animate] = useAnimateSSRSafe();
+      refs.current.isExiting = isExiting;
+      refs.current.sendExitComplete = sendExitComplete;
+      refs.current.animationState = animationState;
+      const justStartedExiting = isExiting && !refs.current.wasExiting;
+      const justStoppedExiting = !isExiting && refs.current.wasExiting;
+      if (justStartedExiting || justStoppedExiting) {
+        refs.current.frozenExitTarget = null;
+        refs.current.exitCompleteScheduled = false;
+      }
+      useEffect(() => {
         refs.current.wasExiting = isExiting;
       });
       const {
-          dontAnimate = {},
-          doAnimate,
-          animationOptions
-        } = getMotionAnimatedProps(props, style, disableAnimation, animationState),
-        [firstRenderStyle] = useState(style);
-      refs.current.isFirstRender && (refs.current.lastDontAnimate = firstRenderStyle);
+        dontAnimate = {},
+        doAnimate,
+        animationOptions
+      } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
+      const [firstRenderStyle] = useState(style);
+      if (refs.current.isFirstRender) {
+        refs.current.lastDontAnimate = firstRenderStyle;
+      }
       const [isHydrating, setIsHydrating] = useState(isHydratingGlobal);
-      useLayoutEffect(() => (isHydratingGlobal && hydratingComponents.add(() => {
-        setIsHydrating(!1);
-      }), () => {
-        refs.current.disposed = !0;
-      }), []);
+      useLayoutEffect(() => {
+        if (isHydratingGlobal) {
+          hydratingComponents.add(() => {
+            setIsHydrating(false);
+          });
+        }
+        return () => {
+          refs.current.disposed = true;
+        };
+      }, []);
       const flushAnimation = ({
         doAnimate: doAnimateRaw = {},
         animationOptions: passedOptions = {},
         dontAnimate: dontAnimate2
       }) => {
         let startedControls = null;
-        const isCurrentlyExiting = refs.current.isExiting,
-          currentSendExitComplete = refs.current.sendExitComplete;
+        const isCurrentlyExiting = refs.current.isExiting;
+        const currentSendExitComplete = refs.current.sendExitComplete;
         let doAnimate2 = doAnimateRaw;
-        isCurrentlyExiting && refs.current.frozenExitTarget && (doAnimate2 = refs.current.frozenExitTarget);
+        if (isCurrentlyExiting && refs.current.frozenExitTarget) {
+          doAnimate2 = refs.current.frozenExitTarget;
+        }
         const animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions(props.transition ?? null, "exit") : passedOptions;
         try {
           const node = stateRef.current.host;
-          if (refs.current.isFirstRender && (refs.current.lastDontAnimate = null, refs.current.lastDoAnimate = null), process.env.NODE_ENV === "development" && 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()), !(node instanceof HTMLElement)) return;
+          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 (!(node instanceof HTMLElement)) {
+            return;
+          }
           const prevDont = refs.current.lastDontAnimate;
-          if (dontAnimate2) if (prevDont) {
-            removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
-            const changed = getDiff(prevDont, dontAnimate2);
-            changed && Object.assign(node.style, changed);
-          } else Object.assign(node.style, dontAnimate2);
+          if (dontAnimate2) {
+            if (prevDont) {
+              removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
+              const changed = getDiff(prevDont, dontAnimate2);
+              if (changed) {
+                Object.assign(node.style, changed);
+              }
+            } else {
+              Object.assign(node.style, dontAnimate2);
+            }
+          }
           if (doAnimate2) {
-            if (prevDont) for (const key in prevDont) key in doAnimate2 && (node.style[key] = prevDont[key], refs.current.lastDoAnimate && (refs.current.lastDoAnimate[key] = prevDont[key]));
+            if (prevDont) {
+              for (const key in prevDont) {
+                if (key in doAnimate2) {
+                  node.style[key] = prevDont[key];
+                  if (refs.current.lastDoAnimate) {
+                    refs.current.lastDoAnimate[key] = prevDont[key];
+                  }
+                }
+              }
+            }
             const lastAnimated = refs.current.lastDoAnimate;
-            lastAnimated && removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
+            if (lastAnimated) {
+              removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
+            }
             const diff = getDiff(refs.current.lastDoAnimate, doAnimate2);
             if (diff) {
-              isCurrentlyExiting && !refs.current.frozenExitTarget && (refs.current.frozenExitTarget = {
-                ...doAnimate2
-              });
+              if (isCurrentlyExiting && !refs.current.frozenExitTarget) {
+                refs.current.frozenExitTarget = {
+                  ...doAnimate2
+                };
+              }
               const isPopperPosition = node.hasAttribute("data-popper-animate-position");
               let midFlightValues = null;
               if (refs.current.controls) {
@@ -136,50 +194,88 @@ function createAnimations(animations) {
                   midFlightValues = {};
                   for (const key in diff) {
                     const val = computed[key];
-                    val !== void 0 && val !== "" && (midFlightValues[key] = val);
+                    if (val !== void 0 && val !== "") {
+                      midFlightValues[key] = val;
+                    }
                   }
                 } catch {}
-                if (isCurrentlyExiting && refs.current.controls.stop(), midFlightValues) for (const key in midFlightValues) node.style[key] = midFlightValues[key];
+                if (isCurrentlyExiting) {
+                  refs.current.controls.stop();
+                }
+                if (midFlightValues) {
+                  for (const key in midFlightValues) {
+                    ;
+                    node.style[key] = midFlightValues[key];
+                  }
+                }
                 if (isPopperPosition) {
                   const anims = node.getAnimations();
-                  for (const anim of anims) anim.cancel();
+                  for (const anim of anims) {
+                    anim.cancel();
+                  }
                 }
               }
               const fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
-              midFlightValues?.transform && fixedDiff.transform && (fixedDiff.transform = [midFlightValues.transform, fixedDiff.transform]), startedControls = animate(scope.current, fixedDiff, animationOptions2), refs.current.controls = startedControls, refs.current.lastAnimateAt = Date.now();
+              if (midFlightValues?.transform && fixedDiff.transform) {
+                fixedDiff.transform = [midFlightValues.transform, fixedDiff.transform];
+              }
+              startedControls = animate(scope.current, fixedDiff, animationOptions2);
+              refs.current.controls = startedControls;
+              refs.current.lastAnimateAt = Date.now();
             }
           }
           refs.current.lastDontAnimate = dontAnimate2 ? {
             ...dontAnimate2
-          } : {}, refs.current.lastDoAnimate = doAnimate2 ? {
+          } : {};
+          refs.current.lastDoAnimate = doAnimate2 ? {
             ...doAnimate2
           } : {};
         } finally {
-          isCurrentlyExiting && currentSendExitComplete && (startedControls ? (refs.current.exitCompleteScheduled = !0, startedControls.finished.then(() => {
-            refs.current.isExiting && currentSendExitComplete();
-          }).catch(() => {
-            refs.current.isExiting && currentSendExitComplete();
-          })) : refs.current.exitCompleteScheduled || currentSendExitComplete());
+          if (isCurrentlyExiting && currentSendExitComplete) {
+            if (startedControls) {
+              refs.current.exitCompleteScheduled = true;
+              startedControls.finished.then(() => {
+                if (refs.current.isExiting) {
+                  currentSendExitComplete();
+                }
+              }).catch(() => {
+                if (refs.current.isExiting) {
+                  currentSendExitComplete();
+                }
+              });
+            } else if (!refs.current.exitCompleteScheduled) {
+              currentSendExitComplete();
+            }
+          }
         }
       };
-      return useStyleEmitter?.((nextStyle, effectiveTransition) => {
+      useStyleEmitter?.((nextStyle, effectiveTransition) => {
         const animationProps2 = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
         flushAnimation(animationProps2);
-      }), useIsomorphicLayoutEffect(() => {
+      });
+      useIsomorphicLayoutEffect(() => {
         if (refs.current.isFirstRender) {
-          if (refs.current.isFirstRender = !1, isHydrating) {
-            doAnimate && Object.keys(doAnimate).length > 0 ? refs.current.lastDoAnimate = {
-              ...doAnimate
-            } : refs.current.lastDoAnimate = dontAnimate ? {
-              ...dontAnimate
-            } : {}, refs.current.lastDontAnimate = dontAnimate ? {
+          refs.current.isFirstRender = false;
+          if (isHydrating) {
+            if (doAnimate && Object.keys(doAnimate).length > 0) {
+              refs.current.lastDoAnimate = {
+                ...doAnimate
+              };
+            } else {
+              refs.current.lastDoAnimate = dontAnimate ? {
+                ...dontAnimate
+              } : {};
+            }
+            refs.current.lastDontAnimate = dontAnimate ? {
               ...dontAnimate
-            } : {}, refs.current.lastAnimateAt = Date.now();
+            } : {};
+            refs.current.lastAnimateAt = Date.now();
             return;
           }
           refs.current.lastDontAnimate = dontAnimate ? {
             ...dontAnimate
-          } : {}, refs.current.lastDoAnimate = doAnimate ? {
+          } : {};
+          refs.current.lastDoAnimate = doAnimate ? {
             ...doAnimate
           } : {};
           return;
@@ -189,16 +285,24 @@ function createAnimations(animations) {
           dontAnimate,
           animationOptions
         });
-      }, [style, isExiting, disableAnimation]), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && (console.groupCollapsed("[motion] render"), console.info({
-        style,
-        doAnimate,
-        dontAnimate,
-        scope,
-        animationOptions,
-        isExiting,
-        isFirstRender: refs.current.isFirstRender,
-        animationProps
-      }), console.groupEnd()), {
+      }, [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"
@@ -216,12 +320,20 @@ function createAnimations(animations) {
         setValue(next, config = {
           type: "spring"
         }, onFinish) {
-          if (config.type === "direct") MotionValueStrategy.set(motionValue, {
-            type: "direct"
-          }), motionValue.set(next), onFinish?.();else {
-            if (MotionValueStrategy.set(motionValue, config), onFinish) {
+          if (config.type === "direct") {
+            MotionValueStrategy.set(motionValue, {
+              type: "direct"
+            });
+            motionValue.set(next);
+            onFinish?.();
+          } else {
+            MotionValueStrategy.set(motionValue, config);
+            if (onFinish) {
               const unsubscribe = motionValue.on("change", value => {
-                Math.abs(value - next) < 0.01 && (unsubscribe(), onFinish());
+                if (Math.abs(value - next) < 0.01) {
+                  unsubscribe();
+                  onFinish();
+                }
               });
             }
             motionValue.set(next);
@@ -239,24 +351,49 @@ function createAnimations(animations) {
       useMotionValueEvent(instance, "change", onValue);
     },
     useAnimatedNumberStyle(val, getStyleProp) {
-      const motionValue = val.getInstance(),
-        getStyleRef = useRef(getStyleProp);
-      return getStyleRef.current = getStyleProp, useMemo(() => ({
-        getStyle: cur => getStyleRef.current(cur),
-        motionValue
-      }), []);
+      const motionValue = val.getInstance();
+      const getStyleRef = useRef(getStyleProp);
+      getStyleRef.current = getStyleProp;
+      return useMemo(() => {
+        return {
+          getStyle: cur => {
+            return getStyleRef.current(cur);
+          },
+          motionValue
+        };
+      }, []);
+    },
+    useAnimatedNumbersStyle(vals, getStyleProp) {
+      const motionValues = vals.map(v => v.getInstance());
+      const getStyleRef = useRef(getStyleProp);
+      getStyleRef.current = getStyleProp;
+      return useMemo(() => {
+        return {
+          getStyle: (...currentValues) => getStyleRef.current(...currentValues),
+          motionValues
+        };
+      }, []);
     }
   };
   function getMotionAnimatedProps(props, style, disable, animationState = "default", transitionOverride) {
-    if (disable) return {
-      dontAnimate: style
-    };
+    if (disable) {
+      return {
+        dontAnimate: style
+      };
+    }
     const animationOptions = getAnimationOptions(transitionOverride ?? props.transition ?? null, animationState);
-    let dontAnimate, doAnimate;
+    let dontAnimate;
+    let doAnimate;
     const animateOnly = props.animateOnly;
     for (const key in style) {
       const value = style[key];
-      disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key) ? (dontAnimate ||= {}, dontAnimate[key] = value) : (doAnimate ||= {}, doAnimate[key] = value);
+      if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
+        dontAnimate ||= {};
+        dontAnimate[key] = value;
+      } else {
+        doAnimate ||= {};
+        doAnimate[key] = value;
+      }
     }
     return {
       dontAnimate,
@@ -267,104 +404,165 @@ function createAnimations(animations) {
   function getAnimationOptions(transitionProp, animationState = "default") {
     const normalized = normalizeTransition(transitionProp);
     let effectiveKey = getEffectiveAnimation(normalized, animationState);
-    !effectiveKey && animationState === "default" && (effectiveKey = normalized.enter || normalized.exit || null);
+    if (!effectiveKey && animationState === "default") {
+      effectiveKey = normalized.enter || normalized.exit || null;
+    }
     const globalConfigOverride = normalized.config ? {
       ...normalized.config
     } : void 0;
-    if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) return {};
-    const defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null,
-      delay = normalized.delay,
-      result = {};
-    defaultConfig && Object.assign(result, defaultConfig), globalConfigOverride && (Object.assign(result, globalConfigOverride), result.type === void 0 && result.duration !== void 0 && result.damping === void 0 && result.stiffness === void 0 && result.mass === void 0 && (result.type = "tween")), delay && (result.delay = delay), (defaultConfig || globalConfigOverride || delay) && (result.default = {
-      ...defaultConfig,
-      ...globalConfigOverride,
-      ...(delay ? {
-        delay
-      } : null)
-    });
-    for (const [propName, animationNameOrConfig] of Object.entries(normalized.properties)) if (typeof animationNameOrConfig == "string") result[propName] = withInferredType(animations[animationNameOrConfig]);else if (animationNameOrConfig && typeof animationNameOrConfig == "object") {
-      const baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
-      result[propName] = {
-        ...baseConfig,
-        ...animationNameOrConfig
+    if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
+      return {};
+    }
+    const defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
+    const delay = normalized.delay;
+    const result = {};
+    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)
       };
     }
-    convertMsToS(result), convertMsToS(result.default);
-    for (const key in result) key !== "default" && typeof result[key] == "object" && convertMsToS(result[key]);
+    for (const [propName, animationNameOrConfig] of Object.entries(normalized.properties)) {
+      if (typeof animationNameOrConfig === "string") {
+        result[propName] = withInferredType(animations[animationNameOrConfig]);
+      } else if (animationNameOrConfig && typeof animationNameOrConfig === "object") {
+        const baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
+        result[propName] = {
+          ...baseConfig,
+          ...animationNameOrConfig
+        };
+      }
+    }
+    convertMsToS(result);
+    convertMsToS(result.default);
+    for (const key in result) {
+      if (key !== "default" && typeof result[key] === "object") {
+        convertMsToS(result[key]);
+      }
+    }
     return result;
   }
 }
 function withInferredType(config) {
-  return config ? {
-    type: config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0 ? "tween" : "spring",
+  if (!config) {
+    return {
+      type: "spring"
+    };
+  }
+  const isTimingBased = config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
+  return {
+    type: isTimingBased ? "tween" : "spring",
     ...config
-  } : {
-    type: "spring"
   };
 }
 function convertMsToS(config) {
-  config && (typeof config.delay == "number" && (config.delay = config.delay / 1e3), typeof config.duration == "number" && (config.type === "tween" || config.type === void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0) && (config.duration = config.duration / 1e3));
+  if (!config) return;
+  if (typeof config.delay === "number") config.delay = config.delay / 1e3;
+  if (typeof config.duration === "number") {
+    const 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 (const key in prev) if (!(key in next)) {
-    if (dontClearIfIn && key in dontClearIfIn) continue;
-    node.style[key] = "";
+  for (const key in prev) {
+    if (!(key in next)) {
+      if (dontClearIfIn && key in dontClearIfIn) {
+        continue;
+      }
+      node.style[key] = "";
+    }
   }
 }
-const disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "boxSizing", "contain", "containerType", "display", "flexBasis", "flexDirection", "fontFamily", "justifyContent", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "textWrap", "userSelect"]),
-  MotionView = createMotionView("div"),
-  MotionText = createMotionView("span");
+const disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "boxSizing", "contain", "containerType", "display", "flexBasis", "flexDirection", "fontFamily", "justifyContent", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "textWrap", "userSelect"]);
+const MotionView = createMotionView("div");
+const MotionText = createMotionView("span");
 function createMotionView(defaultTag) {
-  const isText = defaultTag === "span",
-    Component = forwardRef((propsIn, ref) => {
-      const {
-          forwardedRef,
-          animation,
-          render = defaultTag,
-          style,
-          ...propsRest
-        } = propsIn,
-        [scope, animate] = useAnimateSSRSafe(),
-        hostRef = useRef(null),
-        composedRefs = useComposedRefs(forwardedRef, ref, hostRef, scope),
-        stateRef = useRef(null);
-      stateRef.current || (stateRef.current = {
+  const isText = defaultTag === "span";
+  const Component = forwardRef((propsIn, ref) => {
+    const {
+      forwardedRef,
+      animation,
+      render = defaultTag,
+      style,
+      ...propsRest
+    } = propsIn;
+    const [scope, animate] = useAnimateSSRSafe();
+    const hostRef = useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref, hostRef, scope);
+    const stateRef = useRef(null);
+    if (!stateRef.current) {
+      stateRef.current = {
         get host() {
           return hostRef.current;
         }
+      };
+    }
+    const [_, state] = useThemeWithState({});
+    const styles = Array.isArray(style) ? style : [style];
+    const [animatedStyle, nonAnimatedStyles] = (() => {
+      let animatedStyle2;
+      const nonAnimatedStyles2 = [];
+      for (const style2 of styles) {
+        if (style2.getStyle) {
+          animatedStyle2 = style2;
+        } else {
+          nonAnimatedStyles2.push(style2);
+        }
+      }
+      return [animatedStyle2, nonAnimatedStyles2];
+    })();
+    function getProps(props2) {
+      const out = getSplitStyles(props2, isText ? Text.staticConfig : View.staticConfig, state?.theme, state?.name, {
+        unmounted: false
+      }, {
+        isAnimated: false,
+        noClass: true,
+        resolveValues: "auto"
       });
-      const [_, state] = useThemeWithState({}),
-        styles = Array.isArray(style) ? style : [style],
-        [animatedStyle, nonAnimatedStyles] = (() => {
-          let animatedStyle2;
-          const nonAnimatedStyles2 = [];
-          for (const style2 of styles) style2.getStyle ? animatedStyle2 = style2 : nonAnimatedStyles2.push(style2);
-          return [animatedStyle2, nonAnimatedStyles2];
-        })();
-      function getProps(props2) {
-        const out = getSplitStyles(props2, isText ? Text.staticConfig : View.staticConfig, state?.theme, state?.name, {
-          unmounted: !1
-        }, {
-          isAnimated: !1,
-          noClass: !0,
-          resolveValues: "auto"
-        });
-        return out ? (out.viewProps.style && (fixStyles(out.viewProps.style), styleToCSS(out.viewProps.style)), out.viewProps) : {};
+      if (!out) {
+        return {};
       }
-      const props = getProps({
-          ...propsRest,
-          style: nonAnimatedStyles
-        }),
-        Element = render || "div",
-        transformedProps = hooks.usePropsTransform?.(render, props, stateRef, !1);
-      return useEffect(() => {
-        if (animatedStyle) return animatedStyle.motionValue.on("change", value => {
-          const nextStyle = animatedStyle.getStyle(value),
-            animationConfig = MotionValueStrategy.get(animatedStyle.motionValue),
-            node = hostRef.current,
-            webStyle = getProps({
-              style: nextStyle
-            }).style;
+      if (out.viewProps.style) {
+        fixStyles(out.viewProps.style);
+        styleToCSS(out.viewProps.style);
+      }
+      return out.viewProps;
+    }
+    const props = getProps({
+      ...propsRest,
+      style: nonAnimatedStyles
+    });
+    const Element = render || "div";
+    const transformedProps = hooks.usePropsTransform?.(render, props, stateRef, false);
+    useEffect(() => {
+      if (!animatedStyle) return;
+      if (animatedStyle.motionValues) {
+        const mvs = animatedStyle.motionValues;
+        const unsubs = mvs.map(mv => mv.on("change", () => {
+          const currentValues = mvs.map(v => v.get());
+          const nextStyle = animatedStyle.getStyle(...currentValues);
+          const animationConfig = MotionValueStrategy.get(mv);
+          const node = hostRef.current;
+          const webStyle = getProps({
+            style: nextStyle
+          }).style;
           if (webStyle && node instanceof HTMLElement) {
             const motionAnimationConfig = animationConfig?.type === "timing" ? {
               type: "tween",
@@ -378,35 +576,75 @@ function createMotionView(defaultTag) {
             };
             animate(node, webStyle, motionAnimationConfig);
           }
-        });
-      }, [animatedStyle]), /* @__PURE__ */jsx(Element, {
-        ...transformedProps,
-        ref: composedRefs
+        }));
+        return () => unsubs.forEach(fn => fn());
+      }
+      if (!animatedStyle.motionValue) return;
+      return animatedStyle.motionValue.on("change", value => {
+        const nextStyle = animatedStyle.getStyle(value);
+        const animationConfig = MotionValueStrategy.get(animatedStyle.motionValue);
+        const node = hostRef.current;
+        const webStyle = getProps({
+          style: nextStyle
+        }).style;
+        if (webStyle && node instanceof HTMLElement) {
+          const 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);
+        }
       });
+    }, [animatedStyle]);
+    return /* @__PURE__ */jsx(Element, {
+      ...transformedProps,
+      ref: composedRefs
     });
-  return Component.acceptRenderProp = !0, Component;
+  });
+  Component["acceptRenderProp"] = true;
+  return Component;
 }
 function getDiff(previous, next) {
-  if (!previous) return next;
+  if (!previous) {
+    return next;
+  }
   let diff = null;
-  for (const key in next) next[key] !== previous[key] && (diff ||= {}, diff[key] = next[key]);
+  for (const key in next) {
+    if (next[key] !== previous[key]) {
+      diff ||= {};
+      diff[key] = next[key];
+    }
+  }
   return diff;
 }
 function fixTransparentColors(diff, previous, next) {
   let result = diff;
-  for (const key in diff) if (diff[key] === "transparent") {
-    let fixed = "rgba(0, 0, 0, 0)";
-    const candidates = [previous?.[key], next?.[key]];
-    for (const candidate of candidates) if (typeof candidate == "string" && candidate !== "transparent") {
-      const rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
-      if (rgbaMatch) {
-        fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
-        break;
+  for (const key in diff) {
+    if (diff[key] === "transparent") {
+      let fixed = "rgba(0, 0, 0, 0)";
+      const candidates = [previous?.[key], next?.[key]];
+      for (const candidate of candidates) {
+        if (typeof candidate === "string" && candidate !== "transparent") {
+          const rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
+          if (rgbaMatch) {
+            fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
+            break;
+          }
+        }
+      }
+      if (result === diff) {
+        result = {
+          ...diff
+        };
       }
+      result[key] = fixed;
     }
-    result === diff && (result = {
-      ...diff
-    }), result[key] = fixed;
   }
   return result;
 }