@xiping/react-components 1.0.39 → 1.0.43

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

@@ -0,0 +1,22 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+/* empty css          */
+function l({
+  children: e,
+  className: i = "",
+  colors: n = ["#40ffaa", "#4079ff", "#40ffaa", "#4079ff", "#40ffaa"],
+  animationSpeed: r = 8,
+  showBorder: s = !1
+}) {
+  const a = {
+    backgroundImage: `linear-gradient(to right, ${n.join(", ")})`,
+    animationDuration: `${r}s`
+  };
+  return /* @__PURE__ */ f("div", { className: `animated-gradient-text ${i}`, children: [
+    s && /* @__PURE__ */ t("div", { className: "gradient-overlay", style: a }),
+    /* @__PURE__ */ t("div", { className: "text-content", style: a, children: e })
+  ] });
+}
+export {
+  l as GradientText,
+  l as default
+};

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,98 +1,118 @@
 "use client";
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { Modal as S, ModalContent as D, cn as c, Spinner as O } from "@heroui/react";
-import U from "../pinch-content/PinchContent.js";
-import A from "./ImageThumbnails.js";
-import { useState as u, useEffect as B } from "react";
-import P from "clsx";
-import { Download as T, X as H } from "lucide-react";
-import { AnimatePresence as V, motion as W } from "motion/react";
-const p = (o) => {
-  o.target.closest(".image-viewer-main-content") && o.preventDefault();
-}, Z = (o) => {
+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 C = (c) => {
+  c.target.closest(".xiping-main-content") && c.preventDefault();
+}, ne = (c) => {
   const {
-    isOpen: t,
-    onClose: g,
-    imgSrc: l,
-    thumbnailImages: w,
-    canDownload: b = !1,
-    wrapperClassName: v,
-    closeClassName: y,
-    downloadClassName: x,
-    toolWrapperClassName: C,
-    initialIndex: I = 0
-  } = o, a = Array.isArray(l) ? l : [l], N = w || a, L = Math.max(0, Math.min(I, a.length - 1)), [s, E] = u(L), [j, r] = u(!0), m = () => {
-    r(!0), g();
-  }, k = async () => {
-    const d = a[s];
+    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(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 R = await (await fetch(d)).blob(), h = window.URL.createObjectURL(R), n = document.createElement("a");
-      n.href = h, n.download = d.split("/").pop() || "image", document.body.appendChild(n), n.click(), window.URL.revokeObjectURL(h), document.body.removeChild(n);
-    } catch (f) {
-      console.error("Error downloading image:", f);
+      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);
     }
-  }, z = () => {
-    r(!1);
-  }, M = () => {
-    r(!1);
+  }, U = () => {
+    p(!1);
+  }, j = () => {
+    p(!1);
   };
-  return B(() => {
-    if (t)
-      return document.addEventListener("touchmove", p, {
+  x(() => {
+    if (a)
+      return document.addEventListener("touchmove", C, {
         passive: !1
       }), () => {
-        document.removeEventListener("touchmove", p);
+        document.removeEventListener("touchmove", C);
       };
-  }, [t]), /* @__PURE__ */ e(
-    S,
+  }, [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: t,
+      isOpen: a,
       size: "full",
       onClose: m,
       classNames: {
-        wrapper: P("", v)
+        wrapper: X(I)
       },
-      className: "bg-black/70",
+      className: "xiping-modal-overlay",
       hideCloseButton: !0,
       portalContainer: document.body,
-      children: /* @__PURE__ */ e(D, { className: "overflow-hidden", children: /* @__PURE__ */ i("div", { className: "w-screen h-screen relative flex flex-col pt-safe-offset-0", children: [
-        /* @__PURE__ */ i(
-          "div",
-          {
-            className: c(
-              "absolute top-4 right-4 flex gap-4 z-10",
-              C
-            ),
-            children: [
-              b && /* @__PURE__ */ e(
-                T,
-                {
-                  size: 24,
-                  className: c("text-white cursor-pointer", x),
-                  onClick: k
-                }
-              ),
-              /* @__PURE__ */ e(
-                H,
-                {
-                  size: 24,
-                  className: c("text-white cursor-pointer", y),
-                  onClick: m
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ i("div", { className: "flex-1 min-h-0 relative flex items-center justify-center image-viewer-main-content", children: [
-          /* @__PURE__ */ e(U, { canRotate: !1, className: "w-full h-full", children: /* @__PURE__ */ e(V, { mode: "wait", children: /* @__PURE__ */ e(
-            W.img,
+      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: f("xiping-download-icon", L),
+              onClick: T
+            }
+          ),
+          /* @__PURE__ */ n(
+            K,
+            {
+              size: 24,
+              className: f("xiping-close-icon", E),
+              onClick: m
+            }
+          )
+        ] }),
+        /* @__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: a[s],
+              src: o[l],
               alt: "",
-              className: "w-screen h-full object-contain pointer-events-none",
-              onLoad: z,
-              onError: M,
+              className: "xiping-image",
+              onLoad: U,
+              onError: j,
               initial: { opacity: 0, scale: 0.95 },
               animate: { opacity: 1, scale: 1 },
               exit: { opacity: 0, scale: 1.05 },
@@ -101,37 +121,22 @@ const p = (o) => {
                 ease: "easeInOut"
               }
             },
-            s
+            l
           ) }) }),
-          j && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ e(O, { 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: N,
-            currentIndex: s,
-            onImageSelect: E
+            images: A,
+            currentIndex: l,
+            onImageSelect: g
           }
         )
       ] }) })
     }
   );
-}, X = `
-  .scrollbar-hide {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none;
-  }
-`;
-if (typeof document < "u") {
-  const o = "image-viewer-scrollbar-hide";
-  if (!document.getElementById(o)) {
-    const t = document.createElement("style");
-    t.id = o, t.textContent = X, document.head.appendChild(t);
-  }
-}
+};
 export {
-  Z as default
+  ne as default
 };

package/dist/es/components/pinch-content/PinchContent.d.ts

@@ -13,6 +13,22 @@ export interface PinchContentProps {
     wheelZoomFactor?: number;
     rubberband?: boolean;
     style?: CSSProperties;
+    /** 外部控制的缩放值（受控模式） */
+    scale?: number;
+    /** 缩放值变化时的回调 */
+    onScaleChange?: (scale: number) => void;
 }
-declare const PinchContent: (props: PinchContentProps) => import("react/jsx-runtime").JSX.Element;
+export interface PinchContentRef {
+    /** 放大 */
+    zoomIn: (factor?: number) => void;
+    /** 缩小 */
+    zoomOut: (factor?: number) => void;
+    /** 设置缩放值 */
+    setScale: (scale: number) => void;
+    /** 重置到初始状态 */
+    reset: () => void;
+    /** 获取当前缩放值 */
+    getScale: () => number;
+}
+declare const PinchContent: import('react').ForwardRefExoticComponent<PinchContentProps & import('react').RefAttributes<PinchContentRef>>;
 export default PinchContent;

package/dist/es/components/pinch-content/PinchContent.js

@@ -1,86 +1,127 @@
-import { jsx as B } from "react/jsx-runtime";
-import { useSpring as C, animated as G } from "@react-spring/web";
-import { createUseGesture as N, dragAction as U, pinchAction as W, wheelAction as j } from "@use-gesture/react";
-import { useRef as F } from "react";
-import { useMount as k, useUnmount as q } from "ahooks";
-import z from "clsx";
-const H = N([U, W, j]), a = (c) => c.preventDefault(), V = (c) => {
-  const {
-    className: f,
-    children: h,
-    pinchWithoutMove: m = !1,
-    canPinch: d = !0,
-    canDrag: x = !0,
-    canRotate: v = !0,
-    scaleBounds: l = { min: 0.3, max: 10 },
-    wheelZoomFactor: p = 1e-3,
-    rubberband: y = !0
-  } = c, e = F(null);
-  k(() => {
-    e.current?.addEventListener("gesturestart", a), e.current?.addEventListener("gesturechange", a), e.current?.addEventListener("gestureend", a);
-  }), q(() => {
-    e.current?.removeEventListener("gesturestart", a), e.current?.removeEventListener("gesturechange", a), e.current?.removeEventListener("gestureend", a);
-  });
-  const [t, g] = C(() => ({
-    x: 0,
-    y: 0,
-    scale: 1,
-    rotateZ: 0
-  }));
-  return H(
-    {
-      onWheel: ({ event: o, delta: [, r] }) => {
-        if (!d) return;
-        const n = t.scale.get() * (1 - r * p), i = Math.min(
-          Math.max(n, l.min),
-          l.max
+import { jsx as U } from "react/jsx-runtime";
+import { useSpring as W, animated as j } from "@react-spring/web";
+import { createUseGesture as F, dragAction as H, pinchAction as O, wheelAction as k } from "@use-gesture/react";
+import { forwardRef as q, useRef as J, useEffect as K, useImperativeHandle as Q } from "react";
+import { useMount as T, useUnmount as V } from "ahooks";
+import X from "clsx";
+const Y = F([H, O, k]), i = (u) => u.preventDefault(), _ = q(
+  (u, x) => {
+    const {
+      className: p,
+      children: S,
+      pinchWithoutMove: v = !1,
+      canPinch: h = !0,
+      canDrag: y = !0,
+      canRotate: M = !0,
+      scaleBounds: r = { min: 0.3, max: 10 },
+      wheelZoomFactor: E = 1e-3,
+      rubberband: w = !0,
+      scale: m,
+      onScaleChange: d
+    } = u, a = J(null);
+    T(() => {
+      a.current?.addEventListener("gesturestart", i), a.current?.addEventListener("gesturechange", i), a.current?.addEventListener("gestureend", i);
+    }), V(() => {
+      a.current?.removeEventListener("gesturestart", i), a.current?.removeEventListener("gesturechange", i), a.current?.removeEventListener("gestureend", i);
+    });
+    const L = m ?? 1, [t, c] = W(() => ({
+      x: 0,
+      y: 0,
+      scale: L,
+      rotateZ: 0
+    }));
+    K(() => {
+      if (m !== void 0) {
+        const e = Math.min(
+          Math.max(m, r.min),
+          r.max
         );
-        g.start({ scale: i });
+        c.start({ scale: e });
+      }
+    }, [m, r.min, r.max, c]);
+    const g = (e) => {
+      const n = Math.min(
+        Math.max(e, r.min),
+        r.max
+      );
+      c.start({ scale: n }), d?.(n);
+    };
+    return Q(x, () => ({
+      zoomIn: (e = 1.2) => {
+        const n = t.scale.get();
+        g(n * e);
+      },
+      zoomOut: (e = 1.2) => {
+        const n = t.scale.get();
+        g(n / e);
       },
-      onDrag: ({ pinching: o, cancel: r, offset: [u, n], ...i }) => {
-        if (!x || o) return r();
-        g.start({ x: u, y: n });
+      setScale: (e) => {
+        g(e);
       },
-      onPinch: ({
-        origin: [o, r],
-        first: u,
-        movement: [n],
-        offset: [i, E],
-        memo: s,
-        cancel: L
-      }) => {
-        if (!d) return L();
-        if (u) {
-          const { width: M, height: Z, x: A, y: D } = e.current.getBoundingClientRect(), P = o - (A + M / 2), R = r - (D + Z / 2);
-          s = [t.x.get(), t.y.get(), P, R];
+      reset: () => {
+        c.start({ x: 0, y: 0, scale: 1, rotateZ: 0 }), d?.(1);
+      },
+      getScale: () => t.scale.get()
+    })), Y(
+      {
+        onWheel: ({ delta: [, e] }) => {
+          if (!h) return;
+          const l = t.scale.get() * (1 - e * E), s = Math.min(
+            Math.max(l, r.min),
+            r.max
+          );
+          c.start({ scale: s }), d?.(s);
+        },
+        onDrag: ({ pinching: e, cancel: n, offset: [l, s] }) => {
+          if (!y || e) return n();
+          c.start({ x: l, y: s });
+        },
+        onPinch: ({
+          origin: [e, n],
+          first: l,
+          movement: [s],
+          offset: [R, Z],
+          memo: o,
+          cancel: b
+        }) => {
+          if (!h) return b();
+          if (l) {
+            const { width: D, height: N, x: z, y: B } = a.current.getBoundingClientRect(), G = e - (z + D / 2), I = n - (B + N / 2);
+            o = [t.x.get(), t.y.get(), G, I];
+          }
+          const f = Math.min(
+            Math.max(R, r.min),
+            r.max
+          ), C = o[0] - (s - 1) * o[2], P = o[1] - (s - 1) * o[3], A = {
+            scale: f,
+            rotateZ: M ? Z : t.rotateZ.get(),
+            ...v ? { x: t.x.get(), y: t.y.get() } : { x: C, y: P }
+          };
+          return c.start(A), d?.(f), o;
         }
-        const w = s[0] - (n - 1) * s[2], S = s[1] - (n - 1) * s[3], b = {
-          scale: i,
-          rotateZ: v ? E : t.rotateZ.get(),
-          ...m ? { x: t.x.get(), y: t.y.get() } : { x: w, y: S }
-        };
-        return g.start(b), s;
-      }
-    },
-    {
-      target: e,
-      drag: { from: () => [t.x.get(), t.y.get()] },
-      pinch: { scaleBounds: l, rubberband: y },
-      wheel: { enabled: !0 }
-    }
-  ), /* @__PURE__ */ B(
-    G.div,
-    {
-      className: z("select-none", f),
-      ref: e,
-      style: {
-        ...c.style,
-        ...t
       },
-      children: h
-    }
-  );
-};
+      {
+        target: a,
+        drag: { from: () => [t.x.get(), t.y.get()] },
+        pinch: { scaleBounds: r, rubberband: w },
+        wheel: { enabled: !0 }
+      }
+    ), /* @__PURE__ */ U(
+      j.div,
+      {
+        className: X(p),
+        ref: a,
+        style: {
+          userSelect: "none",
+          ...u.style,
+          ...t
+        },
+        children: S
+      }
+    );
+  }
+);
+_.displayName = "PinchContent";
 export {
-  V as default
+  _ as default
 };