@xiping/react-components 1.0.70 → 1.0.78

package/dist/es/components/text-animate/TextAnimate.js

@@ -1,310 +0,0 @@
-"use client";
-import { jsx as r } from "react/jsx-runtime";
-import { motion as y, AnimatePresence as w } from "motion/react";
-import u from "clsx";
-import './TextAnimate.css';/* empty css                */
-const s = {
-  text: 0.06,
-  word: 0.05,
-  character: 0.03,
-  line: 0.06
-}, i = {
-  hidden: { opacity: 1 },
-  show: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.05
-    }
-  },
-  exit: {
-    opacity: 0,
-    transition: {
-      staggerChildren: 0.05,
-      staggerDirection: -1
-    }
-  }
-}, b = {
-  hidden: { opacity: 0 },
-  show: {
-    opacity: 1
-  },
-  exit: {
-    opacity: 0
-  }
-}, o = {
-  fadeIn: {
-    container: i,
-    item: {
-      hidden: { opacity: 0, y: 20 },
-      show: (t) => ({
-        opacity: 1,
-        y: 0,
-        transition: {
-          delay: t,
-          duration: 0.3
-        }
-      }),
-      exit: {
-        opacity: 0,
-        y: 20,
-        transition: { duration: 0.3 }
-      }
-    }
-  },
-  blurIn: {
-    container: i,
-    item: {
-      hidden: { opacity: 0, filter: "blur(10px)" },
-      show: (t) => ({
-        opacity: 1,
-        filter: "blur(0px)",
-        transition: {
-          delay: t * 0.1,
-          duration: 0.3
-        }
-      }),
-      exit: {
-        opacity: 0,
-        filter: "blur(10px)",
-        transition: { duration: 0.3 }
-      }
-    }
-  },
-  blurInUp: {
-    container: i,
-    item: {
-      hidden: { opacity: 0, filter: "blur(10px)", y: 20 },
-      show: (t) => ({
-        opacity: 1,
-        filter: "blur(0px)",
-        y: 0,
-        transition: {
-          y: { duration: 0.3 },
-          opacity: { duration: 0.4 },
-          filter: { duration: 0.3 }
-        }
-      }),
-      exit: {
-        opacity: 0,
-        filter: "blur(10px)",
-        y: 20,
-        transition: {
-          y: { duration: 0.3 },
-          opacity: { duration: 0.4 },
-          filter: { duration: 0.3 }
-        }
-      }
-    }
-  },
-  blurInDown: {
-    container: i,
-    item: {
-      hidden: { opacity: 0, filter: "blur(10px)", y: -20 },
-      show: (t) => ({
-        opacity: 1,
-        filter: "blur(0px)",
-        y: 0,
-        transition: {
-          y: { duration: 0.3 },
-          opacity: { duration: 0.4 },
-          filter: { duration: 0.3 }
-        }
-      })
-    }
-  },
-  slideUp: {
-    container: i,
-    item: {
-      hidden: { y: 20, opacity: 0 },
-      show: (t) => ({
-        y: 0,
-        opacity: 1,
-        transition: {
-          delay: t,
-          duration: 0.3
-        }
-      }),
-      exit: {
-        y: -20,
-        opacity: 0,
-        transition: {
-          duration: 0.3
-        }
-      }
-    }
-  },
-  slideDown: {
-    container: i,
-    item: {
-      hidden: { y: -20, opacity: 0 },
-      show: {
-        y: 0,
-        opacity: 1,
-        transition: { duration: 0.3 }
-      },
-      exit: {
-        y: 20,
-        opacity: 0,
-        transition: { duration: 0.3 }
-      }
-    }
-  },
-  slideLeft: {
-    container: i,
-    item: {
-      hidden: { x: 20, opacity: 0 },
-      show: {
-        x: 0,
-        opacity: 1,
-        transition: { duration: 0.3 }
-      },
-      exit: {
-        x: -20,
-        opacity: 0,
-        transition: { duration: 0.3 }
-      }
-    }
-  },
-  slideRight: {
-    container: i,
-    item: {
-      hidden: { x: -20, opacity: 0 },
-      show: {
-        x: 0,
-        opacity: 1,
-        transition: { duration: 0.3 }
-      },
-      exit: {
-        x: 20,
-        opacity: 0,
-        transition: { duration: 0.3 }
-      }
-    }
-  },
-  scaleUp: {
-    container: i,
-    item: {
-      hidden: { scale: 0.5, opacity: 0 },
-      show: {
-        scale: 1,
-        opacity: 1,
-        transition: {
-          duration: 0.3,
-          scale: {
-            type: "spring",
-            damping: 15,
-            stiffness: 300
-          }
-        }
-      },
-      exit: {
-        scale: 0.5,
-        opacity: 0,
-        transition: { duration: 0.3 }
-      }
-    }
-  },
-  scaleDown: {
-    container: i,
-    item: {
-      hidden: { scale: 1.5, opacity: 0 },
-      show: (t) => ({
-        scale: 1,
-        opacity: 1,
-        transition: {
-          delay: t,
-          duration: 0.3,
-          scale: {
-            type: "spring",
-            damping: 15,
-            stiffness: 300
-          }
-        }
-      }),
-      exit: {
-        scale: 1.5,
-        opacity: 0,
-        transition: { duration: 0.3 }
-      }
-    }
-  }
-};
-function $({
-  children: t,
-  delay: I = 0,
-  duration: C = 0.3,
-  variants: v,
-  className: x,
-  segmentClassName: h,
-  as: m = "p",
-  startOnView: c = !0,
-  once: D = !1,
-  by: n = "word",
-  animation: a = "fadeIn",
-  ...f
-}) {
-  const g = y.create(m), d = a ? {
-    container: {
-      ...o[a].container,
-      show: {
-        ...o[a].container.show,
-        transition: {
-          staggerChildren: s[n]
-        }
-      },
-      exit: {
-        ...o[a].container.exit,
-        transition: {
-          staggerChildren: s[n],
-          staggerDirection: -1
-        }
-      }
-    },
-    item: o[a].item
-  } : { container: i, item: b };
-  let e = [];
-  switch (n) {
-    case "word":
-      e = t.split(/(\s+)/);
-      break;
-    case "character":
-      e = t.split("");
-      break;
-    case "line":
-      e = t.split(`
-`);
-      break;
-    default:
-      e = [t];
-      break;
-  }
-  return /* @__PURE__ */ r(w, { mode: "popLayout", children: /* @__PURE__ */ r(
-    g,
-    {
-      variants: d.container,
-      initial: "hidden",
-      whileInView: c ? "show" : void 0,
-      animate: c ? void 0 : "show",
-      exit: "exit",
-      className: u("xiping-text-animate", x),
-      ...f,
-      children: e.map((p, l) => /* @__PURE__ */ r(
-        y.span,
-        {
-          variants: d.item,
-          custom: l * s[n],
-          className: u(
-            "xiping-text-animate-segment",
-            n === "line" && "xiping-text-animate-segment--line",
-            h
-          ),
-          children: p
-        },
-        `${n}-${p}-${l}`
-      ))
-    }
-  ) });
-}
-export {
-  $ as TextAnimate
-};

