@payfit/unity-components/dist/esm/core/components/dropzone/Dropzone.d.ts

import { DropZoneProps as AriaDropZoneProps } from 'react-aria-components';
export type DropzoneState = 'default' | 'disabled' | 'invalid' | 'valid';
export interface DropzoneProps extends Omit<AriaDropZoneProps, 'className' | 'isDisabled' | 'style'> {
    /**
     * Sets durable workflow feedback without replacing drag-and-drop interaction
     * feedback.
     * @default 'default'
     * @remarks
     * - `default` presents the normal target.
     * - `disabled` prevents drops and communicates that the workflow is unavailable.
     * - `invalid` communicates a form or validation problem.
     * - `valid` communicates successful validation.
     */
    state?: DropzoneState;
    /** Additional classes applied to the drop target. */
    className?: string;
}
/**
 * Gives people an accessible destination for content they move into a workflow.
 *
 * Dropzone accepts files, directories, text, and custom dragged data without
 * prescribing transport or validation. Compose it with `DropzoneLabel` and
 * `DropzoneDescription` so assistive technology can identify the target. Use
 * `FileUploadDropzone` when the workflow also needs a native file picker.
 * @param props - Drop behavior, Unity workflow state, and target content.
 * @param props.children - The visual content or render function for the target.
 * @param props.getDropOperation - Chooses the advertised `copy`, `move`, or `link` operation.
 * @param props.onDrop - Receives the accepted drop event.
 * @param props.state - Sets durable workflow feedback such as `invalid` or `valid`.
 * @see {@link DropzoneProps} for all drop behavior.
 * @see {@link DropzoneOverlay} for a target that appears over independent content.
 * @example
 * ```tsx
 * import {
 *   Dropzone,
 *   DropzoneContent,
 *   DropzoneDescription,
 *   DropzoneIcon,
 *   DropzoneLabel,
 * } from '@payfit/unity-components'
 *
 * export function TextDropzone() {
 *   return (
 *     <Dropzone
 *       getDropOperation={() => 'copy'}
 *       onDrop={async event => {
 *         const text = await event.items
 *           .filter(item => item.kind === 'text')
 *           .at(0)
 *           ?.getText('text/plain')
 *
 *         if (text) {
 *           console.log(text)
 *         }
 *       }}
 *     >
 *       <DropzoneContent>
 *         <DropzoneIcon
 *           src="CloudArrowUpOutlined"
 *           size={24}
 *           role="presentation"
 *         />
 *         <DropzoneLabel>Drop a planning note</DropzoneLabel>
 *         <DropzoneDescription>
 *           The note is copied into the project plan.
 *         </DropzoneDescription>
 *       </DropzoneContent>
 *     </Dropzone>
 *   )
 * }
 * ```
 * @remarks
 * Dropzone reacts to hover, focus-visible, and drop-target interactions.
 * Group its visual cue, label, and description in `DropzoneContent`; add a
 * sibling `DropzoneActions` for picker buttons. Always give the target a
 * `DropzoneLabel`; add `DropzoneDescription` when people need acceptance
 * guidance. Pair a file workflow with
 * `FileUploadTrigger` or `FileUploadDropzone` so keyboard users can select a
 * file without dragging.
 */
declare const Dropzone: import('react').ForwardRefExoticComponent<DropzoneProps & import('react').RefAttributes<HTMLDivElement>>;
export { Dropzone };