@xiping/react-components 1.0.39 → 1.0.43

package/dist/es/components/split-text/SplitText.js

@@ -1,35 +1,37 @@
 import { jsx as E } from "react/jsx-runtime";
-import { useRef as g, useEffect as F } from "react";
-import { gsap as s } from "gsap";
+import { useRef as m, useEffect as F } from "react";
+import { gsap as i } from "gsap";
 import { ScrollTrigger as N } from "gsap/ScrollTrigger";
 import { SplitText as S } from "gsap/SplitText";
-s.registerPlugin(N, S);
-const W = ({
-  text: i,
+import j from "clsx";
+/* empty css              */
+i.registerPlugin(N, S);
+const A = ({
+  text: l,
   className: C = "",
-  delay: m = 100,
+  delay: g = 100,
   duration: d = 0.6,
   ease: h = "power3.out",
   splitType: n = "chars",
   from: w = { opacity: 0, y: 40 },
-  to: a = { opacity: 1, y: 0 },
+  to: c = { opacity: 1, y: 0 },
   threshold: x = 0.1,
-  rootMargin: $ = "-100px",
+  rootMargin: y = "-100px",
   textAlign: R = "center",
-  onLetterAnimationComplete: b
+  onLetterAnimationComplete: T
 }) => {
-  const c = g(null), k = g(!1), o = g(null);
+  const a = m(null), $ = m(!1), o = m(null);
   return F(() => {
-    if (typeof window > "u" || !c.current || !i) return;
-    const u = c.current;
-    k.current = !1;
-    const y = n === "lines";
-    y && (u.style.position = "relative");
+    if (typeof window > "u" || !a.current || !l) return;
+    const p = a.current;
+    $.current = !1;
+    const b = n === "lines";
+    b && (p.style.position = "relative");
     let r;
     try {
-      r = new S(u, {
+      r = new S(p, {
         type: n,
-        absolute: y,
+        absolute: b,
         linesClass: "split-line"
       });
     } catch (t) {
@@ -57,9 +59,9 @@ const W = ({
     e.forEach((t) => {
       t.style.willChange = "transform, opacity";
     });
-    const v = (1 - x) * 100, l = /^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec($), f = l ? parseFloat(l[1]) : 0, T = l && l[2] || "px", P = f < 0 ? `-=${Math.abs(f)}${T}` : `+=${f}${T}`, D = `top ${v}%${P}`, p = s.timeline({
+    const v = (1 - x) * 100, s = /^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec(y), u = s ? parseFloat(s[1]) : 0, k = s && s[2] || "px", P = u < 0 ? `-=${Math.abs(u)}${k}` : `+=${u}${k}`, D = `top ${v}%${P}`, f = i.timeline({
       scrollTrigger: {
-        trigger: u,
+        trigger: p,
         start: D,
         toggleActions: "play none none none",
         once: !0,
@@ -69,46 +71,46 @@ const W = ({
       },
       smoothChildTiming: !0,
       onComplete: () => {
-        k.current = !0, s.set(e, {
-          ...a,
+        $.current = !0, i.set(e, {
+          ...c,
           clearProps: "willChange",
           immediateRender: !0
-        }), b?.();
+        }), T?.();
       }
     });
-    return p.set(e, { ...w, immediateRender: !1, force3D: !0 }), p.to(e, {
-      ...a,
+    return f.set(e, { ...w, immediateRender: !1, force3D: !0 }), f.to(e, {
+      ...c,
       duration: d,
       ease: h,
-      stagger: m / 1e3,
+      stagger: g / 1e3,
       force3D: !0
     }), () => {
-      p.kill(), o.current && (o.current.kill(), o.current = null), s.killTweensOf(e), r && r.revert();
+      f.kill(), o.current && (o.current.kill(), o.current = null), i.killTweensOf(e), r && r.revert();
     };
   }, [
-    i,
-    m,
+    l,
+    g,
     d,
     h,
     n,
     w,
-    a,
+    c,
     x,
-    $,
-    b
+    y,
+    T
   ]), /* @__PURE__ */ E(
     "p",
     {
-      ref: c,
-      className: `split-parent overflow-hidden inline-block whitespace-normal ${C}`,
+      ref: a,
+      className: j("xiping-split-parent", C),
       style: {
         textAlign: R,
         wordWrap: "break-word"
       },
-      children: i
+      children: l
     }
   );
 };
 export {
-  W as SplitText
+  A as SplitText
 };

package/dist/es/components/text-type/TextType.d.ts

@@ -0,0 +1,26 @@
+import { ElementType } from 'react';
+interface TextTypeProps {
+    className?: string;
+    showCursor?: boolean;
+    hideCursorWhileTyping?: boolean;
+    cursorCharacter?: string | React.ReactNode;
+    cursorBlinkDuration?: number;
+    cursorClassName?: string;
+    text: string | string[];
+    as?: ElementType;
+    typingSpeed?: number;
+    initialDelay?: number;
+    pauseDuration?: number;
+    deletingSpeed?: number;
+    loop?: boolean;
+    textColors?: string[];
+    variableSpeed?: {
+        min: number;
+        max: number;
+    };
+    onSentenceComplete?: (sentence: string, index: number) => void;
+    startOnVisible?: boolean;
+    reverseMode?: boolean;
+}
+declare const TextType: ({ text, as: Component, typingSpeed, initialDelay, pauseDuration, deletingSpeed, loop, className, showCursor, hideCursorWhileTyping, cursorCharacter, cursorClassName, cursorBlinkDuration, textColors, variableSpeed, onSentenceComplete, startOnVisible, reverseMode, ...props }: TextTypeProps & React.HTMLAttributes<HTMLElement>) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
+export default TextType;

package/dist/es/components/text-type/TextType.js

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

package/dist/es/components/text-type/index.d.ts

@@ -0,0 +1,3 @@
+import { default as TextType } from './TextType.tsx';
+export { TextType };
+export default TextType;

package/dist/es/components/typing-animation/index.js

@@ -1,20 +1,21 @@
 "use client";
 import { jsx as T } from "react/jsx-runtime";
 import { cn as x } from "../../utils/utils.js";
-import { motion as b } from "motion/react";
-import { useState as u, useRef as I, useEffect as a } from "react";
-function R({
+import { motion as I } from "motion/react";
+import { useState as u, useRef as b, useEffect as a } from "react";
+/* empty css          */
+function S({
   children: r,
-  className: l,
+  className: m,
   duration: s = 100,
   delay: n = 0,
-  as: m = "div",
+  as: l = "div",
   startOnView: i = !1,
   ...p
 }) {
-  const d = b.create(m, {
+  const d = I.create(l, {
     forwardMotionProps: !0
-  }), [g, v] = u(""), [c, f] = u(!1), o = I(null);
+  }), [g, v] = u(""), [c, f] = u(!1), o = b(null);
   return a(() => {
     if (!i) {
       const t = setTimeout(() => {
@@ -44,16 +45,13 @@ function R({
     d,
     {
       ref: o,
-      className: x(
-        "text-4xl font-bold leading-[5rem] tracking-[-0.02em]",
-        l
-      ),
+      className: x("xiping-typing-animation", m),
       ...p,
       children: g
     }
   );
 }
 export {
-  R as TypingAnimation,
-  R as default
+  S as TypingAnimation,
+  S as default
 };

package/dist/es/components/variable-proximity/index.d.ts

@@ -0,0 +1,15 @@
+import { RefObject, HTMLAttributes } from 'react';
+interface VariableProximityProps extends HTMLAttributes<HTMLSpanElement> {
+    label: string;
+    fromFontVariationSettings: string;
+    toFontVariationSettings: string;
+    containerRef: RefObject<HTMLElement>;
+    radius?: number;
+    falloff?: "linear" | "exponential" | "gaussian";
+    className?: string;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+}
+declare const VariableProximity: import('react').ForwardRefExoticComponent<VariableProximityProps & import('react').RefAttributes<HTMLSpanElement>>;
+export { VariableProximity };
+export default VariableProximity;

package/dist/es/components/variable-proximity/index.js

@@ -0,0 +1,140 @@
+import { jsxs as $, jsx as C } from "react/jsx-runtime";
+import { forwardRef as k, useRef as d, useMemo as D, useEffect as F } from "react";
+import { motion as T } from "motion/react";
+/* empty css          */
+function z(c) {
+  F(() => {
+    let i;
+    const s = () => {
+      c(), i = requestAnimationFrame(s);
+    };
+    return i = requestAnimationFrame(s), () => cancelAnimationFrame(i);
+  }, [c]);
+}
+function G(c) {
+  const i = d({ x: 0, y: 0 });
+  return F(() => {
+    const s = (r, a) => {
+      if (c?.current) {
+        const p = c.current.getBoundingClientRect();
+        i.current = { x: r - p.left, y: a - p.top };
+      } else
+        i.current = { x: r, y: a };
+    }, u = (r) => s(r.clientX, r.clientY), f = (r) => {
+      const a = r.touches[0];
+      s(a.clientX, a.clientY);
+    };
+    return window.addEventListener("mousemove", u), window.addEventListener("touchmove", f), () => {
+      window.removeEventListener("mousemove", u), window.removeEventListener("touchmove", f);
+    };
+  }, [c]), i;
+}
+const H = k(
+  (c, i) => {
+    const {
+      label: s,
+      fromFontVariationSettings: u,
+      toFontVariationSettings: f,
+      containerRef: r,
+      radius: a = 50,
+      falloff: p = "linear",
+      className: R = "",
+      onClick: V,
+      style: P,
+      ...E
+    } = c, x = d([]), v = d([]), h = G(r), g = d({
+      x: null,
+      y: null
+    }), A = D(() => {
+      const e = (t) => new Map(
+        t.split(",").map((l) => l.trim()).map((l) => {
+          const [m, y] = l.split(" ");
+          return [m.replace(/['"]/g, ""), parseFloat(y)];
+        })
+      ), n = e(u), o = e(f);
+      return Array.from(n.entries()).map(([t, l]) => ({
+        axis: t,
+        fromValue: l,
+        toValue: o.get(t) ?? l
+      }));
+    }, [u, f]), L = (e, n, o, t) => Math.sqrt((o - e) ** 2 + (t - n) ** 2), b = (e) => {
+      const n = Math.min(Math.max(1 - e / a, 0), 1);
+      switch (p) {
+        case "exponential":
+          return n ** 2;
+        case "gaussian":
+          return Math.exp(-((e / (a / 2)) ** 2) / 2);
+        case "linear":
+        default:
+          return n;
+      }
+    };
+    z(() => {
+      if (!r?.current) return;
+      const { x: e, y: n } = h.current;
+      if (g.current.x === e && g.current.y === n)
+        return;
+      g.current = { x: e, y: n };
+      const o = r.current.getBoundingClientRect();
+      x.current.forEach((t, l) => {
+        if (!t) return;
+        const m = t.getBoundingClientRect(), y = m.left + m.width / 2 - o.left, q = m.top + m.height / 2 - o.top, w = L(
+          h.current.x,
+          h.current.y,
+          y,
+          q
+        );
+        if (w >= a) {
+          t.style.fontVariationSettings = u;
+          return;
+        }
+        const B = b(w), M = A.map(({ axis: I, fromValue: S, toValue: X }) => {
+          const Y = S + (X - S) * B;
+          return `'${I}' ${Y}`;
+        }).join(", ");
+        v.current[l] = M, t.style.fontVariationSettings = M;
+      });
+    });
+    const N = /[\u4e00-\u9fa5]/.test(s) ? s.split("") : s.split(" ").flatMap((e, n, o) => {
+      const t = e.split("");
+      return n < o.length - 1 ? [...t, " "] : t;
+    });
+    let j = 0;
+    return /* @__PURE__ */ $(
+      "span",
+      {
+        ref: i,
+        className: `${R} variable-proximity`,
+        onClick: V,
+        style: { display: "inline", ...P },
+        ...E,
+        children: [
+          N.map((e, n) => {
+            const o = j++;
+            return /* @__PURE__ */ C(
+              T.span,
+              {
+                ref: (t) => {
+                  x.current[o] = t;
+                },
+                style: {
+                  display: e === " " ? "inline" : "inline-block",
+                  fontVariationSettings: v.current[o]
+                },
+                "aria-hidden": "true",
+                children: e
+              },
+              n
+            );
+          }),
+          /* @__PURE__ */ C("span", { className: "sr-only", children: s })
+        ]
+      }
+    );
+  }
+);
+H.displayName = "VariableProximity";
+export {
+  H as VariableProximity,
+  H as default
+};

package/dist/es/components/video-dialog/VideoDialog.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useState as m } from "react";
-import { AnimatePresence as p, motion as t } from "motion/react";
-import { Play as u, XIcon as y } from "lucide-react";
-import { cn as x } from "../../utils/utils.js";
-const f = {
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { AnimatePresence as m, motion as e } from "motion/react";
+import { Play as y, XIcon as x } from "lucide-react";
+import g from "clsx";
+/* empty css                */
+const v = {
   "from-bottom": {
     initial: { y: "100%", opacity: 0 },
     animate: { y: 0, opacity: 1 },
@@ -46,70 +47,56 @@ const f = {
     exit: { x: "100%", opacity: 0 }
   }
 };
-function N({
-  animationStyle: o = "from-center",
-  videoSrc: r,
-  thumbnailSrc: l,
-  thumbnailAlt: n = "Video thumbnail",
-  className: c
+function V({
+  animationStyle: t = "from-center",
+  videoSrc: n,
+  thumbnailSrc: c,
+  thumbnailAlt: l = "Video thumbnail",
+  className: p
 }) {
-  const [s, a] = m(!1), d = f[o];
-  return /* @__PURE__ */ i("div", { className: x("relative", c), children: [
-    /* @__PURE__ */ i(
+  const [r, o] = s(!1), d = v[t];
+  return /* @__PURE__ */ a("div", { className: g("xiping-video-dialog", p), children: [
+    /* @__PURE__ */ a(
       "div",
       {
-        className: "group relative cursor-pointer",
-        onClick: () => a(!0),
+        className: "xiping-video-dialog-container",
+        onClick: () => o(!0),
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ i(
             "img",
             {
-              src: l,
-              alt: n,
+              src: c,
+              alt: l,
               width: 1920,
               height: 1080,
-              className: "w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]"
+              className: "xiping-video-dialog-thumbnail"
             }
           ),
-          /* @__PURE__ */ e("div", { className: "absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100", children: /* @__PURE__ */ e("div", { className: "flex size-28 items-center justify-center rounded-full bg-primary/10 backdrop-blur-md", children: /* @__PURE__ */ e(
-            "div",
-            {
-              className: "relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b from-primary/30 to-primary shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]",
-              children: /* @__PURE__ */ e(
-                u,
-                {
-                  className: "size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105",
-                  style: {
-                    filter: "drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))"
-                  }
-                }
-              )
-            }
-          ) }) })
+          /* @__PURE__ */ i("div", { className: "xiping-video-dialog-overlay", children: /* @__PURE__ */ i("div", { className: "xiping-video-dialog-play-outer", children: /* @__PURE__ */ i("div", { className: "xiping-video-dialog-play-inner", children: /* @__PURE__ */ i(y, { className: "xiping-video-dialog-play-icon" }) }) }) })
         ]
       }
     ),
-    /* @__PURE__ */ e(p, { children: s && /* @__PURE__ */ e(
-      t.div,
+    /* @__PURE__ */ i(m, { children: r && /* @__PURE__ */ i(
+      e.div,
       {
         initial: { opacity: 0 },
         animate: { opacity: 1 },
-        onClick: () => a(!1),
+        onClick: () => o(!1),
         exit: { opacity: 0 },
-        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md",
-        children: /* @__PURE__ */ i(
-          t.div,
+        className: "xiping-video-dialog-modal",
+        children: /* @__PURE__ */ a(
+          e.div,
           {
             ...d,
             transition: { type: "spring", damping: 30, stiffness: 300 },
-            className: "relative mx-4 aspect-video w-full max-w-4xl md:mx-0",
+            className: "xiping-video-dialog-modal-content",
             children: [
-              /* @__PURE__ */ e(t.button, { className: "absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black", children: /* @__PURE__ */ e(y, { className: "size-5" }) }),
-              /* @__PURE__ */ e("div", { className: "relative isolate z-[1] size-full overflow-hidden rounded-2xl border-2 border-white", children: /* @__PURE__ */ e(
+              /* @__PURE__ */ i(e.button, { className: "xiping-video-dialog-close-button", children: /* @__PURE__ */ i(x, { className: "xiping-video-dialog-close-icon" }) }),
+              /* @__PURE__ */ i("div", { className: "xiping-video-dialog-video-wrapper", children: /* @__PURE__ */ i(
                 "iframe",
                 {
-                  src: r,
-                  className: "size-full rounded-2xl",
+                  src: n,
+                  className: "xiping-video-dialog-iframe",
                   allowFullScreen: !0,
                   allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                 }
@@ -122,5 +109,5 @@ function N({
   ] });
 }
 export {
-  N as VideoDialog
+  V as VideoDialog
 };

package/dist/es/index.d.ts

@@ -24,4 +24,7 @@ export * from './components/shiny-button';
 export * from './components/scratch-to-reveal';
 export * from './components/split-text';
 export * from './components/dome-gallery';
+export * from './components/text-type';
+export * from './components/gradient-text';
+export * from './components/variable-proximity';
 export * from './hooks/useStayTimeReport';