@xiping/react-components 1.0.69 → 1.0.77

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

@@ -1,76 +0,0 @@
-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/sparkles-text/SparklesText.js

@@ -1,71 +0,0 @@
-"use client";
-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 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, c, 0],
-      rotate: [75, 120, 150]
-    },
-    transition: { duration: 0.8, repeat: 1 / 0, delay: l },
-    width: "21",
-    height: "21",
-    viewBox: "0 0 21 21",
-    children: /* @__PURE__ */ r(
-      "path",
-      {
-        d: "M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z",
-        fill: s
-      }
-    )
-  },
-  i
-), I = ({
-  children: i,
-  colors: t = { first: "#9E7AFF", second: "#FE8BBB" },
-  className: o,
-  sparklesCount: s = 10,
-  ...l
-}) => {
-  const [c, p] = L([]);
-  return S(() => {
-    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 }, n);
-      p(e);
-    }, m = () => {
-      p(
-        (e) => e.map((a) => a.lifespan <= 0 ? n() : { ...a, lifespan: a.lifespan - 0.1 })
-      );
-    };
-    d();
-    const f = setInterval(m, 100);
-    return () => clearInterval(f);
-  }, [t.first, t.second, s]), /* @__PURE__ */ r(
-    "div",
-    {
-      className: y("xiping-sparkles-text", o),
-      ...l,
-      style: {
-        "--sparkles-first-color": `${t.first}`,
-        "--sparkles-second-color": `${t.second}`
-      },
-      children: /* @__PURE__ */ g("span", { className: "xiping-sparkles-text-wrapper", children: [
-        c.map((n) => /* @__PURE__ */ r(M, { ...n }, n.id)),
-        /* @__PURE__ */ r("strong", { children: i })
-      ] })
-    }
-  );
-};
-export {
-  I as SparklesText
-};

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

@@ -1,116 +0,0 @@
-import { jsx as E } from "react/jsx-runtime";
-import { useRef as m, useEffect as F } from "react";
-import { gsap as i } from "gsap";
-import { ScrollTrigger as N } from "gsap/ScrollTrigger";
-import { SplitText as S } from "gsap/SplitText";
-import j from "clsx";
-import './SplitText.css';/* empty css              */
-i.registerPlugin(N, S);
-const A = ({
-  text: l,
-  className: C = "",
-  delay: g = 100,
-  duration: d = 0.6,
-  ease: h = "power3.out",
-  splitType: n = "chars",
-  from: w = { opacity: 0, y: 40 },
-  to: c = { opacity: 1, y: 0 },
-  threshold: x = 0.1,
-  rootMargin: y = "-100px",
-  textAlign: R = "center",
-  onLetterAnimationComplete: T
-}) => {
-  const a = m(null), $ = m(!1), o = m(null);
-  return F(() => {
-    if (typeof window > "u" || !a.current || !l) return;
-    const p = a.current;
-    $.current = !1;
-    const b = n === "lines";
-    b && (p.style.position = "relative");
-    let r;
-    try {
-      r = new S(p, {
-        type: n,
-        absolute: b,
-        linesClass: "split-line"
-      });
-    } catch (t) {
-      console.error("Failed to create SplitText:", t);
-      return;
-    }
-    let e;
-    switch (n) {
-      case "lines":
-        e = r.lines;
-        break;
-      case "words":
-        e = r.words;
-        break;
-      case "chars":
-        e = r.chars;
-        break;
-      default:
-        e = r.chars;
-    }
-    if (!e || e.length === 0) {
-      console.warn("No targets found for SplitText animation"), r.revert();
-      return;
-    }
-    e.forEach((t) => {
-      t.style.willChange = "transform, opacity";
-    });
-    const v = (1 - x) * 100, s = /^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec(y), u = s ? parseFloat(s[1]) : 0, k = s && s[2] || "px", P = u < 0 ? `-=${Math.abs(u)}${k}` : `+=${u}${k}`, D = `top ${v}%${P}`, f = i.timeline({
-      scrollTrigger: {
-        trigger: p,
-        start: D,
-        toggleActions: "play none none none",
-        once: !0,
-        onToggle: (t) => {
-          o.current = t;
-        }
-      },
-      smoothChildTiming: !0,
-      onComplete: () => {
-        $.current = !0, i.set(e, {
-          ...c,
-          clearProps: "willChange",
-          immediateRender: !0
-        }), T?.();
-      }
-    });
-    return f.set(e, { ...w, immediateRender: !1, force3D: !0 }), f.to(e, {
-      ...c,
-      duration: d,
-      ease: h,
-      stagger: g / 1e3,
-      force3D: !0
-    }), () => {
-      f.kill(), o.current && (o.current.kill(), o.current = null), i.killTweensOf(e), r && r.revert();
-    };
-  }, [
-    l,
-    g,
-    d,
-    h,
-    n,
-    w,
-    c,
-    x,
-    y,
-    T
-  ]), /* @__PURE__ */ E(
-    "p",
-    {
-      ref: a,
-      className: j("xiping-split-parent", C),
-      style: {
-        textAlign: R,
-        wordWrap: "break-word"
-      },
-      children: l
-    }
-  );
-};
-export {
-  A as SplitText
-};

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

