@misoto22/design 0.5.0 → 0.6.0

package/dist/charts/TreemapChart/TreemapChart.d.ts

@@ -0,0 +1,93 @@
+import * as react from 'react';
+import { ReactNode, ComponentProps } from 'react';
+import { Treemap } from 'recharts';
+import { ChartConfig } from '../lib/chart.js';
+import { ChartTooltipSlotProps } from '../AreaChart/AreaChart.js';
+import '../lib/empty.js';
+import '../lib/values.js';
+import '../lib/sonify-control.js';
+import '../lib/sonify.js';
+import '../lib/background.js';
+import '../lib/brush.js';
+import '../lib/toolbar.js';
+import '../lib/zoom.js';
+import '../lib/figure.js';
+import '../lib/paint.js';
+import '../lib/dot.js';
+import '../lib/legend.js';
+import '../lib/tooltip.js';
+import 'recharts/types/component/DefaultTooltipContent';
+import '../lib/annotations.js';
+
+/**
+ * How a tile is painted.
+ *
+ * `ramp` walks the series ramp so siblings separate by lightness; `nested`
+ * darkens by DEPTH instead, which is the right encoding when the tree has more
+ * than one level and the question is "what is inside what".
+ */
+type TreemapVariant = 'ramp' | 'nested';
+/** A node in the tree. Children make it a branch. */
+interface TreemapNode {
+    name: string;
+    /** Leaf value. Omit on a branch — a branch is the sum of its children. */
+    size?: number;
+    children?: TreemapNode[];
+    [key: string]: unknown;
+}
+/** The raw Recharts Treemap props a consumer may still reach for. */
+type TreemapExtras = Omit<ComponentProps<typeof Treemap>, 'data' | 'dataKey'>;
+interface TreemapChartProps {
+    /** Tile names → their label and paint. Optional: the ramp covers unnamed tiles. */
+    config?: ChartConfig;
+    /** The tree. One level is a flat set of tiles; two is a nested treemap. */
+    data: TreemapNode[];
+    /**
+     * What the chart shows, in a sentence a reader could act on. Required, and
+     * announced to a screen reader even when it is not printed.
+     */
+    title: string;
+    /** Prints the title above the plot instead of hiding it from sight. */
+    showTitle?: boolean;
+    /** A line under the title — the unit, the window, the caveat. */
+    description?: ReactNode;
+    /** Merged onto the figure, last, so a call site can size or space it. */
+    className?: string;
+    variant?: TreemapVariant;
+    /** The leaf field holding each tile's number. */
+    dataKey?: string;
+    /** How square the tiles are pushed to be. Recharts' own squarify parameter. */
+    aspectRatio?: number;
+    /** Prints each tile's name on it, where the tile is big enough to hold it. */
+    showLabels?: boolean;
+    /** The hover panel. */
+    children?: ReactNode;
+    chartProps?: TreemapExtras;
+    /** Drops the hidden table view. Only correct when the page prints the data itself. */
+    hideDataTable?: boolean;
+}
+/**
+ * Part of a whole, when the whole has too many parts for a pie — and the parts
+ * nest.
+ *
+ * A treemap encodes value as AREA, which the eye reads worse than length but
+ * far better than angle, and it is the only form here that stays readable at
+ * fifty items. Two rules make it honest: no negative values (an area cannot be
+ * negative), and the tiles have to sum to something a reader recognises as the
+ * whole.
+ *
+ * Reach for `<BarChart>` when there are under a dozen items and the ranking
+ * matters — a bar's length is the more precise encoding, and a treemap's
+ * layout deliberately does not order its tiles by value alone.
+ *
+ * @example
+ * <TreemapChart title="Bundle size by package" data={packages} showLabels>
+ *   <TreemapChart.Tooltip />
+ * </TreemapChart>
+ */
+declare function TreemapChart({ config, data, title, showTitle, description, className, variant, dataKey, aspectRatio, showLabels, children, chartProps, hideDataTable, }: TreemapChartProps): react.JSX.Element;
+declare namespace TreemapChart {
+    var Tooltip: ({ variant, roundness }: ChartTooltipSlotProps) => react.JSX.Element;
+}
+
+export { TreemapChart, type TreemapChartProps, type TreemapExtras, type TreemapNode, type TreemapVariant, TreemapChart as default };

