motion 12.18.1 → 12.19.0

package/dist/es/motion-dom/dist/es/value/index.mjs

@@ -1,329 +0,0 @@
-import { time } from '../frameloop/sync-time.mjs';
-import { frame } from '../frameloop/frame.mjs';
-import { warnOnce } from '../../../../motion-utils/dist/es/warn-once.mjs';
-import { SubscriptionManager } from '../../../../motion-utils/dist/es/subscription-manager.mjs';
-import { velocityPerSecond } from '../../../../motion-utils/dist/es/velocity-per-second.mjs';
-
-/**
- * Maximum time between the value of two frames, beyond which we
- * assume the velocity has since been 0.
- */
-const MAX_VELOCITY_DELTA = 30;
-const isFloat = (value) => {
-    return !isNaN(parseFloat(value));
-};
-const collectMotionValues = {
-    current: undefined,
-};
-/**
- * `MotionValue` is used to track the state and velocity of motion values.
- *
- * @public
- */
-class MotionValue {
-    /**
-     * @param init - The initiating value
-     * @param config - Optional configuration options
-     *
-     * -  `transformer`: A function to transform incoming values with.
-     */
-    constructor(init, options = {}) {
-        /**
-         * Tracks whether this value can output a velocity. Currently this is only true
-         * if the value is numerical, but we might be able to widen the scope here and support
-         * other value types.
-         *
-         * @internal
-         */
-        this.canTrackVelocity = null;
-        /**
-         * An object containing a SubscriptionManager for each active event.
-         */
-        this.events = {};
-        this.updateAndNotify = (v, render = true) => {
-            const currentTime = time.now();
-            /**
-             * If we're updating the value during another frame or eventloop
-             * than the previous frame, then the we set the previous frame value
-             * to current.
-             */
-            if (this.updatedAt !== currentTime) {
-                this.setPrevFrameValue();
-            }
-            this.prev = this.current;
-            this.setCurrent(v);
-            // Update update subscribers
-            if (this.current !== this.prev) {
-                this.events.change?.notify(this.current);
-                if (this.dependents) {
-                    for (const dependent of this.dependents) {
-                        dependent.dirty();
-                    }
-                }
-            }
-            // Update render subscribers
-            if (render) {
-                this.events.renderRequest?.notify(this.current);
-            }
-        };
-        this.hasAnimated = false;
-        this.setCurrent(init);
-        this.owner = options.owner;
-    }
-    setCurrent(current) {
-        this.current = current;
-        this.updatedAt = time.now();
-        if (this.canTrackVelocity === null && current !== undefined) {
-            this.canTrackVelocity = isFloat(this.current);
-        }
-    }
-    setPrevFrameValue(prevFrameValue = this.current) {
-        this.prevFrameValue = prevFrameValue;
-        this.prevUpdatedAt = this.updatedAt;
-    }
-    /**
-     * Adds a function that will be notified when the `MotionValue` is updated.
-     *
-     * It returns a function that, when called, will cancel the subscription.
-     *
-     * When calling `onChange` inside a React component, it should be wrapped with the
-     * `useEffect` hook. As it returns an unsubscribe function, this should be returned
-     * from the `useEffect` function to ensure you don't add duplicate subscribers..
-     *
-     * ```jsx
-     * export const MyComponent = () => {
-     *   const x = useMotionValue(0)
-     *   const y = useMotionValue(0)
-     *   const opacity = useMotionValue(1)
-     *
-     *   useEffect(() => {
-     *     function updateOpacity() {
-     *       const maxXY = Math.max(x.get(), y.get())
-     *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
-     *       opacity.set(newOpacity)
-     *     }
-     *
-     *     const unsubscribeX = x.on("change", updateOpacity)
-     *     const unsubscribeY = y.on("change", updateOpacity)
-     *
-     *     return () => {
-     *       unsubscribeX()
-     *       unsubscribeY()
-     *     }
-     *   }, [])
-     *
-     *   return <motion.div style={{ x }} />
-     * }
-     * ```
-     *
-     * @param subscriber - A function that receives the latest value.
-     * @returns A function that, when called, will cancel this subscription.
-     *
-     * @deprecated
-     */
-    onChange(subscription) {
-        if (process.env.NODE_ENV !== "production") {
-            warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
-        }
-        return this.on("change", subscription);
-    }
-    on(eventName, callback) {
-        if (!this.events[eventName]) {
-            this.events[eventName] = new SubscriptionManager();
-        }
-        const unsubscribe = this.events[eventName].add(callback);
-        if (eventName === "change") {
-            return () => {
-                unsubscribe();
-                /**
-                 * If we have no more change listeners by the start
-                 * of the next frame, stop active animations.
-                 */
-                frame.read(() => {
-                    if (!this.events.change.getSize()) {
-                        this.stop();
-                    }
-                });
-            };
-        }
-        return unsubscribe;
-    }
-    clearListeners() {
-        for (const eventManagers in this.events) {
-            this.events[eventManagers].clear();
-        }
-    }
-    /**
-     * Attaches a passive effect to the `MotionValue`.
-     */
-    attach(passiveEffect, stopPassiveEffect) {
-        this.passiveEffect = passiveEffect;
-        this.stopPassiveEffect = stopPassiveEffect;
-    }
-    /**
-     * Sets the state of the `MotionValue`.
-     *
-     * @remarks
-     *
-     * ```jsx
-     * const x = useMotionValue(0)
-     * x.set(10)
-     * ```
-     *
-     * @param latest - Latest value to set.
-     * @param render - Whether to notify render subscribers. Defaults to `true`
-     *
-     * @public
-     */
-    set(v, render = true) {
-        if (!render || !this.passiveEffect) {
-            this.updateAndNotify(v, render);
-        }
-        else {
-            this.passiveEffect(v, this.updateAndNotify);
-        }
-    }
-    setWithVelocity(prev, current, delta) {
-        this.set(current);
-        this.prev = undefined;
-        this.prevFrameValue = prev;
-        this.prevUpdatedAt = this.updatedAt - delta;
-    }
-    /**
-     * Set the state of the `MotionValue`, stopping any active animations,
-     * effects, and resets velocity to `0`.
-     */
-    jump(v, endAnimation = true) {
-        this.updateAndNotify(v);
-        this.prev = v;
-        this.prevUpdatedAt = this.prevFrameValue = undefined;
-        endAnimation && this.stop();
-        if (this.stopPassiveEffect)
-            this.stopPassiveEffect();
-    }
-    dirty() {
-        this.events.change?.notify(this.current);
-    }
-    addDependent(dependent) {
-        if (!this.dependents) {
-            this.dependents = new Set();
-        }
-        this.dependents.add(dependent);
-    }
-    removeDependent(dependent) {
-        if (this.dependents) {
-            this.dependents.delete(dependent);
-        }
-    }
-    /**
-     * Returns the latest state of `MotionValue`
-     *
-     * @returns - The latest state of `MotionValue`
-     *
-     * @public
-     */
-    get() {
-        if (collectMotionValues.current) {
-            collectMotionValues.current.push(this);
-        }
-        return this.current;
-    }
-    /**
-     * @public
-     */
-    getPrevious() {
-        return this.prev;
-    }
-    /**
-     * Returns the latest velocity of `MotionValue`
-     *
-     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-     *
-     * @public
-     */
-    getVelocity() {
-        const currentTime = time.now();
-        if (!this.canTrackVelocity ||
-            this.prevFrameValue === undefined ||
-            currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {
-            return 0;
-        }
-        const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
-        // Casts because of parseFloat's poor typing
-        return velocityPerSecond(parseFloat(this.current) -
-            parseFloat(this.prevFrameValue), delta);
-    }
-    /**
-     * Registers a new animation to control this `MotionValue`. Only one
-     * animation can drive a `MotionValue` at one time.
-     *
-     * ```jsx
-     * value.start()
-     * ```
-     *
-     * @param animation - A function that starts the provided animation
-     */
-    start(startAnimation) {
-        this.stop();
-        return new Promise((resolve) => {
-            this.hasAnimated = true;
-            this.animation = startAnimation(resolve);
-            if (this.events.animationStart) {
-                this.events.animationStart.notify();
-            }
-        }).then(() => {
-            if (this.events.animationComplete) {
-                this.events.animationComplete.notify();
-            }
-            this.clearAnimation();
-        });
-    }
-    /**
-     * Stop the currently active animation.
-     *
-     * @public
-     */
-    stop() {
-        if (this.animation) {
-            this.animation.stop();
-            if (this.events.animationCancel) {
-                this.events.animationCancel.notify();
-            }
-        }
-        this.clearAnimation();
-    }
-    /**
-     * Returns `true` if this value is currently animating.
-     *
-     * @public
-     */
-    isAnimating() {
-        return !!this.animation;
-    }
-    clearAnimation() {
-        delete this.animation;
-    }
-    /**
-     * Destroy and clean up subscribers to this `MotionValue`.
-     *
-     * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
-     * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
-     * created a `MotionValue` via the `motionValue` function.
-     *
-     * @public
-     */
-    destroy() {
-        this.dependents?.clear();
-        this.events.destroy?.notify();
-        this.clearListeners();
-        this.stop();
-        if (this.stopPassiveEffect) {
-            this.stopPassiveEffect();
-        }
-    }
-}
-function motionValue(init, options) {
-    return new MotionValue(init, options);
-}
-
-export { MotionValue, collectMotionValues, motionValue };

package/dist/es/motion-dom/dist/es/value/map-value.mjs

@@ -1,46 +0,0 @@
-import { transform } from '../utils/transform.mjs';
-import { transformValue } from './transform-value.mjs';
-
-/**
- * Create a `MotionValue` that maps the output of another `MotionValue` by
- * mapping it from one range of values into another.
- *
- * @remarks
- *
- * Given an input range of `[-200, -100, 100, 200]` and an output range of
- * `[0, 1, 1, 0]`, the returned `MotionValue` will:
- *
- * - When provided a value between `-200` and `-100`, will return a value between `0` and  `1`.
- * - When provided a value between `-100` and `100`, will return `1`.
- * - When provided a value between `100` and `200`, will return a value between `1` and  `0`
- *
- * The input range must be a linear series of numbers. The output range
- * can be any value type supported by Motion: numbers, colors, shadows, etc.
- *
- * Every value in the output range must be of the same type and in the same format.
- *
- * ```jsx
- * const x = motionValue(0)
- * const xRange = [-200, -100, 100, 200]
- * const opacityRange = [0, 1, 1, 0]
- * const opacity = mapValue(x, xRange, opacityRange)
- * ```
- *
- * @param inputValue - `MotionValue`
- * @param inputRange - A linear series of numbers (either all increasing or decreasing)
- * @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.
- * @param options -
- *
- *  - clamp: boolean. Clamp values to within the given range. Defaults to `true`
- *  - ease: EasingFunction[]. Easing functions to use on the interpolations between each value in the input and output ranges. If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition between each.
- *
- * @returns `MotionValue`
- *
- * @public
- */
-function mapValue(inputValue, inputRange, outputRange, options) {
-    const map = transform(inputRange, outputRange, options);
-    return transformValue(() => map(inputValue.get()));
-}
-
-export { mapValue };

package/dist/es/motion-dom/dist/es/value/spring-value.mjs

@@ -1,72 +0,0 @@
-import { motionValue } from './index.mjs';
-import { JSAnimation } from '../animation/JSAnimation.mjs';
-import { isMotionValue } from './utils/is-motion-value.mjs';
-import { frame } from '../frameloop/frame.mjs';
-
-/**
- * Create a `MotionValue` that animates to its latest value using a spring.
- * Can either be a value or track another `MotionValue`.
- *
- * ```jsx
- * const x = motionValue(0)
- * const y = transformValue(() => x.get() * 2) // double x
- * ```
- *
- * @param transformer - A transform function. This function must be pure with no side-effects or conditional statements.
- * @returns `MotionValue`
- *
- * @public
- */
-function springValue(source, options) {
-    const initialValue = isMotionValue(source) ? source.get() : source;
-    const value = motionValue(initialValue);
-    attachSpring(value, source, options);
-    return value;
-}
-function attachSpring(value, source, options) {
-    const initialValue = value.get();
-    let activeAnimation = null;
-    let latestValue = initialValue;
-    let latestSetter;
-    const unit = typeof initialValue === "string"
-        ? initialValue.replace(/[\d.-]/g, "")
-        : undefined;
-    const stopAnimation = () => {
-        if (activeAnimation) {
-            activeAnimation.stop();
-            activeAnimation = null;
-        }
-    };
-    const startAnimation = () => {
-        stopAnimation();
-        activeAnimation = new JSAnimation({
-            keyframes: [asNumber(value.get()), asNumber(latestValue)],
-            velocity: value.getVelocity(),
-            type: "spring",
-            restDelta: 0.001,
-            restSpeed: 0.01,
-            ...options,
-            onUpdate: latestSetter,
-        });
-    };
-    value.attach((v, set) => {
-        latestValue = v;
-        latestSetter = (latest) => set(parseValue(latest, unit));
-        frame.postRender(startAnimation);
-        return value.get();
-    }, stopAnimation);
-    let unsubscribe = undefined;
-    if (isMotionValue(source)) {
-        unsubscribe = source.on("change", (v) => value.set(parseValue(v, unit)));
-        value.on("destroy", unsubscribe);
-    }
-    return unsubscribe;
-}
-function parseValue(v, unit) {
-    return unit ? v + unit : v;
-}
-function asNumber(v) {
-    return typeof v === "number" ? v : parseFloat(v);
-}
-
-export { attachSpring, springValue };

package/dist/es/motion-dom/dist/es/value/subscribe-value.mjs

@@ -1,13 +0,0 @@
-import { cancelFrame, frame } from '../frameloop/frame.mjs';
-
-function subscribeValue(inputValues, outputValue, getLatest) {
-    const update = () => outputValue.set(getLatest());
-    const scheduleUpdate = () => frame.preRender(update, false, true);
-    const subscriptions = inputValues.map((v) => v.on("change", scheduleUpdate));
-    outputValue.on("destroy", () => {
-        subscriptions.forEach((unsubscribe) => unsubscribe());
-        cancelFrame(update);
-    });
-}
-
-export { subscribeValue };

package/dist/es/motion-dom/dist/es/value/transform-value.mjs

@@ -1,35 +0,0 @@
-import { collectMotionValues, motionValue } from './index.mjs';
-import { subscribeValue } from './subscribe-value.mjs';
-
-/**
- * Create a `MotionValue` that transforms the output of other `MotionValue`s by
- * passing their latest values through a transform function.
- *
- * Whenever a `MotionValue` referred to in the provided function is updated,
- * it will be re-evaluated.
- *
- * ```jsx
- * const x = motionValue(0)
- * const y = transformValue(() => x.get() * 2) // double x
- * ```
- *
- * @param transformer - A transform function. This function must be pure with no side-effects or conditional statements.
- * @returns `MotionValue`
- *
- * @public
- */
-function transformValue(transform) {
-    const collectedValues = [];
-    /**
-     * Open session of collectMotionValues. Any MotionValue that calls get()
-     * inside transform will be saved into this array.
-     */
-    collectMotionValues.current = collectedValues;
-    const initialValue = transform();
-    collectMotionValues.current = undefined;
-    const value = motionValue(initialValue);
-    subscribeValue(collectedValues, value, transform);
-    return value;
-}
-
-export { transformValue };

package/dist/es/motion-dom/dist/es/value/types/auto.mjs

@@ -1,9 +0,0 @@
-/**
- * ValueType for "auto"
- */
-const auto = {
-    test: (v) => v === "auto",
-    parse: (v) => v,
-};
-
-export { auto };

package/dist/es/motion-dom/dist/es/value/types/color/hex.mjs

@@ -1,40 +0,0 @@
-import { rgba } from './rgba.mjs';
-import { isColorString } from './utils.mjs';
-
-function parseHex(v) {
-    let r = "";
-    let g = "";
-    let b = "";
-    let a = "";
-    // If we have 6 characters, ie #FF0000
-    if (v.length > 5) {
-        r = v.substring(1, 3);
-        g = v.substring(3, 5);
-        b = v.substring(5, 7);
-        a = v.substring(7, 9);
-        // Or we have 3 characters, ie #F00
-    }
-    else {
-        r = v.substring(1, 2);
-        g = v.substring(2, 3);
-        b = v.substring(3, 4);
-        a = v.substring(4, 5);
-        r += r;
-        g += g;
-        b += b;
-        a += a;
-    }
-    return {
-        red: parseInt(r, 16),
-        green: parseInt(g, 16),
-        blue: parseInt(b, 16),
-        alpha: a ? parseInt(a, 16) / 255 : 1,
-    };
-}
-const hex = {
-    test: /*@__PURE__*/ isColorString("#"),
-    parse: parseHex,
-    transform: rgba.transform,
-};
-
-export { hex };

package/dist/es/motion-dom/dist/es/value/types/color/hsla-to-rgba.mjs

@@ -1,42 +0,0 @@
-// Adapted from https://gist.github.com/mjackson/5311256
-function hueToRgb(p, q, t) {
-    if (t < 0)
-        t += 1;
-    if (t > 1)
-        t -= 1;
-    if (t < 1 / 6)
-        return p + (q - p) * 6 * t;
-    if (t < 1 / 2)
-        return q;
-    if (t < 2 / 3)
-        return p + (q - p) * (2 / 3 - t) * 6;
-    return p;
-}
-function hslaToRgba({ hue, saturation, lightness, alpha }) {
-    hue /= 360;
-    saturation /= 100;
-    lightness /= 100;
-    let red = 0;
-    let green = 0;
-    let blue = 0;
-    if (!saturation) {
-        red = green = blue = lightness;
-    }
-    else {
-        const q = lightness < 0.5
-            ? lightness * (1 + saturation)
-            : lightness + saturation - lightness * saturation;
-        const p = 2 * lightness - q;
-        red = hueToRgb(p, q, hue + 1 / 3);
-        green = hueToRgb(p, q, hue);
-        blue = hueToRgb(p, q, hue - 1 / 3);
-    }
-    return {
-        red: Math.round(red * 255),
-        green: Math.round(green * 255),
-        blue: Math.round(blue * 255),
-        alpha,
-    };
-}
-
-export { hslaToRgba };

package/dist/es/motion-dom/dist/es/value/types/color/hsla.mjs

@@ -1,22 +0,0 @@
-import { alpha } from '../numbers/index.mjs';
-import { percent } from '../numbers/units.mjs';
-import { sanitize } from '../utils/sanitize.mjs';
-import { isColorString, splitColor } from './utils.mjs';
-
-const hsla = {
-    test: /*@__PURE__*/ isColorString("hsl", "hue"),
-    parse: /*@__PURE__*/ splitColor("hue", "saturation", "lightness"),
-    transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
-        return ("hsla(" +
-            Math.round(hue) +
-            ", " +
-            percent.transform(sanitize(saturation)) +
-            ", " +
-            percent.transform(sanitize(lightness)) +
-            ", " +
-            sanitize(alpha.transform(alpha$1)) +
-            ")");
-    },
-};
-
-export { hsla };

