@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-tag-input/index.es.js

@@ -0,0 +1,386 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Check as n, GripVertical as r, Plus as i, X as a } from "lucide-react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/waka-tag-input/index.tsx
+var l = {
+	default: {
+		name: "Default",
+		bgColor: "bg-secondary",
+		textColor: "text-secondary-foreground",
+		borderColor: "border-secondary"
+	},
+	primary: {
+		name: "Primary",
+		bgColor: "bg-primary/10",
+		textColor: "text-primary",
+		borderColor: "border-primary/30"
+	},
+	success: {
+		name: "Success",
+		bgColor: "bg-green-100 dark:bg-green-900/30",
+		textColor: "text-green-700 dark:text-green-400",
+		borderColor: "border-green-200 dark:border-green-800"
+	},
+	warning: {
+		name: "Warning",
+		bgColor: "bg-yellow-100 dark:bg-yellow-900/30",
+		textColor: "text-yellow-700 dark:text-yellow-400",
+		borderColor: "border-yellow-200 dark:border-yellow-800"
+	},
+	danger: {
+		name: "Danger",
+		bgColor: "bg-red-100 dark:bg-red-900/30",
+		textColor: "text-red-700 dark:text-red-400",
+		borderColor: "border-red-200 dark:border-red-800"
+	},
+	info: {
+		name: "Info",
+		bgColor: "bg-blue-100 dark:bg-blue-900/30",
+		textColor: "text-blue-700 dark:text-blue-400",
+		borderColor: "border-blue-200 dark:border-blue-800"
+	}
+};
+function u({ tag: t, category: n, onRemove: i, draggable: o = !1, disabled: u = !1, onDragStart: d, onDragEnd: f, onDragOver: p, onDrop: m, isDragging: h = !1, isDragOver: g = !1 }) {
+	let _ = n || l.default, v = t.color ? {
+		backgroundColor: `${t.color}20`,
+		color: t.color,
+		borderColor: `${t.color}40`
+	} : void 0;
+	return /* @__PURE__ */ c("div", {
+		className: e("group inline-flex items-center gap-1 px-2 py-1 rounded-md text-sm font-medium border", "transition-all duration-200 animate-in fade-in-0 zoom-in-95", !v && _.bgColor, !v && _.textColor, !v && _.borderColor, o && !u && "cursor-grab active:cursor-grabbing", h && "opacity-50 scale-95", g && "ring-2 ring-primary ring-offset-1", u && "opacity-50 cursor-not-allowed"),
+		style: v,
+		draggable: o && !u,
+		onDragStart: d,
+		onDragEnd: f,
+		onDragOver: p,
+		onDrop: m,
+		children: [
+			o && !u && /* @__PURE__ */ s(r, { className: "h-3 w-3 opacity-50 group-hover:opacity-100 transition-opacity" }),
+			/* @__PURE__ */ s("span", {
+				className: "max-w-[150px] truncate",
+				children: t.value
+			}),
+			!u && /* @__PURE__ */ s("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation(), i();
+				},
+				className: e("ml-0.5 p-0.5 rounded-sm hover:bg-black/10 dark:hover:bg-white/10", "opacity-60 hover:opacity-100 transition-opacity", "focus:outline-none focus:ring-1 focus:ring-offset-1"),
+				"aria-label": `Remove ${t.value}`,
+				children: /* @__PURE__ */ s(a, { className: "h-3 w-3" })
+			})
+		]
+	});
+}
+function d({ suggestions: t, query: r, selectedIndex: i, onSelect: a, categories: o, visible: u }) {
+	return !u || t.length === 0 ? null : /* @__PURE__ */ s("div", {
+		className: e("absolute left-0 right-0 top-full mt-1 z-50", "bg-popover border rounded-md shadow-lg", "max-h-60 overflow-y-auto", "animate-in fade-in-0 zoom-in-95"),
+		children: /* @__PURE__ */ s("ul", {
+			className: "py-1",
+			role: "listbox",
+			children: t.map((t, u) => {
+				let d = t.category ? o?.[t.category] || l[t.category] : void 0;
+				return /* @__PURE__ */ c("li", {
+					role: "option",
+					"aria-selected": u === i,
+					className: e("px-3 py-2 cursor-pointer flex items-center gap-2", "hover:bg-accent transition-colors", u === i && "bg-accent"),
+					onClick: () => a(t),
+					children: [
+						d && /* @__PURE__ */ s("span", { className: e("w-2 h-2 rounded-full", d.bgColor.replace("/10", "").replace("/30", "")) }),
+						/* @__PURE__ */ c("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ s("div", {
+								className: "text-sm font-medium truncate",
+								children: f(t.value, r)
+							}), t.description && /* @__PURE__ */ s("div", {
+								className: "text-xs text-muted-foreground truncate",
+								children: t.description
+							})]
+						}),
+						u === i && /* @__PURE__ */ s(n, { className: "h-4 w-4 text-primary flex-shrink-0" })
+					]
+				}, `${t.value}-${u}`);
+			})
+		})
+	});
+}
+function f(e, t) {
+	if (!t) return e;
+	let n = e.toLowerCase(), r = t.toLowerCase(), i = n.indexOf(r);
+	return i === -1 ? e : /* @__PURE__ */ c(o, { children: [
+		e.slice(0, i),
+		/* @__PURE__ */ s("span", {
+			className: "font-semibold text-primary",
+			children: e.slice(i, i + t.length)
+		}),
+		e.slice(i + t.length)
+	] });
+}
+function p({ tags: n, onChange: r, suggestions: a = [], onSuggestionsLoad: o, onTagCreate: f, maxTags: p, allowDuplicates: m = !1, validationPattern: h, validationMessage: g = "Invalid tag format", categories: _ = l, draggable: v = !1, placeholder: y = "Add a tag...", disabled: b = !1, error: x = !1, errorMessage: S, delimiters: C = ["Enter", ","], minLength: w = 1, maxLength: T = 50, className: E, id: D, name: O }) {
+	let [k, A] = t.useState(""), [j, M] = t.useState(a), [N, P] = t.useState(-1), [F, I] = t.useState(!1), [L, R] = t.useState(null), [z, B] = t.useState(null), [V, H] = t.useState(null), [U, W] = t.useState(!1), G = t.useRef(null), K = t.useRef(null), q = t.useMemo(() => {
+		if (!k.trim()) return [];
+		let e = k.toLowerCase();
+		return j.filter((t) => {
+			let r = t.value.toLowerCase().includes(e), i = m || !n.some((e) => e.value.toLowerCase() === t.value.toLowerCase());
+			return r && i;
+		});
+	}, [
+		j,
+		k,
+		n,
+		m
+	]);
+	t.useEffect(() => {
+		if (!o || !k.trim()) {
+			M(a);
+			return;
+		}
+		let e = setTimeout(async () => {
+			W(!0);
+			try {
+				M(await o(k));
+			} catch {
+				M([]);
+			} finally {
+				W(!1);
+			}
+		}, 300);
+		return () => clearTimeout(e);
+	}, [
+		k,
+		o,
+		a
+	]), t.useEffect(() => {
+		P(-1);
+	}, [q]), t.useEffect(() => {
+		let e = (e) => {
+			K.current && !K.current.contains(e.target) && I(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []);
+	let J = () => `tag-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, Y = (e) => e.length < w ? (R(`Tag must be at least ${w} character${w > 1 ? "s" : ""}`), !1) : e.length > T ? (R(`Tag must be at most ${T} characters`), !1) : h && !h.test(e) ? (R(g), !1) : (R(null), !0), X = (e, t) => {
+		let i = e.trim();
+		if (!i) return !1;
+		if (p && n.length >= p) return R(`Maximum ${p} tags allowed`), !1;
+		if (!m && n.some((e) => e.value.toLowerCase() === i.toLowerCase())) return R("Tag already exists"), !1;
+		if (!Y(i)) return !1;
+		let a = {
+			id: J(),
+			value: i,
+			category: t
+		};
+		return r([...n, a]), f?.(i), A(""), I(!1), R(null), !0;
+	}, Z = (e) => {
+		r(n.filter((t) => t.id !== e)), R(null);
+	}, Q = (e) => {
+		e.preventDefault();
+		let t = e.clipboardData.getData("text").split(/[,;\n\t]+/).map((e) => e.trim()).filter(Boolean), i = 0, a = [...n];
+		for (let e of t) {
+			if (p && a.length >= p) break;
+			!m && a.some((t) => t.value.toLowerCase() === e.toLowerCase()) || h && !h.test(e) || e.length < w || e.length > T || (a.push({
+				id: J(),
+				value: e
+			}), i++);
+		}
+		i > 0 && r(a);
+	}, ee = (e) => {
+		let t = e.key;
+		if (F && q.length > 0) {
+			if (t === "ArrowDown") {
+				e.preventDefault(), P((e) => e < q.length - 1 ? e + 1 : 0);
+				return;
+			}
+			if (t === "ArrowUp") {
+				e.preventDefault(), P((e) => e > 0 ? e - 1 : q.length - 1);
+				return;
+			}
+			if (t === "Escape") {
+				e.preventDefault(), I(!1), P(-1);
+				return;
+			}
+		}
+		if (C.includes(t) || t === "," && C.includes(",")) {
+			if (e.preventDefault(), N >= 0 && q[N]) {
+				let e = q[N];
+				X(e.value, e.category);
+			} else k.trim() && X(k);
+			return;
+		}
+		t === "Backspace" && !k && n.length > 0 && Z(n[n.length - 1].id);
+	}, te = (e) => {
+		X(e.value, e.category);
+	}, ne = (e) => (t) => {
+		B(e), t.dataTransfer.effectAllowed = "move";
+	}, re = () => {
+		B(null), H(null);
+	}, ie = (e) => (t) => {
+		t.preventDefault(), z !== null && z !== e && H(e);
+	}, ae = (e) => (t) => {
+		if (t.preventDefault(), z !== null && z !== e) {
+			let t = [...n], [i] = t.splice(z, 1);
+			t.splice(e, 0, i), r(t);
+		}
+		B(null), H(null);
+	}, $ = L || x && S;
+	return /* @__PURE__ */ c("div", {
+		className: e("space-y-1.5", E),
+		ref: K,
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: e("relative flex flex-wrap items-center gap-1.5 p-2 rounded-md border bg-background", "transition-colors duration-200", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", x || L ? "border-destructive focus-within:ring-destructive" : "border-input", b && "opacity-50 cursor-not-allowed bg-muted"),
+				onClick: () => G.current?.focus(),
+				children: [
+					n.map((e, t) => /* @__PURE__ */ s(u, {
+						tag: e,
+						category: e.category ? _[e.category] : void 0,
+						onRemove: () => Z(e.id),
+						draggable: v,
+						disabled: b,
+						onDragStart: ne(t),
+						onDragEnd: re,
+						onDragOver: ie(t),
+						onDrop: ae(t),
+						isDragging: z === t,
+						isDragOver: V === t
+					}, e.id)),
+					(!p || n.length < p) && !b && /* @__PURE__ */ c("div", {
+						className: "flex-1 min-w-[120px] relative",
+						children: [/* @__PURE__ */ s("input", {
+							ref: G,
+							id: D,
+							name: O,
+							type: "text",
+							value: k,
+							onChange: (e) => {
+								A(e.target.value), I(!0), R(null);
+							},
+							onFocus: () => I(!0),
+							onKeyDown: ee,
+							onPaste: Q,
+							placeholder: n.length === 0 ? y : "",
+							disabled: b,
+							className: e("w-full bg-transparent border-none outline-none text-sm", "placeholder:text-muted-foreground"),
+							autoComplete: "off",
+							"aria-autocomplete": "list",
+							"aria-expanded": F,
+							"aria-haspopup": "listbox"
+						}), U && /* @__PURE__ */ s("div", {
+							className: "absolute right-2 top-1/2 -translate-y-1/2",
+							children: /* @__PURE__ */ s("div", { className: "h-4 w-4 border-2 border-primary/30 border-t-primary rounded-full animate-spin" })
+						})]
+					}),
+					!b && k.trim() && !F && /* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: () => X(k),
+						className: e("flex items-center gap-1 px-2 py-1 rounded-md text-xs", "bg-primary/10 text-primary hover:bg-primary/20", "transition-colors"),
+						children: [/* @__PURE__ */ s(i, { className: "h-3 w-3" }), "Add"]
+					}),
+					/* @__PURE__ */ s(d, {
+						suggestions: q,
+						query: k,
+						selectedIndex: N,
+						onSelect: te,
+						categories: _,
+						visible: F && !b
+					})
+				]
+			}),
+			$ && /* @__PURE__ */ s("p", {
+				className: "text-sm text-destructive animate-in fade-in-0 slide-in-from-top-1",
+				children: $
+			}),
+			p && /* @__PURE__ */ c("p", {
+				className: e("text-xs text-muted-foreground", n.length >= p && "text-destructive"),
+				children: [
+					n.length,
+					"/",
+					p,
+					" tags"
+				]
+			}),
+			O && /* @__PURE__ */ s("input", {
+				type: "hidden",
+				name: `${O}_values`,
+				value: n.map((e) => e.value).join(",")
+			})
+		]
+	});
+}
+p.displayName = "WakaTagInput";
+function m(e = {}) {
+	let { initialTags: n = [], maxTags: r, allowDuplicates: i = !1, validationPattern: a, onTagsChange: o } = e, [s, c] = t.useState(n), l = () => `tag-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, u = t.useCallback((e) => {
+		c(e), o?.(e);
+	}, [o]);
+	return {
+		tags: s,
+		setTags: u,
+		addTag: t.useCallback((e, t) => {
+			let n = e.trim();
+			if (!n || r && s.length >= r || !i && s.some((e) => e.value.toLowerCase() === n.toLowerCase()) || a && !a.test(n)) return !1;
+			let o = {
+				id: l(),
+				value: n,
+				category: t
+			};
+			return u([...s, o]), !0;
+		}, [
+			s,
+			r,
+			i,
+			a,
+			u
+		]),
+		addTags: t.useCallback((e, t) => {
+			let n = 0, o = [...s];
+			for (let s of e) {
+				let e = s.trim();
+				if (e) {
+					if (r && o.length >= r) break;
+					!i && o.some((t) => t.value.toLowerCase() === e.toLowerCase()) || a && !a.test(e) || (o.push({
+						id: l(),
+						value: e,
+						category: t
+					}), n++);
+				}
+			}
+			return n > 0 && u(o), n;
+		}, [
+			s,
+			r,
+			i,
+			a,
+			u
+		]),
+		removeTag: t.useCallback((e) => {
+			u(s.filter((t) => t.id !== e));
+		}, [s, u]),
+		removeTagByValue: t.useCallback((e) => {
+			u(s.filter((t) => t.value.toLowerCase() !== e.toLowerCase()));
+		}, [s, u]),
+		clearTags: t.useCallback(() => {
+			u([]);
+		}, [u]),
+		hasTag: t.useCallback((e) => s.some((t) => t.value.toLowerCase() === e.toLowerCase()), [s]),
+		getTag: t.useCallback((e) => s.find((t) => t.id === e), [s]),
+		reorderTags: t.useCallback((e, t) => {
+			let n = [...s], [r] = n.splice(e, 1);
+			n.splice(t, 0, r), u(n);
+		}, [s, u]),
+		updateTagCategory: t.useCallback((e, t) => {
+			u(s.map((n) => n.id === e ? {
+				...n,
+				category: t
+			} : n));
+		}, [s, u]),
+		getTagsByCategory: t.useCallback((e) => s.filter((t) => t.category === e), [s]),
+		values: t.useMemo(() => s.map((e) => e.value), [s]),
+		count: s.length,
+		isEmpty: s.length === 0,
+		isFull: r ? s.length >= r : !1
+	};
+}
+//#endregion
+export { d as SuggestionDropdown, u as TagChip, p as default, l as defaultCategories, m as useTagInput };

package/dist/components/waka-team-banner/index.cjs.js

@@ -0,0 +1,112 @@
+"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={primary:`#6366f1`,secondary:`#8b5cf6`,gradientDirection:`to-r`},o={common:{gradient:`from-slate-400 to-slate-500`,glow:`rgba(148, 163, 184, 0.4)`,ring:`ring-slate-400`},rare:{gradient:`from-blue-400 to-blue-600`,glow:`rgba(59, 130, 246, 0.4)`,ring:`ring-blue-400`},epic:{gradient:`from-purple-400 to-purple-600`,glow:`rgba(168, 85, 247, 0.5)`,ring:`ring-purple-400`},legendary:{gradient:`from-amber-400 via-orange-500 to-red-500`,glow:`rgba(245, 158, 11, 0.5)`,ring:`ring-amber-400`}},s={sm:{container:`p-4`,logo:`h-12 w-12`,name:`text-lg`,motto:`text-xs`,stat:`text-sm`,statLabel:`text-xs`,avatar:`h-7 w-7`,avatarOverlap:`-ml-2`,achievement:`h-6 w-6`,button:`text-xs px-3 py-1.5`},md:{container:`p-6`,logo:`h-16 w-16`,name:`text-xl`,motto:`text-sm`,stat:`text-lg`,statLabel:`text-xs`,avatar:`h-9 w-9`,avatarOverlap:`-ml-2.5`,achievement:`h-8 w-8`,button:`text-sm px-4 py-2`},lg:{container:`p-8`,logo:`h-20 w-20`,name:`text-2xl`,motto:`text-base`,stat:`text-xl`,statLabel:`text-sm`,avatar:`h-11 w-11`,avatarOverlap:`-ml-3`,achievement:`h-10 w-10`,button:`text-base px-5 py-2.5`}};function c({initialJoinState:e=`available`,joinDelay:t=1500,onJoinSuccess:r,onJoinError:i}={}){let[a,o]=n.useState(e),[s,c]=n.useState(!1),[l,u]=n.useState(null);return{joinState:a,requestJoin:n.useCallback(async()=>{if(a===`available`){c(!0),u(null),o(`pending`);try{await new Promise(e=>setTimeout(e,t)),o(`joined`),r?.()}catch(e){let t=e instanceof Error?e:Error(`Failed to join team`);u(t),o(`available`),i?.(t)}finally{c(!1)}}},[a,t,r,i]),cancelJoin:n.useCallback(()=>{a===`pending`&&(o(`available`),c(!1))},[a]),leaveTeam:n.useCallback(()=>{a===`joined`&&o(`available`)},[a]),isJoining:s,error:l,reset:n.useCallback(()=>{o(e),c(!1),u(null)},[e])}}function l({src:e,name:n,size:r,theme:a,animated:o}){let c=s[r],l=n.split(` `).map(e=>e[0]).join(``).toUpperCase().slice(0,2);return(0,i.jsxs)(`div`,{className:`relative`,children:[o&&(0,i.jsx)(`div`,{className:`absolute inset-0 rounded-xl blur-md animate-team-logo-pulse`,style:{backgroundColor:`${a.primary}40`}}),(0,i.jsx)(`div`,{className:t.cn(`relative rounded-xl overflow-hidden flex items-center justify-center`,`border-2 shadow-lg transition-transform duration-300`,o&&`hover:scale-105`,c.logo),style:{borderColor:a.primary,background:e?void 0:`linear-gradient(${a.gradientDirection?.replace(`to-`,`to `)||`to right`}, ${a.primary}, ${a.secondary||a.primary})`},children:e?(0,i.jsx)(`img`,{src:e,alt:`${n} logo`,className:`h-full w-full object-cover`}):(0,i.jsx)(`span`,{className:`text-white font-bold text-lg drop-shadow-md`,children:l})})]})}function u({icon:e,value:n,label:r,size:a,theme:o,animated:c,animationDelay:l=0}){let u=s[a];return(0,i.jsxs)(`div`,{className:t.cn(`flex flex-col items-center transition-all duration-300`,c&&`animate-team-stat-enter`),style:c?{animationDelay:`${l}ms`,animationFillMode:`both`}:void 0,children:[(0,i.jsx)(`div`,{className:`p-2 rounded-lg mb-1 transition-colors duration-200`,style:{backgroundColor:`${o.primary}15`},children:(0,i.jsx)(`div`,{style:{color:o.primary},children:e})}),(0,i.jsx)(`span`,{className:t.cn(`font-bold tabular-nums`,u.stat),children:n}),(0,i.jsx)(`span`,{className:t.cn(`text-muted-foreground uppercase tracking-wider`,u.statLabel),children:r})]})}function d({members:e,maxDisplay:n,size:a,theme:o,onMemberClick:c,animated:l}){let u=s[a],d=e.slice(0,n),f=e.length-n,p=e=>e.split(` `).map(e=>e[0]).join(``).toUpperCase().slice(0,2);return(0,i.jsxs)(`div`,{className:`flex items-center`,children:[(0,i.jsx)(`div`,{className:`flex`,children:d.map((e,n)=>(0,i.jsxs)(`div`,{className:t.cn(`relative rounded-full border-2 border-background overflow-hidden`,`flex items-center justify-center bg-muted`,`transition-all duration-200 hover:z-10 hover:scale-110`,n>0&&u.avatarOverlap,c&&`cursor-pointer`,u.avatar,l&&`animate-team-avatar-enter`),style:l?{animationDelay:`${n*50}ms`,animationFillMode:`both`}:void 0,onClick:()=>c?.(e),title:e.name,children:[e.avatar?(0,i.jsx)(`img`,{src:e.avatar,alt:e.name,className:`h-full w-full object-cover`}):(0,i.jsx)(`span`,{className:`text-xs font-medium text-muted-foreground`,children:p(e.name)}),e.isLeader&&(0,i.jsx)(`div`,{className:`absolute -top-1 -right-1 h-4 w-4 rounded-full flex items-center justify-center`,style:{backgroundColor:o.primary},children:(0,i.jsx)(r.Crown,{className:`h-2.5 w-2.5 text-white`})})]},e.id))}),f>0&&(0,i.jsx)(`div`,{className:t.cn(`rounded-full border-2 border-background flex items-center justify-center`,`bg-muted text-muted-foreground font-medium`,u.avatarOverlap,u.avatar,l&&`animate-team-avatar-enter`),style:l?{animationDelay:`${n*50}ms`,animationFillMode:`both`}:void 0,children:(0,i.jsxs)(`span`,{className:`text-xs`,children:[`+`,f]})})]})}function f({achievement:e,size:r,onClick:a,animated:c,animationDelay:l=0}){let[u,d]=n.useState(!1),f=s[r],p=o[e.rarity||`common`];return(0,i.jsxs)(`div`,{className:t.cn(`relative group`,a&&`cursor-pointer`,c&&`animate-team-achievement-enter`),style:c?{animationDelay:`${l}ms`,animationFillMode:`both`}:void 0,onClick:a,onMouseEnter:()=>d(!0),onMouseLeave:()=>d(!1),children:[u&&(0,i.jsx)(`div`,{className:`absolute inset-0 rounded-full blur-md transition-opacity duration-200`,style:{backgroundColor:p.glow}}),(0,i.jsx)(`div`,{className:t.cn(`relative rounded-full flex items-center justify-center`,`bg-gradient-to-br text-white shadow-md`,`transition-transform duration-200`,`ring-2 ring-offset-2 ring-offset-background`,p.gradient,p.ring,u&&`scale-110`,f.achievement),children:(0,i.jsx)(`div`,{className:`h-4 w-4`,children:e.icon})}),u&&(0,i.jsxs)(`div`,{className:t.cn(`absolute left-1/2 top-full z-30 mt-2 -translate-x-1/2`,`whitespace-nowrap rounded-lg bg-popover px-3 py-2 text-sm shadow-lg border`,`animate-team-tooltip-enter`),children:[(0,i.jsx)(`div`,{className:`font-semibold`,children:e.name}),e.description&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground max-w-[180px] whitespace-normal`,children:e.description})]})]})}function p({state:e,size:n,theme:a,onClick:o,animated:c}){let l=s[n],u={available:{label:`Join Team`,icon:(0,i.jsx)(r.UserPlus,{className:`h-4 w-4 mr-1.5`}),bg:a.primary,text:`white`,disabled:!1},pending:{label:`Pending...`,icon:(0,i.jsx)(r.Loader2,{className:`h-4 w-4 mr-1.5 animate-spin`}),bg:`${a.primary}80`,text:`white`,disabled:!0},joined:{label:`Joined`,icon:(0,i.jsx)(r.Check,{className:`h-4 w-4 mr-1.5`}),bg:`#22c55e`,text:`white`,disabled:!0},closed:{label:`Closed`,icon:null,bg:`#6b7280`,text:`white`,disabled:!0}}[e];return(0,i.jsxs)(`button`,{type:`button`,className:t.cn(`inline-flex items-center justify-center font-medium rounded-lg`,`transition-all duration-200`,!u.disabled&&`hover:scale-105 hover:shadow-lg active:scale-95`,u.disabled&&`cursor-not-allowed opacity-80`,c&&`animate-team-button-enter`,l.button),style:{backgroundColor:u.bg,color:u.text,boxShadow:u.disabled?void 0:`0 4px 14px ${a.primary}40`},onClick:o,disabled:u.disabled,children:[u.icon,u.label]})}function m({name:e,motto:n,logo:o,stats:c,members:m=[],maxDisplayMembers:h=5,achievements:g=[],maxDisplayAchievements:_=5,theme:v=a,size:y=`md`,variant:b=`default`,animated:x=!0,joinState:S=`available`,onJoinClick:C,onClick:w,onMemberClick:T,onAchievementClick:E,className:D}){let O=s[y],k={...a,...v},A=g.slice(0,_),j=y===`sm`?`h-4 w-4`:y===`md`?`h-5 w-5`:`h-6 w-6`,M=(c.totalRanks,`#${c.rank}`),N=c.maxMembers?`${c.members}/${c.maxMembers}`:c.members.toString();return b===`compact`?(0,i.jsxs)(`div`,{className:t.cn(`relative flex items-center gap-4 rounded-xl border bg-card overflow-hidden`,`transition-all duration-300`,x&&`animate-team-banner-enter`,w&&`cursor-pointer hover:shadow-lg`,O.container,D),onClick:w,children:[(0,i.jsx)(`div`,{className:`absolute left-0 top-0 bottom-0 w-1`,style:{background:`linear-gradient(to bottom, ${k.primary}, ${k.secondary||k.primary})`}}),(0,i.jsx)(l,{src:o,name:e,size:`sm`,theme:k,animated:x}),(0,i.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,i.jsx)(`h3`,{className:t.cn(`font-bold truncate`,O.name),children:e}),(0,i.jsxs)(`div`,{className:`flex items-center gap-3 text-sm text-muted-foreground`,children:[(0,i.jsxs)(`span`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(r.Trophy,{className:`h-3.5 w-3.5`}),` `,c.wins,` wins`]}),(0,i.jsxs)(`span`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(r.Medal,{className:`h-3.5 w-3.5`}),` `,M]}),(0,i.jsxs)(`span`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(r.Users,{className:`h-3.5 w-3.5`}),` `,N]})]})]}),C&&(0,i.jsx)(p,{state:S,size:`sm`,theme:k,onClick:e=>{e.stopPropagation(),C()},animated:x})]}):b===`expanded`?(0,i.jsxs)(`div`,{className:t.cn(`relative rounded-2xl border bg-card overflow-hidden`,`transition-all duration-300`,x&&`animate-team-banner-enter`,w&&`cursor-pointer hover:shadow-xl`,D),onClick:w,children:[(0,i.jsx)(`div`,{className:`h-24 relative`,style:{background:`linear-gradient(${k.gradientDirection?.replace(`to-`,`to `)||`to right`}, ${k.primary}, ${k.secondary||k.primary})`},children:x&&(0,i.jsx)(`div`,{className:`absolute inset-0 opacity-20`,children:(0,i.jsx)(`div`,{className:`absolute inset-0 animate-team-pattern`,style:{backgroundImage:`url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`}})})}),(0,i.jsxs)(`div`,{className:t.cn(`relative`,O.container),children:[(0,i.jsx)(`div`,{className:`absolute -top-12 left-6`,children:(0,i.jsx)(l,{src:o,name:e,size:y,theme:k,animated:x})}),(0,i.jsxs)(`div`,{className:t.cn(`pt-8`,y===`sm`?`pt-4`:y===`lg`?`pt-12`:`pt-8`),children:[(0,i.jsxs)(`div`,{className:`flex items-start justify-between mb-4`,children:[(0,i.jsxs)(`div`,{className:`ml-20 lg:ml-24`,children:[(0,i.jsx)(`h2`,{className:t.cn(`font-bold`,O.name),children:e}),n&&(0,i.jsxs)(`p`,{className:t.cn(`text-muted-foreground italic`,O.motto),children:[`"`,n,`"`]})]}),C&&(0,i.jsx)(p,{state:S,size:y,theme:k,onClick:e=>{e.stopPropagation(),C()},animated:x})]}),(0,i.jsxs)(`div`,{className:`flex items-center justify-around py-4 border-y my-4`,children:[(0,i.jsx)(u,{icon:(0,i.jsx)(r.Trophy,{className:j}),value:c.wins,label:`Wins`,size:y,theme:k,animated:x,animationDelay:100}),(0,i.jsx)(u,{icon:(0,i.jsx)(r.Medal,{className:j}),value:M,label:`Rank`,size:y,theme:k,animated:x,animationDelay:200}),(0,i.jsx)(u,{icon:(0,i.jsx)(r.Users,{className:j}),value:N,label:`Members`,size:y,theme:k,animated:x,animationDelay:300}),c.winRate!==void 0&&(0,i.jsx)(u,{icon:(0,i.jsx)(r.Target,{className:j}),value:`${c.winRate}%`,label:`Win Rate`,size:y,theme:k,animated:x,animationDelay:400}),c.streak!==void 0&&c.streak>0&&(0,i.jsx)(u,{icon:(0,i.jsx)(r.Zap,{className:j}),value:c.streak,label:`Streak`,size:y,theme:k,animated:x,animationDelay:500})]}),(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[m.length>0&&(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`h4`,{className:`text-xs uppercase tracking-wider text-muted-foreground mb-2`,children:`Members`}),(0,i.jsx)(d,{members:m,maxDisplay:h,size:y,theme:k,onMemberClick:T,animated:x})]}),A.length>0&&(0,i.jsxs)(`div`,{className:m.length===0?``:`ml-auto`,children:[(0,i.jsx)(`h4`,{className:`text-xs uppercase tracking-wider text-muted-foreground mb-2 text-right`,children:`Achievements`}),(0,i.jsx)(`div`,{className:`flex gap-2`,children:A.map((e,t)=>(0,i.jsx)(f,{achievement:e,size:y,onClick:E?()=>E(e):void 0,animated:x,animationDelay:100+t*50},e.id))})]})]})]})]})]}):(0,i.jsxs)(`div`,{className:t.cn(`relative rounded-xl border bg-card overflow-hidden`,`transition-all duration-300`,x&&`animate-team-banner-enter`,w&&`cursor-pointer hover:shadow-lg`,O.container,D),onClick:w,children:[(0,i.jsx)(`div`,{className:`absolute top-0 left-0 right-0 h-1`,style:{background:`linear-gradient(${k.gradientDirection?.replace(`to-`,`to `)||`to right`}, ${k.primary}, ${k.secondary||k.primary})`}}),(0,i.jsxs)(`div`,{className:`flex items-start gap-4`,children:[(0,i.jsx)(l,{src:o,name:e,size:y,theme:k,animated:x}),(0,i.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-4`,children:[(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`h3`,{className:t.cn(`font-bold`,O.name),children:e}),n&&(0,i.jsxs)(`p`,{className:t.cn(`text-muted-foreground italic mt-0.5`,O.motto),children:[`"`,n,`"`]})]}),C&&(0,i.jsx)(p,{state:S,size:y,theme:k,onClick:e=>{e.stopPropagation(),C()},animated:x})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-6 mt-4`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,i.jsx)(r.Trophy,{className:t.cn(`h-4 w-4`),style:{color:k.primary}}),(0,i.jsx)(`span`,{className:t.cn(`font-semibold`,O.stat),children:c.wins}),(0,i.jsx)(`span`,{className:t.cn(`text-muted-foreground`,O.statLabel),children:`wins`})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,i.jsx)(r.Medal,{className:t.cn(`h-4 w-4`),style:{color:k.primary}}),(0,i.jsx)(`span`,{className:t.cn(`font-semibold`,O.stat),children:M}),c.totalRanks&&(0,i.jsxs)(`span`,{className:t.cn(`text-muted-foreground`,O.statLabel),children:[`of `,c.totalRanks]})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,i.jsx)(r.Users,{className:t.cn(`h-4 w-4`),style:{color:k.primary}}),(0,i.jsx)(`span`,{className:t.cn(`font-semibold`,O.stat),children:N})]}),c.points!==void 0&&(0,i.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,i.jsx)(r.Star,{className:t.cn(`h-4 w-4`),style:{color:k.primary}}),(0,i.jsx)(`span`,{className:t.cn(`font-semibold`,O.stat),children:c.points.toLocaleString()}),(0,i.jsx)(`span`,{className:t.cn(`text-muted-foreground`,O.statLabel),children:`pts`})]})]}),(m.length>0||A.length>0)&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between mt-4 pt-4 border-t`,children:[m.length>0&&(0,i.jsx)(d,{members:m,maxDisplay:h,size:y,theme:k,onMemberClick:T,animated:x}),A.length>0&&(0,i.jsx)(`div`,{className:t.cn(`flex gap-1.5`,m.length===0&&`ml-0`),children:A.map((e,t)=>(0,i.jsx)(f,{achievement:e,size:y,onClick:E?()=>E(e):void 0,animated:x,animationDelay:100+t*50},e.id))})]})]})]}),(0,i.jsx)(`style`,{children:`
+        @keyframes team-banner-enter {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .animate-team-banner-enter {
+          animation: team-banner-enter 0.5s ease-out;
+        }
+
+        @keyframes team-logo-pulse {
+          0%, 100% {
+            opacity: 0.4;
+            transform: scale(1);
+          }
+          50% {
+            opacity: 0.7;
+            transform: scale(1.1);
+          }
+        }
+        .animate-team-logo-pulse {
+          animation: team-logo-pulse 2s ease-in-out infinite;
+        }
+
+        @keyframes team-stat-enter {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .animate-team-stat-enter {
+          animation: team-stat-enter 0.4s ease-out;
+        }
+
+        @keyframes team-avatar-enter {
+          from {
+            opacity: 0;
+            transform: scale(0.5);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+        .animate-team-avatar-enter {
+          animation: team-avatar-enter 0.3s ease-out;
+        }
+
+        @keyframes team-achievement-enter {
+          from {
+            opacity: 0;
+            transform: scale(0.5) rotate(-10deg);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1) rotate(0deg);
+          }
+        }
+        .animate-team-achievement-enter {
+          animation: team-achievement-enter 0.4s ease-out;
+        }
+
+        @keyframes team-button-enter {
+          from {
+            opacity: 0;
+            transform: translateX(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+        .animate-team-button-enter {
+          animation: team-button-enter 0.4s ease-out 0.2s;
+          animation-fill-mode: both;
+        }
+
+        @keyframes team-tooltip-enter {
+          from {
+            opacity: 0;
+            transform: translate(-50%, 10px);
+          }
+          to {
+            opacity: 1;
+            transform: translate(-50%, 0);
+          }
+        }
+        .animate-team-tooltip-enter {
+          animation: team-tooltip-enter 0.2s ease-out;
+        }
+
+        @keyframes team-pattern {
+          from {
+            transform: translateX(0);
+          }
+          to {
+            transform: translateX(60px);
+          }
+        }
+        .animate-team-pattern {
+          animation: team-pattern 3s linear infinite;
+        }
+      `})]})}function h(e){return(0,i.jsx)(m,{variant:`compact`,...e})}function g(e){return(0,i.jsx)(m,{variant:`expanded`,...e})}exports.WakaTeamBannerCompact=h,exports.WakaTeamBannerExpanded=g,exports.default=m,exports.useTeamBanner=c;