@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-credit-balance/index.es.js

@@ -0,0 +1,225 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Coins as n, Minus as r, TrendingDown as i, TrendingUp as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/waka-credit-balance/index.tsx
+var c = {
+	warning: 100,
+	critical: 20
+}, l = {
+	sm: {
+		container: "p-3",
+		label: "text-xs",
+		value: "text-xl",
+		currency: "text-xs",
+		trend: "text-[10px]",
+		trendIcon: "h-3 w-3",
+		coinIcon: "h-4 w-4",
+		coinContainer: "h-8 w-8"
+	},
+	md: {
+		container: "p-4",
+		label: "text-sm",
+		value: "text-2xl",
+		currency: "text-sm",
+		trend: "text-xs",
+		trendIcon: "h-4 w-4",
+		coinIcon: "h-5 w-5",
+		coinContainer: "h-10 w-10"
+	},
+	lg: {
+		container: "p-6",
+		label: "text-base",
+		value: "text-4xl",
+		currency: "text-base",
+		trend: "text-sm",
+		trendIcon: "h-5 w-5",
+		coinIcon: "h-6 w-6",
+		coinContainer: "h-12 w-12"
+	}
+};
+function u(e, t) {
+	return e <= 0 ? {
+		level: "depleted",
+		color: "text-red-700 dark:text-red-400",
+		bg: "bg-red-100 dark:bg-red-900/30",
+		iconColor: "text-red-600"
+	} : e <= t.critical ? {
+		level: "critical",
+		color: "text-red-600 dark:text-red-400",
+		bg: "bg-red-50 dark:bg-red-900/20",
+		iconColor: "text-red-500"
+	} : e <= t.warning ? {
+		level: "warning",
+		color: "text-yellow-600 dark:text-yellow-400",
+		bg: "bg-yellow-50 dark:bg-yellow-900/20",
+		iconColor: "text-yellow-500"
+	} : {
+		level: "healthy",
+		color: "text-green-600 dark:text-green-400",
+		bg: "bg-green-50 dark:bg-green-900/20",
+		iconColor: "text-green-500"
+	};
+}
+function d(e) {
+	return e.toLocaleString("en-US");
+}
+function f(e, n, r = 800) {
+	let [i, a] = t.useState(e), o = t.useRef(void 0), s = t.useRef(e);
+	return t.useEffect(() => {
+		if (!n) {
+			a(e), s.current = e;
+			return;
+		}
+		let t = s.current, i = e - t;
+		if (i === 0) return;
+		let c = performance.now(), l = (n) => {
+			let u = n - c, d = Math.min(u / r, 1), f = 1 - (1 - d) ** 3, p = t + i * f;
+			a(p), d < 1 ? o.current = requestAnimationFrame(l) : (a(e), s.current = e);
+		};
+		return o.current = requestAnimationFrame(l), () => {
+			o.current && cancelAnimationFrame(o.current);
+		};
+	}, [
+		e,
+		n,
+		r
+	]), Math.round(i);
+}
+function p({ direction: t, value: n, text: c, size: u }) {
+	let d = l[u], f = t === "up" ? a : t === "down" ? i : r;
+	return /* @__PURE__ */ s("div", {
+		className: e("flex items-center gap-1", d.trend, t === "up" && "text-green-600", t === "down" && "text-red-600", t === "neutral" && "text-muted-foreground"),
+		children: [
+			/* @__PURE__ */ o(f, { className: d.trendIcon }),
+			/* @__PURE__ */ o("span", {
+				className: "font-medium",
+				children: n
+			}),
+			c && /* @__PURE__ */ o("span", {
+				className: "text-muted-foreground",
+				children: c
+			})
+		]
+	});
+}
+function m({ size: t, variant: n }) {
+	let r = {
+		sm: "h-5 w-20",
+		md: "h-7 w-24",
+		lg: "h-9 w-32"
+	};
+	return n === "minimal" ? /* @__PURE__ */ s("div", {
+		className: "animate-pulse flex items-baseline gap-2",
+		children: [/* @__PURE__ */ o("div", { className: e("bg-muted rounded", r[t]) }), /* @__PURE__ */ o("div", { className: "h-3 w-12 bg-muted rounded" })]
+	}) : n === "compact" ? /* @__PURE__ */ s("div", {
+		className: "animate-pulse flex items-center gap-3",
+		children: [/* @__PURE__ */ o("div", { className: "h-8 w-8 bg-muted rounded-lg" }), /* @__PURE__ */ s("div", {
+			className: "space-y-1.5",
+			children: [/* @__PURE__ */ o("div", { className: "h-3 w-16 bg-muted rounded" }), /* @__PURE__ */ o("div", { className: e("bg-muted rounded", r[t]) })]
+		})]
+	}) : /* @__PURE__ */ o("div", {
+		className: "animate-pulse",
+		children: /* @__PURE__ */ s("div", {
+			className: "flex items-start justify-between",
+			children: [/* @__PURE__ */ s("div", {
+				className: "space-y-2",
+				children: [
+					/* @__PURE__ */ o("div", { className: "h-3 w-20 bg-muted rounded" }),
+					/* @__PURE__ */ o("div", { className: e("bg-muted rounded", r[t]) }),
+					/* @__PURE__ */ o("div", { className: "h-3 w-24 bg-muted rounded" })
+				]
+			}), /* @__PURE__ */ o("div", { className: "h-10 w-10 bg-muted rounded-lg" })]
+		})
+	});
+}
+function h({ balance: t, currency: r = "credits", trend: i, thresholds: a = c, variant: h = "card", size: g = "md", animated: _ = !0, loading: v = !1, formatValue: y = d, className: b }) {
+	let x = l[g], S = u(t, a), C = f(t, _);
+	return v ? /* @__PURE__ */ o("div", {
+		className: e(h === "card" && "rounded-lg border bg-card shadow-sm", h === "card" && x.container, h === "compact" && x.container, b),
+		children: /* @__PURE__ */ o(m, {
+			size: g,
+			variant: h
+		})
+	}) : h === "minimal" ? /* @__PURE__ */ s("div", {
+		className: e("flex flex-col", b),
+		children: [/* @__PURE__ */ s("div", {
+			className: "flex items-baseline gap-2",
+			children: [/* @__PURE__ */ o("span", {
+				className: e("font-bold tracking-tight tabular-nums", x.value, S.color),
+				children: y(C)
+			}), /* @__PURE__ */ o("span", {
+				className: e("text-muted-foreground font-medium", x.currency),
+				children: r
+			})]
+		}), i && /* @__PURE__ */ o(p, {
+			direction: i.direction,
+			value: i.value,
+			text: i.text,
+			size: g
+		})]
+	}) : h === "compact" ? /* @__PURE__ */ s("div", {
+		className: e("flex items-center gap-3", x.container, b),
+		children: [/* @__PURE__ */ o("div", {
+			className: e("rounded-lg flex items-center justify-center flex-shrink-0", x.coinContainer, S.bg),
+			children: /* @__PURE__ */ o(n, { className: e(x.coinIcon, S.iconColor) })
+		}), /* @__PURE__ */ s("div", {
+			className: "flex-1 min-w-0",
+			children: [/* @__PURE__ */ o("p", {
+				className: e("text-muted-foreground font-medium", x.label),
+				children: r
+			}), /* @__PURE__ */ s("div", {
+				className: "flex items-baseline gap-2",
+				children: [/* @__PURE__ */ o("span", {
+					className: e("font-bold tracking-tight tabular-nums", x.value, S.color),
+					children: y(C)
+				}), i && /* @__PURE__ */ o(p, {
+					direction: i.direction,
+					value: i.value,
+					text: i.text,
+					size: g
+				})]
+			})]
+		})]
+	}) : /* @__PURE__ */ o("div", {
+		className: e("rounded-lg border bg-card shadow-sm", x.container, b),
+		children: /* @__PURE__ */ s("div", {
+			className: "flex items-start justify-between",
+			children: [/* @__PURE__ */ s("div", {
+				className: "flex-1",
+				children: [
+					/* @__PURE__ */ o("p", {
+						className: e("text-muted-foreground font-medium", x.label),
+						children: "Credit Balance"
+					}),
+					/* @__PURE__ */ s("div", {
+						className: "flex items-baseline gap-2 mt-1",
+						children: [/* @__PURE__ */ o("span", {
+							className: e("font-bold tracking-tight tabular-nums", x.value, S.color),
+							children: y(C)
+						}), /* @__PURE__ */ o("span", {
+							className: e("text-muted-foreground font-medium", x.currency),
+							children: r
+						})]
+					}),
+					i && /* @__PURE__ */ o("div", {
+						className: "mt-2",
+						children: /* @__PURE__ */ o(p, {
+							direction: i.direction,
+							value: i.value,
+							text: i.text,
+							size: g
+						})
+					})
+				]
+			}), /* @__PURE__ */ o("div", {
+				className: e("rounded-lg flex items-center justify-center flex-shrink-0", x.coinContainer, S.bg),
+				children: /* @__PURE__ */ o(n, { className: e(x.coinIcon, S.iconColor) })
+			})]
+		})
+	});
+}
+//#endregion
+export { h as WakaCreditBalance, h as default };

