@wakastellar/ui 4.0.0-dev.0 → 4.0.1

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

@@ -0,0 +1,607 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Download as n, Maximize2 as r, Move as i, ZoomIn as a, ZoomOut as o } from "lucide-react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/waka-heatmap/index.tsx
+var u = {
+	blues: {
+		type: "sequential",
+		colors: [
+			"#f7fbff",
+			"#deebf7",
+			"#c6dbef",
+			"#9ecae1",
+			"#6baed6",
+			"#4292c6",
+			"#2171b5",
+			"#08519c",
+			"#08306b"
+		]
+	},
+	greens: {
+		type: "sequential",
+		colors: [
+			"#f7fcf5",
+			"#e5f5e0",
+			"#c7e9c0",
+			"#a1d99b",
+			"#74c476",
+			"#41ab5d",
+			"#238b45",
+			"#006d2c",
+			"#00441b"
+		]
+	},
+	reds: {
+		type: "sequential",
+		colors: [
+			"#fff5f0",
+			"#fee0d2",
+			"#fcbba1",
+			"#fc9272",
+			"#fb6a4a",
+			"#ef3b2c",
+			"#cb181d",
+			"#a50f15",
+			"#67000d"
+		]
+	},
+	viridis: {
+		type: "sequential",
+		colors: [
+			"#440154",
+			"#482878",
+			"#3e4989",
+			"#31688e",
+			"#26828e",
+			"#1f9e89",
+			"#35b779",
+			"#6ece58",
+			"#fde725"
+		]
+	},
+	plasma: {
+		type: "sequential",
+		colors: [
+			"#0d0887",
+			"#46039f",
+			"#7201a8",
+			"#9c179e",
+			"#bd3786",
+			"#d8576b",
+			"#ed7953",
+			"#fb9f3a",
+			"#fdca26"
+		]
+	},
+	coolwarm: {
+		type: "diverging",
+		colors: [
+			"#3b4cc0",
+			"#5977e3",
+			"#7b9ff9",
+			"#9ebeff",
+			"#c0d4f5",
+			"#f7f7f7",
+			"#f4c5ad",
+			"#f19072",
+			"#d95f47",
+			"#b40426"
+		]
+	},
+	rdylgn: {
+		type: "diverging",
+		colors: [
+			"#a50026",
+			"#d73027",
+			"#f46d43",
+			"#fdae61",
+			"#fee08b",
+			"#ffffbf",
+			"#d9ef8b",
+			"#a6d96a",
+			"#66bd63",
+			"#1a9850",
+			"#006837"
+		]
+	}
+};
+function d(e, t) {
+	let n = Math.max(0, Math.min(1, t)) * (e.length - 1), r = Math.floor(n), i = Math.ceil(n);
+	if (r === i) return e[r];
+	let a = n - r, o = e[r], s = e[i], c = parseInt(o.slice(1, 3), 16), l = parseInt(o.slice(3, 5), 16), u = parseInt(o.slice(5, 7), 16), d = parseInt(s.slice(1, 3), 16), f = parseInt(s.slice(3, 5), 16), p = parseInt(s.slice(5, 7), 16), m = Math.round(c + (d - c) * a), h = Math.round(l + (f - l) * a), g = Math.round(u + (p - u) * a);
+	return `#${m.toString(16).padStart(2, "0")}${h.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}`;
+}
+function f(e, t, n, r) {
+	if (r.type === "diverging") {
+		let i = Math.max(Math.abs(t), Math.abs(n));
+		if (e === 0) return r.colors[Math.floor(r.colors.length / 2)];
+		let a = (e + i) / (2 * i);
+		return d(r.colors, a);
+	}
+	if (n === t) return r.colors[Math.floor(r.colors.length / 2)];
+	let i = (e - t) / (n - t);
+	return d(r.colors, i);
+}
+function p(e = {}) {
+	let { initialZoom: n = 1, minZoom: r = .5, maxZoom: i = 4, initialPan: a = {
+		x: 0,
+		y: 0
+	}, onSelectionChange: o } = e, [s, c] = t.useState(n), [l, u] = t.useState(a), [d, f] = t.useState(null), [p, m] = t.useState(!1);
+	return {
+		zoom: s,
+		pan: l,
+		selectedCell: d,
+		isPanning: p,
+		zoomIn: t.useCallback(() => {
+			c((e) => Math.min(e * 1.2, i));
+		}, [i]),
+		zoomOut: t.useCallback(() => {
+			c((e) => Math.max(e / 1.2, r));
+		}, [r]),
+		resetZoom: t.useCallback(() => {
+			c(n);
+		}, [n]),
+		setPan: u,
+		resetPan: t.useCallback(() => {
+			u(a);
+		}, [a]),
+		selectCell: t.useCallback((e) => {
+			f(e), o?.(e);
+		}, [o]),
+		startPanning: t.useCallback(() => {
+			m(!0);
+		}, []),
+		stopPanning: t.useCallback(() => {
+			m(!1);
+		}, []),
+		handlePanMove: t.useCallback((e, t) => {
+			u((n) => ({
+				x: n.x + e,
+				y: n.y + t
+			}));
+		}, [])
+	};
+}
+function m({ value: e, row: t, col: n, rowLabel: r, colLabel: i, x: a, y: o, valueFormatter: s }) {
+	let u = s ? s(e) : e.toFixed(2);
+	return /* @__PURE__ */ l("div", {
+		className: "absolute z-50 px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-lg shadow-lg pointer-events-none whitespace-nowrap",
+		style: {
+			left: a,
+			top: o,
+			transform: "translate(-50%, -100%)",
+			marginTop: -10
+		},
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "font-semibold text-sm",
+				children: u
+			}),
+			(r || i) && /* @__PURE__ */ l("div", {
+				className: "text-gray-300 mt-1",
+				children: [
+					r && /* @__PURE__ */ l("span", { children: ["Row: ", r] }),
+					r && i && /* @__PURE__ */ c("span", {
+						className: "mx-1",
+						children: "|"
+					}),
+					i && /* @__PURE__ */ l("span", { children: ["Col: ", i] })
+				]
+			}),
+			!r && !i && /* @__PURE__ */ l("div", {
+				className: "text-gray-300 mt-1",
+				children: [
+					"[",
+					t,
+					", ",
+					n,
+					"]"
+				]
+			}),
+			/* @__PURE__ */ c("div", { className: "absolute left-1/2 bottom-0 w-2.5 h-2.5 bg-gray-900 transform -translate-x-1/2 translate-y-1/2 rotate-45" })
+		]
+	});
+}
+function h({ colorScheme: n, minValue: r, maxValue: i, valueFormatter: a, className: o }) {
+	let s = t.useId(), u = (e) => a ? a(e) : e.toFixed(1);
+	return /* @__PURE__ */ c("div", {
+		className: e("flex flex-col gap-1", o),
+		children: /* @__PURE__ */ l("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ c("span", {
+					className: "text-xs text-muted-foreground min-w-12 text-right",
+					children: u(r)
+				}),
+				/* @__PURE__ */ c("div", {
+					className: "relative h-3 w-32 rounded overflow-hidden",
+					children: /* @__PURE__ */ l("svg", {
+						width: "100%",
+						height: "100%",
+						"aria-hidden": "true",
+						focusable: "false",
+						children: [/* @__PURE__ */ c("defs", { children: /* @__PURE__ */ c("linearGradient", {
+							id: s,
+							x1: "0%",
+							y1: "0%",
+							x2: "100%",
+							y2: "0%",
+							children: n.colors.map((e, t) => /* @__PURE__ */ c("stop", {
+								offset: `${t / (n.colors.length - 1) * 100}%`,
+								stopColor: e
+							}, t))
+						}) }), /* @__PURE__ */ c("rect", {
+							width: "100%",
+							height: "100%",
+							fill: `url(#${s})`
+						})]
+					})
+				}),
+				/* @__PURE__ */ c("span", {
+					className: "text-xs text-muted-foreground min-w-12",
+					children: u(i)
+				})
+			]
+		})
+	});
+}
+function g({ minValue: e, maxValue: t, minPosition: n, maxPosition: r, valueFormatter: i }) {
+	let a = (e) => i ? i(e) : e.toFixed(2);
+	return /* @__PURE__ */ l("div", {
+		className: "flex gap-4 text-xs text-muted-foreground",
+		children: [/* @__PURE__ */ l("div", {
+			className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ c("span", {
+					className: "font-medium",
+					children: "Min:"
+				}),
+				/* @__PURE__ */ c("span", {
+					className: "text-foreground font-semibold",
+					children: a(e)
+				}),
+				/* @__PURE__ */ l("span", {
+					className: "text-gray-400",
+					children: [
+						"[",
+						n.row,
+						", ",
+						n.col,
+						"]"
+					]
+				})
+			]
+		}), /* @__PURE__ */ l("div", {
+			className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ c("span", {
+					className: "font-medium",
+					children: "Max:"
+				}),
+				/* @__PURE__ */ c("span", {
+					className: "text-foreground font-semibold",
+					children: a(t)
+				}),
+				/* @__PURE__ */ l("span", {
+					className: "text-gray-400",
+					children: [
+						"[",
+						r.row,
+						", ",
+						r.col,
+						"]"
+					]
+				})
+			]
+		})]
+	});
+}
+function _({ enableZoom: t, enablePan: u, enableExport: d, zoom: f, isPanning: p, onZoomIn: m, onZoomOut: h, onResetZoom: g, onTogglePan: _, onExport: v }) {
+	return /* @__PURE__ */ l("div", {
+		className: "flex items-center gap-1 bg-muted/50 rounded-lg p-1",
+		children: [
+			t && /* @__PURE__ */ l(s, { children: [
+				/* @__PURE__ */ c("button", {
+					type: "button",
+					onClick: h,
+					className: "p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground",
+					"aria-label": "Zoom out",
+					title: "Zoom out",
+					children: /* @__PURE__ */ c(o, { className: "w-4 h-4" })
+				}),
+				/* @__PURE__ */ l("span", {
+					className: "text-xs text-muted-foreground px-2 min-w-12 text-center",
+					children: [Math.round(f * 100), "%"]
+				}),
+				/* @__PURE__ */ c("button", {
+					type: "button",
+					onClick: m,
+					className: "p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground",
+					"aria-label": "Zoom in",
+					title: "Zoom in",
+					children: /* @__PURE__ */ c(a, { className: "w-4 h-4" })
+				}),
+				/* @__PURE__ */ c("button", {
+					type: "button",
+					onClick: g,
+					className: "p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground",
+					"aria-label": "Reset zoom",
+					title: "Reset zoom",
+					children: /* @__PURE__ */ c(r, { className: "w-4 h-4" })
+				}),
+				/* @__PURE__ */ c("div", { className: "w-px h-4 bg-border mx-1" })
+			] }),
+			u && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("button", {
+				type: "button",
+				onClick: _,
+				className: e("p-1.5 rounded transition-colors", p ? "bg-primary text-primary-foreground" : "hover:bg-muted text-muted-foreground hover:text-foreground"),
+				"aria-label": "Toggle pan mode",
+				title: "Toggle pan mode",
+				children: /* @__PURE__ */ c(i, { className: "w-4 h-4" })
+			}), /* @__PURE__ */ c("div", { className: "w-px h-4 bg-border mx-1" })] }),
+			d && /* @__PURE__ */ c("button", {
+				type: "button",
+				onClick: v,
+				className: "p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground",
+				"aria-label": "Export as image",
+				title: "Export as image",
+				children: /* @__PURE__ */ c(n, { className: "w-4 h-4" })
+			})
+		]
+	});
+}
+function v({ data: n, width: r = 600, height: i = 400, cellSize: a = 24, cellGap: o = 2, colorScheme: s, colorSchemeName: d = "blues", showRowLabels: v = !0, showColumnLabels: y = !0, showLegend: b = !0, showMinMax: x = !0, showTooltip: S = !0, enableSelection: C = !0, enableZoom: w = !0, enablePan: T = !0, enableExport: E = !0, initialZoom: D = 1, minZoom: O = .5, maxZoom: k = 4, valueFormatter: A, onCellClick: j, onSelectionChange: M, className: N, title: P }) {
+	let F = t.useRef(null), I = t.useRef(null), L = t.useRef(null), [R, z] = t.useState(null), [B, V] = t.useState(!1), H = p({
+		initialZoom: D,
+		minZoom: O,
+		maxZoom: k,
+		onSelectionChange: M
+	}), U = t.useMemo(() => s || u[d] || u.blues, [s, d]), { minValue: W, maxValue: G, minPosition: K, maxPosition: q } = t.useMemo(() => {
+		let e = Infinity, t = -Infinity, r = {
+			row: 0,
+			col: 0
+		}, i = {
+			row: 0,
+			col: 0
+		};
+		return n.values.forEach((n, a) => {
+			n.forEach((n, o) => {
+				n < e && (e = n, r = {
+					row: a,
+					col: o
+				}), n > t && (t = n, i = {
+					row: a,
+					col: o
+				});
+			});
+		}), {
+			minValue: e === Infinity ? 0 : e,
+			maxValue: t === -Infinity ? 0 : t,
+			minPosition: r,
+			maxPosition: i
+		};
+	}, [n.values]), J = n.values.length, Y = n.values[0]?.length || 0, X = v ? 80 : 0;
+	Y * (a + o) - o, J * (a + o) - o;
+	let Z = t.useCallback((e, t, r, i) => {
+		if (!S) return;
+		let a = e.currentTarget.getBoundingClientRect(), o = F.current?.getBoundingClientRect();
+		o && z({
+			value: i,
+			row: t,
+			col: r,
+			rowLabel: n.rowLabels?.[t],
+			colLabel: n.columnLabels?.[r],
+			x: a.left - o.left + a.width / 2,
+			y: a.top - o.top,
+			valueFormatter: A
+		});
+	}, [
+		S,
+		n.rowLabels,
+		n.columnLabels,
+		A
+	]), Q = t.useCallback((e, t, n) => {
+		if (!C) return;
+		let r = {
+			row: e,
+			col: t,
+			value: n
+		};
+		H.selectedCell?.row === e && H.selectedCell?.col === t ? H.selectCell(null) : (H.selectCell(r), j?.(r));
+	}, [
+		C,
+		H,
+		j
+	]), ee = t.useCallback(() => {
+		let e = document.createElement("canvas"), t = e.getContext("2d");
+		if (!t) return;
+		let r = a * 2, i = o * 2, s = v ? 160 : 0, c = y ? 60 : 0, l = Y * (r + i) - i, u = J * (r + i) - i;
+		e.width = l + s + 80, e.height = u + c + 80, t.fillStyle = "#ffffff", t.fillRect(0, 0, e.width, e.height), P && (t.fillStyle = "#1f2937", t.font = "bold 24px sans-serif", t.textAlign = "center", t.fillText(P, e.width / 2, 30)), y && n.columnLabels && (t.fillStyle = "#6b7280", t.font = "12px sans-serif", t.textAlign = "center", n.columnLabels.forEach((e, n) => {
+			let a = 40 + s + n * (r + i) + r / 2;
+			t.fillText(e, a, 40 + c - 10);
+		})), v && n.rowLabels && (t.fillStyle = "#6b7280", t.font = "12px sans-serif", t.textAlign = "right", t.textBaseline = "middle", n.rowLabels.forEach((e, n) => {
+			let a = 40 + c + n * (r + i) + r / 2;
+			t.fillText(e, 40 + s - 10, a);
+		})), n.values.forEach((e, n) => {
+			e.forEach((e, a) => {
+				let o = 40 + s + a * (r + i), l = 40 + c + n * (r + i);
+				t.fillStyle = f(e, W, G, U), t.fillRect(o, l, r, r);
+			});
+		});
+		let d = document.createElement("a");
+		d.download = `heatmap-${Date.now()}.png`, d.href = e.toDataURL("image/png"), d.click();
+	}, [
+		a,
+		o,
+		Y,
+		J,
+		v,
+		y,
+		n.columnLabels,
+		n.rowLabels,
+		n.values,
+		W,
+		G,
+		U,
+		P
+	]), te = t.useCallback((e) => {
+		!T || !B || (H.startPanning(), L.current = {
+			x: e.clientX,
+			y: e.clientY
+		});
+	}, [
+		T,
+		B,
+		H
+	]), ne = t.useCallback((e) => {
+		if (!H.isPanning || !L.current) return;
+		let t = e.clientX - L.current.x, n = e.clientY - L.current.y;
+		H.handlePanMove(t, n), L.current = {
+			x: e.clientX,
+			y: e.clientY
+		};
+	}, [H]), $ = t.useCallback(() => {
+		H.stopPanning(), L.current = null;
+	}, [H]), re = t.useCallback((e) => {
+		w && (e.preventDefault(), e.deltaY < 0 ? H.zoomIn() : H.zoomOut());
+	}, [w, H]), ie = t.useCallback(() => {
+		V((e) => !e);
+	}, []);
+	return /* @__PURE__ */ l("div", {
+		ref: F,
+		className: e("flex flex-col gap-3", N),
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "flex items-center justify-between",
+				children: [P && /* @__PURE__ */ c("h3", {
+					className: "text-lg font-semibold text-foreground",
+					children: P
+				}), /* @__PURE__ */ l("div", {
+					className: e("flex items-center gap-4", !P && "ml-auto"),
+					children: [x && /* @__PURE__ */ c(g, {
+						minValue: W,
+						maxValue: G,
+						minPosition: K,
+						maxPosition: q,
+						valueFormatter: A
+					}), (w || T || E) && /* @__PURE__ */ c(_, {
+						enableZoom: w,
+						enablePan: T,
+						enableExport: E,
+						zoom: H.zoom,
+						isPanning: B,
+						onZoomIn: H.zoomIn,
+						onZoomOut: H.zoomOut,
+						onResetZoom: () => {
+							H.resetZoom(), H.resetPan();
+						},
+						onTogglePan: ie,
+						onExport: ee
+					})]
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: e("relative overflow-hidden rounded-lg border bg-background", B && "cursor-grab", H.isPanning && "cursor-grabbing"),
+				style: {
+					width: r,
+					height: i
+				},
+				onMouseDown: te,
+				onMouseMove: ne,
+				onMouseUp: $,
+				onMouseLeave: () => {
+					$(), z(null);
+				},
+				onWheel: re,
+				children: [
+					/* @__PURE__ */ l("div", {
+						className: "relative transition-transform duration-150",
+						style: {
+							transform: `scale(${H.zoom}) translate(${H.pan.x / H.zoom}px, ${H.pan.y / H.zoom}px)`,
+							transformOrigin: "top left",
+							padding: 16
+						},
+						children: [y && n.columnLabels && /* @__PURE__ */ c("div", {
+							className: "flex",
+							style: {
+								marginLeft: X,
+								marginBottom: 8
+							},
+							children: n.columnLabels.map((e, t) => /* @__PURE__ */ c("div", {
+								className: "text-xs text-muted-foreground truncate text-center",
+								style: {
+									width: a,
+									marginRight: o
+								},
+								title: e,
+								children: e
+							}, t))
+						}), /* @__PURE__ */ l("div", {
+							className: "flex",
+							children: [v && n.rowLabels && /* @__PURE__ */ c("div", {
+								className: "flex flex-col",
+								style: {
+									width: X,
+									marginRight: 8
+								},
+								children: n.rowLabels.map((e, t) => /* @__PURE__ */ c("div", {
+									className: "text-xs text-muted-foreground truncate text-right flex items-center justify-end",
+									style: {
+										height: a,
+										marginBottom: o
+									},
+									title: e,
+									children: e
+								}, t))
+							}), /* @__PURE__ */ c("div", {
+								className: "grid",
+								style: {
+									gridTemplateColumns: `repeat(${Y}, ${a}px)`,
+									gridTemplateRows: `repeat(${J}, ${a}px)`,
+									gap: o
+								},
+								role: "grid",
+								"aria-label": "Heatmap grid",
+								children: n.values.flatMap((t, n) => t.map((t, r) => {
+									let i = f(t, W, G, U), o = H.selectedCell?.row === n && H.selectedCell?.col === r, s = x && K.row === n && K.col === r, l = x && q.row === n && q.col === r;
+									return /* @__PURE__ */ c("div", {
+										className: e("rounded-sm transition-all duration-150", C && !B && "cursor-pointer hover:ring-2 hover:ring-primary/50", o && "ring-2 ring-primary ring-offset-1", (s || l) && "ring-1 ring-offset-1", s && "ring-blue-500", l && "ring-red-500"),
+										style: {
+											backgroundColor: i,
+											width: a,
+											height: a
+										},
+										role: "gridcell",
+										"aria-label": `Value ${t} at row ${n}, column ${r}`,
+										onMouseEnter: (e) => !B && Z(e, n, r, t),
+										onMouseLeave: () => z(null),
+										onClick: () => !B && Q(n, r, t)
+									}, `${n}-${r}`);
+								}))
+							})]
+						})]
+					}),
+					R && !B && /* @__PURE__ */ c(m, { ...R }),
+					/* @__PURE__ */ c("canvas", {
+						ref: I,
+						className: "hidden"
+					})
+				]
+			}),
+			b && /* @__PURE__ */ c("div", {
+				className: "flex justify-center",
+				children: /* @__PURE__ */ c(h, {
+					colorScheme: U,
+					minValue: W,
+					maxValue: G,
+					valueFormatter: A
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { v as default, p as useHeatmap };

package/dist/components/waka-hotspot/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={help:r.HelpCircle,info:r.Info,lightbulb:r.Lightbulb,star:r.Star,zap:r.Zap,alert:r.AlertCircle},o={primary:{bg:`bg-primary`,text:`text-primary-foreground`,ring:`ring-primary/30`,pulse:`bg-primary/40`},secondary:{bg:`bg-secondary`,text:`text-secondary-foreground`,ring:`ring-secondary/30`,pulse:`bg-secondary/40`},destructive:{bg:`bg-destructive`,text:`text-destructive-foreground`,ring:`ring-destructive/30`,pulse:`bg-destructive/40`},warning:{bg:`bg-amber-500`,text:`text-white`,ring:`ring-amber-500/30`,pulse:`bg-amber-500/40`},success:{bg:`bg-emerald-500`,text:`text-white`,ring:`ring-emerald-500/30`,pulse:`bg-emerald-500/40`},info:{bg:`bg-sky-500`,text:`text-white`,ring:`ring-sky-500/30`,pulse:`bg-sky-500/40`}},s={sm:{dot:`h-2 w-2`,icon:`h-5 w-5`,badge:`h-5 min-w-5 px-1.5 text-xs`,iconSize:`h-3 w-3`,tooltip:`max-w-56 p-2.5 text-xs`},default:{dot:`h-3 w-3`,icon:`h-7 w-7`,badge:`h-6 min-w-6 px-2 text-xs`,iconSize:`h-4 w-4`,tooltip:`max-w-72 p-3 text-sm`},lg:{dot:`h-4 w-4`,icon:`h-9 w-9`,badge:`h-7 min-w-7 px-2.5 text-sm`,iconSize:`h-5 w-5`,tooltip:`max-w-80 p-4 text-sm`}},c={top:`bottom-full left-1/2 -translate-x-1/2 mb-2`,bottom:`top-full left-1/2 -translate-x-1/2 mt-2`,left:`right-full top-1/2 -translate-y-1/2 mr-2`,right:`left-full top-1/2 -translate-y-1/2 ml-2`,"top-left":`bottom-full right-0 mb-2`,"top-right":`bottom-full left-0 mb-2`,"bottom-left":`top-full right-0 mt-2`,"bottom-right":`top-full left-0 mt-2`},l={top:`top-full left-1/2 -translate-x-1/2 border-t-popover border-x-transparent border-b-transparent`,bottom:`bottom-full left-1/2 -translate-x-1/2 border-b-popover border-x-transparent border-t-transparent`,left:`left-full top-1/2 -translate-y-1/2 border-l-popover border-y-transparent border-r-transparent`,right:`right-full top-1/2 -translate-y-1/2 border-r-popover border-y-transparent border-l-transparent`,"top-left":`top-full right-3 border-t-popover border-x-transparent border-b-transparent`,"top-right":`top-full left-3 border-t-popover border-x-transparent border-b-transparent`,"bottom-left":`bottom-full right-3 border-b-popover border-x-transparent border-t-transparent`,"bottom-right":`bottom-full left-3 border-b-popover border-x-transparent border-t-transparent`};function u({id:e,content:u,title:d,variant:f=`dot`,iconType:p=`help`,customIcon:m,size:h=`default`,position:g=`top`,trigger:_=`click`,autoDismissMs:v=0,showOnce:y=!1,storageKeyPrefix:b=`waka-hotspot-seen`,color:x=`primary`,customColor:S,zIndex:C=50,disablePulse:w=!1,disableAppearAnimation:T=!1,onShow:E,onHide:D,onDismiss:O,onFirstSeen:k,className:A,tooltipClassName:j,badgeText:M,children:N}){let[P,F]=n.useState(!1),[ee,I]=n.useState(!1),[L,R]=n.useState(!1),[z,B]=n.useState(!1),V=n.useRef(null),H=n.useRef(void 0),U=`${b}-${e}`;n.useEffect(()=>{y&&typeof window<`u`&&localStorage.getItem(U)===`true`&&(I(!0),R(!0));let e=setTimeout(()=>B(!0),50);return()=>clearTimeout(e)},[y,U]),n.useEffect(()=>(P&&v>0&&(H.current=setTimeout(()=>{G()},v)),()=>{H.current&&clearTimeout(H.current)}),[P,v]),n.useEffect(()=>{if(!P)return;let e=e=>{V.current&&!V.current.contains(e.target)&&G()};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[P]);let W=()=>{L||(F(!0),E?.())},G=()=>{F(!1),D?.()},K=()=>{G(),y&&typeof window<`u`&&(localStorage.setItem(U,`true`),I(!0),R(!0),k?.()),O?.()},q=()=>{(_===`click`||_===`both`)&&(P?G():W())},J=()=>{(_===`hover`||_===`both`)&&W()},Y=()=>{_===`hover`&&G()};if(L)return N?(0,i.jsx)(i.Fragment,{children:N}):null;let X=o[x],Z=s[h],Q=a[p],$=(0,i.jsxs)(`div`,{ref:V,className:`relative inline-flex`,style:{zIndex:C},onClick:q,onMouseEnter:J,onMouseLeave:Y,children:[(()=>{let e=t.cn(`relative cursor-pointer transition-all duration-200`,!T&&!z&&`scale-0 opacity-0`,!T&&z&&`scale-100 opacity-100`),n=S?{backgroundColor:S}:void 0,r=S?{backgroundColor:`${S}40`}:void 0;switch(f){case`dot`:return(0,i.jsxs)(`div`,{className:t.cn(e,`relative`,A),children:[!w&&(0,i.jsx)(`span`,{className:t.cn(`absolute inset-0 rounded-full animate-ping`,!S&&X.pulse),style:r}),(0,i.jsx)(`span`,{className:t.cn(`relative block rounded-full ring-2`,Z.dot,!S&&X.bg,!S&&X.ring),style:n})]});case`icon`:return(0,i.jsxs)(`div`,{className:t.cn(e,`flex items-center justify-center rounded-full shadow-md`,Z.icon,!S&&X.bg,!S&&X.text,A),style:n,children:[!w&&(0,i.jsx)(`span`,{className:t.cn(`absolute inset-0 rounded-full animate-ping`,!S&&X.pulse),style:r}),m||(0,i.jsx)(Q,{className:Z.iconSize})]});case`badge`:return(0,i.jsxs)(`div`,{className:t.cn(e,`flex items-center justify-center rounded-full font-medium shadow-md`,Z.badge,!S&&X.bg,!S&&X.text,A),style:n,children:[!w&&(0,i.jsx)(`span`,{className:t.cn(`absolute inset-0 rounded-full animate-ping`,!S&&X.pulse),style:r}),M||m||(0,i.jsx)(Q,{className:Z.iconSize})]})}})(),P&&(0,i.jsx)(`div`,{className:t.cn(`absolute`,c[g],`animate-in fade-in-0 zoom-in-95 duration-200`),style:{zIndex:C+1},children:(0,i.jsxs)(`div`,{className:t.cn(`relative rounded-lg border bg-popover text-popover-foreground shadow-lg`,Z.tooltip,j),children:[(0,i.jsx)(`span`,{className:t.cn(`absolute border-4`,l[g])}),(0,i.jsx)(`button`,{onClick:e=>{e.stopPropagation(),K()},className:`absolute right-1.5 top-1.5 rounded-md p-0.5 hover:bg-accent transition-colors`,"aria-label":`Close`,children:(0,i.jsx)(r.X,{className:`h-3 w-3 text-muted-foreground`})}),(0,i.jsxs)(`div`,{className:`pr-5`,children:[d&&(0,i.jsx)(`div`,{className:`font-semibold mb-1`,children:d}),(0,i.jsx)(`div`,{className:`text-muted-foreground`,children:u})]})]})})]});return N?(0,i.jsxs)(`div`,{className:`relative inline-block`,children:[N,(0,i.jsx)(`div`,{className:`absolute -top-1 -right-1`,children:$})]}):$}function d({id:e,showOnce:t=!1,storageKeyPrefix:r=`waka-hotspot-seen`,autoShow:i=!1,autoShowDelay:a=500}){let[o,s]=n.useState(!1),[c,l]=n.useState(!1),u=`${r}-${e}`;return n.useEffect(()=>{if(!(typeof window>`u`)){if(t&&localStorage.getItem(u)===`true`){l(!0);return}if(i){let e=setTimeout(()=>{s(!0)},a);return()=>clearTimeout(e)}}},[t,u,i,a]),{isVisible:o,hasSeen:c,show:n.useCallback(()=>{(!c||!t)&&s(!0)},[c,t]),hide:n.useCallback(()=>{s(!1)},[]),dismiss:n.useCallback(()=>{s(!1),t&&typeof window<`u`&&(localStorage.setItem(u,`true`),l(!0))},[t,u]),reset:n.useCallback(()=>{typeof window<`u`&&localStorage.removeItem(u),l(!1),s(!1)},[u])}}function f({steps:e,active:t,currentStep:r,onStepChange:a,onComplete:o,onSkip:s,showStepIndicator:c=!0,hotspotProps:l}){let[d,f]=n.useState(0),p=r??d,m=t=>{if(t>=e.length){o?.();return}f(t),a?.(t)},h=()=>{m(p+1)},g=()=>{s?.()};if(!t||e.length===0)return null;let _=e[p];return _?(0,i.jsx)(u,{...l,id:_.id,content:(0,i.jsxs)(`div`,{children:[(0,i.jsx)(`div`,{children:_.content}),c&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between mt-3 pt-2 border-t`,children:[(0,i.jsxs)(`span`,{className:`text-xs text-muted-foreground`,children:[p+1,` of `,e.length]}),(0,i.jsxs)(`div`,{className:`flex gap-2`,children:[p<e.length-1&&(0,i.jsx)(`button`,{onClick:g,className:`text-xs text-muted-foreground hover:text-foreground`,children:`Skip`}),(0,i.jsx)(`button`,{onClick:h,className:`text-xs font-medium text-primary hover:underline`,children:p===e.length-1?`Done`:`Next`})]})]})]}),title:_.title,position:_.position,trigger:`click`,showOnce:!1}):null}exports.WakaHotspot=u,exports.WakaHotspotGroup=f,exports.useHotspot=d;

package/dist/components/waka-hotspot/index.d.ts

@@ -65,7 +65,7 @@ export interface HotspotState {
  * Use `WakaFancyButton variant="hotspot"` instead (futur, dans `@wakastellar/ui-effects-decorative`).
  * See `docs/audit/remove-relocate.md` §2.1.
  */
-export declare function WakaHotspot({ id, content, title, variant, iconType, customIcon, size, position, trigger, autoDismissMs, showOnce, storageKeyPrefix, color, customColor, zIndex, disablePulse, disableAppearAnimation, onShow, onHide, onDismiss, onFirstSeen, className, tooltipClassName, badgeText, children, }: WakaHotspotProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaHotspot({ id, content, title, variant, iconType, customIcon, size, position, trigger, autoDismissMs, showOnce, storageKeyPrefix, color, customColor, zIndex, disablePulse, disableAppearAnimation, onShow, onHide, onDismiss, onFirstSeen, className, tooltipClassName, badgeText, children, }: WakaHotspotProps): import("react/jsx-runtime").JSX.Element | null;
 export interface UseHotspotOptions {
     /** Unique identifier for the hotspot */
     id: string;
@@ -108,4 +108,4 @@ export interface WakaHotspotGroupProps {
     /** Common props for all hotspots */
     hotspotProps?: Partial<WakaHotspotProps>;
 }
-export declare function WakaHotspotGroup({ steps, active, currentStep: controlledStep, onStepChange, onComplete, onSkip, showStepIndicator, hotspotProps, }: WakaHotspotGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaHotspotGroup({ steps, active, currentStep: controlledStep, onStepChange, onComplete, onSkip, showStepIndicator, hotspotProps, }: WakaHotspotGroupProps): import("react/jsx-runtime").JSX.Element | null;