motion-plus-vue 1.1.0 → 1.1.1

package/dist/cjs/index.js

@@ -6,4 +6,4 @@
       [data-motion-cursor="pointer"] {
           background-color: #333;
       }
-    `,document.head.appendChild(n),()=>{document.head.removeChild(n)}}function de(n){e.watch(n,(t,o,i)=>{const r=t?fe():s.noop;return i(()=>{r()})})}function R(n){return t=>{t.pointerType==="mouse"&&n(t)}}function F(n){return R(t=>{t.button===0&&n(t)})}let T,_;function pe(){T=s.motionValue(0),_=s.motionValue(0);let n=0,t=0;function o(){T.set(n),_.set(t)}typeof window<"u"&&window.addEventListener("pointermove",R(i=>{n=i.clientX,t=i.clientY,s.frame.update(o)}))}function j(){return T||pe(),{x:T,y:_}}function me(n,t){return{x:s.useTransform(()=>n.x.get()+t.value.x),y:s.useTransform(()=>n.y.get()+t.value.y)}}function ye(n){return n.closest("[data-cursor]")}function ge(n){return n.closest('a, button, input[type="button"]:not(:disabled)')}function ve(n){return window.getComputedStyle(n).userSelect==="none"?null:n.closest("p, textarea:not(:disabled), input[type='text']:not(:disabled), h1, h2, h3, h4, h5, h6")}function he(n){let t=ye(n);return t?[t.dataset.cursor,t]:(t=ge(n),t?["pointer",t]:(t=ve(n),t?["text",t]:["default",null]))}let M=null,C={type:"default",isPressed:!1,fontSize:null,targetBoundingBox:null,target:null,theme:null};function we(n){let t=null;if("closest"in n){const o=n.closest("[data-cursor-theme]");o instanceof HTMLElement&&(t=o.dataset.cursorTheme||null)}return t}function xe(){if(typeof window>"u")return{onChange:()=>()=>{}};const n=new Set;function t(f){C={...C,...f},n.forEach(h=>h(C))}const o=F(()=>{C.isPressed||t({isPressed:!0})}),i=F(()=>{C.isPressed&&t({isPressed:!1})}),r=R(({target:f})=>{if(!f)return;const[h,g]=he(f);let v=!1;const u={target:g,theme:we(f)};h!==C.type&&(u.type=h,v=!0),u.theme!==C.theme&&(C.theme=u.theme,v=!0);const l=h==="pointer"&&g?g.getBoundingClientRect():null;if(l!==C.targetBoundingBox&&(u.targetBoundingBox=l,v=!0),h==="text"){const{fontSize:p}=window.getComputedStyle(f),w=p?parseInt(p):null;w!==C.fontSize&&(u.fontSize=w,v=!0)}else C.fontSize&&(u.fontSize=null,v=!0);v&&t(u)});function a(){typeof window>"u"||(window.addEventListener("pointerover",r),window.addEventListener("pointerdown",o),window.addEventListener("pointerup",i))}function d(){window.removeEventListener("pointerover",r),window.removeEventListener("pointerdown",o),window.removeEventListener("pointerup",i)}return{onChange:f=>(n.size||a(),n.add(f),()=>{n.delete(f),n.size||d()})}}function ke(){return M||(M=xe()),M}function A(){const n=e.ref({...C});return e.watch(n,()=>ke().onChange(t=>{n.value=t}),{immediate:!0,flush:"post"}),n}let V=null;function Be(){const n=new Set;function t(){n.forEach(a=>a.show())}function o(){n.forEach(a=>a.hide())}function i(){document.body.addEventListener("mouseenter",t),document.body.addEventListener("mouseleave",o)}function r(){document.body.removeEventListener("mouseenter",t),document.body.removeEventListener("mouseleave",o)}return{on:a=>typeof window>"u"?s.noop:(n.size||i(),n.add(a),()=>{n.delete(a),n.size===0&&r()})}}function Ce(){return V||(V=Be()),V}function Q(n){const t=e.ref(!0);return e.watch(t,()=>Ce().on({show:()=>{t.value||(n(),t.value=!0)},hide:()=>t.value=!1}),{immediate:!0}),t}const H={x:0,y:0},Se={x:.5,y:.5},Pe={duration:0},be={stiffness:1e3,damping:100},$e={duration:.15,ease:[.38,.12,.29,1]},W={magneticOptions:{morph:!0,padding:5,snap:.8}},X=17,Y=31,K=4,Ee=20;function z(n,t,o){const i={width:(o==null?void 0:o.width)??n,height:(o==null?void 0:o.height)??t};return typeof i.width=="number"&&(i.width=`${i.width}px`),typeof i.height=="number"&&(i.height=`${i.height}px`),i}function Ie({type:n,state:t,hasChildren:o,style:i,isMagnetic:r,magneticOptions:a,matchTextSize:d}){const f=r&&t.targetBoundingBox;if(o&&!f)return z("auto","auto",i);const{padding:h,morph:g}=a;switch(n){case"pointer":if(r&&g&&t.targetBoundingBox){const{width:v,height:u}=t.targetBoundingBox;return{width:`${v+h*2}px`,height:`${u+h*2}px`}}return z(Y,Y,i);case"text":return d&&t.fontSize?{width:`${K}px`,height:`${t.fontSize}px`}:z(K,Ee,i);default:return z(X,X,i)}}function ze({x:n,y:t},o){const i=e.ref(n.prev!==void 0||t.prev!==void 0);return e.watch(i,()=>{if(i.value)return;const r=()=>{i.value=!0,o(),a()},a=s.pipe(n.on("change",r),t.on("change",r));return()=>a()},{immediate:!0}),i}function Te(n,t,o){return s.useTransform(()=>s.mix(n.value.get(),t.get(),o.get()))}function G(n,t,o){const i=s.useSpring(0,{stiffness:600,damping:50}),r=s.useMotionValue(0),a=Te(n,i,r);return e.watch(()=>o==null?void 0:o.value,(d,f)=>{d?(!f&&!r.isAnimating()?i.jump(d):i.set(d),s.animate(r,t.value||0)):s.animate(r,0)},{immediate:!0,flush:"sync"}),a}function Me(n,t,o,i){const r=G(e.computed(()=>n.value.x),i,e.computed(()=>o.value.targetBoundingBox?o.value.targetBoundingBox.left+o.value.targetBoundingBox.width/2:void 0)),a=G(e.computed(()=>n.value.y),i,e.computed(()=>o.value.targetBoundingBox?o.value.targetBoundingBox.top+o.value.targetBoundingBox.height/2:void 0));return e.computed(()=>t?{x:r,y:a}:n.value)}const Ve=e.defineComponent({name:"Cursor",inheritAttrs:!1,__name:"Cursor",props:{follow:{type:Boolean,default:!1},center:{default:({follow:n})=>n?H:Se},offset:{default:()=>H},spring:{type:[Boolean,Object],default:({follow:n})=>n?be:!1},matchTextSize:{type:Boolean,default:!0},magnetic:{type:[Boolean,Object],default:!1},transition:{},variants:{},style:{},show:{type:Boolean,default:!0}},setup(n){const t=n,{offset:o,magnetic:i}=e.toRefs(t),r=s.useReducedMotion();de(()=>!r.value&&!t.follow);const a=j(),d=me(a,o),f=s.useSpring(d.x,t.spring||void 0),h=s.useSpring(d.y,t.spring||void 0),g=e.computed(()=>typeof t.magnetic=="object"?{...W.magneticOptions,...t.magnetic}:W.magneticOptions);function v(){const c=d.x.on("change",B=>{f.jump(B),c()}),k=d.y.on("change",B=>{h.jump(B),k()})}const u=A(),l=Q(v),p=Me(e.computed(()=>t.spring?{x:f,y:h}:a),e.computed(()=>!!i.value),u,e.computed(()=>g.value&&g.value.snap)),w=e.useSlots(),P=e.computed(()=>{var B,$;const c=($=(B=w.default)==null?void 0:B.call(w))==null?void 0:$.filter(O=>O.type!==Symbol.for("v-cmt"));return Ie({type:u.value.type,state:u.value,hasChildren:!!(c!=null&&c.length),isMagnetic:!!t.magnetic,style:t.style,magneticOptions:g.value,matchTextSize:t.matchTextSize})}),y=ze(a,v);function x(c){return(k,B)=>`translate(-${c.x*100}%, -${c.y*100}%) ${B}`}function m(){const{follow:c,center:k,offset:B,spring:$,matchTextSize:O,magnetic:Ne,...ee}=t;return ee}return(c,k)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.unref(y)?(e.openBlock(),e.createBlock(e.unref(s.LayoutGroup),{key:0},{default:e.withCtx(()=>[e.createVNode(e.unref(s.MotionConfig),{transition:e.unref(r)?e.unref(Pe):c.transition||e.unref($e)},{default:e.withCtx(()=>{var B,$;return[e.createVNode(e.unref(s.motion).div,e.mergeProps({layout:"","data-motion-cursor":c.follow?"follow":"pointer","data-framer-portal-id":"motion-cursor",initial:"exit",exit:"exit"},{...c.$attrs,...m()},{variants:{pressed:c.follow?{}:{scale:.9},...c.variants,default:{opacity:1,scale:1,...(B=c.variants)==null?void 0:B.default},exit:{opacity:0,scale:0,...($=c.variants)==null?void 0:$.exit}},animate:["default",e.unref(u).type,!e.unref(l)||!c.show?"exit":e.unref(u).isPressed?"pressed":""],"transform-template":x(c.center),style:{borderRadius:c.follow?0:20,zIndex:c.follow?99998:99999,willChange:"transform",contain:"layout",originX:c.center.x,originY:c.center.y,...c.style,width:P.value.width,height:P.value.height,x:e.unref(p).x,y:e.unref(p).y,top:0,left:0,position:"fixed",pointerEvents:"none"}}),{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default")]),_:3},16,["data-motion-cursor","variants","animate","transform-template","style"])]}),_:3},8,["transition"])]),_:3})):e.createCommentVNode("",!0)]))}});function U(n,t,o){const i=s.useMotionValue(0),r=s.useMotionValue(0),a=s.useMotionValue(0);return e.watch(()=>o,d=>{if(typeof d=="number"){s.animate(a,1);const f=()=>{r.set(t*(n.get()-d))};return f(),n.on("change",f)}else s.animate(a,0)},{immediate:!0,flush:"post"}),s.useTransform(()=>s.mix(i.get(),r.get(),a.get()))}function Le(n,t=.1){const o=A(),i=j(),r=e.computed(()=>o.value.targetBoundingBox&&o.value.target===n.value),a=U(i.x,t,r.value?o.value.targetBoundingBox.left+o.value.targetBoundingBox.width/2:void 0),d=U(i.y,t,r.value?o.value.targetBoundingBox.top+o.value.targetBoundingBox.height/2:void 0);return{x:a,y:d}}exports.AnimateNumber=ce;exports.Cursor=Ve;exports.useCursorIsInView=Q;exports.useCursorState=A;exports.useMagneticPull=Le;exports.usePointerPosition=j;
+    `,document.head.appendChild(n),()=>{document.head.removeChild(n)}}function de(n){e.watch(n,(t,o,i)=>{const r=t?fe():s.noop;return i(()=>{r()})})}function R(n){return t=>{t.pointerType==="mouse"&&n(t)}}function F(n){return R(t=>{t.button===0&&n(t)})}let T,_;function pe(){T=s.motionValue(0),_=s.motionValue(0);let n=0,t=0;function o(){T.set(n),_.set(t)}typeof window<"u"&&window.addEventListener("pointermove",R(i=>{n=i.clientX,t=i.clientY,s.frame.update(o)}))}function j(){return T||pe(),{x:T,y:_}}function me(n,t){return{x:s.useTransform(()=>n.x.get()+t.value.x),y:s.useTransform(()=>n.y.get()+t.value.y)}}function ye(n){return n.closest("[data-cursor]")}function ge(n){return n.closest('a, button, input[type="button"]:not(:disabled)')}function ve(n){return window.getComputedStyle(n).userSelect==="none"?null:n.closest("p, textarea:not(:disabled), input[type='text']:not(:disabled), h1, h2, h3, h4, h5, h6")}function he(n){let t=ye(n);return t?[t.dataset.cursor,t]:(t=ge(n),t?["pointer",t]:(t=ve(n),t?["text",t]:["default",null]))}let M=null,C={type:"default",isPressed:!1,fontSize:null,targetBoundingBox:null,target:null,theme:null};function we(n){let t=null;if("closest"in n){const o=n.closest("[data-cursor-theme]");o instanceof HTMLElement&&(t=o.dataset.cursorTheme||null)}return t}function xe(){if(typeof window>"u")return{onChange:()=>()=>{}};const n=new Set;function t(f){C={...C,...f},n.forEach(h=>h(C))}const o=F(()=>{C.isPressed||t({isPressed:!0})}),i=F(()=>{C.isPressed&&t({isPressed:!1})}),r=R(({target:f})=>{if(!f)return;const[h,g]=he(f);let v=!1;const u={target:g,theme:we(f)};h!==C.type&&(u.type=h,v=!0),u.theme!==C.theme&&(C.theme=u.theme,v=!0);const l=h==="pointer"&&g?g.getBoundingClientRect():null;if(l!==C.targetBoundingBox&&(u.targetBoundingBox=l,v=!0),h==="text"){const{fontSize:p}=window.getComputedStyle(f),w=p?parseInt(p):null;w!==C.fontSize&&(u.fontSize=w,v=!0)}else C.fontSize&&(u.fontSize=null,v=!0);v&&t(u)});function a(){typeof window>"u"||(window.addEventListener("pointerover",r),window.addEventListener("pointerdown",o),window.addEventListener("pointerup",i))}function d(){window.removeEventListener("pointerover",r),window.removeEventListener("pointerdown",o),window.removeEventListener("pointerup",i)}return{onChange:f=>(n.size||a(),n.add(f),()=>{n.delete(f),n.size||d()})}}function ke(){return M||(M=xe()),M}function A(){const n=e.ref({...C});return e.watch(n,()=>ke().onChange(t=>{n.value=t}),{immediate:!0,flush:"post"}),n}let V=null;function Be(){const n=new Set;function t(){n.forEach(a=>a.show())}function o(){n.forEach(a=>a.hide())}function i(){document.body.addEventListener("mouseenter",t),document.body.addEventListener("mouseleave",o)}function r(){document.body.removeEventListener("mouseenter",t),document.body.removeEventListener("mouseleave",o)}return{on:a=>typeof window>"u"?s.noop:(n.size||i(),n.add(a),()=>{n.delete(a),n.size===0&&r()})}}function Ce(){return V||(V=Be()),V}function Q(n){const t=e.ref(!0);return e.watch(t,()=>Ce().on({show:()=>{t.value||(n(),t.value=!0)},hide:()=>t.value=!1}),{immediate:!0}),t}const H={x:0,y:0},Se={x:.5,y:.5},Pe={duration:0},be={stiffness:1e3,damping:100},$e={duration:.15,ease:[.38,.12,.29,1]},W={magneticOptions:{morph:!0,padding:5,snap:.8}},X=17,Y=31,K=4,Ee=20;function z(n,t,o){const i={width:(o==null?void 0:o.width)??n,height:(o==null?void 0:o.height)??t};return typeof i.width=="number"&&(i.width=`${i.width}px`),typeof i.height=="number"&&(i.height=`${i.height}px`),i}function Ie({type:n,state:t,hasChildren:o,style:i,isMagnetic:r,magneticOptions:a,matchTextSize:d}){const f=r&&t.targetBoundingBox;if(o&&!f)return z("auto","auto",i);const{padding:h,morph:g}=a;switch(n){case"pointer":if(r&&g&&t.targetBoundingBox){const{width:v,height:u}=t.targetBoundingBox;return{width:`${v+h*2}px`,height:`${u+h*2}px`}}return z(Y,Y,i);case"text":return d&&t.fontSize?{width:`${K}px`,height:`${t.fontSize}px`}:z(K,Ee,i);default:return z(X,X,i)}}function ze({x:n,y:t},o){const i=e.ref(n.prev!==void 0||t.prev!==void 0);return e.watch(i,()=>{if(i.value)return;const r=()=>{i.value=!0,o(),a()},a=s.pipe(n.on("change",r),t.on("change",r));return()=>a()},{immediate:!0}),i}function Te(n,t,o){return s.useTransform(()=>s.mix(n.value.get(),t.get(),o.get()))}function G(n,t,o){const i=s.useSpring(0,{stiffness:600,damping:50}),r=s.useMotionValue(0),a=Te(n,i,r);return e.watch(()=>o==null?void 0:o.value,(d,f)=>{d?(!f&&!r.isAnimating()?i.jump(d):i.set(d),s.animate(r,t.value||0)):s.animate(r,0)},{immediate:!0,flush:"sync"}),a}function Me(n,t,o,i){const r=G(e.computed(()=>n.value.x),i,e.computed(()=>o.value.targetBoundingBox?o.value.targetBoundingBox.left+o.value.targetBoundingBox.width/2:void 0)),a=G(e.computed(()=>n.value.y),i,e.computed(()=>o.value.targetBoundingBox?o.value.targetBoundingBox.top+o.value.targetBoundingBox.height/2:void 0));return e.computed(()=>t?{x:r,y:a}:n.value)}const Ve=e.defineComponent({name:"Cursor",inheritAttrs:!1,__name:"Cursor",props:{follow:{type:Boolean,default:!1},center:{default:({follow:n})=>n?H:Se},offset:{default:()=>H},spring:{type:[Boolean,Object],default:({follow:n})=>n?be:!1},matchTextSize:{type:Boolean,default:!0},magnetic:{type:[Boolean,Object],default:!1},transition:{},variants:{},style:{},show:{type:Boolean,default:!0}},setup(n){const t=n,{offset:o,magnetic:i}=e.toRefs(t),r=s.useReducedMotion();de(()=>!r.value&&!t.follow);const a=j(),d=me(a,o),f=s.useSpring(d.x,t.spring||void 0),h=s.useSpring(d.y,t.spring||void 0),g=e.computed(()=>typeof t.magnetic=="object"?{...W.magneticOptions,...t.magnetic}:W.magneticOptions);function v(){const c=d.x.on("change",B=>{f.jump(B),c()}),k=d.y.on("change",B=>{h.jump(B),k()})}const u=A(),l=Q(v),p=Me(e.computed(()=>t.spring?{x:f,y:h}:a),e.computed(()=>!!i.value),u,e.computed(()=>g.value&&g.value.snap)),w=e.useSlots(),P=e.computed(()=>{var B,$;const c=($=(B=w.default)==null?void 0:B.call(w))==null?void 0:$.filter(O=>O.type!==Symbol.for("v-cmt"));return Ie({type:u.value.type,state:u.value,hasChildren:!!(c!=null&&c.length),isMagnetic:!!t.magnetic,style:t.style,magneticOptions:g.value,matchTextSize:t.matchTextSize})}),y=ze(a,v);function x(c){return(k,B)=>`translate(-${c.x*100}%, -${c.y*100}%) ${B}`}function m(){const{follow:c,center:k,offset:B,spring:$,matchTextSize:O,magnetic:Ne,...ee}=t;return ee}return(c,k)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.unref(y)?(e.openBlock(),e.createBlock(e.unref(s.LayoutGroup),{key:0},{default:e.withCtx(()=>[e.createVNode(e.unref(s.MotionConfig),{transition:e.unref(r)?e.unref(Pe):c.transition||e.unref($e)},{default:e.withCtx(()=>{var B,$;return[e.createVNode(e.unref(s.motion).div,e.mergeProps({layout:"","data-motion-cursor":c.follow?"follow":"pointer","data-framer-portal-id":"motion-cursor",initial:"exit",exit:"exit"},{...c.$attrs,...m()},{variants:{pressed:c.follow?{}:{scale:.9},...c.variants,default:{opacity:1,scale:1,...(B=c.variants)==null?void 0:B.default},exit:{opacity:0,scale:0,...($=c.variants)==null?void 0:$.exit}},animate:["default",e.unref(u).type,e.unref(i)&&e.unref(u).targetBoundingBox?"magnetic":"",!e.unref(l)||!c.show?"exit":e.unref(u).isPressed?"pressed":""],"transform-template":x(c.center),style:{borderRadius:c.follow?0:20,zIndex:c.follow?99998:99999,willChange:"transform",contain:"layout",originX:c.center.x,originY:c.center.y,...c.style,width:P.value.width,height:P.value.height,x:e.unref(p).x,y:e.unref(p).y,top:0,left:0,position:"fixed",pointerEvents:"none"}}),{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default")]),_:3},16,["data-motion-cursor","variants","animate","transform-template","style"])]}),_:3},8,["transition"])]),_:3})):e.createCommentVNode("",!0)]))}});function U(n,t,o){const i=s.useMotionValue(0),r=s.useMotionValue(0),a=s.useMotionValue(0);return e.watch(()=>o==null?void 0:o.value,d=>{if(typeof d=="number"){s.animate(a,1);const f=()=>{r.set(t*(n.get()-d))};return f(),n.on("change",f)}else s.animate(a,0)},{immediate:!0,flush:"post"}),s.useTransform(()=>s.mix(i.get(),r.get(),a.get()))}function Le(n,t=.1){const o=A(),i=j(),r=e.computed(()=>o.value.targetBoundingBox&&o.value.target===n.value),a=U(i.x,t,e.computed(()=>r.value?o.value.targetBoundingBox.left+o.value.targetBoundingBox.width/2:void 0)),d=U(i.y,t,e.computed(()=>r.value?o.value.targetBoundingBox.top+o.value.targetBoundingBox.height/2:void 0));return{x:a,y:d}}exports.AnimateNumber=ce;exports.Cursor=Ve;exports.useCursorIsInView=Q;exports.useCursorState=A;exports.useMagneticPull=Le;exports.usePointerPosition=j;

package/dist/components/Cursor/Cursor.d.ts

@@ -14,6 +14,7 @@ export interface CursorProps extends HTMMotionProps {
     style?: MotionProps['style'];
     show?: boolean;
 }
+declare const magnetic: import('vue').Ref<boolean | Partial<MagneticOptions>, boolean | Partial<MagneticOptions>>;
 declare const shouldReduceMotion: import('vue').Ref<boolean, boolean>;
 declare const state: import('vue').Ref<import('./hooks/use-cursor-state/types').CursorState, import('./hooks/use-cursor-state/types').CursorState>;
 declare const isInView: import('vue').Ref<boolean, boolean>;
@@ -36,6 +37,7 @@ declare const __VLS_self: import('vue').DefineComponent<CursorProps, {
     motion: typeof motion;
     defaultTransition: typeof defaultTransition;
     skipTransition: typeof skipTransition;
+    magnetic: typeof magnetic;
     shouldReduceMotion: typeof shouldReduceMotion;
     state: typeof state;
     isInView: typeof isInView;

package/dist/es/components/Cursor/Cursor.vue.mjs

@@ -1,11 +1,11 @@
-import { defineComponent as R, toRefs as V, computed as l, useSlots as X, createBlock as C, openBlock as z, Teleport as Y, createCommentVNode as H, unref as o, withCtx as c, createVNode as T, mergeProps as L, renderSlot as N } from "vue";
-import { useReducedMotion as A, useSpring as B, LayoutGroup as E, MotionConfig as F, motion as G } from "motion-v";
+import { defineComponent as R, toRefs as V, computed as l, useSlots as X, createBlock as B, openBlock as z, Teleport as Y, createCommentVNode as H, unref as t, withCtx as c, createVNode as T, mergeProps as L, renderSlot as N } from "vue";
+import { useReducedMotion as A, useSpring as x, LayoutGroup as E, MotionConfig as F, motion as G } from "motion-v";
 import { useCursorStyles as q } from "./use-cursor-styles.mjs";
 import { usePointerPosition as D } from "./hooks/use-pointer-position.mjs";
 import { useOffset as J } from "./hooks/use-offset.mjs";
 import { useCursorState as K } from "./hooks/use-cursor-state/index.mjs";
 import { useCursorIsInView as Q } from "./hooks/use-cursor-in-view.mjs";
-import { defaultFollowSpring as U, topLeftPoint as P, centerPoint as W, defaults as x, skipTransition as Z, defaultTransition as _ } from "./config.mjs";
+import { defaultFollowSpring as U, topLeftPoint as P, centerPoint as W, defaults as M, skipTransition as Z, defaultTransition as _ } from "./config.mjs";
 import { getCursorSize as ee } from "./get-cursor-size.mjs";
 import { useHasPointerMoved as te } from "./hooks/use-has-pointer-moved.mjs";
 import { useMagneticTarget as oe } from "./magnetic/use-magnetic-target.mjs";
@@ -15,9 +15,9 @@ const ge = /* @__PURE__ */ R({
   __name: "Cursor",
   props: {
     follow: { type: Boolean, default: !1 },
-    center: { default: ({ follow: i }) => i ? P : W },
+    center: { default: ({ follow: r }) => r ? P : W },
     offset: { default: () => P },
-    spring: { type: [Boolean, Object], default: ({ follow: i }) => i ? U : !1 },
+    spring: { type: [Boolean, Object], default: ({ follow: r }) => r ? U : !1 },
     matchTextSize: { type: Boolean, default: !0 },
     magnetic: { type: [Boolean, Object], default: !1 },
     transition: {},
@@ -25,54 +25,54 @@ const ge = /* @__PURE__ */ R({
     style: {},
     show: { type: Boolean, default: !0 }
   },
-  setup(i) {
-    const n = i, { offset: M, magnetic: O } = V(n), d = A();
-    q(() => !d.value && !n.follow);
-    const u = D(), f = J(u, M), g = B(f.x, n.spring || void 0), y = B(f.y, n.spring || void 0), p = l(() => typeof n.magnetic == "object" ? { ...x.magneticOptions, ...n.magnetic } : x.magneticOptions);
-    function v() {
-      const e = f.x.on("change", (t) => {
-        g.jump(t), e();
-      }), a = f.y.on("change", (t) => {
-        y.jump(t), a();
+  setup(r) {
+    const n = r, { offset: O, magnetic: d } = V(n), g = A();
+    q(() => !g.value && !n.follow);
+    const u = D(), f = J(u, O), y = x(f.x, n.spring || void 0), v = x(f.y, n.spring || void 0), p = l(() => typeof n.magnetic == "object" ? { ...M.magneticOptions, ...n.magnetic } : M.magneticOptions);
+    function h() {
+      const e = f.x.on("change", (o) => {
+        y.jump(o), e();
+      }), a = f.y.on("change", (o) => {
+        v.jump(o), a();
       });
     }
-    const r = K(), b = Q(v), h = oe(
-      l(() => n.spring ? { x: g, y } : u),
-      l(() => !!O.value),
-      r,
+    const i = K(), b = Q(h), w = oe(
+      l(() => n.spring ? { x: y, y: v } : u),
+      l(() => !!d.value),
+      i,
       l(() => p.value && p.value.snap)
-    ), m = X(), w = l(() => {
-      var t, s;
-      const e = (s = (t = m.default) == null ? void 0 : t.call(m)) == null ? void 0 : s.filter(
-        (S) => S.type !== Symbol.for("v-cmt")
+    ), m = X(), S = l(() => {
+      var o, s;
+      const e = (s = (o = m.default) == null ? void 0 : o.call(m)) == null ? void 0 : s.filter(
+        (C) => C.type !== Symbol.for("v-cmt")
       );
       return ee({
-        type: r.value.type,
-        state: r.value,
+        type: i.value.type,
+        state: i.value,
         hasChildren: !!(e != null && e.length),
         isMagnetic: !!n.magnetic,
         style: n.style,
         magneticOptions: p.value,
         matchTextSize: n.matchTextSize
       });
-    }), j = te(u, v);
+    }), j = te(u, h);
     function $(e) {
-      return (a, t) => `translate(-${e.x * 100}%, -${e.y * 100}%) ${t}`;
+      return (a, o) => `translate(-${e.x * 100}%, -${e.y * 100}%) ${o}`;
     }
     function k() {
-      const { follow: e, center: a, offset: t, spring: s, matchTextSize: S, magnetic: ne, ...I } = n;
+      const { follow: e, center: a, offset: o, spring: s, matchTextSize: C, magnetic: ne, ...I } = n;
       return I;
     }
-    return (e, a) => (z(), C(Y, { to: "body" }, [
-      o(j) ? (z(), C(o(E), { key: 0 }, {
+    return (e, a) => (z(), B(Y, { to: "body" }, [
+      t(j) ? (z(), B(t(E), { key: 0 }, {
         default: c(() => [
-          T(o(F), {
-            transition: o(d) ? o(Z) : e.transition || o(_)
+          T(t(F), {
+            transition: t(g) ? t(Z) : e.transition || t(_)
           }, {
             default: c(() => {
-              var t, s;
+              var o, s;
               return [
-                T(o(G).div, L({
+                T(t(G).div, L({
                   layout: "",
                   "data-motion-cursor": e.follow ? "follow" : "pointer",
                   "data-framer-portal-id": "motion-cursor",
@@ -88,14 +88,15 @@ const ge = /* @__PURE__ */ R({
                     default: {
                       opacity: 1,
                       scale: 1,
-                      ...(t = e.variants) == null ? void 0 : t.default
+                      ...(o = e.variants) == null ? void 0 : o.default
                     },
                     exit: { opacity: 0, scale: 0, ...(s = e.variants) == null ? void 0 : s.exit }
                   },
                   animate: [
                     "default",
-                    o(r).type,
-                    !o(b) || !e.show ? "exit" : o(r).isPressed ? "pressed" : ""
+                    t(i).type,
+                    t(d) && t(i).targetBoundingBox ? "magnetic" : "",
+                    !t(b) || !e.show ? "exit" : t(i).isPressed ? "pressed" : ""
                   ],
                   "transform-template": $(e.center),
                   style: {
@@ -106,10 +107,10 @@ const ge = /* @__PURE__ */ R({
                     originX: e.center.x,
                     originY: e.center.y,
                     ...e.style,
-                    width: w.value.width,
-                    height: w.value.height,
-                    x: o(h).x,
-                    y: o(h).y,
+                    width: S.value.width,
+                    height: S.value.height,
+                    x: t(w).x,
+                    y: t(w).y,
                     top: 0,
                     left: 0,
                     position: "fixed",

package/dist/es/components/Cursor/magnetic/use-magnetic-pull.mjs

@@ -1,34 +1,34 @@
-import { useMotionValue as i, animate as f, useTransform as g, mix as m } from "motion-v";
-import { computed as l, watch as d } from "vue";
-import { useCursorState as v } from "../hooks/use-cursor-state/index.mjs";
+import { useMotionValue as r, animate as c, useTransform as l, mix as g } from "motion-v";
+import { computed as a, watch as v } from "vue";
+import { useCursorState as d } from "../hooks/use-cursor-state/index.mjs";
 import { usePointerPosition as B } from "../hooks/use-pointer-position.mjs";
-function c(n, u, t) {
-  const r = i(0), e = i(0), o = i(0);
-  return d(() => t, (s) => {
-    if (typeof s == "number") {
-      f(o, 1);
-      const a = () => {
-        e.set(u * (n.get() - s));
+function m(n, u, t) {
+  const s = r(0), e = r(0), o = r(0);
+  return v(() => t == null ? void 0 : t.value, (i) => {
+    if (typeof i == "number") {
+      c(o, 1);
+      const f = () => {
+        e.set(u * (n.get() - i));
       };
-      return a(), n.on("change", a);
+      return f(), n.on("change", f);
     } else
-      f(o, 0);
+      c(o, 0);
   }, {
     immediate: !0,
     flush: "post"
-  }), g(() => m(r.get(), e.get(), o.get()));
+  }), l(() => g(s.get(), e.get(), o.get()));
 }
 function P(n, u = 0.1) {
-  const t = v(), r = B(), e = l(() => t.value.targetBoundingBox && t.value.target === n.value), o = c(
-    r.x,
+  const t = d(), s = B(), e = a(() => t.value.targetBoundingBox && t.value.target === n.value), o = m(
+    s.x,
     u,
-    e.value ? t.value.targetBoundingBox.left + t.value.targetBoundingBox.width / 2 : void 0
-  ), s = c(
-    r.y,
+    a(() => e.value ? t.value.targetBoundingBox.left + t.value.targetBoundingBox.width / 2 : void 0)
+  ), i = m(
+    s.y,
     u,
-    e.value ? t.value.targetBoundingBox.top + t.value.targetBoundingBox.height / 2 : void 0
+    a(() => e.value ? t.value.targetBoundingBox.top + t.value.targetBoundingBox.height / 2 : void 0)
   );
-  return { x: o, y: s };
+  return { x: o, y: i };
 }
 export {
   P as useMagneticPull

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-plus-vue",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Motion Plus Vue",
   "author": "",
   "license": "ISC",