@sudobility/devops-components-rn 1.0.0 → 1.0.1

package/dist/{index.esm.js → index.mjs}

@@ -1,6 +1,6 @@
 import require$$0 from "react";
-import { Modal, View, Text, Pressable, ActivityIndicator, FlatList } from "react-native";
-import { cn } from "@sudobility/components-rn";
+import { View, Text, Pressable, ScrollView } from "react-native";
+import { Card, cn } from "@sudobility/components-rn";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -929,665 +929,685 @@ function requireJsxRuntime() {
   return jsxRuntime.exports;
 }
 var jsxRuntimeExports = requireJsxRuntime();
-const variantClasses = {
-  default: {
-    iconBg: "bg-blue-100 dark:bg-blue-900/30",
-    icon: "text-blue-600 dark:text-blue-400",
-    button: "bg-blue-600 active:bg-blue-700"
-  },
-  danger: {
-    iconBg: "bg-red-100 dark:bg-red-900/30",
-    icon: "text-red-600 dark:text-red-400",
-    button: "bg-red-600 active:bg-red-700"
+const statusConfig$1 = {
+  operational: {
+    color: "bg-green-500",
+    darkColor: "dark:bg-green-400",
+    label: "Operational"
   },
-  warning: {
-    iconBg: "bg-yellow-100 dark:bg-yellow-900/30",
-    icon: "text-yellow-600 dark:text-yellow-400",
-    button: "bg-yellow-600 active:bg-yellow-700"
+  degraded: {
+    color: "bg-yellow-500",
+    darkColor: "dark:bg-yellow-400",
+    label: "Degraded"
   },
-  success: {
-    iconBg: "bg-green-100 dark:bg-green-900/30",
-    icon: "text-green-600 dark:text-green-400",
-    button: "bg-green-600 active:bg-green-700"
+  "major-outage": {
+    color: "bg-red-500",
+    darkColor: "dark:bg-red-400",
+    label: "Major Outage"
   }
 };
-const variantIcons = {
-  default: "ℹ️",
-  danger: "⚠️",
-  warning: "⚠️",
-  success: "✓"
-};
-const AlertDialog = ({
-  isOpen,
-  onClose,
-  title,
+const SystemStatusIndicator = ({
+  status,
+  systemName,
   description,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  onConfirm,
-  variant = "default",
-  showCancel = true,
-  confirmDisabled = false,
-  loading = false,
-  className,
-  ...props
+  lastChecked,
+  onPress,
+  className
 }) => {
-  const handleConfirm = () => {
-    if (!confirmDisabled && !loading) {
-      onConfirm();
-    }
-  };
-  const styles = variantClasses[variant];
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Modal,
-    {
-      visible: isOpen,
-      transparent: true,
-      animationType: "fade",
-      onRequestClose: onClose,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-1 justify-center items-center bg-black/50 p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  const config = statusConfig$1[status];
+  const content = /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: cn("p-4", className), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
         View,
         {
           className: cn(
-            "w-full max-w-md bg-white dark:bg-gray-900 rounded-lg shadow-xl",
-            className
-          ),
-          ...props,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "p-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-start gap-4", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                View,
-                {
-                  className: cn(
-                    "w-12 h-12 rounded-full items-center justify-center",
-                    styles.iconBg
-                  ),
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: cn("text-xl", styles.icon), children: variantIcons[variant] })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-1", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: typeof title === "string" ? title : null }),
-                typeof title !== "string" && title,
-                description && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm text-gray-600 dark:text-gray-400", children: typeof description === "string" ? description : null }),
-                typeof description !== "string" && description
-              ] })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row gap-3 px-6 py-4 bg-gray-50 dark:bg-gray-800/50 rounded-b-lg", children: [
-              showCancel && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Pressable,
-                {
-                  onPress: onClose,
-                  disabled: loading,
-                  accessibilityRole: "button",
-                  className: cn(
-                    "flex-1 px-4 py-2 rounded-md border",
-                    "bg-white dark:bg-gray-700",
-                    "border-gray-300 dark:border-gray-600",
-                    loading && "opacity-50"
-                  ),
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm font-medium text-center text-gray-700 dark:text-gray-300", children: cancelLabel })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Pressable,
-                {
-                  onPress: handleConfirm,
-                  disabled: confirmDisabled || loading,
-                  accessibilityRole: "button",
-                  className: cn(
-                    "flex-1 px-4 py-2 rounded-md",
-                    styles.button,
-                    (confirmDisabled || loading) && "opacity-50"
-                  ),
-                  children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center justify-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityIndicator, { size: "small", color: "white" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm font-medium text-white", children: "Loading..." })
-                  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm font-medium text-center text-white", children: confirmLabel })
-                }
-              )
-            ] })
-          ]
+            "w-3 h-3 rounded-full mr-3",
+            config.color,
+            config.darkColor
+          )
         }
