@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/components/simple-list/simple-list.js

@@ -0,0 +1,146 @@
+import { cn } from "../../utils/cn.js";
+import { Avatar, AvatarFallback } from "../../core/avatar.js";
+import { Separator } from "../../core/separator.js";
+import { Label } from "../../core/label.js";
+import { Fragment, cloneElement, createElement, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/simple-list/simple-list.tsx
+var AVATAR_SIZE = {
+	sm: {
+		avatar: "h-8 w-8",
+		icon: "h-4 w-4"
+	},
+	default: {
+		avatar: "h-10 w-10",
+		icon: "h-5 w-5"
+	},
+	lg: {
+		avatar: "h-12 w-12",
+		icon: "h-6 w-6"
+	}
+};
+var LIST_SIZE_STYLES = {
+	sm: {
+		listGap: "gap-4",
+		rowGap: "gap-3",
+		rowGapFromSm: "sm:gap-3",
+		itemGap: "gap-1.5",
+		labelTypography: "text-xs font-medium",
+		rowValueTypography: "text-xs",
+		inlineIcon: "h-3.5 w-3.5 shrink-0",
+		avatarFallbackTypography: "text-[10px]"
+	},
+	default: {
+		listGap: "gap-5",
+		rowGap: "gap-4",
+		rowGapFromSm: "sm:gap-4",
+		itemGap: "gap-2",
+		labelTypography: "text-sm font-medium",
+		rowValueTypography: "text-sm",
+		inlineIcon: "h-4 w-4 shrink-0",
+		avatarFallbackTypography: "text-xs"
+	},
+	lg: {
+		listGap: "gap-6",
+		rowGap: "gap-5",
+		rowGapFromSm: "sm:gap-5",
+		itemGap: "gap-3",
+		labelTypography: "text-base font-medium",
+		rowValueTypography: "text-base",
+		inlineIcon: "h-[18px] w-[18px] shrink-0",
+		avatarFallbackTypography: "text-sm"
+	}
+};
+/** Detects callable React components: plain function components AND `forwardRef` exotics (e.g. Lucide icons). */
+function isComponentLike(icon) {
+	if (icon == null) return false;
+	if (typeof icon === "function") return true;
+	if (typeof icon === "object" && "$$typeof" in icon) return !isValidElement(icon);
+	return false;
+}
+function renderSizedIcon(icon, sizeClass) {
+	if (icon == null) return null;
+	if (isValidElement(icon)) {
+		const el = icon;
+		return cloneElement(el, { className: cn(el.props.className, sizeClass) });
+	}
+	if (isComponentLike(icon)) return createElement(icon, {
+		className: cn(sizeClass),
+		"aria-hidden": true
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center justify-center", sizeClass),
+		"aria-hidden": true,
+		children: icon
+	});
+}
+function ItemRow({ item, effectiveDirection, iconStyle, avatarSize, size }) {
+	const isRow = effectiveDirection === "row";
+	const isAvatar = iconStyle === "avatar";
+	const isInline = iconStyle === "inline";
+	const avatarSizeClasses = AVATAR_SIZE[avatarSize];
+	const listSizeStyles = LIST_SIZE_STYLES[size];
+	const inlineIconNode = isInline && item.icon != null ? renderSizedIcon(item.icon, listSizeStyles.inlineIcon) : null;
+	const avatarNode = isAvatar && item.icon != null ? /* @__PURE__ */ jsx(Avatar, {
+		className: cn("shrink-0", avatarSizeClasses.avatar),
+		children: /* @__PURE__ */ jsx(AvatarFallback, {
+			className: cn("flex items-center justify-center gap-1 border", listSizeStyles.avatarFallbackTypography),
+			children: renderSizedIcon(item.icon, avatarSizeClasses.icon)
+		})
+	}) : null;
+	const labelNode = /* @__PURE__ */ jsx(Label, {
+		className: listSizeStyles.labelTypography,
+		children: inlineIconNode != null ? /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2",
+			children: [inlineIconNode, /* @__PURE__ */ jsx("span", { children: item.label })]
+		}) : item.label
+	});
+	if (isAvatar && !isRow) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-row items-start min-w-0", listSizeStyles.rowGap, item.className),
+		children: [avatarNode, /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-w-0 flex-1 flex-col", listSizeStyles.itemGap),
+			children: [labelNode, item.content]
+		})]
+	});
+	if (isRow) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-row items-start sm:items-center min-w-0", listSizeStyles.rowGap, item.className),
+		children: [avatarNode, /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-w-0 flex-1 flex-col sm:flex-row sm:items-center", listSizeStyles.itemGap, listSizeStyles.rowGapFromSm),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				children: labelNode
+			}), /* @__PURE__ */ jsx("div", {
+				className: cn("min-w-0 flex sm:flex-1 sm:justify-end", listSizeStyles.rowValueTypography),
+				children: item.content
+			})]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col", listSizeStyles.itemGap, item.className),
+		children: [labelNode, item.content]
+	});
+}
+function SimpleList({ items, size = "default", direction = "column", iconStyle = "inline", avatarSize = "default", separators = true, gapClassName, emptyState, className }) {
+	const listSizeStyles = LIST_SIZE_STYLES[size];
+	const visibleItems = items.filter((item) => {
+		if ((item.hideIfEmpty ?? true) && item.content == null) return false;
+		return true;
+	});
+	if (visibleItems.length === 0) return emptyState != null ? /* @__PURE__ */ jsx(Fragment$1, { children: emptyState }) : null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col", gapClassName ?? listSizeStyles.listGap, className),
+		children: visibleItems.map((item, index) => {
+			const effectiveDirection = item.direction ?? direction;
+			const isLast = index === visibleItems.length - 1;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ItemRow, {
+				item,
+				effectiveDirection,
+				iconStyle,
+				avatarSize,
+				size
+			}), separators && !isLast ? /* @__PURE__ */ jsx(Separator, {}) : null] }, item.key);
+		})
+	});
+}
+//#endregion
+export { SimpleList };

