SnowLuma/.pnpm-store/v11/files/33/63d779d15dc4eb9a81f14829d67593a4174045e57db15275474731bc35a35c472b11ab212a83e963f30666d4ffa0fda56fcadd22e3eb8b5388ad4beb38fa16

"use client";
import { motionValue } from 'motion-dom';
import { useContext, useState, useEffect } from 'react';
import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
import { useConstant } from '../utils/use-constant.mjs';

/**
 * Creates a `MotionValue` to track the state and velocity of a value.
 *
 * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
 *
 * ```jsx
 * export const MyComponent = () => {
 *   const scale = useMotionValue(1)
 *
 *   return <motion.div style={{ scale }} />
 * }
 * ```
 *
 * @param initial - The initial state.
 *
 * @public
 */
function useMotionValue(initial) {
    const value = useConstant(() => motionValue(initial));
    /**
     * If this motion value is being used in static mode, like on
     * the Framer canvas, force components to rerender when the motion
     * value is updated.
     */
    const { isStatic } = useContext(MotionConfigContext);
    if (isStatic) {
        const [, setLatest] = useState(initial);
        useEffect(() => value.on("change", setLatest), []);
    }
    return value;
}

export { useMotionValue };
//# sourceMappingURL=use-motion-value.mjs.map