@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-challenge-timer/index.es.js

@@ -0,0 +1,633 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { AlertTriangle as n, CheckCircle2 as r, Clock as i, Flame as a, Gift as o, Pause as s, Play 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-challenge-timer/index.tsx
+function _({ endTime: e, isPaused: n = !1, urgentThreshold: r = 3600, onComplete: i, onUrgent: a }) {
+	let [o, s] = t.useState(() => v(e, r)), c = t.useRef(!1), l = t.useRef(!1);
+	return t.useEffect(() => {
+		if (n) return;
+		let t = () => {
+			let t = v(e, r);
+			s(t), t.isUrgent && !c.current && !t.isExpired && (c.current = !0, a?.()), t.isExpired && !l.current && (l.current = !0, i?.());
+		};
+		t();
+		let o = setInterval(t, 1e3);
+		return () => clearInterval(o);
+	}, [
+		e,
+		n,
+		r,
+		i,
+		a
+	]), t.useEffect(() => {
+		c.current = !1, l.current = !1;
+	}, [e]), o;
+}
+function v(e, t) {
+	let n = /* @__PURE__ */ new Date(), r = e.getTime() - n.getTime(), i = Math.max(0, Math.floor(r / 1e3));
+	return {
+		days: Math.floor(i / (1440 * 60)),
+		hours: Math.floor(i % (1440 * 60) / 3600),
+		minutes: Math.floor(i % 3600 / 60),
+		seconds: i % 60,
+		totalSeconds: i,
+		isExpired: i <= 0,
+		isUrgent: i > 0 && i <= t
+	};
+}
+function y({ value: t, label: n, size: r, isUrgent: i, isPaused: a }) {
+	let o = {
+		compact: {
+			container: "min-w-[40px]",
+			value: "text-lg font-bold",
+			label: "text-[10px]"
+		},
+		default: {
+			container: "min-w-[60px]",
+			value: "text-3xl font-bold",
+			label: "text-xs"
+		},
+		large: {
+			container: "min-w-[80px]",
+			value: "text-5xl font-bold",
+			label: "text-sm"
+		}
+	}[r];
+	return /* @__PURE__ */ g("div", {
+		className: e("flex flex-col items-center rounded-lg bg-muted/50 p-2", o.container, i && "bg-red-500/10", a && "opacity-50"),
+		children: [/* @__PURE__ */ h("span", {
+			className: e("tabular-nums transition-all", o.value, i && "text-red-500 animate-urgent-pulse", a && "text-muted-foreground"),
+			children: String(t).padStart(2, "0")
+		}), /* @__PURE__ */ h("span", {
+			className: e("text-muted-foreground uppercase tracking-wider", o.label),
+			children: n
+		})]
+	});
+}
+function b({ size: t, isUrgent: n }) {
+	return /* @__PURE__ */ h("span", {
+		className: e("font-bold text-muted-foreground", {
+			compact: "text-lg",
+			default: "text-2xl",
+			large: "text-4xl"
+		}[t], n && "text-red-500 animate-urgent-blink"),
+		children: ":"
+	});
+}
+function x({ tasks: t, size: n, className: r }) {
+	let i = t.filter((e) => e.completed).length, a = t.length, o = a > 0 ? i / a * 100 : 0, s = n === "compact" ? "h-1" : n === "large" ? "h-2.5" : "h-2";
+	return /* @__PURE__ */ g("div", {
+		className: e("w-full", r),
+		children: [/* @__PURE__ */ h("div", {
+			className: e("overflow-hidden rounded-full bg-muted", s),
+			children: /* @__PURE__ */ h("div", {
+				className: e("h-full rounded-full transition-all duration-500 ease-out", o >= 100 ? "bg-gradient-to-r from-green-400 to-emerald-500" : "bg-gradient-to-r from-blue-500 to-purple-500"),
+				style: { width: `${o}%` }
+			})
+		}), /* @__PURE__ */ g("div", {
+			className: "mt-1 flex items-center justify-between text-xs text-muted-foreground",
+			children: [/* @__PURE__ */ g("span", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ h(d, { className: "h-3 w-3" }), "Tasks"]
+			}), /* @__PURE__ */ g("span", {
+				className: "font-medium tabular-nums",
+				children: [
+					i,
+					"/",
+					a
+				]
+			})]
+		})]
+	});
+}
+function S({ task: t, onClick: n, compact: i }) {
+	let a = t.current !== void 0 && t.target !== void 0, o = a ? Math.min(100, t.current / t.target * 100) : 0;
+	return /* @__PURE__ */ g("button", {
+		type: "button",
+		onClick: n,
+		disabled: t.completed,
+		className: e("group flex w-full items-start gap-2 rounded-lg p-2 text-left transition-all", "hover:bg-muted/50", t.completed && "opacity-60", i && "p-1.5"),
+		children: [/* @__PURE__ */ h("div", {
+			className: e("flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-all", t.completed ? "border-green-500 bg-green-500 text-white" : "border-muted-foreground/30 group-hover:border-primary/50"),
+			children: t.completed && /* @__PURE__ */ h(r, { className: "h-3 w-3" })
+		}), /* @__PURE__ */ g("div", {
+			className: "flex-1 min-w-0",
+			children: [/* @__PURE__ */ h("p", {
+				className: e("text-sm", t.completed && "line-through", i && "text-xs"),
+				children: t.text
+			}), a && !t.completed && /* @__PURE__ */ g("div", {
+				className: "mt-1 flex items-center gap-2",
+				children: [/* @__PURE__ */ h("div", {
+					className: "h-1 flex-1 overflow-hidden rounded-full bg-muted",
+					children: /* @__PURE__ */ h("div", {
+						className: "h-full rounded-full bg-primary transition-all duration-300",
+						style: { width: `${o}%` }
+					})
+				}), /* @__PURE__ */ g("span", {
+					className: "text-xs text-muted-foreground tabular-nums",
+					children: [
+						t.current,
+						"/",
+						t.target
+					]
+				})]
+			})]
+		})]
+	});
+}
+function C({ rewards: t, size: n, className: r }) {
+	let i = {
+		xp: /* @__PURE__ */ h(p, { className: "h-3.5 w-3.5 text-yellow-500" }),
+		badge: /* @__PURE__ */ h(u, { className: "h-3.5 w-3.5 text-purple-500 fill-purple-500" }),
+		item: /* @__PURE__ */ h(o, { className: "h-3.5 w-3.5 text-blue-500" }),
+		currency: /* @__PURE__ */ h(l, { className: "h-3.5 w-3.5 text-amber-500" }),
+		custom: /* @__PURE__ */ h(f, { className: "h-3.5 w-3.5 text-orange-500" })
+	}, a = n === "compact";
+	return /* @__PURE__ */ g("div", {
+		className: e("flex items-center gap-2", r),
+		children: [
+			/* @__PURE__ */ h(f, { className: e("text-amber-500", a ? "h-3 w-3" : "h-4 w-4") }),
+			/* @__PURE__ */ h("span", {
+				className: e("text-muted-foreground", a ? "text-[10px]" : "text-xs"),
+				children: "Rewards:"
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "flex flex-wrap gap-1",
+				children: [t.slice(0, a ? 2 : 4).map((t, n) => /* @__PURE__ */ g("div", {
+					className: e("flex items-center gap-1 rounded-full bg-muted px-2 py-0.5", a && "px-1.5"),
+					children: [t.icon || i[t.type], /* @__PURE__ */ h("span", {
+						className: e("font-medium", a ? "text-[10px]" : "text-xs"),
+						children: typeof t.value == "number" ? `+${t.value}` : t.value
+					})]
+				}, n)), t.length > (a ? 2 : 4) && /* @__PURE__ */ g("span", {
+					className: e("text-muted-foreground", a ? "text-[10px]" : "text-xs"),
+					children: [
+						"+",
+						t.length - (a ? 2 : 4),
+						" more"
+					]
+				})]
+			})
+		]
+	});
+}
+function w({ isPaused: t, onToggle: n, size: r, disabled: i }) {
+	let a = {
+		compact: "h-8 w-8",
+		default: "h-10 w-10",
+		large: "h-12 w-12"
+	}, o = {
+		compact: "h-4 w-4",
+		default: "h-5 w-5",
+		large: "h-6 w-6"
+	};
+	return /* @__PURE__ */ h("button", {
+		type: "button",
+		onClick: n,
+		disabled: i,
+		className: e("flex items-center justify-center rounded-full transition-all", "bg-primary text-primary-foreground", "hover:bg-primary/90 active:scale-95", "disabled:opacity-50 disabled:cursor-not-allowed", a[r]),
+		"aria-label": t ? "Start timer" : "Pause timer",
+		children: t ? /* @__PURE__ */ h(c, { className: e(o[r], "ml-0.5") }) : /* @__PURE__ */ h(s, { className: o[r] })
+	});
+}
+function T() {
+	return /* @__PURE__ */ h("style", { children: "\n      @keyframes urgent-pulse {\n        0%, 100% { transform: scale(1); opacity: 1; }\n        50% { transform: scale(1.02); opacity: 0.9; }\n      }\n      @keyframes urgent-blink {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.3; }\n      }\n      @keyframes urgent-shake {\n        0%, 100% { transform: translateX(0); }\n        10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }\n        20%, 40%, 60%, 80% { transform: translateX(2px); }\n      }\n      @keyframes urgent-glow {\n        0%, 100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.3); }\n        50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6); }\n      }\n      @keyframes flame-flicker {\n        0%, 100% { transform: scaleY(1) rotate(-2deg); }\n        50% { transform: scaleY(1.1) rotate(2deg); }\n      }\n      .animate-urgent-pulse {\n        animation: urgent-pulse 1s ease-in-out infinite;\n      }\n      .animate-urgent-blink {\n        animation: urgent-blink 1s ease-in-out infinite;\n      }\n      .animate-urgent-shake {\n        animation: urgent-shake 0.5s ease-in-out;\n      }\n      .animate-urgent-glow {\n        animation: urgent-glow 1.5s ease-in-out infinite;\n      }\n      .animate-flame-flicker {\n        animation: flame-flicker 0.3s ease-in-out infinite;\n      }\n    " });
+}
+function E({ category: t, size: n }) {
+	if (!t) return null;
+	let { label: r, color: i, bg: a } = {
+		daily: {
+			label: "Daily",
+			color: "text-blue-500",
+			bg: "bg-blue-500/10"
+		},
+		weekly: {
+			label: "Weekly",
+			color: "text-purple-500",
+			bg: "bg-purple-500/10"
+		},
+		event: {
+			label: "Event",
+			color: "text-orange-500",
+			bg: "bg-orange-500/10"
+		},
+		personal: {
+			label: "Personal",
+			color: "text-green-500",
+			bg: "bg-green-500/10"
+		},
+		competition: {
+			label: "Competition",
+			color: "text-red-500",
+			bg: "bg-red-500/10"
+		}
+	}[t];
+	return /* @__PURE__ */ h("span", {
+		className: e("rounded-full font-medium", a, i, n === "compact" ? "px-1.5 py-0.5 text-[10px]" : "px-2 py-1 text-xs"),
+		children: r
+	});
+}
+function D({ challenge: t, size: r = "default", onComplete: s, onUrgent: c, onPause: v, onStart: D, onTaskClick: O, isPaused: k = !1, urgentThreshold: A = 3600, className: j }) {
+	let M = _({
+		endTime: t.endTime,
+		isPaused: k,
+		urgentThreshold: A,
+		onComplete: () => s?.(t.id),
+		onUrgent: () => c?.(t.id)
+	}), N = t.tasks && t.tasks.length > 0, P = t.rewards && t.rewards.length > 0, F = t.isPersonal, I = () => {
+		k ? D?.(t.id) : v?.(t.id);
+	}, L = (e) => {
+		O?.(t.id, e);
+	};
+	return r === "compact" ? /* @__PURE__ */ g("div", {
+		className: e("relative overflow-hidden rounded-lg border bg-card p-3 transition-all", M.isUrgent && "border-red-500/50 animate-urgent-glow", M.isExpired && "opacity-60", j),
+		children: [
+			/* @__PURE__ */ h(T, {}),
+			/* @__PURE__ */ g("div", {
+				className: "flex items-center gap-3",
+				children: [
+					/* @__PURE__ */ h("div", {
+						className: e("flex h-10 w-10 shrink-0 items-center justify-center rounded-lg", M.isUrgent ? "bg-red-500/10" : "bg-primary/10"),
+						children: M.isUrgent ? /* @__PURE__ */ h(a, { className: "h-5 w-5 text-red-500 animate-flame-flicker" }) : /* @__PURE__ */ h(i, { className: "h-5 w-5 text-primary" })
+					}),
+					/* @__PURE__ */ g("div", {
+						className: "flex-1 min-w-0",
+						children: [/* @__PURE__ */ g("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ h("h3", {
+								className: "text-sm font-semibold truncate",
+								children: t.name
+							}), /* @__PURE__ */ h(E, {
+								category: t.category,
+								size: r
+							})]
+						}), /* @__PURE__ */ g("div", {
+							className: "mt-1 flex items-center gap-1",
+							children: [M.isExpired ? /* @__PURE__ */ h("span", {
+								className: "text-sm font-medium text-red-500",
+								children: "Expired"
+							}) : /* @__PURE__ */ g(m, { children: [
+								M.days > 0 && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ g("span", {
+									className: e("text-sm font-bold tabular-nums", M.isUrgent && "text-red-500"),
+									children: [M.days, "d"]
+								}), /* @__PURE__ */ h("span", {
+									className: "text-muted-foreground",
+									children: ":"
+								})] }),
+								/* @__PURE__ */ h("span", {
+									className: e("text-sm font-bold tabular-nums", M.isUrgent && "text-red-500"),
+									children: String(M.hours).padStart(2, "0")
+								}),
+								/* @__PURE__ */ h("span", {
+									className: e("text-muted-foreground", M.isUrgent && "text-red-500 animate-urgent-blink"),
+									children: ":"
+								}),
+								/* @__PURE__ */ h("span", {
+									className: e("text-sm font-bold tabular-nums", M.isUrgent && "text-red-500"),
+									children: String(M.minutes).padStart(2, "0")
+								}),
+								/* @__PURE__ */ h("span", {
+									className: e("text-muted-foreground", M.isUrgent && "text-red-500 animate-urgent-blink"),
+									children: ":"
+								}),
+								/* @__PURE__ */ h("span", {
+									className: e("text-sm font-bold tabular-nums", M.isUrgent && "text-red-500"),
+									children: String(M.seconds).padStart(2, "0")
+								})
+							] }), k && /* @__PURE__ */ h("span", {
+								className: "ml-2 text-[10px] font-medium text-amber-500 uppercase",
+								children: "Paused"
+							})]
+						})]
+					}),
+					F && !M.isExpired && /* @__PURE__ */ h(w, {
+						isPaused: k,
+						onToggle: I,
+						size: r
+					})
+				]
+			}),
+			N && /* @__PURE__ */ h(x, {
+				tasks: t.tasks,
+				size: r,
+				className: "mt-2"
+			})
+		]
+	}) : r === "large" ? /* @__PURE__ */ g("div", {
+		className: e("relative overflow-hidden rounded-2xl border bg-card shadow-lg transition-all", M.isUrgent && "border-red-500/50 animate-urgent-glow", M.isExpired && "opacity-70", j),
+		children: [
+			/* @__PURE__ */ h(T, {}),
+			/* @__PURE__ */ g("div", {
+				className: "border-b p-6",
+				children: [/* @__PURE__ */ g("div", {
+					className: "flex items-start justify-between",
+					children: [/* @__PURE__ */ h("div", {
+						className: "flex-1",
+						children: /* @__PURE__ */ g("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ h("div", {
+								className: e("flex h-12 w-12 items-center justify-center rounded-xl", M.isUrgent ? "bg-red-500/10" : "bg-primary/10"),
+								children: M.isUrgent ? /* @__PURE__ */ h(a, { className: "h-7 w-7 text-red-500 animate-flame-flicker" }) : /* @__PURE__ */ h(i, { className: "h-7 w-7 text-primary" })
+							}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ h("h2", {
+									className: "text-2xl font-bold",
+									children: t.name
+								}), /* @__PURE__ */ h(E, {
+									category: t.category,
+									size: r
+								})]
+							}), t.description && /* @__PURE__ */ h("p", {
+								className: "mt-1 text-muted-foreground",
+								children: t.description
+							})] })]
+						})
+					}), F && !M.isExpired && /* @__PURE__ */ h(w, {
+						isPaused: k,
+						onToggle: I,
+						size: r
+					})]
+				}), k && /* @__PURE__ */ g("div", {
+					className: "mt-4 flex items-center gap-2 rounded-lg bg-amber-500/10 px-4 py-2 text-amber-600",
+					children: [/* @__PURE__ */ h(n, { className: "h-5 w-5" }), /* @__PURE__ */ h("span", {
+						className: "font-medium",
+						children: "Timer Paused"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "p-6",
+				children: M.isExpired ? /* @__PURE__ */ g("div", {
+					className: "flex flex-col items-center justify-center py-8",
+					children: [/* @__PURE__ */ h(n, { className: "h-16 w-16 text-red-500" }), /* @__PURE__ */ h("span", {
+						className: "mt-4 text-2xl font-bold text-red-500",
+						children: "Challenge Expired"
+					})]
+				}) : /* @__PURE__ */ g("div", {
+					className: "flex items-center justify-center gap-3",
+					children: [
+						M.days > 0 && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(y, {
+							value: M.days,
+							label: "Days",
+							size: r,
+							isUrgent: M.isUrgent,
+							isPaused: k
+						}), /* @__PURE__ */ h(b, {
+							size: r,
+							isUrgent: M.isUrgent
+						})] }),
+						/* @__PURE__ */ h(y, {
+							value: M.hours,
+							label: "Hours",
+							size: r,
+							isUrgent: M.isUrgent,
+							isPaused: k
+						}),
+						/* @__PURE__ */ h(b, {
+							size: r,
+							isUrgent: M.isUrgent
+						}),
+						/* @__PURE__ */ h(y, {
+							value: M.minutes,
+							label: "Minutes",
+							size: r,
+							isUrgent: M.isUrgent,
+							isPaused: k
+						}),
+						/* @__PURE__ */ h(b, {
+							size: r,
+							isUrgent: M.isUrgent
+						}),
+						/* @__PURE__ */ h(y, {
+							value: M.seconds,
+							label: "Seconds",
+							size: r,
+							isUrgent: M.isUrgent,
+							isPaused: k
+						})
+					]
+				})
+			}),
+			N && /* @__PURE__ */ g("div", {
+				className: "border-t p-6",
+				children: [
+					/* @__PURE__ */ g("h3", {
+						className: "mb-3 flex items-center gap-2 font-semibold",
+						children: [/* @__PURE__ */ h(d, { className: "h-5 w-5 text-muted-foreground" }), "Challenge Tasks"]
+					}),
+					/* @__PURE__ */ h(x, {
+						tasks: t.tasks,
+						size: r,
+						className: "mb-4"
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "space-y-1",
+						children: t.tasks.map((e) => /* @__PURE__ */ h(S, {
+							task: e,
+							onClick: () => L(e.id)
+						}, e.id))
+					})
+				]
+			}),
+			P && /* @__PURE__ */ g("div", {
+				className: "border-t bg-gradient-to-r from-amber-500/5 via-orange-500/5 to-red-500/5 p-6",
+				children: [/* @__PURE__ */ g("h3", {
+					className: "mb-3 flex items-center gap-2 font-semibold",
+					children: [/* @__PURE__ */ h(f, { className: "h-5 w-5 text-amber-500" }), "Completion Rewards"]
+				}), /* @__PURE__ */ h("div", {
+					className: "flex flex-wrap gap-3",
+					children: t.rewards.map((e, t) => {
+						let n = {
+							xp: /* @__PURE__ */ h(p, { className: "h-5 w-5 text-yellow-500" }),
+							badge: /* @__PURE__ */ h(u, { className: "h-5 w-5 text-purple-500 fill-purple-500" }),
+							item: /* @__PURE__ */ h(o, { className: "h-5 w-5 text-blue-500" }),
+							currency: /* @__PURE__ */ h(l, { className: "h-5 w-5 text-amber-500" }),
+							custom: /* @__PURE__ */ h(f, { className: "h-5 w-5 text-orange-500" })
+						};
+						return /* @__PURE__ */ g("div", {
+							className: "flex items-center gap-2 rounded-lg bg-background/80 px-4 py-2 shadow-sm",
+							children: [e.icon || n[e.type], /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("span", {
+								className: "text-lg font-bold",
+								children: typeof e.value == "number" ? `+${e.value}` : e.value
+							}), /* @__PURE__ */ h("span", {
+								className: "ml-1 text-sm text-muted-foreground",
+								children: e.label
+							})] })]
+						}, t);
+					})
+				})]
+			})
+		]
+	}) : /* @__PURE__ */ g("div", {
+		className: e("relative overflow-hidden rounded-xl border bg-card shadow-sm transition-all", M.isUrgent && "border-red-500/50 animate-urgent-glow", M.isExpired && "opacity-70", j),
+		children: [
+			/* @__PURE__ */ h(T, {}),
+			/* @__PURE__ */ g("div", {
+				className: "border-b p-4",
+				children: [/* @__PURE__ */ g("div", {
+					className: "flex items-start justify-between",
+					children: [/* @__PURE__ */ g("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ h("div", {
+							className: e("flex h-10 w-10 items-center justify-center rounded-lg", M.isUrgent ? "bg-red-500/10" : "bg-primary/10"),
+							children: M.isUrgent ? /* @__PURE__ */ h(a, { className: "h-5 w-5 text-red-500 animate-flame-flicker" }) : /* @__PURE__ */ h(i, { className: "h-5 w-5 text-primary" })
+						}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ h("h3", {
+								className: "font-semibold",
+								children: t.name
+							}), /* @__PURE__ */ h(E, {
+								category: t.category,
+								size: r
+							})]
+						}), t.description && /* @__PURE__ */ h("p", {
+							className: "mt-0.5 text-sm text-muted-foreground line-clamp-1",
+							children: t.description
+						})] })]
+					}), F && !M.isExpired && /* @__PURE__ */ h(w, {
+						isPaused: k,
+						onToggle: I,
+						size: r
+					})]
+				}), k && /* @__PURE__ */ g("div", {
+					className: "mt-3 flex items-center gap-2 rounded-lg bg-amber-500/10 px-3 py-1.5 text-amber-600",
+					children: [/* @__PURE__ */ h(n, { className: "h-4 w-4" }), /* @__PURE__ */ h("span", {
+						className: "text-sm font-medium",
+						children: "Timer Paused"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "p-4",
+				children: M.isExpired ? /* @__PURE__ */ g("div", {
+					className: "flex flex-col items-center justify-center py-4",
+					children: [/* @__PURE__ */ h(n, { className: "h-10 w-10 text-red-500" }), /* @__PURE__ */ h("span", {
+						className: "mt-2 text-lg font-bold text-red-500",
+						children: "Challenge Expired"
+					})]
+				}) : /* @__PURE__ */ g("div", {
+					className: "flex items-center justify-center gap-2",
+					children: [
+						M.days > 0 && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(y, {
+							value: M.days,
+							label: "Days",
+							size: r,
+							isUrgent: M.isUrgent,
+							isPaused: k
+						}), /* @__PURE__ */ h(b, {
+							size: r,
+							isUrgent: M.isUrgent
+						})] }),
+						/* @__PURE__ */ h(y, {
+							value: M.hours,
+							label: "Hours",
+							size: r,
+							isUrgent: M.isUrgent,
+							isPaused: k
+						}),
+						/* @__PURE__ */ h(b, {
+							size: r,
+							isUrgent: M.isUrgent
+						}),
+						/* @__PURE__ */ h(y, {
+							value: M.minutes,
+							label: "Mins",
+							size: r,
+							isUrgent: M.isUrgent,
+							isPaused: k
+						}),
+						/* @__PURE__ */ h(b, {
+							size: r,
+							isUrgent: M.isUrgent
+						}),
+						/* @__PURE__ */ h(y, {
+							value: M.seconds,
+							label: "Secs",
+							size: r,
+							isUrgent: M.isUrgent,
+							isPaused: k
+						})
+					]
+				})
+			}),
+			N && /* @__PURE__ */ g("div", {
+				className: "border-t p-4",
+				children: [/* @__PURE__ */ h(x, {
+					tasks: t.tasks,
+					size: r
+				}), /* @__PURE__ */ h("div", {
+					className: "mt-3 space-y-1 max-h-[150px] overflow-y-auto",
+					children: t.tasks.map((e) => /* @__PURE__ */ h(S, {
+						task: e,
+						onClick: () => L(e.id),
+						compact: !0
+					}, e.id))
+				})]
+			}),
+			P && /* @__PURE__ */ h("div", {
+				className: "border-t bg-muted/30 p-4",
+				children: /* @__PURE__ */ h(C, {
+					rewards: t.rewards,
+					size: r
+				})
+			})
+		]
+	});
+}
+function O({ size: e = "default" }) {
+	return e === "compact" ? /* @__PURE__ */ h("div", {
+		className: "rounded-lg border bg-card p-3 animate-pulse",
+		children: /* @__PURE__ */ g("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ h("div", { className: "h-10 w-10 rounded-lg bg-muted" }), /* @__PURE__ */ g("div", {
+				className: "flex-1",
+				children: [/* @__PURE__ */ h("div", { className: "h-4 w-32 rounded bg-muted" }), /* @__PURE__ */ h("div", { className: "mt-2 h-3 w-24 rounded bg-muted" })]
+			})]
+		})
+	}) : e === "large" ? /* @__PURE__ */ g("div", {
+		className: "rounded-2xl border bg-card animate-pulse",
+		children: [/* @__PURE__ */ h("div", {
+			className: "border-b p-6",
+			children: /* @__PURE__ */ g("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ h("div", { className: "h-12 w-12 rounded-xl bg-muted" }), /* @__PURE__ */ g("div", {
+					className: "flex-1",
+					children: [/* @__PURE__ */ h("div", { className: "h-6 w-48 rounded bg-muted" }), /* @__PURE__ */ h("div", { className: "mt-2 h-4 w-64 rounded bg-muted" })]
+				})]
+			})
+		}), /* @__PURE__ */ h("div", {
+			className: "flex justify-center gap-3 p-6",
+			children: [...[
+				,
+				,
+				,
+				,
+			]].map((e, t) => /* @__PURE__ */ h("div", { className: "h-24 w-20 rounded-lg bg-muted" }, t))
+		})]
+	}) : /* @__PURE__ */ g("div", {
+		className: "rounded-xl border bg-card animate-pulse",
+		children: [/* @__PURE__ */ h("div", {
+			className: "border-b p-4",
+			children: /* @__PURE__ */ g("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ h("div", { className: "h-10 w-10 rounded-lg bg-muted" }), /* @__PURE__ */ g("div", {
+					className: "flex-1",
+					children: [/* @__PURE__ */ h("div", { className: "h-5 w-40 rounded bg-muted" }), /* @__PURE__ */ h("div", { className: "mt-1 h-3 w-56 rounded bg-muted" })]
+				})]
+			})
+		}), /* @__PURE__ */ h("div", {
+			className: "flex justify-center gap-2 p-4",
+			children: [...[
+				,
+				,
+				,
+				,
+			]].map((e, t) => /* @__PURE__ */ h("div", { className: "h-16 w-14 rounded-lg bg-muted" }, t))
+		})]
+	});
+}
+//#endregion
+export { D as WakaChallengeTimer, O as WakaChallengeTimerSkeleton, _ as useChallengeTimer };

