import { ReactNode } from "react";
/**
 * The interface describes the properties props of the {@link DynamicLayoutDragAndDrop} component.
 *
 * This component implements a responsive grid layout with drag-and-drop and resizing capabilities.
 * The component is used to dynamically build dashboards, where the user can freely arrange visual components.
 */
export interface DynamicLayoutDragAndDropProps {
    /** An additional CSS class applied to the root container of the layout grid.*/
    className?: string;
    /** CSS class applied to each element within the grid item.*/
    componentClassName?: string;
    /** Number of grid columns.*/
    columns?: number;
    /** Padding of the grid container.*/
    containerPadding?: [number, number];
    /** Margins between grid items.*/
    containerMargin?: [number, number];
    /** Child elements that will be automatically placed into the layout grid.*/
    children?: ReactNode;
}
/**
 * Based on [WidthProvider](https:/www.npmjs.com/package/react-grid-layout)
 */
export declare const ResponsiveReactGridLayout: import("react").ComponentClass<import("react-grid-layout").ResponsiveProps & import("react-grid-layout").WidthProviderProps, any>;
/**
 * A responsive grid layout component enabling dynamic drag-and-drop and resizing of elements
 *
 * @param props - {@link DynamicLayoutDragAndDropProps}
 *
 * @example
 * ```tsx
    <DynamicLayoutDragAndDrop
        componentClassName="rounded-md border bg-background p-4"
        columns={3}
    >
        <div>Sales chart</div>
        <div>Recent activity</div>
        <div>Tasks</div>
    </DynamicLayoutDragAndDrop>
 * ```
 */
export declare function DynamicLayoutDragAndDrop({ className, componentClassName, columns, containerPadding, containerMargin, children, }: DynamicLayoutDragAndDropProps): import("react").JSX.Element;
