@uploadista/react 0.0.3 → 0.0.4

package/dist/uploadista-provider-D8GQ2GhF.d.ts

@@ -0,0 +1,1240 @@
+import { b as UseDragDropReturn, d as UseUploadOptions, f as UseUploadReturn, g as UseFlowUploadReturn, i as MultiUploadOptions, n as UseUploadistaClientReturn, o as UploadItem, s as UseMultiUploadReturn, t as UseUploadistaClientOptions, v as DragDropOptions } from "./use-uploadista-client-CeFo4wuV.js";
+import React$1, { ReactNode } from "react";
+import { BrowserUploadInput, FlowUploadConfig, FlowUploadItem, FlowUploadOptions, MultiFlowUploadOptions, UploadistaEvent } from "@uploadista/client-browser";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/flow-upload-list.d.ts
+
+/**
+ * Render props passed to the FlowUploadList children function.
+ * Provides access to upload items, aggregate statistics, and control methods.
+ *
+ * @property items - All flow upload items in the queue
+ * @property totalProgress - Average progress across all uploads (0-100)
+ * @property activeUploads - Count of currently uploading items
+ * @property completedUploads - Count of successfully completed uploads
+ * @property failedUploads - Count of failed uploads
+ * @property isUploading - True when any uploads are in progress
+ * @property addFiles - Add new files to the upload queue
+ * @property removeFile - Remove a specific file from the queue
+ * @property startUpload - Begin uploading all pending files
+ * @property abortUpload - Cancel a specific active upload
+ * @property abortAll - Cancel all active uploads
+ * @property clear - Remove all items from the queue
+ * @property retryUpload - Retry a specific failed upload
+ */
+interface FlowUploadListRenderProps {
+  /**
+   * List of upload items
+   */
+  items: FlowUploadItem<BrowserUploadInput>[];
+  /**
+   * Total progress across all uploads
+   */
+  totalProgress: number;
+  /**
+   * Number of active uploads
+   */
+  activeUploads: number;
+  /**
+   * Number of completed uploads
+   */
+  completedUploads: number;
+  /**
+   * Number of failed uploads
+   */
+  failedUploads: number;
+  /**
+   * Whether any uploads are in progress
+   */
+  isUploading: boolean;
+  /**
+   * Add files to the upload queue
+   */
+  addFiles: (files: File[] | FileList) => void;
+  /**
+   * Remove a file from the queue
+   */
+  removeFile: (id: string) => void;
+  /**
+   * Start uploading all pending files
+   */
+  startUpload: () => void;
+  /**
+   * Abort a specific upload
+   */
+  abortUpload: (id: string) => void;
+  /**
+   * Abort all uploads
+   */
+  abortAll: () => void;
+  /**
+   * Clear all items
+   */
+  clear: () => void;
+  /**
+   * Retry a failed upload
+   */
+  retryUpload: (id: string) => void;
+}
+/**
+ * Props for the FlowUploadList component.
+ *
+ * @property flowConfig - Flow execution configuration (flowId, storageId, etc.)
+ * @property options - Multi-flow upload options (callbacks, concurrency, etc.)
+ * @property children - Render function receiving flow upload list state
+ */
+interface FlowUploadListProps {
+  /**
+   * Flow configuration
+   */
+  flowConfig: FlowUploadConfig;
+  /**
+   * Multi-upload options
+   */
+  options?: Omit<MultiFlowUploadOptions<BrowserUploadInput>, "flowConfig">;
+  /**
+   * Render function for the upload list
+   */
+  children: (props: FlowUploadListRenderProps) => ReactNode;
+}
+/**
+ * Headless flow upload list component for managing batch file uploads through a flow.
+ * Uses render props pattern to provide complete control over the UI while handling
+ * concurrent uploads and flow processing.
+ *
+ * Each file is uploaded and processed independently through the specified flow,
+ * with automatic queue management and concurrency control.
+ *
+ * Must be used within an UploadistaProvider.
+ *
+ * @param props - Flow upload list configuration and render prop
+ * @returns Rendered flow upload list using the provided render prop
+ *
+ * @example
+ * ```tsx
+ * // Batch image processing with custom UI
+ * <FlowUploadList
+ *   flowConfig={{
+ *     flowId: "image-batch-processing",
+ *     storageId: "s3-images",
+ *     outputNodeId: "optimized",
+ *   }}
+ *   options={{
+ *     maxConcurrent: 3,
+ *     onItemSuccess: (item) => {
+ *       console.log(`${item.file.name} processed successfully`);
+ *     },
+ *     onComplete: (items) => {
+ *       const successful = items.filter(i => i.status === 'success');
+ *       console.log(`Batch complete: ${successful.length}/${items.length} successful`);
+ *     },
+ *   }}
+ * >
+ *   {({
+ *     items,
+ *     totalProgress,
+ *     activeUploads,
+ *     completedUploads,
+ *     failedUploads,
+ *     addFiles,
+ *     startUpload,
+ *     abortUpload,
+ *     retryUpload,
+ *     clear,
+ *   }) => (
+ *     <div>
+ *       <input
+ *         type="file"
+ *         multiple
+ *         accept="image/*"
+ *         onChange={(e) => {
+ *           if (e.target.files) {
+ *             addFiles(e.target.files);
+ *             startUpload();
+ *           }
+ *         }}
+ *       />
+ *
+ *       <div style={{ marginTop: '1rem' }}>
+ *         <h3>Upload Progress</h3>
+ *         <div>Overall: {totalProgress}%</div>
+ *         <div>
+ *           Active: {activeUploads}, Completed: {completedUploads}, Failed: {failedUploads}
+ *         </div>
+ *         <button onClick={clear}>Clear All</button>
+ *       </div>
+ *
+ *       <ul style={{ listStyle: 'none', padding: 0 }}>
+ *         {items.map((item) => (
+ *           <li key={item.id} style={{
+ *             padding: '1rem',
+ *             border: '1px solid #ccc',
+ *             marginBottom: '0.5rem'
+ *           }}>
+ *             <div>{item.file instanceof File ? item.file.name : 'File'}</div>
+ *             <div>Status: {item.status}</div>
+ *
+ *             {item.status === "uploading" && (
+ *               <div>
+ *                 <progress value={item.progress} max={100} style={{ width: '100%' }} />
+ *                 <div>{item.progress}%</div>
+ *                 <button onClick={() => abortUpload(item.id)}>Cancel</button>
+ *               </div>
+ *             )}
+ *
+ *             {item.status === "error" && (
+ *               <div>
+ *                 <div style={{ color: 'red' }}>{item.error?.message}</div>
+ *                 <button onClick={() => retryUpload(item.id)}>Retry</button>
+ *               </div>
+ *             )}
+ *
+ *             {item.status === "success" && (
+ *               <div style={{ color: 'green' }}>✓ Complete</div>
+ *             )}
+ *           </li>
+ *         ))}
+ *       </ul>
+ *     </div>
+ *   )}
+ * </FlowUploadList>
+ * ```
+ *
+ * @see {@link SimpleFlowUploadList} for a pre-styled version
+ * @see {@link useMultiFlowUpload} for the underlying hook
+ */
+declare function FlowUploadList({
+  flowConfig,
+  options,
+  children
+}: FlowUploadListProps): react_jsx_runtime0.JSX.Element;
+/**
+ * Props for the SimpleFlowUploadListItem component.
+ *
+ * @property item - The flow upload item to display
+ * @property onAbort - Called when the abort button is clicked
+ * @property onRetry - Called when the retry button is clicked
+ * @property onRemove - Called when the remove button is clicked
+ */
+interface SimpleFlowUploadListItemProps {
+  /**
+   * Upload item
+   */
+  item: FlowUploadItem<BrowserUploadInput>;
+  /**
+   * Abort the upload
+   */
+  onAbort: () => void;
+  /**
+   * Retry the upload
+   */
+  onRetry: () => void;
+  /**
+   * Remove the item
+   */
+  onRemove: () => void;
+}
+/**
+ * Pre-styled flow upload list item component with status indicators.
+ * Displays file name, upload progress, status, and contextual action buttons.
+ *
+ * Features:
+ * - Status-specific icons and colors
+ * - Progress bar with percentage and byte count
+ * - Error message display
+ * - Contextual action buttons (cancel, retry, remove)
+ *
+ * @param props - Upload item and callback functions
+ * @returns Styled flow upload list item component
+ *
+ * @example
+ * ```tsx
+ * <SimpleFlowUploadListItem
+ *   item={uploadItem}
+ *   onAbort={() => console.log('Abort')}
+ *   onRetry={() => console.log('Retry')}
+ *   onRemove={() => console.log('Remove')}
+ * />
+ * ```
+ */
+declare function SimpleFlowUploadListItem({
+  item,
+  onAbort,
+  onRetry,
+  onRemove
+}: SimpleFlowUploadListItemProps): react_jsx_runtime0.JSX.Element;
+/**
+ * Props for the SimpleFlowUploadList component.
+ *
+ * @property flowConfig - Flow execution configuration
+ * @property options - Multi-flow upload options (callbacks, concurrency)
+ * @property className - CSS class name for the container
+ * @property showFileInput - Whether to display the file input (default: true)
+ * @property accept - Accepted file types for the file input
+ */
+interface SimpleFlowUploadListProps {
+  /**
+   * Flow configuration
+   */
+  flowConfig: FlowUploadConfig;
+  /**
+   * Multi-upload options
+   */
+  options?: Omit<MultiFlowUploadOptions<BrowserUploadInput>, "flowConfig">;
+  /**
+   * CSS class for the container
+   */
+  className?: string;
+  /**
+   * Show file input
+   */
+  showFileInput?: boolean;
+  /**
+   * File input accept attribute
+   */
+  accept?: string;
+}
+/**
+ * Simple pre-styled flow upload list component with built-in UI.
+ * Provides a ready-to-use interface for batch file uploads with flow processing.
+ *
+ * Features:
+ * - Built-in file input
+ * - Overall progress display
+ * - Individual item progress tracking
+ * - Status indicators and action buttons
+ * - Automatic upload start on file selection
+ *
+ * @param props - Flow upload list configuration with styling options
+ * @returns Styled flow upload list component
+ *
+ * @example
+ * ```tsx
+ * // Basic batch image upload
+ * <SimpleFlowUploadList
+ *   flowConfig={{
+ *     flowId: "image-batch-processing",
+ *     storageId: "s3-images",
+ *   }}
+ *   options={{
+ *     maxConcurrent: 3,
+ *     onItemSuccess: (item) => {
+ *       console.log(`${item.file.name} processed`);
+ *     },
+ *     onComplete: (items) => {
+ *       console.log("Batch complete:", items.length);
+ *     },
+ *   }}
+ *   accept="image/*"
+ *   className="my-upload-list"
+ * />
+ *
+ * // Without file input (add files programmatically)
+ * <SimpleFlowUploadList
+ *   flowConfig={{
+ *     flowId: "document-processing",
+ *     storageId: "docs",
+ *   }}
+ *   showFileInput={false}
+ *   options={{
+ *     maxConcurrent: 2,
+ *   }}
+ * />
+ * ```
+ *
+ * @see {@link FlowUploadList} for the headless version with full control
+ */
+declare function SimpleFlowUploadList({
+  flowConfig,
+  options,
+  className,
+  showFileInput,
+  accept
+}: SimpleFlowUploadListProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/flow-upload-zone.d.ts
+/**
+ * Render props passed to the FlowUploadZone children function.
+ * Provides access to flow upload state, drag-drop handlers, and helper functions.
+ *
+ * @property dragDrop - Complete drag-and-drop state and handlers
+ * @property flowUpload - Flow upload hook with upload state and controls
+ * @property isActive - True when dragging over zone
+ * @property openFilePicker - Programmatically open file selection dialog
+ * @property getRootProps - Returns props to spread on the drop zone container
+ * @property getInputProps - Returns props to spread on the hidden file input
+ */
+interface FlowUploadZoneRenderProps {
+  /**
+   * Drag and drop state and handlers
+   */
+  dragDrop: UseDragDropReturn;
+  /**
+   * Flow upload functionality
+   */
+  flowUpload: UseFlowUploadReturn;
+  /**
+   * Whether the zone is currently active (dragging or uploading)
+   */
+  isActive: boolean;
+  /**
+   * Open file picker
+   */
+  openFilePicker: () => void;
+  /**
+   * Props to spread on the drop zone element
+   */
+  getRootProps: () => {
+    onDragEnter: (e: React.DragEvent) => void;
+    onDragOver: (e: React.DragEvent) => void;
+    onDragLeave: (e: React.DragEvent) => void;
+    onDrop: (e: React.DragEvent) => void;
+  };
+  /**
+   * Props to spread on the file input element
+   */
+  getInputProps: () => React.InputHTMLAttributes<HTMLInputElement>;
+}
+/**
+ * Props for the FlowUploadZone component.
+ *
+ * @property flowConfig - Flow execution configuration (flowId, storageId, etc.)
+ * @property options - Flow upload options (callbacks, metadata, etc.)
+ * @property accept - Accepted file types (e.g., "image/*", ".pdf")
+ * @property multiple - Allow multiple file selection (default: false)
+ * @property children - Render function receiving flow upload zone state
+ */
+interface FlowUploadZoneProps {
+  /**
+   * Flow configuration
+   */
+  flowConfig: FlowUploadConfig;
+  /**
+   * Upload options
+   */
+  options?: Omit<FlowUploadOptions, "flowConfig">;
+  /**
+   * Accepted file types (e.g., "image/*", ".pdf", etc.)
+   */
+  accept?: string;
+  /**
+   * Whether to allow multiple files (uses multi-upload internally)
+   */
+  multiple?: boolean;
+  /**
+   * Render function for the drop zone
+   */
+  children: (props: FlowUploadZoneRenderProps) => ReactNode;
+}
+/**
+ * Headless flow upload zone component with drag-and-drop support.
+ * Combines drag-drop functionality with flow processing, using render props
+ * for complete UI control.
+ *
+ * Files uploaded through this zone are automatically processed through the
+ * specified flow, which can perform operations like image optimization,
+ * storage saving, webhooks, etc.
+ *
+ * Must be used within an UploadistaProvider.
+ *
+ * @param props - Flow upload zone configuration and render prop
+ * @returns Rendered flow upload zone using the provided render prop
+ *
+ * @example
+ * ```tsx
+ * // Image upload with flow processing
+ * <FlowUploadZone
+ *   flowConfig={{
+ *     flowId: "image-processing-flow",
+ *     storageId: "s3-images",
+ *     outputNodeId: "optimized-image",
+ *   }}
+ *   options={{
+ *     onSuccess: (result) => console.log('Processed:', result),
+ *     onFlowComplete: (outputs) => {
+ *       console.log('All outputs:', outputs);
+ *     },
+ *   }}
+ *   accept="image/*"
+ * >
+ *   {({ dragDrop, flowUpload, getRootProps, getInputProps, openFilePicker }) => (
+ *     <div {...getRootProps()} style={{
+ *       border: dragDrop.state.isDragging ? '2px solid blue' : '2px dashed gray',
+ *       padding: '2rem',
+ *       textAlign: 'center'
+ *     }}>
+ *       <input {...getInputProps()} />
+ *
+ *       {dragDrop.state.isDragging && (
+ *         <p>Drop image here...</p>
+ *       )}
+ *
+ *       {!dragDrop.state.isDragging && !flowUpload.isUploading && (
+ *         <div>
+ *           <p>Drag an image or click to browse</p>
+ *           <button onClick={openFilePicker}>Choose File</button>
+ *         </div>
+ *       )}
+ *
+ *       {flowUpload.isUploadingFile && (
+ *         <div>
+ *           <p>Uploading...</p>
+ *           <progress value={flowUpload.state.progress} max={100} />
+ *           <span>{flowUpload.state.progress}%</span>
+ *         </div>
+ *       )}
+ *
+ *       {flowUpload.isProcessing && (
+ *         <div>
+ *           <p>Processing image...</p>
+ *           {flowUpload.state.currentNodeName && (
+ *             <span>Step: {flowUpload.state.currentNodeName}</span>
+ *           )}
+ *         </div>
+ *       )}
+ *
+ *       {flowUpload.state.status === "success" && (
+ *         <div>
+ *           <p>✓ Upload complete!</p>
+ *           {flowUpload.state.result && (
+ *             <img src={flowUpload.state.result.url} alt="Uploaded" />
+ *           )}
+ *         </div>
+ *       )}
+ *
+ *       {flowUpload.state.status === "error" && (
+ *         <div>
+ *           <p>Error: {flowUpload.state.error?.message}</p>
+ *           <button onClick={flowUpload.reset}>Try Again</button>
+ *         </div>
+ *       )}
+ *
+ *       {flowUpload.isUploading && (
+ *         <button onClick={flowUpload.abort}>Cancel</button>
+ *       )}
+ *     </div>
+ *   )}
+ * </FlowUploadZone>
+ * ```
+ *
+ * @see {@link SimpleFlowUploadZone} for a pre-styled version
+ * @see {@link useFlowUpload} for the underlying hook
+ */
+declare function FlowUploadZone({
+  flowConfig,
+  options,
+  accept,
+  multiple,
+  children
+}: FlowUploadZoneProps): react_jsx_runtime0.JSX.Element;
+/**
+ * Props for the SimpleFlowUploadZone component.
+ *
+ * @property flowConfig - Flow execution configuration
+ * @property options - Flow upload options (callbacks, metadata)
+ * @property accept - Accepted file types
+ * @property className - CSS class name for custom styling
+ * @property dragText - Text displayed when dragging files over zone
+ * @property idleText - Text displayed when zone is idle
+ */
+interface SimpleFlowUploadZoneProps {
+  /**
+   * Flow configuration
+   */
+  flowConfig: FlowUploadConfig;
+  /**
+   * Upload options
+   */
+  options?: Omit<FlowUploadOptions, "flowConfig">;
+  /**
+   * Accepted file types
+   */
+  accept?: string;
+  /**
+   * CSS class for the container
+   */
+  className?: string;
+  /**
+   * Custom drag overlay text
+   */
+  dragText?: string;
+  /**
+   * Custom idle text
+   */
+  idleText?: string;
+}
+/**
+ * Simple pre-styled flow upload zone component with built-in UI.
+ * Provides a ready-to-use drag-and-drop interface for flow uploads.
+ *
+ * Features:
+ * - Built-in drag-and-drop visual feedback
+ * - Automatic progress display for upload and processing phases
+ * - Success and error state display
+ * - Cancel button during upload
+ * - Customizable text labels
+ *
+ * @param props - Flow upload zone configuration with styling options
+ * @returns Styled flow upload zone component
+ *
+ * @example
+ * ```tsx
+ * // Basic image upload with flow processing
+ * <SimpleFlowUploadZone
+ *   flowConfig={{
+ *     flowId: "image-optimization-flow",
+ *     storageId: "s3-images",
+ *   }}
+ *   accept="image/*"
+ *   options={{
+ *     onSuccess: (result) => console.log("Image processed:", result),
+ *     onError: (error) => console.error("Processing failed:", error),
+ *   }}
+ *   idleText="Drop an image to optimize and upload"
+ *   dragText="Release to start processing"
+ *   className="my-upload-zone"
+ * />
+ *
+ * // Document upload with custom flow
+ * <SimpleFlowUploadZone
+ *   flowConfig={{
+ *     flowId: "document-processing-flow",
+ *     storageId: "docs",
+ *     outputNodeId: "processed-doc",
+ *   }}
+ *   accept=".pdf,.doc,.docx"
+ *   options={{
+ *     onFlowComplete: (outputs) => {
+ *       console.log('Processing outputs:', outputs);
+ *     },
+ *   }}
+ * />
+ * ```
+ *
+ * @see {@link FlowUploadZone} for the headless version with full control
+ */
+declare function SimpleFlowUploadZone({
+  flowConfig,
+  options,
+  accept,
+  className,
+  dragText,
+  idleText
+}: SimpleFlowUploadZoneProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/upload-list.d.ts
+/**
+ * Render props passed to the UploadList children function.
+ * Provides organized access to upload items, status groupings, and actions.
+ *
+ * @property items - All upload items (filtered and sorted if configured)
+ * @property itemsByStatus - Upload items grouped by their current status
+ * @property multiUpload - Complete multi-upload hook instance
+ * @property actions - Helper functions for common item operations
+ * @property actions.removeItem - Remove an item from the list
+ * @property actions.retryItem - Retry a failed upload
+ * @property actions.abortItem - Cancel an active upload
+ * @property actions.startItem - Begin uploading an idle item
+ */
+interface UploadListRenderProps {
+  /**
+   * All upload items
+   */
+  items: UploadItem[];
+  /**
+   * Items filtered by status
+   */
+  itemsByStatus: {
+    idle: UploadItem[];
+    uploading: UploadItem[];
+    success: UploadItem[];
+    error: UploadItem[];
+    aborted: UploadItem[];
+  };
+  /**
+   * Multi-upload state and controls
+   */
+  multiUpload: UseMultiUploadReturn;
+  /**
+   * Helper functions for item management
+   */
+  actions: {
+    removeItem: (id: string) => void;
+    retryItem: (item: UploadItem) => void;
+    abortItem: (item: UploadItem) => void;
+    startItem: (item: UploadItem) => void;
+  };
+}
+/**
+ * Props for the UploadList component.
+ *
+ * @property multiUpload - Multi-upload hook instance to display
+ * @property filter - Optional function to filter which items to show
+ * @property sortBy - Optional comparator function to sort items
+ * @property children - Render function receiving list state and actions
+ */
+interface UploadListProps {
+  /**
+   * Multi-upload instance from useMultiUpload hook
+   */
+  multiUpload: UseMultiUploadReturn;
+  /**
+   * Optional filter for which items to display
+   */
+  filter?: (item: UploadItem) => boolean;
+  /**
+   * Optional sorting function for items
+   */
+  sortBy?: (a: UploadItem, b: UploadItem) => number;
+  /**
+   * Render prop that receives upload list state and actions
+   */
+  children: (props: UploadListRenderProps) => React$1.ReactNode;
+}
+/**
+ * Headless upload list component that provides flexible rendering for upload items.
+ * Uses render props pattern to give full control over how upload items are displayed.
+ *
+ * @param props - Upload list configuration and render prop
+ * @returns Rendered upload list using the provided render prop
+ *
+ * @example
+ * ```tsx
+ * // Basic upload list with progress bars
+ * <UploadList multiUpload={multiUpload}>
+ *   {({ items, actions }) => (
+ *     <div>
+ *       <h3>Upload Queue ({items.length} files)</h3>
+ *       {items.map((item) => (
+ *         <div key={item.id} style={{
+ *           padding: '1rem',
+ *           border: '1px solid #ccc',
+ *           marginBottom: '0.5rem',
+ *           borderRadius: '4px'
+ *         }}>
+ *           <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+ *             <span>{item.file.name}</span>
+ *             <span>{item.state.status}</span>
+ *           </div>
+ *
+ *           {item.state.status === 'uploading' && (
+ *             <div>
+ *               <progress value={item.state.progress} max={100} />
+ *               <span>{item.state.progress}%</span>
+ *               <button onClick={() => actions.abortItem(item)}>Cancel</button>
+ *             </div>
+ *           )}
+ *
+ *           {item.state.status === 'error' && (
+ *             <div>
+ *               <p style={{ color: 'red' }}>Error: {item.state.error?.message}</p>
+ *               <button onClick={() => actions.retryItem(item)}>Retry</button>
+ *               <button onClick={() => actions.removeItem(item.id)}>Remove</button>
+ *             </div>
+ *           )}
+ *
+ *           {item.state.status === 'success' && (
+ *             <div>
+ *               <p style={{ color: 'green' }}>✓ Uploaded successfully</p>
+ *               <button onClick={() => actions.removeItem(item.id)}>Remove</button>
+ *             </div>
+ *           )}
+ *
+ *           {item.state.status === 'idle' && (
+ *             <div>
+ *               <button onClick={() => actions.startItem(item)}>Start Upload</button>
+ *               <button onClick={() => actions.removeItem(item.id)}>Remove</button>
+ *             </div>
+ *           )}
+ *         </div>
+ *       ))}
+ *     </div>
+ *   )}
+ * </UploadList>
+ *
+ * // Upload list with status filtering and sorting
+ * <UploadList
+ *   multiUpload={multiUpload}
+ *   filter={(item) => item.state.status !== 'success'} // Hide successful uploads
+ *   sortBy={(a, b) => {
+ *     // Sort by status priority, then by filename
+ *     const statusPriority = { error: 0, uploading: 1, idle: 2, success: 3, aborted: 4 };
+ *     const aPriority = statusPriority[a.state.status];
+ *     const bPriority = statusPriority[b.state.status];
+ *
+ *     if (aPriority !== bPriority) {
+ *       return aPriority - bPriority;
+ *     }
+ *
+ *     return a.file.name.localeCompare(b.file.name);
+ *   }}
+ * >
+ *   {({ items, itemsByStatus, multiUpload, actions }) => (
+ *     <div>
+ *       {itemsByStatus.error.length > 0 && (
+ *         <div>
+ *           <h4 style={{ color: 'red' }}>Failed Uploads ({itemsByStatus.error.length})</h4>
+ *           {itemsByStatus.error.map((item) => (
+ *             <UploadListItem key={item.id} item={item} actions={actions} />
+ *           ))}
+ *         </div>
+ *       )}
+ *
+ *       {itemsByStatus.uploading.length > 0 && (
+ *         <div>
+ *           <h4>Uploading ({itemsByStatus.uploading.length})</h4>
+ *           {itemsByStatus.uploading.map((item) => (
+ *             <UploadListItem key={item.id} item={item} actions={actions} />
+ *           ))}
+ *         </div>
+ *       )}
+ *
+ *       {itemsByStatus.idle.length > 0 && (
+ *         <div>
+ *           <h4>Pending ({itemsByStatus.idle.length})</h4>
+ *           {itemsByStatus.idle.map((item) => (
+ *             <UploadListItem key={item.id} item={item} actions={actions} />
+ *           ))}
+ *         </div>
+ *       )}
+ *     </div>
+ *   )}
+ * </UploadList>
+ * ```
+ */
+declare function UploadList({
+  multiUpload,
+  filter,
+  sortBy,
+  children
+}: UploadListProps): react_jsx_runtime0.JSX.Element;
+/**
+ * Props for the SimpleUploadListItem component.
+ *
+ * @property item - The upload item to display
+ * @property actions - Action functions from UploadList render props
+ * @property className - Additional CSS class name
+ * @property style - Inline styles for the item container
+ * @property showDetails - Whether to display file size and upload details
+ */
+interface SimpleUploadListItemProps {
+  /**
+   * The upload item to render
+   */
+  item: UploadItem;
+  /**
+   * Actions from UploadList render props
+   */
+  actions: UploadListRenderProps["actions"];
+  /**
+   * Additional CSS class name
+   */
+  className?: string;
+  /**
+   * Inline styles
+   */
+  style?: React$1.CSSProperties;
+  /**
+   * Whether to show detailed information (file size, speed, etc.)
+   */
+  showDetails?: boolean;
+}
+/**
+ * Pre-styled upload list item component with status indicators and action buttons.
+ * Displays file info, progress, errors, and contextual actions based on upload status.
+ *
+ * Features:
+ * - Status-specific color coding and icons
+ * - Progress bar for active uploads
+ * - Error message display
+ * - File size formatting
+ * - Contextual action buttons (start, cancel, retry, remove)
+ *
+ * @param props - Upload item and configuration
+ * @returns Styled upload list item component
+ *
+ * @example
+ * ```tsx
+ * // Use with UploadList
+ * <UploadList multiUpload={multiUpload}>
+ *   {({ items, actions }) => (
+ *     <div>
+ *       {items.map((item) => (
+ *         <SimpleUploadListItem
+ *           key={item.id}
+ *           item={item}
+ *           actions={actions}
+ *           showDetails={true}
+ *         />
+ *       ))}
+ *     </div>
+ *   )}
+ * </UploadList>
+ *
+ * // Custom styling
+ * <SimpleUploadListItem
+ *   item={uploadItem}
+ *   actions={actions}
+ *   className="my-upload-item"
+ *   style={{ borderRadius: '12px', margin: '1rem' }}
+ *   showDetails={true}
+ * />
+ * ```
+ */
+declare function SimpleUploadListItem({
+  item,
+  actions,
+  className,
+  style,
+  showDetails
+}: SimpleUploadListItemProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/upload-zone.d.ts
+/**
+ * Render props passed to the UploadZone children function.
+ * Provides access to drag-drop state, upload controls, and helper functions.
+ *
+ * @property dragDrop - Complete drag-and-drop state and event handlers
+ * @property upload - Single upload hook (null when multiple=true)
+ * @property multiUpload - Multi-upload hook (null when multiple=false)
+ * @property openFilePicker - Programmatically trigger file selection dialog
+ * @property isActive - True when dragging over zone or files selected
+ * @property isProcessing - True when uploads are in progress
+ */
+interface UploadZoneRenderProps {
+  /**
+   * Drag and drop state and handlers
+   */
+  dragDrop: UseDragDropReturn;
+  /**
+   * Single upload functionality (if not using multi-upload)
+   */
+  upload: UseUploadReturn | null;
+  /**
+   * Multi-upload functionality (if using multi-upload)
+   */
+  multiUpload: UseMultiUploadReturn | null;
+  /**
+   * Helper function to open file picker
+   */
+  openFilePicker: () => void;
+  /**
+   * Whether the zone is currently active (dragging or uploading)
+   */
+  isActive: boolean;
+  /**
+   * Whether files are being processed
+   */
+  isProcessing: boolean;
+}
+/**
+ * Props for the UploadZone component.
+ * Combines drag-drop options with upload configuration.
+ *
+ * @property multiple - Enable multi-file selection and upload (default: true)
+ * @property multiUploadOptions - Configuration for multi-upload mode
+ * @property uploadOptions - Configuration for single-upload mode
+ * @property children - Render function receiving upload zone state
+ * @property onUploadStart - Called when files pass validation and upload begins
+ * @property onValidationError - Called when file validation fails
+ * @property accept - Accepted file types (e.g., ['image/*', '.pdf'])
+ * @property maxFiles - Maximum number of files allowed
+ * @property maxFileSize - Maximum file size in bytes
+ * @property validator - Custom validation function
+ */
+interface UploadZoneProps extends Omit<DragDropOptions, "onFilesReceived"> {
+  /**
+   * Whether to enable multi-file upload mode
+   */
+  multiple?: boolean;
+  /**
+   * Multi-upload specific options (only used when multiple=true)
+   */
+  multiUploadOptions?: MultiUploadOptions;
+  /**
+   * Single upload specific options (only used when multiple=false)
+   */
+  uploadOptions?: UseUploadOptions;
+  /**
+   * Render prop that receives upload zone state and handlers
+   */
+  children: (props: UploadZoneRenderProps) => React$1.ReactNode;
+  /**
+   * Called when files are processed and uploads begin
+   */
+  onUploadStart?: (files: File[]) => void;
+  /**
+   * Called when validation errors occur
+   */
+  onValidationError?: (errors: string[]) => void;
+}
+/**
+ * Headless upload zone component that combines drag and drop functionality
+ * with upload management. Uses render props pattern for maximum flexibility.
+ * Includes enhanced error handling for MIME type validation and file count validation.
+ *
+ * @param props - Upload zone configuration and render prop
+ * @returns Rendered upload zone using the provided render prop
+ *
+ * @example
+ * ```tsx
+ * // Single file upload zone with error handling
+ * <UploadZone
+ *   multiple={false}
+ *   accept={['image/*']}
+ *   maxFileSize={5 * 1024 * 1024}
+ *   onValidationError={(errors) => {
+ *     console.error('Validation errors:', errors);
+ *   }}
+ *   uploadOptions={{
+ *     onSuccess: (result) => console.log('Upload complete:', result),
+ *     onError: (error) => console.error('Upload failed:', error),
+ *   }}
+ * >
+ *   {({ dragDrop, upload, openFilePicker, isActive }) => (
+ *     <div {...dragDrop.dragHandlers} onClick={openFilePicker}>
+ *       {dragDrop.state.isDragging ? (
+ *         <p>Drop file here...</p>
+ *       ) : upload?.isUploading ? (
+ *         <p>Uploading... {upload.state.progress}%</p>
+ *       ) : (
+ *         <p>Drag a file here or click to select</p>
+ *       )}
+ *
+ *       {dragDrop.state.errors.length > 0 && (
+ *         <div style={{ color: 'red' }}>
+ *           {dragDrop.state.errors.map((error, index) => (
+ *             <p key={index}>{error}</p>
+ *           ))}
+ *         </div>
+ *       )}
+ *
+ *       <input {...dragDrop.inputProps} />
+ *     </div>
+ *   )}
+ * </UploadZone>
+ * ```
+ */
+declare function UploadZone({
+  children,
+  multiple,
+  multiUploadOptions,
+  uploadOptions,
+  onUploadStart,
+  onValidationError,
+  ...dragDropOptions
+}: UploadZoneProps): react_jsx_runtime0.JSX.Element;
+/**
+ * Props for the SimpleUploadZone component with built-in styling.
+ *
+ * @property className - CSS class name for custom styling
+ * @property style - Inline styles for the upload zone container
+ * @property text - Custom text labels for different states
+ * @property text.idle - Text shown when zone is idle
+ * @property text.dragging - Text shown when dragging files over zone
+ * @property text.uploading - Text shown during upload
+ * @property errorStyle - Custom styles for validation error display
+ */
+interface SimpleUploadZoneProps extends UploadZoneProps {
+  /**
+   * Additional CSS class name for styling
+   */
+  className?: string;
+  /**
+   * Inline styles for the upload zone
+   */
+  style?: React$1.CSSProperties;
+  /**
+   * Custom text to display in different states
+   */
+  text?: {
+    idle?: string;
+    dragging?: string;
+    uploading?: string;
+  };
+  /**
+   * Custom error message styling
+   */
+  errorStyle?: React$1.CSSProperties;
+}
+/**
+ * Simple pre-styled upload zone component with built-in UI and error handling.
+ * Provides a ready-to-use drag-and-drop upload interface with minimal configuration.
+ *
+ * Features:
+ * - Built-in drag-and-drop visual feedback
+ * - Automatic progress display
+ * - File validation error display
+ * - Customizable text and styling
+ * - Keyboard accessible
+ *
+ * @param props - Upload zone configuration with styling options
+ * @returns Styled upload zone component
+ *
+ * @example
+ * ```tsx
+ * // Multi-file upload with validation
+ * <SimpleUploadZone
+ *   multiple={true}
+ *   accept={['image/*', '.pdf']}
+ *   maxFiles={5}
+ *   maxFileSize={10 * 1024 * 1024} // 10MB
+ *   onUploadStart={(files) => console.log('Starting uploads:', files.length)}
+ *   onValidationError={(errors) => {
+ *     errors.forEach(err => console.error(err));
+ *   }}
+ *   multiUploadOptions={{
+ *     maxConcurrent: 3,
+ *     onComplete: (results) => {
+ *       console.log(`${results.successful.length}/${results.total} uploaded`);
+ *     },
+ *   }}
+ *   style={{
+ *     width: '400px',
+ *     height: '200px',
+ *     margin: '20px auto',
+ *   }}
+ *   text={{
+ *     idle: 'Drop your files here or click to browse',
+ *     dragging: 'Release to upload',
+ *     uploading: 'Uploading files...',
+ *   }}
+ *   errorStyle={{
+ *     backgroundColor: '#fff3cd',
+ *     borderColor: '#ffeaa7',
+ *   }}
+ * />
+ *
+ * // Single file upload
+ * <SimpleUploadZone
+ *   multiple={false}
+ *   accept={['image/*']}
+ *   uploadOptions={{
+ *     onSuccess: (result) => console.log('Uploaded:', result),
+ *     onError: (error) => console.error('Failed:', error),
+ *   }}
+ *   text={{
+ *     idle: 'Click or drag an image to upload',
+ *   }}
+ * />
+ * ```
+ */
+declare function SimpleUploadZone({
+  className,
+  style,
+  text,
+  errorStyle,
+  children,
+  ...uploadZoneProps
+}: SimpleUploadZoneProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/uploadista-provider.d.ts
+/**
+ * Props for the UploadistaProvider component.
+ * Combines client configuration options with React children.
+ *
+ * @property children - React components that will have access to the upload client context
+ * @property baseUrl - API base URL for uploads
+ * @property storageId - Default storage identifier
+ * @property chunkSize - Upload chunk size in bytes
+ * @property onEvent - Global event handler for all upload events
+ * @property ... - All other UploadistaClientOptions
+ */
+interface UploadistaProviderProps extends UseUploadistaClientOptions {
+  /**
+   * Children components that will have access to the upload client
+   */
+  children: React$1.ReactNode;
+}
+type UploadistaContextValue = UseUploadistaClientReturn & {
+  /**
+   * Subscribe to events (used internally by hooks)
+   * @internal
+   */
+  subscribeToEvents: (handler: (event: UploadistaEvent) => void) => () => void;
+};
+/**
+ * Context provider that provides uploadista client functionality to child components.
+ * This eliminates the need to pass upload client configuration down through props
+ * and ensures a single, shared upload client instance across your application.
+ *
+ * @param props - Upload client options and children
+ * @returns Provider component with upload client context
+ *
+ * @example
+ * ```tsx
+ * // Wrap your app with the upload provider
+ * function App() {
+ *   return (
+ *     <UploadistaProvider
+ *       baseUrl="https://api.example.com"
+ *       storageId="my-storage"
+ *       chunkSize={1024 * 1024} // 1MB chunks
+ *       onEvent={(event) => {
+ *         console.log('Global upload event:', event);
+ *       }}
+ *     >
+ *       <UploadInterface />
+ *     </UploadistaProvider>
+ *   );
+ * }
+ *
+ * // Use the upload client in any child component
+ * function UploadInterface() {
+ *   const uploadClient = useUploadistaContext();
+ *   const upload = useUpload(uploadClient);
+ *   const dragDrop = useDragDrop({
+ *     onFilesReceived: (files) => {
+ *       files.forEach(file => upload.upload(file));
+ *     }
+ *   });
+ *
+ *   return (
+ *     <div {...dragDrop.dragHandlers}>
+ *       <p>Drop files here to upload</p>
+ *       {upload.isUploading && <p>Progress: {upload.state.progress}%</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function UploadistaProvider({
+  children,
+  ...options
+}: UploadistaProviderProps): react_jsx_runtime0.JSX.Element;
+/**
+ * Hook to access the uploadista client from the UploadistaProvider context.
+ * Must be used within an UploadistaProvider component.
+ *
+ * @returns Upload client instance from context
+ * @throws Error if used outside of UploadistaProvider
+ *
+ * @example
+ * ```tsx
+ * function FileUploader() {
+ *   const uploadClient = useUploadistaContext();
+ *   const upload = useUpload(uploadClient);
+ *
+ *   return (
+ *     <button
+ *       onClick={() => {
+ *         const input = document.createElement('input');
+ *         input.type = 'file';
+ *         input.onchange = (e) => {
+ *           const file = (e.target as HTMLInputElement).files?.[0];
+ *           if (file) upload.upload(file);
+ *         };
+ *         input.click();
+ *       }}
+ *     >
+ *       Upload File
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare function useUploadistaContext(): UploadistaContextValue;
+//#endregion
+export { SimpleFlowUploadListItemProps as C, SimpleFlowUploadListItem as S, SimpleFlowUploadZoneProps as _, UploadZone as a, FlowUploadListRenderProps as b, SimpleUploadListItem as c, UploadListProps as d, UploadListRenderProps as f, SimpleFlowUploadZone as g, FlowUploadZoneRenderProps as h, SimpleUploadZoneProps as i, SimpleUploadListItemProps as l, FlowUploadZoneProps as m, useUploadistaContext as n, UploadZoneProps as o, FlowUploadZone as p, SimpleUploadZone as r, UploadZoneRenderProps as s, UploadistaProvider as t, UploadList as u, FlowUploadList as v, SimpleFlowUploadListProps as w, SimpleFlowUploadList as x, FlowUploadListProps as y };
+//# sourceMappingURL=uploadista-provider-D8GQ2GhF.d.ts.map