@xiping/react-components 1.0.36 → 1.0.40

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

@@ -1,98 +1,94 @@
 "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 { 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 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 { 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";
+/* empty css                */
+const u = (a) => {
+  a.target.closest(".xiping-main-content") && a.preventDefault();
+}, $ = (a) => {
   const {
-    isOpen: t,
-    onClose: g,
-    imgSrc: l,
-    thumbnailImages: w,
-    canDownload: b = !1,
+    isOpen: n,
+    onClose: f,
+    imgSrc: s,
+    thumbnailImages: x,
+    canDownload: w = !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];
+    closeClassName: C,
+    downloadClassName: N,
+    toolWrapperClassName: I,
+    initialIndex: b = 0
+  } = a, t = Array.isArray(s) ? s : [s], y = x || t, L = 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];
     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 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);
     }
-  }, z = () => {
+  }, j = () => {
     r(!1);
-  }, M = () => {
+  }, k = () => {
     r(!1);
   };
-  return B(() => {
-    if (t)
-      return document.addEventListener("touchmove", p, {
+  return P(() => {
+    if (n)
+      return document.addEventListener("touchmove", u, {
         passive: !1
       }), () => {
-        document.removeEventListener("touchmove", p);
+        document.removeEventListener("touchmove", u);
       };
-  }, [t]), /* @__PURE__ */ e(
-    S,
+  }, [n]), /* @__PURE__ */ e(
+    D,
     {
-      isOpen: t,
+      isOpen: n,
       size: "full",
       onClose: m,
       classNames: {
-        wrapper: P("", v)
+        wrapper: T(v)
       },
-      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__ */ 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(
+            B,
+            {
+              size: 24,
+              className: l("xiping-download-icon", N),
+              onClick: R
+            }
+          ),
+          /* @__PURE__ */ e(
+            V,
+            {
+              size: 24,
+              className: l("xiping-close-icon", C),
+              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,
             {
               draggable: "false",
-              src: a[s],
+              src: t[i],
               alt: "",
-              className: "w-screen h-full object-contain pointer-events-none",
-              onLoad: z,
-              onError: M,
+              className: "xiping-image",
+              onLoad: j,
+              onError: k,
               initial: { opacity: 0, scale: 0.95 },
               animate: { opacity: 1, scale: 1 },
               exit: { opacity: 0, scale: 1.05 },
@@ -101,37 +97,22 @@ const p = (o) => {
                 ease: "easeInOut"
               }
             },
-            s
+            i
           ) }) }),
-          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__ */ e("div", { className: "xiping-loading", children: /* @__PURE__ */ e(S, { color: "white", size: "lg" }) })
         ] }),
         /* @__PURE__ */ e(
           A,
           {
-            images: N,
-            currentIndex: s,
+            images: y,
+            currentIndex: i,
             onImageSelect: E
           }
         )
       ] }) })
     }
   );
-}, 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
+  $ 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
 };

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/index.d.ts

@@ -23,4 +23,6 @@ export * from './components/animated-list';
 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 './hooks/useStayTimeReport';