@xiping/react-components 1.0.40 → 1.0.45

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/shimmer-button/ShimmerButton.js

@@ -1,75 +1,42 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import p from "react";
-import { cn as e } from "../../utils/utils.js";
-const m = p.forwardRef(
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import d from "react";
+import { cn as h } from "../../utils/utils.js";
+/* empty css                  */
+const l = d.forwardRef(
   ({
-    shimmerColor: a = "#ffffff",
-    shimmerSize: t = "0.05em",
-    shimmerDuration: s = "3s",
-    borderRadius: i = "100px",
-    background: o = "rgba(0, 0, 0, 1)",
-    className: n,
-    children: d,
-    ...f
-  }, u) => /* @__PURE__ */ l(
+    shimmerColor: r = "#ffffff",
+    shimmerSize: e = "0.05em",
+    shimmerDuration: m = "3s",
+    borderRadius: s = "100px",
+    background: t = "rgba(0, 0, 0, 1)",
+    className: a,
+    children: o,
+    ...n
+  }, p) => /* @__PURE__ */ c(
     "button",
     {
       style: {
         "--spread": "90deg",
-        "--shimmer-color": a,
-        "--radius": i,
-        "--speed": s,
-        "--cut": t,
-        "--bg": o
+        "--shimmer-color": r,
+        "--radius": s,
+        "--speed": m,
+        "--cut": e,
+        "--bg": t
       },
-      className: e(
-        "group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black",
-        "transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
-        n
-      ),
-      ref: u,
-      ...f,
+      className: h("xiping-shimmer-button", a),
+      ref: p,
+      ...n,
       children: [
-        /* @__PURE__ */ r(
-          "div",
-          {
-            className: e(
-              "-z-30 blur-[2px]",
-              "absolute inset-0 overflow-visible [container-type:size]"
-            ),
-            children: /* @__PURE__ */ r("div", { className: "absolute inset-0 h-[100cqh] animate-shimmer-slide [aspect-ratio:1] [border-radius:0] [mask:none]", children: /* @__PURE__ */ r("div", { className: "absolute -inset-full w-auto rotate-0 animate-spin-around [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]" }) })
-          }
-        ),
-        d,
-        /* @__PURE__ */ r(
-          "div",
-          {
-            className: e(
-              "insert-0 absolute size-full",
-              "rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
-              // transition
-              "transform-gpu transition-all duration-300 ease-in-out",
-              // on hover
-              "group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
-              // on click
-              "group-active:shadow-[inset_0_-10px_10px_#ffffff3f]"
-            )
-          }
-        ),
-        /* @__PURE__ */ r(
-          "div",
-          {
-            className: e(
-              "absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]"
-            )
-          }
-        )
+        /* @__PURE__ */ i("div", { className: "xiping-shimmer-button-spark-container", children: /* @__PURE__ */ i("div", { className: "xiping-shimmer-button-spark", children: /* @__PURE__ */ i("div", { className: "xiping-shimmer-button-spark-before" }) }) }),
+        o,
+        /* @__PURE__ */ i("div", { className: "xiping-shimmer-button-highlight" }),
+        /* @__PURE__ */ i("div", { className: "xiping-shimmer-button-backdrop" })
       ]
     }
   )
 );
-m.displayName = "ShimmerButton";
+l.displayName = "ShimmerButton";
 export {
-  m as ShimmerButton,
-  m as default
+  l as ShimmerButton,
+  l as default
 };

package/dist/es/components/shiny-button/ShinyButton.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
 import { cn as s } from "../../utils/utils.js";
 import { motion as o } from "motion/react";
