motion-plus-vue 0.0.2 → 1.0.0

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

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

@@ -1,5 +1,5 @@
 import { AnimatePresence, LayoutGroup, MotionConfig, MotionProps, Point, SpringOptions, motion } from 'motion-v';
-import { defaultTransition } from './config';
+import { defaultTransition, skipTransition } from './config';
 export interface CursorProps {
     follow?: boolean;
     center?: Point;
@@ -10,7 +10,10 @@ export interface CursorProps {
     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>;
@@ -24,6 +27,8 @@ declare function reset(): {
     transition: MotionProps["transition"];
     variants: MotionProps["variants"];
     style: MotionProps["style"];
+    class: string;
+    show: boolean;
 };
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_22: {};
@@ -36,6 +41,8 @@ declare const __VLS_self: import('vue').DefineComponent<CursorProps, {
     MotionConfig: typeof MotionConfig;
     motion: typeof motion;
     defaultTransition: typeof defaultTransition;
+    skipTransition: typeof skipTransition;
+    shouldReduceMotion: typeof shouldReduceMotion;
     state: typeof state;
     isInView: typeof isInView;
     x: typeof x;
@@ -47,6 +54,7 @@ declare const __VLS_self: import('vue').DefineComponent<CursorProps, {
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CursorProps> & Readonly<{}>, {
     offset: Point;
     center: Point;
+    show: boolean;
     spring: false | SpringOptions;
     matchTextSize: boolean;
     follow: boolean;
@@ -55,6 +63,7 @@ declare const __VLS_self: import('vue').DefineComponent<CursorProps, {
 declare const __VLS_component: import('vue').DefineComponent<CursorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CursorProps> & Readonly<{}>, {
     offset: Point;
     center: Point;
+    show: boolean;
     spring: false | SpringOptions;
     matchTextSize: boolean;
     follow: boolean;

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

@@ -1,11 +1,12 @@
-import { defineComponent as v, computed as l, createBlock as x, openBlock as h, unref as o, withCtx as n, createVNode as t, mergeProps as b, normalizeStyle as s } from "vue";
+import { defineComponent as v, computed as l, createBlock as h, openBlock as x, unref as o, withCtx as r, createVNode as t, mergeProps as b, normalizeStyle as s } from "vue";
 import { formatToParts as L } from "./utils/format-parts.mjs";
-import { useMotionConfig as C, easeOut as N, LayoutGroup as $, MotionConfig as A, motion as u } from "motion-v";
-import r from "./NumberSection.vue.mjs";
+import { useMotionConfig as A, easeOut as C, LayoutGroup as N, MotionConfig as $, motion as u } from "motion-v";
+import n from "./NumberSection.vue.mjs";
 import { maskHeight as p } from "./config.mjs";
 import T from "./Mask.vue.mjs";
 const O = /* @__PURE__ */ v({
   name: "AnimateNumber",
+  inheritAttrs: !1,
   __name: "AnimateNumber",
   props: {
     locales: {},
@@ -16,23 +17,23 @@ const O = /* @__PURE__ */ v({
     value: {},
     style: {}
   },
-  setup(m) {
-    const f = {
-      opacity: { duration: 1, ease: N },
+  setup(f) {
+    const m = {
+      opacity: { duration: 1, ease: C },
       layout: { type: "spring", duration: 1, bounce: 0 },
       y: { type: "spring", duration: 1, bounce: 0 }
-    }, e = m, a = l(() => {
+    }, e = f, a = l(() => {
       const i = e.value;
       return L(i, { locales: e.locales, format: e.format }, e.prefix, e.suffix);
-    }), c = C(), d = l(() => e.transition ?? c.value.transition ?? f);
+    }), c = A(), d = l(() => e.transition ?? c.value.transition ?? m);
     function y() {
       const { format: i, prefix: g, suffix: k, locales: w, value: I, ..._ } = e;
       return _;
     }
-    return (i, g) => (h(), x(o($), null, {
-      default: n(() => [
-        t(o(A), { transition: d.value }, {
-          default: n(() => [
+    return (i, g) => (x(), h(o(N), null, {
+      default: r(() => [
+        t(o($), { transition: d.value }, {
+          default: r(() => [
             t(o(u).div, b({
               ...i.$attrs,
               ...y()
@@ -46,7 +47,7 @@ const O = /* @__PURE__ */ v({
                 whiteSpace: "nowrap"
               }
             }), {
-              default: n(() => [
+              default: r(() => [
                 t(o(u).div, {
                   layout: "",
                   "aria-label": a.value.formatted,
@@ -58,8 +59,8 @@ const O = /* @__PURE__ */ v({
                     zIndex: -1
                   }
                 }, {
-                  default: n(() => [
-                    t(r, {
+                  default: r(() => [
+                    t(n, {
                       style: s({ padding: `calc(${o(p)}/2) 0` }),
                       "aria-hidden": !0,
                       justify: "right",
@@ -68,14 +69,14 @@ const O = /* @__PURE__ */ v({
                       name: "pre"
                     }, null, 8, ["style", "parts"]),
                     t(T, null, {
-                      default: n(() => [
-                        t(r, {
+                      default: r(() => [
+                        t(n, {
                           justify: "right",
                           parts: a.value.integer,
                           name: "integer",
                           mode: "popLayout"
                         }, null, 8, ["parts"]),
-                        t(r, {
+                        t(n, {
                           layout: "position",
                           parts: a.value.fraction,
                           name: "fraction",
@@ -84,7 +85,7 @@ const O = /* @__PURE__ */ v({
                       ]),
                       _: 1
                     }),
-                    t(r, {
+                    t(n, {
                       style: s({ padding: `calc(${o(p)}/2) 0` }),
                       "aria-hidden": !0,
                       layout: "position",

package/dist/es/components/AnimateNumber/NumberSection.vue.mjs

@@ -1,12 +1,12 @@
-import { defineComponent as _, ref as y, watch as k, toRef as j, createBlock as p, openBlock as l, unref as f, normalizeStyle as C, normalizeClass as $, withCtx as x, createElementVNode as B, createTextVNode as E, createVNode as N, createElementBlock as g, Fragment as P, renderList as S } from "vue";
-import { motion as W, AnimatePresence as M } from "motion-v";
-import { injectSectionContext as V } from "./context.mjs";
-import { useIsInitialRender as z } from "./hooks/use-is-initial-render.mjs";
-import { getWidthInEm as h } from "./utils/get-width-in-ems.mjs";
-import A from "./NumberSymbol.vue.mjs";
-import L from "./NumberDigit.vue.mjs";
-import { targetWidths as T } from "./utils/target-widths.mjs";
-const O = /* @__PURE__ */ _({
+import { defineComponent as j, ref as k, watch as x, toRef as C, createBlock as p, openBlock as u, unref as f, normalizeStyle as W, normalizeClass as $, withCtx as g, createElementVNode as B, createTextVNode as E, createVNode as N, createElementBlock as h, Fragment as P, renderList as S } from "vue";
+import { useDomRef as M, motion as V, AnimatePresence as z, frame as A } from "motion-v";
+import { injectSectionContext as L } from "./context.mjs";
+import { useIsInitialRender as T } from "./hooks/use-is-initial-render.mjs";
+import { getWidthInEm as w } from "./utils/get-width-in-ems.mjs";
+import D from "./NumberSymbol.vue.mjs";
+import F from "./NumberDigit.vue.mjs";
+import { targetWidths as H } from "./utils/target-widths.mjs";
+const Y = /* @__PURE__ */ j({
   __name: "NumberSection",
   props: {
     parts: {},
@@ -15,107 +15,105 @@ const O = /* @__PURE__ */ _({
     name: {},
     style: {}
   },
-  setup(w) {
-    const u = w, c = y(), m = y();
-    function R(n) {
-      m.value = n == null ? void 0 : n.$el;
-    }
-    const r = y(), d = z();
-    k(() => u.parts.map((n) => n.value).join(""), () => {
-      if (!r.value)
+  setup(I) {
+    const m = I, d = k(), y = M(), s = k(), c = T();
+    x(() => m.parts, (i) => {
+      const r = new Map(i.map((n) => [n.key, { ...n, isPresent: !0 }]));
+      a = [...a.filter((n) => !r.get(n.key)).map(
+        (n) => ({ ...n, isPresent: !1 })
+      ), ...i].sort((n, e) => o.value === "right" ? n.isPresent === e.isPresent ? n.originalIndex - e.originalIndex : n.isPresent ? -1 : 1 : o.value === "left" ? n.isPresent === e.isPresent ? n.originalIndex - e.originalIndex : n.isPresent ? 1 : -1 : n.originalIndex - e.originalIndex);
+    }, { flush: "pre" }), x(() => m.parts.map((i) => i.value).join(""), (i, r) => {
+      if (!s.value)
         return;
-      if (d.current) {
-        m.value && (m.value.style.width = h(r.value));
+      if (c.current) {
+        y.value && (y.value.style.width = w(s.value));
         return;
       }
-      const n = Array.from(r.value.children).map((e) => {
+      const t = Array.from(s.value.children).map((e) => {
         if (!(e instanceof HTMLElement))
           return;
         if (e.dataset.state === "exiting") {
-          const I = e.nextSibling;
+          const _ = e.nextSibling;
           return e.remove(), () => {
-            r.value && r.value.insertBefore(e, I);
+            s.value && s.value.insertBefore(e, _);
           };
         }
-        const t = T.get(e);
-        if (!t)
+        const l = H.get(e);
+        if (!l)
           return;
-        const s = e.style.width;
-        return e.style.width = t, () => {
-          e.style.width = s;
+        const R = e.style.width;
+        return e.style.width = l, () => {
+          e.style.width = R;
         };
-      }), i = h(r.value);
-      c.value = i;
-      for (let e = n.length - 1; e >= 0; e--) {
-        const t = n[e];
-        t && t();
+      });
+      function n() {
+        const e = w(s.value);
+        d.value = e;
+      }
+      +i > +(r || 0) ? A.read(n) : n();
+      for (let e = t.length - 1; e >= 0; e--) {
+        const l = t[e];
+        l && l();
       }
     }, { immediate: !0, flush: "post" });
-    const o = j(u, "justify");
-    V({
+    const o = C(m, "justify");
+    L({
       justify: o
     });
-    let a = u.parts;
-    k(() => u.parts, (n) => {
-      const i = new Map(n.map((t) => [t.key, { ...t, isPresent: !0 }]));
-      a = [...a.filter((t) => !i.get(t.key)).map(
-        (t) => ({ ...t, isPresent: !1 })
-      ), ...n].sort((t, s) => o.value === "right" ? t.isPresent === s.isPresent ? t.originalIndex - s.originalIndex : t.isPresent ? -1 : 1 : o.value === "left" ? t.isPresent === s.isPresent ? t.originalIndex - s.originalIndex : t.isPresent ? 1 : -1 : t.originalIndex - s.originalIndex);
-    });
-    function v(n) {
-      a = a.filter((i) => i.key !== n);
+    let a = m.parts;
+    function v(i) {
+      a = a.filter((r) => r.key !== i);
     }
-    return (n, i) => (l(), p(f(W).span, {
-      ref: R,
-      class: $(`number-section-${n.name}`),
-      style: C({
-        ...n.style,
+    return (i, r) => (u(), p(f(V).span, {
+      ref: f(y),
+      class: $(`number-section-${i.name}`),
+      style: W({
+        ...i.style,
         display: "inline-flex",
         justifyContent: o.value,
-        width: c.value
+        width: d.value
       }),
       layout: "position"
     }, {
-      default: x(() => [
+      default: g(() => [
         B("span", {
           ref_key: "measuredRef",
-          ref: r,
+          ref: s,
           style: {
             display: "inline-flex",
             justifyContent: "inherit",
             position: "relative"
           }
         }, [
-          i[0] || (i[0] = E(" ​ ")),
-          N(f(M), {
-            multiple: "",
-            mode: n.mode,
+          r[0] || (r[0] = E(" ​ ")),
+          N(f(z), {
+            mode: i.mode,
             "anchor-x": o.value,
             initial: !1
           }, {
-            default: x(() => [
-              (l(!0), g(P, null, S(f(a), (e) => (l(), g(P, {
-                key: e.key
+            default: g(() => [
+              (u(!0), h(P, null, S(f(a), (t) => (u(), h(P, {
+                key: t.key
               }, [
-                e.type === "integer" || e.type === "fraction" ? (l(), p(L, {
-                  key: e.key,
-                  "part-key": e.key,
+                t.type === "integer" || t.type === "fraction" ? (u(), p(F, {
+                  key: t.key,
+                  "part-key": t.key,
                   initial: { opacity: 0 },
                   animate: { opacity: 1 },
                   exit: { opacity: 0 },
-                  value: e.value,
-                  "is-present": e.isPresent ?? !0,
-                  "initial-value": f(d).current ? void 0 : 0,
+                  value: t.value,
+                  "is-present": t.isPresent ?? !0,
+                  "initial-value": f(c).current ? void 0 : 0,
                   onRemove: v
-                }, null, 8, ["part-key", "value", "is-present", "initial-value"])) : (l(), p(A, {
-                  key: e.type === "literal" ? `${e.key}:${e.value}` : e.key,
-                  type: e.type,
-                  "part-key": e.key,
+                }, null, 8, ["part-key", "value", "is-present", "initial-value"])) : (u(), p(D, {
+                  key: t.type === "literal" ? `${t.key}:${t.value}` : t.key,
+                  type: t.type,
+                  "part-key": t.key,
                   initial: { opacity: 0 },
                   animate: { opacity: 1 },
                   exit: { opacity: 0 },
-                  value: e.value,
-                  "is-present": e.isPresent ?? !0,
+                  value: t.value,
+                  "is-present": t.isPresent ?? !0,
                   onRemove: v
                 }, null, 8, ["type", "part-key", "value", "is-present"]))
               ], 64))), 128))
@@ -129,5 +127,5 @@ const O = /* @__PURE__ */ _({
   }
 });
 export {
-  O as default
+  Y as default
 };

package/dist/es/components/AnimateNumber/NumberSymbol.vue.mjs

@@ -1,5 +1,5 @@
 import { defineComponent as u, createBlock as n, openBlock as a, unref as e, normalizeStyle as d, withCtx as i, createVNode as y, createTextVNode as c, toDisplayString as f } from "vue";
-import { motion as l, AnimatePresence as h } from "motion-v";
+import { motion as r, AnimatePresence as h } from "motion-v";
 import { maskHeight as v } from "./config.mjs";
 import { useSectionContext as g } from "./context.mjs";
 import { useAnimate as k } from "./use-animate.mjs";
@@ -13,9 +13,9 @@ const B = /* @__PURE__ */ u({
     onRemove: { type: Function },
     style: {}
   },
-  setup(r) {
-    const s = r, { justify: o } = g(), { getRoot: p, handleComplete: m } = k(s);
-    return (t, x) => (a(), n(e(l).span, {
+  setup(s) {
+    const l = s, { justify: o } = g(), { getRoot: p, handleComplete: m } = k(l);
+    return (t, x) => (a(), n(e(r).span, {
       ref: e(p),
       layout: "position",
       "data-state": t.isPresent ? void 0 : "exiting",
@@ -31,13 +31,12 @@ const B = /* @__PURE__ */ u({
     }, {
       default: i(() => [
         y(e(h), {
-          multiple: "",
           mode: "popLayout",
           "anchor-x": e(o),
           initial: !1
         }, {
           default: i(() => [
-            (a(), n(e(l).span, {
+            (a(), n(e(r).span, {
               key: t.value,
               layout: e(o) === "right" ? "position" : !1,
               initial: { opacity: 0 },

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

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

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

@@ -1,8 +1,9 @@
-const t = { width: "auto", height: "auto" }, o = { x: 0, y: 0 }, n = { x: 0.5, y: 0.5 }, e = { stiffness: 1e3, damping: 100 }, i = { duration: 0.15, ease: [0.38, 0.12, 0.29, 1] };
+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] };
 export {
   t as autoSize,
   n as centerPoint,
-  e as defaultFollowSpring,
-  i as defaultTransition,
+  s as defaultFollowSpring,
+  e as defaultTransition,
+  i as skipTransition,
   o as topLeftPoint
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-plus-vue",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "Motion Plus Vue",
   "author": "",
   "license": "ISC",
@@ -25,11 +25,11 @@
   ],
   "typings": "./dist/index.d.ts",
   "peerDependencies": {
-    "motion-v": ">=0.11.0-beta.5",
+    "motion-v": ">=0.13.0-beta.1",
     "vue": ">=3.0.0"
   },
   "devDependencies": {
-    "motion-v": "0.11.0-beta.5",
+    "motion-v": "^0.13.0-beta.1",
     "vue": "^3.5.13"
   },
   "size-limit": [