-      ) })
-    }
-  );
-};
-const ApiPlayground = ({
-  className,
-  children,
-  disabled = false,
-  onPress,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Pressable,
-  {
-    onPress: disabled ? void 0 : onPress,
-    disabled,
-    accessibilityRole: "button",
-    accessibilityLabel: "API Playground",
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "ApiPlayground Component" })
-  }
-);
-const ApiReference = ({
-  className,
-  children,
-  disabled,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  View,
-  {
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    accessibilityLabel: "API Reference",
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "ApiReference Component" })
-  }
-);
-const AuditLog = ({
-  className,
-  children,
-  disabled,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  View,
-  {
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    accessibilityLabel: "Audit Log",
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "AuditLog Component" })
-  }
-);
-const BodyMetrics = ({
-  className,
-  children,
-  disabled,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  View,
-  {
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    accessibilityLabel: "Body Metrics",
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "BodyMetrics Component" })
-  }
-);
-const BuildLog = ({
-  className,
-  children,
-  disabled = false,
-  onPress,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Pressable,
-  {
-    onPress: disabled ? void 0 : onPress,
-    disabled,
-    accessibilityRole: "button",
-    accessibilityLabel: "Build Log",
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "BuildLog Component" })
-  }
-);
-const ChangelogDisplay = ({
-  className,
-  children,
-  disabled,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  View,
-  {
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    accessibilityLabel: "Changelog Display",
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "ChangelogDisplay Component" })
-  }
-);
-const CodePlayground = ({
-  className,
-  children,
-  disabled = false,
-  onPress,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Pressable,
-  {
-    onPress: disabled ? void 0 : onPress,
-    disabled,
-    accessibilityRole: "button",
-    accessibilityLabel: "Code Playground",
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "CodePlayground Component" })
-  }
-);
-const ConflictResolver = ({
-  className,
-  children,
-  disabled = false,
-  onPress,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Pressable,
-  {
-    onPress: disabled ? void 0 : onPress,
-    disabled,
-    accessibilityRole: "button",
-    accessibilityLabel: "Conflict Resolver",
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "ConflictResolver Component" })
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: systemName }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Text,
+          {
+            className: cn(
+              "text-sm",
+              status === "operational" && "text-green-600 dark:text-green-400",
+              status === "degraded" && "text-yellow-600 dark:text-yellow-400",
+              status === "major-outage" && "text-red-600 dark:text-red-400"
+            ),
+            children: config.label
+          }
+        )
+      ] })
+    ] }),
+    description && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: description }),
+    lastChecked && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { className: "mt-2 text-xs text-gray-500 dark:text-gray-500", children: [
+      "Last checked: ",
+      lastChecked.toLocaleString()
+    ] })
+  ] });
+  if (onPress) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Pressable, { onPress, accessibilityRole: "button", children: content });
   }