package/dist/es/motion-dom/dist/es/value/types/color/index.mjs

@@ -1,32 +0,0 @@
-import { hex } from './hex.mjs';
-import { hsla } from './hsla.mjs';
-import { rgba } from './rgba.mjs';
-
-const color = {
-    test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
-    parse: (v) => {
-        if (rgba.test(v)) {
-            return rgba.parse(v);
-        }
-        else if (hsla.test(v)) {
-            return hsla.parse(v);
-        }
-        else {
-            return hex.parse(v);
-        }
-    },
-    transform: (v) => {
-        return typeof v === "string"
-            ? v
-            : v.hasOwnProperty("red")
-                ? rgba.transform(v)
-                : hsla.transform(v);
-    },
-    getAnimatableNone: (v) => {
-        const parsed = color.parse(v);
-        parsed.alpha = 0;
-        return color.transform(parsed);
-    },
-};
-
-export { color };

package/dist/es/motion-dom/dist/es/value/types/color/rgba.mjs

@@ -1,25 +0,0 @@
-import { number, alpha } from '../numbers/index.mjs';
-import { sanitize } from '../utils/sanitize.mjs';
-import { isColorString, splitColor } from './utils.mjs';
-import { clamp } from '../../../../../../motion-utils/dist/es/clamp.mjs';
-
-const clampRgbUnit = (v) => clamp(0, 255, v);
-const rgbUnit = {
-    ...number,
-    transform: (v) => Math.round(clampRgbUnit(v)),
-};
-const rgba = {
-    test: /*@__PURE__*/ isColorString("rgb", "red"),
-    parse: /*@__PURE__*/ splitColor("red", "green", "blue"),
-    transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" +
-        rgbUnit.transform(red) +
-        ", " +
-        rgbUnit.transform(green) +
-        ", " +
-        rgbUnit.transform(blue) +
-        ", " +
-        sanitize(alpha.transform(alpha$1)) +
-        ")",
-};
-
-export { rgbUnit, rgba };