@zendir/ui 0.4.1 → 0.6.0

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

@@ -1,678 +1,650 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import React, { memo, useCallback } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { addAlpha, classNames } from "../../utils/index.js";
+import { useBreakpoint } from "../layout/useBreakpoint.js";
 import { AstroIcon } from "./AstroIcon.js";
 import { HeaderIconWithStatus } from "./HeaderIconWithStatus.js";
 import { CardHeader } from "./CardHeader.js";
-import { useBreakpoint } from "../layout/useBreakpoint.js";
-const STATUS_COLORS = {
-  off: "#a4abb6",
-  standby: "#2dccff",
-  normal: "#56f000",
-  caution: "#fce83a",
-  serious: "#ffb302",
-  critical: "#ff3838"
-};
-const STATUS_DESCRIPTIONS = {
-  off: "Off, unavailable, disabled",
-  standby: "Standby, available, enabled",
-  normal: "Normal, ok, satisfactory",
-  caution: "Caution, warning, unstable",
-  serious: "Serious, error, needs attention",
-  critical: "Critical, emergency, urgent"
+import React, { memo, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/display/Container.tsx
+/**
+* @zendir/ui - Container/Card Component
+*
+* Container/Card wrapper following Astro UX Design System.
+* Automatically switches to glassmorphic styling when transparent themes are active.
+*
+* Transparent themes (transparent, transparent-bold):
+* - Glassmorphic panels with blur effect
+* - Colored top border accent
+* - Hover glow effect (like GlassCard)
+* - transparent-bold has 2px top border
+*
+* @example
+* ```tsx
+* <Container>Simple container</Container>
+* <Container title="Spacecraft Status" status="normal">Content</Container>
+* <Container title="Power System" icon="solar" iconStatus="normal">With status</Container>
+* <Container title="Custom Color" icon="thermal" iconColor="#FF6B6B">Custom color</Container>
+* ```
+*/
+/** Status descriptions for tooltips (default synonyms from AstroUXDS) */
+var STATUS_DESCRIPTIONS = {
+	off: "Off, unavailable, disabled",
+	standby: "Standby, available, enabled",
+	normal: "Normal, ok, satisfactory",
+	caution: "Caution, warning, unstable",
+	serious: "Serious, error, needs attention",
+	critical: "Critical, emergency, urgent"
 };
-function IconWithStatusTooltip({
-  icon,
-  iconColor,
-  iconStatus,
-  statusMessage,
-  iconSize = 20
-}) {
-  const [isHovered, setIsHovered] = React.useState(false);
-  const color = iconStatus ? STATUS_COLORS[iconStatus] : iconColor;
-  const defaultMessage = iconStatus ? STATUS_DESCRIPTIONS[iconStatus] : "";
-  const tooltipText = statusMessage || defaultMessage;
-  const statusLabel = iconStatus ? iconStatus.charAt(0).toUpperCase() + iconStatus.slice(1) : "";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "relative",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0,
-        cursor: iconStatus ? "help" : "default"
-      },
-      onMouseEnter: () => iconStatus && setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      children: [
-        iconStatus ? /* @__PURE__ */ jsx(
-          HeaderIconWithStatus,
-          {
-            icon,
-            status: iconStatus,
-            size: iconSize,
-            statusColor: iconColor
-          }
-        ) : /* @__PURE__ */ jsx(
-          AstroIcon,
-          {
-            name: icon,
-            size: iconSize,
-            color: iconColor
-          }
-        ),
-        iconStatus && isHovered && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: "calc(100% + 12px)",
-              left: "50%",
-              transform: "translateX(-50%)",
-              padding: "8px 12px",
-              backgroundColor: "rgba(10, 15, 25, 0.95)",
-              border: `1px solid ${color}`,
-              borderRadius: "4px",
-              boxShadow: `0 0 12px ${color}40, 0 4px 12px rgba(0,0,0,0.4)`,
-              zIndex: 1e3,
-              whiteSpace: "nowrap",
-              pointerEvents: "none",
-              minWidth: "150px"
-            },
-            children: [
-              /* @__PURE__ */ jsx("div", { style: {
-                fontSize: "0.6875rem",
-                // 11px in rem 
-                fontWeight: 500,
-                // AstroUXDS medium for labels
-                color,
-                marginBottom: "4px",
-                textTransform: "uppercase",
-                letterSpacing: "0.5px"
-              }, children: statusLabel }),
-              /* @__PURE__ */ jsx("div", { style: {
-                fontSize: "0.75rem",
-                // 12px in rem
-                color: "rgba(255,255,255,0.9)",
-                lineHeight: 1.4
-              }, children: tooltipText }),
-              /* @__PURE__ */ jsx("div", { style: {
-                position: "absolute",
-                bottom: "-6px",
-                left: "50%",
-                transform: "translateX(-50%) rotate(45deg)",
-                width: "10px",
-                height: "10px",
-                backgroundColor: "rgba(10, 15, 25, 0.95)",
-                borderRight: `1px solid ${color}`,
-                borderBottom: `1px solid ${color}`
-              } })
-            ]
-          }
-        )
-      ]
-    }
-  );
+/**
+* Icon wrapper with status tooltip - triggers tooltip on hover over entire icon area
+*/
+function IconWithStatusTooltip({ icon, iconColor, iconStatus, statusMessage, iconSize = 20 }) {
+	const [isHovered, setIsHovered] = React.useState(false);
+	const { tokens } = useTheme();
+	const color = iconStatus ? tokens.colors.status[iconStatus] : iconColor;
+	const defaultMessage = iconStatus ? STATUS_DESCRIPTIONS[iconStatus] : "";
+	const tooltipText = statusMessage || defaultMessage;
+	const statusLabel = iconStatus ? iconStatus.charAt(0).toUpperCase() + iconStatus.slice(1) : "";
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "relative",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flexShrink: 0,
+			cursor: iconStatus ? "help" : "default"
+		},
+		onMouseEnter: () => iconStatus && setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
+		children: [iconStatus ? /* @__PURE__ */ jsx(HeaderIconWithStatus, {
+			icon,
+			status: iconStatus,
+			size: iconSize,
+			statusColor: iconColor
+		}) : /* @__PURE__ */ jsx(AstroIcon, {
+			name: icon,
+			size: iconSize,
+			color: iconColor
+		}), iconStatus && isHovered && /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "absolute",
+				bottom: "calc(100% + 12px)",
+				left: "50%",
+				transform: "translateX(-50%)",
+				padding: "8px 12px",
+				backgroundColor: "rgba(10, 15, 25, 0.95)",
+				border: `1px solid ${color}`,
+				borderRadius: "4px",
+				boxShadow: `0 0 12px ${color}40, 0 4px 12px rgba(0,0,0,0.4)`,
+				zIndex: 1e3,
+				whiteSpace: "nowrap",
+				pointerEvents: "none",
+				minWidth: "150px"
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "0.6875rem",
+						fontWeight: 500,
+						color,
+						marginBottom: "4px",
+						textTransform: "uppercase",
+						letterSpacing: "0.5px"
+					},
+					children: statusLabel
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "0.75rem",
+						color: "rgba(255,255,255,0.9)",
+						lineHeight: 1.4
+					},
+					children: tooltipText
+				}),
+				/* @__PURE__ */ jsx("div", { style: {
+					position: "absolute",
+					bottom: "-6px",
+					left: "50%",
+					transform: "translateX(-50%) rotate(45deg)",
+					width: "10px",
+					height: "10px",
+					backgroundColor: "rgba(10, 15, 25, 0.95)",
+					borderRight: `1px solid ${color}`,
+					borderBottom: `1px solid ${color}`
+				} })
+			]
+		})]
+	});
 }
