@humain/ui 2.1.63 → 2.1.65

package/dist/index199.js

@@ -1,258 +1,505 @@
 import { cn } from "./index2.js";
-import { Progress } from "./index17.js";
-import { Avatar } from "./index70.js";
+import { Button } from "./index5.js";
+import { ChartContainer } from "./index22.js";
+import { useReducedMotion } from "./index61.js";
 import { cva } from "class-variance-authority";
-import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from "lucide-react";
+import { ArrowUp, ArrowUpRight, Eye, MoreVertical, TrendingUp } from "lucide-react";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/organisms/content/NotificationItem/NotificationItem.tsx
-var notificationItemVariants = cva("relative flex gap-4 items-start overflow-hidden p-4 rounded-xl border bg-card shadow-sm", {
-	variants: { variant: {
-		primary: "",
-		success: "",
-		warning: "",
-		error: "",
-		gray: "",
-		avatar: "",
-		image: "",
-		progress: "",
-		none: ""
-	} },
-	defaultVariants: { variant: "primary" }
-});
-var outlineIconVariants = cva("", {
+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: {
-		primary: "border-primary text-primary",
-		success: "border-success text-success",
-		warning: "border-warning text-warning",
-		error: "border-destructive text-destructive"
+		line: "",
+		area: "",
+		layers: ""
 	} },
-	defaultVariants: { variant: "primary" }
+	defaultVariants: { variant: "line" }
 });
-/** Featured icon with concentric circle outlines */
-var OutlineIcon = ({ variant }) => {
-	const iconClasses = outlineIconVariants({ variant });
-	const Icon = {
-		primary: Info,
-		success: CheckCircle,
-		warning: AlertTriangle,
-		error: AlertCircle
-	}[variant];
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative size-5 shrink-0",
-		children: [
-			/* @__PURE__ */ jsx("div", { className: cn("absolute -inset-[45%] rounded-full border-2 opacity-10", iconClasses) }),
-			/* @__PURE__ */ jsx("div", { className: cn("absolute -inset-[20%] rounded-full border-2 opacity-30", iconClasses) }),
-			/* @__PURE__ */ jsx(Icon, { className: cn("size-5", iconClasses) })
-		]
-	});
-};
-/** Modern boxed featured icon */
-var BoxedIcon = ({ children }) => /* @__PURE__ */ jsx("div", {
-	className: "flex size-10 shrink-0 items-center justify-center rounded-lg border border-border bg-card shadow-sm",
-	children: /* @__PURE__ */ jsx("div", {
-		className: "text-secondary-foreground",
-		children
-	})
-});
-/** Close button */
-var CloseButton = ({ onClick }) => /* @__PURE__ */ jsx("button", {
-	type: "button",
-	onClick,
-	className: "absolute end-1 top-1 flex size-11 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
-	"aria-label": "Close notification",
-	children: /* @__PURE__ */ jsx(X, { className: "size-5" })
-});
-/** Action buttons */
-var ActionButtons = ({ primaryAction, secondaryAction, stacked = false }) => {
-	if (!primaryAction && !secondaryAction) return null;
-	if (stacked) return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-2",
-		children: [primaryAction && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: primaryAction.onClick,
-			className: "w-full rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground hover:bg-primary/90 transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-			children: primaryAction.label
-		}), secondaryAction && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: secondaryAction.onClick,
-			className: "w-full rounded-lg border border-border bg-card px-3 py-2 text-sm font-semibold text-secondary-foreground hover:bg-surface-2 transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-			children: secondaryAction.label
-		})]
-	});
+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", {
-		className: "flex items-center gap-3",
-		children: [primaryAction && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: primaryAction.onClick,
-			className: "min-h-9 py-1.5 text-sm font-semibold text-primary hover:text-primary/80 rounded-sm transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-			children: primaryAction.label
-		}), secondaryAction && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: secondaryAction.onClick,
-			className: "min-h-9 py-1.5 text-sm font-semibold text-secondary-foreground hover:text-foreground rounded-sm transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-			children: secondaryAction.label
+		"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 }
+			})]
 		})]
 	});
-};
-function NotificationLeadingElement({ variant, icon, avatarProps, imageSrc, imageAlt }) {
-	switch (variant) {
-		case "primary":
-		case "success":
-		case "warning":
-		case "error": return /* @__PURE__ */ jsx(OutlineIcon, { variant });
-		case "gray": return icon ? /* @__PURE__ */ jsx(BoxedIcon, { children: icon }) : /* @__PURE__ */ jsx(BoxedIcon, { children: /* @__PURE__ */ jsx(Info, { className: "size-5" }) });
-		case "avatar": return /* @__PURE__ */ jsx("div", {
-			className: "relative",
-			children: /* @__PURE__ */ jsx(Avatar, {
-				size: "md",
-				indicator: "online",
-				...avatarProps
-			})
-		});
-		case "image": return imageSrc ? /* @__PURE__ */ jsx("div", {
-			className: "size-[72px] shrink-0 overflow-hidden rounded-lg",
-			children: /* @__PURE__ */ jsx("img", {
-				src: imageSrc,
-				alt: imageAlt || "Notification image",
-				loading: "lazy",
-				className: "size-full object-cover"
-			})
-		}) : null;
-		case "progress": return icon ? /* @__PURE__ */ jsx(BoxedIcon, { children: icon }) : /* @__PURE__ */ jsx(BoxedIcon, { children: /* @__PURE__ */ jsx(Info, { className: "size-5" }) });
-		default: return null;
-	}
 }
