@xiping/react-components 1.0.70 → 1.0.78

package/dist/es/components/pointer/Pointer2.js

@@ -0,0 +1,61 @@
+"use client";
+import './Pointer.css';/* empty css        */
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useEffect as r, useRef as i, useState as a } from "react";
+import o from "clsx";
+import { AnimatePresence as s, motion as c, useMotionValue as l } from "motion/react";
+//#region src/components/pointer/Pointer.tsx
+function u({ className: u, style: d, children: f, ...p }) {
+	let m = l(0), h = l(0), [g, _] = a(!1), v = i(null);
+	return r(() => {
+		if (typeof window < "u" && v.current) {
+			let e = v.current.parentElement;
+			if (e) {
+				e.style.cursor = "none";
+				let t = (e) => {
+					m.set(e.clientX), h.set(e.clientY);
+				}, n = () => {
+					_(!0);
+				}, r = () => {
+					_(!1);
+				};
+				return e.addEventListener("mousemove", t), e.addEventListener("mouseenter", n), e.addEventListener("mouseleave", r), () => {
+					e.style.cursor = "", e.removeEventListener("mousemove", t), e.removeEventListener("mouseenter", n), e.removeEventListener("mouseleave", r);
+				};
+			}
+		}
+	}, [m, h]), /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("div", { ref: v }), /* @__PURE__ */ t(s, { children: g && /* @__PURE__ */ t(c.div, {
+		className: o("xiping-pointer", u),
+		style: {
+			top: h,
+			left: m,
+			...d
+		},
+		initial: {
+			scale: 0,
+			opacity: 0
+		},
+		animate: {
+			scale: 1,
+			opacity: 1
+		},
+		exit: {
+			scale: 0,
+			opacity: 0
+		},
+		...p,
+		children: f || /* @__PURE__ */ t("svg", {
+			stroke: "currentColor",
+			fill: "currentColor",
+			strokeWidth: "1",
+			viewBox: "0 0 16 16",
+			height: "24",
+			width: "24",
+			xmlns: "http://www.w3.org/2000/svg",
+			className: "xiping-pointer-icon",
+			children: /* @__PURE__ */ t("path", { d: "M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z" })
+		})
+	}) })] });
+}
+//#endregion
+export { u as Pointer };

package/dist/es/components/react-force-graph-3d/index.js

@@ -0,0 +1,2 @@
+import e from "react-force-graph-3d";
+export { e as ForceGraph3D };

package/dist/es/components/scratch-to-reveal/ScratchToReveal.css

@@ -1 +1 @@
-.xiping-scratch-to-reveal{position:relative;-webkit-user-select:none;user-select:none}.xiping-scratch-canvas{position:absolute;left:0;top:0}
+.xiping-scratch-to-reveal{-webkit-user-select:none;user-select:none;position:relative}.xiping-scratch-canvas{position:absolute;top:0;left:0}

package/dist/es/components/scratch-to-reveal/ScratchToReveal2.js

