@zendir/ui 0.1.0

package/dist/react/astro/MonitoringIcon.js

@@ -0,0 +1,369 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { memo, useState } from "react";
+import { classNames } from "../utils/index.js";
+import { isValidIconName, Icon } from "../core/Icon.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const STATUS_BORDER_COLORS = {
+  off: "#3c3e42",
+  standby: "#285766",
+  normal: "#005a00",
+  caution: "#645600",
+  serious: "#664618",
+  critical: "#661102"
+};
+const renderStatusSymbol = (status, size, fillColor, borderColor, glow) => {
+  const hasBorder = !!borderColor;
+  const strokeWidth = hasBorder ? 1 : 0;
+  const glowFilter = glow ? `drop-shadow(0 0 3px ${fillColor})` : void 0;
+  switch (status) {
+    case "off":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: glowFilter }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: hasBorder ? 2.5 : 3, fill: fillColor, stroke: borderColor, strokeWidth }) });
+    case "standby":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: glowFilter }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: fillColor, strokeWidth: "2" }) });
+    case "normal":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: glowFilter }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: hasBorder ? 4.5 : 5, fill: fillColor, stroke: borderColor, strokeWidth }) });
+    case "caution":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: glowFilter }, children: /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: hasBorder ? 1.5 : 1,
+          y: hasBorder ? 1.5 : 1,
+          width: hasBorder ? 9 : 10,
+          height: hasBorder ? 9 : 10,
+          fill: fillColor,
+          stroke: borderColor,
+          strokeWidth
+        }
+      ) });
+    case "serious":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: glowFilter }, children: /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: "6,1 11,6 6,11 1,6",
+          fill: fillColor,
+          stroke: borderColor,
+          strokeWidth
+        }
+      ) });
+    case "critical":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: glowFilter }, children: /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: "6,11 1,2 11,2",
+          fill: fillColor,
+          stroke: borderColor,
+          strokeWidth
+        }
+      ) });
+    default:
+      return null;
+  }
+};
+const ICON_PATHS = {
+  // Astro Icons (Space/Mission)
+  thermal: "M15 13V5c0-1.66-1.34-3-3-3S9 3.34 9 5v8c-1.21.91-2 2.37-2 4 0 2.76 2.24 5 5 5s5-2.24 5-5c0-1.63-.79-3.09-2-4zm-4-8c0-.55.45-1 1-1s1 .45 1 1h-1v1h1v2h-1v1h1v2h-2V5z",
+  "propulsion-power": "M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42A6.92 6.92 0 0119 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.53 1.37-4.77 3.4-6l-1.42-1.42A8.962 8.962 0 003 12c0 4.97 4.03 9 9 9s9-4.03 9-9a8.96 8.96 0 00-4.17-7.83z",
+  payload: "M17 3H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7V5h10v14zm-5-7c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3z",
+  netcom: "M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z",
+  antenna: "M12 5c-3.87 0-7 3.13-7 7h2c0-2.76 2.24-5 5-5s5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0 4c-1.66 0-3 1.34-3 3h2c0-.55.45-1 1-1s1 .45 1 1h2c0-1.66-1.34-3-3-3zm0-8C5.93 1 1 5.93 1 12h2c0-4.97 4.03-9 9-9s9 4.03 9 9h2c0-6.07-4.93-11-11-11z",
+  solar: "M20 18V6c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zM6 6h12v4H6V6zm0 6h4v6H6v-6zm6 6v-6h6v6h-6z",
+  altitude: "M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71L12 2z",
+  processor: "M22 9V7h-2V5c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v2H2v2h2v2H2v2h2v2H2v2h2v2c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2v-2h-2V9h2zm-4 10H6V5h12v14zm-5-7h-2V8h2v4zm0 6h-2v-4h2v4z",
+  mission: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z",
+  equipment: "M22 9V7h-2V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2v-2h-2V9h2zm-4 10H4V5h14v14zM6 13h5v4H6v-4zm6-6h4v3h-4V7zM6 7h5v5H6V7zm6 4h4v6h-4v-6z",
+  "satellite-transmit": "M6 6L1 11l5 5 1.41-1.41L4.83 12l2.58-2.59L6 6zm6-4l-3 7 3 3 3-3-3-7zm6 4l-1.41 1.41L19.17 12l-2.58 2.59L18 16l5-5-5-5z",
+  "satellite-receive": "M18 6l-1.41 1.41L19.17 10H6.83l2.58-2.59L8 6l-5 5 5 5 1.41-1.41L6.83 12h12.34l-2.58 2.59L18 16l5-5-5-5z",
+  "satellite-off": "M1 21l5-5 1.41 1.41-5 5L1 21zm22-9l-5-5-1.41 1.41 5 5L23 12zm-9-9l-5 5 1.41 1.41 5-5L14 3z",
+  hardware: "M17 3H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7V5h10v14zm-3-8h-4v2h4v-2z",
+  release: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z",
+  // Legacy aliases
+  satellite: "M6 6L1 11l5 5 1.41-1.41L4.83 12l2.58-2.59L6 6zm6-4l-3 7 3 3 3-3-3-7zm6 4l-1.41 1.41L19.17 12l-2.58 2.59L18 16l5-5-5-5z",
+  power: "M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42A6.92 6.92 0 0119 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.53 1.37-4.77 3.4-6l-1.42-1.42A8.962 8.962 0 003 12c0 4.97 4.03 9 9 9s9-4.03 9-9a8.96 8.96 0 00-4.17-7.83z",
+  comms: "M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"
+};
+const renderPercentageArc = (percentage, statusColor, showValue = true, size = 48) => {
+  const pct = Math.max(0, Math.min(100, percentage));
+  const centerX = size / 2;
+  const centerY = size / 2;
+  const radius = size / 2 - 4;
+  const strokeWidth = 4;
+  const innerRadius = radius - strokeWidth / 2;
+  const startAngle = -90;
+  const endAngle = startAngle + pct / 100 * 360;
+  const startRad = startAngle * Math.PI / 180;
+  const endRad = endAngle * Math.PI / 180;
+  const startX = centerX + innerRadius * Math.cos(startRad);
+  const startY = centerY + innerRadius * Math.sin(startRad);
+  const endX = centerX + innerRadius * Math.cos(endRad);
+  const endY = centerY + innerRadius * Math.sin(endRad);
+  const largeArcFlag = pct > 50 ? 1 : 0;
+  const arcPath = pct > 0 && pct < 100 ? `M ${startX} ${startY} A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 1 ${endX} ${endY}` : pct >= 100 ? `M ${centerX} ${centerY - innerRadius} A ${innerRadius} ${innerRadius} 0 1 1 ${centerX - 1e-3} ${centerY - innerRadius}` : "";
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      style: { display: "block" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: centerX,
+            cy: centerY,
+            r: innerRadius,
+            fill: "none",
+            stroke: "rgba(255, 255, 255, 0.1)",
+            strokeWidth
+          }
+        ),
+        arcPath && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: arcPath,
+            fill: "none",
+            stroke: statusColor,
+            strokeWidth,
+            strokeLinecap: "round",
+            style: {
+              filter: `drop-shadow(0 0 4px ${statusColor}60)`
+            }
+          }
+        ),
+        showValue && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: centerX,
+            y: centerY,
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            fill: statusColor,
+            fontSize: size * 0.28,
+            fontWeight: 600,
+            fontFamily: "system-ui, -apple-system, sans-serif",
+            children: Math.round(pct)
+          }
+        )
+      ]
+    }
+  );
+};
+const getStatusFromPercentage = (percentage, direction) => {
+  const pct = direction === "descending" ? 100 - percentage : percentage;
+  if (pct >= 80) return "normal";
+  if (pct >= 60) return "standby";
+  if (pct >= 40) return "caution";
+  if (pct >= 20) return "serious";
+  return "critical";
+};
+const MonitoringIcon = memo(function MonitoringIcon2({
+  status,
+  label,
+  sublabel,
+  icon = "mission",
+  notifications,
+  tooltip,
+  className = "",
+  onClick,
+  showPercentage = false,
+  percentage = 0,
+  percentageToStatus,
+  showPercentageValue = true
+}) {
+  const { tokens, mode, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const [showTooltip, setShowTooltip] = useState(false);
+  const effectiveStatus = percentageToStatus ? getStatusFromPercentage(percentage, percentageToStatus) : status;
+  const color = tokens.colors.status[effectiveStatus] || "#a4abb6";
+  const isLightTheme = mode === "light";
+  const borderColor = isLightTheme ? STATUS_BORDER_COLORS[effectiveStatus] : void 0;
+  const handleKeyDown = (e) => {
+    if (onClick && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+  const renderIcon = () => {
+    if (showPercentage) {
+      return renderPercentageArc(percentage, color, showPercentageValue, 48);
+    }
+    if (React.isValidElement(icon)) {
+      return icon;
+    }
+    if (typeof icon === "string" && isValidIconName(icon)) {
+      return /* @__PURE__ */ jsx(Icon, { name: icon, size: 24, color: "currentColor" });
+    }
+    const iconPath = typeof icon === "string" ? ICON_PATHS[icon] : void 0;
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        style: { width: 24, height: 24 },
+        "aria-hidden": "true",
+        children: iconPath ? /* @__PURE__ */ jsx("path", { d: iconPath }) : (
+          // Default mission icon
+          /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" })
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("zendir-monitoring-icon", className),
+      onClick,
+      onKeyDown: onClick ? handleKeyDown : void 0,
+      onMouseEnter: () => setShowTooltip(true),
+      onMouseLeave: () => setShowTooltip(false),
+      tabIndex: onClick ? 0 : void 0,
+      role: "status",
+      "aria-label": `${label}: ${sublabel ?? status}`,
+      style: {
+        position: "relative",
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: tokens.spacing.xs,
+        padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,
+        minWidth: 72,
+        backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+        ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
+        ...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
+        borderRadius: tokens.borderRadius.md,
+        cursor: onClick ? "pointer" : "default",
+        outline: "none",
+        transition: tokens.animation.fast
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color,
+              // Explicit sizing for predictable layout
+              width: showPercentage ? 48 : 24,
+              height: showPercentage ? 48 : 24
+            },
+            children: [
+              renderIcon(),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    transform: "translate(-35%, -35%)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: renderStatusSymbol(effectiveStatus, 9, color, borderColor, !isLightTheme)
+                }
+              ),
+              notifications !== void 0 && notifications > 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    right: 0,
+                    transform: "translate(40%, -40%)",
+                    minWidth: 16,
+                    height: 16,
+                    padding: "0 4px",
+                    borderRadius: tokens.borderRadius.full,
+                    backgroundColor: tokens.colors.status.critical,
+                    color: "#ffffff",
+                    fontSize: "0.625rem",
+                    // 10px in rem
+                    fontWeight: 700,
+                    // AstroUXDS bold for status values
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: notifications > 99 ? "99+" : notifications
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: tokens.typography.fontSize.xs,
+              fontWeight: tokens.typography.fontWeight.medium,
+              color: tokens.colors.text.secondary,
+              textTransform: "none",
+              // Astro uses sentence case, not uppercase
+              letterSpacing: tokens.typography.letterSpacing.normal,
+              whiteSpace: "nowrap"
+            },
+            children: label
+          }
+        ),
+        sublabel && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: tokens.typography.fontSize.sm,
+              fontWeight: tokens.typography.fontWeight.semibold,
+              fontVariantNumeric: "tabular-nums",
+              color: tokens.colors.text.primary
+            },
+            children: sublabel
+          }
+        ),
+        tooltip && showTooltip && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: "100%",
+              left: "50%",
+              transform: "translateX(-50%)",
+              marginBottom: 8,
+              padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+              backgroundColor: tokens.colors.background.overlay,
+              borderRadius: tokens.borderRadius.sm,
+              fontSize: tokens.typography.fontSize.sm,
+              color: tokens.colors.text.primary,
+              whiteSpace: "nowrap",
+              zIndex: 1e3,
+              pointerEvents: "none",
+              boxShadow: tokens.shadows.md
+            },
+            children: [
+              tooltip,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    top: "100%",
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    borderWidth: 4,
+                    borderStyle: "solid",
+                    borderColor: `${tokens.colors.background.overlay} transparent transparent transparent`
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  MonitoringIcon
+};
+//# sourceMappingURL=MonitoringIcon.js.map

