motion-plus-vue 0.0.2 → 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,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 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=>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 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,6 +10,8 @@ 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>;
@@ -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: {};
@@ -47,6 +51,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 +60,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/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/package.json

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