@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-credit-history/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`),n=require(`../badge/index.cjs.js`),r=require(`../button/index.cjs.js`),i=require(`../select/index.cjs.js`);let a=require(`react`);a=e.__toESM(a);let o=require(`lucide-react`),s=require(`react/jsx-runtime`);var c={credit:{label:`Credit`,icon:o.ArrowUpCircle,colorClass:`text-green-600 dark:text-green-400`},debit:{label:`Debit`,icon:o.ArrowDownCircle,colorClass:`text-red-600 dark:text-red-400`},refund:{label:`Refund`,icon:o.RotateCcw,colorClass:`text-blue-600 dark:text-blue-400`},bonus:{label:`Bonus`,icon:o.Gift,colorClass:`text-purple-600 dark:text-purple-400`},expiry:{label:`Expiry`,icon:o.Clock,colorClass:`text-orange-600 dark:text-orange-400`}},l={completed:{variant:`default`,className:`bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 border-green-200 dark:border-green-800`},pending:{variant:`outline`,className:`bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800`},failed:{variant:`destructive`,className:`bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400 border-red-200 dark:border-red-800`},cancelled:{variant:`secondary`,className:`bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400 border-gray-200 dark:border-gray-700`}},u=[`credit`,`debit`,`refund`,`bonus`,`expiry`];function d(e){return e instanceof Date?e:new Date(e)}function f(e){return d(e).toLocaleDateString(`en-US`,{year:`numeric`,month:`short`,day:`numeric`,hour:`2-digit`,minute:`2-digit`})}function p(e,t){return`${t===`credit`||t===`refund`||t===`bonus`?`+`:`-`}${Math.abs(e).toLocaleString(`en-US`)}`}function m(e){return e===`credit`||e===`refund`||e===`bonus`?`text-green-600 dark:text-green-400`:`text-red-600 dark:text-red-400`}function h({label:e,field:n,currentSort:r,currentDirection:i,onSort:a}){let c=r===n,l=c?i===`asc`?o.ArrowUp:o.ArrowDown:o.ArrowUpDown;return(0,s.jsxs)(`button`,{type:`button`,className:t.cn(`inline-flex items-center gap-1 text-xs font-medium uppercase tracking-wider hover:text-foreground transition-colors`,c?`text-foreground`:`text-muted-foreground`),onClick:()=>a(n),children:[e,(0,s.jsx)(l,{className:`h-3 w-3`})]})}function g({selectedTypes:e,onChange:n}){let r=t=>{e.includes(t)?n(e.filter(e=>e!==t)):n([...e,t])};return(0,s.jsx)(`div`,{className:`flex flex-wrap gap-1.5`,children:u.map(n=>{let i=c[n];return(0,s.jsxs)(`button`,{type:`button`,onClick:()=>r(n),className:t.cn(`inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium border transition-colors`,e.length===0||e.includes(n)?`bg-primary/10 border-primary/30 text-foreground`:`bg-muted/50 border-transparent text-muted-foreground hover:bg-muted`),children:[(0,s.jsx)(i.icon,{className:`h-3 w-3`}),i.label]},n)})})}function _({currentPage:e,totalPages:t,totalItems:n,pageSize:i,onPageChange:c}){return(0,s.jsxs)(`div`,{className:`flex items-center justify-between px-2 py-3`,children:[(0,s.jsxs)(`p`,{className:`text-xs text-muted-foreground`,children:[`Showing `,(e-1)*i+1,`-`,Math.min(e*i,n),` of `,n,` transactions`]}),(0,s.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,s.jsx)(r.Button,{variant:`outline`,size:`icon`,className:`h-7 w-7`,disabled:e<=1,onClick:()=>c(e-1),children:(0,s.jsx)(o.ChevronLeft,{className:`h-3.5 w-3.5`})}),Array.from({length:t},(e,t)=>t+1).filter(n=>t<=7||n===1||n===t||Math.abs(n-e)<=1).map((t,n,i)=>{let o=n>0&&t-i[n-1]>1;return(0,s.jsxs)(a.Fragment,{children:[o&&(0,s.jsx)(`span`,{className:`px-1 text-xs text-muted-foreground`,children:`...`}),(0,s.jsx)(r.Button,{variant:t===e?`default`:`outline`,size:`icon`,className:`h-7 w-7 text-xs`,onClick:()=>c(t),children:t})]},t)}),(0,s.jsx)(r.Button,{variant:`outline`,size:`icon`,className:`h-7 w-7`,disabled:e>=t,onClick:()=>c(e+1),children:(0,s.jsx)(o.ChevronRight,{className:`h-3.5 w-3.5`})})]})]})}function v({message:e}){return(0,s.jsxs)(`div`,{className:`flex flex-col items-center justify-center py-12 text-center`,children:[(0,s.jsx)(`div`,{className:`rounded-full bg-muted p-3 mb-3`,children:(0,s.jsx)(o.Inbox,{className:`h-6 w-6 text-muted-foreground`})}),(0,s.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:e})]})}function y({transactions:e,pageSize:u=10,filters:y,onExport:b,onRowClick:x,showFilters:S=!1,showExport:C=!1,emptyMessage:w=`No transactions found`,className:T}){let[E,D]=a.useState(`date`),[O,k]=a.useState(`desc`),[A,j]=a.useState(1),[M,N]=a.useState(y?.types??[]),[P,F]=a.useState(`csv`),[I,L]=a.useState(S);a.useEffect(()=>{j(1)},[M,y]),a.useEffect(()=>{y?.types&&N(y.types)},[y?.types]);let R=a.useMemo(()=>{let t=[...e];if(M.length>0&&(t=t.filter(e=>M.includes(e.type))),y?.services&&y.services.length>0&&(t=t.filter(e=>e.service&&y.services.includes(e.service))),y?.dateRange){let{from:e,to:n}=y.dateRange;t=t.filter(t=>{let r=d(t.timestamp);return r>=e&&r<=n})}return t},[e,M,y]),z=a.useMemo(()=>{let e=[...R];return e.sort((e,t)=>{let n=0;switch(E){case`date`:n=d(e.timestamp).getTime()-d(t.timestamp).getTime();break;case`amount`:n=e.amount-t.amount;break;case`type`:n=e.type.localeCompare(t.type);break}return O===`asc`?n:-n}),e},[R,E,O]),B=Math.max(1,Math.ceil(z.length/u)),V=Math.min(A,B),H=z.slice((V-1)*u,V*u),U=e=>{E===e?k(e=>e===`asc`?`desc`:`asc`):(D(e),k(`desc`)),j(1)},W=()=>{b?.(P,R)},G=()=>{N([]),j(1)},K=M.length>0;return(0,s.jsxs)(`div`,{className:t.cn(`rounded-lg border bg-card shadow-sm`,T),children:[(0,s.jsxs)(`div`,{className:`flex items-center justify-between gap-3 border-b px-4 py-3`,children:[(0,s.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,s.jsx)(`h3`,{className:`text-sm font-semibold`,children:`Transaction History`}),(0,s.jsx)(n.Badge,{variant:`secondary`,className:`text-xs`,children:R.length})]}),(0,s.jsxs)(`div`,{className:`flex items-center gap-2`,children:[S&&(0,s.jsxs)(r.Button,{variant:I?`default`:`outline`,size:`sm`,onClick:()=>L(e=>!e),className:`h-8`,children:[(0,s.jsx)(o.Filter,{className:`h-3.5 w-3.5`}),`Filters`,K&&(0,s.jsx)(`span`,{className:`ml-1 rounded-full bg-primary-foreground/20 px-1.5 text-[10px]`,children:M.length})]}),C&&b&&(0,s.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,s.jsxs)(i.Select,{value:P,onValueChange:e=>F(e),children:[(0,s.jsx)(i.SelectTrigger,{className:`h-8 w-[80px] text-xs`,children:(0,s.jsx)(i.SelectValue,{})}),(0,s.jsxs)(i.SelectContent,{children:[(0,s.jsx)(i.SelectItem,{value:`csv`,children:`CSV`}),(0,s.jsx)(i.SelectItem,{value:`pdf`,children:`PDF`})]})]}),(0,s.jsxs)(r.Button,{variant:`outline`,size:`sm`,onClick:W,className:`h-8`,children:[(0,s.jsx)(o.Download,{className:`h-3.5 w-3.5`}),`Export`]})]})]})]}),I&&(0,s.jsx)(`div`,{className:`border-b px-4 py-3 bg-muted/30`,children:(0,s.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,s.jsxs)(`div`,{className:`flex-1`,children:[(0,s.jsx)(`p`,{className:`text-xs font-medium text-muted-foreground mb-2`,children:`Filter by type`}),(0,s.jsx)(g,{selectedTypes:M,onChange:N})]}),K&&(0,s.jsxs)(r.Button,{variant:`ghost`,size:`sm`,onClick:G,className:`h-7 text-xs text-muted-foreground`,children:[(0,s.jsx)(o.X,{className:`h-3 w-3`}),`Clear`]})]})}),z.length===0?(0,s.jsx)(v,{message:K?`No transactions match the selected filters`:w}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(`div`,{className:`overflow-x-auto`,children:(0,s.jsxs)(`table`,{className:`w-full`,children:[(0,s.jsx)(`thead`,{children:(0,s.jsxs)(`tr`,{className:`border-b bg-muted/30`,children:[(0,s.jsx)(`th`,{className:`px-4 py-3 text-left`,children:(0,s.jsx)(h,{label:`Type`,field:`type`,currentSort:E,currentDirection:O,onSort:U})}),(0,s.jsx)(`th`,{className:`px-4 py-3 text-left`,children:(0,s.jsx)(`span`,{className:`text-xs font-medium uppercase tracking-wider text-muted-foreground`,children:`Description`})}),(0,s.jsx)(`th`,{className:`px-4 py-3 text-left`,children:(0,s.jsx)(`span`,{className:`text-xs font-medium uppercase tracking-wider text-muted-foreground`,children:`Service`})}),(0,s.jsx)(`th`,{className:`px-4 py-3 text-right`,children:(0,s.jsx)(h,{label:`Amount`,field:`amount`,currentSort:E,currentDirection:O,onSort:U})}),(0,s.jsx)(`th`,{className:`px-4 py-3 text-left`,children:(0,s.jsx)(h,{label:`Date`,field:`date`,currentSort:E,currentDirection:O,onSort:U})}),(0,s.jsx)(`th`,{className:`px-4 py-3 text-left`,children:(0,s.jsx)(`span`,{className:`text-xs font-medium uppercase tracking-wider text-muted-foreground`,children:`Status`})})]})}),(0,s.jsx)(`tbody`,{className:`divide-y`,children:H.map(e=>{let r=c[e.type],i=l[e.status],a=r.icon;return(0,s.jsxs)(`tr`,{className:t.cn(`transition-colors hover:bg-muted/50`,x&&`cursor-pointer`),onClick:()=>x?.(e),children:[(0,s.jsx)(`td`,{className:`px-4 py-3`,children:(0,s.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,s.jsx)(a,{className:t.cn(`h-4 w-4 flex-shrink-0`,r.colorClass)}),(0,s.jsx)(`span`,{className:`text-sm font-medium`,children:r.label})]})}),(0,s.jsx)(`td`,{className:`px-4 py-3`,children:(0,s.jsx)(`span`,{className:`text-sm text-foreground truncate block max-w-[200px]`,children:e.description})}),(0,s.jsx)(`td`,{className:`px-4 py-3`,children:(0,s.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:e.service||`—`})}),(0,s.jsx)(`td`,{className:`px-4 py-3 text-right`,children:(0,s.jsx)(`span`,{className:t.cn(`text-sm font-semibold tabular-nums`,m(e.type)),children:p(e.amount,e.type)})}),(0,s.jsx)(`td`,{className:`px-4 py-3`,children:(0,s.jsx)(`span`,{className:`text-sm text-muted-foreground whitespace-nowrap`,children:f(e.timestamp)})}),(0,s.jsx)(`td`,{className:`px-4 py-3`,children:(0,s.jsx)(n.Badge,{variant:i.variant,className:t.cn(`text-[11px] capitalize`,i.className),children:e.status})})]},e.id)})})]})}),B>1&&(0,s.jsx)(`div`,{className:`border-t`,children:(0,s.jsx)(_,{currentPage:V,totalPages:B,totalItems:z.length,pageSize:u,onPageChange:j})})]})]})}exports.default=y;

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

@@ -0,0 +1,425 @@
+"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 { Select as r, SelectContent as i, SelectItem as a, SelectTrigger as o, SelectValue as s } from "../select/index.es.js";
+import * as c from "react";
+import { ArrowDown as l, ArrowDownCircle as u, ArrowUp as d, ArrowUpCircle as f, ArrowUpDown as p, ChevronLeft as m, ChevronRight as h, Clock as g, Download as _, Filter as v, Gift as y, Inbox as b, RotateCcw as x, X as S } from "lucide-react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+//#region src/components/waka-credit-history/index.tsx
+var E = {
+	credit: {
+		label: "Credit",
+		icon: f,
+		colorClass: "text-green-600 dark:text-green-400"
+	},
+	debit: {
+		label: "Debit",
+		icon: u,
+		colorClass: "text-red-600 dark:text-red-400"
+	},
+	refund: {
+		label: "Refund",
+		icon: x,
+		colorClass: "text-blue-600 dark:text-blue-400"
+	},
+	bonus: {
+		label: "Bonus",
+		icon: y,
+		colorClass: "text-purple-600 dark:text-purple-400"
+	},
+	expiry: {
+		label: "Expiry",
+		icon: g,
+		colorClass: "text-orange-600 dark:text-orange-400"
+	}
+}, D = {
+	completed: {
+		variant: "default",
+		className: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 border-green-200 dark:border-green-800"
+	},
+	pending: {
+		variant: "outline",
+		className: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800"
+	},
+	failed: {
+		variant: "destructive",
+		className: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400 border-red-200 dark:border-red-800"
+	},
+	cancelled: {
+		variant: "secondary",
+		className: "bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400 border-gray-200 dark:border-gray-700"
+	}
+}, O = [
+	"credit",
+	"debit",
+	"refund",
+	"bonus",
+	"expiry"
+];
+function k(e) {
+	return e instanceof Date ? e : new Date(e);
+}
+function ee(e) {
+	return k(e).toLocaleDateString("en-US", {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+function A(e, t) {
+	return `${t === "credit" || t === "refund" || t === "bonus" ? "+" : "-"}${Math.abs(e).toLocaleString("en-US")}`;
+}
+function j(e) {
+	return e === "credit" || e === "refund" || e === "bonus" ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400";
+}
+function M({ label: t, field: n, currentSort: r, currentDirection: i, onSort: a }) {
+	let o = r === n, s = o ? i === "asc" ? d : l : p;
+	return /* @__PURE__ */ T("button", {
+		type: "button",
+		className: e("inline-flex items-center gap-1 text-xs font-medium uppercase tracking-wider hover:text-foreground transition-colors", o ? "text-foreground" : "text-muted-foreground"),
+		onClick: () => a(n),
+		children: [t, /* @__PURE__ */ w(s, { className: "h-3 w-3" })]
+	});
+}
+function N({ selectedTypes: t, onChange: n }) {
+	let r = (e) => {
+		t.includes(e) ? n(t.filter((t) => t !== e)) : n([...t, e]);
+	};
+	return /* @__PURE__ */ w("div", {
+		className: "flex flex-wrap gap-1.5",
+		children: O.map((n) => {
+			let i = E[n];
+			return /* @__PURE__ */ T("button", {
+				type: "button",
+				onClick: () => r(n),
+				className: e("inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium border transition-colors", t.length === 0 || t.includes(n) ? "bg-primary/10 border-primary/30 text-foreground" : "bg-muted/50 border-transparent text-muted-foreground hover:bg-muted"),
+				children: [/* @__PURE__ */ w(i.icon, { className: "h-3 w-3" }), i.label]
+			}, n);
+		})
+	});
+}
+function P({ currentPage: e, totalPages: t, totalItems: r, pageSize: i, onPageChange: a }) {
+	return /* @__PURE__ */ T("div", {
+		className: "flex items-center justify-between px-2 py-3",
+		children: [/* @__PURE__ */ T("p", {
+			className: "text-xs text-muted-foreground",
+			children: [
+				"Showing ",
+				(e - 1) * i + 1,
+				"-",
+				Math.min(e * i, r),
+				" of ",
+				r,
+				" transactions"
+			]
+		}), /* @__PURE__ */ T("div", {
+			className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ w(n, {
+					variant: "outline",
+					size: "icon",
+					className: "h-7 w-7",
+					disabled: e <= 1,
+					onClick: () => a(e - 1),
+					children: /* @__PURE__ */ w(m, { className: "h-3.5 w-3.5" })
+				}),
+				Array.from({ length: t }, (e, t) => t + 1).filter((n) => t <= 7 || n === 1 || n === t || Math.abs(n - e) <= 1).map((t, r, i) => {
+					let o = r > 0 && t - i[r - 1] > 1;
+					return /* @__PURE__ */ T(c.Fragment, { children: [o && /* @__PURE__ */ w("span", {
+						className: "px-1 text-xs text-muted-foreground",
+						children: "..."
+					}), /* @__PURE__ */ w(n, {
+						variant: t === e ? "default" : "outline",
+						size: "icon",
+						className: "h-7 w-7 text-xs",
+						onClick: () => a(t),
+						children: t
+					})] }, t);
+				}),
+				/* @__PURE__ */ w(n, {
+					variant: "outline",
+					size: "icon",
+					className: "h-7 w-7",
+					disabled: e >= t,
+					onClick: () => a(e + 1),
+					children: /* @__PURE__ */ w(h, { className: "h-3.5 w-3.5" })
+				})
+			]
+		})]
+	});
+}
+function F({ message: e }) {
+	return /* @__PURE__ */ T("div", {
+		className: "flex flex-col items-center justify-center py-12 text-center",
+		children: [/* @__PURE__ */ w("div", {
+			className: "rounded-full bg-muted p-3 mb-3",
+			children: /* @__PURE__ */ w(b, { className: "h-6 w-6 text-muted-foreground" })
+		}), /* @__PURE__ */ w("p", {
+			className: "text-sm text-muted-foreground",
+			children: e
+		})]
+	});
+}
+function I({ transactions: l, pageSize: u = 10, filters: d, onExport: f, onRowClick: p, showFilters: m = !1, showExport: h = !1, emptyMessage: g = "No transactions found", className: y }) {
+	let [b, x] = c.useState("date"), [O, I] = c.useState("desc"), [L, R] = c.useState(1), [z, B] = c.useState(d?.types ?? []), [V, H] = c.useState("csv"), [U, W] = c.useState(m);
+	c.useEffect(() => {
+		R(1);
+	}, [z, d]), c.useEffect(() => {
+		d?.types && B(d.types);
+	}, [d?.types]);
+	let G = c.useMemo(() => {
+		let e = [...l];
+		if (z.length > 0 && (e = e.filter((e) => z.includes(e.type))), d?.services && d.services.length > 0 && (e = e.filter((e) => e.service && d.services.includes(e.service))), d?.dateRange) {
+			let { from: t, to: n } = d.dateRange;
+			e = e.filter((e) => {
+				let r = k(e.timestamp);
+				return r >= t && r <= n;
+			});
+		}
+		return e;
+	}, [
+		l,
+		z,
+		d
+	]), K = c.useMemo(() => {
+		let e = [...G];
+		return e.sort((e, t) => {
+			let n = 0;
+			switch (b) {
+				case "date":
+					n = k(e.timestamp).getTime() - k(t.timestamp).getTime();
+					break;
+				case "amount":
+					n = e.amount - t.amount;
+					break;
+				case "type":
+					n = e.type.localeCompare(t.type);
+					break;
+			}
+			return O === "asc" ? n : -n;
+		}), e;
+	}, [
+		G,
+		b,
+		O
+	]), q = Math.max(1, Math.ceil(K.length / u)), J = Math.min(L, q), Y = K.slice((J - 1) * u, J * u), X = (e) => {
+		b === e ? I((e) => e === "asc" ? "desc" : "asc") : (x(e), I("desc")), R(1);
+	}, Z = () => {
+		f?.(V, G);
+	}, Q = () => {
+		B([]), R(1);
+	}, $ = z.length > 0;
+	return /* @__PURE__ */ T("div", {
+		className: e("rounded-lg border bg-card shadow-sm", y),
+		children: [
+			/* @__PURE__ */ T("div", {
+				className: "flex items-center justify-between gap-3 border-b px-4 py-3",
+				children: [/* @__PURE__ */ T("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ w("h3", {
+						className: "text-sm font-semibold",
+						children: "Transaction History"
+					}), /* @__PURE__ */ w(t, {
+						variant: "secondary",
+						className: "text-xs",
+						children: G.length
+					})]
+				}), /* @__PURE__ */ T("div", {
+					className: "flex items-center gap-2",
+					children: [m && /* @__PURE__ */ T(n, {
+						variant: U ? "default" : "outline",
+						size: "sm",
+						onClick: () => W((e) => !e),
+						className: "h-8",
+						children: [
+							/* @__PURE__ */ w(v, { className: "h-3.5 w-3.5" }),
+							"Filters",
+							$ && /* @__PURE__ */ w("span", {
+								className: "ml-1 rounded-full bg-primary-foreground/20 px-1.5 text-[10px]",
+								children: z.length
+							})
+						]
+					}), h && f && /* @__PURE__ */ T("div", {
+						className: "flex items-center gap-1",
+						children: [/* @__PURE__ */ T(r, {
+							value: V,
+							onValueChange: (e) => H(e),
+							children: [/* @__PURE__ */ w(o, {
+								className: "h-8 w-[80px] text-xs",
+								children: /* @__PURE__ */ w(s, {})
+							}), /* @__PURE__ */ T(i, { children: [/* @__PURE__ */ w(a, {
+								value: "csv",
+								children: "CSV"
+							}), /* @__PURE__ */ w(a, {
+								value: "pdf",
+								children: "PDF"
+							})] })]
+						}), /* @__PURE__ */ T(n, {
+							variant: "outline",
+							size: "sm",
+							onClick: Z,
+							className: "h-8",
+							children: [/* @__PURE__ */ w(_, { className: "h-3.5 w-3.5" }), "Export"]
+						})]
+					})]
+				})]
+			}),
+			U && /* @__PURE__ */ w("div", {
+				className: "border-b px-4 py-3 bg-muted/30",
+				children: /* @__PURE__ */ T("div", {
+					className: "flex items-center justify-between gap-3",
+					children: [/* @__PURE__ */ T("div", {
+						className: "flex-1",
+						children: [/* @__PURE__ */ w("p", {
+							className: "text-xs font-medium text-muted-foreground mb-2",
+							children: "Filter by type"
+						}), /* @__PURE__ */ w(N, {
+							selectedTypes: z,
+							onChange: B
+						})]
+					}), $ && /* @__PURE__ */ T(n, {
+						variant: "ghost",
+						size: "sm",
+						onClick: Q,
+						className: "h-7 text-xs text-muted-foreground",
+						children: [/* @__PURE__ */ w(S, { className: "h-3 w-3" }), "Clear"]
+					})]
+				})
+			}),
+			K.length === 0 ? /* @__PURE__ */ w(F, { message: $ ? "No transactions match the selected filters" : g }) : /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w("div", {
+				className: "overflow-x-auto",
+				children: /* @__PURE__ */ T("table", {
+					className: "w-full",
+					children: [/* @__PURE__ */ w("thead", { children: /* @__PURE__ */ T("tr", {
+						className: "border-b bg-muted/30",
+						children: [
+							/* @__PURE__ */ w("th", {
+								className: "px-4 py-3 text-left",
+								children: /* @__PURE__ */ w(M, {
+									label: "Type",
+									field: "type",
+									currentSort: b,
+									currentDirection: O,
+									onSort: X
+								})
+							}),
+							/* @__PURE__ */ w("th", {
+								className: "px-4 py-3 text-left",
+								children: /* @__PURE__ */ w("span", {
+									className: "text-xs font-medium uppercase tracking-wider text-muted-foreground",
+									children: "Description"
+								})
+							}),
+							/* @__PURE__ */ w("th", {
+								className: "px-4 py-3 text-left",
+								children: /* @__PURE__ */ w("span", {
+									className: "text-xs font-medium uppercase tracking-wider text-muted-foreground",
+									children: "Service"
+								})
+							}),
+							/* @__PURE__ */ w("th", {
+								className: "px-4 py-3 text-right",
+								children: /* @__PURE__ */ w(M, {
+									label: "Amount",
+									field: "amount",
+									currentSort: b,
+									currentDirection: O,
+									onSort: X
+								})
+							}),
+							/* @__PURE__ */ w("th", {
+								className: "px-4 py-3 text-left",
+								children: /* @__PURE__ */ w(M, {
+									label: "Date",
+									field: "date",
+									currentSort: b,
+									currentDirection: O,
+									onSort: X
+								})
+							}),
+							/* @__PURE__ */ w("th", {
+								className: "px-4 py-3 text-left",
+								children: /* @__PURE__ */ w("span", {
+									className: "text-xs font-medium uppercase tracking-wider text-muted-foreground",
+									children: "Status"
+								})
+							})
+						]
+					}) }), /* @__PURE__ */ w("tbody", {
+						className: "divide-y",
+						children: Y.map((n) => {
+							let r = E[n.type], i = D[n.status], a = r.icon;
+							return /* @__PURE__ */ T("tr", {
+								className: e("transition-colors hover:bg-muted/50", p && "cursor-pointer"),
+								onClick: () => p?.(n),
+								children: [
+									/* @__PURE__ */ w("td", {
+										className: "px-4 py-3",
+										children: /* @__PURE__ */ T("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ w(a, { className: e("h-4 w-4 flex-shrink-0", r.colorClass) }), /* @__PURE__ */ w("span", {
+												className: "text-sm font-medium",
+												children: r.label
+											})]
+										})
+									}),
+									/* @__PURE__ */ w("td", {
+										className: "px-4 py-3",
+										children: /* @__PURE__ */ w("span", {
+											className: "text-sm text-foreground truncate block max-w-[200px]",
+											children: n.description
+										})
+									}),
+									/* @__PURE__ */ w("td", {
+										className: "px-4 py-3",
+										children: /* @__PURE__ */ w("span", {
+											className: "text-sm text-muted-foreground",
+											children: n.service || "—"
+										})
+									}),
+									/* @__PURE__ */ w("td", {
+										className: "px-4 py-3 text-right",
+										children: /* @__PURE__ */ w("span", {
+											className: e("text-sm font-semibold tabular-nums", j(n.type)),
+											children: A(n.amount, n.type)
+										})
+									}),
+									/* @__PURE__ */ w("td", {
+										className: "px-4 py-3",
+										children: /* @__PURE__ */ w("span", {
+											className: "text-sm text-muted-foreground whitespace-nowrap",
+											children: ee(n.timestamp)
+										})
+									}),
+									/* @__PURE__ */ w("td", {
+										className: "px-4 py-3",
+										children: /* @__PURE__ */ w(t, {
+											variant: i.variant,
+											className: e("text-[11px] capitalize", i.className),
+											children: n.status
+										})
+									})
+								]
+							}, n.id);
+						})
+					})]
+				})
+			}), q > 1 && /* @__PURE__ */ w("div", {
+				className: "border-t",
+				children: /* @__PURE__ */ w(P, {
+					currentPage: J,
+					totalPages: q,
+					totalItems: K.length,
+					pageSize: u,
+					onPageChange: R
+				})
+			})] })
+		]
+	});
+}
+//#endregion
+export { I as default };

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

@@ -0,0 +1,11 @@
+"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`);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,t,r=800){let[i,a]=n.useState(t?0:e),o=n.useRef(void 0),s=n.useRef(t?0:e);return n.useEffect(()=>{if(!t){a(e),s.current=e;return}let n=s.current,i=e-n;if(i===0)return;let c=performance.now(),l=t=>{let u=t-c,d=Math.min(u/r,1);a(n+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,t,r]),i}function f({used:e,total:n,percentage:i,displayPercentage:l,color:u,glowColor:d,zone:f,variant:p,size:m,showValue:h,showLabel:g,label:_,formatValue:v,className:y}){let b=a[m],x=o[p],S=b.svgSize,C=S/2,w=(S-b.strokeWidth)/2,T=c(C,C,w,0,x.endAngle-.01),E=c(C,C,w,0,l/100*x.endAngle||.01),D=p===`ring`?S:S/2+b.strokeWidth,O=f===`critical`;return(0,r.jsxs)(`div`,{className:t.cn(`inline-flex flex-col items-center gap-1`,y),children:[(0,r.jsxs)(`div`,{className:`relative`,style:{width:S,height:D,overflow:`visible`},children:[O&&(0,r.jsx)(`div`,{className:`absolute inset-0 rounded-full blur-xl animate-pulse`,style:{background:`radial-gradient(circle, ${d} 0%, transparent 70%)`}}),(0,r.jsxs)(`svg`,{width:S,height:S,viewBox:`0 0 ${S} ${S}`,className:`overflow-visible`,style:{transform:`rotate(${x.rotation}deg)`},children:[(0,r.jsxs)(`defs`,{children:[(0,r.jsxs)(`linearGradient`,{id:`credit-meter-gradient-${m}-${p}`,x1:`0%`,y1:`0%`,x2:`100%`,y2:`0%`,children:[(0,r.jsx)(`stop`,{offset:`0%`,stopColor:u,stopOpacity:`0.8`}),(0,r.jsx)(`stop`,{offset:`100%`,stopColor:u,stopOpacity:`1`})]}),(0,r.jsx)(`filter`,{id:`credit-meter-shadow-${m}-${p}`,x:`-20%`,y:`-20%`,width:`140%`,height:`140%`,children:(0,r.jsx)(`feDropShadow`,{dx:`0`,dy:`0`,stdDeviation:`3`,floodColor:u,floodOpacity:`0.5`})})]}),(0,r.jsx)(`path`,{d:T,fill:`none`,stroke:`currentColor`,strokeWidth:b.strokeWidth,strokeLinecap:`round`,className:`text-muted opacity-20`}),(0,r.jsx)(`path`,{d:E,fill:`none`,stroke:`url(#credit-meter-gradient-${m}-${p})`,strokeWidth:b.strokeWidth,strokeLinecap:`round`,filter:O?`url(#credit-meter-shadow-${m}-${p})`:void 0,className:`transition-all duration-300 ease-out`}),l>0&&(0,r.jsx)(`circle`,{cx:s(C,C,w,l/100*x.endAngle).x,cy:s(C,C,w,l/100*x.endAngle).y,r:b.strokeWidth/3,fill:`white`,className:t.cn(`transition-all duration-300`,O&&`animate-pulse`)})]}),h&&(0,r.jsxs)(`div`,{className:t.cn(`absolute inset-0 flex flex-col items-center justify-center`,p===`gauge`&&`top-auto bottom-0 pb-1`),style:{height:p===`gauge`?S/2:void 0,top:p===`gauge`?`auto`:void 0},children:[(0,r.jsxs)(`div`,{className:`flex items-baseline gap-0.5`,children:[(0,r.jsx)(`span`,{className:t.cn(`font-bold tabular-nums transition-colors duration-300`,b.fontSize),style:{color:u},children:v(Math.round(e))}),(0,r.jsxs)(`span`,{className:t.cn(`font-medium text-muted-foreground`,b.subFontSize),children:[`/`,v(n)]})]}),(0,r.jsxs)(`span`,{className:t.cn(`font-medium tabular-nums text-muted-foreground`,b.subFontSize),children:[Math.round(i),`%`]})]})]}),g&&_&&(0,r.jsx)(`span`,{className:t.cn(`text-muted-foreground text-center`,b.labelSize),children:_})]})}function p({used:e,total:n,percentage:i,displayPercentage:o,color:s,zone:c,size:l,showValue:u,showLabel:d,animated:f,label:p,formatValue:m,className:h}){let g=a[l],_=c===`critical`?`bg-destructive`:c===`warning`?`bg-warning`:`bg-success`;return(0,r.jsxs)(`div`,{className:t.cn(`w-full`,h),children:[d&&p||u?(0,r.jsxs)(`div`,{className:t.cn(`flex items-center justify-between mb-2`),children:[d&&p&&(0,r.jsx)(`span`,{className:t.cn(`font-medium`,g.barText),children:p}),u&&(0,r.jsxs)(`div`,{className:t.cn(`flex items-center gap-1.5 text-muted-foreground`,g.barText),children:[(0,r.jsx)(`span`,{className:`tabular-nums`,style:{color:s},children:m(Math.round(e))}),(0,r.jsx)(`span`,{children:`/`}),(0,r.jsx)(`span`,{className:`tabular-nums`,children:m(n)}),(0,r.jsxs)(`span`,{className:`text-muted-foreground`,children:[`(`,Math.round(i),`%)`]})]})]}):null,(0,r.jsx)(`div`,{className:t.cn(`relative w-full overflow-hidden rounded-full bg-muted`,g.barHeight),children:(0,r.jsx)(`div`,{className:t.cn(`h-full rounded-full transition-colors duration-300`,_,c===`critical`&&`animate-pulse`),style:{width:`${Math.min(o,100)}%`,transition:f?void 0:`width 0.3s ease-out`},children:f&&(0,r.jsx)(`div`,{className:`absolute inset-0 overflow-hidden rounded-full`,children:(0,r.jsx)(`div`,{className:`absolute inset-0 animate-credit-meter-shine`})})})}),(0,r.jsx)(`style`,{children:`
+        @keyframes credit-meter-shine {
+          0% { transform: translateX(-100%); opacity: 0; }
+          50% { opacity: 0.3; }
+          100% { transform: translateX(100%); opacity: 0; }
+        }
+        .animate-credit-meter-shine {
+          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+          animation: credit-meter-shine 2s ease-in-out infinite;
+        }
+      `})]})}function m({used:e,total:t,variant:n=`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 n===`bar`?(0,r.jsx)(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:_}):(0,r.jsx)(f,{used:e,total:t,percentage:v,displayPercentage:y,color:b,glowColor:x,zone:S,variant:n,size:c,showValue:s,showLabel:o,label:h,formatValue:g,className:_})}exports.default=m;