@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-budget-burn/index.es.js

@@ -0,0 +1,746 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { AlertTriangle as n, Calendar as r, Clock as i, DollarSign as a, Target as o, TrendingDown as s, TrendingUp as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/waka-budget-burn/index.tsx
+var d = [
+	"#3b82f6",
+	"#ef4444",
+	"#22c55e",
+	"#f59e0b",
+	"#8b5cf6",
+	"#ec4899",
+	"#14b8a6",
+	"#f97316"
+];
+function f(e, t, n, r, i, a, o) {
+	let s = /* @__PURE__ */ new Date(), c = Math.ceil((n.getTime() - t.getTime()) / (1e3 * 60 * 60 * 24)), l = Math.max(0, Math.ceil((s.getTime() - t.getTime()) / (1e3 * 60 * 60 * 24))), u = Math.max(0, c - l), d = r.reduce((e, t) => e + t.amount, 0), f = Math.max(0, e - d), p = Math.min(100, l / c * 100), m = Math.min(100, d / e * 100), h = l > 0 ? d / l : 0, g = e / c, _ = null;
+	if (h > 0 && f > 0) {
+		let e = f / h;
+		_ = new Date(s.getTime() + e * 24 * 60 * 60 * 1e3);
+	} else d >= e && (_ = s);
+	let v = g > 0 ? h / g : 0, y = v >= 1 + a / 100, b = !y && v >= 1 + o / 100;
+	return {
+		totalBudget: e,
+		totalSpent: d,
+		startDate: t,
+		endDate: n,
+		spendHistory: r,
+		categories: i,
+		burnRate: h,
+		idealBurnRate: g,
+		depletionDate: _,
+		daysRemaining: u,
+		timeElapsedPercent: p,
+		budgetUsedPercent: m,
+		isDangerZone: y,
+		isWarningZone: b
+	};
+}
+function p(e) {
+	return e.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric"
+	});
+}
+function m(e) {
+	let t = 0;
+	return e.sort((e, t) => e.date.getTime() - t.date.getTime()).map((e) => (t += e.amount, {
+		date: e.date,
+		cumulative: t
+	}));
+}
+function h(e) {
+	if (e.length < 2) return {
+		direction: "neutral",
+		percentage: 0
+	};
+	let t = e.slice(-3).reduce((e, t) => e + t, 0) / Math.min(3, e.length), n = e.slice(0, -3).reduce((e, t) => e + t, 0) / Math.max(1, e.length - 3);
+	if (n === 0) return {
+		direction: "neutral",
+		percentage: 0
+	};
+	let r = (t - n) / n * 100;
+	return Math.abs(r) < 5 ? {
+		direction: "neutral",
+		percentage: 0
+	} : {
+		direction: r > 0 ? "up" : "down",
+		percentage: Math.abs(r)
+	};
+}
+function g({ state: n, width: r, height: i, showProjection: a, showIdealLine: o, animated: s, formatValue: c }) {
+	let [d, f] = t.useState(+!s), [h, g] = t.useState(null), _ = {
+		top: 20,
+		right: 20,
+		bottom: 30,
+		left: 60
+	}, v = r - _.left - _.right, y = i - _.top - _.bottom, b = t.useMemo(() => m(n.spendHistory), [n.spendHistory]), x = Math.ceil((n.endDate.getTime() - n.startDate.getTime()) / (1e3 * 60 * 60 * 24)), S = (e) => {
+		let t = Math.ceil((e.getTime() - n.startDate.getTime()) / (1e3 * 60 * 60 * 24));
+		return _.left + t / x * v;
+	}, C = (e) => _.top + y - e / n.totalBudget * y, w = t.useMemo(() => b.length === 0 ? "" : b.map((e) => ({
+		x: S(e.date),
+		y: C(e.cumulative)
+	})).map((e, t) => `${t === 0 ? "M" : "L"} ${e.x} ${e.y}`).join(" "), [
+		b,
+		v,
+		y
+	]), T = t.useMemo(() => `M ${_.left} ${C(0)} L ${_.left + v} ${C(n.totalBudget)}`, [
+		v,
+		y,
+		n.totalBudget
+	]), E = t.useMemo(() => {
+		if (b.length === 0 || n.burnRate === 0) return "";
+		let e = b[b.length - 1], t = S(e.date), r = C(e.cumulative), i = n.depletionDate && n.depletionDate < n.endDate ? n.depletionDate : n.endDate, a = Math.ceil((i.getTime() - e.date.getTime()) / (1e3 * 60 * 60 * 24)), o = e.cumulative + n.burnRate * a;
+		return `M ${t} ${r} L ${S(i)} ${C(Math.min(o, n.totalBudget))}`;
+	}, [
+		b,
+		n.burnRate,
+		n.depletionDate,
+		n.endDate,
+		v,
+		y
+	]);
+	t.useMemo(() => `M ${`${_.left},${_.top}`} L ${`${_.left + v},${_.top}`} L ${`${_.left + v},${C(n.totalBudget)}`} L ${`${_.left},${C(0)}`} Z`, [
+		v,
+		y,
+		n.totalBudget
+	]), t.useEffect(() => {
+		if (!s) {
+			f(1);
+			return;
+		}
+		let e = Date.now(), t = () => {
+			let n = Date.now() - e, r = Math.min(n / 1500, 1), i = 1 - (1 - r) ** 3;
+			f(i), r < 1 && requestAnimationFrame(t);
+		};
+		requestAnimationFrame(t);
+	}, [s]);
+	let D = t.useMemo(() => {
+		let e = [], t = Math.min(6, x);
+		for (let r = 0; r <= t; r++) {
+			let i = new Date(n.startDate.getTime() + r / t * (n.endDate.getTime() - n.startDate.getTime()));
+			e.push({
+				date: i,
+				x: S(i)
+			});
+		}
+		return e;
+	}, [
+		n.startDate,
+		n.endDate,
+		x,
+		v
+	]), O = t.useMemo(() => {
+		let e = [];
+		for (let t = 0; t <= 4; t++) {
+			let r = t / 4 * n.totalBudget;
+			e.push({
+				value: r,
+				y: C(r)
+			});
+		}
+		return e;
+	}, [n.totalBudget, y]), k = (e) => {
+		let t = b[e];
+		t && g({
+			index: e,
+			x: S(t.date),
+			y: C(t.cumulative),
+			value: t.cumulative,
+			date: t.date
+		});
+	};
+	return /* @__PURE__ */ u("div", {
+		className: "relative",
+		children: [
+			/* @__PURE__ */ u("svg", {
+				width: r,
+				height: i,
+				className: "overflow-visible",
+				"aria-hidden": "true",
+				focusable: "false",
+				children: [
+					/* @__PURE__ */ u("defs", { children: [
+						/* @__PURE__ */ u("linearGradient", {
+							id: "dangerZoneGradient",
+							x1: "0",
+							y1: "0",
+							x2: "0",
+							y2: "1",
+							children: [/* @__PURE__ */ l("stop", {
+								offset: "0%",
+								stopColor: "#ef4444",
+								stopOpacity: "0.15"
+							}), /* @__PURE__ */ l("stop", {
+								offset: "100%",
+								stopColor: "#ef4444",
+								stopOpacity: "0.02"
+							})]
+						}),
+						/* @__PURE__ */ u("linearGradient", {
+							id: "burnLineGradient",
+							x1: "0",
+							y1: "0",
+							x2: "1",
+							y2: "0",
+							children: [/* @__PURE__ */ l("stop", {
+								offset: "0%",
+								stopColor: "#3b82f6"
+							}), /* @__PURE__ */ l("stop", {
+								offset: "100%",
+								stopColor: n.isDangerZone ? "#ef4444" : n.isWarningZone ? "#f59e0b" : "#22c55e"
+							})]
+						}),
+						/* @__PURE__ */ l("clipPath", {
+							id: "burnLineClip",
+							children: /* @__PURE__ */ l("rect", {
+								x: _.left,
+								y: _.top,
+								width: v * d,
+								height: y
+							})
+						})
+					] }),
+					/* @__PURE__ */ l("g", {
+						className: "text-muted-foreground/20",
+						children: O.map((e, t) => /* @__PURE__ */ l("line", {
+							x1: _.left,
+							y1: e.y,
+							x2: _.left + v,
+							y2: e.y,
+							stroke: "currentColor",
+							strokeDasharray: "4,4"
+						}, t))
+					}),
+					/* @__PURE__ */ l("path", {
+						d: `M ${_.left} ${_.top}
+              L ${_.left + v} ${C(n.totalBudget)}
+              L ${_.left + v} ${_.top} Z`,
+						fill: "url(#dangerZoneGradient)"
+					}),
+					/* @__PURE__ */ l("g", {
+						className: "text-muted-foreground text-xs",
+						children: O.map((e, t) => /* @__PURE__ */ l("g", { children: /* @__PURE__ */ l("text", {
+							x: _.left - 8,
+							y: e.y,
+							textAnchor: "end",
+							dominantBaseline: "middle",
+							fill: "currentColor",
+							children: c(e.value)
+						}) }, t))
+					}),
+					/* @__PURE__ */ l("g", {
+						className: "text-muted-foreground text-xs",
+						children: D.map((e, t) => /* @__PURE__ */ l("text", {
+							x: e.x,
+							y: i - 8,
+							textAnchor: "middle",
+							fill: "currentColor",
+							children: p(e.date)
+						}, t))
+					}),
+					o && /* @__PURE__ */ l("path", {
+						d: T,
+						fill: "none",
+						stroke: "#94a3b8",
+						strokeWidth: "2",
+						strokeDasharray: "8,4",
+						opacity: "0.6"
+					}),
+					/* @__PURE__ */ l("g", {
+						clipPath: "url(#burnLineClip)",
+						children: /* @__PURE__ */ l("path", {
+							d: w,
+							fill: "none",
+							stroke: "url(#burnLineGradient)",
+							strokeWidth: "3",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					}),
+					a && E && d === 1 && /* @__PURE__ */ l("path", {
+						d: E,
+						fill: "none",
+						stroke: n.isDangerZone ? "#ef4444" : n.isWarningZone ? "#f59e0b" : "#22c55e",
+						strokeWidth: "2",
+						strokeDasharray: "6,3",
+						opacity: "0.6",
+						className: "animate-burn-dash"
+					}),
+					b.length > 0 && d === 1 && /* @__PURE__ */ l("g", { children: /* @__PURE__ */ l("circle", {
+						cx: S(b[b.length - 1].date),
+						cy: C(b[b.length - 1].cumulative),
+						r: "6",
+						fill: n.isDangerZone ? "#ef4444" : n.isWarningZone ? "#f59e0b" : "#3b82f6",
+						stroke: "white",
+						strokeWidth: "2",
+						className: "animate-burn-pulse"
+					}) }),
+					/* @__PURE__ */ l("line", {
+						x1: _.left,
+						y1: C(n.totalBudget),
+						x2: _.left + v,
+						y2: C(n.totalBudget),
+						stroke: "#ef4444",
+						strokeWidth: "2",
+						strokeDasharray: "4,2"
+					}),
+					n.timeElapsedPercent < 100 && /* @__PURE__ */ u("g", { children: [/* @__PURE__ */ l("line", {
+						x1: _.left + n.timeElapsedPercent / 100 * v,
+						y1: _.top,
+						x2: _.left + n.timeElapsedPercent / 100 * v,
+						y2: _.top + y,
+						stroke: "#6366f1",
+						strokeWidth: "1",
+						strokeDasharray: "4,4",
+						opacity: "0.5"
+					}), /* @__PURE__ */ l("text", {
+						x: _.left + n.timeElapsedPercent / 100 * v,
+						y: _.top - 6,
+						textAnchor: "middle",
+						className: "text-xs fill-indigo-500 font-medium",
+						children: "Today"
+					})] }),
+					d === 1 && b.map((e, t) => /* @__PURE__ */ l("circle", {
+						cx: S(e.date),
+						cy: C(e.cumulative),
+						r: "8",
+						fill: "transparent",
+						className: "cursor-pointer",
+						onMouseEnter: () => k(t),
+						onMouseLeave: () => g(null)
+					}, t)),
+					a && n.depletionDate && n.depletionDate <= n.endDate && d === 1 && /* @__PURE__ */ u("g", { children: [/* @__PURE__ */ l("line", {
+						x1: S(n.depletionDate),
+						y1: _.top,
+						x2: S(n.depletionDate),
+						y2: _.top + y,
+						stroke: "#ef4444",
+						strokeWidth: "2",
+						strokeDasharray: "4,4"
+					}), /* @__PURE__ */ u("g", {
+						transform: `translate(${S(n.depletionDate)}, ${_.top + 10})`,
+						children: [/* @__PURE__ */ l("rect", {
+							x: "-40",
+							y: "-8",
+							width: "80",
+							height: "16",
+							rx: "4",
+							fill: "#ef4444"
+						}), /* @__PURE__ */ l("text", {
+							textAnchor: "middle",
+							dominantBaseline: "middle",
+							className: "text-[10px] font-medium fill-white",
+							children: "Depleted"
+						})]
+					})] })
+				]
+			}),
+			h && /* @__PURE__ */ u("div", {
+				className: e("absolute z-50 px-3 py-2 text-sm rounded-lg shadow-lg", "bg-foreground text-background", "animate-in fade-in-0 zoom-in-95 duration-100", "pointer-events-none"),
+				style: {
+					left: h.x,
+					top: h.y - 60,
+					transform: "translateX(-50%)"
+				},
+				children: [
+					/* @__PURE__ */ l("div", {
+						className: "font-semibold",
+						children: p(h.date)
+					}),
+					/* @__PURE__ */ u("div", {
+						className: "text-xs opacity-80",
+						children: ["Cumulative: ", c(h.value)]
+					}),
+					/* @__PURE__ */ l("div", { className: "absolute left-1/2 -translate-x-1/2 -bottom-1.5 w-3 h-3 rotate-45 bg-foreground" })
+				]
+			}),
+			/* @__PURE__ */ l("style", { children: "\n        @keyframes burn-pulse {\n          0%, 100% { transform: scale(1); opacity: 1; }\n          50% { transform: scale(1.2); opacity: 0.8; }\n        }\n        @keyframes burn-dash {\n          0% { stroke-dashoffset: 0; }\n          100% { stroke-dashoffset: 18; }\n        }\n        .animate-burn-pulse {\n          animation: burn-pulse 2s ease-in-out infinite;\n          transform-origin: center;\n          transform-box: fill-box;\n        }\n        .animate-burn-dash {\n          animation: burn-dash 1s linear infinite;\n        }\n      " })
+		]
+	});
+}
+function _({ state: t, formatValue: o }) {
+	let d = t.totalBudget - t.totalSpent, f = t.idealBurnRate > 0 ? (t.burnRate - t.idealBurnRate) / t.idealBurnRate * 100 : 0;
+	return /* @__PURE__ */ u("div", {
+		className: "grid grid-cols-2 lg:grid-cols-4 gap-4",
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "rounded-lg border bg-card p-4",
+				children: [
+					/* @__PURE__ */ u("div", {
+						className: "flex items-center gap-2 text-muted-foreground text-sm mb-1",
+						children: [/* @__PURE__ */ l(a, { className: "h-4 w-4" }), /* @__PURE__ */ l("span", { children: "Remaining" })]
+					}),
+					/* @__PURE__ */ l("div", {
+						className: e("text-2xl font-bold", d < 0 && "text-red-600"),
+						children: o(Math.max(0, d))
+					}),
+					/* @__PURE__ */ u("div", {
+						className: "text-xs text-muted-foreground mt-1",
+						children: [(100 - t.budgetUsedPercent).toFixed(1), "% of budget"]
+					})
+				]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "rounded-lg border bg-card p-4",
+				children: [
+					/* @__PURE__ */ u("div", {
+						className: "flex items-center gap-2 text-muted-foreground text-sm mb-1",
+						children: [/* @__PURE__ */ l(s, { className: "h-4 w-4" }), /* @__PURE__ */ l("span", { children: "Burn Rate" })]
+					}),
+					/* @__PURE__ */ u("div", {
+						className: e("text-2xl font-bold", t.isDangerZone && "text-red-600", t.isWarningZone && "text-amber-600"),
+						children: [o(t.burnRate), "/day"]
+					}),
+					/* @__PURE__ */ u("div", {
+						className: e("text-xs mt-1 flex items-center gap-1", f > 0 ? "text-red-600" : "text-green-600"),
+						children: [
+							l(f > 0 ? c : s, { className: "h-3 w-3" }),
+							Math.abs(f).toFixed(1),
+							"% vs ideal"
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "rounded-lg border bg-card p-4",
+				children: [
+					/* @__PURE__ */ u("div", {
+						className: "flex items-center gap-2 text-muted-foreground text-sm mb-1",
+						children: [/* @__PURE__ */ l(i, { className: "h-4 w-4" }), /* @__PURE__ */ l("span", { children: "Days Left" })]
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "text-2xl font-bold",
+						children: t.daysRemaining
+					}),
+					/* @__PURE__ */ u("div", {
+						className: "text-xs text-muted-foreground mt-1",
+						children: [t.timeElapsedPercent.toFixed(1), "% elapsed"]
+					})
+				]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "rounded-lg border bg-card p-4",
+				children: [
+					/* @__PURE__ */ u("div", {
+						className: "flex items-center gap-2 text-muted-foreground text-sm mb-1",
+						children: [/* @__PURE__ */ l(r, { className: "h-4 w-4" }), /* @__PURE__ */ l("span", { children: "Depletion Date" })]
+					}),
+					/* @__PURE__ */ l("div", {
+						className: e("text-lg font-bold", t.depletionDate && t.depletionDate < t.endDate && "text-red-600"),
+						children: t.depletionDate ? p(t.depletionDate) : "On Track"
+					}),
+					t.depletionDate && t.depletionDate < t.endDate && /* @__PURE__ */ u("div", {
+						className: "text-xs text-red-600 mt-1 flex items-center gap-1",
+						children: [/* @__PURE__ */ l(n, { className: "h-3 w-3" }), "Before period ends"]
+					})
+				]
+			})
+		]
+	});
+}
+function v({ state: t, formatValue: n }) {
+	let r = t.spendHistory.map((e) => e.amount), i = h(r), a = [];
+	for (let e = 0; e < r.length; e += 7) {
+		let t = r.slice(e, e + 7);
+		t.length > 0 && a.push(t.reduce((e, t) => e + t, 0) / t.length);
+	}
+	let o = h(a), d = r.length > 0 ? r.reduce((e, t) => e + t, 0) / r.length : 0, f = d * 7;
+	return /* @__PURE__ */ u("div", {
+		className: "flex flex-wrap gap-4",
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "flex items-center gap-3 px-4 py-2 rounded-lg bg-muted/50",
+				children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("div", {
+					className: "text-xs text-muted-foreground",
+					children: "Daily Avg"
+				}), /* @__PURE__ */ l("div", {
+					className: "font-semibold",
+					children: n(d)
+				})] }), i.direction !== "neutral" && /* @__PURE__ */ u("div", {
+					className: e("flex items-center gap-1 text-sm font-medium", i.direction === "up" ? "text-red-600" : "text-green-600"),
+					children: [
+						i.direction === "up" ? /* @__PURE__ */ l(c, { className: "h-4 w-4" }) : /* @__PURE__ */ l(s, { className: "h-4 w-4" }),
+						i.percentage.toFixed(1),
+						"%"
+					]
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "flex items-center gap-3 px-4 py-2 rounded-lg bg-muted/50",
+				children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("div", {
+					className: "text-xs text-muted-foreground",
+					children: "Weekly Avg"
+				}), /* @__PURE__ */ l("div", {
+					className: "font-semibold",
+					children: n(f)
+				})] }), o.direction !== "neutral" && /* @__PURE__ */ u("div", {
+					className: e("flex items-center gap-1 text-sm font-medium", o.direction === "up" ? "text-red-600" : "text-green-600"),
+					children: [
+						o.direction === "up" ? /* @__PURE__ */ l(c, { className: "h-4 w-4" }) : /* @__PURE__ */ l(s, { className: "h-4 w-4" }),
+						o.percentage.toFixed(1),
+						"%"
+					]
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "flex items-center gap-3 px-4 py-2 rounded-lg bg-muted/50",
+				children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("div", {
+					className: "text-xs text-muted-foreground",
+					children: "Monthly Proj."
+				}), /* @__PURE__ */ l("div", {
+					className: "font-semibold",
+					children: n(t.burnRate * 30)
+				})] }), /* @__PURE__ */ l("div", {
+					className: e("text-xs", t.burnRate * 30 > t.totalBudget ? "text-red-600" : "text-green-600"),
+					children: t.burnRate * 30 > t.totalBudget ? "Over budget" : "On track"
+				})]
+			})
+		]
+	});
+}
+function y({ categories: t, formatValue: n }) {
+	return /* @__PURE__ */ u("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ u("div", {
+			className: "text-sm font-medium text-muted-foreground flex items-center gap-2",
+			children: [/* @__PURE__ */ l(o, { className: "h-4 w-4" }), "Category Breakdown"]
+		}), /* @__PURE__ */ l("div", {
+			className: "space-y-2",
+			children: t.map((t, r) => {
+				let i = t.spent / t.budget * 100, a = t.spent > t.budget, o = t.color || d[r % d.length];
+				return /* @__PURE__ */ u("div", {
+					className: "space-y-1",
+					children: [
+						/* @__PURE__ */ u("div", {
+							className: "flex items-center justify-between text-sm",
+							children: [/* @__PURE__ */ u("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ l("span", {
+									className: "w-3 h-3 rounded-full",
+									style: { backgroundColor: o }
+								}), /* @__PURE__ */ l("span", {
+									className: "font-medium",
+									children: t.name
+								})]
+							}), /* @__PURE__ */ u("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ l("span", {
+									className: e(a && "text-red-600"),
+									children: n(t.spent)
+								}), /* @__PURE__ */ u("span", {
+									className: "text-muted-foreground",
+									children: ["/ ", n(t.budget)]
+								})]
+							})]
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "h-2 rounded-full bg-muted overflow-hidden",
+							children: /* @__PURE__ */ l("div", {
+								className: e("h-full rounded-full transition-all duration-500", a && "animate-pulse"),
+								style: {
+									width: `${Math.min(i, 100)}%`,
+									backgroundColor: a ? "#ef4444" : o
+								}
+							})
+						}),
+						/* @__PURE__ */ u("div", {
+							className: "flex items-center justify-between text-xs text-muted-foreground",
+							children: [/* @__PURE__ */ u("span", { children: [i.toFixed(1), "% used"] }), /* @__PURE__ */ l("span", { children: a ? `${n(t.spent - t.budget)} over` : `${n(t.budget - t.spent)} left` })]
+						})
+					]
+				}, t.id);
+			})
+		})]
+	});
+}
+function b({ state: t, formatValue: r }) {
+	return !t.isDangerZone && !t.isWarningZone ? null : /* @__PURE__ */ u("div", {
+		className: e("flex items-center gap-3 px-4 py-3 rounded-lg", t.isDangerZone ? "bg-red-100 dark:bg-red-950 text-red-800 dark:text-red-200" : "bg-amber-100 dark:bg-amber-950 text-amber-800 dark:text-amber-200"),
+		children: [/* @__PURE__ */ l(n, { className: "h-5 w-5 flex-shrink-0" }), /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("div", {
+			className: "font-semibold",
+			children: t.isDangerZone ? "Budget at Risk!" : "Budget Warning"
+		}), /* @__PURE__ */ l("div", {
+			className: "text-sm opacity-90",
+			children: t.isDangerZone ? `At current burn rate of ${r(t.burnRate)}/day, budget will deplete ${t.depletionDate ? `on ${p(t.depletionDate)}` : "before period ends"}.` : `Spending is ${((t.burnRate / t.idealBurnRate - 1) * 100).toFixed(0)}% above ideal burn rate. Consider reducing expenses.`
+		})] })]
+	});
+}
+function x({ budget: n, startDate: r, endDate: i, spendHistory: a, categories: o = [], currency: s = "$", dangerThreshold: c = 30, warningThreshold: d = 15, showProjection: p = !0, showIdealLine: m = !0, showCategories: h = !0, showTrends: x = !0, animated: S = !0, height: C = 300, formatValue: w, onDangerZone: T, onBudgetDepleted: E, className: D }) {
+	let O = t.useRef(null), [k, A] = t.useState(600), j = t.useMemo(() => f(n, r, i, a, o, c, d), [
+		n,
+		r,
+		i,
+		a,
+		o,
+		c,
+		d
+	]), M = t.useCallback((e) => e >= 1e6 ? `${s}${(e / 1e6).toFixed(1)}M` : e >= 1e3 ? `${s}${(e / 1e3).toFixed(1)}K` : `${s}${e.toFixed(2)}`, [s]), N = w || M, P = t.useRef(j.isDangerZone), F = t.useRef(j.totalSpent >= j.totalBudget);
+	return t.useEffect(() => {
+		j.isDangerZone && !P.current && T?.(), P.current = j.isDangerZone;
+		let e = j.totalSpent >= j.totalBudget;
+		e && !F.current && E?.(), F.current = e;
+	}, [
+		j.isDangerZone,
+		j.totalSpent,
+		j.totalBudget,
+		T,
+		E
+	]), t.useEffect(() => {
+		if (!O.current) return;
+		let e = new ResizeObserver((e) => {
+			for (let t of e) A(t.contentRect.width);
+		});
+		return e.observe(O.current), () => e.disconnect();
+	}, []), /* @__PURE__ */ u("div", {
+		ref: O,
+		className: e("space-y-6", D),
+		children: [
+			/* @__PURE__ */ l(b, {
+				state: j,
+				formatValue: N
+			}),
+			/* @__PURE__ */ l(_, {
+				state: j,
+				formatValue: N
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "rounded-lg border bg-card p-4",
+				children: [/* @__PURE__ */ u("div", {
+					className: "flex items-center justify-between mb-4",
+					children: [/* @__PURE__ */ l("div", {
+						className: "text-sm font-medium",
+						children: "Budget Burn-down"
+					}), /* @__PURE__ */ u("div", {
+						className: "flex items-center gap-4 text-xs text-muted-foreground",
+						children: [
+							m && /* @__PURE__ */ u("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ l("div", {
+									className: "w-6 h-0.5 bg-slate-400",
+									style: { backgroundImage: "repeating-linear-gradient(90deg, currentColor 0, currentColor 4px, transparent 4px, transparent 8px)" }
+								}), /* @__PURE__ */ l("span", { children: "Ideal" })]
+							}),
+							p && /* @__PURE__ */ u("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ l("div", {
+									className: "w-6 h-0.5",
+									style: { backgroundImage: "repeating-linear-gradient(90deg, #22c55e 0, #22c55e 3px, transparent 3px, transparent 6px)" }
+								}), /* @__PURE__ */ l("span", { children: "Projected" })]
+							}),
+							/* @__PURE__ */ u("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ l("div", { className: "w-6 h-0.5 bg-gradient-to-r from-blue-500 to-green-500 rounded" }), /* @__PURE__ */ l("span", { children: "Actual" })]
+							})
+						]
+					})]
+				}), /* @__PURE__ */ l(g, {
+					state: j,
+					width: k - 32,
+					height: C,
+					showProjection: p,
+					showIdealLine: m,
+					animated: S,
+					formatValue: N
+				})]
+			}),
+			x && a.length > 0 && /* @__PURE__ */ l(v, {
+				state: j,
+				formatValue: N
+			}),
+			h && o.length > 0 && /* @__PURE__ */ l("div", {
+				className: "rounded-lg border bg-card p-4",
+				children: /* @__PURE__ */ l(y, {
+					categories: o,
+					formatValue: N
+				})
+			})
+		]
+	});
+}
+function S({ budget: e, startDate: n, endDate: r, initialHistory: i = [], initialCategories: a = [], dangerThreshold: o = 30, warningThreshold: s = 15, onDangerZone: c, onBudgetDepleted: l }) {
+	let [u, d] = t.useState(i), [p, m] = t.useState(a), h = t.useMemo(() => f(e, n, r, u, p, o, s), [
+		e,
+		n,
+		r,
+		u,
+		p,
+		o,
+		s
+	]), g = t.useRef(h.isDangerZone), _ = t.useRef(h.totalSpent >= h.totalBudget);
+	t.useEffect(() => {
+		h.isDangerZone && !g.current && c?.(), g.current = h.isDangerZone;
+		let e = h.totalSpent >= h.totalBudget;
+		e && !_.current && l?.(), _.current = e;
+	}, [
+		h.isDangerZone,
+		h.totalSpent,
+		h.totalBudget,
+		c,
+		l
+	]);
+	let v = t.useCallback((e, t, n) => {
+		d((r) => [...r, {
+			date: e,
+			amount: t,
+			categories: n
+		}]), n && m((e) => e.map((e) => ({
+			...e,
+			spent: e.spent + (n[e.id] || 0)
+		})));
+	}, []), y = t.useCallback((e) => {
+		d((t) => {
+			let n = t.find((t) => t.date.getTime() === e.getTime());
+			return n?.categories && m((e) => e.map((e) => ({
+				...e,
+				spent: Math.max(0, e.spent - (n.categories?.[e.id] || 0))
+			}))), t.filter((t) => t.date.getTime() !== e.getTime());
+		});
+	}, []), b = t.useCallback((e, t) => {
+		m((n) => n.map((n) => n.id === e ? {
+			...n,
+			...t
+		} : n));
+	}, []), x = t.useCallback((e) => {
+		m((t) => [...t, e]);
+	}, []), S = t.useCallback((e) => {
+		m((t) => t.filter((t) => t.id !== e));
+	}, []), C = t.useCallback(() => {
+		d([]), m((e) => e.map((e) => ({
+			...e,
+			spent: 0
+		})));
+	}, []), w = t.useCallback((t) => {
+		let n = h.totalSpent + h.burnRate * t;
+		return {
+			projectedSpend: n,
+			projectedRemaining: Math.max(0, e - n),
+			projectedPercentUsed: Math.min(100, n / e * 100),
+			willDeplete: n >= e,
+			daysUntilDepletion: h.burnRate > 0 ? Math.ceil((e - h.totalSpent) / h.burnRate) : Infinity
+		};
+	}, [
+		e,
+		h.totalSpent,
+		h.burnRate
+	]);
+	return {
+		...h,
+		spendHistory: u,
+		categories: p,
+		addSpend: v,
+		removeSpend: y,
+		updateCategory: b,
+		addCategory: x,
+		removeCategory: S,
+		reset: C,
+		setSpendHistory: d,
+		setCategories: m,
+		getForecast: w
+	};
+}
+//#endregion
+export { x as WakaBudgetBurn, x as default, S as useBudgetBurn };