@humain/ui 2.1.63 → 2.1.65

package/dist/index198.js

@@ -1,505 +1,170 @@
 import { cn } from "./index2.js";
-import { Button } from "./index5.js";
-import { ChartContainer } from "./index22.js";
-import { useReducedMotion } from "./index61.js";
+import { LineChart } from "./index64.js";
+import { BarChart } from "./index65.js";
 import { cva } from "class-variance-authority";
-import { ArrowUp, ArrowUpRight, Eye, MoreVertical, TrendingUp } from "lucide-react";
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Area, AreaChart, Line, LineChart } from "recharts";
-//#region src/components/organisms/content/MetricItem/MetricItem.tsx
-var MINI_CHART_MARGIN = {
-	top: 0,
-	right: 0,
-	bottom: 0,
-	left: 0
-};
-function getFiniteMetricNumber(value, fallback = 0) {
-	return Number.isFinite(value) ? value : fallback;
-}
-function getFinitePositiveMetricNumber(value, fallback) {
-	return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
-}
-function getFinitePositiveMetricNumberOrUndefined(value) {
-	return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : void 0;
-}
-function formatMetricValue(value) {
-	return typeof value === "number" ? getFiniteMetricNumber(value).toLocaleString() : value;
-}
-var metricMiniChartVariants = cva("relative shrink-0", {
-	variants: { variant: {
-		line: "",
-		area: "",
-		layers: ""
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/content/MetricCard/MetricCard.tsx
+var metricCardVariants = cva("bg-background border border-border rounded-xl shadow-sm flex flex-col w-full", {
+	variants: { size: {
+		sm: "gap-3 p-3",
+		md: "gap-5 p-5",
+		lg: "gap-6 p-6"
 	} },
-	defaultVariants: { variant: "line" }
+	defaultVariants: { size: "md" }
 });
-function MetricMiniChart({ data, color, width, height = 56, variant = "line", showMarker = true, trend = "positive", className, ...props }) {
-	const gradientId = React.useId();
-	const shouldAnimate = !useReducedMotion();
-	const chartColor = color || (trend === "positive" ? "var(--success)" : "var(--destructive)");
-	const chartWidth = getFinitePositiveMetricNumberOrUndefined(width);
-	const chartHeight = getFinitePositiveMetricNumber(height, 56);
-	const safeData = React.useMemo(() => data.map((value) => getFiniteMetricNumber(value)), [data]);
-	const chartData = React.useMemo(() => safeData.map((value, index) => ({
-		index,
-		value
-	})), [safeData]);
-	const chartConfig = React.useMemo(() => ({ value: { color: chartColor } }), [chartColor]);
-	const lastValue = safeData[safeData.length - 1] ?? 0;
-	const markerTop = React.useMemo(() => {
-		const maxValue = safeData.length > 0 ? Math.max(...safeData) : 0;
-		return maxValue <= 0 ? 50 : Math.max(10, Math.min(90, 100 - lastValue / maxValue * 100));
-	}, [safeData, lastValue]);
-	const rootStyle = React.useMemo(() => ({
-		width: chartWidth,
-		height: chartHeight
-	}), [chartHeight, chartWidth]);
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "metric-mini-chart",
-		"aria-hidden": "true",
-		inert: true,
-		className: cn(metricMiniChartVariants({ variant }), className),
-		style: rootStyle,
-		...props,
-		children: [/* @__PURE__ */ jsx(ChartContainer, {
-			config: chartConfig,
-			className: "size-full",
-			children: variant === "layers" ? /* @__PURE__ */ jsxs(AreaChart, {
-				data: chartData,
-				margin: MINI_CHART_MARGIN,
-				children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
-					id: `fillArea${gradientId}`,
-					x1: "0",
-					y1: "0",
-					x2: "0",
-					y2: "1",
-					children: [/* @__PURE__ */ jsx("stop", {
-						offset: "0%",
-						stopColor: chartColor,
-						stopOpacity: .3
-					}), /* @__PURE__ */ jsx("stop", {
-						offset: "100%",
-						stopColor: chartColor,
-						stopOpacity: .05
-					})]
-				}) }), /* @__PURE__ */ jsx(Area, {
-					type: "monotone",
-					dataKey: "value",
-					stroke: chartColor,
-					strokeWidth: 2,
-					fill: `url(#fillArea${gradientId})`,
-					isAnimationActive: shouldAnimate
-				})]
-			}) : /* @__PURE__ */ jsxs(LineChart, {
-				data: chartData,
-				margin: MINI_CHART_MARGIN,
-				children: [variant === "area" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
-					id: `fillLine${gradientId}`,
-					x1: "0",
-					y1: "0",
-					x2: "0",
-					y2: "1",
-					children: [/* @__PURE__ */ jsx("stop", {
-						offset: "0%",
-						stopColor: chartColor,
-						stopOpacity: .15
-					}), /* @__PURE__ */ jsx("stop", {
-						offset: "100%",
-						stopColor: chartColor,
-						stopOpacity: .02
-					})]
-				}) }), /* @__PURE__ */ jsx(Area, {
-					type: "monotone",
-					dataKey: "value",
-					stroke: "none",
-					fill: `url(#fillLine${gradientId})`,
-					isAnimationActive: shouldAnimate
-				})] }), /* @__PURE__ */ jsx(Line, {
-					type: "monotone",
-					dataKey: "value",
-					stroke: chartColor,
-					strokeWidth: 2,
-					dot: false,
-					isAnimationActive: shouldAnimate
-				})]
-			})
-		}), showMarker && variant === "line" && /* @__PURE__ */ jsxs("div", {
-			className: "absolute",
-			style: {
-				right: 0,
-				top: `${markerTop}%`,
-				transform: "translate(50%, -50%)"
-			},
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "size-[19px] rounded-full opacity-20",
-				style: { backgroundColor: chartColor }
-			}), /* @__PURE__ */ jsx("div", {
-				className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[10px] rounded-full bg-background border-2",
-				style: { borderColor: chartColor }
-			})]
-		})]
-	});
+var titleSizeClasses = {
+	sm: "text-sm",
+	md: "text-md",
+	lg: "text-lg"
+};
+var valueSizeClasses = {
+	sm: "text-display-xs",
+	md: "text-display-sm",
+	lg: "text-display-md"
+};
+var changeSizeClasses = {
+	sm: "text-xs",
+	md: "text-sm",
+	lg: "text-base"
+};
+var changeSentimentColors = {
+	positive: "text-success",
+	negative: "text-destructive",
+	neutral: "text-muted-foreground"
+};
+function getFiniteMetricValue(value) {
+	return Number.isFinite(value) ? value : 0;
 }
