@muhgholy/next-drive 1.1.5 → 1.2.0

package/dist/client/index.js

@@ -2543,7 +2543,7 @@ var DriveFileChooser = (props) => {
     disabled: false,
     ...props
   };
-  const { items, selectedFileIds, setSelectedFileIds } = useDrive();
+  const { items, selectedFileIds, setSelectedFileIds, createUrl } = useDrive();
   const [isOpen, setIsOpen] = useState6(false);
   useEffect5(() => {
     if (isOpen) {
@@ -2576,17 +2576,15 @@ var DriveFileChooser = (props) => {
   const isSingle = !multiple;
   return /* @__PURE__ */ jsxs12("div", { className: cn("space-y-1.5", className), children: [
     !hasSelection && /* @__PURE__ */ jsxs12(
-      "button",
+      Button,
       {
         type: "button",
-        onClick: () => !disabled && setIsOpen(true),
+        variant: "outline",
+        onClick: () => setIsOpen(true),
         disabled,
         className: cn(
-          "w-full flex items-center gap-3 px-3 py-2.5 rounded-md border border-dashed text-left transition-colors",
-          "hover:bg-accent hover:border-accent-foreground/20",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          error && "border-destructive bg-destructive/5 hover:bg-destructive/10",
-          disabled && "opacity-50 cursor-not-allowed hover:bg-transparent"
+          "w-full h-auto justify-start gap-3 px-3 py-2.5 border-dashed",
+          error && "border-destructive"
         ),
         children: [
           /* @__PURE__ */ jsx19("div", { className: cn(
@@ -2605,7 +2603,14 @@ var DriveFileChooser = (props) => {
       error && "border-destructive",
       disabled && "opacity-50"
     ), children: [
-      /* @__PURE__ */ jsx19("div", { className: "size-10 shrink-0 rounded overflow-hidden bg-muted flex items-center justify-center", children: getFileIcon(displayFiles[0].file.mime, false, "size-5 text-muted-foreground") }),
+      /* @__PURE__ */ jsx19("div", { className: "size-10 shrink-0 rounded overflow-hidden bg-muted flex items-center justify-center", children: displayFiles[0].file.mime.startsWith("image/") ? /* @__PURE__ */ jsx19(
+        "img",
+        {
+          src: createUrl({ id: displayFiles[0].id, file: displayFiles[0].file }, { quality: "low", format: "webp" }),
+          alt: displayFiles[0].file.name,
+          className: "size-full object-cover"
+        }
+      ) : getFileIcon(displayFiles[0].file.mime, false, "size-5 text-muted-foreground") }),
       /* @__PURE__ */ jsxs12("div", { className: "flex-1 min-w-0", children: [
         /* @__PURE__ */ jsx19("p", { className: "text-sm font-medium truncate", children: displayFiles[0].file.name }),
         /* @__PURE__ */ jsx19("p", { className: "text-xs text-muted-foreground truncate", children: displayFiles[0].file.mime })
@@ -2669,7 +2674,14 @@ var DriveFileChooser = (props) => {
         ] })
       ] }),
       /* @__PURE__ */ jsx19("div", { className: "divide-y max-h-40 overflow-y-auto", children: displayFiles.map((file) => /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 px-2.5 py-1.5 hover:bg-muted/30", children: [
-        /* @__PURE__ */ jsx19("div", { className: "size-7 shrink-0 rounded overflow-hidden bg-muted flex items-center justify-center", children: getFileIcon(file.file.mime, false, "size-3.5 text-muted-foreground") }),
+        /* @__PURE__ */ jsx19("div", { className: "size-7 shrink-0 rounded overflow-hidden bg-muted flex items-center justify-center", children: file.file.mime.startsWith("image/") ? /* @__PURE__ */ jsx19(
+          "img",
+          {
+            src: createUrl({ id: file.id, file: file.file }, { quality: "ultralow", format: "webp" }),
+            alt: file.file.name,
+            className: "size-full object-cover"
+          }
+        ) : getFileIcon(file.file.mime, false, "size-3.5 text-muted-foreground") }),
         /* @__PURE__ */ jsx19("span", { className: "flex-1 text-sm truncate", children: file.file.name }),
         !disabled && /* @__PURE__ */ jsx19(
           Button,