import { ReactNode } from 'react';
import { CollectionCellContext, CollectionColumnDef } from '../../CollectionColumn.types.js';
/**
 * CSS classes object for layout styling.
 */
export interface LayoutClasses {
    [key: string]: string;
}
/**
 * Common props for rendering an item/row in either layout.
 */
export interface ItemProps<T> {
    item: T;
    index: number;
    id: string;
    columns: Array<CollectionColumnDef<T>>;
    onRemove?: () => void;
    removable?: boolean;
    draggable?: boolean;
    disabled?: boolean;
    readOnly?: boolean;
    classes: LayoutClasses;
    config: ItemRendererConfig<T>;
}
/**
 * Function type that renders the content specific to each layout.
 * Horizontal layout renders cells in a row, vertical layout renders stacked fields.
 */
export type ItemContentRenderer<T> = (item: T, index: number, columns: Array<CollectionColumnDef<T>>, cellContext: CollectionCellContext<T>, classes: LayoutClasses) => ReactNode;
/**
 * Function type that renders content with inline drag handle for draggable items.
 * Used by layouts that want the drag handle integrated into the content (e.g., vertical layout).
 */
export type DraggableContentRenderer<T> = (item: T, index: number, columns: Array<CollectionColumnDef<T>>, cellContext: CollectionCellContext<T>, classes: LayoutClasses, dragHandleProps: {
    setActivatorNodeRef: (element: HTMLElement | null) => void;
    listeners: any;
    attributes: any;
}) => ReactNode;
/**
 * Configuration for creating layout-specific item renderers.
 */
export interface ItemRendererConfig<T> {
    /** The content rendering function specific to the layout */
    renderContent: ItemContentRenderer<T>;
    /** The container style selector ('row' for horizontal, 'item' for vertical) */
    containerSelector: string;
    /** Optional: whether to render drag handle and remove button inline with content (used by horizontal layout) */
    inlineControls?: boolean;
    /**
     * Optional: custom content renderer for draggable items that integrates the drag handle.
     * If provided, this is used instead of the default drag handle + renderContent pattern.
     * Used by vertical layout to place drag handle alongside the field stack.
     */
    renderDraggableContent?: DraggableContentRenderer<T>;
}
/**
 * Creates a set of item renderers (draggable, static, disabled) for a layout.
 * This eliminates the duplication of three nearly identical component variants.
 * The renderers are stable function references that don't capture variables in closures.
 */
export declare const createItemRenderers: <T>() => {
    DraggableItem: (props: ItemProps<T>) => import("react").JSX.Element;
    StaticItem: (props: ItemProps<T>) => import("react").JSX.Element;
    DisabledItem: (props: ItemProps<T>) => import("react").JSX.Element;
};
/**
 * Maps items to their appropriate renderer components based on state.
 */
export declare const mapItemsToComponents: <T>(items: T[], renderers: ReturnType<typeof createItemRenderers<T>>, config: ItemRendererConfig<T>, classes: LayoutClasses, options: {
    getItemId?: (item: T, index: number) => string;
    onRemove?: (index: number) => void;
    removable?: boolean;
    draggable?: boolean;
    disabled?: boolean;
    readOnly?: boolean;
    columns: Array<CollectionColumnDef<T>>;
}) => ReactNode[];
//# sourceMappingURL=itemRenderer.d.ts.map