@misoto22/design 0.5.0 → 0.6.0

package/dist/charts/RadialChart/RadialChart.js

@@ -0,0 +1,257 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import {
+  PolarAngleAxis,
+  RadialBar as RechartsRadialBar,
+  RadialBarChart as RechartsRadialBarChart,
+  Sector
+} from "recharts";
+import { useReducedMotion } from "motion/react";
+import { ChartContainer, colorStops, cssName } from "../lib/chart.js";
+import { ChartFigure } from "../lib/figure.js";
+import { ChartBackground } from "../lib/background.js";
+import { ChartLegend, ChartLegendContent } from "../lib/legend.js";
+import { ChartTooltip, ChartTooltipContent } from "../lib/tooltip.js";
+import { LoadingIndicator } from "../lib/loading.js";
+import { ColorStops } from "../lib/paint.js";
+const CORNER_RADIUS = 5;
+const BAR_SIZE = 14;
+const LOADING_BARS = 5;
+const LOADING_CYCLE = 1500;
+const ARC = {
+  // Starting at 90° and running to -270° draws the ring clockwise from noon,
+  // which is the direction a reader expects a total to fill in.
+  full: { startAngle: 90, endAngle: -270, cx: "50%", cy: "50%" },
+  semi: { startAngle: 180, endAngle: 0, cx: "50%", cy: "70%" }
+};
+const RadialChartContext = createContext(null);
+function useRadialChart() {
+  const context = useContext(RadialChartContext);
+  if (!context) throw new Error("A radial chart part must be rendered inside <RadialChart>");
+  return context;
+}
+function RadialChart({
+  config,
+  data,
+  nameKey,
+  title,
+  showTitle,
+  description,
+  children,
+  className,
+  chartProps,
+  variant = "full",
+  max,
+  innerRadius = "30%",
+  outerRadius = "100%",
+  defaultSelectedBar = null,
+  onSelectionChange,
+  isLoading = false,
+  valueKey,
+  hideDataTable = false
+}) {
+  const chartId = useId().replace(/:/g, "");
+  const [selectedBar, setSelectedBar] = useState(defaultSelectedBar);
+  const loadingData = useLoadingBars(isLoading);
+  const arc = ARC[variant];
+  const selectBar = useCallback(
+    (name, value) => {
+      setSelectedBar(name);
+      onSelectionChange?.(name === null ? null : { name, value: value ?? 0 });
+    },
+    [onSelectionChange]
+  );
+  const painted = useMemo(
+    () => data.map((row) => ({
+      ...row,
+      fill: `url(#${chartId}-colors-${cssName(String(row[nameKey]))})`
+    })),
+    [chartId, data, nameKey]
+  );
+  const context = useMemo(
+    () => ({ config, nameKey, isLoading, selectedBar, selectBar }),
+    [config, isLoading, nameKey, selectBar, selectedBar]
+  );
+  return /* @__PURE__ */ jsx(RadialChartContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable || !valueKey ? false : { rows: data, rowKey: nameKey, columns: [{ key: valueKey, label: "Value" }] },
+      children: [
+        /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsxs(
+          RechartsRadialBarChart,
+          {
+            id: chartId,
+            data: isLoading ? loadingData : painted,
+            innerRadius,
+            outerRadius,
+            startAngle: arc.startAngle,
+            endAngle: arc.endAngle,
+            cx: arc.cx,
+            cy: arc.cy,
+            ...chartProps,
+            children: [
+              max != null && max > 0 && /* @__PURE__ */ jsx(PolarAngleAxis, { type: "number", domain: [0, max], tick: false, axisLine: false }),
+              children,
+              isLoading && /* @__PURE__ */ jsx(LoadingRadialBar, {}),
+              /* @__PURE__ */ jsx("defs", { children: Object.entries(config).map(([key, series]) => /* @__PURE__ */ jsx(
+                "linearGradient",
+                {
+                  id: `${chartId}-colors-${cssName(key)}`,
+                  x1: "0",
+                  y1: "0",
+                  x2: "1",
+                  y2: "1",
+                  children: /* @__PURE__ */ jsx(ColorStops, { dataKey: cssName(key), stops: colorStops(series) })
+                },
+                key
+              )) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(LoadingIndicator, { isLoading })
+      ]
+    }
+  ) });
+}
+function RadialBar({
+  dataKey,
+  cornerRadius = CORNER_RADIUS,
+  barSize = BAR_SIZE,
+  showTrack = true,
+  isClickable = false,
+  radialBarProps
+}) {
+  const { nameKey, isLoading, selectedBar, selectBar } = useRadialChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    RechartsRadialBar,
+    {
+      dataKey,
+      cornerRadius,
+      barSize,
+      background: showTrack,
+      style: isClickable ? { cursor: "pointer" } : void 0,
+      onClick: (payload, index) => {
+        if (!isClickable) return;
+        const row = payload;
+        const name = row?.[nameKey] ?? String(index);
+        selectBar(selectedBar === name ? null : name, Number(row?.[dataKey] ?? 0));
+      },
+      shape: (props) => {
+        const name = props[nameKey];
+        const isSelected = selectedBar === null || selectedBar === name;
+        return /* @__PURE__ */ jsx(
+          Sector,
+          {
+            ...props,
+            opacity: isClickable && !isSelected ? 0.15 : 1,
+            className: "transition-opacity duration-(--duration-base)"
+          }
+        );
+      },
+      ...radialBarProps
+    }
+  );
+}
+function Tooltip({ variant, roundness, defaultIndex }) {
+  const { nameKey, isLoading } = useRadialChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      defaultIndex,
+      cursor: false,
+      content: /* @__PURE__ */ jsx(ChartTooltipContent, { nameKey, hideLabel: true, roundness, variant })
+    }
+  );
+}
+function Legend({
+  variant,
+  align = "center",
+  verticalAlign = "bottom",
+  isClickable = false
+}) {
+  const { nameKey, isLoading, selectedBar, selectBar } = useRadialChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(
+    ChartLegend,
+    {
+      verticalAlign,
+      align,
+      content: /* @__PURE__ */ jsx(
+        ChartLegendContent,
+        {
+          selected: selectedBar,
+          onSelectChange: selectBar,
+          isClickable,
+          nameKey,
+          variant
+        }
+      )
+    }
+  );
+}
+function Background({ variant = "dots" }) {
+  const { isLoading } = useRadialChart();
+  if (isLoading) return null;
+  return /* @__PURE__ */ jsx(ChartBackground, { variant });
+}
+function sweep(index, cycle) {
+  const x = Math.sin(index * 53.9 + cycle * 173.1) * 13759.3;
+  return 40 + (x - Math.floor(x)) * 60;
+}
+function useLoadingBars(isLoading) {
+  const [cycle, setCycle] = useState(0);
+  useEffect(() => {
+    if (!isLoading) return;
+    const timer = setInterval(() => setCycle((previous) => previous + 1), LOADING_CYCLE);
+    return () => clearInterval(timer);
+  }, [isLoading]);
+  return useMemo(
+    () => Array.from({ length: LOADING_BARS }, (_, index) => ({
+      name: `loading-${index}`,
+      value: sweep(index, cycle)
+    })),
+    [cycle]
+  );
+}
+function LoadingRadialBar() {
+  const reduceMotion = useReducedMotion();
+  return /* @__PURE__ */ jsx(
+    RechartsRadialBar,
+    {
+      dataKey: "value",
+      cornerRadius: CORNER_RADIUS,
+      barSize: BAR_SIZE,
+      background: true,
+      className: "text-(--ink)",
+      isAnimationActive: !reduceMotion,
+      animationDuration: LOADING_CYCLE,
+      animationEasing: "ease-in-out",
+      shape: (props) => /* @__PURE__ */ jsx(Sector, { ...props, fill: "currentColor", fillOpacity: 0.25 })
+    }
+  );
+}
+RadialChart.RadialBar = RadialBar;
+RadialChart.Tooltip = Tooltip;
+RadialChart.Legend = Legend;
+RadialChart.Background = Background;
+var RadialChart_default = RadialChart;
+export {
+  RadialChart,
+  RadialChart_default as default
+};
+//# sourceMappingURL=RadialChart.js.map

