motionkit-romjah/dist/index.js

A collection of reusable micro-animations for modern web applications. [Live Storybook demo](https://motionkit-storybook.vercel.app/)

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});class t{constructor(t,e={}){Object.defineProperty(this,"element",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"animation",{enumerable:!0,configurable:!0,writable:!0,value:null}),this.element=t,this.options={duration:300,easing:"ease",delay:0,iterations:1,direction:"normal",fill:"forwards",...e}}createAnimation(t){this.animation=this.element.animate(t,{duration:this.options.duration,easing:this.options.easing,delay:this.options.delay,iterations:this.options.iterations,direction:this.options.direction,fill:this.options.fill}),this.options.onStart&&this.animation.addEventListener("start",this.options.onStart),this.options.onEnd&&this.animation.addEventListener("finish",this.options.onEnd),this.options.onCancel&&this.animation.addEventListener("cancel",this.options.onCancel)}play(){if(!this.animation)throw new Error("No animation created");return this.animation.play()}pause(){this.animation&&this.animation.pause()}resume(){this.animation&&this.animation.play()}cancel(){this.animation&&this.animation.cancel()}finish(){this.animation&&this.animation.finish()}reverse(){this.animation&&this.animation.reverse()}updatePlaybackRate(t){this.animation&&(this.animation.playbackRate=t)}getCurrentTime(){return this.animation?this.animation.currentTime:0}isPlaying(){return!!this.animation&&"running"===this.animation.playState}isPaused(){return!!this.animation&&"paused"===this.animation.playState}isFinished(){return!!this.animation&&"finished"===this.animation.playState}updateOptions(t){this.options={...this.options,...t}}destroy(){this.animation&&(this.options.onStart&&this.animation.removeEventListener("start",this.options.onStart),this.options.onEnd&&this.animation.removeEventListener("finish",this.options.onEnd),this.options.onCancel&&this.animation.removeEventListener("cancel",this.options.onCancel),this.animation.cancel(),this.animation=null)}}class e extends t{constructor(t,e={}){super(t,e),Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"currentState",{enumerable:!0,configurable:!0,writable:!0,value:"initial"}),this.options={duration:300,easing:"ease",delay:0,iterations:1,direction:"normal",fill:"forwards",states:{initial:{opacity:1,transform:"none"},enter:{opacity:1,transform:"translateY(0)"},exit:{opacity:0,transform:"translateY(20px)"}},...e},this.initializeElement()}initializeElement(){this.element.style.transition=`all ${this.options.duration}ms ${this.options.easing}`,this.element.style.willChange="opacity, transform",this.setState("initial")}getStateStyles(t){const e=this.options.states[t];if(!e)throw new Error(`State "${t}" not defined in transition options`);return e}setState(t){if(t===this.currentState)return;const e=this.getStateStyles(t);Object.entries(e).forEach((([t,e])=>{void 0!==e&&(this.element.style[t]=e.toString())})),this.currentState=t}addState(t,e){this.options.states[t]=e}removeState(t){if("initial"===t)throw new Error("Cannot remove initial state");delete this.options.states[t]}getCurrentState(){return this.currentState}getAvailableStates(){return Object.keys(this.options.states)}updateOptions(t){this.options={...this.options,...t},this.element.style.transition=`all ${this.options.duration}ms ${this.options.easing}`}destroy(){this.setState("initial")}static fade(t){return new e(t,{states:{initial:{opacity:1},enter:{opacity:1},exit:{opacity:0}}})}static slide(t){return new e(t,{states:{initial:{transform:"translateX(0)"},enter:{transform:"translateX(0)"},exit:{transform:"translateX(-100%)"}}})}static scale(t){return new e(t,{states:{initial:{transform:"scale(1)"},enter:{transform:"scale(1)"},exit:{transform:"scale(0)"}}})}static flip(t){return new e(t,{states:{initial:{transform:"rotateY(0deg)"},enter:{transform:"rotateY(0deg)"},exit:{transform:"rotateY(180deg)"}}})}fadeIn(){return this.createAnimation([{opacity:0,transform:"scale(0.95)"},{opacity:1,transform:"scale(1)"}]),this.play()}fadeOut(){return this.createAnimation([{opacity:1,transform:"scale(1)"},{opacity:0,transform:"scale(0.95)"}]),this.play()}slideIn(t="left"){let e="";switch(t){case"left":e="translateX(-20px)";break;case"right":e="translateX(20px)";break;case"top":e="translateY(-20px)";break;case"bottom":e="translateY(20px)"}const i=[{opacity:0,transform:e},{opacity:1,transform:"translate(0, 0)"}];return this.createAnimation(i),this.play()}slideOut(t="left"){let e="";switch(t){case"left":e="translateX(-20px)";break;case"right":e="translateX(20px)";break;case"top":e="translateY(-20px)";break;case"bottom":e="translateY(20px)"}const i=[{opacity:1,transform:"translate(0, 0)"},{opacity:0,transform:e}];return this.createAnimation(i),this.play()}scaleIn(){return this.createAnimation([{opacity:0,transform:"scale(0.8)"},{opacity:1,transform:"scale(1)"}]),this.play()}scaleOut(){return this.createAnimation([{opacity:1,transform:"scale(1)"},{opacity:0,transform:"scale(0.8)"}]),this.play()}custom(t,e,i){const s=[{[t]:e},{[t]:i}];return this.createAnimation(s),this.play()}}class i extends t{constructor(t,e={}){super(t,e),Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"isHovered",{enumerable:!0,configurable:!0,writable:!0,value:!1}),this.options={duration:300,easing:"ease",delay:0,iterations:1,direction:"normal",fill:"forwards",scale:1.05,rotate:0,translateX:0,translateY:0,shadow:"0 4px 8px rgba(0, 0, 0, 0.1)",...e},this.initializeElement()}initializeElement(){this.element.style.transition=`all ${this.options.duration}ms ${this.options.easing}`,this.element.style.cursor="pointer",this.element.style.willChange="transform, box-shadow",this.element.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),this.element.addEventListener("mouseleave",this.handleMouseLeave.bind(this))}handleMouseEnter(){this.isHovered=!0,this.applyHoverStyles()}handleMouseLeave(){this.isHovered=!1,this.resetStyles()}applyHoverStyles(){const t=[`scale(${this.options.scale})`,`rotate(${this.options.rotate}deg)`,`translate(${this.options.translateX}px, ${this.options.translateY}px)`].join(" ");this.element.style.transform=t,this.element.style.boxShadow=this.options.shadow||"none"}resetStyles(){this.element.style.transform="none",this.element.style.boxShadow="none"}updateOptions(t){this.options={...this.options,...t},this.element.style.transition=`all ${this.options.duration}ms ${this.options.easing}`,this.isHovered&&this.applyHoverStyles()}destroy(){this.element.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),this.element.removeEventListener("mouseleave",this.handleMouseLeave.bind(this)),this.resetStyles()}static lift(t){return new i(t,{scale:1.05,translateY:-5})}static rotate(t){return new i(t,{rotate:5})}static bounce(t){return new i(t,{translateY:-10,easing:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"})}static glow(t){const e=new i(t,{scale:1.05});return t.style.transition="box-shadow 0.3s ease-in-out",t.addEventListener("mouseenter",(()=>{t.style.boxShadow="0 0 20px rgba(0,0,0,0.2)"})),t.addEventListener("mouseleave",(()=>{t.style.boxShadow="none"})),e}}exports.BaseAnimation=t,exports.Hover=i,exports.Loading=class extends t{constructor(t,e={}){super(t,e),Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"container",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.options={duration:1e3,easing:"linear",delay:0,iterations:1/0,direction:"normal",fill:"none",type:"spinner",color:"#4a90e2",size:40,thickness:3,...e},this.container=this.createContainer(),this.initializeElement()}createContainer(){const t=document.createElement("div");return t.style.display="flex",t.style.alignItems="center",t.style.justifyContent="center",t.style.width=`${this.options.size}px`,t.style.height=`${this.options.size}px`,this.element.appendChild(t),t}initializeElement(){switch(this.options.type){case"spinner":default:this.createSpinner();break;case"dots":this.createDots();break;case"pulse":this.createPulse();break;case"wave":this.createWave()}}createSpinner(){const t=document.createElement("div");t.style.width="100%",t.style.height="100%",t.style.border=`${this.options.thickness}px solid rgba(0, 0, 0, 0.1)`,t.style.borderTopColor=this.options.color||"#4a90e2",t.style.borderRadius="50%",this.container.appendChild(t);this.createAnimation([{transform:"rotate(0deg)"},{transform:"rotate(360deg)"}]),this.play()}createDots(){const t=(this.options.size||40)/4;for(let e=0;e<3;e++){const i=document.createElement("div");i.style.width=`${t}px`,i.style.height=`${t}px`,i.style.backgroundColor=this.options.color||"#4a90e2",i.style.borderRadius="50%",i.style.margin="0 4px",this.container.appendChild(i);const s=[{transform:"translateY(0)",opacity:"0.3"},{transform:"translateY(-100%)",opacity:"1"},{transform:"translateY(0)",opacity:"0.3"}];this.createAnimation(s),this.animation&&(this.animation.startTime=(this.options.delay||0)+e*(this.options.duration||1e3)/3)}}createPulse(){const t=document.createElement("div");t.style.width="100%",t.style.height="100%",t.style.backgroundColor=this.options.color||"#4a90e2",t.style.borderRadius="50%",this.container.appendChild(t);this.createAnimation([{transform:"scale(0.5)",opacity:"0.3"},{transform:"scale(1)",opacity:"1"},{transform:"scale(0.5)",opacity:"0.3"}]),this.play()}createWave(){const t=this.options.thickness||3,e=t,i=Math.floor((this.options.size||40)/(t+e));for(let s=0;s<i;s++){const n=document.createElement("div");n.style.width=`${t}px`,n.style.height="100%",n.style.backgroundColor=this.options.color||"#4a90e2",n.style.margin=`0 ${e/2}px`,this.container.appendChild(n);const a=[{transform:"scaleY(0.4)"},{transform:"scaleY(1)"},{transform:"scaleY(0.4)"}];this.createAnimation(a),this.animation&&(this.animation.startTime=(this.options.delay||0)+s*(this.options.duration||1e3)/i)}}updateOptions(t){this.options={...this.options,...t},this.container.innerHTML="",this.initializeElement()}destroy(){super.destroy(),this.container.remove()}},exports.Notification=class extends t{constructor(t,e={}){super(t,e),Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"container",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"messageElement",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"timer",{enumerable:!0,configurable:!0,writable:!0,value:null}),this.options={duration:300,easing:"ease",delay:0,iterations:1,direction:"normal",fill:"forwards",position:"top-right",type:"info",message:"",autoClose:!0,autoCloseDelay:5e3,...e},this.container=this.createContainer(),this.messageElement=this.createMessageElement(),this.createCloseButton(),this.initializeElement()}createContainer(){const t=document.createElement("div");switch(t.style.position="fixed",t.style.display="flex",t.style.alignItems="center",t.style.padding="12px 20px",t.style.borderRadius="4px",t.style.boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)",t.style.minWidth="300px",t.style.maxWidth="400px",t.style.zIndex="9999",this.options.position){case"top-left":t.style.top="20px",t.style.left="20px";break;case"top-right":default:t.style.top="20px",t.style.right="20px";break;case"bottom-left":t.style.bottom="20px",t.style.left="20px";break;case"bottom-right":t.style.bottom="20px",t.style.right="20px";break;case"top-center":t.style.top="20px",t.style.left="50%",t.style.transform="translateX(-50%)";break;case"bottom-center":t.style.bottom="20px",t.style.left="50%",t.style.transform="translateX(-50%)"}switch(this.options.type){case"success":t.style.backgroundColor="#e8f5e9",t.style.color="#2e7d32",t.style.border="1px solid #a5d6a7";break;case"error":t.style.backgroundColor="#ffebee",t.style.color="#c62828",t.style.border="1px solid #ef9a9a";break;case"warning":t.style.backgroundColor="#fff3e0",t.style.color="#ef6c00",t.style.border="1px solid #ffcc80";break;default:t.style.backgroundColor="#e3f2fd",t.style.color="#1565c0",t.style.border="1px solid #90caf9"}return this.element.appendChild(t),t}createMessageElement(){const t=document.createElement("div");return t.style.flex="1",t.style.marginRight="12px",t.textContent=this.options.message||"",this.container.appendChild(t),t}createCloseButton(){const t=document.createElement("button");t.innerHTML="×",t.style.background="none",t.style.border="none",t.style.color="inherit",t.style.fontSize="20px",t.style.cursor="pointer",t.style.padding="0",t.style.lineHeight="1",t.style.opacity="0.7",t.addEventListener("mouseover",(()=>{t.style.opacity="1"})),t.addEventListener("mouseout",(()=>{t.style.opacity="0.7"})),t.addEventListener("click",(()=>this.close())),this.container.appendChild(t)}initializeElement(){this.createAnimation([{opacity:0,transform:"translateY(-20px)"},{opacity:1,transform:"translateY(0)"}]),this.play(),this.options.autoClose&&(this.timer=window.setTimeout((()=>{this.close()}),this.options.autoCloseDelay))}setMessage(t){this.options.message=t,this.messageElement.textContent=t}close(){this.timer&&(clearTimeout(this.timer),this.timer=null);return this.createAnimation([{opacity:1,transform:"translateY(0)"},{opacity:0,transform:"translateY(-20px)"}]),this.play().then((()=>{this.destroy()}))}destroy(){this.timer&&clearTimeout(this.timer),super.destroy(),this.container.remove()}},exports.States=class extends t{constructor(t,e={}){super(t,e),Object.defineProperty(this,"options",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"icon",{enumerable:!0,configurable:!0,writable:!0,value:null}),Object.defineProperty(this,"message",{enumerable:!0,configurable:!0,writable:!0,value:null}),this.options={duration:300,easing:"ease",delay:0,iterations:1,direction:"normal",fill:"forwards",state:"info",icon:!0,message:"",...e},this.initializeElement()}initializeElement(){this.element.style.position="relative",this.element.style.display="inline-flex",this.element.style.alignItems="center",this.element.style.gap="8px",this.element.style.padding="8px 16px",this.element.style.borderRadius="4px",this.element.style.transition="all 0.3s ease",this.options.icon&&this.createIcon(),this.options.message&&this.createMessage(),this.setState(this.options.state)}createIcon(){this.icon=document.createElement("div"),this.icon.style.display="flex",this.icon.style.alignItems="center",this.icon.style.justifyContent="center",this.icon.style.width="20px",this.icon.style.height="20px",this.element.appendChild(this.icon)}createMessage(){this.message=document.createElement("span"),this.message.textContent=this.options.message||"",this.message.style.fontSize="14px",this.element.appendChild(this.message)}getStateStyles(){return{success:{background:"#e8f5e9",color:"#2e7d32",border:"1px solid #a5d6a7"},error:{background:"#ffebee",color:"#c62828",border:"1px solid #ef9a9a"},warning:{background:"#fff3e0",color:"#ef6c00",border:"1px solid #ffcc80"},info:{background:"#e3f2fd",color:"#1565c0",border:"1px solid #90caf9"},loading:{background:"#f5f5f5",color:"#616161",border:"1px solid #e0e0e0"}}[this.options.state||"info"]}getIconContent(){return{success:"✓",error:"✕",warning:"⚠",info:"ℹ",loading:"⟳"}[this.options.state||"info"]}setState(t){this.options.state=t;const e=this.getStateStyles();Object.assign(this.element.style,{backgroundColor:e.background,color:e.color,border:e.border}),this.icon&&(this.icon.textContent=this.getIconContent(),this.icon.style.animation="loading"===t?"spin 1s linear infinite":"none");this.createAnimation([{opacity:.5,transform:"scale(0.95)"},{opacity:1,transform:"scale(1)"}]),this.play()}setMessage(t){this.options.message=t,this.message?this.message.textContent=t:t&&this.createMessage()}setIcon(t){t&&!this.icon?this.createIcon():!t&&this.icon&&(this.icon.remove(),this.icon=null)}destroy(){super.destroy(),this.icon&&this.icon.remove(),this.message&&this.message.remove()}},exports.Transition=e,exports.easeInCubic=t=>t*t*t,exports.easeInElastic=t=>{const e=2*Math.PI/3;return 0===t?0:1===t?1:-Math.pow(2,10*t-10)*Math.sin((10*t-10.75)*e)},exports.easeInOutCubic=t=>t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1,exports.easeInOutElastic=t=>{const e=2*Math.PI/4.5;return 0===t?0:1===t?1:t<.5?-Math.pow(2,20*t-10)*Math.sin((20*t-11.125)*e)/2:Math.pow(2,-20*t+10)*Math.sin((20*t-11.125)*e)/2+1},exports.easeInOutQuad=t=>t<.5?2*t*t:(4-2*t)*t-1,exports.easeInQuad=t=>t*t,exports.easeOutCubic=t=>--t*t*t+1,exports.easeOutElastic=t=>{const e=2*Math.PI/3;return 0===t?0:1===t?1:Math.pow(2,-10*t)*Math.sin((10*t-.75)*e)+1},exports.easeOutQuad=t=>t*(2-t),exports.getEasingFunction=t=>{switch(t){case"linear":return t=>t;case"ease":case"ease-in-out":return t=>t<.5?2*t*t:(4-2*t)*t-1;case"ease-in":return t=>t*t;case"ease-out":return t=>t*(2-t);default:if(t.startsWith("cubic-bezier(")){const e=t.match(/cubic-bezier\(([^)]+)\)/);if(e&&e[1]){const[t,i,s,n]=e[1].split(",").map(Number);return e=>{const a=3*t,o=3*(s-t)-a,r=1-a-o,l=3*i,c=3*(n-i)-l,h=1-l-c,p=t=>((r*t+o)*t+a)*t,d=t=>(3*r*t+2*o)*t+a;return(t=>((h*t+c)*t+l)*t)((t=>{let e=t;for(let i=0;i<8;i++){const i=p(e)-t;if(Math.abs(i)<1e-6)return e;const s=d(e);if(Math.abs(s)<1e-6)break;e-=i/s}return e})(x))}}}return t=>t}},exports.linear=t=>t;
//# sourceMappingURL=index.js.map