import type { Datum } from "../shared/datumTypes";
import * as React from "react";
import type { StreamNetworkFrameProps } from "../../stream/networkTypes";
import type { RealtimeFrameHandle } from "../../realtime/types";
import type { BaseChartProps, ChartAccessor } from "../shared/types";
import { type TooltipProp } from "../../Tooltip/Tooltip";
import type { LegendInteractionMode, LegendPosition } from "../shared/hooks";
/**
 * SankeyDiagram component props
 */
export interface SankeyDiagramProps<TNode extends Datum = Datum, TEdge extends Datum = Datum> extends BaseChartProps {
    nodes?: TNode[];
    edges?: TEdge[];
    sourceAccessor?: ChartAccessor<TEdge, string>;
    targetAccessor?: ChartAccessor<TEdge, string>;
    valueAccessor?: ChartAccessor<TEdge, number>;
    nodeIdAccessor?: ChartAccessor<TNode, string>;
    colorBy?: ChartAccessor<TNode, string>;
    colorScheme?: string | string[];
    edgeColorBy?: "source" | "target" | "gradient" | ((d: Datum) => string);
    orientation?: "horizontal" | "vertical";
    nodeAlign?: "justify" | "left" | "right" | "center";
    nodePaddingRatio?: number;
    nodeWidth?: number;
    nodeLabel?: ChartAccessor<TNode, string>;
    showLabels?: boolean;
    enableHover?: boolean;
    /** Show a swatch + label legend. Defaults to `true` when `colorBy` is set. */
    showLegend?: boolean;
    /** Legend position. Default `"right"`. */
    legendPosition?: LegendPosition;
    legendInteraction?: LegendInteractionMode;
    edgeOpacity?: number;
    edgeSort?: (a: any, b: any) => number;
    tooltip?: TooltipProp;
    frameProps?: Partial<Omit<StreamNetworkFrameProps, "edges" | "size">>;
}
/**
 * SankeyDiagram - Visualize directed many-step flow between nodes.
 *
 * Each `edge` is a ribbon whose width encodes `valueAccessor`. The layout
 * positions nodes in vertical columns (`orientation: "horizontal"`) or
 * horizontal rows (`orientation: "vertical"`) so flows always run in a
 * single direction.
 *
 * For bidirectional same-tier flows prefer {@link ChordDiagram}; for
 * unstructured many-to-many networks prefer {@link ForceDirectedGraph}.
 *
 * @example
 * ```tsx
 * // User funnel
 * <SankeyDiagram
 *   nodes={[
 *     { id: "Visit" }, { id: "Signup" }, { id: "Activate" }, { id: "Drop" },
 *   ]}
 *   edges={[
 *     { source: "Visit",   target: "Signup",   value: 320 },
 *     { source: "Visit",   target: "Drop",     value: 180 },
 *     { source: "Signup",  target: "Activate", value: 240 },
 *     { source: "Signup",  target: "Drop",     value: 80 },
 *   ]}
 *   valueAccessor="value"
 *   showLabels
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Color edges by source, vertical orientation
 * <SankeyDiagram
 *   nodes={nodes}
 *   edges={edges}
 *   valueAccessor="value"
 *   edgeColorBy="source"
 *   orientation="vertical"
 *   nodeAlign="justify"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Tighter nodes for many categories
 * <SankeyDiagram
 *   nodes={nodes}
 *   edges={edges}
 *   valueAccessor="value"
 *   nodeWidth={6}
 *   nodePaddingRatio={0.3}
 * />
 * ```
 */
export declare const SankeyDiagram: {
    <TNode extends Datum = Datum, TEdge extends Datum = Datum>(props: SankeyDiagramProps<TNode, TEdge> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
    displayName?: string;
};