-function StatusSymbol({
-  status,
-  size = 8,
-  message,
-  showTooltip = false
-}) {
-  const [isHovered, setIsHovered] = React.useState(false);
-  const color = STATUS_COLORS[status];
-  const defaultMessage = STATUS_DESCRIPTIONS[status];
-  const tooltipText = message || defaultMessage;
-  const statusLabel = status.charAt(0).toUpperCase() + status.slice(1);
-  const renderShape = () => {
-    const h = size / 2;
-    const glow = `drop-shadow(0 0 3px ${color})`;
-    switch (status) {
-      case "critical":
-        return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, style: { filter: glow }, children: /* @__PURE__ */ jsx("polygon", { points: `${h},${size} 0,0 ${size},0`, fill: color }) });
-      case "serious":
-        return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, style: { filter: glow }, children: /* @__PURE__ */ jsx("polygon", { points: `${h},0 ${size},${h} ${h},${size} 0,${h}`, fill: color }) });
-      case "caution":
-        return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, style: { filter: glow }, children: /* @__PURE__ */ jsx("rect", { width: size, height: size, fill: color }) });
-      case "normal":
-        return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, style: { filter: glow }, children: /* @__PURE__ */ jsx("circle", { cx: h, cy: h, r: h, fill: color }) });
-      case "standby":
-        return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 12 12", style: { filter: glow }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: color, strokeWidth: "2" }) });
-      case "off":
-      default:
-        return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 12 12", style: { filter: glow }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3", fill: color }) });
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "relative",
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: showTooltip ? "help" : "default"
-      },
-      onMouseEnter: () => showTooltip && setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      children: [
-        renderShape(),
-        showTooltip && isHovered && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: "calc(100% + 8px)",
-              left: "50%",
-              transform: "translateX(-50%)",
-              padding: "8px 12px",
-              backgroundColor: "rgba(10, 15, 25, 0.95)",
-              border: `1px solid ${color}`,
-              borderRadius: "4px",
-              boxShadow: `0 0 12px ${color}40, 0 4px 12px rgba(0,0,0,0.4)`,
-              zIndex: 1e3,
-              whiteSpace: "nowrap",
-              pointerEvents: "none",
-              minWidth: "150px"
-            },
-            children: [
-              /* @__PURE__ */ jsx("div", { style: {
-                fontSize: "0.6875rem",
-                // 11px in rem 
-                fontWeight: 500,
-                // AstroUXDS medium for labels
-                color,
-                marginBottom: "4px",
-                textTransform: "uppercase",
-                letterSpacing: "0.5px"
-              }, children: statusLabel }),
-              /* @__PURE__ */ jsx("div", { style: {
-                fontSize: "0.75rem",
-                // 12px in rem
-                color: "rgba(255,255,255,0.9)",
-                lineHeight: 1.4
-              }, children: tooltipText }),
-              /* @__PURE__ */ jsx("div", { style: {
-                position: "absolute",
-                bottom: "-6px",
-                left: "50%",
-                transform: "translateX(-50%) rotate(45deg)",
-                width: "10px",
-                height: "10px",
-                backgroundColor: "rgba(10, 15, 25, 0.95)",
-                borderRight: `1px solid ${color}`,
-                borderBottom: `1px solid ${color}`
-              } })
-            ]
-          }
-        )
-      ]
-    }
-  );
+/**
+* Renders AstroUXDS-compliant status symbol with proper shape
+* Shapes: Critical=triangle, Serious=diamond, Caution=square, Normal=circle, Standby=ring, Off=small-circle
+*/
+function StatusSymbol({ status, size = 8, message, showTooltip = false }) {
+	const [isHovered, setIsHovered] = React.useState(false);
+	const { tokens } = useTheme();
+	const color = tokens.colors.status[status];
+	const defaultMessage = STATUS_DESCRIPTIONS[status];
+	const tooltipText = message || defaultMessage;
+	const statusLabel = status.charAt(0).toUpperCase() + status.slice(1);
+	const renderShape = () => {
+		const h = size / 2;
+		const glow = `drop-shadow(0 0 3px ${color})`;
+		switch (status) {
+			case "critical": return /* @__PURE__ */ jsx("svg", {
+				width: size,
+				height: size,
+				viewBox: `0 0 ${size} ${size}`,
+				style: { filter: glow },
+				children: /* @__PURE__ */ jsx("polygon", {
+					points: `${h},${size} 0,0 ${size},0`,
+					fill: color
+				})
+			});
+			case "serious": return /* @__PURE__ */ jsx("svg", {
+				width: size,
+				height: size,
+				viewBox: `0 0 ${size} ${size}`,
+				style: { filter: glow },
+				children: /* @__PURE__ */ jsx("polygon", {
+					points: `${h},0 ${size},${h} ${h},${size} 0,${h}`,
+					fill: color
+				})
+			});
+			case "caution": return /* @__PURE__ */ jsx("svg", {
+				width: size,
+				height: size,
+				viewBox: `0 0 ${size} ${size}`,
+				style: { filter: glow },
+				children: /* @__PURE__ */ jsx("rect", {
+					width: size,
+					height: size,
+					fill: color
+				})
+			});
+			case "normal": return /* @__PURE__ */ jsx("svg", {
+				width: size,
+				height: size,
+				viewBox: `0 0 ${size} ${size}`,
+				style: { filter: glow },
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: h,
+					cy: h,
+					r: h,
+					fill: color
+				})
+			});
+			case "standby": return /* @__PURE__ */ jsx("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 12 12",
+				style: { filter: glow },
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: "6",
+					cy: "6",
+					r: "3.5",
+					fill: "none",
+					stroke: color,
+					strokeWidth: "2"
+				})
+			});
+			default: return /* @__PURE__ */ jsx("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 12 12",
+				style: { filter: glow },
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: "6",
+					cy: "6",
+					r: "3",
+					fill: color
+				})
+			});
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "relative",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			cursor: showTooltip ? "help" : "default"
+		},
+		onMouseEnter: () => showTooltip && setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
+		children: [renderShape(), showTooltip && isHovered && /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "absolute",
+				bottom: "calc(100% + 8px)",
+				left: "50%",
+				transform: "translateX(-50%)",
+				padding: "8px 12px",
+				backgroundColor: "rgba(10, 15, 25, 0.95)",
+				border: `1px solid ${color}`,
+				borderRadius: "4px",
+				boxShadow: `0 0 12px ${color}40, 0 4px 12px rgba(0,0,0,0.4)`,
+				zIndex: 1e3,
+				whiteSpace: "nowrap",
+				pointerEvents: "none",
+				minWidth: "150px"
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "0.6875rem",
+						fontWeight: 500,
+						color,
+						marginBottom: "4px",
+						textTransform: "uppercase",
+						letterSpacing: "0.5px"
+					},
+					children: statusLabel
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "0.75rem",
+						color: "rgba(255,255,255,0.9)",
+						lineHeight: 1.4
+					},
+					children: tooltipText
+				}),
+				/* @__PURE__ */ jsx("div", { style: {
+					position: "absolute",
+					bottom: "-6px",
+					left: "50%",
+					transform: "translateX(-50%) rotate(45deg)",
+					width: "10px",
+					height: "10px",
+					backgroundColor: "rgba(10, 15, 25, 0.95)",
+					borderRight: `1px solid ${color}`,
+					borderBottom: `1px solid ${color}`
+				} })
+			]
+		})]
+	});
 }
