@wakastellar/ui 4.0.0-dev.0 → 4.0.1

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

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

package/dist/components/waka-image/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(`../button/index.cjs.js`),r=require(`../dialog/index.cjs.js`);let i=require(`react`);i=e.__toESM(i);let a=require(`lucide-react`),o=require(`react/jsx-runtime`);function s({src:e,alt:s,width:c,height:l,placeholder:u,placeholderColor:d=`bg-muted`,lazy:f=!0,zoomable:p=!1,maxZoom:m=3,objectFit:h=`cover`,objectPosition:g=`center`,rounded:_=`md`,showLoader:v=!0,onLoad:y,onError:b,onZoomChange:x,className:S,containerClassName:C,aspectRatio:w}){let[T,E]=i.useState(!1),[D,O]=i.useState(!1),[k,A]=i.useState(!1),[j,M]=i.useState(1),[N,P]=i.useState({x:0,y:0}),[F,I]=i.useState(!1),[L,R]=i.useState({x:0,y:0}),z=i.useRef(null),B={none:`rounded-none`,sm:`rounded-sm`,md:`rounded-md`,lg:`rounded-lg`,xl:`rounded-xl`,full:`rounded-full`},V=()=>{E(!0),y?.()},H=()=>{O(!0),b?.()},U=()=>{p&&(A(!0),M(1),P({x:0,y:0}))},W=()=>{let e=Math.min(j+.5,m);M(e),x?.(e)},G=()=>{let e=Math.max(j-.5,1);M(e),e===1&&P({x:0,y:0}),x?.(e)},K=e=>{e.preventDefault(),e.deltaY<0?W():G()},q=e=>{j>1&&(I(!0),R({x:e.clientX-N.x,y:e.clientY-N.y}))},J=e=>{F&&j>1&&P({x:e.clientX-L.x,y:e.clientY-L.y})},Y=()=>{I(!1)};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(`div`,{className:t.cn(`relative overflow-hidden`,B[_],C),style:{width:c,height:l,aspectRatio:w},children:[(!T||D)&&(0,o.jsx)(`div`,{className:t.cn(`absolute inset-0 flex items-center justify-center`,d,B[_]),children:u?(0,o.jsx)(`img`,{src:u,alt:``,className:t.cn(`w-full h-full`,`object-${h}`),style:{objectPosition:g}}):D?(0,o.jsxs)(`div`,{className:`flex flex-col items-center gap-2 text-muted-foreground`,children:[(0,o.jsx)(a.ImageIcon,{className:`h-8 w-8`}),(0,o.jsx)(`span`,{className:`text-xs`,children:`Erreur de chargement`})]}):v?(0,o.jsx)(`div`,{className:`animate-pulse`,children:(0,o.jsx)(a.ImageIcon,{className:`h-8 w-8 text-muted-foreground`})}):null}),!D&&(0,o.jsx)(`img`,{ref:z,src:e,alt:s,loading:f?`lazy`:`eager`,onLoad:V,onError:H,onClick:U,className:t.cn(`w-full h-full transition-opacity duration-300`,`object-${h}`,T?`opacity-100`:`opacity-0`,p&&`cursor-zoom-in`,B[_],S),style:{objectPosition:g}}),p&&T&&!D&&(0,o.jsx)(`div`,{className:`absolute bottom-2 right-2 p-1 bg-black/50 rounded text-white`,children:(0,o.jsx)(a.Maximize2,{className:`h-4 w-4`})})]}),p&&(0,o.jsx)(r.Dialog,{open:k,onOpenChange:A,children:(0,o.jsxs)(r.DialogContent,{className:`max-w-[95vw] max-h-[95vh] p-0 overflow-hidden bg-black/95`,onWheel:K,children:[(0,o.jsxs)(`div`,{className:`absolute top-4 right-4 z-50 flex gap-2`,children:[(0,o.jsx)(n.Button,{variant:`secondary`,size:`icon`,onClick:G,disabled:j<=1,children:(0,o.jsx)(a.ZoomOut,{className:`h-4 w-4`})}),(0,o.jsx)(n.Button,{variant:`secondary`,size:`icon`,onClick:W,disabled:j>=m,children:(0,o.jsx)(a.ZoomIn,{className:`h-4 w-4`})}),(0,o.jsx)(n.Button,{variant:`secondary`,size:`icon`,onClick:async()=>{try{let t=await(await fetch(e)).blob(),n=window.URL.createObjectURL(t),r=document.createElement(`a`);r.href=n,r.download=s||`image`,document.body.appendChild(r),r.click(),document.body.removeChild(r),window.URL.revokeObjectURL(n)}catch(e){console.error(`Failed to download image:`,e)}},children:(0,o.jsx)(a.Download,{className:`h-4 w-4`})}),(0,o.jsx)(r.DialogClose,{asChild:!0,children:(0,o.jsx)(n.Button,{variant:`secondary`,size:`icon`,children:(0,o.jsx)(a.X,{className:`h-4 w-4`})})})]}),(0,o.jsxs)(`div`,{className:`absolute bottom-4 left-4 z-50 text-white text-sm bg-black/50 px-2 py-1 rounded`,children:[Math.round(j*100),`%`]}),(0,o.jsx)(`div`,{className:t.cn(`w-full h-full flex items-center justify-center overflow-hidden`,j>1?`cursor-grab`:`cursor-default`,F&&`cursor-grabbing`),onMouseDown:q,onMouseMove:J,onMouseUp:Y,onMouseLeave:Y,children:(0,o.jsx)(`img`,{src:e,alt:s,className:`max-w-none select-none`,style:{transform:`scale(${j}) translate(${N.x/j}px, ${N.y/j}px)`,transition:F?`none`:`transform 0.2s ease-out`},draggable:!1})})]})})]})}function c({images:e,columns:n=3,gap:r=4,aspectRatio:i=`1/1`,className:a}){return(0,o.jsx)(`div`,{className:t.cn(`grid`,a),style:{gridTemplateColumns:`repeat(${n}, 1fr)`,gap:`${r*4}px`},children:e.map((e,t)=>(0,o.jsx)(s,{src:e.thumbnail||e.src,alt:e.alt,zoomable:!0,objectFit:`cover`,containerClassName:`w-full`,aspectRatio:i},t))})}exports.WakaImageGallery=c,exports.default=s;

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

