@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-loot-box/index.es.js

@@ -0,0 +1,511 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { ChevronLeft as n, ChevronRight as r, Gem as i, Gift as a, Sparkles as o, Star as s, X as c, Zap as l } from "lucide-react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/waka-loot-box/index.tsx
+var p = {
+	common: {
+		gradient: "from-slate-400 to-slate-600",
+		glow: "shadow-slate-400/50",
+		glowColor: "hsl(var(--muted-foreground))",
+		borderColor: "border-slate-400",
+		bgColor: "bg-slate-100 dark:bg-slate-900",
+		textColor: "text-slate-600 dark:text-slate-400",
+		particleColors: [
+			"hsl(var(--muted-foreground))",
+			"hsl(var(--muted))",
+			"hsl(var(--border))"
+		],
+		label: "Common",
+		beamColor: "hsl(var(--muted-foreground) / 0.8)"
+	},
+	rare: {
+		gradient: "from-blue-400 to-blue-600",
+		glow: "shadow-blue-400/50",
+		glowColor: "hsl(var(--info))",
+		borderColor: "border-blue-400",
+		bgColor: "bg-blue-100 dark:bg-blue-950",
+		textColor: "text-blue-600 dark:text-blue-400",
+		particleColors: [
+			"hsl(var(--info))",
+			"hsl(var(--chart-1))",
+			"hsl(var(--primary))"
+		],
+		label: "Rare",
+		beamColor: "hsl(var(--info) / 0.8)"
+	},
+	epic: {
+		gradient: "from-purple-400 to-purple-600",
+		glow: "shadow-purple-400/50",
+		glowColor: "hsl(var(--chart-2))",
+		borderColor: "border-purple-400",
+		bgColor: "bg-purple-100 dark:bg-purple-950",
+		textColor: "text-purple-600 dark:text-purple-400",
+		particleColors: [
+			"hsl(var(--chart-2))",
+			"hsl(var(--chart-3))",
+			"hsl(var(--primary))"
+		],
+		label: "Epic",
+		beamColor: "hsl(var(--chart-2) / 0.8)"
+	},
+	legendary: {
+		gradient: "from-amber-400 via-orange-500 to-red-500",
+		glow: "shadow-amber-400/50",
+		glowColor: "hsl(var(--warning))",
+		borderColor: "border-amber-400",
+		bgColor: "bg-amber-100 dark:bg-amber-950",
+		textColor: "text-amber-600 dark:text-amber-400",
+		particleColors: [
+			"hsl(var(--warning))",
+			"hsl(var(--chart-4))",
+			"hsl(var(--destructive))",
+			"hsl(var(--chart-5))"
+		],
+		label: "Legendary",
+		beamColor: "hsl(var(--warning) / 0.9)"
+	}
+};
+function m({ active: e, colors: t, count: n = 40, type: r = "burst" }) {
+	return e ? r === "rising" ? /* @__PURE__ */ d("div", {
+		className: "pointer-events-none absolute inset-0 overflow-hidden",
+		children: [...Array(n)].map((e, n) => {
+			let r = 4 + Math.random() * 6, i = Math.random() * 100, a = 1.5 + Math.random() * 1;
+			return /* @__PURE__ */ d("div", {
+				className: "absolute bottom-0 rounded-full animate-lootbox-rise",
+				style: {
+					width: r,
+					height: r,
+					left: `${i}%`,
+					backgroundColor: t[Math.floor(Math.random() * t.length)],
+					animationDuration: `${a}s`,
+					animationDelay: `${Math.random() * .5}s`
+				}
+			}, n);
+		})
+	}) : /* @__PURE__ */ d("div", {
+		className: "pointer-events-none absolute inset-0 overflow-hidden",
+		children: [...Array(n)].map((e, r) => {
+			let i = r / n * 360, a = 80 + Math.random() * 80, o = 4 + Math.random() * 8, s = .8 + Math.random() * .6;
+			return /* @__PURE__ */ d("div", {
+				className: "absolute left-1/2 top-1/2 rounded-full animate-lootbox-particle",
+				style: {
+					width: o,
+					height: o,
+					backgroundColor: t[Math.floor(Math.random() * t.length)],
+					"--lootbox-angle": `${i}deg`,
+					"--lootbox-distance": `${a}px`,
+					animationDuration: `${s}s`,
+					animationDelay: `${Math.random() * .2}s`
+				}
+			}, r);
+		})
+	}) : null;
+}
+function h({ active: e, colors: t, count: n = 50 }) {
+	return e ? /* @__PURE__ */ d("div", {
+		className: "pointer-events-none fixed inset-0 z-50 overflow-hidden",
+		children: [...Array(n)].map((e, n) => {
+			let r = Math.random() * 100, i = 8 + Math.random() * 8, a = 2 + Math.random() * 2, o = Math.random() * .5, s = Math.random() * 720;
+			return /* @__PURE__ */ d("div", {
+				className: "absolute -top-4 animate-lootbox-confetti",
+				style: {
+					left: `${r}%`,
+					width: i,
+					height: i * .6,
+					backgroundColor: t[Math.floor(Math.random() * t.length)],
+					animationDuration: `${a}s`,
+					animationDelay: `${o}s`,
+					"--lootbox-rotation": `${s}deg`,
+					"--lootbox-drift": `${(Math.random() - .5) * 100}px`
+				}
+			}, n);
+		})
+	}) : null;
+}
+function g({ active: e, color: t }) {
+	return e ? /* @__PURE__ */ f("div", {
+		className: "pointer-events-none absolute inset-0 flex items-center justify-center overflow-visible",
+		children: [/* @__PURE__ */ d("div", {
+			className: "absolute h-[300%] w-2 animate-lootbox-beam",
+			style: {
+				background: `linear-gradient(to top, transparent, ${t}, transparent)`,
+				filter: "blur(8px)"
+			}
+		}), /* @__PURE__ */ d("div", {
+			className: "absolute h-[300%] w-1 animate-lootbox-beam",
+			style: {
+				background: "linear-gradient(to top, transparent, white, transparent)",
+				animationDelay: "0.1s"
+			}
+		})]
+	}) : null;
+}
+function _({ variant: t, phase: n, highestRarity: r, size: s, onClick: c, disabled: l }) {
+	let u = p[r], m = {
+		sm: "w-24 h-24",
+		default: "w-32 h-32",
+		lg: "w-40 h-40"
+	}, h = n === "idle" && !l, g = e("relative flex items-center justify-center rounded-xl transition-all duration-300", m[s], h && "cursor-pointer hover:scale-105 active:scale-95", l && "opacity-50 cursor-not-allowed", n === "shaking" && "animate-lootbox-shake", n === "glowing" && "animate-lootbox-glow");
+	return /* @__PURE__ */ f("div", {
+		className: "relative",
+		children: [n === "glowing" && /* @__PURE__ */ d("div", {
+			className: "absolute inset-0 rounded-xl blur-xl animate-pulse",
+			style: {
+				background: u.glowColor,
+				opacity: .5
+			}
+		}), (() => {
+			switch (t) {
+				case "chest": return /* @__PURE__ */ f("div", {
+					className: e(g, "bg-gradient-to-br from-amber-700 via-amber-600 to-amber-800", "border-4 border-amber-500 shadow-xl"),
+					onClick: h ? c : void 0,
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: e("absolute -top-2 left-1/2 -translate-x-1/2 w-[110%] h-[40%] rounded-t-xl", "bg-gradient-to-b from-amber-600 to-amber-700 border-4 border-amber-500", "transition-transform duration-500 origin-bottom", (n === "opening" || n === "revealing" || n === "complete") && "-rotate-x-110 -translate-y-8"),
+							style: {
+								transformStyle: "preserve-3d",
+								transform: n === "opening" || n === "revealing" || n === "complete" ? "translateX(-50%) rotateX(-110deg) translateY(-2rem)" : "translateX(-50%)"
+							},
+							children: /* @__PURE__ */ d("div", { className: "absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-6 h-8 bg-amber-300 rounded border-2 border-amber-400" })
+						}),
+						(n === "opening" || n === "revealing") && /* @__PURE__ */ d("div", {
+							className: "absolute inset-0 rounded-xl animate-pulse",
+							style: { background: `radial-gradient(ellipse at center, ${u.glowColor}60 0%, transparent 70%)` }
+						}),
+						/* @__PURE__ */ d(a, { className: "w-12 h-12 text-amber-200 opacity-50" })
+					]
+				});
+				case "crate": return /* @__PURE__ */ f("div", {
+					className: e(g, "bg-gradient-to-br from-gray-600 via-gray-500 to-gray-700", "border-4 border-gray-400 shadow-xl"),
+					onClick: h ? c : void 0,
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: "absolute inset-2 flex flex-col justify-between",
+							children: [...[
+								,
+								,
+								,
+								,
+							]].map((e, t) => /* @__PURE__ */ d("div", { className: "h-1 bg-gray-800/30 rounded" }, t))
+						}),
+						/* @__PURE__ */ d("div", { className: "absolute top-2 left-0 right-0 h-2 bg-gray-400 border-y border-gray-500" }),
+						/* @__PURE__ */ d("div", { className: "absolute bottom-2 left-0 right-0 h-2 bg-gray-400 border-y border-gray-500" }),
+						(n === "opening" || n === "revealing") && /* @__PURE__ */ d("div", {
+							className: "absolute inset-0 rounded-xl animate-pulse",
+							style: { background: `radial-gradient(ellipse at center, ${u.glowColor}60 0%, transparent 70%)` }
+						}),
+						/* @__PURE__ */ d(o, { className: "w-10 h-10 text-gray-300 opacity-50" })
+					]
+				});
+				case "gift": return /* @__PURE__ */ f("div", {
+					className: e(g, "bg-gradient-to-br", u.gradient, "border-4", u.borderColor, "shadow-xl"),
+					onClick: h ? c : void 0,
+					children: [
+						/* @__PURE__ */ d("div", { className: "absolute top-1/2 left-0 right-0 h-4 bg-white/30 -translate-y-1/2" }),
+						/* @__PURE__ */ d("div", { className: "absolute top-0 bottom-0 left-1/2 w-4 bg-white/30 -translate-x-1/2" }),
+						/* @__PURE__ */ d("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2 w-8 h-4 bg-white/40 rounded-full" }),
+						(n === "opening" || n === "revealing") && /* @__PURE__ */ d("div", {
+							className: "absolute inset-0 rounded-xl animate-pulse",
+							style: { background: "radial-gradient(ellipse at center, white 0%, transparent 70%)" }
+						}),
+						/* @__PURE__ */ d(a, { className: "w-10 h-10 text-white/60" })
+					]
+				});
+				case "orb": return /* @__PURE__ */ f("div", {
+					className: e(g, "rounded-full bg-gradient-to-br", u.gradient, "border-4", u.borderColor, "shadow-2xl"),
+					style: { boxShadow: n === "glowing" ? `0 0 40px 10px ${u.glowColor}80, inset 0 0 30px ${u.glowColor}40` : void 0 },
+					onClick: h ? c : void 0,
+					children: [
+						/* @__PURE__ */ d("div", { className: "absolute inset-2 rounded-full bg-gradient-to-br from-white/30 to-transparent" }),
+						/* @__PURE__ */ d("div", { className: e("absolute inset-[30%] rounded-full", "bg-gradient-to-br from-white/60 to-transparent") }),
+						(n === "opening" || n === "revealing") && /* @__PURE__ */ d("div", {
+							className: "absolute inset-0 rounded-full animate-pulse",
+							style: { background: "radial-gradient(ellipse at center, white 0%, transparent 60%)" }
+						}),
+						/* @__PURE__ */ d(i, { className: "w-8 h-8 text-white/80" })
+					]
+				});
+			}
+		})()]
+	});
+}
+function v({ item: t, isRevealing: n, size: r }) {
+	let i = p[t.rarity];
+	return /* @__PURE__ */ f("div", {
+		className: e("relative flex flex-col items-center rounded-2xl border-2 bg-card text-card-foreground shadow-2xl", "transition-all duration-500", i.borderColor, {
+			sm: "w-48 p-4",
+			default: "w-64 p-6",
+			lg: "w-80 p-8"
+		}[r], n ? "animate-lootbox-reveal" : "opacity-0 scale-50"),
+		style: { boxShadow: `0 0 30px 5px ${i.glowColor}40` },
+		children: [
+			/* @__PURE__ */ d(g, {
+				active: n,
+				color: i.beamColor
+			}),
+			/* @__PURE__ */ d("div", {
+				className: e("absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full text-xs font-bold uppercase tracking-wider", i.bgColor, i.textColor),
+				children: i.label
+			}),
+			/* @__PURE__ */ f("div", {
+				className: e("relative flex items-center justify-center rounded-xl mb-4 mt-2", "bg-gradient-to-br", i.gradient, {
+					sm: "w-16 h-16",
+					default: "w-24 h-24",
+					lg: "w-32 h-32"
+				}[r]),
+				children: [t.imageUrl ? /* @__PURE__ */ d("img", {
+					src: t.imageUrl,
+					alt: t.name,
+					className: "w-full h-full object-contain rounded-xl"
+				}) : t.icon ? /* @__PURE__ */ d("div", {
+					className: "text-white",
+					children: t.icon
+				}) : /* @__PURE__ */ d(s, { className: "w-1/2 h-1/2 text-white" }), /* @__PURE__ */ d("div", {
+					className: "absolute inset-0 rounded-xl overflow-hidden",
+					children: /* @__PURE__ */ d("div", { className: "absolute inset-0 animate-lootbox-shine" })
+				})]
+			}),
+			t.quantity && t.quantity > 1 && /* @__PURE__ */ f("div", {
+				className: "absolute top-12 right-4 px-2 py-1 rounded-full bg-black/70 text-white text-sm font-bold",
+				children: ["x", t.quantity]
+			}),
+			/* @__PURE__ */ d("h3", {
+				className: "text-lg font-bold text-center mb-1",
+				children: t.name
+			}),
+			t.description && /* @__PURE__ */ d("p", {
+				className: "text-sm text-muted-foreground text-center",
+				children: t.description
+			})
+		]
+	});
+}
+function y({ items: e = [], onRevealComplete: n } = {}) {
+	let [r, i] = t.useState(e), [a, o] = t.useState(!1), [s, c] = t.useState("idle"), [l, u] = t.useState(0), d = t.useCallback(() => {
+		r.length !== 0 && (o(!0), c("shaking"), setTimeout(() => c("glowing"), 500), setTimeout(() => c("opening"), 1200), setTimeout(() => {
+			c("revealing"), u(0);
+		}, 1800));
+	}, [r.length]), f = t.useCallback(() => {
+		o(!1), c("idle"), u(0);
+	}, []), p = t.useCallback(() => {
+		l < r.length - 1 ? u((e) => e + 1) : (c("complete"), n?.(r));
+	}, [
+		l,
+		r,
+		n
+	]), m = t.useCallback(() => {
+		l > 0 && u((e) => e - 1);
+	}, [l]), h = t.useCallback(() => {
+		c("complete"), u(r.length - 1), n?.(r);
+	}, [r, n]), g = t.useCallback(() => {
+		o(!1), c("idle"), u(0);
+	}, []);
+	return t.useEffect(() => {
+		i(e);
+	}, [e]), {
+		items: r,
+		isOpen: a,
+		phase: s,
+		currentItemIndex: l,
+		open: d,
+		close: f,
+		nextItem: p,
+		prevItem: m,
+		skipToEnd: h,
+		setItems: i,
+		reset: g
+	};
+}
+function b({ items: i, isOpen: a, onOpen: s, onRevealComplete: g, onClose: b, enableSound: x = !1, openSoundSrc: S, revealSoundSrc: C, variant: w = "chest", size: T = "default", className: E, disabled: D = !1, autoReveal: O = !1, autoRevealDelay: k = 1500 }) {
+	let A = y({
+		items: i,
+		onRevealComplete: g
+	}), [j, M] = t.useState(!1), N = t.useRef(null), P = a !== void 0, F = P ? a : A.isOpen, I = t.useMemo(() => {
+		let e = [
+			"common",
+			"rare",
+			"epic",
+			"legendary"
+		];
+		return i.reduce((t, n) => e.indexOf(n.rarity) > e.indexOf(t) ? n.rarity : t, "common");
+	}, [i]), L = i[A.currentItemIndex], R = L ? p[L.rarity] : p.common;
+	t.useEffect(() => {
+		P && a && A.phase === "idle" && A.open();
+	}, [
+		a,
+		P,
+		A
+	]), t.useEffect(() => {
+		x && (A.phase === "opening" && S && (N.current = new Audio(S), N.current.play().catch(() => {})), A.phase === "revealing" && C && (N.current = new Audio(C), N.current.play().catch(() => {})));
+	}, [
+		A.phase,
+		x,
+		S,
+		C
+	]), t.useEffect(() => {
+		if (A.phase === "revealing") {
+			M(!0);
+			let e = setTimeout(() => M(!1), 3e3);
+			return () => clearTimeout(e);
+		}
+	}, [A.phase]), t.useEffect(() => {
+		if (!O || A.phase !== "revealing") return;
+		let e = setTimeout(() => {
+			A.currentItemIndex < i.length - 1 ? A.nextItem() : A.skipToEnd();
+		}, k);
+		return () => clearTimeout(e);
+	}, [
+		O,
+		k,
+		A,
+		i.length
+	]);
+	let z = () => {
+		D || i.length === 0 || (A.open(), s?.());
+	}, B = () => {
+		A.close(), b?.();
+	};
+	return /* @__PURE__ */ f(u, { children: [
+		/* @__PURE__ */ d("style", { children: "\n        @keyframes lootbox-shake {\n          0%, 100% { transform: translateX(0) rotate(0deg); }\n          10% { transform: translateX(-5px) rotate(-2deg); }\n          20% { transform: translateX(5px) rotate(2deg); }\n          30% { transform: translateX(-5px) rotate(-2deg); }\n          40% { transform: translateX(5px) rotate(2deg); }\n          50% { transform: translateX(-3px) rotate(-1deg); }\n          60% { transform: translateX(3px) rotate(1deg); }\n          70% { transform: translateX(-3px) rotate(-1deg); }\n          80% { transform: translateX(3px) rotate(1deg); }\n          90% { transform: translateX(-1px) rotate(0deg); }\n        }\n        .animate-lootbox-shake {\n          animation: lootbox-shake 0.5s ease-in-out;\n        }\n\n        @keyframes lootbox-glow {\n          0%, 100% { filter: brightness(1); }\n          50% { filter: brightness(1.3); }\n        }\n        .animate-lootbox-glow {\n          animation: lootbox-glow 0.3s ease-in-out infinite;\n        }\n\n        @keyframes lootbox-particle {\n          0% {\n            transform: translate(-50%, -50%) rotate(var(--lootbox-angle)) translateX(0) scale(1);\n            opacity: 1;\n          }\n          100% {\n            transform: translate(-50%, -50%) rotate(var(--lootbox-angle)) translateX(var(--lootbox-distance)) scale(0);\n            opacity: 0;\n          }\n        }\n        .animate-lootbox-particle {\n          animation: lootbox-particle 1s ease-out forwards;\n        }\n\n        @keyframes lootbox-rise {\n          0% {\n            transform: translateY(0) scale(1);\n            opacity: 1;\n          }\n          100% {\n            transform: translateY(-200px) scale(0);\n            opacity: 0;\n          }\n        }\n        .animate-lootbox-rise {\n          animation: lootbox-rise 2s ease-out forwards;\n        }\n\n        @keyframes lootbox-confetti {\n          0% {\n            transform: translateY(0) translateX(0) rotate(0deg);\n            opacity: 1;\n          }\n          100% {\n            transform: translateY(100vh) translateX(var(--lootbox-drift)) rotate(var(--lootbox-rotation));\n            opacity: 0;\n          }\n        }\n        .animate-lootbox-confetti {\n          animation: lootbox-confetti 3s ease-out forwards;\n        }\n\n        @keyframes lootbox-beam {\n          0% {\n            opacity: 0;\n            transform: scaleY(0);\n          }\n          50% {\n            opacity: 1;\n            transform: scaleY(1);\n          }\n          100% {\n            opacity: 0;\n            transform: scaleY(1);\n          }\n        }\n        .animate-lootbox-beam {\n          animation: lootbox-beam 1s ease-out;\n        }\n\n        @keyframes lootbox-reveal {\n          0% {\n            opacity: 0;\n            transform: scale(0.5) translateY(20px);\n          }\n          50% {\n            opacity: 1;\n            transform: scale(1.05) translateY(-5px);\n          }\n          100% {\n            opacity: 1;\n            transform: scale(1) translateY(0);\n          }\n        }\n        .animate-lootbox-reveal {\n          animation: lootbox-reveal 0.6s ease-out forwards;\n        }\n\n        @keyframes lootbox-shine {\n          0% {\n            transform: translateX(-100%) rotate(45deg);\n          }\n          50%, 100% {\n            transform: translateX(100%) rotate(45deg);\n          }\n        }\n        .animate-lootbox-shine {\n          background: linear-gradient(\n            90deg,\n            transparent 0%,\n            rgba(255, 255, 255, 0.4) 50%,\n            transparent 100%\n          );\n          animation: lootbox-shine 2s ease-in-out infinite;\n        }\n\n        @keyframes lootbox-fadeIn {\n          from { opacity: 0; }\n          to { opacity: 1; }\n        }\n        .animate-lootbox-fadeIn {\n          animation: lootbox-fadeIn 0.3s ease-out;\n        }\n\n        @keyframes lootbox-slideUp {\n          from { transform: translateY(20px); opacity: 0; }\n          to { transform: translateY(0); opacity: 1; }\n        }\n        .animate-lootbox-slideUp {\n          animation: lootbox-slideUp 0.5s ease-out backwards;\n        }\n      " }),
+		/* @__PURE__ */ d(h, {
+			active: j,
+			colors: R.particleColors,
+			count: 60
+		}),
+		/* @__PURE__ */ f("div", {
+			className: e("relative inline-flex flex-col items-center gap-4", E),
+			children: [
+				!F && /* @__PURE__ */ f("div", {
+					className: "flex flex-col items-center gap-4",
+					children: [
+						/* @__PURE__ */ d(_, {
+							variant: w,
+							phase: A.phase,
+							highestRarity: I,
+							size: T,
+							onClick: z,
+							disabled: D
+						}),
+						/* @__PURE__ */ d("button", {
+							type: "button",
+							onClick: z,
+							disabled: D || i.length === 0,
+							className: e("px-6 py-2 rounded-full font-semibold text-white", "bg-gradient-to-r from-amber-500 to-orange-500", "hover:from-amber-400 hover:to-orange-400", "active:scale-95 transition-all duration-200", "shadow-lg hover:shadow-xl", "disabled:opacity-50 disabled:cursor-not-allowed"),
+							children: /* @__PURE__ */ f("span", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ d(o, { className: "w-4 h-4" }), "Open Loot Box"]
+							})
+						}),
+						/* @__PURE__ */ f("p", {
+							className: "text-sm text-muted-foreground",
+							children: [
+								i.length,
+								" ",
+								i.length === 1 ? "item" : "items",
+								" inside"
+							]
+						})
+					]
+				}),
+				F && (A.phase === "shaking" || A.phase === "glowing" || A.phase === "opening") && /* @__PURE__ */ d("div", {
+					className: "fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm animate-lootbox-fadeIn",
+					children: /* @__PURE__ */ f("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ d(_, {
+							variant: w,
+							phase: A.phase,
+							highestRarity: I,
+							size: "lg"
+						}), /* @__PURE__ */ d(m, {
+							active: A.phase === "opening",
+							colors: p[I].particleColors,
+							type: "burst"
+						})]
+					})
+				}),
+				F && (A.phase === "revealing" || A.phase === "complete") && L && /* @__PURE__ */ f("div", {
+					className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm animate-lootbox-fadeIn",
+					children: [/* @__PURE__ */ d("button", {
+						type: "button",
+						onClick: B,
+						className: "absolute top-4 right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors",
+						children: /* @__PURE__ */ d(c, { className: "w-6 h-6" })
+					}), /* @__PURE__ */ f("div", {
+						className: "flex flex-col items-center gap-6",
+						children: [
+							/* @__PURE__ */ d("div", {
+								className: "fixed inset-0 pointer-events-none",
+								children: /* @__PURE__ */ d(m, {
+									active: !0,
+									colors: R.particleColors,
+									type: "rising",
+									count: 30
+								})
+							}),
+							/* @__PURE__ */ d(v, {
+								item: L,
+								isRevealing: A.phase === "revealing" || A.phase === "complete",
+								size: T
+							}),
+							i.length > 1 && !O && /* @__PURE__ */ f("div", {
+								className: "flex items-center gap-4 animate-lootbox-slideUp",
+								style: { animationDelay: "0.3s" },
+								children: [
+									/* @__PURE__ */ d("button", {
+										type: "button",
+										onClick: A.prevItem,
+										disabled: A.currentItemIndex === 0,
+										className: e("p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-all", "disabled:opacity-30 disabled:cursor-not-allowed"),
+										children: /* @__PURE__ */ d(n, { className: "w-6 h-6" })
+									}),
+									/* @__PURE__ */ d("div", {
+										className: "flex items-center gap-2",
+										children: i.map((t, n) => /* @__PURE__ */ d("div", { className: e("w-2 h-2 rounded-full transition-all duration-300", n === A.currentItemIndex ? "bg-white scale-125" : n < A.currentItemIndex ? "bg-white/60" : "bg-white/30") }, n))
+									}),
+									/* @__PURE__ */ d("button", {
+										type: "button",
+										onClick: A.nextItem,
+										className: e("p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-all"),
+										children: /* @__PURE__ */ d(r, { className: "w-6 h-6" })
+									})
+								]
+							}),
+							/* @__PURE__ */ f("div", {
+								className: "text-white/60 text-sm animate-lootbox-slideUp",
+								style: { animationDelay: "0.4s" },
+								children: [
+									A.currentItemIndex + 1,
+									" of ",
+									i.length
+								]
+							}),
+							i.length > 1 && A.phase !== "complete" && !O && /* @__PURE__ */ d("button", {
+								type: "button",
+								onClick: A.skipToEnd,
+								className: "text-white/60 text-sm hover:text-white transition-colors underline animate-lootbox-slideUp",
+								style: { animationDelay: "0.5s" },
+								children: "Skip to end"
+							}),
+							A.phase === "complete" && /* @__PURE__ */ d("button", {
+								type: "button",
+								onClick: B,
+								className: e("px-8 py-3 rounded-full font-bold text-white", "bg-gradient-to-r from-green-500 to-emerald-500", "hover:from-green-400 hover:to-emerald-400", "active:scale-95 transition-all duration-200", "shadow-lg hover:shadow-xl", "animate-lootbox-slideUp"),
+								style: { animationDelay: "0.3s" },
+								children: /* @__PURE__ */ f("span", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ d(l, { className: "w-5 h-5" }), "Claim Rewards"]
+								})
+							})
+						]
+					})]
+				})
+			]
+		})
+	] });
+}
+b.displayName = "WakaLootBox";
+//#endregion
+export { b as default, y as useLootBox };

