@xiping/react-components 1.0.55 → 1.0.57

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

@@ -1,21 +1,21 @@
 "use client";
 import { jsx as T } from "react/jsx-runtime";
-import { cn as x } from "../../utils/utils.js";
-import { motion as I } from "motion/react";
-import { useState as u, useRef as b, useEffect as a } from "react";
-/* empty css          */
+import { motion as x } from "motion/react";
+import { useState as u, useRef as I, useEffect as a } from "react";
+import b from "clsx";
+import './index.css';/* empty css          */
 function S({
   children: r,
   className: m,
-  duration: s = 100,
+  duration: o = 100,
   delay: n = 0,
   as: l = "div",
   startOnView: i = !1,
   ...p
 }) {
-  const d = I.create(l, {
+  const d = x.create(l, {
     forwardMotionProps: !0
-  }), [g, v] = u(""), [c, f] = u(!1), o = b(null);
+  }), [g, v] = u(""), [c, f] = u(!1), s = I(null);
   return a(() => {
     if (!i) {
       const t = setTimeout(() => {
@@ -31,21 +31,21 @@ function S({
       },
       { threshold: 0.1 }
     );
-    return o.current && e.observe(o.current), () => e.disconnect();
+    return s.current && e.observe(s.current), () => e.disconnect();
   }, [n, i]), a(() => {
     if (!c) return;
     let e = 0;
     const t = setInterval(() => {
       e < r.length ? (v(r.substring(0, e + 1)), e++) : clearInterval(t);
-    }, s);
+    }, o);
     return () => {
       clearInterval(t);
     };
-  }, [r, s, c]), /* @__PURE__ */ T(
+  }, [r, o, c]), /* @__PURE__ */ T(
     d,
     {
-      ref: o,
-      className: x("xiping-typing-animation", m),
+      ref: s,
+      className: b("xiping-typing-animation", m),
       ...p,
       children: g
     }

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

@@ -0,0 +1 @@
+.xiping-variable-proximity{font-family:Roboto Flex,Noto Sans SC,PingFang SC,Microsoft YaHei,SimHei,sans-serif}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

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

@@ -1,7 +1,8 @@
 import { jsxs as G, jsx as k } from "react/jsx-runtime";
 import { forwardRef as H, useRef as y, useMemo as N, useEffect as w } from "react";
 import { motion as J } from "motion/react";
-/* empty css          */
+import K from "clsx";
+import './index.css';/* empty css          */
 const l = {
   robotoFlex: !1,
   notoSansSC: !1,
@@ -15,7 +16,7 @@ function V(n) {
     return !0;
   }
 }
-function K() {
+function O() {
   if (l.loading || l.robotoFlex && l.notoSansSC) return;
   l.loading = !0;
   const n = V("Roboto Flex"), r = V("Noto Sans SC");
@@ -61,12 +62,12 @@ function K() {
   };
   d(0);
 }
-function O(n = !0) {
+function Q(n = !0) {
   w(() => {
-    n && typeof document < "u" && K();
+    n && typeof document < "u" && O();
   }, [n]);
 }
-function Q(n) {
+function W(n) {
   w(() => {
     let r;
     const i = () => {
@@ -75,7 +76,7 @@ function Q(n) {
     return r = requestAnimationFrame(i), () => cancelAnimationFrame(r);
   }, [n]);
 }
-function W(n) {
+function Z(n) {
   const r = y({ x: 0, y: 0 });
   return w(() => {
     const i = (t, s) => {
@@ -93,7 +94,7 @@ function W(n) {
     };
   }, [n]), r;
 }
-const Z = H(
+const _ = H(
   (n, r) => {
     const {
       label: i,
@@ -109,11 +110,11 @@ const Z = H(
       autoLoadFonts: P = !0,
       ...A
     } = n;
-    O(P && !g);
-    const b = y([]), v = y([]), S = W(t), x = y({
+    Q(P && !g);
+    const b = y([]), v = y([]), S = Z(t), x = y({
       x: null,
       y: null
-    }), $ = N(() => {
+    }), q = N(() => {
       const e = (o) => new Map(
         o.split(",").map((p) => p.trim()).map((p) => {
           const [h, F] = p.split(" ");
@@ -125,7 +126,7 @@ const Z = H(
         fromValue: p,
         toValue: u.get(o) ?? p
       }));
-    }, [f, d]), q = (e, a, u, o) => Math.sqrt((u - e) ** 2 + (o - a) ** 2), I = (e) => {
+    }, [f, d]), I = (e, a, u, o) => Math.sqrt((u - e) ** 2 + (o - a) ** 2), $ = (e) => {
       const a = Math.min(Math.max(1 - e / s, 0), 1);
       switch (m) {
         case "exponential":
@@ -136,7 +137,7 @@ const Z = H(
           return a;
       }
     };
-    Q(() => {
+    W(() => {
       if (!t?.current) return;
       const { x: e, y: a } = S.current;
       if (x.current.x === e && x.current.y === a)
@@ -145,7 +146,7 @@ const Z = H(
       const u = t.current.getBoundingClientRect();
       b.current.forEach((o, p) => {
         if (!o) return;
-        const h = o.getBoundingClientRect(), F = h.left + h.width / 2 - u.left, Y = h.top + h.height / 2 - u.top, L = q(
+        const h = o.getBoundingClientRect(), F = h.left + h.width / 2 - u.left, Y = h.top + h.height / 2 - u.top, L = I(
           S.current.x,
           S.current.y,
           F,
@@ -155,7 +156,7 @@ const Z = H(
           o.style.fontVariationSettings = f;
           return;
         }
-        const z = I(L), M = $.map(({ axis: T, fromValue: R, toValue: D }) => {
+        const z = $(L), M = q.map(({ axis: T, fromValue: R, toValue: D }) => {
           const U = R + (D - R) * z;
           return `'${T}' ${U}`;
         }).join(", ");
@@ -175,7 +176,7 @@ const Z = H(
       "span",
       {
         ref: r,
-        className: `${c} xiping-variable-proximity`,
+        className: K("xiping-variable-proximity", c),
         onClick: E,
         style: X,
         ...A,
@@ -204,8 +205,8 @@ const Z = H(
     );
   }
 );
-Z.displayName = "VariableProximity";
+_.displayName = "VariableProximity";
 export {
-  Z as VariableProximity,
-  Z as default
+  _ as VariableProximity,
+  _ as default
 };

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

@@ -0,0 +1 @@
+.xiping-video-dialog{position:relative}.xiping-video-dialog-container{position:relative;cursor:pointer}.xiping-video-dialog-thumbnail{width:100%;border-radius:.375rem;border:1px solid;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;transition:all .2s ease-out}.xiping-video-dialog-container:hover .xiping-video-dialog-thumbnail{filter:brightness(.8)}.xiping-video-dialog-overlay{position:absolute;inset:0;display:flex;transform:scale(.9);align-items:center;justify-content:center;border-radius:1rem;transition:all .2s ease-out}.xiping-video-dialog-container:hover .xiping-video-dialog-overlay{transform:scale(1)}.xiping-video-dialog-play-outer{display:flex;width:7rem;height:7rem;align-items:center;justify-content:center;border-radius:9999px;background-color:hsla(var(--primary-h),var(--primary-s),var(--primary-l),.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.xiping-video-dialog-play-inner{position:relative;display:flex;width:5rem;height:5rem;transform:scale(1);align-items:center;justify-content:center;border-radius:9999px;background:linear-gradient(to bottom,hsla(var(--primary-h),var(--primary-s),var(--primary-l),.3),hsl(var(--primary-h),var(--primary-s),var(--primary-l)));box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:all .2s ease-out}.xiping-video-dialog-container:hover .xiping-video-dialog-play-inner{transform:scale(1.2)}.xiping-video-dialog-play-icon{width:2rem;height:2rem;transform:scale(1);fill:#fff;color:#fff;transition:transform .2s ease-out;filter:drop-shadow(0 4px 3px rgb(0 0 0 / .07)) drop-shadow(0 2px 2px rgb(0 0 0 / .06))}.xiping-video-dialog-container:hover .xiping-video-dialog-play-icon{transform:scale(1.05)}.xiping-video-dialog-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background-color:#00000080;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.xiping-video-dialog-modal-content{position:relative;margin:0 1rem;aspect-ratio:16 / 9;width:100%;max-width:56rem}@media(min-width:768px){.xiping-video-dialog-modal-content{margin:0}}.xiping-video-dialog-close-button{position:absolute;top:-4rem;right:0;border-radius:9999px;background-color:#17171780;padding:.5rem;font-size:1.25rem;color:#fff;box-shadow:0 0 0 1px #0000001a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}@media(prefers-color-scheme:dark){.xiping-video-dialog-close-button{background-color:#f5f5f580;color:#000}}.xiping-video-dialog-close-icon{width:1.25rem;height:1.25rem}.xiping-video-dialog-video-wrapper{position:relative;isolation:isolate;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:1rem;border:2px solid white}.xiping-video-dialog-iframe{width:100%;height:100%;border-radius:1rem}:root{--primary-h: 221.2;--primary-s: 83.2%;--primary-l: 53.3%}

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

@@ -4,7 +4,7 @@ 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                */
+import './VideoDialog.css';/* empty css                */
 const v = {
   "from-bottom": {
     initial: { y: "100%", opacity: 0 },

package/dist/es/components/video-subtitle-player/VideoSubtitlePlayer.css

@@ -0,0 +1 @@
+.xiping-video-subtitle-player{width:100%;height:100%;background:#1a1a1a;border-radius:8px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.xiping-video-subtitle-player__video-wrapper{width:100%;height:100%;background:#000;overflow:hidden}.xiping-video-subtitle-player__video-container{position:relative;width:100%;height:100%;background:#000;overflow:hidden}.xiping-video-subtitle-player__video{position:absolute;top:0;left:0;width:100%;height:100%;padding:0}.xiping-video-subtitle-player__video-container .xgplayer{width:100%!important;height:100%!important}.xiping-video-subtitle-player__video-container .xgplayer video{-o-object-fit:fill!important;object-fit:fill!important}.xiping-video-subtitle-player__subtitle-container{width:100%;height:100%;padding:20px;overflow-y:auto;background:#0000004d}.xiping-video-subtitle-player__resize-handle--horizontal{position:relative;width:2px;background:#ffffff1a;cursor:col-resize;transition:background .2s ease;flex-shrink:0}.xiping-video-subtitle-player__resize-handle--horizontal:hover{background:#fbbf2480}.xiping-video-subtitle-player__resize-handle--horizontal:active{background:#fbbf24cc}.xiping-video-subtitle-player__resize-handle--horizontal:before{content:"";position:absolute;inset:0 -4px;cursor:col-resize}.xiping-video-subtitle-player__resize-handle--vertical{position:relative;height:2px;background:#ffffff1a;cursor:row-resize;transition:background .2s ease;flex-shrink:0}.xiping-video-subtitle-player__resize-handle--vertical:hover{background:#fbbf2480}.xiping-video-subtitle-player__resize-handle--vertical:active{background:#fbbf24cc}.xiping-video-subtitle-player__resize-handle--vertical:before{content:"";position:absolute;inset:-4px 0;cursor:row-resize}.xiping-video-subtitle-player__right{width:100%;height:100%;border-left:1px solid rgba(255,255,255,.1);background:#00000080;display:flex;flex-direction:column}.xiping-video-subtitle-player__detail{flex:1;padding:24px;overflow-y:auto;color:#fff}.xiping-video-subtitle-player__detail-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:#ffffffb3}.xiping-video-subtitle-player__detail-loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#fbbf24;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.xiping-video-subtitle-player__detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:#ffffff80;text-align:center}.xiping-video-subtitle-player__detail-empty-icon{font-size:48px;opacity:.5}.xiping-video-subtitle-player__detail-empty-text{font-size:14px;line-height:1.6}.xiping-video-subtitle-player__detail-content{display:flex;flex-direction:column;gap:20px}.xiping-video-subtitle-player__detail-word{font-size:32px;font-weight:700;color:#fbbf24;line-height:1.2;margin-bottom:8px}.xiping-video-subtitle-player__detail-pronunciation{font-size:18px;color:#ffffffb3;font-style:italic;margin-bottom:4px}.xiping-video-subtitle-player__detail-pos{display:inline-block;padding:4px 12px;background:#fbbf2433;color:#fbbf24;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase;width:-moz-fit-content;width:fit-content;margin-bottom:8px}.xiping-video-subtitle-player__detail-label{font-size:12px;font-weight:600;color:#ffffff80;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.xiping-video-subtitle-player__detail-text{font-size:16px;line-height:1.6;color:#ffffffe6}.xiping-video-subtitle-player__detail-translation,.xiping-video-subtitle-player__detail-definition{padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1)}.xiping-video-subtitle-player__detail-definition{border-bottom:none}.xiping-video-subtitle-player__detail-examples{display:flex;flex-direction:column;gap:16px}.xiping-video-subtitle-player__detail-example{padding:16px;background:#ffffff0d;border-radius:8px;border-left:3px solid #fbbf24}.xiping-video-subtitle-player__detail-example-en{font-size:15px;line-height:1.6;color:#fffffff2;margin-bottom:8px}.xiping-video-subtitle-player__detail-example-zh{font-size:14px;line-height:1.6;color:#ffffffb3;padding-left:12px;border-left:2px solid rgba(255,255,255,.2)}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar,.xiping-video-subtitle-player__detail::-webkit-scrollbar{width:8px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-track,.xiping-video-subtitle-player__detail::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-thumb,.xiping-video-subtitle-player__detail::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.xiping-video-subtitle-player__subtitle-container::-webkit-scrollbar-thumb:hover,.xiping-video-subtitle-player__detail::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media(max-width:1024px){.xiping-video-subtitle-player{flex-direction:column;min-height:auto}.xiping-video-subtitle-player__right{width:100%;min-width:unset;max-width:unset;border-left:none;border-top:1px solid rgba(255,255,255,.1);max-height:400px}.xiping-video-subtitle-player__subtitle-container{min-height:150px}}@media(max-width:768px){.xiping-video-subtitle-player__detail{padding:16px}.xiping-video-subtitle-player__detail-word{font-size:24px}.xiping-video-subtitle-player__detail-pronunciation{font-size:16px}.xiping-video-subtitle-player__subtitle-container{padding:16px}}

package/dist/es/components/video-subtitle-player/VideoSubtitlePlayer.js

@@ -1,36 +1,36 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { useRef as N, useEffect as u, useCallback as H } from "react";
-import I from "xgplayer";
-/* empty css                                                                                               */
-import { PanelGroup as z, Panel as o, PanelResizeHandle as S } from "react-resizable-panels";
-import { SubtitlePlayer as j } from "../subtitle-player/SubtitlePlayer.js";
-import { useVideoSubtitleStore as D } from "./useVideoSubtitleStore.js";
+import { useRef as N, useEffect as u, useCallback as R } from "react";
+import j from "xgplayer";
+import './VideoSubtitlePlayer.css';import '../../node_modules/.pnpm/xgplayer@3.0.23_core-js@3.47.0/node_modules/xgplayer/dist/index.min.css';/* empty css                                                                                               */
+import { Group as S, Panel as s, Separator as z } from "react-resizable-panels";
+import D from "clsx";
+import { SubtitlePlayer as E } from "../subtitle-player/SubtitlePlayer.js";
+import { useVideoSubtitleStore as H } from "./useVideoSubtitleStore.js";
 /* empty css                        */
-const q = ({
+const A = ({
   videoUrl: m,
-  subtitles: p,
+  subtitles: o,
   poster: v,
-  className: P = "",
-  style: w,
-  onFetchDetail: c
+  className: w = "",
+  style: P,
+  onFetchDetail: p
 }) => {
-  const n = N(null), d = N(null), {
+  const c = N(null), n = N(null), {
     currentTime: r,
-    isPlaying: E,
     setCurrentTime: _,
-    setIsPlaying: s,
+    setIsPlaying: d,
     setSubtitles: h,
     currentDetail: l,
     isLoadingDetail: T,
     fetchDetail: y
-  } = D();
+  } = H();
   u(() => {
-    h(p);
-  }, [p, h]), u(() => {
-    if (!n.current) return;
+    h(o);
+  }, [o, h]), u(() => {
+    if (!c.current) return;
     const a = `xiping-video-subtitle-player-${Date.now()}`;
-    n.current && (n.current.id = a);
-    const i = new I({
+    c.current.id = a;
+    const i = new j({
       id: a,
       url: m,
       poster: v,
@@ -40,89 +40,96 @@ const q = ({
       height: "100%",
       controls: !0
     });
-    d.current = i;
-    const f = () => {
-      const R = i.currentTime || 0;
-      _(R);
-    }, x = () => {
-      s(!0);
-    }, g = () => {
-      s(!1);
+    n.current = i;
+    const x = () => {
+      const I = i.currentTime || 0;
+      _(I);
+    }, f = () => {
+      d(!0);
     }, b = () => {
-      s(!1);
+      d(!1);
+    }, g = () => {
+      d(!1);
     };
-    return i.on("timeupdate", f), i.on("play", x), i.on("pause", g), i.on("ended", b), () => {
-      i.off("timeupdate", f), i.off("play", x), i.off("pause", g), i.off("ended", b), i.destroy(), d.current = null;
+    return i.on("timeupdate", x), i.on("play", f), i.on("pause", b), i.on("ended", g), () => {
+      i.off("timeupdate", x), i.off("play", f), i.off("pause", b), i.off("ended", g), i.destroy(), n.current = null;
     };
-  }, [m, v, _, s]), u(() => {
-    if (d.current) {
-      const a = d.current;
+  }, [m, v, _, d]), u(() => {
+    if (n.current) {
+      const a = n.current;
       Math.abs(a.currentTime - r) > 0.5 && (a.currentTime = r);
     }
   }, [r]);
-  const C = H(
+  const C = R(
     async (a) => {
-      c ? await c(a) : await y(a);
+      p ? await p(a) : await y(a);
     },
-    [c, y]
+    [p, y]
   );
-  return /* @__PURE__ */ e("div", { className: `xiping-video-subtitle-player ${P}`, style: w, children: /* @__PURE__ */ t(z, { direction: "horizontal", children: [
-    /* @__PURE__ */ e(o, { defaultSize: 65, minSize: 40, children: /* @__PURE__ */ t(z, { direction: "vertical", children: [
-      /* @__PURE__ */ e(o, { defaultSize: 60, minSize: 30, children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__video-wrapper", children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__video-container", children: /* @__PURE__ */ e(
-        "div",
-        {
-          ref: n,
-          className: "xiping-video-subtitle-player__video"
-        }
-      ) }) }) }),
-      /* @__PURE__ */ e(S, { className: "xiping-video-subtitle-player__resize-handle xiping-video-subtitle-player__resize-handle--vertical" }),
-      /* @__PURE__ */ e(o, { defaultSize: 40, minSize: 20, children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__subtitle-container", children: /* @__PURE__ */ e(
-        j,
-        {
-          subtitles: p,
-          currentTime: r,
-          mode: "current",
-          onWordHoverChange: C
-        }
-      ) }) })
-    ] }) }),
-    /* @__PURE__ */ e(S, { className: "xiping-video-subtitle-player__resize-handle xiping-video-subtitle-player__resize-handle--horizontal" }),
-    /* @__PURE__ */ e(o, { defaultSize: 35, minSize: 25, maxSize: 50, children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__right", children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail", children: T ? /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-loading", children: [
-      /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-loading-spinner" }),
-      /* @__PURE__ */ e("span", { children: "加载中..." })
-    ] }) : l ? /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-content", children: [
-      /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-word", children: l.word }),
-      l.pronunciation && /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-pronunciation", children: l.pronunciation }),
-      l.partOfSpeech && /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-pos", children: l.partOfSpeech }),
-      l.translation && /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-translation", children: [
-        /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-label", children: "中文翻译" }),
-        /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-text", children: l.translation })
-      ] }),
-      l.definition && /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-definition", children: [
-        /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-label", children: "英文解释" }),
-        /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-text", children: l.definition })
-      ] }),
-      l.examples && l.examples.length > 0 && /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-examples", children: [
-        /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-label", children: "例句" }),
-        l.examples.map((a, i) => /* @__PURE__ */ t(
-          "div",
-          {
-            className: "xiping-video-subtitle-player__detail-example",
-            children: [
-              /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-example-en", children: a.sentence }),
-              /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-example-zh", children: a.translation })
-            ]
-          },
-          i
-        ))
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: D("xiping-video-subtitle-player", w),
+      style: P,
+      children: /* @__PURE__ */ t(S, { orientation: "horizontal", children: [
+        /* @__PURE__ */ e(s, { defaultSize: 65, minSize: 40, children: /* @__PURE__ */ t(S, { orientation: "vertical", children: [
+          /* @__PURE__ */ e(s, { defaultSize: 60, minSize: 30, children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__video-wrapper", children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__video-container", children: /* @__PURE__ */ e(
+            "div",
+            {
+              ref: c,
+              className: "xiping-video-subtitle-player__video"
+            }
+          ) }) }) }),
+          /* @__PURE__ */ e(z, { className: "xiping-video-subtitle-player__resize-handle xiping-video-subtitle-player__resize-handle--vertical" }),
+          /* @__PURE__ */ e(s, { defaultSize: 40, minSize: 20, children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__subtitle-container", children: /* @__PURE__ */ e(
+            E,
+            {
+              subtitles: o,
+              currentTime: r,
+              mode: "current",
+              onWordHoverChange: C
+            }
+          ) }) })
+        ] }) }),
+        /* @__PURE__ */ e(z, { className: "xiping-video-subtitle-player__resize-handle xiping-video-subtitle-player__resize-handle--horizontal" }),
+        /* @__PURE__ */ e(s, { defaultSize: 35, minSize: 25, maxSize: 50, children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__right", children: /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail", children: T ? /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-loading", children: [
+          /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-loading-spinner" }),
+          /* @__PURE__ */ e("span", { children: "加载中..." })
+        ] }) : l ? /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-content", children: [
+          /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-word", children: l.word }),
+          l.pronunciation && /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-pronunciation", children: l.pronunciation }),
+          l.partOfSpeech && /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-pos", children: l.partOfSpeech }),
+          l.translation && /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-translation", children: [
+            /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-label", children: "中文翻译" }),
+            /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-text", children: l.translation })
+          ] }),
+          l.definition && /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-definition", children: [
+            /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-label", children: "英文解释" }),
+            /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-text", children: l.definition })
+          ] }),
+          l.examples && l.examples.length > 0 && /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-examples", children: [
+            /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-label", children: "例句" }),
+            l.examples.map((a, i) => /* @__PURE__ */ t(
+              "div",
+              {
+                className: "xiping-video-subtitle-player__detail-example",
+                children: [
+                  /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-example-en", children: a.sentence }),
+                  /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-example-zh", children: a.translation })
+                ]
+              },
+              i
+            ))
+          ] })
+        ] }) : /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-empty", children: [
+          /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-empty-icon", children: "📖" }),
+          /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-empty-text", children: "将鼠标悬停在字幕单词上查看详情" })
+        ] }) }) }) })
       ] })
-    ] }) : /* @__PURE__ */ t("div", { className: "xiping-video-subtitle-player__detail-empty", children: [
-      /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-empty-icon", children: "📖" }),
-      /* @__PURE__ */ e("div", { className: "xiping-video-subtitle-player__detail-empty-text", children: "将鼠标悬停在字幕单词上查看详情" })
-    ] }) }) }) })
-  ] }) });
+    }
+  );
 };
 export {
-  q as VideoSubtitlePlayer,
-  q as default
+  A as VideoSubtitlePlayer,
+  A as default
 };

