@wakastellar/ui 4.0.0-dev.0 → 4.0.1

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

@@ -0,0 +1,232 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Clock as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/waka-credit-quota/index.tsx
+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 = /* @__PURE__ */ 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: t, size: o }) {
+	let s = a[o], c = u(t);
+	return /* @__PURE__ */ i("div", {
+		className: e("flex items-center text-muted-foreground", s.gap, s.text),
+		children: [/* @__PURE__ */ r(n, { className: s.icon }), /* @__PURE__ */ r("span", { children: c })]
+	});
+}
+function p({ services: t, total: n, size: o, formatValue: s }) {
+	let c = a[o];
+	return /* @__PURE__ */ r("div", {
+		className: e("flex flex-wrap", c.gap),
+		children: t.map((t, a) => {
+			let o = d(a, t.color), l = n > 0 ? (t.value / n * 100).toFixed(1) : "0";
+			return /* @__PURE__ */ i("div", {
+				className: e("flex items-center", c.gap, c.text),
+				children: [/* @__PURE__ */ r("div", { className: e("rounded-full flex-shrink-0", c.legendDot, o) }), /* @__PURE__ */ i("span", {
+					className: "text-muted-foreground",
+					children: [
+						t.name,
+						":",
+						" ",
+						/* @__PURE__ */ r("span", {
+							className: "font-medium text-foreground tabular-nums",
+							children: s(t.value)
+						}),
+						/* @__PURE__ */ i("span", {
+							className: "text-muted-foreground ml-0.5",
+							children: [
+								"(",
+								l,
+								"%)"
+							]
+						})
+					]
+				})]
+			}, t.id);
+		})
+	});
+}
+function m({ used: n, total: o, resetDate: u, services: d, variant: m = "compact", size: g = "md", animated: _ = !0, showResetCountdown: v = !0, formatValue: y = s, className: b }) {
+	let [x, S] = t.useState(0), C = a[g], w = o > 0 ? n / o * 100 : 0, T = Math.min(w, 100);
+	return t.useEffect(() => {
+		if (!_) {
+			S(T);
+			return;
+		}
+		let e = T, t = Date.now(), n = () => {
+			let r = Date.now() - t, i = Math.min(r / 800, 1), a = 1 - (1 - i) ** 3;
+			S(0 + (e - 0) * a), i < 1 && requestAnimationFrame(n);
+		};
+		requestAnimationFrame(n);
+	}, [T, _]), m === "compact" ? /* @__PURE__ */ i("div", {
+		className: e("w-full", C.container, b),
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: e("flex items-center justify-between", C.text),
+				children: [/* @__PURE__ */ i("span", {
+					className: "text-muted-foreground",
+					children: [
+						/* @__PURE__ */ r("span", {
+							className: "font-medium text-foreground tabular-nums",
+							children: y(n)
+						}),
+						" / ",
+						/* @__PURE__ */ r("span", {
+							className: "tabular-nums",
+							children: y(o)
+						}),
+						" used"
+					]
+				}), /* @__PURE__ */ i("span", {
+					className: e("font-medium tabular-nums", l(w)),
+					children: [w.toFixed(0), "%"]
+				})]
+			}),
+			/* @__PURE__ */ r("div", {
+				className: e("relative w-full overflow-hidden rounded-full bg-muted", C.bar),
+				children: /* @__PURE__ */ r("div", {
+					className: e("h-full rounded-full transition-colors duration-300", c(w), w >= 100 && "animate-pulse"),
+					style: {
+						width: `${x}%`,
+						transition: _ ? void 0 : "width 0.3s ease-out"
+					}
+				})
+			}),
+			v && u && /* @__PURE__ */ r(f, {
+				resetDate: u,
+				size: g
+			})
+		]
+	}) : /* @__PURE__ */ i("div", {
+		className: e("w-full", C.container, b),
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: e("flex items-center justify-between", C.text),
+				children: [/* @__PURE__ */ i("span", {
+					className: "text-muted-foreground",
+					children: [
+						/* @__PURE__ */ r("span", {
+							className: "font-medium text-foreground tabular-nums",
+							children: y(n)
+						}),
+						" / ",
+						/* @__PURE__ */ r("span", {
+							className: "tabular-nums",
+							children: y(o)
+						}),
+						" used"
+					]
+				}), /* @__PURE__ */ i("span", {
+					className: e("font-medium tabular-nums", l(w)),
+					children: [w.toFixed(0), "%"]
+				})]
+			}),
+			/* @__PURE__ */ r("div", {
+				className: e("relative w-full overflow-hidden rounded-full bg-muted", C.bar),
+				children: d && d.length > 0 ? /* @__PURE__ */ r(h, {
+					services: d,
+					total: o,
+					animated: _,
+					usagePercentage: w
+				}) : /* @__PURE__ */ r("div", {
+					className: e("h-full rounded-full transition-colors duration-300", c(w), w >= 100 && "animate-pulse"),
+					style: {
+						width: `${x}%`,
+						transition: _ ? void 0 : "width 0.3s ease-out"
+					}
+				})
+			}),
+			d && d.length > 0 && /* @__PURE__ */ r(p, {
+				services: d,
+				total: o,
+				size: g,
+				formatValue: y
+			}),
+			v && u && /* @__PURE__ */ r(f, {
+				resetDate: u,
+				size: g
+			})
+		]
+	});
+}
+function h({ services: n, total: i, animated: a, usagePercentage: o }) {
+	let [s, c] = t.useState(0), l = Math.min(o, 100);
+	t.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 = n.reduce((e, t) => e + t.value, 0), f = u > 0 ? Math.min(u, i) / u : 0;
+	return /* @__PURE__ */ r("div", {
+		className: "flex h-full w-full",
+		children: n.map((t, a) => {
+			let c = i > 0 ? t.value * f / i * 100 : 0;
+			return /* @__PURE__ */ r("div", {
+				className: e("h-full transition-all duration-300", d(a, t.color), a === 0 && "rounded-l-full", a === n.length - 1 && o >= 100 && "rounded-r-full", a === n.length - 1 && o < 100 && "rounded-r-full"),
+				style: { width: `${c * s}%` }
+			}, t.id);
+		})
+	});
+}
+//#endregion
+export { m as default };

