import { ReactNode } from 'react';
import { PanInfo } from 'motion/react';
export interface DragData {
    id: string;
    type?: string;
    data?: Record<string, unknown>;
}
export interface DragDropTheme {
    draggableStyle: string;
    droppableStyle: string;
    dragOverStyle: string;
    dragPreviewStyle: string;
}
export interface DragDropThemeOverrides {
    draggableStyle?: string;
    droppableStyle?: string;
    dragOverStyle?: string;
    dragPreviewStyle?: string;
}
export interface DraggableProps {
    /** Content to make draggable */
    children: ReactNode;
    /** Drag data */
    dragData: DragData;
    /** Custom class name */
    className?: string;
    /** Theme overrides */
    theme?: DragDropThemeOverrides;
    /** Called when drag starts */
    onDragStart?: (data: DragData, info: PanInfo) => void;
    /** Called when dragging */
    onDrag?: (data: DragData, info: PanInfo) => void;
    /** Called when drag ends */
    onDragEnd?: (data: DragData, info: PanInfo) => void;
    /** Disable dragging */
    disabled?: boolean;
}
export interface DroppableProps {
    /** Content of the drop zone */
    children: ReactNode | ((isDragOver: boolean) => ReactNode);
    /** Accepted drag types */
    acceptedTypes?: string[];
    /** Custom class name */
    className?: string;
    /** Theme overrides */
    theme?: DragDropThemeOverrides;
    /** Called when item is dropped */
    onDrop?: (data: DragData) => void;
    /** Called when drag enters drop zone */
    onDragEnter?: (data: DragData) => void;
    /** Called when drag leaves drop zone */
    onDragLeave?: () => void;
    /** ID for the drop zone */
    id?: string;
}