-);
-const DealPipeline = ({
-  className,
-  children,
-  disabled,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  View,
-  {
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    accessibilityLabel: "Deal Pipeline",
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "DealPipeline Component" })
+  return content;
+};
+const stateConfig = {
+  pending: {
+    color: "text-gray-600 dark:text-gray-400",
+    bgColor: "bg-gray-100",
+    darkBgColor: "dark:bg-gray-800",
+    label: "Pending",
+    icon: "⏳"
+  },
+  building: {
+    color: "text-blue-600 dark:text-blue-400",
+    bgColor: "bg-blue-100",
+    darkBgColor: "dark:bg-blue-900",
+    label: "Building",
+    icon: "🔨"
+  },
+  deploying: {
+    color: "text-purple-600 dark:text-purple-400",
+    bgColor: "bg-purple-100",
+    darkBgColor: "dark:bg-purple-900",
+    label: "Deploying",
+    icon: "🚀"
+  },
+  success: {
+    color: "text-green-600 dark:text-green-400",
+    bgColor: "bg-green-100",
+    darkBgColor: "dark:bg-green-900",
+    label: "Success",
+    icon: "✓"
+  },
+  failed: {
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-100",
+    darkBgColor: "dark:bg-red-900",
+    label: "Failed",
+    icon: "✗"
+  },
+  cancelled: {
+    color: "text-orange-600 dark:text-orange-400",
+    bgColor: "bg-orange-100",
+    darkBgColor: "dark:bg-orange-900",
+    label: "Cancelled",
+    icon: "⊘"
   }
-);
+};
+const formatDuration$1 = (seconds) => {
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  if (minutes < 60) return `${minutes}m ${remainingSeconds}s`;
+  const hours = Math.floor(minutes / 60);
+  const remainingMinutes = minutes % 60;
+  return `${hours}h ${remainingMinutes}m`;
+};
 const DeploymentStatus = ({
-  className,
-  children,
-  disabled = false,
+  state,
+  environment,
+  version,
+  timestamp,
+  commitHash,
+  commitMessage,
+  duration,
   onPress,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Pressable,
-  {
-    onPress: disabled ? void 0 : onPress,
-    disabled,
-    accessibilityRole: "button",
-    accessibilityLabel: "Deployment Status",
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "DeploymentStatus Component" })
-  }
-);
-const DriverLog = ({
-  className,
-  children,
-  disabled,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  View,
-  {
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    accessibilityLabel: "Driver Log",
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "DriverLog Component" })
-  }
-);
-const MemoryUsage = ({
-  className,
-  children,
-  disabled,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  View,
-  {
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    accessibilityLabel: "Memory Usage",
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "MemoryUsage Component" })
-  }
-);
-const colorClasses = {
-  blue: "text-blue-600 dark:text-blue-400",
-  green: "text-green-600 dark:text-green-400",
-  purple: "text-purple-600 dark:text-purple-400",
-  orange: "text-orange-600 dark:text-orange-400",
-  pink: "text-pink-600 dark:text-pink-400",
-  gray: "text-gray-600 dark:text-gray-400"
-};
-const MetricCard = ({ metric }) => {
-  const colorClass = metric.color ? colorClasses[metric.color] : colorClasses.blue;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 items-center mb-4 mx-2", children: [
-    metric.icon && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("mb-4", colorClass), children: metric.icon }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "gap-2 items-center", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: cn("text-3xl font-bold", colorClass), children: metric.value }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-600 dark:text-gray-400 font-medium", children: metric.label }),
-      metric.trend && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  className
+}) => {
+  const config = stateConfig[state];
+  const content = /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: cn("p-4", className), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-row items-start justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          View,
+          {
+            className: cn(
+              "px-2 py-1 rounded-md mr-2",
+              config.bgColor,
+              config.darkBgColor
+            ),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { className: cn("text-xs font-medium", config.color), children: [
+              config.icon,
+              " ",
+              config.label
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-md", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: environment }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "mt-2 text-base font-semibold text-gray-900 dark:text-gray-100", children: version }),
+      commitHash && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "mt-1 text-sm font-mono text-gray-600 dark:text-gray-400", children: commitHash.substring(0, 7) }),
+      commitMessage && /* @__PURE__ */ jsxRuntimeExports.jsx(
         Text,
         {
-          className: cn(
-            "text-sm font-semibold",
-            metric.trend.direction === "up" ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"
-          ),
-          children: [
-            metric.trend.direction === "up" ? "↑" : "↓",
-            " ",
-            metric.trend.value
-          ]
+          className: "mt-1 text-sm text-gray-600 dark:text-gray-400",
+          numberOfLines: 2,
+          children: commitMessage
         }
       )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center justify-between mt-3 pt-3 border-t border-gray-200 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-xs text-gray-500 dark:text-gray-500", children: timestamp.toLocaleString() }),
+      duration !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { className: "text-xs text-gray-500 dark:text-gray-500", children: [
+        "Duration: ",
+        formatDuration$1(duration)
+      ] })
     ] })
   ] });
