motion-v 0.4.0 → 0.5.0-beta.1

package/dist/es/components/LayoutGroup.vue.mjs

@@ -1,7 +1,5 @@
-import { defineComponent, watch, renderSlot } from "vue";
-import { injectLayoutGroup, provideLayoutGroup, shouldInheritId, shouldInheritGroup } from "./context.mjs";
-import { nodeGroup } from "./group.mjs";
-import { useForceUpdate } from "./use-force-update.mjs";
+import { defineComponent, renderSlot } from "vue";
+import { useLayoutGroup } from "./use-layout-group.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LayoutGroup",
   props: {
@@ -10,25 +8,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const layoutGroup = injectLayoutGroup(null);
-    const [forceRender, key] = useForceUpdate();
-    function generateId() {
-      const upstreamId = layoutGroup == null ? void 0 : layoutGroup.id;
-      return shouldInheritId(props.inherit) && upstreamId ? props.id ? `${upstreamId}-${props.id}` : upstreamId : props.id;
-    }
-    function generateGroup() {
-      return shouldInheritGroup(props.inherit) ? (layoutGroup == null ? void 0 : layoutGroup.group) || nodeGroup() : nodeGroup();
-    }
-    const memoizedContext = {
-      id: generateId(),
-      group: generateGroup(),
-      forceRender,
-      key
-    };
-    watch(key, () => {
-      memoizedContext.id = generateId();
-    });
-    provideLayoutGroup(memoizedContext);
+    useLayoutGroup(props);
     return (_ctx, _cache) => {
       return renderSlot(_ctx.$slots, "default");
     };

package/dist/es/components/Motion.vue.mjs

@@ -3,8 +3,8 @@ import { injectMotion, injectLayoutGroup, provideMotion } from "./context.mjs";
 import { convertSvgStyleToAttributes, createStyles } from "../state/style.mjs";
 import { Primitive } from "./Primitive.mjs";
 import { MotionState } from "../state/motion-state.mjs";
-import { isSVGElement } from "../state/utils.mjs";
 import { injectAnimatePresence } from "./presence.mjs";
+import { getMotionElement } from "./utils.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -35,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onPressEnd: { type: Function },
     onViewEnter: { type: Function },
     onViewLeave: { type: Function },
-    layout: { type: Boolean },
+    layout: { type: [Boolean, String] },
     layoutId: {},
     layoutScroll: { type: Boolean },
     layoutRoot: { type: Boolean },
@@ -66,16 +66,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       parentState
     );
     provideMotion(state);
