@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-order-tracker/index.es.js

@@ -0,0 +1,538 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Box as n, Building as r, Calendar as i, CheckCircle as a, ChevronDown as o, ChevronUp as s, Clock as c, Copy as l, ExternalLink as u, Home as d, Map as f, MapPin as p, Navigation as m, Package as h, PackageCheck as g, RefreshCw as _, Truck as v } from "lucide-react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/waka-order-tracker/index.tsx
+var S = {
+	ordered: {
+		icon: n,
+		label: "Ordered",
+		color: "text-blue-600 dark:text-blue-400",
+		bgColor: "bg-blue-100 dark:bg-blue-900/30",
+		description: "Order placed successfully"
+	},
+	processing: {
+		icon: h,
+		label: "Processing",
+		color: "text-amber-600 dark:text-amber-400",
+		bgColor: "bg-amber-100 dark:bg-amber-900/30",
+		description: "Order is being prepared"
+	},
+	shipped: {
+		icon: g,
+		label: "Shipped",
+		color: "text-purple-600 dark:text-purple-400",
+		bgColor: "bg-purple-100 dark:bg-purple-900/30",
+		description: "Package has been shipped"
+	},
+	out_for_delivery: {
+		icon: v,
+		label: "Out for Delivery",
+		color: "text-orange-600 dark:text-orange-400",
+		bgColor: "bg-orange-100 dark:bg-orange-900/30",
+		description: "Package is out for delivery"
+	},
+	delivered: {
+		icon: a,
+		label: "Delivered",
+		color: "text-green-600 dark:text-green-400",
+		bgColor: "bg-green-100 dark:bg-green-900/30",
+		description: "Package has been delivered"
+	}
+}, C = [
+	"ordered",
+	"processing",
+	"shipped",
+	"out_for_delivery",
+	"delivered"
+];
+function w(e = {}) {
+	let { initialOrder: n, autoRefreshInterval: r, fetchOrderUpdates: i } = e, [a, o] = t.useState(n || null), [s, c] = t.useState(!1), [l, u] = t.useState(null), d = t.useCallback(async () => {
+		if (!(!a || !i)) {
+			c(!0), u(null);
+			try {
+				let e = await i(a.orderId);
+				o(e);
+			} catch (e) {
+				u(e instanceof Error ? e.message : "Failed to refresh order");
+			} finally {
+				c(!1);
+			}
+		}
+	}, [a, i]);
+	t.useEffect(() => {
+		if (!r || !i || !a) return;
+		let e = setInterval(d, r);
+		return () => clearInterval(e);
+	}, [
+		r,
+		i,
+		a,
+		d
+	]);
+	let f = t.useMemo(() => a ? Math.max(0, C.indexOf(a.status)) : 0, [a]), p = a?.status === "delivered";
+	return {
+		order: a,
+		setOrder: o,
+		isLoading: s,
+		error: l,
+		refresh: d,
+		currentStepIndex: f,
+		isDelivered: p,
+		progressPercentage: t.useMemo(() => Math.max(0, Math.min(100, f / (C.length - 1) * 100)), [f]),
+		timeUntilDelivery: t.useMemo(() => {
+			if (!a?.estimatedDelivery || p) return null;
+			let e = /* @__PURE__ */ new Date(), t = new Date(a.estimatedDelivery).getTime() - e.getTime();
+			if (t <= 0) return "Arriving today";
+			let n = Math.floor(t / (1e3 * 60 * 60 * 24)), r = Math.floor(t % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60));
+			return n > 0 ? `${n} day${n === 1 ? "" : "s"}` : `${r} hour${r === 1 ? "" : "s"}`;
+		}, [a?.estimatedDelivery, p])
+	};
+}
+function T(e) {
+	return new Date(e).toLocaleDateString(void 0, {
+		weekday: "short",
+		month: "short",
+		day: "numeric"
+	});
+}
+function E(e) {
+	return new Date(e).toLocaleString(void 0, {
+		month: "short",
+		day: "numeric",
+		hour: "numeric",
+		minute: "2-digit"
+	});
+}
+function D({ status: t, isActive: n, isCompleted: r, size: i }) {
+	let a = S[t], o = a.icon;
+	return /* @__PURE__ */ b("div", {
+		className: e("rounded-full flex items-center justify-center flex-shrink-0 border-2 transition-all duration-300", {
+			sm: "h-8 w-8",
+			md: "h-10 w-10",
+			lg: "h-12 w-12"
+		}[i], r || n ? e(a.bgColor, "border-transparent") : "bg-muted border-muted-foreground/20", n && "ring-4 ring-offset-2 ring-offset-background animate-pulse", n && t === "delivered" ? "ring-green-500/30" : n ? "ring-primary/30" : ""),
+		children: /* @__PURE__ */ b(o, { className: e({
+			sm: "h-4 w-4",
+			md: "h-5 w-5",
+			lg: "h-6 w-6"
+		}[i], "transition-colors duration-300", r || n ? a.color : "text-muted-foreground") })
+	});
+}
+function O({ isCompleted: t, orientation: n, size: r }) {
+	return /* @__PURE__ */ b("div", { className: e("transition-all duration-500", e(n === "horizontal" ? "flex-1 mx-1" : "min-h-[32px] mx-auto my-1", {
+		sm: n === "horizontal" ? "h-0.5" : "w-0.5",
+		md: n === "horizontal" ? "h-1" : "w-1",
+		lg: n === "horizontal" ? "h-1" : "w-1"
+	}[r]), t ? "bg-green-500" : "bg-muted") });
+}
+function k({ status: t, index: n, currentIndex: r, isLast: i, timestamp: a, orientation: o, size: s }) {
+	let l = S[t], u = n < r, d = n === r, f = {
+		sm: "text-xs",
+		md: "text-sm",
+		lg: "text-base"
+	}, p = {
+		sm: "text-[10px]",
+		md: "text-xs",
+		lg: "text-sm"
+	};
+	return o === "horizontal" ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ x("div", {
+		className: "flex flex-col items-center flex-1 min-w-[80px]",
+		children: [/* @__PURE__ */ b(D, {
+			status: t,
+			isActive: d,
+			isCompleted: u,
+			size: s
+		}), /* @__PURE__ */ x("div", {
+			className: "mt-2 text-center",
+			children: [/* @__PURE__ */ b("p", {
+				className: e("font-medium transition-colors duration-300", f[s], u || d ? "text-foreground" : "text-muted-foreground"),
+				children: l.label
+			}), a && (u || d) && /* @__PURE__ */ b("p", {
+				className: e("text-muted-foreground mt-0.5", p[s]),
+				children: T(a)
+			})]
+		})]
+	}), !i && /* @__PURE__ */ b(O, {
+		isCompleted: u,
+		orientation: "horizontal",
+		size: s
+	})] }) : /* @__PURE__ */ x("div", {
+		className: "flex gap-4",
+		children: [/* @__PURE__ */ x("div", {
+			className: "flex flex-col items-center",
+			children: [/* @__PURE__ */ b(D, {
+				status: t,
+				isActive: d,
+				isCompleted: u,
+				size: s
+			}), !i && /* @__PURE__ */ b(O, {
+				isCompleted: u,
+				orientation: "vertical",
+				size: s
+			})]
+		}), /* @__PURE__ */ x("div", {
+			className: e("flex-1 pb-6", !i && "min-h-[80px]"),
+			children: [
+				/* @__PURE__ */ b("p", {
+					className: e("font-medium transition-colors duration-300", f[s], u || d ? "text-foreground" : "text-muted-foreground"),
+					children: l.label
+				}),
+				/* @__PURE__ */ b("p", {
+					className: e("text-muted-foreground mt-0.5", p[s]),
+					children: l.description
+				}),
+				a && (u || d) && /* @__PURE__ */ x("p", {
+					className: e("text-muted-foreground mt-1", p[s]),
+					children: [/* @__PURE__ */ b(c, { className: "inline-block h-3 w-3 mr-1" }), E(a)]
+				})
+			]
+		})]
+	});
+}
+function A({ trackingNumber: n, carrier: r, onCopy: i, onTrackWithCarrier: o, size: s }) {
+	let [c, d] = t.useState(!1), f = async () => {
+		try {
+			await navigator.clipboard.writeText(n), d(!0), i?.(n), setTimeout(() => d(!1), 2e3);
+		} catch {
+			let e = document.createElement("textarea");
+			e.value = n, document.body.appendChild(e), e.select(), document.execCommand("copy"), document.body.removeChild(e), d(!0), i?.(n), setTimeout(() => d(!1), 2e3);
+		}
+	}, p = {
+		sm: "text-xs",
+		md: "text-sm",
+		lg: "text-base"
+	};
+	return /* @__PURE__ */ x("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ x("div", {
+			className: "flex items-center gap-2 flex-wrap",
+			children: [
+				/* @__PURE__ */ b("span", {
+					className: e("text-muted-foreground", p[s]),
+					children: "Tracking:"
+				}),
+				/* @__PURE__ */ b("code", {
+					className: e("px-2 py-1 bg-muted rounded font-mono", p[s]),
+					children: n
+				}),
+				/* @__PURE__ */ b("button", {
+					onClick: f,
+					className: e("p-1.5 rounded hover:bg-muted transition-colors", "text-muted-foreground hover:text-foreground"),
+					title: c ? "Copied!" : "Copy tracking number",
+					children: c ? /* @__PURE__ */ b(a, { className: "h-4 w-4 text-green-500" }) : /* @__PURE__ */ b(l, { className: "h-4 w-4" })
+				})
+			]
+		}), r && /* @__PURE__ */ x("div", {
+			className: "flex items-center gap-2 flex-wrap",
+			children: [
+				/* @__PURE__ */ b("span", {
+					className: e("text-muted-foreground", p[s]),
+					children: "Carrier:"
+				}),
+				/* @__PURE__ */ x("div", {
+					className: "flex items-center gap-2",
+					children: [r.logoUrl ? /* @__PURE__ */ b("img", {
+						src: r.logoUrl,
+						alt: r.name,
+						className: "h-5 w-auto"
+					}) : /* @__PURE__ */ b("span", {
+						className: e("font-medium", p[s]),
+						children: r.name
+					}), r.serviceType && /* @__PURE__ */ x("span", {
+						className: e("text-muted-foreground", p[s]),
+						children: [
+							"(",
+							r.serviceType,
+							")"
+						]
+					})]
+				}),
+				r.trackingUrl && /* @__PURE__ */ x("button", {
+					onClick: () => o?.(r.trackingUrl),
+					className: e("inline-flex items-center gap-1 px-2 py-1 rounded", "text-primary hover:bg-primary/10 transition-colors", p[s]),
+					children: [
+						/* @__PURE__ */ b(u, { className: "h-3 w-3" }),
+						"Track on ",
+						r.name
+					]
+				})
+			]
+		})]
+	});
+}
+function j({ address: t, size: n }) {
+	let i = {
+		sm: "text-xs",
+		md: "text-sm",
+		lg: "text-base"
+	}, a = t.type === "business" ? r : d;
+	return /* @__PURE__ */ x("div", {
+		className: e("flex gap-3 p-3 bg-muted/50 rounded-lg", i[n]),
+		children: [/* @__PURE__ */ b("div", {
+			className: "flex-shrink-0",
+			children: /* @__PURE__ */ b("div", {
+				className: "p-2 bg-background rounded-full",
+				children: /* @__PURE__ */ b(a, { className: "h-4 w-4 text-muted-foreground" })
+			})
+		}), /* @__PURE__ */ x("div", {
+			className: "flex-1",
+			children: [
+				/* @__PURE__ */ b("p", {
+					className: "font-medium",
+					children: t.name
+				}),
+				/* @__PURE__ */ b("p", {
+					className: "text-muted-foreground",
+					children: t.street1
+				}),
+				t.street2 && /* @__PURE__ */ b("p", {
+					className: "text-muted-foreground",
+					children: t.street2
+				}),
+				/* @__PURE__ */ x("p", {
+					className: "text-muted-foreground",
+					children: [
+						t.city,
+						", ",
+						t.state,
+						" ",
+						t.postalCode
+					]
+				}),
+				/* @__PURE__ */ b("p", {
+					className: "text-muted-foreground",
+					children: t.country
+				}),
+				t.phone && /* @__PURE__ */ b("p", {
+					className: "text-muted-foreground mt-1",
+					children: t.phone
+				})
+			]
+		})]
+	});
+}
+function M({ updates: n, size: r }) {
+	let [i, a] = t.useState(!1), c = [...n].sort((e, t) => new Date(t.timestamp).getTime() - new Date(e.timestamp).getTime()), l = i ? c : c.slice(0, 3), u = {
+		sm: "text-xs",
+		md: "text-sm",
+		lg: "text-base"
+	}, d = {
+		sm: "text-[10px]",
+		md: "text-xs",
+		lg: "text-sm"
+	};
+	return /* @__PURE__ */ x("div", {
+		className: "space-y-2",
+		children: [
+			/* @__PURE__ */ b("h4", {
+				className: e("font-medium", u[r]),
+				children: "Status Updates"
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "space-y-1",
+				children: l.map((t, n) => {
+					let i = S[t.status];
+					return /* @__PURE__ */ x("div", {
+						className: e("flex gap-3 p-2 rounded-lg transition-colors", n === 0 ? "bg-muted/50" : "hover:bg-muted/30"),
+						children: [/* @__PURE__ */ b("div", {
+							className: "flex-shrink-0 mt-0.5",
+							children: /* @__PURE__ */ b("div", { className: e("h-2 w-2 rounded-full", i.bgColor.replace("/30", "")) })
+						}), /* @__PURE__ */ x("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ b("p", {
+								className: e("font-medium", d[r]),
+								children: t.message
+							}), /* @__PURE__ */ x("div", {
+								className: e("flex items-center gap-2 text-muted-foreground mt-0.5", d[r]),
+								children: [/* @__PURE__ */ b("span", { children: E(t.timestamp) }), t.location && /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("span", { children: "-" }), /* @__PURE__ */ x("span", {
+									className: "inline-flex items-center gap-1",
+									children: [/* @__PURE__ */ b(p, { className: "h-3 w-3" }), t.location]
+								})] })]
+							})]
+						})]
+					}, t.id);
+				})
+			}),
+			c.length > 3 && /* @__PURE__ */ b("button", {
+				onClick: () => a(!i),
+				className: e("flex items-center gap-1 text-primary hover:text-primary/80 transition-colors", d[r]),
+				children: i ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(s, { className: "h-3 w-3" }), "Show less"] }) : /* @__PURE__ */ x(y, { children: [
+					/* @__PURE__ */ b(o, { className: "h-3 w-3" }),
+					"Show ",
+					c.length - 3,
+					" more update",
+					c.length - 3 == 1 ? "" : "s"
+				] })
+			})
+		]
+	});
+}
+function N({ mapUrl: t, address: n, size: r }) {
+	let i = {
+		sm: "text-xs",
+		md: "text-sm",
+		lg: "text-base"
+	};
+	return /* @__PURE__ */ x("div", {
+		className: "relative rounded-lg overflow-hidden border bg-muted",
+		children: [t ? /* @__PURE__ */ b("img", {
+			src: t,
+			alt: "Delivery location map",
+			className: "w-full h-32 object-cover"
+		}) : /* @__PURE__ */ x("div", {
+			className: "w-full h-32 flex flex-col items-center justify-center gap-2 text-muted-foreground",
+			children: [/* @__PURE__ */ b(f, { className: "h-8 w-8" }), /* @__PURE__ */ b("span", {
+				className: i[r],
+				children: "Map preview unavailable"
+			})]
+		}), /* @__PURE__ */ b("div", {
+			className: e("absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-background/90 to-transparent", i[r]),
+			children: /* @__PURE__ */ x("div", {
+				className: "flex items-center gap-1 text-foreground",
+				children: [/* @__PURE__ */ b(m, { className: "h-3 w-3" }), /* @__PURE__ */ x("span", {
+					className: "truncate",
+					children: [
+						n.city,
+						", ",
+						n.state
+					]
+				})]
+			})
+		})]
+	});
+}
+function P({ estimatedDelivery: t, deliveredAt: n, isDelivered: r, size: o }) {
+	let s = {
+		sm: "text-xs",
+		md: "text-sm",
+		lg: "text-base"
+	}, c = {
+		sm: "text-sm",
+		md: "text-base",
+		lg: "text-lg"
+	};
+	return r && n ? /* @__PURE__ */ x("div", {
+		className: "flex items-center gap-3 p-3 bg-green-100 dark:bg-green-900/30 rounded-lg",
+		children: [/* @__PURE__ */ b(a, { className: "h-5 w-5 text-green-600 dark:text-green-400 flex-shrink-0" }), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+			className: e("text-green-600 dark:text-green-400", s[o]),
+			children: "Delivered"
+		}), /* @__PURE__ */ b("p", {
+			className: e("font-semibold text-green-700 dark:text-green-300", c[o]),
+			children: E(n)
+		})] })]
+	}) : t ? /* @__PURE__ */ x("div", {
+		className: "flex items-center gap-3 p-3 bg-muted/50 rounded-lg",
+		children: [/* @__PURE__ */ b(i, { className: "h-5 w-5 text-muted-foreground flex-shrink-0" }), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+			className: e("text-muted-foreground", s[o]),
+			children: "Estimated Delivery"
+		}), /* @__PURE__ */ b("p", {
+			className: e("font-semibold", c[o]),
+			children: T(t)
+		})] })]
+	}) : null;
+}
+function F({ order: n, orientation: r = "horizontal", showMapPreview: i = !0, showHistory: a = !0, showAddress: o = !0, onCopyTracking: s, onTrackWithCarrier: c, onRefresh: l, isRefreshing: u = !1, size: d = "md", className: f }) {
+	let p = C.indexOf(n.status), m = n.status === "delivered", h = t.useMemo(() => {
+		let e = {
+			ordered: n.orderDate,
+			processing: void 0,
+			shipped: void 0,
+			out_for_delivery: void 0,
+			delivered: n.deliveredAt
+		};
+		return n.updates.forEach((t) => {
+			e[t.status] || (e[t.status] = t.timestamp);
+		}), e;
+	}, [n]), g = {
+		sm: "text-sm",
+		md: "text-base",
+		lg: "text-lg"
+	}, v = {
+		sm: "text-xs",
+		md: "text-sm",
+		lg: "text-base"
+	};
+	return /* @__PURE__ */ x("div", {
+		className: e("w-full", f),
+		children: [
+			/* @__PURE__ */ x("div", {
+				className: "flex items-start justify-between mb-6",
+				children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("h3", {
+					className: e("font-semibold", g[d]),
+					children: ["Order #", n.orderId]
+				}), /* @__PURE__ */ x("p", {
+					className: e("text-muted-foreground", v[d]),
+					children: ["Placed on ", T(n.orderDate)]
+				})] }), l && /* @__PURE__ */ b("button", {
+					onClick: l,
+					disabled: u,
+					className: e("p-2 rounded-lg hover:bg-muted transition-colors", "text-muted-foreground hover:text-foreground", u && "animate-spin"),
+					title: "Refresh order status",
+					children: /* @__PURE__ */ b(_, { className: "h-4 w-4" })
+				})]
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "mb-6",
+				children: /* @__PURE__ */ b(P, {
+					estimatedDelivery: n.estimatedDelivery,
+					deliveredAt: n.deliveredAt,
+					isDelivered: m,
+					size: d
+				})
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "mb-6",
+				children: /* @__PURE__ */ b("nav", {
+					"aria-label": "Order progress",
+					className: e(r === "horizontal" ? "flex items-start" : "flex flex-col"),
+					children: C.map((e, t) => /* @__PURE__ */ b(k, {
+						status: e,
+						index: t,
+						currentIndex: p,
+						isLast: t === C.length - 1,
+						timestamp: h[e],
+						orientation: r,
+						size: d
+					}, e))
+				})
+			}),
+			n.trackingNumber && /* @__PURE__ */ b("div", {
+				className: "mb-6 p-4 border rounded-lg",
+				children: /* @__PURE__ */ b(A, {
+					trackingNumber: n.trackingNumber,
+					carrier: n.carrier,
+					onCopy: s,
+					onTrackWithCarrier: c,
+					size: d
+				})
+			}),
+			i && /* @__PURE__ */ b("div", {
+				className: "mb-6",
+				children: /* @__PURE__ */ b(N, {
+					mapUrl: n.mapPreviewUrl,
+					address: n.deliveryAddress,
+					size: d
+				})
+			}),
+			o && /* @__PURE__ */ x("div", {
+				className: "mb-6",
+				children: [/* @__PURE__ */ b("h4", {
+					className: e("font-medium mb-2", v[d]),
+					children: "Delivery Address"
+				}), /* @__PURE__ */ b(j, {
+					address: n.deliveryAddress,
+					size: d
+				})]
+			}),
+			a && n.updates.length > 0 && /* @__PURE__ */ b("div", { children: /* @__PURE__ */ b(M, {
+				updates: n.updates,
+				size: d
+			}) })
+		]
+	});
+}
+//#endregion
+export { F as WakaOrderTracker, F as default, w as useOrderTracker };

