@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-mention-input/index.es.js

@@ -0,0 +1,436 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { AtSign as n, Hash as r, Loader2 as i, MessageSquare as a, User as o, Users as s, X as c } from "lucide-react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/waka-mention-input/index.tsx
+var f = [{
+	trigger: "@",
+	type: "user",
+	icon: /* @__PURE__ */ u(o, { className: "h-4 w-4" }),
+	data: []
+}, {
+	trigger: "#",
+	type: "channel",
+	icon: /* @__PURE__ */ u(r, { className: "h-4 w-4" }),
+	data: []
+}];
+function p(e = {}) {
+	let { initialValue: n = "", triggers: r = f, maxMentions: i, searchDebounce: a = 300 } = e, [o, s] = t.useState(n), [c, l] = t.useState([]), u = t.useMemo(() => {
+		let e = o;
+		for (let t of c) {
+			let n = RegExp(`${m(t.trigger)}\\[${m(t.display)}\\]\\(${m(t.id)}\\)`, "g");
+			e = e.replace(n, `${t.trigger}${t.display}`);
+		}
+		return e;
+	}, [o, c]);
+	return {
+		value: o,
+		plainText: u,
+		mentions: c,
+		setValue: t.useCallback((e) => {
+			s(e);
+			let t = [];
+			for (let n of r) {
+				let r = RegExp(`${m(n.trigger)}\\[([^\\]]+)\\]\\(([^)]+)\\)`, "g"), i;
+				for (; (i = r.exec(e)) !== null;) t.push({
+					id: i[2],
+					type: n.type,
+					display: i[1],
+					value: i[1],
+					trigger: n.trigger,
+					startIndex: i.index,
+					endIndex: i.index + i[0].length
+				});
+			}
+			l(t);
+		}, [r]),
+		insertMention: t.useCallback((e, t) => {
+			if (i && c.length >= i) return;
+			let n = {
+				id: e.id,
+				type: e.type,
+				display: e.display,
+				value: e.value,
+				trigger: t,
+				startIndex: 0,
+				endIndex: 0
+			};
+			l((e) => [...e, n]);
+		}, [i, c.length]),
+		removeMention: t.useCallback((e) => {
+			l((t) => t.filter((t) => t.id !== e));
+		}, []),
+		clear: t.useCallback(() => {
+			s(""), l([]);
+		}, []),
+		mentionCount: c.length,
+		characterCount: u.length
+	};
+}
+function m(e) {
+	return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function h(e, t) {
+	let n = document.createElement("div"), r = getComputedStyle(e);
+	for (let e of Array.from(r)) n.style.setProperty(e, r.getPropertyValue(e));
+	n.style.position = "absolute", n.style.visibility = "hidden", n.style.whiteSpace = "pre-wrap", n.style.wordWrap = "break-word", n.style.overflow = "hidden", n.style.width = `${e.offsetWidth}px`, n.style.height = "auto", n.textContent = e.value.substring(0, t);
+	let i = document.createElement("span");
+	i.textContent = e.value.substring(t) || ".", n.appendChild(i), document.body.appendChild(n);
+	let a = e.getBoundingClientRect(), o = i.getBoundingClientRect(), s = {
+		top: o.top - a.top + e.scrollTop,
+		left: o.left - a.left + e.scrollLeft
+	};
+	return document.body.removeChild(n), s;
+}
+function ee({ items: n, highlightedIndex: r, onSelect: a, onHighlight: s, trigger: c, loading: l, position: f, visible: p }) {
+	let m = t.useRef(null);
+	return t.useEffect(() => {
+		if (m.current && r >= 0) {
+			let e = m.current.children[r];
+			e && e.scrollIntoView({ block: "nearest" });
+		}
+	}, [r]), p ? /* @__PURE__ */ u("div", {
+		className: e("absolute z-50 min-w-[200px] max-w-[300px] max-h-[240px] overflow-y-auto", "bg-popover border rounded-lg shadow-lg", "animate-in fade-in-0 zoom-in-95 duration-150"),
+		style: {
+			top: f.top + 24,
+			left: Math.max(0, f.left - 8)
+		},
+		ref: m,
+		children: l ? /* @__PURE__ */ u("div", {
+			className: "flex items-center justify-center p-4",
+			children: /* @__PURE__ */ u(i, { className: "h-5 w-5 animate-spin text-muted-foreground" })
+		}) : n.length === 0 ? /* @__PURE__ */ u("div", {
+			className: "p-3 text-sm text-muted-foreground text-center",
+			children: "No results found"
+		}) : /* @__PURE__ */ u("div", {
+			className: "p-1",
+			children: n.map((t, n) => /* @__PURE__ */ d("button", {
+				type: "button",
+				className: e("w-full flex items-center gap-3 px-3 py-2 rounded-md text-left", "transition-colors duration-100", r === n ? "bg-accent text-accent-foreground" : "hover:bg-muted"),
+				onClick: () => a(t),
+				onMouseEnter: () => s(n),
+				children: [
+					t.avatar ? /* @__PURE__ */ u("img", {
+						src: t.avatar,
+						alt: t.display,
+						className: "h-8 w-8 rounded-full object-cover flex-shrink-0"
+					}) : t.icon ? /* @__PURE__ */ u("div", {
+						className: "h-8 w-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0",
+						children: t.icon
+					}) : /* @__PURE__ */ u("div", {
+						className: "h-8 w-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0",
+						children: c.icon || /* @__PURE__ */ u(o, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "flex-1 min-w-0",
+						children: [/* @__PURE__ */ u("div", {
+							className: "font-medium text-sm truncate",
+							children: t.display
+						}), t.description && /* @__PURE__ */ u("div", {
+							className: "text-xs text-muted-foreground truncate",
+							children: t.description
+						})]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "text-xs text-muted-foreground flex-shrink-0",
+						children: [c.trigger, t.value]
+					})
+				]
+			}, t.id))
+		})
+	}) : null;
+}
+function g({ text: t, mentions: i, triggers: a }) {
+	let o = [], s = 0, c = [...i].sort((e, t) => e.startIndex - t.startIndex);
+	for (let i of c) {
+		i.startIndex > s && o.push(/* @__PURE__ */ u("span", { children: t.substring(s, i.startIndex) }, `text-${s}`));
+		let c = a.find((e) => e.trigger === i.trigger);
+		o.push(/* @__PURE__ */ d("span", {
+			className: e("inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-md", "bg-primary/10 text-primary font-medium"),
+			children: [c?.icon || (i.trigger === "@" ? /* @__PURE__ */ u(n, { className: "h-3 w-3" }) : /* @__PURE__ */ u(r, { className: "h-3 w-3" })), i.display]
+		}, `mention-${i.id}-${i.startIndex}`)), s = i.endIndex;
+	}
+	return s < t.length && o.push(/* @__PURE__ */ u("span", { children: t.substring(s) }, `text-${s}`)), /* @__PURE__ */ u(l, { children: o });
+}
+var _ = t.forwardRef(({ value: i, onChange: o, triggers: l = f, placeholder: p = "Type @ to mention someone...", disabled: _ = !1, error: v, maxLength: y, maxMentions: b, showCharacterCount: x = !1, showMentionCount: S = !1, minHeight: C = 80, maxHeight: te = 300, showPreview: ne = !1, className: w, label: T, description: E, searchDebounce: D = 300, autoFocus: re = !1, onFocus: ie, onBlur: ae, onSubmit: oe }, se) => {
+	let O = t.useRef(null), k = t.useRef(null), [A, j] = t.useState(i || ""), [M, N] = t.useState([]), [ce, P] = t.useState(!1), [F, I] = t.useState(!1), [le, ue] = t.useState({
+		top: 0,
+		left: 0
+	}), [L, R] = t.useState([]), [z, B] = t.useState(0), [V, H] = t.useState(null), [U, de] = t.useState(""), [fe, W] = t.useState(!1), G = t.useRef(void 0), K = t.useRef(-1);
+	t.useEffect(() => {
+		i !== void 0 && i !== A && (j(i), q(i));
+	}, [i]);
+	let q = t.useCallback((e) => {
+		let t = [];
+		for (let n of l) {
+			let r = RegExp(`${m(n.trigger)}\\[([^\\]]+)\\]\\(([^)]+)\\)`, "g"), i;
+			for (; (i = r.exec(e)) !== null;) t.push({
+				id: i[2],
+				type: n.type,
+				display: i[1],
+				value: i[1],
+				trigger: n.trigger,
+				startIndex: i.index,
+				endIndex: i.index + i[0].length
+			});
+		}
+		N(t);
+	}, [l]);
+	t.useEffect(() => {
+		A && q(A);
+	}, []);
+	let J = t.useMemo(() => {
+		let e = A;
+		for (let t of M) {
+			let n = `${t.trigger}[${t.display}](${t.id})`;
+			e = e.replace(n, `${t.trigger}${t.display}`);
+		}
+		return e;
+	}, [A, M]), Y = t.useCallback(async (e, t) => {
+		if (t.onSearch) {
+			W(!0);
+			try {
+				R(await t.onSearch(e));
+			} catch {
+				R([]);
+			} finally {
+				W(!1);
+			}
+		} else t.data && R(t.data.filter((t) => t.display.toLowerCase().includes(e.toLowerCase()) || t.value.toLowerCase().includes(e.toLowerCase())));
+	}, []);
+	t.useEffect(() => {
+		if (!(!V || !F)) return G.current && clearTimeout(G.current), V.onSearch ? G.current = setTimeout(() => {
+			Y(U, V);
+		}, D) : Y(U, V), () => {
+			G.current && clearTimeout(G.current);
+		};
+	}, [
+		U,
+		V,
+		F,
+		Y,
+		D
+	]);
+	let pe = (e) => {
+		let t = e.target.value, n = e.target.selectionStart, r = null, i = -1;
+		for (let e of l) {
+			for (let a = n - 1; a >= 0; a--) {
+				if (t[a] === e.trigger) {
+					if ((a === 0 || /\s/.test(t[a - 1])) && (!t.substring(a + 1, n).includes(" ") || e.allowSpaces)) {
+						r = e, i = a;
+						break;
+					}
+					break;
+				}
+				if (/\s/.test(t[a])) break;
+			}
+			if (r) break;
+		}
+		r && i >= 0 ? (de(t.substring(i + 1, n)), H(r), K.current = i, O.current && ue(h(O.current, i)), I(!0), B(0)) : (I(!1), H(null), K.current = -1), j(t), q(t);
+		let a = [];
+		for (let e of l) {
+			let n = RegExp(`${m(e.trigger)}\\[([^\\]]+)\\]\\(([^)]+)\\)`, "g"), r;
+			for (; (r = n.exec(t)) !== null;) a.push({
+				id: r[2],
+				type: e.type,
+				display: r[1],
+				value: r[1],
+				trigger: e.trigger,
+				startIndex: r.index,
+				endIndex: r.index + r[0].length
+			});
+		}
+		let s = t;
+		for (let e of a) {
+			let t = `${e.trigger}[${e.display}](${e.id})`;
+			s = s.replace(t, `${e.trigger}${e.display}`);
+		}
+		o?.(t, s, a);
+	}, X = (e) => {
+		if (!V || K.current < 0 || b && M.length >= b) return;
+		let t = O.current;
+		if (!t) return;
+		let n = t.selectionStart, r = A.substring(0, K.current), i = A.substring(n), a = `${V.trigger}[${e.display}](${e.id})`, s = `${r}${a} ${i}`;
+		j(s), I(!1), H(null), K.current = -1;
+		let c = r.length + a.length + 1;
+		setTimeout(() => {
+			t.focus(), t.setSelectionRange(c, c);
+		}, 0);
+		let u = [];
+		for (let e of l) {
+			let t = RegExp(`${m(e.trigger)}\\[([^\\]]+)\\]\\(([^)]+)\\)`, "g"), n;
+			for (; (n = t.exec(s)) !== null;) u.push({
+				id: n[2],
+				type: e.type,
+				display: n[1],
+				value: n[1],
+				trigger: e.trigger,
+				startIndex: n.index,
+				endIndex: n.index + n[0].length
+			});
+		}
+		N(u);
+		let d = s;
+		for (let e of u) {
+			let t = `${e.trigger}[${e.display}](${e.id})`;
+			d = d.replace(t, `${e.trigger}${e.display}`);
+		}
+		o?.(s, d, u);
+	}, Z = (e) => {
+		if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+			e.preventDefault(), oe?.(A, J, M);
+			return;
+		}
+		if (F) switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), B((e) => e < L.length - 1 ? e + 1 : 0);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), B((e) => e > 0 ? e - 1 : L.length - 1);
+				break;
+			case "Enter":
+			case "Tab":
+				e.preventDefault(), L[z] && X(L[z]);
+				break;
+			case "Escape":
+				e.preventDefault(), I(!1), H(null);
+				break;
+		}
+	}, me = () => {
+		P(!0), ie?.();
+	}, he = (e) => {
+		k.current?.contains(e.relatedTarget) || (P(!1), setTimeout(() => {
+			I(!1);
+		}, 150), ae?.());
+	}, ge = (e) => {
+		let t = M.find((t) => t.id === e);
+		if (!t) return;
+		let n = `${t.trigger}[${t.display}](${t.id})`, r = A.replace(n, "");
+		j(r), q(r);
+		let i = r, a = M.filter((t) => t.id !== e);
+		for (let e of a) {
+			let t = `${e.trigger}[${e.display}](${e.id})`;
+			i = i.replace(t, `${e.trigger}${e.display}`);
+		}
+		o?.(r, i, a);
+	};
+	t.useImperativeHandle(se, () => O.current, []);
+	let Q = J.length, $ = M.length, _e = y ? Q > y : !1, ve = b ? $ > b : !1;
+	return /* @__PURE__ */ d("div", {
+		ref: k,
+		className: e("space-y-1.5", w),
+		children: [
+			T && /* @__PURE__ */ u("label", {
+				className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+				children: T
+			}),
+			E && /* @__PURE__ */ u("p", {
+				className: "text-sm text-muted-foreground",
+				children: E
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ d("div", {
+					className: e("relative rounded-lg border bg-background transition-colors", ce && "ring-2 ring-ring ring-offset-2 ring-offset-background", v && "border-destructive", _ && "opacity-50 cursor-not-allowed"),
+					children: [
+						/* @__PURE__ */ u("textarea", {
+							ref: O,
+							value: A,
+							onChange: pe,
+							onKeyDown: Z,
+							onFocus: me,
+							onBlur: he,
+							placeholder: p,
+							disabled: _,
+							autoFocus: re,
+							className: e("w-full resize-none bg-transparent px-3 py-2 text-sm", "placeholder:text-muted-foreground", "focus:outline-none", "disabled:cursor-not-allowed"),
+							style: {
+								minHeight: C,
+								maxHeight: te
+							}
+						}),
+						V && /* @__PURE__ */ u(ee, {
+							items: L,
+							highlightedIndex: z,
+							onSelect: X,
+							onHighlight: B,
+							trigger: V,
+							loading: fe,
+							position: le,
+							visible: F
+						}),
+						(x || S) && /* @__PURE__ */ d("div", {
+							className: "flex items-center justify-between px-3 py-1.5 border-t bg-muted/30 text-xs text-muted-foreground",
+							children: [/* @__PURE__ */ u("div", {
+								className: "flex items-center gap-3",
+								children: S && /* @__PURE__ */ d("span", {
+									className: e(ve && "text-destructive"),
+									children: [
+										/* @__PURE__ */ u(s, { className: "h-3 w-3 inline mr-1" }),
+										$,
+										b && ` / ${b}`
+									]
+								})
+							}), x && /* @__PURE__ */ d("span", {
+								className: e(_e && "text-destructive"),
+								children: [Q, y && ` / ${y}`]
+							})]
+						})
+					]
+				}), /* @__PURE__ */ u("div", {
+					className: "flex items-center gap-2 mt-1.5 text-xs text-muted-foreground",
+					children: l.map((e) => /* @__PURE__ */ d("span", {
+						className: "flex items-center gap-1",
+						children: [e.icon || (e.trigger === "@" ? /* @__PURE__ */ u(n, { className: "h-3 w-3" }) : e.trigger === "#" ? /* @__PURE__ */ u(r, { className: "h-3 w-3" }) : /* @__PURE__ */ u(a, { className: "h-3 w-3" })), /* @__PURE__ */ d("span", { children: [
+							e.trigger,
+							" ",
+							e.type
+						] })]
+					}, e.trigger))
+				})]
+			}),
+			v && /* @__PURE__ */ u("p", {
+				className: "text-sm text-destructive",
+				children: v
+			}),
+			ne && A && /* @__PURE__ */ d("div", {
+				className: "p-3 rounded-lg border bg-muted/30",
+				children: [/* @__PURE__ */ u("div", {
+					className: "text-xs text-muted-foreground mb-1.5",
+					children: "Preview"
+				}), /* @__PURE__ */ u("div", {
+					className: "text-sm whitespace-pre-wrap",
+					children: /* @__PURE__ */ u(g, {
+						text: A,
+						mentions: M,
+						triggers: l
+					})
+				})]
+			}),
+			M.length > 0 && /* @__PURE__ */ u("div", {
+				className: "flex flex-wrap gap-1.5",
+				children: M.map((t) => {
+					let i = l.find((e) => e.trigger === t.trigger);
+					return /* @__PURE__ */ d("span", {
+						className: e("inline-flex items-center gap-1 px-2 py-1 rounded-full", "bg-primary/10 text-primary text-xs font-medium", "animate-in fade-in-0 zoom-in-95 duration-200"),
+						children: [
+							i?.icon || (t.trigger === "@" ? /* @__PURE__ */ u(n, { className: "h-3 w-3" }) : /* @__PURE__ */ u(r, { className: "h-3 w-3" })),
+							t.display,
+							/* @__PURE__ */ u("button", {
+								type: "button",
+								onClick: () => ge(t.id),
+								className: "ml-0.5 hover:text-destructive transition-colors",
+								children: /* @__PURE__ */ u(c, { className: "h-3 w-3" })
+							})
+						]
+					}, `${t.id}-${t.startIndex}`);
+				})
+			})
+		]
+	});
+});
+_.displayName = "WakaMentionInput";
+//#endregion
+export { _ as default, p as useMentionInput };

