@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-scratch-card/index.es.js

@@ -0,0 +1,373 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Crown as n, Gem as r, Gift as i, Sparkles as a, Star as o, Trophy as s, Volume2 as c, VolumeX as l } from "lucide-react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/waka-scratch-card/index.tsx
+var p = {
+	common: {
+		gradient: "from-slate-400 to-slate-600",
+		glowColor: "hsl(var(--muted-foreground))",
+		borderColor: "border-slate-400",
+		bgColor: "bg-slate-100",
+		textColor: "text-slate-600",
+		label: "Common",
+		icon: /* @__PURE__ */ d(o, { className: "w-6 h-6" })
+	},
+	rare: {
+		gradient: "from-blue-400 to-blue-600",
+		glowColor: "hsl(var(--info))",
+		borderColor: "border-blue-400",
+		bgColor: "bg-blue-100",
+		textColor: "text-blue-600",
+		label: "Rare",
+		icon: /* @__PURE__ */ d(r, { className: "w-6 h-6" })
+	},
+	epic: {
+		gradient: "from-purple-400 to-purple-600",
+		glowColor: "hsl(var(--chart-3))",
+		borderColor: "border-purple-400",
+		bgColor: "bg-purple-100",
+		textColor: "text-purple-600",
+		label: "Epic",
+		icon: /* @__PURE__ */ d(n, { className: "w-6 h-6" })
+	},
+	legendary: {
+		gradient: "from-amber-400 via-orange-500 to-red-500",
+		glowColor: "hsl(var(--warning))",
+		borderColor: "border-amber-400",
+		bgColor: "bg-amber-100",
+		textColor: "text-amber-600",
+		label: "Legendary",
+		icon: /* @__PURE__ */ d(s, { className: "w-6 h-6" })
+	}
+};
+function m({ initialPercentage: e = 0, threshold: n = 60, onReveal: r } = {}) {
+	let [i, a] = t.useState(e), [o, s] = t.useState(!1), [c, l] = t.useState(!1), u = t.useCallback(() => {
+		s(!0), a(100), r?.();
+	}, [r]), d = t.useCallback(() => {
+		a(0), s(!1), l(!1);
+	}, []), f = t.useCallback(() => {
+		l(!0);
+	}, []), p = t.useCallback(() => {
+		l(!1);
+	}, []);
+	return t.useEffect(() => {
+		!o && i >= n && u();
+	}, [
+		i,
+		n,
+		o,
+		u
+	]), {
+		percentage: i,
+		isRevealed: o,
+		isScratching: c,
+		setPercentage: a,
+		reveal: u,
+		reset: d,
+		startScratching: f,
+		stopScratching: p
+	};
+}
+function h(e, t) {
+	return Array.from({ length: e }, (e, n) => ({
+		id: n,
+		x: 50 + (Math.random() - .5) * 40,
+		y: 50 + (Math.random() - .5) * 40,
+		size: 6 + Math.random() * 8,
+		color: t[Math.floor(Math.random() * t.length)],
+		delay: Math.random() * .3,
+		duration: .8 + Math.random() * .6,
+		angle: Math.random() * 360
+	}));
+}
+function g({ prize: n, revealed: r, width: a, height: o, renderPrize: s }) {
+	let c = p[n.rarity], l = t.useMemo(() => h(20, [
+		c.glowColor,
+		"#ffffff",
+		c.glowColor + "80"
+	]), [c.glowColor]);
+	return s ? /* @__PURE__ */ d(u, { children: s(n, r) }) : /* @__PURE__ */ f("div", {
+		className: e("relative w-full h-full flex flex-col items-center justify-center p-4", "bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900", "transition-all duration-500", r && "animate-scratch-card-prize-reveal"),
+		style: {
+			width: a,
+			height: o
+		},
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "absolute inset-0 opacity-10",
+				children: /* @__PURE__ */ f("svg", {
+					width: "100%",
+					height: "100%",
+					"aria-hidden": "true",
+					focusable: "false",
+					children: [/* @__PURE__ */ d("pattern", {
+						id: "prize-pattern",
+						width: "20",
+						height: "20",
+						patternUnits: "userSpaceOnUse",
+						children: /* @__PURE__ */ d("circle", {
+							cx: "10",
+							cy: "10",
+							r: "1",
+							fill: "currentColor"
+						})
+					}), /* @__PURE__ */ d("rect", {
+						width: "100%",
+						height: "100%",
+						fill: "url(#prize-pattern)"
+					})]
+				})
+			}),
+			r && /* @__PURE__ */ d("div", {
+				className: "absolute inset-0 overflow-hidden pointer-events-none",
+				children: l.map((e) => /* @__PURE__ */ d("div", {
+					className: "absolute animate-scratch-card-confetti",
+					style: {
+						left: `${e.x}%`,
+						top: `${e.y}%`,
+						width: e.size,
+						height: e.size,
+						backgroundColor: e.color,
+						borderRadius: Math.random() > .5 ? "50%" : "2px",
+						animationDelay: `${e.delay}s`,
+						animationDuration: `${e.duration}s`,
+						"--confetti-angle": `${e.angle}deg`
+					}
+				}, e.id))
+			}),
+			r && /* @__PURE__ */ d("div", {
+				className: "absolute inset-0 animate-scratch-card-glow",
+				style: { background: `radial-gradient(circle at center, ${c.glowColor}40 0%, transparent 70%)` }
+			}),
+			/* @__PURE__ */ d("div", {
+				className: e("absolute top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider", c.bgColor, c.textColor, "transition-all duration-500", r ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4"),
+				children: c.label
+			}),
+			/* @__PURE__ */ f("div", {
+				className: e("relative flex items-center justify-center rounded-xl mb-3 transition-all duration-700", "bg-gradient-to-br", c.gradient, r ? "scale-100 opacity-100" : "scale-50 opacity-0"),
+				style: {
+					width: Math.min(a, o) * .35,
+					height: Math.min(a, o) * .35,
+					boxShadow: r ? `0 0 30px 10px ${c.glowColor}40` : "none"
+				},
+				children: [n.imageUrl ? /* @__PURE__ */ d("img", {
+					src: n.imageUrl,
+					alt: n.name,
+					className: "w-full h-full object-contain rounded-xl"
+				}) : n.icon ? /* @__PURE__ */ d("div", {
+					className: "text-white w-1/2 h-1/2 flex items-center justify-center",
+					children: n.icon
+				}) : /* @__PURE__ */ d("div", {
+					className: "text-white",
+					children: c.icon
+				}), r && /* @__PURE__ */ d("div", {
+					className: "absolute inset-0 rounded-xl overflow-hidden",
+					children: /* @__PURE__ */ d("div", { className: "absolute inset-0 animate-scratch-card-shine" })
+				})]
+			}),
+			/* @__PURE__ */ d("h3", {
+				className: e("text-lg font-bold text-white text-center mb-1 transition-all duration-500", r ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"),
+				style: { transitionDelay: r ? "0.2s" : "0s" },
+				children: n.name
+			}),
+			n.value && /* @__PURE__ */ d("div", {
+				className: e("text-2xl font-bold transition-all duration-500", c.textColor.replace("text-", "text-").replace("-600", "-400"), r ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"),
+				style: {
+					transitionDelay: r ? "0.3s" : "0s",
+					color: c.glowColor
+				},
+				children: n.value
+			}),
+			n.description && /* @__PURE__ */ d("p", {
+				className: e("text-sm text-gray-400 text-center mt-2 transition-all duration-500", r ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"),
+				style: { transitionDelay: r ? "0.4s" : "0s" },
+				children: n.description
+			}),
+			!r && /* @__PURE__ */ f("div", {
+				className: "flex flex-col items-center gap-2 text-gray-500",
+				children: [/* @__PURE__ */ d(i, { className: "w-12 h-12 animate-pulse" }), /* @__PURE__ */ d("span", {
+					className: "text-sm",
+					children: "Scratch to reveal!"
+				})]
+			})
+		]
+	});
+}
+var _ = t.forwardRef(({ prize: n, width: r = 300, height: i = 200, revealThreshold: o = .6, brushSize: s = 40, overlayImage: m, overlayPattern: h = "gradient", overlayColor: _ = "#c0c0c0", enableSound: v = !1, scratchSoundSrc: y, revealSoundSrc: b, onScratchStart: x, onScratch: S, onReveal: C, onReset: w, disabled: T = !1, showProgress: E = !1, renderPrize: D, className: O, ...k }, A) => {
+	let j = t.useRef(null), [M, N] = t.useState(!1), [P, F] = t.useState(0), [I, L] = t.useState(!1), [R, z] = t.useState(!1), [B, V] = t.useState(v), H = t.useRef(null), U = t.useRef(null), W = t.useRef(null), G = p[n.rarity], K = t.useCallback(() => {
+		let e = j.current;
+		if (!e) return;
+		let t = e.getContext("2d");
+		if (t) {
+			switch (e.width = r, e.height = i, h) {
+				case "solid":
+					t.fillStyle = _, t.fillRect(0, 0, r, i);
+					break;
+				case "stripes":
+					t.fillStyle = _, t.fillRect(0, 0, r, i), t.strokeStyle = q(_, -20), t.lineWidth = 20 / 2;
+					for (let e = -i; e < r + i; e += 20) t.beginPath(), t.moveTo(e, 0), t.lineTo(e + i, i), t.stroke();
+					break;
+				case "dots":
+					t.fillStyle = _, t.fillRect(0, 0, r, i), t.fillStyle = q(_, -15);
+					for (let e = 15; e < r; e += 15) for (let n = 15; n < i; n += 15) t.beginPath(), t.arc(e, n, 4, 0, Math.PI * 2), t.fill();
+					break;
+				default:
+					let e = t.createLinearGradient(0, 0, r, i);
+					e.addColorStop(0, q(_, 10)), e.addColorStop(.5, _), e.addColorStop(1, q(_, -10)), t.fillStyle = e, t.fillRect(0, 0, r, i), t.fillStyle = "rgba(255, 255, 255, 0.1)", t.beginPath(), t.moveTo(0, 0), t.lineTo(r * .3, 0), t.lineTo(0, i * .3), t.closePath(), t.fill();
+					break;
+			}
+			if (m) {
+				let e = new Image();
+				e.crossOrigin = "anonymous", e.onload = () => {
+					t.drawImage(e, 0, 0, r, i);
+				}, e.src = m;
+			}
+			t.fillStyle = "rgba(0, 0, 0, 0.3)", t.font = "bold 16px system-ui, sans-serif", t.textAlign = "center", t.textBaseline = "middle", t.fillText("Scratch here!", r / 2, i / 2), t.strokeStyle = "rgba(255, 255, 255, 0.3)", t.lineWidth = 2, t.setLineDash([5, 5]), t.strokeRect(10, 10, r - 20, i - 20);
+		}
+	}, [
+		r,
+		i,
+		_,
+		h,
+		m
+	]);
+	function q(e, t) {
+		let n = e.replace("#", ""), r = Math.max(0, Math.min(255, parseInt(n.slice(0, 2), 16) + t)), i = Math.max(0, Math.min(255, parseInt(n.slice(2, 4), 16) + t)), a = Math.max(0, Math.min(255, parseInt(n.slice(4, 6), 16) + t));
+		return `#${r.toString(16).padStart(2, "0")}${i.toString(16).padStart(2, "0")}${a.toString(16).padStart(2, "0")}`;
+	}
+	let J = t.useCallback(() => {
+		let e = j.current;
+		if (!e) return 0;
+		let t = e.getContext("2d");
+		if (!t) return 0;
+		let n = t.getImageData(0, 0, e.width, e.height).data, r = 0, i = n.length / 4;
+		for (let e = 0; e < n.length; e += 4) n[e + 3] < 128 && r++;
+		return r / i;
+	}, []), Y = t.useCallback((e, t) => {
+		let r = j.current;
+		if (!r || T || I) return;
+		let i = r.getContext("2d");
+		if (!i) return;
+		let a = r.getBoundingClientRect(), c = r.width / a.width, l = r.height / a.height, u = (e - a.left) * c, d = (t - a.top) * l;
+		i.globalCompositeOperation = "destination-out", i.beginPath(), H.current ? (i.moveTo(H.current.x, H.current.y), i.lineTo(u, d), i.lineWidth = s, i.lineCap = "round", i.lineJoin = "round", i.stroke()) : (i.arc(u, d, s / 2, 0, Math.PI * 2), i.fill()), H.current = {
+			x: u,
+			y: d
+		};
+		let f = J();
+		F(f), S?.(f * 100), f >= o && !I && (L(!0), C?.(n), B && b && (W.current = new Audio(b), W.current.play().catch(() => {})), setTimeout(() => {
+			i && (i.globalCompositeOperation = "destination-out", i.fillRect(0, 0, r.width, r.height));
+		}, 100));
+	}, [
+		T,
+		I,
+		s,
+		J,
+		o,
+		n,
+		S,
+		C,
+		B,
+		b
+	]), X = t.useCallback((e) => {
+		T || I || (N(!0), H.current = null, R || (z(!0), x?.()), B && y && (U.current = new Audio(y), U.current.loop = !0, U.current.volume = .5, U.current.play().catch(() => {})), Y(e.clientX, e.clientY), e.currentTarget.setPointerCapture(e.pointerId));
+	}, [
+		T,
+		I,
+		R,
+		B,
+		y,
+		x,
+		Y
+	]), Z = t.useCallback((e) => {
+		M && Y(e.clientX, e.clientY);
+	}, [M, Y]), Q = t.useCallback(() => {
+		N(!1), H.current = null, U.current &&= (U.current.pause(), null);
+	}, []), $ = t.useCallback(() => {
+		L(!1), F(0), z(!1), H.current = null, K(), w?.();
+	}, [K, w]);
+	return t.useEffect(() => {
+		K();
+	}, [K]), t.useEffect(() => () => {
+		U.current?.pause(), W.current?.pause();
+	}, []), /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("style", { children: "\n          @keyframes scratch-card-prize-reveal {\n            0% { transform: scale(0.95); }\n            50% { transform: scale(1.02); }\n            100% { transform: scale(1); }\n          }\n          .animate-scratch-card-prize-reveal {\n            animation: scratch-card-prize-reveal 0.5s ease-out;\n          }\n\n          @keyframes scratch-card-confetti {\n            0% {\n              transform: translate(0, 0) rotate(0deg) scale(1);\n              opacity: 1;\n            }\n            100% {\n              transform: translate(\n                calc(cos(var(--confetti-angle)) * 100px),\n                calc(sin(var(--confetti-angle)) * 100px + 50px)\n              ) rotate(720deg) scale(0);\n              opacity: 0;\n            }\n          }\n          .animate-scratch-card-confetti {\n            animation: scratch-card-confetti 1s ease-out forwards;\n          }\n\n          @keyframes scratch-card-glow {\n            0%, 100% { opacity: 0.5; }\n            50% { opacity: 0.8; }\n          }\n          .animate-scratch-card-glow {\n            animation: scratch-card-glow 2s ease-in-out infinite;\n          }\n\n          @keyframes scratch-card-shine {\n            0% {\n              transform: translateX(-100%) rotate(45deg);\n            }\n            50%, 100% {\n              transform: translateX(200%) rotate(45deg);\n            }\n          }\n          .animate-scratch-card-shine {\n            background: linear-gradient(\n              90deg,\n              transparent 0%,\n              rgba(255, 255, 255, 0.4) 50%,\n              transparent 100%\n            );\n            animation: scratch-card-shine 2s ease-in-out infinite;\n          }\n\n          @keyframes scratch-card-pulse-border {\n            0%, 100% { box-shadow: 0 0 0 0 var(--glow-color); }\n            50% { box-shadow: 0 0 20px 5px var(--glow-color); }\n          }\n          .animate-scratch-card-pulse-border {\n            animation: scratch-card-pulse-border 2s ease-in-out infinite;\n          }\n        " }), /* @__PURE__ */ f("div", {
+		ref: A,
+		className: e("relative inline-block rounded-xl overflow-hidden shadow-xl select-none", "transition-all duration-300", T && "opacity-50 cursor-not-allowed", I && "animate-scratch-card-pulse-border", O),
+		style: {
+			width: r,
+			height: i,
+			"--glow-color": `${G.glowColor}60`
+		},
+		...k,
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "absolute inset-0",
+				children: /* @__PURE__ */ d(g, {
+					prize: n,
+					revealed: I,
+					width: r,
+					height: i,
+					renderPrize: D
+				})
+			}),
+			/* @__PURE__ */ d("canvas", {
+				ref: j,
+				className: e("absolute inset-0 touch-none", T ? "cursor-not-allowed" : "cursor-crosshair", I && "pointer-events-none opacity-0 transition-opacity duration-500"),
+				style: {
+					width: r,
+					height: i
+				},
+				onPointerDown: X,
+				onPointerMove: Z,
+				onPointerUp: Q,
+				onPointerLeave: Q,
+				onPointerCancel: Q
+			}),
+			E && !I && R && /* @__PURE__ */ f("div", {
+				className: "absolute bottom-2 left-2 right-2",
+				children: [/* @__PURE__ */ d("div", {
+					className: "h-1 bg-black/30 rounded-full overflow-hidden",
+					children: /* @__PURE__ */ d("div", {
+						className: "h-full bg-white/80 rounded-full transition-all duration-100",
+						style: { width: `${Math.min(P / o * 100, 100)}%` }
+					})
+				}), /* @__PURE__ */ f("p", {
+					className: "text-[10px] text-white/60 text-center mt-1",
+					children: [Math.round(P * 100), "% scratched"]
+				})]
+			}),
+			v && /* @__PURE__ */ d("button", {
+				type: "button",
+				onClick: () => V(!B),
+				className: e("absolute top-2 right-2 p-1.5 rounded-full", "bg-black/30 hover:bg-black/50 transition-colors", "text-white/80 hover:text-white", "z-10"),
+				"aria-label": B ? "Mute sound" : "Unmute sound",
+				children: d(B ? c : l, { className: "w-4 h-4" })
+			}),
+			I && /* @__PURE__ */ d("div", {
+				className: "absolute inset-0 pointer-events-none",
+				children: [...Array(8)].map((e, t) => /* @__PURE__ */ d(a, {
+					className: "absolute text-yellow-400 animate-ping",
+					style: {
+						width: 16 + Math.random() * 16,
+						height: 16 + Math.random() * 16,
+						left: `${10 + Math.random() * 80}%`,
+						top: `${10 + Math.random() * 80}%`,
+						animationDelay: `${Math.random() * .5}s`,
+						animationDuration: `${1 + Math.random() * .5}s`
+					}
+				}, t))
+			}),
+			I && /* @__PURE__ */ d("button", {
+				type: "button",
+				onClick: $,
+				className: e("absolute bottom-3 right-3 px-3 py-1.5 rounded-full text-xs font-medium", "bg-white/20 hover:bg-white/30 backdrop-blur-sm", "text-white transition-all duration-200", "hover:scale-105 active:scale-95"),
+				children: "Reset"
+			})
+		]
+	})] });
+});
+_.displayName = "WakaScratchCard";
+//#endregion
+export { _ as WakaScratchCard, _ as default, m as useScratchCard };

