@uploadista/react 0.0.20 → 0.1.0

package/src/components/upload-primitives.tsx

@@ -2,12 +2,7 @@
 
 import type { BrowserUploadInput } from "@uploadista/client-browser";
 import type { UploadFile } from "@uploadista/core/types";
-import {
-  type ReactNode,
-  createContext,
-  useCallback,
-  useContext,
-} from "react";
+import { createContext, type ReactNode, useCallback, useContext } from "react";
 import {
   type DragDropState,
   type UseDragDropReturn,
@@ -15,13 +10,21 @@ import {
 } from "../hooks/use-drag-drop";
 import {
   type MultiUploadState,
-  type UploadItem,
+  type UploadItem as UploadItemData,
   useMultiUpload,
 } from "../hooks/use-multi-upload";
-import type { UploadState, UploadStatus } from "../hooks/use-upload";
+import type {
+  UploadState,
+  UploadStatus as UploadStatusType,
+} from "../hooks/use-upload";
 
 // Re-export types for convenience
-export type { UploadState, UploadStatus, UploadItem, MultiUploadState };
+export type {
+  UploadState,
+  UploadStatusType as UploadStatus,
+  UploadItemData as UploadItem,
+  MultiUploadState,
+};
 
 // ============ UPLOAD CONTEXT ============
 
@@ -35,7 +38,7 @@ export interface UploadContextValue {
   /** Current multi-upload state (aggregate) */
   state: MultiUploadState;
   /** All upload items */
-  items: UploadItem[];
+  items: UploadItemData[];
   /** Whether auto-start is enabled */
   autoStart: boolean;
 
@@ -73,7 +76,7 @@ export function useUploadContext(): UploadContextValue {
   if (!context) {
     throw new Error(
       "useUploadContext must be used within an <Upload> component. " +
-        'Wrap your component tree with <Upload onSuccess={...}>',
+        "Wrap your component tree with <Upload onSuccess={...}>",
     );
   }
   return context;
@@ -133,18 +136,18 @@ export interface UploadProps {
   /** Called when a single file upload succeeds (single mode) */
   onSuccess?: (result: UploadFile) => void;
   /** Called when an upload fails */
-  onError?: (error: Error, item?: UploadItem) => void;
+  onError?: (error: Error, item?: UploadItemData) => void;
   /** Called when all uploads complete (multi mode) */
   onComplete?: (results: {
-    successful: UploadItem[];
-    failed: UploadItem[];
+    successful: UploadItemData[];
+    failed: UploadItemData[];
     total: number;
   }) => void;
   /** Called when an individual upload starts */
-  onUploadStart?: (item: UploadItem) => void;
+  onUploadStart?: (item: UploadItemData) => void;
   /** Called on upload progress */
   onProgress?: (
-    item: UploadItem,
+    item: UploadItemData,
     progress: number,
     bytesUploaded: number,
     totalBytes: number | null,
@@ -211,7 +214,7 @@ function UploadRoot({
     metadata,
     onUploadStart,
     onUploadProgress: onProgress,
-    onUploadSuccess: (item, result) => {
+    onUploadSuccess: (_item, result) => {
       // In single mode, call onSuccess directly
       if (!multiple) {
         onSuccess?.(result);
@@ -350,7 +353,7 @@ function UploadDropZone({
  */
 export interface UploadItemsRenderProps {
   /** All upload items */
-  items: UploadItem[];
+  items: UploadItemData[];
   /** Whether there are any items */
   hasItems: boolean;
   /** Whether items array is empty */
@@ -590,7 +593,7 @@ export interface UploadErrorRenderProps {
   /** Number of failed uploads */
   failedCount: number;
   /** Failed items */
-  failedItems: UploadItem[];
+  failedItems: UploadItemData[];
   /** Reset/clear all errors */
   reset: () => void;
 }

package/src/components/upload-zone.tsx

@@ -522,8 +522,7 @@ export function SimpleUploadZone({
               </p>
               {dragDrop.state.errors.map((error, index) => (
                 <p
-                  // biome-ignore lint/suspicious/noArrayIndexKey: index is used as key
-                  key={index}
+                  key={`${error}-${index}`}
                   style={{
                     color: "#721c24",
                     fontSize: "11px",

package/src/hooks/event-utils.ts

@@ -1,6 +1,6 @@
 import type { UploadistaEvent } from "@uploadista/client-browser";
 import { EventType, type FlowEvent } from "@uploadista/core/flow";
-import { UploadEventType, type UploadEvent } from "@uploadista/core/types";
+import { type UploadEvent, UploadEventType } from "@uploadista/core/types";
 
 /**
  * Type guard to check if an event is a flow event

package/src/hooks/use-upload-events.ts

@@ -1,4 +1,4 @@
-import { UploadEventType, type UploadEvent } from "@uploadista/core/types";
+import { UploadEventType } from "@uploadista/core/types";
 import { useEffect } from "react";
 import { useUploadistaContext } from "../components/uploadista-provider";
 import { isUploadEvent } from "./event-utils";
@@ -163,10 +163,7 @@ export function useUploadEvents(options: UseUploadEventsOptions): void {
           break;
         case UploadEventType.UPLOAD_PROGRESS:
           options.onUploadProgress?.({
-            ...(event.data as unknown as Omit<
-              UploadProgressEventData,
-              "flow"
-            >),
+            ...(event.data as unknown as Omit<UploadProgressEventData, "flow">),
             flow: flowContext,
           });
           break;

package/src/index.ts

@@ -1,50 +1,120 @@
 // ============ FLOW PRIMITIVES (NEW) ============
 // Compound component for flow-based uploads
-export {
-  Flow,
-  useFlowContext,
-  useFlowInputContext,
-} from "./components/flow-primitives";
+
 export type {
-  FlowProps,
+  FlowCancelProps,
   FlowContextValue,
-  FlowInputContextValue,
   FlowDropZoneProps,
   FlowDropZoneRenderProps,
-  FlowInputsProps,
-  FlowInputsRenderProps,
-  FlowInputProps,
+  FlowErrorProps,
+  FlowErrorRenderProps,
+  FlowInputContextValue,
   FlowInputDropZoneProps,
   FlowInputDropZoneRenderProps,
-  FlowInputUrlFieldProps,
   FlowInputPreviewProps,
   FlowInputPreviewRenderProps,
+  FlowInputProps,
+  FlowInputsProps,
+  FlowInputsRenderProps,
+  FlowInputUrlFieldProps,
   FlowProgressProps,
   FlowProgressRenderProps,
+  FlowProps,
+  FlowResetProps,
   FlowStatusProps,
   FlowStatusRenderProps,
-  FlowErrorProps,
-  FlowErrorRenderProps,
   FlowSubmitProps,
-  FlowCancelProps,
-  FlowResetProps,
 } from "./components/flow-primitives";
-
+export {
+  Flow,
+  useFlowContext,
+  useFlowInputContext,
+} from "./components/flow-primitives";
+// ============ 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";
+// ============ UPLOAD COMPONENTS (LEGACY) ============
+export type {
+  SimpleUploadListItemProps,
+  UploadListProps,
+  UploadListRenderProps,
+} from "./components/upload-list";
+export { SimpleUploadListItem, UploadList } from "./components/upload-list";
+export type {
+  UploadCancelProps,
+  UploadClearCompletedProps,
+  UploadContextValue,
+  UploadDropZoneProps,
+  UploadDropZoneRenderProps,
+  UploadErrorProps,
+  UploadErrorRenderProps,
+  UploadItemContextValue,
+  UploadItemProps,
+  UploadItemsProps,
+  UploadItemsRenderProps,
+  UploadProgressProps,
+  UploadProgressRenderProps,
+  UploadProps,
+  UploadResetProps,
+  UploadRetryProps,
+  UploadStartAllProps,
+  UploadStatusProps,
+  UploadStatusRenderProps,
+} from "./components/upload-primitives";
+// ============ UPLOAD PRIMITIVES (NEW) ============
+// Compound component for file uploads
+export {
+  Upload,
+  useUploadContext,
+  useUploadItemContext,
+} from "./components/upload-primitives";
+export type {
+  SimpleUploadZoneProps,
+  UploadZoneProps,
+  UploadZoneRenderProps,
+} from "./components/upload-zone";
+export { SimpleUploadZone, UploadZone } from "./components/upload-zone";
+// ============ PROVIDERS & CONTEXTS ============
+export {
+  UploadistaProvider,
+  useUploadistaContext,
+} from "./components/uploadista-provider";
+export {
+  FlowManagerProvider,
+  useFlowManagerContext,
+} from "./contexts/flow-manager-context";
+// ============ EVENT UTILITIES ============
+export { isFlowEvent, isUploadEvent } from "./hooks/event-utils";
+// ============ DRAG & DROP ============
+export type {
+  DragDropOptions,
+  DragDropState,
+  UseDragDropReturn,
+} from "./hooks/use-drag-drop";
+export { useDragDrop } from "./hooks/use-drag-drop";
 // ============ FLOW HOOKS ============
 // useFlow is the primary hook for flow operations
 export type {
   FlowInputMetadata,
-  InputExecutionState,
-  UseFlowReturn,
   FlowUploadState,
   FlowUploadStatus,
+  InputExecutionState,
+  UseFlowReturn,
 } 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,
@@ -77,83 +147,6 @@ export type {
   UseUploadMetricsReturn,
 } from "./hooks/use-upload-metrics";
 export { useUploadMetrics } from "./hooks/use-upload-metrics";
-
-// ============ DRAG & DROP ============
-export type {
-  DragDropOptions,
-  DragDropState,
-  UseDragDropReturn,
-} from "./hooks/use-drag-drop";
-export { useDragDrop } from "./hooks/use-drag-drop";
-
-// ============ UPLOAD PRIMITIVES (NEW) ============
-// Compound component for file uploads
-export {
-  Upload,
-  useUploadContext,
-  useUploadItemContext,
-} from "./components/upload-primitives";
-export type {
-  UploadProps,
-  UploadContextValue,
-  UploadItemContextValue,
-  UploadDropZoneProps,
-  UploadDropZoneRenderProps,
-  UploadItemsProps,
-  UploadItemsRenderProps,
-  UploadItemProps,
-  UploadProgressProps,
-  UploadProgressRenderProps,
-  UploadStatusProps,
-  UploadStatusRenderProps,
-  UploadErrorProps,
-  UploadErrorRenderProps,
-  UploadCancelProps,
-  UploadRetryProps,
-  UploadResetProps,
-  UploadStartAllProps,
-  UploadClearCompletedProps,
-} from "./components/upload-primitives";
-
-// ============ UPLOAD COMPONENTS (LEGACY) ============
-export type {
-  SimpleUploadListItemProps,
-  UploadListProps,
-  UploadListRenderProps,
-} from "./components/upload-list";
-export { SimpleUploadListItem, UploadList } from "./components/upload-list";
-export type {
-  SimpleUploadZoneProps,
-  UploadZoneProps,
-  UploadZoneRenderProps,
-} from "./components/upload-zone";
-export { SimpleUploadZone, UploadZone } from "./components/upload-zone";
-
-// ============ 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";
-export {
-  FlowManagerProvider,
-  useFlowManagerContext,
-} from "./contexts/flow-manager-context";
-
-// ============ EVENT UTILITIES ============
-export { isFlowEvent, isUploadEvent } from "./hooks/event-utils";
 export type {
   UseUploadistaClientOptions,
   UseUploadistaClientReturn,

package/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./src/__tests__/setup.ts"],
+    include: ["src/**/*.test.{ts,tsx}"],
+    coverage: {
+      provider: "v8",
+      reporter: ["text", "json", "html"],
+      include: ["src/**/*.{ts,tsx}"],
+      exclude: ["src/__tests__/**", "src/**/*.test.{ts,tsx}"],
+    },
+  },
+});

package/dist/flow-upload-list-BJSCZ4Ty.mjs

@@ -1,2 +0,0 @@
-import{i as e,n as t,r as n,t as r,u as i}from"./use-upload-BgaJmdwF.mjs";import{createContext as a,useCallback as o,useContext as s}from"react";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=a(null);function f(){let e=s(d);if(!e)throw Error(`useFlowContext must be used within a <Flow> component. Wrap your component tree with <Flow flowId="..." storageId="...">`);return e}const p=a(null);function m(){let e=s(p);if(!e)throw Error(`useFlowInputContext must be used within a <Flow.Input> component. Wrap your component with <Flow.Input nodeId="...">`);return e}function h({flowId:t,storageId:n,outputNodeId:r,metadata:i,onSuccess:a,onError:o,onProgress:s,onFlowComplete:c,onAbort:u,children:f}){let p=e({flowConfig:{flowId:t,storageId:n,outputNodeId:r,metadata:i},onSuccess:a,onError:o,onProgress:s,onFlowComplete:c,onAbort:u}),m={state:p.state,inputMetadata:p.inputMetadata,inputs:p.inputs,inputStates:p.inputStates,setInput:p.setInput,execute:p.execute,upload:p.upload,abort:p.abort,pause:p.pause,reset:p.reset,isUploading:p.isUploading,isUploadingFile:p.isUploadingFile,isProcessing:p.isProcessing,isDiscoveringInputs:p.isDiscoveringInputs};return l(d.Provider,{value:m,children:f})}function g({accept:e,maxFileSize:t,children:n}){let r=f(),a=i({onFilesReceived:e=>{let t=e[0];t&&r.upload(t)},accept:e?e.split(`,`).map(e=>e.trim()):void 0,maxFileSize:t,multiple:!1});return l(c,{children:n({isDragging:a.state.isDragging,isOver:a.state.isOver,progress:r.state.progress,status:r.state.status,getRootProps:()=>a.dragHandlers,getInputProps:()=>a.inputProps,openFilePicker:a.openFilePicker,dragDropState:a.state})})}function _({children:e}){let t=f();return l(c,{children:e({inputs:t.inputMetadata??[],isLoading:t.isDiscoveringInputs})})}function v({nodeId:e,children:t}){let n=f(),r=n.inputMetadata?.find(t=>t.nodeId===e);if(!r)return null;let i={nodeId:e,metadata:r,value:n.inputs[e],setValue:t=>n.setInput(e,t),state:n.inputStates.get(e)};return l(p.Provider,{value:i,children:typeof t==`function`?t(i):t})}function y({accept:e,maxFileSize:t,children:n}){let r=m(),a=i({onFilesReceived:e=>{let t=e[0];t&&r.setValue(t)},accept:e?e.split(`,`).map(e=>e.trim()):void 0,maxFileSize:t,multiple:!1});return l(c,{children:n({isDragging:a.state.isDragging,isOver:a.state.isOver,value:r.value,progress:r.state?.progress??0,status:r.state?.status??`idle`,getRootProps:()=>a.dragHandlers,getInputProps:()=>a.inputProps,openFilePicker:a.openFilePicker,dragDropState:a.state})})}function b({placeholder:e=`https://example.com/file`,...t}){let n=m();return l(`input`,{type:`url`,value:typeof n.value==`string`?n.value:``,onChange:e=>n.setValue(e.target.value),placeholder:e,...t})}function x({children:e}){let t=m(),n=t.value instanceof File,r=typeof t.value==`string`&&t.value.length>0;return l(c,{children:e({value:t.value,isFile:n,isUrl:r,fileName:n?t.value.name:null,fileSize:n?t.value.size:null,clear:()=>t.setValue(void 0)})})}function S({children:e}){let t=f();return l(c,{children:e({progress:t.state.progress,bytesUploaded:t.state.bytesUploaded,totalBytes:t.state.totalBytes,status:t.state.status})})}function C({children:e}){let t=f();return l(c,{children:e({status:t.state.status,currentNodeName:t.state.currentNodeName,currentNodeType:t.state.currentNodeType,error:t.state.error,jobId:t.state.jobId,flowStarted:t.state.flowStarted,flowOutputs:t.state.flowOutputs})})}function w({children:e}){let t=f();return l(c,{children:e({error:t.state.error,hasError:t.state.status===`error`,message:t.state.error?.message??null,reset:t.reset})})}function T({children:e,disabled:t,...n}){let r=f();return l(`button`,{type:`button`,onClick:o(()=>{r.execute()},[r]),disabled:t||r.isUploading,...n,children:e})}function E({children:e,...t}){let n=f();return l(`button`,{type:`button`,onClick:o(()=>{n.abort()},[n]),...t,children:e})}function D({children:e,...t}){let n=f();return l(`button`,{type:`button`,onClick:o(()=>{n.reset()},[n]),...t,children:e})}const O=Object.assign(h,{DropZone:g,Inputs:_,Input:Object.assign(v,{DropZone:y,UrlField:b,Preview:x}),Progress:S,Status:C,Error:w,Submit:T,Cancel:E,Reset:D});function k({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 l(c,{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 A({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`}},o=e=>{switch(e){case`idle`:return`⏳`;case`uploading`:return`📤`;case`success`:return`✅`;case`error`:return`❌`;case`aborted`:return`⏹️`;default:return`❓`}},s=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 u(`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:[u(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:`8px`},children:[u(`div`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,flex:1},children:[l(`span`,{style:{fontSize:`16px`},children:o(e.state.status)}),l(`span`,{style:{fontWeight:`500`,flex:1},children:e.file instanceof File?e.file.name:`File`})]}),l(`span`,{style:{fontSize:`12px`,color:a(e.state.status),fontWeight:`500`,textTransform:`uppercase`},children:e.state.status})]}),e.state.status===`uploading`&&u(`div`,{style:{marginBottom:`8px`},children:[u(`div`,{style:{display:`flex`,justifyContent:`space-between`,alignItems:`center`,marginBottom:`4px`},children:[u(`span`,{style:{fontSize:`12px`,color:`#666`},children:[e.state.progress,`%`]}),i&&e.state.totalBytes&&u(`span`,{style:{fontSize:`12px`,color:`#666`},children:[s(e.state.bytesUploaded),` /`,` `,s(e.state.totalBytes)]})]}),l(`div`,{style:{width:`100%`,height:`6px`,backgroundColor:`#e0e0e0`,borderRadius:`3px`,overflow:`hidden`},children:l(`div`,{style:{width:`${e.state.progress}%`,height:`100%`,backgroundColor:`#007bff`,transition:`width 0.2s ease`}})})]}),i&&u(`div`,{style:{fontSize:`12px`,color:`#666`,marginBottom:`8px`},children:[e.state.totalBytes&&l(`span`,{children:s(e.state.totalBytes)}),e.state.status===`uploading`&&e.state.progress>0&&u(`span`,{children:[` • Progress: `,e.state.progress,`%`]}),e.state.status===`error`&&e.state.error&&l(`div`,{style:{color:`#dc3545`,marginTop:`4px`},children:e.state.error.message})]}),u(`div`,{style:{display:`flex`,gap:`8px`,flexWrap:`wrap`},children:[e.state.status===`idle`&&u(c,{children:[l(`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`}),l(`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`&&l(`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`&&u(c,{children:[l(`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`}),l(`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`&&l(`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`&&u(c,{children:[l(`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`}),l(`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 j({children:e,multiple:n=!0,multiUploadOptions:a={},uploadOptions:s={},onUploadStart:u,onValidationError:d,...f}){let p=r(s),m=t(a),h=o(e=>{let t=[];if(!n&&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},[n,f.accept]),g=e=>{u?.(e),n&&m?(m.addFiles(e),setTimeout(()=>m.startAll(),0)):!n&&p&&e.length>0&&e[0]&&p.upload(e[0])},_=o(e=>{console.error(`Upload zone validation errors:`,e),d?.(e)},[d]),v=i({...f,multiple:n,validator:h,onFilesReceived:g,onValidationError:_}),y=v.state.isDragging||v.state.isOver,b=n?m?.state.isUploading??!1:p?.isUploading??!1;return l(c,{children:e({dragDrop:v,upload:p,multiUpload:m,openFilePicker:v.openFilePicker,isActive:y,isProcessing:b})})}function M({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?l(j,{...a,children:i}):l(j,{...a,children:({dragDrop:n,upload:i,multiUpload:a,openFilePicker:s,isActive:c,isProcessing:d})=>u(`button`,{type:`button`,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&s()},onKeyUp:e=>{(e.key===`Enter`||e.key===` `)&&s()},...n.dragHandlers,onClick:s,className:`upload-zone ${c?`upload-zone--active`:``} ${d?`upload-zone--processing`:``} ${e}`,style:{border:c?`2px dashed #007bff`:`2px dashed #ccc`,borderRadius:`8px`,padding:`2rem`,textAlign:`center`,cursor:`pointer`,backgroundColor:c?`#f8f9fa`:`transparent`,transition:`all 0.2s ease`,minHeight:`120px`,display:`flex`,flexDirection:`column`,alignItems:`center`,justifyContent:`center`,...t},children:[n.state.isDragging?l(`p`,{style:{margin:0,fontSize:`16px`,color:`#007bff`},children:o.dragging}):d?u(`div`,{style:{textAlign:`center`},children:[l(`p`,{style:{margin:`0 0 10px 0`,fontSize:`14px`},children:o.uploading}),i&&u(`div`,{children:[l(`progress`,{value:i.state.progress,max:100,style:{width:`200px`,height:`8px`}}),u(`p`,{style:{margin:`5px 0 0 0`,fontSize:`12px`,color:`#666`},children:[i.state.progress,`%`]})]}),a&&u(`div`,{children:[l(`progress`,{value:a.state.progress,max:100,style:{width:`200px`,height:`8px`}}),u(`p`,{style:{margin:`5px 0 0 0`,fontSize:`12px`,color:`#666`},children:[a.state.progress,`% (`,a.state.uploading,` `,`uploading, `,a.state.successful,` completed)`]})]})]}):l(`p`,{style:{margin:0,fontSize:`16px`,color:`#666`},children:o.idle}),n.state.errors.length>0&&u(`div`,{style:{marginTop:`10px`,padding:`8px 12px`,backgroundColor:`#f8d7da`,border:`1px solid #f5c6cb`,borderRadius:`4px`,maxWidth:`100%`,...r},children:[l(`p`,{style:{margin:`0 0 5px 0`,fontSize:`12px`,fontWeight:`bold`,color:`#721c24`},children:`Validation Errors:`}),n.state.errors.map((e,t)=>u(`p`,{style:{color:`#721c24`,fontSize:`11px`,margin:`2px 0`,lineHeight:`1.3`},children:[`• `,e]},t))]}),l(`input`,{...n.inputProps})]})})}function N({flowConfig:e,options:t,children:r}){let i=n({...t,flowConfig:e});return l(c,{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 P({item:e,onAbort:t,onRetry:n,onRemove:r}){return u(`div`,{style:{display:`flex`,alignItems:`center`,gap:`12px`,padding:`8px`,borderBottom:`1px solid #eee`},children:[l(`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`○`}})()}),u(`div`,{style:{flex:1,minWidth:0},children:[l(`div`,{style:{fontSize:`14px`,fontWeight:500,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:e.file instanceof File?e.file.name:`Upload`}),e.status===`uploading`&&u(`div`,{style:{marginTop:`4px`},children:[l(`progress`,{value:e.progress,max:100,style:{width:`100%`,height:`4px`}}),u(`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`&&l(`div`,{style:{fontSize:`12px`,color:`red`,marginTop:`2px`},children:e.error?.message||`Upload failed`}),e.status===`success`&&l(`div`,{style:{fontSize:`12px`,color:`green`,marginTop:`2px`},children:`Upload complete`})]}),u(`div`,{style:{display:`flex`,gap:`8px`},children:[e.status===`uploading`&&l(`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`&&l(`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`)&&l(`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 l(N,{flowConfig:e,options:t,children:({items:e,addFiles:t,startUpload:a,abortUpload:o,retryUpload:s,removeFile:c,totalProgress:d})=>u(`div`,{className:n,children:[r&&l(`div`,{style:{marginBottom:`16px`},children:l(`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&&u(`div`,{children:[u(`div`,{style:{marginBottom:`8px`,fontSize:`14px`,color:`#666`},children:[`Total Progress: `,d,`%`]}),l(`div`,{style:{border:`1px solid #eee`,borderRadius:`8px`,overflow:`hidden`},children:e.map(e=>l(P,{item:e,onAbort:()=>o(e.id),onRetry:()=>s(e.id),onRemove:()=>c(e.id)},e.id))})]})]})})}export{j as a,O as c,M as i,f as l,F as n,A as o,P as r,k as s,N as t,m as u};
-//# sourceMappingURL=flow-upload-list-BJSCZ4Ty.mjs.map