@omniviewdev/ui 0.1.0

package/dist/cells/ChipCell.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+type ColorName = 'success' | 'warning' | 'danger' | 'primary' | 'neutral';
+type Props = {
+    value: string;
+    color?: ColorName;
+    colorMap?: Record<string, ColorName>;
+    startDecorator?: string | React.ReactNode;
+    endDecorator?: string | React.ReactNode;
+    align?: 'left' | 'right' | 'center';
+    variant?: 'soft' | 'outlined';
+};
+/**
+ * Renders a row with a chip inside for the generic resource table.
+ */
+export declare const ChipCell: React.FC<Props>;
+export default ChipCell;

package/dist/cells/SelectBoxHeader.d.ts

@@ -0,0 +1,11 @@
+import { Table } from '@tanstack/react-table';
+/**
+ * Render a selectbox for the header of the generic resource table.
+ */
+export declare const SelectBoxHeader: {
+    ({ table }: {
+        table: Table<any>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SelectBoxHeader;

package/dist/cells/SelectBoxRow.d.ts

@@ -0,0 +1,11 @@
+import { Row } from '@tanstack/react-table';
+/**
+ * Render a selectbox for a row of the generic resource table.
+ */
+export declare const SelectBoxRow: {
+    ({ row }: {
+        row: Row<any>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SelectBoxRow;

package/dist/cells/TextCell.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+type Props = {
+    /** The text value to render */
+    value: any;
+    /** The color of the text. Default is 'neutral' */
+    color?: 'success' | 'warning' | 'danger' | 'primary' | 'neutral';
+    /** Specify mapping of values to colors that will change with the input */
+    colorMap?: Record<string, string>;
+    /** A decorator to render before the text */
+    startDecorator?: React.ReactNode;
+    /** A decorator to render after the text */
+    endDecorator?: React.ReactNode;
+    /** The horizontal alignment of the text. Default is 'left' */
+    align?: 'left' | 'right' | 'center';
+    /** Formatter for the text */
+    formatter?: string;
+    /** children */
+    children?: React.ReactNode;
+};
+/**
+ * Render a text cell for the generic resource table.
+ * Supports formatters: age, bytes, sum, count, avg, max, min.
+ */
+declare const TextCell: React.FC<Props>;
+export default TextCell;

package/dist/cells/index.d.ts

@@ -0,0 +1,5 @@
+export { default as TextCell } from './TextCell';
+export { BadgesCell } from './BadgesCell';
+export { ChipCell } from './ChipCell';
+export { SelectBoxHeader } from './SelectBoxHeader';
+export { SelectBoxRow } from './SelectBoxRow';

package/dist/cells.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),g=require("react"),l=require("@mui/material/Box"),N=require("@mui/material/Typography"),m=require("./units-CDpdlN1W.cjs"),I=require("@mui/material/Tooltip"),B=require("@mui/material/Chip"),x=require("./Icon-CKdIOrjZ.cjs"),p=require("@mui/material/Checkbox"),h={bytes:e=>m.convertByteUnits({from:e}),sum:e=>{let t=0;if(Array.isArray(e))for(const r of e)t+=Number(r);return typeof e=="string"&&e.split(",").forEach(r=>{t+=Number(r)}),typeof e=="number"&&(t+=e),t.toString()},count:e=>Array.isArray(e)?e.length.toString():typeof e=="string"?e.split(",").length.toString():typeof e=="number"?e.toString():"",avg:e=>{let t=0,r=0;if(Array.isArray(e))for(const i of e)t+=Number(i),r++;return(t/r).toString()},max:e=>{let t=0;if(Array.isArray(e))for(const r of e)t=Math.max(t,Number(r));return t.toString()},min:e=>{let t=Number.MAX_VALUE;if(Array.isArray(e))for(const r of e)t=Math.min(t,Number(r));return typeof e=="string"&&e.split(",").forEach(r=>{t=Math.min(t,Number(r))}),typeof e=="number"&&(t=Math.min(t,e)),t.toString()}},y=e=>{switch(e){case"success":return"success";case"warning":return"warning";case"danger":case"error":return"error";case"primary":return"primary";case"neutral":return"inherit";default:return}},T=({value:e,...t})=>{const r=g.useMemo(()=>{const s=new Date(e);return!e||isNaN(s.getTime())?"0s":m.formatTimeDifference(s)},[e]),[i,a]=g.useState(r);return g.useEffect(()=>{const s=new Date(e);if(isNaN(s.getTime()))return;const u=setInterval(()=>{a(m.formatTimeDifference(s))},1e3);return()=>{clearInterval(u)}},[e,r]),n.jsx(C,{value:i,...t})},C=({align:e,value:t,color:r,colorMap:i,startDecorator:a,endDecorator:s,formatter:c,children:u})=>{const d=()=>{if(i){const f=i[t]??i["*"]??void 0;return y(f)}return y(r)},o=()=>{switch(e){case"left":return"flex-start";case"right":return"flex-end";case"center":return"center";default:return"flex-start"}};return n.jsx(l,{display:"flex",flex:1,justifyContent:o(),alignItems:"center",sx:{overflowY:"hidden",overflowX:"scroll",scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"}},children:u??n.jsxs(l,{display:"flex",alignItems:"center",gap:.5,children:[a,n.jsx(N,{variant:"caption",color:d(),noWrap:!0,children:c&&h[c]?h[c](t):`${t}`}),s]})})},b=({formatter:e,...t})=>e?.toLowerCase()==="age"?n.jsx(T,{...t}):n.jsx(C,{...t,formatter:e?.toLowerCase()});b.displayName="TextCell";const q={success:"var(--ov-success-default)",warning:"var(--ov-warning-default)",danger:"var(--ov-danger-default)",primary:"var(--ov-accent)",neutral:"var(--ov-fg-muted)"},j=({align:e,values:t,colorMap:r,hoverMenu:i,hoverMenuDelay:a})=>{const s=o=>q[r[o]??"neutral"],c=()=>{switch(e){case"left":return"flex-start";case"right":return"flex-end";case"center":return"center";case"justify":return"space-between";default:return"flex-start"}},u=a??200,d=({color:o})=>n.jsx(l,{sx:{borderRadius:"2px",width:12,height:12,minWidth:12,minHeight:12,bgcolor:o}});return n.jsx(l,{display:"flex",flex:1,justifyContent:c(),alignItems:"center",gap:.25,children:t.map((o,f)=>i?n.jsx(I,{title:i(o),enterDelay:u,slotProps:{tooltip:{sx:{p:1,border:"1px solid var(--ov-border-default)",bgcolor:"var(--ov-bg-surface-overlay)",color:"var(--ov-fg-default)"}}},children:n.jsx(d,{color:s(o)})},`badge-${f}`):n.jsx(d,{color:s(o)},`badge-${f}`))})};j.displayName="BadgesCell";const v=e=>{switch(e){case"success":return"success";case"warning":return"warning";case"danger":return"error";case"primary":return"primary";case"neutral":return"default";default:return"default"}},R=e=>e==="outlined"?"outlined":"filled",w=({align:e,value:t,color:r,colorMap:i,startDecorator:a,endDecorator:s,variant:c})=>{const u=()=>i?i[t]||"neutral":r??"neutral",d=()=>{switch(e){case"left":return"flex-start";case"right":return"flex-end";case"center":return"center";default:return"flex-start"}},o=typeof a=="string"?n.jsx(x.Icon,{name:a,size:16}):a,f=typeof s=="string"?n.jsx(x.Icon,{name:s,size:16}):s;return n.jsx(l,{display:"flex",flex:1,justifyContent:d(),alignItems:"center",children:n.jsx(B,{size:"small",color:v(u()),variant:R(c),sx:{borderRadius:"4px"},icon:o,label:f?n.jsxs(l,{display:"flex",alignItems:"center",gap:.5,children:[t,f]}):t})})};w.displayName="ChipCell";const S=({table:e})=>n.jsx(l,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%",maxWidth:24},children:n.jsx(p,{size:"small",checked:e.getIsAllPageRowsSelected(),onChange:t=>{e.toggleAllPageRowsSelected(t.target.checked)},"aria-label":"Select all rows"})});S.displayName="SelectBoxHeader";const A=({row:e})=>n.jsx(l,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%",maxWidth:24},children:n.jsx(p,{size:"small",checked:e.getIsSelected(),onChange:t=>{e.toggleSelected(t.target.checked)},"aria-label":"Select row"})});A.displayName="SelectBoxRow";exports.BadgesCell=j;exports.ChipCell=w;exports.SelectBoxHeader=S;exports.SelectBoxRow=A;exports.TextCell=b;

package/dist/cells.js

@@ -0,0 +1,284 @@
+import { jsx as n, jsxs as x } from "react/jsx-runtime";
+import g from "react";
+import c from "@mui/material/Box";
+import C from "@mui/material/Typography";
+import { f as m, c as A } from "./units-BuBKbqQ7.js";
+import S from "@mui/material/Tooltip";
+import N from "@mui/material/Chip";
+import { I as p } from "./Icon-CuO9W7cA.js";
+import b from "@mui/material/Checkbox";
+const h = {
+  bytes: (e) => A({ from: e }),
+  sum: (e) => {
+    let t = 0;
+    if (Array.isArray(e))
+      for (const r of e)
+        t += Number(r);
+    return typeof e == "string" && e.split(",").forEach((r) => {
+      t += Number(r);
+    }), typeof e == "number" && (t += e), t.toString();
+  },
+  count: (e) => Array.isArray(e) ? e.length.toString() : typeof e == "string" ? e.split(",").length.toString() : typeof e == "number" ? e.toString() : "",
+  avg: (e) => {
+    let t = 0, r = 0;
+    if (Array.isArray(e))
+      for (const o of e)
+        t += Number(o), r++;
+    return (t / r).toString();
+  },
+  max: (e) => {
+    let t = 0;
+    if (Array.isArray(e))
+      for (const r of e)
+        t = Math.max(t, Number(r));
+    return t.toString();
+  },
+  min: (e) => {
+    let t = Number.MAX_VALUE;
+    if (Array.isArray(e))
+      for (const r of e)
+        t = Math.min(t, Number(r));
+    return typeof e == "string" && e.split(",").forEach((r) => {
+      t = Math.min(t, Number(r));
+    }), typeof e == "number" && (t = Math.min(t, e)), t.toString();
+  }
+}, y = (e) => {
+  switch (e) {
+    case "success":
+      return "success";
+    case "warning":
+      return "warning";
+    case "danger":
+    case "error":
+      return "error";
+    case "primary":
+      return "primary";
+    case "neutral":
+      return "inherit";
+    default:
+      return;
+  }
+}, I = ({ value: e, ...t }) => {
+  const r = g.useMemo(() => {
+    const s = new Date(e);
+    return !e || isNaN(s.getTime()) ? "0s" : m(s);
+  }, [e]), [o, a] = g.useState(r);
+  return g.useEffect(() => {
+    const s = new Date(e);
+    if (isNaN(s.getTime())) return;
+    const f = setInterval(() => {
+      a(m(s));
+    }, 1e3);
+    return () => {
+      clearInterval(f);
+    };
+  }, [e, r]), /* @__PURE__ */ n(w, { value: o, ...t });
+}, w = ({ align: e, value: t, color: r, colorMap: o, startDecorator: a, endDecorator: s, formatter: l, children: f }) => {
+  const u = () => {
+    if (o) {
+      const d = o[t] ?? o["*"] ?? void 0;
+      return y(d);
+    }
+    return y(r);
+  };
+  return /* @__PURE__ */ n(
+    c,
+    {
+      display: "flex",
+      flex: 1,
+      justifyContent: (() => {
+        switch (e) {
+          case "left":
+            return "flex-start";
+          case "right":
+            return "flex-end";
+          case "center":
+            return "center";
+          default:
+            return "flex-start";
+        }
+      })(),
+      alignItems: "center",
+      sx: {
+        overflowY: "hidden",
+        overflowX: "scroll",
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": { display: "none" }
+      },
+      children: f ?? /* @__PURE__ */ x(c, { display: "flex", alignItems: "center", gap: 0.5, children: [
+        a,
+        /* @__PURE__ */ n(
+          C,
+          {
+            variant: "caption",
+            color: u(),
+            noWrap: !0,
+            children: l && h[l] ? h[l](t) : `${t}`
+          }
+        ),
+        s
+      ] })
+    }
+  );
+}, B = ({ formatter: e, ...t }) => e?.toLowerCase() === "age" ? /* @__PURE__ */ n(I, { ...t }) : /* @__PURE__ */ n(w, { ...t, formatter: e?.toLowerCase() });
+B.displayName = "TextCell";
+const T = {
+  success: "var(--ov-success-default)",
+  warning: "var(--ov-warning-default)",
+  danger: "var(--ov-danger-default)",
+  primary: "var(--ov-accent)",
+  neutral: "var(--ov-fg-muted)"
+}, j = ({ align: e, values: t, colorMap: r, hoverMenu: o, hoverMenuDelay: a }) => {
+  const s = (i) => T[r[i] ?? "neutral"], l = () => {
+    switch (e) {
+      case "left":
+        return "flex-start";
+      case "right":
+        return "flex-end";
+      case "center":
+        return "center";
+      case "justify":
+        return "space-between";
+      default:
+        return "flex-start";
+    }
+  }, f = a ?? 200, u = ({ color: i }) => /* @__PURE__ */ n(
+    c,
+    {
+      sx: {
+        borderRadius: "2px",
+        width: 12,
+        height: 12,
+        minWidth: 12,
+        minHeight: 12,
+        bgcolor: i
+      }
+    }
+  );
+  return /* @__PURE__ */ n(
+    c,
+    {
+      display: "flex",
+      flex: 1,
+      justifyContent: l(),
+      alignItems: "center",
+      gap: 0.25,
+      children: t.map((i, d) => o ? /* @__PURE__ */ n(
+        S,
+        {
+          title: o(i),
+          enterDelay: f,
+          slotProps: {
+            tooltip: {
+              sx: {
+                p: 1,
+                border: "1px solid var(--ov-border-default)",
+                bgcolor: "var(--ov-bg-surface-overlay)",
+                color: "var(--ov-fg-default)"
+              }
+            }
+          },
+          children: /* @__PURE__ */ n(u, { color: s(i) })
+        },
+        `badge-${d}`
+      ) : /* @__PURE__ */ n(u, { color: s(i) }, `badge-${d}`))
+    }
+  );
+};
+j.displayName = "BadgesCell";
+const v = (e) => {
+  switch (e) {
+    case "success":
+      return "success";
+    case "warning":
+      return "warning";
+    case "danger":
+      return "error";
+    case "primary":
+      return "primary";
+    case "neutral":
+      return "default";
+    default:
+      return "default";
+  }
+}, R = (e) => e === "outlined" ? "outlined" : "filled", k = ({ align: e, value: t, color: r, colorMap: o, startDecorator: a, endDecorator: s, variant: l }) => {
+  const f = () => o ? o[t] || "neutral" : r ?? "neutral", u = () => {
+    switch (e) {
+      case "left":
+        return "flex-start";
+      case "right":
+        return "flex-end";
+      case "center":
+        return "center";
+      default:
+        return "flex-start";
+    }
+  }, i = typeof a == "string" ? /* @__PURE__ */ n(p, { name: a, size: 16 }) : a, d = typeof s == "string" ? /* @__PURE__ */ n(p, { name: s, size: 16 }) : s;
+  return /* @__PURE__ */ n(
+    c,
+    {
+      display: "flex",
+      flex: 1,
+      justifyContent: u(),
+      alignItems: "center",
+      children: /* @__PURE__ */ n(
+        N,
+        {
+          size: "small",
+          color: v(f()),
+          variant: R(l),
+          sx: { borderRadius: "4px" },
+          icon: i,
+          label: d ? /* @__PURE__ */ x(c, { display: "flex", alignItems: "center", gap: 0.5, children: [
+            t,
+            d
+          ] }) : t
+        }
+      )
+    }
+  );
+};
+k.displayName = "ChipCell";
+const z = ({ table: e }) => /* @__PURE__ */ n(c, { sx: {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  height: "100%",
+  maxWidth: 24
+}, children: /* @__PURE__ */ n(
+  b,
+  {
+    size: "small",
+    checked: e.getIsAllPageRowsSelected(),
+    onChange: (t) => {
+      e.toggleAllPageRowsSelected(t.target.checked);
+    },
+    "aria-label": "Select all rows"
+  }
+) });
+z.displayName = "SelectBoxHeader";
+const E = ({ row: e }) => /* @__PURE__ */ n(c, { sx: {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  height: "100%",
+  maxWidth: 24
+}, children: /* @__PURE__ */ n(
+  b,
+  {
+    size: "small",
+    checked: e.getIsSelected(),
+    onChange: (t) => {
+      e.toggleSelected(t.target.checked);
+    },
+    "aria-label": "Select row"
+  }
+) });
+E.displayName = "SelectBoxRow";
+export {
+  j as BadgesCell,
+  k as ChipCell,
+  z as SelectBoxHeader,
+  E as SelectBoxRow,
+  B as TextCell
+};

package/dist/charts/BarChart.d.ts

@@ -0,0 +1,15 @@
+import { SemanticColor } from '../types';
+import { BaseChartProps, CategoricalDatum, MetricFormat } from './types';
+export interface BarChartProps extends BaseChartProps {
+    data: CategoricalDatum[];
+    horizontal?: boolean;
+    valueFormat?: MetricFormat;
+    showLabels?: boolean;
+    stacked?: boolean;
+    colors?: (SemanticColor | string)[];
+}
+declare function BarChart({ data, horizontal, valueFormat, unit, valueFormatter: customFormatter, showLabels, colors, size, height: heightOverride, loading, error, onRetry, skipAnimation, sx, }: BarChartProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BarChart {
+    var displayName: string;
+}
+export default BarChart;

package/dist/charts/ChartContainer.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface ChartContainerProps {
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    empty?: boolean;
+    width?: number | string;
+    height: number;
+    children: React.ReactNode;
+}
+export default function ChartContainer({ loading, error, onRetry, empty, width, height, children, }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/charts/ChartLegend.d.ts

@@ -0,0 +1,11 @@
+interface LegendItem {
+    label: string;
+    color: string;
+}
+interface ChartLegendProps {
+    items: LegendItem[];
+    /** Compact mode: smaller dots/font, tighter spacing, left-aligned */
+    compact?: boolean;
+}
+export default function ChartLegend({ items, compact }: ChartLegendProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/charts/GaugeCard.d.ts

@@ -0,0 +1,18 @@
+import { ComponentSize, SemanticColor } from '../types';
+export interface GaugeCardProps {
+    value: number;
+    min?: number;
+    max?: number;
+    label: string;
+    unit?: string;
+    color?: SemanticColor;
+    /** [warningAt, dangerAt] thresholds for auto-coloring */
+    thresholds?: [number, number];
+    size?: ComponentSize;
+    loading?: boolean;
+}
+declare function GaugeCard({ value, min, max, label, unit, color, thresholds, size, loading, }: GaugeCardProps): import("react/jsx-runtime").JSX.Element;
+declare namespace GaugeCard {
+    var displayName: string;
+}
+export default GaugeCard;

package/dist/charts/MetricsPanel.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { SemanticColor } from '../types';
+import { TimeSeriesDef, ChartTimeRange, ChartAnnotation, ChartEventMarker, MetricFormat, RefreshInterval } from './types';
+import { ChartMargin } from './TimeSeriesChart';
+import { TimeRangePreset } from '../inputs/TimeRangePicker';
+export interface MetricsPanelMenuItem {
+    label: string;
+    onClick: () => void;
+}
+export interface MetricsPanelProps {
+    title: string;
+    /** Small icon rendered before the title for quick scanning */
+    icon?: React.ReactNode;
+    /** Muted subtitle below title (e.g. "From Kubernetes Metrics Server") */
+    subtitle?: string;
+    series: TimeSeriesDef[];
+    timeRange: ChartTimeRange;
+    onTimeRangeChange?: (range: ChartTimeRange) => void;
+    refreshInterval?: RefreshInterval;
+    onRefresh?: () => void;
+    valueFormat?: MetricFormat;
+    unit?: string;
+    valueFormatter?: (value: number | null) => string;
+    annotations?: ChartAnnotation[];
+    /** Lens-style vertical event markers at specific timestamps */
+    eventMarkers?: ChartEventMarker[];
+    area?: boolean;
+    presets?: TimeRangePreset[];
+    colors?: (SemanticColor | string)[];
+    /** @deprecated Use `toolbar` instead */
+    headerActions?: React.ReactNode;
+    /** Slot for icon buttons rendered in the header row */
+    toolbar?: React.ReactNode;
+    /** Three-dot menu items (top-right) */
+    menuItems?: MetricsPanelMenuItem[];
+    /** Position of the y-axis. Default: 'none' */
+    yAxisPosition?: 'left' | 'right' | 'none';
+    /** Position of the x-axis. Default: 'none' */
+    xAxisPosition?: 'bottom' | 'top' | 'none';
+    /** Override chart margins (space between SVG edge and axes). Partial — unset keys use defaults. */
+    margin?: ChartMargin;
+    /** Override y-axis width (space for tick labels). */
+    yAxisWidth?: number;
+    /** Override x-axis height (space for tick labels). */
+    xAxisHeight?: number;
+    /** Render y-axis labels inside the chart area (Grafana/Lens style). Default: true */
+    yAxisInline?: boolean;
+    /** Which side to render inline y-axis labels. Default: 'right' */
+    yAxisInlinePosition?: 'left' | 'right';
+    /** 'compact' = minimal padding, no outer border. Default: 'default' */
+    variant?: 'default' | 'compact';
+    height?: number;
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+}
+declare function MetricsPanel({ title, icon, subtitle, series, timeRange, onTimeRangeChange, refreshInterval, onRefresh, valueFormat, unit, valueFormatter, annotations, eventMarkers, area, presets, colors, headerActions, toolbar, menuItems, yAxisPosition, xAxisPosition, margin, yAxisWidth, xAxisHeight, yAxisInline, yAxisInlinePosition, variant, height, loading, error, onRetry, }: MetricsPanelProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MetricsPanel {
+    var displayName: string;
+}
+export default MetricsPanel;

package/dist/charts/PieChart.d.ts

@@ -0,0 +1,13 @@
+import { SemanticColor } from '../types';
+import { BaseChartProps, CategoricalDatum } from './types';
+export interface PieChartProps extends BaseChartProps {
+    data: CategoricalDatum[];
+    innerRadius?: number;
+    showLabels?: boolean;
+    colors?: (SemanticColor | string)[];
+}
+declare function PieChart({ data, innerRadius, showLabels, colors, size, height: heightOverride, loading, error, onRetry, skipAnimation, sx, }: PieChartProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PieChart {
+    var displayName: string;
+}
+export default PieChart;

package/dist/charts/ScatterChart.d.ts

@@ -0,0 +1,25 @@
+import { SemanticColor } from '../types';
+import { BaseChartProps, MetricFormat } from './types';
+export interface ScatterSeriesDef {
+    id: string;
+    label: string;
+    data: Array<{
+        x: number;
+        y: number;
+        id?: string | number;
+    }>;
+    color?: SemanticColor | string;
+}
+export interface ScatterChartProps extends BaseChartProps {
+    series: ScatterSeriesDef[];
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    xFormat?: MetricFormat;
+    yFormat?: MetricFormat;
+    colors?: (SemanticColor | string)[];
+}
+declare function ScatterChart({ series, xAxisLabel, yAxisLabel, xFormat, yFormat, colors, size, height: heightOverride, loading, error, onRetry, skipAnimation, sx, }: ScatterChartProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ScatterChart {
+    var displayName: string;
+}
+export default ScatterChart;

package/dist/charts/Sparkline.d.ts

@@ -0,0 +1,16 @@
+import { SemanticColor } from '../types';
+export interface SparklineProps {
+    data: number[];
+    plotType?: 'line' | 'bar';
+    area?: boolean;
+    color?: SemanticColor | string;
+    height?: number;
+    width?: number | string;
+    showTooltip?: boolean;
+    skipAnimation?: boolean;
+}
+declare function Sparkline({ data, plotType, area, color, height, width, showTooltip, skipAnimation, }: SparklineProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Sparkline {
+    var displayName: string;
+}
+export default Sparkline;

package/dist/charts/StackedAreaChart.d.ts

@@ -0,0 +1,18 @@
+import { SemanticColor } from '../types';
+import { BaseChartProps, TimeSeriesDef, ChartTimeRange, MetricFormat } from './types';
+export interface StackedAreaChartProps extends BaseChartProps {
+    series: TimeSeriesDef[];
+    /** Horizontal reference line for capacity/limit */
+    capacity?: number;
+    timeRange?: ChartTimeRange;
+    valueFormat?: MetricFormat;
+    stacked?: boolean;
+    colors?: (SemanticColor | string)[];
+    /** Position of the y-axis. Default: 'left' */
+    yAxisPosition?: 'left' | 'right' | 'none';
+}
+declare function StackedAreaChart({ series, capacity, timeRange, valueFormat, unit, valueFormatter: customFormatter, stacked, colors, yAxisPosition, size, height: heightOverride, loading, error, onRetry, skipAnimation, sx, }: StackedAreaChartProps): import("react/jsx-runtime").JSX.Element;
+declare namespace StackedAreaChart {
+    var displayName: string;
+}
+export default StackedAreaChart;

package/dist/charts/TimeSeriesChart.d.ts

@@ -0,0 +1,43 @@
+import { SemanticColor } from '../types';
+import { BaseChartProps, TimeSeriesDef, ChartTimeRange, ChartAnnotation, ChartEventMarker, MetricFormat } from './types';
+export interface ChartMargin {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+export interface TimeSeriesChartProps extends BaseChartProps {
+    series: TimeSeriesDef[];
+    timeRange?: ChartTimeRange;
+    yAxisLabel?: string;
+    valueFormat?: MetricFormat;
+    annotations?: ChartAnnotation[];
+    area?: boolean;
+    grid?: boolean;
+    showLegend?: boolean;
+    showMarks?: boolean;
+    colors?: (SemanticColor | string)[];
+    /** Position of the y-axis. Default: 'left' */
+    yAxisPosition?: 'left' | 'right' | 'none';
+    /** Position of the x-axis. Default: 'bottom' */
+    xAxisPosition?: 'bottom' | 'top' | 'none';
+    /** Compact mode hides axis lines for embedded use */
+    compact?: boolean;
+    /** Override chart margins (space between SVG border and axes). Partial — unset keys use defaults. */
+    margin?: ChartMargin;
+    /** Override y-axis width (space for tick labels). Default: 30 in compact, 40 otherwise. */
+    yAxisWidth?: number;
+    /** Override x-axis height (space for tick labels). Default: 20 in compact, 24 otherwise. */
+    xAxisHeight?: number;
+    /** Render y-axis labels inside the chart area (Grafana/Lens style). Hides the external y-axis. */
+    yAxisInline?: boolean;
+    /** Which side to render inline y-axis labels. Default: 'right' */
+    yAxisInlinePosition?: 'left' | 'right';
+    /** Lens-style vertical event markers at specific timestamps */
+    eventMarkers?: ChartEventMarker[];
+}
+declare function TimeSeriesChart({ series, timeRange, yAxisLabel, valueFormat, unit, valueFormatter: customFormatter, annotations, area, grid, showLegend, showMarks, colors, yAxisPosition, xAxisPosition, compact, margin: marginOverride, yAxisWidth: yAxisWidthOverride, xAxisHeight: xAxisHeightOverride, yAxisInline, yAxisInlinePosition, eventMarkers, size, height: heightOverride, loading, error, onRetry, skipAnimation, sx, }: TimeSeriesChartProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TimeSeriesChart {
+    var displayName: string;
+}
+export default TimeSeriesChart;

package/dist/charts/formatters.d.ts

@@ -0,0 +1,17 @@
+import { MetricFormat } from './types';
+/** Format bytes with auto-scaling (B → TiB). */
+export declare function formatBytes(n: number, unit?: string): string;
+/** Format a value as a percentage. */
+export declare function formatPercent(v: number, unit?: string): string;
+/** Format a duration in ms with auto-scaling. */
+export declare function formatDuration(ms: number, unit?: string): string;
+/** Format a rate (/s) with SI prefix. */
+export declare function formatRate(v: number, unit?: string): string;
+/** Format with SI prefix (1.2k, 3.4M, etc.). */
+export declare function formatSI(v: number, unit?: string): string;
+/** Format a number with locale-aware commas. */
+export declare function formatNumber(v: number, unit?: string): string;
+/** Format a Date for axis tick labels (HH:mm). */
+export declare function formatTimeAxisTick(date: Date): string;
+/** Returns the formatter function for a given MetricFormat preset. Handles null for MUI X compat. */
+export declare function getValueFormatter(format: MetricFormat, unit?: string): (v: number | null) => string;

package/dist/charts/index.d.ts

@@ -0,0 +1,21 @@
+export type { TimeSeriesPoint, TimeSeriesDef, CategoricalDatum, ChartAnnotation, ChartEventMarker, MetricFormat, ChartTimeRange, RefreshInterval, BaseChartProps, } from './types';
+export { resolveChartColor, chartPalette } from './palette';
+export { formatBytes, formatPercent, formatDuration, formatRate, formatSI, formatNumber, formatTimeAxisTick, getValueFormatter, } from './formatters';
+export { useChartTheme } from './useChartTheme';
+export type { ChartTheme } from './useChartTheme';
+export { default as TimeSeriesChart } from './TimeSeriesChart';
+export type { TimeSeriesChartProps, ChartMargin } from './TimeSeriesChart';
+export { default as BarChart } from './BarChart';
+export type { BarChartProps } from './BarChart';
+export { default as PieChart } from './PieChart';
+export type { PieChartProps } from './PieChart';
+export { default as ScatterChart } from './ScatterChart';
+export type { ScatterChartProps, ScatterSeriesDef } from './ScatterChart';
+export { default as Sparkline } from './Sparkline';
+export type { SparklineProps } from './Sparkline';
+export { default as GaugeCard } from './GaugeCard';
+export type { GaugeCardProps } from './GaugeCard';
+export { default as MetricsPanel } from './MetricsPanel';
+export type { MetricsPanelProps, MetricsPanelMenuItem } from './MetricsPanel';
+export { default as StackedAreaChart } from './StackedAreaChart';
+export type { StackedAreaChartProps } from './StackedAreaChart';

package/dist/charts/palette.d.ts

@@ -0,0 +1,7 @@
+import { SemanticColor } from '../types';
+/** Resolves a SemanticColor or raw CSS color string to a concrete color value. */
+export declare function resolveChartColor(color: SemanticColor | string): string;
+/** Flush cached color values (call on theme change). */
+export declare function clearColorCache(): void;
+/** Returns an array of resolved color strings for chart series. */
+export declare function chartPalette(colors?: (SemanticColor | string)[]): string[];