react-file-upload-ui 0.1.5 → 0.1.7

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 (7) hide show
  1. package/README.md +15 -24
  2. package/dist/index.d.mts +15 -1
  3. package/dist/index.d.ts +15 -1
  4. package/dist/index.js +143 -89
  5. package/dist/index.mjs +143 -89
  6. package/dist/styles.css +1 -1
  7. package/package.json +12 -4
package/README.md CHANGED
@@ -7,25 +7,19 @@ React File Upload UI — a small, customizable React component for file uploads.
7
7
  Install as a peer dependency alongside `react` and `react-dom`:
8
8
 
9
9
  ```bash
10
- npm install react react-dom
11
10
  npm install react-file-upload-ui
12
11
  ```
13
12
 
14
13
  or with pnpm:
15
14
 
16
15
  ```bash
17
- pnpm add react react-dom
18
16
  pnpm add react-file-upload-ui
19
17
  ```
20
18
 
21
19
  ## Usage
22
20
 
23
- **Important:** You must import the CSS file for the component to be styled correctly.
24
-
25
21
  ```tsx
26
- import React from "react";
27
22
  import ReactFileUploaderUI from "react-file-upload-ui";
28
- import "react-file-upload-ui/styles.css"; // ← Import the styles
29
23
 
30
24
  export default function App() {
31
25
  const handleFilesSelected = (files) => {
@@ -57,26 +51,23 @@ export default function App() {
57
51
  | `onError` | `(error: string) => void` | - | Callback when an error occurs |
58
52
  | `disabled` | `boolean` | `false` | Disable the file uploader |
59
53
  | `className` | `string` | `""` | Additional CSS classes |
54
+ | `classNames` | `UIClassNames` | `{}` | Custom classes for sub-components |
60
55
  | `defaultFiles` | `IFileData[]` | - | Pre-populate with default files |
61
56
 
62
- ## Building
63
-
64
- This package uses `tsup` to build. To build locally run:
65
-
66
- ```bash
67
- pnpm -C packages run build
68
- ```
69
-
70
- ## Publishing
71
-
72
- Before publishing, make sure `name` in `package.json` is unique on npm and that you've logged in with `npm login`.
73
-
74
- When ready to publish:
75
-
76
- ```bash
77
- pnpm -C packages run build
78
- cd packages
79
- npm publish --access public
57
+ ### UIClassNames Interface
58
+
59
+ ```typescript
60
+ interface UIClassNames {
61
+ container?: string; // Main wrapper
62
+ dropzone?: string; // Drop zone area
63
+ label?: string; // Label inside drop zone
64
+ fileList?: string; // File list container
65
+ fileListContainer?: string; // Top section of file list
66
+ thumbnailStrip?: string; // Container for thumbnails
67
+ thumbnail?: string; // Individual thumbnail wrapper
68
+ error?: string; // Error message container
69
+ progressBar?: string; // Progress bar container
70
+ }
80
71
  ```
81
72
 
82
73
  ---
package/dist/index.d.mts CHANGED
@@ -21,6 +21,20 @@ interface IReactFileUploaderUIProps {
21
21
  * Example: [{ url: 'https://...', name: 'image.jpg' }]
22
22
  */
23
23
  defaultFiles?: DefaultFile[];
24
+ /**
25
+ * Custom class names for internal components to override or extend styles
26
+ */
27
+ classNames?: {
28
+ container?: string;
29
+ dropzone?: string;
30
+ label?: string;
31
+ fileList?: string;
32
+ fileListContainer?: string;
33
+ thumbnailStrip?: string;
34
+ thumbnail?: string;
35
+ error?: string;
36
+ progressBar?: string;
37
+ };
24
38
  }
