@zendir/ui 0.5.0 → 0.6.1

package/dist/react/core/data/DataValue.js

@@ -1,578 +1,612 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useMemo } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { AstroIcon } from "../display/AstroIcon.js";
-import { getPropertyConfig, deriveStatus, formatPropertyValue } from "./propertyConfig.js";
-const STATUS_BORDER_COLORS = {
-  off: "#3c3e42",
-  standby: "#285766",
-  normal: "#005a00",
-  caution: "#645600",
-  serious: "#664618",
-  critical: "#661102"
+import { deriveStatus, formatPropertyValue, getPropertyConfig } from "./propertyConfig.js";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/data/DataValue.tsx
+/**
+* @zendir/ui - DataValue Component
+*
+* Enterprise-grade data value display with icon, label, value, and status.
+* The building block for telemetry displays, dashboards, and monitoring UIs.
+*
+* AstroUXDS Compliance:
+* - Status colors per AstroUXDS status system
+* - Dual-coding (color + shape) for accessibility via StatusIndicator
+* - Tabular numbers for alignment
+* - Sentence-case labels
+*
+* Features:
+* - Auto-derive status from value + thresholds
+* - Contextual icons from property presets
+* - Multiple layout variants (stacked, inline, compact)
+* - Theme-aware styling
+*
+* @example
+* ```tsx
+* import { DataValue } from '@zendir/ui';
+*
+* // Simple usage with property preset
+* <DataValue property="temperature" value={72.5} />
+*
+* // Custom configuration
+* <DataValue
+*   label="Battery"
+*   value={85}
+*   unit="%"
+*   icon="battery-full"
+*   thresholds={{ critical: 10, caution: 30 }}
+* />
+*
+* // Inline layout
+* <DataValue property="voltage" value={28.4} variant="inline" />
+* ```
+*/
+var STATUS_BORDER_COLORS = {
+	off: "#3c3e42",
+	standby: "#285766",
+	normal: "#005a00",
+	caution: "#645600",
+	serious: "#664618",
+	critical: "#661102"
 };
-const StatusShape = ({ status, size, color, borderColor, glow = true }) => {
-  const hasBorder = !!borderColor;
-  const strokeWidth = hasBorder ? 1 : 0;
-  const glowFilter = glow && !hasBorder ? `drop-shadow(0 0 3px ${color})` : void 0;
-  const renderShape = () => {
-    switch (status) {
-      case "off":
-        return /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: hasBorder ? 2.5 : 3, fill: color, stroke: borderColor, strokeWidth });
-      case "standby":
-        return /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: color, strokeWidth: "2" });
-      case "normal":
-        return /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "6",
-            cy: "6",
-            r: hasBorder ? 4.5 : 5,
-            fill: color,
-            stroke: borderColor,
-            strokeWidth
-          }
-        );
-      case "caution":
-        return /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: hasBorder ? 1.5 : 1,
-            y: hasBorder ? 1.5 : 1,
-            width: hasBorder ? 9 : 10,
-            height: hasBorder ? 9 : 10,
-            fill: color,
-            stroke: borderColor,
-            strokeWidth
-          }
-        );
-      case "serious":
-        return /* @__PURE__ */ jsx(
-          "polygon",
-          {
-            points: "6,1 11,6 6,11 1,6",
-            fill: color,
-            stroke: borderColor,
-            strokeWidth
-          }
-        );
-      case "critical":
-        return /* @__PURE__ */ jsx(
-          "polygon",
-          {
-            points: "6,11 1,2 11,2",
-            fill: color,
-            stroke: borderColor,
-            strokeWidth
-          }
-        );
-      default:
-        return null;
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      viewBox: "0 0 12 12",
-      width: size,
-      height: size,
-      style: { filter: glowFilter },
-      children: renderShape()
-    }
-  );
+var StatusShape = ({ status, size, color, borderColor, glow = true }) => {
+	const hasBorder = !!borderColor;
+	const strokeWidth = hasBorder ? 1 : 0;
+	const glowFilter = glow && !hasBorder ? `drop-shadow(0 0 3px ${color})` : void 0;
+	const renderShape = () => {
+		switch (status) {
+			case "off": return /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: hasBorder ? 2.5 : 3,
+				fill: color,
+				stroke: borderColor,
+				strokeWidth
+			});
+			case "standby": return /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "3.5",
+				fill: "none",
+				stroke: color,
+				strokeWidth: "2"
+			});
+			case "normal": return /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: hasBorder ? 4.5 : 5,
+				fill: color,
+				stroke: borderColor,
+				strokeWidth
+			});
+			case "caution": return /* @__PURE__ */ jsx("rect", {
+				x: hasBorder ? 1.5 : 1,
+				y: hasBorder ? 1.5 : 1,
+				width: hasBorder ? 9 : 10,
+				height: hasBorder ? 9 : 10,
+				fill: color,
+				stroke: borderColor,
+				strokeWidth
+			});
+			case "serious": return /* @__PURE__ */ jsx("polygon", {
+				points: "6,1 11,6 6,11 1,6",
+				fill: color,
+				stroke: borderColor,
+				strokeWidth
+			});
+			case "critical": return /* @__PURE__ */ jsx("polygon", {
+				points: "6,11 1,2 11,2",
+				fill: color,
+				stroke: borderColor,
+				strokeWidth
+			});
+			default: return null;
+		}
+	};
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		style: { filter: glowFilter },
+		children: renderShape()
+	});
 };
