@zendir/ui 0.1.0

package/dist/react/core/Container.js

@@ -0,0 +1,670 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { memo, useCallback } from "react";
+import { addAlpha, classNames } from "../utils/index.js";
+import { AstroIcon } from "./AstroIcon.js";
+import { HeaderIconWithStatus } from "./HeaderIconWithStatus.js";
+import { CardHeader } from "./CardHeader.js";
+import { useBreakpoint } from "./layout/useBreakpoint.js";
+import { useTheme } from "../theme/ThemeProvider.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"
+};
+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}`
+              } })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+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}`
+              } })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+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
+  ] });
+}
+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__ */ jsx(
+          "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 : subtitle ? String(subtitle) : void 0,
+                status: iconStatus || status,
+                iconColor,
+                iconSize: headingConfig.iconSize,
+                hideStatusIndicator: !icon && !iconStatus && !status,
+                rightSlot: actions,
+                style: { marginBottom: tokens.spacing.sm }
+              }
+            )
+          }
+        ),
+        /* @__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
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Container
+};
+//# sourceMappingURL=Container.js.map