@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-security-score/index.es.js

@@ -0,0 +1,650 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Bug as n, Check as r, ChevronRight as i, Eye as a, FileWarning as o, Globe as s, KeyRound as c, Lock as l, Minus as u, Server as d, Shield as f, ShieldAlert as p, ShieldCheck as m, ShieldX as h, TrendingDown as g, TrendingUp as _, X as v } from "lucide-react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/waka-security-score/index.tsx
+var S = {
+	critical: {
+		color: "#dc2626",
+		bgColor: "bg-red-500/10",
+		borderColor: "border-red-500/30",
+		label: "Critical Risk",
+		icon: /* @__PURE__ */ b(h, { className: "h-5 w-5" })
+	},
+	low: {
+		color: "#f97316",
+		bgColor: "bg-orange-500/10",
+		borderColor: "border-orange-500/30",
+		label: "Low Security",
+		icon: /* @__PURE__ */ b(p, { className: "h-5 w-5" })
+	},
+	medium: {
+		color: "#eab308",
+		bgColor: "bg-yellow-500/10",
+		borderColor: "border-yellow-500/30",
+		label: "Medium Security",
+		icon: /* @__PURE__ */ b(f, { className: "h-5 w-5" })
+	},
+	high: {
+		color: "#22c55e",
+		bgColor: "bg-green-500/10",
+		borderColor: "border-green-500/30",
+		label: "High Security",
+		icon: /* @__PURE__ */ b(m, { className: "h-5 w-5" })
+	},
+	excellent: {
+		color: "#10b981",
+		bgColor: "bg-emerald-500/10",
+		borderColor: "border-emerald-500/30",
+		label: "Excellent",
+		icon: /* @__PURE__ */ b(m, { className: "h-5 w-5" })
+	}
+}, C = {
+	critical: {
+		color: "text-red-600",
+		bgColor: "bg-red-500/10",
+		label: "Critical"
+	},
+	high: {
+		color: "text-orange-600",
+		bgColor: "bg-orange-500/10",
+		label: "High"
+	},
+	medium: {
+		color: "text-yellow-600",
+		bgColor: "bg-yellow-500/10",
+		label: "Medium"
+	},
+	low: {
+		color: "text-blue-600",
+		bgColor: "bg-blue-500/10",
+		label: "Low"
+	}
+}, w = {
+	pending: {
+		color: "text-muted-foreground",
+		bgColor: "bg-muted",
+		label: "Pending",
+		icon: /* @__PURE__ */ b(u, { className: "h-3.5 w-3.5" })
+	},
+	in_progress: {
+		color: "text-blue-600",
+		bgColor: "bg-blue-500/10",
+		label: "In Progress",
+		icon: /* @__PURE__ */ b(_, { className: "h-3.5 w-3.5" })
+	},
+	completed: {
+		color: "text-green-600",
+		bgColor: "bg-green-500/10",
+		label: "Completed",
+		icon: /* @__PURE__ */ b(r, { className: "h-3.5 w-3.5" })
+	},
+	dismissed: {
+		color: "text-muted-foreground",
+		bgColor: "bg-muted/50",
+		label: "Dismissed",
+		icon: /* @__PURE__ */ b(v, { className: "h-3.5 w-3.5" })
+	}
+}, T = {
+	sm: {
+		gaugeSize: 140,
+		strokeWidth: 10,
+		fontSize: "text-2xl",
+		labelSize: "text-xs",
+		padding: "p-4",
+		gap: "gap-4"
+	},
+	md: {
+		gaugeSize: 180,
+		strokeWidth: 14,
+		fontSize: "text-4xl",
+		labelSize: "text-sm",
+		padding: "p-6",
+		gap: "gap-6"
+	},
+	lg: {
+		gaugeSize: 220,
+		strokeWidth: 18,
+		fontSize: "text-5xl",
+		labelSize: "text-base",
+		padding: "p-8",
+		gap: "gap-8"
+	}
+}, E = {
+	authentication: /* @__PURE__ */ b(c, { className: "h-4 w-4" }),
+	authorization: /* @__PURE__ */ b(l, { className: "h-4 w-4" }),
+	encryption: /* @__PURE__ */ b(l, { className: "h-4 w-4" }),
+	vulnerabilities: /* @__PURE__ */ b(n, { className: "h-4 w-4" }),
+	infrastructure: /* @__PURE__ */ b(d, { className: "h-4 w-4" }),
+	network: /* @__PURE__ */ b(s, { className: "h-4 w-4" }),
+	compliance: /* @__PURE__ */ b(o, { className: "h-4 w-4" }),
+	access: /* @__PURE__ */ b(a, { className: "h-4 w-4" })
+};
+function D(e) {
+	return e >= 90 ? "excellent" : e >= 70 ? "high" : e >= 50 ? "medium" : e >= 30 ? "low" : "critical";
+}
+function O(e, t, n, r) {
+	let i = (r - 90) * Math.PI / 180;
+	return {
+		x: e + n * Math.cos(i),
+		y: t + n * Math.sin(i)
+	};
+}
+function k(e, t, n, r, i) {
+	let a = O(e, t, n, i), o = O(e, t, n, r), s = i - r <= 180 ? "0" : "1";
+	return [
+		"M",
+		a.x,
+		a.y,
+		"A",
+		n,
+		n,
+		0,
+		s,
+		0,
+		o.x,
+		o.y
+	].join(" ");
+}
+function A(e) {
+	return e >= 90 ? "#10b981" : e >= 70 ? "#22c55e" : e >= 50 ? "#eab308" : e >= 30 ? "#f97316" : "#dc2626";
+}
+function j({ initialScore: e = 0, initialCategories: n = [], initialRecommendations: r = [], onScoreUpdate: i } = {}) {
+	let [a, o] = t.useState(e), [s, c] = t.useState(n), [l, u] = t.useState(r), [d, f] = t.useState([{
+		timestamp: /* @__PURE__ */ new Date(),
+		score: e
+	}]), p = t.useRef(a), m = t.useCallback((e) => {
+		if (e.length === 0) return 0;
+		let t = e.reduce((e, t) => e + (t.weight ?? 1), 0), n = e.reduce((e, t) => e + t.score * (t.weight ?? 1), 0);
+		return Math.round(n / t);
+	}, []), h = t.useCallback((e) => {
+		let t = Math.max(0, Math.min(100, e));
+		o(t), f((e) => [...e.slice(-19), {
+			timestamp: /* @__PURE__ */ new Date(),
+			score: t
+		}]);
+	}, []), g = t.useCallback((e, t) => {
+		c((n) => {
+			let r = n.map((n) => n.id === e ? {
+				...n,
+				...t
+			} : n);
+			return h(m(r)), r;
+		});
+	}, [m, h]), _ = t.useCallback((e, t) => {
+		u((n) => n.map((n) => n.id === e ? {
+			...n,
+			...t
+		} : n));
+	}, []), v = t.useCallback((e) => {
+		let t = l.find((t) => t.id === e);
+		t && t.impact && h(Math.min(100, a + t.impact)), _(e, { status: "completed" });
+	}, [
+		l,
+		a,
+		h,
+		_
+	]);
+	return t.useEffect(() => {
+		a !== p.current && (i?.(a, p.current), p.current = a);
+	}, [a, i]), {
+		score: a,
+		setScore: h,
+		categories: s,
+		setCategories: c,
+		recommendations: l,
+		setRecommendations: u,
+		history: d,
+		setHistory: f,
+		updateCategory: g,
+		updateRecommendation: _,
+		completeRecommendation: v,
+		calculateScore: m,
+		completedCount: l.filter((e) => e.status === "completed").length,
+		pendingCount: l.filter((e) => e.status === "pending" || e.status === "in_progress").length,
+		level: D(a)
+	};
+}
+function M({ score: n, displayScore: r, size: i, strokeWidth: a, animated: o }) {
+	let s = i / 2, c = (i - a) / 2;
+	2 * Math.PI * c;
+	let l = S[D(n)], u = A(r), d = 135 + r / 100 * 270, f = k(s, s, c, 135, 405), p = k(s, s, c, 135, Math.max(135.1, d)), m = t.useId();
+	return /* @__PURE__ */ x("div", {
+		className: "relative",
+		style: {
+			width: i,
+			height: i
+		},
+		children: [
+			/* @__PURE__ */ b("div", {
+				className: e("absolute inset-0 rounded-full blur-2xl opacity-30 transition-all duration-500"),
+				style: { background: `radial-gradient(circle, ${u} 0%, transparent 70%)` }
+			}),
+			/* @__PURE__ */ x("svg", {
+				width: i,
+				height: i,
+				viewBox: `0 0 ${i} ${i}`,
+				className: "overflow-visible",
+				children: [
+					/* @__PURE__ */ x("defs", { children: [/* @__PURE__ */ x("linearGradient", {
+						id: `security-gradient-${m}`,
+						x1: "0%",
+						y1: "0%",
+						x2: "100%",
+						y2: "100%",
+						children: [/* @__PURE__ */ b("stop", {
+							offset: "0%",
+							stopColor: u,
+							stopOpacity: "0.8"
+						}), /* @__PURE__ */ b("stop", {
+							offset: "100%",
+							stopColor: u,
+							stopOpacity: "1"
+						})]
+					}), /* @__PURE__ */ b("filter", {
+						id: `security-glow-${m}`,
+						x: "-50%",
+						y: "-50%",
+						width: "200%",
+						height: "200%",
+						children: /* @__PURE__ */ b("feDropShadow", {
+							dx: "0",
+							dy: "0",
+							stdDeviation: "4",
+							floodColor: u,
+							floodOpacity: "0.6"
+						})
+					})] }),
+					/* @__PURE__ */ b("path", {
+						d: f,
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: a,
+						strokeLinecap: "round",
+						className: "text-muted opacity-20"
+					}),
+					/* @__PURE__ */ b("path", {
+						d: p,
+						fill: "none",
+						stroke: `url(#security-gradient-${m})`,
+						strokeWidth: a,
+						strokeLinecap: "round",
+						filter: `url(#security-glow-${m})`,
+						className: e(o && "transition-all duration-700 ease-out")
+					}),
+					r > 0 && /* @__PURE__ */ b("circle", {
+						cx: O(s, s, c, d).x,
+						cy: O(s, s, c, d).y,
+						r: a / 3,
+						fill: "white",
+						className: "transition-all duration-300"
+					})
+				]
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "absolute inset-0 flex flex-col items-center justify-center",
+				children: [/* @__PURE__ */ b("div", {
+					className: "flex items-baseline gap-0.5",
+					children: /* @__PURE__ */ b("span", {
+						className: e("font-bold tabular-nums transition-colors duration-300", T.md.fontSize),
+						style: { color: u },
+						children: Math.round(r)
+					})
+				}), /* @__PURE__ */ x("div", {
+					className: e("flex items-center gap-1 px-2 py-0.5 rounded-full mt-1", l.bgColor),
+					style: { color: u },
+					children: [l.icon, /* @__PURE__ */ b("span", {
+						className: "text-xs font-medium",
+						children: l.label
+					})]
+				})]
+			})
+		]
+	});
+}
+function N({ categories: e, size: t }) {
+	return /* @__PURE__ */ x("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ b("h3", {
+			className: "text-sm font-semibold text-foreground",
+			children: "Score Breakdown"
+		}), /* @__PURE__ */ b("div", {
+			className: "space-y-2",
+			children: e.map((e) => {
+				let t = A(e.score), n = e.icon || E[e.id.toLowerCase()] || /* @__PURE__ */ b(f, { className: "h-4 w-4" });
+				return /* @__PURE__ */ x("div", {
+					className: "space-y-1",
+					children: [
+						/* @__PURE__ */ x("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ x("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ b("span", {
+									style: { color: t },
+									children: n
+								}), /* @__PURE__ */ b("span", {
+									className: "text-sm font-medium",
+									children: e.name
+								})]
+							}), /* @__PURE__ */ b("span", {
+								className: "text-sm font-semibold tabular-nums",
+								style: { color: t },
+								children: e.score
+							})]
+						}),
+						/* @__PURE__ */ b("div", {
+							className: "h-1.5 w-full rounded-full bg-muted overflow-hidden",
+							children: /* @__PURE__ */ b("div", {
+								className: "h-full rounded-full transition-all duration-500 ease-out",
+								style: {
+									width: `${e.score}%`,
+									backgroundColor: t
+								}
+							})
+						}),
+						e.description && /* @__PURE__ */ b("p", {
+							className: "text-xs text-muted-foreground",
+							children: e.description
+						})
+					]
+				}, e.id);
+			})
+		})]
+	});
+}
+function P({ recommendations: n, maxItems: r, onAction: a }) {
+	let o = t.useMemo(() => {
+		let e = [
+			"critical",
+			"high",
+			"medium",
+			"low"
+		], t = [
+			"pending",
+			"in_progress",
+			"completed",
+			"dismissed"
+		];
+		return [...n].sort((n, r) => {
+			let i = t.indexOf(n.status) - t.indexOf(r.status);
+			return i === 0 ? e.indexOf(n.priority) - e.indexOf(r.priority) : i;
+		}).slice(0, r);
+	}, [n, r]), s = n.filter((e) => e.status === "completed").length, c = n.length;
+	return /* @__PURE__ */ x("div", {
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ x("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ b("h3", {
+					className: "text-sm font-semibold text-foreground",
+					children: "Recommendations"
+				}), /* @__PURE__ */ x("span", {
+					className: "text-xs text-muted-foreground",
+					children: [
+						s,
+						"/",
+						c,
+						" completed"
+					]
+				})]
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "h-1.5 w-full rounded-full bg-muted overflow-hidden",
+				children: /* @__PURE__ */ b("div", {
+					className: "h-full rounded-full bg-green-500 transition-all duration-500",
+					style: { width: `${s / c * 100}%` }
+				})
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "space-y-2",
+				children: o.map((t) => {
+					let n = C[t.priority], r = w[t.status], o = t.status === "pending" || t.status === "in_progress";
+					return /* @__PURE__ */ b("div", {
+						className: e("p-3 rounded-lg border transition-all duration-200", t.status === "completed" && "opacity-60", t.status === "dismissed" && "opacity-40", o && "hover:border-primary/50"),
+						children: /* @__PURE__ */ x("div", {
+							className: "flex items-start justify-between gap-3",
+							children: [/* @__PURE__ */ x("div", {
+								className: "flex-1 min-w-0",
+								children: [
+									/* @__PURE__ */ x("div", {
+										className: "flex items-center gap-2 mb-1",
+										children: [
+											/* @__PURE__ */ b("span", {
+												className: e("px-1.5 py-0.5 rounded text-xs font-medium", n.bgColor, n.color),
+												children: n.label
+											}),
+											/* @__PURE__ */ x("span", {
+												className: e("flex items-center gap-1 px-1.5 py-0.5 rounded text-xs", r.bgColor, r.color),
+												children: [r.icon, r.label]
+											}),
+											t.impact && o && /* @__PURE__ */ x("span", {
+												className: "text-xs text-green-600 font-medium",
+												children: [
+													"+",
+													t.impact,
+													" pts"
+												]
+											})
+										]
+									}),
+									/* @__PURE__ */ b("h4", {
+										className: "text-sm font-medium text-foreground truncate",
+										children: t.title
+									}),
+									/* @__PURE__ */ b("p", {
+										className: "text-xs text-muted-foreground line-clamp-2 mt-0.5",
+										children: t.description
+									}),
+									t.estimatedTime && o && /* @__PURE__ */ x("p", {
+										className: "text-xs text-muted-foreground mt-1",
+										children: ["Est. time: ", t.estimatedTime]
+									})
+								]
+							}), o && /* @__PURE__ */ x("button", {
+								onClick: () => {
+									t.onAction?.(), a?.(t);
+								},
+								className: e("flex items-center gap-1 px-3 py-1.5 rounded-md text-xs font-medium", "bg-primary text-primary-foreground", "hover:bg-primary/90 transition-colors", "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"),
+								children: [t.actionLabel || "Fix", /* @__PURE__ */ b(i, { className: "h-3 w-3" })]
+							})]
+						})
+					}, t.id);
+				})
+			})
+		]
+	});
+}
+function F({ history: e, width: n = 300, height: r = 80 }) {
+	if (e.length < 2) return null;
+	let i = {
+		top: 10,
+		right: 10,
+		bottom: 20,
+		left: 30
+	}, a = n - i.left - i.right, o = r - i.top - i.bottom, s = e.map((e) => e.score), c = Math.min(...s, 0), l = Math.max(...s, 100) - c || 1, d = e.map((t, n) => ({
+		x: i.left + n / (e.length - 1) * a,
+		y: i.top + o - (t.score - c) / l * o,
+		score: t.score
+	})), f = d.map((e, t) => `${t === 0 ? "M" : "L"} ${e.x} ${e.y}`).join(" "), p = `${f} L ${d[d.length - 1].x} ${i.top + o} L ${d[0].x} ${i.top + o} Z`, m = s[s.length - 1], h = m - (s.length > 1 ? s[s.length - 2] : m), v = t.useId();
+	return /* @__PURE__ */ x("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ x("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ b("h3", {
+				className: "text-sm font-semibold text-foreground",
+				children: "Score History"
+			}), /* @__PURE__ */ b("div", {
+				className: "flex items-center gap-1 text-xs",
+				children: h > 0 ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(_, { className: "h-3.5 w-3.5 text-green-500" }), /* @__PURE__ */ x("span", {
+					className: "text-green-600 font-medium",
+					children: ["+", h]
+				})] }) : h < 0 ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(g, { className: "h-3.5 w-3.5 text-red-500" }), /* @__PURE__ */ b("span", {
+					className: "text-red-600 font-medium",
+					children: h
+				})] }) : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(u, { className: "h-3.5 w-3.5 text-muted-foreground" }), /* @__PURE__ */ b("span", {
+					className: "text-muted-foreground font-medium",
+					children: "No change"
+				})] })
+			})]
+		}), /* @__PURE__ */ x("svg", {
+			width: n,
+			height: r,
+			className: "overflow-visible",
+			children: [
+				/* @__PURE__ */ b("defs", { children: /* @__PURE__ */ x("linearGradient", {
+					id: `history-gradient-${v}`,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ b("stop", {
+						offset: "0%",
+						stopColor: A(m),
+						stopOpacity: "0.3"
+					}), /* @__PURE__ */ b("stop", {
+						offset: "100%",
+						stopColor: A(m),
+						stopOpacity: "0"
+					})]
+				}) }),
+				[
+					0,
+					25,
+					50,
+					75,
+					100
+				].map((e) => {
+					let t = i.top + o - (e - c) / l * o;
+					return /* @__PURE__ */ x("g", { children: [/* @__PURE__ */ b("line", {
+						x1: i.left,
+						y1: t,
+						x2: n - i.right,
+						y2: t,
+						stroke: "currentColor",
+						strokeWidth: "0.5",
+						strokeDasharray: "2 4",
+						className: "text-muted opacity-30"
+					}), /* @__PURE__ */ b("text", {
+						x: i.left - 5,
+						y: t,
+						textAnchor: "end",
+						dominantBaseline: "middle",
+						className: "text-[10px] fill-muted-foreground",
+						children: e
+					})] }, e);
+				}),
+				/* @__PURE__ */ b("path", {
+					d: p,
+					fill: `url(#history-gradient-${v})`
+				}),
+				/* @__PURE__ */ b("path", {
+					d: f,
+					fill: "none",
+					stroke: A(m),
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				}),
+				d.map((e, t) => /* @__PURE__ */ b("circle", {
+					cx: e.x,
+					cy: e.y,
+					r: t === d.length - 1 ? 4 : 2,
+					fill: A(e.score),
+					stroke: "white",
+					strokeWidth: t === d.length - 1 ? 2 : 1
+				}, t))
+			]
+		})]
+	});
+}
+function I({ score: n, categories: r = [], recommendations: i = [], history: a = [], size: o = "md", showCategories: s = !0, showRecommendations: c = !0, showHistory: l = !1, animated: u = !0, animationDuration: d = 1e3, maxRecommendations: f = 5, className: p, onRecommendationAction: m, onScoreChange: h }) {
+	let [g, _] = t.useState(u ? 0 : n), v = t.useRef(n), y = T[o];
+	return t.useEffect(() => {
+		if (!u) {
+			_(n);
+			return;
+		}
+		let e = g, t = n - e, r = Date.now(), i = () => {
+			let n = Date.now() - r, a = Math.min(n / d, 1);
+			_(e + t * (1 - (1 - a) ** 3)), a < 1 && requestAnimationFrame(i);
+		};
+		requestAnimationFrame(i);
+	}, [
+		n,
+		u,
+		d
+	]), t.useEffect(() => {
+		n !== v.current && (h?.(n), v.current = n);
+	}, [n, h]), S[D(n)], /* @__PURE__ */ x("div", {
+		className: e("rounded-xl border bg-card text-card-foreground shadow-sm", y.padding, p),
+		children: [/* @__PURE__ */ x("div", {
+			className: e("flex flex-col lg:flex-row", y.gap),
+			children: [/* @__PURE__ */ x("div", {
+				className: "flex flex-col items-center gap-4",
+				children: [/* @__PURE__ */ b(M, {
+					score: n,
+					displayScore: g,
+					size: y.gaugeSize,
+					strokeWidth: y.strokeWidth,
+					animated: u
+				}), /* @__PURE__ */ x("div", {
+					className: "text-center",
+					children: [/* @__PURE__ */ b("p", {
+						className: e("font-semibold", y.labelSize),
+						children: "Security Score"
+					}), /* @__PURE__ */ x("p", {
+						className: "text-xs text-muted-foreground",
+						children: [
+							i.filter((e) => e.status === "completed").length,
+							" of",
+							" ",
+							i.length,
+							" items addressed"
+						]
+					})]
+				})]
+			}), /* @__PURE__ */ x("div", {
+				className: "flex-1 space-y-6",
+				children: [
+					s && r.length > 0 && /* @__PURE__ */ b(N, {
+						categories: r,
+						size: o
+					}),
+					l && a.length > 1 && /* @__PURE__ */ b(F, { history: a }),
+					c && i.length > 0 && /* @__PURE__ */ b(P, {
+						recommendations: i,
+						maxItems: f,
+						onAction: m
+					})
+				]
+			})]
+		}), /* @__PURE__ */ b("style", { children: "\n        @keyframes security-pulse {\n          0%, 100% { opacity: 0.3; }\n          50% { opacity: 0.6; }\n        }\n        @keyframes security-glow {\n          0%, 100% { filter: drop-shadow(0 0 8px currentColor); }\n          50% { filter: drop-shadow(0 0 16px currentColor); }\n        }\n      " })]
+	});
+}
+I.displayName = "WakaSecurityScore";
+function L({ score: t, showTrend: n = !1, previousScore: r, className: i }) {
+	let a = S[D(t)], o = A(t), s = r === void 0 ? 0 : t - r;
+	return /* @__PURE__ */ x("div", {
+		className: e("inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border", a.bgColor, a.borderColor, i),
+		children: [
+			/* @__PURE__ */ b("span", {
+				style: { color: o },
+				children: a.icon
+			}),
+			/* @__PURE__ */ b("span", {
+				className: "font-bold tabular-nums",
+				style: { color: o },
+				children: t
+			}),
+			n && s !== 0 && /* @__PURE__ */ x("span", {
+				className: e("flex items-center text-xs font-medium", s > 0 ? "text-green-600" : "text-red-600"),
+				children: [b(s > 0 ? _ : g, { className: "h-3 w-3" }), Math.abs(s)]
+			})
+		]
+	});
+}
+L.displayName = "WakaSecurityScoreCompact";
+//#endregion
+export { L as WakaSecurityScoreCompact, I as default, j as useSecurityScore };

