@xiping/react-components 1.0.40 → 1.0.43

package/dist/es/components/hyper-text/index.js

@@ -1,69 +1,71 @@
 "use client";
-import { jsx as u } from "react/jsx-runtime";
-import { cn as g } from "../../utils/utils.js";
+import { jsx as p } from "react/jsx-runtime";
+import { cn as h } from "../../utils/utils.js";
 import { motion as x, AnimatePresence as U } from "motion/react";
-import { useState as M, useRef as h, useEffect as I } from "react";
+import { useState as M, useRef as d, useEffect as I } from "react";
+/* empty css              */
 const j = Object.freeze(
   "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")
 ), q = (n) => Math.floor(Math.random() * n);
-function z({
+function B({
   children: n,
   className: C,
-  duration: f = 800,
-  delay: r = 0,
+  duration: u = 800,
+  delay: o = 0,
   as: E = "div",
-  startOnView: p = !1,
+  startOnView: f = !1,
   animateOnHover: F = !0,
   characterSet: s = j,
   ...R
 }) {
   const b = x.create(E, {
     forwardMotionProps: !0
-  }), [v, w] = M(
+  }), [v, y] = M(
     () => n.split("")
-  ), [i, o] = M(!1), a = h(0), m = h(null), D = () => {
-    F && !i && (a.current = 0, o(!0));
+  ), [i, r] = M(!1), a = d(0), m = d(null), D = () => {
+    F && !i && (a.current = 0, r(!0));
   };
   return I(() => {
-    if (!p) {
+    if (!f) {
       const t = setTimeout(() => {
-        o(!0);
-      }, r);
+        r(!0);
+      }, o);
       return () => clearTimeout(t);
     }
     const e = new IntersectionObserver(
       ([t]) => {
         t.isIntersecting && (setTimeout(() => {
-          o(!0);
-        }, r), e.disconnect());
+          r(!0);
+        }, o), e.disconnect());
       },
       { threshold: 0.1, rootMargin: "-30% 0px -30% 0px" }
     );
     return m.current && e.observe(m.current), () => e.disconnect();
