react-file-upload-ui 0.1.3 → 0.1.6

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.
Files changed (4) hide show
  1. package/dist/index.js +260 -112
  2. package/dist/index.mjs +260 -112
  3. package/dist/styles.css +1 -1
  4. package/package.json +5 -2
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/FileList/MainPreview.tsx
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
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-[180px] h-[180px] p-1.5 border border-gray-100 rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
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 import_jsx_runtime4 = require("react/jsx-runtime");
264
+ var import_jsx_runtime6 = require("react/jsx-runtime");
137
265
  function CrossIcon({ ...props }) {
138
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
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, import_jsx_runtime4.jsx)(
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 import_jsx_runtime5 = require("react/jsx-runtime");
289
+ var import_jsx_runtime7 = require("react/jsx-runtime");
162
290
  function PlusIcon({ ...props }) {
163
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
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, import_jsx_runtime5.jsx)(
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 import_jsx_runtime6 = require("react/jsx-runtime");
314
+ var import_jsx_runtime8 = require("react/jsx-runtime");
187
315
  function AddFileButton({ onAddFile }) {
188
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
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, import_jsx_runtime6.jsx)(PlusIcon_default, {})
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 import_jsx_runtime7 = require("react/jsx-runtime");
329
+ var import_jsx_runtime9 = require("react/jsx-runtime");
202
330
  function CheckIcon({ ...props }) {
203
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
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, import_jsx_runtime7.jsx)(
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 import_jsx_runtime8 = require("react/jsx-runtime");
354
+ var import_jsx_runtime10 = require("react/jsx-runtime");
227
355
  function StarIcon({ ...props }) {
228
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.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" }) });
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 import_jsx_runtime9 = require("react/jsx-runtime");
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, import_jsx_runtime9.jsxs)(
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, import_jsx_runtime9.jsx)(CheckIcon_default, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StarIcon_default, { className: "w-4 h-4 opacity-60" }),
247
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: isDefault ? "Default Image" : "Set as Default" })
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 import_jsx_runtime10 = require("react/jsx-runtime");
383
+ var import_jsx_runtime12 = require("react/jsx-runtime");
256
384
  function TrashIcon({ ...props }) {
257
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
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, import_jsx_runtime10.jsx)(
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 import_jsx_runtime11 = require("react/jsx-runtime");
408
+ var import_jsx_runtime13 = require("react/jsx-runtime");
281
409
  function ClearAllFile({ onClearAll }) {
282
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
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, import_jsx_runtime11.jsx)(TrashIcon_default, { className: "w-4 h-4" }),
290
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "Clear All" })
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 import_jsx_runtime12 = require("react/jsx-runtime");
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, import_jsx_runtime12.jsxs)("div", { className: "space-y-4 p-3", children: [
321
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-center gap-6", children: [
322
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MainPreview_default, { selectedFile }),
323
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2", children: [
324
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
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, import_jsx_runtime12.jsx)(ClearAllFile_default, { onClearAll: clearAll })
459
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ClearAllFile_default, { onClearAll: clearAll })
332
460
  ] })
333
461
  ] }),
334
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full flex flex-wrap items-center gap-1", children: [
335
- files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative group/thumb", children: [
336
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
337
- "button",
338
- {
339
- onClick: () => setSelectedFileId(file.id),
340
- 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"}`,
341
- children: [
342
- file.preview ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
343
- "img",
344
- {
345
- src: file.preview,
346
- alt: file.name,
347
- className: "w-full h-full object-cover"
348
- }
349
- ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full h-full bg-gray-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
350
- "svg",
351
- {
352
- className: "w-6 h-6 text-gray-400",
353
- fill: "none",
354
- stroke: "currentColor",
355
- viewBox: "0 0 24 24",
356
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
357
- "path",
358
- {
359
- strokeLinecap: "round",
360
- strokeLinejoin: "round",
361
- strokeWidth: 2,
362
- 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"
363
- }
364
- )
365
- }
366
- ) }),
367
- file.isDefault && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute top-1 left-1 p-0.5 bg-yellow-400 rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
368
- "svg",
369
- {
370
- className: "w-3 h-3 text-white",
371
- fill: "currentColor",
372
- viewBox: "0 0 20 20",
373
- children: /* @__PURE__ */ (0, import_jsx_runtime12.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" })
374
- }
375
- ) })
376
- ]
377
- }
378
- ),
379
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
380
- "button",
381
- {
382
- onClick: (e) => {
383
- e.stopPropagation();
384
- removeFile(file.id);
385
- },
386
- 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",
387
- title: "Remove file",
388
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CrossIcon_default, {})
389
- }
390
- )
391
- ] }, file.id)),
392
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AddFileButton_default, { onAddFile })
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 import_jsx_runtime13 = require("react/jsx-runtime");
816
+ var import_jsx_runtime15 = require("react/jsx-runtime");
685
817
  function UploadIcon({ ...props }) {
686
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
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, import_jsx_runtime13.jsx)(
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 import_jsx_runtime14 = require("react/jsx-runtime");
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, import_jsx_runtime14.jsxs)("div", { className: "p-6", children: [
717
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "mb-3 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
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, import_jsx_runtime14.jsx)("h3", { className: "text-lg font-semibold text-gray-700 mb-1", children: isDragging && !disabled ? "Drop files here" : "Drag & drop files" }),
724
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-gray-500 mb-3", children: "or click to browse" }),
725
- /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "text-xs text-gray-400 space-y-1", children: [
726
- accept && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { children: [
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, import_jsx_runtime14.jsxs)("p", { children: [
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 import_jsx_runtime15 = require("react/jsx-runtime");
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, import_jsx_runtime15.jsxs)(
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, import_jsx_runtime15.jsxs)(
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, import_jsx_runtime15.jsx)(
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, import_jsx_runtime15.jsx)(
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, import_jsx_runtime15.jsx)(
976
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
845
977
  FileList_default,
846
978
  {
847
979
  files,
@@ -855,10 +987,26 @@ var ReactFileUploaderUI = ({
855
987
  }
856
988
  }
857
989
  ),
858
- files.length > 0 && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ProgressBarComponent_default, { uploadProgress }),
859
- error && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ErrorComponent_default, { error, setError })
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
  );
863
995
  };
864
996
  var index_default = ReactFileUploaderUI;
997
+
998
+ // Injected CSS
999
+ if (typeof document !== 'undefined') {
1000
+ try {
1001
+ const styleId = 'react-file-upload-ui-styles';
1002
+ if (!document.getElementById(styleId)) {
1003
+ const style = document.createElement('style');
1004
+ style.id = styleId;
1005
+ style.textContent = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
1006
+ @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}`;
1007
+ document.head.appendChild(style);
1008
+ }
1009
+ } catch (e) {
1010
+ console.error('Failed to inject react-file-upload-ui styles:', e);
1011
+ }
1012
+ }