@timmbr/ui 1.1.0 → 1.3.0

package/dist/components/ImageUpload/subcomponents/ImageUploadDropzone.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { Plus } from '@timmbr/icons';
+import { imageUploadZoneVariants } from '../ImageUpload.styles.js';
+import { UploadCloudIcon, ImageIcon, FilmIcon } from './ImageUploadIcons.js';
+import { Spinner } from '../../Spinner/Spinner.js';
+
+const ImageUploadDropzone = ({
+  disabled,
+  isUploading,
+  loadingText,
+  isDragging,
+  isError,
+  aspectRatio,
+  size = "default",
+  mediaType,
+  maxSizeBytes,
+  maxFiles,
+  multiple: _multiple = false,
+  hasItems = false,
+  shouldAnimate = true,
+  motionClass,
+  onClick,
+  onDragEnter,
+  onDragOver,
+  onDragLeave,
+  onDrop
+}) => {
+  const maxMb = Math.round(maxSizeBytes / (1024 * 1024));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick,
+      onKeyDown: (e) => {
+        if ((e.key === "Enter" || e.key === " ") && !disabled && !isUploading) {
+          onClick();
+        }
+      },
+      onDragEnter,
+      onDragOver,
+      onDragLeave,
+      onDrop,
+      style: aspectRatio === "square" ? {
+        width: "120px",
+        height: "120px",
+        minWidth: "120px",
+        minHeight: "120px",
+        maxWidth: "120px",
+        maxHeight: "120px"
+      } : void 0,
+      className: cn(
+        imageUploadZoneVariants({
+          aspectRatio,
+          size,
+          isDragging,
+          isError,
+          isDisabled: disabled
+        }),
+        !shouldAnimate && "transition-none",
+        motionClass
+      ),
+      children: isUploading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsx(Spinner, { size: "md" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: loadingText })
+      ] }) : size === "compact" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1.5 text-center pointer-events-none", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-white dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(Plus, { className: "size-4 text-primary" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-primary underline font-semibold", children: hasItems ? "Add more files" : "Click to upload" }),
+            " ",
+            "or drag & drop"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted", children: [
+            mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `Images & Videos (Max ${maxMb}MB each)` : `PNG, JPG, WEBP (Max ${maxMb}MB each)`,
+            maxFiles && ` • Up to ${maxFiles} items`
+          ] })
+        ] })
+      ] }) : aspectRatio === "square" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1.5 text-center pointer-events-none p-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-white dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4 text-primary animate-bounce" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-4 text-primary" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-primary underline", children: "Upload" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted", children: [
+            "Max ",
+            maxMb,
+            "MB"
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-center pointer-events-none", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-10 rounded-xl bg-white dark:bg-grey-800 border border-grey-200 dark:border-grey-700 shadow-xs flex items-center justify-center text-primary", children: isDragging ? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-5 text-primary animate-bounce" }) : mediaType === "video" ? /* @__PURE__ */ jsx(FilmIcon, { className: "size-5 text-primary" }) : /* @__PURE__ */ jsx(ImageIcon, { className: "size-5 text-primary" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-primary underline font-semibold", children: "Click to upload" }),
+            " or drag and drop"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted", children: mediaType === "video" ? `MP4, WEBM, MOV (Max ${maxMb}MB)` : mediaType === "all" ? `PNG, JPG, WEBP, MP4 (Max ${maxMb}MB)` : `PNG, JPG, or WEBP (Max ${maxMb}MB)` })
+        ] })
+      ] })
+    }
+  );
+};
+ImageUploadDropzone.displayName = "ImageUploadDropzone";
+
+export { ImageUploadDropzone };

package/dist/components/ImageUpload/subcomponents/ImageUploadIcons.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const UploadCloudIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const ImageIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const PlayIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const FilmIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+//# sourceMappingURL=ImageUploadIcons.d.ts.map

package/dist/components/ImageUpload/subcomponents/ImageUploadIcons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadIcons.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/subcomponents/ImageUploadIcons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAcnE,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAc7D,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAI5D,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAmB5D,CAAC"}