package/dist/es/index.d.ts

@@ -18,13 +18,14 @@ export * from './components/blur-fade';
 export * from './components/video-dialog';
 export * from './components/comic-text';
 export * from './components/flip-text';
-export * from './components/animated-list';
 export * from './components/shiny-button';
+export * from './components/shiny-text';
 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/blur-text';
 export * from './components/variable-proximity';
 export * from './components/subtitle-player';
 export * from './components/video-subtitle-player';

package/dist/es/index.js

@@ -1,71 +1,70 @@
-/* empty css          */
-import { Button as r } from "./components/button/Button.js";
+import { Button as t } from "./components/button/Button.js";
 import { TxtReader as x } from "./components/txt-reader/TxtReader.js";
-import { HyperText as p } from "./components/hyper-text/index.js";
-import { TypingAnimation as i } from "./components/typing-animation/index.js";
-import { Confetti as l, ConfettiButton as d } from "./components/confetti-button/index.js";
-import { default as s } from "./components/gradient-text/index.js";
-import { VariableProximity as c } from "./components/variable-proximity/index.js";
-import { useStayTimeReport as y } from "./hooks/useStayTimeReport.js";
-import { default as g } from "./components/pinch-content/PinchContent.js";
-import { default as B } from "./components/image-viewer/ImageViewer.js";
+import { HyperText as m } from "./components/hyper-text/index.js";
+import { TypingAnimation as a } from "./components/typing-animation/index.js";
+import { Confetti as l, ConfettiButton as u } from "./components/confetti-button/index.js";
+import { default as d } from "./components/gradient-text/index.js";
+import { VariableProximity as s } from "./components/variable-proximity/index.js";
+import { useStayTimeReport as c } from "./hooks/useStayTimeReport.js";
+import { default as h } from "./components/pinch-content/PinchContent.js";
+import { default as g } from "./components/image-viewer/ImageViewer.js";
 import { ShimmerButton as P } from "./components/shimmer-button/ShimmerButton.js";