+  if (onPress) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Pressable, { onPress, accessibilityRole: "button", children: content });
+  }
+  return content;
 };
-const MetricsGrid = ({
+const levelConfig = {
+  info: {
+    color: "text-blue-600 dark:text-blue-400",
+    bgColor: "bg-blue-50",
+    darkBgColor: "dark:bg-blue-950",
+    prefix: "INFO"
+  },
+  warn: {
+    color: "text-yellow-600 dark:text-yellow-400",
+    bgColor: "bg-yellow-50",
+    darkBgColor: "dark:bg-yellow-950",
+    prefix: "WARN"
+  },
+  error: {
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-50",
+    darkBgColor: "dark:bg-red-950",
+    prefix: "ERROR"
+  },
+  debug: {
+    color: "text-gray-600 dark:text-gray-400",
+    bgColor: "bg-gray-50",
+    darkBgColor: "dark:bg-gray-900",
+    prefix: "DEBUG"
+  },
+  success: {
+    color: "text-green-600 dark:text-green-400",
+    bgColor: "bg-green-50",
+    darkBgColor: "dark:bg-green-950",
+    prefix: "SUCCESS"
+  }
+};
+const formatTime = (date) => {
+  return date.toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+};
+const BuildLog = ({
+  entries,
   title,
-  description,
-  metrics,
-  columns = 2,
-  className,
-  ...props
+  maxHeight = 400,
+  showTimestamp = true,
+  showSource = false,
+  className
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: cn("py-8 px-4", className), ...props, children: [
-    (title || description) && /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "items-center mb-8", children: [
-      title && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center", children: title }),
-      description && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-lg text-gray-600 dark:text-gray-300 text-center max-w-lg", children: description })
-    ] }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: cn("overflow-hidden", className), children: [
+    title && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "px-4 py-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: title }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      FlatList,
+      ScrollView,
       {
-        data: metrics,
-        keyExtractor: (_, index) => index.toString(),
-        numColumns: columns > 2 ? 2 : columns,
-        renderItem: ({ item }) => /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetricCard, { metric: item }) }),
-        scrollEnabled: false
+        style: { maxHeight },
+        className: "bg-gray-900 dark:bg-black",
+        showsVerticalScrollIndicator: true,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "p-3", children: entries.map((entry) => {
+          const config = levelConfig[entry.level];
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            View,
+            {
+              className: cn(
+                "flex-row flex-wrap py-1 px-2 mb-1 rounded",
+                config.bgColor,
+                config.darkBgColor
+              ),
+              children: [
+                showTimestamp && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { className: "font-mono text-xs text-gray-500 dark:text-gray-500 mr-2", children: [
+                  "[",
+                  formatTime(entry.timestamp),
+                  "]"
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  Text,
+                  {
+                    className: cn(
+                      "font-mono text-xs font-bold mr-2",
+                      config.color
+                    ),
+                    children: [
+                      "[",
+                      config.prefix,
+                      "]"
+                    ]
+                  }
+                ),
+                showSource && entry.source && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { className: "font-mono text-xs text-gray-400 dark:text-gray-600 mr-2", children: [
+                  "[",
+                  entry.source,
+                  "]"
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "font-mono text-xs text-gray-200 dark:text-gray-300 flex-1", children: entry.message })
+              ]
+            },
+            entry.id
+          );
+        }) })
       }
-    )
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "px-4 py-2 bg-gray-800 dark:bg-gray-950 border-t border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { className: "text-xs text-gray-400 dark:text-gray-500", children: [
+      entries.length,
+      " log entries"
+    ] }) })
   ] });
 };
