@xiping/react-components 1.0.43 → 1.0.45

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/variable-proximity/index.d.ts

@@ -9,6 +9,16 @@ interface VariableProximityProps extends HTMLAttributes<HTMLSpanElement> {
     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 };

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

@@ -1,140 +1,212 @@
-import { jsxs as $, jsx as C } from "react/jsx-runtime";
-import { forwardRef as k, useRef as d, useMemo as D, useEffect as F } from "react";
-import { motion as T } from "motion/react";
+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          */
-function z(c) {
-  F(() => {
-    let i;
-    const s = () => {
-      c(), i = requestAnimationFrame(s);
+const l = {
+  robotoFlex: !1,
+  notoSansSC: !1,
+  loading: !1
+};
+function V(n) {
+  if (typeof document > "u") return !1;
+  try {
+    return document.fonts.check(`1em "${n}"`);
+  } catch {
+    return !0;
+  }
+}
+function K() {
+  if (l.loading || l.robotoFlex && l.notoSansSC) return;
+  l.loading = !0;
+  const n = V("Roboto Flex"), r = V("Noto Sans SC");
+  if (n && (l.robotoFlex = !0), r && (l.notoSansSC = !0), n && r) {
+    l.loading = !1;
+    return;
+  }
+  const i = (t, s) => {
+    if (document.querySelector(`link[href="${t}"]`)) {
+      s?.();
+      return;
+    }
+    const c = document.createElement("link");
+    c.rel = "stylesheet", c.href = t, c.onload = () => s?.(), document.head.appendChild(c);
+  }, f = [
+    // 国内镜像（优先）
+    {
+      roboto: "https://fonts.loli.net/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap",
+      noto: "https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@100..900&display=swap"
+    },
+    // Google Fonts（备选）
+    {
+      roboto: "https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap",
+      noto: "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap"
+    }
+  ], d = (t) => {
+    if (t >= f.length) {
+      l.loading = !1;
+      return;
+    }
+    const s = f[t];
+    let m = 0;
+    const c = () => {
+      m++, m === 2 && (l.loading = !1);
+    };
+    n ? c() : i(s.roboto, () => {
+      l.robotoFlex = !0, c();
+    }), r ? c() : i(s.noto, () => {
+      l.notoSansSC = !0, c();
+    }), setTimeout(() => {
+      (!l.robotoFlex || !l.notoSansSC) && d(t + 1);
+    }, 3e3);
+  };
+  d(0);
+}
+function O(n = !0) {
+  w(() => {
+    n && typeof document < "u" && K();
+  }, [n]);
+}
+function Q(n) {
+  w(() => {
+    let r;
+    const i = () => {
+      n(), r = requestAnimationFrame(i);
     };
-    return i = requestAnimationFrame(s), () => cancelAnimationFrame(i);
-  }, [c]);
+    return r = requestAnimationFrame(i), () => cancelAnimationFrame(r);
+  }, [n]);
 }
-function G(c) {
-  const i = d({ x: 0, y: 0 });
-  return F(() => {
-    const s = (r, a) => {
-      if (c?.current) {
-        const p = c.current.getBoundingClientRect();
-        i.current = { x: r - p.left, y: a - p.top };
+function W(n) {
+  const r = y({ x: 0, y: 0 });
+  return w(() => {
+    const i = (t, s) => {
+      if (n?.current) {
+        const m = n.current.getBoundingClientRect();
+        r.current = { x: t - m.left, y: s - m.top };
       } else
-        i.current = { x: r, y: a };
-    }, u = (r) => s(r.clientX, r.clientY), f = (r) => {
-      const a = r.touches[0];
-      s(a.clientX, a.clientY);
+        r.current = { x: t, y: s };
+    }, f = (t) => i(t.clientX, t.clientY), d = (t) => {
+      const s = t.touches[0];
+      i(s.clientX, s.clientY);
     };
-    return window.addEventListener("mousemove", u), window.addEventListener("touchmove", f), () => {
-      window.removeEventListener("mousemove", u), window.removeEventListener("touchmove", f);
+    return window.addEventListener("mousemove", f), window.addEventListener("touchmove", d), () => {
+      window.removeEventListener("mousemove", f), window.removeEventListener("touchmove", d);
     };
-  }, [c]), i;
+  }, [n]), r;
 }
-const H = k(
-  (c, i) => {
+const Z = H(
+  (n, r) => {
     const {
-      label: s,
-      fromFontVariationSettings: u,
-      toFontVariationSettings: f,
-      containerRef: r,
-      radius: a = 50,
-      falloff: p = "linear",
-      className: R = "",
-      onClick: V,
-      style: P,
-      ...E
-    } = c, x = d([]), v = d([]), h = G(r), g = d({
+      label: i,
+      fromFontVariationSettings: f,
+      toFontVariationSettings: d,
+      containerRef: t,
+      radius: s = 50,
+      falloff: m = "linear",
+      className: c = "",
+      onClick: E,
+      style: C,
+      fontFamily: g,
+      autoLoadFonts: P = !0,
+      ...A
+    } = n;
+    O(P && !g);
+    const b = y([]), v = y([]), S = W(t), F = y({
       x: null,
       y: null
-    }), A = D(() => {
-      const e = (t) => new Map(
-        t.split(",").map((l) => l.trim()).map((l) => {
-          const [m, y] = l.split(" ");
-          return [m.replace(/['"]/g, ""), parseFloat(y)];
+    }), $ = N(() => {
+      const e = (o) => new Map(
+        o.split(",").map((p) => p.trim()).map((p) => {
+          const [h, x] = p.split(" ");
+          return [h.replace(/['"]/g, ""), parseFloat(x)];
         })
-      ), n = e(u), o = e(f);
-      return Array.from(n.entries()).map(([t, l]) => ({
-        axis: t,
-        fromValue: l,
-        toValue: o.get(t) ?? l
+      ), a = e(f), u = e(d);
+      return Array.from(a.entries()).map(([o, p]) => ({
+        axis: o,
+        fromValue: p,
+        toValue: u.get(o) ?? p
       }));
-    }, [u, f]), L = (e, n, o, t) => Math.sqrt((o - e) ** 2 + (t - n) ** 2), b = (e) => {
-      const n = Math.min(Math.max(1 - e / a, 0), 1);
-      switch (p) {
+    }, [f, d]), q = (e, a, u, o) => Math.sqrt((u - e) ** 2 + (o - a) ** 2), I = (e) => {
+      const a = Math.min(Math.max(1 - e / s, 0), 1);
+      switch (m) {
         case "exponential":
-          return n ** 2;
+          return a ** 2;
         case "gaussian":
-          return Math.exp(-((e / (a / 2)) ** 2) / 2);
+          return Math.exp(-((e / (s / 2)) ** 2) / 2);
         case "linear":
         default:
-          return n;
+          return a;
       }
     };
-    z(() => {
-      if (!r?.current) return;
-      const { x: e, y: n } = h.current;
-      if (g.current.x === e && g.current.y === n)
+    Q(() => {
+      if (!t?.current) return;
+      const { x: e, y: a } = S.current;
+      if (F.current.x === e && F.current.y === a)
         return;
-      g.current = { x: e, y: n };
-      const o = r.current.getBoundingClientRect();
-      x.current.forEach((t, l) => {
-        if (!t) return;
-        const m = t.getBoundingClientRect(), y = m.left + m.width / 2 - o.left, q = m.top + m.height / 2 - o.top, w = L(
-          h.current.x,
-          h.current.y,
-          y,
-          q
+      F.current = { x: e, y: a };
+      const u = t.current.getBoundingClientRect();
+      b.current.forEach((o, p) => {
+        if (!o) return;
+        const h = o.getBoundingClientRect(), x = h.left + h.width / 2 - u.left, Y = h.top + h.height / 2 - u.top, L = q(
+          S.current.x,
+          S.current.y,
+          x,
+          Y
         );
-        if (w >= a) {
-          t.style.fontVariationSettings = u;
+        if (L >= s) {
+          o.style.fontVariationSettings = f;
           return;
         }
-        const B = b(w), M = A.map(({ axis: I, fromValue: S, toValue: X }) => {
-          const Y = S + (X - S) * B;
-          return `'${I}' ${Y}`;
+        const z = I(L), M = $.map(({ axis: T, fromValue: R, toValue: D }) => {
+          const U = R + (D - R) * z;
+          return `'${T}' ${U}`;
         }).join(", ");
-        v.current[l] = M, t.style.fontVariationSettings = M;
+        v.current[p] = M, o.style.fontVariationSettings = M;
       });
     });
-    const N = /[\u4e00-\u9fa5]/.test(s) ? s.split("") : s.split(" ").flatMap((e, n, o) => {
-      const t = e.split("");
-      return n < o.length - 1 ? [...t, " "] : t;
+    const j = /[\u4e00-\u9fa5]/.test(i) ? i.split("") : i.split(" ").flatMap((e, a, u) => {
+      const o = e.split("");
+      return a < u.length - 1 ? [...o, " "] : o;
     });
-    let j = 0;
-    return /* @__PURE__ */ $(
+    let B = 0;
+    const X = N(() => {
+      const e = { display: "inline", ...C };
+      return g && (e.fontFamily = g), e;
+    }, [g, C]);
+    return /* @__PURE__ */ G(
       "span",
       {
-        ref: i,
-        className: `${R} variable-proximity`,
-        onClick: V,
-        style: { display: "inline", ...P },
-        ...E,
+        ref: r,
+        className: `${c} variable-proximity`,
+        onClick: E,
+        style: X,
+        ...A,
         children: [
-          N.map((e, n) => {
-            const o = j++;
-            return /* @__PURE__ */ C(
-              T.span,
+          j.map((e, a) => {
+            const u = B++;
+            return /* @__PURE__ */ k(
+              J.span,
               {
-                ref: (t) => {
-                  x.current[o] = t;
+                ref: (o) => {
+                  b.current[u] = o;
                 },
                 style: {
                   display: e === " " ? "inline" : "inline-block",
-                  fontVariationSettings: v.current[o]
+                  fontVariationSettings: v.current[u]
                 },
                 "aria-hidden": "true",
                 children: e
               },
-              n
+              a
             );
           }),
-          /* @__PURE__ */ C("span", { className: "sr-only", children: s })
+          /* @__PURE__ */ k("span", { className: "sr-only", children: i })
         ]
       }
     );
   }
 );
-H.displayName = "VariableProximity";
+Z.displayName = "VariableProximity";
 export {
-  H as VariableProximity,
-  H as default
+  Z as VariableProximity,
+  Z as default
 };

package/dist/es/index.d.ts

@@ -27,4 +27,5 @@ export * from './components/dome-gallery';
 export * from './components/text-type';
 export * from './components/gradient-text';
 export * from './components/variable-proximity';
+export * from './components/subtitle-player';
 export * from './hooks/useStayTimeReport';

package/dist/es/index.js

@@ -4,16 +4,16 @@ 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 { QRCode as d } from "./components/qr-code/index.js";
-import { Confetti as s, ConfettiButton as T } from "./components/confetti-button/index.js";
+import { Confetti as s, ConfettiButton as u } from "./components/confetti-button/index.js";
 import { default as c } from "./components/gradient-text/index.js";
-import { VariableProximity as C } from "./components/variable-proximity/index.js";
+import { VariableProximity as S } from "./components/variable-proximity/index.js";
 import { useStayTimeReport as g } from "./hooks/useStayTimeReport.js";
 import { default as B } from "./components/pinch-content/PinchContent.js";
 import { default as A } from "./components/image-viewer/ImageViewer.js";
 import { ShimmerButton as I } from "./components/shimmer-button/ShimmerButton.js";
-import { default as V } from "./components/image-compare/ImageCompare.js";
-import { default as P } from "./components/text-type/TextType.js";
-import { TextAnimate as L } from "./components/text-animate/TextAnimate.js";
+import { default as R } from "./components/image-compare/ImageCompare.js";
+import { default as F } from "./components/text-type/TextType.js";
+import { TextAnimate as G } from "./components/text-animate/TextAnimate.js";
 import { Dock as v, DockIcon as w, dockVariants as E } from "./components/dock/Duck.js";
 import { TxtEditor as M } from "./components/txt-editor/TxtEditor.js";
 import { Message as j } from "./components/message/Message.js";
@@ -29,6 +29,7 @@ import { AnimatedList as mo, AnimatedListItem as xo } from "./components/animate
 import { ShinyButton as po } from "./components/shiny-button/ShinyButton.js";
 import { ScratchToReveal as io } from "./components/scratch-to-reveal/ScratchToReveal.js";
 import { SplitText as lo } from "./components/split-text/SplitText.js";
+import { SubtitlePlayer as uo } from "./components/subtitle-player/SubtitlePlayer.js";
 export {
   mo as AnimatedList,
   xo as AnimatedListItem,
@@ -36,14 +37,14 @@ export {
   r as Button,
   oo as ComicText,
   s as Confetti,
-  T as ConfettiButton,
+  u as ConfettiButton,
   v as Dock,
   w as DockIcon,
   eo as FlipText,
   z as ForceGraph3D,
   c as GradientText,
   p as HyperText,
-  V as ImageCompare,
+  R as ImageCompare,
   A as ImageViewer,
   j as Message,
   B as PinchContent,
@@ -54,12 +55,13 @@ export {
   po as ShinyButton,
   W as SparklesText,
   lo as SplitText,
-  L as TextAnimate,
-  P as TextType,
+  uo as SubtitlePlayer,
+  G as TextAnimate,
+  F as TextType,
   M as TxtEditor,
   x as TxtReader,
   i as TypingAnimation,
-  C as VariableProximity,
+  S as VariableProximity,
   _ as VideoDialog,
   K as confetti,
   E as dockVariants,