motion-v 0.1.0 → 0.2.1

package/dist/src/components/Motion.d.ts

@@ -1,17 +1,12 @@
 import { Options } from '../state/types';
-import { CSSProperties, IntrinsicElementAttributes } from 'vue';
+import { IntrinsicElementAttributes } from 'vue';
 export interface MotionProps<T extends ElementType = 'div'> extends Options {
     as?: T;
     asChild?: boolean;
-    style?: CSSProperties;
-    hover?: Options['hover'];
-    press?: Options['press'];
-    inView?: Options['inView'];
-    inViewOptions?: Options['inViewOptions'];
 }
 type ElementType = keyof IntrinsicElementAttributes;
 declare const _default: <T extends ElementType = "div">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, never>, never> & (MotionProps<T> & Omit<IntrinsicElementAttributes[T], "asChild" | "as" | keyof Options>)> & import('vue').PublicProps;
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, never>, never> & (MotionProps<T> & Omit<IntrinsicElementAttributes[T], "asChild" | keyof Options>)> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {

package/dist/src/components/type.d.ts

@@ -0,0 +1,25 @@
+interface SVGRenderState {
+    style: Record<string, any>;
+    transform: Record<string, any>;
+    transformOrigin: {
+        originX?: string | number;
+        originY?: string | number;
+        originZ?: string | number;
+    };
+    attrs: Record<string, any>;
+    dimensions?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+interface SVGProps {
+    attrX?: number;
+    attrY?: number;
+    attrScale?: number;
+    pathLength?: number;
+    pathSpacing?: number;
+    pathOffset?: number;
+    [key: string]: any;
+}

package/dist/src/{state/features → features}/feature.d.ts

@@ -1,4 +1,4 @@
-import { MotionState } from '../motion-state';
+import { MotionState } from '../state/motion-state';
 export declare abstract class Feature {
     state: MotionState;
     constructor(state: MotionState);

package/dist/src/{state/features → features}/gestures/base.d.ts

@@ -1,5 +1,5 @@
 import { Feature } from '../feature';
-import { MotionEventNames } from '../../../types';
+import { MotionEventNames } from '../../types';
 export declare abstract class BaseGesture extends Feature {
     abstract isActive(): boolean;
     removeGestureSubscriptions?: VoidFunction;
@@ -7,4 +7,4 @@ export declare abstract class BaseGesture extends Feature {
     protected updateGestureSubscriptions(): void;
     unmount(): void;
 }
-export declare function createGestureEvent(element: Element, name: MotionEventNames, action: VoidFunction): (event: PointerEvent) => void;
+export declare function createGestureEvent(element: HTMLElement, name: MotionEventNames, action: VoidFunction): (event: PointerEvent) => void;

package/dist/src/features/gestures/drag/index.d.ts

@@ -0,0 +1,12 @@
+import { MotionState } from '../../../state/motion-state';
+import { BaseGesture } from '..';
+export declare class DragGesture extends BaseGesture {
+    private isDragging;
+    private currentPosition;
+    private startPosition;
+    private constraints?;
+    isActive(): boolean;
+    constructor(state: MotionState);
+    mount(): void;
+    update(): void;
+}

package/dist/src/features/gestures/drag/types.d.ts

@@ -0,0 +1,144 @@
+import { VariantLabels } from '../../../state/types';
+export interface BoundingBox {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+type DragElastic = boolean | number | Partial<BoundingBox>;
+export interface DragOptions {
+    /**
+     * Enable dragging for this element. Set to `false` by default.
+     * Set `true` to drag in both directions.
+     * Set `"x"` or `"y"` to only drag in a specific direction.
+     *
+     * ```template
+     * <Motion drag="x" />
+     * ```
+     */
+    drag?: boolean | 'x' | 'y';
+    /**
+     * If `true`, the drag direction will be locked to the initial drag direction.
+     * Set to `false` by default.
+     *
+     * ```template
+     * <Motion dragOptions="{ directionLock: true, drag: 'x' }" />
+     * ```
+     */
+    directionLock?: boolean;
+    /**
+     * Allows drag gesture propagation to child components. Set to `false` by
+     * default.
+     *
+     * ```template
+     * <Motion dragOptions="{ propagation: true, drag: 'x' }" />
+     * ```
+     */
+    propagation?: boolean;
+    /**
+     * Applies constraints on the permitted draggable area.
+     *
+     * It can accept an object of optional `top`, `left`, `right`, and `bottom` values, measured in pixels.
+     * This will define a distance the named edge of the draggable component.
+     *
+     * Alternatively, it can accept a `ref` to another component created with React's `useRef` hook.
+     * This `ref` should be passed both to the draggable component's `dragConstraints` prop, and the `ref`
+     * of the component you want to use as constraints.
+     *
+     * ```template
+     * // In pixels
+     * <Motion dragOptions="{ constraints: { left: 0, right: 300 }, drag: 'x' }" />
+     *
+     * // As a ref to another component
+     * const MyComponent = () => {
+     *   const constraintsRef = ref()
+     *
+     *   return (
+     *     <div ref={constraintsRef}>
+     *       <Motion dragOptions="{ constraints: constraintsRef, drag: 'x' }" />
+     *     </div>
+     *   )
+     * }
+     * ```
+     */
+    constraints?: false | Partial<BoundingBox> | HTMLElement;
+    /**
+     * The degree of movement allowed outside constraints. 0 = no movement, 1 =
+     * full movement.
+     *
+     * Set to `0.5` by default. Can also be set as `false` to disable movement.
+     *
+     * By passing an object of `top`/`right`/`bottom`/`left`, individual values can be set
+     * per constraint. Any missing values will be set to `0`.
+     *
+     * ```template
+     * <Motion dragOptions="{ dragElastic: 0.2, constraints: { left: 0, right: 300 }, drag: 'x' }" />
+     * ```
+     */
+    elastic?: DragElastic;
+    /**
+     * Apply momentum from the pan gesture to the component when dragging
+     * finishes. Set to `true` by default.
+     *
+     * ```template
+     * <Motion dragOptions="{ dragMomentum: false, constraints: { left: 0, right: 300 }, drag: 'x' }" />
+     * ```
+     */
+    momentum?: boolean;
+    /**
+     * Allows you to change dragging inertia parameters.
+     * When releasing a draggable Frame, an animation with type `inertia` starts. The animation is based on your dragging velocity. This property allows you to customize it.
+     *
+     * ```jsx
+     * <motion.div
+     *   drag
+     *   dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }}
+     * />
+     * ```
+     */
+    /**
+     * Usually, dragging is initiated by pressing down on a component and moving it. For some
+     * use-cases, for instance clicking at an arbitrary point on a video scrubber, we
+     * might want to initiate dragging from a different component than the draggable one.
+     *
+     * By creating a `dragControls` using the `useDragControls` hook, we can pass this into
+     * the draggable component's `dragControls` prop. It exposes a `start` method
+     * that can start dragging from pointer events on other components.
+     *
+     * ```jsx
+     * const dragControls = useDragControls()
+     *
+     * function startDrag(event) {
+     *   dragControls.start(event, { snapToCursor: true })
+     * }
+     *
+     * return (
+     *   <>
+     *     <div onPointerDown={startDrag} />
+     *     <motion.div drag="x" dragControls={dragControls} />
+     *   </>
+     * )
+     * ```
+     */
+    /**
+     * If true, element will snap back to its origin when dragging ends.
+     *
+     * Enabling this is the equivalent of setting all `dragConstraints` axes to `0`
+     * with `dragElastic={1}`, but when used together `dragConstraints` can define
+     * a wider draggable area and `dragSnapToOrigin` will ensure the element
+     * animates back to its origin on release.
+     */
+    snapToOrigin?: boolean;
+}
+export interface DragProps {
+    /**
+     * Properties or variant label to animate to while the drag gesture is recognised.
+     *
+     * ```jsx
+     * <motion.div whileDrag={{ scale: 1.2 }} />
+     * ```
+     */
+    drag?: VariantLabels;
+    dragOptions?: DragOptions;
+}
+export {};

package/dist/src/{state/features → features}/gestures/hover.d.ts

@@ -1,6 +1,6 @@
 import { Gesture } from './types';
-import { MotionState } from '../../motion-state';
-import { BaseGesture } from '.';
+import { MotionState } from '../../state/motion-state';
+import { BaseGesture } from '..';
 export declare const hover: Gesture;
 export declare class HoverGesture extends BaseGesture {
     isActive(): boolean;

package/dist/src/{state/features → features}/gestures/in-view.d.ts

@@ -1,5 +1,5 @@
-import { MotionState } from '../../motion-state';
-import { BaseGesture } from '.';
+import { MotionState } from '../../state/motion-state';
+import { BaseGesture } from '..';
 export declare class InViewGesture extends BaseGesture {
     isActive(): boolean;
     constructor(state: MotionState);

package/dist/src/{state/features → features}/gestures/index.d.ts

@@ -2,3 +2,4 @@ export * from './base';
 export * from './hover';
 export * from './press';
 export * from './in-view';
+export * from './drag';

package/dist/src/{state/features → features}/gestures/press.d.ts

@@ -1,5 +1,5 @@
-import { MotionState } from '../../motion-state';
-import { BaseGesture } from '.';
+import { MotionState } from '../../state/motion-state';
+import { BaseGesture } from '..';
 export declare class PressGesture extends BaseGesture {
     isActive(): boolean;
     constructor(state: MotionState);

package/dist/src/features/gestures/types.d.ts

@@ -0,0 +1,29 @@
+import { Options } from '../../state/types';
+export interface StateHandlers {
+    enable: VoidFunction;
+    disable: VoidFunction;
+}
+export interface Gesture {
+    isActive: (options: Options) => void;
+    subscribe: (element: HTMLElement, stateHandlers: StateHandlers, options: Options) => () => void;
+}
+export interface DragOptions {
+    constraints?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    dragSnapToOrigin?: boolean;
+    dragElastic?: number;
+    dragMomentum?: boolean;
+    dragTransition?: {
+        power?: number;
+        timeConstant?: number;
+    };
+}
+export interface DragHandlers {
+    onDragStart?: (event: PointerEvent) => void;
+    onDrag?: (event: PointerEvent) => void;
+    onDragEnd?: (event: PointerEvent) => void;
+}

package/dist/src/index.d.ts

@@ -1,3 +1,5 @@
 export * from 'framer-motion/dom';
+export { motionValue as useMotionValue } from 'framer-motion/dom';
 export { default as Motion, type MotionProps } from './components/Motion';
 export { default as AnimatePresence, type AnimatePresenceProps } from './components/AnimatePresence';
+export * from './value';

package/dist/src/state/motion-state.d.ts

@@ -1,6 +1,6 @@
 import { Options } from './types';
 import { DOMKeyframesDefinition } from 'framer-motion';
-declare const STATE_TYPES: readonly ["initial", "animate", "inView", "hover", "press", "exit"];
+declare const STATE_TYPES: readonly ["initial", "animate", "inView", "hover", "press", "exit", "drag"];
 type StateType = typeof STATE_TYPES[number];
 export declare const mountedStates: WeakMap<Element, MotionState>;
 export declare class MotionState {
@@ -13,11 +13,12 @@ export declare class MotionState {
     private baseTarget;
     private target;
     private featureManager;
+    private visualElement;
     constructor(options: Options, parent?: MotionState);
     private initContext;
     private initTarget;
     get initial(): string | boolean | import('./types').Variant;
-    mount(element: Element): void;
+    mount(element: HTMLElement): void;
     unmount(): void;
     update(options: Options): void;
     setActive(name: StateType, isActive: boolean): void;
@@ -25,7 +26,7 @@ export declare class MotionState {
     isMounted(): boolean;
     getDepth(): number;
     getOptions(): Options;
-    getElement(): Element;
+    getElement(): HTMLElement;
     getTarget(): DOMKeyframesDefinition;
 }
 export {};

package/dist/src/state/style.d.ts

@@ -1,6 +1,7 @@
 import { DOMKeyframesDefinition } from 'framer-motion';
+import { MotionStyle } from './types';
 export declare const style: {
     get: (element: Element, name: string) => string | undefined;
     set: (element: Element, name: string, value: string | number) => void;
 };
-export declare function createStyles(keyframes?: DOMKeyframesDefinition): any;
+export declare function createStyles(keyframes?: MotionStyle | DOMKeyframesDefinition): any;

package/dist/src/state/types.d.ts

@@ -1,10 +1,13 @@
+import { TransformProperties } from '../types';
 import { DOMKeyframesDefinition, DynamicAnimationOptions } from 'framer-motion';
-import { animate } from 'framer-motion/dom';
-import { CSSProperties } from 'vue';
+import { MotionValue } from 'framer-motion/dom';
+import { animate } from '../../node_modules/framer-motion/dist/es/animation/animate/index.mjs';
+import { IntrinsicElementAttributes } from 'vue';
 type AnimationPlaybackControls = ReturnType<typeof animate>;
 export interface Variant extends DOMKeyframesDefinition {
     transition?: DynamicAnimationOptions;
 }
+export type VariantLabels = string | Variant;
 type MarginValue = `${number}${'px' | '%'}`;
 type MarginType = MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`;
 export interface InViewOptions {
@@ -12,7 +15,22 @@ export interface InViewOptions {
     margin?: MarginType;
     amount?: 'some' | 'all' | number;
 }
+interface BoundingBox {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface DragOptions {
+    constraints?: false | Partial<BoundingBox>;
+    dragSnapToOrigin?: boolean;
+}
+export type MotionStyle = Partial<{
+    [K in keyof Variant]: Variant[K] | MotionValue;
+}>;
+export type ElementType = keyof IntrinsicElementAttributes;
 export interface Options {
+    as?: ElementType;
     inViewOptions?: InViewOptions & {
         once?: boolean;
     };
@@ -25,8 +43,9 @@ export interface Options {
     variants?: {
         [k: string]: Variant;
     };
+    style?: MotionStyle;
+    transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
     transition?: DynamicAnimationOptions;
-    style?: CSSProperties;
     onMotionStart?: (target: DOMKeyframesDefinition) => void;
     onMotionComplete?: (target: DOMKeyframesDefinition) => void;
     onHoverStart?: (e: PointerEvent) => void;

package/dist/src/state/utils.d.ts

@@ -1,7 +1,7 @@
-import { AnimateOptions } from '../types';
+import { Options } from './types';
 import { DynamicAnimationOptions, Variant } from 'framer-motion';
-import { VNode } from 'vue';
-export declare function resolveVariant(definition?: AnimateOptions['initial'], variants?: AnimateOptions['variants']): Variant | undefined;
+import { IntrinsicElementAttributes } from 'vue';
+export declare function resolveVariant(definition?: Options['initial'], variants?: Options['variants']): Variant | undefined;
 export declare function hasChanged(a: any, b: any): boolean;
 export declare function shallowCompare(next: any[], prev: any[]): boolean;
 export declare function addUniqueItem<T>(array: T[], item: T): void;
@@ -11,6 +11,9 @@ export declare function isCssVar(name: string): boolean;
 export declare function noop(): void;
 export declare const noopReturn: <V>(v: V) => V;
 export declare function isNumber(value: any): boolean;
-export declare function isElement(vNode: VNode): boolean;
-export declare function getChildKey(vNode: VNode): PropertyKey;
-export declare function setStaticValue(): void;
+type ElementType = keyof IntrinsicElementAttributes;
+export declare const svgElements: readonly ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"];
+type UnionStringArray<T extends Readonly<string[]>> = T[number];
+export type SVGElements = UnionStringArray<typeof svgElements>;
+export declare function isSVGElement(as: ElementType): as is SVGElements;
+export {};

package/dist/src/types/framer-motion.d.ts

@@ -0,0 +1,104 @@
+import { EasingFunction, ResolvedValues } from 'framer-motion';
+export interface FrameData {
+    delta: number;
+    timestamp: number;
+    isProcessing: boolean;
+}
+export interface MotionValueEventCallbacks<V> {
+    animationStart: () => void;
+    animationComplete: () => void;
+    animationCancel: () => void;
+    change: (latestValue: V) => void;
+    renderRequest: () => void;
+}
+export interface ScrollOptions {
+    source?: HTMLElement;
+    container?: HTMLElement;
+    target?: Element;
+    axis?: 'x' | 'y';
+    offset?: ScrollOffset;
+}
+export type OnScrollProgress = (progress: number) => void;
+export type OnScrollWithInfo = (progress: number, info: ScrollInfo) => void;
+export type OnScroll = OnScrollProgress | OnScrollWithInfo;
+export interface AxisScrollInfo {
+    current: number;
+    offset: number[];
+    progress: number;
+    scrollLength: number;
+    velocity: number;
+    targetOffset: number;
+    targetLength: number;
+    containerLength: number;
+    interpolatorOffsets?: number[];
+    interpolate?: EasingFunction;
+}
+export interface ScrollInfo {
+    time: number;
+    x: AxisScrollInfo;
+    y: AxisScrollInfo;
+}
+export type OnScrollInfo = (info: ScrollInfo) => void;
+export type OnScrollHandler = {
+    measure: () => void;
+    update: (time: number) => void;
+    notify: () => void;
+};
+export type SupportedEdgeUnit = 'px' | 'vw' | 'vh' | '%';
+export type EdgeUnit = `${number}${SupportedEdgeUnit}`;
+export type NamedEdges = 'start' | 'end' | 'center';
+export type EdgeString = NamedEdges | EdgeUnit | `${number}`;
+export type Edge = EdgeString | number;
+export type ProgressIntersection = [number, number];
+export type Intersection = `${Edge} ${Edge}`;
+export type ScrollOffset = Array<Edge | Intersection | ProgressIntersection>;
+export interface ScrollInfoOptions {
+    container?: HTMLElement;
+    target?: Element;
+    axis?: 'x' | 'y';
+    offset?: ScrollOffset;
+}
+export interface TransformOrigin {
+    originX?: number | string;
+    originY?: number | string;
+    originZ?: number | string;
+}
+export interface HTMLRenderState {
+    /**
+     * A mutable record of transforms we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
+     */
+    transform: ResolvedValues;
+    /**
+     * A mutable record of transform origins we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
+     */
+    transformOrigin: TransformOrigin;
+    /**
+     * A mutable record of styles we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
+     */
+    style: ResolvedValues;
+    /**
+     * A mutable record of CSS variables we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
+     */
+    vars: ResolvedValues;
+}
+export type SVGDimensions = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export interface SVGRenderState extends HTMLRenderState {
+    /**
+     * Measured dimensions of the SVG element to be used to calculate a transform-origin.
+     */
+    dimensions?: SVGDimensions;
+    /**
+     * A mutable record of attributes we want to apply directly to the rendered Element
+     * every frame. We use a mutable data structure to reduce GC during animations.
+     */
+    attrs: ResolvedValues;
+}

package/dist/src/types/index.d.ts

@@ -1,14 +1,3 @@
-import { DOMKeyframesDefinition, DynamicAnimationOptions } from 'framer-motion';
-export interface Variant extends DOMKeyframesDefinition {
-    transition?: DynamicAnimationOptions;
-}
-export interface AnimateOptions {
-    initial?: string | Variant | boolean;
-    animate?: string | Variant;
-    exit?: string | Variant;
-    variants?: {
-        [k: string]: Variant;
-    };
-    transition?: DynamicAnimationOptions;
-}
-export type MotionEventNames = 'motionstart' | 'motioncomplete' | 'hoverstart' | 'hoverend' | 'pressstart' | 'pressend' | 'viewenter' | 'viewleave';
+export * from './transform';
+export * from './framer-motion';
+export type MotionEventNames = 'motionstart' | 'motioncomplete' | 'hoverstart' | 'hoverend' | 'pressstart' | 'pressend' | 'viewenter' | 'viewleave' | 'dragstart' | 'dragend' | 'dragcancel' | 'dragmove' | 'drag';

package/dist/src/types/transform.d.ts

@@ -0,0 +1,47 @@
+import { EasingFunction } from 'framer-motion';
+export interface TransformProperties {
+    x?: string | number;
+    y?: string | number;
+    z?: string | number;
+    translateX?: string | number;
+    translateY?: string | number;
+    translateZ?: string | number;
+    rotate?: string | number;
+    rotateX?: string | number;
+    rotateY?: string | number;
+    rotateZ?: string | number;
+    scale?: string | number;
+    scaleX?: string | number;
+    scaleY?: string | number;
+    scaleZ?: string | number;
+    skew?: string | number;
+    skewX?: string | number;
+    skewY?: string | number;
+    originX?: string | number;
+    originY?: string | number;
+    originZ?: string | number;
+    perspective?: string | number;
+    transformPerspective?: string | number;
+}
+export interface TransformOptions<T> {
+    /**
+     * Clamp values to within the given range. Defaults to `true`
+     *
+     * @public
+     */
+    clamp?: boolean;
+    /**
+     * 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.
+     *
+     * @public
+     */
+    ease?: EasingFunction | EasingFunction[];
+    /**
+     * Provide a function that can interpolate between any two values in the provided range.
+     *
+     * @public
+     */
+    mixer?: (from: T, to: T) => (v: number) => any;
+}

package/dist/src/utils/events.d.ts

@@ -1,2 +1,2 @@
 import { MotionEventNames } from '../types';
-export declare function dispatchPointerEvent(element: Element, name: MotionEventNames, event: any): void;
+export declare function dispatchPointerEvent(element: HTMLElement, name: MotionEventNames, event: any): void;

package/dist/src/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './createContext';
+export * from './motion-value';

package/dist/src/utils/motion-value.d.ts

@@ -0,0 +1,2 @@
+import { MotionValue } from 'framer-motion/dom';
+export declare function isMotionValue(value: any): value is MotionValue;

package/dist/src/utils/use-animation-frame.d.ts

@@ -0,0 +1,2 @@
+export type FrameCallback = (timestamp: number, delta: number) => void;
+export declare function useAnimationFrame(callback: FrameCallback): void;

package/dist/src/value/index.d.ts

@@ -0,0 +1,5 @@
+export * from './use-transform';
+export * from './use-time';
+export * from './use-motion-template';
+export * from './use-spring';
+export * from './use-scroll';

package/dist/src/value/use-combine-values.d.ts

@@ -0,0 +1,6 @@
+import { MotionValue } from 'framer-motion/dom';
+export declare function useCombineMotionValues<T>(combineValues: () => T): {
+    subscribe: (values: MotionValue[]) => void;
+    unsubscribe: () => void;
+    value: MotionValue<T>;
+};

package/dist/src/value/use-computed.d.ts

@@ -0,0 +1,2 @@
+import { MotionValue } from 'framer-motion/dom';
+export declare function useComputed<T>(computed: () => T): MotionValue<T>;

package/dist/src/value/use-motion-template.d.ts

@@ -0,0 +1,21 @@
+import { MotionValue } from 'framer-motion/dom';
+/**
+ * 将多个motion值组合成一个新的motion值,使用模板字符串语法
+ *
+ * ```vue
+ * <script setup>
+ * import { useSpring, motionValue, useMotionTemplate } from 'motion-v'
+ *
+ * const shadowX = useSpring(0)
+ * const shadowY = motionValue(0)
+ * const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
+ * </script>
+ *
+ * <template>
+ *   <Motion :style="{ filter: shadow }" />
+ * </template>
+ * ```
+ *
+ * @public
+ */
+export declare function useMotionTemplate(fragments: TemplateStringsArray, ...values: Array<MotionValue | number | string>): MotionValue<string>;

package/dist/src/value/use-motion-value-event.d.ts

@@ -0,0 +1,3 @@
+import { MotionValue } from 'framer-motion/dom';
+import { MotionValueEventCallbacks } from '../types';
+export declare function useMotionValueEvent<V, EventName extends keyof MotionValueEventCallbacks<V>>(value: MotionValue<V>, event: EventName, callback: MotionValueEventCallbacks<V>[EventName]): VoidFunction;