package/dist/components/waka-outstream-video/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js"),n=require("../waka-ad-provider/index.cjs.js"),r=require("../waka-sponsored-badge/index.cjs.js");let i=require("react");i=e.__toESM(i);let a=require("lucide-react"),o=require("react/jsx-runtime");function s({slotId:e,collapseOnEnd:s=!0,collapseDuration:c=300,muted:l=!0,showClose:u=!0,closeAfter:d=0,visibilityThreshold:f=.5,className:p,onComplete:m,onClose:h}){let g=(0,i.useRef)(null),_=(0,i.useRef)(null),{config:v,isReady:y,hasConsent:b,getCustomAd:x,trackEvent:S}=n.useAdContext(),{isVisible:C}=n.useAdVisibility(g,f),[w,T]=(0,i.useState)(`loading`),[E,D]=(0,i.useState)(null),[O,k]=(0,i.useState)(l),[A,j]=(0,i.useState)(!1),[M,N]=(0,i.useState)(`auto`),[P,F]=(0,i.useState)(!1);(0,i.useEffect)(()=>{!y||b===!1||(async()=>{try{let t=await x(e);t?.videoUrl?(D(t),T(`loaded`),S({type:`loaded`,slotId:e,timestamp:new Date})):T(`collapsed`)}catch{T(`collapsed`)}})()},[y,b,e,x,S]),(0,i.useEffect)(()=>{!_.current||w!==`loaded`||(C?_.current.play().then(()=>{P||(F(!0),S({type:`impression`,slotId:e,timestamp:new Date}),E?.impressionUrl&&fetch(E.impressionUrl,{mode:`no-cors`}).catch(()=>{}))}).catch(()=>{}):_.current.pause())},[C,w,P,e,E,S]),(0,i.useEffect)(()=>{if(d===0||!P)return;let e=setTimeout(()=>{I()},d*1e3);return()=>clearTimeout(e)},[d,P]),(0,i.useEffect)(()=>{w===`loaded`&&g.current&&N(g.current.offsetHeight)},[w]);let I=()=>{s?(j(!0),N(0),setTimeout(()=>{T(`collapsed`),h?.()},c)):(T(`collapsed`),h?.())},L=()=>{S({type:`viewable`,slotId:e,timestamp:new Date,data:{completed:!0}}),m?.(),I()},R=()=>{_.current&&(_.current.muted=!O,k(!O))},z=()=>{E&&(S({type:`click`,slotId:e,timestamp:new Date}),E.clickUrl&&fetch(E.clickUrl,{mode:`no-cors`}).catch(()=>{}),E.targetUrl&&window.open(E.targetUrl,`_blank`,`noopener,noreferrer`))};return w===`collapsed`||w===`error`?null:w===`loading`?(0,o.jsx)(`div`,{ref:g,className:t.cn(`w-full aspect-video bg-muted animate-pulse rounded-lg`,p)}):(0,o.jsx)(`div`,{ref:g,className:t.cn(`relative w-full overflow-hidden rounded-lg bg-black`,A&&`transition-all`,p),style:{height:M,transitionDuration:`${c}ms`},children:(0,o.jsxs)(`div`,{className:`relative aspect-video`,children:[(0,o.jsx)(`video`,{ref:_,src:E?.videoUrl,muted:O,playsInline:!0,loop:!1,onClick:z,onEnded:L,className:`w-full h-full object-contain cursor-pointer`}),(0,o.jsxs)(`div`,{className:`absolute inset-0 pointer-events-none`,children:[(0,o.jsxs)(`div`,{className:`absolute top-0 left-0 right-0 p-3 flex items-center justify-between bg-gradient-to-b from-black/50 to-transparent pointer-events-auto`,children:[(0,o.jsx)(r.WakaSponsoredBadge,{variant:`dark`,size:`sm`,sponsor:E?.sponsor}),(0,o.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,o.jsx)(`button`,{type:`button`,onClick:R,className:`p-1.5 rounded-full bg-black/50 hover:bg-black/70 transition-colors`,children:O?(0,o.jsx)(a.VolumeX,{className:`h-4 w-4 text-white`}):(0,o.jsx)(a.Volume2,{className:`h-4 w-4 text-white`})}),u&&(0,o.jsx)(`button`,{type:`button`,onClick:I,className:`p-1.5 rounded-full bg-black/50 hover:bg-black/70 transition-colors`,children:(0,o.jsx)(a.X,{className:`h-4 w-4 text-white`})})]})]}),E?.cta&&(0,o.jsx)(`div`,{className:`absolute bottom-3 left-3 right-3 pointer-events-auto`,children:(0,o.jsx)(`button`,{type:`button`,onClick:z,className:`w-full px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors text-center`,children:E.cta})})]})]})})}exports.WakaOutstreamVideo=s,exports.default=s;

