@msqd/lydia 0.0.0-stage → 0.6.0

package/dist/Components/Charts/SummaryRateChart.js

@@ -0,0 +1,81 @@
+import { jsx as m } from "react/jsx-runtime";
+import { BarChart as d } from "echarts/charts";
+import { GridComponent as c, TooltipComponent as f } from "echarts/components";
+import * as s from "echarts/core";
+import { CanvasRenderer as u } from "echarts/renderers";
+import { useMemo as g } from "react";
+import { ChartBarCalculator as C } from "./Utils/ChartBarCalculator.js";
+import { ReactEChartsCore as y } from "./Utils/ReactEChartsCore.js";
+import { TimeFormatter as x } from "./Utils/TimeFormatter.js";
+import { escapeTooltipHtml as n } from "./Utils/escapeTooltipHtml.js";
+import { defaultEchartOptions as i } from "../../Settings.js";
+import { useChartDimensions as b } from "./Hooks/useChartDimensions.js";
+import { useThemeColor as W } from "./Hooks/useThemeColors.js";
+s.use([d, u, c, f]);
+const v = (t) => {
+  const r = t[0];
+  let o = `<strong>${n(r.name)}</strong><br/>`;
+  return o += `<small>${n(r.value)}</small>`, o;
+}, B = { left: 20, right: 20 }, O = ({ data: t, color: r }) => {
+  const o = W(r), { containerRef: p, dimensions: l } = b({ defaultWidth: 300, padding: B }), { barWidth: a } = C.calculateBarSizing({
+    dataLength: t.length,
+    chartAreaWidth: l.chartAreaWidth,
+    gapWidth: 2,
+    minBarWidth: 2,
+    maxBarWidth: t.length > 30 ? 10 : 19
+  }), h = g(
+    () => ({
+      ...i,
+      grid: {
+        ...i.grid,
+        left: 8,
+        right: 8,
+        top: 64,
+        bottom: 24
+      },
+      xAxis: {
+        type: "category",
+        data: t.map((e) => x.formatTick(e.datetime, "24h"))
+      },
+      yAxis: {
+        type: "value",
+        min: 0,
+        // Ensure Y-axis starts from 0, no negative values
+        axisLabel: { show: !1 }
+      },
+      tooltip: {
+        ...i.tooltip,
+        formatter: v
+      },
+      series: [
+        {
+          data: t.map((e) => e.value),
+          type: "bar",
+          barWidth: `${a}px`,
+          barGap: "2px",
+          // 2px gap for summary charts
+          smooth: !1,
+          symbol: "none",
+          lineStyle: {
+            width: 4
+          },
+          color: o
+        }
+      ]
+    }),
+    [t, o, a]
+  );
+  return /* @__PURE__ */ m("div", { ref: p, style: { width: "100%" }, children: /* @__PURE__ */ m(
+    y,
+    {
+      echarts: s,
+      option: h,
+      notMerge: !0,
+      lazyUpdate: !0,
+      opts: { height: 240, width: "auto" }
+    }
+  ) });
+};
+export {
+  O as SummaryRateChart
+};

package/dist/Components/Charts/TransactionsChart.d.ts

