@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/typography/index.es.js

@@ -0,0 +1,138 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { cva as n } from "class-variance-authority";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Slot as a } from "@radix-ui/react-slot";
+//#region src/components/typography/index.tsx
+var o = n("", {
+	variants: {
+		variant: {
+			default: "text-foreground",
+			muted: "text-muted-foreground",
+			destructive: "text-destructive",
+			success: "text-green-600 dark:text-green-400",
+			warning: "text-amber-600 dark:text-amber-400",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			xs: "text-xs",
+			sm: "text-sm",
+			base: "text-base",
+			lg: "text-lg",
+			xl: "text-xl"
+		},
+		weight: {
+			normal: "font-normal",
+			medium: "font-medium",
+			semibold: "font-semibold",
+			bold: "font-bold"
+		},
+		align: {
+			left: "text-left",
+			center: "text-center",
+			right: "text-right",
+			justify: "text-justify"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "base",
+		weight: "normal",
+		align: "left"
+	}
+}), s = t.forwardRef(({ className: t, variant: n, size: i, weight: s, align: c, asChild: l = !1, truncate: u = !1, ...d }, f) => /* @__PURE__ */ r(l ? a : "p", {
+	className: e(o({
+		variant: n,
+		size: i,
+		weight: s,
+		align: c
+	}), u && "truncate", t),
+	ref: f,
+	...d
+}));
+s.displayName = "Text";
+var c = n("font-bold tracking-tight", {
+	variants: {
+		level: {
+			h1: "text-4xl lg:text-5xl",
+			h2: "text-3xl lg:text-4xl",
+			h3: "text-2xl lg:text-3xl",
+			h4: "text-xl lg:text-2xl",
+			h5: "text-lg lg:text-xl",
+			h6: "text-base lg:text-lg"
+		},
+		variant: {
+			default: "text-foreground",
+			gradient: "bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent",
+			muted: "text-muted-foreground"
+		}
+	},
+	defaultVariants: {
+		level: "h2",
+		variant: "default"
+	}
+}), l = t.forwardRef(({ className: t, level: n = "h2", variant: i, asChild: o = !1, ...s }, l) => /* @__PURE__ */ r(o ? a : n, {
+	className: e(c({
+		level: n,
+		variant: i
+	}), t),
+	ref: l,
+	...s
+}));
+l.displayName = "Heading";
+var u = n("mt-6 border-l-4 pl-6 italic", {
+	variants: { variant: {
+		default: "border-border text-muted-foreground",
+		primary: "border-primary text-foreground",
+		success: "border-green-500 text-green-900 dark:text-green-100",
+		warning: "border-amber-500 text-amber-900 dark:text-amber-100",
+		destructive: "border-destructive text-destructive"
+	} },
+	defaultVariants: { variant: "default" }
+}), d = t.forwardRef(({ className: t, variant: n, author: a, cite: o, children: s, ...c }, l) => /* @__PURE__ */ i("figure", {
+	className: "my-6",
+	children: [/* @__PURE__ */ r("blockquote", {
+		className: e(u({ variant: n }), t),
+		cite: o,
+		ref: l,
+		...c,
+		children: s
+	}), a && /* @__PURE__ */ i("figcaption", {
+		className: "mt-2 text-sm text-muted-foreground",
+		children: ["— ", a]
+	})]
+}));
+d.displayName = "Blockquote", n("relative rounded font-mono", {
+	variants: {
+		variant: {
+			inline: "bg-muted px-[0.3rem] py-[0.2rem] text-xs sm:text-sm",
+			block: "block bg-muted overflow-x-auto"
+		},
+		size: {
+			sm: "text-xs sm:text-sm",
+			base: "text-sm sm:text-base",
+			lg: "text-base sm:text-lg"
+		}
+	},
+	defaultVariants: {
+		variant: "inline",
+		size: "base"
+	}
+});
+var f = n("inline-flex items-center justify-center rounded border border-border bg-muted px-2 py-1 font-mono text-xs font-medium text-muted-foreground shadow-sm", {
+	variants: { size: {
+		sm: "h-5 min-w-[1.25rem] text-[0.625rem]",
+		default: "h-6 min-w-[1.5rem] text-xs",
+		lg: "h-7 min-w-[1.75rem] text-sm"
+	} },
+	defaultVariants: { size: "default" }
+}), p = t.forwardRef(({ className: t, size: n, ...i }, a) => /* @__PURE__ */ r("kbd", {
+	className: e(f({ size: n }), t),
+	ref: a,
+	...i
+}));
+p.displayName = "Kbd";
+//#endregion
+export { d as Blockquote, l as Heading, p as Kbd, s as Text, u as blockquoteVariants, c as headingVariants, f as kbdVariants, o as textVariants };

package/dist/components/waka-3d-pie-chart/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`react/jsx-runtime`);function i({data:e,size:i=300,depth:a=30,rotation:o=-30,rotateOnHover:s=!0,hoverRotation:c=10,explodeOnClick:l=!0,explodeDistance:u=20,showTooltip:d=!0,showLegend:f=!0,legendPosition:p=`right`,showValues:m=!0,showPercentages:h=!0,innerRadius:g=0,className:_,onSliceClick:v}){let[y,b]=n.useState(null),[x,S]=n.useState(null),[C,w]=n.useState(null),T=n.useRef(null),E=e.reduce((e,t)=>e+t.value,0),D=n.useMemo(()=>{let t=0;return e.map(e=>{let n=e.value/E*100,r=e.value/E*360,i=t,a=t+r;return t=a,{...e,percentage:n,startAngle:i,endAngle:a,midAngle:i+r/2}})},[e,E]),O=[`hsl(var(--chart-1))`,`hsl(var(--chart-2))`,`hsl(var(--chart-3))`,`hsl(var(--chart-4))`,`hsl(var(--chart-5))`,`hsl(var(--primary))`,`hsl(var(--info))`,`hsl(var(--warning))`,`hsl(var(--success))`,`hsl(var(--destructive))`],k=(e,t)=>t.color||O[e%O.length],A=(e,t,n,r=g)=>{let i=(e-90)*Math.PI/180,a=(t-90)*Math.PI/180,o=Math.cos(i)*n,s=Math.sin(i)*n,c=Math.cos(a)*n,l=Math.sin(a)*n,u=+(t-e>180);if(r>0){let e=Math.cos(i)*r,t=Math.sin(i)*r;return`M ${o} ${s} A ${n} ${n} 0 ${u} 1 ${c} ${l} L ${Math.cos(a)*r} ${Math.sin(a)*r} A ${r} ${r} 0 ${u} 0 ${e} ${t} Z`}return`M 0 0 L ${o} ${s} A ${n} ${n} 0 ${u} 1 ${c} ${l} Z`},j=e=>{if(T.current){let t=T.current.getBoundingClientRect();w({x:e.clientX-t.left,y:e.clientY-t.top})}},M=(e,t)=>{l&&S(t=>t===e.id?null:e.id),v?.(e,t)},N=(e,t)=>{if(!t)return{x:0,y:0};let n=(e-90)*Math.PI/180;return{x:Math.cos(n)*u,y:Math.sin(n)*u}},P=i/2-u-10,F=y&&s?o+c:o,I=D.find(e=>e.id===y);return(0,r.jsxs)(`div`,{className:t.cn(`inline-flex gap-6`,p===`bottom`&&`flex-col`,_),children:[(0,r.jsxs)(`div`,{ref:T,className:`relative`,style:{width:i,height:i+a,perspective:`800px`},onMouseMove:j,onMouseLeave:()=>{b(null),w(null)},children:[(0,r.jsxs)(`div`,{className:`absolute inset-0 transition-transform duration-500 ease-out`,style:{transformStyle:`preserve-3d`,transform:`rotateX(60deg) rotateZ(${F}deg)`},children:[Array.from({length:Math.ceil(a/2)}).map((e,t)=>(0,r.jsx)(`svg`,{className:`absolute`,width:i,height:i,viewBox:`${-i/2} ${-i/2} ${i} ${i}`,style:{transform:`translateZ(${-t*2}px)`},"aria-hidden":`true`,focusable:`false`,children:D.map((e,n)=>{let i=x===e.id,o=N(e.midAngle,i),s=k(n,e),c=.7-t/(a/2)*.3;return(0,r.jsx)(`g`,{style:{transform:`translate(${o.x}px, ${o.y}px)`,transition:`transform 0.3s ease-out`},children:(0,r.jsx)(`path`,{d:A(e.startAngle,e.endAngle,P),fill:s,style:{filter:`brightness(${c})`}})},e.id)})},`layer-${t}`)),(0,r.jsxs)(`svg`,{className:`absolute`,width:i,height:i,viewBox:`${-i/2} ${-i/2} ${i} ${i}`,style:{transform:`translateZ(0px)`},"aria-hidden":`true`,focusable:`false`,children:[D.map((e,n)=>{let i=x===e.id,a=y===e.id,o=N(e.midAngle,i),s=k(n,e);return(0,r.jsx)(`g`,{className:`cursor-pointer`,style:{transform:`translate(${o.x}px, ${o.y}px)`,transition:`transform 0.3s ease-out`},onMouseEnter:()=>b(e.id),onClick:()=>M(e,n),children:(0,r.jsx)(`path`,{d:A(e.startAngle,e.endAngle,P),fill:s,stroke:`white`,strokeWidth:`2`,className:t.cn(`transition-all duration-200`,a&&`brightness-110`),style:{filter:a?`brightness(1.15)`:void 0}})},e.id)}),g>0&&(0,r.jsx)(`circle`,{cx:`0`,cy:`0`,r:g,fill:`white`,className:`pointer-events-none`})]})]}),d&&y&&C&&I&&(0,r.jsxs)(`div`,{className:t.cn(`absolute z-20 px-3 py-2 text-sm rounded-lg shadow-lg`,`bg-foreground text-background`,`animate-in fade-in-0 zoom-in-95 duration-100`,`pointer-events-none`),style:{left:C.x,top:C.y-60,transform:`translateX(-50%)`},children:[(0,r.jsx)(`div`,{className:`font-semibold`,children:I.label}),(0,r.jsxs)(`div`,{className:`flex gap-2 text-xs opacity-90`,children:[m&&(0,r.jsx)(`span`,{children:I.value.toLocaleString()}),h&&(0,r.jsxs)(`span`,{children:[`(`,I.percentage.toFixed(1),`%)`]})]}),(0,r.jsx)(`div`,{className:`absolute left-1/2 -translate-x-1/2 -bottom-1 w-2 h-2 rotate-45 bg-foreground`})]})]}),f&&(0,r.jsx)(`div`,{className:t.cn(`flex gap-3`,p===`right`&&`flex-col justify-center`,p===`bottom`&&`flex-wrap justify-center`),children:D.map((e,n)=>{let i=y===e.id,a=x===e.id;return(0,r.jsxs)(`button`,{type:`button`,className:t.cn(`flex items-center gap-2 text-sm transition-all duration-200 rounded px-2 py-1`,`hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary`,i&&`bg-muted`,a&&`ring-2 ring-primary`),onMouseEnter:()=>b(e.id),onMouseLeave:()=>b(null),onClick:()=>M(e,n),children:[(0,r.jsx)(`span`,{className:`w-3 h-3 rounded-sm flex-shrink-0`,style:{backgroundColor:k(n,e)}}),(0,r.jsx)(`span`,{className:`text-muted-foreground whitespace-nowrap`,children:e.label}),m&&(0,r.jsx)(`span`,{className:`font-medium`,children:e.value.toLocaleString()}),h&&(0,r.jsxs)(`span`,{className:`text-muted-foreground text-xs`,children:[`(`,e.percentage.toFixed(1),`%)`]})]},e.id)})})]})}exports.default=i;

