motion-v 0.13.1 → 1.0.0-alpha.0

package/dist/es/components/motion/use-motion-state.mjs

@@ -0,0 +1,115 @@
+import { injectMotion, injectLayoutGroup, provideMotion } from "../context.mjs";
+import { getMotionElement } from "../hooks/use-motion-elm.mjs";
+import { useLazyMotionContext } from "../lazy-motion/context.mjs";
+import { checkMotionIsHidden } from "./utils.mjs";
+import { injectAnimatePresence } from "../presence.mjs";
+import { MotionState } from "../../state/motion-state.mjs";
+import { convertSvgStyleToAttributes, createStyles } from "../../state/style.mjs";
+import { warning, invariant } from "hey-listen";
+import { ref, useAttrs, getCurrentInstance, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onBeforeUpdate, onUpdated } from "vue";
+import { useMotionConfig } from "../motion-config/context.mjs";
+import { isMotionValue } from "../../utils/motion-value.mjs";
+function useMotionState(props) {
+  var _a;
+  const parentState = injectMotion(null);
+  const layoutGroup = injectLayoutGroup({});
+  const config = useMotionConfig();
+  const animatePresenceContext = injectAnimatePresence({});
+  const lazyMotionContext = useLazyMotionContext({
+    features: ref([]),
+    strict: false
+  });
+  if (process.env.NODE_ENV !== "production" && ((_a = props.features) == null ? void 0 : _a.length) && lazyMotionContext.strict) {
+    const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
+    props.ignoreStrict ? warning(false, strictMessage) : invariant(false, strictMessage);
+  }
+  const attrs = useAttrs();
+  function getLayoutId() {
+    if (layoutGroup.id && props.layoutId)
+      return `${layoutGroup.id}-${props.layoutId}`;
+    return props.layoutId || void 0;
+  }
+  function getProps() {
+    return {
+      ...props,
+      lazyMotionContext,
+      layoutId: getLayoutId(),
+      transition: props.transition ?? config.value.transition,
+      layoutGroup,
+      motionConfig: config.value,
+      inViewOptions: props.inViewOptions ?? config.value.inViewOptions,
+      animatePresenceContext,
+      initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
+    };
+  }
+  function getMotionProps() {
+    return {
+      ...attrs,
+      ...getProps()
+    };
+  }
+  const state = new MotionState(
+    getMotionProps(),
+    parentState
+  );
+  provideMotion(state);
+  function getAttrs() {
+    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,
+      ...isSVG ? {} : state.visualElement.latestValues
+    };
+    if (isSVG) {
+      const { attributes, style } = convertSvgStyleToAttributes({
+        ...state.isMounted() ? state.target : state.baseTarget,
+        ...styleProps
+      });
+      Object.assign(attrsProps, attributes);
+      styleProps = style;
+    }
+    if (props.drag && props.dragListener !== false) {
+      Object.assign(styleProps, {
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        WebkitTouchCallout: "none",
+        touchAction: props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`
+      });
+    }
+    attrsProps.style = createStyles(styleProps);
+    return attrsProps;
+  }
+  const instance = getCurrentInstance().proxy;
+  onBeforeMount(() => {
+    state.beforeMount();
+  });
+  onMounted(() => {
+    state.mount(getMotionElement(instance.$el), getMotionProps(), checkMotionIsHidden(instance));
+  });
+  onBeforeUnmount(() => state.beforeUnmount());
+  onUnmounted(() => {
+    const el = getMotionElement(instance.$el);
+    if (!(el == null ? void 0 : el.isConnected)) {
+      state.unmount();
+    }
+  });
+  onBeforeUpdate(() => {
+    state.beforeUpdate();
+  });
+  onUpdated(() => {
+    state.update(getMotionProps());
+  });
+  return {
+    getProps,
+    getAttrs,
+    layoutGroup,
+    state
+  };
+}
+export {
+  useMotionState
+};

package/dist/es/components/motion/utils.d.ts

@@ -1,7 +1,22 @@
-import { ComponentPublicInstance } from 'vue';
+import { Component, ComponentPublicInstance, DefineComponent, IntrinsicElementAttributes } from 'vue';
+import { MotionProps } from './types';
+import { Feature } from '../../features';
+import { ComponentProps, MotionHTMLAttributes } from '../../types';
+type MotionCompProps = {
+    create: <T extends DefineComponent>(T: any, options?: MotionCreateOptions) => DefineComponent<Omit<MotionProps<any, unknown>, 'as' | 'asChild'> & ComponentProps<T>>;
+};
+export interface MotionCreateOptions {
+    forwardMotionProps?: boolean;
+    features?: Feature[];
+}
+export declare function checkMotionIsHidden(instance: ComponentPublicInstance): boolean;
 /**
- * 检查是否是隐藏的 motion 元素
- * @param instance
- * @returns
+ * Creates a motion component from a base component or HTML tag
+ * Caches string-based components for reuse
  */
-export declare function checkMotionIsHidden(instance: ComponentPublicInstance): boolean;
+export declare function createMotionComponent(component: string | DefineComponent, options?: MotionCreateOptions): Component;
+type MotionNameSpace = {
+    [K in keyof IntrinsicElementAttributes]: DefineComponent<Omit<MotionProps<K, unknown>, 'as' | 'asChild'> & MotionHTMLAttributes<K>, 'create'>;
+} & MotionCompProps;
+export declare function createMotionComponentWithFeatures(features?: Feature[]): MotionNameSpace;
+export {};

package/dist/es/components/motion/utils.mjs

@@ -1,10 +1,131 @@
 import { getMotionElement } from "../hooks/use-motion-elm.mjs";
+import { defineComponent, h, Comment, mergeProps, cloneVNode } from "vue";
+import { useMotionState } from "./use-motion-state.mjs";
+import { MotionComponentProps } from "./props.mjs";
 function checkMotionIsHidden(instance) {
   var _a;
   const isHidden = ((_a = getMotionElement(instance.$el)) == null ? void 0 : _a.style.display) === "none";
   const hasTransition = instance.$.vnode.transition;
   return hasTransition && isHidden;
 }
+const componentMaxCache = /* @__PURE__ */ new Map();
+const componentMiniCache = /* @__PURE__ */ new Map();
+function renderSlotFragments(fragments) {
+  if (!Array.isArray(fragments))
+    return [fragments];
+  const result = [];
+  for (const item of fragments) {
+    if (Array.isArray(item))
+      result.push(...item);
+    else
+      result.push(item);
+  }
+  return result;
+}
+const SELF_CLOSING_TAGS = ["area", "img", "input"];
+function handlePrimitiveAndSlot(asTag, allAttrs, slots) {
+  var _a, _b;
+  if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag)) {
+    return h(asTag, allAttrs);
+  }
+  if (asTag === "template") {
+    if (!slots.default)
+      return null;
+    const childrens = renderSlotFragments(slots.default());
+    const firstNonCommentChildrenIndex = childrens.findIndex((child) => child.type !== Comment);
+    if (firstNonCommentChildrenIndex === -1)
+      return childrens;
+    const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex];
+    (_a = firstNonCommentChildren.props) == null ? true : delete _a.ref;
+    const mergedProps = firstNonCommentChildren.props ? mergeProps(allAttrs, firstNonCommentChildren.props) : allAttrs;
+    if (allAttrs.class && ((_b = firstNonCommentChildren.props) == null ? void 0 : _b.class))
+      delete firstNonCommentChildren.props.class;
+    const cloned = cloneVNode(firstNonCommentChildren, mergedProps);
+    for (const prop in mergedProps) {
+      if (prop.startsWith("on")) {
+        cloned.props || (cloned.props = {});
+        cloned.props[prop] = mergedProps[prop];
+      }
+    }
+    if (childrens.length === 1)
+      return cloned;
+    childrens[firstNonCommentChildrenIndex] = cloned;
+    return childrens;
+  }
+  return null;
+}
+function createMotionComponent(component, options = {}) {
+  var _a;
+  const isString = typeof component === "string";
+  const name = isString ? component : component.name || "";
+  const componentCache = ((_a = options.features) == null ? void 0 : _a.length) > 0 ? componentMaxCache : componentMiniCache;
+  if (isString && (componentCache == null ? void 0 : componentCache.has(component))) {
+    return componentCache.get(component);
+  }
+  const motionComponent = defineComponent({
+    inheritAttrs: false,
+    props: {
+      ...MotionComponentProps,
+      features: {
+        type: Object,
+        default: () => options.features || []
+      },
+      as: { type: [String, Object], default: component || "div" }
+    },
+    name: name ? `motion.${name}` : "Motion",
+    setup(props, { slots }) {
+      const { getProps, getAttrs, state } = useMotionState(props);
+      function onVnodeUpdated() {
+        const el = state.element;
+        const isComponent = typeof props.as === "object";
+        if ((!isComponent || props.asChild) && el) {
+          const { style } = getAttrs();
+          for (const [key, val] of Object.entries(style)) {
+            el.style[key] = val;
+          }
+        }
+      }
+      return () => {
+        const motionProps = getProps();
+        const motionAttrs = getAttrs();
+        const asTag = props.asChild ? "template" : props.as;
+        const allAttrs = {
+          ...options.forwardMotionProps || props.forwardMotionProps ? motionProps : {},
+          ...motionAttrs,
+          onVnodeUpdated
+        };
+        const primitiveOrSlotResult = handlePrimitiveAndSlot(asTag, allAttrs, slots);
+        if (primitiveOrSlotResult !== null) {
+          return primitiveOrSlotResult;
+        }
+        return h(asTag, {
+          ...allAttrs
+        }, slots);
+      };
+    }
+  });
+  if (isString) {
+    componentCache == null ? void 0 : componentCache.set(component, motionComponent);
+  }
+  return motionComponent;
+}
+function createMotionComponentWithFeatures(features = []) {
+  return new Proxy({}, {
+    get(target, prop) {
+      if (prop === "create") {
+        return (component, options) => createMotionComponent(component, {
+          ...options,
+          features
+        });
+      }
+      return createMotionComponent(prop, {
+        features
+      });
+    }
+  });
+}
 export {
-  checkMotionIsHidden
+  checkMotionIsHidden,
+  createMotionComponent,
+  createMotionComponentWithFeatures
 };

package/dist/es/components/reorder/Group.vue.mjs

@@ -1,8 +1,8 @@
 import { defineComponent, toRefs, onUpdated, useAttrs, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { Motion } from "../motion/index.mjs";
 import { invariant } from "hey-listen";
 import { reorderContextProvider } from "./context.mjs";
 import { compareMin, checkReorder, getValue } from "./utils.mjs";
-import _sfc_main$1 from "../motion/Motion.vue.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "ReorderGroup",
@@ -25,6 +25,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     whileInView: {},
     whileFocus: {},
     forwardMotionProps: { type: Boolean },
+    features: {},
+    ignoreStrict: { type: Boolean },
     custom: {},
     initial: { type: [String, Array, Object, Boolean] },
     animate: {},
@@ -38,6 +40,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     motionConfig: {},
     onAnimationComplete: {},
     onUpdate: {},
+    onAnimationStart: {},
     layout: { type: [Boolean, String] },
     layoutId: {},
     layoutScroll: { type: Boolean },
@@ -126,7 +129,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1), normalizeProps(guardReactiveProps(bindProps())), {
+      return openBlock(), createBlock(unref(Motion), normalizeProps(guardReactiveProps(bindProps())), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default"),
           createTextVNode(" " + toDisplayString(warning()), 1)

package/dist/es/components/reorder/Item.vue.mjs

@@ -1,9 +1,9 @@
 import { defineComponent, toRefs, useAttrs, computed, ref, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { Motion } from "../motion/index.mjs";
 import { useReorderContext } from "./context.mjs";
 import { useDefaultMotionValue } from "./utils.mjs";
 import { invariant } from "hey-listen";
 import { useTransform } from "../../value/use-transform.mjs";
-import _sfc_main$1 from "../motion/Motion.vue.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "ReorderItem",
@@ -25,6 +25,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     whileInView: {},
     whileFocus: {},
     forwardMotionProps: { type: Boolean },
+    features: {},
+    ignoreStrict: { type: Boolean },
     custom: {},
     initial: { type: [String, Array, Object, Boolean], default: void 0 },
     animate: { default: void 0 },
@@ -38,6 +40,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     motionConfig: {},
     onAnimationComplete: {},
     onUpdate: {},
+    onAnimationStart: {},
     layoutId: { default: void 0 },
     layoutScroll: { type: Boolean, default: false },
     layoutRoot: { type: Boolean, default: false },
@@ -116,7 +119,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const isDragging = ref(false);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1), mergeProps(bindProps(), {
+      return openBlock(), createBlock(unref(Motion), mergeProps(bindProps(), {
         drag: drag.value,
         "drag-snap-to-origin": true,
         onDrag: _cache[0] || (_cache[0] = (event, gesturePoint) => {

package/dist/es/components/reorder/index.d.ts

@@ -21,6 +21,8 @@ export declare const ReorderGroup: <T, K, V>(__VLS_props: NonNullable<Awaited<ty
         whileInView?: import('../..').Options["whileInView"];
         whileFocus?: import('../..').Options["whileFocus"];
         forwardMotionProps?: boolean;
+        features?: import('../../features').Feature[];
+        ignoreStrict?: boolean;
         custom?: K;
         initial?: import('../..').VariantLabels | import('../..').Variant | boolean;
         animate?: import('../..').VariantLabels | import('../..').Variant | import('../../animation/types').AnimationControls;
@@ -739,6 +741,7 @@ export declare const ReorderGroup: <T, K, V>(__VLS_props: NonNullable<Awaited<ty
         motionConfig?: import('../motion-config/types').MotionConfigState;
         onAnimationComplete?: (definition: import('../..').Options["animate"]) => void;
         onUpdate?: (latest: import('framer-motion').ResolvedValues) => void;
+        onAnimationStart?: (definition: import('../..').Options["animate"]) => void;
         layout?: boolean | "position" | "size" | "preserve-aspect";
         layoutId?: string;
         layoutScroll?: boolean;
@@ -819,6 +822,8 @@ export declare const ReorderItem: <T extends import('../..').ElementType = "li",
         whileInView?: import('../..').Options["whileInView"];
         whileFocus?: import('../..').Options["whileFocus"];
         forwardMotionProps?: boolean;
+        features?: import('../../features').Feature[];
+        ignoreStrict?: boolean;
         custom?: unknown;
         initial?: import('../..').VariantLabels | import('../..').Variant | boolean;
         animate?: import('../..').VariantLabels | import('../..').Variant | import('../../animation/types').AnimationControls;
@@ -1537,6 +1542,7 @@ export declare const ReorderItem: <T extends import('../..').ElementType = "li",
         motionConfig?: import('../motion-config/types').MotionConfigState;
         onAnimationComplete?: (definition: import('../..').Options["animate"]) => void;
         onUpdate?: (latest: import('framer-motion').ResolvedValues) => void;
+        onAnimationStart?: (definition: import('../..').Options["animate"]) => void;
         layoutId?: string;
         layoutScroll?: boolean;
         layoutRoot?: boolean;
@@ -1618,6 +1624,8 @@ export declare const Reorder: {
             whileInView?: import('../..').Options["whileInView"];
             whileFocus?: import('../..').Options["whileFocus"];
             forwardMotionProps?: boolean;
+            features?: import('../../features').Feature[];
+            ignoreStrict?: boolean;
             custom?: K;
             initial?: import('../..').VariantLabels | import('../..').Variant | boolean;
             animate?: import('../..').VariantLabels | import('../..').Variant | import('../../animation/types').AnimationControls;
@@ -2336,6 +2344,7 @@ export declare const Reorder: {
             motionConfig?: import('../motion-config/types').MotionConfigState;
             onAnimationComplete?: (definition: import('../..').Options["animate"]) => void;
             onUpdate?: (latest: import('framer-motion').ResolvedValues) => void;
+            onAnimationStart?: (definition: import('../..').Options["animate"]) => void;
             layout?: boolean | "position" | "size" | "preserve-aspect";
             layoutId?: string;
             layoutScroll?: boolean;
@@ -2416,6 +2425,8 @@ export declare const Reorder: {
             whileInView?: import('../..').Options["whileInView"];
             whileFocus?: import('../..').Options["whileFocus"];
             forwardMotionProps?: boolean;
+            features?: import('../../features').Feature[];
+            ignoreStrict?: boolean;
             custom?: unknown;
             initial?: import('../..').VariantLabels | import('../..').Variant | boolean;
             animate?: import('../..').VariantLabels | import('../..').Variant | import('../../animation/types').AnimationControls;
@@ -3134,6 +3145,7 @@ export declare const Reorder: {
             motionConfig?: import('../motion-config/types').MotionConfigState;
             onAnimationComplete?: (definition: import('../..').Options["animate"]) => void;
             onUpdate?: (latest: import('framer-motion').ResolvedValues) => void;
+            onAnimationStart?: (definition: import('../..').Options["animate"]) => void;
             layoutId?: string;
             layoutScroll?: boolean;
             layoutRoot?: boolean;

package/dist/es/features/animation/animation.d.ts

@@ -1,9 +1,40 @@
+import { AnimateUpdates } from './types';
 import { Feature } from '../feature';
 import { MotionState } from '../../state';
+import { $Transition, AnimationFactory, Options } from '../../types';
+declare const STATE_TYPES: readonly ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
+export type StateType = typeof STATE_TYPES[number];
 export declare class AnimationFeature extends Feature {
     unmountControls?: () => void;
     constructor(state: MotionState);
     updateAnimationControlsSubscription(): void;
+    animateUpdates: AnimateUpdates;
+    executeAnimations({ factories, getChildAnimations, transition, controlActiveState, isExit, }: {
+        factories: AnimationFactory[];
+        getChildAnimations: () => Promise<any>;
+        childAnimations: (() => Promise<any>)[];
+        transition: $Transition | undefined;
+        controlActiveState: Partial<Record<string, boolean>> | undefined;
+        isExit: boolean;
+    }): Promise<any> | (() => Promise<any>);
+    /**
+     * Setup child animations
+     */
+    setupChildAnimations(transition: $Transition | undefined, controlActiveState: Partial<Record<string, boolean>> | undefined, isFallback: boolean): {
+        getChildAnimations: () => Promise<void>;
+        childAnimations: any[];
+    } | {
+        getChildAnimations: () => Promise<any[]>;
+        childAnimations: (() => Promise<any>)[];
+    };
+    createAnimationFactories(prevTarget: Record<string, any>, animationOptions: $Transition, controlDelay: number): AnimationFactory[];
+    resolveStateAnimation({ controlActiveState, directAnimate, directTransition, }: {
+        controlActiveState: Partial<Record<string, boolean>> | undefined;
+        directAnimate: Options['animate'];
+        directTransition: $Transition | undefined;
+    }): $Transition & {
+        layout?: $Transition;
+    };
     /**
      * Subscribe any provided AnimationControls to the component's VisualElement
      */
@@ -11,3 +42,4 @@ export declare class AnimationFeature extends Feature {
     update(): void;
     unmount(): void;
 }
+export {};

package/dist/es/features/animation/animation.mjs

@@ -1,15 +1,162 @@
 import { isAnimationControls } from "../../animation/utils.mjs";
 import { Feature } from "../feature.mjs";
+import { motionEvent } from "../../state/event.mjs";
+import { style } from "../../state/style.mjs";
+import { transformResetValue } from "../../state/transform.mjs";
+import { hasChanged, resolveVariant } from "../../state/utils.mjs";
+import { isDef } from "@vueuse/core";
+import { animate } from "../../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { noop } from "../../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/noop.mjs";
+import "../../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
+const STATE_TYPES = ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
 class AnimationFeature extends Feature {
   constructor(state) {
     super(state);
+    this.animateUpdates = ({
+      controlActiveState,
+      directAnimate,
+      directTransition,
+      controlDelay = 0,
+      isFallback,
+      isExit
+    } = {}) => {
+      const prevTarget = this.state.target;
+      this.state.target = { ...this.state.baseTarget };
+      let animationOptions = {};
+      const transition = { ...this.state.options.transition };
+      animationOptions = this.resolveStateAnimation({
+        controlActiveState,
+        directAnimate,
+        directTransition
+      });
+      const factories = this.createAnimationFactories(prevTarget, animationOptions, controlDelay);
+      const { getChildAnimations, childAnimations } = this.setupChildAnimations(animationOptions, controlActiveState, isFallback);
+      return this.executeAnimations({
+        factories,
+        getChildAnimations,
+        childAnimations,
+        transition,
+        controlActiveState,
+        isExit
+      });
+    };
+    this.state.animateUpdates = this.animateUpdates;
   }
   updateAnimationControlsSubscription() {
-    const { animate } = this.state.options;
-    if (isAnimationControls(animate)) {
-      this.unmountControls = animate.subscribe(this.state);
+    const { animate: animate2 } = this.state.options;
+    if (isAnimationControls(animate2)) {
+      this.unmountControls = animate2.subscribe(this.state);
     }
   }
+  executeAnimations({
+    factories,
+    getChildAnimations,
+    transition,
+    controlActiveState,
+    isExit = false
+  }) {
+    const getAnimation = () => Promise.all(factories.map((factory) => factory()).filter(Boolean));
+    const animationTarget = { ...this.state.target };
+    const element = this.state.element;
+    const finishAnimation = (animationPromise) => {
+      var _a, _b;
+      element.dispatchEvent(motionEvent("motionstart", animationTarget));
+      (_b = (_a = this.state.options).onAnimationStart) == null ? void 0 : _b.call(_a, animationTarget);
+      animationPromise.then(() => {
+        var _a2, _b2;
+        element.dispatchEvent(motionEvent("motioncomplete", animationTarget, isExit));
+        (_b2 = (_a2 = this.state.options).onAnimationComplete) == null ? void 0 : _b2.call(_a2, animationTarget);
+      }).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()]);
+      finishAnimation(animationPromise);
+      return animationPromise;
+    };
+    return controlActiveState ? getAnimationPromise : getAnimationPromise();
+  }
+  /**
+   * Setup child animations
+   */
+  setupChildAnimations(transition, controlActiveState, isFallback) {
+    var _a;
+    if (!((_a = this.state.visualElement.variantChildren) == null ? void 0 : _a.size) || !controlActiveState)
+      return { getChildAnimations: () => Promise.resolve(), childAnimations: [] };
+    const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
+    const maxStaggerDuration = (this.state.visualElement.variantChildren.size - 1) * staggerChildren;
+    const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
+    const childAnimations = Array.from(this.state.visualElement.variantChildren).map((child, index) => {
+      const childDelay = delayChildren + generateStaggerDuration(index);
+      return child.state.animateUpdates({
+        controlActiveState,
+        controlDelay: isFallback ? 0 : childDelay
+      });
+    }).filter(Boolean);
+    return {
+      getChildAnimations: () => Promise.all(childAnimations.map((animation) => {
+        return animation == null ? void 0 : animation();
+      })),
+      childAnimations
+    };
+  }
+  createAnimationFactories(prevTarget, animationOptions, controlDelay) {
+    const factories = [];
+    Object.keys(this.state.target).forEach((key) => {
+      var _a;
+      if (!hasChanged(prevTarget[key], this.state.target[key]))
+        return;
+      (_a = this.state.baseTarget)[key] ?? (_a[key] = style.get(this.state.element, key));
+      const keyValue = this.state.target[key] === "none" && isDef(transformResetValue[key]) ? transformResetValue[key] : this.state.target[key];
+      factories.push(() => {
+        var _a2;
+        return animate(
+          this.state.element,
+          { [key]: keyValue },
+          {
+            ...(animationOptions == null ? void 0 : animationOptions[key]) || animationOptions,
+            delay: (((_a2 = animationOptions == null ? void 0 : animationOptions[key]) == null ? void 0 : _a2.delay) || (animationOptions == null ? void 0 : animationOptions.delay) || 0) + controlDelay
+          }
+        );
+      });
+    });
+    return factories;
+  }
+  resolveStateAnimation({
+    controlActiveState,
+    directAnimate,
+    directTransition
+  }) {
+    let variantTransition = this.state.options.transition;
+    let variant = {};
+    const { variants, custom, transition, animatePresenceContext } = this.state.options;
+    const customValue = isDef(custom) ? custom : animatePresenceContext == null ? void 0 : animatePresenceContext.custom;
+    this.state.activeStates = { ...this.state.activeStates, ...controlActiveState };
+    STATE_TYPES.forEach((name) => {
+      if (!this.state.activeStates[name] || isAnimationControls(this.state.options[name]))
+        return;
+      const definition = this.state.options[name];
+      let resolvedVariant = isDef(definition) ? resolveVariant(definition, variants, customValue) : void 0;
+      if (this.state.visualElement.isVariantNode) {
+        const controlVariant = resolveVariant(this.state.context[name], variants, customValue);
+        resolvedVariant = controlVariant ? Object.assign(controlVariant || {}, resolvedVariant) : variant;
+      }
+      if (!resolvedVariant)
+        return;
+      if (name !== "initial")
+        variantTransition = resolvedVariant.transition || this.state.options.transition || {};
+      variant = Object.assign(variant, resolvedVariant);
+    });
+    if (directAnimate) {
+      variant = resolveVariant(directAnimate, variants, customValue);
+      variantTransition = variant.transition || directTransition || transition;
+    }
+    Object.entries(variant).forEach(([key, value]) => {
+      if (key === "transition")
+        return;
+      this.state.target[key] = value;
+    });
+    return variantTransition;
+  }
   /**
    * Subscribe any provided AnimationControls to the component's VisualElement
    */
@@ -17,9 +164,9 @@ class AnimationFeature extends Feature {
     this.updateAnimationControlsSubscription();
   }
   update() {
-    const { animate } = this.state.options;
+    const { animate: animate2 } = this.state.options;
     const { animate: prevAnimate } = this.state.visualElement.prevProps || {};
-    if (animate !== prevAnimate) {
+    if (animate2 !== prevAnimate) {
       this.updateAnimationControlsSubscription();
     }
   }

package/dist/es/features/animation/types.d.ts

@@ -0,0 +1,17 @@
+import { $Transition, Options } from '../../types';
+/**
+ * Core animation update function that handles all animation state changes and execution
+ * @param controlActiveState - Animation states that need to be updated
+ * @param controlDelay - Animation delay time
+ * @param directAnimate - Direct animation target value
+ * @param directTransition - Direct animation transition config
+ */
+export interface AnimateUpdatesOptions {
+    controlActiveState?: Partial<Record<string, boolean>>;
+    controlDelay?: number;
+    directAnimate?: Options['animate'];
+    directTransition?: $Transition;
+    isFallback?: boolean;
+    isExit?: boolean;
+}
+export type AnimateUpdates = (options?: AnimateUpdatesOptions) => Promise<any> | (() => Promise<any>);

package/dist/es/features/dom-animation.d.ts

@@ -0,0 +1,2 @@
+import { Feature } from './feature';
+export declare const domAnimation: Feature[];