-function NotificationContent({ variant, title, supportingText, timestamp, imageSrc, imageAlt, progressValue, progressLabel, primaryAction, secondaryAction, stackedActions }) {
-	const hasActions = primaryAction || secondaryAction;
-	if (variant === "progress") return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 flex-1 flex-col gap-4 pe-10",
+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: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ jsx("h3", {
-					className: "text-sm font-semibold text-foreground",
-					children: title
-				}), supportingText && /* @__PURE__ */ jsx("p", {
-					className: "text-sm text-secondary-foreground",
-					children: supportingText
-				})]
+			IconComponent && /* @__PURE__ */ jsx(IconComponent, {
+				"aria-hidden": "true",
+				width: iconSize,
+				height: iconSize,
+				color: iconColor,
+				className: cn(trend === "negative" && "rotate-180")
 			}),
-			/* @__PURE__ */ jsx(Progress, {
-				value: progressValue,
-				size: "md",
-				showValue: true,
-				labelPosition: "inline",
-				valueFormat: (value) => progressLabel || `${value}%`
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: trend === "positive" ? "Increased" : "Decreased"
 			}),
-			hasActions && /* @__PURE__ */ jsx(ActionButtons, {
-				primaryAction,
-				secondaryAction,
-				stacked: stackedActions
+			/* @__PURE__ */ jsx("span", {
+				className: cn("text-sm font-medium", textColor),
+				children: value
 			})
 		]
 	});
-	if (variant === "avatar") return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 flex-1 flex-col gap-3 pe-10",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-1",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("h3", {
-					className: "text-sm font-semibold text-foreground",
+}
+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: ""
+		}
+	},
+	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
-				}), timestamp && /* @__PURE__ */ jsx("span", {
-					className: "text-sm text-text-quaternary",
-					children: timestamp
-				})]
-			}), supportingText && /* @__PURE__ */ jsx("p", {
-				className: "text-sm text-secondary-foreground",
-				children: supportingText
+				})
+			}), /* @__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"
+						})
+					})
+				]
 			})]
-		}), hasActions && /* @__PURE__ */ jsx(ActionButtons, {
-			primaryAction,
-			secondaryAction,
-			stacked: stackedActions
-		})]
+		})
 	});
-	if (variant === "image") return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 flex-1 flex-col gap-3 pe-10",
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "metric-item",
+		className: cn(metricItemVariants({
+			type,
+			breakpoint
+		}), className),
+		...props,
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ jsx("h3", {
-					className: "text-sm font-semibold text-foreground",
+			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: [/* @__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
-				}), supportingText && /* @__PURE__ */ jsx("p", {
-					className: "text-sm text-secondary-foreground",
-					children: supportingText
 				})]
 			}),
-			imageSrc && /* @__PURE__ */ jsx("div", {
-				className: "w-full aspect-video overflow-hidden rounded-lg",
-				children: /* @__PURE__ */ jsx("img", {
-					src: imageSrc,
-					alt: imageAlt || "Notification image",
-					loading: "lazy",
-					className: "size-full object-cover"
+			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
 				})
 			}),
-			hasActions && /* @__PURE__ */ jsx(ActionButtons, {
-				primaryAction,
-				secondaryAction,
-				stacked: stackedActions
-			})
-		]
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 flex-1 flex-col gap-3 pe-10 pt-0.5",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-1",
-			children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-sm font-semibold text-foreground",
-				children: title
-			}), supportingText && /* @__PURE__ */ jsx("p", {
-				className: "text-sm text-secondary-foreground",
-				children: supportingText
-			})]
-		}), hasActions && /* @__PURE__ */ jsx(ActionButtons, {
-			primaryAction,
-			secondaryAction
-		})]
-	});
-}
-var NotificationItem = React.memo(function NotificationItem({ variant = "primary", title, supportingText, showCloseButton = true, onClose, primaryAction, secondaryAction, icon, avatarProps, timestamp, imageSrc, imageAlt, progressValue = 0, progressLabel, stackedActions = false, className, ...props }) {
-	return /* @__PURE__ */ jsxs("article", {
-		"data-slot": "notification-item",
-		className: cn(notificationItemVariants({ variant }), "transition-shadow duration-200 ease-out hover:shadow-md motion-reduce:transition-none", className),
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(NotificationLeadingElement, {
-				variant,
-				icon,
-				avatarProps,
-				imageSrc,
-				imageAlt
+			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
+						})]
+					})]
+				}), chartData && /* @__PURE__ */ jsx(MetricMiniChart, {
+					data: chartData,
+					width: 112,
+					height: 56,
+					variant: "line",
+					trend: changeTrend
+				})]
 			}),
-			/* @__PURE__ */ jsx(NotificationContent, {
-				variant,
-				title,
-				supportingText,
-				timestamp,
-				imageSrc,
-				imageAlt,
-				progressValue,
-				progressLabel,
-				primaryAction,
-				secondaryAction,
-				stackedActions
+			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
+				})]
 			}),
-			showCloseButton && /* @__PURE__ */ jsx(CloseButton, { onClick: onClose })
+			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"
+				})
+			})
 		]
 	});
 });
-NotificationItem.displayName = "NotificationItem";
+MetricItem.displayName = "MetricItem";
 //#endregion
-export { NotificationItem, notificationItemVariants };
+export { MetricChange, MetricItem, MetricMiniChart, metricChangeVariants, metricItemVariants, metricMiniChartVariants };
 
 //# sourceMappingURL=index199.js.map