typingfx/dist/chunk-GVPIQXDT.mjs

Customizable, smooth, and snappy typing animations for React — built for natural, human-like effects with minimal config.

import{a as t,b as S,c as H,g as O}from"./chunk-FWI2MBLV.mjs";import{a as C,b as f}from"./chunk-FC3CEGIS.mjs";import{memo as w,useEffect as A,useMemo as I,useRef as R,useState as D}from"react";import{jsx as y}from"react/jsx-runtime";var k={children:"",steps:[""],...C},x=({children:a,className:d,steps:o,style:v,storeId:L,...T})=>{let[E,u]=D(!0),{componentAnimation:l,delSpeed:g,noCursor:h,noCursorAfterAnimEnd:i,repeat:p,speed:P,paused:m}=f(L)(),c=I(()=>{let e=a?[...o,a]:o;return e.length<2&&e.unshift("",""),S(e,l)},[a,o,l]),s=R(null);return A(()=>{u(!0);let e;return requestAnimationFrame(()=>{if(s.current){e=H(s.current);for(let n=0;n<e[0].length;n++){let r=e[0][n],M=e[0][n+1];r.onanimationend=b=>{b.stopPropagation(),r.style.width=r.style.getPropertyValue("--w"),r.classList.remove(t.type,t.hk),M?M.classList.add(t.type):(O(e,p,i),r.classList.add(t.del))}}requestAnimationFrame(()=>e[0][0].classList.add(t.type)),u(!1)}}),()=>e==null?void 0:e.flat().forEach(n=>n.onanimationend=null)},[c,p,i]),A(()=>{var n;if(m)return(n=s.current)==null||n.classList.add(t.paused),()=>null;let e=()=>{var r;(r=s.current)==null||r.classList[document.visibilityState==="visible"?"remove":"add"](t.paused)};return e(),addEventListener("visibilitychange",e),()=>removeEventListener("visibilitychange",e)},[m]),y("div",{...T,className:[d,t.typeout,E?t.processing:"",h?"":t.cursor].join(" "),ref:s,style:{"--speed":P,"--delSpeed":g,...v},children:c.map((e,n)=>y("div",{className:t.hk,children:e},n))})},_=w(a=>{let{children:d,steps:o,componentAnimation:v,delSpeed:L,noCursor:T,noCursorAfterAnimEnd:E,repeat:u,speed:l,force:g,paused:h,storeId:i,...p}={...k,...a},[P,m]=D(!1),c=f(i)(s=>s.force);return A(()=>{f(i).setState({componentAnimation:v,delSpeed:L,noCursor:T,noCursorAfterAnimEnd:E,repeat:u,speed:l,force:g,paused:h});let s=window.matchMedia("(prefers-reduced-motion: reduce)"),e=()=>m(s.matches);return e(),s.addEventListener("change",e),()=>s.removeEventListener("change",e)},[]),!c&&P?y("div",{...p,children:o[o.length-1]||d||o[0]}):y(x,{...p,children:d,storeId:i,steps:o})},()=>!0);export{_ as a};