@@ -0,0 +1,6 @@
+import type { OverviewTransaction } from "../../Models/index.js";
+export interface TransactionsChartProps {
+    data: Array<OverviewTransaction>;
+    timeRange?: string;
+}
+export declare const TransactionsChart: ({ data, timeRange }: TransactionsChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Charts/TransactionsChart.js

@@ -0,0 +1,70 @@
+import { jsx as m } from "react/jsx-runtime";
+import { BarChart as f } from "echarts/charts";
+import { GridComponent as d, TooltipComponent as u } from "echarts/components";
+import * as p from "echarts/core";
+import { CanvasRenderer as C } from "echarts/renderers";
+import { useMemo as T } from "react";
+import { ReactEChartsCore as g } from "./Utils/ReactEChartsCore.js";
+import { defaultEchartOptions as n } from "../../Settings.js";
+import { createThinBarSeries as B } from "./Components/ThinBarChart.js";
+import { createWideBarSeries as W } from "./Components/WideBarChart.js";
+import { useChartDimensions as S } from "./Hooks/useChartDimensions.js";
+import { useThemeColors as y } from "./Hooks/useThemeColors.js";
+import { ChartBarCalculator as b } from "./Utils/ChartBarCalculator.js";
+import { chartColorTokens as x } from "./Utils/ChartColors.js";
+import { ChartTooltipFormatter as s } from "./Utils/ChartTooltipFormatter.js";
+import { TimeFormatter as A } from "./Utils/TimeFormatter.js";
+p.use([f, C, d, u]);
+const O = {
+  show: !0,
+  rotate: 90,
+  formatter: "{c}",
+  fontSize: 12,
+  rich: {
+    name: {}
+  }
+}, I = ({ data: t, timeRange: a }) => {
+  const { containerRef: c, dimensions: r } = S({
+    defaultWidth: 600,
+    defaultHeight: 300,
+    padding: { left: 40, right: 40, top: 20, bottom: 40 }
+  }), o = y(x), h = T(() => {
+    const e = b.calculateBarConfig({
+      dataLength: t.length,
+      chartAreaWidth: r.chartAreaWidth,
+      containerWidth: r.containerWidth
+    }), l = () => e.useSplitBars ? W({ data: t, barConfig: e, labelOption: { ...O, color: o.label }, colors: o }) : B({ data: t, barConfig: e, colors: o });
+    return {
+      ...n,
+      xAxis: {
+        type: "category",
+        data: t.map((i) => A.formatTick(i.datetime, a))
+      },
+      yAxis: {
+        type: "value",
+        min: 0
+      },
+      tooltip: {
+        ...n.tooltip,
+        formatter: e.useSplitBars ? s.formatSplitBarsTooltip : (
+          // Same ECharts params as the other tooltip formatters: a series list this code does not narrow.
+          ((i) => s.formatUnifiedBarsTooltip(i, t))
+        )
+      },
+      series: l()
+    };
+  }, [t, a, r.chartAreaWidth, r.containerWidth, o]);
+  return /* @__PURE__ */ m("div", { ref: c, style: { width: "100%" }, children: /* @__PURE__ */ m(
+    g,
+    {
+      echarts: p,
+      option: h,
+      notMerge: !0,
+      lazyUpdate: !0,
+      opts: { height: 300, width: "auto" }
+    }
+  ) });
+};
+export {
+  I as TransactionsChart
+};

package/dist/Components/Charts/Utils/ChartBarCalculator.d.ts

@@ -0,0 +1,48 @@
+export interface BarConfiguration {
+    mainBarWidth: string;
+    detailBarWidth: string;
+    showLabels: boolean;
+    useSplitBars: boolean;
+    calculatedWidth: number;
+    barGap: string;
+}
+export interface BarCalculatorOptions {
+    dataLength: number;
+    chartAreaWidth: number;
+    containerWidth: number;
+    wideBarGapWidth?: number;
+    thinBarGapWidth?: number;
+    minBarWidth?: number;
+    maxBarWidth?: number;
+    detailBarWidthRatio?: number;
+}
+/**
+ * Utility class for calculating responsive bar chart configurations
+ */
+export declare class ChartBarCalculator {
+    private static readonly DEFAULT_WIDE_GAP;
+    private static readonly DEFAULT_THIN_GAP;
+    private static readonly DEFAULT_MIN_WIDTH;
+    private static readonly DEFAULT_MAX_WIDTH;
+    private static readonly DEFAULT_DETAIL_RATIO;
+    /**
+     * Calculate responsive bar configuration based on data length and container dimensions
+     */
+    static calculateBarConfig(options: BarCalculatorOptions): BarConfiguration;
+    /**
+     * Width of the bars that fit side by side in the chart area, once the gaps between them are
+     * reserved, clamped to the allowed range.
+     */
+    static calculateBarSizing(options: {
+        dataLength: number;
+        chartAreaWidth: number;
+        gapWidth: number;
+        minBarWidth: number;
+        maxBarWidth: number;
+    }): {
+        barWidth: number;
+        gapWidth: number;
+        totalGapSpace: number;
+    };
+    private static shouldShowLabels;
+}

package/dist/Components/Charts/Utils/ChartBarCalculator.js

@@ -0,0 +1,66 @@
+class u {
+  static DEFAULT_WIDE_GAP = 4;
+  static DEFAULT_THIN_GAP = 2;
+  static DEFAULT_MIN_WIDTH = 3;
+  static DEFAULT_MAX_WIDTH = 38;
+  static DEFAULT_DETAIL_RATIO = 0.3;
+  /**
+   * Calculate responsive bar configuration based on data length and container dimensions
+   */
+  static calculateBarConfig(d) {
+    const {
+      dataLength: t,
+      chartAreaWidth: a,
+      containerWidth: i,
+      wideBarGapWidth: r = this.DEFAULT_WIDE_GAP,
+      thinBarGapWidth: W = this.DEFAULT_THIN_GAP,
+      minBarWidth: s = this.DEFAULT_MIN_WIDTH,
+      maxBarWidth: e = this.DEFAULT_MAX_WIDTH,
+      detailBarWidthRatio: o = this.DEFAULT_DETAIL_RATIO
+    } = d, h = this.calculateBarSizing({
+      dataLength: t,
+      chartAreaWidth: a,
+      gapWidth: r,
+      minBarWidth: s,
+      maxBarWidth: e
+    }), B = this.calculateBarSizing({
+      dataLength: t,
+      chartAreaWidth: a,
+      gapWidth: W,
+      minBarWidth: s,
+      maxBarWidth: e
+    }), l = Math.max(2, h.barWidth * o), A = (h.barWidth + l) * t + h.totalGapSpace, n = h.barWidth >= 16 && A <= a, c = n ? h : B, p = n ? l : 0;
+    return {
+      mainBarWidth: `${c.barWidth}px`,
+      detailBarWidth: n ? `${p}px` : "0px",
+      showLabels: this.shouldShowLabels({
+        useWideBars: n,
+        dataLength: t,
+        containerWidth: i,
+        barWidth: c.barWidth
+      }),
+      useSplitBars: n,
+      calculatedWidth: c.barWidth,
+      barGap: `${c.gapWidth}px`
+    };
+  }
+  /**
+   * Width of the bars that fit side by side in the chart area, once the gaps between them are
+   * reserved, clamped to the allowed range.
+   */
+  static calculateBarSizing(d) {
+    const { dataLength: t, chartAreaWidth: a, gapWidth: i, minBarWidth: r, maxBarWidth: W } = d, s = (t - 1) * i, e = a - s, o = Math.floor(e / t);
+    return {
+      barWidth: Math.max(r, Math.min(W, o)),
+      gapWidth: i,
+      totalGapSpace: s
+    };
+  }
+  static shouldShowLabels(d) {
+    const { useWideBars: t, dataLength: a, containerWidth: i, barWidth: r } = d;
+    return t ? i < 400 ? a <= 12 && r >= 12 : i < 600 ? a <= 20 && r >= 10 : a <= 30 && r >= 16 : !1;
+  }
+}
+export {
+  u as ChartBarCalculator
+};

package/dist/Components/Charts/Utils/ChartColors.d.ts

@@ -0,0 +1,13 @@
+import type { ThemeColors } from "./ThemeColor.js";
+/**
+ * Theme tokens behind the transaction charts. Errors and cached follow the danger and success tokens, so the
+ * Errors pane's ring and its chart move together.
+ */
+export declare const chartColorTokens: {
+    readonly transactions: "--color-chart-transactions";
+    readonly errors: "--color-danger-200";
+    readonly cached: "--color-success-200";
+    readonly rest: "--color-chart-rest";
+    readonly label: "--color-chart-label";
+};
+export type ChartColors = ThemeColors<typeof chartColorTokens>;

package/dist/Components/Charts/Utils/ChartColors.js

@@ -0,0 +1,10 @@
+const r = {
+  transactions: "--color-chart-transactions",
+  errors: "--color-danger-200",
+  cached: "--color-success-200",
+  rest: "--color-chart-rest",
+  label: "--color-chart-label"
+};
+export {
+  r as chartColorTokens
+};

package/dist/Components/Charts/Utils/ChartTooltipFormatter.d.ts

@@ -0,0 +1,43 @@
+import type { OverviewTransaction } from "../../../Models/index.js";
+export interface TooltipData {
+    count: number;
+    errors: number;
+    cached: number;
+    name: string;
+}
+export interface SplitTooltipParams {
+    name: string;
+    value: number;
+    dataIndex?: number;
+}
+/**
+ * Utility class for formatting chart tooltips with consistent styling and calculations
+ */
+export declare class ChartTooltipFormatter {
+    /**
+     * Format percentage with consistent styling
+     */
+    private static formatPercentage;
+    /**
+     * The Transactions / Cached / Errors block shared by every tooltip
+     */
+    private static formatBreakdown;
+    /**
+     * Create tooltip content for split bar charts (wide bars with separate error/cached bars)
+     *
+     * @returns HTML, with every interpolated input escaped
+     */
+    static formatSplitBarsTooltip(params: SplitTooltipParams[]): string;
+    /**
+     * Create tooltip content for unified bar charts (stacked bars)
+     *
+     * @returns HTML, with every interpolated input escaped
+     */
+    static formatUnifiedBarsTooltip(params: SplitTooltipParams[], data: OverviewTransaction[]): string;
+    /**
+     * Create tooltip content from transaction data directly
+     *
+     * @returns HTML, with every interpolated input escaped
+     */
+    static formatTooltipFromData({ count, errors, cached, name }: TooltipData): string;
+}

package/dist/Components/Charts/Utils/ChartTooltipFormatter.js

@@ -0,0 +1,57 @@
+import { escapeTooltipHtml as o } from "./escapeTooltipHtml.js";
+class s {
+  /**
+   * Format percentage with consistent styling
+   */
+  static formatPercentage(r, a) {
+    return a ? (r / a).toLocaleString(void 0, {
+      style: "percent",
+      minimumFractionDigits: 1
+    }) : "n/a";
+  }
+  /**
+   * The Transactions / Cached / Errors block shared by every tooltip
+   */
+  static formatBreakdown({ count: r, cached: a, errors: e }) {
+    const t = s.formatPercentage(e, r), n = s.formatPercentage(a, r);
+    return `<small>Transactions: ${o(r)}<br/>Cached: ${o(a)} (${n})<br/>Errors: ${o(e)} (${t})<br/></small>`;
+  }
+  /**
+   * Create tooltip content for split bar charts (wide bars with separate error/cached bars)
+   *
+   * @returns HTML, with every interpolated input escaped
+   */
+  static formatSplitBarsTooltip(r) {
+    const [a, e, t] = r;
+    return s.formatTooltipFromData({
+      name: a.name,
+      count: a.value,
+      errors: e?.value || 0,
+      cached: t?.value || 0
+    });
+  }
+  /**
+   * Create tooltip content for unified bar charts (stacked bars)
+   *
+   * @returns HTML, with every interpolated input escaped
+   */
+  static formatUnifiedBarsTooltip(r, a) {
+    const e = r[0]?.dataIndex;
+    if (e === void 0 || !a[e])
+      return `<strong>${o(r[0]?.name || "Unknown")}</strong><br/><small>No data available</small>`;
+    const { count: t, errors: n, cached: c } = a[e];
+    return `<strong>${o(r[0].name)}</strong><br/>${s.formatBreakdown({ count: t, errors: n, cached: c })}`;
+  }
+  /**
+   * Create tooltip content from transaction data directly
+   *
+   * @returns HTML, with every interpolated input escaped
+   */
+  static formatTooltipFromData({ count: r, errors: a, cached: e, name: t }) {
+    const n = `<strong>${o(t)}</strong><br/>`;
+    return r ? n + s.formatBreakdown({ count: r, errors: a, cached: e }) : `${n}<small>No transactions</small>`;
+  }
+}
+export {
+  s as ChartTooltipFormatter
+};

package/dist/Components/Charts/Utils/ReactEChartsCore.d.ts

@@ -0,0 +1,4 @@
+import * as echartsForReact from "echarts-for-react/lib/core.js";
+type EChartsCoreComponent = typeof echartsForReact.default;
+export declare const ReactEChartsCore: EChartsCoreComponent;
+export {};

package/dist/Components/Charts/Utils/ReactEChartsCore.js

@@ -0,0 +1,5 @@
+import * as e from "echarts-for-react/lib/core.js";
+const t = e.default, o = typeof t == "function" ? t : t.default;
+export {
+  o as ReactEChartsCore
+};

package/dist/Components/Charts/Utils/ThemeColor.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Theme tokens are `oklch()` custom properties, and ECharts paints on a canvas with a colour parser that does not
+ * know `oklch()`. These helpers read a token from the computed style and hand ECharts an `rgb()` it parses.
+ */
+/**
+ * Converts `oklch()` to `rgb()`/`rgba()`; any other colour ECharts understands is returned untouched. Returns
+ * `undefined` for a value ECharts cannot paint (malformed `oklch()`, `color-mix()`, `lab()`, `color()`...), so it
+ * keeps its own palette instead of getting `NaN`.
+ */
+export declare function toEchartsColor(value: string): string | undefined;
+/**
+ * Resolves a theme token (`--color-danger-200`) to a colour ECharts accepts, from the live computed style so a
+ * retheme is seen. Returns `undefined` for an undefined token, so ECharts keeps its own palette instead of a
+ * guessed colour.
+ */
+export declare function resolveThemeColor(token: string, element?: Element): string | undefined;
+export type ThemeColors<T extends Record<string, string>> = {
+    [K in keyof T]: string | undefined;
+};
+/** Resolves a record of tokens, keeping its keys. */
+export declare function resolveThemeColors<T extends Record<string, string>>(tokens: T, element?: Element): ThemeColors<T>;

package/dist/Components/Charts/Utils/ThemeColor.js

@@ -0,0 +1,54 @@
+const E = /^oklch\(\s*([^\s/)]+)\s+([^\s/)]+)\s+([^\s/)]+)(?:\s*\/\s*([^\s)]+))?\s*\)$/i, g = /^oklch\(/i, b = /^(?:color-mix|color|lab|lch|oklab)\(/i, p = "[+-]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:e[+-]?\\d+)?", C = new RegExp(`^(${p})(%)?$`, "i"), $ = new RegExp(`^(${p})(deg|grad|rad|turn)?$`, "i"), N = { deg: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 }, f = (o, t, e) => Math.min(e, Math.max(t, o));
+function m(o, t, e, n) {
+  if (o.toLowerCase() === "none") return f(0, e, n);
+  const r = C.exec(o);
+  if (!r) return;
+  const c = Number.parseFloat(r[1]);
+  return f(r[2] ? c / 100 * t : c, e, n);
+}
+function M(o) {
+  if (o.toLowerCase() === "none") return 0;
+  const t = $.exec(o);
+  if (!t) return;
+  const e = t[2]?.toLowerCase() ?? "deg";
+  return Number.parseFloat(t[1]) * N[e];
+}
+const R = (o) => {
+  const t = Math.min(1, Math.max(0, o));
+  return t <= 31308e-7 ? 12.92 * t : 1.055 * t ** (1 / 2.4) - 0.055;
+};
+function T(o, t, e) {
+  const n = e * Math.PI / 180, r = t * Math.cos(n), c = t * Math.sin(n), s = (o + 0.3963377774 * r + 0.2158037573 * c) ** 3, i = (o - 0.1055613458 * r - 0.0638541728 * c) ** 3, a = (o - 0.0894841775 * r - 1.291485548 * c) ** 3;
+  return [
+    4.0767416621 * s - 3.3077115913 * i + 0.2309699292 * a,
+    -1.2684380046 * s + 2.6097574011 * i - 0.3413193965 * a,
+    -0.0041960863 * s - 0.7034186147 * i + 1.707614701 * a
+  ].map((u) => Math.round(R(u) * 255));
+}
+function w(o) {
+  const t = o.trim();
+  if (b.test(t)) return;
+  if (!g.test(t)) return t;
+  const e = E.exec(t);
+  if (!e) return;
+  const [, n, r, c, s] = e, i = m(n, 1, 0, 1), a = m(r, 0.4, 0, Number.POSITIVE_INFINITY), d = M(c), u = s === void 0 ? void 0 : m(s, 1, 0, 1);
+  if (i === void 0 || a === void 0 || d === void 0 || s !== void 0 && u === void 0) return;
+  const [l, h, v] = T(i, a, d);
+  return u === void 0 ? `rgb(${l}, ${h}, ${v})` : `rgba(${l}, ${h}, ${v}, ${u})`;
+}
+function I(o, t) {
+  const e = t ?? (typeof document > "u" ? void 0 : document.documentElement);
+  if (!e) return;
+  const n = window.getComputedStyle(e).getPropertyValue(o).trim();
+  return n ? w(n) : void 0;
+}
+function P(o, t) {
+  return Object.fromEntries(
+    Object.entries(o).map(([e, n]) => [e, I(n, t)])
+  );
+}
+export {
+  I as resolveThemeColor,
+  P as resolveThemeColors,
+  w as toEchartsColor
+};

package/dist/Components/Charts/Utils/TimeFormatter.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Utility class for formatting time labels based on time range
+ */
+export declare class TimeFormatter {
+    /**
+     * Format tick labels based on time range
+     */
+    static formatTick(tick: string, timeRange?: string): string;
+}

package/dist/Components/Charts/Utils/TimeFormatter.js

@@ -0,0 +1,25 @@
+class o {
+  /**
+   * Format tick labels based on time range
+   */
+  static formatTick(e, r) {
+    const t = new Date(e);
+    switch (r) {
+      case "1h":
+        return t.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+      case "24h":
+        return t.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+      case "7d":
+        return t.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" });
+      case "1m":
+        return t.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+      case "1y":
+        return t.toLocaleDateString(void 0, { month: "short", year: "numeric" });
+      default:
+        return t.toLocaleDateString();
+    }
+  }
+}
+export {
+  o as TimeFormatter
+};

package/dist/Components/Charts/Utils/escapeTooltipHtml.d.ts

@@ -0,0 +1,6 @@
+/**
+ * ECharts writes a tooltip formatter's string with `innerHTML`, and chart names and values can come from
+ * captured traffic. Every interpolated value goes through here. `String()` first, because ECharts hands
+ * values over raw, so a string can sit in a field typed as a number.
+ */
+export declare const escapeTooltipHtml: (value: unknown) => string;

package/dist/Components/Charts/Utils/escapeTooltipHtml.js

@@ -0,0 +1,5 @@
+import { format as t } from "echarts/core";
+const r = (o) => t.encodeHTML(String(o));
+export {
+  r as escapeTooltipHtml
+};

package/dist/Components/Charts/Utils/index.d.ts

@@ -0,0 +1,5 @@
+export { ChartBarCalculator, type BarConfiguration } from "./ChartBarCalculator.js";
+export { ChartTooltipFormatter, type TooltipData, type SplitTooltipParams } from "./ChartTooltipFormatter.js";
+export { TimeFormatter } from "./TimeFormatter.js";
+export { chartColorTokens, type ChartColors } from "./ChartColors.js";
+export { resolveThemeColor, resolveThemeColors, toEchartsColor, type ThemeColors } from "./ThemeColor.js";

package/dist/Components/Charts/Utils/index.js

@@ -0,0 +1,14 @@
+import { ChartBarCalculator as e } from "./ChartBarCalculator.js";
+import { ChartTooltipFormatter as m } from "./ChartTooltipFormatter.js";
+import { TimeFormatter as l } from "./TimeFormatter.js";
+import { chartColorTokens as h } from "./ChartColors.js";
+import { resolveThemeColor as f, resolveThemeColors as s, toEchartsColor as x } from "./ThemeColor.js";
+export {
+  e as ChartBarCalculator,
+  m as ChartTooltipFormatter,
+  l as TimeFormatter,
+  h as chartColorTokens,
+  f as resolveThemeColor,
+  s as resolveThemeColors,
+  x as toEchartsColor
+};

package/dist/Components/Charts/index.d.ts

@@ -0,0 +1,6 @@
+export { SummaryPerformancesChart, type SummaryPerformancesChartProps } from "./SummaryPerformancesChart.js";
+export { SummaryRateChart, type SummaryRateChartProps } from "./SummaryRateChart.js";
+export { TransactionsChart, type TransactionsChartProps } from "./TransactionsChart.js";
+export * from "./Components/index.js";
+export * from "./Utils/index.js";
+export * from "./Hooks/index.js";

package/dist/Components/Charts/index.js

@@ -0,0 +1,29 @@
+import { SummaryPerformancesChart as e } from "./SummaryPerformancesChart.js";
+import { SummaryRateChart as m } from "./SummaryRateChart.js";
+import { TransactionsChart as s } from "./TransactionsChart.js";
+import { ChartBarCalculator as h } from "./Utils/ChartBarCalculator.js";
+import { ChartTooltipFormatter as C } from "./Utils/ChartTooltipFormatter.js";
+import { TimeFormatter as l } from "./Utils/TimeFormatter.js";
+import { chartColorTokens as T } from "./Utils/ChartColors.js";
+import { createThinBarSeries as n } from "./Components/ThinBarChart.js";
+import { createWideBarSeries as S } from "./Components/WideBarChart.js";
+import { resolveThemeColor as v, resolveThemeColors as y, toEchartsColor as F } from "./Utils/ThemeColor.js";
+import { useChartDimensions as k } from "./Hooks/useChartDimensions.js";
+import { useThemeColor as E, useThemeColors as P } from "./Hooks/useThemeColors.js";
+export {
+  h as ChartBarCalculator,
+  C as ChartTooltipFormatter,
+  e as SummaryPerformancesChart,
+  m as SummaryRateChart,
+  l as TimeFormatter,
+  s as TransactionsChart,
+  T as chartColorTokens,
+  n as createThinBarSeries,
+  S as createWideBarSeries,
+  v as resolveThemeColor,
+  y as resolveThemeColors,
+  F as toEchartsColor,
+  k as useChartDimensions,
+  E as useThemeColor,
+  P as useThemeColors
+};

package/dist/Components/Colors/Colors.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps, FunctionComponent } from "react";
+export interface ColorItemProps extends Omit<ComponentProps<"td">, "onCopy"> {
+    name: string;
+    bgClass: string;
+    onCopy?: (hex: string) => void;
+}
+export interface ColorPalette {
+    name: string;
+    variants: Array<{
+        shade: string;
+        bgClass: string;
+    }>;
+}
+export interface ColorsProps extends Omit<ComponentProps<"table">, "onCopy"> {
+    palettes?: ColorPalette[];
+    /** Called with the swatch's hex when it is clicked; copying and feedback are the consumer's. */
+    onCopy?: (hex: string) => void;
+}
+export declare const Colors: FunctionComponent<ColorsProps>;