@zendir/ui 0.4.1 → 0.6.0

package/dist/react/cards/TelemetryStreamCard.js

@@ -1,309 +1,335 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useMemo } from "react";
 import { useTheme } from "../theme/ThemeProvider.js";
 import { Icon } from "../core/display/Icon.js";
-import { CardHeader } from "../core/display/CardHeader.js";
 import { classNames } from "../utils/index.js";
+import { CardHeader } from "../core/display/CardHeader.js";
 import { useCompactMode } from "../hooks/useCompactMode.js";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/cards/TelemetryStreamCard.tsx
+/**
+* @zendir/ui - TelemetryStreamCard Component
+*
+* Compact streaming telemetry card showing individual metric channels.
+* Designed for real-time data display with configurable metrics.
+*
+* Features:
+* - Configurable metric channels
+* - Streaming status indicator
+* - Color-coded values based on thresholds
+* - WCAG 2.1 AA accessibility
+*/
+/**
+* Get status color for a metric value
+*/
 function getMetricColor(status, tokens) {
-  if (!status || status === "normal") return tokens.colors.status.normal;
-  if (status === "caution") return tokens.colors.status.caution;
-  if (status === "critical") return tokens.colors.status.critical;
-  if (status === "standby") return tokens.colors.status.standby;
-  return tokens.colors.text.primary;
+	if (!status || status === "normal") return tokens.colors.status.normal;
+	if (status === "caution") return tokens.colors.status.caution;
+	if (status === "critical") return tokens.colors.status.critical;
+	if (status === "standby") return tokens.colors.status.standby;
+	return tokens.colors.text.primary;
 }