25
39
  interface DefaultFile {
26
40
  id?: string;
@@ -42,6 +56,6 @@ interface IFileWithPreview {
42
56
  rawFile?: File | undefined;
43
57
  }
44
58
 
45
- declare const ReactFileUploaderUI: ({ accept, multiple, maxSize, maxFiles, onFilesSelected, onError, disabled, className, defaultFiles, }: IReactFileUploaderUIProps) => react_jsx_runtime.JSX.Element;
59
+ declare const ReactFileUploaderUI: ({ accept, multiple, maxSize, maxFiles, onFilesSelected, onError, disabled, className, defaultFiles, classNames, }: IReactFileUploaderUIProps) => react_jsx_runtime.JSX.Element;
46
60
 
47
61
  export { type IFileData, type IFileWithPreview, type IReactFileUploaderUIProps, ReactFileUploaderUI as default };
package/dist/index.d.ts CHANGED
@@ -21,6 +21,20 @@ interface IReactFileUploaderUIProps {
21
21
  * Example: [{ url: 'https://...', name: 'image.jpg' }]
22
22
  */
23
23
  defaultFiles?: DefaultFile[];
24
+ /**
25
+ * Custom class names for internal components to override or extend styles
26
+ */
27
+ classNames?: {
28
+ container?: string;
29
+ dropzone?: string;
30
+ label?: string;
31
+ fileList?: string;
32
+ fileListContainer?: string;
33
+ thumbnailStrip?: string;
34
+ thumbnail?: string;
35
+ error?: string;
36
+ progressBar?: string;
37
+ };
24
38
  }
25
39
  interface DefaultFile {
26
40
  id?: string;
@@ -42,6 +56,6 @@ interface IFileWithPreview {
42
56
  rawFile?: File | undefined;
43
57
  }
44
58
 
45
- declare const ReactFileUploaderUI: ({ accept, multiple, maxSize, maxFiles, onFilesSelected, onError, disabled, className, defaultFiles, }: IReactFileUploaderUIProps) => react_jsx_runtime.JSX.Element;
59
+ declare const ReactFileUploaderUI: ({ accept, multiple, maxSize, maxFiles, onFilesSelected, onError, disabled, className, defaultFiles, classNames, }: IReactFileUploaderUIProps) => react_jsx_runtime.JSX.Element;
46
60
 
47
61
  export { type IFileData, type IFileWithPreview, type IReactFileUploaderUIProps, ReactFileUploaderUI as default };
package/dist/index.js CHANGED
@@ -28,7 +28,11 @@ var import_react5 = require("react");
28
28
  // src/components/ErrorComponent.tsx
29
29
  var import_react = require("react");
30
30
  var import_jsx_runtime = require("react/jsx-runtime");
31
- function ErrorComponent({ error, setError }) {
31
+ function ErrorComponent({
32
+ error,
33
+ setError,
34
+ className = ""
35
+ }) {
32
36
  const [isVisible, setIsVisible] = (0, import_react.useState)(true);
33
37
  (0, import_react.useEffect)(() => {
34
38
  setIsVisible(true);
@@ -46,7 +50,7 @@ function ErrorComponent({ error, setError }) {
46
50
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
47
51
  "div",
48
52
  {
49
- className: `mt-3 absolute bottom-0 left-0 w-full bg-red-50 border border-red-200 rounded-lg p-3 flex items-start gap-2 transition-opacity duration-500 ${isVisible ? "opacity-100" : "opacity-0"}`,
53
+ className: `mt-3 absolute bottom-0 left-0 w-full bg-red-50 border border-red-200 rounded-lg p-3 flex items-start gap-2 transition-opacity duration-500 ${isVisible ? "opacity-100" : "opacity-0"} ${className}`,
50
54
  children: [
51
55
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
52
56
  "svg",
@@ -101,11 +105,14 @@ var ErrorComponent_default = ErrorComponent;
101
105
 
102
106
  // src/components/ProgressBarComponent.tsx
103
107
  var import_jsx_runtime2 = require("react/jsx-runtime");
104
- function ProgressBarComponent({ uploadProgress }) {
108
+ function ProgressBarComponent({
109
+ uploadProgress,
110
+ className = ""
111
+ }) {
105
112
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
106
113
  "div",
107
114
  {
108
- className: "bg-blue-600 h-1 -mt-1 rounded-full transition-all duration-300",
115
+ className: `bg-blue-600 h-1 -mt-1 rounded-full transition-all duration-300 ${className}`,
109
116
  style: { width: `${uploadProgress}%` }
110
117
  }
111
118
  );
@@ -429,7 +436,8 @@ var FileList = ({
429
436
  removeFile,
430
437
  clearAll,
431
438
  setAsDefault,
432
- onAddFile
439
+ onAddFile,
440
+ classNames = {}
433
441
  }) => {
434
442
  const [selectedFileId, setSelectedFileId] = (0, import_react2.useState)(null);
435
443
  (0, import_react2.useEffect)(() => {
@@ -445,84 +453,96 @@ var FileList = ({
445
453
  return null;
446
454
  }
447
455
  const selectedFile = files.find((f) => f.id === selectedFileId) || files[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)(
453
- SetDefaultButton_default,
454
- {
455
- selectedFile,
456
- onSetDefault: setAsDefault
457
- }
458
- ),
459
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ClearAllFile_default, { onClearAll: clearAll })
460
- ] })
461
- ] }),
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",
456
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `space-y-4 p-3 ${classNames.fileList || ""}`, children: [
457
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
458
+ "div",
459
+ {
460
+ className: `flex items-center justify-center gap-6 ${classNames.fileListContainer || ""}`,
461
+ children: [
462
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MainPreview_default, { selectedFile }),
463
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2", children: [
464
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
465
+ SetDefaultButton_default,
466
+ {
467
+ selectedFile,
468
+ onSetDefault: setAsDefault
469
+ }
470
+ ),
471
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ClearAllFile_default, { onClearAll: clearAll })
472
+ ] })
473
+ ]
474
+ }
475
+ ),
476
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
477
+ "div",
478
+ {
479
+ className: `w-full flex flex-wrap items-center gap-1 ${classNames.thumbnailStrip || ""}`,
480
+ children: [
481
+ files.map((file) => {
482
+ const isPdf = file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
483
+ const isDoc = file.type === "application/msword" || file.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" || file.name.toLowerCase().match(/\.(doc|docx)$/);
484
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative group/thumb", children: [
485
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
486
+ "button",
487
+ {
488
+ onClick: () => setSelectedFileId(file.id),
489
+ className: `relative cursor-pointer w-16 h-16 p-0.5 rounded-lg overflow-hidden border transition-all ${classNames.thumbnail || ""} ${selectedFileId === file.id ? "border-gray-300" : "border-transparent hover:border-gray-100"}`,
490
+ children: [
491
+ 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)(
492
+ "img",
489
493
  {
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
+ src: file.preview,
495
+ alt: file.name,
496
+ className: "w-full h-full object-cover"
494
497
  }
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 })
525
- ] })
498
+ ) : /* @__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)(
499
+ "svg",
500
+ {
501
+ className: "w-6 h-6 text-gray-400",
502
+ fill: "none",
503
+ stroke: "currentColor",
504
+ viewBox: "0 0 24 24",
505
+ children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
506
+ "path",
507
+ {
508
+ strokeLinecap: "round",
509
+ strokeLinejoin: "round",
510
+ strokeWidth: 2,
511
+ 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"
512
+ }
513
+ )
514
+ }
515
+ ) }),
516
+ 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)(
517
+ "svg",
518
+ {
519
+ className: "w-3 h-3 text-white",
520
+ fill: "currentColor",
521
+ viewBox: "0 0 20 20",
522
+ 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" })
523
+ }
524
+ ) })
525
+ ]
526
+ }
527
+ ),
528
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
529
+ "button",
530
+ {
531
+ onClick: (e) => {
532
+ e.stopPropagation();
533
+ removeFile(file.id);
534
+ },
535
+ 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",
536
+ title: "Remove file",
537
+ children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CrossIcon_default, {})
538
+ }
539
+ )
540
+ ] }, file.id);
541
+ }),
542
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AddFileButton_default, { onAddFile })
543
+ ]
544
+ }
545
+ )
526
546
  ] });
527
547
  };
528
548
  var FileList_default = FileList;
@@ -843,9 +863,10 @@ function LabelUI({
843
863
  isDragging,
844
864
  maxSize = 10 * 1024 * 1024,
845
865
  maxFiles = 10,
846
- disabled = false
866
+ disabled = false,
867
+ className = ""
847
868
  }) {
848
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "p-6", children: [
869
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `p-6 ${className}`, children: [
849
870
  /* @__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)(
850
871
  UploadIcon_default,
851
872
  {
@@ -881,7 +902,8 @@ var ReactFileUploaderUI = ({
881
902
  onError,
882
903
  disabled = false,
883
904
  className = "",
884
- defaultFiles
905
+ defaultFiles,
906
+ classNames = {}
885
907
  }) => {
886
908
  const fileInputRef = (0, import_react5.useRef)(null);
887
909
  const {
@@ -917,7 +939,7 @@ var ReactFileUploaderUI = ({
917
939
  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
918
940
  "div",
919
941
  {
920
- className: `w-full border-gray-200 border border-dashed rounded-xl relative ${className}`,
942
+ className: `w-full border-gray-200 border border-dashed rounded-xl relative ${className} ${classNames.container || ""}`,
921
943
  children: [
922
944
  /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
923
945
  "div",
@@ -927,6 +949,7 @@ var ReactFileUploaderUI = ({
927
949
  transition-all duration-200 ease-in-out
928
950
  ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"}
929
951
  ${isDragging && !disabled ? "border-blue-500 bg-blue-50 scale-[1.01]" : "border-gray-300 bg-white hover:border-blue-400 hover:bg-gray-50"}
952
+ ${classNames.dropzone || ""}
930
953
  `,
931
954
  onDragEnter: handleDragEnter,
932
955
  onDragOver: handleDragOver,
@@ -967,7 +990,8 @@ var ReactFileUploaderUI = ({
967
990
  maxSize,
968
991
  maxFiles,
969
992
  disabled,
970
- isDragging
993
+ isDragging,
994
+ className: classNames.label
971
995
  }
972
996
  )
973
997
  ]
@@ -984,13 +1008,43 @@ var ReactFileUploaderUI = ({
984
1008
  onAddFile: () => {
985
1009
  var _a;
986
1010
  return !disabled && ((_a = fileInputRef.current) == null ? void 0 : _a.click());
987
- }
1011
+ },
1012
+ classNames
988
1013
  }
989
1014
  ),
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 })
1015
+ files.length > 0 && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1016
+ ProgressBarComponent_default,
1017
+ {
1018
+ uploadProgress,
1019
+ className: classNames.progressBar
1020
+ }
1021
+ ),
1022
+ error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1023
+ ErrorComponent_default,
1024
+ {
1025
+ error,
1026
+ setError,
1027
+ className: classNames.error
1028
+ }
1029
+ )
992
1030
  ]
993
1031
  }
994
1032
  );
995
1033
  };
996
1034
  var index_default = ReactFileUploaderUI;
1035
+
1036
+ // Injected CSS
1037
+ if (typeof document !== 'undefined') {
1038
+ try {
1039
+ const styleId = 'react-file-upload-ui-styles';
1040
+ if (!document.getElementById(styleId)) {
1041
+ const style = document.createElement('style');
1042
+ style.id = styleId;
1043
+ style.textContent = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
1044
+ @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}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-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}`;
1045
+ document.head.appendChild(style);
1046
+ }
1047
+ } catch (e) {
1048
+ console.error('Failed to inject react-file-upload-ui styles:', e);
1049
+ }
1050
+ }
package/dist/index.mjs CHANGED
@@ -4,7 +4,11 @@ import { useRef } from "react";
4
4
  // src/components/ErrorComponent.tsx
5
5
  import { useEffect, useState } from "react";
6
6
  import { jsx, jsxs } from "react/jsx-runtime";
7
- function ErrorComponent({ error, setError }) {
7
+ function ErrorComponent({
8
+ error,
9
+ setError,
10
+ className = ""
11
+ }) {
8
12
  const [isVisible, setIsVisible] = useState(true);
9
13
  useEffect(() => {
10
14
  setIsVisible(true);
@@ -22,7 +26,7 @@ function ErrorComponent({ error, setError }) {
22
26
  return /* @__PURE__ */ jsxs(
23
27
  "div",
24
28
  {
25
- className: `mt-3 absolute bottom-0 left-0 w-full bg-red-50 border border-red-200 rounded-lg p-3 flex items-start gap-2 transition-opacity duration-500 ${isVisible ? "opacity-100" : "opacity-0"}`,
29
+ className: `mt-3 absolute bottom-0 left-0 w-full bg-red-50 border border-red-200 rounded-lg p-3 flex items-start gap-2 transition-opacity duration-500 ${isVisible ? "opacity-100" : "opacity-0"} ${className}`,
26
30
  children: [
27
31
  /* @__PURE__ */ jsx(
28
32
  "svg",
@@ -77,11 +81,14 @@ var ErrorComponent_default = ErrorComponent;
77
81
 
78
82
  // src/components/ProgressBarComponent.tsx
79
83
  import { jsx as jsx2 } from "react/jsx-runtime";
80
- function ProgressBarComponent({ uploadProgress }) {
84
+ function ProgressBarComponent({
85
+ uploadProgress,
86
+ className = ""
87
+ }) {
81
88
  return /* @__PURE__ */ jsx2(
82
89
  "div",
83
90
  {
84
- className: "bg-blue-600 h-1 -mt-1 rounded-full transition-all duration-300",
91
+ className: `bg-blue-600 h-1 -mt-1 rounded-full transition-all duration-300 ${className}`,
85
92
  style: { width: `${uploadProgress}%` }
86
93
  }
87
94
  );
@@ -405,7 +412,8 @@ var FileList = ({
405
412
  removeFile,
406
413
  clearAll,
407
414
  setAsDefault,
408
- onAddFile
415
+ onAddFile,
416
+ classNames = {}
409
417
  }) => {
410
418
  const [selectedFileId, setSelectedFileId] = useState2(null);
411
419
  useEffect2(() => {
@@ -421,84 +429,96 @@ var FileList = ({
421
429
  return null;
422
430
  }
423
431
  const selectedFile = files.find((f) => f.id === selectedFileId) || files[0];
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(
429
- SetDefaultButton_default,
430
- {
431
- selectedFile,
432
- onSetDefault: setAsDefault
433
- }
434
- ),
435
- /* @__PURE__ */ jsx14(ClearAllFile_default, { onClearAll: clearAll })
436
- ] })
437
- ] }),
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",
432
+ return /* @__PURE__ */ jsxs6("div", { className: `space-y-4 p-3 ${classNames.fileList || ""}`, children: [
433
+ /* @__PURE__ */ jsxs6(
434
+ "div",
435
+ {
436
+ className: `flex items-center justify-center gap-6 ${classNames.fileListContainer || ""}`,
437
+ children: [
438
+ /* @__PURE__ */ jsx14(MainPreview_default, { selectedFile }),
439
+ /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
440
+ /* @__PURE__ */ jsx14(
441
+ SetDefaultButton_default,
442
+ {
443
+ selectedFile,
444
+ onSetDefault: setAsDefault
445
+ }
446
+ ),
447
+ /* @__PURE__ */ jsx14(ClearAllFile_default, { onClearAll: clearAll })
448
+ ] })
449
+ ]
450
+ }
451
+ ),
452
+ /* @__PURE__ */ jsxs6(
453
+ "div",
454
+ {
455
+ className: `w-full flex flex-wrap items-center gap-1 ${classNames.thumbnailStrip || ""}`,
456
+ children: [
457
+ files.map((file) => {
458
+ const isPdf = file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
459
+ const isDoc = file.type === "application/msword" || file.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" || file.name.toLowerCase().match(/\.(doc|docx)$/);
460
+ return /* @__PURE__ */ jsxs6("div", { className: "relative group/thumb", children: [
461
+ /* @__PURE__ */ jsxs6(
462
+ "button",
463
+ {
464
+ onClick: () => setSelectedFileId(file.id),
465
+ className: `relative cursor-pointer w-16 h-16 p-0.5 rounded-lg overflow-hidden border transition-all ${classNames.thumbnail || ""} ${selectedFileId === file.id ? "border-gray-300" : "border-transparent hover:border-gray-100"}`,
466
+ children: [
467
+ 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(
468
+ "img",
465
469
  {
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
+ src: file.preview,
471
+ alt: file.name,
472
+ className: "w-full h-full object-cover"
470
473
  }
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 })
501
- ] })
474
+ ) : /* @__PURE__ */ jsx14("div", { className: "w-full h-full bg-gray-100 flex items-center justify-center", children: /* @__PURE__ */ jsx14(
475
+ "svg",
476
+ {
477
+ className: "w-6 h-6 text-gray-400",
478
+ fill: "none",
479
+ stroke: "currentColor",
480
+ viewBox: "0 0 24 24",
481
+ children: /* @__PURE__ */ jsx14(
482
+ "path",
483
+ {
484
+ strokeLinecap: "round",
485
+ strokeLinejoin: "round",
486
+ strokeWidth: 2,
487
+ 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"
488
+ }
489
+ )
490
+ }
491
+ ) }),
492
+ file.isDefault && /* @__PURE__ */ jsx14("div", { className: "absolute top-1 left-1 p-0.5 bg-yellow-400 rounded-full", children: /* @__PURE__ */ jsx14(
493
+ "svg",
494
+ {
495
+ className: "w-3 h-3 text-white",
496
+ fill: "currentColor",
497
+ viewBox: "0 0 20 20",
498
+ 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" })
499
+ }
500
+ ) })
501
+ ]
502
+ }
503
+ ),
504
+ /* @__PURE__ */ jsx14(
505
+ "button",
506
+ {
507
+ onClick: (e) => {
508
+ e.stopPropagation();
509
+ removeFile(file.id);
510
+ },
511
+ 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",
512
+ title: "Remove file",
513
+ children: /* @__PURE__ */ jsx14(CrossIcon_default, {})
514
+ }
515
+ )
516
+ ] }, file.id);
517
+ }),
518
+ /* @__PURE__ */ jsx14(AddFileButton_default, { onAddFile })
519
+ ]
520
+ }
521
+ )
502
522
  ] });
