@infinityfx/lively 0.0.1 → 0.0.2

package/dist/index.js

@@ -0,0 +1,3 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Lively={},t.React)}(this,(function(t,e){"use strict";function n(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function r(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?n(Object(r),!0).forEach((function(e){p(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function i(){
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+i=function(){return t};var t={},e=Object.prototype,n=e.hasOwnProperty,r="function"==typeof Symbol?Symbol:{},o=r.iterator||"@@iterator",a=r.asyncIterator||"@@asyncIterator",s=r.toStringTag||"@@toStringTag";function l(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{l({},"")}catch(t){l=function(t,e,n){return t[e]=n}}function c(t,e,n,r){var i=e&&e.prototype instanceof h?e:h,o=Object.create(i.prototype),a=new T(r||[]);return o._invoke=function(t,e,n){var r="suspendedStart";return function(i,o){if("executing"===r)throw new Error("Generator is already running");if("completed"===r){if("throw"===i)throw o;return O()}for(n.method=i,n.arg=o;;){var a=n.delegate;if(a){var s=k(a,n);if(s){if(s===p)continue;return s}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===r)throw r="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r="executing";var l=u(t,e,n);if("normal"===l.type){if(r=n.done?"completed":"suspendedYield",l.arg===p)continue;return{value:l.arg,done:n.done}}"throw"===l.type&&(r="completed",n.method="throw",n.arg=l.arg)}}}(t,n,a),o}function u(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}t.wrap=c;var p={};function h(){}function f(){}function d(){}var v={};l(v,o,(function(){return this}));var y=Object.getPrototypeOf,g=y&&y(y(I([])));g&&g!==e&&n.call(g,o)&&(v=g);var m=d.prototype=h.prototype=Object.create(v);function w(t){["next","throw","return"].forEach((function(e){l(t,e,(function(t){return this._invoke(e,t)}))}))}function b(t,e){function r(i,o,a,s){var l=u(t[i],t,o);if("throw"!==l.type){var c=l.arg,p=c.value;return p&&"object"==typeof p&&n.call(p,"__await")?e.resolve(p.__await).then((function(t){r("next",t,a,s)}),(function(t){r("throw",t,a,s)})):e.resolve(p).then((function(t){c.value=t,a(c)}),(function(t){return r("throw",t,a,s)}))}s(l.arg)}var i;this._invoke=function(t,n){function o(){return new e((function(e,i){r(t,n,e,i)}))}return i=i?i.then(o,o):o()}}function k(t,e){var n=t.iterator[e.method];if(void 0===n){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,k(t,e),"throw"===e.method))return p;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return p}var r=u(n,t.iterator,e.arg);if("throw"===r.type)return e.method="throw",e.arg=r.arg,e.delegate=null,p;var i=r.arg;return i?i.done?(e[t.resultName]=i.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,p):i:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,p)}function x(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function E(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function T(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(x,this),this.reset(!0)}function I(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var r=-1,i=function e(){for(;++r<t.length;)if(n.call(t,r))return e.value=t[r],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:O}}function O(){return{value:void 0,done:!0}}return f.prototype=d,l(m,"constructor",d),l(d,"constructor",f),f.displayName=l(d,s,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===f||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,d):(t.__proto__=d,l(t,s,"GeneratorFunction")),t.prototype=Object.create(m),t},t.awrap=function(t){return{__await:t}},w(b.prototype),l(b.prototype,a,(function(){return this})),t.AsyncIterator=b,t.async=function(e,n,r,i,o){void 0===o&&(o=Promise);var a=new b(c(e,n,r,i),o);return t.isGeneratorFunction(n)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},w(m),l(m,s,"Generator"),l(m,o,(function(){return this})),l(m,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var r=e.pop();if(r in t)return n.value=r,n.done=!1,n}return n.done=!0,n}},t.values=I,T.prototype={constructor:T,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(E),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function r(n,r){return a.type="throw",a.arg=t,e.next=n,r&&(e.method="next",e.arg=void 0),!!r}for(var i=this.tryEntries.length-1;i>=0;--i){var o=this.tryEntries[i],a=o.completion;if("root"===o.tryLoc)return r("end");if(o.tryLoc<=this.prev){var s=n.call(o,"catchLoc"),l=n.call(o,"finallyLoc");if(s&&l){if(this.prev<o.catchLoc)return r(o.catchLoc,!0);if(this.prev<o.finallyLoc)return r(o.finallyLoc)}else if(s){if(this.prev<o.catchLoc)return r(o.catchLoc,!0)}else{if(!l)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return r(o.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var i=this.tryEntries[r];if(i.tryLoc<=this.prev&&n.call(i,"finallyLoc")&&this.prev<i.finallyLoc){var o=i;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var a=o?o.completion:{};return a.type=t,a.arg=e,o?(this.method="next",this.next=o.finallyLoc,p):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),p},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),E(n),p}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var r=n.completion;if("throw"===r.type){var i=r.arg;E(n)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,n){return this.delegate={iterator:I(t),resultName:e,nextLoc:n},"next"===this.method&&(this.arg=void 0),p}},t}function o(t){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o(t)}function a(t,e,n,r,i,o,a){try{var s=t[o](a),l=s.value}catch(t){return void n(t)}s.done?e(l):Promise.resolve(l).then(r,i)}function s(t){return function(){var e=this,n=arguments;return new Promise((function(r,i){var o=t.apply(e,n);function s(t){a(o,r,i,s,l,"next",t)}function l(t){a(o,r,i,s,l,"throw",t)}s(void 0)}))}}function l(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function c(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function u(t,e,n){return e&&c(t.prototype,e),n&&c(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function p(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function h(){return h=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},h.apply(this,arguments)}function f(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&v(t,e)}function d(t){return d=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},d(t)}function v(t,e){return v=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},v(t,e)}function y(t,e){if(null==t)return{};var n,r,i=function(t,e){if(null==t)return{};var n,r,i={},o=Object.keys(t);for(r=0;r<o.length;r++)n=o[r],e.indexOf(n)>=0||(i[n]=t[n]);return i}(t,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);for(r=0;r<o.length;r++)n=o[r],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(i[n]=t[n])}return i}function g(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}function m(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,r=d(t);if(e){var i=d(this).constructor;n=Reflect.construct(r,arguments,i)}else n=r.apply(this,arguments);return g(this,n)}}function w(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==n)return;var r,i,o=[],a=!0,s=!1;try{for(n=n.call(t);!(a=(r=n.next()).done)&&(o.push(r.value),!e||o.length!==e);a=!0);}catch(t){s=!0,i=t}finally{try{a||null==n.return||n.return()}finally{if(s)throw i}}return o}(t,e)||k(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function b(t){return function(t){if(Array.isArray(t))return x(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||k(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function k(t,e){if(t){if("string"==typeof t)return x(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?x(t,e):void 0}}function x(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var E=function(){function t(){l(this,t),this.queue=[],this.tick()}var e,n;return u(t,[{key:"tick",value:(n=s(i().mark((function t(){var e,n;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:e=Date.now(),n=0;case 2:if(!(n<this.queue.length+1)){t.next=10;break}if(!(this.queue.length===n||this.queue[n].timestamp>e)){t.next=6;break}return this.queue.splice(0,n),t.abrupt("break",10);case 6:this.queue[n].callback();case 7:n++,t.next=2;break;case 10:requestAnimationFrame(this.tick.bind(this));case 11:case"end":return t.stop()}}),t,this)}))),function(){return n.apply(this,arguments)})},{key:"search",value:function(t){for(var e,n,r=0,i=this.queue.length-1;r<=i;)if(e=r+i>>>1,(n=this.queue[e].timestamp-t.timestamp)<0)r=e+1;else{if(!(n>0))return e;i=e-1}return r}},{key:"insert",value:function(t){var e=this.search(t);this.queue.splice(e,0,t)}},{key:"delay",value:function(t,e){t instanceof Function&&this.insert({callback:t,timestamp:Date.now()+1e3*e})}}],[{key:"get",value:function(){return"UITools"in window||(window.UITools={}),"AnimationLoop"in window.UITools||(window.UITools.AnimationQueue=new t),window.UITools.AnimationQueue}},{key:"delay",value:(e=s(i().mark((function t(e,n){return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.abrupt("return",this.get().delay(e,n));case 1:case"end":return t.stop()}}),t,this)}))),function(t,n){return e.apply(this,arguments)})}]),t}(),T=["delay","duration","loop","interpolate","origin","scaleCorrection"],I=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delay,r=void 0===n?0:n,i=e.duration,o=void 0===i?1:i,a=e.loop,s=void 0!==a&&a,c=e.interpolate,u=void 0===c?"ease":c,p=e.origin,h=void 0===p?{x:.5,y:.5}:p,f=e.scaleCorrection,d=void 0!==f&&f,v=y(e,T),g=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};l(this,t),this.scaleCorrection=d,this.keyframes=this.getKeyframes(v,g),this.delay=r,this.duration=o,this.delta=o/(this.keyframes.length-1),this.interpolation=u,this.origin=this.originToStyle(h),this.loop=s}return u(t,[{key:"originToStyle",value:function(t){var e=.5,n=.5;if("object"===o(t))e=t.x,n=t.y;else if("string"==typeof t)switch(t){case"left":e=0;break;case"right":e=1;break;case"top":n=0;break;case"bottom":n=1;case"center":break;default:e=n=parseFloat(t)}else e=n=t;return"".concat(100*e,"% ").concat(100*n,"%")}},{key:"getKeyframes",value:function(e){var n=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};for(var i in e){var o=i in r?r[i]:t.initials[i];Array.isArray(e[i])?e[i]=e[i].length>1?e[i]:[o].concat(b(e[i])):e[i]=[o,e[i]]}var a=Object.values(e).reduce((function(t,e){return e.length>t?e.length:t}),0),s=new Array(a).fill(0);return s=s.map((function(t,r){var i={};for(var o in e)i[o]=n.interpolateKeyframe(e[o],r,a);return n.keyframeToStyle(i)}))}},{key:"interpolate",value:function(t,e,n){var r="string"==typeof t?t.match(/[^0-9\.]*/i):null;"string"!=typeof e||r||(r=e.match(/[^0-9\.]*/i));var i=(t=parseFloat(t))*(1-n)+(e=parseFloat(e))*n;return r?i+r:i}},{key:"interpolateKeyframe",value:function(t,e,n){var r=this;if(!t)return null;if(t.length===n)return t[e];var i=e*((t.length-1)/(n-1)),a=Math.floor(i),s=t[a],l=a===t.length-1?null:t[a+1];if(!l)return s;if("object"===o(s)){var c={};return Object.keys(s).forEach((function(t){c[t]=r.interpolate(s[t],l[t],i-a)})),c}return this.interpolate(s,l,i-a)}},{key:"propertyToString",value:function(e,n,r,i){return"string"==typeof(n=n[r])?n:(n=isNaN(n)?t.initials[e][r]:n,"".concat(n*("%"===i?100:1)).concat(i))}},{key:"propertyToNumber",value:function(e,n,r){return"string"==typeof(n=n[r])?"%"===n.match(/[^0-9\.]*/i)?parseFloat(n)/100:n:isNaN(n)?t.initials[e][r]:n}},{key:"keyframeToStyle",value:function(t){var e=this,n={transform:""};return Object.entries(t).forEach((function(t){var r=w(t,2),i=r[0],a=r[1];if(null!=a)switch(i){case"position":n.transform+="translate(".concat(e.propertyToString(i,a,"x","px"),", ").concat(e.propertyToString(i,a,"y","px"),") ");break;case"scale":if(a="object"!==o(a)?{x:a,y:a}:a,e.scaleCorrection){n.width=e.propertyToNumber(i,a,"x"),n.height=e.propertyToNumber(i,a,"y");break}n.transform+="scale(".concat(e.propertyToString(i,a,"x","%"),", ").concat(e.propertyToString(i,a,"y","%"),") ");break;case"rotation":n.transform+="rotate(".concat(parseFloat(a),"deg) ");break;case"clip":var s=e.propertyToString(i,a,"top","%"),l=e.propertyToString(i,a,"right","%"),c=e.propertyToString(i,a,"bottom","%"),u=e.propertyToString(i,a,"left","%");n.clipPath="inset(".concat(s," ").concat(l," ").concat(c," ").concat(u,")");break;case"borderRadius":n[i]="string"==typeof a?a:a+"px";break;case"opacity":case"active":case"backgroundColor":case"color":n[i]=a}})),n.transform.length||delete n.transform,n}},{key:"setInitialStyles",value:function(e){t.setInitial(e);var n=this.keyframes[0];e.style.transitionDuration="0s",this.apply(e,n,!0)}},{key:"test",value:function(t,e,n,r,i,o){var a=r+i+((n-=e-(t="string"==typeof t?parseInt(t)/e:t)*e)<0?n:0),s=r/(r+i);return{size:(n<0?0:n)+"px",padStart:(r=o?t*r:a*s)+"px",padEnd:(i=o?t*i:a*(1-s))+"px"}}},{key:"apply",value:function(t,e){var n=this,r=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=function(){var r=t.UITools.initialStyles;Object.entries(e).forEach((function(e){var i=w(e,2),o=i[0],a=i[1];if("width"===o){var s=r.clientWidth,l=r.width,c=r.paddingLeft,u=r.paddingRight,p=r.includePadding,h=n.test(a,s,l,c,u,p),f=h.size,d=h.padStart,v=h.padEnd;return t.style.width=f,t.style.paddingLeft=d,void(t.style.paddingRight=v)}if("height"===o){var y=r.clientHeight,g=r.height,m=r.paddingTop,b=r.paddingBottom,k=r.includePadding,x=n.test(a,y,g,m,b,k),E=x.size,T=x.padStart,I=x.padEnd;return t.style.height=E,t.style.paddingTop=T,void(t.style.paddingBottom=I)}"active"!==o&&(t.style[o]=a)}))};if("active"in e){var o=Object.keys(e.active)[0];"start"===o||r?(t.style.display=e.active[o]?"":"none",r?i():E.delay(i,.01)):(E.delay((function(){t.style.display=e.active[o]?"":"none"}),this.delta),i())}else i()}},{key:"start",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.immediate,r=void 0!==n&&n,i=e.reverse,o=void 0!==i&&i;!t.UITools.animating||r?(t.style.transitionDuration="".concat(this.delta,"s"),t.style.transitionTimingFunction=this.interpolation,t.style.transformOrigin=this.origin,t.UITools.animating=!0,t.UITools.index=1,this.getNext(t,o)):t.UITools.queue.push([this,{reverse:o}])}},{key:"play",value:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=n.delay,i=void 0===r?0:r,o=n.immediate,a=void 0!==o&&o,s=n.reverse,l=void 0!==s&&s;t.style&&(this.delay||i?E.delay((function(){return e.start(t,{immediate:a,reverse:l})}),this.delay+i):this.start(t,{immediate:a,reverse:l}))}},{key:"getNext",value:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(t.UITools.index===this.keyframes.length){t.UITools.animating=!1;var r=t.UITools.queue.shift()||[],i=w(r,2),o=i[0],a=i[1];return o?o.start(t,a):void(this.loop&&this.start(t,a))}var s=t.UITools.index;n&&(s=this.keyframes.length-1-s),requestAnimationFrame((function(){e.apply(t,e.keyframes[s])})),t.UITools.index++,E.delay((function(){return e.getNext(t,n)}),this.delta)}}],[{key:"from",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return e&&"boolean"!=typeof e?new t(r(r({},e),{},{scaleCorrection:i}),n):null}},{key:"setInitial",value:function(t){var e=getComputedStyle(t),n=e.width,r=e.height,i=e.paddingLeft,o=e.paddingRight,a=e.paddingTop,s=e.paddingBottom,l=e.borderRadius,c=e.boxSizing,u=e.backgroundColor,p=e.color,h=t.getBoundingClientRect(),f=h.x,d=h.y;"UITools"in t||(t.UITools={}),"queue"in t.UITools||(t.UITools.queue=[]),"initialStyles"in t.UITools||(t.UITools.initialStyles={x:f,y:d,includePadding:"border-box"===c,clientWidth:t.clientWidth,clientHeight:t.clientHeight,width:parseInt(n),height:parseInt(r),paddingLeft:parseInt(i),paddingRight:parseInt(o),paddingTop:parseInt(a),paddingBottom:parseInt(s),borderRadius:parseInt(l.split(" ")[0]),backgroundColor:u,color:p})}}]),t}();p(I,"initials",{opacity:1,scale:{x:1,y:1},position:{x:0,y:0},clip:{left:0,top:0,right:0,bottom:0},borderRadius:0,active:{value:!0,at:0},backgroundColor:"initial",color:"initial"});var O=function(t){f(g,t);var n,a,c,p,h,d,v,y=m(g);function g(t){var e;return l(this,g),(e=y.call(this,t)).hover=!1,e.hasFocus=!1,e.inView=!1,e.scrollDelta=0,e.viewportMargin=t.viewportMargin,e.elements=[],e.animations={animate:e.getAnimation(),onMount:e.getAnimation("onMount"),onUnmount:e.getAnimation("onUnmount"),onClick:e.getAnimation("onClick"),whileHover:e.getAnimation("whileHover"),whileFocus:e.getAnimation("whileFocus"),whileViewport:e.getAnimation("whileViewport")},e.level=0,e.children=[],e}return u(g,[{key:"getAnimation",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"animate";return"animate"===t&&this.props.animation&&("object"===o(this.props.animation)||"function"==typeof this.props.animation)&&"use"in this.props.animation?this.props.animation.use():I.from(this.props[t],this.props.initial,this.props.scaleCorrection)}},{key:"countNestedLevels",value:function(t){var n=this;if(!t)return 0;var r=0,i=0;return e.Children.forEach(t,(function(t){var o;if(e.isValidElement(t)){t.type===g&&(r=1);var a=n.countNestedLevels(null===(o=t.props)||void 0===o?void 0:o.children);i=i<a?a:i}})),i+r}},{key:"addEvent",value:function(t,e){var n;e instanceof Function&&(null!==(n=window.UITools)&&void 0!==n&&n.Events||(window.UITools={Events:{}}),t in window.UITools.Events||(window.UITools.Events[t]={unique:0},window.addEventListener(t,(function(e){Object.values(window.UITools.Events[t]).forEach((function(t){t instanceof Function&&t(e)}))}))),e.UITools={ListenerID:window.UITools.Events[t].unique},window.UITools.Events[t][window.UITools.Events[t].unique]=e,window.UITools.Events[t].unique++)}},{key:"removeEvent",value:function(t,e){var n,r;"undefined"!=typeof window&&null!==(n=window.UITools)&&void 0!==n&&n.Events&&t in(null===(r=window.UITools)||void 0===r?void 0:r.Events)&&"ListenerID"in e.UITools&&delete window.UITools.Events[t][e.UITools.ListenerID]}},{key:"componentDidMount",value:function(){var t=this;this.elements.forEach((function(e){var n;null===(n=t.animations.animate)||void 0===n||n.setInitialStyles(e)})),(this.props.parentLevel<1||this.props.noCascade)&&(this.scrollEventListener=this.onScroll.bind(this),this.addEvent("scroll",this.scrollEventListener),this.props.onMount&&this.play("onMount",{staggerDelay:.001}),this.props.whileViewport&&this.onScroll())}},{key:"componentWillUnmount",value:function(){this.removeEvent("scroll",this.scrollEventListener),this.props.onUnmount&&(this.props.parentLevel<1||this.props.noCascade)&&this.play("onUnmount",{reverse:!0,immediate:!0})}},{key:"inViewport",value:function(){var t=this,e=!0,n=!0;return this.elements.forEach((function(r){var i=r.getBoundingClientRect().y;e=e&&i+r.clientHeight*(1-t.viewportMargin)<window.innerHeight,n=n&&i>window.innerHeight+r.clientHeight*t.viewportMargin})),this.elements.length||this.children.forEach((function(t){var r=w(t.animatable.inViewport(),2),i=r[0],o=r[1];e=e&&i,n=n&&o})),[e,n]}},{key:"onScroll",value:(v=s(i().mark((function t(){var e,n,r,o;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!(Date.now()-this.scrollDelta<350)){t.next=2;break}return t.abrupt("return");case 2:this.scrollDelta=Date.now(),e=this.inViewport(),n=w(e,2),r=n[0],o=n[1],!this.inView&&r&&(this.inView=!0,this.props.whileViewport&&this.play("whileViewport")),this.inView&&o&&(this.inView=!1,this.props.whileViewport&&this.play("whileViewport",{reverse:!0,immediate:!0}));case 6:case"end":return t.stop()}}),t,this)}))),function(){return v.apply(this,arguments)})},{key:"onEnter",value:(d=s(i().mark((function t(e){var n,r=arguments;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=r.length>1&&void 0!==r[1]&&r[1],this.hover||(this.props.whileHover&&this.play("whileHover"),this.hover=!0),n&&n(e);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return d.apply(this,arguments)})},{key:"onLeave",value:(h=s(i().mark((function t(e){var n,r=arguments;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=r.length>1&&void 0!==r[1]&&r[1],this.hover&&(this.props.whileHover&&this.play("whileHover",{reverse:!0}),this.hover=!1),n&&n(e);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return h.apply(this,arguments)})},{key:"onFocus",value:(p=s(i().mark((function t(e){var n,r=arguments;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=r.length>1&&void 0!==r[1]&&r[1],this.hasFocus||(this.props.whileFocus&&this.play("whileFocus"),this.hasFocus=!0),n&&n(e);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return p.apply(this,arguments)})},{key:"onBlur",value:(c=s(i().mark((function t(e){var n,r=arguments;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=r.length>1&&void 0!==r[1]&&r[1],this.hasFocus&&(this.props.whileFocus&&this.play("whileFocus",{reverse:!0}),this.hasFocus=!1),n&&n(e);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return c.apply(this,arguments)})},{key:"onClick",value:(a=s(i().mark((function t(e){var n,r=arguments;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=r.length>1&&void 0!==r[1]&&r[1],this.props.onClick&&this.play("onClick"),n&&n(e);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return a.apply(this,arguments)})},{key:"play",value:(n=s(i().mark((function t(e){var n,r,o,a,s,l,c,u,p,h,f,d,v,y,g=this,m=arguments;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(n=m.length>1&&void 0!==m[1]?m[1]:{},r=n.reverse,o=void 0!==r&&r,a=n.immediate,s=void 0!==a&&a,l=n.cascade,c=void 0!==l&&l,u=n.groupAdjust,p=void 0===u?0:u,h=n.cascadeDelay,f=void 0===h?0:h,d=n.staggerDelay,v=void 0===d?0:d,!(this.props.parentLevel>0)||c){t.next=3;break}return t.abrupt("return");case 3:if((y=this.animations[e])||(y=this.animations.animate),y){t.next=7;break}return t.abrupt("return");case 7:this.elements.forEach((function(t,e){var n="group"in g.props?g.props.parentLevel-g.props.group:g.level+p;f=o?y.duration:f;var r=o?n*f:(g.props.parentLevel-n)*f;y.play(t,{delay:g.props.stagger*e+r+v,reverse:o,immediate:s})})),this.children.forEach((function(t){var n=t.animatable,r=t.staggerIndex,i=void 0===r?-1:r;n.play(e,{reverse:o,immediate:s,cascade:!0,staggerDelay:i<0?0:g.props.stagger*i,cascadeDelay:y.duration,groupAdjust:i<0?0:1})}));case 9:case"end":return t.stop()}}),t,this)}))),function(t){return n.apply(this,arguments)})},{key:"style",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=r(r({},t),{},{transitionProperty:"transform, opacity, clip-path, border-radius, backgroundColor, color".concat(this.props.scaleCorrection?", width, height, left, top":""),willChange:"transform"});return e}},{key:"mergeProperties",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={};return n.initial=this.mergeProperty(e.initial,t.initial),n.animate=this.mergeProperty(e.animate,t.animate),n.onMount=this.mergeProperty(e.onMount,t.onMount),n.onUnmount=this.mergeProperty(e.onUnmount,t.onUnmount),n.onClick=this.mergeProperty(e.onClick,t.onClick),n.whileHover=this.mergeProperty(e.whileHover,t.whileHover),n.whileFocus=this.mergeProperty(e.whileFocus,t.whileFocus),n.whileViewport=this.mergeProperty(e.whileViewport,t.whileViewport),n.viewportMargin=this.mergeProperty(e.viewportMargin,t.viewportMargin),n.stagger=this.mergeProperty(e.stagger,t.stagger),n}},{key:"mergeProperty",value:function(t,e){return t?e?"object"===o(t)||"object"===o(e)?r(r({},t),e):e:t:e}},{key:"deepClone",value:function(t){var n,i=this,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},a=o.index,s=void 0===a?0:a,l=o.useElements,c=void 0!==l&&l,u=o.useEvents,p=void 0!==u&&u;if(!e.isValidElement(t))return t;var h,f={};t.type!==g&&(c&&(f={style:this.style(null===(h=t.props)||void 0===h?void 0:h.style),ref:function(t){return i.elements[s]=t}}),p&&(this.props.parentLevel<1||this.props.noCascade)&&(f=r(r({},f),{},{onMouseEnter:function(e){var n;return i.onEnter(e,null===(n=t.props)||void 0===n?void 0:n.onMouseEnter)},onMouseLeave:function(e){var n;return i.onLeave(e,null===(n=t.props)||void 0===n?void 0:n.onMouseLeave)},onFocus:function(e){var n;return i.onFocus(e,null===(n=t.props)||void 0===n?void 0:n.onFocus)},onBlur:function(e){var n;return i.onBlur(e,null===(n=t.props)||void 0===n?void 0:n.onBlur)},onClick:function(e){var n;return i.onClick(e,null===(n=t.props)||void 0===n?void 0:n.onClick)}}),p=!1));t.type!==g||null!==(n=t.props)&&void 0!==n&&n.noCascade||(f=r(r(r({},f),this.mergeProperties(t.props,this.props)),{},{parentLevel:this.parentLevel>0?this.parentLevel:this.level,ref:function(t){return i.children[i.children.length]={animatable:t,staggerIndex:c?s:-1}}}));var d=e.Children.map(t.props.children,(function(t,e){return i.deepClone(t,{index:e,useEvents:p})}));return Object.values(f).length?e.cloneElement(t,f,d):t}},{key:"render",value:function(){var t=this;return this.level=this.countNestedLevels(this.props.children),e.Children.map(this.props.children,(function(e,n){return t.deepClone(e,{index:n,useElements:!0,useEvents:!0})}))}}]),g}(e.Component);function C(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return{scaleCorrection:t.scaleCorrection,use:C.use.bind(this,t)}}function j(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return{scaleCorrection:t.scaleCorrection,use:j.use.bind(this,t)}}p(O,"defaultProps",{scaleCorrection:!1,parentLevel:0,stagger:.1,viewportMargin:.25,animate:{}}),C.use=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.direction,n=void 0===e?"up":e,r=t.scaleCorrection,i=void 0!==r&&r,o="0px",a="20px";switch(n){case"down":a="-20px";break;case"left":o="20px",a="0px";break;case"right":o="-20px",a="0px"}return new I({position:{x:"0px",y:"0px"},opacity:1,scaleCorrection:i,duration:.5},{position:{x:o,y:a},opacity:0})},j.use=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.scaleCorrection,n=void 0!==e&&e;return new I({opacity:1,scale:1,scaleCorrection:n,duration:.25},{opacity:0,scale:.85})};var L=["levels","animations"],S=function(t){f(r,t);var n=m(r);function r(t){var e;return l(this,r),(e=n.call(this,t)).levels=e.props.levels,e.animations=new Array(e.levels).fill(0).map((function(t,n){return n<e.props.animations.length?e.props.animations[n]:e.props.animations[e.props.animations.length-1]})),e}return u(r,[{key:"makeAnimatable",value:function(t){var n=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(r<1||e.Children.count(t)<1)return t;var i=this.props;i.levels,i.animations;var o=y(i,L),a=this.animations[this.levels-r];return React.createElement(O,h({animation:a,scaleCorrection:a.scaleCorrection},o),e.Children.map(t,(function(t){return e.isValidElement(t)?e.cloneElement(t,{},n.makeAnimatable(t.props.children,r-1)):t})))}},{key:"render",value:function(){return this.makeAnimatable(this.props.children,this.levels)}}]),r}(e.Component);p(S,"defaultProps",{levels:1,stagger:.1,viewportMargin:.25,animations:[C,j]});var P=function(t){f(n,t);var e=m(n);function n(t){var r;return l(this,n),(r=e.call(this,t)).animations.morphs=[],r}return u(n,[{key:"componentDidMount",value:function(){var t=this,e=this.elements[0];e&&(I.setInitial(e),e.setAttribute("uitools-morph-id",this.props.id),e.setAttribute("uitools-morph-active",this.props.active),this.self=e,this.createResetAnimation(),E.delay((function(){for(var n=document.querySelectorAll('[uitools-morph-id="'.concat(t.props.id,'"]')),r=0;r<n.length;r++)n[r]!==e&&(t.createMorphAnimation(n[r],r),"true"!==n[r].getAttribute("uitools-morph-active")&&t.animations.transition.setInitialStyles(n[r]))}),.001))}},{key:"componentDidUpdate",value:function(){var t=this,e="true"===this.self.getAttribute("uitools-morph-active");this.self.setAttribute("uitools-morph-active",this.props.active),E.delay((function(){if(t.props.active&&!e)t.animations.transition.setInitialStyles(t.self),t.animations.transition.play(t.self);else if(!t.props.active&&e){for(var n=0,r=document.querySelectorAll('[uitools-morph-id="'.concat(t.props.id,'"]')),i=0;i<r.length;i++)if(r[i]!==t.self&&"true"===r[i].getAttribute("uitools-morph-active")){n=i;break}t.animations.morphs[n].play(t.self)}}),.001)}},{key:"createResetAnimation",value:function(){var t,e=null===(t=this.self.UITools)||void 0===t?void 0:t.initialStyles;this.animations.transition=I.from({opacity:[0,0,1],scale:{x:1,y:1},position:{x:0,y:0},borderRadius:e.borderRadius,backgroundColor:[e.backgroundColor,e.backgroundColor,e.backgroundColor]},{},this.scaleCorrection)}},{key:"createMorphAnimation",value:function(t,e){var n,r,i=null===(n=this.self.UITools)||void 0===n?void 0:n.initialStyles,o=null===(r=t.UITools)||void 0===r?void 0:r.initialStyles;this.animations.morphs[e]=I.from({position:[{x:0,y:0},{x:o.x-i.x+(o.clientWidth-i.clientWidth)/2,y:o.y-i.y+(o.clientHeight-i.clientHeight)/2},{x:o.x-i.x+(o.clientWidth-i.clientWidth)/2,y:o.y-i.y+(o.clientHeight-i.clientHeight)/2}],scale:[{x:1,y:1},{x:o.clientWidth/i.clientWidth,y:o.clientHeight/i.clientHeight},{x:o.clientWidth/i.clientWidth,y:o.clientHeight/i.clientHeight}],opacity:[1,1,0],borderRadius:[i.borderRadius,o.borderRadius,o.borderRadius],backgroundColor:[i.backgroundColor,o.backgroundColor,o.backgroundColor]},{},this.scaleCorrection)}}]),n}(O);p(P,"defaultProps",{id:0,active:!1,scaleCorrection:!1}),t.Animatable=O,t.Animate=S,t.Morph=P,Object.defineProperty(t,"__esModule",{value:!0})}));

package/package.json

@@ -1,11 +1,38 @@
 {
 	"name": "@infinityfx/lively",
-	"version": "0.0.1",
-	"description": "",
-	"main": "index.js",
+	"version": "0.0.2",
+	"description": "Zero configuration, performant react animation library",
+	"main": "dist/index.js",
+	"module": "dist/index.js",
 	"repository": "infinityfx-llc/lively",
 	"author": "InfinityFX <contact@infinity-fx.com> (https://infinity-fx.com)",
 	"license": "GPL-3.0",
 	"bugs": "https://github.com/infinityfx-llc/lively/issues",
-	"homepage": "https://github.com/infinityfx-llc/lively#readme"
+	"homepage": "https://github.com/infinityfx-llc/lively#readme",
+	"keywords": [
+		"animation",
+		"react",
+		"transition",
+		"morph",
+		"animate"
+	],
+	"scripts": {
+		"build": "rollup -c",
+		"watch": "rollup -c -w"
+	},
+	"peerDependencies": {
+		"react": ">=16.0.0"
+	},
+	"devDependencies": {
+		"react": ">=16.0.0",
+		"rollup": "^2.75.7",
+		"@rollup/plugin-babel": "^5.3.1",
+		"@rollup/plugin-node-resolve": "^13.3.0",
+		"rollup-plugin-terser": "^7.0.2",
+		"@babel/cli": "^7.18.6",
+		"@babel/core": "^7.18.6",
+		"@babel/preset-env": "^7.18.6",
+		"@babel/preset-react": "^7.18.6"
+	},
+	"sideEffects": false
 }

package/animatable.js

@@ -1,300 +0,0 @@
-import { Children, cloneElement, Component, isValidElement } from 'react';
-import Animation from './animation';
-
-// on window resize reset initial elements sizes
-// implement keyframe position (not all evenly spaced)
-// mabye split whileViewport up into onEnter and onLeave
-// animate things like background color
-// implement repeat argument (and maybe repeat delay)
-
-export default class Animatable extends Component {
-
-    constructor(props) {
-        super(props);
-
-        this.hover = false;
-        this.hasFocus = false;
-        this.inView = false;
-        this.scrollDelta = 0;
-        this.viewportMargin = props.viewportMargin;
-
-        this.elements = [];
-        this.animations = {
-            animate: this.getAnimation(),
-            onMount: this.getAnimation('onMount'),
-            onUnmount: this.getAnimation('onUnmount'),
-            onClick: this.getAnimation('onClick'),
-            whileHover: this.getAnimation('whileHover'),
-            whileFocus: this.getAnimation('whileFocus'),
-            whileViewport: this.getAnimation('whileViewport')
-        };
-
-        this.level = 0;
-        this.children = [];
-    }
-
-    getAnimation(name = 'animate') {
-        if (name === 'animate' && this.props.animation && (typeof this.props.animation === 'object' || typeof this.props.animation === 'function') && 'use' in this.props.animation) {
-            return this.props.animation.use();
-        }
-
-        return Animation.from(this.props[name], this.props.initial, this.props.scaleCorrection);
-    }
-
-    countNestedLevels(children) {
-        if (!children) return 0;
-
-        let count = 0, nested = 0;
-        Children.forEach(children, (child) => {
-            if (!isValidElement(child)) return;
-            if (child.type === Animatable) count = 1;
-
-            const n = this.countNestedLevels(child.props?.children);
-            nested = nested < n ? n : nested;
-        });
-
-        return nested + count;
-    }
-
-    addEvent(event, callback) {
-        if (!(callback instanceof Function)) return;
-
-        if (!window.UITools?.Events) window.UITools = { Events: {} };
-        if (!(event in window.UITools.Events)) {
-            window.UITools.Events[event] = { unique: 0 };
-            window.addEventListener(event, e => {
-                Object.values(window.UITools.Events[event]).forEach(cb => {
-                    if (cb instanceof Function) cb(e);
-                })
-            });
-        }
-
-        callback.UITools = { ListenerID: window.UITools.Events[event].unique };
-        window.UITools.Events[event][window.UITools.Events[event].unique] = callback;
-        window.UITools.Events[event].unique++;
-    }
-
-    removeEvent(event, callback) {
-        if (!(event in window.UITools?.Events)) return;
-        if (!('ListenerID' in callback.UITools)) return;
-
-        delete window.UITools.Events[event][callback.UITools.ListenerID];
-    }
-
-    componentDidMount() {
-        this.elements.forEach(el => {
-            this.animations.animate?.setInitialStyles(el);
-        });
-
-
-        if (this.props.parentLevel < 1 || this.props.noCascade) {
-            this.scrollEventListener = this.onScroll.bind(this);
-            this.addEvent('scroll', this.scrollEventListener);
-
-            if (this.props.onMount) this.play('onMount', { staggerDelay: 0.001 });
-            if (this.props.whileViewport) this.onScroll();
-        }
-    }
-
-    componentWillUnmount() {
-        this.removeEvent('scroll', this.scrollEventListener);
-
-        if (this.props.onUnmount && (this.props.parentLevel < 1 || this.props.noCascade)) this.play('onUnmount', { reverse: true, immediate: true });
-    }
-
-    inViewport() {
-        let entered = true, left = true;
-
-        this.elements.forEach(el => {
-            const { y } = el.getBoundingClientRect();
-            entered = entered && y + el.clientHeight * (1 - this.viewportMargin) < window.innerHeight;
-            left = left && y > window.innerHeight + el.clientHeight * this.viewportMargin;
-        });
-
-        if (!this.elements.length) {
-            this.children.forEach(({ animatable }) => {
-                const [nestedEntered, nestedLeft] = animatable.inViewport();
-                entered = entered && nestedEntered;
-                left = left && nestedLeft;
-            });
-        }
-
-        return [entered, left];
-    }
-
-    async onScroll() {
-        if (Date.now() - this.scrollDelta < 350) return;
-        this.scrollDelta = Date.now();
-
-        let [entered, left] = this.inViewport();
-
-        if (!this.inView && entered) {
-            this.inView = true;
-            if (this.props.whileViewport) this.play('whileViewport');
-        }
-
-        if (this.inView && left) {
-            this.inView = false;
-            if (this.props.whileViewport) this.play('whileViewport', { reverse: true, immediate: true });
-        }
-    }
-
-    async onEnter(e, callback = false) {
-        if (!this.hover) {
-            if (this.props.whileHover) this.play('whileHover');
-            this.hover = true;
-        }
-
-        if (callback) callback(e);
-    }
-
-    async onLeave(e, callback = false) {
-        if (this.hover) {
-            if (this.props.whileHover) this.play('whileHover', { reverse: true });
-            this.hover = false;
-        }
-
-        if (callback) callback(e);
-    }
-
-    async onFocus(e, callback = false) {
-        if (!this.hasFocus) {
-            if (this.props.whileFocus) this.play('whileFocus');
-            this.hasFocus = true;
-        }
-
-        if (callback) callback(e);
-    }
-
-    async onBlur(e, callback = false) {
-        if (this.hasFocus) {
-            if (this.props.whileFocus) this.play('whileFocus', { reverse: true });
-            this.hasFocus = false;
-        }
-
-        if (callback) callback(e);
-    }
-
-    async onClick(e, callback = false) {
-        if (this.props.onClick) this.play('onClick');
-
-        if (callback) callback(e);
-    }
-
-    async play(animationName, { reverse = false, immediate = false, cascade = false, groupAdjust = 0, cascadeDelay = 0, staggerDelay = 0 } = {}) {
-        if (this.props.parentLevel > 0 && !cascade) return;
-
-        let animation = this.animations[animationName];
-        if (!animation) animation = this.animations.animate;
-        if (!animation) return;
-
-        this.elements.forEach((el, i) => {
-            let offset = 'group' in this.props ? this.props.parentLevel - this.props.group : this.level + groupAdjust;
-            cascadeDelay = reverse ? animation.duration : cascadeDelay; // NOT FULLY CORRECT (also take into account reverse staggering)
-            const delay = reverse ? offset * cascadeDelay : (this.props.parentLevel - offset) * cascadeDelay;
-
-            animation.play(el, {
-                delay: this.props.stagger * i + delay + staggerDelay,
-                reverse,
-                immediate
-            });
-        });
-
-        this.children.forEach(({ animatable, staggerIndex = -1 }) => {
-            animatable.play(animationName, {
-                reverse,
-                immediate,
-                cascade: true,
-                staggerDelay: staggerIndex < 0 ? 0 : this.props.stagger * staggerIndex,
-                cascadeDelay: animation.duration,
-                groupAdjust: staggerIndex < 0 ? 0 : 1
-            });
-        });
-    }
-
-    style(inherited = {}) {
-        const styles = {
-            ...inherited,
-            transitionProperty: `transform, opacity, clip-path, border-radius${this.props.scaleCorrection ? ', width, height, left, top' : ''}`,
-            willChange: 'transform'
-        };
-
-        return styles;
-    }
-
-    mergeProperties(own = {}, passed = {}) {
-        const merged = {};
-        merged.initial = this.mergeProperty(passed.initial, own.initial);
-        merged.animate = this.mergeProperty(passed.animate, own.animate);
-
-        merged.onMount = this.mergeProperty(passed.onMount, own.onMount);
-        merged.onUnmount = this.mergeProperty(passed.onUnmount, own.onUnmount);
-        merged.onClick = this.mergeProperty(passed.onClick, own.onClick);
-        merged.whileHover = this.mergeProperty(passed.whileHover, own.whileHover);
-        merged.whileFocus = this.mergeProperty(passed.whileFocus, own.whileFocus);
-        merged.whileViewport = this.mergeProperty(passed.whileViewport, own.whileViewport);
-
-        merged.viewportMargin = this.mergeProperty(passed.viewportMargin, own.viewportMargin);
-        merged.stagger = this.mergeProperty(passed.stagger, own.stagger);
-
-        return merged;
-    }
-
-    mergeProperty(a, b) {
-        if (!a) return b;
-        if (!b) return a;
-
-        if (typeof a === 'object' || typeof b === 'object') return { ...a, ...b };
-
-        return b;
-    }
-
-    deepClone(component, { index = 0, useElements = false, useEvents = false } = {}) {
-        if (!isValidElement(component)) return component;
-
-        let props = {};
-        if (component.type !== Animatable) {
-            if (useElements) props = { style: this.style(component.props?.style), ref: el => this.elements[index] = el };
-
-            if (useEvents && (this.props.parentLevel < 1 || this.props.noCascade)) {
-                props = {
-                    ...props,
-                    onMouseEnter: e => this.onEnter(e, component.props?.onMouseEnter),
-                    onMouseLeave: e => this.onLeave(e, component.props?.onMouseLeave),
-                    onFocus: e => this.onFocus(e, component.props?.onFocus),
-                    onBlur: e => this.onBlur(e, component.props?.onBlur),
-                    onClick: e => this.onClick(e, component.props?.onClick),
-                };
-                useEvents = false;
-            }
-        }
-
-        if (component.type === Animatable && !component.props?.noCascade) {
-            props = {
-                ...props,
-                ...this.mergeProperties(component.props, this.props),
-                parentLevel: this.parentLevel > 0 ? this.parentLevel : this.level,
-                ref: el => this.children[this.children.length] = { animatable: el, staggerIndex: useElements ? index : -1 }
-            };
-        }
-
-        const children = Children.map(component.props.children, (child, i) => this.deepClone(child, { index: i, useEvents }));
-
-        return Object.values(props).length ? cloneElement(component, props, children) : component; // CHECK IF CORRECT
-    }
-
-    render() {
-        this.level = this.countNestedLevels(this.props.children);
-
-        return Children.map(this.props.children, (child, i) => this.deepClone(child, { index: i, useElements: true, useEvents: true }));
-    }
-
-    static defaultProps = {
-        scaleCorrection: false,
-        parentLevel: 0,
-        stagger: 0.1,
-        viewportMargin: 0.25,
-        animate: {}
-    }
-
-}

package/animate.js

@@ -1,43 +0,0 @@
-import { Children, cloneElement, Component, isValidElement } from 'react';
-import Animatable from './animatable';
-import Move from './animations/move';
-import Pop from './animations/pop';
-
-export default class Animate extends Component {
-
-    constructor(props) {
-        super(props);
-
-        this.levels = this.props.levels;
-        this.animations = new Array(this.levels).fill(0).map((_, i) => {
-            return i  < this.props.animations.length ? this.props.animations[i] : this.props.animations[this.props.animations.length - 1];
-        });
-    }
-
-    makeAnimatable(children, level = 1) {
-        if (level < 1 || Children.count(children) < 1) return children;
-
-        const { levels, animations, ...props } = this.props;
-        const animation = this.animations[this.levels - level];
-
-        return <Animatable animation={animation} scaleCorrection={animation.scaleCorrection} {...props}>
-            {Children.map(children, child => {
-                if (!isValidElement(child)) return child;
-
-                return cloneElement(child, {}, this.makeAnimatable(child.props.children, level - 1));
-            })}
-        </Animatable>;
-    }
-
-    render() {
-        return this.makeAnimatable(this.props.children, this.levels);
-    }
-
-    static defaultProps = {
-        levels: 1,
-        stagger: 0.1,
-        viewportMargin: 0.25,
-        animations: [Move, Pop]
-    }
-
-}

package/animation.js

@@ -1,333 +0,0 @@
-import AnimationQueue from './queue';
-
-export default class Animation {
-
-    static initials = {
-        opacity: 1,
-        scale: { x: 1, y: 1 },
-        position: { x: 0, y: 0 },
-        clip: { left: 0, top: 0, right: 0, bottom: 0 },
-        borderRadius: 0,
-        active: { value: true, at: 0 }
-    }
-
-    constructor({ delay = 0, duration = 1, loop = false, interpolate = 'ease', origin = { x: 0.5, y: 0.5 }, scaleCorrection = false, ...properties } = {}, initial = {}) {
-        this.scaleCorrection = scaleCorrection;
-        this.keyframes = this.getKeyframes(properties, initial);
-
-        this.delay = delay;
-        this.duration = duration;
-        this.delta = duration / (this.keyframes.length - 1);
-        this.interpolation = interpolate;
-        this.origin = this.originToStyle(origin);
-
-        this.loop = loop;
-    }
-
-    static from(options, initial = {}, scaleCorrection = false) {
-        if (!options || typeof options === 'boolean') return null;
-
-        return new Animation({ ...options, scaleCorrection }, initial);
-    }
-
-    originToStyle(origin) {
-        let x = 0.5, y = 0.5;
-
-        if (typeof origin === 'object') {
-            x = origin.x;
-            y = origin.y;
-        } else
-            if (typeof origin === 'string') {
-                switch (origin) {
-                    case 'left':
-                        x = 0;
-                        break;
-                    case 'right':
-                        x = 1;
-                        break;
-                    case 'top':
-                        y = 0;
-                        break;
-                    case 'bottom':
-                        y = 1;
-                    case 'center':
-                        break;
-                    default:
-                        x = y = parseFloat(origin);
-                }
-            } else {
-                x = y = origin;
-            }
-
-        return `${x * 100}% ${y * 100}%`;
-    }
-
-    getKeyframes(properties, initial = {}) {
-        for (const key in properties) {
-            let first = key in initial ? initial[key] : Animation.initials[key];
-
-            if (Array.isArray(properties[key])) {
-                properties[key] = properties[key].length > 1 ? properties[key] : [first, ...properties[key]];
-            } else {
-                properties[key] = [first, properties[key]];
-            }
-        }
-
-        const len = Object.values(properties).reduce((len, arr) => arr.length > len ? arr.length : len, 0);
-        let keyframes = new Array(len).fill(0);
-
-        keyframes = keyframes.map((_, i) => {
-            const keyframe = {};
-
-            for (const key in properties) {
-                keyframe[key] = this.interpolateKeyframe(properties[key], i, len);
-            }
-
-            return this.keyframeToStyle(keyframe);
-        });
-
-        return keyframes;
-    }
-
-    interpolate(from, to, n) { // when interpolating pure strings fix!!! (also bools)
-        let unit = typeof from === 'string' ? from.match(/[^0-9\.]*/i) : null;
-        if (typeof to === 'string' && !unit) unit = to.match(/[^0-9\.]*/i);
-
-        from = parseFloat(from);
-        to = parseFloat(to);
-
-        const res = from * (1 - n) + to * n;
-        return unit ? res + unit : res;
-    }
-
-    interpolateKeyframe(property, i, len) {
-        if (!property) return null;
-        if (property.length === len) return property[i];
-
-        const idx = i * ((property.length - 1) / (len - 1));
-        const absIdx = Math.floor(idx);
-
-        let from = property[absIdx];
-        let to = absIdx === property.length - 1 ? null : property[absIdx + 1];
-        if (!to) return from;
-
-        if (typeof from === 'object') {
-            const obj = {};
-            Object.keys(from).forEach(key => {
-                obj[key] = this.interpolate(from[key], to[key], idx - absIdx);
-            });
-
-            return obj;
-        }
-
-        return this.interpolate(from, to, idx - absIdx);
-    }
-
-    propertyToString(property, value, key, unit) {
-        value = value[key];
-        if (typeof value === 'string') return value;
-
-        value = isNaN(value) ? Animation.initials[property][key] : value;
-        return `${value * (unit === '%' ? 100 : 1)}${unit}`;
-    }
-
-    propertyToNumber(property, value, key) {
-        value = value[key];
-        if (typeof value === 'string') {
-            return value.match(/[^0-9\.]*/i) === '%' ? parseFloat(value) / 100 : value;
-        }
-
-        return isNaN(value) ? Animation.initials[property][key] : value;
-    }
-
-    keyframeToStyle(keyframe) {
-        let properties = {
-            transform: ''
-        };
-
-        Object.entries(keyframe).forEach(([key, val]) => {
-            if (val === null || val === undefined) return;
-
-            switch (key) {
-                case 'position':
-                    properties.transform += `translate(${this.propertyToString(key, val, 'x', 'px')}, ${this.propertyToString(key, val, 'y', 'px')}) `;
-                    break;
-                case 'scale':
-                    val = typeof val !== 'object' ? { x: val, y: val } : val;
-
-                    if (this.scaleCorrection) {
-                        properties.width = this.propertyToNumber(key, val, 'x');
-                        properties.height = this.propertyToNumber(key, val, 'y');
-                        break;
-                    }
-
-                    properties.transform += `scale(${this.propertyToString(key, val, 'x', '%')}, ${this.propertyToString(key, val, 'y', '%')}) `;
-                    break;
-                case 'rotation':
-                    properties.transform += `rotate(${parseFloat(val)}deg) `;
-                    break;
-                case 'clip':
-                    const top = this.propertyToString(key, val, 'top', '%'), right = this.propertyToString(key, val, 'right', '%'),
-                        bottom = this.propertyToString(key, val, 'bottom', '%'), left = this.propertyToString(key, val, 'left', '%');
-
-                    properties.clipPath = `inset(${top} ${right} ${bottom} ${left})`;
-                    break;
-                case 'borderRadius':
-                    properties[key] = typeof val === 'string' ? val : val + 'px';
-                break;
-                case 'opacity':
-                case 'active':
-                    properties[key] = val;
-            }
-        });
-
-        if (!properties.transform.length) delete properties.transform;
-        return properties;
-    }
-
-    static setInitial(element) {
-        const {
-            width,
-            height,
-            paddingLeft,
-            paddingRight,
-            paddingTop,
-            paddingBottom,
-            borderRadius,
-            boxSizing
-        } = getComputedStyle(element);
-        const { x, y } = element.getBoundingClientRect();
-
-        if (!('UITools' in element)) element.UITools = {};
-        if (!('queue' in element.UITools)) element.UITools.queue = [];
-        if (!('initialStyles' in element.UITools)) element.UITools.initialStyles = {
-            x,
-            y,
-            includePadding: boxSizing === 'border-box',
-            clientWidth: element.clientWidth,
-            clientHeight: element.clientHeight,
-            width: parseInt(width),
-            height: parseInt(height),
-            paddingLeft: parseInt(paddingLeft),
-            paddingRight: parseInt(paddingRight),
-            paddingTop: parseInt(paddingTop),
-            paddingBottom: parseInt(paddingBottom),
-            borderRadius: parseInt(borderRadius.split(' ')[0])
-        };
-    }
-
-    setInitialStyles(element) {
-        Animation.setInitial(element);
-
-        const keyframe = this.keyframes[0];
-        element.style.transitionDuration = '0s';
-        this.apply(element, keyframe, true);
-    }
-
-    test(scale, total, size, padStart, padEnd, includePadding) {
-        scale = typeof scale === 'string' ? parseInt(scale) / total : scale;
-        size = size - (total - scale * total);
-
-        const pad = padStart + padEnd + (size < 0 ? size : 0);
-        const ratio = padStart / (padStart + padEnd);
-        padStart = includePadding ? scale * padStart : pad * ratio;
-        padEnd = includePadding ? scale * padEnd : pad * (1 - ratio);
-
-        return {
-            size: (size < 0 ? 0 : size) + 'px',
-            padStart: padStart + 'px',
-            padEnd: padEnd + 'px'
-        };
-    }
-
-    apply(element, keyframe, initial = false) {
-        const applyStyles = () => {
-            Object.entries(keyframe).forEach(([key, val]) => {
-                if (key === 'width') {
-                    const { clientWidth, width, paddingLeft, paddingRight, includePadding } = element.UITools.initialStyles;
-                    const { size, padStart, padEnd } = this.test(val, clientWidth, width, paddingLeft, paddingRight, includePadding);
-
-                    element.style.width = size;
-                    element.style.paddingLeft = padStart;
-                    element.style.paddingRight = padEnd;
-                    return;
-                }
-
-                if (key === 'height') {
-                    const { clientHeight, height, paddingTop, paddingBottom, includePadding } = element.UITools.initialStyles;
-                    const { size, padStart, padEnd } = this.test(val, clientHeight, height, paddingTop, paddingBottom, includePadding);
-
-                    element.style.height = size;
-                    element.style.paddingTop = padStart;
-                    element.style.paddingBottom = padEnd;
-                    return;
-                }
-
-                if (key === 'active') return;
-
-                element.style[key] = val;
-            });
-        };
-
-        if ('active' in keyframe) {
-            let when = Object.keys(keyframe.active)[0];
-
-            if (when === 'start' || initial) {
-                element.style.display = keyframe.active[when] ? '' : 'none';
-                initial ? applyStyles() : AnimationQueue.delay(applyStyles, 0.01);
-            } else {
-                AnimationQueue.delay(() => {
-                    element.style.display = keyframe.active[when] ? '' : 'none';
-                }, this.delta);
-                applyStyles();
-            }
-        } else {
-            applyStyles();
-        }
-    }
-
-    start(element, { immediate = false, reverse = false } = {}) {
-        if (element.UITools.animating && !immediate) {
-            element.UITools.queue.push([this, { reverse }]);
-            return;
-        }
-
-        element.style.transitionDuration = `${this.delta}s`;
-        element.style.transitionTimingFunction = this.interpolation;
-        element.style.transformOrigin = this.origin;
-        element.UITools.animating = true;
-        element.UITools.index = 1;
-
-        this.getNext(element, reverse);
-    }
-
-    play(element, { delay = 0, immediate = false, reverse = false } = {}) {
-        if (!element.style) return;
-
-        this.delay || delay ? AnimationQueue.delay(() => this.start(element, { immediate, reverse }), this.delay + delay) : this.start(element, { immediate, reverse });
-    }
-
-    getNext(element, reverse = false) {
-        if (element.UITools.index === this.keyframes.length) {
-            element.UITools.animating = false;
-
-            const [next, options] = element.UITools.queue.shift() || [];
-            if (next) return next.start(element, options);
-
-            if (this.loop) this.start(element, options);
-            return;
-        }
-
-        let idx = element.UITools.index;
-        if (reverse) idx = this.keyframes.length - 1 - idx;
-
-
-        requestAnimationFrame(() => {
-            this.apply(element, this.keyframes[idx]);
-        });
-        element.UITools.index++;
-
-        AnimationQueue.delay(() => this.getNext(element, reverse), this.delta); // cancel this when using immediate
-    }
-
-}

package/animations/fade.js

@@ -1,12 +0,0 @@
-import Animation from '../animation';
-
-export default function Fade(options = {}) {
-    return {
-        scaleCorrection: options.scaleCorrection,
-        use: Fade.use.bind(this, options)
-    };
-}
-
-Fade.use = ({ scaleCorrection = false } = {}) => {
-    return new Animation({ opacity: 1, scaleCorrection, duration: 0.65 }, { opacity: 0 });
-}

package/animations/move.js

@@ -1,23 +0,0 @@
-import Animation from '../animation';
-
-export default function Move(options = {}) {
-    return {
-        scaleCorrection: options.scaleCorrection,
-        use: Move.use.bind(this, options)
-    };
-}
-
-Move.use = ({ direction = 'up', scaleCorrection = false } = {}) => {
-
-    let x = '0px', y = '20px';
-    switch (direction) {
-        case 'down': y = '-20px';
-        break;
-        case 'left': x = '20px', y = '0px';
-        break;
-        case 'right': x = '-20px', y = '0px';
-        break;
-    }
-    
-    return new Animation({ position: { x: '0px', y: '0px' }, opacity: 1, scaleCorrection, duration: 0.5 }, { position: { x, y }, opacity: 0 });
-}

package/animations/pop.js

@@ -1,12 +0,0 @@
-import Animation from '../animation';
-
-export default function Pop(options = {}) {
-    return {
-        scaleCorrection: options.scaleCorrection,
-        use: Pop.use.bind(this, options)
-    };
-}
-
-Pop.use = ({ scaleCorrection = false } = {}) => {
-    return new Animation({ opacity: 1, scale: 1, scaleCorrection, duration: 0.25 }, { opacity: 0, scale: 0.85 });
-}

package/animations/scale.js

@@ -1,22 +0,0 @@
-import Animation from '../animation';
-
-export default function Scale(options = {}) {
-    return {
-        scaleCorrection: options.scaleCorrection,
-        use: Scale.use.bind(this, options)
-    };
-}
-
-Scale.use = ({ direction = 'right', scaleCorrection = false } = {}) => {
-    let x = 0, y = 1, origin = { x: 0, y: 0.5 };
-    switch (direction) {
-        case 'left': origin.x = 1;
-        break;
-        case 'up': x = 1, y = 0, origin = { x: 0, y: 1 };
-        break;
-        case 'down': x = 1, y = 0, origin = { x: 0, y: 0 };
-        break;
-    }
-
-    return new Animation({ scale: { x: 1 }, scaleCorrection, origin, duration: 0.6 }, { scale: { x, y } });
-}

package/animations/wipe.js

@@ -1,13 +0,0 @@
-import Animation from '../animation';
-
-export default function Wipe(options = {}) {
-    return {
-        scaleCorrection: options.scaleCorrection,
-        use: Wipe.use.bind(this, options)
-    };
-}
-
-Wipe.use = ({ direction = 'right', scaleCorrection = false } = {}) => {
-    if (!['left', 'right', 'top', 'bottom'].includes(direction)) direction = 'right';
-    return new Animation({ clip: { [direction]: 0 }, scaleCorrection }, { clip: { [direction]: 1 } });
-}

package/morph.js

@@ -1,112 +0,0 @@
-import Animatable from './animatable';
-import Animation from './animation';
-import AnimationQueue from './queue';
-
-export default class Morph extends Animatable {
-
-    constructor(props) {
-        super(props);
-
-        this.animations.morphs = [];
-    }
-
-    componentDidMount() {
-        const element = this.elements[0];
-        if (!element) return;
-
-        Animation.setInitial(element);
-        element.setAttribute('uitools-morph-id', this.props.id);
-        element.setAttribute('uitools-morph-active', this.props.active);
-        this.self = element;
-        this.createResetAnimation();
-
-        AnimationQueue.delay(() => {
-            const targets = document.querySelectorAll(`[uitools-morph-id="${this.props.id}"]`);
-
-            for (let i = 0; i < targets.length; i++) {
-                if (targets[i] === element) continue;
-
-                this.createMorphAnimation(targets[i], i);
-                if (targets[i].getAttribute('uitools-morph-active') !== 'true') this.animations.transition.setInitialStyles(targets[i]);
-            }
-        }, 0.001);
-    }
-
-    componentDidUpdate() {
-        const active = this.self.getAttribute('uitools-morph-active') === 'true';
-        this.self.setAttribute('uitools-morph-active', this.props.active);
-
-        AnimationQueue.delay(() => {
-            if (this.props.active && !active) {
-                this.animations.transition.setInitialStyles(this.self);
-                this.animations.transition.play(this.self);
-            } else
-                if (!this.props.active && active) {
-
-                    let index = 0;
-                    
-                    const targets = document.querySelectorAll(`[uitools-morph-id="${this.props.id}"]`);
-                    for (let i = 0; i < targets.length; i++) {
-                        if (targets[i] === this.self) continue;
-            
-                        if (targets[i].getAttribute('uitools-morph-active') === 'true') {
-                            index = i;
-                            break;
-                        }
-                    }
-
-                    this.animations.morphs[index].play(this.self);
-                }
-        }, 0.001);
-    }
-
-    createResetAnimation() {
-        const a = this.self.UITools?.initialStyles;
-
-        this.animations.transition = Animation.from({
-            opacity: [0, 0, 1],
-            scale: { x: 1, y: 1 },
-            position: { x: 0, y: 0 },
-            borderRadius: a.borderRadius
-        }, {}, this.scaleCorrection);
-    }
-
-    createMorphAnimation(target, index) {
-        const a = this.self.UITools?.initialStyles;
-        const b = target.UITools?.initialStyles;
-
-        this.animations.morphs[index] = Animation.from({
-            position: [
-                { x: 0, y: 0 },
-                {
-                    x: b.x - a.x + (b.clientWidth - a.clientWidth) / 2,
-                    y: b.y - a.y + (b.clientHeight - a.clientHeight) / 2,
-                },
-                {
-                    x: b.x - a.x + (b.clientWidth - a.clientWidth) / 2,
-                    y: b.y - a.y + (b.clientHeight - a.clientHeight) / 2,
-                }
-            ],
-            scale: [
-                { x: 1, y: 1 },
-                {
-                    x: b.clientWidth / a.clientWidth,
-                    y: b.clientHeight / a.clientHeight,
-                },
-                {
-                    x: b.clientWidth / a.clientWidth,
-                    y: b.clientHeight / a.clientHeight,
-                }
-            ],
-            opacity: [1, 1, 0],
-            borderRadius: [a.borderRadius, b.borderRadius, b.borderRadius]
-        }, {}, this.scaleCorrection);
-    }
-
-    static defaultProps = {
-        id: 0,
-        active: false,
-        scaleCorrection: false
-    }
-
-}

package/queue.js

@@ -1,67 +0,0 @@
-export default class AnimationQueue {
-
-    constructor() {
-        this.queue = [];
-
-        this.tick();
-    }
-
-    static get() {
-        if (!('UITools' in window)) window.UITools = {};
-        if (!('AnimationLoop' in window.UITools)) window.UITools.AnimationQueue = new AnimationQueue();
-
-        return window.UITools.AnimationQueue;
-    }
-
-    async tick() {
-        const tick = Date.now();
-
-        for (let i = 0; i < this.queue.length + 1; i++) {
-            if (this.queue.length === i || this.queue[i].timestamp > tick) {
-                this.queue.splice(0, i);
-                break;
-            }
-
-            this.queue[i].callback();
-        }
-
-        requestAnimationFrame(this.tick.bind(this));
-    }
-
-    search(item) {
-        let l = 0, h = this.queue.length - 1, m, c;
-
-        while (l <= h) {
-            m = (l + h) >>> 1;
-            c = this.queue[m].timestamp - item.timestamp;
-
-            if (c < 0) {
-                l = m + 1;
-            } else
-            if (c > 0) {
-                h = m - 1;
-            } else {
-                return m;
-            }
-        }
-
-        return l;
-    }
-
-    insert(item) {
-        const idx = this.search(item);
-
-        this.queue.splice(idx, 0, item);
-    }
-
-    delay(callback, seconds) {
-        if (!(callback instanceof Function)) return;
-
-        this.insert({ callback, timestamp: Date.now() + seconds * 1000 });
-    }
-
-    static async delay(callback, seconds) {
-        return this.get().delay(callback, seconds);
-    }
-
-}