package/dist/charts/TreemapChart/TreemapChart.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Treemap as RechartsTreemap } from "recharts";
+import { ChartContainer, cssName } from "../lib/chart.js";
+import { ChartFigure } from "../lib/figure.js";
+import { ChartTooltip, ChartTooltipContent } from "../lib/tooltip.js";
+function TreemapChart({
+  config = {},
+  data,
+  title,
+  showTitle,
+  description,
+  className,
+  variant = "ramp",
+  dataKey = "size",
+  aspectRatio = 4 / 3,
+  showLabels = true,
+  children,
+  chartProps,
+  hideDataTable = false
+}) {
+  const chartId = useId().replace(/:/g, "");
+  const leaves = flatten(data);
+  return /* @__PURE__ */ jsx(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable ? false : {
+        rows: leaves,
+        rowKey: "path",
+        columns: [{ key: dataKey, label: "Value" }]
+      },
+      children: /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsx(
+        RechartsTreemap,
+        {
+          data,
+          dataKey,
+          nameKey: "name",
+          aspectRatio,
+          isAnimationActive: false,
+          content: /* @__PURE__ */ jsx(TreemapTile, { chartId, variant, config, showLabels }),
+          ...chartProps,
+          children
+        }
+      ) })
+    }
+  );
+}
+function flatten(nodes, prefix = "") {
+  return nodes.flatMap((node) => {
+    const path = prefix ? `${prefix} \u203A ${node.name}` : node.name;
+    if (node.children?.length) return flatten(node.children, path);
+    return [{ ...node, path }];
+  });
+}
+function TreemapTile({
+  chartId,
+  variant,
+  config,
+  showLabels,
+  x = 0,
+  y = 0,
+  width = 0,
+  height = 0,
+  depth = 1,
+  index = 0,
+  name = ""
+}) {
+  if (width <= 0 || height <= 0) return null;
+  const slot = variant === "nested" ? `var(--series-${Math.min(8, depth * 2)})` : name in config ? `var(--color-${cssName(name)}-0)` : `var(--series-${index % 8 + 1})`;
+  const roomForLabel = showLabels && width > 56 && height > 26;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        fill: slot,
+        stroke: "var(--chart-surface)",
+        strokeWidth: 2
+      }
+    ),
+    roomForLabel && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: x + 8,
+        y: y + 18,
+        className: "fill-(--chart-surface) text-[11px] font-medium",
+        style: { pointerEvents: "none" },
+        children: name
+      }
+    ),
+    /* @__PURE__ */ jsx("title", { children: name }),
+    /* @__PURE__ */ jsx("desc", { children: chartId })
+  ] });
+}
+function Tooltip({ variant, roundness }) {
+  return /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      cursor: false,
+      content: /* @__PURE__ */ jsx(ChartTooltipContent, { nameKey: "name", hideLabel: true, roundness, variant })
+    }
+  );
+}
+TreemapChart.Tooltip = Tooltip;
+var TreemapChart_default = TreemapChart;
+export {
+  TreemapChart,
+  TreemapChart_default as default
+};
+//# sourceMappingURL=TreemapChart.js.map

