@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/charts/core/cartesian/sync-store.d.ts

@@ -0,0 +1,34 @@
+import type { XValue } from "../types.js";
+/** Category identity shared between charts: dates by time, everything else as given. */
+export type SyncKey = number | string;
+export declare function syncKeyOf(value: XValue): SyncKey;
+export interface SyncChannel {
+    /** Hovered category and the chart that owns the hover. */
+    hover: SyncKey | null;
+    owner: string | null;
+    /** Zoom window as the first and last visible category. */
+    range: readonly [SyncKey, SyncKey] | null;
+    /** Margins each chart needs, by chart. */
+    margins: Readonly<Record<string, SyncMargin>>;
+    /** The widest left and right margin of the group: every chart takes it so the plots line up. */
+    margin: SyncMargin | null;
+}
+export interface SyncMargin {
+    left: number;
+    right: number;
+}
+export declare const EMPTY_CHANNEL: SyncChannel;
+/** A set of named channels. `ChartSyncProvider` scopes one; charts outside a provider share a global one. */
+export declare class ChartSyncStore {
+    private channels;
+    private listeners;
+    get: (id: string) => SyncChannel;
+    subscribe: (listener: () => void) => (() => void);
+    private set;
+    setHover(id: string, key: SyncKey, owner: string): void;
+    /** Only the chart that set the hover can clear it. */
+    clearHover(id: string, owner: string): void;
+    setRange(id: string, range: readonly [SyncKey, SyncKey] | null): void;
+    /** Registers (or with `null` withdraws) the margins `owner` needs. */
+    setMargin(id: string, owner: string, margin: SyncMargin | null): void;
+}

package/dist/charts/core/cartesian/sync-store.js

@@ -0,0 +1,61 @@
+function syncKeyOf(value) {
+  return value instanceof Date ? +value : value;
+}
+const EMPTY_CHANNEL = {
+  hover: null,
+  owner: null,
+  range: null,
+  margins: {},
+  margin: null
+};
+const EMPTY = EMPTY_CHANNEL;
+class ChartSyncStore {
+  channels = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  get = (id) => this.channels.get(id) ?? EMPTY;
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+  set(id, next) {
+    this.channels.set(id, next);
+    for (const listener of this.listeners) listener();
+  }
+  setHover(id, key, owner) {
+    const current = this.get(id);
+    if (current.hover === key && current.owner === owner) return;
+    this.set(id, { ...current, hover: key, owner });
+  }
+  /** Only the chart that set the hover can clear it. */
+  clearHover(id, owner) {
+    const current = this.get(id);
+    if (current.owner !== owner || current.hover == null) return;
+    this.set(id, { ...current, hover: null, owner: null });
+  }
+  setRange(id, range) {
+    const current = this.get(id);
+    const same = current.range === range || current.range != null && range != null && current.range[0] === range[0] && current.range[1] === range[1];
+    if (same) return;
+    this.set(id, { ...current, range });
+  }
+  /** Registers (or with `null` withdraws) the margins `owner` needs. */
+  setMargin(id, owner, margin) {
+    const current = this.get(id);
+    const before = current.margins[owner];
+    if (before === margin || before && margin && before.left === margin.left && before.right === margin.right) {
+      return;
+    }
+    const margins = { ...current.margins };
+    if (margin) margins[owner] = margin;
+    else delete margins[owner];
+    const all = Object.values(margins);
+    const widest = all.length ? { left: Math.max(...all.map((m) => m.left)), right: Math.max(...all.map((m) => m.right)) } : null;
+    const same = current.margin === widest || current.margin && widest && current.margin.left === widest.left && current.margin.right === widest.right;
+    this.set(id, { ...current, margins, margin: same ? current.margin : widest });
+  }
+}
+export {
+  ChartSyncStore,
+  EMPTY_CHANNEL,
+  syncKeyOf
+};

