@vinaup/media-ui 1.0.1

package/dist/index.mjs

@@ -0,0 +1,873 @@
+// src/components/MediaUpload.tsx
+import "@mantine/dropzone/styles.css";
+import { Group, Text, Loader, Stack, Paper, Image, Grid, GridCol, UnstyledButton } from "@mantine/core";
+import { Dropzone, DropzoneAccept, DropzoneIdle, DropzoneReject } from "@mantine/dropzone";
+import { TbUpload, TbPhoto } from "react-icons/tb";
+import { HiOutlineX } from "react-icons/hi";
+import { useState, useEffect } from "react";
+import { notifications } from "@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
+import { Fragment, jsx, jsxs } from "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] = useState(false);
+  const [uploadFiles, setUploadFiles] = useState([]);
+  const handleDrop = async (files) => {
+    if (files.length === 0) return;
+    const invalidFiles = files.filter((file) => !validateImageFile(file));
+    if (invalidFiles.length > 0) {
+      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);
+      }
+      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);
+      notifications.show({
+        title: "Upload failed",
+        message: error.message,
+        color: "red"
+      });
+    } finally {
+      setIsUploading(false);
+    }
+  };
+  const handleReject = (files) => {
+    notifications.show({
+      title: "Files rejected",
+      message: `${files.length} file(s) were rejected. Please check file type and size (\u2264 2MB).`,
+      color: "red"
+    });
+  };
+  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);
+      notifications.show({
+        title: "Link copied",
+        message: "Image URL has been copied to clipboard",
+        color: "green"
+      });
+    } catch (error) {
+      notifications.show({
+        title: "Copy failed",
+        message: error instanceof Error ? error.message : "Failed to copy link to clipboard",
+        color: "red"
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      gap: "lg",
+      classNames: {
+        root: classNames?.rootStack?.root
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Dropzone,
+          {
+            onDrop: handleDrop,
+            onReject: handleReject,
+            maxSize,
+            accept: acceptedTypes,
+            disabled: isUploading,
+            multiple,
+            classNames: classNames?.dropzone,
+            children: /* @__PURE__ */ jsxs(
+              Group,
+              {
+                justify: "center",
+                gap: "xl",
+                mih: 220,
+                classNames: {
+                  root: classNames?.dropzoneGroup?.root
+                },
+                children: [
+                  isUploading ? /* @__PURE__ */ jsx(Loader, { size: 52 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(DropzoneAccept, { children: /* @__PURE__ */ jsx(TbUpload, { size: 52, color: "blue" }) }),
+                    /* @__PURE__ */ jsx(DropzoneReject, { children: /* @__PURE__ */ jsx(HiOutlineX, { size: 52, color: "red" }) }),
+                    /* @__PURE__ */ jsx(DropzoneIdle, { children: /* @__PURE__ */ jsx(TbPhoto, { size: 52 }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        size: "xl",
+                        inline: true,
+                        classNames: {
+                          root: classNames?.dropzoneText?.root
+                        },
+                        children: "Drag images here or click to select files"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      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__ */ jsxs(
+          Stack,
+          {
+            gap: "xs",
+            classNames: {
+              root: classNames?.recentStack?.root
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  fw: 500,
+                  classNames: {
+                    root: cx(media_upload_module_default.sectionTitleRoot, classNames?.sectionTitle?.root)
+                  },
+                  children: "Recently Uploaded Images"
+                }
+              ),
+              /* @__PURE__ */ jsx(Grid, { classNames: classNames?.grid, children: uploadFiles.map((item) => /* @__PURE__ */ jsx(GridCol, { span: { base: 6, sm: 6, md: 3, lg: 2 }, children: /* @__PURE__ */ jsx(
+                Paper,
+                {
+                  p: "sm",
+                  withBorder: true,
+                  radius: "md",
+                  classNames: {
+                    root: classNames?.itemPaper?.root
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    Stack,
+                    {
+                      gap: 6,
+                      classNames: {
+                        root: classNames?.itemStack?.root
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { className: cx(media_upload_module_default.imageContainer, classNames?.imageContainer), children: [
+                          /* @__PURE__ */ jsx(
+                            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__ */ jsx("div", { className: cx(media_upload_module_default.uploadingOverlay, classNames?.uploadingOverlay), children: /* @__PURE__ */ jsx(Loader, { size: "sm", color: "white" }) }),
+                          item.status === "success" && /* @__PURE__ */ jsx("div", { className: cx(
+                            media_upload_module_default.statusBadge,
+                            media_upload_module_default.statusBadgeSuccess,
+                            classNames?.statusBadge,
+                            classNames?.statusBadgeSuccess
+                          ), children: /* @__PURE__ */ jsx(Text, { size: "xs", c: "white", fw: 700, children: "\u2713" }) }),
+                          item.status === "error" && /* @__PURE__ */ jsx("div", { className: cx(
+                            media_upload_module_default.statusBadge,
+                            media_upload_module_default.statusBadgeError,
+                            classNames?.statusBadge,
+                            classNames?.statusBadgeError
+                          ), children: /* @__PURE__ */ jsx(HiOutlineX, { size: 16, color: "white" }) })
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            size: "xs",
+                            c: "dimmed",
+                            lineClamp: 1,
+                            title: item.file.name,
+                            classNames: {
+                              root: classNames?.itemFilename?.root
+                            },
+                            children: item.file.name
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          Group,
+                          {
+                            justify: "space-between",
+                            align: "end",
+                            gap: "xs",
+                            classNames: {
+                              root: classNames?.itemGroup?.root
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                Text,
+                                {
+                                  size: "xs",
+                                  c: "dimmed",
+                                  classNames: {
+                                    root: classNames?.itemFilesize?.root
+                                  },
+                                  children: formatFileSize(item.file.size)
+                                }
+                              ),
+                              item.status === "success" && item.url && /* @__PURE__ */ jsx(
+                                UnstyledButton,
+                                {
+                                  onClick: () => handleCopyLink(item.url),
+                                  classNames: {
+                                    root: cx(media_upload_module_default.copyButtonRoot, classNames?.copyButton?.root)
+                                  },
+                                  children: /* @__PURE__ */ jsx(
+                                    Text,
+                                    {
+                                      size: "sm",
+                                      c: "blue",
+                                      classNames: {
+                                        root: classNames?.copyButtonText?.root
+                                      },
+                                      children: "Copy link"
+                                    }
+                                  )
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        item.status === "error" && /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            size: "xs",
+                            c: "red",
+                            classNames: {
+                              root: classNames?.itemError?.root
+                            },
+                            children: item.error || "Upload failed"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ) }, item.id)) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/MediaGrid.tsx
+import { Grid as Grid2, GridCol as GridCol2, Group as Group2, Image as Image2, Paper as Paper2, Stack as Stack2, Text as Text2, TextInput, Select } from "@mantine/core";
+import { useState as useState2 } from "react";
+import { IoSearch } from "react-icons/io5";
+
+// src/components/styles/media-grid.module.scss
+var media_grid_module_default = {};
+
+// src/components/MediaGrid.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "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] = useState2("");
+  const [sortBy, setSortBy] = useState2("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__ */ jsxs2(
+    Stack2,
+    {
+      gap: "md",
+      classNames: {
+        root: classNames?.rootStack?.root
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(
+          Group2,
+          {
+            justify: "space-between",
+            align: "center",
+            classNames: {
+              root: classNames?.filterGroup?.root
+            },
+            children: [
+              /* @__PURE__ */ jsx2(
+                Select,
+                {
+                  placeholder: "Sort by",
+                  value: sortBy,
+                  onChange: setSortBy,
+                  data: sortOptions,
+                  w: 200,
+                  clearable: false,
+                  classNames: classNames?.sortSelect
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                TextInput,
+                {
+                  placeholder: "Search by title...",
+                  value: searchQuery,
+                  onChange: (e) => setSearchQuery(e.currentTarget.value),
+                  leftSection: /* @__PURE__ */ jsx2(IoSearch, { size: 16 }),
+                  w: 250,
+                  classNames: classNames?.searchInput
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Grid2,
+          {
+            gutter: "md",
+            classNames: classNames?.grid,
+            children: filteredAndSortedImages().map((image) => {
+              const isSelected = selectedImageId === image.id;
+              return /* @__PURE__ */ jsx2(GridCol2, { span: { base: 6, sm: 4, md: 3, lg: 2 }, children: /* @__PURE__ */ jsx2(
+                Paper2,
+                {
+                  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__ */ jsxs2(
+                    Stack2,
+                    {
+                      gap: 6,
+                      classNames: {
+                        root: classNames?.itemStack?.root
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2("div", { className: cx(media_grid_module_default.imageContainer, classNames?.imageContainer), children: /* @__PURE__ */ jsx2(
+                          Image2,
+                          {
+                            src: image.url,
+                            alt: image.title || image.name,
+                            fit: "cover",
+                            classNames: {
+                              root: cx(media_grid_module_default.itemImageRoot, classNames?.itemImage?.root)
+                            }
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx2(
+                          Text2,
+                          {
+                            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
+import {
+  ActionIcon,
+  Group as Group3,
+  Image as Image3,
+  Paper as Paper3,
+  Stack as Stack3,
+  Text as Text3,
+  Textarea,
+  Title
+} from "@mantine/core";
+import { useState as useState3 } from "react";
+import { MdOutlineFileCopy } from "react-icons/md";
+import { GrTrash } from "react-icons/gr";
+import { IoCheckmark } from "react-icons/io5";
+
+// src/components/styles/media-detail.module.scss
+var media_detail_module_default = {};
+
+// src/components/MediaDetail.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function MediaDetail({
+  image,
+  onUpdate,
+  onDelete,
+  onCopyLink,
+  onNotify,
+  classNames
+}) {
+  const [title, setTitle] = useState3(image.title || "");
+  const [description, setDescription] = useState3(image.description || "");
+  const [originalTitle, setOriginalTitle] = useState3(image.title || "");
+  const [originalDescription, setOriginalDescription] = useState3(image.description || "");
+  const isTitleDirty = title !== originalTitle;
+  const isDescriptionDirty = description !== originalDescription;
+  const [isSavingTitle, setIsSavingTitle] = useState3(false);
+  const [isSavingDescription, setIsSavingDescription] = useState3(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__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsxs3(
+    Paper3,
+    {
+      p: "md",
+      radius: "md",
+      withBorder: true,
+      classNames: {
+        root: cx(media_detail_module_default.paperRoot, classNames?.paper?.root)
+      },
+      children: [
+        /* @__PURE__ */ jsxs3(Stack3, { gap: "md", children: [
+          /* @__PURE__ */ jsx3(
+            Title,
+            {
+              order: 4,
+              classNames: {
+                root: cx(media_detail_module_default.titleRoot, classNames?.title?.root)
+              },
+              children: "Image Details"
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { className: cx(media_detail_module_default.imageWrapper, classNames?.imageWrapper), children: /* @__PURE__ */ jsx3(
+            Image3,
+            {
+              src: image.url,
+              alt: image.title || image.name,
+              fit: "contain",
+              radius: "md",
+              classNames: {
+                root: cx(media_detail_module_default.imageRoot, classNames?.image?.root)
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs3(
+            Stack3,
+            {
+              gap: "xs",
+              classNames: {
+                root: cx(media_detail_module_default.fieldsStackRoot, classNames?.fieldsStack?.root)
+              },
+              children: [
+                /* @__PURE__ */ jsxs3("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ jsx3(
+                    Text3,
+                    {
+                      size: "sm",
+                      fw: 500,
+                      c: "dimmed",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                      },
+                      children: "Name"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    Text3,
+                    {
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldValueRoot, classNames?.fieldValue?.root)
+                      },
+                      children: image.name
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs3("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ jsxs3(Group3, { gap: 4, align: "center", children: [
+                    /* @__PURE__ */ jsx3(
+                      Text3,
+                      {
+                        size: "sm",
+                        fw: 500,
+                        c: "dimmed",
+                        classNames: {
+                          root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                        },
+                        children: "Title"
+                      }
+                    ),
+                    isTitleDirty && /* @__PURE__ */ jsx3(
+                      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__ */ jsx3(IoCheckmark, { size: 12 })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx3(
+                    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__ */ jsxs3("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ jsxs3(Group3, { gap: 4, align: "center", children: [
+                    /* @__PURE__ */ jsx3(
+                      Text3,
+                      {
+                        size: "sm",
+                        fw: 500,
+                        c: "dimmed",
+                        classNames: {
+                          root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                        },
+                        children: "Description"
+                      }
+                    ),
+                    isDescriptionDirty && /* @__PURE__ */ jsx3(
+                      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__ */ jsx3(IoCheckmark, { size: 12 })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx3(
+                    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__ */ jsxs3("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ jsx3(
+                    Text3,
+                    {
+                      size: "sm",
+                      fw: 500,
+                      c: "dimmed",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                      },
+                      children: "Type"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    Text3,
+                    {
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldValueRoot, classNames?.fieldValue?.root)
+                      },
+                      children: image.type
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs3("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ jsx3(
+                    Text3,
+                    {
+                      size: "sm",
+                      fw: 500,
+                      c: "dimmed",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                      },
+                      children: "URL"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs3(Group3, { gap: "xs", align: "center", wrap: "nowrap", children: [
+                    /* @__PURE__ */ jsx3(
+                      Text3,
+                      {
+                        size: "xs",
+                        c: "dimmed",
+                        classNames: {
+                          root: cx(media_detail_module_default.urlText, classNames?.urlText)
+                        },
+                        children: image.url
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      ActionIcon,
+                      {
+                        variant: "subtle",
+                        color: "gray",
+                        onClick: handleCopyLink,
+                        size: "sm",
+                        classNames: {
+                          root: cx(media_detail_module_default.copyButtonRoot, classNames?.copyButton?.root)
+                        },
+                        children: /* @__PURE__ */ jsx3(MdOutlineFileCopy, { size: 18 })
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs3("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ jsx3(
+                    Text3,
+                    {
+                      size: "sm",
+                      fw: 500,
+                      c: "dimmed",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                      },
+                      children: "Created At"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    Text3,
+                    {
+                      size: "sm",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldValueRoot, classNames?.fieldValue?.root)
+                      },
+                      children: new Date(image.createdAt).toLocaleString()
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs3("div", { className: cx(media_detail_module_default.fieldGroup, classNames?.fieldGroup), children: [
+                  /* @__PURE__ */ jsx3(
+                    Text3,
+                    {
+                      size: "sm",
+                      fw: 500,
+                      c: "dimmed",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldLabelRoot, classNames?.fieldLabel?.root)
+                      },
+                      children: "Updated At"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    Text3,
+                    {
+                      size: "sm",
+                      classNames: {
+                        root: cx(media_detail_module_default.fieldValueRoot, classNames?.fieldValue?.root)
+                      },
+                      children: new Date(image.updatedAt).toLocaleString()
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] }),
+        onDelete && /* @__PURE__ */ jsx3(
+          ActionIcon,
+          {
+            variant: "filled",
+            color: "red",
+            size: "lg",
+            onClick: () => onDelete(image.id),
+            classNames: {
+              root: cx(media_detail_module_default.deleteButtonRoot, classNames?.deleteButton?.root)
+            },
+            children: /* @__PURE__ */ jsx3(GrTrash, { size: 20 })
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  MediaDetail,
+  MediaGrid,
+  MediaUpload,
+  cx,
+  formatFileSize,
+  validateImageFile
+};
+//# sourceMappingURL=index.mjs.map