@skyfall_ai/aegis 0.1.0 → 0.2.0

package/dist/index.js

@@ -24,13 +24,18 @@ __export(index_exports, {
   Accordion: () => Accordion,
   Alert: () => Alert,
   AppointmentCard: () => AppointmentCard,
+  AreaChart: () => AreaChart,
   Autocomplete: () => Autocomplete,
   Avatar: () => Avatar,
   Badge: () => Badge,
   Banner: () => Banner,
+  BarChart: () => BarChart,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   Card: () => Card,
+  ChartCard: () => ChartCard,
+  ChartLegend: () => ChartLegend,
+  ChartTooltip: () => ChartTooltip,
   Checkbox: () => Checkbox,
   CheckboxGroup: () => CheckboxGroup,
   ClinicalBanner: () => ClinicalBanner,
@@ -40,6 +45,7 @@ __export(index_exports, {
   DatePicker: () => DatePicker,
   DescriptionList: () => DescriptionList,
   Divider: () => Divider,
+  DonutChart: () => DonutChart,
   Drawer: () => Drawer,
   EmptyState: () => EmptyState,
   FileUpload: () => FileUpload,
@@ -48,8 +54,10 @@ __export(index_exports, {
   IconButton: () => IconButton,
   Input: () => Input,
   InsuranceCard: () => InsuranceCard,
+  KpiStatCard: () => KpiStatCard,
   LabResultRow: () => LabResultRow,
   Label: () => Label,
+  LineChart: () => LineChart,
   List: () => List,
   ListItem: () => ListItem,
   MedicationRow: () => MedicationRow,
@@ -68,7 +76,9 @@ __export(index_exports, {
   SideNav: () => SideNav,
   Skeleton: () => Skeleton,
   Slider: () => Slider,
+  Sparkline: () => Sparkline,
   Spinner: () => Spinner,
+  StackedBarChart: () => StackedBarChart,
   StatCard: () => StatCard,
   StatusBadge: () => StatusBadge,
   Stepper: () => Stepper,
@@ -85,7 +95,10 @@ __export(index_exports, {
   Toast: () => Toast,
   Tooltip: () => Tooltip,
   TopNav: () => TopNav,
+  TrendStatCard: () => TrendStatCard,
   accentTeal: () => accentTeal,
+  aegisChartTheme: () => aegisChartTheme,
+  aegisSeriesPalette: () => aegisSeriesPalette,
   border: () => border,
   borderStyle: () => borderStyle,
   borderWidth: () => borderWidth,
@@ -94,12 +107,14 @@ __export(index_exports, {
   container: () => container,
   controlSize: () => controlSize,
   dataVis: () => dataVis,
+  defaultValueFormatter: () => defaultValueFormatter,
   duration: () => duration,
   easing: () => easing,
   focusRing: () => focusRing,
   fontFamily: () => fontFamily,
   fontSize: () => fontSize,
   fontWeight: () => fontWeight,
+  getSeriesColor: () => getSeriesColor,
   grid: () => grid,
   iconSize: () => iconSize,
   lineHeight: () => lineHeight,
@@ -3696,18 +3711,797 @@ function Banner({
     }
   );
 }
+
+// src/charts/ChartCard.module.css
+var ChartCard_default = {};
+
+// src/charts/ChartCard.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var defaultEmpty = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ChartCard_default.placeholder, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: ChartCard_default.placeholderTitle, children: "No data available" }),
+  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: ChartCard_default.placeholderText, children: "There's nothing to display for the selected range." })
+] });
+var defaultLoading = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ChartCard_default.placeholder, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ChartCard_default.skeletonBars, "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", {})
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: ChartCard_default.placeholderText, children: "Loading chart\u2026" })
+] });
+var defaultError = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ChartCard_default.placeholder, role: "alert", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: ChartCard_default.placeholderTitle, children: "Unable to load chart" }),
+  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: ChartCard_default.placeholderText, children: "Something went wrong while loading this data. Try again in a moment." })
+] });
+function ChartCard({
+  title,
+  subtitle,
+  metric,
+  trend,
+  actions,
+  footer,
+  density = "comfortable",
+  state = "ready",
+  emptyState,
+  loadingState,
+  errorState,
+  ariaLabel,
+  className,
+  children,
+  ...props
+}) {
+  const showHeader = title || subtitle || metric || trend || actions;
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+    "section",
+    {
+      className: cn(ChartCard_default.card, ChartCard_default[density], className),
+      "aria-label": ariaLabel,
+      ...props,
+      children: [
+        showHeader && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("header", { className: ChartCard_default.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ChartCard_default.headerText, children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h3", { className: ChartCard_default.title, children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: ChartCard_default.subtitle, children: subtitle }),
+            (metric || trend) && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ChartCard_default.metricRow, children: [
+              metric && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: ChartCard_default.metric, children: metric }),
+              trend && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: ChartCard_default.trendSlot, children: trend })
+            ] })
+          ] }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: ChartCard_default.actions, children: actions })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: ChartCard_default.body, children: [
+          state === "loading" && (loadingState ?? defaultLoading),
+          state === "empty" && (emptyState ?? defaultEmpty),
+          state === "error" && (errorState ?? defaultError),
+          state === "ready" && children
+        ] }),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("footer", { className: ChartCard_default.footer, children: footer })
+      ]
+    }
+  );
+}
+
+// src/charts/chartTheme.ts
+var aegisSeriesPalette = [
+  "var(--aegis-data-vis-1)",
+  "var(--aegis-data-vis-2)",
+  "var(--aegis-data-vis-3)",
+  "var(--aegis-data-vis-4)",
+  "var(--aegis-data-vis-5)"
+];
+function getSeriesColor(index, override) {
+  if (override) return override;
+  return aegisSeriesPalette[index % aegisSeriesPalette.length];
+}
+var aegisChartTheme = {
+  axis: {
+    stroke: "var(--aegis-data-vis-axis)",
+    fontSize: 12,
+    fontFamily: "var(--aegis-font-family-sans)",
+    tickColor: "var(--aegis-color-text-muted)"
+  },
+  grid: {
+    stroke: "var(--aegis-data-vis-gridline)",
+    strokeDasharray: "3 3"
+  },
+  tooltip: {
+    background: "var(--aegis-color-surface-overlay)",
+    border: "var(--aegis-color-border-default)",
+    text: "var(--aegis-color-text-primary)",
+    muted: "var(--aegis-color-text-secondary)"
+  },
+  reference: {
+    stroke: "var(--aegis-color-text-muted)",
+    strokeDasharray: "4 4"
+  }
+};
+var defaultValueFormatter = (value) => {
+  if (typeof value !== "number") return String(value);
+  if (Math.abs(value) >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+  if (Math.abs(value) >= 1e3) return `${(value / 1e3).toFixed(1)}k`;
+  return value.toLocaleString();
+};
+
+// src/charts/ChartTooltip.module.css
+var ChartTooltip_default = {};
+
+// src/charts/ChartTooltip.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+function ChartTooltip({
+  active,
+  payload,
+  label,
+  valueFormatter = defaultValueFormatter,
+  labelFormatter
+}) {
+  if (!active || !payload || payload.length === 0) return null;
+  const displayLabel = labelFormatter && label != null ? labelFormatter(String(label)) : label;
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: ChartTooltip_default.tooltip, role: "tooltip", children: [
+    displayLabel != null && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: ChartTooltip_default.label, children: displayLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("ul", { className: ChartTooltip_default.list, children: payload.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("li", { className: ChartTooltip_default.row, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        "span",
+        {
+          className: ChartTooltip_default.swatch,
+          style: { backgroundColor: entry.color },
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: ChartTooltip_default.name, children: entry.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: ChartTooltip_default.value, children: entry.value != null ? valueFormatter(entry.value) : "\u2014" })
+    ] }, `${entry.dataKey}-${index}`)) })
+  ] });
+}
+
+// src/charts/ChartLegend.module.css
+var ChartLegend_default = {};
+
+// src/charts/ChartLegend.tsx
+var import_jsx_runtime61 = require("react/jsx-runtime");
+function ChartLegend({ payload }) {
+  if (!payload || payload.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("ul", { className: ChartLegend_default.legend, children: payload.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("li", { className: ChartLegend_default.item, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      "span",
+      {
+        className: ChartLegend_default.swatch,
+        style: { backgroundColor: entry.color },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: ChartLegend_default.label, children: entry.value })
+  ] }, `${entry.value}-${index}`)) });
+}
+
+// src/charts/LineChart.tsx
+var import_recharts = require("recharts");
+var import_jsx_runtime62 = require("react/jsx-runtime");
+function LineChart({
+  data,
+  xKey,
+  series,
+  height = 280,
+  showLegend,
+  showGrid = true,
+  valueFormatter = defaultValueFormatter,
+  referenceLines,
+  smooth = true,
+  state,
+  ...cardProps
+}) {
+  const effectiveState = state ?? (data.length === 0 ? "empty" : "ready");
+  const showLegendFinal = showLegend ?? series.length > 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ChartCard, { state: effectiveState, ...cardProps, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_recharts.LineChart, { data, margin: { top: 8, right: 16, left: 0, bottom: 0 }, children: [
+    showGrid && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      import_recharts.CartesianGrid,
+      {
+        vertical: false,
+        stroke: aegisChartTheme.grid.stroke,
+        strokeDasharray: aegisChartTheme.grid.strokeDasharray
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      import_recharts.XAxis,
+      {
+        dataKey: xKey,
+        stroke: aegisChartTheme.axis.stroke,
+        tick: { fill: aegisChartTheme.axis.tickColor, fontSize: aegisChartTheme.axis.fontSize },
+        tickLine: false,
+        axisLine: { stroke: aegisChartTheme.grid.stroke }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      import_recharts.YAxis,
+      {
+        stroke: aegisChartTheme.axis.stroke,
+        tick: { fill: aegisChartTheme.axis.tickColor, fontSize: aegisChartTheme.axis.fontSize },
+        tickLine: false,
+        axisLine: false,
+        tickFormatter: (v) => valueFormatter(v),
+        width: 48
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      import_recharts.Tooltip,
+      {
+        cursor: { stroke: aegisChartTheme.grid.stroke, strokeWidth: 1 },
+        content: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ChartTooltip, { valueFormatter })
+      }
+    ),
+    showLegendFinal && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_recharts.Legend, { content: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ChartLegend, {}) }),
+    referenceLines?.map((ref, i) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      import_recharts.ReferenceLine,
+      {
+        y: ref.value,
+        stroke: aegisChartTheme.reference.stroke,
+        strokeDasharray: aegisChartTheme.reference.strokeDasharray,
+        label: ref.label ? {
+          value: ref.label,
+          position: "insideTopRight",
+          fill: aegisChartTheme.tooltip.muted,
+          fontSize: 11
+        } : void 0
+      },
+      `ref-${i}`
+    )),
+    series.map((s, index) => {
+      const color = getSeriesColor(index, s.color);
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        import_recharts.Line,
+        {
+          type: smooth ? "monotone" : "linear",
+          dataKey: s.dataKey,
+          name: s.label ?? s.dataKey,
+          stroke: color,
+          strokeWidth: 2,
+          dot: { r: 0, fill: color },
+          activeDot: { r: 5, strokeWidth: 0 },
+          isAnimationActive: false
+        },
+        s.dataKey
+      );
+    })
+  ] }) }) });
+}
+
+// src/charts/AreaChart.tsx
+var import_recharts2 = require("recharts");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+function AreaChart({
+  data,
+  xKey,
+  series,
+  height = 280,
+  showLegend,
+  showGrid = true,
+  stacked = false,
+  valueFormatter = defaultValueFormatter,
+  referenceLines,
+  state,
+  ...cardProps
+}) {
+  const effectiveState = state ?? (data.length === 0 ? "empty" : "ready");
+  const showLegendFinal = showLegend ?? series.length > 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ChartCard, { state: effectiveState, ...cardProps, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_recharts2.AreaChart, { data, margin: { top: 8, right: 16, left: 0, bottom: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("defs", { children: series.map((s, index) => {
+      const color = getSeriesColor(index, s.color);
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+        "linearGradient",
+        {
+          id: `aegis-area-${s.dataKey}`,
+          x1: "0",
+          y1: "0",
+          x2: "0",
+          y2: "1",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: 0.32 }),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: 0.02 })
+          ]
+        },
+        `grad-${s.dataKey}`
+      );
+    }) }),
+    showGrid && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      import_recharts2.CartesianGrid,
+      {
+        vertical: false,
+        stroke: aegisChartTheme.grid.stroke,
+        strokeDasharray: aegisChartTheme.grid.strokeDasharray
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      import_recharts2.XAxis,
+      {
+        dataKey: xKey,
+        stroke: aegisChartTheme.axis.stroke,
+        tick: { fill: aegisChartTheme.axis.tickColor, fontSize: aegisChartTheme.axis.fontSize },
+        tickLine: false,
+        axisLine: { stroke: aegisChartTheme.grid.stroke }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      import_recharts2.YAxis,
+      {
+        stroke: aegisChartTheme.axis.stroke,
+        tick: { fill: aegisChartTheme.axis.tickColor, fontSize: aegisChartTheme.axis.fontSize },
+        tickLine: false,
+        axisLine: false,
+        tickFormatter: (v) => valueFormatter(v),
+        width: 48
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      import_recharts2.Tooltip,
+      {
+        cursor: { stroke: aegisChartTheme.grid.stroke, strokeWidth: 1 },
+        content: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ChartTooltip, { valueFormatter })
+      }
+    ),
+    showLegendFinal && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_recharts2.Legend, { content: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ChartLegend, {}) }),
+    referenceLines?.map((ref, i) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      import_recharts2.ReferenceLine,
+      {
+        y: ref.value,
+        stroke: aegisChartTheme.reference.stroke,
+        strokeDasharray: aegisChartTheme.reference.strokeDasharray,
+        label: ref.label ? {
+          value: ref.label,
+          position: "insideTopRight",
+          fill: aegisChartTheme.tooltip.muted,
+          fontSize: 11
+        } : void 0
+      },
+      `ref-${i}`
+    )),
+    series.map((s, index) => {
+      const color = getSeriesColor(index, s.color);
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        import_recharts2.Area,
+        {
+          type: "monotone",
+          dataKey: s.dataKey,
+          name: s.label ?? s.dataKey,
+          stroke: color,
+          strokeWidth: 2,
+          fill: `url(#aegis-area-${s.dataKey})`,
+          stackId: stacked ? "aegis-stack" : void 0,
+          isAnimationActive: false,
+          activeDot: { r: 5, strokeWidth: 0 }
+        },
+        s.dataKey
+      );
+    })
+  ] }) }) });
+}
+
+// src/charts/BarChart.tsx
+var import_recharts3 = require("recharts");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+function BarChart({
+  data,
+  xKey,
+  series,
+  height = 280,
+  showLegend,
+  showGrid = true,
+  stacked = false,
+  horizontal = false,
+  valueFormatter = defaultValueFormatter,
+  referenceLines,
+  state,
+  ...cardProps
+}) {
+  const effectiveState = state ?? (data.length === 0 ? "empty" : "ready");
+  const showLegendFinal = showLegend ?? series.length > 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ChartCard, { state: effectiveState, ...cardProps, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+    import_recharts3.BarChart,
+    {
+      data,
+      layout: horizontal ? "vertical" : "horizontal",
+      margin: { top: 8, right: 16, left: 0, bottom: 0 },
+      barCategoryGap: "22%",
+      children: [
+        showGrid && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          import_recharts3.CartesianGrid,
+          {
+            vertical: horizontal,
+            horizontal: !horizontal,
+            stroke: aegisChartTheme.grid.stroke,
+            strokeDasharray: aegisChartTheme.grid.strokeDasharray
+          }
+        ),
+        horizontal ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            import_recharts3.XAxis,
+            {
+              type: "number",
+              stroke: aegisChartTheme.axis.stroke,
+              tick: {
+                fill: aegisChartTheme.axis.tickColor,
+                fontSize: aegisChartTheme.axis.fontSize
+              },
+              tickLine: false,
+              axisLine: false,
+              tickFormatter: (v) => valueFormatter(v)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            import_recharts3.YAxis,
+            {
+              type: "category",
+              dataKey: xKey,
+              stroke: aegisChartTheme.axis.stroke,
+              tick: {
+                fill: aegisChartTheme.axis.tickColor,
+                fontSize: aegisChartTheme.axis.fontSize
+              },
+              tickLine: false,
+              axisLine: { stroke: aegisChartTheme.grid.stroke },
+              width: 96
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            import_recharts3.XAxis,
+            {
+              dataKey: xKey,
+              stroke: aegisChartTheme.axis.stroke,
+              tick: {
+                fill: aegisChartTheme.axis.tickColor,
+                fontSize: aegisChartTheme.axis.fontSize
+              },
+              tickLine: false,
+              axisLine: { stroke: aegisChartTheme.grid.stroke }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            import_recharts3.YAxis,
+            {
+              stroke: aegisChartTheme.axis.stroke,
+              tick: {
+                fill: aegisChartTheme.axis.tickColor,
+                fontSize: aegisChartTheme.axis.fontSize
+              },
+              tickLine: false,
+              axisLine: false,
+              tickFormatter: (v) => valueFormatter(v),
+              width: 48
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          import_recharts3.Tooltip,
+          {
+            cursor: { fill: "var(--aegis-state-hover-overlay)" },
+            content: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ChartTooltip, { valueFormatter })
+          }
+        ),
+        showLegendFinal && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_recharts3.Legend, { content: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ChartLegend, {}) }),
+        referenceLines?.map((ref, i) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          import_recharts3.ReferenceLine,
+          {
+            ...horizontal ? { x: ref.value } : { y: ref.value },
+            stroke: aegisChartTheme.reference.stroke,
+            strokeDasharray: aegisChartTheme.reference.strokeDasharray,
+            label: ref.label ? {
+              value: ref.label,
+              position: "insideTopRight",
+              fill: aegisChartTheme.tooltip.muted,
+              fontSize: 11
+            } : void 0
+          },
+          `ref-${i}`
+        )),
+        series.map((s, index) => {
+          const color = getSeriesColor(index, s.color);
+          return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            import_recharts3.Bar,
+            {
+              dataKey: s.dataKey,
+              name: s.label ?? s.dataKey,
+              fill: color,
+              radius: [4, 4, 0, 0],
+              stackId: stacked ? "aegis-stack" : void 0,
+              isAnimationActive: false
+            },
+            s.dataKey
+          );
+        })
+      ]
+    }
+  ) }) });
+}
+
+// src/charts/StackedBarChart.tsx
+var import_jsx_runtime65 = require("react/jsx-runtime");
+function StackedBarChart(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(BarChart, { ...props, stacked: true });
+}
+
+// src/charts/DonutChart.tsx
+var import_recharts4 = require("recharts");
+
+// src/charts/DonutChart.module.css
+var DonutChart_default = {};
+
+// src/charts/DonutChart.tsx
+var import_jsx_runtime66 = require("react/jsx-runtime");
+function DonutChart({
+  data,
+  centerLabel,
+  centerSublabel,
+  variant = "donut",
+  height = 280,
+  valueFormatter = defaultValueFormatter,
+  showLegend = true,
+  state,
+  ...cardProps
+}) {
+  const effectiveState = state ?? (data.length === 0 ? "empty" : "ready");
+  const total = data.reduce((sum, d) => sum + d.value, 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ChartCard, { state: effectiveState, ...cardProps, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: DonutChart_default.layout, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: DonutChart_default.chartWrap, style: { height }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_recharts4.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_recharts4.PieChart, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+          import_recharts4.Pie,
+          {
+            data,
+            dataKey: "value",
+            nameKey: "name",
+            cx: "50%",
+            cy: "50%",
+            innerRadius: variant === "donut" ? "64%" : 0,
+            outerRadius: "92%",
+            paddingAngle: variant === "donut" ? 2 : 0,
+            stroke: "var(--aegis-color-surface-default)",
+            strokeWidth: 2,
+            isAnimationActive: false,
+            children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_recharts4.Cell, { fill: getSeriesColor(index, entry.color) }, `cell-${index}`))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_recharts4.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ChartTooltip, { valueFormatter }) })
+      ] }) }),
+      variant === "donut" && (centerLabel || centerSublabel) && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: DonutChart_default.center, "aria-hidden": "true", children: [
+        centerLabel && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: DonutChart_default.centerLabel, children: centerLabel }),
+        centerSublabel && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: DonutChart_default.centerSub, children: centerSublabel })
+      ] })
+    ] }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("ul", { className: DonutChart_default.legend, children: data.map((entry, index) => {
+      const color = getSeriesColor(index, entry.color);
+      const pct = total > 0 ? entry.value / total * 100 : 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("li", { className: DonutChart_default.legendItem, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+          "span",
+          {
+            className: DonutChart_default.swatch,
+            style: { backgroundColor: color },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: DonutChart_default.legendLabel, children: entry.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: DonutChart_default.legendValue, children: [
+          valueFormatter(entry.value),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: DonutChart_default.legendPct, children: [
+            pct.toFixed(0),
+            "%"
+          ] })
+        ] })
+      ] }, `${entry.name}-${index}`);
+    }) })
+  ] }) });
+}
+
+// src/charts/Sparkline.tsx
+var import_recharts5 = require("recharts");
+var import_jsx_runtime67 = require("react/jsx-runtime");
+function Sparkline({
+  data,
+  dataKey = "value",
+  variant = "line",
+  width = 120,
+  height = 36,
+  color,
+  strokeWidth = 2,
+  ariaLabel
+}) {
+  const normalized = typeof data[0] === "number" ? data.map((v, i) => ({ x: i, [dataKey]: v })) : data;
+  const stroke = getSeriesColor(0, color);
+  const gradientId = `aegis-spark-${dataKey}-${Math.random().toString(36).slice(2, 8)}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    "div",
+    {
+      style: { width, height, display: "inline-block" },
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_recharts5.ResponsiveContainer, { width: "100%", height: "100%", children: variant === "area" ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_recharts5.AreaChart, { data: normalized, margin: { top: 2, right: 2, left: 2, bottom: 2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("stop", { offset: "0%", stopColor: stroke, stopOpacity: 0.32 }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("stop", { offset: "100%", stopColor: stroke, stopOpacity: 0 })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          import_recharts5.Area,
+          {
+            type: "monotone",
+            dataKey,
+            stroke,
+            strokeWidth,
+            fill: `url(#${gradientId})`,
+            isAnimationActive: false,
+            dot: false
+          }
+        )
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_recharts5.LineChart, { data: normalized, margin: { top: 2, right: 2, left: 2, bottom: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        import_recharts5.Line,
+        {
+          type: "monotone",
+          dataKey,
+          stroke,
+          strokeWidth,
+          dot: false,
+          isAnimationActive: false
+        }
+      ) }) })
+    }
+  );
+}
+
+// src/charts/KpiStatCard.module.css
+var KpiStatCard_default = {};
+
+// src/charts/KpiStatCard.tsx
+var import_jsx_runtime68 = require("react/jsx-runtime");
+function inferTrend(change) {
+  if (change == null || change === 0) return "neutral";
+  return change > 0 ? "up" : "down";
+}
+var trendIcons2 = {
+  up: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("path", { d: "M3 11l5-6 5 6H3z" }) }),
+  down: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("path", { d: "M3 5l5 6 5-6H3z" }) }),
+  neutral: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("path", { d: "M3 7h10v2H3z" }) })
+};
+function KpiStatCard({
+  label,
+  value,
+  unit,
+  change,
+  changeLabel,
+  trend,
+  inverse = false,
+  icon,
+  sparklineData,
+  sparklineColor,
+  sparklineVariant = "area",
+  density = "comfortable",
+  className,
+  ...props
+}) {
+  const direction = trend ?? inferTrend(change);
+  const semantic2 = inverse && direction === "up" ? "down" : inverse && direction === "down" ? "up" : direction;
+  const formattedChange = change !== void 0 ? `${change > 0 ? "+" : ""}${change}%` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn(KpiStatCard_default.card, KpiStatCard_default[density], className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: KpiStatCard_default.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: KpiStatCard_default.label, children: label }),
+      icon && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: KpiStatCard_default.icon, "aria-hidden": "true", children: icon })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: KpiStatCard_default.valueRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: KpiStatCard_default.value, children: value }),
+      unit && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: KpiStatCard_default.unit, children: unit })
+    ] }),
+    (formattedChange || sparklineData) && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: KpiStatCard_default.footer, children: [
+      formattedChange && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cn(KpiStatCard_default.trend, KpiStatCard_default[semantic2]), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: KpiStatCard_default.trendIcon, children: trendIcons2[direction] }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: KpiStatCard_default.trendValue, children: formattedChange }),
+        changeLabel && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: KpiStatCard_default.changeLabel, children: changeLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: KpiStatCard_default.srOnly, children: direction === "up" ? "increase" : direction === "down" ? "decrease" : "no change" })
+      ] }),
+      sparklineData && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: KpiStatCard_default.sparkSlot, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        Sparkline,
+        {
+          data: sparklineData,
+          color: sparklineColor,
+          variant: sparklineVariant,
+          width: "100%",
+          height: 40,
+          ariaLabel: `${label} trend`
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// src/charts/TrendStatCard.tsx
+var import_recharts6 = require("recharts");
+
+// src/charts/TrendStatCard.module.css
+var TrendStatCard_default = {};
+
+// src/charts/TrendStatCard.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
+function inferTrend2(change) {
+  if (change == null || change === 0) return "neutral";
+  return change > 0 ? "up" : "down";
+}
+var trendIcons3 = {
+  up: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M3 11l5-6 5 6H3z" }) }),
+  down: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M3 5l5 6 5-6H3z" }) }),
+  neutral: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M3 7h10v2H3z" }) })
+};
+function TrendStatCard({
+  label,
+  value,
+  unit,
+  data,
+  xKey,
+  yKey,
+  change,
+  changeLabel,
+  inverse = false,
+  color,
+  valueFormatter = defaultValueFormatter,
+  chartHeight = 80,
+  className,
+  ...props
+}) {
+  const direction = inferTrend2(change);
+  const semantic2 = inverse && direction === "up" ? "down" : inverse && direction === "down" ? "up" : direction;
+  const stroke = getSeriesColor(0, color);
+  const formattedChange = change !== void 0 ? `${change > 0 ? "+" : ""}${change}%` : void 0;
+  const gradientId = `trend-stat-${String(yKey)}-${Math.random().toString(36).slice(2, 8)}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cn(TrendStatCard_default.card, className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: TrendStatCard_default.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: TrendStatCard_default.label, children: label }),
+      formattedChange && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: cn(TrendStatCard_default.chip, TrendStatCard_default[semantic2]), children: [
+        trendIcons3[direction],
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: formattedChange })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: TrendStatCard_default.valueRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: TrendStatCard_default.value, children: value }),
+      unit && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: TrendStatCard_default.unit, children: unit })
+    ] }),
+    changeLabel && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: TrendStatCard_default.changeLabel, children: changeLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: TrendStatCard_default.chartWrap, style: { height: chartHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_recharts6.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_recharts6.AreaChart, { data, margin: { top: 4, right: 0, left: 0, bottom: 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("stop", { offset: "0%", stopColor: stroke, stopOpacity: 0.32 }),
+        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("stop", { offset: "100%", stopColor: stroke, stopOpacity: 0 })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_recharts6.XAxis, { dataKey: xKey, hide: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_recharts6.YAxis, { hide: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_recharts6.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChartTooltip, { valueFormatter }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        import_recharts6.Area,
+        {
+          type: "monotone",
+          dataKey: yKey,
+          stroke,
+          strokeWidth: 2,
+          fill: `url(#${gradientId})`,
+          isAnimationActive: false,
+          dot: false
+        }
+      )
+    ] }) }) })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
   Alert,
   AppointmentCard,
