@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-network-topology/index.es.js

@@ -0,0 +1,550 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Cloud as n, Database as r, Maximize2 as i, Monitor as a, Move as o, Router as s, Scale as c, Server as l, Shield as u, ZoomIn as d, ZoomOut as f } from "lucide-react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/waka-network-topology/index.tsx
+var g = {
+	server: l,
+	database: r,
+	loadbalancer: c,
+	firewall: u,
+	cloud: n,
+	client: a,
+	router: s
+}, _ = {
+	healthy: "#22c55e",
+	warning: "#eab308",
+	error: "#ef4444",
+	offline: "#6b7280"
+}, v = {
+	low: {
+		color: "#22c55e",
+		width: 2,
+		dashOffset: 20
+	},
+	medium: {
+		color: "#eab308",
+		width: 3,
+		dashOffset: 15
+	},
+	high: {
+		color: "#ef4444",
+		width: 4,
+		dashOffset: 10
+	}
+}, y = {
+	active: "#3b82f6",
+	degraded: "#eab308",
+	down: "#ef4444"
+}, b = ({ node: t, isSelected: n, onClick: r, scale: i }) => {
+	let a = g[t.type], o = _[t.status];
+	return /* @__PURE__ */ h("g", {
+		transform: `translate(${t.x}, ${t.y})`,
+		onClick: r,
+		style: { cursor: "pointer" },
+		role: "button",
+		"aria-label": `${t.label} - ${t.type} - ${t.status}`,
+		tabIndex: 0,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && r();
+		},
+		children: [
+			n && /* @__PURE__ */ m("circle", {
+				r: 32,
+				fill: "none",
+				stroke: "#3b82f6",
+				strokeWidth: 2,
+				strokeDasharray: "4 2",
+				className: "animate-spin",
+				style: { animationDuration: "8s" }
+			}),
+			/* @__PURE__ */ m("circle", {
+				r: 48 / 2,
+				fill: "white",
+				stroke: n ? "#3b82f6" : "#e5e7eb",
+				strokeWidth: n ? 2 : 1,
+				className: "drop-shadow-md"
+			}),
+			/* @__PURE__ */ m("circle", {
+				cx: 48 / 2 - 8,
+				cy: -16,
+				r: 6,
+				fill: o,
+				stroke: "white",
+				strokeWidth: 2,
+				children: t.status === "healthy" && /* @__PURE__ */ m("animate", {
+					attributeName: "opacity",
+					values: "1;0.5;1",
+					dur: "2s",
+					repeatCount: "indefinite"
+				})
+			}),
+			/* @__PURE__ */ m("foreignObject", {
+				x: -16,
+				y: -16,
+				width: 32,
+				height: 32,
+				style: { overflow: "visible" },
+				children: /* @__PURE__ */ m("div", {
+					className: "flex h-full w-full items-center justify-center",
+					children: /* @__PURE__ */ m(a, {
+						size: 24,
+						className: e("text-gray-600", t.status === "error" && "text-red-500", t.status === "warning" && "text-yellow-500", t.status === "offline" && "text-gray-400")
+					})
+				})
+			}),
+			/* @__PURE__ */ m("text", {
+				y: 40,
+				textAnchor: "middle",
+				className: "fill-gray-700 text-xs font-medium",
+				style: { fontSize: `${12 / i}px` },
+				children: t.label
+			}),
+			t.metrics && /* @__PURE__ */ h("g", {
+				className: "opacity-0 transition-opacity hover:opacity-100",
+				children: [
+					/* @__PURE__ */ m("rect", {
+						x: -60,
+						y: -98,
+						width: 120,
+						height: 45,
+						rx: 4,
+						fill: "rgba(0,0,0,0.8)"
+					}),
+					/* @__PURE__ */ m("text", {
+						x: 0,
+						y: -83,
+						textAnchor: "middle",
+						className: "fill-white text-xs",
+						style: { fontSize: "10px" },
+						children: t.metrics.cpu !== void 0 && `CPU: ${t.metrics.cpu}%`
+					}),
+					/* @__PURE__ */ m("text", {
+						x: 0,
+						y: -70,
+						textAnchor: "middle",
+						className: "fill-white text-xs",
+						style: { fontSize: "10px" },
+						children: t.metrics.memory !== void 0 && `Mem: ${t.metrics.memory}%`
+					}),
+					/* @__PURE__ */ m("text", {
+						x: 0,
+						y: -57,
+						textAnchor: "middle",
+						className: "fill-white text-xs",
+						style: { fontSize: "10px" },
+						children: t.metrics.connections !== void 0 && `Conn: ${t.metrics.connections}`
+					})
+				]
+			})
+		]
+	});
+}, x = ({ edge: t, sourceNode: n, targetNode: r, showLatency: i, showTraffic: a, animated: o, isHighlighted: s, onClick: c }) => {
+	let l = t.traffic || "low", u = v[l], d = t.status ? y[t.status] : u.color, f = r.x - n.x, g = r.y - n.y, _ = Math.sqrt(f * f + g * g), b = f / _ * 24, x = g / _ * 24, S = n.x + b, C = n.y + x, w = r.x - b, T = r.y - x, E = (S + w) / 2, D = (C + T) / 2, O = 180 / Math.PI * Math.atan2(g, f);
+	return (O > 90 || O < -90) && O + 180, `${t.source}${t.target}`, /* @__PURE__ */ h("g", {
+		onClick: c,
+		style: { cursor: "pointer" },
+		role: "button",
+		"aria-label": `Connection from ${n.label} to ${r.label}${t.latency ? `, latency ${t.latency}ms` : ""}`,
+		children: [
+			/* @__PURE__ */ m("line", {
+				x1: S,
+				y1: C,
+				x2: w,
+				y2: T,
+				stroke: "transparent",
+				strokeWidth: 20
+			}),
+			/* @__PURE__ */ m("line", {
+				x1: S,
+				y1: C,
+				x2: w,
+				y2: T,
+				stroke: s ? "#3b82f6" : d,
+				strokeWidth: a ? u.width : 2,
+				strokeOpacity: t.status === "down" ? .3 : s ? 1 : .6,
+				strokeDasharray: t.status === "down" ? "5 5" : void 0
+			}),
+			o && a && t.status !== "down" && /* @__PURE__ */ m("line", {
+				x1: S,
+				y1: C,
+				x2: w,
+				y2: T,
+				stroke: s ? "#60a5fa" : d,
+				strokeWidth: u.width,
+				strokeDasharray: "8 12",
+				strokeLinecap: "round",
+				children: /* @__PURE__ */ m("animate", {
+					attributeName: "stroke-dashoffset",
+					from: "0",
+					to: -u.dashOffset * 2,
+					dur: `${u.dashOffset / 10}s`,
+					repeatCount: "indefinite"
+				})
+			}),
+			o && a && l === "high" && t.status !== "down" && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("circle", {
+				r: 3,
+				fill: d,
+				children: /* @__PURE__ */ m("animateMotion", {
+					dur: "1s",
+					repeatCount: "indefinite",
+					path: `M${S},${C} L${w},${T}`
+				})
+			}), /* @__PURE__ */ m("circle", {
+				r: 3,
+				fill: d,
+				children: /* @__PURE__ */ m("animateMotion", {
+					dur: "1s",
+					repeatCount: "indefinite",
+					begin: "0.5s",
+					path: `M${S},${C} L${w},${T}`
+				})
+			})] }),
+			i && t.latency !== void 0 && /* @__PURE__ */ h("g", {
+				transform: `translate(${E}, ${D})`,
+				children: [/* @__PURE__ */ m("rect", {
+					x: -20,
+					y: -10,
+					width: 40,
+					height: 20,
+					rx: 4,
+					fill: "white",
+					stroke: "#e5e7eb",
+					strokeWidth: 1
+				}), /* @__PURE__ */ h("text", {
+					textAnchor: "middle",
+					dominantBaseline: "middle",
+					className: e("text-xs font-medium", t.latency > 100 ? "fill-red-500" : t.latency > 50 ? "fill-yellow-500" : "fill-green-500"),
+					style: { fontSize: "10px" },
+					children: [t.latency, "ms"]
+				})]
+			})
+		]
+	});
+}, S = ({ nodes: e, edges: t, viewBox: n, bounds: r, onViewChange: i }) => {
+	let a = r.maxX - r.minX + 20, o = r.maxY - r.minY + 20, s = Math.min(150 / a, 150 / o);
+	return /* @__PURE__ */ m("div", {
+		className: "absolute bottom-4 right-4 rounded-lg border border-gray-200 bg-white p-2 shadow-lg",
+		children: /* @__PURE__ */ h("svg", {
+			width: 150,
+			height: 150,
+			onClick: (e) => {
+				let t = e.currentTarget.getBoundingClientRect(), a = e.clientX - t.left, o = e.clientY - t.top, c = a / s + r.minX - 10, l = o / s + r.minY - 10;
+				i(c - n.width / 2, l - n.height / 2);
+			},
+			style: { cursor: "crosshair" },
+			"aria-label": "Network mini-map",
+			children: [
+				/* @__PURE__ */ m("rect", {
+					width: 150,
+					height: 150,
+					fill: "#f9fafb",
+					rx: 4
+				}),
+				t.map((t) => {
+					let n = e.find((e) => e.id === t.source), i = e.find((e) => e.id === t.target);
+					return !n || !i ? null : /* @__PURE__ */ m("line", {
+						x1: (n.x - r.minX + 10) * s,
+						y1: (n.y - r.minY + 10) * s,
+						x2: (i.x - r.minX + 10) * s,
+						y2: (i.y - r.minY + 10) * s,
+						stroke: "#cbd5e1",
+						strokeWidth: 1
+					}, `mini-${t.source}-${t.target}`);
+				}),
+				e.map((e) => /* @__PURE__ */ m("circle", {
+					cx: (e.x - r.minX + 10) * s,
+					cy: (e.y - r.minY + 10) * s,
+					r: 4,
+					fill: _[e.status]
+				}, `mini-${e.id}`)),
+				/* @__PURE__ */ m("rect", {
+					x: (n.x - r.minX + 10) * s,
+					y: (n.y - r.minY + 10) * s,
+					width: n.width * s,
+					height: n.height * s,
+					fill: "rgba(59, 130, 246, 0.1)",
+					stroke: "#3b82f6",
+					strokeWidth: 1,
+					rx: 2
+				})
+			]
+		})
+	});
+}, C = ({ nodes: n, edges: r, onNodeClick: a, onEdgeClick: s, selectedNode: c, showLatency: l = !0, showTraffic: u = !0, animated: g = !0, className: y }) => {
+	let C = t.useRef(null), w = t.useRef(null), [T, E] = t.useState({
+		x: 0,
+		y: 0,
+		width: 800,
+		height: 600
+	}), [D, O] = t.useState(1), [k, A] = t.useState(!1), [j, M] = t.useState({
+		x: 0,
+		y: 0
+	}), [N, P] = t.useState(/* @__PURE__ */ new Set()), F = t.useMemo(() => {
+		if (n.length === 0) return {
+			minX: 0,
+			minY: 0,
+			maxX: 800,
+			maxY: 600
+		};
+		let e = n.map((e) => e.x), t = n.map((e) => e.y);
+		return {
+			minX: Math.min(...e) - 100,
+			minY: Math.min(...t) - 100,
+			maxX: Math.max(...e) + 100,
+			maxY: Math.max(...t) + 100
+		};
+	}, [n]);
+	t.useEffect(() => {
+		if (w.current) {
+			let { width: e, height: t } = w.current.getBoundingClientRect();
+			E({
+				x: F.minX,
+				y: F.minY,
+				width: e || 800,
+				height: t || 600
+			});
+		}
+	}, [F]), t.useEffect(() => {
+		if (c) {
+			let e = /* @__PURE__ */ new Set();
+			r.forEach((t) => {
+				(t.source === c || t.target === c) && e.add(`${t.source}-${t.target}`);
+			}), P(e);
+		} else P(/* @__PURE__ */ new Set());
+	}, [c, r]);
+	let I = (e) => {
+		let t = Math.max(.25, Math.min(4, D + e)), n = D / t;
+		E((e) => ({
+			x: e.x + e.width * (1 - n) / 2,
+			y: e.y + e.height * (1 - n) / 2,
+			width: e.width * n,
+			height: e.height * n
+		})), O(t);
+	}, L = (e) => {
+		e.preventDefault();
+		let t = e.deltaY > 0 ? -.1 : .1;
+		I(t);
+	}, R = (e) => {
+		e.button === 0 && (A(!0), M({
+			x: e.clientX,
+			y: e.clientY
+		}));
+	}, z = (e) => {
+		if (k) {
+			let t = (e.clientX - j.x) / D, n = (e.clientY - j.y) / D;
+			E((e) => ({
+				...e,
+				x: e.x - t,
+				y: e.y - n
+			})), M({
+				x: e.clientX,
+				y: e.clientY
+			});
+		}
+	}, B = () => {
+		A(!1);
+	};
+	return /* @__PURE__ */ h("div", {
+		ref: w,
+		className: e("relative h-full w-full overflow-hidden rounded-lg border border-gray-200 bg-gray-50", y),
+		children: [
+			/* @__PURE__ */ h("div", {
+				className: "absolute left-4 top-4 z-10 flex flex-col gap-2",
+				children: [
+					/* @__PURE__ */ m("button", {
+						onClick: () => I(.2),
+						className: "rounded-lg border border-gray-200 bg-white p-2 shadow-sm transition-colors hover:bg-gray-50",
+						"aria-label": "Zoom in",
+						children: /* @__PURE__ */ m(d, {
+							size: 18,
+							className: "text-gray-600"
+						})
+					}),
+					/* @__PURE__ */ m("button", {
+						onClick: () => I(-.2),
+						className: "rounded-lg border border-gray-200 bg-white p-2 shadow-sm transition-colors hover:bg-gray-50",
+						"aria-label": "Zoom out",
+						children: /* @__PURE__ */ m(f, {
+							size: 18,
+							className: "text-gray-600"
+						})
+					}),
+					/* @__PURE__ */ m("button", {
+						onClick: () => {
+							if (w.current) {
+								let { width: e, height: t } = w.current.getBoundingClientRect(), n = F.maxX - F.minX, r = F.maxY - F.minY, i = Math.min(e / n, t / r);
+								E({
+									x: F.minX - (e / i - n) / 2,
+									y: F.minY - (t / i - r) / 2,
+									width: e / i,
+									height: t / i
+								}), O(i);
+							}
+						},
+						className: "rounded-lg border border-gray-200 bg-white p-2 shadow-sm transition-colors hover:bg-gray-50",
+						"aria-label": "Fit to view",
+						children: /* @__PURE__ */ m(i, {
+							size: 18,
+							className: "text-gray-600"
+						})
+					}),
+					/* @__PURE__ */ h("div", {
+						className: "mt-2 rounded-lg border border-gray-200 bg-white px-2 py-1 text-center text-xs text-gray-500 shadow-sm",
+						children: [Math.round(D * 100), "%"]
+					})
+				]
+			}),
+			k && /* @__PURE__ */ h("div", {
+				className: "absolute left-1/2 top-4 z-10 -translate-x-1/2 rounded-full bg-blue-500 px-3 py-1 text-xs text-white shadow-md",
+				children: [/* @__PURE__ */ m(o, {
+					size: 12,
+					className: "mr-1 inline"
+				}), "Panning"]
+			}),
+			/* @__PURE__ */ h("svg", {
+				ref: C,
+				className: e("h-full w-full", k ? "cursor-grabbing" : "cursor-grab"),
+				viewBox: `${T.x} ${T.y} ${T.width} ${T.height}`,
+				onWheel: L,
+				onMouseDown: R,
+				onMouseMove: z,
+				onMouseUp: B,
+				onMouseLeave: B,
+				"aria-label": "Network topology diagram",
+				role: "img",
+				children: [
+					/* @__PURE__ */ h("defs", { children: [
+						/* @__PURE__ */ m("pattern", {
+							id: "grid",
+							width: 50,
+							height: 50,
+							patternUnits: "userSpaceOnUse",
+							children: /* @__PURE__ */ m("path", {
+								d: "M 50 0 L 0 0 0 50",
+								fill: "none",
+								stroke: "#e5e7eb",
+								strokeWidth: .5
+							})
+						}),
+						/* @__PURE__ */ m("marker", {
+							id: "arrowhead",
+							markerWidth: 10,
+							markerHeight: 7,
+							refX: 9,
+							refY: 3.5,
+							orient: "auto",
+							children: /* @__PURE__ */ m("polygon", {
+								points: "0 0, 10 3.5, 0 7",
+								fill: "#94a3b8"
+							})
+						}),
+						/* @__PURE__ */ h("filter", {
+							id: "glow",
+							x: "-50%",
+							y: "-50%",
+							width: "200%",
+							height: "200%",
+							children: [/* @__PURE__ */ m("feGaussianBlur", {
+								stdDeviation: "3",
+								result: "coloredBlur"
+							}), /* @__PURE__ */ h("feMerge", { children: [/* @__PURE__ */ m("feMergeNode", { in: "coloredBlur" }), /* @__PURE__ */ m("feMergeNode", { in: "SourceGraphic" })] })]
+						})
+					] }),
+					/* @__PURE__ */ m("rect", {
+						x: F.minX - 1e3,
+						y: F.minY - 1e3,
+						width: F.maxX - F.minX + 2e3,
+						height: F.maxY - F.minY + 2e3,
+						fill: "url(#grid)"
+					}),
+					/* @__PURE__ */ m("g", {
+						className: "edges",
+						children: r.map((e) => {
+							let t = n.find((t) => t.id === e.source), r = n.find((t) => t.id === e.target);
+							if (!t || !r) return null;
+							let i = `${e.source}-${e.target}`;
+							return /* @__PURE__ */ m(x, {
+								edge: e,
+								sourceNode: t,
+								targetNode: r,
+								showLatency: l,
+								showTraffic: u,
+								animated: g,
+								isHighlighted: N.has(i),
+								onClick: () => s?.(e.source, e.target)
+							}, i);
+						})
+					}),
+					/* @__PURE__ */ m("g", {
+						className: "nodes",
+						children: n.map((e) => /* @__PURE__ */ m(b, {
+							node: e,
+							isSelected: c === e.id,
+							onClick: () => a?.(e.id),
+							scale: D
+						}, e.id))
+					})
+				]
+			}),
+			/* @__PURE__ */ m(S, {
+				nodes: n,
+				edges: r,
+				viewBox: T,
+				bounds: F,
+				onViewChange: (e, t) => {
+					E((n) => ({
+						...n,
+						x: e,
+						y: t
+					}));
+				}
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "absolute bottom-4 left-4 rounded-lg border border-gray-200 bg-white p-3 shadow-lg",
+				children: [
+					/* @__PURE__ */ m("div", {
+						className: "mb-2 text-xs font-medium text-gray-700",
+						children: "Status"
+					}),
+					/* @__PURE__ */ m("div", {
+						className: "flex flex-wrap gap-3",
+						children: Object.entries(_).map(([e, t]) => /* @__PURE__ */ h("div", {
+							className: "flex items-center gap-1.5",
+							children: [/* @__PURE__ */ m("div", {
+								className: "h-3 w-3 rounded-full",
+								style: { backgroundColor: t }
+							}), /* @__PURE__ */ m("span", {
+								className: "text-xs capitalize text-gray-600",
+								children: e
+							})]
+						}, e))
+					}),
+					u && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
+						className: "mb-2 mt-3 text-xs font-medium text-gray-700",
+						children: "Traffic"
+					}), /* @__PURE__ */ m("div", {
+						className: "flex flex-wrap gap-3",
+						children: Object.entries(v).map(([e, t]) => /* @__PURE__ */ h("div", {
+							className: "flex items-center gap-1.5",
+							children: [/* @__PURE__ */ m("div", {
+								className: "h-0.5 w-4",
+								style: {
+									backgroundColor: t.color,
+									height: t.width
+								}
+							}), /* @__PURE__ */ m("span", {
+								className: "text-xs capitalize text-gray-600",
+								children: e
+							})]
+						}, e))
+					})] })
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { C as WakaNetworkTopology, C as default };

package/dist/components/waka-notifications/index.cjs.js

@@ -0,0 +1 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js"),n=require("../badge/index.cjs.js"),r=require("../button/index.cjs.js"),i=require("../popover/index.cjs.js"),a=require("../scroll-area/index.cjs.js"),o=require("../separator/index.cjs.js"),s=require("../tabs/index.cjs.js");let c=require("react");c=e.__toESM(c);let l=require("lucide-react"),u=require("react/jsx-runtime");var d={info:`bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200`,success:`bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200`,warning:`bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200`,error:`bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200`},f=c.forwardRef(({notification:e,onMarkAsRead:n,onDelete:i},a)=>(0,u.jsxs)(`div`,{ref:a,className:t.cn(`flex gap-3 p-4 hover:bg-muted/50 transition-colors border-l-4`,e.read?`border-l-transparent opacity-60`:`border-l-primary`,`relative group`),children:[(0,u.jsx)(`div`,{className:t.cn(`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center`,d[e.type]),children:e.icon||(0,u.jsx)(l.Bell,{className:`h-5 w-5`})}),(0,u.jsxs)(`div`,{className:`flex-1 min-w-0 space-y-1`,children:[(0,u.jsxs)(`div`,{className:`flex items-start justify-between gap-2`,children:[(0,u.jsx)(`h4`,{className:t.cn(`text-sm font-semibold`,e.read&&`font-normal`),children:e.title}),(0,u.jsx)(`span`,{className:`text-xs text-muted-foreground whitespace-nowrap`,children:(e=>{let t=new Date().getTime()-e.getTime(),n=Math.floor(t/6e4),r=Math.floor(t/36e5),i=Math.floor(t/864e5);return n<1?`À l'instant`:n<60?`Il y a ${n} min`:r<24?`Il y a ${r}h`:i<7?`Il y a ${i}j`:e.toLocaleDateString(`fr-FR`)})(e.timestamp)})]}),(0,u.jsx)(`p`,{className:`text-sm text-muted-foreground line-clamp-2`,children:e.message}),e.action&&(0,u.jsx)(r.Button,{variant:`link`,size:`sm`,className:`h-auto p-0 text-primary`,onClick:e.action.onClick,children:e.action.label})]}),(0,u.jsxs)(`div`,{className:`flex-shrink-0 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity`,children:[!e.read&&n&&(0,u.jsxs)(r.Button,{variant:`ghost`,size:`icon`,className:`h-8 w-8`,onClick:()=>n(e.id),children:[(0,u.jsx)(l.Check,{className:`h-4 w-4`}),(0,u.jsx)(`span`,{className:`sr-only`,children:`Marquer comme lu`})]}),i&&(0,u.jsxs)(r.Button,{variant:`ghost`,size:`icon`,className:`h-8 w-8 text-destructive hover:text-destructive`,onClick:()=>i(e.id),children:[(0,u.jsx)(l.Trash2,{className:`h-4 w-4`}),(0,u.jsx)(`span`,{className:`sr-only`,children:`Supprimer`})]})]})]}));f.displayName=`NotificationItem`;var p=c.forwardRef(({notifications:e,onMarkAsRead:d,onMarkAllAsRead:p,onDelete:m,onDeleteAll:h,onSettingsClick:g,maxHeight:_=`400px`,className:v,iconClassName:y,badgeClassName:b,showBadge:x=!0,showTabs:S=!0,emptyMessage:C=`Aucune notification`,emptyIcon:w},T)=>{let[E,D]=c.useState(!1),[O,k]=c.useState(`all`),A=e.filter(e=>!e.read).length,j=c.useMemo(()=>O===`all`?e:O===`unread`?e.filter(e=>!e.read):e,[e,O]),M=()=>(0,u.jsxs)(`div`,{className:`flex flex-col items-center justify-center py-12 px-4 text-center`,children:[w||(0,u.jsx)(l.Bell,{className:`h-12 w-12 text-muted-foreground/50 mb-4`}),(0,u.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:C})]});return(0,u.jsxs)(i.Popover,{open:E,onOpenChange:D,children:[(0,u.jsx)(i.PopoverTrigger,{asChild:!0,children:(0,u.jsxs)(r.Button,{ref:T,variant:`ghost`,size:`icon`,className:t.cn(`relative`,v),children:[(0,u.jsx)(l.Bell,{className:t.cn(`h-5 w-5`,y)}),x&&A>0&&(0,u.jsx)(n.Badge,{variant:`destructive`,className:t.cn(`absolute -top-1 -right-1 h-5 min-w-[20px] flex items-center justify-center p-0 text-xs`,b),children:A>99?`99+`:A}),(0,u.jsxs)(`span`,{className:`sr-only`,children:[`Notifications (`,A,` non lues)`]})]})}),(0,u.jsxs)(i.PopoverContent,{className:`w-[380px] p-0`,align:`end`,sideOffset:8,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between p-4 border-b`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`font-semibold text-base`,children:`Notifications`}),A>0&&(0,u.jsxs)(`p`,{className:`text-xs text-muted-foreground`,children:[A,` non `,A>1?`lues`:`lue`]})]}),(0,u.jsxs)(`div`,{className:`flex gap-1`,children:[p&&A>0&&(0,u.jsxs)(r.Button,{variant:`ghost`,size:`sm`,className:`h-8 text-xs`,onClick:p,children:[(0,u.jsx)(l.Check,{className:`h-3 w-3 mr-1`}),`Tout marquer`]}),g&&(0,u.jsxs)(r.Button,{variant:`ghost`,size:`icon`,className:`h-8 w-8`,onClick:g,children:[(0,u.jsx)(l.Settings,{className:`h-4 w-4`}),(0,u.jsx)(`span`,{className:`sr-only`,children:`Paramètres`})]})]})]}),S&&e.length>0&&(0,u.jsxs)(s.Tabs,{value:O,onValueChange:k,className:`w-full`,children:[(0,u.jsxs)(s.TabsList,{className:`w-full rounded-none border-b bg-transparent p-0`,children:[(0,u.jsxs)(s.TabsTrigger,{value:`all`,className:`flex-1 rounded-none data-[state=active]:border-b-2 data-[state=active]:border-primary`,children:[`Toutes (`,e.length,`)`]}),(0,u.jsxs)(s.TabsTrigger,{value:`unread`,className:`flex-1 rounded-none data-[state=active]:border-b-2 data-[state=active]:border-primary`,children:[`Non lues (`,A,`)`]})]}),(0,u.jsx)(s.TabsContent,{value:`all`,className:`m-0`,children:(0,u.jsx)(a.ScrollArea,{className:`h-[400px]`,style:{maxHeight:_},children:(0,u.jsx)(`div`,{className:`p-0`,children:j.length===0?(0,u.jsx)(M,{}):(0,u.jsx)(`div`,{className:`divide-y`,children:j.map(e=>(0,u.jsx)(f,{notification:e,onMarkAsRead:d,onDelete:m},e.id))})})})}),(0,u.jsx)(s.TabsContent,{value:`unread`,className:`m-0`,children:(0,u.jsx)(a.ScrollArea,{className:`h-[400px]`,style:{maxHeight:_},children:(0,u.jsx)(`div`,{className:`p-0`,children:j.length===0?(0,u.jsx)(M,{}):(0,u.jsx)(`div`,{className:`divide-y`,children:j.map(e=>(0,u.jsx)(f,{notification:e,onMarkAsRead:d,onDelete:m},e.id))})})})})]}),!S&&(0,u.jsx)(a.ScrollArea,{className:`h-[400px]`,style:{maxHeight:_},children:(0,u.jsx)(`div`,{className:`p-0`,children:e.length===0?(0,u.jsx)(M,{}):(0,u.jsx)(`div`,{className:`divide-y`,children:e.map(e=>(0,u.jsx)(f,{notification:e,onMarkAsRead:d,onDelete:m},e.id))})})}),e.length>0&&h&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(o.Separator,{}),(0,u.jsx)(`div`,{className:`p-2`,children:(0,u.jsxs)(r.Button,{variant:`ghost`,size:`sm`,className:`w-full text-destructive hover:text-destructive`,onClick:h,children:[(0,u.jsx)(l.Trash2,{className:`h-3 w-3 mr-2`}),`Tout supprimer`]})})]})]})]})});p.displayName=`WakaNotifications`;function m(e=[]){let[t,n]=c.useState(e);return{notifications:t,addNotification:c.useCallback(e=>{let t={...e,id:`notification-${Date.now()}-${Math.random()}`,timestamp:new Date,read:!1};n(e=>[t,...e])},[]),markAsRead:c.useCallback(e=>{n(t=>t.map(t=>t.id===e?{...t,read:!0}:t))},[]),markAllAsRead:c.useCallback(()=>{n(e=>e.map(e=>({...e,read:!0})))},[]),deleteNotification:c.useCallback(e=>{n(t=>t.filter(t=>t.id!==e))},[]),deleteAllNotifications:c.useCallback(()=>{n([])},[]),unreadCount:c.useMemo(()=>t.filter(e=>!e.read).length,[t])}}exports.WakaNotifications=p,exports.useNotifications=m;