motion-plus-vue 0.0.1

package/dist/cjs/index.js

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

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

@@ -0,0 +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'];
+    suffix?: string;
+    prefix?: string;
+    value?: number | bigint | string;
+    style?: MotionProps['style'];
+}
+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

@@ -0,0 +1,22 @@
+import { motion } from 'motion-v';
+import { mask, maskHeight, maskSize, maskWidth } from './config';
+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<{}, {
+    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>;
+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/AnimateNumber/NumberDigit.d.ts

@@ -0,0 +1,5 @@
+import { NumberDigitProps } from './types';
+declare const _default: import('vue').DefineComponent<NumberDigitProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NumberDigitProps> & Readonly<{}>, {
+    initialValue: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,15 @@
+import { Justify, KeyedNumberPart } from './types';
+import { AnimatePresenceProps, MotionProps } from 'motion-v';
+export interface AnimateNumberProps {
+    parts: (KeyedNumberPart & {
+        isPresent?: boolean;
+    })[];
+    justify?: Justify;
+    mode?: AnimatePresenceProps['mode'];
+    name?: string;
+    style?: MotionProps['style'];
+}
+declare const _default: import('vue').DefineComponent<AnimateNumberProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AnimateNumberProps> & Readonly<{}>, {
+    justify: Justify;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,3 @@
+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>;
+export default _default;

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

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'vue';
+export declare const maskHeight = "var(--mask-height, 0.15em)";
+export declare const maskWidth = "var(--mask-width, 0.5em)";
+export declare const mask: string;
+export declare const maskSize: string;
+export declare const digitFillStyle: CSSProperties;

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

@@ -0,0 +1,15 @@
+import { Justify } from './types';
+import { Ref } from 'vue';
+export declare const useSectionContext: <T extends {
+    justify?: Ref<Justify>;
+} | null | undefined = {
+    justify?: Ref<Justify>;
+}>(fallback?: T | undefined) => T extends null ? {
+    justify?: Ref<Justify>;
+} | null : {
+    justify?: Ref<Justify>;
+}, injectSectionContext: (contextValue: {
+    justify?: Ref<Justify>;
+}) => {
+    justify?: Ref<Justify>;
+};

package/dist/components/AnimateNumber/hooks/use-is-initial-render.d.ts

@@ -0,0 +1,3 @@
+export declare function useIsInitialRender(): {
+    current: boolean;
+};

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

@@ -0,0 +1,5 @@
+import { DefineComponent } from 'vue';
+import { MotionProps } from 'motion-v';
+import { AnimateNumberProps as Props } from './AnimateNumber';
+export type AnimateNumberProps = Props & MotionProps<'span'>;
+export declare const AnimateNumber: DefineComponent<AnimateNumberProps>;

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

@@ -0,0 +1,55 @@
+import { MotionConfig, MotionProps } from 'motion-v';
+import { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes } from 'vue';
+export interface NumberDigitProps {
+    value: number;
+    initialValue?: number;
+    isPresent?: boolean;
+    partKey?: string;
+    onRemove?: (partKey: string) => void;
+    style?: MotionProps['style'];
+}
+export interface AnimateSymbolProps {
+    partKey: string;
+    type: string;
+    value: string;
+    isPresent: boolean;
+    onRemove: (partKey: string) => void;
+    style?: MotionProps['style'];
+}
+export type Justify = 'left' | 'right';
+export type NumberPartType = Exclude<Intl.NumberFormatPartTypes, 'minusSign' | 'plusSign'> | 'sign' | 'prefix' | 'suffix';
+export type IntegerPart = {
+    type: NumberPartType & 'integer';
+    value: number;
+};
+export type FractionPart = {
+    type: NumberPartType & 'fraction';
+    value: number;
+};
+export type DigitPart = IntegerPart | FractionPart;
+export type SymbolPart = {
+    type: Exclude<NumberPartType, 'integer' | 'fraction'>;
+    value: string;
+};
+export type NumberPart = (DigitPart | SymbolPart) & PartSort;
+export type PartSort = {
+    originalIndex?: number;
+};
+export type KeyedPart = {
+    key: string;
+};
+export type KeyedDigitPart = DigitPart & KeyedPart & PartSort;
+export type KeyedSymbolPart = SymbolPart & KeyedPart & PartSort;
+export type KeyedNumberPart = (KeyedDigitPart | KeyedSymbolPart) & PartSort;
+export type Em = `${number}em`;
+export type Trend = number | ((oldValue: number, value: number) => number);
+export interface Data {
+    pre: KeyedNumberPart[];
+    integer: KeyedNumberPart[];
+    fraction: KeyedNumberPart[];
+    post: KeyedNumberPart[];
+    formatted: string;
+}
+type ComponentProps<T> = T extends DefineComponent<ExtractPropTypes<infer Props>, any, any> ? ExtractPublicPropTypes<Props> : never;
+export type MotionConfigProps = ComponentProps<typeof MotionConfig>;
+export {};

package/dist/components/AnimateNumber/use-animate.d.ts

@@ -0,0 +1,6 @@
+import { AnimateSymbolProps, NumberDigitProps } from './types';
+export declare function useAnimate(props: AnimateSymbolProps | NumberDigitProps): {
+    root: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    getRoot: (el: any) => void;
+    handleComplete: (e: any) => void;
+};

package/dist/components/AnimateNumber/utils/format-parts.d.ts

@@ -0,0 +1,5 @@
+import { Data } from '../types';
+export declare function formatToParts(value: number | bigint | string, { locales, format, }: {
+    locales?: Intl.LocalesArgument;
+    format?: Intl.NumberFormatOptions;
+}, prefix?: string, suffix?: string): Data;

package/dist/components/AnimateNumber/utils/get-width-in-ems.d.ts

@@ -0,0 +1,2 @@
+import { Em } from '../types';
+export declare function getWidthInEm(element: HTMLElement): Em;

package/dist/components/AnimateNumber/utils/target-widths.d.ts

@@ -0,0 +1 @@
+export declare const targetWidths: WeakMap<HTMLElement, `${number}em`>;

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

@@ -0,0 +1,69 @@
+import { AnimatePresence, LayoutGroup, MotionConfig, MotionProps, Point, SpringOptions, motion } from 'motion-v';
+import { defaultTransition } from './config';
+export interface CursorProps {
+    follow?: boolean;
+    center?: Point;
+    offset?: Point;
+    spring?: false | SpringOptions;
+    snapToTarget?: boolean;
+    matchTextSize?: boolean;
+    transition?: MotionProps['transition'];
+    variants?: MotionProps['variants'];
+    style?: MotionProps['style'];
+}
+declare const state: import('vue').Ref<import('./hooks/use-cursor-state/types').CursorState, import('./hooks/use-cursor-state/types').CursorState>;
+declare const isInView: import('vue').Ref<boolean, boolean>;
+declare const x: import('motion-v').MotionValue<number>, y: import('motion-v').MotionValue<number>;
+declare const size: import('vue').ComputedRef<{
+    width: string;
+    height: string;
+}>;
+declare const pointerHasMoved: import('vue').Ref<boolean, boolean>;
+declare function positionTransform(origin: Point): (_: any, generated: string) => string;
+declare function reset(): {
+    transition: MotionProps["transition"];
+    variants: MotionProps["variants"];
+    style: MotionProps["style"];
+};
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_22: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_22) => any;
+}>;
+declare const __VLS_self: import('vue').DefineComponent<CursorProps, {
+    AnimatePresence: typeof AnimatePresence;
+    LayoutGroup: typeof LayoutGroup;
+    MotionConfig: typeof MotionConfig;
+    motion: typeof motion;
+    defaultTransition: typeof defaultTransition;
+    state: typeof state;
+    isInView: typeof isInView;
+    x: typeof x;
+    y: typeof y;
+    size: typeof size;
+    pointerHasMoved: typeof pointerHasMoved;
+    positionTransform: typeof positionTransform;
+    reset: typeof reset;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CursorProps> & Readonly<{}>, {
+    offset: Point;
+    follow: boolean;
+    center: Point;
+    spring: false | SpringOptions;
+    snapToTarget: boolean;
+    matchTextSize: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<CursorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CursorProps> & Readonly<{}>, {
+    offset: Point;
+    follow: boolean;
+    center: Point;
+    spring: false | SpringOptions;
+    snapToTarget: boolean;
+    matchTextSize: boolean;
+}, {}, {}, {}, 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/Cursor/config.d.ts

@@ -0,0 +1,23 @@
+export declare const autoSize: {
+    width: string;
+    height: string;
+};
+export declare const topLeftPoint: {
+    x: number;
+    y: number;
+};
+export declare const centerPoint: {
+    x: number;
+    y: number;
+};
+export declare const skipTransition: {
+    duration: number;
+};
+export declare const defaultFollowSpring: {
+    stiffness: number;
+    damping: number;
+};
+export declare const defaultTransition: {
+    duration: number;
+    ease: number[];
+};

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

@@ -0,0 +1,10 @@
+import { CursorState, CursorType } from './hooks/use-cursor-state/types';
+type Size = {
+    width: number;
+    height: number;
+};
+export declare function getCursorSize(type: CursorType, state: CursorState, { matchPointerSize, matchTextSize, }: {
+    matchPointerSize: boolean;
+    matchTextSize: boolean;
+}): Size;
+export {};

package/dist/components/Cursor/hooks/use-cursor-in-view.d.ts

@@ -0,0 +1 @@
+export declare function useCursorIsInView(resetSpring: VoidFunction): import('vue').Ref<boolean, boolean>;

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

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

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

@@ -0,0 +1,3 @@
+import { CursorState } from './types';
+import { Ref } from 'vue';
+export declare function useCursorState(): Ref<CursorState>;

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

@@ -0,0 +1,14 @@
+export type CursorType = 'pointer' | 'default' | 'text';
+export interface CursorState {
+    type: CursorType;
+    isPressed: boolean;
+    fontSize: number | null;
+    targetBoundingBox: {
+        width: number;
+        height: number;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    } | null;
+}

package/dist/components/Cursor/hooks/use-has-pointer-moved.d.ts

@@ -0,0 +1,5 @@
+import { MotionValue } from 'motion-v';
+export declare function useHasPointerMoved({ x, y, }: {
+    x: MotionValue<number>;
+    y: MotionValue<number>;
+}, resetSpring: VoidFunction): import('vue').Ref<boolean, boolean>;

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

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

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

@@ -0,0 +1,10 @@
+import { MotionValue, Point } from 'motion-v';
+import { Ref } from 'vue';
+export type MotionPoint = {
+    x: MotionValue<number>;
+    y: MotionValue<number>;
+};
+export declare function useOffset(position: MotionPoint, offset: Ref<Point>): {
+    x: MotionValue<number>;
+    y: MotionValue<number>;
+};

package/dist/components/Cursor/hooks/use-pointer-position.d.ts

@@ -0,0 +1,5 @@
+import { MotionValue } from 'motion-v';
+export declare function usePointerPosition(): {
+    x: MotionValue<number>;
+    y: MotionValue<number>;
+};

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

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

package/dist/components/Cursor/hooks/utils/only-mouse-events.d.ts

@@ -0,0 +1,2 @@
+export declare function onlyMouse(callback: (event: PointerEvent) => void): (event: PointerEvent) => void;
+export declare function onlyLeftClicks(callback: (event: PointerEvent) => void): (event: PointerEvent) => void;

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

@@ -0,0 +1,5 @@
+import { DefineComponent } from 'vue';
+import { CursorProps as Props } from './Cursor';
+import { MotionProps } from 'motion-v';
+export type CursorProps = Props & MotionProps<'div'>;
+export declare const Cursor: DefineComponent<CursorProps>;

package/dist/components/Cursor/use-cursor-styles.d.ts

@@ -0,0 +1 @@
+export declare function useCursorStyles(isCursor: () => boolean): void;

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

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

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

@@ -0,0 +1,4 @@
+import f from "./AnimateNumber.vue.mjs";
+export {
+  f as default
+};

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

@@ -0,0 +1,33 @@
+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({
+  __name: "Mask",
+  setup(f) {
+    return (o, d) => (r(), a(e(m).span, {
+      layout: "",
+      "aria-hidden": !0,
+      style: n({
+        display: "inline-flex",
+        "--invert-x": 1,
+        margin: `0 calc(-1*${e(t)})`,
+        padding: `calc(${e(c)}/2) ${e(t)}`,
+        position: "relative",
+        zIndex: -1,
+        overflow: "clip",
+        webkitMaskImage: e(k),
+        webkitMaskSize: e(p),
+        webkitMaskPosition: "center, center, top left, top right, bottom right, bottom left",
+        webkitMaskRepeat: "no-repeat"
+      })
+    }, {
+      default: l(() => [
+        s(o.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["style"]));
+  }
+});
+export {
+  b as default
+};

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

@@ -0,0 +1,4 @@
+import f from "./Mask.vue.mjs";
+export {
+  f as default
+};