motion-v 0.5.0-beta.1 → 0.5.0

package/dist/es/state/animate-variants-children.mjs

@@ -1,7 +1,7 @@
 import { style } from "./style.mjs";
 import { transformResetValue } from "./transform.mjs";
 import { resolveVariant, hasChanged, getOptions } from "./utils.mjs";
-import { animate } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { animate } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/animation/animate/index.mjs";
 function animateVariantsChildren(state, activeState) {
   const variantChildren = state.visualElement.variantChildren;
   if (!(variantChildren == null ? void 0 : variantChildren.size)) {

package/dist/es/state/create-visual-element.mjs

@@ -1,6 +1,6 @@
 import { isSVGElement } from "./utils.mjs";
-import { HTMLVisualElement } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/html/HTMLVisualElement.mjs";
-import { SVGVisualElement } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/svg/SVGVisualElement.mjs";
+import { HTMLVisualElement } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/render/html/HTMLVisualElement.mjs";
+import { SVGVisualElement } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/render/svg/SVGVisualElement.mjs";
 function createVisualElement(Component, options) {
   return isSVGElement(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
 }

package/dist/es/state/motion-state.mjs

@@ -1,6 +1,6 @@
-import { invariant } from "../external/.pnpm/hey-listen@1.0.8/external/hey-listen/dist/hey-listen.es.mjs";
-import { visualElementStore } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/store.mjs";
-import { resolveVariant, getOptions, hasChanged, noop } from "./utils.mjs";
+import { invariant } from "hey-listen";
+import { visualElementStore } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/render/store.mjs";
+import { resolveVariant, getOptions, hasChanged } from "./utils.mjs";
 import { FeatureManager } from "../features/feature-manager.mjs";
 import { style } from "./style.mjs";
 import { transformResetValue } from "./transform.mjs";
@@ -8,14 +8,18 @@ import { scheduleAnimation, unscheduleAnimation } from "./schedule.mjs";
 import { motionEvent } from "./event.mjs";
 import { createVisualElement } from "./create-visual-element.mjs";
 import { animateVariantsChildren } from "./animate-variants-children.mjs";
-import { animate } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { doneCallbacks } from "../components/presence.mjs";
+import { noop } from "../external/.pnpm/motion-utils@11.14.3/external/motion-utils/dist/es/noop.mjs";
+import "../external/.pnpm/motion-utils@11.14.3/external/motion-utils/dist/es/errors.mjs";
+import { animate } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/animation/animate/index.mjs";
 import { isDef } from "../external/.pnpm/@vueuse_shared@12.0.0_typescript@5.7.2/external/@vueuse/shared/index.mjs";
-const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "exit", "drag"];
+const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "exit"];
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
 class MotionState {
   constructor(options, parent) {
     this.element = null;
+    this.isFirstAnimate = true;
     this.activeStates = {
       initial: true,
       animate: true
@@ -69,13 +73,17 @@ class MotionState {
     return isDef(this.options.initial) ? this.options.initial : this.context.initial;
   }
   updateOptions() {
-    var _a;
     this.visualElement.update({
       ...this.options,
       whileHover: this.options.hover,
       whileTap: this.options.press,
       whileInView: this.options.inView
-    }, (_a = this.parent) == null ? void 0 : _a.context);
+    }, {
+      isPresent: !doneCallbacks.has(this.element)
+    });
+  }
+  beforeMount() {
+    this.featureManager.beforeMount();
   }
   mount(element, options) {
     invariant(
@@ -103,6 +111,9 @@ class MotionState {
     this.featureManager.mount();
     scheduleAnimation(this);
   }
+  beforeUnmount() {
+    this.featureManager.beforeUnmount();
+  }
   unmount() {
     var _a;
     mountedStates.delete(this.element);
@@ -110,6 +121,9 @@ class MotionState {
     (_a = visualElementStore.get(this.element)) == null ? void 0 : _a.unmount();
     this.featureManager.unmount();
   }
+  beforeUpdate() {
+    this.featureManager.beforeUpdate();
+  }
   update(options) {
     this.options = options;
     this.updateOptions();
@@ -117,9 +131,13 @@ class MotionState {
     scheduleAnimation(this);
   }
   setActive(name, isActive) {
+    var _a;
     if (!this.element || this.activeStates[name] === isActive)
       return;
     this.activeStates[name] = isActive;
+    (_a = this.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
+      child.state.setActive(name, isActive);
+    });
     scheduleAnimation(this);
   }
   *animateUpdates() {
@@ -129,6 +147,12 @@ class MotionState {
     const animationOptions = {};
     let transition;
     for (const name of STATE_TYPES) {
+      if (name === "initial") {
+        if (!this.isFirstAnimate) {
+          continue;
+        }
+        this.isFirstAnimate = false;
+      }
       if (!this.activeStates[name])
         continue;
       const definition = isDef(this.options[name]) ? this.options[name] : this.context[name];

package/dist/es/state/utils/is-present.mjs

@@ -0,0 +1,7 @@
+import { doneCallbacks } from "../../components/presence.mjs";
+function isPresent(visualElement) {
+  return !doneCallbacks.has(visualElement.current);
+}
+export {
+  isPresent
+};

package/dist/es/state/utils.mjs

@@ -36,8 +36,6 @@ function getOptions(options, key) {
 function isCssVar(name) {
   return name == null ? void 0 : name.startsWith("--");
 }
-function noop() {
-}
 const noopReturn = (v) => v;
 function isNumber(value) {
   return typeof value === "number";
@@ -110,7 +108,6 @@ export {
   isCssVar,
   isNumber,
   isSVGElement,
-  noop,
   noopReturn,
   removeItem,
   resolveVariant,

package/dist/es/utils/clamp.mjs

@@ -0,0 +1,10 @@
+function clamp(min, max, v) {
+  if (v > max)
+    return max;
+  if (v < min)
+    return min;
+  return v;
+}
+export {
+  clamp
+};

package/dist/es/utils/get-context-window.mjs

@@ -0,0 +1,6 @@
+function getContextWindow({ current }) {
+  return current ? current.ownerDocument.defaultView : null;
+}
+export {
+  getContextWindow
+};

package/dist/es/utils/mix/number.mjs

@@ -0,0 +1,6 @@
+function mixNumber(from, to, progress) {
+  return from + (to - from) * progress;
+}
+export {
+  mixNumber
+};

package/dist/es/utils/progress.mjs

@@ -0,0 +1,7 @@
+function progress(from, to, value) {
+  const toFromDifference = to - from;
+  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+}
+export {
+  progress
+};

package/dist/es/utils/time-conversion.mjs

@@ -0,0 +1,8 @@
+const secondsToMilliseconds = (seconds) => seconds * 1e3;
+function millisecondsToSeconds(milliseconds) {
+  return milliseconds / 1e3;
+}
+export {
+  millisecondsToSeconds,
+  secondsToMilliseconds
+};

package/dist/es/utils/use-animation-frame.mjs

@@ -1,5 +1,5 @@
 import { onBeforeUpdate, onUnmounted } from "vue";
-import { frame, cancelFrame } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { frame, cancelFrame } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/frameloop/frame.mjs";
 function useAnimationFrame(callback) {
   let initialTimestamp = 0;
   const provideTimeSinceStart = ({ timestamp, delta }) => {

package/dist/es/utils/use-in-view.mjs

@@ -1,5 +1,5 @@
 import { ref, watch, isRef, unref } from "vue";
-import { inView } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
+import { inView } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
 function useInView(domRef, options) {
   const isInView = ref(false);
   watch([domRef, () => isRef(options) ? options.value : options], (_v1, _v2) => {

package/dist/es/value/types/numbers/units.mjs

@@ -0,0 +1,11 @@
+function createUnitType(unit) {
+  return {
+    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
+    parse: parseFloat,
+    transform: (v) => `${v}${unit}`
+  };
+}
+const percent = /* @__PURE__ */ createUnitType("%");
+export {
+  percent
+};

package/dist/es/value/use-combine-values.mjs

@@ -1,6 +1,6 @@
 import { onUnmounted } from "vue";
-import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
-import { cancelFrame, frame } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/value/index.mjs";
+import { cancelFrame, frame } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/frameloop/frame.mjs";
 function useCombineMotionValues(combineValues) {
   const value = motionValue(combineValues());
   const updateValue = () => value.set(combineValues());

package/dist/es/value/use-computed.mjs

@@ -1,5 +1,5 @@
 import { useCombineMotionValues } from "./use-combine-values.mjs";
-import { collectMotionValues } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { collectMotionValues } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/value/index.mjs";
 import { onBeforeUpdate } from "vue";
 function useComputed(computed) {
   collectMotionValues.current = [];

package/dist/es/value/use-scroll.mjs

@@ -1,7 +1,7 @@
 import { onMounted, onUnmounted, watch } from "vue";
-import { warning } from "../external/.pnpm/hey-listen@1.0.8/external/hey-listen/dist/hey-listen.es.mjs";
-import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
-import { scroll } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
+import { warning } from "hey-listen";
+import { motionValue } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/value/index.mjs";
+import { scroll } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
 function refWarning(name, ref) {
   warning(
     Boolean(!ref || ref.value),

package/dist/es/value/use-spring.mjs

@@ -1,7 +1,7 @@
 import { watch, onBeforeUnmount } from "vue";
-import { animateValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs";
-import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
-import { frame, frameData } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { animateValue } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/value/index.mjs";
+import { frame, frameData } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/frameloop/frame.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
 function toNumber(v) {
   if (typeof v === "number")

package/dist/es/value/use-time.mjs

@@ -1,5 +1,5 @@
 import { useAnimationFrame } from "../utils/use-animation-frame.mjs";
-import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/value/index.mjs";
 function useTime() {
   const time = motionValue(0);
   useAnimationFrame((t) => time.set(t));

package/dist/es/value/use-transform.mjs

@@ -1,6 +1,6 @@
 import { useComputed } from "./use-computed.mjs";
 import { useCombineMotionValues } from "./use-combine-values.mjs";
-import { transform } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/transform.mjs";
+import { transform } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/utils/transform.mjs";
 function useTransform(input, inputRangeOrTransformer, outputRange, options) {
   if (typeof input === "function") {
     return useComputed(input);

package/dist/es/value/use-velocity.mjs

@@ -1,6 +1,6 @@
 import { useMotionValueEvent } from "./use-motion-value-event.mjs";
-import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
-import { frame } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/value/index.mjs";
+import { frame } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/frameloop/frame.mjs";
 function useVelocity(value) {
   const velocity = motionValue(value.getVelocity());
   const updateVelocity = () => {

package/dist/es/value/use-will-change/add-will-change.mjs

@@ -0,0 +1,10 @@
+import { isWillChangeMotionValue } from "./is.mjs";
+function addValueToWillChange(visualElement, key) {
+  const willChange = visualElement.getValue("willChange");
+  if (isWillChangeMotionValue(willChange)) {
+    return willChange.add(key);
+  }
+}
+export {
+  addValueToWillChange
+};

package/dist/es/value/use-will-change/is.mjs

@@ -0,0 +1,7 @@
+import { isMotionValue } from "../../utils/motion-value.mjs";
+function isWillChangeMotionValue(value) {
+  return Boolean(isMotionValue(value) && value.add);
+}
+export {
+  isWillChangeMotionValue
+};

package/dist/src/animation/animation-controls.d.ts

@@ -0,0 +1,7 @@
+import { AnimationDefinition, VisualElement } from 'framer-motion';
+import { AnimationControls } from './types';
+export declare function setValues(visualElement: VisualElement, definition: AnimationDefinition): void;
+/**
+ * @public
+ */
+export declare function animationControls(): AnimationControls;

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

@@ -0,0 +1,12 @@
+import { AnimationControls as FramerAnimationControls, VisualElement } from 'framer-motion';
+export interface AnimationControls extends FramerAnimationControls {
+    /**
+     * Subscribes a component's animation controls to this.
+     *
+     * @param controls - The controls to subscribe
+     * @returns An unsubscribe function.
+     *
+     * @internal
+     */
+    subscribe: (visualElement: VisualElement) => () => void;
+}

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

@@ -16,8 +16,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     initial: boolean;
     multiple: boolean;
 }>>>, {
-    mode: "wait" | "popLayout" | "sync";
     initial: boolean;
+    mode: "wait" | "popLayout" | "sync";
     multiple: boolean;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/src/events/add-dom-event.d.ts

@@ -0,0 +1 @@
+export declare function addDomEvent(target: EventTarget, eventName: string, handler: EventListener, options?: AddEventListenerOptions): () => void;

package/dist/src/events/add-pointer-event.d.ts

@@ -0,0 +1,2 @@
+import { EventListenerWithPointInfo } from '.';
+export declare function addPointerEvent(target: EventTarget, eventName: string, handler: EventListenerWithPointInfo, options?: AddEventListenerOptions): () => void;

package/dist/src/events/event-info.d.ts

@@ -0,0 +1,4 @@
+import { EventInfo } from './types';
+export type EventListenerWithPointInfo = (e: PointerEvent, info: EventInfo) => void;
+export declare function extractEventInfo(event: PointerEvent, pointType?: 'page' | 'client'): EventInfo;
+export declare function addPointerInfo(handler: EventListenerWithPointInfo): EventListener;

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

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './utils';
+export * from './add-pointer-event';
+export * from './event-info';
+export * from './add-dom-event';

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

@@ -0,0 +1,5 @@
+import { Point } from 'framer-motion';
+/** @public */
+export interface EventInfo {
+    point: Point;
+}

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

@@ -0,0 +1 @@
+export * from './is-primary-pointer';

package/dist/src/events/utils/is-primary-pointer.d.ts

@@ -0,0 +1 @@
+export declare function isPrimaryPointer(event: PointerEvent): boolean;

package/dist/src/features/feature-manager.d.ts

@@ -4,6 +4,9 @@ export declare class FeatureManager {
     features: Feature[];
     constructor(state: MotionState);
     mount(): void;
+    beforeMount(): void;
     unmount(): void;
     update(): void;
+    beforeUpdate(): void;
+    beforeUnmount(): void;
 }

package/dist/src/features/feature.d.ts

@@ -2,7 +2,10 @@ import { MotionState } from '../state/motion-state';
 export declare abstract class Feature {
     state: MotionState;
     constructor(state: MotionState);
-    abstract mount(): void;
-    abstract unmount(): void;
-    update(): void;
+    beforeMount(): void;
+    mount(): void;
+    unmount(): void;
+    update?(): void;
+    beforeUpdate?(): void;
+    beforeUnmount?(): void;
 }

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

@@ -0,0 +1,57 @@
+import { MotionProps } from '../../../components/Motion';
+import { Options } from '../../../types';
+import { Point, VisualElement } from 'framer-motion';
+export declare const elementDragControls: WeakMap<VisualElement<unknown, unknown, {}>, VisualElementDragControls>;
+export interface DragControlOptions {
+    snapToCursor?: boolean;
+    cursorProgress?: Point;
+}
+/**
+ *
+ */
+export declare class VisualElementDragControls {
+    private visualElement;
+    private panSession?;
+    private openGlobalLock;
+    isDragging: boolean;
+    private currentDirection;
+    private originPoint;
+    /**
+     * The permitted boundaries of travel, in pixels.
+     */
+    private constraints;
+    private hasMutatedConstraints;
+    /**
+     * The per-axis resolved elastic values.
+     */
+    private elastic;
+    constructor(visualElement: VisualElement<HTMLElement>);
+    start(originEvent: PointerEvent, { snapToCursor }?: DragControlOptions): void;
+    private stop;
+    private cancel;
+    private updateAxis;
+    private resolveConstraints;
+    private resolveRefConstraints;
+    private startAnimation;
+    private startAxisValueAnimation;
+    private stopAnimation;
+    private pauseAnimation;
+    private getAnimationState;
+    /**
+     * Drag works differently depending on which props are provided.
+     *
+     * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
+     * - Otherwise, we apply the delta to the x/y motion values.
+     */
+    private getAxisMotionValue;
+    private snapToCursor;
+    /**
+     * When the viewport resizes we want to check if the measured constraints
+     * have changed and, if so, reposition the element within those new constraints
+     * relative to where it was before the resize.
+     */
+    scalePositionWithinConstraints(): void;
+    addListeners(): () => void;
+    getProps(): Options;
+}
+export declare function expectsResolvedDragConstraints({ dragConstraints, onMeasureDragConstraints, }: MotionProps): boolean;

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

@@ -1,12 +1,10 @@
-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);
+import { Feature } from '../../feature';
+import { VisualElementDragControls } from './VisualElementDragControls';
+export declare class DragGesture extends Feature {
+    controls: VisualElementDragControls;
+    removeGroupControls: Function;
+    removeListeners: Function;
+    constructor(state: any);
     mount(): void;
-    update(): void;
+    unmount(): void;
 }

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

@@ -0,0 +1,4 @@
+export type Lock = (() => void) | false;
+export declare function createLock(name: string): () => Lock;
+export declare function getGlobalLock(drag: boolean | 'x' | 'y' | 'lockDirection'): Lock;
+export declare function isDragActive(): boolean;