@xiping/react-components 1.0.40 → 1.0.45

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

@@ -0,0 +1,212 @@
+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          */
+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 r = requestAnimationFrame(i), () => cancelAnimationFrame(r);
+  }, [n]);
+}
+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
+        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", f), window.addEventListener("touchmove", d), () => {
+      window.removeEventListener("mousemove", f), window.removeEventListener("touchmove", d);
+    };
+  }, [n]), r;
+}
+const Z = H(
+  (n, r) => {
+    const {
+      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
+    }), $ = 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)];
+        })
+      ), a = e(f), u = e(d);
+      return Array.from(a.entries()).map(([o, p]) => ({
+        axis: o,
+        fromValue: p,
+        toValue: u.get(o) ?? 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 a ** 2;
+        case "gaussian":
+          return Math.exp(-((e / (s / 2)) ** 2) / 2);
+        case "linear":
+        default:
+          return a;
+      }
+    };
+    Q(() => {
+      if (!t?.current) return;
+      const { x: e, y: a } = S.current;
+      if (F.current.x === e && F.current.y === a)
+        return;
+      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 (L >= s) {
+          o.style.fontVariationSettings = f;
+          return;
+        }
+        const z = I(L), M = $.map(({ axis: T, fromValue: R, toValue: D }) => {
+          const U = R + (D - R) * z;
+          return `'${T}' ${U}`;
+        }).join(", ");
+        v.current[p] = M, o.style.fontVariationSettings = M;
+      });
+    });
+    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 B = 0;
+    const X = N(() => {
+      const e = { display: "inline", ...C };
+      return g && (e.fontFamily = g), e;
+    }, [g, C]);
+    return /* @__PURE__ */ G(
+      "span",
+      {
+        ref: r,
+        className: `${c} variable-proximity`,
+        onClick: E,
+        style: X,
+        ...A,
+        children: [
+          j.map((e, a) => {
+            const u = B++;
+            return /* @__PURE__ */ k(
+              J.span,
+              {
+                ref: (o) => {
+                  b.current[u] = o;
+                },
+                style: {
+                  display: e === " " ? "inline" : "inline-block",
+                  fontVariationSettings: v.current[u]
+                },
+                "aria-hidden": "true",
+                children: e
+              },
+              a
+            );
+          }),
+          /* @__PURE__ */ k("span", { className: "sr-only", children: i })
+        ]
+      }
+    );
+  }
+);
+Z.displayName = "VariableProximity";
+export {
+  Z as VariableProximity,
+  Z as default
+};

