motion - npm Package Compare versions

Comparing version 6.0.1-alpha.30 to 6.0.1-alpha.31

dist/es/targets/dom/animate-style.js

@@ -110,2 +110,5 @@ import { getAnimationData } from './data.js';
     else if (valueIsTransform && keyframes.every(isNumber)) {
+        if (keyframes.length === 1) {
+            keyframes.unshift(parseFloat(getComputedStyle(element).getPropertyValue(name) || "0"));
+        }
         if (definition) {
@@ -112,0 +115,0 @@ const applyStyle = render;

dist/motion.cjs.js

@@ -495,2 +495,5 @@ 'use strict';
     else if (valueIsTransform && keyframes.every(isNumber)) {
+        if (keyframes.length === 1) {
+            keyframes.unshift(parseFloat(getComputedStyle(element).getPropertyValue(name) || "0"));
+        }
         if (definition) {
@@ -497,0 +500,0 @@ const applyStyle = render;

dist/motion.min.js

@@ -1,1 +0,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";function e(t){t.commitStyles();try{t.cancel()}catch(t){}}const n=new WeakMap;function i(t){return n.has(t)||n.set(t,{activeTransforms:[],activeAnimations:{}}),n.get(t)}const a=()=>{},r=t=>t,s=["","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:r},skew:c},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),l[t])}))}));const m=(t,e)=>f.indexOf(t)-f.indexOf(e),y=new Set(f),p=t=>t.sort(m).reduce(d,"").trim(),d=(t,e)=>`${t} ${e}(var(${h(e)}))`,g=t=>t.startsWith("--"),v=new Set;const b=t=>1e3*t,T=t=>Array.isArray(t)&&"number"!=typeof t[0],w=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?x(t):t,x=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,S=t=>document.createElement("div").animate(t,{duration:.001}),O={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{S({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(S({opacity:[0,1]}).finished)},A={},M=Object.keys(O).reduce(((t,e)=>(t[e]=()=>(void 0===A[e]&&(A[e]=O[e]()),A[e]),t)),{}),P=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function j(t,e,n,i){if(t===e&&n===i)return r;const a=e=>function(t,e,n,i,a){let r,s,o=0;do{s=e+(n-e)/2,r=P(s,i,a)-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(a(t),e,i)}var k=function(t,e,n){var i=e-t;return 0===i?1:(n-t)/i},D=function(t,e,n){return-n*t+n*e+t},E=function(t,e){return void 0===e&&(e="end"),function(n){var i,a,r,s=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(s):Math.ceil(s);return i=0,a=1,r=o/t,Math.min(Math.max(r,i),a)}};const $={ease:j(.25,.1,.25,1),"ease-in":j(.42,0,1,1),"ease-in-out":j(.42,0,.58,1),"ease-out":j(0,0,.58,1)},R=/\((.*?)\)/;function U(t){if("function"==typeof t)return t;if(Array.isArray(t))return j(...t);if($[t])return $[t];if(t.startsWith("steps")){const e=R.exec(t);if(e){const t=e[1].split(",");return E(parseFloat(t[0]),t[1].trim())}}return r}function V(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=k(0,e,i);t.push(D(n,1,a))}}function C(t,e=function(t){const e=[0];return V(e,t-1),e}(t.length),n=r){const i=t.length,a=i-e.length;return a>0&&V(e,a),a=>{let r=0;for(;r<i-2&&!(a<e[r+1]);r++);let s=(o=k(e[r],e[r+1],a),Math.min(1,Math.max(o,0)));var o,c,l,u;if(Array.isArray(n)){const t=(c=0,l=n.length-1,((r-c)%(u=l-c)+u)%u+c);s=n[t](s)}else s=n(s);return D(t[r],t[r+1],s)}}class q{constructor(t,e,{easing:n="ease",duration:i=.3,delay:a=0,endDelay:r=0,offset:s,repeat:o=0,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(o+1),u=C(e,s,T(n)?n.map(U):U(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}let n=this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-a,0);const s=n/i;let o=Math.floor(s),h=s%1;!h&&s>=1&&(h=1),1===h&&o--;const f=o%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(h=1-h);const m=n>=l?1:Math.min(h,1),y=u(m);t(y);n>=l+r?(this.playState="finished",this.resolve(y)):"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(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.currentTime}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=b(t):this.startTime=performance.now()-b(t)/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}function z(t,n,r,s={}){let{duration:c=.3,delay:l=0,endDelay:f=0,repeat:m=0,easing:d="ease",direction:x,offset:S}=s;const O=i(t);let A=M.waapi(),P=a;const j=(t=>y.has(t))(n);r=Array.isArray(r)?r:[r],j&&(o[n]&&(n=o[n]),((t,e)=>{const{activeTransforms:n}=i(t);var a,r;r=e,-1===(a=n).indexOf(r)&&a.push(r),t.style.transform=p(n)})(t,n),n=h(n)),function(t,n){t.activeAnimations[n]&&(e(t.activeAnimations[n]),t.activeAnimations[n]=void 0)}(O,n);const k=u.get(n);if(g(n)?(P=((t,e)=>n=>t.style.setProperty(e,n))(t,n),M.cssRegisterProperty()?function(t){if(!v.has(t)){v.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){}}}(n):A=!1):P=((t,e)=>n=>t.style[e]=n)(t,n),A){if(k&&(r=r.map((t=>"number"==typeof t?k.toDefaultUnit(t):t))),!M.partialKeyframes()&&1===r.length){const e=g(n)?t.style.getPropertyValue(n):getComputedStyle(t)[n];r.unshift(e)}const e={delay:b(l),duration:b(c),endDelay:b(f),easing:T(d)?void 0:w(d),direction:x,iterations:m+1},i=t.animate({[n]:r,offset:S,easing:T(d)?d.map(w):void 0},e);O.activeAnimations[n]=i,i.finished||(i.finished=new Promise(((t,e)=>{i.onfinish=t,i.oncancel=e})));const s=r[r.length-1];return i.finished.then((()=>P(s))).catch(a),i}if(j&&r.every(F)){if(k){const t=P;P=e=>t(k.toDefaultUnit(e))}return function(t,e=[0,1],n={}){return new q(t,e,n)}(P,r,s)}{const t=r[r.length-1];P(k&&"number"==typeof t?k.toDefaultUnit(t):t)}}const F=t=>"number"==typeof t,W=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):t;const K={get:(t,n)=>{var i,a;switch(n){case"finished":return t.finished;case"currentTime":const r=(null===(i=t.animations[0])||void 0===i?void 0:i[n])||0;return r?r/1e3:0;case"playbackRate":return null===(a=t.animations[0])||void 0===a?void 0:a[n];case"stop":return()=>t.animations.forEach(e);default:return()=>t.animations.forEach((t=>t[n]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n*=1e3;case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}};t.animate=function(t,e,n){var{stagger:i=0}=n,a=function(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}(n,["stagger"]);t=function(t){"string"==typeof t?t=document.querySelectorAll(t):t instanceof Element&&(t=[t]);return Array.from(t)}(t);const r=[];for(let n=0;n<t.length;n++){const s=t[n];for(const t in e){const o=W(a,t);i&&(o.delay||(o.delay=0),o.delay+=i*n);const c=z(s,t,e[t],o);c&&r.push(c)}}const s={animations:r,finished:Promise.all(r.map((t=>t.finished)))};return new Proxy(s,K)},t.animateStyle=z,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";function e(t){t.commitStyles();try{t.cancel()}catch(t){}}const n=new WeakMap;function i(t){return n.has(t)||n.set(t,{activeTransforms:[],activeAnimations:{}}),n.get(t)}const a=()=>{},r=t=>t,s=["","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:r},skew:c},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),l[t])}))}));const m=(t,e)=>f.indexOf(t)-f.indexOf(e),y=new Set(f),p=t=>t.sort(m).reduce(d,"").trim(),d=(t,e)=>`${t} ${e}(var(${h(e)}))`,g=t=>t.startsWith("--"),v=new Set;const b=t=>1e3*t,T=t=>Array.isArray(t)&&"number"!=typeof t[0],S=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?w(t):t,w=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,x=t=>document.createElement("div").animate(t,{duration:.001}),O={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{x({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(x({opacity:[0,1]}).finished)},A={},P=Object.keys(O).reduce(((t,e)=>(t[e]=()=>(void 0===A[e]&&(A[e]=O[e]()),A[e]),t)),{}),M=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function j(t,e,n,i){if(t===e&&n===i)return r;const a=e=>function(t,e,n,i,a){let r,s,o=0;do{s=e+(n-e)/2,r=M(s,i,a)-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:M(a(t),e,i)}var k=function(t,e,n){var i=e-t;return 0===i?1:(n-t)/i},D=function(t,e,n){return-n*t+n*e+t},E=function(t,e){return void 0===e&&(e="end"),function(n){var i,a,r,s=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(s):Math.ceil(s);return i=0,a=1,r=o/t,Math.min(Math.max(r,i),a)}};const $={ease:j(.25,.1,.25,1),"ease-in":j(.42,0,1,1),"ease-in-out":j(.42,0,.58,1),"ease-out":j(0,0,.58,1)},V=/\((.*?)\)/;function R(t){if("function"==typeof t)return t;if(Array.isArray(t))return j(...t);if($[t])return $[t];if(t.startsWith("steps")){const e=V.exec(t);if(e){const t=e[1].split(",");return E(parseFloat(t[0]),t[1].trim())}}return r}function U(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=k(0,e,i);t.push(D(n,1,a))}}function C(t,e=function(t){const e=[0];return U(e,t-1),e}(t.length),n=r){const i=t.length,a=i-e.length;return a>0&&U(e,a),a=>{let r=0;for(;r<i-2&&!(a<e[r+1]);r++);let s=(o=k(e[r],e[r+1],a),Math.min(1,Math.max(o,0)));var o,c,l,u;if(Array.isArray(n)){const t=(c=0,l=n.length-1,((r-c)%(u=l-c)+u)%u+c);s=n[t](s)}else s=n(s);return D(t[r],t[r+1],s)}}class F{constructor(t,e,{easing:n="ease",duration:i=.3,delay:a=0,endDelay:r=0,offset:s,repeat:o=0,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(o+1),u=C(e,s,T(n)?n.map(R):R(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}let n=this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-a,0);const s=n/i;let o=Math.floor(s),h=s%1;!h&&s>=1&&(h=1),1===h&&o--;const f=o%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(h=1-h);const m=n>=l?1:Math.min(h,1),y=u(m);t(y);n>=l+r?(this.playState="finished",this.resolve(y)):"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(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.currentTime}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=b(t):this.startTime=performance.now()-b(t)/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}function q(t,n,r,s={}){let{duration:c=.3,delay:l=0,endDelay:f=0,repeat:m=0,easing:d="ease",direction:w,offset:x}=s;const O=i(t);let A=P.waapi(),M=a;const j=(t=>y.has(t))(n);r=Array.isArray(r)?r:[r],j&&(o[n]&&(n=o[n]),((t,e)=>{const{activeTransforms:n}=i(t);var a,r;r=e,-1===(a=n).indexOf(r)&&a.push(r),t.style.transform=p(n)})(t,n),n=h(n)),function(t,n){t.activeAnimations[n]&&(e(t.activeAnimations[n]),t.activeAnimations[n]=void 0)}(O,n);const k=u.get(n);if(g(n)?(M=((t,e)=>n=>t.style.setProperty(e,n))(t,n),P.cssRegisterProperty()?function(t){if(!v.has(t)){v.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){}}}(n):A=!1):M=((t,e)=>n=>t.style[e]=n)(t,n),A){if(k&&(r=r.map((t=>"number"==typeof t?k.toDefaultUnit(t):t))),!P.partialKeyframes()&&1===r.length){const e=g(n)?t.style.getPropertyValue(n):getComputedStyle(t)[n];r.unshift(e)}const e={delay:b(l),duration:b(c),endDelay:b(f),easing:T(d)?void 0:S(d),direction:w,iterations:m+1},i=t.animate({[n]:r,offset:x,easing:T(d)?d.map(S):void 0},e);O.activeAnimations[n]=i,i.finished||(i.finished=new Promise(((t,e)=>{i.onfinish=t,i.oncancel=e})));const s=r[r.length-1];return i.finished.then((()=>M(s))).catch(a),i}if(j&&r.every(z)){if(1===r.length&&r.unshift(parseFloat(getComputedStyle(t).getPropertyValue(n)||"0")),k){const t=M;M=e=>t(k.toDefaultUnit(e))}return function(t,e=[0,1],n={}){return new F(t,e,n)}(M,r,s)}{const t=r[r.length-1];M(k&&"number"==typeof t?k.toDefaultUnit(t):t)}}const z=t=>"number"==typeof t,W=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):t;const K={get:(t,n)=>{var i,a;switch(n){case"finished":return t.finished;case"currentTime":const r=(null===(i=t.animations[0])||void 0===i?void 0:i[n])||0;return r?r/1e3:0;case"playbackRate":return null===(a=t.animations[0])||void 0===a?void 0:a[n];case"stop":return()=>t.animations.forEach(e);default:return()=>t.animations.forEach((t=>t[n]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n*=1e3;case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}};t.animate=function(t,e,n){var{stagger:i=0}=n,a=function(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}(n,["stagger"]);t=function(t){"string"==typeof t?t=document.querySelectorAll(t):t instanceof Element&&(t=[t]);return Array.from(t)}(t);const r=[];for(let n=0;n<t.length;n++){const s=t[n];for(const t in e){const o=W(a,t);i&&(o.delay||(o.delay=0),o.delay+=i*n);const c=q(s,t,e[t],o);c&&r.push(c)}}const s={animations:r,finished:Promise.all(r.map((t=>t.finished)))};return new Proxy(s,K)},t.animateStyle=q,Object.defineProperty(t,"__esModule",{value:!0})}));

dist/motion.umd.js

@@ -550,2 +550,5 @@ (function (global, factory) {
         else if (valueIsTransform && keyframes.every(isNumber)) {
+            if (keyframes.length === 1) {
+                keyframes.unshift(parseFloat(getComputedStyle(element).getPropertyValue(name) || "0"));
+            }
             if (definition) {
@@ -552,0 +555,0 @@ const applyStyle = render;

dist/size-animate-dom.js

@@ -1,1 +0,1 @@
-function t(t){t.commitStyles();try{t.cancel()}catch(t){}}const e=new WeakMap;function n(t){return e.has(t)||e.set(t,{activeTransforms:[],activeAnimations:{}}),e.get(t)}const i=()=>{},a=t=>t,r=["","X","Y","Z"],s={x:"translateX",y:"translateY",z:"translateZ"},o={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},c={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:o,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:a},skew:o},l=new Map,u=t=>`--motion-${t}`,h=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{r.forEach((e=>{h.push(t+e),l.set(u(t+e),c[t])}))}));const f=(t,e)=>h.indexOf(t)-h.indexOf(e),m=new Set(h),y=t=>t.sort(f).reduce(p,"").trim(),p=(t,e)=>`${t} ${e}(var(${u(e)}))`,d=t=>t.startsWith("--"),g=new Set;const v=t=>1e3*t,T=t=>Array.isArray(t)&&"number"!=typeof t[0],b=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?w(t):t,w=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,S=t=>document.createElement("div").animate(t,{duration:.001}),x={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{S({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(S({opacity:[0,1]}).finished)},A={},O=Object.keys(x).reduce(((t,e)=>(t[e]=()=>(void 0===A[e]&&(A[e]=x[e]()),A[e]),t)),{}),P=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function M(t,e,n,i){if(t===e&&n===i)return a;const r=e=>function(t,e,n,i,a){let r,s,o=0;do{s=e+(n-e)/2,r=P(s,i,a)-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(r(t),e,i)}var k=function(t,e,n){var i=e-t;return 0===i?1:(n-t)/i},j=function(t,e,n){return-n*t+n*e+t},D=function(t,e){return void 0===e&&(e="end"),function(n){var i,a,r,s=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(s):Math.ceil(s);return i=0,a=1,r=o/t,Math.min(Math.max(r,i),a)}};const E={ease:M(.25,.1,.25,1),"ease-in":M(.42,0,1,1),"ease-in-out":M(.42,0,.58,1),"ease-out":M(0,0,.58,1)},$=/\((.*?)\)/;function R(t){if("function"==typeof t)return t;if(Array.isArray(t))return M(...t);if(E[t])return E[t];if(t.startsWith("steps")){const e=$.exec(t);if(e){const t=e[1].split(",");return D(parseFloat(t[0]),t[1].trim())}}return a}function U(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=k(0,e,i);t.push(j(n,1,a))}}function V(t,e=function(t){const e=[0];return U(e,t-1),e}(t.length),n=a){const i=t.length,r=i-e.length;return r>0&&U(e,r),a=>{let r=0;for(;r<i-2&&!(a<e[r+1]);r++);let s=(o=k(e[r],e[r+1],a),Math.min(1,Math.max(o,0)));var o,c,l,u;if(Array.isArray(n)){const t=(c=0,l=n.length-1,((r-c)%(u=l-c)+u)%u+c);s=n[t](s)}else s=n(s);return j(t[r],t[r+1],s)}}class C{constructor(t,e,{easing:n="ease",duration:i=.3,delay:a=0,endDelay:r=0,offset:s,repeat:o=0,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(o+1),u=V(e,s,T(n)?n.map(R):R(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}let n=this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-a,0);const s=n/i;let o=Math.floor(s),h=s%1;!h&&s>=1&&(h=1),1===h&&o--;const f=o%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(h=1-h);const m=n>=l?1:Math.min(h,1),y=u(m);t(y);n>=l+r?(this.playState="finished",this.resolve(y)):"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(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.currentTime}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=v(t):this.startTime=performance.now()-v(t)/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}function q(e,a,r,o={}){let{duration:c=.3,delay:h=0,endDelay:f=0,repeat:p=0,easing:w="ease",direction:S,offset:x}=o;const A=n(e);let P=O.waapi(),M=i;const k=(t=>m.has(t))(a);r=Array.isArray(r)?r:[r],k&&(s[a]&&(a=s[a]),((t,e)=>{const{activeTransforms:i}=n(t);var a,r;r=e,-1===(a=i).indexOf(r)&&a.push(r),t.style.transform=y(i)})(e,a),a=u(a)),function(e,n){e.activeAnimations[n]&&(t(e.activeAnimations[n]),e.activeAnimations[n]=void 0)}(A,a);const j=l.get(a);if(d(a)?(M=((t,e)=>n=>t.style.setProperty(e,n))(e,a),O.cssRegisterProperty()?function(t){if(!g.has(t)){g.add(t);try{const{syntax:e,initialValue:n}=l.has(t)?l.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(a):P=!1):M=((t,e)=>n=>t.style[e]=n)(e,a),P){if(j&&(r=r.map((t=>"number"==typeof t?j.toDefaultUnit(t):t))),!O.partialKeyframes()&&1===r.length){const t=d(a)?e.style.getPropertyValue(a):getComputedStyle(e)[a];r.unshift(t)}const t={delay:v(h),duration:v(c),endDelay:v(f),easing:T(w)?void 0:b(w),direction:S,iterations:p+1},n=e.animate({[a]:r,offset:x,easing:T(w)?w.map(b):void 0},t);A.activeAnimations[a]=n,n.finished||(n.finished=new Promise(((t,e)=>{n.onfinish=t,n.oncancel=e})));const s=r[r.length-1];return n.finished.then((()=>M(s))).catch(i),n}if(k&&r.every(z)){if(j){const t=M;M=e=>t(j.toDefaultUnit(e))}return function(t,e=[0,1],n={}){return new C(t,e,n)}(M,r,o)}{const t=r[r.length-1];M(j&&"number"==typeof t?j.toDefaultUnit(t):t)}}const z=t=>"number"==typeof t,F=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):t;function W(t,e,n){var{stagger:i=0}=n,a=function(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}(n,["stagger"]);t=function(t){"string"==typeof t?t=document.querySelectorAll(t):t instanceof Element&&(t=[t]);return Array.from(t)}(t);const r=[];for(let n=0;n<t.length;n++){const s=t[n];for(const t in e){const o=F(a,t);i&&(o.delay||(o.delay=0),o.delay+=i*n);const c=q(s,t,e[t],o);c&&r.push(c)}}const s={animations:r,finished:Promise.all(r.map((t=>t.finished)))};return new Proxy(s,K)}const K={get:(e,n)=>{var i,a;switch(n){case"finished":return e.finished;case"currentTime":const r=(null===(i=e.animations[0])||void 0===i?void 0:i[n])||0;return r?r/1e3:0;case"playbackRate":return null===(a=e.animations[0])||void 0===a?void 0:a[n];case"stop":return()=>e.animations.forEach(t);default:return()=>e.animations.forEach((t=>t[n]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n*=1e3;case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}};export{W as animate};
+function t(t){t.commitStyles();try{t.cancel()}catch(t){}}const e=new WeakMap;function n(t){return e.has(t)||e.set(t,{activeTransforms:[],activeAnimations:{}}),e.get(t)}const i=()=>{},a=t=>t,r=["","X","Y","Z"],s={x:"translateX",y:"translateY",z:"translateZ"},o={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},c={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:o,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:a},skew:o},l=new Map,u=t=>`--motion-${t}`,h=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{r.forEach((e=>{h.push(t+e),l.set(u(t+e),c[t])}))}));const f=(t,e)=>h.indexOf(t)-h.indexOf(e),m=new Set(h),y=t=>t.sort(f).reduce(p,"").trim(),p=(t,e)=>`${t} ${e}(var(${u(e)}))`,d=t=>t.startsWith("--"),g=new Set;const v=t=>1e3*t,T=t=>Array.isArray(t)&&"number"!=typeof t[0],b=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?w(t):t,w=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,S=t=>document.createElement("div").animate(t,{duration:.001}),x={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{S({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(S({opacity:[0,1]}).finished)},A={},O=Object.keys(x).reduce(((t,e)=>(t[e]=()=>(void 0===A[e]&&(A[e]=x[e]()),A[e]),t)),{}),P=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function M(t,e,n,i){if(t===e&&n===i)return a;const r=e=>function(t,e,n,i,a){let r,s,o=0;do{s=e+(n-e)/2,r=P(s,i,a)-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(r(t),e,i)}var k=function(t,e,n){var i=e-t;return 0===i?1:(n-t)/i},j=function(t,e,n){return-n*t+n*e+t},D=function(t,e){return void 0===e&&(e="end"),function(n){var i,a,r,s=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(s):Math.ceil(s);return i=0,a=1,r=o/t,Math.min(Math.max(r,i),a)}};const E={ease:M(.25,.1,.25,1),"ease-in":M(.42,0,1,1),"ease-in-out":M(.42,0,.58,1),"ease-out":M(0,0,.58,1)},$=/\((.*?)\)/;function V(t){if("function"==typeof t)return t;if(Array.isArray(t))return M(...t);if(E[t])return E[t];if(t.startsWith("steps")){const e=$.exec(t);if(e){const t=e[1].split(",");return D(parseFloat(t[0]),t[1].trim())}}return a}function R(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=k(0,e,i);t.push(j(n,1,a))}}function U(t,e=function(t){const e=[0];return R(e,t-1),e}(t.length),n=a){const i=t.length,r=i-e.length;return r>0&&R(e,r),a=>{let r=0;for(;r<i-2&&!(a<e[r+1]);r++);let s=(o=k(e[r],e[r+1],a),Math.min(1,Math.max(o,0)));var o,c,l,u;if(Array.isArray(n)){const t=(c=0,l=n.length-1,((r-c)%(u=l-c)+u)%u+c);s=n[t](s)}else s=n(s);return j(t[r],t[r+1],s)}}class C{constructor(t,e,{easing:n="ease",duration:i=.3,delay:a=0,endDelay:r=0,offset:s,repeat:o=0,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(o+1),u=U(e,s,T(n)?n.map(V):V(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}let n=this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-a,0);const s=n/i;let o=Math.floor(s),h=s%1;!h&&s>=1&&(h=1),1===h&&o--;const f=o%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(h=1-h);const m=n>=l?1:Math.min(h,1),y=u(m);t(y);n>=l+r?(this.playState="finished",this.resolve(y)):"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(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.currentTime}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=v(t):this.startTime=performance.now()-v(t)/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}function F(e,a,r,o={}){let{duration:c=.3,delay:h=0,endDelay:f=0,repeat:p=0,easing:w="ease",direction:S,offset:x}=o;const A=n(e);let P=O.waapi(),M=i;const k=(t=>m.has(t))(a);r=Array.isArray(r)?r:[r],k&&(s[a]&&(a=s[a]),((t,e)=>{const{activeTransforms:i}=n(t);var a,r;r=e,-1===(a=i).indexOf(r)&&a.push(r),t.style.transform=y(i)})(e,a),a=u(a)),function(e,n){e.activeAnimations[n]&&(t(e.activeAnimations[n]),e.activeAnimations[n]=void 0)}(A,a);const j=l.get(a);if(d(a)?(M=((t,e)=>n=>t.style.setProperty(e,n))(e,a),O.cssRegisterProperty()?function(t){if(!g.has(t)){g.add(t);try{const{syntax:e,initialValue:n}=l.has(t)?l.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(a):P=!1):M=((t,e)=>n=>t.style[e]=n)(e,a),P){if(j&&(r=r.map((t=>"number"==typeof t?j.toDefaultUnit(t):t))),!O.partialKeyframes()&&1===r.length){const t=d(a)?e.style.getPropertyValue(a):getComputedStyle(e)[a];r.unshift(t)}const t={delay:v(h),duration:v(c),endDelay:v(f),easing:T(w)?void 0:b(w),direction:S,iterations:p+1},n=e.animate({[a]:r,offset:x,easing:T(w)?w.map(b):void 0},t);A.activeAnimations[a]=n,n.finished||(n.finished=new Promise(((t,e)=>{n.onfinish=t,n.oncancel=e})));const s=r[r.length-1];return n.finished.then((()=>M(s))).catch(i),n}if(k&&r.every(q)){if(1===r.length&&r.unshift(parseFloat(getComputedStyle(e).getPropertyValue(a)||"0")),j){const t=M;M=e=>t(j.toDefaultUnit(e))}return function(t,e=[0,1],n={}){return new C(t,e,n)}(M,r,o)}{const t=r[r.length-1];M(j&&"number"==typeof t?j.toDefaultUnit(t):t)}}const q=t=>"number"==typeof t,z=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):t;function W(t,e,n){var{stagger:i=0}=n,a=function(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}(n,["stagger"]);t=function(t){"string"==typeof t?t=document.querySelectorAll(t):t instanceof Element&&(t=[t]);return Array.from(t)}(t);const r=[];for(let n=0;n<t.length;n++){const s=t[n];for(const t in e){const o=z(a,t);i&&(o.delay||(o.delay=0),o.delay+=i*n);const c=F(s,t,e[t],o);c&&r.push(c)}}const s={animations:r,finished:Promise.all(r.map((t=>t.finished)))};return new Proxy(s,K)}const K={get:(e,n)=>{var i,a;switch(n){case"finished":return e.finished;case"currentTime":const r=(null===(i=e.animations[0])||void 0===i?void 0:i[n])||0;return r?r/1e3:0;case"playbackRate":return null===(a=e.animations[0])||void 0===a?void 0:a[n];case"stop":return()=>e.animations.forEach(t);default:return()=>e.animations.forEach((t=>t[n]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n*=1e3;case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}};export{W as animate};

dist/size-react.js

@@ -1,1 +0,1 @@
-import*as t from"react";import{useRef as e,useEffect as n,useState as r,createContext as i,useContext as s,forwardRef as o,createElement as a,useMemo as c}from"react";const l=new WeakMap;function u(t){return l.has(t)||l.set(t,{activeTransforms:[],activeAnimations:{}}),l.get(t)}const f=()=>{},h=t=>t,p=["","X","Y","Z"],y={x:"translateX",y:"translateY",z:"translateZ"},m={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},d={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:m,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:h},skew:m},v=new Map,g=t=>`--motion-${t}`,w=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{p.forEach((e=>{w.push(t+e),v.set(g(t+e),d[t])}))}));const b=(t,e)=>w.indexOf(t)-w.indexOf(e),O=new Set(w),x=t=>O.has(t),S=t=>t.sort(b).reduce(A,"").trim(),A=(t,e)=>`${t} ${e}(var(${g(e)}))`,P=t=>t.startsWith("--"),T=new Set;const j=t=>1e3*t;const M=t=>Array.isArray(t)&&"number"!=typeof t[0],k=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?V(t):t,V=([t,e,n,r])=>`cubic-bezier(${t}, ${e}, ${n}, ${r})`,E=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{E({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(E({opacity:[0,1]}).finished)},$={},C=Object.keys(D).reduce(((t,e)=>(t[e]=()=>(void 0===$[e]&&($[e]=D[e]()),$[e]),t)),{}),U=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function I(t,e,n,r){if(t===e&&n===r)return h;const i=e=>function(t,e,n,r,i){let s,o,a=0;do{o=e+(n-e)/2,s=U(o,r,i)-t,s>0?n=o:e=o}while(Math.abs(s)>1e-7&&++a<12);return o}(e,0,1,t,n);return t=>0===t||1===t?t:U(i(t),e,r)}var L=function(t,e,n){var r=e-t;return 0===r?1:(n-t)/r},R=function(t,e,n){return-n*t+n*e+t},z=function(t,e){return void 0===e&&(e="end"),function(n){var r,i,s,o=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,a="end"===e?Math.floor(o):Math.ceil(o);return r=0,i=1,s=a/t,Math.min(Math.max(s,r),i)}};const F={ease:I(.25,.1,.25,1),"ease-in":I(.42,0,1,1),"ease-in-out":I(.42,0,.58,1),"ease-out":I(0,0,.58,1)},W=/\((.*?)\)/;function q(t){if("function"==typeof t)return t;if(Array.isArray(t))return I(...t);if(F[t])return F[t];if(t.startsWith("steps")){const e=W.exec(t);if(e){const t=e[1].split(",");return z(parseFloat(t[0]),t[1].trim())}}return h}function B(t,e){const n=t[t.length-1];for(let r=1;r<=e;r++){const i=L(0,e,r);t.push(R(n,1,i))}}function K(t,e=function(t){const e=[0];return B(e,t-1),e}(t.length),n=h){const r=t.length,i=r-e.length;return i>0&&B(e,i),i=>{let s=0;for(;s<r-2&&!(i<e[s+1]);s++);let o=(a=L(e[s],e[s+1],i),Math.min(1,Math.max(a,0)));var a,c,l,u;if(Array.isArray(n)){const t=(c=0,l=n.length-1,((s-c)%(u=l-c)+u)%u+c);o=n[t](o)}else o=n(o);return R(t[s],t[s+1],o)}}class X{constructor(t,e,{easing:n="ease",duration:r=.3,delay:i=0,endDelay:s=0,offset:o,repeat:a=0,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=r*(a+1),u=K(e,o,M(n)?n.map(q):q(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}let n=this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-i,0);const o=n/r;let a=Math.floor(o),f=o%1;!f&&o>=1&&(f=1),1===f&&a--;const h=a%2;("reverse"===c||"alternate"===c&&h||"alternate-reverse"===c&&!h)&&(f=1-f);const p=n>=l?1:Math.min(f,1),y=u(p);t(y);n>=l+s?(this.playState="finished",this.resolve(y)):"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(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.currentTime}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=j(t):this.startTime=performance.now()-j(t)/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}function Y(t,e,n,r={}){let{duration:i=.3,delay:s=0,endDelay:o=0,repeat:a=0,easing:c="ease",direction:l,offset:h}=r;const p=u(t);let m=C.waapi(),d=f;const w=x(e);n=Array.isArray(n)?n:[n],w&&(y[e]&&(e=y[e]),((t,e)=>{const{activeTransforms:n}=u(t);var r,i;i=e,-1===(r=n).indexOf(i)&&r.push(i),t.style.transform=S(n)})(t,e),e=g(e)),function(t,e){t.activeAnimations[e]&&(!function(t){t.commitStyles();try{t.cancel()}catch(t){}}(t.activeAnimations[e]),t.activeAnimations[e]=void 0)}(p,e);const b=v.get(e);if(P(e)?(d=((t,e)=>n=>t.style.setProperty(e,n))(t,e),C.cssRegisterProperty()?function(t){if(!T.has(t)){T.add(t);try{const{syntax:e,initialValue:n}=v.has(t)?v.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(e):m=!1):d=((t,e)=>n=>t.style[e]=n)(t,e),m){if(b&&(n=n.map((t=>"number"==typeof t?b.toDefaultUnit(t):t))),!C.partialKeyframes()&&1===n.length){const r=P(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];n.unshift(r)}const r={delay:j(s),duration:j(i),endDelay:j(o),easing:M(c)?void 0:k(c),direction:l,iterations:a+1},u=t.animate({[e]:n,offset:h,easing:M(c)?c.map(k):void 0},r);p.activeAnimations[e]=u,u.finished||(u.finished=new Promise(((t,e)=>{u.onfinish=t,u.oncancel=e})));const y=n[n.length-1];return u.finished.then((()=>d(y))).catch(f),u}if(w&&n.every(Z)){if(b){const t=d;d=e=>t(b.toDefaultUnit(e))}return function(t,e=[0,1],n={}){return new X(t,e,n)}(d,n,r)}{const t=n[n.length-1];d(b&&"number"==typeof t?b.toDefaultUnit(t):t)}}const Z=t=>"number"==typeof t;const G=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):t;function H(t,r,i,s,o,a){const c=e(r);n((()=>{const e={};if(new Set([...Object.keys(i),...Object.keys(c.current)]).forEach((t=>{let n=i[t];var r,s;(r=n,s=c.current[t],typeof r==typeof s&&(Array.isArray(r)&&Array.isArray(s)?function(t,e){const n=e.length;if(n!==t.length)return!1;for(let r=0;r<n;r++)if(e[r]!==t[r])return!1;return!0}(r,s):r===s))||(e[t]=n)})),Object.keys(e).length&&t.current){null==o||o(e);const n=[];for(const r in e){const i=Y(t.current,r,e[r],G(s,r));i&&n.push(i)}Promise.all(n.map((t=>t.finished))).then((()=>null==a?void 0:a(e))).catch(f)}c.current=i}))}function J(t,e,n={}){return t?"string"==typeof t?n[t]:t:e?n[e]:void 0}function N(t,e,n){if(n)for(const r in n)"options"!==r&&(t[r]=n[r],n.options&&(e[r]=G(n.options,r)))}function Q(t,e,n,i,s){const[o,a]=r(!1);return(o||i)&&N(t,e,J(n,i,s)),[o||Boolean(i),a]}var _=i(null);var tt=0,et=function(){return tt++},nt=function(){return t=et,null===(n=e(null)).current&&(n.current=t()),n.current;var t,n};function rt(t,e,{exit:r,poses:i},{exit:o}){const[a,c]=function(){var t=s(_);if(null===t)return[!0,null];var e=t.isPresent,r=t.onExitComplete,i=t.register,o=nt();return n((function(){return i(o)}),[]),!e&&r?[!1,function(){return null==r?void 0:r(o)}]:[!0]}();if(n((()=>{r||null==c||c()}),[a]),r&&!a)return N(t,e,J(r,o,i)),c}const it=i({});function st(r){return o((function(i,o){const l=e(null),{options:u,style:f,initial:h,hover:p,press:m,exit:d,inViewport:w,viewport:b,poses:O,onStart:A,onComplete:P,inherit:T=!0}=i,j=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(t);i<r.length;i++)e.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(t,r[i])&&(n[r[i]]=t[r[i]])}return n}(i,["options","style","initial","hover","press","exit","inViewport","viewport","poses","onStart","onComplete","inherit"]),M={initial:!0,style:!0};let k=s(it);T||(k={});const V=J(f,k.style,O),E=J(h,k.initial,O),D=Object.assign(Object.assign({},V),E),$=Object.assign(Object.assign({},E),V),C=Object.assign(Object.assign({},u),null==V?void 0:V.options),U=e(null);U.current||(U.current=function(t){const e={},n=[];for(let r in t){const i=t[r];x(r)&&(y[r]&&(r=y[r]),n.push(r),r=g(r));let s=Array.isArray(i)?i[0]:i;const o=v.get(r);o&&(s="number"==typeof i?o.toDefaultUnit(i):i),e[r]=s}return n.length&&(e.transform=S(n)),e}(D));const I=function(t,e,{hover:n,onPointerEnter:r,onPointerLeave:i,poses:s}={},{hover:o},a){const[c,l]=Q(t,e,n,o,s);return a.hover=c,n?{onPointerEnter:t=>{null==r||r(t),l(!0)},onPointerLeave:t=>{null==i||i(t),l(!1)}}:{}}($,C,i,k,M),L=function(t,e,{press:n,onPointerDown:r,poses:i}={},{press:s},o){const[a,c]=Q(t,e,n,s,i);if(o.press=a,!n)return{};const l=()=>{c(!1),window.removeEventListener("pointerup",l)};return{onPointerDown:t=>{null==r||r(t),c(!0),window.addEventListener("pointerup",l)}}}($,C,i,k,M);!function(t,e,r,{inViewport:i,poses:s,viewport:o={},onViewportEnter:a,onViewportLeave:c},{inViewport:l},u){const{root:f,margin:h,once:p,threshold:y}=o,[m,d]=Q(e,r,i,l,s);u.inViewport=m;let v=!!i||!!a||!!c;p&&m&&(v=!1),n((()=>{if(!v||"undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver((([t])=>{d(t.isIntersecting);const e=t.isIntersecting?a:c;e&&e(t)}),{root:null==f?void 0:f.current,rootMargin:h,threshold:y});return e.observe(t.current),()=>e.disconnect()}),[i,a,c,f,h,y])}(l,$,C,i,k,M);const R=rt($,C,i,k);H(l,D,$,C,A,(t=>{P&&P(t),R&&R()}));const z=a(r,Object.assign({},j,I,L,{style:U.current,ref:l})),F=ot.reduce(((t,e)=>(t[e]=void 0,i[e]?"string"==typeof i[e]&&M[e]&&(t[e]=i[e]):k[e]&&(t[e]=k[e]),t)),{}),W=c((()=>F),Object.values(F));return t.createElement(it.Provider,{value:W},z)}))}const ot=["initial","style","hover","press","inViewport","exit"],at=new Map,ct=new Proxy({},{get:(t,e)=>(at.has(e)||at.set(e,st(e)),at.get(e))});export{ct as animated};
+import*as t from"react";import{useRef as e,useEffect as n,useState as r,createContext as i,useContext as s,forwardRef as o,createElement as a,useMemo as c}from"react";const l=new WeakMap;function u(t){return l.has(t)||l.set(t,{activeTransforms:[],activeAnimations:{}}),l.get(t)}const f=()=>{},h=t=>t,p=["","X","Y","Z"],y={x:"translateX",y:"translateY",z:"translateZ"},m={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},d={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:m,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:h},skew:m},v=new Map,g=t=>`--motion-${t}`,w=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{p.forEach((e=>{w.push(t+e),v.set(g(t+e),d[t])}))}));const b=(t,e)=>w.indexOf(t)-w.indexOf(e),O=new Set(w),x=t=>O.has(t),S=t=>t.sort(b).reduce(P,"").trim(),P=(t,e)=>`${t} ${e}(var(${g(e)}))`,A=t=>t.startsWith("--"),T=new Set;const j=t=>1e3*t;const M=t=>Array.isArray(t)&&"number"!=typeof t[0],V=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?k(t):t,k=([t,e,n,r])=>`cubic-bezier(${t}, ${e}, ${n}, ${r})`,E=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{E({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(E({opacity:[0,1]}).finished)},C={},$=Object.keys(D).reduce(((t,e)=>(t[e]=()=>(void 0===C[e]&&(C[e]=D[e]()),C[e]),t)),{}),U=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function I(t,e,n,r){if(t===e&&n===r)return h;const i=e=>function(t,e,n,r,i){let s,o,a=0;do{o=e+(n-e)/2,s=U(o,r,i)-t,s>0?n=o:e=o}while(Math.abs(s)>1e-7&&++a<12);return o}(e,0,1,t,n);return t=>0===t||1===t?t:U(i(t),e,r)}var L=function(t,e,n){var r=e-t;return 0===r?1:(n-t)/r},F=function(t,e,n){return-n*t+n*e+t},R=function(t,e){return void 0===e&&(e="end"),function(n){var r,i,s,o=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,a="end"===e?Math.floor(o):Math.ceil(o);return r=0,i=1,s=a/t,Math.min(Math.max(s,r),i)}};const z={ease:I(.25,.1,.25,1),"ease-in":I(.42,0,1,1),"ease-in-out":I(.42,0,.58,1),"ease-out":I(0,0,.58,1)},W=/\((.*?)\)/;function q(t){if("function"==typeof t)return t;if(Array.isArray(t))return I(...t);if(z[t])return z[t];if(t.startsWith("steps")){const e=W.exec(t);if(e){const t=e[1].split(",");return R(parseFloat(t[0]),t[1].trim())}}return h}function B(t,e){const n=t[t.length-1];for(let r=1;r<=e;r++){const i=L(0,e,r);t.push(F(n,1,i))}}function K(t,e=function(t){const e=[0];return B(e,t-1),e}(t.length),n=h){const r=t.length,i=r-e.length;return i>0&&B(e,i),i=>{let s=0;for(;s<r-2&&!(i<e[s+1]);s++);let o=(a=L(e[s],e[s+1],i),Math.min(1,Math.max(a,0)));var a,c,l,u;if(Array.isArray(n)){const t=(c=0,l=n.length-1,((s-c)%(u=l-c)+u)%u+c);o=n[t](o)}else o=n(o);return F(t[s],t[s+1],o)}}class X{constructor(t,e,{easing:n="ease",duration:r=.3,delay:i=0,endDelay:s=0,offset:o,repeat:a=0,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=r*(a+1),u=K(e,o,M(n)?n.map(q):q(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}let n=this.pauseTime?this.pauseTime:(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-i,0);const o=n/r;let a=Math.floor(o),f=o%1;!f&&o>=1&&(f=1),1===f&&a--;const h=a%2;("reverse"===c||"alternate"===c&&h||"alternate-reverse"===c&&!h)&&(f=1-f);const p=n>=l?1:Math.min(f,1),y=u(p);t(y);n>=l+s?(this.playState="finished",this.resolve(y)):"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(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.currentTime}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=j(t):this.startTime=performance.now()-j(t)/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}function Y(t,e,n,r={}){let{duration:i=.3,delay:s=0,endDelay:o=0,repeat:a=0,easing:c="ease",direction:l,offset:h}=r;const p=u(t);let m=$.waapi(),d=f;const w=x(e);n=Array.isArray(n)?n:[n],w&&(y[e]&&(e=y[e]),((t,e)=>{const{activeTransforms:n}=u(t);var r,i;i=e,-1===(r=n).indexOf(i)&&r.push(i),t.style.transform=S(n)})(t,e),e=g(e)),function(t,e){t.activeAnimations[e]&&(!function(t){t.commitStyles();try{t.cancel()}catch(t){}}(t.activeAnimations[e]),t.activeAnimations[e]=void 0)}(p,e);const b=v.get(e);if(A(e)?(d=((t,e)=>n=>t.style.setProperty(e,n))(t,e),$.cssRegisterProperty()?function(t){if(!T.has(t)){T.add(t);try{const{syntax:e,initialValue:n}=v.has(t)?v.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(e):m=!1):d=((t,e)=>n=>t.style[e]=n)(t,e),m){if(b&&(n=n.map((t=>"number"==typeof t?b.toDefaultUnit(t):t))),!$.partialKeyframes()&&1===n.length){const r=A(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];n.unshift(r)}const r={delay:j(s),duration:j(i),endDelay:j(o),easing:M(c)?void 0:V(c),direction:l,iterations:a+1},u=t.animate({[e]:n,offset:h,easing:M(c)?c.map(V):void 0},r);p.activeAnimations[e]=u,u.finished||(u.finished=new Promise(((t,e)=>{u.onfinish=t,u.oncancel=e})));const y=n[n.length-1];return u.finished.then((()=>d(y))).catch(f),u}if(w&&n.every(Z)){if(1===n.length&&n.unshift(parseFloat(getComputedStyle(t).getPropertyValue(e)||"0")),b){const t=d;d=e=>t(b.toDefaultUnit(e))}return function(t,e=[0,1],n={}){return new X(t,e,n)}(d,n,r)}{const t=n[n.length-1];d(b&&"number"==typeof t?b.toDefaultUnit(t):t)}}const Z=t=>"number"==typeof t;const G=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):t;function H(t,r,i,s,o,a){const c=e(r);n((()=>{const e={};if(new Set([...Object.keys(i),...Object.keys(c.current)]).forEach((t=>{let n=i[t];var r,s;(r=n,s=c.current[t],typeof r==typeof s&&(Array.isArray(r)&&Array.isArray(s)?function(t,e){const n=e.length;if(n!==t.length)return!1;for(let r=0;r<n;r++)if(e[r]!==t[r])return!1;return!0}(r,s):r===s))||(e[t]=n)})),Object.keys(e).length&&t.current){null==o||o(e);const n=[];for(const r in e){const i=Y(t.current,r,e[r],G(s,r));i&&n.push(i)}Promise.all(n.map((t=>t.finished))).then((()=>null==a?void 0:a(e))).catch(f)}c.current=i}))}function J(t,e,n={}){return t?"string"==typeof t?n[t]:t:e?n[e]:void 0}function N(t,e,n){if(n)for(const r in n)"options"!==r&&(t[r]=n[r],n.options&&(e[r]=G(n.options,r)))}function Q(t,e,n,i,s){const[o,a]=r(!1);return(o||i)&&N(t,e,J(n,i,s)),[o||Boolean(i),a]}var _=i(null);var tt=0,et=function(){return tt++},nt=function(){return t=et,null===(n=e(null)).current&&(n.current=t()),n.current;var t,n};function rt(t,e,{exit:r,poses:i},{exit:o}){const[a,c]=function(){var t=s(_);if(null===t)return[!0,null];var e=t.isPresent,r=t.onExitComplete,i=t.register,o=nt();return n((function(){return i(o)}),[]),!e&&r?[!1,function(){return null==r?void 0:r(o)}]:[!0]}();if(n((()=>{r||null==c||c()}),[a]),r&&!a)return N(t,e,J(r,o,i)),c}const it=i({});function st(r){return o((function(i,o){const l=e(null),{options:u,style:f,initial:h,hover:p,press:m,exit:d,inViewport:w,viewport:b,poses:O,onStart:P,onComplete:A,inherit:T=!0}=i,j=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(t);i<r.length;i++)e.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(t,r[i])&&(n[r[i]]=t[r[i]])}return n}(i,["options","style","initial","hover","press","exit","inViewport","viewport","poses","onStart","onComplete","inherit"]),M={initial:!0,style:!0};let V=s(it);T||(V={});const k=J(f,V.style,O),E=J(h,V.initial,O),D=Object.assign(Object.assign({},k),E),C=Object.assign(Object.assign({},E),k),$=Object.assign(Object.assign({},u),null==k?void 0:k.options),U=e(null);U.current||(U.current=function(t){const e={},n=[];for(let r in t){const i=t[r];x(r)&&(y[r]&&(r=y[r]),n.push(r),r=g(r));let s=Array.isArray(i)?i[0]:i;const o=v.get(r);o&&(s="number"==typeof i?o.toDefaultUnit(i):i),e[r]=s}return n.length&&(e.transform=S(n)),e}(D));const I=function(t,e,{hover:n,onPointerEnter:r,onPointerLeave:i,poses:s}={},{hover:o},a){const[c,l]=Q(t,e,n,o,s);return a.hover=c,n?{onPointerEnter:t=>{null==r||r(t),l(!0)},onPointerLeave:t=>{null==i||i(t),l(!1)}}:{}}(C,$,i,V,M),L=function(t,e,{press:n,onPointerDown:r,poses:i}={},{press:s},o){const[a,c]=Q(t,e,n,s,i);if(o.press=a,!n)return{};const l=()=>{c(!1),window.removeEventListener("pointerup",l)};return{onPointerDown:t=>{null==r||r(t),c(!0),window.addEventListener("pointerup",l)}}}(C,$,i,V,M);!function(t,e,r,{inViewport:i,poses:s,viewport:o={},onViewportEnter:a,onViewportLeave:c},{inViewport:l},u){const{root:f,margin:h,once:p,threshold:y}=o,[m,d]=Q(e,r,i,l,s);u.inViewport=m;let v=!!i||!!a||!!c;p&&m&&(v=!1),n((()=>{if(!v||"undefined"==typeof IntersectionObserver)return;const e=new IntersectionObserver((([t])=>{d(t.isIntersecting);const e=t.isIntersecting?a:c;e&&e(t)}),{root:null==f?void 0:f.current,rootMargin:h,threshold:y});return e.observe(t.current),()=>e.disconnect()}),[i,a,c,f,h,y])}(l,C,$,i,V,M);const F=rt(C,$,i,V);H(l,D,C,$,P,(t=>{A&&A(t),F&&F()}));const R=a(r,Object.assign({},j,I,L,{style:U.current,ref:l})),z=ot.reduce(((t,e)=>(t[e]=void 0,i[e]?"string"==typeof i[e]&&M[e]&&(t[e]=i[e]):V[e]&&(t[e]=V[e]),t)),{}),W=c((()=>z),Object.values(z));return t.createElement(it.Provider,{value:W},R)}))}const ot=["initial","style","hover","press","inViewport","exit"],at=new Map,ct=new Proxy({},{get:(t,e)=>(at.has(e)||at.set(e,st(e)),at.get(e))});export{ct as animated};

package.json

 {
   "name": "motion",
-  "version": "6.0.1-alpha.30",
+  "version": "6.0.1-alpha.31",
   "description": "The Motion library for the web",
@@ -5,0 +5,0 @@ "author": "Matt Perry",

src/targets/dom/animate-style.ts

@@ -148,2 +148,8 @@ import { AnimationData, getAnimationData } from "./data"
   } else if (valueIsTransform && keyframes.every(isNumber)) {
+    if (keyframes.length === 1) {
+      keyframes.unshift(
+        parseFloat(getComputedStyle(element).getPropertyValue(name) || "0")
+      )
+    }
+
     if (definition) {
@@ -150,0 +156,0 @@ const applyStyle = render

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

326213

increased by0.26%

Lines of code

8817

increased by0.17%

No dependency changes