motion-plus-vue 1.1.5 → 1.2.0-alpha.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"),s=require("motion-v");function te(n,{locales:t,format:o},i,r){const d=new Intl.NumberFormat(t,o).formatToParts(Number(n));i&&d.unshift({type:"prefix",value:i}),r&&d.push({type:"suffix",value:r});const f=[],h=[],v=[],g=[],u={},l=m=>`${m}:${u[m]=(u[m]??-1)+1}`;let p="",w=!1,P=!1,y=0;for(const m of d){p+=m.value;const c=m.type==="minusSign"||m.type==="plusSign"?"sign":m.type;switch(c){case"integer":w=!0,h.push(...m.value.split("").map(k=>({type:c,value:parseInt(k)})));break;case"group":h.push({type:c,value:m.value});break;case"decimal":P=!0,v.push({type:c,value:m.value,key:l(c),originalIndex:y++});break;case"fraction":v.push(...m.value.split("").map(k=>({type:c,value:parseInt(k),key:l(c),originalIndex:y++})));break;default:(w||P?g:f).push({type:c,value:m.value,key:l(c),originalIndex:y++})}}const x=[];for(let m=h.length-1;m>=0;m--){const c=l(h[m].type);x.unshift({...h[m],key:c,originalIndex:m})}return{pre:f,integer:x,fraction:v,post:g,formatted:p}}const[ne,oe]=s.createContext("SectionContext");function Z(){const n={current:!0};return e.onMounted(()=>{n.current=!1}),n}function L(n){const{width:t,fontSize:o}=getComputedStyle(n);return`${parseFloat(t)/parseFloat(o)}em`}const S="var(--mask-height, 0.15em)",N="var(--mask-width, 0.5em)",b=`calc(${N} / var(--invert-x, 1))`,z="#000 0, transparent 71%",ie=`linear-gradient(to right, transparent 0, #000 ${b}, #000 calc(100% - ${b}), transparent),linear-gradient(to bottom, transparent 0, #000 ${S}, #000 calc(100% - ${S}), transparent 100%),radial-gradient(at bottom right, ${z}),radial-gradient(at bottom left, ${z}), radial-gradient(at top left, ${z}), radial-gradient(at top right, ${z})`,re=`100% calc(100% - ${S} * 2),calc(100% - ${b} * 2) 100%,${b} ${S},${b} ${S},${b} ${S},${b} ${S}`;s.addScaleCorrector({"--invert-x":{correct:(n,{treeScale:t,projectionDelta:o})=>o.x.scale*t.x}});const D={display:"flex",flexDirection:"column",alignItems:"center",position:"absolute",width:"100%"};function q(n){const t=e.ref();function o(r){t.value=r==null?void 0:r.$el}e.watch(()=>n.isPresent,r=>{var a;t.value&&((a=s.mountedStates.get(t.value))==null||a.setActive("exit",!r))});function i(r){var a;r.detail.isExit&&!n.isPresent&&((a=n.onRemove)==null||a.call(n,n.partKey))}return{root:t,getRoot:o,handleComplete:i}}const ae=e.defineComponent({__name:"NumberSymbol",props:{partKey:{},type:{},value:{},isPresent:{type:Boolean},onRemove:{type:Function},style:{}},setup(n){const t=n,{justify:o}=ne(),{getRoot:i,handleComplete:r}=q(t);return(a,d)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(i),layout:"position","data-state":a.isPresent?void 0:"exiting",style:e.normalizeStyle({display:"inline-flex",justifyContent:e.unref(o),padding:`calc(${e.unref(S)}/2) 0`,position:"relative",pointerEvents:a.isPresent?void 0:"none"}),"aria-hidden":!a.isPresent,onMotioncomplete:e.unref(r)},{default:e.withCtx(()=>[e.createVNode(e.unref(s.AnimatePresence),{mode:"popLayout","anchor-x":e.unref(o),initial:!1},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.unref(s.motion).span,{key:a.value,layout:e.unref(o)==="right"?"position":!1,initial:{opacity:0},animate:{opacity:[null,1]},exit:{opacity:[null,0],transition:{duration:.3}},style:{display:"inline-block",whiteSpace:"pre"},transition:{duration:.2}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.value),1)]),_:1},8,["layout"]))]),_:1},8,["anchor-x"])]),_:1},8,["data-state","style","aria-hidden","onMotioncomplete"]))}}),J=new WeakMap,se=e.defineComponent({__name:"NumberDigit",props:{value:{},initialValue:{default:void 0},isPresent:{type:Boolean},partKey:{},onRemove:{},style:{}},setup(n){const t=n,o=t.initialValue??t.value,i=Z(),r=s.useMotionConfig(),a=e.ref(),d=e.ref(Array(10).fill(null)),f=e.ref(),{getRoot:h,handleComplete:v,root:g}=q(t);let u=o;const l=e.ref(o);e.watch([()=>t.value,()=>t.isPresent],([y,x])=>{if(!x)return l.value=0;if(i.current)return e.nextTick(()=>{l.value=y});l.value=y},{immediate:!0});function p(y){var k;if(!a.value||y===u)return;const x=a.value.getBoundingClientRect(),m=(k=g.value)==null?void 0:k.getBoundingClientRect(),c=x.height*(y-u)+(x.top-(m?m.top||0:x.top));s.animate(a.value,{y:[c,0]},r.value.transition)}function w(y){if(i.current&&o===y||!d.value[y])return;const x=L(d.value[y]);g.value&&J.set(g.value,x),f.value=x}e.watch(l,y=>{w(y)},{immediate:!0,flush:"post"}),e.watch(l,(y,x,m)=>{p(y),m(()=>{u=y})},{immediate:!0,flush:"pre"});function P(y){return()=>e.createVNode("span",{key:y,style:{display:"inline-block",padding:`calc(${S}/2) 0`}},[y])}return(y,x)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(h),layout:"position","data-state":y.isPresent?void 0:"exiting","data-key":y.partKey,style:e.normalizeStyle({display:"inline-flex",justifyContent:"center",width:f.value,pointerEvents:y.isPresent?void 0:"none"}),"aria-hidden":!y.isPresent,onMotioncomplete:e.unref(v)},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"scope",ref:a,style:{display:"inline-flex",justifyContent:"center",flexDirection:"column",alignItems:"center",position:"relative"}},[l.value!==0?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle({...e.unref(D),bottom:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,m=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(m-1)),{key:m-1}))),128))],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(l.value)))),l.value!==9?(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({...e.unref(D),top:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(9-l.value,m=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(l.value+m)),{key:l.value+m}))),128))],4)):e.createCommentVNode("",!0)],512)]),_:1},8,["data-state","data-key","style","aria-hidden","onMotioncomplete"]))}}),E=e.defineComponent({__name:"NumberSection",props:{parts:{},justify:{default:"left"},mode:{},name:{},style:{}},setup(n){const t=n,o=e.ref(),i=s.useDomRef(),r=e.ref(),a=Z();e.watch(()=>t.parts,v=>{const g=new Map(v.map(l=>[l.key,{...l,isPresent:!0}]));f=[...f.filter(l=>!g.get(l.key)).map(l=>({...l,isPresent:!1})),...v].sort((l,p)=>d.value==="right"?l.isPresent===p.isPresent?l.originalIndex-p.originalIndex:l.isPresent?-1:1:d.value==="left"?l.isPresent===p.isPresent?l.originalIndex-p.originalIndex:l.isPresent?1:-1:l.originalIndex-p.originalIndex)},{flush:"pre"}),e.watch(()=>t.parts.map(v=>v.value).join(""),(v,g)=>{if(!r.value)return;if(a.current){i.value&&(i.value.style.width=L(r.value));return}const u=Array.from(r.value.children).map(p=>{if(!(p instanceof HTMLElement))return;if(p.dataset.state==="exiting"){const y=p.nextSibling;return p.remove(),()=>{r.value&&r.value.insertBefore(p,y)}}const w=J.get(p);if(!w)return;const P=p.style.width;return p.style.width=w,()=>{p.style.width=P}});function l(){const p=L(r.value);o.value=p}+v>+(g||0)?s.frame.read(l):l();for(let p=u.length-1;p>=0;p--){const w=u[p];w&&w()}},{immediate:!0,flush:"post"});const d=e.toRef(t,"justify");oe({justify:d});let f=t.parts;function h(v){f=f.filter(g=>g.key!==v)}return(v,g)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(i),class:e.normalizeClass(`number-section-${v.name}`),style:e.normalizeStyle({...v.style,display:"inline-flex",justifyContent:d.value,width:o.value}),layout:"position"},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"measuredRef",ref:r,style:{display:"inline-flex",justifyContent:"inherit",position:"relative"}},[g[0]||(g[0]=e.createTextVNode(" ​ ")),e.createVNode(e.unref(s.AnimatePresence),{mode:v.mode,"anchor-x":d.value,initial:!1},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(f),u=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:u.key},[u.type==="integer"||u.type==="fraction"?(e.openBlock(),e.createBlock(se,{key:u.key,"part-key":u.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:u.value,"is-present":u.isPresent??!0,"initial-value":e.unref(a).current?void 0:0,onRemove:h},null,8,["part-key","value","is-present","initial-value"])):(e.openBlock(),e.createBlock(ae,{key:u.type==="literal"?`${u.key}:${u.value}`:u.key,type:u.type,"part-key":u.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:u.value,"is-present":u.isPresent??!0,onRemove:h},null,8,["type","part-key","value","is-present"]))],64))),128))]),_:1},8,["mode","anchor-x"])],512)]),_:1},8,["class","style"]))}}),ue=e.defineComponent({__name:"Mask",setup(n){return(t,o)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{layout:"","aria-hidden":!0,style:e.normalizeStyle({display:"inline-flex","--invert-x":1,margin:`0 calc(-1*${e.unref(N)})`,padding:`calc(${e.unref(S)}/2) ${e.unref(N)}`,position:"relative",zIndex:-1,overflow:"clip",webkitMaskImage:e.unref(ie),webkitMaskSize:e.unref(re),webkitMaskPosition:"center, center, top left, top right, bottom right, bottom left",webkitMaskRepeat:"no-repeat"})},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["style"]))}}),le=e.defineComponent({name:"AnimateNumber",inheritAttrs:!1,__name:"AnimateNumber",props:{locales:{},format:{},transition:{},suffix:{},prefix:{},value:{},style:{}},setup(n){const t={opacity:{duration:1,ease:s.easeOut},layout:{type:"spring",duration:1,bounce:0},y:{type:"spring",duration:1,bounce:0}},o=n,i=e.computed(()=>{const f=o.value;return te(f,{locales:o.locales,format:o.format},o.prefix,o.suffix)}),r=s.useMotionConfig(),a=e.computed(()=>o.transition??r.value.transition??t);function d(){const{format:f,prefix:h,suffix:v,locales:g,value:u,...l}=o;return l}return(f,h)=>(e.openBlock(),e.createBlock(e.unref(s.LayoutGroup),null,{default:e.withCtx(()=>[e.createVNode(e.unref(s.MotionConfig),{transition:a.value},{default:e.withCtx(()=>[e.createVNode(e.unref(s.motion).div,e.mergeProps({...f.$attrs,...d()},{layout:"",style:{lineHeight:"1",...f.style,display:"inline-flex",isolation:"isolate",whiteSpace:"nowrap"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(s.motion).div,{layout:"","aria-label":i.value.formatted,style:{display:"inline-flex",direction:"ltr",isolation:"isolate",position:"relative",zIndex:-1}},{default:e.withCtx(()=>[e.createVNode(E,{style:e.normalizeStyle({padding:`calc(${e.unref(S)}/2) 0`}),"aria-hidden":!0,justify:"right",mode:"popLayout",parts:i.value.pre,name:"pre"},null,8,["style","parts"]),e.createVNode(ue,null,{default:e.withCtx(()=>[e.createVNode(E,{justify:"right",parts:i.value.integer,name:"integer",mode:"popLayout"},null,8,["parts"]),e.createVNode(E,{layout:"position",parts:i.value.fraction,name:"fraction",mode:"popLayout"},null,8,["parts"])]),_:1}),e.createVNode(E,{style:e.normalizeStyle({padding:`calc(${e.unref(S)}/2) 0`}),"aria-hidden":!0,layout:"position",mode:"popLayout",parts:i.value.post,name:"post"},null,8,["style","parts"])]),_:1},8,["aria-label"])]),_:1},16,["style"])]),_:1},8,["transition"])]),_:1}))}}),ce=le;function fe(){const n=document.createElement("style");return n.textContent=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("motion-v");function ke(o,{locales:t,format:n},r,i){const l=new Intl.NumberFormat(t,n).formatToParts(Number(o));r&&l.unshift({type:"prefix",value:r}),i&&l.push({type:"suffix",value:i});const f=[],g=[],w=[],h=[],u={},m=c=>`${c}:${u[c]=(u[c]??-1)+1}`;let y="",k=!1,x=!1,d=0;for(const c of l){y+=c.value;const p=c.type==="minusSign"||c.type==="plusSign"?"sign":c.type;switch(p){case"integer":k=!0,g.push(...c.value.split("").map(C=>({type:p,value:parseInt(C)})));break;case"group":g.push({type:p,value:c.value});break;case"decimal":x=!0,w.push({type:p,value:c.value,key:m(p),originalIndex:d++});break;case"fraction":w.push(...c.value.split("").map(C=>({type:p,value:parseInt(C),key:m(p),originalIndex:d++})));break;default:(k||x?h:f).push({type:p,value:c.value,key:m(p),originalIndex:d++})}}const v=[];for(let c=g.length-1;c>=0;c--){const p=m(g[c].type);v.unshift({...g[c],key:p,originalIndex:c})}return{pre:f,integer:v,fraction:w,post:h,formatted:y}}const[Se,Be]=a.createContext("SectionContext");function me(){const o={current:!0};return e.onMounted(()=>{o.current=!1}),o}function X(o){const{width:t,fontSize:n}=getComputedStyle(o);return`${parseFloat(t)/parseFloat(n)}em`}const E="var(--mask-height, 0.15em)",U="var(--mask-width, 0.5em)",V=`calc(${U} / var(--invert-x, 1))`,F="#000 0, transparent 71%",Ce=`linear-gradient(to right, transparent 0, #000 ${V}, #000 calc(100% - ${V}), transparent),linear-gradient(to bottom, transparent 0, #000 ${E}, #000 calc(100% - ${E}), transparent 100%),radial-gradient(at bottom right, ${F}),radial-gradient(at bottom left, ${F}), radial-gradient(at top left, ${F}), radial-gradient(at top right, ${F})`,ze=`100% calc(100% - ${E} * 2),calc(100% - ${V} * 2) 100%,${V} ${E},${V} ${E},${V} ${E},${V} ${E}`;a.addScaleCorrector({"--invert-x":{correct:(o,{treeScale:t,projectionDelta:n})=>n.x.scale*t.x}});const ie={display:"flex",flexDirection:"column",alignItems:"center",position:"absolute",width:"100%"};function ye(o){const t=e.ref();function n(i){t.value=i==null?void 0:i.$el}e.watch(()=>o.isPresent,i=>{var s;t.value&&((s=a.mountedStates.get(t.value))==null||s.setActive("exit",!i))});function r(i){var s;i.detail.isExit&&!o.isPresent&&((s=o.onRemove)==null||s.call(o,o.partKey,i.target))}return{root:t,getRoot:n,handleComplete:r}}const be=e.defineComponent({__name:"NumberSymbol",props:{partKey:{},type:{},value:{},isPresent:{type:Boolean},onRemove:{type:Function},style:{},layoutDependency:{},preInitial:{type:Boolean}},setup(o){const t=o,{justify:n}=Se(),{getRoot:r,handleComplete:i}=ye(t);return(s,l)=>(e.openBlock(),e.createBlock(e.unref(a.motion).span,{ref:e.unref(r),layout:"position","layout-dependency":s.layoutDependency,"data-state":s.isPresent?void 0:"exiting",style:e.normalizeStyle({display:"inline-flex",justifyContent:e.unref(n),padding:`calc(${e.unref(E)}/2) 0`,position:"relative",pointerEvents:s.isPresent?void 0:"none"}),"aria-hidden":!s.isPresent,onMotioncomplete:e.unref(i)},{default:e.withCtx(()=>[e.createVNode(e.unref(a.AnimatePresence),{mode:"popLayout","anchor-x":e.unref(n),initial:s.preInitial},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.unref(a.motion).span,{key:s.value,layout:e.unref(n)==="right"?"position":!1,"layout-dependency":s.layoutDependency,initial:{opacity:0,left:e.unref(n)==="right"&&s.preInitial===void 0?"-100%":void 0},animate:{opacity:[null,1],left:0},exit:{opacity:[null,0],transition:{opacity:{duration:.4}}},style:{display:"inline-block",whiteSpace:"pre",position:"relative"}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(s.value),1)]),_:1},8,["layout","layout-dependency","initial"]))]),_:1},8,["anchor-x","initial"])]),_:1},8,["layout-dependency","data-state","style","aria-hidden","onMotioncomplete"]))}}),Pe=new WeakMap,Ie=e.defineComponent({__name:"NumberDigit",props:{value:{},initialValue:{default:void 0},isPresent:{type:Boolean},partKey:{},onRemove:{},style:{},layoutDependency:{}},setup(o){const t=o,n=t.initialValue??t.value,r=me(),i=a.useMotionConfig(),s=e.ref(),l=e.ref(Array(10).fill(null)),f=e.ref(),{getRoot:g,handleComplete:w,root:h}=ye(t);let u=n;const m=e.ref(n);e.watch([()=>t.value,()=>t.isPresent],([d,v])=>{if(!v)return m.value=0;if(r.current)return e.nextTick(()=>{m.value=d});m.value=d},{immediate:!0});function y(d){var C;if(!s.value||d===u)return;const v=s.value.getBoundingClientRect(),c=(C=h.value)==null?void 0:C.getBoundingClientRect(),p=v.height*(d-u)+(v.top-(c?c.top||0:v.top));a.animate(s.value,{y:[p,0]},i.value.transition)}function k(d){if(r.current&&n===d||!l.value[d])return;const v=X(l.value[d]);h.value&&(Pe.set(h.value,v),h.value.style.width=v),f.value=v}e.watch(m,d=>{k(d)},{immediate:!0,flush:"sync"}),e.watch(m,async(d,v,c)=>{await e.nextTick(),y(d),c(()=>{u=d})},{immediate:!0,flush:"sync"});function x(d){return()=>e.createVNode("span",{key:d,style:{display:"inline-block",padding:`calc(${E}/2) 0`},ref:v=>{l.value[d]=v}},[d])}return(d,v)=>(e.openBlock(),e.createBlock(e.unref(a.motion).span,{ref:e.unref(g),layout:"position","layout-dependency":d.layoutDependency,"data-state":d.isPresent?void 0:"exiting","data-key":d.partKey,style:e.normalizeStyle({display:"inline-flex",justifyContent:"center",width:f.value,pointerEvents:d.isPresent?void 0:"none"}),"aria-hidden":!d.isPresent,onMotioncomplete:e.unref(w)},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"scope",ref:s,style:{display:"inline-flex",justifyContent:"center",flexDirection:"column",alignItems:"center",position:"relative"}},[m.value!==0?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle({...e.unref(ie),bottom:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,c=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(x(c-1)),{key:c-1}))),128))],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(x(m.value)))),m.value!==9?(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({...e.unref(ie),top:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(9-m.value,c=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(x(m.value+c)),{key:m.value+c}))),128))],4)):e.createCommentVNode("",!0)],512)]),_:1},8,["layout-dependency","data-state","data-key","style","aria-hidden","onMotioncomplete"]))}}),O=e.defineComponent({__name:"NumberSection",props:{parts:{},justify:{default:"left"},mode:{},name:{},style:{},layoutDependency:{}},setup(o){var h;const t=o,n=e.ref(),r=a.useDomRef(),i=e.ref(),s=me(),l=e.ref(t.parts);let f=t.name==="pre"&&!((h=t.parts)!=null&&h.length)?void 0:!1;e.watch(()=>t.parts,u=>{const m=new Map(u.map(x=>[x.key,{...x,isPresent:!0}])),y=l.value.filter(x=>!m.get(x.key)).map(x=>({...x,isPresent:!1})),k=u.sort((x,d)=>x.originalIndex-d.originalIndex);l.value=y.concat(k)},{flush:"pre"}),e.watch(()=>{var u;return(u=t.parts)==null?void 0:u.map(m=>m.value).join("")},async(u,m)=>{if(await e.nextTick(),f=!1,!i.value)return;if(s.current){r.value&&(r.value.style.width=X(i.value));return}const y=Array.from(i.value.children).map(x=>{if(x instanceof HTMLElement&&x.dataset.state==="exiting"){const d=x.nextSibling;return x.remove(),()=>{i.value&&i.value.insertBefore(x,d)}}}),k=X(i.value);n.value=k;for(let x=y.length-1;x>=0;x--){const d=y[x];d&&d()}},{flush:"post"});const g=e.toRef(t,"justify");Be({justify:g});function w(u,m){var y;l.value=l.value.filter(k=>k.key!==u),(y=m==null?void 0:m.parentElement)==null||y.removeChild(m)}return(u,m)=>(e.openBlock(),e.createBlock(e.unref(a.motion).span,{ref:e.unref(r),class:e.normalizeClass(`number-section-${u.name}`),style:e.normalizeStyle({...u.style,display:"inline-flex",justifyContent:g.value,width:n.value}),layout:"position","layout-dependency":u.layoutDependency},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"measuredRef",ref:i,style:{display:"inline-flex",justifyContent:"inherit",position:"relative"}},[m[0]||(m[0]=e.createTextVNode(" ​ ")),e.createVNode(e.unref(a.AnimatePresence),{mode:u.mode,"anchor-x":g.value,initial:!1},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,y=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:y.key},[y.type==="integer"||y.type==="fraction"?(e.openBlock(),e.createBlock(Ie,{key:y.key,"part-key":y.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:y.value,"is-present":y.isPresent??!0,"initial-value":e.unref(s).current?void 0:0,"layout-dependency":u.layoutDependency,onRemove:w},null,8,["part-key","value","is-present","initial-value","layout-dependency"])):(e.openBlock(),e.createBlock(be,{key:y.type==="literal"?`${y.key}:${y.value}`:y.key,type:y.type,"part-key":y.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:y.value,"is-present":y.isPresent??!0,"pre-initial":e.unref(f),"layout-dependency":u.layoutDependency,onRemove:w},null,8,["type","part-key","value","is-present","pre-initial","layout-dependency"]))],64))),128))]),_:1},8,["mode","anchor-x"])],512)]),_:1},8,["class","style","layout-dependency"]))}}),Ee=e.defineComponent({__name:"Mask",props:{layoutDependency:{}},setup(o){return(t,n)=>(e.openBlock(),e.createBlock(e.unref(a.motion).span,{layout:"","layout-dependency":t.layoutDependency,"aria-hidden":!0,style:e.normalizeStyle({display:"inline-flex","--invert-x":1,margin:`0 calc(-1*${e.unref(U)})`,padding:`calc(${e.unref(E)}/2) ${e.unref(U)}`,position:"relative",zIndex:-1,overflow:"clip",webkitMaskImage:e.unref(Ce),webkitMaskSize:e.unref(ze),webkitMaskPosition:"center, center, top left, top right, bottom right, bottom left",webkitMaskRepeat:"no-repeat"})},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["layout-dependency","style"]))}}),Te=e.defineComponent({name:"AnimateNumber",inheritAttrs:!1,__name:"AnimateNumber",props:{locales:{},format:{},transition:{},suffix:{},prefix:{},value:{},style:{},layoutDependency:{}},setup(o){const t={opacity:{duration:1,ease:a.easeOut},layout:{type:"spring",duration:1,bounce:0},y:{type:"spring",duration:1,bounce:0}},n=o,r=e.computed(()=>{const g=n.value;return ke(g,{locales:n.locales,format:n.format},n.prefix,n.suffix)}),i=a.useMotionConfig(),s=e.computed(()=>n.transition??i.value.transition??t);function l(){const{format:g,prefix:w,suffix:h,locales:u,value:m,layoutDependency:y,...k}=n;return k}const f=e.computed(()=>{if(n.layoutDependency!==void 0)return{layoutDependency:n.layoutDependency,value:n.value}});return(g,w)=>(e.openBlock(),e.createBlock(e.unref(a.LayoutGroup),null,{default:e.withCtx(()=>[e.createVNode(e.unref(a.MotionConfig),{transition:s.value},{default:e.withCtx(()=>[e.createVNode(e.unref(a.motion).div,e.mergeProps({...g.$attrs,...l()},{layout:"","layout-dependency":f.value,style:{lineHeight:"1",...g.style,display:"inline-flex",isolation:"isolate",whiteSpace:"nowrap"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(a.motion).div,{layout:"","layout-dependency":f.value,"aria-label":r.value.formatted,style:{display:"inline-flex",direction:"ltr",isolation:"isolate",position:"relative",zIndex:-1}},{default:e.withCtx(()=>[e.createVNode(O,{"layout-dependency":f.value,style:e.normalizeStyle({padding:`calc(${e.unref(E)}/2) 0`}),"aria-hidden":!0,justify:"right",mode:"popLayout",parts:r.value.pre,name:"pre"},null,8,["layout-dependency","style","parts"]),e.createVNode(Ee,{"layout-dependency":f.value},{default:e.withCtx(()=>[e.createVNode(O,{"layout-dependency":f.value,justify:"right",parts:r.value.integer,name:"integer",mode:"popLayout"},null,8,["layout-dependency","parts"]),e.createVNode(O,{"layout-dependency":f.value,layout:"position",parts:r.value.fraction,name:"fraction",mode:"popLayout"},null,8,["layout-dependency","parts"])]),_:1},8,["layout-dependency"]),e.createVNode(O,{"layout-dependency":f.value,style:e.normalizeStyle({padding:`calc(${e.unref(E)}/2) 0`}),"aria-hidden":!0,layout:"position",mode:"popLayout",parts:r.value.post,name:"post"},null,8,["layout-dependency","style","parts"])]),_:1},8,["layout-dependency","aria-label"])]),_:1},16,["layout-dependency","style"])]),_:1},8,["transition"])]),_:1}))}}),$e=Te;function Le(){const o=document.createElement("style");return o.textContent=`
       * {
           cursor: none !important;
       }
