@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-checklist/index.es.js

@@ -0,0 +1,543 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Check as n, ChevronDown as r, ChevronRight as i, Gift as a, PartyPopper as o, Sparkles as s, Trophy as c, X as l } from "lucide-react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/waka-checklist/index.tsx
+var p = "waka-checklist-";
+function m(e) {
+	return `${p}${e}`;
+}
+function h(e) {
+	if (typeof window > "u") return null;
+	try {
+		let t = localStorage.getItem(m(e));
+		if (t) {
+			let e = JSON.parse(t);
+			return {
+				...e,
+				expandedTasks: new Set(e.expandedTasks || [])
+			};
+		}
+	} catch {}
+	return null;
+}
+function g(e, t) {
+	if (!(typeof window > "u")) try {
+		localStorage.setItem(m(e), JSON.stringify({
+			...t,
+			expandedTasks: Array.from(t.expandedTasks)
+		}));
+	} catch {}
+}
+function _({ checklistId: e, tasks: n, persistent: r = !0, defaultCollapsed: i = !1, onComplete: a, onTaskChange: o }) {
+	let [s, c] = t.useState(() => {
+		let t = r ? h(e) : null;
+		return {
+			tasks: t?.tasks || {},
+			collapsed: t?.collapsed ?? i,
+			expandedTasks: t?.expandedTasks || /* @__PURE__ */ new Set()
+		};
+	}), l = t.useRef(!1), u = s.tasks, d = Object.values(u).filter((e) => e === "completed").length, f = Object.values(u).filter((e) => e === "skipped").length, p = n.length, _ = n.filter((e) => e.required !== !1), v = _.filter((e) => u[e.id] === "completed").length, y = _.filter((e) => u[e.id] === "skipped").length, b = _.length === 0 || v + y >= _.length, x = p > 0 ? d / p * 100 : 0;
+	t.useEffect(() => {
+		r && g(e, s);
+	}, [
+		e,
+		r,
+		s
+	]), t.useEffect(() => {
+		b && !l.current && d > 0 && a?.(), l.current = b;
+	}, [
+		b,
+		d,
+		a
+	]);
+	let S = t.useCallback((e) => {
+		c((t) => ({
+			...t,
+			tasks: {
+				...t.tasks,
+				[e]: "completed"
+			}
+		})), o?.(e, "completed");
+	}, [o]), C = t.useCallback((e) => {
+		c((t) => ({
+			...t,
+			tasks: {
+				...t.tasks,
+				[e]: "skipped"
+			}
+		})), o?.(e, "skipped");
+	}, [o]), w = t.useCallback((e) => {
+		c((t) => {
+			let n = { ...t.tasks };
+			return delete n[e], {
+				...t,
+				tasks: n
+			};
+		}), o?.(e, "pending");
+	}, [o]), T = t.useCallback((e) => {
+		c((t) => {
+			let n = new Set(t.expandedTasks);
+			return n.has(e) ? n.delete(e) : n.add(e), {
+				...t,
+				expandedTasks: n
+			};
+		});
+	}, []), E = t.useCallback(() => {
+		c((e) => ({
+			...e,
+			collapsed: !e.collapsed
+		}));
+	}, []), D = t.useCallback(() => {
+		c({
+			tasks: {},
+			collapsed: i,
+			expandedTasks: /* @__PURE__ */ new Set()
+		}), r && localStorage.removeItem(m(e));
+	}, [
+		e,
+		i,
+		r
+	]), O = t.useCallback((e) => u[e] || "pending", [u]);
+	return {
+		taskStates: u,
+		isCollapsed: s.collapsed,
+		expandedTasks: s.expandedTasks,
+		completeTask: S,
+		skipTask: C,
+		resetTask: w,
+		toggleTaskExpanded: T,
+		toggleCollapsed: E,
+		resetChecklist: D,
+		progress: x,
+		completedCount: d,
+		skippedCount: f,
+		totalCount: p,
+		isComplete: b,
+		getTaskStatus: O
+	};
+}
+function v({ active: e, onComplete: n }) {
+	let [r, i] = t.useState(!1);
+	if (t.useEffect(() => {
+		if (e) {
+			i(!0);
+			let e = setTimeout(() => {
+				i(!1), n?.();
+			}, 4e3);
+			return () => clearTimeout(e);
+		}
+	}, [e, n]), !r) return null;
+	let l = [
+		"#fbbf24",
+		"#f59e0b",
+		"#ef4444",
+		"#8b5cf6",
+		"#06b6d4",
+		"#22c55e",
+		"#ec4899"
+	];
+	return /* @__PURE__ */ f("div", {
+		className: "pointer-events-none fixed inset-0 z-50 overflow-hidden",
+		children: [
+			[...Array(80)].map((e, t) => {
+				let n = t / 80 * 360, r = 150 + Math.random() * 250, i = 6 + Math.random() * 10, a = 1.2 + Math.random() * .6;
+				return /* @__PURE__ */ d("div", {
+					className: "absolute left-1/2 top-1/2 animate-confetti",
+					style: {
+						width: i,
+						height: i,
+						backgroundColor: l[Math.floor(Math.random() * l.length)],
+						borderRadius: Math.random() > .5 ? "50%" : "2px",
+						"--angle": `${n}deg`,
+						"--distance": `${r}px`,
+						animationDuration: `${a}s`,
+						animationDelay: `${Math.random() * .3}s`
+					}
+				}, t);
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-celebration-popup",
+				children: /* @__PURE__ */ f("div", {
+					className: "flex flex-col items-center gap-4 rounded-2xl bg-gradient-to-br from-yellow-400 via-orange-500 to-pink-500 px-12 py-8 text-white shadow-2xl",
+					children: [
+						/* @__PURE__ */ f("div", {
+							className: "flex items-center gap-3",
+							children: [
+								/* @__PURE__ */ d(o, { className: "h-10 w-10 animate-bounce" }),
+								/* @__PURE__ */ d(c, { className: "h-12 w-12 animate-pulse" }),
+								/* @__PURE__ */ d(o, { className: "h-10 w-10 animate-bounce" })
+							]
+						}),
+						/* @__PURE__ */ f("div", {
+							className: "text-center",
+							children: [/* @__PURE__ */ d("h3", {
+								className: "text-3xl font-bold",
+								children: "All Done!"
+							}), /* @__PURE__ */ d("p", {
+								className: "mt-1 text-lg opacity-90",
+								children: "You completed all the tasks"
+							})]
+						}),
+						/* @__PURE__ */ d(a, { className: "h-8 w-8 animate-bounce" })
+					]
+				})
+			}),
+			[...Array(20)].map((e, t) => /* @__PURE__ */ d(s, {
+				className: "absolute animate-sparkle text-yellow-400",
+				style: {
+					left: `${Math.random() * 100}%`,
+					top: `${Math.random() * 100}%`,
+					animationDelay: `${Math.random() * 2}s`,
+					fontSize: `${20 + Math.random() * 20}px`
+				}
+			}, `sparkle-${t}`)),
+			/* @__PURE__ */ d("style", { children: "\n        @keyframes confetti {\n          0% {\n            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);\n            opacity: 1;\n          }\n          100% {\n            transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0) rotate(720deg);\n            opacity: 0;\n          }\n        }\n        @keyframes celebration-popup {\n          0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }\n          20% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }\n          30% { transform: translate(-50%, -50%) scale(1); }\n          80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }\n          100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }\n        }\n        @keyframes sparkle {\n          0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }\n          50% { transform: scale(1) rotate(180deg); opacity: 1; }\n        }\n        .animate-confetti {\n          animation: confetti 1.5s ease-out forwards;\n        }\n        .animate-celebration-popup {\n          animation: celebration-popup 4s ease-out forwards;\n        }\n        .animate-sparkle {\n          animation: sparkle 2s ease-in-out infinite;\n        }\n      " })
+		]
+	});
+}
+function y({ progress: r, showPercentage: i = !0, size: a = "default" }) {
+	let [o, s] = t.useState(0);
+	t.useEffect(() => {
+		let e = setTimeout(() => s(r), 100);
+		return () => clearTimeout(e);
+	}, [r]);
+	let c = {
+		sm: "h-1.5",
+		default: "h-2",
+		lg: "h-3"
+	}, l = r >= 100;
+	return /* @__PURE__ */ f("div", {
+		className: "w-full",
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: e("relative w-full overflow-hidden rounded-full bg-muted", c[a]),
+				children: [/* @__PURE__ */ d("div", {
+					className: e("h-full rounded-full transition-all duration-700 ease-out", l ? "bg-gradient-to-r from-green-500 to-emerald-500" : "bg-gradient-to-r from-blue-500 to-purple-500"),
+					style: { width: `${o}%` }
+				}), /* @__PURE__ */ d("div", {
+					className: "absolute inset-0 animate-progress-shine",
+					style: { width: `${o}%` }
+				})]
+			}),
+			i && /* @__PURE__ */ f("div", {
+				className: "mt-1 flex items-center justify-between text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ f("span", { children: [Math.round(o), "% complete"] }), l && /* @__PURE__ */ f("span", {
+					className: "flex items-center gap-1 text-green-600",
+					children: [/* @__PURE__ */ d(n, { className: "h-3 w-3" }), "Complete"]
+				})]
+			}),
+			/* @__PURE__ */ d("style", { children: "\n        @keyframes progress-shine {\n          0% { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%); background-position: -100% 0; }\n          100% { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%); background-position: 200% 0; }\n        }\n        .animate-progress-shine {\n          animation: progress-shine 2s ease-in-out infinite;\n        }\n      " })
+		]
+	});
+}
+function b({ task: t, status: a, isExpanded: o, onToggleExpand: s, onComplete: c, onSkip: u, onReset: p, size: m = "default" }) {
+	let h = a === "completed", g = a === "skipped", _ = a === "pending", v = {
+		sm: {
+			container: "px-3 py-2",
+			icon: "h-4 w-4",
+			checkIcon: "h-3 w-3",
+			title: "text-sm",
+			description: "text-xs",
+			button: "px-2 py-1 text-xs"
+		},
+		default: {
+			container: "px-4 py-3",
+			icon: "h-5 w-5",
+			checkIcon: "h-3.5 w-3.5",
+			title: "text-base",
+			description: "text-sm",
+			button: "px-3 py-1.5 text-sm"
+		},
+		lg: {
+			container: "px-5 py-4",
+			icon: "h-6 w-6",
+			checkIcon: "h-4 w-4",
+			title: "text-lg",
+			description: "text-base",
+			button: "px-4 py-2 text-base"
+		}
+	}[m];
+	return /* @__PURE__ */ f("div", {
+		className: e("group rounded-lg border transition-all duration-200", h && "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30", g && "border-muted bg-muted/30 opacity-60", _ && "border-border bg-card hover:border-primary/50 hover:shadow-sm"),
+		children: [/* @__PURE__ */ f("div", {
+			className: e("flex items-center gap-3", v.container),
+			children: [
+				/* @__PURE__ */ f("button", {
+					type: "button",
+					onClick: _ ? c : p,
+					className: e("flex-shrink-0 rounded-full border-2 transition-all duration-200", v.icon, "flex items-center justify-center", h && "border-green-500 bg-green-500 text-white", g && "border-muted-foreground/30 bg-muted", _ && "border-muted-foreground/30 hover:border-primary hover:bg-primary/10"),
+					"aria-label": _ ? "Complete task" : "Reset task",
+					children: [h && /* @__PURE__ */ d(n, { className: v.checkIcon }), g && /* @__PURE__ */ d(l, { className: e(v.checkIcon, "text-muted-foreground") })]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: "flex-1 min-w-0",
+					children: /* @__PURE__ */ f("div", {
+						className: "flex items-center gap-2",
+						children: [
+							t.icon && /* @__PURE__ */ d("span", {
+								className: "text-muted-foreground",
+								children: t.icon
+							}),
+							/* @__PURE__ */ d("span", {
+								className: e("font-medium transition-all duration-200", v.title, h && "text-green-700 line-through dark:text-green-400", g && "text-muted-foreground line-through"),
+								children: t.title
+							}),
+							t.required === !1 && /* @__PURE__ */ d("span", {
+								className: "text-xs text-muted-foreground",
+								children: "(optional)"
+							}),
+							t.points && _ && /* @__PURE__ */ f("span", {
+								className: "inline-flex items-center gap-0.5 rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400",
+								children: ["+", t.points]
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ f("div", {
+					className: "flex items-center gap-2",
+					children: [
+						_ && t.skippable && /* @__PURE__ */ d("button", {
+							type: "button",
+							onClick: u,
+							className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
+							children: "Skip"
+						}),
+						_ && t.actionLabel && t.onAction && /* @__PURE__ */ d("button", {
+							type: "button",
+							onClick: (e) => {
+								e.stopPropagation(), t.onAction?.();
+							},
+							className: e("rounded-md bg-primary text-primary-foreground font-medium transition-colors hover:bg-primary/90", v.button),
+							children: t.actionLabel
+						}),
+						t.description && /* @__PURE__ */ d("button", {
+							type: "button",
+							onClick: s,
+							className: "rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",
+							"aria-label": o ? "Collapse details" : "Expand details",
+							children: d(o ? r : i, { className: v.icon })
+						})
+					]
+				})
+			]
+		}), t.description && /* @__PURE__ */ d("div", {
+			className: e("overflow-hidden transition-all duration-200", o ? "max-h-40 opacity-100" : "max-h-0 opacity-0"),
+			children: /* @__PURE__ */ d("div", {
+				className: e("border-t pt-2 pb-3 px-4 ml-8", v.description, "text-muted-foreground"),
+				children: t.description
+			})
+		})]
+	});
+}
+function x({ category: e, tasks: n, taskStates: a, expandedTasks: o, onCompleteTask: s, onSkipTask: c, onResetTask: l, onToggleTaskExpanded: u, size: p = "default" }) {
+	let [m, h] = t.useState(!0), g = n.filter((e) => a[e.id] === "completed").length, _ = n.length;
+	return /* @__PURE__ */ f("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ f("button", {
+			type: "button",
+			onClick: () => h((e) => !e),
+			className: "flex w-full items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-muted/50 transition-colors",
+			children: [
+				d(m ? r : i, { className: "h-4 w-4 text-muted-foreground" }),
+				e.icon && /* @__PURE__ */ d("span", {
+					className: "text-muted-foreground",
+					children: e.icon
+				}),
+				/* @__PURE__ */ d("span", {
+					className: "font-medium",
+					children: e.label
+				}),
+				/* @__PURE__ */ f("span", {
+					className: "ml-auto text-sm text-muted-foreground",
+					children: [
+						g,
+						"/",
+						_
+					]
+				})
+			]
+		}), m && /* @__PURE__ */ d("div", {
+			className: "ml-4 space-y-2",
+			children: n.map((e) => /* @__PURE__ */ d(b, {
+				task: e,
+				status: a[e.id] || "pending",
+				isExpanded: o.has(e.id),
+				onToggleExpand: () => u(e.id),
+				onComplete: () => s(e.id),
+				onSkip: () => c(e.id),
+				onReset: () => l(e.id),
+				size: p
+			}, e.id))
+		})]
+	});
+}
+function S({ checklistId: o, tasks: s, categories: l, title: p = "Getting Started", subtitle: m, showProgress: h = !0, showPercentage: g = !0, persistent: S = !0, showCelebration: C = !0, onComplete: w, onTaskChange: T, defaultCollapsed: E = !1, collapsible: D = !0, size: O = "default", className: k }) {
+	let [A, j] = t.useState(!1), M = t.useRef(!1), N = _({
+		checklistId: o,
+		tasks: s,
+		persistent: S,
+		defaultCollapsed: E,
+		onComplete: () => {
+			C && j(!0), w?.();
+		},
+		onTaskChange: T
+	});
+	t.useEffect(() => {
+		N.isComplete && !M.current && N.completedCount > 0 && C && j(!0), M.current = N.isComplete;
+	}, [
+		N.isComplete,
+		N.completedCount,
+		C
+	]);
+	let P = t.useMemo(() => {
+		if (!l || l.length === 0) return null;
+		let e = {}, t = [];
+		for (let n of s) n.category && l.find((e) => e.id === n.category) ? (e[n.category] || (e[n.category] = []), e[n.category].push(n)) : t.push(n);
+		return {
+			groups: e,
+			uncategorized: t
+		};
+	}, [s, l]), F = {
+		sm: {
+			container: "p-3",
+			header: "gap-2",
+			title: "text-base",
+			subtitle: "text-xs"
+		},
+		default: {
+			container: "p-4",
+			header: "gap-3",
+			title: "text-lg",
+			subtitle: "text-sm"
+		},
+		lg: {
+			container: "p-6",
+			header: "gap-4",
+			title: "text-xl",
+			subtitle: "text-base"
+		}
+	}[O];
+	return /* @__PURE__ */ f("div", {
+		className: e("rounded-xl border bg-card shadow-sm", F.container, k),
+		children: [
+			/* @__PURE__ */ d(v, {
+				active: A,
+				onComplete: () => j(!1)
+			}),
+			/* @__PURE__ */ f("div", {
+				className: e("flex items-start justify-between", F.header),
+				children: [/* @__PURE__ */ f("div", {
+					className: "flex-1",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex items-center gap-2",
+						children: [
+							D && /* @__PURE__ */ d("button", {
+								type: "button",
+								onClick: N.toggleCollapsed,
+								className: "rounded-md p-1 hover:bg-muted transition-colors",
+								"aria-label": N.isCollapsed ? "Expand checklist" : "Collapse checklist",
+								children: N.isCollapsed ? /* @__PURE__ */ d(i, { className: "h-5 w-5" }) : /* @__PURE__ */ d(r, { className: "h-5 w-5" })
+							}),
+							/* @__PURE__ */ d("h2", {
+								className: e("font-semibold", F.title),
+								children: p
+							}),
+							N.isComplete && /* @__PURE__ */ f("span", {
+								className: "inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/50 dark:text-green-400",
+								children: [/* @__PURE__ */ d(n, { className: "h-3 w-3" }), "Complete"]
+							})
+						]
+					}), m && !N.isCollapsed && /* @__PURE__ */ d("p", {
+						className: e("text-muted-foreground mt-1", F.subtitle),
+						children: m
+					})]
+				}), /* @__PURE__ */ f("div", {
+					className: "text-right text-sm text-muted-foreground",
+					children: [
+						/* @__PURE__ */ d("span", {
+							className: "font-medium text-foreground",
+							children: N.completedCount
+						}),
+						"/",
+						N.totalCount,
+						" tasks"
+					]
+				})]
+			}),
+			h && !N.isCollapsed && /* @__PURE__ */ d("div", {
+				className: "mt-3",
+				children: /* @__PURE__ */ d(y, {
+					progress: N.progress,
+					showPercentage: g,
+					size: O
+				})
+			}),
+			!N.isCollapsed && /* @__PURE__ */ d("div", {
+				className: "mt-4 space-y-3",
+				children: P ? /* @__PURE__ */ f(u, { children: [l?.map((e) => {
+					let t = P.groups[e.id] || [];
+					return t.length === 0 ? null : /* @__PURE__ */ d(x, {
+						category: e,
+						tasks: t,
+						taskStates: N.taskStates,
+						expandedTasks: N.expandedTasks,
+						onCompleteTask: N.completeTask,
+						onSkipTask: N.skipTask,
+						onResetTask: N.resetTask,
+						onToggleTaskExpanded: N.toggleTaskExpanded,
+						size: O
+					}, e.id);
+				}), P.uncategorized.length > 0 && /* @__PURE__ */ d("div", {
+					className: "space-y-2",
+					children: P.uncategorized.map((e) => /* @__PURE__ */ d(b, {
+						task: e,
+						status: N.getTaskStatus(e.id),
+						isExpanded: N.expandedTasks.has(e.id),
+						onToggleExpand: () => N.toggleTaskExpanded(e.id),
+						onComplete: () => N.completeTask(e.id),
+						onSkip: () => N.skipTask(e.id),
+						onReset: () => N.resetTask(e.id),
+						size: O
+					}, e.id))
+				})] }) : /* @__PURE__ */ d("div", {
+					className: "space-y-2",
+					children: s.map((e) => /* @__PURE__ */ d(b, {
+						task: e,
+						status: N.getTaskStatus(e.id),
+						isExpanded: N.expandedTasks.has(e.id),
+						onToggleExpand: () => N.toggleTaskExpanded(e.id),
+						onComplete: () => N.completeTask(e.id),
+						onSkip: () => N.skipTask(e.id),
+						onReset: () => N.resetTask(e.id),
+						size: O
+					}, e.id))
+				})
+			}),
+			N.isComplete && !N.isCollapsed && /* @__PURE__ */ d("div", {
+				className: "mt-4 rounded-lg bg-gradient-to-r from-green-50 to-emerald-50 p-4 dark:from-green-950/30 dark:to-emerald-950/30",
+				children: /* @__PURE__ */ f("div", {
+					className: "flex items-center gap-3",
+					children: [
+						/* @__PURE__ */ d("div", {
+							className: "rounded-full bg-green-500 p-2 text-white",
+							children: /* @__PURE__ */ d(c, { className: "h-5 w-5" })
+						}),
+						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("p", {
+							className: "font-medium text-green-700 dark:text-green-400",
+							children: "Great job!"
+						}), /* @__PURE__ */ d("p", {
+							className: "text-sm text-green-600 dark:text-green-500",
+							children: "You have completed the onboarding checklist"
+						})] }),
+						/* @__PURE__ */ d(a, { className: "ml-auto h-8 w-8 text-green-500" })
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { S as WakaChecklist, S as default, _ as useChecklist };

package/dist/components/waka-checkout-stepper/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("lucide-react"),i=require("react/jsx-runtime");var a={cart:r.ShoppingCart,shipping:r.Truck,payment:r.CreditCard,review:r.ClipboardCheck,confirmation:r.PartyPopper};function o({initialStep:e=0,steps:t,onStepChange:r,onComplete:i,validateOnNext:a=!0}){let[o,s]=n.useState(e),[c,l]=n.useState(new Set),[u,d]=n.useState(new Set),[f,p]=n.useState(!1),[m,h]=n.useState(!1),[g,_]=n.useState(null),v=t.length,y=o===0,b=o===v-1,x=t[o],S=n.useCallback(e=>u.has(e)?`skipped`:c.has(e)?`completed`:e===o?`current`:e<o?`completed`:`pending`,[o,c,u]),C=n.useMemo(()=>t.map((e,t)=>({...e,status:S(t)})),[t,S]),w=n.useCallback(async()=>{let e=t[o];if(!e?.validate)return!0;h(!0),_(null);try{let t=await e.validate();return t.isValid?!0:(_(t.errorMessage||`Validation failed`),!1)}catch{return _(`An error occurred during validation`),!1}finally{h(!1)}},[o,t]),T=n.useCallback(async e=>e<0||e>=v||t[e]?.disabled||e>o&&a&&!await w()?!1:(e>o&&l(e=>new Set(e).add(o)),s(e),_(null),r?.(e,t[e].id),!0),[o,v,t,a,w,r]);return{currentStep:o,currentStepData:x,stepsWithStatus:C,totalSteps:v,isFirstStep:y,isLastStep:b,isComplete:f,isValidating:m,validationError:g,goToStep:T,nextStep:n.useCallback(async()=>b?!1:T(o+1),[b,o,T]),prevStep:n.useCallback(()=>{y||(s(e=>e-1),_(null),r?.(o-1,t[o-1].id))},[y,o,t,r]),skipStep:n.useCallback(()=>{!t[o]?.optional||b||(d(e=>new Set(e).add(o)),s(e=>e+1),_(null),r?.(o+1,t[o+1].id))},[o,t,b,r]),completeCheckout:n.useCallback(async()=>a&&!await w()?!1:(l(e=>new Set(e).add(o)),p(!0),i?.(),!0),[o,a,w,i]),reset:n.useCallback(()=>{s(e),l(new Set),d(new Set),p(!1),h(!1),_(null)},[e]),getStepStatus:S,skippedSteps:u,markStepCompleted:n.useCallback(e=>{l(t=>new Set(t).add(e))},[])}}var s=n.createContext(null);function c(){let e=n.useContext(s);if(!e)throw Error(`useCheckoutStepperContext must be used within a WakaCheckoutStepper`);return e}function l({step:e,index:n}){let{size:o,animated:s}=c(),l={sm:`h-8 w-8 text-xs`,md:`h-10 w-10 text-sm`,lg:`h-12 w-12 text-base`},u={sm:`h-4 w-4`,md:`h-5 w-5`,lg:`h-6 w-6`},d={pending:`bg-muted text-muted-foreground border-2 border-muted-foreground/30`,current:`bg-primary text-primary-foreground border-2 border-primary shadow-lg shadow-primary/25`,completed:`bg-green-500 text-white border-2 border-green-500`,error:`bg-destructive text-destructive-foreground border-2 border-destructive`,skipped:`bg-muted text-muted-foreground border-2 border-dashed border-muted-foreground/50`},f=e.icon||a[e.id];return(0,i.jsx)(`div`,{className:t.cn(`rounded-full flex items-center justify-center transition-all duration-300`,l[o],d[e.status],s&&e.status===`current`&&`animate-pulse`),children:e.status===`completed`?(0,i.jsx)(r.Check,{className:u[o]}):e.status===`error`?(0,i.jsx)(r.AlertCircle,{className:u[o]}):e.status===`skipped`?(0,i.jsx)(r.SkipForward,{className:u[o]}):f?(0,i.jsx)(f,{className:u[o]}):(0,i.jsx)(`span`,{className:`font-semibold`,children:n+1})})}function u({status:e,nextStatus:n,orientation:r}){return(0,i.jsx)(`div`,{className:t.cn(`transition-all duration-500`,r===`horizontal`?`flex-1 h-0.5 mx-2 min-w-[20px]`:`w-0.5 min-h-[32px] mx-auto my-1`,e===`completed`||e===`skipped`?`bg-green-500`:`bg-muted-foreground/30`)})}function d({step:e,index:n,isLast:r,nextStatus:a}){let{orientation:o,size:s,clickable:d,allowPreviousOnly:f,currentStep:p,goToStep:m}=c(),h=d&&!e.disabled&&(f?n<p:n!==p),g={sm:`text-xs`,md:`text-sm`,lg:`text-base`},_={sm:`text-[10px]`,md:`text-xs`,lg:`text-sm`},v=async()=>{h&&await m(n)};return o===`vertical`?(0,i.jsxs)(`div`,{className:`flex`,children:[(0,i.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,i.jsx)(`button`,{type:`button`,onClick:v,disabled:!h,className:t.cn(`flex items-center`,h&&`cursor-pointer hover:opacity-80`,!h&&`cursor-default`),"aria-current":e.status===`current`?`step`:void 0,children:(0,i.jsx)(l,{step:e,index:n})}),!r&&(0,i.jsx)(u,{status:e.status,nextStatus:a||`pending`,orientation:`vertical`})]}),(0,i.jsx)(`div`,{className:`ml-4 pb-8`,children:(0,i.jsxs)(`button`,{type:`button`,onClick:v,disabled:!h,className:t.cn(`text-left`,h&&`cursor-pointer hover:opacity-80`,!h&&`cursor-default`),children:[(0,i.jsxs)(`p`,{className:t.cn(`font-semibold`,g[s],e.status===`current`?`text-foreground`:e.status===`completed`?`text-green-600 dark:text-green-400`:`text-muted-foreground`,e.disabled&&`opacity-50`),children:[e.title,e.optional&&(0,i.jsx)(`span`,{className:`ml-2 text-muted-foreground font-normal text-xs`,children:`(Optional)`})]}),e.description&&(0,i.jsx)(`p`,{className:t.cn(`text-muted-foreground mt-0.5`,_[s]),children:e.description})]})})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:`flex flex-col items-center flex-shrink-0`,children:(0,i.jsxs)(`button`,{type:`button`,onClick:v,disabled:!h,className:t.cn(`flex flex-col items-center gap-2`,h&&`cursor-pointer hover:opacity-80`,!h&&`cursor-default`),"aria-current":e.status===`current`?`step`:void 0,children:[(0,i.jsx)(l,{step:e,index:n}),(0,i.jsxs)(`div`,{className:`text-center min-w-[60px] max-w-[100px]`,children:[(0,i.jsx)(`p`,{className:t.cn(`font-semibold truncate`,g[s],e.status===`current`?`text-foreground`:e.status===`completed`?`text-green-600 dark:text-green-400`:`text-muted-foreground`,e.disabled&&`opacity-50`),children:e.title}),e.description&&(0,i.jsx)(`p`,{className:t.cn(`text-muted-foreground mt-0.5 hidden md:block truncate`,_[s]),children:e.description})]})]})}),!r&&(0,i.jsx)(u,{status:e.status,nextStatus:a||`pending`,orientation:`horizontal`})]})}function f({children:e,isActive:r,direction:a,animated:o}){let[s,c]=n.useState(r);if(n.useEffect(()=>{if(r)c(!0);else if(o){let e=setTimeout(()=>c(!1),300);return()=>clearTimeout(e)}else c(!1)},[r,o]),!s)return null;let l={slide:t.cn(`transition-all duration-300`,r?`opacity-100 translate-x-0`:`opacity-0 translate-x-8`),fade:t.cn(`transition-opacity duration-300`,r?`opacity-100`:`opacity-0`),scale:t.cn(`transition-all duration-300`,r?`opacity-100 scale-100`:`opacity-0 scale-95`)};return(0,i.jsx)(`div`,{className:o?l[a]:void 0,children:e})}function p({steps:e,position:n,className:a}){let o=e.filter(e=>e.status===`completed`||e.status===`skipped`);return(0,i.jsxs)(`div`,{className:t.cn(`w-full lg:w-80 p-4 bg-muted/50 rounded-lg border`,n===`left`?`lg:order-first`:`lg:order-last`,a),children:[(0,i.jsx)(`h3`,{className:`font-semibold text-lg mb-4`,children:`Order Summary`}),(0,i.jsxs)(`div`,{className:`space-y-4`,children:[o.map(e=>(0,i.jsxs)(`div`,{className:`pb-3 border-b border-border last:border-0`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 mb-1`,children:[(0,i.jsx)(r.Check,{className:`h-4 w-4 text-green-500`}),(0,i.jsx)(`span`,{className:`font-medium text-sm`,children:e.title})]}),e.summary&&(0,i.jsx)(`div`,{className:`text-sm text-muted-foreground ml-6`,children:e.summary})]},e.id)),o.length===0&&(0,i.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Complete steps to see your order summary.`})]})]})}function m({className:e,labels:n={}}){let{currentStep:a,currentStepData:o,isFirstStep:s,isLastStep:l,isValidating:u,isLoading:d,validationError:f,nextStep:p,prevStep:m,skipStep:h,completeCheckout:g}=c(),{back:_=`Back`,next:v=`Continue`,skip:y=`Skip`,complete:b=`Complete Order`,processing:x=`Processing...`}=n,S=u||d;return(0,i.jsxs)(`div`,{className:t.cn(`space-y-4`,e),children:[f&&(0,i.jsxs)(`div`,{className:`flex items-center gap-2 p-3 bg-destructive/10 text-destructive rounded-lg text-sm`,children:[(0,i.jsx)(r.AlertCircle,{className:`h-4 w-4 flex-shrink-0`}),(0,i.jsx)(`span`,{children:f})]}),(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[(0,i.jsxs)(`button`,{type:`button`,onClick:m,disabled:s||S,className:t.cn(`flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg border transition-all`,s||S?`opacity-50 cursor-not-allowed bg-muted`:`hover:bg-muted`),children:[(0,i.jsx)(r.ChevronLeft,{className:`h-4 w-4`}),_]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[o?.optional&&!l&&(0,i.jsxs)(`button`,{type:`button`,onClick:h,disabled:S,className:t.cn(`flex items-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg transition-all`,`text-muted-foreground hover:text-foreground hover:bg-muted`,S&&`opacity-50 cursor-not-allowed`),children:[(0,i.jsx)(r.SkipForward,{className:`h-4 w-4`}),y]}),(0,i.jsx)(`button`,{type:`button`,onClick:l?g:p,disabled:S,className:t.cn(`flex items-center gap-2 px-6 py-2.5 text-sm font-medium rounded-lg transition-all`,`bg-primary text-primary-foreground`,S?`opacity-70 cursor-not-allowed`:`hover:bg-primary/90`),children:S?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.Loader2,{className:`h-4 w-4 animate-spin`}),x]}):l?(0,i.jsxs)(i.Fragment,{children:[b,(0,i.jsx)(r.Check,{className:`h-4 w-4`})]}):(0,i.jsxs)(i.Fragment,{children:[v,(0,i.jsx)(r.ChevronRight,{className:`h-4 w-4`})]})})]})]})]})}function h({className:e}){let{currentStep:n,totalSteps:r,stepsWithStatus:a}=c(),o=a.filter(e=>e.status===`completed`||e.status===`skipped`).length,s=Math.round(o/r*100);return(0,i.jsxs)(`div`,{className:t.cn(`space-y-2`,e),children:[(0,i.jsxs)(`div`,{className:`flex justify-between text-sm`,children:[(0,i.jsxs)(`span`,{className:`text-muted-foreground`,children:[`Step `,n+1,` of `,r]}),(0,i.jsxs)(`span`,{className:`font-medium`,children:[s,`% complete`]})]}),(0,i.jsx)(`div`,{className:`h-2 bg-muted rounded-full overflow-hidden`,children:(0,i.jsx)(`div`,{className:`h-full bg-primary transition-all duration-500 ease-out rounded-full`,style:{width:`${s}%`}})})]})}function g({steps:e,currentStep:r,onStepChange:a,onComplete:c,orientation:l=`horizontal`,size:u=`md`,clickable:h=!0,allowPreviousOnly:g=!0,showContent:_=!0,showSummary:v=!1,summaryPosition:y=`right`,animated:b=!0,animationDirection:x=`slide`,isLoading:S=!1,className:C,labels:w}){let T=o({initialStep:r??0,steps:e,onStepChange:a,onComplete:c,validateOnNext:!0});n.useEffect(()=>{r!==void 0&&r!==T.currentStep&&T.goToStep(r)},[r]);let E={...T,orientation:l,size:u,clickable:h,allowPreviousOnly:g,animated:b,animationDirection:x,isLoading:S};return(0,i.jsx)(s.Provider,{value:E,children:(0,i.jsxs)(`div`,{className:t.cn(`w-full`,C),children:[(0,i.jsx)(`nav`,{"aria-label":`Checkout progress`,className:t.cn(`mb-8`,l===`horizontal`?`flex items-start justify-between overflow-x-auto pb-2`:`flex flex-col`),children:T.stepsWithStatus.map((t,n)=>(0,i.jsx)(d,{step:t,index:n,isLast:n===e.length-1,nextStatus:T.stepsWithStatus[n+1]?.status},t.id))}),(0,i.jsxs)(`div`,{className:t.cn(`flex flex-col lg:flex-row gap-6`,v&&y===`left`&&`lg:flex-row-reverse`),children:[_&&(0,i.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[e.map((e,t)=>(0,i.jsx)(f,{isActive:t===T.currentStep,direction:x,animated:b,children:(0,i.jsxs)(`div`,{className:`p-6 rounded-lg border bg-card`,children:[(0,i.jsx)(`h2`,{className:`text-xl font-semibold mb-2`,children:e.title}),e.description&&(0,i.jsx)(`p`,{className:`text-muted-foreground mb-6`,children:e.description}),e.content]})},e.id)),(0,i.jsx)(`div`,{className:`mt-6`,children:(0,i.jsx)(m,{labels:w})})]}),v&&(0,i.jsx)(p,{steps:T.stepsWithStatus,position:y})]})]})})}exports.CheckoutNavigation=m,exports.CheckoutProgressBar=h,exports.WakaCheckoutStepper=g,exports.default=g,exports.useCheckoutStepper=o,exports.useCheckoutStepperContext=c;