package/dist/es/components/text-type/TextType.js

@@ -1,121 +0,0 @@
-"use client";
-import { jsx as b } from "react/jsx-runtime";
-import { useState as o, useRef as k, useMemo as U, useCallback as V, useEffect as I, createElement as W } from "react";
-import { gsap as q } from "gsap";
-import X from "clsx";
-import './TextType.css';/* empty css             */
-const ee = ({
-  text: u,
-  as: v = "div",
-  typingSpeed: f = 50,
-  initialDelay: _ = 0,
-  pauseDuration: h = 2e3,
-  deletingSpeed: A = 30,
-  loop: R = !0,
-  className: w = "",
-  showCursor: T = !0,
-  hideCursorWhileTyping: z = !1,
-  cursorCharacter: F = "|",
-  cursorClassName: G = "",
-  cursorBlinkDuration: E = 0.5,
-  textColors: g = [],
-  variableSpeed: c,
-  onSentenceComplete: d,
-  startOnVisible: p = !1,
-  reverseMode: N = !1,
-  ...J
-}) => {
-  const [l, j] = o(""), [i, C] = o(0), [a, H] = o(!1), [t, K] = o(0), [M, L] = o(!p), m = k(null), y = k(null), r = U(() => Array.isArray(u) ? u : [u], [u]), O = V(() => {
-    if (!c) return f;
-    const { min: e, max: n } = c;
-    return Math.random() * (n - e) + e;
-  }, [c, f]), P = () => {
-    if (g.length !== 0)
-      return g[t % g.length];
-  };
-  I(() => {
-    if (!p || !y.current) return;
-    const e = new IntersectionObserver(
-      (n) => {
-        n.forEach((x) => {
-          x.isIntersecting && L(!0);
-        });
-      },
-      { threshold: 0.1 }
-    );
-    return e.observe(y.current), () => e.disconnect();
-  }, [p]), I(() => {
-    T && m.current && (q.set(m.current, { opacity: 1 }), q.to(m.current, {
-      opacity: 0,
-      duration: E,
-      repeat: -1,
-      yoyo: !0,
-      ease: "power2.inOut"
-    }));
-  }, [T, E]), I(() => {
-    if (!M) return;
-    let e;
-    const n = r[t], x = N ? n.split("").reverse().join("") : n, $ = () => {
-      if (a)
-        if (l === "") {
-          if (H(!1), t === r.length - 1 && !R)
-            return;
-          d && d(r[t], t), K((s) => (s + 1) % r.length), C(0), e = setTimeout(() => {
-          }, h);
-        } else
-          e = setTimeout(() => {
-            j((s) => s.slice(0, -1));
-          }, A);
-      else
-        i < x.length ? e = setTimeout(
-          () => {
-            j((s) => s + x[i]), C((s) => s + 1);
-          },
-          c ? O() : f
-        ) : r.length > 1 && (e = setTimeout(() => {
-          H(!0);
-        }, h));
-    };
-    return i === 0 && !a && l === "" ? e = setTimeout($, _) : $(), () => clearTimeout(e);
-  }, [
-    i,
-    l,
-    a,
-    f,
-    A,
-    h,
-    r,
-    t,
-    R,
-    _,
-    M,
-    N,
-    c,
-    d
-  ]);
-  const Q = z && (i < r[t].length || a);
-  return W(
-    v,
-    {
-      ref: y,
-      className: `xiping-text-type ${w}`,
-      ...J
-    },
-    /* @__PURE__ */ b("span", { className: "xiping-text-type__content", style: { color: P() || "inherit" }, children: l }),
-    T && /* @__PURE__ */ b(
-      "span",
-      {
-        ref: m,
-        className: X(
-          "xiping-text-type__cursor",
-          G,
-          Q && "xiping-text-type__cursor--hidden"
-        ),
-        children: F
-      }
-    )
-  );
-};
-export {
-  ee as default
-};

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

