@amiable-dev/docusaurus-plugin-stentorosaur 0.19.0 → 0.21.0

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;

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

@@ -0,0 +1,180 @@
+/**
+ * ADR-004: SystemCardGroup Styles
+ *
+ * Container for grouping multiple SystemCards.
+ */
+
+/* Group container */
+.systemCardGroup {
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Group header */
+.groupHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: var(--ifm-color-emphasis-100);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.collapsed .groupHeader {
+  border-bottom: none;
+}
+
+/* Toggle button */
+.toggleButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--ifm-color-emphasis-200);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.toggleButton:hover {
+  background: var(--ifm-color-emphasis-300);
+}
+
+.toggleButton:focus-visible {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 2px;
+}
+
+.expandIcon {
+  font-size: 0.625rem;
+  color: var(--ifm-color-content-secondary);
+  transition: transform 0.2s ease;
+  transform: rotate(-90deg);
+}
+
+.expandIconOpen {
+  transform: rotate(0deg);
+}
+
+/* Group info */
+.groupInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  flex: 1;
+}
+
+.groupTitle {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--ifm-color-content);
+}
+
+.groupMeta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--ifm-color-content-secondary);
+}
+
+.serviceCount {
+  color: var(--ifm-color-content-secondary);
+}
+
+.statusDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--status-operational, #22c55e);
+}
+
+.groupStatusDegraded .statusDot {
+  background: var(--status-degraded, #eab308);
+}
+
+.groupStatusDown .statusDot {
+  background: var(--status-outage, #ef4444);
+}
+
+.groupStatusMaintenance .statusDot {
+  background: var(--status-maintenance, #3b82f6);
+}
+
+.statusLabel {
+  font-weight: 500;
+}
+
+/* Status colors for labels */
+.groupStatusUp .statusLabel {
+  color: var(--status-operational, #22c55e);
+}
+
+.groupStatusDegraded .statusLabel {
+  color: var(--status-degraded, #eab308);
+}
+
+.groupStatusDown .statusLabel {
+  color: var(--status-outage, #ef4444);
+}
+
+.groupStatusMaintenance .statusLabel {
+  color: var(--status-maintenance, #3b82f6);
+}
+
+/* Group content */
+.groupContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
+}
+
+.contentHidden {
+  max-height: 0;
+  opacity: 0;
+  padding: 0 1rem;
+  overflow: hidden;
+}
+
+/* Dark mode */
+[data-theme='dark'] .groupHeader {
+  background: var(--ifm-color-emphasis-200);
+}
+
+[data-theme='dark'] .toggleButton {
+  background: var(--ifm-color-emphasis-300);
+}
+
+[data-theme='dark'] .toggleButton:hover {
+  background: var(--ifm-color-emphasis-400);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .expandIcon,
+  .groupContent {
+    transition: none;
+  }
+
+  .contentHidden {
+    display: none;
+  }
+}
+
+/* Mobile responsiveness */
+@media (max-width: 600px) {
+  .groupHeader {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .groupContent {
+    padding: 0.75rem;
+  }
+}

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

@@ -0,0 +1,69 @@
+/**
+ * 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: UptimeBar Component
+ *
+ * 90-day horizontal uptime bar visualization.
+ * Displays daily uptime status as colored cells.
+ *
+ * @see docs/adrs/ADR-004-simplified-status-card-ux.md
+ */
+import React from 'react';
+import { type DayStatus } from '../../context/StatusDataProvider';
+/**
+ * Custom thresholds for status determination
+ */
+export interface UptimeThresholds {
+    /** Uptime >= this is operational (default: 99) */
+    operational: number;
+    /** Uptime >= this is degraded, < is outage (default: 95) */
+    degraded: number;
+}
+/**
+ * Props for UptimeBar component
+ */
+export interface UptimeBarProps {
+    /** Service name for data lookup (uses context) */
+    serviceName: string;
+    /** Override data for testing/Storybook */
+    data?: DayStatus[];
+    /** Number of days to display (default: 90) */
+    days?: number;
+    /** Height of the bar in pixels (default: 34) */
+    height?: number;
+    /** Gap between bars in pixels (default: 2) */
+    gap?: number;
+    /** Show uptime percentage text (default: true) */
+    showPercentage?: boolean;
+    /** Show date labels (default: true) */
+    showDateLabels?: boolean;
+    /** Customizable thresholds */
+    thresholds?: UptimeThresholds;
+    /** Loading state */
+    loading?: boolean;
+    /** Error state */
+    error?: Error | null;
+    /** Retry callback */
+    onRetry?: () => void;
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Interaction callbacks */
+    onDayClick?: (date: string, status: DayStatus) => void;
+    onDayHover?: (date: string, status: DayStatus | null) => void;
+    /** Optional additional className */
+    className?: string;
+}
+/**
+ * UptimeBar Component
+ *
+ * Displays a horizontal bar of daily uptime status cells.
+ * Each cell represents one day, colored by uptime percentage.
+ */
+export declare function UptimeBar({ serviceName, data: providedData, days, height, gap, showPercentage, showDateLabels, thresholds, loading, error, onRetry, ariaLabel, onDayClick, onDayHover, className, }: UptimeBarProps): React.ReactElement;
+export default UptimeBar;
+export type { DayStatus };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/UptimeBar/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;;GAOG;AAEH,OAAO,KAAqE,MAAM,OAAO,CAAC;AAC1F,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAGjF;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IACnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9D,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAW,EACX,IAAI,EAAE,YAAY,EAClB,IAAS,EACT,MAAW,EACX,GAAO,EACP,cAAqB,EACrB,cAAqB,EACrB,UAA+B,EAC/B,OAAe,EACf,KAAK,EACL,OAAO,EACP,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,GACV,EAAE,cAAc,GAAG,KAAK,CAAC,YAAY,CA8LrC;AAGD,eAAe,SAAS,CAAC;AAGzB,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/lib/theme/UptimeBar/index.js

@@ -0,0 +1,177 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UptimeBar = UptimeBar;
+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: UptimeBar Component
+ *
+ * 90-day horizontal uptime bar visualization.
+ * Displays daily uptime status as colored cells.
+ *
+ * @see docs/adrs/ADR-004-simplified-status-card-ux.md
+ */
+const react_1 = require("react");
+const StatusDataProvider_1 = require("../../context/StatusDataProvider");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+/**
+ * Default thresholds per ADR-004
+ */
+const DEFAULT_THRESHOLDS = {
+    operational: 99,
+    degraded: 95,
+};
+/**
+ * Get status class based on uptime and thresholds
+ */
+function getStatusClass(uptimePercent, thresholds, originalStatus) {
+    // If original status is no-data, keep it
+    if (originalStatus === 'no-data') {
+        return styles_module_css_1.default.statusNoData;
+    }
+    // Apply threshold-based status
+    if (uptimePercent >= thresholds.operational) {
+        return styles_module_css_1.default.statusOperational;
+    }
+    if (uptimePercent >= thresholds.degraded) {
+        return styles_module_css_1.default.statusDegraded;
+    }
+    return styles_module_css_1.default.statusOutage;
+}
+/**
+ * Calculate average uptime percentage
+ */
+function calculateAverageUptime(days) {
+    if (days.length === 0)
+        return 0;
+    const sum = days.reduce((acc, day) => acc + day.uptimePercent, 0);
+    return sum / days.length;
+}
+/**
+ * Generate summary for screen readers
+ */
+function generateAriaLabel(serviceName, days, averageUptime) {
+    const operationalDays = days.filter((d) => d.status === 'operational').length;
+    const degradedDays = days.filter((d) => d.status === 'degraded').length;
+    const outageDays = days.filter((d) => d.status === 'outage').length;
+    let summary = `${days.length}-day uptime for ${serviceName}: ${averageUptime.toFixed(1)}%.`;
+    if (operationalDays > 0) {
+        summary += ` ${operationalDays} days operational.`;
+    }
+    if (degradedDays > 0) {
+        summary += ` ${degradedDays} days degraded.`;
+    }
+    if (outageDays > 0) {
+        summary += ` ${outageDays} days with outage.`;
+    }
+    return summary;
+}
+/**
+ * UptimeBar Component
+ *
+ * Displays a horizontal bar of daily uptime status cells.
+ * Each cell represents one day, colored by uptime percentage.
+ */
+function UptimeBar({ serviceName, data: providedData, days = 90, height = 34, gap = 2, showPercentage = true, showDateLabels = true, thresholds = DEFAULT_THRESHOLDS, loading = false, error, onRetry, ariaLabel, onDayClick, onDayHover, className, }) {
+    // Get data from context or use provided data
+    const { getMerged90Days } = (0, StatusDataProvider_1.useStatusData)();
+    // Roving tabindex state - track which day has focus
+    const [focusedIndex, setFocusedIndex] = (0, react_1.useState)(0);
+    const dayCellRefs = (0, react_1.useRef)([]);
+    const dayData = (0, react_1.useMemo)(() => {
+        if (providedData) {
+            return providedData.slice(0, days);
+        }
+        return getMerged90Days(serviceName).slice(0, days);
+    }, [providedData, serviceName, days, getMerged90Days]);
+    // Calculate average uptime
+    const averageUptime = (0, react_1.useMemo)(() => calculateAverageUptime(dayData), [dayData]);
+    // Generate aria label
+    const computedAriaLabel = (0, react_1.useMemo)(() => {
+        if (ariaLabel)
+            return ariaLabel;
+        return generateAriaLabel(serviceName, dayData, averageUptime);
+    }, [ariaLabel, serviceName, dayData, averageUptime]);
+    // Event handlers
+    const handleDayClick = (0, react_1.useCallback)((day, index) => {
+        setFocusedIndex(index);
+        if (onDayClick) {
+            onDayClick(day.date, day);
+        }
+    }, [onDayClick]);
+    // Roving tabindex keyboard navigation
+    const handleBarKeyDown = (0, react_1.useCallback)((event) => {
+        const displayDays = [...dayData].reverse();
+        const maxIndex = displayDays.length - 1;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                setFocusedIndex((prev) => {
+                    const newIndex = Math.min(prev + 1, maxIndex);
+                    dayCellRefs.current[newIndex]?.focus();
+                    return newIndex;
+                });
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                setFocusedIndex((prev) => {
+                    const newIndex = Math.max(prev - 1, 0);
+                    dayCellRefs.current[newIndex]?.focus();
+                    return newIndex;
+                });
+                break;
+            case 'Home':
+                event.preventDefault();
+                setFocusedIndex(0);
+                dayCellRefs.current[0]?.focus();
+                break;
+            case 'End':
+                event.preventDefault();
+                setFocusedIndex(maxIndex);
+                dayCellRefs.current[maxIndex]?.focus();
+                break;
+        }
+    }, [dayData]);
+    const handleDayKeyDown = (0, react_1.useCallback)((event, day, index) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (onDayClick) {
+                onDayClick(day.date, day);
+            }
+        }
+    }, [onDayClick]);
+    const handleDayHover = (0, react_1.useCallback)((day) => {
+        if (onDayHover && day) {
+            onDayHover(day.date, day);
+        }
+        else if (onDayHover && !day) {
+            // Pass the last hovered date (or empty string) with null
+            onDayHover('', null);
+        }
+    }, [onDayHover]);
+    // Loading state
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: `${styles_module_css_1.default.uptimeBarContainer} ${styles_module_css_1.default.loading} ${className || ''}`, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.skeleton, style: { height: `${height}px` } }) }));
+    }
+    // Error state
+    if (error) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: `${styles_module_css_1.default.uptimeBarContainer} ${styles_module_css_1.default.error} ${className || ''}`, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.errorMessage, children: "Failed to load uptime data" }), onRetry && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: styles_module_css_1.default.retryButton, onClick: onRetry, "aria-label": "Retry loading uptime data", children: "Retry" }))] }));
+    }
+    // Empty state
+    if (dayData.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: `${styles_module_css_1.default.uptimeBarContainer} ${styles_module_css_1.default.empty} ${className || ''}`, role: "img", "aria-label": `No uptime data available for ${serviceName}`, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.emptyMessage, children: "No data available" }) }));
+    }
+    // Reverse for display (oldest first, newest last)
+    const displayDays = [...dayData].reverse();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `${styles_module_css_1.default.uptimeBarContainer} ${className || ''}`, children: [showPercentage && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.uptimePercentage, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_css_1.default.percentageValue, children: [averageUptime.toFixed(2), "%"] }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.percentageLabel, children: "uptime" })] })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.uptimeBar, role: "group", "aria-label": computedAriaLabel, style: { height: `${height}px`, gap: `${gap}px` }, onKeyDown: handleBarKeyDown, children: displayDays.map((day, index) => ((0, jsx_runtime_1.jsx)("button", { ref: (el) => { dayCellRefs.current[index] = el; }, type: "button", className: `${styles_module_css_1.default.dayCell} ${getStatusClass(day.uptimePercent, thresholds, day.status)}`, tabIndex: index === focusedIndex ? 0 : -1, "aria-label": `${day.date}: ${day.uptimePercent.toFixed(1)}% uptime, ${day.incidents} incidents`, onClick: () => handleDayClick(day, index), onKeyDown: (e) => handleDayKeyDown(e, day, index), onMouseEnter: () => handleDayHover(day), onMouseLeave: () => handleDayHover(null), onFocus: () => setFocusedIndex(index) }, day.date))) }), showDateLabels && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.dateLabels, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_css_1.default.dateLabelStart, children: [days, " days ago"] }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.dateLabelEnd, children: "Today" })] }))] }));
+}
+// Default export for easier imports
+exports.default = UptimeBar;