upload-motion 0.0.0-stage → 0.1.0
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/CHANGELOG.md +13 -0
- package/LICENSE +21 -0
- package/README.md +198 -2
- package/dist/core-BUWs_ckM.js +1256 -0
- package/dist/core-jiCtXcMo.cjs +1393 -0
- package/dist/core.cjs +26 -0
- package/dist/core.d.cts +3 -0
- package/dist/core.d.ts +3 -0
- package/dist/core.js +2 -0
- package/dist/index-BZJA26zI.d.cts +471 -0
- package/dist/index-BZJA26zI.d.ts +471 -0
- package/dist/index.cjs +4017 -0
- package/dist/index.d.cts +617 -0
- package/dist/index.d.ts +617 -0
- package/dist/index.js +3927 -0
- package/dist/styles.css +3417 -0
- package/dist/styles.css.d.ts +1 -0
- package/package.json +109 -4
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,617 @@
|
|
|
1
|
+
|
|
2
|
+
import { A as FileRejection, B as UploadTotals, C as AddFilesResult, D as ClearFilter, E as createUploadStore, F as UploadEventMap, G as isUploadError, H as UploadError, I as UploadHandler, K as toUploadError, L as UploadItem, M as RejectionReason, N as RetryOptions, O as CustomValidator, P as UploadContext, R as UploadSnapshot, S as createXhrUploader, T as computeTotals, U as UploadErrorCode, V as UploaderOptions, W as httpErrorMessage, _ as parseAccept, a as presetCatalog, b as XhrUploaderOptions, c as formatDuration, d as getExtension, f as getFileKind, g as isFileAccepted, h as describeAccept, i as PresetInfo, j as RejectionCode, k as FileKind, l as formatPercent, m as isPreviewableImage, n as PresetCategory, o as clamp01, p as getFileLabel, r as PresetId, s as formatBytes, t as PRESET_INFO, u as formatSpeed, v as validateFile, w as UploadStore, x as createSimulatedUploader, y as SimulatedUploaderOptions, z as UploadStatus } from "./index-BZJA26zI.cjs";
|
|
3
|
+
import { CSSProperties, ComponentType, HTMLAttributes, InputHTMLAttributes, ReactNode, RefObject } from "react";
|
|
4
|
+
//#region src/types/index.d.ts
|
|
5
|
+
type ThemeMode = 'light' | 'dark' | 'system';
|
|
6
|
+
type Density = 'compact' | 'comfortable' | 'spacious';
|
|
7
|
+
type ProgressVariant = 'bar' | 'ring' | 'wave' | 'beam';
|
|
8
|
+
type QueueLayout = 'list' | 'grid';
|
|
9
|
+
/** Visual tokens. Every value maps to a `--um-*` CSS custom property you can also set in CSS. */
|
|
10
|
+
interface Appearance {
|
|
11
|
+
theme?: ThemeMode;
|
|
12
|
+
/** Primary brand colour. Any CSS colour. */
|
|
13
|
+
accent?: string;
|
|
14
|
+
/** Second gradient stop. Defaults to a shifted accent. */
|
|
15
|
+
accentSecondary?: string;
|
|
16
|
+
background?: string;
|
|
17
|
+
surface?: string;
|
|
18
|
+
text?: string;
|
|
19
|
+
mutedText?: string;
|
|
20
|
+
border?: string;
|
|
21
|
+
success?: string;
|
|
22
|
+
danger?: string;
|
|
23
|
+
/** Corner radius, e.g. `16` or `"1rem"`. */
|
|
24
|
+
radius?: number | string;
|
|
25
|
+
density?: Density;
|
|
26
|
+
shadow?: 'none' | 'soft' | 'elevated' | (string & {});
|
|
27
|
+
fontFamily?: string;
|
|
28
|
+
/** Minimum height of the drop zone, e.g. `240` or `"18rem"`. */
|
|
29
|
+
zoneHeight?: number | string;
|
|
30
|
+
}
|
|
31
|
+
interface MotionOptions {
|
|
32
|
+
/** Playback speed multiplier. `2` = twice as fast. Default 1. */
|
|
33
|
+
speed?: number;
|
|
34
|
+
/** 0..1.5 amplitude of decorative motion (tilt, bounce, wobble). Default 1. */
|
|
35
|
+
intensity?: number;
|
|
36
|
+
/** 0..1 particle density for presets that use particles. 0 disables them. Default 1. */
|
|
37
|
+
particles?: number;
|
|
38
|
+
/** `user` follows `prefers-reduced-motion`; `always` forces reduced motion; `never` ignores the OS setting. */
|
|
39
|
+
reducedMotion?: 'user' | 'always' | 'never';
|
|
40
|
+
}
|
|
41
|
+
interface ResolvedMotion {
|
|
42
|
+
reduced: boolean;
|
|
43
|
+
speed: number;
|
|
44
|
+
intensity: number;
|
|
45
|
+
particles: number;
|
|
46
|
+
}
|
|
47
|
+
interface UploadLabels {
|
|
48
|
+
dropTitle: string;
|
|
49
|
+
dropHint: string;
|
|
50
|
+
browse: string;
|
|
51
|
+
dropActive: string;
|
|
52
|
+
dropReject: string;
|
|
53
|
+
zoneLabel: string;
|
|
54
|
+
upload: string;
|
|
55
|
+
uploadMore: string;
|
|
56
|
+
pause: string;
|
|
57
|
+
resume: string;
|
|
58
|
+
cancel: string;
|
|
59
|
+
cancelAll: string;
|
|
60
|
+
retry: string;
|
|
61
|
+
retryFailed: string;
|
|
62
|
+
remove: string;
|
|
63
|
+
clearCompleted: string;
|
|
64
|
+
clearAll: string;
|
|
65
|
+
expand: string;
|
|
66
|
+
collapse: string;
|
|
67
|
+
moreActions: string;
|
|
68
|
+
dismiss: string;
|
|
69
|
+
finishing: string;
|
|
70
|
+
simulated: string;
|
|
71
|
+
simulatedHint: string;
|
|
72
|
+
noHandler: string;
|
|
73
|
+
status: Record<UploadStatus, string>;
|
|
74
|
+
timeLeft: (duration: string) => string;
|
|
75
|
+
retryingIn: (seconds: number) => string;
|
|
76
|
+
summary: (totals: UploadTotals) => string;
|
|
77
|
+
acceptHint: (parts: {
|
|
78
|
+
types: string;
|
|
79
|
+
maxSize: string;
|
|
80
|
+
maxFiles: number | null;
|
|
81
|
+
}) => string;
|
|
82
|
+
}
|
|
83
|
+
/** Per-kind visualizers used by list presets (e.g. `adaptive`). */
|
|
84
|
+
type FileVisualizer = 'bloom' | 'page' | 'filmstrip' | 'waveform' | 'pixel' | 'card';
|
|
85
|
+
interface FileRenderHelpers {
|
|
86
|
+
remove: () => void;
|
|
87
|
+
cancel: () => void;
|
|
88
|
+
retry: () => void;
|
|
89
|
+
pause: () => void;
|
|
90
|
+
resume: () => void;
|
|
91
|
+
start: () => void;
|
|
92
|
+
labels: UploadLabels;
|
|
93
|
+
}
|
|
94
|
+
interface UploadClassNames {
|
|
95
|
+
root?: string;
|
|
96
|
+
zone?: string;
|
|
97
|
+
list?: string;
|
|
98
|
+
item?: string;
|
|
99
|
+
progress?: string;
|
|
100
|
+
actions?: string;
|
|
101
|
+
}
|
|
102
|
+
/** Props every preset understands. Presets ignore what doesn't fit their concept (documented per preset). */
|
|
103
|
+
interface PresetProps {
|
|
104
|
+
/** Replace the per-file card. */
|
|
105
|
+
renderFile?: (item: UploadItem, helpers: FileRenderHelpers) => ReactNode;
|
|
106
|
+
/** Replace the default drop-zone content (icon + headline). */
|
|
107
|
+
zoneContent?: ReactNode;
|
|
108
|
+
classNames?: UploadClassNames;
|
|
109
|
+
progressVariant?: ProgressVariant;
|
|
110
|
+
layout?: QueueLayout;
|
|
111
|
+
fileAnimations?: Partial<Record<FileKind, FileVisualizer>>;
|
|
112
|
+
/** Show the list of rejected files. Default true. */
|
|
113
|
+
showRejections?: boolean;
|
|
114
|
+
/** Headline/title override for presets with a header. */
|
|
115
|
+
title?: ReactNode;
|
|
116
|
+
description?: ReactNode;
|
|
117
|
+
}
|
|
118
|
+
interface UploadPreset extends Omit<PresetInfo, 'id'> {
|
|
119
|
+
id: PresetId | (string & {});
|
|
120
|
+
Component: ComponentType<PresetProps>;
|
|
121
|
+
}
|
|
122
|
+
//#endregion
|
|
123
|
+
//#region src/hooks/useDropzone.d.ts
|
|
124
|
+
type DragState = 'idle' | 'accept' | 'reject';
|
|
125
|
+
interface DropzoneOptions {
|
|
126
|
+
onFiles: (files: File[]) => void;
|
|
127
|
+
/** Parsed accept tokens (see `parseAccept`). */
|
|
128
|
+
accept?: readonly string[];
|
|
129
|
+
multiple?: boolean;
|
|
130
|
+
maxFiles?: number;
|
|
131
|
+
disabled?: boolean;
|
|
132
|
+
/** Mobile camera hint passed to the input (`capture` attribute). */
|
|
133
|
+
capture?: 'user' | 'environment';
|
|
134
|
+
/** Stop the browser from opening files dropped outside any drop zone. Default true. */
|
|
135
|
+
preventWindowDrop?: boolean;
|
|
136
|
+
}
|
|
137
|
+
interface DropPoint {
|
|
138
|
+
/** Client coordinates of the drop. */
|
|
139
|
+
x: number;
|
|
140
|
+
y: number;
|
|
141
|
+
at: number;
|
|
142
|
+
}
|
|
143
|
+
interface RootPropsOptions extends HTMLAttributes<HTMLElement> {
|
|
144
|
+
/** Make the zone itself a keyboard-focusable button. Use when it contains no other controls. */
|
|
145
|
+
focusable?: boolean;
|
|
146
|
+
/** Write `--um-px` / `--um-py` (0..1) pointer position CSS variables while hovering or dragging. */
|
|
147
|
+
trackPointer?: boolean;
|
|
148
|
+
/** Don't open the file dialog when the zone itself is clicked. */
|
|
149
|
+
noClick?: boolean;
|
|
150
|
+
'aria-label'?: string;
|
|
151
|
+
}
|
|
152
|
+
interface DropzoneApi {
|
|
153
|
+
dragState: DragState;
|
|
154
|
+
/** Files are being dragged over this zone. */
|
|
155
|
+
isDragActive: boolean;
|
|
156
|
+
/** Files are being dragged anywhere over the window. */
|
|
157
|
+
isWindowDrag: boolean;
|
|
158
|
+
lastDrop: DropPoint | null;
|
|
159
|
+
/** Synchronous read of the latest drop point – safe inside store event handlers fired during the drop. */
|
|
160
|
+
getLastDrop: () => DropPoint | null;
|
|
161
|
+
open: () => void;
|
|
162
|
+
inputRef: RefObject<HTMLInputElement | null>;
|
|
163
|
+
getRootProps: (options?: RootPropsOptions) => HTMLAttributes<HTMLElement> & Record<`data-${string}`, string | undefined>;
|
|
164
|
+
getInputProps: () => InputHTMLAttributes<HTMLInputElement> & {
|
|
165
|
+
ref: RefObject<HTMLInputElement | null>;
|
|
166
|
+
};
|
|
167
|
+
}
|
|
168
|
+
export declare function useDropzone(options: DropzoneOptions): DropzoneApi;
|
|
169
|
+
//#endregion
|
|
170
|
+
//#region src/hooks/useUploader.d.ts
|
|
171
|
+
interface UseUploaderOptions<TResponse = unknown> extends UploaderOptions<TResponse> {
|
|
172
|
+
/**
|
|
173
|
+
* Bring your own store (e.g. created at module level) so uploads survive
|
|
174
|
+
* unmounts. When omitted the hook owns a store and aborts its uploads on unmount.
|
|
175
|
+
*/
|
|
176
|
+
store?: UploadStore<TResponse>;
|
|
177
|
+
disabled?: boolean;
|
|
178
|
+
capture?: 'user' | 'environment';
|
|
179
|
+
preventWindowDrop?: boolean;
|
|
180
|
+
}
|
|
181
|
+
interface UploaderApi<TResponse = unknown> extends UploadSnapshot<TResponse> {
|
|
182
|
+
store: UploadStore<TResponse>;
|
|
183
|
+
dropzone: DropzoneApi;
|
|
184
|
+
/** Parsed accept tokens. */
|
|
185
|
+
accept: readonly string[];
|
|
186
|
+
disabled: boolean;
|
|
187
|
+
addFiles: UploadStore<TResponse>['addFiles'];
|
|
188
|
+
openFileDialog: () => void;
|
|
189
|
+
start: UploadStore<TResponse>['start'];
|
|
190
|
+
cancel: UploadStore<TResponse>['cancel'];
|
|
191
|
+
retry: UploadStore<TResponse>['retry'];
|
|
192
|
+
pause: UploadStore<TResponse>['pause'];
|
|
193
|
+
resume: UploadStore<TResponse>['resume'];
|
|
194
|
+
remove: UploadStore<TResponse>['remove'];
|
|
195
|
+
clear: (filter?: ClearFilter) => void;
|
|
196
|
+
dismissRejection: UploadStore<TResponse>['dismissRejection'];
|
|
197
|
+
}
|
|
198
|
+
/** Subscribe to any upload store. */
|
|
199
|
+
export declare function useUploadSnapshot<TResponse>(store: UploadStore<TResponse>): UploadSnapshot<TResponse>;
|
|
200
|
+
/**
|
|
201
|
+
* Headless uploader: queue state, actions and drag-and-drop wiring with no UI.
|
|
202
|
+
*
|
|
203
|
+
* ```tsx
|
|
204
|
+
* const uploader = useUploader({ upload: createXhrUploader({ url: '/api/upload' }) });
|
|
205
|
+
* <div {...uploader.dropzone.getRootProps({ focusable: true })}>
|
|
206
|
+
* <input {...uploader.dropzone.getInputProps()} />
|
|
207
|
+
* </div>
|
|
208
|
+
* ```
|
|
209
|
+
*/
|
|
210
|
+
export declare function useUploader<TResponse = unknown>(options?: UseUploaderOptions<TResponse>): UploaderApi<TResponse>;
|
|
211
|
+
//#endregion
|
|
212
|
+
//#region src/components/Uploader.d.ts
|
|
213
|
+
interface UploaderProps<TResponse = unknown> extends UseUploaderOptions<TResponse> {
|
|
214
|
+
appearance?: Appearance;
|
|
215
|
+
motion?: MotionOptions;
|
|
216
|
+
/** Override any UI string (i18n). */
|
|
217
|
+
labels?: Partial<Omit<UploadLabels, 'status'>> & {
|
|
218
|
+
status?: Partial<UploadLabels['status']>;
|
|
219
|
+
};
|
|
220
|
+
className?: string;
|
|
221
|
+
style?: CSSProperties;
|
|
222
|
+
id?: string;
|
|
223
|
+
children?: ReactNode;
|
|
224
|
+
}
|
|
225
|
+
/**
|
|
226
|
+
* Root of the composable API. Owns the upload store, the hidden file input,
|
|
227
|
+
* theme variables and the screen-reader announcer.
|
|
228
|
+
*/
|
|
229
|
+
export declare function Uploader<TResponse = unknown>(props: UploaderProps<TResponse>): import("react").JSX.Element;
|
|
230
|
+
//#endregion
|
|
231
|
+
//#region src/components/FileUpload.d.ts
|
|
232
|
+
interface FileUploadProps<TResponse = unknown> extends UploaderProps<TResponse>, Omit<PresetProps, 'title' | 'description'> {
|
|
233
|
+
/** Built-in preset id or a custom preset object. Default `"essential"`. */
|
|
234
|
+
preset?: PresetId | (string & {}) | UploadPreset;
|
|
235
|
+
/** Headline override for presets that show one. */
|
|
236
|
+
title?: PresetProps['title'];
|
|
237
|
+
description?: PresetProps['description'];
|
|
238
|
+
}
|
|
239
|
+
/**
|
|
240
|
+
* Ready-made animated uploader.
|
|
241
|
+
*
|
|
242
|
+
* ```tsx
|
|
243
|
+
* <FileUpload
|
|
244
|
+
* preset="wave-bar"
|
|
245
|
+
* upload={createXhrUploader({ url: '/api/upload' })}
|
|
246
|
+
* accept="image/*,.pdf"
|
|
247
|
+
* maxSize={20_000_000}
|
|
248
|
+
* />
|
|
249
|
+
* ```
|
|
250
|
+
*/
|
|
251
|
+
export declare function FileUpload<TResponse = unknown>(props: FileUploadProps<TResponse>): import("react").JSX.Element;
|
|
252
|
+
//#endregion
|
|
253
|
+
//#region src/animations/beam.d.ts
|
|
254
|
+
export declare const beamPreset: UploadPreset;
|
|
255
|
+
//#endregion
|
|
256
|
+
//#region src/animations/card-fan.d.ts
|
|
257
|
+
export declare const cardFanPreset: UploadPreset;
|
|
258
|
+
//#endregion
|
|
259
|
+
//#region src/animations/essential.d.ts
|
|
260
|
+
export declare const essentialPreset: UploadPreset;
|
|
261
|
+
//#endregion
|
|
262
|
+
//#region src/animations/hoop-shot.d.ts
|
|
263
|
+
export declare const hoopShotPreset: UploadPreset;
|
|
264
|
+
//#endregion
|
|
265
|
+
//#region src/animations/liquid.d.ts
|
|
266
|
+
export declare const liquidPreset: UploadPreset;
|
|
267
|
+
//#endregion
|
|
268
|
+
//#region src/animations/magnetic.d.ts
|
|
269
|
+
export declare const magneticPreset: UploadPreset;
|
|
270
|
+
//#endregion
|
|
271
|
+
//#region src/animations/media.d.ts
|
|
272
|
+
export declare const bloomPreset: UploadPreset;
|
|
273
|
+
export declare const pixelPreset: UploadPreset;
|
|
274
|
+
export declare const pageRevealPreset: UploadPreset;
|
|
275
|
+
export declare const filmstripPreset: UploadPreset;
|
|
276
|
+
export declare const waveformPreset: UploadPreset;
|
|
277
|
+
export declare const adaptivePreset: UploadPreset;
|
|
278
|
+
//#endregion
|
|
279
|
+
//#region src/animations/orbit.d.ts
|
|
280
|
+
export declare const orbitPreset: UploadPreset;
|
|
281
|
+
//#endregion
|
|
282
|
+
//#region src/animations/portal.d.ts
|
|
283
|
+
export declare const portalPreset: UploadPreset;
|
|
284
|
+
//#endregion
|
|
285
|
+
//#region src/animations/segment-ring.d.ts
|
|
286
|
+
export declare const segmentRingPreset: UploadPreset;
|
|
287
|
+
//#endregion
|
|
288
|
+
//#region src/animations/stack.d.ts
|
|
289
|
+
export declare const stackPreset: UploadPreset;
|
|
290
|
+
//#endregion
|
|
291
|
+
//#region src/animations/wave-bar.d.ts
|
|
292
|
+
export declare const waveBarPreset: UploadPreset;
|
|
293
|
+
//#endregion
|
|
294
|
+
//#region src/animations/index.d.ts
|
|
295
|
+
/** All built-in presets, in gallery order. */
|
|
296
|
+
export declare const presets: readonly UploadPreset[];
|
|
297
|
+
export declare function getPreset(id: PresetId | (string & {})): UploadPreset | undefined;
|
|
298
|
+
//#endregion
|
|
299
|
+
//#region src/components/context.d.ts
|
|
300
|
+
interface UploaderContextValue<TResponse = unknown> extends UploaderApi<TResponse> {
|
|
301
|
+
labels: UploadLabels;
|
|
302
|
+
motion: ResolvedMotion;
|
|
303
|
+
/** Human-readable accept/limit summary, e.g. "Images, PDF · up to 10 MB". */
|
|
304
|
+
hint: string;
|
|
305
|
+
hintId: string;
|
|
306
|
+
autoUpload: boolean;
|
|
307
|
+
}
|
|
308
|
+
/** Access the nearest `<Uploader>` / `<FileUpload>` state and actions. */
|
|
309
|
+
export declare function useUploaderContext<TResponse = unknown>(): UploaderContextValue<TResponse>;
|
|
310
|
+
//#endregion
|
|
311
|
+
//#region src/components/Dropzone.d.ts
|
|
312
|
+
interface UploadDropzoneProps {
|
|
313
|
+
children?: ReactNode;
|
|
314
|
+
className?: string;
|
|
315
|
+
style?: CSSProperties;
|
|
316
|
+
/**
|
|
317
|
+
* Make the whole zone a focusable button. Leave `false` (default) when the
|
|
318
|
+
* zone contains its own buttons, e.g. `<BrowseButton>`.
|
|
319
|
+
*/
|
|
320
|
+
focusable?: boolean;
|
|
321
|
+
/** Track the pointer into `--um-px` / `--um-py` CSS variables. */
|
|
322
|
+
trackPointer?: boolean;
|
|
323
|
+
'aria-label'?: string;
|
|
324
|
+
}
|
|
325
|
+
/** Drop target. Click anywhere (outside inner controls) to open the file dialog; paste works while focused. */
|
|
326
|
+
export declare function UploadDropzone({ children, className, style, focusable, trackPointer, ...rest }: UploadDropzoneProps): import("react").JSX.Element;
|
|
327
|
+
/** Default zone content: icon, headline, browse button and limits hint. */
|
|
328
|
+
export declare function DropzoneContent({ icon, title }: {
|
|
329
|
+
icon?: ReactNode;
|
|
330
|
+
title?: ReactNode;
|
|
331
|
+
}): import("react").JSX.Element;
|
|
332
|
+
export declare function UploadHint({ className }: {
|
|
333
|
+
className?: string;
|
|
334
|
+
}): import("react").JSX.Element;
|
|
335
|
+
interface BrowseButtonProps {
|
|
336
|
+
children?: ReactNode;
|
|
337
|
+
className?: string;
|
|
338
|
+
variant?: 'solid' | 'soft' | 'link' | 'icon';
|
|
339
|
+
'aria-label'?: string;
|
|
340
|
+
}
|
|
341
|
+
/** Keyboard-accessible trigger for the native file dialog. */
|
|
342
|
+
export declare function BrowseButton({ children, className, variant, ...rest }: BrowseButtonProps): import("react").JSX.Element;
|
|
343
|
+
/** Starts pending uploads in manual mode (`autoUpload={false}`). Shows aggregate progress while uploading. */
|
|
344
|
+
export declare function StartUploadButton({ className, children }: {
|
|
345
|
+
className?: string;
|
|
346
|
+
children?: ReactNode;
|
|
347
|
+
}): import("react").JSX.Element;
|
|
348
|
+
//#endregion
|
|
349
|
+
//#region src/components/FileList.d.ts
|
|
350
|
+
interface AnimatedListProps<T extends {
|
|
351
|
+
id: string;
|
|
352
|
+
}> {
|
|
353
|
+
items: readonly T[];
|
|
354
|
+
renderItem: (item: T, state: {
|
|
355
|
+
exiting: boolean;
|
|
356
|
+
index: number;
|
|
357
|
+
}) => ReactNode;
|
|
358
|
+
className?: string;
|
|
359
|
+
itemClassName?: string;
|
|
360
|
+
/** Exit animation length in ms. Default 320. */
|
|
361
|
+
exitDuration?: number;
|
|
362
|
+
as?: 'ul' | 'ol' | 'div';
|
|
363
|
+
/** Exposed as `data-layout` for styling (`list`, `grid`, …). */
|
|
364
|
+
layout?: string;
|
|
365
|
+
'aria-label'?: string;
|
|
366
|
+
}
|
|
367
|
+
/**
|
|
368
|
+
* List with enter/exit presence and FLIP re-layout animations.
|
|
369
|
+
* Generic so presets can animate any collection, not only upload items.
|
|
370
|
+
*/
|
|
371
|
+
export declare function AnimatedList<T extends {
|
|
372
|
+
id: string;
|
|
373
|
+
}>({ items, renderItem, className, itemClassName, exitDuration, as: Tag, layout, 'aria-label': ariaLabel }: AnimatedListProps<T>): import("react").JSX.Element;
|
|
374
|
+
interface UploadFileListProps {
|
|
375
|
+
layout?: QueueLayout;
|
|
376
|
+
progressVariant?: ProgressVariant;
|
|
377
|
+
renderFile?: (item: UploadItem, helpers: FileRenderHelpers) => ReactNode;
|
|
378
|
+
/** Defaults to every item in the queue. */
|
|
379
|
+
items?: readonly UploadItem[];
|
|
380
|
+
className?: string;
|
|
381
|
+
itemClassName?: string;
|
|
382
|
+
allowPause?: boolean;
|
|
383
|
+
}
|
|
384
|
+
/** The queue, rendered with `FileCard` (or your `renderFile`). */
|
|
385
|
+
export declare function UploadFileList({ layout, progressVariant, renderFile, items, className, itemClassName, allowPause }: UploadFileListProps): import("react").JSX.Element | null;
|
|
386
|
+
//#endregion
|
|
387
|
+
//#region src/components/FileItem.d.ts
|
|
388
|
+
/** Plain-language status line, e.g. "45% · 2.1 MB/s · 3 seconds left". */
|
|
389
|
+
export declare function describeItemStatus(item: UploadItem, labels: UploadLabels, transport: 'network' | 'simulated' | 'none'): string;
|
|
390
|
+
export declare function ItemStatus({ item, className }: {
|
|
391
|
+
item: UploadItem;
|
|
392
|
+
className?: string;
|
|
393
|
+
}): import("react").JSX.Element;
|
|
394
|
+
interface ActionButtonProps {
|
|
395
|
+
label: string;
|
|
396
|
+
onClick: () => void;
|
|
397
|
+
children: ReactNode;
|
|
398
|
+
tone?: 'default' | 'danger' | 'accent';
|
|
399
|
+
}
|
|
400
|
+
export declare function IconButton({ label, onClick, children, tone }: ActionButtonProps): import("react").JSX.Element;
|
|
401
|
+
/** Contextual actions for one file: start, pause/resume, cancel, retry, remove. */
|
|
402
|
+
export declare function ItemActions({ item, className, allowPause }: {
|
|
403
|
+
item: UploadItem;
|
|
404
|
+
className?: string;
|
|
405
|
+
allowPause?: boolean;
|
|
406
|
+
}): import("react").JSX.Element;
|
|
407
|
+
interface FileCardProps {
|
|
408
|
+
item: UploadItem;
|
|
409
|
+
progressVariant?: ProgressVariant;
|
|
410
|
+
className?: string;
|
|
411
|
+
/** Leading visual. Defaults to a thumbnail/icon. */
|
|
412
|
+
media?: ReactNode;
|
|
413
|
+
allowPause?: boolean;
|
|
414
|
+
/** Celebrate success with a particle burst. Default true. */
|
|
415
|
+
celebrate?: boolean;
|
|
416
|
+
}
|
|
417
|
+
/** The default animated file row used by list-based presets. */
|
|
418
|
+
export declare const FileCard: import("react").MemoExoticComponent<({ item, progressVariant, className, media, allowPause, celebrate }: FileCardProps) => import("react").JSX.Element>;
|
|
419
|
+
//#endregion
|
|
420
|
+
//#region src/components/Progress.d.ts
|
|
421
|
+
/** Builds a sine-like quadratic wave: `width` px wide, one crest every `period` px. */
|
|
422
|
+
export declare function wavePath(width: number, period: number, amplitude: number, baseline: number): string;
|
|
423
|
+
interface UploadProgressProps {
|
|
424
|
+
/** 0..1 */
|
|
425
|
+
value: number;
|
|
426
|
+
status?: UploadStatus;
|
|
427
|
+
variant?: ProgressVariant;
|
|
428
|
+
/** Accessible name, e.g. the file name. */
|
|
429
|
+
label?: string;
|
|
430
|
+
/** Accessible value text, e.g. "45%, 3 seconds left". */
|
|
431
|
+
valueText?: string;
|
|
432
|
+
/** Ring diameter in px (ring variant). */
|
|
433
|
+
size?: number;
|
|
434
|
+
className?: string;
|
|
435
|
+
}
|
|
436
|
+
/**
|
|
437
|
+
* Progress indicator with four styles. Animates with transforms/clip-path only,
|
|
438
|
+
* so it stays cheap even with many concurrent uploads.
|
|
439
|
+
*/
|
|
440
|
+
export declare function UploadProgress({ value, status, variant, label, valueText, size, className }: UploadProgressProps): import("react").JSX.Element;
|
|
441
|
+
//#endregion
|
|
442
|
+
//#region src/components/FileVisual.d.ts
|
|
443
|
+
interface FileIconProps {
|
|
444
|
+
kind: FileKind;
|
|
445
|
+
/** Badge text such as `PDF`. Omit to hide the badge. */
|
|
446
|
+
label?: string;
|
|
447
|
+
size?: number;
|
|
448
|
+
className?: string;
|
|
449
|
+
}
|
|
450
|
+
/** Paper-shaped file icon with a kind glyph and coloured extension badge. */
|
|
451
|
+
export declare function FileIcon({ kind, label, size, className }: FileIconProps): import("react").JSX.Element;
|
|
452
|
+
interface FilePreviewProps {
|
|
453
|
+
item: UploadItem;
|
|
454
|
+
size?: number;
|
|
455
|
+
/** Max bytes for generating an image preview. Default 25 MB. */
|
|
456
|
+
maxPreviewSize?: number;
|
|
457
|
+
className?: string;
|
|
458
|
+
rounded?: boolean;
|
|
459
|
+
}
|
|
460
|
+
/** Image thumbnail for previewable images, otherwise a `FileIcon`. Object URLs are revoked automatically. */
|
|
461
|
+
export declare function FilePreview({ item, size, maxPreviewSize, className }: FilePreviewProps): import("react").JSX.Element;
|
|
462
|
+
//#endregion
|
|
463
|
+
//#region src/components/Effects.d.ts
|
|
464
|
+
/** Stroke-drawn checkmark inside a circle. */
|
|
465
|
+
export declare function AnimatedCheck({ size, className }: {
|
|
466
|
+
size?: number;
|
|
467
|
+
className?: string;
|
|
468
|
+
}): import("react").JSX.Element;
|
|
469
|
+
interface BurstProps {
|
|
470
|
+
/** Base particle count before the `particles` motion multiplier. */
|
|
471
|
+
count?: number;
|
|
472
|
+
seed?: string;
|
|
473
|
+
/** Spread radius in px. */
|
|
474
|
+
spread?: number;
|
|
475
|
+
className?: string;
|
|
476
|
+
shape?: 'dot' | 'petal' | 'spark';
|
|
477
|
+
}
|
|
478
|
+
/**
|
|
479
|
+
* One-shot particle burst built from a handful of spans animated with CSS
|
|
480
|
+
* transforms. Mount it (e.g. with a key) to play; renders nothing for reduced
|
|
481
|
+
* motion or `particles: 0`.
|
|
482
|
+
*/
|
|
483
|
+
export declare function Burst({ count, seed, spread, className, shape }: BurstProps): import("react").JSX.Element | null;
|
|
484
|
+
//#endregion
|
|
485
|
+
//#region src/components/Status.d.ts
|
|
486
|
+
/** "Uploading 3 files" + "63% · 6.4 MB/s · 5 seconds left". */
|
|
487
|
+
export declare function useSummaryText(): {
|
|
488
|
+
title: string;
|
|
489
|
+
detail: string;
|
|
490
|
+
};
|
|
491
|
+
export declare function UploadSummary({ className }: {
|
|
492
|
+
className?: string;
|
|
493
|
+
}): import("react").JSX.Element;
|
|
494
|
+
/** Badge shown when the transport is simulated, so demos never pass fake progress off as real. */
|
|
495
|
+
export declare function TransportBadge({ className }: {
|
|
496
|
+
className?: string;
|
|
497
|
+
}): import("react").JSX.Element | null;
|
|
498
|
+
/** Dismissible list of files that failed validation, with the reason in text (not colour alone). */
|
|
499
|
+
export declare function UploadRejections({ className }: {
|
|
500
|
+
className?: string;
|
|
501
|
+
}): import("react").JSX.Element | null;
|
|
502
|
+
//#endregion
|
|
503
|
+
//#region src/components/Announcer.d.ts
|
|
504
|
+
/**
|
|
505
|
+
* Visually hidden live regions announcing lifecycle changes (not every
|
|
506
|
+
* progress tick). Errors use an assertive region.
|
|
507
|
+
*/
|
|
508
|
+
export declare function UploadAnnouncer(): import("react").JSX.Element;
|
|
509
|
+
//#endregion
|
|
510
|
+
//#region src/components/Menu.d.ts
|
|
511
|
+
interface MenuAction {
|
|
512
|
+
id: string;
|
|
513
|
+
label: string;
|
|
514
|
+
onSelect: () => void;
|
|
515
|
+
disabled?: boolean;
|
|
516
|
+
tone?: 'default' | 'danger';
|
|
517
|
+
}
|
|
518
|
+
interface ActionMenuProps {
|
|
519
|
+
label: string;
|
|
520
|
+
icon: ReactNode;
|
|
521
|
+
actions: MenuAction[];
|
|
522
|
+
className?: string;
|
|
523
|
+
align?: 'start' | 'end';
|
|
524
|
+
}
|
|
525
|
+
/** Small accessible menu button: arrow-key navigation, Escape to close, focus restored to the trigger. */
|
|
526
|
+
export declare function ActionMenu({ label, icon, actions, className, align }: ActionMenuProps): import("react").JSX.Element;
|
|
527
|
+
//#endregion
|
|
528
|
+
//#region src/animations/visualizers.d.ts
|
|
529
|
+
/** Image sharpens and saturates from the centre outward as bytes upload. */
|
|
530
|
+
export declare function BloomVisual({ item }: {
|
|
531
|
+
item: UploadItem;
|
|
532
|
+
}): import("react").JSX.Element;
|
|
533
|
+
/** A page whose lines are inked by a scanning beam. Text files show their real first lines. */
|
|
534
|
+
export declare function PageVisual({ item }: {
|
|
535
|
+
item: UploadItem;
|
|
536
|
+
}): import("react").JSX.Element;
|
|
537
|
+
/** Real frames extracted from the video light up one by one as it uploads. */
|
|
538
|
+
export declare function FilmstripVisual({ item }: {
|
|
539
|
+
item: UploadItem;
|
|
540
|
+
}): import("react").JSX.Element;
|
|
541
|
+
/** Waveform of the actual audio (decoded locally); a stable pseudo-waveform for other files. */
|
|
542
|
+
export declare function WaveformVisual({ item }: {
|
|
543
|
+
item: UploadItem;
|
|
544
|
+
}): import("react").JSX.Element;
|
|
545
|
+
/** Play/pause a local preview of an audio file. The object URL is created on first play and revoked on unmount. */
|
|
546
|
+
export declare function AudioPreviewButton({ item }: {
|
|
547
|
+
item: UploadItem;
|
|
548
|
+
}): import("react").JSX.Element | null;
|
|
549
|
+
/** The file assembles from flying pixels in a shuffled order driven by progress (one CSS variable, no per-cell renders). */
|
|
550
|
+
export declare const PixelVisual: import("react").MemoExoticComponent<({ item }: {
|
|
551
|
+
item: UploadItem;
|
|
552
|
+
}) => import("react").JSX.Element>;
|
|
553
|
+
/** Square tile with overlay meta – used by Bloom and Pixel presets. */
|
|
554
|
+
export declare const VisualTile: import("react").MemoExoticComponent<({ item, visual }: {
|
|
555
|
+
item: UploadItem;
|
|
556
|
+
visual: ReactNode;
|
|
557
|
+
}) => import("react").JSX.Element>;
|
|
558
|
+
/** Row with a visual on the left – used by Filmstrip, Waveform and Adaptive presets. */
|
|
559
|
+
export declare const VisualRow: import("react").MemoExoticComponent<({ item, visual, visualKind, leading }: {
|
|
560
|
+
item: UploadItem;
|
|
561
|
+
visual: ReactNode;
|
|
562
|
+
visualKind: FileVisualizer;
|
|
563
|
+
leading?: ReactNode;
|
|
564
|
+
}) => import("react").JSX.Element>;
|
|
565
|
+
//#endregion
|
|
566
|
+
//#region src/hooks/useMedia.d.ts
|
|
567
|
+
/**
|
|
568
|
+
* Object URL for an image preview, revoked automatically on unmount or when the
|
|
569
|
+
* file changes. Returns `null` for non-images and files above `maxSize` (large
|
|
570
|
+
* images are expensive to decode, so they get an icon instead).
|
|
571
|
+
*/
|
|
572
|
+
export declare function useFilePreview(item: Pick<UploadItem, 'file'> | null, maxSize?: number): string | null;
|
|
573
|
+
/**
|
|
574
|
+
* Extracts `count` evenly spaced frames from a local video as small JPEG data
|
|
575
|
+
* URLs. Everything happens in the browser; unsupported codecs yield `[]`.
|
|
576
|
+
*/
|
|
577
|
+
export declare function useVideoFrames(file: File | null, count: number, enabled?: boolean): string[];
|
|
578
|
+
/**
|
|
579
|
+
* Real waveform peaks decoded with the Web Audio API for audio files up to
|
|
580
|
+
* 30 MB; a stable pseudo waveform otherwise. `real` tells you which you got.
|
|
581
|
+
*/
|
|
582
|
+
export declare function useAudioPeaks(file: File | null, bars: number, enabled?: boolean): {
|
|
583
|
+
peaks: number[];
|
|
584
|
+
real: boolean;
|
|
585
|
+
};
|
|
586
|
+
/** First lines of small text-like files, for document previews. `null` when not applicable. */
|
|
587
|
+
export declare function useTextSnippet(item: Pick<UploadItem, 'file' | 'kind' | 'size'> | null, lines?: number): string[] | null;
|
|
588
|
+
//#endregion
|
|
589
|
+
//#region src/hooks/useListAnimation.d.ts
|
|
590
|
+
interface PresenceEntry<T> {
|
|
591
|
+
item: T;
|
|
592
|
+
exiting: boolean;
|
|
593
|
+
}
|
|
594
|
+
/**
|
|
595
|
+
* Keeps removed items rendered for `exitMs` so they can animate out.
|
|
596
|
+
* Removed items are re-inserted at their previous index.
|
|
597
|
+
*/
|
|
598
|
+
export declare function usePresence<T extends {
|
|
599
|
+
id: string;
|
|
600
|
+
}>(items: readonly T[], exitMs: number): PresenceEntry<T>[];
|
|
601
|
+
/**
|
|
602
|
+
* FLIP layout animation: when the set/order of `[data-flip-id]` children
|
|
603
|
+
* changes, children animate from their old offset to the new one using WAAPI.
|
|
604
|
+
*/
|
|
605
|
+
export declare function useFlip(containerRef: RefObject<HTMLElement | null>, layoutKey: string, enabled: boolean, duration?: number): void;
|
|
606
|
+
//#endregion
|
|
607
|
+
//#region src/hooks/utils.d.ts
|
|
608
|
+
/** `true` when the OS asks for reduced motion. Always `false` during SSR. */
|
|
609
|
+
export declare function usePrefersReducedMotion(): boolean;
|
|
610
|
+
//#endregion
|
|
611
|
+
//#region src/themes/index.d.ts
|
|
612
|
+
/** Converts appearance + motion settings to inline CSS custom properties. Unset values fall back to the stylesheet. */
|
|
613
|
+
export declare function appearanceToStyle(appearance: Appearance | undefined, motion: ResolvedMotion): CSSProperties;
|
|
614
|
+
export declare function resolveMotion(motion: MotionOptions | undefined, prefersReduced: boolean): ResolvedMotion;
|
|
615
|
+
export declare const defaultLabels: UploadLabels;
|
|
616
|
+
//#endregion
|
|
617
|
+
export { type ActionMenuProps, type AddFilesResult, type AnimatedListProps, type Appearance, type BrowseButtonProps, type BurstProps, type ClearFilter, type CustomValidator, type Density, type DragState, type DropPoint, type DropzoneApi, type DropzoneOptions, type FileCardProps, type FileIconProps, type FileKind, type FilePreviewProps, type FileRejection, type FileRenderHelpers, type FileUploadProps, type FileVisualizer, type MenuAction, type MotionOptions, PRESET_INFO, type PresetCategory, type PresetId, type PresetInfo, type PresetProps, type ProgressVariant, type QueueLayout, type RejectionCode, type RejectionReason, type ResolvedMotion, type RetryOptions, type SimulatedUploaderOptions, type ThemeMode, type UploadClassNames, type UploadContext, type UploadDropzoneProps, UploadError, type UploadErrorCode, type UploadEventMap, type UploadFileListProps, type UploadHandler, type UploadItem, type UploadLabels, type UploadPreset, type UploadProgressProps, type UploadSnapshot, type UploadStatus, type UploadStore, type UploadTotals, type UploaderApi, type UploaderContextValue, type UploaderOptions, type UploaderProps, type UseUploaderOptions, type XhrUploaderOptions, clamp01, computeTotals, createSimulatedUploader, createUploadStore, createXhrUploader, describeAccept, formatBytes, formatDuration, formatPercent, formatSpeed, getExtension, getFileKind, getFileLabel, httpErrorMessage, isFileAccepted, isPreviewableImage, isUploadError, parseAccept, presetCatalog, toUploadError, validateFile };
|