@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-tour-guide/index.es.js

@@ -0,0 +1,390 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { ChevronLeft as n, ChevronRight as r, Circle 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-tour-guide/index.tsx
+function l(e, n = {}) {
+	let { initialStep: r = 0, autoStart: i = !1, storageKey: a, onComplete: o } = n, [s, c] = t.useState(i), [l, u] = t.useState(r), [d, f] = t.useState(!1);
+	t.useEffect(() => {
+		if (a && typeof window < "u") {
+			let e = localStorage.getItem(a) === "true";
+			f(e), i && !e && c(!0);
+		}
+	}, [a, i]);
+	let p = t.useCallback(() => {
+		u(0), c(!0);
+	}, []), m = t.useCallback(() => {
+		c(!1);
+	}, []), h = t.useCallback(() => {
+		l < e.length - 1 && u((e) => e + 1);
+	}, [l, e.length]), g = t.useCallback(() => {
+		l > 0 && u((e) => e - 1);
+	}, [l]), _ = t.useCallback((t) => {
+		t >= 0 && t < e.length && u(t);
+	}, [e.length]), v = t.useCallback(() => {
+		c(!1);
+	}, []), y = t.useCallback(() => {
+		c(!1), f(!0), a && typeof window < "u" && localStorage.setItem(a, "true"), o?.();
+	}, [a, o]), b = t.useCallback(() => {
+		u(0), f(!1), a && typeof window < "u" && localStorage.removeItem(a);
+	}, [a]), x = t.useCallback((e) => {
+		c(e);
+	}, []), S = t.useCallback((e) => {
+		u(e);
+	}, []);
+	return {
+		isOpen: s,
+		currentStep: l,
+		totalSteps: e.length,
+		start: p,
+		stop: m,
+		next: h,
+		previous: g,
+		goToStep: _,
+		skip: v,
+		complete: y,
+		reset: b,
+		hasCompleted: d,
+		tourProps: {
+			isOpen: s,
+			onOpenChange: x,
+			currentStep: l,
+			onStepChange: S,
+			onComplete: y,
+			onSkip: v
+		}
+	};
+}
+function u(e) {
+	return typeof e == "string" ? document.querySelector(e) : e.current;
+}
+function d(e, t, n, r) {
+	let i = window.innerWidth, a = window.innerHeight, o = window.scrollY, s = window.scrollX, c = n, l = 0, u = 0;
+	if (n === "auto") {
+		let t = e.top, n = a - e.bottom, r = e.left, o = i - e.right;
+		c = [
+			{
+				placement: "bottom",
+				space: n
+			},
+			{
+				placement: "top",
+				space: t
+			},
+			{
+				placement: "right",
+				space: o
+			},
+			{
+				placement: "left",
+				space: r
+			}
+		].sort((e, t) => t.space - e.space)[0].placement;
+	}
+	switch (c) {
+		case "top":
+			l = e.top + o - t.height - r - 12, u = e.left + s + e.width / 2 - t.width / 2;
+			break;
+		case "bottom":
+			l = e.bottom + o + r + 12, u = e.left + s + e.width / 2 - t.width / 2;
+			break;
+		case "left":
+			l = e.top + o + e.height / 2 - t.height / 2, u = e.left + s - t.width - r - 12;
+			break;
+		case "right":
+			l = e.top + o + e.height / 2 - t.height / 2, u = e.right + s + r + 12;
+			break;
+	}
+	return u = Math.max(16, Math.min(u, i - t.width - 16)), l = Math.max(o + 16, Math.min(l, o + a - t.height - 16)), {
+		top: l,
+		left: u,
+		actualPlacement: c
+	};
+}
+function f({ targetRect: t, padding: n, color: r, opacity: i, pulseAnimation: a }) {
+	if (!t) return /* @__PURE__ */ s("div", {
+		className: "fixed inset-0 z-[9998] pointer-events-auto",
+		style: {
+			backgroundColor: r,
+			opacity: i
+		}
+	});
+	let l = window.scrollY, u = window.scrollX, d = {
+		top: t.top + l - n,
+		left: t.left + u - n,
+		width: t.width + n * 2,
+		height: t.height + n * 2
+	};
+	return /* @__PURE__ */ c(o, { children: [
+		/* @__PURE__ */ s("div", {
+			className: "fixed inset-0 z-[9998] pointer-events-auto transition-all duration-300",
+			style: {
+				backgroundColor: r,
+				opacity: i,
+				clipPath: `polygon(
+            0% 0%,
+            0% 100%,
+            ${d.left}px 100%,
+            ${d.left}px ${d.top}px,
+            ${d.left + d.width}px ${d.top}px,
+            ${d.left + d.width}px ${d.top + d.height}px,
+            ${d.left}px ${d.top + d.height}px,
+            ${d.left}px 100%,
+            100% 100%,
+            100% 0%
+          )`
+			}
+		}),
+		/* @__PURE__ */ s("div", {
+			className: e("absolute z-[9999] rounded-lg border-2 border-primary pointer-events-none transition-all duration-300", a && "animate-tour-pulse"),
+			style: {
+				top: d.top,
+				left: d.left,
+				width: d.width,
+				height: d.height,
+				boxShadow: "0 0 0 4px rgba(var(--primary), 0.2), 0 0 20px rgba(var(--primary), 0.3)"
+			}
+		}),
+		/* @__PURE__ */ s("style", { children: "\n        @keyframes tour-pulse {\n          0%, 100% {\n            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 0 20px rgba(59, 130, 246, 0.3);\n          }\n          50% {\n            box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1), 0 0 30px rgba(59, 130, 246, 0.4);\n          }\n        }\n        .animate-tour-pulse {\n          animation: tour-pulse 2s ease-in-out infinite;\n        }\n      " })
+	] });
+}
+var p = t.forwardRef(({ step: t, stepIndex: o, totalSteps: l, position: u, placement: d, onNext: f, onPrevious: p, onSkip: m, onClose: h, showSkip: g, showProgress: _, showStepCounter: v, isFirstStep: y, isLastStep: b, labels: x, className: S }, C) => /* @__PURE__ */ c("div", {
+	ref: C,
+	className: e("absolute z-[10000] w-80 max-w-[calc(100vw-32px)]", "bg-popover text-popover-foreground rounded-xl shadow-2xl border", "animate-in fade-in-0 zoom-in-95 duration-200", S),
+	style: {
+		top: u.top,
+		left: u.left
+	},
+	role: "dialog",
+	"aria-modal": "true",
+	"aria-labelledby": `tour-step-${t.id}-title`,
+	"aria-describedby": `tour-step-${t.id}-content`,
+	children: [
+		/* @__PURE__ */ s("div", { className: e("absolute w-0 h-0 border-8", {
+			top: "bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-popover",
+			bottom: "top-0 left-1/2 -translate-x-1/2 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-popover",
+			left: "right-0 top-1/2 -translate-y-1/2 translate-x-full border-t-transparent border-b-transparent border-r-transparent border-l-popover",
+			right: "left-0 top-1/2 -translate-y-1/2 -translate-x-full border-t-transparent border-b-transparent border-l-transparent border-r-popover",
+			auto: "hidden"
+		}[d]) }),
+		/* @__PURE__ */ c("div", {
+			className: "flex items-start justify-between gap-2 p-4 pb-2",
+			children: [/* @__PURE__ */ s("h3", {
+				id: `tour-step-${t.id}-title`,
+				className: "font-semibold text-base leading-tight",
+				children: t.title
+			}), /* @__PURE__ */ s("button", {
+				onClick: h,
+				className: "shrink-0 rounded-md p-1 hover:bg-muted transition-colors -mt-1 -mr-1",
+				"aria-label": "Close tour",
+				children: /* @__PURE__ */ s(a, { className: "h-4 w-4 text-muted-foreground" })
+			})]
+		}),
+		/* @__PURE__ */ s("div", {
+			id: `tour-step-${t.id}-content`,
+			className: "px-4 pb-4 text-sm text-muted-foreground",
+			children: t.content
+		}),
+		_ && l > 1 && /* @__PURE__ */ s("div", {
+			className: "flex items-center justify-center gap-1.5 px-4 pb-3",
+			children: Array.from({ length: l }).map((t, n) => /* @__PURE__ */ s(i, { className: e("h-2 w-2 transition-colors", n === o ? "fill-primary text-primary" : n < o ? "fill-primary/50 text-primary/50" : "fill-muted text-muted") }, n))
+		}),
+		/* @__PURE__ */ c("div", {
+			className: "flex items-center justify-between gap-2 p-4 pt-2 border-t bg-muted/30 rounded-b-xl",
+			children: [/* @__PURE__ */ c("div", {
+				className: "flex items-center gap-2",
+				children: [g && !b && /* @__PURE__ */ s("button", {
+					onClick: m,
+					className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
+					children: x.skip
+				}), v && /* @__PURE__ */ c("span", {
+					className: "text-xs text-muted-foreground",
+					children: [
+						o + 1,
+						" / ",
+						l
+					]
+				})]
+			}), /* @__PURE__ */ c("div", {
+				className: "flex items-center gap-2",
+				children: [!y && /* @__PURE__ */ c("button", {
+					onClick: p,
+					className: e("flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-lg", "border hover:bg-muted transition-colors"),
+					children: [/* @__PURE__ */ s(n, { className: "h-4 w-4" }), x.previous]
+				}), t.action ? /* @__PURE__ */ s("button", {
+					onClick: t.action.onClick,
+					className: e("flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-lg", "bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"),
+					children: t.action.label
+				}) : /* @__PURE__ */ c("button", {
+					onClick: f,
+					className: e("flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-lg", "bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"),
+					children: [b ? x.finish : x.next, !b && /* @__PURE__ */ s(r, { className: "h-4 w-4" })]
+				})]
+			})]
+		})
+	]
+}));
+p.displayName = "TourTooltip";
+function m({ steps: e, isOpen: n, onOpenChange: r, variant: i = "modal", currentStep: a, onStepChange: o, onComplete: l, onSkip: m, showSkip: h = !0, showProgress: g = !0, showStepCounter: _ = !1, keyboardNavigation: v = !0, scrollBehavior: y = "smooth", scrollOffset: b = 100, overlayColor: x = "rgba(0, 0, 0, 0.75)", overlayOpacity: S = 1, pulseAnimation: C = !0, tooltipClassName: w, labels: T = {} }) {
+	let E = i === "modal", [D, O] = t.useState(0), [k, A] = t.useState(null), [j, M] = t.useState({
+		top: 0,
+		left: 0
+	}), [N, P] = t.useState("bottom"), F = t.useRef(null), I = a ?? D, L = e[I], R = I === 0, z = I === e.length - 1, B = {
+		next: T.next ?? "Next",
+		previous: T.previous ?? "Back",
+		skip: T.skip ?? "Skip",
+		finish: T.finish ?? "Done"
+	}, V = t.useCallback(() => {
+		if (!n || !L) return;
+		let e = u(L.target);
+		if (!e) {
+			A(null);
+			return;
+		}
+		let t = e.getBoundingClientRect();
+		A(t), requestAnimationFrame(() => {
+			if (F.current) {
+				let e = F.current.getBoundingClientRect(), n = L.spotlightPadding ?? 8, { top: r, left: i, actualPlacement: a } = d(t, e, L.placement ?? "auto", n);
+				M({
+					top: r,
+					left: i
+				}), P(a);
+			}
+		});
+	}, [n, L]), H = t.useCallback(async () => {
+		if (!L) return;
+		let e = u(L.target);
+		if (!e) return;
+		let t = e.getBoundingClientRect();
+		t.top >= b && t.bottom <= window.innerHeight - b || (e.scrollIntoView({
+			behavior: y,
+			block: "center"
+		}), await new Promise((e) => setTimeout(e, 300)));
+	}, [
+		L,
+		y,
+		b
+	]), U = t.useCallback(() => {
+		let t = (a ?? D) + 1;
+		if (t >= e.length) l?.(), r(!1);
+		else {
+			let n = e[a ?? D];
+			n?.beforeLeave && n.beforeLeave(), e[t]?.beforeEnter && e[t].beforeEnter(), o ? o(t) : O(t);
+		}
+	}, [
+		a,
+		D,
+		e,
+		l,
+		r,
+		o
+	]), W = t.useCallback(() => {
+		let t = (a ?? D) - 1;
+		if (t < 0) return;
+		let n = e[a ?? D];
+		n?.beforeLeave && n.beforeLeave(), e[t]?.beforeEnter && e[t].beforeEnter(), o ? o(t) : O(t);
+	}, [
+		a,
+		D,
+		e,
+		o
+	]), G = t.useCallback(() => {
+		m?.(), r(!1);
+	}, [m, r]), K = t.useCallback(() => {
+		r(!1);
+	}, [r]);
+	if (t.useEffect(() => {
+		n && (async () => {
+			L?.beforeEnter && await L.beforeEnter(), await H(), V();
+		})();
+	}, [n]), t.useEffect(() => {
+		n && (async () => {
+			await H(), requestAnimationFrame(() => {
+				V();
+			});
+		})();
+	}, [I]), t.useEffect(() => {
+		if (!n) return;
+		let e = () => {
+			V();
+		};
+		return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+		};
+	}, [n, V]), t.useEffect(() => {
+		if (!n || !v) return;
+		let e = (e) => {
+			switch (e.key) {
+				case "ArrowRight":
+				case "Enter":
+					e.preventDefault(), U();
+					break;
+				case "ArrowLeft":
+					e.preventDefault(), W();
+					break;
+				case "Escape":
+					e.preventDefault(), K();
+					break;
+			}
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		n,
+		v,
+		U,
+		W,
+		K
+	]), t.useEffect(() => {
+		if (n && E) {
+			let e = document.body.style.overflow;
+			return document.body.style.overflow = "hidden", () => {
+				document.body.style.overflow = e;
+			};
+		}
+	}, [n, E]), !n || !L) return null;
+	let q = L.spotlightPadding ?? 8;
+	return /* @__PURE__ */ c("div", {
+		className: "tour-guide-container",
+		children: [
+			E && /* @__PURE__ */ s(f, {
+				targetRect: k,
+				padding: q,
+				color: x,
+				opacity: S,
+				pulseAnimation: C
+			}),
+			E && L.disableInteraction && k && /* @__PURE__ */ s("div", {
+				className: "fixed z-[9999] pointer-events-auto",
+				style: {
+					top: k.top + window.scrollY - q,
+					left: k.left + window.scrollX - q,
+					width: k.width + q * 2,
+					height: k.height + q * 2
+				}
+			}),
+			/* @__PURE__ */ s(p, {
+				ref: F,
+				step: L,
+				stepIndex: I,
+				totalSteps: e.length,
+				position: j,
+				placement: N,
+				onNext: U,
+				onPrevious: W,
+				onSkip: G,
+				onClose: K,
+				showSkip: h,
+				showProgress: g,
+				showStepCounter: _,
+				isFirstStep: R,
+				isLastStep: z,
+				labels: B,
+				className: w
+			})
+		]
+	});
+}
+//#endregion
+export { m as default, l as useTourGuide };

package/dist/components/waka-tournament-bracket/index.cjs.js

@@ -0,0 +1,20 @@
+"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:{matchWidth:160,matchHeight:56,verticalGap:16,horizontalGap:40,nameSize:`text-xs`,scoreSize:`text-xs`,avatarSize:`h-5 w-5`},default:{matchWidth:200,matchHeight:64,verticalGap:24,horizontalGap:60,nameSize:`text-sm`,scoreSize:`text-sm`,avatarSize:`h-6 w-6`},lg:{matchWidth:240,matchHeight:80,verticalGap:32,horizontalGap:80,nameSize:`text-base`,scoreSize:`text-base`,avatarSize:`h-8 w-8`}};function o(e,t,n,r){let i=a[r],o=i.matchHeight,s=i.verticalGap,c=e*(i.matchWidth+i.horizontalGap),l=2**(n-e-1);l*(o+s)-s;let u=(2**(n-1)*(o+s)-s)/l;return{x:c,y:t*u+(u-o)/2}}function s(e,t){let n=t-e;return n===1?`Finals`:n===2?`Semi Finals`:n===3?`Quarter Finals`:`Round of ${2**n}`}function c(e){return e.split(` `).map(e=>e[0]).join(``).toUpperCase().slice(0,2)}function l({participant:e,size:n,isWinner:o,className:s}){let l=a[n];return(0,i.jsxs)(`div`,{className:t.cn(`relative flex items-center justify-center rounded-full bg-muted text-muted-foreground font-semibold overflow-hidden`,l.avatarSize,o&&`ring-2 ring-yellow-400`,s),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-[10px]`,children:c(e.name)}),o&&(0,i.jsx)(`div`,{className:`absolute -bottom-0.5 -right-0.5 flex h-3 w-3 items-center justify-center rounded-full bg-yellow-400 text-yellow-900`,children:(0,i.jsx)(r.Crown,{className:`h-2 w-2`})})]})}function u({match:e,size:o,showTime:s,animated:c,onClick:u,onHover:d,selected:f}){let p=a[o],[m,h]=n.useState(!c);n.useEffect(()=>{if(c&&e.status===`completed`){let e=setTimeout(()=>h(!0),500);return()=>clearTimeout(e)}else h(!0)},[c,e.status]);let g=e.status===`in_progress`,_=e.status===`completed`,v=e.status===`bye`,y=_&&e.winnerId===e.participant1?.id,b=_&&e.winnerId===e.participant2?.id,x=(e,n,r,a)=>e?(0,i.jsxs)(`div`,{className:t.cn(`flex items-center justify-between px-2 py-1.5 transition-all duration-300`,a?`rounded-t-lg border-b`:`rounded-b-lg`,r&&m&&`bg-green-50 dark:bg-green-950/30`,!r&&_&&m&&`bg-muted/50 opacity-60`,g&&`bg-primary/5`,`border-border`),children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 min-w-0`,children:[(0,i.jsx)(l,{participant:e,size:o,isWinner:r&&m}),(0,i.jsx)(`div`,{className:`min-w-0 flex-1`,children:(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[e.seed&&(0,i.jsxs)(`span`,{className:`text-[10px] text-muted-foreground font-mono`,children:[`[`,e.seed,`]`]}),(0,i.jsx)(`span`,{className:t.cn(`truncate font-medium`,p.nameSize,r&&m&&`text-green-700 dark:text-green-400`),children:e.name})]})})]}),(0,i.jsx)(`div`,{className:t.cn(`flex-shrink-0 font-mono font-bold tabular-nums`,p.scoreSize,r&&m?`text-green-600 dark:text-green-400`:`text-muted-foreground`),children:m&&n!==void 0?n:`-`})]}):(0,i.jsx)(`div`,{className:t.cn(`flex items-center justify-between px-2 py-1.5`,a?`rounded-t-lg border-b`:`rounded-b-lg`,`bg-muted/50 border-border`),children:(0,i.jsx)(`span`,{className:t.cn(`text-muted-foreground italic`,p.nameSize),children:v?`BYE`:`TBD`})});return(0,i.jsxs)(`div`,{onClick:u,onMouseEnter:()=>d?.(!0),onMouseLeave:()=>d?.(!1),className:t.cn(`relative rounded-lg border bg-card shadow-sm transition-all duration-200`,u&&`cursor-pointer hover:shadow-md hover:border-primary/50`,f&&`ring-2 ring-primary`,g&&`border-primary shadow-lg shadow-primary/20`,c&&_&&!m&&`animate-pulse`),style:{width:p.matchWidth,minHeight:p.matchHeight},children:[g&&(0,i.jsxs)(`div`,{className:`absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center`,children:[(0,i.jsx)(`span`,{className:`absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75`}),(0,i.jsx)(`span`,{className:`relative inline-flex h-2 w-2 rounded-full bg-primary`})]}),(0,i.jsxs)(`div`,{className:`divide-y divide-border`,children:[x(e.participant1,e.score1,y,!0),x(e.participant2,e.score2,b,!1)]}),s&&e.scheduledAt&&(0,i.jsxs)(`div`,{className:`absolute -bottom-5 left-0 right-0 flex items-center justify-center gap-1 text-[10px] text-muted-foreground`,children:[(0,i.jsx)(r.Clock,{className:`h-3 w-3`}),(0,i.jsx)(`span`,{children:e.scheduledAt.toLocaleTimeString(`en-US`,{hour:`numeric`,minute:`2-digit`})})]})]})}function d({from:e,to:n,matchWidth:r,matchHeight:a,isWinnerPath:o,animated:s}){let c=e.x+r,l=e.y+a/2,u=n.x,d=n.y+a/2;return(0,i.jsx)(`path`,{d:`
+    M ${c} ${l}
+    H ${(c+u)/2}
+    V ${d}
+    H ${u}
+  `,fill:`none`,stroke:o?`hsl(var(--primary))`:`hsl(var(--border))`,strokeWidth:o?2.5:2,strokeLinecap:`round`,strokeLinejoin:`round`,className:t.cn(`transition-all duration-500`,s&&o&&`animate-draw-line`)})}function f({match:e,position:a,onClose:o}){let s=n.useRef(null);return n.useEffect(()=>{let e=e=>{s.current&&!s.current.contains(e.target)&&o()};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[o]),(0,i.jsx)(`div`,{ref:s,className:`absolute z-50 w-64 rounded-lg border bg-popover p-4 shadow-lg animate-in fade-in-0 zoom-in-95`,style:{left:a.x+220,top:a.y},children:(0,i.jsxs)(`div`,{className:`space-y-3`,children:[(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsxs)(`span`,{className:`text-sm font-semibold flex items-center gap-2`,children:[(0,i.jsx)(r.Swords,{className:`h-4 w-4`}),`Match Details`]}),(0,i.jsx)(`span`,{className:t.cn(`text-xs px-2 py-0.5 rounded-full`,e.status===`completed`&&`bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300`,e.status===`in_progress`&&`bg-primary/10 text-primary`,e.status===`pending`&&`bg-muted text-muted-foreground`),children:e.status===`in_progress`?`Live`:e.status.charAt(0).toUpperCase()+e.status.slice(1)})]}),(0,i.jsxs)(`div`,{className:`space-y-2`,children:[(0,i.jsxs)(`div`,{className:t.cn(`flex items-center justify-between p-2 rounded-lg`,e.winnerId===e.participant1?.id&&`bg-green-50 dark:bg-green-950/30`),children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[e.participant1&&(0,i.jsx)(l,{participant:e.participant1,size:`default`,isWinner:e.winnerId===e.participant1.id}),(0,i.jsx)(`span`,{className:`font-medium`,children:e.participant1?.name||`TBD`})]}),(0,i.jsx)(`span`,{className:`text-lg font-bold tabular-nums`,children:e.score1??`-`})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2 text-muted-foreground`,children:[(0,i.jsx)(`div`,{className:`flex-1 border-t`}),(0,i.jsx)(`span`,{className:`text-xs font-semibold`,children:`VS`}),(0,i.jsx)(`div`,{className:`flex-1 border-t`})]}),(0,i.jsxs)(`div`,{className:t.cn(`flex items-center justify-between p-2 rounded-lg`,e.winnerId===e.participant2?.id&&`bg-green-50 dark:bg-green-950/30`),children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[e.participant2&&(0,i.jsx)(l,{participant:e.participant2,size:`default`,isWinner:e.winnerId===e.participant2.id}),(0,i.jsx)(`span`,{className:`font-medium`,children:e.participant2?.name||`TBD`})]}),(0,i.jsx)(`span`,{className:`text-lg font-bold tabular-nums`,children:e.score2??`-`})]})]}),e.scheduledAt&&(0,i.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-muted-foreground pt-2 border-t`,children:[(0,i.jsx)(r.Clock,{className:`h-4 w-4`}),(0,i.jsx)(`span`,{children:e.scheduledAt.toLocaleDateString(`en-US`,{weekday:`short`,month:`short`,day:`numeric`,hour:`numeric`,minute:`2-digit`})})]})]})})}function p({winner:e,size:a,animated:o}){let[s,l]=n.useState(!o);return n.useEffect(()=>{if(o){let e=setTimeout(()=>l(!0),800);return()=>clearTimeout(e)}},[o]),s?(0,i.jsxs)(`div`,{className:t.cn(`flex flex-col items-center justify-center p-6 rounded-xl`,`bg-gradient-to-br from-yellow-50 via-amber-50 to-orange-50`,`dark:from-yellow-950/30 dark:via-amber-950/30 dark:to-orange-950/30`,`border-2 border-yellow-400/50`,o&&`animate-in zoom-in-50 duration-500`),style:{boxShadow:`0 0 40px rgba(251, 191, 36, 0.3)`},children:[(0,i.jsxs)(`div`,{className:`relative mb-3`,children:[(0,i.jsx)(r.Trophy,{className:t.cn(`h-12 w-12 text-yellow-500`,o&&`animate-bounce`)}),o&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.Star,{className:`absolute -top-1 -left-2 h-4 w-4 text-yellow-400 animate-pulse`}),(0,i.jsx)(r.Star,{className:`absolute -top-2 right-0 h-3 w-3 text-amber-400 animate-pulse delay-150`}),(0,i.jsx)(r.Star,{className:`absolute top-0 -right-3 h-4 w-4 text-orange-400 animate-pulse delay-300`})]})]}),(0,i.jsx)(`span`,{className:`text-xs uppercase tracking-wider text-yellow-600 dark:text-yellow-400 font-semibold mb-2`,children:`Champion`}),(0,i.jsxs)(`div`,{className:`relative mb-2`,children:[(0,i.jsx)(`div`,{className:t.cn(`rounded-full p-1 bg-gradient-to-br from-yellow-300 via-amber-400 to-orange-400`),children:(0,i.jsx)(`div`,{className:`h-16 w-16 rounded-full overflow-hidden bg-muted`,children:e.avatar?(0,i.jsx)(`img`,{src:e.avatar,alt:e.name,className:`h-full w-full object-cover`}):(0,i.jsx)(`div`,{className:`h-full w-full flex items-center justify-center text-lg font-bold text-muted-foreground`,children:c(e.name)})})}),(0,i.jsx)(`div`,{className:`absolute -bottom-1 left-1/2 -translate-x-1/2 flex h-6 w-6 items-center justify-center rounded-full bg-gradient-to-br from-yellow-400 to-amber-500 shadow-lg`,children:(0,i.jsx)(r.Crown,{className:`h-3.5 w-3.5 text-white`})})]}),(0,i.jsx)(`span`,{className:`text-lg font-bold text-center`,children:e.name}),e.seed&&(0,i.jsxs)(`span`,{className:`text-xs text-muted-foreground`,children:[`Seed #`,e.seed]})]}):null}function m({zoom:e,onZoomIn:t,onZoomOut:n,onReset:a,minZoom:o,maxZoom:s}){return(0,i.jsxs)(`div`,{className:`absolute top-4 right-4 flex items-center gap-1 rounded-lg border bg-background/95 p-1 shadow-sm backdrop-blur-sm z-10`,children:[(0,i.jsx)(`button`,{onClick:n,disabled:e<=o,className:`p-1.5 rounded hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed`,title:`Zoom out`,children:(0,i.jsx)(r.ZoomOut,{className:`h-4 w-4`})}),(0,i.jsxs)(`span`,{className:`min-w-[3rem] text-center text-xs font-mono`,children:[Math.round(e*100),`%`]}),(0,i.jsx)(`button`,{onClick:t,disabled:e>=s,className:`p-1.5 rounded hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed`,title:`Zoom in`,children:(0,i.jsx)(r.ZoomIn,{className:`h-4 w-4`})}),(0,i.jsx)(`div`,{className:`w-px h-4 bg-border mx-1`}),(0,i.jsx)(`button`,{onClick:a,className:`p-1.5 rounded hover:bg-muted`,title:`Reset view`,children:(0,i.jsx)(r.Maximize2,{className:`h-4 w-4`})})]})}function h({title:e,type:c=`single_elimination`,rounds:l,losersRounds:h,grandFinal:g,onMatchClick:_,onMatchHover:v,enableZoomPan:y=!0,initialZoom:b=1,showTimes:x=!1,size:S=`default`,animated:C=!0,className:w}){let T=n.useRef(null),[E,D]=n.useState(b),[O,k]=n.useState({x:0,y:0}),[A,j]=n.useState(!1),[M,N]=n.useState({x:0,y:0}),[P,F]=n.useState(null),[ee,I]=n.useState(null),L=a[S],R=l.length,z=.5,B=R*(L.matchWidth+L.horizontalGap)+200,V=2**(R-1)*(L.matchHeight+L.verticalGap)-L.verticalGap+100,H=l[R-1]?.matches[0],U=H?.status===`completed`?H.winnerId===H.participant1?.id?H.participant1:H.participant2:void 0,W=n.useMemo(()=>{if(!U)return new Set;let e=new Set,t=U.id;for(let n=R-1;n>=0;n--){let r=(l[n]?.matches||[]).find(e=>e.winnerId===t&&(e.participant1?.id===t||e.participant2?.id===t));if(r&&(e.add(r.id),n>0&&!(l[n-1]?.matches||[]).find(e=>e.winnerId===t&&(e.participant1?.id===t||e.participant2?.id===t))))break}return e},[U,l,R]),G=e=>{e.button!==0||!y||(j(!0),N({x:e.clientX-O.x,y:e.clientY-O.y}))},K=e=>{A&&k({x:e.clientX-M.x,y:e.clientY-M.y})},q=()=>{j(!1)},J=e=>{if(!y)return;e.preventDefault();let t=e.deltaY>0?-.1:.1;D(e=>Math.min(2,Math.max(z,e+t)))},Y=()=>D(e=>Math.min(2,e+.1)),X=()=>D(e=>Math.max(z,e-.1)),Z=()=>{D(1),k({x:0,y:0})},Q=(e,t)=>{F({match:e,position:t}),_?.(e)},$=[];for(let e=0;e<R-1;e++){let t=l[e]?.matches||[],n=l[e+1]?.matches||[];t.forEach((t,r)=>{let a=Math.floor(r/2),s=n[a];if(!s)return;let c=o(e,r,R,S),l=o(e+1,a,R,S),u=W.has(t.id)&&W.has(s.id);$.push((0,i.jsx)(d,{from:c,to:l,matchWidth:L.matchWidth,matchHeight:L.matchHeight,isWinnerPath:u,animated:C},`line-${e}-${r}`))})}return(0,i.jsxs)(`div`,{className:t.cn(`relative w-full overflow-hidden rounded-xl border bg-background`,w),children:[e&&(0,i.jsxs)(`div`,{className:`flex items-center gap-2 border-b bg-muted/30 px-4 py-3`,children:[(0,i.jsx)(r.Trophy,{className:`h-5 w-5 text-primary`}),(0,i.jsx)(`h2`,{className:`font-semibold`,children:e}),(0,i.jsxs)(`div`,{className:`ml-auto flex items-center gap-2 text-sm text-muted-foreground`,children:[(0,i.jsx)(r.Users,{className:`h-4 w-4`}),(0,i.jsxs)(`span`,{children:[2**R,` participants`]})]})]}),y&&(0,i.jsx)(m,{zoom:E,onZoomIn:Y,onZoomOut:X,onReset:Z,minZoom:z,maxZoom:2}),(0,i.jsx)(`div`,{ref:T,className:t.cn(`relative min-h-[400px] cursor-grab`,A&&`cursor-grabbing`),onMouseDown:G,onMouseMove:K,onMouseUp:q,onMouseLeave:q,onWheel:J,children:(0,i.jsxs)(`div`,{className:`relative transition-transform duration-100`,style:{transform:`translate(${O.x}px, ${O.y}px) scale(${E})`,transformOrigin:`top left`,width:B,height:V,padding:40},children:[(0,i.jsx)(`div`,{className:`absolute top-0 left-0 right-0 flex`,children:l.map((e,t)=>(0,i.jsx)(`div`,{className:`text-center text-sm font-medium text-muted-foreground`,style:{position:`absolute`,left:t*(L.matchWidth+L.horizontalGap)+40,width:L.matchWidth},children:e.name||s(t,R)},`header-${t}`))}),(0,i.jsx)(`svg`,{className:`absolute inset-0 pointer-events-none`,style:{left:40,top:40},width:B-80,height:V-80,children:$}),(0,i.jsxs)(`div`,{className:`relative`,style:{paddingTop:40},children:[l.map((e,t)=>e.matches.map((e,n)=>{let r=o(t,n,R,S);return(0,i.jsx)(`div`,{className:`absolute`,style:{left:r.x+40,top:r.y+40},children:(0,i.jsx)(u,{match:e,size:S,showTime:x,animated:C,onClick:()=>Q(e,{x:r.x+40,y:r.y+40}),onHover:t=>{I(t?e.id:null),v?.(t?e:null)},selected:P?.match.id===e.id})},e.id)})),U&&(0,i.jsx)(`div`,{className:`absolute`,style:{left:(R-1)*(L.matchWidth+L.horizontalGap)+L.matchWidth+L.horizontalGap+40,top:(V-240)/2},children:(0,i.jsx)(p,{winner:U,size:S,animated:C})})]})]})}),P&&(0,i.jsx)(f,{match:P.match,position:P.position,onClose:()=>F(null)}),(0,i.jsx)(`style`,{children:`
+        @keyframes draw-line {
+          from {
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 1000;
+          }
+          to {
+            stroke-dasharray: 1000;
+            stroke-dashoffset: 0;
+          }
+        }
+        .animate-draw-line {
+          animation: draw-line 1s ease-out forwards;
+        }
+      `})]})}function g({initialRounds:e,type:t=`single_elimination`,participants:r}={}){let i=n.useCallback(e=>{let t=e.length,n=Math.ceil(Math.log2(t)),r=2**n,i=[...e];for(;i.length<r;)i.push(void 0);i.forEach((e,t)=>{e&&(e.seed=t+1)});let a=[],o=[];for(let e=0;e<r/2;e++){let t=i[e],n=i[r-1-e],a=!t||!n;o.push({id:`r0-m${e}`,round:0,position:e,participant1:t,participant2:n,status:a?`bye`:`pending`,winnerId:a?t?.id||n?.id:void 0})}a.push({name:s(0,n),matches:o});for(let e=1;e<n;e++){let t=a[e-1].matches,r=[];for(let n=0;n<t.length/2;n++)r.push({id:`r${e}-m${n}`,round:e,position:n,status:`pending`});a.push({name:s(e,n),matches:r})}return a},[]),[a,o]=n.useState(()=>e||(r?i(r):[])),[c,l]=n.useState([]),u=n.useCallback((e,t)=>{o(n=>{let r=null;for(let i of n){let n=i.matches.find(t=>t.id===e);if(!n)continue;let a={...n,...t};a.status===`completed`&&a.winnerId&&(r={nextRoundIdx:n.round+1,nextMatchIdx:Math.floor(n.position/2),isFirstSlot:n.position%2==0,winner:a.winnerId===n.participant1?.id?n.participant1:n.participant2});break}return n.map((n,i)=>({...n,matches:n.matches.map((n,a)=>n.id===e?{...n,...t}:r&&i===r.nextRoundIdx&&a===r.nextMatchIdx?{...n,[r.isFirstSlot?`participant1`:`participant2`]:r.winner}:n)}))})},[]),d=n.useCallback(e=>{u(e,{status:`in_progress`})},[u]),f=n.useCallback((e,t,n)=>{o(r=>{let i=r.flatMap(e=>e.matches).find(t=>t.id===e);if(!i)return r;let a=t>n?i.participant1?.id:i.participant2?.id;return r.map(r=>({...r,matches:r.matches.map(r=>r.id===e?{...r,score1:t,score2:n,winnerId:a,status:`completed`}:r)}))}),setTimeout(()=>{let r=a.flatMap(e=>e.matches).find(t=>t.id===e);if(!r)return;let i=(t>n?r.participant1?.id:r.participant2?.id)===r.participant1?.id?r.participant1:r.participant2;if(!i)return;let s=r.round+1,c=Math.floor(r.position/2),l=r.position%2==0;o(e=>e.map((e,t)=>t===s?{...e,matches:e.matches.map((e,t)=>t===c?{...e,[l?`participant1`:`participant2`]:i}:e)}:e))},0)},[a]),p=n.useCallback(e=>{e?o(i(e)):r&&o(i(r))},[i,r]),m=n.useMemo(()=>{for(let e of a){let t=e.matches.find(e=>e.status===`in_progress`);if(t)return t}for(let e of a){let t=e.matches.find(e=>e.status===`pending`&&e.participant1&&e.participant2);if(t)return t}return null},[a]),h=n.useMemo(()=>{if(a.length===0)return null;let e=a[a.length-1]?.matches[0];return!e||e.status!==`completed`?null:e.winnerId===e.participant1?.id?e.participant1:e.participant2},[a]),g=n.useMemo(()=>a.flatMap(e=>e.matches),[a]);return{rounds:a,losersRounds:c,setRounds:o,setLosersRounds:l,updateMatch:u,startMatch:d,completeMatch:f,resetBracket:p,currentMatch:m,winner:h,allMatches:g,getMatch:n.useCallback(e=>g.find(t=>t.id===e),[g]),generateBracket:i,type:t}}exports.default=h,exports.useTournamentBracket=g;

package/dist/components/waka-tournament-bracket/index.d.ts

@@ -91,10 +91,10 @@ export declare function useTournamentBracket({ initialRounds, type, participants
     startMatch: (matchId: string) => void;
     completeMatch: (matchId: string, score1: number, score2: number) => void;
     resetBracket: (newParticipants?: Participant[]) => void;
-    currentMatch: Match;
-    winner: Participant;
+    currentMatch: Match | null;
+    winner: Participant | null | undefined;
     allMatches: Match[];
-    getMatch: (matchId: string) => Match;
+    getMatch: (matchId: string) => Match | undefined;
     generateBracket: (participantList: Participant[]) => BracketRound[];
     type: BracketType;
 };