react-slot-counter/lib/index.esm.js

Make Your Numbers Pop: Simple and Dynamic Counters for Your UI

'use client';
import n,{memo as e,forwardRef as t,useState as r,useRef as i,useEffect as o,useMemo as u,useImperativeHandle as a,useCallback as l}from"react";var c=function(){return c=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var i in e=arguments[t])Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n},c.apply(this,arguments)};var s="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;var d="index-module_slot_wrap__ZT-DX",f="index-module_slot__DpPgW",m="index-module_separator__7GhtE",v="index-module_numbers__sqlqm",h="index-module_num__j6XH3",p="index-module_top_dummy_list__veRmf";!function(n,e){void 0===e&&(e={});var t=e.insertAt;if(n&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=n:i.appendChild(document.createTextNode(n))}}(".index-module_slot_wrap__ZT-DX {\n  display: inline-block;\n  white-space: nowrap;\n}\n\n.index-module_slot__DpPgW {\n  display: inline-block;\n  overflow: hidden;\n  text-align: center;\n  vertical-align: middle;\n  will-change: transform;\n}\n\n.index-module_separator__7GhtE {\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n}\n\n.index-module_numbers__sqlqm {\n  display: block;\n}\n\n.index-module_num__j6XH3 {\n  display: block;\n}\n\n.index-module_top_dummy_list__veRmf {\n  position: absolute;\n  top: 0;\n  transform: translateY(-100%);\n}\n\n[aria-hidden=true] {\n  user-select: none;\n}");var g=[",","."," "],y=/\u0020/,b=/\u00A0/,_=/\u202F/,A="slot-counter",N="slot-counter-separator",C="slot-counter-item",S="slot-counter-item-numbers",x="slot-counter-item-number",w="slot-counter-item-number-value",E=function(){for(var n=[],e=0;e<arguments.length;e++)n[e]=arguments[e];return n.filter(Boolean).join(" ")},M=function(n,e){for(var t=[],r=n;r<e;r+=1)t.push(r);return t},O=function(n,e){for(var t=[],r=n;r!==e;)t.push(r),10===(r+=1)&&(r=0);return t},j=function(n,e){var t=Math.random()*(e-n);return Math.floor(t+n)},q=function(n){for(var e,t=function(n,e,t){if(t||2===arguments.length)for(var r,i=0,o=e.length;i<o;i++)!r&&i in e||(r||(r=Array.prototype.slice.call(e,0,i)),r[i]=e[i]);return n.concat(r||Array.prototype.slice.call(e))}([],n,!0),r=t.length-1;r>0;r-=1){var i=Math.floor(Math.random()*(r+1));e=[t[i],t[r]],t[r]=e[0],t[i]=e[1]}return t},D=function(n){return"number"==typeof n?n:(Array.isArray(n)?n.join(""):n).replace(/[,.]/g,"")},k=function(n){return"object"!=typeof n&&!Number.isNaN(D(n))},T=function(n){return"object"==typeof n},F=function(n){return!T(n)&&(g.includes(n)||y.test(n)||b.test(n)||_.test(n))};var I=e(t((function(e,t){var l,d,m=e.isNew,g=e.charClassName,y=e.numbersRef,b=e.active,_=e.isChanged,A=e.effectiveDuration,N=e.delay,M=e.duration,O=e.speed,j=e.value,D=e.startValue,k=e.disableStartValue,T=e.dummyList,F=e.hasSequentialDummyList,I=e.hasInfiniteList,L=e.valueClassName,P=e.numberSlotClassName,R=e.numberClassName,W=e.reverse,B=e.sequentialAnimationMode,V=e.useMonospaceWidth,Y=e.maxNumberWidth,H=e.onFontHeightChange,X=e.slotPeek,z=r(!1),G=z[0],Z=z[1],J=r(j),U=J[0],K=J[1],Q=i(),$=i(j),nn=i(null),en=r(0),tn=en[0],rn=en[1],on=r(F?T:q(T)),un=on[0],an=on[1],ln=r(!1),cn=ln[0],sn=ln[1],dn=tn*(T.length+1);s((function(){sn(!0)}),[]),s((function(){var n,e;rn(null!==(e=null===(n=nn.current)||void 0===n?void 0:n.getBoundingClientRect().height)&&void 0!==e?e:0)}),[cn]),o((function(){b?requestAnimationFrame((function(){Z(b)})):Z(b)}),[b]),o((function(){var n=nn.current;if(tn&&n&&"undefined"!=typeof ResizeObserver){var e=new ResizeObserver((function(n){var e=n[0].contentRect.height;Math.abs(tn-e)>1&&(null==H||H(e))}));return e.observe(n),function(){e.disconnect()}}}),[tn,H]),u((function(){k&&(Q.current=$.current)}),[k]),o((function(){G&&(Q.current=$.current,$.current=j,setTimeout((function(){return K(j)}),B?0:A*O*M*1e3/T.length+1e3*N))}),[G,j,A,N,T.length,B,O,M]),o((function(){an(F?T:q(T))}),[T,F]),a(t,(function(){return{refreshStyles:function(){var n,e;Z(!0),rn(null!==(e=null===(n=nn.current)||void 0===n?void 0:n.getBoundingClientRect().height)&&void 0!==e?e:0),requestAnimationFrame((function(){Z(!1)}))}}}));var fn=function(){return un.map((function(e,t){return n.createElement("span",{key:t,className:E(h,R,x),"aria-hidden":"true"},e)}))},mn=W?U:null!=D?D:U;B&&(mn=W?U:null!==(l=null!=D?D:Q.current)&&void 0!==l?l:U,B&&m&&!W&&(mn=""));var vn=W&&null!=D?D:U;B&&(vn=W&&null!==(d=null!=D?D:Q.current)&&void 0!==d?d:U);var hn=u((function(){if(cn)return V?Y:void 0}),[cn,Y,V]),pn=u((function(){if(cn)return X?tn+2*X:tn}),[cn,tn,X]);return n.createElement("span",{className:E(f,g,C),style:c({display:"inline-block",width:hn,height:pn},X&&{paddingTop:X,paddingBottom:X})},n.createElement("span",{ref:y,className:E(v,P,S),style:c({transition:"none",transform:W?"translateY(-".concat(dn,"px)"):"translateY(0px)"},G&&_&&{transform:W?"translateY(0px)":"translateY(-".concat(dn,"px)"),transition:"transform ".concat(A,"s ").concat(N,"s ease-in-out")})},cn?n.createElement(n.Fragment,null,X&&n.createElement("div",{className:p},fn()),n.createElement("span",{className:E(h,R,x),"aria-hidden":"true",style:{height:tn}},mn),fn(),n.createElement("span",{className:E(h,R,L,x,w),ref:nn},vn),I||X?fn():null):n.createElement("span",{className:E(h,R,x),"aria-hidden":"true"},null!=D?D:U)))})));var L=e(t((function(e,t){var c,f,v,h,p,g,y,b,_,S,x=e.value,w=e.startValue,q=e.startValueOnce,L=void 0!==q&&q,P=e.duration,R=void 0===P?.7:P,W=e.speed,B=void 0===W?1.4:W,V=e.delay,Y=e.dummyCharacters,H=e.dummyCharacterCount,X=void 0===H?6:H,z=e.autoAnimationStart,G=void 0===z||z,Z=e.containerClassName,J=e.charClassName,U=e.separatorClassName,K=e.valueClassName,Q=e.numberSlotClassName,$=e.numberClassName,nn=e.animateUnchanged,en=void 0!==nn&&nn,tn=e.hasInfiniteList,rn=void 0!==tn&&tn,on=e.sequentialAnimationMode,un=void 0!==on&&on,an=e.useMonospaceWidth,ln=void 0!==an&&an,cn=e.direction,sn=e.debounceDelay,dn=e.animateOnVisible,fn=e.startFromLastDigit,mn=void 0!==fn&&fn,vn=e.onAnimationStart,hn=e.onAnimationEnd,pn=e.separatorCharacters,gn=e.isSeparatorCharacter,yn=void 0===gn?F:gn,bn=e.slotPeek,_n=function(n,e){var t=r(n),i=t[0],u=t[1];return o((function(){if(0===e)return u(n);var t=setTimeout((function(){u(n)}),e);return function(){clearTimeout(t)}}),[n,e]),i}(x,null!=sn?sn:0),An=u((function(){return function(n){return Array.isArray(n)&&T(n[0])}(_n)?"":"object"==typeof _n?JSON.stringify(_n):_n.toString()}),[_n]),Nn=r(!1),Cn=Nn[0],Sn=Nn[1],xn=i(),wn=i(null),En=i(null),Mn=i(w),On=i([]),jn=u((function(){return"boolean"==typeof dn?dn:"object"==typeof dn||void 0}),[dn]),qn=u((function(){return"object"==typeof dn?dn.rootMargin:void 0}),[dn]),Dn=u((function(){return"object"==typeof dn?dn.triggerOnce:void 0}),[dn]),kn=i(!0),Tn=!jn&&G,Fn=i(null==w||Tn?_n:w),In=i(w),Ln=i(0),Pn=i(0),Rn=r([]),Wn=Rn[0],Bn=Rn[1],Vn=i(),Yn=r(0),Hn=Yn[0],Xn=Yn[1],zn=r(),Gn=zn[0],Zn=zn[1],Jn=i(!1),Un=null!=w&&(!L||Ln.current<1),Kn=null!==(f=null===(c=xn.current)||void 0===c?void 0:c.dummyCharacterCount)&&void 0!==f?f:X,Qn=null!==(h=null===(v=xn.current)||void 0===v?void 0:v.duration)&&void 0!==h?h:R,$n=i({onAnimationStart:vn,onAnimationEnd:hn});$n.current={onAnimationStart:vn,onAnimationEnd:hn};var ne=i(!1),ee=l((function(){var n=En.current;if(n){var e=M(0,10).map((function(e){var t=document.createElement("span");t.className=null!=K?K:"",t.style.position="absolute",t.style.top="0",t.style.left="-9999px",t.style.visibility="hidden",t.textContent=e.toString(),n.appendChild(t);var r=t.getBoundingClientRect().width;return n.removeChild(t),r})),t=Math.max.apply(Math,e);Zn(t)}}),[K]);s((function(){var n;ee(),null===(n=document.fonts)||void 0===n||n.ready.then((function(){ee()}))}),[]),o((function(){Bn(M(0,Kn*R*B-1).map((function(n){if(!Y)return j(0,10);var e=n>=Y.length?j(0,Y.length):n;return Y[e]})))}),[Y,Kn,B,R]),Fn.current!==_n&&Jn.current&&Pn.current>0&&(In.current=Fn.current,Fn.current=_n);var te=Array.isArray(In.current)?In.current:null!==(g=null===(p=In.current)||void 0===p?void 0:p.toString().split(""))&&void 0!==g?g:[],re=Array.isArray(Fn.current)?Fn.current:null!==(b=null===(y=Fn.current)||void 0===y?void 0:y.toString().split(""))&&void 0!==b?b:[],ie=Array.isArray(Mn.current)?Mn.current:null!==(S=null===(_=Mn.current)||void 0===_?void 0:_.toString().split(""))&&void 0!==S?S:[],oe=u((function(){return Array.isArray(_n)?_n:null==_n?void 0:_n.toString().split("")}),[_n]),ue=u((function(){return Array.isArray(w)?w:null==w?void 0:w.toString().split("")}),[w]),ae=te.length!==re.length,le=[];re.forEach((function(n,e){var t=re.length-e-1,r=Un?ie:te;(re[t]!==r[t]||ae||en)&&le.push(t)})),mn||le.reverse();var ce=u((function(){return V||Math.min(.1,Qn/oe.length)}),[Qn,oe.length,V]),se=l((function(){var n,e,t;null===(e=(n=$n.current).onAnimationEnd)||void 0===e||e.call(n),ne.current=!1,null===(t=En.current)||void 0===t||t.removeEventListener("transitionend",se)}),[]),de=l((function(){var n,e,t;Vn.current&&window.cancelAnimationFrame(Vn.current),ne.current&&se(),ne.current=!0,null===(n=En.current)||void 0===n||n.addEventListener("transitionend",se),null===(t=(e=$n.current).onAnimationStart)||void 0===t||t.call(e),Sn(!1),Ln.current=Pn.current,Ln.current+=1,window.requestAnimationFrame((function(){var n;null===(n=En.current)||void 0===n||n.offsetWidth,Vn.current=requestAnimationFrame((function(){Pn.current+=1,Sn(!0)}))}))}),[se]),fe=l((function(n){var e,t,r=Un?w:In.current;if(null==r||!k(r)||!k(_n))return[];var i=r.toString().length,o=_n.toString().length,u=i<o,a=Math.abs(i-o),l=Number(D(r.toString())),c=Number(D(_n.toString())),s=Number(l.toString()[u?-a+n:a+n]||0),d=Number(c.toString()[n]||0);if(d===s)return[];var f=l<c,m=f?O((s+1)%10,d):O((d+1)%10,s);return"bottom-up"!==(null!==(t=null===(e=xn.current)||void 0===e?void 0:e.direction)&&void 0!==t?t:cn)||f?m:m.reverse()}),[Un,_n,w,cn]),me=l((function(){On.current.forEach((function(n){n.refreshStyles()})),ee()}),[ee]);o((function(){(Jn.current||null!=In.current)&&(Jn.current||null==Mn.current)&&(Jn.current||Tn)&&de()}),[An,de,Tn]),o((function(){Tn&&de()}),[Tn,de]),o((function(){requestAnimationFrame((function(){Jn.current=!0}))}),[]),a(t,(function(){return{startAnimation:_e,refreshStyles:me,reload:function(){return Xn((function(n){return n+1}))}}}));var ve=null==w||Tn||0!==Ln.current?oe:ue||[],he=((null==ue?void 0:ue.length)||0)-ve.length,pe=function(n){var e,t=i(n),r=i(t.current),u=n.join(","),a=null===(e=t.current)||void 0===e?void 0:e.join(",");return o((function(){a!==u&&(r.current=(null==a?void 0:a.split(","))||[],t.current=u.split(","))}),[u,a]),{getPrevDependencies:l((function(){return r.current}),[]),setPrevDependenciesToSameAsCurrent:l((function(){r.current=t.current}),[])}}(ve),ge=pe.getPrevDependencies,ye=pe.setPrevDependenciesToSameAsCurrent,be=ve.length-ge().length,_e=l((function(n){null==w||L||(In.current=void 0),xn.current=n,de(),ye()}),[w,L,de,ye]),Ae=u((function(){return function(n,e){var t;return function(){for(var r=[],i=0;i<arguments.length;i++)r[i]=arguments[i];clearTimeout(t),t=setTimeout((function(){n.apply(void 0,r)}),e)}}((function(){me()}),0)}),[me]);o((function(){if(wn.current&&window.IntersectionObserver){var n=new IntersectionObserver((function(n){n[0].isIntersecting&&me()}));return n.observe(wn.current),function(){return n.disconnect()}}}),[me]),o((function(){if(jn&&wn.current&&window.IntersectionObserver){var n=new IntersectionObserver((function(t){t[0].isIntersecting&&kn.current&&(_e(),kn.current=!1,Dn&&(n.disconnect(),e.disconnect()))}),{rootMargin:qn,threshold:1}),e=new IntersectionObserver((function(n){n[0].isIntersecting||(kn.current=!0)}),{threshold:0});return n.observe(wn.current),e.observe(wn.current),function(){n.disconnect(),e.disconnect()}}}),[jn,qn,Dn,_e]);var Ne=function(n){return pn&&"string"==typeof n?pn.includes(n):null!==yn&&yn(n)},Ce=le.filter((function(n){return!Ne(ve[n])})),Se=-1;return n.createElement("span",{key:Hn,ref:wn,className:E(Z,d,A)},ve.map((function(e,t){var r,i,o=le.includes(t),u=(o?Ce.indexOf(t):0)*ce,a=In.current,l=null!=w&&!!L&&Ln.current>1,c=null!=_n&&null!=a&&k(_n)&&k(a)&&D(_n)<D(a);if((null===(r=xn.current)||void 0===r?void 0:r.direction)&&(c="top-down"===(null===(i=xn.current)||void 0===i?void 0:i.direction)),cn&&(c="top-down"===cn),Ne(e))return n.createElement("span",{key:re.length-t-1,className:E(m,U,C,N)},e);var s=un&&(!Tn||Pn.current>1);return Se+=1,n.createElement(I,{key:ve.length-t-1,index:t,isNew:be>0&&t<be,maxNumberWidth:Gn,numbersRef:En,active:Cn,isChanged:o,charClassName:J,effectiveDuration:Qn,delay:u,value:e,startValue:l||null==ue?void 0:ue[t+he],disableStartValue:l,dummyList:s?fe(Se):Wn,hasSequentialDummyList:s,hasInfiniteList:rn,valueClassName:K,numberSlotClassName:Q,numberClassName:$,reverse:c,sequentialAnimationMode:un,useMonospaceWidth:ln,onFontHeightChange:Ae,speed:B,duration:R,slotPeek:bn,ref:function(n){n&&On.current.push(n)}})})))})));export{L as default};
//# sourceMappingURL=index.esm.js.map