motion-v 1.10.3 → 2.0.0-beta.2

package/dist/es/animation/hooks/animation-controls.d.ts

@@ -1,8 +1,6 @@
-import { AnimationControls } from '../types';
-import { MotionState } from '../../state';
-import { Options } from '../../types';
+import { AnimationDefinition, LegacyAnimationControls, VisualElement } from 'motion-dom';
 /**
- * @public
+ * @deprecated
  */
-export declare function animationControls(): AnimationControls;
-export declare function setValues(state: MotionState, definition: Options['animate']): void;
+export declare function animationControls(): LegacyAnimationControls;
+export declare function setValues(visualElement: VisualElement, definition: AnimationDefinition): void;

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

@@ -1,91 +1,57 @@
-import { mountedStates } from "../../state/motion-state.mjs";
+import { animateVisualElement, setTarget } from "motion-dom";
 import { invariant } from "hey-listen";
-import { setTarget } from "../../external/.pnpm/framer-motion@12.25.0/external/framer-motion/dist/es/render/utils/setters.mjs";
-import { resolveVariant } from "../../state/utils.mjs";
 function stopAnimation(visualElement) {
-  visualElement.values.forEach((value) => value.stop());
-}
-function setStateTarget(state, definition) {
-  const resolvedVariant = resolveVariant(definition, state.options.variants, state.options.custom);
-  Object.entries(resolvedVariant).forEach(([key, value]) => {
-    if (key === "transition")
-      return;
-    state.target[key] = value;
-  });
+	visualElement.values.forEach((value) => value.stop());
 }
 function animationControls() {
-  let hasMounted = false;
-  const subscribers = /* @__PURE__ */ new Set();
-  const controls = {
-    subscribe(state) {
-      subscribers.add(state);
-      return () => void subscribers.delete(state);
-    },
-    start(definition, transitionOverride) {
-      invariant(
-        hasMounted,
-        "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook."
-      );
-      const animations = [];
-      subscribers.forEach((state) => {
-        animations.push(
-          state.animateUpdates({
-            directAnimate: definition,
-            directTransition: transitionOverride
-          })
-        );
-      });
-      return Promise.all(animations);
-    },
-    set(definition) {
-      invariant(
-        hasMounted,
-        "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook."
-      );
-      return subscribers.forEach((state) => {
-        setValues(state, definition);
-      });
-    },
-    stop() {
-      subscribers.forEach((state) => {
-        stopAnimation(state.visualElement);
-      });
-    },
-    mount() {
-      hasMounted = true;
-      return () => {
-        hasMounted = false;
-        controls.stop();
-      };
-    }
-  };
-  return controls;
+	let hasMounted = false;
+	const subscribers = /* @__PURE__ */ new Set();
+	const controls = {
+		subscribe(state) {
+			subscribers.add(state);
+			return () => void subscribers.delete(state);
+		},
+		start(definition, transitionOverride) {
+			invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+			const animations = [];
+			subscribers.forEach((visualElement) => {
+				animations.push(animateVisualElement(visualElement, definition, { transitionOverride }));
+			});
+			return Promise.all(animations);
+		},
+		set(definition) {
+			invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+			return subscribers.forEach((visualElement) => {
+				setValues(visualElement, definition);
+			});
+		},
+		stop() {
+			subscribers.forEach((visualElement) => {
+				stopAnimation(visualElement);
+			});
+		},
+		mount() {
+			hasMounted = true;
+			return () => {
+				hasMounted = false;
+				controls.stop();
+			};
+		}
+	};
+	return controls;
 }