package/dist/charts/core/cartesian/sync.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+import { type SyncChannel, type SyncKey, type SyncMargin } from "./sync-store.js";
+export { ChartSyncStore, type SyncChannel, type SyncKey, type SyncMargin, syncKeyOf, } from "./sync-store.js";
+/**
+ * Scopes chart sync to its children, so two groups that happen to use the same
+ * `syncId` never talk to each other. Optional: charts with the same `syncId`
+ * already sync through a shared default store.
+ */
+export declare function ChartSyncProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface ChartSync {
+    channel: SyncChannel;
+    setHover: (key: SyncKey, owner: string) => void;
+    clearHover: (owner: string) => void;
+    setMargin: (owner: string, margin: SyncMargin | null) => void;
+    setRange: (range: readonly [SyncKey, SyncKey] | null) => void;
+}
+/** Subscribes to a sync channel; with no `syncId` it is inert and never re-renders. */
+export declare function useChartSync(syncId: string | undefined): ChartSync;

package/dist/charts/core/cartesian/sync.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useSyncExternalStore } from "react";
+import {
+  ChartSyncStore,
+  EMPTY_CHANNEL as EMPTY
+} from "./sync-store.js";
+import {
+  ChartSyncStore as ChartSyncStore2,
+  syncKeyOf
+} from "./sync-store.js";
+const globalStore = new ChartSyncStore();
+const SyncContext = createContext(globalStore);
+function ChartSyncProvider({ children }) {
+  const store = useMemo(() => new ChartSyncStore(), []);
+  return /* @__PURE__ */ jsx(SyncContext.Provider, { value: store, children });
+}
+function useChartSync(syncId) {
+  const store = useContext(SyncContext);
+  const id = syncId ?? "";
+  const channel = useSyncExternalStore(
+    store.subscribe,
+    () => syncId ? store.get(id) : EMPTY,
+    () => EMPTY
+  );
+  const actions = useMemo(
+    () => ({
+      setHover: (key, owner) => {
+        if (syncId) store.setHover(id, key, owner);
+      },
+      clearHover: (owner) => {
+        if (syncId) store.clearHover(id, owner);
+      },
+      setMargin: (owner, margin) => {
+        if (syncId) store.setMargin(id, owner, margin);
+      },
+      setRange: (range) => {
+        if (syncId) store.setRange(id, range);
+      }
+    }),
+    [store, id, syncId]
+  );
+  return { channel, ...actions };
+}
+export {
+  ChartSyncProvider,
+  ChartSyncStore2 as ChartSyncStore,
+  syncKeyOf,
+  useChartSync
+};

package/dist/charts/core/cartesian/types.d.ts