package/dist/es/components/video-dialog/VideoDialog.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useState as m } from "react";
-import { AnimatePresence as p, motion as t } from "motion/react";
-import { Play as u, XIcon as y } from "lucide-react";
-import { cn as x } from "../../utils/utils.js";
-const f = {
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+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                */
+const v = {
   "from-bottom": {
     initial: { y: "100%", opacity: 0 },
     animate: { y: 0, opacity: 1 },
@@ -46,70 +47,56 @@ const f = {
     exit: { x: "100%", opacity: 0 }
   }
 };
-function N({
-  animationStyle: o = "from-center",
-  videoSrc: r,
-  thumbnailSrc: l,
-  thumbnailAlt: n = "Video thumbnail",
-  className: c
+function V({
+  animationStyle: t = "from-center",
+  videoSrc: n,
+  thumbnailSrc: c,
+  thumbnailAlt: l = "Video thumbnail",
+  className: p
 }) {
-  const [s, a] = m(!1), d = f[o];
-  return /* @__PURE__ */ i("div", { className: x("relative", c), children: [
-    /* @__PURE__ */ i(
+  const [r, o] = s(!1), d = v[t];
+  return /* @__PURE__ */ a("div", { className: g("xiping-video-dialog", p), children: [
+    /* @__PURE__ */ a(
       "div",
       {
-        className: "group relative cursor-pointer",
-        onClick: () => a(!0),
+        className: "xiping-video-dialog-container",
+        onClick: () => o(!0),
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ i(
             "img",
             {
-              src: l,
-              alt: n,
+              src: c,
+              alt: l,
               width: 1920,
               height: 1080,
-              className: "w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]"
+              className: "xiping-video-dialog-thumbnail"
             }
           ),
-          /* @__PURE__ */ e("div", { className: "absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100", children: /* @__PURE__ */ e("div", { className: "flex size-28 items-center justify-center rounded-full bg-primary/10 backdrop-blur-md", children: /* @__PURE__ */ e(
-            "div",
-            {
-              className: "relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b from-primary/30 to-primary shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]",
-              children: /* @__PURE__ */ e(
-                u,
-                {
-                  className: "size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105",
-                  style: {
-                    filter: "drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))"
-                  }
-                }
-              )
-            }
-          ) }) })
+          /* @__PURE__ */ i("div", { className: "xiping-video-dialog-overlay", children: /* @__PURE__ */ i("div", { className: "xiping-video-dialog-play-outer", children: /* @__PURE__ */ i("div", { className: "xiping-video-dialog-play-inner", children: /* @__PURE__ */ i(y, { className: "xiping-video-dialog-play-icon" }) }) }) })
         ]
       }
     ),
-    /* @__PURE__ */ e(p, { children: s && /* @__PURE__ */ e(
-      t.div,
+    /* @__PURE__ */ i(m, { children: r && /* @__PURE__ */ i(
+      e.div,
       {
         initial: { opacity: 0 },
         animate: { opacity: 1 },
-        onClick: () => a(!1),
+        onClick: () => o(!1),
         exit: { opacity: 0 },
-        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md",
-        children: /* @__PURE__ */ i(
-          t.div,
+        className: "xiping-video-dialog-modal",
+        children: /* @__PURE__ */ a(
+          e.div,
           {
             ...d,
             transition: { type: "spring", damping: 30, stiffness: 300 },
-            className: "relative mx-4 aspect-video w-full max-w-4xl md:mx-0",
+            className: "xiping-video-dialog-modal-content",
             children: [
-              /* @__PURE__ */ e(t.button, { className: "absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black", children: /* @__PURE__ */ e(y, { className: "size-5" }) }),
-              /* @__PURE__ */ e("div", { className: "relative isolate z-[1] size-full overflow-hidden rounded-2xl border-2 border-white", children: /* @__PURE__ */ e(
+              /* @__PURE__ */ i(e.button, { className: "xiping-video-dialog-close-button", children: /* @__PURE__ */ i(x, { className: "xiping-video-dialog-close-icon" }) }),
+              /* @__PURE__ */ i("div", { className: "xiping-video-dialog-video-wrapper", children: /* @__PURE__ */ i(
                 "iframe",
                 {
-                  src: r,
-                  className: "size-full rounded-2xl",
+                  src: n,
+                  className: "xiping-video-dialog-iframe",
                   allowFullScreen: !0,
                   allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                 }
@@ -122,5 +109,5 @@ function N({
   ] });
 }
 export {
-  N as VideoDialog
+  V as VideoDialog
 };

package/dist/es/index.d.ts

@@ -25,4 +25,7 @@ export * from './components/scratch-to-reveal';
 export * from './components/split-text';
 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

@@ -1,63 +1,69 @@
 /* empty css          */
 import { Button as r } from "./components/button/Button.js";
-import { TxtReader as p } from "./components/txt-reader/TxtReader.js";
-import { HyperText as x } from "./components/hyper-text/index.js";
+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 T, ConfettiButton as l } from "./components/confetti-button/index.js";
-import { useStayTimeReport as c } from "./hooks/useStayTimeReport.js";
-import { default as S } from "./components/pinch-content/PinchContent.js";
-import { default as h } from "./components/image-viewer/ImageViewer.js";
-import { ShimmerButton as B } from "./components/shimmer-button/ShimmerButton.js";
-import { default as A } from "./components/image-compare/ImageCompare.js";
-import { default as I } from "./components/text-type/TextType.js";
-import { TextAnimate as F } from "./components/text-animate/TextAnimate.js";
-import { Dock as L, DockIcon as P, dockVariants as v } from "./components/dock/Duck.js";
-import { TxtEditor as E } from "./components/txt-editor/TxtEditor.js";
-import { Message as H } from "./components/message/Message.js";
-import { default as Q } from "react-force-graph-3d";
-import { default as j } from "canvas-confetti";
-import { Pointer as z } from "./components/pointer/Pointer.js";
-import { SparklesText as K } from "./components/sparkles-text/SparklesText.js";
-import { BlurFade as O } from "./components/blur-fade/BlurFade.js";
-import { VideoDialog as W } from "./components/video-dialog/VideoDialog.js";
-import { ComicText as Y } from "./components/comic-text/ComicText.js";
-import { FlipText as _ } from "./components/flip-text/FlipText.js";
-import { AnimatedList as oo, AnimatedListItem as to } from "./components/animated-list/AnimatedList.js";
-import { ShinyButton as ro } from "./components/shiny-button/ShinyButton.js";
-import { ScratchToReveal as po } from "./components/scratch-to-reveal/ScratchToReveal.js";
-import { SplitText as xo } from "./components/split-text/SplitText.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 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 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";
+import { default as z } from "react-force-graph-3d";
+import { default as K } from "canvas-confetti";
+import { Pointer as O } from "./components/pointer/Pointer.js";
+import { SparklesText as W } from "./components/sparkles-text/SparklesText.js";
+import { BlurFade as Y } from "./components/blur-fade/BlurFade.js";
+import { VideoDialog as _ } from "./components/video-dialog/VideoDialog.js";
+import { ComicText as oo } from "./components/comic-text/ComicText.js";
+import { FlipText as eo } from "./components/flip-text/FlipText.js";
+import { AnimatedList as mo, AnimatedListItem as xo } from "./components/animated-list/AnimatedList.js";
+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 {
-  oo as AnimatedList,
-  to as AnimatedListItem,
-  O as BlurFade,
+  mo as AnimatedList,
+  xo as AnimatedListItem,
+  Y as BlurFade,
   r as Button,
-  Y as ComicText,
-  T as Confetti,
-  l as ConfettiButton,
-  L as Dock,
-  P as DockIcon,
-  _ as FlipText,
-  Q as ForceGraph3D,
-  x as HyperText,
-  A as ImageCompare,
-  h as ImageViewer,
-  H as Message,
-  S as PinchContent,
-  z as Pointer,
+  oo as ComicText,
+  s as Confetti,
+  u as ConfettiButton,
+  v as Dock,
+  w as DockIcon,
+  eo as FlipText,
+  z as ForceGraph3D,
+  c as GradientText,
+  p as HyperText,
+  R as ImageCompare,
+  A as ImageViewer,
+  j as Message,
+  B as PinchContent,
+  O as Pointer,
   d as QRCode,
-  po as ScratchToReveal,
-  B as ShimmerButton,
-  ro as ShinyButton,
-  K as SparklesText,
-  xo as SplitText,
-  F as TextAnimate,
-  I as TextType,
-  E as TxtEditor,
-  p as TxtReader,
+  io as ScratchToReveal,
+  I as ShimmerButton,
+  po as ShinyButton,
+  W as SparklesText,
+  lo as SplitText,
+  uo as SubtitlePlayer,
+  G as TextAnimate,
+  F as TextType,
+  M as TxtEditor,
+  x as TxtReader,
   i as TypingAnimation,
-  W as VideoDialog,
-  j as confetti,
-  v as dockVariants,
-  c as useStayTimeReport
+  S as VariableProximity,
+  _ as VideoDialog,
+  K as confetti,
+  E as dockVariants,
+  g as useStayTimeReport
 };