tailwind-plugin-typed/dist/index.js

A plugin for Tailwind CSS to generate text typing animations.

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: 0.1,
  pauseAfterWordDuration: 2,
  deleteLetterDuration: 0.05,
  pauseAfterDeletionDuration: 1
}, A = "​", H = 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((P, 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")
      }
    );
  }
);
export {
  H as default
};