@@ -0,0 +1,88 @@
+"use client";
+import './ScratchToReveal.css';/* empty css                */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import a from "clsx";
+import { motion as o, useAnimation as s } from "motion/react";
+//#region src/components/scratch-to-reveal/ScratchToReveal.tsx
+var c = ({ width: c, height: l, minScratchPercentage: u = 50, onComplete: d, children: f, className: p, gradientColors: m = [
+	"#A97CF8",
+	"#F38CB8",
+	"#FDCC92"
+] }) => {
+	let h = r(null), [g, _] = i(!1), [v, y] = i(!1), b = s();
+	n(() => {
+		let e = h.current, t = e?.getContext("2d");
+		if (e && t) {
+			t.fillStyle = "#ccc", t.fillRect(0, 0, e.width, e.height);
+			let n = t.createLinearGradient(0, 0, e.width, e.height);
+			n.addColorStop(0, m[0]), n.addColorStop(.5, m[1]), n.addColorStop(1, m[2]), t.fillStyle = n, t.fillRect(0, 0, e.width, e.height);
+		}
+	}, [m]), n(() => {
+		let e = (e) => {
+			g && C(e.clientX, e.clientY);
+		}, t = (e) => {
+			if (!g) return;
+			let t = e.touches[0];
+			C(t.clientX, t.clientY);
+		}, n = () => {
+			_(!1), T();
+		}, r = () => {
+			_(!1), T();
+		};
+		return document.addEventListener("mousedown", e), document.addEventListener("mousemove", e), document.addEventListener("touchstart", t), document.addEventListener("touchmove", t), document.addEventListener("mouseup", n), document.addEventListener("touchend", r), document.addEventListener("touchcancel", r), () => {
+			document.removeEventListener("mousedown", e), document.removeEventListener("mousemove", e), document.removeEventListener("touchstart", t), document.removeEventListener("touchmove", t), document.removeEventListener("mouseup", n), document.removeEventListener("touchend", r), document.removeEventListener("touchcancel", r);
+		};
+	}, [g]);
+	let x = () => _(!0), S = () => _(!0), C = (e, t) => {
+		let n = h.current, r = n?.getContext("2d");
+		if (n && r) {
+			let i = n.getBoundingClientRect(), a = e - i.left + 16, o = t - i.top + 16;
+			r.globalCompositeOperation = "destination-out", r.beginPath(), r.arc(a, o, 30, 0, Math.PI * 2), r.fill();
+		}
+	}, w = async () => {
+		await b.start({
+			scale: [
+				1,
+				1.5,
+				1
+			],
+			rotate: [
+				0,
+				10,
+				-10,
+				10,
+				-10,
+				0
+			],
+			transition: { duration: .5 }
+		}), d && d();
+	}, T = () => {
+		if (v) return;
+		let e = h.current, t = e?.getContext("2d");
+		if (e && t) {
+			let n = t.getImageData(0, 0, e.width, e.height).data, r = n.length / 4, i = 0;
+			for (let e = 3; e < n.length; e += 4) n[e] === 0 && i++;
+			i / r * 100 >= u && (y(!0), t.clearRect(0, 0, e.width, e.height), w());
+		}
+	};
+	return /* @__PURE__ */ t(o.div, {
+		className: a("xiping-scratch-to-reveal", p),
+		style: {
+			width: c,
+			height: l,
+			cursor: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNSIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6IzAwMDtzdHJva2Utd2lkdGg6MXB4OyIgLz4KPC9zdmc+'), auto"
+		},
+		animate: b,
+		children: [/* @__PURE__ */ e("canvas", {
+			ref: h,
+			width: c,
+			height: l,
+			className: "xiping-scratch-canvas",
+			onMouseDown: x,
+			onTouchStart: S
+		}), f]
+	});
+};
+//#endregion
+export { c as ScratchToReveal };

package/dist/es/components/shimmer-button/ShimmerButton.css

