@sth87/shadcn-design-system 0.0.1

package/dist/esm/lib/TextAnimation/TextPressureEffect.js

@@ -0,0 +1,135 @@
+import { jsxs as Q, jsx as w } from "react/jsx-runtime";
+import { useRef as l, useState as x, useEffect as g } from "react";
+const _ = ({
+  text: p = "Compressa",
+  fontFamily: v = "Compressa VF",
+  fontUrl: A = "https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2",
+  width: y = !0,
+  weight: R = !0,
+  italic: F = !0,
+  alpha: $ = !1,
+  flex: Y = !0,
+  stroke: M = !1,
+  scale: C = !1,
+  textColor: E = "#FFFFFF",
+  strokeColor: j = "#FF0000",
+  strokeWidth: q = 2,
+  className: H = "",
+  minFontSize: b = 24
+}) => {
+  const u = l(null), i = l(null), k = l([]), o = l({ x: 0, y: 0 }), c = l({ x: 0, y: 0 }), [N, X] = x(b), [O, L] = x(1), [P, z] = x(1), f = p.split(""), T = (e, n) => {
+    const t = n.x - e.x, r = n.y - e.y;
+    return Math.sqrt(t * t + r * r);
+  };
+  g(() => {
+    const e = (t) => {
+      c.current.x = t.clientX, c.current.y = t.clientY;
+    }, n = (t) => {
+      const r = t.touches[0];
+      c.current.x = r.clientX, c.current.y = r.clientY;
+    };
+    if (window.addEventListener("mousemove", e), window.addEventListener("touchmove", n, { passive: !1 }), u.current) {
+      const { left: t, top: r, width: s, height: a } = u.current.getBoundingClientRect();
+      o.current.x = t + s / 2, o.current.y = r + a / 2, c.current.x = o.current.x, c.current.y = o.current.y;
+    }
+    return () => {
+      window.removeEventListener("mousemove", e), window.removeEventListener("touchmove", n);
+    };
+  }, []);
+  const m = () => {
+    if (!u.current || !i.current) return;
+    const { width: e, height: n } = u.current.getBoundingClientRect();
+    let t = e / (f.length / 2);
+    t = Math.max(t, b), X(t), L(1), z(1), requestAnimationFrame(() => {
+      if (!i.current) return;
+      const r = i.current.getBoundingClientRect();
+      if (C && r.height > 0) {
+        const s = n / r.height;
+        L(s), z(s);
+      }
+    });
+  };
+  return g(() => (m(), window.addEventListener("resize", m), () => window.removeEventListener("resize", m)), [C, p]), g(() => {
+    let e;
+    const n = () => {
+      if (o.current.x += (c.current.x - o.current.x) / 15, o.current.y += (c.current.y - o.current.y) / 15, i.current) {
+        const r = i.current.getBoundingClientRect().width / 2;
+        k.current.forEach((s) => {
+          if (!s) return;
+          const a = s.getBoundingClientRect(), V = {
+            x: a.x + a.width / 2,
+            y: a.y + a.height / 2
+          }, d = T(o.current, V), h = (J, S, B) => {
+            const K = B - Math.abs(B * J / r);
+            return Math.max(S, K + S);
+          }, W = y ? Math.floor(h(d, 5, 200)) : 100, D = R ? Math.floor(h(d, 100, 900)) : 400, G = F ? h(d, 0, 1).toFixed(2) : "0", I = $ ? h(d, 0, 1).toFixed(2) : "1";
+          s.style.opacity = I, s.style.fontVariationSettings = `'wght' ${D}, 'wdth' ${W}, 'ital' ${G}`;
+        });
+      }
+      e = requestAnimationFrame(n);
+    };
+    return n(), () => cancelAnimationFrame(e);
+  }, [y, R, F, $, f.length]), /* @__PURE__ */ Q(
+    "div",
+    {
+      ref: u,
+      className: "relative w-full h-full overflow-hidden bg-transparent",
+      children: [
+        /* @__PURE__ */ w("style", { children: `
+        @font-face {
+          font-family: '${v}';
+          src: url('${A}');
+          font-style: normal;
+        }
+        .stroke span {
+          position: relative;
+          color: ${E};
+        }
+        .stroke span::after {
+          content: attr(data-char);
+          position: absolute;
+          left: 0;
+          top: 0;
+          color: transparent;
+          z-index: -1;
+          -webkit-text-stroke-width: ${q}px;
+          -webkit-text-stroke-color: ${j};
+        }
+      ` }),
+        /* @__PURE__ */ w(
+          "h1",
+          {
+            ref: i,
+            className: `text-pressure-title ${H} ${Y ? "flex justify-between" : ""} ${M ? "stroke" : ""} uppercase text-center`,
+            style: {
+              fontFamily: v,
+              fontSize: N,
+              lineHeight: P,
+              transform: `scale(1, ${O})`,
+              transformOrigin: "center top",
+              margin: 0,
+              fontWeight: 100,
+              color: M ? void 0 : E
+            },
+            children: f.map((e, n) => /* @__PURE__ */ w(
+              "span",
+              {
+                ref: (t) => {
+                  k.current[n] = t;
+                },
+                "data-char": e,
+                className: "inline-block",
+                children: e
+              },
+              n
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  _ as default
+};
+//# sourceMappingURL=TextPressureEffect.js.map

package/dist/esm/lib/TextAnimation/TextPressureEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextPressureEffect.js","sources":["../../../../src/lib/TextAnimation/TextPressureEffect.tsx"],"sourcesContent":["// Component ported from https://codepen.io/JuanFuentes/full/rgXKGQ\nimport { useEffect, useRef, useState } from \"react\";\ninterface TextPressureProps {\n  text?: string;\n  fontFamily?: string;\n  fontUrl?: string;\n  width?: boolean;\n  weight?: boolean;\n  italic?: boolean;\n  alpha?: boolean;\n  flex?: boolean;\n  stroke?: boolean;\n  scale?: boolean;\n  textColor?: string;\n  strokeColor?: string;\n  strokeWidth?: number;\n  className?: string;\n  minFontSize?: number;\n}\n\nconst TextPressure: React.FC<TextPressureProps> = ({\n  text = \"Compressa\",\n  fontFamily = \"Compressa VF\",\n  fontUrl = \"https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2\",\n  width = true,\n  weight = true,\n  italic = true,\n  alpha = false,\n  flex = true,\n  stroke = false,\n  scale = false,\n  textColor = \"#FFFFFF\",\n  strokeColor = \"#FF0000\",\n  strokeWidth = 2,\n  className = \"\",\n  minFontSize = 24,\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const titleRef = useRef<HTMLHeadingElement | null>(null);\n  const spansRef = useRef<(HTMLSpanElement | null)[]>([]);\n  const mouseRef = useRef({ x: 0, y: 0 });\n  const cursorRef = useRef({ x: 0, y: 0 });\n  const [fontSize, setFontSize] = useState(minFontSize);\n  const [scaleY, setScaleY] = useState(1);\n  const [lineHeight, setLineHeight] = useState(1);\n  const chars = text.split(\"\");\n  const dist = (a: { x: number; y: number }, b: { x: number; y: number }) => {\n    const dx = b.x - a.x;\n    const dy = b.y - a.y;\n    return Math.sqrt(dx * dx + dy * dy);\n  };\n\n  useEffect(() => {\n    const handleMouseMove = (e: MouseEvent) => {\n      cursorRef.current.x = e.clientX;\n      cursorRef.current.y = e.clientY;\n    };\n    const handleTouchMove = (e: TouchEvent) => {\n      const t = e.touches[0];\n      cursorRef.current.x = t.clientX;\n      cursorRef.current.y = t.clientY;\n    };\n    window.addEventListener(\"mousemove\", handleMouseMove);\n    window.addEventListener(\"touchmove\", handleTouchMove, { passive: false });\n    if (containerRef.current) {\n      const { left, top, width, height } =\n        containerRef.current.getBoundingClientRect();\n      mouseRef.current.x = left + width / 2;\n      mouseRef.current.y = top + height / 2;\n      cursorRef.current.x = mouseRef.current.x;\n      cursorRef.current.y = mouseRef.current.y;\n    }\n    return () => {\n      window.removeEventListener(\"mousemove\", handleMouseMove);\n      window.removeEventListener(\"touchmove\", handleTouchMove);\n    };\n  }, []);\n\n  const setSize = () => {\n    if (!containerRef.current || !titleRef.current) return;\n    const { width: containerW, height: containerH } =\n      containerRef.current.getBoundingClientRect();\n    let newFontSize = containerW / (chars.length / 2);\n    newFontSize = Math.max(newFontSize, minFontSize);\n    setFontSize(newFontSize);\n    setScaleY(1);\n    setLineHeight(1);\n    requestAnimationFrame(() => {\n      if (!titleRef.current) return;\n      const textRect = titleRef.current.getBoundingClientRect();\n      if (scale && textRect.height > 0) {\n        const yRatio = containerH / textRect.height;\n        setScaleY(yRatio);\n        setLineHeight(yRatio);\n      }\n    });\n  };\n\n  useEffect(() => {\n    setSize();\n    window.addEventListener(\"resize\", setSize);\n    return () => window.removeEventListener(\"resize\", setSize);\n  }, [scale, text]);\n\n  useEffect(() => {\n    let rafId: number;\n    const animate = () => {\n      mouseRef.current.x += (cursorRef.current.x - mouseRef.current.x) / 15;\n      mouseRef.current.y += (cursorRef.current.y - mouseRef.current.y) / 15;\n      if (titleRef.current) {\n        const titleRect = titleRef.current.getBoundingClientRect();\n        const maxDist = titleRect.width / 2;\n        spansRef.current.forEach((span) => {\n          if (!span) return;\n          const rect = span.getBoundingClientRect();\n          const charCenter = {\n            x: rect.x + rect.width / 2,\n            y: rect.y + rect.height / 2,\n          };\n          const d = dist(mouseRef.current, charCenter);\n          const getAttr = (\n            distance: number,\n            minVal: number,\n            maxVal: number,\n          ) => {\n            const val = maxVal - Math.abs((maxVal * distance) / maxDist);\n            return Math.max(minVal, val + minVal);\n          };\n          const wdth = width ? Math.floor(getAttr(d, 5, 200)) : 100;\n          const wght = weight ? Math.floor(getAttr(d, 100, 900)) : 400;\n          const italVal = italic ? getAttr(d, 0, 1).toFixed(2) : \"0\";\n          const alphaVal = alpha ? getAttr(d, 0, 1).toFixed(2) : \"1\";\n          span.style.opacity = alphaVal;\n          span.style.fontVariationSettings = `'wght' ${wght}, 'wdth' ${wdth}, 'ital' ${italVal}`;\n        });\n      }\n      rafId = requestAnimationFrame(animate);\n    };\n    animate();\n    return () => cancelAnimationFrame(rafId);\n  }, [width, weight, italic, alpha, chars.length]);\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"relative w-full h-full overflow-hidden bg-transparent\"\n    >\n      <style>{`\n        @font-face {\n          font-family: '${fontFamily}';\n          src: url('${fontUrl}');\n          font-style: normal;\n        }\n        .stroke span {\n          position: relative;\n          color: ${textColor};\n        }\n        .stroke span::after {\n          content: attr(data-char);\n          position: absolute;\n          left: 0;\n          top: 0;\n          color: transparent;\n          z-index: -1;\n          -webkit-text-stroke-width: ${strokeWidth}px;\n          -webkit-text-stroke-color: ${strokeColor};\n        }\n      `}</style>\n      <h1\n        ref={titleRef}\n        className={`text-pressure-title ${className} ${\n          flex ? \"flex justify-between\" : \"\"\n        } ${stroke ? \"stroke\" : \"\"} uppercase text-center`}\n        style={{\n          fontFamily,\n          fontSize: fontSize,\n          lineHeight,\n          transform: `scale(1, ${scaleY})`,\n          transformOrigin: \"center top\",\n          margin: 0,\n          fontWeight: 100,\n          color: stroke ? undefined : textColor,\n        }}\n      >\n        {chars.map((char, i) => (\n          <span\n            key={i}\n            ref={(el) => {\n              spansRef.current[i] = el;\n            }}\n            data-char={char}\n            className=\"inline-block\"\n          >\n            {char}\n          </span>\n        ))}\n      </h1>\n    </div>\n  );\n};\n\nexport default TextPressure;\n"],"names":["TextPressure","text","fontFamily","fontUrl","width","weight","italic","alpha","flex","stroke","scale","textColor","strokeColor","strokeWidth","className","minFontSize","containerRef","useRef","titleRef","spansRef","mouseRef","cursorRef","fontSize","setFontSize","useState","scaleY","setScaleY","lineHeight","setLineHeight","chars","dist","a","b","dx","dy","useEffect","handleMouseMove","e","handleTouchMove","t","left","top","height","setSize","containerW","containerH","newFontSize","textRect","yRatio","rafId","animate","maxDist","span","rect","charCenter","getAttr","distance","minVal","maxVal","val","wdth","wght","italVal","alphaVal","jsxs","jsx","char","i","el"],"mappings":"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"}

package/dist/esm/lib/TextAnimation/TypingText.js

@@ -0,0 +1,118 @@
+import { jsx as z } from "react/jsx-runtime";
+import { useState as o, useRef as C, useMemo as V, useCallback as W, useEffect as $, createElement as X } from "react";
+import { gsap as F } from "gsap";
+const B = ({
+  text: u,
+  as: G = "div",
+  typingSpeed: l = 50,
+  initialDelay: A = 0,
+  pauseDuration: T = 2e3,
+  deletingSpeed: R = 30,
+  loop: b = !0,
+  className: J = "",
+  showCursor: g = !0,
+  hideCursorWhileTyping: K = !1,
+  cursorCharacter: d = "|",
+  cursorClassName: k = "",
+  cursorBlinkDuration: w = 0.5,
+  textColors: x = [],
+  variableSpeed: i,
+  onSentenceComplete: y,
+  startOnVisible: I = !1,
+  reverseMode: E = !1,
+  ...L
+}) => {
+  const [f, j] = o(""), [c, N] = o(0), [a, H] = o(!1), [t, O] = o(0), [M, P] = o(!I), m = C(null), p = C(null), n = V(
+    () => Array.isArray(u) ? u : [u],
+    [u]
+  ), q = W(() => {
+    if (!i) return l;
+    const { min: e, max: s } = i;
+    return Math.random() * (s - e) + e;
+  }, [i, l]), Q = () => x.length === 0 ? "currentColor" : x[t % x.length];
+  $(() => {
+    if (!I || !p.current) return;
+    const e = new IntersectionObserver(
+      (s) => {
+        s.forEach((h) => {
+          h.isIntersecting && P(!0);
+        });
+      },
+      { threshold: 0.1 }
+    );
+    return e.observe(p.current), () => e.disconnect();
+  }, [I]), $(() => {
+    g && m.current && (F.set(m.current, { opacity: 1 }), F.to(m.current, {
+      opacity: 0,
+      duration: w,
+      repeat: -1,
+      yoyo: !0,
+      ease: "power2.inOut"
+    }));
+  }, [g, w]), $(() => {
+    if (!M) return;
+    let e;
+    const s = n[t], h = E ? s.split("").reverse().join("") : s, v = () => {
+      if (a)
+        if (f === "") {
+          if (H(!1), t === n.length - 1 && !b)
+            return;
+          y && y(n[t], t), O((r) => (r + 1) % n.length), N(0), e = setTimeout(() => {
+          }, T);
+        } else
+          e = setTimeout(() => {
+            j((r) => r.slice(0, -1));
+          }, R);
+      else
+        c < h.length ? e = setTimeout(
+          () => {
+            j(
+              (r) => r + h[c]
+            ), N((r) => r + 1);
+          },
+          i ? q() : l
+        ) : n.length > 1 && (e = setTimeout(() => {
+          H(!0);
+        }, T));
+    };
+    return c === 0 && !a && f === "" ? e = setTimeout(v, A) : v(), () => clearTimeout(e);
+  }, [
+    c,
+    f,
+    a,
+    l,
+    R,
+    T,
+    n,
+    t,
+    b,
+    A,
+    M,
+    E,
+    i,
+    y,
+    q
+  ]);
+  const U = K && (c < n[t].length || a);
+  return X(
+    G,
+    {
+      ref: p,
+      className: `inline-block whitespace-pre-wrap tracking-tight ${J}`,
+      ...L
+    },
+    /* @__PURE__ */ z("span", { className: "inline", style: { color: Q() }, children: f }),
+    g && /* @__PURE__ */ z(
+      "span",
+      {
+        ref: m,
+        className: `inline-block opacity-100 ${U ? "hidden" : ""} ${d === "|" ? `h-5 w-[1px] translate-y-1 bg-foreground ${k}` : `ml-1 ${k}`}`,
+        children: d === "|" ? "" : d
+      }
+    )
+  );
+};
+export {
+  B as default
+};
+//# sourceMappingURL=TypingText.js.map

package/dist/esm/lib/TextAnimation/TypingText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingText.js","sources":["../../../../src/lib/TextAnimation/TypingText.tsx"],"sourcesContent":["\"use client\";\nimport {\n  type ElementType,\n  useEffect,\n  useRef,\n  useState,\n  createElement,\n  useMemo,\n  useCallback,\n} from \"react\";\nimport { gsap } from \"gsap\";\n\ninterface TypingTextProps {\n  className?: string;\n  showCursor?: boolean;\n  hideCursorWhileTyping?: boolean;\n  cursorCharacter?: string | React.ReactNode;\n  cursorBlinkDuration?: number;\n  cursorClassName?: string;\n  text: string | string[];\n  as?: ElementType;\n  typingSpeed?: number;\n  initialDelay?: number;\n  pauseDuration?: number;\n  deletingSpeed?: number;\n  loop?: boolean;\n  textColors?: string[];\n  variableSpeed?: { min: number; max: number };\n  onSentenceComplete?: (sentence: string, index: number) => void;\n  startOnVisible?: boolean;\n  reverseMode?: boolean;\n}\n\nconst TypingText = ({\n  text,\n  as: Component = \"div\",\n  typingSpeed = 50,\n  initialDelay = 0,\n  pauseDuration = 2000,\n  deletingSpeed = 30,\n  loop = true,\n  className = \"\",\n  showCursor = true,\n  hideCursorWhileTyping = false,\n  cursorCharacter = \"|\",\n  cursorClassName = \"\",\n  cursorBlinkDuration = 0.5,\n  textColors = [],\n  variableSpeed,\n  onSentenceComplete,\n  startOnVisible = false,\n  reverseMode = false,\n  ...props\n}: TypingTextProps & React.HTMLAttributes<HTMLElement>) => {\n  const [displayedText, setDisplayedText] = useState(\"\");\n  const [currentCharIndex, setCurrentCharIndex] = useState(0);\n  const [isDeleting, setIsDeleting] = useState(false);\n  const [currentTextIndex, setCurrentTextIndex] = useState(0);\n  const [isVisible, setIsVisible] = useState(!startOnVisible);\n  const cursorRef = useRef<HTMLSpanElement>(null);\n  const containerRef = useRef<HTMLElement>(null);\n  const textArray = useMemo(\n    () => (Array.isArray(text) ? text : [text]),\n    [text],\n  );\n\n  const getRandomSpeed = useCallback(() => {\n    if (!variableSpeed) return typingSpeed;\n    const { min, max } = variableSpeed;\n    return Math.random() * (max - min) + min;\n  }, [variableSpeed, typingSpeed]);\n\n  const getCurrentTextColor = () => {\n    if (textColors.length === 0) return \"currentColor\";\n    return textColors[currentTextIndex % textColors.length];\n  };\n\n  useEffect(() => {\n    if (!startOnVisible || !containerRef.current) return;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (entry.isIntersecting) {\n            setIsVisible(true);\n          }\n        });\n      },\n      { threshold: 0.1 },\n    );\n    observer.observe(containerRef.current);\n    return () => observer.disconnect();\n  }, [startOnVisible]);\n\n  useEffect(() => {\n    if (showCursor && cursorRef.current) {\n      gsap.set(cursorRef.current, { opacity: 1 });\n      gsap.to(cursorRef.current, {\n        opacity: 0,\n        duration: cursorBlinkDuration,\n        repeat: -1,\n        yoyo: true,\n        ease: \"power2.inOut\",\n      });\n    }\n  }, [showCursor, cursorBlinkDuration]);\n\n  useEffect(() => {\n    if (!isVisible) return;\n    let timeout: NodeJS.Timeout;\n    const currentText = textArray[currentTextIndex];\n    const processedText = reverseMode\n      ? currentText.split(\"\").reverse().join(\"\")\n      : currentText;\n    const executeTypingAnimation = () => {\n      if (isDeleting) {\n        if (displayedText === \"\") {\n          setIsDeleting(false);\n          if (currentTextIndex === textArray.length - 1 && !loop) {\n            return;\n          }\n          if (onSentenceComplete) {\n            onSentenceComplete(textArray[currentTextIndex], currentTextIndex);\n          }\n          setCurrentTextIndex((prev) => (prev + 1) % textArray.length);\n          setCurrentCharIndex(0);\n          timeout = setTimeout(() => {}, pauseDuration);\n        } else {\n          timeout = setTimeout(() => {\n            setDisplayedText((prev) => prev.slice(0, -1));\n          }, deletingSpeed);\n        }\n      } else {\n        if (currentCharIndex < processedText.length) {\n          timeout = setTimeout(\n            () => {\n              setDisplayedText(\n                (prev) => prev + processedText[currentCharIndex],\n              );\n              setCurrentCharIndex((prev) => prev + 1);\n            },\n            variableSpeed ? getRandomSpeed() : typingSpeed,\n          );\n        } else if (textArray.length > 1) {\n          timeout = setTimeout(() => {\n            setIsDeleting(true);\n          }, pauseDuration);\n        }\n      }\n    };\n    if (currentCharIndex === 0 && !isDeleting && displayedText === \"\") {\n      timeout = setTimeout(executeTypingAnimation, initialDelay);\n    } else {\n      executeTypingAnimation();\n    }\n    return () => clearTimeout(timeout);\n  }, [\n    currentCharIndex,\n    displayedText,\n    isDeleting,\n    typingSpeed,\n    deletingSpeed,\n    pauseDuration,\n    textArray,\n    currentTextIndex,\n    loop,\n    initialDelay,\n    isVisible,\n    reverseMode,\n    variableSpeed,\n    onSentenceComplete,\n    getRandomSpeed,\n  ]);\n\n  const shouldHideCursor =\n    hideCursorWhileTyping &&\n    (currentCharIndex < textArray[currentTextIndex].length || isDeleting);\n\n  return createElement(\n    Component,\n    {\n      ref: containerRef,\n      className: `inline-block whitespace-pre-wrap tracking-tight ${className}`,\n      ...props,\n    },\n    <span className=\"inline\" style={{ color: getCurrentTextColor() }}>\n      {displayedText}\n    </span>,\n    showCursor && (\n      <span\n        ref={cursorRef}\n        className={`inline-block opacity-100 ${shouldHideCursor ? \"hidden\" : \"\"} ${\n          cursorCharacter === \"|\"\n            ? `h-5 w-[1px] translate-y-1 bg-foreground ${cursorClassName}`\n            : `ml-1 ${cursorClassName}`\n        }`}\n      >\n        {cursorCharacter === \"|\" ? \"\" : cursorCharacter}\n      </span>\n    ),\n  );\n};\n\nexport default TypingText;\n"],"names":["TypingText","text","Component","typingSpeed","initialDelay","pauseDuration","deletingSpeed","loop","className","showCursor","hideCursorWhileTyping","cursorCharacter","cursorClassName","cursorBlinkDuration","textColors","variableSpeed","onSentenceComplete","startOnVisible","reverseMode","props","displayedText","setDisplayedText","useState","currentCharIndex","setCurrentCharIndex","isDeleting","setIsDeleting","currentTextIndex","setCurrentTextIndex","isVisible","setIsVisible","cursorRef","useRef","containerRef","textArray","useMemo","getRandomSpeed","useCallback","min","max","getCurrentTextColor","useEffect","observer","entries","entry","gsap","timeout","currentText","processedText","executeTypingAnimation","prev","shouldHideCursor","createElement","jsx"],"mappings":"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"}

package/dist/esm/lib/TextAnimation/WritingText.js

@@ -0,0 +1,45 @@
+import { jsx as f, jsxs as g } from "react/jsx-runtime";
+import * as i from "react";
+import { useInView as w, motion as h } from "motion/react";
+function I({
+  ref: o,
+  inView: r = !1,
+  inViewMargin: s = "0px",
+  inViewOnce: l = !0,
+  spacing: c = 5,
+  text: n,
+  transition: t = { type: "spring", bounce: 0, duration: 2, delay: 0.5 },
+  ...m
+}) {
+  const e = i.useRef(null);
+  i.useImperativeHandle(
+    o,
+    () => e.current
+  );
+  const p = w(e, {
+    once: l,
+    margin: s
+  }), u = !r || p, y = i.useMemo(() => n.split(" "), [n]);
+  return /* @__PURE__ */ f("span", { ref: e, "data-slot": "writing-text", ...m, children: y.map((d, a) => /* @__PURE__ */ g(
+    h.span,
+    {
+      className: "inline-block will-change-transform will-change-opacity",
+      style: { marginRight: c },
+      initial: { opacity: 0, y: 10 },
+      animate: u ? { opacity: 1, y: 0 } : void 0,
+      transition: {
+        ...t,
+        delay: a * (t?.delay ?? 0)
+      },
+      children: [
+        d,
+        " "
+      ]
+    },
+    a
+  )) });
+}
+export {
+  I as WritingText
+};
+//# sourceMappingURL=WritingText.js.map

package/dist/esm/lib/TextAnimation/WritingText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WritingText.js","sources":["../../../../src/lib/TextAnimation/WritingText.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  motion,\n  useInView,\n  type Transition,\n  type UseInViewOptions,\n} from \"motion/react\";\n\ntype WritingTextProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  transition?: Transition;\n  inView?: boolean;\n  inViewMargin?: UseInViewOptions[\"margin\"];\n  inViewOnce?: boolean;\n  spacing?: number | string;\n  text: string;\n};\n\nfunction WritingText({\n  ref,\n  inView = false,\n  inViewMargin = \"0px\",\n  inViewOnce = true,\n  spacing = 5,\n  text,\n  transition = { type: \"spring\", bounce: 0, duration: 2, delay: 0.5 },\n  ...props\n}: WritingTextProps) {\n  const localRef = React.useRef<HTMLSpanElement>(null);\n  React.useImperativeHandle(\n    ref as any,\n    () => localRef.current as HTMLSpanElement,\n  );\n\n  const inViewResult = useInView(localRef, {\n    once: inViewOnce,\n    margin: inViewMargin,\n  });\n  const isInView = !inView || inViewResult;\n\n  const words = React.useMemo(() => text.split(\" \"), [text]);\n\n  return (\n    <span ref={localRef} data-slot=\"writing-text\" {...(props as any)}>\n      {words.map((word, index) => (\n        <motion.span\n          key={index}\n          className=\"inline-block will-change-transform will-change-opacity\"\n          style={{ marginRight: spacing }}\n          initial={{ opacity: 0, y: 10 }}\n          animate={isInView ? { opacity: 1, y: 0 } : undefined}\n          transition={{\n            ...transition,\n            delay: index * (transition?.delay ?? 0),\n          }}\n        >\n          {word}{\" \"}\n        </motion.span>\n      ))}\n    </span>\n  );\n}\n\nexport { WritingText, type WritingTextProps };\n"],"names":["WritingText","ref","inView","inViewMargin","inViewOnce","spacing","text","transition","props","localRef","React","inViewResult","useInView","isInView","words","jsx","word","index","jsxs","motion"],"mappings":";;;AAmBA,SAASA,EAAY;AAAA,EACnB,KAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AAAA,EACf,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,YAAAC,IAAa,EAAE,MAAM,UAAU,QAAQ,GAAG,UAAU,GAAG,OAAO,IAAA;AAAA,EAC9D,GAAGC;AACL,GAAqB;AACnB,QAAMC,IAAWC,EAAM,OAAwB,IAAI;AACnD,EAAAA,EAAM;AAAA,IACJT;AAAA,IACA,MAAMQ,EAAS;AAAA,EAAA;AAGjB,QAAME,IAAeC,EAAUH,GAAU;AAAA,IACvC,MAAML;AAAA,IACN,QAAQD;AAAA,EAAA,CACT,GACKU,IAAW,CAACX,KAAUS,GAEtBG,IAAQJ,EAAM,QAAQ,MAAMJ,EAAK,MAAM,GAAG,GAAG,CAACA,CAAI,CAAC;AAEzD,SACE,gBAAAS,EAAC,QAAA,EAAK,KAAKN,GAAU,aAAU,gBAAgB,GAAID,GAChD,UAAAM,EAAM,IAAI,CAACE,GAAMC,MAChB,gBAAAC;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MAEC,WAAU;AAAA,MACV,OAAO,EAAE,aAAad,EAAA;AAAA,MACtB,SAAS,EAAE,SAAS,GAAG,GAAG,GAAA;AAAA,MAC1B,SAASQ,IAAW,EAAE,SAAS,GAAG,GAAG,MAAM;AAAA,MAC3C,YAAY;AAAA,QACV,GAAGN;AAAA,QACH,OAAOU,KAASV,GAAY,SAAS;AAAA,MAAA;AAAA,MAGtC,UAAA;AAAA,QAAAS;AAAA,QAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAVFC;AAAA,EAAA,CAYR,GACH;AAEJ;"}