import { ElementType, ReactNode } from 'react';
/**
 * Props for the DndZone component
 * @extends Omit<React.ComponentPropsWithoutRef<T>, "el" | "ref">
 */
export type DndZoneProps<T extends ElementType = "div"> = {
    /**
     * The HTML element type to render. Can be any valid HTML element or React component.
     * @default "div"
     */
    el?: T;
    /**
     * The content to be rendered inside the drop zone.
     */
    children?: ReactNode;
    /**
     * Additional CSS class names to apply to the drop zone.
     */
    className?: string;
    /**
     * Indicates whether a draggable item is currently over this drop zone.
     */
    isOver: boolean;
    /**
     * Indicates whether the current drag operation is valid for this drop zone.
     */
    isValid: boolean;
    /**
     * Indicates whether any item is currently being dragged.
     */
    isDragging: boolean;
} & Omit<React.ComponentPropsWithoutRef<T>, "el" | "ref">;
/**
 * Base styling component for drop zones that handles visual states and styling.
 *
 * Features:
 * - Configurable HTML element rendering with the 'el' prop
 * - Visual feedback for drag states (over, valid, dragging)
 * - Automatic CSS class management based on drag state
 * - Supports all standard HTML element props
 * - Accessible with proper ARIA attributes
 * - Flexible styling through className prop
 * - Responsive design that adapts to container
 *
 * @example
 * <DndZone
 *   isOver={isOver}
 *   isValid={isValid}
 *   isDragging={isDragging}
 *   className="custom-drop-zone"
 * >
 *   Drop items here
 * </DndZone>
 */
export declare const DndZone: import('react').ForwardRefExoticComponent<Omit<DndZoneProps<ElementType>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;