@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-spotlight/index.es.js

@@ -0,0 +1,290 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { safeNavigate as t } from "../../utils/security.es.js";
+import * as n from "react";
+import { ArrowRight as r, Clock as i, ExternalLink as a, FileText as o, Folder as s, Search as c, Settings as l, User as u, X as d } from "lucide-react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/waka-spotlight/index.tsx
+var h = {
+	page: /* @__PURE__ */ p(o, { className: "h-4 w-4" }),
+	action: /* @__PURE__ */ p(r, { className: "h-4 w-4" }),
+	user: /* @__PURE__ */ p(u, { className: "h-4 w-4" }),
+	file: /* @__PURE__ */ p(s, { className: "h-4 w-4" }),
+	setting: /* @__PURE__ */ p(l, { className: "h-4 w-4" }),
+	external: /* @__PURE__ */ p(a, { className: "h-4 w-4" })
+};
+function g({ open: r, onOpenChange: a, onSearch: o, filters: s, placeholder: l = "Search anything...", recentItems: u, quickActions: g, debounceMs: _ = 150, showPreview: v = !0 }) {
+	let [y, b] = n.useState(""), [x, S] = n.useState(null), [C, w] = n.useState([]), [T, E] = n.useState(0), [D, O] = n.useState(!1), [k, A] = n.useState(null), j = n.useRef(null), M = n.useRef(void 0);
+	n.useEffect(() => {
+		if (M.current && clearTimeout(M.current), !y.trim()) {
+			w([]), O(!1);
+			return;
+		}
+		return O(!0), M.current = setTimeout(async () => {
+			try {
+				w(await o(y, x || void 0)), E(0);
+			} catch (e) {
+				console.error("Search error:", e), w([]);
+			} finally {
+				O(!1);
+			}
+		}, _), () => {
+			M.current && clearTimeout(M.current);
+		};
+	}, [
+		y,
+		x,
+		o,
+		_
+	]), n.useEffect(() => {
+		A((y ? C : u || g || [])[T] || null);
+	}, [
+		T,
+		C,
+		y,
+		u,
+		g
+	]), n.useEffect(() => {
+		r && (b(""), S(null), w([]), E(0), setTimeout(() => j.current?.focus(), 0));
+	}, [r]), n.useEffect(() => {
+		if (!r) return;
+		let e = y ? C : u || g || [], t = (t) => {
+			switch (t.key) {
+				case "ArrowDown":
+					t.preventDefault(), E((t) => Math.min(t + 1, e.length - 1));
+					break;
+				case "ArrowUp":
+					t.preventDefault(), E((e) => Math.max(e - 1, 0));
+					break;
+				case "Enter":
+					t.preventDefault();
+					let n = e[T];
+					n && N(n);
+					break;
+				case "Escape":
+					t.preventDefault(), a(!1);
+					break;
+				case "Tab":
+					if (s && s.length > 0) {
+						t.preventDefault();
+						let e = (s.findIndex((e) => e.id === x) + 1) % (s.length + 1);
+						S(e === s.length ? null : s[e].id);
+					}
+					break;
+			}
+		};
+		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+	}, [
+		r,
+		T,
+		C,
+		y,
+		u,
+		g,
+		a,
+		s,
+		x
+	]), n.useEffect(() => {
+		let e = (e) => {
+			(e.metaKey || e.ctrlKey) && e.key === "/" && (e.preventDefault(), a(!r));
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [r, a]);
+	let N = (e) => {
+		e.action?.(), e.href && t(e.href), a(!1);
+	};
+	if (!r) return null;
+	let P = y ? C : u || g || [], F = y && !D && C.length === 0;
+	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+		className: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm animate-in fade-in-0",
+		onClick: () => a(!1)
+	}), /* @__PURE__ */ p("div", {
+		className: "fixed left-1/2 top-[15%] z-50 w-full max-w-3xl -translate-x-1/2 animate-in fade-in-0 zoom-in-95 slide-in-from-top-4",
+		children: /* @__PURE__ */ m("div", {
+			className: "overflow-hidden rounded-2xl border bg-popover/95 shadow-2xl backdrop-blur-xl",
+			children: [
+				/* @__PURE__ */ m("div", {
+					className: "flex items-center gap-3 border-b px-4 py-3",
+					children: [
+						/* @__PURE__ */ p(c, { className: e("h-5 w-5 transition-colors", D ? "text-primary animate-pulse" : "text-muted-foreground") }),
+						/* @__PURE__ */ p("input", {
+							ref: j,
+							type: "text",
+							value: y,
+							onChange: (e) => b(e.target.value),
+							placeholder: l,
+							className: "flex-1 bg-transparent text-base outline-none placeholder:text-muted-foreground"
+						}),
+						y && /* @__PURE__ */ p("button", {
+							onClick: () => b(""),
+							className: "rounded-md p-1 hover:bg-accent",
+							children: /* @__PURE__ */ p(d, { className: "h-4 w-4 text-muted-foreground" })
+						})
+					]
+				}),
+				s && s.length > 0 && /* @__PURE__ */ m("div", {
+					className: "flex items-center gap-2 border-b px-4 py-2",
+					children: [/* @__PURE__ */ p("button", {
+						onClick: () => S(null),
+						className: e("rounded-full px-3 py-1 text-xs font-medium transition-colors", x === null ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:text-foreground"),
+						children: "All"
+					}), s.map((t) => /* @__PURE__ */ m("button", {
+						onClick: () => S(t.id),
+						className: e("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium transition-colors", x === t.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:text-foreground"),
+						children: [t.icon, t.label]
+					}, t.id))]
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "flex",
+					children: [/* @__PURE__ */ m("div", {
+						className: e("max-h-96 overflow-y-auto", v ? "w-1/2 border-r" : "w-full"),
+						children: [
+							!y && u && u.length > 0 && /* @__PURE__ */ m("div", {
+								className: "px-4 py-2 text-xs font-medium text-muted-foreground flex items-center gap-2",
+								children: [/* @__PURE__ */ p(i, { className: "h-3 w-3" }), "Recent"]
+							}),
+							!y && !u && g && g.length > 0 && /* @__PURE__ */ p("div", {
+								className: "px-4 py-2 text-xs font-medium text-muted-foreground",
+								children: "Quick Actions"
+							}),
+							y && C.length > 0 && /* @__PURE__ */ m("div", {
+								className: "px-4 py-2 text-xs font-medium text-muted-foreground",
+								children: [
+									C.length,
+									" result",
+									C.length === 1 ? "" : "s"
+								]
+							}),
+							/* @__PURE__ */ p("div", {
+								className: "p-2",
+								children: F ? /* @__PURE__ */ m("div", {
+									className: "py-12 text-center",
+									children: [
+										/* @__PURE__ */ p(c, { className: "h-10 w-10 mx-auto text-muted-foreground/50 mb-3" }),
+										/* @__PURE__ */ m("p", {
+											className: "text-sm text-muted-foreground",
+											children: [
+												"No results for \"",
+												y,
+												"\""
+											]
+										}),
+										/* @__PURE__ */ p("p", {
+											className: "text-xs text-muted-foreground/70 mt-1",
+											children: "Try different keywords"
+										})
+									]
+								}) : P.map((t, n) => /* @__PURE__ */ m("button", {
+									onClick: () => N(t),
+									onMouseEnter: () => E(n),
+									className: e("flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-all", T === n ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"),
+									children: [
+										/* @__PURE__ */ p("span", {
+											className: e("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", T === n ? "bg-primary text-primary-foreground" : "bg-muted"),
+											children: t.icon || h[t.type]
+										}),
+										/* @__PURE__ */ m("div", {
+											className: "flex-1 min-w-0",
+											children: [/* @__PURE__ */ p("div", {
+												className: "font-medium truncate",
+												children: t.title
+											}), t.subtitle && /* @__PURE__ */ p("div", {
+												className: "text-xs text-muted-foreground truncate",
+												children: t.subtitle
+											})]
+										}),
+										t.meta && /* @__PURE__ */ p("span", {
+											className: "text-xs text-muted-foreground shrink-0",
+											children: t.meta
+										})
+									]
+								}, t.id))
+							})
+						]
+					}), v && k && /* @__PURE__ */ p("div", {
+						className: "w-1/2 p-4",
+						children: /* @__PURE__ */ p("div", {
+							className: "h-full rounded-lg border bg-muted/30 p-4",
+							children: k.preview || /* @__PURE__ */ m("div", {
+								className: "flex h-full flex-col items-center justify-center text-center",
+								children: [
+									/* @__PURE__ */ p("span", {
+										className: "flex h-12 w-12 items-center justify-center rounded-xl bg-muted mb-3",
+										children: k.icon || h[k.type]
+									}),
+									/* @__PURE__ */ p("h3", {
+										className: "font-semibold",
+										children: k.title
+									}),
+									k.subtitle && /* @__PURE__ */ p("p", {
+										className: "text-sm text-muted-foreground mt-1",
+										children: k.subtitle
+									}),
+									/* @__PURE__ */ p("p", {
+										className: "text-xs text-muted-foreground mt-3 capitalize",
+										children: k.type
+									})
+								]
+							})
+						})
+					})]
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "flex items-center justify-between border-t bg-muted/30 px-4 py-2 text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ m("div", {
+						className: "flex items-center gap-4",
+						children: [
+							/* @__PURE__ */ m("span", {
+								className: "flex items-center gap-1",
+								children: [/* @__PURE__ */ p("kbd", {
+									className: "rounded border bg-background px-1.5 py-0.5",
+									children: "↑↓"
+								}), "Navigate"]
+							}),
+							/* @__PURE__ */ m("span", {
+								className: "flex items-center gap-1",
+								children: [/* @__PURE__ */ p("kbd", {
+									className: "rounded border bg-background px-1.5 py-0.5",
+									children: "↵"
+								}), "Open"]
+							}),
+							s && /* @__PURE__ */ m("span", {
+								className: "flex items-center gap-1",
+								children: [/* @__PURE__ */ p("kbd", {
+									className: "rounded border bg-background px-1.5 py-0.5",
+									children: "Tab"
+								}), "Filter"]
+							})
+						]
+					}), /* @__PURE__ */ m("span", {
+						className: "flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ p("kbd", {
+								className: "rounded border bg-background px-1.5 py-0.5",
+								children: "⌘"
+							}),
+							/* @__PURE__ */ p("kbd", {
+								className: "rounded border bg-background px-1.5 py-0.5",
+								children: "/"
+							}),
+							"Toggle"
+						]
+					})]
+				})
+			]
+		})
+	})] });
+}
+function _() {
+	let [e, t] = n.useState(!1);
+	return {
+		open: e,
+		onOpenChange: t,
+		openSpotlight: () => t(!0),
+		closeSpotlight: () => t(!1),
+		toggleSpotlight: () => t((e) => !e)
+	};
+}
+//#endregion
+export { g as WakaSpotlight, _ as useSpotlight };