package/dist/components/waka-credit-breakdown/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("react/jsx-runtime"),i=require("recharts");var a=[`hsl(var(--chart-1))`,`hsl(var(--chart-2))`,`hsl(var(--chart-3))`,`hsl(var(--chart-4))`,`hsl(var(--chart-5))`,`hsl(var(--primary))`,`hsl(var(--info))`,`hsl(var(--warning))`,`hsl(var(--success))`,`hsl(var(--destructive))`];function o(e){return e.map((e,t)=>({...e,color:e.color||a[t%a.length]}))}function s(e){return e.reduce((e,t)=>e+t.value,0)}function c(e){return e>=1e6?`${(e/1e6).toFixed(1)}M`:e>=1e3?`${(e/1e3).toFixed(1)}K`:e.toLocaleString()}function l({active:e,payload:n,total:i,formatter:a}){if(!e||!n||!n.length)return null;let o=n[0],s=i>0?(o.value/i*100).toFixed(1):`0`;return(0,r.jsxs)(`div`,{className:t.cn(`px-3 py-2 text-sm rounded-lg shadow-lg`,`bg-foreground text-background`,`pointer-events-none min-w-[140px]`),children:[(0,r.jsxs)(`div`,{className:`font-semibold mb-1 flex items-center gap-2`,children:[(0,r.jsx)(`span`,{className:`w-2.5 h-2.5 rounded-full flex-shrink-0`,style:{backgroundColor:o.payload.color}}),o.name]}),(0,r.jsxs)(`div`,{className:`flex justify-between gap-4`,children:[(0,r.jsx)(`span`,{className:`opacity-70`,children:`Value:`}),(0,r.jsx)(`span`,{className:`font-medium`,children:a(o.value)})]}),(0,r.jsxs)(`div`,{className:`flex justify-between gap-4`,children:[(0,r.jsx)(`span`,{className:`opacity-70`,children:`Share:`}),(0,r.jsxs)(`span`,{children:[s,`%`]})]})]})}function u({cx:e,cy:t,midAngle:n,innerRadius:i,outerRadius:a,percent:o}){let s=Math.PI/180,c=i+(a-i)*.5+20,l=e+c*Math.cos(-n*s),u=t+c*Math.sin(-n*s);return o<.05?null:(0,r.jsx)(`text`,{x:l,y:u,fill:`currentColor`,textAnchor:l>e?`start`:`end`,dominantBaseline:`central`,className:`text-xs fill-foreground`,children:`${(o*100).toFixed(0)}%`})}function d({viewBox:e,total:t,formatter:n}){if(!e)return null;let{cx:i,cy:a}=e;return(0,r.jsxs)(`g`,{children:[(0,r.jsx)(`text`,{x:i,y:a-10,textAnchor:`middle`,dominantBaseline:`middle`,className:`text-xs fill-muted-foreground`,children:`Total`}),(0,r.jsx)(`text`,{x:i,y:a+12,textAnchor:`middle`,dominantBaseline:`middle`,className:`text-base font-bold fill-foreground`,children:n(t)})]})}function f({data:e,total:t,height:n,animated:a,showPercentages:o,showLegend:s,formatter:c,onSegmentClick:d}){return(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:n,children:(0,r.jsxs)(i.PieChart,{children:[(0,r.jsx)(i.Pie,{data:e,dataKey:`value`,nameKey:`name`,cx:`50%`,cy:`50%`,outerRadius:n/2-40,isAnimationActive:a,animationDuration:800,label:o?u:!1,labelLine:!1,onClick:d?(t,n)=>d(e[n]):void 0,style:d?{cursor:`pointer`}:void 0,children:e.map(e=>(0,r.jsx)(i.Cell,{fill:e.color},e.id))}),(0,r.jsx)(i.Tooltip,{content:(0,r.jsx)(l,{total:t,formatter:c})}),s&&(0,r.jsx)(i.Legend,{verticalAlign:`bottom`,formatter:e=>(0,r.jsx)(`span`,{className:`text-sm text-foreground`,children:e})})]})})}function p({data:e,total:t,height:n,animated:a,showPercentages:o,showLegend:s,formatter:c,onSegmentClick:f}){let p=n/2-40;return(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:n,children:(0,r.jsxs)(i.PieChart,{children:[(0,r.jsxs)(i.Pie,{data:e,dataKey:`value`,nameKey:`name`,cx:`50%`,cy:`50%`,innerRadius:p*.55,outerRadius:p,isAnimationActive:a,animationDuration:800,paddingAngle:2,label:o?u:!1,labelLine:!1,onClick:f?(t,n)=>f(e[n]):void 0,style:f?{cursor:`pointer`}:void 0,children:[e.map(e=>(0,r.jsx)(i.Cell,{fill:e.color},e.id)),(0,r.jsx)(d,{total:t,formatter:c})]}),(0,r.jsx)(i.Tooltip,{content:(0,r.jsx)(l,{total:t,formatter:c})}),s&&(0,r.jsx)(i.Legend,{verticalAlign:`bottom`,formatter:e=>(0,r.jsx)(`span`,{className:`text-sm text-foreground`,children:e})})]})})}function m({data:e,total:t,height:n,animated:a,showPercentages:o,showLegend:s,formatter:c,onSegmentClick:u}){return(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:n,children:(0,r.jsxs)(i.BarChart,{data:e.map(e=>({...e,percentage:t>0?(e.value/t*100).toFixed(1):`0`})),layout:`vertical`,barCategoryGap:`20%`,children:[(0,r.jsx)(i.XAxis,{type:`number`,tickFormatter:e=>o?`${t>0?(e/t*100).toFixed(0):0}%`:c(e),axisLine:!1,tickLine:!1,tick:{className:`text-xs fill-muted-foreground`}}),(0,r.jsx)(i.YAxis,{dataKey:`name`,type:`category`,width:100,axisLine:!1,tickLine:!1,tick:{className:`text-sm fill-foreground`}}),(0,r.jsx)(i.Tooltip,{content:(0,r.jsx)(l,{total:t,formatter:c})}),s&&(0,r.jsx)(i.Legend,{verticalAlign:`bottom`,formatter:e=>(0,r.jsx)(`span`,{className:`text-sm text-foreground`,children:e})}),(0,r.jsx)(i.Bar,{dataKey:`value`,name:`Credits`,radius:[0,4,4,0],isAnimationActive:a,animationDuration:800,barSize:24,onClick:u?(t,n)=>u(e[n]):void 0,style:u?{cursor:`pointer`}:void 0,children:e.map(e=>(0,r.jsx)(i.Cell,{fill:e.color},e.id))})]})})}function h({data:e,variant:i=`pie`,showPercentages:a=!1,showLegend:l=!0,height:u=300,animated:d=!0,onSegmentClick:h,formatValue:g,className:_}){let v=n.useMemo(()=>o(e),[e]),y={data:v,total:n.useMemo(()=>s(v),[v]),height:u,animated:d,showPercentages:a,showLegend:l,formatter:g||c,onSegmentClick:h};return(0,r.jsxs)(`div`,{className:t.cn(`w-full`,_),children:[i===`pie`&&(0,r.jsx)(f,{...y}),i===`donut`&&(0,r.jsx)(p,{...y}),i===`bar`&&(0,r.jsx)(m,{...y})]})}exports.WakaCreditBreakdown=h,exports.default=h;

