@blakesteve/roster 5.14.0 → 5.16.0

package/dist/components/molecules/FileUpload/FileUpload.js

@@ -1,219 +1,258 @@
 "use client";
-import { jsxs as p, jsx as n } from "react/jsx-runtime";
-import { useId as vr, useState as M, useRef as f, useCallback as U, useLayoutEffect as Y, useEffect as xr } from "react";
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { useEffect as rt, useId as $t, useState as C, useRef as y, useCallback as F, useLayoutEffect as et } from "react";
 import { cn as g } from "../../../lib/utils.js";
-import { withLabels as yr } from "../../../lib/labels.js";
-import { Button as G } from "../../atoms/Button/Button.js";
-import { Progress as br } from "../../atoms/Progress/Progress.js";
-import { acceptList as kr, formatBytes as Z, sameFile as Nr, matchesType as wr } from "./file-rules.js";
-import { useKeyFocus as $r } from "../../../internal/key-focus.js";
-const jr = {
+import { withLabels as Lt } from "../../../lib/labels.js";
+import { Button as K } from "../../atoms/Button/Button.js";
+import { Progress as Mt } from "../../atoms/Progress/Progress.js";
+import { acceptList as Dt, formatBytes as st, sameFile as nt, matchesType as Tt } from "./file-rules.js";
+import { isFileUploadRejection as Rt } from "./file-upload-rejection.js";
+import { useKeyFocus as Et } from "../../../internal/key-focus.js";
+import { isDevelopment as qt } from "../../../internal/dev.js";
+const Ct = {
   choose: "Choose photos",
+  replace: "Replace photo",
   dropHint: "or drag them here",
   dropHere: "Drop to add them",
   queued: "Waiting",
-  uploading: (s) => s === null ? "Uploading" : `Uploading, ${s}%`,
+  uploading: (e) => e === null ? "Uploading" : `Uploading, ${e}%`,
   processing: "Finishing up",
   done: "Uploaded",
   failed: "Didn't upload.",
   rejected: "Not added.",
-  remove: (s) => `Remove ${s}`,
-  retry: (s) => `Try ${s} again`,
+  remove: (e) => `Remove ${e}`,
+  retry: (e) => `Try ${e} again`,
   wrongType: () => "That type of file isn't accepted.",
-  tooLarge: (s, d) => `It's over ${Z(d)}.`,
-  tooMany: (s) => `Only ${s} can be added.`,
+  tooLarge: (e, l) => `It's over ${st(l)}.`,
+  tooMany: (e) => `Only ${e} can be added.`,
   duplicate: () => "It's already added.",
-  uploadError: (s) => s instanceof Error && s.message ? s.message : "Something went wrong.",
-  size: Z,
-  added: (s) => `${s} ${s === 1 ? "photo" : "photos"} added.`,
-  progress: (s, d) => `${s} of ${d} uploaded.`,
-  failedNotice: (s, d) => `${s} didn't upload. ${d}`,
-  rejectedNotice: (s, d) => `${s} wasn't added. ${d}`,
-  removed: (s) => `${s} removed.`
+  uploadError: (e) => e instanceof Error && e.message ? e.message : "Something went wrong.",
+  size: st,
+  added: (e) => `${e} ${e === 1 ? "photo" : "photos"} added.`,
+  progress: (e, l) => `${e} of ${l} uploaded.`,
+  failedNotice: (e, l) => `${e} didn't upload. ${l}`,
+  rejectedNotice: (e, l) => `${e} wasn't added. ${l}`,
+  removed: (e) => `${e} removed.`
 };
-function Lr({ file: s, status: d }) {
-  const [T, D] = M(!1), B = !T && (s.type.startsWith("image/") || /\.(jpe?g|png|gif|webp|avif|heic|heif)$/i.test(s.name)), $ = U(
-    (q) => {
-      if (!q) return;
-      const j = URL.createObjectURL(s);
-      return q.src = j, () => URL.revokeObjectURL(j);
+function ot(e) {
+  const [l, h] = C(!1), b = !l && (e.type.startsWith("image/") || /\.(jpe?g|png|gif|webp|avif|heic|heif)$/i.test(e.name)), w = F(
+    (m) => {
+      if (!m) return;
+      const p = URL.createObjectURL(e);
+      return m.src = p, () => URL.revokeObjectURL(p);
     },
-    [s]
-  ), v = "rst:h-14 rst:w-14 rst:shrink-0 rst:rounded-md rst:border rst:border-[var(--roster-card-border)]";
-  return B ? /* @__PURE__ */ n(
+    [e]
+  );
+  return { image: b, attach: w, broke: () => h(!0) };
+}
+const at = /* @__PURE__ */ x("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ n("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+  /* @__PURE__ */ n("circle", { cx: "9", cy: "10", r: "1.6" }),
+  /* @__PURE__ */ n("path", { d: "m21 15-4.2-4.2a1.6 1.6 0 0 0-2.3 0L7 18" })
+] });
+function zt({ file: e, status: l }) {
+  const { image: h, attach: b, broke: w } = ot(e), m = "rst:h-14 rst:w-14 rst:shrink-0 rst:rounded-md rst:border rst:border-[var(--roster-card-border)]";
+  return h ? /* @__PURE__ */ n(
     "img",
     {
-      ref: $,
+      ref: b,
       alt: "",
-      onError: () => D(!0),
-      className: g(v, "rst:object-cover", d === "rejected" && "rst:opacity-50"),
+      onError: w,
+      className: g(m, "rst:object-cover", l === "rejected" && "rst:opacity-50"),
       "data-file-thumb": "image"
     }
   ) : /* @__PURE__ */ n(
     "span",
     {
       "aria-hidden": "true",
-      className: g(v, "rst:flex rst:items-center rst:justify-center rst:text-gray-500 rst:dark:text-gray-400"),
+      className: g(m, "rst:flex rst:items-center rst:justify-center rst:text-gray-500 rst:dark:text-gray-400"),
       "data-file-thumb": "placeholder",
-      children: /* @__PURE__ */ p("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ n("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-        /* @__PURE__ */ n("circle", { cx: "9", cy: "10", r: "1.6" }),
-        /* @__PURE__ */ n("path", { d: "m21 15-4.2-4.2a1.6 1.6 0 0 0-2.3 0L7 18" })
-      ] })
+      children: at
+    }
+  );
+}
+function It({ file: e, status: l }) {
+  const { image: h, attach: b, broke: w } = ot(e);
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "rst:pointer-events-none rst:absolute rst:inset-3 rst:flex rst:items-center rst:justify-center",
+      "data-file-preview": h ? "image" : "placeholder",
+      children: h ? /* @__PURE__ */ n(
+        "img",
+        {
+          ref: b,
+          alt: "",
+          onError: w,
+          className: g("rst:h-full rst:w-full rst:rounded-md rst:object-contain", l === "rejected" && "rst:opacity-50")
+        }
+      ) : /* @__PURE__ */ n("span", { className: "rst:text-gray-500 rst:dark:text-gray-400", children: at })
     }
   );
 }
