@xiping/react-components 1.0.43 → 1.0.45

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/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;

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

@@ -0,0 +1,103 @@
+import { jsx as s, jsxs as T } from "react/jsx-runtime";
+import { useRef as N, useMemo as S, useEffect as H } from "react";
+import { parseSRT as $, parseVTT as C } from "../../subtitle/lib/src/parser.js";
+/* empty css                   */
+function d(i) {
+  const r = i.replace(",", ".").split(":");
+  if (r.length !== 3)
+    return 0;
+  const c = parseInt(r[0], 10) || 0, o = parseInt(r[1], 10) || 0, m = parseFloat(r[2]) || 0;
+  return c * 3600 + o * 60 + m;
+}
+function E(i, n) {
+  for (const r of i) {
+    const c = d(r.startTime), o = d(r.endTime);
+    if (n >= c && n <= o)
+      return r;
+  }
+  return null;
+}
+const B = ({
+  subtitles: i,
+  currentTime: n,
+  mode: r = "current",
+  className: c = "",
+  style: o
+}) => {
+  const m = Array.isArray(i) ? i : [i], f = N(null), y = N(null), b = S(() => m.map((e) => {
+    try {
+      return {
+        entries: e.type === "srt" ? $(e.content) : C(e.content),
+        label: e.label
+      };
+    } catch (t) {
+      return console.error("字幕解析失败:", t), {
+        entries: [],
+        label: e.label
+      };
+    }
+  }), [m]), h = S(() => b.map(({ entries: e, label: t }) => ({
+    entry: E(e, n),
+    label: t,
+    entries: e
+    // 保留所有条目用于歌词模式
+  })), [b, n]);
+  return H(() => {
+    if (r === "lyrics" && y.current && f.current) {
+      const e = f.current, t = y.current;
+      e.getBoundingClientRect(), t.getBoundingClientRect(), e.scrollTop;
+      const l = t.offsetTop, a = e.clientHeight, u = t.clientHeight, p = l - a / 2 + u / 2;
+      e.scrollTo({
+        top: p,
+        behavior: "smooth"
+      });
+    }
+  }, [r, n]), r === "current" ? h.some(({ entry: t }) => t !== null) ? /* @__PURE__ */ s(
+    "div",
+    {
+      className: `subtitle-player subtitle-player--current ${c}`,
+      style: o,
+      children: h.map(({ entry: t, label: l }, a) => t ? /* @__PURE__ */ T(
+        "div",
+        {
+          className: "subtitle-player-item",
+          "data-label": l || void 0,
+          children: [
+            l && /* @__PURE__ */ s("span", { className: "subtitle-player-label", children: l }),
+            /* @__PURE__ */ s("div", { className: "subtitle-player-text", children: t.text.split(`
+`).map((u, p) => /* @__PURE__ */ s("div", { className: "subtitle-player-line", children: u }, p)) })
+          ]
+        },
+        a
+      ) : null)
+    }
+  ) : null : /* @__PURE__ */ s(
+    "div",
+    {
+      ref: f,
+      className: `subtitle-player subtitle-player--lyrics ${c}`,
+      style: o,
+      children: b.map(({ entries: e, label: t }, l) => /* @__PURE__ */ T("div", { className: "subtitle-player-group", children: [
+        t && /* @__PURE__ */ s("span", { className: "subtitle-player-label", children: t }),
+        e.map((a, u) => {
+          const p = d(a.startTime), v = d(a.endTime), g = n >= p && n <= v, x = n > v;
+          return /* @__PURE__ */ s(
+            "div",
+            {
+              ref: g ? y : null,
+              className: `subtitle-player-item ${g ? "subtitle-player-item--active" : ""} ${x ? "subtitle-player-item--past" : ""}`,
+              "data-label": t || void 0,
+              children: /* @__PURE__ */ s("div", { className: "subtitle-player-text", children: a.text.split(`
+`).map((R, A) => /* @__PURE__ */ s("div", { className: "subtitle-player-line", children: R }, A)) })
+            },
+            u
+          );
+        })
+      ] }, l))
+    }
+  );
+};
+export {
+  B as SubtitlePlayer,
+  B as default
+};

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

@@ -0,0 +1,2 @@
+export * from './SubtitlePlayer';
+export { default } from './SubtitlePlayer';

package/dist/es/components/txt-editor/TxtEditor.d.ts

@@ -1,4 +1,4 @@
-import { OnMount } from '@monaco-editor/react';
+import { Editor } from '@tiptap/react';
 export interface TxtEditorProps {
     /**
      * 编辑器高度
@@ -13,6 +13,7 @@ export interface TxtEditorProps {
     /**
      * 编辑器默认语言
      * @default 'plaintext'
+     * @deprecated Tiptap 不支持语法高亮，此属性已废弃
      */
     language?: string;
     /**
@@ -40,13 +41,13 @@ export interface TxtEditorProps {
     /**
      * 编辑器加载完成回调
      */
-    onMount?: OnMount;
+    onMount?: (editor: Editor) => void;
     /**
      * 文本编辑器样式
      */
     className?: string;
 }
 /**
- * Monaco Editor 文本编辑器组件
+ * Tiptap 文本编辑器组件
  */