-const IconWithBadge = memo(function IconWithBadge2({
-  icon,
-  iconSize,
-  iconColor,
-  showBadge,
-  status,
-  statusColor,
-  isLightTheme = false
-}) {
-  const badgeSizeRatio = 0.3;
-  const badgeSize = Math.max(7, Math.min(14, Math.round(iconSize * badgeSizeRatio)));
-  const badgeOffsetX = -2;
-  const badgeOffsetY = -2;
-  const borderColor = isLightTheme ? STATUS_BORDER_COLORS[status] : void 0;
-  const containerSize = iconSize;
-  return /* @__PURE__ */ jsxs("div", { style: {
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    width: containerSize,
-    height: containerSize
-  }, children: [
-    /* @__PURE__ */ jsx(AstroIcon, { name: icon, size: iconSize, color: iconColor }),
-    showBadge && /* @__PURE__ */ jsx("span", { style: {
-      position: "absolute",
-      top: badgeOffsetY,
-      left: badgeOffsetX,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }, children: /* @__PURE__ */ jsx(
-      StatusShape,
-      {
-        status,
-        size: badgeSize,
-        color: statusColor,
-        borderColor,
-        glow: !isLightTheme
-      }
-    ) })
-  ] });
+var IconWithBadge = memo(function IconWithBadge({ icon, iconSize, iconColor, showBadge, status, statusColor, isLightTheme = false }) {
+	const badgeSize = Math.max(7, Math.min(14, Math.round(iconSize * .3)));
+	const badgeOffsetX = -2;
+	const badgeOffsetY = -2;
+	const borderColor = isLightTheme ? STATUS_BORDER_COLORS[status] : void 0;
+	const containerSize = iconSize;
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "relative",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			width: containerSize,
+			height: containerSize
+		},
+		children: [/* @__PURE__ */ jsx(AstroIcon, {
+			name: icon,
+			size: iconSize,
+			color: iconColor
+		}), showBadge && /* @__PURE__ */ jsx("span", {
+			style: {
+				position: "absolute",
+				top: badgeOffsetY,
+				left: badgeOffsetX,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center"
+			},
+			children: /* @__PURE__ */ jsx(StatusShape, {
+				status,
+				size: badgeSize,
+				color: statusColor,
+				borderColor,
+				glow: !isLightTheme
+			})
+		})]
+	});
 });