-function StatusBadge({
-  status,
-  tokens: _tokens,
-  size = "bold"
-}) {
-  const color = STATUS_COLORS[status];
-  const label = status.charAt(0).toUpperCase() + status.slice(1);
-  const isBold = size === "bold";
-  return /* @__PURE__ */ jsxs("span", { style: {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: isBold ? "6px" : "4px",
-    padding: isBold ? "3px 10px" : "2px 8px",
-    borderRadius: "12px",
-    fontSize: isBold ? "11px" : "10px",
-    fontWeight: 500,
-    backgroundColor: `${color}20`,
-    color,
-    flexShrink: 0,
-    textTransform: "uppercase",
-    letterSpacing: "0.3px"
-  }, children: [
-    /* @__PURE__ */ jsx(StatusSymbol, { status, size: isBold ? 6 : 5 }),
-    label
-  ] });
+/**
+* StatusBadge - Compact status indicator for accent lines
+* Shows colored badge with status shape at end of accent line
+*/
+function StatusBadge({ status, tokens: _tokens, size = "bold" }) {
+	const { tokens } = useTheme();
+	const color = tokens.colors.status[status];
+	const label = status.charAt(0).toUpperCase() + status.slice(1);
+	const isBold = size === "bold";
+	return /* @__PURE__ */ jsxs("span", {
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: isBold ? "6px" : "4px",
+			padding: isBold ? "3px 10px" : "2px 8px",
+			borderRadius: "12px",
+			fontSize: isBold ? "11px" : "10px",
+			fontWeight: 500,
+			backgroundColor: `${color}20`,
+			color,
+			flexShrink: 0,
+			textTransform: "uppercase",
+			letterSpacing: "0.3px"
+		},
+		children: [/* @__PURE__ */ jsx(StatusSymbol, {
+			status,
+			size: isBold ? 6 : 5
+		}), label]
+	});
 }
