@wakastellar/ui 4.0.0 → 4.0.1

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

@@ -0,0 +1,305 @@
+"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";
+//#region src/components/waka-credit-meter/index.tsx
+var i = {
+	warning: 70,
+	critical: 90
+}, a = {
+	sm: {
+		svgSize: 80,
+		strokeWidth: 6,
+		fontSize: "text-xs",
+		subFontSize: "text-[9px]",
+		labelSize: "text-xs",
+		barHeight: "h-2",
+		barText: "text-xs"
+	},
+	md: {
+		svgSize: 120,
+		strokeWidth: 8,
+		fontSize: "text-sm",
+		subFontSize: "text-[10px]",
+		labelSize: "text-sm",
+		barHeight: "h-3",
+		barText: "text-sm"
+	},
+	lg: {
+		svgSize: 180,
+		strokeWidth: 12,
+		fontSize: "text-xl",
+		subFontSize: "text-xs",
+		labelSize: "text-base",
+		barHeight: "h-4",
+		barText: "text-base"
+	}
+}, o = {
+	ring: {
+		startAngle: 0,
+		endAngle: 360,
+		rotation: -90
+	},
+	gauge: {
+		startAngle: 0,
+		endAngle: 180,
+		rotation: -90
+	}
+};
+function s(e, t, n, r) {
+	let i = (r - 90) * Math.PI / 180;
+	return {
+		x: e + n * Math.cos(i),
+		y: t + n * Math.sin(i)
+	};
+}
+function c(e, t, n, r, i) {
+	let a = s(e, t, n, i), o = s(e, t, n, r), c = i - r <= 180 ? "0" : "1";
+	return [
+		"M",
+		a.x,
+		a.y,
+		"A",
+		n,
+		n,
+		0,
+		c,
+		0,
+		o.x,
+		o.y
+	].join(" ");
+}
+function l(e, t) {
+	return e >= t.critical ? {
+		color: "#ef4444",
+		glowColor: "rgba(239, 68, 68, 0.6)",
+		zone: "critical"
+	} : e >= t.warning ? {
+		color: "#eab308",
+		glowColor: "rgba(234, 179, 8, 0.4)",
+		zone: "warning"
+	} : {
+		color: "#22c55e",
+		glowColor: "rgba(34, 197, 94, 0.3)",
+		zone: "normal"
+	};
+}
+function u(e) {
+	return e.toLocaleString("en-US");
+}
+function d(e, n, r = 800) {
+	let [i, a] = t.useState(n ? 0 : e), o = t.useRef(void 0), s = t.useRef(n ? 0 : 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);
+			a(t + i * (1 - (1 - d) ** 3)), d < 1 ? o.current = requestAnimationFrame(l) : (a(e), s.current = e);
+		};
+		return o.current = requestAnimationFrame(l), () => {
+			o.current && cancelAnimationFrame(o.current);
+		};
+	}, [
+		e,
+		n,
+		r
+	]), i;
+}
+function f({ used: t, total: i, percentage: l, displayPercentage: u, color: d, glowColor: f, zone: p, variant: m, size: h, showValue: g, showLabel: _, label: v, formatValue: y, className: b }) {
+	let x = a[h], S = o[m], C = x.svgSize, w = C / 2, T = (C - x.strokeWidth) / 2, E = c(w, w, T, 0, S.endAngle - .01), D = c(w, w, T, 0, u / 100 * S.endAngle || .01), O = m === "ring" ? C : C / 2 + x.strokeWidth, k = p === "critical";
+	return /* @__PURE__ */ r("div", {
+		className: e("inline-flex flex-col items-center gap-1", b),
+		children: [/* @__PURE__ */ r("div", {
+			className: "relative",
+			style: {
+				width: C,
+				height: O,
+				overflow: "visible"
+			},
+			children: [
+				k && /* @__PURE__ */ n("div", {
+					className: "absolute inset-0 rounded-full blur-xl animate-pulse",
+					style: { background: `radial-gradient(circle, ${f} 0%, transparent 70%)` }
+				}),
+				/* @__PURE__ */ r("svg", {
+					width: C,
+					height: C,
+					viewBox: `0 0 ${C} ${C}`,
+					className: "overflow-visible",
+					style: { transform: `rotate(${S.rotation}deg)` },
+					children: [
+						/* @__PURE__ */ r("defs", { children: [/* @__PURE__ */ r("linearGradient", {
+							id: `credit-meter-gradient-${h}-${m}`,
+							x1: "0%",
+							y1: "0%",
+							x2: "100%",
+							y2: "0%",
+							children: [/* @__PURE__ */ n("stop", {
+								offset: "0%",
+								stopColor: d,
+								stopOpacity: "0.8"
+							}), /* @__PURE__ */ n("stop", {
+								offset: "100%",
+								stopColor: d,
+								stopOpacity: "1"
+							})]
+						}), /* @__PURE__ */ n("filter", {
+							id: `credit-meter-shadow-${h}-${m}`,
+							x: "-20%",
+							y: "-20%",
+							width: "140%",
+							height: "140%",
+							children: /* @__PURE__ */ n("feDropShadow", {
+								dx: "0",
+								dy: "0",
+								stdDeviation: "3",
+								floodColor: d,
+								floodOpacity: "0.5"
+							})
+						})] }),
+						/* @__PURE__ */ n("path", {
+							d: E,
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: x.strokeWidth,
+							strokeLinecap: "round",
+							className: "text-muted opacity-20"
+						}),
+						/* @__PURE__ */ n("path", {
+							d: D,
+							fill: "none",
+							stroke: `url(#credit-meter-gradient-${h}-${m})`,
+							strokeWidth: x.strokeWidth,
+							strokeLinecap: "round",
+							filter: k ? `url(#credit-meter-shadow-${h}-${m})` : void 0,
+							className: "transition-all duration-300 ease-out"
+						}),
+						u > 0 && /* @__PURE__ */ n("circle", {
+							cx: s(w, w, T, u / 100 * S.endAngle).x,
+							cy: s(w, w, T, u / 100 * S.endAngle).y,
+							r: x.strokeWidth / 3,
+							fill: "white",
+							className: e("transition-all duration-300", k && "animate-pulse")
+						})
+					]
+				}),
+				g && /* @__PURE__ */ r("div", {
+					className: e("absolute inset-0 flex flex-col items-center justify-center", m === "gauge" && "top-auto bottom-0 pb-1"),
+					style: {
+						height: m === "gauge" ? C / 2 : void 0,
+						top: m === "gauge" ? "auto" : void 0
+					},
+					children: [/* @__PURE__ */ r("div", {
+						className: "flex items-baseline gap-0.5",
+						children: [/* @__PURE__ */ n("span", {
+							className: e("font-bold tabular-nums transition-colors duration-300", x.fontSize),
+							style: { color: d },
+							children: y(Math.round(t))
+						}), /* @__PURE__ */ r("span", {
+							className: e("font-medium text-muted-foreground", x.subFontSize),
+							children: ["/", y(i)]
+						})]
+					}), /* @__PURE__ */ r("span", {
+						className: e("font-medium tabular-nums text-muted-foreground", x.subFontSize),
+						children: [Math.round(l), "%"]
+					})]
+				})
+			]
+		}), _ && v && /* @__PURE__ */ n("span", {
+			className: e("text-muted-foreground text-center", x.labelSize),
+			children: v
+		})]
+	});
+}
+function p({ used: t, total: i, percentage: o, displayPercentage: s, color: c, zone: l, size: u, showValue: d, showLabel: f, animated: p, label: m, formatValue: h, className: g }) {
+	let _ = a[u], v = l === "critical" ? "bg-destructive" : l === "warning" ? "bg-warning" : "bg-success";
+	return /* @__PURE__ */ r("div", {
+		className: e("w-full", g),
+		children: [
+			f && m || d ? /* @__PURE__ */ r("div", {
+				className: e("flex items-center justify-between mb-2"),
+				children: [f && m && /* @__PURE__ */ n("span", {
+					className: e("font-medium", _.barText),
+					children: m
+				}), d && /* @__PURE__ */ r("div", {
+					className: e("flex items-center gap-1.5 text-muted-foreground", _.barText),
+					children: [
+						/* @__PURE__ */ n("span", {
+							className: "tabular-nums",
+							style: { color: c },
+							children: h(Math.round(t))
+						}),
+						/* @__PURE__ */ n("span", { children: "/" }),
+						/* @__PURE__ */ n("span", {
+							className: "tabular-nums",
+							children: h(i)
+						}),
+						/* @__PURE__ */ r("span", {
+							className: "text-muted-foreground",
+							children: [
+								"(",
+								Math.round(o),
+								"%)"
+							]
+						})
+					]
+				})]
+			}) : null,
+			/* @__PURE__ */ n("div", {
+				className: e("relative w-full overflow-hidden rounded-full bg-muted", _.barHeight),
+				children: /* @__PURE__ */ n("div", {
+					className: e("h-full rounded-full transition-colors duration-300", v, l === "critical" && "animate-pulse"),
+					style: {
+						width: `${Math.min(s, 100)}%`,
+						transition: p ? void 0 : "width 0.3s ease-out"
+					},
+					children: p && /* @__PURE__ */ n("div", {
+						className: "absolute inset-0 overflow-hidden rounded-full",
+						children: /* @__PURE__ */ n("div", { className: "absolute inset-0 animate-credit-meter-shine" })
+					})
+				})
+			}),
+			/* @__PURE__ */ n("style", { children: "\n        @keyframes credit-meter-shine {\n          0% { transform: translateX(-100%); opacity: 0; }\n          50% { opacity: 0.3; }\n          100% { transform: translateX(100%); opacity: 0; }\n        }\n        .animate-credit-meter-shine {\n          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\n          animation: credit-meter-shine 2s ease-in-out infinite;\n        }\n      " })
+		]
+	});
+}
+function m({ used: e, total: t, variant: r = "ring", thresholds: a = i, showLabel: o = !0, showValue: s = !0, size: c = "md", animated: m = !0, label: h, formatValue: g = u, className: _ }) {
+	let v = t > 0 ? Math.min(100, Math.max(0, e / t * 100)) : 0, y = d(v, m), { color: b, glowColor: x, zone: S } = l(v, a);
+	return r === "bar" ? /* @__PURE__ */ n(p, {
+		used: e,
+		total: t,
+		percentage: v,
+		displayPercentage: y,
+		color: b,
+		zone: S,
+		size: c,
+		showValue: s,
+		showLabel: o,
+		animated: m,
+		label: h,
+		formatValue: g,
+		className: _
+	}) : /* @__PURE__ */ n(f, {
+		used: e,
+		total: t,
+		percentage: v,
+		displayPercentage: y,
+		color: b,
+		glowColor: x,
+		zone: S,
+		variant: r,
+		size: c,
+		showValue: s,
+		showLabel: o,
+		label: h,
+		formatValue: g,
+		className: _
+	});
+}
+//#endregion
+export { m as default };

