@zendir/ui 0.5.0 → 0.6.1

package/dist/react/core/display/GlassCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlassCard.js","sources":["../../../../src/react/core/display/GlassCard.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - GlassCard Component\r\n * \r\n * Glassmorphic card component with transparent blur backgrounds,\r\n * gradient overlays, and Zendir brand color accent system.\r\n * \r\n * Inspired by AstroUXDS radar chart styling with modern glassmorphism.\r\n * \r\n * @example\r\n * ```tsx\r\n * <GlassCard title=\"Radar Chart 001\" colorOverlay=\"electric\">\r\n *   <RadarChart data={data} />\r\n * </GlassCard>\r\n * \r\n * <GlassCard title=\"System Status\" colorOverlay=\"purple\" accentPosition=\"top\">\r\n *   <StatusContent />\r\n * </GlassCard>\r\n * ```\r\n */\r\n\r\nimport React, { memo } from 'react';\r\nimport { useTheme } from '../../theme';\r\nimport { classNames, type StatusLevel } from '../../utils';\r\n\r\n// =============================================================================\r\n// Zendir Brand Color Palette for Glass Overlays\r\n// =============================================================================\r\n\r\nexport const GLASS_COLOR_OVERLAYS = {\r\n  // Core brand colors\r\n  electric: {\r\n    gradient: 'linear-gradient(135deg, rgba(62, 60, 255, 0.15) 0%, rgba(62, 60, 255, 0.05) 100%)',\r\n    accent: '#3E3CFF',\r\n    border: 'rgba(62, 60, 255, 0.3)',\r\n    glow: 'rgba(62, 60, 255, 0.4)',\r\n  },\r\n  purple: {\r\n    gradient: 'linear-gradient(135deg, rgba(157, 112, 255, 0.15) 0%, rgba(157, 112, 255, 0.05) 100%)',\r\n    accent: '#9D70FF',\r\n    border: 'rgba(157, 112, 255, 0.3)',\r\n    glow: 'rgba(157, 112, 255, 0.4)',\r\n  },\r\n  prussianBlue: {\r\n    gradient: 'linear-gradient(135deg, rgba(27, 45, 160, 0.2) 0%, rgba(27, 45, 160, 0.08) 100%)',\r\n    accent: '#1B2DA0',\r\n    border: 'rgba(27, 45, 160, 0.4)',\r\n    glow: 'rgba(27, 45, 160, 0.5)',\r\n  },\r\n  \r\n  // Cyan/Teal (matching the reference image style)\r\n  cyan: {\r\n    gradient: 'linear-gradient(135deg, rgba(0, 212, 255, 0.12) 0%, rgba(0, 180, 220, 0.04) 100%)',\r\n    accent: '#00D4FF',\r\n    border: 'rgba(0, 212, 255, 0.35)',\r\n    glow: 'rgba(0, 212, 255, 0.5)',\r\n  },\r\n  teal: {\r\n    gradient: 'linear-gradient(135deg, rgba(45, 204, 255, 0.12) 0%, rgba(45, 204, 255, 0.04) 100%)',\r\n    accent: '#2DCCFF',\r\n    border: 'rgba(45, 204, 255, 0.35)',\r\n    glow: 'rgba(45, 204, 255, 0.5)',\r\n  },\r\n  \r\n  // Neutral options\r\n  dark: {\r\n    gradient: 'linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%)',\r\n    accent: '#1a1a2e',\r\n    border: 'rgba(255, 255, 255, 0.1)',\r\n    glow: 'rgba(0, 0, 0, 0.3)',\r\n  },\r\n  light: {\r\n    gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)',\r\n    accent: '#ffffff',\r\n    border: 'rgba(255, 255, 255, 0.25)',\r\n    glow: 'rgba(255, 255, 255, 0.3)',\r\n  },\r\n  white: {\r\n    gradient: 'linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)',\r\n    accent: '#ffffff',\r\n    border: 'rgba(255, 255, 255, 0.3)',\r\n    glow: 'rgba(255, 255, 255, 0.4)',\r\n  },\r\n  \r\n  // Additional shades\r\n  electricLight: {\r\n    gradient: 'linear-gradient(135deg, rgba(107, 105, 255, 0.15) 0%, rgba(107, 105, 255, 0.05) 100%)',\r\n    accent: '#6B69FF',\r\n    border: 'rgba(107, 105, 255, 0.3)',\r\n    glow: 'rgba(107, 105, 255, 0.4)',\r\n  },\r\n  purpleLight: {\r\n    gradient: 'linear-gradient(135deg, rgba(180, 141, 255, 0.15) 0%, rgba(180, 141, 255, 0.05) 100%)',\r\n    accent: '#B48DFF',\r\n    border: 'rgba(180, 141, 255, 0.3)',\r\n    glow: 'rgba(180, 141, 255, 0.4)',\r\n  },\r\n  \r\n  // No overlay (transparent)\r\n  none: {\r\n    gradient: 'none',\r\n    accent: 'transparent',\r\n    border: 'rgba(255, 255, 255, 0.1)',\r\n    glow: 'transparent',\r\n  },\r\n} as const;\r\n\r\nexport type GlassColorOverlay = keyof typeof GLASS_COLOR_OVERLAYS;\r\n\r\nexport type GlassAccentPosition = 'top' | 'left' | 'right' | 'bottom' | 'none';\r\n\r\nexport interface GlassCardProps {\r\n  /** Card title with optional icon */\r\n  title?: React.ReactNode;\r\n  /** Subtitle text */\r\n  subtitle?: React.ReactNode;\r\n  /** Color overlay from Zendir brand palette */\r\n  colorOverlay?: GlassColorOverlay;\r\n  /** Custom color overlay (hex or rgba) */\r\n  customOverlay?: {\r\n    gradient: string;\r\n    accent: string;\r\n    border: string;\r\n    glow?: string;\r\n  };\r\n  /** \r\n   * Accent color (hex) - auto-generates overlay from this color\r\n   * Overrides colorOverlay if provided\r\n   * Can be used with CardAccentProvider: accentColor={getAccentColor(title)}\r\n   */\r\n  accentColor?: string;\r\n  /** Position of the accent line/glow */\r\n  accentPosition?: GlassAccentPosition;\r\n  /** Accent line style */\r\n  accentStyle?: 'solid' | 'gradient' | 'glow' | 'dots';\r\n  /** Header icon (rendered before title) */\r\n  icon?: React.ReactNode;\r\n  /** Header right actions (legend, buttons, etc.) */\r\n  actions?: React.ReactNode;\r\n  /** Legend items to display in header */\r\n  legend?: Array<{ label: string; color: string }>;\r\n  /** Status indicator */\r\n  status?: StatusLevel;\r\n  /** Blur intensity (0-20) */\r\n  blur?: number;\r\n  /** Background opacity (0-1) */\r\n  backgroundOpacity?: number;\r\n  /** Enable glow effect on hover */\r\n  glowOnHover?: boolean;\r\n  /** Children content */\r\n  children: React.ReactNode;\r\n  /** Custom className */\r\n  className?: string;\r\n  /** Custom style */\r\n  style?: React.CSSProperties;\r\n  /** Click handler */\r\n  onClick?: () => void;\r\n  /** Full height mode */\r\n  fullHeight?: boolean;\r\n  /** Padding size */\r\n  padding?: 'none' | 'sm' | 'md' | 'lg';\r\n}\r\n\r\n/**\r\n * GlassCard - Glassmorphic card with Zendir brand styling\r\n * \r\n * Features:\r\n * - Transparent blur background\r\n * - Gradient color overlays\r\n * - Accent lines with glow effects\r\n * - Legend support for charts\r\n * - Customizable via props or custom overlay object\r\n */\r\n/**\r\n * Create overlay from accent color hex\r\n */\r\nfunction createOverlayFromColor(color: string) {\r\n  // Extract RGB from hex\r\n  const hex = color.replace('#', '');\r\n  const r = parseInt(hex.substring(0, 2), 16);\r\n  const g = parseInt(hex.substring(2, 4), 16);\r\n  const b = parseInt(hex.substring(4, 6), 16);\r\n  \r\n  return {\r\n    gradient: `linear-gradient(135deg, rgba(${r}, ${g}, ${b}, 0.15) 0%, rgba(${r}, ${g}, ${b}, 0.05) 100%)`,\r\n    accent: color,\r\n    border: `rgba(${r}, ${g}, ${b}, 0.35)`,\r\n    glow: `rgba(${r}, ${g}, ${b}, 0.5)`,\r\n  };\r\n}\r\n\r\nexport const GlassCard = memo(function GlassCard({\r\n  title,\r\n  subtitle,\r\n  colorOverlay = 'cyan',\r\n  customOverlay,\r\n  accentColor,\r\n  accentPosition = 'top',\r\n  accentStyle = 'gradient',\r\n  icon,\r\n  actions,\r\n  legend,\r\n  status,\r\n  blur = 12,\r\n  backgroundOpacity = 0.85,\r\n  glowOnHover = true,\r\n  children,\r\n  className = '',\r\n  style,\r\n  onClick,\r\n  fullHeight = false,\r\n  padding = 'md',\r\n}: GlassCardProps): React.ReactElement {\r\n  const { tokens, mode, theme } = useTheme();\r\n  const isDark = mode === 'dark';\r\n  const isTransparent = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n  const isBoldVariant = theme === 'transparent-bold';\r\n  const isMinimalVariant = theme === 'transparent-minimal';\r\n  \r\n  // Accent styling only for Bold/Minimal themes (or when position explicitly set for non-transparent)\r\n  const showAccentStyling = isBoldVariant || isMinimalVariant || !isTransparent;\r\n  \r\n  // For all transparent themes, default to purple (Zendir accent) instead of cyan\r\n  const effectiveColorOverlay = isTransparent && colorOverlay === 'cyan' ? 'purple' : colorOverlay;\r\n  \r\n  // Get overlay colors (priority: accentColor > customOverlay > colorOverlay)\r\n  const overlay = accentColor \r\n    ? createOverlayFromColor(accentColor)\r\n    : customOverlay || GLASS_COLOR_OVERLAYS[effectiveColorOverlay];\r\n  \r\n  // Auto-switch to light token for 'white' overlay in light mode\r\n  const effectiveOverlay = mode === 'light' && colorOverlay === 'white' && !accentColor && !customOverlay\r\n    ? GLASS_COLOR_OVERLAYS.dark\r\n    : overlay;\r\n  \r\n  // Theme-aware background colors\r\n  const cardBackground = isDark\r\n    ? `rgba(15, 20, 35, ${backgroundOpacity})`\r\n    : `rgba(255, 255, 255, ${backgroundOpacity})`;\r\n  \r\n  // Theme-aware border colors\r\n  const baseBorderColor = isDark\r\n    ? effectiveOverlay.border\r\n    : `rgba(100, 116, 139, 0.25)`;\r\n  \r\n  const paddingConfig = {\r\n    none: '0',\r\n    sm: tokens.spacing.sm,\r\n    md: tokens.spacing.md,\r\n    lg: tokens.spacing.lg,\r\n  };\r\n  \r\n  const isInteractive = !!onClick;\r\n  \r\n  // Accent line styles based on position and style\r\n  // Only show accent styling for Bold/Minimal themes (or non-transparent themes)\r\n  const getAccentStyles = (): React.CSSProperties => {\r\n    // For normal Glass theme, use subtle muted border instead of colored accent\r\n    if (isTransparent && !showAccentStyling) {\r\n      return {};\r\n    }\r\n    \r\n    if (accentPosition === 'none') return {};\r\n    \r\n    const accentColorValue = effectiveOverlay.accent;\r\n    const glowColor = effectiveOverlay.glow || accentColorValue;\r\n    \r\n    const baseAccentStyle: React.CSSProperties = {};\r\n    \r\n    // Position-based border\r\n    const positions: Record<GlassAccentPosition, string> = {\r\n      top: 'borderTop',\r\n      left: 'borderLeft',\r\n      right: 'borderRight',\r\n      bottom: 'borderBottom',\r\n      none: '',\r\n    };\r\n    \r\n    const borderProp = positions[accentPosition] as keyof React.CSSProperties;\r\n    \r\n    if (accentStyle === 'solid') {\r\n      (baseAccentStyle as any)[borderProp] = `2px solid ${accentColorValue}`;\r\n    } else if (accentStyle === 'gradient' || accentStyle === 'glow') {\r\n      // Using pseudo-element for gradient, so just set position indicator\r\n      (baseAccentStyle as any)[borderProp] = `2px solid ${accentColorValue}`;\r\n      if (accentStyle === 'glow') {\r\n        baseAccentStyle.boxShadow = `0 -2px 20px ${glowColor}, 0 -1px 8px ${glowColor}`;\r\n      }\r\n    } else if (accentStyle === 'dots') {\r\n      (baseAccentStyle as any)[borderProp] = `2px dotted ${accentColorValue}`;\r\n    }\r\n    \r\n    return baseAccentStyle;\r\n  };\r\n  \r\n  // Status color\r\n  const statusColor = status ? tokens.colors.status[status] : undefined;\r\n  \r\n  return (\r\n    <div\r\n      className={classNames('zendir-glass-card', `zendir-glass-card--${colorOverlay}`, className)}\r\n      onClick={onClick}\r\n      role={isInteractive ? 'button' : undefined}\r\n      tabIndex={isInteractive ? 0 : undefined}\r\n      onKeyDown={onClick ? (e: React.KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } } : undefined}\r\n      style={{\r\n        position: 'relative',\r\n        borderRadius: tokens.borderRadius.lg,\r\n        overflow: 'hidden',\r\n        height: fullHeight ? '100%' : 'auto',\r\n        display: 'flex',\r\n        flexDirection: 'column',\r\n        cursor: isInteractive ? 'pointer' : 'default',\r\n        \r\n        // Glassmorphic base (theme-aware)\r\n        background: cardBackground,\r\n        backdropFilter: isTransparent ? `blur(${blur}px)` : 'none',\r\n        WebkitBackdropFilter: isTransparent ? `blur(${blur}px)` : 'none',\r\n        \r\n        // Border with color tint (theme-aware)\r\n        border: `1px solid ${baseBorderColor}`,\r\n        \r\n        // Accent positioning\r\n        ...getAccentStyles(),\r\n        \r\n        // Hover glow effect\r\n        transition: 'all 0.3s ease-out',\r\n        boxShadow: glowOnHover ? 'none' : undefined,\r\n        \r\n        ...style,\r\n      }}\r\n      onMouseEnter={(e) => {\r\n        if (glowOnHover && effectiveOverlay.glow) {\r\n          e.currentTarget.style.boxShadow = `0 0 30px ${effectiveOverlay.glow}, 0 4px 20px rgba(0,0,0,0.3)`;\r\n        }\r\n      }}\r\n      onMouseLeave={(e) => {\r\n        if (glowOnHover) {\r\n          e.currentTarget.style.boxShadow = 'none';\r\n        }\r\n      }}\r\n    >\r\n      {/* Gradient overlay layer */}\r\n      <div\r\n        style={{\r\n          position: 'absolute',\r\n          inset: 0,\r\n          background: effectiveOverlay.gradient,\r\n          pointerEvents: 'none',\r\n          zIndex: 0,\r\n        }}\r\n      />\r\n      \r\n      {/* Accent glow line (top) - only for Bold/Minimal themes */}\r\n      {showAccentStyling && accentPosition === 'top' && accentStyle === 'glow' && (\r\n        <div\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: '10%',\r\n            right: '10%',\r\n            height: '2px',\r\n            background: `linear-gradient(90deg, transparent, ${effectiveOverlay.accent}, transparent)`,\r\n            boxShadow: `0 0 15px ${effectiveOverlay.glow}, 0 0 30px ${effectiveOverlay.glow}`,\r\n            zIndex: 1,\r\n          }}\r\n        />\r\n      )}\r\n      \r\n      {/* Content wrapper */}\r\n      <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', flex: 1 }}>\r\n        {/* Header */}\r\n        {(title || actions || legend) && (\r\n          <div\r\n            style={{\r\n              display: 'flex',\r\n              alignItems: 'center',\r\n              justifyContent: 'space-between',\r\n              gap: tokens.spacing.md,\r\n              padding: `${paddingConfig[padding]} ${paddingConfig[padding]} 0`,\r\n              marginBottom: tokens.spacing.sm,\r\n            }}\r\n          >\r\n            {/* Title section */}\r\n            <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm }}>\r\n              {/* Icon */}\r\n              {icon && (\r\n                <span style={{ color: effectiveOverlay.accent, display: 'flex', alignItems: 'center' }}>\r\n                  {icon}\r\n                </span>\r\n              )}\r\n              \r\n              {/* Status shape — Astro UX dual-coded */}\r\n              {status && statusColor && (() => {\r\n                const s = 10;\r\n                const h = s / 2;\r\n                const glow = `drop-shadow(0 0 4px ${statusColor})`;\r\n                switch (status) {\r\n                  case 'critical':\r\n                    return (\r\n                      <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} style={{ flexShrink: 0, filter: glow }}>\r\n                        <polygon points={`${h},${s} 0,0 ${s},0`} fill={statusColor} />\r\n                      </svg>\r\n                    );\r\n                  case 'serious':\r\n                    return (\r\n                      <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} style={{ flexShrink: 0, filter: glow }}>\r\n                        <polygon points={`${h},0 ${s},${h} ${h},${s} 0,${h}`} fill={statusColor} />\r\n                      </svg>\r\n                    );\r\n                  case 'caution':\r\n                    return (\r\n                      <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} style={{ flexShrink: 0, filter: glow }}>\r\n                        <rect width={s} height={s} fill={statusColor} />\r\n                      </svg>\r\n                    );\r\n                  case 'standby':\r\n                    return (\r\n                      <svg width={s} height={s} viewBox=\"0 0 12 12\" style={{ flexShrink: 0, filter: glow }}>\r\n                        <circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={statusColor} strokeWidth=\"2\" />\r\n                      </svg>\r\n                    );\r\n                  case 'off':\r\n                    return (\r\n                      <svg width={s} height={s} viewBox=\"0 0 12 12\" style={{ flexShrink: 0, filter: glow }}>\r\n                        <circle cx=\"6\" cy=\"6\" r=\"3\" fill={statusColor} />\r\n                      </svg>\r\n                    );\r\n                  default: // normal\r\n                    return (\r\n                      <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`} style={{ flexShrink: 0, filter: glow }}>\r\n                        <circle cx={h} cy={h} r={h} fill={statusColor} />\r\n                      </svg>\r\n                    );\r\n                }\r\n              })()}\r\n              \r\n              {/* Title text — card heading system */}\r\n              <div>\r\n                {title && (\r\n                  <h3\r\n                    style={{\r\n                      margin: 0,\r\n                      fontSize: tokens.layout?.card?.heading?.titleFontSize ?? '1.125rem',\r\n                      fontWeight: tokens.layout?.card?.heading?.titleFontWeight ?? 500,\r\n                      color: effectiveOverlay.accent,\r\n                      letterSpacing: '0.5px',\r\n                      textShadow: `0 0 20px ${effectiveOverlay.glow}`,\r\n                    }}\r\n                  >\r\n                    {title}\r\n                  </h3>\r\n                )}\r\n                {subtitle && (\r\n                  <p\r\n                    style={{\r\n                      margin: `${tokens.spacing.xs} 0 0`,\r\n                      fontSize: tokens.typography.body[3].fontSize,\r\n                      color: tokens.colors.text.secondary,\r\n                    }}\r\n                  >\r\n                    {subtitle}\r\n                  </p>\r\n                )}\r\n              </div>\r\n            </div>\r\n            \r\n            {/* Right section: legend + actions */}\r\n            <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.md }}>\r\n              {/* Legend items */}\r\n              {legend && legend.length > 0 && (\r\n                <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.md }}>\r\n                  {legend.map((item, idx) => (\r\n                    <div\r\n                      key={idx}\r\n                      style={{\r\n                        display: 'flex',\r\n                        alignItems: 'center',\r\n                        gap: tokens.spacing.xs,\r\n                      }}\r\n                    >\r\n                      <span\r\n                        style={{\r\n                          width: '8px',\r\n                          height: '8px',\r\n                          borderRadius: '2px',\r\n                          backgroundColor: item.color,\r\n                        }}\r\n                      />\r\n                      <span\r\n                        style={{\r\n                          fontSize: tokens.typography.body[3].fontSize,\r\n                          color: tokens.colors.text.secondary,\r\n                        }}\r\n                      >\r\n                        {item.label}\r\n                      </span>\r\n                    </div>\r\n                  ))}\r\n                </div>\r\n              )}\r\n              \r\n              {/* Actions */}\r\n              {actions && (\r\n                <div style={{ display: 'flex', gap: tokens.spacing.xs }}>\r\n                  {actions}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        \r\n        {/* Accent line - only for Bold/Minimal themes (no decorative dashes) */}\r\n        {showAccentStyling && accentPosition === 'top' && (\r\n          <div\r\n            style={{\r\n              display: 'flex',\r\n              alignItems: 'center',\r\n              padding: `0 ${paddingConfig[padding]}`,\r\n              marginBottom: tokens.spacing.sm,\r\n            }}\r\n          >\r\n            {/* Clean accent line with smooth gradient */}\r\n            <div\r\n              style={{\r\n                flex: 1,\r\n                height: '2px',\r\n                background: `linear-gradient(90deg, ${effectiveOverlay.accent} 0%, ${effectiveOverlay.accent}60 70%, ${effectiveOverlay.accent}20 100%)`,\r\n                boxShadow: `0 0 6px ${effectiveOverlay.accent}40`,\r\n              }}\r\n            />\r\n          </div>\r\n        )}\r\n        \r\n        {/* Content */}\r\n        <div\r\n          style={{\r\n            flex: 1,\r\n            padding: title ? `0 ${paddingConfig[padding]} ${paddingConfig[padding]}` : paddingConfig[padding],\r\n          }}\r\n        >\r\n          {children}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n});\r\n\r\nexport default GlassCard;\r\n"],"names":["GlassCard"],"mappings":"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"}
+{"version":3,"file":"GlassCard.js","names":[],"sources":["../../../../src/react/core/display/GlassCard.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - GlassCard Component\r\n *\r\n * Glassmorphic card component with transparent blur backgrounds,\r\n * gradient overlays, and Zendir brand color accent system.\r\n *\r\n * Inspired by AstroUXDS radar chart styling with modern glassmorphism.\r\n *\r\n * @example\r\n * ```tsx\r\n * <GlassCard title=\"Radar Chart 001\" colorOverlay=\"electric\">\r\n *   <RadarChart data={data} />\r\n * </GlassCard>\r\n *\r\n * <GlassCard title=\"System Status\" colorOverlay=\"purple\" accentPosition=\"top\">\r\n *   <StatusContent />\r\n * </GlassCard>\r\n * ```\r\n */\r\n\r\nimport React, { memo } from \"react\";\r\nimport { useTheme } from \"../../theme\";\r\nimport { classNames, type StatusLevel } from \"../../utils\";\r\n\r\n// =============================================================================\r\n// Zendir Brand Color Palette for Glass Overlays\r\n// =============================================================================\r\n\r\nexport const GLASS_COLOR_OVERLAYS = {\r\n  // Core brand colors\r\n  electric: {\r\n    gradient:\r\n      \"linear-gradient(135deg, rgba(62, 60, 255, 0.15) 0%, rgba(62, 60, 255, 0.05) 100%)\",\r\n    accent: \"#3E3CFF\",\r\n    border: \"rgba(62, 60, 255, 0.3)\",\r\n    glow: \"rgba(62, 60, 255, 0.4)\",\r\n  },\r\n  purple: {\r\n    gradient:\r\n      \"linear-gradient(135deg, rgba(157, 112, 255, 0.15) 0%, rgba(157, 112, 255, 0.05) 100%)\",\r\n    accent: \"#9D70FF\",\r\n    border: \"rgba(157, 112, 255, 0.3)\",\r\n    glow: \"rgba(157, 112, 255, 0.4)\",\r\n  },\r\n  prussianBlue: {\r\n    gradient:\r\n      \"linear-gradient(135deg, rgba(27, 45, 160, 0.2) 0%, rgba(27, 45, 160, 0.08) 100%)\",\r\n    accent: \"#1B2DA0\",\r\n    border: \"rgba(27, 45, 160, 0.4)\",\r\n    glow: \"rgba(27, 45, 160, 0.5)\",\r\n  },\r\n\r\n  // Cyan/Teal (matching the reference image style)\r\n  cyan: {\r\n    gradient:\r\n      \"linear-gradient(135deg, rgba(0, 212, 255, 0.12) 0%, rgba(0, 180, 220, 0.04) 100%)\",\r\n    accent: \"#00D4FF\",\r\n    border: \"rgba(0, 212, 255, 0.35)\",\r\n    glow: \"rgba(0, 212, 255, 0.5)\",\r\n  },\r\n  teal: {\r\n    gradient:\r\n      \"linear-gradient(135deg, rgba(45, 204, 255, 0.12) 0%, rgba(45, 204, 255, 0.04) 100%)\",\r\n    accent: \"#2DCCFF\",\r\n    border: \"rgba(45, 204, 255, 0.35)\",\r\n    glow: \"rgba(45, 204, 255, 0.5)\",\r\n  },\r\n\r\n  // Neutral options\r\n  dark: {\r\n    gradient:\r\n      \"linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%)\",\r\n    accent: \"#1a1a2e\",\r\n    border: \"rgba(255, 255, 255, 0.1)\",\r\n    glow: \"rgba(0, 0, 0, 0.3)\",\r\n  },\r\n  light: {\r\n    gradient:\r\n      \"linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)\",\r\n    accent: \"#ffffff\",\r\n    border: \"rgba(255, 255, 255, 0.25)\",\r\n    glow: \"rgba(255, 255, 255, 0.3)\",\r\n  },\r\n  white: {\r\n    gradient:\r\n      \"linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)\",\r\n    accent: \"#ffffff\",\r\n    border: \"rgba(255, 255, 255, 0.3)\",\r\n    glow: \"rgba(255, 255, 255, 0.4)\",\r\n  },\r\n\r\n  // Additional shades\r\n  electricLight: {\r\n    gradient:\r\n      \"linear-gradient(135deg, rgba(107, 105, 255, 0.15) 0%, rgba(107, 105, 255, 0.05) 100%)\",\r\n    accent: \"#6B69FF\",\r\n    border: \"rgba(107, 105, 255, 0.3)\",\r\n    glow: \"rgba(107, 105, 255, 0.4)\",\r\n  },\r\n  purpleLight: {\r\n    gradient:\r\n      \"linear-gradient(135deg, rgba(180, 141, 255, 0.15) 0%, rgba(180, 141, 255, 0.05) 100%)\",\r\n    accent: \"#B48DFF\",\r\n    border: \"rgba(180, 141, 255, 0.3)\",\r\n    glow: \"rgba(180, 141, 255, 0.4)\",\r\n  },\r\n\r\n  // No overlay (transparent)\r\n  none: {\r\n    gradient: \"none\",\r\n    accent: \"transparent\",\r\n    border: \"rgba(255, 255, 255, 0.1)\",\r\n    glow: \"transparent\",\r\n  },\r\n} as const;\r\n\r\nexport type GlassColorOverlay = keyof typeof GLASS_COLOR_OVERLAYS;\r\n\r\nexport type GlassAccentPosition = \"top\" | \"left\" | \"right\" | \"bottom\" | \"none\";\r\n\r\nexport interface GlassCardProps {\r\n  /** Card title with optional icon */\r\n  title?: React.ReactNode;\r\n  /** Subtitle text */\r\n  subtitle?: React.ReactNode;\r\n  /** Color overlay from Zendir brand palette */\r\n  colorOverlay?: GlassColorOverlay;\r\n  /** Custom color overlay (hex or rgba) */\r\n  customOverlay?: {\r\n    gradient: string;\r\n    accent: string;\r\n    border: string;\r\n    glow?: string;\r\n  };\r\n  /**\r\n   * Accent color (hex) - auto-generates overlay from this color\r\n   * Overrides colorOverlay if provided\r\n   * Can be used with CardAccentProvider: accentColor={getAccentColor(title)}\r\n   */\r\n  accentColor?: string;\r\n  /** Position of the accent line/glow */\r\n  accentPosition?: GlassAccentPosition;\r\n  /** Accent line style */\r\n  accentStyle?: \"solid\" | \"gradient\" | \"glow\" | \"dots\";\r\n  /** Header icon (rendered before title) */\r\n  icon?: React.ReactNode;\r\n  /** Header right actions (legend, buttons, etc.) */\r\n  actions?: React.ReactNode;\r\n  /** Legend items to display in header */\r\n  legend?: Array<{ label: string; color: string }>;\r\n  /** Status indicator */\r\n  status?: StatusLevel;\r\n  /** Blur intensity (0-20) */\r\n  blur?: number;\r\n  /** Background opacity (0-1) */\r\n  backgroundOpacity?: number;\r\n  /** Enable glow effect on hover */\r\n  glowOnHover?: boolean;\r\n  /** Children content */\r\n  children: React.ReactNode;\r\n  /** Custom className */\r\n  className?: string;\r\n  /** Custom style */\r\n  style?: React.CSSProperties;\r\n  /** Click handler */\r\n  onClick?: () => void;\r\n  /** Full height mode */\r\n  fullHeight?: boolean;\r\n  /** Padding size */\r\n  padding?: \"none\" | \"sm\" | \"md\" | \"lg\";\r\n}\r\n\r\n/**\r\n * GlassCard - Glassmorphic card with Zendir brand styling\r\n *\r\n * Features:\r\n * - Transparent blur background\r\n * - Gradient color overlays\r\n * - Accent lines with glow effects\r\n * - Legend support for charts\r\n * - Customizable via props or custom overlay object\r\n */\r\n/**\r\n * Create overlay from accent color hex\r\n */\r\nfunction createOverlayFromColor(color: string) {\r\n  // Extract RGB from hex\r\n  const hex = color.replace(\"#\", \"\");\r\n  const r = parseInt(hex.substring(0, 2), 16);\r\n  const g = parseInt(hex.substring(2, 4), 16);\r\n  const b = parseInt(hex.substring(4, 6), 16);\r\n\r\n  return {\r\n    gradient: `linear-gradient(135deg, rgba(${r}, ${g}, ${b}, 0.15) 0%, rgba(${r}, ${g}, ${b}, 0.05) 100%)`,\r\n    accent: color,\r\n    border: `rgba(${r}, ${g}, ${b}, 0.35)`,\r\n    glow: `rgba(${r}, ${g}, ${b}, 0.5)`,\r\n  };\r\n}\r\n\r\nexport const GlassCard = memo(function GlassCard({\r\n  title,\r\n  subtitle,\r\n  colorOverlay = \"cyan\",\r\n  customOverlay,\r\n  accentColor,\r\n  accentPosition = \"top\",\r\n  accentStyle = \"gradient\",\r\n  icon,\r\n  actions,\r\n  legend,\r\n  status,\r\n  blur = 12,\r\n  backgroundOpacity = 0.85,\r\n  glowOnHover = true,\r\n  children,\r\n  className = \"\",\r\n  style,\r\n  onClick,\r\n  fullHeight = false,\r\n  padding = \"md\",\r\n}: GlassCardProps): React.ReactElement {\r\n  const { tokens, mode, theme } = useTheme();\r\n  const isDark = mode === \"dark\";\r\n  const isTransparent =\r\n    theme === \"transparent\" ||\r\n    theme === \"transparent-bold\" ||\r\n    theme === \"transparent-minimal\";\r\n  const isBoldVariant = theme === \"transparent-bold\";\r\n  const isMinimalVariant = theme === \"transparent-minimal\";\r\n\r\n  // Accent styling only for Bold/Minimal themes (or when position explicitly set for non-transparent)\r\n  const showAccentStyling = isBoldVariant || isMinimalVariant || !isTransparent;\r\n\r\n  // For all transparent themes, default to purple (Zendir accent) instead of cyan\r\n  const effectiveColorOverlay =\r\n    isTransparent && colorOverlay === \"cyan\" ? \"purple\" : colorOverlay;\r\n\r\n  // Get overlay colors (priority: accentColor > customOverlay > colorOverlay)\r\n  const overlay = accentColor\r\n    ? createOverlayFromColor(accentColor)\r\n    : customOverlay || GLASS_COLOR_OVERLAYS[effectiveColorOverlay];\r\n\r\n  // Auto-switch to light token for 'white' overlay in light mode\r\n  const effectiveOverlay =\r\n    mode === \"light\" &&\r\n    colorOverlay === \"white\" &&\r\n    !accentColor &&\r\n    !customOverlay\r\n      ? GLASS_COLOR_OVERLAYS.dark\r\n      : overlay;\r\n\r\n  // Theme-aware background colors\r\n  const cardBackground = isDark\r\n    ? `rgba(15, 20, 35, ${backgroundOpacity})`\r\n    : `rgba(255, 255, 255, ${backgroundOpacity})`;\r\n\r\n  // Theme-aware border colors\r\n  const baseBorderColor = isDark\r\n    ? effectiveOverlay.border\r\n    : `rgba(100, 116, 139, 0.25)`;\r\n\r\n  const paddingConfig = {\r\n    none: \"0\",\r\n    sm: tokens.spacing.sm,\r\n    md: tokens.spacing.md,\r\n    lg: tokens.spacing.lg,\r\n  };\r\n\r\n  const isInteractive = !!onClick;\r\n\r\n  // Accent line styles based on position and style\r\n  // Only show accent styling for Bold/Minimal themes (or non-transparent themes)\r\n  const getAccentStyles = (): React.CSSProperties => {\r\n    // For normal Glass theme, use subtle muted border instead of colored accent\r\n    if (isTransparent && !showAccentStyling) {\r\n      return {};\r\n    }\r\n\r\n    if (accentPosition === \"none\") return {};\r\n\r\n    const accentColorValue = effectiveOverlay.accent;\r\n    const glowColor = effectiveOverlay.glow || accentColorValue;\r\n\r\n    const baseAccentStyle: React.CSSProperties = {};\r\n\r\n    // Position-based border\r\n    const positions: Record<GlassAccentPosition, string> = {\r\n      top: \"borderTop\",\r\n      left: \"borderLeft\",\r\n      right: \"borderRight\",\r\n      bottom: \"borderBottom\",\r\n      none: \"\",\r\n    };\r\n\r\n    const borderProp = positions[accentPosition] as keyof React.CSSProperties;\r\n\r\n    if (accentStyle === \"solid\") {\r\n      (baseAccentStyle as any)[borderProp] = `2px solid ${accentColorValue}`;\r\n    } else if (accentStyle === \"gradient\" || accentStyle === \"glow\") {\r\n      // Using pseudo-element for gradient, so just set position indicator\r\n      (baseAccentStyle as any)[borderProp] = `2px solid ${accentColorValue}`;\r\n      if (accentStyle === \"glow\") {\r\n        baseAccentStyle.boxShadow = `0 -2px 20px ${glowColor}, 0 -1px 8px ${glowColor}`;\r\n      }\r\n    } else if (accentStyle === \"dots\") {\r\n      (baseAccentStyle as any)[borderProp] = `2px dotted ${accentColorValue}`;\r\n    }\r\n\r\n    return baseAccentStyle;\r\n  };\r\n\r\n  // Status color\r\n  const statusColor = status ? tokens.colors.status[status] : undefined;\r\n\r\n  return (\r\n    <div\r\n      className={classNames(\r\n        \"zendir-glass-card\",\r\n        `zendir-glass-card--${colorOverlay}`,\r\n        className,\r\n      )}\r\n      onClick={onClick}\r\n      role={isInteractive ? \"button\" : undefined}\r\n      tabIndex={isInteractive ? 0 : undefined}\r\n      onKeyDown={\r\n        onClick\r\n          ? (e: React.KeyboardEvent) => {\r\n              if (e.key === \"Enter\" || e.key === \" \") {\r\n                e.preventDefault();\r\n                onClick();\r\n              }\r\n            }\r\n          : undefined\r\n      }\r\n      style={{\r\n        position: \"relative\",\r\n        borderRadius: tokens.borderRadius.lg,\r\n        overflow: \"hidden\",\r\n        height: fullHeight ? \"100%\" : \"auto\",\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        cursor: isInteractive ? \"pointer\" : \"default\",\r\n\r\n        // Glassmorphic base (theme-aware)\r\n        background: cardBackground,\r\n        backdropFilter: isTransparent ? `blur(${blur}px)` : \"none\",\r\n        WebkitBackdropFilter: isTransparent ? `blur(${blur}px)` : \"none\",\r\n\r\n        // Border with color tint (theme-aware)\r\n        border: `1px solid ${baseBorderColor}`,\r\n\r\n        // Accent positioning\r\n        ...getAccentStyles(),\r\n\r\n        // Hover glow effect\r\n        transition: \"all 0.3s ease-out\",\r\n        boxShadow: glowOnHover ? \"none\" : undefined,\r\n\r\n        ...style,\r\n      }}\r\n      onMouseEnter={(e) => {\r\n        if (glowOnHover && effectiveOverlay.glow) {\r\n          e.currentTarget.style.boxShadow = `0 0 30px ${effectiveOverlay.glow}, 0 4px 20px rgba(0,0,0,0.3)`;\r\n        }\r\n      }}\r\n      onMouseLeave={(e) => {\r\n        if (glowOnHover) {\r\n          e.currentTarget.style.boxShadow = \"none\";\r\n        }\r\n      }}\r\n    >\r\n      {/* Gradient overlay layer */}\r\n      <div\r\n        style={{\r\n          position: \"absolute\",\r\n          inset: 0,\r\n          background: effectiveOverlay.gradient,\r\n          pointerEvents: \"none\",\r\n          zIndex: 0,\r\n        }}\r\n      />\r\n\r\n      {/* Accent glow line (top) - only for Bold/Minimal themes */}\r\n      {showAccentStyling &&\r\n        accentPosition === \"top\" &&\r\n        accentStyle === \"glow\" && (\r\n          <div\r\n            style={{\r\n              position: \"absolute\",\r\n              top: 0,\r\n              left: \"10%\",\r\n              right: \"10%\",\r\n              height: \"2px\",\r\n              background: `linear-gradient(90deg, transparent, ${effectiveOverlay.accent}, transparent)`,\r\n              boxShadow: `0 0 15px ${effectiveOverlay.glow}, 0 0 30px ${effectiveOverlay.glow}`,\r\n              zIndex: 1,\r\n            }}\r\n          />\r\n        )}\r\n\r\n      {/* Content wrapper */}\r\n      <div\r\n        style={{\r\n          position: \"relative\",\r\n          zIndex: 1,\r\n          display: \"flex\",\r\n          flexDirection: \"column\",\r\n          flex: 1,\r\n        }}\r\n      >\r\n        {/* Header */}\r\n        {(title || actions || legend) && (\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              justifyContent: \"space-between\",\r\n              gap: tokens.spacing.md,\r\n              padding: `${paddingConfig[padding]} ${paddingConfig[padding]} 0`,\r\n              marginBottom: tokens.spacing.sm,\r\n            }}\r\n          >\r\n            {/* Title section */}\r\n            <div\r\n              style={{\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                gap: tokens.spacing.sm,\r\n              }}\r\n            >\r\n              {/* Icon */}\r\n              {icon && (\r\n                <span\r\n                  style={{\r\n                    color: effectiveOverlay.accent,\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                  }}\r\n                >\r\n                  {icon}\r\n                </span>\r\n              )}\r\n\r\n              {/* Status shape — Astro UX dual-coded */}\r\n              {status &&\r\n                statusColor &&\r\n                (() => {\r\n                  const s = 10;\r\n                  const h = s / 2;\r\n                  const glow = `drop-shadow(0 0 4px ${statusColor})`;\r\n                  switch (status) {\r\n                    case \"critical\":\r\n                      return (\r\n                        <svg\r\n                          width={s}\r\n                          height={s}\r\n                          viewBox={`0 0 ${s} ${s}`}\r\n                          style={{ flexShrink: 0, filter: glow }}\r\n                        >\r\n                          <polygon\r\n                            points={`${h},${s} 0,0 ${s},0`}\r\n                            fill={statusColor}\r\n                          />\r\n                        </svg>\r\n                      );\r\n                    case \"serious\":\r\n                      return (\r\n                        <svg\r\n                          width={s}\r\n                          height={s}\r\n                          viewBox={`0 0 ${s} ${s}`}\r\n                          style={{ flexShrink: 0, filter: glow }}\r\n                        >\r\n                          <polygon\r\n                            points={`${h},0 ${s},${h} ${h},${s} 0,${h}`}\r\n                            fill={statusColor}\r\n                          />\r\n                        </svg>\r\n                      );\r\n                    case \"caution\":\r\n                      return (\r\n                        <svg\r\n                          width={s}\r\n                          height={s}\r\n                          viewBox={`0 0 ${s} ${s}`}\r\n                          style={{ flexShrink: 0, filter: glow }}\r\n                        >\r\n                          <rect width={s} height={s} fill={statusColor} />\r\n                        </svg>\r\n                      );\r\n                    case \"standby\":\r\n                      return (\r\n                        <svg\r\n                          width={s}\r\n                          height={s}\r\n                          viewBox=\"0 0 12 12\"\r\n                          style={{ flexShrink: 0, filter: glow }}\r\n                        >\r\n                          <circle\r\n                            cx=\"6\"\r\n                            cy=\"6\"\r\n                            r=\"3.5\"\r\n                            fill=\"none\"\r\n                            stroke={statusColor}\r\n                            strokeWidth=\"2\"\r\n                          />\r\n                        </svg>\r\n                      );\r\n                    case \"off\":\r\n                      return (\r\n                        <svg\r\n                          width={s}\r\n                          height={s}\r\n                          viewBox=\"0 0 12 12\"\r\n                          style={{ flexShrink: 0, filter: glow }}\r\n                        >\r\n                          <circle cx=\"6\" cy=\"6\" r=\"3\" fill={statusColor} />\r\n                        </svg>\r\n                      );\r\n                    default: // normal\r\n                      return (\r\n                        <svg\r\n                          width={s}\r\n                          height={s}\r\n                          viewBox={`0 0 ${s} ${s}`}\r\n                          style={{ flexShrink: 0, filter: glow }}\r\n                        >\r\n                          <circle cx={h} cy={h} r={h} fill={statusColor} />\r\n                        </svg>\r\n                      );\r\n                  }\r\n                })()}\r\n\r\n              {/* Title text — card heading system */}\r\n              <div>\r\n                {title && (\r\n                  <h3\r\n                    style={{\r\n                      margin: 0,\r\n                      fontSize:\r\n                        tokens.layout?.card?.heading?.titleFontSize ??\r\n                        \"1.125rem\",\r\n                      fontWeight:\r\n                        tokens.layout?.card?.heading?.titleFontWeight ?? 500,\r\n                      color: effectiveOverlay.accent,\r\n                      letterSpacing: \"0.5px\",\r\n                      textShadow: `0 0 20px ${effectiveOverlay.glow}`,\r\n                    }}\r\n                  >\r\n                    {title}\r\n                  </h3>\r\n                )}\r\n                {subtitle && (\r\n                  <p\r\n                    style={{\r\n                      margin: `${tokens.spacing.xs} 0 0`,\r\n                      fontSize: tokens.typography.body[3].fontSize,\r\n                      color: tokens.colors.text.secondary,\r\n                    }}\r\n                  >\r\n                    {subtitle}\r\n                  </p>\r\n                )}\r\n              </div>\r\n            </div>\r\n\r\n            {/* Right section: legend + actions */}\r\n            <div\r\n              style={{\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                gap: tokens.spacing.md,\r\n              }}\r\n            >\r\n              {/* Legend items */}\r\n              {legend && legend.length > 0 && (\r\n                <div\r\n                  style={{\r\n                    display: \"flex\",\r\n                    alignItems: \"center\",\r\n                    gap: tokens.spacing.md,\r\n                  }}\r\n                >\r\n                  {legend.map((item, idx) => (\r\n                    <div\r\n                      key={idx}\r\n                      style={{\r\n                        display: \"flex\",\r\n                        alignItems: \"center\",\r\n                        gap: tokens.spacing.xs,\r\n                      }}\r\n                    >\r\n                      <span\r\n                        style={{\r\n                          width: \"8px\",\r\n                          height: \"8px\",\r\n                          borderRadius: \"2px\",\r\n                          backgroundColor: item.color,\r\n                        }}\r\n                      />\r\n                      <span\r\n                        style={{\r\n                          fontSize: tokens.typography.body[3].fontSize,\r\n                          color: tokens.colors.text.secondary,\r\n                        }}\r\n                      >\r\n                        {item.label}\r\n                      </span>\r\n                    </div>\r\n                  ))}\r\n                </div>\r\n              )}\r\n\r\n              {/* Actions */}\r\n              {actions && (\r\n                <div style={{ display: \"flex\", gap: tokens.spacing.xs }}>\r\n                  {actions}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n\r\n        {/* Accent line - only for Bold/Minimal themes (no decorative dashes) */}\r\n        {showAccentStyling && accentPosition === \"top\" && (\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              padding: `0 ${paddingConfig[padding]}`,\r\n              marginBottom: tokens.spacing.sm,\r\n            }}\r\n          >\r\n            {/* Clean accent line with smooth gradient */}\r\n            <div\r\n              style={{\r\n                flex: 1,\r\n                height: \"2px\",\r\n                background: `linear-gradient(90deg, ${effectiveOverlay.accent} 0%, ${effectiveOverlay.accent}60 70%, ${effectiveOverlay.accent}20 100%)`,\r\n                boxShadow: `0 0 6px ${effectiveOverlay.accent}40`,\r\n              }}\r\n            />\r\n          </div>\r\n        )}\r\n\r\n        {/* Content */}\r\n        <div\r\n          style={{\r\n            flex: 1,\r\n            padding: title\r\n              ? `0 ${paddingConfig[padding]} ${paddingConfig[padding]}`\r\n              : paddingConfig[padding],\r\n          }}\r\n        >\r\n          {children}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n});\r\n\r\nexport default GlassCard;\r\n"],"mappings":"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"}