-const TelemetryStreamCard = memo(function TelemetryStreamCard2({
-  title = "Telemetry",
-  channelCount = 12,
-  frequency = 1,
-  isStreaming = true,
-  metrics = [],
-  loading = false,
-  className = "",
-  compact = false,
-  defaultExpanded = false,
-  onPinChange
-}) {
-  const { tokens, theme, prefersReducedMotion } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const isBoldVariant = theme === "transparent-bold";
-  const isMinimalVariant = theme === "transparent-minimal";
-  const useGlassMode = isBoldVariant || isMinimalVariant;
-  const glassAccentColor = tokens.colors.accent.primary;
-  const glassAccentMuted = `${glassAccentColor}66`;
-  const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({
-    compact,
-    defaultExpanded,
-    onPinChange
-  });
-  const glassContainerStyle = useGlassMode ? {
-    backgroundColor: "rgba(10, 15, 25, 0.35)",
-    backdropFilter: "blur(12px)",
-    WebkitBackdropFilter: "blur(12px)",
-    border: `1px solid ${glassAccentMuted}`,
-    borderTop: isBoldVariant ? `2px solid ${glassAccentColor}` : `1px solid ${glassAccentColor}`
-  } : {};
-  const cardStyle = useMemo(() => ({
-    position: "relative",
-    overflow: "hidden",
-    ...useGlassMode ? glassContainerStyle : {
-      backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
-      ...isTransparentTheme && {
-        backdropFilter: "blur(12px)",
-        WebkitBackdropFilter: "blur(12px)"
-      },
-      ...tokens.colors.border.cardStyleDefault ?? { border: `1px solid ${tokens.colors.border.default}` }
-    },
-    borderRadius: tokens.borderRadius.lg,
-    padding: tokens.spacing.md
-  }), [tokens, isTransparentTheme, useGlassMode, glassContainerStyle]);
-  const metricBoxStyle = useMemo(() => ({
-    backgroundColor: tokens.colors.background.elevated,
-    borderRadius: tokens.borderRadius.md,
-    padding: tokens.spacing.sm
-  }), [tokens]);
-  if (loading) {
-    return /* @__PURE__ */ jsxs(
-      "article",
-      {
-        className: classNames("zendir-telemetry-stream-card", className),
-        style: cardStyle,
-        "aria-busy": "true",
-        "aria-label": "Loading telemetry stream",
-        children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 16 }, children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { style: {
-                height: 16,
-                width: 80,
-                backgroundColor: tokens.colors.background.elevated,
-                borderRadius: 4,
-                marginBottom: 4
-              } }),
-              /* @__PURE__ */ jsx("div", { style: {
-                height: 12,
-                width: 100,
-                backgroundColor: tokens.colors.background.elevated,
-                borderRadius: 4
-              } })
-            ] }),
-            /* @__PURE__ */ jsx("div", { style: {
-              height: 24,
-              width: 70,
-              backgroundColor: tokens.colors.background.elevated,
-              borderRadius: 12
-            } })
-          ] }),
-          /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }, children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxs("div", { style: metricBoxStyle, children: [
-            /* @__PURE__ */ jsx("div", { style: {
-              height: 10,
-              width: 60,
-              backgroundColor: tokens.colors.background.base,
-              borderRadius: 4,
-              marginBottom: 8
-            } }),
-            /* @__PURE__ */ jsx("div", { style: {
-              height: 20,
-              width: 80,
-              backgroundColor: tokens.colors.background.base,
-              borderRadius: 4
-            } })
-          ] }, i)) })
-        ]
-      }
-    );
-  }
-  if (compact && !expanded) {
-    return /* @__PURE__ */ jsxs(
-      "article",
-      {
-        className: classNames("zendir-telemetry-stream-card", "compact", className),
-        ...handlers,
-        style: {
-          ...cardStyle,
-          padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
-          cursor: "pointer",
-          transition: `all ${transitionDuration} ease-out`
-        },
-        onMouseEnter: (e) => {
-          handlers.onMouseEnter();
-          if (!prefersReducedMotion) {
-            e.currentTarget.style.transform = "scale(1.01)";
-            e.currentTarget.style.boxShadow = `0 4px 12px ${tokens.colors.accent.primary}20`;
-          }
-        },
-        onMouseLeave: (e) => {
-          handlers.onMouseLeave();
-          e.currentTarget.style.transform = "scale(1)";
-          e.currentTarget.style.boxShadow = "";
-        },
-        "aria-label": `${title} (compact)`,
-        children: [
-          useGlassMode && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                inset: 0,
-                background: "linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)",
-                pointerEvents: "none",
-                zIndex: 0
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: tokens.spacing.md, position: "relative", zIndex: 1 }, children: [
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm, flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    width: 8,
-                    height: 8,
-                    borderRadius: "50%",
-                    backgroundColor: isStreaming ? tokens.colors.status.normal : tokens.colors.status.off,
-                    boxShadow: isStreaming ? `0 0 6px ${tokens.colors.status.normal}` : "none",
-                    flexShrink: 0
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { style: {
-                fontWeight: tokens.typography.fontWeight.medium,
-                color: useGlassMode ? glassAccentColor : void 0,
-                textShadow: useGlassMode ? `0 0 16px ${glassAccentMuted}` : void 0
-              }, children: title.split(" ")[0] }),
-              useGlassMode && /* @__PURE__ */ jsx("div", { style: {
-                flex: 1,
-                height: isBoldVariant ? "2px" : "1px",
-                minWidth: 20,
-                background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`,
-                boxShadow: isBoldVariant ? `0 0 8px ${glassAccentMuted}` : void 0
-              } })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm, flexShrink: 0 }, children: [
-              /* @__PURE__ */ jsxs("span", { style: {
-                color: tokens.colors.text.tertiary,
-                fontSize: tokens.typography.fontSize.xs,
-                backgroundColor: useGlassMode ? `${glassAccentColor}20` : void 0,
-                padding: useGlassMode ? "1px 6px" : void 0,
-                borderRadius: tokens.borderRadius.sm
-              }, children: [
-                channelCount,
-                "ch"
-              ] }),
-              metrics.slice(0, 2).map((metric) => /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  style: {
-                    fontVariantNumeric: "tabular-nums",
-                    fontFamily: tokens.typography.fontFamily.mono,
-                    fontSize: tokens.typography.fontSize.xs,
-                    color: getMetricColor(metric.status, tokens)
-                  },
-                  children: [
-                    metric.value,
-                    metric.unit ? metric.unit : ""
-                  ]
-                },
-                metric.id
-              )),
-              isPinned && /* @__PURE__ */ jsx(Icon, { name: "lock", size: 12, color: tokens.colors.accent.primary })
-            ] })
-          ] })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "article",
-    {
-      className: classNames("zendir-telemetry-stream-card", compact ? "expanded" : "", className),
-      ...compact ? handlers : {},
-      role: compact ? handlers.role : "article",
-      tabIndex: compact ? handlers.tabIndex : void 0,
-      "aria-expanded": compact ? handlers["aria-expanded"] : void 0,
-      style: {
-        ...cardStyle,
-        cursor: compact ? "pointer" : void 0,
-        transition: compact ? `all ${transitionDuration} ease-out` : void 0
-      },
-      "aria-label": `${title} - ${isStreaming ? "Streaming" : "Paused"}`,
-      "aria-live": "polite",
-      children: [
-        useGlassMode && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              background: "linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)",
-              pointerEvents: "none",
-              zIndex: 0
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          CardHeader,
-          {
-            icon: "antenna-receive",
-            title,
-            subtitle: `${channelCount} channels • ${frequency} Hz`,
-            status: isStreaming ? "normal" : "standby",
-            badge: isStreaming ? "Streaming" : "Paused",
-            badgeColor: isStreaming ? tokens.colors.status.normal : tokens.colors.status.standby
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { style: {
-          display: "grid",
-          gridTemplateColumns: "repeat(2, 1fr)",
-          gap: 12
-        }, children: metrics.map((metric) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: metricBoxStyle,
-            role: "group",
-            "aria-label": `${metric.label}: ${metric.value}${metric.unit || ""}`,
-            children: [
-              /* @__PURE__ */ jsx("div", { style: {
-                fontSize: tokens.typography.fontSize.xxs,
-                // 0.625rem / 10px (AstroUXDS compact)
-                fontWeight: tokens.typography.fontWeight.medium,
-                // 500 (AstroUXDS medium)
-                textTransform: "uppercase",
-                letterSpacing: "0.05em",
-                color: tokens.colors.text.tertiary,
-                marginBottom: 4
-              }, children: metric.label }),
-              /* @__PURE__ */ jsxs("div", { style: {
-                fontSize: tokens.typography.fontSize.lg,
-                fontWeight: tokens.typography.fontWeight.bold,
-                // 700 (AstroUXDS bold)
-                fontFamily: tokens.typography.fontFamily.mono,
-                fontVariantNumeric: "tabular-nums",
-                color: getMetricColor(metric.status, tokens)
-              }, children: [
-                typeof metric.value === "number" ? metric.format ? metric.format(metric.value) : metric.value.toLocaleString() : metric.value,
-                metric.unit && /* @__PURE__ */ jsx("span", { style: {
-                  fontSize: tokens.typography.fontSize.sm,
-                  fontWeight: tokens.typography.fontWeight.normal,
-                  // 400 (AstroUXDS normal)
-                  marginLeft: 2
-                }, children: metric.unit })
-              ] })
-            ]
-          },
-          metric.id
-        )) }),
-        /* @__PURE__ */ jsx("style", { children: `
+/**
+* TelemetryStreamCard - Compact streaming telemetry display
+*
+* @example
+* ```tsx
+* <TelemetryStreamCard
+*   title="Telemetry"
+*   channelCount={12}
+*   frequency={1}
+*   isStreaming={true}
+*   metrics={[
+*     { id: 'cpu', label: 'CPU Temp', value: 42, unit: '°C', status: 'normal' },
+*     { id: 'voltage', label: 'Bus Voltage', value: 28.4, unit: 'V' },
+*     { id: 'wheel', label: 'Wheel Speed', value: 2450, unit: 'rpm' },
+*     { id: 'memory', label: 'Memory', value: 78, unit: '%', status: 'caution' },
+*   ]}
+* />
+* ```
+*/
+var TelemetryStreamCard = memo(function TelemetryStreamCard({ title = "Telemetry", channelCount = 12, frequency = 1, isStreaming = true, metrics = [], loading = false, className = "", compact = false, defaultExpanded = false, onPinChange }) {
+	const { tokens, theme, prefersReducedMotion } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const isBoldVariant = theme === "transparent-bold";
+	const useGlassMode = isBoldVariant || theme === "transparent-minimal";
+	const glassAccentColor = tokens.colors.accent.primary;
+	const glassAccentMuted = `${glassAccentColor}66`;
+	const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({
+		compact,
+		defaultExpanded,
+		onPinChange
+	});
+	const glassContainerStyle = useGlassMode ? {
+		backgroundColor: "rgba(10, 15, 25, 0.35)",
+		backdropFilter: "blur(12px)",
+		WebkitBackdropFilter: "blur(12px)",
+		border: `1px solid ${glassAccentMuted}`,
+		borderTop: isBoldVariant ? `2px solid ${glassAccentColor}` : `1px solid ${glassAccentColor}`
+	} : {};
+	const cardStyle = useMemo(() => ({
+		position: "relative",
+		overflow: "hidden",
+		...useGlassMode ? glassContainerStyle : {
+			backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+			...isTransparentTheme && {
+				backdropFilter: "blur(12px)",
+				WebkitBackdropFilter: "blur(12px)"
+			},
+			...tokens.colors.border.cardStyleDefault ?? { border: `1px solid ${tokens.colors.border.default}` }
+		},
+		borderRadius: tokens.borderRadius.lg,
+		padding: tokens.spacing.md
+	}), [
+		tokens,
+		isTransparentTheme,
+		useGlassMode,
+		glassContainerStyle
+	]);
+	const metricBoxStyle = useMemo(() => ({
+		backgroundColor: tokens.colors.background.elevated,
+		borderRadius: tokens.borderRadius.md,
+		padding: tokens.spacing.sm
+	}), [tokens]);
+	if (loading) return /* @__PURE__ */ jsxs("article", {
+		className: classNames("zendir-telemetry-stream-card", className),
+		style: cardStyle,
+		"aria-busy": "true",
+		"aria-label": "Loading telemetry stream",
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				justifyContent: "space-between",
+				marginBottom: 16
+			},
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { style: {
+				height: 16,
+				width: 80,
+				backgroundColor: tokens.colors.background.elevated,
+				borderRadius: 4,
+				marginBottom: 4
+			} }), /* @__PURE__ */ jsx("div", { style: {
+				height: 12,
+				width: 100,
+				backgroundColor: tokens.colors.background.elevated,
+				borderRadius: 4
+			} })] }), /* @__PURE__ */ jsx("div", { style: {
+				height: 24,
+				width: 70,
+				backgroundColor: tokens.colors.background.elevated,
+				borderRadius: 12
+			} })]
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "grid",
+				gridTemplateColumns: "repeat(2, 1fr)",
+				gap: 12
+			},
+			children: [
+				1,
+				2,
+				3,
+				4
+			].map((i) => /* @__PURE__ */ jsxs("div", {
+				style: metricBoxStyle,
+				children: [/* @__PURE__ */ jsx("div", { style: {
+					height: 10,
+					width: 60,
+					backgroundColor: tokens.colors.background.base,
+					borderRadius: 4,
+					marginBottom: 8
+				} }), /* @__PURE__ */ jsx("div", { style: {
+					height: 20,
+					width: 80,
+					backgroundColor: tokens.colors.background.base,
+					borderRadius: 4
+				} })]
+			}, i))
+		})]
+	});
+	if (compact && !expanded) return /* @__PURE__ */ jsxs("article", {
+		className: classNames("zendir-telemetry-stream-card", "compact", className),
+		...handlers,
+		style: {
+			...cardStyle,
+			padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
+			cursor: "pointer",
+			transition: `all ${transitionDuration} ease-out`
+		},
+		onMouseEnter: (e) => {
+			handlers.onMouseEnter();
+			if (!prefersReducedMotion) {
+				e.currentTarget.style.transform = "scale(1.01)";
+				e.currentTarget.style.boxShadow = `0 4px 12px ${tokens.colors.accent.primary}20`;
+			}
+		},
+		onMouseLeave: (e) => {
+			handlers.onMouseLeave();
+			e.currentTarget.style.transform = "scale(1)";
+			e.currentTarget.style.boxShadow = "";
+		},
+		"aria-label": `${title} (compact)`,
+		children: [useGlassMode && /* @__PURE__ */ jsx("div", { style: {
+			position: "absolute",
+			inset: 0,
+			background: "linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)",
+			pointerEvents: "none",
+			zIndex: 0
+		} }), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				gap: tokens.spacing.md,
+				position: "relative",
+				zIndex: 1
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.sm,
+					flex: 1,
+					minWidth: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", { style: {
+						width: 8,
+						height: 8,
+						borderRadius: "50%",
+						backgroundColor: isStreaming ? tokens.colors.status.normal : tokens.colors.status.off,
+						boxShadow: isStreaming ? `0 0 6px ${tokens.colors.status.normal}` : "none",
+						flexShrink: 0
+					} }),
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							fontWeight: tokens.typography.fontWeight.medium,
+							color: useGlassMode ? glassAccentColor : void 0,
+							textShadow: useGlassMode ? `0 0 16px ${glassAccentMuted}` : void 0
+						},
+						children: title.split(" ")[0]
+					}),
+					useGlassMode && /* @__PURE__ */ jsx("div", { style: {
+						flex: 1,
+						height: isBoldVariant ? "2px" : "1px",
+						minWidth: 20,
+						background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 60%, transparent 100%)`,
+						boxShadow: isBoldVariant ? `0 0 8px ${glassAccentMuted}` : void 0
+					} })
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.sm,
+					flexShrink: 0
+				},
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						style: {
+							color: tokens.colors.text.tertiary,
+							fontSize: tokens.typography.fontSize.xs,
+							backgroundColor: useGlassMode ? `${glassAccentColor}20` : void 0,
+							padding: useGlassMode ? "1px 6px" : void 0,
+							borderRadius: tokens.borderRadius.sm
+						},
+						children: [channelCount, "ch"]
+					}),
+					metrics.slice(0, 2).map((metric) => /* @__PURE__ */ jsxs("span", {
+						style: {
+							fontVariantNumeric: "tabular-nums",
+							fontFamily: tokens.typography.fontFamily.mono,
+							fontSize: tokens.typography.fontSize.xs,
+							color: getMetricColor(metric.status, tokens)
+						},
+						children: [metric.value, metric.unit ? metric.unit : ""]
+					}, metric.id)),
+					isPinned && /* @__PURE__ */ jsx(Icon, {
+						name: "lock",
+						size: 12,
+						color: tokens.colors.accent.primary
+					})
+				]
+			})]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("article", {
+		className: classNames("zendir-telemetry-stream-card", compact ? "expanded" : "", className),
+		...compact ? handlers : {},
+		role: compact ? handlers.role : "article",
+		tabIndex: compact ? handlers.tabIndex : void 0,
+		"aria-expanded": compact ? handlers["aria-expanded"] : void 0,
+		style: {
+			...cardStyle,
+			cursor: compact ? "pointer" : void 0,
+			transition: compact ? `all ${transitionDuration} ease-out` : void 0
+		},
+		"aria-label": `${title} - ${isStreaming ? "Streaming" : "Paused"}`,
+		"aria-live": "polite",
+		children: [
+			useGlassMode && /* @__PURE__ */ jsx("div", { style: {
+				position: "absolute",
+				inset: 0,
+				background: "linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%, rgba(0,0,0,0.1) 100%)",
+				pointerEvents: "none",
+				zIndex: 0
+			} }),
+			/* @__PURE__ */ jsx(CardHeader, {
+				icon: "antenna-receive",
+				title,
+				subtitle: `${channelCount} channels • ${frequency} Hz`,
+				status: isStreaming ? "normal" : "standby",
+				badge: isStreaming ? "Streaming" : "Paused",
+				badgeColor: isStreaming ? tokens.colors.status.normal : tokens.colors.status.standby
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: "repeat(2, 1fr)",
+					gap: 12
+				},
+				children: metrics.map((metric) => /* @__PURE__ */ jsxs("div", {
+					style: metricBoxStyle,
+					role: "group",
+					"aria-label": `${metric.label}: ${metric.value}${metric.unit || ""}`,
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: tokens.typography.fontSize.xxs,
+							fontWeight: tokens.typography.fontWeight.medium,
+							textTransform: "uppercase",
+							letterSpacing: "0.05em",
+							color: tokens.colors.text.tertiary,
+							marginBottom: 4
+						},
+						children: metric.label
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							fontSize: tokens.typography.fontSize.lg,
+							fontWeight: tokens.typography.fontWeight.bold,
+							fontFamily: tokens.typography.fontFamily.mono,
+							fontVariantNumeric: "tabular-nums",
+							color: getMetricColor(metric.status, tokens)
+						},
+						children: [typeof metric.value === "number" ? metric.format ? metric.format(metric.value) : metric.value.toLocaleString() : metric.value, metric.unit && /* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: tokens.typography.fontSize.sm,
+								fontWeight: tokens.typography.fontWeight.normal,
+								marginLeft: 2
+							},
+							children: metric.unit
+						})]
+					})]
+				}, metric.id))
+			}),
+			/* @__PURE__ */ jsx("style", { children: `
         @keyframes pulse {
           0%, 100% { opacity: 1; }
           50% { opacity: 0.5; }
         }
       ` })
-      ]
-    }
-  );
+		]
+	});
 });
-export {
-  TelemetryStreamCard
-};
-//# sourceMappingURL=TelemetryStreamCard.js.map
+//#endregion
+export { TelemetryStreamCard };
+
+//# sourceMappingURL=TelemetryStreamCard.js.map