package/dist/components/waka-credit-pricing-pack/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(`../card/index.cjs.js`);let a=require(`react`);a=e.__toESM(a);let o=require(`lucide-react`),s=require(`react/jsx-runtime`);function c(e){return e.toLocaleString(`en-US`)}function l(e,t){return Number.isInteger(e)?`${e}${t}`:`${e.toFixed(2)}${t}`}function u(e,t){return`${e.toFixed(4).replace(/0+$/,``).replace(/\.$/,``)}${t}/credit`}function d({pack:e,selected:a,onSelect:d,currency:f}){let p=e.currency||f;return(0,s.jsxs)(i.Card,{className:t.cn(`relative flex flex-col transition-all duration-200 cursor-pointer`,a&&[`border-primary shadow-lg shadow-primary/10`,`ring-2 ring-primary/30`],e.highlighted&&!a&&`bg-muted/30`,!a&&!e.highlighted&&`hover:border-muted-foreground/30`),onClick:()=>d(e),children:[e.highlighted&&e.highlightLabel&&(0,s.jsx)(`div`,{className:`absolute -top-3 left-1/2 -translate-x-1/2 z-10`,children:(0,s.jsxs)(n.Badge,{className:`inline-flex items-center gap-1 rounded-full px-3 py-1 shadow-sm`,children:[(0,s.jsx)(o.Sparkles,{className:`h-3 w-3`}),e.highlightLabel]})}),(0,s.jsx)(i.CardHeader,{className:t.cn(`pb-2`,e.highlighted&&`pt-8`),children:(0,s.jsx)(`h3`,{className:`text-lg font-bold text-foreground`,children:e.name})}),(0,s.jsxs)(i.CardContent,{className:`flex flex-1 flex-col gap-3`,children:[(0,s.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,s.jsx)(o.Coins,{className:`h-5 w-5 text-primary`}),(0,s.jsx)(`span`,{className:`text-3xl font-bold text-foreground`,children:c(e.credits)}),(0,s.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:`credits`})]}),(0,s.jsx)(`div`,{className:`text-2xl font-semibold text-foreground`,children:l(e.price,p)}),e.unitPrice!=null&&e.unitPrice>0&&(0,s.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:u(e.unitPrice,p)}),e.bonusPercent!=null&&e.bonusPercent>0&&(0,s.jsxs)(n.Badge,{variant:`secondary`,className:`w-fit rounded-full`,children:[`+`,e.bonusPercent,`% bonus`]}),(0,s.jsx)(`div`,{className:`flex-1`}),(0,s.jsx)(r.Button,{type:`button`,variant:a?`default`:`outline`,className:`mt-2 w-full`,onClick:t=>{t.stopPropagation(),d(e)},children:a?(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o.Check,{className:`h-4 w-4`}),`Selected`]}):`Select`})]})]})}function f({packs:e,selectedId:n,onSelect:r,currency:i=`€`,columns:a=3,className:o}){return(0,s.jsx)(`div`,{className:t.cn(`grid gap-6`,{2:`grid-cols-1 md:grid-cols-2`,3:`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`,4:`grid-cols-1 md:grid-cols-2 lg:grid-cols-4`}[a],o),children:e.map(e=>(0,s.jsx)(d,{pack:e,selected:e.id===n,onSelect:r,currency:i},e.id))})}exports.default=f;