@@ -0,0 +1,189 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Button as t } from "../button/index.es.js";
+import { Dialog as n, DialogClose as r, DialogContent as i } from "../dialog/index.es.js";
+import * as a from "react";
+import { Download as o, ImageIcon as s, Maximize2 as c, X as l, ZoomIn as u, ZoomOut as d } from "lucide-react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/waka-image/index.tsx
+function h({ src: h, alt: g, width: _, height: v, placeholder: y, placeholderColor: b = "bg-muted", lazy: x = !0, zoomable: S = !1, maxZoom: C = 3, objectFit: w = "cover", objectPosition: T = "center", rounded: E = "md", showLoader: D = !0, onLoad: O, onError: k, onZoomChange: A, className: ee, containerClassName: te, aspectRatio: j }) {
+	let [M, N] = a.useState(!1), [P, F] = a.useState(!1), [I, L] = a.useState(!1), [R, z] = a.useState(1), [B, V] = a.useState({
+		x: 0,
+		y: 0
+	}), [H, U] = a.useState(!1), [W, G] = a.useState({
+		x: 0,
+		y: 0
+	}), K = a.useRef(null), q = {
+		none: "rounded-none",
+		sm: "rounded-sm",
+		md: "rounded-md",
+		lg: "rounded-lg",
+		xl: "rounded-xl",
+		full: "rounded-full"
+	}, J = () => {
+		N(!0), O?.();
+	}, Y = () => {
+		F(!0), k?.();
+	}, X = () => {
+		S && (L(!0), z(1), V({
+			x: 0,
+			y: 0
+		}));
+	}, Z = () => {
+		let e = Math.min(R + .5, C);
+		z(e), A?.(e);
+	}, Q = () => {
+		let e = Math.max(R - .5, 1);
+		z(e), e === 1 && V({
+			x: 0,
+			y: 0
+		}), A?.(e);
+	}, ne = (e) => {
+		e.preventDefault(), e.deltaY < 0 ? Z() : Q();
+	}, re = (e) => {
+		R > 1 && (U(!0), G({
+			x: e.clientX - B.x,
+			y: e.clientY - B.y
+		}));
+	}, ie = (e) => {
+		H && R > 1 && V({
+			x: e.clientX - W.x,
+			y: e.clientY - W.y
+		});
+	}, $ = () => {
+		U(!1);
+	};
+	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("div", {
+		className: e("relative overflow-hidden", q[E], te),
+		style: {
+			width: _,
+			height: v,
+			aspectRatio: j
+		},
+		children: [
+			(!M || P) && /* @__PURE__ */ p("div", {
+				className: e("absolute inset-0 flex items-center justify-center", b, q[E]),
+				children: y ? /* @__PURE__ */ p("img", {
+					src: y,
+					alt: "",
+					className: e("w-full h-full", `object-${w}`),
+					style: { objectPosition: T }
+				}) : P ? /* @__PURE__ */ m("div", {
+					className: "flex flex-col items-center gap-2 text-muted-foreground",
+					children: [/* @__PURE__ */ p(s, { className: "h-8 w-8" }), /* @__PURE__ */ p("span", {
+						className: "text-xs",
+						children: "Erreur de chargement"
+					})]
+				}) : D ? /* @__PURE__ */ p("div", {
+					className: "animate-pulse",
+					children: /* @__PURE__ */ p(s, { className: "h-8 w-8 text-muted-foreground" })
+				}) : null
+			}),
+			!P && /* @__PURE__ */ p("img", {
+				ref: K,
+				src: h,
+				alt: g,
+				loading: x ? "lazy" : "eager",
+				onLoad: J,
+				onError: Y,
+				onClick: X,
+				className: e("w-full h-full transition-opacity duration-300", `object-${w}`, M ? "opacity-100" : "opacity-0", S && "cursor-zoom-in", q[E], ee),
+				style: { objectPosition: T }
+			}),
+			S && M && !P && /* @__PURE__ */ p("div", {
+				className: "absolute bottom-2 right-2 p-1 bg-black/50 rounded text-white",
+				children: /* @__PURE__ */ p(c, { className: "h-4 w-4" })
+			})
+		]
+	}), S && /* @__PURE__ */ p(n, {
+		open: I,
+		onOpenChange: L,
+		children: /* @__PURE__ */ m(i, {
+			className: "max-w-[95vw] max-h-[95vh] p-0 overflow-hidden bg-black/95",
+			onWheel: ne,
+			children: [
+				/* @__PURE__ */ m("div", {
+					className: "absolute top-4 right-4 z-50 flex gap-2",
+					children: [
+						/* @__PURE__ */ p(t, {
+							variant: "secondary",
+							size: "icon",
+							onClick: Q,
+							disabled: R <= 1,
+							children: /* @__PURE__ */ p(d, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ p(t, {
+							variant: "secondary",
+							size: "icon",
+							onClick: Z,
+							disabled: R >= C,
+							children: /* @__PURE__ */ p(u, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ p(t, {
+							variant: "secondary",
+							size: "icon",
+							onClick: async () => {
+								try {
+									let e = await (await fetch(h)).blob(), t = window.URL.createObjectURL(e), n = document.createElement("a");
+									n.href = t, n.download = g || "image", document.body.appendChild(n), n.click(), document.body.removeChild(n), window.URL.revokeObjectURL(t);
+								} catch (e) {
+									console.error("Failed to download image:", e);
+								}
+							},
+							children: /* @__PURE__ */ p(o, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ p(r, {
+							asChild: !0,
+							children: /* @__PURE__ */ p(t, {
+								variant: "secondary",
+								size: "icon",
+								children: /* @__PURE__ */ p(l, { className: "h-4 w-4" })
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "absolute bottom-4 left-4 z-50 text-white text-sm bg-black/50 px-2 py-1 rounded",
+					children: [Math.round(R * 100), "%"]
+				}),
+				/* @__PURE__ */ p("div", {
+					className: e("w-full h-full flex items-center justify-center overflow-hidden", R > 1 ? "cursor-grab" : "cursor-default", H && "cursor-grabbing"),
+					onMouseDown: re,
+					onMouseMove: ie,
+					onMouseUp: $,
+					onMouseLeave: $,
+					children: /* @__PURE__ */ p("img", {
+						src: h,
+						alt: g,
+						className: "max-w-none select-none",
+						style: {
+							transform: `scale(${R}) translate(${B.x / R}px, ${B.y / R}px)`,
+							transition: H ? "none" : "transform 0.2s ease-out"
+						},
+						draggable: !1
+					})
+				})
+			]
+		})
+	})] });
+}
+function g({ images: t, columns: n = 3, gap: r = 4, aspectRatio: i = "1/1", className: a }) {
+	return /* @__PURE__ */ p("div", {
+		className: e("grid", a),
+		style: {
+			gridTemplateColumns: `repeat(${n}, 1fr)`,
+			gap: `${r * 4}px`
+		},
+		children: t.map((e, t) => /* @__PURE__ */ p(h, {
+			src: e.thumbnail || e.src,
+			alt: e.alt,
+			zoomable: !0,
+			objectFit: "cover",
+			containerClassName: "w-full",
+			aspectRatio: i
+		}, t))
+	});
+}
+//#endregion
+export { g as WakaImageGallery, h as default };

package/dist/components/waka-incident-timeline/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={critical:{icon:r.AlertTriangle,color:`text-red-600 dark:text-red-400`,bgColor:`bg-red-100 dark:bg-red-900/30`,borderColor:`border-red-500`,label:`Critical`},major:{icon:r.AlertCircle,color:`text-orange-600 dark:text-orange-400`,bgColor:`bg-orange-100 dark:bg-orange-900/30`,borderColor:`border-orange-500`,label:`Major`},minor:{icon:r.AlertCircle,color:`text-yellow-600 dark:text-yellow-400`,bgColor:`bg-yellow-100 dark:bg-yellow-900/30`,borderColor:`border-yellow-500`,label:`Minor`},info:{icon:r.Info,color:`text-blue-600 dark:text-blue-400`,bgColor:`bg-blue-100 dark:bg-blue-900/30`,borderColor:`border-blue-500`,label:`Info`}},o={investigating:{icon:r.Search,color:`text-purple-600 dark:text-purple-400`,bgColor:`bg-purple-100 dark:bg-purple-900/30`,label:`Investigating`},identified:{icon:r.Eye,color:`text-blue-600 dark:text-blue-400`,bgColor:`bg-blue-100 dark:bg-blue-900/30`,label:`Identified`},monitoring:{icon:r.Clock,color:`text-amber-600 dark:text-amber-400`,bgColor:`bg-amber-100 dark:bg-amber-900/30`,label:`Monitoring`},resolved:{icon:r.CheckCircle2,color:`text-green-600 dark:text-green-400`,bgColor:`bg-green-100 dark:bg-green-900/30`,label:`Resolved`}};function s(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?`Just now`:n<60?`${n}m ago`:r<24?`${r}h ago`:i<7?`${i}d ago`:e.toLocaleDateString()}function c(e,t){let n=(t||new Date).getTime()-e.getTime(),r=Math.floor(n/6e4),i=Math.floor(n/36e5),a=Math.floor(n/864e5);return r<60?`${r}m`:i<24?`${i}h ${r%60}m`:`${a}d ${i%24}h`}function l(e,t,n=864e5){let r=(t||new Date).getTime()-e.getTime();return Math.min(r/n*100,100)}function u(e){return e.toLocaleTimeString(void 0,{hour:`2-digit`,minute:`2-digit`})}function d({status:e,className:n}){let r=o[e],a=r.icon;return(0,i.jsxs)(`span`,{className:t.cn(`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium`,r.bgColor,r.color,n),children:[(0,i.jsx)(a,{className:`h-3 w-3`}),r.label]})}function f({severity:e,size:n=`md`}){let r=a[e],o=r.icon;return(0,i.jsx)(`div`,{className:t.cn(`rounded-full flex items-center justify-center flex-shrink-0 border-2 border-background shadow-sm`,{sm:`h-6 w-6`,md:`h-8 w-8`,lg:`h-10 w-10`}[n],r.bgColor),children:(0,i.jsx)(o,{className:t.cn({sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`}[n],r.color)})})}function p({startedAt:e,resolvedAt:n,severity:r}){let o=l(e,n),s=a[r];return(0,i.jsxs)(`div`,{className:`w-full`,children:[(0,i.jsxs)(`div`,{className:`flex items-center justify-between text-xs text-muted-foreground mb-1`,children:[(0,i.jsxs)(`span`,{children:[`Duration: `,c(e,n)]}),!n&&(0,i.jsx)(`span`,{className:`text-amber-600 dark:text-amber-400`,children:`Ongoing`})]}),(0,i.jsx)(`div`,{className:`h-1.5 bg-muted rounded-full overflow-hidden`,children:(0,i.jsx)(`div`,{className:t.cn(`h-full rounded-full transition-all duration-500`,s.borderColor.replace(`border-`,`bg-`)),style:{width:`${o}%`}})})]})}function m({impact:e}){return(0,i.jsxs)(`div`,{className:`flex items-center gap-3 text-xs text-muted-foreground`,children:[e.services!==void 0&&(0,i.jsxs)(`span`,{className:`inline-flex items-center gap-1`,children:[(0,i.jsx)(r.Server,{className:`h-3 w-3`}),e.services,` service`,e.services===1?``:`s`]}),e.users!==void 0&&(0,i.jsxs)(`span`,{className:`inline-flex items-center gap-1`,children:[(0,i.jsx)(r.Users,{className:`h-3 w-3`}),e.users.toLocaleString(),` user`,e.users===1?``:`s`]})]})}function h({update:e}){return(0,i.jsx)(`div`,{className:`flex gap-3 py-2 border-l-2 border-muted pl-3`,children:(0,i.jsxs)(`div`,{className:`flex-1`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 text-xs text-muted-foreground mb-1`,children:[(0,i.jsx)(`span`,{children:u(e.timestamp)}),(0,i.jsx)(`span`,{className:`font-medium text-foreground`,children:e.status})]}),(0,i.jsx)(`p`,{className:`text-sm`,children:e.message})]})})}function g({incident:e,onIncidentClick:o,showImpact:c,isNew:l}){let[u,f]=n.useState(!1),g=a[e.severity],_=e.updates&&e.updates.length>0;return(0,i.jsxs)(`div`,{className:t.cn(`relative p-4 rounded-lg border bg-card transition-all duration-300`,g.borderColor,`border-l-4`,o&&`cursor-pointer hover:shadow-md`,l&&`animate-in slide-in-from-left-5 fade-in duration-500`),onClick:()=>o?.(e.id),children:[(0,i.jsxs)(`div`,{className:`flex items-start gap-3 mb-3`,children:[(0,i.jsxs)(`div`,{className:`flex-1`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2 mb-1`,children:[(0,i.jsx)(`h4`,{className:`font-semibold text-sm`,children:e.title}),(0,i.jsx)(d,{status:e.status})]}),e.description&&(0,i.jsx)(`p`,{className:`text-sm text-muted-foreground line-clamp-2`,children:e.description})]}),(0,i.jsxs)(`div`,{className:`text-xs text-muted-foreground text-right`,children:[(0,i.jsx)(`div`,{children:s(e.startedAt)}),(0,i.jsx)(`div`,{className:`mt-0.5`,children:(0,i.jsx)(`span`,{className:t.cn(`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium`,g.bgColor,g.color),children:g.label})})]})]}),(0,i.jsx)(`div`,{className:`mb-3`,children:(0,i.jsx)(p,{startedAt:e.startedAt,resolvedAt:e.resolvedAt,severity:e.severity})}),c&&e.impact&&(0,i.jsx)(`div`,{className:`mb-3`,children:(0,i.jsx)(m,{impact:e.impact})}),_&&(0,i.jsxs)(`div`,{children:[(0,i.jsxs)(`button`,{className:`flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors`,onClick:e=>{e.stopPropagation(),f(!u)},children:[u?(0,i.jsx)(r.ChevronUp,{className:`h-3 w-3`}):(0,i.jsx)(r.ChevronDown,{className:`h-3 w-3`}),e.updates.length,` update`,e.updates.length===1?``:`s`]}),u&&(0,i.jsx)(`div`,{className:`mt-3 space-y-1 animate-in slide-in-from-top-2 fade-in duration-200`,children:e.updates.map((e,t)=>(0,i.jsx)(h,{update:e},t))})]})]})}function _({date:e}){return(0,i.jsxs)(`div`,{className:`flex items-center gap-2 py-2`,children:[(0,i.jsx)(`div`,{className:`h-px flex-1 bg-border`}),(0,i.jsx)(`span`,{className:`text-xs font-medium text-muted-foreground px-2`,children:(e=>{let t=new Date,n=new Date(t);return n.setDate(n.getDate()-1),e.toDateString()===t.toDateString()?`Today`:e.toDateString()===n.toDateString()?`Yesterday`:e.toLocaleDateString(void 0,{weekday:`short`,month:`short`,day:`numeric`})})(e)}),(0,i.jsx)(`div`,{className:`h-px flex-1 bg-border`})]})}function v({severityFilter:e,statusFilter:n,onSeverityChange:s,onStatusChange:c}){return(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2 p-3 bg-muted/50 rounded-lg mb-4`,children:[(0,i.jsx)(r.Filter,{className:`h-4 w-4 text-muted-foreground`}),(0,i.jsx)(`span`,{className:`text-xs text-muted-foreground mr-2`,children:`Filter:`}),(0,i.jsx)(`div`,{className:`flex items-center gap-1`,children:Object.keys(a).map(n=>{let r=a[n],o=e===n;return(0,i.jsx)(`button`,{className:t.cn(`px-2 py-1 rounded text-xs font-medium transition-all`,o?t.cn(r.bgColor,r.color):`bg-background hover:bg-muted text-muted-foreground`),onClick:()=>s(o?null:n),children:r.label},n)})}),(0,i.jsx)(`div`,{className:`h-4 w-px bg-border mx-1`}),(0,i.jsx)(`div`,{className:`flex items-center gap-1`,children:Object.keys(o).map(e=>{let r=o[e],a=n===e;return(0,i.jsx)(`button`,{className:t.cn(`px-2 py-1 rounded text-xs font-medium transition-all`,a?t.cn(r.bgColor,r.color):`bg-background hover:bg-muted text-muted-foreground`),onClick:()=>c(a?null:e),children:r.label},e)})}),(e||n)&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:`h-4 w-px bg-border mx-1`}),(0,i.jsxs)(`button`,{className:`px-2 py-1 rounded text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-all flex items-center gap-1`,onClick:()=>{s(null),c(null)},children:[(0,i.jsx)(r.X,{className:`h-3 w-3`}),`Clear`]})]})]})}function y({incidents:e,onIncidentClick:a,showFilters:o=!0,showImpact:s=!0,maxItems:c,className:l}){let[u,d]=n.useState(null),[p,m]=n.useState(null),[h,y]=n.useState(new Set);n.useEffect(()=>{y(new Set(e.map(e=>e.id)))},[e]);let b=n.useMemo(()=>{let t=e;return u&&(t=t.filter(e=>e.severity===u)),p&&(t=t.filter(e=>e.status===p)),c&&c>0&&(t=t.slice(0,c)),t},[e,u,p,c]),x=n.useMemo(()=>{let e=[],t=null;return b.forEach(n=>{let r=new Date(n.startedAt).toDateString();r===t?e[e.length-1].incidents.push(n):(t=r,e.push({date:new Date(n.startedAt),incidents:[n]}))}),e},[b]),S=e=>!h.has(e);return e.length===0?(0,i.jsxs)(`div`,{className:t.cn(`flex flex-col items-center justify-center py-12 text-center`,l),children:[(0,i.jsx)(r.CheckCircle2,{className:`h-12 w-12 text-green-500 mb-4`}),(0,i.jsx)(`h3`,{className:`font-semibold text-lg mb-1`,children:`All Systems Operational`}),(0,i.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`No incidents to display`})]}):(0,i.jsxs)(`div`,{className:t.cn(`w-full`,l),children:[o&&(0,i.jsx)(v,{severityFilter:u,statusFilter:p,onSeverityChange:d,onStatusChange:m}),(0,i.jsxs)(`div`,{className:`relative`,children:[(0,i.jsx)(`div`,{className:`absolute left-4 top-0 bottom-0 w-0.5 bg-border`}),(0,i.jsx)(`div`,{className:`space-y-4`,children:x.map((e,t)=>(0,i.jsxs)(`div`,{children:[(0,i.jsxs)(`div`,{className:`relative pl-10 mb-3`,children:[(0,i.jsx)(`div`,{className:`absolute left-2.5 top-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-background border-2 border-muted`}),(0,i.jsx)(_,{date:e.date})]}),(0,i.jsx)(`div`,{className:`space-y-3`,children:e.incidents.map(e=>(0,i.jsxs)(`div`,{className:`relative flex items-start gap-4 pl-10`,children:[(0,i.jsx)(`div`,{className:`absolute left-0`,children:(0,i.jsx)(f,{severity:e.severity,size:`md`})}),(0,i.jsx)(`div`,{className:`flex-1`,children:(0,i.jsx)(g,{incident:e,onIncidentClick:a,showImpact:s,isNew:S(e.id)})})]},e.id))})]},t))}),b.length===0&&e.length>0&&(0,i.jsxs)(`div`,{className:`flex flex-col items-center justify-center py-12 text-center`,children:[(0,i.jsx)(r.Filter,{className:`h-8 w-8 text-muted-foreground mb-3`}),(0,i.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`No incidents match the current filters`})]})]})]})}exports.default=y;