-const PipelineView = ({
-  className,
-  children,
-  disabled = false,
-  onPress,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Pressable,
-  {
-    onPress: disabled ? void 0 : onPress,
-    disabled,
-    accessibilityRole: "button",
-    accessibilityLabel: "Pipeline View",
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "PipelineView Component" })
-  }
-);
-const RegressionTest = ({
-  className,
-  children,
-  disabled,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  View,
-  {
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    accessibilityLabel: "Regression Test",
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "RegressionTest Component" })
-  }
-);
-const statusConfig = {
-  operational: {
-    color: "bg-green-500",
-    textColor: "text-green-700 dark:text-green-400",
-    label: "Operational"
-  },
-  degraded: {
-    color: "bg-yellow-500",
-    textColor: "text-yellow-700 dark:text-yellow-400",
-    label: "Degraded Performance"
-  },
-  partial: {
-    color: "bg-orange-500",
-    textColor: "text-orange-700 dark:text-orange-400",
-    label: "Partial Outage"
-  },
-  major: {
-    color: "bg-red-500",
-    textColor: "text-red-700 dark:text-red-400",
-    label: "Major Outage"
-  },
-  maintenance: {
-    color: "bg-blue-500",
-    textColor: "text-blue-700 dark:text-blue-400",
-    label: "Under Maintenance"
-  }
+const formatChange = (change) => {
+  const sign = change >= 0 ? "+" : "";
+  return sign + change.toFixed(1) + "%";
 };
-const SystemStatusIndicator = ({
-  status,
-  label,
-  showPulse = true,
-  className,
-  ...props
+const MetricsGrid = ({
+  metrics,
+  columns = 2,
+  onMetricPress,
+  className
 }) => {
-  const config = statusConfig[status];
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    View,
-    {
-      className: cn("flex-row items-center gap-2", className),
-      accessibilityRole: "text",
-      accessibilityLabel: `System status: ${label || config.label}`,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("w-3 h-3 rounded-full", config.color) }),
-          showPulse && status === "operational" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+  const columnWidthClass = {
+    1: "w-full",
+    2: "w-1/2",
+    3: "w-1/3",
+    4: "w-1/4"
+  }[columns];
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: cn("flex-row flex-wrap -m-1", className), children: metrics.map((metric) => {
+    const content = /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: "p-4 m-1 flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-start justify-between", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: metric.label }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-baseline", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-gray-100", children: metric.value }),
+          metric.unit && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm text-gray-500 dark:text-gray-500 ml-1", children: metric.unit })
+        ] }),
+        metric.change !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center mt-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
             View,
             {
               className: cn(
-                "absolute inset-0 rounded-full opacity-75",
-                config.color
+                "px-1.5 py-0.5 rounded",
+                metric.change >= 0 ? "bg-green-100 dark:bg-green-900" : "bg-red-100 dark:bg-red-900"
+              ),
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Text,
+                {
+                  className: cn(
+                    "text-xs font-medium",
+                    metric.change >= 0 ? "text-green-700 dark:text-green-300" : "text-red-700 dark:text-red-300"
+                  ),
+                  children: formatChange(metric.change)
+                }
               )
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: cn("text-sm font-medium", config.textColor), children: label || config.label })
-      ]
+          ),
+          metric.changeLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-xs text-gray-500 dark:text-gray-500 ml-2", children: metric.changeLabel })
+        ] })
+      ] }),
+      metric.icon && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "ml-2", children: metric.icon })
+    ] }) });
+    if (onMetricPress) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: columnWidthClass, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Pressable,
+        {
+          onPress: () => onMetricPress(metric),
+          accessibilityRole: "button",
+          accessibilityLabel: metric.label + ": " + metric.value + (metric.unit || ""),
+          children: content
+        }
+      ) }, metric.id);
     }
-  );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: columnWidthClass, children: content }, metric.id);
+  }) });
 };