package/dist/components/waka-credit-pricing-pack/index.es.js

@@ -0,0 +1,105 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Badge as t } from "../badge/index.es.js";
+import { Button as n } from "../button/index.es.js";
+import { Card as r, CardContent as i, CardHeader as a } from "../card/index.es.js";
+import "react";
+import { Check as o, Coins as s, Sparkles as c } from "lucide-react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/waka-credit-pricing-pack/index.tsx
+function f(e) {
+	return e.toLocaleString("en-US");
+}
+function p(e, t) {
+	return Number.isInteger(e) ? `${e}${t}` : `${e.toFixed(2)}${t}`;
+}
+function m(e, t) {
+	return `${e.toFixed(4).replace(/0+$/, "").replace(/\.$/, "")}${t}/credit`;
+}
+function h({ pack: h, selected: g, onSelect: _, currency: v }) {
+	let y = h.currency || v;
+	return /* @__PURE__ */ d(r, {
+		className: e("relative flex flex-col transition-all duration-200 cursor-pointer", g && ["border-primary shadow-lg shadow-primary/10", "ring-2 ring-primary/30"], h.highlighted && !g && "bg-muted/30", !g && !h.highlighted && "hover:border-muted-foreground/30"),
+		onClick: () => _(h),
+		children: [
+			h.highlighted && h.highlightLabel && /* @__PURE__ */ u("div", {
+				className: "absolute -top-3 left-1/2 -translate-x-1/2 z-10",
+				children: /* @__PURE__ */ d(t, {
+					className: "inline-flex items-center gap-1 rounded-full px-3 py-1 shadow-sm",
+					children: [/* @__PURE__ */ u(c, { className: "h-3 w-3" }), h.highlightLabel]
+				})
+			}),
+			/* @__PURE__ */ u(a, {
+				className: e("pb-2", h.highlighted && "pt-8"),
+				children: /* @__PURE__ */ u("h3", {
+					className: "text-lg font-bold text-foreground",
+					children: h.name
+				})
+			}),
+			/* @__PURE__ */ d(i, {
+				className: "flex flex-1 flex-col gap-3",
+				children: [
+					/* @__PURE__ */ d("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ u(s, { className: "h-5 w-5 text-primary" }),
+							/* @__PURE__ */ u("span", {
+								className: "text-3xl font-bold text-foreground",
+								children: f(h.credits)
+							}),
+							/* @__PURE__ */ u("span", {
+								className: "text-sm text-muted-foreground",
+								children: "credits"
+							})
+						]
+					}),
+					/* @__PURE__ */ u("div", {
+						className: "text-2xl font-semibold text-foreground",
+						children: p(h.price, y)
+					}),
+					h.unitPrice != null && h.unitPrice > 0 && /* @__PURE__ */ u("p", {
+						className: "text-sm text-muted-foreground",
+						children: m(h.unitPrice, y)
+					}),
+					h.bonusPercent != null && h.bonusPercent > 0 && /* @__PURE__ */ d(t, {
+						variant: "secondary",
+						className: "w-fit rounded-full",
+						children: [
+							"+",
+							h.bonusPercent,
+							"% bonus"
+						]
+					}),
+					/* @__PURE__ */ u("div", { className: "flex-1" }),
+					/* @__PURE__ */ u(n, {
+						type: "button",
+						variant: g ? "default" : "outline",
+						className: "mt-2 w-full",
+						onClick: (e) => {
+							e.stopPropagation(), _(h);
+						},
+						children: g ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(o, { className: "h-4 w-4" }), "Selected"] }) : "Select"
+					})
+				]
+			})
+		]
+	});
+}
+function g({ packs: t, selectedId: n, onSelect: r, currency: i = "€", columns: a = 3, className: o }) {
+	return /* @__PURE__ */ u("div", {
+		className: e("grid gap-6", {
+			2: "grid-cols-1 md:grid-cols-2",
+			3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+			4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+		}[a], o),
+		children: t.map((e) => /* @__PURE__ */ u(h, {
+			pack: e,
+			selected: e.id === n,
+			onSelect: r,
+			currency: i
+		}, e.id))
+	});
+}
+//#endregion
+export { g as default };