package/dist/components/simple-paginated-list/simple-paginated-list.js

@@ -0,0 +1,178 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { cloneElement, createElement, isValidElement, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/components/simple-paginated-list/simple-paginated-list.tsx
+var SIZE_STYLES = {
+	sm: {
+		rowPad: "py-2",
+		insetX: "px-2",
+		gap: "gap-2",
+		label: "text-xs",
+		icon: "h-3.5 w-3.5 shrink-0"
+	},
+	default: {
+		rowPad: "py-3",
+		insetX: "px-2",
+		gap: "gap-3",
+		label: "text-sm",
+		icon: "h-4 w-4 shrink-0"
+	},
+	lg: {
+		rowPad: "py-4",
+		insetX: "px-3",
+		gap: "gap-4",
+		label: "text-base",
+		icon: "h-5 w-5 shrink-0"
+	}
+};
+var slideTransition = {
+	duration: .15,
+	ease: [
+		.22,
+		1,
+		.36,
+		1
+	]
+};
+var slideVariants = {
+	enter: (dir) => ({
+		x: dir > 0 ? "100%" : "-100%",
+		opacity: 1
+	}),
+	center: {
+		x: 0,
+		opacity: 1
+	},
+	exit: (dir) => ({
+		x: dir > 0 ? "-100%" : "100%",
+		opacity: 1
+	})
+};
+function isComponentLike(icon) {
+	if (icon == null) return false;
+	if (typeof icon === "function") return true;
+	if (typeof icon === "object" && "$$typeof" in icon) return !isValidElement(icon);
+	return false;
+}
+function renderSizedIcon(icon, sizeClass) {
+	if (icon == null) return null;
+	if (isValidElement(icon)) {
+		const el = icon;
+		return cloneElement(el, { className: cn(el.props.className, sizeClass) });
+	}
+	if (isComponentLike(icon)) return createElement(icon, {
+		className: cn(sizeClass),
+		"aria-hidden": true
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center justify-center", sizeClass),
+		"aria-hidden": true,
+		children: icon
+	});
+}
+function ListRow({ item, showBorder, styles }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center", styles.gap, styles.rowPad, showBorder && "border-b border-border"),
+		children: [
+			item.icon != null ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0",
+				children: renderSizedIcon(item.icon, styles.icon)
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: cn("min-w-0 flex-1 truncate", styles.label),
+				children: item.label
+			}),
+			item.action != null ? /* @__PURE__ */ jsx("span", {
+				className: "ml-auto shrink-0 overflow-visible",
+				children: item.action
+			}) : null
+		]
+	});
+}
+function SimplePaginatedList({ items, itemsPerPage = 3, size = "default", className }) {
+	const [page, setPage] = useState(0);
+	const [direction, setDirection] = useState(1);
+	const pageSize = Math.max(1, itemsPerPage);
+	const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
+	const showPagination = items.length > pageSize;
+	const pageItems = items.slice(page * pageSize, (page + 1) * pageSize);
+	const hasPrev = page > 0;
+	const hasNext = page < totalPages - 1;
+	const noItems = items.length === 0;
+	const styles = SIZE_STYLES[size];
+	useEffect(() => {
+		setPage((current) => Math.min(current, Math.max(0, totalPages - 1)));
+	}, [
+		items,
+		pageSize,
+		totalPages
+	]);
+	const goPrev = () => {
+		if (!hasPrev || noItems) return;
+		setDirection(-1);
+		setPage((current) => current - 1);
+	};
+	const goNext = () => {
+		if (!hasNext || noItems) return;
+		setDirection(1);
+		setPage((current) => current + 1);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("w-full", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("overflow-hidden", styles.insetX),
+			children: /* @__PURE__ */ jsx(AnimatePresence, {
+				mode: "wait",
+				custom: direction,
+				children: /* @__PURE__ */ jsx(motion.div, {
+					custom: direction,
+					variants: slideVariants,
+					initial: "enter",
+					animate: "center",
+					exit: "exit",
+					transition: slideTransition,
+					children: pageItems.map((item, index) => /* @__PURE__ */ jsx(ListRow, {
+						item,
+						showBorder: index < pageItems.length - 1,
+						styles
+					}, item.id))
+				}, page)
+			})
+		}), showPagination ? /* @__PURE__ */ jsxs("div", {
+			className: cn("mt-3 flex justify-end gap-1", styles.insetX),
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				color: "primary",
+				size: "icon",
+				fullWidth: false,
+				"aria-label": "Previous page",
+				disabled: noItems || !hasPrev,
+				onClick: goPrev,
+				children: /* @__PURE__ */ jsx(ChevronLeft, {
+					className: "text-primary",
+					"aria-hidden": true
+				})
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				color: "primary",
+				size: "icon",
+				fullWidth: false,
+				"aria-label": "Next page",
+				disabled: noItems || !hasNext,
+				onClick: goNext,
+				children: /* @__PURE__ */ jsx(ChevronRight, {
+					className: "text-primary",
+					"aria-hidden": true
+				})
+			})]
+		}) : null]
+	});
+}
+//#endregion
+export { SimplePaginatedList };

