@xiping/react-components 1.0.55 → 1.0.58

package/dist/es/components/text-animate/TextAnimate.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
-import { cn as y } from "../../utils/utils.js";
-import { motion as u, AnimatePresence as g } from "motion/react";
+import { motion as y, AnimatePresence as w } from "motion/react";
+import u from "clsx";
+import './TextAnimate.css';/* empty css                */
 const s = {
   text: 0.06,
   word: 0.05,
   character: 0.03,
   line: 0.06
-}, t = {
+}, i = {
   hidden: { opacity: 1 },
   show: {
     opacity: 1,
@@ -32,14 +33,14 @@ const s = {
   }
 }, o = {
   fadeIn: {
-    container: t,
+    container: i,
     item: {
       hidden: { opacity: 0, y: 20 },
-      show: (i) => ({
+      show: (t) => ({
         opacity: 1,
         y: 0,
         transition: {
-          delay: i,
+          delay: t,
           duration: 0.3
         }
       }),
@@ -51,14 +52,14 @@ const s = {
     }
   },
   blurIn: {
-    container: t,
+    container: i,
     item: {
       hidden: { opacity: 0, filter: "blur(10px)" },
-      show: (i) => ({
+      show: (t) => ({
         opacity: 1,
         filter: "blur(0px)",
         transition: {
-          delay: i * 0.1,
+          delay: t * 0.1,
           duration: 0.3
         }
       }),
@@ -70,10 +71,10 @@ const s = {
     }
   },
   blurInUp: {
-    container: t,
+    container: i,
     item: {
       hidden: { opacity: 0, filter: "blur(10px)", y: 20 },
-      show: (i) => ({
+      show: (t) => ({
         opacity: 1,
         filter: "blur(0px)",
         y: 0,
@@ -96,10 +97,10 @@ const s = {
     }
   },
   blurInDown: {
-    container: t,
+    container: i,
     item: {
       hidden: { opacity: 0, filter: "blur(10px)", y: -20 },
-      show: (i) => ({
+      show: (t) => ({
         opacity: 1,
         filter: "blur(0px)",
         y: 0,
@@ -112,14 +113,14 @@ const s = {
     }
   },
   slideUp: {
-    container: t,
+    container: i,
     item: {
       hidden: { y: 20, opacity: 0 },
-      show: (i) => ({
+      show: (t) => ({
         y: 0,
         opacity: 1,
         transition: {
-          delay: i,
+          delay: t,
           duration: 0.3
         }
       }),
@@ -133,7 +134,7 @@ const s = {
     }
   },
   slideDown: {
-    container: t,
+    container: i,
     item: {
       hidden: { y: -20, opacity: 0 },
       show: {
@@ -149,7 +150,7 @@ const s = {
     }
   },
   slideLeft: {
-    container: t,
+    container: i,
     item: {
       hidden: { x: 20, opacity: 0 },
       show: {
@@ -165,7 +166,7 @@ const s = {
     }
   },
   slideRight: {
-    container: t,
+    container: i,
     item: {
       hidden: { x: -20, opacity: 0 },
       show: {
@@ -181,7 +182,7 @@ const s = {
     }
   },
   scaleUp: {
-    container: t,
+    container: i,
     item: {
       hidden: { scale: 0.5, opacity: 0 },
       show: {
@@ -204,14 +205,14 @@ const s = {
     }
   },
   scaleDown: {
-    container: t,
+    container: i,
     item: {
       hidden: { scale: 1.5, opacity: 0 },
-      show: (i) => ({
+      show: (t) => ({
         scale: 1,
         opacity: 1,
         transition: {
-          delay: i,
+          delay: t,
           duration: 0.3,
           scale: {
             type: "spring",
@@ -228,81 +229,82 @@ const s = {
     }
   }
 };
-function U({
-  children: i,
+function $({
+  children: t,
   delay: I = 0,
-  duration: k = 0.3,
-  variants: C,
-  className: h,
-  segmentClassName: x,
+  duration: C = 0.3,
+  variants: v,
+  className: x,
+  segmentClassName: h,
   as: m = "p",
   startOnView: c = !0,
-  once: v = !1,
-  by: a = "word",
-  animation: n = "fadeIn",
+  once: D = !1,
+  by: n = "word",
+  animation: a = "fadeIn",
   ...f
 }) {
-  const w = u.create(m), d = n ? {
+  const g = y.create(m), d = a ? {
     container: {
-      ...o[n].container,
+      ...o[a].container,
       show: {
-        ...o[n].container.show,
+        ...o[a].container.show,
         transition: {
-          staggerChildren: s[a]
+          staggerChildren: s[n]
         }
       },
       exit: {
-        ...o[n].container.exit,
+        ...o[a].container.exit,
         transition: {
-          staggerChildren: s[a],
+          staggerChildren: s[n],
           staggerDirection: -1
         }
       }
     },
-    item: o[n].item
-  } : { container: t, item: b };
+    item: o[a].item
+  } : { container: i, item: b };
   let e = [];
-  switch (a) {
+  switch (n) {
     case "word":
-      e = i.split(/(\s+)/);
+      e = t.split(/(\s+)/);
       break;
     case "character":
-      e = i.split("");
+      e = t.split("");
       break;
     case "line":
-      e = i.split(`
+      e = t.split(`
 `);
       break;
     default:
-      e = [i];
+      e = [t];
       break;
   }
-  return /* @__PURE__ */ r(g, { mode: "popLayout", children: /* @__PURE__ */ r(
-    w,
+  return /* @__PURE__ */ r(w, { mode: "popLayout", children: /* @__PURE__ */ r(
+    g,
     {
       variants: d.container,
       initial: "hidden",
       whileInView: c ? "show" : void 0,
       animate: c ? void 0 : "show",
       exit: "exit",
-      className: y("whitespace-pre-wrap", h),
+      className: u("xiping-text-animate", x),
       ...f,
       children: e.map((p, l) => /* @__PURE__ */ r(
-        u.span,
+        y.span,
         {
           variants: d.item,
-          custom: l * s[a],
-          className: y(
-            a === "line" ? "block" : "inline-block whitespace-pre",
-            x
+          custom: l * s[n],
+          className: u(
+            "xiping-text-animate-segment",
+            n === "line" && "xiping-text-animate-segment--line",
+            h
           ),
           children: p
         },
-        `${a}-${p}-${l}`
+        `${n}-${p}-${l}`
       ))
     }
   ) });
 }
 export {
-  U as TextAnimate
+  $ as TextAnimate
 };

package/dist/es/components/text-type/TextType.css

@@ -0,0 +1 @@
+.xiping-text-type{display:inline-block;white-space:pre-wrap}.xiping-text-type__content{display:inline-block}.xiping-text-type__cursor{margin-left:.25rem;display:inline-block;opacity:1}.xiping-text-type__cursor--hidden{display:none}

package/dist/es/components/text-type/TextType.js

@@ -2,8 +2,9 @@
 import { jsx as b } from "react/jsx-runtime";
 import { useState as o, useRef as k, useMemo as U, useCallback as V, useEffect as I, createElement as W } from "react";
 import { gsap as q } from "gsap";
-/* empty css             */
-const D = ({
+import X from "clsx";
+import './TextType.css';/* empty css             */
+const ee = ({
   text: u,
   as: v = "div",
   typingSpeed: f = 50,
@@ -20,11 +21,11 @@ const D = ({
   textColors: g = [],
   variableSpeed: c,
   onSentenceComplete: d,
-  startOnVisible: y = !1,
+  startOnVisible: p = !1,
   reverseMode: N = !1,
   ...J
 }) => {
-  const [l, $] = o(""), [i, j] = o(0), [a, C] = o(!1), [t, K] = o(0), [H, L] = o(!y), m = k(null), p = k(null), r = U(() => Array.isArray(u) ? u : [u], [u]), O = V(() => {
+  const [l, j] = o(""), [i, C] = o(0), [a, H] = o(!1), [t, K] = o(0), [M, L] = o(!p), m = k(null), y = k(null), r = U(() => Array.isArray(u) ? u : [u], [u]), O = V(() => {
     if (!c) return f;
     const { min: e, max: n } = c;
     return Math.random() * (n - e) + e;
@@ -33,7 +34,7 @@ const D = ({
       return g[t % g.length];
   };
   I(() => {
-    if (!y || !p.current) return;
+    if (!p || !y.current) return;
     const e = new IntersectionObserver(
       (n) => {
         n.forEach((x) => {
@@ -42,8 +43,8 @@ const D = ({
       },
       { threshold: 0.1 }
     );
-    return e.observe(p.current), () => e.disconnect();
-  }, [y]), I(() => {
+    return e.observe(y.current), () => e.disconnect();
+  }, [p]), I(() => {
     T && m.current && (q.set(m.current, { opacity: 1 }), q.to(m.current, {
       opacity: 0,
       duration: E,
@@ -52,30 +53,30 @@ const D = ({
       ease: "power2.inOut"
     }));
   }, [T, E]), I(() => {
-    if (!H) return;
+    if (!M) return;
     let e;
-    const n = r[t], x = N ? n.split("").reverse().join("") : n, M = () => {
+    const n = r[t], x = N ? n.split("").reverse().join("") : n, $ = () => {
       if (a)
         if (l === "") {
-          if (C(!1), t === r.length - 1 && !R)
+          if (H(!1), t === r.length - 1 && !R)
             return;
-          d && d(r[t], t), K((s) => (s + 1) % r.length), j(0), e = setTimeout(() => {
+          d && d(r[t], t), K((s) => (s + 1) % r.length), C(0), e = setTimeout(() => {
           }, h);
         } else
           e = setTimeout(() => {
-            $((s) => s.slice(0, -1));
+            j((s) => s.slice(0, -1));
           }, A);
       else
         i < x.length ? e = setTimeout(
           () => {
-            $((s) => s + x[i]), j((s) => s + 1);
+            j((s) => s + x[i]), C((s) => s + 1);
           },
           c ? O() : f
         ) : r.length > 1 && (e = setTimeout(() => {
-          C(!0);
+          H(!0);
         }, h));
     };
-    return i === 0 && !a && l === "" ? e = setTimeout(M, _) : M(), () => clearTimeout(e);
+    return i === 0 && !a && l === "" ? e = setTimeout($, _) : $(), () => clearTimeout(e);
   }, [
     i,
     l,
@@ -87,7 +88,7 @@ const D = ({
     t,
     R,
     _,
-    H,
+    M,
     N,
     c,
     d
@@ -96,7 +97,7 @@ const D = ({
   return W(
     v,
     {
-      ref: p,
+      ref: y,
       className: `xiping-text-type ${w}`,
       ...J
     },
@@ -105,12 +106,16 @@ const D = ({
       "span",
       {
         ref: m,
-        className: `xiping-text-type__cursor ${G} ${Q ? "xiping-text-type__cursor--hidden" : ""}`,
+        className: X(
+          "xiping-text-type__cursor",
+          G,
+          Q && "xiping-text-type__cursor--hidden"
+        ),
         children: F
       }
     )
   );
 };
 export {
-  D as default
+  ee as default
 };

package/dist/es/components/txt-reader/index.module.css

@@ -0,0 +1 @@
+._xiping-top-progress_rkm9f_23{position:fixed;left:0;top:0;right:0;background-color:#f08;height:10px}._xiping-container_rkm9f_33{position:relative;width:100%;height:100%;overflow-y:auto}._xiping-content_rkm9f_41{width:100%;white-space:pre-wrap;word-break:break-word}._xiping-bottom-progress_rkm9f_48{position:fixed;color:#fff;border-radius:4px;font-size:.875rem;background-color:#000000b3;padding:.25rem .5rem;right:1.25rem;bottom:1.25rem}._xiping-text-content_rkm9f_63::-webkit-scrollbar{width:8px}._xiping-text-content_rkm9f_63::-webkit-scrollbar-thumb{box-shadow:inset 0 0 5px #0003;background:#0003}._xiping-text-content_rkm9f_63::-webkit-scrollbar-track{box-shadow:inset 0 0 5px #0003;border-radius:0;background:#00000014}

package/dist/es/components/txt-reader/index.module.css.js

@@ -1,4 +1,4 @@
-const t = {
+import './index.module.css';const t = {
   "xiping-top-progress": "_xiping-top-progress_rkm9f_23",
   "xiping-container": "_xiping-container_rkm9f_33",
   "xiping-content": "_xiping-content_rkm9f_41",

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

@@ -0,0 +1 @@
+.xiping-typing-animation{font-size:2.25rem;font-weight:700;line-height:5rem;letter-spacing:-.02em}

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__right{width:100%;height:100%;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:xiping-vsp-spin 1s linear infinite}@keyframes xiping-vsp-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}

package/dist/es/components/video-subtitle-player/VideoSubtitlePlayer.d.ts

@@ -13,11 +13,11 @@ export interface VideoSubtitlePlayerProps {
     style?: React.CSSProperties;
     /** 自定义详情获取函数，用于调用大模型API */
     onFetchDetail?: (target: HoverTarget | null) => Promise<void>;
+    /** 强制使用布局：传入则不再做设备检测，直接使用对应布局 */
+    forceLayout?: "mobile" | "pc";
 }
 /**
- * 视频字幕播放器组件
- * 左侧：上部分视频播放器（填充模式），下部分字幕显示
- * 右侧：字幕详情（单词/短语的发音、解释等）
+ * 视频字幕播放器：根据设备或 forceLayout 选择 PC 或移动端视图，二者完全分离
  */
 export declare const VideoSubtitlePlayer: React.FC<VideoSubtitlePlayerProps>;
 export default VideoSubtitlePlayer;