503
523
  };
504
524
  var FileList_default = FileList;
@@ -819,9 +839,10 @@ function LabelUI({
819
839
  isDragging,
820
840
  maxSize = 10 * 1024 * 1024,
821
841
  maxFiles = 10,
822
- disabled = false
842
+ disabled = false,
843
+ className = ""
823
844
  }) {
824
- return /* @__PURE__ */ jsxs7("div", { className: "p-6", children: [
845
+ return /* @__PURE__ */ jsxs7("div", { className: `p-6 ${className}`, children: [
825
846
  /* @__PURE__ */ jsx16("div", { className: "mb-3 flex justify-center", children: /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(
826
847
  UploadIcon_default,
827
848
  {
@@ -857,7 +878,8 @@ var ReactFileUploaderUI = ({
857
878
  onError,
858
879
  disabled = false,
859
880
  className = "",
860
- defaultFiles
881
+ defaultFiles,
882
+ classNames = {}
861
883
  }) => {
862
884
  const fileInputRef = useRef(null);
863
885
  const {
@@ -893,7 +915,7 @@ var ReactFileUploaderUI = ({
893
915
  return /* @__PURE__ */ jsxs8(
894
916
  "div",
895
917
  {
896
- className: `w-full border-gray-200 border border-dashed rounded-xl relative ${className}`,
918
+ className: `w-full border-gray-200 border border-dashed rounded-xl relative ${className} ${classNames.container || ""}`,
897
919
  children: [
898
920
  /* @__PURE__ */ jsxs8(
899
921
  "div",
@@ -903,6 +925,7 @@ var ReactFileUploaderUI = ({
903
925
  transition-all duration-200 ease-in-out
904
926
  ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"}
905
927
  ${isDragging && !disabled ? "border-blue-500 bg-blue-50 scale-[1.01]" : "border-gray-300 bg-white hover:border-blue-400 hover:bg-gray-50"}
928
+ ${classNames.dropzone || ""}
906
929
  `,
907
930
  onDragEnter: handleDragEnter,
908
931
  onDragOver: handleDragOver,
@@ -943,7 +966,8 @@ var ReactFileUploaderUI = ({
943
966
  maxSize,
944
967
  maxFiles,
945
968
  disabled,
946
- isDragging
969
+ isDragging,
970
+ className: classNames.label
947
971
  }
948
972
  )
949
973
  ]
@@ -960,11 +984,25 @@ var ReactFileUploaderUI = ({
960
984
  onAddFile: () => {
961
985
  var _a;
962
986
  return !disabled && ((_a = fileInputRef.current) == null ? void 0 : _a.click());
963
- }
987
+ },
988
+ classNames
964
989
  }
965
990
  ),
966
- files.length > 0 && uploadProgress < 100 && /* @__PURE__ */ jsx17(ProgressBarComponent_default, { uploadProgress }),
967
- error && /* @__PURE__ */ jsx17(ErrorComponent_default, { error, setError })
991
+ files.length > 0 && uploadProgress < 100 && /* @__PURE__ */ jsx17(
992
+ ProgressBarComponent_default,
993
+ {
994
+ uploadProgress,
995
+ className: classNames.progressBar
996
+ }
997
+ ),
998
+ error && /* @__PURE__ */ jsx17(
999
+ ErrorComponent_default,
1000
+ {
1001
+ error,
1002
+ setError,
1003
+ className: classNames.error
1004
+ }
1005
+ )
968
1006
  ]
969
1007
  }
970
1008
  );
@@ -973,3 +1011,19 @@ var index_default = ReactFileUploaderUI;
973
1011
  export {
974
1012
  index_default as default
975
1013
  };
1014
+
1015
+ // Injected CSS
1016
+ if (typeof document !== 'undefined') {
1017
+ try {
1018
+ const styleId = 'react-file-upload-ui-styles';
1019
+ if (!document.getElementById(styleId)) {
1020
+ const style = document.createElement('style');
1021
+ style.id = styleId;
1022
+ style.textContent = `/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
1023
+ @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}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-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}`;
1024
+ document.head.appendChild(style);
1025
+ }
1026
+ } catch (e) {
1027
+ console.error('Failed to inject react-file-upload-ui styles:', e);
1028
+ }
1029
+ }
package/dist/styles.css CHANGED
@@ -1,2 +1,2 @@
1
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}
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}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-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,13 +1,14 @@
1
1
  {
2
2
  "name": "react-file-upload-ui",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {
7
7
  "patch": "pnpm version patch",
8
8
  "build:js": "tsup src/index.tsx --format cjs,esm --dts --clean",
9
9
  "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
10
- "build": "pnpm run build:js && pnpm run build:css",
10
+ "build:inject": "node scripts/inject-css.js",
11
+ "build": "pnpm run build:js && pnpm run build:css && pnpm run build:inject",
11
12
  "publish:beta": "npm publish --tag beta --access public",
12
13
  "publish:latest": "npm publish --access public"
13
14
  },
@@ -18,9 +19,14 @@
18
19
  "license": "MIT",
19
20
  "keywords": [
20
21
  "react",
21
- "file",
22
+ "react-file-upload-ui",
23
+ "react-file-uploader",
24
+ "file-upload",
25
+ "react-image-upload",
26
+ "react-pdf-upload",
27
+ "react-uploader",
28
+ "file-uploader",
22
29
  "upload",
23
- "uploader",
24
30
  "ui"
25
31
  ],
26
32
  "repository": {
@@ -29,6 +35,8 @@
29
35
  },
30
36
  "author": "sakilanwar12",
31
37
  "sideEffects": [
38
+ "dist/index.js",
39
+ "dist/index.mjs",
32
40
  "*.css"
33
41
  ],
34
42
  "publishConfig": {