@xiping/react-components 1.0.55 → 1.0.58

package/dist/es/components/scratch-to-reveal/ScratchToReveal.js

@@ -1,18 +1,19 @@
 "use client";
 import { jsxs as P, jsx as R } from "react/jsx-runtime";
-import { cn as z } from "../../utils/utils.js";
-import { useAnimation as b, motion as A } from "motion/react";
-import { useRef as j, useState as p, useEffect as x } from "react";
-const B = ({
-  width: l,
-  height: m,
+import { useAnimation as z, motion as A } from "motion/react";
+import { useRef as b, useState as I, useEffect as x } from "react";
+import j from "clsx";
+import './ScratchToReveal.css';/* empty css                    */
+const T = ({
+  width: m,
+  height: l,
   minScratchPercentage: E = 50,
   onComplete: h,
   children: L,
   className: M,
   gradientColors: a = ["#A97CF8", "#F38CB8", "#FDCC92"]
 }) => {
-  const i = j(null), [d, r] = p(!1), [S, C] = p(!1), v = b();
+  const i = b(null), [d, r] = I(!1), [S, C] = I(!1), v = z();
   x(() => {
     const t = i.current, e = t?.getContext("2d");
     if (t && e) {
@@ -44,8 +45,8 @@ const B = ({
   const D = () => r(!0), w = () => r(!0), f = (t, e) => {
     const o = i.current, n = o?.getContext("2d");
     if (o && n) {
-      const c = o.getBoundingClientRect(), s = t - c.left + 16, I = e - c.top + 16;
-      n.globalCompositeOperation = "destination-out", n.beginPath(), n.arc(s, I, 30, 0, Math.PI * 2), n.fill();
+      const c = o.getBoundingClientRect(), s = t - c.left + 16, p = e - c.top + 16;
+      n.globalCompositeOperation = "destination-out", n.beginPath(), n.arc(s, p, 30, 0, Math.PI * 2), n.fill();
     }
   }, y = async () => {
     await v.start({
@@ -67,10 +68,10 @@ const B = ({
   return /* @__PURE__ */ P(
     A.div,
     {
-      className: z("relative select-none", M),
+      className: j("xiping-scratch-to-reveal", M),
       style: {
-        width: l,
-        height: m,
+        width: m,
+        height: l,
         cursor: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto"
       },
       animate: v,
@@ -79,9 +80,9 @@ const B = ({
           "canvas",
           {
             ref: i,
-            width: l,
-            height: m,
-            className: "absolute left-0 top-0",
+            width: m,
+            height: l,
+            className: "xiping-scratch-canvas",
             onMouseDown: D,
             onTouchStart: w
           }
@@ -92,5 +93,5 @@ const B = ({
   );
 };
 export {
-  B as ScratchToReveal
+  T as ScratchToReveal
 };

package/dist/es/components/shimmer-button/ShimmerButton.css

@@ -0,0 +1 @@
+.xiping-shimmer-button{position:relative;z-index:0;display:flex;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;border:1px solid rgba(255,255,255,.1);padding:.75rem 1.5rem;color:#fff;background:var(--bg);border-radius:var(--radius);transform:translateZ(0);transition:transform .3s ease-in-out}.xiping-shimmer-button:active{transform:translateY(1px) translateZ(0)}@media(prefers-color-scheme:dark){.xiping-shimmer-button{color:#000}}.xiping-shimmer-button-spark-container{position:absolute;z-index:-30;inset:0;overflow:visible;filter:blur(2px);container-type:size}.xiping-shimmer-button-spark{position:absolute;inset:0;height:100cqh;aspect-ratio:1;border-radius:0;-webkit-mask:none;mask:none;animation:xiping-shimmer-slide var(--speed) ease-in-out infinite alternate}.xiping-shimmer-button-spark-before{position:absolute;inset:-100%;width:auto;transform:rotate(0);background:conic-gradient(from calc(270deg - (var(--spread) * .5)),transparent 0,var(--shimmer-color) var(--spread),transparent var(--spread));animation:xiping-spin-around calc(var(--speed) * 2) infinite linear}.xiping-shimmer-button-highlight{position:absolute;inset:0;width:100%;height:100%;border-radius:1rem;box-shadow:inset 0 -8px 10px #ffffff1f;transform:translateZ(0);transition:all .3s ease-in-out}.xiping-shimmer-button:hover .xiping-shimmer-button-highlight{box-shadow:inset 0 -6px 10px #ffffff40}.xiping-shimmer-button:active .xiping-shimmer-button-highlight{box-shadow:inset 0 -10px 10px #ffffff40}.xiping-shimmer-button-backdrop{position:absolute;z-index:-20;background:var(--bg);border-radius:var(--radius);inset:var(--cut)}@keyframes xiping-shimmer-slide{to{transform:translate(calc(100cqw - 100%))}}@keyframes xiping-spin-around{0%{transform:translateZ(0) rotate(0)}15%,35%{transform:translateZ(0) rotate(90deg)}65%,85%{transform:translateZ(0) rotate(270deg)}to{transform:translateZ(0) rotate(360deg)}}

package/dist/es/components/shimmer-button/ShimmerButton.js

@@ -1,13 +1,13 @@
 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                  */
+import h from "clsx";
+import './ShimmerButton.css';/* empty css                  */
 const l = d.forwardRef(
   ({
     shimmerColor: r = "#ffffff",
-    shimmerSize: e = "0.05em",
-    shimmerDuration: m = "3s",
-    borderRadius: s = "100px",
+    shimmerSize: s = "0.05em",
+    shimmerDuration: e = "3s",
+    borderRadius: m = "100px",
     background: t = "rgba(0, 0, 0, 1)",
     className: a,
     children: o,
@@ -18,9 +18,9 @@ const l = d.forwardRef(
       style: {
         "--spread": "90deg",
         "--shimmer-color": r,
-        "--radius": s,
-        "--speed": m,
-        "--cut": e,
+        "--radius": m,
+        "--speed": e,
+        "--cut": s,
         "--bg": t
       },
       className: h("xiping-shimmer-button", a),

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

@@ -0,0 +1 @@
+.xiping-shiny-button{position:relative;cursor:pointer;border-radius:.5rem;padding:.5rem 1.5rem;font-weight:500;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid;transition:box-shadow .3s ease-in-out}.xiping-shiny-button:hover{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}@media(prefers-color-scheme:dark){.xiping-shiny-button{background:radial-gradient(circle at 50% 0%,var(--primary) 10%,transparent 60%)}.xiping-shiny-button:hover{box-shadow:0 0 20px var(--primary) / 10%}}.xiping-shiny-button-text{position:relative;display:block;width:100%;height:100%;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;color:#000000a6}@media(prefers-color-scheme:dark){.xiping-shiny-button-text{font-weight:300;color:#ffffffe5}}.xiping-shiny-button-border{position:absolute;inset:0;z-index:10;display:block;border-radius:inherit;padding:1px}

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

@@ -1,10 +1,10 @@
 "use client";
 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 p from "react";
-/* empty css                */
-const c = {
+import { motion as s } from "motion/react";
+import o from "react";
+import l from "clsx";
+import './ShinyButton.css';/* empty css                */
+const p = {
   initial: { "--x": "100%", scale: 0.8 },
   animate: { "--x": "-100%", scale: 1 },
   whileTap: { scale: 0.95 },
@@ -23,13 +23,13 @@ const c = {
       mass: 0.5
     }
   }
-}, l = p.forwardRef(({ children: r, className: e, ...n }, i) => /* @__PURE__ */ t(
-  o.button,
+}, c = o.forwardRef(({ children: r, className: e, ...i }, n) => /* @__PURE__ */ t(
+  s.button,
   {
-    ref: i,
-    className: s("xiping-shiny-button", e),
-    ...c,
-    ...n,
+    ref: n,
+    className: l("xiping-shiny-button", e),
+    ...p,
+    ...i,
     children: [
       /* @__PURE__ */ a(
         "span",
@@ -55,7 +55,7 @@ const c = {
     ]
   }
 ));
-l.displayName = "ShinyButton";
+c.displayName = "ShinyButton";
 export {
-  l as ShinyButton
+  c as ShinyButton
 };

package/dist/es/components/shiny-text/ShinyText.css

@@ -0,0 +1 @@
+.shiny-text{display:inline-block}

package/dist/es/components/shiny-text/ShinyText.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+interface ShinyTextProps {
+    text: string;
+    disabled?: boolean;
+    speed?: number;
+    className?: string;
+    color?: string;
+    shineColor?: string;
+    spread?: number;
+    yoyo?: boolean;
+    pauseOnHover?: boolean;
+    direction?: 'left' | 'right';
+    delay?: number;
+}
+declare const ShinyText: React.FC<ShinyTextProps>;
+export default ShinyText;

package/dist/es/components/shiny-text/ShinyText.js

@@ -0,0 +1,76 @@
+import { jsx as L } from "react/jsx-runtime";
+import { useState as W, useRef as d, useEffect as j, useCallback as y } from "react";
+import { useMotionValue as v, useAnimationFrame as z, useTransform as A, motion as B } from "motion/react";
+import './ShinyText.css';/* empty css              */
+const G = ({
+  text: T,
+  disabled: k = !1,
+  speed: $ = 2,
+  className: x = "",
+  color: u = "#b5b5b5",
+  shineColor: h = "#ffffff",
+  spread: C = 120,
+  yoyo: M = !1,
+  pauseOnHover: l = !1,
+  direction: f = "left",
+  delay: D = 0
+}) => {
+  const [R, p] = W(!1), e = v(0), a = d(0), c = d(null), r = d(f === "left" ? 1 : -1), t = $ * 1e3, b = D * 1e3;
+  z((o) => {
+    if (k || R) {
+      c.current = null;
+      return;
+    }
+    if (c.current === null) {
+      c.current = o;
+      return;
+    }
+    const I = o - c.current;
+    if (c.current = o, a.current += I, M) {
+      const s = t + b, i = s * 2, n = a.current % i;
+      if (n < t) {
+        const m = n / t * 100;
+        e.set(r.current === 1 ? m : 100 - m);
+      } else if (n < s)
+        e.set(r.current === 1 ? 100 : 0);
+      else if (n < s + t) {
+        const g = 100 - (n - s) / t * 100;
+        e.set(r.current === 1 ? g : 100 - g);
+      } else
+        e.set(r.current === 1 ? 0 : 100);
+    } else {
+      const s = t + b, i = a.current % s;
+      if (i < t) {
+        const n = i / t * 100;
+        e.set(r.current === 1 ? n : 100 - n);
+      } else
+        e.set(r.current === 1 ? 100 : 0);
+    }
+  }), j(() => {
+    r.current = f === "left" ? 1 : -1, a.current = 0, e.set(0);
+  }, [f]);
+  const S = A(e, (o) => `${150 - o * 2}% center`), E = y(() => {
+    l && p(!0);
+  }, [l]), P = y(() => {
+    l && p(!1);
+  }, [l]), F = {
+    backgroundImage: `linear-gradient(${C}deg, ${u} 0%, ${u} 35%, ${h} 50%, ${u} 65%, ${u} 100%)`,
+    backgroundSize: "200% auto",
+    WebkitBackgroundClip: "text",
+    backgroundClip: "text",
+    WebkitTextFillColor: "transparent"
+  };
+  return /* @__PURE__ */ L(
+    B.span,
+    {
+      className: `shiny-text ${x}`,
+      style: { ...F, backgroundPosition: S },
+      onMouseEnter: E,
+      onMouseLeave: P,
+      children: T
+    }
+  );
+};
+export {
+  G as default
+};

package/dist/es/components/shiny-text/index.d.ts

@@ -0,0 +1,2 @@
+import { default as ShinyText } from './ShinyText';
+export { ShinyText };

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

@@ -0,0 +1 @@
+.xiping-sparkle{pointer-events:none;position:absolute;z-index:20}.xiping-sparkles-text{font-size:3.75rem;font-weight:700}.xiping-sparkles-text-wrapper{position:relative;display:inline-block}

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

@@ -2,19 +2,19 @@
 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(
+import y from "clsx";
+import './SparklesText.css';/* empty css                 */
+const M = ({ id: i, x: t, y: o, color: s, delay: l, scale: c }) => /* @__PURE__ */ r(
   k.svg,
   {
     className: "xiping-sparkle",
     initial: { opacity: 0, left: t, top: o },
     animate: {
       opacity: [0, 1, 0],
-      scale: [0, l, 0],
+      scale: [0, c, 0],
       rotate: [75, 120, 150]
     },
-    transition: { duration: 0.8, repeat: 1 / 0, delay: c },
+    transition: { duration: 0.8, repeat: 1 / 0, delay: l },
     width: "21",
     height: "21",
     viewBox: "0 0 21 21",
@@ -32,19 +32,19 @@ const M = ({ id: i, x: t, y: o, color: s, delay: c, scale: l }) => /* @__PURE__
   colors: t = { first: "#9E7AFF", second: "#FE8BBB" },
   className: o,
   sparklesCount: s = 10,
-  ...c
+  ...l
 }) => {
-  const [l, p] = L([]);
+  const [c, p] = L([]);
   return S(() => {
-    const a = () => {
-      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 };
+    const n = () => {
+      const e = `${Math.random() * 100}%`, a = `${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}-${a}-${Date.now()}`, x: e, y: a, color: h, delay: x, scale: C, lifespan: u };
     }, d = () => {
-      const e = Array.from({ length: s }, a);
+      const e = Array.from({ length: s }, n);
       p(e);
     }, m = () => {
       p(
-        (e) => e.map((n) => n.lifespan <= 0 ? a() : { ...n, lifespan: n.lifespan - 0.1 })
+        (e) => e.map((a) => a.lifespan <= 0 ? n() : { ...a, lifespan: a.lifespan - 0.1 })
       );
     };
     d();
@@ -54,13 +54,13 @@ const M = ({ id: i, x: t, y: o, color: s, delay: c, scale: l }) => /* @__PURE__
     "div",
     {
       className: y("xiping-sparkles-text", o),
-      ...c,
+      ...l,
       style: {
         "--sparkles-first-color": `${t.first}`,
         "--sparkles-second-color": `${t.second}`
       },
       children: /* @__PURE__ */ g("span", { className: "xiping-sparkles-text-wrapper", children: [
-        l.map((a) => /* @__PURE__ */ r(M, { ...a }, a.id)),
+        c.map((n) => /* @__PURE__ */ r(M, { ...n }, n.id)),
         /* @__PURE__ */ r("strong", { children: i })
       ] })
     }

package/dist/es/components/split-text/SplitText.css

@@ -0,0 +1 @@
+.xiping-split-parent{overflow:hidden;display:inline-block;white-space:normal}

package/dist/es/components/split-text/SplitText.js

@@ -4,7 +4,7 @@ import { gsap as i } from "gsap";
 import { ScrollTrigger as N } from "gsap/ScrollTrigger";
 import { SplitText as S } from "gsap/SplitText";
 import j from "clsx";
-/* empty css              */
+import './SplitText.css';/* empty css              */
 i.registerPlugin(N, S);
 const A = ({
   text: l,

package/dist/es/components/subtitle-player/CurrentMode.css

@@ -0,0 +1 @@
+.xiping-subtitle-player__current-item{display:flex;flex-direction:column;gap:.25rem;transition:all .2s ease}.xiping-subtitle-player__current-label{font-size:.75rem;font-weight:600;color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.xiping-subtitle-player__current-text{font-size:1rem;font-weight:500;text-shadow:0 2px 4px rgba(0,0,0,.5)}.xiping-subtitle-player__current-line{margin:.25rem 0}.xiping-subtitle-player__current-line:first-child{margin-top:0}.xiping-subtitle-player__current-line:last-child{margin-bottom:0}.xiping-subtitle-player__current-hover-layer{position:absolute;inset:0;pointer-events:none}@media(max-width:768px){.xiping-subtitle-player__current-text{font-size:.9rem}}

package/dist/es/components/subtitle-player/CurrentMode.d.ts

@@ -15,6 +15,8 @@ export interface CurrentModeProps {
     overlayNode: React.ReactNode;
     /** 整条字幕点击处理器 */
     onSubtitleClick?: (event: React.MouseEvent<HTMLDivElement>, entry: SubtitleEntry, label?: string) => void;
+    /** 文本对齐方式 */
+    textAlign?: "left" | "center";
 }
 /**
  * 当前模式组件：只显示当前时间对应的字幕

package/dist/es/components/subtitle-player/CurrentMode.js

@@ -1,43 +1,78 @@
-import { jsxs as p, Fragment as h, jsx as r } from "react/jsx-runtime";
-import { renderTextWithWords as x } from "./utils.js";
-const N = ({
-  currentEntries: a,
-  wordHoverFactory: u,
-  enableWordHover: d,
-  overlayNode: c,
-  onSubtitleClick: t
-}) => a.some(({ entry: i }) => i !== null) ? /* @__PURE__ */ p(h, { children: [
-  a.map(({ entry: i, label: s }, m) => i ? /* @__PURE__ */ p(
-    "div",
-    {
-      className: "xiping-subtitle-player__item",
-      "data-label": s || void 0,
-      onClick: t ? (e) => t(e, i, s) : void 0,
-      style: t ? { cursor: "pointer" } : void 0,
-      children: [
-        s && /* @__PURE__ */ r("span", { className: "xiping-subtitle-player__label", children: s }),
-        /* @__PURE__ */ r("div", { className: "xiping-subtitle-player__text", children: (() => {
-          let e = 0;
-          return i.text.split(`
-`).map((n, l) => {
-            if (!i.words || i.words.length === 0)
-              return /* @__PURE__ */ r("div", { className: "xiping-subtitle-player__line", children: n }, l);
-            const o = x(
-              n,
-              i.words,
-              e,
-              l,
-              d ? u(i, s) : void 0
-            );
-            return e = o.nextWordIndex, /* @__PURE__ */ r("div", { className: "xiping-subtitle-player__line", children: o.nodes }, l);
-          });
-        })() })
-      ]
-    },
-    m
-  ) : null),
-  d && /* @__PURE__ */ r("div", { className: "xiping-subtitle-player__hover-layer", children: c })
+import { jsxs as u, Fragment as v, jsx as r } from "react/jsx-runtime";
+import { renderTextWithWords as g } from "./utils.js";
+import './CurrentMode.css';/* empty css                */
+const C = ({
+  currentEntries: l,
+  wordHoverFactory: p,
+  enableWordHover: o,
+  overlayNode: a,
+  onSubtitleClick: i,
+  textAlign: x = "left"
+}) => l.some(({ entry: e }) => e !== null) ? /* @__PURE__ */ u(v, { children: [
+  l.map(({ entry: e, label: n }) => {
+    if (!e)
+      return null;
+    const h = e.text.split(`
+`), m = o ? p(e, n) : void 0, _ = h.reduce(
+      (t, d, s) => {
+        if (!e.words || e.words.length === 0)
+          return t.content.push(
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: "xiping-subtitle-player__current-line",
+                children: d
+              },
+              s
+            )
+          ), t;
+        const c = g(
+          d,
+          e.words,
+          t.nextWordIndex,
+          s,
+          m
+        );
+        return t.content.push(
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "xiping-subtitle-player__current-line",
+              children: c.nodes
+            },
+            s
+          )
+        ), {
+          content: t.content,
+          nextWordIndex: c.nextWordIndex
+        };
+      },
+      { content: [], nextWordIndex: 0 }
+    ).content;
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        className: "xiping-subtitle-player__current-item",
+        "data-label": n || void 0,
+        onClick: i ? (t) => i(t, e, n) : void 0,
+        style: i ? { cursor: "pointer" } : void 0,
+        children: [
+          n && /* @__PURE__ */ r("span", { className: "xiping-subtitle-player__current-label", children: n }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "xiping-subtitle-player__current-text",
+              style: { textAlign: x },
+              children: _
+            }
+          )
+        ]
+      },
+      `${e.index}-${n || ""}`
+    );
+  }),
+  o && /* @__PURE__ */ r("div", { className: "xiping-subtitle-player__current-hover-layer", children: a })
 ] }) : null;
 export {
-  N as CurrentMode
+  C as CurrentMode
 };

package/dist/es/components/subtitle-player/LyricsMode.css

@@ -0,0 +1 @@
+.xiping-subtitle-player__lyrics-time{font-size:.7rem;font-weight:500;color:#ffffff80;font-family:Monaco,Menlo,Ubuntu Mono,monospace;margin-bottom:.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.xiping-subtitle-player__lyrics-item{display:flex;flex-direction:column;gap:.25rem;transition:all .2s ease}.xiping-subtitle-player__lyrics-item--active{color:#fbbf24;font-weight:600;transition:all .3s ease;position:relative}.xiping-subtitle-player__lyrics-item--active:before{content:"";position:absolute;left:-1rem;top:50%;transform:translateY(-50%);width:4px;height:92%;background:#fbbf24;border-radius:2px}.xiping-subtitle-player__lyrics-item--past{opacity:.5;color:#fff9}.xiping-subtitle-player__lyrics-label{font-size:.75rem;font-weight:600;color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.xiping-subtitle-player__lyrics-text{font-size:1rem;font-weight:500;text-shadow:0 2px 4px rgba(0,0,0,.5)}.xiping-subtitle-player__lyrics-line{margin:.25rem 0}.xiping-subtitle-player__lyrics-line:first-child{margin-top:0}.xiping-subtitle-player__lyrics-line:last-child{margin-bottom:0}.xiping-subtitle-player__lyrics-hover-layer{position:absolute;inset:0;pointer-events:none}.xiping-subtitle-player--lyrics{max-height:600px;overflow-y:auto;gap:.5rem;scroll-behavior:smooth}.xiping-subtitle-player--lyrics::-webkit-scrollbar{width:8px}.xiping-subtitle-player--lyrics::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.xiping-subtitle-player--lyrics::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.xiping-subtitle-player--lyrics::-webkit-scrollbar-thumb:hover{background:#ffffff80}.xiping-subtitle-player__group{display:flex;flex-direction:column;gap:.5rem;width:100%;border-radius:.5rem;padding:.5rem;margin:-.5rem;transition:all .2s ease}.xiping-subtitle-player__group:hover{background-color:#ffffff1a}.xiping-subtitle-player__group:hover .xiping-subtitle-player__lyrics-item{transform:translate(4px)}.xiping-subtitle-player__group:hover .xiping-subtitle-player__lyrics-item--active{background-color:#fbbf2426}.xiping-subtitle-player__lyrics-item--active .xiping-subtitle-word{color:#fbbf24;font-weight:600}@media(max-width:768px){.xiping-subtitle-player__lyrics-text{font-size:.9rem}}

package/dist/es/components/subtitle-player/LyricsMode.d.ts

@@ -21,6 +21,8 @@ export interface LyricsModeProps {
     containerRef: React.RefObject<HTMLDivElement | null>;
     /** 整条字幕点击处理器 */
     onSubtitleClick?: (event: React.MouseEvent<HTMLDivElement>, entry: SubtitleEntry, label?: string) => void;
+    /** 文本对齐方式 */
+    textAlign?: "left" | "center";
 }
 /**
  * 歌词模式组件：显示全部字幕并高亮当前字幕