motion-v 0.11.0-beta.6 → 0.11.0

package/README.md

@@ -1,31 +1,105 @@
+<p align="center">
+  <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" />
+</p>
 <h1 align="center">Motion for Vue</h1>
 
-A animation library designed for Vue 3, Powered by [Motion](https://www.framer.com/motion/).
+<br>
 
-## Features
+<p align="center">
+  <a href="https://www.npmjs.com/package/motion-v" target="_blank">
+    <img src="https://img.shields.io/npm/v/motion-v.svg?style=flat-square" />
+  </a>
+  <a href="https://www.npmjs.com/package/motion-v" target="_blank">
+  <img src="https://img.shields.io/npm/dm/motion-v.svg?style=flat-square" />
+  </a>
+  <a href="https://twitter.com/motiondotdev" target="_blank">
+  <img src="https://img.shields.io/twitter/follow/framer.svg?style=social&label=Follow"  />
+  </a>
+</p>
 
-- 🎨 Declarative Animation API
-- 🔄 Gesture Animation Support
-- 🎯 Full TypeScript Support
-- ⚡️ High Performance Animation
-- 🎭 Variants Animation System
-- 👀 Viewport Animation Trigger
-- 🚪 Enter/Exit Animation Support
+<br>
+<hr>
+<br>
 
-## 🏎️ Quick start
-Install `motion-v`:
-```bash
+Motion for Vue is an open source, production-ready library that’s designed for all creative developers.
+
+It's the only animation library with a hybrid engine, combining the power of JavaScript animations with the performance of native browser APIs.
+
+It looks like this:
+
+```jsx
+<motion.div :animate="{ x: 100 }" />
+```
+
+It does all this:
+
+- Springs
+- Keyframes
+- Layout animations
+- Shared layout animations
+- Gestures (drag/tap/hover)
+- Scroll animations
+- SVG paths
+- Exit animations
+- Server-side rendering
+- Independent transforms
+- Orchestrate animations across components
+- CSS variables
+
+...and a whole lot more.
+
+## Get started
+
+### 🐇 Quick start
+
+Install `motion-v` via your package manager:
+
+```
 npm install motion-v
 ```
-## Basic Usage
+
+Then import the `motion` component:
+
 ```vue
 <script setup>
-import { Motion } from 'motion-v'
+import { motion } from 'motion-v'
 </script>
 
 <template>
-  <Motion :animate="{ x: 100 }" />
+  <motion.div :animate="{ x: 100 }" />
 </template>
 ```
 
-Read the full [docs](https://motion.seacoly.me/).
+### 💎 Contribute
+
+- Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion-vue/blob/master/CONTRIBUTING.md) has you covered.
+
+### 👩🏻‍⚖️ License
+
+- Motion for Vue is MIT licensed.
+
+## ✨ Sponsors
+
+Motion is sustainable thanks to the kind support of its sponsors.
+
+### Partners
+
+#### Framer
+
+Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
+
+<a href="https://www.framer.com?utm_source=motion-readme">
+  <img alt="Framer" src="https://github.com/user-attachments/assets/0404c7a1-c29d-4785-89ae-aae315f3c759" width="300px" height="200px">
+</a>
+
+### Platinum
+
+<a href="https://syntax.fm"><img alt="Syntax.fm" src="https://github.com/user-attachments/assets/ab852bfe-b36c-490b-b98d-4061158c4863" width="300px" height="200px"></a> <a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/29f56b1a-37fb-4695-a6a6-151f6c24864f" width="300px" height="200px"></a> <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>
+
+### Gold
+
+<a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/23cb1e37-fa67-49ad-8f77-7f4b8eaba325" width="225px" height="150px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/31436a47-951e-4eab-9a68-bdd54ccf9444" width="225px" height="150px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/4fae0c9d-de0f-4042-9cd6-e07885d028a9" width="225px" height="150px"></a>
+
+### Silver
+
+<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/07d23aa5-69db-44a0-849d-90177e6fc817" width="150px" height="100px"></a> <a href="https://statamic.com"><img alt="Statamic" src="https://github.com/user-attachments/assets/5d28f090-bdd9-4b31-b134-fb2b94ca636f" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/cba90e54-1329-4353-8fba-85beef4d2ee9" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/aa2d5586-e5e2-43b9-8446-db456e4b0758" width="150px" height="100px"></a> <a href="https://buildui.com"><img alt="Build UI" src="https://github.com/user-attachments/assets/024bfcd5-50e8-4b3d-a115-d5c6d6030d1c" width="150px" height="100px"></a> <a href="https://hover.dev"><img alt="Hover" src="https://github.com/user-attachments/assets/4715b555-d2ac-4cb7-9f35-d36d708827b3" width="150px" height="100px"></a>

package/dist/cjs/index.js

@@ -5386,8 +5386,8 @@ class Feature {
 }
 function handleHoverEvent$1(state2, event, lifecycle) {
   const props = state2.options;
-  if (props.hover) {
-    state2.setActive("hover", lifecycle === "Start");
+  if (props.whileHover) {
+    state2.setActive("whileHover", lifecycle === "Start");
   }
   const eventName = `onHover${lifecycle}`;
   const callback = props[eventName];
@@ -5427,8 +5427,8 @@ function extractEventInfo$1(event) {
 }
 function handlePressEvent(state2, event, lifecycle) {
   const props = state2.options;
-  if (props.press) {
-    state2.setActive("press", lifecycle === "Start");
+  if (props.whilePress) {
+    state2.setActive("whilePress", lifecycle === "Start");
   }
   const eventName = `onPress${lifecycle === "End" ? "" : lifecycle}`;
   const callback = props[eventName];
@@ -5463,8 +5463,8 @@ class PressGesture extends Feature {
 }
 function handleHoverEvent(state2, entry, lifecycle) {
   const props = state2.options;
-  if (props.inView) {
-    state2.setActive("inView", lifecycle === "Enter");
+  if (props.whileInView) {
+    state2.setActive("whileInView", lifecycle === "Enter");
   }
   const eventName = `onViewport${lifecycle}`;
   const callback = props[eventName];
@@ -8025,13 +8025,13 @@ class FocusGesture extends Feature {
     }
     if (!isFocusVisible)
       return;
-    this.state.setActive("focus", true);
+    this.state.setActive("whileFocus", true);
     this.isActive = true;
   }
   onBlur() {
     if (!this.isActive)
       return;
-    this.state.setActive("focus", false);
+    this.state.setActive("whileFocus", false);
     this.isActive = false;
   }
   mount() {
@@ -8119,7 +8119,7 @@ function createVisualElement(Component, options) {
 function motionEvent(name, target, isExit) {
   return new CustomEvent(name, { detail: { target, isExit } });
 }
-const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "focus", "exit"];
+const STATE_TYPES = ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
 function animateUpdates({
   controlActiveState = void 0,
   controlDelay = 0,
@@ -8129,31 +8129,34 @@ function animateUpdates({
 } = {}) {
   const prevTarget = this.target;
   this.target = { ...this.baseTarget };
-  const animationOptions = {};
+  let animationOptions = {};
   const transition = { ...this.options.transition };
   if (directAnimate)
-    resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
+    animationOptions = resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
   else
-    resolveStateAnimation.call(this, controlActiveState, animationOptions);
+    animationOptions = resolveStateAnimation.call(this, controlActiveState, transition);
   const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay);
-  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, controlActiveState, isFallback);
+  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, this.activeStates, isFallback);
   return executeAnimations.call(this, factories, getChildAnimations, childAnimations, transition, controlActiveState);
 }
-function resolveDirectAnimation(directAnimate, directTransition, animationOptions) {
+function resolveDirectAnimation(directAnimate, directTransition) {
   const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
   if (!variant)
-    return;
+    return {};
   const transition = { ...this.options.transition, ...directTransition || variant.transition };
+  const animationOptions = {};
   Object.entries(variant).forEach(([key, value]) => {
     if (key === "transition")
       return;
     this.target[key] = value;
     animationOptions[key] = getOptions(transition, key);
   });
+  return animationOptions;
 }
-function resolveStateAnimation(controlActiveState, animationOptions) {
+function resolveStateAnimation(controlActiveState, transition) {
   if (controlActiveState)
     this.activeStates = { ...this.activeStates, ...controlActiveState };
+  const transitionOptions = {};
   STATE_TYPES.forEach((name) => {
     if (!this.activeStates[name] || isAnimationControls(this.options[name]))
       return;
@@ -8161,14 +8164,15 @@ function resolveStateAnimation(controlActiveState, animationOptions) {
     const variant = resolveVariant(definition, this.options.variants, this.options.custom);
     if (!variant)
       return;
-    const transition = { ...this.options.transition, ...variant.transition };
+    Object.assign(transition, variant.transition);
     Object.entries(variant).forEach(([key, value]) => {
       if (key === "transition")
         return;
       this.target[key] = value;
-      animationOptions[key] = getOptions(transition, key);
+      transitionOptions[key] = getOptions(transition, key);
     });
   });
+  return transitionOptions;
 }
 function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
   const factories = [];
@@ -8192,7 +8196,7 @@ function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
 }
 function setupChildAnimations(transition, controlActiveState, isFallback) {
   var _a;
-  if (!((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) || controlActiveState)
+  if (!((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) || !controlActiveState)
     return { getChildAnimations: () => Promise.resolve(), childAnimations: [] };
   const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
   const maxStaggerDuration = (this.visualElement.variantChildren.size - 1) * staggerChildren;
@@ -8239,7 +8243,7 @@ function executeAnimations(factories, getChildAnimations, childAnimations, trans
   return controlActiveState ? getAnimationPromise : getAnimationPromise();
 }
 function isVariantLabels(value) {
-  return typeof value === "string" || Array.isArray(value);
+  return typeof value === "string" || value === false || Array.isArray(value);
 }
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
@@ -8262,16 +8266,16 @@ class MotionState {
     this.parent = parent;
     (_a = parent == null ? void 0 : parent.children) == null ? void 0 : _a.add(this);
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
-    const initialVariantSource = options.initial === false ? "animate" : "initial";
+    const initialVariantSource = this.context.initial === false ? "animate" : "initial";
     this.initTarget(initialVariantSource);
     this.visualElement = createVisualElement(this.options.as, {
       presenceContext: null,
       parent: parent == null ? void 0 : parent.visualElement,
       props: {
         ...this.options,
-        whileHover: this.options.hover,
-        whileTap: this.options.press,
-        whileInView: this.options.inView
+        whileHover: this.options.whileHover,
+        whileTap: this.options.whilePress,
+        whileInView: this.options.whileInView
       },
       visualState: {
         renderState: {
@@ -8446,7 +8450,15 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   props: /* @__PURE__ */ vue.mergeDefaults({
     as: {},
     asChild: { type: Boolean },
+    hover: {},
+    press: {},
+    inView: {},
+    focus: {},
     whileDrag: {},
+    whileHover: {},
+    whilePress: {},
+    whileInView: {},
+    whileFocus: {},
     custom: {},
     initial: { type: [String, Array, Object, Boolean] },
     animate: {},
@@ -8470,15 +8482,12 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     onLayoutAnimationStart: { type: Function },
     onLayoutAnimationComplete: { type: Function },
     globalPressTarget: { type: Boolean },
-    press: {},
     onPressStart: { type: Function },
     onPress: { type: Function },
     onPressCancel: { type: Function },
-    hover: {},
     onHoverStart: { type: Function },
     onHoverEnd: { type: Function },
     inViewOptions: {},
-    inView: {},
     onViewportEnter: { type: Function },
     onViewportLeave: { type: Function },
     drag: { type: [Boolean, String] },
@@ -8501,7 +8510,6 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     onPanStart: { type: Function },
     onPan: { type: Function },
     onPanEnd: { type: Function },
-    focus: {},
     onFocus: { type: Function },
     onBlur: { type: Function }
   }, {
@@ -8519,7 +8527,31 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     dragElastic: 0.5,
     dragMomentum: true,
     whileDrag: void 0,
-    crossfade: true
+    crossfade: true,
+    whileHover: ({ hover: hover2 }) => {
+      if (process.env.NODE_ENV === "development" && hover2) {
+        vue.warn("hover is deprecated. Use whileHover instead.");
+      }
+      return hover2;
+    },
+    whilePress: ({ press: press2 }) => {
+      if (process.env.NODE_ENV === "development" && press2) {
+        vue.warn("press is deprecated. Use whilePress instead.");
+      }
+      return press2;
+    },
+    whileInView: ({ inView: inView2 }) => {
+      if (process.env.NODE_ENV === "development" && inView2) {
+        vue.warn("inView is deprecated. Use whileInView instead.");
+      }
+      return inView2;
+    },
+    whileFocus: ({ focus }) => {
+      if (process.env.NODE_ENV === "development" && focus) {
+        vue.warn("focus is deprecated. Use whileFocus instead.");
+      }
+      return focus;
+    }
   }),
   setup(__props) {
     const props = __props;
@@ -8541,6 +8573,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         transition: props.transition ?? config.value.transition,
         layoutGroup,
         motionConfig: config.value,
+        inViewOptions: props.inViewOptions ?? config.value.inViewOptions,
         initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
       };
     }
@@ -8581,7 +8614,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         ...isSVG ? {} : state2.visualElement.latestValues
       };
       if (isSVG) {
-        const { attributes, style: style2 } = convertSvgStyleToAttributes(state2.target);
+        const { attributes, style: style2 } = convertSvgStyleToAttributes(state2.isMounted() ? state2.target : state2.baseTarget);
         Object.assign(attrsProps, attributes);
         Object.assign(styleProps, style2);
       }
@@ -8839,7 +8872,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   props: {
     transition: {},
     reduceMotion: { default: defaultConfig.reduceMotion },
-    nonce: {}
+    nonce: {},
+    inViewOptions: {}
   },
   setup(__props) {
     const props = __props;
@@ -8847,7 +8881,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     const config = vue.computed(() => ({
       transition: props.transition ?? parentConfig.value.transition,
       reduceMotion: props.reduceMotion ?? parentConfig.value.reduceMotion,
-      nonce: props.nonce ?? parentConfig.value.nonce
+      nonce: props.nonce ?? parentConfig.value.nonce,
+      inViewOptions: props.inViewOptions ?? parentConfig.value.inViewOptions
     }));
     provideMotionConfig(config);
     return (_ctx, _cache) => {
@@ -8904,7 +8939,15 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     values: {},
     as: { default: "ul" },
     asChild: { type: Boolean },
+    hover: {},
+    press: {},
+    inView: {},
+    focus: {},
     whileDrag: {},
+    whileHover: {},
+    whilePress: {},
+    whileInView: {},
+    whileFocus: {},
     custom: {},
     initial: { type: [String, Array, Object, Boolean] },
     animate: {},
@@ -8928,15 +8971,12 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     onLayoutAnimationStart: {},
     onLayoutAnimationComplete: {},
     globalPressTarget: { type: Boolean },
-    press: {},
     onPressStart: {},
     onPress: {},
     onPressCancel: {},
-    hover: {},
     onHoverStart: {},
     onHoverEnd: {},
     inViewOptions: {},
-    inView: {},
     onViewportEnter: {},
     onViewportLeave: {},
     drag: { type: [Boolean, String] },
@@ -8959,7 +8999,6 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     onPanStart: {},
     onPan: {},
     onPanEnd: {},
-    focus: {},
     onFocus: {},
     onBlur: {}
   },
@@ -9228,7 +9267,15 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     layout: { type: [Boolean, String], default: true },
     as: { default: "li" },
     asChild: { type: Boolean },
+    hover: { default: void 0 },
+    press: {},
+    inView: { default: void 0 },
+    focus: {},
     whileDrag: { default: void 0 },
+    whileHover: {},
+    whilePress: {},
+    whileInView: {},
+    whileFocus: {},
     custom: {},
     initial: { type: [String, Array, Object, Boolean], default: void 0 },
     animate: { default: void 0 },
@@ -9251,15 +9298,12 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     onLayoutAnimationStart: {},
     onLayoutAnimationComplete: {},
     globalPressTarget: { type: Boolean },
-    press: {},
     onPressStart: {},
     onPress: {},
     onPressCancel: {},
-    hover: { default: void 0 },
     onHoverStart: {},
     onHoverEnd: {},
     inViewOptions: {},
-    inView: { default: void 0 },
     onViewportEnter: {},
     onViewportLeave: {},
     drag: { type: [Boolean, String] },
@@ -9282,7 +9326,6 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     onPanStart: {},
     onPan: {},
     onPanEnd: {},
-    focus: {},
     onFocus: {},
     onBlur: {}
   },

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

@@ -20,8 +20,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     unwrapElement: boolean;
     anchorX: string;
 }>>>, {
-    initial: boolean;
     mode: "wait" | "popLayout" | "sync";
+    initial: boolean;
     multiple: boolean;
     unwrapElement: boolean;
     anchorX: "left" | "right";

package/dist/es/components/motion/Motion.d.ts

@@ -3,10 +3,18 @@ import { ElementType, Options, SVGAttributesWithMotionValues, SetMotionValueType
 export interface MotionProps<T extends ElementType = 'div', K = unknown> extends Options<K> {
     as?: T;
     asChild?: boolean;
+    hover?: Options['hover'];
+    press?: Options['press'];
+    inView?: Options['inView'];
+    focus?: Options['focus'];
     whileDrag?: Options['whileDrag'];
+    whileHover?: Options['whileHover'];
+    whilePress?: Options['whilePress'];
+    whileInView?: Options['whileInView'];
+    whileFocus?: Options['whileFocus'];
 }
 declare const _default: <T extends ElementType = "div", K = unknown>(__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> & (Omit<SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>[T], "asChild" | keyof Options<any>> & MotionProps<T, K>)> & import('vue').PublicProps;
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, never>, never> & (Omit<SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>[T], keyof Options<any> | "asChild"> & MotionProps<T, K>)> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {

package/dist/es/components/motion/Motion.vue.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, mergeDefaults, useAttrs, getCurrentInstance, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onBeforeUpdate, onUpdated, ref, openBlock, createBlock, unref, withCtx, renderSlot } from "vue";
+import { defineComponent, mergeDefaults, warn, useAttrs, getCurrentInstance, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onBeforeUpdate, onUpdated, ref, openBlock, createBlock, unref, withCtx, renderSlot } from "vue";
 import { injectMotion, injectLayoutGroup, provideMotion } from "../context.mjs";
 import { convertSvgStyleToAttributes, createStyles } from "../../state/style.mjs";
 import { Primitive } from "./Primitive.mjs";
@@ -17,7 +17,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: /* @__PURE__ */ mergeDefaults({
     as: {},
     asChild: { type: Boolean },
+    hover: {},
+    press: {},
+    inView: {},
+    focus: {},
     whileDrag: {},
+    whileHover: {},
+    whilePress: {},
+    whileInView: {},
+    whileFocus: {},
     custom: {},
     initial: { type: [String, Array, Object, Boolean] },
     animate: {},
@@ -41,15 +49,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onLayoutAnimationStart: { type: Function },
     onLayoutAnimationComplete: { type: Function },
     globalPressTarget: { type: Boolean },
-    press: {},
     onPressStart: { type: Function },
     onPress: { type: Function },
     onPressCancel: { type: Function },
-    hover: {},
     onHoverStart: { type: Function },
     onHoverEnd: { type: Function },
     inViewOptions: {},
-    inView: {},
     onViewportEnter: { type: Function },
     onViewportLeave: { type: Function },
     drag: { type: [Boolean, String] },
@@ -72,7 +77,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onPanStart: { type: Function },
     onPan: { type: Function },
     onPanEnd: { type: Function },
-    focus: {},
     onFocus: { type: Function },
     onBlur: { type: Function }
   }, {
@@ -90,7 +94,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     dragElastic: 0.5,
     dragMomentum: true,
     whileDrag: void 0,
-    crossfade: true
+    crossfade: true,
+    whileHover: ({ hover }) => {
+      if (process.env.NODE_ENV === "development" && hover) {
+        warn("hover is deprecated. Use whileHover instead.");
+      }
+      return hover;
+    },
+    whilePress: ({ press }) => {
+      if (process.env.NODE_ENV === "development" && press) {
+        warn("press is deprecated. Use whilePress instead.");
+      }
+      return press;
+    },
+    whileInView: ({ inView }) => {
+      if (process.env.NODE_ENV === "development" && inView) {
+        warn("inView is deprecated. Use whileInView instead.");
+      }
+      return inView;
+    },
+    whileFocus: ({ focus }) => {
+      if (process.env.NODE_ENV === "development" && focus) {
+        warn("focus is deprecated. Use whileFocus instead.");
+      }
+      return focus;
+    }
   }),
   setup(__props) {
     const props = __props;
@@ -112,6 +140,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         transition: props.transition ?? config.value.transition,
         layoutGroup,
         motionConfig: config.value,
+        inViewOptions: props.inViewOptions ?? config.value.inViewOptions,
         initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
       };
     }
@@ -152,7 +181,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ...isSVG ? {} : state.visualElement.latestValues
       };
       if (isSVG) {
-        const { attributes, style } = convertSvgStyleToAttributes(state.target);
+        const { attributes, style } = convertSvgStyleToAttributes(state.isMounted() ? state.target : state.baseTarget);
         Object.assign(attrsProps, attributes);
         Object.assign(styleProps, style);
       }

package/dist/es/components/motion-config/MotionConfig.d.ts

@@ -7,9 +7,9 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<import('./types').MotionConfigState>, {
-    reduceMotion: "user" | "never" | "always";
+    reduceMotion: "always" | "user" | "never";
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<import('./types').MotionConfigState>, {
-    reduceMotion: "user" | "never" | "always";
+    reduceMotion: "always" | "user" | "never";
 }>>>, {
     reduceMotion: "user" | "never" | "always";
 }, {}>;

package/dist/es/components/motion-config/MotionConfig.vue.mjs

@@ -9,7 +9,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     transition: {},
     reduceMotion: { default: defaultConfig.reduceMotion },
-    nonce: {}
+    nonce: {},
+    inViewOptions: {}
   },
   setup(__props) {
     const props = __props;
@@ -17,7 +18,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const config = computed(() => ({
       transition: props.transition ?? parentConfig.value.transition,
       reduceMotion: props.reduceMotion ?? parentConfig.value.reduceMotion,
-      nonce: props.nonce ?? parentConfig.value.nonce
+      nonce: props.nonce ?? parentConfig.value.nonce,
+      inViewOptions: props.inViewOptions ?? parentConfig.value.inViewOptions
     }));
     provideMotionConfig(config);
     return (_ctx, _cache) => {

package/dist/es/components/motion-config/types.d.ts

@@ -9,6 +9,8 @@ export interface MotionConfigState {
     reduceMotion?: 'user' | 'never' | 'always';
     /** Custom nonce for CSP compliance with inline styles */
     nonce?: string;
+    /** Options for the inView prop */
+    inViewOptions?: Options['inViewOptions'];
 }
 /** Props interface matching the config state */
 export type MotionConfigProps = MotionConfigState;

package/dist/es/components/reorder/Group.vue.mjs

@@ -15,7 +15,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     values: {},
     as: { default: "ul" },
     asChild: { type: Boolean },
+    hover: {},
+    press: {},
+    inView: {},
+    focus: {},
     whileDrag: {},
+    whileHover: {},
+    whilePress: {},
+    whileInView: {},
+    whileFocus: {},
     custom: {},
     initial: { type: [String, Array, Object, Boolean] },
     animate: {},
@@ -39,15 +47,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onLayoutAnimationStart: {},
     onLayoutAnimationComplete: {},
     globalPressTarget: { type: Boolean },
-    press: {},
     onPressStart: {},
     onPress: {},
     onPressCancel: {},
-    hover: {},
     onHoverStart: {},
     onHoverEnd: {},
     inViewOptions: {},
-    inView: {},
     onViewportEnter: {},
     onViewportLeave: {},
     drag: { type: [Boolean, String] },
@@ -70,7 +75,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onPanStart: {},
     onPan: {},
     onPanEnd: {},
-    focus: {},
     onFocus: {},
     onBlur: {}
   },

package/dist/es/components/reorder/Item.d.ts

@@ -46,20 +46,20 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     whileDrag: any;
     crossfade: boolean;
 }>>>, {
+    as: keyof import('vue').IntrinsicElementAttributes;
+    initial: import('../../types').VariantLabels | import('../../types').Variant | boolean;
+    animate: import('../../types').VariantLabels | import('../../types').Variant | import('../../animation/types').AnimationControls;
     layout: true | "position";
     layoutId: string;
     layoutScroll: boolean;
     layoutRoot: boolean;
     crossfade: boolean;
-    initial: import('../../types').VariantLabels | import('../../types').Variant | boolean;
-    animate: import('../../types').VariantLabels | import('../../types').Variant | import('../../animation/types').AnimationControls;
-    inView: import('../../types').VariantLabels | import('../../types').Variant;
-    hover: import('../../types').VariantLabels | import('../../types').Variant;
-    whileDrag: import('../../types').Options["whileDrag"];
+    hover: import('../../types').Options["hover"];
+    inView: import('../../types').Options["inView"];
     dragElastic: number;
     dragMomentum: boolean;
     dragListener: boolean;
-    as: keyof import('vue').IntrinsicElementAttributes;
+    whileDrag: import('../../types').Options["whileDrag"];
 }, {}>, {
     default?(_: {}): any;
 }>;

package/dist/es/components/reorder/Item.vue.mjs

@@ -15,7 +15,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     layout: { type: [Boolean, String], default: true },
     as: { default: "li" },
     asChild: { type: Boolean },
+    hover: { default: void 0 },
+    press: {},
+    inView: { default: void 0 },
+    focus: {},
     whileDrag: { default: void 0 },
+    whileHover: {},
+    whilePress: {},
+    whileInView: {},
+    whileFocus: {},
     custom: {},
     initial: { type: [String, Array, Object, Boolean], default: void 0 },
     animate: { default: void 0 },
@@ -38,15 +46,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onLayoutAnimationStart: {},
     onLayoutAnimationComplete: {},
     globalPressTarget: { type: Boolean },
-    press: {},
     onPressStart: {},
     onPress: {},
     onPressCancel: {},
-    hover: { default: void 0 },
     onHoverStart: {},
     onHoverEnd: {},
     inViewOptions: {},
-    inView: { default: void 0 },
     onViewportEnter: {},
     onViewportLeave: {},
     drag: { type: [Boolean, String] },
@@ -69,7 +74,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onPanStart: {},
     onPan: {},
     onPanEnd: {},
-    focus: {},
     onFocus: {},
     onBlur: {}
   },

package/dist/es/features/gestures/focus/index.mjs

@@ -15,13 +15,13 @@ class FocusGesture extends Feature {
     }
     if (!isFocusVisible)
       return;
-    this.state.setActive("focus", true);
+    this.state.setActive("whileFocus", true);
     this.isActive = true;
   }
   onBlur() {
     if (!this.isActive)
       return;
-    this.state.setActive("focus", false);
+    this.state.setActive("whileFocus", false);
     this.isActive = false;
   }
   mount() {

package/dist/es/features/gestures/focus/types.d.ts

@@ -1,6 +1,13 @@
 import { Variant, VariantLabels } from '../../../types';
 export type FocusProps = {
+    /**
+     * @deprecated Use `whileFocus` instead.
+     */
     focus?: VariantLabels | Variant;
+    /**
+     * Variant to apply when the element is focused.
+     */
+    whileFocus?: VariantLabels | Variant;
     onFocus?: (e: FocusEvent) => void;
     onBlur?: (e: FocusEvent) => void;
 };

package/dist/es/features/gestures/hover/index.mjs

@@ -5,8 +5,8 @@ import { frame } from "../../../external/.pnpm/framer-motion@11.16.6/external/fr
 import { extractEventInfo } from "../press/index.mjs";
 function handleHoverEvent(state, event, lifecycle) {
   const props = state.options;
-  if (props.hover) {
-    state.setActive("hover", lifecycle === "Start");
+  if (props.whileHover) {
+    state.setActive("whileHover", lifecycle === "Start");
   }
   const eventName = `onHover${lifecycle}`;
   const callback = props[eventName];

package/dist/es/features/gestures/hover/types.d.ts

@@ -2,7 +2,14 @@ import { Variant, VariantLabels } from '../../../types';
 import { EventInfo } from 'framer-motion';
 export type HoverEvent = (event: MouseEvent, info: EventInfo) => void;
 export interface HoverProps {
+    /**
+     * @deprecated Use `whileHover` instead.
+     */
     hover?: VariantLabels | Variant;
+    /**
+     * Variant to apply when the element is hovered.
+     */
+    whileHover?: VariantLabels | Variant;
     onHoverStart?: HoverEvent;
     onHoverEnd?: HoverEvent;
 }

package/dist/es/features/gestures/in-view/index.mjs

@@ -3,8 +3,8 @@ import { inView } from "../../../external/.pnpm/framer-motion@11.16.6/external/f
 import { frame } from "../../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 function handleHoverEvent(state, entry, lifecycle) {
   const props = state.options;
-  if (props.inView) {
-    state.setActive("inView", lifecycle === "Enter");
+  if (props.whileInView) {
+    state.setActive("whileInView", lifecycle === "Enter");
   }
   const eventName = `onViewport${lifecycle}`;
   const callback = props[eventName];

package/dist/es/features/gestures/in-view/types.d.ts

@@ -11,7 +11,14 @@ export interface InViewProps {
     inViewOptions?: InViewOptions & {
         once?: boolean;
     };
+    /**
+     * @deprecated Use `whileInView` instead.
+     */
     inView?: VariantLabels | Variant;
+    /**
+     * Variant to apply when the element is in view.
+     */
+    whileInView?: VariantLabels | Variant;
     onViewportEnter?: ViewportEventHandler;
     onViewportLeave?: ViewportEventHandler;
 }

package/dist/es/features/gestures/press/index.mjs

@@ -12,8 +12,8 @@ function extractEventInfo(event) {
 }
 function handlePressEvent(state, event, lifecycle) {
   const props = state.options;
-  if (props.press) {
-    state.setActive("press", lifecycle === "Start");
+  if (props.whilePress) {
+    state.setActive("whilePress", lifecycle === "Start");
   }
   const eventName = `onPress${lifecycle === "End" ? "" : lifecycle}`;
   const callback = props[eventName];

package/dist/es/features/gestures/press/types.d.ts

@@ -6,7 +6,14 @@ export interface PressProps {
      * If `true`, the press gesture will attach its start listener to window.
      */
     globalPressTarget?: boolean;
+    /**
+     * @deprecated Use `whilePress` instead.
+     */
     press?: VariantLabels | Variant;
+    /**
+     * Variant to apply when the element is pressed.
+     */
+    whilePress?: VariantLabels | Variant;
     onPressStart?: PressEvent;
     onPress?: PressEvent;
     onPressCancel?: PressEvent;

package/dist/es/state/animate-updates.d.ts

@@ -1,6 +1,6 @@
 import { $Transition, Options } from '../types';
 import { MotionState } from './motion-state';
-declare const STATE_TYPES: readonly ["initial", "animate", "inView", "hover", "press", "whileDrag", "focus", "exit"];
+declare const STATE_TYPES: readonly ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
 export type StateType = typeof STATE_TYPES[number];
 /**
  * 核心动画更新函数,处理所有动画状态变化和执行

package/dist/es/state/animate-updates.mjs

@@ -7,7 +7,7 @@ import { isAnimationControls } from "../animation/utils.mjs";
 import { animate } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animate/index.mjs";
 import { noop } from "../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/noop.mjs";
 import "../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
-const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "focus", "exit"];
+const STATE_TYPES = ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
 function animateUpdates({
   controlActiveState = void 0,
   controlDelay = 0,
@@ -17,31 +17,34 @@ function animateUpdates({
 } = {}) {
   const prevTarget = this.target;
   this.target = { ...this.baseTarget };
-  const animationOptions = {};
+  let animationOptions = {};
   const transition = { ...this.options.transition };
   if (directAnimate)
-    resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
+    animationOptions = resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
   else
-    resolveStateAnimation.call(this, controlActiveState, animationOptions);
+    animationOptions = resolveStateAnimation.call(this, controlActiveState, transition);
   const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay);
-  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, controlActiveState, isFallback);
+  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, this.activeStates, isFallback);
   return executeAnimations.call(this, factories, getChildAnimations, childAnimations, transition, controlActiveState);
 }
-function resolveDirectAnimation(directAnimate, directTransition, animationOptions) {
+function resolveDirectAnimation(directAnimate, directTransition) {
   const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
   if (!variant)
-    return;
+    return {};
   const transition = { ...this.options.transition, ...directTransition || variant.transition };
+  const animationOptions = {};
   Object.entries(variant).forEach(([key, value]) => {
     if (key === "transition")
       return;
     this.target[key] = value;
     animationOptions[key] = getOptions(transition, key);
   });
+  return animationOptions;
 }
-function resolveStateAnimation(controlActiveState, animationOptions) {
+function resolveStateAnimation(controlActiveState, transition) {
   if (controlActiveState)
     this.activeStates = { ...this.activeStates, ...controlActiveState };
+  const transitionOptions = {};
   STATE_TYPES.forEach((name) => {
     if (!this.activeStates[name] || isAnimationControls(this.options[name]))
       return;
@@ -49,14 +52,15 @@ function resolveStateAnimation(controlActiveState, animationOptions) {
     const variant = resolveVariant(definition, this.options.variants, this.options.custom);
     if (!variant)
       return;
-    const transition = { ...this.options.transition, ...variant.transition };
+    Object.assign(transition, variant.transition);
     Object.entries(variant).forEach(([key, value]) => {
       if (key === "transition")
         return;
       this.target[key] = value;
-      animationOptions[key] = getOptions(transition, key);
+      transitionOptions[key] = getOptions(transition, key);
     });
   });
+  return transitionOptions;
 }
 function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
   const factories = [];
@@ -80,7 +84,7 @@ function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
 }
 function setupChildAnimations(transition, controlActiveState, isFallback) {
   var _a;
-  if (!((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) || controlActiveState)
+  if (!((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) || !controlActiveState)
     return { getChildAnimations: () => Promise.resolve(), childAnimations: [] };
   const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
   const maxStaggerDuration = (this.visualElement.variantChildren.size - 1) * staggerChildren;

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

@@ -28,16 +28,16 @@ class MotionState {
     this.parent = parent;
     (_a = parent == null ? void 0 : parent.children) == null ? void 0 : _a.add(this);
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
-    const initialVariantSource = options.initial === false ? "animate" : "initial";
+    const initialVariantSource = this.context.initial === false ? "animate" : "initial";
     this.initTarget(initialVariantSource);
     this.visualElement = createVisualElement(this.options.as, {
       presenceContext: null,
       parent: parent == null ? void 0 : parent.visualElement,
       props: {
         ...this.options,
-        whileHover: this.options.hover,
-        whileTap: this.options.press,
-        whileInView: this.options.inView
+        whileHover: this.options.whileHover,
+        whileTap: this.options.whilePress,
+        whileInView: this.options.whileInView
       },
       visualState: {
         renderState: {

package/dist/es/state/utils/is-variant-labels.mjs

@@ -1,5 +1,5 @@
 function isVariantLabels(value) {
-  return typeof value === "string" || Array.isArray(value);
+  return typeof value === "string" || value === false || Array.isArray(value);
 }
 export {
   isVariantLabels

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

@@ -57,7 +57,7 @@ export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps,
     onUpdate?: (latest: ResolvedValues) => void;
 }
 export interface MotionStateContext {
-    initial?: VariantLabels;
+    initial?: VariantLabels | boolean;
     animate?: VariantLabels;
     inView?: VariantLabels;
     hover?: VariantLabels;

package/dist/resolver/index.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+const components = /* @__PURE__ */ new Set([
+  "Motion",
+  "AnimatePresence",
+  "LayoutGroup",
+  "MotionConfig",
+  "ReorderGroup",
+  "ReorderItem"
+]);
+function index() {
+  return {
+    type: "component",
+    resolve: (name) => {
+      if (components.has(name)) {
+        return {
+          name,
+          from: "motion-v"
+        };
+      }
+    }
+  };
+}
+
+module.exports = index;

package/dist/resolver/index.d.cts

@@ -0,0 +1,5 @@
+import { ComponentResolver } from 'unplugin-vue-components';
+
+declare function export_default(): ComponentResolver;
+
+export { export_default as default };

package/dist/resolver/index.d.mts

@@ -0,0 +1,5 @@
+import { ComponentResolver } from 'unplugin-vue-components';
+
+declare function export_default(): ComponentResolver;
+
+export { export_default as default };

package/dist/resolver/index.mjs

@@ -0,0 +1,23 @@
+const components = /* @__PURE__ */ new Set([
+  "Motion",
+  "AnimatePresence",
+  "LayoutGroup",
+  "MotionConfig",
+  "ReorderGroup",
+  "ReorderItem"
+]);
+function index() {
+  return {
+    type: "component",
+    resolve: (name) => {
+      if (components.has(name)) {
+        return {
+          name,
+          from: "motion-v"
+        };
+      }
+    }
+  };
+}
+
+export { index as default };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "motion-v",
-  "version": "0.11.0-beta.6",
+  "version": "0.11.0",
   "description": "",
   "author": "",
   "license": "MIT",
-  "homepage": "https://github.com/unovue/motion-vue",
+  "homepage": "https://github.com/motiondivision/motion-vue",
   "repository": {
     "type": "git",
-    "url": "https://github.com/unovue/motion-vue.git"
+    "url": "https://github.com/motiondivision/motion-vue.git"
   },
   "keywords": [
     "vue",
@@ -30,6 +30,16 @@
         "types": "./dist/nuxt/index.d.cts",
         "default": "./dist/nuxt/index.cjs"
       }
+    },
+    "./resolver": {
+      "import": {
+        "types": "./dist/resolver/index.d.mts",
+        "default": "./dist/resolver/index.mjs"
+      },
+      "require": {
+        "types": "./dist/resolver/index.d.cts",
+        "default": "./dist/resolver/index.cjs"
+      }
     }
   },
   "main": "./dist/cjs/index.js",