package/dist/components/ImageUpload/subcomponents/ImageUploadIcons.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const UploadCloudIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 12v9" }),
+      /* @__PURE__ */ jsx("path", { d: "m16 16-4-4-4 4" })
+    ]
+  }
+);
+const ImageIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+      /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+    ]
+  }
+);
+const PlayIcon = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", ...props, children: /* @__PURE__ */ jsx("polygon", { points: "6 3 20 12 6 21 6 3" }) });
+const FilmIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("rect", { width: "20", height: "20", x: "2", y: "2", rx: "2.18", ry: "2.18" }),
+      /* @__PURE__ */ jsx("line", { x1: "7", x2: "7", y1: "2", y2: "22" }),
+      /* @__PURE__ */ jsx("line", { x1: "17", x2: "17", y1: "2", y2: "22" }),
+      /* @__PURE__ */ jsx("line", { x1: "2", x2: "22", y1: "12", y2: "12" }),
+      /* @__PURE__ */ jsx("line", { x1: "2", x2: "7", y1: "7", y2: "7" }),
+      /* @__PURE__ */ jsx("line", { x1: "2", x2: "7", y1: "17", y2: "17" }),
+      /* @__PURE__ */ jsx("line", { x1: "17", x2: "22", y1: "17", y2: "17" }),
+      /* @__PURE__ */ jsx("line", { x1: "17", x2: "22", y1: "7", y2: "7" })
+    ]
+  }
+);
+
+export { FilmIcon, ImageIcon, PlayIcon, UploadCloudIcon };

package/dist/components/ImageUpload/subcomponents/ImageUploadModal.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { ImageUploadItem } from '../ImageUpload.types';
+export interface ImageUploadModalProps {
+    isOpen: boolean;
+    activeIndex: number | null;
+    items: ImageUploadItem[];
+    shouldAnimate?: boolean;
+    onClose: () => void;
+    onNavigate: (newIndex: number) => void;
+}
+export declare const ImageUploadModal: React.FC<ImageUploadModalProps>;
+//# sourceMappingURL=ImageUploadModal.d.ts.map

package/dist/components/ImageUpload/subcomponents/ImageUploadModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/subcomponents/ImageUploadModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAyI5D,CAAC"}