package/dist/components/waka-credit-projection/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`);function a(e){return new Date(e)}function o(e){return a(e).toLocaleDateString(`en-US`,{month:`short`,day:`numeric`})}function s(e,t){let n=a(e);return n.setDate(n.getDate()+t),n.toISOString().split(`T`)[0]}function c(e){if(e.length<2)return 0;let t=[...e].sort((e,t)=>a(e.date).getTime()-a(t.date).getTime()),n=t[0],r=t[t.length-1],i=(a(r.date).getTime()-a(n.date).getTime())/(1e3*60*60*24);return i===0?0:(n.value-r.value)/i}function l(e,t,n,r){let i=[...e].sort((e,t)=>a(e.date).getTime()-a(t.date).getTime()),o=c(i),l=i.map(e=>({date:e.date,historical:e.value})),u=i.length>0?i[i.length-1].date:new Date().toISOString().split(`T`)[0],d=null;i.length>0&&(l[l.length-1].projected=t,r&&(l[l.length-1].upperBound=t,l[l.length-1].lowerBound=t));for(let e=1;e<=n;e++){let i=s(u,e),a=Math.max(0,t-o*e),c=e/n*.2,f=Math.max(0,t-o*e*(1-c)),p=Math.max(0,t-o*e*(1+c)),m={date:i,projected:a};r&&(m.upperBound=f,m.lowerBound=p),l.push(m),d===null&&a<=0&&(d=i)}return{chartData:l,depletionDate:d}}function u({active:e,payload:t,label:n}){if(!e||!t||t.length===0||!n)return null;let i=t.find(e=>e.dataKey===`historical`),a=t.find(e=>e.dataKey===`projected`),s=t.find(e=>e.dataKey===`upperBound`),c=t.find(e=>e.dataKey===`lowerBound`);return(0,r.jsxs)(`div`,{className:`rounded-lg border bg-background px-3 py-2 shadow-md`,children:[(0,r.jsx)(`p`,{className:`text-xs font-medium text-foreground mb-1`,children:o(n)}),i&&i.value!=null&&(0,r.jsxs)(`p`,{className:`text-xs text-blue-600`,children:[`Balance: `,i.value.toLocaleString()]}),a&&a.value!=null&&(0,r.jsxs)(`p`,{className:`text-xs text-muted-foreground`,children:[`Projected: `,a.value.toLocaleString()]}),s&&c&&s.value!=null&&c.value!=null&&(0,r.jsxs)(`p`,{className:`text-xs text-muted-foreground/70`,children:[`Range: `,c.value.toLocaleString(),` - `,s.value.toLocaleString()]})]})}function d({depletionDate:e}){return e?(0,r.jsxs)(`div`,{className:`mt-2 text-sm text-red-600 font-medium text-center`,children:[`Estimated depletion: `,o(e)]}):null}function f({historicalData:e,balance:a,projectionDays:s=30,confidenceInterval:c=!1,height:f=300,animated:p=!0,className:m}){let{chartData:h,depletionDate:g}=n.useMemo(()=>l(e,a,s,c),[e,a,s,c]);return e.length===0?(0,r.jsx)(`div`,{className:t.cn(`flex items-center justify-center text-muted-foreground text-sm border border-dashed border-border rounded-lg`,m),style:{height:f},children:`No historical data available`}):(0,r.jsxs)(`div`,{className:t.cn(`w-full`,m),children:[(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:f,children:(0,r.jsxs)(i.AreaChart,{data:h,margin:{top:10,right:30,left:10,bottom:0},children:[(0,r.jsxs)(`defs`,{children:[(0,r.jsxs)(`linearGradient`,{id:`historicalGradient`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,r.jsx)(`stop`,{offset:`5%`,stopColor:`#3b82f6`,stopOpacity:.3}),(0,r.jsx)(`stop`,{offset:`95%`,stopColor:`#3b82f6`,stopOpacity:.05})]}),(0,r.jsxs)(`linearGradient`,{id:`confidenceGradient`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,r.jsx)(`stop`,{offset:`5%`,stopColor:`#9ca3af`,stopOpacity:.2}),(0,r.jsx)(`stop`,{offset:`95%`,stopColor:`#9ca3af`,stopOpacity:.05})]})]}),(0,r.jsx)(i.CartesianGrid,{strokeDasharray:`3 3`,stroke:`#e5e7eb`,vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`date`,tickFormatter:o,tick:{fontSize:12,fill:`#6b7280`},axisLine:{stroke:`#d1d5db`},tickLine:{stroke:`#d1d5db`}}),(0,r.jsx)(i.YAxis,{tick:{fontSize:12,fill:`#6b7280`},axisLine:{stroke:`#d1d5db`},tickLine:{stroke:`#d1d5db`},tickFormatter:e=>e>=1e3?`${(e/1e3).toFixed(0)}k`:String(e)}),(0,r.jsx)(i.Tooltip,{content:(0,r.jsx)(u,{})}),(0,r.jsx)(i.ReferenceLine,{y:0,stroke:`#ef4444`,strokeWidth:2}),c&&(0,r.jsx)(i.Area,{type:`monotone`,dataKey:`upperBound`,stroke:`none`,fill:`url(#confidenceGradient)`,fillOpacity:1,isAnimationActive:p,animationDuration:1e3}),c&&(0,r.jsx)(i.Area,{type:`monotone`,dataKey:`lowerBound`,stroke:`none`,fill:`#ffffff`,fillOpacity:1,isAnimationActive:p,animationDuration:1e3}),(0,r.jsx)(i.Area,{type:`monotone`,dataKey:`historical`,stroke:`#3b82f6`,strokeWidth:2,fill:`url(#historicalGradient)`,fillOpacity:1,isAnimationActive:p,animationDuration:1e3,connectNulls:!1}),(0,r.jsx)(i.Line,{type:`monotone`,dataKey:`projected`,stroke:`#6b7280`,strokeWidth:2,strokeDasharray:`6 3`,dot:!1,isAnimationActive:p,animationDuration:1e3,connectNulls:!1})]})}),(0,r.jsx)(d,{depletionDate:g})]})}exports.default=f;

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