package/dist/components/waka-magic-link/index.cjs.js

@@ -0,0 +1,9 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`lucide-react`),i=require(`react/jsx-runtime`);function a({onSubmit:e,placeholder:a=`Enter your email`,buttonText:o={idle:`Send Magic Link`,loading:`Sending...`,sent:`Check your inbox`},successMessage:s=`We've sent a magic link to your email`,errorMessage:c=`Something went wrong. Please try again.`,countdownDuration:l=60,onResend:u,className:d,size:f=`default`,variant:p=`default`}){let[m,h]=n.useState(``),[g,_]=n.useState(`idle`),[v,y]=n.useState(0),[b,x]=n.useState(``),S=n.useRef(null);n.useEffect(()=>{if(v<=0)return;let e=setInterval(()=>{y(e=>e-1)},1e3);return()=>clearInterval(e)},[v]);let C=async t=>{if(t.preventDefault(),!(!m||g===`loading`)){_(`loading`);try{await e(m),x(m),_(`sent`),y(l)}catch{_(`error`),setTimeout(()=>_(`idle`),3e3)}}},w=async()=>{if(!(v>0||!u)){_(`loading`);try{await u(),_(`sent`),y(l)}catch{_(`error`),setTimeout(()=>_(`idle`),3e3)}}},T=()=>{_(`idle`),h(``),x(``),y(0),S.current?.focus()},E={sm:`h-10 text-sm`,default:`h-12 text-base`,lg:`h-14 text-lg`};return g===`sent`?(0,i.jsxs)(`div`,{className:t.cn(`w-full`,d),children:[(0,i.jsxs)(`div`,{className:`relative overflow-hidden rounded-2xl border bg-gradient-to-br from-green-500/10 via-emerald-500/10 to-teal-500/10 p-6`,children:[(0,i.jsx)(`div`,{className:`absolute inset-0 overflow-hidden`,children:[...[,,,,,,]].map((e,t)=>(0,i.jsx)(`div`,{className:`absolute animate-float`,style:{left:`${15+t*15}%`,top:`${20+t%3*20}%`,animationDelay:`${t*.2}s`,animationDuration:`${2+t*.3}s`},children:(0,i.jsx)(r.Sparkles,{className:`h-4 w-4 text-green-500/40`})},t))}),(0,i.jsxs)(`div`,{className:`relative text-center`,children:[(0,i.jsxs)(`div`,{className:`mx-auto mb-4 flex h-16 w-16 items-center justify-center`,children:[(0,i.jsx)(`div`,{className:`absolute h-16 w-16 animate-ping rounded-full bg-green-500/20`}),(0,i.jsx)(`div`,{className:`relative flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-green-500 to-emerald-600 shadow-lg shadow-green-500/30`,children:(0,i.jsx)(r.Check,{className:`h-7 w-7 text-white animate-in zoom-in-50`})})]}),(0,i.jsx)(`h3`,{className:`text-lg font-semibold text-foreground`,children:o.sent}),(0,i.jsx)(`p`,{className:`mt-2 text-sm text-muted-foreground`,children:s}),(0,i.jsxs)(`div`,{className:`mt-4 inline-flex items-center gap-2 rounded-full bg-background/80 px-4 py-2 text-sm`,children:[(0,i.jsx)(r.Mail,{className:`h-4 w-4 text-muted-foreground`}),(0,i.jsx)(`span`,{className:`font-medium`,children:b})]}),(0,i.jsxs)(`div`,{className:`mt-6 flex items-center justify-center gap-4 text-sm`,children:[v>0?(0,i.jsxs)(`span`,{className:`text-muted-foreground`,children:[`Resend in `,(0,i.jsxs)(`span`,{className:`font-mono font-medium text-foreground`,children:[v,`s`]})]}):u?(0,i.jsx)(`button`,{onClick:w,className:`font-medium text-primary hover:underline`,children:`Resend email`}):null,(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`•`}),(0,i.jsx)(`button`,{onClick:T,className:`text-muted-foreground hover:text-foreground`,children:`Use different email`})]})]})]}),(0,i.jsx)(`style`,{children:`
+          @keyframes float {
+            0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
+            50% { transform: translateY(-10px) rotate(10deg); opacity: 0.8; }
+          }
+          .animate-float {
+            animation: float 3s ease-in-out infinite;
+          }
+        `})]}):(0,i.jsxs)(`form`,{onSubmit:C,className:t.cn(`w-full`,d),children:[(0,i.jsxs)(`div`,{className:t.cn(`relative flex items-center overflow-hidden rounded-full border transition-all duration-300`,E[f],p===`gradient`&&`bg-gradient-to-r from-primary/5 via-purple-500/5 to-pink-500/5`,p===`minimal`&&`border-transparent bg-muted`,g===`error`&&`border-destructive bg-destructive/5`,g===`idle`&&`focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20`),children:[(0,i.jsx)(`span`,{className:t.cn(`flex shrink-0 items-center justify-center text-muted-foreground`,{sm:`px-3`,default:`px-4`,lg:`px-5`}[f]),children:(0,i.jsx)(r.Mail,{className:t.cn(`transition-all duration-300`,f===`sm`&&`h-4 w-4`,f===`default`&&`h-5 w-5`,f===`lg`&&`h-6 w-6`,g===`loading`&&`animate-bounce`)})}),(0,i.jsx)(`input`,{ref:S,type:`email`,value:m,onChange:e=>h(e.target.value),placeholder:a,disabled:g===`loading`,className:`flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed`}),(0,i.jsx)(`button`,{type:`submit`,disabled:!m||g===`loading`,className:t.cn(`flex shrink-0 items-center gap-2 rounded-full font-medium transition-all`,{sm:`px-4 text-sm`,default:`px-6`,lg:`px-8 text-lg`}[f],E[f],g===`loading`?`bg-muted text-muted-foreground cursor-wait`:g===`error`?`bg-destructive text-destructive-foreground`:`bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed`),children:g===`loading`?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.Loader2,{className:`h-4 w-4 animate-spin`}),(0,i.jsx)(`span`,{className:`hidden sm:inline`,children:o.loading})]}):g===`error`?(0,i.jsx)(`span`,{children:c}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`span`,{className:`hidden sm:inline`,children:o.idle}),(0,i.jsx)(r.Sparkles,{className:`h-4 w-4 sm:hidden`}),(0,i.jsx)(r.ArrowRight,{className:`h-4 w-4 hidden sm:block`})]})})]}),(0,i.jsx)(`p`,{className:`mt-3 text-center text-xs text-muted-foreground`,children:`We'll send you a magic link for password-free sign in`})]})}function o(){let[e,t]=n.useState(`idle`),[r,i]=n.useState(``);return{state:e,email:r,sendMagicLink:async(e,n)=>{i(e),t(`loading`);try{await n(e),t(`sent`)}catch(e){throw t(`error`),e}},reset:()=>{t(`idle`),i(``)}}}exports.WakaMagicLink=a,exports.useMagicLink=o;