@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/charts/core/distribution/dot-stack.js

@@ -0,0 +1,40 @@
+const grid = (count, width, radius, gap) => {
+  const cell = radius * 2 + gap;
+  const columns = Math.max(1, Math.floor(width / cell));
+  return { cell, columns, rows: Math.ceil(count / columns) };
+};
+function fitRadius(input, options = {}) {
+  const { maxRadius = 6, minRadius = 1.5, gap = 1 } = options;
+  if (input.count <= 0) return maxRadius;
+  for (let r = maxRadius; r > minRadius; r -= 0.25) {
+    const { cell, rows } = grid(input.count, input.width, r, gap);
+    if (rows * cell <= input.height) return r;
+  }
+  return minRadius;
+}
+function packDots(count, width, radius, gap = 1) {
+  const { cell, columns } = grid(count, width, radius, gap);
+  const out = [];
+  for (let index = 0; index < count; index += 1) {
+    const row = Math.floor(index / columns);
+    const inRow = Math.min(columns, count - row * columns);
+    const column = index - row * columns;
+    out.push({
+      x: width / 2 + (column - (inRow - 1) / 2) * cell,
+      y: radius + row * cell
+    });
+  }
+  return out;
+}
+function explodeBins(bins, options = {}) {
+  const gap = options.gap ?? 1;
+  let radius = options.maxRadius ?? 6;
+  for (const bin of bins)
+    radius = Math.min(radius, fitRadius(bin, { ...options, maxRadius: radius }));
+  return { radius, stacks: bins.map((bin) => packDots(bin.count, bin.width, radius, gap)) };
+}
+export {
+  explodeBins,
+  fitRadius,
+  packDots
+};

package/dist/charts/core/distribution/explorer.d.ts

@@ -0,0 +1,23 @@
+import type { PlotMargin } from "./layout.js";
+export interface PlotExplorerProps {
+    /** Number of explorable items (boxes, bins, points), in reading order. */
+    count: number;
+    active: number | null;
+    onActiveChange: (index: number | null) => void;
+    /** Item under a plot-relative pixel, or null. */
+    pick: (x: number, y: number) => number | null;
+    /** Accessible name, e.g. `labels.explore`. */
+    label: string;
+    /** What a screen reader announces for the active item. */
+    valueText: string;
+    margin: PlotMargin;
+    width: number;
+    height: number;
+    className?: string;
+}
+/**
+ * Transparent overlay that owns pointer and keyboard exploration of a plot:
+ * a focusable `role="slider"` (arrows move, Home/End jump, Escape clears),
+ * the same contract as the cartesian charts.
+ */
+export declare function PlotExplorer({ count, active, onActiveChange, pick, label, valueText, margin, width, height, className, }: PlotExplorerProps): import("react").JSX.Element;

package/dist/charts/core/distribution/explorer.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "../../../utils/cn.js";
+function PlotExplorer({
+  count,
+  active,
+  onActiveChange,
+  pick,
+  label,
+  valueText,
+  margin,
+  width,
+  height,
+  className
+}) {
+  const latest = useRef(active);
+  latest.current = active;
+  const change = (index) => {
+    latest.current = index;
+    onActiveChange(index);
+  };
+  const onKeyDown = (event) => {
+    if (count === 0) return;
+    const last = count - 1;
+    const current = latest.current ?? -1;
+    let next;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") next = Math.min(last, current + 1);
+    else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = Math.max(0, current - 1);
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = last;
+    else if (event.key === "PageDown") next = Math.min(last, current + 10);
+    else if (event.key === "PageUp") next = Math.max(0, current - 10);
+    else if (event.key === "Escape") {
+      change(null);
+      return;
+    } else return;
+    event.preventDefault();
+    change(next);
+  };
+  const onPointerMove = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    change(pick(event.clientX - rect.left, event.clientY - rect.top));
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "slider",
+      tabIndex: count > 0 ? 0 : -1,
+      "aria-label": label,
+      "aria-valuemin": 1,
+      "aria-valuemax": Math.max(1, count),
+      "aria-valuenow": (active ?? 0) + 1,
+      "aria-valuetext": valueText,
+      onKeyDown,
+      onFocus: () => {
+        if (latest.current == null && count > 0) change(0);
+      },
+      onBlur: () => change(null),
+      onPointerMove,
+      onPointerDown: onPointerMove,
+      onPointerLeave: () => change(null),
+      className: cn(
+        "absolute cursor-default rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-4",
+        className
+      ),
+      style: { left: margin.left, top: margin.top, width, height }
+    }
+  );
+}
+export {
+  PlotExplorer
+};