package/dist/charts/RadialChart/RadialChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/RadialChart/RadialChart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from 'react'\nimport {\n  PolarAngleAxis,\n  RadialBar as RechartsRadialBar,\n  RadialBarChart as RechartsRadialBarChart,\n  Sector,\n} from 'recharts'\nimport type { SectorProps } from 'recharts'\nimport type { TypedDataKey } from 'recharts/types/util/typedDataKey'\nimport { useReducedMotion } from 'motion/react'\nimport { ChartContainer, colorStops, cssName, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartLegend, ChartLegendContent } from '../lib/legend'\nimport { ChartTooltip, ChartTooltipContent } from '../lib/tooltip'\nimport { LoadingIndicator } from '../lib/loading'\nimport { ColorStops } from '../lib/paint'\nimport type { ChartLegendSlotProps, ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\nconst CORNER_RADIUS = 5\nconst BAR_SIZE = 14\nconst LOADING_BARS = 5\n\n/** One skeleton morph, in milliseconds. */\nconst LOADING_CYCLE = 1500\n\n/**\n * The arc the bars are drawn on.\n *\n * `full` is a ring; `semi` is the half-circle a gauge wants, with the centre\n * dropped so the arc sits in the middle of its own box rather than at the top.\n */\nexport type RadialVariant = 'full' | 'semi'\n\n/** The angles and centre each arc shape needs. */\nconst ARC: Record<RadialVariant, { startAngle: number; endAngle: number; cx: string; cy: string }> =\n  {\n    // Starting at 90° and running to -270° draws the ring clockwise from noon,\n    // which is the direction a reader expects a total to fill in.\n    full: { startAngle: 90, endAngle: -270, cx: '50%', cy: '50%' },\n    semi: { startAngle: 180, endAngle: 0, cx: '50%', cy: '70%' },\n  }\n\ninterface RadialChartContextValue {\n  config: ChartConfig\n  nameKey: string\n  isLoading: boolean\n  selectedBar: string | null\n  selectBar: (name: string | null, value?: number) => void\n}\n\nconst RadialChartContext = createContext<RadialChartContextValue | null>(null)\n\nfunction useRadialChart(): RadialChartContextValue {\n  const context = useContext(RadialChartContext)\n  if (!context) throw new Error('A radial chart part must be rendered inside <RadialChart>')\n  return context\n}\n\nexport interface RadialChartProps<TData extends Record<string, unknown>> {\n  /** Bar names → their label and paint. Keys must match the `nameKey` values. */\n  config: ChartConfig\n  /** The rows the chart draws. One entry per point, bar or category. */\n  data: TData[]\n  /** The row field naming each bar. */\n  nameKey: keyof TData & string\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  /**\n   * The composed parts — axes, grid, tooltip, legend, and the marks\n   * themselves.\n   */\n  children: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Escape hatch onto the raw Recharts chart element. */\n  chartProps?: ComponentProps<typeof RechartsRadialBarChart>\n  /** The arc shape — a full ring, or the half circle a gauge wants. */\n  variant?: RadialVariant\n  /**\n   * What a full sweep is worth.\n   *\n   * Without it the scale comes from the data, so the largest bar always fills\n   * the arc — which is right for a comparison and wrong for a gauge. Set it\n   * (typically 100) whenever a single value has to read against a fixed total,\n   * or \"62%\" and \"98%\" will look identical.\n   */\n  max?: number\n  /** Where the arc starts, from the centre. */\n  innerRadius?: number | string\n  /** Where the arc ends. */\n  outerRadius?: number | string\n  /** The bar lit on first render. */\n  defaultSelectedBar?: string | null\n  /** Fires when the selection changes, and with null when it is cleared. */\n  onSelectionChange?: (selection: { name: string; value: number } | null) => void\n  /**\n   * Swaps the marks for an animated skeleton, keeping the measured height so\n   * the page does not jump when the data lands.\n   */\n  isLoading?: boolean\n  /** The row field holding each bar's number. Used by the table view. */\n  valueKey?: keyof TData & string\n  /**\n   * Drops the hidden table view. Only correct when the page prints the data\n   * itself.\n   */\n  hideDataTable?: boolean\n}\n\n/**\n * Values on an arc — a gauge, or a small set of totals against one scale.\n *\n * The caveat worth knowing before reaching for it: a radial bar's LENGTH is its\n * value, but its RADIUS is not, so an inner bar and an outer bar of the same\n * value are drawn different lengths. That makes it a poor comparison and a good\n * single-value gauge; past about four bars, a `<BarChart>` is the honest choice.\n *\n * @example\n * <RadialChart title=\"Storage used\" config={config} data={data} nameKey=\"tier\" max={100}>\n *   <RadialChart.RadialBar dataKey=\"used\" />\n *   <RadialChart.Tooltip />\n * </RadialChart>\n */\nexport function RadialChart<TData extends Record<string, unknown>>({\n  config,\n  data,\n  nameKey,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  chartProps,\n  variant = 'full',\n  max,\n  innerRadius = '30%',\n  outerRadius = '100%',\n  defaultSelectedBar = null,\n  onSelectionChange,\n  isLoading = false,\n  valueKey,\n  hideDataTable = false,\n}: RadialChartProps<TData>) {\n  const chartId = useId().replace(/:/g, '')\n  const [selectedBar, setSelectedBar] = useState<string | null>(defaultSelectedBar)\n  const loadingData = useLoadingBars(isLoading)\n  const arc = ARC[variant]\n\n  const selectBar = useCallback(\n    (name: string | null, value?: number) => {\n      setSelectedBar(name)\n      onSelectionChange?.(name === null ? null : { name, value: value ?? 0 })\n    },\n    [onSelectionChange],\n  )\n\n  const painted = useMemo(\n    () =>\n      data.map((row) => ({\n        ...row,\n        fill: `url(#${chartId}-colors-${cssName(String(row[nameKey]))})`,\n      })),\n    [chartId, data, nameKey],\n  )\n\n  const context = useMemo<RadialChartContextValue>(\n    () => ({ config, nameKey, isLoading, selectedBar, selectBar }),\n    [config, isLoading, nameKey, selectBar, selectedBar],\n  )\n\n  return (\n    <RadialChartContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={\n          hideDataTable || !valueKey\n            ? false\n            : { rows: data, rowKey: nameKey, columns: [{ key: valueKey, label: 'Value' }] }\n        }\n      >\n        <ChartContainer config={config}>\n          <RechartsRadialBarChart\n            id={chartId}\n            data={isLoading ? loadingData : painted}\n            innerRadius={innerRadius}\n            outerRadius={outerRadius}\n            startAngle={arc.startAngle}\n            endAngle={arc.endAngle}\n            cx={arc.cx}\n            cy={arc.cy}\n            {...chartProps}\n          >\n            {max != null && max > 0 && (\n              <PolarAngleAxis type=\"number\" domain={[0, max]} tick={false} axisLine={false} />\n            )}\n            {children}\n            {isLoading && <LoadingRadialBar />}\n            <defs>\n              {Object.entries(config).map(([key, series]) => (\n                <linearGradient\n                  key={key}\n                  id={`${chartId}-colors-${cssName(key)}`}\n                  x1=\"0\"\n                  y1=\"0\"\n                  x2=\"1\"\n                  y2=\"1\"\n                >\n                  <ColorStops dataKey={cssName(key)} stops={colorStops(series)} />\n                </linearGradient>\n              ))}\n            </defs>\n          </RechartsRadialBarChart>\n        </ChartContainer>\n        <LoadingIndicator isLoading={isLoading} />\n      </ChartFigure>\n    </RadialChartContext.Provider>\n  )\n}\n\nexport interface RadialBarProps {\n  /** The row field holding each bar's number. */\n  dataKey: string\n  cornerRadius?: number\n  /** How thick each arc is, in pixels. */\n  barSize?: number\n  /** Draws the unfilled remainder behind each bar. Required reading for a gauge. */\n  showTrack?: boolean\n  isClickable?: boolean\n  radialBarProps?: Omit<ComponentProps<typeof RechartsRadialBar>, 'dataKey'>\n}\n\n/** The arcs. One per row. */\nfunction RadialBar({\n  dataKey,\n  cornerRadius = CORNER_RADIUS,\n  barSize = BAR_SIZE,\n  showTrack = true,\n  isClickable = false,\n  radialBarProps,\n}: RadialBarProps) {\n  const { nameKey, isLoading, selectedBar, selectBar } = useRadialChart()\n\n  if (isLoading) return null\n\n  return (\n    <RechartsRadialBar\n      dataKey={dataKey as TypedDataKey<Record<string, unknown>>}\n      cornerRadius={cornerRadius}\n      barSize={barSize}\n      background={showTrack}\n      style={isClickable ? { cursor: 'pointer' } : undefined}\n      onClick={(payload, index) => {\n        if (!isClickable) return\n        const row = payload as Record<string, unknown>\n        const name = (row?.[nameKey] as string | undefined) ?? String(index)\n        selectBar(selectedBar === name ? null : name, Number(row?.[dataKey] ?? 0))\n      }}\n      shape={(props: SectorProps) => {\n        const name = (props as unknown as Record<string, unknown>)[nameKey] as string\n        const isSelected = selectedBar === null || selectedBar === name\n\n        return (\n          <Sector\n            {...props}\n            opacity={isClickable && !isSelected ? 0.15 : 1}\n            className=\"transition-opacity duration-(--duration-base)\"\n          />\n        )\n      }}\n      {...radialBarProps}\n    />\n  )\n}\n\n/** The hover panel. No heading: the bar's own name is the row label. */\nfunction Tooltip({ variant, roundness, defaultIndex }: ChartTooltipSlotProps) {\n  const { nameKey, isLoading } = useRadialChart()\n  if (isLoading) return null\n\n  return (\n    <ChartTooltip\n      defaultIndex={defaultIndex}\n      cursor={false}\n      content={\n        <ChartTooltipContent nameKey={nameKey} hideLabel roundness={roundness} variant={variant} />\n      }\n    />\n  )\n}\n\n/** The key. Under the arc and centred — nothing else names the bars. */\nfunction Legend({\n  variant,\n  align = 'center',\n  verticalAlign = 'bottom',\n  isClickable = false,\n}: ChartLegendSlotProps) {\n  const { nameKey, isLoading, selectedBar, selectBar } = useRadialChart()\n  if (isLoading) return null\n\n  return (\n    <ChartLegend\n      verticalAlign={verticalAlign}\n      align={align}\n      content={\n        <ChartLegendContent\n          selected={selectedBar}\n          onSelectChange={selectBar}\n          isClickable={isClickable}\n          nameKey={nameKey}\n          variant={variant}\n        />\n      }\n    />\n  )\n}\n\n/** The decorative plate behind the arc. */\nfunction Background({ variant = 'dots' }: { variant?: ChartBackgroundVariant }) {\n  const { isLoading } = useRadialChart()\n  if (isLoading) return null\n  return <ChartBackground variant={variant} />\n}\n\n/** A deterministic bar length, so the server and the client agree. */\nfunction sweep(index: number, cycle: number): number {\n  const x = Math.sin(index * 53.9 + cycle * 173.1) * 13_759.3\n  return 40 + (x - Math.floor(x)) * 60\n}\n\n/** The skeleton's arcs, re-rolled once per cycle. */\nfunction useLoadingBars(isLoading: boolean) {\n  const [cycle, setCycle] = useState(0)\n\n  useEffect(() => {\n    if (!isLoading) return\n    const timer = setInterval(() => setCycle((previous) => previous + 1), LOADING_CYCLE)\n    return () => clearInterval(timer)\n  }, [isLoading])\n\n  return useMemo(\n    () =>\n      Array.from({ length: LOADING_BARS }, (_, index) => ({\n        name: `loading-${index}`,\n        value: sweep(index, cycle),\n      })),\n    [cycle],\n  )\n}\n\n/** The skeleton arcs, morphing while the data is in flight. */\nfunction LoadingRadialBar() {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <RechartsRadialBar\n      dataKey=\"value\"\n      cornerRadius={CORNER_RADIUS}\n      barSize={BAR_SIZE}\n      background\n      className=\"text-(--ink)\"\n      isAnimationActive={!reduceMotion}\n      animationDuration={LOADING_CYCLE}\n      animationEasing=\"ease-in-out\"\n      shape={(props: SectorProps) => <Sector {...props} fill=\"currentColor\" fillOpacity={0.25} />}\n    />\n  )\n}\n\nRadialChart.RadialBar = RadialBar\nRadialChart.Tooltip = Tooltip\nRadialChart.Legend = Legend\nRadialChart.Background = Background\n\nexport default RadialChart\n"],"mappings":"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","names":[]}

package/dist/charts/SankeyChart/SankeyChart.d.ts

@@ -0,0 +1,137 @@
+import * as react from 'react';
+import { ReactNode, FC } from 'react';
+import { SankeyData, SankeyProps } from 'recharts';
+import { ChartConfig } from '../lib/chart.js';
+import { ChartBackgroundVariant } from '../lib/background.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/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 flow band is coloured.
+ *
+ * `gradient` fades from the source's colour to the target's, which is the one
+ * that actually reads as flow. `source` and `target` attribute the whole band
+ * to one end — useful when the question is "where did this come from" rather
+ * than "what became of it". `solid` gives up colour entirely and lets the
+ * node rectangles carry identity.
+ */
+type SankeyLinkVariant = 'gradient' | 'solid' | 'source' | 'target';
+/** Where a node's label sits. */
+type SankeyLabelPosition = 'inside' | 'outside';
+interface SankeyChartProps {
+    /** The nodes and the links between them, in Recharts' own shape. */
+    data: SankeyData;
+    /** Node names → their label and paint. */
+    config: ChartConfig;
+    /**
+     * 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, legend, and the marks
+     * themselves.
+     */
+    children: ReactNode;
+    /** Merged onto the figure, last, so a call site can size or space it. */
+    className?: string;
+    /** Escape hatch onto the raw Recharts Sankey element. */
+    sankeyProps?: Omit<SankeyProps, 'data'>;
+    /** How wide each node rectangle is, in pixels. */
+    nodeWidth?: number;
+    /** Vertical gap between nodes in the same column, in pixels. */
+    nodePadding?: number;
+    /** 0 draws straight links, 1 the fullest curve. */
+    linkCurvature?: number;
+    /** Layout passes. More is tidier and slower. */
+    iterations?: number;
+    /** Lets the layout reorder nodes for the fewest crossings. */
+    sort?: boolean;
+    /** How nodes are placed along the flow axis. */
+    align?: 'left' | 'justify';
+    /** How nodes are distributed within a column. */
+    verticalAlign?: 'justify' | 'top';
+    /**
+     * The node lit on first render. Selecting one dims every flow it does not
+     * touch.
+     */
+    defaultSelectedNode?: string | null;
+    /** Fires when the selection changes, and with null when it is cleared. */
+    onSelectionChange?: (selection: {
+        name: string;
+        value: number;
+    } | null) => void;
+    /**
+     * Swaps the marks for an animated skeleton, keeping the measured height so
+     * the page does not jump when the data lands.
+     */
+    isLoading?: boolean;
+    /**
+     * Drops the hidden table view. Only correct when the page prints the data
+     * itself.
+     */
+    hideDataTable?: boolean;
+}
+/**
+ * Where a quantity goes as it moves through stages — the shape for a funnel, a
+ * budget, an energy or traffic breakdown.
+ *
+ * The only chart here whose data is a GRAPH rather than a table, so it takes
+ * `{ nodes, links }` instead of rows, and the table view lists the flows rather
+ * than the nodes.
+ *
+ * @example
+ * <SankeyChart title="Traffic by source and outcome" config={config} data={data}>
+ *   <SankeyChart.Node radius={2}>
+ *     <SankeyChart.NodeLabel position="outside" showValues />
+ *   </SankeyChart.Node>
+ *   <SankeyChart.Link variant="gradient" />
+ *   <SankeyChart.Tooltip />
+ * </SankeyChart>
+ */
+declare function SankeyChart({ data, config, title, showTitle, description, children, className, sankeyProps, nodeWidth, nodePadding, linkCurvature, iterations, sort, align, verticalAlign, defaultSelectedNode, onSelectionChange, isLoading, hideDataTable, }: SankeyChartProps): react.JSX.Element;
+declare namespace SankeyChart {
+    var Node: FC<NodeProps>;
+    var NodeLabel: FC<NodeLabelProps>;
+    var Link: FC<LinkProps>;
+    var Tooltip: ({ variant, roundness, defaultIndex }: ChartTooltipSlotProps) => react.JSX.Element | null;
+    var Background: ({ variant }: {
+        variant?: ChartBackgroundVariant;
+    }) => react.JSX.Element | null;
+}
+interface NodeProps {
+    radius?: number;
+    isClickable?: boolean;
+    /** `<SankeyChart.NodeLabel>`. */
+    children?: ReactNode;
+}
+interface NodeLabelProps {
+    position?: SankeyLabelPosition;
+    /** Prints each node's total flow under its name. */
+    showValues?: boolean;
+    valueFormatter?: (value: number) => string;
+}
+interface LinkProps {
+    variant?: SankeyLinkVariant;
+    /** Thins each band where it meets a node, so neighbours stay separable. */
+    verticalPadding?: number;
+}
+
+export { type LinkProps, type NodeLabelProps, type NodeProps, SankeyChart, type SankeyChartProps, type SankeyLabelPosition, type SankeyLinkVariant, SankeyChart as default };