dn-react-router-toolkit 0.1.4 → 0.1.5

package/dist/file-kit/client/drop_file_input.d.mts

@@ -11,18 +11,21 @@ type FileInputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTM
 };
 type FileItem<T> = {
     key: string;
+    width?: number;
+    height?: number;
     item?: T;
 };
 type Props<T> = {
     defaultValue?: T | T[];
     options?: FileUploaderOptions;
-    uploadFile?: (file: File, options?: FileUploaderOptions) => Promise<T>;
     onFileInput?: (files: File[]) => void;
     onFileUploaded?: (file: T) => Promise<void>;
-    onChange?: (files: FileItem<T>[]) => void;
+    onChange?: (files: T[]) => void;
     limit?: number;
 };
-declare function useDropFileInput<T>({ defaultValue, options, uploadFile, onFileInput, onFileUploaded, limit, }?: Props<T>): {
+declare function createUseDropFileInput<T>({ uploadFile, }: {
+    uploadFile: (file: File, options?: FileUploaderOptions) => Promise<T>;
+}): ({ defaultValue, options, onChange, onFileInput, onFileUploaded, limit, }?: Props<T>) => {
     fileIds: string[];
     files: FileItem<T>[];
     setFiles: React.Dispatch<React.SetStateAction<FileItem<T>[]>>;
@@ -30,4 +33,4 @@ declare function useDropFileInput<T>({ defaultValue, options, uploadFile, onFile
 };
 declare function DropFileMessageBox(): React.JSX.Element;
 
-export { DropFileMessageBox, type FileInputProps, type FileItem, useDropFileInput as default, useDropFileInput };
+export { DropFileMessageBox, type FileInputProps, type FileItem, createUseDropFileInput as default };

package/dist/file-kit/client/drop_file_input.d.ts

@@ -11,18 +11,21 @@ type FileInputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTM
 };
 type FileItem<T> = {
     key: string;
+    width?: number;
+    height?: number;
     item?: T;
 };
 type Props<T> = {
     defaultValue?: T | T[];
     options?: FileUploaderOptions;
-    uploadFile?: (file: File, options?: FileUploaderOptions) => Promise<T>;
     onFileInput?: (files: File[]) => void;
     onFileUploaded?: (file: T) => Promise<void>;
-    onChange?: (files: FileItem<T>[]) => void;
+    onChange?: (files: T[]) => void;
     limit?: number;
 };
-declare function useDropFileInput<T>({ defaultValue, options, uploadFile, onFileInput, onFileUploaded, limit, }?: Props<T>): {
+declare function createUseDropFileInput<T>({ uploadFile, }: {
+    uploadFile: (file: File, options?: FileUploaderOptions) => Promise<T>;
+}): ({ defaultValue, options, onChange, onFileInput, onFileUploaded, limit, }?: Props<T>) => {
     fileIds: string[];
     files: FileItem<T>[];
     setFiles: React.Dispatch<React.SetStateAction<FileItem<T>[]>>;
@@ -30,4 +33,4 @@ declare function useDropFileInput<T>({ defaultValue, options, uploadFile, onFile
 };
 declare function DropFileMessageBox(): React.JSX.Element;
 
-export { DropFileMessageBox, type FileInputProps, type FileItem, useDropFileInput as default, useDropFileInput };
+export { DropFileMessageBox, type FileInputProps, type FileItem, createUseDropFileInput as default };

package/dist/file-kit/client/drop_file_input.js

@@ -31,8 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var drop_file_input_exports = {};
 __export(drop_file_input_exports, {
   DropFileMessageBox: () => DropFileMessageBox,
-  default: () => drop_file_input_default,
-  useDropFileInput: () => useDropFileInput
+  default: () => createUseDropFileInput
 });
 module.exports = __toCommonJS(drop_file_input_exports);
 var import_react = __toESM(require("react"));
@@ -43,193 +42,256 @@ function cn(...classes) {
   return classes.filter(Boolean).join(" ").trim();
 }
 
-// src/file-kit/client/drop_file_input.tsx
-function useDropFileInput({
-  defaultValue,
-  options,
-  uploadFile,
-  onFileInput,
-  onFileUploaded,
-  limit
-} = {}) {
-  const [files, setFiles] = (0, import_react.useState)(
-    defaultValue ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map((v) => {
-      return {
-        key: (0, import_uuid.v4)(),
-        item: v
+// src/file-kit/client/metadata.ts
+function generateMetadata(blob) {
+  return new Promise((resolve, reject) => {
+    if (blob.type.startsWith("image/")) {
+      const img = new Image();
+      img.src = URL.createObjectURL(blob);
+      img.onload = () => {
+        resolve({
+          width: img.width,
+          height: img.height
+        });
       };
-    }).slice(0, limit ? limit : Infinity) : []
-  );
-  const fileRef = (0, import_react.useRef)([]);
-  (0, import_react.useEffect)(() => {
-    fileRef.current = files;
-  }, [files]);
-  const Component = (0, import_react.useCallback)(
-    function Component2({
-      className,
-      container = "border border-dashed border-neutral-300 rounded flex items-center justify-center",
-      draggingClassName,
-      name,
-      hideMessage = false,
-      children,
-      ...props
-    }) {
-      const [isDragging, setIsDragging] = (0, import_react.useState)(false);
-      const handleDragEnter = (0, import_react.useCallback)((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(true);
-      }, []);
-      const handleDragLeave = (0, import_react.useCallback)((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(false);
-      }, []);
-      const handleDragOver = (0, import_react.useCallback)((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }, []);
-      const handleFiles = (0, import_react.useCallback)(
-        async (files2) => {
-          if (limit && fileRef.current.length >= limit) {
-            alert(`\uD30C\uC77C\uC740 \uCD5C\uB300 ${limit}\uAC1C \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
-            return;
-          }
-          const filteredFiles = files2.filter((file) => {
-            return true;
-          });
-          if (files2.length !== filteredFiles.length) {
-            alert(`${props.accept} \uD615\uC2DD\uC758 \uD30C\uC77C\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
-          }
-          const limitedFiles = filteredFiles.slice(
-            0,
-            limit ? limit - fileRef.current.length : Infinity
-          );
-          if (limitedFiles.length === 0) {
-            return;
-          }
-          if (onFileInput) {
-            onFileInput(limitedFiles);
-          }
-          for (const file of limitedFiles) {
-            const fileItem = {
-              key: (0, import_uuid.v4)()
-            };
-            setFiles((prevFiles) => [...prevFiles, fileItem]);
-            uploadFile?.(file, options).then(async (item) => {
-              await onFileUploaded?.(item);
-              setFiles(
-                (prevFiles) => prevFiles.map((f) => {
-                  if (f.key === fileItem.key) {
-                    return {
-                      ...f,
-                      item
-                    };
-                  }
-                  return f;
-                })
-              );
-            });
-          }
-        },
-        [props.accept]
-      );
-      const handleDrop = (0, import_react.useCallback)(
-        (e) => {
+      img.onerror = reject;
+      return;
+    }
+    if (blob.type.startsWith("video/")) {
+      const video = document.createElement("video");
+      video.src = URL.createObjectURL(blob);
+      video.onloadedmetadata = () => {
+        resolve({
+          width: video.videoWidth,
+          height: video.videoHeight,
+          duration: video.duration
+        });
+      };
+      video.onerror = reject;
+      return;
+    }
+    resolve({});
+  });
+}
+
+// src/file-kit/client/drop_file_input.tsx
+function createUseDropFileInput({
+  uploadFile
+}) {
+  return function useDropFileInput({
+    defaultValue,
+    options,
+    onChange,
+    onFileInput,
+    onFileUploaded,
+    limit
+  } = {}) {
+    const [files, setFiles] = (0, import_react.useState)(
+      defaultValue ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map((v) => {
+        return {
+          key: (0, import_uuid.v4)(),
+          item: v
+        };
+      }).slice(0, limit ? limit : Infinity) : []
+    );
+    const fileRef = (0, import_react.useRef)([]);
+    (0, import_react.useEffect)(() => {
+      fileRef.current = files;
+      onChange?.(files.map((f) => f.item).filter(Boolean));
+    }, [files]);
+    const Component = (0, import_react.useCallback)(
+      function Component2({
+        className,
+        container = "border border-dashed border-neutral-300 rounded flex items-center justify-center",
+        draggingClassName,
+        name,
+        hideMessage = false,
+        children,
+        ...props
+      }) {
+        const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+        const handleDragEnter = (0, import_react.useCallback)((e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragging(true);
+        }, []);
+        const handleDragLeave = (0, import_react.useCallback)((e) => {
           e.preventDefault();
           e.stopPropagation();
           setIsDragging(false);
-          if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-            handleFiles(Array.from(e.dataTransfer.files));
-            e.dataTransfer.clearData();
-          }
-        },
-        [handleFiles]
-      );
-      const inputRef = (0, import_react.useRef)(null);
-      const handleClick = (0, import_react.useCallback)(() => {
-        inputRef.current?.click();
-      }, []);
-      const handleKeyDown = (0, import_react.useCallback)(
-        (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            handleClick();
-          }
-        },
-        [handleClick]
-      );
-      const handleChange = (0, import_react.useCallback)(
-        (e) => {
-          if (e.target.files && e.target.files.length > 0) {
-            handleFiles(Array.from(e.target.files));
-            e.target.value = "";
-          }
-        },
-        [handleFiles]
-      );
-      return /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: cn(
-            className,
-            container,
-            draggingClassName?.(isDragging) || (isDragging ? "bg-neutral-300/25" : "hover:bg-neutral-300/25"),
-            "transition-colors cursor-pointer"
-          ),
-          onDragEnter: handleDragEnter,
-          onDragLeave: handleDragLeave,
-          onDragOver: handleDragOver,
-          onDrop: handleDrop,
-          onClick: handleClick,
-          onChange: handleChange,
-          onKeyDown: handleKeyDown,
-          tabIndex: 0,
-          role: "button"
-        },
-        /* @__PURE__ */ import_react.default.createElement("input", { ...props, defaultValue: "", type: "file", hidden: true, ref: inputRef }),
-        /* @__PURE__ */ import_react.default.createElement(
-          "input",
-          {
-            name,
-            hidden: true,
-            readOnly: true,
-            value: files.map((file) => {
-              if (file.item && typeof file.item === "object" && "id" in file.item) {
-                return file.item.id;
+        }, []);
+        const handleDragOver = (0, import_react.useCallback)((e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }, []);
+        const handleFiles = (0, import_react.useCallback)(
+          async (files2) => {
+            if (limit && fileRef.current.length >= limit) {
+              alert(`\uD30C\uC77C\uC740 \uCD5C\uB300 ${limit}\uAC1C \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
+              return;
+            }
+            const filteredFiles = files2.filter((file) => {
+              if (!props.accept) {
+                return true;
               }
-              return null;
-            }).filter(Boolean).join(",")
-          }
-        ),
-        children || !(hideMessage && !isDragging) && /* @__PURE__ */ import_react.default.createElement(DropFileMessageBox, null)
-      );
-    },
-    [limit, fileRef, files, options, uploadFile, onFileInput, onFileUploaded]
-  );
-  const loadedFileIds = files.map((file) => {
-    if (file.item && typeof file.item === "object" && "id" in file.item) {
-      return file.item.id;
-    }
-    return null;
-  }).filter(Boolean);
-  const loadedFileIdsString = loadedFileIds.join(",");
-  const fileIds = (0, import_react.useMemo)(
-    () => loadedFileIdsString.split(",").filter(Boolean),
-    [loadedFileIdsString]
-  );
-  return {
-    fileIds,
-    files,
-    setFiles,
-    Component
+              const accepts = props.accept.split(",");
+              for (const accept of accepts) {
+                const trimmedAccept = accept.trim();
+                if (file.type === trimmedAccept || file.type.endsWith(trimmedAccept) || file.name.endsWith(trimmedAccept)) {
+                  return true;
+                }
+                if (trimmedAccept.endsWith("/*")) {
+                  const baseType = trimmedAccept.replace("/*", "");
+                  if (file.type.startsWith(baseType + "/")) {
+                    return true;
+                  }
+                }
+              }
+              return false;
+            });
+            if (files2.length !== filteredFiles.length) {
+              alert(`${props.accept} \uD615\uC2DD\uC758 \uD30C\uC77C\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
+            }
+            const limitedFiles = filteredFiles.slice(
+              0,
+              limit ? limit - fileRef.current.length : Infinity
+            );
+            if (limitedFiles.length === 0) {
+              return;
+            }
+            if (onFileInput) {
+              onFileInput(limitedFiles);
+            }
+            for (const file of limitedFiles) {
+              const { width, height } = await generateMetadata(file);
+              const fileItem = {
+                key: (0, import_uuid.v4)(),
+                width: Number(width) || void 0,
+                height: Number(height) || void 0
+              };
+              setFiles((prevFiles) => [...prevFiles, fileItem]);
+              uploadFile?.(file, options).then(async (item) => {
+                await onFileUploaded?.(item);
+                setFiles(
+                  (prevFiles) => prevFiles.map((f) => {
+                    if (f.key === fileItem.key) {
+                      return {
+                        ...f,
+                        item
+                      };
+                    }
+                    return f;
+                  })
+                );
+              });
+            }
+          },
+          [props.accept]
+        );
+        const handleDrop = (0, import_react.useCallback)(
+          (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsDragging(false);
+            if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+              handleFiles(Array.from(e.dataTransfer.files));
+              e.dataTransfer.clearData();
+            }
+          },
+          [handleFiles]
+        );
+        const inputRef = (0, import_react.useRef)(null);
+        const handleClick = (0, import_react.useCallback)(() => {
+          inputRef.current?.click();
+        }, []);
+        const handleKeyDown = (0, import_react.useCallback)(
+          (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              handleClick();
+            }
+          },
+          [handleClick]
+        );
+        const handleChange = (0, import_react.useCallback)(
+          (e) => {
+            if (e.target.files && e.target.files.length > 0) {
+              handleFiles(Array.from(e.target.files));
+              e.target.value = "";
+            }
+          },
+          [handleFiles]
+        );
+        return /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: cn(
+              className,
+              container,
+              draggingClassName?.(isDragging) || (isDragging ? "bg-neutral-300/25" : "hover:bg-neutral-300/25"),
+              "transition-colors cursor-pointer"
+            ),
+            onDragEnter: handleDragEnter,
+            onDragLeave: handleDragLeave,
+            onDragOver: handleDragOver,
+            onDrop: handleDrop,
+            onClick: handleClick,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            tabIndex: 0,
+            role: "button"
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            "input",
+            {
+              ...props,
+              defaultValue: "",
+              type: "file",
+              hidden: true,
+              ref: inputRef
+            }
+          ),
+          /* @__PURE__ */ import_react.default.createElement(
+            "input",
+            {
+              name,
+              hidden: true,
+              readOnly: true,
+              value: files.map((file) => {
+                if (file.item && typeof file.item === "object" && "id" in file.item) {
+                  return file.item.id;
+                }
+                return null;
+              }).filter(Boolean).join(",")
+            }
+          ),
+          children || !(hideMessage && !isDragging) && /* @__PURE__ */ import_react.default.createElement(DropFileMessageBox, null)
+        );
+      },
+      [limit, fileRef, files, options, uploadFile, onFileInput, onFileUploaded]
+    );
+    const loadedFileIds = files.map((file) => {
+      if (file.item && typeof file.item === "object" && "id" in file.item) {
+        return file.item.id;
+      }
+      return null;
+    }).filter(Boolean);
+    const loadedFileIdsString = loadedFileIds.join(",");
+    const fileIds = (0, import_react.useMemo)(
+      () => loadedFileIdsString.split(",").filter(Boolean),
+      [loadedFileIdsString]
+    );
+    return {
+      fileIds,
+      files,
+      setFiles,
+      Component
+    };
   };
 }
 function DropFileMessageBox() {
   return /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm pointer-events-none flex justify-center items-center" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ import_react.default.createElement("span", null, "\uD30C\uC77C\uC744 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uAC70\uB098 \uD074\uB9AD\uD574\uC11C \uC120\uD0DD\uD574 \uC8FC\uC138\uC694")));
 }
-var drop_file_input_default = useDropFileInput;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  DropFileMessageBox,
-  useDropFileInput
+  DropFileMessageBox
 });

package/dist/file-kit/client/drop_file_input.mjs

@@ -13,193 +13,256 @@ function cn(...classes) {
   return classes.filter(Boolean).join(" ").trim();
 }
 
-// src/file-kit/client/drop_file_input.tsx
-function useDropFileInput({
-  defaultValue,
-  options,
-  uploadFile,
-  onFileInput,
-  onFileUploaded,
-  limit
-} = {}) {
-  const [files, setFiles] = useState(
-    defaultValue ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map((v) => {
-      return {
-        key: v4(),
-        item: v
+// src/file-kit/client/metadata.ts
+function generateMetadata(blob) {
+  return new Promise((resolve, reject) => {
+    if (blob.type.startsWith("image/")) {
+      const img = new Image();
+      img.src = URL.createObjectURL(blob);
+      img.onload = () => {
+        resolve({
+          width: img.width,
+          height: img.height
+        });
       };
-    }).slice(0, limit ? limit : Infinity) : []
-  );
-  const fileRef = useRef([]);
-  useEffect(() => {
-    fileRef.current = files;
-  }, [files]);
-  const Component = useCallback(
-    function Component2({
-      className,
-      container = "border border-dashed border-neutral-300 rounded flex items-center justify-center",
-      draggingClassName,
-      name,
-      hideMessage = false,
-      children,
-      ...props
-    }) {
-      const [isDragging, setIsDragging] = useState(false);
-      const handleDragEnter = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(true);
-      }, []);
-      const handleDragLeave = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(false);
-      }, []);
-      const handleDragOver = useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }, []);
-      const handleFiles = useCallback(
-        async (files2) => {
-          if (limit && fileRef.current.length >= limit) {
-            alert(`\uD30C\uC77C\uC740 \uCD5C\uB300 ${limit}\uAC1C \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
-            return;
-          }
-          const filteredFiles = files2.filter((file) => {
-            return true;
-          });
-          if (files2.length !== filteredFiles.length) {
-            alert(`${props.accept} \uD615\uC2DD\uC758 \uD30C\uC77C\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
-          }
-          const limitedFiles = filteredFiles.slice(
-            0,
-            limit ? limit - fileRef.current.length : Infinity
-          );
-          if (limitedFiles.length === 0) {
-            return;
-          }
-          if (onFileInput) {
-            onFileInput(limitedFiles);
-          }
-          for (const file of limitedFiles) {
-            const fileItem = {
-              key: v4()
-            };
-            setFiles((prevFiles) => [...prevFiles, fileItem]);
-            uploadFile?.(file, options).then(async (item) => {
-              await onFileUploaded?.(item);
-              setFiles(
-                (prevFiles) => prevFiles.map((f) => {
-                  if (f.key === fileItem.key) {
-                    return {
-                      ...f,
-                      item
-                    };
-                  }
-                  return f;
-                })
-              );
-            });
-          }
-        },
-        [props.accept]
-      );
-      const handleDrop = useCallback(
-        (e) => {
+      img.onerror = reject;
+      return;
+    }
+    if (blob.type.startsWith("video/")) {
+      const video = document.createElement("video");
+      video.src = URL.createObjectURL(blob);
+      video.onloadedmetadata = () => {
+        resolve({
+          width: video.videoWidth,
+          height: video.videoHeight,
+          duration: video.duration
+        });
+      };
+      video.onerror = reject;
+      return;
+    }
+    resolve({});
+  });
+}
+
+// src/file-kit/client/drop_file_input.tsx
+function createUseDropFileInput({
+  uploadFile
+}) {
+  return function useDropFileInput({
+    defaultValue,
+    options,
+    onChange,
+    onFileInput,
+    onFileUploaded,
+    limit
+  } = {}) {
+    const [files, setFiles] = useState(
+      defaultValue ? (Array.isArray(defaultValue) ? defaultValue : [defaultValue]).map((v) => {
+        return {
+          key: v4(),
+          item: v
+        };
+      }).slice(0, limit ? limit : Infinity) : []
+    );
+    const fileRef = useRef([]);
+    useEffect(() => {
+      fileRef.current = files;
+      onChange?.(files.map((f) => f.item).filter(Boolean));
+    }, [files]);
+    const Component = useCallback(
+      function Component2({
+        className,
+        container = "border border-dashed border-neutral-300 rounded flex items-center justify-center",
+        draggingClassName,
+        name,
+        hideMessage = false,
+        children,
+        ...props
+      }) {
+        const [isDragging, setIsDragging] = useState(false);
+        const handleDragEnter = useCallback((e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragging(true);
+        }, []);
+        const handleDragLeave = useCallback((e) => {
           e.preventDefault();
           e.stopPropagation();
           setIsDragging(false);
-          if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-            handleFiles(Array.from(e.dataTransfer.files));
-            e.dataTransfer.clearData();
-          }
-        },
-        [handleFiles]
-      );
-      const inputRef = useRef(null);
-      const handleClick = useCallback(() => {
-        inputRef.current?.click();
-      }, []);
-      const handleKeyDown = useCallback(
-        (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            handleClick();
-          }
-        },
-        [handleClick]
-      );
-      const handleChange = useCallback(
-        (e) => {
-          if (e.target.files && e.target.files.length > 0) {
-            handleFiles(Array.from(e.target.files));
-            e.target.value = "";
-          }
-        },
-        [handleFiles]
-      );
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: cn(
-            className,
-            container,
-            draggingClassName?.(isDragging) || (isDragging ? "bg-neutral-300/25" : "hover:bg-neutral-300/25"),
-            "transition-colors cursor-pointer"
-          ),
-          onDragEnter: handleDragEnter,
-          onDragLeave: handleDragLeave,
-          onDragOver: handleDragOver,
-          onDrop: handleDrop,
-          onClick: handleClick,
-          onChange: handleChange,
-          onKeyDown: handleKeyDown,
-          tabIndex: 0,
-          role: "button"
-        },
-        /* @__PURE__ */ React.createElement("input", { ...props, defaultValue: "", type: "file", hidden: true, ref: inputRef }),
-        /* @__PURE__ */ React.createElement(
-          "input",
-          {
-            name,
-            hidden: true,
-            readOnly: true,
-            value: files.map((file) => {
-              if (file.item && typeof file.item === "object" && "id" in file.item) {
-                return file.item.id;
+        }, []);
+        const handleDragOver = useCallback((e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }, []);
+        const handleFiles = useCallback(
+          async (files2) => {
+            if (limit && fileRef.current.length >= limit) {
+              alert(`\uD30C\uC77C\uC740 \uCD5C\uB300 ${limit}\uAC1C \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
+              return;
+            }
+            const filteredFiles = files2.filter((file) => {
+              if (!props.accept) {
+                return true;
               }
-              return null;
-            }).filter(Boolean).join(",")
-          }
-        ),
-        children || !(hideMessage && !isDragging) && /* @__PURE__ */ React.createElement(DropFileMessageBox, null)
-      );
-    },
-    [limit, fileRef, files, options, uploadFile, onFileInput, onFileUploaded]
-  );
-  const loadedFileIds = files.map((file) => {
-    if (file.item && typeof file.item === "object" && "id" in file.item) {
-      return file.item.id;
-    }
-    return null;
-  }).filter(Boolean);
-  const loadedFileIdsString = loadedFileIds.join(",");
-  const fileIds = useMemo(
-    () => loadedFileIdsString.split(",").filter(Boolean),
-    [loadedFileIdsString]
-  );
-  return {
-    fileIds,
-    files,
-    setFiles,
-    Component
+              const accepts = props.accept.split(",");
+              for (const accept of accepts) {
+                const trimmedAccept = accept.trim();
+                if (file.type === trimmedAccept || file.type.endsWith(trimmedAccept) || file.name.endsWith(trimmedAccept)) {
+                  return true;
+                }
+                if (trimmedAccept.endsWith("/*")) {
+                  const baseType = trimmedAccept.replace("/*", "");
+                  if (file.type.startsWith(baseType + "/")) {
+                    return true;
+                  }
+                }
+              }
+              return false;
+            });
+            if (files2.length !== filteredFiles.length) {
+              alert(`${props.accept} \uD615\uC2DD\uC758 \uD30C\uC77C\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
+            }
+            const limitedFiles = filteredFiles.slice(
+              0,
+              limit ? limit - fileRef.current.length : Infinity
+            );
+            if (limitedFiles.length === 0) {
+              return;
+            }
+            if (onFileInput) {
+              onFileInput(limitedFiles);
+            }
+            for (const file of limitedFiles) {
+              const { width, height } = await generateMetadata(file);
+              const fileItem = {
+                key: v4(),
+                width: Number(width) || void 0,
+                height: Number(height) || void 0
+              };
+              setFiles((prevFiles) => [...prevFiles, fileItem]);
+              uploadFile?.(file, options).then(async (item) => {
+                await onFileUploaded?.(item);
+                setFiles(
+                  (prevFiles) => prevFiles.map((f) => {
+                    if (f.key === fileItem.key) {
+                      return {
+                        ...f,
+                        item
+                      };
+                    }
+                    return f;
+                  })
+                );
+              });
+            }
+          },
+          [props.accept]
+        );
+        const handleDrop = useCallback(
+          (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsDragging(false);
+            if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+              handleFiles(Array.from(e.dataTransfer.files));
+              e.dataTransfer.clearData();
+            }
+          },
+          [handleFiles]
+        );
+        const inputRef = useRef(null);
+        const handleClick = useCallback(() => {
+          inputRef.current?.click();
+        }, []);
+        const handleKeyDown = useCallback(
+          (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              handleClick();
+            }
+          },
+          [handleClick]
+        );
+        const handleChange = useCallback(
+          (e) => {
+            if (e.target.files && e.target.files.length > 0) {
+              handleFiles(Array.from(e.target.files));
+              e.target.value = "";
+            }
+          },
+          [handleFiles]
+        );
+        return /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: cn(
+              className,
+              container,
+              draggingClassName?.(isDragging) || (isDragging ? "bg-neutral-300/25" : "hover:bg-neutral-300/25"),
+              "transition-colors cursor-pointer"
+            ),
+            onDragEnter: handleDragEnter,
+            onDragLeave: handleDragLeave,
+            onDragOver: handleDragOver,
+            onDrop: handleDrop,
+            onClick: handleClick,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            tabIndex: 0,
+            role: "button"
+          },
+          /* @__PURE__ */ React.createElement(
+            "input",
+            {
+              ...props,
+              defaultValue: "",
+              type: "file",
+              hidden: true,
+              ref: inputRef
+            }
+          ),
+          /* @__PURE__ */ React.createElement(
+            "input",
+            {
+              name,
+              hidden: true,
+              readOnly: true,
+              value: files.map((file) => {
+                if (file.item && typeof file.item === "object" && "id" in file.item) {
+                  return file.item.id;
+                }
+                return null;
+              }).filter(Boolean).join(",")
+            }
+          ),
+          children || !(hideMessage && !isDragging) && /* @__PURE__ */ React.createElement(DropFileMessageBox, null)
+        );
+      },
+      [limit, fileRef, files, options, uploadFile, onFileInput, onFileUploaded]
+    );
+    const loadedFileIds = files.map((file) => {
+      if (file.item && typeof file.item === "object" && "id" in file.item) {
+        return file.item.id;
+      }
+      return null;
+    }).filter(Boolean);
+    const loadedFileIdsString = loadedFileIds.join(",");
+    const fileIds = useMemo(
+      () => loadedFileIdsString.split(",").filter(Boolean),
+      [loadedFileIdsString]
+    );
+    return {
+      fileIds,
+      files,
+      setFiles,
+      Component
+    };
   };
 }
 function DropFileMessageBox() {
   return /* @__PURE__ */ React.createElement("div", { className: "text-sm pointer-events-none flex justify-center items-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ React.createElement("span", null, "\uD30C\uC77C\uC744 \uC5EC\uAE30\uB85C \uB04C\uC5B4\uB2E4 \uB193\uAC70\uB098 \uD074\uB9AD\uD574\uC11C \uC120\uD0DD\uD574 \uC8FC\uC138\uC694")));
 }
-var drop_file_input_default = useDropFileInput;
 export {
   DropFileMessageBox,
-  drop_file_input_default as default,
-  useDropFileInput
+  createUseDropFileInput as default
 };

package/dist/file-kit/client/file_uploader.d.mts

@@ -1,5 +1,6 @@
 type FileUploaderOptions = {
     metadata?: Record<string, unknown>;
+    convertToWebp?: boolean;
 };
 declare class FileUploader {
     endpoint: string;

package/dist/file-kit/client/file_uploader.d.ts

@@ -1,5 +1,6 @@
 type FileUploaderOptions = {
     metadata?: Record<string, unknown>;
+    convertToWebp?: boolean;
 };
 declare class FileUploader {
     endpoint: string;

package/dist/file-kit/client/file_uploader.js

@@ -23,6 +23,40 @@ __export(file_uploader_exports, {
   FileUploader: () => FileUploader
 });
 module.exports = __toCommonJS(file_uploader_exports);
+
+// src/file-kit/client/metadata.ts
+function generateMetadata(blob) {
+  return new Promise((resolve, reject) => {
+    if (blob.type.startsWith("image/")) {
+      const img = new Image();
+      img.src = URL.createObjectURL(blob);
+      img.onload = () => {
+        resolve({
+          width: img.width,
+          height: img.height
+        });
+      };
+      img.onerror = reject;
+      return;
+    }
+    if (blob.type.startsWith("video/")) {
+      const video = document.createElement("video");
+      video.src = URL.createObjectURL(blob);
+      video.onloadedmetadata = () => {
+        resolve({
+          width: video.videoWidth,
+          height: video.videoHeight,
+          duration: video.duration
+        });
+      };
+      video.onerror = reject;
+      return;
+    }
+    resolve({});
+  });
+}
+
+// src/file-kit/client/file_uploader.ts
 var FileUploader = class {
   endpoint;
   constructor(endpoint = "/api/files") {
@@ -42,45 +76,18 @@ var FileUploader = class {
   }
   async uploadBlob(blob, name = "blob", options = {}) {
     const { type, size } = blob;
-    const metadataForMedia = await new Promise(
-      (resolve, reject) => {
-        if (blob.type.startsWith("image/")) {
-          const img = new Image();
-          img.src = URL.createObjectURL(blob);
-          img.onload = () => {
-            resolve({
-              ...options.metadata,
-              width: img.width,
-              height: img.height
-            });
-          };
-          img.onerror = reject;
-          return;
-        }
-        if (blob.type.startsWith("video/")) {
-          const video = document.createElement("video");
-          video.src = URL.createObjectURL(blob);
-          video.onloadedmetadata = () => {
-            resolve({
-              ...options.metadata,
-              width: video.videoWidth,
-              height: video.videoHeight,
-              duration: video.duration
-            });
-          };
-          video.onerror = reject;
-          return;
-        }
-        resolve(options.metadata || {});
-      }
-    );
+    const metadataForMedia = await generateMetadata(blob);
+    const metadata = {
+      ...metadataForMedia,
+      ...options.metadata
+    };
     const res1 = await fetch(this.endpoint, {
       method: "POST",
       body: JSON.stringify({
         name: name.replace(/ /g, "_"),
         type,
         size,
-        metadata: metadataForMedia
+        metadata
       })
     });
     if (!res1.ok) {

package/dist/file-kit/client/file_uploader.mjs

@@ -1,3 +1,35 @@
+// src/file-kit/client/metadata.ts
+function generateMetadata(blob) {
+  return new Promise((resolve, reject) => {
+    if (blob.type.startsWith("image/")) {
+      const img = new Image();
+      img.src = URL.createObjectURL(blob);
+      img.onload = () => {
+        resolve({
+          width: img.width,
+          height: img.height
+        });
+      };
+      img.onerror = reject;
+      return;
+    }
+    if (blob.type.startsWith("video/")) {
+      const video = document.createElement("video");
+      video.src = URL.createObjectURL(blob);
+      video.onloadedmetadata = () => {
+        resolve({
+          width: video.videoWidth,
+          height: video.videoHeight,
+          duration: video.duration
+        });
+      };
+      video.onerror = reject;
+      return;
+    }
+    resolve({});
+  });
+}
+
 // src/file-kit/client/file_uploader.ts
 var FileUploader = class {
   endpoint;
@@ -18,45 +50,18 @@ var FileUploader = class {
   }
   async uploadBlob(blob, name = "blob", options = {}) {
     const { type, size } = blob;
-    const metadataForMedia = await new Promise(
-      (resolve, reject) => {
-        if (blob.type.startsWith("image/")) {
-          const img = new Image();
-          img.src = URL.createObjectURL(blob);
-          img.onload = () => {
-            resolve({
-              ...options.metadata,
-              width: img.width,
-              height: img.height
-            });
-          };
-          img.onerror = reject;
-          return;
-        }
-        if (blob.type.startsWith("video/")) {
-          const video = document.createElement("video");
-          video.src = URL.createObjectURL(blob);
-          video.onloadedmetadata = () => {
-            resolve({
-              ...options.metadata,
-              width: video.videoWidth,
-              height: video.videoHeight,
-              duration: video.duration
-            });
-          };
-          video.onerror = reject;
-          return;
-        }
-        resolve(options.metadata || {});
-      }
-    );
+    const metadataForMedia = await generateMetadata(blob);
+    const metadata = {
+      ...metadataForMedia,
+      ...options.metadata
+    };
     const res1 = await fetch(this.endpoint, {
       method: "POST",
       body: JSON.stringify({
         name: name.replace(/ /g, "_"),
         type,
         size,
-        metadata: metadataForMedia
+        metadata
       })
     });
     if (!res1.ok) {

package/dist/file-kit/client/metadata.d.mts

@@ -0,0 +1,3 @@
+declare function generateMetadata(blob: Blob | File): Promise<Record<string, unknown>>;
+
+export { generateMetadata };

package/dist/file-kit/client/metadata.d.ts

@@ -0,0 +1,3 @@
+declare function generateMetadata(blob: Blob | File): Promise<Record<string, unknown>>;
+
+export { generateMetadata };

package/dist/file-kit/client/metadata.js

@@ -0,0 +1,59 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/file-kit/client/metadata.ts
+var metadata_exports = {};
+__export(metadata_exports, {
+  generateMetadata: () => generateMetadata
+});
+module.exports = __toCommonJS(metadata_exports);
+function generateMetadata(blob) {
+  return new Promise((resolve, reject) => {
+    if (blob.type.startsWith("image/")) {
+      const img = new Image();
+      img.src = URL.createObjectURL(blob);
+      img.onload = () => {
+        resolve({
+          width: img.width,
+          height: img.height
+        });
+      };
+      img.onerror = reject;
+      return;
+    }
+    if (blob.type.startsWith("video/")) {
+      const video = document.createElement("video");
+      video.src = URL.createObjectURL(blob);
+      video.onloadedmetadata = () => {
+        resolve({
+          width: video.videoWidth,
+          height: video.videoHeight,
+          duration: video.duration
+        });
+      };
+      video.onerror = reject;
+      return;
+    }
+    resolve({});
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generateMetadata
+});

package/dist/file-kit/client/metadata.mjs

@@ -0,0 +1,34 @@
+// src/file-kit/client/metadata.ts
+function generateMetadata(blob) {
+  return new Promise((resolve, reject) => {
+    if (blob.type.startsWith("image/")) {
+      const img = new Image();
+      img.src = URL.createObjectURL(blob);
+      img.onload = () => {
+        resolve({
+          width: img.width,
+          height: img.height
+        });
+      };
+      img.onerror = reject;
+      return;
+    }
+    if (blob.type.startsWith("video/")) {
+      const video = document.createElement("video");
+      video.src = URL.createObjectURL(blob);
+      video.onloadedmetadata = () => {
+        resolve({
+          width: video.videoWidth,
+          height: video.videoHeight,
+          duration: video.duration
+        });
+      };
+      video.onerror = reject;
+      return;
+    }
+    resolve({});
+  });
+}
+export {
+  generateMetadata
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dn-react-router-toolkit",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",