@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-rank-badge/index.cjs.js

@@ -0,0 +1,49 @@
+"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=[`bronze`,`silver`,`gold`,`platinum`,`diamond`,`master`,`grandmaster`],a={bronze:{label:`Bronze`,colors:{primary:`from-amber-700 to-amber-900`,secondary:`from-amber-600 to-amber-800`,accent:`bg-amber-500`,glow:`shadow-amber-500/50`,text:`text-amber-100`,border:`border-amber-600`},icon:`B`},silver:{label:`Silver`,colors:{primary:`from-slate-300 to-slate-500`,secondary:`from-slate-200 to-slate-400`,accent:`bg-slate-300`,glow:`shadow-slate-400/50`,text:`text-slate-900`,border:`border-slate-400`},icon:`S`},gold:{label:`Gold`,colors:{primary:`from-yellow-400 to-yellow-600`,secondary:`from-yellow-300 to-yellow-500`,accent:`bg-yellow-400`,glow:`shadow-yellow-400/60`,text:`text-yellow-950`,border:`border-yellow-500`},icon:`G`},platinum:{label:`Platinum`,colors:{primary:`from-cyan-300 to-cyan-500`,secondary:`from-cyan-200 to-cyan-400`,accent:`bg-cyan-300`,glow:`shadow-cyan-400/60`,text:`text-cyan-950`,border:`border-cyan-400`},icon:`P`},diamond:{label:`Diamond`,colors:{primary:`from-blue-300 to-purple-400`,secondary:`from-blue-200 to-purple-300`,accent:`bg-blue-300`,glow:`shadow-blue-400/70`,text:`text-blue-950`,border:`border-blue-400`},icon:`D`},master:{label:`Master`,colors:{primary:`from-purple-500 to-pink-500`,secondary:`from-purple-400 to-pink-400`,accent:`bg-purple-400`,glow:`shadow-purple-500/70`,text:`text-white`,border:`border-purple-500`},icon:`M`},grandmaster:{label:`Grandmaster`,colors:{primary:`from-red-500 via-orange-500 to-yellow-500`,secondary:`from-red-400 via-orange-400 to-yellow-400`,accent:`bg-gradient-to-r from-red-400 to-yellow-400`,glow:`shadow-orange-500/80`,text:`text-white`,border:`border-orange-500`},icon:`GM`}},o={sm:{container:`w-12 h-12`,badge:`w-10 h-10`,icon:`text-xs font-bold`,text:`text-[8px]`,division:`text-[6px]`,points:`text-[8px]`,shine:`w-3`},md:{container:`w-16 h-16`,badge:`w-14 h-14`,icon:`text-sm font-bold`,text:`text-[10px]`,division:`text-[8px]`,points:`text-xs`,shine:`w-4`},lg:{container:`w-24 h-24`,badge:`w-20 h-20`,icon:`text-xl font-bold`,text:`text-xs`,division:`text-[10px]`,points:`text-sm`,shine:`w-6`},xl:{container:`w-32 h-32`,badge:`w-28 h-28`,icon:`text-3xl font-bold`,text:`text-sm`,division:`text-xs`,points:`text-base`,shine:`w-8`}},s=`
+@keyframes waka-rank-shine {
+  0% { left: -100%; }
+  50%, 100% { left: 200%; }
+}
+
+@keyframes waka-rank-particle {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: translate(calc(-50% + 20px), calc(-50% - 20px)) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes waka-rank-glow-pulse {
+  0%, 100% {
+    opacity: 0.4;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.1);
+  }
+}
+
+@keyframes waka-rank-badge-pop {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+
+@keyframes waka-rank-promotion-flash {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+`,c=`waka-rank-badge-styles`;function l(){return n.useEffect(()=>{if(typeof document<`u`&&!document.getElementById(c)){let e=document.createElement(`style`);e.id=c,e.textContent=s,document.head.appendChild(e)}},[]),null}function u(e){return{1:`I`,2:`II`,3:`III`,4:`IV`,5:`V`}[e]}function d(e,t){let n=i.indexOf(e);return i.indexOf(t)>n}function f({size:e,animated:n,isHighTier:i}){let a=o[e];return n?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:t.cn(`absolute inset-0 overflow-hidden rounded-full pointer-events-none`),children:(0,r.jsx)(`div`,{className:t.cn(`absolute h-full bg-gradient-to-r from-transparent via-white/40 to-transparent`,a.shine),style:{animation:n?`waka-rank-shine 3s ease-in-out infinite`:`none`}})}),i&&(0,r.jsx)(`div`,{className:`absolute inset-0 overflow-hidden rounded-full pointer-events-none`,children:(0,r.jsx)(`div`,{className:t.cn(`absolute h-full bg-gradient-to-r from-transparent via-white/20 to-transparent`,a.shine),style:{animation:n?`waka-rank-shine 2s ease-in-out infinite 1s`:`none`}})})]}):null}function p({rank:e,animated:n,isPromoting:i}){let o=a[e],s=[`diamond`,`master`,`grandmaster`].includes(e);return(0,r.jsx)(`div`,{className:t.cn(`absolute inset-0 rounded-full`,o.colors.glow,s?`shadow-lg`:`shadow-md`,n&&`animate-pulse`,i&&`animate-[waka-rank-glow-pulse_0.5s_ease-in-out_3]`),style:{filter:s?`blur(8px)`:`blur(4px)`,opacity:n?.6:.4}})}function m({rank:e,animated:n}){let i=[`diamond`,`master`,`grandmaster`].includes(e);return!n||!i?null:(0,r.jsx)(`div`,{className:`absolute inset-0 rounded-full pointer-events-none overflow-hidden`,children:[...[,,,,,,]].map((n,i)=>(0,r.jsx)(`div`,{className:t.cn(`absolute w-1 h-1 rounded-full`,e===`diamond`&&`bg-blue-300`,e===`master`&&`bg-purple-300`,e===`grandmaster`&&`bg-yellow-300`),style:{top:`50%`,left:`50%`,animation:`waka-rank-particle ${2+i*.3}s ease-in-out infinite ${i*.5}s`,transform:`rotate(${i*60}deg)`}},i))})}function h({isPromoting:e}){return e?(0,r.jsx)(`div`,{className:t.cn(`absolute inset-0 rounded-full pointer-events-none`,`bg-gradient-to-t from-white/0 via-white/80 to-white/0`,`animate-[waka-rank-promotion-flash_1s_ease-out]`)}):null}function g({rank:e,size:n}){let i=a[e],s=o[n];return e===`grandmaster`?(0,r.jsx)(`div`,{className:t.cn(`relative`,s.icon,i.colors.text),children:(0,r.jsx)(`span`,{className:`relative z-10`,style:{textShadow:`0 0 10px rgba(255, 200, 0, 0.8)`},children:i.icon})}):(0,r.jsx)(`span`,{className:t.cn(s.icon,i.colors.text),children:i.icon})}function _({rank:e,division:i,points:s,pointsToNext:c,size:_=`md`,showPoints:v=!1,showDivision:y=!0,animated:b=!0,previousRank:x,className:S}){let[C,w]=n.useState(!1),T=a[e],E=o[_],D=[`diamond`,`master`,`grandmaster`].includes(e);n.useEffect(()=>{if(x&&d(x,e)){w(!0);let e=setTimeout(()=>w(!1),1500);return()=>clearTimeout(e)}},[x,e]);let O=s!==void 0&&c!==void 0&&c>0?Math.min(s/c*100,100):0;return(0,r.jsxs)(`div`,{className:t.cn(`relative inline-flex flex-col items-center gap-1`,S),children:[(0,r.jsxs)(`div`,{className:t.cn(`relative flex items-center justify-center`,E.container),children:[(0,r.jsx)(p,{rank:e,animated:b,isPromoting:C}),(0,r.jsxs)(`div`,{className:t.cn(`relative flex items-center justify-center rounded-full`,`bg-gradient-to-br`,T.colors.primary,`border-2`,T.colors.border,E.badge,`transition-all duration-300`,`hover:scale-105 hover:shadow-lg`,b&&`hover:animate-none`,C&&`animate-[waka-rank-badge-pop_0.5s_ease-out]`),children:[(0,r.jsx)(`div`,{className:t.cn(`absolute inset-1 rounded-full`,`bg-gradient-to-br`,T.colors.secondary,`opacity-50`)}),(0,r.jsx)(f,{size:_,animated:b,isHighTier:D}),(0,r.jsx)(m,{rank:e,animated:b}),(0,r.jsx)(`div`,{className:`relative z-10 flex flex-col items-center`,children:(0,r.jsx)(g,{rank:e,size:_})}),(0,r.jsx)(h,{isPromoting:C})]}),v&&c!==void 0&&c>0&&(0,r.jsxs)(`svg`,{className:`absolute inset-0 -rotate-90`,viewBox:`0 0 100 100`,"aria-hidden":`true`,focusable:`false`,children:[(0,r.jsx)(`circle`,{cx:`50`,cy:`50`,r:`46`,fill:`none`,stroke:`currentColor`,strokeWidth:`3`,className:`text-gray-200/30`}),(0,r.jsx)(`circle`,{cx:`50`,cy:`50`,r:`46`,fill:`none`,stroke:`currentColor`,strokeWidth:`3`,strokeLinecap:`round`,strokeDasharray:`${O*2.89} 289`,className:t.cn(T.colors.text,`transition-all duration-500`)})]})]}),(0,r.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,r.jsxs)(`span`,{className:t.cn(`font-semibold uppercase tracking-wider`,E.text),children:[T.label,y&&i&&(0,r.jsx)(`span`,{className:t.cn(`ml-1`,E.division),children:u(i)})]}),v&&s!==void 0&&(0,r.jsxs)(`span`,{className:t.cn(`text-muted-foreground`,E.points),children:[s.toLocaleString(),c!==void 0&&(0,r.jsxs)(`span`,{className:`opacity-60`,children:[` `,`/ `,c.toLocaleString()]})]}),C&&(0,r.jsx)(`span`,{className:t.cn(`text-green-500 font-medium animate-bounce`,E.points),children:`Promoted!`})]}),(0,r.jsx)(l,{})]})}function v({currentRank:e,size:n=`sm`,showAll:a=!1,range:o=2,className:s}){let c=i.indexOf(e),l=a?i:i.filter((e,t)=>Math.abs(t-c)<=o);return(0,r.jsx)(`div`,{className:t.cn(`flex items-center gap-2`,s),children:l.map(i=>(0,r.jsx)(`div`,{className:t.cn(`transition-all duration-300`,i!==e&&`opacity-40 scale-75`),children:(0,r.jsx)(_,{rank:i,size:n,animated:i===e,showDivision:!1})},i))})}function y(e={}){let{initialRank:t=`bronze`,initialDivision:r=5,initialPoints:a=0,pointsPerDivision:o=100,pointsPerRank:s=500}=e,[c,l]=n.useState(t),[u,d]=n.useState(r),[f,p]=n.useState(a),[m,h]=n.useState(void 0);return{rank:c,division:u,points:f,pointsToNext:n.useMemo(()=>u>1?o-f%o:s-f%s,[f,u,o,s]),previousRank:m,addPoints:n.useCallback(e=>{p(t=>{let n=t+e,r=s;if(n>=r&&c!==`grandmaster`){let e=i.indexOf(c);if(e<i.length-1)return h(c),l(i[e+1]),d(5),n-r}return n>=o*(5-u+1)&&u>1&&d(e=>e>1?e-1:e),n})},[c,u,o,s]),setRank:n.useCallback((e,t=5)=>{e!==c&&h(c),l(e),d(t)},[c]),reset:n.useCallback(()=>{l(t),d(r),p(a),h(void 0)},[t,r,a])}}exports.WakaRankBadgeGroup=v,exports.default=_,exports.useRank=y;

package/dist/components/waka-rank-badge/index.es.js

@@ -0,0 +1,394 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/waka-rank-badge/index.tsx
+var a = [
+	"bronze",
+	"silver",
+	"gold",
+	"platinum",
+	"diamond",
+	"master",
+	"grandmaster"
+], o = {
+	bronze: {
+		label: "Bronze",
+		colors: {
+			primary: "from-amber-700 to-amber-900",
+			secondary: "from-amber-600 to-amber-800",
+			accent: "bg-amber-500",
+			glow: "shadow-amber-500/50",
+			text: "text-amber-100",
+			border: "border-amber-600"
+		},
+		icon: "B"
+	},
+	silver: {
+		label: "Silver",
+		colors: {
+			primary: "from-slate-300 to-slate-500",
+			secondary: "from-slate-200 to-slate-400",
+			accent: "bg-slate-300",
+			glow: "shadow-slate-400/50",
+			text: "text-slate-900",
+			border: "border-slate-400"
+		},
+		icon: "S"
+	},
+	gold: {
+		label: "Gold",
+		colors: {
+			primary: "from-yellow-400 to-yellow-600",
+			secondary: "from-yellow-300 to-yellow-500",
+			accent: "bg-yellow-400",
+			glow: "shadow-yellow-400/60",
+			text: "text-yellow-950",
+			border: "border-yellow-500"
+		},
+		icon: "G"
+	},
+	platinum: {
+		label: "Platinum",
+		colors: {
+			primary: "from-cyan-300 to-cyan-500",
+			secondary: "from-cyan-200 to-cyan-400",
+			accent: "bg-cyan-300",
+			glow: "shadow-cyan-400/60",
+			text: "text-cyan-950",
+			border: "border-cyan-400"
+		},
+		icon: "P"
+	},
+	diamond: {
+		label: "Diamond",
+		colors: {
+			primary: "from-blue-300 to-purple-400",
+			secondary: "from-blue-200 to-purple-300",
+			accent: "bg-blue-300",
+			glow: "shadow-blue-400/70",
+			text: "text-blue-950",
+			border: "border-blue-400"
+		},
+		icon: "D"
+	},
+	master: {
+		label: "Master",
+		colors: {
+			primary: "from-purple-500 to-pink-500",
+			secondary: "from-purple-400 to-pink-400",
+			accent: "bg-purple-400",
+			glow: "shadow-purple-500/70",
+			text: "text-white",
+			border: "border-purple-500"
+		},
+		icon: "M"
+	},
+	grandmaster: {
+		label: "Grandmaster",
+		colors: {
+			primary: "from-red-500 via-orange-500 to-yellow-500",
+			secondary: "from-red-400 via-orange-400 to-yellow-400",
+			accent: "bg-gradient-to-r from-red-400 to-yellow-400",
+			glow: "shadow-orange-500/80",
+			text: "text-white",
+			border: "border-orange-500"
+		},
+		icon: "GM"
+	}
+}, s = {
+	sm: {
+		container: "w-12 h-12",
+		badge: "w-10 h-10",
+		icon: "text-xs font-bold",
+		text: "text-[8px]",
+		division: "text-[6px]",
+		points: "text-[8px]",
+		shine: "w-3"
+	},
+	md: {
+		container: "w-16 h-16",
+		badge: "w-14 h-14",
+		icon: "text-sm font-bold",
+		text: "text-[10px]",
+		division: "text-[8px]",
+		points: "text-xs",
+		shine: "w-4"
+	},
+	lg: {
+		container: "w-24 h-24",
+		badge: "w-20 h-20",
+		icon: "text-xl font-bold",
+		text: "text-xs",
+		division: "text-[10px]",
+		points: "text-sm",
+		shine: "w-6"
+	},
+	xl: {
+		container: "w-32 h-32",
+		badge: "w-28 h-28",
+		icon: "text-3xl font-bold",
+		text: "text-sm",
+		division: "text-xs",
+		points: "text-base",
+		shine: "w-8"
+	}
+}, c = "\n@keyframes waka-rank-shine {\n  0% { left: -100%; }\n  50%, 100% { left: 200%; }\n}\n\n@keyframes waka-rank-particle {\n  0%, 100% {\n    transform: translate(-50%, -50%) scale(0);\n    opacity: 0;\n  }\n  50% {\n    transform: translate(calc(-50% + 20px), calc(-50% - 20px)) scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes waka-rank-glow-pulse {\n  0%, 100% {\n    opacity: 0.4;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.8;\n    transform: scale(1.1);\n  }\n}\n\n@keyframes waka-rank-badge-pop {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.2); }\n  100% { transform: scale(1); }\n}\n\n@keyframes waka-rank-promotion-flash {\n  0% {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1.1);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(1);\n  }\n}\n", l = "waka-rank-badge-styles";
+function u() {
+	return t.useEffect(() => {
+		if (typeof document < "u" && !document.getElementById(l)) {
+			let e = document.createElement("style");
+			e.id = l, e.textContent = c, document.head.appendChild(e);
+		}
+	}, []), null;
+}
+function d(e) {
+	return {
+		1: "I",
+		2: "II",
+		3: "III",
+		4: "IV",
+		5: "V"
+	}[e];
+}
+function f(e, t) {
+	let n = a.indexOf(e);
+	return a.indexOf(t) > n;
+}
+function p({ size: t, animated: a, isHighTier: o }) {
+	let c = s[t];
+	return a ? /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("div", {
+		className: e("absolute inset-0 overflow-hidden rounded-full pointer-events-none"),
+		children: /* @__PURE__ */ r("div", {
+			className: e("absolute h-full bg-gradient-to-r from-transparent via-white/40 to-transparent", c.shine),
+			style: { animation: a ? "waka-rank-shine 3s ease-in-out infinite" : "none" }
+		})
+	}), o && /* @__PURE__ */ r("div", {
+		className: "absolute inset-0 overflow-hidden rounded-full pointer-events-none",
+		children: /* @__PURE__ */ r("div", {
+			className: e("absolute h-full bg-gradient-to-r from-transparent via-white/20 to-transparent", c.shine),
+			style: { animation: a ? "waka-rank-shine 2s ease-in-out infinite 1s" : "none" }
+		})
+	})] }) : null;
+}
+function m({ rank: t, animated: n, isPromoting: i }) {
+	let a = o[t], s = [
+		"diamond",
+		"master",
+		"grandmaster"
+	].includes(t);
+	return /* @__PURE__ */ r("div", {
+		className: e("absolute inset-0 rounded-full", a.colors.glow, s ? "shadow-lg" : "shadow-md", n && "animate-pulse", i && "animate-[waka-rank-glow-pulse_0.5s_ease-in-out_3]"),
+		style: {
+			filter: s ? "blur(8px)" : "blur(4px)",
+			opacity: n ? .6 : .4
+		}
+	});
+}
+function h({ rank: t, animated: n }) {
+	let i = [
+		"diamond",
+		"master",
+		"grandmaster"
+	].includes(t);
+	return !n || !i ? null : /* @__PURE__ */ r("div", {
+		className: "absolute inset-0 rounded-full pointer-events-none overflow-hidden",
+		children: [...[
+			,
+			,
+			,
+			,
+			,
+			,
+		]].map((n, i) => /* @__PURE__ */ r("div", {
+			className: e("absolute w-1 h-1 rounded-full", t === "diamond" && "bg-blue-300", t === "master" && "bg-purple-300", t === "grandmaster" && "bg-yellow-300"),
+			style: {
+				top: "50%",
+				left: "50%",
+				animation: `waka-rank-particle ${2 + i * .3}s ease-in-out infinite ${i * .5}s`,
+				transform: `rotate(${i * 60}deg)`
+			}
+		}, i))
+	});
+}
+function g({ isPromoting: t }) {
+	return t ? /* @__PURE__ */ r("div", { className: e("absolute inset-0 rounded-full pointer-events-none", "bg-gradient-to-t from-white/0 via-white/80 to-white/0", "animate-[waka-rank-promotion-flash_1s_ease-out]") }) : null;
+}
+function _({ rank: t, size: n }) {
+	let i = o[t], a = s[n];
+	return t === "grandmaster" ? /* @__PURE__ */ r("div", {
+		className: e("relative", a.icon, i.colors.text),
+		children: /* @__PURE__ */ r("span", {
+			className: "relative z-10",
+			style: { textShadow: "0 0 10px rgba(255, 200, 0, 0.8)" },
+			children: i.icon
+		})
+	}) : /* @__PURE__ */ r("span", {
+		className: e(a.icon, i.colors.text),
+		children: i.icon
+	});
+}
+function v({ rank: n, division: a, points: c, pointsToNext: l, size: v = "md", showPoints: y = !1, showDivision: b = !0, animated: x = !0, previousRank: S, className: C }) {
+	let [w, T] = t.useState(!1), E = o[n], D = s[v], O = [
+		"diamond",
+		"master",
+		"grandmaster"
+	].includes(n);
+	t.useEffect(() => {
+		if (S && f(S, n)) {
+			T(!0);
+			let e = setTimeout(() => T(!1), 1500);
+			return () => clearTimeout(e);
+		}
+	}, [S, n]);
+	let k = c !== void 0 && l !== void 0 && l > 0 ? Math.min(c / l * 100, 100) : 0;
+	return /* @__PURE__ */ i("div", {
+		className: e("relative inline-flex flex-col items-center gap-1", C),
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: e("relative flex items-center justify-center", D.container),
+				children: [
+					/* @__PURE__ */ r(m, {
+						rank: n,
+						animated: x,
+						isPromoting: w
+					}),
+					/* @__PURE__ */ i("div", {
+						className: e("relative flex items-center justify-center rounded-full", "bg-gradient-to-br", E.colors.primary, "border-2", E.colors.border, D.badge, "transition-all duration-300", "hover:scale-105 hover:shadow-lg", x && "hover:animate-none", w && "animate-[waka-rank-badge-pop_0.5s_ease-out]"),
+						children: [
+							/* @__PURE__ */ r("div", { className: e("absolute inset-1 rounded-full", "bg-gradient-to-br", E.colors.secondary, "opacity-50") }),
+							/* @__PURE__ */ r(p, {
+								size: v,
+								animated: x,
+								isHighTier: O
+							}),
+							/* @__PURE__ */ r(h, {
+								rank: n,
+								animated: x
+							}),
+							/* @__PURE__ */ r("div", {
+								className: "relative z-10 flex flex-col items-center",
+								children: /* @__PURE__ */ r(_, {
+									rank: n,
+									size: v
+								})
+							}),
+							/* @__PURE__ */ r(g, { isPromoting: w })
+						]
+					}),
+					y && l !== void 0 && l > 0 && /* @__PURE__ */ i("svg", {
+						className: "absolute inset-0 -rotate-90",
+						viewBox: "0 0 100 100",
+						"aria-hidden": "true",
+						focusable: "false",
+						children: [/* @__PURE__ */ r("circle", {
+							cx: "50",
+							cy: "50",
+							r: "46",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "3",
+							className: "text-gray-200/30"
+						}), /* @__PURE__ */ r("circle", {
+							cx: "50",
+							cy: "50",
+							r: "46",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "3",
+							strokeLinecap: "round",
+							strokeDasharray: `${k * 2.89} 289`,
+							className: e(E.colors.text, "transition-all duration-500")
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex flex-col items-center",
+				children: [
+					/* @__PURE__ */ i("span", {
+						className: e("font-semibold uppercase tracking-wider", D.text),
+						children: [E.label, b && a && /* @__PURE__ */ r("span", {
+							className: e("ml-1", D.division),
+							children: d(a)
+						})]
+					}),
+					y && c !== void 0 && /* @__PURE__ */ i("span", {
+						className: e("text-muted-foreground", D.points),
+						children: [c.toLocaleString(), l !== void 0 && /* @__PURE__ */ i("span", {
+							className: "opacity-60",
+							children: [
+								" ",
+								"/ ",
+								l.toLocaleString()
+							]
+						})]
+					}),
+					w && /* @__PURE__ */ r("span", {
+						className: e("text-green-500 font-medium animate-bounce", D.points),
+						children: "Promoted!"
+					})
+				]
+			}),
+			/* @__PURE__ */ r(u, {})
+		]
+	});
+}
+function y({ currentRank: t, size: n = "sm", showAll: i = !1, range: o = 2, className: s }) {
+	let c = a.indexOf(t), l = i ? a : a.filter((e, t) => Math.abs(t - c) <= o);
+	return /* @__PURE__ */ r("div", {
+		className: e("flex items-center gap-2", s),
+		children: l.map((i) => /* @__PURE__ */ r("div", {
+			className: e("transition-all duration-300", i !== t && "opacity-40 scale-75"),
+			children: /* @__PURE__ */ r(v, {
+				rank: i,
+				size: n,
+				animated: i === t,
+				showDivision: !1
+			})
+		}, i))
+	});
+}
+function b(e = {}) {
+	let { initialRank: n = "bronze", initialDivision: r = 5, initialPoints: i = 0, pointsPerDivision: o = 100, pointsPerRank: s = 500 } = e, [c, l] = t.useState(n), [u, d] = t.useState(r), [f, p] = t.useState(i), [m, h] = t.useState(void 0);
+	return {
+		rank: c,
+		division: u,
+		points: f,
+		pointsToNext: t.useMemo(() => u > 1 ? o - f % o : s - f % s, [
+			f,
+			u,
+			o,
+			s
+		]),
+		previousRank: m,
+		addPoints: t.useCallback((e) => {
+			p((t) => {
+				let n = t + e, r = s;
+				if (n >= r && c !== "grandmaster") {
+					let e = a.indexOf(c);
+					if (e < a.length - 1) return h(c), l(a[e + 1]), d(5), n - r;
+				}
+				return n >= o * (5 - u + 1) && u > 1 && d((e) => e > 1 ? e - 1 : e), n;
+			});
+		}, [
+			c,
+			u,
+			o,
+			s
+		]),
+		setRank: t.useCallback((e, t = 5) => {
+			e !== c && h(c), l(e), d(t);
+		}, [c]),
+		reset: t.useCallback(() => {
+			l(n), d(r), p(i), h(void 0);
+		}, [
+			n,
+			r,
+			i
+		])
+	};
+}
+//#endregion
+export { y as WakaRankBadgeGroup, v as default, b as useRank };

package/dist/components/waka-rating-input/index.cjs.js

@@ -0,0 +1,16 @@
+"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={sm:{icon:`h-4 w-4`,container:`text-xs`,label:`text-xs`},md:{icon:`h-5 w-5`,container:`text-sm`,label:`text-sm`},lg:{icon:`h-6 w-6`,container:`text-base`,label:`text-base`},xl:{icon:`h-8 w-8`,container:`text-lg`,label:`text-lg`}},o={none:`gap-0`,sm:`gap-0.5`,md:`gap-1`,lg:`gap-2`},s=[r.Frown,r.Frown,r.Meh,r.Smile,r.Smile];function c(e,t){switch(e){case`heart`:return r.Heart;case`thumbs`:return r.ThumbsUp;case`emoji`:return s[Math.min(t,s.length-1)];default:return r.Star}}function l({index:e,value:r,hoverValue:o,iconType:s,customIcon:l,customFilledIcon:u,size:d,activeColor:f,inactiveColor:p,hoverColor:m,readOnly:h,disabled:g,allowHalf:_,animated:v,onClick:y,onMouseEnter:b,onMouseLeave:x}){let S=o===null?r:o,C=e+1,w=e+.5,T=S>=C,E=_&&S>=w&&S<C,D=o===null?T||E?f:p:m,O=c(s,e),k=t.cn(a[d].icon,`transition-all duration-150`,v&&(T||E)&&`animate-rating-pop`,!h&&!g&&`cursor-pointer`,g&&`cursor-not-allowed opacity-50`),A=e=>{if(!(h||g))if(_){let t=e.currentTarget.getBoundingClientRect();y(e.clientX-t.left<t.width/2?w:C)}else y(C)},j=e=>{if(!(h||g))if(_){let t=e.currentTarget.getBoundingClientRect();b(e.clientX-t.left<t.width/2?w:C)}else b(C)},M=(e,t=!1)=>l&&u?e?u:l:l?n.cloneElement(l,{className:k,style:{color:e?D:p}}):(0,i.jsx)(O,{className:k,style:{color:D,fill:e?D:`transparent`}});return(0,i.jsx)(`span`,{className:`relative inline-flex`,onClick:A,onMouseMove:j,onMouseLeave:x,role:h?`img`:`button`,tabIndex:h||g?-1:0,"aria-label":`Rate ${C}`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),!h&&!g&&y(C))},children:E?(0,i.jsxs)(`span`,{className:`relative inline-flex`,children:[(0,i.jsx)(`span`,{className:`absolute inset-0`,children:M(!1)}),(0,i.jsx)(`span`,{className:`overflow-hidden`,style:{width:`50%`},children:M(!0,!0)}),(0,i.jsx)(`span`,{className:`invisible`,children:M(!1)})]}):M(T)})}function u({value:e,onChange:s,max:c=5,allowHalf:u=!1,iconType:d=`star`,customIcon:f,customFilledIcon:p,size:m=`md`,activeColor:h=`#f59e0b`,inactiveColor:g=`#d1d5db`,hoverColor:_=`#fbbf24`,readOnly:v=!1,disabled:y=!1,showClear:b=!1,label:x,showValue:S=!1,count:C,countLabel:w=`reviews`,animated:T=!0,gap:E=`sm`,className:D,id:O,name:k,ariaLabel:A}){let[j,M]=n.useState(null),N=t=>{v||y||(e===t?s?.(null):s?.(t))},P=e=>{!v&&!y&&M(e)},F=()=>{M(null)},I=()=>{!v&&!y&&s?.(null)},L=j===null?e:j,R=L==null?`-`:u?L.toFixed(1):L.toString();return(0,i.jsxs)(`div`,{id:O,className:t.cn(`inline-flex flex-col`,a[m].container,y&&`opacity-50`,D),children:[(x||S||C!==void 0)&&(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-2 mb-1`,a[m].label),children:[x&&(0,i.jsx)(`span`,{className:`font-medium text-foreground`,children:x}),S&&(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:R}),C!==void 0&&(0,i.jsxs)(`span`,{className:`text-muted-foreground`,children:[`(`,C.toLocaleString(),` `,w,`)`]})]}),(0,i.jsxs)(`div`,{className:t.cn(`inline-flex items-center`,o[E]),role:`radiogroup`,"aria-label":A||x||`Rating`,onMouseLeave:F,children:[Array.from({length:c},(t,n)=>(0,i.jsx)(l,{index:n,value:e??0,hoverValue:j,max:c,iconType:d,customIcon:f,customFilledIcon:p,size:m,activeColor:h,inactiveColor:g,hoverColor:_,readOnly:v,disabled:y,allowHalf:u,animated:T,onClick:N,onMouseEnter:P,onMouseLeave:F},n)),b&&!v&&!y&&e!=null&&(0,i.jsx)(`button`,{type:`button`,onClick:I,className:t.cn(`ml-1 p-0.5 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted transition-colors`,a[m].icon),"aria-label":`Clear rating`,children:(0,i.jsx)(r.X,{className:a[m].icon})})]}),k&&(0,i.jsx)(`input`,{type:`hidden`,name:k,value:e??``}),(0,i.jsx)(`style`,{children:`
+        @keyframes rating-pop {
+          0% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.2);
+          }
+          100% {
+            transform: scale(1);
+          }
+        }
+        .animate-rating-pop {
+          animation: rating-pop 0.3s ease-out;
+        }
+      `})]})}function d(e={}){let{initialValue:t,max:r=5,allowHalf:i=!1,onRatingChange:a}=e,[o,s]=n.useState(t??null),[c,l]=n.useState(null),u=n.useCallback(e=>{let t=e;t!==null&&(t=Math.max(0,Math.min(r,t)),i||(t=Math.round(t))),s(t),a?.(t)},[r,i,a]);return{value:o,setValue:u,hoverValue:c,setHoverValue:l,clear:n.useCallback(()=>{u(null)},[u]),reset:n.useCallback(()=>{u(t??null)},[t,u]),getRatingProps:n.useCallback(()=>({value:o??void 0,onChange:u}),[o,u])}}function f({value:e,max:t=5,iconType:n=`star`,size:r=`md`,activeColor:a=`#f59e0b`,inactiveColor:o=`#d1d5db`,showValue:s=!0,count:c,countLabel:l=`reviews`,gap:d=`sm`,className:f}){return(0,i.jsx)(u,{value:e,max:t,iconType:n,size:r,activeColor:a,inactiveColor:o,readOnly:!0,showValue:s,count:c,countLabel:l,gap:d,allowHalf:!0,className:f})}exports.WakaRatingDisplay=f,exports.default=u,exports.useRatingInput=d;