package/dist/components/waka-segmented-control/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({options:e,value:i,onChange:a,size:o=`md`,variant:s=`default`,fullWidth:c=!1,disabled:l=!1,name:u,className:d}){let[f,p]=n.useState({}),m=n.useRef(null),h=n.useRef(new Map),g={sm:`h-7 text-xs px-2`,md:`h-9 text-sm px-3`,lg:`h-11 text-base px-4`},_={sm:`p-0.5`,md:`p-1`,lg:`p-1`},v={sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`};n.useEffect(()=>{if(i===void 0)return;let e=h.current.get(i),t=m.current;if(e&&t){let n=t.getBoundingClientRect(),r=e.getBoundingClientRect();p({left:r.left-n.left,width:r.width,height:r.height})}},[i,e]);let y=e=>{l||a?.(e)},b=e=>t=>{t?h.current.set(e,t):h.current.delete(e)};return(0,r.jsxs)(`div`,{ref:m,role:`radiogroup`,className:t.cn(`relative inline-flex items-center bg-muted rounded-lg`,_[o],c&&`w-full`,l&&`opacity-50`,d),children:[i!==void 0&&s===`default`&&(0,r.jsx)(`div`,{className:`absolute bg-background rounded-md shadow-sm transition-all duration-200 ease-out`,style:f}),e.map(e=>{let n=e.value===i,a=l||e.disabled;return(0,r.jsxs)(`button`,{ref:b(e.value),type:`button`,role:`radio`,"aria-checked":n,disabled:a,onClick:()=>y(e.value),className:t.cn(`relative z-10 inline-flex items-center justify-center gap-1.5 font-medium transition-colors rounded-md`,g[o],c&&`flex-1`,s===`default`&&[n?`text-foreground`:`text-muted-foreground hover:text-foreground`],s===`pills`&&[n?`bg-primary text-primary-foreground`:`text-muted-foreground hover:text-foreground hover:bg-background/50`],a&&`cursor-not-allowed opacity-50`),children:[e.icon&&(0,r.jsx)(`span`,{className:v[o],children:e.icon}),e.label]},String(e.value))}),u&&(0,r.jsx)(`input`,{type:`hidden`,name:u,value:String(i??``)})]})}function a(e,t){let[r,i]=n.useState(t??e[0]?.value);return{value:r,onChange:i,selectNext:()=>{let t=e[(e.findIndex(e=>e.value===r)+1)%e.length];t.disabled||i(t.value)},selectPrevious:()=>{let t=e.findIndex(e=>e.value===r),n=e[t===0?e.length-1:t-1];n.disabled||i(n.value)},selectFirst:()=>{let t=e.find(e=>!e.disabled);t&&i(t.value)},selectLast:()=>{let t=[...e].reverse().find(e=>!e.disabled);t&&i(t.value)},options:e}}exports.default=i,exports.useSegmentedControl=a;

package/dist/components/waka-segmented-control/index.d.ts

@@ -31,8 +31,8 @@ export interface WakaSegmentedControlProps<T = string> {
 }
 export declare function WakaSegmentedControl<T = string>({ options, value, onChange, size, variant, fullWidth, disabled, name, className, }: WakaSegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function useSegmentedControl<T = string>(options: SegmentOption<T>[], initialValue?: T): {
-    value: T;
-    onChange: React.Dispatch<React.SetStateAction<T>>;
+    value: T | undefined;
+    onChange: React.Dispatch<React.SetStateAction<T | undefined>>;
     selectNext: () => void;
     selectPrevious: () => void;
     selectFirst: () => void;