@rpcbase/ui 0.181.0 → 0.183.0

package/dist/index15.js

@@ -1,26 +1,735 @@
-import { j as a } from "./index28.js";
-import { FilesUploadField as l } from "./index14.js";
-function n({
-  initialImages: i = [],
-  onChange: e,
-  accept: r = "image/*",
-  addButtonAriaLabel: m = "Ajouter une image",
-  removeButtonAriaLabel: o = "Supprimer l'image",
-  ...t
+import { j as r } from "./index29.js";
+import { useRef as A, useState as H, useEffect as T, useMemo as re } from "react";
+import { createPortal as ie } from "react-dom";
+import { useSensors as ke, useSensor as ae, DndContext as Ne, closestCenter as Ue, KeyboardSensor as Re, PointerSensor as Se, DragOverlay as Ie } from "./index34.js";
+import { SortableContext as Ce, rectSortingStrategy as Le, arrayMove as Ae, sortableKeyboardCoordinates as ze, useSortable as Ee } from "./index35.js";
+import { CSS as Me } from "./index36.js";
+import { Plus as Pe, X as ce, Maximize2 as Te, Loader2 as De } from "lucide-react";
+import { cn as Q } from "./index2.js";
+const ue = "rb-tenant-id", Ke = async (t) => {
+  if (typeof crypto > "u" || typeof crypto.subtle > "u") return null;
+  try {
+    const c = await crypto.subtle.digest("SHA-256", t);
+    return Array.from(new Uint8Array(c)).map((p) => p.toString(16).padStart(2, "0")).join("");
+  } catch {
+    return null;
+  }
+}, $e = () => {
+  if (typeof window > "u") return null;
+  const c = new URLSearchParams(window.location.search || "").get(ue)?.trim() ?? "";
+  return c || null;
+}, J = (t, c) => {
+  if (!c) return t;
+  const i = t.includes("?") ? "&" : "?";
+  return `${t}${i}${ue}=${encodeURIComponent(c)}`;
+}, le = async (t, c, i) => {
+  const p = await fetch(t, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", ...i?.headers ?? {} },
+    credentials: "include",
+    body: JSON.stringify(c),
+    signal: i?.signal
+  }), u = await p.json().catch(() => ({}));
+  return { ok: p.ok, status: p.status, data: u };
+}, Oe = async (t, c) => {
+  const i = await fetch(t, {
+    credentials: "include",
+    headers: c?.headers,
+    signal: c?.signal
+  }), p = await i.json().catch(() => ({}));
+  return { ok: i.ok, status: i.status, data: p };
+}, Fe = async ({
+  url: t,
+  body: c,
+  sha256: i,
+  uploadKey: p,
+  signal: u
+}) => {
+  const U = {
+    "Content-Type": "application/octet-stream"
+  };
+  i && (U["X-Chunk-SHA256"] = i), p && (U["X-Upload-Key"] = p);
+  const w = await fetch(t, {
+    method: "PUT",
+    credentials: "include",
+    headers: U,
+    body: c,
+    signal: u
+  });
+  return { ok: w.ok, status: w.status };
+}, Be = async (t, c, i) => {
+  const p = $e(), u = await le(
+    J("/api/rb/file-uploads", p),
+    {
+      filename: t.name,
+      mimeType: t.type || "application/octet-stream",
+      ...typeof i?.isPublic == "boolean" ? { isPublic: i.isPublic } : {},
+      totalSize: t.size
+    },
+    { signal: i?.signal }
+  );
+  if (!u.ok || !u.data?.ok)
+    throw new Error(u.data?.error ?? `Init failed (${u.status})`);
+  const U = String(u.data?.uploadId ?? ""), w = typeof u.data?.uploadKey == "string" ? String(u.data.uploadKey) : null, D = Number(u.data?.chunkSize ?? 0), z = Number(u.data?.chunksTotal ?? 0);
+  if (!U || !D || !z)
+    throw new Error("Upload init missing required fields");
+  const _ = async (v) => {
+    const R = v * D, g = Math.min(t.size, R + D), E = await t.slice(R, g).arrayBuffer(), P = await Ke(E), m = await Fe({
+      url: J(`/api/rb/file-uploads/${encodeURIComponent(U)}/chunks/${v}`, p),
+      body: E,
+      sha256: P ?? void 0,
+      uploadKey: w ?? void 0,
+      signal: i?.signal
+    });
+    if (m.status !== 204)
+      throw new Error(`Chunk ${v} failed (${m.status})`);
+  }, O = async (v, R = 0) => {
+    let g = R;
+    for (const S of v) {
+      await _(S), g += 1;
+      const E = Math.min(99, Math.floor(g / z * 99));
+      c(E);
+    }
+  }, X = Array.from({ length: z }, (v, R) => R);
+  await O(X, 0);
+  const l = async () => {
+    const v = await le(
+      J(`/api/rb/file-uploads/${encodeURIComponent(U)}/complete`, p),
+      {},
+      { headers: w ? { "X-Upload-Key": w } : void 0, signal: i?.signal }
+    );
+    if (v.ok && v.data?.ok) {
+      const m = String(v.data?.fileId ?? "");
+      if (!m) throw new Error("Upload completed without fileId");
+      return m;
+    }
+    const R = String(v.data?.error ?? "");
+    if (v.status !== 409 || R !== "missing_chunks")
+      throw new Error(R || `Complete failed (${v.status})`);
+    const g = await Oe(
+      J(`/api/rb/file-uploads/${encodeURIComponent(U)}/status`, p),
+      { headers: w ? { "X-Upload-Key": w } : void 0, signal: i?.signal }
+    );
+    if (!g.ok || !g.data?.ok)
+      throw new Error(g.data?.error ?? `Status failed (${g.status})`);
+    const S = Array.isArray(g.data?.received) ? g.data.received : [], E = new Set(S), P = [];
+    for (let m = 0; m < z; m += 1)
+      E.has(m) || P.push(m);
+    if (!P.length)
+      throw new Error("missing_chunks");
+    return await O(P, E.size), l();
+  }, j = await l();
+  return c(100), {
+    id: j,
+    url: J(`/api/rb/files/${encodeURIComponent(j)}`, p),
+    alt: t.name,
+    ...w ? { uploadKey: w } : {}
+  };
+};
+function _e({
+  item: t,
+  isHovered: c,
+  enableImagePreview: i,
+  renderItem: p,
+  onHoverEnter: u,
+  onHoverLeave: U,
+  onRemove: w,
+  onRetry: D,
+  startFullscreen: z,
+  isUploading: _,
+  isError: O,
+  tileClasses: X,
+  disabled: l,
+  isDraggingExternal: j,
+  removeButtonAriaLabel: v
 }) {
-  return /* @__PURE__ */ a.jsx(
-    l,
+  const { setNodeRef: R, attributes: g, listeners: S, transform: E, transition: P, isDragging: m } = Ee({
+    id: t.id,
+    disabled: l
+  }), K = A(null), $ = A(null), [F, V] = H(null), B = () => {
+    const d = K.current;
+    if (!d) return;
+    const h = d.getBoundingClientRect();
+    V({ left: h.left + h.width / 2, top: h.top - 10 });
+  };
+  T(() => {
+    if (!i || !c) {
+      V(null);
+      return;
+    }
+    B();
+    let d = 0;
+    const h = () => {
+      d && cancelAnimationFrame(d), d = requestAnimationFrame(() => {
+        d = 0, B();
+      });
+    };
+    return window.addEventListener("resize", h), window.addEventListener("scroll", h, !0), () => {
+      d && cancelAnimationFrame(d), window.removeEventListener("resize", h), window.removeEventListener("scroll", h, !0);
+    };
+  }, [i, c]);
+  const W = {
+    transform: Me.Transform.toString(E),
+    transition: P
+  }, q = p ? p({
+    file: { id: t.id, url: t.url, alt: t.alt, uploadKey: t.uploadKey },
+    previewUrl: t.previewUrl,
+    status: t.status,
+    progress: t.progress,
+    fileName: t.fileName
+  }) : i ? /* @__PURE__ */ r.jsx(
+    "img",
+    {
+      src: t.previewUrl,
+      alt: t.alt ?? "Uploaded file",
+      className: Q(
+        "size-full rounded-md object-cover",
+        _ && "opacity-75",
+        O && "grayscale"
+      )
+    }
+  ) : /* @__PURE__ */ r.jsx("div", { className: "flex size-full items-center justify-center rounded-md bg-slate-100 px-2 text-center text-[10px] font-medium text-slate-700 dark:bg-slate-800 dark:text-slate-200", children: /* @__PURE__ */ r.jsx("span", { className: "w-full truncate", children: t.fileName ?? t.alt ?? "Fichier" }) });
+  return /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      ref: (d) => {
+        K.current = d, R(d);
+      },
+      style: W,
+      className: Q(
+        X,
+        m && "z-20 ring-2 ring-primary shadow-xl",
+        j && "opacity-0",
+        !l && "cursor-grab active:cursor-grabbing",
+        m && "cursor-grabbing",
+        l && "cursor-default"
+      ),
+      onMouseEnter: () => {
+        B(), u();
+      },
+      onMouseLeave: (d) => {
+        const h = d.relatedTarget;
+        h instanceof Node && $.current?.contains(h) || U();
+      },
+      ...g,
+      ...S,
+      children: [
+        q,
+        /* @__PURE__ */ r.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              l || w(t.id);
+            },
+            disabled: l,
+            className: "absolute right-1 top-1 inline-flex size-6 items-center justify-center rounded-full bg-white text-slate-700 shadow-sm transition hover:scale-105 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:bg-slate-900 dark:text-slate-200",
+            "aria-label": v,
+            children: /* @__PURE__ */ r.jsx(ce, { className: "h-4 w-4" })
+          }
+        ),
+        i && c && F && (() => {
+          const d = /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              ref: $,
+              className: "fixed z-[60] w-52 -translate-x-1/2 -translate-y-full rounded-xl border border-slate-200 bg-white/95 p-3 shadow-2xl backdrop-blur dark:border-slate-700 dark:bg-slate-900/95",
+              style: { left: F.left, top: F.top },
+              onMouseEnter: () => {
+                B(), u();
+              },
+              onMouseLeave: (h) => {
+                const x = h.relatedTarget;
+                x instanceof Node && K.current?.contains(x) || U();
+              },
+              children: /* @__PURE__ */ r.jsxs("div", { className: "relative overflow-hidden rounded-lg", children: [
+                /* @__PURE__ */ r.jsx("img", { src: t.url, alt: t.alt ?? "Preview", className: "h-40 w-full object-cover" }),
+                /* @__PURE__ */ r.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => z(t.id),
+                    className: "absolute right-2 top-2 inline-flex items-center justify-center rounded-full bg-black/70 p-2 text-white transition hover:bg-black",
+                    "aria-label": "Plein écran",
+                    children: /* @__PURE__ */ r.jsx(Te, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ] })
+            }
+          );
+          return typeof document > "u" ? d : ie(d, document.body);
+        })(),
+        _ && /* @__PURE__ */ r.jsxs("div", { className: "absolute inset-0 z-20 flex flex-col items-center justify-center gap-2 rounded-lg bg-black/40 text-white", children: [
+          /* @__PURE__ */ r.jsx(De, { className: "h-5 w-5 animate-spin" }),
+          /* @__PURE__ */ r.jsx("div", { className: "h-1.5 w-5/6 rounded-full bg-white/20", children: /* @__PURE__ */ r.jsx("div", { className: "h-full rounded-full bg-primary", style: { width: `${t.progress}%` } }) }),
+          /* @__PURE__ */ r.jsxs("div", { className: "text-xs font-semibold", children: [
+            t.progress,
+            "%"
+          ] })
+        ] }),
+        O && /* @__PURE__ */ r.jsxs("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-lg bg-red-600/70 text-white", children: [
+          /* @__PURE__ */ r.jsx("div", { className: "text-xs font-semibold", children: "Échec" }),
+          /* @__PURE__ */ r.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => D(t.id),
+              disabled: l,
+              className: "rounded-full bg-white/90 px-3 py-1 text-xs font-semibold text-red-700 shadow-sm transition hover:bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white",
+              children: "Réessayer"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Xe(t) {
+  return URL.createObjectURL(t);
+}
+function Ze({
+  initialFiles: t = [],
+  onChange: c,
+  upload: i = Be,
+  uploadIsPublic: p = !1,
+  disabled: u = !1,
+  onUploadingChange: U,
+  accept: w,
+  renderHeader: D,
+  renderItem: z,
+  addButtonAriaLabel: _ = "Ajouter un fichier",
+  removeButtonAriaLabel: O = "Supprimer le fichier"
+}) {
+  const X = A(null), [l, j] = H(
+    () => t.map((e) => ({ ...e, previewUrl: e.url, status: "uploaded", progress: 100 }))
+  ), [v, R] = H(!1), [g, S] = H(null), [E, P] = H(null), [m, K] = H(null), $ = A(null), F = A(!0), V = A([]), B = A(t), W = A(c), q = A(U), d = A(/* @__PURE__ */ new Map()), h = A(/* @__PURE__ */ new Map()), x = A(/* @__PURE__ */ new Map()), C = A(/* @__PURE__ */ new Map()), de = ke(
+    ae(Se, { activationConstraint: { distance: 6 } }),
+    ae(Re, { coordinateGetter: ze })
+  );
+  T(() => () => {
+    for (const e of x.current.values())
+      try {
+        e.abort();
+      } catch {
+      }
+    x.current.clear(), h.current.clear(), d.current.clear();
+    for (const e of C.current.values())
+      if (typeof URL < "u")
+        try {
+          URL.revokeObjectURL(e);
+        } catch {
+        }
+    C.current.clear();
+  }, []), T(() => {
+    if (!(typeof document > "u")) {
+      if (m)
+        return document.body.style.cursor = "grabbing", () => {
+          document.body.style.cursor = "";
+        };
+      document.body.style.cursor = "";
+    }
+  }, [m]), T(() => {
+    V.current = l;
+  }, [l]), T(() => {
+    W.current = c;
+  }, [c]), T(() => {
+    q.current = U;
+  }, [U]), T(() => {
+    const e = B.current;
+    if (e.length === t.length && e.every((n, f) => {
+      const k = t[f];
+      return k && n.id === k.id && n.url === k.url && n.alt === k.alt;
+    })) return;
+    B.current = t;
+    const a = t.map((n) => ({
+      ...n,
+      previewUrl: n.url,
+      status: "uploaded",
+      progress: 100
+    })), b = new Set(a.map((n) => n.id));
+    for (const [n, f] of d.current.entries())
+      b.has(f) && d.current.delete(n);
+    const I = new Set(V.current.map((n) => n.id));
+    if (a.some((n) => {
+      const f = d.current.get(n.id);
+      return f ? I.has(f) : !1;
+    })) return;
+    const y = new Set(a.map((n) => n.id));
+    for (const n of V.current) {
+      if (y.has(n.id)) continue;
+      const f = x.current.get(n.id);
+      if (f) {
+        x.current.delete(n.id);
+        try {
+          f.abort();
+        } catch {
+        }
+      }
+      h.current.delete(n.id);
+      const k = C.current.get(n.id);
+      if (k) {
+        C.current.delete(n.id);
+        try {
+          URL.revokeObjectURL(k);
+        } catch {
+        }
+      }
+    }
+    j((n) => n.length === a.length && n.every((L, M) => {
+      const N = a[M];
+      return N && L.id === N.id && L.url === N.url && L.alt === N.alt && L.uploadKey === N.uploadKey;
+    }) ? n : (F.current = !0, a));
+  }, [t]), T(() => {
+    if (F.current) {
+      F.current = !1;
+      return;
+    }
+    W.current?.(l.map(({ id: e, url: o, alt: a, uploadKey: b }) => ({ id: e, url: o, alt: a, uploadKey: b })));
+  }, [l]), T(() => {
+    q.current?.(l.some((e) => e.status === "uploading"));
+  }, [l]), T(() => {
+    if (g === null)
+      return;
+    const e = (o) => {
+      if (o.key === "Escape") {
+        S(null);
+        return;
+      }
+      if (o.key === "ArrowRight") {
+        S((a) => a === null ? a : (a + 1) % l.length);
+        return;
+      }
+      o.key === "ArrowLeft" && S((a) => a === null ? a : (a - 1 + l.length) % l.length);
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [g, l.length]);
+  const ne = async (e) => {
+    if (u) return;
+    const a = Array.from(e).map((b) => {
+      const I = Xe(b), s = crypto.randomUUID();
+      C.current.set(s, I), h.current.set(s, b);
+      const y = {
+        id: s,
+        url: I,
+        previewUrl: I,
+        alt: b.name,
+        status: "uploading",
+        progress: 0,
+        fileName: b.name
+      };
+      j((k) => [...k, y]);
+      const n = (k) => {
+        const L = Math.max(0, Math.min(99, k));
+        j(
+          (M) => M.map(
+            (N) => N.id === s ? { ...N, progress: L, status: "uploading" } : N
+          )
+        );
+      };
+      return (async () => {
+        const k = new AbortController();
+        x.current.set(s, k);
+        try {
+          const L = await i(b, n, { signal: k.signal, isPublic: p });
+          d.current.set(s, L.id);
+          const M = C.current.get(s);
+          if (M) {
+            C.current.delete(s);
+            try {
+              URL.revokeObjectURL(M);
+            } catch {
+            }
+          }
+          x.current.delete(s), h.current.delete(s), j(
+            (N) => N.map(
+              (te) => te.id === s ? {
+                ...te,
+                ...L,
+                previewUrl: L.url,
+                url: L.url,
+                status: "uploaded",
+                progress: 100
+              } : te
+            )
+          );
+        } catch (L) {
+          if (x.current.delete(s), k.signal.aborted) {
+            h.current.delete(s);
+            const M = C.current.get(s);
+            if (M) {
+              C.current.delete(s);
+              try {
+                URL.revokeObjectURL(M);
+              } catch {
+              }
+            }
+            return;
+          }
+          console.error("Upload failed", L), j(
+            (M) => M.map(
+              (N) => N.id === s ? { ...N, status: "error", progress: Math.max(0, Math.min(99, N.progress)) } : N
+            )
+          );
+        }
+      })();
+    });
+    await Promise.allSettled(a);
+  }, fe = (e) => {
+    e.target.files && (ne(e.target.files), e.target.value = "");
+  }, pe = () => {
+    u || X.current?.click();
+  }, he = (e) => {
+    const o = x.current.get(e);
+    if (o) {
+      x.current.delete(e);
+      try {
+        o.abort();
+      } catch {
+      }
+    }
+    h.current.delete(e);
+    const a = C.current.get(e);
+    if (a) {
+      C.current.delete(e);
+      try {
+        URL.revokeObjectURL(a);
+      } catch {
+      }
+    }
+    j((b) => b.filter((I) => I.id !== e));
+  }, ge = (e) => {
+    if (u) return;
+    const o = h.current.get(e);
+    if (!o) return;
+    const a = x.current.get(e);
+    if (a) {
+      try {
+        a.abort();
+      } catch {
+      }
+      x.current.delete(e);
+    }
+    j(
+      (s) => s.map((y) => y.id === e ? { ...y, status: "uploading", progress: 0 } : y)
+    );
+    const b = (s) => {
+      const y = Math.max(0, Math.min(99, s));
+      j(
+        (n) => n.map((f) => f.id === e ? { ...f, progress: y, status: "uploading" } : f)
+      );
+    }, I = new AbortController();
+    x.current.set(e, I), (async () => {
+      try {
+        const s = await i(o, b, { signal: I.signal, isPublic: p });
+        d.current.set(e, s.id);
+        const y = C.current.get(e);
+        if (y) {
+          C.current.delete(e);
+          try {
+            URL.revokeObjectURL(y);
+          } catch {
+          }
+        }
+        x.current.delete(e), h.current.delete(e), j(
+          (n) => n.map(
+            (f) => f.id === e ? { ...f, ...s, previewUrl: s.url, url: s.url, status: "uploaded", progress: 100 } : f
+          )
+        );
+      } catch (s) {
+        if (x.current.delete(e), I.signal.aborted) return;
+        console.error("Retry failed", s), j((y) => y.map((n) => n.id === e ? { ...n, status: "error" } : n));
+      }
+    })();
+  }, me = (e) => {
+    const o = l.findIndex((a) => a.id === e);
+    o !== -1 && S(o);
+  }, be = (e) => {
+    K(String(e.active.id));
+  }, we = (e) => {
+    const { active: o, over: a } = e;
+    if (!a) {
+      K(null);
+      return;
+    }
+    const b = String(o.id), I = String(a.id);
+    b !== I && j((s) => {
+      const y = s.findIndex((f) => f.id === b), n = s.findIndex((f) => f.id === I);
+      return y === -1 || n === -1 ? s : Ae(s, y, n);
+    }), K(null);
+  }, ve = () => {
+    K(null);
+  }, se = () => {
+    $.current !== null && (window.clearTimeout($.current), $.current = null);
+  }, Y = re(() => g === null ? null : l[g] ?? null, [g, l]), xe = Q(
+    "rounded-xl border border-dashed border-slate-300 bg-white/70 p-4 shadow-sm transition-colors dark:border-slate-700 dark:bg-slate-900/60",
+    v && "border-primary ring-2 ring-primary/50",
+    u && "opacity-70"
+  ), oe = "group relative size-20 overflow-visible rounded-lg border border-slate-200 bg-slate-50 shadow-inner transition hover:shadow md:size-24 dark:border-slate-700 dark:bg-slate-800", G = re(() => {
+    if (w)
+      return Array.isArray(w) ? w.join(",") : w;
+  }, [w]), Z = re(() => {
+    if (z || !G) return !1;
+    const e = G.split(",").map((o) => o.trim()).filter(Boolean);
+    return e.length ? e.every((o) => o === "image/*" || o.startsWith("image/")) : !1;
+  }, [G, z]), ye = (e) => ({
+    file: { id: e.id, url: e.url, alt: e.alt, uploadKey: e.uploadKey },
+    previewUrl: e.previewUrl,
+    status: e.status,
+    progress: e.progress,
+    fileName: e.fileName
+  }), ee = m ? (() => {
+    const e = l.find((o) => o.id === m);
+    if (!e) return null;
+    if (z) {
+      const o = z(ye(e));
+      return o == null || o === !1 ? null : /* @__PURE__ */ r.jsx("div", { className: "pointer-events-none", children: /* @__PURE__ */ r.jsx("div", { className: "h-24 w-24 overflow-hidden rounded-lg shadow-2xl", children: o }) });
+    }
+    return Z ? /* @__PURE__ */ r.jsx("div", { className: "pointer-events-none", children: /* @__PURE__ */ r.jsx(
+      "img",
+      {
+        src: e.previewUrl,
+        alt: e.alt ?? "Dragged image",
+        className: "h-24 w-24 rounded-lg object-cover shadow-2xl"
+      }
+    ) }) : null;
+  })() : null, je = ee != null;
+  return /* @__PURE__ */ r.jsxs(
+    "div",
     {
-      initialFiles: i,
-      onChange: e,
-      accept: r,
-      addButtonAriaLabel: m,
-      removeButtonAriaLabel: o,
-      ...t
+      onDragOver: (e) => {
+        e.preventDefault(), u || R(!0);
+      },
+      onDragLeave: () => R(!1),
+      onDrop: (e) => {
+        e.preventDefault(), R(!1), e.dataTransfer.files?.length && ne(e.dataTransfer.files);
+      },
+      className: xe,
+      children: [
+        D ? /* @__PURE__ */ r.jsx("div", { className: "mb-3", children: D() }) : null,
+        /* @__PURE__ */ r.jsxs(
+          Ne,
+          {
+            sensors: u ? void 0 : de,
+            collisionDetection: Ue,
+            onDragStart: be,
+            onDragEnd: we,
+            onDragCancel: ve,
+            children: [
+              /* @__PURE__ */ r.jsx(Ce, { items: l.map((e) => e.id), strategy: Le, children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-wrap gap-3", children: [
+                l.map((e) => {
+                  const o = e.status === "uploading", a = e.status === "error";
+                  return /* @__PURE__ */ r.jsx(
+                    _e,
+                    {
+                      item: e,
+                      isHovered: E === e.id,
+                      enableImagePreview: Z,
+                      renderItem: z,
+                      onHoverEnter: () => {
+                        se(), P(e.id);
+                      },
+                      onHoverLeave: () => {
+                        se(), $.current = window.setTimeout(() => {
+                          P((b) => b === e.id ? null : b), $.current = null;
+                        }, 120);
+                      },
+                      onRemove: he,
+                      onRetry: ge,
+                      startFullscreen: me,
+                      isUploading: o,
+                      isError: a,
+                      tileClasses: oe,
+                      disabled: u,
+                      isDraggingExternal: je && m === e.id,
+                      removeButtonAriaLabel: O
+                    },
+                    e.id
+                  );
+                }),
+                /* @__PURE__ */ r.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: pe,
+                    disabled: u,
+                    className: Q(
+                      oe,
+                      "flex items-center justify-center border-dashed bg-white text-slate-500 hover:border-slate-300 dark:bg-slate-900"
+                    ),
+                    "aria-label": _,
+                    children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+                      /* @__PURE__ */ r.jsx("div", { className: "flex size-9 items-center justify-center rounded-full border border-slate-300 bg-slate-100 text-slate-600 shadow-inner dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200", children: /* @__PURE__ */ r.jsx(Pe, { className: "h-5 w-5" }) }),
+                      /* @__PURE__ */ r.jsx("span", { className: "text-xs font-medium", children: "Ajouter" })
+                    ] })
+                  }
+                )
+              ] }) }),
+              (() => {
+                const e = /* @__PURE__ */ r.jsx(Ie, { children: ee });
+                return typeof document > "u" ? e : ie(e, document.body);
+              })()
+            ]
+          }
+        ),
+        /* @__PURE__ */ r.jsx(
+          "input",
+          {
+            ref: X,
+            type: "file",
+            accept: G,
+            multiple: !0,
+            className: "hidden",
+            onChange: fe,
+            "aria-hidden": !0
+          }
+        ),
+        Z && Y && /* @__PURE__ */ r.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/90", children: [
+          /* @__PURE__ */ r.jsx(
+            "button",
+            {
+              type: "button",
+              className: "absolute left-6 top-1/2 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white shadow-lg transition hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white",
+              onClick: () => S((e) => e === null ? e : (e - 1 + l.length) % l.length),
+              "aria-label": "Précédent",
+              children: /* @__PURE__ */ r.jsx("svg", { viewBox: "0 0 24 24", className: "h-6 w-6", stroke: "currentColor", strokeWidth: 2, fill: "none", children: /* @__PURE__ */ r.jsx("path", { d: "M15 18l-6-6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            }
+          ),
+          /* @__PURE__ */ r.jsxs("div", { className: "relative max-h-[80vh] max-w-4xl", children: [
+            /* @__PURE__ */ r.jsx(
+              "img",
+              {
+                src: Y.url,
+                alt: Y.alt ?? "Fullscreen",
+                className: "max-h-[80vh] max-w-full rounded-lg object-contain shadow-2xl"
+              }
+            ),
+            /* @__PURE__ */ r.jsx(
+              "button",
+              {
+                type: "button",
+                className: "absolute right-3 top-3 inline-flex size-9 items-center justify-center rounded-full bg-black/70 text-white transition hover:bg-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white",
+                onClick: () => S(null),
+                "aria-label": "Fermer",
+                children: /* @__PURE__ */ r.jsx(ce, { className: "h-5 w-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r.jsx(
+            "button",
+            {
+              type: "button",
+              className: "absolute right-6 top-1/2 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white shadow-lg transition hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white",
+              onClick: () => S((e) => e === null ? e : (e + 1) % l.length),
+              "aria-label": "Suivant",
+              children: /* @__PURE__ */ r.jsx("svg", { viewBox: "0 0 24 24", className: "h-6 w-6", stroke: "currentColor", strokeWidth: 2, fill: "none", children: /* @__PURE__ */ r.jsx("path", { d: "M9 6l6 6-6 6", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            }
+          )
+        ] })
+      ]
     }
   );
 }
 export {
-  n as ImagesField
+  Ze as FilesUploadField
 };
 //# sourceMappingURL=index15.js.map