@freightos/freightwind 2.1.3 → 2.1.4

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.
@@ -0,0 +1,321 @@
1
+ "use strict";
2
+ 'use client';
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.uploadVariants = exports.Upload = void 0;
5
+ const jsx_runtime_1 = require("react/jsx-runtime");
6
+ const react_1 = require("react");
7
+ const class_variance_authority_1 = require("class-variance-authority");
8
+ const react_direction_1 = require("@radix-ui/react-direction");
9
+ const utils_1 = require("../lib/utils");
10
+ const icon_utils_1 = require("../lib/icon-utils");
11
+ const use_stable_id_1 = require("../lib/use-stable-id");
12
+ const file_extensions_1 = require("../lib/file-extensions");
13
+ const uploadVariants = (0, class_variance_authority_1.cva)('fw-base group relative flex select-none rounded-fds-md outline-none transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-fds-blue-30 has-[:focus-visible]:ring-offset-2', {
14
+ variants: {
15
+ variant: {
16
+ rectangle: 'items-center gap-fds-sm p-fds-lg',
17
+ square: 'h-[99px] w-[100px] flex-col items-center justify-center gap-[10px] px-[26px] py-[23px]',
18
+ },
19
+ state: {
20
+ default: 'cursor-pointer justify-center bg-fds-gray-10 dark:bg-fds-gray-90',
21
+ forbidden: 'cursor-not-allowed justify-center bg-fds-gray-10 dark:bg-fds-gray-90',
22
+ uploading: 'cursor-uploading justify-center border border-solid border-fds-gray-30 bg-fds-gray-10 dark:border-fds-gray-70 dark:bg-fds-gray-90',
23
+ 'uploading-spinner': 'cursor-uploading justify-center border border-solid border-fds-gray-30 bg-fds-gray-10 dark:border-fds-gray-70 dark:bg-fds-gray-90',
24
+ success: 'cursor-pointer border border-solid border-fds-blue-30 bg-fds-gray-10 hover:border-fds-blue-40 dark:border-fds-blue-30 dark:bg-fds-gray-90',
25
+ error: 'cursor-not-allowed border border-solid border-fds-red-30 bg-fds-gray-10 dark:border-fds-red-30 dark:bg-fds-gray-90',
26
+ disabled: 'cursor-not-allowed-gray border border-solid border-fds-gray-30 bg-fds-gray-10 text-fds-gray-50 [&_*]:pointer-events-none dark:border-fds-gray-70 dark:bg-fds-gray-90 dark:text-fds-gray-50',
27
+ },
28
+ },
29
+ defaultVariants: { variant: 'rectangle', state: 'default' },
30
+ });
31
+ exports.uploadVariants = uploadVariants;
32
+ const DEFAULT_LABELS = {
33
+ idleTitle: 'Upload your document',
34
+ idleSubtitle: 'Click or drag your file here',
35
+ idleCompact: 'Upload',
36
+ uploading: 'Uploading…',
37
+ forbidden: {
38
+ multiple: { title: 'Oops!', subtitle: 'You can only drag one file', compact: 'Oops!' },
39
+ type: { title: 'Oops!', subtitle: 'Unsupported file format', compact: 'Oops!' },
40
+ size: { title: 'Oops!', subtitle: 'File is too large', compact: 'Oops!' },
41
+ extension: { title: 'Oops!', subtitle: 'Invalid file extension', compact: 'Oops!' },
42
+ custom: { title: 'Oops!', subtitle: 'This file is not allowed', compact: 'Oops!' },
43
+ },
44
+ };
45
+ const DEFAULT_ICONS = {
46
+ idleRectangle: 'document',
47
+ idleSquare: 'plus',
48
+ forbidden: 'block',
49
+ success: 'check-circled',
50
+ error: 'clear-circled',
51
+ uploading: 'loading',
52
+ remove: 'trash',
53
+ };
54
+ const identity = (k) => k;
55
+ function truncateMiddle(name, max) {
56
+ if (name.length <= max)
57
+ return name;
58
+ const dot = name.lastIndexOf('.');
59
+ const ext = dot > 0 ? name.slice(dot) : '';
60
+ const head = name.slice(0, Math.max(2, Math.floor((max - ext.length - 1) / 2)));
61
+ return `${head}…${ext || name.slice(-Math.max(2, Math.floor(max / 2)))}`;
62
+ }
63
+ function buildFileLabel(allFiles, isSquare) {
64
+ const names = allFiles.map((f) => f.name);
65
+ const tooltip = names.join('\n');
66
+ if (names.length === 1) {
67
+ return { display: isSquare ? truncateMiddle(names[0], 12) : names[0], tooltip };
68
+ }
69
+ const shown = names.slice(0, 2).map((n) => truncateMiddle(n, 12));
70
+ const extra = names.length - 2;
71
+ const display = shown.join(', ') + (extra > 0 ? `, +${extra}` : '');
72
+ return { display, tooltip };
73
+ }
74
+ const EXT_TO_MIME = {
75
+ '.pdf': ['application/pdf'],
76
+ '.png': ['image/png'],
77
+ '.jpg': ['image/jpeg'],
78
+ '.jpeg': ['image/jpeg'],
79
+ '.gif': ['image/gif'],
80
+ '.webp': ['image/webp'],
81
+ '.svg': ['image/svg+xml'],
82
+ '.xlsx': ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
83
+ '.xls': ['application/vnd.ms-excel'],
84
+ '.csv': ['text/csv', 'application/csv', 'text/plain'],
85
+ '.doc': ['application/msword'],
86
+ '.docx': ['application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
87
+ '.txt': ['text/plain'],
88
+ '.zip': ['application/zip', 'application/x-zip-compressed'],
89
+ };
90
+ function mimeMatchesAccept(mime, accept) {
91
+ return accept.some((rule) => {
92
+ if (rule.endsWith('/*'))
93
+ return mime.startsWith(rule.slice(0, -1));
94
+ if (rule.startsWith('.'))
95
+ return (EXT_TO_MIME[rule.toLowerCase()] ?? []).includes(mime);
96
+ return mime === rule;
97
+ });
98
+ }
99
+ function extMatchesAccept(filename, accept) {
100
+ const dot = filename.lastIndexOf('.');
101
+ if (dot < 0)
102
+ return false;
103
+ const ext = filename.slice(dot).toLowerCase();
104
+ return accept.some((rule) => rule.toLowerCase() === ext);
105
+ }
106
+ function fileMatchesAccept(file, accept) {
107
+ return mimeMatchesAccept(file.type, accept) || extMatchesAccept(file.name, accept);
108
+ }
109
+ function validateDragItems(items, { maxFiles, accept, alreadyHeld = 0 }) {
110
+ const limit = maxFiles ?? 1;
111
+ if (items.length + alreadyHeld > limit)
112
+ return { ok: false, reason: 'multiple' };
113
+ if (accept && accept.length > 0) {
114
+ for (let i = 0; i < items.length; i++) {
115
+ const item = items[i];
116
+ if (!item || item.kind !== 'file')
117
+ continue;
118
+ if (!mimeMatchesAccept(item.type, accept))
119
+ return { ok: false, reason: 'type' };
120
+ }
121
+ }
122
+ return { ok: true };
123
+ }
124
+ function validatePickedFile(file, { accept, maxSize }) {
125
+ if (!(0, file_extensions_1.hasValidExtension)(file.name))
126
+ return { ok: false, reason: 'extension' };
127
+ if (accept && accept.length > 0 && !fileMatchesAccept(file, accept)) {
128
+ return { ok: false, reason: 'type' };
129
+ }
130
+ if (maxSize != null && file.size > maxSize)
131
+ return { ok: false, reason: 'size' };
132
+ return { ok: true };
133
+ }
134
+ exports.Upload = (0, react_1.forwardRef)(function Upload({ dataTestId, variant = 'rectangle', value, files: filesProp, maxFiles, accept, maxSize, isError = false, isDisabled = false, isFillContainer = false, labels, t = identity, onUpload, onRemove, onForbidden, ariaLabel, defaultUploading = false, defaultUploadProgress, defaultForbidden, uploadingStyle = 'progress', className, ...rest }, ref) {
135
+ const inputId = (0, use_stable_id_1.useStableId)('upload');
136
+ const dir = (0, react_direction_1.useDirection)();
137
+ const [forbiddenReason, setForbiddenReason] = (0, react_1.useState)(defaultForbidden ?? null);
138
+ const [isUploading, setIsUploading] = (0, react_1.useState)(defaultUploading);
139
+ const [uploadProgress, setUploadProgress] = (0, react_1.useState)(defaultUploadProgress ?? null);
140
+ const mergedLabels = { ...DEFAULT_LABELS, ...labels };
141
+ const mergedForbidden = {
142
+ ...DEFAULT_LABELS.forbidden,
143
+ ...(labels?.forbidden ?? {}),
144
+ };
145
+ const fbCopy = mergedForbidden[forbiddenReason ?? 'multiple'];
146
+ const allFiles = filesProp ?? (value ? [value] : []);
147
+ const hasFiles = allFiles.length > 0;
148
+ const effectiveState = isDisabled
149
+ ? 'disabled'
150
+ : forbiddenReason
151
+ ? 'forbidden'
152
+ : isUploading
153
+ ? uploadingStyle === 'spinner' ? 'uploading-spinner' : 'uploading'
154
+ : isError
155
+ ? 'error'
156
+ : hasFiles
157
+ ? 'success'
158
+ : 'default';
159
+ const isSquare = variant === 'square';
160
+ const isMultiple = maxFiles == null || maxFiles > 1;
161
+ const acceptAttr = accept?.join(',');
162
+ const triggerUpload = (selected) => {
163
+ if (selected.length === 0)
164
+ return;
165
+ onUpload?.(selected, (v, progress) => {
166
+ setIsUploading(v);
167
+ setUploadProgress(v && progress !== undefined ? progress : null);
168
+ });
169
+ };
170
+ const handleDragEnter = (e) => {
171
+ if (isDisabled)
172
+ return;
173
+ e.preventDefault();
174
+ const result = validateDragItems(e.dataTransfer.items, { maxFiles, accept: accept, alreadyHeld: allFiles.length });
175
+ if (!result.ok) {
176
+ setForbiddenReason(result.reason);
177
+ onForbidden?.(result.reason);
178
+ }
179
+ };
180
+ const handleDragLeave = (e) => {
181
+ if (e.currentTarget.contains(e.relatedTarget))
182
+ return;
183
+ setForbiddenReason(null);
184
+ };
185
+ const handleDrop = (e) => {
186
+ if (isDisabled)
187
+ return;
188
+ e.preventDefault();
189
+ setForbiddenReason(null);
190
+ const dropped = Array.from(e.dataTransfer.files);
191
+ const limit = maxFiles ?? 1;
192
+ if (dropped.length + allFiles.length > limit) {
193
+ setForbiddenReason('multiple');
194
+ onForbidden?.('multiple');
195
+ return;
196
+ }
197
+ for (const f of dropped) {
198
+ const result = validatePickedFile(f, { accept: accept, maxSize });
199
+ if (!result.ok) {
200
+ setForbiddenReason(result.reason);
201
+ onForbidden?.(result.reason);
202
+ return;
203
+ }
204
+ }
205
+ triggerUpload(dropped);
206
+ };
207
+ const handleNativeChange = (e) => {
208
+ const selected = Array.from(e.target.files ?? []);
209
+ e.target.value = '';
210
+ const limit = maxFiles ?? 1;
211
+ if (selected.length + allFiles.length > limit) {
212
+ setForbiddenReason('multiple');
213
+ onForbidden?.('multiple');
214
+ return;
215
+ }
216
+ for (const f of selected) {
217
+ const result = validatePickedFile(f, { accept: accept, maxSize });
218
+ if (!result.ok) {
219
+ setForbiddenReason(result.reason);
220
+ onForbidden?.(result.reason);
221
+ return;
222
+ }
223
+ }
224
+ setForbiddenReason(null);
225
+ triggerUpload(selected);
226
+ };
227
+ const handleRemoveClick = (e) => {
228
+ e.preventDefault();
229
+ e.stopPropagation();
230
+ onRemove?.();
231
+ };
232
+ const renderIdle = () => {
233
+ const idleIconName = isSquare ? DEFAULT_ICONS.idleSquare : DEFAULT_ICONS.idleRectangle;
234
+ const IconCmp = icon_utils_1.iconMap[idleIconName];
235
+ const tone = effectiveState === 'disabled'
236
+ ? 'text-fds-gray-50 dark:text-fds-gray-50'
237
+ : 'text-fds-gray-80 dark:text-fds-gray-20';
238
+ if (!isSquare) {
239
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconCmp, { size: "md", className: (0, utils_1.cn)('shrink-0 rtl:scale-x-[-1]', tone), "aria-hidden": true, "data-test-id": `${dataTestId}-idle-icon` }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-fds-xs text-start", children: [(0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('w-[130px] text-fds-sm font-fds-regular leading-fds-body', tone), "data-test-id": `${dataTestId}-idle-title`, children: t(mergedLabels.idleTitle) }), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('w-[132px] text-fds-xs font-fds-bold leading-fds-body', tone), "data-test-id": `${dataTestId}-idle-subtitle`, children: t(mergedLabels.idleSubtitle) })] })] }));
240
+ }
241
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconCmp, { className: (0, utils_1.cn)('w-[18.67px] h-[18.67px]', tone), "aria-hidden": true, "data-test-id": `${dataTestId}-idle-icon` }), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('w-12 text-fds-base font-fds-regular leading-fds-body', tone), "data-test-id": `${dataTestId}-idle-compact`, children: t(mergedLabels.idleCompact) })] }));
242
+ };
243
+ const renderForbidden = () => {
244
+ const IconCmp = icon_utils_1.iconMap[DEFAULT_ICONS.forbidden];
245
+ if (!isSquare) {
246
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconCmp, { size: "md", className: "shrink-0 text-fds-red-30", "aria-hidden": true, "data-test-id": `${dataTestId}-forbidden-icon` }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-fds-xs text-start", "aria-live": "polite", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-[130px] text-fds-sm font-fds-regular leading-fds-body text-fds-red-30", "data-test-id": `${dataTestId}-forbidden-title`, children: t(fbCopy?.title ?? '') }), (0, jsx_runtime_1.jsx)("span", { className: "w-[132px] text-fds-xs font-fds-bold leading-fds-body text-fds-red-30", "data-test-id": `${dataTestId}-forbidden-subtitle`, children: t(fbCopy?.subtitle ?? '') })] })] }));
247
+ }
248
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconCmp, { size: "lg", className: "text-fds-red-30", "aria-hidden": true, "data-test-id": `${dataTestId}-forbidden-icon` }), (0, jsx_runtime_1.jsx)("span", { className: "text-fds-base font-fds-regular leading-fds-body text-fds-red-30", "data-test-id": `${dataTestId}-forbidden-compact`, children: t(mergedLabels.idleCompact) })] }));
249
+ };
250
+ const renderUploading = () => {
251
+ const SpinnerIcon = icon_utils_1.iconMap[DEFAULT_ICONS.uploading];
252
+ if (uploadingStyle === 'spinner') {
253
+ return ((0, jsx_runtime_1.jsx)(SpinnerIcon, { size: "lg", role: "status", "aria-label": t(mergedLabels.uploading), className: "animate-spin text-fds-blue-30 rtl:direction-[reverse]", "data-test-id": `${dataTestId}-uploading-indicator` }));
254
+ }
255
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col gap-fds-sm", "data-test-id": `${dataTestId}-uploading-indicator`, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('font-fds-regular leading-fds-body text-fds-gray-80 dark:text-fds-gray-20', isSquare ? 'w-full text-fds-base' : 'w-[67px] text-fds-sm'), children: t(mergedLabels.uploading) }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('relative h-0.5 overflow-hidden rounded-[6px] bg-fds-gray-20 dark:bg-fds-gray-70', isSquare ? 'w-full' : 'w-[165px]'), role: "progressbar", "aria-valuenow": uploadProgress !== null ? Math.round(uploadProgress * 100) : undefined, "aria-valuemin": uploadProgress !== null ? 0 : undefined, "aria-valuemax": uploadProgress !== null ? 100 : undefined, "aria-label": t(mergedLabels.uploading), children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('absolute inset-y-0 start-0 rounded-[6px] bg-fds-green-30 upload-progress-bar', uploadProgress === null
256
+ ? 'w-1/2 animate-[uploading-progress_1.4s_ease-in-out_infinite]'
257
+ : 'transition-[width] duration-200 ease-in-out'), style: uploadProgress !== null ? { width: `${uploadProgress * 100}%` } : undefined }) })] }));
258
+ };
259
+ const renderFilled = (tone) => {
260
+ const tokenColor = tone === 'success'
261
+ ? 'text-fds-blue-30'
262
+ : tone === 'error'
263
+ ? 'text-fds-red-30'
264
+ : 'text-fds-gray-30 dark:text-fds-gray-50';
265
+ const accent = tone === 'success'
266
+ ? 'text-fds-green-30'
267
+ : tone === 'error'
268
+ ? 'text-fds-red-30'
269
+ : 'text-fds-gray-30 dark:text-fds-gray-50';
270
+ const StatusIcon = icon_utils_1.iconMap[tone === 'error' ? DEFAULT_ICONS.error : DEFAULT_ICONS.success];
271
+ const RemoveIcon = icon_utils_1.iconMap[DEFAULT_ICONS.remove];
272
+ const { display, tooltip } = buildFileLabel(allFiles, isSquare);
273
+ const statusIconNode = tone === 'success' ? (isSquare
274
+ ? (0, jsx_runtime_1.jsx)(StatusIcon, { size: "lg", className: (0, utils_1.cn)('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })
275
+ : (0, jsx_runtime_1.jsx)(StatusIcon, { className: (0, utils_1.cn)('shrink-0 w-[13.33px] h-[13.33px]', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })) : tone === 'error' ? (isSquare
276
+ ? (0, jsx_runtime_1.jsx)(StatusIcon, { size: "lg", className: (0, utils_1.cn)('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })
277
+ : (0, jsx_runtime_1.jsx)(StatusIcon, { size: "sm", className: (0, utils_1.cn)('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })) : tone === 'disabled' ? (isSquare
278
+ ? (0, jsx_runtime_1.jsx)(StatusIcon, { size: "lg", className: (0, utils_1.cn)('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })
279
+ : (0, jsx_runtime_1.jsx)(StatusIcon, { size: "sm", className: (0, utils_1.cn)('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` })) : ((0, jsx_runtime_1.jsx)(StatusIcon, { size: isSquare ? 'md' : 'xs', className: (0, utils_1.cn)('shrink-0', accent), "aria-hidden": true, "data-test-id": `${dataTestId}-status-icon` }));
280
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [statusIconNode, (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('truncate font-fds-regular leading-fds-body', isSquare && (tone === 'error' || tone === 'disabled') ? 'text-fds-base' : 'text-fds-sm', !isSquare && !isFillContainer && 'min-w-0 flex-1', !isSquare && isFillContainer && 'min-w-0', tokenColor, isSquare && 'w-full text-center'), title: tooltip, "data-test-id": `${dataTestId}-filename`, children: display }), !isSquare && hasFiles && tone !== 'disabled' && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleRemoveClick, "aria-label": t('Remove all files'), "data-test-id": `${dataTestId}-remove`, className: (0, utils_1.cn)('inline-flex size-6 shrink-0 items-center justify-center rounded-fds-sm focus-visible:outline-none focus-visible:ring-2 cursor-pointer text-fds-red-30 hover:bg-fds-red-05 focus-visible:ring-fds-red-30 dark:hover:bg-fds-red-30/10', !isFillContainer && 'ms-auto'), children: (0, jsx_runtime_1.jsx)(RemoveIcon, { size: "sm", "aria-hidden": true }) }))] }));
281
+ };
282
+ let body = null;
283
+ switch (effectiveState) {
284
+ case 'default':
285
+ body = renderIdle();
286
+ break;
287
+ case 'disabled':
288
+ body = hasFiles ? renderFilled('disabled') : renderIdle();
289
+ break;
290
+ case 'forbidden':
291
+ body = renderForbidden();
292
+ break;
293
+ case 'uploading':
294
+ case 'uploading-spinner':
295
+ body = renderUploading();
296
+ break;
297
+ case 'success':
298
+ body = renderFilled('success');
299
+ break;
300
+ case 'error':
301
+ body = ((0, jsx_runtime_1.jsx)("div", { role: "alert", className: "contents", children: renderFilled('error') }));
302
+ break;
303
+ }
304
+ const isFilled = effectiveState === 'uploading' ||
305
+ effectiveState === 'uploading-spinner' ||
306
+ effectiveState === 'success' ||
307
+ effectiveState === 'error' ||
308
+ (effectiveState === 'disabled' && hasFiles);
309
+ const frameSize = isSquare
310
+ ? ''
311
+ : isFillContainer
312
+ ? isFilled ? 'h-full w-full justify-center' : 'h-full w-full'
313
+ : effectiveState === 'forbidden'
314
+ ? 'h-[69px] w-[193px]'
315
+ : isFilled
316
+ ? 'h-[60px] w-[198px]'
317
+ : 'h-[69px] w-[196px]';
318
+ return ((0, jsx_runtime_1.jsxs)("label", { ref: ref, htmlFor: inputId, "data-test-id": dataTestId, "data-state": effectiveState, "data-variant": variant, "data-filled": hasFiles ? 'true' : 'false', dir: dir, "aria-label": ariaLabel ?? t(mergedLabels.idleTitle), "aria-disabled": isDisabled || undefined, "aria-busy": (effectiveState === 'uploading' || effectiveState === 'uploading-spinner') || undefined, className: (0, utils_1.cn)(uploadVariants({ variant, state: effectiveState }), effectiveState === 'default' && (isSquare ? 'upload-dash-4-2-square' : isFillContainer ? 'upload-dash-fluid' : 'upload-dash-4-2'), effectiveState === 'forbidden' && (isSquare
319
+ ? 'h-[100px] gap-[4px] upload-dash-4-4'
320
+ : isFillContainer ? 'upload-dash-fluid-red' : 'upload-dash-4-2-red'), (effectiveState === 'uploading' || effectiveState === 'uploading-spinner') && isSquare && 'h-[100px] p-[11px]!', effectiveState === 'success' && isSquare && 'h-[100px] gap-[4px]', effectiveState === 'error' && isSquare && 'h-[100px] gap-[4px] p-[11px]!', effectiveState === 'disabled' && isSquare && hasFiles && 'h-[100px] gap-[4px] p-[11px]!', effectiveState === 'uploading-spinner' && !isSquare && 'py-3.5!', frameSize, className), onDragEnter: handleDragEnter, onDragOver: (e) => e.preventDefault(), onDragLeave: handleDragLeave, onDrop: handleDrop, ...rest, children: [(0, jsx_runtime_1.jsx)("input", { id: inputId, type: "file", accept: acceptAttr, multiple: isMultiple, disabled: isDisabled, className: "sr-only", onChange: handleNativeChange, "data-test-id": `${dataTestId}-input` }), body] }));
321
+ });
package/dist/cjs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.renderInputIcon = exports.iconMap = exports.useStableId = exports.cn = void 0;
3
+ exports.uploadVariants = exports.Upload = exports.renderInputIcon = exports.iconMap = exports.useStableId = exports.cn = void 0;
4
4
  // Utilities
5
5
  var utils_1 = require("./lib/utils");
6
6
  Object.defineProperty(exports, "cn", { enumerable: true, get: function () { return utils_1.cn; } });
@@ -9,3 +9,7 @@ Object.defineProperty(exports, "useStableId", { enumerable: true, get: function
9
9
  var icon_utils_1 = require("./lib/icon-utils");
10
10
  Object.defineProperty(exports, "iconMap", { enumerable: true, get: function () { return icon_utils_1.iconMap; } });
11
11
  Object.defineProperty(exports, "renderInputIcon", { enumerable: true, get: function () { return icon_utils_1.renderInputIcon; } });
12
+ // Components
13
+ var upload_1 = require("./components/upload");
14
+ Object.defineProperty(exports, "Upload", { enumerable: true, get: function () { return upload_1.Upload; } });
15
+ Object.defineProperty(exports, "uploadVariants", { enumerable: true, get: function () { return upload_1.uploadVariants; } });