@webdevarif/dashui 0.2.2 → 0.2.3

package/dist/index.mjs

@@ -1909,10 +1909,49 @@ function MediaPickerDialog({
   onSelect
 }) {
   const [localSelected, setLocalSelected] = React20.useState(/* @__PURE__ */ new Set());
+  const [isDragging, setIsDragging] = React20.useState(false);
   const fileInputRef = React20.useRef(null);
+  const dragCounterRef = React20.useRef(0);
   React20.useEffect(() => {
-    if (!open) setLocalSelected(/* @__PURE__ */ new Set());
+    if (!open) {
+      setLocalSelected(/* @__PURE__ */ new Set());
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+    }
   }, [open]);
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer.types.includes("Files")) {
+      dragCounterRef.current++;
+      setIsDragging(true);
+    }
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
+    if (dragCounterRef.current <= 0) {
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current = 0;
+    setIsDragging(false);
+    if (!onUpload || !e.dataTransfer.files.length) return;
+    const accepted = accept === "images" ? Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/")) : Array.from(e.dataTransfer.files);
+    if (!accepted.length) return;
+    const dt = new DataTransfer();
+    accepted.forEach((f) => dt.items.add(f));
+    onUpload(dt.files);
+  };
   const typeOptions = ALL_TYPE_OPTIONS.filter(
     (o) => accept === "images" ? o.value === "all" || o.value === "images" : true
   );
@@ -2056,27 +2095,49 @@ function MediaPickerDialog({
                 "%"
               ] })
             ] }, i)) }),
-            /* @__PURE__ */ jsxs20("div", { className: "flex-1 overflow-y-auto p-4", children: [
-              /* @__PURE__ */ jsx34(
-                MediaGrid,
-                {
-                  files,
-                  selected: localSelected,
-                  onSelect: handleFileSelect,
-                  loading,
-                  columns: 5,
-                  onUploadClick: onUpload ? () => fileInputRef.current?.click() : void 0
-                }
-              ),
-              hasMore && /* @__PURE__ */ jsx34("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx34(
-                "button",
-                {
-                  onClick: onLoadMore,
-                  className: "rounded-lg border px-4 py-2 text-xs text-muted-foreground transition-colors hover:bg-accent",
-                  children: "Load more"
-                }
-              ) })
-            ] })
+            /* @__PURE__ */ jsxs20(
+              "div",
+              {
+                className: "relative flex-1 overflow-y-auto p-4",
+                onDragEnter: handleDragEnter,
+                onDragLeave: handleDragLeave,
+                onDragOver: handleDragOver,
+                onDrop: handleDrop,
+                children: [
+                  isDragging && onUpload && /* @__PURE__ */ jsxs20("div", { className: "pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-primary bg-primary/5 backdrop-blur-[1px]", children: [
+                    /* @__PURE__ */ jsxs20("svg", { className: "h-10 w-10 text-primary opacity-70", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx34("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                      /* @__PURE__ */ jsx34("polyline", { points: "17 8 12 3 7 8" }),
+                      /* @__PURE__ */ jsx34("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+                    ] }),
+                    /* @__PURE__ */ jsxs20("p", { className: "text-sm font-medium text-primary", children: [
+                      "Drop ",
+                      accept === "images" ? "images" : "files",
+                      " to upload"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx34(
+                    MediaGrid,
+                    {
+                      files,
+                      selected: localSelected,
+                      onSelect: handleFileSelect,
+                      loading,
+                      columns: 5,
+                      onUploadClick: onUpload ? () => fileInputRef.current?.click() : void 0
+                    }
+                  ),
+                  hasMore && /* @__PURE__ */ jsx34("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx34(
+                    "button",
+                    {
+                      onClick: onLoadMore,
+                      className: "rounded-lg border px-4 py-2 text-xs text-muted-foreground transition-colors hover:bg-accent",
+                      children: "Load more"
+                    }
+                  ) })
+                ]
+              }
+            )
           ] })
         ] }),
         localSelected.size > 0 && /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between gap-4 border-t px-5 py-3 shrink-0 bg-muted/20", children: [