react-file-upload-ui 0.1.2 → 0.1.5
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 +31 -1
- package/dist/index.js +244 -112
- package/dist/index.mjs +244 -112
- package/dist/styles.css +2 -0
- package/package.json +12 -6
package/README.md
CHANGED
|
@@ -20,15 +20,45 @@ pnpm add react-file-upload-ui
|
|
|
20
20
|
|
|
21
21
|
## Usage
|
|
22
22
|
|
|
23
|
+
**Important:** You must import the CSS file for the component to be styled correctly.
|
|
24
|
+
|
|
23
25
|
```tsx
|
|
24
26
|
import React from "react";
|
|
25
27
|
import ReactFileUploaderUI from "react-file-upload-ui";
|
|
28
|
+
import "react-file-upload-ui/styles.css"; // ← Import the styles
|
|
26
29
|
|
|
27
30
|
export default function App() {
|
|
28
|
-
|
|
31
|
+
const handleFilesSelected = (files) => {
|
|
32
|
+
console.log("Selected files:", files);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<div style={{ padding: "2rem" }}>
|
|
37
|
+
<ReactFileUploaderUI
|
|
38
|
+
accept="image/*"
|
|
39
|
+
maxSize={10 * 1024 * 1024}
|
|
40
|
+
maxFiles={10}
|
|
41
|
+
onFilesSelected={handleFilesSelected}
|
|
42
|
+
/>
|
|
43
|
+
</div>
|
|
44
|
+
);
|
|
29
45
|
}
|
|
30
46
|
```
|
|
31
47
|
|
|
48
|
+
## Props
|
|
49
|
+
|
|
50
|
+
| Prop | Type | Default | Description |
|
|
51
|
+
| ----------------- | ------------------------------ | ---------- | ----------------------------------------------- |
|
|
52
|
+
| `accept` | `string` | - | File types to accept (e.g., "image/\*", ".pdf") |
|
|
53
|
+
| `multiple` | `boolean` | `true` | Allow multiple file selection |
|
|
54
|
+
| `maxSize` | `number` | `10485760` | Maximum file size in bytes (default: 10MB) |
|
|
55
|
+
| `maxFiles` | `number` | `10` | Maximum number of files |
|
|
56
|
+
| `onFilesSelected` | `(files: IFileData[]) => void` | - | Callback when files are selected |
|
|
57
|
+
| `onError` | `(error: string) => void` | - | Callback when an error occurs |
|
|
58
|
+
| `disabled` | `boolean` | `false` | Disable the file uploader |
|
|
59
|
+
| `className` | `string` | `""` | Additional CSS classes |
|
|
60
|
+
| `defaultFiles` | `IFileData[]` | - | Pre-populate with default files |
|
|
61
|
+
|
|
32
62
|
## Building
|
|
33
63
|
|
|
34
64
|
This package uses `tsup` to build. To build locally run:
|
package/dist/index.js
CHANGED
|
@@ -115,13 +115,141 @@ var ProgressBarComponent_default = ProgressBarComponent;
|
|
|
115
115
|
// src/components/FileList/index.tsx
|
|
116
116
|
var import_react2 = require("react");
|
|
117
117
|
|
|
118
|
-
// src/components/
|
|
118
|
+
// src/components/svg/PdfIcon.tsx
|
|
119
119
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
120
|
+
var PdfIcon = ({ className = "w-10 h-10" }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
121
|
+
"svg",
|
|
122
|
+
{
|
|
123
|
+
viewBox: "0 0 24 24",
|
|
124
|
+
fill: "none",
|
|
125
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
126
|
+
className,
|
|
127
|
+
children: [
|
|
128
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
129
|
+
"path",
|
|
130
|
+
{
|
|
131
|
+
d: "M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z",
|
|
132
|
+
stroke: "#EF4444",
|
|
133
|
+
strokeWidth: "2",
|
|
134
|
+
strokeLinecap: "round",
|
|
135
|
+
strokeLinejoin: "round"
|
|
136
|
+
}
|
|
137
|
+
),
|
|
138
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
139
|
+
"path",
|
|
140
|
+
{
|
|
141
|
+
d: "M14 2V8H20",
|
|
142
|
+
stroke: "#EF4444",
|
|
143
|
+
strokeWidth: "2",
|
|
144
|
+
strokeLinecap: "round",
|
|
145
|
+
strokeLinejoin: "round"
|
|
146
|
+
}
|
|
147
|
+
),
|
|
148
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
149
|
+
"path",
|
|
150
|
+
{
|
|
151
|
+
d: "M12 18V12",
|
|
152
|
+
stroke: "#EF4444",
|
|
153
|
+
strokeWidth: "2",
|
|
154
|
+
strokeLinecap: "round",
|
|
155
|
+
strokeLinejoin: "round"
|
|
156
|
+
}
|
|
157
|
+
),
|
|
158
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
159
|
+
"path",
|
|
160
|
+
{
|
|
161
|
+
d: "M9 15H15",
|
|
162
|
+
stroke: "#EF4444",
|
|
163
|
+
strokeWidth: "2",
|
|
164
|
+
strokeLinecap: "round",
|
|
165
|
+
strokeLinejoin: "round"
|
|
166
|
+
}
|
|
167
|
+
)
|
|
168
|
+
]
|
|
169
|
+
}
|
|
170
|
+
);
|
|
171
|
+
var PdfIcon_default = PdfIcon;
|
|
172
|
+
|
|
173
|
+
// src/components/svg/DocIcon.tsx
|
|
174
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
175
|
+
var DocIcon = ({ className = "w-10 h-10" }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
176
|
+
"svg",
|
|
177
|
+
{
|
|
178
|
+
viewBox: "0 0 24 24",
|
|
179
|
+
fill: "none",
|
|
180
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
181
|
+
className,
|
|
182
|
+
children: [
|
|
183
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
184
|
+
"path",
|
|
185
|
+
{
|
|
186
|
+
d: "M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z",
|
|
187
|
+
stroke: "#3B82F6",
|
|
188
|
+
strokeWidth: "2",
|
|
189
|
+
strokeLinecap: "round",
|
|
190
|
+
strokeLinejoin: "round"
|
|
191
|
+
}
|
|
192
|
+
),
|
|
193
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
194
|
+
"path",
|
|
195
|
+
{
|
|
196
|
+
d: "M14 2V8H20",
|
|
197
|
+
stroke: "#3B82F6",
|
|
198
|
+
strokeWidth: "2",
|
|
199
|
+
strokeLinecap: "round",
|
|
200
|
+
strokeLinejoin: "round"
|
|
201
|
+
}
|
|
202
|
+
),
|
|
203
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
204
|
+
"path",
|
|
205
|
+
{
|
|
206
|
+
d: "M8 13H16",
|
|
207
|
+
stroke: "#3B82F6",
|
|
208
|
+
strokeWidth: "2",
|
|
209
|
+
strokeLinecap: "round",
|
|
210
|
+
strokeLinejoin: "round"
|
|
211
|
+
}
|
|
212
|
+
),
|
|
213
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
214
|
+
"path",
|
|
215
|
+
{
|
|
216
|
+
d: "M8 17H16",
|
|
217
|
+
stroke: "#3B82F6",
|
|
218
|
+
strokeWidth: "2",
|
|
219
|
+
strokeLinecap: "round",
|
|
220
|
+
strokeLinejoin: "round"
|
|
221
|
+
}
|
|
222
|
+
),
|
|
223
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
224
|
+
"path",
|
|
225
|
+
{
|
|
226
|
+
d: "M10 9H8",
|
|
227
|
+
stroke: "#3B82F6",
|
|
228
|
+
strokeWidth: "2",
|
|
229
|
+
strokeLinecap: "round",
|
|
230
|
+
strokeLinejoin: "round"
|
|
231
|
+
}
|
|
232
|
+
)
|
|
233
|
+
]
|
|
234
|
+
}
|
|
235
|
+
);
|
|
236
|
+
var DocIcon_default = DocIcon;
|
|
237
|
+
|
|
238
|
+
// src/components/FileList/MainPreview.tsx
|
|
239
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
120
240
|
function MainPreview({ selectedFile }) {
|
|
121
241
|
if (!selectedFile) {
|
|
122
242
|
return null;
|
|
123
243
|
}
|
|
124
|
-
|
|
244
|
+
const isPdf = selectedFile.type === "application/pdf" || selectedFile.name.toLowerCase().endsWith(".pdf");
|
|
245
|
+
const isDoc = selectedFile.type === "application/msword" || selectedFile.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" || selectedFile.name.toLowerCase().match(/\.(doc|docx)$/);
|
|
246
|
+
if (isPdf) {
|
|
247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-[180px] h-[180px] p-1.5 border border-gray-100 rounded-xl flex items-center justify-center bg-gray-50", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PdfIcon_default, { className: "w-20 h-20" }) });
|
|
248
|
+
}
|
|
249
|
+
if (isDoc) {
|
|
250
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-[180px] h-[180px] p-1.5 border border-gray-100 rounded-xl flex items-center justify-center bg-gray-50", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DocIcon_default, { className: "w-20 h-20" }) });
|
|
251
|
+
}
|
|
252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-[180px] h-[180px] p-1.5 border border-gray-100 rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
125
253
|
"img",
|
|
126
254
|
{
|
|
127
255
|
src: selectedFile.preview,
|
|
@@ -133,9 +261,9 @@ function MainPreview({ selectedFile }) {
|
|
|
133
261
|
var MainPreview_default = MainPreview;
|
|
134
262
|
|
|
135
263
|
// src/components/svg/CrossIcon.tsx
|
|
136
|
-
var
|
|
264
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
137
265
|
function CrossIcon({ ...props }) {
|
|
138
|
-
return /* @__PURE__ */ (0,
|
|
266
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
139
267
|
"svg",
|
|
140
268
|
{
|
|
141
269
|
className: "w-3 h-3",
|
|
@@ -143,7 +271,7 @@ function CrossIcon({ ...props }) {
|
|
|
143
271
|
stroke: "currentColor",
|
|
144
272
|
viewBox: "0 0 24 24",
|
|
145
273
|
...props,
|
|
146
|
-
children: /* @__PURE__ */ (0,
|
|
274
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
147
275
|
"path",
|
|
148
276
|
{
|
|
149
277
|
strokeLinecap: "round",
|
|
@@ -158,9 +286,9 @@ function CrossIcon({ ...props }) {
|
|
|
158
286
|
var CrossIcon_default = CrossIcon;
|
|
159
287
|
|
|
160
288
|
// src/components/svg/PlusIcon.tsx
|
|
161
|
-
var
|
|
289
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
162
290
|
function PlusIcon({ ...props }) {
|
|
163
|
-
return /* @__PURE__ */ (0,
|
|
291
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
164
292
|
"svg",
|
|
165
293
|
{
|
|
166
294
|
className: "w-8 h-8",
|
|
@@ -168,7 +296,7 @@ function PlusIcon({ ...props }) {
|
|
|
168
296
|
stroke: "currentColor",
|
|
169
297
|
viewBox: "0 0 24 24",
|
|
170
298
|
...props,
|
|
171
|
-
children: /* @__PURE__ */ (0,
|
|
299
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
172
300
|
"path",
|
|
173
301
|
{
|
|
174
302
|
strokeLinecap: "round",
|
|
@@ -183,24 +311,24 @@ function PlusIcon({ ...props }) {
|
|
|
183
311
|
var PlusIcon_default = PlusIcon;
|
|
184
312
|
|
|
185
313
|
// src/components/FileList/AddFileButton.tsx
|
|
186
|
-
var
|
|
314
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
187
315
|
function AddFileButton({ onAddFile }) {
|
|
188
|
-
return /* @__PURE__ */ (0,
|
|
316
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
189
317
|
"button",
|
|
190
318
|
{
|
|
191
319
|
onClick: onAddFile,
|
|
192
320
|
className: "shrink-0 cursor-pointer w-16 h-16 rounded-lg border-2 border-dashed border-gray-300 flex items-center justify-center text-gray-400 hover:text-blue-500 hover:border-blue-500 hover:bg-blue-50 transition-all",
|
|
193
321
|
type: "button",
|
|
194
|
-
children: /* @__PURE__ */ (0,
|
|
322
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlusIcon_default, {})
|
|
195
323
|
}
|
|
196
324
|
);
|
|
197
325
|
}
|
|
198
326
|
var AddFileButton_default = AddFileButton;
|
|
199
327
|
|
|
200
328
|
// src/components/svg/CheckIcon.tsx
|
|
201
|
-
var
|
|
329
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
202
330
|
function CheckIcon({ ...props }) {
|
|
203
|
-
return /* @__PURE__ */ (0,
|
|
331
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
204
332
|
"svg",
|
|
205
333
|
{
|
|
206
334
|
className: "w-6 h-6",
|
|
@@ -208,7 +336,7 @@ function CheckIcon({ ...props }) {
|
|
|
208
336
|
stroke: "currentColor",
|
|
209
337
|
viewBox: "0 0 24 24",
|
|
210
338
|
...props,
|
|
211
|
-
children: /* @__PURE__ */ (0,
|
|
339
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
212
340
|
"path",
|
|
213
341
|
{
|
|
214
342
|
strokeLinecap: "round",
|
|
@@ -223,28 +351,28 @@ function CheckIcon({ ...props }) {
|
|
|
223
351
|
var CheckIcon_default = CheckIcon;
|
|
224
352
|
|
|
225
353
|
// src/components/svg/StarIcon.tsx
|
|
226
|
-
var
|
|
354
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
227
355
|
function StarIcon({ ...props }) {
|
|
228
|
-
return /* @__PURE__ */ (0,
|
|
356
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
|
|
229
357
|
}
|
|
230
358
|
var StarIcon_default = StarIcon;
|
|
231
359
|
|
|
232
360
|
// src/components/FileList/SetDefaultButton.tsx
|
|
233
|
-
var
|
|
361
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
234
362
|
function SetDefaultButton({
|
|
235
363
|
selectedFile,
|
|
236
364
|
onSetDefault
|
|
237
365
|
}) {
|
|
238
366
|
const isDefault = selectedFile.isDefault;
|
|
239
|
-
return /* @__PURE__ */ (0,
|
|
367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
240
368
|
"button",
|
|
241
369
|
{
|
|
242
370
|
onClick: () => onSetDefault(selectedFile.id),
|
|
243
371
|
className: `w-40 flex items-center justify-center cursor-pointer gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${isDefault ? "bg-green-100 text-green-700 border border-green-200 hover:bg-green-200" : "bg-white border border-gray-200 text-gray-600 hover:border-blue-500 hover:text-blue-600 hover:bg-blue-50"}`,
|
|
244
372
|
type: "button",
|
|
245
373
|
children: [
|
|
246
|
-
isDefault ? /* @__PURE__ */ (0,
|
|
247
|
-
/* @__PURE__ */ (0,
|
|
374
|
+
isDefault ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckIcon_default, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StarIcon_default, { className: "w-4 h-4 opacity-60" }),
|
|
375
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: isDefault ? "Default Image" : "Set as Default" })
|
|
248
376
|
]
|
|
249
377
|
}
|
|
250
378
|
);
|
|
@@ -252,9 +380,9 @@ function SetDefaultButton({
|
|
|
252
380
|
var SetDefaultButton_default = SetDefaultButton;
|
|
253
381
|
|
|
254
382
|
// src/components/svg/TrashIcon.tsx
|
|
255
|
-
var
|
|
383
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
256
384
|
function TrashIcon({ ...props }) {
|
|
257
|
-
return /* @__PURE__ */ (0,
|
|
385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
258
386
|
"svg",
|
|
259
387
|
{
|
|
260
388
|
className: "w-6 h-6",
|
|
@@ -262,7 +390,7 @@ function TrashIcon({ ...props }) {
|
|
|
262
390
|
stroke: "currentColor",
|
|
263
391
|
viewBox: "0 0 24 24",
|
|
264
392
|
...props,
|
|
265
|
-
children: /* @__PURE__ */ (0,
|
|
393
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
266
394
|
"path",
|
|
267
395
|
{
|
|
268
396
|
strokeLinecap: "round",
|
|
@@ -277,17 +405,17 @@ function TrashIcon({ ...props }) {
|
|
|
277
405
|
var TrashIcon_default = TrashIcon;
|
|
278
406
|
|
|
279
407
|
// src/components/FileList/ClearAllFile.tsx
|
|
280
|
-
var
|
|
408
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
281
409
|
function ClearAllFile({ onClearAll }) {
|
|
282
|
-
return /* @__PURE__ */ (0,
|
|
410
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
283
411
|
"button",
|
|
284
412
|
{
|
|
285
413
|
onClick: onClearAll,
|
|
286
414
|
className: "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium bg-white border border-gray-200 text-gray-600 hover:border-red-500 hover:text-red-600 hover:bg-red-50 transition-all duration-200 w-full justify-center",
|
|
287
415
|
title: "Clear all files",
|
|
288
416
|
children: [
|
|
289
|
-
/* @__PURE__ */ (0,
|
|
290
|
-
/* @__PURE__ */ (0,
|
|
417
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TrashIcon_default, { className: "w-4 h-4" }),
|
|
418
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Clear All" })
|
|
291
419
|
]
|
|
292
420
|
}
|
|
293
421
|
);
|
|
@@ -295,7 +423,7 @@ function ClearAllFile({ onClearAll }) {
|
|
|
295
423
|
var ClearAllFile_default = ClearAllFile;
|
|
296
424
|
|
|
297
425
|
// src/components/FileList/index.tsx
|
|
298
|
-
var
|
|
426
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
299
427
|
var FileList = ({
|
|
300
428
|
files,
|
|
301
429
|
removeFile,
|
|
@@ -317,79 +445,83 @@ var FileList = ({
|
|
|
317
445
|
return null;
|
|
318
446
|
}
|
|
319
447
|
const selectedFile = files.find((f) => f.id === selectedFileId) || files[0];
|
|
320
|
-
return /* @__PURE__ */ (0,
|
|
321
|
-
/* @__PURE__ */ (0,
|
|
322
|
-
/* @__PURE__ */ (0,
|
|
323
|
-
/* @__PURE__ */ (0,
|
|
324
|
-
/* @__PURE__ */ (0,
|
|
448
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-4 p-3", children: [
|
|
449
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-center gap-6", children: [
|
|
450
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MainPreview_default, { selectedFile }),
|
|
451
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2", children: [
|
|
452
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
325
453
|
SetDefaultButton_default,
|
|
326
454
|
{
|
|
327
455
|
selectedFile,
|
|
328
456
|
onSetDefault: setAsDefault
|
|
329
457
|
}
|
|
330
458
|
),
|
|
331
|
-
/* @__PURE__ */ (0,
|
|
459
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ClearAllFile_default, { onClearAll: clearAll })
|
|
332
460
|
] })
|
|
333
461
|
] }),
|
|
334
|
-
/* @__PURE__ */ (0,
|
|
335
|
-
files.map((file) =>
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
"
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
462
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "w-full flex flex-wrap items-center gap-1", children: [
|
|
463
|
+
files.map((file) => {
|
|
464
|
+
const isPdf = file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
|
|
465
|
+
const isDoc = file.type === "application/msword" || file.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" || file.name.toLowerCase().match(/\.(doc|docx)$/);
|
|
466
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative group/thumb", children: [
|
|
467
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
468
|
+
"button",
|
|
469
|
+
{
|
|
470
|
+
onClick: () => setSelectedFileId(file.id),
|
|
471
|
+
className: `relative cursor-pointer w-16 h-16 p-0.5 rounded-lg overflow-hidden border transition-all ${selectedFileId === file.id ? "border-gray-300" : "border-transparent hover:border-gray-100"}`,
|
|
472
|
+
children: [
|
|
473
|
+
isPdf ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-full h-full bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PdfIcon_default, { className: "w-8 h-8" }) }) : isDoc ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-full h-full bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DocIcon_default, { className: "w-8 h-8" }) }) : file.preview ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
474
|
+
"img",
|
|
475
|
+
{
|
|
476
|
+
src: file.preview,
|
|
477
|
+
alt: file.name,
|
|
478
|
+
className: "w-full h-full object-cover"
|
|
479
|
+
}
|
|
480
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-full h-full bg-gray-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
481
|
+
"svg",
|
|
482
|
+
{
|
|
483
|
+
className: "w-6 h-6 text-gray-400",
|
|
484
|
+
fill: "none",
|
|
485
|
+
stroke: "currentColor",
|
|
486
|
+
viewBox: "0 0 24 24",
|
|
487
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
488
|
+
"path",
|
|
489
|
+
{
|
|
490
|
+
strokeLinecap: "round",
|
|
491
|
+
strokeLinejoin: "round",
|
|
492
|
+
strokeWidth: 2,
|
|
493
|
+
d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
494
|
+
}
|
|
495
|
+
)
|
|
496
|
+
}
|
|
497
|
+
) }),
|
|
498
|
+
file.isDefault && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute top-1 left-1 p-0.5 bg-yellow-400 rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
499
|
+
"svg",
|
|
500
|
+
{
|
|
501
|
+
className: "w-3 h-3 text-white",
|
|
502
|
+
fill: "currentColor",
|
|
503
|
+
viewBox: "0 0 20 20",
|
|
504
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
|
|
505
|
+
}
|
|
506
|
+
) })
|
|
507
|
+
]
|
|
508
|
+
}
|
|
509
|
+
),
|
|
510
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
511
|
+
"button",
|
|
512
|
+
{
|
|
513
|
+
onClick: (e) => {
|
|
514
|
+
e.stopPropagation();
|
|
515
|
+
removeFile(file.id);
|
|
516
|
+
},
|
|
517
|
+
className: "absolute cursor-pointer -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover/thumb:opacity-100 transition-opacity shadow-sm hover:bg-red-600 z-10",
|
|
518
|
+
title: "Remove file",
|
|
519
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CrossIcon_default, {})
|
|
520
|
+
}
|
|
521
|
+
)
|
|
522
|
+
] }, file.id);
|
|
523
|
+
}),
|
|
524
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AddFileButton_default, { onAddFile })
|
|
393
525
|
] })
|
|
394
526
|
] });
|
|
395
527
|
};
|
|
@@ -681,16 +813,16 @@ var handleDrop = (e, setIsDragging, handleFiles, disabled) => {
|
|
|
681
813
|
};
|
|
682
814
|
|
|
683
815
|
// src/components/svg/UploadIcon.tsx
|
|
684
|
-
var
|
|
816
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
685
817
|
function UploadIcon({ ...props }) {
|
|
686
|
-
return /* @__PURE__ */ (0,
|
|
818
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
687
819
|
"svg",
|
|
688
820
|
{
|
|
689
821
|
fill: "none",
|
|
690
822
|
stroke: "currentColor",
|
|
691
823
|
viewBox: "0 0 24 24",
|
|
692
824
|
...props,
|
|
693
|
-
children: /* @__PURE__ */ (0,
|
|
825
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
694
826
|
"path",
|
|
695
827
|
{
|
|
696
828
|
strokeLinecap: "round",
|
|
@@ -705,7 +837,7 @@ function UploadIcon({ ...props }) {
|
|
|
705
837
|
var UploadIcon_default = UploadIcon;
|
|
706
838
|
|
|
707
839
|
// src/components/LabelUI.tsx
|
|
708
|
-
var
|
|
840
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
709
841
|
function LabelUI({
|
|
710
842
|
accept,
|
|
711
843
|
isDragging,
|
|
@@ -713,21 +845,21 @@ function LabelUI({
|
|
|
713
845
|
maxFiles = 10,
|
|
714
846
|
disabled = false
|
|
715
847
|
}) {
|
|
716
|
-
return /* @__PURE__ */ (0,
|
|
717
|
-
/* @__PURE__ */ (0,
|
|
848
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "p-6", children: [
|
|
849
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mb-3 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
718
850
|
UploadIcon_default,
|
|
719
851
|
{
|
|
720
852
|
className: `w-8 h-8 transition-colors duration-200 ${isDragging && !disabled ? "text-blue-500" : "text-gray-400"}`
|
|
721
853
|
}
|
|
722
854
|
) }) }),
|
|
723
|
-
/* @__PURE__ */ (0,
|
|
724
|
-
/* @__PURE__ */ (0,
|
|
725
|
-
/* @__PURE__ */ (0,
|
|
726
|
-
accept && /* @__PURE__ */ (0,
|
|
855
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "text-lg font-semibold text-gray-700 mb-1", children: isDragging && !disabled ? "Drop files here" : "Drag & drop files" }),
|
|
856
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm text-gray-500 mb-3", children: "or click to browse" }),
|
|
857
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "text-xs text-gray-400 space-y-1", children: [
|
|
858
|
+
accept && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { children: [
|
|
727
859
|
"Accepted: ",
|
|
728
860
|
accept
|
|
729
861
|
] }),
|
|
730
|
-
/* @__PURE__ */ (0,
|
|
862
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { children: [
|
|
731
863
|
"Max size: ",
|
|
732
864
|
formatFileSize(maxSize),
|
|
733
865
|
" \u2022 Max files: ",
|
|
@@ -739,7 +871,7 @@ function LabelUI({
|
|
|
739
871
|
var LabelUI_default = LabelUI;
|
|
740
872
|
|
|
741
873
|
// src/index.tsx
|
|
742
|
-
var
|
|
874
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
743
875
|
var ReactFileUploaderUI = ({
|
|
744
876
|
accept,
|
|
745
877
|
multiple = true,
|
|
@@ -782,12 +914,12 @@ var ReactFileUploaderUI = ({
|
|
|
782
914
|
handleDrop(e, setIsDragging, handleFiles, disabled);
|
|
783
915
|
};
|
|
784
916
|
const hasFiles = files.length > 0;
|
|
785
|
-
return /* @__PURE__ */ (0,
|
|
917
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
786
918
|
"div",
|
|
787
919
|
{
|
|
788
920
|
className: `w-full border-gray-200 border border-dashed rounded-xl relative ${className}`,
|
|
789
921
|
children: [
|
|
790
|
-
/* @__PURE__ */ (0,
|
|
922
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
791
923
|
"div",
|
|
792
924
|
{
|
|
793
925
|
className: `
|
|
@@ -814,7 +946,7 @@ var ReactFileUploaderUI = ({
|
|
|
814
946
|
}
|
|
815
947
|
},
|
|
816
948
|
children: [
|
|
817
|
-
/* @__PURE__ */ (0,
|
|
949
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
818
950
|
"input",
|
|
819
951
|
{
|
|
820
952
|
ref: fileInputRef,
|
|
@@ -827,7 +959,7 @@ var ReactFileUploaderUI = ({
|
|
|
827
959
|
"aria-label": "File input"
|
|
828
960
|
}
|
|
829
961
|
),
|
|
830
|
-
!hasFiles && /* @__PURE__ */ (0,
|
|
962
|
+
!hasFiles && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
831
963
|
LabelUI_default,
|
|
832
964
|
{
|
|
833
965
|
accept,
|
|
@@ -841,7 +973,7 @@ var ReactFileUploaderUI = ({
|
|
|
841
973
|
]
|
|
842
974
|
}
|
|
843
975
|
),
|
|
844
|
-
/* @__PURE__ */ (0,
|
|
976
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
845
977
|
FileList_default,
|
|
846
978
|
{
|
|
847
979
|
files,
|
|
@@ -855,8 +987,8 @@ var ReactFileUploaderUI = ({
|
|
|
855
987
|
}
|
|
856
988
|
}
|
|
857
989
|
),
|
|
858
|
-
files.length > 0 && uploadProgress < 100 && /* @__PURE__ */ (0,
|
|
859
|
-
error && /* @__PURE__ */ (0,
|
|
990
|
+
files.length > 0 && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ProgressBarComponent_default, { uploadProgress }),
|
|
991
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ErrorComponent_default, { error, setError })
|
|
860
992
|
]
|
|
861
993
|
}
|
|
862
994
|
);
|
package/dist/index.mjs
CHANGED
|
@@ -91,13 +91,141 @@ var ProgressBarComponent_default = ProgressBarComponent;
|
|
|
91
91
|
// src/components/FileList/index.tsx
|
|
92
92
|
import { useState as useState2, useEffect as useEffect2 } from "react";
|
|
93
93
|
|
|
94
|
+
// src/components/svg/PdfIcon.tsx
|
|
95
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
96
|
+
var PdfIcon = ({ className = "w-10 h-10" }) => /* @__PURE__ */ jsxs2(
|
|
97
|
+
"svg",
|
|
98
|
+
{
|
|
99
|
+
viewBox: "0 0 24 24",
|
|
100
|
+
fill: "none",
|
|
101
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
102
|
+
className,
|
|
103
|
+
children: [
|
|
104
|
+
/* @__PURE__ */ jsx3(
|
|
105
|
+
"path",
|
|
106
|
+
{
|
|
107
|
+
d: "M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z",
|
|
108
|
+
stroke: "#EF4444",
|
|
109
|
+
strokeWidth: "2",
|
|
110
|
+
strokeLinecap: "round",
|
|
111
|
+
strokeLinejoin: "round"
|
|
112
|
+
}
|
|
113
|
+
),
|
|
114
|
+
/* @__PURE__ */ jsx3(
|
|
115
|
+
"path",
|
|
116
|
+
{
|
|
117
|
+
d: "M14 2V8H20",
|
|
118
|
+
stroke: "#EF4444",
|
|
119
|
+
strokeWidth: "2",
|
|
120
|
+
strokeLinecap: "round",
|
|
121
|
+
strokeLinejoin: "round"
|
|
122
|
+
}
|
|
123
|
+
),
|
|
124
|
+
/* @__PURE__ */ jsx3(
|
|
125
|
+
"path",
|
|
126
|
+
{
|
|
127
|
+
d: "M12 18V12",
|
|
128
|
+
stroke: "#EF4444",
|
|
129
|
+
strokeWidth: "2",
|
|
130
|
+
strokeLinecap: "round",
|
|
131
|
+
strokeLinejoin: "round"
|
|
132
|
+
}
|
|
133
|
+
),
|
|
134
|
+
/* @__PURE__ */ jsx3(
|
|
135
|
+
"path",
|
|
136
|
+
{
|
|
137
|
+
d: "M9 15H15",
|
|
138
|
+
stroke: "#EF4444",
|
|
139
|
+
strokeWidth: "2",
|
|
140
|
+
strokeLinecap: "round",
|
|
141
|
+
strokeLinejoin: "round"
|
|
142
|
+
}
|
|
143
|
+
)
|
|
144
|
+
]
|
|
145
|
+
}
|
|
146
|
+
);
|
|
147
|
+
var PdfIcon_default = PdfIcon;
|
|
148
|
+
|
|
149
|
+
// src/components/svg/DocIcon.tsx
|
|
150
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
151
|
+
var DocIcon = ({ className = "w-10 h-10" }) => /* @__PURE__ */ jsxs3(
|
|
152
|
+
"svg",
|
|
153
|
+
{
|
|
154
|
+
viewBox: "0 0 24 24",
|
|
155
|
+
fill: "none",
|
|
156
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
157
|
+
className,
|
|
158
|
+
children: [
|
|
159
|
+
/* @__PURE__ */ jsx4(
|
|
160
|
+
"path",
|
|
161
|
+
{
|
|
162
|
+
d: "M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z",
|
|
163
|
+
stroke: "#3B82F6",
|
|
164
|
+
strokeWidth: "2",
|
|
165
|
+
strokeLinecap: "round",
|
|
166
|
+
strokeLinejoin: "round"
|
|
167
|
+
}
|
|
168
|
+
),
|
|
169
|
+
/* @__PURE__ */ jsx4(
|
|
170
|
+
"path",
|
|
171
|
+
{
|
|
172
|
+
d: "M14 2V8H20",
|
|
173
|
+
stroke: "#3B82F6",
|
|
174
|
+
strokeWidth: "2",
|
|
175
|
+
strokeLinecap: "round",
|
|
176
|
+
strokeLinejoin: "round"
|
|
177
|
+
}
|
|
178
|
+
),
|
|
179
|
+
/* @__PURE__ */ jsx4(
|
|
180
|
+
"path",
|
|
181
|
+
{
|
|
182
|
+
d: "M8 13H16",
|
|
183
|
+
stroke: "#3B82F6",
|
|
184
|
+
strokeWidth: "2",
|
|
185
|
+
strokeLinecap: "round",
|
|
186
|
+
strokeLinejoin: "round"
|
|
187
|
+
}
|
|
188
|
+
),
|
|
189
|
+
/* @__PURE__ */ jsx4(
|
|
190
|
+
"path",
|
|
191
|
+
{
|
|
192
|
+
d: "M8 17H16",
|
|
193
|
+
stroke: "#3B82F6",
|
|
194
|
+
strokeWidth: "2",
|
|
195
|
+
strokeLinecap: "round",
|
|
196
|
+
strokeLinejoin: "round"
|
|
197
|
+
}
|
|
198
|
+
),
|
|
199
|
+
/* @__PURE__ */ jsx4(
|
|
200
|
+
"path",
|
|
201
|
+
{
|
|
202
|
+
d: "M10 9H8",
|
|
203
|
+
stroke: "#3B82F6",
|
|
204
|
+
strokeWidth: "2",
|
|
205
|
+
strokeLinecap: "round",
|
|
206
|
+
strokeLinejoin: "round"
|
|
207
|
+
}
|
|
208
|
+
)
|
|
209
|
+
]
|
|
210
|
+
}
|
|
211
|
+
);
|
|
212
|
+
var DocIcon_default = DocIcon;
|
|
213
|
+
|
|
94
214
|
// src/components/FileList/MainPreview.tsx
|
|
95
|
-
import { jsx as
|
|
215
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
96
216
|
function MainPreview({ selectedFile }) {
|
|
97
217
|
if (!selectedFile) {
|
|
98
218
|
return null;
|
|
99
219
|
}
|
|
100
|
-
|
|
220
|
+
const isPdf = selectedFile.type === "application/pdf" || selectedFile.name.toLowerCase().endsWith(".pdf");
|
|
221
|
+
const isDoc = selectedFile.type === "application/msword" || selectedFile.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" || selectedFile.name.toLowerCase().match(/\.(doc|docx)$/);
|
|
222
|
+
if (isPdf) {
|
|
223
|
+
return /* @__PURE__ */ jsx5("div", { className: "w-[180px] h-[180px] p-1.5 border border-gray-100 rounded-xl flex items-center justify-center bg-gray-50", children: /* @__PURE__ */ jsx5(PdfIcon_default, { className: "w-20 h-20" }) });
|
|
224
|
+
}
|
|
225
|
+
if (isDoc) {
|
|
226
|
+
return /* @__PURE__ */ jsx5("div", { className: "w-[180px] h-[180px] p-1.5 border border-gray-100 rounded-xl flex items-center justify-center bg-gray-50", children: /* @__PURE__ */ jsx5(DocIcon_default, { className: "w-20 h-20" }) });
|
|
227
|
+
}
|
|
228
|
+
return /* @__PURE__ */ jsx5("div", { className: "w-[180px] h-[180px] p-1.5 border border-gray-100 rounded-xl", children: /* @__PURE__ */ jsx5(
|
|
101
229
|
"img",
|
|
102
230
|
{
|
|
103
231
|
src: selectedFile.preview,
|
|
@@ -109,9 +237,9 @@ function MainPreview({ selectedFile }) {
|
|
|
109
237
|
var MainPreview_default = MainPreview;
|
|
110
238
|
|
|
111
239
|
// src/components/svg/CrossIcon.tsx
|
|
112
|
-
import { jsx as
|
|
240
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
113
241
|
function CrossIcon({ ...props }) {
|
|
114
|
-
return /* @__PURE__ */
|
|
242
|
+
return /* @__PURE__ */ jsx6(
|
|
115
243
|
"svg",
|
|
116
244
|
{
|
|
117
245
|
className: "w-3 h-3",
|
|
@@ -119,7 +247,7 @@ function CrossIcon({ ...props }) {
|
|
|
119
247
|
stroke: "currentColor",
|
|
120
248
|
viewBox: "0 0 24 24",
|
|
121
249
|
...props,
|
|
122
|
-
children: /* @__PURE__ */
|
|
250
|
+
children: /* @__PURE__ */ jsx6(
|
|
123
251
|
"path",
|
|
124
252
|
{
|
|
125
253
|
strokeLinecap: "round",
|
|
@@ -134,9 +262,9 @@ function CrossIcon({ ...props }) {
|
|
|
134
262
|
var CrossIcon_default = CrossIcon;
|
|
135
263
|
|
|
136
264
|
// src/components/svg/PlusIcon.tsx
|
|
137
|
-
import { jsx as
|
|
265
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
138
266
|
function PlusIcon({ ...props }) {
|
|
139
|
-
return /* @__PURE__ */
|
|
267
|
+
return /* @__PURE__ */ jsx7(
|
|
140
268
|
"svg",
|
|
141
269
|
{
|
|
142
270
|
className: "w-8 h-8",
|
|
@@ -144,7 +272,7 @@ function PlusIcon({ ...props }) {
|
|
|
144
272
|
stroke: "currentColor",
|
|
145
273
|
viewBox: "0 0 24 24",
|
|
146
274
|
...props,
|
|
147
|
-
children: /* @__PURE__ */
|
|
275
|
+
children: /* @__PURE__ */ jsx7(
|
|
148
276
|
"path",
|
|
149
277
|
{
|
|
150
278
|
strokeLinecap: "round",
|
|
@@ -159,24 +287,24 @@ function PlusIcon({ ...props }) {
|
|
|
159
287
|
var PlusIcon_default = PlusIcon;
|
|
160
288
|
|
|
161
289
|
// src/components/FileList/AddFileButton.tsx
|
|
162
|
-
import { jsx as
|
|
290
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
163
291
|
function AddFileButton({ onAddFile }) {
|
|
164
|
-
return /* @__PURE__ */
|
|
292
|
+
return /* @__PURE__ */ jsx8(
|
|
165
293
|
"button",
|
|
166
294
|
{
|
|
167
295
|
onClick: onAddFile,
|
|
168
296
|
className: "shrink-0 cursor-pointer w-16 h-16 rounded-lg border-2 border-dashed border-gray-300 flex items-center justify-center text-gray-400 hover:text-blue-500 hover:border-blue-500 hover:bg-blue-50 transition-all",
|
|
169
297
|
type: "button",
|
|
170
|
-
children: /* @__PURE__ */
|
|
298
|
+
children: /* @__PURE__ */ jsx8(PlusIcon_default, {})
|
|
171
299
|
}
|
|
172
300
|
);
|
|
173
301
|
}
|
|
174
302
|
var AddFileButton_default = AddFileButton;
|
|
175
303
|
|
|
176
304
|
// src/components/svg/CheckIcon.tsx
|
|
177
|
-
import { jsx as
|
|
305
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
178
306
|
function CheckIcon({ ...props }) {
|
|
179
|
-
return /* @__PURE__ */
|
|
307
|
+
return /* @__PURE__ */ jsx9(
|
|
180
308
|
"svg",
|
|
181
309
|
{
|
|
182
310
|
className: "w-6 h-6",
|
|
@@ -184,7 +312,7 @@ function CheckIcon({ ...props }) {
|
|
|
184
312
|
stroke: "currentColor",
|
|
185
313
|
viewBox: "0 0 24 24",
|
|
186
314
|
...props,
|
|
187
|
-
children: /* @__PURE__ */
|
|
315
|
+
children: /* @__PURE__ */ jsx9(
|
|
188
316
|
"path",
|
|
189
317
|
{
|
|
190
318
|
strokeLinecap: "round",
|
|
@@ -199,28 +327,28 @@ function CheckIcon({ ...props }) {
|
|
|
199
327
|
var CheckIcon_default = CheckIcon;
|
|
200
328
|
|
|
201
329
|
// src/components/svg/StarIcon.tsx
|
|
202
|
-
import { jsx as
|
|
330
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
203
331
|
function StarIcon({ ...props }) {
|
|
204
|
-
return /* @__PURE__ */
|
|
332
|
+
return /* @__PURE__ */ jsx10("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: /* @__PURE__ */ jsx10("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
|
|
205
333
|
}
|
|
206
334
|
var StarIcon_default = StarIcon;
|
|
207
335
|
|
|
208
336
|
// src/components/FileList/SetDefaultButton.tsx
|
|
209
|
-
import { jsx as
|
|
337
|
+
import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
210
338
|
function SetDefaultButton({
|
|
211
339
|
selectedFile,
|
|
212
340
|
onSetDefault
|
|
213
341
|
}) {
|
|
214
342
|
const isDefault = selectedFile.isDefault;
|
|
215
|
-
return /* @__PURE__ */
|
|
343
|
+
return /* @__PURE__ */ jsxs4(
|
|
216
344
|
"button",
|
|
217
345
|
{
|
|
218
346
|
onClick: () => onSetDefault(selectedFile.id),
|
|
219
347
|
className: `w-40 flex items-center justify-center cursor-pointer gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${isDefault ? "bg-green-100 text-green-700 border border-green-200 hover:bg-green-200" : "bg-white border border-gray-200 text-gray-600 hover:border-blue-500 hover:text-blue-600 hover:bg-blue-50"}`,
|
|
220
348
|
type: "button",
|
|
221
349
|
children: [
|
|
222
|
-
isDefault ? /* @__PURE__ */
|
|
223
|
-
/* @__PURE__ */
|
|
350
|
+
isDefault ? /* @__PURE__ */ jsx11(CheckIcon_default, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx11(StarIcon_default, { className: "w-4 h-4 opacity-60" }),
|
|
351
|
+
/* @__PURE__ */ jsx11("span", { children: isDefault ? "Default Image" : "Set as Default" })
|
|
224
352
|
]
|
|
225
353
|
}
|
|
226
354
|
);
|
|
@@ -228,9 +356,9 @@ function SetDefaultButton({
|
|
|
228
356
|
var SetDefaultButton_default = SetDefaultButton;
|
|
229
357
|
|
|
230
358
|
// src/components/svg/TrashIcon.tsx
|
|
231
|
-
import { jsx as
|
|
359
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
232
360
|
function TrashIcon({ ...props }) {
|
|
233
|
-
return /* @__PURE__ */
|
|
361
|
+
return /* @__PURE__ */ jsx12(
|
|
234
362
|
"svg",
|
|
235
363
|
{
|
|
236
364
|
className: "w-6 h-6",
|
|
@@ -238,7 +366,7 @@ function TrashIcon({ ...props }) {
|
|
|
238
366
|
stroke: "currentColor",
|
|
239
367
|
viewBox: "0 0 24 24",
|
|
240
368
|
...props,
|
|
241
|
-
children: /* @__PURE__ */
|
|
369
|
+
children: /* @__PURE__ */ jsx12(
|
|
242
370
|
"path",
|
|
243
371
|
{
|
|
244
372
|
strokeLinecap: "round",
|
|
@@ -253,17 +381,17 @@ function TrashIcon({ ...props }) {
|
|
|
253
381
|
var TrashIcon_default = TrashIcon;
|
|
254
382
|
|
|
255
383
|
// src/components/FileList/ClearAllFile.tsx
|
|
256
|
-
import { jsx as
|
|
384
|
+
import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
257
385
|
function ClearAllFile({ onClearAll }) {
|
|
258
|
-
return /* @__PURE__ */
|
|
386
|
+
return /* @__PURE__ */ jsxs5(
|
|
259
387
|
"button",
|
|
260
388
|
{
|
|
261
389
|
onClick: onClearAll,
|
|
262
390
|
className: "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium bg-white border border-gray-200 text-gray-600 hover:border-red-500 hover:text-red-600 hover:bg-red-50 transition-all duration-200 w-full justify-center",
|
|
263
391
|
title: "Clear all files",
|
|
264
392
|
children: [
|
|
265
|
-
/* @__PURE__ */
|
|
266
|
-
/* @__PURE__ */
|
|
393
|
+
/* @__PURE__ */ jsx13(TrashIcon_default, { className: "w-4 h-4" }),
|
|
394
|
+
/* @__PURE__ */ jsx13("span", { children: "Clear All" })
|
|
267
395
|
]
|
|
268
396
|
}
|
|
269
397
|
);
|
|
@@ -271,7 +399,7 @@ function ClearAllFile({ onClearAll }) {
|
|
|
271
399
|
var ClearAllFile_default = ClearAllFile;
|
|
272
400
|
|
|
273
401
|
// src/components/FileList/index.tsx
|
|
274
|
-
import { jsx as
|
|
402
|
+
import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
275
403
|
var FileList = ({
|
|
276
404
|
files,
|
|
277
405
|
removeFile,
|
|
@@ -293,79 +421,83 @@ var FileList = ({
|
|
|
293
421
|
return null;
|
|
294
422
|
}
|
|
295
423
|
const selectedFile = files.find((f) => f.id === selectedFileId) || files[0];
|
|
296
|
-
return /* @__PURE__ */
|
|
297
|
-
/* @__PURE__ */
|
|
298
|
-
/* @__PURE__ */
|
|
299
|
-
/* @__PURE__ */
|
|
300
|
-
/* @__PURE__ */
|
|
424
|
+
return /* @__PURE__ */ jsxs6("div", { className: "space-y-4 p-3", children: [
|
|
425
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-center gap-6", children: [
|
|
426
|
+
/* @__PURE__ */ jsx14(MainPreview_default, { selectedFile }),
|
|
427
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
|
|
428
|
+
/* @__PURE__ */ jsx14(
|
|
301
429
|
SetDefaultButton_default,
|
|
302
430
|
{
|
|
303
431
|
selectedFile,
|
|
304
432
|
onSetDefault: setAsDefault
|
|
305
433
|
}
|
|
306
434
|
),
|
|
307
|
-
/* @__PURE__ */
|
|
435
|
+
/* @__PURE__ */ jsx14(ClearAllFile_default, { onClearAll: clearAll })
|
|
308
436
|
] })
|
|
309
437
|
] }),
|
|
310
|
-
/* @__PURE__ */
|
|
311
|
-
files.map((file) =>
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
"
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
438
|
+
/* @__PURE__ */ jsxs6("div", { className: "w-full flex flex-wrap items-center gap-1", children: [
|
|
439
|
+
files.map((file) => {
|
|
440
|
+
const isPdf = file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
|
|
441
|
+
const isDoc = file.type === "application/msword" || file.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" || file.name.toLowerCase().match(/\.(doc|docx)$/);
|
|
442
|
+
return /* @__PURE__ */ jsxs6("div", { className: "relative group/thumb", children: [
|
|
443
|
+
/* @__PURE__ */ jsxs6(
|
|
444
|
+
"button",
|
|
445
|
+
{
|
|
446
|
+
onClick: () => setSelectedFileId(file.id),
|
|
447
|
+
className: `relative cursor-pointer w-16 h-16 p-0.5 rounded-lg overflow-hidden border transition-all ${selectedFileId === file.id ? "border-gray-300" : "border-transparent hover:border-gray-100"}`,
|
|
448
|
+
children: [
|
|
449
|
+
isPdf ? /* @__PURE__ */ jsx14("div", { className: "w-full h-full bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ jsx14(PdfIcon_default, { className: "w-8 h-8" }) }) : isDoc ? /* @__PURE__ */ jsx14("div", { className: "w-full h-full bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ jsx14(DocIcon_default, { className: "w-8 h-8" }) }) : file.preview ? /* @__PURE__ */ jsx14(
|
|
450
|
+
"img",
|
|
451
|
+
{
|
|
452
|
+
src: file.preview,
|
|
453
|
+
alt: file.name,
|
|
454
|
+
className: "w-full h-full object-cover"
|
|
455
|
+
}
|
|
456
|
+
) : /* @__PURE__ */ jsx14("div", { className: "w-full h-full bg-gray-100 flex items-center justify-center", children: /* @__PURE__ */ jsx14(
|
|
457
|
+
"svg",
|
|
458
|
+
{
|
|
459
|
+
className: "w-6 h-6 text-gray-400",
|
|
460
|
+
fill: "none",
|
|
461
|
+
stroke: "currentColor",
|
|
462
|
+
viewBox: "0 0 24 24",
|
|
463
|
+
children: /* @__PURE__ */ jsx14(
|
|
464
|
+
"path",
|
|
465
|
+
{
|
|
466
|
+
strokeLinecap: "round",
|
|
467
|
+
strokeLinejoin: "round",
|
|
468
|
+
strokeWidth: 2,
|
|
469
|
+
d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
470
|
+
}
|
|
471
|
+
)
|
|
472
|
+
}
|
|
473
|
+
) }),
|
|
474
|
+
file.isDefault && /* @__PURE__ */ jsx14("div", { className: "absolute top-1 left-1 p-0.5 bg-yellow-400 rounded-full", children: /* @__PURE__ */ jsx14(
|
|
475
|
+
"svg",
|
|
476
|
+
{
|
|
477
|
+
className: "w-3 h-3 text-white",
|
|
478
|
+
fill: "currentColor",
|
|
479
|
+
viewBox: "0 0 20 20",
|
|
480
|
+
children: /* @__PURE__ */ jsx14("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
|
|
481
|
+
}
|
|
482
|
+
) })
|
|
483
|
+
]
|
|
484
|
+
}
|
|
485
|
+
),
|
|
486
|
+
/* @__PURE__ */ jsx14(
|
|
487
|
+
"button",
|
|
488
|
+
{
|
|
489
|
+
onClick: (e) => {
|
|
490
|
+
e.stopPropagation();
|
|
491
|
+
removeFile(file.id);
|
|
492
|
+
},
|
|
493
|
+
className: "absolute cursor-pointer -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover/thumb:opacity-100 transition-opacity shadow-sm hover:bg-red-600 z-10",
|
|
494
|
+
title: "Remove file",
|
|
495
|
+
children: /* @__PURE__ */ jsx14(CrossIcon_default, {})
|
|
496
|
+
}
|
|
497
|
+
)
|
|
498
|
+
] }, file.id);
|
|
499
|
+
}),
|
|
500
|
+
/* @__PURE__ */ jsx14(AddFileButton_default, { onAddFile })
|
|
369
501
|
] })
|
|
370
502
|
] });
|
|
371
503
|
};
|
|
@@ -657,16 +789,16 @@ var handleDrop = (e, setIsDragging, handleFiles, disabled) => {
|
|
|
657
789
|
};
|
|
658
790
|
|
|
659
791
|
// src/components/svg/UploadIcon.tsx
|
|
660
|
-
import { jsx as
|
|
792
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
661
793
|
function UploadIcon({ ...props }) {
|
|
662
|
-
return /* @__PURE__ */
|
|
794
|
+
return /* @__PURE__ */ jsx15(
|
|
663
795
|
"svg",
|
|
664
796
|
{
|
|
665
797
|
fill: "none",
|
|
666
798
|
stroke: "currentColor",
|
|
667
799
|
viewBox: "0 0 24 24",
|
|
668
800
|
...props,
|
|
669
|
-
children: /* @__PURE__ */
|
|
801
|
+
children: /* @__PURE__ */ jsx15(
|
|
670
802
|
"path",
|
|
671
803
|
{
|
|
672
804
|
strokeLinecap: "round",
|
|
@@ -681,7 +813,7 @@ function UploadIcon({ ...props }) {
|
|
|
681
813
|
var UploadIcon_default = UploadIcon;
|
|
682
814
|
|
|
683
815
|
// src/components/LabelUI.tsx
|
|
684
|
-
import { jsx as
|
|
816
|
+
import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
685
817
|
function LabelUI({
|
|
686
818
|
accept,
|
|
687
819
|
isDragging,
|
|
@@ -689,21 +821,21 @@ function LabelUI({
|
|
|
689
821
|
maxFiles = 10,
|
|
690
822
|
disabled = false
|
|
691
823
|
}) {
|
|
692
|
-
return /* @__PURE__ */
|
|
693
|
-
/* @__PURE__ */
|
|
824
|
+
return /* @__PURE__ */ jsxs7("div", { className: "p-6", children: [
|
|
825
|
+
/* @__PURE__ */ jsx16("div", { className: "mb-3 flex justify-center", children: /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(
|
|
694
826
|
UploadIcon_default,
|
|
695
827
|
{
|
|
696
828
|
className: `w-8 h-8 transition-colors duration-200 ${isDragging && !disabled ? "text-blue-500" : "text-gray-400"}`
|
|
697
829
|
}
|
|
698
830
|
) }) }),
|
|
699
|
-
/* @__PURE__ */
|
|
700
|
-
/* @__PURE__ */
|
|
701
|
-
/* @__PURE__ */
|
|
702
|
-
accept && /* @__PURE__ */
|
|
831
|
+
/* @__PURE__ */ jsx16("h3", { className: "text-lg font-semibold text-gray-700 mb-1", children: isDragging && !disabled ? "Drop files here" : "Drag & drop files" }),
|
|
832
|
+
/* @__PURE__ */ jsx16("p", { className: "text-sm text-gray-500 mb-3", children: "or click to browse" }),
|
|
833
|
+
/* @__PURE__ */ jsxs7("div", { className: "text-xs text-gray-400 space-y-1", children: [
|
|
834
|
+
accept && /* @__PURE__ */ jsxs7("p", { children: [
|
|
703
835
|
"Accepted: ",
|
|
704
836
|
accept
|
|
705
837
|
] }),
|
|
706
|
-
/* @__PURE__ */
|
|
838
|
+
/* @__PURE__ */ jsxs7("p", { children: [
|
|
707
839
|
"Max size: ",
|
|
708
840
|
formatFileSize(maxSize),
|
|
709
841
|
" \u2022 Max files: ",
|
|
@@ -715,7 +847,7 @@ function LabelUI({
|
|
|
715
847
|
var LabelUI_default = LabelUI;
|
|
716
848
|
|
|
717
849
|
// src/index.tsx
|
|
718
|
-
import { jsx as
|
|
850
|
+
import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
719
851
|
var ReactFileUploaderUI = ({
|
|
720
852
|
accept,
|
|
721
853
|
multiple = true,
|
|
@@ -758,12 +890,12 @@ var ReactFileUploaderUI = ({
|
|
|
758
890
|
handleDrop(e, setIsDragging, handleFiles, disabled);
|
|
759
891
|
};
|
|
760
892
|
const hasFiles = files.length > 0;
|
|
761
|
-
return /* @__PURE__ */
|
|
893
|
+
return /* @__PURE__ */ jsxs8(
|
|
762
894
|
"div",
|
|
763
895
|
{
|
|
764
896
|
className: `w-full border-gray-200 border border-dashed rounded-xl relative ${className}`,
|
|
765
897
|
children: [
|
|
766
|
-
/* @__PURE__ */
|
|
898
|
+
/* @__PURE__ */ jsxs8(
|
|
767
899
|
"div",
|
|
768
900
|
{
|
|
769
901
|
className: `
|
|
@@ -790,7 +922,7 @@ var ReactFileUploaderUI = ({
|
|
|
790
922
|
}
|
|
791
923
|
},
|
|
792
924
|
children: [
|
|
793
|
-
/* @__PURE__ */
|
|
925
|
+
/* @__PURE__ */ jsx17(
|
|
794
926
|
"input",
|
|
795
927
|
{
|
|
796
928
|
ref: fileInputRef,
|
|
@@ -803,7 +935,7 @@ var ReactFileUploaderUI = ({
|
|
|
803
935
|
"aria-label": "File input"
|
|
804
936
|
}
|
|
805
937
|
),
|
|
806
|
-
!hasFiles && /* @__PURE__ */
|
|
938
|
+
!hasFiles && /* @__PURE__ */ jsx17(
|
|
807
939
|
LabelUI_default,
|
|
808
940
|
{
|
|
809
941
|
accept,
|
|
@@ -817,7 +949,7 @@ var ReactFileUploaderUI = ({
|
|
|
817
949
|
]
|
|
818
950
|
}
|
|
819
951
|
),
|
|
820
|
-
/* @__PURE__ */
|
|
952
|
+
/* @__PURE__ */ jsx17(
|
|
821
953
|
FileList_default,
|
|
822
954
|
{
|
|
823
955
|
files,
|
|
@@ -831,8 +963,8 @@ var ReactFileUploaderUI = ({
|
|
|
831
963
|
}
|
|
832
964
|
}
|
|
833
965
|
),
|
|
834
|
-
files.length > 0 && uploadProgress < 100 && /* @__PURE__ */
|
|
835
|
-
error && /* @__PURE__ */
|
|
966
|
+
files.length > 0 && uploadProgress < 100 && /* @__PURE__ */ jsx17(ProgressBarComponent_default, { uploadProgress }),
|
|
967
|
+
error && /* @__PURE__ */ jsx17(ErrorComponent_default, { error, setError })
|
|
836
968
|
]
|
|
837
969
|
}
|
|
838
970
|
);
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-yellow-400:oklch(85.2% .199 91.936);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-700:oklch(52.7% .154 150.069);--color-blue-50:oklch(97% .014 254.604);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--radius-lg:.5rem;--radius-xl:.75rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.-top-2{top:calc(var(--spacing)*-2)}.top-1{top:calc(var(--spacing)*1)}.-right-2{right:calc(var(--spacing)*-2)}.bottom-0{bottom:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.left-1{left:calc(var(--spacing)*1)}.z-10{z-index:10}.-mt-1{margin-top:calc(var(--spacing)*-1)}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-3{margin-top:calc(var(--spacing)*3)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.flex{display:flex}.hidden{display:none}.h-1{height:calc(var(--spacing)*1)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-16{height:calc(var(--spacing)*16)}.h-20{height:calc(var(--spacing)*20)}.h-\[180px\]{height:180px}.h-full{height:100%}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-16{width:calc(var(--spacing)*16)}.w-20{width:calc(var(--spacing)*20)}.w-40{width:calc(var(--spacing)*40)}.w-\[180px\]{width:180px}.w-full{width:100%}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.scale-\[1\.01\]{scale:1.01}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-green-200{border-color:var(--color-green-200)}.border-red-200{border-color:var(--color-red-200)}.border-transparent{border-color:#0000}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-green-100{background-color:var(--color-green-100)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-500{background-color:var(--color-red-500)}.bg-white{background-color:var(--color-white)}.bg-yellow-400{background-color:var(--color-yellow-400)}.object-cover{object-fit:cover}.p-0\.5{padding:calc(var(--spacing)*.5)}.p-1\.5{padding:calc(var(--spacing)*1.5)}.p-3{padding:calc(var(--spacing)*3)}.p-6{padding:calc(var(--spacing)*6)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.text-center{text-align:center}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-500{color:var(--color-blue-500)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-green-700{color:var(--color-green-700)}.text-red-500{color:var(--color-red-500)}.text-red-700{color:var(--color-red-700)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.opacity-60{opacity:.6}.opacity-100{opacity:1}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}@media (hover:hover){.group-hover\/thumb\:opacity-100:is(:where(.group\/thumb):hover *){opacity:1}.hover\:border-blue-400:hover{border-color:var(--color-blue-400)}.hover\:border-blue-500:hover{border-color:var(--color-blue-500)}.hover\:border-gray-100:hover{border-color:var(--color-gray-100)}.hover\:border-red-500:hover{border-color:var(--color-red-500)}.hover\:bg-blue-50:hover{background-color:var(--color-blue-50)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-green-200:hover{background-color:var(--color-green-200)}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\:bg-red-600:hover{background-color:var(--color-red-600)}.hover\:text-blue-500:hover{color:var(--color-blue-500)}.hover\:text-blue-600:hover{color:var(--color-blue-600)}.hover\:text-red-600:hover{color:var(--color-red-600)}.hover\:text-red-700:hover{color:var(--color-red-700)}}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.animate-shake{animation:.5s ease-in-out shake}.animate-slideIn{animation:.3s ease-out forwards slideIn}.animate-scaleIn{animation:.3s ease-out forwards scaleIn}.animate-shimmer{animation:2s infinite shimmer}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-file-upload-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
7
|
+
"patch": "pnpm version patch",
|
|
8
|
+
"build:js": "tsup src/index.tsx --format cjs,esm --dts --clean",
|
|
9
|
+
"build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
|
|
10
|
+
"build": "pnpm run build:js && pnpm run build:css",
|
|
10
11
|
"publish:beta": "npm publish --tag beta --access public",
|
|
11
12
|
"publish:latest": "npm publish --access public"
|
|
12
13
|
},
|
|
@@ -27,7 +28,9 @@
|
|
|
27
28
|
"url": "https://github.com/sakilanwar12/react-file-upload-ui.git"
|
|
28
29
|
},
|
|
29
30
|
"author": "sakilanwar12",
|
|
30
|
-
"sideEffects":
|
|
31
|
+
"sideEffects": [
|
|
32
|
+
"*.css"
|
|
33
|
+
],
|
|
31
34
|
"publishConfig": {
|
|
32
35
|
"access": "public"
|
|
33
36
|
},
|
|
@@ -40,13 +43,16 @@
|
|
|
40
43
|
".": {
|
|
41
44
|
"import": "./dist/index.mjs",
|
|
42
45
|
"require": "./dist/index.js"
|
|
43
|
-
}
|
|
46
|
+
},
|
|
47
|
+
"./styles.css": "./dist/styles.css"
|
|
44
48
|
},
|
|
45
49
|
"devDependencies": {
|
|
50
|
+
"@tailwindcss/cli": "^4.0.0-beta.7",
|
|
46
51
|
"@types/react": "^19.2.7",
|
|
47
52
|
"@types/react-dom": "^19.2.3",
|
|
48
53
|
"react": "^19.2.0",
|
|
49
54
|
"react-dom": "^19.2.0",
|
|
55
|
+
"tailwindcss": "^4.0.0-beta.7",
|
|
50
56
|
"tsup": "^8.5.1",
|
|
51
57
|
"typescript": "^5.9.3"
|
|
52
58
|
}
|