@uploadista/react 0.0.20-beta.9 → 0.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +548 -4
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +2 -1
- package/dist/index.mjs.map +1 -0
- package/dist/use-uploadista-events-CtDXJYrR.d.mts.map +1 -1
- package/package.json +5 -5
- package/src/components/upload-primitives.tsx +876 -0
- package/src/index.ts +30 -1
package/dist/index.d.mts
CHANGED
|
@@ -3,9 +3,553 @@ import { A as FlowInputPreviewProps, B as FlowStatusProps, C as FlowDropZoneProp
|
|
|
3
3
|
import { _ as UseFlowEventsOptions, a as UseUploadMetricsReturn, b as isUploadEvent, c as UploadFileEventData, d as UploadValidationSuccessEventData, f as UploadValidationWarningEventData, g as useMultiFlowUpload, h as UseMultiFlowUploadReturn, i as UseUploadMetricsOptions, l as UploadProgressEventData, m as useUploadEvents, n as FileUploadMetrics, o as useUploadMetrics, p as UseUploadEventsOptions, r as UploadMetrics, s as UploadFailedEventData, t as useUploadistaEvents, u as UploadValidationFailedEventData, v as useFlowEvents, y as isFlowEvent } from "./use-uploadista-events-CtDXJYrR.mjs";
|
|
4
4
|
import { ReactNode } from "react";
|
|
5
5
|
import { FlowManager, FlowManagerCallbacks } from "@uploadista/client-core";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
6
|
+
import { UploadFile } from "@uploadista/core/types";
|
|
7
|
+
import * as react_jsx_runtime12 from "react/jsx-runtime";
|
|
8
|
+
import { BrowserUploadInput, FlowUploadOptions } from "@uploadista/client-browser";
|
|
8
9
|
|
|
10
|
+
//#region src/components/upload-primitives.d.ts
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Context value provided by the Upload component root.
|
|
14
|
+
* Contains all upload state and actions.
|
|
15
|
+
*/
|
|
16
|
+
interface UploadContextValue {
|
|
17
|
+
/** Whether in multi-file mode */
|
|
18
|
+
mode: "single" | "multi";
|
|
19
|
+
/** Current multi-upload state (aggregate) */
|
|
20
|
+
state: MultiUploadState;
|
|
21
|
+
/** All upload items */
|
|
22
|
+
items: UploadItem$1[];
|
|
23
|
+
/** Whether auto-start is enabled */
|
|
24
|
+
autoStart: boolean;
|
|
25
|
+
/** Add files to the upload queue */
|
|
26
|
+
addFiles: (files: BrowserUploadInput[]) => void;
|
|
27
|
+
/** Remove an item from the queue */
|
|
28
|
+
removeItem: (id: string) => void;
|
|
29
|
+
/** Start all pending uploads */
|
|
30
|
+
startAll: () => void;
|
|
31
|
+
/** Abort a specific upload by ID */
|
|
32
|
+
abortUpload: (id: string) => void;
|
|
33
|
+
/** Abort all active uploads */
|
|
34
|
+
abortAll: () => void;
|
|
35
|
+
/** Retry a specific failed upload by ID */
|
|
36
|
+
retryUpload: (id: string) => void;
|
|
37
|
+
/** Retry all failed uploads */
|
|
38
|
+
retryFailed: () => void;
|
|
39
|
+
/** Clear all completed uploads */
|
|
40
|
+
clearCompleted: () => void;
|
|
41
|
+
/** Clear all items and reset state */
|
|
42
|
+
clearAll: () => void;
|
|
43
|
+
/** Internal handler for files received from drop zone */
|
|
44
|
+
handleFilesReceived: (files: File[]) => void;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Hook to access upload context from within an Upload component.
|
|
48
|
+
* @throws Error if used outside of an Upload component
|
|
49
|
+
*/
|
|
50
|
+
declare function useUploadContext(): UploadContextValue;
|
|
51
|
+
/**
|
|
52
|
+
* Context value for a specific upload item within an Upload.
|
|
53
|
+
*/
|
|
54
|
+
interface UploadItemContextValue {
|
|
55
|
+
/** Item ID */
|
|
56
|
+
id: string;
|
|
57
|
+
/** The file being uploaded */
|
|
58
|
+
file: BrowserUploadInput;
|
|
59
|
+
/** Current upload state */
|
|
60
|
+
state: UploadState;
|
|
61
|
+
/** Abort this upload */
|
|
62
|
+
abort: () => void;
|
|
63
|
+
/** Retry this upload */
|
|
64
|
+
retry: () => void;
|
|
65
|
+
/** Remove this item from the queue */
|
|
66
|
+
remove: () => void;
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Hook to access upload item context from within an Upload.Item component.
|
|
70
|
+
* @throws Error if used outside of an Upload.Item component
|
|
71
|
+
*/
|
|
72
|
+
declare function useUploadItemContext(): UploadItemContextValue;
|
|
73
|
+
/**
|
|
74
|
+
* Props for the Upload root component.
|
|
75
|
+
*/
|
|
76
|
+
interface UploadProps {
|
|
77
|
+
/** Whether to allow multiple file uploads (default: false) */
|
|
78
|
+
multiple?: boolean;
|
|
79
|
+
/** Maximum concurrent uploads (default: 3, only used in multi mode) */
|
|
80
|
+
maxConcurrent?: number;
|
|
81
|
+
/** Whether to auto-start uploads when files are received (default: true) */
|
|
82
|
+
autoStart?: boolean;
|
|
83
|
+
/** Metadata to attach to uploads */
|
|
84
|
+
metadata?: Record<string, string>;
|
|
85
|
+
/** Called when a single file upload succeeds (single mode) */
|
|
86
|
+
onSuccess?: (result: UploadFile) => void;
|
|
87
|
+
/** Called when an upload fails */
|
|
88
|
+
onError?: (error: Error, item?: UploadItem$1) => void;
|
|
89
|
+
/** Called when all uploads complete (multi mode) */
|
|
90
|
+
onComplete?: (results: {
|
|
91
|
+
successful: UploadItem$1[];
|
|
92
|
+
failed: UploadItem$1[];
|
|
93
|
+
total: number;
|
|
94
|
+
}) => void;
|
|
95
|
+
/** Called when an individual upload starts */
|
|
96
|
+
onUploadStart?: (item: UploadItem$1) => void;
|
|
97
|
+
/** Called on upload progress */
|
|
98
|
+
onProgress?: (item: UploadItem$1, progress: number, bytesUploaded: number, totalBytes: number | null) => void;
|
|
99
|
+
/** Children to render */
|
|
100
|
+
children: ReactNode;
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Root component for file uploads.
|
|
104
|
+
* Provides context for all Upload sub-components.
|
|
105
|
+
* Supports both single-file and multi-file modes via the `multiple` prop.
|
|
106
|
+
*
|
|
107
|
+
* @example Single file upload
|
|
108
|
+
* ```tsx
|
|
109
|
+
* <Upload onSuccess={handleSuccess}>
|
|
110
|
+
* <Upload.DropZone accept="image/*">
|
|
111
|
+
* {({ isDragging, getRootProps, getInputProps }) => (
|
|
112
|
+
* <div {...getRootProps()}>
|
|
113
|
+
* <input {...getInputProps()} />
|
|
114
|
+
* {isDragging ? "Drop here" : "Drag or click"}
|
|
115
|
+
* </div>
|
|
116
|
+
* )}
|
|
117
|
+
* </Upload.DropZone>
|
|
118
|
+
* <Upload.Progress>
|
|
119
|
+
* {({ progress }) => <progress value={progress} max={100} />}
|
|
120
|
+
* </Upload.Progress>
|
|
121
|
+
* </Upload>
|
|
122
|
+
* ```
|
|
123
|
+
*
|
|
124
|
+
* @example Multi-file upload
|
|
125
|
+
* ```tsx
|
|
126
|
+
* <Upload multiple maxConcurrent={3} onComplete={handleComplete}>
|
|
127
|
+
* <Upload.DropZone>
|
|
128
|
+
* {(props) => ...}
|
|
129
|
+
* </Upload.DropZone>
|
|
130
|
+
* <Upload.Items>
|
|
131
|
+
* {({ items }) => items.map(item => (
|
|
132
|
+
* <Upload.Item key={item.id} id={item.id}>
|
|
133
|
+
* {({ file, state, abort, remove }) => (
|
|
134
|
+
* <div>{file.name}: {state.progress}%</div>
|
|
135
|
+
* )}
|
|
136
|
+
* </Upload.Item>
|
|
137
|
+
* ))}
|
|
138
|
+
* </Upload.Items>
|
|
139
|
+
* <Upload.StartAll>Upload All</Upload.StartAll>
|
|
140
|
+
* </Upload>
|
|
141
|
+
* ```
|
|
142
|
+
*/
|
|
143
|
+
declare function UploadRoot({
|
|
144
|
+
multiple,
|
|
145
|
+
maxConcurrent,
|
|
146
|
+
autoStart,
|
|
147
|
+
metadata,
|
|
148
|
+
onSuccess,
|
|
149
|
+
onError,
|
|
150
|
+
onComplete,
|
|
151
|
+
onUploadStart,
|
|
152
|
+
onProgress,
|
|
153
|
+
children
|
|
154
|
+
}: UploadProps): react_jsx_runtime12.JSX.Element;
|
|
155
|
+
/**
|
|
156
|
+
* Render props for Upload.DropZone component.
|
|
157
|
+
*/
|
|
158
|
+
interface UploadDropZoneRenderProps {
|
|
159
|
+
/** Whether files are being dragged over */
|
|
160
|
+
isDragging: boolean;
|
|
161
|
+
/** Whether drag is over the zone */
|
|
162
|
+
isOver: boolean;
|
|
163
|
+
/** Validation errors */
|
|
164
|
+
errors: string[];
|
|
165
|
+
/** Props to spread on the drop zone container */
|
|
166
|
+
getRootProps: () => UseDragDropReturn["dragHandlers"];
|
|
167
|
+
/** Props to spread on the hidden file input */
|
|
168
|
+
getInputProps: () => UseDragDropReturn["inputProps"];
|
|
169
|
+
/** Open file picker programmatically */
|
|
170
|
+
openFilePicker: () => void;
|
|
171
|
+
/** Current drag-drop state */
|
|
172
|
+
dragDropState: DragDropState;
|
|
173
|
+
}
|
|
174
|
+
/**
|
|
175
|
+
* Props for Upload.DropZone component.
|
|
176
|
+
*/
|
|
177
|
+
interface UploadDropZoneProps {
|
|
178
|
+
/** Accepted file types (e.g., "image/*", ".pdf") */
|
|
179
|
+
accept?: string;
|
|
180
|
+
/** Maximum file size in bytes */
|
|
181
|
+
maxFileSize?: number;
|
|
182
|
+
/** Maximum number of files (only in multi mode) */
|
|
183
|
+
maxFiles?: number;
|
|
184
|
+
/** Render function receiving drop zone state */
|
|
185
|
+
children: (props: UploadDropZoneRenderProps) => ReactNode;
|
|
186
|
+
}
|
|
187
|
+
/**
|
|
188
|
+
* Drop zone for file uploads within an Upload component.
|
|
189
|
+
* Handles drag-and-drop and click-to-select file selection.
|
|
190
|
+
*
|
|
191
|
+
* @example
|
|
192
|
+
* ```tsx
|
|
193
|
+
* <Upload.DropZone accept="image/*">
|
|
194
|
+
* {({ isDragging, getRootProps, getInputProps }) => (
|
|
195
|
+
* <div {...getRootProps()}>
|
|
196
|
+
* <input {...getInputProps()} />
|
|
197
|
+
* {isDragging ? "Drop here" : "Click or drag"}
|
|
198
|
+
* </div>
|
|
199
|
+
* )}
|
|
200
|
+
* </Upload.DropZone>
|
|
201
|
+
* ```
|
|
202
|
+
*/
|
|
203
|
+
declare function UploadDropZone({
|
|
204
|
+
accept,
|
|
205
|
+
maxFileSize,
|
|
206
|
+
maxFiles,
|
|
207
|
+
children
|
|
208
|
+
}: UploadDropZoneProps): react_jsx_runtime12.JSX.Element;
|
|
209
|
+
/**
|
|
210
|
+
* Render props for Upload.Items component.
|
|
211
|
+
*/
|
|
212
|
+
interface UploadItemsRenderProps {
|
|
213
|
+
/** All upload items */
|
|
214
|
+
items: UploadItem$1[];
|
|
215
|
+
/** Whether there are any items */
|
|
216
|
+
hasItems: boolean;
|
|
217
|
+
/** Whether items array is empty */
|
|
218
|
+
isEmpty: boolean;
|
|
219
|
+
}
|
|
220
|
+
/**
|
|
221
|
+
* Props for Upload.Items component.
|
|
222
|
+
*/
|
|
223
|
+
interface UploadItemsProps {
|
|
224
|
+
/** Render function receiving items */
|
|
225
|
+
children: (props: UploadItemsRenderProps) => ReactNode;
|
|
226
|
+
}
|
|
227
|
+
/**
|
|
228
|
+
* Renders the list of upload items via render props.
|
|
229
|
+
*
|
|
230
|
+
* @example
|
|
231
|
+
* ```tsx
|
|
232
|
+
* <Upload.Items>
|
|
233
|
+
* {({ items, isEmpty }) => (
|
|
234
|
+
* isEmpty ? <p>No files</p> : (
|
|
235
|
+
* items.map(item => (
|
|
236
|
+
* <Upload.Item key={item.id} id={item.id}>
|
|
237
|
+
* {(props) => ...}
|
|
238
|
+
* </Upload.Item>
|
|
239
|
+
* ))
|
|
240
|
+
* )
|
|
241
|
+
* )}
|
|
242
|
+
* </Upload.Items>
|
|
243
|
+
* ```
|
|
244
|
+
*/
|
|
245
|
+
declare function UploadItems({
|
|
246
|
+
children
|
|
247
|
+
}: UploadItemsProps): react_jsx_runtime12.JSX.Element;
|
|
248
|
+
/**
|
|
249
|
+
* Props for Upload.Item component.
|
|
250
|
+
*/
|
|
251
|
+
interface UploadItemProps {
|
|
252
|
+
/** Item ID */
|
|
253
|
+
id: string;
|
|
254
|
+
/** Children (can be render function or regular children) */
|
|
255
|
+
children: ReactNode | ((props: UploadItemContextValue) => ReactNode);
|
|
256
|
+
}
|
|
257
|
+
/**
|
|
258
|
+
* Scoped context provider for a specific upload item.
|
|
259
|
+
* Children can access item-specific state via useUploadItemContext().
|
|
260
|
+
*
|
|
261
|
+
* @example
|
|
262
|
+
* ```tsx
|
|
263
|
+
* <Upload.Item id={item.id}>
|
|
264
|
+
* {({ file, state, abort, remove }) => (
|
|
265
|
+
* <div>
|
|
266
|
+
* <span>{file.name}</span>
|
|
267
|
+
* <progress value={state.progress} max={100} />
|
|
268
|
+
* <button onClick={abort}>Cancel</button>
|
|
269
|
+
* <button onClick={remove}>Remove</button>
|
|
270
|
+
* </div>
|
|
271
|
+
* )}
|
|
272
|
+
* </Upload.Item>
|
|
273
|
+
* ```
|
|
274
|
+
*/
|
|
275
|
+
declare function UploadItem$1({
|
|
276
|
+
id,
|
|
277
|
+
children
|
|
278
|
+
}: UploadItemProps): react_jsx_runtime12.JSX.Element | null;
|
|
279
|
+
/**
|
|
280
|
+
* Render props for Upload.Progress component.
|
|
281
|
+
*/
|
|
282
|
+
interface UploadProgressRenderProps {
|
|
283
|
+
/** Progress percentage (0-100) */
|
|
284
|
+
progress: number;
|
|
285
|
+
/** Bytes uploaded so far */
|
|
286
|
+
bytesUploaded: number;
|
|
287
|
+
/** Total bytes to upload */
|
|
288
|
+
totalBytes: number;
|
|
289
|
+
/** Whether any uploads are active */
|
|
290
|
+
isUploading: boolean;
|
|
291
|
+
}
|
|
292
|
+
/**
|
|
293
|
+
* Props for Upload.Progress component.
|
|
294
|
+
*/
|
|
295
|
+
interface UploadProgressProps {
|
|
296
|
+
/** Render function receiving progress state */
|
|
297
|
+
children: (props: UploadProgressRenderProps) => ReactNode;
|
|
298
|
+
}
|
|
299
|
+
/**
|
|
300
|
+
* Progress display component within an Upload.
|
|
301
|
+
*
|
|
302
|
+
* @example
|
|
303
|
+
* ```tsx
|
|
304
|
+
* <Upload.Progress>
|
|
305
|
+
* {({ progress, isUploading }) => (
|
|
306
|
+
* isUploading && <progress value={progress} max={100} />
|
|
307
|
+
* )}
|
|
308
|
+
* </Upload.Progress>
|
|
309
|
+
* ```
|
|
310
|
+
*/
|
|
311
|
+
declare function UploadProgress({
|
|
312
|
+
children
|
|
313
|
+
}: UploadProgressProps): react_jsx_runtime12.JSX.Element;
|
|
314
|
+
/**
|
|
315
|
+
* Render props for Upload.Status component.
|
|
316
|
+
*/
|
|
317
|
+
interface UploadStatusRenderProps {
|
|
318
|
+
/** Overall status */
|
|
319
|
+
status: "idle" | "uploading" | "success" | "error";
|
|
320
|
+
/** Whether idle (no uploads active or completed) */
|
|
321
|
+
isIdle: boolean;
|
|
322
|
+
/** Whether uploading */
|
|
323
|
+
isUploading: boolean;
|
|
324
|
+
/** Whether all uploads succeeded */
|
|
325
|
+
isSuccess: boolean;
|
|
326
|
+
/** Whether any upload failed */
|
|
327
|
+
isError: boolean;
|
|
328
|
+
/** Whether all uploads completed (success or failure) */
|
|
329
|
+
isComplete: boolean;
|
|
330
|
+
/** Number of total items */
|
|
331
|
+
total: number;
|
|
332
|
+
/** Number of successful uploads */
|
|
333
|
+
successful: number;
|
|
334
|
+
/** Number of failed uploads */
|
|
335
|
+
failed: number;
|
|
336
|
+
/** Number of currently uploading */
|
|
337
|
+
uploading: number;
|
|
338
|
+
}
|
|
339
|
+
/**
|
|
340
|
+
* Props for Upload.Status component.
|
|
341
|
+
*/
|
|
342
|
+
interface UploadStatusProps {
|
|
343
|
+
/** Render function receiving status state */
|
|
344
|
+
children: (props: UploadStatusRenderProps) => ReactNode;
|
|
345
|
+
}
|
|
346
|
+
/**
|
|
347
|
+
* Status display component within an Upload.
|
|
348
|
+
*
|
|
349
|
+
* @example
|
|
350
|
+
* ```tsx
|
|
351
|
+
* <Upload.Status>
|
|
352
|
+
* {({ status, total, successful, failed }) => (
|
|
353
|
+
* <div>
|
|
354
|
+
* Status: {status}
|
|
355
|
+
* ({successful}/{total} uploaded, {failed} failed)
|
|
356
|
+
* </div>
|
|
357
|
+
* )}
|
|
358
|
+
* </Upload.Status>
|
|
359
|
+
* ```
|
|
360
|
+
*/
|
|
361
|
+
declare function UploadStatus$1({
|
|
362
|
+
children
|
|
363
|
+
}: UploadStatusProps): react_jsx_runtime12.JSX.Element;
|
|
364
|
+
/**
|
|
365
|
+
* Render props for Upload.Error component.
|
|
366
|
+
*/
|
|
367
|
+
interface UploadErrorRenderProps {
|
|
368
|
+
/** Whether there are any errors */
|
|
369
|
+
hasError: boolean;
|
|
370
|
+
/** Number of failed uploads */
|
|
371
|
+
failedCount: number;
|
|
372
|
+
/** Failed items */
|
|
373
|
+
failedItems: UploadItem$1[];
|
|
374
|
+
/** Reset/clear all errors */
|
|
375
|
+
reset: () => void;
|
|
376
|
+
}
|
|
377
|
+
/**
|
|
378
|
+
* Props for Upload.Error component.
|
|
379
|
+
*/
|
|
380
|
+
interface UploadErrorProps {
|
|
381
|
+
/** Render function receiving error state */
|
|
382
|
+
children: (props: UploadErrorRenderProps) => ReactNode;
|
|
383
|
+
}
|
|
384
|
+
/**
|
|
385
|
+
* Error display component within an Upload.
|
|
386
|
+
*
|
|
387
|
+
* @example
|
|
388
|
+
* ```tsx
|
|
389
|
+
* <Upload.Error>
|
|
390
|
+
* {({ hasError, failedItems, reset }) => (
|
|
391
|
+
* hasError && (
|
|
392
|
+
* <div>
|
|
393
|
+
* {failedItems.map(item => (
|
|
394
|
+
* <p key={item.id}>{item.file.name}: {item.state.error?.message}</p>
|
|
395
|
+
* ))}
|
|
396
|
+
* <button onClick={reset}>Clear</button>
|
|
397
|
+
* </div>
|
|
398
|
+
* )
|
|
399
|
+
* )}
|
|
400
|
+
* </Upload.Error>
|
|
401
|
+
* ```
|
|
402
|
+
*/
|
|
403
|
+
declare function UploadError({
|
|
404
|
+
children
|
|
405
|
+
}: UploadErrorProps): react_jsx_runtime12.JSX.Element;
|
|
406
|
+
/**
|
|
407
|
+
* Props for Upload.Cancel component.
|
|
408
|
+
*/
|
|
409
|
+
interface UploadCancelProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
|
|
410
|
+
/** Button content */
|
|
411
|
+
children: ReactNode;
|
|
412
|
+
}
|
|
413
|
+
/**
|
|
414
|
+
* Cancel button that aborts all active uploads.
|
|
415
|
+
* Automatically disabled when no uploads are active.
|
|
416
|
+
*/
|
|
417
|
+
declare function UploadCancel({
|
|
418
|
+
children,
|
|
419
|
+
disabled,
|
|
420
|
+
...props
|
|
421
|
+
}: UploadCancelProps): react_jsx_runtime12.JSX.Element;
|
|
422
|
+
/**
|
|
423
|
+
* Props for Upload.Retry component.
|
|
424
|
+
*/
|
|
425
|
+
interface UploadRetryProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
|
|
426
|
+
/** Button content */
|
|
427
|
+
children: ReactNode;
|
|
428
|
+
}
|
|
429
|
+
/**
|
|
430
|
+
* Retry button that retries all failed uploads.
|
|
431
|
+
* Automatically disabled when no failed uploads exist.
|
|
432
|
+
*/
|
|
433
|
+
declare function UploadRetry({
|
|
434
|
+
children,
|
|
435
|
+
disabled,
|
|
436
|
+
...props
|
|
437
|
+
}: UploadRetryProps): react_jsx_runtime12.JSX.Element;
|
|
438
|
+
/**
|
|
439
|
+
* Props for Upload.Reset component.
|
|
440
|
+
*/
|
|
441
|
+
interface UploadResetProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
|
|
442
|
+
/** Button content */
|
|
443
|
+
children: ReactNode;
|
|
444
|
+
}
|
|
445
|
+
/**
|
|
446
|
+
* Reset button that clears all items and resets state.
|
|
447
|
+
*/
|
|
448
|
+
declare function UploadReset({
|
|
449
|
+
children,
|
|
450
|
+
...props
|
|
451
|
+
}: UploadResetProps): react_jsx_runtime12.JSX.Element;
|
|
452
|
+
/**
|
|
453
|
+
* Props for Upload.StartAll component.
|
|
454
|
+
*/
|
|
455
|
+
interface UploadStartAllProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
|
|
456
|
+
/** Button content */
|
|
457
|
+
children: ReactNode;
|
|
458
|
+
}
|
|
459
|
+
/**
|
|
460
|
+
* Start all button that begins all queued uploads.
|
|
461
|
+
* Primarily useful when autoStart is disabled.
|
|
462
|
+
* Automatically disabled when uploads are already active.
|
|
463
|
+
*/
|
|
464
|
+
declare function UploadStartAll({
|
|
465
|
+
children,
|
|
466
|
+
disabled,
|
|
467
|
+
...props
|
|
468
|
+
}: UploadStartAllProps): react_jsx_runtime12.JSX.Element;
|
|
469
|
+
/**
|
|
470
|
+
* Props for Upload.ClearCompleted component.
|
|
471
|
+
*/
|
|
472
|
+
interface UploadClearCompletedProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
|
|
473
|
+
/** Button content */
|
|
474
|
+
children: ReactNode;
|
|
475
|
+
}
|
|
476
|
+
/**
|
|
477
|
+
* Clear completed button that removes all finished uploads from the list.
|
|
478
|
+
* Automatically disabled when no completed uploads exist.
|
|
479
|
+
*/
|
|
480
|
+
declare function UploadClearCompleted({
|
|
481
|
+
children,
|
|
482
|
+
disabled,
|
|
483
|
+
...props
|
|
484
|
+
}: UploadClearCompletedProps): react_jsx_runtime12.JSX.Element;
|
|
485
|
+
/**
|
|
486
|
+
* Upload compound component for file uploads.
|
|
487
|
+
*
|
|
488
|
+
* Provides a composable, headless API for building upload interfaces.
|
|
489
|
+
* Supports both single-file and multi-file modes via the `multiple` prop.
|
|
490
|
+
* All sub-components use render props for complete UI control.
|
|
491
|
+
*
|
|
492
|
+
* @example Single file upload
|
|
493
|
+
* ```tsx
|
|
494
|
+
* <Upload onSuccess={handleSuccess}>
|
|
495
|
+
* <Upload.DropZone accept="image/*">
|
|
496
|
+
* {({ isDragging, getRootProps, getInputProps }) => (
|
|
497
|
+
* <div {...getRootProps()}>
|
|
498
|
+
* <input {...getInputProps()} />
|
|
499
|
+
* {isDragging ? "Drop here" : "Drag or click"}
|
|
500
|
+
* </div>
|
|
501
|
+
* )}
|
|
502
|
+
* </Upload.DropZone>
|
|
503
|
+
* <Upload.Progress>
|
|
504
|
+
* {({ progress }) => <progress value={progress} max={100} />}
|
|
505
|
+
* </Upload.Progress>
|
|
506
|
+
* </Upload>
|
|
507
|
+
* ```
|
|
508
|
+
*
|
|
509
|
+
* @example Multi-file upload
|
|
510
|
+
* ```tsx
|
|
511
|
+
* <Upload multiple maxConcurrent={3} onComplete={handleComplete}>
|
|
512
|
+
* <Upload.DropZone>
|
|
513
|
+
* {({ getRootProps, getInputProps }) => (
|
|
514
|
+
* <div {...getRootProps()}>
|
|
515
|
+
* <input {...getInputProps()} />
|
|
516
|
+
* Drop files here
|
|
517
|
+
* </div>
|
|
518
|
+
* )}
|
|
519
|
+
* </Upload.DropZone>
|
|
520
|
+
* <Upload.Items>
|
|
521
|
+
* {({ items }) => items.map(item => (
|
|
522
|
+
* <Upload.Item key={item.id} id={item.id}>
|
|
523
|
+
* {({ file, state, abort, remove }) => (
|
|
524
|
+
* <div>
|
|
525
|
+
* {file.name}: {state.progress}%
|
|
526
|
+
* <button onClick={abort}>Cancel</button>
|
|
527
|
+
* <button onClick={remove}>Remove</button>
|
|
528
|
+
* </div>
|
|
529
|
+
* )}
|
|
530
|
+
* </Upload.Item>
|
|
531
|
+
* ))}
|
|
532
|
+
* </Upload.Items>
|
|
533
|
+
* <Upload.StartAll>Upload All</Upload.StartAll>
|
|
534
|
+
* <Upload.Cancel>Cancel All</Upload.Cancel>
|
|
535
|
+
* <Upload.ClearCompleted>Clear Completed</Upload.ClearCompleted>
|
|
536
|
+
* </Upload>
|
|
537
|
+
* ```
|
|
538
|
+
*/
|
|
539
|
+
declare const Upload: typeof UploadRoot & {
|
|
540
|
+
DropZone: typeof UploadDropZone;
|
|
541
|
+
Items: typeof UploadItems;
|
|
542
|
+
Item: typeof UploadItem$1;
|
|
543
|
+
Progress: typeof UploadProgress;
|
|
544
|
+
Status: typeof UploadStatus$1;
|
|
545
|
+
Error: typeof UploadError;
|
|
546
|
+
Cancel: typeof UploadCancel;
|
|
547
|
+
Retry: typeof UploadRetry;
|
|
548
|
+
Reset: typeof UploadReset;
|
|
549
|
+
StartAll: typeof UploadStartAll;
|
|
550
|
+
ClearCompleted: typeof UploadClearCompleted;
|
|
551
|
+
};
|
|
552
|
+
//#endregion
|
|
9
553
|
//#region src/contexts/flow-manager-context.d.ts
|
|
10
554
|
/**
|
|
11
555
|
* Context value providing access to flow managers
|
|
@@ -54,7 +598,7 @@ interface FlowManagerProviderProps {
|
|
|
54
598
|
*/
|
|
55
599
|
declare function FlowManagerProvider({
|
|
56
600
|
children
|
|
57
|
-
}: FlowManagerProviderProps):
|
|
601
|
+
}: FlowManagerProviderProps): react_jsx_runtime12.JSX.Element;
|
|
58
602
|
/**
|
|
59
603
|
* Hook to access the FlowManager context.
|
|
60
604
|
* Must be used within a FlowManagerProvider.
|
|
@@ -72,5 +616,5 @@ declare function FlowManagerProvider({
|
|
|
72
616
|
*/
|
|
73
617
|
declare function useFlowManagerContext(): FlowManagerContextValue;
|
|
74
618
|
//#endregion
|
|
75
|
-
export { type DragDropOptions, type DragDropState, type FileUploadMetrics, Flow, type FlowCancelProps, type FlowContextValue, type FlowDropZoneProps, type FlowDropZoneRenderProps, type FlowErrorProps, type FlowErrorRenderProps, type FlowInputContextValue, type FlowInputDropZoneProps, type FlowInputDropZoneRenderProps, type FlowInputMetadata, type FlowInputPreviewProps, type FlowInputPreviewRenderProps, type FlowInputProps, type FlowInputUrlFieldProps, type FlowInputsProps, type FlowInputsRenderProps, FlowManagerProvider, type FlowProgressProps, type FlowProgressRenderProps, type FlowProps, type FlowResetProps, type FlowStatusProps, type FlowStatusRenderProps, type FlowSubmitProps, FlowUploadList, type FlowUploadListProps, type FlowUploadListRenderProps, type FlowUploadState, type FlowUploadStatus, type InputExecutionState, type MultiUploadOptions, type MultiUploadState, SimpleFlowUploadList, SimpleFlowUploadListItem, type SimpleFlowUploadListItemProps, type SimpleFlowUploadListProps, SimpleUploadListItem, type SimpleUploadListItemProps, SimpleUploadZone, type SimpleUploadZoneProps, type UploadFailedEventData, type UploadFileEventData, type UploadItem, UploadList, type UploadListProps, type UploadListRenderProps, type UploadMetrics, type UploadProgressEventData, type UploadState, type UploadStatus, type UploadValidationFailedEventData, type UploadValidationSuccessEventData, type UploadValidationWarningEventData, UploadZone, type UploadZoneProps, type UploadZoneRenderProps, UploadistaProvider, type UseDragDropReturn, type UseFlowEventsOptions, type UseFlowReturn, type UseMultiFlowUploadReturn, type UseMultiUploadReturn, type UseUploadEventsOptions, type UseUploadMetricsOptions, type UseUploadMetricsReturn, type UseUploadOptions, type UseUploadReturn, type UseUploadistaClientOptions, type UseUploadistaClientReturn, isFlowEvent, isUploadEvent, useDragDrop, useFlow, useFlowContext, useFlowEvents, useFlowInputContext, useFlowManagerContext, useMultiFlowUpload, useMultiUpload, useUpload, useUploadEvents, useUploadMetrics, useUploadistaClient, useUploadistaContext, useUploadistaEvents };
|
|
619
|
+
export { type DragDropOptions, type DragDropState, type FileUploadMetrics, Flow, type FlowCancelProps, type FlowContextValue, type FlowDropZoneProps, type FlowDropZoneRenderProps, type FlowErrorProps, type FlowErrorRenderProps, type FlowInputContextValue, type FlowInputDropZoneProps, type FlowInputDropZoneRenderProps, type FlowInputMetadata, type FlowInputPreviewProps, type FlowInputPreviewRenderProps, type FlowInputProps, type FlowInputUrlFieldProps, type FlowInputsProps, type FlowInputsRenderProps, FlowManagerProvider, type FlowProgressProps, type FlowProgressRenderProps, type FlowProps, type FlowResetProps, type FlowStatusProps, type FlowStatusRenderProps, type FlowSubmitProps, FlowUploadList, type FlowUploadListProps, type FlowUploadListRenderProps, type FlowUploadState, type FlowUploadStatus, type InputExecutionState, type MultiUploadOptions, type MultiUploadState, SimpleFlowUploadList, SimpleFlowUploadListItem, type SimpleFlowUploadListItemProps, type SimpleFlowUploadListProps, SimpleUploadListItem, type SimpleUploadListItemProps, SimpleUploadZone, type SimpleUploadZoneProps, Upload, type UploadCancelProps, type UploadClearCompletedProps, type UploadContextValue, type UploadDropZoneProps, type UploadDropZoneRenderProps, type UploadErrorProps, type UploadErrorRenderProps, type UploadFailedEventData, type UploadFileEventData, type UploadItem, type UploadItemContextValue, type UploadItemProps, type UploadItemsProps, type UploadItemsRenderProps, UploadList, type UploadListProps, type UploadListRenderProps, type UploadMetrics, type UploadProgressEventData, type UploadProgressProps, type UploadProgressRenderProps, type UploadProps, type UploadResetProps, type UploadRetryProps, type UploadStartAllProps, type UploadState, type UploadStatus, type UploadStatusProps, type UploadStatusRenderProps, type UploadValidationFailedEventData, type UploadValidationSuccessEventData, type UploadValidationWarningEventData, UploadZone, type UploadZoneProps, type UploadZoneRenderProps, UploadistaProvider, type UseDragDropReturn, type UseFlowEventsOptions, type UseFlowReturn, type UseMultiFlowUploadReturn, type UseMultiUploadReturn, type UseUploadEventsOptions, type UseUploadMetricsOptions, type UseUploadMetricsReturn, type UseUploadOptions, type UseUploadReturn, type UseUploadistaClientOptions, type UseUploadistaClientReturn, isFlowEvent, isUploadEvent, useDragDrop, useFlow, useFlowContext, useFlowEvents, useFlowInputContext, useFlowManagerContext, useMultiFlowUpload, useMultiUpload, useUpload, useUploadContext, useUploadEvents, useUploadItemContext, useUploadMetrics, useUploadistaClient, useUploadistaContext, useUploadistaEvents };
|
|
76
620
|
//# sourceMappingURL=index.d.mts.map
|
package/dist/index.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/contexts/flow-manager-context.tsx"],"sourcesContent":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/components/upload-primitives.tsx","../src/contexts/flow-manager-context.tsx"],"sourcesContent":[],"mappings":"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"}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c,u as l}from"./use-upload-BgaJmdwF.mjs";import{a as u,c as d,i as f,l as p,n as m,o as h,r as g,s as _,t as v,u as y}from"./flow-upload-list-BJSCZ4Ty.mjs";import{a as b,i as x,n as S,o as C,r as w,t as T}from"./use-uploadista-events-KhJ4knam.mjs";export{d as Flow,t as FlowManagerProvider,v as FlowUploadList,m as SimpleFlowUploadList,g as SimpleFlowUploadListItem,h as SimpleUploadListItem,f as SimpleUploadZone,_ as UploadList,u as UploadZone,e as UploadistaProvider,b as isFlowEvent,C as isUploadEvent,l as useDragDrop,n as useFlow,p as useFlowContext,x as useFlowEvents,y as useFlowInputContext,r as useFlowManagerContext,o as useMultiFlowUpload,i as useMultiUpload,c as useUpload,w as useUploadEvents,S as useUploadMetrics,s as useUploadistaClient,a as useUploadistaContext,T as useUploadistaEvents};
|
|
1
|
+
import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c,u as l}from"./use-upload-BgaJmdwF.mjs";import{a as u,c as d,i as f,l as p,n as m,o as h,r as g,s as _,t as v,u as y}from"./flow-upload-list-BJSCZ4Ty.mjs";import{a as b,i as x,n as S,o as C,r as w,t as T}from"./use-uploadista-events-KhJ4knam.mjs";import{createContext as E,useCallback as D,useContext as O}from"react";import{Fragment as k,jsx as A}from"react/jsx-runtime";const j=E(null);function M(){let e=O(j);if(!e)throw Error(`useUploadContext must be used within an <Upload> component. Wrap your component tree with <Upload onSuccess={...}>`);return e}const N=E(null);function P(){let e=O(N);if(!e)throw Error(`useUploadItemContext must be used within an <Upload.Item> component. Wrap your component with <Upload.Item id="...">`);return e}function F({multiple:e=!1,maxConcurrent:t=3,autoStart:n=!0,metadata:r,onSuccess:a,onError:o,onComplete:s,onUploadStart:c,onProgress:l,children:u}){let d=i({maxConcurrent:t,metadata:r,onUploadStart:c,onUploadProgress:l,onUploadSuccess:(t,n)=>{e||a?.(n)},onUploadError:(e,t)=>{o?.(t,e)},onComplete:s}),f=D(t=>{e||d.clearAll(),d.addFiles(t),n&&setTimeout(()=>d.startAll(),0)},[e,n,d]),p={mode:e?`multi`:`single`,state:d.state,items:d.items,autoStart:n,addFiles:d.addFiles,removeItem:d.removeItem,startAll:d.startAll,abortUpload:d.abortUpload,abortAll:d.abortAll,retryUpload:d.retryUpload,retryFailed:d.retryFailed,clearCompleted:d.clearCompleted,clearAll:d.clearAll,handleFilesReceived:f};return A(j.Provider,{value:p,children:u})}function I({accept:e,maxFileSize:t,maxFiles:n,children:r}){let i=M(),a=l({onFilesReceived:i.handleFilesReceived,accept:e?e.split(`,`).map(e=>e.trim()):void 0,maxFileSize:t,maxFiles:i.mode===`multi`?n:1,multiple:i.mode===`multi`});return A(k,{children:r({isDragging:a.state.isDragging,isOver:a.state.isOver,errors:a.state.errors,getRootProps:()=>a.dragHandlers,getInputProps:()=>a.inputProps,openFilePicker:a.openFilePicker,dragDropState:a.state})})}function L({children:e}){let t=M();return A(k,{children:e({items:t.items,hasItems:t.items.length>0,isEmpty:t.items.length===0})})}function R({id:e,children:t}){let n=M(),r=n.items.find(t=>t.id===e);if(!r)return null;let i={id:e,file:r.file,state:r.state,abort:()=>n.abortUpload(e),retry:()=>n.retryUpload(e),remove:()=>n.removeItem(e)};return A(N.Provider,{value:i,children:typeof t==`function`?t(i):t})}function z({children:e}){let t=M();return A(k,{children:e({progress:t.state.progress,bytesUploaded:t.state.totalBytesUploaded,totalBytes:t.state.totalBytes,isUploading:t.state.isUploading})})}function B({children:e}){let{state:t}=M(),n=`idle`;return t.isUploading?n=`uploading`:t.isComplete&&(n=t.failed>0?`error`:`success`),A(k,{children:e({status:n,isIdle:n===`idle`,isUploading:t.isUploading,isSuccess:t.isComplete&&t.failed===0,isError:t.failed>0,isComplete:t.isComplete,total:t.total,successful:t.successful,failed:t.failed,uploading:t.uploading})})}function V({children:e}){let t=M(),n=t.items.filter(e=>[`error`,`aborted`].includes(e.state.status));return A(k,{children:e({hasError:n.length>0,failedCount:n.length,failedItems:n,reset:t.clearCompleted})})}function H({children:e,disabled:t,...n}){let r=M();return A(`button`,{type:`button`,onClick:D(()=>{r.abortAll()},[r]),disabled:t||!r.state.isUploading,...n,children:e})}function U({children:e,disabled:t,...n}){let r=M();return A(`button`,{type:`button`,onClick:D(()=>{r.retryFailed()},[r]),disabled:t||r.state.failed===0,...n,children:e})}function W({children:e,...t}){let n=M();return A(`button`,{type:`button`,onClick:D(()=>{n.clearAll()},[n]),...t,children:e})}function G({children:e,disabled:t,...n}){let r=M(),i=D(()=>{r.startAll()},[r]),a=r.items.filter(e=>e.state.status===`idle`).length;return A(`button`,{type:`button`,onClick:i,disabled:t||r.state.isUploading||a===0,...n,children:e})}function K({children:e,disabled:t,...n}){let r=M();return A(`button`,{type:`button`,onClick:D(()=>{r.clearCompleted()},[r]),disabled:t||r.state.completed===0,...n,children:e})}const q=Object.assign(F,{DropZone:I,Items:L,Item:R,Progress:z,Status:B,Error:V,Cancel:H,Retry:U,Reset:W,StartAll:G,ClearCompleted:K});export{d as Flow,t as FlowManagerProvider,v as FlowUploadList,m as SimpleFlowUploadList,g as SimpleFlowUploadListItem,h as SimpleUploadListItem,f as SimpleUploadZone,q as Upload,_ as UploadList,u as UploadZone,e as UploadistaProvider,b as isFlowEvent,C as isUploadEvent,l as useDragDrop,n as useFlow,p as useFlowContext,x as useFlowEvents,y as useFlowInputContext,r as useFlowManagerContext,o as useMultiFlowUpload,i as useMultiUpload,c as useUpload,M as useUploadContext,w as useUploadEvents,P as useUploadItemContext,S as useUploadMetrics,s as useUploadistaClient,a as useUploadistaContext,T as useUploadistaEvents};
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["contextValue: UploadContextValue","contextValue: UploadItemContextValue","status: \"idle\" | \"uploading\" | \"success\" | \"error\""],"sources":["../src/components/upload-primitives.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BrowserUploadInput } from \"@uploadista/client-browser\";\nimport type { UploadFile } from \"@uploadista/core/types\";\nimport {\n type ReactNode,\n createContext,\n useCallback,\n useContext,\n} from \"react\";\nimport {\n type DragDropState,\n type UseDragDropReturn,\n useDragDrop,\n} from \"../hooks/use-drag-drop\";\nimport {\n type MultiUploadState,\n type UploadItem,\n useMultiUpload,\n} from \"../hooks/use-multi-upload\";\nimport type { UploadState, UploadStatus } from \"../hooks/use-upload\";\n\n// Re-export types for convenience\nexport type { UploadState, UploadStatus, UploadItem, MultiUploadState };\n\n// ============ UPLOAD CONTEXT ============\n\n/**\n * Context value provided by the Upload component root.\n * Contains all upload state and actions.\n */\nexport interface UploadContextValue {\n /** Whether in multi-file mode */\n mode: \"single\" | \"multi\";\n /** Current multi-upload state (aggregate) */\n state: MultiUploadState;\n /** All upload items */\n items: UploadItem[];\n /** Whether auto-start is enabled */\n autoStart: boolean;\n\n /** Add files to the upload queue */\n addFiles: (files: BrowserUploadInput[]) => void;\n /** Remove an item from the queue */\n removeItem: (id: string) => void;\n /** Start all pending uploads */\n startAll: () => void;\n /** Abort a specific upload by ID */\n abortUpload: (id: string) => void;\n /** Abort all active uploads */\n abortAll: () => void;\n /** Retry a specific failed upload by ID */\n retryUpload: (id: string) => void;\n /** Retry all failed uploads */\n retryFailed: () => void;\n /** Clear all completed uploads */\n clearCompleted: () => void;\n /** Clear all items and reset state */\n clearAll: () => void;\n\n /** Internal handler for files received from drop zone */\n handleFilesReceived: (files: File[]) => void;\n}\n\nconst UploadContext = createContext<UploadContextValue | null>(null);\n\n/**\n * Hook to access upload context from within an Upload component.\n * @throws Error if used outside of an Upload component\n */\nexport function useUploadContext(): UploadContextValue {\n const context = useContext(UploadContext);\n if (!context) {\n throw new Error(\n \"useUploadContext must be used within an <Upload> component. \" +\n 'Wrap your component tree with <Upload onSuccess={...}>',\n );\n }\n return context;\n}\n\n// ============ UPLOAD ITEM CONTEXT ============\n\n/**\n * Context value for a specific upload item within an Upload.\n */\nexport interface UploadItemContextValue {\n /** Item ID */\n id: string;\n /** The file being uploaded */\n file: BrowserUploadInput;\n /** Current upload state */\n state: UploadState;\n /** Abort this upload */\n abort: () => void;\n /** Retry this upload */\n retry: () => void;\n /** Remove this item from the queue */\n remove: () => void;\n}\n\nconst UploadItemContext = createContext<UploadItemContextValue | null>(null);\n\n/**\n * Hook to access upload item context from within an Upload.Item component.\n * @throws Error if used outside of an Upload.Item component\n */\nexport function useUploadItemContext(): UploadItemContextValue {\n const context = useContext(UploadItemContext);\n if (!context) {\n throw new Error(\n \"useUploadItemContext must be used within an <Upload.Item> component. \" +\n 'Wrap your component with <Upload.Item id=\"...\">',\n );\n }\n return context;\n}\n\n// ============ UPLOAD ROOT COMPONENT ============\n\n/**\n * Props for the Upload root component.\n */\nexport interface UploadProps {\n /** Whether to allow multiple file uploads (default: false) */\n multiple?: boolean;\n /** Maximum concurrent uploads (default: 3, only used in multi mode) */\n maxConcurrent?: number;\n /** Whether to auto-start uploads when files are received (default: true) */\n autoStart?: boolean;\n /** Metadata to attach to uploads */\n metadata?: Record<string, string>;\n /** Called when a single file upload succeeds (single mode) */\n onSuccess?: (result: UploadFile) => void;\n /** Called when an upload fails */\n onError?: (error: Error, item?: UploadItem) => void;\n /** Called when all uploads complete (multi mode) */\n onComplete?: (results: {\n successful: UploadItem[];\n failed: UploadItem[];\n total: number;\n }) => void;\n /** Called when an individual upload starts */\n onUploadStart?: (item: UploadItem) => void;\n /** Called on upload progress */\n onProgress?: (\n item: UploadItem,\n progress: number,\n bytesUploaded: number,\n totalBytes: number | null,\n ) => void;\n /** Children to render */\n children: ReactNode;\n}\n\n/**\n * Root component for file uploads.\n * Provides context for all Upload sub-components.\n * Supports both single-file and multi-file modes via the `multiple` prop.\n *\n * @example Single file upload\n * ```tsx\n * <Upload onSuccess={handleSuccess}>\n * <Upload.DropZone accept=\"image/*\">\n * {({ isDragging, getRootProps, getInputProps }) => (\n * <div {...getRootProps()}>\n * <input {...getInputProps()} />\n * {isDragging ? \"Drop here\" : \"Drag or click\"}\n * </div>\n * )}\n * </Upload.DropZone>\n * <Upload.Progress>\n * {({ progress }) => <progress value={progress} max={100} />}\n * </Upload.Progress>\n * </Upload>\n * ```\n *\n * @example Multi-file upload\n * ```tsx\n * <Upload multiple maxConcurrent={3} onComplete={handleComplete}>\n * <Upload.DropZone>\n * {(props) => ...}\n * </Upload.DropZone>\n * <Upload.Items>\n * {({ items }) => items.map(item => (\n * <Upload.Item key={item.id} id={item.id}>\n * {({ file, state, abort, remove }) => (\n * <div>{file.name}: {state.progress}%</div>\n * )}\n * </Upload.Item>\n * ))}\n * </Upload.Items>\n * <Upload.StartAll>Upload All</Upload.StartAll>\n * </Upload>\n * ```\n */\nfunction UploadRoot({\n multiple = false,\n maxConcurrent = 3,\n autoStart = true,\n metadata,\n onSuccess,\n onError,\n onComplete,\n onUploadStart,\n onProgress,\n children,\n}: UploadProps) {\n const multiUpload = useMultiUpload({\n maxConcurrent,\n metadata,\n onUploadStart,\n onUploadProgress: onProgress,\n onUploadSuccess: (item, result) => {\n // In single mode, call onSuccess directly\n if (!multiple) {\n onSuccess?.(result);\n }\n },\n onUploadError: (item, error) => {\n onError?.(error, item);\n },\n onComplete,\n });\n\n const handleFilesReceived = useCallback(\n (files: File[]) => {\n if (!multiple) {\n // Single mode: clear existing and add new file\n multiUpload.clearAll();\n }\n multiUpload.addFiles(files);\n if (autoStart) {\n // Use setTimeout to ensure state is updated before starting\n setTimeout(() => multiUpload.startAll(), 0);\n }\n },\n [multiple, autoStart, multiUpload],\n );\n\n const contextValue: UploadContextValue = {\n mode: multiple ? \"multi\" : \"single\",\n state: multiUpload.state,\n items: multiUpload.items,\n autoStart,\n addFiles: multiUpload.addFiles,\n removeItem: multiUpload.removeItem,\n startAll: multiUpload.startAll,\n abortUpload: multiUpload.abortUpload,\n abortAll: multiUpload.abortAll,\n retryUpload: multiUpload.retryUpload,\n retryFailed: multiUpload.retryFailed,\n clearCompleted: multiUpload.clearCompleted,\n clearAll: multiUpload.clearAll,\n handleFilesReceived,\n };\n\n return (\n <UploadContext.Provider value={contextValue}>\n {children}\n </UploadContext.Provider>\n );\n}\n\n// ============ DROP ZONE PRIMITIVE ============\n\n/**\n * Render props for Upload.DropZone component.\n */\nexport interface UploadDropZoneRenderProps {\n /** Whether files are being dragged over */\n isDragging: boolean;\n /** Whether drag is over the zone */\n isOver: boolean;\n /** Validation errors */\n errors: string[];\n /** Props to spread on the drop zone container */\n getRootProps: () => UseDragDropReturn[\"dragHandlers\"];\n /** Props to spread on the hidden file input */\n getInputProps: () => UseDragDropReturn[\"inputProps\"];\n /** Open file picker programmatically */\n openFilePicker: () => void;\n /** Current drag-drop state */\n dragDropState: DragDropState;\n}\n\n/**\n * Props for Upload.DropZone component.\n */\nexport interface UploadDropZoneProps {\n /** Accepted file types (e.g., \"image/*\", \".pdf\") */\n accept?: string;\n /** Maximum file size in bytes */\n maxFileSize?: number;\n /** Maximum number of files (only in multi mode) */\n maxFiles?: number;\n /** Render function receiving drop zone state */\n children: (props: UploadDropZoneRenderProps) => ReactNode;\n}\n\n/**\n * Drop zone for file uploads within an Upload component.\n * Handles drag-and-drop and click-to-select file selection.\n *\n * @example\n * ```tsx\n * <Upload.DropZone accept=\"image/*\">\n * {({ isDragging, getRootProps, getInputProps }) => (\n * <div {...getRootProps()}>\n * <input {...getInputProps()} />\n * {isDragging ? \"Drop here\" : \"Click or drag\"}\n * </div>\n * )}\n * </Upload.DropZone>\n * ```\n */\nfunction UploadDropZone({\n accept,\n maxFileSize,\n maxFiles,\n children,\n}: UploadDropZoneProps) {\n const upload = useUploadContext();\n\n const dragDrop = useDragDrop({\n onFilesReceived: upload.handleFilesReceived,\n accept: accept ? accept.split(\",\").map((t) => t.trim()) : undefined,\n maxFileSize,\n maxFiles: upload.mode === \"multi\" ? maxFiles : 1,\n multiple: upload.mode === \"multi\",\n });\n\n const renderProps: UploadDropZoneRenderProps = {\n isDragging: dragDrop.state.isDragging,\n isOver: dragDrop.state.isOver,\n errors: dragDrop.state.errors,\n getRootProps: () => dragDrop.dragHandlers,\n getInputProps: () => dragDrop.inputProps,\n openFilePicker: dragDrop.openFilePicker,\n dragDropState: dragDrop.state,\n };\n\n return <>{children(renderProps)}</>;\n}\n\n// ============ ITEMS PRIMITIVE ============\n\n/**\n * Render props for Upload.Items component.\n */\nexport interface UploadItemsRenderProps {\n /** All upload items */\n items: UploadItem[];\n /** Whether there are any items */\n hasItems: boolean;\n /** Whether items array is empty */\n isEmpty: boolean;\n}\n\n/**\n * Props for Upload.Items component.\n */\nexport interface UploadItemsProps {\n /** Render function receiving items */\n children: (props: UploadItemsRenderProps) => ReactNode;\n}\n\n/**\n * Renders the list of upload items via render props.\n *\n * @example\n * ```tsx\n * <Upload.Items>\n * {({ items, isEmpty }) => (\n * isEmpty ? <p>No files</p> : (\n * items.map(item => (\n * <Upload.Item key={item.id} id={item.id}>\n * {(props) => ...}\n * </Upload.Item>\n * ))\n * )\n * )}\n * </Upload.Items>\n * ```\n */\nfunction UploadItems({ children }: UploadItemsProps) {\n const upload = useUploadContext();\n\n const renderProps: UploadItemsRenderProps = {\n items: upload.items,\n hasItems: upload.items.length > 0,\n isEmpty: upload.items.length === 0,\n };\n\n return <>{children(renderProps)}</>;\n}\n\n// ============ ITEM PRIMITIVE ============\n\n/**\n * Props for Upload.Item component.\n */\nexport interface UploadItemProps {\n /** Item ID */\n id: string;\n /** Children (can be render function or regular children) */\n children: ReactNode | ((props: UploadItemContextValue) => ReactNode);\n}\n\n/**\n * Scoped context provider for a specific upload item.\n * Children can access item-specific state via useUploadItemContext().\n *\n * @example\n * ```tsx\n * <Upload.Item id={item.id}>\n * {({ file, state, abort, remove }) => (\n * <div>\n * <span>{file.name}</span>\n * <progress value={state.progress} max={100} />\n * <button onClick={abort}>Cancel</button>\n * <button onClick={remove}>Remove</button>\n * </div>\n * )}\n * </Upload.Item>\n * ```\n */\nfunction UploadItem({ id, children }: UploadItemProps) {\n const upload = useUploadContext();\n\n const item = upload.items.find((i) => i.id === id);\n\n if (!item) {\n // Item not found\n return null;\n }\n\n const contextValue: UploadItemContextValue = {\n id,\n file: item.file,\n state: item.state,\n abort: () => upload.abortUpload(id),\n retry: () => upload.retryUpload(id),\n remove: () => upload.removeItem(id),\n };\n\n return (\n <UploadItemContext.Provider value={contextValue}>\n {typeof children === \"function\" ? children(contextValue) : children}\n </UploadItemContext.Provider>\n );\n}\n\n// ============ PROGRESS PRIMITIVE ============\n\n/**\n * Render props for Upload.Progress component.\n */\nexport interface UploadProgressRenderProps {\n /** Progress percentage (0-100) */\n progress: number;\n /** Bytes uploaded so far */\n bytesUploaded: number;\n /** Total bytes to upload */\n totalBytes: number;\n /** Whether any uploads are active */\n isUploading: boolean;\n}\n\n/**\n * Props for Upload.Progress component.\n */\nexport interface UploadProgressProps {\n /** Render function receiving progress state */\n children: (props: UploadProgressRenderProps) => ReactNode;\n}\n\n/**\n * Progress display component within an Upload.\n *\n * @example\n * ```tsx\n * <Upload.Progress>\n * {({ progress, isUploading }) => (\n * isUploading && <progress value={progress} max={100} />\n * )}\n * </Upload.Progress>\n * ```\n */\nfunction UploadProgress({ children }: UploadProgressProps) {\n const upload = useUploadContext();\n\n const renderProps: UploadProgressRenderProps = {\n progress: upload.state.progress,\n bytesUploaded: upload.state.totalBytesUploaded,\n totalBytes: upload.state.totalBytes,\n isUploading: upload.state.isUploading,\n };\n\n return <>{children(renderProps)}</>;\n}\n\n// ============ STATUS PRIMITIVE ============\n\n/**\n * Render props for Upload.Status component.\n */\nexport interface UploadStatusRenderProps {\n /** Overall status */\n status: \"idle\" | \"uploading\" | \"success\" | \"error\";\n /** Whether idle (no uploads active or completed) */\n isIdle: boolean;\n /** Whether uploading */\n isUploading: boolean;\n /** Whether all uploads succeeded */\n isSuccess: boolean;\n /** Whether any upload failed */\n isError: boolean;\n /** Whether all uploads completed (success or failure) */\n isComplete: boolean;\n /** Number of total items */\n total: number;\n /** Number of successful uploads */\n successful: number;\n /** Number of failed uploads */\n failed: number;\n /** Number of currently uploading */\n uploading: number;\n}\n\n/**\n * Props for Upload.Status component.\n */\nexport interface UploadStatusProps {\n /** Render function receiving status state */\n children: (props: UploadStatusRenderProps) => ReactNode;\n}\n\n/**\n * Status display component within an Upload.\n *\n * @example\n * ```tsx\n * <Upload.Status>\n * {({ status, total, successful, failed }) => (\n * <div>\n * Status: {status}\n * ({successful}/{total} uploaded, {failed} failed)\n * </div>\n * )}\n * </Upload.Status>\n * ```\n */\nfunction UploadStatus({ children }: UploadStatusProps) {\n const upload = useUploadContext();\n const { state } = upload;\n\n // Derive overall status\n let status: \"idle\" | \"uploading\" | \"success\" | \"error\" = \"idle\";\n if (state.isUploading) {\n status = \"uploading\";\n } else if (state.isComplete) {\n status = state.failed > 0 ? \"error\" : \"success\";\n }\n\n const renderProps: UploadStatusRenderProps = {\n status,\n isIdle: status === \"idle\",\n isUploading: state.isUploading,\n isSuccess: state.isComplete && state.failed === 0,\n isError: state.failed > 0,\n isComplete: state.isComplete,\n total: state.total,\n successful: state.successful,\n failed: state.failed,\n uploading: state.uploading,\n };\n\n return <>{children(renderProps)}</>;\n}\n\n// ============ ERROR PRIMITIVE ============\n\n/**\n * Render props for Upload.Error component.\n */\nexport interface UploadErrorRenderProps {\n /** Whether there are any errors */\n hasError: boolean;\n /** Number of failed uploads */\n failedCount: number;\n /** Failed items */\n failedItems: UploadItem[];\n /** Reset/clear all errors */\n reset: () => void;\n}\n\n/**\n * Props for Upload.Error component.\n */\nexport interface UploadErrorProps {\n /** Render function receiving error state */\n children: (props: UploadErrorRenderProps) => ReactNode;\n}\n\n/**\n * Error display component within an Upload.\n *\n * @example\n * ```tsx\n * <Upload.Error>\n * {({ hasError, failedItems, reset }) => (\n * hasError && (\n * <div>\n * {failedItems.map(item => (\n * <p key={item.id}>{item.file.name}: {item.state.error?.message}</p>\n * ))}\n * <button onClick={reset}>Clear</button>\n * </div>\n * )\n * )}\n * </Upload.Error>\n * ```\n */\nfunction UploadError({ children }: UploadErrorProps) {\n const upload = useUploadContext();\n\n const failedItems = upload.items.filter((item) =>\n [\"error\", \"aborted\"].includes(item.state.status),\n );\n\n const renderProps: UploadErrorRenderProps = {\n hasError: failedItems.length > 0,\n failedCount: failedItems.length,\n failedItems,\n reset: upload.clearCompleted,\n };\n\n return <>{children(renderProps)}</>;\n}\n\n// ============ ACTION PRIMITIVES ============\n\n/**\n * Props for Upload.Cancel component.\n */\nexport interface UploadCancelProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\"> {\n /** Button content */\n children: ReactNode;\n}\n\n/**\n * Cancel button that aborts all active uploads.\n * Automatically disabled when no uploads are active.\n */\nfunction UploadCancel({ children, disabled, ...props }: UploadCancelProps) {\n const upload = useUploadContext();\n\n const handleClick = useCallback(() => {\n upload.abortAll();\n }, [upload]);\n\n return (\n <button\n type=\"button\"\n onClick={handleClick}\n disabled={disabled || !upload.state.isUploading}\n {...props}\n >\n {children}\n </button>\n );\n}\n\n/**\n * Props for Upload.Retry component.\n */\nexport interface UploadRetryProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\"> {\n /** Button content */\n children: ReactNode;\n}\n\n/**\n * Retry button that retries all failed uploads.\n * Automatically disabled when no failed uploads exist.\n */\nfunction UploadRetry({ children, disabled, ...props }: UploadRetryProps) {\n const upload = useUploadContext();\n\n const handleClick = useCallback(() => {\n upload.retryFailed();\n }, [upload]);\n\n return (\n <button\n type=\"button\"\n onClick={handleClick}\n disabled={disabled || upload.state.failed === 0}\n {...props}\n >\n {children}\n </button>\n );\n}\n\n/**\n * Props for Upload.Reset component.\n */\nexport interface UploadResetProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\"> {\n /** Button content */\n children: ReactNode;\n}\n\n/**\n * Reset button that clears all items and resets state.\n */\nfunction UploadReset({ children, ...props }: UploadResetProps) {\n const upload = useUploadContext();\n\n const handleClick = useCallback(() => {\n upload.clearAll();\n }, [upload]);\n\n return (\n <button type=\"button\" onClick={handleClick} {...props}>\n {children}\n </button>\n );\n}\n\n/**\n * Props for Upload.StartAll component.\n */\nexport interface UploadStartAllProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\"> {\n /** Button content */\n children: ReactNode;\n}\n\n/**\n * Start all button that begins all queued uploads.\n * Primarily useful when autoStart is disabled.\n * Automatically disabled when uploads are already active.\n */\nfunction UploadStartAll({ children, disabled, ...props }: UploadStartAllProps) {\n const upload = useUploadContext();\n\n const handleClick = useCallback(() => {\n upload.startAll();\n }, [upload]);\n\n // Count idle items\n const idleCount = upload.items.filter(\n (item) => item.state.status === \"idle\",\n ).length;\n\n return (\n <button\n type=\"button\"\n onClick={handleClick}\n disabled={disabled || upload.state.isUploading || idleCount === 0}\n {...props}\n >\n {children}\n </button>\n );\n}\n\n/**\n * Props for Upload.ClearCompleted component.\n */\nexport interface UploadClearCompletedProps\n extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\"> {\n /** Button content */\n children: ReactNode;\n}\n\n/**\n * Clear completed button that removes all finished uploads from the list.\n * Automatically disabled when no completed uploads exist.\n */\nfunction UploadClearCompleted({\n children,\n disabled,\n ...props\n}: UploadClearCompletedProps) {\n const upload = useUploadContext();\n\n const handleClick = useCallback(() => {\n upload.clearCompleted();\n }, [upload]);\n\n return (\n <button\n type=\"button\"\n onClick={handleClick}\n disabled={disabled || upload.state.completed === 0}\n {...props}\n >\n {children}\n </button>\n );\n}\n\n// ============ COMPOUND COMPONENT EXPORT ============\n\n/**\n * Upload compound component for file uploads.\n *\n * Provides a composable, headless API for building upload interfaces.\n * Supports both single-file and multi-file modes via the `multiple` prop.\n * All sub-components use render props for complete UI control.\n *\n * @example Single file upload\n * ```tsx\n * <Upload onSuccess={handleSuccess}>\n * <Upload.DropZone accept=\"image/*\">\n * {({ isDragging, getRootProps, getInputProps }) => (\n * <div {...getRootProps()}>\n * <input {...getInputProps()} />\n * {isDragging ? \"Drop here\" : \"Drag or click\"}\n * </div>\n * )}\n * </Upload.DropZone>\n * <Upload.Progress>\n * {({ progress }) => <progress value={progress} max={100} />}\n * </Upload.Progress>\n * </Upload>\n * ```\n *\n * @example Multi-file upload\n * ```tsx\n * <Upload multiple maxConcurrent={3} onComplete={handleComplete}>\n * <Upload.DropZone>\n * {({ getRootProps, getInputProps }) => (\n * <div {...getRootProps()}>\n * <input {...getInputProps()} />\n * Drop files here\n * </div>\n * )}\n * </Upload.DropZone>\n * <Upload.Items>\n * {({ items }) => items.map(item => (\n * <Upload.Item key={item.id} id={item.id}>\n * {({ file, state, abort, remove }) => (\n * <div>\n * {file.name}: {state.progress}%\n * <button onClick={abort}>Cancel</button>\n * <button onClick={remove}>Remove</button>\n * </div>\n * )}\n * </Upload.Item>\n * ))}\n * </Upload.Items>\n * <Upload.StartAll>Upload All</Upload.StartAll>\n * <Upload.Cancel>Cancel All</Upload.Cancel>\n * <Upload.ClearCompleted>Clear Completed</Upload.ClearCompleted>\n * </Upload>\n * ```\n */\nexport const Upload = Object.assign(UploadRoot, {\n DropZone: UploadDropZone,\n Items: UploadItems,\n Item: UploadItem,\n Progress: UploadProgress,\n Status: UploadStatus,\n Error: UploadError,\n Cancel: UploadCancel,\n Retry: UploadRetry,\n Reset: UploadReset,\n StartAll: UploadStartAll,\n ClearCompleted: UploadClearCompleted,\n});\n"],"mappings":"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"}
|