motion-plus-vue 1.0.0 → 1.1.0

package/README.md

@@ -0,0 +1,11 @@
+<p align="center">
+  <img width="32" height="32" alt="Motion logo" src="https://github.com/user-attachments/assets/64ba6b46-1532-4555-a1de-100f8ee8fcd5" alt="Motion+ logo" />
+</p>
+<h1 align="center">Motion Plus Vue</h1>
+<h3 align="center">
+  Vue components for Motion Plus
+</h3>
+
+## 📖 Docs
+
+-   [Vue](https://motion.dev/docs/vue-animate-number)

package/dist/cjs/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),u=require("motion-v");function G(n,{locales:t,format:i},s,l){const g=new Intl.NumberFormat(t,i).formatToParts(Number(n));s&&g.unshift({type:"prefix",value:s}),l&&g.push({type:"suffix",value:l});const d=[],y=[],m=[],v=[],c={},a=o=>`${o}:${c[o]=(c[o]??-1)+1}`;let f="",w=!1,B=!1,p=0;for(const o of g){f+=o.value;const h=o.type==="minusSign"||o.type==="plusSign"?"sign":o.type;switch(h){case"integer":w=!0,y.push(...o.value.split("").map(x=>({type:h,value:parseInt(x)})));break;case"group":y.push({type:h,value:o.value});break;case"decimal":B=!0,m.push({type:h,value:o.value,key:a(h),originalIndex:p++});break;case"fraction":m.push(...o.value.split("").map(x=>({type:h,value:parseInt(x),key:a(h),originalIndex:p++})));break;default:(w||B?v:d).push({type:h,value:o.value,key:a(h),originalIndex:p++})}}const k=[];for(let o=y.length-1;o>=0;o--){const h=a(y[o].type);k.unshift({...y[o],key:h,originalIndex:o})}return{pre:d,integer:k,fraction:m,post:v,formatted:f}}const[U,q]=u.createContext("SectionContext");function O(){const n={current:!0};return e.onMounted(()=>{n.current=!1}),n}function _(n){const{width:t,fontSize:i}=getComputedStyle(n);return`${parseFloat(t)/parseFloat(i)}em`}const C="var(--mask-height, 0.15em)",V="var(--mask-width, 0.5em)",P=`calc(${V} / var(--invert-x, 1))`,b="#000 0, transparent 71%",Z=`linear-gradient(to right, transparent 0, #000 ${P}, #000 calc(100% - ${P}), transparent),linear-gradient(to bottom, transparent 0, #000 ${C}, #000 calc(100% - ${C}), transparent 100%),radial-gradient(at bottom right, ${b}),radial-gradient(at bottom left, ${b}), radial-gradient(at top left, ${b}), radial-gradient(at top right, ${b})`,J=`100% calc(100% - ${C} * 2),calc(100% - ${P} * 2) 100%,${P} ${C},${P} ${C},${P} ${C},${P} ${C}`;u.addScaleCorrector({"--invert-x":{correct:(n,{treeScale:t,projectionDelta:i})=>i.x.scale*t.x}});const R={display:"flex",flexDirection:"column",alignItems:"center",position:"absolute",width:"100%"};function X(n){const t=e.ref();function i(l){t.value=l==null?void 0:l.$el}e.watch(()=>n.isPresent,l=>{var r;t.value&&((r=u.mountedStates.get(t.value))==null||r.setActive("exit",!l))});function s(l){var r;l.detail.isExit&&!n.isPresent&&((r=n.onRemove)==null||r.call(n,n.partKey))}return{root:t,getRoot:i,handleComplete:s}}const Q=e.defineComponent({__name:"NumberSymbol",props:{partKey:{},type:{},value:{},isPresent:{type:Boolean},onRemove:{type:Function},style:{}},setup(n){const t=n,{justify:i}=U(),{getRoot:s,handleComplete:l}=X(t);return(r,g)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{ref:e.unref(s),layout:"position","data-state":r.isPresent?void 0:"exiting",style:e.normalizeStyle({display:"inline-flex",justifyContent:e.unref(i),padding:`calc(${e.unref(C)}/2) 0`,position:"relative",pointerEvents:r.isPresent?void 0:"none"}),"aria-hidden":!r.isPresent,onMotioncomplete:e.unref(l)},{default:e.withCtx(()=>[e.createVNode(e.unref(u.AnimatePresence),{mode:"popLayout","anchor-x":e.unref(i),initial:!1},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.unref(u.motion).span,{key:r.value,layout:e.unref(i)==="right"?"position":!1,initial:{opacity:0},animate:{opacity:[null,1]},exit:{opacity:[null,0],transition:{duration:.3}},style:{display:"inline-block",whiteSpace:"pre"},transition:{duration:.2}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1},8,["layout"]))]),_:1},8,["anchor-x"])]),_:1},8,["data-state","style","aria-hidden","onMotioncomplete"]))}}),Y=new WeakMap,ee=e.defineComponent({__name:"NumberDigit",props:{value:{},initialValue:{default:void 0},isPresent:{type:Boolean},partKey:{},onRemove:{},style:{}},setup(n){const t=n,i=t.initialValue??t.value,s=O(),l=u.useMotionConfig(),r=e.ref(),g=e.ref(Array(10).fill(null)),d=e.ref(),{getRoot:y,handleComplete:m,root:v}=X(t);let c=i;const a=e.ref(i);e.watch([()=>t.value,()=>t.isPresent],([p,k])=>{if(!k)return a.value=0;if(s.current)return e.nextTick(()=>{a.value=p});a.value=p},{immediate:!0});function f(p){var x;if(!r.value||p===c)return;const k=r.value.getBoundingClientRect(),o=(x=v.value)==null?void 0:x.getBoundingClientRect(),h=k.height*(p-c)+(k.top-(o?o.top||0:k.top));u.animate(r.value,{y:[h,0]},l.value.transition)}function w(p){if(s.current&&i===p||!g.value[p])return;const k=_(g.value[p]);v.value&&Y.set(v.value,k),d.value=k}e.watch(a,p=>{w(p)},{immediate:!0,flush:"post"}),e.watch(a,(p,k,o)=>{f(p),o(()=>{c=p})},{immediate:!0,flush:"pre"});function B(p){return()=>e.createVNode("span",{key:p,style:{display:"inline-block",padding:`calc(${C}/2) 0`}},[p])}return(p,k)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{ref:e.unref(y),layout:"position","data-state":p.isPresent?void 0:"exiting","data-key":p.partKey,style:e.normalizeStyle({display:"inline-flex",justifyContent:"center",width:d.value,pointerEvents:p.isPresent?void 0:"none"}),"aria-hidden":!p.isPresent,onMotioncomplete:e.unref(m)},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"scope",ref:r,style:{display:"inline-flex",justifyContent:"center",flexDirection:"column",alignItems:"center",position:"relative"}},[a.value!==0?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle({...e.unref(R),bottom:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,o=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(B(o-1)),{key:o-1}))),128))],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(B(a.value)))),a.value!==9?(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({...e.unref(R),top:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(9-a.value,o=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(B(a.value+o)),{key:a.value+o}))),128))],4)):e.createCommentVNode("",!0)],512)]),_:1},8,["data-state","data-key","style","aria-hidden","onMotioncomplete"]))}}),$=e.defineComponent({__name:"NumberSection",props:{parts:{},justify:{default:"left"},mode:{},name:{},style:{}},setup(n){const t=n,i=e.ref(),s=u.useDomRef(),l=e.ref(),r=O();e.watch(()=>t.parts,m=>{const v=new Map(m.map(a=>[a.key,{...a,isPresent:!0}]));d=[...d.filter(a=>!v.get(a.key)).map(a=>({...a,isPresent:!1})),...m].sort((a,f)=>g.value==="right"?a.isPresent===f.isPresent?a.originalIndex-f.originalIndex:a.isPresent?-1:1:g.value==="left"?a.isPresent===f.isPresent?a.originalIndex-f.originalIndex:a.isPresent?1:-1:a.originalIndex-f.originalIndex)},{flush:"pre"}),e.watch(()=>t.parts.map(m=>m.value).join(""),(m,v)=>{if(!l.value)return;if(r.current){s.value&&(s.value.style.width=_(l.value));return}const c=Array.from(l.value.children).map(f=>{if(!(f instanceof HTMLElement))return;if(f.dataset.state==="exiting"){const p=f.nextSibling;return f.remove(),()=>{l.value&&l.value.insertBefore(f,p)}}const w=Y.get(f);if(!w)return;const B=f.style.width;return f.style.width=w,()=>{f.style.width=B}});function a(){const f=_(l.value);i.value=f}+m>+(v||0)?u.frame.read(a):a();for(let f=c.length-1;f>=0;f--){const w=c[f];w&&w()}},{immediate:!0,flush:"post"});const g=e.toRef(t,"justify");q({justify:g});let d=t.parts;function y(m){d=d.filter(v=>v.key!==m)}return(m,v)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{ref:e.unref(s),class:e.normalizeClass(`number-section-${m.name}`),style:e.normalizeStyle({...m.style,display:"inline-flex",justifyContent:g.value,width:i.value}),layout:"position"},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"measuredRef",ref:l,style:{display:"inline-flex",justifyContent:"inherit",position:"relative"}},[v[0]||(v[0]=e.createTextVNode(" ​ ")),e.createVNode(e.unref(u.AnimatePresence),{mode:m.mode,"anchor-x":g.value,initial:!1},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),c=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:c.key},[c.type==="integer"||c.type==="fraction"?(e.openBlock(),e.createBlock(ee,{key:c.key,"part-key":c.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:c.value,"is-present":c.isPresent??!0,"initial-value":e.unref(r).current?void 0:0,onRemove:y},null,8,["part-key","value","is-present","initial-value"])):(e.openBlock(),e.createBlock(Q,{key:c.type==="literal"?`${c.key}:${c.value}`:c.key,type:c.type,"part-key":c.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:c.value,"is-present":c.isPresent??!0,onRemove:y},null,8,["type","part-key","value","is-present"]))],64))),128))]),_:1},8,["mode","anchor-x"])],512)]),_:1},8,["class","style"]))}}),te=e.defineComponent({__name:"Mask",setup(n){return(t,i)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{layout:"","aria-hidden":!0,style:e.normalizeStyle({display:"inline-flex","--invert-x":1,margin:`0 calc(-1*${e.unref(V)})`,padding:`calc(${e.unref(C)}/2) ${e.unref(V)}`,position:"relative",zIndex:-1,overflow:"clip",webkitMaskImage:e.unref(Z),webkitMaskSize:e.unref(J),webkitMaskPosition:"center, center, top left, top right, bottom right, bottom left",webkitMaskRepeat:"no-repeat"})},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["style"]))}}),ne=e.defineComponent({name:"AnimateNumber",inheritAttrs:!1,__name:"AnimateNumber",props:{locales:{},format:{},transition:{},suffix:{},prefix:{},value:{},style:{}},setup(n){const t={opacity:{duration:1,ease:u.easeOut},layout:{type:"spring",duration:1,bounce:0},y:{type:"spring",duration:1,bounce:0}},i=n,s=e.computed(()=>{const d=i.value;return G(d,{locales:i.locales,format:i.format},i.prefix,i.suffix)}),l=u.useMotionConfig(),r=e.computed(()=>i.transition??l.value.transition??t);function g(){const{format:d,prefix:y,suffix:m,locales:v,value:c,...a}=i;return a}return(d,y)=>(e.openBlock(),e.createBlock(e.unref(u.LayoutGroup),null,{default:e.withCtx(()=>[e.createVNode(e.unref(u.MotionConfig),{transition:r.value},{default:e.withCtx(()=>[e.createVNode(e.unref(u.motion).div,e.mergeProps({...d.$attrs,...g()},{layout:"",style:{lineHeight:"1",...d.style,display:"inline-flex",isolation:"isolate",whiteSpace:"nowrap"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(u.motion).div,{layout:"","aria-label":s.value.formatted,style:{display:"inline-flex",direction:"ltr",isolation:"isolate",position:"relative",zIndex:-1}},{default:e.withCtx(()=>[e.createVNode($,{style:e.normalizeStyle({padding:`calc(${e.unref(C)}/2) 0`}),"aria-hidden":!0,justify:"right",mode:"popLayout",parts:s.value.pre,name:"pre"},null,8,["style","parts"]),e.createVNode(te,null,{default:e.withCtx(()=>[e.createVNode($,{justify:"right",parts:s.value.integer,name:"integer",mode:"popLayout"},null,8,["parts"]),e.createVNode($,{layout:"position",parts:s.value.fraction,name:"fraction",mode:"popLayout"},null,8,["parts"])]),_:1}),e.createVNode($,{style:e.normalizeStyle({padding:`calc(${e.unref(C)}/2) 0`}),"aria-hidden":!0,layout:"position",mode:"popLayout",parts:s.value.post,name:"post"},null,8,["style","parts"])]),_:1},8,["aria-label"])]),_:1},16,["style"])]),_:1},8,["transition"])]),_:1}))}}),oe=ne;function ie(){const n=document.createElement("style");return n.textContent=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("motion-v");function te(n,{locales:t,format:o},i,r){const d=new Intl.NumberFormat(t,o).formatToParts(Number(n));i&&d.unshift({type:"prefix",value:i}),r&&d.push({type:"suffix",value:r});const f=[],h=[],g=[],v=[],u={},l=m=>`${m}:${u[m]=(u[m]??-1)+1}`;let p="",w=!1,P=!1,y=0;for(const m of d){p+=m.value;const c=m.type==="minusSign"||m.type==="plusSign"?"sign":m.type;switch(c){case"integer":w=!0,h.push(...m.value.split("").map(k=>({type:c,value:parseInt(k)})));break;case"group":h.push({type:c,value:m.value});break;case"decimal":P=!0,g.push({type:c,value:m.value,key:l(c),originalIndex:y++});break;case"fraction":g.push(...m.value.split("").map(k=>({type:c,value:parseInt(k),key:l(c),originalIndex:y++})));break;default:(w||P?v:f).push({type:c,value:m.value,key:l(c),originalIndex:y++})}}const x=[];for(let m=h.length-1;m>=0;m--){const c=l(h[m].type);x.unshift({...h[m],key:c,originalIndex:m})}return{pre:f,integer:x,fraction:g,post:v,formatted:p}}const[ne,oe]=s.createContext("SectionContext");function q(){const n={current:!0};return e.onMounted(()=>{n.current=!1}),n}function L(n){const{width:t,fontSize:o}=getComputedStyle(n);return`${parseFloat(t)/parseFloat(o)}em`}const S="var(--mask-height, 0.15em)",N="var(--mask-width, 0.5em)",b=`calc(${N} / var(--invert-x, 1))`,E="#000 0, transparent 71%",ie=`linear-gradient(to right, transparent 0, #000 ${b}, #000 calc(100% - ${b}), transparent),linear-gradient(to bottom, transparent 0, #000 ${S}, #000 calc(100% - ${S}), transparent 100%),radial-gradient(at bottom right, ${E}),radial-gradient(at bottom left, ${E}), radial-gradient(at top left, ${E}), radial-gradient(at top right, ${E})`,re=`100% calc(100% - ${S} * 2),calc(100% - ${b} * 2) 100%,${b} ${S},${b} ${S},${b} ${S},${b} ${S}`;s.addScaleCorrector({"--invert-x":{correct:(n,{treeScale:t,projectionDelta:o})=>o.x.scale*t.x}});const D={display:"flex",flexDirection:"column",alignItems:"center",position:"absolute",width:"100%"};function Z(n){const t=e.ref();function o(r){t.value=r==null?void 0:r.$el}e.watch(()=>n.isPresent,r=>{var a;t.value&&((a=s.mountedStates.get(t.value))==null||a.setActive("exit",!r))});function i(r){var a;r.detail.isExit&&!n.isPresent&&((a=n.onRemove)==null||a.call(n,n.partKey))}return{root:t,getRoot:o,handleComplete:i}}const ae=e.defineComponent({__name:"NumberSymbol",props:{partKey:{},type:{},value:{},isPresent:{type:Boolean},onRemove:{type:Function},style:{}},setup(n){const t=n,{justify:o}=ne(),{getRoot:i,handleComplete:r}=Z(t);return(a,d)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(i),layout:"position","data-state":a.isPresent?void 0:"exiting",style:e.normalizeStyle({display:"inline-flex",justifyContent:e.unref(o),padding:`calc(${e.unref(S)}/2) 0`,position:"relative",pointerEvents:a.isPresent?void 0:"none"}),"aria-hidden":!a.isPresent,onMotioncomplete:e.unref(r)},{default:e.withCtx(()=>[e.createVNode(e.unref(s.AnimatePresence),{mode:"popLayout","anchor-x":e.unref(o),initial:!1},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.unref(s.motion).span,{key:a.value,layout:e.unref(o)==="right"?"position":!1,initial:{opacity:0},animate:{opacity:[null,1]},exit:{opacity:[null,0],transition:{duration:.3}},style:{display:"inline-block",whiteSpace:"pre"},transition:{duration:.2}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.value),1)]),_:1},8,["layout"]))]),_:1},8,["anchor-x"])]),_:1},8,["data-state","style","aria-hidden","onMotioncomplete"]))}}),J=new WeakMap,se=e.defineComponent({__name:"NumberDigit",props:{value:{},initialValue:{default:void 0},isPresent:{type:Boolean},partKey:{},onRemove:{},style:{}},setup(n){const t=n,o=t.initialValue??t.value,i=q(),r=s.useMotionConfig(),a=e.ref(),d=e.ref(Array(10).fill(null)),f=e.ref(),{getRoot:h,handleComplete:g,root:v}=Z(t);let u=o;const l=e.ref(o);e.watch([()=>t.value,()=>t.isPresent],([y,x])=>{if(!x)return l.value=0;if(i.current)return e.nextTick(()=>{l.value=y});l.value=y},{immediate:!0});function p(y){var k;if(!a.value||y===u)return;const x=a.value.getBoundingClientRect(),m=(k=v.value)==null?void 0:k.getBoundingClientRect(),c=x.height*(y-u)+(x.top-(m?m.top||0:x.top));s.animate(a.value,{y:[c,0]},r.value.transition)}function w(y){if(i.current&&o===y||!d.value[y])return;const x=L(d.value[y]);v.value&&J.set(v.value,x),f.value=x}e.watch(l,y=>{w(y)},{immediate:!0,flush:"post"}),e.watch(l,(y,x,m)=>{p(y),m(()=>{u=y})},{immediate:!0,flush:"pre"});function P(y){return()=>e.createVNode("span",{key:y,style:{display:"inline-block",padding:`calc(${S}/2) 0`}},[y])}return(y,x)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(h),layout:"position","data-state":y.isPresent?void 0:"exiting","data-key":y.partKey,style:e.normalizeStyle({display:"inline-flex",justifyContent:"center",width:f.value,pointerEvents:y.isPresent?void 0:"none"}),"aria-hidden":!y.isPresent,onMotioncomplete:e.unref(g)},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"scope",ref:a,style:{display:"inline-flex",justifyContent:"center",flexDirection:"column",alignItems:"center",position:"relative"}},[l.value!==0?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle({...e.unref(D),bottom:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,m=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(m-1)),{key:m-1}))),128))],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(l.value)))),l.value!==9?(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({...e.unref(D),top:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(9-l.value,m=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(l.value+m)),{key:l.value+m}))),128))],4)):e.createCommentVNode("",!0)],512)]),_:1},8,["data-state","data-key","style","aria-hidden","onMotioncomplete"]))}}),I=e.defineComponent({__name:"NumberSection",props:{parts:{},justify:{default:"left"},mode:{},name:{},style:{}},setup(n){const t=n,o=e.ref(),i=s.useDomRef(),r=e.ref(),a=q();e.watch(()=>t.parts,g=>{const v=new Map(g.map(l=>[l.key,{...l,isPresent:!0}]));f=[...f.filter(l=>!v.get(l.key)).map(l=>({...l,isPresent:!1})),...g].sort((l,p)=>d.value==="right"?l.isPresent===p.isPresent?l.originalIndex-p.originalIndex:l.isPresent?-1:1:d.value==="left"?l.isPresent===p.isPresent?l.originalIndex-p.originalIndex:l.isPresent?1:-1:l.originalIndex-p.originalIndex)},{flush:"pre"}),e.watch(()=>t.parts.map(g=>g.value).join(""),(g,v)=>{if(!r.value)return;if(a.current){i.value&&(i.value.style.width=L(r.value));return}const u=Array.from(r.value.children).map(p=>{if(!(p instanceof HTMLElement))return;if(p.dataset.state==="exiting"){const y=p.nextSibling;return p.remove(),()=>{r.value&&r.value.insertBefore(p,y)}}const w=J.get(p);if(!w)return;const P=p.style.width;return p.style.width=w,()=>{p.style.width=P}});function l(){const p=L(r.value);o.value=p}+g>+(v||0)?s.frame.read(l):l();for(let p=u.length-1;p>=0;p--){const w=u[p];w&&w()}},{immediate:!0,flush:"post"});const d=e.toRef(t,"justify");oe({justify:d});let f=t.parts;function h(g){f=f.filter(v=>v.key!==g)}return(g,v)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(i),class:e.normalizeClass(`number-section-${g.name}`),style:e.normalizeStyle({...g.style,display:"inline-flex",justifyContent:d.value,width:o.value}),layout:"position"},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"measuredRef",ref:r,style:{display:"inline-flex",justifyContent:"inherit",position:"relative"}},[v[0]||(v[0]=e.createTextVNode(" ​ ")),e.createVNode(e.unref(s.AnimatePresence),{mode:g.mode,"anchor-x":d.value,initial:!1},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(f),u=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:u.key},[u.type==="integer"||u.type==="fraction"?(e.openBlock(),e.createBlock(se,{key:u.key,"part-key":u.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:u.value,"is-present":u.isPresent??!0,"initial-value":e.unref(a).current?void 0:0,onRemove:h},null,8,["part-key","value","is-present","initial-value"])):(e.openBlock(),e.createBlock(ae,{key:u.type==="literal"?`${u.key}:${u.value}`:u.key,type:u.type,"part-key":u.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:u.value,"is-present":u.isPresent??!0,onRemove:h},null,8,["type","part-key","value","is-present"]))],64))),128))]),_:1},8,["mode","anchor-x"])],512)]),_:1},8,["class","style"]))}}),ue=e.defineComponent({__name:"Mask",setup(n){return(t,o)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{layout:"","aria-hidden":!0,style:e.normalizeStyle({display:"inline-flex","--invert-x":1,margin:`0 calc(-1*${e.unref(N)})`,padding:`calc(${e.unref(S)}/2) ${e.unref(N)}`,position:"relative",zIndex:-1,overflow:"clip",webkitMaskImage:e.unref(ie),webkitMaskSize:e.unref(re),webkitMaskPosition:"center, center, top left, top right, bottom right, bottom left",webkitMaskRepeat:"no-repeat"})},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["style"]))}}),le=e.defineComponent({name:"AnimateNumber",inheritAttrs:!1,__name:"AnimateNumber",props:{locales:{},format:{},transition:{},suffix:{},prefix:{},value:{},style:{}},setup(n){const t={opacity:{duration:1,ease:s.easeOut},layout:{type:"spring",duration:1,bounce:0},y:{type:"spring",duration:1,bounce:0}},o=n,i=e.computed(()=>{const f=o.value;return te(f,{locales:o.locales,format:o.format},o.prefix,o.suffix)}),r=s.useMotionConfig(),a=e.computed(()=>o.transition??r.value.transition??t);function d(){const{format:f,prefix:h,suffix:g,locales:v,value:u,...l}=o;return l}return(f,h)=>(e.openBlock(),e.createBlock(e.unref(s.LayoutGroup),null,{default:e.withCtx(()=>[e.createVNode(e.unref(s.MotionConfig),{transition:a.value},{default:e.withCtx(()=>[e.createVNode(e.unref(s.motion).div,e.mergeProps({...f.$attrs,...d()},{layout:"",style:{lineHeight:"1",...f.style,display:"inline-flex",isolation:"isolate",whiteSpace:"nowrap"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(s.motion).div,{layout:"","aria-label":i.value.formatted,style:{display:"inline-flex",direction:"ltr",isolation:"isolate",position:"relative",zIndex:-1}},{default:e.withCtx(()=>[e.createVNode(I,{style:e.normalizeStyle({padding:`calc(${e.unref(S)}/2) 0`}),"aria-hidden":!0,justify:"right",mode:"popLayout",parts:i.value.pre,name:"pre"},null,8,["style","parts"]),e.createVNode(ue,null,{default:e.withCtx(()=>[e.createVNode(I,{justify:"right",parts:i.value.integer,name:"integer",mode:"popLayout"},null,8,["parts"]),e.createVNode(I,{layout:"position",parts:i.value.fraction,name:"fraction",mode:"popLayout"},null,8,["parts"])]),_:1}),e.createVNode(I,{style:e.normalizeStyle({padding:`calc(${e.unref(S)}/2) 0`}),"aria-hidden":!0,layout:"position",mode:"popLayout",parts:i.value.post,name:"post"},null,8,["style","parts"])]),_:1},8,["aria-label"])]),_:1},16,["style"])]),_:1},8,["transition"])]),_:1}))}}),ce=le;function fe(){const n=document.createElement("style");return n.textContent=`
       * {
           cursor: none !important;
       }
@@ -6,4 +6,4 @@
       [data-motion-cursor="pointer"] {
           background-color: #333;
       }
-    `,document.head.appendChild(n),()=>{document.head.removeChild(n)}}function re(n){e.watch(n,t=>t?ie():u.noop)}function N(n){return t=>{t.pointerType==="mouse"&&n(t)}}function j(n){return N(t=>{t.button===0&&n(t)})}let T,L;function ae(){T=u.motionValue(0),L=u.motionValue(0);let n=0,t=0;function i(){T.set(n),L.set(t)}typeof window<"u"&&window.addEventListener("pointermove",N(s=>{n=s.clientX,t=s.clientY,u.frame.update(i)}))}function se(){return T||ae(),{x:T,y:L}}function ue(n,t){return{x:u.useTransform(()=>n.x.get()+t.value.x),y:u.useTransform(()=>n.y.get()+t.value.y)}}function le(n){return n.closest("[data-cursor]")}function ce(n){return n.closest('a, button, input[type="button"]:not(:disabled)')}function fe(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 de(n){let t=le(n);return t?[t.dataset.cursor,t]:(t=ce(n),t?["pointer",t]:(t=fe(n),t?["text",t]:["default",null]))}let I=null,S={type:"default",isPressed:!1,fontSize:null,targetBoundingBox:null};function pe(){if(typeof window>"u")return{onChange:()=>()=>{}};const n=new Set;function t(d){S={...S,...d},n.forEach(y=>y(S))}const i=j(()=>{S.isPressed||t({isPressed:!0})}),s=j(()=>{S.isPressed&&t({isPressed:!1})}),l=N(({target:d})=>{if(!d)return;const[y,m]=de(d);let v=!1;const c={};y!==S.type&&(c.type=y,v=!0);const a=y==="pointer"&&m?m.getBoundingClientRect():null;if(a!==S.targetBoundingBox&&(c.targetBoundingBox=a,v=!0),y==="text"){const{fontSize:f}=window.getComputedStyle(d),w=f?parseInt(f):null;w!==S.fontSize&&(c.fontSize=w,v=!0)}else S.fontSize&&(c.fontSize=null,v=!0);v&&t(c)});function r(){typeof window>"u"||(window.addEventListener("pointerover",l),window.addEventListener("pointerdown",i),window.addEventListener("pointerup",s))}function g(){window.removeEventListener("pointerover",l),window.removeEventListener("pointerdown",i),window.removeEventListener("pointerup",s)}return{onChange:d=>(n.size||r(),n.add(d),()=>{n.delete(d),n.size||g()})}}function me(){return I||(I=pe()),I}function ye(){const n=e.ref({...S});return e.watch(n,()=>me().onChange(t=>{n.value=t}),{immediate:!0,flush:"post"}),n}let z=null;function ve(){const n=new Set;function t(){n.forEach(r=>r.show())}function i(){n.forEach(r=>r.hide())}function s(){document.body.addEventListener("mouseenter",t),document.body.addEventListener("mouseleave",i)}function l(){document.body.removeEventListener("mouseenter",t),document.body.removeEventListener("mouseleave",i)}return{on:r=>typeof window>"u"?u.noop:(n.size||s(),n.add(r),()=>{n.delete(r),n.size===0&&l()})}}function ge(){return z||(z=ve()),z}function he(n){const t=e.ref(!0);return e.watch(t,()=>ge().on({show:()=>{t.value||(n(),t.value=!0)},hide:()=>t.value=!1}),{immediate:!0}),t}function A(n,t,i){return u.useTransform(()=>u.mix(n.get(),t.get(),i.get()))}function we(n,t,i){const s=u.useMotionValue(0),l=u.useMotionValue(0),r=u.useMotionValue(0),g=A(n.x,l,s),d=A(n.y,r,s);return e.watch([t,()=>i.value.targetBoundingBox],()=>{if(!t.value)return;i.value.targetBoundingBox&&(l.set(i.value.targetBoundingBox.left+i.value.targetBoundingBox.width/2),r.set(i.value.targetBoundingBox.top+i.value.targetBoundingBox.height/2));const y=u.animate(s,i.value.targetBoundingBox?.9:0);return()=>y.stop()},{immediate:!0}),{x:g,y:d}}const xe={width:"auto",height:"auto"},D={x:0,y:0},ke={x:.5,y:.5},Ce={duration:0},Be={stiffness:1e3,damping:100},Se={duration:.15,ease:[.38,.12,.29,1]},F=16,H=30,W=4,Pe=20;function be(n,t,{matchPointerSize:i,matchTextSize:s}){switch(n){case"pointer":return i&&t.targetBoundingBox?t.targetBoundingBox:{width:H,height:H};case"text":return s&&t.fontSize?{width:W,height:t.fontSize}:{width:W,height:Pe};default:return{width:F,height:F}}}function $e({x:n,y:t},i){const s=e.ref(n.prev!==void 0||t.prev!==void 0);return e.watch(s,()=>{if(s.value)return;const l=()=>{s.value=!0,i(),r()},r=u.pipe(n.on("change",l),t.on("change",l));return()=>r()},{immediate:!0}),s}const Te=e.defineComponent({name:"Cursor",inheritAttrs:!1,__name:"Cursor",props:{follow:{type:Boolean,default:!1},center:{default:({follow:n})=>n?D:ke},offset:{default:()=>D},spring:{type:[Boolean,Object],default:({follow:n})=>n?Be:!1},snapToTarget:{type:Boolean,default:!1},matchTextSize:{type:Boolean,default:!0},transition:{},variants:{},style:{},class:{},show:{type:Boolean,default:!0}},setup(n){const t=n,i=e.toRef(t,"offset"),s=u.useReducedMotion();re(()=>!s.value&&!t.follow);const l=se(),r=ue(l,i),g=u.useSpring(r.x,t.spring||void 0),d=u.useSpring(r.y,t.spring||void 0);function y(){const o=r.x.on("change",x=>{g.jump(x),o()}),h=r.y.on("change",x=>{d.jump(x),h()})}const m=ye(),v=he(y),{x:c,y:a}=we(t.spring?{x:g,y:d}:l,e.toRef(t,"snapToTarget"),m),f=e.useSlots(),w=e.computed(()=>{var x,E;const o=(E=(x=f.default)==null?void 0:x.call(f))==null?void 0:E.filter(M=>M.type!==Symbol.for("v-cmt"));if(o!=null&&o.length)return xe;const h=be(m.value.type,m.value,{matchPointerSize:t.snapToTarget,matchTextSize:t.matchTextSize});return{width:`${h.width}px`,height:`${h.height}px`}}),B=$e(l,y);function p(o){return(h,x)=>`translate(-${o.x*100}%, -${o.y*100}%) ${x}`}function k(){const{follow:o,center:h,offset:x,spring:E,snapToTarget:M,matchTextSize:Ie,...K}=t;return{...K}}return(o,h)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.unref(B)?(e.openBlock(),e.createBlock(e.unref(u.LayoutGroup),{key:0},{default:e.withCtx(()=>[e.createVNode(e.unref(u.MotionConfig),{transition:e.unref(s)?e.unref(Ce):o.transition||e.unref(Se)},{default:e.withCtx(()=>[e.createVNode(e.unref(u.motion).div,e.mergeProps({layout:"","data-motion-cursor":o.follow?"follow":"pointer","data-framer-portal-id":"motion-cursor",initial:"exit",exit:"exit"},{...o.$attrs,...k()},{variants:{default:{opacity:1,scale:1},exit:{opacity:0,scale:0},pressed:o.follow?{opacity:1,scale:1}:{opacity:1,scale:.9},...o.variants},animate:["default",e.unref(m).type,!e.unref(v)||!o.show?"exit":e.unref(m).isPressed?"pressed":""],"transform-template":p(o.center),"data-w":w.value.width,style:{width:w.value.width,height:w.value.height,borderRadius:o.follow?0:20,zIndex:o.follow?99998:99999,willChange:"transform",contain:"layout",overflow:"hidden",originX:o.center.x,originY:o.center.y,...t.style,x:e.unref(c),y:e.unref(a),top:0,left:0,position:"fixed",pointerEvents:"none"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(u.AnimatePresence),null,{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:3})]),_:3},16,["data-motion-cursor","variants","animate","transform-template","data-w","style"])]),_:3},8,["transition"])]),_:3})):e.createCommentVNode("",!0)]))}}),Ee=Te;exports.AnimateNumber=oe;exports.Cursor=Ee;
+    `,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;

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

@@ -1,42 +1,36 @@
-import { AnimatePresence, LayoutGroup, MotionConfig, MotionProps, Point, SpringOptions, motion } from 'motion-v';
+import { LayoutGroup, MotionConfig, MotionProps, Point, SpringOptions, motion } from 'motion-v';
 import { defaultTransition, skipTransition } from './config';
-export interface CursorProps {
+import { MagneticOptions } from './types';
+type HTMMotionProps = MotionProps<'div'>;
+export interface CursorProps extends HTMMotionProps {
     follow?: boolean;
     center?: Point;
     offset?: Point;
     spring?: false | SpringOptions;
-    snapToTarget?: boolean;
     matchTextSize?: boolean;
+    magnetic?: boolean | Partial<MagneticOptions>;
     transition?: MotionProps['transition'];
     variants?: MotionProps['variants'];
     style?: MotionProps['style'];
-    class?: string;
     show?: boolean;
 }
 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>;
-declare const x: import('motion-v/es').MotionValue<number>, y: import('motion-v/es').MotionValue<number>;
+declare const pointer: import('vue').ComputedRef<import('./hooks/use-offset').MotionPoint>;
 declare const size: import('vue').ComputedRef<{
-    width: string;
-    height: string;
+    width: number | string | import('motion-v/es').MotionValue<any>;
+    height: number | string | import('motion-v/es').MotionValue<any>;
 }>;
 declare const pointerHasMoved: import('vue').Ref<boolean, boolean>;
 declare function positionTransform(origin: Point): (_: any, generated: string) => string;
-declare function reset(): {
-    transition: MotionProps["transition"];
-    variants: MotionProps["variants"];
-    style: MotionProps["style"];
-    class: string;
-    show: boolean;
-};
+declare function reset(): any;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_22: {};
+declare var __VLS_18: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    default?: (props: typeof __VLS_22) => any;
+    default?: (props: typeof __VLS_18) => any;
 }>;
 declare const __VLS_self: import('vue').DefineComponent<CursorProps, {
-    AnimatePresence: typeof AnimatePresence;
     LayoutGroup: typeof LayoutGroup;
     MotionConfig: typeof MotionConfig;
     motion: typeof motion;
@@ -45,8 +39,7 @@ declare const __VLS_self: import('vue').DefineComponent<CursorProps, {
     shouldReduceMotion: typeof shouldReduceMotion;
     state: typeof state;
     isInView: typeof isInView;
-    x: typeof x;
-    y: typeof y;
+    pointer: typeof pointer;
     size: typeof size;
     pointerHasMoved: typeof pointerHasMoved;
     positionTransform: typeof positionTransform;
@@ -58,7 +51,7 @@ declare const __VLS_self: import('vue').DefineComponent<CursorProps, {
     spring: false | SpringOptions;
     matchTextSize: boolean;
     follow: boolean;
-    snapToTarget: boolean;
+    magnetic: boolean | Partial<MagneticOptions>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_component: import('vue').DefineComponent<CursorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CursorProps> & Readonly<{}>, {
     offset: Point;
@@ -67,7 +60,7 @@ declare const __VLS_component: import('vue').DefineComponent<CursorProps, {}, {}
     spring: false | SpringOptions;
     matchTextSize: boolean;
     follow: boolean;
-    snapToTarget: boolean;
+    magnetic: boolean | Partial<MagneticOptions>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -21,3 +21,14 @@ export declare const defaultTransition: {
     duration: number;
     ease: number[];
 };
+export declare const defaults: {
+    followSpring: {
+        stiffness: number;
+        damping: number;
+    };
+    magneticOptions: {
+        morph: boolean;
+        padding: number;
+        snap: number;
+    };
+};

package/dist/components/Cursor/get-cursor-size.d.ts

@@ -1,10 +1,18 @@
+import { MotionProps, MotionValue } from 'motion-v';
 import { CursorState, CursorType } from './hooks/use-cursor-state/types';
+import { MagneticOptions } from './types';
 type Size = {
-    width: number;
-    height: number;
+    width: number | string | MotionValue<any>;
+    height: number | string | MotionValue<any>;
 };
-export declare function getCursorSize(type: CursorType, state: CursorState, { matchPointerSize, matchTextSize, }: {
-    matchPointerSize: boolean;
+export interface CursorSizeOptions {
+    type: CursorType;
+    state: CursorState;
+    hasChildren: boolean;
+    style?: MotionProps['style'];
+    isMagnetic: boolean;
+    magneticOptions: MagneticOptions;
     matchTextSize: boolean;
-}): Size;
+}
+export declare function getCursorSize({ type, state, hasChildren, style, isMagnetic, magneticOptions, matchTextSize, }: CursorSizeOptions): Size;
 export {};

package/dist/components/Cursor/hooks/use-cursor-state/find-target.d.ts

@@ -1,3 +1,3 @@
-import { CursorType } from './types';
-export type TypeAndTarget = [CursorType, Element | null];
-export declare function findTarget(eventTarget: Element): TypeAndTarget;
+import { CursorTarget, CursorType } from './types';
+export type TypeAndTarget = [CursorType, CursorTarget | null];
+export declare function findTarget(eventTarget: CursorTarget): TypeAndTarget;

package/dist/components/Cursor/hooks/use-cursor-state/types.d.ts

@@ -11,4 +11,7 @@ export interface CursorState {
         bottom: number;
         left: number;
     } | null;
+    target: CursorTarget | null;
+    theme: string | null;
 }
+export type CursorTarget = HTMLElement | SVGElement;

package/dist/components/Cursor/hooks/use-mixed.d.ts

@@ -1,2 +1,3 @@
 import { MotionValue } from 'motion-v';
-export declare function useMixed(a: MotionValue<number>, b: MotionValue<number>, p: MotionValue<number>): MotionValue<number>;
+import { ComputedRef } from 'vue';
+export declare function useMixed(a: ComputedRef<MotionValue<number>>, b: MotionValue<number>, p: MotionValue<number>): MotionValue<number>;

package/dist/components/Cursor/hooks/use-snapped-value.d.ts

@@ -0,0 +1,3 @@
+import { MotionValue } from 'motion-v';
+import { ComputedRef, Ref } from 'vue';
+export declare function useSnappedValue(pointer: ComputedRef<MotionValue<number>>, snap: Ref<number>, target: Ref<number | undefined>): MotionValue<number>;

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

@@ -1,5 +1,6 @@
-import { DefineComponent } from 'vue';
-import { CursorProps as Props } from './Cursor';
-import { MotionProps } from 'motion-v';
-export type CursorProps = Props & MotionProps<'div'>;
-export declare const Cursor: DefineComponent<CursorProps>;
+export type { CursorProps } from './Cursor';
+export { default as Cursor } from './Cursor';
+export { useCursorState } from './hooks/use-cursor-state';
+export { useCursorIsInView } from './hooks/use-cursor-in-view';
+export { usePointerPosition } from './hooks/use-pointer-position';
+export { useMagneticPull } from './magnetic/use-magnetic-pull';

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

@@ -0,0 +1,7 @@
+import { MotionValue } from 'motion-v';
+export declare const magneticOffset: {
+    value: undefined | {
+        x: MotionValue<number>;
+        y: MotionValue<number>;
+    };
+};

package/dist/components/Cursor/magnetic/use-magnetic-pull.d.ts

@@ -0,0 +1,6 @@
+import { MotionValue } from 'motion-v';
+import { Ref } from 'vue';
+export declare function useMagneticPull(ref: Ref<HTMLElement | null>, pull?: number): {
+    x: MotionValue<number>;
+    y: MotionValue<number>;
+};

package/dist/components/Cursor/magnetic/use-magnetic-target.d.ts

@@ -0,0 +1,4 @@
+import { ComputedRef, Ref } from 'vue';
+import { CursorState } from '../hooks/use-cursor-state/types';
+import { MotionPoint } from '../hooks/use-offset';
+export declare function useMagneticTarget(pointer: ComputedRef<MotionPoint>, isEnabled: Ref<boolean>, state: Ref<CursorState>, snap: Ref<number>): ComputedRef<MotionPoint>;

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

@@ -0,0 +1,5 @@
+export type MagneticOptions = {
+    morph: boolean;
+    padding: number;
+    snap: number;
+};

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

@@ -1,139 +1,136 @@
-import { defineComponent as R, toRef as v, useSlots as V, computed as j, createBlock as T, openBlock as S, Teleport as X, createCommentVNode as Y, unref as t, withCtx as l, createVNode as d, mergeProps as A, renderSlot as H } from "vue";
-import { useReducedMotion as L, useSpring as x, LayoutGroup as N, MotionConfig as O, motion as E, AnimatePresence as F } from "motion-v";
-import { useCursorStyles as G } from "./use-cursor-styles.mjs";
-import { usePointerPosition as q } from "./hooks/use-pointer-position.mjs";
-import { useOffset as D } from "./hooks/use-offset.mjs";
-import { useCursorState as J } from "./hooks/use-cursor-state/index.mjs";
-import { useCursorIsInView as K } from "./hooks/use-cursor-in-view.mjs";
-import { useSnapToTarget as Q } from "./hooks/use-snap-to-target.mjs";
-import { defaultFollowSpring as U, topLeftPoint as C, centerPoint as W, autoSize as Z, skipTransition as _, defaultTransition as ee } from "./config.mjs";
-import { getCursorSize as te } from "./get-cursor-size.mjs";
-import { useHasPointerMoved as oe } from "./hooks/use-has-pointer-moved.mjs";
-const ye = /* @__PURE__ */ R({
+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 { 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 { 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";
+const ge = /* @__PURE__ */ R({
   name: "Cursor",
   inheritAttrs: !1,
   __name: "Cursor",
   props: {
     follow: { type: Boolean, default: !1 },
-    center: { default: ({ follow: s }) => s ? C : W },
-    offset: { default: () => C },
-    spring: { type: [Boolean, Object], default: ({ follow: s }) => s ? U : !1 },
-    snapToTarget: { type: Boolean, default: !1 },
+    center: { default: ({ follow: i }) => i ? P : W },
+    offset: { default: () => P },
+    spring: { type: [Boolean, Object], default: ({ follow: i }) => i ? U : !1 },
     matchTextSize: { type: Boolean, default: !0 },
+    magnetic: { type: [Boolean, Object], default: !1 },
     transition: {},
     variants: {},
     style: {},
-    class: {},
     show: { type: Boolean, default: !0 }
   },
-  setup(s) {
-    const o = s, z = v(o, "offset"), c = L();
-    G(() => !c.value && !o.follow);
-    const f = q(), a = D(f, z), y = x(a.x, o.spring || void 0), h = x(a.y, o.spring || void 0);
-    function g() {
-      const e = a.x.on("change", (r) => {
-        y.jump(r), e();
-      }), n = a.y.on("change", (r) => {
-        h.jump(r), n();
+  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();
       });
     }
-    const i = J(), P = K(g), { x: B, y: $ } = Q(
-      o.spring ? { x: y, y: h } : f,
-      v(o, "snapToTarget"),
-      i
-    ), u = V(), p = j(() => {
-      var r, m;
-      const e = (m = (r = u.default) == null ? void 0 : r.call(u)) == null ? void 0 : m.filter(
-        (w) => w.type !== Symbol.for("v-cmt")
+    const r = K(), b = Q(v), h = oe(
+      l(() => n.spring ? { x: g, y } : u),
+      l(() => !!O.value),
+      r,
+      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")
       );
-      if (e != null && e.length)
-        return Z;
-      const n = te(i.value.type, i.value, {
-        matchPointerSize: o.snapToTarget,
-        matchTextSize: o.matchTextSize
+      return ee({
+        type: r.value.type,
+        state: r.value,
+        hasChildren: !!(e != null && e.length),
+        isMagnetic: !!n.magnetic,
+        style: n.style,
+        magneticOptions: p.value,
+        matchTextSize: n.matchTextSize
       });
-      return {
-        width: `${n.width}px`,
-        height: `${n.height}px`
-      };
-    }), M = oe(f, g);
-    function b(e) {
-      return (n, r) => `translate(-${e.x * 100}%, -${e.y * 100}%) ${r}`;
+    }), j = te(u, v);
+    function $(e) {
+      return (a, t) => `translate(-${e.x * 100}%, -${e.y * 100}%) ${t}`;
     }
     function k() {
-      const { follow: e, center: n, offset: r, spring: m, snapToTarget: w, matchTextSize: re, ...I } = o;
-      return {
-        ...I
-      };
+      const { follow: e, center: a, offset: t, spring: s, matchTextSize: S, magnetic: ne, ...I } = n;
+      return I;
     }
-    return (e, n) => (S(), T(X, { to: "body" }, [
-      t(M) ? (S(), T(t(N), { key: 0 }, {
-        default: l(() => [
-          d(t(O), {
-            transition: t(c) ? t(_) : e.transition || t(ee)
+    return (e, a) => (z(), C(Y, { to: "body" }, [
+      o(j) ? (z(), C(o(E), { key: 0 }, {
+        default: c(() => [
+          T(o(F), {
+            transition: o(d) ? o(Z) : e.transition || o(_)
           }, {
-            default: l(() => [
-              d(t(E).div, A({
-                layout: "",
-                "data-motion-cursor": e.follow ? "follow" : "pointer",
-                "data-framer-portal-id": "motion-cursor",
-                initial: "exit",
-                exit: "exit"
-              }, {
-                ...e.$attrs,
-                ...k()
-              }, {
-                variants: {
-                  default: { opacity: 1, scale: 1 },
-                  exit: { opacity: 0, scale: 0 },
-                  pressed: e.follow ? { opacity: 1, scale: 1 } : { opacity: 1, scale: 0.9 },
-                  ...e.variants
-                },
-                animate: [
-                  "default",
-                  t(i).type,
-                  !t(P) || !e.show ? "exit" : t(i).isPressed ? "pressed" : ""
-                ],
-                "transform-template": b(e.center),
-                "data-w": p.value.width,
-                style: {
-                  width: p.value.width,
-                  height: p.value.height,
-                  borderRadius: e.follow ? 0 : 20,
-                  zIndex: e.follow ? 99998 : 99999,
-                  willChange: "transform",
-                  contain: "layout",
-                  overflow: "hidden",
-                  originX: e.center.x,
-                  originY: e.center.y,
-                  ...o.style,
-                  x: t(B),
-                  y: t($),
-                  top: 0,
-                  left: 0,
-                  position: "fixed",
-                  pointerEvents: "none"
-                }
-              }), {
-                default: l(() => [
-                  d(t(F), null, {
-                    default: l(() => [
-                      H(e.$slots, "default")
-                    ]),
-                    _: 3
-                  })
-                ]),
-                _: 3
-              }, 16, ["data-motion-cursor", "variants", "animate", "transform-template", "data-w", "style"])
-            ]),
+            default: c(() => {
+              var t, s;
+              return [
+                T(o(G).div, L({
+                  layout: "",
+                  "data-motion-cursor": e.follow ? "follow" : "pointer",
+                  "data-framer-portal-id": "motion-cursor",
+                  initial: "exit",
+                  exit: "exit"
+                }, {
+                  ...e.$attrs,
+                  ...k()
+                }, {
+                  variants: {
+                    pressed: e.follow ? {} : { scale: 0.9 },
+                    ...e.variants,
+                    default: {
+                      opacity: 1,
+                      scale: 1,
+                      ...(t = e.variants) == null ? void 0 : t.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" : ""
+                  ],
+                  "transform-template": $(e.center),
+                  style: {
+                    borderRadius: e.follow ? 0 : 20,
+                    zIndex: e.follow ? 99998 : 99999,
+                    willChange: "transform",
+                    contain: "layout",
+                    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,
+                    top: 0,
+                    left: 0,
+                    position: "fixed",
+                    pointerEvents: "none"
+                  }
+                }), {
+                  default: c(() => [
+                    N(e.$slots, "default")
+                  ]),
+                  _: 3
+                }, 16, ["data-motion-cursor", "variants", "animate", "transform-template", "style"])
+              ];
+            }),
             _: 3
           }, 8, ["transition"])
         ]),
         _: 3
-      })) : Y("", !0)
+      })) : H("", !0)
     ]));
   }
 });
 export {
-  ye as default
+  ge as default
 };

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

@@ -1,9 +1,11 @@
-const t = { width: "auto", height: "auto" }, o = { x: 0, y: 0 }, n = { x: 0.5, y: 0.5 }, i = { duration: 0 }, s = { stiffness: 1e3, damping: 100 }, e = { duration: 0.15, ease: [0.38, 0.12, 0.29, 1] };
+const t = { x: 0, y: 0 }, n = { x: 0.5, y: 0.5 }, o = { duration: 0 }, s = { stiffness: 1e3, damping: 100 }, i = { duration: 0.15, ease: [0.38, 0.12, 0.29, 1] }, e = {
+  magneticOptions: { morph: !0, padding: 5, snap: 0.8 }
+};
 export {
-  t as autoSize,
   n as centerPoint,
   s as defaultFollowSpring,
-  e as defaultTransition,
-  i as skipTransition,
-  o as topLeftPoint
+  i as defaultTransition,
+  e as defaults,
+  o as skipTransition,
+  t as topLeftPoint
 };

package/dist/es/components/Cursor/get-cursor-size.mjs

@@ -1,16 +1,39 @@
-function i(T, t, {
-  matchPointerSize: E,
-  matchTextSize: e
+function h(o, n, i) {
+  const t = {
+    width: (i == null ? void 0 : i.width) ?? o,
+    height: (i == null ? void 0 : i.height) ?? n
+  };
+  return typeof t.width == "number" && (t.width = `${t.width}px`), typeof t.height == "number" && (t.height = `${t.height}px`), t;
+}
+function c({
+  type: o,
+  state: n,
+  hasChildren: i,
+  style: t,
+  isMagnetic: r,
+  magneticOptions: e,
+  matchTextSize: u
 }) {
-  switch (T) {
+  const E = r && n.targetBoundingBox;
+  if (i && !E)
+    return h("auto", "auto", t);
+  const { padding: T, morph: g } = e;
+  switch (o) {
     case "pointer":
-      return E && t.targetBoundingBox ? t.targetBoundingBox : { width: 30, height: 30 };
+      if (r && g && n.targetBoundingBox) {
+        const { width: d, height: I } = n.targetBoundingBox;
+        return {
+          width: `${d + T * 2}px`,
+          height: `${I + T * 2}px`
+        };
+      }
+      return h(31, 31, t);
     case "text":
-      return e && t.fontSize ? { width: 4, height: t.fontSize } : { width: 4, height: 20 };
+      return u && n.fontSize ? { width: "4px", height: `${n.fontSize}px` } : h(4, 20, t);
     default:
-      return { width: 16, height: 16 };
+      return h(17, 17, t);
   }
 }
 export {
-  i as getCursorSize
+  c as getCursorSize
 };

package/dist/es/components/Cursor/hooks/use-cursor-state/index.mjs

@@ -1,64 +1,77 @@
-import { onlyMouse as g, onlyLeftClicks as v } from "../utils/only-mouse-events.mjs";
-import { findTarget as z } from "./find-target.mjs";
-import { ref as L, watch as h } from "vue";
-let d = null, e = {
+import { onlyMouse as g, onlyLeftClicks as w } from "../utils/only-mouse-events.mjs";
+import { findTarget as S } from "./find-target.mjs";
+import { ref as L, watch as z } from "vue";
+let f = null, t = {
   type: "default",
   isPressed: !1,
   fontSize: null,
-  targetBoundingBox: null
+  targetBoundingBox: null,
+  target: null,
+  theme: null
 };
+function E(e) {
+  let i = null;
+  if ("closest" in e) {
+    const u = e.closest("[data-cursor-theme]");
+    u instanceof HTMLElement && (i = u.dataset.cursorTheme || null);
+  }
+  return i;
+}
 function P() {
   if (typeof window > "u")
     return {
       onChange: () => () => {
       }
     };
-  const t = /* @__PURE__ */ new Set();
-  function o(n) {
-    e = { ...e, ...n }, t.forEach((i) => i(e));
+  const e = /* @__PURE__ */ new Set();
+  function i(n) {
+    t = { ...t, ...n }, e.forEach((r) => r(t));
   }
-  const u = v(() => {
-    e.isPressed || o({ isPressed: !0 });
-  }), f = v(() => {
-    e.isPressed && o({ isPressed: !1 });
-  }), l = g(({ target: n }) => {
+  const u = w(() => {
+    t.isPressed || i({ isPressed: !0 });
+  }), l = w(() => {
+    t.isPressed && i({ isPressed: !1 });
+  }), a = g(({ target: n }) => {
     if (!n)
       return;
-    const [i, a] = z(n);
-    let r = !1;
-    const s = {};
-    i !== e.type && (s.type = i, r = !0);
-    const p = i === "pointer" && a ? a.getBoundingClientRect() : null;
-    if (p !== e.targetBoundingBox && (s.targetBoundingBox = p, r = !0), i === "text") {
-      const { fontSize: w } = window.getComputedStyle(
+    const [r, d] = S(n);
+    let s = !1;
+    const o = {
+      target: d,
+      theme: E(n)
+    };
+    r !== t.type && (o.type = r, s = !0), o.theme !== t.theme && (t.theme = o.theme, s = !0);
+    const c = r === "pointer" && d ? d.getBoundingClientRect() : null;
+    if (c !== t.targetBoundingBox && (o.targetBoundingBox = c, s = !0), r === "text") {
+      const { fontSize: m } = window.getComputedStyle(
         n
-      ), c = w ? parseInt(w) : null;
-      c !== e.fontSize && (s.fontSize = c, r = !0);
+      ), p = m ? parseInt(m) : null;
+      p !== t.fontSize && (o.fontSize = p, s = !0);
     } else
-      e.fontSize && (s.fontSize = null, r = !0);
-    r && o(s);
+      t.fontSize && (o.fontSize = null, s = !0);
+    s && i(o);
   });
-  function m() {
-    typeof window > "u" || (window.addEventListener("pointerover", l), window.addEventListener("pointerdown", u), window.addEventListener("pointerup", f));
+  function h() {
+    typeof window > "u" || (window.addEventListener("pointerover", a), window.addEventListener("pointerdown", u), window.addEventListener("pointerup", l));
   }
-  function S() {
-    window.removeEventListener("pointerover", l), window.removeEventListener("pointerdown", u), window.removeEventListener("pointerup", f);
+  function v() {
+    window.removeEventListener("pointerover", a), window.removeEventListener("pointerdown", u), window.removeEventListener("pointerup", l);
   }
   return {
-    onChange: (n) => (t.size || m(), t.add(n), () => {
-      t.delete(n), t.size || S();
+    onChange: (n) => (e.size || h(), e.add(n), () => {
+      e.delete(n), e.size || v();
     })
   };
 }
 function y() {
-  return d || (d = P()), d;
+  return f || (f = P()), f;
 }
-function x() {
-  const t = L({ ...e });
-  return h(t, () => y().onChange((o) => {
-    t.value = o;
-  }), { immediate: !0, flush: "post" }), t;
+function T() {
+  const e = L({ ...t });
+  return z(e, () => y().onChange((i) => {
+    e.value = i;
+  }), { immediate: !0, flush: "post" }), e;
 }
 export {
-  x as useCursorState
+  T as useCursorState
 };

package/dist/es/components/Cursor/hooks/use-mixed.mjs

@@ -1,7 +1,7 @@
-import { useTransform as o, mix as i } from "motion-v";
-function n(e, r, t) {
-  return o(() => i(e.get(), r.get(), t.get()));
+import { useTransform as u, mix as n } from "motion-v";
+function i(e, r, t) {
+  return u(() => n(e.value.get(), r.get(), t.get()));
 }
 export {
-  n as useMixed
+  i as useMixed
 };

package/dist/es/components/Cursor/hooks/use-snapped-value.mjs

@@ -0,0 +1,22 @@
+import { useSpring as a, useMotionValue as c, animate as o } from "motion-v";
+import { useMixed as d } from "./use-mixed.mjs";
+import { watch as l } from "vue";
+function h(m, u, i) {
+  const e = a(0, {
+    stiffness: 600,
+    damping: 50
+  }), s = c(0), p = d(m, e, s);
+  return l(
+    () => i == null ? void 0 : i.value,
+    (n, f) => {
+      n ? (!f && !s.isAnimating() ? e.jump(n) : e.set(n), o(s, u.value || 0)) : o(s, 0);
+    },
+    {
+      immediate: !0,
+      flush: "sync"
+    }
+  ), p;
+}
+export {
+  h as useSnappedValue
+};

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

@@ -0,0 +1,35 @@
+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 { 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));
+      };
+      return a(), n.on("change", a);
+    } else
+      f(o, 0);
+  }, {
+    immediate: !0,
+    flush: "post"
+  }), g(() => m(r.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,
+    u,
+    e.value ? t.value.targetBoundingBox.left + t.value.targetBoundingBox.width / 2 : void 0
+  ), s = c(
+    r.y,
+    u,
+    e.value ? t.value.targetBoundingBox.top + t.value.targetBoundingBox.height / 2 : void 0
+  );
+  return { x: o, y: s };
+}
+export {
+  P as useMagneticPull
+};

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

@@ -0,0 +1,17 @@
+import { computed as u } from "vue";
+import { useSnappedValue as g } from "../hooks/use-snapped-value.mjs";
+function d(e, t, o, n) {
+  const a = g(
+    u(() => e.value.x),
+    n,
+    u(() => o.value.targetBoundingBox ? o.value.targetBoundingBox.left + o.value.targetBoundingBox.width / 2 : void 0)
+  ), i = g(
+    u(() => e.value.y),
+    n,
+    u(() => o.value.targetBoundingBox ? o.value.targetBoundingBox.top + o.value.targetBoundingBox.height / 2 : void 0)
+  );
+  return u(() => t ? { x: a, y: i } : e.value);
+}
+export {
+  d as useMagneticTarget
+};

package/dist/es/components/Cursor/use-cursor-styles.mjs

@@ -1,8 +1,8 @@
-import { noop as e } from "motion-v";
-import { watch as n } from "vue";
-function r() {
-  const t = document.createElement("style");
-  return t.textContent = `
+import { noop as r } from "motion-v";
+import { watch as c } from "vue";
+function m() {
+  const o = document.createElement("style");
+  return o.textContent = `
       * {
           cursor: none !important;
       }
@@ -10,13 +10,18 @@ function r() {
       [data-motion-cursor="pointer"] {
           background-color: #333;
       }
-    `, document.head.appendChild(t), () => {
-    document.head.removeChild(t);
+    `, document.head.appendChild(o), () => {
+    document.head.removeChild(o);
   };
 }
-function u(t) {
-  n(t, (o) => o ? r() : e);
+function s(o) {
+  c(o, (t, u, e) => {
+    const n = t ? m() : r;
+    return e(() => {
+      n();
+    });
+  });
 }
 export {
-  u as useCursorStyles
+  s as useCursorStyles
 };

package/dist/es/index.mjs

@@ -1,6 +1,14 @@
 import { AnimateNumber as e } from "./components/AnimateNumber/index.mjs";
-import { Cursor as t } from "./components/Cursor/index.mjs";
+import { default as s } from "./components/Cursor/Cursor.vue.mjs";
+import { useCursorState as m } from "./components/Cursor/hooks/use-cursor-state/index.mjs";
+import { useCursorIsInView as i } from "./components/Cursor/hooks/use-cursor-in-view.mjs";
+import { usePointerPosition as x } from "./components/Cursor/hooks/use-pointer-position.mjs";
+import { useMagneticPull as n } from "./components/Cursor/magnetic/use-magnetic-pull.mjs";
 export {
   e as AnimateNumber,
-  t as Cursor
+  s as Cursor,
+  i as useCursorIsInView,
+  m as useCursorState,
+  n as useMagneticPull,
+  x as usePointerPosition
 };

package/package.json

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

package/dist/components/Cursor/hooks/use-snap-to-target.d.ts

@@ -1,7 +0,0 @@
-import { MotionPoint } from './use-offset';
-import { CursorState } from './use-cursor-state/types';
-import { Ref } from 'vue';
-export declare function useSnapToTarget(pointer: MotionPoint, isEnabled: Ref<boolean>, state: Ref<CursorState>): {
-    x: import('motion-v/es').MotionValue<number>;
-    y: import('motion-v/es').MotionValue<number>;
-};

package/dist/es/components/Cursor/hooks/use-snap-to-target.mjs

@@ -1,20 +0,0 @@
-import { useMixed as i } from "./use-mixed.mjs";
-import { useMotionValue as e, animate as d } from "motion-v";
-import { watch as m } from "vue";
-function v(n, r, t) {
-  const o = e(0), u = e(0), a = e(0), g = i(n.x, u, o), B = i(n.y, a, o);
-  return m([r, () => t.value.targetBoundingBox], () => {
-    if (!r.value)
-      return;
-    t.value.targetBoundingBox && (u.set(
-      t.value.targetBoundingBox.left + t.value.targetBoundingBox.width / 2
-    ), a.set(
-      t.value.targetBoundingBox.top + t.value.targetBoundingBox.height / 2
-    ));
-    const x = d(o, t.value.targetBoundingBox ? 0.9 : 0);
-    return () => x.stop();
-  }, { immediate: !0 }), { x: g, y: B };
-}
-export {
-  v as useSnapToTarget
-};

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

@@ -1,5 +0,0 @@
-import o from "./Cursor.vue.mjs";
-const m = o;
-export {
-  m as Cursor
-};