-MetricMiniChart.displayName = "MetricMiniChart";
-var metricChangeVariants = cva("inline-flex items-center gap-0.5", {
-	variants: {
-		variant: {
-			default: "",
-			badge: "bg-background border border-border rounded-md shadow-xs px-1.5 py-0.5"
-		},
-		trend: {
-			positive: "",
-			negative: ""
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		trend: "positive"
-	}
-});
-function MetricChange({ value, variant = "default", trend = "positive", icon = "arrow", className, ...props }) {
-	const iconColor = trend === "positive" ? "var(--success)" : "var(--destructive)";
-	const textColor = variant === "badge" ? "text-secondary-foreground" : trend === "positive" ? "text-success" : "text-destructive";
-	const IconComponent = icon === "none" ? null : icon === "trend" ? TrendingUp : icon === "arrow-right" ? ArrowUpRight : ArrowUp;
-	const iconSize = variant === "badge" ? 12 : 16;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn(metricChangeVariants({
-			variant,
-			trend
-		}), className),
-		...props,
-		children: [
-			IconComponent && /* @__PURE__ */ jsx(IconComponent, {
-				"aria-hidden": "true",
-				width: iconSize,
-				height: iconSize,
-				color: iconColor,
-				className: cn(trend === "negative" && "rotate-180")
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: trend === "positive" ? "Increased" : "Decreased"
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: cn("text-sm font-medium", textColor),
-				children: value
-			})
-		]
+function MetricCardMiniChart({ data, series, chartType, strokeWidth, showArea, showDots, curveType }) {
+	if (!data || !series) return null;
+	const sharedProps = {
+		data,
+		series,
+		size: "sm",
+		showYAxis: false,
+		showXAxis: false,
+		showTooltip: false,
+		className: "h-14 w-28"
+	};
+	if (chartType === "bar") return /* @__PURE__ */ jsx(BarChart, { ...sharedProps });
+	return /* @__PURE__ */ jsx(LineChart, {
+		...sharedProps,
+		strokeWidth,
+		showDots,
+		curveType,
+		showArea: chartType === "area" || showArea
 	});
 }
-MetricChange.displayName = "MetricChange";
-var metricItemVariants = cva("relative flex flex-col gap-2 p-5 bg-background rounded-xl border border-border shadow-xs transition-shadow duration-200 ease-out hover:shadow-sm motion-reduce:transition-none", {
-	variants: {
-		type: {
-			simple: "",
-			"icon-01": "",
-			"icon-02": "",
-			"icon-03": "",
-			"icon-04": "flex-row items-center",
-			"chart-01": "",
-			"chart-02": "",
-			"chart-03": "",
-			"chart-04": "p-0 bg-transparent border-0 shadow-none"
-		},
-		breakpoint: {
-			desktop: "",
-			mobile: ""
+function MetricCard({ value, title, description = "vs last month", change, changeOverride, changeSentiment = "neutral", data, series, chartType = "line", strokeWidth = 2, showArea = true, showDots = false, curveType = "smooth", valueFormatter = (n) => n.toLocaleString(), changeFormatter = (n) => {
+	return `${Math.abs(n).toFixed(0)}%`;
+}, size = "md", className, ...props }) {
+	const safeValue = getFiniteMetricValue(value);
+	const [displayValue, setDisplayValue] = useState(0);
+	const hasAnimated = useRef(false);
+	const rootRef = useRef(null);
+	useEffect(() => {
+		if (hasAnimated.current) {
+			setDisplayValue(safeValue);
+			return;
 		}
-	},
-	defaultVariants: {
-		type: "simple",
-		breakpoint: "desktop"
-	}
-});
-var MetricItem = React.memo(function MetricItem({ title, value, changeValue, changeTrend = "positive", changeIcon, comparisonText, subtitle, showDropdown = false, showActions = false, onViewReport, onDropdownClick, icon, iconBgColor, iconColor, chartData, featuredIconVariant = "circle", type = "simple", breakpoint = "desktop", className, children, ...props }) {
-	const displayIcon = icon || /* @__PURE__ */ jsx(TrendingUp, {
-		width: 24,
-		height: 24
-	});
-	const displayValue = formatMetricValue(value);
-	const defaultIconBgColor = type === "icon-01" ? featuredIconVariant === "modern" ? "var(--muted)" : "var(--success-muted)" : type === "icon-02" || type === "icon-03" || type === "icon-04" ? "var(--muted)" : "var(--success-muted)";
-	const defaultIconColor = type === "icon-01" ? featuredIconVariant === "modern" ? "var(--secondary-foreground)" : "var(--success)" : type === "icon-02" ? "var(--secondary-foreground)" : "var(--success)";
-	const finalIconBgColor = iconBgColor || defaultIconBgColor;
-	const finalIconColor = iconColor || defaultIconColor;
-	if (type === "chart-04") return /* @__PURE__ */ jsx("div", {
-		"data-slot": "metric-item",
-		className: cn(metricItemVariants({
-			type,
-			breakpoint
-		}), className),
-		...props,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-0.5 w-full",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex items-center px-5 pt-3 pb-2 w-full",
-				children: /* @__PURE__ */ jsx("p", {
-					className: "flex-1 text-sm font-semibold text-foreground",
-					children: title
-				})
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "relative bg-background border border-border rounded-xl shadow-xs p-5 flex flex-col gap-5",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-wrap items-center gap-3",
-						children: [/* @__PURE__ */ jsx("p", {
-							className: "text-display-sm font-semibold text-foreground",
-							children: displayValue
-						}), changeValue && /* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ jsx(MetricChange, {
-								value: changeValue,
-								trend: changeTrend,
-								icon: changeIcon ?? "trend"
-							}), comparisonText && /* @__PURE__ */ jsx("span", {
-								className: "text-sm font-medium text-muted-foreground",
-								children: comparisonText
-							})]
-						})]
-					}),
-					children ? children : chartData ? /* @__PURE__ */ jsx(MetricMiniChart, {
-						data: chartData,
-						width: void 0,
-						height: 56,
-						variant: "line",
-						showMarker: false,
-						trend: changeTrend,
-						className: "w-full"
-					}) : null,
-					showDropdown && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						"aria-label": "More options",
-						className: "absolute top-2 end-2 p-3 cursor-pointer rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors duration-150 ease-out hover:text-foreground",
-						onClick: onDropdownClick,
-						children: /* @__PURE__ */ jsx(MoreVertical, {
-							width: 20,
-							height: 20,
-							className: "text-muted-foreground"
-						})
-					})
-				]
-			})]
-		})
-	});
+		hasAnimated.current = true;
+		const win = rootRef.current?.ownerDocument.defaultView;
+		if (!win) {
+			setDisplayValue(safeValue);
+			return;
+		}
+		if (win.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+			setDisplayValue(safeValue);
+			return;
+		}
+		const duration = 600;
+		const startTime = win.performance.now();
+		let frameId;
+		const animate = (now) => {
+			const elapsed = now - startTime;
+			const progress = Math.min(elapsed / duration, 1);
+			const eased = 1 - (1 - progress) ** 3;
+			setDisplayValue(Math.round(eased * safeValue));
+			if (progress < 1) frameId = win.requestAnimationFrame(animate);
+			else setDisplayValue(safeValue);
+		};
+		frameId = win.requestAnimationFrame(animate);
+		return () => win.cancelAnimationFrame(frameId);
+	}, [safeValue]);
+	const calculatedChange = useMemo(() => {
+		if (changeOverride !== void 0) return getFiniteMetricValue(changeOverride);
+		if (change !== void 0) return getFiniteMetricValue(change);
+		if (!data || data.length < 2 || !series || series.length === 0) return void 0;
+		const seriesId = series[0].id;
+		const firstValue = data[0].values[seriesId];
+		const lastValue = data[data.length - 1].values[seriesId];
+		if (firstValue === 0 || firstValue === void 0 || !Number.isFinite(firstValue) || !Number.isFinite(lastValue)) return void 0;
+		return (lastValue - firstValue) / firstValue * 100;
+	}, [
+		data,
+		series,
+		change,
+		changeOverride
+	]);
+	const changeDirection = calculatedChange && calculatedChange > 0 ? "up" : "down";
 	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "metric-item",