-import l from "react";
-const p = {
+import p from "react";
+/* empty css                */
+const c = {
   initial: { "--x": "100%", scale: 0.8 },
   animate: { "--x": "-100%", scale: 1 },
   whileTap: { scale: 0.95 },
@@ -22,28 +23,25 @@ const p = {
       mass: 0.5
     }
   }
-}, c = l.forwardRef(({ children: a, className: e, ...t }, i) => /* @__PURE__ */ n(
+}, l = p.forwardRef(({ children: r, className: e, ...n }, i) => /* @__PURE__ */ t(
   o.button,
   {
     ref: i,
-    className: s(
-      "relative cursor-pointer rounded-lg px-6 py-2 font-medium backdrop-blur-xl border transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,var(--primary)/10%_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_var(--primary)/10%]",
-      e
-    ),
-    ...p,
-    ...t,
+    className: s("xiping-shiny-button", e),
+    ...c,
+    ...n,
     children: [
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ a(
         "span",
         {
-          className: "relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]",
+          className: "xiping-shiny-button-text",
           style: {
             maskImage: "linear-gradient(-75deg,var(--primary) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),var(--primary) calc(var(--x) + 100%))"
           },
-          children: a
+          children: r
         }
       ),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ a(
         "span",
         {
           style: {
@@ -51,13 +49,13 @@ const p = {
             WebkitMask: "linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0))",
             backgroundImage: "linear-gradient(-75deg,var(--primary)/10% calc(var(--x)+20%),var(--primary)/50% calc(var(--x)+25%),var(--primary)/10% calc(var(--x)+100%))"
           },
-          className: "absolute inset-0 z-10 block rounded-[inherit] p-px"
+          className: "xiping-shiny-button-border"
         }
       )
     ]
   }
 ));
-c.displayName = "ShinyButton";
+l.displayName = "ShinyButton";
 export {
-  c as ShinyButton
+  l as ShinyButton
 };

package/dist/es/components/sparkles-text/SparklesText.js

@@ -1,19 +1,20 @@
 "use client";
-import { jsx as r, jsxs as x } from "react/jsx-runtime";
-import { motion as L } from "motion/react";
-import { useState as S, useEffect as y } from "react";
-import { cn as M } from "../../utils/utils.js";
-const $ = ({ id: o, x: t, y: i, color: s, delay: l, scale: c }) => /* @__PURE__ */ r(
-  L.svg,
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { motion as k } from "motion/react";
+import { useState as L, useEffect as S } from "react";
+import { cn as y } from "../../utils/utils.js";
+/* empty css                 */
+const M = ({ id: i, x: t, y: o, color: s, delay: c, scale: l }) => /* @__PURE__ */ r(
+  k.svg,
   {
-    className: "pointer-events-none absolute z-20",
-    initial: { opacity: 0, left: t, top: i },
+    className: "xiping-sparkle",
+    initial: { opacity: 0, left: t, top: o },
     animate: {
       opacity: [0, 1, 0],
-      scale: [0, c, 0],
+      scale: [0, l, 0],
       rotate: [75, 120, 150]
     },
-    transition: { duration: 0.8, repeat: 1 / 0, delay: l },
+    transition: { duration: 0.8, repeat: 1 / 0, delay: c },
     width: "21",
     height: "21",
     viewBox: "0 0 21 21",
@@ -25,46 +26,46 @@ const $ = ({ id: o, x: t, y: i, color: s, delay: l, scale: c }) => /* @__PURE__
       }
     )
   },
-  o
-), E = ({
-  children: o,
+  i
+), I = ({
+  children: i,
   colors: t = { first: "#9E7AFF", second: "#FE8BBB" },
-  className: i,
+  className: o,
   sparklesCount: s = 10,
-  ...l
+  ...c
 }) => {
-  const [c, d] = S([]);
-  return y(() => {
+  const [l, p] = L([]);
+  return S(() => {
     const a = () => {
-      const e = `${Math.random() * 100}%`, n = `${Math.random() * 100}%`, h = Math.random() > 0.5 ? t.first : t.second, u = Math.random() * 2, C = Math.random() * 1 + 0.3, v = Math.random() * 10 + 5;
-      return { id: `${e}-${n}-${Date.now()}`, x: e, y: n, color: h, delay: u, scale: C, lifespan: v };
-    }, p = () => {
+      const e = `${Math.random() * 100}%`, n = `${Math.random() * 100}%`, h = Math.random() > 0.5 ? t.first : t.second, x = Math.random() * 2, C = Math.random() * 1 + 0.3, u = Math.random() * 10 + 5;
+      return { id: `${e}-${n}-${Date.now()}`, x: e, y: n, color: h, delay: x, scale: C, lifespan: u };
+    }, d = () => {
       const e = Array.from({ length: s }, a);
-      d(e);
+      p(e);
     }, m = () => {
-      d(
+      p(
         (e) => e.map((n) => n.lifespan <= 0 ? a() : { ...n, lifespan: n.lifespan - 0.1 })
       );
     };
-    p();
+    d();
     const f = setInterval(m, 100);
     return () => clearInterval(f);
   }, [t.first, t.second, s]), /* @__PURE__ */ r(
     "div",
     {
-      className: M("text-6xl font-bold", i),
-      ...l,
+      className: y("xiping-sparkles-text", o),
+      ...c,
       style: {
         "--sparkles-first-color": `${t.first}`,
         "--sparkles-second-color": `${t.second}`
       },
-      children: /* @__PURE__ */ x("span", { className: "relative inline-block", children: [
-        c.map((a) => /* @__PURE__ */ r($, { ...a }, a.id)),
-        /* @__PURE__ */ r("strong", { children: o })
+      children: /* @__PURE__ */ g("span", { className: "xiping-sparkles-text-wrapper", children: [
+        l.map((a) => /* @__PURE__ */ r(M, { ...a }, a.id)),
+        /* @__PURE__ */ r("strong", { children: i })
       ] })
     }
   );
 };
 export {
-  E as SparklesText
+  I as SparklesText
 };

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/subtitle-player/SubtitlePlayer.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+export type SubtitleType = 'srt' | 'vtt';
+export interface SubtitleData {
+    /** 字幕类型 */
+    type: SubtitleType;
+    /** 字幕内容字符串 */
+    content: string;
+    /** 可选的语言标识，用于多字幕对照时的标签显示 */
+    label?: string;
+}
+export type SubtitleDisplayMode = 'current' | 'lyrics';
+export interface SubtitlePlayerProps {
+    /** 字幕数据，可以是单个字幕或多个字幕（用于对照） */
+    subtitles: SubtitleData | SubtitleData[];
+    /** 当前播放进度（秒数） */
+    currentTime: number;
+    /** 显示模式：'current' 只显示当前字幕，'lyrics' 显示全部字幕并高亮当前 */
+    mode?: SubtitleDisplayMode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+/**
+ * 字幕播放组件
+ * 支持 SRT 和 WebVTT 格式，可以同时显示多个字幕进行对照
+ * 支持两种显示模式：当前模式（只显示当前字幕）和歌词模式（显示全部并高亮当前）
+ */
+export declare const SubtitlePlayer: React.FC<SubtitlePlayerProps>;
+export default SubtitlePlayer;