package/dist/charts/core/distribution/geometry.d.ts

@@ -0,0 +1,38 @@
+import type { ValueFormat } from "../format.js";
+import type { DensityPoint } from "./stats.js";
+/**
+ * Samples per category for one series: `data[i]` holds the raw values of
+ * `categories[i]` (e.g. every service duration of one barber).
+ */
+export interface DistributionSeries {
+    id: string;
+    name: string;
+    data: ReadonlyArray<ReadonlyArray<number | null>>;
+    /** CSS color; defaults to the palette slot of the series. */
+    color?: string;
+    /** Overrides the chart `valueFormat` for this series. */
+    format?: ValueFormat;
+}
+/** `[value, cross]` to screen `x,y`, swapping axes for horizontal charts. */
+export declare function toXY(horizontal: boolean, value: number, cross: number): string;
+export type ViolinSide = "both" | "start" | "end";
+export interface ViolinPathInput {
+    density: readonly DensityPoint[];
+    /** Value to pixel along the value axis. */
+    map: (value: number) => number;
+    /** Pixel of the violin axis on the cross axis. */
+    center: number;
+    /** Pixel half-width given to `maxDensity`. */
+    halfWidth: number;
+    maxDensity: number;
+    horizontal: boolean;
+    /**
+     * "both" mirrors the curve; "start" draws only the side toward smaller cross
+     * pixels (left, or up when horizontal); "end" only the other side.
+     */
+    side?: ViolinSide;
+    /** Value range to keep (the axis domain): the curve is cut there instead of spilling out. */
+    domain?: readonly [number, number];
+}
+/** Closed outline of a (half) violin from a density curve. */
+export declare function violinPath({ density: curve, map, center, halfWidth, maxDensity, horizontal, side, domain, }: ViolinPathInput): string;

package/dist/charts/core/distribution/geometry.js

@@ -0,0 +1,37 @@
+const round = (value) => Math.round(value * 100) / 100;
+function toXY(horizontal, value, cross) {
+  return horizontal ? `${round(value)},${round(cross)}` : `${round(cross)},${round(value)}`;
+}
+function violinPath({
+  density: curve,
+  map,
+  center,
+  halfWidth,
+  maxDensity,
+  horizontal,
+  side = "both",
+  domain
+}) {
+  let density = curve;
+  if (domain) {
+    const [lo, hi] = domain[0] <= domain[1] ? domain : [domain[1], domain[0]];
+    density = density.filter((point) => point.value >= lo && point.value <= hi);
+  }
+  if (density.length < 2 || maxDensity <= 0) return "";
+  const at = (point, sign) => toXY(horizontal, map(point.value), center + sign * (point.density / maxDensity) * halfWidth);
+  const axisAt = (point) => toXY(horizontal, map(point.value), center);
+  const first = density[0];
+  const last = density[density.length - 1];
+  let points;
+  if (side === "both") {
+    points = [...density.map((p) => at(p, -1)), ...[...density].reverse().map((p) => at(p, 1))];
+  } else {
+    const sign = side === "start" ? -1 : 1;
+    points = [axisAt(first), ...density.map((p) => at(p, sign)), axisAt(last)];
+  }
+  return `M${points.join("L")}Z`;
+}
+export {
+  toXY,
+  violinPath
+};

package/dist/charts/core/distribution/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./dot-stack.js";
+export * from "./explorer.js";
+export * from "./geometry.js";
+export * from "./labels.js";
+export * from "./layout.js";
+export * from "./marks.js";
+export * from "./observations.js";
+export * from "./points.js";
+export * from "./stats.js";
+export * from "./use-legend.js";
+export * from "./xy-points.js";

package/dist/charts/core/distribution/index.js

@@ -0,0 +1,11 @@
+export * from "./dot-stack.js";
+export * from "./explorer.js";
+export * from "./geometry.js";
+export * from "./labels.js";
+export * from "./layout.js";
+export * from "./marks.js";
+export * from "./observations.js";
+export * from "./points.js";
+export * from "./stats.js";
+export * from "./use-legend.js";
+export * from "./xy-points.js";

