@zendir/ui 0.5.0 → 0.6.1

package/dist/react/astro/StatusIndicator.js

@@ -1,173 +1,240 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo } from "react";
 import { useTheme } from "../theme/ThemeProvider.js";
 import { classNames } from "../utils/index.js";
-const STATUS_COLORS_DARK = {
-  off: "#a4abb6",
-  standby: "#2dccff",
-  normal: "#56f000",
-  caution: "#fce83a",
-  serious: "#ffb302",
-  critical: "#ff3838"
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/astro/StatusIndicator.tsx
+/**
+* @zendir/ui - StatusIndicator Component (Pure React)
+*
+* Displays status symbols following Astro UX Design System patterns.
+* Uses the same 6-level status system: off, standby, normal, caution, serious, critical.
+*
+* Shapes per Astro UX (https://www.astrouxds.com/patterns/status-system/):
+* - Off: Circle (grey)
+* - Standby: Ring (cyan)
+* - Normal: Circle (green)
+* - Caution: Square (yellow)
+* - Serious: Diamond (orange)
+* - Critical: Triangle pointing down (red)
+*
+* Features:
+* - Dual coding (color + shape) for accessibility (WCAG 2.1 AA)
+* - Animated pulse for active states
+* - Light theme border support
+* - Theme-connected via useTheme()
+* - Keyboard accessible
+* - Screen reader support
+*/
+/**
+* Astro UX Status Colors (Dark Theme)
+* https://www.astrouxds.com/patterns/status-system/
+*/
+var STATUS_COLORS_DARK = {
+	off: "#a4abb6",
+	standby: "#2dccff",
+	normal: "#56f000",
+	caution: "#fce83a",
+	serious: "#ffb302",
+	critical: "#ff3838"
 };
-const STATUS_COLORS_LIGHT_FILL = {
-  off: "#7b8089",
-  standby: "#64d9ff",
-  normal: "#00e200",
-  caution: "#fad800",
-  serious: "#ffaf3d",
-  critical: "#ff2a04"
+/**
+* Astro UX Status Colors (Light Theme - Fill)
+* Requires border for WCAG AA compliance
+*/
+var STATUS_COLORS_LIGHT_FILL = {
+	off: "#7b8089",
+	standby: "#64d9ff",
+	normal: "#00e200",
+	caution: "#fad800",
+	serious: "#ffaf3d",
+	critical: "#ff2a04"
 };
-const STATUS_COLORS_LIGHT_BORDER = {
-  off: "#3c3e42",
-  standby: "#285766",
-  normal: "#005a00",
-  caution: "#645600",
-  serious: "#664618",
-  critical: "#661102"
+/**
+* Astro UX Status Colors (Light Theme - Border)
+* Required for light backgrounds per Astro UX
+*/
+var STATUS_COLORS_LIGHT_BORDER = {
+	off: "#3c3e42",
+	standby: "#285766",
+	normal: "#005a00",
+	caution: "#645600",
+	serious: "#664618",
+	critical: "#661102"
 };
-const STATUS_ARIA_LABELS = {
-  off: "Status: Off",
-  standby: "Status: Standby",
-  normal: "Status: Normal",
-  caution: "Status: Caution",
-  serious: "Status: Serious",
-  critical: "Status: Critical"
+var STATUS_ARIA_LABELS = {
+	off: "Status: Off",
+	standby: "Status: Standby",
+	normal: "Status: Normal",
+	caution: "Status: Caution",
+	serious: "Status: Serious",
+	critical: "Status: Critical"
 };
-const renderStatusShape = (status, size, fillColor, borderColor) => {
-  const hasBorder = !!borderColor;
-  const strokeWidth = hasBorder ? 1.5 : 0;
-  switch (status) {
-    case "off":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: hasBorder ? 2.5 : 3, fill: fillColor, stroke: borderColor, strokeWidth }) });
-    case "standby":
-      return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 12 12", width: size, height: size, children: [
-        /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: fillColor, strokeWidth: "2" }),
-        hasBorder && /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "4.75", fill: "none", stroke: borderColor, strokeWidth })
-      ] });
-    case "normal":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, 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, 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, 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, children: /* @__PURE__ */ jsx(
-        "polygon",
-        {
-          points: "6,11 1,2 11,2",
-          fill: fillColor,
-          stroke: borderColor,
-          strokeWidth
-        }
-      ) });
-    default:
-      return null;
-  }
+/**
+* Render Astro-compliant status shape
+* Shapes per https://www.astrouxds.com/patterns/status-system/
+*/
+var renderStatusShape = (status, size, fillColor, borderColor) => {
+	const hasBorder = !!borderColor;
+	const strokeWidth = hasBorder ? 1.5 : 0;
+	switch (status) {
+		case "off": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: hasBorder ? 2.5 : 3,
+				fill: fillColor,
+				stroke: borderColor,
+				strokeWidth
+			})
+		});
+		case "standby": return /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "3.5",
+				fill: "none",
+				stroke: fillColor,
+				strokeWidth: "2"
+			}), hasBorder && /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "4.75",
+				fill: "none",
+				stroke: borderColor,
+				strokeWidth
+			})]
+		});
+		case "normal": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			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,
+			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,
+			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,
+			children: /* @__PURE__ */ jsx("polygon", {
+				points: "6,11 1,2 11,2",
+				fill: fillColor,
+				stroke: borderColor,
+				strokeWidth
+			})
+		});
+		default: return null;
+	}
 };
