@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-welcome-modal/index.es.js

@@ -0,0 +1,354 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Check as n, ChevronRight as r, Rocket as i, Settings as a, Sparkles as o, Users as s, X as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import * as d from "@radix-ui/react-dialog";
+//#region src/components/waka-welcome-modal/index.tsx
+var f = [
+	{
+		id: "welcome",
+		title: "Welcome aboard!",
+		description: "We're excited to have you here. Let's get you set up in just a few steps.",
+		icon: /* @__PURE__ */ l(o, { className: "h-12 w-12 text-primary" })
+	},
+	{
+		id: "features",
+		title: "Discover powerful features",
+		description: "Explore the tools and capabilities that will help you succeed.",
+		icon: /* @__PURE__ */ l(i, { className: "h-12 w-12 text-primary" })
+	},
+	{
+		id: "preferences",
+		title: "Customize your experience",
+		description: "Select the options that best fit your needs.",
+		icon: /* @__PURE__ */ l(a, { className: "h-12 w-12 text-primary" }),
+		options: [
+			{
+				id: "dark-mode",
+				label: "Dark Mode",
+				description: "Enable dark theme"
+			},
+			{
+				id: "notifications",
+				label: "Notifications",
+				description: "Get updates and alerts"
+			},
+			{
+				id: "newsletter",
+				label: "Newsletter",
+				description: "Receive tips and news"
+			}
+		],
+		multiSelect: !0
+	},
+	{
+		id: "ready",
+		title: "You're all set!",
+		description: "Your workspace is ready. Let's get started on your journey.",
+		icon: /* @__PURE__ */ l(s, { className: "h-12 w-12 text-primary" })
+	}
+];
+function p(e = {}) {
+	let { defaultOpen: n = !1, storageKey: r = "waka-welcome-modal-shown", onComplete: i, onSkip: a } = e, o = t.useCallback(() => {
+		if (typeof window > "u") return !1;
+		try {
+			return localStorage.getItem(r) === "true";
+		} catch {
+			return !1;
+		}
+	}, [r]), s = t.useCallback(() => {
+		if (typeof window > "u") return n;
+		try {
+			let e = localStorage.getItem(r) === "true";
+			return n && !e;
+		} catch {
+			return n;
+		}
+	}, [n, r]), [c, l] = t.useState(s), [u, d] = t.useState(0), [f, p] = t.useState({}), [m, h] = t.useState(o);
+	t.useEffect(() => {
+		l(s()), h(o());
+	}, [s, o]);
+	let g = t.useCallback((e) => {
+		if (h(e), typeof window < "u") try {
+			e ? localStorage.setItem(r, "true") : localStorage.removeItem(r);
+		} catch {}
+	}, [r]), _ = t.useCallback(() => {
+		l(!0);
+	}, []), v = t.useCallback(() => {
+		l(!1);
+	}, []), y = t.useCallback(() => {
+		d((e) => e + 1);
+	}, []), b = t.useCallback(() => {
+		d((e) => Math.max(0, e - 1));
+	}, []), x = t.useCallback((e, t, n = !1) => {
+		p((r) => {
+			let i = r[e] || [], a = i.includes(t);
+			return n ? {
+				...r,
+				[e]: a ? i.filter((e) => e !== t) : [...i, t]
+			} : {
+				...r,
+				[e]: a ? [] : [t]
+			};
+		});
+	}, []), S = t.useCallback(() => {
+		p({});
+	}, []), C = t.useCallback(() => {
+		l(!1), i?.(f);
+	}, [f, i]), w = t.useCallback(() => {
+		l(!1), a?.();
+	}, [a]);
+	return {
+		open: c,
+		setOpen: l,
+		openModal: _,
+		closeModal: v,
+		currentStep: u,
+		setCurrentStep: d,
+		nextStep: y,
+		prevStep: b,
+		selections: f,
+		toggleSelection: x,
+		clearSelections: S,
+		dontShowAgain: m,
+		setDontShowAgain: g,
+		complete: C,
+		skip: w,
+		reset: t.useCallback(() => {
+			d(0), p({});
+		}, []),
+		modalProps: {
+			open: c,
+			onOpenChange: t.useCallback((e) => {
+				l(e), e || setTimeout(() => {
+					d(0);
+				}, 300);
+			}, []),
+			dontShowAgain: m,
+			onDontShowAgainChange: g,
+			onComplete: C,
+			onSkip: w
+		}
+	};
+}
+function m({ totalSteps: t, currentStep: n, onStepClick: r, className: i }) {
+	return /* @__PURE__ */ l("div", {
+		className: e("flex items-center justify-center gap-2", i),
+		children: Array.from({ length: t }).map((t, i) => /* @__PURE__ */ l("button", {
+			type: "button",
+			onClick: () => r?.(i),
+			disabled: !r,
+			"aria-label": `Go to step ${i + 1}`,
+			"aria-current": i === n ? "step" : void 0,
+			className: e("h-2 rounded-full transition-all duration-300", i === n ? "w-6 bg-primary" : "w-2 bg-muted-foreground/30 hover:bg-muted-foreground/50", r && "cursor-pointer", !r && "cursor-default")
+		}, i))
+	});
+}
+function h({ option: t, selected: r, onSelect: i }) {
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		onClick: i,
+		className: e("flex items-center gap-3 w-full p-4 rounded-lg border-2 transition-all duration-200", "hover:border-primary/50 hover:bg-primary/5", r ? "border-primary bg-primary/10" : "border-border bg-background"),
+		children: [
+			t.icon && /* @__PURE__ */ l("div", {
+				className: "flex-shrink-0 text-primary",
+				children: t.icon
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "flex-1 text-left",
+				children: [/* @__PURE__ */ l("div", {
+					className: "font-medium",
+					children: t.label
+				}), t.description && /* @__PURE__ */ l("div", {
+					className: "text-sm text-muted-foreground",
+					children: t.description
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: e("flex-shrink-0 h-5 w-5 rounded-full border-2 flex items-center justify-center transition-all duration-200", r ? "border-primary bg-primary text-primary-foreground" : "border-muted-foreground/30"),
+				children: r && /* @__PURE__ */ l(n, { className: "h-3 w-3" })
+			})
+		]
+	});
+}
+function g({ open: n, onOpenChange: i, steps: a = f, userName: s, onComplete: p, onSkip: g, allowSkip: _ = !0, showDontShowAgain: v = !0, onDontShowAgainChange: y, dontShowAgain: b = !1, skipText: x = "Skip", nextText: S = "Next", prevText: C = "Back", completeText: w = "Get Started", className: T, animationDuration: E = 300 }) {
+	let [D, O] = t.useState(0), [k, A] = t.useState({}), [j, M] = t.useState("forward"), [N, P] = t.useState(!1), [F, I] = t.useState(b), L = a.length, R = a[D], z = D === 0, B = D === L - 1;
+	t.useEffect(() => {
+		I(b);
+	}, [b]), t.useEffect(() => {
+		if (!n) {
+			let e = setTimeout(() => {
+				O(0), M("forward");
+			}, E);
+			return () => clearTimeout(e);
+		}
+	}, [n, E]);
+	let V = t.useCallback(() => {
+		N || (B ? (p?.(k), i(!1)) : (M("forward"), P(!0), setTimeout(() => {
+			O((e) => e + 1), P(!1);
+		}, E / 2)));
+	}, [
+		B,
+		N,
+		k,
+		p,
+		i,
+		E
+	]), H = t.useCallback(() => {
+		N || z || (M("backward"), P(!0), setTimeout(() => {
+			O((e) => e - 1), P(!1);
+		}, E / 2));
+	}, [
+		z,
+		N,
+		E
+	]), U = t.useCallback(() => {
+		g?.(), i(!1);
+	}, [g, i]), W = t.useCallback((e) => {
+		I(e), y?.(e);
+	}, [y]), G = t.useCallback((e) => {
+		R && A((t) => {
+			let n = t[R.id] || [], r = n.includes(e);
+			return R.multiSelect ? {
+				...t,
+				[R.id]: r ? n.filter((t) => t !== e) : [...n, e]
+			} : {
+				...t,
+				[R.id]: r ? [] : [e]
+			};
+		});
+	}, [R]), K = t.useMemo(() => R ? s && D === 0 ? R.title.replace("!", `, ${s}!`) : R.title : "", [
+		R,
+		s,
+		D
+	]);
+	return /* @__PURE__ */ l(d.Root, {
+		open: n,
+		onOpenChange: i,
+		children: /* @__PURE__ */ u(d.Portal, { children: [/* @__PURE__ */ l(d.Overlay, { className: e("fixed inset-0 z-50 bg-black/80", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0") }), /* @__PURE__ */ u(d.Content, {
+			"aria-describedby": "welcome-modal-description",
+			className: e("fixed z-50 w-full max-w-lg bg-background shadow-2xl rounded-2xl overflow-hidden", "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "duration-300", T),
+			children: [
+				/* @__PURE__ */ u(d.Title, {
+					className: "sr-only",
+					children: [
+						"Welcome Modal - Step ",
+						D + 1,
+						" of ",
+						L
+					]
+				}),
+				/* @__PURE__ */ l(d.Description, {
+					id: "welcome-modal-description",
+					className: "sr-only",
+					children: "A multi-step welcome wizard to help you get started"
+				}),
+				/* @__PURE__ */ u(d.Close, {
+					className: e("absolute right-4 top-4 z-10 rounded-full p-2", "bg-background/80 backdrop-blur-sm", "opacity-70 ring-offset-background transition-opacity", "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"),
+					children: [/* @__PURE__ */ l(c, { className: "h-4 w-4" }), /* @__PURE__ */ l("span", {
+						className: "sr-only",
+						children: "Close"
+					})]
+				}),
+				/* @__PURE__ */ u("div", {
+					className: "relative",
+					children: [
+						/* @__PURE__ */ u("div", {
+							className: "relative h-48 bg-gradient-to-br from-primary/10 via-primary/5 to-background flex items-center justify-center overflow-hidden",
+							children: [/* @__PURE__ */ u("div", {
+								className: "absolute inset-0 opacity-20",
+								children: [/* @__PURE__ */ l("div", { className: "absolute top-0 left-0 w-32 h-32 bg-primary/20 rounded-full blur-3xl animate-pulse" }), /* @__PURE__ */ l("div", { className: "absolute bottom-0 right-0 w-40 h-40 bg-primary/30 rounded-full blur-3xl animate-pulse delay-150" })]
+							}), /* @__PURE__ */ l("div", {
+								className: e("relative z-10 transition-all", N && j === "forward" && "animate-slide-out-left", N && j === "backward" && "animate-slide-out-right", !N && "animate-slide-in"),
+								style: { animationDuration: `${E / 2}ms` },
+								children: R?.illustration ? /* @__PURE__ */ l("img", {
+									src: R.illustration,
+									alt: R.title,
+									className: "max-h-32 object-contain"
+								}) : /* @__PURE__ */ l("div", {
+									className: "p-6 bg-background/50 backdrop-blur-sm rounded-full shadow-lg",
+									children: R?.icon || /* @__PURE__ */ l(o, { className: "h-12 w-12 text-primary" })
+								})
+							})]
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "px-8 pt-6 pb-4",
+							children: /* @__PURE__ */ u("div", {
+								className: e("transition-all", N && j === "forward" && "opacity-0 translate-x-4", N && j === "backward" && "opacity-0 -translate-x-4", !N && "opacity-100 translate-x-0"),
+								style: { transitionDuration: `${E / 2}ms` },
+								children: [/* @__PURE__ */ l("h2", {
+									className: "text-2xl font-bold text-center mb-2",
+									children: K
+								}), /* @__PURE__ */ l("p", {
+									className: "text-muted-foreground text-center",
+									children: R?.description
+								})]
+							})
+						}),
+						R?.options && R.options.length > 0 && /* @__PURE__ */ l("div", {
+							className: e("px-8 pb-4 space-y-3 transition-all", N && "opacity-0", !N && "opacity-100"),
+							style: { transitionDuration: `${E / 2}ms` },
+							children: R.options.map((e) => /* @__PURE__ */ l(h, {
+								option: e,
+								selected: (k[R.id] || []).includes(e.id),
+								onSelect: () => G(e.id)
+							}, e.id))
+						}),
+						R?.content && /* @__PURE__ */ l("div", {
+							className: e("px-8 pb-4 transition-all", N && "opacity-0", !N && "opacity-100"),
+							style: { transitionDuration: `${E / 2}ms` },
+							children: R.content
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "px-8 py-4",
+							children: /* @__PURE__ */ l(m, {
+								totalSteps: L,
+								currentStep: D
+							})
+						}),
+						/* @__PURE__ */ u("div", {
+							className: "px-8 pb-6 space-y-4",
+							children: [v && B && /* @__PURE__ */ u("label", {
+								className: "flex items-center justify-center gap-2 text-sm text-muted-foreground cursor-pointer",
+								children: [/* @__PURE__ */ l("input", {
+									type: "checkbox",
+									checked: F,
+									onChange: (e) => W(e.target.checked),
+									className: "h-4 w-4 rounded border-border"
+								}), /* @__PURE__ */ l("span", { children: "Don't show this again" })]
+							}), /* @__PURE__ */ u("div", {
+								className: "flex items-center justify-between gap-4",
+								children: [/* @__PURE__ */ l("div", {
+									className: "flex-1",
+									children: z ? _ && /* @__PURE__ */ l("button", {
+										type: "button",
+										onClick: U,
+										className: e("px-4 py-2 text-sm font-medium text-muted-foreground", "hover:text-foreground transition-colors"),
+										children: x
+									}) : /* @__PURE__ */ l("button", {
+										type: "button",
+										onClick: H,
+										disabled: N,
+										className: e("px-4 py-2 text-sm font-medium text-muted-foreground", "hover:text-foreground transition-colors", "disabled:opacity-50 disabled:cursor-not-allowed"),
+										children: C
+									})
+								}), /* @__PURE__ */ u("button", {
+									type: "button",
+									onClick: V,
+									disabled: N,
+									className: e("flex items-center gap-2 px-6 py-3 rounded-full font-medium", "bg-primary text-primary-foreground", "hover:bg-primary/90 transition-colors", "disabled:opacity-50 disabled:cursor-not-allowed", "shadow-lg shadow-primary/25"),
+									children: [B ? w : S, !B && /* @__PURE__ */ l(r, { className: "h-4 w-4" })]
+								})]
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ l("style", { dangerouslySetInnerHTML: { __html: "\n            @keyframes waka-slide-out-left {\n              from {\n                opacity: 1;\n                transform: translateX(0);\n              }\n              to {\n                opacity: 0;\n                transform: translateX(-20px);\n              }\n            }\n            @keyframes waka-slide-out-right {\n              from {\n                opacity: 1;\n                transform: translateX(0);\n              }\n              to {\n                opacity: 0;\n                transform: translateX(20px);\n              }\n            }\n            @keyframes waka-slide-in {\n              from {\n                opacity: 0;\n                transform: translateX(20px);\n              }\n              to {\n                opacity: 1;\n                transform: translateX(0);\n              }\n            }\n            .animate-slide-out-left {\n              animation: waka-slide-out-left ease-out forwards;\n            }\n            .animate-slide-out-right {\n              animation: waka-slide-out-right ease-out forwards;\n            }\n            .animate-slide-in {\n              animation: waka-slide-in ease-out forwards;\n            }\n          " } })
+			]
+		})] })
+	});
+}
+//#endregion
+export { g as WakaWelcomeModal, g as default, f as defaultWelcomeSteps, p as useWelcomeModal };

package/dist/components/waka-xp-bar/index.cjs.js

@@ -0,0 +1,87 @@
+"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={1:`hsl(var(--chart-1))`,5:`hsl(var(--success))`,10:`hsl(var(--chart-2))`,20:`hsl(var(--warning))`,30:`hsl(var(--destructive))`,50:`hsl(var(--chart-3))`,75:`hsl(var(--info))`,100:`hsl(var(--chart-4))`},a={sm:{height:`h-2`,levelBadge:`h-8 w-8 text-xs`,text:`text-xs`,container:`gap-2`,particleSize:4},md:{height:`h-3`,levelBadge:`h-10 w-10 text-sm`,text:`text-sm`,container:`gap-3`,particleSize:6},lg:{height:`h-4`,levelBadge:`h-14 w-14 text-lg`,text:`text-base`,container:`gap-4`,particleSize:8}};function o(e,t){let n=Object.keys(t).map(Number).sort((e,t)=>t-e);for(let r of n)if(e>=r)return t[r];return t[n[n.length-1]]||`hsl(var(--chart-1))`}function s(e,t){return`rgba(${parseInt(e.slice(1,3),16)}, ${parseInt(e.slice(3,5),16)}, ${parseInt(e.slice(5,7),16)}, ${t})`}function c(e,t,n,r){let i=[n,`hsl(var(--foreground))`,n,`hsl(var(--warning))`],a=[`circle`,`star`,`diamond`,`spark`];return{id:e,x:t+(Math.random()-.5)*20,y:0,vx:(Math.random()-.5)*3,vy:-2-Math.random()*4,size:r*(.5+Math.random()*.8),color:i[Math.floor(Math.random()*i.length)],opacity:1,life:0,maxLife:60+Math.random()*40,shape:a[Math.floor(Math.random()*a.length)]}}function l({particles:e}){return(0,r.jsx)(`svg`,{className:`pointer-events-none absolute inset-0 h-full w-full overflow-visible`,style:{zIndex:10},children:e.map(e=>{let t=e.opacity*(1-e.life/e.maxLife);switch(e.shape){case`star`:let n=e.size/2,i=e.size/4;return(0,r.jsx)(`polygon`,{points:Array.from({length:10},(t,r)=>{let a=r%2==0?n:i,o=r*Math.PI/5-Math.PI/2;return`${e.x+a*Math.cos(o)},${e.y+a*Math.sin(o)}`}).join(` `),fill:e.color,opacity:t,style:{filter:`drop-shadow(0 0 ${e.size}px ${e.color})`}},e.id);case`diamond`:let a=e.size/2;return(0,r.jsx)(`polygon`,{points:`${e.x},${e.y-a} ${e.x+a},${e.y} ${e.x},${e.y+a} ${e.x-a},${e.y}`,fill:e.color,opacity:t,style:{filter:`drop-shadow(0 0 ${e.size}px ${e.color})`}},e.id);case`spark`:return(0,r.jsxs)(`g`,{opacity:t,children:[(0,r.jsx)(`line`,{x1:e.x-e.size,y1:e.y,x2:e.x+e.size,y2:e.y,stroke:e.color,strokeWidth:2,style:{filter:`drop-shadow(0 0 ${e.size}px ${e.color})`}}),(0,r.jsx)(`line`,{x1:e.x,y1:e.y-e.size,x2:e.x,y2:e.y+e.size,stroke:e.color,strokeWidth:2,style:{filter:`drop-shadow(0 0 ${e.size}px ${e.color})`}})]},e.id);default:return(0,r.jsx)(`circle`,{cx:e.x,cy:e.y,r:e.size/2,fill:e.color,opacity:t,style:{filter:`drop-shadow(0 0 ${e.size}px ${e.color})`}},e.id)}})})}function u({level:e,color:n,size:i,animated:o,isLevelingUp:c}){let l=a[i];return(0,r.jsxs)(`div`,{className:t.cn(`relative flex items-center justify-center rounded-full font-bold text-white shadow-lg`,l.levelBadge,c&&`animate-level-up-badge`),style:{background:`linear-gradient(135deg, ${n}, ${s(n,.7)})`,boxShadow:o?`0 0 20px ${s(n,.5)}, 0 0 40px ${s(n,.3)}`:void 0},children:[(0,r.jsx)(`div`,{className:`absolute inset-1 rounded-full`,style:{background:`radial-gradient(circle at 30% 30%, ${s(`#ffffff`,.3)}, transparent 60%)`}}),(0,r.jsx)(`span`,{className:`relative z-10`,children:e}),o&&(0,r.jsx)(`div`,{className:`absolute -inset-1 animate-spin-slow rounded-full opacity-50`,style:{background:`conic-gradient(from 0deg, transparent, ${n}, transparent)`,animationDuration:`4s`}}),c&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:`absolute inset-0 animate-level-up-ring rounded-full`,style:{borderColor:n}}),(0,r.jsx)(`div`,{className:`absolute inset-0 animate-level-up-ring-2 rounded-full`,style:{borderColor:n}})]})]})}function d({active:e,color:t,onComplete:i}){let[a,o]=n.useState(!1);if(n.useEffect(()=>{if(e){o(!0);let e=setTimeout(()=>{o(!1),i()},2500);return()=>clearTimeout(e)}},[e,i]),!a)return null;let c=[t,`hsl(var(--warning))`,`hsl(var(--foreground))`,`hsl(var(--chart-3))`,`hsl(var(--success))`];return(0,r.jsxs)(`div`,{className:`pointer-events-none absolute inset-0 z-50 overflow-visible`,children:[[...Array(40)].map((e,t)=>{let n=t/40*360,i=80+Math.random()*120,a=4+Math.random()*8,o=.8+Math.random()*.4;return(0,r.jsx)(`div`,{className:`absolute left-1/2 top-1/2 animate-celebration-burst rounded-full`,style:{width:a,height:a,backgroundColor:c[Math.floor(Math.random()*c.length)],"--angle":`${n}deg`,"--distance":`${i}px`,animationDuration:`${o}s`,animationDelay:`${Math.random()*.2}s`,boxShadow:`0 0 ${a*2}px ${c[Math.floor(Math.random()*c.length)]}`}},t)}),(0,r.jsx)(`div`,{className:`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-level-up-text`,children:(0,r.jsx)(`div`,{className:`whitespace-nowrap rounded-full px-4 py-2 text-sm font-bold text-white shadow-2xl`,style:{background:`linear-gradient(135deg, ${t}, ${s(t,.8)})`,boxShadow:`0 0 30px ${s(t,.6)}`},children:`LEVEL UP!`})})]})}function f({currentXP:e,requiredXP:f,level:p,previousXP:m,showParticles:h=!0,showLevel:g=!0,showXPCount:_=!0,onLevelUp:v,levelColors:y=i,nextReward:b,size:x=`md`,animated:S=!0,className:C}){let[w,T]=n.useState(0),[E,D]=n.useState([]),[O,k]=n.useState(!1),[A,j]=n.useState(!1),M=n.useRef(p),N=n.useRef(0),P=n.useRef(null),F=n.useRef(void 0),I=a[x],L=Math.min(100,e/f*100),R=o(p,y),z=m??e;return n.useEffect(()=>{if(!S){T(L);return}let e=w,t=L-e,n=Date.now(),r=()=>{let i=Date.now()-n,a=Math.min(i/1e3,1),o=1-(1-a)**3;T(e+t*o),a<1&&requestAnimationFrame(r)};requestAnimationFrame(r)},[L,S]),n.useEffect(()=>{if(!h||!S||e<=z)return;let t=e-z,n=Math.min(30,Math.max(5,Math.floor(t/10))),r=P.current?.offsetWidth||200,i=L/100*r,a=[];for(let e=0;e<n;e++)a.push(c(N.current++,i,R,I.particleSize));D(e=>[...e,...a])},[e,z,h,S,R,I.particleSize,L]),n.useEffect(()=>{if(E.length===0)return;let e=()=>{D(e=>e.map(e=>({...e,x:e.x+e.vx,y:e.y+e.vy,vy:e.vy+.1,vx:e.vx*.99,life:e.life+1})).filter(e=>e.life<e.maxLife)),F.current=requestAnimationFrame(e)};return F.current=requestAnimationFrame(e),()=>{F.current&&cancelAnimationFrame(F.current)}},[E.length>0]),n.useEffect(()=>{p>M.current&&(k(!0),j(!0),v?.(p),setTimeout(()=>k(!1),1e3)),M.current=p},[p,v]),(0,r.jsxs)(`div`,{className:t.cn(`relative`,C),children:[(0,r.jsx)(d,{active:A,color:R,onComplete:()=>j(!1)}),(0,r.jsxs)(`div`,{className:t.cn(`flex items-center`,I.container),children:[g&&(0,r.jsx)(u,{level:p,color:R,size:x,animated:S,isLevelingUp:O}),(0,r.jsxs)(`div`,{className:`relative flex-1`,children:[_&&(0,r.jsxs)(`div`,{className:t.cn(`mb-1 flex items-center justify-between`,I.text),children:[(0,r.jsxs)(`span`,{className:`font-medium text-foreground`,children:[`Level `,p]}),(0,r.jsxs)(`span`,{className:`tabular-nums text-muted-foreground`,children:[(0,r.jsx)(`span`,{className:`font-semibold text-foreground`,children:e.toLocaleString()}),` / `,f.toLocaleString(),` XP`]})]}),(0,r.jsxs)(`div`,{className:`relative`,ref:P,children:[(0,r.jsxs)(`div`,{className:t.cn(`relative w-full overflow-hidden rounded-full bg-muted`,I.height),children:[(0,r.jsx)(`div`,{className:`absolute inset-0 rounded-full blur-md transition-all duration-300`,style:{width:`${w}%`,background:`linear-gradient(90deg, ${s(R,.3)}, ${s(R,.6)})`}}),(0,r.jsxs)(`div`,{className:`relative h-full rounded-full transition-all duration-300`,style:{width:`${w}%`,background:`linear-gradient(90deg, ${R}, ${s(R,.8)})`,boxShadow:S?`0 0 10px ${s(R,.5)}, inset 0 1px 0 ${s(`#ffffff`,.3)}`:void 0},children:[S&&(0,r.jsx)(`div`,{className:`absolute inset-0 overflow-hidden rounded-full`,children:(0,r.jsx)(`div`,{className:`absolute inset-0 -translate-x-full animate-xp-shine`,style:{background:`linear-gradient(90deg, transparent, ${s(`#ffffff`,.4)}, transparent)`}})}),S&&w>0&&w<100&&(0,r.jsx)(`div`,{className:`absolute right-0 top-1/2 h-2 w-2 -translate-y-1/2 translate-x-1/2 animate-pulse rounded-full`,style:{backgroundColor:`#ffffff`,boxShadow:`0 0 8px ${R}, 0 0 16px ${R}`}})]})]}),h&&(0,r.jsx)(l,{particles:E})]}),_&&(0,r.jsxs)(`div`,{className:t.cn(`mt-1 text-right text-muted-foreground`,I.text),children:[(0,r.jsx)(`span`,{className:`tabular-nums`,children:(f-e).toLocaleString()}),` XP to next level`]})]}),b&&(0,r.jsxs)(`div`,{className:`flex flex-col items-center opacity-60 transition-opacity hover:opacity-100`,children:[(0,r.jsx)(`div`,{className:t.cn(`text-muted-foreground`,I.text),children:`Next:`}),b]})]}),(0,r.jsx)(`style`,{children:`
+        @keyframes xp-shine {
+          0% { transform: translateX(-100%); }
+          50%, 100% { transform: translateX(200%); }
+        }
+        .animate-xp-shine {
+          animation: xp-shine 2.5s ease-in-out infinite;
+        }
+
+        @keyframes spin-slow {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        .animate-spin-slow {
+          animation: spin-slow 4s linear infinite;
+        }
+
+        @keyframes level-up-badge {
+          0% { transform: scale(1); }
+          25% { transform: scale(1.3); }
+          50% { transform: scale(1.1); }
+          75% { transform: scale(1.2); }
+          100% { transform: scale(1); }
+        }
+        .animate-level-up-badge {
+          animation: level-up-badge 0.6s ease-out;
+        }
+
+        @keyframes level-up-ring {
+          0% {
+            transform: scale(1);
+            opacity: 1;
+            border-width: 4px;
+          }
+          100% {
+            transform: scale(2);
+            opacity: 0;
+            border-width: 1px;
+          }
+        }
+        .animate-level-up-ring {
+          animation: level-up-ring 0.8s ease-out forwards;
+          border-style: solid;
+        }
+
+        @keyframes level-up-ring-2 {
+          0% {
+            transform: scale(1);
+            opacity: 0.8;
+            border-width: 2px;
+          }
+          100% {
+            transform: scale(2.5);
+            opacity: 0;
+            border-width: 1px;
+          }
+        }
+        .animate-level-up-ring-2 {
+          animation: level-up-ring-2 1s ease-out 0.1s forwards;
+          border-style: solid;
+        }
+
+        @keyframes celebration-burst {
+          0% {
+            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);
+            opacity: 1;
+          }
+          100% {
+            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0);
+            opacity: 0;
+          }
+        }
+        .animate-celebration-burst {
+          animation: celebration-burst 1s ease-out forwards;
+        }
+
+        @keyframes level-up-text {
+          0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
+          20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
+          30% { transform: translate(-50%, -50%) scale(1); }
+          70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+          100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
+        }
+        .animate-level-up-text {
+          animation: level-up-text 2s ease-out forwards;
+        }
+      `})]})}f.displayName=`WakaXPBar`;function p({initialXP:e=0,initialLevel:t=1,xpPerLevel:r=1e3,onLevelChange:i}={}){let[a,o]=n.useState(e),[s,c]=n.useState(t),[l,u]=n.useState(e),d=n.useCallback(e=>typeof r==`function`?r(e):r,[r]),f=d(s);return{currentXP:a,requiredXP:f,level:s,previousXP:l,addXP:n.useCallback(e=>{u(a),o(t=>{let n=t+e,r=s,a=d(r);for(;n>=a;)n-=a,r++,a=d(r);return r!==s&&(c(r),i?.(r,s)),n})},[a,s,d,i]),setXP:n.useCallback(e=>{u(a),o(e)},[a]),setLevel:c,reset:n.useCallback(()=>{u(0),o(e),c(t)},[e,t]),progressPercent:a/f*100}}exports.WakaXPBar=f,exports.useXPBar=p;