package/dist/components/waka-outstream-video/index.d.ts

@@ -20,5 +20,5 @@ export interface WakaOutstreamVideoProps {
     /** Callback when closed */
     onClose?: () => void;
 }
-export declare function WakaOutstreamVideo({ slotId, collapseOnEnd, collapseDuration, muted, showClose, closeAfter, visibilityThreshold, className, onComplete, onClose, }: WakaOutstreamVideoProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaOutstreamVideo({ slotId, collapseOnEnd, collapseDuration, muted, showClose, closeAfter, visibilityThreshold, className, onComplete, onClose, }: WakaOutstreamVideoProps): import("react/jsx-runtime").JSX.Element | null;
 export default WakaOutstreamVideo;

package/dist/components/waka-outstream-video/index.es.js

@@ -0,0 +1,132 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { useAdContext as t, useAdVisibility as n } from "../waka-ad-provider/index.es.js";
+import { WakaSponsoredBadge as r } from "../waka-sponsored-badge/index.es.js";
+import { useEffect as i, useRef as a, useState as o } from "react";
+import { Volume2 as s, VolumeX as c, X as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/waka-outstream-video/index.tsx
+function f({ slotId: f, collapseOnEnd: p = !0, collapseDuration: m = 300, muted: h = !0, showClose: g = !0, closeAfter: _ = 0, visibilityThreshold: v = .5, className: y, onComplete: b, onClose: x }) {
+	let S = a(null), C = a(null), { config: w, isReady: T, hasConsent: E, getCustomAd: D, trackEvent: O } = t(), { isVisible: k } = n(S, v), [A, j] = o("loading"), [M, N] = o(null), [P, F] = o(h), [I, L] = o(!1), [R, z] = o("auto"), [B, V] = o(!1);
+	i(() => {
+		!T || E === !1 || (async () => {
+			try {
+				let e = await D(f);
+				e?.videoUrl ? (N(e), j("loaded"), O({
+					type: "loaded",
+					slotId: f,
+					timestamp: /* @__PURE__ */ new Date()
+				})) : j("collapsed");
+			} catch {
+				j("collapsed");
+			}
+		})();
+	}, [
+		T,
+		E,
+		f,
+		D,
+		O
+	]), i(() => {
+		!C.current || A !== "loaded" || (k ? C.current.play().then(() => {
+			B || (V(!0), O({
+				type: "impression",
+				slotId: f,
+				timestamp: /* @__PURE__ */ new Date()
+			}), M?.impressionUrl && fetch(M.impressionUrl, { mode: "no-cors" }).catch(() => {}));
+		}).catch(() => {}) : C.current.pause());
+	}, [
+		k,
+		A,
+		B,
+		f,
+		M,
+		O
+	]), i(() => {
+		if (_ === 0 || !B) return;
+		let e = setTimeout(() => {
+			H();
+		}, _ * 1e3);
+		return () => clearTimeout(e);
+	}, [_, B]), i(() => {
+		A === "loaded" && S.current && z(S.current.offsetHeight);
+	}, [A]);
+	let H = () => {
+		p ? (L(!0), z(0), setTimeout(() => {
+			j("collapsed"), x?.();
+		}, m)) : (j("collapsed"), x?.());
+	}, U = () => {
+		O({
+			type: "viewable",
+			slotId: f,
+			timestamp: /* @__PURE__ */ new Date(),
+			data: { completed: !0 }
+		}), b?.(), H();
+	}, W = () => {
+		C.current && (C.current.muted = !P, F(!P));
+	}, G = () => {
+		M && (O({
+			type: "click",
+			slotId: f,
+			timestamp: /* @__PURE__ */ new Date()
+		}), M.clickUrl && fetch(M.clickUrl, { mode: "no-cors" }).catch(() => {}), M.targetUrl && window.open(M.targetUrl, "_blank", "noopener,noreferrer"));
+	};
+	return A === "collapsed" || A === "error" ? null : A === "loading" ? /* @__PURE__ */ u("div", {
+		ref: S,
+		className: e("w-full aspect-video bg-muted animate-pulse rounded-lg", y)
+	}) : /* @__PURE__ */ u("div", {
+		ref: S,
+		className: e("relative w-full overflow-hidden rounded-lg bg-black", I && "transition-all", y),
+		style: {
+			height: R,
+			transitionDuration: `${m}ms`
+		},
+		children: /* @__PURE__ */ d("div", {
+			className: "relative aspect-video",
+			children: [/* @__PURE__ */ u("video", {
+				ref: C,
+				src: M?.videoUrl,
+				muted: P,
+				playsInline: !0,
+				loop: !1,
+				onClick: G,
+				onEnded: U,
+				className: "w-full h-full object-contain cursor-pointer"
+			}), /* @__PURE__ */ d("div", {
+				className: "absolute inset-0 pointer-events-none",
+				children: [/* @__PURE__ */ d("div", {
+					className: "absolute top-0 left-0 right-0 p-3 flex items-center justify-between bg-gradient-to-b from-black/50 to-transparent pointer-events-auto",
+					children: [/* @__PURE__ */ u(r, {
+						variant: "dark",
+						size: "sm",
+						sponsor: M?.sponsor
+					}), /* @__PURE__ */ d("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ u("button", {
+							type: "button",
+							onClick: W,
+							className: "p-1.5 rounded-full bg-black/50 hover:bg-black/70 transition-colors",
+							children: u(P ? c : s, { className: "h-4 w-4 text-white" })
+						}), g && /* @__PURE__ */ u("button", {
+							type: "button",
+							onClick: H,
+							className: "p-1.5 rounded-full bg-black/50 hover:bg-black/70 transition-colors",
+							children: /* @__PURE__ */ u(l, { className: "h-4 w-4 text-white" })
+						})]
+					})]
+				}), M?.cta && /* @__PURE__ */ u("div", {
+					className: "absolute bottom-3 left-3 right-3 pointer-events-auto",
+					children: /* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: G,
+						className: "w-full px-4 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors text-center",
+						children: M.cta
+					})
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { f as WakaOutstreamVideo, f as default };