-import { default as k } from "./components/image-compare/ImageCompare.js";
-import { default as D } from "./components/text-type/TextType.js";
-import { TextAnimate as F } from "./components/text-animate/TextAnimate.js";
-import { Dock as G, DockIcon as L, dockVariants as v } from "./components/dock/Duck.js";
-import { TxtEditor as E } from "./components/txt-editor/TxtEditor.js";
-import { Message as M } from "./components/message/Message.js";
-import { default as q } from "react-force-graph-3d";
-import { default as J } from "canvas-confetti";
-import { Pointer as N } from "./components/pointer/Pointer.js";
-import { SparklesText as Q } from "./components/sparkles-text/SparklesText.js";
-import { BlurFade as W } from "./components/blur-fade/BlurFade.js";
-import { VideoDialog as Y } from "./components/video-dialog/VideoDialog.js";
-import { ComicText as _ } from "./components/comic-text/ComicText.js";
-import { FlipText as oo } from "./components/flip-text/FlipText.js";
-import { AnimatedList as eo, AnimatedListItem as ro } from "./components/animated-list/AnimatedList.js";
+import { default as b } from "./components/image-compare/ImageCompare.js";
+import { default as k } from "./components/shiny-text/ShinyText.js";
+import { default as I } from "./components/text-type/TextType.js";
+import { default as A } from "./components/blur-text/BlurText.js";
+import { TextAnimate as v } from "./components/text-animate/TextAnimate.js";
+import { Dock as E, DockIcon as H } from "./components/dock/Duck.js";
+import { TxtEditor as j } from "./components/txt-editor/TxtEditor.js";
+import { Message as z } from "./components/message/Message.js";
+import { default as K } from "react-force-graph-3d";
+import { default as N } from "canvas-confetti";
+import { Pointer as Q } from "./components/pointer/Pointer.js";
+import { SparklesText as W } from "./components/sparkles-text/SparklesText.js";
+import { BlurFade as Y } from "./components/blur-fade/BlurFade.js";
+import { VideoDialog as _ } from "./components/video-dialog/VideoDialog.js";
+import { ComicText as oo } from "./components/comic-text/ComicText.js";
+import { FlipText as to } from "./components/flip-text/FlipText.js";
 import { ShinyButton as xo } from "./components/shiny-button/ShinyButton.js";