package/dist/charts/core/distribution/labels.d.ts

@@ -0,0 +1,28 @@
+import { type ChartLabels } from "../types.js";
+/** Statistic names shown in tooltips and data tables. English defaults. */
+export interface StatLabels {
+    count: string;
+    min: string;
+    q1: string;
+    median: string;
+    q3: string;
+    max: string;
+    mean: string;
+    outliers: string;
+    outlier: string;
+    density: string;
+    frequency: string;
+    range: string;
+    trend: string;
+    size: string;
+    value: string;
+    series: string;
+    point: string;
+    /** Toggle that explodes histogram bins into dots. */
+    explode: string;
+    /** Same toggle while exploded: back to bars. */
+    bars: string;
+}
+export declare const DEFAULT_STAT_LABELS: StatLabels;
+export type DistributionLabels = ChartLabels & StatLabels;
+export declare function resolveDistributionLabels(labels?: Partial<DistributionLabels>): DistributionLabels;

package/dist/charts/core/distribution/labels.js

@@ -0,0 +1,29 @@
+import { DEFAULT_LABELS } from "../types.js";
+const DEFAULT_STAT_LABELS = {
+  count: "n",
+  min: "Min",
+  q1: "Q1",
+  median: "Median",
+  q3: "Q3",
+  max: "Max",
+  mean: "Mean",
+  outliers: "Outliers",
+  outlier: "Outlier",
+  density: "Density",
+  frequency: "Count",
+  range: "Range",
+  trend: "Trend",
+  size: "Size",
+  value: "Value",
+  series: "Series",
+  point: "Point",
+  explode: "Show each observation",
+  bars: "Show bars"
+};
+function resolveDistributionLabels(labels) {
+  return { ...DEFAULT_LABELS, ...DEFAULT_STAT_LABELS, ...labels };
+}
+export {
+  DEFAULT_STAT_LABELS,
+  resolveDistributionLabels
+};

package/dist/charts/core/distribution/layout.d.ts

@@ -0,0 +1,103 @@
+import { type AxisTick } from "../axes.js";
+import { type ValueFormat } from "../format.js";
+import { type BandScale } from "../scales/band.js";
+import { type ContinuousScale } from "../scales/linear.js";
+/** Value axis options shared by the distribution charts. */
+export interface DistributionAxisOptions {
+    /** Fixed lower bound; the data decides by default. */
+    min?: number;
+    /** Fixed upper bound. */
+    max?: number;
+    /** Approximate number of ticks; derived from the size by default. */
+    tickCount?: number;
+    /** Tick format; defaults to a short form of the chart `valueFormat`. */
+    format?: ValueFormat;
+    /** Short axis title, e.g. "min" or "S/". */
+    title?: string;
+}
+export interface PlotMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/** Shortens `label` with an ellipsis so it fits `maxWidth` pixels at `fontSize`. */
+export declare function truncateLabel(label: string, maxWidth: number, fontSize?: number): string;
+export interface CategoryLayoutInput {
+    width: number;
+    height: number;
+    /** "vertical": categories along x, values up the y axis. "horizontal": rows, values along x. */
+    orientation: "vertical" | "horizontal";
+    categories: readonly string[];
+    /** Series drawn side by side inside every category. */
+    seriesCount: number;
+    /** Data extent of the value axis. */
+    extent: readonly [number, number] | null;
+    valueFormat?: ValueFormat;
+    axis?: DistributionAxisOptions;
+    /** Inner padding between categories, as a fraction of the step (default 0.3). */
+    padding?: number;
+}
+export interface CategoryLayout {
+    margin: PlotMargin;
+    innerWidth: number;
+    innerHeight: number;
+    horizontal: boolean;
+    valueScale: ContinuousScale;
+    band: BandScale;
+    valueTicks: AxisTick[];
+    categoryTicks: AxisTick[];
+    /** Center and thickness of series `s` inside category `c`. */
+    slot(category: number, series: number): {
+        center: number;
+        size: number;
+    };
+}
+/**
+ * Geometry for charts with a category axis and a continuous value axis
+ * (box plots, violins, rainclouds, beeswarms). Pure.
+ */
+export declare function categoryLayout(input: CategoryLayoutInput): CategoryLayout;
+export interface XYLayoutInput {
+    width: number;
+    height: number;
+    xExtent: readonly [number, number] | null;
+    yExtent: readonly [number, number] | null;
+    xFormat?: ValueFormat;
+    yFormat?: ValueFormat;
+    xAxis?: DistributionAxisOptions;
+    yAxis?: DistributionAxisOptions;
+    /** Extra room inside the plot for marks with a radius (pixels). */
+    inset?: number;
+    /** x values are epoch milliseconds: a calendar axis with es-PE tick labels. */
+    xTime?: boolean;
+}
+export interface XYLayout {
+    margin: PlotMargin;
+    innerWidth: number;
+    innerHeight: number;
+    xScale: ContinuousScale;
+    yScale: ContinuousScale;
+    xTicks: AxisTick[];
+    yTicks: AxisTick[];
+}
+/** Two continuous axes (scatter, bubble, histogram). Pure. */
+export declare function xyLayout(input: XYLayoutInput): XYLayout;
+/**
+ * Index of the item closest to `(x, y)` within `radius` pixels, or null.
+ * Linear scan: distribution charts hold hundreds of marks, not millions.
+ */
+export declare function nearestPoint(points: ReadonlyArray<{
+    x: number;
+    y: number;
+    r?: number;
+} | null>, x: number, y: number, radius?: number): number | null;
+/**
+ * Keeps the tooltip inside narrow frames: below 480 px it flips at the middle
+ * and its width is capped to half the container (`cqw`, the chart frame is a
+ * size container).
+ */
+export declare function tooltipFit(width: number): {
+    containerWidth: number;
+    className?: string;
+};