@@ -0,0 +1,156 @@
+import type { ReactNode } from "react";
+import type { ValueFormat } from "../format.js";
+import type { Curve } from "../path.js";
+import type { StackMode } from "../stack.js";
+import type { ChartAnnotation, ChartLabels, ChartSeries, ValueAxisOptions, XValue } from "../types.js";
+import type { CartesianAxisSpec } from "./axis-stack.js";
+export type MarkKind = "line" | "area" | "column";
+export interface CartesianSeries extends ChartSeries {
+    /** How the series is drawn. */
+    kind: MarkKind;
+    /** Id of the value axis the series is measured against: "left" (default), "right" or one declared in `axes`. */
+    axis?: string;
+    /**
+     * Floating columns: where each bar starts (`data` is where it ends). Floating
+     * series never stack; both ends are rounded.
+     */
+    from?: ReadonlyArray<number | null>;
+    /**
+     * Columns of one group pile up with `stack`; each group is a column of its
+     * own next to the others in the same category.
+     */
+    stackGroup?: string;
+    /** Color of each bar (columns), `undefined` entries keep the series color. */
+    pointColors?: ReadonlyArray<string | undefined>;
+}
+/** A label spanning consecutive categories, drawn under their own tick labels. */
+export interface CategoryGroup {
+    label: string;
+    /** How many consecutive categories belong to the group. */
+    count: number;
+}
+/** What a click on the plot reports: the nearest category and the series line closest to the pointer. */
+export interface CartesianPointEvent {
+    /** Index in the `categories` you passed (not in the zoomed or downsampled window). */
+    index: number;
+    category: XValue;
+    seriesId: string;
+    value: number | null;
+}
+/** What an overlay needs to draw in data units on top of a cartesian plot. */
+export interface CartesianPlotInfo {
+    /** Plot box inside the chart container, in pixels. */
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    /** True on a horizontal bar chart: categories run top to bottom, values left to right. */
+    horizontal?: boolean;
+    /** "index": x is a (fractional) index into `categories`; "time": x is epoch milliseconds. */
+    xKind: "index" | "time";
+    /**
+     * Data x (the category axis) to plot-relative pixels and back. These are pixels along x on a vertical
+     * chart and along y when `horizontal`; use `plotToPixel` / `pixelToPlot` from `core/ink` to convert
+     * a whole point.
+     */
+    toX: (value: number) => number;
+    fromX: (pixel: number) => number;
+    /** Primary value axis, data y to plot-relative pixels and back (along x when `horizontal`). */
+    toY: (value: number) => number;
+    fromY: (pixel: number) => number;
+    /** Text of a data x (the nearest category, or a date) and of a data y. */
+    formatX: (value: number) => string;
+    formatY: (value: number) => string;
+}
+/**
+ * Layers added to a cartesian chart. `svg` renders inside the chart drawing (plot
+ * coordinates, so it is part of the SVG export); `html` renders over the plot, above the chart's
+ * own pointer layer, for tools that need pointer events.
+ */
+export interface CartesianOverlay {
+    svg?: (plot: CartesianPlotInfo) => ReactNode;
+    html?: (plot: CartesianPlotInfo) => ReactNode;
+}
+export interface CartesianChartProps {
+    /** One entry per data point: strings, numbers or dates. */
+    categories: readonly XValue[];
+    series: readonly CartesianSeries[];
+    /** Accessible name of the chart (`aria-label` of the drawing). */
+    title: string;
+    /** Extra sentence for the hidden data table caption. */
+    description?: string;
+    /** Height of the plot in pixels, 300 by default. */
+    height?: number | "fill";
+    /** Width / height ratio; sizes the plot from the container width (wins over a pixel `height`). */
+    aspectRatio?: number;
+    /** "horizontal" lays categories top to bottom (bar charts). */
+    orientation?: "vertical" | "horizontal";
+    /** Stacks every area and column series. */
+    stack?: StackMode;
+    curve?: Curve;
+    /** Dots on every line point. Hovered points are always marked. */
+    markers?: boolean;
+    /** Values printed on the marks. */
+    dataLabels?: boolean;
+    /** Strokes lines with a gradient from each series color to the next palette color. */
+    lineGradient?: boolean;
+    /** Eases lines and areas between data updates (live data); off by default. */
+    transition?: boolean;
+    /** Series with more points than this are reduced with LTTB, 2000 by default; `false` draws every point. */
+    maxPoints?: number | false;
+    /** Charts with the same id share hover (crosshair and tooltip) and the zoom window. */
+    syncId?: string;
+    /** Called with the category (and nearest series) under the pointer when the plot is clicked or Enter is pressed. */
+    onPointClick?: (point: CartesianPointEvent) => void;
+    /** Gradient fill under areas (default true). */
+    gradient?: boolean;
+    /** Corner radius at the value end of bars, 6 by default. */
+    barRadius?: number;
+    /** Format of values in tooltips, labels and the data table. */
+    valueFormat?: ValueFormat;
+    /** Label of a category on the axis and in the tooltip (dates get Spanish defaults). */
+    xFormat?: (value: XValue) => string;
+    /** "time" spaces dates by real elapsed time; "auto" picks it when every category is a Date and no series is a column. */
+    xScale?: "auto" | "band" | "time";
+    yAxis?: ValueAxisOptions;
+    /** Secondary axis for series with `axis: "right"`. */
+    rightAxis?: ValueAxisOptions;
+    /**
+     * Any number of value axes. `yAxis` and `rightAxis` are shorthand for the ids "left" and "right";
+     * more entries stack outward on their `side` (right by default) and series pick one with `axis`.
+     */
+    axes?: readonly CartesianAxisSpec[];
+    /** Background gridlines (default true). */
+    grid?: boolean;
+    /** Legend placement, or false to hide it. Defaults to "top" with two or more series. */
+    legend?: boolean | "top" | "bottom";
+    /** Shared tooltip (default true). */
+    tooltip?: boolean;
+    annotations?: readonly ChartAnnotation[];
+    /** Tilts the category labels (degrees, e.g. -45) so long names fit; vertical charts only. */
+    categoryLabelRotation?: number;
+    /** Second tier of labels under the category axis (vertical charts); counts must add up to the categories. */
+    categoryGroups?: readonly CategoryGroup[];
+    /** Click (or Enter on the focused plot) on a category; receives its index in `categories`. */
+    onCategoryClick?: (index: number) => void;
+    /** Drag-to-zoom on the plot plus an overview brush with a reset button. */
+    brush?: boolean;
+    /**
+     * Controlled band selection (vertical charts): drag across the plot, or click one category, to select
+     * an inclusive range of category indices; clicking the only selected category clears it. Unlike `brush`
+     * it does not zoom: it reports the range so another chart or a grid can filter by it.
+     */
+    /** Extra layers over the plot, e.g. the ruler and ink tools of `useChartInk`. Vertical charts only. */
+    overlay?: CartesianOverlay;
+    rangeSelect?: {
+        value: readonly [number, number] | null;
+        onChange: (range: readonly [number, number] | null) => void;
+    };
+    loading?: boolean;
+    /** Entry animation (default true; always off with prefers-reduced-motion). */
+    animate?: boolean;
+    /** Series hidden at first; the legend can show them. */
+    initialHidden?: readonly string[];
+    labels?: Partial<ChartLabels>;
+    className?: string;
+}