package/dist/react/astro/MonitoringIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonitoringIcon.js","sources":["../../../src/react/astro/MonitoringIcon.tsx"],"sourcesContent":["/**\n * @zendir/ui - MonitoringIcon Component (Pure React)\n * \n * Status monitoring icon following Astro UX Design System patterns.\n * Displays a monitoring icon with status, label, and sub-label.\n * \n * Astro UX Compliance (https://www.astrouxds.com/components/icons-and-symbols/):\n * - Must include a label and status indicator\n * - Light theme requires border around status indicator\n * - Uses 6-level status color system\n * \n * Features:\n * - Status-based coloring with theme integration\n * - Notification badge\n * - Astro icon library support\n * - Light theme border support\n * - Tooltip support\n * - Keyboard accessible\n */\n\nimport React, { memo, useState } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames, type StatusLevel } from '../utils';\nimport { Icon, isValidIconName, type IconName } from '../core/Icon';\n\nexport type MonitoringStatus = StatusLevel;\n\nexport interface MonitoringIconProps {\n  /** Current status of the monitored item */\n  status: MonitoringStatus;\n  /** Primary label (always visible) */\n  label: string;\n  /** Sub-label for dynamic info (optional) */\n  sublabel?: string;\n  /** Icon name or custom icon element */\n  icon?: string | React.ReactNode;\n  /** Notification count badge */\n  notifications?: number;\n  /** Show tooltip on hover */\n  tooltip?: string;\n  /** Custom className */\n  className?: string;\n  /** Click handler */\n  onClick?: () => void;\n  \n  // === Percentage Arc Display (Astro UX) ===\n  /** \n   * Show percentage arc display instead of icon \n   * When true, displays a circular arc showing the percentage value\n   */\n  showPercentage?: boolean;\n  /** Percentage value (0-100) - displayed as arc when showPercentage is true */\n  percentage?: number;\n  /** Map percentage to status colors (e.g., low = critical, high = normal) */\n  percentageToStatus?: 'ascending' | 'descending';\n  /** Show percentage value as text inside the arc */\n  showPercentageValue?: boolean;\n}\n\n/**\n * Astro UX Status Colors (Light Theme - Border)\n * Required for light backgrounds per Astro UX\n */\nconst STATUS_BORDER_COLORS: Record<StatusLevel, string> = {\n  off: '#3c3e42',\n  standby: '#285766',\n  normal: '#005a00',\n  caution: '#645600',\n  serious: '#664618',\n  critical: '#661102',\n};\n\n/**\n * Render Astro-compliant status shape for MonitoringIcon\n * Shapes per https://www.astrouxds.com/patterns/status-system/\n * - Off: Circle (grey)\n * - Standby: Ring (cyan)\n * - Normal: Circle (green)\n * - Caution: Square (yellow)\n * - Serious: Diamond (orange)\n * - Critical: Triangle pointing down (red)\n */\nconst renderStatusSymbol = (\n  status: StatusLevel,\n  size: number,\n  fillColor: string,\n  borderColor?: string,\n  glow?: boolean,\n): React.ReactNode => {\n  const hasBorder = !!borderColor;\n  const strokeWidth = hasBorder ? 1 : 0;\n  const glowFilter = glow ? `drop-shadow(0 0 3px ${fillColor})` : undefined;\n  \n  switch (status) {\n    // Small filled circle: off\n    case 'off':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size} style={{ filter: glowFilter }}>\n          <circle cx=\"6\" cy=\"6\" r={hasBorder ? 2.5 : 3} fill={fillColor} stroke={borderColor} strokeWidth={strokeWidth} />\n        </svg>\n      );\n    \n    // Ring (donut): standby\n    case 'standby':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size} style={{ filter: glowFilter }}>\n          <circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={fillColor} strokeWidth=\"2\" />\n        </svg>\n      );\n    \n    // Filled circle: normal\n    case 'normal':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size} style={{ filter: glowFilter }}>\n          <circle cx=\"6\" cy=\"6\" r={hasBorder ? 4.5 : 5} fill={fillColor} stroke={borderColor} strokeWidth={strokeWidth} />\n        </svg>\n      );\n    \n    // Square shape: caution\n    case 'caution':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size} style={{ filter: glowFilter }}>\n          <rect\n            x={hasBorder ? 1.5 : 1}\n            y={hasBorder ? 1.5 : 1}\n            width={hasBorder ? 9 : 10}\n            height={hasBorder ? 9 : 10}\n            fill={fillColor}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        </svg>\n      );\n    \n    // Diamond shape: serious (rotated square)\n    case 'serious':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size} style={{ filter: glowFilter }}>\n          <polygon\n            points=\"6,1 11,6 6,11 1,6\"\n            fill={fillColor}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        </svg>\n      );\n    \n    // Triangle pointing down: critical\n    case 'critical':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size} style={{ filter: glowFilter }}>\n          <polygon\n            points=\"6,11 1,2 11,2\"\n            fill={fillColor}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        </svg>\n      );\n    \n    default:\n      return null;\n  }\n};\n\n/**\n * Astro UX Icon Library\n * Based on https://astro-components.netlify.app/?path=/story/components-icons--all-icons\n * \n * Categories: Astro (space/mission), Equipment, System\n */\nconst ICON_PATHS: Record<string, string> = {\n  // Astro Icons (Space/Mission)\n  thermal: 'M15 13V5c0-1.66-1.34-3-3-3S9 3.34 9 5v8c-1.21.91-2 2.37-2 4 0 2.76 2.24 5 5 5s5-2.24 5-5c0-1.63-.79-3.09-2-4zm-4-8c0-.55.45-1 1-1s1 .45 1 1h-1v1h1v2h-1v1h1v2h-2V5z',\n  'propulsion-power': 'M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42A6.92 6.92 0 0119 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.53 1.37-4.77 3.4-6l-1.42-1.42A8.962 8.962 0 003 12c0 4.97 4.03 9 9 9s9-4.03 9-9a8.96 8.96 0 00-4.17-7.83z',\n  payload: 'M17 3H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7V5h10v14zm-5-7c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3z',\n  netcom: 'M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z',\n  antenna: 'M12 5c-3.87 0-7 3.13-7 7h2c0-2.76 2.24-5 5-5s5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0 4c-1.66 0-3 1.34-3 3h2c0-.55.45-1 1-1s1 .45 1 1h2c0-1.66-1.34-3-3-3zm0-8C5.93 1 1 5.93 1 12h2c0-4.97 4.03-9 9-9s9 4.03 9 9h2c0-6.07-4.93-11-11-11z',\n  solar: 'M20 18V6c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zM6 6h12v4H6V6zm0 6h4v6H6v-6zm6 6v-6h6v6h-6z',\n  altitude: 'M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71L12 2z',\n  processor: 'M22 9V7h-2V5c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v2H2v2h2v2H2v2h2v2H2v2h2v2c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2v-2h-2V9h2zm-4 10H6V5h12v14zm-5-7h-2V8h2v4zm0 6h-2v-4h2v4z',\n  mission: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z',\n  equipment: 'M22 9V7h-2V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2v-2h-2V9h2zm-4 10H4V5h14v14zM6 13h5v4H6v-4zm6-6h4v3h-4V7zM6 7h5v5H6V7zm6 4h4v6h-4v-6z',\n  'satellite-transmit': 'M6 6L1 11l5 5 1.41-1.41L4.83 12l2.58-2.59L6 6zm6-4l-3 7 3 3 3-3-3-7zm6 4l-1.41 1.41L19.17 12l-2.58 2.59L18 16l5-5-5-5z',\n  'satellite-receive': 'M18 6l-1.41 1.41L19.17 10H6.83l2.58-2.59L8 6l-5 5 5 5 1.41-1.41L6.83 12h12.34l-2.58 2.59L18 16l5-5-5-5z',\n  'satellite-off': 'M1 21l5-5 1.41 1.41-5 5L1 21zm22-9l-5-5-1.41 1.41 5 5L23 12zm-9-9l-5 5 1.41 1.41 5-5L14 3z',\n  hardware: 'M17 3H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7V5h10v14zm-3-8h-4v2h4v-2z',\n  release: 'M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z',\n  // Legacy aliases\n  satellite: 'M6 6L1 11l5 5 1.41-1.41L4.83 12l2.58-2.59L6 6zm6-4l-3 7 3 3 3-3-3-7zm6 4l-1.41 1.41L19.17 12l-2.58 2.59L18 16l5-5-5-5z',\n  power: 'M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42A6.92 6.92 0 0119 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.53 1.37-4.77 3.4-6l-1.42-1.42A8.962 8.962 0 003 12c0 4.97 4.03 9 9 9s9-4.03 9-9a8.96 8.96 0 00-4.17-7.83z',\n  comms: 'M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z',\n};\n\n/**\n * Render percentage arc display (Astro UX pattern)\n * \n * Displays a circular arc showing a percentage value 0-100.\n * The arc fills clockwise from the top, with status-colored fill.\n */\nconst renderPercentageArc = (\n  percentage: number,\n  statusColor: string,\n  showValue: boolean = true,\n  size: number = 48,\n): React.ReactNode => {\n  // Clamp percentage to 0-100\n  const pct = Math.max(0, Math.min(100, percentage));\n  \n  // Arc geometry\n  const centerX = size / 2;\n  const centerY = size / 2;\n  const radius = (size / 2) - 4; // Leave room for stroke\n  const strokeWidth = 4;\n  const innerRadius = radius - strokeWidth / 2;\n  \n  // Calculate arc path\n  // Start at top (12 o'clock) and sweep clockwise\n  const startAngle = -90; // Start at top\n  const endAngle = startAngle + (pct / 100) * 360;\n  \n  // Convert to radians\n  const startRad = (startAngle * Math.PI) / 180;\n  const endRad = (endAngle * Math.PI) / 180;\n  \n  // Calculate start and end points\n  const startX = centerX + innerRadius * Math.cos(startRad);\n  const startY = centerY + innerRadius * Math.sin(startRad);\n  const endX = centerX + innerRadius * Math.cos(endRad);\n  const endY = centerY + innerRadius * Math.sin(endRad);\n  \n  // Determine if we need a large arc (> 180 degrees)\n  const largeArcFlag = pct > 50 ? 1 : 0;\n  \n  // Create arc path\n  const arcPath = pct > 0 && pct < 100\n    ? `M ${startX} ${startY} A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 1 ${endX} ${endY}`\n    : pct >= 100\n      ? `M ${centerX} ${centerY - innerRadius} A ${innerRadius} ${innerRadius} 0 1 1 ${centerX - 0.001} ${centerY - innerRadius}` // Full circle\n      : ''; // Empty when 0%\n  \n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox={`0 0 ${size} ${size}`}\n      style={{ display: 'block' }}\n    >\n      {/* Background circle (track) */}\n      <circle\n        cx={centerX}\n        cy={centerY}\n        r={innerRadius}\n        fill=\"none\"\n        stroke=\"rgba(255, 255, 255, 0.1)\"\n        strokeWidth={strokeWidth}\n      />\n      \n      {/* Progress arc */}\n      {arcPath && (\n        <path\n          d={arcPath}\n          fill=\"none\"\n          stroke={statusColor}\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          style={{\n            filter: `drop-shadow(0 0 4px ${statusColor}60)`,\n          }}\n        />\n      )}\n      \n      {/* Center value text */}\n      {showValue && (\n        <text\n          x={centerX}\n          y={centerY}\n          textAnchor=\"middle\"\n          dominantBaseline=\"central\"\n          fill={statusColor}\n          fontSize={size * 0.28}\n          fontWeight={600}\n          fontFamily=\"system-ui, -apple-system, sans-serif\"\n        >\n          {Math.round(pct)}\n        </text>\n      )}\n    </svg>\n  );\n};\n\n/**\n * Get status based on percentage value\n * - ascending: low values = critical, high values = normal\n * - descending: low values = normal, high values = critical\n */\nconst getStatusFromPercentage = (\n  percentage: number,\n  direction: 'ascending' | 'descending',\n): MonitoringStatus => {\n  const pct = direction === 'descending' ? 100 - percentage : percentage;\n  \n  if (pct >= 80) return 'normal';\n  if (pct >= 60) return 'standby';\n  if (pct >= 40) return 'caution';\n  if (pct >= 20) return 'serious';\n  return 'critical';\n};\n\n/**\n * MonitoringIcon - Pure React monitoring icon component\n * \n * Displays system status with icon, label, and optional notification badge.\n * Fully Astro UX compliant with theme integration.\n * \n * @example\n * ```tsx\n * // Standard monitoring icon\n * <MonitoringIcon \n *   status=\"normal\" \n *   label=\"Power\" \n *   sublabel=\"85%\"\n *   icon=\"power\"\n * />\n * \n * // Percentage arc display\n * <MonitoringIcon\n *   status=\"normal\"\n *   label=\"Battery\"\n *   showPercentage\n *   percentage={75}\n *   percentageToStatus=\"ascending\"\n * />\n * ```\n */\nexport const MonitoringIcon = memo(function MonitoringIcon({\n  status,\n  label,\n  sublabel,\n  icon = 'mission',\n  notifications,\n  tooltip,\n  className = '',\n  onClick,\n  showPercentage = false,\n  percentage = 0,\n  percentageToStatus,\n  showPercentageValue = true,\n}: MonitoringIconProps): React.ReactElement {\n  const { tokens, mode, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const [showTooltip, setShowTooltip] = useState(false);\n  \n  // Calculate effective status when using percentage-to-status mapping\n  const effectiveStatus = percentageToStatus \n    ? getStatusFromPercentage(percentage, percentageToStatus)\n    : status;\n  \n  // Get status color from theme\n  const color = tokens.colors.status[effectiveStatus] || '#a4abb6';\n  const isLightTheme = mode === 'light';\n  const borderColor = isLightTheme ? STATUS_BORDER_COLORS[effectiveStatus] : undefined;\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (onClick && (e.key === 'Enter' || e.key === ' ')) {\n      e.preventDefault();\n      onClick();\n    }\n  };\n\n  const renderIcon = () => {\n    // Percentage arc display mode\n    if (showPercentage) {\n      return renderPercentageArc(percentage, color, showPercentageValue, 48);\n    }\n    \n    // Custom React element\n    if (React.isValidElement(icon)) {\n      return icon;\n    }\n\n    // Use Icon component if valid icon name from core library\n    if (typeof icon === 'string' && isValidIconName(icon)) {\n      return <Icon name={icon as IconName} size={24} color=\"currentColor\" />;\n    }\n\n    // Fallback to legacy ICON_PATHS for backward compatibility\n    const iconPath = typeof icon === 'string' ? ICON_PATHS[icon] : undefined;\n    \n    return (\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        style={{ width: 24, height: 24 }}\n        aria-hidden=\"true\"\n      >\n        {iconPath ? (\n          <path d={iconPath} />\n        ) : (\n          // Default mission icon\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\n        )}\n      </svg>\n    );\n  };\n\n  return (\n    <div\n      className={classNames('zendir-monitoring-icon', className)}\n      onClick={onClick}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n      onMouseEnter={() => setShowTooltip(true)}\n      onMouseLeave={() => setShowTooltip(false)}\n      tabIndex={onClick ? 0 : undefined}\n      role=\"status\"\n      aria-label={`${label}: ${sublabel ?? status}`}\n      style={{\n        position: 'relative',\n        display: 'inline-flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        gap: tokens.spacing.xs,\n        padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\n        minWidth: 72,\n        backgroundColor: isTransparentTheme ? 'transparent' : tokens.colors.background.surface,\n        ...(isTransparentTheme && { backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)' as const }),\n        ...(tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` }),\n        borderRadius: tokens.borderRadius.md,\n        cursor: onClick ? 'pointer' : 'default',\n        outline: 'none',\n        transition: tokens.animation.fast,\n      }}\n    >\n      {/* Icon with status indicator */}\n      <div\n        style={{\n          position: 'relative',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          color,\n          // Explicit sizing for predictable layout\n          width: showPercentage ? 48 : 24,\n          height: showPercentage ? 48 : 24,\n        }}\n      >\n        {renderIcon()}\n        \n        {/* Status symbol - shape based on status per Astro UX */}\n        <span\n          style={{\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            transform: 'translate(-35%, -35%)',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          {renderStatusSymbol(effectiveStatus, 9, color, borderColor, !isLightTheme)}\n        </span>\n\n        {/* Notification badge */}\n        {notifications !== undefined && notifications > 0 && (\n          <span\n            style={{\n              position: 'absolute',\n              top: 0,\n              right: 0,\n              transform: 'translate(40%, -40%)',\n              minWidth: 16,\n              height: 16,\n              padding: '0 4px',\n              borderRadius: tokens.borderRadius.full,\n              backgroundColor: tokens.colors.status.critical,\n              color: '#ffffff',\n              fontSize: '0.625rem', // 10px in rem\n              fontWeight: 700, // AstroUXDS bold for status values\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n            }}\n          >\n            {notifications > 99 ? '99+' : notifications}\n          </span>\n        )}\n      </div>\n\n      {/* Label - sentence case per Astro UX */}\n      <span\n        style={{\n          fontSize: tokens.typography.fontSize.xs,\n          fontWeight: tokens.typography.fontWeight.medium,\n          color: tokens.colors.text.secondary,\n          textTransform: 'none', // Astro uses sentence case, not uppercase\n          letterSpacing: tokens.typography.letterSpacing.normal,\n          whiteSpace: 'nowrap',\n        }}\n      >\n        {label}\n      </span>\n\n      {/* Sublabel - dynamic value */}\n      {sublabel && (\n        <span\n          style={{\n            fontSize: tokens.typography.fontSize.sm,\n            fontWeight: tokens.typography.fontWeight.semibold,\n            fontVariantNumeric: 'tabular-nums',\n            color: tokens.colors.text.primary,\n          }}\n        >\n          {sublabel}\n        </span>\n      )}\n\n      {/* Tooltip */}\n      {tooltip && showTooltip && (\n        <div\n          style={{\n            position: 'absolute',\n            bottom: '100%',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            marginBottom: 8,\n            padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n            backgroundColor: tokens.colors.background.overlay,\n            borderRadius: tokens.borderRadius.sm,\n            fontSize: tokens.typography.fontSize.sm,\n            color: tokens.colors.text.primary,\n            whiteSpace: 'nowrap',\n            zIndex: 1000,\n            pointerEvents: 'none',\n            boxShadow: tokens.shadows.md,\n          }}\n        >\n          {tooltip}\n          {/* Tooltip arrow */}\n          <span\n            style={{\n              position: 'absolute',\n              top: '100%',\n              left: '50%',\n              transform: 'translateX(-50%)',\n              borderWidth: 4,\n              borderStyle: 'solid',\n              borderColor: `${tokens.colors.background.overlay} transparent transparent transparent`,\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n});\n"],"names":["MonitoringIcon"],"mappings":"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"}

package/dist/react/astro/Notification.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+
+export type NotificationStatus = 'standby' | 'normal' | 'caution' | 'serious' | 'critical';
+export interface NotificationProps {
+    /** Notification message */
+    message: string;
+    /** Status/severity of the notification */
+    status?: NotificationStatus;
+    /** Whether the notification is open/visible */
+    open?: boolean;
+    /** Auto-close after this many milliseconds */
+    closeAfter?: number;
+    /** Show close button */
+    closeable?: boolean;
+    /** Callback when notification is closed */
+    onClose?: () => void;
+    /** Custom className */
+    className?: string;
+    /** Child content (alternative to message prop) */
+    children?: React.ReactNode;
+}
+/**
+ * Notification - Pure React toast notification
+ *
+ * Displays alerts with status-based coloring and optional auto-dismiss.
+ *
+ * @example
+ * ```tsx
+ * <Notification
+ *   message="Telemetry received"
+ *   status="normal"
+ *   open={true}
+ * />
+ * <Notification
+ *   message="Link quality degraded"
+ *   status="caution"
+ *   closeAfter={5000}
+ *   onClose={() => {}}
+ * />
+ * ```
+ */
+export declare const Notification: React.NamedExoticComponent<NotificationProps>;

package/dist/react/astro/Notification.js

@@ -0,0 +1,156 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useEffect, useCallback } from "react";
+import { classNames } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const STATUS_ICONS = {
+  // Standby - Blue ring with info symbol
+  standby: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", opacity: "0.2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M11 11h2v6h-2v-6zm0-4h2v2h-2V7z" })
+  ] }),
+  // Normal - Green Circle with checkmark
+  normal: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 12.5l2 2 4-4", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  // Caution - Yellow Square with warning
+  caution: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M11 7h2v6h-2V7zm0 8h2v2h-2v-2z", fill: "#000" })
+  ] }),
+  // Serious - Orange Diamond with warning
+  serious: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 2l10 10-10 10L2 12z" }),
+    /* @__PURE__ */ jsx("path", { d: "M11 8h2v6h-2V8zm0 8h2v2h-2v-2z", fill: "#000" })
+  ] }),
+  // Critical - Red Triangle with exclamation
+  critical: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 2L2 20h20L12 2z" }),
+    /* @__PURE__ */ jsx("path", { d: "M11 9h2v6h-2V9zm0 8h2v2h-2v-2z", fill: "#fff" })
+  ] })
+};
+const Notification = memo(function Notification2({
+  message,
+  status = "standby",
+  open = true,
+  closeAfter,
+  closeable = true,
+  onClose,
+  className = "",
+  children
+}) {
+  const { tokens, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const [isVisible, setIsVisible] = useState(open);
+  const [isExiting, setIsExiting] = useState(false);
+  const closeTimeoutRef = useRef();
+  const color = tokens.colors.status[status] || tokens.colors.status.standby;
+  useEffect(() => {
+    return () => {
+      clearTimeout(closeTimeoutRef.current);
+    };
+  }, []);
+  const handleClose = useCallback(() => {
+    setIsExiting(true);
+    closeTimeoutRef.current = setTimeout(() => {
+      setIsVisible(false);
+      onClose == null ? void 0 : onClose();
+    }, 200);
+  }, [onClose]);
+  useEffect(() => {
+    setIsVisible(open);
+    setIsExiting(false);
+  }, [open]);
+  useEffect(() => {
+    if (closeAfter && isVisible) {
+      const timer = setTimeout(handleClose, closeAfter);
+      return () => clearTimeout(timer);
+    }
+  }, [closeAfter, isVisible, handleClose]);
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("zendir-notification", className),
+      role: "alert",
+      "aria-live": "polite",
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: tokens.spacing.md,
+        padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,
+        backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+        ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
+        borderLeft: `4px solid ${color}`,
+        borderRadius: tokens.borderRadius.md,
+        boxShadow: tokens.shadows.lg,
+        maxWidth: 400,
+        animation: isExiting ? "notificationExit 200ms ease-out forwards" : "notificationEnter 200ms ease-out"
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { color, flexShrink: 0, marginTop: 2 }, children: STATUS_ICONS[status] }),
+        /* @__PURE__ */ jsx("div", { style: {
+          flex: 1,
+          fontSize: tokens.typography.fontSize.base,
+          lineHeight: tokens.typography.lineHeight.normal,
+          color: tokens.colors.text.primary
+        }, children: children ?? message }),
+        closeable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleClose,
+            "aria-label": "Close notification",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 24,
+              height: 24,
+              padding: 0,
+              background: "transparent",
+              border: "none",
+              borderRadius: tokens.borderRadius.sm,
+              color: tokens.colors.text.secondary,
+              cursor: "pointer",
+              transition: tokens.animation.fast,
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "16", height: "16", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes notificationEnter {
+          from {
+            opacity: 0;
+            transform: translateX(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+        @keyframes notificationExit {
+          from {
+            opacity: 1;
+            transform: translateX(0);
+          }
+          to {
+            opacity: 0;
+            transform: translateX(20px);
+          }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .zendir-notification {
+            animation: none !important;
+          }
+        }
+      ` })
+      ]
+    }
+  );
+});
+export {
+  Notification
+};
+//# sourceMappingURL=Notification.js.map

package/dist/react/astro/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sources":["../../../src/react/astro/Notification.tsx"],"sourcesContent":["/**\n * @zendir/ui - Notification Component (Pure React)\n * \n * Toast notification following Astro UX Design System patterns.\n * \n * Features:\n * - Theme-integrated via useTheme()\n * - Status-based styling (standby, normal, caution, critical)\n * - Auto-dismiss support\n * - Close button\n * - Entrance/exit animations\n * - Accessible (live region for screen readers)\n */\n\nimport React, { memo, useEffect, useState, useCallback, useRef } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames } from '../utils';\n\nexport type NotificationStatus = 'standby' | 'normal' | 'caution' | 'serious' | 'critical';\n\nexport interface NotificationProps {\n  /** Notification message */\n  message: string;\n  /** Status/severity of the notification */\n  status?: NotificationStatus;\n  /** Whether the notification is open/visible */\n  open?: boolean;\n  /** Auto-close after this many milliseconds */\n  closeAfter?: number;\n  /** Show close button */\n  closeable?: boolean;\n  /** Callback when notification is closed */\n  onClose?: () => void;\n  /** Custom className */\n  className?: string;\n  /** Child content (alternative to message prop) */\n  children?: React.ReactNode;\n}\n\n/**\n * AstroUXDS Status Symbol Icons with Dual-Coding\n * \n * Each status has a unique shape for accessibility:\n * - standby: Ring (info)\n * - normal: Circle (checkmark)\n * - caution: Square (warning)\n * - serious: Diamond (warning)\n * - critical: Triangle (error)\n */\nconst STATUS_ICONS: Record<NotificationStatus, React.ReactNode> = {\n  // Standby - Blue ring with info symbol\n  standby: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" opacity=\"0.2\" />\n      <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" />\n      <path d=\"M11 11h2v6h-2v-6zm0-4h2v2h-2V7z\" />\n    </svg>\n  ),\n  // Normal - Green Circle with checkmark\n  normal: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M9 12.5l2 2 4-4\" fill=\"none\" stroke=\"#fff\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  ),\n  // Caution - Yellow Square with warning\n  caution: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" />\n      <path d=\"M11 7h2v6h-2V7zm0 8h2v2h-2v-2z\" fill=\"#000\" />\n    </svg>\n  ),\n  // Serious - Orange Diamond with warning\n  serious: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n      <path d=\"M12 2l10 10-10 10L2 12z\" />\n      <path d=\"M11 8h2v6h-2V8zm0 8h2v2h-2v-2z\" fill=\"#000\" />\n    </svg>\n  ),\n  // Critical - Red Triangle with exclamation\n  critical: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n      <path d=\"M12 2L2 20h20L12 2z\" />\n      <path d=\"M11 9h2v6h-2V9zm0 8h2v2h-2v-2z\" fill=\"#fff\" />\n    </svg>\n  ),\n};\n\n/**\n * Notification - Pure React toast notification\n * \n * Displays alerts with status-based coloring and optional auto-dismiss.\n * \n * @example\n * ```tsx\n * <Notification \n *   message=\"Telemetry received\" \n *   status=\"normal\" \n *   open={true}\n * />\n * <Notification \n *   message=\"Link quality degraded\" \n *   status=\"caution\" \n *   closeAfter={5000}\n *   onClose={() => {}}\n * />\n * ```\n */\nexport const Notification = memo(function Notification({\n  message,\n  status = 'standby',\n  open = true,\n  closeAfter,\n  closeable = true,\n  onClose,\n  className = '',\n  children,\n}: NotificationProps): React.ReactElement | null {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const [isVisible, setIsVisible] = useState(open);\n  const [isExiting, setIsExiting] = useState(false);\n  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout>>();\n  const color = tokens.colors.status[status] || tokens.colors.status.standby;\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => { clearTimeout(closeTimeoutRef.current); };\n  }, []);\n\n  const handleClose = useCallback(() => {\n    setIsExiting(true);\n    closeTimeoutRef.current = setTimeout(() => {\n      setIsVisible(false);\n      onClose?.();\n    }, 200);\n  }, [onClose]);\n\n  useEffect(() => {\n    setIsVisible(open);\n    setIsExiting(false);\n  }, [open]);\n\n  useEffect(() => {\n    if (closeAfter && isVisible) {\n      const timer = setTimeout(handleClose, closeAfter);\n      return () => clearTimeout(timer);\n    }\n  }, [closeAfter, isVisible, handleClose]);\n\n  if (!isVisible) return null;\n\n  return (\n    <div\n      className={classNames('zendir-notification', className)}\n      role=\"alert\"\n      aria-live=\"polite\"\n      style={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        gap: tokens.spacing.md,\n        padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,\n        backgroundColor: isTransparentTheme ? 'transparent' : tokens.colors.background.surface,\n        ...(isTransparentTheme && { backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)' as const }),\n        borderLeft: `4px solid ${color}`,\n        borderRadius: tokens.borderRadius.md,\n        boxShadow: tokens.shadows.lg,\n        maxWidth: 400,\n        animation: isExiting\n          ? 'notificationExit 200ms ease-out forwards'\n          : 'notificationEnter 200ms ease-out',\n      }}\n    >\n      {/* Status icon */}\n      <span style={{ color, flexShrink: 0, marginTop: 2 }}>\n        {STATUS_ICONS[status]}\n      </span>\n\n      {/* Content */}\n      <div style={{ \n        flex: 1, \n        fontSize: tokens.typography.fontSize.base, \n        lineHeight: tokens.typography.lineHeight.normal,\n        color: tokens.colors.text.primary,\n      }}>\n        {children ?? message}\n      </div>\n\n      {/* Close button */}\n      {closeable && (\n        <button\n          onClick={handleClose}\n          aria-label=\"Close notification\"\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            width: 24,\n            height: 24,\n            padding: 0,\n            background: 'transparent',\n            border: 'none',\n            borderRadius: tokens.borderRadius.sm,\n            color: tokens.colors.text.secondary,\n            cursor: 'pointer',\n            transition: tokens.animation.fast,\n            flexShrink: 0,\n          }}\n        >\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"16\" height=\"16\">\n            <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n          </svg>\n        </button>\n      )}\n\n      {/* Animations — respects prefers-reduced-motion (WCAG 2.3.3) */}\n      <style>{`\n        @keyframes notificationEnter {\n          from {\n            opacity: 0;\n            transform: translateX(20px);\n          }\n          to {\n            opacity: 1;\n            transform: translateX(0);\n          }\n        }\n        @keyframes notificationExit {\n          from {\n            opacity: 1;\n            transform: translateX(0);\n          }\n          to {\n            opacity: 0;\n            transform: translateX(20px);\n          }\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .zendir-notification {\n            animation: none !important;\n          }\n        }\n      `}</style>\n    </div>\n  );\n});\n"],"names":["Notification"],"mappings":"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"}