package/dist/components/waka-stat/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={default:{icon:`text-muted-foreground`,bg:`bg-muted`,gradient:`from-gray-500 to-gray-600`},primary:{icon:`text-primary`,bg:`bg-primary/10`,gradient:`from-primary to-primary/80`},success:{icon:`text-green-600`,bg:`bg-green-100`,gradient:`from-green-500 to-green-600`},warning:{icon:`text-yellow-600`,bg:`bg-yellow-100`,gradient:`from-yellow-500 to-yellow-600`},destructive:{icon:`text-destructive`,bg:`bg-destructive/10`,gradient:`from-destructive to-destructive/80`},blue:{icon:`text-blue-600`,bg:`bg-blue-100`,gradient:`from-blue-500 to-blue-600`},purple:{icon:`text-purple-600`,bg:`bg-purple-100`,gradient:`from-purple-500 to-purple-600`}};function o({direction:e,value:n,text:a,invert:o,size:s}){let c=o?e===`down`:e===`up`,l=o?e===`up`:e===`down`,u={sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`},d={sm:`text-[10px]`,md:`text-xs`,lg:`text-sm`},f=e===`up`?r.TrendingUp:e===`down`?r.TrendingDown:r.Minus;return(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-1`,d[s],c&&`text-green-600`,l&&`text-destructive`,e===`neutral`&&`text-muted-foreground`),children:[(0,i.jsx)(f,{className:u[s]}),n&&(0,i.jsx)(`span`,{className:`font-medium`,children:n}),a&&(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:a})]})}function s({size:e}){return(0,i.jsxs)(`div`,{className:`animate-pulse`,children:[(0,i.jsx)(`div`,{className:`h-3 w-16 bg-muted rounded mb-2`}),(0,i.jsx)(`div`,{className:t.cn(`bg-muted rounded`,{sm:`h-5 w-16`,md:`h-7 w-20`,lg:`h-9 w-24`}[e])})]})}function c({label:e,value:n,description:c,icon:l,trend:u,trendValue:d,trendText:f,invertTrend:p=!1,variant:m=`default`,size:h=`md`,color:g=`default`,loading:_=!1,className:v}){let y=a[g],b={sm:{container:`p-3`,label:`text-xs`,value:`text-xl`,description:`text-[10px]`,icon:`h-8 w-8`,iconInner:`h-4 w-4`},md:{container:`p-4`,label:`text-sm`,value:`text-2xl`,description:`text-xs`,icon:`h-10 w-10`,iconInner:`h-5 w-5`},lg:{container:`p-6`,label:`text-base`,value:`text-4xl`,description:`text-sm`,icon:`h-12 w-12`,iconInner:`h-6 w-6`}}[h];return _?(0,i.jsx)(`div`,{className:t.cn(m===`card`&&`rounded-lg border bg-card shadow-sm`,m===`gradient`&&`rounded-lg text-white`,b.container,v),children:(0,i.jsx)(s,{size:h})}):m===`minimal`?(0,i.jsxs)(`div`,{className:t.cn(`flex flex-col`,v),children:[(0,i.jsx)(`span`,{className:t.cn(`text-muted-foreground`,b.label),children:e}),(0,i.jsxs)(`div`,{className:`flex items-baseline gap-2`,children:[(0,i.jsx)(`span`,{className:t.cn(`font-bold tracking-tight`,b.value),children:n}),u&&(0,i.jsx)(o,{direction:u,value:d,text:f,invert:p,size:h})]}),c&&(0,i.jsx)(`span`,{className:t.cn(`text-muted-foreground mt-1`,b.description),children:c})]}):m===`gradient`?(0,i.jsx)(`div`,{className:t.cn(`rounded-lg bg-gradient-to-br text-white`,y.gradient,b.container,v),children:(0,i.jsxs)(`div`,{className:`flex items-start justify-between`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`p`,{className:t.cn(`text-white/80`,b.label),children:e}),(0,i.jsx)(`p`,{className:t.cn(`font-bold mt-1`,b.value),children:n}),c&&(0,i.jsx)(`p`,{className:t.cn(`text-white/70 mt-1`,b.description),children:c}),u&&(0,i.jsxs)(`div`,{className:`mt-2 flex items-center gap-1 text-white/90`,children:[u===`up`&&(0,i.jsx)(r.ArrowUp,{className:b.iconInner}),u===`down`&&(0,i.jsx)(r.ArrowDown,{className:b.iconInner}),d&&(0,i.jsx)(`span`,{className:b.description,children:d}),f&&(0,i.jsx)(`span`,{className:t.cn(`text-white/70`,b.description),children:f})]})]}),l&&(0,i.jsx)(`div`,{className:`rounded-lg bg-white/20 p-2`,children:(0,i.jsx)(`div`,{className:b.iconInner,children:l})})]})}):(0,i.jsx)(`div`,{className:t.cn(m===`card`&&`rounded-lg border bg-card shadow-sm`,b.container,v),children:(0,i.jsxs)(`div`,{className:`flex items-start justify-between`,children:[(0,i.jsxs)(`div`,{className:`flex-1`,children:[(0,i.jsx)(`p`,{className:t.cn(`text-muted-foreground font-medium`,b.label),children:e}),(0,i.jsxs)(`div`,{className:`flex items-baseline gap-2 mt-1`,children:[(0,i.jsx)(`span`,{className:t.cn(`font-bold tracking-tight`,b.value),children:n}),u&&(0,i.jsx)(o,{direction:u,value:d,text:f,invert:p,size:h})]}),c&&(0,i.jsx)(`p`,{className:t.cn(`text-muted-foreground mt-1`,b.description),children:c})]}),l&&(0,i.jsx)(`div`,{className:t.cn(`rounded-lg flex items-center justify-center flex-shrink-0`,b.icon,y.bg),children:(0,i.jsx)(`div`,{className:t.cn(b.iconInner,y.icon),children:l})})]})})}function l({children:e,layout:n=`row`,columns:r=4,gap:a=`md`,className:o}){return(0,i.jsx)(`div`,{className:t.cn({sm:`gap-2`,md:`gap-4`,lg:`gap-6`}[a],n===`row`&&`flex flex-wrap`,n===`grid`&&t.cn(`grid`,{2:`grid-cols-2`,3:`grid-cols-3`,4:`grid-cols-4`}[r]),o),children:e})}function u(e={}){let{initialValue:t=0,format:r,previousValue:i}=e,[a,o]=n.useState(t);return{value:r?r(a):a.toString(),rawValue:a,setValue:o,trend:n.useMemo(()=>i===void 0?`neutral`:a>i?`up`:a<i?`down`:`neutral`,[a,i]),trendValue:n.useMemo(()=>{if(i===void 0||i===0)return;let e=(a-i)/i*100;return`${e>=0?`+`:``}${e.toFixed(1)}%`},[a,i])}}exports.WakaStatGroup=l,exports.default=c,exports.useStat=u;

