@vinaup/media-ui 1.0.1

package/dist/index.js

@@ -0,0 +1,896 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  MediaDetail: () => MediaDetail,
+  MediaGrid: () => MediaGrid,
+  MediaUpload: () => MediaUpload,
+  cx: () => cx,
+  formatFileSize: () => formatFileSize,
+  validateImageFile: () => validateImageFile
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/MediaUpload.tsx
+var import_styles = require("@mantine/dropzone/styles.css");
+var import_core = require("@mantine/core");
+var import_dropzone = require("@mantine/dropzone");
+var import_tb = require("react-icons/tb");
+var import_hi = require("react-icons/hi");
+var import_react = require("react");
+var import_notifications = require("@mantine/notifications");
+
+// src/utils/helpers.ts
+var validateImageFile = (file) => {
+  const validTypes = ["image/png", "image/jpeg", "image/jpg"];
+  return validTypes.includes(file.type);
+};
+var formatFileSize = (bytes) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+};
+var cx = (...classNames) => {
+  const validClassNames = classNames.filter(Boolean);
+  const result = validClassNames.join(" ");
+  return result;
+};
+
+// src/components/styles/media-upload.module.scss
+var media_upload_module_default = {};
+
+// src/components/MediaUpload.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function MediaUpload({
+  onUpload,
+  onSave,
+  onUploadSuccess,
+  onUploadError,
+  maxSize = 2 * 1024 ** 2,
+  acceptedTypes = ["image/png", "image/jpeg", "image/jpg"],
+  multiple = true,
+  folder = "media",
+  classNames
+}) {
+  const [isUploading, setIsUploading] = (0, import_react.useState)(false);
+  const [uploadFiles, setUploadFiles] = (0, import_react.useState)([]);
+  const handleDrop = async (files) => {
+    if (files.length === 0) return;
+    const invalidFiles = files.filter((file) => !validateImageFile(file));
+    if (invalidFiles.length > 0) {
+      import_notifications.notifications.show({
+        title: "Invalid file type",
+        message: `${invalidFiles.length} file(s) have invalid type.`,
+        color: "red"
+      });
+      return;
+    }
+    setIsUploading(true);
+    const newUploadFiles = files.map((file, index) => ({
+      id: `${Date.now()}-${index}`,
+      file,
+      preview: URL.createObjectURL(file),
+      status: "uploading"
+    }));
+    setUploadFiles((prev) => [...newUploadFiles, ...prev]);
+    try {
+      const uploadResults = await onUpload(files);
+      setUploadFiles(
+        (prev) => prev.map((item) => {
+          const idx = newUploadFiles.findIndex((f) => f.id === item.id);
+          if (idx !== -1 && uploadResults[idx]) {
+            return { ...item, status: "success", url: uploadResults[idx].url };
+          }
+          return item;
+        })
+      );
+      if (onSave) {
+        const mediaData = uploadResults.map((result) => ({
+          name: result.name,
+          title: null,
+          description: null,
+          url: result.url,
+          type: "image",
+          folder
+        }));
+        const savedMedia = await onSave(mediaData);
+        onUploadSuccess?.(savedMedia);
+      }
+      import_notifications.notifications.show({
+        title: "Upload successful",
+        message: `Successfully uploaded ${uploadResults.length} image(s)`,
+        color: "green"
+      });
+    } catch (error) {
+      setUploadFiles(
+        (prev) => prev.map(
+          (item) => newUploadFiles.some((f) => f.id === item.id) ? { ...item, status: "error", error: error.message } : item
+        )
+      );
+      onUploadError?.(error);
+      import_notifications.notifications.show({
+        title: "Upload failed",
+        message: error.message,
+        color: "red"
+      });
+    } finally {
+      setIsUploading(false);
+    }
+  };
+  const handleReject = (files) => {
+    import_notifications.notifications.show({
+      title: "Files rejected",
+      message: `${files.length} file(s) were rejected. Please check file type and size (\u2264 2MB).`,
+      color: "red"
+    });
+  };
+  (0, import_react.useEffect)(() => {
+    return () => {
+      uploadFiles.forEach((item) => {
+        if (item.preview.startsWith("blob:")) {
+          URL.revokeObjectURL(item.preview);
+        }
+      });
+    };
+  }, [uploadFiles]);
+  const handleCopyLink = async (url) => {
+    try {
+      await navigator.clipboard.writeText(url);
+      import_notifications.notifications.show({
+        title: "Link copied",
+        message: "Image URL has been copied to clipboard",
+        color: "green"
+      });
+    } catch (error) {
+      import_notifications.notifications.show({
+        title: "Copy failed",
+        message: error instanceof Error ? error.message : "Failed to copy link to clipboard",
+        color: "red"
+      });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_core.Stack,
+    {
+      gap: "lg",
+      classNames: {
+        root: classNames?.rootStack?.root
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_dropzone.Dropzone,
+          {
+            onDrop: handleDrop,
+            onReject: handleReject,
+            maxSize,
+            accept: acceptedTypes,
+            disabled: isUploading,
+            multiple,
+            classNames: classNames?.dropzone,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_core.Group,
+              {
+                justify: "center",
+                gap: "xl",
+                mih: 220,
+                classNames: {
+                  root: classNames?.dropzoneGroup?.root
+                },
+                children: [
+                  isUploading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Loader, { size: 52 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropzone.DropzoneAccept, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbUpload, { size: 52, color: "blue" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropzone.DropzoneReject, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_hi.HiOutlineX, { size: 52, color: "red" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropzone.DropzoneIdle, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tb.TbPhoto, { size: 52 }) })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_core.Text,
+                      {
+                        size: "xl",
+                        inline: true,
+                        classNames: {
+                          root: classNames?.dropzoneText?.root
+                        },
+                        children: "Drag images here or click to select files"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_core.Text,
+                      {
+                        size: "sm",
+                        c: "dimmed",
+                        inline: true,
+                        mt: 7,
+                        classNames: {
+                          root: classNames?.dropzoneSubtext?.root
+                        },
+                        children: "(png, jpg, jpeg; Size \u2264 2M)"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          }
+        ),
+        uploadFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_core.Stack,
+          {
+            gap: "xs",
+            classNames: {
+              root: classNames?.recentStack?.root
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_core.Text,
+                {
+                  fw: 500,
+                  classNames: {
+                    root: cx(media_upload_module_default.sectionTitleRoot, classNames?.sectionTitle?.root)
+                  },
+                  children: "Recently Uploaded Images"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Grid, { classNames: classNames?.grid, children: uploadFiles.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.GridCol, { span: { base: 6, sm: 6, md: 3, lg: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_core.Paper,
+                {
+                  p: "sm",
+                  withBorder: true,
+                  radius: "md",
+                  classNames: {
+                    root: classNames?.itemPaper?.root
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    import_core.Stack,
+                    {
+                      gap: 6,
+                      classNames: {
+                        root: classNames?.itemStack?.root
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx(media_upload_module_default.imageContainer, classNames?.imageContainer), children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_core.Image,
+                            {
+                              src: item.preview,
+                              alt: item.file.name,
+                              fit: "cover",
+                              classNames: {
+                                root: cx(media_upload_module_default.itemImageRoot, classNames?.itemImage?.root)
+                              }
+                            }
+                          ),
+                          item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx(media_upload_module_default.uploadingOverlay, classNames?.uploadingOverlay), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Loader, { size: "sm", color: "white" }) }),
+                          item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx(
+                            media_upload_module_default.statusBadge,
+                            media_upload_module_default.statusBadgeSuccess,
+                            classNames?.statusBadge,
+                            classNames?.statusBadgeSuccess
+                          ), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", c: "white", fw: 700, children: "\u2713" }) }),
+                          item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx(
+                            media_upload_module_default.statusBadge,
+                            media_upload_module_default.statusBadgeError,
+                            classNames?.statusBadge,
+                            classNames?.statusBadgeError
+                          ), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_hi.HiOutlineX, { size: 16, color: "white" }) })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_core.Text,
+                          {
+                            size: "xs",
+                            c: "dimmed",
+                            lineClamp: 1,
+                            title: item.file.name,
+                            classNames: {
+                              root: classNames?.itemFilename?.root
+                            },
+                            children: item.file.name
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          import_core.Group,
+                          {
+                            justify: "space-between",
+                            align: "end",
+                            gap: "xs",
+                            classNames: {
+                              root: classNames?.itemGroup?.root
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                import_core.Text,
+                                {
+                                  size: "xs",
+                                  c: "dimmed",
+                                  classNames: {
+                                    root: classNames?.itemFilesize?.root
+                                  },
+                                  children: formatFileSize(item.file.size)
+                                }
+                              ),
+                              item.status === "success" && item.url && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                import_core.UnstyledButton,
+                                {
+                                  onClick: () => handleCopyLink(item.url),
+                                  classNames: {
+                                    root: cx(media_upload_module_default.copyButtonRoot, classNames?.copyButton?.root)
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    import_core.Text,
+                                    {
+                                      size: "sm",
+                                      c: "blue",
+                                      classNames: {
+                                        root: classNames?.copyButtonText?.root
+                                      },
+                                      children: "Copy link"
+                                    }
+                                  )
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_core.Text,
+                          {
+                            size: "xs",
+                            c: "red",
+                            classNames: {
+                              root: classNames?.itemError?.root
+                            },
+                            children: item.error || "Upload failed"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ) }, item.id)) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/MediaGrid.tsx
+var import_core2 = require("@mantine/core");
+var import_react2 = require("react");
+var import_io5 = require("react-icons/io5");
+
+// src/components/styles/media-grid.module.scss
+var media_grid_module_default = {};
+
+// src/components/MediaGrid.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function MediaGrid({
+  images,
+  selectedImageId = null,
+  onImageClick,
+  sortOptions = [
+    { value: "createdAt", label: "By created date" },
+    { value: "updatedAt", label: "By updated date" },
+    { value: "title", label: "By title" }
+  ],
+  classNames
+}) {
+  const [searchQuery, setSearchQuery] = (0, import_react2.useState)("");
+  const [sortBy, setSortBy] = (0, import_react2.useState)("createdAt");
+  const filteredAndSortedImages = () => {
+    let result = [...images];
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(
+        (image) => image.title?.toLowerCase().includes(query)
+      );
+    }
+    if (sortBy) {
+      result.sort((a, b) => {
+        switch (sortBy) {
+          case "createdAt":
+            return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+          case "updatedAt":
+            return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+          case "title":
+            return (a.title ?? "").localeCompare(b.title ?? "");
+          default:
+            return 0;
+        }
+      });
+    }
+    return result;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_core2.Stack,
+    {
+      gap: "md",
+      classNames: {
+        root: classNames?.rootStack?.root
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_core2.Group,
+          {
+            justify: "space-between",
+            align: "center",
+            classNames: {
+              root: classNames?.filterGroup?.root
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_core2.Select,
+                {
+                  placeholder: "Sort by",
+                  value: sortBy,
+                  onChange: setSortBy,
+                  data: sortOptions,
+                  w: 200,
+                  clearable: false,
+                  classNames: classNames?.sortSelect
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_core2.TextInput,
+                {
+                  placeholder: "Search by title...",
+                  value: searchQuery,
+                  onChange: (e) => setSearchQuery(e.currentTarget.value),
+                  leftSection: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_io5.IoSearch, { size: 16 }),
+                  w: 250,
+                  classNames: classNames?.searchInput
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_core2.Grid,
+          {
+            gutter: "md",
+            classNames: classNames?.grid,
+            children: filteredAndSortedImages().map((image) => {
+              const isSelected = selectedImageId === image.id;
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.GridCol, { span: { base: 6, sm: 4, md: 3, lg: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_core2.Paper,
+                {
+                  p: "xs",
+                  withBorder: true,
+                  radius: "md",
+                  onClick: () => onImageClick(image.id),
+                  classNames: {
+                    root: cx(
+                      media_grid_module_default.itemPaperRoot,
+                      classNames?.itemPaper?.root,
+                      isSelected ? media_grid_module_default.selectedPaper : void 0,
+                      isSelected ? classNames?.selectedPaper : void 0
+                    )
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    import_core2.Stack,
+                    {
+                      gap: 6,
+                      classNames: {
+                        root: classNames?.itemStack?.root
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cx(media_grid_module_default.imageContainer, classNames?.imageContainer), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_core2.Image,
+                          {
+                            src: image.url,
+                            alt: image.title || image.name,
+                            fit: "cover",
+                            classNames: {
+                              root: cx(media_grid_module_default.itemImageRoot, classNames?.itemImage?.root)
+                            }
+                          }
+                        ) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_core2.Text,
+                          {
+                            size: "xs",
+                            c: "dimmed",
+                            lineClamp: 1,
+                            title: image.title ?? image.name,
+                            classNames: {
+                              root: cx(media_grid_module_default.itemTextRoot, classNames?.itemText?.root)
+                            },
+                            children: image.title ?? image.name
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ) }, image.id);
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/MediaDetail.tsx
+var import_core3 = require("@mantine/core");
+var import_react3 = require("react");
+var import_md = require("react-icons/md");
+var import_gr = require("react-icons/gr");
+var import_io52 = require("react-icons/io5");
+
+// src/components/styles/media-detail.module.scss
+var media_detail_module_default = {};
+
+// src/components/MediaDetail.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function MediaDetail({
+  image,
+  onUpdate,
+  onDelete,
+  onCopyLink,
+  onNotify,
+  classNames
+}) {
+  const [title, setTitle] = (0, import_react3.useState)(image.title || "");
+  const [description, setDescription] = (0, import_react3.useState)(image.description || "");
+  const [originalTitle, setOriginalTitle] = (0, import_react3.useState)(image.title || "");
+  const [originalDescription, setOriginalDescription] = (0, import_react3.useState)(image.description || "");
+  const isTitleDirty = title !== originalTitle;
+  const isDescriptionDirty = description !== originalDescription;
+  const [isSavingTitle, setIsSavingTitle] = (0, import_react3.useState)(false);
+  const [isSavingDescription, setIsSavingDescription] = (0, import_react3.useState)(false);
+  const handleSaveTitle = async () => {
+    setIsSavingTitle(true);
+    try {
+      await onUpdate(image.id, { title: title || null });
+      setOriginalTitle(title);
+      onNotify?.("success", "Title saved");
+    } catch (error) {
+      onNotify?.("error", error.message);
+    } finally {
+      setIsSavingTitle(false);
+    }
+  };
+  const handleSaveDescription = async () => {
+    setIsSavingDescription(true);
+    try {
+      await onUpdate(image.id, { description: description || null });
+      setOriginalDescription(description);
+      onNotify?.("success", "Description saved");
+    } catch (error) {
+      onNotify?.("error", error.message);
+    } finally {
+      setIsSavingDescription(false);
+    }
+  };
+  const handleCopyLink = async () => {
+    if (onCopyLink) {
+      onCopyLink(image.url);
+    } else {
+      try {
+        await navigator.clipboard.writeText(image.url);
+        onNotify?.("success", "Link copied");
+      } catch {
+        onNotify?.("error", "Failed to copy link");
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_core3.Paper,
+    {
+      p: "md",
+      radius: "md",
+      withBorder: true,
+      classNames: {
+        root: cx(media_detail_module_default.paperRoot, classNames?.paper?.root)
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_core3.Stack, { gap: "md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_core3.Title,
+            {
+              order: 4,
+              classNames: {
+                root: cx(media_detail_module_default.titleRoot, classNames?.title?.root)
+              },
+              children: "Image Details"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cx(media_detail_module_default.imageWrapper, classNames?.imageWrapper), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_core3.Image,
+            {
+              src: image.url,
+              alt: image.title || image.name,
+              fit: "contain",
+              radius: "md",
+              classNames: {
+                root: cx(media_detail_module_default.imageRoot, classNames?.image?.root)
+              }
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            import_core3.Stack,
+            {
+              gap: "xs",
+              classNames: {
+                root: cx(media_detail_module_default.fieldsStackRoot, classNames?.fieldsStack?.root)
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_core3.Text,
+                    {
+                      size: "sm",
+                      fw: 500,
+                      c: "dimmed",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                      },
+                      children: "Name"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_core3.Text,
+                    {
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldValueRoot, classNames?.fieldValue?.root)
+                      },
+                      children: image.name
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_core3.Group, { gap: 4, align: "center", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_core3.Text,
+                      {
+                        size: "sm",
+                        fw: 500,
+                        c: "dimmed",
+                        classNames: {
+                          root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                        },
+                        children: "Title"
+                      }
+                    ),
+                    isTitleDirty && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_core3.ActionIcon,
+                      {
+                        size: "xs",
+                        variant: "filled",
+                        color: "green",
+                        onClick: handleSaveTitle,
+                        loading: isSavingTitle,
+                        title: "Save title",
+                        classNames: {
+                          root: cx(media_detail_module_default.saveButtonRoot, classNames?.saveButton?.root)
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_io52.IoCheckmark, { size: 12 })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_core3.Textarea,
+                    {
+                      value: title,
+                      placeholder: "Enter title",
+                      onChange: (e) => setTitle(e.target.value),
+                      minRows: 2,
+                      autosize: true,
+                      classNames: {
+                        root: cx(media_detail_module_default.textareaRoot, classNames?.textarea?.root),
+                        input: cx(media_detail_module_default.textareaInput, classNames?.textarea?.input),
+                        wrapper: cx(media_detail_module_default.textareaWrapper, classNames?.textarea?.wrapper)
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_core3.Group, { gap: 4, align: "center", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_core3.Text,
+                      {
+                        size: "sm",
+                        fw: 500,
+                        c: "dimmed",
+                        classNames: {
+                          root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                        },
+                        children: "Description"
+                      }
+                    ),
+                    isDescriptionDirty && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_core3.ActionIcon,
+                      {
+                        size: "xs",
+                        variant: "filled",
+                        color: "green",
+                        onClick: handleSaveDescription,
+                        loading: isSavingDescription,
+                        title: "Save description",
+                        classNames: {
+                          root: cx(media_detail_module_default.saveButtonRoot, classNames?.saveButton?.root)
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_io52.IoCheckmark, { size: 12 })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_core3.Textarea,
+                    {
+                      value: description,
+                      placeholder: "Enter description",
+                      onChange: (e) => setDescription(e.target.value),
+                      minRows: 3,
+                      autosize: true,
+                      classNames: {
+                        root: cx(media_detail_module_default.textareaRoot, classNames?.textarea?.root),
+                        input: cx(media_detail_module_default.textareaInput, classNames?.textarea?.input),
+                        wrapper: cx(media_detail_module_default.textareaWrapper, classNames?.textarea?.wrapper)
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_core3.Text,
+                    {
+                      size: "sm",
+                      fw: 500,
+                      c: "dimmed",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                      },
+                      children: "Type"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_core3.Text,
+                    {
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldValueRoot, classNames?.fieldValue?.root)
+                      },
+                      children: image.type
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_core3.Text,
+                    {
+                      size: "sm",
+                      fw: 500,
+                      c: "dimmed",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                      },
+                      children: "URL"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_core3.Group, { gap: "xs", align: "center", wrap: "nowrap", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_core3.Text,
+                      {
+                        size: "xs",
+                        c: "dimmed",
+                        classNames: {
+                          root: cx(media_detail_module_default.urlText, classNames?.urlText)
+                        },
+                        children: image.url
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_core3.ActionIcon,
+                      {
+                        variant: "subtle",
+                        color: "gray",
+                        onClick: handleCopyLink,
+                        size: "sm",
+                        classNames: {
+                          root: cx(media_detail_module_default.copyButtonRoot, classNames?.copyButton?.root)
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_md.MdOutlineFileCopy, { size: 18 })
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_core3.Text,
+                    {
+                      size: "sm",
+                      fw: 500,
+                      c: "dimmed",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                      },
+                      children: "Created At"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_core3.Text,
+                    {
+                      size: "sm",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldValueRoot, classNames?.fieldValue?.root)
+                      },
+                      children: new Date(image.createdAt).toLocaleString()
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_core3.Text,
+                    {
+                      size: "sm",
+                      fw: 500,
+                      c: "dimmed",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                      },
+                      children: "Updated At"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_core3.Text,
+                    {
+                      size: "sm",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldValueRoot, classNames?.fieldValue?.root)
+                      },
+                      children: new Date(image.updatedAt).toLocaleString()
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] }),
+        onDelete && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_core3.ActionIcon,
+          {
+            variant: "filled",
+            color: "red",
+            size: "lg",
+            onClick: () => onDelete(image.id),
+            classNames: {
+              root: cx(media_detail_module_default.deleteButtonRoot, classNames?.deleteButton?.root)
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_gr.GrTrash, { size: 20 })
+          }
+        )
+      ]
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MediaDetail,
+  MediaGrid,
+  MediaUpload,
+  cx,
+  formatFileSize,
+  validateImageFile
+});
+//# sourceMappingURL=index.js.map