package/dist/charts/core/distribution/layout.js

@@ -0,0 +1,183 @@
+import { estimateTextWidth, thinTicks } from "../axes.js";
+import { resolveAxisFormat } from "../format.js";
+import { bandScale } from "../scales/band.js";
+import { linearScale } from "../scales/linear.js";
+import { timeScale, timeTicks } from "../scales/time.js";
+const clamp = (value, lo, hi) => Math.min(hi, Math.max(lo, value));
+function ticksOf(scale, count, format) {
+  const toText = resolveAxisFormat(format);
+  const [d0, d1] = scale.domain;
+  return scale.ticks(count).filter((value) => value >= Math.min(d0, d1) - 1e-9 && value <= Math.max(d0, d1) + 1e-9).map((value) => ({ key: value, position: scale.map(value), label: toText(value) }));
+}
+const clock = new Intl.DateTimeFormat("es-PE", { hour: "2-digit", minute: "2-digit" });
+function timeAxisTicks(scale, count) {
+  const [d0, d1] = scale.domain;
+  const calendar = timeTicks(d0, d1, count);
+  if (calendar.length >= 2) {
+    return calendar.map((tick) => ({
+      key: tick.value,
+      position: scale.map(tick.value),
+      label: tick.label
+    }));
+  }
+  const steps = Math.max(2, Math.min(count, 6));
+  return Array.from({ length: steps }, (_unused, i) => {
+    const value = d0 + (d1 - d0) * i / (steps - 1);
+    return { key: value, position: scale.map(value), label: clock.format(value) };
+  });
+}
+function truncateLabel(label, maxWidth, fontSize = 11) {
+  if (estimateTextWidth(label, fontSize) <= maxWidth) return label;
+  const chars = Math.max(1, Math.floor(maxWidth / (fontSize * 0.58)) - 1);
+  return `${label.slice(0, chars).trimEnd()}\u2026`;
+}
+const tailRoom = (ticks, minimum) => Math.max(minimum, estimateTextWidth(ticks[ticks.length - 1]?.label ?? "") / 2 + 4);
+const widest = (ticks, size = 11) => ticks.reduce((max, tick) => Math.max(max, estimateTextWidth(tick.label, size)), 0);
+function domainOf(extent, axis) {
+  let lo = axis.min ?? extent?.[0] ?? 0;
+  let hi = axis.max ?? extent?.[1] ?? 1;
+  if (lo === hi) {
+    lo -= 1;
+    hi += 1;
+  }
+  return lo < hi ? [lo, hi] : [hi, lo];
+}
+function categoryLayout(input) {
+  const { width, height, categories, seriesCount, valueFormat } = input;
+  const axis = input.axis ?? {};
+  const horizontal = input.orientation === "horizontal";
+  const domain = domainOf(input.extent, axis);
+  const fixed = axis.min != null && axis.max != null;
+  const format = axis.format ?? valueFormat;
+  const top = axis.title ? 24 : 10;
+  const bottom = 28;
+  let margin;
+  let tickCount;
+  if (horizontal) {
+    const labelWidth = Math.max(0, ...categories.map((label) => estimateTextWidth(label, 12)));
+    margin = { top, right: 18, bottom, left: clamp(labelWidth + 18, 36, width * 0.34) };
+    tickCount = axis.tickCount ?? clamp(Math.round((width - margin.left - margin.right) / 90), 2, 9);
+    const probe = linearScale({ domain, range: [0, width], nice: !fixed, tickCount });
+    margin.right = tailRoom(ticksOf(probe, tickCount, format), 18);
+  } else {
+    tickCount = axis.tickCount ?? clamp(Math.round((height - top - bottom) / 50), 2, 8);
+    const probe = linearScale({ domain, range: [height, 0], nice: !fixed, tickCount });
+    margin = {
+      top,
+      right: 14,
+      bottom,
+      left: Math.max(30, widest(ticksOf(probe, tickCount, format)) + 16)
+    };
+  }
+  const innerWidth = Math.max(10, width - margin.left - margin.right);
+  const innerHeight = Math.max(10, height - margin.top - margin.bottom);
+  const valueScale = linearScale({
+    domain,
+    range: horizontal ? [0, innerWidth] : [innerHeight, 0],
+    nice: !fixed,
+    tickCount
+  });
+  const band = bandScale({
+    count: categories.length,
+    range: horizontal ? [0, innerHeight] : [0, innerWidth],
+    paddingInner: input.padding ?? 0.3,
+    paddingOuter: 0.18
+  });
+  const valueTicks = ticksOf(valueScale, tickCount, format);
+  const categoryTicks = categories.map((label, index) => ({
+    key: index,
+    position: band.center(index),
+    label: horizontal ? truncateLabel(label, margin.left - 18, 12) : label
+  }));
+  const groups = Math.max(1, seriesCount);
+  const inner = band.bandwidth / groups;
+  return {
+    margin,
+    innerWidth,
+    innerHeight,
+    horizontal,
+    valueScale,
+    band,
+    valueTicks: horizontal ? thinTicks(valueTicks) : valueTicks,
+    categoryTicks: horizontal ? categoryTicks : thinTicks(categoryTicks),
+    slot: (category, series) => ({
+      center: band.start(category) + inner * (series + 0.5),
+      size: inner * (groups > 1 ? 0.86 : 1)
+    })
+  };
+}
+function xyLayout(input) {
+  const { width, height, inset = 0 } = input;
+  const xAxis = input.xAxis ?? {};
+  const yAxis = input.yAxis ?? {};
+  const xDomain = domainOf(input.xExtent, xAxis);
+  const yDomain = domainOf(input.yExtent, yAxis);
+  const xFixed = xAxis.min != null && xAxis.max != null;
+  const yFixed = yAxis.min != null && yAxis.max != null;
+  const xFormat = xAxis.format ?? input.xFormat;
+  const yFormat = yAxis.format ?? input.yFormat;
+  const top = yAxis.title ? 24 : 10;
+  const bottom = xAxis.title ? 46 : 28;
+  const yCount = yAxis.tickCount ?? clamp(Math.round((height - top - bottom) / 50), 2, 8);
+  const probe = linearScale({
+    domain: yDomain,
+    range: [height, 0],
+    nice: !yFixed,
+    tickCount: yCount
+  });
+  const margin = {
+    top,
+    right: 16,
+    bottom,
+    left: Math.max(30, widest(ticksOf(probe, yCount, yFormat)) + 16)
+  };
+  const innerWidth = Math.max(10, width - margin.left - margin.right);
+  const innerHeight = Math.max(10, height - margin.top - margin.bottom);
+  const xCount = xAxis.tickCount ?? clamp(Math.round(innerWidth / 90), 2, 10);
+  const xRange = [inset, Math.max(inset + 1, innerWidth - inset)];
+  const xScale = input.xTime ? timeScale({ domain: xDomain, range: xRange }) : linearScale({ domain: xDomain, range: xRange, nice: !xFixed, tickCount: xCount });
+  const yScale = linearScale({
+    domain: yDomain,
+    range: [Math.max(inset + 1, innerHeight - inset), inset],
+    nice: !yFixed,
+    tickCount: yCount
+  });
+  return {
+    margin,
+    innerWidth,
+    innerHeight,
+    xScale,
+    yScale,
+    xTicks: thinTicks(
+      input.xTime ? timeAxisTicks(xScale, xCount) : ticksOf(xScale, xCount, xFormat)
+    ),
+    yTicks: ticksOf(yScale, yCount, yFormat)
+  };
+}
+function nearestPoint(points, x, y, radius = 24) {
+  let best = null;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  points.forEach((point, index) => {
+    if (!point) return;
+    const distance = Math.hypot(point.x - x, point.y - y) - (point.r ?? 0);
+    if (distance < bestDistance && distance <= radius) {
+      best = index;
+      bestDistance = distance;
+    }
+  });
+  return best;
+}
+function tooltipFit(width) {
+  if (width >= 480) return { containerWidth: width };
+  return {
+    containerWidth: width * 1.2,
+    className: "min-w-[112px] max-w-[calc(50cqw-16px)]"
+  };
+}
+export {
+  categoryLayout,
+  nearestPoint,
+  tooltipFit,
+  truncateLabel,
+  xyLayout
+};