package/dist/components/waka-credit-breakdown/index.es.js

@@ -0,0 +1,249 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Bar as i, BarChart as a, Cell as o, Legend as s, Pie as c, PieChart as l, ResponsiveContainer as u, Tooltip as d, XAxis as f, YAxis as p } from "recharts";
+//#region src/components/waka-credit-breakdown/index.tsx
+var m = [
+	"hsl(var(--chart-1))",
+	"hsl(var(--chart-2))",
+	"hsl(var(--chart-3))",
+	"hsl(var(--chart-4))",
+	"hsl(var(--chart-5))",
+	"hsl(var(--primary))",
+	"hsl(var(--info))",
+	"hsl(var(--warning))",
+	"hsl(var(--success))",
+	"hsl(var(--destructive))"
+];
+function h(e) {
+	return e.map((e, t) => ({
+		...e,
+		color: e.color || m[t % m.length]
+	}));
+}
+function g(e) {
+	return e.reduce((e, t) => e + t.value, 0);
+}
+function _(e) {
+	return e >= 1e6 ? `${(e / 1e6).toFixed(1)}M` : e >= 1e3 ? `${(e / 1e3).toFixed(1)}K` : e.toLocaleString();
+}
+function v({ active: t, payload: i, total: a, formatter: o }) {
+	if (!t || !i || !i.length) return null;
+	let s = i[0], c = a > 0 ? (s.value / a * 100).toFixed(1) : "0";
+	return /* @__PURE__ */ r("div", {
+		className: e("px-3 py-2 text-sm rounded-lg shadow-lg", "bg-foreground text-background", "pointer-events-none min-w-[140px]"),
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "font-semibold mb-1 flex items-center gap-2",
+				children: [/* @__PURE__ */ n("span", {
+					className: "w-2.5 h-2.5 rounded-full flex-shrink-0",
+					style: { backgroundColor: s.payload.color }
+				}), s.name]
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "flex justify-between gap-4",
+				children: [/* @__PURE__ */ n("span", {
+					className: "opacity-70",
+					children: "Value:"
+				}), /* @__PURE__ */ n("span", {
+					className: "font-medium",
+					children: o(s.value)
+				})]
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "flex justify-between gap-4",
+				children: [/* @__PURE__ */ n("span", {
+					className: "opacity-70",
+					children: "Share:"
+				}), /* @__PURE__ */ r("span", { children: [c, "%"] })]
+			})
+		]
+	});
+}
+function y({ cx: e, cy: t, midAngle: r, innerRadius: i, outerRadius: a, percent: o }) {
+	let s = Math.PI / 180, c = i + (a - i) * .5 + 20, l = e + c * Math.cos(-r * s), u = t + c * Math.sin(-r * s);
+	return o < .05 ? null : /* @__PURE__ */ n("text", {
+		x: l,
+		y: u,
+		fill: "currentColor",
+		textAnchor: l > e ? "start" : "end",
+		dominantBaseline: "central",
+		className: "text-xs fill-foreground",
+		children: `${(o * 100).toFixed(0)}%`
+	});
+}
+function b({ viewBox: e, total: t, formatter: i }) {
+	if (!e) return null;
+	let { cx: a, cy: o } = e;
+	return /* @__PURE__ */ r("g", { children: [/* @__PURE__ */ n("text", {
+		x: a,
+		y: o - 10,
+		textAnchor: "middle",
+		dominantBaseline: "middle",
+		className: "text-xs fill-muted-foreground",
+		children: "Total"
+	}), /* @__PURE__ */ n("text", {
+		x: a,
+		y: o + 12,
+		textAnchor: "middle",
+		dominantBaseline: "middle",
+		className: "text-base font-bold fill-foreground",
+		children: i(t)
+	})] });
+}
+function x({ data: e, total: t, height: i, animated: a, showPercentages: f, showLegend: p, formatter: m, onSegmentClick: h }) {
+	return /* @__PURE__ */ n(u, {
+		width: "100%",
+		height: i,
+		children: /* @__PURE__ */ r(l, { children: [
+			/* @__PURE__ */ n(c, {
+				data: e,
+				dataKey: "value",
+				nameKey: "name",
+				cx: "50%",
+				cy: "50%",
+				outerRadius: i / 2 - 40,
+				isAnimationActive: a,
+				animationDuration: 800,
+				label: f ? y : !1,
+				labelLine: !1,
+				onClick: h ? (t, n) => h(e[n]) : void 0,
+				style: h ? { cursor: "pointer" } : void 0,
+				children: e.map((e) => /* @__PURE__ */ n(o, { fill: e.color }, e.id))
+			}),
+			/* @__PURE__ */ n(d, { content: /* @__PURE__ */ n(v, {
+				total: t,
+				formatter: m
+			}) }),
+			p && /* @__PURE__ */ n(s, {
+				verticalAlign: "bottom",
+				formatter: (e) => /* @__PURE__ */ n("span", {
+					className: "text-sm text-foreground",
+					children: e
+				})
+			})
+		] })
+	});
+}
+function S({ data: e, total: t, height: i, animated: a, showPercentages: f, showLegend: p, formatter: m, onSegmentClick: h }) {
+	let g = i / 2 - 40;
+	return /* @__PURE__ */ n(u, {
+		width: "100%",
+		height: i,
+		children: /* @__PURE__ */ r(l, { children: [
+			/* @__PURE__ */ r(c, {
+				data: e,
+				dataKey: "value",
+				nameKey: "name",
+				cx: "50%",
+				cy: "50%",
+				innerRadius: g * .55,
+				outerRadius: g,
+				isAnimationActive: a,
+				animationDuration: 800,
+				paddingAngle: 2,
+				label: f ? y : !1,
+				labelLine: !1,
+				onClick: h ? (t, n) => h(e[n]) : void 0,
+				style: h ? { cursor: "pointer" } : void 0,
+				children: [e.map((e) => /* @__PURE__ */ n(o, { fill: e.color }, e.id)), /* @__PURE__ */ n(b, {
+					total: t,
+					formatter: m
+				})]
+			}),
+			/* @__PURE__ */ n(d, { content: /* @__PURE__ */ n(v, {
+				total: t,
+				formatter: m
+			}) }),
+			p && /* @__PURE__ */ n(s, {
+				verticalAlign: "bottom",
+				formatter: (e) => /* @__PURE__ */ n("span", {
+					className: "text-sm text-foreground",
+					children: e
+				})
+			})
+		] })
+	});
+}
+function C({ data: e, total: t, height: c, animated: l, showPercentages: m, showLegend: h, formatter: g, onSegmentClick: _ }) {
+	return /* @__PURE__ */ n(u, {
+		width: "100%",
+		height: c,
+		children: /* @__PURE__ */ r(a, {
+			data: e.map((e) => ({
+				...e,
+				percentage: t > 0 ? (e.value / t * 100).toFixed(1) : "0"
+			})),
+			layout: "vertical",
+			barCategoryGap: "20%",
+			children: [
+				/* @__PURE__ */ n(f, {
+					type: "number",
+					tickFormatter: (e) => m ? `${t > 0 ? (e / t * 100).toFixed(0) : 0}%` : g(e),
+					axisLine: !1,
+					tickLine: !1,
+					tick: { className: "text-xs fill-muted-foreground" }
+				}),
+				/* @__PURE__ */ n(p, {
+					dataKey: "name",
+					type: "category",
+					width: 100,
+					axisLine: !1,
+					tickLine: !1,
+					tick: { className: "text-sm fill-foreground" }
+				}),
+				/* @__PURE__ */ n(d, { content: /* @__PURE__ */ n(v, {
+					total: t,
+					formatter: g
+				}) }),
+				h && /* @__PURE__ */ n(s, {
+					verticalAlign: "bottom",
+					formatter: (e) => /* @__PURE__ */ n("span", {
+						className: "text-sm text-foreground",
+						children: e
+					})
+				}),
+				/* @__PURE__ */ n(i, {
+					dataKey: "value",
+					name: "Credits",
+					radius: [
+						0,
+						4,
+						4,
+						0
+					],
+					isAnimationActive: l,
+					animationDuration: 800,
+					barSize: 24,
+					onClick: _ ? (t, n) => _(e[n]) : void 0,
+					style: _ ? { cursor: "pointer" } : void 0,
+					children: e.map((e) => /* @__PURE__ */ n(o, { fill: e.color }, e.id))
+				})
+			]
+		})
+	});
+}
+function w({ data: i, variant: a = "pie", showPercentages: o = !1, showLegend: s = !0, height: c = 300, animated: l = !0, onSegmentClick: u, formatValue: d, className: f }) {
+	let p = t.useMemo(() => h(i), [i]), m = {
+		data: p,
+		total: t.useMemo(() => g(p), [p]),
+		height: c,
+		animated: l,
+		showPercentages: o,
+		showLegend: s,
+		formatter: d || _,
+		onSegmentClick: u
+	};
+	return /* @__PURE__ */ r("div", {
+		className: e("w-full", f),
+		children: [
+			a === "pie" && /* @__PURE__ */ n(x, { ...m }),
+			a === "donut" && /* @__PURE__ */ n(S, { ...m }),
+			a === "bar" && /* @__PURE__ */ n(C, { ...m })
+		]
+	});
+}
+//#endregion
+export { w as WakaCreditBreakdown, w as default };