-export declare const TxtEditor: ({ height, width, language, defaultValue, value, theme, readOnly, onChange, onMount, className, }: TxtEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TxtEditor: ({ height, width, language: _language, defaultValue, value, theme, readOnly, onChange, onMount, className, }: TxtEditorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/es/components/txt-editor/TxtEditor.js

@@ -1,54 +1,113 @@
-import { jsx as m } from "react/jsx-runtime";
-import h from "@monaco-editor/react";
-import { useRef as c } from "react";
-const M = ({
-  height: e = "500px",
-  width: t = "100%",
-  language: i = "plaintext",
-  defaultValue: a,
-  value: r,
-  theme: l = "light",
-  readOnly: o = !1,
-  onChange: d,
+import { jsxs as k, jsx as c } from "react/jsx-runtime";
+import { useEditor as M, EditorContent as w } from "@tiptap/react";
+import C from "@tiptap/starter-kit";
+import { useMemo as P, useEffect as a } from "react";
+const U = ({
+  height: t = "500px",
+  width: i = "100%",
+  language: y = "plaintext",
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  defaultValue: d,
+  value: o,
+  theme: p = "light",
+  readOnly: n = !1,
+  onChange: m,
   onMount: s,
   className: u
 }) => {
-  const f = c(null);
-  return /* @__PURE__ */ m(
-    h,
+  const l = o !== void 0, g = P(() => d || o || "", [d, o]), e = M({
+    extensions: [
+      C.configure({
+        // 禁用大部分格式化功能，保持纯文本编辑体验
+        bold: !1,
+        italic: !1,
+        strike: !1,
+        code: !1,
+        heading: !1,
+        blockquote: !1,
+        horizontalRule: !1,
+        hardBreak: !1
+        // 保留历史记录、拖拽光标和间隙光标功能（使用默认配置）
+      })
+    ],
+    content: g,
+    editable: !n,
+    immediatelyRender: !1,
+    onUpdate: ({ editor: f }) => {
+      const b = f.getText();
+      m?.(b);
+    }
+  });
+  if (a(() => {
+    if (!e || !l) return;
+    const f = e.getText();
+    o !== f && e.commands.setContent(o || "", { emitUpdate: !1 });
+  }, [e, o, l]), a(() => {
+    e && e.setEditable(!n);
+  }, [e, n]), a(() => {
+    e && s && s(e);
+  }, [e, s]), !e)
+    return null;
+  const x = typeof t == "number" ? `${t}px` : t, h = typeof i == "number" ? `${i}px` : i, r = p === "vs-dark";
+  return /* @__PURE__ */ k(
+    "div",
     {
       className: u,
-      height: e,
-      width: t,
-      defaultLanguage: i,
-      defaultValue: a,
-      value: r,
-      theme: l,
-      onMount: (n, p) => {
-        f.current = n, s?.(n, p), n.updateOptions({
-          minimap: { enabled: !1 },
-          // 禁用小地图
-          lineNumbers: "on",
-          // 显示行号
-          roundedSelection: !1,
-          // 方形选区
-          scrollBeyondLastLine: !1,
-          // 禁止滚动到最后一行之后
-          readOnly: o,
-          // 是否只读
-          fontSize: 14
-          // 字体大小
-        });
-      },
-      onChange: (n) => {
-        d?.(n || "");
+      style: {
+        width: h,
+        height: x,
+        border: `1px solid ${r ? "#3e3e3e" : "#d4d4d4"}`,
+        borderRadius: "4px",
+        overflow: "hidden",
+        backgroundColor: r ? "#1e1e1e" : "#ffffff"
       },
-      options: {
-        readOnly: o
-      }
+      children: [
+        /* @__PURE__ */ c(
+          w,
+          {
+            editor: e,
+            style: {
+              height: "100%",
+              overflow: "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ c("style", { children: `
+        .ProseMirror {
+          outline: none;
+          padding: 12px;
+          min-height: 100%;
+          font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+          font-size: 14px;
+          line-height: 1.5;
+          color: ${r ? "#d4d4d4" : "#333333"};
+          white-space: pre-wrap;
+          word-wrap: break-word;
+        }
+        .ProseMirror p {
+          margin: 0;
+          padding: 0;
+        }
+        .ProseMirror p + p {
+          margin-top: 0;
+        }
+        .ProseMirror:focus {
+          outline: none;
+        }
+        ${r ? `
+          .ProseMirror {
+            background-color: #1e1e1e;
+          }
+        ` : `
+          .ProseMirror {
+            background-color: #ffffff;
+          }
+        `}
+      ` })
+      ]
     }
   );
 };
 export {
-  M as TxtEditor
+  U as TxtEditor
 };