@amiable-dev/docusaurus-plugin-stentorosaur 0.20.0 → 0.21.1

package/lib/theme/StatusPage/styles.module.css

@@ -3,6 +3,89 @@
   padding: 2rem 0;
 }
 
+/* Minimal layout styles (ADR-004) */
+.statusBoard {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+
+.header {
+  margin-bottom: 2rem;
+}
+
+.header h1 {
+  margin: 0 0 0.5rem;
+  font-size: 2.5rem;
+}
+
+.description {
+  color: var(--ifm-color-emphasis-700);
+  font-size: 1.125rem;
+  margin: 0.5rem 0 1.5rem;
+}
+
+.overallStatus {
+  padding: 1rem 1.5rem;
+  border-radius: 8px;
+  background: var(--ifm-color-emphasis-100);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-weight: 600;
+}
+
+.statusGood {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: #10b981;
+}
+
+.statusIssue {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: #f59e0b;
+}
+
+.statusDot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: currentColor;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.systemCards {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.emptyState {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--ifm-color-emphasis-600);
+  background: var(--ifm-color-emphasis-100);
+  border-radius: 8px;
+}
+
+.emptyState p {
+  margin: 0;
+  font-size: 1.125rem;
+}
+
 .chartsSection {
   max-width: 1400px;
   margin: 3rem auto;

package/lib/theme/SystemCard/index.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Your Organization
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * ADR-004: SystemCard Compound Component
+ *
+ * Collapsible system status card with compound component pattern.
+ * Includes Header, UptimeBar, Details, Metrics, and Charts sub-components.
+ *
+ * @see docs/adrs/ADR-004-simplified-status-card-ux.md
+ */
+import React, { type ReactNode } from 'react';
+import { type UptimeBarProps } from '../UptimeBar';
+/**
+ * Status types
+ */
+export type SystemStatus = 'up' | 'degraded' | 'down' | 'maintenance';
+/**
+ * Props for SystemCard component
+ */
+export interface SystemCardProps {
+    /** System identifier */
+    name: string;
+    /** Display name (optional) */
+    displayName?: string;
+    /** Current status */
+    status: SystemStatus;
+    /** Enable expand on click (default: true) */
+    expandable?: boolean;
+    /** Initial expanded state */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state */
+    expanded?: boolean;
+    /** Callback when expanded/collapsed */
+    onExpandChange?: (expanded: boolean) => void;
+    /** Semantic heading level (default: 3) */
+    headingLevel?: 2 | 3 | 4;
+    /** Accessibility label for expand button */
+    expandButtonLabel?: string;
+    /** Compound component children */
+    children?: ReactNode;
+    /** Optional additional className */
+    className?: string;
+}
+/**
+ * SystemCard Component
+ *
+ * Main container for system status with expand/collapse functionality.
+ */
+export declare function SystemCard({ name, displayName, status, expandable, defaultExpanded, expanded: controlledExpanded, onExpandChange, headingLevel, expandButtonLabel, children, className, }: SystemCardProps): React.ReactElement;
+export declare namespace SystemCard {
+    var Header: typeof SystemCardHeader;
+    var UptimeBar: typeof SystemCardUptimeBar;
+    var Details: typeof SystemCardDetails;
+    var Metrics: typeof SystemCardMetrics;
+    var Charts: typeof SystemCardCharts;
+}
+/**
+ * SystemCard.Header - Custom header content
+ */
+export interface SystemCardHeaderProps {
+    children?: ReactNode;
+}
+export declare function SystemCardHeader({ children, }: SystemCardHeaderProps): React.ReactElement;
+/**
+ * SystemCard.UptimeBar - Embedded UptimeBar
+ */
+export declare function SystemCardUptimeBar(props: Omit<UptimeBarProps, 'serviceName'> & {
+    serviceName?: string;
+}): React.ReactElement;
+/**
+ * SystemCard.Details - Expandable content container
+ */
+export interface SystemCardDetailsProps {
+    children?: ReactNode;
+}
+export declare function SystemCardDetails({ children, }: SystemCardDetailsProps): React.ReactElement;
+/**
+ * SystemCard.Metrics - Response time and last checked
+ */
+export interface SystemCardMetricsProps {
+    responseTime?: number;
+    lastChecked?: string;
+}
+export declare function SystemCardMetrics({ responseTime, lastChecked, }: SystemCardMetricsProps): React.ReactElement;
+/**
+ * SystemCard.Charts - Chart container (placeholder)
+ */
+export interface SystemCardChartsProps {
+    serviceName?: string;
+    children?: ReactNode;
+}
+export declare function SystemCardCharts({ children, }: SystemCardChartsProps): React.ReactElement;
+export default SystemCard;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/SystemCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/SystemCard/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9D;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;AA0BtE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,MAAM,EAAE,YAAY,CAAC;IACrB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,WAAW,EACX,MAAM,EACN,UAAiB,EACjB,eAAuB,EACvB,QAAQ,EAAE,kBAAkB,EAC5B,cAAc,EACd,YAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,SAAS,GACV,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CA2FtC;yBAvGe,UAAU;;;;;;;AAyG1B;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,GACT,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAE5C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,GACpE,KAAK,CAAC,YAAY,CAOpB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,GACT,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAW7C;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,WAAW,GACZ,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAsB7C;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,GACT,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAE5C;AAUD,eAAe,UAAU,CAAC"}

package/lib/theme/SystemCard/index.js

@@ -0,0 +1,125 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SystemCard = SystemCard;
+exports.SystemCardHeader = SystemCardHeader;
+exports.SystemCardUptimeBar = SystemCardUptimeBar;
+exports.SystemCardDetails = SystemCardDetails;
+exports.SystemCardMetrics = SystemCardMetrics;
+exports.SystemCardCharts = SystemCardCharts;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Copyright (c) Your Organization
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * ADR-004: SystemCard Compound Component
+ *
+ * Collapsible system status card with compound component pattern.
+ * Includes Header, UptimeBar, Details, Metrics, and Charts sub-components.
+ *
+ * @see docs/adrs/ADR-004-simplified-status-card-ux.md
+ */
+const react_1 = require("react");
+const StatusBadge_1 = require("../StatusBadge");
+const UptimeBar_1 = require("../UptimeBar");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+const SystemCardContext = (0, react_1.createContext)(undefined);
+function useSystemCardContext() {
+    const context = (0, react_1.useContext)(SystemCardContext);
+    if (!context) {
+        throw new Error('SystemCard compound components must be used within a SystemCard');
+    }
+    return context;
+}
+/**
+ * Status class mapping
+ */
+const STATUS_CLASS_MAP = {
+    up: styles_module_css_1.default.statusUp,
+    degraded: styles_module_css_1.default.statusDegraded,
+    down: styles_module_css_1.default.statusDown,
+    maintenance: styles_module_css_1.default.statusMaintenance,
+};
+/**
+ * SystemCard Component
+ *
+ * Main container for system status with expand/collapse functionality.
+ */
+function SystemCard({ name, displayName, status, expandable = true, defaultExpanded = false, expanded: controlledExpanded, onExpandChange, headingLevel = 3, expandButtonLabel, children, className, }) {
+    // Uncontrolled state
+    const [internalExpanded, setInternalExpanded] = (0, react_1.useState)(defaultExpanded);
+    // Use controlled or uncontrolled state
+    const isControlled = controlledExpanded !== undefined;
+    const expanded = isControlled ? controlledExpanded : internalExpanded;
+    const handleToggle = (0, react_1.useCallback)(() => {
+        if (!expandable)
+            return;
+        const newExpanded = !expanded;
+        if (!isControlled) {
+            setInternalExpanded(newExpanded);
+        }
+        onExpandChange?.(newExpanded);
+    }, [expandable, expanded, isControlled, onExpandChange]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (!expandable)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleToggle();
+        }
+        else if (event.key === 'Escape' && expanded) {
+            event.preventDefault();
+            if (!isControlled) {
+                setInternalExpanded(false);
+            }
+            onExpandChange?.(false);
+        }
+    }, [expandable, expanded, isControlled, onExpandChange, handleToggle]);
+    const Heading = `h${headingLevel}`;
+    const label = displayName || name;
+    // Context value for compound components
+    const contextValue = {
+        name,
+        status,
+        expanded,
+        expandable,
+    };
+    const statusClass = STATUS_CLASS_MAP[status];
+    return ((0, jsx_runtime_1.jsx)(SystemCardContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)("article", { className: `${styles_module_css_1.default.systemCard} ${statusClass} ${expanded ? styles_module_css_1.default.expanded : ''} ${className || ''}`, role: "article", "aria-expanded": expanded, tabIndex: expandable ? 0 : undefined, onClick: handleToggle, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.cardHeader, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.cardTitleRow, children: [(0, jsx_runtime_1.jsx)(Heading, { className: styles_module_css_1.default.cardTitle, children: label }), (0, jsx_runtime_1.jsx)(StatusBadge_1.StatusBadge, { status: status, size: "sm" })] }), expandable && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: styles_module_css_1.default.expandButton, "aria-label": expandButtonLabel || `Toggle ${label} details`, "aria-expanded": expanded, onClick: (e) => {
+                                e.stopPropagation();
+                                handleToggle();
+                            }, children: (0, jsx_runtime_1.jsx)("span", { className: `${styles_module_css_1.default.expandIcon} ${expanded ? styles_module_css_1.default.expandIconOpen : ''}`, children: "\u25BC" }) }))] }), children] }) }));
+}
+function SystemCardHeader({ children, }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.customHeader, children: children });
+}
+/**
+ * SystemCard.UptimeBar - Embedded UptimeBar
+ */
+function SystemCardUptimeBar(props) {
+    const { name } = useSystemCardContext();
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.uptimeBarWrapper, children: (0, jsx_runtime_1.jsx)(UptimeBar_1.UptimeBar, { ...props, serviceName: props.serviceName || name }) }));
+}
+function SystemCardDetails({ children, }) {
+    const { expanded } = useSystemCardContext();
+    return ((0, jsx_runtime_1.jsx)("div", { className: `${styles_module_css_1.default.cardDetails} ${expanded ? styles_module_css_1.default.detailsVisible : ''}`, "aria-hidden": !expanded, children: children }));
+}
+function SystemCardMetrics({ responseTime, lastChecked, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.metricsGrid, children: [responseTime !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.metricItem, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.metricLabel, children: "Response Time" }), (0, jsx_runtime_1.jsxs)("span", { className: styles_module_css_1.default.metricValue, children: [responseTime, "ms"] })] })), lastChecked !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.metricItem, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.metricLabel, children: "Last Checked" }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.metricValue, children: lastChecked })] })), responseTime === undefined && lastChecked === undefined && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.metricItem, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.metricValue, children: "N/A" }) }))] }));
+}
+function SystemCardCharts({ children, }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.chartsContainer, children: children });
+}
+// Attach compound components to SystemCard
+SystemCard.Header = SystemCardHeader;
+SystemCard.UptimeBar = SystemCardUptimeBar;
+SystemCard.Details = SystemCardDetails;
+SystemCard.Metrics = SystemCardMetrics;
+SystemCard.Charts = SystemCardCharts;
+// Default export
+exports.default = SystemCard;

