@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-compare-period/index.es.js

@@ -0,0 +1,682 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { ArrowRight as n, BarChart3 as r, Calendar as i, Check as a, ChevronDown as o, Minus as s, TrendingDown as c, TrendingUp as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/waka-compare-period/index.tsx
+var f = {
+	default: {
+		bar: "bg-primary",
+		barBg: "bg-primary/20",
+		text: "text-primary",
+		icon: "text-primary"
+	},
+	blue: {
+		bar: "bg-blue-500",
+		barBg: "bg-blue-500/20",
+		text: "text-blue-600",
+		icon: "text-blue-500"
+	},
+	green: {
+		bar: "bg-green-500",
+		barBg: "bg-green-500/20",
+		text: "text-green-600",
+		icon: "text-green-500"
+	},
+	purple: {
+		bar: "bg-purple-500",
+		barBg: "bg-purple-500/20",
+		text: "text-purple-600",
+		icon: "text-purple-500"
+	},
+	orange: {
+		bar: "bg-orange-500",
+		barBg: "bg-orange-500/20",
+		text: "text-orange-600",
+		icon: "text-orange-500"
+	},
+	red: {
+		bar: "bg-red-500",
+		barBg: "bg-red-500/20",
+		text: "text-red-600",
+		icon: "text-red-500"
+	}
+}, p = {
+	last_week: {
+		label: "vs Last Week",
+		shortLabel: "Week"
+	},
+	last_month: {
+		label: "vs Last Month",
+		shortLabel: "Month"
+	},
+	last_quarter: {
+		label: "vs Last Quarter",
+		shortLabel: "Quarter"
+	},
+	last_year: {
+		label: "vs Last Year",
+		shortLabel: "Year"
+	},
+	custom: {
+		label: "Custom Range",
+		shortLabel: "Custom"
+	}
+};
+function m(e, t) {
+	if (t === 0) return {
+		percentage: e > 0 ? 100 : 0,
+		absolute: e,
+		direction: e > 0 ? "up" : e < 0 ? "down" : "neutral"
+	};
+	let n = e - t, r = (e - t) / Math.abs(t) * 100, i = "neutral";
+	return r > .01 ? i = "up" : r < -.01 && (i = "down"), {
+		percentage: r,
+		absolute: n,
+		direction: i
+	};
+}
+function h(e) {
+	return `${e >= 0 ? "+" : ""}${e.toFixed(1)}%`;
+}
+function g(e, t, n) {
+	let r = e >= 0 ? "+" : "", i = t ? t(Math.abs(e)) : Math.abs(e).toLocaleString();
+	return `${r}${e < 0 ? "-" : ""}${i}${n || ""}`;
+}
+function _(e) {
+	return e.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric"
+	});
+}
+function v(e, t = /* @__PURE__ */ new Date()) {
+	let n = new Date(t);
+	n.setHours(23, 59, 59, 999);
+	let r, i = n, a, o;
+	switch (e) {
+		case "last_week":
+			r = new Date(n), r.setDate(n.getDate() - 6), r.setHours(0, 0, 0, 0), o = new Date(r), o.setDate(o.getDate() - 1), o.setHours(23, 59, 59, 999), a = new Date(o), a.setDate(o.getDate() - 6), a.setHours(0, 0, 0, 0);
+			break;
+		case "last_month":
+			r = new Date(n), r.setDate(n.getDate() - 29), r.setHours(0, 0, 0, 0), o = new Date(r), o.setDate(o.getDate() - 1), o.setHours(23, 59, 59, 999), a = new Date(o), a.setDate(o.getDate() - 29), a.setHours(0, 0, 0, 0);
+			break;
+		case "last_quarter":
+			r = new Date(n), r.setDate(n.getDate() - 89), r.setHours(0, 0, 0, 0), o = new Date(r), o.setDate(o.getDate() - 1), o.setHours(23, 59, 59, 999), a = new Date(o), a.setDate(o.getDate() - 89), a.setHours(0, 0, 0, 0);
+			break;
+		case "last_year":
+			r = new Date(n), r.setFullYear(n.getFullYear() - 1), r.setHours(0, 0, 0, 0), o = new Date(r), o.setDate(o.getDate() - 1), o.setHours(23, 59, 59, 999), a = new Date(o), a.setFullYear(o.getFullYear() - 1), a.setHours(0, 0, 0, 0);
+			break;
+		default: r = new Date(n), r.setDate(n.getDate() - 6), r.setHours(0, 0, 0, 0), o = new Date(r), o.setDate(o.getDate() - 1), o.setHours(23, 59, 59, 999), a = new Date(o), a.setDate(o.getDate() - 6), a.setHours(0, 0, 0, 0);
+	}
+	return {
+		current: {
+			start: r,
+			end: i,
+			label: `${_(r)} - ${_(i)}`
+		},
+		previous: {
+			start: a,
+			end: o,
+			label: `${_(a)} - ${_(o)}`
+		}
+	};
+}
+function y({ direction: t, invert: n = !1, size: r = "md", animated: i = !0 }) {
+	let a = n ? t === "down" : t === "up", o = n ? t === "up" : t === "down", f = {
+		sm: "h-3 w-3",
+		md: "h-4 w-4",
+		lg: "h-5 w-5"
+	}, p = t === "up" ? l : t === "down" ? c : s;
+	return /* @__PURE__ */ d("div", {
+		className: e("flex items-center justify-center transition-transform duration-300", a && "text-green-600", o && "text-red-600", t === "neutral" && "text-muted-foreground", i && t === "up" && "animate-trend-up", i && t === "down" && "animate-trend-down"),
+		children: [/* @__PURE__ */ u(p, { className: f[r] }), /* @__PURE__ */ u("style", { children: "\n        @keyframes trend-up {\n          0%, 100% { transform: translateY(0); }\n          50% { transform: translateY(-2px); }\n        }\n        @keyframes trend-down {\n          0%, 100% { transform: translateY(0); }\n          50% { transform: translateY(2px); }\n        }\n        .animate-trend-up {\n          animation: trend-up 2s ease-in-out infinite;\n        }\n        .animate-trend-down {\n          animation: trend-down 2s ease-in-out infinite;\n        }\n      " })]
+	});
+}
+function b({ value: n, format: r, unit: i, className: a, animated: o = !0 }) {
+	let [s, c] = t.useState(n), l = t.useRef(n);
+	t.useEffect(() => {
+		if (!o || n === l.current) {
+			c(n), l.current = n;
+			return;
+		}
+		let e = l.current, t = n, r = performance.now(), i = (n) => {
+			let a = n - r, o = Math.min(a / 500, 1), s = 1 - (1 - o) ** 3;
+			c(e + (t - e) * s), o < 1 && requestAnimationFrame(i);
+		};
+		requestAnimationFrame(i), l.current = n;
+	}, [n, o]);
+	let f = r ? r(s) : Number.isInteger(s) ? s.toLocaleString() : s.toLocaleString(void 0, { maximumFractionDigits: 2 });
+	return /* @__PURE__ */ d("span", {
+		className: e("tabular-nums", a),
+		children: [f, i && /* @__PURE__ */ u("span", {
+			className: "text-muted-foreground ml-0.5",
+			children: i
+		})]
+	});
+}
+function x({ current: n, previous: r, color: i = "default", animated: a = !0 }) {
+	let [o, s] = t.useState(!a), c = Math.max(n, r, 1), l = n / c * 100, p = r / c * 100;
+	t.useEffect(() => {
+		if (a) {
+			let e = setTimeout(() => s(!0), 100);
+			return () => clearTimeout(e);
+		}
+	}, [a]);
+	let m = f[i];
+	return /* @__PURE__ */ d("div", {
+		className: "space-y-1.5",
+		children: [/* @__PURE__ */ d("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ u("span", {
+				className: "text-[10px] text-muted-foreground w-12",
+				children: "Current"
+			}), /* @__PURE__ */ u("div", {
+				className: "flex-1 h-2 rounded-full bg-muted overflow-hidden",
+				children: /* @__PURE__ */ u("div", {
+					className: e("h-full rounded-full transition-all duration-700 ease-out", m.bar),
+					style: { width: o ? `${l}%` : "0%" }
+				})
+			})]
+		}), /* @__PURE__ */ d("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ u("span", {
+				className: "text-[10px] text-muted-foreground w-12",
+				children: "Previous"
+			}), /* @__PURE__ */ u("div", {
+				className: "flex-1 h-2 rounded-full bg-muted overflow-hidden",
+				children: /* @__PURE__ */ u("div", {
+					className: e("h-full rounded-full transition-all duration-700 ease-out opacity-50", m.bar),
+					style: { width: o ? `${p}%` : "0%" }
+				})
+			})]
+		})]
+	});
+}
+function S({ selectedPreset: r, onSelect: s, currentPeriod: c, previousPeriod: l, className: f }) {
+	let [m, h] = t.useState(!1), g = t.useRef(null);
+	return t.useEffect(() => {
+		function e(e) {
+			g.current && !g.current.contains(e.target) && h(!1);
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []), /* @__PURE__ */ d("div", {
+		ref: g,
+		className: e("relative", f),
+		children: [/* @__PURE__ */ d("button", {
+			type: "button",
+			onClick: () => h(!m),
+			className: e("flex items-center gap-2 px-3 py-2 rounded-lg border bg-card", "text-sm font-medium transition-colors", "hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary/20", m && "ring-2 ring-primary/20"),
+			children: [
+				/* @__PURE__ */ u(i, { className: "h-4 w-4 text-muted-foreground" }),
+				/* @__PURE__ */ u("span", { children: p[r].label }),
+				/* @__PURE__ */ u(o, { className: e("h-4 w-4 text-muted-foreground transition-transform duration-200", m && "rotate-180") })
+			]
+		}), m && /* @__PURE__ */ d("div", {
+			className: e("absolute top-full right-0 mt-2 z-50 min-w-[280px]", "rounded-lg border bg-card shadow-lg", "animate-in fade-in-0 zoom-in-95 duration-100"),
+			children: [/* @__PURE__ */ u("div", {
+				className: "p-3 border-b",
+				children: /* @__PURE__ */ d("div", {
+					className: "flex items-center gap-2 text-sm",
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: "flex-1 text-center",
+							children: [/* @__PURE__ */ u("div", {
+								className: "text-[10px] uppercase text-muted-foreground mb-1",
+								children: "Current"
+							}), /* @__PURE__ */ u("div", {
+								className: "font-medium",
+								children: c.label
+							})]
+						}),
+						/* @__PURE__ */ u(n, { className: "h-4 w-4 text-muted-foreground" }),
+						/* @__PURE__ */ d("div", {
+							className: "flex-1 text-center",
+							children: [/* @__PURE__ */ u("div", {
+								className: "text-[10px] uppercase text-muted-foreground mb-1",
+								children: "Previous"
+							}), /* @__PURE__ */ u("div", {
+								className: "font-medium",
+								children: l.label
+							})]
+						})
+					]
+				})
+			}), /* @__PURE__ */ u("div", {
+				className: "p-1",
+				children: [
+					"last_week",
+					"last_month",
+					"last_quarter",
+					"last_year",
+					"custom"
+				].map((t) => /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: () => {
+						s(t), h(!1);
+					},
+					className: e("flex items-center justify-between w-full px-3 py-2 rounded-md text-sm", "transition-colors hover:bg-muted", r === t && "bg-primary/10 text-primary"),
+					children: [/* @__PURE__ */ u("span", { children: p[t].label }), r === t && /* @__PURE__ */ u(a, { className: "h-4 w-4" })]
+				}, t))
+			})]
+		})]
+	});
+}
+function C({ metric: t, showComparisonBars: n, animated: r, variant: i }) {
+	let { percentage: a, absolute: o, direction: s } = m(t.value.current, t.value.previous), c = f[t.color || "default"];
+	return i === "compact" ? /* @__PURE__ */ d("div", {
+		className: "flex items-center justify-between py-2 border-b last:border-b-0",
+		children: [/* @__PURE__ */ d("div", {
+			className: "flex items-center gap-2",
+			children: [t.icon && /* @__PURE__ */ u("div", {
+				className: e("h-4 w-4", c.icon),
+				children: t.icon
+			}), /* @__PURE__ */ u("span", {
+				className: "text-sm font-medium",
+				children: t.name
+			})]
+		}), /* @__PURE__ */ d("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ u(b, {
+				value: t.value.current,
+				format: t.format,
+				unit: t.unit,
+				animated: r,
+				className: "font-semibold"
+			}), /* @__PURE__ */ d("div", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ u(y, {
+					direction: s,
+					invert: t.invertTrend,
+					size: "sm",
+					animated: r
+				}), /* @__PURE__ */ u("span", {
+					className: e("text-xs font-medium", (t.invertTrend ? s === "down" : s === "up") && "text-green-600", (t.invertTrend ? s === "up" : s === "down") && "text-red-600", s === "neutral" && "text-muted-foreground"),
+					children: h(a)
+				})]
+			})]
+		})]
+	}) : i === "list" ? /* @__PURE__ */ d("div", {
+		className: "flex items-center gap-4 p-4 rounded-lg border bg-card",
+		children: [t.icon && /* @__PURE__ */ u("div", {
+			className: e("rounded-lg p-2", c.barBg),
+			children: /* @__PURE__ */ u("div", {
+				className: e("h-5 w-5", c.icon),
+				children: t.icon
+			})
+		}), /* @__PURE__ */ d("div", {
+			className: "flex-1 min-w-0",
+			children: [
+				/* @__PURE__ */ d("div", {
+					className: "flex items-center justify-between mb-1",
+					children: [/* @__PURE__ */ u("span", {
+						className: "font-medium truncate",
+						children: t.name
+					}), /* @__PURE__ */ d("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ u(y, {
+							direction: s,
+							invert: t.invertTrend,
+							animated: r
+						}), /* @__PURE__ */ u("span", {
+							className: e("text-sm font-semibold", (t.invertTrend ? s === "down" : s === "up") && "text-green-600", (t.invertTrend ? s === "up" : s === "down") && "text-red-600", s === "neutral" && "text-muted-foreground"),
+							children: h(a)
+						})]
+					})]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "flex items-baseline gap-3",
+					children: [/* @__PURE__ */ u(b, {
+						value: t.value.current,
+						format: t.format,
+						unit: t.unit,
+						animated: r,
+						className: "text-2xl font-bold"
+					}), /* @__PURE__ */ d("span", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							"from",
+							" ",
+							/* @__PURE__ */ u(b, {
+								value: t.value.previous,
+								format: t.format,
+								unit: t.unit,
+								animated: r,
+								className: "font-medium"
+							})
+						]
+					})]
+				}),
+				n && /* @__PURE__ */ u("div", {
+					className: "mt-3",
+					children: /* @__PURE__ */ u(x, {
+						current: t.value.current,
+						previous: t.value.previous,
+						color: t.color,
+						animated: r
+					})
+				})
+			]
+		})]
+	}) : /* @__PURE__ */ d("div", {
+		className: "p-4 rounded-lg border bg-card",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "flex items-start justify-between mb-3",
+				children: [/* @__PURE__ */ d("div", {
+					className: "flex items-center gap-2",
+					children: [t.icon && /* @__PURE__ */ u("div", {
+						className: e("rounded-lg p-1.5", c.barBg),
+						children: /* @__PURE__ */ u("div", {
+							className: e("h-4 w-4", c.icon),
+							children: t.icon
+						})
+					}), /* @__PURE__ */ u("span", {
+						className: "text-sm font-medium text-muted-foreground",
+						children: t.name
+					})]
+				}), /* @__PURE__ */ u(y, {
+					direction: s,
+					invert: t.invertTrend,
+					animated: r
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "mb-2",
+				children: /* @__PURE__ */ u(b, {
+					value: t.value.current,
+					format: t.format,
+					unit: t.unit,
+					animated: r,
+					className: "text-2xl font-bold"
+				})
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "flex items-center gap-2 text-sm",
+				children: [/* @__PURE__ */ u("span", {
+					className: e("font-semibold", (t.invertTrend ? s === "down" : s === "up") && "text-green-600", (t.invertTrend ? s === "up" : s === "down") && "text-red-600", s === "neutral" && "text-muted-foreground"),
+					children: h(a)
+				}), /* @__PURE__ */ d("span", {
+					className: "text-muted-foreground",
+					children: [
+						"(",
+						g(o, t.format, t.unit),
+						")"
+					]
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "mt-1 text-xs text-muted-foreground",
+				children: [
+					"Previous:",
+					" ",
+					/* @__PURE__ */ u(b, {
+						value: t.value.previous,
+						format: t.format,
+						unit: t.unit,
+						animated: r,
+						className: "font-medium"
+					})
+				]
+			}),
+			n && /* @__PURE__ */ u("div", {
+				className: "mt-4",
+				children: /* @__PURE__ */ u(x, {
+					current: t.value.current,
+					previous: t.value.previous,
+					color: t.color,
+					animated: r
+				})
+			})
+		]
+	});
+}
+function w({ summary: t, metrics: n, animated: i }) {
+	let a = n.find((e) => e.id === t.bestMetricId), o = n.find((e) => e.id === t.worstMetricId);
+	return /* @__PURE__ */ d("div", {
+		className: "p-4 rounded-lg border bg-card",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "flex items-center gap-2 mb-4",
+				children: [/* @__PURE__ */ u(r, { className: "h-5 w-5 text-muted-foreground" }), /* @__PURE__ */ u("span", {
+					className: "font-semibold",
+					children: "Summary"
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "grid grid-cols-3 gap-4 mb-4",
+				children: [
+					/* @__PURE__ */ d("div", {
+						className: "text-center",
+						children: [/* @__PURE__ */ d("div", {
+							className: "flex items-center justify-center gap-1 text-green-600 mb-1",
+							children: [/* @__PURE__ */ u(l, { className: "h-4 w-4" }), /* @__PURE__ */ u("span", {
+								className: "text-xl font-bold",
+								children: t.improving
+							})]
+						}), /* @__PURE__ */ u("div", {
+							className: "text-xs text-muted-foreground",
+							children: "Improving"
+						})]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "text-center",
+						children: [/* @__PURE__ */ d("div", {
+							className: "flex items-center justify-center gap-1 text-red-600 mb-1",
+							children: [/* @__PURE__ */ u(c, { className: "h-4 w-4" }), /* @__PURE__ */ u("span", {
+								className: "text-xl font-bold",
+								children: t.declining
+							})]
+						}), /* @__PURE__ */ u("div", {
+							className: "text-xs text-muted-foreground",
+							children: "Declining"
+						})]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "text-center",
+						children: [/* @__PURE__ */ d("div", {
+							className: "flex items-center justify-center gap-1 text-muted-foreground mb-1",
+							children: [/* @__PURE__ */ u(s, { className: "h-4 w-4" }), /* @__PURE__ */ u("span", {
+								className: "text-xl font-bold",
+								children: t.unchanged
+							})]
+						}), /* @__PURE__ */ u("div", {
+							className: "text-xs text-muted-foreground",
+							children: "Unchanged"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "p-3 rounded-lg bg-muted/50 mb-3",
+				children: /* @__PURE__ */ d("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ u("span", {
+						className: "text-sm text-muted-foreground",
+						children: "Average Change"
+					}), /* @__PURE__ */ u("span", {
+						className: e("font-bold", t.averageChange > 0 && "text-green-600", t.averageChange < 0 && "text-red-600"),
+						children: h(t.averageChange)
+					})]
+				})
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "space-y-2",
+				children: [a && /* @__PURE__ */ d("div", {
+					className: "flex items-center justify-between text-sm",
+					children: [/* @__PURE__ */ u("span", {
+						className: "text-muted-foreground",
+						children: "Best performer"
+					}), /* @__PURE__ */ u("span", {
+						className: "font-medium text-green-600",
+						children: a.name
+					})]
+				}), o && /* @__PURE__ */ d("div", {
+					className: "flex items-center justify-between text-sm",
+					children: [/* @__PURE__ */ u("span", {
+						className: "text-muted-foreground",
+						children: "Needs attention"
+					}), /* @__PURE__ */ u("span", {
+						className: "font-medium text-red-600",
+						children: o.name
+					})]
+				})]
+			})
+		]
+	});
+}
+function T({ metrics: r, currentPeriod: a, previousPeriod: o, periodPreset: s = "last_week", onPeriodChange: c, showPeriodSelector: l = !0, showComparisonBars: f = !0, showSummary: p = !0, animated: h = !0, variant: g = "grid", columns: _ = 3, className: y }) {
+	let [b, x] = t.useState(s), [T, E] = t.useState(a), [D, O] = t.useState(o), k = t.useMemo(() => {
+		let e = 0, t = 0, n = 0, i = 0, a = -Infinity, o = Infinity, s, c;
+		return r.forEach((r) => {
+			let { percentage: l, direction: u } = m(r.value.current, r.value.previous), d = r.invertTrend ? u === "up" ? "down" : u === "down" ? "up" : "neutral" : u;
+			d === "up" ? e++ : d === "down" ? t++ : n++, i += l;
+			let f = r.invertTrend ? -l : l;
+			f > a && (a = f, s = r.id), f < o && (o = f, c = r.id);
+		}), {
+			improving: e,
+			declining: t,
+			unchanged: n,
+			averageChange: r.length > 0 ? i / r.length : 0,
+			bestMetricId: s,
+			worstMetricId: c
+		};
+	}, [r]);
+	return /* @__PURE__ */ d("div", {
+		className: e("space-y-4", y),
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ u("div", {
+					className: "flex items-center gap-3",
+					children: /* @__PURE__ */ d("div", {
+						className: "flex items-center gap-2 text-sm text-muted-foreground",
+						children: [
+							/* @__PURE__ */ u(i, { className: "h-4 w-4" }),
+							/* @__PURE__ */ u("span", { children: T.label }),
+							/* @__PURE__ */ u(n, { className: "h-3 w-3" }),
+							/* @__PURE__ */ u("span", { children: D.label })
+						]
+					})
+				}), l && /* @__PURE__ */ u(S, {
+					selectedPreset: b,
+					onSelect: (e) => {
+						if (x(e), e !== "custom") {
+							let t = v(e);
+							E(t.current), O(t.previous), c?.(e, t.current, t.previous);
+						} else c?.(e, T, D);
+					},
+					currentPeriod: T,
+					previousPeriod: D
+				})]
+			}),
+			g === "compact" ? /* @__PURE__ */ u("div", {
+				className: "rounded-lg border bg-card p-4",
+				children: r.map((e) => /* @__PURE__ */ u(C, {
+					metric: e,
+					showComparisonBars: !1,
+					animated: h,
+					variant: "compact"
+				}, e.id))
+			}) : g === "list" ? /* @__PURE__ */ u("div", {
+				className: "space-y-3",
+				children: r.map((e) => /* @__PURE__ */ u(C, {
+					metric: e,
+					showComparisonBars: f,
+					animated: h,
+					variant: "list"
+				}, e.id))
+			}) : /* @__PURE__ */ u("div", {
+				className: e("grid gap-4", {
+					2: "grid-cols-2",
+					3: "grid-cols-3",
+					4: "grid-cols-4"
+				}[_]),
+				children: r.map((e) => /* @__PURE__ */ u(C, {
+					metric: e,
+					showComparisonBars: f,
+					animated: h,
+					variant: "grid"
+				}, e.id))
+			}),
+			p && r.length > 0 && /* @__PURE__ */ u(w, {
+				summary: k,
+				metrics: r,
+				animated: h
+			})
+		]
+	});
+}
+function E(e = {}) {
+	let { initialPreset: n = "last_week", initialMetrics: r = [], referenceDate: i, autoRefreshInterval: a, onRefresh: o } = e, s = t.useMemo(() => i ?? /* @__PURE__ */ new Date(), [i]), [c, l] = t.useState(n), [u, d] = t.useState(r), [f, p] = t.useState(!1), [h, g] = t.useState(null), [_, y] = t.useState(() => v(n, s));
+	t.useEffect(() => {
+		c !== "custom" && y(v(c, s));
+	}, [c, s]), t.useEffect(() => {
+		if (!a || !o) return;
+		let e = setInterval(async () => {
+			try {
+				d(await o());
+			} catch (e) {
+				g(e instanceof Error ? e : /* @__PURE__ */ Error("Refresh failed"));
+			}
+		}, a);
+		return () => clearInterval(e);
+	}, [a, o]);
+	let b = t.useMemo(() => {
+		let e = 0, t = 0, n = 0, r = 0, i = -Infinity, a = Infinity, o, s;
+		return u.forEach((c) => {
+			let { percentage: l, direction: u } = m(c.value.current, c.value.previous), d = c.invertTrend ? u === "up" ? "down" : u === "down" ? "up" : "neutral" : u;
+			d === "up" ? e++ : d === "down" ? t++ : n++, r += l;
+			let f = c.invertTrend ? -l : l;
+			f > i && (i = f, o = c.id), f < a && (a = f, s = c.id);
+		}), {
+			improving: e,
+			declining: t,
+			unchanged: n,
+			averageChange: u.length > 0 ? r / u.length : 0,
+			bestMetricId: o,
+			worstMetricId: s
+		};
+	}, [u]), x = t.useCallback((e, t) => {
+		l("custom"), y({
+			current: e,
+			previous: t
+		});
+	}, []), S = t.useCallback((e, t) => {
+		d((n) => n.map((n) => n.id === e ? {
+			...n,
+			value: t
+		} : n));
+	}, []), C = t.useCallback(async () => {
+		if (o) {
+			p(!0), g(null);
+			try {
+				d(await o());
+			} catch (e) {
+				g(e instanceof Error ? e : /* @__PURE__ */ Error("Refresh failed"));
+			} finally {
+				p(!1);
+			}
+		}
+	}, [o]), w = t.useCallback((e) => {
+		let t = u.find((t) => t.id === e);
+		return t ? m(t.value.current, t.value.previous) : null;
+	}, [u]);
+	return {
+		preset: c,
+		currentPeriod: _.current,
+		previousPeriod: _.previous,
+		metrics: u,
+		summary: b,
+		isLoading: f,
+		error: h,
+		setPreset: l,
+		setCustomPeriods: x,
+		setMetrics: d,
+		updateMetric: S,
+		refresh: C,
+		getMetricChange: w
+	};
+}
+//#endregion
+export { T as default, E as useComparePeriod };

