framer-motion 9.0.2 → 9.0.3

package/dist/es/animation/hooks/use-animated-state.mjs

@@ -46,18 +46,18 @@ function useAnimatedState(initialState) {
     const [animationState, setAnimationState] = useState(initialState);
     const visualState = useVisualState({}, false);
     const element = useConstant(() => {
-        return new StateVisualElement({ props: {}, visualState }, { initialState });
+        return new StateVisualElement({ props: {}, visualState, presenceContext: null }, { initialState });
     });
     useEffect(() => {
         element.mount({});
         return () => element.unmount();
     }, [element]);
     useEffect(() => {
-        element.setProps({
+        element.update({
             onUpdate: (v) => {
                 setAnimationState({ ...v });
             },
-        });
+        }, null);
     }, [setAnimationState, element]);
     const startAnimation = useConstant(() => (animationDefinition) => {
         return animateVisualElement(element, animationDefinition);

package/dist/es/animation/index.mjs

@@ -88,14 +88,12 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
         if (options.repeatDelay) {
             options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
         }
-        const visualElement = value.owner;
-        const element = visualElement && visualElement.current;
         /**
          * Animate via WAAPI if possible.
          */
-        if (visualElement &&
-            element instanceof HTMLElement &&
-            !(visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onUpdate)) {
+        if (value.owner &&
+            value.owner.current instanceof HTMLElement &&
+            !value.owner.getProps().onUpdate) {
             const acceleratedAnimation = createAcceleratedAnimation(value, valueName, options);
             if (acceleratedAnimation)
                 return acceleratedAnimation;

package/dist/es/animation/legacy-popmotion/index.mjs

@@ -29,7 +29,6 @@ const framesync = (update) => {
     };
 };
 function animate({ duration, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, keyframes: keyframes$1, autoplay = true, onPlay, onStop, onComplete, onRepeat, onUpdate, type = "keyframes", ...options }) {
-    var _a, _b;
     const initialElapsed = elapsed;
     let driverControls;
     let repeatCount = 0;
@@ -41,7 +40,12 @@ function animate({ duration, driver = framesync, elapsed = 0, repeat: repeatMax
     const origin = keyframes$1[0];
     const target = keyframes$1[keyframes$1.length - 1];
     let state = { done: false, value: origin };
-    if ((_b = (_a = animator).needsInterpolation) === null || _b === void 0 ? void 0 : _b.call(_a, origin, target)) {
+    /**
+     * If this value needs interpolation (ie is non-numerical), set up an interpolator.
+     * TODO: Keyframes animation also performs this step. This could be removed so it only happens here.
+     */
+    const { needsInterpolation } = animator;
+    if (needsInterpolation && needsInterpolation(origin, target)) {
         interpolateFromNumber = interpolate([0, 100], [origin, target], {
             clamp: false,
         });

package/dist/es/animation/legacy-popmotion/inertia.mjs

@@ -16,16 +16,15 @@ function inertia({ keyframes, velocity = 0, min, max, power = 0.8, timeConstant
         return Math.abs(min - v) < Math.abs(max - v) ? min : max;
     }
     function startAnimation(options) {
-        currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();
+        currentAnimation && currentAnimation.stop();
         currentAnimation = animate({
             keyframes: [0, 1],
             velocity: 0,
             ...options,
             driver,
             onUpdate: (v) => {
-                var _a;
-                onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(v);
-                (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, v);
+                onUpdate && onUpdate(v);
+                options.onUpdate && options.onUpdate(v);
             },
             onComplete,
             onStop,
@@ -84,7 +83,7 @@ function inertia({ keyframes, velocity = 0, min, max, power = 0.8, timeConstant
         });
     }
     return {
-        stop: () => currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop(),
+        stop: () => currentAnimation && currentAnimation.stop(),
     };
 }
 

package/dist/es/components/AnimatePresence/use-presence.mjs

@@ -31,7 +31,6 @@ function usePresence() {
     const { isPresent, onExitComplete, register } = context;
     // It's safe to call the following hooks conditionally (after an early return) because the context will always
     // either be null or non-null for the lifespan of the component.
-    // Replace with useId when released in React
     const id = useId();
     useEffect(() => register(id), []);
     const safeToRemove = () => onExitComplete && onExitComplete(id);

package/dist/es/events/add-dom-event.mjs

@@ -0,0 +1,6 @@
+function addDomEvent(target, eventName, handler, options = { passive: true }) {
+    target.addEventListener(eventName, handler, options);
+    return () => target.removeEventListener(eventName, handler);
+}
+
+export { addDomEvent };

package/dist/es/events/add-pointer-event.mjs

@@ -0,0 +1,8 @@
+import { addDomEvent } from './add-dom-event.mjs';
+import { addPointerInfo } from './event-info.mjs';
+
+function addPointerEvent(target, eventName, handler, options) {
+    return addDomEvent(target, eventName, addPointerInfo(handler), options);
+}
+
+export { addPointerEvent };

package/dist/es/events/use-dom-event.mjs

@@ -1,9 +1,6 @@
 import { useEffect } from 'react';
+import { addDomEvent } from './add-dom-event.mjs';
 
-function addDomEvent(target, eventName, handler, options = { passive: true }) {
-    target.addEventListener(eventName, handler, options);
-    return () => target.removeEventListener(eventName, handler);
-}
 /**
  * Attaches an event listener directly to the provided DOM element.
  *
@@ -34,4 +31,4 @@ function useDomEvent(ref, eventName, handler, options) {
     }, [ref, eventName, handler, options]);
 }
 
-export { addDomEvent, useDomEvent };
+export { useDomEvent };

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -1,16 +1,16 @@
 import { invariant } from 'hey-listen';
-import { PanSession } from '../PanSession.mjs';
+import { PanSession } from '../pan/PanSession.mjs';
 import { getGlobalLock } from './utils/lock.mjs';
 import { isRefObject } from '../../utils/is-ref-object.mjs';
-import { addPointerEvent } from '../../events/use-pointer-event.mjs';
-import { applyConstraints, calcRelativeConstraints, resolveDragElastic, rebaseAxisConstraints, calcViewportConstraints, calcOrigin, defaultElastic } from './utils/constraints.mjs';
+import { addPointerEvent } from '../../events/add-pointer-event.mjs';
+import { applyConstraints, calcRelativeConstraints, resolveDragElastic, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, calcOrigin } from './utils/constraints.mjs';
 import { AnimationType } from '../../render/utils/types.mjs';
 import { createBox } from '../../projection/geometry/models.mjs';
 import { eachAxis } from '../../projection/utils/each-axis.mjs';
 import { measurePageBox } from '../../projection/utils/measure.mjs';
 import { extractEventInfo } from '../../events/event-info.mjs';
 import { convertBoxToBoundingBox, convertBoundingBoxToBox } from '../../projection/geometry/conversion.mjs';
-import { addDomEvent } from '../../events/use-dom-event.mjs';
+import { addDomEvent } from '../../events/add-dom-event.mjs';
 import { calcLength } from '../../projection/geometry/delta-calc.mjs';
 import { mix } from '../../utils/mix.mjs';
 import { percent } from '../../value/types/numbers/units.mjs';
@@ -45,7 +45,8 @@ class VisualElementDragControls {
         /**
          * Don't start dragging if this component is exiting
          */
-        if (this.visualElement.isPresent === false)
+        const { presenceContext } = this.visualElement;
+        if (presenceContext && presenceContext.isPresent === false)
             return;
         const onSessionStart = (event) => {
             // Stop any animations on both axis values immediately. This allows the user to throw and catch
@@ -56,7 +57,6 @@ class VisualElementDragControls {
             }
         };
         const onStart = (event, info) => {
-            var _a;
             // Attempt to grab the global drag gesture lock - maybe make this part of PanSession
             const { drag, dragPropagation, onDragStart } = this.getProps();
             if (drag && !dragPropagation) {
@@ -78,23 +78,26 @@ class VisualElementDragControls {
              * Record gesture origin
              */
             eachAxis((axis) => {
-                var _a, _b;
                 let current = this.getAxisMotionValue(axis).get() || 0;
                 /**
                  * If the MotionValue is a percentage value convert to px
                  */
                 if (percent.test(current)) {
-                    const measuredAxis = (_b = (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.layoutBox[axis];
-                    if (measuredAxis) {
-                        const length = calcLength(measuredAxis);
-                        current = length * (parseFloat(current) / 100);
+                    const { projection } = this.visualElement;
+                    if (projection && projection.layout) {
+                        const measuredAxis = projection.layout.layoutBox[axis];
+                        if (measuredAxis) {
+                            const length = calcLength(measuredAxis);
+                            current = length * (parseFloat(current) / 100);
+                        }
                     }
                 }
                 this.originPoint[axis] = current;
             });
             // Fire onDragStart event
-            onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event, info);
-            (_a = this.visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Drag, true);
+            onDragStart && onDragStart(event, info);
+            const { animationState } = this.visualElement;
+            animationState && animationState.setActive(AnimationType.Drag, true);
         };
         const onMove = (event, info) => {
             // latestPointerEvent = event
@@ -108,7 +111,7 @@ class VisualElementDragControls {
                 this.currentDirection = getCurrentDirection(offset);
                 // If we've successfully set a direction, notify listener
                 if (this.currentDirection !== null) {
-                    onDirectionLock === null || onDirectionLock === void 0 ? void 0 : onDirectionLock(this.currentDirection);
+                    onDirectionLock && onDirectionLock(this.currentDirection);
                 }
                 return;
             }
@@ -126,7 +129,7 @@ class VisualElementDragControls {
              * This must fire after the render call as it might trigger a state
              * change which itself might trigger a layout update.
              */
-            onDrag === null || onDrag === void 0 ? void 0 : onDrag(event, info);
+            onDrag && onDrag(event, info);
         };
         const onSessionEnd = (event, info) => this.stop(event, info);
         this.panSession = new PanSession(originEvent, {
@@ -144,22 +147,22 @@ class VisualElementDragControls {
         const { velocity } = info;
         this.startAnimation(velocity);
         const { onDragEnd } = this.getProps();
-        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, info);
+        onDragEnd && onDragEnd(event, info);
     }
     cancel() {
-        var _a, _b;
         this.isDragging = false;
-        if (this.visualElement.projection) {
-            this.visualElement.projection.isAnimationBlocked = false;
+        const { projection, animationState } = this.visualElement;
+        if (projection) {
+            projection.isAnimationBlocked = false;
         }
-        (_a = this.panSession) === null || _a === void 0 ? void 0 : _a.end();
+        this.panSession && this.panSession.end();
         this.panSession = undefined;
         const { dragPropagation } = this.getProps();
         if (!dragPropagation && this.openGlobalLock) {
             this.openGlobalLock();
             this.openGlobalLock = null;
         }
-        (_b = this.visualElement.animationState) === null || _b === void 0 ? void 0 : _b.setActive(AnimationType.Drag, false);
+        animationState && animationState.setActive(AnimationType.Drag, false);
     }
     updateAxis(axis, _point, offset) {
         const { drag } = this.getProps();
@@ -239,7 +242,7 @@ class VisualElementDragControls {
             if (!shouldDrag(axis, drag, this.currentDirection)) {
                 return;
             }
-            let transition = (constraints === null || constraints === void 0 ? void 0 : constraints[axis]) || {};
+            let transition = (constraints && constraints[axis]) || {};
             if (dragSnapToOrigin)
                 transition = { min: 0, max: 0 };
             /**
@@ -283,12 +286,12 @@ class VisualElementDragControls {
      * - Otherwise, we apply the delta to the x/y motion values.
      */
     getAxisMotionValue(axis) {
-        var _a;
         const dragKey = "_drag" + axis.toUpperCase();
-        const externalMotionValue = this.visualElement.getProps()[dragKey];
+        const props = this.visualElement.getProps();
+        const externalMotionValue = props[dragKey];
         return externalMotionValue
             ? externalMotionValue
-            : this.visualElement.getValue(axis, ((_a = this.visualElement.getProps().initial) === null || _a === void 0 ? void 0 : _a[axis]) || 0);
+            : this.visualElement.getValue(axis, (props.initial ? props.initial[axis] : undefined) || 0);
     }
     snapToCursor(point) {
         eachAxis((axis) => {
@@ -310,7 +313,6 @@ class VisualElementDragControls {
      * relative to where it was before the resize.
      */
     scalePositionWithinConstraints() {
-        var _a;
         if (!this.visualElement.current)
             return;
         const { drag, dragConstraints } = this.getProps();
@@ -341,7 +343,7 @@ class VisualElementDragControls {
         this.visualElement.current.style.transform = transformTemplate
             ? transformTemplate({}, "")
             : "none";
-        (_a = projection.root) === null || _a === void 0 ? void 0 : _a.updateScroll();
+        projection.root && projection.root.updateScroll();
         projection.updateLayout();
         this.resolveConstraints();
         /**
@@ -360,7 +362,6 @@ class VisualElementDragControls {
         });
     }
     addListeners() {
-        var _a;
         if (!this.visualElement.current)
             return;
         elementDragControls.set(this.visualElement, this);
@@ -381,7 +382,7 @@ class VisualElementDragControls {
         const { projection } = this.visualElement;
         const stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints);
         if (projection && !projection.layout) {
-            (_a = projection.root) === null || _a === void 0 ? void 0 : _a.updateScroll();
+            projection.root && projection.root.updateScroll();
             projection.updateLayout();
         }
         measureDragConstraints();
@@ -410,7 +411,7 @@ class VisualElementDragControls {
             stopResizeListener();
             stopPointerListener();
             stopMeasureLayoutListener();
-            stopLayoutUpdateListener === null || stopLayoutUpdateListener === void 0 ? void 0 : stopLayoutUpdateListener();
+            stopLayoutUpdateListener && stopLayoutUpdateListener();
         };
     }
     getProps() {

package/dist/es/gestures/drag/index.mjs

@@ -0,0 +1,27 @@
+import { Feature } from '../../motion/features/Feature.mjs';
+import { noop } from '../../utils/noop.mjs';
+import { VisualElementDragControls } from './VisualElementDragControls.mjs';
+
+class DragGesture extends Feature {
+    constructor(node) {
+        super(node);
+        this.removeGroupControls = noop;
+        this.removeListeners = noop;
+        this.controls = new VisualElementDragControls(node);
+    }
+    mount() {
+        // If we've been provided a DragControls for manual control over the drag gesture,
+        // subscribe this component to it on mount.
+        const { dragControls } = this.node.getProps();
+        if (dragControls) {
+            this.removeGroupControls = dragControls.subscribe(this.controls);
+        }
+        this.removeListeners = this.controls.addListeners() || noop;
+    }
+    unmount() {
+        this.removeGroupControls();
+        this.removeListeners();
+    }
+}
+
+export { DragGesture };

package/dist/es/gestures/focus.mjs

@@ -0,0 +1,42 @@
+import { addDomEvent } from '../events/add-dom-event.mjs';
+import { Feature } from '../motion/features/Feature.mjs';
+import { AnimationType } from '../render/utils/types.mjs';
+import { pipe } from '../utils/pipe.mjs';
+
+class FocusGesture extends Feature {
+    constructor() {
+        super(...arguments);
+        this.isActive = false;
+    }
+    onFocus() {
+        let isFocusVisible = false;
+        /**
+         * If this element doesn't match focus-visible then don't
+         * apply whileHover. But, if matches throws that focus-visible
+         * is not a valid selector then in that browser outline styles will be applied
+         * to the element by default and we want to match that behaviour with whileFocus.
+         */
+        try {
+            isFocusVisible = this.node.current.matches(":focus-visible");
+        }
+        catch (e) {
+            isFocusVisible = true;
+        }
+        if (!isFocusVisible || !this.node.animationState)
+            return;
+        this.node.animationState.setActive(AnimationType.Focus, true);
+        this.isActive = true;
+    }
+    onBlur() {
+        if (!this.isActive || !this.node.animationState)
+            return;
+        this.node.animationState.setActive(AnimationType.Focus, false);
+        this.isActive = false;
+    }
+    mount() {
+        this.unmount = pipe(addDomEvent(this.node.current, "focus", () => this.onFocus()), addDomEvent(this.node.current, "blur", () => this.onBlur()));
+    }
+    unmount() { }
+}
+
+export { FocusGesture };

package/dist/es/gestures/hover.mjs

@@ -0,0 +1,32 @@
+import { addPointerEvent } from '../events/add-pointer-event.mjs';
+import { AnimationType } from '../render/utils/types.mjs';
+import { pipe } from '../utils/pipe.mjs';
+import { isDragActive } from './drag/utils/lock.mjs';
+import { Feature } from '../motion/features/Feature.mjs';
+
+function addHoverEvent(node, isActive) {
+    const eventName = "pointer" + (isActive ? "enter" : "leave");
+    const callbackName = "onHover" + (isActive ? "Start" : "End");
+    const handleEvent = (event, info) => {
+        if (event.type === "touch" || isDragActive())
+            return;
+        const props = node.getProps();
+        if (node.animationState && props.whileHover) {
+            node.animationState.setActive(AnimationType.Hover, isActive);
+        }
+        if (props[callbackName]) {
+            props[callbackName](event, info);
+        }
+    };
+    return addPointerEvent(node.current, eventName, handleEvent, {
+        passive: !node.getProps()[callbackName],
+    });
+}
+class HoverGesture extends Feature {
+    mount() {
+        this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));
+    }
+    unmount() { }
+}
+
+export { HoverGesture };

package/dist/es/gestures/{PanSession.mjs → pan/PanSession.mjs}

@@ -1,11 +1,11 @@
-import { extractEventInfo } from '../events/event-info.mjs';
-import { sync, cancelSync } from '../frameloop/index.mjs';
-import { secondsToMilliseconds } from '../utils/time-conversion.mjs';
-import { addPointerEvent } from '../events/use-pointer-event.mjs';
-import { pipe } from '../utils/pipe.mjs';
-import { distance2D } from '../utils/distance.mjs';
-import { frameData } from '../frameloop/data.mjs';
-import { isPrimaryPointer } from '../events/utils/is-primary-pointer.mjs';
+import { extractEventInfo } from '../../events/event-info.mjs';
+import { sync, cancelSync } from '../../frameloop/index.mjs';
+import { secondsToMilliseconds } from '../../utils/time-conversion.mjs';
+import { addPointerEvent } from '../../events/add-pointer-event.mjs';
+import { pipe } from '../../utils/pipe.mjs';
+import { distance2D } from '../../utils/distance.mjs';
+import { frameData } from '../../frameloop/data.mjs';
+import { isPrimaryPointer } from '../../events/utils/is-primary-pointer.mjs';
 
 /**
  * @internal

package/dist/es/gestures/pan/index.mjs

@@ -0,0 +1,38 @@
+import { PanSession } from './PanSession.mjs';
+import { addPointerEvent } from '../../events/add-pointer-event.mjs';
+import { Feature } from '../../motion/features/Feature.mjs';
+import { noop } from '../../utils/noop.mjs';
+
+class PanGesture extends Feature {
+    constructor() {
+        super(...arguments);
+        this.removePointerDownListener = noop;
+    }
+    onPointerDown(pointerDownEvent) {
+        this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), { transformPagePoint: this.node.getTransformPagePoint() });
+    }
+    createPanHandlers() {
+        const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();
+        return {
+            onSessionStart: onPanSessionStart,
+            onStart: onPanStart,
+            onMove: onPan,
+            onEnd: (event, info) => {
+                delete this.session;
+                onPanEnd && onPanEnd(event, info);
+            },
+        };
+    }
+    mount() {
+        this.removePointerDownListener = addPointerEvent(this.node.current, "pointerdown", (event) => this.onPointerDown(event));
+    }
+    update() {
+        this.session && this.session.updateHandlers(this.createPanHandlers());
+    }
+    unmount() {
+        this.removePointerDownListener();
+        this.session && this.session.end();
+    }
+}
+
+export { PanGesture };

package/dist/es/gestures/press.mjs

@@ -0,0 +1,109 @@
+import { extractEventInfo } from '../events/event-info.mjs';
+import { addDomEvent } from '../events/add-dom-event.mjs';
+import { addPointerEvent } from '../events/add-pointer-event.mjs';
+import { Feature } from '../motion/features/Feature.mjs';
+import { AnimationType } from '../render/utils/types.mjs';
+import { pipe } from '../utils/pipe.mjs';
+import { isDragActive } from './drag/utils/lock.mjs';
+import { isNodeOrChild } from './utils/is-node-or-child.mjs';
+import { noop } from '../utils/noop.mjs';
+
+function fireSyntheticPointerEvent(name, handler) {
+    if (!handler)
+        return;
+    const syntheticPointerEvent = new PointerEvent("pointer" + name);
+    handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));
+}
+class PressGesture extends Feature {
+    constructor() {
+        super(...arguments);
+        this.removeStartListeners = noop;
+        this.removeEndListeners = noop;
+        this.removeAccessibleListeners = noop;
+        this.startPointerPress = (startEvent, startInfo) => {
+            this.removeEndListeners();
+            if (this.isPressing)
+                return;
+            const props = this.node.getProps();
+            const endPointerPress = (endEvent, endInfo) => {
+                if (!this.checkPressEnd())
+                    return;
+                const { onTap, onTapCancel } = this.node.getProps();
+                /**
+                 * We only count this as a tap gesture if the event.target is the same
+                 * as, or a child of, this component's element
+                 */
+                !isNodeOrChild(this.node.current, endEvent.target)
+                    ? onTapCancel && onTapCancel(endEvent, endInfo)
+                    : onTap && onTap(endEvent, endInfo);
+            };
+            const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, { passive: !(props.onTap || props["onPointerUp"]) });
+            const removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), { passive: !(props.onTapCancel || props["onPointerCancel"]) });
+            this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener);
+            this.startPress(startEvent, startInfo);
+        };
+        this.startAccessiblePress = () => {
+            const handleKeydown = (keydownEvent) => {
+                if (keydownEvent.key !== "Enter" || this.isPressing)
+                    return;
+                const handleKeyup = (keyupEvent) => {
+                    if (keyupEvent.key !== "Enter" || !this.checkPressEnd())
+                        return;
+                    fireSyntheticPointerEvent("up", this.node.getProps().onTap);
+                };
+                this.removeEndListeners();
+                this.removeEndListeners = addDomEvent(this.node.current, "keyup", handleKeyup);
+                fireSyntheticPointerEvent("down", (event, info) => {
+                    this.startPress(event, info);
+                });
+            };
+            const removeKeydownListener = addDomEvent(this.node.current, "keydown", handleKeydown);
+            const handleBlur = () => {
+                if (!this.isPressing)
+                    return;
+                fireSyntheticPointerEvent("cancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo));
+            };
+            const removeBlurListener = addDomEvent(this.node.current, "blur", handleBlur);
+            this.removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener);
+        };
+    }
+    startPress(event, info) {
+        this.isPressing = true;
+        const { onTapStart, whileTap } = this.node.getProps();
+        /**
+         * Ensure we trigger animations before firing event callback
+         */
+        if (whileTap && this.node.animationState) {
+            this.node.animationState.setActive(AnimationType.Tap, true);
+        }
+        onTapStart && onTapStart(event, info);
+    }
+    checkPressEnd() {
+        this.removeEndListeners();
+        this.isPressing = false;
+        const props = this.node.getProps();
+        if (props.whileTap && this.node.animationState) {
+            this.node.animationState.setActive(AnimationType.Tap, false);
+        }
+        return !isDragActive();
+    }
+    cancelPress(event, info) {
+        if (!this.checkPressEnd())
+            return;
+        const { onTapCancel } = this.node.getProps();
+        onTapCancel && onTapCancel(event, info);
+    }
+    mount() {
+        const props = this.node.getProps();
+        const removePointerListener = addPointerEvent(this.node.current, "pointerdown", this.startPointerPress, { passive: !(props.onTapStart || props["onPointerStart"]) });
+        const removeFocusListener = addDomEvent(this.node.current, "focus", this.startAccessiblePress);
+        this.removeStartListeners = pipe(removePointerListener, removeFocusListener);
+    }
+    unmount() {
+        this.removeStartListeners();
+        this.removeEndListeners();
+        this.removeAccessibleListeners();
+    }
+}
+
+export { PressGesture };

package/dist/es/index.mjs

@@ -77,7 +77,7 @@ export { calcLength } from './projection/geometry/delta-calc.mjs';
 export { filterProps } from './render/dom/utils/filter-props.mjs';
 export { makeUseVisualState } from './motion/utils/use-visual-state.mjs';
 export { isDragActive } from './gestures/drag/utils/lock.mjs';
-export { addPointerEvent } from './events/use-pointer-event.mjs';
+export { addPointerEvent } from './events/add-pointer-event.mjs';
 export { addPointerInfo } from './events/event-info.mjs';
 export { isMotionValue } from './value/utils/is-motion-value.mjs';
 export { isBrowser } from './utils/is-browser.mjs';

package/dist/es/motion/features/Feature.mjs

@@ -0,0 +1,9 @@
+class Feature {
+    constructor(node) {
+        this.isMounted = false;
+        this.node = node;
+    }
+    update() { }
+}
+
+export { Feature };

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

@@ -0,0 +1,32 @@
+import { AnimationType } from '../../../render/utils/types.mjs';
+import { Feature } from '../Feature.mjs';
+
+let id = 0;
+class ExitAnimationFeature extends Feature {
+    constructor() {
+        super(...arguments);
+        this.id = id++;
+    }
+    update() {
+        if (!this.node.presenceContext)
+            return;
+        const { isPresent, onExitComplete, custom } = this.node.presenceContext;
+        const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {};
+        if (!this.node.animationState || isPresent === prevIsPresent) {
+            return;
+        }
+        const exitAnimation = this.node.animationState.setActive(AnimationType.Exit, !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
+        if (onExitComplete && !isPresent) {
+            exitAnimation.then(() => onExitComplete(this.id));
+        }
+    }
+    mount() {
+        const { register } = this.node.presenceContext || {};
+        if (register) {
+            this.unmount = register(this.id);
+        }
+    }
+    unmount() { }
+}
+
+export { ExitAnimationFeature };