-		className: cn(metricItemVariants({
-			type,
-			breakpoint
-		}), className),
+		ref: rootRef,
+		"data-slot": "metric-card",
+		className: cn(metricCardVariants({ size }), "transition-shadow duration-200 ease-out hover:shadow-md motion-reduce:transition-none", className),
 		...props,
-		children: [
-			type === "icon-01" && /* @__PURE__ */ jsxs("div", {
-				className: cn("flex items-center justify-center shrink-0 relative overflow-clip", featuredIconVariant === "modern" ? "rounded-[10px] border border-border shadow-xs" : featuredIconVariant === "square" ? "rounded-[10px] border border-border shadow-xs" : "rounded-full"),
-				style: {
-					width: 48,
-					height: 48,
-					backgroundColor: finalIconBgColor,
-					color: finalIconColor
-				},
-				children: [displayIcon, featuredIconVariant === "modern" && /* @__PURE__ */ jsx("div", {
-					className: "absolute inset-0 pointer-events-none rounded-[10px]",
-					style: { boxShadow: "var(--shadow-inset-ring)" }
-				})]
-			}),
-			(type === "icon-02" || type === "icon-03") && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-3 w-full",
+		children: [title && /* @__PURE__ */ jsx("h3", {
+			className: cn("font-semibold text-foreground", titleSizeClasses[size || "md"]),
+			children: title
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-end gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-3 flex-1 min-w-0",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: cn("flex items-center justify-center shrink-0", type === "icon-02" ? "rounded-full" : "rounded-lg border border-border shadow-xs"),
-					style: {
-						width: 48,
-						height: 48,
-						backgroundColor: finalIconBgColor,
-						color: finalIconColor
-					},
-					children: icon || /* @__PURE__ */ jsx(Eye, {
-						width: 24,
-						height: 24
-					})
-				}), /* @__PURE__ */ jsx("p", {
-					className: "flex-1 text-base font-semibold text-foreground",
-					children: title
-				})]
-			}),
-			type === "icon-04" && /* @__PURE__ */ jsx("div", {
-				className: cn("flex items-center justify-center shrink-0 rounded-md border border-border shadow-xs"),
-				style: {
-					width: 40,
-					height: 40,
-					backgroundColor: finalIconBgColor,
-					color: finalIconColor
-				},
-				children: icon || /* @__PURE__ */ jsx(TrendingUp, {
-					width: 20,
-					height: 20
-				})
-			}),
-			type !== "icon-02" && type !== "icon-03" && /* @__PURE__ */ jsxs("div", {
-				className: cn("flex flex-col gap-2", type === "icon-04" ? "flex-1 min-w-0" : "w-full"),
-				children: [type === "chart-01" || type === "chart-02" ? /* @__PURE__ */ jsx("p", {
-					className: "text-base font-semibold text-foreground",
-					children: title
-				}) : type === "icon-04" || type === "icon-01" ? /* @__PURE__ */ jsx("p", {
-					className: "text-sm font-semibold text-muted-foreground",
-					children: title
-				}) : /* @__PURE__ */ jsx("p", {
-					className: "text-sm font-medium text-muted-foreground",
-					children: title
-				}), type === "simple" || type === "icon-01" || type === "icon-04" ? /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-wrap items-center justify-between gap-3 w-full",
-					children: [/* @__PURE__ */ jsx("p", {
-						className: "text-display-sm font-semibold text-foreground",
-						children: displayValue
-					}), changeValue && comparisonText ? /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ jsx(MetricChange, {
-							value: changeValue,
-							trend: changeTrend,
-							icon: "arrow"
-						}), /* @__PURE__ */ jsx("span", {
-							className: "text-sm font-medium text-muted-foreground",
-							children: comparisonText
-						})]
-					}) : changeValue ? /* @__PURE__ */ jsx(MetricChange, {
-						value: changeValue,
-						trend: changeTrend,
-						icon: changeIcon ?? "arrow-right",
-						variant: "badge"
-					}) : subtitle ? /* @__PURE__ */ jsx("span", {
-						className: "text-sm font-medium text-muted-foreground",
-						children: subtitle
-					}) : null]
-				}) : null]
-			}),
-			type === "chart-01" && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-end gap-4 w-full",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex-1 flex flex-col gap-3",
-					children: [/* @__PURE__ */ jsx("p", {
-						className: "text-display-sm font-semibold text-foreground",
-						children: displayValue
-					}), (changeValue || comparisonText) && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [changeValue && /* @__PURE__ */ jsx(MetricChange, {
-							value: changeValue,
-							trend: changeTrend,
-							icon: "arrow"
-						}), comparisonText && /* @__PURE__ */ jsx("span", {
-							className: "text-sm font-medium text-muted-foreground truncate",
-							children: comparisonText
-						})]
+					className: cn("font-semibold text-foreground", valueSizeClasses[size || "md"]),
+					children: valueFormatter(displayValue)
+				}), calculatedChange !== void 0 && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: cn("inline-flex items-center gap-0.5 font-medium", changeSizeClasses[size || "md"], changeSentimentColors[changeSentiment]),
+						children: [
+							changeDirection === "up" ? /* @__PURE__ */ jsx(ArrowUp, {
+								className: "size-4",
+								"aria-hidden": "true"
+							}) : /* @__PURE__ */ jsx(ArrowDown, {
+								className: "size-4",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: changeDirection === "up" ? "Increased" : "Decreased"
+							}),
+							/* @__PURE__ */ jsx("span", { children: changeFormatter(calculatedChange) })
+						]
+					}), description && /* @__PURE__ */ jsx("span", {
+						className: cn("font-medium text-muted-foreground", changeSizeClasses[size || "md"]),
+						children: description
 					})]