@@ -6,4 +6,4 @@
       [data-motion-cursor="pointer"] {
           background-color: #333;
       }
-    `,document.head.appendChild(n),()=>{document.head.removeChild(n)}}function de(n){e.watch(n,(t,o,i)=>{const r=t?fe():s.noop;return i(()=>{r()})},{immediate:!0,flush:"post"})}function R(n){return t=>{t.pointerType==="mouse"&&n(t)}}function F(n){return R(t=>{t.button===0&&n(t)})}let V,_;function pe(){V=s.motionValue(0),_=s.motionValue(0);let n=0,t=0;function o(){V.set(n),_.set(t)}typeof window<"u"&&window.addEventListener("pointermove",R(i=>{n=i.clientX,t=i.clientY,s.frame.update(o)}))}function j(){return V||pe(),{x:V,y:_}}function me(n,t){return{x:s.useTransform(()=>n.x.get()+t.value.x),y:s.useTransform(()=>n.y.get()+t.value.y)}}function ye(n){return n.closest("[data-cursor]")}function ve(n){return n.closest('a, button, input[type="button"]:not(:disabled)')}function ge(n){return window.getComputedStyle(n).userSelect==="none"?null:n.closest("p, textarea:not(:disabled), input[type='text']:not(:disabled), h1, h2, h3, h4, h5, h6")}function he(n){let t=ye(n);return t?[t.dataset.cursor,t]:(t=ve(n),t?["pointer",t]:(t=ge(n),t?["text",t]:["default",null]))}let M=null,C={type:"default",isPressed:!1,fontSize:null,targetBoundingBox:null,target:null,zone:null};function we(n){let t=null;if("closest"in n){const o=n.closest("[data-cursor-zone]");o instanceof HTMLElement&&(t=o.dataset.cursorZone||null)}return t}function xe(){if(typeof window>"u")return{onChange:()=>()=>{}};const n=new Set;function t(f){C={...C,...f},n.forEach(h=>h(C))}const o=F(()=>{C.isPressed||t({isPressed:!0})}),i=F(()=>{C.isPressed&&t({isPressed:!1})}),r=R(({target:f})=>{if(!f)return;const[h,v]=he(f);let g=!1;const u={target:v,zone:we(f)};h!==C.type&&(u.type=h,g=!0),u.zone!==C.zone&&(C.zone=u.zone,g=!0);const l=h==="pointer"&&v?v.getBoundingClientRect():null;if(l!==C.targetBoundingBox&&(u.targetBoundingBox=l,g=!0),h==="text"){const{fontSize:p}=window.getComputedStyle(f),w=p?parseInt(p):null;w!==C.fontSize&&(u.fontSize=w,g=!0)}else C.fontSize&&(u.fontSize=null,g=!0);g&&t(u)});function a(){typeof window>"u"||(window.addEventListener("pointerover",r),window.addEventListener("pointerdown",o),window.addEventListener("pointerup",i))}function d(){window.removeEventListener("pointerover",r),window.removeEventListener("pointerdown",o),window.removeEventListener("pointerup",i)}return{onChange:f=>(n.size||a(),n.add(f),()=>{n.delete(f),n.size||d()})}}function ke(){return M||(M=xe()),M}function A(){const n=e.ref({...C});return e.watch(n,()=>ke().onChange(t=>{n.value=t}),{immediate:!0,flush:"post"}),n}let T=null;function Be(){const n=new Set;function t(){n.forEach(a=>a.show())}function o(){n.forEach(a=>a.hide())}function i(){document.body.addEventListener("mouseenter",t),document.body.addEventListener("mouseleave",o)}function r(){document.body.removeEventListener("mouseenter",t),document.body.removeEventListener("mouseleave",o)}return{on:a=>typeof window>"u"?s.noop:(n.size||i(),n.add(a),()=>{n.delete(a),n.size===0&&r()})}}function Ce(){return T||(T=Be()),T}function Q(n){const t=e.ref(!0);return e.watch(t,()=>Ce().on({show:()=>{t.value||(n(),t.value=!0)},hide:()=>t.value=!1}),{immediate:!0}),t}const H={x:0,y:0},Se={x:.5,y:.5},Pe={duration:0},be={stiffness:1e3,damping:100},$e={duration:.15,ease:[.38,.12,.29,1]},W={magneticOptions:{morph:!0,padding:5,snap:.8}},X=17,Y=31,K=4,ze=20;function I(n,t,o){const i={width:(o==null?void 0:o.width)??n,height:(o==null?void 0:o.height)??t};return typeof i.width=="number"&&(i.width=`${i.width}px`),typeof i.height=="number"&&(i.height=`${i.height}px`),i}function Ee({type:n,state:t,hasChildren:o,style:i,isMagnetic:r,magneticOptions:a,matchTextSize:d}){const f=r&&t.targetBoundingBox;if(o&&!f)return I("auto","auto",i);const{padding:h,morph:v}=a;switch(n){case"pointer":if(r&&v&&t.targetBoundingBox){const{width:g,height:u}=t.targetBoundingBox;return{width:`${g+h*2}px`,height:`${u+h*2}px`}}return I(Y,Y,i);case"text":return d&&t.fontSize?{width:`${K}px`,height:`${t.fontSize}px`}:I(K,ze,i);default:return I(X,X,i)}}function Ie({x:n,y:t},o){const i=e.ref(n.prev!==void 0||t.prev!==void 0);return e.watch(i,()=>{if(i.value)return;const r=()=>{i.value=!0,o(),a()},a=s.pipe(n.on("change",r),t.on("change",r));return()=>a()},{immediate:!0}),i}function Ve(n,t,o){return s.useTransform(()=>s.mix(n.value.get(),t.get(),o.get()))}function G(n,t,o){const i=s.useSpring(0,{stiffness:600,damping:50}),r=s.useMotionValue(0),a=Ve(n,i,r);return e.watch(()=>o==null?void 0:o.value,(d,f)=>{d?(!f&&!r.isAnimating()?i.jump(d):i.set(d),s.animate(r,t.value||0)):s.animate(r,0)},{immediate:!0,flush:"sync"}),a}function Me(n,t,o,i){const r=G(e.computed(()=>n.value.x),i,e.computed(()=>o.value.targetBoundingBox?o.value.targetBoundingBox.left+o.value.targetBoundingBox.width/2:void 0)),a=G(e.computed(()=>n.value.y),i,e.computed(()=>o.value.targetBoundingBox?o.value.targetBoundingBox.top+o.value.targetBoundingBox.height/2:void 0));return e.computed(()=>t.value?{x:r,y:a}:n.value)}const Te=e.defineComponent({name:"Cursor",inheritAttrs:!1,__name:"Cursor",props:{follow:{type:Boolean,default:!1},center:{default:({follow:n})=>n?H:Se},offset:{default:()=>H},spring:{type:[Boolean,Object],default:({follow:n})=>n?be:!1},matchTextSize:{type:Boolean,default:!0},magnetic:{type:[Boolean,Object],default:!1},transition:{},variants:{},style:{},show:{type:Boolean,default:!0}},setup(n){const t=n,{offset:o,magnetic:i}=e.toRefs(t),r=s.useReducedMotion();de(()=>!r.value&&!t.follow);const a=j(),d=me(a,o),f=s.useSpring(d.x,t.spring||void 0),h=s.useSpring(d.y,t.spring||void 0),v=e.computed(()=>typeof t.magnetic=="object"?{...W.magneticOptions,...t.magnetic}:W.magneticOptions);function g(){const c=d.x.on("change",B=>{f.jump(B),c()}),k=d.y.on("change",B=>{h.jump(B),k()})}const u=A(),l=Q(g),p=Me(e.computed(()=>t.spring?{x:f,y:h}:a),e.computed(()=>!!i.value),u,e.computed(()=>v.value&&v.value.snap)),w=e.useSlots(),P=e.computed(()=>{var B,$;const c=($=(B=w.default)==null?void 0:B.call(w))==null?void 0:$.filter(O=>O.type!==Symbol.for("v-cmt"));return Ee({type:u.value.type,state:u.value,hasChildren:!!(c!=null&&c.length),isMagnetic:!!t.magnetic,style:t.style,magneticOptions:v.value,matchTextSize:t.matchTextSize})}),y=Ie(a,g);function x(c){return(k,B)=>`translate(-${c.x*100}%, -${c.y*100}%) ${B}`}function m(){const{follow:c,center:k,offset:B,spring:$,matchTextSize:O,magnetic:Ne,...ee}=t;return ee}return(c,k)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.unref(y)?(e.openBlock(),e.createBlock(e.unref(s.LayoutGroup),{key:0},{default:e.withCtx(()=>[e.createVNode(e.unref(s.MotionConfig),{transition:e.unref(r)?e.unref(Pe):c.transition||e.unref($e)},{default:e.withCtx(()=>{var B,$;return[e.createVNode(e.unref(s.motion).div,e.mergeProps({layout:"","data-motion-cursor":c.follow?"follow":"pointer","data-framer-portal-id":"motion-cursor",initial:"exit",exit:"exit"},{...c.$attrs,...m()},{variants:{pressed:c.follow?{}:{scale:.9},...c.variants,default:{opacity:1,scale:1,...(B=c.variants)==null?void 0:B.default},exit:{opacity:0,scale:0,...($=c.variants)==null?void 0:$.exit}},animate:["default",e.unref(u).type,e.unref(i)&&e.unref(u).targetBoundingBox?"magnetic":"",!e.unref(l)||!c.show?"exit":e.unref(u).isPressed?"pressed":""],"transform-template":x(c.center),style:{borderRadius:c.follow?0:20,zIndex:c.follow?99998:99999,willChange:"transform",contain:"layout",originX:c.center.x,originY:c.center.y,...c.style,width:P.value.width,height:P.value.height,x:e.unref(p).x,y:e.unref(p).y,top:0,left:0,position:"fixed",pointerEvents:"none"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(s.AnimatePresence),null,{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default")]),_:3})]),_:3},16,["data-motion-cursor","variants","animate","transform-template","style"])]}),_:3},8,["transition"])]),_:3})):e.createCommentVNode("",!0)]))}});function U(n,t,o){const i=s.useMotionValue(0),r=s.useMotionValue(0),a=s.useMotionValue(0);return e.watch(()=>o==null?void 0:o.value,d=>{if(typeof d=="number"){s.animate(a,1);const f=()=>{r.set(t*(n.get()-d))};return f(),n.on("change",f)}else s.animate(a,0)},{immediate:!0,flush:"post"}),s.useTransform(()=>s.mix(i.get(),r.get(),a.get()))}function Le(n,t=.1){const o=A(),i=j(),r=e.computed(()=>o.value.targetBoundingBox&&o.value.target===n.value),a=U(i.x,t,e.computed(()=>r.value?o.value.targetBoundingBox.left+o.value.targetBoundingBox.width/2:void 0)),d=U(i.y,t,e.computed(()=>r.value?o.value.targetBoundingBox.top+o.value.targetBoundingBox.height/2:void 0));return{x:a,y:d}}exports.AnimateNumber=ce;exports.Cursor=Te;exports.useCursorIsInView=Q;exports.useCursorState=A;exports.useMagneticPull=Le;exports.usePointerPosition=j;
+    `,document.head.appendChild(o),()=>{document.head.removeChild(o)}}function Me(o){e.watch(o,(t,n,r)=>{const i=t?Le():a.noop;return r(()=>{i()})},{immediate:!0,flush:"post"})}function G(o){return t=>{t.pointerType==="mouse"&&o(t)}}function re(o){return G(t=>{t.button===0&&o(t)})}let A,Y;function Ve(){A=a.motionValue(0),Y=a.motionValue(0);let o=0,t=0;function n(){A.set(o),Y.set(t)}typeof window<"u"&&window.addEventListener("pointermove",G(r=>{o=r.clientX,t=r.clientY,a.frame.update(n)}))}function Z(){return A||Ve(),{x:A,y:Y}}function Re(o,t){return{x:a.useTransform(()=>o.x.get()+t.value.x),y:a.useTransform(()=>o.y.get()+t.value.y)}}function De(o){return o.closest("[data-cursor]")}function Ne(o){return o.closest('a, button, input[type="button"]:not(:disabled)')}function Fe(o){return window.getComputedStyle(o).userSelect==="none"?null:o.closest("p, textarea:not(:disabled), input[type='text']:not(:disabled), h1, h2, h3, h4, h5, h6")}function Oe(o){let t=De(o);return t?[t.dataset.cursor,t]:(t=Ne(o),t?["pointer",t]:(t=Fe(o),t?["text",t]:["default",null]))}let K=null,I={type:"default",isPressed:!1,fontSize:null,targetBoundingBox:null,target:null,zone:null};function _e(o){let t=null;if("closest"in o){const n=o.closest("[data-cursor-zone]");n instanceof HTMLElement&&(t=n.dataset.cursorZone||null)}return t}function Ae(){if(typeof window>"u")return{onChange:()=>()=>{}};const o=new Set;function t(f){I={...I,...f},o.forEach(g=>g(I))}const n=re(()=>{I.isPressed||t({isPressed:!0})}),r=re(()=>{I.isPressed&&t({isPressed:!1})}),i=G(({target:f})=>{if(!f)return;const[g,w]=Oe(f);let h=!1;const u={target:w,zone:_e(f)};g!==I.type&&(u.type=g,h=!0),u.zone!==I.zone&&(I.zone=u.zone,h=!0);const m=g==="pointer"&&w?w.getBoundingClientRect():null;if(m!==I.targetBoundingBox&&(u.targetBoundingBox=m,h=!0),g==="text"){const{fontSize:y}=window.getComputedStyle(f),k=y?parseInt(y):null;k!==I.fontSize&&(u.fontSize=k,h=!0)}else I.fontSize&&(u.fontSize=null,h=!0);h&&t(u)});function s(){typeof window>"u"||(window.addEventListener("pointerover",i),window.addEventListener("pointerdown",n),window.addEventListener("pointerup",r))}function l(){window.removeEventListener("pointerover",i),window.removeEventListener("pointerdown",n),window.removeEventListener("pointerup",r)}return{onChange:f=>(o.size||s(),o.add(f),()=>{o.delete(f),o.size||l()})}}function je(){return K||(K=Ae()),K}function J(){const o=e.ref({...I});return e.watch(o,()=>je().onChange(t=>{o.value=t}),{immediate:!0,flush:"post"}),o}let W=null;function He(){const o=new Set;function t(){o.forEach(s=>s.show())}function n(){o.forEach(s=>s.hide())}function r(){document.body.addEventListener("mouseenter",t),document.body.addEventListener("mouseleave",n)}function i(){document.body.removeEventListener("mouseenter",t),document.body.removeEventListener("mouseleave",n)}return{on:s=>typeof window>"u"?a.noop:(o.size||r(),o.add(s),()=>{o.delete(s),o.size===0&&i()})}}function Ke(){return W||(W=He()),W}function ve(o){const t=e.ref(!0);return e.watch(t,()=>Ke().on({show:()=>{t.value||(o(),t.value=!0)},hide:()=>t.value=!1}),{immediate:!0}),t}const ae={x:0,y:0},We={x:.5,y:.5},Xe={duration:0},Ue={stiffness:1e3,damping:100},Ye={duration:.15,ease:[.38,.12,.29,1]},se={magneticOptions:{morph:!0,padding:5,snap:.8}},ue=17,le=31,ce=4,qe=20;function _(o,t,n){const r={width:(n==null?void 0:n.width)??o,height:(n==null?void 0:n.height)??t};return typeof r.width=="number"&&(r.width=`${r.width}px`),typeof r.height=="number"&&(r.height=`${r.height}px`),r}function Ge({type:o,state:t,hasChildren:n,style:r,isMagnetic:i,magneticOptions:s,matchTextSize:l}){const f=i&&t.targetBoundingBox;if(n&&!f)return _("auto","auto",r);const{padding:g,morph:w}=s;switch(o){case"pointer":if(i&&w&&t.targetBoundingBox){const{width:h,height:u}=t.targetBoundingBox;return{width:`${h+g*2}px`,height:`${u+g*2}px`}}return _(le,le,r);case"text":return l&&t.fontSize?{width:`${ce}px`,height:`${t.fontSize}px`}:_(ce,qe,r);default:return _(ue,ue,r)}}function Ze({x:o,y:t},n){const r=e.ref(o.prev!==void 0||t.prev!==void 0);return e.watch(r,()=>{if(r.value)return;const i=()=>{r.value=!0,n(),s()},s=a.pipe(o.on("change",i),t.on("change",i));return()=>s()},{immediate:!0}),r}function Je(o,t,n){return a.useTransform(()=>a.mix(o.value.get(),t.get(),n.get()))}function de(o,t,n){const r=a.useSpring(0,{stiffness:600,damping:50}),i=a.useMotionValue(0),s=Je(o,r,i);return e.watch(()=>n==null?void 0:n.value,(l,f)=>{l?(!f&&!i.isAnimating()?r.jump(l):r.set(l),a.animate(i,t.value||0)):a.animate(i,0)},{immediate:!0,flush:"sync"}),s}function Qe(o,t,n,r){const i=de(e.computed(()=>o.value.x),r,e.computed(()=>n.value.targetBoundingBox?n.value.targetBoundingBox.left+n.value.targetBoundingBox.width/2:void 0)),s=de(e.computed(()=>o.value.y),r,e.computed(()=>n.value.targetBoundingBox?n.value.targetBoundingBox.top+n.value.targetBoundingBox.height/2:void 0));return e.computed(()=>t.value?{x:i,y:s}:o.value)}const et=e.defineComponent({name:"Cursor",inheritAttrs:!1,__name:"Cursor",props:{follow:{type:Boolean,default:!1},center:{default:({follow:o})=>o?ae:We},offset:{default:()=>ae},spring:{type:[Boolean,Object],default:({follow:o})=>o?Ue:!1},matchTextSize:{type:Boolean,default:!0},magnetic:{type:[Boolean,Object],default:!1},transition:{},variants:{},style:{},show:{type:Boolean,default:!0}},setup(o){const t=o,{offset:n,magnetic:r}=e.toRefs(t),i=a.useReducedMotion();Me(()=>!i.value&&!t.follow);const s=Z(),l=Re(s,n),f=a.useSpring(l.x,t.spring||void 0),g=a.useSpring(l.y,t.spring||void 0),w=e.computed(()=>typeof t.magnetic=="object"?{...se.magneticOptions,...t.magnetic}:se.magneticOptions);function h(){const p=l.x.on("change",b=>{f.jump(b),p()}),C=l.y.on("change",b=>{g.jump(b),C()})}const u=J(),m=ve(h),y=Qe(e.computed(()=>t.spring?{x:f,y:g}:s),e.computed(()=>!!r.value),u,e.computed(()=>w.value&&w.value.snap)),k=e.useSlots(),x=e.computed(()=>{var b,T;const p=(T=(b=k.default)==null?void 0:b.call(k))==null?void 0:T.filter($=>$.type!==Symbol.for("v-cmt"));return Ge({type:u.value.type,state:u.value,hasChildren:!!(p!=null&&p.length),isMagnetic:!!t.magnetic,style:t.style,magneticOptions:w.value,matchTextSize:t.matchTextSize})}),d=Ze(s,h);function v(p){return(C,b)=>`translate(-${p.x*100}%, -${p.y*100}%) ${b}`}function c(){const{follow:p,center:C,offset:b,spring:T,matchTextSize:$,magnetic:R,...B}=t;return B}return(p,C)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.unref(d)?(e.openBlock(),e.createBlock(e.unref(a.LayoutGroup),{key:0},{default:e.withCtx(()=>[e.createVNode(e.unref(a.MotionConfig),{transition:e.unref(i)?e.unref(Xe):p.transition||e.unref(Ye)},{default:e.withCtx(()=>{var b,T;return[e.createVNode(e.unref(a.motion).div,e.mergeProps({layout:"","data-motion-cursor":p.follow?"follow":"pointer","data-framer-portal-id":"motion-cursor",initial:"exit",exit:"exit"},{...p.$attrs,...c()},{variants:{pressed:p.follow?{}:{scale:.9},...p.variants,default:{opacity:1,scale:1,...(b=p.variants)==null?void 0:b.default},exit:{opacity:0,scale:0,...(T=p.variants)==null?void 0:T.exit}},animate:["default",e.unref(u).type,e.unref(r)&&e.unref(u).targetBoundingBox?"magnetic":"",!e.unref(m)||!p.show?"exit":e.unref(u).isPressed?"pressed":""],"transform-template":v(p.center),style:{borderRadius:p.follow?0:20,zIndex:p.follow?99998:99999,willChange:"transform",contain:"layout",originX:p.center.x,originY:p.center.y,...p.style,width:x.value.width,height:x.value.height,x:e.unref(y).x,y:e.unref(y).y,top:0,left:0,position:"fixed",pointerEvents:"none"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(a.AnimatePresence),null,{default:e.withCtx(()=>[e.renderSlot(p.$slots,"default")]),_:3})]),_:3},16,["data-motion-cursor","variants","animate","transform-template","style"])]}),_:3},8,["transition"])]),_:3})):e.createCommentVNode("",!0)]))}});function fe(o,t,n){const r=a.useMotionValue(0),i=a.useMotionValue(0),s=a.useMotionValue(0);return e.watch(()=>n==null?void 0:n.value,l=>{if(typeof l=="number"){a.animate(s,1);const f=()=>{i.set(t*(o.get()-l))};return f(),o.on("change",f)}else a.animate(s,0)},{immediate:!0,flush:"post"}),a.useTransform(()=>a.mix(r.get(),i.get(),s.get()))}function tt(o,t=.1){const n=J(),r=Z(),i=e.computed(()=>n.value.targetBoundingBox&&n.value.target===o.value),s=fe(r.x,t,e.computed(()=>i.value?n.value.targetBoundingBox.left+n.value.targetBoundingBox.width/2:void 0)),l=fe(r.y,t,e.computed(()=>i.value?n.value.targetBoundingBox.top+n.value.targetBoundingBox.height/2:void 0));return{x:s,y:l}}const[nt,ot]=a.createContext("TickerItemContext"),q=e.defineComponent({__name:"TickerItem",props:{offset:{},axis:{},listSize:{},containerPaddingStart:{},bounds:{},itemIndex:{},cloneIndex:{}},setup(o){const t=o,n=a.useMotionValue(0);a.useTransform(()=>{const i=t.offset.get(),{start:s,end:l}=t.bounds;return!s&&!l||!t.listSize?n.set(0):i+l<=-t.containerPaddingStart?n.set(t.listSize):n.set(0)});const r=a.useMotionValue(0);return a.useTransform(()=>{const{offset:i,listSize:s,bounds:l}=t,{start:f,end:g}=l,w=i.get(),h=n.get();return!f&&!g||!s?r.set(0):r.set(w+f+h)}),ot({offset:r}),(i,s)=>(e.openBlock(),e.createBlock(e.unref(a.motion).li,e.mergeProps(i.$attrs,{class:i.cloneIndex===void 0?"ticker-item":"clone-item","aria-hidden":i.cloneIndex!==void 0?!0:void 0,style:{flexShrink:0,flexGrow:0,x:i.axis==="x"?e.unref(n):0,y:i.axis==="y"?e.unref(n):0}}),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default")]),_:3},16,["class","aria-hidden","style"]))}});function ge(o,t,n){let r=!1;e.onMounted(()=>{const i=o.value;if(!i)return;const s=t.value==="x"?"scrollLeft":"scrollTop",l=t.value==="x"?"offsetLeft":"offsetTop",f=t.value==="x"?"ArrowLeft":"ArrowUp",g=t.value==="x"?"ArrowRight":"ArrowDown";let w=[],h=0;const u=()=>{const v=w[h];v.focus(),n.set(-v[l]),i[s]=0,a.frame.render(()=>{i[s]=0})},m=v=>{if(v.key==="Tab"){v.preventDefault(),x();const c=Array.from(document.querySelectorAll('a, button, input, textarea, select, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]')).filter(a.isHTMLElement);c.sort(it);const p=c[v.shiftKey?0:c.length-1],C=v.shiftKey?c.length-1:0;if(i.contains(p)){c[C].focus();return}else{const b=c.indexOf(w[h]),T=v.shiftKey?-1:1;for(let $=b;$<c.length&&$>=0;$+=T){const R=c[$];if(!i.contains(R)){R.focus();return}}}return}else v.key===f?h--:v.key===g&&h++;h=a.wrap(0,w.length,h),u()},y=()=>{r||(r=!0,w=Array.from(i.querySelectorAll('.ticker-item a, .ticker-item button, .ticker-item input, .ticker-item textarea, .ticker-item select, .ticker-item [tabindex]:not([tabindex="-1"]), .ticker-item [contenteditable="true"]')).filter(a.isHTMLElement),h=0,u(),window.addEventListener("focus",k,!0),window.addEventListener("blur",k,!0),i.addEventListener("keydown",m))},k=v=>{(!v.target||!(v.target instanceof HTMLElement)||!i.contains(v.target))&&x()},x=()=>{r&&(r=!1,window.removeEventListener("focus",k,!0),window.removeEventListener("blur",k,!0),i.removeEventListener("keydown",m))},d=v=>{const{target:c}=v;a.isHTMLElement(c)&&(r||y())};i.addEventListener("focus",d,!0),e.onUnmounted(()=>{i.removeEventListener("focus",d),x()})})}function it(o,t){return o.tabIndex>=1&&t.tabIndex>=1?o.tabIndex-t.tabIndex:o.tabIndex>=1&&t.tabIndex<=0?-1:t.tabIndex>=1&&o.tabIndex<=0?1:0}const pe={start:0,end:0};function he(o=[]){const t=[];for(const n of o)n.type!==e.Comment&&(n.type===e.Fragment&&Array.isArray(n.children)?t.push(...he(n.children)):t.push(n));return t}function rt(o){return typeof o=="function"||Object.prototype.toString.call(o)==="[object Object]"&&!e.isVNode(o)}const at=e.defineComponent({__name:"Ticker",props:{axis:{default:"x"},style:{},velocity:{default:50},hoverFactor:{default:1},gap:{default:10},align:{default:"center"},offset:{}},setup(o){const t=o,n=e.reactive({listSize:0,containerSize:0,containerPaddingStart:0,containerPaddingEnd:0,itemSizes:[]}),r=e.ref(!1),i=a.useMotionValue(1),s=a.useMotionValue(0),l=e.computed(()=>t.offset??s),f=a.useMotionValue(0);a.useTransform(()=>(f.set(a.wrap(-n.listSize-t.gap-n.containerPaddingStart,-n.containerPaddingStart,l.value.get())),f.get()));const g=a.useMotionValue(0),w=e.computed(()=>r.value?g:f),h=e.computed(()=>t.align==="start"?"flex-start":t.align==="center"?"center":"flex-end"),u=a.useDomRef(),m=a.useDomRef(),y=a.useInView(u,{margin:"100px"}),k=a.useReducedMotion();function x(){if(!u.value||!m.value)return;const{axis:B}=t,S=B==="x"?"offsetWidth":"offsetHeight",z=B==="x"?"offsetLeft":"offsetTop",P=B==="x"?"paddingLeft":"paddingTop",D=B==="x"?"paddingRight":"paddingBottom",N=u.value,j=m.value.querySelectorAll(".ticker-item");if(!j.length)return;let ee=!1;const M=[];for(let L=0;L<j.length;L++){const H=j[L];M.push({start:H[z],end:H[z]+H[S]}),(!n.itemSizes[L]||M[L].start!==n.itemSizes[L].start||M[L].end!==n.itemSizes[L].end)&&(ee=!0)}const te=N[S],ne=M[M.length-1].end-M[0].start,oe=window.getComputedStyle(N),xe=parseInt(oe[P]??0),we=parseInt(oe[D]??0);(ne!==n.listSize||te!==n.containerSize||ee)&&(n.listSize=ne,n.containerSize=te,n.containerPaddingStart=xe,n.containerPaddingEnd=we,n.itemSizes=M)}const d=e.useSlots(),v=e.computed(()=>{var B;return he((B=d==null?void 0:d.items)==null?void 0:B.call(d))});e.watch([v,y,u],(B,S,z)=>{if(!y.value||!u.value)return;x();const P=a.resize(u.value,x);z(P)},{immediate:!0,flush:"pre"});const c=e.computed(()=>n.containerSize>0&&n.listSize>0);a.useAnimationFrame((B,S)=>{if(c.value&&y.value&&l.value===s&&!k.value){const z=S/1e3*(t.velocity*i.get());l.value.set(l.value.get()-z)}});const p=e.computed(()=>{let B=0;if(!c.value||!n.containerSize)return 0;let S=0;const z=Math.max(...n.itemSizes.map(P=>P.end-P.start));for(;S<n.containerSize+n.containerPaddingStart;)S=(n.listSize+t.gap)*(B+1)-z,B++;return Math.max(B-1,0)}),C=e.computed(()=>n.listSize===0?0:(n.listSize+t.gap)*(p.value+1)),b=e.computed(()=>{const B=[];for(let S=0;S<p.value;S++)v.value.forEach((z,P)=>{const D=n.itemSizes[P],N=(n.listSize+t.gap)*(S+1),Q=D?{start:D.start+N,end:D.end+N}:pe;B.push(e.createVNode(q,{key:`clone-${S}-${P}`,offset:w.value,axis:t.axis,listSize:C.value,cloneIndex:P,bounds:Q,containerPaddingStart:n.containerPaddingStart},rt(z)?z:{default:()=>[z]}))});return B}),T=e.toRef(t,"axis");ge(u,T,g);const $={display:"flex",position:"relative",overflow:"hidden"},R=e.computed(()=>({display:"flex",position:"relative",willChange:"transform",listStyleType:"none",padding:0,margin:0,justifyContent:"flex-start",flexDirection:t.axis==="x"?"row":"column",gap:`${t.gap}px`,alignItems:h.value,x:t.axis==="x"?w.value:0,y:t.axis==="y"?w.value:0,opacity:c.value?1:0}));return(B,S)=>(e.openBlock(),e.createBlock(e.unref(a.motion).div,e.mergeProps({...B.$attrs},{ref_key:"containerRef",ref:u,"data-size":n.listSize,style:{...$,...t.style},onFocusCapture:S[0]||(S[0]=()=>{r.value=!0}),onBlurCapture:S[1]||(S[1]=()=>{r.value=!1,l.value.set(e.unref(g).get())}),onPointerenter:S[2]||(S[2]=()=>{e.unref(a.animate)(e.unref(i),B.hoverFactor)}),onPointerleave:S[3]||(S[3]=()=>{e.unref(a.animate)(e.unref(i),1)})}),{default:e.withCtx(()=>[e.createVNode(e.unref(a.motion).ul,{ref_key:"listRef",ref:m,style:e.normalizeStyle(R.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,(z,P)=>(e.openBlock(),e.createBlock(q,{key:`original-${P}`,axis:T.value,offset:w.value,"list-size":C.value,"item-index":P,bounds:n.itemSizes[P]??e.unref(pe),"container-padding-start":n.containerPaddingStart},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(z),{index:P},null,8,["index"]))]),_:2},1032,["axis","offset","list-size","item-index","bounds","container-padding-start"]))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,z=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(z),{key:z.key}))),128))]),_:1},8,["style"])]),_:1},16,["data-size","style"]))}});function st(){const o=nt(null);return a.invariant(!!o,"useItemOffset must be used within a TickerItem"),o==null?void 0:o.offset}const ut=at;exports.AnimateNumber=$e;exports.Cursor=et;exports.Ticker=ut;exports.TickerItem=q;exports.useCursorIsInView=ve;exports.useCursorState=J;exports.useItemOffset=st;exports.useKeyboardFocus=ge;exports.useMagneticPull=tt;exports.usePointerPosition=Z;

package/dist/components/AnimateNumber/AnimateNumber.d.ts

@@ -1,15 +1,15 @@
-import { MotionConfigProps } from './types';
 import { MotionProps } from 'motion-v';
 export interface AnimateNumberProps {
     locales?: Intl.LocalesArgument;
     format?: Omit<Intl.NumberFormatOptions, 'notation'> & {
         notation?: Exclude<Intl.NumberFormatOptions['notation'], 'scientific' | 'engineering'>;
     };
-    transition?: MotionConfigProps['transition'];
+    transition?: MotionProps['transition'];
     suffix?: string;
     prefix?: string;
     value?: number | bigint | string;
     style?: MotionProps['style'];
+    layoutDependency?: MotionProps['layoutDependency'];
 }
 declare const _default: import('vue').DefineComponent<AnimateNumberProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AnimateNumberProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/AnimateNumber/Mask.d.ts

@@ -1,18 +1,21 @@
-import { motion } from 'motion-v';
+import { MotionProps, motion } from 'motion-v';
 import { mask, maskHeight, maskSize, maskWidth } from './config';
+type __VLS_Props = {
+    layoutDependency?: MotionProps['layoutDependency'];
+};
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_6: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_6) => any;
 }>;
-declare const __VLS_self: import('vue').DefineComponent<{}, {
+declare const __VLS_self: import('vue').DefineComponent<__VLS_Props, {
     motion: typeof motion;
     mask: typeof mask;
     maskHeight: typeof maskHeight;
     maskSize: typeof maskSize;
     maskWidth: typeof maskWidth;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/AnimateNumber/NumberSection.d.ts

@@ -8,6 +8,7 @@ export interface AnimateNumberProps {
     mode?: AnimatePresenceProps['mode'];
     name?: string;
     style?: MotionProps['style'];
+    layoutDependency?: MotionProps['layoutDependency'];
 }
 declare const _default: import('vue').DefineComponent<AnimateNumberProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AnimateNumberProps> & Readonly<{}>, {
     justify: Justify;

package/dist/components/AnimateNumber/NumberSymbol.d.ts

@@ -1,3 +1,6 @@
 import { AnimateSymbolProps } from './types';
-declare const _default: import('vue').DefineComponent<AnimateSymbolProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AnimateSymbolProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = AnimateSymbolProps & {
+    preInitial?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -5,16 +5,18 @@ export interface NumberDigitProps {
     initialValue?: number;
     isPresent?: boolean;
     partKey?: string;
-    onRemove?: (partKey: string) => void;
+    onRemove?: (partKey: string, target: HTMLElement) => void;
     style?: MotionProps['style'];
+    layoutDependency?: MotionProps['layoutDependency'];
 }
 export interface AnimateSymbolProps {
     partKey: string;
     type: string;
     value: string;
     isPresent: boolean;
-    onRemove: (partKey: string) => void;
+    onRemove?: (partKey: string, target: HTMLElement) => void;
     style?: MotionProps['style'];
+    layoutDependency?: MotionProps['layoutDependency'];
 }
 export type Justify = 'left' | 'right';
 export type NumberPartType = Exclude<Intl.NumberFormatPartTypes, 'minusSign' | 'plusSign'> | 'sign' | 'prefix' | 'suffix';
@@ -34,6 +36,7 @@ export type SymbolPart = {
 export type NumberPart = (DigitPart | SymbolPart) & PartSort;
 export type PartSort = {
     originalIndex?: number;
+    isPresent?: boolean;
 };
 export type KeyedPart = {
     key: string;

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

@@ -15,13 +15,13 @@ export interface CursorProps extends HTMMotionProps {
     show?: boolean;
 }
 declare const magnetic: import('vue').Ref<boolean | Partial<MagneticOptions>, boolean | Partial<MagneticOptions>>;
-declare const shouldReduceMotion: import('@vue/reactivity').Ref<boolean>;
+declare const shouldReduceMotion: import('vue').Ref<boolean, boolean>;
 declare const state: import('vue').Ref<import('./hooks/use-cursor-state/types').CursorState, import('./hooks/use-cursor-state/types').CursorState>;
 declare const isInView: import('vue').Ref<boolean, boolean>;
 declare const pointer: import('vue').ComputedRef<import('./hooks/use-offset').MotionPoint>;
 declare const size: import('vue').ComputedRef<{
-    width: number | string | import('motion-v').MotionValue<any>;
-    height: number | string | import('motion-v').MotionValue<any>;
+    width: number | string | import('motion-v/es').MotionValue<any>;
+    height: number | string | import('motion-v/es').MotionValue<any>;
 }>;
 declare const pointerHasMoved: import('vue').Ref<boolean, boolean>;
 declare function positionTransform(origin: Point): (_: any, generated: string) => string;

package/dist/components/Ticker/Ticker.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties } from 'vue';
+import { MotionValue } from 'motion-v';
+export interface TickerProps {
+    axis?: 'x' | 'y';
+    style?: CSSProperties;
+    velocity?: number;
+    hoverFactor?: number;
+    gap?: number;
+    align?: 'start' | 'center' | 'end';
+    offset?: MotionValue<number>;
+}
+type __VLS_Slots = {
+    items: () => any;
+};
+declare const __VLS_component: import('vue').DefineComponent<TickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TickerProps> & Readonly<{}>, {
+    gap: number;
+    velocity: number;
+    axis: "x" | "y";
+    hoverFactor: number;
+    align: "start" | "center" | "end";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Ticker/TickerItem.d.ts

@@ -0,0 +1,31 @@
+import { MotionValue, motion } from 'motion-v';
+interface Props {
+    offset: MotionValue<number>;
+    axis: 'x' | 'y';
+    listSize: number;
+    containerPaddingStart: number;
+    bounds: {
+        start: number;
+        end: number;
+    };
+    itemIndex?: number;
+    cloneIndex?: number;
+}
+declare const transform: MotionValue<number>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_6: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_6) => any;
+}>;
+declare const __VLS_self: import('vue').DefineComponent<Props, {
+    motion: typeof motion;
+    transform: typeof transform;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Ticker/const.d.ts

@@ -0,0 +1,4 @@
+export declare const defaultBounds: {
+    start: number;
+    end: number;
+};

package/dist/components/Ticker/context.d.ts

@@ -0,0 +1,14 @@
+import { MotionValue } from 'motion-v';
+export declare const useTickerItemContext: <T extends {
+    offset: MotionValue<number>;
+} | null | undefined = {
+    offset: MotionValue<number>;
+} | null>(fallback?: T | undefined) => T extends null ? {
+    offset: MotionValue<number>;
+} | null : {
+    offset: MotionValue<number>;
+} | null, provideTickerItemContext: (contextValue: {
+    offset: MotionValue<number>;
+} | null) => {
+    offset: MotionValue<number>;
+} | null;

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

@@ -0,0 +1,7 @@
+import { default as TickerComponent } from './Ticker';
+import { Motion } from 'motion-v';
+export { default as TickerItem } from './TickerItem';
+export { useItemOffset } from './use-item-offset';
+export { useKeyboardFocus } from './use-keyboard-focus';
+type TickerComponentType = typeof Motion & typeof TickerComponent;
+export declare const Ticker: TickerComponentType;

package/dist/components/Ticker/use-item-offset.d.ts

@@ -0,0 +1 @@
+export declare function useItemOffset(): import('motion-v/es').MotionValue<number> | undefined;

package/dist/components/Ticker/use-keyboard-focus.d.ts

@@ -0,0 +1,3 @@
+import { MotionValue } from 'motion-v';
+import { Ref } from 'vue';
+export declare function useKeyboardFocus(containerRef: Ref<HTMLElement | null>, axis: Ref<'x' | 'y'>, focusOffset: MotionValue<number>): void;

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

@@ -1,10 +1,10 @@
-import { defineComponent as v, computed as l, createBlock as h, openBlock as x, unref as o, withCtx as r, createVNode as t, mergeProps as b, normalizeStyle as s } from "vue";
+import { defineComponent as h, computed as u, createBlock as x, openBlock as b, unref as n, withCtx as i, createVNode as t, mergeProps as D, normalizeStyle as p } from "vue";
 import { formatToParts as L } from "./utils/format-parts.mjs";
-import { useMotionConfig as A, easeOut as C, LayoutGroup as N, MotionConfig as $, motion as u } from "motion-v";
-import n from "./NumberSection.vue.mjs";
-import { maskHeight as p } from "./config.mjs";
+import { useMotionConfig as A, easeOut as C, LayoutGroup as N, MotionConfig as $, motion as s } from "motion-v";
+import r from "./NumberSection.vue.mjs";
+import { maskHeight as d } from "./config.mjs";
 import T from "./Mask.vue.mjs";
-const O = /* @__PURE__ */ v({
+const P = /* @__PURE__ */ h({
   name: "AnimateNumber",
   inheritAttrs: !1,
   __name: "AnimateNumber",
@@ -15,42 +15,49 @@ const O = /* @__PURE__ */ v({
     suffix: {},
     prefix: {},
     value: {},
-    style: {}
+    style: {},
+    layoutDependency: {}
   },
-  setup(f) {
-    const m = {
+  setup(y) {
+    const c = {
       opacity: { duration: 1, ease: C },
       layout: { type: "spring", duration: 1, bounce: 0 },
       y: { type: "spring", duration: 1, bounce: 0 }
-    }, e = f, a = l(() => {
-      const i = e.value;
-      return L(i, { locales: e.locales, format: e.format }, e.prefix, e.suffix);
-    }), c = A(), d = l(() => e.transition ?? c.value.transition ?? m);
-    function y() {
-      const { format: i, prefix: g, suffix: k, locales: w, value: I, ..._ } = e;
+    }, e = y, o = u(() => {
+      const l = e.value;
+      return L(l, { locales: e.locales, format: e.format }, e.prefix, e.suffix);
+    }), f = A(), m = u(() => e.transition ?? f.value.transition ?? c);
+    function v() {
+      const { format: l, prefix: g, suffix: k, locales: w, value: I, layoutDependency: S, ..._ } = e;
       return _;
     }
-    return (i, g) => (x(), h(o(N), null, {
-      default: r(() => [
-        t(o($), { transition: d.value }, {
-          default: r(() => [
-            t(o(u).div, b({
-              ...i.$attrs,
-              ...y()
+    const a = u(() => {
+      if (e.layoutDependency !== void 0)
+        return { layoutDependency: e.layoutDependency, value: e.value };
+    });
+    return (l, g) => (b(), x(n(N), null, {
+      default: i(() => [
+        t(n($), { transition: m.value }, {
+          default: i(() => [
+            t(n(s).div, D({
+              ...l.$attrs,
+              ...v()
             }, {
               layout: "",
+              "layout-dependency": a.value,
               style: {
                 lineHeight: "1",
-                ...i.style,
+                ...l.style,
                 display: "inline-flex",
                 isolation: "isolate",
                 whiteSpace: "nowrap"
               }
             }), {
-              default: r(() => [
-                t(o(u).div, {
+              default: i(() => [
+                t(n(s).div, {
                   layout: "",
-                  "aria-label": a.value.formatted,
+                  "layout-dependency": a.value,
+                  "aria-label": o.value.formatted,
                   style: {
                     display: "inline-flex",
                     direction: "ltr",
@@ -59,46 +66,50 @@ const O = /* @__PURE__ */ v({
                     zIndex: -1
                   }
                 }, {
-                  default: r(() => [
-                    t(n, {
-                      style: s({ padding: `calc(${o(p)}/2) 0` }),
+                  default: i(() => [
+                    t(r, {
+                      "layout-dependency": a.value,
+                      style: p({ padding: `calc(${n(d)}/2) 0` }),
                       "aria-hidden": !0,
                       justify: "right",
                       mode: "popLayout",
-                      parts: a.value.pre,
+                      parts: o.value.pre,
                       name: "pre"
-                    }, null, 8, ["style", "parts"]),
-                    t(T, null, {
-                      default: r(() => [
-                        t(n, {
+                    }, null, 8, ["layout-dependency", "style", "parts"]),
+                    t(T, { "layout-dependency": a.value }, {
+                      default: i(() => [
+                        t(r, {
+                          "layout-dependency": a.value,
                           justify: "right",
-                          parts: a.value.integer,
+                          parts: o.value.integer,
                           name: "integer",
                           mode: "popLayout"
-                        }, null, 8, ["parts"]),
-                        t(n, {
+                        }, null, 8, ["layout-dependency", "parts"]),
+                        t(r, {
+                          "layout-dependency": a.value,
                           layout: "position",
-                          parts: a.value.fraction,
+                          parts: o.value.fraction,
                           name: "fraction",
                           mode: "popLayout"
-                        }, null, 8, ["parts"])
+                        }, null, 8, ["layout-dependency", "parts"])
                       ]),
                       _: 1
-                    }),
-                    t(n, {
-                      style: s({ padding: `calc(${o(p)}/2) 0` }),
+                    }, 8, ["layout-dependency"]),
+                    t(r, {
+                      "layout-dependency": a.value,
+                      style: p({ padding: `calc(${n(d)}/2) 0` }),
                       "aria-hidden": !0,
                       layout: "position",
                       mode: "popLayout",
-                      parts: a.value.post,
+                      parts: o.value.post,
                       name: "post"
-                    }, null, 8, ["style", "parts"])
+                    }, null, 8, ["layout-dependency", "style", "parts"])
                   ]),
                   _: 1
-                }, 8, ["aria-label"])
+                }, 8, ["layout-dependency", "aria-label"])
               ]),
               _: 1
-            }, 16, ["style"])
+            }, 16, ["layout-dependency", "style"])
           ]),
           _: 1
         }, 8, ["transition"])
@@ -108,5 +119,5 @@ const O = /* @__PURE__ */ v({
   }
 });
 export {
-  O as default
+  P as default
 };

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

@@ -1,33 +1,37 @@
-import { defineComponent as i, createBlock as a, openBlock as r, unref as e, normalizeStyle as n, withCtx as l, renderSlot as s } from "vue";
-import { motion as m } from "motion-v";
-import { maskSize as p, mask as k, maskHeight as c, maskWidth as t } from "./config.mjs";
-const b = /* @__PURE__ */ i({
+import { defineComponent as a, createBlock as n, openBlock as i, unref as e, normalizeStyle as r, withCtx as l, renderSlot as p } from "vue";
+import { motion as s } from "motion-v";
+import { maskSize as m, mask as d, maskHeight as c, maskWidth as o } from "./config.mjs";
+const _ = /* @__PURE__ */ a({
   __name: "Mask",
-  setup(f) {
-    return (o, d) => (r(), a(e(m).span, {
+  props: {
+    layoutDependency: {}
+  },
+  setup(k) {
+    return (t, f) => (i(), n(e(s).span, {
       layout: "",
+      "layout-dependency": t.layoutDependency,
       "aria-hidden": !0,
-      style: n({
+      style: r({
         display: "inline-flex",
         "--invert-x": 1,
-        margin: `0 calc(-1*${e(t)})`,
-        padding: `calc(${e(c)}/2) ${e(t)}`,
+        margin: `0 calc(-1*${e(o)})`,
+        padding: `calc(${e(c)}/2) ${e(o)}`,
         position: "relative",
         zIndex: -1,
         overflow: "clip",
-        webkitMaskImage: e(k),
-        webkitMaskSize: e(p),
+        webkitMaskImage: e(d),
+        webkitMaskSize: e(m),
         webkitMaskPosition: "center, center, top left, top right, bottom right, bottom left",
         webkitMaskRepeat: "no-repeat"
       })
     }, {
       default: l(() => [
-        s(o.$slots, "default")
+        p(t.$slots, "default")
       ]),
       _: 3
-    }, 8, ["style"]));
+    }, 8, ["layout-dependency", "style"]));
   }
 });
 export {
-  b as default
+  _ as default
 };