package/dist/components/simplified-date/simplified-date.js

@@ -0,0 +1,56 @@
+import { cn } from "../../utils/cn.js";
+import Tooltip from "../tooltip/tooltip.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/simplified-date/simplified-date.tsx
+var DEFAULT_DATE_FORMAT = "dd/MM/yyyy HH:mm:ss";
+var MS_THRESHOLD = 1e10;
+/** Applied only when `relative` is true (relative time + tooltip). */
+var RELATIVE_TIME_OUTER_CLASSES = "underline underline-offset-5 decoration-primary/20";
+function normalizeTimestamp(ts) {
+	if (!Number.isFinite(ts) || ts <= 0) return null;
+	return ts < MS_THRESHOLD ? ts * 1e3 : ts;
+}
+function computeRelativeTime(ms) {
+	const seconds = Math.floor((Date.now() - ms) / 1e3);
+	if (seconds < 60) return "just now";
+	const minutes = Math.floor(seconds / 60);
+	if (minutes < 60) return `${minutes}m ago`;
+	const hours = Math.floor(minutes / 60);
+	if (hours < 24) return `${hours}h ago`;
+	const days = Math.floor(hours / 24);
+	if (days < 30) return `${days}d ago`;
+	const months = Math.floor(days / 30);
+	if (months < 12) return `${months}mo ago`;
+	return `${Math.floor(months / 12)}y ago`;
+}
+function formatDate(date, format) {
+	const pad = (n) => String(n).padStart(2, "0");
+	const tokens = {
+		dd: pad(date.getDate()),
+		MM: pad(date.getMonth() + 1),
+		yyyy: String(date.getFullYear()),
+		HH: pad(date.getHours()),
+		mm: pad(date.getMinutes()),
+		ss: pad(date.getSeconds())
+	};
+	return format.replace(/yyyy|MM|dd|HH|mm|ss/g, (match) => tokens[match]);
+}
+function SimplifiedDate({ ts, dateFormat, className, relative = false }) {
+	const ms = useMemo(() => ts != null ? normalizeTimestamp(ts) : null, [ts]);
+	if (ms === null) return null;
+	const detailedDate = formatDate(new Date(ms), dateFormat ?? DEFAULT_DATE_FORMAT);
+	if (relative) return /* @__PURE__ */ jsx(Tooltip, {
+		content: detailedDate,
+		children: /* @__PURE__ */ jsx("span", {
+			className: cn(RELATIVE_TIME_OUTER_CLASSES, className),
+			children: computeRelativeTime(ms)
+		})
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(className),
+		children: detailedDate
+	});
+}
+//#endregion
+export { SimplifiedDate };

