@xiping/react-components 1.0.40 → 1.0.45

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

package/dist/es/components/txt-reader/TxtReader.js

@@ -1,83 +1,76 @@
-import { jsxs as w, Fragment as E, jsx as e } from "react/jsx-runtime";
-import { useRef as n } from "react";
-import t from "clsx";
-import { useScroll as F, useTransform as _, useMotionTemplate as v, motion as i } from "motion/react";
-import y from "./index.module.css.js";
-const I = 16, L = 1.5, R = "normal", k = ({
-  content: c,
-  lineHeight: a = L,
-  fontSize: f = I,
-  fontWeight: m = R,
-  className: p = "",
-  style: d = {},
+import { jsxs as h, Fragment as v, jsx as t } from "react/jsx-runtime";
+import { useRef as c } from "react";
+import r from "clsx";
+import { useScroll as y, useTransform as I, useMotionTemplate as L, motion as l } from "motion/react";
+import e from "./index.module.css.js";
+const R = 16, S = 1.5, A = "normal", O = ({
+  content: a,
+  lineHeight: m = S,
+  fontSize: p = R,
+  fontWeight: d = A,
+  className: f = "",
+  style: g = {},
   onProgressChange: u,
-  initialScrollPosition: S,
-  cacheKey: A,
-  showTopProgress: h = !0,
-  topProgressClassName: x,
-  showBottomProgress: g = !0,
-  bottomProgressClassName: T
+  initialScrollPosition: D,
+  cacheKey: H,
+  showTopProgress: x = !0,
+  topProgressClassName: T,
+  showBottomProgress: N = !0,
+  bottomProgressClassName: E
 }) => {
-  const r = n(null), o = n(null), { scrollYProgress: l } = F({
-    container: r,
-    target: o
-  }), s = _(() => (l.get() * 100).toFixed(2).replace(/\.0*$/, "")), N = v`${s}%`;
-  return s.on("change", (b) => {
-    u?.(Number(b));
-  }), /* @__PURE__ */ w(E, { children: [
-    h && /* @__PURE__ */ e(
-      i.div,
+  const o = c(null), n = c(null), { scrollYProgress: s } = y({
+    container: o,
+    target: n
+  }), i = I(() => (s.get() * 100).toFixed(2).replace(/\.0*$/, "")), F = L`${i}%`;
+  return i.on("change", (_) => {
+    u?.(Number(_));
+  }), /* @__PURE__ */ h(v, { children: [
+    x && /* @__PURE__ */ t(
+      l.div,
       {
         id: "scroll-indicator",
-        className: t(
-          "fixed left-0 top-0 right-0 bg-[#ff0088] h-2.5",
-          x
-        ),
+        className: r(e["xiping-top-progress"], T),
         style: {
-          scaleX: l,
+          scaleX: s,
           originX: 0
         }
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ t(
       "div",
       {
-        className: t(
-          "relative w-full h-full overflow-y-auto",
-          y.textContent
-          // "scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar scrollbar-thumb-slate-700 scrollbar-track-slate-300",
-        ),
-        ref: r,
-        children: /* @__PURE__ */ e(
+        className: r(e["xiping-container"], e.textContent),
+        ref: o,
+        children: /* @__PURE__ */ t(
           "div",
           {
-            ref: o,
-            className: t("w-full whitespace-pre-wrap break-words", p),
+            ref: n,
+            className: r(e["xiping-content"], f),
             style: {
-              fontSize: `${f}px`,
-              lineHeight: a,
-              fontWeight: m,
-              ...d
+              fontSize: `${p}px`,
+              lineHeight: m,
+              fontWeight: d,
+              ...g
             },
-            children: c
+            children: a
           }
         )
       }
     ),
-    g && /* @__PURE__ */ e(
-      i.div,
+    N && /* @__PURE__ */ t(
+      l.div,
       {
         id: "scroll-present",
-        className: t(
-          "fixed text-white rounded text-sm bg-black/70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5",
-          T
+        className: r(
+          e["xiping-bottom-progress"],
+          E
         ),
-        children: N
+        children: F
       }
     )
   ] });
 };
 export {
-  k as TxtReader,
-  k as default
+  O as TxtReader,
+  O as default
 };

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

@@ -1,7 +1,11 @@
-const t = "_textContent_8n59h_23", e = {
+const t = "_textContent_yv2bi_63", n = {
+  "xiping-top-progress": "_xiping-top-progress_yv2bi_23",
+  "xiping-container": "_xiping-container_yv2bi_33",
+  "xiping-content": "_xiping-content_yv2bi_41",
+  "xiping-bottom-progress": "_xiping-bottom-progress_yv2bi_48",
   textContent: t
 };
 export {
-  e as default,
+  n as default,
   t as textContent
 };

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

@@ -1,20 +1,21 @@
 "use client";
 import { jsx as T } from "react/jsx-runtime";
 import { cn as x } from "../../utils/utils.js";
-import { motion as b } from "motion/react";
-import { useState as u, useRef as I, useEffect as a } from "react";
-function R({
+import { motion as I } from "motion/react";
+import { useState as u, useRef as b, useEffect as a } from "react";
+/* empty css          */
+function S({
   children: r,
-  className: l,
+  className: m,
   duration: s = 100,
   delay: n = 0,
-  as: m = "div",
+  as: l = "div",
   startOnView: i = !1,
   ...p
 }) {
-  const d = b.create(m, {
+  const d = I.create(l, {
     forwardMotionProps: !0
-  }), [g, v] = u(""), [c, f] = u(!1), o = I(null);
+  }), [g, v] = u(""), [c, f] = u(!1), o = b(null);
   return a(() => {
     if (!i) {
       const t = setTimeout(() => {
@@ -44,16 +45,13 @@ function R({
     d,
     {
       ref: o,
-      className: x(
-        "text-4xl font-bold leading-[5rem] tracking-[-0.02em]",
-        l
-      ),
+      className: x("xiping-typing-animation", m),
       ...p,
       children: g
     }
   );
 }
 export {
-  R as TypingAnimation,
-  R as default
+  S as TypingAnimation,
+  S as default
 };

package/dist/es/components/variable-proximity/index.d.ts

@@ -0,0 +1,25 @@
+import { RefObject, HTMLAttributes } from 'react';
+interface VariableProximityProps extends HTMLAttributes<HTMLSpanElement> {
+    label: string;
+    fromFontVariationSettings: string;
+    toFontVariationSettings: string;
+    containerRef: RefObject<HTMLElement>;
+    radius?: number;
+    falloff?: "linear" | "exponential" | "gaussian";
+    className?: string;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+    /**
+     * 自定义字体族，如果不提供则使用默认的可变字体
+     * 例如: "'Custom Font', 'Roboto Flex', sans-serif"
+     */
+    fontFamily?: string;
+    /**
+     * 是否自动加载默认字体（当 fontFamily 未提供时）
+     * @default true
+     */
+    autoLoadFonts?: boolean;
+}
+declare const VariableProximity: import('react').ForwardRefExoticComponent<VariableProximityProps & import('react').RefAttributes<HTMLSpanElement>>;
+export { VariableProximity };
+export default VariableProximity;