@uploadista/react 0.0.20-beta.2 → 0.0.20-beta.4

package/src/components/index.tsx

@@ -1,7 +1,35 @@
-// Flow Upload Components
-export type { FlowInputProps } from "./flow-input";
-export { FlowInput } from "./flow-input";
+// Flow Primitives (NEW compound component)
+export {
+  Flow,
+  useFlowContext,
+  useFlowInputContext,
+} from "./flow-primitives";
+export type {
+  FlowCancelProps,
+  FlowContextValue,
+  FlowDropZoneProps,
+  FlowDropZoneRenderProps,
+  FlowErrorProps,
+  FlowErrorRenderProps,
+  FlowInputContextValue,
+  FlowInputDropZoneProps,
+  FlowInputDropZoneRenderProps,
+  FlowInputPreviewProps,
+  FlowInputPreviewRenderProps,
+  FlowInputProps,
+  FlowInputsProps,
+  FlowInputsRenderProps,
+  FlowInputUrlFieldProps,
+  FlowProgressProps,
+  FlowProgressRenderProps,
+  FlowProps,
+  FlowResetProps,
+  FlowStatusProps,
+  FlowStatusRenderProps,
+  FlowSubmitProps,
+} from "./flow-primitives";
 
+// Flow Upload List (for batch uploads with useMultiFlowUpload)
 export type {
   FlowUploadListProps,
   FlowUploadListRenderProps,
@@ -14,16 +42,6 @@ export {
   SimpleFlowUploadListItem,
 } from "./flow-upload-list";
 
-export type {
-  FlowUploadZoneProps,
-  FlowUploadZoneRenderProps,
-  SimpleFlowUploadZoneProps,
-} from "./flow-upload-zone";
-export {
-  FlowUploadZone,
-  SimpleFlowUploadZone,
-} from "./flow-upload-zone";
-
 // Upload Components
 export type {
   SimpleUploadListItemProps,

package/src/hooks/index.ts

@@ -1,51 +1,30 @@
 // Event Hooks
 export { isFlowEvent, isUploadEvent } from "./event-utils";
-export { useUploadistaEvents } from "./use-uploadista-events";
-export type { UseFlowEventsOptions } from "./use-flow-events";
-export { useFlowEvents } from "./use-flow-events";
+
+// Drag & Drop Hook
 export type {
-  UploadFailedEventData,
-  UploadFileEventData,
-  UploadProgressEventData,
-  UploadValidationFailedEventData,
-  UploadValidationSuccessEventData,
-  UploadValidationWarningEventData,
-  UseUploadEventsOptions,
-} from "./use-upload-events";
-export { useUploadEvents } from "./use-upload-events";
+  DragDropOptions,
+  DragDropState,
+  UseDragDropReturn,
+} from "./use-drag-drop";
+export { useDragDrop } from "./use-drag-drop";
 
-// Flow Upload Hooks
+// Flow Hooks
+// useFlow is the primary hook for flow operations (replaces useFlowUpload)
 export type {
   FlowInputMetadata,
+  FlowUploadState,
+  FlowUploadStatus,
   InputExecutionState,
   UseFlowReturn,
 } from "./use-flow";
 export { useFlow } from "./use-flow";
-
-export type {
-  InputBuilder,
-  UseFlowExecutionOptions,
-  UseFlowExecutionReturn,
-} from "./use-flow-execution";
-export { useFlowExecution } from "./use-flow-execution";
-
-export type {
-  FlowUploadState,
-  FlowUploadStatus,
-  UseFlowUploadReturn,
-} from "./use-flow-upload";
-export { useFlowUpload } from "./use-flow-upload";
-
-// Upload Hooks
-export type {
-  DragDropOptions,
-  DragDropState,
-  UseDragDropReturn,
-} from "./use-drag-drop";
-export { useDragDrop } from "./use-drag-drop";
+export type { UseFlowEventsOptions } from "./use-flow-events";
+export { useFlowEvents } from "./use-flow-events";
 export type { UseMultiFlowUploadReturn } from "./use-multi-flow-upload";
 export { useMultiFlowUpload } from "./use-multi-flow-upload";
 
+// Upload Hooks
 export type {
   MultiUploadOptions,
   MultiUploadState,
@@ -53,7 +32,6 @@ export type {
   UseMultiUploadReturn,
 } from "./use-multi-upload";
 export { useMultiUpload } from "./use-multi-upload";
-
 export type {
   UploadState,
   UploadStatus,
@@ -61,7 +39,16 @@ export type {
   UseUploadReturn,
 } from "./use-upload";
 export { useUpload } from "./use-upload";
-
+export type {
+  UploadFailedEventData,
+  UploadFileEventData,
+  UploadProgressEventData,
+  UploadValidationFailedEventData,
+  UploadValidationSuccessEventData,
+  UploadValidationWarningEventData,
+  UseUploadEventsOptions,
+} from "./use-upload-events";
+export { useUploadEvents } from "./use-upload-events";
 export type {
   FileUploadMetrics,
   UploadMetrics,
@@ -76,3 +63,4 @@ export type {
   UseUploadistaClientReturn,
 } from "./use-uploadista-client";
 export { useUploadistaClient } from "./use-uploadista-client";
+export { useUploadistaEvents } from "./use-uploadista-events";

package/src/hooks/use-drag-drop.ts

@@ -89,6 +89,7 @@ export interface UseDragDropReturn {
     accept?: string;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     style: { display: "none" };
+    ref: React.RefObject<HTMLInputElement | null>;
   };
 
   /**

package/src/index.ts

@@ -1,8 +1,65 @@
-// Event Hooks
-export { isFlowEvent, isUploadEvent } from "./hooks/event-utils";
-export { useUploadistaEvents } from "./hooks/use-uploadista-events";
+// ============ FLOW PRIMITIVES (NEW) ============
+// Compound component for flow-based uploads
+export {
+  Flow,
+  useFlowContext,
+  useFlowInputContext,
+} from "./components/flow-primitives";
+export type {
+  FlowProps,
+  FlowContextValue,
+  FlowInputContextValue,
+  FlowDropZoneProps,
+  FlowDropZoneRenderProps,
+  FlowInputsProps,
+  FlowInputsRenderProps,
+  FlowInputProps,
+  FlowInputDropZoneProps,
+  FlowInputDropZoneRenderProps,
+  FlowInputUrlFieldProps,
+  FlowInputPreviewProps,
+  FlowInputPreviewRenderProps,
+  FlowProgressProps,
+  FlowProgressRenderProps,
+  FlowStatusProps,
+  FlowStatusRenderProps,
+  FlowErrorProps,
+  FlowErrorRenderProps,
+  FlowSubmitProps,
+  FlowCancelProps,
+  FlowResetProps,
+} from "./components/flow-primitives";
+
+// ============ FLOW HOOKS ============
+// useFlow is the primary hook for flow operations
+export type {
+  FlowInputMetadata,
+  InputExecutionState,
+  UseFlowReturn,
+  FlowUploadState,
+  FlowUploadStatus,
+} from "./hooks/use-flow";
+export { useFlow } from "./hooks/use-flow";
 export type { UseFlowEventsOptions } from "./hooks/use-flow-events";
 export { useFlowEvents } from "./hooks/use-flow-events";
+export type { UseMultiFlowUploadReturn } from "./hooks/use-multi-flow-upload";
+export { useMultiFlowUpload } from "./hooks/use-multi-flow-upload";
+
+// ============ UPLOAD HOOKS ============
+export type {
+  MultiUploadOptions,
+  MultiUploadState,
+  UploadItem,
+  UseMultiUploadReturn,
+} from "./hooks/use-multi-upload";
+export { useMultiUpload } from "./hooks/use-multi-upload";
+export type {
+  UploadState,
+  UploadStatus,
+  UseUploadOptions,
+  UseUploadReturn,
+} from "./hooks/use-upload";
+export { useUpload } from "./hooks/use-upload";
 export type {
   UploadFailedEventData,
   UploadFileEventData,
@@ -13,57 +70,23 @@ export type {
   UseUploadEventsOptions,
 } from "./hooks/use-upload-events";
 export { useUploadEvents } from "./hooks/use-upload-events";
-
-// Flow Upload Hooks
-export type { FlowInputProps } from "./components/flow-input";
-export { FlowInput } from "./components/flow-input";
-
 export type {
-  FlowUploadListProps,
-  FlowUploadListRenderProps,
-  SimpleFlowUploadListItemProps,
-  SimpleFlowUploadListProps,
-} from "./components/flow-upload-list";
-export {
-  FlowUploadList,
-  SimpleFlowUploadList,
-  SimpleFlowUploadListItem,
-} from "./components/flow-upload-list";
-// Flow Upload Components
-export type {
-  FlowUploadZoneProps,
-  FlowUploadZoneRenderProps,
-  SimpleFlowUploadZoneProps,
-} from "./components/flow-upload-zone";
-export {
-  FlowUploadZone,
-  SimpleFlowUploadZone,
-} from "./components/flow-upload-zone";
-export type {
-  FlowUploadState,
-  FlowUploadStatus,
-  UseFlowUploadReturn,
-} from "./hooks/use-flow-upload";
-export { useFlowUpload } from "./hooks/use-flow-upload";
-export type { UseMultiFlowUploadReturn } from "./hooks/use-multi-flow-upload";
-export { useMultiFlowUpload } from "./hooks/use-multi-flow-upload";
-
-// Flow Hooks
-export type {
-  FlowInputMetadata,
-  InputExecutionState,
-  UseFlowReturn,
-} from "./hooks/use-flow";
-export { useFlow } from "./hooks/use-flow";
+  FileUploadMetrics,
+  UploadMetrics,
+  UseUploadMetricsOptions,
+  UseUploadMetricsReturn,
+} from "./hooks/use-upload-metrics";
+export { useUploadMetrics } from "./hooks/use-upload-metrics";
 
+// ============ DRAG & DROP ============
 export type {
-  InputBuilder,
-  UseFlowExecutionOptions,
-  UseFlowExecutionReturn,
-} from "./hooks/use-flow-execution";
-export { useFlowExecution } from "./hooks/use-flow-execution";
+  DragDropOptions,
+  DragDropState,
+  UseDragDropReturn,
+} from "./hooks/use-drag-drop";
+export { useDragDrop } from "./hooks/use-drag-drop";
 
-// Upload Hooks
+// ============ UPLOAD COMPONENTS ============
 export type {
   SimpleUploadListItemProps,
   UploadListProps,
@@ -77,48 +100,34 @@ export type {
 } from "./components/upload-zone";
 export { SimpleUploadZone, UploadZone } from "./components/upload-zone";
 
-// Components
+// ============ FLOW UPLOAD LIST (for batch uploads) ============
+export type {
+  FlowUploadListProps,
+  FlowUploadListRenderProps,
+  SimpleFlowUploadListItemProps,
+  SimpleFlowUploadListProps,
+} from "./components/flow-upload-list";
+export {
+  FlowUploadList,
+  SimpleFlowUploadList,
+  SimpleFlowUploadListItem,
+} from "./components/flow-upload-list";
+
+// ============ PROVIDERS & CONTEXTS ============
 export {
   UploadistaProvider,
   useUploadistaContext,
 } from "./components/uploadista-provider";
-
-// Contexts
 export {
   FlowManagerProvider,
   useFlowManagerContext,
 } from "./contexts/flow-manager-context";
-export type {
-  DragDropOptions,
-  DragDropState,
-  UseDragDropReturn,
-} from "./hooks/use-drag-drop";
-export { useDragDrop } from "./hooks/use-drag-drop";
 
-export type {
-  MultiUploadOptions,
-  MultiUploadState,
-  UploadItem,
-  UseMultiUploadReturn,
-} from "./hooks/use-multi-upload";
-export { useMultiUpload } from "./hooks/use-multi-upload";
-export type {
-  UploadState,
-  UploadStatus,
-  UseUploadOptions,
-  UseUploadReturn,
-} from "./hooks/use-upload";
-export { useUpload } from "./hooks/use-upload";
-export type {
-  FileUploadMetrics,
-  UploadMetrics,
-  UseUploadMetricsOptions,
-  UseUploadMetricsReturn,
-} from "./hooks/use-upload-metrics";
-export { useUploadMetrics } from "./hooks/use-upload-metrics";
-// Types - Hooks
+// ============ EVENT UTILITIES ============
+export { isFlowEvent, isUploadEvent } from "./hooks/event-utils";
 export type {
   UseUploadistaClientOptions,
   UseUploadistaClientReturn,
 } from "./hooks/use-uploadista-client";
 export { useUploadistaClient } from "./hooks/use-uploadista-client";
+export { useUploadistaEvents } from "./hooks/use-uploadista-events";

package/dist/upload-zone-BjWHuP7p.mjs

@@ -1,6 +0,0 @@
-import{a as e,i as t,n,r,t as i}from"./use-upload-BDHVhQsI.mjs";import{useCallback as a}from"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";function l({input:t,accept:n=`*`,allowUrl:r=!0,value:i,onChange:a,disabled:o=!1,className:l=``}){let u=i instanceof File,d=typeof i==`string`&&i.length>0,f=t.inputTypeId===`streaming-input-v1`,p=r&&(t.inputTypeId===`url-input-v1`||t.inputTypeId===`streaming-input-v1`),m=e({onFilesReceived:e=>{e[0]&&a(e[0])},accept:n?n.split(`,`).map(e=>e.trim()):void 0,multiple:!1}),h=e=>{a(e.target.value)},g=()=>{a(``)};return c(`div`,{className:`space-y-3 ${l}`,children:[c(`div`,{children:[c(`div`,{className:`flex items-center gap-2 mb-1`,children:[s(`h4`,{className:`font-semibold text-gray-900`,children:t.nodeName}),t.required&&s(`span`,{className:`text-red-500 text-sm`,children:`*`}),s(`span`,{className:`text-xs px-2 py-1 rounded-full bg-blue-100 text-blue-700 font-medium`,children:t.inputTypeId})]}),t.nodeDescription&&s(`p`,{className:`text-sm text-gray-600`,children:t.nodeDescription})]}),f&&c(`div`,{role:`button`,tabIndex:o?-1:0,...m.dragHandlers,onClick:()=>!o&&m.openFilePicker(),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&!o&&(e.preventDefault(),m.openFilePicker())},className:`
-            relative border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all
-            ${m.state.isDragging?`border-indigo-500 bg-indigo-50`:`border-gray-300 bg-gray-50 hover:border-indigo-400 hover:bg-indigo-50/50`}
-            ${o?`opacity-50 cursor-not-allowed`:``}
-          `,children:[m.state.isDragging?c(`div`,{className:`flex flex-col items-center gap-2`,children:[c(`svg`,{className:`w-8 h-8 text-indigo-600`,fill:`none`,viewBox:`0 0 24 24`,stroke:`currentColor`,children:[s(`title`,{children:`Drop file`}),s(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12`})]}),s(`p`,{className:`text-sm font-medium text-indigo-600`,children:`Drop file here`})]}):u?c(`div`,{className:`flex items-center justify-between`,children:[c(`div`,{className:`flex items-center gap-3`,children:[s(`svg`,{className:`w-5 h-5 text-green-500`,fill:`currentColor`,viewBox:`0 0 20 20`,"aria-hidden":`true`,children:s(`path`,{fillRule:`evenodd`,d:`M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z`,clipRule:`evenodd`})}),c(`div`,{className:`text-left`,children:[s(`p`,{className:`text-sm font-medium text-gray-900`,children:i.name}),c(`p`,{className:`text-xs text-gray-500`,children:[(i.size/1024).toFixed(1),` KB`]})]})]}),s(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),g()},className:`px-3 py-1 text-sm text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors`,children:`Remove`})]}):c(`div`,{className:`flex flex-col items-center gap-2`,children:[c(`svg`,{className:`w-8 h-8 text-gray-400`,fill:`none`,viewBox:`0 0 24 24`,stroke:`currentColor`,children:[s(`title`,{children:`Upload file`}),s(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12`})]}),c(`div`,{children:[s(`p`,{className:`text-sm font-medium text-gray-700`,children:`Drag and drop a file here, or click to select`}),c(`p`,{className:`text-xs text-gray-500 mt-1`,children:[`Accepted: `,n]})]})]}),s(`input`,{...m.inputProps})]}),m.state.errors.length>0&&s(`div`,{className:`bg-red-50 border border-red-200 rounded-lg p-3`,children:m.state.errors.map((e,t)=>s(`p`,{className:`text-sm text-red-700`,children:e},t))}),p&&f&&c(`div`,{className:`flex items-center gap-3`,children:[s(`div`,{className:`flex-1 border-t border-gray-300`}),s(`span`,{className:`text-xs font-medium text-gray-500 uppercase`,children:`Or`}),s(`div`,{className:`flex-1 border-t border-gray-300`})]}),p&&c(`div`,{className:`space-y-2`,children:[!f&&s(`label`,{htmlFor:`url-${t.nodeId}`,className:`block text-sm font-medium text-gray-700`,children:`URL`}),c(`div`,{className:`relative`,children:[s(`input`,{id:`url-${t.nodeId}`,type:`url`,value:d?i:``,onChange:h,disabled:o,placeholder:`https://example.com/file.jpg`,className:`block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-sm`}),d&&s(`button`,{type:`button`,onClick:g,disabled:o,className:`absolute right-2 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 transition-colors`,"aria-label":`Clear URL`,children:c(`svg`,{className:`w-4 h-4`,fill:`none`,viewBox:`0 0 24 24`,stroke:`currentColor`,children:[s(`title`,{children:`Clear`}),s(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M6 18L18 6M6 6l12 12`})]})})]}),d&&c(`div`,{className:`flex items-center gap-2 text-xs text-gray-600`,children:[s(`svg`,{className:`w-4 h-4 text-blue-500`,fill:`currentColor`,viewBox:`0 0 20 20`,"aria-hidden":`true`,children:s(`path`,{fillRule:`evenodd`,d:`M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z`,clipRule:`evenodd`})}),s(`span`,{className:`truncate`,children:i})]})]})]})}function u({flowConfig:e,options:n,children:r}){let i=t({...n,flowConfig:e});return s(o,{children:r({items:i.state.items,totalProgress:i.state.totalProgress,activeUploads:i.state.activeUploads,completedUploads:i.state.completedUploads,failedUploads:i.state.failedUploads,isUploading:i.isUploading,addFiles:i.addFiles,removeFile:i.removeFile,startUpload:i.startUpload,abortUpload:i.abortUpload,abortAll:i.abortAll,clear:i.clear,retryUpload:i.retryUpload})})}function d({item:e,onAbort:t,onRetry:n,onRemove:r}){return c(`div`,{style:{display:`flex`,alignItems:`center`,gap:`12px`,padding:`8px`,borderBottom:`1px solid #eee`},children:[s(`span`,{style:{color:(()=>{switch(e.status){case`success`:return`green`;case`error`:return`red`;case`uploading`:return`blue`;case`aborted`:return`gray`;default:return`black`}})(),fontSize:`18px`},children:(()=>{switch(e.status){case`success`:return`✓`;case`error`:return`✗`;case`uploading`:return`⟳`;case`aborted`:return`⊘`;default:return`○`}})()}),c(`div`,{style:{flex:1,minWidth:0},children:[s(`div`,{style:{fontSize:`14px`,fontWeight:500,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:e.file instanceof File?e.file.name:`Upload`}),e.status===`uploading`&&c(`div`,{style:{marginTop:`4px`},children:[s(`progress`,{value:e.progress,max:100,style:{width:`100%`,height:`4px`}}),c(`div`,{style:{fontSize:`12px`,color:`#666`,marginTop:`2px`},children:[e.progress,`% • `,Math.round(e.bytesUploaded/1024),` KB /`,` `,Math.round(e.totalBytes/1024),` KB`]})]}),e.status===`error`&&s(`div`,{style:{fontSize:`12px`,color:`red`,marginTop:`2px`},children:e.error?.message||`Upload failed`}),e.status===`success`&&s(`div`,{style:{fontSize:`12px`,color:`green`,marginTop:`2px`},children:`Upload complete`})]}),c(`div`,{style:{display:`flex`,gap:`8px`},children:[e.status===`uploading`&&s(`button`,{type:`button`,onClick:t,style:{padding:`4px 8px`,fontSize:`12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Cancel`}),e.status===`error`&&s(`button`,{type:`button`,onClick:n,style:{padding:`4px 8px`,fontSize:`12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Retry`}),(e.status===`pending`||e.status===`error`||e.status===`aborted`)&&s(`button`,{type:`button`,onClick:r,style:{padding:`4px 8px`,fontSize:`12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Remove`})]})]})}function f({flowConfig:e,options:t,className:n=``,showFileInput:r=!0,accept:i}){return s(u,{flowConfig:e,options:t,children:({items:e,addFiles:t,startUpload:a,abortUpload:o,retryUpload:l,removeFile:u,totalProgress:f})=>c(`div`,{className:n,children:[r&&s(`div`,{style:{marginBottom:`16px`},children:s(`input`,{type:`file`,multiple:!0,accept:i,onChange:e=>{e.target.files&&(t(e.target.files),a())},style:{padding:`8px`,border:`1px solid #ccc`,borderRadius:`4px`}})}),e.length>0&&c(`div`,{children:[c(`div`,{style:{marginBottom:`8px`,fontSize:`14px`,color:`#666`},children:[`Total Progress: `,f,`%`]}),s(`div`,{style:{border:`1px solid #eee`,borderRadius:`8px`,overflow:`hidden`},children:e.map(e=>s(d,{item:e,onAbort:()=>o(e.id),onRetry:()=>l(e.id),onRemove:()=>u(e.id)},e.id))})]})]})})}function p({flowConfig:t,options:n,accept:i,multiple:a=!1,children:c}){let l=r({...n,flowConfig:t}),u=e({onFilesReceived:e=>{let t=e[0];t&&l.upload(t)},accept:i?[i]:void 0,multiple:a}),d=e=>{let t=e.target.files?.[0];t&&l.upload(t)};return s(o,{children:c({flowUpload:l,dragDrop:u,isActive:u.state.isDragging||u.state.isOver,openFilePicker:u.openFilePicker,getRootProps:()=>u.dragHandlers,getInputProps:()=>({...u.inputProps,onChange:d})})})}function m({flowConfig:e,options:t,accept:n,className:r=``,dragText:i=`Drop files here`,idleText:a=`Drag & drop files or click to browse`}){return s(p,{flowConfig:e,options:t,accept:n,children:({dragDrop:e,flowUpload:t,getRootProps:n,getInputProps:o,openFilePicker:l})=>c(`div`,{...n(),className:r,style:{border:`2px dashed #ccc`,borderRadius:`8px`,padding:`32px`,textAlign:`center`,cursor:`pointer`,backgroundColor:e.state.isDragging?`#f0f0f0`:`transparent`,transition:`background-color 0.2s`},children:[s(`input`,{...o()}),e.state.isDragging&&s(`p`,{style:{margin:0},children:i}),!e.state.isDragging&&!t.isUploading&&t.state.status===`idle`&&c(`div`,{children:[s(`p`,{style:{margin:`0 0 16px 0`},children:a}),s(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),l()},style:{padding:`8px 16px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Choose Files`})]}),t.isUploading&&c(`div`,{children:[s(`progress`,{value:t.state.progress,max:100,style:{width:`100%`,height:`8px`}}),c(`p`,{style:{margin:`8px 0 0 0`},children:[t.state.progress,`%`]}),s(`button`,{type:`button`,onClick:e=>{e.stopPropagation()},style:{marginTop:`8px`,padding:`4px 12px`,borderRadius:`4px`,border:`1px solid #ccc`,backgroundColor:`#fff`,cursor:`pointer`},children:`Cancel`})]}),t.state.status===`success`&&s(`div`,{children:s(`p`,{style:{margin:0,color:`green`},children:`✓ Upload complete!`})}),t.state.status===`error`&&s(`div`,{children:c(`p`,{style:{margin:0,color:`red`},children:[`✗ Error: `,t.state.error?.message]})})]})})}function h({multiUpload:e,filter:t,sortBy:n,children:r}){let i=e.items;t&&(i=i.filter(t)),n&&(i=[...i].sort(n));let a={idle:i.filter(e=>e.state.status===`idle`),uploading:i.filter(e=>e.state.status===`uploading`),success:i.filter(e=>e.state.status===`success`),error:i.filter(e=>e.state.status===`error`),aborted:i.filter(e=>e.state.status===`aborted`)};return s(o,{children:r({items:i,itemsByStatus:a,multiUpload:e,actions:{removeItem:t=>{e.removeItem(t)},retryItem:t=>{e.retryFailed()},abortItem:t=>{e.removeItem(t.id)},startItem:t=>{e.startAll()}}})})}function g({item:e,actions:t,className:n=``,style:r={},showDetails:i=!0}){let a=e=>{switch(e){case`idle`:return`#6c757d`;case`uploading`:return`#007bff`;case`success`:return`#28a745`;case`error`:return`#dc3545`;case`aborted`:return`#6c757d`;default:return`#6c757d`}},l=e=>{switch(e){case`idle`:return`⏳`;case`uploading`:return`📤`;case`success`:return`✅`;case`error`:return`❌`;case`aborted`:return`⏹️`;default:return`❓`}},u=e=>{if(e===0)return`0 Bytes`;let t=1024,n=[`Bytes`,`KB`,`MB`,`GB`],r=Math.floor(Math.log(e)/Math.log(t));return`${parseFloat((e/t**r).toFixed(2))} ${n[r]}`};return c(`div`,{className:`upload-list-item upload-list-item--${e.state.status} ${n}`,style:{padding:`12px`,border:`1px solid #e0e0e0`,borderRadius:`6px`,marginBottom:`8px`,backgroundColor:`#fff`,transition:`all 0.2s ease`,...r},children:[c(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:`8px`},children:[c(`div`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,flex:1},children:[s(`span`,{style:{fontSize:`16px`},children:l(e.state.status)}),s(`span`,{style:{fontWeight:`500`,flex:1},children:e.file instanceof File?e.file.name:`File`})]}),s(`span`,{style:{fontSize:`12px`,color:a(e.state.status),fontWeight:`500`,textTransform:`uppercase`},children:e.state.status})]}),e.state.status===`uploading`&&c(`div`,{style:{marginBottom:`8px`},children:[c(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:`4px`},children:[c(`span`,{style:{fontSize:`12px`,color:`#666`},children:[e.state.progress,`%`]}),i&&e.state.totalBytes&&c(`span`,{style:{fontSize:`12px`,color:`#666`},children:[u(e.state.bytesUploaded),` /`,` `,u(e.state.totalBytes)]})]}),s(`div`,{style:{width:`100%`,height:`6px`,backgroundColor:`#e0e0e0`,borderRadius:`3px`,overflow:`hidden`},children:s(`div`,{style:{width:`${e.state.progress}%`,height:`100%`,backgroundColor:`#007bff`,transition:`width 0.2s ease`}})})]}),i&&c(`div`,{style:{fontSize:`12px`,color:`#666`,marginBottom:`8px`},children:[e.state.totalBytes&&s(`span`,{children:u(e.state.totalBytes)}),e.state.status===`uploading`&&e.state.progress>0&&c(`span`,{children:[` • Progress: `,e.state.progress,`%`]}),e.state.status===`error`&&e.state.error&&s(`div`,{style:{color:`#dc3545`,marginTop:`4px`},children:e.state.error.message})]}),c(`div`,{style:{display:`flex`,gap:`8px`,flexWrap:`wrap`},children:[e.state.status===`idle`&&c(o,{children:[s(`button`,{type:`button`,onClick:()=>t.startItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #007bff`,backgroundColor:`#007bff`,color:`white`,borderRadius:`4px`,cursor:`pointer`},children:`Start`}),s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`})]}),e.state.status===`uploading`&&s(`button`,{type:`button`,onClick:()=>t.abortItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #dc3545`,backgroundColor:`transparent`,color:`#dc3545`,borderRadius:`4px`,cursor:`pointer`},children:`Cancel`}),e.state.status===`error`&&c(o,{children:[s(`button`,{type:`button`,onClick:()=>t.retryItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #28a745`,backgroundColor:`#28a745`,color:`white`,borderRadius:`4px`,cursor:`pointer`},children:`Retry`}),s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`})]}),e.state.status===`success`&&s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`}),e.state.status===`aborted`&&c(o,{children:[s(`button`,{type:`button`,onClick:()=>t.retryItem(e),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #007bff`,backgroundColor:`#007bff`,color:`white`,borderRadius:`4px`,cursor:`pointer`},children:`Retry`}),s(`button`,{type:`button`,onClick:()=>t.removeItem(e.id),style:{padding:`4px 8px`,fontSize:`12px`,border:`1px solid #6c757d`,backgroundColor:`transparent`,color:`#6c757d`,borderRadius:`4px`,cursor:`pointer`},children:`Remove`})]})]})]})}function _({children:t,multiple:r=!0,multiUploadOptions:c={},uploadOptions:l={},onUploadStart:u,onValidationError:d,...f}){let p=i(l),m=n(c),h=a(e=>{let t=[];if(!r&&e.length>1&&t.push(`Single file mode is enabled. Please select only one file. You selected ${e.length} files.`),f.accept&&f.accept.length>0){let n=e.filter(e=>!f.accept?.some(t=>{if(t.startsWith(`.`))return e.name.toLowerCase().endsWith(t.toLowerCase());if(t.endsWith(`/*`)){let n=t.slice(0,-2);return e.type.startsWith(n)}else return e.type===t}));if(n.length>0){let e=n.map(e=>`"${e.name}" (${e.type})`).join(`, `),r=f.accept.join(`, `);t.push(`Invalid file type(s): ${e}. Accepted types: ${r}.`)}}return t.length>0?t:null},[r,f.accept]),g=e=>{u?.(e),r&&m?(m.addFiles(e),setTimeout(()=>m.startAll(),0)):!r&&p&&e.length>0&&e[0]&&p.upload(e[0])},_=a(e=>{console.error(`Upload zone validation errors:`,e),d?.(e)},[d]),v=e({...f,multiple:r,validator:h,onFilesReceived:g,onValidationError:_}),y=v.state.isDragging||v.state.isOver,b=r?m?.state.isUploading??!1:p?.isUploading??!1;return s(o,{children:t({dragDrop:v,upload:p,multiUpload:m,openFilePicker:v.openFilePicker,isActive:y,isProcessing:b})})}function v({className:e=``,style:t={},text:n={},errorStyle:r={},children:i,...a}){let o={idle:a.multiple?`Drag files here or click to select`:`Drag a file here or click to select`,dragging:a.multiple?`Drop files here...`:`Drop file here...`,uploading:`Uploading...`,...n};return i?s(_,{...a,children:i}):s(_,{...a,children:({dragDrop:n,upload:i,multiUpload:a,openFilePicker:l,isActive:u,isProcessing:d})=>c(`button`,{type:`button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&l()},onKeyUp:e=>{(e.key===`Enter`||e.key===` `)&&l()},...n.dragHandlers,onClick:l,className:`upload-zone ${u?`upload-zone--active`:``} ${d?`upload-zone--processing`:``} ${e}`,style:{border:u?`2px dashed #007bff`:`2px dashed #ccc`,borderRadius:`8px`,padding:`2rem`,textAlign:`center`,cursor:`pointer`,backgroundColor:u?`#f8f9fa`:`transparent`,transition:`all 0.2s ease`,minHeight:`120px`,display:`flex`,flexDirection:`column`,alignItems:`center`,justifyContent:`center`,...t},children:[n.state.isDragging?s(`p`,{style:{margin:0,fontSize:`16px`,color:`#007bff`},children:o.dragging}):d?c(`div`,{style:{textAlign:`center`},children:[s(`p`,{style:{margin:`0 0 10px 0`,fontSize:`14px`},children:o.uploading}),i&&c(`div`,{children:[s(`progress`,{value:i.state.progress,max:100,style:{width:`200px`,height:`8px`}}),c(`p`,{style:{margin:`5px 0 0 0`,fontSize:`12px`,color:`#666`},children:[i.state.progress,`%`]})]}),a&&c(`div`,{children:[s(`progress`,{value:a.state.progress,max:100,style:{width:`200px`,height:`8px`}}),c(`p`,{style:{margin:`5px 0 0 0`,fontSize:`12px`,color:`#666`},children:[a.state.progress,`% (`,a.state.uploading,` `,`uploading, `,a.state.successful,` completed)`]})]})]}):s(`p`,{style:{margin:0,fontSize:`16px`,color:`#666`},children:o.idle}),n.state.errors.length>0&&c(`div`,{style:{marginTop:`10px`,padding:`8px 12px`,backgroundColor:`#f8d7da`,border:`1px solid #f5c6cb`,borderRadius:`4px`,maxWidth:`100%`,...r},children:[s(`p`,{style:{margin:`0 0 5px 0`,fontSize:`12px`,fontWeight:`bold`,color:`#721c24`},children:`Validation Errors:`}),n.state.errors.map((e,t)=>c(`p`,{style:{color:`#721c24`,fontSize:`11px`,margin:`2px 0`,lineHeight:`1.3`},children:[`• `,e]},t))]}),s(`input`,{...n.inputProps})]})})}export{p as a,f as c,h as i,d as l,_ as n,m as o,g as r,u as s,v as t,l as u};
-//# sourceMappingURL=upload-zone-BjWHuP7p.mjs.map