package/dist/components/skeletons/table-skeleton.js

@@ -0,0 +1,16 @@
+import { cn } from "../../utils/cn.js";
+import { Skeleton } from "../../core/skeleton.js";
+import { TableBody, TableCell, TableRow } from "../../core/table.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeletons/table-skeleton.tsx
+function TableSkeleton({ totalRows = 5, totalColumns = 5, showBorder = false, padFirstColumn = false }) {
+	return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: totalRows }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, {
+		className: cn(showBorder ? "border-b border-border/50 last:border-b-0" : "border-0"),
+		children: Array.from({ length: totalColumns }).map((_, colIndex) => /* @__PURE__ */ jsx(TableCell, {
+			className: cn("px-2 py-4", padFirstColumn && colIndex === 0 && "pl-4"),
+			children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" })
+		}, colIndex))
+	}, rowIndex)) });
+}
+//#endregion
+export { TableSkeleton };

package/dist/components/spinner/spinner.js

@@ -0,0 +1,25 @@
+import { cn } from "../../utils/cn.js";
+import { resolveColor } from "../../utils/color.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { LoaderCircle } from "lucide-react";
+//#region src/components/spinner/spinner.tsx
+var Spinner = React$1.forwardRef(function Spinner({ color, size, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...rest }, ref) {
+	const resolved = color != null ? resolveColor(color, "text") : void 0;
+	const ariaLabelResolved = ariaLabelledby != null ? void 0 : ariaLabel !== void 0 ? ariaLabel : "Loading";
+	return /* @__PURE__ */ jsx(LoaderCircle, {
+		ref,
+		...rest,
+		className: cn("animate-spin", resolved?.className, className),
+		style: {
+			...resolved?.style,
+			...style
+		},
+		size: size ?? "1em",
+		"aria-label": ariaLabelResolved,
+		"aria-labelledby": ariaLabelledby
+	});
+});
+Spinner.displayName = "Spinner";
+//#endregion
+export { Spinner };

package/dist/components/stat-card/stat-card.js