@@ -1 +1 @@
-.xiping-shimmer-button{position:relative;z-index:0;display:flex;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;border:1px solid rgba(255,255,255,.1);padding:.75rem 1.5rem;color:#fff;background:var(--bg);border-radius:var(--radius);transform:translateZ(0);transition:transform .3s ease-in-out}.xiping-shimmer-button:active{transform:translateY(1px) translateZ(0)}@media(prefers-color-scheme:dark){.xiping-shimmer-button{color:#000}}.xiping-shimmer-button-spark-container{position:absolute;z-index:-30;inset:0;overflow:visible;filter:blur(2px);container-type:size}.xiping-shimmer-button-spark{position:absolute;inset:0;height:100cqh;aspect-ratio:1;border-radius:0;-webkit-mask:none;mask:none;animation:xiping-shimmer-slide var(--speed) ease-in-out infinite alternate}.xiping-shimmer-button-spark-before{position:absolute;inset:-100%;width:auto;transform:rotate(0);background:conic-gradient(from calc(270deg - (var(--spread) * .5)),transparent 0,var(--shimmer-color) var(--spread),transparent var(--spread));animation:xiping-spin-around calc(var(--speed) * 2) infinite linear}.xiping-shimmer-button-highlight{position:absolute;inset:0;width:100%;height:100%;border-radius:1rem;box-shadow:inset 0 -8px 10px #ffffff1f;transform:translateZ(0);transition:all .3s ease-in-out}.xiping-shimmer-button:hover .xiping-shimmer-button-highlight{box-shadow:inset 0 -6px 10px #ffffff40}.xiping-shimmer-button:active .xiping-shimmer-button-highlight{box-shadow:inset 0 -10px 10px #ffffff40}.xiping-shimmer-button-backdrop{position:absolute;z-index:-20;background:var(--bg);border-radius:var(--radius);inset:var(--cut)}@keyframes xiping-shimmer-slide{to{transform:translate(calc(100cqw - 100%))}}@keyframes xiping-spin-around{0%{transform:translateZ(0) rotate(0)}15%,35%{transform:translateZ(0) rotate(90deg)}65%,85%{transform:translateZ(0) rotate(270deg)}to{transform:translateZ(0) rotate(360deg)}}
+.xiping-shimmer-button{z-index:0;cursor:pointer;white-space:nowrap;color:#fff;background:var(--bg);border-radius:var(--radius);border:1px solid #ffffff1a;justify-content:center;align-items:center;padding:.75rem 1.5rem;transition:transform .3s ease-in-out;display:flex;position:relative;overflow:hidden;transform:translateZ(0)}.xiping-shimmer-button:active{transform:translateY(1px)translateZ(0)}@media (prefers-color-scheme:dark){.xiping-shimmer-button{color:#000}}.xiping-shimmer-button-spark-container{z-index:-30;filter:blur(2px);position:absolute;inset:0;overflow:visible;container-type:size}.xiping-shimmer-button-spark{aspect-ratio:1;height:100cqh;animation:xiping-shimmer-slide var(--speed) ease-in-out infinite alternate;border-radius:0;position:absolute;inset:0;-webkit-mask:none;mask:none}.xiping-shimmer-button-spark-before{background:conic-gradient(from calc(270deg - (var(--spread) * .5)), transparent 0, var(--shimmer-color) var(--spread), transparent var(--spread));width:auto;animation:xiping-spin-around calc(var(--speed) * 2) infinite linear;position:absolute;inset:-100%;transform:rotate(0)}.xiping-shimmer-button-highlight{border-radius:1rem;width:100%;height:100%;transition:all .3s ease-in-out;position:absolute;inset:0;transform:translateZ(0);box-shadow:inset 0 -8px 10px #ffffff1f}.xiping-shimmer-button:hover .xiping-shimmer-button-highlight{box-shadow:inset 0 -6px 10px #ffffff40}.xiping-shimmer-button:active .xiping-shimmer-button-highlight{box-shadow:inset 0 -10px 10px #ffffff40}.xiping-shimmer-button-backdrop{z-index:-20;background:var(--bg);border-radius:var(--radius);inset:var(--cut);position:absolute}@keyframes xiping-shimmer-slide{to{transform:translate(calc(100cqw - 100%))}}@keyframes xiping-spin-around{0%{transform:translateZ(0)rotate(0)}15%,35%{transform:translateZ(0)rotate(90deg)}65%,85%{transform:translateZ(0)rotate(270deg)}to{transform:translateZ(0)rotate(360deg)}}

package/dist/es/components/shimmer-button/ShimmerButton2.js

@@ -0,0 +1,33 @@
+import './ShimmerButton.css';/* empty css              */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import n from "react";
+import r from "clsx";
+//#region src/components/shimmer-button/ShimmerButton.tsx
+var i = n.forwardRef(({ shimmerColor: n = "#ffffff", shimmerSize: i = "0.05em", shimmerDuration: a = "3s", borderRadius: o = "100px", background: s = "rgba(0, 0, 0, 1)", className: c, children: l, ...u }, d) => /* @__PURE__ */ t("button", {
+	style: {
+		"--spread": "90deg",
+		"--shimmer-color": n,
+		"--radius": o,
+		"--speed": a,
+		"--cut": i,
+		"--bg": s
+	},
+	className: r("xiping-shimmer-button", c),
+	ref: d,
+	...u,
+	children: [
+		/* @__PURE__ */ e("div", {
+			className: "xiping-shimmer-button-spark-container",
+			children: /* @__PURE__ */ e("div", {
+				className: "xiping-shimmer-button-spark",
+				children: /* @__PURE__ */ e("div", { className: "xiping-shimmer-button-spark-before" })
+			})
+		}),
+		l,
+		/* @__PURE__ */ e("div", { className: "xiping-shimmer-button-highlight" }),
+		/* @__PURE__ */ e("div", { className: "xiping-shimmer-button-backdrop" })
+	]
+}));
+i.displayName = "ShimmerButton";
+//#endregion
+export { i as default };

package/dist/es/components/shiny-button/ShinyButton.css

@@ -1 +1 @@
-.xiping-shiny-button{position:relative;cursor:pointer;border-radius:.5rem;padding:.5rem 1.5rem;font-weight:500;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid;transition:box-shadow .3s ease-in-out}.xiping-shiny-button:hover{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}@media(prefers-color-scheme:dark){.xiping-shiny-button{background:radial-gradient(circle at 50% 0%,var(--primary) 10%,transparent 60%)}.xiping-shiny-button:hover{box-shadow:0 0 20px var(--primary) / 10%}}.xiping-shiny-button-text{position:relative;display:block;width:100%;height:100%;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;color:#000000a6}@media(prefers-color-scheme:dark){.xiping-shiny-button-text{font-weight:300;color:#ffffffe5}}.xiping-shiny-button-border{position:absolute;inset:0;z-index:10;display:block;border-radius:inherit;padding:1px}
+.xiping-shiny-button{cursor:pointer;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid;border-radius:.5rem;padding:.5rem 1.5rem;font-weight:500;transition:box-shadow .3s ease-in-out;position:relative}.xiping-shiny-button:hover{box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}@media (prefers-color-scheme:dark){.xiping-shiny-button{background:radial-gradient(circle at 50% 0%, var(--primary) 10%, transparent 60%)}.xiping-shiny-button:hover{box-shadow:0 0 20px var(--primary) / 10%}}.xiping-shiny-button-text{text-transform:uppercase;letter-spacing:.05em;color:#000000a6;width:100%;height:100%;font-size:.875rem;display:block;position:relative}@media (prefers-color-scheme:dark){.xiping-shiny-button-text{color:#ffffffe6;font-weight:300}}.xiping-shiny-button-border{z-index:10;border-radius:inherit;padding:1px;display:block;position:absolute;inset:0}

package/dist/es/components/shiny-button/ShinyButton2.js

@@ -0,0 +1,53 @@
+"use client";
+import './ShinyButton.css';/* empty css            */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import n from "react";
+import r from "clsx";
+import { motion as i } from "motion/react";
+//#region src/components/shiny-button/ShinyButton.tsx
+var a = {
+	initial: {
+		"--x": "100%",
+		scale: .8
+	},
+	animate: {
+		"--x": "-100%",
+		scale: 1
+	},
+	whileTap: { scale: .95 },
+	transition: {
+		repeat: Infinity,
+		repeatType: "loop",
+		repeatDelay: 1,
+		type: "spring",
+		stiffness: 20,
+		damping: 15,
+		mass: 2,
+		scale: {
+			type: "spring",
+			stiffness: 200,
+			damping: 5,
+			mass: .5
+		}
+	}
+}, o = n.forwardRef(({ children: n, className: o, ...s }, c) => /* @__PURE__ */ t(i.button, {
+	ref: c,
+	className: r("xiping-shiny-button", o),
+	...a,
+	...s,
+	children: [/* @__PURE__ */ e("span", {
+		className: "xiping-shiny-button-text",
+		style: { maskImage: "linear-gradient(-75deg,var(--primary) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),var(--primary) calc(var(--x) + 100%))" },
+		children: n
+	}), /* @__PURE__ */ e("span", {
+		style: {
+			mask: "linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0))",
+			WebkitMask: "linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0))",
+			backgroundImage: "linear-gradient(-75deg,var(--primary)/10% calc(var(--x)+20%),var(--primary)/50% calc(var(--x)+25%),var(--primary)/10% calc(var(--x)+100%))"
+		},
+		className: "xiping-shiny-button-border"
+	})]
+}));
+o.displayName = "ShinyButton";
+//#endregion
+export { o as ShinyButton };

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

@@ -0,0 +1,61 @@
+import './ShinyText.css';/* empty css          */
+import { jsx as e } from "react/jsx-runtime";
+import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+import { motion as a, useAnimationFrame as o, useMotionValue as s, useTransform as c } from "motion/react";
+//#region src/components/shiny-text/ShinyText.tsx
+var l = ({ text: l, disabled: u = !1, speed: d = 2, className: f = "", color: p = "#b5b5b5", shineColor: m = "#ffffff", spread: h = 120, yoyo: g = !1, pauseOnHover: _ = !1, direction: v = "left", delay: y = 0 }) => {
+	let [b, x] = i(!1), S = s(0), C = r(0), w = r(null), T = r(v === "left" ? 1 : -1), E = d * 1e3, D = y * 1e3;
+	o((e) => {
+		if (u || b) {
+			w.current = null;
+			return;
+		}
+		if (w.current === null) {
+			w.current = e;
+			return;
+		}
+		let t = e - w.current;
+		if (w.current = e, C.current += t, g) {
+			let e = E + D, t = e * 2, n = C.current % t;
+			if (n < E) {
+				let e = n / E * 100;
+				S.set(T.current === 1 ? e : 100 - e);
+			} else if (n < e) S.set(T.current === 1 ? 100 : 0);
+			else if (n < e + E) {
+				let t = 100 - (n - e) / E * 100;
+				S.set(T.current === 1 ? t : 100 - t);
+			} else S.set(T.current === 1 ? 0 : 100);
+		} else {
+			let e = E + D, t = C.current % e;
+			if (t < E) {
+				let e = t / E * 100;
+				S.set(T.current === 1 ? e : 100 - e);
+			} else S.set(T.current === 1 ? 100 : 0);
+		}
+	}), n(() => {
+		T.current = v === "left" ? 1 : -1, C.current = 0, S.set(0);
+	}, [v]);
+	let O = c(S, (e) => `${150 - e * 2}% center`), k = t(() => {
+		_ && x(!0);
+	}, [_]), A = t(() => {
+		_ && x(!1);
+	}, [_]), j = {
+		backgroundImage: `linear-gradient(${h}deg, ${p} 0%, ${p} 35%, ${m} 50%, ${p} 65%, ${p} 100%)`,
+		backgroundSize: "200% auto",
+		WebkitBackgroundClip: "text",
+		backgroundClip: "text",
+		WebkitTextFillColor: "transparent"
+	};
+	return /* @__PURE__ */ e(a.span, {
+		className: `shiny-text ${f}`,
+		style: {
+			...j,
+			backgroundPosition: O
+		},
+		onMouseEnter: k,
+		onMouseLeave: A,
+		children: l
+	});
+};
+//#endregion
+export { l as default };

package/dist/es/components/sparkles-text/SparklesText.css

@@ -1 +1 @@
-.xiping-sparkle{pointer-events:none;position:absolute;z-index:20}.xiping-sparkles-text{font-size:3.75rem;font-weight:700}.xiping-sparkles-text-wrapper{position:relative;display:inline-block}
+.xiping-sparkle{pointer-events:none;z-index:20;position:absolute}.xiping-sparkles-text{font-size:3.75rem;font-weight:700}.xiping-sparkles-text-wrapper{display:inline-block;position:relative}

package/dist/es/components/sparkles-text/SparklesText2.js

@@ -0,0 +1,90 @@
+"use client";
+import './SparklesText.css';/* empty css             */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useEffect as n, useState as r } from "react";
+import i from "clsx";
+import { motion as a } from "motion/react";
+//#region src/components/sparkles-text/SparklesText.tsx
+var o = ({ id: t, x: n, y: r, color: i, delay: o, scale: s }) => /* @__PURE__ */ e(a.svg, {
+	className: "xiping-sparkle",
+	initial: {
+		opacity: 0,
+		left: n,
+		top: r
+	},
+	animate: {
+		opacity: [
+			0,
+			1,
+			0
+		],
+		scale: [
+			0,
+			s,
+			0
+		],
+		rotate: [
+			75,
+			120,
+			150
+		]
+	},
+	transition: {
+		duration: .8,
+		repeat: Infinity,
+		delay: o
+	},
+	width: "21",
+	height: "21",
+	viewBox: "0 0 21 21",
+	children: /* @__PURE__ */ e("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: i
+	})
+}, t), s = ({ children: a, colors: s = {
+	first: "#9E7AFF",
+	second: "#FE8BBB"
+}, className: c, sparklesCount: l = 10, ...u }) => {
+	let [d, f] = r([]);
+	return n(() => {
+		let e = () => {
+			let e = `${Math.random() * 100}%`, t = `${Math.random() * 100}%`, n = Math.random() > .5 ? s.first : s.second, r = Math.random() * 2, i = Math.random() * 1 + .3, a = Math.random() * 10 + 5;
+			return {
+				id: `${e}-${t}-${Date.now()}`,
+				x: e,
+				y: t,
+				color: n,
+				delay: r,
+				scale: i,
+				lifespan: a
+			};
+		}, t = () => {
+			f(Array.from({ length: l }, e));
+		}, n = () => {
+			f((t) => t.map((t) => t.lifespan <= 0 ? e() : {
+				...t,
+				lifespan: t.lifespan - .1
+			}));
+		};
+		t();
+		let r = setInterval(n, 100);
+		return () => clearInterval(r);
+	}, [
+		s.first,
+		s.second,
+		l
+	]), /* @__PURE__ */ e("div", {
+		className: i("xiping-sparkles-text", c),
+		...u,
+		style: {
+			"--sparkles-first-color": `${s.first}`,
+			"--sparkles-second-color": `${s.second}`
+		},
+		children: /* @__PURE__ */ t("span", {
+			className: "xiping-sparkles-text-wrapper",
+			children: [d.map((t) => /* @__PURE__ */ e(o, { ...t }, t.id)), /* @__PURE__ */ e("strong", { children: a })]
+		})
+	});
+};
+//#endregion
+export { s as SparklesText };

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

@@ -1 +1 @@
-.xiping-split-parent{overflow:hidden;display:inline-block;white-space:normal}
+.xiping-split-parent{white-space:normal;display:inline-block;overflow:hidden}

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

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

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

@@ -1 +1 @@
-.xiping-subtitle-player__current-item{display:flex;flex-direction:column;gap:.25rem;transition:all .2s ease}.xiping-subtitle-player__current-label{font-size:.75rem;font-weight:600;color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.xiping-subtitle-player__current-text{font-size:1rem;font-weight:500;text-shadow:0 2px 4px rgba(0,0,0,.5)}.xiping-subtitle-player__current-line{margin:.25rem 0}.xiping-subtitle-player__current-line:first-child{margin-top:0}.xiping-subtitle-player__current-line:last-child{margin-bottom:0}.xiping-subtitle-player__current-hover-layer{position:absolute;inset:0;pointer-events:none}@media(max-width:768px){.xiping-subtitle-player__current-text{font-size:.9rem}}
+.xiping-subtitle-player__current-item{flex-direction:column;gap:.25rem;transition:all .2s;display:flex}.xiping-subtitle-player__current-label{color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;font-size:.75rem;font-weight:600}.xiping-subtitle-player__current-text{text-shadow:0 2px 4px #00000080;font-size:1rem;font-weight:500}.xiping-subtitle-player__current-line{margin:.25rem 0}.xiping-subtitle-player__current-line:first-child{margin-top:0}.xiping-subtitle-player__current-line:last-child{margin-bottom:0}.xiping-subtitle-player__current-hover-layer{pointer-events:none;position:absolute;inset:0}@media (width<=768px){.xiping-subtitle-player__current-text{font-size:.9rem}}

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

@@ -0,0 +1,44 @@
+import { renderTextWithWords as e } from "./utils.js";
+import './CurrentMode.css';/* empty css            */
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import "react";
+//#region src/components/subtitle-player/CurrentMode.tsx
+var i = ({ currentEntries: i, wordHoverFactory: a, enableWordHover: o, overlayNode: s, onSubtitleClick: c, textAlign: l = "left" }) => i.some(({ entry: e }) => e !== null) ? /* @__PURE__ */ r(t, { children: [i.map(({ entry: t, label: i }) => {
+	if (!t) return null;
+	let s = t.text.split("\n"), u = o ? a(t, i) : void 0, d = s.reduce((r, i, a) => {
+		if (!t.words || t.words.length === 0) return r.content.push(/* @__PURE__ */ n("div", {
+			className: "xiping-subtitle-player__current-line",
+			children: i
+		}, a)), r;
+		let o = e(i, t.words, r.nextWordIndex, a, u);
+		return r.content.push(/* @__PURE__ */ n("div", {
+			className: "xiping-subtitle-player__current-line",
+			children: o.nodes
+		}, a)), {
+			content: r.content,
+			nextWordIndex: o.nextWordIndex
+		};
+	}, {
+		content: [],
+		nextWordIndex: 0
+	}).content, f = c ? (e) => c(e, t, i) : void 0;
+	return /* @__PURE__ */ r("div", {
+		className: "xiping-subtitle-player__current-item",
+		"data-label": i || void 0,
+		onClick: f,
+		style: c ? { cursor: "pointer" } : void 0,
+		children: [i && /* @__PURE__ */ n("span", {
+			className: "xiping-subtitle-player__current-label",
+			children: i
+		}), /* @__PURE__ */ n("div", {
+			className: "xiping-subtitle-player__current-text",
+			style: { textAlign: l },
+			children: d
+		})]
+	}, `${t.index}-${i || ""}`);
+}), o && /* @__PURE__ */ n("div", {
+	className: "xiping-subtitle-player__current-hover-layer",
+	children: s
+})] }) : null;
+//#endregion
+export { i as CurrentMode };

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

@@ -1 +1 @@
-.xiping-subtitle-player__lyrics-time{font-size:.7rem;font-weight:500;color:#ffffff80;font-family:Monaco,Menlo,Ubuntu Mono,monospace;margin-bottom:.25rem;-webkit-user-select:none;user-select:none}.xiping-subtitle-player__lyrics-item{display:flex;flex-direction:column;gap:.25rem;transition:all .2s ease}.xiping-subtitle-player__lyrics-item--active{color:#fbbf24;font-weight:600;transition:all .3s ease;position:relative}.xiping-subtitle-player__lyrics-item--active:before{content:"";position:absolute;left:-1rem;top:50%;transform:translateY(-50%);width:4px;height:92%;background:#fbbf24;border-radius:2px}.xiping-subtitle-player__lyrics-item--past{opacity:.5;color:#fff9}.xiping-subtitle-player__lyrics-label{font-size:.75rem;font-weight:600;color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.xiping-subtitle-player__lyrics-text{font-size:1rem;font-weight:500;text-shadow:0 2px 4px rgba(0,0,0,.5)}.xiping-subtitle-player__lyrics-line{margin:.25rem 0}.xiping-subtitle-player__lyrics-line:first-child{margin-top:0}.xiping-subtitle-player__lyrics-line:last-child{margin-bottom:0}.xiping-subtitle-player__lyrics-hover-layer{position:absolute;inset:0;pointer-events:none}.xiping-subtitle-player--lyrics{max-height:600px;overflow-y:auto;gap:.5rem;scroll-behavior:smooth}.xiping-subtitle-player--lyrics::-webkit-scrollbar{width:8px}.xiping-subtitle-player--lyrics::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.xiping-subtitle-player--lyrics::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.xiping-subtitle-player--lyrics::-webkit-scrollbar-thumb:hover{background:#ffffff80}.xiping-subtitle-player__group{display:flex;flex-direction:column;gap:.5rem;width:100%;border-radius:.5rem;padding:.5rem;margin:-.5rem;transition:all .2s ease}.xiping-subtitle-player__group:hover{background-color:#ffffff1a}.xiping-subtitle-player__group:hover .xiping-subtitle-player__lyrics-item{transform:translate(4px)}.xiping-subtitle-player__group:hover .xiping-subtitle-player__lyrics-item--active{background-color:#fbbf2426}.xiping-subtitle-player__lyrics-item--active .xiping-subtitle-word{color:#fbbf24;font-weight:600}@media(max-width:768px){.xiping-subtitle-player__lyrics-text{font-size:.9rem}}
+.xiping-subtitle-player__lyrics-time{color:#ffffff80;-webkit-user-select:none;user-select:none;margin-bottom:.25rem;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.7rem;font-weight:500}.xiping-subtitle-player__lyrics-item{flex-direction:column;gap:.25rem;transition:all .2s;display:flex}.xiping-subtitle-player__lyrics-item--active{color:#fbbf24;font-weight:600;transition:all .3s;position:relative}.xiping-subtitle-player__lyrics-item--active:before{content:"";background:#fbbf24;border-radius:2px;width:4px;height:92%;position:absolute;top:50%;left:-1rem;transform:translateY(-50%)}.xiping-subtitle-player__lyrics-item--past{opacity:.5;color:#fff9}.xiping-subtitle-player__lyrics-label{color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem;font-size:.75rem;font-weight:600}.xiping-subtitle-player__lyrics-text{text-shadow:0 2px 4px #00000080;font-size:1rem;font-weight:500}.xiping-subtitle-player__lyrics-line{margin:.25rem 0}.xiping-subtitle-player__lyrics-line:first-child{margin-top:0}.xiping-subtitle-player__lyrics-line:last-child{margin-bottom:0}.xiping-subtitle-player__lyrics-hover-layer{pointer-events:none;position:absolute;inset:0}.xiping-subtitle-player--lyrics{scroll-behavior:smooth;gap:.5rem;max-height:600px;overflow-y:auto}.xiping-subtitle-player--lyrics::-webkit-scrollbar{width:8px}.xiping-subtitle-player--lyrics::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}.xiping-subtitle-player--lyrics::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.xiping-subtitle-player--lyrics::-webkit-scrollbar-thumb:hover{background:#ffffff80}.xiping-subtitle-player__group{border-radius:.5rem;flex-direction:column;gap:.5rem;width:100%;margin:-.5rem;padding:.5rem;transition:all .2s;display:flex}.xiping-subtitle-player__group:hover{background-color:#ffffff1a}.xiping-subtitle-player__group:hover .xiping-subtitle-player__lyrics-item{transform:translate(4px)}.xiping-subtitle-player__group:hover .xiping-subtitle-player__lyrics-item--active{background-color:#fbbf2426}.xiping-subtitle-player__lyrics-item--active .xiping-subtitle-word{color:#fbbf24;font-weight:600}@media (width<=768px){.xiping-subtitle-player__lyrics-text{font-size:.9rem}}