package/lib/theme/SystemCard/styles.module.css

@@ -0,0 +1,208 @@
+/**
+ * ADR-004: SystemCard Styles
+ *
+ * Collapsible system status card with expand/collapse animation.
+ */
+
+/* CSS Variables */
+:root {
+  --card-border-radius: 8px;
+  --card-padding: 1rem;
+  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Main card container */
+.systemCard {
+  background: var(--ifm-card-background-color, #fff);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: var(--card-border-radius);
+  padding: var(--card-padding);
+  box-shadow: var(--card-shadow);
+  cursor: pointer;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+  outline: none;
+}
+
+.systemCard:hover {
+  box-shadow: var(--card-shadow-hover);
+}
+
+.systemCard:focus-visible {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 2px;
+}
+
+/* Expanded state */
+.expanded {
+  border-color: var(--ifm-color-primary-light);
+}
+
+/* Status indicator border */
+.statusUp {
+  border-left: 4px solid var(--status-operational, #22c55e);
+}
+
+.statusDegraded {
+  border-left: 4px solid var(--status-degraded, #eab308);
+}
+
+.statusDown {
+  border-left: 4px solid var(--status-outage, #ef4444);
+}
+
+.statusMaintenance {
+  border-left: 4px solid var(--status-maintenance, #3b82f6);
+}
+
+/* Card header */
+.cardHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.cardTitleRow {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+}
+
+.cardTitle {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--ifm-color-content);
+}
+
+/* Expand button */
+.expandButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: transparent;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.expandButton:hover {
+  background: var(--ifm-color-emphasis-100);
+}
+
+.expandIcon {
+  font-size: 0.75rem;
+  color: var(--ifm-color-content-secondary);
+  transition: transform 0.2s ease;
+}
+
+.expandIconOpen {
+  transform: rotate(180deg);
+}
+
+/* Custom header slot */
+.customHeader {
+  margin-top: 0.5rem;
+}
+
+/* UptimeBar wrapper */
+.uptimeBarWrapper {
+  margin-top: 0.75rem;
+}
+
+/* Card details (expandable content) */
+.cardDetails {
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.3s ease;
+  margin-top: 0;
+}
+
+.detailsVisible {
+  max-height: 500px;
+  opacity: 1;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+/* Metrics grid */
+.metricsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 1rem;
+}
+
+.metricItem {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.metricLabel {
+  font-size: 0.75rem;
+  color: var(--ifm-color-content-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.metricValue {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--ifm-color-content);
+}
+
+/* Charts container */
+.chartsContainer {
+  margin-top: 1rem;
+}
+
+/* Dark mode */
+[data-theme='dark'] .systemCard {
+  background: var(--ifm-card-background-color, #1a1a1a);
+  border-color: var(--ifm-color-emphasis-300);
+}
+
+[data-theme='dark'] .systemCard:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .systemCard,
+  .expandIcon,
+  .cardDetails {
+    transition: none;
+  }
+
+  .cardDetails {
+    max-height: none;
+  }
+
+  .cardDetails:not(.detailsVisible) {
+    display: none;
+  }
+}
+
+/* Mobile responsiveness */
+@media (max-width: 600px) {
+  .systemCard {
+    padding: 0.75rem;
+  }
+
+  .cardTitleRow {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .metricsGrid {
+    grid-template-columns: 1fr;
+  }
+}

package/lib/theme/SystemCardGroup/index.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Your Organization
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * ADR-004: SystemCardGroup Component
+ *
+ * Container for grouping multiple SystemCards with collapsible behavior.
+ * Shows aggregate status (worst-of) for the group.
+ *
+ * @see docs/adrs/ADR-004-simplified-status-card-ux.md
+ */
+import React, { type ReactNode } from 'react';
+/**
+ * Status types (matching SystemCard)
+ */
+export type GroupStatus = 'up' | 'degraded' | 'down' | 'maintenance';
+/**
+ * Props for SystemCardGroup component
+ */
+export interface SystemCardGroupProps {
+    /** Group identifier */
+    name: string;
+    /** Display name */
+    displayName: string;
+    /** Initially collapsed (default: false) */
+    defaultCollapsed?: boolean;
+    /** Group status override (derived from children if not provided) */
+    status?: GroupStatus;
+    /** Semantic heading level (default: 2) */
+    headingLevel?: 2 | 3 | 4;
+    /** Children (SystemCard components) */
+    children: ReactNode;
+    /** Optional additional className */
+    className?: string;
+}
+/**
+ * SystemCardGroup Component
+ *
+ * Groups multiple SystemCards together with a collapsible header.
+ * Displays aggregate status based on worst child status.
+ */
+export declare function SystemCardGroup({ name, displayName, defaultCollapsed, status: explicitStatus, headingLevel, children, className, }: SystemCardGroupProps): React.ReactElement;
+export default SystemCardGroup;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/SystemCardGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/SystemCardGroup/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAGf;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;AAYrE;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oEAAoE;IACpE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyDD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,WAAW,EACX,gBAAwB,EACxB,MAAM,EAAE,cAAc,EACtB,YAAgB,EAChB,QAAQ,EACR,SAAS,GACV,EAAE,oBAAoB,GAAG,KAAK,CAAC,YAAY,CA0E3C;AAGD,eAAe,eAAe,CAAC"}

package/lib/theme/SystemCardGroup/index.js

@@ -0,0 +1,113 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SystemCardGroup = SystemCardGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Copyright (c) Your Organization
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * ADR-004: SystemCardGroup Component
+ *
+ * Container for grouping multiple SystemCards with collapsible behavior.
+ * Shows aggregate status (worst-of) for the group.
+ *
+ * @see docs/adrs/ADR-004-simplified-status-card-ux.md
+ */
+const react_1 = require("react");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+/**
+ * Status priority for aggregation (higher = worse)
+ */
+const STATUS_PRIORITY = {
+    up: 0,
+    maintenance: 1,
+    degraded: 2,
+    down: 3,
+};
+/**
+ * Status labels for group header
+ */
+const GROUP_STATUS_LABELS = {
+    up: 'All Operational',
+    degraded: 'Partial Issues',
+    down: 'Service Outage',
+    maintenance: 'Maintenance',
+};
+/**
+ * Status class mapping
+ */
+const GROUP_STATUS_CLASS_MAP = {
+    up: styles_module_css_1.default.groupStatusUp,
+    degraded: styles_module_css_1.default.groupStatusDegraded,
+    down: styles_module_css_1.default.groupStatusDown,
+    maintenance: styles_module_css_1.default.groupStatusMaintenance,
+};
+/**
+ * Extract status from SystemCard children
+ */
+function getWorstStatus(children) {
+    let worstStatus = 'up';
+    let worstPriority = STATUS_PRIORITY.up;
+    react_1.Children.forEach(children, (child) => {
+        if ((0, react_1.isValidElement)(child) && child.props.status) {
+            const childStatus = child.props.status;
+            const priority = STATUS_PRIORITY[childStatus] ?? 0;
+            if (priority > worstPriority) {
+                worstPriority = priority;
+                worstStatus = childStatus;
+            }
+        }
+    });
+    return worstStatus;
+}
+/**
+ * Count valid children
+ */
+function countChildren(children) {
+    let count = 0;
+    react_1.Children.forEach(children, (child) => {
+        if ((0, react_1.isValidElement)(child)) {
+            count++;
+        }
+    });
+    return count;
+}
+/**
+ * SystemCardGroup Component
+ *
+ * Groups multiple SystemCards together with a collapsible header.
+ * Displays aggregate status based on worst child status.
+ */
+function SystemCardGroup({ name, displayName, defaultCollapsed = false, status: explicitStatus, headingLevel = 2, children, className, }) {
+    const [collapsed, setCollapsed] = (0, react_1.useState)(defaultCollapsed);
+    // Derive status from children or use explicit override
+    const aggregatedStatus = (0, react_1.useMemo)(() => {
+        if (explicitStatus)
+            return explicitStatus;
+        return getWorstStatus(children);
+    }, [explicitStatus, children]);
+    // Count children
+    const childCount = (0, react_1.useMemo)(() => countChildren(children), [children]);
+    const handleToggle = (0, react_1.useCallback)(() => {
+        setCollapsed((prev) => !prev);
+    }, []);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleToggle();
+        }
+    }, [handleToggle]);
+    const Heading = `h${headingLevel}`;
+    const statusLabel = GROUP_STATUS_LABELS[aggregatedStatus];
+    const statusClass = GROUP_STATUS_CLASS_MAP[aggregatedStatus];
+    const serviceWord = childCount === 1 ? 'service' : 'services';
+    return ((0, jsx_runtime_1.jsxs)("section", { className: `${styles_module_css_1.default.systemCardGroup} ${collapsed ? styles_module_css_1.default.collapsed : ''} ${statusClass} ${className || ''}`, "data-group": name, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.groupHeader, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: styles_module_css_1.default.toggleButton, onClick: handleToggle, onKeyDown: handleKeyDown, "aria-expanded": !collapsed, "aria-label": `Toggle ${displayName} group`, children: (0, jsx_runtime_1.jsx)("span", { className: `${styles_module_css_1.default.expandIcon} ${!collapsed ? styles_module_css_1.default.expandIconOpen : ''}`, children: "\u25BC" }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.groupInfo, children: [(0, jsx_runtime_1.jsx)(Heading, { className: styles_module_css_1.default.groupTitle, children: displayName }), (0, jsx_runtime_1.jsxs)("span", { className: styles_module_css_1.default.groupMeta, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_css_1.default.serviceCount, children: [childCount, " ", serviceWord] }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.statusDot }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.statusLabel, children: statusLabel })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: `${styles_module_css_1.default.groupContent} ${collapsed ? styles_module_css_1.default.contentHidden : ''}`, "aria-hidden": collapsed, children: children })] }));
+}
+// Default export
+exports.default = SystemCardGroup;