package/dist/components/ImageUpload/subcomponents/ImageUploadModal.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { X, ChevronLeft, ChevronRight } from '@timmbr/icons';
+import { AnimatePresence, motion, getTransition } from '@timmbr/motion';
+import { isVideoMedia } from '../ImageUpload.helpers.js';
+
+const ImageUploadModal = ({
+  isOpen,
+  activeIndex,
+  items,
+  shouldAnimate = true,
+  onClose,
+  onNavigate
+}) => {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const activeItem = activeIndex !== null && items[activeIndex] ? items[activeIndex] : null;
+  React.useEffect(() => {
+    if (!isOpen || activeIndex === null) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      } else if (e.key === "ArrowLeft" && items.length > 1) {
+        onNavigate(activeIndex > 0 ? activeIndex - 1 : items.length - 1);
+      } else if (e.key === "ArrowRight" && items.length > 1) {
+        onNavigate(activeIndex < items.length - 1 ? activeIndex + 1 : 0);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [activeIndex, isOpen, items.length, onClose, onNavigate]);
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && activeItem && activeIndex !== null && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: shouldAnimate ? { opacity: 0 } : false,
+        animate: shouldAnimate ? { opacity: 1 } : void 0,
+        exit: shouldAnimate ? { opacity: 0 } : void 0,
+        transition: getTransition("fast"),
+        className: "fixed inset-0 z-[100] flex flex-col items-center justify-center p-4 sm:p-6 bg-black/60 backdrop-blur-xs",
+        onClick: onClose,
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: shouldAnimate ? { scale: 0.95, opacity: 0 } : false,
+            animate: shouldAnimate ? { scale: 1, opacity: 1 } : void 0,
+            exit: shouldAnimate ? { scale: 0.95, opacity: 0 } : void 0,
+            transition: getTransition("spring"),
+            className: "relative max-w-2xl max-h-[85vh] w-full bg-white dark:bg-grey-950 border border-grey-200 dark:border-grey-800 rounded-2xl overflow-hidden shadow-2xl flex flex-col",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-3 border-b border-grey-200 dark:border-grey-800 bg-grey-50/80 dark:bg-grey-900/80 backdrop-blur-xs select-none", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground tracking-wide truncate max-w-xs sm:max-w-md", children: activeItem.name || `Media Item #${activeIndex + 1}` }),
+                  activeIndex === 0 && /* @__PURE__ */ jsx("span", { className: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/20 text-[10px] font-semibold px-2 py-0.5 rounded-full", children: "Cover" }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted", children: [
+                    "(",
+                    activeIndex + 1,
+                    " of ",
+                    items.length,
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    className: "size-7 rounded-full bg-grey-200/70 hover:bg-grey-300 dark:bg-grey-800 dark:hover:bg-grey-700 text-foreground flex items-center justify-center transition-colors cursor-pointer",
+                    title: "Close preview (Esc)",
+                    children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center justify-center p-4 min-h-[260px] max-h-[70vh] bg-grey-100/50 dark:bg-black/50 overflow-hidden", children: [
+                isVideoMedia(activeItem) ? /* @__PURE__ */ jsx(
+                  "video",
+                  {
+                    src: activeItem.url,
+                    controls: true,
+                    autoPlay: true,
+                    playsInline: true,
+                    className: "max-w-full max-h-[65vh] rounded-lg shadow-md"
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: activeItem.url,
+                    alt: activeItem.name || "Preview full size",
+                    className: "max-w-full max-h-[65vh] object-contain rounded-lg shadow-md select-none"
+                  }
+                ),
+                items.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onNavigate(activeIndex > 0 ? activeIndex - 1 : items.length - 1);
+                      },
+                      className: "absolute left-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-white/90 hover:bg-white dark:bg-grey-800/90 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-700 text-foreground flex items-center justify-center transition-all backdrop-blur-xs cursor-pointer shadow-md",
+                      title: "Previous (Left Arrow)",
+                      children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onNavigate(activeIndex < items.length - 1 ? activeIndex + 1 : 0);
+                      },
+                      className: "absolute right-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-white/90 hover:bg-white dark:bg-grey-800/90 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-700 text-foreground flex items-center justify-center transition-all backdrop-blur-xs cursor-pointer shadow-md",
+                      title: "Next (Right Arrow)",
+                      children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    ) }),
+    document.body
+  );
+};
+ImageUploadModal.displayName = "ImageUploadModal";
+
+export { ImageUploadModal };

package/dist/components/ImageUpload/subcomponents/ImageUploadSinglePreview.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { ImageUploadItem, ImageUploadAspectRatio } from '../ImageUpload.types';
+export interface ImageUploadSinglePreviewProps {
+    item: ImageUploadItem;
+    aspectRatio: ImageUploadAspectRatio;
+    disabled?: boolean;
+    isUploading?: boolean;
+    enablePreviewModal?: boolean;
+    onReplace: () => void;
+    onRemove: (e: React.MouseEvent) => void;
+    onPreview: (e: React.MouseEvent) => void;
+}
+export declare const ImageUploadSinglePreview: React.FC<ImageUploadSinglePreviewProps>;
+//# sourceMappingURL=ImageUploadSinglePreview.d.ts.map

package/dist/components/ImageUpload/subcomponents/ImageUploadSinglePreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadSinglePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/subcomponents/ImageUploadSinglePreview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACvB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,EAAE,sBAAsB,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAqI5E,CAAC"}