-  }, [r, p]), I(() => {
+  }, [o, f]), I(() => {
     if (!i) return;
     const e = n.length, t = performance.now();
     let c;
     const l = (H) => {
-      const N = H - t, T = Math.min(N / f, 1);
-      a.current = T * e, w(
+      const N = H - t, g = Math.min(N / u, 1);
+      a.current = g * e, y(
         (P) => P.map(
-          (A, d) => A === " " ? A : d <= a.current ? n[d] : s[q(s.length)]
+          (T, A) => T === " " ? T : A <= a.current ? n[A] : s[q(s.length)]
         )
-      ), T < 1 ? c = requestAnimationFrame(l) : o(!1);
+      ), g < 1 ? c = requestAnimationFrame(l) : r(!1);
     };
     return c = requestAnimationFrame(l), () => cancelAnimationFrame(c);
-  }, [n, f, i, s]), /* @__PURE__ */ u(
+  }, [n, u, i, s]), // eslint-disable-next-line react-hooks/static-components
+  /* @__PURE__ */ p(
     b,
     {
       ref: m,
-      className: g("overflow-hidden py-2 text-4xl font-bold", C),
+      className: h("xiping-hyper-container", C),
       onMouseEnter: D,
       ...R,
-      children: /* @__PURE__ */ u(U, { children: v.map((e, t) => /* @__PURE__ */ u(
+      children: /* @__PURE__ */ p(U, { children: v.map((e, t) => /* @__PURE__ */ p(
         x.span,
         {
-          className: g("font-mono", e === " " ? "w-3" : ""),
+          className: h("xiping-hyper-char", e === " " ? "xiping-hyper-space" : ""),
           children: e.toUpperCase()
         },
         t
@@ -72,5 +74,5 @@ function z({
   );
 }
 export {
-  z as HyperText
+  B as HyperText
 };

package/dist/es/components/image-viewer/ImageViewer.js

@@ -1,94 +1,118 @@
 "use client";
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Modal as D, ModalContent as O, Spinner as S } from "@heroui/react";
-import U from "../pinch-content/PinchContent.js";
-import A from "./ImageThumbnails.js";
-import { useState as h, useEffect as P } from "react";
-import T from "clsx";
-import { Download as B, X as V } from "lucide-react";
-import { AnimatePresence as W, motion as X } from "motion/react";
-import { cn as l } from "../../utils/utils.js";
+import { jsx as n, jsxs as h } from "react/jsx-runtime";
+import { Modal as z, ModalContent as O, Spinner as S } from "@heroui/react";
+import P from "../pinch-content/PinchContent.js";
+import V from "./ImageThumbnails.js";
+import { useState as v, useCallback as b, useEffect as x } from "react";
+import X from "clsx";
+import { Download as B, X as K } from "lucide-react";
+import { AnimatePresence as W, motion as _ } from "motion/react";
+import { cn as f } from "../../utils/utils.js";
 /* empty css                */
-const u = (a) => {
-  a.target.closest(".xiping-main-content") && a.preventDefault();
-}, $ = (a) => {
+const C = (c) => {
+  c.target.closest(".xiping-main-content") && c.preventDefault();
+}, ne = (c) => {
   const {
-    isOpen: n,
-    onClose: f,
-    imgSrc: s,
-    thumbnailImages: x,
-    canDownload: w = !1,
-    wrapperClassName: v,
-    closeClassName: C,
-    downloadClassName: N,
-    toolWrapperClassName: I,
-    initialIndex: b = 0
-  } = a, t = Array.isArray(s) ? s : [s], y = x || t, L = Math.max(
+    isOpen: a,
+    onClose: w,
+    imgSrc: d,
+    thumbnailImages: N,
+    canDownload: y = !1,
+    wrapperClassName: I,
+    closeClassName: E,
+    downloadClassName: L,
+    toolWrapperClassName: k,
+    initialIndex: D = 0
+  } = c, o = Array.isArray(d) ? d : [d], A = N || o, R = Math.max(
     0,
-    Math.min(b, t.length - 1)
-  ), [i, E] = h(L), [M, r] = h(!0), m = () => {
-    r(!0), f();
-  }, R = async () => {
-    const d = t[i];
+    Math.min(D, o.length - 1)
+  ), [l, g] = v(R), [M, p] = v(!0), m = b(() => {
+    p(!0), w();
+  }, [w]), T = async () => {
+    const i = o[l];
     try {
-      const z = await (await fetch(d)).blob(), g = window.URL.createObjectURL(z), o = document.createElement("a");
-      o.href = g, o.download = d.split("/").pop() || "image", document.body.appendChild(o), o.click(), window.URL.revokeObjectURL(g), document.body.removeChild(o);
-    } catch (p) {
-      console.error("Error downloading image:", p);
+      const r = await (await fetch(i)).blob(), e = window.URL.createObjectURL(r), s = document.createElement("a");
+      s.href = e, s.download = i.split("/").pop() || "image", document.body.appendChild(s), s.click(), window.URL.revokeObjectURL(e), document.body.removeChild(s);
+    } catch (t) {
+      console.error("Error downloading image:", t);
     }
+  }, U = () => {
+    p(!1);
   }, j = () => {
-    r(!1);
-  }, k = () => {
-    r(!1);
+    p(!1);
   };
-  return P(() => {
-    if (n)
-      return document.addEventListener("touchmove", u, {
+  x(() => {
+    if (a)
+      return document.addEventListener("touchmove", C, {
         passive: !1
       }), () => {
-        document.removeEventListener("touchmove", u);
+        document.removeEventListener("touchmove", C);
       };
-  }, [n]), /* @__PURE__ */ e(
-    D,
+  }, [a]);
+  const u = b(() => {
+    "vibrate" in navigator && navigator.vibrate([50, 50, 50]);
+  }, []);
+  return x(() => {
+    if (!a) return;
+    const i = (t) => {
+      const r = t.target;
+      if (!(r.tagName === "INPUT" || r.tagName === "TEXTAREA" || r.isContentEditable))
+        switch (t.key) {
+          case "ArrowLeft":
+            t.preventDefault(), g((e) => e > 0 ? e - 1 : (u(), e));
+            break;
+          case "ArrowRight":
+            t.preventDefault(), g((e) => e < o.length - 1 ? e + 1 : (u(), e));
+            break;
+          case "Escape":
+            t.preventDefault(), m();
+            break;
+        }
+    };
+    return document.addEventListener("keydown", i), () => {
+      document.removeEventListener("keydown", i);
+    };
+  }, [a, o.length, m, u]), /* @__PURE__ */ n(
+    z,
     {
-      isOpen: n,
+      isOpen: a,
       size: "full",
       onClose: m,
       classNames: {
-        wrapper: T(v)
+        wrapper: X(I)
       },
       className: "xiping-modal-overlay",
       hideCloseButton: !0,
       portalContainer: document.body,
-      children: /* @__PURE__ */ e(O, { className: "xiping-modal-content", children: /* @__PURE__ */ c("div", { className: "xiping-wrapper", children: [
-        /* @__PURE__ */ c("div", { className: l("xiping-tool-wrapper", I), children: [
-          w && /* @__PURE__ */ e(
+      children: /* @__PURE__ */ n(O, { className: "xiping-modal-content", children: /* @__PURE__ */ h("div", { className: "xiping-wrapper", children: [
+        /* @__PURE__ */ h("div", { className: f("xiping-tool-wrapper", k), children: [
+          y && /* @__PURE__ */ n(
             B,
             {
               size: 24,
-              className: l("xiping-download-icon", N),
-              onClick: R
+              className: f("xiping-download-icon", L),
+              onClick: T
             }
           ),
-          /* @__PURE__ */ e(
-            V,
+          /* @__PURE__ */ n(
+            K,
             {
               size: 24,
-              className: l("xiping-close-icon", C),
+              className: f("xiping-close-icon", E),
               onClick: m
             }
           )
         ] }),
-        /* @__PURE__ */ c("div", { className: "xiping-main-content", children: [
-          /* @__PURE__ */ e(U, { canRotate: !1, className: "xiping-pinch-content", children: /* @__PURE__ */ e(W, { mode: "wait", children: /* @__PURE__ */ e(
-            X.img,
+        /* @__PURE__ */ h("div", { className: "xiping-main-content", children: [
+          /* @__PURE__ */ n(P, { canRotate: !1, className: "xiping-pinch-content", children: /* @__PURE__ */ n(W, { mode: "wait", children: /* @__PURE__ */ n(
+            _.img,
             {
               draggable: "false",
-              src: t[i],
+              src: o[l],
               alt: "",
               className: "xiping-image",
-              onLoad: j,
-              onError: k,
+              onLoad: U,
+              onError: j,
               initial: { opacity: 0, scale: 0.95 },
               animate: { opacity: 1, scale: 1 },
               exit: { opacity: 0, scale: 1.05 },
@@ -97,16 +121,16 @@ const u = (a) => {
                 ease: "easeInOut"
               }
             },
-            i
+            l
           ) }) }),
-          M && /* @__PURE__ */ e("div", { className: "xiping-loading", children: /* @__PURE__ */ e(S, { color: "white", size: "lg" }) })
+          M && /* @__PURE__ */ n("div", { className: "xiping-loading", children: /* @__PURE__ */ n(S, { color: "white", size: "lg" }) })
         ] }),
-        /* @__PURE__ */ e(
-          A,
+        /* @__PURE__ */ n(
+          V,
           {
-            images: y,
-            currentIndex: i,
-            onImageSelect: E
+            images: A,
+            currentIndex: l,
+            onImageSelect: g
           }
         )
       ] }) })
@@ -114,5 +138,5 @@ const u = (a) => {
   );
 };
 export {
-  $ as default
+  ne as default
 };

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/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
+};