@zendir/ui 0.1.0

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

@@ -0,0 +1,129 @@
+import { default as React } from 'react';
+import { StatusLevel } from '../utils';
+
+export declare const GLASS_COLOR_OVERLAYS: {
+    readonly electric: {
+        readonly gradient: "linear-gradient(135deg, rgba(62, 60, 255, 0.15) 0%, rgba(62, 60, 255, 0.05) 100%)";
+        readonly accent: "#3E3CFF";
+        readonly border: "rgba(62, 60, 255, 0.3)";
+        readonly glow: "rgba(62, 60, 255, 0.4)";
+    };
+    readonly purple: {
+        readonly gradient: "linear-gradient(135deg, rgba(157, 112, 255, 0.15) 0%, rgba(157, 112, 255, 0.05) 100%)";
+        readonly accent: "#9D70FF";
+        readonly border: "rgba(157, 112, 255, 0.3)";
+        readonly glow: "rgba(157, 112, 255, 0.4)";
+    };
+    readonly prussianBlue: {
+        readonly gradient: "linear-gradient(135deg, rgba(27, 45, 160, 0.2) 0%, rgba(27, 45, 160, 0.08) 100%)";
+        readonly accent: "#1B2DA0";
+        readonly border: "rgba(27, 45, 160, 0.4)";
+        readonly glow: "rgba(27, 45, 160, 0.5)";
+    };
+    readonly cyan: {
+        readonly gradient: "linear-gradient(135deg, rgba(0, 212, 255, 0.12) 0%, rgba(0, 180, 220, 0.04) 100%)";
+        readonly accent: "#00D4FF";
+        readonly border: "rgba(0, 212, 255, 0.35)";
+        readonly glow: "rgba(0, 212, 255, 0.5)";
+    };
+    readonly teal: {
+        readonly gradient: "linear-gradient(135deg, rgba(45, 204, 255, 0.12) 0%, rgba(45, 204, 255, 0.04) 100%)";
+        readonly accent: "#2DCCFF";
+        readonly border: "rgba(45, 204, 255, 0.35)";
+        readonly glow: "rgba(45, 204, 255, 0.5)";
+    };
+    readonly dark: {
+        readonly gradient: "linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%)";
+        readonly accent: "#1a1a2e";
+        readonly border: "rgba(255, 255, 255, 0.1)";
+        readonly glow: "rgba(0, 0, 0, 0.3)";
+    };
+    readonly light: {
+        readonly gradient: "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)";
+        readonly accent: "#ffffff";
+        readonly border: "rgba(255, 255, 255, 0.25)";
+        readonly glow: "rgba(255, 255, 255, 0.3)";
+    };
+    readonly white: {
+        readonly gradient: "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)";
+        readonly accent: "#ffffff";
+        readonly border: "rgba(255, 255, 255, 0.3)";
+        readonly glow: "rgba(255, 255, 255, 0.4)";
+    };
+    readonly electricLight: {
+        readonly gradient: "linear-gradient(135deg, rgba(107, 105, 255, 0.15) 0%, rgba(107, 105, 255, 0.05) 100%)";
+        readonly accent: "#6B69FF";
+        readonly border: "rgba(107, 105, 255, 0.3)";
+        readonly glow: "rgba(107, 105, 255, 0.4)";
+    };
+    readonly purpleLight: {
+        readonly gradient: "linear-gradient(135deg, rgba(180, 141, 255, 0.15) 0%, rgba(180, 141, 255, 0.05) 100%)";
+        readonly accent: "#B48DFF";
+        readonly border: "rgba(180, 141, 255, 0.3)";
+        readonly glow: "rgba(180, 141, 255, 0.4)";
+    };
+    readonly none: {
+        readonly gradient: "none";
+        readonly accent: "transparent";
+        readonly border: "rgba(255, 255, 255, 0.1)";
+        readonly glow: "transparent";
+    };
+};
+export type GlassColorOverlay = keyof typeof GLASS_COLOR_OVERLAYS;
+export type GlassAccentPosition = 'top' | 'left' | 'right' | 'bottom' | 'none';
+export interface GlassCardProps {
+    /** Card title with optional icon */
+    title?: React.ReactNode;
+    /** Subtitle text */
+    subtitle?: React.ReactNode;
+    /** Color overlay from Zendir brand palette */
+    colorOverlay?: GlassColorOverlay;
+    /** Custom color overlay (hex or rgba) */
+    customOverlay?: {
+        gradient: string;
+        accent: string;
+        border: string;
+        glow?: string;
+    };
+    /**
+     * Accent color (hex) - auto-generates overlay from this color
+     * Overrides colorOverlay if provided
+     * Can be used with CardAccentProvider: accentColor={getAccentColor(title)}
+     */
+    accentColor?: string;
+    /** Position of the accent line/glow */
+    accentPosition?: GlassAccentPosition;
+    /** Accent line style */
+    accentStyle?: 'solid' | 'gradient' | 'glow' | 'dots';
+    /** Header icon (rendered before title) */
+    icon?: React.ReactNode;
+    /** Header right actions (legend, buttons, etc.) */
+    actions?: React.ReactNode;
+    /** Legend items to display in header */
+    legend?: Array<{
+        label: string;
+        color: string;
+    }>;
+    /** Status indicator */
+    status?: StatusLevel;
+    /** Blur intensity (0-20) */
+    blur?: number;
+    /** Background opacity (0-1) */
+    backgroundOpacity?: number;
+    /** Enable glow effect on hover */
+    glowOnHover?: boolean;
+    /** Children content */
+    children: React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Click handler */
+    onClick?: () => void;
+    /** Full height mode */
+    fullHeight?: boolean;
+    /** Padding size */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+export declare const GlassCard: React.NamedExoticComponent<GlassCardProps>;
+export default GlassCard;

package/dist/react/core/GlassCard.js

@@ -0,0 +1,375 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { classNames } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const GLASS_COLOR_OVERLAYS = {
+  // Core brand colors
+  electric: {
+    gradient: "linear-gradient(135deg, rgba(62, 60, 255, 0.15) 0%, rgba(62, 60, 255, 0.05) 100%)",
+    accent: "#3E3CFF",
+    border: "rgba(62, 60, 255, 0.3)",
+    glow: "rgba(62, 60, 255, 0.4)"
+  },
+  purple: {
+    gradient: "linear-gradient(135deg, rgba(157, 112, 255, 0.15) 0%, rgba(157, 112, 255, 0.05) 100%)",
+    accent: "#9D70FF",
+    border: "rgba(157, 112, 255, 0.3)",
+    glow: "rgba(157, 112, 255, 0.4)"
+  },
+  prussianBlue: {
+    gradient: "linear-gradient(135deg, rgba(27, 45, 160, 0.2) 0%, rgba(27, 45, 160, 0.08) 100%)",
+    accent: "#1B2DA0",
+    border: "rgba(27, 45, 160, 0.4)",
+    glow: "rgba(27, 45, 160, 0.5)"
+  },
+  // Cyan/Teal (matching the reference image style)
+  cyan: {
+    gradient: "linear-gradient(135deg, rgba(0, 212, 255, 0.12) 0%, rgba(0, 180, 220, 0.04) 100%)",
+    accent: "#00D4FF",
+    border: "rgba(0, 212, 255, 0.35)",
+    glow: "rgba(0, 212, 255, 0.5)"
+  },
+  teal: {
+    gradient: "linear-gradient(135deg, rgba(45, 204, 255, 0.12) 0%, rgba(45, 204, 255, 0.04) 100%)",
+    accent: "#2DCCFF",
+    border: "rgba(45, 204, 255, 0.35)",
+    glow: "rgba(45, 204, 255, 0.5)"
+  },
+  // Neutral options
+  dark: {
+    gradient: "linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%)",
+    accent: "#1a1a2e",
+    border: "rgba(255, 255, 255, 0.1)",
+    glow: "rgba(0, 0, 0, 0.3)"
+  },
+  light: {
+    gradient: "linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%)",
+    accent: "#ffffff",
+    border: "rgba(255, 255, 255, 0.25)",
+    glow: "rgba(255, 255, 255, 0.3)"
+  },
+  white: {
+    gradient: "linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%)",
+    accent: "#ffffff",
+    border: "rgba(255, 255, 255, 0.3)",
+    glow: "rgba(255, 255, 255, 0.4)"
+  },
+  // Additional shades
+  electricLight: {
+    gradient: "linear-gradient(135deg, rgba(107, 105, 255, 0.15) 0%, rgba(107, 105, 255, 0.05) 100%)",
+    accent: "#6B69FF",
+    border: "rgba(107, 105, 255, 0.3)",
+    glow: "rgba(107, 105, 255, 0.4)"
+  },
+  purpleLight: {
+    gradient: "linear-gradient(135deg, rgba(180, 141, 255, 0.15) 0%, rgba(180, 141, 255, 0.05) 100%)",
+    accent: "#B48DFF",
+    border: "rgba(180, 141, 255, 0.3)",
+    glow: "rgba(180, 141, 255, 0.4)"
+  },
+  // No overlay (transparent)
+  none: {
+    gradient: "none",
+    accent: "transparent",
+    border: "rgba(255, 255, 255, 0.1)",
+    glow: "transparent"
+  }
+};
+function createOverlayFromColor(color) {
+  const hex = color.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return {
+    gradient: `linear-gradient(135deg, rgba(${r}, ${g}, ${b}, 0.15) 0%, rgba(${r}, ${g}, ${b}, 0.05) 100%)`,
+    accent: color,
+    border: `rgba(${r}, ${g}, ${b}, 0.35)`,
+    glow: `rgba(${r}, ${g}, ${b}, 0.5)`
+  };
+}
+const GlassCard = memo(function GlassCard2({
+  title,
+  subtitle,
+  colorOverlay = "cyan",
+  customOverlay,
+  accentColor,
+  accentPosition = "top",
+  accentStyle = "gradient",
+  icon,
+  actions,
+  legend,
+  status,
+  blur = 12,
+  backgroundOpacity = 0.85,
+  glowOnHover = true,
+  children,
+  className = "",
+  style,
+  onClick,
+  fullHeight = false,
+  padding = "md"
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const { tokens, mode, theme } = useTheme();
+  const isDark = mode === "dark";
+  const isTransparent = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const isBoldVariant = theme === "transparent-bold";
+  const isMinimalVariant = theme === "transparent-minimal";
+  const showAccentStyling = isBoldVariant || isMinimalVariant || !isTransparent;
+  const effectiveColorOverlay = isTransparent && colorOverlay === "cyan" ? "purple" : colorOverlay;
+  const overlay = accentColor ? createOverlayFromColor(accentColor) : customOverlay || GLASS_COLOR_OVERLAYS[effectiveColorOverlay];
+  const effectiveOverlay = mode === "light" && colorOverlay === "white" && !accentColor && !customOverlay ? GLASS_COLOR_OVERLAYS.dark : overlay;
+  const cardBackground = isDark ? `rgba(15, 20, 35, ${backgroundOpacity})` : `rgba(255, 255, 255, ${backgroundOpacity})`;
+  const baseBorderColor = isDark ? effectiveOverlay.border : `rgba(100, 116, 139, 0.25)`;
+  const paddingConfig = {
+    none: "0",
+    sm: tokens.spacing.sm,
+    md: tokens.spacing.md,
+    lg: tokens.spacing.lg
+  };
+  const isInteractive = !!onClick;
+  const getAccentStyles = () => {
+    if (isTransparent && !showAccentStyling) {
+      return {};
+    }
+    if (accentPosition === "none") return {};
+    const accentColorValue = effectiveOverlay.accent;
+    const glowColor = effectiveOverlay.glow || accentColorValue;
+    const baseAccentStyle = {};
+    const positions = {
+      top: "borderTop",
+      left: "borderLeft",
+      right: "borderRight",
+      bottom: "borderBottom",
+      none: ""
+    };
+    const borderProp = positions[accentPosition];
+    if (accentStyle === "solid") {
+      baseAccentStyle[borderProp] = `2px solid ${accentColorValue}`;
+    } else if (accentStyle === "gradient" || accentStyle === "glow") {
+      baseAccentStyle[borderProp] = `2px solid ${accentColorValue}`;
+      if (accentStyle === "glow") {
+        baseAccentStyle.boxShadow = `0 -2px 20px ${glowColor}, 0 -1px 8px ${glowColor}`;
+      }
+    } else if (accentStyle === "dots") {
+      baseAccentStyle[borderProp] = `2px dotted ${accentColorValue}`;
+    }
+    return baseAccentStyle;
+  };
+  const statusColor = status ? tokens.colors.status[status] : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("zendir-glass-card", `zendir-glass-card--${colorOverlay}`, className),
+      onClick,
+      role: isInteractive ? "button" : void 0,
+      tabIndex: isInteractive ? 0 : void 0,
+      onKeyDown: onClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      } : void 0,
+      style: {
+        position: "relative",
+        borderRadius: tokens.borderRadius.lg,
+        overflow: "hidden",
+        height: fullHeight ? "100%" : "auto",
+        display: "flex",
+        flexDirection: "column",
+        cursor: isInteractive ? "pointer" : "default",
+        // Glassmorphic base (theme-aware)
+        background: cardBackground,
+        backdropFilter: isTransparent ? `blur(${blur}px)` : "none",
+        WebkitBackdropFilter: isTransparent ? `blur(${blur}px)` : "none",
+        // Border with color tint (theme-aware)
+        border: `1px solid ${baseBorderColor}`,
+        // Accent positioning
+        ...getAccentStyles(),
+        // Hover glow effect
+        transition: "all 0.3s ease-out",
+        boxShadow: glowOnHover ? "none" : void 0,
+        ...style
+      },
+      onMouseEnter: (e) => {
+        if (glowOnHover && effectiveOverlay.glow) {
+          e.currentTarget.style.boxShadow = `0 0 30px ${effectiveOverlay.glow}, 0 4px 20px rgba(0,0,0,0.3)`;
+        }
+      },
+      onMouseLeave: (e) => {
+        if (glowOnHover) {
+          e.currentTarget.style.boxShadow = "none";
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: effectiveOverlay.gradient,
+              pointerEvents: "none",
+              zIndex: 0
+            }
+          }
+        ),
+        showAccentStyling && accentPosition === "top" && accentStyle === "glow" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: "10%",
+              right: "10%",
+              height: "2px",
+              background: `linear-gradient(90deg, transparent, ${effectiveOverlay.accent}, transparent)`,
+              boxShadow: `0 0 15px ${effectiveOverlay.glow}, 0 0 30px ${effectiveOverlay.glow}`,
+              zIndex: 1
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative", zIndex: 1, display: "flex", flexDirection: "column", flex: 1 }, children: [
+          (title || actions || legend) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: tokens.spacing.md,
+                padding: `${paddingConfig[padding]} ${paddingConfig[padding]} 0`,
+                marginBottom: tokens.spacing.sm
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm }, children: [
+                  icon && /* @__PURE__ */ jsx("span", { style: { color: effectiveOverlay.accent, display: "flex", alignItems: "center" }, children: icon }),
+                  status && statusColor && (() => {
+                    const s = 10;
+                    const h = s / 2;
+                    const glow = `drop-shadow(0 0 4px ${statusColor})`;
+                    switch (status) {
+                      case "critical":
+                        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, style: { flexShrink: 0, filter: glow }, children: /* @__PURE__ */ jsx("polygon", { points: `${h},${s} 0,0 ${s},0`, fill: statusColor }) });
+                      case "serious":
+                        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, style: { flexShrink: 0, filter: glow }, children: /* @__PURE__ */ jsx("polygon", { points: `${h},0 ${s},${h} ${h},${s} 0,${h}`, fill: statusColor }) });
+                      case "caution":
+                        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, style: { flexShrink: 0, filter: glow }, children: /* @__PURE__ */ jsx("rect", { width: s, height: s, fill: statusColor }) });
+                      case "standby":
+                        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: "0 0 12 12", style: { flexShrink: 0, filter: glow }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: statusColor, strokeWidth: "2" }) });
+                      case "off":
+                        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: "0 0 12 12", style: { flexShrink: 0, filter: glow }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3", fill: statusColor }) });
+                      default:
+                        return /* @__PURE__ */ jsx("svg", { width: s, height: s, viewBox: `0 0 ${s} ${s}`, style: { flexShrink: 0, filter: glow }, children: /* @__PURE__ */ jsx("circle", { cx: h, cy: h, r: h, fill: statusColor }) });
+                    }
+                  })(),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    title && /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        style: {
+                          margin: 0,
+                          fontSize: ((_c = (_b = (_a = tokens.layout) == null ? void 0 : _a.card) == null ? void 0 : _b.heading) == null ? void 0 : _c.titleFontSize) ?? "1.125rem",
+                          fontWeight: ((_f = (_e = (_d = tokens.layout) == null ? void 0 : _d.card) == null ? void 0 : _e.heading) == null ? void 0 : _f.titleFontWeight) ?? 500,
+                          color: effectiveOverlay.accent,
+                          letterSpacing: "0.5px",
+                          textShadow: `0 0 20px ${effectiveOverlay.glow}`
+                        },
+                        children: title
+                      }
+                    ),
+                    subtitle && /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        style: {
+                          margin: `${tokens.spacing.xs} 0 0`,
+                          fontSize: tokens.typography.body[3].fontSize,
+                          color: tokens.colors.text.secondary
+                        },
+                        children: subtitle
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.md }, children: [
+                  legend && legend.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.md }, children: legend.map((item, idx) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: tokens.spacing.xs
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              width: "8px",
+                              height: "8px",
+                              borderRadius: "2px",
+                              backgroundColor: item.color
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              fontSize: tokens.typography.body[3].fontSize,
+                              color: tokens.colors.text.secondary
+                            },
+                            children: item.label
+                          }
+                        )
+                      ]
+                    },
+                    idx
+                  )) }),
+                  actions && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: tokens.spacing.xs }, children: actions })
+                ] })
+              ]
+            }
+          ),
+          showAccentStyling && accentPosition === "top" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                padding: `0 ${paddingConfig[padding]}`,
+                marginBottom: tokens.spacing.sm
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    height: "2px",
+                    background: `linear-gradient(90deg, ${effectiveOverlay.accent} 0%, ${effectiveOverlay.accent}60 70%, ${effectiveOverlay.accent}20 100%)`,
+                    boxShadow: `0 0 6px ${effectiveOverlay.accent}40`
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                flex: 1,
+                padding: title ? `0 ${paddingConfig[padding]} ${paddingConfig[padding]}` : paddingConfig[padding]
+              },
+              children
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+export {
+  GLASS_COLOR_OVERLAYS,
+  GlassCard
+};
+//# sourceMappingURL=GlassCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GlassCard.js","sources":["../../../src/react/core/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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"}

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

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+import { StatusLevel } from '../utils';
+import { AstroIconName } from './AstroIcon';
+
+export interface HeaderIconWithStatusProps {
+    /** Astro icon name */
+    icon: AstroIconName | string;
+    /** Icon size in pixels */
+    size?: number;
+    /** Status level */
+    status: StatusLevel;
+    /** Custom status color (optional - defaults to theme status color) */
+    statusColor?: string;
+    /** Override light theme detection */
+    isLightTheme?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * 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}
+ * />
+ * ```
+ */
+export declare const HeaderIconWithStatus: React.NamedExoticComponent<HeaderIconWithStatusProps>;
+export default HeaderIconWithStatus;