-const StatusIndicator = memo(function StatusIndicator2({
-  status,
-  label,
-  small = false,
-  pulse = false,
-  bordered,
-  className = "",
-  onClick
-}) {
-  const { tokens, mode } = useTheme();
-  const isLightTheme = mode === "light";
-  const showBorder = bordered ?? isLightTheme;
-  const fillColor = isLightTheme ? STATUS_COLORS_LIGHT_FILL[status] : tokens.colors.status[status] || STATUS_COLORS_DARK[status];
-  const borderColor = showBorder ? STATUS_COLORS_LIGHT_BORDER[status] : void 0;
-  const size = small ? 10 : 14;
-  const shouldPulse = pulse || status === "critical";
-  const isCircle = status === "off" || status === "standby" || status === "normal";
-  const handleKeyDown = (e) => {
-    if (onClick && (e.key === "Enter" || e.key === " ")) {
-      e.preventDefault();
-      onClick();
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames("zendir-status-indicator", className),
-      onClick,
-      onKeyDown: onClick ? handleKeyDown : void 0,
-      tabIndex: onClick ? 0 : void 0,
-      role: "status",
-      "aria-label": `${STATUS_ARIA_LABELS[status]}${label ? `: ${label}` : ""}`,
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: small ? 4 : 6,
-        cursor: onClick ? "pointer" : "default",
-        outline: "none"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "span",
-          {
-            style: {
-              position: "relative",
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: size,
-              height: size,
-              flexShrink: 0
-            },
-            children: [
-              shouldPulse && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    position: "absolute",
-                    inset: -3,
-                    borderRadius: isCircle ? "50%" : 0,
-                    backgroundColor: fillColor,
-                    opacity: 0.3,
-                    animation: "statusPulse 2s ease-out infinite"
-                  }
-                }
-              ),
-              renderStatusShape(status, size, fillColor, borderColor)
-            ]
-          }
-        ),
-        label && /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              fontSize: small ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm,
-              fontWeight: tokens.typography.fontWeight.medium,
-              color: "inherit",
-              whiteSpace: "nowrap",
-              letterSpacing: tokens.typography.letterSpacing.normal
-            },
-            children: label
-          }
-        ),
-        /* @__PURE__ */ jsx("style", { children: `
+/**
+* StatusIndicator - Pure React status component
+*
+* Displays standardized status symbols following Astro UX design patterns.
+* Uses dual-coding (color + shape) for WCAG 2.1 AA accessibility compliance.
+*
+* @example
+* ```tsx
+* <StatusIndicator status="normal" label="Power System" />
+* <StatusIndicator status="caution" label="Battery Low" />
+* <StatusIndicator status="critical" label="Comm Loss" pulse />
+* ```
+*/
+var StatusIndicator = memo(function StatusIndicator({ status, label, small = false, pulse = false, bordered, className = "", onClick }) {
+	const { tokens, mode } = useTheme();
+	const isLightTheme = mode === "light";
+	const showBorder = bordered ?? isLightTheme;
+	const fillColor = isLightTheme ? STATUS_COLORS_LIGHT_FILL[status] : tokens.colors.status[status] || STATUS_COLORS_DARK[status];
+	const borderColor = showBorder ? STATUS_COLORS_LIGHT_BORDER[status] : void 0;
+	const size = small ? 10 : 14;
+	const shouldPulse = pulse || status === "critical";
+	const isCircle = status === "off" || status === "standby" || status === "normal";
+	const handleKeyDown = (e) => {
+		if (onClick && (e.key === "Enter" || e.key === " ")) {
+			e.preventDefault();
+			onClick();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-status-indicator", className),
+		onClick,
+		onKeyDown: onClick ? handleKeyDown : void 0,
+		tabIndex: onClick ? 0 : void 0,
+		role: "status",
+		"aria-label": `${STATUS_ARIA_LABELS[status]}${label ? `: ${label}` : ""}`,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: small ? 4 : 6,
+			cursor: onClick ? "pointer" : "default",
+			outline: "none"
+		},
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				style: {
+					position: "relative",
+					display: "inline-flex",
+					alignItems: "center",
+					justifyContent: "center",
+					width: size,
+					height: size,
+					flexShrink: 0
+				},
+				children: [shouldPulse && /* @__PURE__ */ jsx("span", { style: {
+					position: "absolute",
+					inset: -3,
+					borderRadius: isCircle ? "50%" : 0,
+					backgroundColor: fillColor,
+					opacity: .3,
+					animation: "statusPulse 2s ease-out infinite"
+				} }), renderStatusShape(status, size, fillColor, borderColor)]
+			}),
+			label && /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: small ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm,
+					fontWeight: tokens.typography.fontWeight.medium,
+					color: "inherit",
+					whiteSpace: "nowrap",
+					letterSpacing: tokens.typography.letterSpacing.normal
+				},
+				children: label
+			}),
+			/* @__PURE__ */ jsx("style", { children: `
         @keyframes statusPulse {
           0% { transform: scale(1); opacity: 0.3; }
           50% { transform: scale(1.5); opacity: 0; }
@@ -179,11 +246,10 @@ const StatusIndicator = memo(function StatusIndicator2({
           }
         }
       ` })
-      ]
-    }
-  );
+		]
+	});
 });
-export {
-  StatusIndicator
-};
-//# sourceMappingURL=StatusIndicator.js.map
+//#endregion
+export { StatusIndicator };
+
+//# sourceMappingURL=StatusIndicator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.js","sources":["../../../src/react/astro/StatusIndicator.tsx"],"sourcesContent":["/**\n * @zendir/ui - StatusIndicator Component (Pure React)\n * \n * Displays status symbols following Astro UX Design System patterns.\n * Uses the same 6-level status system: off, standby, normal, caution, serious, critical.\n * \n * Shapes per Astro UX (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 * \n * Features:\n * - Dual coding (color + shape) for accessibility (WCAG 2.1 AA)\n * - Animated pulse for active states\n * - Light theme border support\n * - Theme-connected via useTheme()\n * - Keyboard accessible\n * - Screen reader support\n */\n\nimport React, { memo } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames, type StatusLevel } from '../utils';\n\nexport type StatusVariant = StatusLevel;\n\nexport interface StatusIndicatorProps {\n  /** Status variant - determines color and shape */\n  status: StatusVariant;\n  /** Status label text */\n  label?: string;\n  /** Smaller size variant */\n  small?: boolean;\n  /** Show pulse animation for active states */\n  pulse?: boolean;\n  /** Show border (required for light theme per Astro UX) */\n  bordered?: boolean;\n  /** Custom className */\n  className?: string;\n  /** Click handler */\n  onClick?: () => void;\n}\n\n/**\n * Astro UX Status Colors (Dark Theme)\n * https://www.astrouxds.com/patterns/status-system/\n */\nconst STATUS_COLORS_DARK: Record<StatusVariant, string> = {\n  off: '#a4abb6',\n  standby: '#2dccff',\n  normal: '#56f000',\n  caution: '#fce83a',\n  serious: '#ffb302',\n  critical: '#ff3838',\n};\n\n/**\n * Astro UX Status Colors (Light Theme - Fill)\n * Requires border for WCAG AA compliance\n */\nconst STATUS_COLORS_LIGHT_FILL: Record<StatusVariant, string> = {\n  off: '#7b8089',\n  standby: '#64d9ff',\n  normal: '#00e200',\n  caution: '#fad800',\n  serious: '#ffaf3d',\n  critical: '#ff2a04',\n};\n\n/**\n * Astro UX Status Colors (Light Theme - Border)\n * Required for light backgrounds per Astro UX\n */\nconst STATUS_COLORS_LIGHT_BORDER: Record<StatusVariant, string> = {\n  off: '#3c3e42',\n  standby: '#285766',\n  normal: '#005a00',\n  caution: '#645600',\n  serious: '#664618',\n  critical: '#661102',\n};\n\nconst STATUS_ARIA_LABELS: Record<StatusVariant, string> = {\n  off: 'Status: Off',\n  standby: 'Status: Standby',\n  normal: 'Status: Normal',\n  caution: 'Status: Caution',\n  serious: 'Status: Serious',\n  critical: 'Status: Critical',\n};\n\n/**\n * Render Astro-compliant status shape\n * Shapes per https://www.astrouxds.com/patterns/status-system/\n */\nconst renderStatusShape = (\n  status: StatusVariant,\n  size: number,\n  fillColor: string,\n  borderColor?: string,\n): React.ReactNode => {\n  const hasBorder = !!borderColor;\n  const strokeWidth = hasBorder ? 1.5 : 0;\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}>\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}>\n          <circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={fillColor} strokeWidth=\"2\" />\n          {hasBorder && <circle cx=\"6\" cy=\"6\" r=\"4.75\" fill=\"none\" stroke={borderColor} strokeWidth={strokeWidth} />}\n        </svg>\n      );\n    \n    // Filled circle: normal\n    case 'normal':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size}>\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}>\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}>\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}>\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 * StatusIndicator - Pure React status component\n * \n * Displays standardized status symbols following Astro UX design patterns.\n * Uses dual-coding (color + shape) for WCAG 2.1 AA accessibility compliance.\n * \n * @example\n * ```tsx\n * <StatusIndicator status=\"normal\" label=\"Power System\" />\n * <StatusIndicator status=\"caution\" label=\"Battery Low\" />\n * <StatusIndicator status=\"critical\" label=\"Comm Loss\" pulse />\n * ```\n */\nexport const StatusIndicator = memo(function StatusIndicator({\n  status,\n  label,\n  small = false,\n  pulse = false,\n  bordered,\n  className = '',\n  onClick,\n}: StatusIndicatorProps): React.ReactElement {\n  const { tokens, mode } = useTheme();\n  \n  // Determine if we need borders (light theme or explicitly requested)\n  const isLightTheme = mode === 'light';\n  const showBorder = bordered ?? isLightTheme;\n  \n  // Get colors from theme or use Astro defaults\n  const fillColor = isLightTheme \n    ? STATUS_COLORS_LIGHT_FILL[status]\n    : (tokens.colors.status[status] || STATUS_COLORS_DARK[status]);\n  const borderColor = showBorder ? STATUS_COLORS_LIGHT_BORDER[status] : undefined;\n  \n  const size = small ? 10 : 14;\n  const shouldPulse = pulse || status === 'critical';\n  const isCircle = status === 'off' || status === 'standby' || status === 'normal';\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (onClick && (e.key === 'Enter' || e.key === ' ')) {\n      e.preventDefault();\n      onClick();\n    }\n  };\n\n  return (\n    <div\n      className={classNames('zendir-status-indicator', className)}\n      onClick={onClick}\n      onKeyDown={onClick ? handleKeyDown : undefined}\n      tabIndex={onClick ? 0 : undefined}\n      role=\"status\"\n      aria-label={`${STATUS_ARIA_LABELS[status]}${label ? `: ${label}` : ''}`}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: small ? 4 : 6,\n        cursor: onClick ? 'pointer' : 'default',\n        outline: 'none',\n      }}\n    >\n      {/* Status symbol with dual-coding */}\n      <span\n        style={{\n          position: 'relative',\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: size,\n          height: size,\n          flexShrink: 0,\n        }}\n      >\n        {/* Pulse animation ring */}\n        {shouldPulse && (\n          <span\n            style={{\n              position: 'absolute',\n              inset: -3,\n              borderRadius: isCircle ? '50%' : 0,\n              backgroundColor: fillColor,\n              opacity: 0.3,\n              animation: 'statusPulse 2s ease-out infinite',\n            }}\n          />\n        )}\n        \n        {/* Astro-compliant status shape */}\n        {renderStatusShape(status, size, fillColor, borderColor)}\n      </span>\n\n      {/* Label with theme typography */}\n      {label && (\n        <span\n          style={{\n            fontSize: small ? tokens.typography.fontSize.xs : tokens.typography.fontSize.sm,\n            fontWeight: tokens.typography.fontWeight.medium,\n            color: 'inherit',\n            whiteSpace: 'nowrap',\n            letterSpacing: tokens.typography.letterSpacing.normal,\n          }}\n        >\n          {label}\n        </span>\n      )}\n\n      {/* Keyframe animation — paused when prefers-reduced-motion is active */}\n      <style>{`\n        @keyframes statusPulse {\n          0% { transform: scale(1); opacity: 0.3; }\n          50% { transform: scale(1.5); opacity: 0; }\n          100% { transform: scale(1); opacity: 0; }\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .zendir-status-indicator span[style*=\"statusPulse\"] {\n            animation: none !important;\n          }\n        }\n      `}</style>\n    </div>\n  );\n});\n"],"names":["StatusIndicator"],"mappings":"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"}
+{"version":3,"file":"StatusIndicator.js","names":[],"sources":["../../../src/react/astro/StatusIndicator.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - StatusIndicator Component (Pure React)\r\n *\r\n * Displays status symbols following Astro UX Design System patterns.\r\n * Uses the same 6-level status system: off, standby, normal, caution, serious, critical.\r\n *\r\n * Shapes per Astro UX (https://www.astrouxds.com/patterns/status-system/):\r\n * - Off: Circle (grey)\r\n * - Standby: Ring (cyan)\r\n * - Normal: Circle (green)\r\n * - Caution: Square (yellow)\r\n * - Serious: Diamond (orange)\r\n * - Critical: Triangle pointing down (red)\r\n *\r\n * Features:\r\n * - Dual coding (color + shape) for accessibility (WCAG 2.1 AA)\r\n * - Animated pulse for active states\r\n * - Light theme border support\r\n * - Theme-connected via useTheme()\r\n * - Keyboard accessible\r\n * - Screen reader support\r\n */\r\n\r\nimport React, { memo } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport { classNames, type StatusLevel } from \"../utils\";\r\n\r\nexport type StatusVariant = StatusLevel;\r\n\r\nexport interface StatusIndicatorProps {\r\n  /** Status variant - determines color and shape */\r\n  status: StatusVariant;\r\n  /** Status label text */\r\n  label?: string;\r\n  /** Smaller size variant */\r\n  small?: boolean;\r\n  /** Show pulse animation for active states */\r\n  pulse?: boolean;\r\n  /** Show border (required for light theme per Astro UX) */\r\n  bordered?: boolean;\r\n  /** Custom className */\r\n  className?: string;\r\n  /** Click handler */\r\n  onClick?: () => void;\r\n}\r\n\r\n/**\r\n * Astro UX Status Colors (Dark Theme)\r\n * https://www.astrouxds.com/patterns/status-system/\r\n */\r\nconst STATUS_COLORS_DARK: Record<StatusVariant, string> = {\r\n  off: \"#a4abb6\",\r\n  standby: \"#2dccff\",\r\n  normal: \"#56f000\",\r\n  caution: \"#fce83a\",\r\n  serious: \"#ffb302\",\r\n  critical: \"#ff3838\",\r\n};\r\n\r\n/**\r\n * Astro UX Status Colors (Light Theme - Fill)\r\n * Requires border for WCAG AA compliance\r\n */\r\nconst STATUS_COLORS_LIGHT_FILL: Record<StatusVariant, string> = {\r\n  off: \"#7b8089\",\r\n  standby: \"#64d9ff\",\r\n  normal: \"#00e200\",\r\n  caution: \"#fad800\",\r\n  serious: \"#ffaf3d\",\r\n  critical: \"#ff2a04\",\r\n};\r\n\r\n/**\r\n * Astro UX Status Colors (Light Theme - Border)\r\n * Required for light backgrounds per Astro UX\r\n */\r\nconst STATUS_COLORS_LIGHT_BORDER: Record<StatusVariant, string> = {\r\n  off: \"#3c3e42\",\r\n  standby: \"#285766\",\r\n  normal: \"#005a00\",\r\n  caution: \"#645600\",\r\n  serious: \"#664618\",\r\n  critical: \"#661102\",\r\n};\r\n\r\nconst STATUS_ARIA_LABELS: Record<StatusVariant, string> = {\r\n  off: \"Status: Off\",\r\n  standby: \"Status: Standby\",\r\n  normal: \"Status: Normal\",\r\n  caution: \"Status: Caution\",\r\n  serious: \"Status: Serious\",\r\n  critical: \"Status: Critical\",\r\n};\r\n\r\n/**\r\n * Render Astro-compliant status shape\r\n * Shapes per https://www.astrouxds.com/patterns/status-system/\r\n */\r\nconst renderStatusShape = (\r\n  status: StatusVariant,\r\n  size: number,\r\n  fillColor: string,\r\n  borderColor?: string,\r\n): React.ReactNode => {\r\n  const hasBorder = !!borderColor;\r\n  const strokeWidth = hasBorder ? 1.5 : 0;\r\n\r\n  switch (status) {\r\n    // Small filled circle: off\r\n    case \"off\":\r\n      return (\r\n        <svg viewBox=\"0 0 12 12\" width={size} height={size}>\r\n          <circle\r\n            cx=\"6\"\r\n            cy=\"6\"\r\n            r={hasBorder ? 2.5 : 3}\r\n            fill={fillColor}\r\n            stroke={borderColor}\r\n            strokeWidth={strokeWidth}\r\n          />\r\n        </svg>\r\n      );\r\n\r\n    // Ring (donut): standby\r\n    case \"standby\":\r\n      return (\r\n        <svg viewBox=\"0 0 12 12\" width={size} height={size}>\r\n          <circle\r\n            cx=\"6\"\r\n            cy=\"6\"\r\n            r=\"3.5\"\r\n            fill=\"none\"\r\n            stroke={fillColor}\r\n            strokeWidth=\"2\"\r\n          />\r\n          {hasBorder && (\r\n            <circle\r\n              cx=\"6\"\r\n              cy=\"6\"\r\n              r=\"4.75\"\r\n              fill=\"none\"\r\n              stroke={borderColor}\r\n              strokeWidth={strokeWidth}\r\n            />\r\n          )}\r\n        </svg>\r\n      );\r\n\r\n    // Filled circle: normal\r\n    case \"normal\":\r\n      return (\r\n        <svg viewBox=\"0 0 12 12\" width={size} height={size}>\r\n          <circle\r\n            cx=\"6\"\r\n            cy=\"6\"\r\n            r={hasBorder ? 4.5 : 5}\r\n            fill={fillColor}\r\n            stroke={borderColor}\r\n            strokeWidth={strokeWidth}\r\n          />\r\n        </svg>\r\n      );\r\n\r\n    // Square shape: caution\r\n    case \"caution\":\r\n      return (\r\n        <svg viewBox=\"0 0 12 12\" width={size} height={size}>\r\n          <rect\r\n            x={hasBorder ? 1.5 : 1}\r\n            y={hasBorder ? 1.5 : 1}\r\n            width={hasBorder ? 9 : 10}\r\n            height={hasBorder ? 9 : 10}\r\n            fill={fillColor}\r\n            stroke={borderColor}\r\n            strokeWidth={strokeWidth}\r\n          />\r\n        </svg>\r\n      );\r\n\r\n    // Diamond shape: serious (rotated square)\r\n    case \"serious\":\r\n      return (\r\n        <svg viewBox=\"0 0 12 12\" width={size} height={size}>\r\n          <polygon\r\n            points=\"6,1 11,6 6,11 1,6\"\r\n            fill={fillColor}\r\n            stroke={borderColor}\r\n            strokeWidth={strokeWidth}\r\n          />\r\n        </svg>\r\n      );\r\n\r\n    // Triangle pointing down: critical\r\n    case \"critical\":\r\n      return (\r\n        <svg viewBox=\"0 0 12 12\" width={size} height={size}>\r\n          <polygon\r\n            points=\"6,11 1,2 11,2\"\r\n            fill={fillColor}\r\n            stroke={borderColor}\r\n            strokeWidth={strokeWidth}\r\n          />\r\n        </svg>\r\n      );\r\n\r\n    default:\r\n      return null;\r\n  }\r\n};\r\n\r\n/**\r\n * StatusIndicator - Pure React status component\r\n *\r\n * Displays standardized status symbols following Astro UX design patterns.\r\n * Uses dual-coding (color + shape) for WCAG 2.1 AA accessibility compliance.\r\n *\r\n * @example\r\n * ```tsx\r\n * <StatusIndicator status=\"normal\" label=\"Power System\" />\r\n * <StatusIndicator status=\"caution\" label=\"Battery Low\" />\r\n * <StatusIndicator status=\"critical\" label=\"Comm Loss\" pulse />\r\n * ```\r\n */\r\nexport const StatusIndicator = memo(function StatusIndicator({\r\n  status,\r\n  label,\r\n  small = false,\r\n  pulse = false,\r\n  bordered,\r\n  className = \"\",\r\n  onClick,\r\n}: StatusIndicatorProps): React.ReactElement {\r\n  const { tokens, mode } = useTheme();\r\n\r\n  // Determine if we need borders (light theme or explicitly requested)\r\n  const isLightTheme = mode === \"light\";\r\n  const showBorder = bordered ?? isLightTheme;\r\n\r\n  // Get colors from theme or use Astro defaults\r\n  const fillColor = isLightTheme\r\n    ? STATUS_COLORS_LIGHT_FILL[status]\r\n    : tokens.colors.status[status] || STATUS_COLORS_DARK[status];\r\n  const borderColor = showBorder\r\n    ? STATUS_COLORS_LIGHT_BORDER[status]\r\n    : undefined;\r\n\r\n  const size = small ? 10 : 14;\r\n  const shouldPulse = pulse || status === \"critical\";\r\n  const isCircle =\r\n    status === \"off\" || status === \"standby\" || status === \"normal\";\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent) => {\r\n    if (onClick && (e.key === \"Enter\" || e.key === \" \")) {\r\n      e.preventDefault();\r\n      onClick();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={classNames(\"zendir-status-indicator\", className)}\r\n      onClick={onClick}\r\n      onKeyDown={onClick ? handleKeyDown : undefined}\r\n      tabIndex={onClick ? 0 : undefined}\r\n      role=\"status\"\r\n      aria-label={`${STATUS_ARIA_LABELS[status]}${label ? `: ${label}` : \"\"}`}\r\n      style={{\r\n        display: \"inline-flex\",\r\n        alignItems: \"center\",\r\n        gap: small ? 4 : 6,\r\n        cursor: onClick ? \"pointer\" : \"default\",\r\n        outline: \"none\",\r\n      }}\r\n    >\r\n      {/* Status symbol with dual-coding */}\r\n      <span\r\n        style={{\r\n          position: \"relative\",\r\n          display: \"inline-flex\",\r\n          alignItems: \"center\",\r\n          justifyContent: \"center\",\r\n          width: size,\r\n          height: size,\r\n          flexShrink: 0,\r\n        }}\r\n      >\r\n        {/* Pulse animation ring */}\r\n        {shouldPulse && (\r\n          <span\r\n            style={{\r\n              position: \"absolute\",\r\n              inset: -3,\r\n              borderRadius: isCircle ? \"50%\" : 0,\r\n              backgroundColor: fillColor,\r\n              opacity: 0.3,\r\n              animation: \"statusPulse 2s ease-out infinite\",\r\n            }}\r\n          />\r\n        )}\r\n\r\n        {/* Astro-compliant status shape */}\r\n        {renderStatusShape(status, size, fillColor, borderColor)}\r\n      </span>\r\n\r\n      {/* Label with theme typography */}\r\n      {label && (\r\n        <span\r\n          style={{\r\n            fontSize: small\r\n              ? tokens.typography.fontSize.xs\r\n              : tokens.typography.fontSize.sm,\r\n            fontWeight: tokens.typography.fontWeight.medium,\r\n            color: \"inherit\",\r\n            whiteSpace: \"nowrap\",\r\n            letterSpacing: tokens.typography.letterSpacing.normal,\r\n          }}\r\n        >\r\n          {label}\r\n        </span>\r\n      )}\r\n\r\n      {/* Keyframe animation — paused when prefers-reduced-motion is active */}\r\n      <style>{`\r\n        @keyframes statusPulse {\r\n          0% { transform: scale(1); opacity: 0.3; }\r\n          50% { transform: scale(1.5); opacity: 0; }\r\n          100% { transform: scale(1); opacity: 0; }\r\n        }\r\n        @media (prefers-reduced-motion: reduce) {\r\n          .zendir-status-indicator span[style*=\"statusPulse\"] {\r\n            animation: none !important;\r\n          }\r\n        }\r\n      `}</style>\r\n    </div>\r\n  );\r\n});\r\n"],"mappings":"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"}

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

@@ -1,11 +1,10 @@
 import { default as React } from 'react';
 import { CategoryDef } from '../types';
-
 /** Filter key for events with no team accent (use with `TimelineFilter.teams`). */
 export declare const TIMELINE_FILTER_TEAM_NONE = "__zendir_team_none__";
 /** Filter key for legacy accent color only (no structured `team.id`). */
 export declare const TIMELINE_FILTER_TEAM_LEGACY = "__zendir_team_legacy__";
-export type TimelineViewMode = 'list' | 'chart' | 'scatter';
+export type TimelineViewMode = "list" | "chart" | "scatter";
 /**
  * Team / category identity on the timeline.
  *
@@ -16,7 +15,7 @@ export type TimelineViewMode = 'list' | 'chart' | 'scatter';
  * Because it extends `CategoryDef`, a `TimelineTeam` value can be used
  * anywhere a `CategoryDef` is expected (e.g. `CategoryPalette` constructor).
  */
-export interface TimelineTeam extends Omit<CategoryDef, 'label'> {
+export interface TimelineTeam extends Omit<CategoryDef, "label"> {
     /** Human-readable name (tooltips, search, filter pills). Optional for backward compat. */
     label?: string;
 }
@@ -32,18 +31,18 @@ export interface TimelineEvent {
     /** Track/category this event belongs to */
     track?: string;
     /** Status for coloring */
-    status?: 'off' | 'standby' | 'normal' | 'caution' | 'serious' | 'critical';
+    status?: "off" | "standby" | "normal" | "caution" | "serious" | "critical";
     /** Badge text */
     badge?: string;
     /** Badge variant - uses AstroUXDS status terms */
-    badgeVariant?: 'default' | 'primary' | 'normal' | 'caution' | 'serious' | 'critical';
+    badgeVariant?: "default" | "primary" | "normal" | "caution" | "serious" | "critical";
     /** Subtitle/description */
     subtitle?: string;
     /** Additional timestamps to display in list view */
     timestamps?: {
         label: string;
         value: string;
-        status?: 'normal' | 'standby' | 'caution' | 'serious' | 'critical' | 'off';
+        status?: "normal" | "standby" | "caution" | "serious" | "critical" | "off";
     }[];
     /** Arguments/metadata */
     arguments?: Record<string, string | number | boolean>;
@@ -78,16 +77,16 @@ export interface TimelineTrackDef {
     /** Track height in pixels */
     height?: number;
 }
-export type TimeFormat = 'relative' | 'absolute' | 'utc';
+export type TimeFormat = "relative" | "absolute" | "utc";
 export interface TimelineFilter {
     /** Filter by track IDs (empty / omitted = all tracks) */
     tracks?: string[];
     /** Filter by display status (multi-select; empty / omitted = all) */
-    status?: TimelineEvent['status'][];
+    status?: TimelineEvent["status"][];
     /** Case-insensitive match on title, subtitle, badge, track, argument values */
     search?: string;
     /** Duration shape: point (no end or zero length), range (has end after start), all */
-    eventShape?: 'all' | 'point' | 'range';
+    eventShape?: "all" | "point" | "range";
     /**
      * Filter by team keys from `getTimelineTeamFilterKey` (e.g. `"42"`, `"alpha"`).
      * Include `TIMELINE_FILTER_TEAM_NONE` / `TIMELINE_FILTER_TEAM_LEGACY` when those buckets exist in data.
@@ -99,7 +98,7 @@ export interface TimelineFilter {
     teamColoredOnly?: boolean;
 }
 /** Display status used for filtering and markers (badgeVariant overrides raw status when set). */
-export declare function getTimelineEventDisplayStatus(event: TimelineEvent): TimelineEvent['status'];
+export declare function getTimelineEventDisplayStatus(event: TimelineEvent): TimelineEvent["status"];
 export declare function isTimelineFilterActive(filter: TimelineFilter): boolean;
 export declare function matchesTimelineFilter(event: TimelineEvent, filter: TimelineFilter): boolean;
 export interface UnifiedTimelineProps {