package/dist/components/waka-stat/index.d.ts

@@ -52,6 +52,6 @@ export declare function useStat(options?: UseStatOptions): {
     rawValue: number;
     setValue: React.Dispatch<React.SetStateAction<number>>;
     trend: TrendDirection;
-    trendValue: string;
+    trendValue: string | undefined;
 };
 export default WakaStat;

package/dist/components/waka-stat/index.es.js

@@ -0,0 +1,243 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { ArrowDown as n, ArrowUp as r, Minus as i, TrendingDown as a, TrendingUp as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/waka-stat/index.tsx
+var l = {
+	default: {
+		icon: "text-muted-foreground",
+		bg: "bg-muted",
+		gradient: "from-gray-500 to-gray-600"
+	},
+	primary: {
+		icon: "text-primary",
+		bg: "bg-primary/10",
+		gradient: "from-primary to-primary/80"
+	},
+	success: {
+		icon: "text-green-600",
+		bg: "bg-green-100",
+		gradient: "from-green-500 to-green-600"
+	},
+	warning: {
+		icon: "text-yellow-600",
+		bg: "bg-yellow-100",
+		gradient: "from-yellow-500 to-yellow-600"
+	},
+	destructive: {
+		icon: "text-destructive",
+		bg: "bg-destructive/10",
+		gradient: "from-destructive to-destructive/80"
+	},
+	blue: {
+		icon: "text-blue-600",
+		bg: "bg-blue-100",
+		gradient: "from-blue-500 to-blue-600"
+	},
+	purple: {
+		icon: "text-purple-600",
+		bg: "bg-purple-100",
+		gradient: "from-purple-500 to-purple-600"
+	}
+};
+function u({ direction: t, value: n, text: r, invert: l, size: u }) {
+	let d = l ? t === "down" : t === "up", f = l ? t === "up" : t === "down", p = {
+		sm: "h-3 w-3",
+		md: "h-4 w-4",
+		lg: "h-5 w-5"
+	}, m = {
+		sm: "text-[10px]",
+		md: "text-xs",
+		lg: "text-sm"
+	}, h = t === "up" ? o : t === "down" ? a : i;
+	return /* @__PURE__ */ c("div", {
+		className: e("flex items-center gap-1", m[u], d && "text-green-600", f && "text-destructive", t === "neutral" && "text-muted-foreground"),
+		children: [
+			/* @__PURE__ */ s(h, { className: p[u] }),
+			n && /* @__PURE__ */ s("span", {
+				className: "font-medium",
+				children: n
+			}),
+			r && /* @__PURE__ */ s("span", {
+				className: "text-muted-foreground",
+				children: r
+			})
+		]
+	});
+}
+function d({ size: t }) {
+	return /* @__PURE__ */ c("div", {
+		className: "animate-pulse",
+		children: [/* @__PURE__ */ s("div", { className: "h-3 w-16 bg-muted rounded mb-2" }), /* @__PURE__ */ s("div", { className: e("bg-muted rounded", {
+			sm: "h-5 w-16",
+			md: "h-7 w-20",
+			lg: "h-9 w-24"
+		}[t]) })]
+	});
+}
+function f({ label: t, value: i, description: a, icon: o, trend: f, trendValue: p, trendText: m, invertTrend: h = !1, variant: g = "default", size: _ = "md", color: v = "default", loading: y = !1, className: b }) {
+	let x = l[v], S = {
+		sm: {
+			container: "p-3",
+			label: "text-xs",
+			value: "text-xl",
+			description: "text-[10px]",
+			icon: "h-8 w-8",
+			iconInner: "h-4 w-4"
+		},
+		md: {
+			container: "p-4",
+			label: "text-sm",
+			value: "text-2xl",
+			description: "text-xs",
+			icon: "h-10 w-10",
+			iconInner: "h-5 w-5"
+		},
+		lg: {
+			container: "p-6",
+			label: "text-base",
+			value: "text-4xl",
+			description: "text-sm",
+			icon: "h-12 w-12",
+			iconInner: "h-6 w-6"
+		}
+	}[_];
+	return y ? /* @__PURE__ */ s("div", {
+		className: e(g === "card" && "rounded-lg border bg-card shadow-sm", g === "gradient" && "rounded-lg text-white", S.container, b),
+		children: /* @__PURE__ */ s(d, { size: _ })
+	}) : g === "minimal" ? /* @__PURE__ */ c("div", {
+		className: e("flex flex-col", b),
+		children: [
+			/* @__PURE__ */ s("span", {
+				className: e("text-muted-foreground", S.label),
+				children: t
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "flex items-baseline gap-2",
+				children: [/* @__PURE__ */ s("span", {
+					className: e("font-bold tracking-tight", S.value),
+					children: i
+				}), f && /* @__PURE__ */ s(u, {
+					direction: f,
+					value: p,
+					text: m,
+					invert: h,
+					size: _
+				})]
+			}),
+			a && /* @__PURE__ */ s("span", {
+				className: e("text-muted-foreground mt-1", S.description),
+				children: a
+			})
+		]
+	}) : g === "gradient" ? /* @__PURE__ */ s("div", {
+		className: e("rounded-lg bg-gradient-to-br text-white", x.gradient, S.container, b),
+		children: /* @__PURE__ */ c("div", {
+			className: "flex items-start justify-between",
+			children: [/* @__PURE__ */ c("div", { children: [
+				/* @__PURE__ */ s("p", {
+					className: e("text-white/80", S.label),
+					children: t
+				}),
+				/* @__PURE__ */ s("p", {
+					className: e("font-bold mt-1", S.value),
+					children: i
+				}),
+				a && /* @__PURE__ */ s("p", {
+					className: e("text-white/70 mt-1", S.description),
+					children: a
+				}),
+				f && /* @__PURE__ */ c("div", {
+					className: "mt-2 flex items-center gap-1 text-white/90",
+					children: [
+						f === "up" && /* @__PURE__ */ s(r, { className: S.iconInner }),
+						f === "down" && /* @__PURE__ */ s(n, { className: S.iconInner }),
+						p && /* @__PURE__ */ s("span", {
+							className: S.description,
+							children: p
+						}),
+						m && /* @__PURE__ */ s("span", {
+							className: e("text-white/70", S.description),
+							children: m
+						})
+					]
+				})
+			] }), o && /* @__PURE__ */ s("div", {
+				className: "rounded-lg bg-white/20 p-2",
+				children: /* @__PURE__ */ s("div", {
+					className: S.iconInner,
+					children: o
+				})
+			})]
+		})
+	}) : /* @__PURE__ */ s("div", {
+		className: e(g === "card" && "rounded-lg border bg-card shadow-sm", S.container, b),
+		children: /* @__PURE__ */ c("div", {
+			className: "flex items-start justify-between",
+			children: [/* @__PURE__ */ c("div", {
+				className: "flex-1",
+				children: [
+					/* @__PURE__ */ s("p", {
+						className: e("text-muted-foreground font-medium", S.label),
+						children: t
+					}),
+					/* @__PURE__ */ c("div", {
+						className: "flex items-baseline gap-2 mt-1",
+						children: [/* @__PURE__ */ s("span", {
+							className: e("font-bold tracking-tight", S.value),
+							children: i
+						}), f && /* @__PURE__ */ s(u, {
+							direction: f,
+							value: p,
+							text: m,
+							invert: h,
+							size: _
+						})]
+					}),
+					a && /* @__PURE__ */ s("p", {
+						className: e("text-muted-foreground mt-1", S.description),
+						children: a
+					})
+				]
+			}), o && /* @__PURE__ */ s("div", {
+				className: e("rounded-lg flex items-center justify-center flex-shrink-0", S.icon, x.bg),
+				children: /* @__PURE__ */ s("div", {
+					className: e(S.iconInner, x.icon),
+					children: o
+				})
+			})]
+		})
+	});
+}
+function p({ children: t, layout: n = "row", columns: r = 4, gap: i = "md", className: a }) {
+	return /* @__PURE__ */ s("div", {
+		className: e({
+			sm: "gap-2",
+			md: "gap-4",
+			lg: "gap-6"
+		}[i], n === "row" && "flex flex-wrap", n === "grid" && e("grid", {
+			2: "grid-cols-2",
+			3: "grid-cols-3",
+			4: "grid-cols-4"
+		}[r]), a),
+		children: t
+	});
+}
+function m(e = {}) {
+	let { initialValue: n = 0, format: r, previousValue: i } = e, [a, o] = t.useState(n);
+	return {
+		value: r ? r(a) : a.toString(),
+		rawValue: a,
+		setValue: o,
+		trend: t.useMemo(() => i === void 0 ? "neutral" : a > i ? "up" : a < i ? "down" : "neutral", [a, i]),
+		trendValue: t.useMemo(() => {
+			if (i === void 0 || i === 0) return;
+			let e = (a - i) / i * 100;
+			return `${e >= 0 ? "+" : ""}${e.toFixed(1)}%`;
+		}, [a, i])
+	};
+}
+//#endregion
+export { p as WakaStatGroup, f as default, m as useStat };

package/dist/components/waka-stats-hexagon/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={default:{primary:`#3b82f6`,secondary:`#ef4444`},blue:{primary:`#3b82f6`,secondary:`#93c5fd`},green:{primary:`#22c55e`,secondary:`#86efac`},purple:{primary:`#8b5cf6`,secondary:`#c4b5fd`},orange:{primary:`#f59e0b`,secondary:`#fcd34d`},pink:{primary:`#ec4899`,secondary:`#f9a8d4`},cyan:{primary:`#06b6d4`,secondary:`#67e8f9`},gradient:{primary:`#8b5cf6`,secondary:`#3b82f6`}},o=[{id:`stat1`,label:`Stat 1`,value:75},{id:`stat2`,label:`Stat 2`,value:60},{id:`stat3`,label:`Stat 3`,value:85},{id:`stat4`,label:`Stat 4`,value:50},{id:`stat5`,label:`Stat 5`,value:70},{id:`stat6`,label:`Stat 6`,value:65}],s={id:`default`,name:`Profile`,stats:[75,60,85,50,70,65]};function c(e={}){let{initialStats:t=o,initialProfile:r=s}=e,[i,a]=n.useState(t),[c,l]=n.useState(r),[u,d]=n.useState(null),[f,p]=n.useState(null),[m,h]=n.useState(!1);return{stats:i,setStats:a,profile:c,setProfile:l,comparisonProfile:u,setComparisonProfile:d,updateStat:n.useCallback((e,t)=>{a(n=>n.map(n=>n.id===e?{...n,value:t}:n)),l(n=>{let r=i.findIndex(t=>t.id===e);if(r!==-1){let e=[...n.stats];return e[r]=t,{...n,stats:e}}return n})},[i]),updateProfileStats:n.useCallback(e=>{e.length===6&&(l(t=>({...t,stats:e})),a(t=>t.map((t,n)=>({...t,value:e[n]}))))},[]),reset:n.useCallback(()=>{a(t),l(r),d(null),p(null),h(!1)},[t,r]),activeStatIndex:f,setActiveStatIndex:p,isComparing:m,toggleComparison:n.useCallback(()=>{h(e=>!e)},[])}}function l({stats:e,profile:o,comparisonProfile:s,size:c=300,levels:l=5,theme:u=`default`,primaryColor:d,showGrid:f=!0,showLabels:p=!0,showValues:m=!0,showPoints:h=!0,showTooltips:g=!0,animated:_=!0,animationDuration:v=800,showLegend:y=!0,className:b,onStatClick:x}){let[S,C]=n.useState(!_),[w,T]=n.useState(null),[E,D]=n.useState(null);if(n.useEffect(()=>{if(_){C(!1);let e=setTimeout(()=>{C(!0)},50);return()=>clearTimeout(e)}},[_,o.stats]),e.length!==6)return console.warn(`WakaStatsHexagon requires exactly 6 stats`),null;let O=a[u],k=d||o.color||O.primary,A=s?.color||O.secondary,j=c/2,M=c/2,N=c*.35,P=2*Math.PI/6,F=(e,t,n=100)=>{let r=e*P-Math.PI/2,i=t/n*N;return{x:j+i*Math.cos(r),y:M+i*Math.sin(r)}},I=(t,n=1)=>t.map((t,r)=>{let i=e[r]?.max||100,a=F(r,t*n,i);return`${r===0?`M`:`L`} ${a.x.toFixed(2)} ${a.y.toFixed(2)}`}).join(` `)+` Z`,L=e=>{let t=e/l*N;return Array.from({length:6}).map((e,n)=>{let r=n*P-Math.PI/2,i=j+t*Math.cos(r),a=M+t*Math.sin(r);return`${n===0?`M`:`L`} ${i.toFixed(2)} ${a.toFixed(2)}`}).join(` `)+` Z`},R=(e,t,n,r)=>{let i=F(e,n,r.max||100);T({index:e,profileId:t,x:i.x,y:i.y,value:n,stat:r})},z=(e,t)=>{x&&x(e,t)},B=()=>y?(0,i.jsx)(`div`,{className:`flex items-center justify-center gap-6 mt-4`,children:(s?[{id:o.id,name:o.name,color:k},{id:s.id,name:s.name,color:A}]:[{id:o.id,name:o.name,color:k}]).map(e=>(0,i.jsxs)(`button`,{type:`button`,className:t.cn(`flex items-center gap-2 text-sm transition-opacity duration-200`,`hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 rounded px-2 py-1`,E&&E!==e.id&&`opacity-40`),style:{"--tw-ring-color":e.color},onMouseEnter:()=>D(e.id),onMouseLeave:()=>D(null),children:[(0,i.jsx)(`span`,{className:`w-3 h-3 rounded-full`,style:{backgroundColor:e.color}}),(0,i.jsx)(`span`,{className:`text-muted-foreground font-medium`,children:e.name})]},e.id))}):null,V=e=>{switch(e){case 0:return{textAnchor:`middle`,dx:0,dy:-8};case 1:return{textAnchor:`start`,dx:8,dy:0};case 2:return{textAnchor:`start`,dx:8,dy:8};case 3:return{textAnchor:`middle`,dx:0,dy:16};case 4:return{textAnchor:`end`,dx:-8,dy:8};case 5:return{textAnchor:`end`,dx:-8,dy:0};default:return{textAnchor:`middle`,dx:0,dy:0}}};return(0,i.jsxs)(`div`,{className:t.cn(`inline-flex flex-col items-center`,b),children:[(0,i.jsxs)(`div`,{className:`relative`,style:{width:c,height:c},children:[(0,i.jsxs)(`svg`,{width:c,height:c,viewBox:`0 0 ${c} ${c}`,className:`overflow-visible`,"aria-hidden":`true`,focusable:`false`,children:[(0,i.jsx)(`defs`,{children:u===`gradient`&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(`linearGradient`,{id:`hexGradientFill`,x1:`0%`,y1:`0%`,x2:`100%`,y2:`100%`,children:[(0,i.jsx)(`stop`,{offset:`0%`,stopColor:O.primary,stopOpacity:`0.3`}),(0,i.jsx)(`stop`,{offset:`100%`,stopColor:O.secondary,stopOpacity:`0.3`})]}),(0,i.jsxs)(`linearGradient`,{id:`hexGradientStroke`,x1:`0%`,y1:`0%`,x2:`100%`,y2:`100%`,children:[(0,i.jsx)(`stop`,{offset:`0%`,stopColor:O.primary}),(0,i.jsx)(`stop`,{offset:`100%`,stopColor:O.secondary})]})]})}),f&&Array.from({length:l}).map((e,t)=>(0,i.jsx)(`path`,{d:L(t+1),fill:`none`,stroke:`currentColor`,strokeWidth:`1`,className:`opacity-15`},`grid-${t}`)),e.map((e,t)=>{let n=t*P-Math.PI/2;return(0,i.jsx)(`line`,{x1:j,y1:M,x2:j+N*Math.cos(n),y2:M+N*Math.sin(n),stroke:`currentColor`,strokeWidth:`1`,className:`opacity-20`},`axis-${t}`)}),s&&(0,i.jsxs)(`g`,{className:t.cn(`transition-opacity duration-300`,E&&E!==s.id&&`opacity-20`),children:[(0,i.jsx)(`path`,{d:I(s.stats,+!!S),fill:A,fillOpacity:s.fillOpacity??.15,stroke:A,strokeWidth:`2`,strokeLinejoin:`round`,className:t.cn(_&&`transition-all ease-out`),style:{transitionDuration:`${v}ms`}}),h&&s.stats.map((n,r)=>{let a=e[r],o=a?.max||100,c=F(r,S?n:0,o),l=w?.profileId===s.id&&w?.index===r;return(0,i.jsx)(`circle`,{cx:c.x,cy:c.y,r:l?6:4,fill:A,stroke:`white`,strokeWidth:`2`,className:t.cn(`cursor-pointer transition-all`,_&&`ease-out`),style:{transitionDuration:_?`${v}ms`:`150ms`},onMouseEnter:()=>R(r,s.id,n,a),onMouseLeave:()=>T(null),onClick:()=>z(a,n)},`comparison-point-${r}`)})]}),(0,i.jsxs)(`g`,{className:t.cn(`transition-opacity duration-300`,E&&E!==o.id&&`opacity-20`),children:[(0,i.jsx)(`path`,{d:I(o.stats,+!!S),fill:u===`gradient`?`url(#hexGradientFill)`:k,fillOpacity:u===`gradient`?1:o.fillOpacity??.25,stroke:u===`gradient`?`url(#hexGradientStroke)`:k,strokeWidth:`2.5`,strokeLinejoin:`round`,className:t.cn(_&&`transition-all ease-out`),style:{transitionDuration:`${v}ms`}}),h&&o.stats.map((n,r)=>{let a=e[r],s=a?.max||100,c=F(r,S?n:0,s),l=w?.profileId===o.id&&w?.index===r;return(0,i.jsx)(`circle`,{cx:c.x,cy:c.y,r:l?7:5,fill:u===`gradient`?O.primary:k,stroke:`white`,strokeWidth:`2`,className:t.cn(`cursor-pointer transition-all`,_&&`ease-out`),style:{transitionDuration:_?`${v}ms`:`150ms`},onMouseEnter:()=>R(r,o.id,n,a),onMouseLeave:()=>T(null),onClick:()=>z(a,n)},`main-point-${r}`)})]}),p&&e.map((e,t)=>{let n=t*P-Math.PI/2,r=j+(N+35)*Math.cos(n),a=M+(N+35)*Math.sin(n),{textAnchor:s,dx:c,dy:l}=V(t),u=o.stats[t],d=e.max||100;return(0,i.jsxs)(`g`,{children:[(0,i.jsx)(`text`,{x:r+c,y:a+l,textAnchor:s,fill:`currentColor`,className:`text-xs font-semibold opacity-80`,children:e.label}),m&&(0,i.jsxs)(`text`,{x:r+c,y:a+l+14,textAnchor:s,fill:`currentColor`,className:`text-[10px] opacity-50`,children:[u,`/`,d]})]},`label-${t}`)})]}),g&&w&&(0,i.jsxs)(`div`,{className:t.cn(`absolute z-20 px-3 py-2 text-xs rounded-lg shadow-xl`,`bg-popover text-popover-foreground border`,`animate-in fade-in-0 zoom-in-95 duration-150`,`pointer-events-none min-w-[120px]`),style:{left:w.x,top:w.y-60,transform:`translateX(-50%)`},children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5 font-semibold mb-1`,children:[w.stat.icon,(0,i.jsx)(`span`,{children:w.stat.label})]}),(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`Value:`}),(0,i.jsxs)(`span`,{className:`font-bold`,children:[w.value,` / `,w.stat.max||100]})]}),w.stat.description&&(0,i.jsxs)(`div`,{className:`mt-1.5 pt-1.5 border-t text-muted-foreground flex items-start gap-1`,children:[(0,i.jsx)(r.Info,{className:`w-3 h-3 mt-0.5 shrink-0`}),(0,i.jsx)(`span`,{children:w.stat.description})]}),(0,i.jsx)(`div`,{className:`absolute left-1/2 -translate-x-1/2 -bottom-1.5 w-3 h-3 rotate-45 bg-popover border-r border-b`})]})]}),B()]})}function u({data:e,profileName:t=`Stats`,...n}){let r=e.slice(0,6);for(;r.length<6;)r.push({label:`Stat ${r.length+1}`,value:0});return(0,i.jsx)(l,{stats:r.map((e,t)=>({id:`stat-${t}`,label:e.label,value:e.value,max:e.max})),profile:{id:`main`,name:t,stats:r.map(e=>e.value)},...n})}function d({characterStats:e,characterName:t=`Character`,comparisonStats:n,comparisonName:r=`Comparison`,maxStat:a=20,theme:o=`purple`,...s}){return(0,i.jsx)(l,{stats:[{id:`str`,label:`STR`,value:e.strength,max:a,description:`Physical power`},{id:`dex`,label:`DEX`,value:e.dexterity,max:a,description:`Agility & reflexes`},{id:`int`,label:`INT`,value:e.intelligence,max:a,description:`Mental acuity`},{id:`wis`,label:`WIS`,value:e.wisdom,max:a,description:`Perception & insight`},{id:`cha`,label:`CHA`,value:e.charisma,max:a,description:`Force of personality`},{id:`con`,label:`CON`,value:e.constitution,max:a,description:`Health & stamina`}],profile:{id:`main`,name:t,stats:[e.strength,e.dexterity,e.intelligence,e.wisdom,e.charisma,e.constitution]},comparisonProfile:n?{id:`comparison`,name:r,stats:[n.strength,n.dexterity,n.intelligence,n.wisdom,n.charisma,n.constitution]}:void 0,theme:o,...s})}function f({skills:e,name:t=`Skills Assessment`,theme:n=`blue`,...r}){return(0,i.jsx)(l,{stats:[{id:`tech`,label:`Technical`,value:e.technical,description:`Technical expertise & coding skills`},{id:`comm`,label:`Communication`,value:e.communication,description:`Written & verbal communication`},{id:`lead`,label:`Leadership`,value:e.leadership,description:`Team leadership & management`},{id:`prob`,label:`Problem Solving`,value:e.problemSolving,description:`Analytical thinking`},{id:`create`,label:`Creativity`,value:e.creativity,description:`Innovation & creative thinking`},{id:`team`,label:`Teamwork`,value:e.teamwork,description:`Collaboration & cooperation`}],profile:{id:`main`,name:t,stats:[e.technical,e.communication,e.leadership,e.problemSolving,e.creativity,e.teamwork]},theme:n,...r})}exports.WakaStatsHexagonRPG=d,exports.WakaStatsHexagonSimple=u,exports.WakaStatsHexagonSkills=f,exports.default=l,exports.useStatsHexagon=c;

package/dist/components/waka-stats-hexagon/index.d.ts

@@ -99,7 +99,7 @@ export interface UseStatsHexagonReturn {
     toggleComparison: () => void;
 }
 export declare function useStatsHexagon(options?: UseStatsHexagonOptions): UseStatsHexagonReturn;
-export declare function WakaStatsHexagon({ stats, profile, comparisonProfile, size, levels, theme, primaryColor, showGrid, showLabels, showValues, showPoints, showTooltips, animated, animationDuration, showLegend, className, onStatClick, }: WakaStatsHexagonProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaStatsHexagon({ stats, profile, comparisonProfile, size, levels, theme, primaryColor, showGrid, showLabels, showValues, showPoints, showTooltips, animated, animationDuration, showLegend, className, onStatClick, }: WakaStatsHexagonProps): import("react/jsx-runtime").JSX.Element | null;
 export interface WakaStatsHexagonSimpleProps extends Omit<WakaStatsHexagonProps, "stats" | "profile"> {
     /** Simple data format: array of { label, value } */
     data: Array<{