@zendir/ui 0.5.0 → 0.6.0

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

@@ -1,375 +1,422 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames } from "../../utils/index.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"
-  }
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/display/GlassCard.tsx
+/**
+* @zendir/ui - GlassCard Component
+*
+* Glassmorphic card component with transparent blur backgrounds,
+* gradient overlays, and Zendir brand color accent system.
+*
+* Inspired by AstroUXDS radar chart styling with modern glassmorphism.
+*
+* @example
+* ```tsx
+* <GlassCard title="Radar Chart 001" colorOverlay="electric">
+*   <RadarChart data={data} />
+* </GlassCard>
+*
+* <GlassCard title="System Status" colorOverlay="purple" accentPosition="top">
+*   <StatusContent />
+* </GlassCard>
+* ```
+*/
+var GLASS_COLOR_OVERLAYS = {
+	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: {
+		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)"
+	},
+	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)"
+	},
+	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)"
+	},
+	none: {
+		gradient: "none",
+		accent: "transparent",
+		border: "rgba(255, 255, 255, 0.1)",
+		glow: "transparent"
+	}
 };
+/**
+* GlassCard - Glassmorphic card with Zendir brand styling
+*
+* Features:
+* - Transparent blur background
+* - Gradient color overlays
+* - Accent lines with glow effects
+* - Legend support for charts
+* - Customizable via props or custom overlay object
+*/
+/**
+* Create overlay from accent color hex
+*/
 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 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
-            }
-          )
-        ] })
-      ]
-    }
-  );
+var GlassCard = memo(function GlassCard({ title, subtitle, colorOverlay = "cyan", customOverlay, accentColor, accentPosition = "top", accentStyle = "gradient", icon, actions, legend, status, blur = 12, backgroundOpacity = .85, glowOnHover = true, children, className = "", style, onClick, fullHeight = false, padding = "md" }) {
+	const { tokens, mode, theme } = useTheme();
+	const isDark = mode === "dark";
+	const isTransparent = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const showAccentStyling = theme === "transparent-bold" || theme === "transparent-minimal" || !isTransparent;
+	const overlay = accentColor ? createOverlayFromColor(accentColor) : customOverlay || GLASS_COLOR_OVERLAYS[isTransparent && colorOverlay === "cyan" ? "purple" : colorOverlay];
+	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 borderProp = {
+			top: "borderTop",
+			left: "borderLeft",
+			right: "borderRight",
+			bottom: "borderBottom",
+			none: ""
+		}[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",
+			background: cardBackground,
+			backdropFilter: isTransparent ? `blur(${blur}px)` : "none",
+			WebkitBackdropFilter: isTransparent ? `blur(${blur}px)` : "none",
+			border: `1px solid ${baseBorderColor}`,
+			...getAccentStyles(),
+			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: tokens.layout?.card?.heading?.titleFontSize ?? "1.125rem",
+										fontWeight: tokens.layout?.card?.heading?.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
+//#endregion
+export { GLASS_COLOR_OVERLAYS, GlassCard, GlassCard as default };
+
+//# sourceMappingURL=GlassCard.js.map