-const DataValue = memo(function DataValue2({
-  property,
-  label: labelProp,
-  value,
-  unit: unitProp,
-  icon: iconProp,
-  showIcon = true,
-  thresholds: thresholdsProp,
-  status: statusProp,
-  showStatus = true,
-  precision: precisionProp,
-  variant = "stacked",
-  size = "md",
-  color: colorProp,
-  className = "",
-  style,
-  onClick,
-  tooltip
-}) {
-  const { tokens, mode } = useTheme();
-  const isLightTheme = mode === "light";
-  const config = useMemo(() => {
-    const preset = property ? getPropertyConfig(property) : {
-      label: labelProp || "Value",
-      icon: iconProp || "info",
-      unit: unitProp,
-      precision: precisionProp,
-      thresholds: thresholdsProp
-    };
-    return {
-      ...preset,
-      ...labelProp !== void 0 && { label: labelProp },
-      ...iconProp !== void 0 && { icon: iconProp },
-      ...unitProp !== void 0 && { unit: unitProp },
-      ...precisionProp !== void 0 && { precision: precisionProp },
-      ...thresholdsProp !== void 0 && { thresholds: thresholdsProp }
-    };
-  }, [property, labelProp, iconProp, unitProp, precisionProp, thresholdsProp]);
-  const status = useMemo(() => {
-    if (statusProp) return statusProp;
-    if (typeof value === "number") {
-      return deriveStatus(value, config.thresholds);
-    }
-    return "normal";
-  }, [statusProp, value, config.thresholds]);
-  const formattedValue = useMemo(() => {
-    if (value === void 0 || value === null) return "--";
-    if (typeof value === "string") return value;
-    return formatPropertyValue(value, config);
-  }, [value, config]);
-  const statusColor = tokens.colors.status[status] || tokens.colors.status.off;
-  const valueColor = colorProp || (showStatus && status !== "normal" ? statusColor : tokens.colors.text.primary);
-  const sizeConfig = {
-    sm: {
-      iconSize: 16,
-      labelSize: tokens.typography.fontSize.xs,
-      // 10px - matches DataCell
-      valueSize: tokens.typography.fontSize.sm,
-      // 12px - matches DataCell
-      lineHeight: 1.4,
-      gap: 6,
-      // Increased from 4px to 6px for better icon separation with larger icons
-      rowGap: 2
-      // 2px between label and value
-    },
-    md: {
-      iconSize: 20,
-      labelSize: tokens.typography.fontSize.xs,
-      // 10px
-      valueSize: tokens.typography.fontSize.base,
-      // 14px
-      lineHeight: 1.4,
-      gap: 10,
-      // Increased from 8px to 10px
-      rowGap: 2
-      // 2px between label and value
-    },
-    lg: {
-      iconSize: 24,
-      labelSize: tokens.typography.fontSize.sm,
-      // 12px
-      valueSize: tokens.typography.fontSize.md,
-      // 14px
-      lineHeight: 1.4,
-      gap: 14,
-      // Increased from 12px to 14px
-      rowGap: 4
-      // 4px between label and value
-    }
-  }[size];
-  const renderContent = () => {
-    const hasStatus = showStatus && status !== "normal" && status !== "off";
-    switch (variant) {
-      case "inline": {
-        return /* @__PURE__ */ jsxs("div", { style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: sizeConfig.gap * 2,
-          minHeight: sizeConfig.iconSize
-          // Ensure consistent row height
-        }, children: [
-          /* @__PURE__ */ jsxs("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            gap: sizeConfig.gap
-          }, children: [
-            showIcon && config.icon && /* @__PURE__ */ jsx(
-              IconWithBadge,
-              {
-                icon: config.icon,
-                iconSize: sizeConfig.iconSize,
-                iconColor: hasStatus ? statusColor : tokens.colors.text.tertiary,
-                showBadge: hasStatus,
-                status,
-                statusColor,
-                isLightTheme
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { style: {
-              fontSize: sizeConfig.labelSize,
-              lineHeight: sizeConfig.lineHeight,
-              color: tokens.colors.text.secondary,
-              fontWeight: 500,
-              fontFamily: tokens.typography.fontFamily.primary
-            }, children: config.label })
-          ] }),
-          /* @__PURE__ */ jsx("span", { style: {
-            fontSize: sizeConfig.valueSize,
-            lineHeight: sizeConfig.lineHeight,
-            fontWeight: 500,
-            // Match SpacecraftCard DataCell
-            fontFamily: tokens.typography.fontFamily.mono,
-            fontVariantNumeric: "tabular-nums",
-            color: valueColor
-          }, children: formattedValue })
-        ] });
-      }
-      case "compact": {
-        return /* @__PURE__ */ jsxs("div", { style: {
-          display: "flex",
-          alignItems: "center",
-          gap: sizeConfig.gap,
-          minHeight: sizeConfig.iconSize
-        }, children: [
-          showIcon && config.icon && /* @__PURE__ */ jsx(
-            IconWithBadge,
-            {
-              icon: config.icon,
-              iconSize: sizeConfig.iconSize,
-              iconColor: hasStatus ? statusColor : tokens.colors.text.tertiary,
-              showBadge: hasStatus,
-              status,
-              statusColor,
-              isLightTheme
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { style: {
-            fontSize: sizeConfig.valueSize,
-            lineHeight: sizeConfig.lineHeight,
-            fontWeight: 500,
-            // Match SpacecraftCard DataCell
-            fontFamily: tokens.typography.fontFamily.mono,
-            fontVariantNumeric: "tabular-nums",
-            color: valueColor
-          }, children: formattedValue })
-        ] });
-      }
-      case "minimal":
-        return /* @__PURE__ */ jsx("span", { style: {
-          fontSize: sizeConfig.valueSize,
-          lineHeight: sizeConfig.lineHeight,
-          fontWeight: 500,
-          // Match SpacecraftCard DataCell
-          fontFamily: tokens.typography.fontFamily.mono,
-          fontVariantNumeric: "tabular-nums",
-          color: valueColor
-        }, children: formattedValue });
-      case "card": {
-        const iconMultiplier = 0.7;
-        const iconToTextGap = 4;
-        const baseSize = { sm: 26, md: 32, lg: 40 }[size];
-        const iconSize = Math.round(baseSize * iconMultiplier);
-        return /* @__PURE__ */ jsxs("div", { style: {
-          display: "flex",
-          alignItems: "center",
-          gap: iconToTextGap
-        }, children: [
-          showIcon && config.icon && /* @__PURE__ */ jsx(
-            IconWithBadge,
-            {
-              icon: config.icon,
-              iconSize,
-              iconColor: hasStatus ? statusColor : tokens.colors.text.tertiary,
-              showBadge: hasStatus,
-              status,
-              statusColor,
-              isLightTheme
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: {
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
-            // Distribute label/value to edges
-            gap: sizeConfig.rowGap,
-            minWidth: 0
-          }, children: [
-            /* @__PURE__ */ jsx("span", { style: {
-              fontSize: sizeConfig.labelSize,
-              lineHeight: sizeConfig.lineHeight,
-              color: tokens.colors.text.secondary,
-              fontWeight: 500,
-              fontFamily: tokens.typography.fontFamily.primary
-            }, children: config.label }),
-            /* @__PURE__ */ jsx("span", { style: {
-              fontSize: sizeConfig.valueSize,
-              lineHeight: sizeConfig.lineHeight,
-              fontWeight: 500,
-              // Match SpacecraftCard DataCell
-              fontFamily: tokens.typography.fontFamily.mono,
-              fontVariantNumeric: "tabular-nums",
-              color: valueColor
-            }, children: formattedValue })
-          ] })
-        ] });
-      }
-      case "banner": {
-        const bannerIconSize = { sm: 18, md: 22, lg: 28 }[size];
-        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: sizeConfig.rowGap, minWidth: 0, width: "100%" }, children: [
-          /* @__PURE__ */ jsx("span", { style: {
-            fontSize: sizeConfig.labelSize,
-            lineHeight: sizeConfig.lineHeight,
-            color: tokens.colors.text.secondary,
-            fontWeight: 500,
-            fontFamily: tokens.typography.fontFamily.primary,
-            textTransform: "uppercase",
-            letterSpacing: "0.5px"
-          }, children: config.label }),
-          /* @__PURE__ */ jsxs("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "flex-start",
-            width: "100%",
-            gap: 6,
-            minWidth: 0
-          }, children: [
-            showIcon && config.icon && /* @__PURE__ */ jsx(
-              IconWithBadge,
-              {
-                icon: config.icon,
-                iconSize: bannerIconSize,
-                iconColor: hasStatus ? statusColor : tokens.colors.text.tertiary,
-                showBadge: hasStatus,
-                status,
-                statusColor,
-                isLightTheme
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { style: {
-              fontSize: sizeConfig.valueSize,
-              lineHeight: sizeConfig.lineHeight,
-              fontWeight: 600,
-              fontFamily: tokens.typography.fontFamily.mono,
-              fontVariantNumeric: "tabular-nums",
-              color: valueColor,
-              textAlign: "left"
-            }, children: formattedValue })
-          ] })
-        ] });
-      }
-      case "stat": {
-        const statSize = {
-          sm: { icon: 13, value: 13, label: 9.5 },
-          md: { icon: 15, value: 14, label: 10 },
-          lg: { icon: 18, value: 16, label: 11 }
-        }[size];
-        const statColor = colorProp || statusColor;
-        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 2 }, children: [
-          /* @__PURE__ */ jsxs("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 6,
-            fontFamily: tokens.typography.fontFamily.mono,
-            fontSize: statSize.value,
-            fontWeight: 600,
-            color: statColor,
-            fontVariantNumeric: "tabular-nums",
-            letterSpacing: "0.02em",
-            lineHeight: 1.1
-          }, children: [
-            showIcon && config.icon && /* @__PURE__ */ jsx(AstroIcon, { name: config.icon, size: statSize.icon, color: statColor }),
-            /* @__PURE__ */ jsx("span", { children: formattedValue })
-          ] }),
-          /* @__PURE__ */ jsx("span", { style: {
-            fontFamily: tokens.typography.fontFamily.mono,
-            fontSize: statSize.label,
-            letterSpacing: "0.06em",
-            textTransform: "uppercase",
-            color: tokens.colors.text.tertiary,
-            lineHeight: 1.1
-          }, children: config.label })
-        ] });
-      }
-      case "stacked":
-      default: {
-        const iconMultiplier = 0.7;
-        const iconToTextGap = 4;
-        const baseSize = { sm: 26, md: 32, lg: 40 }[size];
-        const iconSize = Math.round(baseSize * iconMultiplier);
-        return /* @__PURE__ */ jsxs("div", { style: {
-          display: "flex",
-          alignItems: "center",
-          gap: iconToTextGap
-        }, children: [
-          showIcon && config.icon && /* @__PURE__ */ jsx(
-            IconWithBadge,
-            {
-              icon: config.icon,
-              iconSize,
-              iconColor: hasStatus ? statusColor : tokens.colors.text.tertiary,
-              showBadge: hasStatus,
-              status,
-              statusColor,
-              isLightTheme
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: {
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
-            // Distribute label/value to edges
-            gap: sizeConfig.rowGap,
-            minWidth: 0
-          }, children: [
-            /* @__PURE__ */ jsx("span", { style: {
-              fontSize: sizeConfig.labelSize,
-              lineHeight: sizeConfig.lineHeight,
-              color: tokens.colors.text.secondary,
-              fontWeight: 500,
-              fontFamily: tokens.typography.fontFamily.primary
-            }, children: config.label }),
-            /* @__PURE__ */ jsx("span", { style: {
-              fontSize: sizeConfig.valueSize,
-              lineHeight: sizeConfig.lineHeight,
-              fontWeight: 500,
-              // Match SpacecraftCard DataCell
-              fontFamily: tokens.typography.fontFamily.mono,
-              fontVariantNumeric: "tabular-nums",
-              color: valueColor
-            }, children: formattedValue })
-          ] })
-        ] });
-      }
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `zendir-data-value zendir-data-value--${variant} zendir-data-value--${size} ${className}`,
-      style: {
-        cursor: onClick ? "pointer" : "default",
-        ...variant === "banner" ? { flex: 1, minWidth: 0 } : {},
-        ...style
-      },
-      onClick,
-      title: tooltip || config.description,
-      role: onClick ? "button" : void 0,
-      tabIndex: onClick ? 0 : void 0,
-      onKeyDown: onClick ? (e) => e.key === "Enter" && onClick() : void 0,
-      children: renderContent()
-    }
-  );
+var DataValue = memo(function DataValue({ property, label: labelProp, value, unit: unitProp, icon: iconProp, showIcon = true, thresholds: thresholdsProp, status: statusProp, showStatus = true, precision: precisionProp, variant = "stacked", size = "md", color: colorProp, className = "", style, onClick, tooltip }) {
+	const { tokens, mode } = useTheme();
+	const isLightTheme = mode === "light";
+	const config = useMemo(() => {
+		return {
+			...property ? getPropertyConfig(property) : {
+				label: labelProp || "Value",
+				icon: iconProp || "info",
+				unit: unitProp,
+				precision: precisionProp,
+				thresholds: thresholdsProp
+			},
+			...labelProp !== void 0 && { label: labelProp },
+			...iconProp !== void 0 && { icon: iconProp },
+			...unitProp !== void 0 && { unit: unitProp },
+			...precisionProp !== void 0 && { precision: precisionProp },
+			...thresholdsProp !== void 0 && { thresholds: thresholdsProp }
+		};
+	}, [
+		property,
+		labelProp,
+		iconProp,
+		unitProp,
+		precisionProp,
+		thresholdsProp
+	]);
+	const status = useMemo(() => {
+		if (statusProp) return statusProp;
+		if (typeof value === "number") return deriveStatus(value, config.thresholds);
+		return "normal";
+	}, [
+		statusProp,
+		value,
+		config.thresholds
+	]);
+	const formattedValue = useMemo(() => {
+		if (value === void 0 || value === null) return "--";
+		if (typeof value === "string") return value;
+		return formatPropertyValue(value, config);
+	}, [value, config]);
+	const statusColor = tokens.colors.status[status] || tokens.colors.status.off;
+	const valueColor = colorProp || (showStatus && status !== "normal" ? statusColor : tokens.colors.text.primary);
+	const sizeConfig = {
+		sm: {
+			iconSize: 16,
+			labelSize: tokens.typography.fontSize.xs,
+			valueSize: tokens.typography.fontSize.sm,
+			lineHeight: 1.4,
+			gap: 6,
+			rowGap: 2
+		},
+		md: {
+			iconSize: 20,
+			labelSize: tokens.typography.fontSize.xs,
+			valueSize: tokens.typography.fontSize.base,
+			lineHeight: 1.4,
+			gap: 10,
+			rowGap: 2
+		},
+		lg: {
+			iconSize: 24,
+			labelSize: tokens.typography.fontSize.sm,
+			valueSize: tokens.typography.fontSize.md,
+			lineHeight: 1.4,
+			gap: 14,
+			rowGap: 4
+		}
+	}[size];
+	const renderContent = () => {
+		const hasStatus = showStatus && status !== "normal" && status !== "off";
+		switch (variant) {
+			case "inline": return /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					gap: sizeConfig.gap * 2,
+					minHeight: sizeConfig.iconSize
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: sizeConfig.gap
+					},
+					children: [showIcon && config.icon && /* @__PURE__ */ jsx(IconWithBadge, {
+						icon: config.icon,
+						iconSize: sizeConfig.iconSize,
+						iconColor: hasStatus ? statusColor : tokens.colors.text.tertiary,
+						showBadge: hasStatus,
+						status,
+						statusColor,
+						isLightTheme
+					}), /* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: sizeConfig.labelSize,
+							lineHeight: sizeConfig.lineHeight,
+							color: tokens.colors.text.secondary,
+							fontWeight: 500,
+							fontFamily: tokens.typography.fontFamily.primary
+						},
+						children: config.label
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: sizeConfig.valueSize,
+						lineHeight: sizeConfig.lineHeight,
+						fontWeight: 500,
+						fontFamily: tokens.typography.fontFamily.mono,
+						fontVariantNumeric: "tabular-nums",
+						color: valueColor
+					},
+					children: formattedValue
+				})]
+			});
+			case "compact": return /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: sizeConfig.gap,
+					minHeight: sizeConfig.iconSize
+				},
+				children: [showIcon && config.icon && /* @__PURE__ */ jsx(IconWithBadge, {
+					icon: config.icon,
+					iconSize: sizeConfig.iconSize,
+					iconColor: hasStatus ? statusColor : tokens.colors.text.tertiary,
+					showBadge: hasStatus,
+					status,
+					statusColor,
+					isLightTheme
+				}), /* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: sizeConfig.valueSize,
+						lineHeight: sizeConfig.lineHeight,
+						fontWeight: 500,
+						fontFamily: tokens.typography.fontFamily.mono,
+						fontVariantNumeric: "tabular-nums",
+						color: valueColor
+					},
+					children: formattedValue
+				})]
+			});
+			case "minimal": return /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: sizeConfig.valueSize,
+					lineHeight: sizeConfig.lineHeight,
+					fontWeight: 500,
+					fontFamily: tokens.typography.fontFamily.mono,
+					fontVariantNumeric: "tabular-nums",
+					color: valueColor
+				},
+				children: formattedValue
+			});
+			case "card": {
+				const iconMultiplier = .7;
+				const iconToTextGap = 4;
+				const baseSize = {
+					sm: 26,
+					md: 32,
+					lg: 40
+				}[size];
+				const iconSize = Math.round(baseSize * iconMultiplier);
+				return /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: iconToTextGap
+					},
+					children: [showIcon && config.icon && /* @__PURE__ */ jsx(IconWithBadge, {
+						icon: config.icon,
+						iconSize,
+						iconColor: hasStatus ? statusColor : tokens.colors.text.tertiary,
+						showBadge: hasStatus,
+						status,
+						statusColor,
+						isLightTheme
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							flexDirection: "column",
+							justifyContent: "space-between",
+							gap: sizeConfig.rowGap,
+							minWidth: 0
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: sizeConfig.labelSize,
+								lineHeight: sizeConfig.lineHeight,
+								color: tokens.colors.text.secondary,
+								fontWeight: 500,
+								fontFamily: tokens.typography.fontFamily.primary
+							},
+							children: config.label
+						}), /* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: sizeConfig.valueSize,
+								lineHeight: sizeConfig.lineHeight,
+								fontWeight: 500,
+								fontFamily: tokens.typography.fontFamily.mono,
+								fontVariantNumeric: "tabular-nums",
+								color: valueColor
+							},
+							children: formattedValue
+						})]
+					})]
+				});
+			}
+			case "banner": {
+				const bannerIconSize = {
+					sm: 18,
+					md: 22,
+					lg: 28
+				}[size];
+				return /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: sizeConfig.rowGap,
+						minWidth: 0,
+						width: "100%"
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: sizeConfig.labelSize,
+							lineHeight: sizeConfig.lineHeight,
+							color: tokens.colors.text.secondary,
+							fontWeight: 500,
+							fontFamily: tokens.typography.fontFamily.primary,
+							textTransform: "uppercase",
+							letterSpacing: "0.5px"
+						},
+						children: config.label
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "flex-start",
+							width: "100%",
+							gap: 6,
+							minWidth: 0
+						},
+						children: [showIcon && config.icon && /* @__PURE__ */ jsx(IconWithBadge, {
+							icon: config.icon,
+							iconSize: bannerIconSize,
+							iconColor: hasStatus ? statusColor : tokens.colors.text.tertiary,
+							showBadge: hasStatus,
+							status,
+							statusColor,
+							isLightTheme
+						}), /* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: sizeConfig.valueSize,
+								lineHeight: sizeConfig.lineHeight,
+								fontWeight: 600,
+								fontFamily: tokens.typography.fontFamily.mono,
+								fontVariantNumeric: "tabular-nums",
+								color: valueColor,
+								textAlign: "left"
+							},
+							children: formattedValue
+						})]
+					})]
+				});
+			}
+			case "stat": {
+				const statSize = {
+					sm: {
+						icon: 13,
+						value: 13,
+						label: 9.5
+					},
+					md: {
+						icon: 15,
+						value: 14,
+						label: 10
+					},
+					lg: {
+						icon: 18,
+						value: 16,
+						label: 11
+					}
+				}[size];
+				const statColor = colorProp || statusColor;
+				return /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "flex-start",
+						gap: 2
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 6,
+							fontFamily: tokens.typography.fontFamily.mono,
+							fontSize: statSize.value,
+							fontWeight: 600,
+							color: statColor,
+							fontVariantNumeric: "tabular-nums",
+							letterSpacing: "0.02em",
+							lineHeight: 1.1
+						},
+						children: [showIcon && config.icon && /* @__PURE__ */ jsx(AstroIcon, {
+							name: config.icon,
+							size: statSize.icon,
+							color: statColor
+						}), /* @__PURE__ */ jsx("span", { children: formattedValue })]
+					}), /* @__PURE__ */ jsx("span", {
+						style: {
+							fontFamily: tokens.typography.fontFamily.mono,
+							fontSize: statSize.label,
+							letterSpacing: "0.06em",
+							textTransform: "uppercase",
+							color: tokens.colors.text.tertiary,
+							lineHeight: 1.1
+						},
+						children: config.label
+					})]
+				});
+			}
+			default: {
+				const iconMultiplier = .7;
+				const iconToTextGap = 4;
+				const baseSize = {
+					sm: 26,
+					md: 32,
+					lg: 40
+				}[size];
+				const iconSize = Math.round(baseSize * iconMultiplier);
+				return /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: iconToTextGap
+					},
+					children: [showIcon && config.icon && /* @__PURE__ */ jsx(IconWithBadge, {
+						icon: config.icon,
+						iconSize,
+						iconColor: hasStatus ? statusColor : tokens.colors.text.tertiary,
+						showBadge: hasStatus,
+						status,
+						statusColor,
+						isLightTheme
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							flexDirection: "column",
+							justifyContent: "space-between",
+							gap: sizeConfig.rowGap,
+							minWidth: 0
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: sizeConfig.labelSize,
+								lineHeight: sizeConfig.lineHeight,
+								color: tokens.colors.text.secondary,
+								fontWeight: 500,
+								fontFamily: tokens.typography.fontFamily.primary
+							},
+							children: config.label
+						}), /* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: sizeConfig.valueSize,
+								lineHeight: sizeConfig.lineHeight,
+								fontWeight: 500,
+								fontFamily: tokens.typography.fontFamily.mono,
+								fontVariantNumeric: "tabular-nums",
+								color: valueColor
+							},
+							children: formattedValue
+						})]
+					})]
+				});
+			}
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: `zendir-data-value zendir-data-value--${variant} zendir-data-value--${size} ${className}`,
+		style: {
+			cursor: onClick ? "pointer" : "default",
+			...variant === "banner" ? {
+				flex: 1,
+				minWidth: 0
+			} : {},
+			...style
+		},
+		onClick,
+		title: tooltip || config.description,
+		role: onClick ? "button" : void 0,
+		tabIndex: onClick ? 0 : void 0,
+		onKeyDown: onClick ? (e) => e.key === "Enter" && onClick() : void 0,
+		children: renderContent()
+	});
 });
-const DataValueGroup = memo(function DataValueGroup2({
-  title,
-  icon,
-  direction = "grid",
-  columns = 2,
-  gap = "md",
-  children,
-  className = "",
-  style
-}) {
-  const { tokens } = useTheme();
-  const gapSize = {
-    sm: 8,
-    // 2 × 4px
-    md: 16,
-    // 4 × 4px
-    lg: 24
-    // 6 × 4px
-  }[gap];
-  const layoutStyles = {
-    row: {
-      display: "flex",
-      flexDirection: "row",
-      flexWrap: "wrap",
-      gap: gapSize,
-      alignItems: "flex-start"
-    },
-    column: {
-      display: "flex",
-      flexDirection: "column",
-      gap: gapSize
-    },
-    grid: {
-      display: "grid",
-      gridTemplateColumns: `repeat(${columns}, 1fr)`,
-      gap: gapSize,
-      alignItems: "start"
-    }
-  };
-  const layoutStyle = layoutStyles[direction];
-  return /* @__PURE__ */ jsxs("div", { className: `zendir-data-value-group ${className}`, style, children: [
-    title && /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      gap: 6,
-      // 6px gap for tight header
-      marginBottom: 12,
-      // 3 × 4px
-      paddingBottom: 8,
-      // 2 × 4px
-      borderBottom: `1px solid ${tokens.colors.border.muted}`
-    }, children: [
-      icon && /* @__PURE__ */ jsx(
-        AstroIcon,
-        {
-          name: icon,
-          size: 14,
-          color: tokens.colors.text.tertiary,
-          style: { flexShrink: 0 }
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { style: {
-        fontSize: "12px",
-        fontWeight: 500,
-        color: tokens.colors.text.secondary,
-        textTransform: "uppercase",
-        letterSpacing: "0.5px"
-      }, children: title })
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: layoutStyle, children })
-  ] });
+var DataValueGroup = memo(function DataValueGroup({ title, icon, direction = "grid", columns = 2, gap = "md", children, className = "", style }) {
+	const { tokens } = useTheme();
+	const gapSize = {
+		sm: 8,
+		md: 16,
+		lg: 24
+	}[gap];
+	const layoutStyle = {
+		row: {
+			display: "flex",
+			flexDirection: "row",
+			flexWrap: "wrap",
+			gap: gapSize,
+			alignItems: "flex-start"
+		},
+		column: {
+			display: "flex",
+			flexDirection: "column",
+			gap: gapSize
+		},
+		grid: {
+			display: "grid",
+			gridTemplateColumns: `repeat(${columns}, 1fr)`,
+			gap: gapSize,
+			alignItems: "start"
+		}
+	}[direction];
+	return /* @__PURE__ */ jsxs("div", {
+		className: `zendir-data-value-group ${className}`,
+		style,
+		children: [title && /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 6,
+				marginBottom: 12,
+				paddingBottom: 8,
+				borderBottom: `1px solid ${tokens.colors.border.muted}`
+			},
+			children: [icon && /* @__PURE__ */ jsx(AstroIcon, {
+				name: icon,
+				size: 14,
+				color: tokens.colors.text.tertiary,
+				style: { flexShrink: 0 }
+			}), /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: "12px",
+					fontWeight: 500,
+					color: tokens.colors.text.secondary,
+					textTransform: "uppercase",
+					letterSpacing: "0.5px"
+				},
+				children: title
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			style: layoutStyle,
+			children
+		})]
+	});
 });
-export {
-  DataValue,
-  DataValueGroup
-};
-//# sourceMappingURL=DataValue.js.map
+//#endregion
+export { DataValue, DataValue as default, DataValueGroup };
+
+//# sourceMappingURL=DataValue.js.map