-function setValues(state, definition) {
-  if (typeof definition === "string") {
-    return setVariants(state, [definition]);
-  } else if (Array.isArray(definition)) {
-    return setVariants(state, definition);
-  } else {
-    setStateTarget(state, definition);
-    setTarget(state.visualElement, definition);
-  }
+function setValues(visualElement, definition) {
+	if (Array.isArray(definition)) return setVariants(visualElement, definition);
+	else if (typeof definition === "string") return setVariants(visualElement, [definition]);
+	else setTarget(visualElement, definition);
 }
-function setVariants(state, variantLabels) {
-  const reversedLabels = [...variantLabels].reverse();
-  const visualElement = state.visualElement;
-  reversedLabels.forEach((key) => {
-    const variant = visualElement.getVariant(key);
-    variant && setTarget(visualElement, variant);
-    setStateTarget(state, variant);
-    if (visualElement.variantChildren) {
-      visualElement.variantChildren.forEach((child) => {
-        setVariants(mountedStates.get(child.current), variantLabels);
-      });
-    }
-  });
+function setVariants(visualElement, variantLabels) {
+	[...variantLabels].reverse().forEach((key) => {
+		const variant = visualElement.getVariant(key);
+		variant && setTarget(visualElement, variant);
+		if (visualElement.variantChildren) visualElement.variantChildren.forEach((child) => {
+			setVariants(child, variantLabels);
+		});
+	});
 }
-export {
-  animationControls,
-  setValues
-};
+export { animationControls };

package/dist/es/animation/hooks/use-animate.d.ts

@@ -1,4 +1,4 @@
-import { AnimationPlaybackControls } from 'framer-motion';
+import { AnimationPlaybackControls } from 'motion-dom';
 import { Ref, UnwrapRef } from 'vue';
 import { createScopedAnimate } from 'framer-motion/dom';
 type Scope = Ref<UnwrapRef<Element>> & {

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

@@ -1,31 +1,25 @@
-import { ref, onUnmounted } from "vue";
-import { createScopedAnimate } from "../../external/.pnpm/framer-motion@12.25.0/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { createScopedAnimate } from "framer-motion/dom";
+import { onUnmounted, ref } from "vue";
 function useAnimate() {
-  const dom = ref(null);
-  const domProxy = new Proxy(dom, {
-    get(target, key) {
-      if (typeof key === "string" || typeof key === "symbol") {
-        if (key === "current")
-          return Reflect.get(target, "value");
-        return Reflect.get(target, key);
-      }
-      return void 0;
-    },
-    set(target, key, value) {
-      if (key === "value")
-        return Reflect.set(target, key, (value == null ? void 0 : value.$el) || value);
-      if (key === "animations")
-        return Reflect.set(target, key, value);
-      return true;
-    }
-  });
-  domProxy.animations = [];
-  const animate = createScopedAnimate(domProxy);
-  onUnmounted(() => {
-    domProxy.animations.forEach((animation) => animation.stop());
-  });
-  return [domProxy, animate];
+	const dom = ref(null);
+	const domProxy = new Proxy(dom, {
+		get(target, key) {
+			if (typeof key === "string" || typeof key === "symbol") {
+				if (key === "current") return Reflect.get(target, "value");
+				return Reflect.get(target, key);
+			}
+		},
+		set(target, key, value) {
+			if (key === "value") return Reflect.set(target, key, value?.$el || value);
+			if (key === "animations") return Reflect.set(target, key, value);
+			return true;
+		}
+	});
+	domProxy.animations = [];
+	const animate = createScopedAnimate({ scope: domProxy });
+	onUnmounted(() => {
+		domProxy.animations.forEach((animation) => animation.stop());
+	});
+	return [domProxy, animate];
 }
-export {
-  useAnimate
-};
+export { useAnimate };

package/dist/es/animation/hooks/use-animation-controls.d.ts

@@ -30,4 +30,4 @@
  *
  * @public
  */
-export declare function useAnimationControls(): import('../types').AnimationControls;
+export declare function useAnimationControls(): import('motion-dom').LegacyAnimationControls;

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

@@ -1,16 +1,14 @@
 import { animationControls } from "./animation-controls.mjs";
 import { onMounted, onUnmounted } from "vue";
 function useAnimationControls() {
-  const controls = animationControls();
-  let unmount;
-  onMounted(() => {
-    unmount = controls.mount();
-  });
-  onUnmounted(() => {
-    unmount();
-  });
-  return controls;
+	const controls = animationControls();
+	let unmount;
+	onMounted(() => {
+		unmount = controls.mount();
+	});
+	onUnmounted(() => {
+		unmount();
+	});
+	return controls;
 }
-export {
-  useAnimationControls
-};
+export { useAnimationControls };

package/dist/es/animation/hooks/use-reduced-motion.mjs

@@ -1,9 +1,7 @@
 import { computed } from "vue";
 import { useMediaQuery } from "@vueuse/core";
 function useReducedMotion(options = {}) {
-  const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)", options);
-  return computed(() => reducedMotion.value);
+	const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)", options);
+	return computed(() => reducedMotion.value);
 }
-export {
-  useReducedMotion
-};
+export { useReducedMotion };

package/dist/es/components/LayoutGroup.d.ts

@@ -1,5 +1,6 @@
 import { LayoutGroupProps } from './use-layout-group';
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         default?(_: {
             renderKey: number;
@@ -7,7 +8,7 @@ declare function __VLS_template(): {
         }): any;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<LayoutGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<LayoutGroupProps> & Readonly<{}>, {

package/dist/es/components/LayoutGroup.mjs

@@ -0,0 +1,3 @@
+import LayoutGroup_vue_vue_type_script_setup_true_lang_default from "./LayoutGroup.vue_vue_type_script_setup_true_lang.mjs";
+var LayoutGroup_default = LayoutGroup_vue_vue_type_script_setup_true_lang_default;
+export { LayoutGroup_default as default };

package/dist/es/components/LayoutGroup.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,22 @@
+import { useLayoutGroupProvider } from "./use-layout-group.mjs";
+import { defineComponent, renderSlot, unref } from "vue";
+var LayoutGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "LayoutGroup",
+	props: {
+		id: {},
+		inherit: {
+			type: [Boolean, String],
+			default: true
+		}
+	},
+	setup(__props) {
+		const { forceRender, key } = useLayoutGroupProvider(__props);
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", {
+				renderKey: unref(key),
+				forceRender: unref(forceRender)
+			});
+		};
+	}
+});
+export { LayoutGroup_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/components/RowValue.d.ts

@@ -2,7 +2,7 @@ import { MotionValue } from 'framer-motion/dom';
 declare const _default: <T>(__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, never>, never> & {
         value: MotionValue<T>;
-    }> & import('vue').PublicProps;
+    } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};