package/dist/components/waka-3d-pie-chart/index.d.ts

@@ -44,10 +44,10 @@ export interface Waka3DPieChartProps {
     onSliceClick?: (slice: PieSlice, index: number) => void;
 }
 export declare function use3DPieChart(): {
-    explodedSlice: string;
-    hoveredSlice: string;
-    setExplodedSlice: React.Dispatch<React.SetStateAction<string>>;
-    setHoveredSlice: React.Dispatch<React.SetStateAction<string>>;
+    explodedSlice: string | null;
+    hoveredSlice: string | null;
+    setExplodedSlice: React.Dispatch<React.SetStateAction<string | null>>;
+    setHoveredSlice: React.Dispatch<React.SetStateAction<string | null>>;
     toggleExplode: (sliceId: string) => void;
     reset: () => void;
 };

package/dist/components/waka-3d-pie-chart/index.es.js

@@ -0,0 +1,197 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/waka-3d-pie-chart/index.tsx
+function i({ data: i, size: a = 300, depth: o = 30, rotation: s = -30, rotateOnHover: c = !0, hoverRotation: l = 10, explodeOnClick: u = !0, explodeDistance: d = 20, showTooltip: f = !0, showLegend: p = !0, legendPosition: m = "right", showValues: h = !0, showPercentages: g = !0, innerRadius: _ = 0, className: v, onSliceClick: y }) {
+	let [b, x] = t.useState(null), [S, C] = t.useState(null), [w, T] = t.useState(null), E = t.useRef(null), D = i.reduce((e, t) => e + t.value, 0), O = t.useMemo(() => {
+		let e = 0;
+		return i.map((t) => {
+			let n = t.value / D * 100, r = t.value / D * 360, i = e, a = e + r;
+			return e = a, {
+				...t,
+				percentage: n,
+				startAngle: i,
+				endAngle: a,
+				midAngle: i + r / 2
+			};
+		});
+	}, [i, D]), k = [
+		"hsl(var(--chart-1))",
+		"hsl(var(--chart-2))",
+		"hsl(var(--chart-3))",
+		"hsl(var(--chart-4))",
+		"hsl(var(--chart-5))",
+		"hsl(var(--primary))",
+		"hsl(var(--info))",
+		"hsl(var(--warning))",
+		"hsl(var(--success))",
+		"hsl(var(--destructive))"
+	], A = (e, t) => t.color || k[e % k.length], j = (e, t, n, r = _) => {
+		let i = (e - 90) * Math.PI / 180, a = (t - 90) * Math.PI / 180, o = Math.cos(i) * n, s = Math.sin(i) * n, c = Math.cos(a) * n, l = Math.sin(a) * n, u = +(t - e > 180);
+		if (r > 0) {
+			let e = Math.cos(i) * r, t = Math.sin(i) * r;
+			return `M ${o} ${s} A ${n} ${n} 0 ${u} 1 ${c} ${l} L ${Math.cos(a) * r} ${Math.sin(a) * r} A ${r} ${r} 0 ${u} 0 ${e} ${t} Z`;
+		}
+		return `M 0 0 L ${o} ${s} A ${n} ${n} 0 ${u} 1 ${c} ${l} Z`;
+	}, M = (e) => {
+		if (E.current) {
+			let t = E.current.getBoundingClientRect();
+			T({
+				x: e.clientX - t.left,
+				y: e.clientY - t.top
+			});
+		}
+	}, N = (e, t) => {
+		u && C((t) => t === e.id ? null : e.id), y?.(e, t);
+	}, P = (e, t) => {
+		if (!t) return {
+			x: 0,
+			y: 0
+		};
+		let n = (e - 90) * Math.PI / 180;
+		return {
+			x: Math.cos(n) * d,
+			y: Math.sin(n) * d
+		};
+	}, F = a / 2 - d - 10, I = b && c ? s + l : s, L = O.find((e) => e.id === b);
+	return /* @__PURE__ */ r("div", {
+		className: e("inline-flex gap-6", m === "bottom" && "flex-col", v),
+		children: [/* @__PURE__ */ r("div", {
+			ref: E,
+			className: "relative",
+			style: {
+				width: a,
+				height: a + o,
+				perspective: "800px"
+			},
+			onMouseMove: M,
+			onMouseLeave: () => {
+				x(null), T(null);
+			},
+			children: [/* @__PURE__ */ r("div", {
+				className: "absolute inset-0 transition-transform duration-500 ease-out",
+				style: {
+					transformStyle: "preserve-3d",
+					transform: `rotateX(60deg) rotateZ(${I}deg)`
+				},
+				children: [Array.from({ length: Math.ceil(o / 2) }).map((e, t) => /* @__PURE__ */ n("svg", {
+					className: "absolute",
+					width: a,
+					height: a,
+					viewBox: `${-a / 2} ${-a / 2} ${a} ${a}`,
+					style: { transform: `translateZ(${-t * 2}px)` },
+					"aria-hidden": "true",
+					focusable: "false",
+					children: O.map((e, r) => {
+						let i = S === e.id, a = P(e.midAngle, i), s = A(r, e), c = .7 - t / (o / 2) * .3;
+						return /* @__PURE__ */ n("g", {
+							style: {
+								transform: `translate(${a.x}px, ${a.y}px)`,
+								transition: "transform 0.3s ease-out"
+							},
+							children: /* @__PURE__ */ n("path", {
+								d: j(e.startAngle, e.endAngle, F),
+								fill: s,
+								style: { filter: `brightness(${c})` }
+							})
+						}, e.id);
+					})
+				}, `layer-${t}`)), /* @__PURE__ */ r("svg", {
+					className: "absolute",
+					width: a,
+					height: a,
+					viewBox: `${-a / 2} ${-a / 2} ${a} ${a}`,
+					style: { transform: "translateZ(0px)" },
+					"aria-hidden": "true",
+					focusable: "false",
+					children: [O.map((t, r) => {
+						let i = S === t.id, a = b === t.id, o = P(t.midAngle, i), s = A(r, t);
+						return /* @__PURE__ */ n("g", {
+							className: "cursor-pointer",
+							style: {
+								transform: `translate(${o.x}px, ${o.y}px)`,
+								transition: "transform 0.3s ease-out"
+							},
+							onMouseEnter: () => x(t.id),
+							onClick: () => N(t, r),
+							children: /* @__PURE__ */ n("path", {
+								d: j(t.startAngle, t.endAngle, F),
+								fill: s,
+								stroke: "white",
+								strokeWidth: "2",
+								className: e("transition-all duration-200", a && "brightness-110"),
+								style: { filter: a ? "brightness(1.15)" : void 0 }
+							})
+						}, t.id);
+					}), _ > 0 && /* @__PURE__ */ n("circle", {
+						cx: "0",
+						cy: "0",
+						r: _,
+						fill: "white",
+						className: "pointer-events-none"
+					})]
+				})]
+			}), f && b && w && L && /* @__PURE__ */ r("div", {
+				className: e("absolute z-20 px-3 py-2 text-sm rounded-lg shadow-lg", "bg-foreground text-background", "animate-in fade-in-0 zoom-in-95 duration-100", "pointer-events-none"),
+				style: {
+					left: w.x,
+					top: w.y - 60,
+					transform: "translateX(-50%)"
+				},
+				children: [
+					/* @__PURE__ */ n("div", {
+						className: "font-semibold",
+						children: L.label
+					}),
+					/* @__PURE__ */ r("div", {
+						className: "flex gap-2 text-xs opacity-90",
+						children: [h && /* @__PURE__ */ n("span", { children: L.value.toLocaleString() }), g && /* @__PURE__ */ r("span", { children: [
+							"(",
+							L.percentage.toFixed(1),
+							"%)"
+						] })]
+					}),
+					/* @__PURE__ */ n("div", { className: "absolute left-1/2 -translate-x-1/2 -bottom-1 w-2 h-2 rotate-45 bg-foreground" })
+				]
+			})]
+		}), p && /* @__PURE__ */ n("div", {
+			className: e("flex gap-3", m === "right" && "flex-col justify-center", m === "bottom" && "flex-wrap justify-center"),
+			children: O.map((t, i) => {
+				let a = b === t.id, o = S === t.id;
+				return /* @__PURE__ */ r("button", {
+					type: "button",
+					className: e("flex items-center gap-2 text-sm transition-all duration-200 rounded px-2 py-1", "hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary", a && "bg-muted", o && "ring-2 ring-primary"),
+					onMouseEnter: () => x(t.id),
+					onMouseLeave: () => x(null),
+					onClick: () => N(t, i),
+					children: [
+						/* @__PURE__ */ n("span", {
+							className: "w-3 h-3 rounded-sm flex-shrink-0",
+							style: { backgroundColor: A(i, t) }
+						}),
+						/* @__PURE__ */ n("span", {
+							className: "text-muted-foreground whitespace-nowrap",
+							children: t.label
+						}),
+						h && /* @__PURE__ */ n("span", {
+							className: "font-medium",
+							children: t.value.toLocaleString()
+						}),
+						g && /* @__PURE__ */ r("span", {
+							className: "text-muted-foreground text-xs",
+							children: [
+								"(",
+								t.percentage.toFixed(1),
+								"%)"
+							]
+						})
+					]
+				}, t.id);
+			})
+		})]
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/waka-achievement-unlock/index.cjs.js

@@ -0,0 +1,77 @@
+"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={common:{gradient:`from-slate-400 to-slate-600`,glow:`shadow-slate-400/50`,glowColor:`hsl(var(--muted-foreground))`,borderColor:`border-slate-400`,bgColor:`bg-slate-100 dark:bg-slate-900`,textColor:`text-slate-600 dark:text-slate-400`,particleColors:[`hsl(var(--muted-foreground))`,`hsl(var(--muted))`,`hsl(var(--border))`],label:`Common`},rare:{gradient:`from-blue-400 to-blue-600`,glow:`shadow-blue-400/50`,glowColor:`hsl(var(--info))`,borderColor:`border-blue-400`,bgColor:`bg-blue-100 dark:bg-blue-950`,textColor:`text-blue-600 dark:text-blue-400`,particleColors:[`hsl(var(--info))`,`hsl(var(--chart-1))`,`hsl(var(--primary))`],label:`Rare`},epic:{gradient:`from-purple-400 to-purple-600`,glow:`shadow-purple-400/50`,glowColor:`hsl(var(--chart-2))`,borderColor:`border-purple-400`,bgColor:`bg-purple-100 dark:bg-purple-950`,textColor:`text-purple-600 dark:text-purple-400`,particleColors:[`hsl(var(--chart-2))`,`hsl(var(--chart-3))`,`hsl(var(--primary))`],label:`Epic`},legendary:{gradient:`from-amber-400 via-orange-500 to-red-500`,glow:`shadow-amber-400/50`,glowColor:`hsl(var(--warning))`,borderColor:`border-amber-400`,bgColor:`bg-amber-100 dark:bg-amber-950`,textColor:`text-amber-600 dark:text-amber-400`,particleColors:[`hsl(var(--warning))`,`hsl(var(--chart-4))`,`hsl(var(--destructive))`,`hsl(var(--chart-5))`],label:`Legendary`}};function o({active:e,colors:t,count:n=40}){return e?(0,i.jsxs)(`div`,{className:`pointer-events-none absolute inset-0 overflow-hidden`,children:[[...Array(n)].map((e,r)=>{let a=r/n*360,o=80+Math.random()*60,s=4+Math.random()*6,c=.8+Math.random()*.4;return(0,i.jsx)(`div`,{className:`absolute left-1/2 top-1/2 rounded-full animate-particle`,style:{width:s,height:s,backgroundColor:t[Math.floor(Math.random()*t.length)],"--angle":`${a}deg`,"--distance":`${o}px`,animationDuration:`${c}s`,animationDelay:`${Math.random()*.2}s`}},r)}),(0,i.jsx)(`style`,{children:`
+        @keyframes particle {
+          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-particle {
+          animation: particle 1s ease-out forwards;
+        }
+      `})]}):null}function s({active:e,color:t}){return e?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:`absolute inset-0 rounded-full animate-glow-pulse`,style:{background:`radial-gradient(circle, ${t}40 0%, transparent 70%)`}}),(0,i.jsx)(`div`,{className:`absolute inset-0 rounded-full animate-glow-ring`,style:{boxShadow:`0 0 60px 20px ${t}60`}}),(0,i.jsx)(`style`,{children:`
+        @keyframes glow-pulse {
+          0%, 100% { transform: scale(1); opacity: 0.8; }
+          50% { transform: scale(1.2); opacity: 1; }
+        }
+        @keyframes glow-ring {
+          0% { transform: scale(0.8); opacity: 0; }
+          50% { transform: scale(1.1); opacity: 1; }
+          100% { transform: scale(1.3); opacity: 0; }
+        }
+        .animate-glow-pulse {
+          animation: glow-pulse 2s ease-in-out infinite;
+        }
+        .animate-glow-ring {
+          animation: glow-ring 1.5s ease-out infinite;
+        }
+      `})]}):null}function c({active:e}){return e?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:`absolute inset-0 overflow-hidden rounded-full`,children:(0,i.jsx)(`div`,{className:`absolute inset-0 animate-shine`})}),(0,i.jsx)(`style`,{children:`
+        @keyframes shine {
+          0% {
+            transform: translateX(-100%) rotate(45deg);
+          }
+          50%, 100% {
+            transform: translateX(100%) rotate(45deg);
+          }
+        }
+        .animate-shine {
+          background: linear-gradient(
+            90deg,
+            transparent 0%,
+            rgba(255, 255, 255, 0.4) 50%,
+            transparent 100%
+          );
+          animation: shine 2s ease-in-out infinite;
+        }
+      `})]}):null}function l({rarity:e}){let t={common:r.Shield,rare:r.Award,epic:r.Gem,legendary:r.Crown}[e];return(0,i.jsx)(t,{className:`h-full w-full`})}function u({achievement:e,isUnlocked:u=!1,audioSrc:d,enableSound:f=!0,onAnimationComplete:p,onClose:m,autoHideDelay:h=5e3,size:g=`default`,className:_}){let[v,y]=n.useState(!1),[b,x]=n.useState(`idle`),S=n.useRef(null),C=e.rarity||`common`,w=a[C],T={sm:{container:`w-64 p-4`,badge:`h-16 w-16`,iconSize:`h-8 w-8`,title:`text-lg`,description:`text-xs`},default:{container:`w-80 p-6`,badge:`h-24 w-24`,iconSize:`h-12 w-12`,title:`text-xl`,description:`text-sm`},lg:{container:`w-96 p-8`,badge:`h-32 w-32`,iconSize:`h-16 w-16`,title:`text-2xl`,description:`text-base`}}[g];return n.useEffect(()=>{u&&b===`idle`&&(y(!0),x(`reveal`),f&&d&&(S.current=new Audio(d),S.current.play().catch(()=>{})),setTimeout(()=>x(`particles`),300),setTimeout(()=>{x(`complete`),p?.()},1500),h>0&&setTimeout(()=>{y(!1),m?.()},h))},[u,b,f,d,h,p,m]),n.useEffect(()=>{u||(x(`idle`),y(!1))},[u]),v?(0,i.jsxs)(`div`,{className:`fixed inset-0 z-50 flex items-center justify-center`,children:[(0,i.jsx)(`div`,{className:`absolute inset-0 bg-black/60 backdrop-blur-sm animate-fadeIn`,onClick:()=>{y(!1),m?.()}}),(0,i.jsxs)(`div`,{className:t.cn(`relative flex flex-col items-center rounded-2xl border bg-card text-card-foreground shadow-2xl`,`animate-bounceIn`,T.container,_),children:[(0,i.jsx)(`div`,{className:`mb-4 text-center`,children:(0,i.jsx)(`div`,{className:`text-xs font-semibold uppercase tracking-widest text-muted-foreground animate-slideDown`,children:`Achievement Unlocked!`})}),(0,i.jsxs)(`div`,{className:`relative mb-4`,children:[(0,i.jsx)(s,{active:b!==`idle`,color:w.glowColor}),(0,i.jsx)(o,{active:b===`particles`||b===`complete`,colors:w.particleColors}),(0,i.jsxs)(`div`,{className:t.cn(`relative flex items-center justify-center rounded-full border-4 bg-gradient-to-br`,`transition-all duration-500`,w.gradient,w.borderColor,T.badge,b===`idle`&&`scale-0 opacity-0`,b===`reveal`&&`scale-110 opacity-100`,b!==`idle`&&`scale-100 opacity-100`),children:[(0,i.jsx)(c,{active:b===`complete`}),(0,i.jsx)(`div`,{className:t.cn(`text-white`,T.iconSize),children:e.icon||(0,i.jsx)(l,{rarity:C})})]})]}),(0,i.jsx)(`div`,{className:t.cn(`mb-2 rounded-full px-3 py-1 text-xs font-bold uppercase tracking-wider`,w.bgColor,w.textColor),children:w.label}),(0,i.jsx)(`h3`,{className:t.cn(`mb-1 font-bold text-center`,T.title,b!==`idle`&&`animate-slideUp`),children:e.title}),(0,i.jsx)(`p`,{className:t.cn(`text-center text-muted-foreground`,T.description,b!==`idle`&&`animate-slideUp`),style:{animationDelay:`0.1s`},children:e.description}),e.xpReward&&(0,i.jsxs)(`div`,{className:t.cn(`mt-4 flex items-center gap-2 rounded-full bg-gradient-to-r from-yellow-400 to-orange-500 px-4 py-2 text-white shadow-lg`,b!==`idle`&&`animate-slideUp`),style:{animationDelay:`0.2s`},children:[(0,i.jsx)(r.Zap,{className:`h-4 w-4`}),(0,i.jsxs)(`span`,{className:`font-bold`,children:[`+`,e.xpReward,` XP`]})]}),(0,i.jsx)(`style`,{children:`
+          @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          @keyframes bounceIn {
+            0% { transform: scale(0.5); opacity: 0; }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); opacity: 1; }
+          }
+          @keyframes slideDown {
+            from { transform: translateY(-20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+          }
+          @keyframes slideUp {
+            from { transform: translateY(20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+          }
+          .animate-fadeIn { animation: fadeIn 0.3s ease-out; }
+          .animate-bounceIn { animation: bounceIn 0.5s ease-out; }
+          .animate-slideDown { animation: slideDown 0.5s ease-out; }
+          .animate-slideUp { animation: slideUp 0.5s ease-out backwards; }
+        `})]})]}):null}function d({achievement:e,locked:o=!1,progress:s,size:u=`default`,onClick:d,className:f}){let[p,m]=n.useState(!1),h=e.rarity||`common`,g=a[h],_={sm:{badge:`h-12 w-12`,iconSize:`h-6 w-6`},default:{badge:`h-16 w-16`,iconSize:`h-8 w-8`},lg:{badge:`h-24 w-24`,iconSize:`h-12 w-12`}}[u];return(0,i.jsxs)(`div`,{className:t.cn(`group relative cursor-pointer`,d&&`cursor-pointer`,f),onClick:d,onMouseEnter:()=>m(!0),onMouseLeave:()=>m(!1),children:[(0,i.jsxs)(`div`,{className:t.cn(`relative flex items-center justify-center rounded-full border-2 transition-all duration-300`,o?`bg-muted border-muted-foreground/30`:t.cn(`bg-gradient-to-br`,g.gradient,g.borderColor),_.badge,!o&&p&&`scale-110 shadow-lg`,!o&&g.glow),style:!o&&p?{boxShadow:`0 0 20px 4px ${g.glowColor}40`}:{},children:[o&&(0,i.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center rounded-full bg-black/40`,children:(0,i.jsx)(r.Target,{className:`h-6 w-6 text-white/60`})}),!o&&(0,i.jsx)(`div`,{className:t.cn(`text-white`,_.iconSize),children:e.icon||(0,i.jsx)(l,{rarity:h})}),o&&s!==void 0&&s>0&&(0,i.jsxs)(`svg`,{className:`absolute inset-0`,viewBox:`0 0 100 100`,children:[(0,i.jsx)(`circle`,{cx:`50`,cy:`50`,r:`46`,fill:`none`,stroke:`currentColor`,strokeWidth:`4`,className:`text-muted-foreground/20`}),(0,i.jsx)(`circle`,{cx:`50`,cy:`50`,r:`46`,fill:`none`,stroke:g.glowColor,strokeWidth:`4`,strokeLinecap:`round`,strokeDasharray:`${s*2.89} 289`,transform:`rotate(-90 50 50)`,className:`transition-all duration-500`})]}),!o&&(0,i.jsx)(c,{active:p})]}),p&&(0,i.jsxs)(`div`,{className:`absolute left-1/2 top-full z-10 mt-2 -translate-x-1/2 whitespace-nowrap rounded-lg bg-popover px-3 py-2 text-sm shadow-lg border animate-fadeIn`,children:[(0,i.jsx)(`div`,{className:`font-semibold`,children:e.title}),o&&s!==void 0&&(0,i.jsxs)(`div`,{className:`text-xs text-muted-foreground`,children:[Math.round(s),`% complete`]}),(0,i.jsx)(`style`,{children:`
+            @keyframes fadeIn {
+              from { opacity: 0; transform: translate(-50%, 10px); }
+              to { opacity: 1; transform: translate(-50%, 0); }
+            }
+            .animate-fadeIn { animation: fadeIn 0.2s ease-out; }
+          `})]})]})}function f({achievements:e,columns:n=4,size:r=`default`,onAchievementClick:a,className:o}){return(0,i.jsx)(`div`,{className:t.cn(`grid gap-4`,{3:`grid-cols-3`,4:`grid-cols-4`,5:`grid-cols-5`,6:`grid-cols-6`}[n],o),children:e.map(e=>(0,i.jsxs)(`div`,{className:`flex flex-col items-center gap-2`,children:[(0,i.jsx)(d,{achievement:e,locked:e.locked,progress:e.progress,size:r,onClick:()=>a?.(e)}),(0,i.jsx)(`span`,{className:`text-xs text-center text-muted-foreground truncate max-w-full`,children:e.title})]},e.id))})}function p({achievements:e,unlockedIds:t=[],onUnlock:r}){let[i,a]=n.useState(new Set(t)),[o,s]=n.useState(null),[c,l]=n.useState([]),u=n.useCallback(t=>{if(i.has(t))return;let n=e.find(e=>e.id===t);n&&(a(e=>new Set([...e,t])),l(e=>[...e,{...n,unlockedAt:new Date}]),r?.(n))},[e,i,r]);return n.useEffect(()=>{!o&&c.length>0&&(s(c[0]),l(e=>e.slice(1)))},[o,c]),{unlocked:i,currentUnlock:o,unlock:u,dismissCurrentUnlock:n.useCallback(()=>{s(null)},[]),isUnlocked:n.useCallback(e=>i.has(e),[i]),getProgress:n.useCallback(e=>i.has(e)?100:0,[i]),unlockedCount:i.size,totalCount:e.length,completionPercentage:i.size/e.length*100}}exports.WakaAchievementBadge=d,exports.WakaAchievementGrid=f,exports.WakaAchievementUnlock=u,exports.useAchievements=p;

package/dist/components/waka-achievement-unlock/index.d.ts

@@ -52,7 +52,7 @@ export interface WakaAchievementBadgeProps {
     /** Custom className */
     className?: string;
 }
-export declare function WakaAchievementUnlock({ achievement, isUnlocked, audioSrc, enableSound, onAnimationComplete, onClose, autoHideDelay, size, className, }: WakaAchievementUnlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaAchievementUnlock({ achievement, isUnlocked, audioSrc, enableSound, onAnimationComplete, onClose, autoHideDelay, size, className, }: WakaAchievementUnlockProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function WakaAchievementBadge({ achievement, locked, progress, size, onClick, className, }: WakaAchievementBadgeProps): import("react/jsx-runtime").JSX.Element;
 export interface WakaAchievementGridProps {
     achievements: (AchievementData & {
@@ -72,7 +72,7 @@ export interface UseAchievementsOptions {
 }
 export declare function useAchievements({ achievements, unlockedIds, onUnlock }: UseAchievementsOptions): {
     unlocked: Set<string>;
-    currentUnlock: AchievementData;
+    currentUnlock: AchievementData | null;
     unlock: (achievementId: string) => void;
     dismissCurrentUnlock: () => void;
     isUnlocked: (achievementId: string) => boolean;