package/dist/components/waka-metric-sparkline/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(`react/jsx-runtime`);function i(e,t){if(e===void 0||t===void 0||t===0)return{direction:`neutral`,percentage:0};let n=e-t,r=n/Math.abs(t)*100;return n>0?{direction:`up`,percentage:r}:n<0?{direction:`down`,percentage:Math.abs(r)}:{direction:`neutral`,percentage:0}}function a(e){let t=1/0,n=-1/0,r=0,i=0;return e.forEach((e,a)=>{e<t&&(t=e,r=a),e>n&&(n=e,i=a)}),{min:t,max:n,minIndex:r,maxIndex:i}}function o({direction:e,percentage:n,color:i}){let a=i||(e===`up`?`text-green-600`:e===`down`?`text-red-600`:`text-muted-foreground`),o=e===`up`?`↑`:e===`down`?`↓`:``;return e===`neutral`?null:(0,r.jsxs)(`span`,{className:t.cn(`inline-flex items-center text-xs font-medium`,a),style:i?{color:i}:void 0,children:[(0,r.jsx)(`span`,{className:`mr-0.5`,children:o}),(0,r.jsxs)(`span`,{children:[n.toFixed(1),`%`]})]})}function s({visible:e,x:n,y:i,value:a,index:o,formatValue:s,containerRef:c}){return e?(0,r.jsxs)(`div`,{className:t.cn(`absolute z-10 px-2 py-1 text-xs font-medium rounded-md shadow-lg`,`bg-foreground text-background`,`animate-in fade-in-0 zoom-in-95 duration-100`,`pointer-events-none whitespace-nowrap`),style:{left:n,top:i-30,transform:`translateX(-50%)`},children:[(0,r.jsx)(`div`,{children:s(a)}),(0,r.jsxs)(`div`,{className:`text-[10px] opacity-70`,children:[`Point `,o+1]}),(0,r.jsx)(`div`,{className:`absolute left-1/2 -translate-x-1/2 -bottom-1 w-2 h-2 rotate-45 bg-foreground`})]}):null}function c({data:e,width:t,height:i,color:o,animated:s,showMinMax:c,onHover:l}){let[u,d]=n.useState(0),[f,p]=n.useState(!s),m=n.useRef(null),h=t-4,g=i-4,{min:_,max:v,minIndex:y,maxIndex:b}=a(e),x=v-_||1,S=e.map((t,n)=>({x:2+n/(e.length-1)*h,y:2+g-(t-_)/x*g,value:t})),C=S.map((e,t)=>`${t===0?`M`:`L`} ${e.x} ${e.y}`).join(` `);return n.useEffect(()=>{m.current&&d(m.current.getTotalLength())},[e]),n.useEffect(()=>{if(s&&u>0){let e=setTimeout(()=>p(!0),50);return()=>clearTimeout(e)}},[s,u]),(0,r.jsxs)(`svg`,{width:t,height:i,className:`overflow-visible`,"aria-hidden":`true`,focusable:`false`,children:[(0,r.jsx)(`path`,{ref:m,d:C,fill:`none`,stroke:o,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`,style:s&&u>0?{strokeDasharray:u,strokeDashoffset:f?0:u,transition:`stroke-dashoffset 1s ease-out`}:void 0}),c&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`circle`,{cx:S[y].x,cy:S[y].y,r:`3`,fill:`white`,stroke:o,strokeWidth:`1.5`,className:`opacity-80`}),(0,r.jsx)(`circle`,{cx:S[b].x,cy:S[b].y,r:`3`,fill:o,stroke:`white`,strokeWidth:`1`})]}),S.map((e,t)=>(0,r.jsx)(`circle`,{cx:e.x,cy:e.y,r:`6`,fill:`transparent`,className:`cursor-pointer`,onMouseEnter:()=>l(t,e.x,e.y),onMouseLeave:()=>l(null,0,0)},t))]})}function l({data:e,width:i,height:o,color:s,animated:c,showMinMax:l,onHover:u}){let[d,f]=n.useState(!c),p=i-4,m=o-4,{min:h,max:g,minIndex:_,maxIndex:v}=a(e),y=g-h||1,b=e.map((t,n)=>({x:2+n/(e.length-1)*p,y:2+m-(t-h)/y*m,value:t})),x=b.map((e,t)=>`${t===0?`M`:`L`} ${e.x} ${e.y}`).join(` `),S=x+` L ${b[b.length-1].x} ${o-2} L ${b[0].x} ${o-2} Z`;return n.useEffect(()=>{if(c){let e=setTimeout(()=>f(!0),50);return()=>clearTimeout(e)}},[c]),(0,r.jsxs)(`svg`,{width:i,height:o,className:`overflow-visible`,"aria-hidden":`true`,focusable:`false`,children:[(0,r.jsx)(`defs`,{children:(0,r.jsxs)(`linearGradient`,{id:`area-gradient-${s.replace(`#`,``)}`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,r.jsx)(`stop`,{offset:`0%`,stopColor:s,stopOpacity:`0.3`}),(0,r.jsx)(`stop`,{offset:`100%`,stopColor:s,stopOpacity:`0.05`})]})}),(0,r.jsx)(`path`,{d:S,fill:`url(#area-gradient-${s.replace(`#`,``)})`,className:t.cn(`transition-opacity duration-500`,d?`opacity-100`:`opacity-0`)}),(0,r.jsx)(`path`,{d:x,fill:`none`,stroke:s,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`,className:t.cn(`transition-opacity duration-500`,d?`opacity-100`:`opacity-0`)}),l&&d&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`circle`,{cx:b[_].x,cy:b[_].y,r:`3`,fill:`white`,stroke:s,strokeWidth:`1.5`,className:`opacity-80`}),(0,r.jsx)(`circle`,{cx:b[v].x,cy:b[v].y,r:`3`,fill:s,stroke:`white`,strokeWidth:`1`})]}),b.map((e,t)=>(0,r.jsx)(`circle`,{cx:e.x,cy:e.y,r:`6`,fill:`transparent`,className:`cursor-pointer`,onMouseEnter:()=>u(t,e.x,e.y),onMouseLeave:()=>u(null,0,0)},t))]})}function u({data:e,width:i,height:o,color:s,animated:c,showMinMax:l,onHover:u}){let[d,f]=n.useState(!c),p=i-4,m=o-4,{min:h,max:g,minIndex:_,maxIndex:v}=a(e),y=g-h||1,b=Math.max(2,p/e.length*.7),x=(p-b*e.length)/(e.length-1||1),S=e.map((e,t)=>{let n=(e-h)/y*m;return{x:2+t*(b+x),y:2+m-n,width:b,height:n,value:e}});return n.useEffect(()=>{if(c){let e=setTimeout(()=>f(!0),50);return()=>clearTimeout(e)}},[c]),(0,r.jsx)(`svg`,{width:i,height:o,className:`overflow-visible`,"aria-hidden":`true`,focusable:`false`,children:S.map((e,n)=>(0,r.jsxs)(`g`,{children:[(0,r.jsx)(`rect`,{x:e.x,y:d?e.y:o-2,width:e.width,height:d?e.height:0,fill:s,rx:`1`,className:t.cn(`transition-all duration-500 ease-out cursor-pointer`,l&&n===_&&`opacity-50`,l&&n===v&&`opacity-100`),style:c?{transitionDelay:`${n*30}ms`}:void 0,onMouseEnter:()=>u(n,e.x+e.width/2,e.y),onMouseLeave:()=>u(null,0,0)}),l&&d&&(n===_||n===v)&&(0,r.jsx)(`circle`,{cx:e.x+e.width/2,cy:n===v?e.y-4:e.y+e.height+4,r:`2`,fill:n===v?s:`white`,stroke:s,strokeWidth:`1`})]},n))})}function d({data:e,value:a,previousValue:d,variant:f=`line`,width:p=80,height:m=24,color:h,showTrend:g=!0,showValue:_=!0,showMinMax:v=!1,animated:y=!0,formatValue:b=e=>e.toLocaleString(),className:x}){let S=n.useRef(null),[C,w]=n.useState({visible:!1,index:0,x:0,y:0,value:0});if(!e||e.length===0)return(0,r.jsx)(`div`,{className:t.cn(`inline-flex items-center gap-2 text-muted-foreground text-sm`,x),children:`No data`});let T=a??e[e.length-1],E=i(T,d??(e.length>1?e[e.length-2]:void 0)),D=h||(E.direction===`up`?`#22c55e`:E.direction===`down`?`#ef4444`:`#6b7280`),O=(t,n,r)=>{w(t===null?e=>({...e,visible:!1}):{visible:!0,index:t,x:n,y:r,value:e[t]})},k=f===`bar`?u:f===`area`?l:c;return(0,r.jsxs)(`div`,{ref:S,className:t.cn(`inline-flex items-center gap-2`,x),children:[_&&(0,r.jsx)(`span`,{className:`text-sm font-medium tabular-nums`,children:b(T)}),(0,r.jsxs)(`div`,{className:`relative`,children:[(0,r.jsx)(k,{data:e,width:p,height:m,color:D,animated:y,showMinMax:v,onHover:O}),(0,r.jsx)(s,{visible:C.visible,x:C.x,y:C.y,value:C.value,index:C.index,formatValue:b,containerRef:S})]}),g&&E.direction!==`neutral`&&(0,r.jsx)(o,{direction:E.direction,percentage:E.percentage,color:h})]})}function f(e={}){let{initialData:t=[],maxPoints:r=20}=e,[i,a]=n.useState(t);return{data:i,setData:a,addPoint:n.useCallback(e=>{a(t=>{let n=[...t,e];return n.length>r?n.slice(-r):n})},[r]),reset:n.useCallback(()=>{a(t)},[t]),clear:n.useCallback(()=>{a([])},[]),currentValue:i[i.length-1],previousValue:i.length>1?i[i.length-2]:void 0}}exports.default=d,exports.useSparklineData=f;

package/dist/components/waka-metric-sparkline/index.d.ts

@@ -41,6 +41,6 @@ export declare function useSparklineData(options?: UseSparklineDataOptions): {
     reset: () => void;
     clear: () => void;
     currentValue: number;
-    previousValue: number;
+    previousValue: number | undefined;
 };
 export default WakaMetricSparkline;