import { ComponentProps, ReactNode } from 'react';
import { FlowConnectorLineStyle, FlowConnectorVariant } from '../atoms/flow-connector';
type FlowAnimateMode = "both" | "left" | "right" | "none";
type FlowSize = "sm" | "md" | "lg";
type FlowDiagramProps = {
    /** Items rendered on the left side, fanning into the hub. */
    left: ReactNode[];
    /** Items rendered on the right side, fanning out from the hub. */
    right: ReactNode[];
    /**
     * Center mark — typically a `FlowHub` wrapping a logo. Rendered as-is.
     */
    center: ReactNode;
    /**
     * Which sides animate. `both` is the default; `none` renders static
     * dashed lines.
     */
    animate?: FlowAnimateMode;
    /**
     * Animation style passed to both `FlowConnector` instances. Defaults
     * to `flow`.
     */
    animation?: FlowConnectorVariant;
    /**
     * Stroke pattern for the connectors. Defaults to `dashed` for the
     * `flow` animation and `dotted` for `dot`.
     */
    lineStyle?: FlowConnectorLineStyle;
    /**
     * Overall scale. Defaults to `md`. `sm` reduces the full-layout
     * connector width slightly; the compact layout already uses smaller
     * dimensions.
     */
    size?: FlowSize;
    /**
     * Override the full-layout visible counts. The compact layout always
     * caps at 3 per side. Pass `{ left: 4 }` to show 4 items on the left
     * at wide container widths instead of the default 5.
     */
    maxVisible?: {
        left?: number;
        right?: number;
    };
} & Omit<ComponentProps<"div">, "children">;
/**
 * Hub-and-spoke flow visualisation. Items fan out from a center mark on
 * both sides via animated SVG connectors. Adapts between a compact and
 * a full layout based on container width (Tailwind's `@container`).
 *
 * Use `GatewayDiagram` for the Arcade-branded preset with default MCP
 * client/server icon catalogues.
 */
declare function FlowDiagram({ left, right, center, animate, animation, lineStyle, size, maxVisible, className, "aria-label": ariaLabel, ...props }: FlowDiagramProps): import("react").JSX.Element;
export { FlowDiagram };
export type { FlowAnimateMode, FlowDiagramProps, FlowSize };
//# sourceMappingURL=flow-diagram.d.ts.map