-				}), chartData && /* @__PURE__ */ jsx(MetricMiniChart, {
-					data: chartData,
-					width: 112,
-					height: 56,
-					variant: "line",
-					trend: changeTrend
 				})]
-			}),
-			type === "chart-02" && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-end gap-4 w-full",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex-1 flex items-start gap-2",
-					children: [/* @__PURE__ */ jsx("p", {
-						className: "text-display-md font-semibold text-foreground",
-						children: displayValue
-					}), changeValue && /* @__PURE__ */ jsx(MetricChange, {
-						value: changeValue,
-						trend: changeTrend,
-						icon: "trend"
-					})]
-				}), chartData && /* @__PURE__ */ jsx(MetricMiniChart, {
-					data: chartData,
-					width: 128,
-					height: 56,
-					variant: "layers",
-					showMarker: false,
-					trend: changeTrend
-				})]
-			}),
-			type === "chart-03" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-2 w-full",
-				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-sm font-medium text-muted-foreground",
-					children: title
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-wrap items-center justify-between gap-3 w-full",
-					children: [/* @__PURE__ */ jsx("p", {
-						className: "text-display-sm font-semibold text-foreground",
-						children: displayValue
-					}), (changeValue || comparisonText) && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [changeValue && /* @__PURE__ */ jsx(MetricChange, {
-							value: changeValue,
-							trend: changeTrend,
-							icon: "trend"
-						}), comparisonText && /* @__PURE__ */ jsx("span", {
-							className: "text-sm font-medium text-muted-foreground",
-							children: comparisonText
-						})]
-					})]
-				})]
-			}), chartData && /* @__PURE__ */ jsx(MetricMiniChart, {
-				data: chartData,
-				height: 72,
-				variant: "area",
-				showMarker: false,
-				trend: changeTrend,
-				className: "w-full"
-			})] }),
-			(type === "icon-02" || type === "icon-03") && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-end gap-4 w-full",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex-1 flex flex-col gap-3",
-					children: [/* @__PURE__ */ jsx("p", {
-						className: "text-display-md font-semibold text-foreground",
-						children: displayValue
-					}), (changeValue || comparisonText) && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [changeValue && /* @__PURE__ */ jsx(MetricChange, {
-							value: changeValue,
-							trend: changeTrend,
-							icon: type === "icon-03" ? "trend" : "arrow"
-						}), comparisonText && /* @__PURE__ */ jsx("span", {
-							className: "text-sm font-medium text-muted-foreground truncate",
-							children: comparisonText
-						})]
-					})]
-				}), chartData && /* @__PURE__ */ jsx(MetricMiniChart, {
-					data: chartData,
-					width: 112,
-					height: 56,
-					variant: "line",
-					trend: changeTrend
-				})]
-			}),
-			showDropdown && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-label": "More options",
-				className: "absolute top-2 end-2 cursor-pointer rounded-sm p-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors duration-150 ease-out hover:text-foreground",
-				onClick: onDropdownClick,
-				children: /* @__PURE__ */ jsx(MoreVertical, {
-					width: 20,
-					height: 20,
-					className: "text-muted-foreground"
-				})
-			}),
-			showActions && /* @__PURE__ */ jsx("div", {
-				className: "flex items-center gap-2 pt-2",
-				children: /* @__PURE__ */ jsx(Button, {
-					appearance: "outline",
-					variant: "secondary",
-					size: "sm",
-					onClick: onViewReport,
-					children: "View report"
+			}), data && series && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				inert: true,
+				children: /* @__PURE__ */ jsx(MetricCardMiniChart, {
+					data,
+					series,
+					chartType,
+					strokeWidth,
+					showArea,
+					showDots,
+					curveType
 				})
-			})
-		]
+			})]
+		})]
 	});
-});
-MetricItem.displayName = "MetricItem";
+}
+MetricCard.displayName = "MetricCard";
 //#endregion
-export { MetricChange, MetricItem, MetricMiniChart, metricChangeVariants, metricItemVariants, metricMiniChartVariants };
+export { MetricCard, metricCardVariants };
 
 //# sourceMappingURL=index198.js.map