@appcorp/shadcn 1.2.0 → 2.0.0

package/components/enhanced-dropzone-impl.js

@@ -0,0 +1,218 @@
+"use client";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { cn } from "../lib/utils";
+import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } from "./ui/carousel";
+import { Button } from "./ui/button";
+import { ImageResizeDialog } from "./image-resize-dialog";
+import { XIcon } from "lucide-react";
+export const EnhancedDropzone = ({ id, label, info, error, accept, maxFiles = 10, maxSize, minSize, disabled, value = [], onChange, onRemoveRemote, resize = false, className, testIdDropzone, testIdInput, testIdPrev, testIdNext, testIdPreviewPrefix, testIdImagePrefix, testIdRemovePrefix, testIdCount, testIdEmptyIcon, testIdEmptyTitle, testIdEmptySubtitle, testIdEmptyNote, testIdMessage, }) => {
+    const [localFiles, setLocalFiles] = useState([]);
+    const localPreviewsRef = useRef(new Map());
+    const [resizeDialogOpen, setResizeDialogOpen] = useState(false);
+    const [pendingFile, setPendingFile] = useState(null);
+    const [pendingFileUrl, setPendingFileUrl] = useState("");
+    useEffect(() => {
+        const map = localPreviewsRef.current;
+        localFiles.forEach((file) => {
+            if (!map.has(file)) {
+                try {
+                    const url = URL.createObjectURL(file);
+                    map.set(file, url);
+                }
+                catch (error) {
+                    console.error("Failed to create object URL:", error);
+                }
+            }
+        });
+        const currentFiles = new Set(localFiles);
+        Array.from(map.entries()).forEach(([file, url]) => {
+            if (!currentFiles.has(file)) {
+                URL.revokeObjectURL(url);
+                map.delete(file);
+            }
+        });
+    }, [localFiles]);
+    useEffect(() => {
+        const map = localPreviewsRef.current;
+        return () => {
+            Array.from(map.values()).forEach((url) => {
+                URL.revokeObjectURL(url);
+            });
+            map.clear();
+        };
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (pendingFileUrl) {
+                URL.revokeObjectURL(pendingFileUrl);
+            }
+        };
+    }, [pendingFileUrl]);
+    const isImageOnly = React.useMemo(() => {
+        if (!accept)
+            return false;
+        const acceptTypes = Array.isArray(accept)
+            ? accept
+            : Object.keys(accept || {});
+        return acceptTypes.some((type) => typeof type === "string" && type.toLowerCase().includes("image"));
+    }, [accept]);
+    const normalizedAccept = React.useMemo(() => {
+        if (!accept)
+            return undefined;
+        if (Array.isArray(accept)) {
+            return accept.reduce((acc, type) => {
+                acc[type] = [];
+                return acc;
+            }, {});
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return accept;
+    }, [accept]);
+    const dropzoneOptions = {
+        accept: normalizedAccept,
+        maxFiles,
+        maxSize,
+        minSize,
+        disabled,
+        onDrop: useCallback((acceptedFiles) => {
+            if (resize && acceptedFiles.length > 0) {
+                const file = acceptedFiles[0];
+                const url = URL.createObjectURL(file);
+                setPendingFile(file);
+                setPendingFileUrl(url);
+                setResizeDialogOpen(true);
+            }
+            else {
+                setLocalFiles((prev) => {
+                    const combined = [...prev, ...acceptedFiles];
+                    const limited = maxFiles ? combined.slice(0, maxFiles) : combined;
+                    onChange === null || onChange === void 0 ? void 0 : onChange(limited);
+                    return limited;
+                });
+            }
+        }, [maxFiles, onChange, resize]),
+    };
+    const { getRootProps, getInputProps, isDragActive } = useDropzone(dropzoneOptions);
+    const handleRemoveRemote = useCallback((url) => {
+        onRemoveRemote === null || onRemoveRemote === void 0 ? void 0 : onRemoveRemote(url);
+    }, [onRemoveRemote]);
+    const handleRemoveLocal = useCallback((index) => {
+        setLocalFiles((prev) => {
+            const updated = prev.filter((_, i) => i !== index);
+            onChange === null || onChange === void 0 ? void 0 : onChange(updated);
+            return updated;
+        });
+    }, [onChange]);
+    const handleCropComplete = useCallback((croppedImage) => {
+        setLocalFiles((prev) => {
+            const combined = [...prev, croppedImage];
+            const limited = maxFiles ? combined.slice(0, maxFiles) : combined;
+            onChange === null || onChange === void 0 ? void 0 : onChange(limited);
+            return limited;
+        });
+    }, [maxFiles, onChange]);
+    const handleResizeDialogClose = useCallback(() => {
+        setResizeDialogOpen(false);
+        setPendingFileUrl("");
+        setPendingFile(null);
+    }, []);
+    const allPreviews = [
+        ...value.map((url) => ({ type: "remote", url, index: 0 })),
+        ...localFiles.map((file, index) => ({
+            type: "local",
+            url: localPreviewsRef.current.get(file) || "",
+            index,
+        })),
+    ];
+    const formatBytes = (bytes) => {
+        if (bytes === 0)
+            return "0 B";
+        const k = 1024;
+        const sizes = ["B", "KB", "MB", "GB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+    };
+    const getConstraintText = () => {
+        const constraints = [];
+        if (maxFiles && maxFiles > 1) {
+            constraints.push(`Up to ${maxFiles} files`);
+        }
+        if (minSize || maxSize) {
+            const sizes = [];
+            if (minSize)
+                sizes.push(`min ${formatBytes(minSize)}`);
+            if (maxSize)
+                sizes.push(`max ${formatBytes(maxSize)}`);
+            constraints.push(`${sizes.join(", ")}`);
+        }
+        return constraints.join(" • ");
+    };
+    return (React.createElement("div", { className: cn("w-full", className), "data-slot": "enhanced-dropzone", "data-testid": testIdDropzone },
+        label && (React.createElement("label", { className: "mb-2 block text-sm font-medium" }, label)),
+        React.createElement("div", Object.assign({}, getRootProps(), { className: cn("relative w-full rounded-md border border-dashed p-6 text-center min-h-70 flex items-center justify-center", isDragActive && "ring-2 ring-ring ring-offset-2", disabled && "opacity-60 pointer-events-none") }),
+            React.createElement("input", Object.assign({}, getInputProps(), { id: id, "data-testid": testIdInput })),
+            isImageOnly && allPreviews.length > 0 ? (React.createElement("div", { className: "flex flex-col items-center w-full" },
+                React.createElement("div", { className: "relative w-full max-w-md" },
+                    React.createElement(Carousel, { className: "w-full" },
+                        React.createElement(CarouselPrevious, { type: "button", onClick: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), "data-testid": testIdPrev }),
+                        React.createElement(CarouselNext, { type: "button", onClick: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), "data-testid": testIdNext }),
+                        React.createElement(CarouselContent, { className: "ml-0" }, allPreviews.map((preview, idx) => (React.createElement(CarouselItem, { key: `${preview.type}-${preview.url}-${idx}`, className: "pl-4", "data-testid": `${testIdPreviewPrefix !== null && testIdPreviewPrefix !== void 0 ? testIdPreviewPrefix : "dropzone-preview"}-${idx}` },
+                            React.createElement("div", { className: "relative aspect-square w-full max-w-xs mx-auto" }, preview.url ? (React.createElement(React.Fragment, null,
+                                React.createElement("img", { src: preview.url, alt: `Preview ${idx + 1}`, className: "h-full w-full rounded-lg object-cover", onClick: (e) => e.stopPropagation(), "data-testid": `${testIdImagePrefix !== null && testIdImagePrefix !== void 0 ? testIdImagePrefix : "dropzone-image"}-${idx}` }),
+                                React.createElement(Button, { type: "button", size: "icon", variant: "destructive", onClick: (e) => {
+                                        e.stopPropagation();
+                                        if (preview.type === "remote") {
+                                            handleRemoveRemote(preview.url);
+                                        }
+                                        else {
+                                            handleRemoveLocal(preview.index);
+                                        }
+                                    }, className: "absolute right-2 top-2 h-8 w-8 rounded-full", "aria-label": "Remove image", "data-testid": `${testIdRemovePrefix !== null && testIdRemovePrefix !== void 0 ? testIdRemovePrefix : "dropzone-remove"}-${idx}` },
+                                    React.createElement(XIcon, { className: "h-4 w-4" })))) : (React.createElement("div", { className: "flex h-full w-full items-center justify-center rounded-lg bg-muted text-muted-foreground" },
+                                React.createElement("span", { className: "text-sm" }, "Loading...")))))))))),
+                React.createElement("p", { className: "mt-4 text-sm font-medium text-muted-foreground", "data-testid": testIdCount },
+                    allPreviews.length,
+                    " image",
+                    allPreviews.length !== 1 ? "s" : "",
+                    " ",
+                    "selected"))) : !isImageOnly && allPreviews.length > 0 ? (React.createElement("div", { className: "flex flex-col items-center w-full gap-4" },
+                React.createElement("div", { className: "w-full max-w-md" },
+                    React.createElement("div", { className: "space-y-2" }, allPreviews.map((preview, idx) => {
+                        var _a;
+                        return (React.createElement("div", { key: `${preview.type}-${preview.url}-${idx}`, "data-testid": `${testIdPreviewPrefix !== null && testIdPreviewPrefix !== void 0 ? testIdPreviewPrefix : "dropzone-preview"}-${idx}`, className: "flex items-center justify-between gap-3 p-3 rounded-lg border bg-muted/50" },
+                            React.createElement("span", { className: "text-sm truncate flex-1", "data-testid": `${testIdImagePrefix !== null && testIdImagePrefix !== void 0 ? testIdImagePrefix : "dropzone-image"}-${idx}` }, preview.type === "remote"
+                                ? new URL(preview.url).pathname.split("/").pop() ||
+                                    "File"
+                                : ((_a = localFiles[preview.index]) === null || _a === void 0 ? void 0 : _a.name) || "File"),
+                            React.createElement(Button, { type: "button", size: "icon", variant: "ghost", onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (preview.type === "remote") {
+                                        handleRemoveRemote(preview.url);
+                                    }
+                                    else {
+                                        handleRemoveLocal(preview.index);
+                                    }
+                                }, className: "h-8 w-8 shrink-0", "aria-label": "Remove file", "data-testid": `${testIdRemovePrefix !== null && testIdRemovePrefix !== void 0 ? testIdRemovePrefix : "dropzone-remove"}-${idx}` },
+                                React.createElement(XIcon, { className: "h-4 w-4" }))));
+                    }))),
+                React.createElement("p", { className: "text-sm font-medium text-muted-foreground", "data-testid": testIdCount },
+                    allPreviews.length,
+                    " file",
+                    allPreviews.length !== 1 ? "s" : "",
+                    " ",
+                    "selected"))) : (React.createElement("div", { className: "flex flex-col items-center justify-center gap-2" },
+                React.createElement("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg bg-muted text-muted-foreground", "data-testid": testIdEmptyIcon },
+                    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-image" },
+                        React.createElement("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+                        React.createElement("circle", { cx: "9", cy: "9", r: "2" }),
+                        React.createElement("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }))),
+                React.createElement("div", { className: "space-y-1 text-center" },
+                    React.createElement("p", { className: "font-medium text-sm", "data-testid": testIdEmptyTitle }, maxFiles === 1
+                        ? `Upload ${isImageOnly ? "an image" : "a file"}`
+                        : `Upload ${isImageOnly ? "images" : "files"}`),
+                    React.createElement("p", { className: "text-muted-foreground text-xs", "data-testid": testIdEmptySubtitle }, "Drag and drop or click to browse"),
+                    (maxFiles > 1 || minSize || maxSize) && (React.createElement("p", { className: "text-muted-foreground text-xs", "data-testid": testIdEmptyNote }, getConstraintText())))))),
+        (error || info) && (React.createElement("div", { className: "mt-2", "data-testid": testIdMessage }, error ? (React.createElement("p", { className: "text-xs text-destructive" }, error)) : info ? (React.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400" }, info)) : null)),
+        resize && pendingFile && (React.createElement(ImageResizeDialog, { open: resizeDialogOpen, onClose: handleResizeDialogClose, imageUrl: pendingFileUrl, onCropComplete: handleCropComplete, fileName: pendingFile.name }))));
+};

package/components/enhanced-dropzone.d.ts

@@ -1,65 +1,4 @@
 import React from "react";
-import type { DropzoneOptions } from "react-dropzone";
-/**
- * Props for `EnhancedDropzone` component.
- */
-export type EnhancedDropzoneProps = {
-    /** HTML id attribute applied to the hidden file input and used for labeling. */
-    id?: string;
-    /** Additional className(s) applied to the root container. */
-    className?: string;
-    /** Optional label text displayed above the dropzone. */
-    label?: string;
-    /** Informational helper text shown below the component (non-error). */
-    info?: string;
-    /** Error message text shown below the component; puts component into error state. */
-    error?: string;
-    /**
-     * Accepted file types. Matches `react-dropzone` `accept` option or a list of
-     * mime types / extensions (e.g. `['image/*']` or `{ 'image/*': [] }`).
-     */
-    accept?: DropzoneOptions["accept"] | string[];
-    /** Maximum number of files allowed to be selected. Defaults to `10`. */
-    maxFiles?: number;
-    /** Maximum file size in bytes. */
-    maxSize?: number;
-    /** Minimum file size in bytes. */
-    minSize?: number;
-    /** Whether the dropzone is disabled (prevents interactions). */
-    disabled?: boolean;
-    /** Remote image URLs to display as previews (read-only remote values). */
-    value?: string[];
-    /** Called when the selected files change (local additions/removals). */
-    onChange?: (files: File[]) => void;
-    /** Called when a remote URL preview is removed by the user. */
-    onRemoveRemote?: (url: string) => void;
-    /** Enable image resize/crop functionality. When true, opens a dialog to crop images to square aspect ratio. */
-    resize?: boolean;
-    /** `data-testid` for the root dropzone container. */
-    testIdDropzone?: string;
-    /** `data-testid` for the hidden file input element. */
-    testIdInput?: string;
-    /** `data-testid` for the carousel previous button. */
-    testIdPrev?: string;
-    /** `data-testid` for the carousel next button. */
-    testIdNext?: string;
-    /** Prefix used for preview items: `${prefix}-${index}`. */
-    testIdPreviewPrefix?: string;
-    /** Prefix for preview image elements: `${prefix}-${index}`. */
-    testIdImagePrefix?: string;
-    /** Prefix for remove buttons on previews: `${prefix}-${index}`. */
-    testIdRemovePrefix?: string;
-    /** `data-testid` for the preview count text element. */
-    testIdCount?: string;
-    /** `data-testid` for the empty-state icon wrapper. */
-    testIdEmptyIcon?: string;
-    /** `data-testid` for the empty-state title. */
-    testIdEmptyTitle?: string;
-    /** `data-testid` for the empty-state subtitle. */
-    testIdEmptySubtitle?: string;
-    /** `data-testid` for the empty-state note (max files info). */
-    testIdEmptyNote?: string;
-    /** `data-testid` for the error/info message container. */
-    testIdMessage?: string;
-};
+import type { EnhancedDropzoneProps } from "./enhanced-dropzone-impl";
+export type { EnhancedDropzoneProps };
 export declare const EnhancedDropzone: React.FC<EnhancedDropzoneProps>;

package/components/enhanced-dropzone.js

@@ -1,296 +1,8 @@
 "use client";
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import React, { Suspense } from "react";
+const DropzoneImpl = React.lazy(() => import("./enhanced-dropzone-impl").then((m) => ({ default: m.EnhancedDropzone })));
+export const EnhancedDropzone = (props) => {
+    return (React.createElement(Suspense, { fallback: React.createElement("div", { className: "w-full min-h-70 rounded-md border border-dashed p-6 text-center flex items-center justify-center" },
+            React.createElement("p", { className: "text-sm text-muted-foreground" }, "Loading dropzone...")) },
+        React.createElement(DropzoneImpl, Object.assign({}, props))));
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EnhancedDropzone = void 0;
-var react_1 = __importStar(require("react"));
-var react_dropzone_1 = require("react-dropzone");
-var utils_1 = require("../lib/utils");
-var carousel_1 = require("./ui/carousel");
-var button_1 = require("./ui/button");
-var image_resize_dialog_1 = require("./image-resize-dialog");
-var lucide_react_1 = require("lucide-react");
-var EnhancedDropzone = function (_a) {
-    var id = _a.id, label = _a.label, info = _a.info, error = _a.error, accept = _a.accept, _b = _a.maxFiles, maxFiles = _b === void 0 ? 10 : _b, maxSize = _a.maxSize, minSize = _a.minSize, disabled = _a.disabled, _c = _a.value, value = _c === void 0 ? [] : _c, onChange = _a.onChange, onRemoveRemote = _a.onRemoveRemote, _d = _a.resize, resize = _d === void 0 ? false : _d, className = _a.className, testIdDropzone = _a.testIdDropzone, testIdInput = _a.testIdInput, testIdPrev = _a.testIdPrev, testIdNext = _a.testIdNext, testIdPreviewPrefix = _a.testIdPreviewPrefix, testIdImagePrefix = _a.testIdImagePrefix, testIdRemovePrefix = _a.testIdRemovePrefix, testIdCount = _a.testIdCount, testIdEmptyIcon = _a.testIdEmptyIcon, testIdEmptyTitle = _a.testIdEmptyTitle, testIdEmptySubtitle = _a.testIdEmptySubtitle, testIdEmptyNote = _a.testIdEmptyNote, testIdMessage = _a.testIdMessage;
-    // Local files selected by user
-    var _e = (0, react_1.useState)([]), localFiles = _e[0], setLocalFiles = _e[1];
-    // Track object URLs created for local files
-    var localPreviewsRef = (0, react_1.useRef)(new Map());
-    // State for resize dialog
-    var _f = (0, react_1.useState)(false), resizeDialogOpen = _f[0], setResizeDialogOpen = _f[1];
-    var _g = (0, react_1.useState)(null), pendingFile = _g[0], setPendingFile = _g[1];
-    var _h = (0, react_1.useState)(""), pendingFileUrl = _h[0], setPendingFileUrl = _h[1];
-    // Create and manage object URLs for local files
-    (0, react_1.useEffect)(function () {
-        var map = localPreviewsRef.current;
-        // Create URLs for new files
-        localFiles.forEach(function (file) {
-            if (!map.has(file)) {
-                try {
-                    var url = URL.createObjectURL(file);
-                    map.set(file, url);
-                }
-                catch (error) {
-                    console.error("Failed to create object URL:", error);
-                }
-            }
-        });
-        // Clean up URLs for removed files
-        var currentFiles = new Set(localFiles);
-        Array.from(map.entries()).forEach(function (_a) {
-            var file = _a[0], url = _a[1];
-            if (!currentFiles.has(file)) {
-                URL.revokeObjectURL(url);
-                map.delete(file);
-            }
-        });
-    }, [localFiles]);
-    // Cleanup on unmount
-    (0, react_1.useEffect)(function () {
-        var map = localPreviewsRef.current;
-        return function () {
-            Array.from(map.values()).forEach(function (url) {
-                URL.revokeObjectURL(url);
-            });
-            map.clear();
-        };
-    }, []);
-    // Cleanup pending file URL when dialog closes
-    (0, react_1.useEffect)(function () {
-        return function () {
-            if (pendingFileUrl) {
-                URL.revokeObjectURL(pendingFileUrl);
-            }
-        };
-    }, [pendingFileUrl]);
-    // Check if accept includes image types
-    var isImageOnly = react_1.default.useMemo(function () {
-        if (!accept)
-            return false;
-        var acceptTypes = Array.isArray(accept)
-            ? accept
-            : Object.keys(accept || {});
-        return acceptTypes.some(function (type) { return typeof type === "string" && type.toLowerCase().includes("image"); });
-    }, [accept]);
-    // Convert accept array to react-dropzone format if needed
-    var normalizedAccept = react_1.default.useMemo(function () {
-        if (!accept)
-            return undefined;
-        if (Array.isArray(accept)) {
-            // Convert string array like ['image/*'] to object format { 'image/*': [] }
-            return accept.reduce(function (acc, type) {
-                acc[type] = [];
-                return acc;
-            }, {});
-        }
-        // Already in object format
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return accept;
-    }, [accept]);
-    var dropzoneOptions = {
-        accept: normalizedAccept,
-        maxFiles: maxFiles,
-        maxSize: maxSize,
-        minSize: minSize,
-        disabled: disabled,
-        onDrop: (0, react_1.useCallback)(function (acceptedFiles) {
-            if (resize && acceptedFiles.length > 0) {
-                // If resize is enabled, open the resize dialog with the first file
-                var file = acceptedFiles[0];
-                var url = URL.createObjectURL(file);
-                setPendingFile(file);
-                setPendingFileUrl(url);
-                setResizeDialogOpen(true);
-            }
-            else {
-                // If resize is disabled, add files directly
-                setLocalFiles(function (prev) {
-                    var combined = __spreadArray(__spreadArray([], prev, true), acceptedFiles, true);
-                    var limited = maxFiles ? combined.slice(0, maxFiles) : combined;
-                    onChange === null || onChange === void 0 ? void 0 : onChange(limited);
-                    return limited;
-                });
-            }
-        }, [maxFiles, onChange, resize]),
-    };
-    var _j = (0, react_dropzone_1.useDropzone)(dropzoneOptions), getRootProps = _j.getRootProps, getInputProps = _j.getInputProps, isDragActive = _j.isDragActive;
-    // Remove remote URL
-    var handleRemoveRemote = (0, react_1.useCallback)(function (url) {
-        onRemoveRemote === null || onRemoveRemote === void 0 ? void 0 : onRemoveRemote(url);
-    }, [onRemoveRemote]);
-    // Remove local file
-    var handleRemoveLocal = (0, react_1.useCallback)(function (index) {
-        setLocalFiles(function (prev) {
-            var updated = prev.filter(function (_, i) { return i !== index; });
-            onChange === null || onChange === void 0 ? void 0 : onChange(updated);
-            return updated;
-        });
-    }, [onChange]);
-    // Handle crop completion from resize dialog
-    var handleCropComplete = (0, react_1.useCallback)(function (croppedImage) {
-        setLocalFiles(function (prev) {
-            var combined = __spreadArray(__spreadArray([], prev, true), [croppedImage], false);
-            var limited = maxFiles ? combined.slice(0, maxFiles) : combined;
-            onChange === null || onChange === void 0 ? void 0 : onChange(limited);
-            return limited;
-        });
-    }, [maxFiles, onChange]);
-    // Handle resize dialog close
-    var handleResizeDialogClose = (0, react_1.useCallback)(function () {
-        setResizeDialogOpen(false);
-        // Cleanup will happen via the pendingFileUrl useEffect
-        setPendingFileUrl("");
-        setPendingFile(null);
-    }, []);
-    // Get all preview URLs (remote + local)
-    var allPreviews = __spreadArray(__spreadArray([], value.map(function (url) { return ({ type: "remote", url: url, index: 0 }); }), true), localFiles.map(function (file, index) { return ({
-        type: "local",
-        url: localPreviewsRef.current.get(file) || "",
-        index: index,
-    }); }), true);
-    // Format bytes to human-readable size
-    var formatBytes = function (bytes) {
-        if (bytes === 0)
-            return "0 B";
-        var k = 1024;
-        var sizes = ["B", "KB", "MB", "GB"];
-        var i = Math.floor(Math.log(bytes) / Math.log(k));
-        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
-    };
-    // Build constraint text for the note
-    var getConstraintText = function () {
-        var constraints = [];
-        if (maxFiles && maxFiles > 1) {
-            constraints.push("Up to ".concat(maxFiles, " files"));
-        }
-        if (minSize || maxSize) {
-            var sizes = [];
-            if (minSize)
-                sizes.push("min ".concat(formatBytes(minSize)));
-            if (maxSize)
-                sizes.push("max ".concat(formatBytes(maxSize)));
-            constraints.push("".concat(sizes.join(", ")));
-        }
-        return constraints.join(" • ");
-    };
-    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("w-full", className), "data-slot": "enhanced-dropzone", "data-testid": testIdDropzone },
-        label && (react_1.default.createElement("label", { className: "mb-2 block text-sm font-medium" }, label)),
-        react_1.default.createElement("div", __assign({}, getRootProps(), { className: (0, utils_1.cn)("relative w-full rounded-md border border-dashed p-6 text-center min-h-70 flex items-center justify-center", isDragActive && "ring-2 ring-ring ring-offset-2", disabled && "opacity-60 pointer-events-none") }),
-            react_1.default.createElement("input", __assign({}, getInputProps(), { id: id, "data-testid": testIdInput })),
-            isImageOnly && allPreviews.length > 0 ? (react_1.default.createElement("div", { className: "flex flex-col items-center w-full" },
-                react_1.default.createElement("div", { className: "relative w-full max-w-md" },
-                    react_1.default.createElement(carousel_1.Carousel, { className: "w-full" },
-                        react_1.default.createElement(carousel_1.CarouselPrevious, { type: "button", onClick: function (e) { return e.stopPropagation(); }, onPointerDown: function (e) { return e.stopPropagation(); }, onMouseDown: function (e) { return e.stopPropagation(); }, "data-testid": testIdPrev }),
-                        react_1.default.createElement(carousel_1.CarouselNext, { type: "button", onClick: function (e) { return e.stopPropagation(); }, onPointerDown: function (e) { return e.stopPropagation(); }, onMouseDown: function (e) { return e.stopPropagation(); }, "data-testid": testIdNext }),
-                        react_1.default.createElement(carousel_1.CarouselContent, { className: "ml-0" }, allPreviews.map(function (preview, idx) { return (react_1.default.createElement(carousel_1.CarouselItem, { key: "".concat(preview.type, "-").concat(preview.url, "-").concat(idx), className: "pl-4", "data-testid": "".concat(testIdPreviewPrefix !== null && testIdPreviewPrefix !== void 0 ? testIdPreviewPrefix : "dropzone-preview", "-").concat(idx) },
-                            react_1.default.createElement("div", { className: "relative aspect-square w-full max-w-xs mx-auto" }, preview.url ? (react_1.default.createElement(react_1.default.Fragment, null,
-                                react_1.default.createElement("img", { src: preview.url, alt: "Preview ".concat(idx + 1), className: "h-full w-full rounded-lg object-cover", onClick: function (e) { return e.stopPropagation(); }, "data-testid": "".concat(testIdImagePrefix !== null && testIdImagePrefix !== void 0 ? testIdImagePrefix : "dropzone-image", "-").concat(idx) }),
-                                react_1.default.createElement(button_1.Button, { type: "button", size: "icon", variant: "destructive", onClick: function (e) {
-                                        e.stopPropagation();
-                                        if (preview.type === "remote") {
-                                            handleRemoveRemote(preview.url);
-                                        }
-                                        else {
-                                            handleRemoveLocal(preview.index);
-                                        }
-                                    }, className: "absolute right-2 top-2 h-8 w-8 rounded-full", "aria-label": "Remove image", "data-testid": "".concat(testIdRemovePrefix !== null && testIdRemovePrefix !== void 0 ? testIdRemovePrefix : "dropzone-remove", "-").concat(idx) },
-                                    react_1.default.createElement(lucide_react_1.XIcon, { className: "h-4 w-4" })))) : (react_1.default.createElement("div", { className: "flex h-full w-full items-center justify-center rounded-lg bg-muted text-muted-foreground" },
-                                react_1.default.createElement("span", { className: "text-sm" }, "Loading...")))))); })))),
-                react_1.default.createElement("p", { className: "mt-4 text-sm font-medium text-muted-foreground", "data-testid": testIdCount },
-                    allPreviews.length,
-                    " image",
-                    allPreviews.length !== 1 ? "s" : "",
-                    " ",
-                    "selected"))) : !isImageOnly && allPreviews.length > 0 ? (react_1.default.createElement("div", { className: "flex flex-col items-center w-full gap-4" },
-                react_1.default.createElement("div", { className: "w-full max-w-md" },
-                    react_1.default.createElement("div", { className: "space-y-2" }, allPreviews.map(function (preview, idx) {
-                        var _a;
-                        return (react_1.default.createElement("div", { key: "".concat(preview.type, "-").concat(preview.url, "-").concat(idx), "data-testid": "".concat(testIdPreviewPrefix !== null && testIdPreviewPrefix !== void 0 ? testIdPreviewPrefix : "dropzone-preview", "-").concat(idx), className: "flex items-center justify-between gap-3 p-3 rounded-lg border bg-muted/50" },
-                            react_1.default.createElement("span", { className: "text-sm truncate flex-1", "data-testid": "".concat(testIdImagePrefix !== null && testIdImagePrefix !== void 0 ? testIdImagePrefix : "dropzone-image", "-").concat(idx) }, preview.type === "remote"
-                                ? new URL(preview.url).pathname.split("/").pop() ||
-                                    "File"
-                                : ((_a = localFiles[preview.index]) === null || _a === void 0 ? void 0 : _a.name) || "File"),
-                            react_1.default.createElement(button_1.Button, { type: "button", size: "icon", variant: "ghost", onClick: function (e) {
-                                    e.stopPropagation();
-                                    if (preview.type === "remote") {
-                                        handleRemoveRemote(preview.url);
-                                    }
-                                    else {
-                                        handleRemoveLocal(preview.index);
-                                    }
-                                }, className: "h-8 w-8 shrink-0", "aria-label": "Remove file", "data-testid": "".concat(testIdRemovePrefix !== null && testIdRemovePrefix !== void 0 ? testIdRemovePrefix : "dropzone-remove", "-").concat(idx) },
-                                react_1.default.createElement(lucide_react_1.XIcon, { className: "h-4 w-4" }))));
-                    }))),
-                react_1.default.createElement("p", { className: "text-sm font-medium text-muted-foreground", "data-testid": testIdCount },
-                    allPreviews.length,
-                    " file",
-                    allPreviews.length !== 1 ? "s" : "",
-                    " ",
-                    "selected"))) : (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center gap-2" },
-                react_1.default.createElement("div", { className: "flex h-12 w-12 items-center justify-center rounded-lg bg-muted text-muted-foreground", "data-testid": testIdEmptyIcon },
-                    react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-image" },
-                        react_1.default.createElement("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
-                        react_1.default.createElement("circle", { cx: "9", cy: "9", r: "2" }),
-                        react_1.default.createElement("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" }))),
-                react_1.default.createElement("div", { className: "space-y-1 text-center" },
-                    react_1.default.createElement("p", { className: "font-medium text-sm", "data-testid": testIdEmptyTitle }, maxFiles === 1
-                        ? "Upload ".concat(isImageOnly ? "an image" : "a file")
-                        : "Upload ".concat(isImageOnly ? "images" : "files")),
-                    react_1.default.createElement("p", { className: "text-muted-foreground text-xs", "data-testid": testIdEmptySubtitle }, "Drag and drop or click to browse"),
-                    (maxFiles > 1 || minSize || maxSize) && (react_1.default.createElement("p", { className: "text-muted-foreground text-xs", "data-testid": testIdEmptyNote }, getConstraintText())))))),
-        (error || info) && (react_1.default.createElement("div", { className: "mt-2", "data-testid": testIdMessage }, error ? (react_1.default.createElement("p", { className: "text-xs text-destructive" }, error)) : info ? (react_1.default.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400" }, info)) : null)),
-        resize && pendingFile && (react_1.default.createElement(image_resize_dialog_1.ImageResizeDialog, { open: resizeDialogOpen, onClose: handleResizeDialogClose, imageUrl: pendingFileUrl, onCropComplete: handleCropComplete, fileName: pendingFile.name }))));
-};
-exports.EnhancedDropzone = EnhancedDropzone;