@sth87/shadcn-design-system 0.0.1

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

@@ -0,0 +1,54 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import "react";
+import { motion as r } from "motion/react";
+import { cn as m } from "@dsui/ui/index";
+function f({
+  text: e,
+  className: i,
+  gradient: o = "linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)",
+  neon: s = !1,
+  transition: t = { duration: 3, repeat: 1 / 0, ease: "linear" },
+  ...l
+}) {
+  const a = {
+    backgroundImage: o,
+    backgroundClip: "text",
+    WebkitBackgroundClip: "text",
+    backgroundSize: "200% 100%",
+    color: "transparent"
+  };
+  return /* @__PURE__ */ c(
+    "span",
+    {
+      "data-slot": "gradient-text",
+      className: m("relative inline-block", i),
+      ...l,
+      children: [
+        /* @__PURE__ */ n(
+          r.span,
+          {
+            className: "m-0 text-transparent",
+            style: a,
+            animate: { backgroundPosition: ["0% 0%", "200% 0%"] },
+            transition: t,
+            children: e
+          }
+        ),
+        s && /* @__PURE__ */ n(
+          r.span,
+          {
+            className: "m-0 absolute top-0 left-0 text-transparent blur-sm mix-blend-plus-lighter",
+            style: a,
+            animate: { backgroundPosition: ["0% 0%", "200% 0%"] },
+            transition: t,
+            children: e
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  f as GradientText
+};
+//# sourceMappingURL=GradientText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GradientText.js","sources":["../../../../src/lib/TextAnimation/GradientText.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { motion, type Transition } from \"motion/react\";\nimport { cn } from \"@dsui/ui/index\";\n\ntype GradientTextProps = React.ComponentProps<\"span\"> & {\n  text: string;\n  gradient?: string;\n  neon?: boolean;\n  transition?: Transition;\n};\n\nfunction GradientText({\n  text,\n  className,\n  gradient = \"linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)\",\n  neon = false,\n  transition = { duration: 3, repeat: Infinity, ease: \"linear\" },\n  ...props\n}: GradientTextProps) {\n  const baseStyle: React.CSSProperties = {\n    backgroundImage: gradient,\n    backgroundClip: \"text\",\n    WebkitBackgroundClip: \"text\",\n    backgroundSize: \"200% 100%\",\n    color: \"transparent\",\n  };\n\n  return (\n    <span\n      data-slot=\"gradient-text\"\n      className={cn(\"relative inline-block\", className)}\n      {...(props as any)}\n    >\n      <motion.span\n        className=\"m-0 text-transparent\"\n        style={baseStyle}\n        animate={{ backgroundPosition: [\"0% 0%\", \"200% 0%\"] }}\n        transition={transition}\n      >\n        {text}\n      </motion.span>\n\n      {neon && (\n        <motion.span\n          className=\"m-0 absolute top-0 left-0 text-transparent blur-sm mix-blend-plus-lighter\"\n          style={baseStyle}\n          animate={{ backgroundPosition: [\"0% 0%\", \"200% 0%\"] }}\n          transition={transition}\n        >\n          {text}\n        </motion.span>\n      )}\n    </span>\n  );\n}\n\nexport { GradientText, type GradientTextProps };\n"],"names":["GradientText","text","className","gradient","neon","transition","props","baseStyle","jsxs","cn","jsx","motion"],"mappings":";;;;AAaA,SAASA,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAa,EAAE,UAAU,GAAG,QAAQ,OAAU,MAAM,SAAA;AAAA,EACpD,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAiC;AAAA,IACrC,iBAAiBJ;AAAA,IACjB,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,IAChB,OAAO;AAAA,EAAA;AAGT,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,yBAAyBP,CAAS;AAAA,MAC/C,GAAII;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACC,EAAO;AAAA,UAAP;AAAA,YACC,WAAU;AAAA,YACV,OAAOJ;AAAA,YACP,SAAS,EAAE,oBAAoB,CAAC,SAAS,SAAS,EAAA;AAAA,YAClD,YAAAF;AAAA,YAEC,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFG,KACC,gBAAAM;AAAA,UAACC,EAAO;AAAA,UAAP;AAAA,YACC,WAAU;AAAA,YACV,OAAOJ;AAAA,YACP,SAAS,EAAE,oBAAoB,CAAC,SAAS,SAAS,EAAA;AAAA,YAClD,YAAAF;AAAA,YAEC,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1,70 @@
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import * as s from "react";
+import { useInView as y, motion as d } from "motion/react";
+const p = {
+  initial: { rotateX: 0 },
+  animate: { rotateX: 90 }
+}, u = {
+  initial: { rotateX: 90 },
+  animate: { rotateX: 0 }
+}, o = (e) => e === " " ? " " : e;
+function k({
+  ref: e,
+  transition: a = { duration: 0.5, delay: 0.1, ease: "easeOut" },
+  inView: f = !1,
+  inViewMargin: N = "0px",
+  inViewOnce: b = !0,
+  text: n,
+  ...h
+}) {
+  const r = s.useRef(null);
+  s.useImperativeHandle(e, () => r.current);
+  const I = y(r, {
+    once: b,
+    margin: N
+  }), c = !f || I, v = s.useMemo(() => n.split(""), [n]);
+  return /* @__PURE__ */ m("span", { "data-slot": "rolling-text", ...h, ref: e, children: [
+    v.map((t, l) => /* @__PURE__ */ m(
+      "span",
+      {
+        className: "relative inline-block perspective-[9999999px] transform-3d w-auto",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ i(
+            d.span,
+            {
+              className: "absolute inline-block backface-hidden origin-[50%_25%]",
+              initial: p.initial,
+              animate: c ? p.animate : void 0,
+              transition: {
+                ...a,
+                delay: l * (a?.delay ?? 0)
+              },
+              children: o(t)
+            }
+          ),
+          /* @__PURE__ */ i(
+            d.span,
+            {
+              className: "absolute inline-block backface-hidden origin-[50%_100%]",
+              initial: u.initial,
+              animate: c ? u.animate : void 0,
+              transition: {
+                ...a,
+                delay: l * (a?.delay ?? 0) + 0.3
+              },
+              children: o(t)
+            }
+          ),
+          /* @__PURE__ */ i("span", { className: "invisible", children: o(t) })
+        ]
+      },
+      l
+    )),
+    /* @__PURE__ */ i("span", { className: "sr-only", children: n })
+  ] });
+}
+export {
+  k as RollingText
+};
+//# sourceMappingURL=RollingText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RollingText.js","sources":["../../../../src/lib/TextAnimation/RollingText.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  motion,\n  useInView,\n  type UseInViewOptions,\n  type Transition,\n} from \"motion/react\";\n\nconst ENTRY_ANIMATION = {\n  initial: { rotateX: 0 },\n  animate: { rotateX: 90 },\n};\n\nconst EXIT_ANIMATION = {\n  initial: { rotateX: 90 },\n  animate: { rotateX: 0 },\n};\n\nconst formatCharacter = (char: string) => (char === \" \" ? \"\\u00A0\" : char);\n\ntype RollingTextProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  transition?: Transition;\n  inView?: boolean;\n  inViewMargin?: UseInViewOptions[\"margin\"];\n  inViewOnce?: boolean;\n  text: string;\n};\n\nfunction RollingText({\n  ref,\n  transition = { duration: 0.5, delay: 0.1, ease: \"easeOut\" },\n  inView = false,\n  inViewMargin = \"0px\",\n  inViewOnce = true,\n  text,\n  ...props\n}: RollingTextProps) {\n  const localRef = React.useRef<HTMLSpanElement>(null);\n  React.useImperativeHandle(ref as any, () => localRef.current!);\n\n  const inViewResult = useInView(localRef, {\n    once: inViewOnce,\n    margin: inViewMargin,\n  });\n  const isInView = !inView || inViewResult;\n\n  const characters = React.useMemo(() => text.split(\"\"), [text]);\n\n  return (\n    <span data-slot=\"rolling-text\" {...(props as any)} ref={ref}>\n      {characters.map((char, idx) => (\n        <span\n          key={idx}\n          className=\"relative inline-block perspective-[9999999px] transform-3d w-auto\"\n          aria-hidden=\"true\"\n        >\n          <motion.span\n            className=\"absolute inline-block backface-hidden origin-[50%_25%]\"\n            initial={ENTRY_ANIMATION.initial}\n            animate={isInView ? ENTRY_ANIMATION.animate : undefined}\n            transition={{\n              ...transition,\n              delay: idx * (transition?.delay ?? 0),\n            }}\n          >\n            {formatCharacter(char)}\n          </motion.span>\n          <motion.span\n            className=\"absolute inline-block backface-hidden origin-[50%_100%]\"\n            initial={EXIT_ANIMATION.initial}\n            animate={isInView ? EXIT_ANIMATION.animate : undefined}\n            transition={{\n              ...transition,\n              delay: idx * (transition?.delay ?? 0) + 0.3,\n            }}\n          >\n            {formatCharacter(char)}\n          </motion.span>\n          <span className=\"invisible\">{formatCharacter(char)}</span>\n        </span>\n      ))}\n\n      <span className=\"sr-only\">{text}</span>\n    </span>\n  );\n}\n\nexport { RollingText, type RollingTextProps };\n"],"names":["ENTRY_ANIMATION","EXIT_ANIMATION","formatCharacter","char","RollingText","ref","transition","inView","inViewMargin","inViewOnce","text","props","localRef","React","inViewResult","useInView","isInView","characters","idx","jsxs","jsx","motion"],"mappings":";;;AAUA,MAAMA,IAAkB;AAAA,EACtB,SAAS,EAAE,SAAS,EAAA;AAAA,EACpB,SAAS,EAAE,SAAS,GAAA;AACtB,GAEMC,IAAiB;AAAA,EACrB,SAAS,EAAE,SAAS,GAAA;AAAA,EACpB,SAAS,EAAE,SAAS,EAAA;AACtB,GAEMC,IAAkB,CAACC,MAAkBA,MAAS,MAAM,MAAWA;AAUrE,SAASC,EAAY;AAAA,EACnB,KAAAC;AAAA,EACA,YAAAC,IAAa,EAAE,UAAU,KAAK,OAAO,KAAK,MAAM,UAAA;AAAA,EAChD,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AAAA,EACf,YAAAC,IAAa;AAAA,EACb,MAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,QAAMC,IAAWC,EAAM,OAAwB,IAAI;AACnD,EAAAA,EAAM,oBAAoBR,GAAY,MAAMO,EAAS,OAAQ;AAE7D,QAAME,IAAeC,EAAUH,GAAU;AAAA,IACvC,MAAMH;AAAA,IACN,QAAQD;AAAA,EAAA,CACT,GACKQ,IAAW,CAACT,KAAUO,GAEtBG,IAAaJ,EAAM,QAAQ,MAAMH,EAAK,MAAM,EAAE,GAAG,CAACA,CAAI,CAAC;AAE7D,2BACG,QAAA,EAAK,aAAU,gBAAgB,GAAIC,GAAe,KAAAN,GAChD,UAAA;AAAA,IAAAY,EAAW,IAAI,CAACd,GAAMe,MACrB,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACC,EAAO;AAAA,YAAP;AAAA,cACC,WAAU;AAAA,cACV,SAASrB,EAAgB;AAAA,cACzB,SAASgB,IAAWhB,EAAgB,UAAU;AAAA,cAC9C,YAAY;AAAA,gBACV,GAAGM;AAAA,gBACH,OAAOY,KAAOZ,GAAY,SAAS;AAAA,cAAA;AAAA,cAGpC,YAAgBH,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAEvB,gBAAAiB;AAAA,YAACC,EAAO;AAAA,YAAP;AAAA,cACC,WAAU;AAAA,cACV,SAASpB,EAAe;AAAA,cACxB,SAASe,IAAWf,EAAe,UAAU;AAAA,cAC7C,YAAY;AAAA,gBACV,GAAGK;AAAA,gBACH,OAAOY,KAAOZ,GAAY,SAAS,KAAK;AAAA,cAAA;AAAA,cAGzC,YAAgBH,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,4BAEtB,QAAA,EAAK,WAAU,aAAa,UAAAD,EAAgBC,CAAI,EAAA,CAAE;AAAA,QAAA;AAAA,MAAA;AAAA,MA1B9Ce;AAAA,IAAA,CA4BR;AAAA,IAED,gBAAAE,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAV,EAAA,CAAK;AAAA,EAAA,GAClC;AAEJ;"}

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

@@ -0,0 +1,38 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as a from "react";
+import { AnimatePresence as p, motion as y } from "motion/react";
+import { cn as u } from "@dsui/ui/index";
+function I({
+  text: e,
+  y: i = -50,
+  duration: t = 2e3,
+  transition: o = { duration: 0.3, ease: "easeOut" },
+  containerClassName: c,
+  ...s
+}) {
+  const [m, l] = a.useState(0);
+  a.useEffect(() => {
+    if (!Array.isArray(e)) return;
+    const d = setInterval(() => {
+      l((f) => (f + 1) % e.length);
+    }, t);
+    return () => clearInterval(d);
+  }, [e, t]);
+  const n = Array.isArray(e) ? e[m] : e;
+  return /* @__PURE__ */ r("div", { className: u("overflow-hidden py-1", c), children: /* @__PURE__ */ r(p, { mode: "wait", children: /* @__PURE__ */ r(
+    y.div,
+    {
+      transition: o,
+      initial: { opacity: 0, y: -i },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: i },
+      ...s,
+      children: n
+    },
+    n
+  ) }) });
+}
+export {
+  I as RotatingText
+};
+//# sourceMappingURL=RotatingText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RotatingText.js","sources":["../../../../src/lib/TextAnimation/RotatingText.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  AnimatePresence,\n  motion,\n  type HTMLMotionProps,\n  type Transition,\n} from \"motion/react\";\nimport { cn } from \"@dsui/ui/index\";\n\ntype RotatingTextProps = {\n  text: string | string[];\n  duration?: number;\n  transition?: Transition;\n  y?: number;\n  containerClassName?: string;\n} & HTMLMotionProps<\"div\">;\n\nfunction RotatingText({\n  text,\n  y = -50,\n  duration = 2000,\n  transition = { duration: 0.3, ease: \"easeOut\" },\n  containerClassName,\n  ...props\n}: RotatingTextProps) {\n  const [index, setIndex] = React.useState(0);\n\n  React.useEffect(() => {\n    if (!Array.isArray(text)) return;\n    const interval = setInterval(() => {\n      setIndex((prevIndex) => (prevIndex + 1) % text.length);\n    }, duration);\n    return () => clearInterval(interval);\n  }, [text, duration]);\n\n  const currentText = Array.isArray(text) ? text[index] : text;\n\n  return (\n    <div className={cn(\"overflow-hidden py-1\", containerClassName)}>\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key={currentText}\n          transition={transition}\n          initial={{ opacity: 0, y: -y }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y }}\n          {...(props as any)}\n        >\n          {currentText}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  );\n}\n\nexport { RotatingText, type RotatingTextProps };\n"],"names":["RotatingText","text","y","duration","transition","containerClassName","props","index","setIndex","React","interval","prevIndex","currentText","jsx","cn","AnimatePresence","motion"],"mappings":";;;;AAmBA,SAASA,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,GAAAC,IAAI;AAAA,EACJ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa,EAAE,UAAU,KAAK,MAAM,UAAA;AAAA,EACpC,oBAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAM,SAAS,CAAC;AAE1C,EAAAA,EAAM,UAAU,MAAM;AACpB,QAAI,CAAC,MAAM,QAAQR,CAAI,EAAG;AAC1B,UAAMS,IAAW,YAAY,MAAM;AACjC,MAAAF,EAAS,CAACG,OAAeA,IAAY,KAAKV,EAAK,MAAM;AAAA,IACvD,GAAGE,CAAQ;AACX,WAAO,MAAM,cAAcO,CAAQ;AAAA,EACrC,GAAG,CAACT,GAAME,CAAQ,CAAC;AAEnB,QAAMS,IAAc,MAAM,QAAQX,CAAI,IAAIA,EAAKM,CAAK,IAAIN;AAExD,SACE,gBAAAY,EAAC,OAAA,EAAI,WAAWC,EAAG,wBAAwBT,CAAkB,GAC3D,UAAA,gBAAAQ,EAACE,GAAA,EAAgB,MAAK,QACpB,UAAA,gBAAAF;AAAA,IAACG,EAAO;AAAA,IAAP;AAAA,MAEC,YAAAZ;AAAA,MACA,SAAS,EAAE,SAAS,GAAG,GAAG,CAACF,EAAA;AAAA,MAC3B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAA;AAAA,MAC1B,MAAM,EAAE,SAAS,GAAG,GAAAA,EAAA;AAAA,MACnB,GAAII;AAAA,MAEJ,UAAAM;AAAA,IAAA;AAAA,IAPIA;AAAA,EAAA,GAST,EAAA,CACF;AAEJ;"}

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

@@ -0,0 +1,64 @@
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+import { motion as i } from "motion/react";
+import { cn as v } from "@dsui/ui/index";
+function u({
+  text: r,
+  duration: e = 1,
+  transition: t,
+  wave: o = !1,
+  className: n,
+  color: c = "var(--color-neutral-500)",
+  shimmeringColor: s = "var(--color-neutral-300)",
+  ...p
+}) {
+  return /* @__PURE__ */ a(
+    i.span,
+    {
+      className: v("relative inline-block [perspective:500px]", n),
+      style: {
+        "--shimmering-color": s,
+        "--color": c,
+        color: "var(--color)"
+      },
+      ...p,
+      children: r?.split("")?.map((m, l) => /* @__PURE__ */ a(
+        i.span,
+        {
+          className: "inline-block whitespace-pre [transform-style:preserve-3d]",
+          initial: {
+            ...o ? {
+              scale: 1,
+              rotateY: 0
+            } : {},
+            color: "var(--color)"
+          },
+          animate: {
+            ...o ? {
+              x: [0, 5, 0],
+              y: [0, -5, 0],
+              scale: [1, 1.1, 1],
+              rotateY: [0, 15, 0]
+            } : {},
+            color: ["var(--color)", "var(--shimmering-color)", "var(--color)"]
+          },
+          transition: {
+            duration: e,
+            repeat: 1 / 0,
+            repeatType: "loop",
+            repeatDelay: r.length * 0.05,
+            delay: l * e / r.length,
+            ease: "easeInOut",
+            ...t
+          },
+          children: m
+        },
+        l
+      ))
+    }
+  );
+}
+export {
+  u as ShimmeringText
+};
+//# sourceMappingURL=ShimmeringText.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,86 @@
+import { jsx as s, jsxs as F } from "react/jsx-runtime";
+import * as e from "react";
+import { useInView as I, motion as c } from "motion/react";
+const o = {
+  hidden: { x: 150, opacity: 0 },
+  visible: {
+    x: 0,
+    opacity: 1,
+    transition: { duration: 0.7, ease: "easeOut" }
+  }
+}, S = ({
+  ref: d,
+  text: n,
+  type: a = "chars",
+  motionVariants: t = {},
+  inView: m = !1,
+  inViewMargin: h = "0px",
+  inViewOnce: u = !0,
+  delay: p = 0,
+  ...g
+}) => {
+  const f = e.useMemo(() => Array.isArray(n) ? n.flatMap((r, i) => [
+    /* @__PURE__ */ s(e.Fragment, { children: r }, `line-${i}`),
+    i < n.length - 1 ? /* @__PURE__ */ s("br", {}, `br-${i}`) : null
+  ]) : a === "words" ? (n.match(/\S+\s*/g) || []).map((i, A) => /* @__PURE__ */ s(e.Fragment, { children: i }, A)) : n.split("").map((r, i) => /* @__PURE__ */ s(e.Fragment, { children: r }, i)), [n, a]), b = {
+    hidden: {},
+    visible: {
+      transition: {
+        delayChildren: p / 1e3,
+        staggerChildren: t.stagger ?? (a === "chars" ? 0.05 : a === "words" ? 0.2 : 0.3)
+      }
+    }
+  }, v = {
+    hidden: {
+      ...o.hidden,
+      ...t.initial || {}
+    },
+    visible: {
+      ...o.visible,
+      ...t.animate || {},
+      transition: {
+        ...o.visible.transition || {},
+        ...t.transition || {}
+      }
+    }
+  }, l = e.useRef(null);
+  e.useImperativeHandle(
+    d,
+    () => l.current
+  );
+  const w = I(l, {
+    once: u,
+    margin: h
+  }), y = !m || w;
+  return /* @__PURE__ */ s(
+    c.span,
+    {
+      ref: l,
+      initial: "hidden",
+      animate: y ? "visible" : "hidden",
+      variants: b,
+      ...g,
+      children: f.map(
+        (r, i) => r && /* @__PURE__ */ F(e.Fragment, { children: [
+          /* @__PURE__ */ s(
+            c.span,
+            {
+              variants: v,
+              style: {
+                display: "inline-block",
+                whiteSpace: a === "chars" ? "pre" : (Array.isArray(n), "normal")
+              },
+              children: r
+            },
+            i
+          ),
+          a === "words" && " "
+        ] }, i)
+      )
+    }
+  );
+};
+export {
+  S as SplittingText
+};
+//# sourceMappingURL=SplittingText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplittingText.js","sources":["../../../../src/lib/TextAnimation/SplittingText.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  motion,\n  type Variants,\n  type TargetAndTransition,\n  type HTMLMotionProps,\n  useInView,\n  type UseInViewOptions,\n} from \"motion/react\";\n\ntype DefaultSplittingTextProps = {\n  motionVariants?: {\n    initial?: Record<string, any>;\n    animate?: Record<string, any>;\n    transition?: Record<string, any>;\n    stagger?: number;\n  };\n  inView?: boolean;\n  inViewMargin?: UseInViewOptions[\"margin\"];\n  inViewOnce?: boolean;\n  delay?: number;\n} & HTMLMotionProps<\"div\">;\n\ntype CharsOrWordsSplittingTextProps = DefaultSplittingTextProps & {\n  type?: \"chars\" | \"words\";\n  text: string;\n};\n\ntype LinesSplittingTextProps = DefaultSplittingTextProps & {\n  type: \"lines\";\n  text: string[];\n};\n\ntype SplittingTextProps =\n  | CharsOrWordsSplittingTextProps\n  | LinesSplittingTextProps;\n\nconst defaultItemVariant: Variants = {\n  hidden: { x: 150, opacity: 0 },\n  visible: {\n    x: 0,\n    opacity: 1,\n    transition: { duration: 0.7, ease: \"easeOut\" },\n  },\n};\n\nexport const SplittingText: React.FC<SplittingTextProps> = ({\n  ref,\n  text,\n  type = \"chars\",\n  motionVariants = {},\n  inView = false,\n  inViewMargin = \"0px\",\n  inViewOnce = true,\n  delay = 0,\n  ...props\n}) => {\n  const items = React.useMemo<React.ReactNode[]>(() => {\n    if (Array.isArray(text)) {\n      return text.flatMap((line, i) => [\n        <React.Fragment key={`line-${i}`}>{line}</React.Fragment>,\n        i < text.length - 1 ? <br key={`br-${i}`} /> : null,\n      ]);\n    }\n\n    if (type === \"words\") {\n      const tokens = text.match(/\\S+\\s*/g) || [];\n      return tokens.map((token, i) => (\n        <React.Fragment key={i}>{token}</React.Fragment>\n      ));\n    }\n\n    return text\n      .split(\"\")\n      .map((char, i) => <React.Fragment key={i}>{char}</React.Fragment>);\n  }, [text, type]);\n\n  const containerVariants: Variants = {\n    hidden: {},\n    visible: {\n      transition: {\n        delayChildren: delay / 1000,\n        staggerChildren:\n          motionVariants.stagger ??\n          (type === \"chars\" ? 0.05 : type === \"words\" ? 0.2 : 0.3),\n      },\n    },\n  };\n\n  const itemVariants: Variants = {\n    hidden: {\n      ...defaultItemVariant.hidden,\n      ...(motionVariants.initial || {}),\n    },\n    visible: {\n      ...defaultItemVariant.visible,\n      ...(motionVariants.animate || {}),\n      transition: {\n        ...((defaultItemVariant.visible as TargetAndTransition).transition ||\n          {}),\n        ...(motionVariants.transition || {}),\n      },\n    },\n  };\n\n  const localRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(\n    ref as any,\n    () => localRef.current as HTMLDivElement,\n  );\n\n  const inViewResult = useInView(localRef, {\n    once: inViewOnce,\n    margin: inViewMargin,\n  });\n  const isInView = !inView || inViewResult;\n\n  return (\n    <motion.span\n      ref={localRef}\n      initial=\"hidden\"\n      animate={isInView ? \"visible\" : \"hidden\"}\n      variants={containerVariants}\n      {...(props as any)}\n    >\n      {items.map(\n        (item, index) =>\n          item && (\n            <React.Fragment key={index}>\n              <motion.span\n                key={index}\n                variants={itemVariants}\n                style={{\n                  display: \"inline-block\",\n                  whiteSpace:\n                    type === \"chars\"\n                      ? \"pre\"\n                      : Array.isArray(text)\n                        ? \"normal\"\n                        : \"normal\",\n                }}\n              >\n                {item}\n              </motion.span>\n              {type === \"words\" && \" \"}\n            </React.Fragment>\n          ),\n      )}\n    </motion.span>\n  );\n};\n"],"names":["defaultItemVariant","SplittingText","ref","text","type","motionVariants","inView","inViewMargin","inViewOnce","delay","props","items","React","line","token","i","jsx","char","containerVariants","itemVariants","localRef","inViewResult","useInView","isInView","motion","item","index","jsxs"],"mappings":"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"}

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

@@ -0,0 +1,59 @@
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
+import * as e from "react";
+import { useAnimate as y, stagger as g, motion as f } from "motion/react";
+import { cn as b } from "@dsui/ui/index";
+function w({
+  ref: m,
+  words: r,
+  className: p,
+  filter: t = !0,
+  duration: a = 0.5,
+  staggerDelay: o = 0.2,
+  ...u
+}) {
+  const c = e.useRef(null);
+  e.useImperativeHandle(
+    m,
+    () => c.current
+  );
+  const [n, l] = y(), d = e.useMemo(() => r.split(" "), [r]);
+  return e.useEffect(() => {
+    n.current && l(
+      "span",
+      {
+        opacity: 1,
+        filter: t ? "blur(0px)" : "none"
+      },
+      {
+        duration: a,
+        delay: g(o)
+      }
+    );
+  }, [l, a, t, n, o]), /* @__PURE__ */ i(
+    "div",
+    {
+      ref: c,
+      className: b("font-bold", p),
+      "data-slot": "text-generate-effect",
+      ...u,
+      children: /* @__PURE__ */ i(f.div, { ref: n, children: d.map((s, x) => /* @__PURE__ */ h(
+        f.span,
+        {
+          className: "opacity-0 will-change-transform will-change-opacity will-change-filter",
+          style: {
+            filter: t ? "blur(10px)" : "none"
+          },
+          children: [
+            s,
+            " "
+          ]
+        },
+        `${s}-${x}`
+      )) })
+    }
+  );
+}
+export {
+  w as TextGenerateEffect
+};
+//# sourceMappingURL=TextGenerateEffect.js.map

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

@@ -0,0 +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,EAAmB;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;"}

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

@@ -0,0 +1,128 @@
+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";
+const C = ({
+  text: r,
+  duration: d
+}) => {
+  const n = k(null), [s, f] = i({ x: 0, y: 0 }), [a, l] = i(!1), [h, x] = i({ cx: "50%", cy: "50%" });
+  return g(() => {
+    if (n.current && s.x !== null && s.y !== null) {
+      const t = n.current.getBoundingClientRect(), m = (s.x - t.left) / t.width * 100, p = (s.y - t.top) / t.height * 100;
+      x({
+        cx: `${m}%`,
+        cy: `${p}%`
+      });
+    }
+  }, [s]), /* @__PURE__ */ o(
+    "svg",
+    {
+      ref: n,
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 300 100",
+      xmlns: "http://www.w3.org/2000/svg",
+      onMouseEnter: () => l(!0),
+      onMouseLeave: () => l(!1),
+      onMouseMove: (t) => f({ x: t.clientX, y: t.clientY }),
+      className: "select-none",
+      children: [
+        /* @__PURE__ */ o("defs", { children: [
+          /* @__PURE__ */ e(
+            "linearGradient",
+            {
+              id: "textGradient",
+              gradientUnits: "userSpaceOnUse",
+              cx: "50%",
+              cy: "50%",
+              r: "25%",
+              children: a && /* @__PURE__ */ o(u, { children: [
+                /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#eab308" }),
+                /* @__PURE__ */ e("stop", { offset: "25%", stopColor: "#ef4444" }),
+                /* @__PURE__ */ e("stop", { offset: "50%", stopColor: "#3b82f6" }),
+                /* @__PURE__ */ e("stop", { offset: "75%", stopColor: "#06b6d4" }),
+                /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#8b5cf6" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ o(
+            c.radialGradient,
+            {
+              id: "revealMask",
+              gradientUnits: "userSpaceOnUse",
+              r: "20%",
+              initial: { cx: "50%", cy: "50%" },
+              animate: h,
+              transition: { duration: d ?? 0, ease: "easeOut" },
+              children: [
+                /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "white" }),
+                /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "black" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e("mask", { id: "textMask", children: /* @__PURE__ */ e(
+            "rect",
+            {
+              x: "0",
+              y: "0",
+              width: "100%",
+              height: "100%",
+              fill: "url(#revealMask)"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ e(
+          "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`"}`,
+            children: r
+          }
+        ),
+        /* @__PURE__ */ e(
+          c.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"}`,
+            initial: { strokeDashoffset: 1e3, strokeDasharray: 1e3 },
+            animate: {
+              strokeDashoffset: 0,
+              strokeDasharray: 1e3
+            },
+            transition: {
+              duration: 4,
+              ease: "easeInOut"
+            },
+            children: r
+          }
+        ),
+        /* @__PURE__ */ e(
+          "text",
+          {
+            x: "50%",
+            y: "50%",
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            stroke: "url(#textGradient)",
+            strokeWidth: "0.3",
+            mask: "url(#textMask)",
+            className: "fill-transparent font-[helvetica] text-7xl font-bold",
+            children: r
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  C as TextHoverEffect
+};
+//# sourceMappingURL=TextHoverEffect.js.map

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

@@ -0,0 +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":"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"}