package/dist/components/waka-charts/WakaAreaChart.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`./hooks/useChartTheme.cjs.js`),n=require(`./WakaChart.cjs.js`);let r=require(`react`);r=e.__toESM(r);let i=require(`react/jsx-runtime`);var a=r.forwardRef(({data:e,dataKeys:a,series:o,variant:s=`default`,size:c=`md`,height:l,width:u,animation:d=!0,animationDuration:f=500,grid:p=!0,tooltip:m=!0,legend:h,axis:g,theme:_,className:v,style:y,title:b,description:x,loading:S,error:C,onClick:w,responsive:T=!0,curve:E=`monotone`,dots:D=!1,dotSize:O=4,activeDot:k=!0,strokeWidth:A=2,stacked:j=!1,fillOpacity:M=.3,gradientDirection:N=`vertical`},P)=>{let{theme:F,getColor:I,tooltipStyles:L}=t.default(_,s),R=r.useMemo(()=>{if(o&&o.length>0)return o;if(a&&a.length>0)return a.map((e,t)=>({dataKey:e,label:e,color:I(t),strokeWidth:A,fillOpacity:M}));if(e.length>0&&`value`in e[0])return[{dataKey:`value`,label:`Value`,color:I(0),strokeWidth:A,fillOpacity:M}];let t=e[0];return t?Object.keys(t).filter(e=>e!==`name`&&typeof t[e]==`number`).map((e,t)=>({dataKey:e,label:e,color:I(t),strokeWidth:A,fillOpacity:M})):[]},[o,a,e,I,A,M]),z=r.useMemo(()=>h?typeof h==`boolean`?{enabled:h,position:`bottom`,align:`center`}:h:null,[h]),B=r.useMemo(()=>m?typeof m==`boolean`?{enabled:m}:m:null,[m]);return(0,i.jsx)(n.default,{ref:P,variant:s,size:c,height:l,width:u,theme:_,className:v,style:y,title:b,description:x,loading:S,error:C,responsive:T,children:t=>{if(!t)return null;let{AreaChart:n,Area:r,XAxis:a,YAxis:o,CartesianGrid:s,Tooltip:c,Legend:l}=t;return(0,i.jsxs)(n,{data:e,children:[(0,i.jsx)(`defs`,{children:R.map((e,t)=>{let n=e.color||I(t),r=`gradient-${e.dataKey}-${t}`;return(0,i.jsxs)(`linearGradient`,{id:r,x1:`0`,y1:`0`,x2:N===`horizontal`?`1`:`0`,y2:N===`horizontal`?`0`:`1`,children:[(0,i.jsx)(`stop`,{offset:`5%`,stopColor:n,stopOpacity:.8}),(0,i.jsx)(`stop`,{offset:`95%`,stopColor:n,stopOpacity:.1})]},r)})}),p&&(0,i.jsx)(s,{strokeDasharray:`3 3`,stroke:F.gridColor,horizontal:!0,vertical:!1}),g?.showXAxis!==!1&&(0,i.jsx)(a,{dataKey:`name`,axisLine:{stroke:F.axisColor},tickLine:{stroke:F.axisColor},tick:{fill:F.textColor,fontSize:12},tickFormatter:g?.xAxisFormatter}),g?.showYAxis!==!1&&(0,i.jsx)(o,{axisLine:{stroke:F.axisColor},tickLine:{stroke:F.axisColor},tick:{fill:F.textColor,fontSize:12},tickFormatter:g?.yAxisFormatter,domain:g?.yAxisDomain,unit:g?.yAxisUnit}),B?.enabled!==!1&&m&&(0,i.jsx)(c,{...L,formatter:B&&typeof B!=`boolean`&&B.formatter?(t,n)=>B.formatter(t,n,e[0]):e=>`${B&&typeof B!=`boolean`&&B.valuePrefix||``}${e}${B&&typeof B!=`boolean`&&B.valueSuffix||``}`}),z?.enabled&&(0,i.jsx)(l,{align:z.align,verticalAlign:z.position===`top`?`top`:`bottom`,wrapperStyle:{paddingTop:z.position===`bottom`?16:0}}),R.map((e,t)=>{let n=e.color||I(t),a=`gradient-${e.dataKey}-${t}`;return(0,i.jsx)(r,{dataKey:e.dataKey,name:e.label,stroke:n,strokeWidth:e.strokeWidth||A,fill:`url(#${a})`,fillOpacity:e.fillOpacity??M,type:E,dot:D?{r:O,fill:n}:!1,stackId:j?`stack`:void 0,animationDuration:f,isAnimationActive:d},e.dataKey)})]})}})});a.displayName=`WakaAreaChart`,exports.default=a;