package/dist/components/waka-config-comparator/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`),n=require(`../badge/index.cjs.js`),r=require(`../button/index.cjs.js`),i=require(`../select/index.cjs.js`),a=require(`../scroll-area/index.cjs.js`);let o=require(`react`);o=e.__toESM(o);let s=require(`lucide-react`),c=require(`react/jsx-runtime`);var l={added:{icon:s.Plus,color:`text-green-500`,bgColor:`bg-green-500/10`,label:`Added`},removed:{icon:s.Minus,color:`text-red-500`,bgColor:`bg-red-500/10`,label:`Removed`},modified:{icon:s.ArrowLeftRight,color:`text-yellow-500`,bgColor:`bg-yellow-500/10`,label:`Modified`},unchanged:{icon:s.Equal,color:`text-muted-foreground`,bgColor:``,label:`Unchanged`}};function u(e){return e===null?`null`:e===void 0?`undefined`:typeof e==`boolean`?e?`true`:`false`:typeof e==`string`?`"${e}"`:String(e)}function d({diff:e,leftEnvName:n,rightEnvName:i,onCopyLeft:a,onCopyRight:d}){let[f,p]=o.useState(!1),[m,h]=o.useState(!1),g=l[e.diffType],_=g.icon;return(0,c.jsxs)(`div`,{className:t.cn(`grid grid-cols-[minmax(150px,1fr)_minmax(200px,2fr)_minmax(200px,2fr)] gap-2 p-2 border-b items-center`,g.bgColor),children:[(0,c.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,c.jsx)(_,{className:t.cn(`h-4 w-4 shrink-0`,g.color)}),(0,c.jsx)(`span`,{className:`font-mono text-sm truncate`,children:e.key})]}),(0,c.jsx)(`div`,{className:`flex items-center gap-2`,children:e.leftValue===void 0?(0,c.jsx)(`span`,{className:`text-xs text-muted-foreground italic`,children:`Not set`}):(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`code`,{className:t.cn(`flex-1 text-xs bg-muted px-2 py-1 rounded truncate`,e.diffType===`removed`&&`line-through opacity-50`),children:u(e.leftValue)}),e.diffType!==`unchanged`&&d&&(0,c.jsx)(r.Button,{variant:`ghost`,size:`sm`,className:`h-6 w-6 p-0 shrink-0`,onClick:()=>{d?.(),h(!0),setTimeout(()=>h(!1),2e3)},title:`Copy to ${i}`,children:m?(0,c.jsx)(s.CheckCircle2,{className:`h-3 w-3 text-green-500`}):(0,c.jsx)(s.Copy,{className:`h-3 w-3`})})]})}),(0,c.jsx)(`div`,{className:`flex items-center gap-2`,children:e.rightValue===void 0?(0,c.jsx)(`span`,{className:`text-xs text-muted-foreground italic`,children:`Not set`}):(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`code`,{className:t.cn(`flex-1 text-xs bg-muted px-2 py-1 rounded truncate`,e.diffType===`added`&&`bg-green-500/20`),children:u(e.rightValue)}),e.diffType!==`unchanged`&&a&&(0,c.jsx)(r.Button,{variant:`ghost`,size:`sm`,className:`h-6 w-6 p-0 shrink-0`,onClick:()=>{a?.(),p(!0),setTimeout(()=>p(!1),2e3)},title:`Copy to ${n}`,children:f?(0,c.jsx)(s.CheckCircle2,{className:`h-3 w-3 text-green-500`}):(0,c.jsx)(s.Copy,{className:`h-3 w-3`})})]})})]})}function f({environments:e,leftEnvId:l,rightEnvId:u,onEnvironmentChange:f,onCopyValue:p,showDiffsOnly:m=!1,title:h=`Configuration Comparison`,className:g}){let[_,v]=o.useState(l||e[0]?.id),[y,b]=o.useState(u||e[1]?.id),[x,S]=o.useState(m),C=e.find(e=>e.id===_),w=e.find(e=>e.id===y),T=o.useMemo(()=>{if(!C||!w)return[];let e=new Map(C.values.map(e=>[e.key,e.value])),t=new Map(w.values.map(e=>[e.key,e.value])),n=new Set([...e.keys(),...t.keys()]);return Array.from(n).map(n=>{let r=e.get(n),i=t.get(n),a;return a=r===void 0?`added`:i===void 0?`removed`:r===i?`unchanged`:`modified`,{key:n,leftValue:r,rightValue:i,diffType:a}}).sort((e,t)=>{let n={removed:0,added:1,modified:2,unchanged:3},r=n[e.diffType]-n[t.diffType];return r===0?e.key.localeCompare(t.key):r})},[C,w]),E=x?T.filter(e=>e.diffType!==`unchanged`):T,D=o.useMemo(()=>T.reduce((e,t)=>(e[t.diffType]=(e[t.diffType]||0)+1,e),{}),[T]);return(0,c.jsxs)(`div`,{className:t.cn(`flex flex-col border rounded-lg bg-background`,g),children:[(0,c.jsxs)(`div`,{className:`flex items-center justify-between gap-4 p-3 border-b`,children:[(0,c.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,c.jsx)(s.Settings,{className:`h-5 w-5`}),(0,c.jsx)(`h3`,{className:`font-semibold`,children:h})]}),(0,c.jsxs)(`div`,{className:`flex items-center gap-2`,children:[D.modified>0&&(0,c.jsxs)(n.Badge,{className:`bg-yellow-500`,children:[D.modified,` modified`]}),D.added>0&&(0,c.jsxs)(n.Badge,{className:`bg-green-500`,children:[D.added,` added`]}),D.removed>0&&(0,c.jsxs)(n.Badge,{className:`bg-red-500`,children:[D.removed,` removed`]})]})]}),(0,c.jsxs)(`div`,{className:`flex items-center gap-4 p-3 border-b bg-muted/30`,children:[(0,c.jsxs)(`div`,{className:`flex-1`,children:[(0,c.jsx)(`div`,{className:`text-xs text-muted-foreground mb-1`,children:`Left Environment`}),(0,c.jsxs)(i.Select,{value:_,onValueChange:e=>{v(e),f?.(e,y)},children:[(0,c.jsx)(i.SelectTrigger,{children:(0,c.jsx)(i.SelectValue,{})}),(0,c.jsx)(i.SelectContent,{children:e.map(e=>(0,c.jsx)(i.SelectItem,{value:e.id,disabled:e.id===y,children:e.name},e.id))})]})]}),(0,c.jsx)(r.Button,{variant:`outline`,size:`sm`,className:`shrink-0`,onClick:()=>{let e=_;v(y),b(e),f?.(y,e)},children:(0,c.jsx)(s.ArrowLeftRight,{className:`h-4 w-4`})}),(0,c.jsxs)(`div`,{className:`flex-1`,children:[(0,c.jsx)(`div`,{className:`text-xs text-muted-foreground mb-1`,children:`Right Environment`}),(0,c.jsxs)(i.Select,{value:y,onValueChange:e=>{b(e),f?.(_,e)},children:[(0,c.jsx)(i.SelectTrigger,{children:(0,c.jsx)(i.SelectValue,{})}),(0,c.jsx)(i.SelectContent,{children:e.map(e=>(0,c.jsx)(i.SelectItem,{value:e.id,disabled:e.id===_,children:e.name},e.id))})]})]})]}),(0,c.jsxs)(`div`,{className:`flex items-center gap-2 px-3 py-2 border-b`,children:[(0,c.jsx)(r.Button,{variant:x?`default`:`outline`,size:`sm`,onClick:()=>S(!x),children:`Show differences only`}),(0,c.jsxs)(`span`,{className:`text-xs text-muted-foreground ml-auto`,children:[E.length,` of `,T.length,` entries`]})]}),(0,c.jsxs)(`div`,{className:`grid grid-cols-[minmax(150px,1fr)_minmax(200px,2fr)_minmax(200px,2fr)] gap-2 px-2 py-2 border-b bg-muted/50 text-xs font-medium text-muted-foreground`,children:[(0,c.jsx)(`div`,{children:`Key`}),(0,c.jsx)(`div`,{children:C?.name||`Left`}),(0,c.jsx)(`div`,{children:w?.name||`Right`})]}),(0,c.jsx)(a.ScrollArea,{className:`flex-1 max-h-[400px]`,children:E.length===0?(0,c.jsxs)(`div`,{className:`flex flex-col items-center justify-center h-32 text-muted-foreground`,children:[(0,c.jsx)(s.CheckCircle2,{className:`h-8 w-8 mb-2 text-green-500`}),(0,c.jsx)(`span`,{children:`No differences found`})]}):E.map(e=>(0,c.jsx)(d,{diff:e,leftEnvName:C?.name||`Left`,rightEnvName:w?.name||`Right`,onCopyLeft:()=>p?.(e.key,e.rightValue,y,_),onCopyRight:()=>p?.(e.key,e.leftValue,_,y)},e.key))})]})}var p=[{id:`production`,name:`Production`,values:[{key:`API_URL`,value:`https://api.example.com`},{key:`DEBUG`,value:!1},{key:`LOG_LEVEL`,value:`error`},{key:`MAX_CONNECTIONS`,value:100},{key:`CACHE_TTL`,value:3600},{key:`FEATURE_NEW_UI`,value:!1}]},{id:`staging`,name:`Staging`,values:[{key:`API_URL`,value:`https://staging-api.example.com`},{key:`DEBUG`,value:!0},{key:`LOG_LEVEL`,value:`debug`},{key:`MAX_CONNECTIONS`,value:50},{key:`CACHE_TTL`,value:300},{key:`FEATURE_NEW_UI`,value:!0},{key:`TEST_MODE`,value:!0}]},{id:`development`,name:`Development`,values:[{key:`API_URL`,value:`http://localhost:3000`},{key:`DEBUG`,value:!0},{key:`LOG_LEVEL`,value:`trace`},{key:`MAX_CONNECTIONS`,value:10},{key:`FEATURE_NEW_UI`,value:!0},{key:`TEST_MODE`,value:!0},{key:`HOT_RELOAD`,value:!0}]}];exports.WakaConfigComparator=f,exports.defaultConfigEnvironments=p;