package/dist/components/waka-credit-receipt/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`),a=require(`../separator/index.cjs.js`);let o=require(`react`);o=e.__toESM(o);let s=require(`lucide-react`),c=require(`react/jsx-runtime`);function l(e){return(typeof e==`string`?new Date(e):e).toLocaleDateString(`en-US`,{year:`numeric`,month:`long`,day:`numeric`,hour:`2-digit`,minute:`2-digit`})}function u(e){return`${e>=0?`+`:``}${e.toLocaleString(`en-US`)}`}function d(e){return e.toLocaleString(`en-US`,{style:`currency`,currency:`EUR`})}function f(e){switch(e){case`credit`:return`default`;case`debit`:return`secondary`;case`refund`:return`destructive`;case`bonus`:return`default`;case`expiry`:return`outline`;default:return`secondary`}}function p(e){switch(e){case`completed`:return`default`;case`pending`:return`outline`;case`failed`:return`destructive`;case`cancelled`:return`secondary`;default:return`outline`}}function m(e){return e.charAt(0).toUpperCase()+e.slice(1)}function h({label:e,children:t}){return(0,c.jsxs)(`div`,{className:`flex items-center justify-between py-1.5 print:py-1`,children:[(0,c.jsx)(`span`,{className:`text-sm text-muted-foreground print:text-gray-500`,children:e}),(0,c.jsx)(`div`,{className:`text-sm font-medium text-right`,children:t})]})}function g({transaction:e,organization:o,downloadable:g=!1,onDownload:_,className:v}){return(0,c.jsxs)(i.Card,{className:t.cn(`w-full max-w-md print:shadow-none print:border-gray-300`,v),children:[(0,c.jsxs)(i.CardHeader,{className:`pb-4 print:pb-2`,children:[(0,c.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,c.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,c.jsx)(s.Receipt,{className:`h-5 w-5 text-muted-foreground print:text-gray-500`}),(0,c.jsx)(i.CardTitle,{className:`text-lg print:text-base`,children:`Receipt`})]}),(0,c.jsx)(s.CheckCircle,{className:`h-5 w-5 text-green-500 print:text-gray-700`})]}),(0,c.jsx)(`p`,{className:`text-xs font-mono text-muted-foreground mt-1 print:text-gray-400`,children:e.id})]}),(0,c.jsx)(a.Separator,{className:`print:bg-gray-300`}),(0,c.jsxs)(i.CardContent,{className:`pt-4 print:pt-2`,children:[(0,c.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,c.jsx)(h,{label:`Date`,children:l(e.timestamp)}),(0,c.jsx)(h,{label:`Type`,children:(0,c.jsx)(n.Badge,{variant:f(e.type),className:`print:border-gray-400 print:bg-transparent print:text-gray-700`,children:m(e.type)})}),e.credits!==void 0&&(0,c.jsx)(h,{label:`Credits`,children:(0,c.jsxs)(`span`,{className:t.cn(`tabular-nums font-semibold`,e.credits>=0?`text-green-600 dark:text-green-400 print:text-gray-900`:`text-red-600 dark:text-red-400 print:text-gray-900`),children:[u(e.credits),` credits`]})}),e.price!==void 0&&(0,c.jsx)(h,{label:`Amount`,children:(0,c.jsx)(`span`,{className:`tabular-nums`,children:d(e.price)})}),e.paymentMethod&&(0,c.jsx)(h,{label:`Payment`,children:(0,c.jsx)(`span`,{className:`font-mono text-xs`,children:e.paymentMethod})}),(0,c.jsx)(h,{label:`Status`,children:(0,c.jsx)(n.Badge,{variant:p(e.status),className:`print:border-gray-400 print:bg-transparent print:text-gray-700`,children:m(e.status)})}),o&&(0,c.jsx)(h,{label:`Organization`,children:o.name}),e.description&&(0,c.jsx)(h,{label:`Description`,children:(0,c.jsx)(`span`,{className:`max-w-[200px] truncate inline-block`,children:e.description})})]}),g&&(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(a.Separator,{className:`my-4 print:hidden`}),(0,c.jsx)(`div`,{className:`print:hidden`,children:(0,c.jsxs)(r.Button,{variant:`outline`,size:`sm`,className:`w-full`,onClick:_,children:[(0,c.jsx)(s.Download,{className:`h-4 w-4 mr-2`}),`Download PDF`]})})]})]})]})}exports.default=g;

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

@@ -0,0 +1,158 @@
+"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, CardTitle as o } from "../card/index.es.js";
+import { Separator as s } from "../separator/index.es.js";
+import "react";
+import { CheckCircle as c, Download as l, Receipt as u } from "lucide-react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/waka-credit-receipt/index.tsx
+function m(e) {
+	return (typeof e == "string" ? new Date(e) : e).toLocaleDateString("en-US", {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+function h(e) {
+	return `${e >= 0 ? "+" : ""}${e.toLocaleString("en-US")}`;
+}
+function g(e) {
+	return e.toLocaleString("en-US", {
+		style: "currency",
+		currency: "EUR"
+	});
+}
+function _(e) {
+	switch (e) {
+		case "credit": return "default";
+		case "debit": return "secondary";
+		case "refund": return "destructive";
+		case "bonus": return "default";
+		case "expiry": return "outline";
+		default: return "secondary";
+	}
+}
+function v(e) {
+	switch (e) {
+		case "completed": return "default";
+		case "pending": return "outline";
+		case "failed": return "destructive";
+		case "cancelled": return "secondary";
+		default: return "outline";
+	}
+}
+function y(e) {
+	return e.charAt(0).toUpperCase() + e.slice(1);
+}
+function b({ label: e, children: t }) {
+	return /* @__PURE__ */ p("div", {
+		className: "flex items-center justify-between py-1.5 print:py-1",
+		children: [/* @__PURE__ */ f("span", {
+			className: "text-sm text-muted-foreground print:text-gray-500",
+			children: e
+		}), /* @__PURE__ */ f("div", {
+			className: "text-sm font-medium text-right",
+			children: t
+		})]
+	});
+}
+function x({ transaction: x, organization: S, downloadable: C = !1, onDownload: w, className: T }) {
+	return /* @__PURE__ */ p(r, {
+		className: e("w-full max-w-md print:shadow-none print:border-gray-300", T),
+		children: [
+			/* @__PURE__ */ p(a, {
+				className: "pb-4 print:pb-2",
+				children: [/* @__PURE__ */ p("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ p("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ f(u, { className: "h-5 w-5 text-muted-foreground print:text-gray-500" }), /* @__PURE__ */ f(o, {
+							className: "text-lg print:text-base",
+							children: "Receipt"
+						})]
+					}), /* @__PURE__ */ f(c, { className: "h-5 w-5 text-green-500 print:text-gray-700" })]
+				}), /* @__PURE__ */ f("p", {
+					className: "text-xs font-mono text-muted-foreground mt-1 print:text-gray-400",
+					children: x.id
+				})]
+			}),
+			/* @__PURE__ */ f(s, { className: "print:bg-gray-300" }),
+			/* @__PURE__ */ p(i, {
+				className: "pt-4 print:pt-2",
+				children: [/* @__PURE__ */ p("div", {
+					className: "space-y-0.5",
+					children: [
+						/* @__PURE__ */ f(b, {
+							label: "Date",
+							children: m(x.timestamp)
+						}),
+						/* @__PURE__ */ f(b, {
+							label: "Type",
+							children: /* @__PURE__ */ f(t, {
+								variant: _(x.type),
+								className: "print:border-gray-400 print:bg-transparent print:text-gray-700",
+								children: y(x.type)
+							})
+						}),
+						x.credits !== void 0 && /* @__PURE__ */ f(b, {
+							label: "Credits",
+							children: /* @__PURE__ */ p("span", {
+								className: e("tabular-nums font-semibold", x.credits >= 0 ? "text-green-600 dark:text-green-400 print:text-gray-900" : "text-red-600 dark:text-red-400 print:text-gray-900"),
+								children: [h(x.credits), " credits"]
+							})
+						}),
+						x.price !== void 0 && /* @__PURE__ */ f(b, {
+							label: "Amount",
+							children: /* @__PURE__ */ f("span", {
+								className: "tabular-nums",
+								children: g(x.price)
+							})
+						}),
+						x.paymentMethod && /* @__PURE__ */ f(b, {
+							label: "Payment",
+							children: /* @__PURE__ */ f("span", {
+								className: "font-mono text-xs",
+								children: x.paymentMethod
+							})
+						}),
+						/* @__PURE__ */ f(b, {
+							label: "Status",
+							children: /* @__PURE__ */ f(t, {
+								variant: v(x.status),
+								className: "print:border-gray-400 print:bg-transparent print:text-gray-700",
+								children: y(x.status)
+							})
+						}),
+						S && /* @__PURE__ */ f(b, {
+							label: "Organization",
+							children: S.name
+						}),
+						x.description && /* @__PURE__ */ f(b, {
+							label: "Description",
+							children: /* @__PURE__ */ f("span", {
+								className: "max-w-[200px] truncate inline-block",
+								children: x.description
+							})
+						})
+					]
+				}), C && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(s, { className: "my-4 print:hidden" }), /* @__PURE__ */ f("div", {
+					className: "print:hidden",
+					children: /* @__PURE__ */ p(n, {
+						variant: "outline",
+						size: "sm",
+						className: "w-full",
+						onClick: w,
+						children: [/* @__PURE__ */ f(l, { className: "h-4 w-4 mr-2" }), "Download PDF"]
+					})
+				})] })]
+			})
+		]
+	});
+}
+//#endregion
+export { x as default };

package/dist/components/waka-credit-top-up/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(`../button/index.cjs.js`),r=require(`../card/index.cjs.js`),i=require(`../input/index.cjs.js`),a=require(`../separator/index.cjs.js`),o=require(`../slider/index.cjs.js`);let s=require(`react`);s=e.__toESM(s);let c=require(`lucide-react`),l=require(`react/jsx-runtime`);var u=.01,d=100,f=5e4;function p(e,t){if(t.length===0)return e*u;let n=[...t].sort((e,t)=>e.credits-t.credits);if(e<=n[0].credits){let t=n[0].price/n[0].credits;return Math.round(e*t*100)/100}if(e>=n[n.length-1].credits){let t=n[n.length-1].price/n[n.length-1].credits;return Math.round(e*t*100)/100}for(let t=0;t<n.length-1;t++)if(e>=n[t].credits&&e<=n[t+1].credits){let r=n[t],i=n[t+1],a=(e-r.credits)/(i.credits-r.credits),o=r.price+a*(i.price-r.price);return Math.round(o*100)/100}return e*u}function m(e,t){return`${e.toFixed(2)} ${t}`}function h(e){return e.toLocaleString(`en-US`)}function g({pack:e,selected:n,currency:r,onSelect:i}){return(0,l.jsxs)(`button`,{type:`button`,onClick:i,className:t.cn(`relative flex flex-col items-center gap-2 rounded-lg border p-4 text-left transition-all`,`hover:border-primary/50 hover:shadow-sm`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`,n?`border-primary bg-primary/5 shadow-sm ring-1 ring-primary`:`border-border bg-card`,e.highlighted&&!n&&`border-primary/30`),children:[e.highlighted&&e.highlightLabel&&(0,l.jsx)(`span`,{className:`absolute -top-2.5 left-1/2 -translate-x-1/2 rounded-full bg-primary px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-foreground whitespace-nowrap`,children:e.highlightLabel}),(0,l.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,l.jsx)(c.Coins,{className:`h-4 w-4 text-muted-foreground`}),(0,l.jsx)(`span`,{className:`text-lg font-bold tabular-nums`,children:h(e.credits)})]}),(0,l.jsx)(`span`,{className:`text-xs text-muted-foreground font-medium`,children:e.name}),(0,l.jsx)(`span`,{className:`text-sm font-semibold`,children:m(e.price,e.currency??r)}),e.bonusPercent!=null&&e.bonusPercent>0&&(0,l.jsxs)(`span`,{className:`rounded-full bg-green-100 dark:bg-green-900/30 px-2 py-0.5 text-[10px] font-semibold text-green-700 dark:text-green-400`,children:[`+`,e.bonusPercent,`% bonus`]}),e.unitPrice!=null&&(0,l.jsxs)(`span`,{className:`text-[10px] text-muted-foreground`,children:[e.unitPrice.toFixed(4),` `,e.currency??r,`/credit`]})]})}function _({packs:e,currentBalance:u,customAmount:_=!1,minAmount:v=d,maxAmount:y=f,currency:b=`EUR`,onPurchase:x,onCancel:S,className:C}){let[w,T]=s.useState(null),[E,D]=s.useState(!1),[O,k]=s.useState(v),A=e.find(e=>e.id===w)??null,j=p(O,e),M=A!==null||E&&O>=v,N=E?O:A?.credits??0,P=E?j:A?.price??0;function F(e){T(e),D(!1)}function I(){D(!0),T(null)}function L(e){k(Math.max(v,Math.min(y,Math.round(e))))}function R(e){let t=e.target.value;if(t===``){k(v);return}let n=parseInt(t,10);isNaN(n)||L(n)}function z(e){e[0]!=null&&L(e[0])}function B(){M&&(E?x({credits:O,price:j}):A&&x(A))}return(0,l.jsx)(r.Card,{className:t.cn(`w-full`,C),children:(0,l.jsxs)(r.CardContent,{className:`p-6 space-y-6`,children:[(0,l.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,l.jsx)(`div`,{className:`flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10`,children:(0,l.jsx)(c.ShoppingCart,{className:`h-5 w-5 text-primary`})}),(0,l.jsxs)(`div`,{children:[(0,l.jsx)(`h3`,{className:`text-lg font-semibold`,children:`Top Up Credits`}),(0,l.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Select a pack or enter a custom amount`})]})]}),(0,l.jsx)(`div`,{className:`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3`,children:e.map(e=>(0,l.jsx)(g,{pack:e,selected:w===e.id&&!E,currency:b,onSelect:()=>F(e.id)},e.id))}),_&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(`div`,{className:`relative`,children:[(0,l.jsx)(a.Separator,{}),(0,l.jsx)(`span`,{className:`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-xs text-muted-foreground font-medium`,children:`Or enter custom amount`})]}),(0,l.jsx)(`div`,{className:`space-y-4`,children:E?(0,l.jsxs)(`div`,{className:`space-y-4 rounded-lg border border-primary/30 bg-primary/5 p-4`,children:[(0,l.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,l.jsx)(`label`,{htmlFor:`custom-credits`,className:`text-sm font-medium`,children:`Credits`}),(0,l.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:m(j,b)})]}),(0,l.jsx)(i.Input,{id:`custom-credits`,type:`number`,min:v,max:y,step:100,value:O,onChange:R,className:`tabular-nums`}),(0,l.jsx)(o.Slider,{value:[O],onValueChange:z,min:v,max:y,step:100}),(0,l.jsxs)(`div`,{className:`flex justify-between text-[10px] text-muted-foreground tabular-nums`,children:[(0,l.jsx)(`span`,{children:h(v)}),(0,l.jsx)(`span`,{children:h(y)})]})]}):(0,l.jsxs)(n.Button,{variant:`outline`,className:`w-full`,onClick:I,children:[(0,l.jsx)(c.Plus,{className:`h-4 w-4`}),`Enter custom amount`]})})]}),M&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(a.Separator,{}),(0,l.jsxs)(`div`,{className:`space-y-2 rounded-lg bg-muted/50 p-4`,children:[(0,l.jsx)(`h4`,{className:`text-sm font-semibold`,children:`Summary`}),(0,l.jsxs)(`div`,{className:`flex items-center justify-between text-sm`,children:[(0,l.jsx)(`span`,{className:`text-muted-foreground`,children:`Credits`}),(0,l.jsx)(`span`,{className:`font-medium tabular-nums`,children:h(N)})]}),(0,l.jsxs)(`div`,{className:`flex items-center justify-between text-sm`,children:[(0,l.jsx)(`span`,{className:`text-muted-foreground`,children:`Price`}),(0,l.jsx)(`span`,{className:`font-medium tabular-nums`,children:m(P,b)})]}),u!=null&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(a.Separator,{className:`my-1`}),(0,l.jsxs)(`div`,{className:`flex items-center justify-between text-sm`,children:[(0,l.jsx)(`span`,{className:`text-muted-foreground`,children:`Current balance`}),(0,l.jsx)(`span`,{className:`tabular-nums`,children:h(u)})]}),(0,l.jsxs)(`div`,{className:`flex items-center justify-between text-sm font-semibold`,children:[(0,l.jsx)(`span`,{children:`New balance`}),(0,l.jsx)(`span`,{className:`tabular-nums text-green-600 dark:text-green-400`,children:h(u+N)})]})]})]})]}),(0,l.jsxs)(`div`,{className:`flex items-center justify-end gap-3`,children:[S&&(0,l.jsx)(n.Button,{variant:`outline`,onClick:S,children:`Cancel`}),(0,l.jsxs)(n.Button,{onClick:B,disabled:!M,children:[(0,l.jsx)(c.ShoppingCart,{className:`h-4 w-4`}),`Purchase`]})]})]})})}exports.default=_;

package/dist/components/waka-credit-top-up/index.es.js

@@ -0,0 +1,255 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Button as t } from "../button/index.es.js";
+import { Card as n, CardContent as r } from "../card/index.es.js";
+import { Input as i } from "../input/index.es.js";
+import { Separator as a } from "../separator/index.es.js";
+import { Slider as o } from "../slider/index.es.js";
+import * as s from "react";
+import { Coins as c, Plus as l, ShoppingCart as u } from "lucide-react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/waka-credit-top-up/index.tsx
+var m = .01, h = 100, g = 5e4;
+function _(e, t) {
+	if (t.length === 0) return e * m;
+	let n = [...t].sort((e, t) => e.credits - t.credits);
+	if (e <= n[0].credits) {
+		let t = n[0].price / n[0].credits;
+		return Math.round(e * t * 100) / 100;
+	}
+	if (e >= n[n.length - 1].credits) {
+		let t = n[n.length - 1].price / n[n.length - 1].credits;
+		return Math.round(e * t * 100) / 100;
+	}
+	for (let t = 0; t < n.length - 1; t++) if (e >= n[t].credits && e <= n[t + 1].credits) {
+		let r = n[t], i = n[t + 1], a = (e - r.credits) / (i.credits - r.credits), o = r.price + a * (i.price - r.price);
+		return Math.round(o * 100) / 100;
+	}
+	return e * m;
+}
+function v(e, t) {
+	return `${e.toFixed(2)} ${t}`;
+}
+function y(e) {
+	return e.toLocaleString("en-US");
+}
+function b({ pack: t, selected: n, currency: r, onSelect: i }) {
+	return /* @__PURE__ */ p("button", {
+		type: "button",
+		onClick: i,
+		className: e("relative flex flex-col items-center gap-2 rounded-lg border p-4 text-left transition-all", "hover:border-primary/50 hover:shadow-sm", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", n ? "border-primary bg-primary/5 shadow-sm ring-1 ring-primary" : "border-border bg-card", t.highlighted && !n && "border-primary/30"),
+		children: [
+			t.highlighted && t.highlightLabel && /* @__PURE__ */ f("span", {
+				className: "absolute -top-2.5 left-1/2 -translate-x-1/2 rounded-full bg-primary px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-foreground whitespace-nowrap",
+				children: t.highlightLabel
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "flex items-center gap-1.5",
+				children: [/* @__PURE__ */ f(c, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ f("span", {
+					className: "text-lg font-bold tabular-nums",
+					children: y(t.credits)
+				})]
+			}),
+			/* @__PURE__ */ f("span", {
+				className: "text-xs text-muted-foreground font-medium",
+				children: t.name
+			}),
+			/* @__PURE__ */ f("span", {
+				className: "text-sm font-semibold",
+				children: v(t.price, t.currency ?? r)
+			}),
+			t.bonusPercent != null && t.bonusPercent > 0 && /* @__PURE__ */ p("span", {
+				className: "rounded-full bg-green-100 dark:bg-green-900/30 px-2 py-0.5 text-[10px] font-semibold text-green-700 dark:text-green-400",
+				children: [
+					"+",
+					t.bonusPercent,
+					"% bonus"
+				]
+			}),
+			t.unitPrice != null && /* @__PURE__ */ p("span", {
+				className: "text-[10px] text-muted-foreground",
+				children: [
+					t.unitPrice.toFixed(4),
+					" ",
+					t.currency ?? r,
+					"/credit"
+				]
+			})
+		]
+	});
+}
+function x({ packs: c, currentBalance: m, customAmount: x = !1, minAmount: S = h, maxAmount: C = g, currency: w = "EUR", onPurchase: T, onCancel: E, className: D }) {
+	let [O, k] = s.useState(null), [A, j] = s.useState(!1), [M, N] = s.useState(S), P = c.find((e) => e.id === O) ?? null, F = _(M, c), I = P !== null || A && M >= S, L = A ? M : P?.credits ?? 0, R = A ? F : P?.price ?? 0;
+	function z(e) {
+		k(e), j(!1);
+	}
+	function B() {
+		j(!0), k(null);
+	}
+	function V(e) {
+		N(Math.max(S, Math.min(C, Math.round(e))));
+	}
+	function H(e) {
+		let t = e.target.value;
+		if (t === "") {
+			N(S);
+			return;
+		}
+		let n = parseInt(t, 10);
+		isNaN(n) || V(n);
+	}
+	function U(e) {
+		e[0] != null && V(e[0]);
+	}
+	function W() {
+		I && (A ? T({
+			credits: M,
+			price: F
+		}) : P && T(P));
+	}
+	return /* @__PURE__ */ f(n, {
+		className: e("w-full", D),
+		children: /* @__PURE__ */ p(r, {
+			className: "p-6 space-y-6",
+			children: [
+				/* @__PURE__ */ p("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10",
+						children: /* @__PURE__ */ f(u, { className: "h-5 w-5 text-primary" })
+					}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h3", {
+						className: "text-lg font-semibold",
+						children: "Top Up Credits"
+					}), /* @__PURE__ */ f("p", {
+						className: "text-sm text-muted-foreground",
+						children: "Select a pack or enter a custom amount"
+					})] })]
+				}),
+				/* @__PURE__ */ f("div", {
+					className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3",
+					children: c.map((e) => /* @__PURE__ */ f(b, {
+						pack: e,
+						selected: O === e.id && !A,
+						currency: w,
+						onSelect: () => z(e.id)
+					}, e.id))
+				}),
+				x && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ f(a, {}), /* @__PURE__ */ f("span", {
+						className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-xs text-muted-foreground font-medium",
+						children: "Or enter custom amount"
+					})]
+				}), /* @__PURE__ */ f("div", {
+					className: "space-y-4",
+					children: A ? /* @__PURE__ */ p("div", {
+						className: "space-y-4 rounded-lg border border-primary/30 bg-primary/5 p-4",
+						children: [
+							/* @__PURE__ */ p("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ f("label", {
+									htmlFor: "custom-credits",
+									className: "text-sm font-medium",
+									children: "Credits"
+								}), /* @__PURE__ */ f("span", {
+									className: "text-sm text-muted-foreground",
+									children: v(F, w)
+								})]
+							}),
+							/* @__PURE__ */ f(i, {
+								id: "custom-credits",
+								type: "number",
+								min: S,
+								max: C,
+								step: 100,
+								value: M,
+								onChange: H,
+								className: "tabular-nums"
+							}),
+							/* @__PURE__ */ f(o, {
+								value: [M],
+								onValueChange: U,
+								min: S,
+								max: C,
+								step: 100
+							}),
+							/* @__PURE__ */ p("div", {
+								className: "flex justify-between text-[10px] text-muted-foreground tabular-nums",
+								children: [/* @__PURE__ */ f("span", { children: y(S) }), /* @__PURE__ */ f("span", { children: y(C) })]
+							})
+						]
+					}) : /* @__PURE__ */ p(t, {
+						variant: "outline",
+						className: "w-full",
+						onClick: B,
+						children: [/* @__PURE__ */ f(l, { className: "h-4 w-4" }), "Enter custom amount"]
+					})
+				})] }),
+				I && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(a, {}), /* @__PURE__ */ p("div", {
+					className: "space-y-2 rounded-lg bg-muted/50 p-4",
+					children: [
+						/* @__PURE__ */ f("h4", {
+							className: "text-sm font-semibold",
+							children: "Summary"
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "flex items-center justify-between text-sm",
+							children: [/* @__PURE__ */ f("span", {
+								className: "text-muted-foreground",
+								children: "Credits"
+							}), /* @__PURE__ */ f("span", {
+								className: "font-medium tabular-nums",
+								children: y(L)
+							})]
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "flex items-center justify-between text-sm",
+							children: [/* @__PURE__ */ f("span", {
+								className: "text-muted-foreground",
+								children: "Price"
+							}), /* @__PURE__ */ f("span", {
+								className: "font-medium tabular-nums",
+								children: v(R, w)
+							})]
+						}),
+						m != null && /* @__PURE__ */ p(d, { children: [
+							/* @__PURE__ */ f(a, { className: "my-1" }),
+							/* @__PURE__ */ p("div", {
+								className: "flex items-center justify-between text-sm",
+								children: [/* @__PURE__ */ f("span", {
+									className: "text-muted-foreground",
+									children: "Current balance"
+								}), /* @__PURE__ */ f("span", {
+									className: "tabular-nums",
+									children: y(m)
+								})]
+							}),
+							/* @__PURE__ */ p("div", {
+								className: "flex items-center justify-between text-sm font-semibold",
+								children: [/* @__PURE__ */ f("span", { children: "New balance" }), /* @__PURE__ */ f("span", {
+									className: "tabular-nums text-green-600 dark:text-green-400",
+									children: y(m + L)
+								})]
+							})
+						] })
+					]
+				})] }),
+				/* @__PURE__ */ p("div", {
+					className: "flex items-center justify-end gap-3",
+					children: [E && /* @__PURE__ */ f(t, {
+						variant: "outline",
+						onClick: E,
+						children: "Cancel"
+					}), /* @__PURE__ */ p(t, {
+						onClick: W,
+						disabled: !I,
+						children: [/* @__PURE__ */ f(u, { className: "h-4 w-4" }), "Purchase"]
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { x as default };

package/dist/components/waka-credit-transaction/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`);let r=require(`react`);r=e.__toESM(r);let i=require(`lucide-react`),a=require(`react/jsx-runtime`);var o={debit:{icon:i.ArrowDownLeft,color:`text-red-600 dark:text-red-400`,bg:`bg-red-50 dark:bg-red-950/30`,iconColor:`text-red-500 dark:text-red-400`,prefix:`-`},credit:{icon:i.ArrowUpRight,color:`text-green-600 dark:text-green-400`,bg:`bg-green-50 dark:bg-green-950/30`,iconColor:`text-green-500 dark:text-green-400`,prefix:`+`},refund:{icon:i.RotateCcw,color:`text-blue-600 dark:text-blue-400`,bg:`bg-blue-50 dark:bg-blue-950/30`,iconColor:`text-blue-500 dark:text-blue-400`,prefix:`+`},bonus:{icon:i.Gift,color:`text-purple-600 dark:text-purple-400`,bg:`bg-purple-50 dark:bg-purple-950/30`,iconColor:`text-purple-500 dark:text-purple-400`,prefix:`+`},expiry:{icon:i.Clock,color:`text-gray-500 dark:text-gray-400`,bg:`bg-gray-50 dark:bg-gray-900/30`,iconColor:`text-gray-400 dark:text-gray-500`,prefix:`-`}},s={completed:{label:`Completed`,className:`bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300 border-green-200 dark:border-green-800`},pending:{label:`Pending`,className:`bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800`},failed:{label:`Failed`,className:`bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300 border-red-200 dark:border-red-800`},cancelled:{label:`Cancelled`,className:`bg-gray-100 text-gray-600 dark:bg-gray-800/40 dark:text-gray-400 border-gray-200 dark:border-gray-700`}};function c(e){return e.toLocaleString(`en-US`)}function l(e){return(typeof e==`string`?new Date(e):e).toLocaleDateString(`en-US`,{month:`short`,day:`numeric`,year:`numeric`})}function u({transaction:e,showService:r=!1,showStatus:i=!1,compact:u=!1,formatAmount:d=c,formatDate:f=l,onClick:p,className:m}){let h=o[e.type],g=h.icon,_=s[e.status],v=`${h.prefix}${d(e.amount)}`,y=f(e.timestamp),b=!!p;return u?(0,a.jsxs)(`div`,{role:b?`button`:void 0,tabIndex:b?0:void 0,onClick:b?()=>p(e):void 0,onKeyDown:b?t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),p(e))}:void 0,className:t.cn(`flex items-center gap-3 py-2 px-3 rounded-md`,b&&`cursor-pointer hover:bg-muted/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`,m),children:[(0,a.jsx)(`div`,{className:t.cn(`flex items-center justify-center h-7 w-7 rounded-md shrink-0`,h.bg),children:(0,a.jsx)(g,{className:t.cn(`h-3.5 w-3.5`,h.iconColor),"aria-hidden":`true`})}),(0,a.jsx)(`span`,{className:`flex-1 min-w-0 text-sm truncate text-foreground`,children:e.description}),(0,a.jsx)(`span`,{className:t.cn(`text-sm font-semibold tabular-nums shrink-0`,h.color),children:v}),(0,a.jsx)(`span`,{className:`text-xs text-muted-foreground shrink-0`,children:y})]}):(0,a.jsxs)(`div`,{role:b?`button`:void 0,tabIndex:b?0:void 0,onClick:b?()=>p(e):void 0,onKeyDown:b?t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),p(e))}:void 0,className:t.cn(`flex items-center gap-4 py-3 px-4 rounded-lg`,b&&`cursor-pointer hover:bg-muted/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`,m),children:[(0,a.jsx)(`div`,{className:t.cn(`flex items-center justify-center h-9 w-9 rounded-lg shrink-0`,h.bg),children:(0,a.jsx)(g,{className:t.cn(`h-4 w-4`,h.iconColor),"aria-hidden":`true`})}),(0,a.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,a.jsx)(`p`,{className:`text-sm font-medium text-foreground truncate`,children:e.description}),r&&e.service&&(0,a.jsx)(`p`,{className:`text-xs text-muted-foreground mt-0.5 truncate`,children:e.service})]}),(0,a.jsx)(`span`,{className:t.cn(`text-sm font-semibold tabular-nums shrink-0`,h.color),children:v}),(0,a.jsx)(`span`,{className:`text-xs text-muted-foreground shrink-0 w-24 text-right`,children:y}),i&&(0,a.jsx)(n.Badge,{variant:`outline`,className:t.cn(`shrink-0 text-[10px] px-2 py-0.5`,_.className),children:_.label})]})}exports.default=u;