react-file-upload-ui 0.1.0 → 0.1.2

package/dist/index.js

@@ -20,22 +20,845 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
-  ReactFileUploaderUI: () => ReactFileUploaderUI,
   default: () => index_default
 });
 module.exports = __toCommonJS(index_exports);
+var import_react5 = require("react");
+
+// src/components/ErrorComponent.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var ReactFileUploaderUI = ({
+function ErrorComponent({ error, setError }) {
+  const [isVisible, setIsVisible] = (0, import_react.useState)(true);
+  (0, import_react.useEffect)(() => {
+    setIsVisible(true);
+    const fadeTimer = setTimeout(() => {
+      setIsVisible(false);
+    }, 1e3);
+    const clearTimer = setTimeout(() => {
+      setError("");
+    }, 1e3);
+    return () => {
+      clearTimeout(fadeTimer);
+      clearTimeout(clearTimer);
+    };
+  }, [error, setError]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      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"}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            className: "w-4 h-4 text-red-500 mt-0.5 flex-shrink-0",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-red-700 flex-1", children: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            onClick: () => setError(""),
+            className: "text-red-500 hover:text-red-700",
+            type: "button",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "svg",
+              {
+                className: "w-4 h-4",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var ErrorComponent_default = ErrorComponent;
+
+// src/components/ProgressBarComponent.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ProgressBarComponent({ uploadProgress }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: "bg-blue-600 h-1 -mt-1 rounded-full transition-all duration-300",
+      style: { width: `${uploadProgress}%` }
+    }
+  );
+}
+var ProgressBarComponent_default = ProgressBarComponent;
+
+// src/components/FileList/index.tsx
+var import_react2 = require("react");
+
+// src/components/FileList/MainPreview.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function MainPreview({ selectedFile }) {
+  if (!selectedFile) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-[180px] h-[180px] p-1.5 border border-gray-100  rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "img",
+    {
+      src: selectedFile.preview,
+      alt: selectedFile.name,
+      className: "w-full h-full object-cover rounded-lg"
+    }
+  ) });
+}
+var MainPreview_default = MainPreview;
+
+// src/components/svg/CrossIcon.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function CrossIcon({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "svg",
+    {
+      className: "w-3 h-3",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M6 18L18 6M6 6l12 12"
+        }
+      )
+    }
+  );
+}
+var CrossIcon_default = CrossIcon;
+
+// src/components/svg/PlusIcon.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function PlusIcon({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "svg",
+    {
+      className: "w-8 h-8",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M12 4v16m8-8H4"
+        }
+      )
+    }
+  );
+}
+var PlusIcon_default = PlusIcon;
+
+// src/components/FileList/AddFileButton.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function AddFileButton({ onAddFile }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "button",
+    {
+      onClick: onAddFile,
+      className: "shrink-0 cursor-pointer w-16 h-16 rounded-lg border-2 border-dashed border-gray-300 flex items-center justify-center text-gray-400 hover:text-blue-500 hover:border-blue-500 hover:bg-blue-50 transition-all",
+      type: "button",
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlusIcon_default, {})
+    }
+  );
+}
+var AddFileButton_default = AddFileButton;
+
+// src/components/svg/CheckIcon.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CheckIcon({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "svg",
+    {
+      className: "w-6 h-6",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M5 13l4 4L19 7"
+        }
+      )
+    }
+  );
+}
+var CheckIcon_default = CheckIcon;
+
+// src/components/svg/StarIcon.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function StarIcon({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { className: "w-6 h-6", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
+}
+var StarIcon_default = StarIcon;
+
+// src/components/FileList/SetDefaultButton.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function SetDefaultButton({
+  selectedFile,
+  onSetDefault
+}) {
+  const isDefault = selectedFile.isDefault;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "button",
+    {
+      onClick: () => onSetDefault(selectedFile.id),
+      className: `w-40 flex items-center justify-center cursor-pointer gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${isDefault ? "bg-green-100 text-green-700 border border-green-200 hover:bg-green-200" : "bg-white border border-gray-200 text-gray-600 hover:border-blue-500 hover:text-blue-600 hover:bg-blue-50"}`,
+      type: "button",
+      children: [
+        isDefault ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckIcon_default, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StarIcon_default, { className: "w-4 h-4 opacity-60" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: isDefault ? "Default Image" : "Set as Default" })
+      ]
+    }
+  );
+}
+var SetDefaultButton_default = SetDefaultButton;
+
+// src/components/svg/TrashIcon.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function TrashIcon({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "svg",
+    {
+      className: "w-6 h-6",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+        }
+      )
+    }
+  );
+}
+var TrashIcon_default = TrashIcon;
+
+// src/components/FileList/ClearAllFile.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ClearAllFile({ onClearAll }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "button",
+    {
+      onClick: onClearAll,
+      className: "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium bg-white border border-gray-200 text-gray-600 hover:border-red-500 hover:text-red-600 hover:bg-red-50 transition-all duration-200 w-full justify-center",
+      title: "Clear all files",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TrashIcon_default, { className: "w-4 h-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "Clear All" })
+      ]
+    }
+  );
+}
+var ClearAllFile_default = ClearAllFile;
+
+// src/components/FileList/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FileList = ({
+  files,
+  removeFile,
+  clearAll,
+  setAsDefault,
+  onAddFile
+}) => {
+  const [selectedFileId, setSelectedFileId] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    if (files.length > 0) {
+      if (!selectedFileId || !files.find((f) => f.id === selectedFileId)) {
+        setSelectedFileId(files[0].id);
+      }
+    } else {
+      setSelectedFileId(null);
+    }
+  }, [files, selectedFileId]);
+  if (files.length === 0) {
+    return null;
+  }
+  const selectedFile = files.find((f) => f.id === selectedFileId) || files[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-4 p-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-center gap-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MainPreview_default, { selectedFile }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          SetDefaultButton_default,
+          {
+            selectedFile,
+            onSetDefault: setAsDefault
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ClearAllFile_default, { onClearAll: clearAll })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full flex flex-wrap items-center gap-1", children: [
+      files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative group/thumb", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "button",
+          {
+            onClick: () => setSelectedFileId(file.id),
+            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"}`,
+            children: [
+              file.preview ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "img",
+                {
+                  src: file.preview,
+                  alt: file.name,
+                  className: "w-full h-full object-cover"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full h-full bg-gray-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "svg",
+                {
+                  className: "w-6 h-6 text-gray-400",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      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"
+                    }
+                  )
+                }
+              ) }),
+              file.isDefault && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute top-1 left-1 p-0.5 bg-yellow-400 rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "svg",
+                {
+                  className: "w-3 h-3 text-white",
+                  fill: "currentColor",
+                  viewBox: "0 0 20 20",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              removeFile(file.id);
+            },
+            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",
+            title: "Remove file",
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CrossIcon_default, {})
+          }
+        )
+      ] }, file.id)),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AddFileButton_default, { onAddFile })
+    ] })
+  ] });
+};
+var FileList_default = FileList;
+
+// src/hooks/useDragging.ts
+var import_react3 = require("react");
+function useDragging({ disabled }) {
+  const [isDragging, setIsDragging] = (0, import_react3.useState)(false);
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) {
+      setIsDragging(true);
+    }
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX;
+    const y = e.clientY;
+    if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
+      setIsDragging(false);
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  return {
+    isDragging,
+    setIsDragging,
+    handleDragEnter,
+    handleDragLeave,
+    handleDragOver
+  };
+}
+var useDragging_default = useDragging;
+
+// src/hooks/useFileHandler.ts
+var import_react4 = require("react");
+
+// src/utils/format.ts
+function formatFileSize(bytes) {
+  if (bytes === 0) {
+    return "0 Bytes";
+  }
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+}
+
+// src/utils/validation.ts
+var validateFiles = (newFiles, currentFiles, maxFiles, maxSize, accept) => {
+  let validFiles = newFiles;
+  const errors = [];
+  if (currentFiles.length + validFiles.length > maxFiles) {
+    errors.push(`Maximum ${maxFiles} files allowed`);
+    validFiles = validFiles.slice(0, maxFiles - currentFiles.length);
+  }
+  const oversizedFiles = validFiles.filter((file) => file.size > maxSize);
+  if (oversizedFiles.length > 0) {
+    errors.push(
+      `${oversizedFiles.length} file(s) exceed ${formatFileSize(maxSize)}`
+    );
+    validFiles = validFiles.filter((file) => file.size <= maxSize);
+  }
+  if (accept) {
+    const acceptedTypes = accept.split(",").map((type) => type.trim());
+    const invalidFiles = validFiles.filter((file) => {
+      return !acceptedTypes.some((type) => {
+        if (type.startsWith(".")) {
+          return file.name.toLowerCase().endsWith(type.toLowerCase());
+        }
+        if (type.endsWith("/*")) {
+          const mainType = type.split("/")[0];
+          return file.type.startsWith(mainType);
+        }
+        return file.type === type;
+      });
+    });
+    if (invalidFiles.length > 0) {
+      errors.push(`${invalidFiles.length} file(s) have invalid type`);
+    }
+    validFiles = validFiles.filter((file) => {
+      return acceptedTypes.some((type) => {
+        if (type.startsWith(".")) {
+          return file.name.toLowerCase().endsWith(type.toLowerCase());
+        }
+        if (type.endsWith("/*")) {
+          const mainType = type.split("/")[0];
+          return file.type.startsWith(mainType);
+        }
+        return file.type === type;
+      });
+    });
+  }
+  return { validFiles, errors };
+};
+
+// src/hooks/useFileHandler.ts
+var useFileHandler = ({
+  maxFiles,
+  maxSize,
   accept,
-  multiple
+  multiple,
+  onFilesSelected,
+  onError,
+  initialFiles
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "file", accept, multiple }),
-    "Test Package"
+  const transformToFileData = (files2) => {
+    return files2.map((file) => ({
+      id: file.id,
+      isDefault: file.isDefault || false,
+      file: file.rawFile,
+      url: file.preview,
+      name: file.name
+    }));
+  };
+  const extractNameFromUrl = (url) => {
+    try {
+      const pathname = new URL(url).pathname;
+      const parts = pathname.split("/").filter(Boolean);
+      return parts[parts.length - 1] || url;
+    } catch (e) {
+      return url;
+    }
+  };
+  const [files, setFiles] = (0, import_react4.useState)(() => {
+    if (!initialFiles || initialFiles.length === 0) return [];
+    return initialFiles.map((f) => {
+      var _a, _b, _c;
+      return {
+        id: (_a = f.id) != null ? _a : `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        name: (_b = f.name) != null ? _b : extractNameFromUrl(f.url),
+        size: 0,
+        type: (_c = f.type) != null ? _c : "",
+        preview: f.url,
+        isDefault: !!f.isDefault,
+        rawFile: void 0
+      };
+    });
+  });
+  const [uploadProgress, setUploadProgress] = (0, import_react4.useState)(0);
+  const [error, setError] = (0, import_react4.useState)("");
+  (0, import_react4.useEffect)(() => {
+    if (files.length > 0 && onFilesSelected) {
+      onFilesSelected(transformToFileData(files));
+    }
+  }, []);
+  const simulateUpload = (0, import_react4.useCallback)(() => {
+    setUploadProgress(0);
+    const interval = setInterval(() => {
+      setUploadProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(interval);
+          return 100;
+        }
+        return prev + 10;
+      });
+    }, 150);
+  }, []);
+  const handleFiles = (0, import_react4.useCallback)(
+    (newFiles) => {
+      setError("");
+      const { validFiles, errors } = validateFiles(
+        newFiles,
+        files,
+        maxFiles,
+        maxSize,
+        accept
+      );
+      if (errors.length > 0) {
+        const errorMessage = errors.join(". ");
+        setError(errorMessage);
+        onError == null ? void 0 : onError(errorMessage);
+      }
+      if (validFiles.length === 0) {
+        return;
+      }
+      const filesWithMeta = validFiles.map((file) => {
+        var _a;
+        const id = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const isImage = (_a = file.type) == null ? void 0 : _a.startsWith("image/");
+        const preview = isImage ? URL.createObjectURL(file) : void 0;
+        const fileWithMeta = {
+          id,
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          preview,
+          isDefault: false,
+          rawFile: file
+        };
+        return fileWithMeta;
+      });
+      const updatedFiles = multiple ? [...files, ...filesWithMeta] : filesWithMeta;
+      setFiles(updatedFiles);
+      onFilesSelected == null ? void 0 : onFilesSelected(transformToFileData(updatedFiles));
+      if (filesWithMeta.length > 0) {
+        simulateUpload();
+      }
+    },
+    [
+      files,
+      maxFiles,
+      maxSize,
+      accept,
+      multiple,
+      onFilesSelected,
+      onError,
+      simulateUpload
+    ]
+  );
+  const handleFileInput = (0, import_react4.useCallback)(
+    (e) => {
+      if (e.target.files) {
+        const selectedFiles = Array.from(e.target.files);
+        handleFiles(selectedFiles);
+      }
+    },
+    [handleFiles]
+  );
+  const removeFile = (0, import_react4.useCallback)(
+    (id) => {
+      const fileToRemove = files.find((f) => f.id === id);
+      if ((fileToRemove == null ? void 0 : fileToRemove.preview) && fileToRemove.rawFile) {
+        URL.revokeObjectURL(fileToRemove.preview);
+      }
+      const updatedFiles = files.filter((f) => f.id !== id);
+      setFiles(updatedFiles);
+      onFilesSelected == null ? void 0 : onFilesSelected(transformToFileData(updatedFiles));
+      setError("");
+    },
+    [files, onFilesSelected]
+  );
+  const clearAll = (0, import_react4.useCallback)(() => {
+    files.forEach((file) => {
+      if (file.preview && file.rawFile) {
+        URL.revokeObjectURL(file.preview);
+      }
+    });
+    setFiles([]);
+    onFilesSelected == null ? void 0 : onFilesSelected(transformToFileData([]));
+    setError("");
+    setUploadProgress(0);
+  }, [files, onFilesSelected]);
+  const setAsDefault = (0, import_react4.useCallback)(
+    (id) => {
+      const updatedFiles = files.map((file) => {
+        if (file.id === id && file.isDefault) {
+          file.isDefault = false;
+        } else {
+          file.isDefault = file.id === id;
+        }
+        return file;
+      });
+      setFiles([...updatedFiles]);
+      onFilesSelected == null ? void 0 : onFilesSelected(transformToFileData(updatedFiles));
+    },
+    [files, onFilesSelected]
+  );
+  return {
+    files,
+    uploadProgress,
+    error,
+    setError,
+    handleFiles,
+    handleFileInput,
+    removeFile,
+    clearAll,
+    setAsDefault
+  };
+};
+var useFileHandler_default = useFileHandler;
+
+// src/utils/input-handler.ts
+var handleDrop = (e, setIsDragging, handleFiles, disabled) => {
+  e.preventDefault();
+  e.stopPropagation();
+  setIsDragging(false);
+  if (disabled) {
+    return;
+  }
+  const droppedFiles = Array.from(e.dataTransfer.files);
+  handleFiles(droppedFiles);
+};
+
+// src/components/svg/UploadIcon.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function UploadIcon({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "svg",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+        }
+      )
+    }
+  );
+}
+var UploadIcon_default = UploadIcon;
+
+// src/components/LabelUI.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function LabelUI({
+  accept,
+  isDragging,
+  maxSize = 10 * 1024 * 1024,
+  maxFiles = 10,
+  disabled = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "p-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "mb-3 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      UploadIcon_default,
+      {
+        className: `w-8 h-8 transition-colors duration-200 ${isDragging && !disabled ? "text-blue-500" : "text-gray-400"}`
+      }
+    ) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-lg font-semibold text-gray-700 mb-1", children: isDragging && !disabled ? "Drop files here" : "Drag & drop files" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-gray-500 mb-3", children: "or click to browse" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "text-xs text-gray-400 space-y-1", children: [
+      accept && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { children: [
+        "Accepted: ",
+        accept
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { children: [
+        "Max size: ",
+        formatFileSize(maxSize),
+        " \u2022 Max files: ",
+        maxFiles
+      ] })
+    ] })
   ] });
+}
+var LabelUI_default = LabelUI;
+
+// src/index.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ReactFileUploaderUI = ({
+  accept,
+  multiple = true,
+  maxSize = 10 * 1024 * 1024,
+  maxFiles = 10,
+  onFilesSelected,
+  onError,
+  disabled = false,
+  className = "",
+  defaultFiles
+}) => {
+  const fileInputRef = (0, import_react5.useRef)(null);
+  const {
+    files,
+    uploadProgress,
+    error,
+    setError,
+    handleFiles,
+    handleFileInput,
+    removeFile,
+    clearAll,
+    setAsDefault
+  } = useFileHandler_default({
+    maxFiles,
+    maxSize,
+    accept,
+    multiple,
+    onFilesSelected,
+    onError,
+    initialFiles: defaultFiles
+  });
+  const {
+    isDragging,
+    setIsDragging,
+    handleDragEnter,
+    handleDragLeave,
+    handleDragOver
+  } = useDragging_default({ disabled });
+  const onDrop = (e) => {
+    handleDrop(e, setIsDragging, handleFiles, disabled);
+  };
+  const hasFiles = files.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: `w-full border-gray-200 border border-dashed rounded-xl relative ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "div",
+          {
+            className: `
+          relative  text-center
+          transition-all duration-200 ease-in-out
+          ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"}
+          ${isDragging && !disabled ? "border-blue-500 bg-blue-50 scale-[1.01]" : "border-gray-300 bg-white hover:border-blue-400 hover:bg-gray-50"}
+        `,
+            onDragEnter: handleDragEnter,
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onDrop,
+            onClick: () => {
+              var _a;
+              return !disabled && ((_a = fileInputRef.current) == null ? void 0 : _a.click());
+            },
+            role: "button",
+            "aria-label": "File upload area",
+            tabIndex: disabled ? -1 : 0,
+            onKeyDown: (e) => {
+              var _a;
+              if ((e.key === "Enter" || e.key === " ") && !disabled) {
+                (_a = fileInputRef.current) == null ? void 0 : _a.click();
+              }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  accept,
+                  multiple,
+                  onChange: handleFileInput,
+                  className: "hidden",
+                  disabled,
+                  "aria-label": "File input"
+                }
+              ),
+              !hasFiles && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                LabelUI_default,
+                {
+                  accept,
+                  multiple,
+                  maxSize,
+                  maxFiles,
+                  disabled,
+                  isDragging
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          FileList_default,
+          {
+            files,
+            uploadProgress,
+            removeFile,
+            clearAll,
+            setAsDefault,
+            onAddFile: () => {
+              var _a;
+              return !disabled && ((_a = fileInputRef.current) == null ? void 0 : _a.click());
+            }
+          }
+        ),
+        files.length > 0 && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ProgressBarComponent_default, { uploadProgress }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ErrorComponent_default, { error, setError })
+      ]
+    }
+  );
 };
 var index_default = ReactFileUploaderUI;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ReactFileUploaderUI
-});