-const Container = memo(function Container2({
-  variant = "default",
-  padding = "md",
-  title,
-  subtitle,
-  status,
-  actions,
-  fullHeight = false,
-  clipContent = true,
-  loading = false,
-  children,
-  className = "",
-  style,
-  onClick,
-  disableAutoGlass = false,
-  icon,
-  iconStatus,
-  statusMessage,
-  iconColor,
-  accentColor
-}) {
-  var _a, _b;
-  const { tokens, theme } = useTheme();
-  const { isMobile } = useBreakpoint();
-  const isBoldVariant = theme === "transparent-bold";
-  const isMinimalVariant = theme === "transparent-minimal";
-  const useGlassMode = (isBoldVariant || isMinimalVariant) && !disableAutoGlass && !variant.startsWith("glass");
-  const useSimpleGlass = theme === "transparent" && !disableAutoGlass && !variant.startsWith("glass");
-  const defaultAccentColor = tokens.colors.accent.primary;
-  const glassAccentColor = accentColor || defaultAccentColor;
-  const glassAccentMuted = `${glassAccentColor}66`;
-  const glassGradient = `linear-gradient(135deg, ${glassAccentColor}10 0%, ${glassAccentColor}03 100%)`;
-  const resolvedIconColor = iconColor || (iconStatus ? STATUS_COLORS[iconStatus] : glassAccentColor);
-  const paddingConfig = {
-    none: "0",
-    sm: isMobile ? tokens.spacing.xs : tokens.spacing.sm,
-    md: isMobile ? tokens.spacing.sm : tokens.spacing.md,
-    lg: isMobile ? tokens.spacing.md : tokens.spacing.lg
-  };
-  const headingConfig = ((_b = (_a = tokens.layout) == null ? void 0 : _a.card) == null ? void 0 : _b.heading) ?? {
-    iconSize: 20,
-    iconSizeCompact: 16,
-    titleFontSize: "1.125rem",
-    titleFontWeight: 500,
-    gap: 8
-  };
-  const variantStyles = {
-    default: {
-      backgroundColor: tokens.colors.background.surface,
-      border: `1px solid ${tokens.colors.border.muted}`,
-      boxShadow: "none"
-    },
-    elevated: {
-      backgroundColor: tokens.colors.background.surface,
-      border: "none",
-      boxShadow: tokens.shadows.md
-    },
-    outlined: {
-      backgroundColor: "transparent",
-      border: `1px solid ${tokens.colors.border.muted}`,
-      boxShadow: "none"
-    },
-    ghost: {
-      backgroundColor: "transparent",
-      border: "none",
-      boxShadow: "none"
-    },
-    // Glass variants - transparent with blur
-    glass: {
-      backgroundColor: "rgba(15, 20, 35, 0.85)",
-      backdropFilter: "blur(12px)",
-      WebkitBackdropFilter: "blur(12px)",
-      border: "1px solid rgba(0, 212, 255, 0.25)",
-      boxShadow: "none"
-    },
-    "glass-dark": {
-      backgroundColor: "rgba(0, 0, 0, 0.7)",
-      backdropFilter: "blur(16px)",
-      WebkitBackdropFilter: "blur(16px)",
-      border: "1px solid rgba(100, 130, 160, 0.2)",
-      boxShadow: "none"
-    },
-    "glass-light": {
-      backgroundColor: "rgba(255, 255, 255, 0.15)",
-      backdropFilter: "blur(12px)",
-      WebkitBackdropFilter: "blur(12px)",
-      border: "1px solid rgba(255, 255, 255, 0.25)",
-      boxShadow: "none"
-    }
-  };
-  const glowColor = accentColor ? `${accentColor}66` : "rgba(0, 212, 255, 0.4)";
-  const glassOverrides = useGlassMode ? {
-    backgroundColor: "rgba(10, 15, 25, 0.35)",
-    backdropFilter: "blur(12px)",
-    WebkitBackdropFilter: "blur(12px)",
-    border: `1px solid ${glassAccentMuted}`,
-    borderTop: isBoldVariant ? `2px solid ${glassAccentColor}` : `1px solid ${glassAccentColor}`,
-    transition: "all 0.3s ease-out, box-shadow 0.3s ease-out"
-  } : {};
-  const simpleGlassOverrides = useSimpleGlass ? {
-    backgroundColor: "transparent",
-    backdropFilter: "blur(12px)",
-    WebkitBackdropFilter: "blur(12px)",
-    border: `1px solid ${tokens.colors.border.muted}`,
-    transition: "all 0.3s ease-out"
-  } : {};
-  const handleMouseEnter = useCallback((e) => {
-    if (useGlassMode) {
-      e.currentTarget.style.boxShadow = `0 0 30px ${glowColor}, 0 4px 20px rgba(0,0,0,0.3)`;
-    }
-  }, [useGlassMode, glowColor]);
-  const handleMouseLeave = useCallback((e) => {
-    if (useGlassMode) {
-      e.currentTarget.style.boxShadow = "none";
-    }
-  }, [useGlassMode]);
-  const statusColor = status ? tokens.colors.status[status] : void 0;
-  const isInteractive = !!onClick;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames(
-        "zendir-container",
-        `zendir-container--${variant}`,
-        useGlassMode && "zendir-container--auto-glass",
-        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,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      style: {
-        borderRadius: tokens.borderRadius.lg,
-        overflow: "hidden",
-        position: "relative",
-        height: fullHeight ? "100%" : "auto",
-        display: "flex",
-        flexDirection: "column",
-        cursor: isInteractive ? "pointer" : "default",
-        transition: "all 0.3s ease-out",
-        borderLeft: statusColor ? `4px solid ${statusColor}` : void 0,
-        ...variantStyles[variant],
-        ...simpleGlassOverrides,
-        // Normal Glass theme
-        ...glassOverrides,
-        // Bold/Minimal themes (overrides simpleGlass if both)
-        ...style
-      },
-      children: [
-        useGlassMode && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              background: glassGradient,
-              pointerEvents: "none",
-              zIndex: 0
-            }
-          }
-        ),
-        loading && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              backgroundColor: addAlpha(tokens.colors.background.surface, 0.5),
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              zIndex: 10
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  width: "32",
-                  height: "32",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  style: { animation: "spin 1s linear infinite" },
-                  children: /* @__PURE__ */ jsx(
-                    "circle",
-                    {
-                      cx: "12",
-                      cy: "12",
-                      r: "10",
-                      stroke: tokens.colors.accent.primary,
-                      strokeWidth: "3",
-                      strokeDasharray: "31.4 31.4",
-                      strokeDashoffset: "10"
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx("style", { children: `@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` })
-            ]
-          }
-        ),
-        (title || actions) && useGlassMode && isBoldVariant && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "relative",
-              zIndex: 1
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    padding: `16px ${paddingConfig[padding]} 0`
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: headingConfig.gap }, children: [
-                      icon && /* @__PURE__ */ jsx(
-                        IconWithStatusTooltip,
-                        {
-                          icon,
-                          iconColor: resolvedIconColor,
-                          iconStatus,
-                          statusMessage,
-                          iconSize: headingConfig.iconSize
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "h3",
-                        {
-                          style: {
-                            margin: 0,
-                            fontSize: headingConfig.titleFontSize,
-                            fontWeight: headingConfig.titleFontWeight,
-                            color: glassAccentColor,
-                            letterSpacing: "0.5px",
-                            textShadow: `0 0 20px ${glassAccentMuted}`
-                          },
-                          children: title
-                        }
-                      )
-                    ] }),
-                    actions && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: tokens.spacing.xs }, children: actions })
-                  ]
-                }
-              ),
-              subtitle && /* @__PURE__ */ jsx(
-                "p",
-                {
-                  style: {
-                    margin: 0,
-                    padding: `${tokens.spacing.xs} ${paddingConfig[padding]} 0`,
-                    fontSize: tokens.typography.fontSize.sm,
-                    color: tokens.colors.text.secondary
-                  },
-                  children: subtitle
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: tokens.spacing.sm,
-                    padding: `12px ${paddingConfig[padding]} 0`,
-                    marginBottom: tokens.spacing.sm
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          flex: 1,
-                          height: "2px",
-                          background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`,
-                          boxShadow: `0 0 8px ${glassAccentMuted}`
-                        }
-                      }
-                    ),
-                    iconStatus && iconStatus !== "off" && /* @__PURE__ */ jsx(StatusBadge, { status: iconStatus, tokens, size: "bold" })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        (title || actions) && useGlassMode && !isBoldVariant && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              padding: `${tokens.spacing.sm} ${paddingConfig[padding]} 0`,
-              marginBottom: tokens.spacing.sm,
-              position: "relative",
-              zIndex: 1
-            },
-            children: [
-              icon && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", marginRight: tokens.spacing.sm }, children: /* @__PURE__ */ jsx(
-                IconWithStatusTooltip,
-                {
-                  icon,
-                  iconColor: resolvedIconColor,
-                  iconStatus,
-                  statusMessage,
-                  iconSize: headingConfig.iconSizeCompact
-                }
-              ) }),
-              title && /* @__PURE__ */ jsx(
-                "h3",
-                {
-                  style: {
-                    margin: 0,
-                    fontSize: headingConfig.titleFontSize,
-                    fontWeight: headingConfig.titleFontWeight,
-                    color: glassAccentColor,
-                    textShadow: `0 0 16px ${glassAccentMuted}`,
-                    letterSpacing: "0.02em",
-                    whiteSpace: "nowrap",
-                    marginRight: "12px"
-                  },
-                  children: title
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    flex: 1,
-                    display: "flex",
-                    alignItems: "center",
-                    gap: tokens.spacing.sm,
-                    minWidth: 40
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          flex: 1,
-                          height: "1px",
-                          background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`
-                        }
-                      }
-                    ),
-                    iconStatus && iconStatus !== "off" && /* @__PURE__ */ jsx(StatusBadge, { status: iconStatus, tokens, size: "minimal" })
-                  ]
-                }
-              ),
-              actions && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: tokens.spacing.xs, flexShrink: 0, marginLeft: "12px" }, children: actions })
-            ]
-          }
-        ),
-        subtitle && useGlassMode && !isBoldVariant && /* @__PURE__ */ jsx(
-          "p",
-          {
-            style: {
-              margin: 0,
-              padding: `0 ${paddingConfig[padding]}`,
-              marginBottom: tokens.spacing.sm,
-              fontSize: tokens.typography.fontSize.sm,
-              color: tokens.colors.text.secondary,
-              position: "relative",
-              zIndex: 1
-            },
-            children: subtitle
-          }
-        ),
-        (title || actions) && !useGlassMode && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              padding: `${paddingConfig[padding]} ${paddingConfig[padding]} 0`,
-              position: "relative",
-              zIndex: 1
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                CardHeader,
-                {
-                  icon: icon || (iconStatus ? "mission" : ""),
-                  title: typeof title === "string" ? title : String(title || ""),
-                  subtitle: typeof subtitle === "string" ? subtitle : void 0,
-                  status: iconStatus || status,
-                  iconColor,
-                  iconSize: headingConfig.iconSize,
-                  hideStatusIndicator: !icon && !iconStatus && !status,
-                  rightSlot: actions,
-                  style: { marginBottom: tokens.spacing.sm }
-                }
-              ),
-              subtitle && typeof subtitle !== "string" && /* @__PURE__ */ jsx("div", { style: {
-                fontSize: tokens.typography.fontSize.sm,
-                color: tokens.colors.text.secondary,
-                marginTop: -parseInt(tokens.spacing.xs || "4", 10) || -4,
-                marginBottom: parseInt(tokens.spacing.sm || "8", 10) || 8
-              }, children: subtitle })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              flex: 1,
-              minHeight: fullHeight ? 0 : void 0,
-              overflow: fullHeight && clipContent ? "hidden" : void 0,
-              // When fullHeight, become a flex column so any child using flex:1 or height:100%
-              // gets a properly bounded height and scroll containers can work.
-              display: fullHeight ? "flex" : void 0,
-              flexDirection: fullHeight ? "column" : void 0,
-              padding: fullHeight ? `${tokens.spacing.xs} 0 0 0` : title ? `${tokens.spacing.xs} ${paddingConfig[padding]} ${paddingConfig[padding]}` : paddingConfig[padding],
-              position: "relative",
-              zIndex: 1
-            },
-            children
-          }
-        )
-      ]
-    }
-  );
+var Container = memo(function Container({ variant = "default", padding = "md", title, subtitle, status, actions, fullHeight = false, clipContent = true, loading = false, children, className = "", style, onClick, disableAutoGlass = false, icon, iconStatus, statusMessage, iconColor, accentColor }) {
+	const { tokens, theme } = useTheme();
+	const { isMobile } = useBreakpoint();
+	const isBoldVariant = theme === "transparent-bold";
+	const useGlassMode = (isBoldVariant || theme === "transparent-minimal") && !disableAutoGlass && !variant.startsWith("glass");
+	const useSimpleGlass = theme === "transparent" && !disableAutoGlass && !variant.startsWith("glass");
+	const defaultAccentColor = tokens.colors.accent.primary;
+	const glassAccentColor = accentColor || defaultAccentColor;
+	const glassAccentMuted = `${glassAccentColor}66`;
+	const glassGradient = `linear-gradient(135deg, ${glassAccentColor}10 0%, ${glassAccentColor}03 100%)`;
+	const resolvedIconColor = iconColor || (iconStatus ? tokens.colors.status[iconStatus] : glassAccentColor);
+	`${resolvedIconColor}`;
+	const paddingConfig = {
+		none: "0",
+		sm: isMobile ? tokens.spacing.xs : tokens.spacing.sm,
+		md: isMobile ? tokens.spacing.sm : tokens.spacing.md,
+		lg: isMobile ? tokens.spacing.md : tokens.spacing.lg
+	};
+	const headingConfig = tokens.layout?.card?.heading ?? {
+		iconSize: 20,
+		iconSizeCompact: 16,
+		titleFontSize: "1.125rem",
+		titleFontSizeChart: "0.875rem",
+		titleFontWeight: 500,
+		gap: 8
+	};
+	const variantStyles = {
+		default: {
+			backgroundColor: tokens.colors.background.surface,
+			border: `1px solid ${tokens.colors.border.muted}`,
+			boxShadow: "none"
+		},
+		elevated: {
+			backgroundColor: tokens.colors.background.surface,
+			border: "none",
+			boxShadow: tokens.shadows.md
+		},
+		outlined: {
+			backgroundColor: "transparent",
+			border: `1px solid ${tokens.colors.border.muted}`,
+			boxShadow: "none"
+		},
+		ghost: {
+			backgroundColor: "transparent",
+			border: "none",
+			boxShadow: "none"
+		},
+		glass: {
+			backgroundColor: "rgba(15, 20, 35, 0.85)",
+			backdropFilter: "blur(12px)",
+			WebkitBackdropFilter: "blur(12px)",
+			border: "1px solid rgba(0, 212, 255, 0.25)",
+			boxShadow: "none"
+		},
+		"glass-dark": {
+			backgroundColor: "rgba(0, 0, 0, 0.7)",
+			backdropFilter: "blur(16px)",
+			WebkitBackdropFilter: "blur(16px)",
+			border: "1px solid rgba(100, 130, 160, 0.2)",
+			boxShadow: "none"
+		},
+		"glass-light": {
+			backgroundColor: "rgba(255, 255, 255, 0.15)",
+			backdropFilter: "blur(12px)",
+			WebkitBackdropFilter: "blur(12px)",
+			border: "1px solid rgba(255, 255, 255, 0.25)",
+			boxShadow: "none"
+		}
+	};
+	const glowColor = accentColor ? `${accentColor}66` : "rgba(0, 212, 255, 0.4)";
+	const glassOverrides = useGlassMode ? {
+		backgroundColor: "rgba(10, 15, 25, 0.35)",
+		backdropFilter: "blur(12px)",
+		WebkitBackdropFilter: "blur(12px)",
+		border: `1px solid ${glassAccentMuted}`,
+		borderTop: isBoldVariant ? `2px solid ${glassAccentColor}` : `1px solid ${glassAccentColor}`,
+		transition: "all 0.3s ease-out, box-shadow 0.3s ease-out"
+	} : {};
+	const simpleGlassOverrides = useSimpleGlass ? {
+		backgroundColor: "transparent",
+		backdropFilter: "blur(12px)",
+		WebkitBackdropFilter: "blur(12px)",
+		border: `1px solid ${tokens.colors.border.muted}`,
+		transition: "all 0.3s ease-out"
+	} : {};
+	const handleMouseEnter = useCallback((e) => {
+		if (useGlassMode) e.currentTarget.style.boxShadow = `0 0 30px ${glowColor}, 0 4px 20px rgba(0,0,0,0.3)`;
+	}, [useGlassMode, glowColor]);
+	const handleMouseLeave = useCallback((e) => {
+		if (useGlassMode) e.currentTarget.style.boxShadow = "none";
+	}, [useGlassMode]);
+	const statusColor = status ? tokens.colors.status[status] : void 0;
+	const isInteractive = !!onClick;
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-container", `zendir-container--${variant}`, useGlassMode && "zendir-container--auto-glass", 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,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		style: {
+			borderRadius: tokens.borderRadius.lg,
+			overflow: "hidden",
+			position: "relative",
+			height: fullHeight ? "100%" : "auto",
+			display: "flex",
+			flexDirection: "column",
+			cursor: isInteractive ? "pointer" : "default",
+			transition: "all 0.3s ease-out",
+			borderLeft: statusColor ? `4px solid ${statusColor}` : void 0,
+			...variantStyles[variant],
+			...simpleGlassOverrides,
+			...glassOverrides,
+			...style
+		},
+		children: [
+			useGlassMode && /* @__PURE__ */ jsx("div", { style: {
+				position: "absolute",
+				inset: 0,
+				background: glassGradient,
+				pointerEvents: "none",
+				zIndex: 0
+			} }),
+			loading && /* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "absolute",
+					inset: 0,
+					backgroundColor: addAlpha(tokens.colors.background.surface, .5),
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					zIndex: 10
+				},
+				children: [/* @__PURE__ */ jsx("svg", {
+					width: "32",
+					height: "32",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					style: { animation: "spin 1s linear infinite" },
+					children: /* @__PURE__ */ jsx("circle", {
+						cx: "12",
+						cy: "12",
+						r: "10",
+						stroke: tokens.colors.accent.primary,
+						strokeWidth: "3",
+						strokeDasharray: "31.4 31.4",
+						strokeDashoffset: "10"
+					})
+				}), /* @__PURE__ */ jsx("style", { children: `@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` })]
+			}),
+			(title || actions) && useGlassMode && isBoldVariant && /* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "relative",
+					zIndex: 1
+				},
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							padding: `16px ${paddingConfig[padding]} 0`
+						},
+						children: [/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: headingConfig.gap
+							},
+							children: [icon && /* @__PURE__ */ jsx(IconWithStatusTooltip, {
+								icon,
+								iconColor: resolvedIconColor,
+								iconStatus,
+								statusMessage,
+								iconSize: headingConfig.iconSize
+							}), /* @__PURE__ */ jsx("h3", {
+								style: {
+									margin: 0,
+									fontSize: headingConfig.titleFontSize,
+									fontWeight: headingConfig.titleFontWeight,
+									color: glassAccentColor,
+									letterSpacing: "0.5px",
+									textShadow: `0 0 20px ${glassAccentMuted}`
+								},
+								children: title
+							})]
+						}), actions && /* @__PURE__ */ jsx("div", {
+							style: {
+								display: "flex",
+								gap: tokens.spacing.xs
+							},
+							children: actions
+						})]
+					}),
+					subtitle && /* @__PURE__ */ jsx("p", {
+						style: {
+							margin: 0,
+							padding: `${tokens.spacing.xs} ${paddingConfig[padding]} 0`,
+							fontSize: tokens.typography.fontSize.sm,
+							color: tokens.colors.text.secondary
+						},
+						children: subtitle
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: tokens.spacing.sm,
+							padding: `12px ${paddingConfig[padding]} 0`,
+							marginBottom: tokens.spacing.sm
+						},
+						children: [/* @__PURE__ */ jsx("div", { style: {
+							flex: 1,
+							height: "2px",
+							background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`,
+							boxShadow: `0 0 8px ${glassAccentMuted}`
+						} }), iconStatus && iconStatus !== "off" && /* @__PURE__ */ jsx(StatusBadge, {
+							status: iconStatus,
+							tokens,
+							size: "bold"
+						})]
+					})
+				]
+			}),
+			(title || actions) && useGlassMode && !isBoldVariant && /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					padding: `${tokens.spacing.sm} ${paddingConfig[padding]} 0`,
+					marginBottom: tokens.spacing.sm,
+					position: "relative",
+					zIndex: 1
+				},
+				children: [
+					icon && /* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							marginRight: tokens.spacing.sm
+						},
+						children: /* @__PURE__ */ jsx(IconWithStatusTooltip, {
+							icon,
+							iconColor: resolvedIconColor,
+							iconStatus,
+							statusMessage,
+							iconSize: headingConfig.iconSizeCompact
+						})
+					}),
+					title && /* @__PURE__ */ jsx("h3", {
+						style: {
+							margin: 0,
+							fontSize: headingConfig.titleFontSize,
+							fontWeight: headingConfig.titleFontWeight,
+							color: glassAccentColor,
+							textShadow: `0 0 16px ${glassAccentMuted}`,
+							letterSpacing: "0.02em",
+							whiteSpace: "nowrap",
+							marginRight: "12px"
+						},
+						children: title
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							flex: 1,
+							display: "flex",
+							alignItems: "center",
+							gap: tokens.spacing.sm,
+							minWidth: 40
+						},
+						children: [/* @__PURE__ */ jsx("div", { style: {
+							flex: 1,
+							height: "1px",
+							background: `linear-gradient(90deg, ${glassAccentColor} 0%, ${glassAccentMuted} 70%, ${glassAccentMuted}20 100%)`
+						} }), iconStatus && iconStatus !== "off" && /* @__PURE__ */ jsx(StatusBadge, {
+							status: iconStatus,
+							tokens,
+							size: "minimal"
+						})]
+					}),
+					actions && /* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							gap: tokens.spacing.xs,
+							flexShrink: 0,
+							marginLeft: "12px"
+						},
+						children: actions
+					})
+				]
+			}),
+			subtitle && useGlassMode && !isBoldVariant && /* @__PURE__ */ jsx("p", {
+				style: {
+					margin: 0,
+					padding: `0 ${paddingConfig[padding]}`,
+					marginBottom: tokens.spacing.sm,
+					fontSize: tokens.typography.fontSize.sm,
+					color: tokens.colors.text.secondary,
+					position: "relative",
+					zIndex: 1
+				},
+				children: subtitle
+			}),
+			(title || actions) && !useGlassMode && /* @__PURE__ */ jsxs("div", {
+				style: {
+					padding: `${paddingConfig[padding]} ${paddingConfig[padding]} 0`,
+					position: "relative",
+					zIndex: 1
+				},
+				children: [/* @__PURE__ */ jsx(CardHeader, {
+					icon: icon || (iconStatus ? "mission" : ""),
+					title: typeof title === "string" ? title : String(title || ""),
+					subtitle: typeof subtitle === "string" ? subtitle : void 0,
+					status: iconStatus || status,
+					iconColor,
+					iconSize: headingConfig.iconSize,
+					hideStatusIndicator: !icon && !iconStatus && !status,
+					rightSlot: actions,
+					style: { marginBottom: tokens.spacing.sm }
+				}), subtitle && typeof subtitle !== "string" && /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: tokens.typography.fontSize.sm,
+						color: tokens.colors.text.secondary,
+						marginTop: -parseInt(tokens.spacing.xs || "4", 10) || -4,
+						marginBottom: parseInt(tokens.spacing.sm || "8", 10) || 8
+					},
+					children: subtitle
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					flex: 1,
+					minHeight: fullHeight ? 0 : void 0,
+					overflow: fullHeight && clipContent ? "hidden" : void 0,
+					display: fullHeight ? "flex" : void 0,
+					flexDirection: fullHeight ? "column" : void 0,
+					padding: fullHeight ? `${tokens.spacing.xs} 0 0 0` : title ? `${tokens.spacing.xs} ${paddingConfig[padding]} ${paddingConfig[padding]}` : paddingConfig[padding],
+					position: "relative",
+					zIndex: 1
+				},
+				children
+			})
+		]
+	});
 });
-export {
-  Container
-};
-//# sourceMappingURL=Container.js.map
+//#endregion
+export { Container, Container as default };
+
+//# sourceMappingURL=Container.js.map