@@ -0,0 +1,212 @@
+"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 { Area as i, AreaChart as a, CartesianGrid as o, Line as s, ReferenceLine as c, ResponsiveContainer as l, Tooltip as u, XAxis as d, YAxis as f } from "recharts";
+//#region src/components/waka-credit-projection/index.tsx
+function p(e) {
+	return new Date(e);
+}
+function m(e) {
+	return p(e).toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric"
+	});
+}
+function h(e, t) {
+	let n = p(e);
+	return n.setDate(n.getDate() + t), n.toISOString().split("T")[0];
+}
+function g(e) {
+	if (e.length < 2) return 0;
+	let t = [...e].sort((e, t) => p(e.date).getTime() - p(t.date).getTime()), n = t[0], r = t[t.length - 1], i = (p(r.date).getTime() - p(n.date).getTime()) / (1e3 * 60 * 60 * 24);
+	return i === 0 ? 0 : (n.value - r.value) / i;
+}
+function _(e, t, n, r) {
+	let i = [...e].sort((e, t) => p(e.date).getTime() - p(t.date).getTime()), a = g(i), o = i.map((e) => ({
+		date: e.date,
+		historical: e.value
+	})), s = i.length > 0 ? i[i.length - 1].date : (/* @__PURE__ */ new Date()).toISOString().split("T")[0], c = null;
+	i.length > 0 && (o[o.length - 1].projected = t, r && (o[o.length - 1].upperBound = t, o[o.length - 1].lowerBound = t));
+	for (let e = 1; e <= n; e++) {
+		let i = h(s, e), l = Math.max(0, t - a * e), u = e / n * .2, d = Math.max(0, t - a * e * (1 - u)), f = Math.max(0, t - a * e * (1 + u)), p = {
+			date: i,
+			projected: l
+		};
+		r && (p.upperBound = d, p.lowerBound = f), o.push(p), c === null && l <= 0 && (c = i);
+	}
+	return {
+		chartData: o,
+		depletionDate: c
+	};
+}
+function v({ active: e, payload: t, label: i }) {
+	if (!e || !t || t.length === 0 || !i) return null;
+	let a = t.find((e) => e.dataKey === "historical"), o = t.find((e) => e.dataKey === "projected"), s = t.find((e) => e.dataKey === "upperBound"), c = t.find((e) => e.dataKey === "lowerBound");
+	return /* @__PURE__ */ r("div", {
+		className: "rounded-lg border bg-background px-3 py-2 shadow-md",
+		children: [
+			/* @__PURE__ */ n("p", {
+				className: "text-xs font-medium text-foreground mb-1",
+				children: m(i)
+			}),
+			a && a.value != null && /* @__PURE__ */ r("p", {
+				className: "text-xs text-blue-600",
+				children: ["Balance: ", a.value.toLocaleString()]
+			}),
+			o && o.value != null && /* @__PURE__ */ r("p", {
+				className: "text-xs text-muted-foreground",
+				children: ["Projected: ", o.value.toLocaleString()]
+			}),
+			s && c && s.value != null && c.value != null && /* @__PURE__ */ r("p", {
+				className: "text-xs text-muted-foreground/70",
+				children: [
+					"Range: ",
+					c.value.toLocaleString(),
+					" - ",
+					s.value.toLocaleString()
+				]
+			})
+		]
+	});
+}
+function y({ depletionDate: e }) {
+	return e ? /* @__PURE__ */ r("div", {
+		className: "mt-2 text-sm text-red-600 font-medium text-center",
+		children: ["Estimated depletion: ", m(e)]
+	}) : null;
+}
+function b({ historicalData: p, balance: h, projectionDays: g = 30, confidenceInterval: b = !1, height: x = 300, animated: S = !0, className: C }) {
+	let { chartData: w, depletionDate: T } = t.useMemo(() => _(p, h, g, b), [
+		p,
+		h,
+		g,
+		b
+	]);
+	return p.length === 0 ? /* @__PURE__ */ n("div", {
+		className: e("flex items-center justify-center text-muted-foreground text-sm border border-dashed border-border rounded-lg", C),
+		style: { height: x },
+		children: "No historical data available"
+	}) : /* @__PURE__ */ r("div", {
+		className: e("w-full", C),
+		children: [/* @__PURE__ */ n(l, {
+			width: "100%",
+			height: x,
+			children: /* @__PURE__ */ r(a, {
+				data: w,
+				margin: {
+					top: 10,
+					right: 30,
+					left: 10,
+					bottom: 0
+				},
+				children: [
+					/* @__PURE__ */ r("defs", { children: [/* @__PURE__ */ r("linearGradient", {
+						id: "historicalGradient",
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ n("stop", {
+							offset: "5%",
+							stopColor: "#3b82f6",
+							stopOpacity: .3
+						}), /* @__PURE__ */ n("stop", {
+							offset: "95%",
+							stopColor: "#3b82f6",
+							stopOpacity: .05
+						})]
+					}), /* @__PURE__ */ r("linearGradient", {
+						id: "confidenceGradient",
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ n("stop", {
+							offset: "5%",
+							stopColor: "#9ca3af",
+							stopOpacity: .2
+						}), /* @__PURE__ */ n("stop", {
+							offset: "95%",
+							stopColor: "#9ca3af",
+							stopOpacity: .05
+						})]
+					})] }),
+					/* @__PURE__ */ n(o, {
+						strokeDasharray: "3 3",
+						stroke: "#e5e7eb",
+						vertical: !1
+					}),
+					/* @__PURE__ */ n(d, {
+						dataKey: "date",
+						tickFormatter: m,
+						tick: {
+							fontSize: 12,
+							fill: "#6b7280"
+						},
+						axisLine: { stroke: "#d1d5db" },
+						tickLine: { stroke: "#d1d5db" }
+					}),
+					/* @__PURE__ */ n(f, {
+						tick: {
+							fontSize: 12,
+							fill: "#6b7280"
+						},
+						axisLine: { stroke: "#d1d5db" },
+						tickLine: { stroke: "#d1d5db" },
+						tickFormatter: (e) => e >= 1e3 ? `${(e / 1e3).toFixed(0)}k` : String(e)
+					}),
+					/* @__PURE__ */ n(u, { content: /* @__PURE__ */ n(v, {}) }),
+					/* @__PURE__ */ n(c, {
+						y: 0,
+						stroke: "#ef4444",
+						strokeWidth: 2
+					}),
+					b && /* @__PURE__ */ n(i, {
+						type: "monotone",
+						dataKey: "upperBound",
+						stroke: "none",
+						fill: "url(#confidenceGradient)",
+						fillOpacity: 1,
+						isAnimationActive: S,
+						animationDuration: 1e3
+					}),
+					b && /* @__PURE__ */ n(i, {
+						type: "monotone",
+						dataKey: "lowerBound",
+						stroke: "none",
+						fill: "#ffffff",
+						fillOpacity: 1,
+						isAnimationActive: S,
+						animationDuration: 1e3
+					}),
+					/* @__PURE__ */ n(i, {
+						type: "monotone",
+						dataKey: "historical",
+						stroke: "#3b82f6",
+						strokeWidth: 2,
+						fill: "url(#historicalGradient)",
+						fillOpacity: 1,
+						isAnimationActive: S,
+						animationDuration: 1e3,
+						connectNulls: !1
+					}),
+					/* @__PURE__ */ n(s, {
+						type: "monotone",
+						dataKey: "projected",
+						stroke: "#6b7280",
+						strokeWidth: 2,
+						strokeDasharray: "6 3",
+						dot: !1,
+						isAnimationActive: S,
+						animationDuration: 1e3,
+						connectNulls: !1
+					})
+				]
+			})
+		}), /* @__PURE__ */ n(y, { depletionDate: T })]
+	});
+}
+//#endregion
+export { b as default };

