uploaderkit 1.0.0 → 2.0.0

package/dist/ui.js

@@ -0,0 +1,749 @@
+import { useSlottedUploader } from './chunk-PTEX7F4R.js';
+import { useOverlayTransition, useOverlayLayer, useFocusTrap, lockBodyScroll, unlockBodyScroll, cn, useCoarsePointer, Dropzone, UploadCloudIcon, FileViewer } from './chunk-PDKAF4GX.js';
+export { Dropzone, FileViewer, cn } from './chunk-PDKAF4GX.js';
+import { useUploaderLabels, warnDev, useUploader } from './chunk-H7BRW5IY.js';
+export { UploaderProvider, useUploaderLabels } from './chunk-H7BRW5IY.js';
+import { formatFileSize, getFileExtension } from './chunk-T5YZG6JW.js';
+import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var ConfirmDialog = ({
+  open,
+  title,
+  message,
+  variant = "danger",
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  onCancel,
+  labels
+}) => {
+  const copy = useUploaderLabels(labels);
+  const panelRef = useRef(null);
+  const { mounted, entered } = useOverlayTransition(open);
+  const layer = useOverlayLayer(open);
+  useFocusTrap(open, panelRef);
+  const cancelRef = useRef(onCancel);
+  cancelRef.current = onCancel;
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        if (!layer.isTopmost()) return;
+        event.stopPropagation();
+        cancelRef.current();
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    lockBodyScroll();
+    return () => {
+      window.removeEventListener("keydown", onKey, true);
+      unlockBodyScroll();
+    };
+  }, [open, layer]);
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-1000 flex items-end justify-center p-4 sm:items-center",
+          !open && "pointer-events-none"
+        ),
+        onClick: onCancel,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "bg-ui-overlay fixed inset-0 transition-opacity duration-200 ease-out",
+                entered ? "opacity-100" : "opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: panelRef,
+              role: "alertdialog",
+              "aria-modal": "true",
+              "aria-label": title,
+              tabIndex: -1,
+              onClick: (event) => event.stopPropagation(),
+              className: cn(
+                "bg-ui-surface rounded-ui-xl relative w-full max-w-md p-6 shadow-2xl outline-none",
+                "transition duration-200 ease-out",
+                entered ? "translate-y-0 scale-100 opacity-100" : "translate-y-3 scale-[0.97] opacity-0"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "flex size-11 shrink-0 items-center justify-center rounded-full",
+                        variant === "danger" ? "bg-ui-danger-soft" : "bg-ui-primary-soft"
+                      ),
+                      children: /* @__PURE__ */ jsxs(
+                        "svg",
+                        {
+                          viewBox: "0 0 24 24",
+                          className: cn(
+                            "size-6",
+                            variant === "danger" ? "text-ui-danger" : "text-ui-primary"
+                          ),
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          "aria-hidden": true,
+                          children: [
+                            /* @__PURE__ */ jsx("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+                            /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+                            /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+                          ]
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("h2", { className: "text-ui-fg text-base font-semibold", children: title }),
+                    /* @__PURE__ */ jsx("div", { className: "text-ui-muted mt-1 text-sm", children: message })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-autofocus": true,
+                      onClick: onCancel,
+                      className: "border-ui-border-strong text-ui-fg hover:bg-ui-surface-muted focus-visible:ring-ui-ring rounded-ui h-10 cursor-pointer border px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none sm:w-auto",
+                      children: cancelLabel ?? copy.cancel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onConfirm,
+                      className: cn(
+                        "focus-visible:ring-ui-ring rounded-ui h-10 cursor-pointer px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none sm:w-auto",
+                        variant === "danger" ? "bg-ui-danger text-ui-danger-fg hover:bg-ui-danger-hover" : "bg-ui-primary text-ui-primary-fg hover:bg-ui-primary-hover"
+                      ),
+                      children: confirmLabel ?? copy.confirm
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+};
+var FileTypeBadge = ({
+  fileName,
+  preview,
+  size = "md"
+}) => {
+  const box = size === "sm" ? "h-8 w-8" : "h-10 w-10";
+  if (!fileName) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "border-ui-border rounded-ui shrink-0 border border-dashed",
+          box
+        )
+      }
+    );
+  }
+  return preview ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: preview,
+      alt: "",
+      className: cn("rounded-ui shrink-0 object-cover", box)
+    }
+  ) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "bg-ui-surface-muted text-ui-muted rounded-ui flex shrink-0 items-center justify-center font-medium uppercase",
+        size === "sm" ? "text-[10px]" : "text-xs",
+        box
+      ),
+      children: getFileExtension(fileName)
+    }
+  );
+};
+var ProgressBar = ({ percent, className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "bg-ui-surface-muted mt-1 h-1 w-full overflow-hidden rounded",
+      className
+    ),
+    children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "bg-ui-primary h-full transition-all",
+        style: { width: `${percent}%` }
+      }
+    )
+  }
+);
+var FileItem = ({
+  file,
+  onRemove,
+  onAbort,
+  onView,
+  size = "md",
+  labels
+}) => {
+  const copy = useUploaderLabels(labels);
+  const uploading = file.status === "uploading";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-ui animate-ui-fade-in flex items-center gap-3 border text-sm transition-colors",
+        size === "sm" ? "p-1.5" : "p-2",
+        file.status === "error" ? "border-ui-danger-soft-fg/20 bg-ui-danger-soft" : "border-ui-border bg-ui-surface"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          FileTypeBadge,
+          {
+            fileName: file.file.name,
+            preview: file.preview,
+            size
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-ui-fg truncate font-medium", children: file.file.name }),
+          file.status === "error" ? /* @__PURE__ */ jsx("p", { className: "text-ui-danger text-xs", children: file.error }) : /* @__PURE__ */ jsxs("p", { className: "text-ui-muted text-xs", children: [
+            formatFileSize(file.file.size),
+            file.status === "success" && ` \xB7 ${copy.ready}`,
+            file.status === "idle" && ` \xB7 ${copy.staged}`
+          ] }),
+          uploading && /* @__PURE__ */ jsx(ProgressBar, { percent: file.progress })
+        ] }),
+        onView && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onView,
+            className: "text-ui-primary hover:bg-ui-primary-soft focus-visible:ring-ui-ring rounded-ui shrink-0 cursor-pointer px-2 py-1 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none",
+            children: copy.view
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: uploading ? onAbort : onRemove,
+            className: "text-ui-muted hover:bg-ui-surface-muted hover:text-ui-fg focus-visible:ring-ui-ring rounded-ui shrink-0 cursor-pointer px-2 py-1 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none",
+            children: uploading ? copy.cancel : copy.remove
+          }
+        )
+      ]
+    }
+  );
+};
+var SlotRow = ({
+  slot,
+  onPick,
+  onRemove,
+  onAbort,
+  onView,
+  size = "md",
+  labels
+}) => {
+  const copy = useUploaderLabels(labels);
+  const inputRef = useRef(null);
+  const [dropping, setDropping] = useState(false);
+  const depth = useRef(0);
+  const { definition, filled, pending } = slot;
+  const uploading = pending?.status === "uploading";
+  const staged = pending?.status === "idle";
+  const occupied = Boolean(filled) || staged;
+  const droppable = !uploading;
+  const onDrop = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    depth.current = 0;
+    setDropping(false);
+    if (!droppable) return;
+    const file = event.dataTransfer.files[0];
+    if (file) onPick(file);
+  };
+  const action = "focus-visible:ring-ui-ring rounded-ui shrink-0 cursor-pointer px-2 py-1 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onDragEnter: () => {
+        depth.current += 1;
+        if (droppable) setDropping(true);
+      },
+      onDragOver: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      onDragLeave: () => {
+        depth.current = Math.max(0, depth.current - 1);
+        if (depth.current === 0) setDropping(false);
+      },
+      onDrop,
+      className: cn(
+        "rounded-ui animate-ui-fade-in flex items-center gap-3 border text-sm transition-all duration-200",
+        size === "sm" ? "p-1.5" : "p-2",
+        dropping ? "border-ui-primary bg-ui-primary-soft ring-ui-ring scale-[1.01] ring-2" : "border-ui-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "h-2.5 w-2.5 shrink-0 rounded-full transition-colors",
+              pending?.status === "error" ? "bg-ui-danger" : uploading ? "bg-ui-primary animate-pulse" : staged ? "bg-ui-warning" : filled ? "bg-ui-success" : "bg-ui-border-strong"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FileTypeBadge,
+          {
+            fileName: pending?.file.name ?? filled?.stored.fileName,
+            preview: pending?.preview,
+            size
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-ui-fg truncate font-medium", children: definition.label }),
+          pending?.status === "error" ? /* @__PURE__ */ jsx("p", { className: "text-ui-danger text-xs", children: pending.error }) : pending ? (
+            // The name is the STORAGE one: `assign` renames the pick to
+            // `{slot}.{ext}` before it reaches the machine.
+            /* @__PURE__ */ jsxs("p", { className: "text-ui-muted truncate text-xs", children: [
+              pending.file.name,
+              " \xB7 ",
+              formatFileSize(pending.file.size),
+              staged && ` \xB7 ${copy.staged}`
+            ] })
+          ) : filled ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onView,
+              className: "text-ui-muted hover:text-ui-primary block max-w-full cursor-pointer truncate text-left text-xs hover:underline",
+              children: filled.stored.fileName
+            }
+          ) : /* @__PURE__ */ jsx("p", { className: "text-ui-placeholder text-xs", children: definition.hint ?? definition.extensions.map((e) => `.${e}`).join(" \xB7 ") }),
+          uploading && /* @__PURE__ */ jsx(ProgressBar, { percent: pending.progress })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept: definition.extensions.map((e) => `.${e}`).join(","),
+            className: "hidden",
+            onChange: (event) => {
+              const file = event.target.files?.[0];
+              if (file) onPick(file);
+              event.target.value = "";
+            }
+          }
+        ),
+        dropping && /* @__PURE__ */ jsx("span", { className: "bg-ui-primary text-ui-primary-fg rounded-full px-2.5 py-1 text-[11px] font-medium whitespace-nowrap", children: occupied ? copy.dropToReplace : copy.upload }),
+        !dropping && filled && !uploading && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onView,
+            className: cn(action, "text-ui-primary hover:bg-ui-primary-soft"),
+            children: copy.view
+          }
+        ),
+        uploading ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onAbort,
+            className: cn(action, "text-ui-muted hover:bg-ui-surface-muted"),
+            children: copy.cancel
+          }
+        ) : dropping ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => inputRef.current?.click(),
+              className: cn(action, "text-ui-primary hover:bg-ui-primary-soft"),
+              children: occupied ? copy.replace : copy.upload
+            }
+          ),
+          occupied && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRemove,
+              className: cn(action, "text-ui-muted hover:bg-ui-surface-muted"),
+              children: copy.remove
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var useFileViewer = ({
+  resolveUrl
+} = {}) => {
+  const [viewing, setViewing] = useState(null);
+  const close = useCallback(() => setViewing(null), []);
+  const open = useCallback((file) => setViewing(file), []);
+  return {
+    viewing,
+    open,
+    close,
+    viewerProps: useMemo(
+      () => ({ file: viewing, onClose: close, resolveUrl }),
+      [viewing, close, resolveUrl]
+    )
+  };
+};
+var SlottedUploader = ({
+  uploadOn = "select",
+  title,
+  description,
+  hideDropzone = false,
+  confirmRemove,
+  confirmReplace,
+  removeStrategy,
+  resolveViewUrl,
+  size = "md",
+  icon,
+  shortcut,
+  controllerRef,
+  onPendingChange,
+  className,
+  ...options
+}) => {
+  const slotted = useSlottedUploader({
+    ...options,
+    uploadOn: uploadOn === "select" ? "select" : "manual"
+  });
+  if (uploadOn === "submit" && !controllerRef) {
+    warnDev(
+      "slotted-submit-without-controller",
+      "uploadOn: 'submit' has no send of its own here \u2014 pass `controllerRef` and call upload() from the form's submit, or staged slots never leave."
+    );
+  }
+  const copy = useUploaderLabels(options.labels);
+  const coarse = useCoarsePointer();
+  const viewer = useFileViewer({ resolveUrl: resolveViewUrl });
+  const [pending, setPending] = useState(null);
+  const { upload, hasPending, isUploading } = slotted;
+  useEffect(() => {
+    if (!controllerRef) return;
+    controllerRef.current = { upload, hasPending, isUploading };
+    return () => {
+      controllerRef.current = null;
+    };
+  }, [controllerRef, upload, hasPending, isUploading]);
+  useEffect(() => {
+    onPendingChange?.(hasPending);
+  }, [onPendingChange, hasPending]);
+  const pick = (slot, file) => {
+    if (slot.filled && confirmReplace) {
+      setPending({ kind: "replace", slot, file });
+      return;
+    }
+    void slotted.addToSlot(slot.definition.id, file);
+  };
+  const forgetSlot = (slot) => {
+    const stored = slot.filled?.stored;
+    if (stored && removeStrategy && !options.scopes.get(options.scope).keepOnRemove) {
+      removeStrategy(stored, options.scope, options.entityId).then((deleted) => {
+        if (!deleted) options.onError?.(copy.removeFailed);
+      }).catch(() => options.onError?.(copy.removeFailed));
+    }
+    slotted.removeSlot(slot.definition.id);
+  };
+  const remove = (slot) => {
+    if (slot.filled && confirmRemove) {
+      setPending({ kind: "remove", slot });
+      return;
+    }
+    forgetSlot(slot);
+  };
+  const override = pending?.kind === "replace" ? typeof confirmReplace === "object" ? confirmReplace : {} : typeof confirmRemove === "object" ? confirmRemove : {};
+  const dialogTitle = override.title ?? (pending?.kind === "replace" ? copy.confirmReplaceTitle : copy.confirmRemoveTitle);
+  const dialogMessage = override.message ?? (pending?.kind === "replace" ? copy.confirmReplaceMessage(
+    pending.slot.filled?.stored.fileName ?? "",
+    pending.file.name
+  ) : copy.confirmRemoveMessage(pending?.slot.filled?.stored.fileName ?? ""));
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+    title && /* @__PURE__ */ jsx("p", { className: "text-ui-fg text-sm font-medium", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-ui-muted text-xs", children: description }),
+    slotted.slots.map((slot) => /* @__PURE__ */ jsx(
+      SlotRow,
+      {
+        slot,
+        onPick: (file) => pick(slot, file),
+        onRemove: () => remove(slot),
+        onAbort: () => slotted.abort(slot.definition.id),
+        onView: () => slot.filled && viewer.open(slot.filled.stored),
+        size,
+        labels: options.labels
+      },
+      slot.definition.id
+    )),
+    !hideDropzone && /* @__PURE__ */ jsxs(
+      Dropzone,
+      {
+        accept: slotted.accept,
+        multiple: true,
+        disabled: slotted.isUploading,
+        size,
+        shortcut,
+        onFiles: (files) => void slotted.addFiles(files),
+        children: [
+          icon !== null && /* @__PURE__ */ jsx("span", { className: "text-ui-placeholder group-hover/dz:text-ui-primary group-data-dragging/dz:text-ui-primary mb-1.5 inline-flex justify-center transition-all duration-200 group-hover/dz:-translate-y-0.5 group-data-dragging/dz:-translate-y-1 group-data-dragging/dz:scale-110", children: icon ?? /* @__PURE__ */ jsx(
+            UploadCloudIcon,
+            {
+              className: size === "sm" ? "h-5 w-5" : "h-7 w-7"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("p", { className: "text-ui-muted group-hover/dz:text-ui-fg text-sm font-medium transition-colors duration-200", children: coarse ? copy.bulkTapPrompt : copy.bulkDropPrompt })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(FileViewer, { ...viewer.viewerProps, labels: options.labels }),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: pending !== null,
+        title: dialogTitle,
+        message: dialogMessage,
+        onConfirm: () => {
+          if (pending?.kind === "replace") {
+            void slotted.addToSlot(pending.slot.definition.id, pending.file);
+          } else if (pending) {
+            forgetSlot(pending.slot);
+          }
+          setPending(null);
+        },
+        onCancel: () => setPending(null),
+        labels: options.labels
+      }
+    )
+  ] });
+};
+var StoredFileItem = ({
+  file,
+  onView,
+  onRemove,
+  size = "md",
+  labels
+}) => {
+  const copy = useUploaderLabels(labels);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-ui-border bg-ui-surface-subtle rounded-ui animate-ui-fade-in flex items-center gap-3 border text-sm",
+        size === "sm" ? "p-1.5" : "p-2"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(FileTypeBadge, { fileName: file.fileName, size }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-ui-fg truncate font-medium", children: file.fileName }),
+          /* @__PURE__ */ jsx("p", { className: "text-ui-muted text-xs", children: formatFileSize(file.size) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onView,
+            className: "text-ui-primary hover:bg-ui-primary-soft focus-visible:ring-ui-ring rounded-ui shrink-0 cursor-pointer px-2 py-1 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none",
+            children: copy.view
+          }
+        ),
+        onRemove && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onRemove(file),
+            className: "text-ui-muted hover:bg-ui-surface-muted hover:text-ui-fg focus-visible:ring-ui-ring rounded-ui shrink-0 cursor-pointer px-2 py-1 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none",
+            children: copy.remove
+          }
+        )
+      ]
+    }
+  );
+};
+var Uploader = ({
+  uploadOn = "select",
+  label,
+  description,
+  stored = [],
+  filesPosition = "above",
+  renderFiles,
+  onRemoveStored,
+  confirmRemove,
+  resolveViewUrl,
+  capture,
+  size = "md",
+  icon,
+  shortcut,
+  controllerRef,
+  onPendingChange,
+  removeStrategy,
+  disabled = false,
+  className,
+  ...options
+}) => {
+  const uploader = useUploader({
+    ...options,
+    uploadOn: uploadOn === "select" ? "select" : "manual"
+  });
+  const copy = useUploaderLabels(options.labels);
+  const viewer = useFileViewer({ resolveUrl: resolveViewUrl });
+  const [removing, setRemoving] = useState(null);
+  const { files, removeFile } = uploader;
+  const manual = uploadOn === "manual";
+  if (uploadOn === "submit" && !controllerRef) {
+    warnDev(
+      "uploader-submit-without-controller",
+      "uploadOn: 'submit' has no send of its own \u2014 pass `controllerRef` and call upload() from the form's submit, or use 'manual' for the zone's button."
+    );
+  }
+  const coarse = useCoarsePointer();
+  useEffect(() => {
+    if (stored.length === 0) return;
+    const keys = new Set(stored.map((file) => file.key));
+    files.filter((f) => f.status === "success" && f.stored && keys.has(f.stored.key)).forEach((f) => removeFile(f.id));
+  }, [stored, files, removeFile]);
+  const { upload, hasPending, isUploading } = uploader;
+  useEffect(() => {
+    if (!controllerRef) return;
+    controllerRef.current = { upload, hasPending, isUploading };
+    return () => {
+      controllerRef.current = null;
+    };
+  }, [controllerRef, upload, hasPending, isUploading]);
+  useEffect(() => {
+    onPendingChange?.(hasPending);
+  }, [onPendingChange, hasPending]);
+  const forgetStored = (file) => {
+    if (removeStrategy && !options.scopes.get(options.scope).keepOnRemove) {
+      removeStrategy(file, options.scope, options.entityId).then((deleted) => {
+        if (!deleted) options.onError?.(copy.removeFailed);
+      }).catch(() => options.onError?.(copy.removeFailed));
+    }
+    onRemoveStored?.(file);
+  };
+  const requestRemove = onRemoveStored || removeStrategy ? (file) => confirmRemove ? setRemoving(file) : forgetStored(file) : void 0;
+  const confirmCopy = typeof confirmRemove === "object" ? confirmRemove : {};
+  const defaultRows = /* @__PURE__ */ jsxs(Fragment, { children: [
+    stored.map((file) => /* @__PURE__ */ jsx(
+      StoredFileItem,
+      {
+        file,
+        onView: () => viewer.open(file),
+        onRemove: requestRemove,
+        size,
+        labels: options.labels
+      },
+      file.key
+    )),
+    files.map((file) => {
+      const { stored: settled } = file;
+      return /* @__PURE__ */ jsx(
+        FileItem,
+        {
+          file,
+          onRemove: () => removeFile(file.id),
+          onAbort: () => uploader.abort(file.id),
+          onView: settled ? () => viewer.open(settled) : void 0,
+          size,
+          labels: options.labels
+        },
+        file.id
+      );
+    })
+  ] });
+  const fileList = renderFiles ? renderFiles({
+    stored,
+    staged: files,
+    nodes: defaultRows,
+    isEmpty: stored.length === 0 && files.length === 0,
+    view: viewer.open,
+    remove: removeFile,
+    removeStored: requestRemove
+  }) : defaultRows;
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+    label && /* @__PURE__ */ jsx("p", { className: "text-ui-fg text-sm font-medium", children: label }),
+    filesPosition === "above" && fileList,
+    /* @__PURE__ */ jsxs(
+      Dropzone,
+      {
+        accept: uploader.accept,
+        multiple: options.multiple,
+        disabled: disabled || uploader.isUploading,
+        capture,
+        size,
+        shortcut,
+        onFiles: (incoming) => void uploader.addFiles(incoming),
+        children: [
+          icon !== null && /* @__PURE__ */ jsx("span", { className: "text-ui-placeholder group-hover/dz:text-ui-primary group-data-dragging/dz:text-ui-primary mb-1.5 inline-flex justify-center transition-all duration-200 group-hover/dz:-translate-y-0.5 group-data-dragging/dz:-translate-y-1 group-data-dragging/dz:scale-110", children: icon ?? /* @__PURE__ */ jsx(
+            UploadCloudIcon,
+            {
+              className: size === "sm" ? "h-5 w-5" : "h-7 w-7"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("p", { className: "text-ui-muted group-hover/dz:text-ui-fg text-sm font-medium transition-colors duration-200", children: coarse ? copy.tapPrompt : copy.dropPrompt }),
+          /* @__PURE__ */ jsx("p", { className: "text-ui-placeholder mt-1 text-xs", children: description ?? uploader.accept.replaceAll(",", " \xB7 ") })
+        ]
+      }
+    ),
+    filesPosition === "below" && fileList,
+    manual && uploader.hasPending && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => void uploader.upload(),
+        disabled: disabled || uploader.isUploading,
+        className: "bg-ui-primary text-ui-primary-fg hover:bg-ui-primary-hover focus-visible:ring-ui-ring rounded-ui h-10 w-full cursor-pointer px-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        children: copy.uploadAll
+      }
+    ),
+    /* @__PURE__ */ jsx(FileViewer, { ...viewer.viewerProps, labels: options.labels }),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: removing !== null,
+        title: confirmCopy.title ?? copy.confirmRemoveTitle,
+        message: confirmCopy.message ?? copy.confirmRemoveMessage(removing?.fileName ?? ""),
+        onConfirm: () => {
+          if (removing) forgetStored(removing);
+          setRemoving(null);
+        },
+        onCancel: () => setRemoving(null),
+        labels: options.labels
+      }
+    )
+  ] });
+};
+
+export { ConfirmDialog, FileItem, SlottedUploader, Uploader, useFileViewer };
+//# sourceMappingURL=ui.js.map
+//# sourceMappingURL=ui.js.map