@ibanzajoe/uploader 0.1.0 → 0.3.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/README.md +83 -0
- package/dist/index.cjs +752 -289
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +193 -9
- package/dist/index.d.ts +193 -9
- package/dist/index.js +750 -291
- package/dist/index.js.map +1 -1
- package/dist/styles.css +561 -129
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -3,6 +3,96 @@ export { C as CropParams, O as OutputParams, a as PolicySpec, Q as QualityParams
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import React__default, { CSSProperties } from 'react';
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* Theming — map a plain token object to scoped CSS custom properties.
|
|
8
|
+
*
|
|
9
|
+
* The SDK is styled entirely from `--uploader-*` CSS custom properties (see
|
|
10
|
+
* styles.css). A host React app can override them in its own stylesheet, but
|
|
11
|
+
* that overrides every instance on the page and requires writing CSS.
|
|
12
|
+
*
|
|
13
|
+
* The `theme` prop on PickerOverlay / DropPane lets a host pass those tokens as
|
|
14
|
+
* a plain object instead. `themeToVars` converts the object into inline CSS
|
|
15
|
+
* variables applied to the component's own root element, so the override is
|
|
16
|
+
* **scoped to that instance** — two pickers on one page can carry different
|
|
17
|
+
* themes, and nothing leaks to the rest of the app.
|
|
18
|
+
*
|
|
19
|
+
* Only the keys you set are emitted; everything else falls back to the shipped
|
|
20
|
+
* defaults. Fully backward compatible — omit `theme` and behaviour is unchanged.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* <PickerOverlay
|
|
24
|
+
* theme={{ accent: '#4f46e5', accentSoft: '#eef2ff', radius: '12px' }}
|
|
25
|
+
* apikey="pk_..."
|
|
26
|
+
* open={open}
|
|
27
|
+
* onClose={close}
|
|
28
|
+
* />
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Host-overridable design tokens. Each maps to one `--uploader-*` CSS variable.
|
|
33
|
+
* All optional — set only what you want to change. Values are raw CSS strings
|
|
34
|
+
* (e.g. '#4f46e5', 'rgba(79,70,229,.28)', '12px', '0.2s ease').
|
|
35
|
+
*/
|
|
36
|
+
type UploaderTheme = {
|
|
37
|
+
/** Primary brand color. → `--uploader-accent` */
|
|
38
|
+
accent?: string;
|
|
39
|
+
/** Hover/active shade of the accent. → `--uploader-accent-hover` */
|
|
40
|
+
accentHover?: string;
|
|
41
|
+
/** Tinted fill for icon swatches and hover backgrounds. → `--uploader-accent-soft` */
|
|
42
|
+
accentSoft?: string;
|
|
43
|
+
/** Focus ring / drag-over glow (≈20–30% opacity of accent). → `--uploader-accent-ring` */
|
|
44
|
+
accentRing?: string;
|
|
45
|
+
/** Corner radius for panels, buttons, inputs. → `--uploader-radius` */
|
|
46
|
+
radius?: string;
|
|
47
|
+
/** Base surface / panel background. → `--uploader-bg` */
|
|
48
|
+
background?: string;
|
|
49
|
+
/** Secondary surface (rows, wells). → `--uploader-surface` */
|
|
50
|
+
surface?: string;
|
|
51
|
+
/** Hover state for secondary surfaces. → `--uploader-surface-hover` */
|
|
52
|
+
surfaceHover?: string;
|
|
53
|
+
/** Default border color. → `--uploader-border` */
|
|
54
|
+
border?: string;
|
|
55
|
+
/** Subtle/hairline border color. → `--uploader-border-subtle` */
|
|
56
|
+
borderSubtle?: string;
|
|
57
|
+
/** Primary text color. → `--uploader-text` */
|
|
58
|
+
text?: string;
|
|
59
|
+
/** Muted/secondary text. → `--uploader-text-muted` */
|
|
60
|
+
textMuted?: string;
|
|
61
|
+
/** Extra-muted text (hints, captions). → `--uploader-text-xmuted` */
|
|
62
|
+
textXMuted?: string;
|
|
63
|
+
/** Error color. → `--uploader-error` */
|
|
64
|
+
error?: string;
|
|
65
|
+
/** Tinted error background. → `--uploader-error-soft` */
|
|
66
|
+
errorSoft?: string;
|
|
67
|
+
/** Success color. → `--uploader-success` */
|
|
68
|
+
success?: string;
|
|
69
|
+
/** Small elevation shadow. → `--uploader-shadow-sm` */
|
|
70
|
+
shadowSm?: string;
|
|
71
|
+
/** Default elevation shadow. → `--uploader-shadow` */
|
|
72
|
+
shadow?: string;
|
|
73
|
+
/** Large elevation shadow (modal panel). → `--uploader-shadow-lg` */
|
|
74
|
+
shadowLg?: string;
|
|
75
|
+
/** Font family. Defaults to `inherit`. → `--uploader-font` */
|
|
76
|
+
font?: string;
|
|
77
|
+
/** Transition timing. → `--uploader-transition` */
|
|
78
|
+
transition?: string;
|
|
79
|
+
/** z-index of the modal backdrop. → `--uploader-z-backdrop` */
|
|
80
|
+
zBackdrop?: number | string;
|
|
81
|
+
/** z-index of the modal panel. → `--uploader-z-panel` */
|
|
82
|
+
zPanel?: number | string;
|
|
83
|
+
};
|
|
84
|
+
/**
|
|
85
|
+
* Convert a theme object into a style object of CSS custom properties.
|
|
86
|
+
*
|
|
87
|
+
* Returns an empty object when `theme` is undefined/empty, so it is safe to
|
|
88
|
+
* spread unconditionally. `undefined` token values are skipped (no var emitted),
|
|
89
|
+
* letting the shipped default apply.
|
|
90
|
+
*
|
|
91
|
+
* Merge it ahead of any host `style` so the host can still override per-instance:
|
|
92
|
+
* style={{ ...themeToVars(theme), ...style }}
|
|
93
|
+
*/
|
|
94
|
+
declare function themeToVars(theme?: UploaderTheme): React__default.CSSProperties;
|
|
95
|
+
|
|
6
96
|
/**
|
|
7
97
|
* React picker prop and state types.
|
|
8
98
|
*
|
|
@@ -42,10 +132,22 @@ type PickerOptions = {
|
|
|
42
132
|
/** Maximum file size in bytes. Files above this are rejected at selection. */
|
|
43
133
|
maxSize?: number;
|
|
44
134
|
/**
|
|
45
|
-
* Upload sources
|
|
46
|
-
*
|
|
135
|
+
* Upload sources offered to the user.
|
|
136
|
+
* 'local_file_system' — drag-and-drop + Browse files (always available)
|
|
137
|
+
* 'camera' — capture a photo from the device camera
|
|
138
|
+
*
|
|
139
|
+
* When omitted, all supported sources are offered (camera appears only when
|
|
140
|
+
* the browser supports getUserMedia and the picker accepts images). Pass an
|
|
141
|
+
* explicit list to restrict the sources — e.g. ['local_file_system'] hides
|
|
142
|
+
* the camera even where it is supported.
|
|
143
|
+
*/
|
|
144
|
+
fromSources?: Array<'local_file_system' | 'camera'>;
|
|
145
|
+
/**
|
|
146
|
+
* Preferred camera when the 'camera' source is used.
|
|
147
|
+
* 'user' — front / selfie camera (mirrored). Default.
|
|
148
|
+
* 'environment' — rear camera.
|
|
47
149
|
*/
|
|
48
|
-
|
|
150
|
+
cameraFacingMode?: 'user' | 'environment';
|
|
49
151
|
};
|
|
50
152
|
/** Props shared by PickerOverlay and DropPane. */
|
|
51
153
|
type SharedPickerProps = {
|
|
@@ -107,6 +209,11 @@ type UsePickerResult = {
|
|
|
107
209
|
* Opens when `open={true}`. Calls `onClose` when the user dismisses via ESC,
|
|
108
210
|
* the backdrop click, or the Cancel button. `onUploadDone` fires after all
|
|
109
211
|
* selected files have been uploaded.
|
|
212
|
+
*
|
|
213
|
+
* Composes Dropzone, FileQueueRow, and ProgressBar primitives from the #194
|
|
214
|
+
* foundation — no hard-coded brand colors.
|
|
215
|
+
*
|
|
216
|
+
* @dsCard PickerOverlay
|
|
110
217
|
*/
|
|
111
218
|
|
|
112
219
|
type PickerOverlayProps = SharedPickerProps & {
|
|
@@ -114,12 +221,18 @@ type PickerOverlayProps = SharedPickerProps & {
|
|
|
114
221
|
open: boolean;
|
|
115
222
|
/** Called when the modal should close (ESC, backdrop, cancel). */
|
|
116
223
|
onClose: () => void;
|
|
224
|
+
/**
|
|
225
|
+
* Design tokens to override, scoped to this picker instance. Maps to
|
|
226
|
+
* `--uploader-*` CSS variables applied on the overlay root — see UploaderTheme.
|
|
227
|
+
* Omit to use the shipped defaults (or page-level CSS-variable overrides).
|
|
228
|
+
*/
|
|
229
|
+
theme?: UploaderTheme;
|
|
117
230
|
/** Additional CSS class(es) applied to the modal panel. */
|
|
118
231
|
className?: string;
|
|
119
232
|
/** Inline styles applied to the modal panel. */
|
|
120
233
|
style?: React__default.CSSProperties;
|
|
121
234
|
};
|
|
122
|
-
declare function PickerOverlay({ open, onClose, apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, className, style, }: PickerOverlayProps): React__default.JSX.Element | null;
|
|
235
|
+
declare function PickerOverlay({ open, onClose, apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, theme, className, style, }: PickerOverlayProps): React__default.JSX.Element | null;
|
|
123
236
|
|
|
124
237
|
/**
|
|
125
238
|
* DropPane — inline drag-and-drop upload zone.
|
|
@@ -127,18 +240,89 @@ declare function PickerOverlay({ open, onClose, apikey, apiUrl, security, picker
|
|
|
127
240
|
* A non-modal file drop target that renders in-place. Suitable for embedding
|
|
128
241
|
* directly in a page (e.g. a form upload field) rather than as a modal overlay.
|
|
129
242
|
*
|
|
130
|
-
*
|
|
131
|
-
*
|
|
132
|
-
*
|
|
243
|
+
* Composes the Dropzone, FileQueueRow, and ProgressBar primitives from the
|
|
244
|
+
* #194 foundation. All colors resolve from --uploader-* CSS variables —
|
|
245
|
+
* no hard-coded brand colors.
|
|
246
|
+
*
|
|
247
|
+
* States:
|
|
248
|
+
* idle — Dropzone shown, queue empty
|
|
249
|
+
* dragging-over — Dropzone fills with accent-soft, label changes to
|
|
250
|
+
* "Drop to add files" (handled inside Dropzone via isDragOver)
|
|
251
|
+
* queued — Dropzone collapses; file list + Upload/Cancel shown
|
|
252
|
+
* uploading — File rows show per-file progress; aggregate ProgressBar shown
|
|
253
|
+
* done — Files show done state; onUploadDone fires
|
|
254
|
+
*
|
|
255
|
+
* The host supplies any surrounding form chrome (labels, Skip/Continue buttons)
|
|
256
|
+
* as normal JSX siblings — DropPane does not render those.
|
|
257
|
+
*
|
|
258
|
+
* @dsCard DropPane
|
|
133
259
|
*/
|
|
134
260
|
|
|
135
261
|
type DropPaneProps = SharedPickerProps & {
|
|
262
|
+
/**
|
|
263
|
+
* Hint text shown below the Browse button in the dropzone.
|
|
264
|
+
* Default: "or click to browse · max 50 MB"
|
|
265
|
+
*/
|
|
266
|
+
hint?: string;
|
|
267
|
+
/**
|
|
268
|
+
* Design tokens to override, scoped to this pane instance. Maps to
|
|
269
|
+
* `--uploader-*` CSS variables applied on the root element — see UploaderTheme.
|
|
270
|
+
* Omit to use the shipped defaults (or page-level CSS-variable overrides).
|
|
271
|
+
*/
|
|
272
|
+
theme?: UploaderTheme;
|
|
136
273
|
/** Additional CSS class(es) applied to the root element. */
|
|
137
274
|
className?: string;
|
|
138
275
|
/** Inline styles applied to the root element. */
|
|
139
276
|
style?: React__default.CSSProperties;
|
|
140
277
|
};
|
|
141
|
-
declare function DropPane({ apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, className, style, }: DropPaneProps): React__default.JSX.Element;
|
|
278
|
+
declare function DropPane({ apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, hint, theme, className, style, }: DropPaneProps): React__default.JSX.Element;
|
|
279
|
+
|
|
280
|
+
/**
|
|
281
|
+
* CameraCapture — in-picker webcam capture.
|
|
282
|
+
*
|
|
283
|
+
* Requests the device camera via getUserMedia, shows a live preview, and lets
|
|
284
|
+
* the user snap a still. The capture is reviewed (Retake / Use photo) before it
|
|
285
|
+
* leaves the component as a regular image `File`, so it flows into the picker
|
|
286
|
+
* queue identically to a dropped or browsed file — preview, edit, and upload.
|
|
287
|
+
*
|
|
288
|
+
* Front ('user') cameras are mirrored in both the preview and the captured
|
|
289
|
+
* still so the selfie matches what the user sees. The MediaStream is stopped on
|
|
290
|
+
* unmount, on capture (to release the camera indicator while reviewing), and on
|
|
291
|
+
* cancel.
|
|
292
|
+
*
|
|
293
|
+
* All colors resolve from --uploader-* CSS variables — no hard-coded brand
|
|
294
|
+
* colors. Used by PickerOverlay and DropPane.
|
|
295
|
+
*
|
|
296
|
+
* @dsCard CameraCapture
|
|
297
|
+
*/
|
|
298
|
+
|
|
299
|
+
/** True when the current environment can open a camera stream. */
|
|
300
|
+
declare function isCameraSupported(): boolean;
|
|
301
|
+
/**
|
|
302
|
+
* Decide whether the picker should offer the camera source, given the picker
|
|
303
|
+
* options and the current environment. The camera is offered when:
|
|
304
|
+
* - the browser supports getUserMedia, AND
|
|
305
|
+
* - the accept filter permits images, AND
|
|
306
|
+
* - fromSources is unset or explicitly includes 'camera'.
|
|
307
|
+
*/
|
|
308
|
+
declare function shouldOfferCamera(options?: PickerOptions): boolean;
|
|
309
|
+
type CameraCaptureProps = {
|
|
310
|
+
/** Called with the captured still when the user confirms "Use photo". */
|
|
311
|
+
onCapture: (file: File) => void;
|
|
312
|
+
/** Called when the user backs out without capturing. */
|
|
313
|
+
onCancel: () => void;
|
|
314
|
+
/** Which camera to prefer. 'user' = front (mirrored), 'environment' = rear. */
|
|
315
|
+
facingMode?: 'user' | 'environment';
|
|
316
|
+
/** Output MIME type for the still. Default 'image/jpeg'. */
|
|
317
|
+
outputType?: string;
|
|
318
|
+
/** Quality 0–1 for lossy output. Default 0.92. */
|
|
319
|
+
quality?: number;
|
|
320
|
+
/** Base name for the produced file (extension is derived). Default 'camera-photo'. */
|
|
321
|
+
fileNamePrefix?: string;
|
|
322
|
+
className?: string;
|
|
323
|
+
style?: React__default.CSSProperties;
|
|
324
|
+
};
|
|
325
|
+
declare function CameraCapture({ onCapture, onCancel, facingMode, outputType, quality, fileNamePrefix, className, style, }: CameraCaptureProps): React__default.JSX.Element;
|
|
142
326
|
|
|
143
327
|
type UsePickerOptions = UploaderClientOptions & {
|
|
144
328
|
pickerOptions?: PickerOptions;
|
|
@@ -205,4 +389,4 @@ type EditImageOptions = {
|
|
|
205
389
|
};
|
|
206
390
|
declare function editImage(file: File, opts?: EditImageOptions): Promise<File>;
|
|
207
391
|
|
|
208
|
-
export { type CropArea, DropPane, type DropPaneProps, type EditImageOptions, FileResult, type Flip, ImageEditor, type ImageEditorProps, type PickerFile, type PickerFileState, type PickerOptions, PickerOverlay, type PickerOverlayProps, PickerResponse, type SharedPickerProps, UploaderClientOptions, type UsePickerOptions, type UsePickerResult, editImage, usePicker };
|
|
392
|
+
export { CameraCapture, type CameraCaptureProps, type CropArea, DropPane, type DropPaneProps, type EditImageOptions, FileResult, type Flip, ImageEditor, type ImageEditorProps, type PickerFile, type PickerFileState, type PickerOptions, PickerOverlay, type PickerOverlayProps, PickerResponse, type SharedPickerProps, UploaderClientOptions, type UploaderTheme, type UsePickerOptions, type UsePickerResult, editImage, isCameraSupported, shouldOfferCamera, themeToVars, usePicker };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,96 @@ export { C as CropParams, O as OutputParams, a as PolicySpec, Q as QualityParams
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import React__default, { CSSProperties } from 'react';
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* Theming — map a plain token object to scoped CSS custom properties.
|
|
8
|
+
*
|
|
9
|
+
* The SDK is styled entirely from `--uploader-*` CSS custom properties (see
|
|
10
|
+
* styles.css). A host React app can override them in its own stylesheet, but
|
|
11
|
+
* that overrides every instance on the page and requires writing CSS.
|
|
12
|
+
*
|
|
13
|
+
* The `theme` prop on PickerOverlay / DropPane lets a host pass those tokens as
|
|
14
|
+
* a plain object instead. `themeToVars` converts the object into inline CSS
|
|
15
|
+
* variables applied to the component's own root element, so the override is
|
|
16
|
+
* **scoped to that instance** — two pickers on one page can carry different
|
|
17
|
+
* themes, and nothing leaks to the rest of the app.
|
|
18
|
+
*
|
|
19
|
+
* Only the keys you set are emitted; everything else falls back to the shipped
|
|
20
|
+
* defaults. Fully backward compatible — omit `theme` and behaviour is unchanged.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* <PickerOverlay
|
|
24
|
+
* theme={{ accent: '#4f46e5', accentSoft: '#eef2ff', radius: '12px' }}
|
|
25
|
+
* apikey="pk_..."
|
|
26
|
+
* open={open}
|
|
27
|
+
* onClose={close}
|
|
28
|
+
* />
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Host-overridable design tokens. Each maps to one `--uploader-*` CSS variable.
|
|
33
|
+
* All optional — set only what you want to change. Values are raw CSS strings
|
|
34
|
+
* (e.g. '#4f46e5', 'rgba(79,70,229,.28)', '12px', '0.2s ease').
|
|
35
|
+
*/
|
|
36
|
+
type UploaderTheme = {
|
|
37
|
+
/** Primary brand color. → `--uploader-accent` */
|
|
38
|
+
accent?: string;
|
|
39
|
+
/** Hover/active shade of the accent. → `--uploader-accent-hover` */
|
|
40
|
+
accentHover?: string;
|
|
41
|
+
/** Tinted fill for icon swatches and hover backgrounds. → `--uploader-accent-soft` */
|
|
42
|
+
accentSoft?: string;
|
|
43
|
+
/** Focus ring / drag-over glow (≈20–30% opacity of accent). → `--uploader-accent-ring` */
|
|
44
|
+
accentRing?: string;
|
|
45
|
+
/** Corner radius for panels, buttons, inputs. → `--uploader-radius` */
|
|
46
|
+
radius?: string;
|
|
47
|
+
/** Base surface / panel background. → `--uploader-bg` */
|
|
48
|
+
background?: string;
|
|
49
|
+
/** Secondary surface (rows, wells). → `--uploader-surface` */
|
|
50
|
+
surface?: string;
|
|
51
|
+
/** Hover state for secondary surfaces. → `--uploader-surface-hover` */
|
|
52
|
+
surfaceHover?: string;
|
|
53
|
+
/** Default border color. → `--uploader-border` */
|
|
54
|
+
border?: string;
|
|
55
|
+
/** Subtle/hairline border color. → `--uploader-border-subtle` */
|
|
56
|
+
borderSubtle?: string;
|
|
57
|
+
/** Primary text color. → `--uploader-text` */
|
|
58
|
+
text?: string;
|
|
59
|
+
/** Muted/secondary text. → `--uploader-text-muted` */
|
|
60
|
+
textMuted?: string;
|
|
61
|
+
/** Extra-muted text (hints, captions). → `--uploader-text-xmuted` */
|
|
62
|
+
textXMuted?: string;
|
|
63
|
+
/** Error color. → `--uploader-error` */
|
|
64
|
+
error?: string;
|
|
65
|
+
/** Tinted error background. → `--uploader-error-soft` */
|
|
66
|
+
errorSoft?: string;
|
|
67
|
+
/** Success color. → `--uploader-success` */
|
|
68
|
+
success?: string;
|
|
69
|
+
/** Small elevation shadow. → `--uploader-shadow-sm` */
|
|
70
|
+
shadowSm?: string;
|
|
71
|
+
/** Default elevation shadow. → `--uploader-shadow` */
|
|
72
|
+
shadow?: string;
|
|
73
|
+
/** Large elevation shadow (modal panel). → `--uploader-shadow-lg` */
|
|
74
|
+
shadowLg?: string;
|
|
75
|
+
/** Font family. Defaults to `inherit`. → `--uploader-font` */
|
|
76
|
+
font?: string;
|
|
77
|
+
/** Transition timing. → `--uploader-transition` */
|
|
78
|
+
transition?: string;
|
|
79
|
+
/** z-index of the modal backdrop. → `--uploader-z-backdrop` */
|
|
80
|
+
zBackdrop?: number | string;
|
|
81
|
+
/** z-index of the modal panel. → `--uploader-z-panel` */
|
|
82
|
+
zPanel?: number | string;
|
|
83
|
+
};
|
|
84
|
+
/**
|
|
85
|
+
* Convert a theme object into a style object of CSS custom properties.
|
|
86
|
+
*
|
|
87
|
+
* Returns an empty object when `theme` is undefined/empty, so it is safe to
|
|
88
|
+
* spread unconditionally. `undefined` token values are skipped (no var emitted),
|
|
89
|
+
* letting the shipped default apply.
|
|
90
|
+
*
|
|
91
|
+
* Merge it ahead of any host `style` so the host can still override per-instance:
|
|
92
|
+
* style={{ ...themeToVars(theme), ...style }}
|
|
93
|
+
*/
|
|
94
|
+
declare function themeToVars(theme?: UploaderTheme): React__default.CSSProperties;
|
|
95
|
+
|
|
6
96
|
/**
|
|
7
97
|
* React picker prop and state types.
|
|
8
98
|
*
|
|
@@ -42,10 +132,22 @@ type PickerOptions = {
|
|
|
42
132
|
/** Maximum file size in bytes. Files above this are rejected at selection. */
|
|
43
133
|
maxSize?: number;
|
|
44
134
|
/**
|
|
45
|
-
* Upload sources
|
|
46
|
-
*
|
|
135
|
+
* Upload sources offered to the user.
|
|
136
|
+
* 'local_file_system' — drag-and-drop + Browse files (always available)
|
|
137
|
+
* 'camera' — capture a photo from the device camera
|
|
138
|
+
*
|
|
139
|
+
* When omitted, all supported sources are offered (camera appears only when
|
|
140
|
+
* the browser supports getUserMedia and the picker accepts images). Pass an
|
|
141
|
+
* explicit list to restrict the sources — e.g. ['local_file_system'] hides
|
|
142
|
+
* the camera even where it is supported.
|
|
143
|
+
*/
|
|
144
|
+
fromSources?: Array<'local_file_system' | 'camera'>;
|
|
145
|
+
/**
|
|
146
|
+
* Preferred camera when the 'camera' source is used.
|
|
147
|
+
* 'user' — front / selfie camera (mirrored). Default.
|
|
148
|
+
* 'environment' — rear camera.
|
|
47
149
|
*/
|
|
48
|
-
|
|
150
|
+
cameraFacingMode?: 'user' | 'environment';
|
|
49
151
|
};
|
|
50
152
|
/** Props shared by PickerOverlay and DropPane. */
|
|
51
153
|
type SharedPickerProps = {
|
|
@@ -107,6 +209,11 @@ type UsePickerResult = {
|
|
|
107
209
|
* Opens when `open={true}`. Calls `onClose` when the user dismisses via ESC,
|
|
108
210
|
* the backdrop click, or the Cancel button. `onUploadDone` fires after all
|
|
109
211
|
* selected files have been uploaded.
|
|
212
|
+
*
|
|
213
|
+
* Composes Dropzone, FileQueueRow, and ProgressBar primitives from the #194
|
|
214
|
+
* foundation — no hard-coded brand colors.
|
|
215
|
+
*
|
|
216
|
+
* @dsCard PickerOverlay
|
|
110
217
|
*/
|
|
111
218
|
|
|
112
219
|
type PickerOverlayProps = SharedPickerProps & {
|
|
@@ -114,12 +221,18 @@ type PickerOverlayProps = SharedPickerProps & {
|
|
|
114
221
|
open: boolean;
|
|
115
222
|
/** Called when the modal should close (ESC, backdrop, cancel). */
|
|
116
223
|
onClose: () => void;
|
|
224
|
+
/**
|
|
225
|
+
* Design tokens to override, scoped to this picker instance. Maps to
|
|
226
|
+
* `--uploader-*` CSS variables applied on the overlay root — see UploaderTheme.
|
|
227
|
+
* Omit to use the shipped defaults (or page-level CSS-variable overrides).
|
|
228
|
+
*/
|
|
229
|
+
theme?: UploaderTheme;
|
|
117
230
|
/** Additional CSS class(es) applied to the modal panel. */
|
|
118
231
|
className?: string;
|
|
119
232
|
/** Inline styles applied to the modal panel. */
|
|
120
233
|
style?: React__default.CSSProperties;
|
|
121
234
|
};
|
|
122
|
-
declare function PickerOverlay({ open, onClose, apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, className, style, }: PickerOverlayProps): React__default.JSX.Element | null;
|
|
235
|
+
declare function PickerOverlay({ open, onClose, apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, theme, className, style, }: PickerOverlayProps): React__default.JSX.Element | null;
|
|
123
236
|
|
|
124
237
|
/**
|
|
125
238
|
* DropPane — inline drag-and-drop upload zone.
|
|
@@ -127,18 +240,89 @@ declare function PickerOverlay({ open, onClose, apikey, apiUrl, security, picker
|
|
|
127
240
|
* A non-modal file drop target that renders in-place. Suitable for embedding
|
|
128
241
|
* directly in a page (e.g. a form upload field) rather than as a modal overlay.
|
|
129
242
|
*
|
|
130
|
-
*
|
|
131
|
-
*
|
|
132
|
-
*
|
|
243
|
+
* Composes the Dropzone, FileQueueRow, and ProgressBar primitives from the
|
|
244
|
+
* #194 foundation. All colors resolve from --uploader-* CSS variables —
|
|
245
|
+
* no hard-coded brand colors.
|
|
246
|
+
*
|
|
247
|
+
* States:
|
|
248
|
+
* idle — Dropzone shown, queue empty
|
|
249
|
+
* dragging-over — Dropzone fills with accent-soft, label changes to
|
|
250
|
+
* "Drop to add files" (handled inside Dropzone via isDragOver)
|
|
251
|
+
* queued — Dropzone collapses; file list + Upload/Cancel shown
|
|
252
|
+
* uploading — File rows show per-file progress; aggregate ProgressBar shown
|
|
253
|
+
* done — Files show done state; onUploadDone fires
|
|
254
|
+
*
|
|
255
|
+
* The host supplies any surrounding form chrome (labels, Skip/Continue buttons)
|
|
256
|
+
* as normal JSX siblings — DropPane does not render those.
|
|
257
|
+
*
|
|
258
|
+
* @dsCard DropPane
|
|
133
259
|
*/
|
|
134
260
|
|
|
135
261
|
type DropPaneProps = SharedPickerProps & {
|
|
262
|
+
/**
|
|
263
|
+
* Hint text shown below the Browse button in the dropzone.
|
|
264
|
+
* Default: "or click to browse · max 50 MB"
|
|
265
|
+
*/
|
|
266
|
+
hint?: string;
|
|
267
|
+
/**
|
|
268
|
+
* Design tokens to override, scoped to this pane instance. Maps to
|
|
269
|
+
* `--uploader-*` CSS variables applied on the root element — see UploaderTheme.
|
|
270
|
+
* Omit to use the shipped defaults (or page-level CSS-variable overrides).
|
|
271
|
+
*/
|
|
272
|
+
theme?: UploaderTheme;
|
|
136
273
|
/** Additional CSS class(es) applied to the root element. */
|
|
137
274
|
className?: string;
|
|
138
275
|
/** Inline styles applied to the root element. */
|
|
139
276
|
style?: React__default.CSSProperties;
|
|
140
277
|
};
|
|
141
|
-
declare function DropPane({ apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, className, style, }: DropPaneProps): React__default.JSX.Element;
|
|
278
|
+
declare function DropPane({ apikey, apiUrl, security, pickerOptions, onUploadDone, onFileUploadFinished, onFileUploadFailed, onCancel, hint, theme, className, style, }: DropPaneProps): React__default.JSX.Element;
|
|
279
|
+
|
|
280
|
+
/**
|
|
281
|
+
* CameraCapture — in-picker webcam capture.
|
|
282
|
+
*
|
|
283
|
+
* Requests the device camera via getUserMedia, shows a live preview, and lets
|
|
284
|
+
* the user snap a still. The capture is reviewed (Retake / Use photo) before it
|
|
285
|
+
* leaves the component as a regular image `File`, so it flows into the picker
|
|
286
|
+
* queue identically to a dropped or browsed file — preview, edit, and upload.
|
|
287
|
+
*
|
|
288
|
+
* Front ('user') cameras are mirrored in both the preview and the captured
|
|
289
|
+
* still so the selfie matches what the user sees. The MediaStream is stopped on
|
|
290
|
+
* unmount, on capture (to release the camera indicator while reviewing), and on
|
|
291
|
+
* cancel.
|
|
292
|
+
*
|
|
293
|
+
* All colors resolve from --uploader-* CSS variables — no hard-coded brand
|
|
294
|
+
* colors. Used by PickerOverlay and DropPane.
|
|
295
|
+
*
|
|
296
|
+
* @dsCard CameraCapture
|
|
297
|
+
*/
|
|
298
|
+
|
|
299
|
+
/** True when the current environment can open a camera stream. */
|
|
300
|
+
declare function isCameraSupported(): boolean;
|
|
301
|
+
/**
|
|
302
|
+
* Decide whether the picker should offer the camera source, given the picker
|
|
303
|
+
* options and the current environment. The camera is offered when:
|
|
304
|
+
* - the browser supports getUserMedia, AND
|
|
305
|
+
* - the accept filter permits images, AND
|
|
306
|
+
* - fromSources is unset or explicitly includes 'camera'.
|
|
307
|
+
*/
|
|
308
|
+
declare function shouldOfferCamera(options?: PickerOptions): boolean;
|
|
309
|
+
type CameraCaptureProps = {
|
|
310
|
+
/** Called with the captured still when the user confirms "Use photo". */
|
|
311
|
+
onCapture: (file: File) => void;
|
|
312
|
+
/** Called when the user backs out without capturing. */
|
|
313
|
+
onCancel: () => void;
|
|
314
|
+
/** Which camera to prefer. 'user' = front (mirrored), 'environment' = rear. */
|
|
315
|
+
facingMode?: 'user' | 'environment';
|
|
316
|
+
/** Output MIME type for the still. Default 'image/jpeg'. */
|
|
317
|
+
outputType?: string;
|
|
318
|
+
/** Quality 0–1 for lossy output. Default 0.92. */
|
|
319
|
+
quality?: number;
|
|
320
|
+
/** Base name for the produced file (extension is derived). Default 'camera-photo'. */
|
|
321
|
+
fileNamePrefix?: string;
|
|
322
|
+
className?: string;
|
|
323
|
+
style?: React__default.CSSProperties;
|
|
324
|
+
};
|
|
325
|
+
declare function CameraCapture({ onCapture, onCancel, facingMode, outputType, quality, fileNamePrefix, className, style, }: CameraCaptureProps): React__default.JSX.Element;
|
|
142
326
|
|
|
143
327
|
type UsePickerOptions = UploaderClientOptions & {
|
|
144
328
|
pickerOptions?: PickerOptions;
|
|
@@ -205,4 +389,4 @@ type EditImageOptions = {
|
|
|
205
389
|
};
|
|
206
390
|
declare function editImage(file: File, opts?: EditImageOptions): Promise<File>;
|
|
207
391
|
|
|
208
|
-
export { type CropArea, DropPane, type DropPaneProps, type EditImageOptions, FileResult, type Flip, ImageEditor, type ImageEditorProps, type PickerFile, type PickerFileState, type PickerOptions, PickerOverlay, type PickerOverlayProps, PickerResponse, type SharedPickerProps, UploaderClientOptions, type UsePickerOptions, type UsePickerResult, editImage, usePicker };
|
|
392
|
+
export { CameraCapture, type CameraCaptureProps, type CropArea, DropPane, type DropPaneProps, type EditImageOptions, FileResult, type Flip, ImageEditor, type ImageEditorProps, type PickerFile, type PickerFileState, type PickerOptions, PickerOverlay, type PickerOverlayProps, PickerResponse, type SharedPickerProps, UploaderClientOptions, type UploaderTheme, type UsePickerOptions, type UsePickerResult, editImage, isCameraSupported, shouldOfferCamera, themeToVars, usePicker };
|