@@ -1,78 +0,0 @@
-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 {
-  C as CurrentMode
-};

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

@@ -1,152 +0,0 @@
-import { jsxs as $, Fragment as K, jsx as c } from "react/jsx-runtime";
-import { useRef as W, useMemo as I, useEffect as b, useCallback as j } from "react";
-import A from "clsx";
-import { secondsToTimeString as H, renderTextWithWords as L } from "./utils.js";
-import './LyricsMode.css';/* empty css               */
-const M = ({
-  entry: t,
-  label: s,
-  endTime: v,
-  currentTime: _,
-  isActive: y,
-  isFirstItem: u,
-  timeString: g,
-  textAlign: N,
-  enableWordHover: d,
-  wordHoverFactory: h,
-  onSubtitleClick: n,
-  itemRef: e
-}) => {
-  const r = _ > v, i = j(
-    (m) => {
-      n && n(m, t, s);
-    },
-    [n, t, s]
-  ), o = I(
-    () => d ? h(t, s) : void 0,
-    [d, h, t, s]
-  ), l = I(() => t.text.split(`
-`).reduce(
-    (p, x, a) => {
-      if (!t.words || t.words.length === 0)
-        return p.content.push(
-          /* @__PURE__ */ c(
-            "div",
-            {
-              className: "xiping-subtitle-player__lyrics-line",
-              children: x
-            },
-            a
-          )
-        ), p;
-      const f = L(
-        x,
-        t.words,
-        p.nextWordIndex,
-        a,
-        o
-      );
-      return p.content.push(
-        /* @__PURE__ */ c(
-          "div",
-          {
-            className: "xiping-subtitle-player__lyrics-line",
-            children: f.nodes
-          },
-          a
-        )
-      ), {
-        content: p.content,
-        nextWordIndex: f.nextWordIndex
-      };
-    },
-    { content: [], nextWordIndex: 0 }
-  ).content, [t.text, t.words, o]);
-  return /* @__PURE__ */ $(
-    "div",
-    {
-      ref: e,
-      className: A("xiping-subtitle-player__lyrics-item", {
-        "xiping-subtitle-player__lyrics-item--active": y,
-        "xiping-subtitle-player__lyrics-item--past": r
-      }),
-      "data-label": s || void 0,
-      onClick: n ? i : void 0,
-      style: n ? { cursor: "pointer" } : void 0,
-      children: [
-        u && g && /* @__PURE__ */ c("span", { className: "xiping-subtitle-player__lyrics-time", children: g }),
-        s && /* @__PURE__ */ c("span", { className: "xiping-subtitle-player__lyrics-label", children: s }),
-        /* @__PURE__ */ c(
-          "div",
-          {
-            className: "xiping-subtitle-player__lyrics-text",
-            style: { textAlign: N },
-            children: l
-          }
-        )
-      ]
-    }
-  );
-}, q = ({
-  groupedEntriesByTime: t,
-  currentTime: s,
-  wordHoverFactory: v,
-  enableWordHover: _,
-  overlayNode: y,
-  containerRef: u,
-  onSubtitleClick: g,
-  textAlign: N = "left"
-}) => {
-  const d = W(null), h = W(null), n = I(() => {
-    for (let e = 0; e < t.length; e++) {
-      const r = t[e];
-      for (let i = 0; i < r.length; i++) {
-        const { startTime: o, endTime: l } = r[i];
-        if (s >= o && s <= l)
-          return `${e}-${i}`;
-      }
-    }
-    return null;
-  }, [t, s]);
-  return b(() => {
-    if (n && n !== h.current && d.current && u.current) {
-      const e = u.current, r = d.current, i = r.offsetTop, o = e.clientHeight, l = r.clientHeight, m = i - o / 2 + l / 2;
-      e.scrollTo({
-        top: m,
-        behavior: "smooth"
-      }), h.current = n;
-    }
-  }, [n, u]), /* @__PURE__ */ $(K, { children: [
-    t.map((e, r) => {
-      const i = e[0];
-      if (!i)
-        return null;
-      const o = H(i.startTime);
-      return /* @__PURE__ */ c("div", { className: "xiping-subtitle-player__group", children: e.map(({ entry: l, label: m, startTime: p, endTime: x }, a) => {
-        const f = s >= p && s <= x, w = `${r}-${a}`;
-        return /* @__PURE__ */ c(
-          M,
-          {
-            entry: l,
-            label: m,
-            endTime: x,
-            currentTime: s,
-            isActive: f,
-            isFirstItem: a === 0,
-            timeString: a === 0 ? o : void 0,
-            textAlign: N,
-            enableWordHover: _,
-            wordHoverFactory: v,
-            onSubtitleClick: g,
-            itemRef: f ? d : void 0
-          },
-          w
-        );
-      }) }, r);
-    }),
-    _ && /* @__PURE__ */ c("div", { className: "xiping-subtitle-player__lyrics-hover-layer", children: y })
-  ] });
-};
-export {
-  q as LyricsMode
-};