@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-milestone-road/index.es.js

@@ -0,0 +1,646 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Award as n, Check as r, Flag as i, Gem as a, Gift as o, Lock as s, MapPin as c, Sparkles as l, Star as u, Target as d, Trophy as f, Zap as p } from "lucide-react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/waka-milestone-road/index.tsx
+var _ = {
+	default: {
+		roadColor: "#6b7280",
+		progressColor: "#3b82f6",
+		completedColor: "#22c55e",
+		currentColor: "#f59e0b",
+		lockedColor: "#9ca3af",
+		gradient: "from-blue-500 to-purple-600",
+		glow: "#3b82f6"
+	},
+	gold: {
+		roadColor: "#78716c",
+		progressColor: "#f59e0b",
+		completedColor: "#22c55e",
+		currentColor: "#eab308",
+		lockedColor: "#a8a29e",
+		gradient: "from-yellow-400 to-orange-500",
+		glow: "#f59e0b"
+	},
+	purple: {
+		roadColor: "#6b7280",
+		progressColor: "#a855f7",
+		completedColor: "#22c55e",
+		currentColor: "#c084fc",
+		lockedColor: "#9ca3af",
+		gradient: "from-purple-500 to-pink-600",
+		glow: "#a855f7"
+	},
+	green: {
+		roadColor: "#6b7280",
+		progressColor: "#22c55e",
+		completedColor: "#10b981",
+		currentColor: "#4ade80",
+		lockedColor: "#9ca3af",
+		gradient: "from-green-500 to-emerald-600",
+		glow: "#22c55e"
+	},
+	blue: {
+		roadColor: "#6b7280",
+		progressColor: "#06b6d4",
+		completedColor: "#22c55e",
+		currentColor: "#22d3ee",
+		lockedColor: "#9ca3af",
+		gradient: "from-cyan-500 to-blue-600",
+		glow: "#06b6d4"
+	}
+}, v = {
+	xp: p,
+	badge: n,
+	item: o,
+	currency: a,
+	unlock: s
+};
+function y({ active: e, onComplete: n }) {
+	let [r, i] = t.useState(!1);
+	if (t.useEffect(() => {
+		if (e) {
+			i(!0);
+			let e = setTimeout(() => {
+				i(!1), n?.();
+			}, 1500);
+			return () => clearTimeout(e);
+		}
+	}, [e, n]), !r) return null;
+	let a = [
+		"#fbbf24",
+		"#f59e0b",
+		"#22c55e",
+		"#3b82f6",
+		"#a855f7",
+		"#ec4899"
+	];
+	return /* @__PURE__ */ g("div", {
+		className: "pointer-events-none absolute inset-0 overflow-hidden",
+		children: [
+			[...Array(24)].map((e, t) => {
+				let n = t / 24 * 360, r = 60 + Math.random() * 40, i = 4 + Math.random() * 6;
+				return /* @__PURE__ */ h("div", {
+					className: "absolute left-1/2 top-1/2 animate-milestone-confetti",
+					style: {
+						width: i,
+						height: i,
+						backgroundColor: a[Math.floor(Math.random() * a.length)],
+						borderRadius: Math.random() > .5 ? "50%" : "2px",
+						"--angle": `${n}deg`,
+						"--distance": `${r}px`,
+						animationDelay: `${Math.random() * .2}s`
+					}
+				}, t);
+			}),
+			[...Array(8)].map((e, t) => /* @__PURE__ */ h(l, {
+				className: "absolute animate-milestone-sparkle text-yellow-400",
+				style: {
+					left: `${20 + Math.random() * 60}%`,
+					top: `${20 + Math.random() * 60}%`,
+					animationDelay: `${t * .1}s`,
+					width: 16,
+					height: 16
+				}
+			}, `sparkle-${t}`)),
+			/* @__PURE__ */ h("style", { children: "\n        @keyframes milestone-confetti {\n          0% {\n            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);\n            opacity: 1;\n          }\n          100% {\n            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0);\n            opacity: 0;\n          }\n        }\n        @keyframes milestone-sparkle {\n          0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }\n          50% { transform: scale(1) rotate(180deg); opacity: 1; }\n        }\n        .animate-milestone-confetti {\n          animation: milestone-confetti 1s ease-out forwards;\n        }\n        .animate-milestone-sparkle {\n          animation: milestone-sparkle 1s ease-in-out;\n        }\n      " })
+		]
+	});
+}
+function b({ reward: t, size: n = "default" }) {
+	let r = v[t.type] || o;
+	return /* @__PURE__ */ g("div", {
+		className: e("flex items-center gap-1 rounded-full", {
+			xp: "text-yellow-500 bg-yellow-500/10",
+			badge: "text-purple-500 bg-purple-500/10",
+			item: "text-blue-500 bg-blue-500/10",
+			currency: "text-amber-500 bg-amber-500/10",
+			unlock: "text-green-500 bg-green-500/10"
+		}[t.type], n === "sm" ? "px-1.5 py-0.5" : "px-2 py-1"),
+		children: [t.icon || /* @__PURE__ */ h(r, { className: n === "sm" ? "h-3 w-3" : "h-3.5 w-3.5" }), /* @__PURE__ */ g("span", {
+			className: e("font-medium", n === "sm" ? "text-[10px]" : "text-xs"),
+			children: [typeof t.value == "number" ? `+${t.value}` : t.value, t.type === "xp" && " XP"]
+		})]
+	});
+}
+function x({ milestone: n, position: i, theme: a, animated: o, onClick: c, onClaimRewards: l }) {
+	let [u, f] = t.useState(!1), [p, v] = t.useState(!1), x = _[a], S = n.completed && n.rewards && n.rewards.length > 0;
+	return /* @__PURE__ */ g("g", {
+		transform: `translate(${i.x}, ${i.y})`,
+		onMouseEnter: () => v(!0),
+		onMouseLeave: () => v(!1),
+		onClick: () => {
+			S && (f(!0), l?.()), c?.();
+		},
+		className: "cursor-pointer",
+		children: [
+			u && /* @__PURE__ */ h("foreignObject", {
+				x: -50,
+				y: -50,
+				width: 100,
+				height: 100,
+				children: /* @__PURE__ */ h(y, {
+					active: u,
+					onComplete: () => f(!1)
+				})
+			}),
+			n.isCurrent && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("circle", {
+				r: 36,
+				fill: "none",
+				stroke: x.currentColor,
+				strokeWidth: 2,
+				opacity: .4,
+				className: o ? "animate-pulse" : ""
+			}), /* @__PURE__ */ h("circle", {
+				r: 32,
+				fill: `${x.currentColor}20`,
+				className: o ? "animate-milestone-glow" : ""
+			})] }),
+			n.completed && !n.isCurrent && /* @__PURE__ */ h("circle", {
+				r: 30,
+				fill: "none",
+				stroke: x.completedColor,
+				strokeWidth: 2,
+				opacity: .5
+			}),
+			S && /* @__PURE__ */ h("circle", {
+				r: 34,
+				fill: "none",
+				stroke: x.currentColor,
+				strokeWidth: 2,
+				strokeDasharray: "4 4",
+				className: o ? "animate-spin-slow" : ""
+			}),
+			/* @__PURE__ */ h("circle", {
+				r: 48 / 2,
+				fill: n.completed || n.isCurrent ? `url(#milestone-gradient-${a})` : "hsl(var(--background))",
+				stroke: n.completed ? x.completedColor : n.isCurrent ? x.currentColor : x.lockedColor,
+				strokeWidth: n.isCurrent ? 4 : 3,
+				className: e("transition-all duration-300", p && "filter drop-shadow-lg")
+			}),
+			(n.completed || n.isCurrent) && /* @__PURE__ */ h("circle", {
+				r: 48 / 2 - 5,
+				fill: "none",
+				stroke: "rgba(255,255,255,0.3)",
+				strokeWidth: 1
+			}),
+			/* @__PURE__ */ h("g", {
+				transform: "translate(-12, -12)",
+				children: n.completed ? n.icon || /* @__PURE__ */ h(r, {
+					className: "h-6 w-6 text-white",
+					strokeWidth: 3
+				}) : n.isCurrent ? n.icon || /* @__PURE__ */ h(d, { className: "h-6 w-6 text-white" }) : /* @__PURE__ */ h(s, {
+					className: "h-6 w-6 text-muted-foreground",
+					opacity: .6
+				})
+			}),
+			/* @__PURE__ */ h("text", {
+				y: 44,
+				textAnchor: "middle",
+				className: e("text-xs font-medium pointer-events-none", n.completed || n.isCurrent ? "fill-foreground" : "fill-muted-foreground/60"),
+				style: { fontSize: 11 },
+				children: n.name
+			}),
+			p && n.rewards && n.rewards.length > 0 && /* @__PURE__ */ h("foreignObject", {
+				x: -60,
+				y: -98,
+				width: 120,
+				height: 40,
+				children: /* @__PURE__ */ g("div", {
+					className: "flex flex-wrap justify-center gap-1",
+					children: [n.rewards.slice(0, 3).map((e, t) => /* @__PURE__ */ h(b, {
+						reward: e,
+						size: "sm"
+					}, t)), n.rewards.length > 3 && /* @__PURE__ */ g("span", {
+						className: "text-[10px] text-muted-foreground",
+						children: ["+", n.rewards.length - 3]
+					})]
+				})
+			}),
+			/* @__PURE__ */ h("style", { children: "\n        @keyframes milestone-glow {\n          0%, 100% { opacity: 0.3; transform: scale(1); }\n          50% { opacity: 0.6; transform: scale(1.05); }\n        }\n        @keyframes spin-slow {\n          from { transform: rotate(0deg); }\n          to { transform: rotate(360deg); }\n        }\n        .animate-milestone-glow {\n          animation: milestone-glow 2s ease-in-out infinite;\n        }\n        .animate-spin-slow {\n          animation: spin-slow 8s linear infinite;\n        }\n      " })
+		]
+	});
+}
+function S({ position: e, theme: t, animated: n, children: r }) {
+	let i = _[t];
+	return /* @__PURE__ */ g("g", {
+		transform: `translate(${e.x}, ${e.y})`,
+		className: n ? "animate-character-bounce" : "",
+		children: [
+			/* @__PURE__ */ h("circle", {
+				r: 20,
+				fill: `${i.progressColor}30`,
+				className: n ? "animate-pulse" : ""
+			}),
+			r || /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("circle", {
+				r: 14,
+				fill: i.progressColor,
+				stroke: "white",
+				strokeWidth: 3,
+				className: "drop-shadow-lg"
+			}), /* @__PURE__ */ h("g", {
+				transform: "translate(-8, -8)",
+				children: /* @__PURE__ */ h(c, {
+					className: "h-4 w-4 text-white",
+					fill: "white"
+				})
+			})] }),
+			/* @__PURE__ */ h("style", { children: `
+        @keyframes character-bounce {
+          0%, 100% { transform: translate(${e.x}px, ${e.y}px) translateY(0); }
+          50% { transform: translate(${e.x}px, ${e.y}px) translateY(-4px); }
+        }
+        .animate-character-bounce {
+          animation: character-bounce 1s ease-in-out infinite;
+        }
+      ` })
+		]
+	});
+}
+function C(e, t, n = 5) {
+	let r = [], i = [], a = e * .25, o = t / n, s = e / 2, c = t - 40;
+	i.push(`M ${s} ${c}`), r.push({
+		x: s,
+		y: c,
+		t: 0
+	});
+	for (let t = 0; t < n; t++) {
+		let l = t % 2 == 0 ? 1 : -1, u = c - o, d = s + a * l, f = e / 2 + a * .5 * l * (t % 2 == 0 ? -1 : 1), p = s, m = c - o * .3, h = d, g = u + o * .3;
+		i.push(`C ${p} ${m}, ${h} ${g}, ${f} ${u}`);
+		let _ = (t + 1) / n, v = (c + u) / 2, y = s + (d - s) * .5;
+		r.push({
+			x: y,
+			y: v,
+			t: _ - .5 / n
+		}), r.push({
+			x: f,
+			y: u,
+			t: _
+		}), s = f, c = u;
+	}
+	return i.push(`L ${s} 40`), r.push({
+		x: s,
+		y: 40,
+		t: 1
+	}), {
+		path: i.join(" "),
+		points: r
+	};
+}
+function w(e, t) {
+	let n = t / 2, r = e - 60, i = `M 60 ${n} L ${r} ${n}`, a = [];
+	for (let e = 0; e <= 10; e++) {
+		let t = e / 10;
+		a.push({
+			x: 60 + (r - 60) * t,
+			y: n,
+			t
+		});
+	}
+	return {
+		path: i,
+		points: a
+	};
+}
+function T(e, t) {
+	let n = e / 2, r = t - 60, i = `M ${n} ${r} L ${n} 60`, a = [];
+	for (let e = 0; e <= 10; e++) {
+		let t = e / 10;
+		a.push({
+			x: n,
+			y: r + (60 - r) * t,
+			t
+		});
+	}
+	return {
+		path: i,
+		points: a
+	};
+}
+function E({ progress: t, theme: n }) {
+	let r = _[n];
+	return /* @__PURE__ */ g("div", {
+		className: "absolute top-4 right-4 flex items-center gap-2 rounded-full border bg-background/90 backdrop-blur-sm px-4 py-2 shadow-lg",
+		children: [/* @__PURE__ */ h("div", {
+			className: e("flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br", r.gradient),
+			children: /* @__PURE__ */ h(i, { className: "h-4 w-4 text-white" })
+		}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("div", {
+			className: "text-xs text-muted-foreground",
+			children: "Journey Progress"
+		}), /* @__PURE__ */ g("div", {
+			className: "text-lg font-bold tabular-nums",
+			children: [Math.round(t), "%"]
+		})] })]
+	});
+}
+function D({ milestones: n, progress: r, onMilestoneClick: a, onClaimRewards: o, variant: s = "winding", theme: c = "default", animated: l = !0, showCharacter: d = !0, character: p, showProgressLabel: m = !0, className: v }) {
+	let [y, b] = t.useState(0), D = t.useRef(null), [O, k] = t.useState({
+		width: 600,
+		height: 500
+	}), A = _[c];
+	t.useEffect(() => {
+		if (!l) {
+			b(r);
+			return;
+		}
+		let e = y, t = r - e, n = Date.now(), i = () => {
+			let r = Date.now() - n, a = Math.min(r / 1e3, 1);
+			b(e + t * (1 - (1 - a) ** 3)), a < 1 && requestAnimationFrame(i);
+		};
+		requestAnimationFrame(i);
+	}, [r, l]), t.useEffect(() => {
+		let e = () => {
+			if (D.current) {
+				let e = D.current.getBoundingClientRect();
+				k({
+					width: Math.max(e.width, 400),
+					height: Math.max(e.height, 400)
+				});
+			}
+		};
+		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, []);
+	let { path: j, points: M } = t.useMemo(() => {
+		switch (s) {
+			case "horizontal": return w(O.width, O.height);
+			case "vertical": return T(O.width, O.height);
+			default: return C(O.width, O.height);
+		}
+	}, [s, O]), N = t.useMemo(() => n.map((e, t) => {
+		let r = e.position === void 0 ? t / Math.max(n.length - 1, 1) : e.position / 100, i = M[0], a = Infinity;
+		for (let e of M) {
+			let t = Math.abs(e.t - r);
+			t < a && (a = t, i = e);
+		}
+		return {
+			milestone: e,
+			position: i
+		};
+	}), [n, M]), P = t.useMemo(() => {
+		let e = y / 100, t = M[0], n = Infinity;
+		for (let r of M) {
+			let i = Math.abs(r.t - e);
+			i < n && (n = i, t = r);
+		}
+		for (let t = 0; t < M.length - 1; t++) {
+			let n = M[t], r = M[t + 1];
+			if (e >= n.t && e <= r.t) {
+				let t = (e - n.t) / (r.t - n.t);
+				return {
+					x: n.x + (r.x - n.x) * t,
+					y: n.y + (r.y - n.y) * t
+				};
+			}
+		}
+		return t;
+	}, [y, M]), F = 1e3;
+	return /* @__PURE__ */ g("div", {
+		ref: D,
+		className: e("relative overflow-hidden rounded-xl border bg-card", v),
+		style: { minHeight: 400 },
+		children: [
+			m && /* @__PURE__ */ h(E, {
+				progress: y,
+				theme: c
+			}),
+			/* @__PURE__ */ g("svg", {
+				width: O.width,
+				height: O.height,
+				className: "absolute inset-0",
+				"aria-hidden": "true",
+				focusable: "false",
+				children: [
+					/* @__PURE__ */ g("defs", { children: [
+						Object.entries(_).map(([e, t]) => /* @__PURE__ */ g("linearGradient", {
+							id: `milestone-gradient-${e}`,
+							x1: "0%",
+							y1: "0%",
+							x2: "100%",
+							y2: "100%",
+							children: [/* @__PURE__ */ h("stop", {
+								offset: "0%",
+								stopColor: t.progressColor
+							}), /* @__PURE__ */ h("stop", {
+								offset: "100%",
+								stopColor: t.completedColor
+							})]
+						}, `milestone-gradient-${e}`)),
+						/* @__PURE__ */ h("filter", {
+							id: "road-shadow",
+							x: "-50%",
+							y: "-50%",
+							width: "200%",
+							height: "200%",
+							children: /* @__PURE__ */ h("feDropShadow", {
+								dx: "0",
+								dy: "2",
+								stdDeviation: "3",
+								floodOpacity: "0.3"
+							})
+						}),
+						/* @__PURE__ */ g("filter", {
+							id: "glow",
+							x: "-50%",
+							y: "-50%",
+							width: "200%",
+							height: "200%",
+							children: [/* @__PURE__ */ h("feGaussianBlur", {
+								stdDeviation: "4",
+								result: "coloredBlur"
+							}), /* @__PURE__ */ g("feMerge", { children: [/* @__PURE__ */ h("feMergeNode", { in: "coloredBlur" }), /* @__PURE__ */ h("feMergeNode", { in: "SourceGraphic" })] })]
+						})
+					] }),
+					/* @__PURE__ */ h("path", {
+						d: j,
+						fill: "none",
+						stroke: A.roadColor,
+						strokeWidth: 30,
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						opacity: .2,
+						filter: "url(#road-shadow)"
+					}),
+					/* @__PURE__ */ h("path", {
+						d: j,
+						fill: "none",
+						stroke: A.roadColor,
+						strokeWidth: 24,
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					}),
+					/* @__PURE__ */ h("path", {
+						d: j,
+						fill: "none",
+						stroke: "rgba(255,255,255,0.3)",
+						strokeWidth: 2,
+						strokeLinecap: "round",
+						strokeDasharray: "12 8"
+					}),
+					/* @__PURE__ */ h("path", {
+						d: j,
+						fill: "none",
+						stroke: A.progressColor,
+						strokeWidth: 24,
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeDasharray: F,
+						strokeDashoffset: F * (1 - y / 100),
+						filter: "url(#glow)",
+						opacity: .8,
+						className: "transition-all duration-300"
+					}),
+					N.map(({ milestone: e, position: t }) => /* @__PURE__ */ h(x, {
+						milestone: e,
+						position: t,
+						theme: c,
+						animated: l,
+						onClick: () => a?.(e),
+						onClaimRewards: () => o?.(e.id)
+					}, e.id)),
+					d && /* @__PURE__ */ h(S, {
+						position: P,
+						theme: c,
+						animated: l,
+						children: p
+					}),
+					/* @__PURE__ */ g("g", {
+						transform: `translate(${M[0].x}, ${M[0].y})`,
+						children: [/* @__PURE__ */ h("circle", {
+							r: 16,
+							fill: A.roadColor,
+							opacity: .3
+						}), /* @__PURE__ */ h("g", {
+							transform: "translate(-8, -8)",
+							children: /* @__PURE__ */ h(i, { className: "h-4 w-4 text-muted-foreground" })
+						})]
+					}),
+					/* @__PURE__ */ g("g", {
+						transform: `translate(${M[M.length - 1].x}, ${M[M.length - 1].y})`,
+						children: [
+							/* @__PURE__ */ h("circle", {
+								r: 20,
+								fill: A.currentColor,
+								opacity: .3
+							}),
+							/* @__PURE__ */ h("circle", {
+								r: 16,
+								fill: A.currentColor,
+								opacity: .6
+							}),
+							/* @__PURE__ */ h("g", {
+								transform: "translate(-10, -10)",
+								children: /* @__PURE__ */ h(f, { className: "h-5 w-5 text-white" })
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "absolute bottom-4 left-4 flex flex-wrap items-center gap-3 rounded-lg border bg-background/90 backdrop-blur-sm px-3 py-2 text-xs",
+				children: [
+					/* @__PURE__ */ g("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ h("div", {
+							className: "h-3 w-3 rounded-full",
+							style: { backgroundColor: A.completedColor }
+						}), /* @__PURE__ */ h("span", {
+							className: "text-muted-foreground",
+							children: "Completed"
+						})]
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ h("div", {
+							className: "h-3 w-3 rounded-full border-2",
+							style: {
+								borderColor: A.currentColor,
+								backgroundColor: `${A.currentColor}30`
+							}
+						}), /* @__PURE__ */ h("span", {
+							className: "text-muted-foreground",
+							children: "Current"
+						})]
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ h("div", { className: "h-3 w-3 rounded-full border-2 border-muted-foreground/30" }), /* @__PURE__ */ h("span", {
+							className: "text-muted-foreground",
+							children: "Locked"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "absolute top-4 left-4 flex items-center gap-4",
+				children: /* @__PURE__ */ g("div", {
+					className: "flex items-center gap-2 rounded-full border bg-background/90 backdrop-blur-sm px-3 py-1.5",
+					children: [/* @__PURE__ */ h(u, {
+						className: "h-4 w-4 text-yellow-500",
+						fill: "currentColor"
+					}), /* @__PURE__ */ g("span", {
+						className: "text-sm font-medium",
+						children: [
+							n.filter((e) => e.completed).length,
+							"/",
+							n.length
+						]
+					})]
+				})
+			})
+		]
+	});
+}
+function O({ initialMilestones: e, onMilestoneComplete: n, onRewardsClaimed: r, autoCalculateProgress: i = !0 }) {
+	let [a, o] = t.useState(e), [s, c] = t.useState(0), [l, u] = t.useState(/* @__PURE__ */ new Set()), d = t.useRef(/* @__PURE__ */ new Map());
+	t.useEffect(() => {
+		if (i) {
+			let e = a.filter((e) => e.completed).length;
+			c(a.length > 0 ? e / a.length * 100 : 0);
+		}
+	}, [a, i]), t.useEffect(() => {
+		a.forEach((e) => {
+			let t = d.current.get(e.id);
+			e.completed && !t && n?.(e), d.current.set(e.id, e.completed);
+		});
+	}, [a, n]);
+	let f = t.useMemo(() => a.find((e) => !e.completed) || a[a.length - 1], [a]), p = t.useMemo(() => a.map((e) => ({
+		...e,
+		isCurrent: e.id === f?.id
+	})), [a, f]), m = t.useCallback((e) => {
+		o((t) => t.map((t) => t.id === e ? {
+			...t,
+			completed: !0
+		} : t));
+	}, []), h = t.useCallback((e) => {
+		let t = a.find((t) => t.id === e);
+		t && t.rewards && !l.has(e) && (u((t) => new Set([...t, e])), r?.(e, t.rewards));
+	}, [
+		a,
+		l,
+		r
+	]), g = t.useCallback((e) => {
+		i || c(Math.max(0, Math.min(100, e)));
+	}, [i]), _ = t.useCallback(() => {
+		o(e.map((e) => ({
+			...e,
+			completed: !1
+		}))), u(/* @__PURE__ */ new Set()), c(0), d.current.clear();
+	}, [e]), v = t.useMemo(() => a.filter((e) => e.completed && e.rewards && !l.has(e.id)).flatMap((e) => e.rewards || []), [a, l]);
+	return {
+		milestones: p,
+		progress: s,
+		currentMilestone: f,
+		completeMilestone: m,
+		claimRewards: h,
+		setProgress: g,
+		reset: _,
+		completedCount: a.filter((e) => e.completed).length,
+		totalCount: a.length,
+		unclaimedRewards: v,
+		hasUnclaimedRewards: v.length > 0
+	};
+}
+//#endregion
+export { D as WakaMilestoneRoad, O as useMilestoneRoad };

package/dist/components/waka-modal/index.cjs.js

@@ -0,0 +1 @@
+"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`),a=require(`@radix-ui/react-dialog`);a=e.__toESM(a);var o={sm:`max-w-sm`,md:`max-w-md`,lg:`max-w-lg`,xl:`max-w-xl`,full:`max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)]`},s={fade:`data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,slide:`data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,scale:`data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,none:``},c={fade:`data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,slide:`data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]`,scale:`data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95`,none:``},l=n.forwardRef(({className:e,animation:n=`fade`,...r},o)=>(0,i.jsx)(a.Overlay,{ref:o,className:t.cn(`fixed inset-0 z-50 bg-black/80`,s[n],e),...r}));l.displayName=`ModalOverlay`;var u=n.forwardRef(({className:e,children:n,size:s=`md`,animation:l=`fade`,centered:u=!0,showCloseButton:d=!0,...f},p)=>(0,i.jsxs)(a.Content,{ref:p,className:t.cn(`fixed z-50 w-full bg-background shadow-lg sm:rounded-lg`,`left-1/2 -translate-x-1/2`,u?`top-1/2 -translate-y-1/2`:`top-[10%]`,o[s],c[l],`duration-200`,e),...f,children:[n,d&&(0,i.jsxs)(a.Close,{className:`absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground`,children:[(0,i.jsx)(r.X,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{className:`sr-only`,children:`Fermer`})]})]}));u.displayName=`ModalContent`;var d=n.forwardRef(({className:e,sticky:n,...r},a)=>(0,i.jsx)(`div`,{ref:a,className:t.cn(`flex flex-col space-y-1.5 p-6 pb-4`,n&&`sticky top-0 bg-background z-10 border-b`,e),...r}));d.displayName=`ModalHeader`;var f=n.forwardRef(({className:e,...n},r)=>(0,i.jsx)(a.Title,{ref:r,className:t.cn(`text-lg font-semibold leading-none tracking-tight`,e),...n}));f.displayName=`ModalTitle`;var p=n.forwardRef(({className:e,...n},r)=>(0,i.jsx)(a.Description,{ref:r,className:t.cn(`text-sm text-muted-foreground`,e),...n}));p.displayName=`ModalDescription`;var m=n.forwardRef(({className:e,...n},r)=>(0,i.jsx)(`div`,{ref:r,className:t.cn(`px-6 py-4 overflow-auto`,e),...n}));m.displayName=`ModalBody`;var h=n.forwardRef(({className:e,sticky:n,...r},a)=>(0,i.jsx)(`div`,{ref:a,className:t.cn(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 pt-4`,n&&`sticky bottom-0 bg-background z-10 border-t`,e),...r}));h.displayName=`ModalFooter`;function g({open:e,onOpenChange:t,title:n,description:r,children:o,size:s=`md`,showCloseButton:c=!0,closeOnOverlayClick:g=!0,closeOnEscape:_=!0,animation:v=`scale`,centered:y=!0,stickyHeader:b=!1,stickyFooter:x=!1,footer:S,className:C,overlayClassName:w}){return(0,i.jsx)(a.Root,{open:e,onOpenChange:t,children:(0,i.jsxs)(a.Portal,{children:[(0,i.jsx)(l,{animation:v,className:w}),(0,i.jsxs)(u,{size:s,animation:v,centered:y,showCloseButton:c,className:C,onInteractOutside:e=>{g||e.preventDefault()},onEscapeKeyDown:e=>{_||e.preventDefault()},"aria-describedby":r?void 0:`modal-description`,children:[!n&&(0,i.jsx)(f,{className:`sr-only`,children:`Fenêtre modale`}),!r&&(0,i.jsx)(p,{id:`modal-description`,className:`sr-only`,children:`Contenu de la fenêtre modale`}),(n||r)&&(0,i.jsxs)(d,{sticky:b,children:[n&&(0,i.jsx)(f,{children:n}),r&&(0,i.jsx)(p,{children:r})]}),(0,i.jsx)(m,{children:o}),S&&(0,i.jsx)(h,{sticky:x,children:S})]})]})})}function _({children:e,onOpen:t,className:n,disabled:r}){return(0,i.jsx)(a.Trigger,{className:n,disabled:r,onClick:t,asChild:!0,children:e})}function v(e){let{defaultOpen:t=!1,onOpenChange:r}=e||{},[i,a]=n.useState(t);return{isOpen:i,open:n.useCallback(()=>{a(!0),r?.(!0)},[r]),close:n.useCallback(()=>{a(!1),r?.(!1)},[r]),toggle:n.useCallback(()=>{a(e=>{let t=!e;return r?.(t),t})},[r]),onOpenChange:n.useCallback(e=>{a(e),r?.(e)},[r])}}exports.ModalBody=m,exports.ModalContent=u,exports.ModalDescription=p,exports.ModalFooter=h,exports.ModalHeader=d,exports.ModalOverlay=l,exports.ModalTitle=f,exports.WakaModalTrigger=_,exports.default=g,exports.useModal=v;