package/dist/es/components/RowValue.mjs

@@ -0,0 +1,3 @@
+import RowValue_vue_vue_type_script_setup_true_lang_default from "./RowValue.vue_vue_type_script_setup_true_lang.mjs";
+var RowValue_default = RowValue_vue_vue_type_script_setup_true_lang_default;
+export { RowValue_default as default };

package/dist/es/components/RowValue.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,18 @@
+import { defineComponent, getCurrentInstance, toDisplayString, watchEffect } from "vue";
+var RowValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RowValue",
+	props: { value: {} },
+	setup(__props) {
+		const props = __props;
+		const instance = getCurrentInstance().proxy;
+		watchEffect((cleanup) => {
+			cleanup(props.value.on("change", (value) => {
+				if (instance.$el) instance.$el.textContent = value;
+			}));
+		});
+		return (_ctx, _cache) => {
+			return toDisplayString(_ctx.value.get());
+		};
+	}
+});
+export { RowValue_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -1,10 +1,11 @@
 import { AnimatePresenceProps } from './types';
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<AnimatePresenceProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AnimatePresenceProps> & Readonly<{}>, {

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

@@ -0,0 +1,3 @@
+import AnimatePresence_vue_vue_type_script_setup_true_lang_default from "./AnimatePresence.vue_vue_type_script_setup_true_lang.mjs";
+var AnimatePresence_default = AnimatePresence_vue_vue_type_script_setup_true_lang_default;
+export { AnimatePresence_default as default };

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

@@ -0,0 +1,37 @@
+import { usePresenceContainer } from "./use-presence-container.mjs";
+import { Transition, TransitionGroup, computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+var AnimatePresence_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "AnimatePresence",
+	inheritAttrs: true,
+	__name: "AnimatePresence",
+	props: {
+		mode: { default: "sync" },
+		initial: {
+			type: Boolean,
+			default: true
+		},
+		as: {},
+		custom: {},
+		onExitComplete: {},
+		anchorX: { default: "left" }
+	},
+	setup(__props) {
+		const props = __props;
+		const { enter, exit } = usePresenceContainer(props);
+		const transitionProps = computed(() => {
+			if (props.mode !== "wait") return { tag: props.as };
+			return { mode: props.mode === "wait" ? "out-in" : void 0 };
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(_ctx.mode === "wait" ? Transition : TransitionGroup), mergeProps(transitionProps.value, {
+				appear: "",
+				onLeave: unref(exit),
+				onEnter: unref(enter)
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["onLeave", "onEnter"]);
+		};
+	}
+});
+export { AnimatePresence_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -1,11 +1,8 @@
 import { MotionState } from '../../state';
-export declare const PRESENCE_CHILD_ATTR = "data-ap-child";
 export interface PresenceContext {
     initial?: boolean;
     custom?: any;
-    register?: (container: Element, state: MotionState) => void;
-    onMotionExitComplete?: (container: Element, state: MotionState) => void;
-    registerPending?: (state: MotionState) => void;
-    unregisterPending?: (state: MotionState) => void;
+    presenceId?: string;
+    onMotionExitComplete?: (container: HTMLElement, state: MotionState) => void;
 }
-export declare const injectAnimatePresence: <T extends PresenceContext = PresenceContext>(fallback?: T) => T extends null ? PresenceContext : PresenceContext, provideAnimatePresence: (contextValue: PresenceContext) => PresenceContext;
+export declare const injectAnimatePresence: <T extends PresenceContext = PresenceContext>(fallback?: T) => T extends null ? PresenceContext : PresenceContext, provideAnimatePresence: (contextValue: PresenceContext) => PresenceContext, animatePresenceInjectionKey: import('vue').InjectionKey<PresenceContext>;

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

@@ -1,8 +1,3 @@
 import { createContext } from "../../utils/createContext.mjs";
-const PRESENCE_CHILD_ATTR = "data-ap-child";
-const [injectAnimatePresence, provideAnimatePresence] = createContext("AnimatePresenceContext");
-export {
-  PRESENCE_CHILD_ATTR,
-  injectAnimatePresence,
-  provideAnimatePresence
-};
+const [injectAnimatePresence, provideAnimatePresence, animatePresenceInjectionKey] = createContext("AnimatePresenceContext");
+export { animatePresenceInjectionKey, injectAnimatePresence, provideAnimatePresence };

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

@@ -1,33 +1,29 @@
 import { useMotionConfig } from "../motion-config/context.mjs";
-import { frame } from "../../external/.pnpm/motion-dom@12.24.11/external/motion-dom/dist/es/frameloop/frame.mjs";
-let popId = 0;
+import { frame } from "framer-motion/dom";
+var popId = 0;
 function usePopLayout(props) {
-  const styles = /* @__PURE__ */ new WeakMap();
-  const config = useMotionConfig();
-  function addPopStyle(element) {
-    if (props.mode !== "popLayout")
-      return;
-    const parent = element.offsetParent;
-    const parentWidth = parent instanceof HTMLElement ? parent.offsetWidth || 0 : 0;
-    const size = {
-      height: element.offsetHeight || 0,
-      width: element.offsetWidth || 0,
-      top: element.offsetTop,
-      left: element.offsetLeft,
-      right: 0
-    };
-    size.right = parentWidth - size.width - size.left;
-    const x = props.anchorX === "left" ? `left: ${size.left}px` : `right: ${size.right}px`;
-    const elementPopId = `pop-${popId++}`;
-    element.dataset.motionPopId = elementPopId;
-    const style = document.createElement("style");
-    if (config.value.nonce) {
-      style.nonce = config.value.nonce;
-    }
-    styles.set(element, style);
-    document.head.appendChild(style);
-    if (style.sheet) {
-      style.sheet.insertRule(`
+	const styles = /* @__PURE__ */ new WeakMap();
+	const config = useMotionConfig();
+	function addPopStyle(element) {
+		if (props.mode !== "popLayout") return;
+		const parent = element.offsetParent;
+		const parentWidth = parent instanceof HTMLElement ? parent.offsetWidth || 0 : 0;
+		const size = {
+			height: element.offsetHeight || 0,
+			width: element.offsetWidth || 0,
+			top: element.offsetTop,
+			left: element.offsetLeft,
+			right: 0
+		};
+		size.right = parentWidth - size.width - size.left;
+		const x = props.anchorX === "left" ? `left: ${size.left}px` : `right: ${size.right}px`;
+		const elementPopId = `pop-${popId++}`;
+		element.dataset.motionPopId = elementPopId;
+		const style = document.createElement("style");
+		if (config.value.nonce) style.nonce = config.value.nonce;
+		styles.set(element, style);
+		document.head.appendChild(style);
+		if (style.sheet) style.sheet.insertRule(`
     [data-motion-pop-id="${elementPopId}"] {
       position: absolute !important;
       width: ${size.width}px !important;
@@ -36,22 +32,18 @@ function usePopLayout(props) {
       ${x} !important;
       }
       `);
-    }
-  }
-  function removePopStyle(element) {
-    const style = styles.get(element);
-    if (!style)
-      return;
-    styles.delete(element);
-    frame.render(() => {
-      document.head.removeChild(style);
-    });
-  }
-  return {
-    addPopStyle,
-    removePopStyle
-  };
+	}
+	function removePopStyle(element) {
+		const style = styles.get(element);
+		if (!style) return;
+		styles.delete(element);
+		frame.render(() => {
+			document.head.removeChild(style);
+		});
+	}
+	return {
+		addPopStyle,
+		removePopStyle
+	};
 }
-export {
-  usePopLayout
-};
+export { usePopLayout };