@@ -1,10 +0,0 @@
-import './index.module.css';const t = {
-  "xiping-top-progress": "_xiping-top-progress_rkm9f_23",
-  "xiping-container": "_xiping-container_rkm9f_33",
-  "xiping-content": "_xiping-content_rkm9f_41",
-  "xiping-bottom-progress": "_xiping-bottom-progress_rkm9f_48",
-  "xiping-text-content": "_xiping-text-content_rkm9f_63"
-};
-export {
-  t as default
-};

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

@@ -1,56 +0,0 @@
-"use client";
-import { jsx as d } from "react/jsx-runtime";
-import { motion as x } from "motion/react";
-import { useState as u, useRef as I, useEffect as m } from "react";
-import b from "clsx";
-import './index.css';/* empty css          */
-function S({
-  children: r,
-  className: a,
-  duration: s = 100,
-  delay: n = 0,
-  as: l = "div",
-  startOnView: i = !1,
-  ...p
-}) {
-  const g = x.create(l, {
-    forwardMotionProps: !0
-  }), [v, T] = u(""), [c, f] = u(!1), o = I(null);
-  return m(() => {
-    if (!i) {
-      const t = setTimeout(() => {
-        f(!0);
-      }, n);
-      return () => clearTimeout(t);
-    }
-    const e = new IntersectionObserver(
-      ([t]) => {
-        t.isIntersecting && (setTimeout(() => {
-          f(!0);
-        }, n), e.disconnect());
-      },
-      { threshold: 0.1 }
-    );
-    return o.current && e.observe(o.current), () => e.disconnect();
-  }, [n, i]), m(() => {
-    if (!c) return;
-    let e = 0;
-    const t = setInterval(() => {
-      e < r.length ? (T(r.substring(0, e + 1)), e++) : clearInterval(t);
-    }, s);
-    return () => {
-      clearInterval(t);
-    };
-  }, [r, s, c]), /* @__PURE__ */ d(
-    g,
-    {
-      ref: o,
-      className: b("xiping-typing-animation", a),
-      ...p,
-      children: v
-    }
-  );
-}
-export {
-  S as TypingAnimation
-};

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

