@zendir/ui 0.4.1 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"DataValue.js","sources":["../../../../src/react/core/data/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 '../display/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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"}
+{"version":3,"file":"DataValue.js","names":[],"sources":["../../../../src/react/core/data/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 \"../display/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 =\n  | \"stacked\"\n  | \"inline\"\n  | \"compact\"\n  | \"minimal\"\n  | \"card\"\n  | \"banner\"\n  | \"stat\";\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 = ({\n  status,\n  size,\n  color,\n  borderColor,\n  glow = true,\n}: StatusShapeProps) => {\n  const hasBorder = !!borderColor;\n  const strokeWidth = hasBorder ? 1 : 0;\n  const glowFilter =\n    glow && !hasBorder ? `drop-shadow(0 0 3px ${color})` : undefined;\n\n  const renderShape = () => {\n    switch (status) {\n      case \"off\":\n        return (\n          <circle\n            cx=\"6\"\n            cy=\"6\"\n            r={hasBorder ? 2.5 : 3}\n            fill={color}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        );\n      case \"standby\":\n        return (\n          <circle\n            cx=\"6\"\n            cy=\"6\"\n            r=\"3.5\"\n            fill=\"none\"\n            stroke={color}\n            strokeWidth=\"2\"\n          />\n        );\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,\n  iconSize,\n  iconColor,\n  showBadge,\n  status,\n  statusColor,\n  isLightTheme = false,\n}: IconWithBadgeProps) {\n  // ═══════════════════════════════════════════════════════════════════════════\n  // STATUS BADGE CONTROLS\n  // ═══════════════════════════════════════════════════════════════════════════\n  // BADGE SIZE: Percentage of icon size (0.25 = 25%)\n  const badgeSizeRatio = 0.3;\n  const badgeSize = Math.max(\n    7,\n    Math.min(14, Math.round(iconSize * badgeSizeRatio)),\n  );\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\n      style={{\n        position: \"relative\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        flexShrink: 0,\n        width: containerSize,\n        height: containerSize,\n      }}\n    >\n      <AstroIcon name={icon} size={iconSize} color={iconColor} />\n      {showBadge && (\n        <span\n          style={{\n            position: \"absolute\",\n            top: badgeOffsetY,\n            left: badgeOffsetX,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n          }}\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\n      ? getPropertyConfig(property)\n      : {\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 =\n    colorProp ||\n    (showStatus && status !== \"normal\"\n      ? statusColor\n      : 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\n            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          >\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: sizeConfig.gap,\n              }}\n            >\n              {showIcon && config.icon && (\n                <IconWithBadge\n                  icon={config.icon}\n                  iconSize={sizeConfig.iconSize}\n                  iconColor={\n                    hasStatus ? statusColor : tokens.colors.text.tertiary\n                  }\n                  showBadge={hasStatus}\n                  status={status}\n                  statusColor={statusColor}\n                  isLightTheme={isLightTheme}\n                />\n              )}\n              <span\n                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              >\n                {config.label}\n              </span>\n            </div>\n            <span\n              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            >\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\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: sizeConfig.gap,\n              minHeight: sizeConfig.iconSize,\n            }}\n          >\n            {showIcon && config.icon && (\n              <IconWithBadge\n                icon={config.icon}\n                iconSize={sizeConfig.iconSize}\n                iconColor={\n                  hasStatus ? statusColor : tokens.colors.text.tertiary\n                }\n                showBadge={hasStatus}\n                status={status}\n                statusColor={statusColor}\n                isLightTheme={isLightTheme}\n              />\n            )}\n            <span\n              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            >\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\n            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          >\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\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: iconToTextGap,\n            }}\n          >\n            {showIcon && config.icon && (\n              <IconWithBadge\n                icon={config.icon}\n                iconSize={iconSize}\n                iconColor={\n                  hasStatus ? statusColor : tokens.colors.text.tertiary\n                }\n                showBadge={hasStatus}\n                status={status}\n                statusColor={statusColor}\n                isLightTheme={isLightTheme}\n              />\n            )}\n            <div\n              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            >\n              <span\n                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              >\n                {config.label}\n              </span>\n              <span\n                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              >\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\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              gap: sizeConfig.rowGap,\n              minWidth: 0,\n              width: \"100%\",\n            }}\n          >\n            <span\n              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            >\n              {config.label}\n            </span>\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-start\",\n                width: \"100%\",\n                gap: 6,\n                minWidth: 0,\n              }}\n            >\n              {showIcon && config.icon && (\n                <IconWithBadge\n                  icon={config.icon}\n                  iconSize={bannerIconSize}\n                  iconColor={\n                    hasStatus ? statusColor : tokens.colors.text.tertiary\n                  }\n                  showBadge={hasStatus}\n                  status={status}\n                  statusColor={statusColor}\n                  isLightTheme={isLightTheme}\n                />\n              )}\n              <span\n                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              >\n                {formattedValue}\n              </span>\n            </div>\n          </div>\n        );\n      }\n\n      // ======================================================================\n      // STAT: icon + value (status-coloured) on top, uppercase mono label below\n      // Best for: status-header / top-bar telemetry chips (Asset, Link,\n      // Battery, Storage, Ground). Unlike the other variants, the value AND\n      // icon take the status colour even when `normal` — a nominal chip\n      // renders green — matching the SpaceRange status-header spec.\n      // ======================================================================\n      case \"stat\": {\n        const statSize = {\n          sm: { icon: 13, value: 13, label: 9.5 },\n          md: { icon: 15, value: 14, label: 10 },\n          lg: { icon: 18, value: 16, label: 11 },\n        }[size];\n        // colorProp wins; otherwise the status colour drives value + icon\n        // (including `normal`, so nominal telemetry reads green per spec).\n        const statColor = colorProp || statusColor;\n        return (\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"flex-start\",\n              gap: 2,\n            }}\n          >\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 6,\n                fontFamily: tokens.typography.fontFamily.mono,\n                fontSize: statSize.value,\n                fontWeight: 600,\n                color: statColor,\n                fontVariantNumeric: \"tabular-nums\",\n                letterSpacing: \"0.02em\",\n                lineHeight: 1.1,\n              }}\n            >\n              {showIcon && config.icon && (\n                <AstroIcon\n                  name={config.icon}\n                  size={statSize.icon}\n                  color={statColor}\n                />\n              )}\n              <span>{formattedValue}</span>\n            </div>\n            <span\n              style={{\n                fontFamily: tokens.typography.fontFamily.mono,\n                fontSize: statSize.label,\n                letterSpacing: \"0.06em\",\n                textTransform: \"uppercase\",\n                color: tokens.colors.text.tertiary,\n                lineHeight: 1.1,\n              }}\n            >\n              {config.label}\n            </span>\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\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: iconToTextGap,\n            }}\n          >\n            {showIcon && config.icon && (\n              <IconWithBadge\n                icon={config.icon}\n                iconSize={iconSize}\n                iconColor={\n                  hasStatus ? statusColor : tokens.colors.text.tertiary\n                }\n                showBadge={hasStatus}\n                status={status}\n                statusColor={statusColor}\n                isLightTheme={isLightTheme}\n              />\n            )}\n            <div\n              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            >\n              <span\n                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              >\n                {config.label}\n              </span>\n              <span\n                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              >\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\n          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        >\n          {icon && (\n            <AstroIcon\n              name={icon}\n              size={14}\n              color={tokens.colors.text.tertiary}\n              style={{ flexShrink: 0 }}\n            />\n          )}\n          <span\n            style={{\n              fontSize: \"12px\",\n              fontWeight: 500,\n              color: tokens.colors.text.secondary,\n              textTransform: \"uppercase\",\n              letterSpacing: \"0.5px\",\n            }}\n          >\n            {title}\n          </span>\n        </div>\n      )}\n      <div style={layoutStyle}>{children}</div>\n    </div>\n  );\n});\n\nexport default DataValue;\n"],"mappings":"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"}

package/dist/react/core/data/propertyConfig.d.ts

@@ -1,6 +1,5 @@
 import { StatusLevel } from '../../utils';
 import { AstroIconName } from '../display/AstroIcon';
-
 /**
  * Threshold configuration for automatic status derivation
  * Values are compared: value >= threshold triggers that status (high thresholds)
@@ -44,7 +43,7 @@ export interface PropertyConfig {
 /**
  * Property categories for organization
  */
-export type PropertyCategory = 'power' | 'thermal' | 'attitude' | 'communications' | 'propulsion' | 'navigation' | 'payload' | 'health' | 'orbital' | 'general';
+export type PropertyCategory = "power" | "thermal" | "attitude" | "communications" | "propulsion" | "navigation" | "payload" | "health" | "orbital" | "general";
 /**
  * Property key - either a preset name or custom string
  */