package/dist/components/waka-credit-quota/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`);var a={sm:{bar:`h-2`,text:`text-xs`,label:`text-xs`,icon:`h-3 w-3`,gap:`gap-1`,legendDot:`h-2 w-2`,container:`space-y-2`},md:{bar:`h-3`,text:`text-sm`,label:`text-sm`,icon:`h-4 w-4`,gap:`gap-2`,legendDot:`h-2.5 w-2.5`,container:`space-y-3`},lg:{bar:`h-4`,text:`text-base`,label:`text-base`,icon:`h-5 w-5`,gap:`gap-3`,legendDot:`h-3 w-3`,container:`space-y-4`}},o=[`bg-blue-500`,`bg-emerald-500`,`bg-amber-500`,`bg-violet-500`,`bg-rose-500`,`bg-cyan-500`,`bg-orange-500`,`bg-indigo-500`];function s(e){return e.toLocaleString(`en-US`)}function c(e){return e>=90?`bg-destructive`:e>=75?`bg-warning`:`bg-success`}function l(e){return e>=90?`text-red-600 dark:text-red-400`:e>=75?`text-yellow-600 dark:text-yellow-400`:`text-green-600 dark:text-green-400`}function u(e){let t=new Date,n=new Date(e).getTime()-t.getTime();if(n<=0)return`Resetting now`;let r=Math.floor(n/(1e3*60*60*24)),i=Math.floor(n%(1e3*60*60*24)/(1e3*60*60));return r>1?`Resets in ${r} days`:r===1?`Resets in 1 day`:i>1?`Resets in ${i} hours`:i===1?`Resets in 1 hour`:`Resets in less than an hour`}function d(e,t){return t||o[e%o.length]}function f({resetDate:e,size:n}){let o=a[n],s=u(e);return(0,i.jsxs)(`div`,{className:t.cn(`flex items-center text-muted-foreground`,o.gap,o.text),children:[(0,i.jsx)(r.Clock,{className:o.icon}),(0,i.jsx)(`span`,{children:s})]})}function p({services:e,total:n,size:r,formatValue:o}){let s=a[r];return(0,i.jsx)(`div`,{className:t.cn(`flex flex-wrap`,s.gap),children:e.map((e,r)=>{let a=d(r,e.color),c=n>0?(e.value/n*100).toFixed(1):`0`;return(0,i.jsxs)(`div`,{className:t.cn(`flex items-center`,s.gap,s.text),children:[(0,i.jsx)(`div`,{className:t.cn(`rounded-full flex-shrink-0`,s.legendDot,a)}),(0,i.jsxs)(`span`,{className:`text-muted-foreground`,children:[e.name,`:`,` `,(0,i.jsx)(`span`,{className:`font-medium text-foreground tabular-nums`,children:o(e.value)}),(0,i.jsxs)(`span`,{className:`text-muted-foreground ml-0.5`,children:[`(`,c,`%)`]})]})]},e.id)})})}function m({used:e,total:r,resetDate:o,services:u,variant:d=`compact`,size:m=`md`,animated:g=!0,showResetCountdown:_=!0,formatValue:v=s,className:y}){let[b,x]=n.useState(0),S=a[m],C=r>0?e/r*100:0,w=Math.min(C,100);return n.useEffect(()=>{if(!g){x(w);return}let e=w,t=Date.now(),n=()=>{let r=Date.now()-t,i=Math.min(r/800,1),a=1-(1-i)**3;x(0+(e-0)*a),i<1&&requestAnimationFrame(n)};requestAnimationFrame(n)},[w,g]),d===`compact`?(0,i.jsxs)(`div`,{className:t.cn(`w-full`,S.container,y),children:[(0,i.jsxs)(`div`,{className:t.cn(`flex items-center justify-between`,S.text),children:[(0,i.jsxs)(`span`,{className:`text-muted-foreground`,children:[(0,i.jsx)(`span`,{className:`font-medium text-foreground tabular-nums`,children:v(e)}),` / `,(0,i.jsx)(`span`,{className:`tabular-nums`,children:v(r)}),` used`]}),(0,i.jsxs)(`span`,{className:t.cn(`font-medium tabular-nums`,l(C)),children:[C.toFixed(0),`%`]})]}),(0,i.jsx)(`div`,{className:t.cn(`relative w-full overflow-hidden rounded-full bg-muted`,S.bar),children:(0,i.jsx)(`div`,{className:t.cn(`h-full rounded-full transition-colors duration-300`,c(C),C>=100&&`animate-pulse`),style:{width:`${b}%`,transition:g?void 0:`width 0.3s ease-out`}})}),_&&o&&(0,i.jsx)(f,{resetDate:o,size:m})]}):(0,i.jsxs)(`div`,{className:t.cn(`w-full`,S.container,y),children:[(0,i.jsxs)(`div`,{className:t.cn(`flex items-center justify-between`,S.text),children:[(0,i.jsxs)(`span`,{className:`text-muted-foreground`,children:[(0,i.jsx)(`span`,{className:`font-medium text-foreground tabular-nums`,children:v(e)}),` / `,(0,i.jsx)(`span`,{className:`tabular-nums`,children:v(r)}),` used`]}),(0,i.jsxs)(`span`,{className:t.cn(`font-medium tabular-nums`,l(C)),children:[C.toFixed(0),`%`]})]}),(0,i.jsx)(`div`,{className:t.cn(`relative w-full overflow-hidden rounded-full bg-muted`,S.bar),children:u&&u.length>0?(0,i.jsx)(h,{services:u,total:r,animated:g,usagePercentage:C}):(0,i.jsx)(`div`,{className:t.cn(`h-full rounded-full transition-colors duration-300`,c(C),C>=100&&`animate-pulse`),style:{width:`${b}%`,transition:g?void 0:`width 0.3s ease-out`}})}),u&&u.length>0&&(0,i.jsx)(p,{services:u,total:r,size:m,formatValue:v}),_&&o&&(0,i.jsx)(f,{resetDate:o,size:m})]})}function h({services:e,total:r,animated:a,usagePercentage:o}){let[s,c]=n.useState(0),l=Math.min(o,100);n.useEffect(()=>{if(!a){c(1);return}let e=Date.now(),t=()=>{let n=Date.now()-e,r=Math.min(n/800,1);c(1-(1-r)**3),r<1&&requestAnimationFrame(t)};requestAnimationFrame(t)},[a,l]);let u=e.reduce((e,t)=>e+t.value,0),f=u>0?Math.min(u,r)/u:0;return(0,i.jsx)(`div`,{className:`flex h-full w-full`,children:e.map((n,a)=>{let c=r>0?n.value*f/r*100:0;return(0,i.jsx)(`div`,{className:t.cn(`h-full transition-all duration-300`,d(a,n.color),a===0&&`rounded-l-full`,a===e.length-1&&o>=100&&`rounded-r-full`,a===e.length-1&&o<100&&`rounded-r-full`),style:{width:`${c*s}%`}},n.id)})})}exports.default=m;