motion-v 0.13.0-beta.4 → 0.13.1-alpha.0

package/dist/cjs/index.js

@@ -4537,15 +4537,12 @@ const SVG_STYLE_TO_ATTRIBUTES = {
   cy: true,
   r: true,
   d: true,
-  x: true,
-  y: true,
   x1: true,
   y1: true,
   x2: true,
   y2: true,
   points: true,
   pathLength: true,
-  transform: true,
   viewBox: true,
   width: true,
   height: true,
@@ -4642,6 +4639,10 @@ const Primitive = vue.defineComponent({
     getProps: {
       type: Function,
       default: () => ({})
+    },
+    getAttrs: {
+      type: Function,
+      default: () => ({})
     }
   },
   setup(props, { attrs, slots }) {
@@ -4649,10 +4650,14 @@ const Primitive = vue.defineComponent({
     const SELF_CLOSING_TAGS = ["area", "img", "input"];
     return () => {
       const motionProps = props.getProps();
-      const allAttrs = { ...motionProps, ...attrs };
+      const motionAttrs = props.getAttrs();
+      let allAttrs = { ...motionAttrs, ...attrs };
       if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag))
         return vue.h(asTag, allAttrs);
       if (asTag !== "template") {
+        if (motionProps.forwardMotionProps) {
+          allAttrs = { ...motionProps, ...allAttrs };
+        }
         return vue.h(props.as, allAttrs, { default: slots.default });
       }
       return vue.h(Slot, allAttrs, { default: slots.default });
@@ -7431,7 +7436,8 @@ function animateUpdates({
   });
 }
 function resolveDirectAnimation(directAnimate, directTransition) {
-  const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
+  var _a;
+  const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom || ((_a = this.options.animatePresenceContext) == null ? void 0 : _a.custom));
   if (!variant)
     return {};
   const transition = variant.transition || directTransition || this.options.transition || {};
@@ -7779,11 +7785,13 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     whilePress: {},
     whileInView: {},
     whileFocus: {},
+    forwardMotionProps: { type: Boolean },
     custom: {},
     initial: { type: [String, Array, Object, Boolean] },
     animate: {},
     exit: {},
     variants: {},
+    inherit: { type: Boolean },
     style: {},
     transformTemplate: { type: Function },
     transition: {},
@@ -7797,6 +7805,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     layoutRoot: { type: Boolean },
     "data-framer-portal-id": {},
     crossfade: { type: Boolean },
+    layoutDependency: {},
     onBeforeLayoutMeasure: { type: Function },
     onLayoutMeasure: { type: Function },
     onLayoutAnimationStart: { type: Function },
@@ -7885,18 +7894,24 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         return `${layoutGroup.id}-${props.layoutId}`;
       return props.layoutId || void 0;
     }
-    function getMotionProps() {
+    function getProps() {
       return {
-        ...attrs,
         ...props,
         layoutId: getLayoutId(),
         transition: props.transition ?? config.value.transition,
         layoutGroup,
         motionConfig: config.value,
         inViewOptions: props.inViewOptions ?? config.value.inViewOptions,
+        animatePresenceContext,
         initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
       };
     }
+    function getMotionProps() {
+      return {
+        ...attrs,
+        ...getProps()
+      };
+    }
     const state2 = new MotionState(
       getMotionProps(),
       parentState
@@ -7922,7 +7937,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     vue.onUpdated(() => {
       state2.update(getMotionProps());
     });
-    function getProps() {
+    function getAttrs() {
       const isSVG = state2.visualElement.type === "svg";
       const attrsProps = { ...attrs };
       Object.keys(attrs).forEach((key) => {
@@ -7934,9 +7949,12 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         ...isSVG ? {} : state2.visualElement.latestValues
       };
       if (isSVG) {
-        const { attributes, style: style2 } = convertSvgStyleToAttributes(state2.isMounted() ? state2.target : state2.baseTarget);
+        const { attributes, style: style2 } = convertSvgStyleToAttributes({
+          ...state2.isMounted() ? state2.target : state2.baseTarget,
+          ...styleProps
+        });
         Object.assign(attrsProps, attributes);
-        Object.assign(styleProps, style2);
+        styleProps = style2;
       }
       if (props.drag && props.dragListener !== false) {
         Object.assign(styleProps, {
@@ -7946,10 +7964,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
           touchAction: props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`
         });
       }
-      styleProps = createStyles({
-        ...styleProps,
-        ...props.style
-      });
+      styleProps = createStyles(styleProps);
       attrsProps.style = styleProps;
       return attrsProps;
     }
@@ -7967,6 +7982,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         ref_key: "PrimitiveRef",
         ref: PrimitiveRef,
         "get-props": getProps,
+        "get-attrs": getAttrs,
         as: _ctx.as,
         "as-child": _ctx.asChild,
         "data-motion-group": ((_a = vue.unref(layoutGroup).key) == null ? void 0 : _a.value) || void 0,
@@ -7987,7 +8003,7 @@ const motion = new Proxy(_sfc_main$6, {
       return target[prop];
     let motionComponent = componentCache.get(prop);
     if (prop === "create") {
-      return (component) => {
+      return (component, { forwardMotionProps = false } = {}) => {
         return vue.defineComponent({
           inheritAttrs: false,
           name: `motion.${component.$name}`,
@@ -7995,6 +8011,7 @@ const motion = new Proxy(_sfc_main$6, {
             return () => {
               return vue.h(_sfc_main$6, {
                 ...attrs,
+                forwardMotionProps,
                 as: component,
                 asChild: false
               }, slots);
@@ -8090,7 +8107,6 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     as: {},
     custom: {},
     onExitComplete: {},
-    unwrapElement: { type: [Boolean, Function], default: false },
     anchorX: { default: "left" }
   },
   setup(__props) {
@@ -8104,6 +8120,16 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       presenceContext.initial = void 0;
     });
     const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
+    function findMotionElement(el) {
+      let current = el;
+      while (current) {
+        if (mountedStates.get(current)) {
+          return current;
+        }
+        current = current.firstElementChild;
+      }
+      return null;
+    }
     function enter(el) {
       const state2 = mountedStates.get(el);
       if (!state2) {
@@ -8121,29 +8147,28 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       exitDom.clear();
     });
     function exit(el, done) {
-      if (props.unwrapElement) {
-        if (typeof props.unwrapElement === "function") {
-          el = props.unwrapElement(el) || el;
-        } else {
-          el = el.firstElementChild || el;
+      var _a;
+      const motionEl = findMotionElement(el);
+      const state2 = mountedStates.get(motionEl);
+      if (!motionEl || !state2) {
+        done();
+        if (exitDom.size === 0) {
+          (_a = props.onExitComplete) == null ? void 0 : _a.call(props);
         }
+        return;
       }
-      const state2 = mountedStates.get(el);
-      if (!state2) {
-        return done();
-      }
-      exitDom.set(el, true);
-      removeDoneCallback(el);
+      exitDom.set(motionEl, true);
+      removeDoneCallback(motionEl);
       addPopStyle(state2);
       function doneCallback(e) {
-        var _a, _b;
-        if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
+        var _a2, _b;
+        if ((_a2 = e == null ? void 0 : e.detail) == null ? void 0 : _a2.isExit) {
           const projection = state2.visualElement.projection;
           if ((projection == null ? void 0 : projection.animationProgress) > 0 && !state2.isSafeToRemove && !state2.isVShow) {
             return;
           }
-          removeDoneCallback(el);
-          exitDom.delete(el);
+          removeDoneCallback(motionEl);
+          exitDom.delete(motionEl);
           if (exitDom.size === 0) {
             (_b = props.onExitComplete) == null ? void 0 : _b.call(props);
           }
@@ -8153,15 +8178,15 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
             removePopStyle(state2);
           }
           done();
-          if (!el.isConnected) {
+          if (!motionEl.isConnected) {
             state2.unmount(true);
           }
         }
       }
       delay(() => {
         state2.setActive("exit", true);
-        doneCallbacks.set(el, doneCallback);
-        el.addEventListener("motioncomplete", doneCallback);
+        doneCallbacks.set(motionEl, doneCallback);
+        motionEl.addEventListener("motioncomplete", doneCallback);
       });
     }
     const transitionProps = vue.computed(() => {
@@ -8273,11 +8298,13 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     whilePress: {},
     whileInView: {},
     whileFocus: {},
+    forwardMotionProps: { type: Boolean },
     custom: {},
     initial: { type: [String, Array, Object, Boolean] },
     animate: {},
     exit: {},
     variants: {},
+    inherit: { type: Boolean },
     style: {},
     transformTemplate: {},
     transition: {},
@@ -8291,6 +8318,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     layoutRoot: { type: Boolean },
     "data-framer-portal-id": {},
     crossfade: { type: Boolean },
+    layoutDependency: {},
     onBeforeLayoutMeasure: {},
     onLayoutMeasure: {},
     onLayoutAnimationStart: {},
@@ -8365,9 +8393,10 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     });
     const attrs = vue.useAttrs();
     function bindProps() {
+      const { axis: axis2, values, "onUpdate:values": onUpdateValues, ...rest } = props;
       return {
         ...attrs,
-        ...props
+        ...rest
       };
     }
     return (_ctx, _cache) => {
@@ -8614,11 +8643,13 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     whilePress: {},
     whileInView: {},
     whileFocus: {},
+    forwardMotionProps: { type: Boolean },
     custom: {},
     initial: { type: [String, Array, Object, Boolean], default: void 0 },
     animate: { default: void 0 },
     exit: {},
     variants: {},
+    inherit: { type: Boolean },
     style: {},
     transformTemplate: {},
     transition: {},
@@ -8631,6 +8662,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     layoutRoot: { type: Boolean, default: false },
     "data-framer-portal-id": {},
     crossfade: { type: Boolean, default: true },
+    layoutDependency: {},
     onBeforeLayoutMeasure: {},
     onLayoutMeasure: {},
     onLayoutAnimationStart: {},
@@ -8683,9 +8715,10 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     const { axis, registerItem, updateOrder } = context || {};
     const attrs = vue.useAttrs();
     function bindProps() {
+      const { value, ...rest } = props;
       return {
         ...attrs,
-        ...props,
+        ...rest,
         style: {
           ...style2.value,
           x: point2.x,

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

@@ -10,17 +10,14 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<AnimatePresenceProps>, {
     mode: string;
     initial: boolean;
-    unwrapElement: boolean;
     anchorX: string;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<AnimatePresenceProps>, {
     mode: string;
     initial: boolean;
-    unwrapElement: boolean;
     anchorX: string;
 }>>>, {
     initial: boolean;
     mode: "wait" | "popLayout" | "sync";
-    unwrapElement: boolean | ((el: HTMLElement) => HTMLElement);
     anchorX: "left" | "right";
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

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

@@ -15,7 +15,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     as: {},
     custom: {},
     onExitComplete: {},
-    unwrapElement: { type: [Boolean, Function], default: false },
     anchorX: { default: "left" }
   },
   setup(__props) {
@@ -29,6 +28,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       presenceContext.initial = void 0;
     });
     const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
+    function findMotionElement(el) {
+      let current = el;
+      while (current) {
+        if (mountedStates.get(current)) {
+          return current;
+        }
+        current = current.firstElementChild;
+      }
+      return null;
+    }
     function enter(el) {
       const state = mountedStates.get(el);
       if (!state) {
@@ -46,29 +55,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       exitDom.clear();
     });
     function exit(el, done) {
-      if (props.unwrapElement) {
-        if (typeof props.unwrapElement === "function") {
-          el = props.unwrapElement(el) || el;
-        } else {
-          el = el.firstElementChild || el;
+      var _a;
+      const motionEl = findMotionElement(el);
+      const state = mountedStates.get(motionEl);
+      if (!motionEl || !state) {
+        done();
+        if (exitDom.size === 0) {
+          (_a = props.onExitComplete) == null ? void 0 : _a.call(props);
         }
+        return;
       }
-      const state = mountedStates.get(el);
-      if (!state) {
-        return done();
-      }
-      exitDom.set(el, true);
-      removeDoneCallback(el);
+      exitDom.set(motionEl, true);
+      removeDoneCallback(motionEl);
       addPopStyle(state);
       function doneCallback(e) {
-        var _a, _b;
-        if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
+        var _a2, _b;
+        if ((_a2 = e == null ? void 0 : e.detail) == null ? void 0 : _a2.isExit) {
           const projection = state.visualElement.projection;
           if ((projection == null ? void 0 : projection.animationProgress) > 0 && !state.isSafeToRemove && !state.isVShow) {
             return;
           }
-          removeDoneCallback(el);
-          exitDom.delete(el);
+          removeDoneCallback(motionEl);
+          exitDom.delete(motionEl);
           if (exitDom.size === 0) {
             (_b = props.onExitComplete) == null ? void 0 : _b.call(props);
           }
@@ -78,15 +86,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             removePopStyle(state);
           }
           done();
-          if (!el.isConnected) {
+          if (!motionEl.isConnected) {
             state.unmount(true);
           }
         }
       }
       delay(() => {
         state.setActive("exit", true);
-        doneCallbacks.set(el, doneCallback);
-        el.addEventListener("motioncomplete", doneCallback);
+        doneCallbacks.set(motionEl, doneCallback);
+        motionEl.addEventListener("motioncomplete", doneCallback);
       });
     }
     const transitionProps = computed(() => {

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

@@ -4,6 +4,5 @@ export interface AnimatePresenceProps {
     as?: string;
     custom?: any;
     onExitComplete?: VoidFunction;
-    unwrapElement?: boolean | ((el: HTMLElement) => HTMLElement);
     anchorX?: 'left' | 'right';
 }

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

@@ -1,6 +1,6 @@
 import { IntrinsicElementAttributes } from 'vue';
-import { ElementType, Options, SVGAttributesWithMotionValues, SetMotionValueType } from '../../types';
-export interface MotionProps<T extends ElementType = 'div', K = unknown> extends Options<K> {
+import { AsTag, ComponentProps, Options, SVGAttributesWithMotionValues, SetMotionValueType } from '../../types';
+export interface MotionProps<T extends AsTag = 'div', K = unknown> extends Options<K> {
     as?: T;
     asChild?: boolean;
     hover?: Options['hover'];
@@ -12,9 +12,10 @@ export interface MotionProps<T extends ElementType = 'div', K = unknown> extends
     whilePress?: Options['whilePress'];
     whileInView?: Options['whileInView'];
     whileFocus?: Options['whileFocus'];
+    forwardMotionProps?: boolean;
 }
-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;
+declare const _default: <T extends AsTag = "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<T extends keyof IntrinsicElementAttributes ? SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>[T] : ComponentProps<T>, "asChild" | keyof Options<any>> & MotionProps<T, K>)> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {

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

@@ -26,11 +26,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     whilePress: {},
     whileInView: {},
     whileFocus: {},
+    forwardMotionProps: { type: Boolean },
     custom: {},
     initial: { type: [String, Array, Object, Boolean] },
     animate: {},
     exit: {},
     variants: {},
+    inherit: { type: Boolean },
     style: {},
     transformTemplate: { type: Function },
     transition: {},
@@ -44,6 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     layoutRoot: { type: Boolean },
     "data-framer-portal-id": {},
     crossfade: { type: Boolean },
+    layoutDependency: {},
     onBeforeLayoutMeasure: { type: Function },
     onLayoutMeasure: { type: Function },
     onLayoutAnimationStart: { type: Function },
@@ -132,18 +135,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return `${layoutGroup.id}-${props.layoutId}`;
       return props.layoutId || void 0;
     }
-    function getMotionProps() {
+    function getProps() {
       return {
-        ...attrs,
         ...props,
         layoutId: getLayoutId(),
         transition: props.transition ?? config.value.transition,
         layoutGroup,
         motionConfig: config.value,
         inViewOptions: props.inViewOptions ?? config.value.inViewOptions,
+        animatePresenceContext,
         initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
       };
     }
+    function getMotionProps() {
+      return {
+        ...attrs,
+        ...getProps()
+      };
+    }
     const state = new MotionState(
       getMotionProps(),
       parentState
@@ -169,7 +178,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onUpdated(() => {
       state.update(getMotionProps());
     });
-    function getProps() {
+    function getAttrs() {
       const isSVG = state.visualElement.type === "svg";
       const attrsProps = { ...attrs };
       Object.keys(attrs).forEach((key) => {
@@ -181,9 +190,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ...isSVG ? {} : state.visualElement.latestValues
       };
       if (isSVG) {
-        const { attributes, style } = convertSvgStyleToAttributes(state.isMounted() ? state.target : state.baseTarget);
+        const { attributes, style } = convertSvgStyleToAttributes({
+          ...state.isMounted() ? state.target : state.baseTarget,
+          ...styleProps
+        });
         Object.assign(attrsProps, attributes);
-        Object.assign(styleProps, style);
+        styleProps = style;
       }
       if (props.drag && props.dragListener !== false) {
         Object.assign(styleProps, {
@@ -193,10 +205,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           touchAction: props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`
         });
       }
-      styleProps = createStyles({
-        ...styleProps,
-        ...props.style
-      });
+      styleProps = createStyles(styleProps);
       attrsProps.style = styleProps;
       return attrsProps;
     }
@@ -214,6 +223,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "PrimitiveRef",
         ref: PrimitiveRef,
         "get-props": getProps,
+        "get-attrs": getAttrs,
         as: _ctx.as,
         "as-child": _ctx.asChild,
         "data-motion-group": ((_a = unref(layoutGroup).key) == null ? void 0 : _a.value) || void 0,

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

@@ -1,9 +1,10 @@
-import { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes, IntrinsicElementAttributes } from 'vue';
+import { DefineComponent, IntrinsicElementAttributes } from 'vue';
 import { MotionProps } from './Motion';
-import { MotionHTMLAttributes } from '../../types';
-type ComponentProps<T> = T extends DefineComponent<ExtractPropTypes<infer Props>, any, any> ? ExtractPublicPropTypes<Props> : never;
+import { ComponentProps, MotionHTMLAttributes } from '../../types';
 type MotionComponentProps = {
-    create: <T extends DefineComponent>(T: any) => DefineComponent<MotionProps<any, unknown> & ComponentProps<T>>;
+    create: <T extends DefineComponent>(T: any, options?: {
+        forwardMotionProps?: boolean;
+    }) => DefineComponent<MotionProps<any, unknown> & ComponentProps<T>>;
 };
 type MotionNameSpace = {
     [K in keyof IntrinsicElementAttributes]: DefineComponent<MotionProps<K, unknown> & MotionHTMLAttributes<K>>;

package/dist/es/components/motion/NameSpace.mjs

@@ -7,7 +7,7 @@ const motion = new Proxy(_sfc_main, {
       return target[prop];
     let motionComponent = componentCache.get(prop);
     if (prop === "create") {
-      return (component) => {
+      return (component, { forwardMotionProps = false } = {}) => {
         return defineComponent({
           inheritAttrs: false,
           name: `motion.${component.$name}`,
@@ -15,6 +15,7 @@ const motion = new Proxy(_sfc_main, {
             return () => {
               return h(_sfc_main, {
                 ...attrs,
+                forwardMotionProps,
                 as: component,
                 asChild: false
               }, slots);

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

@@ -1,5 +1,5 @@
-import { Component, IntrinsicElementAttributes, PropType } from 'vue';
-export type AsTag = keyof IntrinsicElementAttributes | ({} & string);
+import { Component, PropType } from 'vue';
+import { AsTag } from '../../types';
 export interface PrimitiveProps {
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
@@ -26,6 +26,10 @@ export declare const Primitive: import('vue').DefineComponent<{
         type: FunctionConstructor;
         default: () => {};
     };
+    getAttrs: {
+        type: FunctionConstructor;
+        default: () => {};
+    };
 }, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -41,8 +45,13 @@ export declare const Primitive: import('vue').DefineComponent<{
         type: FunctionConstructor;
         default: () => {};
     };
+    getAttrs: {
+        type: FunctionConstructor;
+        default: () => {};
+    };
 }>>, {
     as: AsTag;
     asChild: boolean;
     getProps: Function;
+    getAttrs: Function;
 }, {}>;

package/dist/es/components/motion/Primitive.mjs

@@ -15,6 +15,10 @@ const Primitive = defineComponent({
     getProps: {
       type: Function,
       default: () => ({})
+    },
+    getAttrs: {
+      type: Function,
+      default: () => ({})
     }
   },
   setup(props, { attrs, slots }) {
@@ -22,10 +26,14 @@ const Primitive = defineComponent({
     const SELF_CLOSING_TAGS = ["area", "img", "input"];
     return () => {
       const motionProps = props.getProps();
-      const allAttrs = { ...motionProps, ...attrs };
+      const motionAttrs = props.getAttrs();
+      let allAttrs = { ...motionAttrs, ...attrs };
       if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag))
         return h(asTag, allAttrs);
       if (asTag !== "template") {
+        if (motionProps.forwardMotionProps) {
+          allAttrs = { ...motionProps, ...allAttrs };
+        }
         return h(props.as, allAttrs, { default: slots.default });
       }
       return h(Slot, allAttrs, { default: slots.default });