-    const instance = getCurrentInstance();
+    const instance = getCurrentInstance().proxy;
     onMounted(() => {
-      state.mount(instance == null ? void 0 : instance.vnode.el);
-      state.update({
+      state.mount(getMotionElement(instance.$el), {
         ...attrs,
-        ...props
+        ...props,
+        initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
       });
     });
     onUnmounted(() => {
-      if (safeUnmount(instance == null ? void 0 : instance.vnode.el))
+      if (safeUnmount(getMotionElement(instance.$el)))
         state.unmount();
     });
     onUpdated(() => {
@@ -86,22 +86,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     });
     function getProps() {
+      const isSVG = state.visualElement.type === "svg";
       const attrsProps = { ...attrs };
       Object.keys(attrs).forEach((key) => {
         if (isMotionValue(attrs[key]))
           attrsProps[key] = attrs[key].get();
       });
       let styleProps = {
-        ...props.style
+        ...props.style,
+        ...isSVG ? {} : state.visualElement.latestValues
       };
+      if (isSVG) {
+        const { attributes, style } = convertSvgStyleToAttributes(state.target);
+        Object.assign(attrsProps, attributes);
+        Object.assign(styleProps, style, props.style);
+      }
       if (!state.isMounted()) {
-        if (isSVGElement(props.as)) {
-          const { attributes, style } = convertSvgStyleToAttributes(state.getTarget());
-          Object.assign(attrsProps, attributes);
-          Object.assign(styleProps, style, props.style);
-        } else {
-          Object.assign(styleProps, state.getTarget(), props.style);
-        }
+        Object.assign(styleProps, state.target, props.style);
       }
       styleProps = createStyles(styleProps);
       attrsProps.style = styleProps;

package/dist/es/components/presence.mjs

@@ -1,5 +1,7 @@
+import { ref } from "vue";
 import { createContext } from "../utils/createContext.mjs";
-const doneCallbacks = /* @__PURE__ */ new Map();
+const doneCallbacks = /* @__PURE__ */ new WeakMap();
+const unPresenceDom = ref(/* @__PURE__ */ new WeakMap());
 function removeDoneCallback(element) {
   const prevDoneCallback = doneCallbacks.get(element);
   if (prevDoneCallback) {
@@ -12,5 +14,6 @@ export {
   doneCallbacks,
   injectAnimatePresence,
   provideAnimatePresence,
-  removeDoneCallback
+  removeDoneCallback,
+  unPresenceDom
 };

package/dist/es/components/use-layout-group.mjs

@@ -0,0 +1,34 @@
+import { watch } from "vue";
+import { injectLayoutGroup, provideLayoutGroup } from "./context.mjs";
+import { useForceUpdate } from "./use-force-update.mjs";
+import { nodeGroup } from "./group.mjs";
+function useLayoutGroup(props) {
+  const parentGroup = injectLayoutGroup(null);
+  const [forceRender, key] = useForceUpdate();
+  const context = {
+    id: getGroupId(props, parentGroup),
+    group: getGroup(props, parentGroup),
+    forceRender,
+    key
+  };
+  watch(key, () => {
+    context.id = getGroupId(props, parentGroup);
+  });
+  provideLayoutGroup(context);
+  return context;
+}
+function getGroupId(props, parentGroup) {
+  const shouldInherit = props.inherit === true || props.inherit === "id";
+  const parentId = parentGroup == null ? void 0 : parentGroup.id;
+  if (shouldInherit && parentId) {
+    return props.id ? `${parentId}-${props.id}` : parentId;
+  }
+  return props.id;
+}
+function getGroup(props, parentGroup) {
+  const shouldInherit = props.inherit === true || props.inherit === "group";
+  return shouldInherit ? (parentGroup == null ? void 0 : parentGroup.group) || nodeGroup() : nodeGroup();
+}
+export {
+  useLayoutGroup
+};

package/dist/es/components/use-pop-layout.mjs

@@ -0,0 +1,47 @@
+function usePopLayout(props) {
+  const styles = /* @__PURE__ */ new WeakMap();
+  function addPopStyle(state) {
+    if (props.mode !== "popLayout")
+      return;
+    const size = {
+      height: state.element.offsetHeight || 0,
+      width: state.element.offsetWidth || 0,
+      top: state.element.offsetTop,
+      left: state.element.offsetLeft
+    };
+    state.element.dataset.motionPopId = state.id;
+    const style = document.createElement("style");
+    styles.set(state, style);
+    document.head.appendChild(style);
+    style.textContent = `
+      [data-motion-pop-id="${state.id}"] {
+        animation: pop 0.3s ease-in-out;
+      }
+    `;
+    if (style.sheet) {
+      style.sheet.insertRule(`
+    [data-motion-pop-id="${state.id}"] {
+      position: absolute !important;
+      width: ${size.width}px !important;
+      height: ${size.height}px !important;
+      top: ${size.top}px !important;
+          left: ${size.left}px !important;
+        }
+      `);
+    }
+  }
+  function removePopStyle(state) {
+    const style = styles.get(state);
+    if (style) {
+      styles.delete(state);
+      document.head.removeChild(style);
+    }
+  }
+  return {
+    addPopStyle,
+    removePopStyle
+  };
+}
+export {
+  usePopLayout
+};

package/dist/es/components/utils.mjs

@@ -0,0 +1,8 @@
+function getMotionElement(el) {
+  if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
+    return getMotionElement(el.nextSibling);
+  return el;
+}
+export {
+  getMotionElement
+};

package/dist/es/constants/index.mjs

@@ -1,7 +1,7 @@
 const components = {
   motion: [
     "Motion",
-    "MotionPresence",
+    "AnimatePresence",
     "LayoutGroup"
   ]
 };

package/dist/es/features/gestures/hover.mjs

@@ -20,7 +20,11 @@ class HoverGesture extends BaseGesture {
         this.state.setActive("hover", true);
       });
       const onLeave = mouseEvent(element, "hoverend", () => {
+        var _a;
         this.state.setActive("hover", false);
+        (_a = this.state.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
+          child.state.setActive("hover", false);
+        });
       });
       element.addEventListener("pointerenter", onEnter);
       element.addEventListener("pointerleave", onLeave);

package/dist/es/features/gestures/in-view.mjs

@@ -1,5 +1,5 @@
 import { dispatchPointerEvent } from "../../utils/events.mjs";
-import { inView } from "../../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/dom/viewport/index.mjs";
+import { inView } from "../../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
 import { BaseGesture } from "./base.mjs";
 class InViewGesture extends BaseGesture {
   isActive() {
@@ -12,7 +12,11 @@ class InViewGesture extends BaseGesture {
       const element = this.state.element;
       const { once, ...viewOptions } = ((_a = this.state.getOptions()) == null ? void 0 : _a.inViewOptions) || {};
       return inView(element, (enterEntry) => {
+        var _a2;
         this.state.setActive("inView", true);
+        (_a2 = this.state.visualElement.variantChildren) == null ? void 0 : _a2.forEach((child) => {
+          child.state.setActive("inView", true);
+        });
         dispatchPointerEvent(element, "viewenter", enterEntry);
         if (!once) {
           return (leaveEntry) => {

package/dist/es/features/layout/config.mjs

@@ -1,5 +1,5 @@
-import { correctBorderRadius } from "../../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/projection/styles/scale-border-radius.mjs";
-import { correctBoxShadow } from "../../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs";
+import { correctBorderRadius } from "../../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/scale-border-radius.mjs";
+import { correctBoxShadow } from "../../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs";
 const defaultScaleCorrector = {
   borderRadius: {
     ...correctBorderRadius,

package/dist/es/features/layout/layout.mjs

@@ -1,10 +1,10 @@
 import { Feature } from "../feature.mjs";
-import { HTMLProjectionNode } from "../../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs";
+import { HTMLProjectionNode } from "../../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs";
 import { getClosestProjectingNode } from "./utils.mjs";
 import { onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount } from "vue";
-import { addScaleCorrector } from "../../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs";
+import { addScaleCorrector } from "../../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
 import { defaultScaleCorrector } from "./config.mjs";
-import { globalProjectionState } from "../../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/projection/node/state.mjs";
+import { globalProjectionState } from "../../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/node/state.mjs";
 import { injectLayoutGroup } from "../../components/context.mjs";
 class LayoutFeature extends Feature {
   constructor(state) {
@@ -40,11 +40,8 @@ class LayoutFeature extends Feature {
         (_a = visualElement.projection) == null ? void 0 : _a.root.didUpdate();
       });
       onBeforeUnmount(() => {
-        var _a;
         if (visualElement.projection) {
-          visualElement.projection.unmount();
-          if ((_a = this.layoutGroup) == null ? void 0 : _a.group)
-            this.layoutGroup.group.remove(visualElement.projection);
+          visualElement.projection.willUpdate();
         }
       });
     }
@@ -67,6 +64,12 @@ class LayoutFeature extends Feature {
     }
   }
   unmount() {
+    var _a;
+    if (this.state.visualElement.projection) {
+      this.state.visualElement.projection.unmount();
+      if ((_a = this.layoutGroup) == null ? void 0 : _a.group)
+        this.layoutGroup.group.remove(this.state.visualElement.projection);
+    }
   }
 }
 export {

package/dist/es/features/svg.mjs

@@ -1,5 +1,5 @@
 import { Feature } from "./feature.mjs";
-import { frame } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/frame.mjs";
+import { frame } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
 function isSVGElement(element) {
   return element instanceof SVGElement && element.tagName !== "svg";
 }

package/dist/es/index.mjs

@@ -3,36 +3,36 @@ import { default as default3 } from "./components/AnimatePresence.vue.mjs";
 import { default as default4 } from "./components/LayoutGroup.vue.mjs";
 import { injectLayoutGroup, injectMotion, provideLayoutGroup, provideMotion, shouldInheritGroup, shouldInheritId } from "./components/context.mjs";
 import { components, utilities } from "./constants/index.mjs";
-import { MotionValue, motionValue, motionValue as motionValue2 } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
-import { animate, createScopedAnimate } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animate/index.mjs";
-import { animateMini } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs";
-import { scroll } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/dom/scroll/index.mjs";
-import { scrollInfo } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/dom/scroll/track.mjs";
-import { inView } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/dom/viewport/index.mjs";
-import { anticipate } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/easing/anticipate.mjs";
-import { backIn, backInOut, backOut } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/easing/back.mjs";
-import { circIn, circInOut, circOut } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/easing/circ.mjs";
-import { easeIn, easeInOut, easeOut } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/easing/ease.mjs";
-import { cubicBezier } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/easing/cubic-bezier.mjs";
-import { steps } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/easing/steps.mjs";
-import { mirrorEasing } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/easing/modifiers/mirror.mjs";
-import { reverseEasing } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/easing/modifiers/reverse.mjs";
-import { spring } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/generators/spring/index.mjs";
-import { inertia } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/generators/inertia.mjs";
-import { keyframes } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/generators/keyframes.mjs";
-import { stagger } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/utils/stagger.mjs";
-import { transform } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/utils/transform.mjs";
-import { clamp } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/utils/clamp.mjs";
-import { delayInSeconds } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/utils/delay.mjs";
-import { distance, distance2D } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/utils/distance.mjs";
-import { invariant, warning } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/utils/errors.mjs";
-import { interpolate } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/utils/interpolate.mjs";
-import { mix } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/utils/mix/index.mjs";
-import { pipe } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/utils/pipe.mjs";
-import { progress } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/utils/progress.mjs";
-import { wrap } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/utils/wrap.mjs";
-import { cancelSync, sync } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/index-legacy.mjs";
-import { cancelFrame, frame, frameData, frameSteps } from "./node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/frame.mjs";
+import { MotionValue, motionValue, motionValue as motionValue2 } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { animate, createScopedAnimate } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { animateMini } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs";
+import { scroll } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
+import { scrollInfo } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/scroll/track.mjs";
+import { inView } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
+import { anticipate } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/anticipate.mjs";
+import { backIn, backInOut, backOut } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/back.mjs";
+import { circIn, circInOut, circOut } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/circ.mjs";
+import { easeIn, easeInOut, easeOut } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/ease.mjs";
+import { cubicBezier } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/cubic-bezier.mjs";
+import { steps } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/steps.mjs";
+import { mirrorEasing } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/modifiers/mirror.mjs";
+import { reverseEasing } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/modifiers/reverse.mjs";
+import { spring } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/generators/spring/index.mjs";
+import { inertia } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/generators/inertia.mjs";
+import { keyframes } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/generators/keyframes.mjs";
+import { stagger } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/utils/stagger.mjs";
+import { transform } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/transform.mjs";
+import { clamp } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/clamp.mjs";
+import { delayInSeconds } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/delay.mjs";
+import { distance, distance2D } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/distance.mjs";
+import { invariant, warning } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/errors.mjs";
+import { interpolate } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/interpolate.mjs";
+import { mix } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/mix/index.mjs";
+import { pipe } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/pipe.mjs";
+import { progress } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/progress.mjs";
+import { wrap } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/wrap.mjs";
+import { cancelSync, sync } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/index-legacy.mjs";
+import { cancelFrame, frame, frameData, frameSteps } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
 import { useComputed } from "./value/use-computed.mjs";
 import { useCombineMotionValues } from "./value/use-combine-values.mjs";
 import { useTransform } from "./value/use-transform.mjs";

package/dist/es/state/animate-variants-children.mjs

@@ -0,0 +1,72 @@
+import { style } from "./style.mjs";
+import { transformResetValue } from "./transform.mjs";
+import { resolveVariant, hasChanged, getOptions } from "./utils.mjs";
+import { animate } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animate/index.mjs";
+function animateVariantsChildren(state, activeState) {
+  const variantChildren = state.visualElement.variantChildren;
+  if (!(variantChildren == null ? void 0 : variantChildren.size)) {
+    return {
+      animations: [],
+      getAnimations: () => Promise.resolve()
+    };
+  }
+  const animationFactories = [];
+  Array.from(variantChildren).forEach((child, index) => {
+    var _a;
+    const prevTarget = child.state.target;
+    const childState = child.state;
+    childState.target = {};
+    for (const name in activeState) {
+      childState.activeStates[name] = true;
+      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)
+                }
+              );
+            }
+          );
+        }
+      }
+    }
+  });
+  return {
+    animations: animationFactories,
+    getAnimations: () => Promise.all(animationFactories.map((factory) => factory()))
+  };
+}
+export {
+  animateVariantsChildren
+};

package/dist/es/state/create-visual-element.mjs

@@ -1,6 +1,6 @@
 import { isSVGElement } from "./utils.mjs";
-import { HTMLVisualElement } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/html/HTMLVisualElement.mjs";
-import { SVGVisualElement } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.mjs";
+import { HTMLVisualElement } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/html/HTMLVisualElement.mjs";
+import { SVGVisualElement } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/svg/SVGVisualElement.mjs";
 function createVisualElement(Component, options) {
   return isSVGElement(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
 }