+  AreaChart,
   Autocomplete,
   Avatar,
   Badge,
   Banner,
+  BarChart,
   Breadcrumbs,
   Button,
   Card,
+  ChartCard,
+  ChartLegend,
+  ChartTooltip,
   Checkbox,
   CheckboxGroup,
   ClinicalBanner,
@@ -3717,6 +4511,7 @@ function Banner({
   DatePicker,
   DescriptionList,
   Divider,
+  DonutChart,
   Drawer,
   EmptyState,
   FileUpload,
@@ -3725,8 +4520,10 @@ function Banner({
   IconButton,
   Input,
   InsuranceCard,
+  KpiStatCard,
   LabResultRow,
   Label,
+  LineChart,
   List,
   ListItem,
   MedicationRow,
@@ -3745,7 +4542,9 @@ function Banner({
   SideNav,
   Skeleton,
   Slider,
+  Sparkline,
   Spinner,
+  StackedBarChart,
   StatCard,
   StatusBadge,
   Stepper,
@@ -3762,7 +4561,10 @@ function Banner({
   Toast,
   Tooltip,
   TopNav,
+  TrendStatCard,
   accentTeal,
+  aegisChartTheme,
+  aegisSeriesPalette,
   border,
   borderStyle,
   borderWidth,
@@ -3771,12 +4573,14 @@ function Banner({
   container,
   controlSize,
   dataVis,
+  defaultValueFormatter,
   duration,
   easing,
   focusRing,
   fontFamily,
   fontSize,
   fontWeight,
+  getSeriesColor,
   grid,
   iconSize,
   lineHeight,