@underverse-ui/underverse 1.0.180 → 1.0.182

package/dist/index.d.cts

@@ -2197,13 +2197,14 @@ interface ImageUploadProps {
     disabled?: boolean;
     className?: string;
     showPreview?: boolean;
-    previewSize?: "sm" | "md" | "lg";
+    previewSize?: "sx" | "sm" | "md" | "lg";
     dragDropText?: string;
     browseText?: string;
     supportedFormatsText?: string;
+    uploadAreaHeight?: string | number;
 }
 declare function ImageUpload({ onUpload, onRemove, maxSize, // Convert bytes to MB
-accept, multiple, disabled, className, showPreview, previewSize, dragDropText, browseText, supportedFormatsText, }: ImageUploadProps): react_jsx_runtime.JSX.Element;
+accept, multiple, disabled, className, showPreview, previewSize, dragDropText, browseText, supportedFormatsText, uploadAreaHeight, }: ImageUploadProps): react_jsx_runtime.JSX.Element;
 
 interface UploadedFile {
     id: string | number;

package/dist/index.d.ts

@@ -2197,13 +2197,14 @@ interface ImageUploadProps {
     disabled?: boolean;
     className?: string;
     showPreview?: boolean;
-    previewSize?: "sm" | "md" | "lg";
+    previewSize?: "sx" | "sm" | "md" | "lg";
     dragDropText?: string;
     browseText?: string;
     supportedFormatsText?: string;
+    uploadAreaHeight?: string | number;
 }
 declare function ImageUpload({ onUpload, onRemove, maxSize, // Convert bytes to MB
-accept, multiple, disabled, className, showPreview, previewSize, dragDropText, browseText, supportedFormatsText, }: ImageUploadProps): react_jsx_runtime.JSX.Element;
+accept, multiple, disabled, className, showPreview, previewSize, dragDropText, browseText, supportedFormatsText, uploadAreaHeight, }: ImageUploadProps): react_jsx_runtime.JSX.Element;
 
 interface UploadedFile {
     id: string | number;

package/dist/index.js

@@ -21708,7 +21708,8 @@ function ImageUpload({
   previewSize = "md",
   dragDropText,
   browseText,
-  supportedFormatsText
+  supportedFormatsText,
+  uploadAreaHeight
 }) {
   const [isDragging, setIsDragging] = useState34(false);
   const [uploading, setUploading] = useState34(false);
@@ -21717,10 +21718,12 @@ function ImageUpload({
   const { addToast } = useToast();
   const t = useSmartTranslations("OCR.imageUpload");
   const previewSizes = {
+    sx: "w-12 h-12",
     sm: "w-16 h-16",
     md: "w-24 h-24",
     lg: "w-32 h-32"
   };
+  const compactUploadArea = typeof uploadAreaHeight === "number" ? uploadAreaHeight <= 150 : typeof uploadAreaHeight === "string" && /^\s*\d+(?:\.\d+)?px\s*$/.test(uploadAreaHeight) ? parseFloat(uploadAreaHeight) <= 150 : false;
   const handleDragOver = useCallback19(
     (e) => {
       e.preventDefault();
@@ -21757,11 +21760,12 @@ function ImageUpload({
       if (validFiles.length === 0) return;
       setUploading(true);
       try {
+        let idCount = 0;
         for (const file of validFiles) {
           const formData = new FormData();
           formData.append("file", file);
           const response = {
-            id: Date.now(),
+            id: Date.now() + idCount,
             path: "",
             url: URL.createObjectURL(file),
             originalName: file.name,
@@ -21788,6 +21792,7 @@ function ImageUpload({
             type: "success",
             message: `"${file.name}" uploaded successfully`
           });
+          idCount++;
         }
       } catch (error) {
         console.error("Upload error:", error);
@@ -21833,11 +21838,14 @@ function ImageUpload({
       "div",
       {
         className: cn(
-          "relative border-2 border-dashed rounded-2xl md:rounded-3xl p-8 text-center transition-all duration-200",
+          "relative border-2 border-dashed rounded-2xl md:rounded-3xl text-center transition-all duration-200",
+          uploadAreaHeight ? "px-4 py-3 sm:px-6 sm:py-4" : "p-8",
+          compactUploadArea && "px-3 py-2 sm:px-4 sm:py-3",
           isDragging && !disabled ? "border-primary bg-primary/5 scale-[1.02]" : "border-border/50 hover:border-primary/50",
           disabled && "opacity-50 cursor-not-allowed",
           uploading && "pointer-events-none"
         ),
+        style: uploadAreaHeight ? { height: uploadAreaHeight } : void 0,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
@@ -21846,14 +21854,35 @@ function ImageUpload({
             /* @__PURE__ */ jsx54(Loader24, { className: "w-6 h-6 animate-spin text-primary" }),
             /* @__PURE__ */ jsx54("span", { className: "text-sm font-medium", children: "Uploading..." })
           ] }) }),
-          /* @__PURE__ */ jsxs42("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsx54("div", { className: "mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx54(Upload, { className: "w-6 h-6 text-primary" }) }),
-            /* @__PURE__ */ jsxs42("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx54("p", { className: "text-muted-foreground", children: dragDropText || t("dragDropText") }),
-              /* @__PURE__ */ jsx54(Button_default, { type: "button", variant: "outline", size: "sm", onClick: handleBrowseClick, disabled: disabled || uploading, children: browseText || t("browseFiles") })
-            ] }),
-            /* @__PURE__ */ jsx54("p", { className: "text-xs text-muted-foreground", children: supportedFormatsText || t("supportedFormats") })
-          ] }),
+          /* @__PURE__ */ jsxs42(
+            "div",
+            {
+              className: cn(
+                "space-y-4",
+                uploadAreaHeight && "flex h-full flex-col items-center justify-center gap-3 space-y-0",
+                compactUploadArea && "flex-row items-center justify-between gap-3 text-left"
+              ),
+              children: [
+                /* @__PURE__ */ jsx54("div", { className: cn("bg-primary/10 rounded-full flex items-center justify-center shrink-0", compactUploadArea ? "w-9 h-9 mx-0" : "mx-auto w-12 h-12"), children: /* @__PURE__ */ jsx54(Upload, { className: cn("text-primary", compactUploadArea ? "w-4 h-4" : "w-6 h-6") }) }),
+                /* @__PURE__ */ jsxs42("div", { className: cn("space-y-2", compactUploadArea && "flex min-w-0 flex-1 items-center justify-between gap-3 space-y-0"), children: [
+                  /* @__PURE__ */ jsx54("p", { className: cn("text-muted-foreground", compactUploadArea && "text-sm leading-tight whitespace-nowrap"), children: dragDropText || t("dragDropText") }),
+                  /* @__PURE__ */ jsx54(
+                    Button_default,
+                    {
+                      type: "button",
+                      variant: "outline",
+                      size: "sm",
+                      className: cn(compactUploadArea && "shrink-0"),
+                      onClick: handleBrowseClick,
+                      disabled: disabled || uploading,
+                      children: browseText || t("browseFiles")
+                    }
+                  )
+                ] }),
+                !compactUploadArea && /* @__PURE__ */ jsx54("p", { className: "text-xs text-muted-foreground", children: supportedFormatsText || t("supportedFormats") })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx54(
             "input",
             {