@zendir/ui 0.1.0

package/dist/react/core/DataValue.js

@@ -0,0 +1,545 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { AstroIcon } from "./AstroIcon.js";
+import { getPropertyConfig, deriveStatus, formatPropertyValue } from "./propertyConfig.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const 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()
+    }
+  );
+};
+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
+      }
+    ) })
+  ] });
+});
+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 "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()
+    }
+  );
+});
+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 })
+  ] });
+});
+export {
+  DataValue,
+  DataValueGroup
+};
+//# sourceMappingURL=DataValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataValue.js","sources":["../../../src/react/core/DataValue.tsx"],"sourcesContent":["/**\n * @zendir/ui - DataValue Component\n * \n * Enterprise-grade data value display with icon, label, value, and status.\n * The building block for telemetry displays, dashboards, and monitoring UIs.\n * \n * AstroUXDS Compliance:\n * - Status colors per AstroUXDS status system\n * - Dual-coding (color + shape) for accessibility via StatusIndicator\n * - Tabular numbers for alignment\n * - Sentence-case labels\n * \n * Features:\n * - Auto-derive status from value + thresholds\n * - Contextual icons from property presets\n * - Multiple layout variants (stacked, inline, compact)\n * - Theme-aware styling\n * \n * @example\n * ```tsx\n * import { DataValue } from '@zendir/ui';\n * \n * // Simple usage with property preset\n * <DataValue property=\"temperature\" value={72.5} />\n * \n * // Custom configuration\n * <DataValue \n *   label=\"Battery\"\n *   value={85}\n *   unit=\"%\"\n *   icon=\"battery-full\"\n *   thresholds={{ critical: 10, caution: 30 }}\n * />\n * \n * // Inline layout\n * <DataValue property=\"voltage\" value={28.4} variant=\"inline\" />\n * ```\n */\n\nimport React, { memo, useMemo } from 'react';\nimport { useTheme } from '../theme';\nimport { AstroIcon, type AstroIconName } from './AstroIcon';\nimport { \n  getPropertyConfig, \n  deriveStatus, \n  formatPropertyValue,\n  type PropertyKey,\n  type StatusThresholds,\n  type PropertyConfig,\n} from './propertyConfig';\nimport type { StatusLevel } from '../utils';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type DataValueVariant = 'stacked' | 'inline' | 'compact' | 'minimal' | 'card' | 'banner';\nexport type DataValueSize = 'sm' | 'md' | 'lg';\n\nexport interface DataValueProps {\n  /** Property key for auto-configuration (e.g., 'temperature', 'battery') */\n  property?: PropertyKey;\n  /** Display label (overrides property preset) */\n  label?: string;\n  /** Current value */\n  value: number | string | undefined | null;\n  /** Unit of measurement (overrides property preset) */\n  unit?: string;\n  /** Icon name (overrides property preset) */\n  icon?: AstroIconName;\n  /** Show icon */\n  showIcon?: boolean;\n  /** Status thresholds for auto-derivation (overrides property preset) */\n  thresholds?: StatusThresholds;\n  /** Override status (bypasses auto-derivation) */\n  status?: StatusLevel;\n  /** Show status indicator */\n  showStatus?: boolean;\n  /** Precision for number formatting (overrides property preset) */\n  precision?: number;\n  /** Layout variant */\n  variant?: DataValueVariant;\n  /** Size */\n  size?: DataValueSize;\n  /** Custom value color (overrides status color) */\n  color?: string;\n  /** Additional CSS class */\n  className?: string;\n  /** Custom inline styles */\n  style?: React.CSSProperties;\n  /** Click handler */\n  onClick?: () => void;\n  /** Tooltip text */\n  tooltip?: string;\n}\n\n// =============================================================================\n// Astro UX Status Border Colors - Required for light theme WCAG compliance\n// https://www.astrouxds.com/patterns/status-system/\n// =============================================================================\n\nconst STATUS_BORDER_COLORS: Record<StatusLevel, string> = {\n  off: '#3c3e42',\n  standby: '#285766',\n  normal: '#005a00',\n  caution: '#645600',\n  serious: '#664618',\n  critical: '#661102',\n};\n\n// =============================================================================\n// Status Shape SVG - Matches MonitoringIcon exactly\n// - Glow effect in dark mode for visibility\n// - Border in light mode for WCAG AA compliance\n// =============================================================================\n\ninterface StatusShapeProps {\n  status: StatusLevel;\n  size: number;\n  color: string;\n  borderColor?: string;\n  glow?: boolean;\n}\n\nconst StatusShape = ({ status, size, color, borderColor, glow = true }: StatusShapeProps) => {\n  const hasBorder = !!borderColor;\n  const strokeWidth = hasBorder ? 1 : 0;\n  const glowFilter = glow && !hasBorder ? `drop-shadow(0 0 3px ${color})` : undefined;\n  \n  const renderShape = () => {\n    switch (status) {\n      case 'off':\n        return <circle cx=\"6\" cy=\"6\" r={hasBorder ? 2.5 : 3} fill={color} stroke={borderColor} strokeWidth={strokeWidth} />;\n      case 'standby':\n        return <circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={color} strokeWidth=\"2\" />;\n      case 'normal':\n        return (\n          <circle\n            cx=\"6\"\n            cy=\"6\"\n            r={hasBorder ? 4.5 : 5}\n            fill={color}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        );\n      case 'caution':\n        return (\n          <rect\n            x={hasBorder ? 1.5 : 1}\n            y={hasBorder ? 1.5 : 1}\n            width={hasBorder ? 9 : 10}\n            height={hasBorder ? 9 : 10}\n            fill={color}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        );\n      case 'serious':\n        return (\n          <polygon\n            points=\"6,1 11,6 6,11 1,6\"\n            fill={color}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        );\n      case 'critical':\n        return (\n          <polygon\n            points=\"6,11 1,2 11,2\"\n            fill={color}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        );\n      default:\n        return null;\n    }\n  };\n  \n  return (\n    <svg \n      viewBox=\"0 0 12 12\" \n      width={size} \n      height={size}\n      style={{ filter: glowFilter }}\n    >\n      {renderShape()}\n    </svg>\n  );\n};\n\n// =============================================================================\n// Icon with Status Badge - Enterprise-grade alignment\n// \n// Design System Principles (Apple HIG / Google Material / AstroUXDS):\n// - 4px-based spacing grid for visual harmony\n// - Explicit container sizing prevents layout shift\n// - Status badge positioned at corner, not extending beyond container bounds\n// - Proportional badge sizing: ~35% of icon size for optimal visibility\n// =============================================================================\n\ninterface IconWithBadgeProps {\n  icon: AstroIconName;\n  iconSize: number;\n  iconColor: string;\n  showBadge: boolean;\n  status: StatusLevel;\n  statusColor: string;\n  isLightTheme?: boolean;\n}\n\nconst IconWithBadge = memo(function IconWithBadge({ \n  icon, iconSize, iconColor, showBadge, status, statusColor, isLightTheme = false \n}: IconWithBadgeProps) {\n  // ═══════════════════════════════════════════════════════════════════════════\n  // STATUS BADGE CONTROLS\n  // ═══════════════════════════════════════════════════════════════════════════\n  // BADGE SIZE: Percentage of icon size (0.25 = 25%)\n  const badgeSizeRatio = 0.30;\n  const badgeSize = Math.max(7, Math.min(14, Math.round(iconSize * badgeSizeRatio)));\n  \n  // BADGE POSITION: Offset from top-left corner (negative = away from icon)\n  const badgeOffsetX = -2; // px (negative = left, positive = right)\n  const badgeOffsetY = -2; // px (negative = up, positive = down)\n  \n  // ═══════════════════════════════════════════════════════════════════════════\n  const borderColor = isLightTheme ? STATUS_BORDER_COLORS[status] : undefined;\n  const containerSize = iconSize;\n  \n  return (\n    <div style={{\n      position: 'relative',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      width: containerSize,\n      height: containerSize,\n    }}>\n      <AstroIcon name={icon} size={iconSize} color={iconColor} />\n      {showBadge && (\n        <span style={{\n          position: 'absolute',\n          top: badgeOffsetY,\n          left: badgeOffsetX,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}>\n          <StatusShape \n            status={status} \n            size={badgeSize} \n            color={statusColor} \n            borderColor={borderColor}\n            glow={!isLightTheme} \n          />\n        </span>\n      )}\n    </div>\n  );\n});\n\n// =============================================================================\n// DataValue Component\n// =============================================================================\n\nexport const DataValue = memo(function DataValue({\n  property,\n  label: labelProp,\n  value,\n  unit: unitProp,\n  icon: iconProp,\n  showIcon = true,\n  thresholds: thresholdsProp,\n  status: statusProp,\n  showStatus = true,\n  precision: precisionProp,\n  variant = 'stacked',\n  size = 'md',\n  color: colorProp,\n  className = '',\n  style,\n  onClick,\n  tooltip,\n}: DataValueProps): React.ReactElement {\n  const { tokens, mode } = useTheme();\n  const isLightTheme = mode === 'light';\n\n  // Merge property preset with explicit props\n  const config = useMemo((): PropertyConfig => {\n    const preset = property ? getPropertyConfig(property) : {\n      label: labelProp || 'Value',\n      icon: iconProp || 'info',\n      unit: unitProp,\n      precision: precisionProp,\n      thresholds: thresholdsProp,\n    };\n\n    return {\n      ...preset,\n      ...(labelProp !== undefined && { label: labelProp }),\n      ...(iconProp !== undefined && { icon: iconProp }),\n      ...(unitProp !== undefined && { unit: unitProp }),\n      ...(precisionProp !== undefined && { precision: precisionProp }),\n      ...(thresholdsProp !== undefined && { thresholds: thresholdsProp }),\n    };\n  }, [property, labelProp, iconProp, unitProp, precisionProp, thresholdsProp]);\n\n  // Derive or use explicit status\n  const status = useMemo((): StatusLevel => {\n    if (statusProp) return statusProp;\n    if (typeof value === 'number') {\n      return deriveStatus(value, config.thresholds);\n    }\n    return 'normal';\n  }, [statusProp, value, config.thresholds]);\n\n  // Format the value\n  const formattedValue = useMemo((): string => {\n    if (value === undefined || value === null) return '--';\n    if (typeof value === 'string') return value;\n    return formatPropertyValue(value, config);\n  }, [value, config]);\n\n  // Get status color\n  const statusColor = tokens.colors.status[status] || tokens.colors.status.off;\n  const valueColor = colorProp || (showStatus && status !== 'normal' ? statusColor : tokens.colors.text.primary);\n\n  // ==========================================================================\n  // Size Configuration - Uses theme tokens for consistency with other cards\n  // ==========================================================================\n  // Typography uses theme tokens to match SpacecraftCard's DataCell\n  // fontSize.xs = 10px (0.625rem), fontSize.sm = 12px (0.75rem)\n  const sizeConfig = {\n    sm: { \n      iconSize: 16, \n      labelSize: tokens.typography.fontSize.xs,  // 10px - matches DataCell\n      valueSize: tokens.typography.fontSize.sm,  // 12px - matches DataCell\n      lineHeight: 1.4,\n      gap: 6,  // Increased from 4px to 6px for better icon separation with larger icons\n      rowGap: 2, // 2px between label and value\n    },\n    md: { \n      iconSize: 20, \n      labelSize: tokens.typography.fontSize.xs,  // 10px\n      valueSize: tokens.typography.fontSize.base, // 14px\n      lineHeight: 1.4,\n      gap: 10,  // Increased from 8px to 10px\n      rowGap: 2, // 2px between label and value\n    },\n    lg: { \n      iconSize: 24, \n      labelSize: tokens.typography.fontSize.sm,  // 12px\n      valueSize: tokens.typography.fontSize.md,  // 14px\n      lineHeight: 1.4,\n      gap: 14, // Increased from 12px to 14px\n      rowGap: 4, // 4px between label and value\n    },\n  }[size];\n\n  // ==========================================================================\n  // Render Based on Variant\n  // \n  // Layout principles:\n  // - Baseline alignment for inline text\n  // - Consistent icon-to-text spacing\n  // - Symmetrical padding\n  // - Tabular numbers for value alignment in grids\n  // ==========================================================================\n  const renderContent = () => {\n    // Determine if status indicator should show\n    const hasStatus = showStatus && status !== 'normal' && status !== 'off';\n    \n    switch (variant) {\n      // ======================================================================\n      // INLINE: Icon + Label ... Value (space-between)\n      // Best for: Key-value pairs in tables or lists\n      // ======================================================================\n      case 'inline': {\n        return (\n          <div style={{ \n            display: 'flex', \n            alignItems: 'center', \n            justifyContent: 'space-between', \n            gap: sizeConfig.gap * 2,\n            minHeight: sizeConfig.iconSize, // Ensure consistent row height\n          }}>\n            <div style={{ \n              display: 'flex', \n              alignItems: 'center', \n              gap: sizeConfig.gap,\n            }}>\n              {showIcon && config.icon && (\n                <IconWithBadge\n                  icon={config.icon}\n                  iconSize={sizeConfig.iconSize}\n                  iconColor={hasStatus ? statusColor : tokens.colors.text.tertiary}\n                  showBadge={hasStatus}\n                  status={status}\n                  statusColor={statusColor}\n                  isLightTheme={isLightTheme}\n                />\n              )}\n              <span style={{\n                fontSize: sizeConfig.labelSize,\n                lineHeight: sizeConfig.lineHeight,\n                color: tokens.colors.text.secondary,\n                fontWeight: 500,\n                fontFamily: tokens.typography.fontFamily.primary,\n              }}>\n                {config.label}\n              </span>\n            </div>\n            <span style={{\n              fontSize: sizeConfig.valueSize,\n              lineHeight: sizeConfig.lineHeight,\n              fontWeight: 500, // Match SpacecraftCard DataCell\n              fontFamily: tokens.typography.fontFamily.mono,\n              fontVariantNumeric: 'tabular-nums',\n              color: valueColor,\n            }}>\n              {formattedValue}\n            </span>\n          </div>\n        );\n      }\n\n      // ======================================================================\n      // COMPACT: Icon + Value (horizontal, no label)\n      // Best for: Dense displays, status bars, compact dashboards\n      // ======================================================================\n      case 'compact': {\n        return (\n          <div style={{ \n            display: 'flex', \n            alignItems: 'center', \n            gap: sizeConfig.gap,\n            minHeight: sizeConfig.iconSize,\n          }}>\n            {showIcon && config.icon && (\n              <IconWithBadge\n                icon={config.icon}\n                iconSize={sizeConfig.iconSize}\n                iconColor={hasStatus ? statusColor : tokens.colors.text.tertiary}\n                showBadge={hasStatus}\n                status={status}\n                statusColor={statusColor}\n                isLightTheme={isLightTheme}\n              />\n            )}\n            <span style={{\n              fontSize: sizeConfig.valueSize,\n              lineHeight: sizeConfig.lineHeight,\n              fontWeight: 500, // Match SpacecraftCard DataCell\n              fontFamily: tokens.typography.fontFamily.mono,\n              fontVariantNumeric: 'tabular-nums',\n              color: valueColor,\n            }}>\n              {formattedValue}\n            </span>\n          </div>\n        );\n      }\n\n      // ======================================================================\n      // MINIMAL: Value only (no icon, no label)\n      // Best for: Inline values, table cells\n      // ======================================================================\n      case 'minimal':\n        return (\n          <span style={{\n            fontSize: sizeConfig.valueSize,\n            lineHeight: sizeConfig.lineHeight,\n            fontWeight: 500, // Match SpacecraftCard DataCell\n            fontFamily: tokens.typography.fontFamily.mono,\n            fontVariantNumeric: 'tabular-nums',\n            color: valueColor,\n          }}>\n            {formattedValue}\n          </span>\n        );\n\n      // ======================================================================\n      // CARD: Icon EXACTLY matches 2-row text height\n      // Best for: Dashboard tiles, prominent metrics\n      // ======================================================================\n      case 'card': {\n        // ═══════════════════════════════════════════════════════════════════════════\n        // 2-ROW LAYOUT CONTROLS (card variant)\n        // ═══════════════════════════════════════════════════════════════════════════\n        // ICON MULTIPLIER: Scale factor (0.5 = half, 1.0 = match text height, 1.5 = 150%)\n        const iconMultiplier = 0.7;\n        \n        // GAP: Pixels between icon and text column\n        const iconToTextGap = 4; // px\n        \n        // ═══════════════════════════════════════════════════════════════════════════\n        const baseSize = { sm: 26, md: 32, lg: 40 }[size];\n        const iconSize = Math.round(baseSize * iconMultiplier);\n        \n        return (\n          <div style={{ \n            display: 'flex', \n            alignItems: 'center',\n            gap: iconToTextGap,\n          }}>\n            {showIcon && config.icon && (\n              <IconWithBadge\n                icon={config.icon}\n                iconSize={iconSize}\n                iconColor={hasStatus ? statusColor : tokens.colors.text.tertiary}\n                showBadge={hasStatus}\n                status={status}\n                statusColor={statusColor}\n                isLightTheme={isLightTheme}\n              />\n            )}\n            <div style={{ \n              display: 'flex', \n              flexDirection: 'column', \n              justifyContent: 'space-between', // Distribute label/value to edges\n              gap: sizeConfig.rowGap, \n              minWidth: 0,\n            }}>\n              <span style={{\n                fontSize: sizeConfig.labelSize,\n                lineHeight: sizeConfig.lineHeight,\n                color: tokens.colors.text.secondary,\n                fontWeight: 500,\n                fontFamily: tokens.typography.fontFamily.primary,\n              }}>\n                {config.label}\n              </span>\n              <span style={{\n                fontSize: sizeConfig.valueSize,\n                lineHeight: sizeConfig.lineHeight,\n                fontWeight: 500, // Match SpacecraftCard DataCell\n                fontFamily: tokens.typography.fontFamily.mono,\n                fontVariantNumeric: 'tabular-nums',\n                color: valueColor,\n              }}>\n                {formattedValue}\n              </span>\n            </div>\n          </div>\n        );\n      }\n\n      // ======================================================================\n      // BANNER: Label on top, icon left-aligned + value right-aligned below\n      // Best for: TopBar metrics, KPI tiles where heading spans full width\n      // ======================================================================\n      case 'banner': {\n        const bannerIconSize = { sm: 18, md: 22, lg: 28 }[size];\n        return (\n          <div style={{ display: 'flex', flexDirection: 'column', gap: sizeConfig.rowGap, minWidth: 0, width: '100%' }}>\n            <span style={{\n              fontSize: sizeConfig.labelSize,\n              lineHeight: sizeConfig.lineHeight,\n              color: tokens.colors.text.secondary,\n              fontWeight: 500,\n              fontFamily: tokens.typography.fontFamily.primary,\n              textTransform: 'uppercase' as const,\n              letterSpacing: '0.5px',\n            }}>\n              {config.label}\n            </span>\n            <div style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'flex-start',\n              width: '100%',\n              gap: 6,\n              minWidth: 0,\n            }}>\n              {showIcon && config.icon && (\n                <IconWithBadge\n                  icon={config.icon}\n                  iconSize={bannerIconSize}\n                  iconColor={hasStatus ? statusColor : tokens.colors.text.tertiary}\n                  showBadge={hasStatus}\n                  status={status}\n                  statusColor={statusColor}\n                  isLightTheme={isLightTheme}\n                />\n              )}\n              <span style={{\n                fontSize: sizeConfig.valueSize,\n                lineHeight: sizeConfig.lineHeight,\n                fontWeight: 600,\n                fontFamily: tokens.typography.fontFamily.mono,\n                fontVariantNumeric: 'tabular-nums',\n                color: valueColor,\n                textAlign: 'left',\n              }}>\n                {formattedValue}\n              </span>\n            </div>\n          </div>\n        );\n      }\n\n      // ======================================================================\n      // STACKED (default): Icon EXACTLY matches 2-row text height\n      // Best for: General telemetry displays, standard data values\n      // ======================================================================\n      case 'stacked':\n      default: {\n        // ═══════════════════════════════════════════════════════════════════════════\n        // 2-ROW LAYOUT CONTROLS (stacked variant)\n        // ═══════════════════════════════════════════════════════════════════════════\n        // ICON MULTIPLIER: Scale factor (0.5 = half, 1.0 = match text height, 1.5 = 150%)\n        const iconMultiplier = 0.7;\n        \n        // GAP: Pixels between icon and text column\n        const iconToTextGap = 4; // px\n        \n        // ═══════════════════════════════════════════════════════════════════════════\n        const baseSize = { sm: 26, md: 32, lg: 40 }[size];\n        const iconSize = Math.round(baseSize * iconMultiplier);\n        \n        return (\n          <div style={{ \n            display: 'flex', \n            alignItems: 'center',\n            gap: iconToTextGap,\n          }}>\n            {showIcon && config.icon && (\n              <IconWithBadge\n                icon={config.icon}\n                iconSize={iconSize}\n                iconColor={hasStatus ? statusColor : tokens.colors.text.tertiary}\n                showBadge={hasStatus}\n                status={status}\n                statusColor={statusColor}\n                isLightTheme={isLightTheme}\n              />\n            )}\n            <div style={{ \n              display: 'flex', \n              flexDirection: 'column', \n              justifyContent: 'space-between', // Distribute label/value to edges\n              gap: sizeConfig.rowGap, \n              minWidth: 0,\n            }}>\n              <span style={{\n                fontSize: sizeConfig.labelSize,\n                lineHeight: sizeConfig.lineHeight,\n                color: tokens.colors.text.secondary,\n                fontWeight: 500,\n                fontFamily: tokens.typography.fontFamily.primary,\n              }}>\n                {config.label}\n              </span>\n              <span style={{\n                fontSize: sizeConfig.valueSize,\n                lineHeight: sizeConfig.lineHeight,\n                fontWeight: 500, // Match SpacecraftCard DataCell\n                fontFamily: tokens.typography.fontFamily.mono,\n                fontVariantNumeric: 'tabular-nums',\n                color: valueColor,\n              }}>\n                {formattedValue}\n              </span>\n            </div>\n          </div>\n        );\n      }\n    }\n  };\n\n  return (\n    <div\n      className={`zendir-data-value zendir-data-value--${variant} zendir-data-value--${size} ${className}`}\n      style={{\n        cursor: onClick ? 'pointer' : 'default',\n        ...(variant === 'banner' ? { flex: 1, minWidth: 0 } : {}),\n        ...style,\n      }}\n      onClick={onClick}\n      title={tooltip || config.description}\n      role={onClick ? 'button' : undefined}\n      tabIndex={onClick ? 0 : undefined}\n      onKeyDown={onClick ? (e) => e.key === 'Enter' && onClick() : undefined}\n    >\n      {renderContent()}\n    </div>\n  );\n});\n\n// =============================================================================\n// DataValueGroup Component\n// =============================================================================\n\nexport interface DataValueGroupProps {\n  /** Title for the group */\n  title?: string;\n  /** Icon for the title */\n  icon?: AstroIconName;\n  /** Layout direction */\n  direction?: 'row' | 'column' | 'grid';\n  /** Number of columns for grid layout */\n  columns?: number;\n  /** Gap between items */\n  gap?: 'sm' | 'md' | 'lg';\n  /** Children DataValue components */\n  children: React.ReactNode;\n  /** Additional CSS class */\n  className?: string;\n  /** Custom inline styles */\n  style?: React.CSSProperties;\n}\n\nexport const DataValueGroup = memo(function DataValueGroup({\n  title,\n  icon,\n  direction = 'grid',\n  columns = 2,\n  gap = 'md',\n  children,\n  className = '',\n  style,\n}: DataValueGroupProps): React.ReactElement {\n  const { tokens } = useTheme();\n\n  // Gap sizing on 4px grid\n  const gapSize = {\n    sm: 8,  // 2 × 4px\n    md: 16, // 4 × 4px\n    lg: 24, // 6 × 4px\n  }[gap];\n\n  const layoutStyles: Record<typeof direction, React.CSSProperties> = {\n    row: { \n      display: 'flex', \n      flexDirection: 'row' as const, \n      flexWrap: 'wrap' as const, \n      gap: gapSize,\n      alignItems: 'flex-start',\n    },\n    column: { \n      display: 'flex', \n      flexDirection: 'column' as const, \n      gap: gapSize,\n    },\n    grid: { \n      display: 'grid', \n      gridTemplateColumns: `repeat(${columns}, 1fr)`, \n      gap: gapSize,\n      alignItems: 'start',\n    },\n  };\n  const layoutStyle = layoutStyles[direction];\n\n  return (\n    <div className={`zendir-data-value-group ${className}`} style={style}>\n      {title && (\n        <div style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: 6, // 6px gap for tight header\n          marginBottom: 12, // 3 × 4px\n          paddingBottom: 8, // 2 × 4px\n          borderBottom: `1px solid ${tokens.colors.border.muted}`,\n        }}>\n          {icon && (\n            <AstroIcon \n              name={icon} \n              size={14} \n              color={tokens.colors.text.tertiary}\n              style={{ flexShrink: 0 }}\n            />\n          )}\n          <span style={{\n            fontSize: '12px',\n            fontWeight: 500,\n            color: tokens.colors.text.secondary,\n            textTransform: 'uppercase',\n            letterSpacing: '0.5px',\n          }}>\n            {title}\n          </span>\n        </div>\n      )}\n      <div style={layoutStyle}>\n        {children}\n      </div>\n    </div>\n  );\n});\n\nexport default DataValue;\n"],"names":["IconWithBadge","DataValue","DataValueGroup"],"mappings":"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"}

package/dist/react/core/Dialog.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+
+export type DialogSize = 'small' | 'medium' | 'large' | 'fullscreen';
+export interface DialogProps {
+    /** Open state */
+    open: boolean;
+    /** Close handler */
+    onClose: () => void;
+    /** Dialog title */
+    title?: string;
+    /** Size variant */
+    size?: DialogSize;
+    /** Show close button */
+    showCloseButton?: boolean;
+    /** Close on backdrop click */
+    closeOnBackdropClick?: boolean;
+    /** Close on escape key */
+    closeOnEscape?: boolean;
+    /** Children */
+    children: React.ReactNode;
+    /** Custom className */
+    className?: string;
+}
+export interface DialogActionsProps {
+    children: React.ReactNode;
+    align?: 'left' | 'center' | 'right';
+}
+declare const DialogActions: React.NamedExoticComponent<DialogActionsProps>;
+export declare const Dialog: React.NamedExoticComponent<DialogProps> & {
+    Actions: typeof DialogActions;
+};
+export default Dialog;