package/dist/charts/TreemapChart/TreemapChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/TreemapChart/TreemapChart.tsx"],"sourcesContent":["'use client'\n\nimport { useId, type ComponentProps, type ReactNode } from 'react'\nimport { Treemap as RechartsTreemap } from 'recharts'\nimport { ChartContainer, cssName, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { ChartTooltip, ChartTooltipContent } from '../lib/tooltip'\nimport type { ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\n/**\n * How a tile is painted.\n *\n * `ramp` walks the series ramp so siblings separate by lightness; `nested`\n * darkens by DEPTH instead, which is the right encoding when the tree has more\n * than one level and the question is \"what is inside what\".\n */\nexport type TreemapVariant = 'ramp' | 'nested'\n\n/** A node in the tree. Children make it a branch. */\nexport interface TreemapNode {\n  name: string\n  /** Leaf value. Omit on a branch — a branch is the sum of its children. */\n  size?: number\n  children?: TreemapNode[]\n  [key: string]: unknown\n}\n\n/** The raw Recharts Treemap props a consumer may still reach for. */\nexport type TreemapExtras = Omit<ComponentProps<typeof RechartsTreemap>, 'data' | 'dataKey'>\n\nexport interface TreemapChartProps {\n  /** Tile names → their label and paint. Optional: the ramp covers unnamed tiles. */\n  config?: ChartConfig\n  /** The tree. One level is a flat set of tiles; two is a nested treemap. */\n  data: TreemapNode[]\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  variant?: TreemapVariant\n  /** The leaf field holding each tile's number. */\n  dataKey?: string\n  /** How square the tiles are pushed to be. Recharts' own squarify parameter. */\n  aspectRatio?: number\n  /** Prints each tile's name on it, where the tile is big enough to hold it. */\n  showLabels?: boolean\n  /** The hover panel. */\n  children?: ReactNode\n  chartProps?: TreemapExtras\n  /** Drops the hidden table view. Only correct when the page prints the data itself. */\n  hideDataTable?: boolean\n}\n\n/**\n * Part of a whole, when the whole has too many parts for a pie — and the parts\n * nest.\n *\n * A treemap encodes value as AREA, which the eye reads worse than length but\n * far better than angle, and it is the only form here that stays readable at\n * fifty items. Two rules make it honest: no negative values (an area cannot be\n * negative), and the tiles have to sum to something a reader recognises as the\n * whole.\n *\n * Reach for `<BarChart>` when there are under a dozen items and the ranking\n * matters — a bar's length is the more precise encoding, and a treemap's\n * layout deliberately does not order its tiles by value alone.\n *\n * @example\n * <TreemapChart title=\"Bundle size by package\" data={packages} showLabels>\n *   <TreemapChart.Tooltip />\n * </TreemapChart>\n */\nexport function TreemapChart({\n  config = {},\n  data,\n  title,\n  showTitle,\n  description,\n  className,\n  variant = 'ramp',\n  dataKey = 'size',\n  aspectRatio = 4 / 3,\n  showLabels = true,\n  children,\n  chartProps,\n  hideDataTable = false,\n}: TreemapChartProps) {\n  const chartId = useId().replace(/:/g, '')\n\n  // Flattened for the table view, because a nested tree read aloud row by row\n  // is not something anyone can follow — the leaves are the facts.\n  const leaves = flatten(data)\n\n  return (\n    <ChartFigure\n      title={title}\n      showTitle={showTitle}\n      description={description}\n      className={className}\n      table={\n        hideDataTable\n          ? false\n          : {\n              rows: leaves,\n              rowKey: 'path',\n              columns: [{ key: dataKey, label: 'Value' }],\n            }\n      }\n    >\n      <ChartContainer config={config}>\n        <RechartsTreemap\n          data={data}\n          dataKey={dataKey}\n          nameKey=\"name\"\n          aspectRatio={aspectRatio}\n          isAnimationActive={false}\n          content={\n            <TreemapTile chartId={chartId} variant={variant} config={config} showLabels={showLabels} />\n          }\n          {...chartProps}\n        >\n          {children}\n        </RechartsTreemap>\n      </ChartContainer>\n    </ChartFigure>\n  )\n}\n\n/** Every leaf, with the path that names it. */\nfunction flatten(nodes: TreemapNode[], prefix = ''): Record<string, unknown>[] {\n  return nodes.flatMap((node) => {\n    const path = prefix ? `${prefix} › ${node.name}` : node.name\n    if (node.children?.length) return flatten(node.children, path)\n    return [{ ...node, path }]\n  })\n}\n\ninterface TileProps {\n  chartId: string\n  variant: TreemapVariant\n  config: ChartConfig\n  showLabels: boolean\n  // Recharts hands the geometry in as loose props on the cloned element.\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n  depth?: number\n  index?: number\n  name?: string\n}\n\n/**\n * One tile.\n *\n * The gap between tiles is a surface-coloured stroke rather than a smaller\n * rect, so the tiles still tile — a treemap whose parts do not touch stops\n * reading as a partition of one whole.\n */\nfunction TreemapTile({\n  chartId,\n  variant,\n  config,\n  showLabels,\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  depth = 1,\n  index = 0,\n  name = '',\n}: TileProps) {\n  if (width <= 0 || height <= 0) return null\n\n  const slot =\n    variant === 'nested'\n      ? `var(--series-${Math.min(8, depth * 2)})`\n      : name in config\n        ? `var(--color-${cssName(name)}-0)`\n        : `var(--series-${(index % 8) + 1})`\n\n  // Only label a tile with room for one. A clipped word is worse than none.\n  const roomForLabel = showLabels && width > 56 && height > 26\n\n  return (\n    <g>\n      <rect\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        fill={slot}\n        stroke=\"var(--chart-surface)\"\n        strokeWidth={2}\n      />\n      {roomForLabel && (\n        <text\n          x={x + 8}\n          y={y + 18}\n          className=\"fill-(--chart-surface) text-[11px] font-medium\"\n          style={{ pointerEvents: 'none' }}\n        >\n          {name}\n        </text>\n      )}\n      {/* A hidden id so the tooltip can key off the same name the tile paints. */}\n      <title>{name}</title>\n      <desc>{chartId}</desc>\n    </g>\n  )\n}\n\n/** The hover panel. No heading: the tile's own name is the row label. */\nfunction Tooltip({ variant, roundness }: ChartTooltipSlotProps) {\n  return (\n    <ChartTooltip\n      cursor={false}\n      content={<ChartTooltipContent nameKey=\"name\" hideLabel roundness={roundness} variant={variant} />}\n    />\n  )\n}\n\nTreemapChart.Tooltip = Tooltip\n\nexport default TreemapChart\n"],"mappings":";AA4HY,cAoER,YApEQ;AA1HZ,SAAS,aAAkD;AAC3D,SAAS,WAAW,uBAAuB;AAC3C,SAAS,gBAAgB,eAAiC;AAC1D,SAAS,mBAAmB;AAC5B,SAAS,cAAc,2BAA2B;AAyE3C,SAAS,aAAa;AAAA,EAC3B,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc,IAAI;AAAA,EAClB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAAsB;AACpB,QAAM,UAAU,MAAM,EAAE,QAAQ,MAAM,EAAE;AAIxC,QAAM,SAAS,QAAQ,IAAI;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OACE,gBACI,QACA;AAAA,QACE,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,SAAS,CAAC,EAAE,KAAK,SAAS,OAAO,QAAQ,CAAC;AAAA,MAC5C;AAAA,MAGN,8BAAC,kBAAe,QACd;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR;AAAA,UACA,mBAAmB;AAAA,UACnB,SACE,oBAAC,eAAY,SAAkB,SAAkB,QAAgB,YAAwB;AAAA,UAE1F,GAAG;AAAA,UAEH;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAGA,SAAS,QAAQ,OAAsB,SAAS,IAA+B;AAC7E,SAAO,MAAM,QAAQ,CAAC,SAAS;AAC7B,UAAM,OAAO,SAAS,GAAG,MAAM,WAAM,KAAK,IAAI,KAAK,KAAK;AACxD,QAAI,KAAK,UAAU,OAAQ,QAAO,QAAQ,KAAK,UAAU,IAAI;AAC7D,WAAO,CAAC,EAAE,GAAG,MAAM,KAAK,CAAC;AAAA,EAC3B,CAAC;AACH;AAwBA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AACT,GAAc;AACZ,MAAI,SAAS,KAAK,UAAU,EAAG,QAAO;AAEtC,QAAM,OACJ,YAAY,WACR,gBAAgB,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC,MACtC,QAAQ,SACN,eAAe,QAAQ,IAAI,CAAC,QAC5B,gBAAiB,QAAQ,IAAK,CAAC;AAGvC,QAAM,eAAe,cAAc,QAAQ,MAAM,SAAS;AAE1D,SACE,qBAAC,OACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAa;AAAA;AAAA,IACf;AAAA,IACC,gBACC;AAAA,MAAC;AAAA;AAAA,QACC,GAAG,IAAI;AAAA,QACP,GAAG,IAAI;AAAA,QACP,WAAU;AAAA,QACV,OAAO,EAAE,eAAe,OAAO;AAAA,QAE9B;AAAA;AAAA,IACH;AAAA,IAGF,oBAAC,WAAO,gBAAK;AAAA,IACb,oBAAC,UAAM,mBAAQ;AAAA,KACjB;AAEJ;AAGA,SAAS,QAAQ,EAAE,SAAS,UAAU,GAA0B;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAAS,oBAAC,uBAAoB,SAAQ,QAAO,WAAS,MAAC,WAAsB,SAAkB;AAAA;AAAA,EACjG;AAEJ;AAEA,aAAa,UAAU;AAEvB,IAAO,uBAAQ;","names":[]}

package/dist/charts/WaterfallChart/WaterfallChart.d.ts

@@ -0,0 +1,164 @@
+import { ChartTooltipSlotProps } from '../AreaChart/AreaChart.js';
+import { ChartXAxisProps, ChartYAxisProps } from '../BarChart/BarChart.js';
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import { Bar, BarChart, CartesianGrid } from 'recharts';
+import { ChartConfig } from '../lib/chart.js';
+import { ChartEmptyProps } from '../lib/empty.js';
+import { ChartBackgroundVariant } from '../lib/background.js';
+import { ReferenceLine, ReferenceBand, Annotation } from '../lib/annotations.js';
+import '../lib/values.js';
+import '../lib/sonify-control.js';
+import '../lib/sonify.js';
+import '../lib/brush.js';
+import '../lib/toolbar.js';
+import '../lib/zoom.js';
+import '../lib/figure.js';
+import '../lib/paint.js';
+import '../lib/dot.js';
+import '../lib/legend.js';
+import '../lib/tooltip.js';
+import 'recharts/types/component/DefaultTooltipContent';
+
+/** How a step moves the running total. */
+type WaterfallStepType = 'delta' | 'total';
+/** Which way a bar goes, which is what its texture encodes. */
+type WaterfallDirection = 'increase' | 'decrease' | 'total';
+interface WaterfallStep {
+    /** The step's name on the category axis. Doubles as its key. */
+    name: string;
+    /**
+     * The signed change this step makes, or — on a `total` step — the absolute
+     * figure the running total is set to.
+     *
+     * Omit it on a `total` and the running total is used, which is the right
+     * default for the closing bar: an end total typed by hand can disagree with
+     * the deltas above it, and the chart would draw the disagreement without
+     * saying anything.
+     */
+    value?: number;
+    /**
+     * `delta` (the default) adds `value` to the running total and floats the bar
+     * where that lands. `total` plants a bar on the baseline — an opening
+     * balance, a subtotal, a closing figure.
+     */
+    type?: WaterfallStepType;
+}
+interface WaterfallChartProps {
+    /**
+     * The single series — its label and its paint. Only the FIRST entry is read;
+     * a waterfall has one quantity and as many bars as it has steps.
+     */
+    config?: ChartConfig;
+    /**
+     * The steps, in the order they are applied. Order is the arithmetic: the
+     * chart does not sort, because a different order is a different total at
+     * every intermediate bar.
+     */
+    data: WaterfallStep[];
+    /**
+     * What the chart shows, in a sentence a reader could act on. Required, and
+     * announced to a screen reader even when it is not printed.
+     */
+    title: string;
+    /** Prints the title above the plot instead of hiding it from sight. */
+    showTitle?: boolean;
+    /** A line under the title — the unit, the window, the caveat. */
+    description?: ReactNode;
+    /** The composed parts — axes, grid, tooltip, and `<WaterfallChart.Bars>`. */
+    children: ReactNode;
+    /** Merged onto the figure, last, so a call site can size or space it. */
+    className?: string;
+    /** Escape hatch onto the raw Recharts chart element. */
+    chartProps?: ComponentProps<typeof BarChart>;
+    /** Formats every number the chart prints — ticks, labels, tooltip, table. */
+    formatValue?: (value: number) => string;
+    /** Drops the hidden table view. Only correct when the page prints the data itself. */
+    hideDataTable?: boolean;
+    /**
+     * What the chart shows when it has nothing to draw. `false` keeps the axes,
+     * for a chart whose emptiness is itself the reading.
+     */
+    empty?: ChartEmptyProps | false;
+}
+/**
+ * How a total got from one figure to another — an opening balance, the signed
+ * contributions that moved it, and where it closed.
+ *
+ * The form for "why did this change", which a pair of bars cannot answer and a
+ * pie chart answers wrongly, because contributions can be NEGATIVE and a slice
+ * cannot. Reach for `<BarChart>` when the parts do not have to add up to the
+ * gap between two totals, and for `<FunnelChart>` when the quantity only ever
+ * shrinks.
+ *
+ * **The connectors are the claim to be careful about.** They draw the steps as
+ * a sequence — this happened, then this — and most breakdowns are not
+ * sequential at all: churn and expansion in the same month are simultaneous,
+ * and the order they are listed in is an editorial choice. The arithmetic
+ * survives any order; the STORY does not, and a reader will take the leftmost
+ * bar as the first cause. Two related traps: the intermediate bars are floating
+ * lengths read against no baseline, so a small step high up the cascade is hard
+ * to compare with a large one near zero; and any step that is itself a net of
+ * two larger opposing movements is invisible as such. Where the order is
+ * arbitrary, say so in the `description`.
+ *
+ * Recharts earns its place for the axes, grid and tooltip. Each bar is a
+ * floating range — from the running total to the new one — with a custom shape
+ * over it, because Recharts has no waterfall mark and the connectors have to be
+ * drawn from the same geometry as the bars they join.
+ *
+ * @example
+ * <WaterfallChart title="Revenue bridge, FY25" data={steps}>
+ *   <WaterfallChart.Grid />
+ *   <WaterfallChart.XAxis />
+ *   <WaterfallChart.YAxis label="AUD" />
+ *   <WaterfallChart.Tooltip />
+ *   <WaterfallChart.Bars showValues />
+ * </WaterfallChart>
+ *
+ * @example
+ * const steps = [
+ *   { name: 'FY24', value: 1200, type: 'total' as const },
+ *   { name: 'New', value: 340 },
+ *   { name: 'Churn', value: -180 },
+ *   // No value: the closing bar is whatever the deltas add up to.
+ *   { name: 'FY25', type: 'total' as const },
+ * ]
+ */
+declare function WaterfallChart({ config, data, title, showTitle, description, children, className, chartProps, formatValue, hideDataTable, empty, }: WaterfallChartProps): react.JSX.Element;
+declare namespace WaterfallChart {
+    var Bars: ({ radius, connectors, showValues, barProps, }: WaterfallBarsProps) => react.JSX.Element;
+    var XAxis: ({ dataKey, tickLine, axisLine, tickMargin, minTickGap, label, ...rest }: ChartXAxisProps) => react.JSX.Element;
+    var YAxis: ({ tickLine, axisLine, tickMargin, width, label, tickFormatter, ...rest }: ChartYAxisProps) => react.JSX.Element;
+    var Grid: ({ strokeDasharray, vertical, ...rest }: ComponentProps<typeof CartesianGrid>) => react.JSX.Element;
+    var Tooltip: ({ variant, roundness, defaultIndex }: ChartTooltipSlotProps) => react.JSX.Element;
+    var Background: ({ variant }: {
+        variant: ChartBackgroundVariant;
+    }) => react.JSX.Element;
+    var ReferenceLine: typeof ReferenceLine;
+    var ReferenceBand: typeof ReferenceBand;
+    var Annotation: typeof Annotation;
+}
+interface WaterfallBarsProps {
+    /** The bars' corner. */
+    radius?: number;
+    /**
+     * Joins each bar's closing edge to where the next one starts.
+     *
+     * On by default: without them a waterfall is a row of bars floating at
+     * unrelated heights, and the cascade — which is the entire point of the form
+     * — has to be reconstructed by the reader.
+     */
+    connectors?: boolean;
+    /**
+     * Prints each step's signed change above or below its bar.
+     *
+     * Worth more here than on most charts: an intermediate bar has no baseline
+     * under it, so its length is the one thing a reader cannot get off the axis.
+     */
+    showValues?: boolean;
+    /** Escape hatch onto the underlying Recharts bar. */
+    barProps?: ComponentProps<typeof Bar>;
+}
+
+export { type WaterfallBarsProps, WaterfallChart, type WaterfallChartProps, type WaterfallDirection, type WaterfallStep, type WaterfallStepType, WaterfallChart as default };