motion-v 0.6.2 → 0.7.1

package/dist/cjs/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
+const core = require("@vueuse/core");
 const heyListen = require("hey-listen");
 const noop = (any) => any;
 let warning = noop;
@@ -3308,7 +3309,7 @@ function initPrefersReducedMotion() {
 }
 const valueTypes = [...dimensionValueTypes, color, complex];
 const findValueType = (v) => valueTypes.find(testValueType(v));
-function isAnimationControls(v) {
+function isAnimationControls$1(v) {
   return v !== null && typeof v === "object" && typeof v.start === "function";
 }
 function isVariantLabel(v) {
@@ -3325,7 +3326,7 @@ const variantPriorityOrder = [
 ];
 const variantProps = ["initial", ...variantPriorityOrder];
 function isControllingVariants(props) {
-  return isAnimationControls(props.animate) || variantProps.some((name) => isVariantLabel(props[name]));
+  return isAnimationControls$1(props.animate) || variantProps.some((name) => isVariantLabel(props[name]));
 }
 function isVariantNode(props) {
   return Boolean(isControllingVariants(props) || props.variants);
@@ -5081,8 +5082,6 @@ const svgElementSet = new Set(svgElements);
 function isSVGElement$1(as) {
   return svgElementSet.has(as);
 }
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-const isDef = (val) => typeof val !== "undefined";
 const rotation = {
   syntax: "<angle>",
   initialValue: "0deg",
@@ -5433,20 +5432,40 @@ class InViewGesture extends Feature {
   constructor(state2) {
     super(state2);
   }
-  mount() {
+  startObserver() {
     const element = this.state.element;
     if (!element)
       return;
+    this.unmount();
+    const { once, ...viewOptions } = this.state.getOptions().inViewOptions || {};
     this.unmount = inView(
       element,
       (entry) => {
         handleHoverEvent(this.state, entry, "Enter");
-        return (endEvent) => {
-          handleHoverEvent(this.state, entry, "Leave");
-        };
-      }
+        if (!once) {
+          return (endEvent) => {
+            handleHoverEvent(this.state, entry, "Leave");
+          };
+        }
+      },
+      viewOptions
     );
   }
+  mount() {
+    this.startObserver();
+  }
+  update() {
+    const { props, prevProps } = this.state.visualElement;
+    const hasOptionsChanged = ["amount", "margin", "root"].some(
+      hasViewportOptionChanged(props, prevProps)
+    );
+    if (hasOptionsChanged) {
+      this.startObserver();
+    }
+  }
+}
+function hasViewportOptionChanged({ inViewOptions = {} }, { inViewOptions: prevViewport = {} } = {}) {
+  return (name) => inViewOptions[name] !== prevViewport[name];
 }
 function isPrimaryPointer(event) {
   if (event.pointerType === "mouse") {
@@ -7897,43 +7916,17 @@ class ProjectionFeature extends Feature {
       options["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(this.state.visualElement.parent)
     );
     this.state.visualElement.projection.isPresent = true;
-    this.state.visualElement.projection.setOptions({
-      layout: options.layout,
-      layoutId: options.layoutId,
-      // TODO: drag
-      alwaysMeasureLayout: false,
-      visualElement: this.state.visualElement,
-      animationType: typeof options.layout === "string" ? options.layout : "both",
-      // initialPromotionConfig
-      layoutRoot: options.layoutRoot,
-      layoutScroll: options.layoutScroll,
-      crossfade: options.crossfade,
-      onExitComplete: () => {
-        var _a;
-        if (!((_a = this.state.visualElement.projection) == null ? void 0 : _a.isPresent)) {
-          const done = doneCallbacks.get(this.state.element);
-          this.state.isSafeToRemove = true;
-          if (done) {
-            done({
-              detail: {
-                isExit: true
-              }
-            }, true);
-          }
-        }
-      }
-    });
+    this.setOptions();
   }
   beforeMount() {
     this.initProjection();
   }
-  update() {
+  setOptions() {
     const options = this.state.options;
     this.state.visualElement.projection.setOptions({
       layout: options.layout,
       layoutId: options.layoutId,
-      // TODO: drag
-      alwaysMeasureLayout: false,
+      alwaysMeasureLayout: Boolean(options.drag) || options.dragConstraints && isHTMLElement(options.dragConstraints),
       visualElement: this.state.visualElement,
       animationType: typeof options.layout === "string" ? options.layout : "both",
       // initialPromotionConfig
@@ -7942,11 +7935,44 @@ class ProjectionFeature extends Feature {
       crossfade: options.crossfade
     });
   }
+  update() {
+    this.setOptions();
+  }
   mount() {
     var _a;
     (_a = this.state.visualElement.projection) == null ? void 0 : _a.mount(this.state.element);
   }
 }
+class FocusGesture extends Feature {
+  constructor() {
+    super(...arguments);
+    this.isActive = false;
+  }
+  onFocus() {
+    let isFocusVisible = false;
+    try {
+      isFocusVisible = this.state.element.matches(":focus-visible");
+    } catch (e) {
+      isFocusVisible = true;
+    }
+    if (!isFocusVisible)
+      return;
+    this.state.setActive("focus", true);
+    this.isActive = true;
+  }
+  onBlur() {
+    if (!this.isActive)
+      return;
+    this.state.setActive("focus", false);
+    this.isActive = false;
+  }
+  mount() {
+    this.unmount = pipe(
+      addDomEvent$1(this.state.element, "focus", () => this.onFocus()),
+      addDomEvent$1(this.state.element, "blur", () => this.onBlur())
+    );
+  }
+}
 class FeatureManager {
   constructor(state2) {
     this.features = [];
@@ -7958,7 +7984,9 @@ class FeatureManager {
       new LayoutFeature(state2),
       new ProjectionFeature(state2),
       new PanGesture(state2),
-      new DragGesture(state2)
+      new DragGesture(state2),
+      new FocusGesture(state2),
+      new AnimationFeature(state2)
     ];
   }
   mount() {
@@ -7986,80 +8014,160 @@ class FeatureManager {
     this.features.forEach((feature) => feature.beforeUnmount());
   }
 }
-function motionEvent(name, target, isExit) {
-  return new CustomEvent(name, { detail: { target, isExit } });
+function isAnimationControls(v) {
+  return v !== null && typeof v === "object" && typeof v.start === "function";
+}
+class AnimationFeature extends Feature {
+  constructor(state2) {
+    super(state2);
+  }
+  updateAnimationControlsSubscription() {
+    const { animate: animate2 } = this.state.options;
+    if (isAnimationControls(animate2)) {
+      this.unmountControls = animate2.subscribe(this.state);
+    }
+  }
+  /**
+   * Subscribe any provided AnimationControls to the component's VisualElement
+   */
+  mount() {
+    this.updateAnimationControlsSubscription();
+  }
+  update() {
+    const { animate: animate2 } = this.state.options;
+    const { animate: prevAnimate } = this.state.visualElement.prevProps || {};
+    if (animate2 !== prevAnimate) {
+      this.updateAnimationControlsSubscription();
+    }
+  }
+  unmount() {
+    var _a;
+    (_a = this.unmountControls) == null ? void 0 : _a.call(this);
+  }
 }
 function createVisualElement(Component, options) {
   return isSVGElement$1(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
 }
-function animateVariantsChildren(state2, activeState, isFirstAnimate = false) {
-  const variantChildren = state2.visualElement.variantChildren;
-  if (!(variantChildren == null ? void 0 : variantChildren.size)) {
-    return {
-      animations: [],
-      getAnimations: () => Promise.resolve()
-    };
-  }
-  const animationFactories = [];
-  Array.from(variantChildren).forEach((child, index) => {
+function motionEvent(name, target, isExit) {
+  return new CustomEvent(name, { detail: { target, isExit } });
+}
+const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "focus", "exit"];
+function animateUpdates({
+  controlActiveState = void 0,
+  controlDelay = 0,
+  directAnimate,
+  directTransition,
+  isFallback = false
+} = {}) {
+  const prevTarget = this.target;
+  this.target = { ...this.baseTarget };
+  const animationOptions = {};
+  const transition = { ...this.options.transition };
+  if (directAnimate)
+    resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
+  else
+    resolveStateAnimation.call(this, controlActiveState, animationOptions);
+  const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay);
+  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, controlActiveState, isFallback);
+  return executeAnimations.call(this, factories, getChildAnimations, childAnimations, transition, controlActiveState);
+}
+function resolveDirectAnimation(directAnimate, directTransition, animationOptions) {
+  const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
+  if (!variant)
+    return;
+  const transition = { ...this.options.transition, ...directTransition || variant.transition };
+  Object.entries(variant).forEach(([key, value]) => {
+    if (key === "transition")
+      return;
+    this.target[key] = value;
+    animationOptions[key] = getOptions(transition, key);
+  });
+}
+function resolveStateAnimation(controlActiveState, animationOptions) {
+  if (controlActiveState)
+    this.activeStates = { ...this.activeStates, ...controlActiveState };
+  STATE_TYPES.forEach((name) => {
+    if (!this.activeStates[name] || isAnimationControls(this.options[name]))
+      return;
+    const definition = core.isDef(this.options[name]) ? this.options[name] : this.context[name];
+    const variant = resolveVariant(definition, this.options.variants, this.options.custom);
+    if (!variant)
+      return;
+    const transition = { ...this.options.transition, ...variant.transition };
+    Object.entries(variant).forEach(([key, value]) => {
+      if (key === "transition")
+        return;
+      this.target[key] = value;
+      animationOptions[key] = getOptions(transition, key);
+    });
+  });
+}
+function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
+  const factories = [];
+  new Set(Object.keys(this.target)).forEach((key) => {
     var _a;
-    const prevTarget = isFirstAnimate ? child.state.baseTarget : child.state.target;
-    const childState = child.state;
-    childState.target = {};
-    for (const name in activeState) {
-      if (name === "initial" && !isFirstAnimate) {
-        continue;
-      }
-      const { definition, transition } = activeState[name];
-      const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
-      const maxStaggerDuration = (variantChildren.size - 1) * staggerChildren;
-      const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
-      const variant = resolveVariant(
-        definition,
-        child.props.variants,
-        child.props.custom
-      );
-      const animationOptions = {};
-      const allTarget = { ...prevTarget, ...variant };
-      for (const key in allTarget) {
-        if (key === "transition")
-          continue;
-        childState.target[key] = allTarget[key];
-        if (childState.target[key] === void 0) {
-          childState.target[key] = childState.baseTarget[key];
-        }
-        if (hasChanged(prevTarget[key], childState.target[key])) {
-          (_a = childState.baseTarget)[key] ?? (_a[key] = style.get(child.current, key));
-          animationOptions[key] = getOptions(
-            Object.assign({}, transition, allTarget.transition, child.props.transition),
-            key
-          );
-          const keyValue = childState.target[key] === "none" ? transformResetValue[key] : childState.target[key];
-          animationFactories.push(
-            () => {
-              var _a2;
-              return animate(
-                child.current,
-                {
-                  [key]: keyValue
-                },
-                {
-                  ...animationOptions[key] || {},
-                  delay: (((_a2 = animationOptions[key]) == null ? void 0 : _a2.delay) || 0) + delayChildren + generateStaggerDuration(index)
-                }
-              );
-            }
-          );
-        }
+    if (!hasChanged(this.visualElement.getValue(key), this.target[key]))
+      return;
+    (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
+    const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
+    const targetTransition = animationOptions[key];
+    factories.push(() => animate(
+      this.element,
+      { [key]: keyValue },
+      {
+        ...targetTransition,
+        delay: ((targetTransition == null ? void 0 : targetTransition.delay) || 0) + controlDelay
       }
-    }
+    ));
   });
+  return factories;
+}
+function setupChildAnimations(transition, controlActiveState, isFallback) {
+  var _a;
+  if (!((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) || controlActiveState)
+    return { getChildAnimations: () => Promise.resolve(), childAnimations: [] };
+  const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
+  const maxStaggerDuration = (this.visualElement.variantChildren.size - 1) * staggerChildren;
+  const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
+  const childAnimations = Array.from(this.visualElement.variantChildren).map((child, index) => {
+    const childDelay = delayChildren + generateStaggerDuration(index);
+    return child.state.animateUpdates({
+      controlActiveState: this.activeStates,
+      controlDelay: isFallback ? 0 : childDelay
+    });
+  }).filter(Boolean);
   return {
-    animations: animationFactories,
-    getAnimations: () => Promise.all(animationFactories.map((factory) => factory()))
+    getChildAnimations: () => Promise.all(childAnimations.map((animation) => animation())),
+    childAnimations
+  };
+}
+function executeAnimations(factories, getChildAnimations, childAnimations, transition, controlActiveState) {
+  let animations;
+  const getAnimation = () => {
+    animations = factories.map((factory) => factory()).filter(Boolean);
+    return Promise.all(animations);
   };
+  const isExit = this.activeStates.exit;
+  const animationTarget2 = { ...this.target };
+  const element = this.element;
+  const finishAnimation2 = (animationPromise) => {
+    if (!(animations == null ? void 0 : animations.length) && !childAnimations.length) {
+      if (isExit) {
+        element.dispatchEvent(motionEvent("motionstart", animationTarget2));
+        element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
+      }
+      return;
+    }
+    element.dispatchEvent(motionEvent("motionstart", animationTarget2));
+    animationPromise.then(() => element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit))).catch(noop);
+  };
+  const getAnimationPromise = () => {
+    const animationPromise = (transition == null ? void 0 : transition.when) ? (transition.when === "beforeChildren" ? getAnimation() : getChildAnimations()).then(() => transition.when === "beforeChildren" ? getChildAnimations() : getAnimation()) : Promise.all([getAnimation(), getChildAnimations()]);
+    finishAnimation2(animationPromise);
+    return animationPromise;
+  };
+  return controlActiveState ? getAnimationPromise : getAnimationPromise();
 }
-const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "exit"];
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
 class MotionState {
@@ -8070,10 +8178,11 @@ class MotionState {
     this.isVShow = false;
     this.children = /* @__PURE__ */ new Set();
     this.activeStates = {
-      // initial: true,
+      initial: true,
       animate: true
     };
     this._context = null;
+    this.animateUpdates = animateUpdates;
     this.id = `motion-state-${id++}`;
     this.options = options;
     this.parent = parent;
@@ -8104,6 +8213,7 @@ class MotionState {
     this.initTarget(initialVariantSource);
     this.featureManager = new FeatureManager(this);
   }
+  // Get animation context, falling back to parent context
   get context() {
     if (!this._context) {
       const handler = {
@@ -8116,13 +8226,16 @@ class MotionState {
     }
     return this._context;
   }
+  // Initialize animation target values
   initTarget(initialVariantSource) {
     this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
     this.target = {};
   }
+  // Get initial animation state
   get initial() {
-    return isDef(this.options.initial) ? this.options.initial : this.context.initial;
+    return core.isDef(this.options.initial) ? this.options.initial : this.context.initial;
   }
+  // Update visual element with new options
   updateOptions() {
     this.visualElement.update({
       ...this.options,
@@ -8137,6 +8250,7 @@ class MotionState {
   beforeMount() {
     this.featureManager.beforeMount();
   }
+  // Mount motion state to DOM element
   mount(element, options, notAnimate = false) {
     heyListen.invariant(
       Boolean(element),
@@ -8161,13 +8275,14 @@ class MotionState {
       }
     }
     this.featureManager.mount();
-    if (!notAnimate) {
-      this.animateUpdates(true);
+    if (!notAnimate && this.options.animate) {
+      this.animateUpdates();
     }
   }
   beforeUnmount() {
     this.featureManager.beforeUnmount();
   }
+  // Unmount motion state and optionally unmount children
   unmount(unMountChildren = false) {
     var _a, _b, _c;
     mountedStates.delete(this.element);
@@ -8193,6 +8308,7 @@ class MotionState {
   beforeUpdate() {
     this.featureManager.beforeUpdate();
   }
+  // Update motion state with new options
   update(options, notAnimate = false) {
     const prevAnimate = JSON.stringify(this.options.animate);
     this.options = options;
@@ -8206,122 +8322,20 @@ class MotionState {
       this.animateUpdates();
     }
   }
+  // Set animation state active status
   setActive(name, isActive, isAnimate = true) {
     var _a;
     if (!this.element || this.activeStates[name] === isActive)
       return;
     this.activeStates[name] = isActive;
     (_a = this.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
-      child.state.setActive(name, isActive, !isActive);
+      child.state.setActive(name, isActive, false);
     });
     if (isAnimate) {
-      this.animateUpdates();
-    }
-  }
-  animateUpdates(isInitial = false) {
-    const prevTarget = this.target;
-    this.target = {};
-    const activeState = {};
-    const animationOptions = {};
-    let transition;
-    for (const name of STATE_TYPES) {
-      if (name === "initial") {
-        if (!isInitial) {
-          continue;
-        }
-      }
-      if (!this.activeStates[name] && name !== "initial") {
-        continue;
-      }
-      const definition = isDef(this.options[name]) ? this.options[name] : this.context[name];
-      const variant = resolveVariant(
-        definition,
-        this.options.variants,
-        this.options.custom
-      );
-      transition = Object.assign({}, this.options.transition, variant == null ? void 0 : variant.transition);
-      if (typeof definition === "string") {
-        activeState[name] = {
-          definition,
-          transition
-        };
-      }
-      if (!variant)
-        continue;
-      const allTarget = { ...prevTarget, ...variant };
-      for (const key in allTarget) {
-        if (key === "transition")
-          continue;
-        this.target[key] = variant[key];
-        animationOptions[key] = getOptions(
-          transition,
-          key
-        );
-      }
-    }
-    const allTargetKeys = /* @__PURE__ */ new Set([
-      ...Object.keys(this.target),
-      ...Object.keys(prevTarget)
-    ]);
-    const animationFactories = [];
-    allTargetKeys.forEach((key) => {
-      var _a;
-      if (this.target[key] === void 0) {
-        this.target[key] = this.baseTarget[key];
-      }
-      if (hasChanged(prevTarget[key], this.target[key])) {
-        (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
-        const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
-        animationFactories.push(
-          () => {
-            return animate(
-              this.element,
-              {
-                [key]: keyValue
-              },
-              animationOptions[key] || {}
-            );
-          }
-        );
-      }
-    });
-    let getChildAnimations = () => Promise.resolve();
-    let childAnimations = [];
-    if (Object.keys(activeState).length) {
-      const { getAnimations, animations: animations2 } = animateVariantsChildren(this, activeState, isInitial);
-      getChildAnimations = getAnimations;
-      childAnimations = animations2;
-    }
-    let animations;
-    const getAnimation = () => {
-      animations = animationFactories.map((factory) => factory()).filter(Boolean);
-      return Promise.all(animations);
-    };
-    const { when } = transition;
-    let animationPromise;
-    if (when) {
-      const [first, last] = when === "beforeChildren" ? [getAnimation, getChildAnimations] : [getChildAnimations, getAnimation];
-      animationPromise = first().then(() => last());
-    } else {
-      animationPromise = Promise.all([getAnimation(), getChildAnimations()]);
-    }
-    const isExit = this.activeStates.exit;
-    if (!(animations == null ? void 0 : animations.length) && !childAnimations.length) {
-      if (isExit) {
-        this.element.dispatchEvent(motionEvent("motionstart", this.target));
-        this.element.dispatchEvent(motionEvent("motioncomplete", {
-          ...this.target
-        }, isExit));
-      }
-      return;
+      this.animateUpdates({
+        isFallback: !isActive
+      });
     }
-    const animationTarget2 = this.target;
-    this.element.dispatchEvent(motionEvent("motionstart", animationTarget2));
-    animationPromise.then(() => {
-      this.element.dispatchEvent(motionEvent("motioncomplete", {
-        ...animationTarget2
-      }, isExit));
-    }).catch(noop);
   }
   isMounted() {
     return Boolean(this.element);
@@ -8413,7 +8427,10 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     onPanSessionStart: { type: Function },
     onPanStart: { type: Function },
     onPan: { type: Function },
-    onPanEnd: { type: Function }
+    onPanEnd: { type: Function },
+    focus: {},
+    onFocus: { type: Function },
+    onBlur: { type: Function }
   }, {
     as: "div",
     asChild: false,
@@ -8426,7 +8443,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     layoutScroll: false,
     layoutRoot: false,
     dragListener: true,
-    dragElastic: 0.2,
+    dragElastic: 0.5,
     dragMomentum: true,
     whileDrag: void 0,
     crossfade: true
@@ -8539,6 +8556,48 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const componentCache = /* @__PURE__ */ new Map();
+const motion = new Proxy(_sfc_main$3, {
+  get(target, prop) {
+    if (typeof prop === "symbol")
+      return target[prop];
+    let motionComponent = componentCache.get(prop);
+    if (prop === "create") {
+      return (component) => {
+        return vue.defineComponent({
+          inheritAttrs: false,
+          name: `motion.${component.$name}`,
+          setup(_, { attrs, slots }) {
+            return () => {
+              return vue.h(_sfc_main$3, {
+                ...attrs,
+                as: component,
+                asChild: false
+              }, slots);
+            };
+          }
+        });
+      };
+    }
+    if (!motionComponent) {
+      motionComponent = vue.defineComponent({
+        inheritAttrs: false,
+        name: `motion.${prop}`,
+        setup(_, { attrs, slots }) {
+          return () => {
+            return vue.h(_sfc_main$3, {
+              ...attrs,
+              as: prop,
+              asChild: false
+            }, slots);
+          };
+        }
+      });
+      componentCache.set(prop, motionComponent);
+    }
+    return motionComponent;
+  }
+});
 function usePopLayout(props) {
   const styles = /* @__PURE__ */ new WeakMap();
   const config = useMotionConfig();
@@ -8650,9 +8709,12 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
           }
           if (!styles.has(state2)) {
             state2.willUpdate("done");
+          } else {
+            frame.render(() => {
+              removePopStyle(state2);
+            });
           }
           done();
-          removePopStyle(state2);
           if (!(el == null ? void 0 : el.isConnected)) {
             state2.unmount(true);
           }
@@ -8893,7 +8955,7 @@ function useSpring(source, config = {}) {
   let latestValue = value.get();
   let latestSetter = () => {
   };
-  const stopAnimation = () => {
+  const stopAnimation2 = () => {
     if (activeSpringAnimation) {
       activeSpringAnimation.stop();
       activeSpringAnimation = null;
@@ -8904,7 +8966,7 @@ function useSpring(source, config = {}) {
     if ((animation == null ? void 0 : animation.time) === 0) {
       animation.sample(frameData.delta);
     }
-    stopAnimation();
+    stopAnimation2();
     activeSpringAnimation = animateValue({
       keyframes: [value.get(), latestValue],
       velocity: value.getVelocity(),
@@ -8921,7 +8983,7 @@ function useSpring(source, config = {}) {
       latestSetter = set;
       frame.update(startAnimation);
       return value.get();
-    }, stopAnimation);
+    }, stopAnimation2);
   }, { immediate: true });
   if (isMotionValue(source)) {
     source.on("change", (v) => {
@@ -9014,7 +9076,8 @@ const utilities = {
     "useInView",
     "useAnimationFrame",
     "useMotionValueEvent",
-    "useLayoutGroup"
+    "useLayoutGroup",
+    "useDragControls"
   ]
 };
 function useAnimate() {
@@ -9043,6 +9106,127 @@ function useAnimate() {
   });
   return [domProxy, animate2];
 }
+function stopAnimation(visualElement) {
+  visualElement.values.forEach((value) => value.stop());
+}
+function animationControls() {
+  let hasMounted = false;
+  const subscribers = /* @__PURE__ */ new Set();
+  const controls = {
+    subscribe(state2) {
+      subscribers.add(state2);
+      return () => void subscribers.delete(state2);
+    },
+    start(definition, transitionOverride) {
+      heyListen.invariant(
+        hasMounted,
+        "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook."
+      );
+      const animations = [];
+      subscribers.forEach((state2) => {
+        animations.push(
+          state2.animateUpdates({
+            directAnimate: definition,
+            directTransition: transitionOverride
+          })
+        );
+      });
+      return Promise.all(animations);
+    },
+    set(definition) {
+      heyListen.invariant(
+        hasMounted,
+        "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook."
+      );
+      return subscribers.forEach((state2) => {
+        setValues(state2, definition);
+      });
+    },
+    stop() {
+      subscribers.forEach((state2) => {
+        stopAnimation(state2.visualElement);
+      });
+    },
+    mount() {
+      hasMounted = true;
+      return () => {
+        hasMounted = false;
+        controls.stop();
+      };
+    }
+  };
+  return controls;
+}
+function setValues(state2, definition) {
+  if (typeof definition === "string") {
+    return setVariants(state2, [definition]);
+  } else {
+    setTarget(state2.visualElement, definition);
+  }
+}
+function setVariants(state2, variantLabels) {
+  const reversedLabels = [...variantLabels].reverse();
+  const visualElement = state2.visualElement;
+  reversedLabels.forEach((key) => {
+    const variant = visualElement.getVariant(key);
+    variant && setTarget(visualElement, variant);
+    if (visualElement.variantChildren) {
+      visualElement.variantChildren.forEach((child) => {
+        setVariants(mountedStates.get(child.current), variantLabels);
+      });
+    }
+  });
+}
+function useAnimationControls() {
+  const controls = animationControls();
+  let unmount;
+  vue.onMounted(() => {
+    unmount = controls.mount();
+  });
+  vue.onUnmounted(() => {
+    unmount();
+  });
+  return controls;
+}
+class DragControls {
+  constructor() {
+    this.componentControls = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
+   *
+   * @internal
+   */
+  subscribe(controls) {
+    this.componentControls.add(controls);
+    return () => this.componentControls.delete(controls);
+  }
+  /**
+   * Start a drag gesture on every `motion` component that has this set of drag controls
+   * passed into it via the `dragControls` prop.
+   *
+   * ```jsx
+   * dragControls.start(e, {
+   *   snapToCursor: true
+   * })
+   * ```
+   *
+   * @param event - PointerEvent
+   * @param options - Options
+   *
+   * @public
+   */
+  start(event, options) {
+    this.componentControls.forEach((controls) => {
+      controls.start(
+        event,
+        options
+      );
+    });
+  }
+}
+const createDragControls = () => new DragControls();
+const useDragControls = createDragControls;
 exports.AnimatePresence = _sfc_main$2;
 exports.LayoutGroup = _sfc_main;
 exports.Motion = _sfc_main$3;
@@ -9085,6 +9269,7 @@ exports.keyframes = keyframes;
 exports.millisecondsToSeconds = millisecondsToSeconds;
 exports.mirrorEasing = mirrorEasing;
 exports.mix = mix;
+exports.motion = motion;
 exports.motionValue = motionValue;
 exports.noop = noop;
 exports.pipe = pipe;
@@ -9103,9 +9288,11 @@ exports.sync = sync;
 exports.time = time;
 exports.transform = transform;
 exports.useAnimate = useAnimate;
+exports.useAnimationControls = useAnimationControls;
 exports.useAnimationFrame = useAnimationFrame;
 exports.useCombineMotionValues = useCombineMotionValues;
 exports.useComputed = useComputed;
+exports.useDragControls = useDragControls;
 exports.useInView = useInView;
 exports.useLayoutGroup = useLayoutGroup;
 exports.useMotionConfig = useMotionConfig;