@@ -0,0 +1,206 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { isPresetColor } from "../../utils/color.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../core/popover.js";
+import { IconAvatar } from "../icon-avatar/icon-avatar.js";
+import { Typography } from "../typography/typography.js";
+import { Badge } from "../../core/badge.js";
+import { Spinner } from "../spinner/spinner.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Info, Triangle } from "lucide-react";
+//#region src/components/stat-card/stat-card.tsx
+var PRESET_SURFACE_CLASS = {
+	primary: "bg-gradient-to-br from-primary/5 to-primary/10",
+	secondary: "bg-gradient-to-br from-secondary/5 to-secondary/10",
+	error: "bg-gradient-to-br from-error/5 to-error/10",
+	info: "bg-gradient-to-br from-info/5 to-info/10",
+	success: "bg-gradient-to-br from-success/5 to-success/10",
+	warning: "bg-gradient-to-br from-warning/5 to-warning/10",
+	disabled: "bg-gradient-to-br from-disabled/5 to-disabled/10",
+	gray: "bg-gradient-to-br from-gray/5 to-gray/10",
+	mist: "bg-gradient-to-br from-mist to-mist-border"
+};
+var PRESET_INFO_CLASS = {
+	primary: "text-primary/50 hover:text-primary/80 focus-visible:ring-primary/80",
+	secondary: "text-secondary/50 hover:text-secondary/80 focus-visible:ring-secondary/80",
+	error: "text-error/50 hover:text-error/80 focus-visible:ring-error/80",
+	info: "text-info/50 hover:text-info/80 focus-visible:ring-info/80",
+	success: "text-success/50 hover:text-success/80 focus-visible:ring-success/80",
+	warning: "text-warning/50 hover:text-warning/80 focus-visible:ring-warning/80",
+	disabled: "text-disabled/50 hover:text-disabled/80 focus-visible:ring-disabled/80",
+	gray: "text-gray/50 hover:text-gray/80 focus-visible:ring-gray/80",
+	mist: "text-mist-secondary hover:text-mist-foreground focus-visible:ring-mist-border"
+};
+var SIZE_STYLES = {
+	sm: {
+		card: "rounded-2xl p-4",
+		gap: "gap-4",
+		headerGap: "gap-3",
+		avatar: 40,
+		icon: "size-5",
+		heading: "text-base",
+		value: "text-2xl",
+		footer: "text-xs",
+		badge: "gap-1 rounded-full px-2.5 py-0.5 text-xs",
+		info: "size-7 [&_svg]:size-4"
+	},
+	default: {
+		card: "rounded-2xl p-5",
+		gap: "gap-5",
+		headerGap: "gap-3",
+		avatar: 52,
+		icon: "size-6",
+		heading: "text-xl",
+		value: "text-3xl",
+		footer: "text-sm",
+		badge: "gap-1 rounded-full px-3 py-1 text-sm",
+		info: "size-8 [&_svg]:size-5"
+	},
+	lg: {
+		card: "rounded-3xl p-6",
+		gap: "gap-6",
+		headerGap: "gap-4",
+		avatar: 60,
+		icon: "size-7",
+		heading: "text-2xl",
+		value: "text-4xl",
+		footer: "text-base",
+		badge: "gap-1.5 rounded-full px-3.5 py-1 text-base",
+		info: "size-9 [&_svg]:size-6"
+	}
+};
+function hasRenderableContent(content) {
+	if (content === void 0 || content === null) return false;
+	if (typeof content === "string") return content.length > 0;
+	if (typeof content === "boolean") return false;
+	return true;
+}
+function resolveStatColor(color, value, previousValue) {
+	if (color !== void 0) return color;
+	if (previousValue !== void 0) return value - previousValue < 0 ? "error" : "success";
+	return "primary";
+}
+function resolveSurface(color) {
+	if (isPresetColor(color)) return { className: PRESET_SURFACE_CLASS[color] };
+	return { style: { backgroundImage: `linear-gradient(135deg, color-mix(in srgb, ${color} 7%, transparent), color-mix(in srgb, ${color} 14%, transparent))` } };
+}
+function renderSizedIcon(icon, iconClassName) {
+	if (icon == null) return null;
+	if (React$1.isValidElement(icon)) {
+		const el = icon;
+		return React$1.cloneElement(el, { className: cn(el.props.className, "shrink-0", iconClassName) });
+	}
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex shrink-0 items-center justify-center", iconClassName),
+		children: icon
+	});
+}
+function formatValue(value, valueType) {
+	if (valueType === "string") return String(value);
+	const formatted = value.toLocaleString();
+	if (valueType === "percentage") return `${formatted}%`;
+	return formatted;
+}
+function getTrend(value, previousValue) {
+	if (previousValue === void 0) return void 0;
+	if (!Number.isFinite(value) || !Number.isFinite(previousValue)) return void 0;
+	if (previousValue === 0) return void 0;
+	const percent = (value - previousValue) / Math.abs(previousValue) * 100;
+	if (!Number.isFinite(percent)) return void 0;
+	return {
+		direction: percent > 0 ? "up" : percent < 0 ? "down" : "flat",
+		label: `${Math.abs(percent).toLocaleString(void 0, { maximumFractionDigits: 1 })}%`
+	};
+}
+var StatCard = React$1.forwardRef(({ color, size = "default", loading = false, icon, heading, value, previousValue, previousValueComparisonTip, infoContent, valueType = "number", className, style, ...divProps }, ref) => {
+	const s = SIZE_STYLES[size];
+	const statColor = resolveStatColor(color, value, previousValue);
+	const surface = resolveSurface(statColor);
+	const trend = getTrend(value, previousValue);
+	const showTrend = trend !== void 0 && !(value === 0 && previousValue === 0);
+	const showInfo = hasRenderableContent(infoContent);
+	const showFooter = showTrend || showInfo;
+	const presetInfoClass = isPresetColor(statColor) ? PRESET_INFO_CLASS[statColor] : void 0;
+	const infoButtonStyle = !isPresetColor(statColor) && typeof statColor === "string" ? {
+		color: statColor,
+		"--tw-ring-color": statColor
+	} : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("relative isolate flex w-full flex-col overflow-hidden border border-transparent text-foreground", s.card, surface.className, className),
+		style: {
+			...surface.style,
+			...style
+		},
+		"aria-busy": loading,
+		...divProps,
+		children: [loading ? /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 z-20 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(Spinner, {
+				size: s.avatar,
+				color: statColor
+			})
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: cn("relative z-10 flex flex-col", s.gap, loading && "pointer-events-none blur-[1px] opacity-60"),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: cn("flex items-center", s.headerGap),
+					children: [icon ? /* @__PURE__ */ jsx(IconAvatar, {
+						color: statColor,
+						size: s.avatar,
+						ring: {
+							show: true,
+							color: statColor
+						},
+						children: renderSizedIcon(icon, s.icon)
+					}) : null, /* @__PURE__ */ jsx(Typography, {
+						as: "div",
+						variant: "h5",
+						className: cn("font-medium leading-tight", s.heading),
+						children: heading
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("font-bold leading-none tracking-tight text-foreground", s.value),
+					children: formatValue(value, valueType)
+				}),
+				showFooter ? /* @__PURE__ */ jsxs("div", {
+					className: cn("flex items-center gap-3", s.footer),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 items-center gap-3",
+						children: [showTrend ? /* @__PURE__ */ jsxs(Badge, {
+							color: statColor,
+							variant: "outline",
+							className: s.badge,
+							children: [trend.direction === "flat" ? null : /* @__PURE__ */ jsx(Triangle, {
+								"aria-hidden": true,
+								className: cn("size-3 fill-current stroke-current", trend.direction === "down" && "rotate-180")
+							}), trend.label]
+						}) : null, showTrend && hasRenderableContent(previousValueComparisonTip) ? /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate text-foreground",
+							children: previousValueComparisonTip
+						}) : null]
+					}), showInfo ? /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "More information",
+							className: cn("inline-flex shrink-0 items-center justify-center rounded-full outline-none transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background", s.info, presetInfoClass),
+							style: infoButtonStyle,
+							children: /* @__PURE__ */ jsx(Info, { "aria-hidden": true })
+						})
+					}), /* @__PURE__ */ jsx(PopoverContent, {
+						align: "end",
+						side: "top",
+						sideOffset: 8,
+						children: infoContent
+					})] }) : null]
+				}) : null
+			]
+		})]
+	});
+});
+StatCard.displayName = "StatCard";
+//#endregion
+export { StatCard };