-import { ScratchToReveal as po } from "./components/scratch-to-reveal/ScratchToReveal.js";
-import { SplitText as io } from "./components/split-text/SplitText.js";
+import { ScratchToReveal as mo } from "./components/scratch-to-reveal/ScratchToReveal.js";
+import { SplitText as ao } from "./components/split-text/SplitText.js";
 import { SubtitlePlayer as lo } from "./components/subtitle-player/SubtitlePlayer.js";
-import { VideoSubtitlePlayer as so } from "./components/video-subtitle-player/VideoSubtitlePlayer.js";
-import { useVideoSubtitleStore as co } from "./components/video-subtitle-player/useVideoSubtitleStore.js";
+import { VideoSubtitlePlayer as no } from "./components/video-subtitle-player/VideoSubtitlePlayer.js";
+import { useVideoSubtitleStore as so } from "./components/video-subtitle-player/useVideoSubtitleStore.js";
 export {
-  eo as AnimatedList,
-  ro as AnimatedListItem,
-  W as BlurFade,
-  r as Button,
-  _ as ComicText,
+  Y as BlurFade,
+  A as BlurText,
+  t as Button,
+  oo as ComicText,
   l as Confetti,
-  d as ConfettiButton,
-  G as Dock,
-  L as DockIcon,
-  oo as FlipText,
-  q as ForceGraph3D,
-  s as GradientText,
-  p as HyperText,
-  k as ImageCompare,
-  B as ImageViewer,
-  M as Message,
-  g as PinchContent,
-  N as Pointer,
-  po as ScratchToReveal,
+  u as ConfettiButton,
+  E as Dock,
+  H as DockIcon,
+  to as FlipText,
+  K as ForceGraph3D,
+  d as GradientText,
+  m as HyperText,
+  b as ImageCompare,
+  g as ImageViewer,
+  z as Message,
+  h as PinchContent,
+  Q as Pointer,
+  mo as ScratchToReveal,
   P as ShimmerButton,
   xo as ShinyButton,
-  Q as SparklesText,
-  io as SplitText,
+  k as ShinyText,
+  W as SparklesText,
+  ao as SplitText,
   lo as SubtitlePlayer,
-  F as TextAnimate,
-  D as TextType,
-  E as TxtEditor,
+  v as TextAnimate,
+  I as TextType,
+  j as TxtEditor,
   x as TxtReader,
-  i as TypingAnimation,
-  c as VariableProximity,
-  Y as VideoDialog,
-  so as VideoSubtitlePlayer,
-  J as confetti,
-  v as dockVariants,
-  y as useStayTimeReport,
-  co as useVideoSubtitleStore
+  a as TypingAnimation,
+  s as VariableProximity,
+  _ as VideoDialog,
+  no as VideoSubtitlePlayer,
+  N as confetti,
+  c as useStayTimeReport,
+  so as useVideoSubtitleStore
 };

