import React from 'react';
import { type UploadState } from '../../services/index.js';
import { FileUploadServiceConfig } from '../../services/file-upload-service.js';
export interface RootProps {
    children: React.ReactNode;
    fileUploadServiceConfig: FileUploadServiceConfig;
}
/**
 * Root component that provides the FileUpload service context to its children.
 * This component sets up the necessary services for managing file upload functionality.
 *
 * @order 1
 * @component
 * @example
 * ```tsx
 * import { FileUpload } from '@wix/media/components';
 *
 * function FileUploadForm() {
 *   const uploadAction = async (file: File) => {
 *     // Your upload implementation
 *     return { url: 'uploaded-file-url' };
 *   };
 *
 *   return (
 *     <FileUpload.Root fileUploadServiceConfig={{
 *       maxFileSize: 10 * 1024 * 1024, // 10MB
 *       allowedTypes: ['image/*'],
 *       allowedExtensions: ['.jpg', '.png', '.gif'],
 *       uploadAction,
 *       onUploadSuccess: (result) => console.log('Upload success:', result),
 *       onUploadError: (error) => console.error('Upload error:', error)
 *     }}>
 *       <div>
 *         <FileUpload.FileSelector>
 *           {({ selectedFile, selectFile, clearFile, handleFileSelect }) => (
 *             <div>
 *               <input
 *                 type="file"
 *                 onChange={handleFileSelect}
 *                 accept="image/*"
 *               />
 *               {selectedFile && (
 *                 <p>Selected: {selectedFile.name}</p>
 *               )}
 *             </div>
 *           )}
 *         </FileUpload.FileSelector>
 *       </div>
 *     </FileUpload.Root>
 *   );
 * }
 * ```
 */
export declare function Root(props: RootProps): React.ReactNode;
/**
 * Props for FileSelector headless component
 */
export interface FileSelectorProps {
    /** Render prop function that receives file selection data */
    children: (props: FileSelectorRenderProps) => React.ReactNode;
}
/**
 * Render props for FileSelector component
 */
export interface FileSelectorRenderProps {
    /** Currently selected file */
    selectedFile: File | null;
    /** Preview URL for the selected file (if supported) */
    previewUrl: string | null;
    /** Whether drag over is active */
    dragOver: boolean;
    /** Function to programmatically select a file */
    selectFile: (file: File) => void;
    /** Function to clear the selected file */
    clearFile: () => void;
    /** Function to handle drag over events */
    handleDragOver: (event: React.DragEvent) => void;
    /** Function to handle drag leave events */
    handleDragLeave: (event: React.DragEvent) => void;
    /** Function to handle drop events */
    handleDrop: (event: React.DragEvent) => void;
    /** Function to handle file input change events */
    handleFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
    /** Whether the selected file can be previewed */
    canPreview: boolean;
}
/**
 * FileSelector - Handles file selection via drag & drop or file input
 *
 * @component
 * @example
 * ```tsx
 * import { FileUpload } from '@wix/media/components';
 *
 * function FileDropZone() {
 *   return (
 *     <FileUpload.FileSelector>
 *       {({ dragOver, handleDragOver, handleDragLeave, handleDrop, handleFileSelect, selectedFile, clearFile }) => (
 *         <div
 *           className={`drop-zone ${dragOver ? 'drag-over' : ''}`}
 *           onDragOver={handleDragOver}
 *           onDragLeave={handleDragLeave}
 *           onDrop={handleDrop}
 *         >
 *           {selectedFile ? (
 *             <div>
 *               Selected: {selectedFile.name}
 *               <button onClick={clearFile}>Remove</button>
 *             </div>
 *           ) : (
 *             <div>
 *               <p>Drag & drop a file here, or click to select</p>
 *               <input
 *                 type="file"
 *                 onChange={handleFileSelect}
 *                 style={{ display: 'none' }}
 *                 id="file-input"
 *               />
 *               <label htmlFor="file-input">Choose File</label>
 *             </div>
 *           )}
 *         </div>
 *       )}
 *     </FileUpload.FileSelector>
 *   );
 * }
 * ```
 */
export declare const FileSelector: (props: FileSelectorProps) => React.ReactNode;
/**
 * Props for UploadProgress headless component
 */
export interface UploadProgressProps {
    /** Render prop function that receives upload progress data */
    children: (props: UploadProgressRenderProps) => React.ReactNode;
}
/**
 * Render props for UploadProgress component
 */
export interface UploadProgressRenderProps {
    /** Current upload state */
    uploadState: UploadState;
    /** Whether upload is currently in progress */
    isLoading: boolean;
    /** Whether upload completed successfully */
    isSuccess: boolean;
    /** Whether upload failed */
    isError: boolean;
    /** Whether there's an error */
    hasError: boolean;
    /** Whether there's a status message */
    hasMessage: boolean;
}
/**
 * UploadProgress - Shows upload status and progress
 *
 * @component
 * @example
 * ```tsx
 * import { FileUpload } from '@wix/media/components';
 *
 * function UploadStatusIndicator() {
 *   return (
 *     <FileUpload.UploadProgress>
 *       {({ uploadState, isLoading, isSuccess, isError, hasMessage }) => (
 *         <div className="upload-status">
 *           {isLoading && (
 *             <div className="loading">
 *               <div className="spinner" />
 *               Uploading...
 *             </div>
 *           )}
 *           {isSuccess && (
 *             <div className="success">
 *               ✅ Upload completed successfully!
 *             </div>
 *           )}
 *           {isError && (
 *             <div className="error">
 *               ❌ Upload failed
 *               {hasMessage && <p>{uploadState.message}</p>}
 *             </div>
 *           )}
 *         </div>
 *       )}
 *     </FileUpload.UploadProgress>
 *   );
 * }
 * ```
 */