-const TestResult = ({
-  className,
-  children,
-  disabled,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  View,
-  {
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    accessibilityLabel: "Test Result",
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "TestResult Component" })
-  }
-);
-const TestRunner = ({
-  className,
-  children,
-  disabled = false,
-  onPress,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Pressable,
-  {
-    onPress: disabled ? void 0 : onPress,
-    disabled,
-    accessibilityRole: "button",
-    accessibilityLabel: "Test Runner",
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "TestRunner Component" })
-  }
-);
-const WebhookLogger = ({
-  className,
-  children,
-  disabled,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  View,
-  {
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    accessibilityLabel: "Webhook Logger",
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "WebhookLogger Component" })
-  }
-);
-const WorkflowBuilder = ({
-  className,
-  children,
-  disabled = false,
-  onPress,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Pressable,
-  {
-    onPress: disabled ? void 0 : onPress,
-    disabled,
-    accessibilityRole: "button",
-    accessibilityLabel: "Workflow Builder",
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "WorkflowBuilder Component" })
+const actionConfig = {
+  create: {
+    color: "text-green-700 dark:text-green-300",
+    bgColor: "bg-green-100",
+    darkBgColor: "dark:bg-green-900",
+    icon: "+"
+  },
+  update: {
+    color: "text-blue-700 dark:text-blue-300",
+    bgColor: "bg-blue-100",
+    darkBgColor: "dark:bg-blue-900",
+    icon: "~"
+  },
+  delete: {
+    color: "text-red-700 dark:text-red-300",
+    bgColor: "bg-red-100",
+    darkBgColor: "dark:bg-red-900",
+    icon: "-"
+  },
+  login: {
+    color: "text-purple-700 dark:text-purple-300",
+    bgColor: "bg-purple-100",
+    darkBgColor: "dark:bg-purple-900",
+    icon: "→"
+  },
+  logout: {
+    color: "text-gray-700 dark:text-gray-300",
+    bgColor: "bg-gray-100",
+    darkBgColor: "dark:bg-gray-800",
+    icon: "←"
+  },
+  access: {
+    color: "text-cyan-700 dark:text-cyan-300",
+    bgColor: "bg-cyan-100",
+    darkBgColor: "dark:bg-cyan-900",
+    icon: "◉"
+  },
+  export: {
+    color: "text-orange-700 dark:text-orange-300",
+    bgColor: "bg-orange-100",
+    darkBgColor: "dark:bg-orange-900",
+    icon: "↑"
+  },
+  import: {
+    color: "text-teal-700 dark:text-teal-300",
+    bgColor: "bg-teal-100",
+    darkBgColor: "dark:bg-teal-900",
+    icon: "↓"
+  },
+  approve: {
+    color: "text-emerald-700 dark:text-emerald-300",
+    bgColor: "bg-emerald-100",
+    darkBgColor: "dark:bg-emerald-900",
+    icon: "✓"
+  },
+  reject: {
+    color: "text-rose-700 dark:text-rose-300",
+    bgColor: "bg-rose-100",
+    darkBgColor: "dark:bg-rose-900",
+    icon: "✗"
+  },
+  deploy: {
+    color: "text-indigo-700 dark:text-indigo-300",
+    bgColor: "bg-indigo-100",
+    darkBgColor: "dark:bg-indigo-900",
+    icon: "▲"
+  },
+  rollback: {
+    color: "text-amber-700 dark:text-amber-300",
+    bgColor: "bg-amber-100",
+    darkBgColor: "dark:bg-amber-900",
+    icon: "↺"
   }
-);
-const WorkflowTemplate = ({
-  className,
-  children,
-  disabled = false,
-  onPress,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Pressable,
-  {
-    onPress: disabled ? void 0 : onPress,
-    disabled,
-    accessibilityRole: "button",
-    accessibilityLabel: "Workflow Template",
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
-    ),
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "WorkflowTemplate Component" })
+};
+const formatTimestamp = (date) => {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 6e4);
+  const diffHours = Math.floor(diffMs / 36e5);
+  const diffDays = Math.floor(diffMs / 864e5);
+  if (diffMins < 1) return "Just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+};
+const AuditLog = ({
+  entries,
+  title,
+  maxHeight = 500,
+  onEntryPress,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: cn("overflow-hidden", className), children: [
+    title && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "px-4 py-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: title }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollView, { style: { maxHeight }, showsVerticalScrollIndicator: true, children: entries.map((entry, index) => {
+      const config = actionConfig[entry.action];
+      const isLast = index === entries.length - 1;
+      const content = /* @__PURE__ */ jsxRuntimeExports.jsx(
+        View,
+        {
+          className: cn(
+            "px-4 py-3",
+            !isLast && "border-b border-gray-100 dark:border-gray-800"
+          ),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-start", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              View,
+              {
+                className: cn(
+                  "w-8 h-8 rounded-full items-center justify-center mr-3",
+                  config.bgColor,
+                  config.darkBgColor
+                ),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: cn("text-sm font-bold", config.color), children: config.icon })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center flex-wrap", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: entry.actor.name }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { className: "text-sm text-gray-600 dark:text-gray-400 mx-1", children: [
+                  entry.action,
+                  "d"
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: entry.resource.name })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center mt-1", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  View,
+                  {
+                    className: cn(
+                      "px-1.5 py-0.5 rounded mr-2",
+                      config.bgColor,
+                      config.darkBgColor
+                    ),
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Text,
+                      {
+                        className: cn(
+                          "text-xs font-medium uppercase",
+                          config.color
+                        ),
+                        children: entry.action
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-xs text-gray-500 dark:text-gray-500", children: entry.resource.type })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center mt-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-xs text-gray-400 dark:text-gray-600", children: formatTimestamp(entry.timestamp) }),
+                entry.ipAddress && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { className: "text-xs text-gray-400 dark:text-gray-600 ml-2", children: [
+                  "IP: ",
+                  entry.ipAddress
+                ] })
+              ] })
+            ] })
+          ] })
+        }
+      );
+      if (onEntryPress) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Pressable,
+          {
+            onPress: () => onEntryPress(entry),
+            accessibilityRole: "button",
+            children: content
+          },
+          entry.id
+        );
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(View, { children: content }, entry.id);
+    }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "px-4 py-2 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { className: "text-xs text-gray-500 dark:text-gray-500", children: [
+      "Showing ",
+      entries.length,
+      " audit entries"
+    ] }) })
+  ] });
+};
+const statusConfig = {
+  pending: {
+    color: "text-gray-600 dark:text-gray-400",
+    bgColor: "bg-gray-100",
+    darkBgColor: "dark:bg-gray-800",
+    borderColor: "border-gray-300 dark:border-gray-600",
+    icon: "○"
+  },
+  running: {
+    color: "text-blue-600 dark:text-blue-400",
+    bgColor: "bg-blue-100",
+    darkBgColor: "dark:bg-blue-900",
+    borderColor: "border-blue-400 dark:border-blue-500",
+    icon: "◐"
+  },
+  success: {
+    color: "text-green-600 dark:text-green-400",
+    bgColor: "bg-green-100",
+    darkBgColor: "dark:bg-green-900",
+    borderColor: "border-green-400 dark:border-green-500",
+    icon: "●"
+  },
+  failed: {
+    color: "text-red-600 dark:text-red-400",
+    bgColor: "bg-red-100",
+    darkBgColor: "dark:bg-red-900",
+    borderColor: "border-red-400 dark:border-red-500",
+    icon: "✗"
+  },
+  skipped: {
+    color: "text-gray-400 dark:text-gray-600",
+    bgColor: "bg-gray-50",
+    darkBgColor: "dark:bg-gray-900",
+    borderColor: "border-gray-200 dark:border-gray-700",
+    icon: "◌"
+  },
+  cancelled: {
+    color: "text-orange-600 dark:text-orange-400",
+    bgColor: "bg-orange-100",
+    darkBgColor: "dark:bg-orange-900",
+    borderColor: "border-orange-400 dark:border-orange-500",
+    icon: "⊘"
   }
-);
-const XmlParser = ({
-  className,
-  children,
-  disabled,
-  ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  View,
-  {
-    className: cn(
-      "p-4 rounded-lg border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700",
-      disabled && "opacity-50",
-      className
+};
+const formatDuration = (seconds) => {
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+};
+const PipelineView = ({
+  stages,
+  pipelineName,
+  pipelineId,
+  onStagePress,
+  className
+}) => {
+  const overallStatus = stages.some((s) => s.status === "failed") ? "failed" : stages.some((s) => s.status === "running") ? "running" : stages.every((s) => s.status === "success") ? "success" : stages.every((s) => s.status === "pending") ? "pending" : "running";
+  const overallConfig = statusConfig[overallStatus];
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: cn("overflow-hidden", className), children: [
+    (pipelineName || pipelineId) && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "px-4 py-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { children: [
+        pipelineName && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: pipelineName }),
+        pipelineId && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { className: "text-xs font-mono text-gray-500 dark:text-gray-500", children: [
+          "#",
+          pipelineId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        View,
+        {
+          className: cn(
+            "px-2 py-1 rounded-full",
+            overallConfig.bgColor,
+            overallConfig.darkBgColor
+          ),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { className: cn("text-xs font-medium", overallConfig.color), children: [
+            overallConfig.icon,
+            " ",
+            overallStatus.charAt(0).toUpperCase() + overallStatus.slice(1)
+          ] })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: true,
+        contentContainerStyle: { padding: 16 },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "flex-row items-center", children: stages.map((stage, index) => {
+          const config = statusConfig[stage.status];
+          const isLast = index === stages.length - 1;
+          const stageContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "items-center", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              View,
+              {
+                className: cn(
+                  "w-24 p-3 rounded-lg border-2",
+                  config.bgColor,
+                  config.darkBgColor,
+                  config.borderColor
+                ),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "items-center", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: cn("text-lg", config.color), children: config.icon }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Text,
+                    {
+                      className: "text-xs font-medium text-gray-900 dark:text-gray-100 mt-1 text-center",
+                      numberOfLines: 2,
+                      children: stage.name
+                    }
+                  ),
+                  stage.duration !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-xs text-gray-500 dark:text-gray-500 mt-1", children: formatDuration(stage.duration) })
+                ] })
+              }
+            ),
+            stage.jobs && stage.jobs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { className: "text-xs text-gray-500 dark:text-gray-500", children: [
+              stage.jobs.filter((j) => j.status === "success").length,
+              "/",
+              stage.jobs.length,
+              " jobs"
+            ] }) })
+          ] });
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "flex-row items-center", children: [
+            onStagePress ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Pressable,
+              {
+                onPress: () => onStagePress(stage),
+                accessibilityRole: "button",
+                accessibilityLabel: `${stage.name} - ${stage.status}`,
+                children: stageContent
+              }
+            ) : stageContent,
+            !isLast && /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { className: "mx-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "w-8 h-0.5 bg-gray-300 dark:bg-gray-600" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "absolute -top-2 left-2 text-gray-400 dark:text-gray-600", children: "→" })
+            ] })
+          ] }, stage.id);
+        }) })
+      }
     ),
-    accessibilityLabel: "XML Parser",
-    ...props,
-    children: children || /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { className: "text-gray-900 dark:text-white", children: "XmlParser Component" })
-  }
-);
+    /* @__PURE__ */ jsxRuntimeExports.jsx(View, { className: "px-4 py-2 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { className: "text-xs text-gray-500 dark:text-gray-500", children: [
+      stages.length,
+      " stages |",
+      " ",
+      stages.filter((s) => s.status === "success").length,
+      " completed"
+    ] }) })
+  ] });
+};
 export {
-  AlertDialog,
-  ApiPlayground,
-  ApiReference,
   AuditLog,
-  BodyMetrics,
   BuildLog,
-  ChangelogDisplay,
-  CodePlayground,
-  ConflictResolver,
-  DealPipeline,
   DeploymentStatus,
-  DriverLog,
-  MemoryUsage,
   MetricsGrid,
   PipelineView,
-  RegressionTest,
-  SystemStatusIndicator,
-  TestResult,
-  TestRunner,
-  WebhookLogger,
-  WorkflowBuilder,
-  WorkflowTemplate,
-  XmlParser
+  SystemStatusIndicator
 };
-//# sourceMappingURL=index.esm.js.map
+//# sourceMappingURL=index.mjs.map