@webdevarif/dashui 0.2.1 → 0.2.3

package/dist/index.mjs

@@ -1880,11 +1880,10 @@ function MediaGrid({
 // src/components/media/media-picker-dialog.tsx
 import * as React20 from "react";
 import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
-var TYPE_OPTIONS = [
+var ALL_TYPE_OPTIONS = [
   { value: "all", label: "All" },
   { value: "images", label: "Images" },
   { value: "videos", label: "Videos" },
-  { value: "audio", label: "Audio" },
   { value: "documents", label: "Docs" }
 ];
 function MediaPickerDialog({
@@ -1910,23 +1909,61 @@ 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());
+      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
+  );
   const handleFileSelect = (file) => {
-    if (multiple) {
-      setLocalSelected((prev) => {
+    setLocalSelected((prev) => {
+      if (multiple) {
         const next = new Set(prev);
-        if (next.has(file.id)) {
-          next.delete(file.id);
-        } else {
-          next.add(file.id);
-        }
+        next.has(file.id) ? next.delete(file.id) : next.add(file.id);
         return next;
-      });
-    } else {
-      const selected = files.filter((f) => f.id === file.id);
-      onSelect(selected);
-      onOpenChange(false);
-    }
+      }
+      return prev.has(file.id) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([file.id]);
+    });
   };
   const handleConfirm = () => {
     const selected = files.filter((f) => localSelected.has(f.id));
@@ -1939,163 +1976,201 @@ function MediaPickerDialog({
     }
   };
   const activeUploads = uploads.filter((u) => u.status === "uploading");
-  return /* @__PURE__ */ jsx34(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs20(DialogContent, { className: "flex h-[85vh] max-h-[700px] max-w-4xl flex-col gap-0 p-0", "aria-describedby": void 0, children: [
-    /* @__PURE__ */ jsxs20(DialogHeader, { className: "flex-row items-center justify-between border-b px-5 py-3", children: [
-      /* @__PURE__ */ jsx34(DialogTitle, { className: "text-base", children: title }),
-      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs20("span", { className: "text-xs text-muted-foreground", children: [
-          total,
-          " files"
-        ] }),
-        onUpload && /* @__PURE__ */ jsxs20(Fragment4, { children: [
-          /* @__PURE__ */ jsx34(
-            "input",
-            {
-              ref: fileInputRef,
-              type: "file",
-              className: "hidden",
-              multiple: true,
-              accept: accept === "images" ? "image/*" : void 0,
-              onChange: handleUploadChange
-            }
-          ),
-          /* @__PURE__ */ jsxs20(
-            "button",
-            {
-              onClick: () => fileInputRef.current?.click(),
-              className: "flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90",
-              children: [
-                /* @__PURE__ */ jsxs20("svg", { className: "h-3.5 w-3.5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", 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" })
-                ] }),
-                "Upload"
-              ]
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 overflow-hidden", children: [
-      folders.length > 0 && /* @__PURE__ */ jsxs20("aside", { className: "flex w-44 shrink-0 flex-col gap-0.5 overflow-y-auto border-r p-2", children: [
-        /* @__PURE__ */ jsxs20(
-          "button",
-          {
-            onClick: () => onFolderChange?.(""),
-            className: cn(
-              "flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors",
-              !activeFolderId ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-accent"
-            ),
-            children: [
-              /* @__PURE__ */ jsx34("svg", { className: "h-3.5 w-3.5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx34("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }) }),
-              "All files"
-            ]
-          }
-        ),
-        folders.map((folder) => /* @__PURE__ */ jsxs20(
-          "button",
-          {
-            onClick: () => onFolderChange?.(folder.id),
-            className: cn(
-              "flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors",
-              activeFolderId === folder.id ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-accent"
-            ),
-            children: [
-              /* @__PURE__ */ jsx34("span", { className: "text-base leading-none", children: folder.icon ?? "\u{1F4C1}" }),
-              /* @__PURE__ */ jsx34("span", { className: "truncate", children: folder.name })
-            ]
-          },
-          folder.id
-        ))
-      ] }),
-      /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 border-b px-4 py-2", children: [
-          /* @__PURE__ */ jsxs20("div", { className: "relative flex-1", children: [
-            /* @__PURE__ */ jsxs20("svg", { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx34("circle", { cx: "11", cy: "11", r: "8" }),
-              /* @__PURE__ */ jsx34("path", { d: "m21 21-4.35-4.35" })
-            ] }),
+  const firstSelected = files.find((f) => localSelected.has(f.id));
+  return /* @__PURE__ */ jsx34(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs20(
+    DialogContent,
+    {
+      "aria-describedby": void 0,
+      className: "flex h-[85vh] max-h-[700px] max-w-4xl flex-col gap-0 p-0",
+      children: [
+        /* @__PURE__ */ jsxs20(DialogHeader, { className: "flex-row items-center gap-3 border-b px-5 py-3 pr-12 space-y-0 shrink-0", children: [
+          onUpload && /* @__PURE__ */ jsxs20(Fragment4, { children: [
             /* @__PURE__ */ jsx34(
               "input",
               {
-                type: "search",
-                value: search,
-                onChange: (e) => onSearch?.(e.target.value),
-                placeholder: "Search files\u2026",
-                className: "h-7 w-full rounded-md border border-input bg-muted/50 pl-8 pr-3 text-xs outline-none focus:border-primary focus:ring-1 focus:ring-primary"
+                ref: fileInputRef,
+                type: "file",
+                className: "hidden",
+                multiple: true,
+                accept: accept === "images" ? "image/*" : void 0,
+                onChange: handleUploadChange
+              }
+            ),
+            /* @__PURE__ */ jsxs20(
+              "button",
+              {
+                onClick: () => fileInputRef.current?.click(),
+                className: "flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90",
+                children: [
+                  /* @__PURE__ */ jsxs20("svg", { className: "h-3.5 w-3.5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", 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" })
+                  ] }),
+                  "Upload"
+                ]
               }
             )
           ] }),
-          /* @__PURE__ */ jsx34("div", { className: "flex gap-1", children: TYPE_OPTIONS.filter((o) => accept === "images" ? o.value === "" || o.value === "image" : true).map((opt) => /* @__PURE__ */ jsx34(
-            "button",
-            {
-              onClick: () => onTypeChange?.(opt.value),
-              className: cn(
-                "rounded px-2 py-1 text-xs transition-colors",
-                typeFilter === opt.value ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent"
-              ),
-              children: opt.label
-            },
-            opt.value
-          )) })
+          /* @__PURE__ */ jsx34(DialogTitle, { className: "text-sm font-semibold flex-1", children: title }),
+          /* @__PURE__ */ jsxs20("span", { className: "text-xs text-muted-foreground shrink-0", children: [
+            total,
+            " files"
+          ] })
         ] }),
-        activeUploads.length > 0 && /* @__PURE__ */ jsx34("div", { className: "border-b px-4 py-2 space-y-1.5", children: activeUploads.map((u, i) => /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx34("span", { className: "flex-1 truncate text-xs text-muted-foreground", children: u.name }),
-          /* @__PURE__ */ jsx34("div", { className: "h-1.5 w-24 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx34(
-            "div",
-            {
-              className: "h-full rounded-full bg-primary transition-all",
-              style: { width: `${u.progress}%` }
-            }
-          ) }),
-          /* @__PURE__ */ jsxs20("span", { className: "text-[10px] text-muted-foreground", children: [
-            u.progress,
-            "%"
+        /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 overflow-hidden min-h-0", children: [
+          folders.length > 0 && /* @__PURE__ */ jsxs20("aside", { className: "flex w-44 shrink-0 flex-col gap-0.5 overflow-y-auto border-r p-2", children: [
+            /* @__PURE__ */ jsxs20(
+              "button",
+              {
+                onClick: () => onFolderChange?.(""),
+                className: cn(
+                  "flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+                  !activeFolderId ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-accent"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx34("svg", { className: "h-3.5 w-3.5 shrink-0", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx34("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }) }),
+                  "All files"
+                ]
+              }
+            ),
+            folders.map((folder) => /* @__PURE__ */ jsxs20(
+              "button",
+              {
+                onClick: () => onFolderChange?.(folder.id),
+                className: cn(
+                  "flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+                  activeFolderId === folder.id ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-accent"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx34("span", { className: "text-base leading-none", children: folder.icon ?? "\u{1F4C1}" }),
+                  /* @__PURE__ */ jsx34("span", { className: "truncate", children: folder.name })
+                ]
+              },
+              folder.id
+            ))
+          ] }),
+          /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 flex-col overflow-hidden min-w-0", children: [
+            /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 border-b px-4 py-2 shrink-0", children: [
+              /* @__PURE__ */ jsx34("div", { className: "flex items-center gap-0.5 rounded-lg border border-input bg-muted/50 p-0.5", children: typeOptions.map((opt) => /* @__PURE__ */ jsx34(
+                "button",
+                {
+                  onClick: () => onTypeChange?.(opt.value),
+                  className: cn(
+                    "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+                    typeFilter === opt.value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                  ),
+                  children: opt.label
+                },
+                opt.value
+              )) }),
+              /* @__PURE__ */ jsxs20("div", { className: "relative flex-1 max-w-xs ml-auto", children: [
+                /* @__PURE__ */ jsxs20("svg", { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx34("circle", { cx: "11", cy: "11", r: "8" }),
+                  /* @__PURE__ */ jsx34("path", { d: "m21 21-4.35-4.35" })
+                ] }),
+                /* @__PURE__ */ jsx34(
+                  "input",
+                  {
+                    type: "search",
+                    value: search,
+                    onChange: (e) => onSearch?.(e.target.value),
+                    placeholder: "Search\u2026",
+                    className: "h-8 w-full rounded-lg border border-input bg-background pl-8 pr-3 text-xs outline-none focus:border-primary focus:ring-1 focus:ring-primary/30"
+                  }
+                )
+              ] })
+            ] }),
+            activeUploads.length > 0 && /* @__PURE__ */ jsx34("div", { className: "border-b px-4 py-2 space-y-1.5 shrink-0", children: activeUploads.map((u, i) => /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx34("span", { className: "flex-1 truncate text-xs text-muted-foreground", children: u.name }),
+              /* @__PURE__ */ jsx34("div", { className: "h-1.5 w-24 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx34(
+                "div",
+                {
+                  className: "h-full rounded-full bg-primary transition-all duration-200",
+                  style: { width: `${u.progress}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsxs20("span", { className: "text-[10px] text-muted-foreground w-6 text-right", children: [
+                u.progress,
+                "%"
+              ] })
+            ] }, i)) }),
+            /* @__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"
+                    }
+                  ) })
+                ]
+              }
+            )
           ] })
-        ] }, 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-md border px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent",
-              children: "Load more"
-            }
-          ) })
         ] }),
-        multiple && localSelected.size > 0 && /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between border-t px-4 py-3", children: [
+        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: [
           /* @__PURE__ */ jsxs20("span", { className: "text-sm text-muted-foreground", children: [
             localSelected.size,
+            " file",
+            localSelected.size !== 1 ? "s" : "",
             " selected"
           ] }),
-          /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
+          firstSelected && firstSelected.mimeType.startsWith("image/") && /* @__PURE__ */ jsx34(
+            "img",
+            {
+              src: firstSelected.url,
+              alt: firstSelected.name,
+              className: "h-9 w-9 rounded-lg border border-border object-cover shadow-sm"
+            }
+          ),
+          /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx34(
               "button",
               {
                 onClick: () => setLocalSelected(/* @__PURE__ */ new Set()),
-                className: "rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent",
-                children: "Clear"
+                className: "rounded-lg px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent",
+                children: "Cancel"
               }
             ),
             /* @__PURE__ */ jsxs20(
               "button",
               {
                 onClick: handleConfirm,
-                className: "rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90",
+                className: "rounded-lg bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90",
                 children: [
-                  "Insert ",
+                  "Use ",
                   localSelected.size,
                   " file",
                   localSelected.size !== 1 ? "s" : ""
@@ -2104,9 +2179,9 @@ function MediaPickerDialog({
             )
           ] })
         ] })
-      ] })
-    ] })
-  ] }) });
+      ]
+    }
+  ) });
 }
 
 // src/components/media/image-picker-field.tsx