motion 10.5.0-alpha.2 → 10.5.0-beta.0

package/CHANGELOG.md

@@ -0,0 +1,109 @@
+# Changelog
+
+Motion One adheres to [Semantic Versioning](http://semver.org/).
+
+## [10.5.0] [2022-01-01]
+
+### Added
+
+- **Motion One for Vue:** A fully declarative version of Motion One for Vue 3!
+
+## [10.4.0] [2021-10-18]
+
+### Added
+
+- **Spring and glide in timeline:** `timeline` now supports animations with `ease: spring()` and `ease: glide()`.
+
+## [10.3.2] [2021-10-18]
+
+### Fixed
+
+- Fixing animation interruption for independent transform animations in Safari and Firefox. [Issue (sponsors only)](https://github.com/motiondivision/motionone/issues/27)
+
+## [10.3.1] [2021-10-12]
+
+### Fixed
+
+- Fixing a bug in `stagger` and `animate`.
+
+## [10.3.0] [2021-10-11]
+
+### New
+
+- **Glide:** Animate transforms with realistic [glide](https://motion.dev/dom/glide) that can be used to mimic momentum scroll.
+
+### Fixed
+
+- Fixing a bug where sometimes velocity wasn't being correctly passed to the next animation.
+
+## [10.2.1] [2021-10-06]
+
+### Fixed
+
+- Ensuring `duration` is always passed correctly to the independent transform polyfill.
+
+## [10.2.0] [2021-10-05]
+
+### New
+
+- **Springs:** Animate transforms with realistic [spring](https://motion.dev/dom/spring) simulations.
+
+## [10.1.3] [2021-10-01]
+
+### Fixed
+
+- **Fill both for timelines:** Extends `fill: "both"` effect from `10.1.2` to `timeline`.
+
+## [10.1.2] [2021-10-01]
+
+### Fixed
+
+- **Fill both:** Previously, if an animation had a delay and an initially-defined first keyframe (`opacity: [0, 1]`) the animation would start from its rendered style to that first keyframe. Now, the initial keyframe gets stretched to the very start of the whole animation by setting `fill: "both"`. [Issue (sponsors only)](https://github.com/motiondivision/motionone/issues/20)
+
+## [10.1.1] [2021-09-28]
+
+### Fixed
+
+- **Scrub to end:** Setting `currentTime` to `duration` was removing the animation effect. This has been fixed by setting `fill: "forwards"` on the WAAPI animation. This won't affect memory consumption as animations are flattened into styles and removed on finish. [Issue (sponsors only)](https://github.com/motiondivision/motionone/issues/21)
+
+### Changed
+
+- **Removed Popmotion dependency:** Reduced the number of dependencies by moving Popmotion utilities inside Motion One. Filesize remains unaffected in most environments but will be lower in Skypack and other distributors that don't support tree-shaking.
+
+## [10.1.0] [2021-09-27]
+
+### New
+
+- **Duration:** The duration of timelines is usually automatically calculated from its defined animations. It can now be read from the new read-only `duration` prop on [animation controls](http://motion.dev/dom/controls).
+
+### Changed
+
+- **Performance:** Before Motion One starts a new animation, it stops the old one. Stopping an animation commits its styles, which can cause a style recalculation. Now, when an animation finishes, we delete the reference to the old animation. Additionally, we check the animation status isn't `"finished"` before committing styles within `stop`. This prevents unnecessary style recalculations.
+
+## [10.0.3] [2021-09-25]
+
+### Fixed
+
+- Fixed formatting of changelog for website publication.
+
+## [10.0.2] [2021-09-24]
+
+### Changed
+
+- Generating `finished` promise on-demand.
+
+### Fixed
+
+- Catching promise in `animate` and `timeline` to prevent errors whenever a sub-animation is cancelled.
+
+## [10.0.1] [2021-09-22]
+
+### Changed
+
+- Removed links to repo from Readme.
+
+## [10.0.0] [2021-09-12]
+
+### New
+
+- First publish

package/dist/motion.min.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";const e=new WeakMap;function n(t){return e.has(t)||e.set(t,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),e.get(t)}function a(t,e){-1===t.indexOf(e)&&t.push(e)}function i(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const s=()=>{},r=t=>t,o=["","X","Y","Z"],l={x:"translateX",y:"translateY",z:"translateZ"},c={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},u={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:c,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:r},skew:c},f=new Map,h=t=>`--motion-${t}`,d=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{o.forEach((e=>{d.push(t+e),f.set(h(t+e),u[t])}))}));const p=(t,e)=>d.indexOf(t)-d.indexOf(e),m=new Set(d),y=t=>m.has(t),g=t=>t.sort(p).reduce(v,"").trim(),v=(t,e)=>`${t} ${e}(var(${h(e)}))`,b=t=>t.startsWith("--"),x=new Set;const M=t=>1e3*t,S=t=>"number"==typeof t,O=t=>Array.isArray(t)&&!S(t[0]),T=t=>"object"==typeof t&&Boolean(t.createAnimation),w=t=>(t=>Array.isArray(t)&&S(t[0]))(t)?A(t):t,A=([t,e,n,a])=>`cubic-bezier(${t}, ${e}, ${n}, ${a})`,j=t=>document.createElement("div").animate(t,{duration:.001}),D={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{j({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(j({opacity:[0,1]}).finished)},k={},P={};for(const t in D)P[t]=()=>(void 0===k[t]&&(k[t]=D[t]()),k[t]);const $={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},R=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function E(t,e,n,a){if(t===e&&n===a)return r;const i=e=>function(t,e,n,a,i){let s,r,o=0;do{r=e+(n-e)/2,s=R(r,a,i)-t,s>0?n=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(e,0,1,t,n);return t=>0===t||1===t?t:R(i(t),e,a)}const U=(t,e="end")=>n=>{const a=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,i="end"===e?Math.floor(a):Math.ceil(a);return s=0,r=1,o=i/t,Math.min(Math.max(o,s),r);var s,r,o},q={ease:E(.25,.1,.25,1),"ease-in":E(.42,0,1,1),"ease-in-out":E(.42,0,.58,1),"ease-out":E(0,0,.58,1)},C=/\((.*?)\)/;function V(t){if("function"==typeof t)return t;if(Array.isArray(t))return E(...t);if(q[t])return q[t];if(t.startsWith("steps")){const e=C.exec(t);if(e){const t=e[1].split(",");return U(parseFloat(t[0]),t[1].trim())}}return r}const W=(t,e,n)=>-n*t+n*e+t,F=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function B(t,e){return O(t)?t[((t,e,n)=>{const a=e-t;return((n-t)%a+a)%a+t})(0,t.length,e)]:t}function z(t,e){const n=t[t.length-1];for(let a=1;a<=e;a++){const i=F(0,e,a);t.push(W(n,1,i))}}function G(t){const e=[0];return z(e,t-1),e}function Z(t,e=G(t.length),n=r){const a=t.length,i=a-e.length;return i>0&&z(e,i),i=>{let s=0;for(;s<a-2&&!(i<e[s+1]);s++);let r=(o=F(e[s],e[s+1],i),Math.min(1,Math.max(o,0)));var o;return r=B(n,s)(r),W(t[s],t[s+1],r)}}class K{constructor(t,e=[0,1],{easing:n=$.easing,duration:a=$.duration,delay:i=$.delay,endDelay:s=$.endDelay,repeat:r=$.repeat,offset:o,direction:l="normal"}={}){this.startTime=0,this.rate=1,this.t=0,this.cancelTimestamp=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const c=a*(r+1);T(n)&&(n="ease");const u=Z(e,o,O(n)?n.map(V):V(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let r=(e-this.startTime)*this.rate;this.t=r,r/=1e3,r=Math.max(r-i,0),"finished"===this.playState&&(r=c);const o=r/a;let f=Math.floor(o),h=o%1;!h&&o>=1&&(h=1),1===h&&f--;const d=f%2;("reverse"===l||"alternate"===l&&d||"alternate-reverse"===l&&!d)&&(h=1-h);const p=u(r>=c?1:Math.min(h,1));t(p);"finished"===this.playState||r>=c+s?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,p)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){var t;this.playState="idle",this.tick(this.cancelTimestamp),null===(t=this.reject)||void 0===t||t.call(this,!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelTimestamp=performance.now()}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const X=t=>Array.isArray(t)?t:[t];function Y(t){return l[t]&&(t=l[t]),y(t)?h(t):t}const _=(t,e)=>{e=Y(e);let n=b(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=f.get(e);t&&(n=t.initialValue)}return n};function I(t){if(t)try{"finished"!==t.playState&&t.commitStyles(),t.cancel()}catch(t){}}function L(t,e,i,r={}){let o,{duration:c=$.duration,delay:u=$.delay,endDelay:h=$.endDelay,repeat:d=$.repeat,easing:p=$.easing,direction:m,offset:v,allowWebkitAcceleration:A=!1}=r;const j=n(t);let D=P.waapi(),k=s;const R=y(e);R&&((t,e)=>{l[e]&&(e=l[e]);const{transforms:i}=n(t);a(i,e),t.style.transform=g(i)})(t,e);const E=Y(e),U=f.get(E);return I(j.animations[E]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=_(t,E))&&void 0!==e?e:null==U?void 0:U.initialValue)&&void 0!==n?n:0};let n=function(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}(X(i),e);if(T(p)){const t=p.createAnimation(n,e,R,E,j);p=t.easing,void 0!==t.keyframes&&(n=t.keyframes),void 0!==t.duration&&(c=t.duration)}if(b(E)?(k=((t,e)=>n=>t.style.setProperty(e,n))(t,E),P.cssRegisterProperty()?function(t){if(!x.has(t)){x.add(t);try{const{syntax:e,initialValue:n}=f.has(t)?f.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(E):D=!1):k=((t,e)=>n=>t.style[e]=n)(t,E),D){U&&(n=n.map((t=>S(t)?U.toDefaultUnit(t):t))),P.partialKeyframes()||1!==n.length||n.unshift(e());const a={delay:M(u),duration:M(c),endDelay:M(h),easing:O(p)?void 0:w(p),direction:m,iterations:d+1,fill:"both"};o=t.animate({[E]:n,offset:v,easing:O(p)?p.map(w):void 0},a),o.finished||(o.finished=new Promise(((t,e)=>{o.onfinish=t,o.oncancel=e})));const i=n[n.length-1];o.finished.then((()=>{k(i),o.cancel()})).catch(s),A||(o.playbackRate=1.000001)}else if(R&&n.every(S)){if(1===n.length&&n.unshift(parseFloat(e())),U){const t=k;k=e=>t(U.toDefaultUnit(e))}o=new K(k,n,Object.assign(Object.assign({},r),{duration:c,easing:p}))}else{const t=n[n.length-1];k(U&&S(t)?U.toDefaultUnit(t):t)}return j.animations[E]=o,null==o||o.finished.then((()=>{j.animations[E]=void 0,j.generators[E]=void 0,j.prevGeneratorState[E]=void 0})).catch(s),o}}const H=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function J(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t)}const N=t=>t(),Q=(t,e)=>new Proxy({animations:t.map(N).filter(Boolean),duration:e},et),tt=t=>t.animations[0],et={get:(t,e)=>{var n,a;switch(e){case"duration":return t.duration;case"currentTime":let i=(null===(n=tt(t))||void 0===n?void 0:n[e])||0;return i?i/1e3:0;case"playbackRate":return null===(a=tt(t))||void 0===a?void 0:a[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(nt)).catch(s)),t.finished;case"stop":return()=>t.animations.forEach(I);default:return()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n=M(n);case"currentTime":case"playbackRate":for(let a=0;a<t.animations.length;a++)t.animations[a][e]=n;return!0}return!1}},nt=t=>t.finished;function at(t,e,n){return"function"==typeof t?t(e,n):t}function it(t,e){var n={};for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&e.indexOf(a)<0&&(n[a]=t[a]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(a=Object.getOwnPropertySymbols(t);i<a.length;i++)e.indexOf(a[i])<0&&Object.prototype.propertyIsEnumerable.call(t,a[i])&&(n[a[i]]=t[a[i]])}return n}function st(t,e,n,a){var i;return S(e)?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(i=a.get(e))&&void 0!==i?i:t}function rt(t,e,n,a,s,r){!function(t,e,n){for(let a=0;a<t.length;a++){const s=t[a];s.at>e&&s.at<n&&(i(t,s),a--)}}(t,s,r);for(let i=0;i<e.length;i++)t.push({value:e[i],at:W(s,r,a[i]),easing:B(n,i)})}function ot(t,e){return t.at===e.at?null===t.value?1:-1:t.at-e.at}function lt(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function ct(t,e){return e[t]||(e[t]=[]),e[t]}const ut=({stiffness:t=100,damping:e=10,mass:n=1,from:a=0,to:i=1,velocity:s=0,restSpeed:r=2,restDistance:o=.5}={})=>{const l={done:!1,value:a,target:i,velocity:s=s?s/1e3:0,hasReachedTarget:!1},c=((t=100,e=10,n=1)=>e/(2*Math.sqrt(t*n)))(t,e,n),u=i-a,f=Math.sqrt(t/n)/1e3,h=((t,e)=>t*Math.sqrt(1-e*e))(f,c);let d;return d=c<1?t=>i-Math.exp(-c*f*t)*((c*f*u-s)/h*Math.sin(h*t)+u*Math.cos(h*t)):t=>i-Math.exp(-f*t)*(u+(s+f*u)*t),{next:t=>{l.value=d(t),l.velocity=0===t?s:ft(d,t,l.value);const e=Math.abs(l.velocity)<=r,n=Math.abs(i-l.value)<=o;var c,u,f;return l.done=e&&n,l.hasReachedTarget=(c=a,u=i,f=l.value,c<u&&f>=u||c>u&&f<=u),l}}};function ft(t,e,n){const a=Math.max(e-5,0);return i=n-t(a),(s=5)?i*(1e3/s):0;var i,s}function ht(t){const e=new WeakMap;return(n={})=>{const a=new Map,i=(e=0,i=100,s=0,r=!1)=>{const o=`${e}-${i}-${s}-${r}`;return a.has(o)||a.set(o,t(Object.assign({from:e,to:i,velocity:s,restSpeed:r?.05:2,restDistance:r?.01:.5},n))),a.get(o)},s=t=>(e.has(t)||e.set(t,function(t){let e,n=10,a=t.next(0);const i=[a.value];for(;!a.done&&n<1e4;)a=t.next(n),i.push(a.done?a.target:a.value),void 0===e&&a.hasReachedTarget&&(e=n),n+=10;const s=n-10;return 1===i.length&&i.push(a.value),{keyframes:i,duration:s/1e3,overshootDuration:(null!=e?e:s)/1e3}}(t)),e.get(t));return{createAnimation:(t,e,n,a,r)=>{let o,l;const c=t.length;if(n&&c<=2&&t.every(dt)){const n=a&&r&&r.prevGeneratorState[a],u=n&&(1===c||2===c&&null===t[0])?n.velocity:0,f=t[c-1],h=1===c?null:t[0],d=null===h?n?n.value:parseFloat(e()):h;l=i(d,f,u,null==a?void 0:a.includes("scale"));const p=s(l);o=Object.assign(Object.assign({},p),{easing:"linear"})}else{l=i(0,100);o={easing:"ease",duration:s(l).overshootDuration}}return l&&r&&a&&(r.generators[a]=l),o}}}}const dt=t=>"string"!=typeof t,pt=ht(ut),mt=ht((({from:t=0,velocity:e=0,power:n=.8,decay:a=.325,bounceDamping:i,bounceStiffness:s,changeTarget:r,min:o,max:l,restDistance:c=.5,restSpeed:u})=>{a=M(a);const f={value:t,target:t,velocity:e,hasReachedTarget:!1,done:!1},h=t=>void 0===o?l:void 0===l||Math.abs(o-t)<Math.abs(l-t)?o:l;let d=n*e;const p=t+d,m=void 0===r?p:r(p);f.target=m,m!==p&&(d=m-t);const y=t=>-d*Math.exp(-t/a),g=t=>m+y(t),v=t=>{const n=y(t),a=g(t);f.done=Math.abs(n)<=c,f.value=f.done?m:a,f.velocity=0===t?e:ft(g,t,f.value)};let b,x;const S=t=>{var e;(e=f.value,void 0!==o&&e<o||void 0!==l&&e>l)&&(b=t,x=ut({from:f.value,to:h(f.value),velocity:f.velocity,damping:i,stiffness:s,restDistance:c,restSpeed:u}))};return S(0),{next:t=>{let e=!1;return x||void 0!==b||(e=!0,v(t),S(t)),void 0!==b&&t>b?(f.hasReachedTarget=!0,x.next(t-b)):(f.hasReachedTarget=!1,!e&&v(t),f)}}}));function yt(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let gt;function vt(){if(!gt)return;const t=gt.sort(bt).map(xt);t.forEach(Mt),t.forEach(Mt),gt=void 0}const bt=(t,e)=>t.getDepth()-e.getDepth(),xt=t=>t.animateUpdates(),Mt=t=>t.next(),St=["initial","animate"];function Ot(t){const e={},n=[];for(let a in t){const i=t[a];y(a)&&(l[a]&&(a=l[a]),n.push(a),a=h(a));let s=Array.isArray(i)?i[0]:i;const r=f.get(a);r&&(s=S(i)?r.toDefaultUnit(i):i),e[a]=s}return n.length&&(e.transform=g(n)),e}const Tt=t=>`-${t.toLowerCase()}`;t.animate=function(t,e,n={}){var a;const i=(t=J(t)).length,s=[];for(let a=0;a<i;a++){const r=t[a];for(const t in e){const o=H(n,t);o.delay=at(o.delay,a,i);const l=L(r,t,e[t],o);s.push(l)}}return Q(s,null!==(a=n.duration)&&void 0!==a?a:$.duration)},t.animateStyle=L,t.createMotionState=function(t={},e){var n;let r,o=e?e.getDepth()+1:0;const l={};for(const n of St)l[n]="string"==typeof t[n]?t[n]:null==e?void 0:e.getContext()[n];let c=it(yt(null!==(n=t.initial)&&void 0!==n?n:l.initial,t.variants)||{},["transition"]);const u=Object.assign({},c),f={update:e=>{r&&(t=e,function(t){gt?a(gt,t):(gt=[t],requestAnimationFrame(vt))}(f))},animateUpdates:function*(){var e,n;const a=c;c={};const i={};for(const a of St){const s=yt(t[a]);if(s)for(const a in s)"transition"!==a&&(c[a]=s[a],i[a]=H(null!==(n=null!==(e=s.transition)&&void 0!==e?e:t.transition)&&void 0!==n?n:{},a))}const o=new Set([...Object.keys(c),...Object.keys(a)]),l=[];o.forEach((t=>{var e,n,s;void 0===c[t]&&(c[t]=u[t]),n=a[t],s=c[t],typeof n==typeof s&&(Array.isArray(n)&&Array.isArray(s)?function(t,e){const n=e.length;if(n!==t.length)return!1;for(let a=0;a<n;a++)if(e[a]!==t[a])return!1;return!0}(n,s):n===s)||(null!==(e=u[t])&&void 0!==e||(u[t]=_(r,t)),l.push(L(r,t,c[t],i[t])))})),yield;const f=l.map((t=>t())).filter(Boolean);if(!f.length)return;const h=c;Promise.all(f.map((t=>t.finished))).then((()=>{var e;null===(e=t.onAnimationComplete)||void 0===e||e.call(t,h)})).catch(s)},getDepth:()=>o,getTarget:()=>c,getOptions:()=>t,getContext:()=>l,mount:t=>(r=t,()=>{!function(t){gt&&i(gt,t)}(f)})};return f},t.createStyleString=function(t={}){const e=Ot(t);let n="";for(const t in e)n+=t.startsWith("--")?t:t.replace(/[A-Z]/g,Tt),n+=`: ${e[t]}; `;return n},t.createStyles=Ot,t.glide=mt,t.spring=pt,t.stagger=function(t=.1,{start:e=0,from:n=0,easing:a}={}){return(i,s)=>{const r=S(n)?n:function(t,e){if("first"===t)return 0;{const n=e-1;return"last"===t?n:n/2}}(n,s),o=Math.abs(r-i);let l=t*o;if(a){const t=s*i;l=V(a)(l/t)*t}return e+l}},t.test=function(){console.log("test")},t.timeline=function(t,e={}){var n,a;const i=function(t,e={}){var{defaultOptions:n={}}=e,a=it(e,["defaultOptions"]);const i=[],s=new Map,r={},o=new Map;let l=0,c=0,u=0;for(let e=0;e<t.length;e++){const[a,i,f={}]=t[e];void 0!==f.at&&(c=st(c,f.at,l,o));let h=0;const d=J(a,r),p=d.length;for(let t=0;t<p;t++){const e=lt(d[t],s);for(const a in i){const s=ct(a,e);let r=X(i[a]);const o=H(f,a);let{duration:l=n.duration||$.duration,easing:d=n.easing||$.easing}=o;if(T(d)){const t=y(a);r.length;const e=d.createAnimation(r,(()=>"0"),t);d=e.easing,void 0!==e.keyframes&&(r=e.keyframes),void 0!==e.duration&&(l=e.duration)}const m=at(f.delay,t,p)||0,g=c+m,v=g+l;let{offset:b=G(r.length)}=o;1===b.length&&0===b[0]&&(b[1]=1);const x=length-r.length;x>0&&z(b,x),1===r.length&&r.unshift(null),rt(s,r,d,b,g,v),h=Math.max(m+l,h),u=Math.max(v,u)}}l=c,c+=h}return s.forEach(((t,e)=>{for(const s in t){const r=t[s];r.sort(ot);const o=[],l=[],c=[];for(let t=0;t<r.length;t++){const{at:e,value:n,easing:a}=r[t];o.push(n),l.push(F(0,u,e)),c.push(a||$.easing)}0!==l[0]&&(l.unshift(0),o.unshift(o[0]),c.unshift("linear")),1!==l[l.length-1]&&(l.push(1),o.push(null)),i.push([e,s,o,Object.assign(Object.assign(Object.assign({},n),{duration:u,easing:c,offset:l}),a)])}})),i}(t,e),s=i.map((t=>L(...t))).filter(Boolean);return Q(s,null!==(a=null===(n=i[0])||void 0===n?void 0:n[3].duration)&&void 0!==a?a:$.duration)},Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";const e=new WeakMap;function n(t){return e.has(t)||e.set(t,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),e.get(t)}function i(t,e){-1===t.indexOf(e)&&t.push(e)}function a(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const s=()=>{},r=t=>t,o=["","X","Y","Z"],c={x:"translateX",y:"translateY",z:"translateZ"},l={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},u={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:l,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:r},skew:l},f=new Map,h=t=>`--motion-${t}`,d=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{o.forEach((e=>{d.push(t+e),f.set(h(t+e),u[t])}))}));const p=(t,e)=>d.indexOf(t)-d.indexOf(e),m=new Set(d),v=t=>m.has(t),g=t=>t.sort(p).reduce(y,"").trim(),y=(t,e)=>`${t} ${e}(var(${h(e)}))`,b=t=>t.startsWith("--"),w=new Set;const x=t=>1e3*t,M=t=>"number"==typeof t,S=t=>Array.isArray(t)&&!M(t[0]),O=t=>"object"==typeof t&&Boolean(t.createAnimation),T=t=>(t=>Array.isArray(t)&&M(t[0]))(t)?A(t):t,A=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,E=t=>document.createElement("div").animate(t,{duration:.001}),j={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{E({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(E({opacity:[0,1]}).finished)},D={},k={};for(const t in j)k[t]=()=>(void 0===D[t]&&(D[t]=j[t]()),D[t]);const P={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},$=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function R(t,e,n,i){if(t===e&&n===i)return r;const a=e=>function(t,e,n,i,a){let s,r,o=0;do{r=e+(n-e)/2,s=$(r,i,a)-t,s>0?n=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(e,0,1,t,n);return t=>0===t||1===t?t:$(a(t),e,i)}const C=(t,e="end")=>n=>{const i=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,a="end"===e?Math.floor(i):Math.ceil(i);return s=0,r=1,o=a/t,Math.min(Math.max(o,s),r);var s,r,o},L={ease:R(.25,.1,.25,1),"ease-in":R(.42,0,1,1),"ease-in-out":R(.42,0,.58,1),"ease-out":R(0,0,.58,1)},V=/\((.*?)\)/;function B(t){if("function"==typeof t)return t;if(Array.isArray(t))return R(...t);if(L[t])return L[t];if(t.startsWith("steps")){const e=V.exec(t);if(e){const t=e[1].split(",");return C(parseFloat(t[0]),t[1].trim())}}return r}const U=(t,e,n)=>-n*t+n*e+t,W=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function q(t,e){return S(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}function F(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=W(0,e,i);t.push(U(n,1,a))}}function I(t){const e=[0];return F(e,t-1),e}function z(t,e=I(t.length),n=r){const i=t.length,a=i-e.length;return a>0&&F(e,a),a=>{let s=0;for(;s<i-2&&!(a<e[s+1]);s++);let r=(o=W(e[s],e[s+1],a),Math.min(1,Math.max(o,0)));var o;return r=q(n,s)(r),U(t[s],t[s+1],r)}}class G{constructor(t,e=[0,1],{easing:n=P.easing,duration:i=P.duration,delay:a=P.delay,endDelay:s=P.endDelay,repeat:r=P.repeat,offset:o,direction:c="normal"}={}){this.startTime=0,this.rate=1,this.t=0,this.cancelTimestamp=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(r+1);O(n)&&(n="ease");const u=z(e,o,S(n)?n.map(B):B(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let r=(e-this.startTime)*this.rate;this.t=r,r/=1e3,r=Math.max(r-a,0),"finished"===this.playState&&(r=l);const o=r/i;let f=Math.floor(o),h=o%1;!h&&o>=1&&(h=1),1===h&&f--;const d=f%2;("reverse"===c||"alternate"===c&&d||"alternate-reverse"===c&&!d)&&(h=1-h);const p=u(r>=l?1:Math.min(h,1));t(p);"finished"===this.playState||r>=l+s?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,p)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){var t;this.playState="idle",this.tick(this.cancelTimestamp),null===(t=this.reject)||void 0===t||t.call(this,!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelTimestamp=performance.now()}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const Z=t=>Array.isArray(t)?t:[t];function K(t){return c[t]&&(t=c[t]),v(t)?h(t):t}const X={get:(t,e)=>{e=K(e);let n=b(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=f.get(e);t&&(n=t.initialValue)}return n}};function Y(t){if(t)try{"finished"!==t.playState&&t.commitStyles(),t.cancel()}catch(t){}}function _(t,e,a,r={}){let o,{duration:l=P.duration,delay:u=P.delay,endDelay:h=P.endDelay,repeat:d=P.repeat,easing:p=P.easing,direction:m,offset:y,allowWebkitAcceleration:A=!1}=r;const E=n(t);let j=k.waapi(),D=s;const $=v(e);$&&((t,e)=>{c[e]&&(e=c[e]);const{transforms:a}=n(t);i(a,e),t.style.transform=g(a)})(t,e);const R=K(e),C=f.get(R);return Y(E.animations[R]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=X.get(t,R))&&void 0!==e?e:null==C?void 0:C.initialValue)&&void 0!==n?n:0};let n=function(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}(Z(a),e);if(O(p)){const t=p.createAnimation(n,e,$,R,E);p=t.easing,void 0!==t.keyframes&&(n=t.keyframes),void 0!==t.duration&&(l=t.duration)}if(b(R)?(D=((t,e)=>n=>t.style.setProperty(e,n))(t,R),k.cssRegisterProperty()?function(t){if(!w.has(t)){w.add(t);try{const{syntax:e,initialValue:n}=f.has(t)?f.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(R):j=!1):D=((t,e)=>n=>t.style[e]=n)(t,R),j){C&&(n=n.map((t=>M(t)?C.toDefaultUnit(t):t))),k.partialKeyframes()||1!==n.length||n.unshift(e());const i={delay:x(u),duration:x(l),endDelay:x(h),easing:S(p)?void 0:T(p),direction:m,iterations:d+1,fill:"both"};o=t.animate({[R]:n,offset:y,easing:S(p)?p.map(T):void 0},i),o.finished||(o.finished=new Promise(((t,e)=>{o.onfinish=t,o.oncancel=e})));const a=n[n.length-1];o.finished.then((()=>{D(a),o.cancel()})).catch(s),A||(o.playbackRate=1.000001)}else if($&&n.every(M)){if(1===n.length&&n.unshift(parseFloat(e())),C){const t=D;D=e=>t(C.toDefaultUnit(e))}o=new G(D,n,Object.assign(Object.assign({},r),{duration:l,easing:p}))}else{const t=n[n.length-1];D(C&&M(t)?C.toDefaultUnit(t):t)}return E.animations[R]=o,null==o||o.finished.then((()=>{E.animations[R]=void 0,E.generators[R]=void 0,E.prevGeneratorState[R]=void 0})).catch(s),o}}const N=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function H(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t)}const J=t=>t(),Q=(t,e)=>new Proxy({animations:t.map(J).filter(Boolean),duration:e},et),tt=t=>t.animations[0],et={get:(t,e)=>{var n,i;switch(e){case"duration":return t.duration;case"currentTime":let a=(null===(n=tt(t))||void 0===n?void 0:n[e])||0;return a?a/1e3:0;case"playbackRate":return null===(i=tt(t))||void 0===i?void 0:i[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(nt)).catch(s)),t.finished;case"stop":return()=>t.animations.forEach(Y);default:return()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n=x(n);case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}},nt=t=>t.finished;function it(t,e,n){return"function"==typeof t?t(e,n):t}function at(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(i=Object.getOwnPropertySymbols(t);a<i.length;a++)e.indexOf(i[a])<0&&Object.prototype.propertyIsEnumerable.call(t,i[a])&&(n[i[a]]=t[i[a]])}return n}function st(t,e,n,i){var a;return M(e)?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(a=i.get(e))&&void 0!==a?a:t}function rt(t,e,n,i,s,r){!function(t,e,n){for(let i=0;i<t.length;i++){const s=t[i];s.at>e&&s.at<n&&(a(t,s),i--)}}(t,s,r);for(let a=0;a<e.length;a++)t.push({value:e[a],at:U(s,r,i[a]),easing:q(n,a)})}function ot(t,e){return t.at===e.at?null===t.value?1:-1:t.at-e.at}function ct(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function lt(t,e){return e[t]||(e[t]=[]),e[t]}const ut=({stiffness:t=100,damping:e=10,mass:n=1,from:i=0,to:a=1,velocity:s=0,restSpeed:r=2,restDistance:o=.5}={})=>{const c={done:!1,value:i,target:a,velocity:s=s?s/1e3:0,hasReachedTarget:!1},l=((t=100,e=10,n=1)=>e/(2*Math.sqrt(t*n)))(t,e,n),u=a-i,f=Math.sqrt(t/n)/1e3,h=((t,e)=>t*Math.sqrt(1-e*e))(f,l);let d;return d=l<1?t=>a-Math.exp(-l*f*t)*((l*f*u-s)/h*Math.sin(h*t)+u*Math.cos(h*t)):t=>a-Math.exp(-f*t)*(u+(s+f*u)*t),{next:t=>{c.value=d(t),c.velocity=0===t?s:ft(d,t,c.value);const e=Math.abs(c.velocity)<=r,n=Math.abs(a-c.value)<=o;var l,u,f;return c.done=e&&n,c.hasReachedTarget=(l=i,u=a,f=c.value,l<u&&f>=u||l>u&&f<=u),c}}};function ft(t,e,n){const i=Math.max(e-5,0);return a=n-t(i),(s=5)?a*(1e3/s):0;var a,s}function ht(t){const e=new WeakMap;return(n={})=>{const i=new Map,a=(e=0,a=100,s=0,r=!1)=>{const o=`${e}-${a}-${s}-${r}`;return i.has(o)||i.set(o,t(Object.assign({from:e,to:a,velocity:s,restSpeed:r?.05:2,restDistance:r?.01:.5},n))),i.get(o)},s=t=>(e.has(t)||e.set(t,function(t){let e,n=10,i=t.next(0);const a=[i.value];for(;!i.done&&n<1e4;)i=t.next(n),a.push(i.done?i.target:i.value),void 0===e&&i.hasReachedTarget&&(e=n),n+=10;const s=n-10;return 1===a.length&&a.push(i.value),{keyframes:a,duration:s/1e3,overshootDuration:(null!=e?e:s)/1e3}}(t)),e.get(t));return{createAnimation:(t,e,n,i,r)=>{let o,c;const l=t.length;if(n&&l<=2&&t.every(dt)){const n=i&&r&&r.prevGeneratorState[i],u=n&&(1===l||2===l&&null===t[0])?n.velocity:0,f=t[l-1],h=1===l?null:t[0],d=null===h?n?n.value:parseFloat(e()):h;c=a(d,f,u,null==i?void 0:i.includes("scale"));const p=s(c);o=Object.assign(Object.assign({},p),{easing:"linear"})}else{c=a(0,100);o={easing:"ease",duration:s(c).overshootDuration}}return c&&r&&i&&(r.generators[i]=c),o}}}}const dt=t=>"string"!=typeof t,pt=ht(ut),mt=ht((({from:t=0,velocity:e=0,power:n=.8,decay:i=.325,bounceDamping:a,bounceStiffness:s,changeTarget:r,min:o,max:c,restDistance:l=.5,restSpeed:u})=>{i=x(i);const f={value:t,target:t,velocity:e,hasReachedTarget:!1,done:!1},h=t=>void 0===o?c:void 0===c||Math.abs(o-t)<Math.abs(c-t)?o:c;let d=n*e;const p=t+d,m=void 0===r?p:r(p);f.target=m,m!==p&&(d=m-t);const v=t=>-d*Math.exp(-t/i),g=t=>m+v(t),y=t=>{const n=v(t),i=g(t);f.done=Math.abs(n)<=l,f.value=f.done?m:i,f.velocity=0===t?e:ft(g,t,f.value)};let b,w;const M=t=>{var e;(e=f.value,void 0!==o&&e<o||void 0!==c&&e>c)&&(b=t,w=ut({from:f.value,to:h(f.value),velocity:f.velocity,damping:a,stiffness:s,restDistance:l,restSpeed:u}))};return M(0),{next:t=>{let e=!1;return w||void 0!==b||(e=!0,y(t),M(t)),void 0!==b&&t>b?(f.hasReachedTarget=!0,w.next(t-b)):(f.hasReachedTarget=!1,!e&&y(t),f)}}}));function vt(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let gt;function yt(){if(!gt)return;const t=gt.sort(wt).map(xt);t.forEach(Mt),t.forEach(Mt),gt=void 0}function bt(t){gt?i(gt,t):(gt=[t],requestAnimationFrame(yt))}const wt=(t,e)=>t.getDepth()-e.getDepth(),xt=t=>t.animateUpdates(),Mt=t=>t.next(),St=(t,e)=>new CustomEvent(t,{detail:{target:e}});function Ot(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEvent:n}}))}function Tt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEntry:n}}))}const At=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),Ot(t,e,i))},Et={inView:{isActive:t=>Boolean(t.inView),subscribe:(t,{enable:e,disable:n})=>{let i=!1;if("undefined"!=typeof IntersectionObserver){const a=new IntersectionObserver((([a])=>{!i&&a.isIntersecting?(e(),Tt(t,"viewenter",a)):i&&!a.isIntersecting&&(n(),Tt(t,"viewleave",a)),i=a.isIntersecting}));return a.observe(t),()=>{a.unobserve(t),a.disconnect()}}return e(),()=>{}}},hover:{isActive:t=>Boolean(t.hover),subscribe:(t,{enable:e,disable:n})=>{const i=At(t,"hoverstart",e),a=At(t,"hoverend",n);return t.addEventListener("pointerenter",i),t.addEventListener("pointerleave",a),()=>{t.removeEventListener("pointerenter",i),t.removeEventListener("pointerleave",a)}}},press:{isActive:t=>Boolean(t.press),subscribe:(t,{enable:e,disable:n})=>{const i=e=>{n(),Ot(t,"pressend",e),window.removeEventListener("pointerup",i)},a=n=>{e(),Ot(t,"pressstart",n),window.addEventListener("pointerup",i)};return t.addEventListener("pointerdown",a),()=>{t.removeEventListener("pointerdown",a),window.removeEventListener("pointerup",i)}}}},jt=["initial","animate",...Object.keys(Et),"exit"],Dt=new WeakMap;function kt(t){const e={},n=[];for(let i in t){const a=t[i];v(i)&&(c[i]&&(i=c[i]),n.push(i),i=h(i));let s=Array.isArray(a)?a[0]:a;const r=f.get(i);r&&(s=M(a)?r.toDefaultUnit(a):a),e[i]=s}return n.length&&(e.transform=g(n)),e}const Pt=t=>`-${t.toLowerCase()}`;t.animate=function(t,e,n={}){var i;const a=(t=H(t)).length,s=[];for(let i=0;i<a;i++){const r=t[i];for(const t in e){const o=N(n,t);o.delay=it(o.delay,i,a);const c=_(r,t,e[t],o);s.push(c)}}return Q(s,null!==(i=n.duration)&&void 0!==i?i:P.duration)},t.animateStyle=_,t.createMotionState=function(t={},e){let n,i=e?e.getDepth()+1:0;const r={initial:!0,animate:!0},o={},c={};for(const n of jt)c[n]="string"==typeof t[n]?t[n]:null==e?void 0:e.getContext()[n];const l=!1===t.initial?"animate":"initial";let u=at(vt(t[l]||c[l],t.variants)||{},["transition"]);const f=Object.assign({},u),h=(t,e)=>()=>{r[t]=e,bt(p)},d=()=>{for(const e in Et){const i=Et[e].isActive(t),a=o[e];i&&!a?o[e]=Et[e].subscribe(n,{enable:h(e,!0),disable:h(e,!1)}):!i&&a&&(a(),delete o[e])}},p={update:e=>{n&&(t=e,d(),bt(p))},setActive:(t,e)=>{n&&(r[t]=e,bt(p))},animateUpdates:function*(){var e,i;const a=u;u={};const o={},c={},l={};for(const n of jt){if(!r[n])continue;const a=vt(t[n]);if(a){o[n]=a;for(const s in a)"transition"!==s&&(u[s]=a[s],l[s]=N(null!==(i=null!==(e=a.transition)&&void 0!==e?e:t.transition)&&void 0!==i?i:{},s),c[s]=n)}}const h=new Set([...Object.keys(u),...Object.keys(a)]),d=[];h.forEach((t=>{var e,i,s;void 0===u[t]&&(u[t]=f[t]),i=a[t],s=u[t],typeof i==typeof s&&(Array.isArray(i)&&Array.isArray(s)?function(t,e){const n=e.length;if(n!==t.length)return!1;for(let i=0;i<n;i++)if(e[i]!==t[i])return!1;return!0}(i,s):i===s)||(null!==(e=f[t])&&void 0!==e||(f[t]=X.get(n,t)),d.push(_(n,t,u[t],l[t])))})),yield;const p=d.map((t=>t())).filter(Boolean);if(!p.length)return;const m=u;n.dispatchEvent(St("motionstart",m)),Promise.all(p.map((t=>t.finished))).then((()=>{n.dispatchEvent(St("motioncomplete",m))})).catch(s)},getDepth:()=>i,getTarget:()=>u,getOptions:()=>t,getContext:()=>c,mount:t=>(n=t,Dt.set(n,p),d(),()=>{Dt.delete(n),function(t){gt&&a(gt,t)}(p);for(const t in o)o[t]()}),isMounted:()=>Boolean(n)};return p},t.createStyleString=function(t={}){const e=kt(t);let n="";for(const t in e)n+=t.startsWith("--")?t:t.replace(/[A-Z]/g,Pt),n+=`: ${e[t]}; `;return n},t.createStyles=kt,t.getAnimationData=n,t.getStyleName=K,t.glide=mt,t.mountedStates=Dt,t.spring=pt,t.stagger=function(t=.1,{start:e=0,from:n=0,easing:i}={}){return(a,s)=>{const r=M(n)?n:function(t,e){if("first"===t)return 0;{const n=e-1;return"last"===t?n:n/2}}(n,s),o=Math.abs(r-a);let c=t*o;if(i){const t=s*a;c=B(i)(c/t)*t}return e+c}},t.style=X,t.test=function(){console.log("test")},t.timeline=function(t,e={}){var n,i;const a=function(t,e={}){var{defaultOptions:n={}}=e,i=at(e,["defaultOptions"]);const a=[],s=new Map,r={},o=new Map;let c=0,l=0,u=0;for(let e=0;e<t.length;e++){const[i,a,f={}]=t[e];void 0!==f.at&&(l=st(l,f.at,c,o));let h=0;const d=H(i,r),p=d.length;for(let t=0;t<p;t++){const e=ct(d[t],s);for(const i in a){const s=lt(i,e);let r=Z(a[i]);const o=N(f,i);let{duration:c=n.duration||P.duration,easing:d=n.easing||P.easing}=o;if(O(d)){const t=v(i);r.length;const e=d.createAnimation(r,(()=>"0"),t);d=e.easing,void 0!==e.keyframes&&(r=e.keyframes),void 0!==e.duration&&(c=e.duration)}const m=it(f.delay,t,p)||0,g=l+m,y=g+c;let{offset:b=I(r.length)}=o;1===b.length&&0===b[0]&&(b[1]=1);const w=length-r.length;w>0&&F(b,w),1===r.length&&r.unshift(null),rt(s,r,d,b,g,y),h=Math.max(m+c,h),u=Math.max(y,u)}}c=l,l+=h}return s.forEach(((t,e)=>{for(const s in t){const r=t[s];r.sort(ot);const o=[],c=[],l=[];for(let t=0;t<r.length;t++){const{at:e,value:n,easing:i}=r[t];o.push(n),c.push(W(0,u,e)),l.push(i||P.easing)}0!==c[0]&&(c.unshift(0),o.unshift(o[0]),l.unshift("linear")),1!==c[c.length-1]&&(c.push(1),o.push(null)),a.push([e,s,o,Object.assign(Object.assign(Object.assign({},n),{duration:u,easing:l,offset:c}),i)])}})),a}(t,e),s=a.map((t=>_(...t))).filter(Boolean);return Q(s,null!==(i=null===(n=a[0])||void 0===n?void 0:n[3].duration)&&void 0!==i?i:P.duration)},Object.defineProperty(t,"__esModule",{value:!0})}));