package/dist/es/llms.txt

@@ -18,11 +18,6 @@
 
 ### 1. 动画组件
 
-#### AnimatedList
-- **功能**: 带有动画效果的列表组件，逐个显示列表项目
-- **特性**: 缩放和透明度动画，可自定义延迟时间
-- **使用场景**: 列表展示、导航菜单、卡片列表
-
 #### ConfettiButton
 - **功能**: 带有烟花效果的按钮组件
 - **特性**: 基于 canvas-confetti，支持自定义烟花配置
@@ -197,21 +192,16 @@ npm install @xiping/react-components
 
 ### 基本使用
 ```tsx
-import { AnimatedList, ConfettiButton, QRCode } from '@xiping/react-components';
+import { ConfettiButton, ImageViewer } from '@xiping/react-components';
 
 function App() {
   return (
     <div>
-      <AnimatedList delay={800}>
-        <div>项目 1</div>
-        <div>项目 2</div>
-      </AnimatedList>
-      
       <ConfettiButton>
         点击触发烟花 🎉
       </ConfettiButton>
       
-      <QRCode value="https://example.com" size={128} />
+      <ImageViewer images={[...]} />
     </div>
   );
 }
@@ -281,7 +271,6 @@ MIT License
 ## 更新日志
 
 ### v1.0.33
-- 新增 AnimatedList 组件
 - 优化 ConfettiButton 性能
 - 修复 ImageViewer 移动端问题
 - 更新依赖版本