@@ -1,211 +0,0 @@
-import { jsxs as U, jsx as k } from "react/jsx-runtime";
-import { forwardRef as G, useRef as y, useMemo as N, useEffect as w } from "react";
-import { motion as H } from "motion/react";
-import J from "clsx";
-import './index.css';/* 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 = G(
-  (n, r) => {
-    const {
-      label: i,
-      fromFontVariationSettings: f,
-      toFontVariationSettings: d,
-      containerRef: t,
-      radius: s = 50,
-      falloff: m = "linear",
-      className: c = "",
-      onClick: E,
-      style: C,
-      fontFamily: h,
-      autoLoadFonts: P = !0,
-      ...A
-    } = n;
-    O(P && !h);
-    const b = y([]), v = y([]), S = W(t), x = y({
-      x: null,
-      y: null
-    }), q = N(() => {
-      const e = (o) => new Map(
-        o.split(",").map((p) => p.trim()).map((p) => {
-          const [g, F] = p.split(" ");
-          return [g.replace(/['"]/g, ""), parseFloat(F)];
-        })
-      ), 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]), I = (e, a, u, o) => Math.sqrt((u - e) ** 2 + (o - a) ** 2), $ = (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);
-        default:
-          return a;
-      }
-    };
-    Q(() => {
-      if (!t?.current) return;
-      const { x: e, y: a } = S.current;
-      if (x.current.x === e && x.current.y === a)
-        return;
-      x.current = { x: e, y: a };
-      const u = t.current.getBoundingClientRect();
-      b.current.forEach((o, p) => {
-        if (!o) return;
-        const g = o.getBoundingClientRect(), F = g.left + g.width / 2 - u.left, Y = g.top + g.height / 2 - u.top, L = I(
-          S.current.x,
-          S.current.y,
-          F,
-          Y
-        );
-        if (L >= s) {
-          o.style.fontVariationSettings = f;
-          return;
-        }
-        const z = $(L), M = q.map(({ axis: T, fromValue: R, toValue: _ }) => {
-          const D = R + (_ - R) * z;
-          return `'${T}' ${D}`;
-        }).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 h && (e.fontFamily = h), e;
-    }, [h, C]);
-    return /* @__PURE__ */ U(
-      "span",
-      {
-        ref: r,
-        className: J("xiping-variable-proximity", c),
-        onClick: E,
-        style: X,
-        ...A,
-        children: [
-          j.map((e, a) => {
-            const u = B++;
-            return /* @__PURE__ */ k(
-              H.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: "xiping-variable-proximity__sr-only", children: i })
-        ]
-      }
-    );
-  }
-);
-Z.displayName = "VariableProximity";
-export {
-  Z as VariableProximity
-};