@sth87/shadcn-design-system 0.0.35 → 0.1.0

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

@@ -7,7 +7,7 @@ import "../../packages/ui/src/components/button-group.js";
 import "../../packages/ui/src/components/input.js";
 import "../../packages/ui/src/components/textarea.js";
 import "@radix-ui/react-label";
-import { cn as v } from "../../packages/ui/src/lib/utils.js";
+import { cn as d } from "../../packages/ui/src/lib/utils.js";
 import "../../packages/ui/src/components/select.js";
 import "../../packages/ui/src/components/combobox.js";
 import "@radix-ui/react-tooltip";
@@ -40,23 +40,23 @@ function V({
   wave: i = !1,
   className: l,
   color: a = "var(--color-neutral-500)",
-  shimmeringColor: n = "var(--color-neutral-300)",
-  ...c
+  shimmeringColor: s = "var(--color-neutral-300)",
+  ...n
 }) {
   return /* @__PURE__ */ p(
     m.span,
     {
-      className: v("relative inline-block [perspective:500px]", l),
+      className: d("ds:relative ds:inline-block ds:[perspective:500px]", l),
       style: {
-        "--shimmering-color": n,
+        "--shimmering-color": s,
         "--color": a,
         color: "var(--color)"
       },
-      ...c,
-      children: r?.split("")?.map((s, t) => /* @__PURE__ */ p(
+      ...n,
+      children: r?.split("")?.map((c, t) => /* @__PURE__ */ p(
         m.span,
         {
-          className: "inline-block whitespace-pre [transform-style:preserve-3d]",
+          className: "ds:inline-block ds:whitespace-pre ds:[transform-style:preserve-3d]",
           initial: {
             ...i ? {
               scale: 1,
@@ -82,7 +82,7 @@ function V({
             ease: "easeInOut",
             ...e
           },
-          children: s
+          children: c
         },
         t
       ))

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

@@ -1 +1 @@
-{"version":3,"file":"ShimmeringText.js","sources":["../../../../src/lib/TextAnimation/ShimmeringText.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { type HTMLMotionProps, motion, type Transition } from \"motion/react\";\nimport { cn } from \"@dsui/ui/index\";\n\ntype ShimmeringTextProps = {\n  text: string;\n  duration?: number;\n  transition?: Transition;\n  wave?: boolean;\n  color?: string;\n  shimmeringColor?: string;\n} & Omit<HTMLMotionProps<\"span\">, \"children\">;\n\nfunction ShimmeringText({\n  text,\n  duration = 1,\n  transition,\n  wave = false,\n  className,\n  color = \"var(--color-neutral-500)\",\n  shimmeringColor = \"var(--color-neutral-300)\",\n  ...props\n}: ShimmeringTextProps) {\n  return (\n    <motion.span\n      className={cn(\"relative inline-block [perspective:500px]\", className)}\n      style={\n        {\n          \"--shimmering-color\": shimmeringColor,\n          \"--color\": color,\n          color: \"var(--color)\",\n        } as React.CSSProperties\n      }\n      {...(props as any)}\n    >\n      {text?.split(\"\")?.map((char, i) => (\n        <motion.span\n          key={i}\n          className=\"inline-block whitespace-pre [transform-style:preserve-3d]\"\n          initial={{\n            ...(wave\n              ? {\n                  scale: 1,\n                  rotateY: 0,\n                }\n              : {}),\n            color: \"var(--color)\",\n          }}\n          animate={{\n            ...(wave\n              ? {\n                  x: [0, 5, 0],\n                  y: [0, -5, 0],\n                  scale: [1, 1.1, 1],\n                  rotateY: [0, 15, 0],\n                }\n              : {}),\n            color: [\"var(--color)\", \"var(--shimmering-color)\", \"var(--color)\"],\n          }}\n          transition={{\n            duration,\n            repeat: Infinity,\n            repeatType: \"loop\",\n            repeatDelay: text.length * 0.05,\n            delay: (i * duration) / text.length,\n            ease: \"easeInOut\",\n            ...transition,\n          }}\n        >\n          {char}\n        </motion.span>\n      ))}\n    </motion.span>\n  );\n}\n\nexport { ShimmeringText, type ShimmeringTextProps };\n"],"names":["ShimmeringText","text","duration","transition","wave","className","color","shimmeringColor","props","jsx","motion","cn","char","i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,SAASA,EAAe;AAAA,EACtB,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,GAAwB;AACtB,SACE,gBAAAC;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,WAAWC,EAAG,6CAA6CN,CAAS;AAAA,MACpE,OACE;AAAA,QACE,sBAAsBE;AAAA,QACtB,WAAWD;AAAA,QACX,OAAO;AAAA,MAAA;AAAA,MAGV,GAAIE;AAAA,MAEJ,aAAM,MAAM,EAAE,GAAG,IAAI,CAACI,GAAMC,MAC3B,gBAAAJ;AAAA,QAACC,EAAO;AAAA,QAAP;AAAA,UAEC,WAAU;AAAA,UACV,SAAS;AAAA,YACP,GAAIN,IACA;AAAA,cACE,OAAO;AAAA,cACP,SAAS;AAAA,YAAA,IAEX,CAAA;AAAA,YACJ,OAAO;AAAA,UAAA;AAAA,UAET,SAAS;AAAA,YACP,GAAIA,IACA;AAAA,cACE,GAAG,CAAC,GAAG,GAAG,CAAC;AAAA,cACX,GAAG,CAAC,GAAG,IAAI,CAAC;AAAA,cACZ,OAAO,CAAC,GAAG,KAAK,CAAC;AAAA,cACjB,SAAS,CAAC,GAAG,IAAI,CAAC;AAAA,YAAA,IAEpB,CAAA;AAAA,YACJ,OAAO,CAAC,gBAAgB,2BAA2B,cAAc;AAAA,UAAA;AAAA,UAEnE,YAAY;AAAA,YACV,UAAAF;AAAA,YACA,QAAQ;AAAA,YACR,YAAY;AAAA,YACZ,aAAaD,EAAK,SAAS;AAAA,YAC3B,OAAQY,IAAIX,IAAYD,EAAK;AAAA,YAC7B,MAAM;AAAA,YACN,GAAGE;AAAA,UAAA;AAAA,UAGJ,UAAAS;AAAA,QAAA;AAAA,QAhCIC;AAAA,MAAA,CAkCR;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"ShimmeringText.js","sources":["../../../../src/lib/TextAnimation/ShimmeringText.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { type HTMLMotionProps, motion, type Transition } from \"motion/react\";\nimport { cn } from \"@dsui/ui/index\";\n\ntype ShimmeringTextProps = {\n  text: string;\n  duration?: number;\n  transition?: Transition;\n  wave?: boolean;\n  color?: string;\n  shimmeringColor?: string;\n} & Omit<HTMLMotionProps<\"span\">, \"children\">;\n\nfunction ShimmeringText({\n  text,\n  duration = 1,\n  transition,\n  wave = false,\n  className,\n  color = \"var(--color-neutral-500)\",\n  shimmeringColor = \"var(--color-neutral-300)\",\n  ...props\n}: ShimmeringTextProps) {\n  return (\n    <motion.span\n      className={cn(\"ds:relative ds:inline-block ds:[perspective:500px]\", className)}\n      style={\n        {\n          \"--shimmering-color\": shimmeringColor,\n          \"--color\": color,\n          color: \"var(--color)\",\n        } as React.CSSProperties\n      }\n      {...(props as any)}\n    >\n      {text?.split(\"\")?.map((char, i) => (\n        <motion.span\n          key={i}\n          className=\"ds:inline-block ds:whitespace-pre ds:[transform-style:preserve-3d]\"\n          initial={{\n            ...(wave\n              ? {\n                  scale: 1,\n                  rotateY: 0,\n                }\n              : {}),\n            color: \"var(--color)\",\n          }}\n          animate={{\n            ...(wave\n              ? {\n                  x: [0, 5, 0],\n                  y: [0, -5, 0],\n                  scale: [1, 1.1, 1],\n                  rotateY: [0, 15, 0],\n                }\n              : {}),\n            color: [\"var(--color)\", \"var(--shimmering-color)\", \"var(--color)\"],\n          }}\n          transition={{\n            duration,\n            repeat: Infinity,\n            repeatType: \"loop\",\n            repeatDelay: text.length * 0.05,\n            delay: (i * duration) / text.length,\n            ease: \"easeInOut\",\n            ...transition,\n          }}\n        >\n          {char}\n        </motion.span>\n      ))}\n    </motion.span>\n  );\n}\n\nexport { ShimmeringText, type ShimmeringTextProps };\n"],"names":["ShimmeringText","text","duration","transition","wave","className","color","shimmeringColor","props","jsx","motion","cn","char","i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,SAASA,EAAe;AAAA,EACtB,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,GAAwB;AACtB,SACE,gBAAAC;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,WAAWC,EAAG,sDAAsDN,CAAS;AAAA,MAC7E,OACE;AAAA,QACE,sBAAsBE;AAAA,QACtB,WAAWD;AAAA,QACX,OAAO;AAAA,MAAA;AAAA,MAGV,GAAIE;AAAA,MAEJ,aAAM,MAAM,EAAE,GAAG,IAAI,CAACI,GAAMC,MAC3B,gBAAAJ;AAAA,QAACC,EAAO;AAAA,QAAP;AAAA,UAEC,WAAU;AAAA,UACV,SAAS;AAAA,YACP,GAAIN,IACA;AAAA,cACE,OAAO;AAAA,cACP,SAAS;AAAA,YAAA,IAEX,CAAA;AAAA,YACJ,OAAO;AAAA,UAAA;AAAA,UAET,SAAS;AAAA,YACP,GAAIA,IACA;AAAA,cACE,GAAG,CAAC,GAAG,GAAG,CAAC;AAAA,cACX,GAAG,CAAC,GAAG,IAAI,CAAC;AAAA,cACZ,OAAO,CAAC,GAAG,KAAK,CAAC;AAAA,cACjB,SAAS,CAAC,GAAG,IAAI,CAAC;AAAA,YAAA,IAEpB,CAAA;AAAA,YACJ,OAAO,CAAC,gBAAgB,2BAA2B,cAAc;AAAA,UAAA;AAAA,UAEnE,YAAY;AAAA,YACV,UAAAF;AAAA,YACA,QAAQ;AAAA,YACR,YAAY;AAAA,YACZ,aAAaD,EAAK,SAAS;AAAA,YAC3B,OAAQY,IAAIX,IAAYD,EAAK;AAAA,YAC7B,MAAM;AAAA,YACN,GAAGE;AAAA,UAAA;AAAA,UAGJ,UAAAS;AAAA,QAAA;AAAA,QAhCIC;AAAA,MAAA,CAkCR;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -1,6 +1,6 @@
-import { jsx as c, jsxs as h } from "react/jsx-runtime";
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
 import * as t from "react";
-import { useAnimate as y, stagger as g, motion as l } from "motion/react";
+import { useAnimate as y, stagger as g, motion as c } from "motion/react";
 import "@radix-ui/react-slot";
 import "../../packages/ui/src/components/button.js";
 import "../../packages/ui/src/components/button-group.js";
@@ -34,20 +34,20 @@ import "@radix-ui/react-slider";
 import "../../packages/ui/src/components/tabs.js";
 import "../../packages/ui/src/components/toggle.js";
 function tt({
-  ref: s,
+  ref: l,
   words: i,
   className: f,
   filter: r = !0,
   duration: m = 0.5,
   staggerDelay: p = 0.2,
-  ...u
+  ...d
 }) {
   const e = t.useRef(null);
   t.useImperativeHandle(
-    s,
+    l,
     () => e.current
   );
-  const [o, n] = y(), d = t.useMemo(() => i.split(" "), [i]);
+  const [o, n] = y(), u = t.useMemo(() => i.split(" "), [i]);
   return t.useEffect(() => {
     o.current && n(
       "span",
@@ -60,26 +60,26 @@ function tt({
         delay: g(p)
       }
     );
-  }, [n, m, r, o, p]), /* @__PURE__ */ c(
+  }, [n, m, r, o, p]), /* @__PURE__ */ a(
     "div",
     {
       ref: e,
-      className: b("font-bold", f),
+      className: b("ds:font-bold", f),
       "data-slot": "text-generate-effect",
-      ...u,
-      children: /* @__PURE__ */ c(l.div, { ref: o, children: d.map((a, x) => /* @__PURE__ */ h(
-        l.span,
+      ...d,
+      children: /* @__PURE__ */ a(c.div, { ref: o, children: u.map((s, x) => /* @__PURE__ */ h(
+        c.span,
         {
-          className: "opacity-0 will-change-transform will-change-opacity will-change-filter",
+          className: "ds:opacity-0 ds:will-change-transform ds:will-change-opacity ds:will-change-filter",
           style: {
             filter: r ? "blur(10px)" : "none"
           },
           children: [
-            a,
+            s,
             " "
           ]
         },
-        `${a}-${x}`
+        `${s}-${x}`
       )) })
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"TextGenerateEffect.js","sources":["../../../../src/lib/TextAnimation/TextGenerateEffect.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { motion, stagger, useAnimate } from \"motion/react\";\nimport { cn } from \"@dsui/ui/index\";\n\ntype TextGenerateEffectProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  words: string;\n  filter?: boolean;\n  duration?: number;\n  staggerDelay?: number;\n};\n\nfunction TextGenerateEffect({\n  ref,\n  words,\n  className,\n  filter = true,\n  duration = 0.5,\n  staggerDelay = 0.2,\n  ...props\n}: TextGenerateEffectProps) {\n  const localRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(\n    ref as any,\n    () => localRef.current as HTMLDivElement\n  );\n\n  const [scope, animate] = useAnimate();\n  const wordsArray = React.useMemo(() => words.split(\" \"), [words]);\n\n  React.useEffect(() => {\n    if (scope.current) {\n      animate(\n        \"span\",\n        {\n          opacity: 1,\n          filter: filter ? \"blur(0px)\" : \"none\",\n        },\n        {\n          duration: duration,\n          delay: stagger(staggerDelay),\n        }\n      );\n    }\n  }, [animate, duration, filter, scope, staggerDelay]);\n\n  return (\n    <div\n      ref={localRef}\n      className={cn(\"font-bold\", className)}\n      data-slot=\"text-generate-effect\"\n      {...(props as any)}\n    >\n      <motion.div ref={scope}>\n        {wordsArray.map((word, idx) => (\n          <motion.span\n            key={`${word}-${idx}`}\n            className=\"opacity-0 will-change-transform will-change-opacity will-change-filter\"\n            style={{\n              filter: filter ? \"blur(10px)\" : \"none\",\n            }}\n          >\n            {word}{\" \"}\n          </motion.span>\n        ))}\n      </motion.div>\n    </div>\n  );\n}\n\nexport { TextGenerateEffect, type TextGenerateEffectProps };\n"],"names":["TextGenerateEffect","ref","words","className","filter","duration","staggerDelay","props","localRef","React","scope","animate","useAnimate","wordsArray","stagger","jsx","cn","motion","word","idx","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,SAASA,GAAmB;AAAA,EAC1B,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,GAAGC;AACL,GAA4B;AAC1B,QAAMC,IAAWC,EAAM,OAAuB,IAAI;AAClD,EAAAA,EAAM;AAAA,IACJR;AAAA,IACA,MAAMO,EAAS;AAAA,EAAA;AAGjB,QAAM,CAACE,GAAOC,CAAO,IAAIC,EAAA,GACnBC,IAAaJ,EAAM,QAAQ,MAAMP,EAAM,MAAM,GAAG,GAAG,CAACA,CAAK,CAAC;AAEhE,SAAAO,EAAM,UAAU,MAAM;AACpB,IAAIC,EAAM,WACRC;AAAA,MACE;AAAA,MACA;AAAA,QACE,SAAS;AAAA,QACT,QAAQP,IAAS,cAAc;AAAA,MAAA;AAAA,MAEjC;AAAA,QACE,UAAAC;AAAA,QACA,OAAOS,EAAQR,CAAY;AAAA,MAAA;AAAA,IAC7B;AAAA,EAGN,GAAG,CAACK,GAASN,GAAUD,GAAQM,GAAOJ,CAAY,CAAC,GAGjD,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKP;AAAA,MACL,WAAWQ,EAAG,aAAab,CAAS;AAAA,MACpC,aAAU;AAAA,MACT,GAAII;AAAA,MAEL,UAAA,gBAAAQ,EAACE,EAAO,KAAP,EAAW,KAAKP,GACd,UAAAG,EAAW,IAAI,CAACK,GAAMC,MACrB,gBAAAC;AAAA,QAACH,EAAO;AAAA,QAAP;AAAA,UAEC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,QAAQb,IAAS,eAAe;AAAA,UAAA;AAAA,UAGjC,UAAA;AAAA,YAAAc;AAAA,YAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QANF,GAAGA,CAAI,IAAIC,CAAG;AAAA,MAAA,CAQtB,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"TextGenerateEffect.js","sources":["../../../../src/lib/TextAnimation/TextGenerateEffect.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { motion, stagger, useAnimate } from \"motion/react\";\nimport { cn } from \"@dsui/ui/index\";\n\ntype TextGenerateEffectProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  words: string;\n  filter?: boolean;\n  duration?: number;\n  staggerDelay?: number;\n};\n\nfunction TextGenerateEffect({\n  ref,\n  words,\n  className,\n  filter = true,\n  duration = 0.5,\n  staggerDelay = 0.2,\n  ...props\n}: TextGenerateEffectProps) {\n  const localRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(\n    ref as any,\n    () => localRef.current as HTMLDivElement\n  );\n\n  const [scope, animate] = useAnimate();\n  const wordsArray = React.useMemo(() => words.split(\" \"), [words]);\n\n  React.useEffect(() => {\n    if (scope.current) {\n      animate(\n        \"span\",\n        {\n          opacity: 1,\n          filter: filter ? \"blur(0px)\" : \"none\",\n        },\n        {\n          duration: duration,\n          delay: stagger(staggerDelay),\n        }\n      );\n    }\n  }, [animate, duration, filter, scope, staggerDelay]);\n\n  return (\n    <div\n      ref={localRef}\n      className={cn(\"ds:font-bold\", className)}\n      data-slot=\"text-generate-effect\"\n      {...(props as any)}\n    >\n      <motion.div ref={scope}>\n        {wordsArray.map((word, idx) => (\n          <motion.span\n            key={`${word}-${idx}`}\n            className=\"ds:opacity-0 ds:will-change-transform ds:will-change-opacity ds:will-change-filter\"\n            style={{\n              filter: filter ? \"blur(10px)\" : \"none\",\n            }}\n          >\n            {word}{\" \"}\n          </motion.span>\n        ))}\n      </motion.div>\n    </div>\n  );\n}\n\nexport { TextGenerateEffect, type TextGenerateEffectProps };\n"],"names":["TextGenerateEffect","ref","words","className","filter","duration","staggerDelay","props","localRef","React","scope","animate","useAnimate","wordsArray","stagger","jsx","cn","motion","word","idx","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,SAASA,GAAmB;AAAA,EAC1B,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,GAAGC;AACL,GAA4B;AAC1B,QAAMC,IAAWC,EAAM,OAAuB,IAAI;AAClD,EAAAA,EAAM;AAAA,IACJR;AAAA,IACA,MAAMO,EAAS;AAAA,EAAA;AAGjB,QAAM,CAACE,GAAOC,CAAO,IAAIC,EAAA,GACnBC,IAAaJ,EAAM,QAAQ,MAAMP,EAAM,MAAM,GAAG,GAAG,CAACA,CAAK,CAAC;AAEhE,SAAAO,EAAM,UAAU,MAAM;AACpB,IAAIC,EAAM,WACRC;AAAA,MACE;AAAA,MACA;AAAA,QACE,SAAS;AAAA,QACT,QAAQP,IAAS,cAAc;AAAA,MAAA;AAAA,MAEjC;AAAA,QACE,UAAAC;AAAA,QACA,OAAOS,EAAQR,CAAY;AAAA,MAAA;AAAA,IAC7B;AAAA,EAGN,GAAG,CAACK,GAASN,GAAUD,GAAQM,GAAOJ,CAAY,CAAC,GAGjD,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKP;AAAA,MACL,WAAWQ,EAAG,gBAAgBb,CAAS;AAAA,MACvC,aAAU;AAAA,MACT,GAAII;AAAA,MAEL,UAAA,gBAAAQ,EAACE,EAAO,KAAP,EAAW,KAAKP,GACd,UAAAG,EAAW,IAAI,CAACK,GAAMC,MACrB,gBAAAC;AAAA,QAACH,EAAO;AAAA,QAAP;AAAA,UAEC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,QAAQb,IAAS,eAAe;AAAA,UAAA;AAAA,UAGjC,UAAA;AAAA,YAAAc;AAAA,YAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QANF,GAAGA,CAAI,IAAIC,CAAG;AAAA,MAAA,CAQtB,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1,9 +1,9 @@
 import { jsxs as o, jsx as e, Fragment as u } from "react/jsx-runtime";
 import { useRef as k, useState as i, useEffect as g } from "react";
-import { motion as c } from "motion/react";
+import { motion as d } from "motion/react";
 const C = ({
   text: r,
-  duration: d
+  duration: c
 }) => {
   const n = k(null), [s, f] = i({ x: 0, y: 0 }), [a, l] = i(!1), [h, x] = i({ cx: "50%", cy: "50%" });
   return g(() => {
@@ -25,7 +25,7 @@ const C = ({
       onMouseEnter: () => l(!0),
       onMouseLeave: () => l(!1),
       onMouseMove: (t) => f({ x: t.clientX, y: t.clientY }),
-      className: "select-none",
+      className: "ds:select-none",
       children: [
         /* @__PURE__ */ o("defs", { children: [
           /* @__PURE__ */ e(
@@ -46,14 +46,14 @@ const C = ({
             }
           ),
           /* @__PURE__ */ o(
-            c.radialGradient,
+            d.radialGradient,
             {
               id: "revealMask",
               gradientUnits: "userSpaceOnUse",
               r: "20%",
               initial: { cx: "50%", cy: "50%" },
               animate: h,
-              transition: { duration: d ?? 0, ease: "easeOut" },
+              transition: { duration: c ?? 0, ease: "easeOut" },
               children: [
                 /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "white" }),
                 /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "black" })
@@ -79,19 +79,19 @@ const C = ({
             textAnchor: "middle",
             dominantBaseline: "middle",
             strokeWidth: "0.3",
-            className: `fill-transparent  font-[helvetica] text-7xl font-bold ${a ? "stroke-transparent" : "stroke-gray-400`"}`,
+            className: `ds:fill-transparent  ds:font-[helvetica] ds:text-7xl ds:font-bold ${a ? "stroke-transparent" : "stroke-gray-400`"}`,
             children: r
           }
         ),
         /* @__PURE__ */ e(
-          c.text,
+          d.text,
           {
             x: "50%",
             y: "50%",
             textAnchor: "middle",
             dominantBaseline: "middle",
             strokeWidth: "0.3",
-            className: `fill-transparent font-[helvetica] text-7xl font-bold ${a ? "stroke-transparent" : "stroke-gray-400"}`,
+            className: `ds:fill-transparent ds:font-[helvetica] ds:text-7xl ds:font-bold ${a ? "stroke-transparent" : "stroke-gray-400"}`,
             initial: { strokeDashoffset: 1e3, strokeDasharray: 1e3 },
             animate: {
               strokeDashoffset: 0,
@@ -114,7 +114,7 @@ const C = ({
             stroke: "url(#textGradient)",
             strokeWidth: "0.3",
             mask: "url(#textMask)",
-            className: "fill-transparent font-[helvetica] text-7xl font-bold",
+            className: "ds:fill-transparent ds:font-[helvetica] ds:text-7xl ds:font-bold",
             children: r
           }
         )

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

@@ -1 +1 @@
-{"version":3,"file":"TextHoverEffect.js","sources":["../../../../src/lib/TextAnimation/TextHoverEffect.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef, useEffect, useState } from \"react\";\nimport { motion } from \"motion/react\";\n\nexport const TextHoverEffect = ({\n  text,\n  duration,\n}: {\n  text: string;\n  duration?: number;\n  automatic?: boolean;\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const [cursor, setCursor] = useState({ x: 0, y: 0 });\n  const [hovered, setHovered] = useState(false);\n  const [maskPosition, setMaskPosition] = useState({ cx: \"50%\", cy: \"50%\" });\n\n  useEffect(() => {\n    if (svgRef.current && cursor.x !== null && cursor.y !== null) {\n      const svgRect = svgRef.current.getBoundingClientRect();\n      const cxPercentage = ((cursor.x - svgRect.left) / svgRect.width) * 100;\n      const cyPercentage = ((cursor.y - svgRect.top) / svgRect.height) * 100;\n      setMaskPosition({\n        cx: `${cxPercentage}%`,\n        cy: `${cyPercentage}%`,\n      });\n    }\n  }, [cursor]);\n\n  return (\n    <svg\n      ref={svgRef}\n      width=\"100%\"\n      height=\"100%\"\n      viewBox=\"0 0 300 100\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onMouseMove={(e) => setCursor({ x: e.clientX, y: e.clientY })}\n      className=\"select-none\"\n    >\n      <defs>\n        <linearGradient\n          id=\"textGradient\"\n          gradientUnits=\"userSpaceOnUse\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"25%\"\n        >\n          {hovered && (\n            <>\n              <stop offset=\"0%\" stopColor=\"#eab308\" />\n              <stop offset=\"25%\" stopColor=\"#ef4444\" />\n              <stop offset=\"50%\" stopColor=\"#3b82f6\" />\n              <stop offset=\"75%\" stopColor=\"#06b6d4\" />\n              <stop offset=\"100%\" stopColor=\"#8b5cf6\" />\n            </>\n          )}\n        </linearGradient>\n        <motion.radialGradient\n          id=\"revealMask\"\n          gradientUnits=\"userSpaceOnUse\"\n          r=\"20%\"\n          initial={{ cx: \"50%\", cy: \"50%\" }}\n          animate={maskPosition}\n          transition={{ duration: duration ?? 0, ease: \"easeOut\" }}\n        >\n          <stop offset=\"0%\" stopColor=\"white\" />\n          <stop offset=\"100%\" stopColor=\"black\" />\n        </motion.radialGradient>\n        <mask id=\"textMask\">\n          <rect\n            x=\"0\"\n            y=\"0\"\n            width=\"100%\"\n            height=\"100%\"\n            fill=\"url(#revealMask)\"\n          />\n        </mask>\n      </defs>\n      <text\n        x=\"50%\"\n        y=\"50%\"\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        strokeWidth=\"0.3\"\n        className={`fill-transparent  font-[helvetica] text-7xl font-bold ${hovered ? \"stroke-transparent\" : \"stroke-gray-400`\"}`}\n      >\n        {text}\n      </text>\n      <motion.text\n        x=\"50%\"\n        y=\"50%\"\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        strokeWidth=\"0.3\"\n        className={`fill-transparent font-[helvetica] text-7xl font-bold ${hovered ? \"stroke-transparent\" : \"stroke-gray-400\"}`}\n        initial={{ strokeDashoffset: 1000, strokeDasharray: 1000 }}\n        animate={{\n          strokeDashoffset: 0,\n          strokeDasharray: 1000,\n        }}\n        transition={{\n          duration: 4,\n          ease: \"easeInOut\",\n        }}\n      >\n        {text}\n      </motion.text>\n      <text\n        x=\"50%\"\n        y=\"50%\"\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        stroke=\"url(#textGradient)\"\n        strokeWidth=\"0.3\"\n        mask=\"url(#textMask)\"\n        className=\"fill-transparent font-[helvetica] text-7xl font-bold\"\n      >\n        {text}\n      </text>\n    </svg>\n  );\n};\n"],"names":["TextHoverEffect","text","duration","svgRef","useRef","cursor","setCursor","useState","hovered","setHovered","maskPosition","setMaskPosition","useEffect","svgRect","cxPercentage","cyPercentage","jsxs","e","jsx","Fragment","motion"],"mappings":";;;AAIO,MAAMA,IAAkB,CAAC;AAAA,EAC9B,MAAAC;AAAA,EACA,UAAAC;AACF,MAIM;AACJ,QAAMC,IAASC,EAAsB,IAAI,GACnC,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAE,GAAG,GAAG,GAAG,GAAG,GAC7C,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK,GACtC,CAACG,GAAcC,CAAe,IAAIJ,EAAS,EAAE,IAAI,OAAO,IAAI,OAAO;AAEzE,SAAAK,EAAU,MAAM;AACd,QAAIT,EAAO,WAAWE,EAAO,MAAM,QAAQA,EAAO,MAAM,MAAM;AAC5D,YAAMQ,IAAUV,EAAO,QAAQ,sBAAA,GACzBW,KAAiBT,EAAO,IAAIQ,EAAQ,QAAQA,EAAQ,QAAS,KAC7DE,KAAiBV,EAAO,IAAIQ,EAAQ,OAAOA,EAAQ,SAAU;AACnE,MAAAF,EAAgB;AAAA,QACd,IAAI,GAAGG,CAAY;AAAA,QACnB,IAAI,GAAGC,CAAY;AAAA,MAAA,CACpB;AAAA,IACH;AAAA,EACF,GAAG,CAACV,CAAM,CAAC,GAGT,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKb;AAAA,MACL,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,cAAc,MAAMM,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,aAAa,CAACQ,MAAMX,EAAU,EAAE,GAAGW,EAAE,SAAS,GAAGA,EAAE,SAAS;AAAA,MAC5D,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAD,EAAC,QAAA,EACC,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,eAAc;AAAA,cACd,IAAG;AAAA,cACH,IAAG;AAAA,cACH,GAAE;AAAA,cAED,eACC,gBAAAF,EAAAG,GAAA,EACE,UAAA;AAAA,gBAAA,gBAAAD,EAAC,QAAA,EAAK,QAAO,MAAK,WAAU,WAAU;AAAA,gBACtC,gBAAAA,EAAC,QAAA,EAAK,QAAO,OAAM,WAAU,WAAU;AAAA,gBACvC,gBAAAA,EAAC,QAAA,EAAK,QAAO,OAAM,WAAU,WAAU;AAAA,gBACvC,gBAAAA,EAAC,QAAA,EAAK,QAAO,OAAM,WAAU,WAAU;AAAA,gBACvC,gBAAAA,EAAC,QAAA,EAAK,QAAO,QAAO,WAAU,UAAA,CAAU;AAAA,cAAA,EAAA,CAC1C;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,gBAAAF;AAAA,YAACI,EAAO;AAAA,YAAP;AAAA,cACC,IAAG;AAAA,cACH,eAAc;AAAA,cACd,GAAE;AAAA,cACF,SAAS,EAAE,IAAI,OAAO,IAAI,MAAA;AAAA,cAC1B,SAASV;AAAA,cACT,YAAY,EAAE,UAAUR,KAAY,GAAG,MAAM,UAAA;AAAA,cAE7C,UAAA;AAAA,gBAAA,gBAAAgB,EAAC,QAAA,EAAK,QAAO,MAAK,WAAU,SAAQ;AAAA,gBACpC,gBAAAA,EAAC,QAAA,EAAK,QAAO,QAAO,WAAU,QAAA,CAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAExC,gBAAAA,EAAC,QAAA,EAAK,IAAG,YACP,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,GAAE;AAAA,cACF,OAAM;AAAA,cACN,QAAO;AAAA,cACP,MAAK;AAAA,YAAA;AAAA,UAAA,EACP,CACF;AAAA,QAAA,GACF;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,GAAE;AAAA,YACF,YAAW;AAAA,YACX,kBAAiB;AAAA,YACjB,aAAY;AAAA,YACZ,WAAW,yDAAyDV,IAAU,uBAAuB,kBAAkB;AAAA,YAEtH,UAAAP;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAiB;AAAA,UAACE,EAAO;AAAA,UAAP;AAAA,YACC,GAAE;AAAA,YACF,GAAE;AAAA,YACF,YAAW;AAAA,YACX,kBAAiB;AAAA,YACjB,aAAY;AAAA,YACZ,WAAW,wDAAwDZ,IAAU,uBAAuB,iBAAiB;AAAA,YACrH,SAAS,EAAE,kBAAkB,KAAM,iBAAiB,IAAA;AAAA,YACpD,SAAS;AAAA,cACP,kBAAkB;AAAA,cAClB,iBAAiB;AAAA,YAAA;AAAA,YAEnB,YAAY;AAAA,cACV,UAAU;AAAA,cACV,MAAM;AAAA,YAAA;AAAA,YAGP,UAAAP;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,GAAE;AAAA,YACF,YAAW;AAAA,YACX,kBAAiB;AAAA,YACjB,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,MAAK;AAAA,YACL,WAAU;AAAA,YAET,UAAAjB;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"TextHoverEffect.js","sources":["../../../../src/lib/TextAnimation/TextHoverEffect.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef, useEffect, useState } from \"react\";\nimport { motion } from \"motion/react\";\n\nexport const TextHoverEffect = ({\n  text,\n  duration,\n}: {\n  text: string;\n  duration?: number;\n  automatic?: boolean;\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const [cursor, setCursor] = useState({ x: 0, y: 0 });\n  const [hovered, setHovered] = useState(false);\n  const [maskPosition, setMaskPosition] = useState({ cx: \"50%\", cy: \"50%\" });\n\n  useEffect(() => {\n    if (svgRef.current && cursor.x !== null && cursor.y !== null) {\n      const svgRect = svgRef.current.getBoundingClientRect();\n      const cxPercentage = ((cursor.x - svgRect.left) / svgRect.width) * 100;\n      const cyPercentage = ((cursor.y - svgRect.top) / svgRect.height) * 100;\n      setMaskPosition({\n        cx: `${cxPercentage}%`,\n        cy: `${cyPercentage}%`,\n      });\n    }\n  }, [cursor]);\n\n  return (\n    <svg\n      ref={svgRef}\n      width=\"100%\"\n      height=\"100%\"\n      viewBox=\"0 0 300 100\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onMouseMove={(e) => setCursor({ x: e.clientX, y: e.clientY })}\n      className=\"ds:select-none\"\n    >\n      <defs>\n        <linearGradient\n          id=\"textGradient\"\n          gradientUnits=\"userSpaceOnUse\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"25%\"\n        >\n          {hovered && (\n            <>\n              <stop offset=\"0%\" stopColor=\"#eab308\" />\n              <stop offset=\"25%\" stopColor=\"#ef4444\" />\n              <stop offset=\"50%\" stopColor=\"#3b82f6\" />\n              <stop offset=\"75%\" stopColor=\"#06b6d4\" />\n              <stop offset=\"100%\" stopColor=\"#8b5cf6\" />\n            </>\n          )}\n        </linearGradient>\n        <motion.radialGradient\n          id=\"revealMask\"\n          gradientUnits=\"userSpaceOnUse\"\n          r=\"20%\"\n          initial={{ cx: \"50%\", cy: \"50%\" }}\n          animate={maskPosition}\n          transition={{ duration: duration ?? 0, ease: \"easeOut\" }}\n        >\n          <stop offset=\"0%\" stopColor=\"white\" />\n          <stop offset=\"100%\" stopColor=\"black\" />\n        </motion.radialGradient>\n        <mask id=\"textMask\">\n          <rect\n            x=\"0\"\n            y=\"0\"\n            width=\"100%\"\n            height=\"100%\"\n            fill=\"url(#revealMask)\"\n          />\n        </mask>\n      </defs>\n      <text\n        x=\"50%\"\n        y=\"50%\"\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        strokeWidth=\"0.3\"\n        className={`ds:fill-transparent  ds:font-[helvetica] ds:text-7xl ds:font-bold ${hovered ? \"stroke-transparent\" : \"stroke-gray-400`\"}`}\n      >\n        {text}\n      </text>\n      <motion.text\n        x=\"50%\"\n        y=\"50%\"\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        strokeWidth=\"0.3\"\n        className={`ds:fill-transparent ds:font-[helvetica] ds:text-7xl ds:font-bold ${hovered ? \"stroke-transparent\" : \"stroke-gray-400\"}`}\n        initial={{ strokeDashoffset: 1000, strokeDasharray: 1000 }}\n        animate={{\n          strokeDashoffset: 0,\n          strokeDasharray: 1000,\n        }}\n        transition={{\n          duration: 4,\n          ease: \"easeInOut\",\n        }}\n      >\n        {text}\n      </motion.text>\n      <text\n        x=\"50%\"\n        y=\"50%\"\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        stroke=\"url(#textGradient)\"\n        strokeWidth=\"0.3\"\n        mask=\"url(#textMask)\"\n        className=\"ds:fill-transparent ds:font-[helvetica] ds:text-7xl ds:font-bold\"\n      >\n        {text}\n      </text>\n    </svg>\n  );\n};\n"],"names":["TextHoverEffect","text","duration","svgRef","useRef","cursor","setCursor","useState","hovered","setHovered","maskPosition","setMaskPosition","useEffect","svgRect","cxPercentage","cyPercentage","jsxs","e","jsx","Fragment","motion"],"mappings":"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"}

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

@@ -73,7 +73,7 @@ const _ = ({
     "div",
     {
       ref: u,
-      className: "relative w-full h-full overflow-hidden bg-transparent",
+      className: "ds:relative ds:w-full ds:h-full ds:overflow-hidden ds:bg-transparent",
       children: [
         /* @__PURE__ */ w("style", { children: `
         @font-face {
@@ -100,7 +100,7 @@ const _ = ({
           "h1",
           {
             ref: i,
-            className: `text-pressure-title ${H} ${Y ? "flex justify-between" : ""} ${M ? "stroke" : ""} uppercase text-center`,
+            className: `ds:text-pressure-title ${H} ${Y ? "flex justify-between" : ""} ${M ? "stroke" : ""} ds:uppercase ds:text-center`,
             style: {
               fontFamily: v,
               fontSize: N,
@@ -118,7 +118,7 @@ const _ = ({
                   k.current[n] = t;
                 },
                 "data-char": e,
-                className: "inline-block",
+                className: "ds:inline-block",
                 children: e
               },
               n

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

@@ -1 +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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"}
+{"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=\"ds:relative ds:w-full ds:h-full ds:overflow-hidden ds: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={`ds:text-pressure-title ${className} ${flex ? \"flex justify-between\" : \"\"} ${stroke ? \"stroke\" : \"\"} ds:uppercase ds: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=\"ds: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

@@ -6,13 +6,13 @@ const B = ({
   as: G = "div",
   typingSpeed: l = 50,
   initialDelay: A = 0,
-  pauseDuration: T = 2e3,
+  pauseDuration: h = 2e3,
   deletingSpeed: R = 30,
   loop: b = !0,
   className: J = "",
-  showCursor: g = !0,
+  showCursor: T = !0,
   hideCursorWhileTyping: K = !1,
-  cursorCharacter: d = "|",
+  cursorCharacter: g = "|",
   cursorClassName: k = "",
   cursorBlinkDuration: w = 0.5,
   textColors: x = [],
@@ -34,46 +34,46 @@ const B = ({
     if (!I || !p.current) return;
     const e = new IntersectionObserver(
       (s) => {
-        s.forEach((h) => {
-          h.isIntersecting && P(!0);
+        s.forEach((d) => {
+          d.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, {
+    T && 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]), $(() => {
+  }, [T, w]), $(() => {
     if (!M) return;
     let e;
-    const s = n[t], h = E ? s.split("").reverse().join("") : s, v = () => {
+    const s = n[t], d = 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);
+          }, h);
         } else
           e = setTimeout(() => {
             j((r) => r.slice(0, -1));
           }, R);
       else
-        c < h.length ? e = setTimeout(
+        c < d.length ? e = setTimeout(
           () => {
             j(
-              (r) => r + h[c]
+              (r) => r + d[c]
             ), N((r) => r + 1);
           },
           i ? q() : l
         ) : n.length > 1 && (e = setTimeout(() => {
           H(!0);
-        }, T));
+        }, h));
     };
     return c === 0 && !a && f === "" ? e = setTimeout(v, A) : v(), () => clearTimeout(e);
   }, [
@@ -82,7 +82,7 @@ const B = ({
     a,
     l,
     R,
-    T,
+    h,
     n,
     t,
     b,
@@ -101,13 +101,13 @@ const B = ({
       className: `inline-block whitespace-pre-wrap tracking-tight ${J}`,
       ...L
     },
-    /* @__PURE__ */ z("span", { className: "inline", style: { color: Q() }, children: f }),
-    g && /* @__PURE__ */ z(
+    /* @__PURE__ */ z("span", { className: "ds:inline", style: { color: Q() }, children: f }),
+    T && /* @__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
+        className: `ds:inline-block ds:opacity-100 ${U ? "hidden" : ""} ${g === "|" ? `h-5 w-[1px] translate-y-1 bg-foreground ${k}` : `ml-1 ${k}`}`,
+        children: g === "|" ? "" : g
       }
     )
   );

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

@@ -1 +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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"}
+{"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=\"ds:inline\" style={{ color: getCurrentTextColor() }}>\n      {displayedText}\n    </span>,\n    showCursor && (\n      <span\n        ref={cursorRef}\n        className={`ds:inline-block ds:opacity-100 ${shouldHideCursor ? \"hidden\" : \"\"} ${cursorCharacter === \"|\"\n                    ? `h-5 w-[1px] translate-y-1 bg-foreground ${cursorClassName}`\n                    : `ml-1 ${cursorClassName}`}`}\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

@@ -2,9 +2,9 @@ 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",
+  ref: s,
+  inView: o = !1,
+  inViewMargin: r = "0px",
   inViewOnce: l = !0,
   spacing: c = 5,
   text: n,
@@ -13,26 +13,26 @@ function I({
 }) {
   const e = i.useRef(null);
   i.useImperativeHandle(
-    o,
+    s,
     () => 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(
+    margin: r
+  }), d = !o || p, u = i.useMemo(() => n.split(" "), [n]);
+  return /* @__PURE__ */ f("span", { ref: e, "data-slot": "writing-text", ...m, children: u.map((y, a) => /* @__PURE__ */ g(
     h.span,
     {
-      className: "inline-block will-change-transform will-change-opacity",
+      className: "ds:inline-block ds:will-change-transform ds:will-change-opacity",
       style: { marginRight: c },
       initial: { opacity: 0, y: 10 },
-      animate: u ? { opacity: 1, y: 0 } : void 0,
+      animate: d ? { opacity: 1, y: 0 } : void 0,
       transition: {
         ...t,
         delay: a * (t?.delay ?? 0)
       },
       children: [
-        d,
+        y,
         " "
       ]
     },

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

@@ -1 +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;"}
+{"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=\"ds:inline-block ds:will-change-transform ds: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;"}