package/dist/charts/core/category-axis.d.ts

@@ -0,0 +1,37 @@
+import { type AxisTick } from "./axes.js";
+import type { XValue } from "./types.js";
+export type CategoryAxisMode = "point" | "band" | "time";
+export interface CategoryAxis {
+    mode: CategoryAxisMode;
+    /** Pixel center of every category. */
+    positions: number[];
+    /** Distance between neighbours (the smallest gap on a time axis). */
+    step: number;
+    /** Width available to a mark centered on a category (bars, candles). */
+    bandwidth: number;
+    ticks: AxisTick[];
+    /** Nearest category to a pixel; -1 when there are none. */
+    indexAt(pixel: number): number;
+}
+export interface CategoryAxisOptions {
+    mode: CategoryAxisMode;
+    /** Tick label of a category; dates get "6 oct", others `String`. */
+    format?: (value: XValue) => string;
+    /** Band mode gap between marks, fraction of the step. */
+    paddingInner?: number;
+    /** Point/band mode space at both ends, fraction of the step. */
+    padding?: number;
+    /** Desired tick count for time axes. */
+    tickCount?: number;
+}
+/** Short default label: "6 oct" for dates, the value itself otherwise. */
+export declare function defaultCategoryLabel(value: XValue): string;
+/** Long label for tooltips and tables: "mar 6 oct 2026" for dates. */
+export declare function fullCategoryLabel(value: XValue): string;
+/** True when every category is a Date, so a time scale makes sense. */
+export declare function allDates(categories: readonly XValue[]): boolean;
+/**
+ * Turns categories into pixel positions, ticks and hit-testing for charts
+ * that share a horizontal category or time axis.
+ */
+export declare function buildCategoryAxis(categories: readonly XValue[], width: number, { mode, format, paddingInner, padding, tickCount, }: CategoryAxisOptions): CategoryAxis;

package/dist/charts/core/category-axis.js

