motion-v 1.2.1 → 1.3.1

package/dist/cjs/index.js

@@ -483,6 +483,11 @@ const color = {
   },
   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);
   }
 };
 const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
@@ -550,7 +555,7 @@ function createTransformer(source) {
     return output;
   };
 }
-const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
+const convertNumbersToZero = (v) => typeof v === "number" ? 0 : color.test(v) ? color.getAnimatableNone(v) : v;
 function getAnimatableNone$1(v) {
   const parsed = parseComplexValue(v);
   const transformer = createTransformer(v);
@@ -736,7 +741,7 @@ const generateLinearEasing = (easing, duration, resolution = 10) => {
   let points = "";
   const numPoints = Math.max(Math.round(duration / resolution), 2);
   for (let i = 0; i < numPoints; i++) {
-    points += easing(i / (numPoints - 1)) + ", ";
+    points += Math.round(easing(i / (numPoints - 1)) * 1e4) / 1e4 + ", ";
   }
   return `linear(${points.substring(0, points.length - 2)})`;
 };
@@ -3825,6 +3830,8 @@ function calcNextTime(current2, next2, prev, labels) {
     return Math.max(0, current2 + parseFloat(next2));
   } else if (next2 === "<") {
     return prev;
+  } else if (next2.startsWith("<")) {
+    return Math.max(0, prev + parseFloat(next2.slice(1)));
   } else {
     return labels.get(next2) ?? current2;
   }
@@ -3895,7 +3902,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
       let { ease: ease2 = defaultTransition.ease || "easeOut", duration } = valueTransition;
       const calculatedDelay = typeof delay2 === "function" ? delay2(elementIndex, numSubjects) : delay2;
       const numKeyframes = valueKeyframesAsList.length;
-      const createGenerator = isGenerator(type) ? type : generators == null ? void 0 : generators[type];
+      const createGenerator = isGenerator(type) ? type : generators == null ? void 0 : generators[type || "keyframes"];
       if (numKeyframes <= 2 && createGenerator) {
         let absoluteDelta = 100;
         if (numKeyframes === 2 && isNumberKeyframesArray(valueKeyframesAsList)) {
@@ -5765,7 +5772,7 @@ const [injectMotion, provideMotion] = createContext("Motion");
 const [injectLayoutGroup, provideLayoutGroup] = createContext("LayoutGroup");
 const [useLazyMotionContext, lazyMotionContextProvider] = createContext("LazyMotionContext");
 const defaultConfig = {
-  reduceMotion: "never",
+  reducedMotion: "never",
   transition: void 0,
   nonce: void 0
 };
@@ -5781,7 +5788,14 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "MotionConfig",
   props: {
     transition: {},
-    reduceMotion: { default: defaultConfig.reduceMotion },
+    reduceMotion: {},
+    reducedMotion: { default: ({ reduceMotion }) => {
+      if (core.isDef(reduceMotion)) {
+        heyListen.warning(false, "`reduceMotion` is deprecated. Use `reducedMotion` instead.");
+        return reduceMotion;
+      }
+      return defaultConfig.reducedMotion;
+    } },
     nonce: {},
     inViewOptions: {}
   },
@@ -5790,7 +5804,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     const parentConfig = useMotionConfig();
     const config = vue.computed(() => ({
       transition: props.transition ?? parentConfig.value.transition,
-      reduceMotion: props.reduceMotion ?? parentConfig.value.reduceMotion,
+      reducedMotion: props.reducedMotion ?? parentConfig.value.reducedMotion,
       nonce: props.nonce ?? parentConfig.value.nonce,
       inViewOptions: props.inViewOptions ?? parentConfig.value.inViewOptions
     }));
@@ -5809,6 +5823,21 @@ function removeDoneCallback(element) {
   doneCallbacks.delete(element);
 }
 const [injectAnimatePresence, provideAnimatePresence] = createContext("AnimatePresenceContext");
+function useAnimatePresence(props) {
+  const presenceContext = {
+    initial: props.initial,
+    custom: props.custom
+  };
+  vue.watch(() => props.custom, (v) => {
+    presenceContext.custom = v;
+  }, {
+    flush: "pre"
+  });
+  provideAnimatePresence(presenceContext);
+  vue.onMounted(() => {
+    presenceContext.initial = void 0;
+  });
+}
 function resolveVariant(definition, variants, custom) {
   if (Array.isArray(definition)) {
     return definition.reduce((acc, item) => {
@@ -5907,29 +5936,6 @@ const svgElementSet = new Set(svgElements);
 function isSVGElement(as) {
   return svgElementSet.has(as);
 }
-function isAnimateChanged(oldOptions, newOptions) {
-  const oldAnimate = oldOptions.animate;
-  const newAnimate = newOptions.animate;
-  if (oldAnimate === newAnimate)
-    return false;
-  if (!oldAnimate || !newAnimate) {
-    return true;
-  }
-  if (typeof oldAnimate === "object" || typeof newAnimate === "object") {
-    const oldKeys = Object.keys(oldAnimate);
-    const newKeys = Object.keys(newAnimate);
-    if (oldKeys.length !== newKeys.length)
-      return true;
-    return oldKeys.some((key) => {
-      if (key === "transition")
-        return false;
-      const oldVal = oldAnimate[key];
-      const newVal = newAnimate[key];
-      return oldVal !== newVal;
-    });
-  }
-  return oldAnimate !== newAnimate;
-}
 class Feature {
   constructor(state) {
     this.state = state;
@@ -6059,7 +6065,8 @@ function handleHoverEvent(state, entry, lifecycle) {
 }
 class InViewGesture extends Feature {
   isActive() {
-    return Boolean(this.state.options.whileInView);
+    const { whileInView, onViewportEnter, onViewportLeave } = this.state.options;
+    return Boolean(whileInView || onViewportEnter || onViewportLeave);
   }
   constructor(state) {
     super(state);
@@ -7326,6 +7333,8 @@ class AnimationFeature extends Feature {
       isFallback,
       isExit
     } = {}) => {
+      const { reducedMotion } = this.state.options.motionConfig;
+      this.state.visualElement.shouldReduceMotion = reducedMotion === "always" || reducedMotion === "user" && !!prefersReducedMotion.current;
       const prevTarget = this.state.target;
       this.state.target = { ...this.state.baseTarget };
       let animationOptions = {};
@@ -7364,7 +7373,7 @@ class AnimationFeature extends Feature {
           ...this.state.baseTarget
         }
       },
-      reducedMotionConfig: this.state.options.motionConfig.reduceMotion
+      reducedMotionConfig: this.state.options.motionConfig.reducedMotion
     });
     this.state.animateUpdates = this.animateUpdates;
     if (this.state.isMounted())
@@ -7457,7 +7466,7 @@ class AnimationFeature extends Feature {
     let variantTransition = this.state.options.transition;
     let variant = {};
     const { variants, custom, transition, animatePresenceContext } = this.state.options;
-    const customValue = core.isDef(custom) ? custom : animatePresenceContext == null ? void 0 : animatePresenceContext.custom;
+    const customValue = custom ?? (animatePresenceContext == null ? void 0 : animatePresenceContext.custom);
     this.state.activeStates = { ...this.state.activeStates, ...controlActiveState };
     STATE_TYPES.forEach((name) => {
       if (!this.state.activeStates[name] || isAnimationControls(this.state.options[name]))
@@ -9072,10 +9081,12 @@ class MotionState {
   }
   // Initialize animation target values
   initTarget(initialVariantSource) {
+    var _a;
+    const custom = this.options.custom ?? ((_a = this.options.animatePresenceContext) == null ? void 0 : _a.custom);
     this.baseTarget = initialVariantSource.reduce((acc, variant) => {
       return {
         ...acc,
-        ...resolveVariant(this.options[variant] || this.context[variant], this.options.variants)
+        ...resolveVariant(this.options[variant] || this.context[variant], this.options.variants, custom)
       };
     }, {});
     this.target = {};
@@ -9086,8 +9097,7 @@ class MotionState {
     this.options = options;
     (_a = this.visualElement) == null ? void 0 : _a.update({
       ...this.options,
-      whileTap: this.options.whilePress,
-      reducedMotionConfig: this.options.motionConfig.reduceMotion
+      whileTap: this.options.whilePress
     }, {
       isPresent: !doneCallbacks.has(this.element)
     });
@@ -9165,12 +9175,9 @@ class MotionState {
   }
   // Update motion state with new options
   update(options) {
-    const hasAnimateChange = isAnimateChanged(this.options, options);
     this.updateOptions(options);
     this.featureManager.update();
-    if (hasAnimateChange) {
-      this.startAnimation();
-    }
+    this.startAnimation();
   }
   // Set animation state active status and propagate to children
   setActive(name, isActive, isAnimate = true) {
@@ -9596,14 +9603,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const presenceContext = {
-      initial: props.initial,
-      custom: props.custom
-    };
-    provideAnimatePresence(presenceContext);
-    vue.onMounted(() => {
-      presenceContext.initial = void 0;
-    });
+    useAnimatePresence(props);
     const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
     function findMotionElement(el) {
       let current2 = el;
@@ -9757,7 +9757,6 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     whileInView: {},
     whileFocus: {},
     forwardMotionProps: { type: Boolean },
-    features: {},
     ignoreStrict: { type: Boolean },
     custom: {},
     initial: { type: [String, Array, Object, Boolean] },
@@ -9768,8 +9767,6 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     style: {},
     transformTemplate: {},
     transition: {},
-    layoutGroup: {},
-    motionConfig: {},
     onAnimationComplete: {},
     onUpdate: {},
     onAnimationStart: {},
@@ -10113,7 +10110,6 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     whileInView: {},
     whileFocus: {},
     forwardMotionProps: { type: Boolean },
-    features: {},
     ignoreStrict: { type: Boolean },
     custom: {},
     initial: { type: [String, Array, Object, Boolean], default: void 0 },
@@ -10124,8 +10120,6 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     style: {},
     transformTemplate: {},
     transition: {},
-    layoutGroup: {},
-    motionConfig: {},
     onAnimationComplete: {},
     onUpdate: {},
     onAnimationStart: {},

package/dist/es/animation/hooks/animation-controls.mjs

@@ -1,6 +1,6 @@
 import { mountedStates } from "../../state/motion-state.mjs";
 import { invariant } from "hey-listen";
-import { setTarget } from "../../external/.pnpm/framer-motion@12.16.0/external/framer-motion/dist/es/render/utils/setters.mjs";
+import { setTarget } from "../../external/.pnpm/framer-motion@12.18.1/external/framer-motion/dist/es/render/utils/setters.mjs";
 import { resolveVariant } from "../../state/utils.mjs";
 function stopAnimation(visualElement) {
   visualElement.values.forEach((value) => value.stop());

package/dist/es/animation/hooks/use-animate.mjs

@@ -1,5 +1,5 @@
 import { ref, onUnmounted } from "vue";
-import { createScopedAnimate } from "../../external/.pnpm/framer-motion@12.16.0/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { createScopedAnimate } from "../../external/.pnpm/framer-motion@12.18.1/external/framer-motion/dist/es/animation/animate/index.mjs";
 function useAnimate() {
   const dom = ref(null);
   const domProxy = new Proxy(dom, {

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

@@ -1,5 +1,5 @@
 import { MotionState } from '../state';
-import { $Transition, Options } from '../types';
+import { Options } from '../types';
 /**
  * @public
  */
@@ -32,7 +32,7 @@ export interface AnimationControls {
      *
      * @public
      */
-    start: (definition: Options['animate'], transitionOverride?: $Transition) => Promise<any>;
+    start: (definition: Options['animate'], transitionOverride?: Options['transition']) => Promise<any>;
     /**
      * Instantly set to a set of properties or a variant.
      *

package/dist/es/components/animate-presence/AnimatePresence.d.ts

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

package/dist/es/components/animate-presence/AnimatePresence.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, onMounted, onUnmounted, computed, openBlock, createBlock, resolveDynamicComponent, Transition, TransitionGroup, mergeProps, withCtx, renderSlot } from "vue";
+import { defineComponent, onUnmounted, computed, openBlock, createBlock, resolveDynamicComponent, Transition, TransitionGroup, mergeProps, withCtx, renderSlot } from "vue";
 import { mountedStates } from "../../state/motion-state.mjs";
-import { provideAnimatePresence, removeDoneCallback, doneCallbacks } from "../presence.mjs";
+import { useAnimatePresence, removeDoneCallback, doneCallbacks } from "./presence.mjs";
 import { usePopLayout } from "./use-pop-layout.mjs";
 import { delay } from "../../utils/delay.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -19,14 +19,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const presenceContext = {
-      initial: props.initial,
-      custom: props.custom
-    };
-    provideAnimatePresence(presenceContext);
-    onMounted(() => {
-      presenceContext.initial = void 0;
-    });
+    useAnimatePresence(props);
     const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
     function findMotionElement(el) {
       let current = el;

package/dist/es/components/{presence.d.ts → animate-presence/presence.d.ts}

@@ -1,3 +1,4 @@
+import { AnimatePresenceProps } from './types';
 export declare const doneCallbacks: WeakMap<Element, (v?: any, safeUnmount?: boolean) => void>;
 export declare function removeDoneCallback(element: Element): void;
 export interface PresenceContext {
@@ -5,3 +6,4 @@ export interface PresenceContext {
     custom?: any;
 }
 export declare const injectAnimatePresence: <T extends PresenceContext = PresenceContext>(fallback?: T) => T extends null ? PresenceContext : PresenceContext, provideAnimatePresence: (contextValue: PresenceContext) => PresenceContext;
+export declare function useAnimatePresence(props: AnimatePresenceProps): void;

package/dist/es/components/animate-presence/presence.mjs

@@ -0,0 +1,33 @@
+import { watch, onMounted } from "vue";
+import { createContext } from "../../utils/createContext.mjs";
+const doneCallbacks = /* @__PURE__ */ new WeakMap();
+function removeDoneCallback(element) {
+  const prevDoneCallback = doneCallbacks.get(element);
+  if (prevDoneCallback) {
+    element.removeEventListener("motioncomplete", prevDoneCallback);
+  }
+  doneCallbacks.delete(element);
+}
+const [injectAnimatePresence, provideAnimatePresence] = createContext("AnimatePresenceContext");
+function useAnimatePresence(props) {
+  const presenceContext = {
+    initial: props.initial,
+    custom: props.custom
+  };
+  watch(() => props.custom, (v) => {
+    presenceContext.custom = v;
+  }, {
+    flush: "pre"
+  });
+  provideAnimatePresence(presenceContext);
+  onMounted(() => {
+    presenceContext.initial = void 0;
+  });
+}
+export {
+  doneCallbacks,
+  injectAnimatePresence,
+  provideAnimatePresence,
+  removeDoneCallback,
+  useAnimatePresence
+};

package/dist/es/components/animate-presence/use-pop-layout.mjs

@@ -1,5 +1,5 @@
 import { useMotionConfig } from "../motion-config/context.mjs";
-import { frame } from "../../external/.pnpm/motion-dom@12.16.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { frame } from "../../external/.pnpm/motion-dom@12.18.1/external/motion-dom/dist/es/frameloop/frame.mjs";
 function usePopLayout(props) {
   const styles = /* @__PURE__ */ new WeakMap();
   const config = useMotionConfig();