@skyfall_ai/aegis 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -3577,17 +3577,839 @@ function Banner({
     }
   );
 }
+
+// src/charts/ChartCard.module.css
+var ChartCard_default = {};
+
+// src/charts/ChartCard.tsx
+import { jsx as jsx59, jsxs as jsxs50 } from "react/jsx-runtime";
+var defaultEmpty = /* @__PURE__ */ jsxs50("div", { className: ChartCard_default.placeholder, children: [
+  /* @__PURE__ */ jsx59("div", { className: ChartCard_default.placeholderTitle, children: "No data available" }),
+  /* @__PURE__ */ jsx59("div", { className: ChartCard_default.placeholderText, children: "There's nothing to display for the selected range." })
+] });
+var defaultLoading = /* @__PURE__ */ jsxs50("div", { className: ChartCard_default.placeholder, children: [
+  /* @__PURE__ */ jsxs50("div", { className: ChartCard_default.skeletonBars, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx59("span", {}),
+    /* @__PURE__ */ jsx59("span", {}),
+    /* @__PURE__ */ jsx59("span", {}),
+    /* @__PURE__ */ jsx59("span", {}),
+    /* @__PURE__ */ jsx59("span", {})
+  ] }),
+  /* @__PURE__ */ jsx59("div", { className: ChartCard_default.placeholderText, children: "Loading chart\u2026" })
+] });
+var defaultError = /* @__PURE__ */ jsxs50("div", { className: ChartCard_default.placeholder, role: "alert", children: [
+  /* @__PURE__ */ jsx59("div", { className: ChartCard_default.placeholderTitle, children: "Unable to load chart" }),
+  /* @__PURE__ */ jsx59("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__ */ jsxs50(
+    "section",
+    {
+      className: cn(ChartCard_default.card, ChartCard_default[density], className),
+      "aria-label": ariaLabel,
+      ...props,
+      children: [
+        showHeader && /* @__PURE__ */ jsxs50("header", { className: ChartCard_default.header, children: [
+          /* @__PURE__ */ jsxs50("div", { className: ChartCard_default.headerText, children: [
+            title && /* @__PURE__ */ jsx59("h3", { className: ChartCard_default.title, children: title }),
+            subtitle && /* @__PURE__ */ jsx59("p", { className: ChartCard_default.subtitle, children: subtitle }),
+            (metric || trend) && /* @__PURE__ */ jsxs50("div", { className: ChartCard_default.metricRow, children: [
+              metric && /* @__PURE__ */ jsx59("span", { className: ChartCard_default.metric, children: metric }),
+              trend && /* @__PURE__ */ jsx59("span", { className: ChartCard_default.trendSlot, children: trend })
+            ] })
+          ] }),
+          actions && /* @__PURE__ */ jsx59("div", { className: ChartCard_default.actions, children: actions })
+        ] }),
+        /* @__PURE__ */ jsxs50("div", { className: ChartCard_default.body, children: [
+          state === "loading" && (loadingState ?? defaultLoading),
+          state === "empty" && (emptyState ?? defaultEmpty),
+          state === "error" && (errorState ?? defaultError),
+          state === "ready" && children
+        ] }),
+        footer && /* @__PURE__ */ jsx59("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
+import { jsx as jsx60, jsxs as jsxs51 } from "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__ */ jsxs51("div", { className: ChartTooltip_default.tooltip, role: "tooltip", children: [
+    displayLabel != null && /* @__PURE__ */ jsx60("div", { className: ChartTooltip_default.label, children: displayLabel }),
+    /* @__PURE__ */ jsx60("ul", { className: ChartTooltip_default.list, children: payload.map((entry, index) => /* @__PURE__ */ jsxs51("li", { className: ChartTooltip_default.row, children: [
+      /* @__PURE__ */ jsx60(
+        "span",
+        {
+          className: ChartTooltip_default.swatch,
+          style: { backgroundColor: entry.color },
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx60("span", { className: ChartTooltip_default.name, children: entry.name }),
+      /* @__PURE__ */ jsx60("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
+import { jsx as jsx61, jsxs as jsxs52 } from "react/jsx-runtime";
+function ChartLegend({ payload }) {
+  if (!payload || payload.length === 0) return null;
+  return /* @__PURE__ */ jsx61("ul", { className: ChartLegend_default.legend, children: payload.map((entry, index) => /* @__PURE__ */ jsxs52("li", { className: ChartLegend_default.item, children: [
+    /* @__PURE__ */ jsx61(
+      "span",
+      {
+        className: ChartLegend_default.swatch,
+        style: { backgroundColor: entry.color },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx61("span", { className: ChartLegend_default.label, children: entry.value })
+  ] }, `${entry.value}-${index}`)) });
+}
+
+// src/charts/LineChart.tsx
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart as RechartsLineChart,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip as Tooltip2,
+  XAxis,
+  YAxis
+} from "recharts";
+import { jsx as jsx62, jsxs as jsxs53 } from "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__ */ jsx62(ChartCard, { state: effectiveState, ...cardProps, children: /* @__PURE__ */ jsx62(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs53(RechartsLineChart, { data, margin: { top: 8, right: 16, left: 0, bottom: 0 }, children: [
+    showGrid && /* @__PURE__ */ jsx62(
+      CartesianGrid,
+      {
+        vertical: false,
+        stroke: aegisChartTheme.grid.stroke,
+        strokeDasharray: aegisChartTheme.grid.strokeDasharray
+      }
+    ),
+    /* @__PURE__ */ jsx62(
+      XAxis,
+      {
+        dataKey: xKey,
+        stroke: aegisChartTheme.axis.stroke,
+        tick: { fill: aegisChartTheme.axis.tickColor, fontSize: aegisChartTheme.axis.fontSize },
+        tickLine: false,
+        axisLine: { stroke: aegisChartTheme.grid.stroke }
+      }
+    ),
+    /* @__PURE__ */ jsx62(
+      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__ */ jsx62(
+      Tooltip2,
+      {
+        cursor: { stroke: aegisChartTheme.grid.stroke, strokeWidth: 1 },
+        content: /* @__PURE__ */ jsx62(ChartTooltip, { valueFormatter })
+      }
+    ),
+    showLegendFinal && /* @__PURE__ */ jsx62(Legend, { content: /* @__PURE__ */ jsx62(ChartLegend, {}) }),
+    referenceLines?.map((ref, i) => /* @__PURE__ */ jsx62(
+      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__ */ jsx62(
+        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
+import {
+  Area,
+  AreaChart as RechartsAreaChart,
+  CartesianGrid as CartesianGrid2,
+  Legend as Legend2,
+  ReferenceLine as ReferenceLine2,
+  ResponsiveContainer as ResponsiveContainer2,
+  Tooltip as Tooltip3,
+  XAxis as XAxis2,
+  YAxis as YAxis2
+} from "recharts";
+import { jsx as jsx63, jsxs as jsxs54 } from "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__ */ jsx63(ChartCard, { state: effectiveState, ...cardProps, children: /* @__PURE__ */ jsx63(ResponsiveContainer2, { width: "100%", height, children: /* @__PURE__ */ jsxs54(RechartsAreaChart, { data, margin: { top: 8, right: 16, left: 0, bottom: 0 }, children: [
+    /* @__PURE__ */ jsx63("defs", { children: series.map((s, index) => {
+      const color = getSeriesColor(index, s.color);
+      return /* @__PURE__ */ jsxs54(
+        "linearGradient",
+        {
+          id: `aegis-area-${s.dataKey}`,
+          x1: "0",
+          y1: "0",
+          x2: "0",
+          y2: "1",
+          children: [
+            /* @__PURE__ */ jsx63("stop", { offset: "0%", stopColor: color, stopOpacity: 0.32 }),
+            /* @__PURE__ */ jsx63("stop", { offset: "100%", stopColor: color, stopOpacity: 0.02 })
+          ]
+        },
+        `grad-${s.dataKey}`
+      );
+    }) }),
+    showGrid && /* @__PURE__ */ jsx63(
+      CartesianGrid2,
+      {
+        vertical: false,
+        stroke: aegisChartTheme.grid.stroke,
+        strokeDasharray: aegisChartTheme.grid.strokeDasharray
+      }
+    ),
+    /* @__PURE__ */ jsx63(
+      XAxis2,
+      {
+        dataKey: xKey,
+        stroke: aegisChartTheme.axis.stroke,
+        tick: { fill: aegisChartTheme.axis.tickColor, fontSize: aegisChartTheme.axis.fontSize },
+        tickLine: false,
+        axisLine: { stroke: aegisChartTheme.grid.stroke }
+      }
+    ),
+    /* @__PURE__ */ jsx63(
+      YAxis2,
+      {
+        stroke: aegisChartTheme.axis.stroke,
+        tick: { fill: aegisChartTheme.axis.tickColor, fontSize: aegisChartTheme.axis.fontSize },
+        tickLine: false,
+        axisLine: false,
+        tickFormatter: (v) => valueFormatter(v),
+        width: 48
+      }
+    ),
+    /* @__PURE__ */ jsx63(
+      Tooltip3,
+      {
+        cursor: { stroke: aegisChartTheme.grid.stroke, strokeWidth: 1 },
+        content: /* @__PURE__ */ jsx63(ChartTooltip, { valueFormatter })
+      }
+    ),
+    showLegendFinal && /* @__PURE__ */ jsx63(Legend2, { content: /* @__PURE__ */ jsx63(ChartLegend, {}) }),
+    referenceLines?.map((ref, i) => /* @__PURE__ */ jsx63(
+      ReferenceLine2,
+      {
+        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__ */ jsx63(
+        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
+import {
+  Bar,
+  BarChart as RechartsBarChart,
+  CartesianGrid as CartesianGrid3,
+  Legend as Legend3,
+  ReferenceLine as ReferenceLine3,
+  ResponsiveContainer as ResponsiveContainer3,
+  Tooltip as Tooltip4,
+  XAxis as XAxis3,
+  YAxis as YAxis3
+} from "recharts";
+import { Fragment as Fragment5, jsx as jsx64, jsxs as jsxs55 } from "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__ */ jsx64(ChartCard, { state: effectiveState, ...cardProps, children: /* @__PURE__ */ jsx64(ResponsiveContainer3, { width: "100%", height, children: /* @__PURE__ */ jsxs55(
+    RechartsBarChart,
+    {
+      data,
+      layout: horizontal ? "vertical" : "horizontal",
+      margin: { top: 8, right: 16, left: 0, bottom: 0 },
+      barCategoryGap: "22%",
+      children: [
+        showGrid && /* @__PURE__ */ jsx64(
+          CartesianGrid3,
+          {
+            vertical: horizontal,
+            horizontal: !horizontal,
+            stroke: aegisChartTheme.grid.stroke,
+            strokeDasharray: aegisChartTheme.grid.strokeDasharray
+          }
+        ),
+        horizontal ? /* @__PURE__ */ jsxs55(Fragment5, { children: [
+          /* @__PURE__ */ jsx64(
+            XAxis3,
+            {
+              type: "number",
+              stroke: aegisChartTheme.axis.stroke,
+              tick: {
+                fill: aegisChartTheme.axis.tickColor,
+                fontSize: aegisChartTheme.axis.fontSize
+              },
+              tickLine: false,
+              axisLine: false,
+              tickFormatter: (v) => valueFormatter(v)
+            }
+          ),
+          /* @__PURE__ */ jsx64(
+            YAxis3,
+            {
+              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__ */ jsxs55(Fragment5, { children: [
+          /* @__PURE__ */ jsx64(
+            XAxis3,
+            {
+              dataKey: xKey,
+              stroke: aegisChartTheme.axis.stroke,
+              tick: {
+                fill: aegisChartTheme.axis.tickColor,
+                fontSize: aegisChartTheme.axis.fontSize
+              },
+              tickLine: false,
+              axisLine: { stroke: aegisChartTheme.grid.stroke }
+            }
+          ),
+          /* @__PURE__ */ jsx64(
+            YAxis3,
+            {
+              stroke: aegisChartTheme.axis.stroke,
+              tick: {
+                fill: aegisChartTheme.axis.tickColor,
+                fontSize: aegisChartTheme.axis.fontSize
+              },
+              tickLine: false,
+              axisLine: false,
+              tickFormatter: (v) => valueFormatter(v),
+              width: 48
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx64(
+          Tooltip4,
+          {
+            cursor: { fill: "var(--aegis-state-hover-overlay)" },
+            content: /* @__PURE__ */ jsx64(ChartTooltip, { valueFormatter })
+          }
+        ),
+        showLegendFinal && /* @__PURE__ */ jsx64(Legend3, { content: /* @__PURE__ */ jsx64(ChartLegend, {}) }),
+        referenceLines?.map((ref, i) => /* @__PURE__ */ jsx64(
+          ReferenceLine3,
+          {
+            ...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__ */ jsx64(
+            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
+import { jsx as jsx65 } from "react/jsx-runtime";
+function StackedBarChart(props) {
+  return /* @__PURE__ */ jsx65(BarChart, { ...props, stacked: true });
+}
+
+// src/charts/DonutChart.tsx
+import { Cell, Pie, PieChart as RechartsPieChart, ResponsiveContainer as ResponsiveContainer4, Tooltip as Tooltip5 } from "recharts";
+
+// src/charts/DonutChart.module.css
+var DonutChart_default = {};
+
+// src/charts/DonutChart.tsx
+import { jsx as jsx66, jsxs as jsxs56 } from "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__ */ jsx66(ChartCard, { state: effectiveState, ...cardProps, children: /* @__PURE__ */ jsxs56("div", { className: DonutChart_default.layout, children: [
+    /* @__PURE__ */ jsxs56("div", { className: DonutChart_default.chartWrap, style: { height }, children: [
+      /* @__PURE__ */ jsx66(ResponsiveContainer4, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs56(RechartsPieChart, { children: [
+        /* @__PURE__ */ jsx66(
+          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__ */ jsx66(Cell, { fill: getSeriesColor(index, entry.color) }, `cell-${index}`))
+          }
+        ),
+        /* @__PURE__ */ jsx66(Tooltip5, { content: /* @__PURE__ */ jsx66(ChartTooltip, { valueFormatter }) })
+      ] }) }),
+      variant === "donut" && (centerLabel || centerSublabel) && /* @__PURE__ */ jsxs56("div", { className: DonutChart_default.center, "aria-hidden": "true", children: [
+        centerLabel && /* @__PURE__ */ jsx66("div", { className: DonutChart_default.centerLabel, children: centerLabel }),
+        centerSublabel && /* @__PURE__ */ jsx66("div", { className: DonutChart_default.centerSub, children: centerSublabel })
+      ] })
+    ] }),
+    showLegend && /* @__PURE__ */ jsx66("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__ */ jsxs56("li", { className: DonutChart_default.legendItem, children: [
+        /* @__PURE__ */ jsx66(
+          "span",
+          {
+            className: DonutChart_default.swatch,
+            style: { backgroundColor: color },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx66("span", { className: DonutChart_default.legendLabel, children: entry.name }),
+        /* @__PURE__ */ jsxs56("span", { className: DonutChart_default.legendValue, children: [
+          valueFormatter(entry.value),
+          /* @__PURE__ */ jsxs56("span", { className: DonutChart_default.legendPct, children: [
+            pct.toFixed(0),
+            "%"
+          ] })
+        ] })
+      ] }, `${entry.name}-${index}`);
+    }) })
+  ] }) });
+}
+
+// src/charts/Sparkline.tsx
+import {
+  Area as Area2,
+  AreaChart as AreaChart2,
+  Line as Line2,
+  LineChart as LineChart2,
+  ResponsiveContainer as ResponsiveContainer5
+} from "recharts";
+import { jsx as jsx67, jsxs as jsxs57 } from "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__ */ jsx67(
+    "div",
+    {
+      style: { width, height, display: "inline-block" },
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx67(ResponsiveContainer5, { width: "100%", height: "100%", children: variant === "area" ? /* @__PURE__ */ jsxs57(AreaChart2, { data: normalized, margin: { top: 2, right: 2, left: 2, bottom: 2 }, children: [
+        /* @__PURE__ */ jsx67("defs", { children: /* @__PURE__ */ jsxs57("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx67("stop", { offset: "0%", stopColor: stroke, stopOpacity: 0.32 }),
+          /* @__PURE__ */ jsx67("stop", { offset: "100%", stopColor: stroke, stopOpacity: 0 })
+        ] }) }),
+        /* @__PURE__ */ jsx67(
+          Area2,
+          {
+            type: "monotone",
+            dataKey,
+            stroke,
+            strokeWidth,
+            fill: `url(#${gradientId})`,
+            isAnimationActive: false,
+            dot: false
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx67(LineChart2, { data: normalized, margin: { top: 2, right: 2, left: 2, bottom: 2 }, children: /* @__PURE__ */ jsx67(
+        Line2,
+        {
+          type: "monotone",
+          dataKey,
+          stroke,
+          strokeWidth,
+          dot: false,
+          isAnimationActive: false
+        }
+      ) }) })
+    }
+  );
+}
+
+// src/charts/KpiStatCard.module.css
+var KpiStatCard_default = {};
+
+// src/charts/KpiStatCard.tsx
+import { jsx as jsx68, jsxs as jsxs58 } from "react/jsx-runtime";
+function inferTrend(change) {
+  if (change == null || change === 0) return "neutral";
+  return change > 0 ? "up" : "down";
+}
+var trendIcons2 = {
+  up: /* @__PURE__ */ jsx68("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx68("path", { d: "M3 11l5-6 5 6H3z" }) }),
+  down: /* @__PURE__ */ jsx68("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx68("path", { d: "M3 5l5 6 5-6H3z" }) }),
+  neutral: /* @__PURE__ */ jsx68("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx68("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__ */ jsxs58("div", { className: cn(KpiStatCard_default.card, KpiStatCard_default[density], className), ...props, children: [
+    /* @__PURE__ */ jsxs58("div", { className: KpiStatCard_default.header, children: [
+      /* @__PURE__ */ jsx68("span", { className: KpiStatCard_default.label, children: label }),
+      icon && /* @__PURE__ */ jsx68("span", { className: KpiStatCard_default.icon, "aria-hidden": "true", children: icon })
+    ] }),
+    /* @__PURE__ */ jsxs58("div", { className: KpiStatCard_default.valueRow, children: [
+      /* @__PURE__ */ jsx68("span", { className: KpiStatCard_default.value, children: value }),
+      unit && /* @__PURE__ */ jsx68("span", { className: KpiStatCard_default.unit, children: unit })
+    ] }),
+    (formattedChange || sparklineData) && /* @__PURE__ */ jsxs58("div", { className: KpiStatCard_default.footer, children: [
+      formattedChange && /* @__PURE__ */ jsxs58("div", { className: cn(KpiStatCard_default.trend, KpiStatCard_default[semantic2]), children: [
+        /* @__PURE__ */ jsx68("span", { className: KpiStatCard_default.trendIcon, children: trendIcons2[direction] }),
+        /* @__PURE__ */ jsx68("span", { className: KpiStatCard_default.trendValue, children: formattedChange }),
+        changeLabel && /* @__PURE__ */ jsx68("span", { className: KpiStatCard_default.changeLabel, children: changeLabel }),
+        /* @__PURE__ */ jsx68("span", { className: KpiStatCard_default.srOnly, children: direction === "up" ? "increase" : direction === "down" ? "decrease" : "no change" })
+      ] }),
+      sparklineData && /* @__PURE__ */ jsx68("div", { className: KpiStatCard_default.sparkSlot, children: /* @__PURE__ */ jsx68(
+        Sparkline,
+        {
+          data: sparklineData,
+          color: sparklineColor,
+          variant: sparklineVariant,
+          width: "100%",
+          height: 40,
+          ariaLabel: `${label} trend`
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// src/charts/TrendStatCard.tsx
+import {
+  Area as Area3,
+  AreaChart as AreaChart3,
+  ResponsiveContainer as ResponsiveContainer6,
+  Tooltip as Tooltip6,
+  XAxis as XAxis4,
+  YAxis as YAxis4
+} from "recharts";
+
+// src/charts/TrendStatCard.module.css
+var TrendStatCard_default = {};
+
+// src/charts/TrendStatCard.tsx
+import { jsx as jsx69, jsxs as jsxs59 } from "react/jsx-runtime";
+function inferTrend2(change) {
+  if (change == null || change === 0) return "neutral";
+  return change > 0 ? "up" : "down";
+}
+var trendIcons3 = {
+  up: /* @__PURE__ */ jsx69("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx69("path", { d: "M3 11l5-6 5 6H3z" }) }),
+  down: /* @__PURE__ */ jsx69("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx69("path", { d: "M3 5l5 6 5-6H3z" }) }),
+  neutral: /* @__PURE__ */ jsx69("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx69("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__ */ jsxs59("div", { className: cn(TrendStatCard_default.card, className), ...props, children: [
+    /* @__PURE__ */ jsxs59("div", { className: TrendStatCard_default.header, children: [
+      /* @__PURE__ */ jsx69("span", { className: TrendStatCard_default.label, children: label }),
+      formattedChange && /* @__PURE__ */ jsxs59("span", { className: cn(TrendStatCard_default.chip, TrendStatCard_default[semantic2]), children: [
+        trendIcons3[direction],
+        /* @__PURE__ */ jsx69("span", { children: formattedChange })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs59("div", { className: TrendStatCard_default.valueRow, children: [
+      /* @__PURE__ */ jsx69("span", { className: TrendStatCard_default.value, children: value }),
+      unit && /* @__PURE__ */ jsx69("span", { className: TrendStatCard_default.unit, children: unit })
+    ] }),
+    changeLabel && /* @__PURE__ */ jsx69("div", { className: TrendStatCard_default.changeLabel, children: changeLabel }),
+    /* @__PURE__ */ jsx69("div", { className: TrendStatCard_default.chartWrap, style: { height: chartHeight }, children: /* @__PURE__ */ jsx69(ResponsiveContainer6, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs59(AreaChart3, { data, margin: { top: 4, right: 0, left: 0, bottom: 0 }, children: [
+      /* @__PURE__ */ jsx69("defs", { children: /* @__PURE__ */ jsxs59("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx69("stop", { offset: "0%", stopColor: stroke, stopOpacity: 0.32 }),
+        /* @__PURE__ */ jsx69("stop", { offset: "100%", stopColor: stroke, stopOpacity: 0 })
+      ] }) }),
+      /* @__PURE__ */ jsx69(XAxis4, { dataKey: xKey, hide: true }),
+      /* @__PURE__ */ jsx69(YAxis4, { hide: true }),
+      /* @__PURE__ */ jsx69(Tooltip6, { content: /* @__PURE__ */ jsx69(ChartTooltip, { valueFormatter }) }),
+      /* @__PURE__ */ jsx69(
+        Area3,
+        {
+          type: "monotone",
+          dataKey: yKey,
+          stroke,
+          strokeWidth: 2,
+          fill: `url(#${gradientId})`,
+          isAnimationActive: false,
+          dot: false
+        }
+      )
+    ] }) }) })
+  ] });
+}
 export {
   Accordion,
   Alert,
   AppointmentCard,
+  AreaChart,
   Autocomplete,
   Avatar,
   Badge,
   Banner,
+  BarChart,
   Breadcrumbs,
   Button,
   Card,
+  ChartCard,
+  ChartLegend,
+  ChartTooltip,
   Checkbox,
   CheckboxGroup,
   ClinicalBanner,
@@ -3597,6 +4419,7 @@ export {
   DatePicker,
   DescriptionList,
   Divider,
+  DonutChart,
   Drawer,
   EmptyState,
   FileUpload,
@@ -3605,8 +4428,10 @@ export {
   IconButton,
   Input,
   InsuranceCard,
+  KpiStatCard,
   LabResultRow,
   Label,
+  LineChart,
   List,
   ListItem,
   MedicationRow,
@@ -3625,7 +4450,9 @@ export {
   SideNav,
   Skeleton,
   Slider,
+  Sparkline,
   Spinner,
+  StackedBarChart,
   StatCard,
   StatusBadge,
   Stepper,
@@ -3642,7 +4469,10 @@ export {
   Toast,
   Tooltip,
   TopNav,
+  TrendStatCard,
   accentTeal,
+  aegisChartTheme,
+  aegisSeriesPalette,
   border,
   borderStyle,
   borderWidth,
@@ -3651,12 +4481,14 @@ export {
   container,
   controlSize,
   dataVis,
+  defaultValueFormatter,
   duration,
   easing,
   focusRing,
   fontFamily,
   fontSize,
   fontWeight,
+  getSeriesColor,
   grid,
   iconSize,
   lineHeight,