@@ -0,0 +1,78 @@
+import { thinTicks } from "./axes.js";
+import { bandScale, pointScale } from "./scales/band.js";
+import { formatDate, shortMonth, timeScale } from "./scales/time.js";
+function defaultCategoryLabel(value) {
+  if (value instanceof Date) return `${value.getDate()} ${shortMonth(value)}`;
+  return String(value);
+}
+function fullCategoryLabel(value) {
+  return value instanceof Date ? formatDate(value) : String(value);
+}
+function allDates(categories) {
+  return categories.length > 0 && categories.every((value) => value instanceof Date);
+}
+function buildCategoryAxis(categories, width, {
+  mode,
+  format = defaultCategoryLabel,
+  paddingInner = 0.25,
+  padding,
+  tickCount
+}) {
+  const count = categories.length;
+  if (mode === "time" && allDates(categories)) {
+    const times = categories.map((value) => +value);
+    const scale2 = timeScale({
+      domain: [Math.min(...times), Math.max(...times)],
+      range: [0, width]
+    });
+    const positions2 = times.map((time) => scale2.map(time));
+    let step = width;
+    for (let i = 1; i < positions2.length; i += 1) {
+      const gap = Math.abs(positions2[i] - positions2[i - 1]);
+      if (gap > 0) step = Math.min(step, gap);
+    }
+    const ticks2 = scale2.timeTicks(tickCount ?? Math.max(2, Math.floor(width / 84))).map((tick) => ({ key: tick.value, position: scale2.map(tick.value), label: tick.label }));
+    return {
+      mode: "time",
+      positions: positions2,
+      step,
+      bandwidth: step,
+      ticks: ticks2,
+      indexAt: (pixel) => {
+        let best = -1;
+        let bestGap = Number.POSITIVE_INFINITY;
+        positions2.forEach((position, index) => {
+          const gap = Math.abs(position - pixel);
+          if (gap < bestGap) {
+            best = index;
+            bestGap = gap;
+          }
+        });
+        return best;
+      }
+    };
+  }
+  const scale = mode === "band" ? bandScale({ count, range: [0, width], paddingInner, paddingOuter: padding ?? 0.1 }) : pointScale({ count, range: [0, width], padding: padding ?? 0 });
+  const positions = categories.map((_, index) => scale.center(index));
+  const ticks = thinTicks(
+    categories.map((value, index) => ({
+      key: index,
+      position: positions[index],
+      label: format(value)
+    }))
+  );
+  return {
+    mode: mode === "band" ? "band" : "point",
+    positions,
+    step: scale.step,
+    bandwidth: scale.bandwidth || scale.step,
+    ticks,
+    indexAt: (pixel) => scale.indexAt(pixel)
+  };
+}
+export {
+  allDates,
+  buildCategoryAxis,
+  defaultCategoryLabel,
+  fullCategoryLabel
+};

package/dist/charts/core/category-explorer.d.ts

@@ -0,0 +1,48 @@
+import { type KeyboardEvent, type PointerEvent } from "react";
+export interface CategoryExplorerOptions {
+    count: number;
+    /** Hidden categories are skipped by the keyboard and ignored by the pointer. */
+    isAvailable?: (index: number) => boolean;
+    /** Tooltip anchor (container pixels) when a category is chosen with the keyboard. */
+    anchor: (index: number) => {
+        x: number;
+        y: number;
+    } | null;
+}
+export interface CategoryExplorer {
+    /** Category under the pointer or the keyboard cursor. */
+    active: number | null;
+    /** Where the tooltip goes, relative to the chart container. */
+    position: {
+        x: number;
+        y: number;
+    } | null;
+    /** Spread on the `<svg>`; marks carry `data-category={index}`. */
+    pointerProps: {
+        onPointerMove: (event: PointerEvent<Element>) => void;
+        onPointerLeave: () => void;
+    };
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+}
+/**
+ * Hover and keyboard cursor for charts whose marks belong to categories
+ * (units, cells, seats, rows). The pointer finds the category through the
+ * nearest `[data-category]` ancestor of the hovered mark, so no mark needs its
+ * own handlers; the keyboard moves between available categories.
+ */
+export declare function useCategoryExplorer({ count, isAvailable, anchor, }: CategoryExplorerOptions): CategoryExplorer;
+export interface CategorySliderProps {
+    explorer: CategoryExplorer;
+    label: string;
+    count: number;
+    /** What a screen reader hears for the current category. */
+    valueText: string;
+    className?: string;
+}
+/**
+ * Focusable keyboard layer laid over the drawing. It ignores the pointer
+ * (`pointer-events: none`), so hovering still reaches the marks underneath.
+ */
+export declare function CategorySlider({ explorer, label, count, valueText, className, }: CategorySliderProps): import("react").JSX.Element;

