import { CommonProps, Refable, Size } from "@trackunit/react-components";
import { ReactElement, ReactNode } from "react";
import { BaseInputProps } from "../BaseInput/BaseInput";
type BaseInputExposedProps = Omit<BaseInputProps, "type" | "suffix" | "prefix" | "addonAfter" | "addonBefore" | "actions" | "placeholder" | "fieldSize" | "size">;
export interface DropZoneProps extends Omit<BaseInputExposedProps, "ref">, CommonProps, Refable<HTMLDivElement> {
    /**
     * A JSX element or a string to set a focusable label in Drop Zone. If not provided, the default label will be used.
     */
    label?: ReactNode | string;
    /**
     * A flag to disable the drop zone.
     */
    disabled?: boolean;
    /**
     * The size of the dropZone
     * small - padding:8px, medium - padding:16px large - padding:32px
     */
    size?: Size;
    /**
     * The files dropped can be accessed within filesSelected
     *
     * @param file
     * @returns
     */
    filesSelected: (file: FileList) => void;
}
/**
 * The `<DropZone>` component provides a drag-and-drop area for file uploads.
 * Users can either drag files onto the zone or click to browse the file system.
 *
 * ### When to use
 * - Drag-and-drop file upload experience
 * - Batch file uploads
 * - When visual feedback during drag is important
 *
 * ### When not to use
 * - Simple single file uploads - use `UploadField` instead
 * - When form field styling (label, help text) is needed - use `UploadField`
 *
 * @example Basic usage
 * ```tsx
 * import { DropZone } from "@trackunit/react-form-components";
 *
 * <DropZone
 *   filesSelected={(files) => handleFiles(files)}
 *   accept="image/*"
 * />
 * ```
 * @example With custom label
 * ```tsx
 * import { DropZone } from "@trackunit/react-form-components";
 *
 * <DropZone
 *   filesSelected={(files) => handleFiles(files)}
 *   label={
 *     <span>
 *       <strong>Drop files here</strong> or click to browse
 *     </span>
 *   }
 *   accept=".pdf,.doc,.docx"
 * />
 * ```
 * @example Multiple files with size options
 * ```tsx
 * import { DropZone } from "@trackunit/react-form-components";
 *
 * <DropZone
 *   filesSelected={(files) => {
 *     Array.from(files).forEach(file => uploadFile(file));
 *   }}
 *   multiple
 *   size="medium"
 *   accept="image/png,image/jpeg"
 * />
 * ```
 * @example Disabled state
 * ```tsx
 * import { DropZone } from "@trackunit/react-form-components";
 *
 * <DropZone
 *   filesSelected={(files) => handleFiles(files)}
 *   disabled={isUploading}
 * />
 * ```
 * @param {DropZoneProps} props - The props for the DropZone component
 * @returns {ReactElement} DropZone component
 */
export declare const DropZone: ({ className, "data-testid": dataTestId, filesSelected, label, size, isInvalid, disabled, accept, multiple, ref, ...rest }: DropZoneProps) => ReactElement;
export {};