tailwind-plugin-typed/dist/index.cjs

A plugin for Tailwind CSS to generate text typing animations.

"use strict";function L(e,t){return{handler:e,config:t}}L.withOptions=function(e,t=()=>({})){function r(a){return{handler:e(a),config:t(a)}}return r.__isOptionsFunction=!0,r};var R=L;function W(e){let t=0;for(let r=0;r<e.length;r++){const a=e.charCodeAt(r);t=(t<<5)-t+a}return(t>>>0).toString(36).padStart(7,"0")}function $(e){return e.reduce((t,r)=>t+r,0)}function _(e){return Object.assign({},...Object.entries(e).flatMap(([t,r])=>typeof r=="object"?Object.entries(_(r)).map(([a,p])=>({[t+(a==="DEFAULT"?"":`-${a}`)]:p})):[{[`${t}`]:r}]))}function l(e,t,r=3){return e===0?"0%":e>=t?"100%":`${(e/t*100).toFixed(r)}%`}const F={delimiter:";",typeLetterDuration:.1,pauseAfterWordDuration:2,deleteLetterDuration:.05,pauseAfterDeletionDuration:1},A="​",P=R.withOptions(e=>({addComponents:t,matchComponents:r,matchUtilities:a,theme:p})=>{const n=Object.assign(F,e),g=p("zIndex")?.__BARE_VALUE__!==void 0;r({typed:i=>{const D=W(i),d=i.replace(/^`/,"").replace(/`$/,"").split(new RegExp(`(?<!\\\\)${n.delimiter}`)).map(o=>o.replaceAll(`\\${n.delimiter}`,n.delimiter)),f=d.join(`${n.delimiter} `),w=d.map(o=>o.length*(n.typeLetterDuration+n.deleteLetterDuration)+n.pauseAfterWordDuration+n.pauseAfterDeletionDuration),u=w.map((o,c)=>$(w.slice(0,c+1))),s=$(w),h=[];d.forEach((o,c)=>{[...o].forEach((H,y)=>{const v=c+1===d.length,O=y+1===o.length,b=(u[c-1]||0)+y*n.typeLetterDuration,j=(u[c-1]||0)+o.length*n.typeLetterDuration+n.pauseAfterWordDuration+(o.length-y)*n.deleteLetterDuration,E=[[l(b,s),l(j,s)].join(),{content:`"${o.slice(0,y+1)}" / "${f}"`}];if(h.push(E),O){const k=u[c]-n.pauseAfterDeletionDuration+n.typeLetterDuration,S=-(+!v*1e-4),T=u[c]+S,C=[[l(k,s),l(T,s)].join(),{content:`"${A}" / "${f}"`}];h.push(C)}})});const m={[`@keyframes tw-typed-typing-${D}`]:{...Object.fromEntries(h)}};return g&&t(m),{"--tw-typed-typing-duration":`${s}s`,"--tw-typed-typing-delay":"0s","&::before":{content:`"${f}"`,whiteSpace:"break-spaces",willChange:"content",animation:`tw-typed-typing-${D} var(--tw-typed-typing-duration) linear var(--tw-typed-typing-delay) infinite`},...g?{}:m}}}),t({".typed-caret":{"--tw-typed-caret-content":`"${A}"`,"--tw-typed-caret-color":"currentcolor","--tw-typed-caret-width":"0.2ch","--tw-typed-caret-space":"0.2ch","--tw-typed-caret-duration":"1s","--tw-typed-caret-delay":"0s","&::after":{content:"var(--tw-typed-caret-content)",paddingRight:"var(--tw-typed-caret-space)",borderRight:"var(--tw-typed-caret-width) solid var(--tw-typed-caret-color)",animation:"tw-typed-caret var(--tw-typed-caret-duration) linear var(--tw-typed-caret-delay) infinite"}},"@keyframes tw-typed-caret":{"0%, 20%, 80%, 100%":{opacity:"1"},"30%, 70%":{opacity:"0"}}}),a({"typed-caret-color":i=>({"--tw-typed-caret-color":i})},{type:["color"],values:_(p("colors"))}),a({"typed-caret-width":i=>({"--tw-typed-caret-width":i})},{values:p("spacing")}),a({"typed-caret-space":i=>({"--tw-typed-caret-space":i})},{values:p("spacing")})});module.exports=P;