package/dist/charts/core/distribution/marks.d.ts

@@ -0,0 +1,57 @@
+import type { ValueFormatter } from "../format.js";
+import type { TooltipRow } from "../tooltip.js";
+import type { DistributionLabels } from "./labels.js";
+import type { CategoryLayout, XYLayout } from "./layout.js";
+import type { BoxStats } from "./stats.js";
+/** Gridlines along the value axis plus both axes of a `categoryLayout`. */
+export declare const CategoryAxes: import("react").NamedExoticComponent<{
+    layout: CategoryLayout;
+    title?: string;
+    grid?: boolean;
+}>;
+/** Gridlines in both directions and the x/y axes of an `xyLayout`. */
+export declare const XYAxes: import("react").NamedExoticComponent<{
+    layout: XYLayout;
+    xTitle?: string;
+    yTitle?: string;
+    grid?: boolean;
+}>;
+export interface BoxGlyphProps {
+    stats: BoxStats;
+    /** Value to pixel along the value axis. */
+    map: (value: number) => number;
+    /** Pixel of the box axis on the cross axis. */
+    center: number;
+    /** Box thickness in pixels. */
+    size: number;
+    horizontal: boolean;
+    color: string;
+    /** "box": soft fill and colored outline. "inner": slim dark box for violins and rainclouds. */
+    variant?: "box" | "inner";
+    showMean?: boolean;
+    showOutliers?: boolean;
+    /** Highlighted outlier value (keyboard or pointer). */
+    activeOutlier?: number | null;
+    dimmed?: boolean;
+    active?: boolean;
+}
+/**
+ * One box-and-whisker: IQR box, median line, whiskers with caps, optional
+ * mean diamond and outlier dots. Pure SVG, memoised.
+ */
+export declare const BoxGlyph: import("react").NamedExoticComponent<BoxGlyphProps>;
+/** Tooltip rows for a five-number summary. */
+export declare function boxTooltipRows(stats: BoxStats, labels: DistributionLabels, format: ValueFormatter, color: string, showMean?: boolean): TooltipRow[];
+/** One-line summary of a box for `aria-valuetext`. */
+export declare function boxValueText(name: string, stats: BoxStats, labels: DistributionLabels, format: ValueFormatter): string;
+export interface BoxStatsTableProps {
+    caption: string;
+    labels: DistributionLabels;
+    rows: ReadonlyArray<{
+        name: string;
+        stats: BoxStats | null;
+        format: ValueFormatter;
+    }>;
+}
+/** Hidden data table with the summary of every box, violin or cloud. */
+export declare function BoxStatsTable({ caption, labels, rows }: BoxStatsTableProps): import("react").JSX.Element;