package/dist/charts/core/category-explorer.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../utils/cn.js";
+function useCategoryExplorer({
+  count,
+  isAvailable = () => true,
+  anchor
+}) {
+  const [active, setActive] = useState(null);
+  const [pointer, setPointer] = useState(null);
+  const available = [];
+  for (let index = 0; index < count; index += 1) if (isAvailable(index)) available.push(index);
+  const clear = () => {
+    setActive(null);
+    setPointer(null);
+  };
+  const onPointerMove = (event) => {
+    const target = event.target;
+    const hit = target?.closest?.("[data-category]");
+    const index = hit ? Number(hit.getAttribute("data-category")) : Number.NaN;
+    if (!Number.isInteger(index) || !available.includes(index)) {
+      clear();
+      return;
+    }
+    const rect = event.currentTarget.getBoundingClientRect();
+    setActive(index);
+    setPointer({ x: event.clientX - rect.left, y: event.clientY - rect.top });
+  };
+  const onKeyDown = (event) => {
+    if (!available.length) return;
+    const at = active == null ? -1 : available.indexOf(active);
+    let next;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      next = Math.min(available.length - 1, at + 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      next = Math.max(0, at - 1);
+    } else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = available.length - 1;
+    else if (event.key === "Escape") {
+      clear();
+      return;
+    } else return;
+    event.preventDefault();
+    setPointer(null);
+    setActive(available[next] ?? null);
+  };
+  const shown = active != null && available.includes(active) ? active : null;
+  return {
+    active: shown,
+    position: shown == null ? null : pointer ?? anchor(shown),
+    pointerProps: { onPointerMove, onPointerLeave: clear },
+    onKeyDown,
+    onFocus: () => setActive((current) => current ?? available[0] ?? null),
+    onBlur: clear
+  };
+}
+function CategorySlider({
+  explorer,
+  label,
+  count,
+  valueText,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": label,
+      "aria-valuemin": 1,
+      "aria-valuemax": Math.max(1, count),
+      "aria-valuenow": (explorer.active ?? 0) + 1,
+      "aria-valuetext": valueText,
+      onKeyDown: explorer.onKeyDown,
+      onFocus: explorer.onFocus,
+      onBlur: explorer.onBlur,
+      className: cn(
+        "pointer-events-none absolute inset-0 rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-4",
+        className
+      )
+    }
+  );
+}
+export {
+  CategorySlider,
+  useCategoryExplorer
+};

package/dist/charts/core/chart-frame.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import type { ChartLabels } from "./types.js";
+export interface ChartFrameProps {
+    /**
+     * Height of the drawing area in pixels (legend and brush are extra), or
+     * `"fill"` to take whatever height the parent leaves after the legend and
+     * footer. The parent needs a definite height (fixed, flex or grid sized).
+     * A function derives the height from the measured width.
+     */
+    height: number | "fill" | ((width: number) => number);
+    /** Width / height ratio of the drawing. Wins over a pixel `height`; ignored with `"fill"`. */
+    aspectRatio?: number;
+    labels: ChartLabels;
+    loading?: boolean;
+    /** Nothing to plot: renders the empty state instead of `children`. */
+    empty?: boolean;
+    /** Skeleton silhouette while loading. */
+    skeleton?: "bars" | "line" | "ring";
+    legend?: ReactNode;
+    legendPosition?: "top" | "bottom";
+    /**
+     * Polar charts: when the container is wide (`@lg/chart`) the legend moves
+     * to a column beside the drawing instead of stacking above or below it.
+     */
+    legendAside?: boolean;
+    /** Accessible data table (usually `ChartDataTable`), rendered after the drawing. */
+    table?: ReactNode;
+    /** Content under the drawing, e.g. the brush. Hidden while loading or empty. */
+    footer?: ReactNode;
+    className?: string;
+    /** Receives the measured width and the drawing height (a fallback on the server). */
+    children: (width: number, height: number) => ReactNode;
+}
+/**
+ * Shared outer shell for every chart: measures its slot (width and, when
+ * filling, height), swaps in the loading or empty state, and places the
+ * legend, drawing, footer and the hidden data table in a consistent order.
+ * The root has no padding or margin: the drawing touches the container edges.
+ */
+export declare function ChartFrame({ height, aspectRatio, labels, loading, empty, skeleton, legend, legendPosition, legendAside, table, footer, className, children, }: ChartFrameProps): import("react").JSX.Element;