package/dist/motion.umd.js

@@ -1379,36 +1379,175 @@
     const fireAnimateUpdates = (state) => state.animateUpdates();
     const fireNext = (iterator) => iterator.next();
 
-    const stateNames = ["initial", "animate"];
+    const motionEvent = (name, target) => new CustomEvent(name, { detail: { target } });
+    function dispatchPointerEvent(element, name, event) {
+        element.dispatchEvent(new CustomEvent(name, { detail: { originalEvent: event } }));
+    }
+    function dispatchViewEvent(element, name, entry) {
+        element.dispatchEvent(new CustomEvent(name, { detail: { originalEntry: entry } }));
+    }
+
+    /**
+     * TODO: Support viewport options
+     */
+    const inView = {
+        isActive: (options) => Boolean(options.inView),
+        subscribe: (element, { enable, disable }) => {
+            let isVisible = false;
+            if (typeof IntersectionObserver !== "undefined") {
+                const observer = new IntersectionObserver(([entry]) => {
+                    if (!isVisible && entry.isIntersecting) {
+                        enable();
+                        dispatchViewEvent(element, "viewenter", entry);
+                    }
+                    else if (isVisible && !entry.isIntersecting) {
+                        disable();
+                        dispatchViewEvent(element, "viewleave", entry);
+                    }
+                    isVisible = entry.isIntersecting;
+                });
+                observer.observe(element);
+                return () => {
+                    observer.unobserve(element);
+                    observer.disconnect();
+                };
+            }
+            else {
+                enable();
+                return () => { };
+            }
+        },
+    };
+
+    const mouseEvent = (element, name, action) => (event) => {
+        if (event.pointerType && event.pointerType !== "mouse")
+            return;
+        action();
+        dispatchPointerEvent(element, name, event);
+    };
+    const hover = {
+        isActive: (options) => Boolean(options.hover),
+        subscribe: (element, { enable, disable }) => {
+            const onEnter = mouseEvent(element, "hoverstart", enable);
+            const onLeave = mouseEvent(element, "hoverend", disable);
+            element.addEventListener("pointerenter", onEnter);
+            element.addEventListener("pointerleave", onLeave);
+            return () => {
+                element.removeEventListener("pointerenter", onEnter);
+                element.removeEventListener("pointerleave", onLeave);
+            };
+        },
+    };
+
+    const press = {
+        isActive: (options) => Boolean(options.press),
+        subscribe: (element, { enable, disable }) => {
+            const onPointerUp = (event) => {
+                disable();
+                dispatchPointerEvent(element, "pressend", event);
+                window.removeEventListener("pointerup", onPointerUp);
+            };
+            const onPointerDown = (event) => {
+                enable();
+                dispatchPointerEvent(element, "pressstart", event);
+                window.addEventListener("pointerup", onPointerUp);
+            };
+            element.addEventListener("pointerdown", onPointerDown);
+            return () => {
+                element.removeEventListener("pointerdown", onPointerDown);
+                window.removeEventListener("pointerup", onPointerUp);
+            };
+        },
+    };
+
+    const gestures = { inView, hover, press };
+    /**
+     * A list of state types, in priority order. If a value is defined in
+     * a righter-most type, it will override any definition in a lefter-most.
+     */
+    const stateTypes = ["initial", "animate", ...Object.keys(gestures), "exit"];
+    /**
+     * A global store of all generated motion states. This can be used to lookup
+     * a motion state for a given Element.
+     */
+    const mountedStates = new WeakMap();
     function createMotionState(options = {}, parent) {
-        var _a;
-        //@ts-ignore
+        /**
+         * The element represented by the motion state. This is an empty reference
+         * when we create the state to support SSR and allow for later mounting
+         * in view libraries.
+         *
+         * @ts-ignore
+         */
         let element;
+        /**
+         * Calculate a depth that we can use to order motion states by tree depth.
+         */
         let depth = parent ? parent.getDepth() + 1 : 0;
-        // const activeStates = stateNames.map((key) => key === "initial")
+        /**
+         * Track which states are currently active.
+         */
+        const activeStates = { initial: true, animate: true };
+        /**
+         * A map of functions that, when called, will remove event listeners for
+         * a given gesture.
+         */
+        const gestureSubscriptions = {};
+        /**
+         * Initialise a context to share through motion states. This
+         * will be populated by variant names (if any).
+         */
         const context = {};
-        for (const name of stateNames) {
+        for (const name of stateTypes) {
             context[name] =
                 typeof options[name] === "string"
                     ? options[name]
                     : parent === null || parent === void 0 ? void 0 : parent.getContext()[name];
         }
-        let _b = resolveVariant((_a = options.initial) !== null && _a !== void 0 ? _a : context.initial, options.variants) || {}, target = __rest(_b, ["transition"]);
+        /**
+         * If initial is set to false we use the animate prop as the initial
+         * animation state.
+         */
+        const initialVariantSource = options.initial === false ? "animate" : "initial";
+        /**
+         * Destructure an initial target out from the resolved initial variant.
+         */
+        let _a = resolveVariant(options[initialVariantSource] || context[initialVariantSource], options.variants) || {}, target = __rest(_a, ["transition"]);
+        /**
+         * The base target is a cached map of values that we'll use to animate
+         * back to if a value is removed from all active state types. This
+         * is usually the initial value as read from the DOM, for instance if
+         * it hasn't been defined in initial.
+         */
         const baseTarget = Object.assign({}, target);
+        /**
+         * A generator that will be processed by the global animation scheduler.
+         * This yeilds when it switches from reading the DOM to writing to it
+         * to prevent layout thrashing.
+         */
         function* animateUpdates() {
             var _a, _b;
             const prevTarget = target;
             target = {};
+            const resolvedVariants = {};
+            const enteringInto = {};
             const animationOptions = {};
-            for (const name of stateNames) {
+            for (const name of stateTypes) {
+                if (!activeStates[name])
+                    continue;
                 const variant = resolveVariant(options[name]);
                 if (!variant)
                     continue;
+                resolvedVariants[name] = variant;
                 for (const key in variant) {
                     if (key === "transition")
                         continue;
                     target[key] = variant[key];
                     animationOptions[key] = getOptions((_b = (_a = variant.transition) !== null && _a !== void 0 ? _a : options.transition) !== null && _b !== void 0 ? _b : {}, key);
+                    /**
+                     * Mark which state type this value is animating into.
+                     */
+                    enteringInto[key] = name;
                 }
             }
             const allTargetKeys = new Set([
@@ -1426,6 +1565,7 @@
                     animationFactories.push(animateStyle(element, key, target[key], animationOptions[key]));
                 }
             });
+            // Wait for all animation states to read from the DOM
             yield;
             const animations = animationFactories
                 .map((factory) => factory())
@@ -1433,18 +1573,45 @@
             if (!animations.length)
                 return;
             const animationTarget = target;
+            element.dispatchEvent(motionEvent("motionstart", animationTarget));
             Promise.all(animations.map((animation) => animation.finished))
                 .then(() => {
-                var _a;
-                (_a = options.onAnimationComplete) === null || _a === void 0 ? void 0 : _a.call(options, animationTarget);
+                element.dispatchEvent(motionEvent("motioncomplete", animationTarget));
             })
                 .catch(noop);
         }
+        const setGesture = (name, isActive) => () => {
+            activeStates[name] = isActive;
+            scheduleAnimation(state);
+        };
+        const updateGestureSubscriptions = () => {
+            for (const name in gestures) {
+                const isGestureActive = gestures[name].isActive(options);
+                const remove = gestureSubscriptions[name];
+                if (isGestureActive && !remove) {
+                    gestureSubscriptions[name] = gestures[name].subscribe(element, {
+                        enable: setGesture(name, true),
+                        disable: setGesture(name, false),
+                    });
+                }
+                else if (!isGestureActive && remove) {
+                    remove();
+                    delete gestureSubscriptions[name];
+                }
+            }
+        };
         const state = {
             update: (newOptions) => {
                 if (!element)
                     return;
                 options = newOptions;
+                updateGestureSubscriptions();
+                scheduleAnimation(state);
+            },
+            setActive: (name, isActive) => {
+                if (!element)
+                    return;
+                activeStates[name] = isActive;
                 scheduleAnimation(state);
             },
             animateUpdates,
@@ -1455,12 +1622,17 @@
             mount: (newElement) => {
                 invariant(Boolean(newElement), "Animation state must be mounted with valid Element");
                 element = newElement;
+                mountedStates.set(element, state);
+                updateGestureSubscriptions();
                 return () => {
+                    mountedStates.delete(element);
                     unscheduleAnimation(state);
-                    // Stop all animations
-                    // Remove all gesture subscriptions
+                    for (const key in gestureSubscriptions) {
+                        gestureSubscriptions[key]();
+                    }
                 };
             },
+            isMounted: () => Boolean(element),
         };
         return state;
     }
@@ -1516,9 +1688,13 @@
     exports.createMotionState = createMotionState;
     exports.createStyleString = createStyleString;
     exports.createStyles = createStyles;
+    exports.getAnimationData = getAnimationData;
+    exports.getStyleName = getStyleName;
     exports.glide = glide;
+    exports.mountedStates = mountedStates;
     exports.spring = spring;
     exports.stagger = stagger;
+    exports.style = style;
     exports.test = test;
     exports.timeline = timeline;
 

package/dist/size-index.js

@@ -1 +1 @@
-const t=new WeakMap;function e(e){return t.has(e)||t.set(e,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),t.get(e)}function n(t,e){-1===t.indexOf(e)&&t.push(e)}function a(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const i=()=>{},r=t=>t,s=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},l={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},c={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:l,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:r},skew:l},u=new Map,h=t=>`--motion-${t}`,f=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{s.forEach((e=>{f.push(t+e),u.set(h(t+e),c[t])}))}));const d=(t,e)=>f.indexOf(t)-f.indexOf(e),p=new Set(f),m=t=>p.has(t),y=t=>t.sort(d).reduce(g,"").trim(),g=(t,e)=>`${t} ${e}(var(${h(e)}))`,v=t=>t.startsWith("--"),b=new Set;const x=t=>1e3*t,w=t=>"number"==typeof t,M=t=>Array.isArray(t)&&!w(t[0]),O=t=>"object"==typeof t&&Boolean(t.createAnimation),S=t=>(t=>Array.isArray(t)&&w(t[0]))(t)?T(t):t,T=([t,e,n,a])=>`cubic-bezier(${t}, ${e}, ${n}, ${a})`,A=t=>document.createElement("div").animate(t,{duration:.001}),D={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{A({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(A({opacity:[0,1]}).finished)},j={},k={};for(const t in D)k[t]=()=>(void 0===j[t]&&(j[t]=D[t]()),j[t]);const E={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},P=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function $(t,e,n,a){if(t===e&&n===a)return r;const i=e=>function(t,e,n,a,i){let r,s,o=0;do{s=e+(n-e)/2,r=P(s,a,i)-t,r>0?n=s:e=s}while(Math.abs(r)>1e-7&&++o<12);return s}(e,0,1,t,n);return t=>0===t||1===t?t:P(i(t),e,a)}const R=(t,e="end")=>n=>{const a=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,i="end"===e?Math.floor(a):Math.ceil(a);return r=0,s=1,o=i/t,Math.min(Math.max(o,r),s);var r,s,o},U={ease:$(.25,.1,.25,1),"ease-in":$(.42,0,1,1),"ease-in-out":$(.42,0,.58,1),"ease-out":$(0,0,.58,1)},V=/\((.*?)\)/;function q(t){if("function"==typeof t)return t;if(Array.isArray(t))return $(...t);if(U[t])return U[t];if(t.startsWith("steps")){const e=V.exec(t);if(e){const t=e[1].split(",");return R(parseFloat(t[0]),t[1].trim())}}return r}const C=(t,e,n)=>-n*t+n*e+t,W=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function F(t,e){return M(t)?t[((t,e,n)=>{const a=e-t;return((n-t)%a+a)%a+t})(0,t.length,e)]:t}function B(t,e){const n=t[t.length-1];for(let a=1;a<=e;a++){const i=W(0,e,a);t.push(C(n,1,i))}}function z(t){const e=[0];return B(e,t-1),e}function G(t,e=z(t.length),n=r){const a=t.length,i=a-e.length;return i>0&&B(e,i),i=>{let r=0;for(;r<a-2&&!(i<e[r+1]);r++);let s=(o=W(e[r],e[r+1],i),Math.min(1,Math.max(o,0)));var o;return s=F(n,r)(s),C(t[r],t[r+1],s)}}class Z{constructor(t,e=[0,1],{easing:n=E.easing,duration:a=E.duration,delay:i=E.delay,endDelay:r=E.endDelay,repeat:s=E.repeat,offset:o,direction:l="normal"}={}){this.startTime=0,this.rate=1,this.t=0,this.cancelTimestamp=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const c=a*(s+1);O(n)&&(n="ease");const u=G(e,o,M(n)?n.map(q):q(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let s=(e-this.startTime)*this.rate;this.t=s,s/=1e3,s=Math.max(s-i,0),"finished"===this.playState&&(s=c);const o=s/a;let h=Math.floor(o),f=o%1;!f&&o>=1&&(f=1),1===f&&h--;const d=h%2;("reverse"===l||"alternate"===l&&d||"alternate-reverse"===l&&!d)&&(f=1-f);const p=u(s>=c?1:Math.min(f,1));t(p);"finished"===this.playState||s>=c+r?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,p)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){var t;this.playState="idle",this.tick(this.cancelTimestamp),null===(t=this.reject)||void 0===t||t.call(this,!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelTimestamp=performance.now()}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const K=t=>Array.isArray(t)?t:[t];function N(t){return o[t]&&(t=o[t]),m(t)?h(t):t}const X=(t,e)=>{e=N(e);let n=v(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=u.get(e);t&&(n=t.initialValue)}return n};function Y(t){if(t)try{"finished"!==t.playState&&t.commitStyles(),t.cancel()}catch(t){}}function I(t,a,r,s={}){let l,{duration:c=E.duration,delay:h=E.delay,endDelay:f=E.endDelay,repeat:d=E.repeat,easing:p=E.easing,direction:g,offset:T,allowWebkitAcceleration:A=!1}=s;const D=e(t);let j=k.waapi(),P=i;const $=m(a);$&&((t,a)=>{o[a]&&(a=o[a]);const{transforms:i}=e(t);n(i,a),t.style.transform=y(i)})(t,a);const R=N(a),U=u.get(R);return Y(D.animations[R]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=X(t,R))&&void 0!==e?e:null==U?void 0:U.initialValue)&&void 0!==n?n:0};let n=function(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}(K(r),e);if(O(p)){const t=p.createAnimation(n,e,$,R,D);p=t.easing,void 0!==t.keyframes&&(n=t.keyframes),void 0!==t.duration&&(c=t.duration)}if(v(R)?(P=((t,e)=>n=>t.style.setProperty(e,n))(t,R),k.cssRegisterProperty()?function(t){if(!b.has(t)){b.add(t);try{const{syntax:e,initialValue:n}=u.has(t)?u.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(R):j=!1):P=((t,e)=>n=>t.style[e]=n)(t,R),j){U&&(n=n.map((t=>w(t)?U.toDefaultUnit(t):t))),k.partialKeyframes()||1!==n.length||n.unshift(e());const a={delay:x(h),duration:x(c),endDelay:x(f),easing:M(p)?void 0:S(p),direction:g,iterations:d+1,fill:"both"};l=t.animate({[R]:n,offset:T,easing:M(p)?p.map(S):void 0},a),l.finished||(l.finished=new Promise(((t,e)=>{l.onfinish=t,l.oncancel=e})));const r=n[n.length-1];l.finished.then((()=>{P(r),l.cancel()})).catch(i),A||(l.playbackRate=1.000001)}else if($&&n.every(w)){if(1===n.length&&n.unshift(parseFloat(e())),U){const t=P;P=e=>t(U.toDefaultUnit(e))}l=new Z(P,n,Object.assign(Object.assign({},s),{duration:c,easing:p}))}else{const t=n[n.length-1];P(U&&w(t)?U.toDefaultUnit(t):t)}return D.animations[R]=l,null==l||l.finished.then((()=>{D.animations[R]=void 0,D.generators[R]=void 0,D.prevGeneratorState[R]=void 0})).catch(i),l}}const L=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function _(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t)}const H=t=>t(),J=(t,e)=>new Proxy({animations:t.map(H).filter(Boolean),duration:e},tt),Q=t=>t.animations[0],tt={get:(t,e)=>{var n,a;switch(e){case"duration":return t.duration;case"currentTime":let r=(null===(n=Q(t))||void 0===n?void 0:n[e])||0;return r?r/1e3:0;case"playbackRate":return null===(a=Q(t))||void 0===a?void 0:a[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(et)).catch(i)),t.finished;case"stop":return()=>t.animations.forEach(Y);default:return()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n=x(n);case"currentTime":case"playbackRate":for(let a=0;a<t.animations.length;a++)t.animations[a][e]=n;return!0}return!1}},et=t=>t.finished;function nt(t=.1,{start:e=0,from:n=0,easing:a}={}){return(i,r)=>{const s=w(n)?n:function(t,e){if("first"===t)return 0;{const n=e-1;return"last"===t?n:n/2}}(n,r),o=Math.abs(s-i);let l=t*o;if(a){const t=r*i;l=q(a)(l/t)*t}return e+l}}function at(t,e,n){return"function"==typeof t?t(e,n):t}function it(t,e,n={}){var a;const i=(t=_(t)).length,r=[];for(let a=0;a<i;a++){const s=t[a];for(const t in e){const o=L(n,t);o.delay=at(o.delay,a,i);const l=I(s,t,e[t],o);r.push(l)}}return J(r,null!==(a=n.duration)&&void 0!==a?a:E.duration)}function rt(t,e){var n={};for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&e.indexOf(a)<0&&(n[a]=t[a]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(a=Object.getOwnPropertySymbols(t);i<a.length;i++)e.indexOf(a[i])<0&&Object.prototype.propertyIsEnumerable.call(t,a[i])&&(n[a[i]]=t[a[i]])}return n}var st=function(){};function ot(t,e,n,a){var i;return w(e)?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(i=a.get(e))&&void 0!==i?i:t}function lt(t,e,n,i,r,s){!function(t,e,n){for(let i=0;i<t.length;i++){const r=t[i];r.at>e&&r.at<n&&(a(t,r),i--)}}(t,r,s);for(let a=0;a<e.length;a++)t.push({value:e[a],at:C(r,s,i[a]),easing:F(n,a)})}function ct(t,e){return t.at===e.at?null===t.value?1:-1:t.at-e.at}function ut(t,e={}){var n,a;const i=function(t,e={}){var{defaultOptions:n={}}=e,a=rt(e,["defaultOptions"]);const i=[],r=new Map,s={},o=new Map;let l=0,c=0,u=0;for(let e=0;e<t.length;e++){const[a,i,h={}]=t[e];void 0!==h.at&&(c=ot(c,h.at,l,o));let f=0;const d=_(a,s),p=d.length;for(let t=0;t<p;t++){const e=ht(d[t],r);for(const a in i){const r=ft(a,e);let s=K(i[a]);const o=L(h,a);let{duration:l=n.duration||E.duration,easing:d=n.easing||E.easing}=o;if(O(d)){const t=m(a);st(2===s.length||!t,"spring must be provided 2 keyframes within timeline");const e=d.createAnimation(s,(()=>"0"),t);d=e.easing,void 0!==e.keyframes&&(s=e.keyframes),void 0!==e.duration&&(l=e.duration)}const y=at(h.delay,t,p)||0,g=c+y,v=g+l;let{offset:b=z(s.length)}=o;1===b.length&&0===b[0]&&(b[1]=1);const x=length-s.length;x>0&&B(b,x),1===s.length&&s.unshift(null),lt(r,s,d,b,g,v),f=Math.max(y+l,f),u=Math.max(v,u)}}l=c,c+=f}return r.forEach(((t,e)=>{for(const r in t){const s=t[r];s.sort(ct);const o=[],l=[],c=[];for(let t=0;t<s.length;t++){const{at:e,value:n,easing:a}=s[t];o.push(n),l.push(W(0,u,e)),c.push(a||E.easing)}0!==l[0]&&(l.unshift(0),o.unshift(o[0]),c.unshift("linear")),1!==l[l.length-1]&&(l.push(1),o.push(null)),i.push([e,r,o,Object.assign(Object.assign(Object.assign({},n),{duration:u,easing:c,offset:l}),a)])}})),i}(t,e),r=i.map((t=>I(...t))).filter(Boolean);return J(r,null!==(a=null===(n=i[0])||void 0===n?void 0:n[3].duration)&&void 0!==a?a:E.duration)}function ht(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function ft(t,e){return e[t]||(e[t]=[]),e[t]}"production"!==process.env.NODE_ENV&&(st=function(t,e){if(!t)throw new Error(e)});const dt=({stiffness:t=100,damping:e=10,mass:n=1,from:a=0,to:i=1,velocity:r=0,restSpeed:s=2,restDistance:o=.5}={})=>{const l={done:!1,value:a,target:i,velocity:r=r?r/1e3:0,hasReachedTarget:!1},c=((t=100,e=10,n=1)=>e/(2*Math.sqrt(t*n)))(t,e,n),u=i-a,h=Math.sqrt(t/n)/1e3,f=((t,e)=>t*Math.sqrt(1-e*e))(h,c);let d;return d=c<1?t=>i-Math.exp(-c*h*t)*((c*h*u-r)/f*Math.sin(f*t)+u*Math.cos(f*t)):t=>i-Math.exp(-h*t)*(u+(r+h*u)*t),{next:t=>{l.value=d(t),l.velocity=0===t?r:pt(d,t,l.value);const e=Math.abs(l.velocity)<=s,n=Math.abs(i-l.value)<=o;var c,u,h;return l.done=e&&n,l.hasReachedTarget=(c=a,u=i,h=l.value,c<u&&h>=u||c>u&&h<=u),l}}};function pt(t,e,n){const a=Math.max(e-5,0);return i=n-t(a),(r=5)?i*(1e3/r):0;var i,r}function mt(t){const e=new WeakMap;return(n={})=>{const a=new Map,i=(e=0,i=100,r=0,s=!1)=>{const o=`${e}-${i}-${r}-${s}`;return a.has(o)||a.set(o,t(Object.assign({from:e,to:i,velocity:r,restSpeed:s?.05:2,restDistance:s?.01:.5},n))),a.get(o)},r=t=>(e.has(t)||e.set(t,function(t){let e,n=10,a=t.next(0);const i=[a.value];for(;!a.done&&n<1e4;)a=t.next(n),i.push(a.done?a.target:a.value),void 0===e&&a.hasReachedTarget&&(e=n),n+=10;const r=n-10;return 1===i.length&&i.push(a.value),{keyframes:i,duration:r/1e3,overshootDuration:(null!=e?e:r)/1e3}}(t)),e.get(t));return{createAnimation:(t,e,n,a,s)=>{let o,l;const c=t.length;if(n&&c<=2&&t.every(yt)){const n=a&&s&&s.prevGeneratorState[a],u=n&&(1===c||2===c&&null===t[0])?n.velocity:0,h=t[c-1],f=1===c?null:t[0],d=null===f?n?n.value:parseFloat(e()):f;l=i(d,h,u,null==a?void 0:a.includes("scale"));const p=r(l);o=Object.assign(Object.assign({},p),{easing:"linear"})}else{l=i(0,100);o={easing:"ease",duration:r(l).overshootDuration}}return l&&s&&a&&(s.generators[a]=l),o}}}}const yt=t=>"string"!=typeof t,gt=mt(dt),vt=mt((({from:t=0,velocity:e=0,power:n=.8,decay:a=.325,bounceDamping:i,bounceStiffness:r,changeTarget:s,min:o,max:l,restDistance:c=.5,restSpeed:u})=>{a=x(a);const h={value:t,target:t,velocity:e,hasReachedTarget:!1,done:!1},f=t=>void 0===o?l:void 0===l||Math.abs(o-t)<Math.abs(l-t)?o:l;let d=n*e;const p=t+d,m=void 0===s?p:s(p);h.target=m,m!==p&&(d=m-t);const y=t=>-d*Math.exp(-t/a),g=t=>m+y(t),v=t=>{const n=y(t),a=g(t);h.done=Math.abs(n)<=c,h.value=h.done?m:a,h.velocity=0===t?e:pt(g,t,h.value)};let b,w;const M=t=>{var e;(e=h.value,void 0!==o&&e<o||void 0!==l&&e>l)&&(b=t,w=dt({from:h.value,to:f(h.value),velocity:h.velocity,damping:i,stiffness:r,restDistance:c,restSpeed:u}))};return M(0),{next:t=>{let e=!1;return w||void 0!==b||(e=!0,v(t),M(t)),void 0!==b&&t>b?(h.hasReachedTarget=!0,w.next(t-b)):(h.hasReachedTarget=!1,!e&&v(t),h)}}}));function bt(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let xt;function wt(){if(!xt)return;const t=xt.sort(Mt).map(Ot);t.forEach(St),t.forEach(St),xt=void 0}const Mt=(t,e)=>t.getDepth()-e.getDepth(),Ot=t=>t.animateUpdates(),St=t=>t.next(),Tt=["initial","animate"];function At(t={},e){var r;let s,o=e?e.getDepth()+1:0;const l={};for(const n of Tt)l[n]="string"==typeof t[n]?t[n]:null==e?void 0:e.getContext()[n];let c=rt(bt(null!==(r=t.initial)&&void 0!==r?r:l.initial,t.variants)||{},["transition"]);const u=Object.assign({},c);const h={update:e=>{s&&(t=e,function(t){xt?n(xt,t):(xt=[t],requestAnimationFrame(wt))}(h))},animateUpdates:function*(){var e,n;const a=c;c={};const r={};for(const a of Tt){const i=bt(t[a]);if(i)for(const a in i)"transition"!==a&&(c[a]=i[a],r[a]=L(null!==(n=null!==(e=i.transition)&&void 0!==e?e:t.transition)&&void 0!==n?n:{},a))}const o=new Set([...Object.keys(c),...Object.keys(a)]),l=[];o.forEach((t=>{var e,n,i;void 0===c[t]&&(c[t]=u[t]),n=a[t],i=c[t],typeof n==typeof i&&(Array.isArray(n)&&Array.isArray(i)?function(t,e){const n=e.length;if(n!==t.length)return!1;for(let a=0;a<n;a++)if(e[a]!==t[a])return!1;return!0}(n,i):n===i)||(null!==(e=u[t])&&void 0!==e||(u[t]=X(s,t)),l.push(I(s,t,c[t],r[t])))})),yield;const h=l.map((t=>t())).filter(Boolean);if(!h.length)return;const f=c;Promise.all(h.map((t=>t.finished))).then((()=>{var e;null===(e=t.onAnimationComplete)||void 0===e||e.call(t,f)})).catch(i)},getDepth:()=>o,getTarget:()=>c,getOptions:()=>t,getContext:()=>l,mount:t=>(st(Boolean(t),"Animation state must be mounted with valid Element"),s=t,()=>{!function(t){xt&&a(xt,t)}(h)})};return h}function Dt(t){const e={},n=[];for(let a in t){const i=t[a];m(a)&&(o[a]&&(a=o[a]),n.push(a),a=h(a));let r=Array.isArray(i)?i[0]:i;const s=u.get(a);s&&(r=w(i)?s.toDefaultUnit(i):i),e[a]=r}return n.length&&(e.transform=y(n)),e}const jt=t=>`-${t.toLowerCase()}`;function kt(t={}){const e=Dt(t);let n="";for(const t in e)n+=t.startsWith("--")?t:t.replace(/[A-Z]/g,jt),n+=`: ${e[t]}; `;return n}function Et(){console.log("test")}export{it as animate,I as animateStyle,At as createMotionState,kt as createStyleString,Dt as createStyles,vt as glide,gt as spring,nt as stagger,Et as test,ut as timeline};
+const t=new WeakMap;function e(e){return t.has(e)||t.set(e,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),t.get(e)}function n(t,e){-1===t.indexOf(e)&&t.push(e)}function i(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const a=()=>{},s=t=>t,r=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},c={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},l={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:c,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:s},skew:c},u=new Map,h=t=>`--motion-${t}`,f=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{r.forEach((e=>{f.push(t+e),u.set(h(t+e),l[t])}))}));const d=(t,e)=>f.indexOf(t)-f.indexOf(e),p=new Set(f),v=t=>p.has(t),m=t=>t.sort(d).reduce(g,"").trim(),g=(t,e)=>`${t} ${e}(var(${h(e)}))`,y=t=>t.startsWith("--"),b=new Set;const w=t=>1e3*t,x=t=>"number"==typeof t,M=t=>Array.isArray(t)&&!x(t[0]),O=t=>"object"==typeof t&&Boolean(t.createAnimation),E=t=>(t=>Array.isArray(t)&&x(t[0]))(t)?S(t):t,S=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,T=t=>document.createElement("div").animate(t,{duration:.001}),A={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{T({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(T({opacity:[0,1]}).finished)},j={},k={};for(const t in A)k[t]=()=>(void 0===j[t]&&(j[t]=A[t]()),j[t]);const D={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},P=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function $(t,e,n,i){if(t===e&&n===i)return s;const a=e=>function(t,e,n,i,a){let s,r,o=0;do{r=e+(n-e)/2,s=P(r,i,a)-t,s>0?n=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(e,0,1,t,n);return t=>0===t||1===t?t:P(a(t),e,i)}const R=(t,e="end")=>n=>{const i=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,a="end"===e?Math.floor(i):Math.ceil(i);return s=0,r=1,o=a/t,Math.min(Math.max(o,s),r);var s,r,o},V={ease:$(.25,.1,.25,1),"ease-in":$(.42,0,1,1),"ease-in-out":$(.42,0,.58,1),"ease-out":$(0,0,.58,1)},B=/\((.*?)\)/;function C(t){if("function"==typeof t)return t;if(Array.isArray(t))return $(...t);if(V[t])return V[t];if(t.startsWith("steps")){const e=B.exec(t);if(e){const t=e[1].split(",");return R(parseFloat(t[0]),t[1].trim())}}return s}const L=(t,e,n)=>-n*t+n*e+t,U=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function W(t,e){return M(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}function q(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=U(0,e,i);t.push(L(n,1,a))}}function F(t){const e=[0];return q(e,t-1),e}function I(t,e=F(t.length),n=s){const i=t.length,a=i-e.length;return a>0&&q(e,a),a=>{let s=0;for(;s<i-2&&!(a<e[s+1]);s++);let r=(o=U(e[s],e[s+1],a),Math.min(1,Math.max(o,0)));var o;return r=W(n,s)(r),L(t[s],t[s+1],r)}}class z{constructor(t,e=[0,1],{easing:n=D.easing,duration:i=D.duration,delay:a=D.delay,endDelay:s=D.endDelay,repeat:r=D.repeat,offset:o,direction:c="normal"}={}){this.startTime=0,this.rate=1,this.t=0,this.cancelTimestamp=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(r+1);O(n)&&(n="ease");const u=I(e,o,M(n)?n.map(C):C(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let r=(e-this.startTime)*this.rate;this.t=r,r/=1e3,r=Math.max(r-a,0),"finished"===this.playState&&(r=l);const o=r/i;let h=Math.floor(o),f=o%1;!f&&o>=1&&(f=1),1===f&&h--;const d=h%2;("reverse"===c||"alternate"===c&&d||"alternate-reverse"===c&&!d)&&(f=1-f);const p=u(r>=l?1:Math.min(f,1));t(p);"finished"===this.playState||r>=l+s?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,p)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){var t;this.playState="idle",this.tick(this.cancelTimestamp),null===(t=this.reject)||void 0===t||t.call(this,!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelTimestamp=performance.now()}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const G=t=>Array.isArray(t)?t:[t];function Z(t){return o[t]&&(t=o[t]),v(t)?h(t):t}const K={get:(t,e)=>{e=Z(e);let n=y(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=u.get(e);t&&(n=t.initialValue)}return n}};function N(t){if(t)try{"finished"!==t.playState&&t.commitStyles(),t.cancel()}catch(t){}}function X(t,i,s,r={}){let c,{duration:l=D.duration,delay:h=D.delay,endDelay:f=D.endDelay,repeat:d=D.repeat,easing:p=D.easing,direction:g,offset:S,allowWebkitAcceleration:T=!1}=r;const A=e(t);let j=k.waapi(),P=a;const $=v(i);$&&((t,i)=>{o[i]&&(i=o[i]);const{transforms:a}=e(t);n(a,i),t.style.transform=m(a)})(t,i);const R=Z(i),V=u.get(R);return N(A.animations[R]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=K.get(t,R))&&void 0!==e?e:null==V?void 0:V.initialValue)&&void 0!==n?n:0};let n=function(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}(G(s),e);if(O(p)){const t=p.createAnimation(n,e,$,R,A);p=t.easing,void 0!==t.keyframes&&(n=t.keyframes),void 0!==t.duration&&(l=t.duration)}if(y(R)?(P=((t,e)=>n=>t.style.setProperty(e,n))(t,R),k.cssRegisterProperty()?function(t){if(!b.has(t)){b.add(t);try{const{syntax:e,initialValue:n}=u.has(t)?u.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(R):j=!1):P=((t,e)=>n=>t.style[e]=n)(t,R),j){V&&(n=n.map((t=>x(t)?V.toDefaultUnit(t):t))),k.partialKeyframes()||1!==n.length||n.unshift(e());const i={delay:w(h),duration:w(l),endDelay:w(f),easing:M(p)?void 0:E(p),direction:g,iterations:d+1,fill:"both"};c=t.animate({[R]:n,offset:S,easing:M(p)?p.map(E):void 0},i),c.finished||(c.finished=new Promise(((t,e)=>{c.onfinish=t,c.oncancel=e})));const s=n[n.length-1];c.finished.then((()=>{P(s),c.cancel()})).catch(a),T||(c.playbackRate=1.000001)}else if($&&n.every(x)){if(1===n.length&&n.unshift(parseFloat(e())),V){const t=P;P=e=>t(V.toDefaultUnit(e))}c=new z(P,n,Object.assign(Object.assign({},r),{duration:l,easing:p}))}else{const t=n[n.length-1];P(V&&x(t)?V.toDefaultUnit(t):t)}return A.animations[R]=c,null==c||c.finished.then((()=>{A.animations[R]=void 0,A.generators[R]=void 0,A.prevGeneratorState[R]=void 0})).catch(a),c}}const Y=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function _(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t)}const H=t=>t(),J=(t,e)=>new Proxy({animations:t.map(H).filter(Boolean),duration:e},tt),Q=t=>t.animations[0],tt={get:(t,e)=>{var n,i;switch(e){case"duration":return t.duration;case"currentTime":let s=(null===(n=Q(t))||void 0===n?void 0:n[e])||0;return s?s/1e3:0;case"playbackRate":return null===(i=Q(t))||void 0===i?void 0:i[e];case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(et)).catch(a)),t.finished;case"stop":return()=>t.animations.forEach(N);default:return()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n=w(n);case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}},et=t=>t.finished;function nt(t=.1,{start:e=0,from:n=0,easing:i}={}){return(a,s)=>{const r=x(n)?n:function(t,e){if("first"===t)return 0;{const n=e-1;return"last"===t?n:n/2}}(n,s),o=Math.abs(r-a);let c=t*o;if(i){const t=s*a;c=C(i)(c/t)*t}return e+c}}function it(t,e,n){return"function"==typeof t?t(e,n):t}function at(t,e,n={}){var i;const a=(t=_(t)).length,s=[];for(let i=0;i<a;i++){const r=t[i];for(const t in e){const o=Y(n,t);o.delay=it(o.delay,i,a);const c=X(r,t,e[t],o);s.push(c)}}return J(s,null!==(i=n.duration)&&void 0!==i?i:D.duration)}function st(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(i=Object.getOwnPropertySymbols(t);a<i.length;a++)e.indexOf(i[a])<0&&Object.prototype.propertyIsEnumerable.call(t,i[a])&&(n[i[a]]=t[i[a]])}return n}var rt=function(){};function ot(t,e,n,i){var a;return x(e)?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(a=i.get(e))&&void 0!==a?a:t}function ct(t,e,n,a,s,r){!function(t,e,n){for(let a=0;a<t.length;a++){const s=t[a];s.at>e&&s.at<n&&(i(t,s),a--)}}(t,s,r);for(let i=0;i<e.length;i++)t.push({value:e[i],at:L(s,r,a[i]),easing:W(n,i)})}function lt(t,e){return t.at===e.at?null===t.value?1:-1:t.at-e.at}function ut(t,e={}){var n,i;const a=function(t,e={}){var{defaultOptions:n={}}=e,i=st(e,["defaultOptions"]);const a=[],s=new Map,r={},o=new Map;let c=0,l=0,u=0;for(let e=0;e<t.length;e++){const[i,a,h={}]=t[e];void 0!==h.at&&(l=ot(l,h.at,c,o));let f=0;const d=_(i,r),p=d.length;for(let t=0;t<p;t++){const e=ht(d[t],s);for(const i in a){const s=ft(i,e);let r=G(a[i]);const o=Y(h,i);let{duration:c=n.duration||D.duration,easing:d=n.easing||D.easing}=o;if(O(d)){const t=v(i);rt(2===r.length||!t,"spring must be provided 2 keyframes within timeline");const e=d.createAnimation(r,(()=>"0"),t);d=e.easing,void 0!==e.keyframes&&(r=e.keyframes),void 0!==e.duration&&(c=e.duration)}const m=it(h.delay,t,p)||0,g=l+m,y=g+c;let{offset:b=F(r.length)}=o;1===b.length&&0===b[0]&&(b[1]=1);const w=length-r.length;w>0&&q(b,w),1===r.length&&r.unshift(null),ct(s,r,d,b,g,y),f=Math.max(m+c,f),u=Math.max(y,u)}}c=l,l+=f}return s.forEach(((t,e)=>{for(const s in t){const r=t[s];r.sort(lt);const o=[],c=[],l=[];for(let t=0;t<r.length;t++){const{at:e,value:n,easing:i}=r[t];o.push(n),c.push(U(0,u,e)),l.push(i||D.easing)}0!==c[0]&&(c.unshift(0),o.unshift(o[0]),l.unshift("linear")),1!==c[c.length-1]&&(c.push(1),o.push(null)),a.push([e,s,o,Object.assign(Object.assign(Object.assign({},n),{duration:u,easing:l,offset:c}),i)])}})),a}(t,e),s=a.map((t=>X(...t))).filter(Boolean);return J(s,null!==(i=null===(n=a[0])||void 0===n?void 0:n[3].duration)&&void 0!==i?i:D.duration)}function ht(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function ft(t,e){return e[t]||(e[t]=[]),e[t]}"production"!==process.env.NODE_ENV&&(rt=function(t,e){if(!t)throw new Error(e)});const dt=({stiffness:t=100,damping:e=10,mass:n=1,from:i=0,to:a=1,velocity:s=0,restSpeed:r=2,restDistance:o=.5}={})=>{const c={done:!1,value:i,target:a,velocity:s=s?s/1e3:0,hasReachedTarget:!1},l=((t=100,e=10,n=1)=>e/(2*Math.sqrt(t*n)))(t,e,n),u=a-i,h=Math.sqrt(t/n)/1e3,f=((t,e)=>t*Math.sqrt(1-e*e))(h,l);let d;return d=l<1?t=>a-Math.exp(-l*h*t)*((l*h*u-s)/f*Math.sin(f*t)+u*Math.cos(f*t)):t=>a-Math.exp(-h*t)*(u+(s+h*u)*t),{next:t=>{c.value=d(t),c.velocity=0===t?s:pt(d,t,c.value);const e=Math.abs(c.velocity)<=r,n=Math.abs(a-c.value)<=o;var l,u,h;return c.done=e&&n,c.hasReachedTarget=(l=i,u=a,h=c.value,l<u&&h>=u||l>u&&h<=u),c}}};function pt(t,e,n){const i=Math.max(e-5,0);return a=n-t(i),(s=5)?a*(1e3/s):0;var a,s}function vt(t){const e=new WeakMap;return(n={})=>{const i=new Map,a=(e=0,a=100,s=0,r=!1)=>{const o=`${e}-${a}-${s}-${r}`;return i.has(o)||i.set(o,t(Object.assign({from:e,to:a,velocity:s,restSpeed:r?.05:2,restDistance:r?.01:.5},n))),i.get(o)},s=t=>(e.has(t)||e.set(t,function(t){let e,n=10,i=t.next(0);const a=[i.value];for(;!i.done&&n<1e4;)i=t.next(n),a.push(i.done?i.target:i.value),void 0===e&&i.hasReachedTarget&&(e=n),n+=10;const s=n-10;return 1===a.length&&a.push(i.value),{keyframes:a,duration:s/1e3,overshootDuration:(null!=e?e:s)/1e3}}(t)),e.get(t));return{createAnimation:(t,e,n,i,r)=>{let o,c;const l=t.length;if(n&&l<=2&&t.every(mt)){const n=i&&r&&r.prevGeneratorState[i],u=n&&(1===l||2===l&&null===t[0])?n.velocity:0,h=t[l-1],f=1===l?null:t[0],d=null===f?n?n.value:parseFloat(e()):f;c=a(d,h,u,null==i?void 0:i.includes("scale"));const p=s(c);o=Object.assign(Object.assign({},p),{easing:"linear"})}else{c=a(0,100);o={easing:"ease",duration:s(c).overshootDuration}}return c&&r&&i&&(r.generators[i]=c),o}}}}const mt=t=>"string"!=typeof t,gt=vt(dt),yt=vt((({from:t=0,velocity:e=0,power:n=.8,decay:i=.325,bounceDamping:a,bounceStiffness:s,changeTarget:r,min:o,max:c,restDistance:l=.5,restSpeed:u})=>{i=w(i);const h={value:t,target:t,velocity:e,hasReachedTarget:!1,done:!1},f=t=>void 0===o?c:void 0===c||Math.abs(o-t)<Math.abs(c-t)?o:c;let d=n*e;const p=t+d,v=void 0===r?p:r(p);h.target=v,v!==p&&(d=v-t);const m=t=>-d*Math.exp(-t/i),g=t=>v+m(t),y=t=>{const n=m(t),i=g(t);h.done=Math.abs(n)<=l,h.value=h.done?v:i,h.velocity=0===t?e:pt(g,t,h.value)};let b,x;const M=t=>{var e;(e=h.value,void 0!==o&&e<o||void 0!==c&&e>c)&&(b=t,x=dt({from:h.value,to:f(h.value),velocity:h.velocity,damping:a,stiffness:s,restDistance:l,restSpeed:u}))};return M(0),{next:t=>{let e=!1;return x||void 0!==b||(e=!0,y(t),M(t)),void 0!==b&&t>b?(h.hasReachedTarget=!0,x.next(t-b)):(h.hasReachedTarget=!1,!e&&y(t),h)}}}));function bt(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let wt;function xt(){if(!wt)return;const t=wt.sort(Ot).map(Et);t.forEach(St),t.forEach(St),wt=void 0}function Mt(t){wt?n(wt,t):(wt=[t],requestAnimationFrame(xt))}const Ot=(t,e)=>t.getDepth()-e.getDepth(),Et=t=>t.animateUpdates(),St=t=>t.next(),Tt=(t,e)=>new CustomEvent(t,{detail:{target:e}});function At(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEvent:n}}))}function jt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEntry:n}}))}const kt=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),At(t,e,i))},Dt={inView:{isActive:t=>Boolean(t.inView),subscribe:(t,{enable:e,disable:n})=>{let i=!1;if("undefined"!=typeof IntersectionObserver){const a=new IntersectionObserver((([a])=>{!i&&a.isIntersecting?(e(),jt(t,"viewenter",a)):i&&!a.isIntersecting&&(n(),jt(t,"viewleave",a)),i=a.isIntersecting}));return a.observe(t),()=>{a.unobserve(t),a.disconnect()}}return e(),()=>{}}},hover:{isActive:t=>Boolean(t.hover),subscribe:(t,{enable:e,disable:n})=>{const i=kt(t,"hoverstart",e),a=kt(t,"hoverend",n);return t.addEventListener("pointerenter",i),t.addEventListener("pointerleave",a),()=>{t.removeEventListener("pointerenter",i),t.removeEventListener("pointerleave",a)}}},press:{isActive:t=>Boolean(t.press),subscribe:(t,{enable:e,disable:n})=>{const i=e=>{n(),At(t,"pressend",e),window.removeEventListener("pointerup",i)},a=n=>{e(),At(t,"pressstart",n),window.addEventListener("pointerup",i)};return t.addEventListener("pointerdown",a),()=>{t.removeEventListener("pointerdown",a),window.removeEventListener("pointerup",i)}}}},Pt=["initial","animate",...Object.keys(Dt),"exit"],$t=new WeakMap;function Rt(t={},e){let n,s=e?e.getDepth()+1:0;const r={initial:!0,animate:!0},o={},c={};for(const n of Pt)c[n]="string"==typeof t[n]?t[n]:null==e?void 0:e.getContext()[n];const l=!1===t.initial?"animate":"initial";let u=st(bt(t[l]||c[l],t.variants)||{},["transition"]);const h=Object.assign({},u);const f=(t,e)=>()=>{r[t]=e,Mt(p)},d=()=>{for(const e in Dt){const i=Dt[e].isActive(t),a=o[e];i&&!a?o[e]=Dt[e].subscribe(n,{enable:f(e,!0),disable:f(e,!1)}):!i&&a&&(a(),delete o[e])}},p={update:e=>{n&&(t=e,d(),Mt(p))},setActive:(t,e)=>{n&&(r[t]=e,Mt(p))},animateUpdates:function*(){var e,i;const s=u;u={};const o={},c={},l={};for(const n of Pt){if(!r[n])continue;const a=bt(t[n]);if(a){o[n]=a;for(const s in a)"transition"!==s&&(u[s]=a[s],l[s]=Y(null!==(i=null!==(e=a.transition)&&void 0!==e?e:t.transition)&&void 0!==i?i:{},s),c[s]=n)}}const f=new Set([...Object.keys(u),...Object.keys(s)]),d=[];f.forEach((t=>{var e,i,a;void 0===u[t]&&(u[t]=h[t]),i=s[t],a=u[t],typeof i==typeof a&&(Array.isArray(i)&&Array.isArray(a)?function(t,e){const n=e.length;if(n!==t.length)return!1;for(let i=0;i<n;i++)if(e[i]!==t[i])return!1;return!0}(i,a):i===a)||(null!==(e=h[t])&&void 0!==e||(h[t]=K.get(n,t)),d.push(X(n,t,u[t],l[t])))})),yield;const p=d.map((t=>t())).filter(Boolean);if(!p.length)return;const v=u;n.dispatchEvent(Tt("motionstart",v)),Promise.all(p.map((t=>t.finished))).then((()=>{n.dispatchEvent(Tt("motioncomplete",v))})).catch(a)},getDepth:()=>s,getTarget:()=>u,getOptions:()=>t,getContext:()=>c,mount:t=>(rt(Boolean(t),"Animation state must be mounted with valid Element"),n=t,$t.set(n,p),d(),()=>{$t.delete(n),function(t){wt&&i(wt,t)}(p);for(const t in o)o[t]()}),isMounted:()=>Boolean(n)};return p}function Vt(t){const e={},n=[];for(let i in t){const a=t[i];v(i)&&(o[i]&&(i=o[i]),n.push(i),i=h(i));let s=Array.isArray(a)?a[0]:a;const r=u.get(i);r&&(s=x(a)?r.toDefaultUnit(a):a),e[i]=s}return n.length&&(e.transform=m(n)),e}const Bt=t=>`-${t.toLowerCase()}`;function Ct(t={}){const e=Vt(t);let n="";for(const t in e)n+=t.startsWith("--")?t:t.replace(/[A-Z]/g,Bt),n+=`: ${e[t]}; `;return n}function Lt(){console.log("test")}export{at as animate,X as animateStyle,Rt as createMotionState,Ct as createStyleString,Vt as createStyles,e as getAnimationData,Z as getStyleName,yt as glide,$t as mountedStates,gt as spring,nt as stagger,K as style,Lt as test,ut as timeline};

