motion-plus-vue 0.0.1 → 0.1.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,s){const h=new Intl.NumberFormat(t,i).formatToParts(Number(n));a&&h.unshift({type:"prefix",value:a}),s&&h.push({type:"suffix",value:s});const p=[],m=[],x=[],f=[],v={},o=l=>`${l}:${v[l]=(v[l]??-1)+1}`;let d="",w=!1,C=!1,y=0;for(const l of h){d+=l.value;const g=l.type==="minusSign"||l.type==="plusSign"?"sign":l.type;switch(g){case"integer":w=!0,m.push(...l.value.split("").map(B=>({type:g,value:parseInt(B)})));break;case"group":m.push({type:g,value:l.value});break;case"decimal":C=!0,x.push({type:g,value:l.value,key:o(g),originalIndex:y++});break;case"fraction":x.push(...l.value.split("").map(B=>({type:g,value:parseInt(B),key:o(g),originalIndex:y++})));break;default:(w||C?f:p).push({type:g,value:l.value,key:o(g),originalIndex:y++})}}const c=[];for(let l=m.length-1;l>=0;l--){const g=o(m[l].type);c.unshift({...m[l],key:g,originalIndex:l})}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)",E="var(--mask-width, 0.5em)",P=`calc(${E} / 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(s){t.value=s==null?void 0:s.$el}e.watch(()=>n.isPresent,s=>{var r;t.value&&((r=u.mountedStates.get(t.value))==null||r.setActive("exit",!s))});function a(s){var r;s.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:s}=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"}),"aria-hidden":!r.isPresent,onMotioncomplete:e.unref(s)},{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(),s=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(),l=(B=f.value)==null?void 0:B.getBoundingClientRect(),g=c.height*(y-v)+(c.top-(l?l.top||0:c.top));u.animate(r.value,{y:[g,0]},s.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,l)=>{d(y),l(()=>{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}),"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,l=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(C(l-1)),{key:l-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,l=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(C(o.value+l)),{key:o.value+l}))),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 s(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:s,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(E)})`,padding:`calc(${e.unref(k)}/2) ${e.unref(E)}`,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)}),s=u.useMotionConfig(),r=e.computed(()=>i.transition??s.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 K(n,{locales:t,format:i},a,c){const h=new Intl.NumberFormat(t,i).formatToParts(Number(n));a&&h.unshift({type:"prefix",value:a}),c&&h.push({type:"suffix",value:c});const p=[],m=[],x=[],f=[],v={},o=s=>`${s}:${v[s]=(v[s]??-1)+1}`;let d="",w=!1,B=!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(C=>({type:g,value:parseInt(C)})));break;case"group":m.push({type:g,value:s.value});break;case"decimal":B=!0,x.push({type:g,value:s.value,key:o(g),originalIndex:y++});break;case"fraction":x.push(...s.value.split("").map(C=>({type:g,value:parseInt(C),key:o(g),originalIndex:y++})));break;default:(w||B?f:p).push({type:g,value:s.value,key:o(g),originalIndex:y++})}}const l=[];for(let s=m.length-1;s>=0;s--){const g=o(m[s].type);l.unshift({...m[s],key:g,originalIndex:s})}return{pre:p,integer:l,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(c){t.value=c==null?void 0:c.$el}e.watch(()=>n.isPresent,c=>{var r;t.value&&((r=u.mountedStates.get(t.value))==null||r.setActive("exit",!c))});function a(c){var r;c.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:c}=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(c)},{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(),c=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,l])=>{if(!l)return o.value=0;if(a.current)return e.nextTick(()=>{o.value=y});o.value=y},{immediate:!0});function d(y){var C;if(!r.value||y===v)return;const l=r.value.getBoundingClientRect(),s=(C=f.value)==null?void 0:C.getBoundingClientRect(),g=l.height*(y-v)+(l.top-(s?s.top||0:l.top));u.animate(r.value,{y:[g,0]},c.value.transition)}function w(y){if(a.current&&i===y||!h.value[y])return;const l=z(h.value[y]);f.value&&X.set(f.value,l),p.value=l}e.watch(o,y=>{w(y)},{immediate:!0,flush:"post"}),e.watch(o,(y,l,s)=>{d(y),s(()=>{v=y})},{immediate:!0,flush:"pre"});function B(y){return()=>e.createVNode("span",{key:y,style:{display:"inline-block",padding:`calc(${k}/2) 0`}},[y])}return(y,l)=>(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(B(s-1)),{key:s-1}))),128))],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(B(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(B(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 c(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 B=o.nextSibling;return o.remove(),()=>{r.value&&r.value.insertBefore(o,B)}}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:c,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)}),c=u.useMotionConfig(),r=e.computed(()=>i.transition??c.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=`
       * {
           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,i,a)=>{const s=t?oe():u.noop;a(()=>{s(0)})})}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 le(n){return n.closest("[data-cursor]")}function ue(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=le(n);return t?[t.dataset.cursor,t]:(t=ue(n),t?["pointer",t]:(t=ce(n),t?["text",t]:["default",null]))}let _=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})}),s=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",s),window.addEventListener("pointerdown",i),window.addEventListener("pointerup",a))}function h(){window.removeEventListener("pointerover",s),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 _||(_=de()),_}function me(){const n=e.ref({...S});return e.watch(n,(t,i,a)=>{const s=pe().onChange(r=>{n.value=r});a(s)},{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 s(){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&&s()})}}function ve(){return I||(I=ye()),I}function ge(n){const t=e.ref(!0);return e.watch(t,(i,a,s)=>{const r=ve().on({show:()=>{t.value||(n(),t.value=!0)},hide:()=>t.value=!1});s(r)},{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),s=u.useMotionValue(0),r=u.useMotionValue(0),h=j(n.x,s,a),p=j(n.y,r,a);return e.watch([t,()=>i.value.targetBoundingBox],()=>{if(!t.value)return;i.value.targetBoundingBox&&(s.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 s=()=>{a.value=!0,i(),r()},r=u.pipe(n.on("change",s),t.on("change",s));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(),s=se(a,i),r=u.useSpring(s.x,t.spring||void 0),h=u.useSpring(s.y,t.spring||void 0);function p(){const c=s.x.on("change",g=>{r.jump(g),c()}),l=s.y.on("change",g=>{h.jump(g),l()})}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 l=Se(m.value.type,m.value,{matchPointerSize:t.snapToTarget,matchTextSize:t.matchTextSize});return{width:`${l.width}px`,height:`${l.height}px`}}),w=Pe(a,p);function C(c){return(l,g)=>`translate(-${c.x*100}%, -${c.y*100}%) ${g}`}function y(){const{follow:c,center:l,offset:g,spring:B,snapToTarget:N,matchTextSize:Te,...Y}=t;return{...Y}}return(c,l)=>(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 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})}),c=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",c),window.addEventListener("pointerdown",i),window.addEventListener("pointerup",a))}function h(){window.removeEventListener("pointerover",c),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 c(){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&&c()})}}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),c=u.useMotionValue(0),r=u.useMotionValue(0),h=j(n.x,c,a),p=j(n.y,r,a);return e.watch([t,()=>i.value.targetBoundingBox],()=>{if(!t.value)return;i.value.targetBoundingBox&&(c.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},Be={duration:.15,ease:[.38,.12,.29,1]},F=16,D=30,H=4,Ce=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:Ce};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 c=()=>{a.value=!0,i(),r()},r=u.pipe(n.on("change",c),t.on("change",c));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:{},class:{},show:{type:Boolean,default:!0}},setup(n){const t=n,i=e.toRef(t,"offset");ie(()=>t.follow);const a=ae(),c=se(a,i),r=u.useSpring(c.x,t.spring||void 0),h=u.useSpring(c.y,t.spring||void 0);function p(){const l=c.x.on("change",g=>{r.jump(g),l()}),s=c.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,C;const l=(C=(g=o.default)==null?void 0:g.call(o))==null?void 0:C.filter(N=>N.type!==Symbol.for("v-cmt"));if(l!=null&&l.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 B(l){return(s,g)=>`translate(-${l.x*100}%, -${l.y*100}%) ${g}`}function y(){const{follow:l,center:s,offset:g,spring:C,snapToTarget:N,matchTextSize:Te,...Y}=t;return{...Y}}return(l,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(Be)},{default:e.withCtx(()=>[e.createVNode(e.unref(u.motion).div,e.mergeProps({layout:"","data-motion-cursor":l.follow?"follow":"pointer","data-framer-portal-id":"motion-cursor",initial:"exit",exit:"exit"},{...l.$attrs,...y()},{variants:{default:{opacity:1,scale:1},exit:{opacity:0,scale:0},pressed:l.follow?{opacity:1,scale:1}:{opacity:1,scale:.9},...l.variants},animate:["default",e.unref(m).type,!e.unref(x)||!l.show?"exit":e.unref(m).isPressed?"pressed":""],"transform-template":B(l.center),"data-w":d.value.width,style:{width:d.value.width,height:d.value.height,borderRadius:l.follow?0:20,zIndex:l.follow?99998:99999,willChange:"transform",contain:"layout",overflow:"hidden",originX:l.center.x,originY:l.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(l.$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;

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

@@ -10,10 +10,12 @@ export interface CursorProps {
     transition?: MotionProps['transition'];
     variants?: MotionProps['variants'];
     style?: MotionProps['style'];
+    class?: string;
+    show?: 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').MotionValue<number>, y: import('motion-v').MotionValue<number>;
+declare const x: import('motion-v/es').MotionValue<number>, y: import('motion-v/es').MotionValue<number>;
 declare const size: import('vue').ComputedRef<{
     width: string;
     height: string;
@@ -24,6 +26,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: {};
@@ -46,19 +50,21 @@ declare const __VLS_self: import('vue').DefineComponent<CursorProps, {
     reset: typeof reset;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CursorProps> & Readonly<{}>, {
     offset: Point;
-    follow: boolean;
     center: Point;
+    show: boolean;
     spring: false | SpringOptions;
-    snapToTarget: boolean;
     matchTextSize: boolean;
+    follow: boolean;
+    snapToTarget: boolean;
 }, {}, {}, {}, 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;
-    follow: boolean;
     center: Point;
+    show: boolean;
     spring: false | SpringOptions;
-    snapToTarget: boolean;
     matchTextSize: boolean;
+    follow: boolean;
+    snapToTarget: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -2,6 +2,6 @@ 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').MotionValue<number>;
-    y: import('motion-v').MotionValue<number>;
+    x: import('motion-v/es').MotionValue<number>;
+    y: import('motion-v/es').MotionValue<number>;
 };

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

@@ -1,7 +1,7 @@
-import { defineComponent as M, ref as u, watch as y, nextTick as W, createBlock as s, openBlock as o, unref as r, normalizeStyle as v, withCtx as j, createElementVNode as A, createElementBlock as m, createCommentVNode as B, Fragment as R, renderList as V, resolveDynamicComponent as g, createVNode as F } from "vue";
+import { defineComponent as M, ref as u, watch as y, nextTick as W, createBlock as s, openBlock as o, unref as a, normalizeStyle as v, withCtx as j, createElementVNode as A, createElementBlock as m, createCommentVNode as R, Fragment as V, renderList as b, resolveDynamicComponent as g, createVNode as F } from "vue";
 import { useMotionConfig as K, motion as S, animate as T } from "motion-v";
 import { useIsInitialRender as z } from "./hooks/use-is-initial-render.mjs";
-import { digitFillStyle as b, maskHeight as H } from "./config.mjs";
+import { digitFillStyle as x, maskHeight as H } from "./config.mjs";
 import { useAnimate as L } from "./use-animate.mjs";
 import { getWidthInEm as Y } from "./utils/get-width-in-ems.mjs";
 import { targetWidths as $ } from "./utils/target-widths.mjs";
@@ -20,14 +20,14 @@ const Z = /* @__PURE__ */ M({
     style: {}
   },
   setup(w) {
-    const a = w, c = a.initialValue ?? a.value, h = z(), I = K(), l = u(), k = u(Array(10).fill(null)), C = u(), {
+    const r = w, c = r.initialValue ?? r.value, h = z(), I = K(), l = u(), k = u(Array(10).fill(null)), C = u(), {
       getRoot: N,
-      handleComplete: _,
+      handleComplete: P,
       root: p
-    } = L(a);
+    } = L(r);
     let d = c;
     const t = u(c);
-    y([() => a.value, () => a.isPresent], ([e, n]) => {
+    y([() => r.value, () => r.isPresent], ([e, n]) => {
       if (!n)
         return t.value = 0;
       if (h.current)
@@ -39,20 +39,20 @@ const Z = /* @__PURE__ */ M({
       immediate: !0
     });
     function D(e) {
-      var x;
+      var B;
       if (!l.value || e === d) return;
-      const n = l.value.getBoundingClientRect(), i = (x = p.value) == null ? void 0 : x.getBoundingClientRect(), E = n.height * (e - d) + (n.top - (i ? i.top || 0 : n.top));
+      const n = l.value.getBoundingClientRect(), i = (B = p.value) == null ? void 0 : B.getBoundingClientRect(), _ = n.height * (e - d) + (n.top - (i ? i.top || 0 : n.top));
       T(l.value, {
-        y: [E, 0]
+        y: [_, 0]
       }, I.value.transition);
     }
-    function P(e) {
+    function E(e) {
       if (h.current && c === e || !k.value[e]) return;
       const n = Y(k.value[e]);
       p.value && $.set(p.value, n), C.value = n;
     }
     y(t, (e) => {
-      P(e);
+      E(e);
     }, {
       immediate: !0,
       flush: "post"
@@ -73,18 +73,19 @@ const Z = /* @__PURE__ */ M({
         }
       }, [e]);
     }
-    return (e, n) => (o(), s(r(S).span, {
-      ref: r(N),
+    return (e, n) => (o(), s(a(S).span, {
+      ref: a(N),
       layout: "position",
       "data-state": e.isPresent ? void 0 : "exiting",
       "data-key": e.partKey,
       style: v({
         display: "inline-flex",
         justifyContent: "center",
-        width: C.value
+        width: C.value,
+        pointerEvents: e.isPresent ? void 0 : "none"
       }),
       "aria-hidden": !e.isPresent,
-      onMotioncomplete: r(_)
+      onMotioncomplete: a(P)
     }, {
       default: j(() => [A("span", {
         ref_key: "scope",
@@ -99,22 +100,22 @@ const Z = /* @__PURE__ */ M({
       }, [t.value !== 0 ? (o(), m("span", {
         key: 0,
         style: v({
-          ...r(b),
+          ...a(x),
           bottom: "100%",
           left: 0
         })
-      }, [(o(!0), m(R, null, V(t.value, (i) => (o(), s(g(f(i - 1)), {
+      }, [(o(!0), m(V, null, b(t.value, (i) => (o(), s(g(f(i - 1)), {
         key: i - 1
-      }))), 128))], 4)) : B("", !0), (o(), s(g(f(t.value)))), t.value !== 9 ? (o(), m("span", {
+      }))), 128))], 4)) : R("", !0), (o(), s(g(f(t.value)))), t.value !== 9 ? (o(), m("span", {
         key: 1,
         style: v({
-          ...r(b),
+          ...a(x),
           top: "100%",
           left: 0
         })
-      }, [(o(!0), m(R, null, V(9 - t.value, (i) => (o(), s(g(f(t.value + i)), {
+      }, [(o(!0), m(V, null, b(9 - t.value, (i) => (o(), s(g(f(t.value + i)), {
         key: t.value + i
-      }))), 128))], 4)) : B("", !0)], 512)]),
+      }))), 128))], 4)) : R("", !0)], 512)]),
       _: 1
     }, 8, ["data-state", "data-key", "style", "aria-hidden", "onMotioncomplete"]));
   }

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

@@ -1,8 +1,8 @@
-import { defineComponent as u, createBlock as n, openBlock as a, unref as e, normalizeStyle as c, withCtx as i, createVNode as y, createTextVNode as d, toDisplayString as f } from "vue";
+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 { maskHeight as g } from "./config.mjs";
-import { useSectionContext as v } from "./context.mjs";
-import { useAnimate as x } from "./use-animate.mjs";
+import { maskHeight as v } from "./config.mjs";
+import { useSectionContext as g } from "./context.mjs";
+import { useAnimate as k } from "./use-animate.mjs";
 const B = /* @__PURE__ */ u({
   __name: "NumberSymbol",
   props: {
@@ -14,16 +14,17 @@ const B = /* @__PURE__ */ u({
     style: {}
   },
   setup(r) {
-    const s = r, { justify: o } = v(), { getRoot: p, handleComplete: m } = x(s);
-    return (t, k) => (a(), n(e(l).span, {
+    const s = r, { justify: o } = g(), { getRoot: p, handleComplete: m } = k(s);
+    return (t, x) => (a(), n(e(l).span, {
       ref: e(p),
       layout: "position",
       "data-state": t.isPresent ? void 0 : "exiting",
-      style: c({
+      style: d({
         display: "inline-flex",
         justifyContent: e(o),
-        padding: `calc(${e(g)}/2) 0`,
-        position: "relative"
+        padding: `calc(${e(v)}/2) 0`,
+        position: "relative",
+        pointerEvents: t.isPresent ? void 0 : "none"
       }),
       "aria-hidden": !t.isPresent,
       onMotioncomplete: e(m)
@@ -56,7 +57,7 @@ const B = /* @__PURE__ */ u({
               }
             }, {
               default: i(() => [
-                d(f(t.value), 1)
+                c(f(t.value), 1)
               ]),
               _: 1
             }, 8, ["layout"]))

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

@@ -3,48 +3,50 @@ import { useSpring as T, LayoutGroup as N, MotionConfig as O, motion as R, Anima
 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";
+import { useCursorState as q } from "./hooks/use-cursor-state/index.mjs";
+import { useCursorIsInView as D } from "./hooks/use-cursor-in-view.mjs";
+import { useSnapToTarget as J } from "./hooks/use-snap-to-target.mjs";
+import { defaultFollowSpring as K, topLeftPoint as x, centerPoint as Q, autoSize as U, defaultTransition as W } from "./config.mjs";
+import { getCursorSize as Z } from "./get-cursor-size.mjs";
+import { useHasPointerMoved as _ } from "./hooks/use-has-pointer-moved.mjs";
 const mt = /* @__PURE__ */ j({
   __name: "Cursor",
   props: {
     follow: { type: Boolean, default: !1 },
-    center: { default: ({ follow: i }) => i ? x : K },
+    center: { default: ({ follow: a }) => a ? x : Q },
     offset: { default: () => x },
-    spring: { type: [Boolean, Object], default: ({ follow: i }) => i ? J : !1 },
+    spring: { type: [Boolean, Object], default: ({ follow: a }) => a ? K : !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");
+  setup(a) {
+    const e = a, 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);
+    const f = F(), i = G(f, z), d = T(i.x, e.spring || void 0), y = T(i.y, e.spring || void 0);
     function g() {
-      const t = s.x.on("change", (r) => {
+      const t = i.x.on("change", (r) => {
         d.jump(r), t();
-      }), n = s.y.on("change", (r) => {
+      }), n = i.y.on("change", (r) => {
         y.jump(r), n();
       });
     }
-    const a = _(), C = q(g), { x: P, y: $ } = D(
+    const s = q(), C = D(g), { x: P, y: B } = J(
       e.spring ? { x: d, y } : f,
       w(e, "snapToTarget"),
-      a
+      s
     ), p = k(), u = M(() => {
       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")
       );
       if (t != null && t.length)
-        return Q;
-      const n = W(a.value.type, a.value, {
+        return U;
+      const n = Z(s.value.type, s.value, {
         matchPointerSize: e.snapToTarget,
         matchTextSize: e.matchTextSize
       });
@@ -52,7 +54,7 @@ const mt = /* @__PURE__ */ j({
         width: `${n.width}px`,
         height: `${n.height}px`
       };
-    }), B = Z(f, g);
+    }), $ = _(f, g);
     function b(t) {
       return (n, r) => `translate(-${t.x * 100}%, -${t.y * 100}%) ${r}`;
     }
@@ -63,10 +65,10 @@ const mt = /* @__PURE__ */ j({
       };
     }
     return (t, n) => (S(), v(X, { to: "body" }, [
-      o(B) ? (S(), v(o(N), { key: 0 }, {
+      o($) ? (S(), v(o(N), { key: 0 }, {
         default: l(() => [
           c(o(O), {
-            transition: e.transition || o(U)
+            transition: e.transition || o(W)
           }, {
             default: l(() => [
               c(o(R).div, H({
@@ -87,8 +89,8 @@ const mt = /* @__PURE__ */ j({
                 },
                 animate: [
                   "default",
-                  o(a).type,
-                  o(C) ? o(a).isPressed ? "pressed" : "" : "exit"
+                  o(s).type,
+                  !o(C) || !t.show ? "exit" : o(s).isPressed ? "pressed" : ""
                 ],
                 "transform-template": b(t.center),
                 "data-w": u.value.width,
@@ -104,7 +106,7 @@ const mt = /* @__PURE__ */ j({
                   originY: t.center.y,
                   ...e.style,
                   x: o(P),
-                  y: o($),
+                  y: o(B),
                   top: 0,
                   left: 0,
                   position: "fixed",

package/dist/es/components/Cursor/hooks/use-cursor-in-view.mjs

@@ -1,40 +1,37 @@
-import { noop as u } from "motion-v";
+import { noop as s } from "motion-v";
 import { ref as d, watch as f } from "vue";
-let i = null;
+let r = null;
 function m() {
   const e = /* @__PURE__ */ new Set();
   function n() {
     e.forEach((t) => t.show());
   }
-  function r() {
+  function o() {
     e.forEach((t) => t.hide());
   }
-  function s() {
-    document.body.addEventListener("mouseenter", n), document.body.addEventListener("mouseleave", r);
+  function i() {
+    document.body.addEventListener("mouseenter", n), document.body.addEventListener("mouseleave", o);
   }
-  function o() {
-    document.body.removeEventListener("mouseenter", n), document.body.removeEventListener("mouseleave", r);
+  function u() {
+    document.body.removeEventListener("mouseenter", n), document.body.removeEventListener("mouseleave", o);
   }
   return {
-    on: (t) => typeof window > "u" ? u : (e.size || s(), e.add(t), () => {
-      e.delete(t), e.size === 0 && o();
+    on: (t) => typeof window > "u" ? s : (e.size || i(), e.add(t), () => {
+      e.delete(t), e.size === 0 && u();
     })
   };
 }
 function c() {
-  return i || (i = m()), i;
+  return r || (r = m()), r;
 }
 function l(e) {
   const n = d(!0);
-  return f(n, (r, s, o) => {
-    const t = c().on({
-      show: () => {
-        n.value || (e(), n.value = !0);
-      },
-      hide: () => n.value = !1
-    });
-    o(t);
-  }, { immediate: !0 }), n;
+  return f(n, () => c().on({
+    show: () => {
+      n.value || (e(), n.value = !0);
+    },
+    hide: () => n.value = !1
+  }), { immediate: !0 }), n;
 }
 export {
   l as useCursorIsInView

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

@@ -1,7 +1,7 @@
-import { onlyMouse as g, onlyLeftClicks as m } from "../utils/only-mouse-events.mjs";
+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 a = null, e = {
+let d = null, e = {
   type: "default",
   isPressed: !1,
   fontSize: null,
@@ -14,53 +14,50 @@ function P() {
       }
     };
   const t = /* @__PURE__ */ new Set();
-  function s(n) {
-    e = { ...e, ...n }, t.forEach((o) => o(e));
+  function o(n) {
+    e = { ...e, ...n }, t.forEach((i) => i(e));
   }
-  const f = m(() => {
-    e.isPressed || s({ isPressed: !0 });
-  }), d = m(() => {
-    e.isPressed && s({ isPressed: !1 });
-  }), u = g(({ target: n }) => {
+  const u = v(() => {
+    e.isPressed || o({ isPressed: !0 });
+  }), f = v(() => {
+    e.isPressed && o({ isPressed: !1 });
+  }), l = g(({ target: n }) => {
     if (!n)
       return;
-    const [o, p] = z(n);
-    let i = !1;
-    const r = {};
-    o !== e.type && (r.type = o, i = !0);
-    const w = o === "pointer" && p ? p.getBoundingClientRect() : null;
-    if (w !== e.targetBoundingBox && (r.targetBoundingBox = w, i = !0), o === "text") {
-      const { fontSize: c } = window.getComputedStyle(
+    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(
         n
-      ), v = c ? parseInt(c) : null;
-      v !== e.fontSize && (r.fontSize = v, i = !0);
+      ), c = w ? parseInt(w) : null;
+      c !== e.fontSize && (s.fontSize = c, r = !0);
     } else
-      e.fontSize && (r.fontSize = null, i = !0);
-    i && s(r);
+      e.fontSize && (s.fontSize = null, r = !0);
+    r && o(s);
   });
-  function l() {
-    typeof window > "u" || (window.addEventListener("pointerover", u), window.addEventListener("pointerdown", f), window.addEventListener("pointerup", d));
+  function m() {
+    typeof window > "u" || (window.addEventListener("pointerover", l), window.addEventListener("pointerdown", u), window.addEventListener("pointerup", f));
   }
   function S() {
-    window.removeEventListener("pointerover", u), window.removeEventListener("pointerdown", f), window.removeEventListener("pointerup", d);
+    window.removeEventListener("pointerover", l), window.removeEventListener("pointerdown", u), window.removeEventListener("pointerup", f);
   }
   return {
-    onChange: (n) => (t.size || l(), t.add(n), () => {
+    onChange: (n) => (t.size || m(), t.add(n), () => {
       t.delete(n), t.size || S();
     })
   };
 }
 function y() {
-  return a || (a = P()), a;
+  return d || (d = P()), d;
 }
 function x() {
   const t = L({ ...e });
-  return h(t, (s, f, d) => {
-    const u = y().onChange((l) => {
-      t.value = l;
-    });
-    d(u);
-  }, { immediate: !0, flush: "post" }), t;
+  return h(t, () => y().onChange((o) => {
+    t.value = o;
+  }), { immediate: !0, flush: "post" }), t;
 }
 export {
   x as useCursorState

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-plus-vue",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Motion Plus Vue",
   "author": "",
   "license": "ISC",
@@ -35,7 +35,7 @@
   "size-limit": [
     {
       "path": "dist/es/components/AnimateNumber/index.mjs",
-      "limit": "3.5 kb",
+      "limit": "3.6 kb",
       "ignore": [
         "vue",
         "motion-v"
@@ -43,7 +43,7 @@
     },
     {
       "path": "dist/es/components/Cursor/index.mjs",
-      "limit": "2.5 kb",
+      "limit": "2.7 kb",
       "ignore": [
         "vue",
         "motion-v"