package/dist/react/core/display/HeaderIconWithStatus.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { StatusLevel } from '../../utils';
 import { AstroIconName } from './AstroIcon';
-
 export interface HeaderIconWithStatusProps {
     /** Astro icon name */
     icon: AstroIconName | string;

package/dist/react/core/display/HeaderIconWithStatus.js

@@ -1,157 +1,157 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { AstroIcon } from "./AstroIcon.js";
-const STATUS_BORDER_COLORS = {
-  off: "#3c3e42",
-  standby: "#285766",
-  normal: "#005a00",
-  caution: "#645600",
-  serious: "#664618",
-  critical: "#661102"
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/display/HeaderIconWithStatus.tsx
+/**
+* @zendir/ui - HeaderIconWithStatus Component
+*
+* Shared component for card/chart header icons with status indicator.
+* Follows MonitoringIcon pattern for Astro UX compliance.
+*
+* Features:
+* - Status indicator positioned at top-left with transform offset
+* - Glow effect in dark mode for visibility
+* - Border in light mode for WCAG AA compliance
+* - Theme-aware colors
+* - Consistent sizing across all usages
+*/
+var STATUS_BORDER_COLORS = {
+	off: "#3c3e42",
+	standby: "#285766",
+	normal: "#005a00",
+	caution: "#645600",
+	serious: "#664618",
+	critical: "#661102"
 };
-const StatusShape = ({ status, size, color, borderColor, glow = true }) => {
-  const hasBorder = !!borderColor;
-  const strokeWidth = hasBorder ? 1 : 0;
-  const glowFilter = glow && !hasBorder ? `drop-shadow(0 0 3px ${color})` : void 0;
-  const renderShape = () => {
-    switch (status) {
-      case "off":
-        return /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: hasBorder ? 2.5 : 3, fill: color, stroke: borderColor, strokeWidth });
-      case "standby":
-        return /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: color, strokeWidth: "2" });
-      case "normal":
-        return /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "6",
-            cy: "6",
-            r: hasBorder ? 4.5 : 5,
-            fill: color,
-            stroke: borderColor,
-            strokeWidth
-          }
-        );
-      case "caution":
-        return /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: hasBorder ? 1.5 : 1,
-            y: hasBorder ? 1.5 : 1,
-            width: hasBorder ? 9 : 10,
-            height: hasBorder ? 9 : 10,
-            fill: color,
-            stroke: borderColor,
-            strokeWidth
-          }
-        );
-      case "serious":
-        return /* @__PURE__ */ jsx(
-          "polygon",
-          {
-            points: "6,1 11,6 6,11 1,6",
-            fill: color,
-            stroke: borderColor,
-            strokeWidth
-          }
-        );
-      case "critical":
-        return /* @__PURE__ */ jsx(
-          "polygon",
-          {
-            points: "6,11 1,2 11,2",
-            fill: color,
-            stroke: borderColor,
-            strokeWidth
-          }
-        );
-      default:
-        return null;
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      viewBox: "0 0 12 12",
-      width: size,
-      height: size,
-      style: { filter: glowFilter },
-      children: renderShape()
-    }
-  );
+var StatusShape = ({ status, size, color, borderColor, glow = true }) => {
+	const hasBorder = !!borderColor;
+	const strokeWidth = hasBorder ? 1 : 0;
+	const glowFilter = glow && !hasBorder ? `drop-shadow(0 0 3px ${color})` : void 0;
+	const renderShape = () => {
+		switch (status) {
+			case "off": return /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: hasBorder ? 2.5 : 3,
+				fill: color,
+				stroke: borderColor,
+				strokeWidth
+			});
+			case "standby": return /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "3.5",
+				fill: "none",
+				stroke: color,
+				strokeWidth: "2"
+			});
+			case "normal": return /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: hasBorder ? 4.5 : 5,
+				fill: color,
+				stroke: borderColor,
+				strokeWidth
+			});
+			case "caution": return /* @__PURE__ */ jsx("rect", {
+				x: hasBorder ? 1.5 : 1,
+				y: hasBorder ? 1.5 : 1,
+				width: hasBorder ? 9 : 10,
+				height: hasBorder ? 9 : 10,
+				fill: color,
+				stroke: borderColor,
+				strokeWidth
+			});
+			case "serious": return /* @__PURE__ */ jsx("polygon", {
+				points: "6,1 11,6 6,11 1,6",
+				fill: color,
+				stroke: borderColor,
+				strokeWidth
+			});
+			case "critical": return /* @__PURE__ */ jsx("polygon", {
+				points: "6,11 1,2 11,2",
+				fill: color,
+				stroke: borderColor,
+				strokeWidth
+			});
+			default: return null;
+		}
+	};
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		width: size,
+		height: size,
+		style: { filter: glowFilter },
+		children: renderShape()
+	});
 };