package/dist/vue.cjs.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('@motionone/vue');
+
+
+
+Object.keys(vue).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return vue[k]; }
+	});
+});

package/dist/vue.es.js

@@ -0,0 +1 @@
+export * from '@motionone/vue';

package/package.json

@@ -1,20 +1,30 @@
 {
   "name": "motion",
-  "description": "A tiny, performant animation library for the DOM, Vue and Svelte",
-  "version": "10.5.0-alpha.2",
+  "description": "A tiny, performant animation library for the web",
+  "version": "10.5.0-beta.0",
+  "license": "MIT",
   "author": "Matt Perry",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "types/index.d.ts",
+  "keywords": [
+    "animation",
+    "motion",
+    "spring",
+    "tween",
+    "timeline",
+    "dom",
+    "vue"
+  ],
   "sideEffects": false,
   "scripts": {
     "build": "rm -rf lib dist types && tsc -p . && rollup -c"
   },
   "dependencies": {
-    "@motionone/dom": "^10.5.0-alpha.2",
-    "@motionone/react": "^10.5.0-alpha.2",
-    "@motionone/svelte": "^10.5.0-alpha.2",
-    "@motionone/vue": "^10.5.0-alpha.2"
+    "@motionone/dom": "^10.5.0-beta.0",
+    "@motionone/react": "^10.5.0-beta.0",
+    "@motionone/svelte": "^10.5.0-beta.0",
+    "@motionone/vue": "^10.5.0-beta.0"
   },
-  "gitHead": "46d57e4886dadbbc26c36f278ff09b2271b890b3"
+  "gitHead": "96e3017ce1d664f6cb03a62c9f215347218fd918"
 }

package/vue/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "main": "../dist/vue.cjs.js",
+  "module": "../dist/vue.es.js",
+  "types": "../types/vue.d.ts"
+}