-const K = "rst:cursor-not-allowed rst:opacity-50", I = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
-function Ur({
-  label: s,
-  upload: d,
-  onChange: T,
-  accept: D = "image/*",
-  types: B,
-  maxSize: $,
-  maxFiles: v,
-  validate: q,
-  concurrency: j = 3,
-  helperText: F,
-  errorMessage: R,
-  disabled: i = !1,
-  strings: rr,
-  className: tr
+const V = "rst:cursor-not-allowed rst:opacity-50", B = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+function Gt({
+  label: e,
+  upload: l,
+  onChange: h,
+  accept: b = "image/*",
+  types: w,
+  maxSize: m,
+  maxFiles: p,
+  validate: it,
+  concurrency: J = 3,
+  helperText: O,
+  errorMessage: z,
+  disabled: u = !1,
+  strings: ct,
+  className: dt,
+  preview: P = "row"
 }) {
-  $r();
-  const a = yr(jr, rr), C = vr(), S = `${C}-label`, V = `${C}-help`, _ = `${C}-error`, [z, er] = M([]), u = f(z), sr = f(0), x = f(/* @__PURE__ */ new Map()), O = f(null), J = f(null), h = f({ upload: d, onChange: T, concurrency: j, t: a, pump: () => {
-  } }), [A, nr] = M({ text: "", n: 0 }), y = f([]), b = f(null), L = U((r, e = !1) => {
-    e && (y.current = y.current.filter((t) => !t.count)), y.current.push({ text: r, count: e }), !b.current && (b.current = setTimeout(() => {
-      b.current = null;
-      const t = y.current.map((c) => c.text).join(" ");
-      y.current = [], nr((c) => ({ text: t, n: c.n + 1 }));
+  Et();
+  const E = P === "dropzone" && p === 1;
+  rt(() => {
+    P === "dropzone" && p !== 1 && qt() && console.warn(`FileUpload: preview="dropzone" shows one file, so it takes maxFiles={1}. With maxFiles=${p}, the pictures stay on the rows.`);
+  }, [P, p]);
+  const a = Lt(Ct, ct), I = $t(), S = `${I}-label`, Q = `${I}-help`, X = `${I}-error`, [q, lt] = C([]), f = y(q), ut = y(0), v = y(/* @__PURE__ */ new Map()), A = y(null), Y = y(null), j = y({ upload: l, onChange: h, concurrency: J, t: a, pump: () => {
+  } }), [H, ft] = C({ text: "", n: 0 }), M = y([]), D = y(null), N = F((t, s = !1) => {
+    s && (M.current = M.current.filter((r) => !r.count)), M.current.push({ text: t, count: s }), !D.current && (D.current = setTimeout(() => {
+      D.current = null;
+      const r = M.current.map((i) => i.text).join(" ");
+      M.current = [], ft((i) => ({ text: r, n: i.n + 1 }));
     }, 0));
-  }, []), H = f(null), [or, ar] = M(0), Q = (r) => {
-    H.current = r, ar((e) => e + 1);
+  }, []), W = y(null), [pt, gt] = C(0), Z = (t) => {
+    W.current = t, gt((s) => s + 1);
   };
-  Y(() => {
-    const r = H.current;
-    if (!r) return;
-    H.current = null, (O.current?.querySelector(r) ?? O.current?.querySelector("[data-file-choose]"))?.focus();
-  }, [or]);
-  const k = U((r) => {
-    u.current = r, er(r), h.current.onChange?.(r);
-  }, []), N = U(
-    (r, e) => {
-      u.current.some((t) => t.id === r) && k(u.current.map((t) => t.id === r ? { ...t, ...e } : t));
+  et(() => {
+    const t = W.current;
+    if (!t) return;
+    W.current = null, (A.current?.querySelector(t) ?? A.current?.querySelector("[data-file-choose]"))?.focus();
+  }, [pt]);
+  const T = F((t) => {
+    f.current = t, lt(t), j.current.onChange?.(t);
+  }, []), $ = F(
+    (t, s) => {
+      f.current.some((r) => r.id === t) && T(f.current.map((r) => r.id === t ? { ...r, ...s } : r));
     },
-    [k]
+    [T]
   );
-  function w() {
-    const { concurrency: r } = h.current, e = u.current.filter((c) => c.status === "uploading" || c.status === "processing").length, t = u.current.filter((c) => c.status === "queued").slice(0, Math.max(0, Math.max(1, r) - e));
-    for (const c of t) cr(c);
+  function R() {
+    const { concurrency: t } = j.current, s = f.current.filter((i) => i.status === "uploading" || i.status === "processing").length, r = f.current.filter((i) => i.status === "queued").slice(0, Math.max(0, Math.max(1, t) - s));
+    for (const i of r) ht(i);
   }
-  function cr(r) {
-    const e = new AbortController();
-    x.current.set(r.id, e), N(r.id, { status: "uploading", progress: null, reason: void 0 });
-    const t = () => !e.signal.aborted && x.current.get(r.id) === e, c = {
-      onProgress: (o) => {
-        if (!t()) return;
-        const l = Math.round(Math.min(1, Math.max(0, Number.isFinite(o) ? o : 0)) * 100) / 100, m = u.current.find((mr) => mr.id === r.id);
-        m?.status === "uploading" && m.progress !== l && N(r.id, { progress: l });
+  function ht(t) {
+    const s = new AbortController();
+    v.current.set(t.id, s), $(t.id, { status: "uploading", progress: null, reason: void 0 });
+    const r = () => !s.signal.aborted && v.current.get(t.id) === s, i = {
+      onProgress: (c) => {
+        if (!r()) return;
+        const d = Math.round(Math.min(1, Math.max(0, Number.isFinite(c) ? c : 0)) * 100) / 100, o = f.current.find((L) => L.id === t.id);
+        o?.status === "uploading" && o.progress !== d && $(t.id, { progress: d });
       },
       onProcessing: () => {
-        t() && N(r.id, { status: "processing" });
+        r() && $(t.id, { status: "processing" });
       },
-      signal: e.signal
+      signal: s.signal
     };
-    new Promise((o) => o(h.current.upload(r.file, c))).then(
-      (o) => {
-        if (!t()) return;
-        x.current.delete(r.id), N(r.id, { status: "done", progress: 1, result: o });
-        const l = u.current.filter((m) => m.status !== "rejected");
-        L(h.current.t.progress(l.filter((m) => m.status === "done").length, l.length), !0), w();
+    new Promise((c) => c(j.current.upload(t.file, i))).then(
+      (c) => {
+        if (!r()) return;
+        v.current.delete(t.id), $(t.id, { status: "done", progress: 1, result: c });
+        const d = f.current.filter((o) => o.status !== "rejected");
+        N(j.current.t.progress(d.filter((o) => o.status === "done").length, d.length), !0), R();
       },
-      (o) => {
-        if (!t()) return;
-        x.current.delete(r.id);
-        const l = h.current.t.uploadError(o);
-        N(r.id, { status: "failed", reason: l }), L(h.current.t.failedNotice(r.file.name, l)), w();
+      (c) => {
+        if (!r()) return;
+        v.current.delete(t.id);
+        const { t: d } = j.current;
+        if (Rt(c)) {
+          const o = c.message, L = typeof o == "string" && o ? o : d.uploadError(c);
+          $(t.id, { status: "rejected", progress: null, reason: L }), N(d.rejectedNotice(t.file.name, L));
+        } else {
+          const o = d.uploadError(c);
+          $(t.id, { status: "failed", reason: o }), N(d.failedNotice(t.file.name, o));
+        }
+        R();
       }
     );
   }
-  Y(() => {
-    h.current = { upload: d, onChange: T, concurrency: j, t: a, pump: w };
-  }), xr(() => {
-    const r = x.current;
-    return u.current.some((t) => (t.status === "uploading" || t.status === "processing") && !r.has(t.id)) && (k(
-      u.current.map(
-        (t) => (t.status === "uploading" || t.status === "processing") && !r.has(t.id) ? { ...t, status: "queued", progress: null } : t
+  et(() => {
+    j.current = { upload: l, onChange: h, concurrency: J, t: a, pump: R };
+  }), rt(() => {
+    const t = v.current;
+    return f.current.some((r) => (r.status === "uploading" || r.status === "processing") && !t.has(r.id)) && (T(
+      f.current.map(
+        (r) => (r.status === "uploading" || r.status === "processing") && !t.has(r.id) ? { ...r, status: "queued", progress: null } : r
       )
-    ), h.current.pump()), () => {
-      for (const t of r.values()) t.abort();
-      r.clear(), b.current && clearTimeout(b.current), b.current = null, y.current = [];
+    ), j.current.pump()), () => {
+      for (const r of t.values()) r.abort();
+      t.clear(), D.current && clearTimeout(D.current), D.current = null, M.current = [];
     };
-  }, [k]);
-  const ir = B ?? kr(D), dr = (r, e) => {
-    if (e.some((c) => Nr(c.file, r))) return a.duplicate(r);
-    const t = q?.(r);
-    if (t) return t;
-    if (!wr(r, ir)) return a.wrongType(r);
-    if ($ !== void 0 && r.size > $) return a.tooLarge(r, $);
-    if (v !== void 0 && e.length >= v) return a.tooMany(v);
-  }, X = (r) => {
-    if (i || r.length === 0) return;
-    const e = u.current.filter((o) => o.status !== "rejected"), t = [];
-    for (const o of r) {
-      const l = dr(o, [...e, ...t.filter((m) => m.status !== "rejected")]);
-      t.push({ id: `${C}-file-${sr.current++}`, file: o, status: l ? "rejected" : "queued", progress: null, reason: l });
+  }, [T]);
+  const mt = w ?? Dt(b), vt = (t, s) => {
+    if (s.some((i) => nt(i.file, t))) return a.duplicate(t);
+    const r = it?.(t);
+    if (r) return r;
+    if (!Tt(t, mt)) return a.wrongType(t);
+    if (m !== void 0 && t.size > m) return a.tooLarge(t, m);
+    if (p !== void 0 && s.length >= p) return a.tooMany(p);
+  }, tt = (t) => {
+    if (u || t.length === 0) return;
+    const s = E ? f.current.find((o) => o.status !== "rejected") : void 0, r = f.current.filter((o) => o.status !== "rejected" && o !== s), i = [];
+    for (const o of t) {
+      const L = s && nt(s.file, o) ? a.duplicate(o) : vt(o, [...r, ...i.filter((Nt) => Nt.status !== "rejected")]);
+      i.push({ id: `${I}-file-${ut.current++}`, file: o, status: L ? "rejected" : "queued", progress: null, reason: L });
     }
-    k([...u.current, ...t]);
-    const c = t.filter((o) => o.status === "queued").length;
-    c && L(a.added(c));
-    for (const o of t) o.reason && L(a.rejectedNotice(o.file.name, o.reason));
-    w();
-  }, ur = (r) => {
-    if (i) return;
-    const e = u.current, t = e.findIndex((o) => o.id === r);
-    if (t < 0) return;
-    x.current.get(r)?.abort(), x.current.delete(r);
-    const c = e[t + 1] ?? e[t - 1];
-    k(e.filter((o) => o.id !== r)), L(a.removed(e[t].file.name)), Q(c ? `[data-file-remove="${c.id}"]` : "[data-file-choose]"), w();
-  }, lr = (r) => {
-    i || (N(r, { status: "queued", progress: null, reason: void 0 }), Q(`[data-file-remove="${r}"]`), w());
-  }, [fr, P] = M(0), E = (r) => Array.from(r.dataTransfer?.types ?? []).includes("Files"), pr = {
-    onDragEnter: (r) => {
-      E(r) && (r.preventDefault(), P((e) => e + 1));
+    const c = i.filter((o) => o.status === "queued").length, d = c ? s : void 0;
+    d && (v.current.get(d.id)?.abort(), v.current.delete(d.id)), T([...f.current.filter((o) => o !== d), ...i]), d && N(a.removed(d.file.name)), c && N(a.added(c));
+    for (const o of i) o.reason && N(a.rejectedNotice(o.file.name, o.reason));
+    R();
+  }, yt = (t) => {
+    if (u) return;
+    const s = f.current, r = s.findIndex((c) => c.id === t);
+    if (r < 0) return;
+    v.current.get(t)?.abort(), v.current.delete(t);
+    const i = s[r + 1] ?? s[r - 1];
+    T(s.filter((c) => c.id !== t)), N(a.removed(s[r].file.name)), Z(i ? `[data-file-remove="${i.id}"]` : "[data-file-choose]"), R();
+  }, xt = (t) => {
+    u || ($(t, { status: "queued", progress: null, reason: void 0 }), Z(`[data-file-remove="${t}"]`), R());
+  }, [bt, _] = C(0), U = (t) => Array.from(t.dataTransfer?.types ?? []).includes("Files"), kt = {
+    onDragEnter: (t) => {
+      U(t) && (t.preventDefault(), _((s) => s + 1));
     },
-    onDragOver: (r) => {
-      E(r) && (r.preventDefault(), r.dataTransfer.dropEffect = i ? "none" : "copy");
+    onDragOver: (t) => {
+      U(t) && (t.preventDefault(), t.dataTransfer.dropEffect = u ? "none" : "copy");
     },
-    onDragLeave: (r) => {
-      E(r) && P((e) => Math.max(0, e - 1));
+    onDragLeave: (t) => {
+      U(t) && _((s) => Math.max(0, s - 1));
     },
-    onDrop: (r) => {
-      E(r) && (r.preventDefault(), P(0), X(Array.from(r.dataTransfer.files)));
+    onDrop: (t) => {
+      U(t) && (t.preventDefault(), _(0), tt(Array.from(t.dataTransfer.files)));
     }
-  }, W = fr > 0 && !i, gr = (r) => {
-    switch (r.status) {
+  }, G = bt > 0 && !u, wt = (t) => {
+    switch (t.status) {
       case "queued":
         return a.queued;
       case "uploading":
-        return a.uploading(r.progress === null ? null : Math.round(r.progress * 100));
+        return a.uploading(t.progress === null ? null : Math.round(t.progress * 100));
       case "processing":
         return a.processing;
       case "done":
         return a.done;
       case "failed":
-        return `${a.failed} ${r.reason ?? ""}`.trim();
+        return `${a.failed} ${t.reason ?? ""}`.trim();
       case "rejected":
-        return `${a.rejected} ${r.reason ?? ""}`.trim();
+        return `${a.rejected} ${t.reason ?? ""}`.trim();
     }
-  }, hr = [F ? V : null, R ? _ : null].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ p(
+  }, jt = [O ? Q : null, z ? X : null].filter(Boolean).join(" ") || void 0, k = E ? q.find((t) => t.status !== "rejected") ?? q.at(-1) : void 0;
+  return /* @__PURE__ */ x(
     "div",
     {
-      ref: O,
+      ref: A,
       role: "group",
       "aria-labelledby": S,
-      className: g("rst:font-ui rst:w-full", tr),
+      className: g("rst:font-ui rst:w-full", dt),
       "data-file-upload": "",
       children: [
         /* @__PURE__ */ n(
@@ -222,58 +261,69 @@ function Ur({
             id: S,
             className: g(
               "rst:mb-1.5 rst:text-left rst:text-sm rst:font-medium rst:leading-none rst:text-[var(--roster-control-text)]",
-              i && "rst:opacity-70"
+              u && "rst:opacity-70"
             ),
-            children: s
+            children: e
           }
         ),
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ x(
           "div",
           {
-            ...pr,
+            ...kt,
             "data-file-drop": "",
-            "data-dragging": W ? "" : void 0,
+            "data-dragging": G ? "" : void 0,
             className: g(
               "rst:flex rst:flex-col rst:items-center rst:justify-center rst:gap-2 rst:rounded-lg rst:border-2 rst:border-dashed rst:px-4 rst:py-6 rst:text-center rst:transition-colors rst:motion-reduce:transition-none",
-              W ? "rst:border-primary-500 rst:bg-primary-500/10" : R ? "rst:border-error-500 rst:dark:border-error-400" : "rst:border-gray-300 rst:dark:border-gray-600"
+              /* One height with a picture or without, so nothing below moves when
+                 it arrives; the button sits at the foot of a picture. */
+              E && "rst:relative rst:h-[var(--roster-file-preview-height,13rem)]",
+              E && k && "rst:justify-end",
+              G ? "rst:border-primary-500 rst:bg-primary-500/10" : z ? "rst:border-error-500 rst:dark:border-error-400" : "rst:border-gray-300 rst:dark:border-gray-600"
             ),
             children: [
+              k && /* @__PURE__ */ n(It, { file: k.file, status: k.status }, k.id),
               /* @__PURE__ */ n(
-                G,
+                K,
                 {
                   type: "button",
                   variant: "outline",
                   colorScheme: "neutral",
                   size: "lg",
-                  className: g("rst:px-5", i && K),
-                  "aria-disabled": i || void 0,
-                  "aria-describedby": hr,
-                  onClick: () => J.current?.click(),
+                  className: g(
+                    "rst:px-5",
+                    u && V,
+                    /* Over a picture: above it, on a surface of its own, so it reads
+                       whatever the photo is. */
+                    k && "rst:relative rst:z-10 rst:bg-[var(--roster-card-bg)] rst:dark:hover:bg-gray-800"
+                  ),
+                  "aria-disabled": u || void 0,
+                  "aria-describedby": jt,
+                  onClick: () => Y.current?.click(),
                   "data-file-choose": "",
-                  startIcon: /* @__PURE__ */ n("svg", { ...I, "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M12 16V4M7 9l5-5 5 5M5 20h14" }) }),
-                  children: a.choose
+                  startIcon: /* @__PURE__ */ n("svg", { ...B, "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M12 16V4M7 9l5-5 5 5M5 20h14" }) }),
+                  children: k ? a.replace : a.choose
                 }
               ),
-              /* @__PURE__ */ n(
+              !k && /* @__PURE__ */ n(
                 "p",
                 {
                   className: "rst:hidden rst:text-xs rst:text-gray-600 rst:pointer-fine:block rst:dark:text-gray-400",
                   "data-file-drop-hint": "",
-                  children: W ? a.dropHere : a.dropHint
+                  children: G ? a.dropHere : a.dropHint
                 }
               ),
               /* @__PURE__ */ n(
                 "input",
                 {
-                  ref: J,
+                  ref: Y,
                   type: "file",
                   hidden: !0,
                   tabIndex: -1,
-                  accept: D,
-                  multiple: v !== 1,
-                  disabled: i,
-                  onChange: (r) => {
-                    X(Array.from(r.currentTarget.files ?? [])), r.currentTarget.value = "";
+                  accept: b,
+                  multiple: p !== 1,
+                  disabled: u,
+                  onChange: (t) => {
+                    tt(Array.from(t.currentTarget.files ?? [])), t.currentTarget.value = "";
                   },
                   "data-file-input": ""
                 }
@@ -281,87 +331,87 @@ function Ur({
             ]
           }
         ),
-        F && /* @__PURE__ */ n("p", { id: V, className: "rst:mt-1.5 rst:text-left rst:text-xs rst:text-gray-500 rst:dark:text-gray-400", children: F }),
-        R && /* @__PURE__ */ n("p", { id: _, className: "rst:mt-1.5 rst:text-left rst:text-xs rst:font-medium rst:text-error-600 rst:dark:text-error-400", children: R }),
-        z.length > 0 && /* @__PURE__ */ n("ul", { className: "rst:mt-3 rst:flex rst:flex-col rst:gap-2", "aria-labelledby": S, children: z.map((r) => {
-          const e = r.status === "failed" || r.status === "rejected", t = r.status === "uploading" || r.status === "processing" || r.status === "queued";
-          return /* @__PURE__ */ p(
+        O && /* @__PURE__ */ n("p", { id: Q, className: "rst:mt-1.5 rst:text-left rst:text-xs rst:text-gray-500 rst:dark:text-gray-400", children: O }),
+        z && /* @__PURE__ */ n("p", { id: X, className: "rst:mt-1.5 rst:text-left rst:text-xs rst:font-medium rst:text-error-600 rst:dark:text-error-400", children: z }),
+        q.length > 0 && /* @__PURE__ */ n("ul", { className: "rst:mt-3 rst:flex rst:flex-col rst:gap-2", "aria-labelledby": S, children: q.map((t) => {
+          const s = t.status === "failed" || t.status === "rejected", r = t.status === "uploading" || t.status === "processing" || t.status === "queued";
+          return /* @__PURE__ */ x(
             "li",
             {
-              "data-file-item": r.id,
-              "data-status": r.status,
+              "data-file-item": t.id,
+              "data-status": t.status,
               className: "rst:flex rst:items-center rst:gap-3 rst:rounded-md rst:border rst:border-[var(--roster-card-border)] rst:p-2",
               children: [
-                /* @__PURE__ */ n(Lr, { file: r.file, status: r.status }),
-                /* @__PURE__ */ p("div", { className: "rst:min-w-0 rst:flex-1 rst:text-left", children: [
-                  /* @__PURE__ */ n("p", { className: "rst:truncate rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]", title: r.file.name, children: r.file.name }),
-                  /* @__PURE__ */ p(
+                !E && /* @__PURE__ */ n(zt, { file: t.file, status: t.status }),
+                /* @__PURE__ */ x("div", { className: "rst:min-w-0 rst:flex-1 rst:text-left", children: [
+                  /* @__PURE__ */ n("p", { className: "rst:truncate rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]", title: t.file.name, children: t.file.name }),
+                  /* @__PURE__ */ x(
                     "p",
                     {
                       className: g(
                         "rst:mt-0.5 rst:flex rst:items-start rst:gap-1 rst:text-xs",
-                        e ? "rst:text-error-600 rst:dark:text-error-400" : "rst:text-gray-600 rst:dark:text-gray-400"
+                        s ? "rst:text-error-600 rst:dark:text-error-400" : "rst:text-gray-600 rst:dark:text-gray-400"
                       ),
                       "data-file-status": "",
                       children: [
-                        r.status === "done" && /* @__PURE__ */ n("svg", { ...I, width: 14, height: 14, "aria-hidden": "true", className: "rst:mt-px rst:shrink-0 rst:text-success-600 rst:dark:text-success-400", children: /* @__PURE__ */ n("path", { d: "M20 6 9 17l-5-5" }) }),
-                        /* @__PURE__ */ p("span", { children: [
-                          /* @__PURE__ */ n("span", { className: "rst:tabular-nums", children: a.size(r.file.size) }),
+                        t.status === "done" && /* @__PURE__ */ n("svg", { ...B, width: 14, height: 14, "aria-hidden": "true", className: "rst:mt-px rst:shrink-0 rst:text-success-600 rst:dark:text-success-400", children: /* @__PURE__ */ n("path", { d: "M20 6 9 17l-5-5" }) }),
+                        /* @__PURE__ */ x("span", { children: [
+                          /* @__PURE__ */ n("span", { className: "rst:tabular-nums", children: a.size(t.file.size) }),
                           /* @__PURE__ */ n("span", { "aria-hidden": "true", children: " · " }),
-                          gr(r)
+                          wt(t)
                         ] })
                       ]
                     }
                   ),
-                  t && /* @__PURE__ */ n("div", { className: "rst:mt-1.5", "data-file-progress": "", children: /* @__PURE__ */ n(
-                    br,
+                  r && /* @__PURE__ */ n("div", { className: "rst:mt-1.5", "data-file-progress": "", children: /* @__PURE__ */ n(
+                    Mt,
                     {
                       size: "sm",
-                      value: r.status === "processing" ? 100 : r.status === "uploading" ? (r.progress ?? 0) * 100 : 0,
-                      busy: r.status === "processing" || r.status === "uploading" && r.progress === null,
+                      value: t.status === "processing" ? 100 : t.status === "uploading" ? (t.progress ?? 0) * 100 : 0,
+                      busy: t.status === "processing" || t.status === "uploading" && t.progress === null,
                       announce: !1
                     }
                   ) })
                 ] }),
-                r.status === "failed" && /* @__PURE__ */ n(
-                  G,
+                t.status === "failed" && /* @__PURE__ */ n(
+                  K,
                   {
                     type: "button",
                     variant: "ghost",
                     colorScheme: "neutral",
                     size: "icon",
-                    className: g("rst:h-11 rst:w-11", i && K),
-                    "aria-disabled": i || void 0,
-                    "aria-label": a.retry(r.file.name),
-                    onClick: () => lr(r.id),
-                    "data-file-retry": r.id,
-                    children: /* @__PURE__ */ p("svg", { ...I, "aria-hidden": "true", children: [
+                    className: g("rst:h-11 rst:w-11", u && V),
+                    "aria-disabled": u || void 0,
+                    "aria-label": a.retry(t.file.name),
+                    onClick: () => xt(t.id),
+                    "data-file-retry": t.id,
+                    children: /* @__PURE__ */ x("svg", { ...B, "aria-hidden": "true", children: [
                       /* @__PURE__ */ n("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }),
                       /* @__PURE__ */ n("path", { d: "M3 3v5h5" })
                     ] })
                   }
                 ),
                 /* @__PURE__ */ n(
-                  G,
+                  K,
                   {
                     type: "button",
                     variant: "ghost",
                     colorScheme: "neutral",
                     size: "icon",
-                    className: g("rst:h-11 rst:w-11", i && K),
-                    "aria-disabled": i || void 0,
-                    "aria-label": a.remove(r.file.name),
-                    onClick: () => ur(r.id),
-                    "data-file-remove": r.id,
-                    children: /* @__PURE__ */ n("svg", { ...I, "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M18 6 6 18M6 6l12 12" }) })
+                    className: g("rst:h-11 rst:w-11", u && V),
+                    "aria-disabled": u || void 0,
+                    "aria-label": a.remove(t.file.name),
+                    onClick: () => yt(t.id),
+                    "data-file-remove": t.id,
+                    children: /* @__PURE__ */ n("svg", { ...B, "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M18 6 6 18M6 6l12 12" }) })
                   }
                 )
               ]
             },
-            r.id
+            t.id
           );
         }) }),
-        /* @__PURE__ */ p(
+        /* @__PURE__ */ x(
           "div",
           {
             role: "status",
@@ -369,10 +419,10 @@ function Ur({
             "aria-atomic": "true",
             className: "rst:sr-only",
             "data-file-live": "",
-            "data-file-live-n": A.n,
+            "data-file-live-n": H.n,
             children: [
-              A.text,
-              A.n % 2 ? " " : ""
+              H.text,
+              H.n % 2 ? " " : ""
             ]
           }
         )
@@ -381,5 +431,5 @@ function Ur({
   );
 }
 export {
-  Ur as FileUpload
+  Gt as FileUpload
 };