package/dist/components/ImageUpload/subcomponents/ImageUploadSinglePreview.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { Eye, Trash2 } from '@timmbr/icons';
+import { imagePreviewContainerVariants } from '../ImageUpload.styles.js';
+import { PlayIcon, UploadCloudIcon } from './ImageUploadIcons.js';
+import { isVideoMedia } from '../ImageUpload.helpers.js';
+import { Button } from '../../Button/Button.js';
+
+const ImageUploadSinglePreview = ({
+  item,
+  aspectRatio,
+  disabled = false,
+  isUploading = false,
+  enablePreviewModal = true,
+  onReplace,
+  onRemove,
+  onPreview
+}) => {
+  const isVideo = isVideoMedia(item);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: aspectRatio === "square" ? {
+        width: "120px",
+        height: "120px",
+        minWidth: "120px",
+        minHeight: "120px",
+        maxWidth: "120px",
+        maxHeight: "120px"
+      } : void 0,
+      className: cn(imagePreviewContainerVariants({ aspectRatio })),
+      children: [
+        isVideo ? /* @__PURE__ */ jsx(
+          "video",
+          {
+            src: item.url,
+            className: "w-full h-full object-cover",
+            muted: true,
+            loop: true,
+            playsInline: true,
+            onMouseEnter: (e) => e.currentTarget.play().catch(() => {
+            }),
+            onMouseLeave: (e) => {
+              const v = e.currentTarget;
+              v.pause();
+              v.currentTime = 0;
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.url,
+            alt: item.name || "Uploaded preview",
+            className: cn(
+              "w-full h-full",
+              aspectRatio === "square" ? "object-contain p-2" : "object-cover"
+            )
+          }
+        ),
+        isVideo && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 z-10 bg-black/65 backdrop-blur-md text-white text-[10px] font-medium px-2 py-0.5 rounded-full border border-white/20 flex items-center gap-1 shadow-sm pointer-events-none", children: [
+          /* @__PURE__ */ jsx(PlayIcon, { className: "size-2.5" }),
+          /* @__PURE__ */ jsx("span", { children: "Video" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-1.5 p-1 backdrop-blur-[2px]", children: aspectRatio === "square" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          enablePreviewModal && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "size-8 rounded-lg bg-black/60 hover:bg-black/85 text-white flex items-center justify-center border border-white/20 transition-all cursor-pointer shadow-xs",
+              onClick: onPreview,
+              title: "Preview full size",
+              children: /* @__PURE__ */ jsx(Eye, { className: "size-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: disabled || isUploading,
+              onClick: onReplace,
+              className: "size-8 rounded-lg bg-primary hover:bg-primary/90 text-white flex items-center justify-center transition-all cursor-pointer shadow-xs disabled:opacity-50",
+              title: "Replace image",
+              children: /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: disabled || isUploading,
+              onClick: onRemove,
+              className: "size-8 rounded-lg bg-destructive hover:bg-destructive/90 text-white flex items-center justify-center transition-all cursor-pointer shadow-xs disabled:opacity-50",
+              title: "Remove image",
+              children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          enablePreviewModal && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              className: "border-white/40 bg-black/40 text-white hover:bg-black/60 hover:text-white backdrop-blur-xs",
+              onClick: onPreview,
+              leftIcon: /* @__PURE__ */ jsx(Eye, { className: "size-3.5" }),
+              children: "Preview"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "default",
+              size: "sm",
+              disabled: disabled || isUploading,
+              onClick: onReplace,
+              children: "Replace"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              disabled: disabled || isUploading,
+              className: "border-destructive/60 bg-destructive/80 text-white hover:bg-destructive hover:text-white",
+              onClick: onRemove,
+              leftIcon: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" }),
+              children: "Remove"
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+ImageUploadSinglePreview.displayName = "ImageUploadSinglePreview";
+
+export { ImageUploadSinglePreview };

package/dist/components/ImageUpload/subcomponents/ImageUploadThumbnailCard.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { ImageUploadItem } from '../ImageUpload.types';
+export interface ImageUploadThumbnailCardProps {
+    item: ImageUploadItem;
+    index: number;
+    layout?: 'grid' | 'scroll';
+    disabled?: boolean;
+    enablePreviewModal?: boolean;
+    shouldAnimate?: boolean;
+    onPreview: (e: React.MouseEvent) => void;
+    onRemove: (e: React.MouseEvent) => void;
+}
+export declare const ImageUploadThumbnailCard: React.FC<ImageUploadThumbnailCardProps>;
+export interface ImageUploadTaskCardProps {
+    id: string;
+    name: string;
+    previewUrl: string;
+    isVideo: boolean;
+    layout?: 'grid' | 'scroll';
+    shouldAnimate?: boolean;
+}
+export declare const ImageUploadTaskCard: React.FC<ImageUploadTaskCardProps>;
+//# sourceMappingURL=ImageUploadThumbnailCard.d.ts.map

package/dist/components/ImageUpload/subcomponents/ImageUploadThumbnailCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploadThumbnailCard.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageUpload/subcomponents/ImageUploadThumbnailCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAwF5E,CAAC;AAIF,MAAM,WAAW,wBAAwB;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA4ClE,CAAC"}