@geekmidas/ui 1.0.2 → 10.0.0-alpha.0

package/dist/data-display-IcuThGEY.mjs

@@ -0,0 +1,1186 @@
+import { cn } from "./utils-0J5jzmnT.mjs";
+import { Button } from "./button-BB4n8b0z.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table-CrFSBSDe.mjs";
+import { format, subDays, subHours } from "date-fns";
+import { Area, AreaChart, Bar, BarChart, Cell, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, ArrowUpDown, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Copy } from "lucide-react";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+
+//#region src/components/data-display/charts/area-time-series-chart.tsx
+const COLOR_MAP = {
+	blue: "hsl(217, 91%, 60%)",
+	red: "hsl(0, 84%, 60%)",
+	green: "hsl(142, 71%, 45%)",
+	amber: "hsl(38, 92%, 50%)",
+	purple: "hsl(263, 70%, 50%)"
+};
+function AreaTimeSeriesChart({ data, primaryLabel = "Value", secondaryLabel, primaryColor = "blue", secondaryColor = "red", timeFormat = "HH:mm", valueFormatter = (v) => v.toLocaleString(), className, showLegend }) {
+	if (data.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "h-48 flex items-center justify-center text-sm text-muted-foreground",
+		children: "No data available"
+	});
+	const hasSecondary = secondaryLabel && data.some((p) => p.secondaryValue !== void 0);
+	const chartData = data.map((point) => ({
+		time: format(new Date(point.timestamp), timeFormat),
+		timestamp: point.timestamp,
+		[primaryLabel]: point.value,
+		...hasSecondary && secondaryLabel ? { [secondaryLabel]: point.secondaryValue ?? 0 } : {}
+	}));
+	const primaryColorValue = COLOR_MAP[primaryColor] ?? primaryColor;
+	const secondaryColorValue = COLOR_MAP[secondaryColor] ?? secondaryColor;
+	const shouldShowLegend = showLegend ?? hasSecondary;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("h-48", className),
+		children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(AreaChart, {
+				data: chartData,
+				children: [
+					/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("linearGradient", {
+						id: "primaryGradient",
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "5%",
+							stopColor: primaryColorValue,
+							stopOpacity: .3
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "95%",
+							stopColor: primaryColorValue,
+							stopOpacity: 0
+						})]
+					}), hasSecondary && /* @__PURE__ */ jsxs("linearGradient", {
+						id: "secondaryGradient",
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "5%",
+							stopColor: secondaryColorValue,
+							stopOpacity: .3
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "95%",
+							stopColor: secondaryColorValue,
+							stopOpacity: 0
+						})]
+					})] }),
+					/* @__PURE__ */ jsx(XAxis, {
+						dataKey: "time",
+						tick: {
+							fill: "hsl(var(--muted-foreground))",
+							fontSize: 12
+						},
+						axisLine: false,
+						tickLine: false
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						tick: {
+							fill: "hsl(var(--muted-foreground))",
+							fontSize: 12
+						},
+						axisLine: false,
+						tickLine: false,
+						tickFormatter: valueFormatter,
+						width: 50
+					}),
+					/* @__PURE__ */ jsx(Tooltip, { content: ({ active, payload, label }) => {
+						if (!active || !payload?.length) return null;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "rounded-lg border bg-popover px-3 py-2 text-sm shadow-md",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "font-medium mb-1",
+								children: label
+							}), payload.map((entry, index) => /* @__PURE__ */ jsxs("p", {
+								className: "flex items-center gap-2 text-muted-foreground",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "w-2 h-2 rounded-full",
+										style: { backgroundColor: entry.color }
+									}),
+									entry.name,
+									": ",
+									valueFormatter(entry.value)
+								]
+							}, index))]
+						});
+					} }),
+					/* @__PURE__ */ jsx(Area, {
+						type: "monotone",
+						dataKey: primaryLabel,
+						stroke: primaryColorValue,
+						fill: "url(#primaryGradient)",
+						strokeWidth: 2
+					}),
+					hasSecondary && secondaryLabel && /* @__PURE__ */ jsx(Area, {
+						type: "monotone",
+						dataKey: secondaryLabel,
+						stroke: secondaryColorValue,
+						fill: "url(#secondaryGradient)",
+						strokeWidth: 2
+					})
+				]
+			})
+		}), shouldShowLegend && /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-center gap-4 mt-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-xs",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "w-3 h-3 rounded-full",
+					style: { backgroundColor: primaryColorValue }
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: primaryLabel
+				})]
+			}), hasSecondary && secondaryLabel && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-xs",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "w-3 h-3 rounded-full",
+					style: { backgroundColor: secondaryColorValue }
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: secondaryLabel
+				})]
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/data-display/charts/bar-list-chart.tsx
+function BarListChart({ data, valueFormatter = (v) => v.toLocaleString(), onItemClick, className, emptyMessage = "No data available", color = "hsl(217, 91%, 60%)" }) {
+	if (data.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "h-48 flex items-center justify-center text-sm text-muted-foreground",
+		children: emptyMessage
+	});
+	const maxValue = Math.max(...data.map((d) => d.value));
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("space-y-3", className),
+		children: data.map((item, index) => {
+			const percentage = maxValue > 0 ? item.value / maxValue * 100 : 0;
+			const isClickable = !!onItemClick;
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("group", isClickable && "cursor-pointer"),
+				onClick: () => onItemClick?.(item),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between mb-1",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn("text-sm truncate flex-1 mr-4", isClickable && "group-hover:text-foreground"),
+						children: item.name
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm font-medium tabular-nums",
+						children: valueFormatter(item.value)
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "h-2 bg-muted rounded-full overflow-hidden",
+					children: /* @__PURE__ */ jsx("div", {
+						className: cn("h-full rounded-full transition-all duration-300", isClickable && "group-hover:opacity-80"),
+						style: {
+							width: `${percentage}%`,
+							backgroundColor: color
+						}
+					})
+				})]
+			}, index);
+		})
+	});
+}
+
+//#endregion
+//#region src/components/data-display/charts/latency-percentiles-chart.tsx
+function defaultFormatDuration(ms) {
+	if (ms < 1) return "<1ms";
+	if (ms < 1e3) return `${Math.round(ms)}ms`;
+	return `${(ms / 1e3).toFixed(2)}s`;
+}
+const PERCENTILE_COLORS = {
+	p50: "hsl(217, 91%, 60%)",
+	p95: "hsl(38, 92%, 50%)",
+	p99: "hsl(0, 84%, 60%)"
+};
+function LatencyPercentilesChart({ p50, p95, p99, className, valueFormatter = defaultFormatDuration }) {
+	const chartData = [
+		{
+			name: "p50",
+			label: "p50 (Median)",
+			value: p50,
+			color: PERCENTILE_COLORS.p50
+		},
+		{
+			name: "p95",
+			label: "p95",
+			value: p95,
+			color: PERCENTILE_COLORS.p95
+		},
+		{
+			name: "p99",
+			label: "p99",
+			value: p99,
+			color: PERCENTILE_COLORS.p99
+		}
+	];
+	if (p99 === 0) return /* @__PURE__ */ jsx("div", {
+		className: "h-48 flex items-center justify-center text-sm text-muted-foreground",
+		children: "No data available"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("h-48", className),
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(BarChart, {
+				data: chartData,
+				layout: "vertical",
+				barSize: 20,
+				children: [
+					/* @__PURE__ */ jsx(XAxis, {
+						type: "number",
+						tickFormatter: valueFormatter,
+						tick: {
+							fill: "hsl(var(--muted-foreground))",
+							fontSize: 12
+						},
+						axisLine: false,
+						tickLine: false
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						type: "category",
+						dataKey: "label",
+						width: 90,
+						tick: {
+							fill: "hsl(var(--muted-foreground))",
+							fontSize: 12
+						},
+						axisLine: false,
+						tickLine: false
+					}),
+					/* @__PURE__ */ jsx(Tooltip, { content: ({ active, payload }) => {
+						if (!active || !payload?.length) return null;
+						const item = payload[0]?.payload;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "rounded-lg border bg-popover px-3 py-2 text-sm shadow-md",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "font-medium",
+								children: item.label
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground",
+								children: valueFormatter(item.value)
+							})]
+						});
+					} }),
+					/* @__PURE__ */ jsx(Bar, {
+						dataKey: "value",
+						radius: [
+							0,
+							4,
+							4,
+							0
+						],
+						children: chartData.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: entry.color }, `cell-${index}`))
+					})
+				]
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/components/data-display/charts/status-distribution-chart.tsx
+const STATUS_CONFIG = {
+	"2xx": {
+		label: "2xx Success",
+		color: "hsl(142, 71%, 45%)"
+	},
+	"3xx": {
+		label: "3xx Redirect",
+		color: "hsl(217, 91%, 60%)"
+	},
+	"4xx": {
+		label: "4xx Client Error",
+		color: "hsl(38, 92%, 50%)"
+	},
+	"5xx": {
+		label: "5xx Server Error",
+		color: "hsl(0, 84%, 60%)"
+	}
+};
+function StatusDistributionChart({ data, className }) {
+	const chartData = Object.entries(data).filter(([, value]) => value > 0).map(([key, value]) => ({
+		name: STATUS_CONFIG[key].label,
+		value,
+		color: STATUS_CONFIG[key].color
+	}));
+	const total = chartData.reduce((sum, d) => sum + d.value, 0);
+	if (total === 0) return /* @__PURE__ */ jsx("div", {
+		className: "h-48 flex items-center justify-center text-sm text-muted-foreground",
+		children: "No data available"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("h-48", className),
+		children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx(Pie, {
+				data: chartData,
+				cx: "50%",
+				cy: "50%",
+				innerRadius: 50,
+				outerRadius: 70,
+				paddingAngle: 2,
+				dataKey: "value",
+				nameKey: "name",
+				children: chartData.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: entry.color }, `cell-${index}`))
+			}), /* @__PURE__ */ jsx(Tooltip, { content: ({ active, payload }) => {
+				if (!active || !payload?.length) return null;
+				const item = payload[0];
+				const percent = (item.value / total * 100).toFixed(1);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "rounded-lg border bg-popover px-3 py-2 text-sm shadow-md",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "font-medium",
+						children: item.name
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "text-muted-foreground",
+						children: [
+							item.value.toLocaleString(),
+							" (",
+							percent,
+							"%)"
+						]
+					})]
+				});
+			} })] })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap justify-center gap-4 mt-2",
+			children: chartData.map((item) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-xs",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "w-3 h-3 rounded-full",
+					style: { backgroundColor: item.color }
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: item.name
+				})]
+			}, item.name))
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/data-display/charts/time-range-selector.tsx
+const defaultPresets = [
+	{
+		label: "1h",
+		value: "1h"
+	},
+	{
+		label: "6h",
+		value: "6h"
+	},
+	{
+		label: "24h",
+		value: "24h"
+	},
+	{
+		label: "7d",
+		value: "7d"
+	}
+];
+function getPresetRange(preset) {
+	const end = /* @__PURE__ */ new Date();
+	switch (preset) {
+		case "1h": return {
+			start: subHours(end, 1),
+			end
+		};
+		case "6h": return {
+			start: subHours(end, 6),
+			end
+		};
+		case "24h": return {
+			start: subHours(end, 24),
+			end
+		};
+		case "7d": return {
+			start: subDays(end, 7),
+			end
+		};
+		default: return {
+			start: subHours(end, 1),
+			end
+		};
+	}
+}
+function TimeRangeSelector({ value, onChange, presets = defaultPresets, className }) {
+	const handlePresetClick = (preset) => {
+		const range = getPresetRange(preset);
+		onChange({
+			preset,
+			...range
+		});
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-2", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex rounded-md border border-border overflow-hidden",
+			children: presets.map(({ label, value: preset }, index) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => handlePresetClick(preset),
+				className: cn("px-3 py-1.5 text-sm font-medium transition-colors", value.preset === preset ? "bg-primary text-primary-foreground" : "bg-card hover:bg-muted text-foreground", index > 0 && "border-l border-border"),
+				children: label
+			}, preset))
+		})
+	});
+}
+/**
+* Create a time range from a preset
+*/
+function createTimeRange(preset = "1h") {
+	const range = getPresetRange(preset);
+	return {
+		preset,
+		...range
+	};
+}
+
+//#endregion
+//#region src/components/data-display/data-table.tsx
+function DataTableInner({ className, columns, data, getRowKey = (_, index) => index, sortColumn, sortDirection, onSortChange, pagination = false, page = 1, pageSize = 10, totalItems, onPageChange, onPageSizeChange, pageSizeOptions = [
+	10,
+	20,
+	50,
+	100
+], loading = false, emptyState, onRowClick, selectedKeys, striped = false, hoverable = true, compact = false,...props }, ref) {
+	const total = totalItems ?? data.length;
+	const totalPages = Math.ceil(total / pageSize);
+	const handleSort = (columnKey) => {
+		if (!onSortChange) return;
+		if (sortColumn === columnKey) onSortChange(columnKey, sortDirection === "asc" ? "desc" : "asc");
+		else onSortChange(columnKey, "asc");
+	};
+	const getSortIcon = (columnKey) => {
+		if (sortColumn !== columnKey) return /* @__PURE__ */ jsx(ArrowUpDown, { className: "ml-1 h-3.5 w-3.5 text-muted-foreground" });
+		return sortDirection === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "ml-1 h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "ml-1 h-3.5 w-3.5" });
+	};
+	const getAlignClass = (align) => {
+		switch (align) {
+			case "center": return "text-center";
+			case "right": return "text-right";
+			default: return "text-left";
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("w-full", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "rounded-md border border-border overflow-hidden",
+			children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, {
+				className: "hover:bg-transparent",
+				children: columns.map((column) => /* @__PURE__ */ jsx(TableHead, {
+					className: cn(getAlignClass(column.align), column.sortable && "cursor-pointer select-none", compact ? "py-2" : "py-3", column.headerClassName),
+					style: { width: column.width },
+					onClick: column.sortable ? () => handleSort(column.key) : void 0,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: cn("flex items-center", column.align === "center" && "justify-center", column.align === "right" && "justify-end"),
+						children: [column.header, column.sortable && getSortIcon(column.key)]
+					})
+				}, column.key))
+			}) }), /* @__PURE__ */ jsx(TableBody, { children: loading ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+				colSpan: columns.length,
+				className: "h-24 text-center text-muted-foreground",
+				children: "Loading..."
+			}) }) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+				colSpan: columns.length,
+				className: "h-24 text-center text-muted-foreground",
+				children: emptyState ?? "No data available"
+			}) }) : data.map((row, rowIndex) => {
+				const rowKey = getRowKey(row, rowIndex);
+				const isSelected = selectedKeys?.has(rowKey);
+				return /* @__PURE__ */ jsx(TableRow, {
+					className: cn(striped && rowIndex % 2 === 1 && "bg-surface/50", hoverable && "hover:bg-surface-hover cursor-pointer", isSelected && "bg-accent/10", onRowClick && "cursor-pointer"),
+					onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
+					children: columns.map((column) => /* @__PURE__ */ jsx(TableCell, {
+						className: cn(getAlignClass(column.align), compact ? "py-2" : "py-3", column.cellClassName),
+						children: column.cell ? column.cell(row, rowIndex) : column.accessor ? column.accessor(row) : row[column.key]
+					}, column.key))
+				}, rowKey);
+			}) })] })
+		}), pagination && totalPages > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between px-2 py-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-sm text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("span", { children: "Rows per page:" }), /* @__PURE__ */ jsxs(Select, {
+					value: String(pageSize),
+					onValueChange: (value) => onPageSizeChange?.(Number(value)),
+					children: [/* @__PURE__ */ jsx(SelectTrigger, {
+						className: "h-8 w-[70px]",
+						children: /* @__PURE__ */ jsx(SelectValue, {})
+					}), /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, {
+						value: String(size),
+						children: size
+					}, size)) })]
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						"Page ",
+						page,
+						" of ",
+						totalPages
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "icon",
+							className: "h-8 w-8",
+							onClick: () => onPageChange?.(1),
+							disabled: page <= 1,
+							children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "icon",
+							className: "h-8 w-8",
+							onClick: () => onPageChange?.(page - 1),
+							disabled: page <= 1,
+							children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "icon",
+							className: "h-8 w-8",
+							onClick: () => onPageChange?.(page + 1),
+							disabled: page >= totalPages,
+							children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "icon",
+							className: "h-8 w-8",
+							onClick: () => onPageChange?.(totalPages),
+							disabled: page >= totalPages,
+							children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
+						})
+					]
+				})]
+			})]
+		})]
+	});
+}
+const DataTable = React.forwardRef(DataTableInner);
+
+//#endregion
+//#region src/components/data-display/json-viewer.tsx
+const JsonViewer = React.forwardRef(({ className, data, defaultExpanded = true, expandDepth = 2, copyable = true, keyClassName, valueClassName,...props }, ref) => {
+	const [copied, setCopied] = React.useState(false);
+	const handleCopy = async () => {
+		await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2e3);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("relative rounded-md bg-surface border border-border font-mono text-sm", className),
+		...props,
+		children: [copyable && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleCopy,
+			className: "absolute right-2 top-2 p-1.5 rounded-md hover:bg-surface-hover text-muted-foreground hover:text-foreground transition-colors",
+			"aria-label": "Copy JSON",
+			children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "p-3 overflow-auto",
+			children: /* @__PURE__ */ jsx(JsonNode, {
+				data,
+				depth: 0,
+				defaultExpanded,
+				expandDepth,
+				keyClassName,
+				valueClassName
+			})
+		})]
+	});
+});
+JsonViewer.displayName = "JsonViewer";
+function JsonNode({ data, depth, defaultExpanded, expandDepth, keyClassName, valueClassName, propertyKey, isLast = true }) {
+	const [expanded, setExpanded] = React.useState(defaultExpanded && depth < expandDepth);
+	const indent = depth * 16;
+	if (data === null) return /* @__PURE__ */ jsxs("span", {
+		className: "inline",
+		children: [
+			propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: cn("text-purple-400", keyClassName),
+				children: [
+					"\"",
+					propertyKey,
+					"\""
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ": "
+			})] }),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("text-orange-400", valueClassName),
+				children: "null"
+			}),
+			!isLast && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ","
+			})
+		]
+	});
+	if (data === void 0) return /* @__PURE__ */ jsxs("span", {
+		className: "inline",
+		children: [
+			propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: cn("text-purple-400", keyClassName),
+				children: [
+					"\"",
+					propertyKey,
+					"\""
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ": "
+			})] }),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("text-gray-500", valueClassName),
+				children: "undefined"
+			}),
+			!isLast && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ","
+			})
+		]
+	});
+	if (typeof data === "boolean") return /* @__PURE__ */ jsxs("span", {
+		className: "inline",
+		children: [
+			propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: cn("text-purple-400", keyClassName),
+				children: [
+					"\"",
+					propertyKey,
+					"\""
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ": "
+			})] }),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("text-blue-400", valueClassName),
+				children: String(data)
+			}),
+			!isLast && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ","
+			})
+		]
+	});
+	if (typeof data === "number") return /* @__PURE__ */ jsxs("span", {
+		className: "inline",
+		children: [
+			propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: cn("text-purple-400", keyClassName),
+				children: [
+					"\"",
+					propertyKey,
+					"\""
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ": "
+			})] }),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("text-amber-400", valueClassName),
+				children: data
+			}),
+			!isLast && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ","
+			})
+		]
+	});
+	if (typeof data === "string") return /* @__PURE__ */ jsxs("span", {
+		className: "inline",
+		children: [
+			propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: cn("text-purple-400", keyClassName),
+				children: [
+					"\"",
+					propertyKey,
+					"\""
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ": "
+			})] }),
+			/* @__PURE__ */ jsxs("span", {
+				className: cn("text-green-400", valueClassName),
+				children: [
+					"\"",
+					data,
+					"\""
+				]
+			}),
+			!isLast && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ","
+			})
+		]
+	});
+	if (Array.isArray(data)) {
+		if (data.length === 0) return /* @__PURE__ */ jsxs("span", {
+			className: "inline",
+			children: [
+				propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+					className: cn("text-purple-400", keyClassName),
+					children: [
+						"\"",
+						propertyKey,
+						"\""
+					]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ": "
+				})] }),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "[]"
+				}),
+				!isLast && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ","
+				})
+			]
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: "inline-block",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center cursor-pointer hover:text-foreground text-muted-foreground",
+					onClick: () => setExpanded(!expanded),
+					children: [
+						expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 mr-0.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 mr-0.5" }),
+						propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+							className: cn("text-purple-400", keyClassName),
+							children: [
+								"\"",
+								propertyKey,
+								"\""
+							]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: ": "
+						})] }),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: "["
+						}),
+						!expanded && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground mx-1",
+							children: [data.length, " items"]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: "]"
+						})] })
+					]
+				}),
+				expanded && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					style: { paddingLeft: indent + 16 },
+					children: data.map((item, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(JsonNode, {
+						data: item,
+						depth: depth + 1,
+						defaultExpanded,
+						expandDepth,
+						keyClassName,
+						valueClassName,
+						isLast: index === data.length - 1
+					}) }, index))
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "]"
+				})] }),
+				!isLast && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ","
+				})
+			]
+		});
+	}
+	if (typeof data === "object") {
+		const entries = Object.entries(data);
+		if (entries.length === 0) return /* @__PURE__ */ jsxs("span", {
+			className: "inline",
+			children: [
+				propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+					className: cn("text-purple-400", keyClassName),
+					children: [
+						"\"",
+						propertyKey,
+						"\""
+					]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ": "
+				})] }),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "{}"
+				}),
+				!isLast && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ","
+				})
+			]
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: "inline-block",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center cursor-pointer hover:text-foreground text-muted-foreground",
+					onClick: () => setExpanded(!expanded),
+					children: [
+						expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 mr-0.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 mr-0.5" }),
+						propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+							className: cn("text-purple-400", keyClassName),
+							children: [
+								"\"",
+								propertyKey,
+								"\""
+							]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: ": "
+						})] }),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: "{"
+						}),
+						!expanded && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground mx-1",
+							children: "..."
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: "}"
+						})] })
+					]
+				}),
+				expanded && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					style: { paddingLeft: indent + 16 },
+					children: entries.map(([key, value], index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(JsonNode, {
+						data: value,
+						depth: depth + 1,
+						defaultExpanded,
+						expandDepth,
+						keyClassName,
+						valueClassName,
+						propertyKey: key,
+						isLast: index === entries.length - 1
+					}) }, key))
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "}"
+				})] }),
+				!isLast && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ","
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-muted-foreground", valueClassName),
+		children: String(data)
+	});
+}
+
+//#endregion
+//#region src/components/data-display/sparkline.tsx
+const Sparkline = React.forwardRef(({ className, data, width = 100, height = 32, color = "currentColor", strokeWidth = 2, filled = false, fillOpacity = .2, showDots = false, curved = true, min: minProp, max: maxProp,...props }, ref) => {
+	if (data.length === 0) return /* @__PURE__ */ jsx("svg", {
+		ref,
+		className: cn("text-accent", className),
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		...props
+	});
+	const min = minProp ?? Math.min(...data);
+	const max = maxProp ?? Math.max(...data);
+	const range = max - min || 1;
+	const padding = strokeWidth;
+	const chartWidth = width - padding * 2;
+	const chartHeight = height - padding * 2;
+	const points = data.map((value, index) => {
+		const x = padding + index / (data.length - 1 || 1) * chartWidth;
+		const y = padding + chartHeight - (value - min) / range * chartHeight;
+		return {
+			x,
+			y
+		};
+	});
+	let pathD;
+	if (curved && points.length > 2) pathD = points.reduce((acc, point, index) => {
+		if (index === 0) return `M ${point.x},${point.y}`;
+		const prev = points[index - 1];
+		const cpX = (prev.x + point.x) / 2;
+		return `${acc} Q ${prev.x},${prev.y} ${cpX},${(prev.y + point.y) / 2} T ${point.x},${point.y}`;
+	}, "");
+	else pathD = points.map((point, index) => index === 0 ? `M ${point.x},${point.y}` : `L ${point.x},${point.y}`).join(" ");
+	const fillPathD = filled ? `${pathD} L ${points[points.length - 1]?.x},${height - padding} L ${points[0]?.x},${height - padding} Z` : "";
+	return /* @__PURE__ */ jsxs("svg", {
+		ref,
+		className: cn("text-accent", className),
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		...props,
+		children: [
+			filled && /* @__PURE__ */ jsx("path", {
+				d: fillPathD,
+				fill: color,
+				opacity: fillOpacity,
+				strokeWidth: 0
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: pathD,
+				fill: "none",
+				stroke: color,
+				strokeWidth,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			showDots && points.map((point, index) => /* @__PURE__ */ jsx("circle", {
+				cx: point.x,
+				cy: point.y,
+				r: strokeWidth + 1,
+				fill: color
+			}, index))
+		]
+	});
+});
+Sparkline.displayName = "Sparkline";
+const SparkBar = React.forwardRef(({ className, data, width = 100, height = 32, color = "currentColor", gap = .2, min: minProp = 0, max: maxProp, radius = 2,...props }, ref) => {
+	if (data.length === 0) return /* @__PURE__ */ jsx("svg", {
+		ref,
+		className: cn("text-accent", className),
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		...props
+	});
+	const min = minProp;
+	const max = maxProp ?? Math.max(...data);
+	const range = max - min || 1;
+	const barWidth = width / data.length;
+	const gapWidth = barWidth * gap;
+	const actualBarWidth = barWidth - gapWidth;
+	return /* @__PURE__ */ jsx("svg", {
+		ref,
+		className: cn("text-accent", className),
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		...props,
+		children: data.map((value, index) => {
+			const barHeight = (value - min) / range * height;
+			const x = index * barWidth + gapWidth / 2;
+			const y = height - barHeight;
+			return /* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width: actualBarWidth,
+				height: barHeight,
+				fill: color,
+				rx: radius,
+				ry: radius
+			}, index);
+		})
+	});
+});
+SparkBar.displayName = "SparkBar";
+const MetricCard = React.forwardRef(({ className, title, value, description, sparklineData, trend, trendValue, icon,...props }, ref) => {
+	const trendColor = trend === "up" ? "text-green-500" : trend === "down" ? "text-red-500" : "text-muted-foreground";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("rounded-lg border border-border bg-surface p-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium text-muted-foreground",
+				children: title
+			}), icon && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: icon
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-2 flex items-end justify-between",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+				className: "text-2xl font-bold text-foreground",
+				children: value
+			}), (description || trendValue) && /* @__PURE__ */ jsxs("div", {
+				className: "mt-1 flex items-center gap-1",
+				children: [trendValue && /* @__PURE__ */ jsx("span", {
+					className: cn("text-xs font-medium", trendColor),
+					children: trendValue
+				}), description && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: description
+				})]
+			})] }), sparklineData && sparklineData.length > 0 && /* @__PURE__ */ jsx(Sparkline, {
+				data: sparklineData,
+				width: 80,
+				height: 32,
+				filled: true,
+				className: trend === "up" ? "text-green-500" : trend === "down" ? "text-red-500" : "text-accent"
+			})]
+		})]
+	});
+});
+MetricCard.displayName = "MetricCard";
+
+//#endregion
+//#region src/components/data-display/timeline.tsx
+const timelineVariants = cva("relative", {
+	variants: { orientation: {
+		vertical: "flex flex-col",
+		horizontal: "flex flex-row"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+const Timeline = React.forwardRef(({ className, orientation = "vertical", children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn(timelineVariants({
+			orientation,
+			className
+		})),
+		...props,
+		children
+	});
+});
+Timeline.displayName = "Timeline";
+const timelineItemVariants = cva("relative flex", {
+	variants: { orientation: {
+		vertical: "flex-row gap-4 pb-8 last:pb-0",
+		horizontal: "flex-col gap-2 pr-8 last:pr-0"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+const TimelineItem = React.forwardRef(({ className, orientation = "vertical", active, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn(timelineItemVariants({
+			orientation,
+			className
+		})),
+		"data-active": active,
+		...props,
+		children
+	});
+});
+TimelineItem.displayName = "TimelineItem";
+const timelineIndicatorVariants = cva("flex items-center justify-center rounded-full border-2 shrink-0", {
+	variants: {
+		size: {
+			sm: "h-3 w-3",
+			md: "h-4 w-4",
+			lg: "h-6 w-6"
+		},
+		variant: {
+			default: "border-border bg-surface",
+			primary: "border-accent bg-accent",
+			success: "border-green-500 bg-green-500",
+			warning: "border-amber-500 bg-amber-500",
+			error: "border-red-500 bg-red-500",
+			info: "border-blue-500 bg-blue-500",
+			muted: "border-muted-foreground bg-muted"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	}
+});
+const TimelineIndicator = React.forwardRef(({ className, size, variant, showLine = true, linePosition = "after", orientation = "vertical", children,...props }, ref) => {
+	const isVertical = orientation === "vertical";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("relative flex items-center", isVertical ? "flex-col" : "flex-row"),
+		children: [
+			showLine && (linePosition === "before" || linePosition === "both") && /* @__PURE__ */ jsx("div", { className: cn("bg-border", isVertical ? "w-0.5 flex-1" : "h-0.5 flex-1") }),
+			/* @__PURE__ */ jsx("div", {
+				className: cn(timelineIndicatorVariants({
+					size,
+					variant,
+					className
+				})),
+				...props,
+				children
+			}),
+			showLine && (linePosition === "after" || linePosition === "both") && /* @__PURE__ */ jsx("div", { className: cn("bg-border", isVertical ? "w-0.5 flex-1" : "h-0.5 flex-1") })
+		]
+	});
+});
+TimelineIndicator.displayName = "TimelineIndicator";
+const TimelineConnector = React.forwardRef(({ className, orientation = "vertical",...props }, ref) => {
+	const isVertical = orientation === "vertical";
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("bg-border", isVertical ? "absolute left-[7px] top-4 bottom-0 w-0.5" : "absolute top-[7px] left-4 right-0 h-0.5", className),
+		...props
+	});
+});
+TimelineConnector.displayName = "TimelineConnector";
+const TimelineContent = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("flex-1 pt-0.5", className),
+		...props,
+		children
+	});
+});
+TimelineContent.displayName = "TimelineContent";
+const TimelineTitle = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("h4", {
+		ref,
+		className: cn("text-sm font-medium text-foreground", className),
+		...props,
+		children
+	});
+});
+TimelineTitle.displayName = "TimelineTitle";
+const TimelineDescription = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		className: cn("text-sm text-muted-foreground", className),
+		...props,
+		children
+	});
+});
+TimelineDescription.displayName = "TimelineDescription";
+const TimelineTime = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cn("text-xs text-muted-foreground", className),
+		...props,
+		children
+	});
+});
+TimelineTime.displayName = "TimelineTime";
+
+//#endregion
+export { AreaTimeSeriesChart, BarListChart, DataTable, JsonViewer, LatencyPercentilesChart, MetricCard, SparkBar, Sparkline, StatusDistributionChart, TimeRangeSelector, Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineTime, TimelineTitle, createTimeRange, timelineIndicatorVariants, timelineItemVariants, timelineVariants };
+//# sourceMappingURL=data-display-IcuThGEY.mjs.map