react-ui-animate 1.2.2 → 1.4.2

package/dist/index.js

@@ -0,0 +1,1189 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reMotion = require('@raidipesh78/re-motion');
+var React = require('react');
+
+/**
+ * interpolate function maps input range to output range
+ * @param value - number | TransitionValue
+ * @param inputRange - Array<number>
+ * @param outputRange - Array<string | number>
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
+ * @returns - number | TransitionValue
+ */
+function interpolate(value, inputRange, outputRange, extrapolateConfig) {
+    if (typeof value === "object" && reMotion.isSubscriber(value)) {
+        return reMotion.interpolateTransitionValue(value, inputRange, outputRange, extrapolateConfig);
+    }
+    else if (typeof value === "number") {
+        return reMotion.interpolateNumbers(value, inputRange, outputRange, extrapolateConfig);
+    }
+    else {
+        throw new Error("Error! " + typeof value + " cannot be interpolated");
+    }
+}
+/**
+ * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
+ * sorthand function to interpolate input range [0, 1]
+ * @param value - number | TransitionValue
+ * @param minOutput - number | string
+ * @param maxOutput - number | string
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
+ * @returns - number | TransitionValue
+ */
+function bInterpolate(value, minOutput, maxOutput, extrapolateConfig) {
+    return interpolate(value, [0, 1], [minOutput, maxOutput], extrapolateConfig);
+}
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __values(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+}
+
+function __read(o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+}
+
+function __spread() {
+    for (var ar = [], i = 0; i < arguments.length; i++)
+        ar = ar.concat(__read(arguments[i]));
+    return ar;
+}
+
+var getInitialConfig = function (animationType) {
+    switch (animationType) {
+        case "elastic":
+            return { mass: 1, friction: 18, tension: 250 };
+        case "stiff":
+            return { mass: 1, friction: 18, tension: 350 };
+        case "wooble":
+            return { mass: 1, friction: 8, tension: 250 };
+        case "bounce":
+            return { duration: 500, easing: reMotion.Easing.bounce };
+        case "ease":
+        default:
+            return { mass: 1, friction: 26, tension: 170 };
+    }
+};
+
+/**
+ * getValue checks for type of initialValue and throws error
+ * for type other than AnimatedValueType
+ */
+var getValue = function (value) {
+    if (typeof value === "number" || typeof value === "string") {
+        return value;
+    }
+    else {
+        throw new Error("Invalid Value! Animated value only accepts string or number.");
+    }
+};
+/**
+ * useAnimatedValue for animated transitions
+ */
+function useAnimatedValue(initialValue, config) {
+    var _a;
+    var _isInitial = React.useRef(true);
+    var _initialValue = getValue(initialValue);
+    var animationType = (_a = config === null || config === void 0 ? void 0 : config.animationType) !== null && _a !== void 0 ? _a : "ease"; // Defines default animation
+    var onAnimationEnd = config === null || config === void 0 ? void 0 : config.onAnimationEnd;
+    var listener = config === null || config === void 0 ? void 0 : config.listener;
+    var _b = __read(reMotion.useTransition(_initialValue, __assign(__assign(__assign({}, getInitialConfig(animationType)), config), { onRest: function (result) {
+            if (result.finished) {
+                onAnimationEnd && onAnimationEnd(result.value);
+            }
+        }, onChange: function (value) {
+            listener && listener(value);
+        } })), 2), animation = _b[0], setAnimation = _b[1];
+    // doesn't fire on initial render
+    React.useEffect(function () {
+        if (!_isInitial.current) {
+            setAnimation({ toValue: _initialValue });
+        }
+        _isInitial.current = false;
+    }, [_initialValue]);
+    var targetObject = {
+        value: animation,
+        currentValue: animation.get(),
+    };
+    return new Proxy(targetObject, {
+        set: function (_, key, value) {
+            if (key === "value") {
+                if (typeof value === "number" || typeof value === "string") {
+                    setAnimation({ toValue: value });
+                }
+                else if (typeof value === "object") {
+                    setAnimation({ toValue: value.toValue, immediate: value === null || value === void 0 ? void 0 : value.immediate });
+                }
+                return true;
+            }
+            throw new Error("You cannot set any other property to animation node.");
+        },
+        get: function (_, key) {
+            if (key === "value") {
+                return animation;
+            }
+            if (key === "currentValue") {
+                return animation.get();
+            }
+            throw new Error("You cannot access any other property from animation node.");
+        },
+    });
+}
+
+/**
+ * useMountedValue handles mounting and unmounting of a component
+ * @param state - boolean
+ * @param config - useTransitionConfig
+ * @returns mountedValueFunction with a callback with argument ( animationNode, mounted )
+ */
+function useMountedValue(state, config) {
+    var _a, _b, _c, _d, _e, _f;
+    var _g = __read(React.useState(true), 2), initial = _g[0], setInitial = _g[1];
+    var _h = __read(React.useState(state), 2), mounted = _h[0], setMounted = _h[1];
+    var _j = React.useRef(config).current, from = _j.from, enter = _j.enter, exit = _j.exit, _config = _j.config;
+    var _k = __read(reMotion.useTransition(from, _config), 2), animation = _k[0], setAnimation = _k[1];
+    var enterDuration = (_b = (_a = config.config) === null || _a === void 0 ? void 0 : _a.enterDuration) !== null && _b !== void 0 ? _b : (_c = config.config) === null || _c === void 0 ? void 0 : _c.duration;
+    var exitDuration = (_e = (_d = config.config) === null || _d === void 0 ? void 0 : _d.exitDuration) !== null && _e !== void 0 ? _e : (_f = config.config) === null || _f === void 0 ? void 0 : _f.exitDuration;
+    React.useEffect(function () {
+        if (state) {
+            setInitial(true);
+            setMounted(true);
+        }
+        else {
+            setInitial(false);
+            setAnimation({
+                toValue: exit,
+                duration: exitDuration,
+            }, function (_a) {
+                var finished = _a.finished;
+                if (finished) {
+                    setMounted(false);
+                }
+            });
+        }
+    }, [state]);
+    React.useEffect(function () {
+        if (mounted && initial) {
+            setAnimation({
+                toValue: enter,
+                duration: enterDuration,
+            }, function () {
+                return;
+            });
+        }
+    }, [mounted, initial]);
+    return function (callback) {
+        return callback({ value: animation }, mounted);
+    };
+}
+
+/**
+ * Make any component animatable
+ */
+function makeAnimatedComponent(WrappedComponent) {
+    return reMotion.makeAnimatedComponent(WrappedComponent);
+}
+/**
+ * AnimatedBlock : Animated Div
+ */
+var AnimatedBlock = reMotion.makeAnimatedComponent("div");
+/**
+ * AnimatedInline : Animated Span
+ */
+var AnimatedInline = reMotion.makeAnimatedComponent("span");
+/**
+ * AnimatedImage : Animated Image
+ */
+var AnimatedImage = reMotion.makeAnimatedComponent("img");
+/**
+ * ScrollableBlock
+ * Used to animate element when enter into viewport
+ * Render props pattern with children accepts animation node
+ * animated value goes from 0 to 1 when appear on viewport & vice versa.
+ */
+var ScrollableBlock = function (props) {
+    var children = props.children, _a = props.direction, direction = _a === void 0 ? "single" : _a, animationConfig = props.animationConfig, _b = props.threshold, threshold = _b === void 0 ? 0.2 : _b;
+    var scrollableBlockRef = React.useRef(null);
+    var animation = useAnimatedValue(0, animationConfig); // 0: not intersecting | 1: intersecting
+    React.useEffect(function () {
+        var _scrollableBlock = scrollableBlockRef.current;
+        var observer = new IntersectionObserver(function (_a) {
+            var _b = __read(_a, 1), entry = _b[0];
+            var isIntersecting = entry.isIntersecting;
+            if (isIntersecting) {
+                animation.value = 1;
+            }
+            else {
+                if (direction === "both")
+                    animation.value = 0;
+            }
+        }, {
+            root: null,
+            threshold: threshold,
+        });
+        if (_scrollableBlock) {
+            observer.observe(_scrollableBlock);
+        }
+        return function () {
+            if (_scrollableBlock) {
+                observer.unobserve(_scrollableBlock);
+            }
+        };
+    }, []);
+    return React.createElement("div", { ref: scrollableBlockRef }, children && children(animation));
+};
+/**
+ * MountedBlock handles mounting and unmounting of a component
+ * @props - state: boolean, config: InnerUseMountedValueConfig
+ * @children -  (animation: { value: TransitionValue }) => React.ReactNode
+ */
+var MountedBlock = function (_a) {
+    var state = _a.state, children = _a.children, config = _a.config;
+    var open = useMountedValue(state, { from: 0, enter: 1, exit: 0, config: config });
+    return React.createElement(React.Fragment, null, open(function (animation, mounted) { return mounted && children(animation); }));
+};
+
+/**
+ * Attach single document / window event / HTMLElement
+ */
+function attachEvent(domTargets, event, callback, capture) {
+    if (capture === void 0) { capture = false; }
+    domTargets.forEach(function (target) {
+        target.addEventListener(event, callback, capture);
+    });
+    return function () {
+        domTargets.forEach(function (target) {
+            target.removeEventListener(event, callback, capture);
+        });
+    };
+}
+/**
+ * Attach multiple document / window event / HTMLElement
+ */
+function attachEvents(domTargets, events) {
+    var subscribers = new Map();
+    events.forEach(function (_a) {
+        var _b = __read(_a, 3), event = _b[0], callback = _b[1], _c = _b[2], capture = _c === void 0 ? false : _c;
+        subscribers.set(event, attachEvent(domTargets, event, callback, capture));
+    });
+    return function (eventKeys) {
+        var e_1, _a;
+        try {
+            for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = __read(_c.value, 2), eventKey = _d[0], subscriber = _d[1];
+                if (!eventKeys) {
+                    subscriber();
+                    return;
+                }
+                if (eventKeys.indexOf(eventKey) !== -1) {
+                    subscriber();
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    };
+}
+
+/**
+ * bin(booleanValue)
+ * returns 1 if booleanValue == true and 0 if booleanValue == false
+ */
+function bin(bool) {
+    return bool ? 1 : 0;
+}
+/**
+ * mix(progress, a, b)
+ * linear interpolation between a and b
+ */
+function mix(perc, val1, val2) {
+    return val1 * (1 - perc) + val2 * perc;
+}
+/**
+ * clamp(value, min, max)
+ * clamps value for min and max bounds
+ */
+function clamp(value, lowerbound, upperbound) {
+    return Math.min(Math.max(value, lowerbound), upperbound);
+}
+function rubber2(distanceFromEdge, constant) {
+    return Math.pow(distanceFromEdge, constant * 5);
+}
+function rubber(distanceFromEdge, dimension, constant) {
+    if (dimension === 0 || Math.abs(dimension) === Infinity)
+        return rubber2(distanceFromEdge, constant);
+    return ((distanceFromEdge * dimension * constant) /
+        (dimension + constant * distanceFromEdge));
+}
+/**
+ * rubberClamp(value, min, max, constant?)
+ * constant is optional : default 0.15
+ * clamps the value for min and max value and
+ * extends beyond min and max values with constant
+ * factor to create elastic rubber band effect
+ */
+function rubberClamp(value, lowerbound, upperbound, constant) {
+    if (constant === void 0) { constant = 0.15; }
+    if (constant === 0)
+        return clamp(value, lowerbound, upperbound);
+    if (value < lowerbound) {
+        return (-rubber(lowerbound - value, upperbound - lowerbound, constant) +
+            lowerbound);
+    }
+    if (value > upperbound) {
+        return (+rubber(value - upperbound, upperbound - lowerbound, constant) +
+            upperbound);
+    }
+    return value;
+}
+/**
+ * snapTo(value, velocity, snapPoints[])
+ * Calculates the final snapPoint according to given current value,
+ * velocity and snapPoints array
+ */
+function snapTo(value, velocity, snapPoints) {
+    var finalValue = value + velocity * 0.2;
+    var getDiff = function (point) { return Math.abs(point - finalValue); };
+    var deltas = snapPoints.map(getDiff);
+    var minDelta = Math.min.apply(Math, __spread(deltas));
+    return snapPoints.reduce(function (acc, point) {
+        if (getDiff(point) === minDelta) {
+            return point;
+        }
+        else {
+            return acc;
+        }
+    });
+}
+/**
+ * move(array, moveIndex, toIndex)
+ * move array item from moveIndex to toIndex without array modification
+ */
+function move(array, moveIndex, toIndex) {
+    var item = array[moveIndex];
+    var length = array.length;
+    var diff = moveIndex - toIndex;
+    if (diff > 0) {
+        return __spread(array.slice(0, toIndex), [
+            item
+        ], array.slice(toIndex, moveIndex), array.slice(moveIndex + 1, length));
+    }
+    else if (diff < 0) {
+        var targetIndex = toIndex + 1;
+        return __spread(array.slice(0, moveIndex), array.slice(moveIndex + 1, targetIndex), [
+            item
+        ], array.slice(targetIndex, length));
+    }
+    return array;
+}
+
+var withDefault = function (x, y) {
+    return { x: x, y: y };
+};
+
+var Gesture = /** @class */ (function () {
+    function Gesture() {
+        this.lastTimeStamp = Date.now();
+        this.isActive = false;
+        this.targetElements = []; // represents the bounded elements
+    }
+    // it must be overridden by other child classes
+    Gesture.prototype._initEvents = function () { };
+    // cancel events
+    // we only canceled down and move events because mouse up
+    // will not be triggered
+    Gesture.prototype._cancelEvents = function () {
+        if (this._subscribe) {
+            this._subscribe();
+        }
+    };
+    // re-apply new callback
+    Gesture.prototype.applyCallback = function (callback) {
+        this.callback = callback;
+    };
+    // apply gesture
+    Gesture.prototype.applyGesture = function (_a) {
+        var _this = this;
+        var targetElement = _a.targetElement, targetElements = _a.targetElements, callback = _a.callback, config = _a.config;
+        this.targetElement = targetElement;
+        this.targetElements = targetElements.map(function (element) { return element.current; });
+        this.callback = callback;
+        this.config = config;
+        // initialize events
+        this._initEvents();
+        // unbind
+        return function () { return _this._subscribe && _this._subscribe(); };
+    };
+    Gesture._VELOCITY_LIMIT = 20;
+    return Gesture;
+}());
+
+var DragGesture = /** @class */ (function (_super) {
+    __extends(DragGesture, _super);
+    function DragGesture() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.movementStart = withDefault(0, 0);
+        _this.initialMovement = withDefault(0, 0);
+        _this.movement = withDefault(0, 0);
+        _this.previousMovement = withDefault(0, 0);
+        _this.translation = withDefault(0, 0);
+        _this.offset = withDefault(0, 0);
+        _this.velocity = withDefault(0, 0);
+        return _this;
+    }
+    // @override
+    // initialize the events
+    DragGesture.prototype._initEvents = function () {
+        if (this.targetElement || this.targetElements.length > 0) {
+            this._subscribe = attachEvents([window], [
+                ["mousedown", this.pointerDown.bind(this)],
+                ["mousemove", this.pointerMove.bind(this)],
+                ["mouseup", this.pointerUp.bind(this)],
+                ["touchstart", this.pointerDown.bind(this), { passive: false }],
+                ["touchmove", this.pointerMove.bind(this), { passive: false }],
+                ["touchend", this.pointerUp.bind(this)],
+            ]);
+        }
+    };
+    // @override - cancel events
+    // we only canceled down and move events because mouse up
+    // will not be triggered
+    DragGesture.prototype._cancelEvents = function () {
+        if (this._subscribe) {
+            this._subscribe(["mousedown", "mousemove", "touchstart", "touchmove"]);
+        }
+    };
+    DragGesture.prototype._handleCallback = function () {
+        var _this = this;
+        if (this.callback) {
+            this.callback({
+                args: [this.currentIndex],
+                down: this.isActive,
+                movementX: this.movement.x,
+                movementY: this.movement.y,
+                offsetX: this.translation.x,
+                offsetY: this.translation.y,
+                velocityX: this.velocity.x,
+                velocityY: this.velocity.y,
+                distanceX: Math.abs(this.movement.x),
+                distanceY: Math.abs(this.movement.y),
+                directionX: Math.sign(this.movement.x),
+                directionY: Math.sign(this.movement.y),
+                cancel: function () {
+                    _this._cancelEvents();
+                },
+            });
+        }
+    };
+    DragGesture.prototype.pointerDown = function (e) {
+        var _a;
+        if (e.type === "touchstart") {
+            this.movementStart = {
+                x: e.touches[0].clientX,
+                y: e.touches[0].clientY,
+            };
+        }
+        else {
+            this.movementStart = { x: e.clientX, y: e.clientY };
+        }
+        this.movement = { x: 0, y: 0 };
+        this.offset = { x: this.translation.x, y: this.translation.y };
+        this.previousMovement = { x: 0, y: 0 };
+        this.velocity = { x: 0, y: 0 };
+        // find current selected element
+        var currElem = this.targetElements.find(function (elem) { return elem === e.target; });
+        if (e.target === this.targetElement || currElem) {
+            this.isActive = true;
+            e.preventDefault();
+            // set args
+            if (currElem) {
+                this.currentIndex = this.targetElements.indexOf(currElem);
+            }
+            // if initial function is defined then call it to get initial movementX and movementY
+            // if only select to bounded draggable element
+            var initial = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.initial) && this.config.initial();
+            var initialMovementX = initial === null || initial === void 0 ? void 0 : initial.movementX;
+            var initialMovementY = initial === null || initial === void 0 ? void 0 : initial.movementY;
+            this.initialMovement = {
+                x: initialMovementX !== null && initialMovementX !== void 0 ? initialMovementX : 0,
+                y: initialMovementY !== null && initialMovementY !== void 0 ? initialMovementY : 0,
+            };
+            this.movement = {
+                x: this.initialMovement.x,
+                y: this.initialMovement.y,
+            };
+            this.previousMovement = {
+                x: this.initialMovement.x,
+                y: this.initialMovement.y,
+            };
+            this._handleCallback();
+        }
+    };
+    DragGesture.prototype.pointerMove = function (e) {
+        if (this.isActive) {
+            e.preventDefault();
+            var now = Date.now();
+            var deltaTime = Math.min(now - this.lastTimeStamp, 64);
+            this.lastTimeStamp = now;
+            var t = deltaTime / 1000;
+            if (e.type === "touchmove") {
+                this.movement = {
+                    x: this.initialMovement.x +
+                        (e.touches[0].clientX - this.movementStart.x),
+                    y: this.initialMovement.y +
+                        (e.touches[0].clientY - this.movementStart.y),
+                };
+            }
+            else {
+                this.movement = {
+                    x: this.initialMovement.x + (e.clientX - this.movementStart.x),
+                    y: this.initialMovement.y + (e.clientY - this.movementStart.y),
+                };
+            }
+            this.translation = {
+                x: this.offset.x + this.movement.x,
+                y: this.offset.y + this.movement.y,
+            };
+            this.velocity = {
+                x: clamp((this.movement.x - this.previousMovement.x) / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+                y: clamp((this.movement.y - this.previousMovement.y) / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+            };
+            this.previousMovement = {
+                x: this.movement.x,
+                y: this.movement.y,
+            };
+            this._handleCallback();
+        }
+    };
+    DragGesture.prototype.pointerUp = function () {
+        if (this.isActive) {
+            this.isActive = false;
+            this._handleCallback();
+            this._initEvents();
+        }
+    };
+    return DragGesture;
+}(Gesture));
+
+var MouseMoveGesture = /** @class */ (function (_super) {
+    __extends(MouseMoveGesture, _super);
+    function MouseMoveGesture() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.movement = withDefault(0, 0);
+        _this.previousMovement = withDefault(0, 0);
+        _this.velocity = withDefault(0, 0);
+        _this.direction = withDefault(0, 0);
+        return _this;
+    }
+    // @override
+    // initialize the events
+    MouseMoveGesture.prototype._initEvents = function () {
+        if (this.targetElement) {
+            this._subscribe = attachEvents([this.targetElement], [["mousemove", this.onMouseMove.bind(this)]]);
+        }
+        else if (this.targetElements.length > 0) {
+            this._subscribe = attachEvents(this.targetElements, [
+                ["mousemove", this.onMouseMove.bind(this)],
+            ]);
+        }
+        else {
+            this._subscribe = attachEvents([window], [["mousemove", this.onMouseMove.bind(this)]]);
+        }
+    };
+    MouseMoveGesture.prototype._handleCallback = function () {
+        var _a;
+        if (this.callback) {
+            this.callback({
+                args: [this.currentIndex],
+                event: this.event,
+                isMoving: this.isActive,
+                target: (_a = this.event) === null || _a === void 0 ? void 0 : _a.target,
+                mouseX: this.movement.x,
+                mouseY: this.movement.y,
+                velocityX: this.velocity.x,
+                velocityY: this.velocity.y,
+                directionX: this.direction.x,
+                directionY: this.direction.y,
+            });
+        }
+    };
+    MouseMoveGesture.prototype.onMouseMove = function (e) {
+        var _this = this;
+        // find current selected element
+        var currElem = this.targetElements.find(function (elem) { return elem === e.target; });
+        // set args
+        if (currElem) {
+            this.currentIndex = this.targetElements.indexOf(currElem);
+        }
+        this.event = e;
+        var now = Date.now();
+        var deltaTime = Math.min(now - this.lastTimeStamp, 64);
+        this.lastTimeStamp = now;
+        var t = deltaTime / 1000; // seconds
+        var x = e.clientX;
+        var y = e.clientY;
+        this.movement = { x: x, y: y };
+        if (this.isActiveID !== -1) {
+            this.isActive = true;
+            clearTimeout(this.isActiveID);
+        }
+        this.isActiveID = setTimeout(function () {
+            _this.isActive = false;
+            _this.direction = { x: 0, y: 0 };
+            _this.velocity = { x: 0, y: 0 };
+            _this._handleCallback();
+        }, 250); // Debounce 250 milliseconds
+        var diffX = this.movement.x - this.previousMovement.x;
+        var diffY = this.movement.y - this.previousMovement.y;
+        this.direction = {
+            x: Math.sign(diffX),
+            y: Math.sign(diffY),
+        };
+        this.velocity = {
+            x: clamp(diffX / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+            y: clamp(diffY / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+        };
+        this.previousMovement = { x: this.movement.x, y: this.movement.y };
+        this._handleCallback();
+    };
+    return MouseMoveGesture;
+}(Gesture));
+
+var ScrollGesture = /** @class */ (function (_super) {
+    __extends(ScrollGesture, _super);
+    function ScrollGesture() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.movement = withDefault(0, 0);
+        _this.previousMovement = withDefault(0, 0);
+        _this.direction = withDefault(0, 0);
+        _this.velocity = withDefault(0, 0);
+        return _this;
+    }
+    // @override
+    // initialize the events
+    ScrollGesture.prototype._initEvents = function () {
+        if (this.targetElement) {
+            this._subscribe = attachEvents([this.targetElement], [["scroll", this.scrollElementListener.bind(this)]]);
+        }
+        else {
+            this._subscribe = attachEvents([window], [["scroll", this.scrollListener.bind(this)]]);
+        }
+    };
+    ScrollGesture.prototype._handleCallback = function () {
+        if (this.callback) {
+            this.callback({
+                isScrolling: this.isActive,
+                scrollX: this.movement.x,
+                scrollY: this.movement.y,
+                velocityX: this.velocity.x,
+                velocityY: this.velocity.y,
+                directionX: this.direction.x,
+                directionY: this.direction.y,
+            });
+        }
+    };
+    ScrollGesture.prototype.onScroll = function (_a) {
+        var _this = this;
+        var x = _a.x, y = _a.y;
+        var now = Date.now();
+        var deltaTime = Math.min(now - this.lastTimeStamp, 64);
+        this.lastTimeStamp = now;
+        var t = deltaTime / 1000; // seconds
+        this.movement = { x: x, y: y };
+        // Clear if scrolling
+        if (this.isActiveID !== -1) {
+            this.isActive = true;
+            clearTimeout(this.isActiveID);
+        }
+        this.isActiveID = setTimeout(function () {
+            _this.isActive = false;
+            _this.direction = { x: 0, y: 0 };
+            // Reset Velocity
+            _this.velocity = { x: 0, y: 0 };
+            _this._handleCallback(); // Debounce 250milliseconds
+        }, 250);
+        var diffX = this.movement.x - this.previousMovement.x;
+        var diffY = this.movement.y - this.previousMovement.y;
+        this.direction = {
+            x: Math.sign(diffX),
+            y: Math.sign(diffY),
+        };
+        this.velocity = {
+            x: clamp(diffX / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+            y: clamp(diffY / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+        };
+        this.previousMovement = {
+            x: this.movement.x,
+            y: this.movement.y,
+        };
+        this._handleCallback();
+    };
+    ScrollGesture.prototype.scrollListener = function () {
+        var y = window.pageYOffset, x = window.pageXOffset;
+        this.onScroll({ x: x, y: y });
+    };
+    ScrollGesture.prototype.scrollElementListener = function () {
+        var _a, _b;
+        var x = ((_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.scrollLeft) || 0;
+        var y = ((_b = this.targetElement) === null || _b === void 0 ? void 0 : _b.scrollTop) || 0;
+        this.onScroll({ x: x, y: y });
+    };
+    return ScrollGesture;
+}(Gesture));
+
+var LINE_HEIGHT = 40;
+var PAGE_HEIGHT = 800;
+var WheelGesture = /** @class */ (function (_super) {
+    __extends(WheelGesture, _super);
+    function WheelGesture() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.movement = withDefault(0, 0);
+        _this.previousMovement = withDefault(0, 0);
+        _this.direction = withDefault(0, 0);
+        _this.velocity = withDefault(0, 0);
+        _this.delta = withDefault(0, 0);
+        // Holds offsets
+        _this.offset = withDefault(0, 0);
+        _this.translation = withDefault(0, 0);
+        return _this;
+    }
+    // @override
+    // initialize the events
+    WheelGesture.prototype._initEvents = function () {
+        if (this.targetElement) {
+            this._subscribe = attachEvents([this.targetElement], [["wheel", this.onWheel.bind(this)]]);
+        }
+    };
+    WheelGesture.prototype._handleCallback = function () {
+        if (this.callback) {
+            this.callback({
+                target: this.targetElement,
+                isWheeling: this.isActive,
+                deltaX: this.delta.x,
+                deltaY: this.delta.y,
+                directionX: this.direction.x,
+                directionY: this.direction.y,
+                movementX: this.movement.x,
+                movementY: this.movement.y,
+                offsetX: this.offset.x,
+                offsetY: this.offset.y,
+                velocityX: this.velocity.x,
+                velocityY: this.velocity.y,
+            });
+        }
+    };
+    WheelGesture.prototype.onWheel = function (event) {
+        var _this = this;
+        var deltaX = event.deltaX, deltaY = event.deltaY, deltaMode = event.deltaMode;
+        var now = Date.now();
+        var deltaTime = Math.min(now - this.lastTimeStamp, 64);
+        this.lastTimeStamp = now;
+        var t = deltaTime / 1000; // seconds
+        this.isActive = true;
+        if (this.isActiveID !== -1) {
+            this.isActive = true;
+            clearTimeout(this.isActiveID);
+        }
+        this.isActiveID = setTimeout(function () {
+            _this.isActive = false;
+            _this.translation = { x: _this.offset.x, y: _this.offset.y };
+            _this._handleCallback();
+            _this.velocity = { x: 0, y: 0 }; // Reset Velocity
+            _this.movement = { x: 0, y: 0 };
+        }, 200);
+        // normalize wheel values, especially for Firefox
+        if (deltaMode === 1) {
+            deltaX *= LINE_HEIGHT;
+            deltaY *= LINE_HEIGHT;
+        }
+        else if (deltaMode === 2) {
+            deltaX *= PAGE_HEIGHT;
+            deltaY *= PAGE_HEIGHT;
+        }
+        this.delta = { x: deltaX, y: deltaY };
+        this.movement = {
+            x: this.movement.x + deltaX,
+            y: this.movement.y + deltaY,
+        };
+        this.offset = {
+            x: this.translation.x + this.movement.x,
+            y: this.translation.y + this.movement.y,
+        };
+        var diffX = this.movement.x - this.previousMovement.x;
+        var diffY = this.movement.y - this.previousMovement.y;
+        this.direction = {
+            x: Math.sign(diffX),
+            y: Math.sign(diffY),
+        };
+        this.velocity = {
+            x: clamp(diffX / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+            y: clamp(diffY / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+        };
+        this.previousMovement = {
+            x: this.movement.x,
+            y: this.movement.y,
+        };
+        this._handleCallback();
+    };
+    return WheelGesture;
+}(Gesture));
+
+var useRecognizer = function (handlers) {
+    var ref = React.useRef();
+    var elementRefs = React.useRef([]);
+    var subscribers = React.useRef(new Map()).current;
+    // re-initiate callback on change
+    React.useEffect(function () {
+        var e_1, _a;
+        try {
+            for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = __read(_c.value, 2), _e = _d[1], keyIndex = _e.keyIndex, gesture = _e.gesture;
+                var _f = __read(handlers[keyIndex], 3), callback = _f[2];
+                gesture.applyCallback(callback);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }, [handlers]);
+    React.useEffect(function () {
+        handlers.forEach(function (_a, keyIndex) {
+            var _b = __read(_a, 4), key = _b[0], gesture = _b[1], callback = _b[2], config = _b[3];
+            subscribers.set(key, {
+                keyIndex: keyIndex,
+                gesture: gesture,
+                unsubscribe: gesture.applyGesture({
+                    targetElement: ref.current,
+                    targetElements: elementRefs.current,
+                    callback: callback,
+                    config: config,
+                }),
+            });
+        });
+        return function () {
+            var e_2, _a;
+            try {
+                for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var _d = __read(_c.value, 2), unsubscribe = _d[1].unsubscribe;
+                    unsubscribe && unsubscribe();
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        };
+    }, []);
+    return function (index) {
+        if (index === null || index === undefined) {
+            return { ref: ref };
+        }
+        else {
+            elementRefs.current[index] =
+                elementRefs.current[index] || React.createRef();
+            return { ref: elementRefs.current[index] };
+        }
+    };
+};
+
+function useDrag(callback, config) {
+    var gesture = React.useRef(new DragGesture()).current;
+    return useRecognizer([["drag", gesture, callback, config]]);
+}
+
+function useMouseMove(callback) {
+    var gesture = React.useRef(new MouseMoveGesture()).current;
+    return useRecognizer([["move", gesture, callback]]);
+}
+
+function useScroll(callback) {
+    var gesture = React.useRef(new ScrollGesture()).current;
+    return useRecognizer([["scroll", gesture, callback]]);
+}
+
+function useWheel(callback) {
+    var gesture = React.useRef(new WheelGesture()).current;
+    return useRecognizer([["wheel", gesture, callback]]);
+}
+
+function useGesture(_a) {
+    var onDrag = _a.onDrag, onWheel = _a.onWheel, onScroll = _a.onScroll, onMouseMove = _a.onMouseMove;
+    var dragGesture = React.useRef(new DragGesture()).current;
+    var wheelGesture = React.useRef(new WheelGesture()).current;
+    var scrollGesture = React.useRef(new ScrollGesture()).current;
+    var mouseMoveGesture = React.useRef(new MouseMoveGesture()).current;
+    return useRecognizer([
+        ["drag", dragGesture, onDrag],
+        ["wheel", wheelGesture, onWheel],
+        ["scroll", scrollGesture, onScroll],
+        ["move", mouseMoveGesture, onMouseMove],
+    ]);
+}
+
+function useOutsideClick(elementRef, callback, deps) {
+    var callbackRef = React.useRef();
+    if (!callbackRef.current) {
+        callbackRef.current = callback;
+    }
+    // Reinitiate callback when dependency change
+    React.useEffect(function () {
+        callbackRef.current = callback;
+        return function () {
+            callbackRef.current = function () { return false; };
+        };
+    }, deps);
+    React.useEffect(function () {
+        var handleOutsideClick = function (e) {
+            var _a;
+            if (!((_a = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                callbackRef.current && callbackRef.current(e);
+            }
+        };
+        var subscribe = attachEvents([document], [["click", handleOutsideClick]]);
+        return function () { return subscribe && subscribe(); };
+    }, []);
+}
+
+function useMeasure(callback, deps) {
+    var ref = React.useRef(null);
+    var elementRefs = React.useRef([]);
+    var callbackRef = React.useRef(callback);
+    // Reinitiate callback when dependency change
+    React.useEffect(function () {
+        callbackRef.current = callback;
+        return function () {
+            callbackRef.current = function () { return false; };
+        };
+    }, deps);
+    React.useEffect(function () {
+        var _refElement = ref.current || document.documentElement;
+        var _refElementsMultiple = elementRefs.current;
+        var resizeObserver = new ResizeObserver(function (_a) {
+            var _b = __read(_a, 1), entry = _b[0];
+            var _c = entry.target.getBoundingClientRect(), left = _c.left, top = _c.top, width = _c.width, height = _c.height;
+            var pageXOffset = window.pageXOffset, pageYOffset = window.pageYOffset;
+            if (callbackRef) {
+                if (_refElement === document.documentElement) {
+                    return; // no-op for document
+                }
+                else {
+                    callbackRef.current({
+                        left: left + pageXOffset,
+                        top: top + pageYOffset,
+                        width: width,
+                        height: height,
+                        vLeft: left,
+                        vTop: top,
+                    });
+                }
+            }
+        });
+        var resizeObserverMultiple = new ResizeObserver(function (entries) {
+            var left = [];
+            var top = [];
+            var width = [];
+            var height = [];
+            var vLeft = [];
+            var vTop = [];
+            entries.forEach(function (entry) {
+                var _a = entry.target.getBoundingClientRect(), _left = _a.left, _top = _a.top, _width = _a.width, _height = _a.height;
+                var pageXOffset = window.pageXOffset, pageYOffset = window.pageYOffset;
+                var _pageLeft = _left + pageXOffset;
+                var _pageTop = _top + pageYOffset;
+                left.push(_pageLeft);
+                top.push(_pageTop);
+                width.push(_width);
+                height.push(_height);
+                vLeft.push(_left);
+                vTop.push(_top);
+            });
+            if (callbackRef) {
+                callbackRef.current({
+                    left: left,
+                    top: top,
+                    width: width,
+                    height: height,
+                    vLeft: vLeft,
+                    vTop: vTop,
+                });
+            }
+        });
+        if (_refElement) {
+            if (_refElement === document.documentElement &&
+                _refElementsMultiple.length > 0) {
+                _refElementsMultiple.forEach(function (element) {
+                    resizeObserverMultiple.observe(element.current);
+                });
+            }
+            else {
+                resizeObserver.observe(_refElement);
+            }
+        }
+        return function () {
+            if (_refElement) {
+                if (_refElement === document.documentElement &&
+                    _refElementsMultiple.length > 0) {
+                    _refElementsMultiple.forEach(function (element) {
+                        resizeObserverMultiple.unobserve(element.current);
+                    });
+                }
+                else {
+                    resizeObserver.unobserve(_refElement);
+                }
+            }
+        };
+    }, []);
+    return function (index) {
+        if (index === null || index === undefined) {
+            return { ref: ref };
+        }
+        else {
+            elementRefs.current[index] =
+                elementRefs.current[index] || React.createRef();
+            return { ref: elementRefs.current[index] };
+        }
+    }; // ...bind() or ...bind(index) for multiple
+}
+
+function useWindowDimension(callback, deps) {
+    var windowDimensionsRef = React.useRef({
+        width: 0,
+        height: 0,
+        innerWidth: 0,
+        innerHeight: 0,
+    });
+    var callbackRef = React.useRef(callback);
+    var handleCallback = function () {
+        if (callbackRef) {
+            callbackRef.current(__assign({}, windowDimensionsRef.current));
+        }
+    };
+    // Reinitiate callback when dependency change
+    React.useEffect(function () {
+        callbackRef.current = callback;
+        return function () {
+            callbackRef.current = function () { return false; };
+        };
+    }, deps);
+    React.useEffect(function () {
+        var resizeObserver = new ResizeObserver(function (_a) {
+            var _b = __read(_a, 1), entry = _b[0];
+            var _c = entry.target, clientWidth = _c.clientWidth, clientHeight = _c.clientHeight;
+            var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
+            windowDimensionsRef.current = {
+                width: clientWidth,
+                height: clientHeight,
+                innerWidth: innerWidth,
+                innerHeight: innerHeight,
+            };
+            handleCallback();
+        });
+        resizeObserver.observe(document.documentElement);
+        return function () { return resizeObserver.unobserve(document.documentElement); };
+    }, []);
+}
+
+Object.defineProperty(exports, 'Easing', {
+  enumerable: true,
+  get: function () {
+    return reMotion.Easing;
+  }
+});
+exports.AnimatedBlock = AnimatedBlock;
+exports.AnimatedImage = AnimatedImage;
+exports.AnimatedInline = AnimatedInline;
+exports.MountedBlock = MountedBlock;
+exports.ScrollableBlock = ScrollableBlock;
+exports.bInterpolate = bInterpolate;
+exports.bin = bin;
+exports.clamp = clamp;
+exports.interpolate = interpolate;
+exports.makeAnimatedComponent = makeAnimatedComponent;
+exports.mix = mix;
+exports.move = move;
+exports.rubberClamp = rubberClamp;
+exports.snapTo = snapTo;
+exports.useAnimatedValue = useAnimatedValue;
+exports.useDrag = useDrag;
+exports.useGesture = useGesture;
+exports.useMeasure = useMeasure;
+exports.useMountedValue = useMountedValue;
+exports.useMouseMove = useMouseMove;
+exports.useOutsideClick = useOutsideClick;
+exports.useScroll = useScroll;
+exports.useWheel = useWheel;
+exports.useWindowDimension = useWindowDimension;
+//# sourceMappingURL=index.js.map