@wakastellar/ui 4.0.0 → 4.0.1

package/dist/components/waka-schedule-picker/index.es.js

@@ -0,0 +1,526 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Badge as t } from "../badge/index.es.js";
+import { Button as n } from "../button/index.es.js";
+import { Checkbox as r } from "../checkbox/index.es.js";
+import { Label as i } from "../label/index.es.js";
+import { Select as a, SelectContent as o, SelectItem as s, SelectTrigger as c, SelectValue as l } from "../select/index.es.js";
+import { Popover as u, PopoverContent as d, PopoverTrigger as f } from "../popover/index.es.js";
+import { ScrollArea as p } from "../scroll-area/index.es.js";
+import { localDateKey as m } from "../../utils/local-date.es.js";
+import * as h from "react";
+import { Calendar as g, CalendarDays as _, Check as v, ChevronLeft as ee, ChevronRight as te, Globe as y, Repeat as b, Timer as x, X as S } from "lucide-react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+//#region src/components/waka-schedule-picker/index.tsx
+var ne = [
+	15,
+	30,
+	45,
+	60,
+	90,
+	120
+], re = [
+	"UTC",
+	"America/New_York",
+	"America/Chicago",
+	"America/Denver",
+	"America/Los_Angeles",
+	"Europe/London",
+	"Europe/Paris",
+	"Europe/Berlin",
+	"Asia/Tokyo",
+	"Asia/Shanghai",
+	"Asia/Dubai",
+	"Australia/Sydney"
+], E = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+], D = [
+	"Sunday",
+	"Monday",
+	"Tuesday",
+	"Wednesday",
+	"Thursday",
+	"Friday",
+	"Saturday"
+];
+function O(e, t) {
+	let [n, r] = e.split(":").map(Number);
+	if (t === "12h") {
+		let e = n >= 12 ? "PM" : "AM";
+		return `${n % 12 || 12}:${r.toString().padStart(2, "0")} ${e}`;
+	}
+	return `${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+}
+function k(e, t = "en-US") {
+	return e.toLocaleDateString(t, {
+		weekday: "short",
+		month: "short",
+		day: "numeric"
+	});
+}
+function A(e, t = 0) {
+	let n = new Date(e), r = n.getDay(), i = (r < t ? 7 : 0) + r - t;
+	n.setDate(n.getDate() - i), n.setHours(0, 0, 0, 0);
+	let a = [];
+	for (let e = 0; e < 7; e++) {
+		let t = new Date(n);
+		t.setDate(n.getDate() + e), a.push(t);
+	}
+	return a;
+}
+function j(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+}
+function M(e, t, n) {
+	if (!t) return !0;
+	if (n !== void 0 && !t.daysOfWeek.includes(n)) return !1;
+	let [r, i] = e.split(":").map(Number), a = r * 60 + i, [o, s] = t.start.split(":").map(Number), [c, l] = t.end.split(":").map(Number), u = o * 60 + s, d = c * 60 + l;
+	return a >= u && a < d;
+}
+function ie(e, t = 30, n) {
+	let r = [], i = n ? parseInt(n.start.split(":")[0]) : 8, a = n ? parseInt(n.end.split(":")[0]) : 18;
+	for (let o = i; o < a; o++) for (let i = 0; i < 60; i += t) {
+		let a = `${o.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}`, s = i + t, c = s >= 60 ? o + 1 : o, l = s >= 60 ? s - 60 : s, u = `${c.toString().padStart(2, "0")}:${l.toString().padStart(2, "0")}`, d = M(a, n, e.getDay());
+		r.push({
+			id: `${m(e)}-${a}`,
+			date: new Date(e),
+			startTime: a,
+			endTime: u,
+			status: d ? "available" : "unavailable"
+		});
+	}
+	return r;
+}
+function N(e = {}) {
+	let { initialSlots: t = [], initialSelectedSlots: n = [], initialDuration: r = 30, initialTimeZone: i = "UTC", multiSelect: a = !1 } = e, [o, s] = h.useState(t), [c, l] = h.useState(n), [u, d] = h.useState(r), [f, p] = h.useState(i), [m, g] = h.useState({
+		enabled: !1,
+		pattern: "weekly"
+	});
+	return {
+		slots: o,
+		setSlots: s,
+		selectedSlots: c,
+		setSelectedSlots: l,
+		duration: u,
+		setDuration: d,
+		timeZone: f,
+		setTimeZone: p,
+		recurrence: m,
+		setRecurrence: g,
+		toggleSlot: h.useCallback((e) => {
+			l((t) => t.includes(e) ? t.filter((t) => t !== e) : a ? [...t, e] : [e]);
+		}, [a]),
+		clearSelection: h.useCallback(() => {
+			l([]);
+		}, []),
+		getSelectedSlotDetails: h.useCallback(() => o.filter((e) => c.includes(e.id)), [o, c]),
+		isSlotSelected: h.useCallback((e) => c.includes(e), [c])
+	};
+}
+function P({ slot: t, isSelected: n, onClick: r, hourFormat: i, disabled: a, isBusinessHour: o = !0, renderSlot: s }) {
+	if (s) return /* @__PURE__ */ w("div", {
+		onClick: a ? void 0 : r,
+		children: s(t, n)
+	});
+	let c = t.status === "available", l = t.status === "booked", u = t.status === "unavailable";
+	return /* @__PURE__ */ w("button", {
+		type: "button",
+		onClick: r,
+		disabled: a || l || u,
+		className: e("w-full px-2 py-1.5 text-xs rounded-md transition-all duration-200", "border focus:outline-none focus:ring-2 focus:ring-primary/50", n && "bg-primary text-primary-foreground border-primary shadow-sm", !n && c && "bg-card hover:bg-accent hover:border-primary/50 border-border", !n && c && o && "bg-primary/5", l && "bg-muted text-muted-foreground cursor-not-allowed border-transparent", u && "bg-muted/50 text-muted-foreground/50 cursor-not-allowed border-transparent", "animate-in fade-in-0 zoom-in-95 duration-200"),
+		children: /* @__PURE__ */ T("span", {
+			className: "flex items-center justify-center gap-1",
+			children: [n && /* @__PURE__ */ w(v, { className: "h-3 w-3" }), O(t.startTime, i)]
+		})
+	});
+}
+function ae({ durations: e, selected: t, onChange: n, disabled: r }) {
+	let i = (e) => {
+		if (e < 60) return `${e} min`;
+		let t = Math.floor(e / 60), n = e % 60;
+		return n > 0 ? `${t}h ${n}m` : `${t}h`;
+	};
+	return /* @__PURE__ */ T("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ w(x, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ T(a, {
+			value: t.toString(),
+			onValueChange: (e) => n(parseInt(e)),
+			disabled: r,
+			children: [/* @__PURE__ */ w(c, {
+				className: "w-[120px] h-8 text-xs",
+				children: /* @__PURE__ */ w(l, {})
+			}), /* @__PURE__ */ w(o, { children: e.map((e) => /* @__PURE__ */ w(s, {
+				value: e.toString(),
+				children: i(e)
+			}, e)) })]
+		})]
+	});
+}
+function F({ timeZones: e, selected: t, onChange: n, disabled: r }) {
+	return /* @__PURE__ */ T("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ w(y, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ T(a, {
+			value: t,
+			onValueChange: n,
+			disabled: r,
+			children: [/* @__PURE__ */ w(c, {
+				className: "w-[180px] h-8 text-xs",
+				children: /* @__PURE__ */ w(l, {})
+			}), /* @__PURE__ */ w(o, { children: e.map((e) => /* @__PURE__ */ w(s, {
+				value: e,
+				children: e.replace(/_/g, " ")
+			}, e)) })]
+		})]
+	});
+}
+function I({ recurrence: e, onChange: t, disabled: p }) {
+	return /* @__PURE__ */ T(u, { children: [/* @__PURE__ */ w(f, {
+		asChild: !0,
+		children: /* @__PURE__ */ T(n, {
+			variant: e.enabled ? "default" : "outline",
+			size: "sm",
+			disabled: p,
+			className: "h-8 text-xs gap-1.5",
+			children: [/* @__PURE__ */ w(b, { className: "h-3.5 w-3.5" }), e.enabled ? "Recurring" : "One-time"]
+		})
+	}), /* @__PURE__ */ w(d, {
+		className: "w-80",
+		align: "start",
+		children: /* @__PURE__ */ T("div", {
+			className: "space-y-4",
+			children: [/* @__PURE__ */ T("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ w(i, {
+					htmlFor: "recurrence-enabled",
+					className: "text-sm font-medium",
+					children: "Enable recurrence"
+				}), /* @__PURE__ */ w(r, {
+					id: "recurrence-enabled",
+					checked: e.enabled,
+					onCheckedChange: (n) => t({
+						...e,
+						enabled: n
+					})
+				})]
+			}), e.enabled && /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ T("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ w(i, {
+					className: "text-xs text-muted-foreground",
+					children: "Pattern"
+				}), /* @__PURE__ */ T(a, {
+					value: e.pattern,
+					onValueChange: (n) => t({
+						...e,
+						pattern: n
+					}),
+					children: [/* @__PURE__ */ w(c, {
+						className: "h-8 text-xs",
+						children: /* @__PURE__ */ w(l, {})
+					}), /* @__PURE__ */ T(o, { children: [
+						/* @__PURE__ */ w(s, {
+							value: "daily",
+							children: "Daily"
+						}),
+						/* @__PURE__ */ w(s, {
+							value: "weekly",
+							children: "Weekly"
+						}),
+						/* @__PURE__ */ w(s, {
+							value: "biweekly",
+							children: "Bi-weekly"
+						}),
+						/* @__PURE__ */ w(s, {
+							value: "monthly",
+							children: "Monthly"
+						})
+					] })]
+				})]
+			}), e.pattern === "weekly" && /* @__PURE__ */ T("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ w(i, {
+					className: "text-xs text-muted-foreground",
+					children: "Days of week"
+				}), /* @__PURE__ */ w("div", {
+					className: "flex flex-wrap gap-1",
+					children: E.map((r, i) => /* @__PURE__ */ w(n, {
+						variant: e.daysOfWeek?.includes(i) ? "default" : "outline",
+						size: "sm",
+						className: "h-7 w-9 text-xs p-0",
+						onClick: () => {
+							let n = e.daysOfWeek || [], r = n.includes(i) ? n.filter((e) => e !== i) : [...n, i];
+							t({
+								...e,
+								daysOfWeek: r
+							});
+						},
+						children: r.charAt(0)
+					}, r))
+				})]
+			})] })]
+		})
+	})] });
+}
+function oe({ slots: e, onRemove: r, onClear: i, hourFormat: a, locale: o }) {
+	return e.length === 0 ? null : /* @__PURE__ */ T("div", {
+		className: "border-t pt-3 mt-3 space-y-2 animate-in slide-in-from-bottom-2 duration-200",
+		children: [/* @__PURE__ */ T("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ T("span", {
+				className: "text-xs font-medium text-muted-foreground",
+				children: [
+					"Selected (",
+					e.length,
+					")"
+				]
+			}), /* @__PURE__ */ w(n, {
+				variant: "ghost",
+				size: "sm",
+				className: "h-6 text-xs text-muted-foreground hover:text-destructive",
+				onClick: i,
+				children: "Clear all"
+			})]
+		}), /* @__PURE__ */ w(p, {
+			className: "max-h-[120px]",
+			children: /* @__PURE__ */ w("div", {
+				className: "flex flex-wrap gap-1.5",
+				children: e.map((e) => /* @__PURE__ */ T(t, {
+					variant: "secondary",
+					className: "pr-1 text-xs animate-in fade-in-0 zoom-in-95 duration-200",
+					children: [/* @__PURE__ */ T("span", {
+						className: "mr-1",
+						children: [
+							k(e.date, o),
+							" ",
+							O(e.startTime, a)
+						]
+					}), /* @__PURE__ */ w("button", {
+						type: "button",
+						onClick: () => r(e.id),
+						className: "ml-0.5 rounded-full hover:bg-muted-foreground/20 p-0.5",
+						children: /* @__PURE__ */ w(S, { className: "h-3 w-3" })
+					})]
+				}, e.id))
+			})
+		})]
+	});
+}
+function L({ slots: r, selectedSlots: i, onSlotsChange: a, multiSelect: o = !1, durations: s = ne, selectedDuration: c, onDurationChange: l, timeZones: u = re, selectedTimeZone: d, onTimeZoneChange: f, businessHours: v, showRecurrence: y = !1, recurrence: b, onRecurrenceChange: x, weekStartsOn: S = 0, minDate: C, maxDate: O, hourFormat: N = "24h", locale: L = "en-US", disabled: R = !1, className: se, slotInterval: z = 30, showSummary: B = !0, renderSlot: V }) {
+	let [H, U] = h.useState(() => A(C || /* @__PURE__ */ new Date(), S)[0]), [W, G] = h.useState(i || []), [K, ce] = h.useState(c || 30), [le, ue] = h.useState(d || "UTC"), [de, fe] = h.useState(b || {
+		enabled: !1,
+		pattern: "weekly"
+	}), q = i ?? W, pe = c ?? K, me = d ?? le, he = b ?? de, J = h.useMemo(() => A(H, S), [H, S]), Y = h.useMemo(() => {
+		if (r && r.length > 0) return r;
+		let e = [];
+		return J.forEach((t) => {
+			let n = ie(t, z, v);
+			e.push(...n);
+		}), e;
+	}, [
+		r,
+		J,
+		z,
+		v
+	]), X = h.useMemo(() => {
+		let e = /* @__PURE__ */ new Map();
+		return Y.forEach((t) => {
+			let n = m(t.date);
+			e.has(n) || e.set(n, []), e.get(n).push(t);
+		}), e;
+	}, [Y]), ge = h.useMemo(() => Y.filter((e) => q.includes(e.id)), [Y, q]), Z = (e) => {
+		if (R) return;
+		let t = Y.find((t) => t.id === e);
+		if (!t || t.status === "booked" || t.status === "unavailable") return;
+		let n;
+		n = q.includes(e) ? q.filter((t) => t !== e) : o ? [...q, e] : [e], i || G(n), a?.(n);
+	}, _e = (e) => {
+		let t = q.filter((t) => t !== e);
+		i || G(t), a?.(t);
+	}, ve = () => {
+		i || G([]), a?.([]);
+	}, ye = (e) => {
+		c || ce(e), l?.(e);
+	}, be = (e) => {
+		d || ue(e), f?.(e);
+	}, Q = (e) => {
+		b || fe(e), x?.(e);
+	}, xe = () => {
+		let e = new Date(H);
+		e.setDate(e.getDate() - 7), !(C && e < C) && U(e);
+	}, Se = () => {
+		let e = new Date(H);
+		e.setDate(e.getDate() + 7), !(O && e > O) && U(e);
+	}, Ce = () => {
+		U(A(/* @__PURE__ */ new Date(), S)[0]);
+	}, we = !C || H > C, Te = !O || J[6] < O, $ = /* @__PURE__ */ new Date(), Ee = J.some((e) => j(e, $));
+	return /* @__PURE__ */ T("div", {
+		className: e("rounded-lg border bg-card text-card-foreground shadow-sm", R && "opacity-60 pointer-events-none", se),
+		children: [
+			/* @__PURE__ */ T("div", {
+				className: "p-3 border-b space-y-3",
+				children: [/* @__PURE__ */ T("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ T("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ w(n, {
+								variant: "outline",
+								size: "icon",
+								className: "h-8 w-8",
+								onClick: xe,
+								disabled: !we,
+								children: /* @__PURE__ */ w(ee, { className: "h-4 w-4" })
+							}),
+							/* @__PURE__ */ w(n, {
+								variant: "outline",
+								size: "icon",
+								className: "h-8 w-8",
+								onClick: Se,
+								disabled: !Te,
+								children: /* @__PURE__ */ w(te, { className: "h-4 w-4" })
+							}),
+							!Ee && /* @__PURE__ */ T(n, {
+								variant: "ghost",
+								size: "sm",
+								className: "h-8 text-xs",
+								onClick: Ce,
+								children: [/* @__PURE__ */ w(_, { className: "h-3.5 w-3.5 mr-1" }), "Today"]
+							})
+						]
+					}), /* @__PURE__ */ T("div", {
+						className: "flex items-center gap-1 text-sm font-medium",
+						children: [/* @__PURE__ */ w(g, { className: "h-4 w-4 text-muted-foreground mr-1" }), /* @__PURE__ */ T("span", { children: [
+							k(J[0], L),
+							" - ",
+							k(J[6], L)
+						] })]
+					})]
+				}), /* @__PURE__ */ T("div", {
+					className: "flex flex-wrap items-center gap-3",
+					children: [
+						/* @__PURE__ */ w(ae, {
+							durations: s,
+							selected: pe,
+							onChange: ye,
+							disabled: R
+						}),
+						/* @__PURE__ */ w(F, {
+							timeZones: u,
+							selected: me,
+							onChange: be,
+							disabled: R
+						}),
+						y && /* @__PURE__ */ w(I, {
+							recurrence: he,
+							onChange: Q,
+							disabled: R
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ T("div", {
+				className: "p-3",
+				children: [/* @__PURE__ */ w("div", {
+					className: "hidden md:block overflow-x-auto",
+					children: /* @__PURE__ */ w("div", {
+						className: "grid grid-cols-7 gap-2 min-w-[700px]",
+						children: J.map((t, n) => {
+							let r = m(t), i = X.get(r) || [], a = j(t, $), o = t.getDay(), s = v ? v.daysOfWeek.includes(o) : !0;
+							return /* @__PURE__ */ T("div", {
+								className: e("flex flex-col rounded-lg border bg-card", a && "ring-2 ring-primary/50", !s && "opacity-60"),
+								children: [/* @__PURE__ */ T("div", {
+									className: e("px-2 py-2 text-center border-b", a && "bg-primary/10"),
+									children: [/* @__PURE__ */ w("div", {
+										className: "text-xs font-medium text-muted-foreground",
+										children: E[o]
+									}), /* @__PURE__ */ w("div", {
+										className: e("text-lg font-semibold", a && "text-primary"),
+										children: t.getDate()
+									})]
+								}), /* @__PURE__ */ w(p, {
+									className: "flex-1 max-h-[300px]",
+									children: /* @__PURE__ */ w("div", {
+										className: "p-1.5 space-y-1",
+										children: i.map((e) => /* @__PURE__ */ w(P, {
+											slot: e,
+											isSelected: q.includes(e.id),
+											onClick: () => Z(e.id),
+											hourFormat: N,
+											disabled: R,
+											isBusinessHour: M(e.startTime, v, o),
+											renderSlot: V
+										}, e.id))
+									})
+								})]
+							}, r);
+						})
+					})
+				}), /* @__PURE__ */ w("div", {
+					className: "md:hidden",
+					children: /* @__PURE__ */ w(p, {
+						className: "h-[400px]",
+						children: /* @__PURE__ */ w("div", {
+							className: "space-y-3",
+							children: J.map((n) => {
+								let r = m(n), i = X.get(r) || [], a = j(n, $), o = n.getDay(), s = v ? v.daysOfWeek.includes(o) : !0;
+								return /* @__PURE__ */ T("div", {
+									className: e("rounded-lg border bg-card", a && "ring-2 ring-primary/50", !s && "opacity-60"),
+									children: [/* @__PURE__ */ T("div", {
+										className: e("px-3 py-2 border-b flex items-center justify-between", a && "bg-primary/10"),
+										children: [/* @__PURE__ */ T("div", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ w("span", {
+												className: e("text-lg font-semibold", a && "text-primary"),
+												children: n.getDate()
+											}), /* @__PURE__ */ w("span", {
+												className: "text-sm text-muted-foreground",
+												children: D[o]
+											})]
+										}), a && /* @__PURE__ */ w(t, {
+											variant: "secondary",
+											className: "text-xs",
+											children: "Today"
+										})]
+									}), /* @__PURE__ */ w("div", {
+										className: "p-2",
+										children: /* @__PURE__ */ w("div", {
+											className: "flex gap-1.5 overflow-x-auto pb-1",
+											children: i.filter((e) => e.status !== "unavailable").map((e) => /* @__PURE__ */ w(P, {
+												slot: e,
+												isSelected: q.includes(e.id),
+												onClick: () => Z(e.id),
+												hourFormat: N,
+												disabled: R,
+												isBusinessHour: M(e.startTime, v, o),
+												renderSlot: V
+											}, e.id))
+										})
+									})]
+								}, r);
+							})
+						})
+					})
+				})]
+			}),
+			B && /* @__PURE__ */ w("div", {
+				className: "px-3 pb-3",
+				children: /* @__PURE__ */ w(oe, {
+					slots: ge,
+					onRemove: _e,
+					onClear: ve,
+					hourFormat: N,
+					locale: L
+				})
+			})
+		]
+	});
+}
+L.displayName = "WakaSchedulePicker";
+//#endregion
+export { L as default, N as useSchedulePicker };

package/dist/components/waka-scratch-card/index.cjs.js

@@ -0,0 +1,61 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`lucide-react`),i=require(`react/jsx-runtime`);var a={common:{gradient:`from-slate-400 to-slate-600`,glowColor:`hsl(var(--muted-foreground))`,borderColor:`border-slate-400`,bgColor:`bg-slate-100`,textColor:`text-slate-600`,label:`Common`,icon:(0,i.jsx)(r.Star,{className:`w-6 h-6`})},rare:{gradient:`from-blue-400 to-blue-600`,glowColor:`hsl(var(--info))`,borderColor:`border-blue-400`,bgColor:`bg-blue-100`,textColor:`text-blue-600`,label:`Rare`,icon:(0,i.jsx)(r.Gem,{className:`w-6 h-6`})},epic:{gradient:`from-purple-400 to-purple-600`,glowColor:`hsl(var(--chart-3))`,borderColor:`border-purple-400`,bgColor:`bg-purple-100`,textColor:`text-purple-600`,label:`Epic`,icon:(0,i.jsx)(r.Crown,{className:`w-6 h-6`})},legendary:{gradient:`from-amber-400 via-orange-500 to-red-500`,glowColor:`hsl(var(--warning))`,borderColor:`border-amber-400`,bgColor:`bg-amber-100`,textColor:`text-amber-600`,label:`Legendary`,icon:(0,i.jsx)(r.Trophy,{className:`w-6 h-6`})}};function o({initialPercentage:e=0,threshold:t=60,onReveal:r}={}){let[i,a]=n.useState(e),[o,s]=n.useState(!1),[c,l]=n.useState(!1),u=n.useCallback(()=>{s(!0),a(100),r?.()},[r]),d=n.useCallback(()=>{a(0),s(!1),l(!1)},[]),f=n.useCallback(()=>{l(!0)},[]),p=n.useCallback(()=>{l(!1)},[]);return n.useEffect(()=>{!o&&i>=t&&u()},[i,t,o,u]),{percentage:i,isRevealed:o,isScratching:c,setPercentage:a,reveal:u,reset:d,startScratching:f,stopScratching:p}}function s(e,t){return Array.from({length:e},(e,n)=>({id:n,x:50+(Math.random()-.5)*40,y:50+(Math.random()-.5)*40,size:6+Math.random()*8,color:t[Math.floor(Math.random()*t.length)],delay:Math.random()*.3,duration:.8+Math.random()*.6,angle:Math.random()*360}))}function c({prize:e,revealed:o,width:c,height:l,renderPrize:u}){let d=a[e.rarity],f=n.useMemo(()=>s(20,[d.glowColor,`#ffffff`,d.glowColor+`80`]),[d.glowColor]);return u?(0,i.jsx)(i.Fragment,{children:u(e,o)}):(0,i.jsxs)(`div`,{className:t.cn(`relative w-full h-full flex flex-col items-center justify-center p-4`,`bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900`,`transition-all duration-500`,o&&`animate-scratch-card-prize-reveal`),style:{width:c,height:l},children:[(0,i.jsx)(`div`,{className:`absolute inset-0 opacity-10`,children:(0,i.jsxs)(`svg`,{width:`100%`,height:`100%`,"aria-hidden":`true`,focusable:`false`,children:[(0,i.jsx)(`pattern`,{id:`prize-pattern`,width:`20`,height:`20`,patternUnits:`userSpaceOnUse`,children:(0,i.jsx)(`circle`,{cx:`10`,cy:`10`,r:`1`,fill:`currentColor`})}),(0,i.jsx)(`rect`,{width:`100%`,height:`100%`,fill:`url(#prize-pattern)`})]})}),o&&(0,i.jsx)(`div`,{className:`absolute inset-0 overflow-hidden pointer-events-none`,children:f.map(e=>(0,i.jsx)(`div`,{className:`absolute animate-scratch-card-confetti`,style:{left:`${e.x}%`,top:`${e.y}%`,width:e.size,height:e.size,backgroundColor:e.color,borderRadius:Math.random()>.5?`50%`:`2px`,animationDelay:`${e.delay}s`,animationDuration:`${e.duration}s`,"--confetti-angle":`${e.angle}deg`}},e.id))}),o&&(0,i.jsx)(`div`,{className:`absolute inset-0 animate-scratch-card-glow`,style:{background:`radial-gradient(circle at center, ${d.glowColor}40 0%, transparent 70%)`}}),(0,i.jsx)(`div`,{className:t.cn(`absolute top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider`,d.bgColor,d.textColor,`transition-all duration-500`,o?`opacity-100 translate-y-0`:`opacity-0 -translate-y-4`),children:d.label}),(0,i.jsxs)(`div`,{className:t.cn(`relative flex items-center justify-center rounded-xl mb-3 transition-all duration-700`,`bg-gradient-to-br`,d.gradient,o?`scale-100 opacity-100`:`scale-50 opacity-0`),style:{width:Math.min(c,l)*.35,height:Math.min(c,l)*.35,boxShadow:o?`0 0 30px 10px ${d.glowColor}40`:`none`},children:[e.imageUrl?(0,i.jsx)(`img`,{src:e.imageUrl,alt:e.name,className:`w-full h-full object-contain rounded-xl`}):e.icon?(0,i.jsx)(`div`,{className:`text-white w-1/2 h-1/2 flex items-center justify-center`,children:e.icon}):(0,i.jsx)(`div`,{className:`text-white`,children:d.icon}),o&&(0,i.jsx)(`div`,{className:`absolute inset-0 rounded-xl overflow-hidden`,children:(0,i.jsx)(`div`,{className:`absolute inset-0 animate-scratch-card-shine`})})]}),(0,i.jsx)(`h3`,{className:t.cn(`text-lg font-bold text-white text-center mb-1 transition-all duration-500`,o?`opacity-100 translate-y-0`:`opacity-0 translate-y-4`),style:{transitionDelay:o?`0.2s`:`0s`},children:e.name}),e.value&&(0,i.jsx)(`div`,{className:t.cn(`text-2xl font-bold transition-all duration-500`,d.textColor.replace(`text-`,`text-`).replace(`-600`,`-400`),o?`opacity-100 translate-y-0`:`opacity-0 translate-y-4`),style:{transitionDelay:o?`0.3s`:`0s`,color:d.glowColor},children:e.value}),e.description&&(0,i.jsx)(`p`,{className:t.cn(`text-sm text-gray-400 text-center mt-2 transition-all duration-500`,o?`opacity-100 translate-y-0`:`opacity-0 translate-y-4`),style:{transitionDelay:o?`0.4s`:`0s`},children:e.description}),!o&&(0,i.jsxs)(`div`,{className:`flex flex-col items-center gap-2 text-gray-500`,children:[(0,i.jsx)(r.Gift,{className:`w-12 h-12 animate-pulse`}),(0,i.jsx)(`span`,{className:`text-sm`,children:`Scratch to reveal!`})]})]})}var l=n.forwardRef(({prize:e,width:o=300,height:s=200,revealThreshold:l=.6,brushSize:u=40,overlayImage:d,overlayPattern:f=`gradient`,overlayColor:p=`#c0c0c0`,enableSound:m=!1,scratchSoundSrc:h,revealSoundSrc:g,onScratchStart:_,onScratch:v,onReveal:y,onReset:b,disabled:x=!1,showProgress:S=!1,renderPrize:C,className:w,...T},E)=>{let D=n.useRef(null),[O,k]=n.useState(!1),[A,j]=n.useState(0),[M,N]=n.useState(!1),[P,F]=n.useState(!1),[I,L]=n.useState(m),R=n.useRef(null),z=n.useRef(null),B=n.useRef(null),V=a[e.rarity],H=n.useCallback(()=>{let e=D.current;if(!e)return;let t=e.getContext(`2d`);if(t){switch(e.width=o,e.height=s,f){case`solid`:t.fillStyle=p,t.fillRect(0,0,o,s);break;case`stripes`:t.fillStyle=p,t.fillRect(0,0,o,s),t.strokeStyle=U(p,-20),t.lineWidth=20/2;for(let e=-s;e<o+s;e+=20)t.beginPath(),t.moveTo(e,0),t.lineTo(e+s,s),t.stroke();break;case`dots`:t.fillStyle=p,t.fillRect(0,0,o,s),t.fillStyle=U(p,-15);for(let e=15;e<o;e+=15)for(let n=15;n<s;n+=15)t.beginPath(),t.arc(e,n,4,0,Math.PI*2),t.fill();break;default:let e=t.createLinearGradient(0,0,o,s);e.addColorStop(0,U(p,10)),e.addColorStop(.5,p),e.addColorStop(1,U(p,-10)),t.fillStyle=e,t.fillRect(0,0,o,s),t.fillStyle=`rgba(255, 255, 255, 0.1)`,t.beginPath(),t.moveTo(0,0),t.lineTo(o*.3,0),t.lineTo(0,s*.3),t.closePath(),t.fill();break}if(d){let e=new Image;e.crossOrigin=`anonymous`,e.onload=()=>{t.drawImage(e,0,0,o,s)},e.src=d}t.fillStyle=`rgba(0, 0, 0, 0.3)`,t.font=`bold 16px system-ui, sans-serif`,t.textAlign=`center`,t.textBaseline=`middle`,t.fillText(`Scratch here!`,o/2,s/2),t.strokeStyle=`rgba(255, 255, 255, 0.3)`,t.lineWidth=2,t.setLineDash([5,5]),t.strokeRect(10,10,o-20,s-20)}},[o,s,p,f,d]);function U(e,t){let n=e.replace(`#`,``),r=Math.max(0,Math.min(255,parseInt(n.slice(0,2),16)+t)),i=Math.max(0,Math.min(255,parseInt(n.slice(2,4),16)+t)),a=Math.max(0,Math.min(255,parseInt(n.slice(4,6),16)+t));return`#${r.toString(16).padStart(2,`0`)}${i.toString(16).padStart(2,`0`)}${a.toString(16).padStart(2,`0`)}`}let W=n.useCallback(()=>{let e=D.current;if(!e)return 0;let t=e.getContext(`2d`);if(!t)return 0;let n=t.getImageData(0,0,e.width,e.height).data,r=0,i=n.length/4;for(let e=0;e<n.length;e+=4)n[e+3]<128&&r++;return r/i},[]),G=n.useCallback((t,n)=>{let r=D.current;if(!r||x||M)return;let i=r.getContext(`2d`);if(!i)return;let a=r.getBoundingClientRect(),o=r.width/a.width,s=r.height/a.height,c=(t-a.left)*o,d=(n-a.top)*s;i.globalCompositeOperation=`destination-out`,i.beginPath(),R.current?(i.moveTo(R.current.x,R.current.y),i.lineTo(c,d),i.lineWidth=u,i.lineCap=`round`,i.lineJoin=`round`,i.stroke()):(i.arc(c,d,u/2,0,Math.PI*2),i.fill()),R.current={x:c,y:d};let f=W();j(f),v?.(f*100),f>=l&&!M&&(N(!0),y?.(e),I&&g&&(B.current=new Audio(g),B.current.play().catch(()=>{})),setTimeout(()=>{i&&(i.globalCompositeOperation=`destination-out`,i.fillRect(0,0,r.width,r.height))},100))},[x,M,u,W,l,e,v,y,I,g]),K=n.useCallback(e=>{x||M||(k(!0),R.current=null,P||(F(!0),_?.()),I&&h&&(z.current=new Audio(h),z.current.loop=!0,z.current.volume=.5,z.current.play().catch(()=>{})),G(e.clientX,e.clientY),e.currentTarget.setPointerCapture(e.pointerId))},[x,M,P,I,h,_,G]),q=n.useCallback(e=>{O&&G(e.clientX,e.clientY)},[O,G]),J=n.useCallback(()=>{k(!1),R.current=null,z.current&&=(z.current.pause(),null)},[]),Y=n.useCallback(()=>{N(!1),j(0),F(!1),R.current=null,H(),b?.()},[H,b]);return n.useEffect(()=>{H()},[H]),n.useEffect(()=>()=>{z.current?.pause(),B.current?.pause()},[]),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`style`,{children:`
+          @keyframes scratch-card-prize-reveal {
+            0% { transform: scale(0.95); }
+            50% { transform: scale(1.02); }
+            100% { transform: scale(1); }
+          }
+          .animate-scratch-card-prize-reveal {
+            animation: scratch-card-prize-reveal 0.5s ease-out;
+          }
+
+          @keyframes scratch-card-confetti {
+            0% {
+              transform: translate(0, 0) rotate(0deg) scale(1);
+              opacity: 1;
+            }
+            100% {
+              transform: translate(
+                calc(cos(var(--confetti-angle)) * 100px),
+                calc(sin(var(--confetti-angle)) * 100px + 50px)
+              ) rotate(720deg) scale(0);
+              opacity: 0;
+            }
+          }
+          .animate-scratch-card-confetti {
+            animation: scratch-card-confetti 1s ease-out forwards;
+          }
+
+          @keyframes scratch-card-glow {
+            0%, 100% { opacity: 0.5; }
+            50% { opacity: 0.8; }
+          }
+          .animate-scratch-card-glow {
+            animation: scratch-card-glow 2s ease-in-out infinite;
+          }
+
+          @keyframes scratch-card-shine {
+            0% {
+              transform: translateX(-100%) rotate(45deg);
+            }
+            50%, 100% {
+              transform: translateX(200%) rotate(45deg);
+            }
+          }
+          .animate-scratch-card-shine {
+            background: linear-gradient(
+              90deg,
+              transparent 0%,
+              rgba(255, 255, 255, 0.4) 50%,
+              transparent 100%
+            );
+            animation: scratch-card-shine 2s ease-in-out infinite;
+          }
+
+          @keyframes scratch-card-pulse-border {
+            0%, 100% { box-shadow: 0 0 0 0 var(--glow-color); }
+            50% { box-shadow: 0 0 20px 5px var(--glow-color); }
+          }
+          .animate-scratch-card-pulse-border {
+            animation: scratch-card-pulse-border 2s ease-in-out infinite;
+          }
+        `}),(0,i.jsxs)(`div`,{ref:E,className:t.cn(`relative inline-block rounded-xl overflow-hidden shadow-xl select-none`,`transition-all duration-300`,x&&`opacity-50 cursor-not-allowed`,M&&`animate-scratch-card-pulse-border`,w),style:{width:o,height:s,"--glow-color":`${V.glowColor}60`},...T,children:[(0,i.jsx)(`div`,{className:`absolute inset-0`,children:(0,i.jsx)(c,{prize:e,revealed:M,width:o,height:s,renderPrize:C})}),(0,i.jsx)(`canvas`,{ref:D,className:t.cn(`absolute inset-0 touch-none`,x?`cursor-not-allowed`:`cursor-crosshair`,M&&`pointer-events-none opacity-0 transition-opacity duration-500`),style:{width:o,height:s},onPointerDown:K,onPointerMove:q,onPointerUp:J,onPointerLeave:J,onPointerCancel:J}),S&&!M&&P&&(0,i.jsxs)(`div`,{className:`absolute bottom-2 left-2 right-2`,children:[(0,i.jsx)(`div`,{className:`h-1 bg-black/30 rounded-full overflow-hidden`,children:(0,i.jsx)(`div`,{className:`h-full bg-white/80 rounded-full transition-all duration-100`,style:{width:`${Math.min(A/l*100,100)}%`}})}),(0,i.jsxs)(`p`,{className:`text-[10px] text-white/60 text-center mt-1`,children:[Math.round(A*100),`% scratched`]})]}),m&&(0,i.jsx)(`button`,{type:`button`,onClick:()=>L(!I),className:t.cn(`absolute top-2 right-2 p-1.5 rounded-full`,`bg-black/30 hover:bg-black/50 transition-colors`,`text-white/80 hover:text-white`,`z-10`),"aria-label":I?`Mute sound`:`Unmute sound`,children:I?(0,i.jsx)(r.Volume2,{className:`w-4 h-4`}):(0,i.jsx)(r.VolumeX,{className:`w-4 h-4`})}),M&&(0,i.jsx)(`div`,{className:`absolute inset-0 pointer-events-none`,children:[...Array(8)].map((e,t)=>(0,i.jsx)(r.Sparkles,{className:`absolute text-yellow-400 animate-ping`,style:{width:16+Math.random()*16,height:16+Math.random()*16,left:`${10+Math.random()*80}%`,top:`${10+Math.random()*80}%`,animationDelay:`${Math.random()*.5}s`,animationDuration:`${1+Math.random()*.5}s`}},t))}),M&&(0,i.jsx)(`button`,{type:`button`,onClick:Y,className:t.cn(`absolute bottom-3 right-3 px-3 py-1.5 rounded-full text-xs font-medium`,`bg-white/20 hover:bg-white/30 backdrop-blur-sm`,`text-white transition-all duration-200`,`hover:scale-105 active:scale-95`),children:`Reset`})]})]})});l.displayName=`WakaScratchCard`,exports.default=l,exports.useScratchCard=o;