-const HeaderIconWithStatus = memo(function HeaderIconWithStatus2({
-  icon,
-  size = 24,
-  status,
-  statusColor: statusColorProp,
-  isLightTheme: isLightThemeProp,
-  className,
-  style
-}) {
-  const { tokens, mode } = useTheme();
-  const isLightTheme = isLightThemeProp ?? mode === "light";
-  const statusColor = statusColorProp ?? tokens.colors.status[status] ?? "#a4abb6";
-  const borderColor = isLightTheme ? STATUS_BORDER_COLORS[status] : void 0;
-  const badgeSize = Math.max(7, Math.min(12, Math.round(size * 0.38)));
-  const transformOffset = "translate(-35%, -35%)";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "img",
-      "aria-label": `${icon} — status: ${status}`,
-      className,
-      style: {
-        position: "relative",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: size,
-        height: size,
-        flexShrink: 0,
-        color: statusColor,
-        ...style
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          AstroIcon,
-          {
-            name: icon,
-            size,
-            color: statusColor,
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              transform: transformOffset,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            },
-            children: /* @__PURE__ */ jsx(
-              StatusShape,
-              {
-                status,
-                size: badgeSize,
-                color: statusColor,
-                borderColor,
-                glow: !isLightTheme
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
+/**
+* HeaderIconWithStatus - Card/Chart header icon with status indicator
+*
+* Follows MonitoringIcon pattern exactly:
+* - Icon colored by status
+* - Status symbol at top-left with transform offset
+* - Glow in dark mode, border in light mode
+*
+* @example
+* ```tsx
+* <HeaderIconWithStatus
+*   icon="satellite-transmit"
+*   status="normal"
+*   size={24}
+* />
+* ```
+*/
+var HeaderIconWithStatus = memo(function HeaderIconWithStatus({ icon, size = 24, status, statusColor: statusColorProp, isLightTheme: isLightThemeProp, className, style }) {
+	const { tokens, mode } = useTheme();
+	const isLightTheme = isLightThemeProp ?? mode === "light";
+	const statusColor = statusColorProp ?? tokens.colors.status[status] ?? "#a4abb6";
+	const borderColor = isLightTheme ? STATUS_BORDER_COLORS[status] : void 0;
+	const badgeSize = Math.max(7, Math.min(12, Math.round(size * .38)));
+	const transformOffset = "translate(-35%, -35%)";
+	return /* @__PURE__ */ jsxs("div", {
+		role: "img",
+		"aria-label": `${icon} — status: ${status}`,
+		className,
+		style: {
+			position: "relative",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: size,
+			height: size,
+			flexShrink: 0,
+			color: statusColor,
+			...style
+		},
+		children: [/* @__PURE__ */ jsx(AstroIcon, {
+			name: icon,
+			size,
+			color: statusColor,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			style: {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				transform: transformOffset,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center"
+			},
+			children: /* @__PURE__ */ jsx(StatusShape, {
+				status,
+				size: badgeSize,
+				color: statusColor,
+				borderColor,
+				glow: !isLightTheme
+			})
+		})]
+	});
 });
-export {
-  HeaderIconWithStatus
-};
-//# sourceMappingURL=HeaderIconWithStatus.js.map
+//#endregion
+export { HeaderIconWithStatus, HeaderIconWithStatus as default };
+
+//# sourceMappingURL=HeaderIconWithStatus.js.map

package/dist/react/core/display/HeaderIconWithStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderIconWithStatus.js","sources":["../../../../src/react/core/display/HeaderIconWithStatus.tsx"],"sourcesContent":["/**\n * @zendir/ui - HeaderIconWithStatus Component\n * \n * Shared component for card/chart header icons with status indicator.\n * Follows MonitoringIcon pattern for Astro UX compliance.\n * \n * Features:\n * - Status indicator positioned at top-left with transform offset\n * - Glow effect in dark mode for visibility\n * - Border in light mode for WCAG AA compliance\n * - Theme-aware colors\n * - Consistent sizing across all usages\n */\n\nimport React, { memo } from 'react';\nimport { useTheme } from '../../theme';\nimport { type StatusLevel } from '../../utils';\nimport { AstroIcon, type AstroIconName } from './AstroIcon';\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// =============================================================================\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// HeaderIconWithStatus Component\n// =============================================================================\n\nexport interface HeaderIconWithStatusProps {\n  /** Astro icon name */\n  icon: AstroIconName | string;\n  /** Icon size in pixels */\n  size?: number;\n  /** Status level */\n  status: StatusLevel;\n  /** Custom status color (optional - defaults to theme status color) */\n  statusColor?: string;\n  /** Override light theme detection */\n  isLightTheme?: boolean;\n  /** Additional CSS class */\n  className?: string;\n  /** Additional inline styles */\n  style?: React.CSSProperties;\n}\n\n/**\n * HeaderIconWithStatus - Card/Chart header icon with status indicator\n * \n * Follows MonitoringIcon pattern exactly:\n * - Icon colored by status\n * - Status symbol at top-left with transform offset\n * - Glow in dark mode, border in light mode\n * \n * @example\n * ```tsx\n * <HeaderIconWithStatus\n *   icon=\"satellite-transmit\"\n *   status=\"normal\"\n *   size={24}\n * />\n * ```\n */\nexport const HeaderIconWithStatus = memo(function HeaderIconWithStatus({\n  icon,\n  size = 24,\n  status,\n  statusColor: statusColorProp,\n  isLightTheme: isLightThemeProp,\n  className,\n  style,\n}: HeaderIconWithStatusProps) {\n  const { tokens, mode } = useTheme();\n  \n  // Theme detection\n  const isLightTheme = isLightThemeProp ?? mode === 'light';\n  \n  // Status color from theme or prop\n  const statusColor = statusColorProp ?? tokens.colors.status[status] ?? '#a4abb6';\n  \n  // Border color for light theme (WCAG compliance)\n  const borderColor = isLightTheme ? STATUS_BORDER_COLORS[status] : undefined;\n  \n  // ═══════════════════════════════════════════════════════════════════════════\n  // SIZING CONTROLS - Adjust these to match MonitoringIcon proportions\n  // ═══════════════════════════════════════════════════════════════════════════\n  // Badge size: ~35% of icon size (same ratio as MonitoringIcon's 9px badge on 24px icon)\n  const badgeSize = Math.max(7, Math.min(12, Math.round(size * 0.38)));\n  \n  // Transform offset: translate(-35%, -35%) matches MonitoringIcon exactly\n  const transformOffset = 'translate(-35%, -35%)';\n  \n  return (\n    <div\n      role=\"img\"\n      aria-label={`${icon} — status: ${status}`}\n      className={className}\n      style={{\n        position: 'relative',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        width: size,\n        height: size,\n        flexShrink: 0,\n        color: statusColor,\n        ...style,\n      }}\n    >\n      {/* Icon - colored by status */}\n      <AstroIcon \n        name={icon as AstroIconName} \n        size={size} \n        color={statusColor}\n        aria-hidden=\"true\"\n      />\n      \n      {/* Status symbol - top-left corner with transform offset */}\n      <span\n        aria-hidden=\"true\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          transform: transformOffset,\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    </div>\n  );\n});\n\nexport default HeaderIconWithStatus;\n"],"names":["HeaderIconWithStatus"],"mappings":";;;;AAwBA,MAAM,uBAAoD;AAAA,EACxD,KAAK;AAAA,EACL,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,UAAU;AACZ;AAcA,MAAM,cAAc,CAAC,EAAE,QAAQ,MAAM,OAAO,aAAa,OAAO,WAA6B;AAC3F,QAAM,YAAY,CAAC,CAAC;AACpB,QAAM,cAAc,YAAY,IAAI;AACpC,QAAM,aAAa,QAAQ,CAAC,YAAY,uBAAuB,KAAK,MAAM;AAE1E,QAAM,cAAc,MAAM;AACxB,YAAQ,QAAA;AAAA,MACN,KAAK;AACH,eAAO,oBAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAG,YAAY,MAAM,GAAG,MAAM,OAAO,QAAQ,aAAa,aAA0B;AAAA,MACnH,KAAK;AACH,eAAO,oBAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,MAAK,QAAO,QAAQ,OAAO,aAAY,KAAI;AAAA,MAClF,KAAK;AACH,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAG,YAAY,MAAM;AAAA,YACrB,MAAM;AAAA,YACN,QAAQ;AAAA,YACR;AAAA,UAAA;AAAA,QAAA;AAAA,MAGN,KAAK;AACH,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAG,YAAY,MAAM;AAAA,YACrB,GAAG,YAAY,MAAM;AAAA,YACrB,OAAO,YAAY,IAAI;AAAA,YACvB,QAAQ,YAAY,IAAI;AAAA,YACxB,MAAM;AAAA,YACN,QAAQ;AAAA,YACR;AAAA,UAAA;AAAA,QAAA;AAAA,MAGN,KAAK;AACH,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAO;AAAA,YACP,MAAM;AAAA,YACN,QAAQ;AAAA,YACR;AAAA,UAAA;AAAA,QAAA;AAAA,MAGN,KAAK;AACH,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAO;AAAA,YACP,MAAM;AAAA,YACN,QAAQ;AAAA,YACR;AAAA,UAAA;AAAA,QAAA;AAAA,MAGN;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO,EAAE,QAAQ,WAAA;AAAA,MAEhB,UAAA,YAAA;AAAA,IAAY;AAAA,EAAA;AAGnB;AAwCO,MAAM,uBAAuB,KAAK,SAASA,sBAAqB;AAAA,EACrE;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,EAAE,QAAQ,KAAA,IAAS,SAAA;AAGzB,QAAM,eAAe,oBAAoB,SAAS;AAGlD,QAAM,cAAc,mBAAmB,OAAO,OAAO,OAAO,MAAM,KAAK;AAGvE,QAAM,cAAc,eAAe,qBAAqB,MAAM,IAAI;AAMlE,QAAM,YAAY,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,MAAM,OAAO,IAAI,CAAC,CAAC;AAGnE,QAAM,kBAAkB;AAExB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,GAAG,IAAI,cAAc,MAAM;AAAA,MACvC;AAAA,MACA,OAAO;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,MAIL,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA,OAAO;AAAA,YACP,eAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAId;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK;AAAA,cACL,MAAM;AAAA,cACN,WAAW;AAAA,cACX,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,YAAA;AAAA,YAGlB,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP;AAAA,gBACA,MAAM,CAAC;AAAA,cAAA;AAAA,YAAA;AAAA,UACT;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"HeaderIconWithStatus.js","names":[],"sources":["../../../../src/react/core/display/HeaderIconWithStatus.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - HeaderIconWithStatus Component\r\n *\r\n * Shared component for card/chart header icons with status indicator.\r\n * Follows MonitoringIcon pattern for Astro UX compliance.\r\n *\r\n * Features:\r\n * - Status indicator positioned at top-left with transform offset\r\n * - Glow effect in dark mode for visibility\r\n * - Border in light mode for WCAG AA compliance\r\n * - Theme-aware colors\r\n * - Consistent sizing across all usages\r\n */\r\n\r\nimport React, { memo } from \"react\";\r\nimport { useTheme } from \"../../theme\";\r\nimport { type StatusLevel } from \"../../utils\";\r\nimport { AstroIcon, type AstroIconName } from \"./AstroIcon\";\r\n\r\n// =============================================================================\r\n// Astro UX Status Border Colors - Required for light theme WCAG compliance\r\n// https://www.astrouxds.com/patterns/status-system/\r\n// =============================================================================\r\n\r\nconst STATUS_BORDER_COLORS: Record<StatusLevel, string> = {\r\n  off: \"#3c3e42\",\r\n  standby: \"#285766\",\r\n  normal: \"#005a00\",\r\n  caution: \"#645600\",\r\n  serious: \"#664618\",\r\n  critical: \"#661102\",\r\n};\r\n\r\n// =============================================================================\r\n// Status Shape SVG - Matches MonitoringIcon exactly\r\n// =============================================================================\r\n\r\ninterface StatusShapeProps {\r\n  status: StatusLevel;\r\n  size: number;\r\n  color: string;\r\n  borderColor?: string;\r\n  glow?: boolean;\r\n}\r\n\r\nconst StatusShape = ({\r\n  status,\r\n  size,\r\n  color,\r\n  borderColor,\r\n  glow = true,\r\n}: StatusShapeProps) => {\r\n  const hasBorder = !!borderColor;\r\n  const strokeWidth = hasBorder ? 1 : 0;\r\n  const glowFilter =\r\n    glow && !hasBorder ? `drop-shadow(0 0 3px ${color})` : undefined;\r\n\r\n  const renderShape = () => {\r\n    switch (status) {\r\n      case \"off\":\r\n        return (\r\n          <circle\r\n            cx=\"6\"\r\n            cy=\"6\"\r\n            r={hasBorder ? 2.5 : 3}\r\n            fill={color}\r\n            stroke={borderColor}\r\n            strokeWidth={strokeWidth}\r\n          />\r\n        );\r\n      case \"standby\":\r\n        return (\r\n          <circle\r\n            cx=\"6\"\r\n            cy=\"6\"\r\n            r=\"3.5\"\r\n            fill=\"none\"\r\n            stroke={color}\r\n            strokeWidth=\"2\"\r\n          />\r\n        );\r\n      case \"normal\":\r\n        return (\r\n          <circle\r\n            cx=\"6\"\r\n            cy=\"6\"\r\n            r={hasBorder ? 4.5 : 5}\r\n            fill={color}\r\n            stroke={borderColor}\r\n            strokeWidth={strokeWidth}\r\n          />\r\n        );\r\n      case \"caution\":\r\n        return (\r\n          <rect\r\n            x={hasBorder ? 1.5 : 1}\r\n            y={hasBorder ? 1.5 : 1}\r\n            width={hasBorder ? 9 : 10}\r\n            height={hasBorder ? 9 : 10}\r\n            fill={color}\r\n            stroke={borderColor}\r\n            strokeWidth={strokeWidth}\r\n          />\r\n        );\r\n      case \"serious\":\r\n        return (\r\n          <polygon\r\n            points=\"6,1 11,6 6,11 1,6\"\r\n            fill={color}\r\n            stroke={borderColor}\r\n            strokeWidth={strokeWidth}\r\n          />\r\n        );\r\n      case \"critical\":\r\n        return (\r\n          <polygon\r\n            points=\"6,11 1,2 11,2\"\r\n            fill={color}\r\n            stroke={borderColor}\r\n            strokeWidth={strokeWidth}\r\n          />\r\n        );\r\n      default:\r\n        return null;\r\n    }\r\n  };\r\n\r\n  return (\r\n    <svg\r\n      viewBox=\"0 0 12 12\"\r\n      width={size}\r\n      height={size}\r\n      style={{ filter: glowFilter }}\r\n    >\r\n      {renderShape()}\r\n    </svg>\r\n  );\r\n};\r\n\r\n// =============================================================================\r\n// HeaderIconWithStatus Component\r\n// =============================================================================\r\n\r\nexport interface HeaderIconWithStatusProps {\r\n  /** Astro icon name */\r\n  icon: AstroIconName | string;\r\n  /** Icon size in pixels */\r\n  size?: number;\r\n  /** Status level */\r\n  status: StatusLevel;\r\n  /** Custom status color (optional - defaults to theme status color) */\r\n  statusColor?: string;\r\n  /** Override light theme detection */\r\n  isLightTheme?: boolean;\r\n  /** Additional CSS class */\r\n  className?: string;\r\n  /** Additional inline styles */\r\n  style?: React.CSSProperties;\r\n}\r\n\r\n/**\r\n * HeaderIconWithStatus - Card/Chart header icon with status indicator\r\n *\r\n * Follows MonitoringIcon pattern exactly:\r\n * - Icon colored by status\r\n * - Status symbol at top-left with transform offset\r\n * - Glow in dark mode, border in light mode\r\n *\r\n * @example\r\n * ```tsx\r\n * <HeaderIconWithStatus\r\n *   icon=\"satellite-transmit\"\r\n *   status=\"normal\"\r\n *   size={24}\r\n * />\r\n * ```\r\n */\r\nexport const HeaderIconWithStatus = memo(function HeaderIconWithStatus({\r\n  icon,\r\n  size = 24,\r\n  status,\r\n  statusColor: statusColorProp,\r\n  isLightTheme: isLightThemeProp,\r\n  className,\r\n  style,\r\n}: HeaderIconWithStatusProps) {\r\n  const { tokens, mode } = useTheme();\r\n\r\n  // Theme detection\r\n  const isLightTheme = isLightThemeProp ?? mode === \"light\";\r\n\r\n  // Status color from theme or prop\r\n  const statusColor =\r\n    statusColorProp ?? tokens.colors.status[status] ?? \"#a4abb6\";\r\n\r\n  // Border color for light theme (WCAG compliance)\r\n  const borderColor = isLightTheme ? STATUS_BORDER_COLORS[status] : undefined;\r\n\r\n  // ═══════════════════════════════════════════════════════════════════════════\r\n  // SIZING CONTROLS - Adjust these to match MonitoringIcon proportions\r\n  // ═══════════════════════════════════════════════════════════════════════════\r\n  // Badge size: ~35% of icon size (same ratio as MonitoringIcon's 9px badge on 24px icon)\r\n  const badgeSize = Math.max(7, Math.min(12, Math.round(size * 0.38)));\r\n\r\n  // Transform offset: translate(-35%, -35%) matches MonitoringIcon exactly\r\n  const transformOffset = \"translate(-35%, -35%)\";\r\n\r\n  return (\r\n    <div\r\n      role=\"img\"\r\n      aria-label={`${icon} — status: ${status}`}\r\n      className={className}\r\n      style={{\r\n        position: \"relative\",\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"center\",\r\n        width: size,\r\n        height: size,\r\n        flexShrink: 0,\r\n        color: statusColor,\r\n        ...style,\r\n      }}\r\n    >\r\n      {/* Icon - colored by status */}\r\n      <AstroIcon\r\n        name={icon as AstroIconName}\r\n        size={size}\r\n        color={statusColor}\r\n        aria-hidden=\"true\"\r\n      />\r\n\r\n      {/* Status symbol - top-left corner with transform offset */}\r\n      <span\r\n        aria-hidden=\"true\"\r\n        style={{\r\n          position: \"absolute\",\r\n          top: 0,\r\n          left: 0,\r\n          transform: transformOffset,\r\n          display: \"flex\",\r\n          alignItems: \"center\",\r\n          justifyContent: \"center\",\r\n        }}\r\n      >\r\n        <StatusShape\r\n          status={status}\r\n          size={badgeSize}\r\n          color={statusColor}\r\n          borderColor={borderColor}\r\n          glow={!isLightTheme}\r\n        />\r\n      </span>\r\n    </div>\r\n  );\r\n});\r\n\r\nexport default HeaderIconWithStatus;\r\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,IAAM,uBAAoD;CACxD,KAAK;CACL,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACT,UAAU;AACZ;AAcA,IAAM,eAAe,EACnB,QACA,MACA,OACA,aACA,OAAO,WACe;CACtB,MAAM,YAAY,CAAC,CAAC;CACpB,MAAM,cAAc,YAAY,IAAI;CACpC,MAAM,aACJ,QAAQ,CAAC,YAAY,uBAAuB,MAAM,KAAK,KAAA;CAEzD,MAAM,oBAAoB;EACxB,QAAQ,QAAR;GACE,KAAK,OACH,OACE,oBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAG,YAAY,MAAM;IACrB,MAAM;IACN,QAAQ;IACK;GACd,CAAA;GAEL,KAAK,WACH,OACE,oBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAQ;IACR,aAAY;GACb,CAAA;GAEL,KAAK,UACH,OACE,oBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAG,YAAY,MAAM;IACrB,MAAM;IACN,QAAQ;IACK;GACd,CAAA;GAEL,KAAK,WACH,OACE,oBAAC,QAAD;IACE,GAAG,YAAY,MAAM;IACrB,GAAG,YAAY,MAAM;IACrB,OAAO,YAAY,IAAI;IACvB,QAAQ,YAAY,IAAI;IACxB,MAAM;IACN,QAAQ;IACK;GACd,CAAA;GAEL,KAAK,WACH,OACE,oBAAC,WAAD;IACE,QAAO;IACP,MAAM;IACN,QAAQ;IACK;GACd,CAAA;GAEL,KAAK,YACH,OACE,oBAAC,WAAD;IACE,QAAO;IACP,MAAM;IACN,QAAQ;IACK;GACd,CAAA;GAEL,SACE,OAAO;EACX;CACF;CAEA,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO,EAAE,QAAQ,WAAW;YAE3B,YAAY;CACV,CAAA;AAET;;;;;;;;;;;;;;;;;;AAwCA,IAAa,uBAAuB,KAAK,SAAS,qBAAqB,EACrE,MACA,OAAO,IACP,QACA,aAAa,iBACb,cAAc,kBACd,WACA,SAC4B;CAC5B,MAAM,EAAE,QAAQ,SAAS,SAAS;CAGlC,MAAM,eAAe,oBAAoB,SAAS;CAGlD,MAAM,cACJ,mBAAmB,OAAO,OAAO,OAAO,WAAW;CAGrD,MAAM,cAAc,eAAe,qBAAqB,UAAU,KAAA;CAMlE,MAAM,YAAY,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,KAAK,MAAM,OAAO,GAAI,CAAC,CAAC;CAGnE,MAAM,kBAAkB;CAExB,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAY,GAAG,KAAK,aAAa;EACtB;EACX,OAAO;GACL,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,OAAO;GACP,GAAG;EACL;YAdF,CAiBE,oBAAC,WAAD;GACE,MAAM;GACA;GACN,OAAO;GACP,eAAY;EACb,CAAA,GAGD,oBAAC,QAAD;GACE,eAAY;GACZ,OAAO;IACL,UAAU;IACV,KAAK;IACL,MAAM;IACN,WAAW;IACX,SAAS;IACT,YAAY;IACZ,gBAAgB;GAClB;aAEA,oBAAC,aAAD;IACU;IACR,MAAM;IACN,OAAO;IACM;IACb,MAAM,CAAC;GACR,CAAA;EACG,CAAA,CACH;;AAET,CAAC"}

package/dist/react/core/display/Icon.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { StatusLevel } from '../../utils';
-
-export type IconName = 'satellite' | 'satellite-transmit' | 'satellite-receive' | 'satellite-off' | 'antenna' | 'antenna-transmit' | 'antenna-receive' | 'antenna-off' | 'mission' | 'altitude' | 'solar' | 'thermal' | 'propulsion' | 'payload' | 'processor' | 'equipment' | 'netcom' | 'hardware' | 'orbit' | 'ground-station' | 'battery' | 'location' | 'rocket' | 'thermometer' | 'settings' | 'notifications' | 'notifications-off' | 'warning' | 'error' | 'info' | 'check' | 'close' | 'add' | 'remove' | 'edit' | 'delete' | 'search' | 'filter' | 'refresh' | 'sync' | 'download' | 'upload' | 'expand' | 'collapse' | 'fullscreen' | 'fullscreen-exit' | 'visibility' | 'visibility-off' | 'lock' | 'unlock' | 'arrow-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'menu' | 'more-vert' | 'more-horiz' | 'chart' | 'list' | 'grid' | 'timeline' | 'calendar' | 'clock' | 'play' | 'play-arrow' | 'pause' | 'stop' | 'skip-next' | 'skip-previous' | 'fast-forward' | 'fast-rewind' | 'record' | 'link' | 'link-off' | 'send' | 'message' | 'mail' | 'photo-camera' | 'images' | 'error-outline';
+export type IconName = "satellite" | "satellite-transmit" | "satellite-receive" | "satellite-off" | "antenna" | "antenna-transmit" | "antenna-receive" | "antenna-off" | "mission" | "altitude" | "solar" | "thermal" | "propulsion" | "payload" | "processor" | "equipment" | "netcom" | "hardware" | "orbit" | "ground-station" | "battery" | "location" | "rocket" | "thermometer" | "settings" | "notifications" | "notifications-off" | "warning" | "error" | "info" | "check" | "close" | "add" | "remove" | "edit" | "delete" | "search" | "filter" | "refresh" | "sync" | "download" | "upload" | "expand" | "collapse" | "fullscreen" | "fullscreen-exit" | "visibility" | "visibility-off" | "lock" | "unlock" | "arrow-up" | "arrow-down" | "arrow-left" | "arrow-right" | "chevron-up" | "chevron-down" | "chevron-left" | "chevron-right" | "menu" | "more-vert" | "more-horiz" | "chart" | "list" | "grid" | "timeline" | "calendar" | "clock" | "play" | "play-arrow" | "pause" | "stop" | "skip-next" | "skip-previous" | "fast-forward" | "fast-rewind" | "record" | "link" | "link-off" | "send" | "message" | "mail" | "photo-camera" | "images" | "error-outline";
 export interface IconProps {
     /** Icon name from the library */
     name: IconName;
@@ -14,7 +13,7 @@ export interface IconProps {
     /** Custom className */
     className?: string;
     /** Accessibility label */
-    'aria-label'?: string;
+    "aria-label"?: string;
     /** Click handler */
     onClick?: () => void;
     /** Custom style */