package/dist/components/waka-credit-burn-rate/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");function a(e){if(e.length===0)return 0;let t=e.slice(-7);return t.reduce((e,t)=>e+t.value,0)/t.length}function o(e,t){return t<=0?1/0:Math.floor(e/t)}function s(e){if(!isFinite(e)||e<=0)return null;let t=new Date;return t.setDate(t.getDate()+e),t}function c(e){return e.toLocaleDateString(`en-US`,{month:`short`,day:`numeric`,year:`numeric`})}function l(e){return e<7?{stroke:`#ef4444`,text:`text-red-600`,bg:`bg-red-100 dark:bg-red-950`,label:`Critical`}:e<=30?{stroke:`#f59e0b`,text:`text-amber-600`,bg:`bg-amber-100 dark:bg-amber-950`,label:`Warning`}:{stroke:`#22c55e`,text:`text-green-600`,bg:`bg-green-100 dark:bg-green-950`,label:`Healthy`}}function u({dailyUsage:e,avgBurnRate:r,width:a,height:o,showProjection:s,projectionDays:c,statusColor:l,animated:u}){let[d,f]=n.useState(0),[p,m]=n.useState(!u),h=n.useRef(null),g=a-4,_=o-4,v=e.length+(s?c:0),y=e.map(e=>e.value),b=s?Array.from({length:c},()=>r):[],x=[...y,...b],S=Math.min(...x,0),C=Math.max(...x,1)-S||1,w=e.map((e,t)=>`${2+t/(v-1)*g},${2+_-(e.value-S)/C*_}`),T=[];if(s&&e.length>0){let t=e.length-1,n=2+t/(v-1)*g,i=2+_-(e[t].value-S)/C*_;T.push(`${n},${i}`);for(let t=1;t<=c;t++){let n=2+(e.length-1+t)/(v-1)*g,i=2+_-(r-S)/C*_;T.push(`${n},${i}`)}}return n.useEffect(()=>{h.current&&f(h.current.getTotalLength())},[e]),n.useEffect(()=>{if(u&&d>0){let e=setTimeout(()=>m(!0),50);return()=>clearTimeout(e)}},[u,d]),e.length<2?(0,i.jsx)(`svg`,{width:a,height:o,children:(0,i.jsx)(`text`,{x:a/2,y:o/2,textAnchor:`middle`,dominantBaseline:`middle`,className:`text-xs fill-muted-foreground`,children:`Not enough data`})}):(0,i.jsxs)(`svg`,{width:a,height:o,className:`overflow-visible`,children:[(0,i.jsx)(`polyline`,{ref:h,points:w.join(` `),fill:`none`,stroke:l,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`,style:u&&d>0?{strokeDasharray:d,strokeDashoffset:p?0:d,transition:`stroke-dashoffset 1s ease-out`}:void 0}),s&&T.length>1&&(0,i.jsx)(`polyline`,{points:T.join(` `),fill:`none`,stroke:l,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeDasharray:`4,3`,opacity:`0.5`,className:t.cn(u&&`transition-opacity duration-500`,u&&(p?`opacity-50`:`opacity-0`))}),e.length>0&&(0,i.jsx)(`circle`,{cx:parseFloat(w[w.length-1].split(`,`)[0]),cy:parseFloat(w[w.length-1].split(`,`)[1]),r:`2.5`,fill:l,stroke:`white`,strokeWidth:`1`,className:t.cn(u&&`transition-opacity duration-500`,u&&(p?`opacity-100`:`opacity-0`))})]})}function d({dailyUsage:e,avgBurnRate:n,daysRemaining:r,width:a,height:o,showProjection:s,projectionDays:c,animated:d,className:f}){let p=l(r);return(0,i.jsxs)(`div`,{className:t.cn(`inline-flex items-center gap-2`,f),children:[(0,i.jsx)(u,{dailyUsage:e,avgBurnRate:n,width:a,height:o,showProjection:s,projectionDays:c,statusColor:p.stroke,animated:d}),(0,i.jsx)(`span`,{className:t.cn(`text-xs font-medium tabular-nums`,p.text),children:isFinite(r)?`${r}d`:`--`})]})}function f({dailyUsage:e,balance:n,avgBurnRate:a,daysRemaining:o,depletionDate:s,width:d,height:f,showProjection:p,projectionDays:m,animated:h,className:g}){let _=l(o);return(0,i.jsxs)(`div`,{className:t.cn(`rounded-lg border bg-card p-4 space-y-4`,g),children:[(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 text-sm font-medium text-muted-foreground`,children:[(0,i.jsx)(r.TrendingDown,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{children:`Credit Burn Rate`})]}),(0,i.jsx)(`div`,{className:t.cn(`px-2 py-0.5 rounded-full text-xs font-medium`,_.bg,_.text),children:_.label})]}),(0,i.jsx)(`div`,{className:`flex justify-center`,children:(0,i.jsx)(u,{dailyUsage:e,avgBurnRate:a,width:d,height:f,showProjection:p,projectionDays:m,statusColor:_.stroke,animated:h})}),(0,i.jsxs)(`div`,{className:`grid grid-cols-3 gap-3`,children:[(0,i.jsxs)(`div`,{className:`space-y-1`,children:[(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Burn Rate`}),(0,i.jsx)(`div`,{className:`text-lg font-bold tabular-nums`,children:a.toFixed(1)}),(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`credits/day`})]}),(0,i.jsxs)(`div`,{className:`space-y-1`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-1 text-xs text-muted-foreground`,children:[(0,i.jsx)(r.Clock,{className:`h-3 w-3`}),(0,i.jsx)(`span`,{children:`Days Left`})]}),(0,i.jsx)(`div`,{className:t.cn(`text-lg font-bold tabular-nums`,_.text),children:isFinite(o)?o:`--`}),(0,i.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[n.toLocaleString(),` credits`]})]}),(0,i.jsxs)(`div`,{className:`space-y-1`,children:[(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:`Depleted By`}),(0,i.jsx)(`div`,{className:t.cn(`text-sm font-semibold`,_.text),children:s?c(s):`--`}),o<7&&isFinite(o)&&(0,i.jsxs)(`div`,{className:`flex items-center gap-1 text-xs text-red-600`,children:[(0,i.jsx)(r.AlertTriangle,{className:`h-3 w-3`}),(0,i.jsx)(`span`,{children:`Critical`})]})]})]})]})}function p({dailyUsage:e,balance:r,showProjection:c=!1,projectionDays:l=7,width:u=120,height:p=32,animated:m=!0,variant:h=`sparkline`,className:g}){let _=n.useMemo(()=>a(e),[e]),v=n.useMemo(()=>o(r,_),[r,_]),y=n.useMemo(()=>s(v),[v]);return!e||e.length===0?(0,i.jsx)(`div`,{className:t.cn(`inline-flex items-center gap-2 text-muted-foreground text-sm`,g),children:`No data`}):h===`card`?(0,i.jsx)(f,{dailyUsage:e,balance:r,avgBurnRate:_,daysRemaining:v,depletionDate:y,width:Math.max(u,200),height:Math.max(p,48),showProjection:c,projectionDays:l,animated:m,className:g}):(0,i.jsx)(d,{dailyUsage:e,avgBurnRate:_,daysRemaining:v,width:u,height:p,showProjection:c,projectionDays:l,animated:m,className:g})}exports.WakaCreditBurnRate=p,exports.default=p;