package/dist/components/waka-season-pass/index.cjs.js

@@ -0,0 +1,60 @@
+"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(e){let t=new Date,n=e.getTime()-t.getTime();if(n<=0)return`Season ended`;let r=Math.floor(n/(1e3*60*60*24)),i=Math.floor(n%(1e3*60*60*24)/(1e3*60*60)),a=Math.floor(n%(1e3*60*60)/(1e3*60));return r>0?`${r}d ${i}h remaining`:i>0?`${i}h ${a}m remaining`:`${a}m remaining`}function o(e,t){return e.find(e=>e.level===t+1)?.xpRequired??0}function s(e,t){return e.find(e=>e.level===t)?.xpRequired??0}function c({active:e,onComplete:t}){let[a,o]=n.useState(!1);if(n.useEffect(()=>{if(e){o(!0);let e=setTimeout(()=>{o(!1),t?.()},1e3);return()=>clearTimeout(e)}},[e,t]),!a)return null;let s=[`#fbbf24`,`#f59e0b`,`#22c55e`,`#8b5cf6`,`#06b6d4`];return(0,i.jsxs)(`div`,{className:`pointer-events-none absolute inset-0 overflow-hidden`,children:[[...Array(20)].map((e,t)=>{let n=t/20*360,r=40+Math.random()*30,a=4+Math.random()*4;return(0,i.jsx)(`div`,{className:`absolute left-1/2 top-1/2 rounded-full animate-claim-particle`,style:{width:a,height:a,backgroundColor:s[Math.floor(Math.random()*s.length)],"--angle":`${n}deg`,"--distance":`${r}px`,animationDelay:`${Math.random()*.1}s`}},t)}),[...[,,,,,,]].map((e,t)=>(0,i.jsx)(r.Sparkles,{className:`absolute animate-claim-sparkle`,style:{left:`${20+Math.random()*60}%`,top:`${20+Math.random()*60}%`,color:s[Math.floor(Math.random()*s.length)],animationDelay:`${t*.1}s`}},`sparkle-${t}`)),(0,i.jsx)(`style`,{children:`
+        @keyframes claim-particle {
+          0% {
+            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);
+            opacity: 1;
+          }
+          100% {
+            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0);
+            opacity: 0;
+          }
+        }
+        @keyframes claim-sparkle {
+          0% { transform: scale(0) rotate(0deg); opacity: 0; }
+          50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
+          100% { transform: scale(0) rotate(360deg); opacity: 0; }
+        }
+        .animate-claim-particle {
+          animation: claim-particle 0.8s ease-out forwards;
+        }
+        .animate-claim-sparkle {
+          animation: claim-sparkle 0.6s ease-out forwards;
+        }
+      `})]})}function l({reward:e,level:a,tier:o,isUnlocked:s,isPremium:l,onClaim:u}){let[d,f]=n.useState(!1),[p,m]=n.useState(!1),h=e&&!e.claimed&&s&&(o===`free`||o===`premium`&&l),g=o===`premium`&&!l;return e?(0,i.jsxs)(`div`,{className:t.cn(`relative flex h-16 w-16 flex-col items-center justify-center rounded-lg border-2 transition-all duration-300`,e.claimed&&`border-green-500/50 bg-green-500/10`,!e.claimed&&h&&`border-yellow-500 bg-yellow-500/10 cursor-pointer hover:scale-105 hover:shadow-lg`,!e.claimed&&!h&&!g&&`border-muted-foreground/30 bg-muted/30`,g&&`border-purple-500/30 bg-purple-500/10`,o===`premium`&&!g&&`border-purple-500/50`),onMouseEnter:()=>m(!0),onMouseLeave:()=>m(!1),onClick:()=>{h&&(f(!0),u?.())},children:[(0,i.jsx)(c,{active:d,onComplete:()=>f(!1)}),g&&(0,i.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center rounded-lg bg-black/40 z-10`,children:(0,i.jsx)(r.Lock,{className:`h-5 w-5 text-purple-300`})}),e.claimed&&(0,i.jsx)(`div`,{className:`absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-green-500 z-20`,children:(0,i.jsx)(r.Check,{className:`h-3 w-3 text-white`})}),(0,i.jsx)(`div`,{className:t.cn(`flex items-center justify-center`,(g||!h&&!e.claimed)&&`opacity-50`),children:e.icon||(0,i.jsx)(r.Gift,{className:t.cn(`h-6 w-6`,o===`premium`?`text-purple-500`:`text-yellow-500`)})}),(0,i.jsx)(`span`,{className:t.cn(`mt-1 text-xs font-medium truncate max-w-full px-1`,(g||!h&&!e.claimed)&&`opacity-50`),children:typeof e.value==`number`?e.value.toLocaleString():e.value}),h&&p&&(0,i.jsx)(`div`,{className:`absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-black/90 px-2 py-1 text-xs text-white z-30`,children:`Click to claim`}),h&&(0,i.jsx)(`div`,{className:`absolute inset-0 overflow-hidden rounded-lg`,children:(0,i.jsx)(`div`,{className:`absolute inset-0 animate-reward-shine`})}),(0,i.jsx)(`style`,{children:`
+        @keyframes reward-shine {
+          0% { transform: translateX(-100%); opacity: 0; }
+          50% { opacity: 0.3; }
+          100% { transform: translateX(100%); opacity: 0; }
+        }
+        .animate-reward-shine {
+          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+          animation: reward-shine 2s ease-in-out infinite;
+        }
+      `})]}):(0,i.jsx)(`div`,{className:`relative flex h-16 w-16 items-center justify-center rounded-lg border border-dashed border-muted-foreground/30 bg-muted/20`,children:(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:`-`})})}function u({level:e,currentLevel:n,isPremium:r,onClaimReward:a}){let o=n>=e.level,s=n===e.level;return(0,i.jsxs)(`div`,{className:`flex flex-col items-center gap-2 px-2`,children:[(0,i.jsx)(l,{reward:e.freeReward,level:e.level,tier:`free`,isUnlocked:o,isPremium:r,onClaim:()=>a?.(e.level,`free`)}),(0,i.jsxs)(`div`,{className:t.cn(`relative flex h-10 w-10 items-center justify-center rounded-full border-2 font-bold transition-all`,o&&`border-yellow-500 bg-gradient-to-br from-yellow-400 to-orange-500 text-white`,!o&&`border-muted-foreground/30 bg-muted/30 text-muted-foreground`,s&&`ring-2 ring-yellow-500/50 ring-offset-2 ring-offset-background scale-110`),children:[s&&(0,i.jsx)(`div`,{className:`absolute inset-0 rounded-full animate-pulse-ring`}),(0,i.jsx)(`span`,{className:`relative z-10 text-sm`,children:e.level}),(0,i.jsx)(`style`,{children:`
+          @keyframes pulse-ring {
+            0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4); }
+            50% { box-shadow: 0 0 0 8px rgba(234, 179, 8, 0); }
+          }
+          .animate-pulse-ring {
+            animation: pulse-ring 2s ease-out infinite;
+          }
+        `})]}),(0,i.jsx)(l,{reward:e.premiumReward,level:e.level,tier:`premium`,isUnlocked:o,isPremium:r,onClaim:()=>a?.(e.level,`premium`)})]})}function d({currentXP:e,currentLevel:t,levels:n}){let a=s(n,t),c=o(n,t),l=e-a,u=c-a,d=u>0?Math.min(100,l/u*100):100,f=Math.max(0,c-e);return(0,i.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,i.jsx)(`div`,{className:`flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 font-bold text-white shadow-lg`,children:t}),(0,i.jsxs)(`div`,{className:`flex-1`,children:[(0,i.jsxs)(`div`,{className:`mb-1 flex items-center justify-between text-sm`,children:[(0,i.jsxs)(`span`,{className:`flex items-center gap-1 font-medium`,children:[(0,i.jsx)(r.Zap,{className:`h-4 w-4 text-yellow-500`}),(0,i.jsx)(`span`,{className:`tabular-nums`,children:l.toLocaleString()}),(0,i.jsxs)(`span`,{className:`text-muted-foreground`,children:[`/ `,u.toLocaleString(),` XP`]})]}),(0,i.jsxs)(`span`,{className:`text-muted-foreground tabular-nums`,children:[f.toLocaleString(),` XP to next level`]})]}),(0,i.jsx)(`div`,{className:`relative h-3 overflow-hidden rounded-full bg-muted`,children:(0,i.jsx)(`div`,{className:`h-full rounded-full bg-gradient-to-r from-yellow-400 to-orange-500 transition-all duration-500`,style:{width:`${d}%`},children:(0,i.jsx)(`div`,{className:`absolute inset-0 animate-xp-shine`})})})]}),(0,i.jsx)(`div`,{className:`flex h-10 w-10 items-center justify-center rounded-full border-2 border-muted-foreground/30 bg-muted/30 font-bold text-muted-foreground`,children:t+1}),(0,i.jsx)(`style`,{children:`
+        @keyframes xp-shine {
+          0% { transform: translateX(-100%); opacity: 0; }
+          50% { opacity: 0.3; }
+          100% { transform: translateX(100%); opacity: 0; }
+        }
+        .animate-xp-shine {
+          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+          animation: xp-shine 2s ease-in-out infinite;
+        }
+      `})]})}function f({seasonEndsAt:e}){let[o,s]=n.useState(()=>a(e));return n.useEffect(()=>{let t=setInterval(()=>{s(a(e))},6e4);return()=>clearInterval(t)},[e]),(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium`,e.getTime()-Date.now()<4320*60*1e3?`bg-red-500/10 text-red-500 animate-pulse`:`bg-muted text-muted-foreground`),children:[(0,i.jsx)(r.Clock,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{children:o})]})}function p({onUpgrade:e}){return(0,i.jsxs)(`button`,{type:`button`,onClick:e,className:`group relative flex items-center gap-3 rounded-xl border-2 border-purple-500/50 bg-gradient-to-r from-purple-500/10 to-pink-500/10 px-4 py-3 transition-all hover:border-purple-500 hover:shadow-lg hover:shadow-purple-500/20`,children:[(0,i.jsx)(`div`,{className:`flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-purple-500 to-pink-500 shadow-lg`,children:(0,i.jsx)(r.Crown,{className:`h-5 w-5 text-white`})}),(0,i.jsxs)(`div`,{className:`text-left`,children:[(0,i.jsx)(`div`,{className:`font-semibold text-purple-500 group-hover:text-purple-400`,children:`Upgrade to Premium`}),(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Unlock exclusive rewards and premium tier`})]}),(0,i.jsx)(r.Star,{className:`ml-auto h-5 w-5 text-purple-500 opacity-0 transition-opacity group-hover:opacity-100`}),(0,i.jsx)(`div`,{className:`absolute inset-0 overflow-hidden rounded-xl`,children:(0,i.jsx)(`div`,{className:`absolute inset-0 animate-premium-shine opacity-0 group-hover:opacity-100`})}),(0,i.jsx)(`style`,{children:`
+        @keyframes premium-shine {
+          0% { transform: translateX(-100%) rotate(45deg); }
+          100% { transform: translateX(100%) rotate(45deg); }
+        }
+        .animate-premium-shine {
+          background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.2), transparent);
+          animation: premium-shine 1.5s ease-in-out infinite;
+        }
+      `})]})}function m({levels:e,currentLevel:a,currentXP:o,isPremium:s,seasonEndsAt:c,onClaimReward:l,onUpgrade:m,className:h}){let g=n.useRef(null),[_,v]=n.useState(!1),[y,b]=n.useState(!0),x=n.useMemo(()=>[...e].sort((e,t)=>e.level-t.level),[e]),S=n.useCallback(()=>{let e=g.current;e&&(v(e.scrollLeft>0),b(e.scrollLeft<e.scrollWidth-e.clientWidth-1))},[]);return n.useEffect(()=>{let e=g.current;if(!e)return;let t=x.findIndex(e=>e.level===a);if(t>=0){let n=Math.max(0,t*100-e.clientWidth/2+100/2);e.scrollTo({left:n,behavior:`smooth`})}S()},[a,x,S]),(0,i.jsxs)(`div`,{className:t.cn(`space-y-4`,h),children:[(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,i.jsx)(`div`,{className:`flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-yellow-400 to-orange-500 shadow-lg`,children:(0,i.jsx)(r.Star,{className:`h-5 w-5 text-white`})}),(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`h2`,{className:`text-lg font-bold`,children:`Season Pass`}),(0,i.jsxs)(`p`,{className:`text-sm text-muted-foreground`,children:[`Level `,a,` `,s&&(0,i.jsx)(`span`,{className:`text-purple-500`,children:`(Premium)`})]})]})]}),c&&(0,i.jsx)(f,{seasonEndsAt:c})]}),(0,i.jsx)(d,{currentXP:o,currentLevel:a,levels:x}),!s&&(0,i.jsx)(p,{onUpgrade:m}),(0,i.jsxs)(`div`,{className:`relative`,children:[(0,i.jsxs)(`div`,{className:`absolute left-0 top-0 z-10 flex flex-col items-center justify-center gap-2 bg-gradient-to-r from-background via-background to-transparent pr-4 h-full`,children:[(0,i.jsx)(`div`,{className:`flex h-16 items-center`,children:(0,i.jsx)(`span`,{className:`text-xs font-medium text-muted-foreground rotate-180`,style:{writingMode:`vertical-rl`},children:`FREE`})}),(0,i.jsx)(`div`,{className:`h-10`}),(0,i.jsx)(`div`,{className:`flex h-16 items-center`,children:(0,i.jsx)(`span`,{className:`text-xs font-medium text-purple-500 rotate-180`,style:{writingMode:`vertical-rl`},children:`PREMIUM`})})]}),_&&(0,i.jsx)(`button`,{type:`button`,onClick:()=>{let e=g.current;e&&e.scrollBy({left:-300,behavior:`smooth`})},className:`absolute left-8 top-1/2 z-20 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full border bg-background shadow-lg transition-all hover:bg-accent`,children:(0,i.jsx)(r.ChevronLeft,{className:`h-4 w-4`})}),y&&(0,i.jsx)(`button`,{type:`button`,onClick:()=>{let e=g.current;e&&e.scrollBy({left:300,behavior:`smooth`})},className:`absolute right-0 top-1/2 z-20 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full border bg-background shadow-lg transition-all hover:bg-accent`,children:(0,i.jsx)(r.ChevronRight,{className:`h-4 w-4`})}),(0,i.jsxs)(`div`,{ref:g,onScroll:()=>{S()},className:`relative flex overflow-x-auto scroll-smooth pb-4 pl-10 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-muted-foreground/30`,style:{scrollbarWidth:`thin`,msOverflowStyle:`none`},children:[(0,i.jsx)(`div`,{className:`absolute left-10 right-0 top-1/2 h-1 -translate-y-1/2 bg-muted`,children:(0,i.jsx)(`div`,{className:`h-full bg-gradient-to-r from-yellow-400 to-orange-500 transition-all duration-500`,style:{width:`${Math.min(100,(a-1)/(x.length-1)*100)}%`}})}),(0,i.jsx)(`div`,{className:`relative flex gap-4`,children:x.map(e=>(0,i.jsx)(u,{level:e,currentLevel:a,isPremium:s,onClaimReward:l},e.level))})]})]}),(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center gap-4 text-xs text-muted-foreground`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(`div`,{className:`h-3 w-3 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500`}),(0,i.jsx)(`span`,{children:`Unlocked`})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(`div`,{className:`h-3 w-3 rounded-full border-2 border-yellow-500 bg-yellow-500/20`}),(0,i.jsx)(`span`,{children:`Claimable`})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(`div`,{className:`h-3 w-3 rounded-full border-2 border-green-500 bg-green-500/20`}),(0,i.jsx)(`span`,{children:`Claimed`})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(r.Lock,{className:`h-3 w-3 text-purple-500`}),(0,i.jsx)(`span`,{children:`Premium Only`})]})]})]})}function h({levels:e,initialLevel:t=1,initialXP:r=0,initialIsPremium:i=!1,onLevelUp:a,onClaimReward:c}){let[l,u]=n.useState(e),[d,f]=n.useState(t),[p,m]=n.useState(r),[h,g]=n.useState(i),_=n.useRef(t),v=n.useCallback(e=>{let t=1;for(let n of l)if(e>=n.xpRequired)t=n.level;else break;return t},[l]);return n.useEffect(()=>{let e=v(p);e!==d&&f(e)},[p,v,d]),n.useEffect(()=>{d>_.current&&a?.(d),_.current=d},[d,a]),{levels:l,currentLevel:d,currentXP:p,isPremium:h,addXP:n.useCallback(e=>{m(t=>t+e)},[]),claimReward:n.useCallback((e,t)=>{u(n=>n.map(n=>n.level===e?t===`free`&&n.freeReward?(c?.(e,t),{...n,freeReward:{...n.freeReward,claimed:!0}}):t===`premium`&&n.premiumReward&&h?(c?.(e,t),{...n,premiumReward:{...n.premiumReward,claimed:!0}}):n:n))},[h,c]),upgradeToPremium:n.useCallback(()=>{g(!0)},[]),claimableRewardsCount:n.useMemo(()=>{let e=0;for(let t of l)d>=t.level&&(t.freeReward&&!t.freeReward.claimed&&e++,t.premiumReward&&!t.premiumReward.claimed&&h&&e++);return e},[l,d,h]),progressPercent:(()=>{let e=s(l,d),t=o(l,d)-e;return t<=0?100:(p-e)/t*100})()}}exports.WakaSeasonPass=m,exports.useSeasonPass=h;

package/dist/components/waka-season-pass/index.d.ts

@@ -3,7 +3,7 @@ export interface SeasonPassReward {
     /** Reward type identifier */
     type: string;
     /** Reward value (e.g., amount, item name, etc.) */
-    value: any;
+    value: React.ReactNode;
     /** Custom icon for the reward */
     icon?: React.ReactNode;
     /** Whether the reward has been claimed */