export declare const UploadProgress: (props: UploadProgressProps) => React.ReactNode;
/**
 * Props for UploadTrigger headless component
 */
export interface UploadTriggerProps {
    /** Render prop function that receives upload trigger data */
    children: (props: UploadTriggerRenderProps) => React.ReactNode;
}
/**
 * Render props for UploadTrigger component
 */
export interface UploadTriggerRenderProps {
    /** Function to trigger file upload */
    uploadFile: () => Promise<void>;
    /** Whether upload can be triggered */
    canUpload: boolean;
    /** Whether upload is currently in progress */
    isUploading: boolean;
}
/**
 * UploadTrigger - Handles file upload action
 *
 * @component
 * @example
 * ```tsx
 * import { FileUpload } from '@wix/media/components';
 *
 * function UploadButton() {
 *   return (
 *     <FileUpload.UploadTrigger>
 *       {({ uploadFile, canUpload, isUploading }) => (
 *         <button
 *           onClick={uploadFile}
 *           disabled={!canUpload}
 *           className="upload-btn"
 *         >
 *           {isUploading ? 'Uploading...' : 'Upload File'}
 *         </button>
 *       )}
 *     </FileUpload.UploadTrigger>
 *   );
 * }
 * ```
 */
export declare const UploadTrigger: (props: UploadTriggerProps) => React.ReactNode;
/**
 * Props for FilePreview headless component
 */
export interface FilePreviewProps {
    /** Render prop function that receives file preview data */
    children: (props: FilePreviewRenderProps) => React.ReactNode;
}
/**
 * Render props for FilePreview component
 */
export interface FilePreviewRenderProps {
    /** Currently selected file */
    selectedFile: File | null;
    /** Preview URL for the file */
    previewUrl: string | null;
    /** Whether there's a preview available */
    hasPreview: boolean;
    /** Whether the file can be previewed */
    canPreview: boolean;
    /** File name */
    fileName: string;
    /** File size in bytes */
    fileSize: number;
    /** Formatted file size string */
    formattedFileSize: string;
    /** File type */
    fileType: string;
}
/**
 * FilePreview - Displays preview information for the selected file
 *
 * @component
 * @example
 * ```tsx
 * import { FileUpload } from '@wix/media/components';
 *
 * function FilePreviewCard() {
 *   return (
 *     <FileUpload.FilePreview>
 *       {({ selectedFile, previewUrl, hasPreview, canPreview, fileName, formattedFileSize, fileType }) => (
 *         selectedFile && (
 *           <div className="file-preview">
 *             <div className="file-info">
 *               <h3>{fileName}</h3>
 *               <p>Size: {formattedFileSize}</p>
 *               <p>Type: {fileType}</p>
 *             </div>
 *             {canPreview && hasPreview && (
 *               <div className="preview">
 *                 <img src={previewUrl} alt="File preview" />
 *               </div>
 *             )}
 *           </div>
 *         )
 *       )}
 *     </FileUpload.FilePreview>
 *   );
 * }
 * ```
 */
export declare const FilePreview: (props: FilePreviewProps) => React.ReactNode;
/**
 * Props for ValidationStatus headless component
 */
export interface ValidationStatusProps {
    /** File to validate (optional, uses selected file if not provided) */
    file?: File;
    /** Render prop function that receives validation data */
    children: (props: ValidationStatusRenderProps) => React.ReactNode;
}
/**
 * Render props for ValidationStatus component
 */
export interface ValidationStatusRenderProps {
    /** Whether the file is valid */
    isValid: boolean;
    /** Validation error message if any */
    error: string | undefined;
    /** Validation rules that apply */
    validationRules: {
        maxFileSize?: number;
        allowedTypes?: string[];
        allowedExtensions?: string[];
    };
}
/**
 * ValidationStatus - Shows file validation status and rules
 *
 * @component
 * @example
 * ```tsx
 * import { FileUpload } from '@wix/media/components';
 *
 * function FileValidationMessage() {
 *   return (
 *     <FileUpload.ValidationStatus>
 *       {({ isValid, error, validationRules }) => (
 *         <div className="validation-status">
 *           {!isValid && error && (
 *             <div className="error-message">
 *               ⚠️ {error}
 *             </div>
 *           )}
 *           <div className="rules">
 *             <h4>Upload Requirements:</h4>
 *             {validationRules.maxFileSize && (
 *               <p>Max size: {validationRules.maxFileSize / 1024 / 1024}MB</p>
 *             )}
 *             {validationRules.allowedTypes && (
 *               <p>Allowed types: {validationRules.allowedTypes.join(', ')}</p>
 *             )}
 *           </div>
 *         </div>
 *       )}
 *     </FileUpload.ValidationStatus>
 *   );
 * }
 * ```
 */
export declare const ValidationStatus: (props: ValidationStatusProps) => React.ReactNode;