@blakesteve/roster 5.6.0 → 5.7.0

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

@@ -1,10 +1,11 @@
 "use client";
-import { jsxs as g, jsx as n } from "react/jsx-runtime";
-import { useId as vr, useState as L, useRef as p, useCallback as U, useLayoutEffect as Y, useEffect as xr } from "react";
-import { cn as f } from "../../../lib/utils.js";
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { useId as vr, useState as L, useRef as f, useCallback as U, useLayoutEffect as Y, useEffect as xr } from "react";
+import { cn as g } from "../../../lib/utils.js";
 import { Button as G } from "../../atoms/Button/Button.js";
-import { formatBytes as Z, acceptList as yr, sameFile as br, matchesType as kr } from "./file-rules.js";
-const Nr = {
+import { Progress as yr } from "../../atoms/Progress/Progress.js";
+import { formatBytes as Z, acceptList as br, sameFile as kr, matchesType as Nr } from "./file-rules.js";
+const wr = {
   choose: "Choose photos",
   dropHint: "or drag them here",
   dropHere: "Drop to add them",
@@ -28,7 +29,7 @@ const Nr = {
   rejectedNotice: (s, d) => `${s} wasn't added. ${d}`,
   removed: (s) => `${s} removed.`
 };
-function wr({ file: s, status: d }) {
+function $r({ file: s, status: d }) {
   const [T, D] = L(!1), B = !T && (s.type.startsWith("image/") || /\.(jpe?g|png|gif|webp|avif|heic|heif)$/i.test(s.name)), $ = U(
     (q) => {
       if (!q) return;
@@ -43,16 +44,16 @@ function wr({ file: s, status: d }) {
       ref: $,
       alt: "",
       onError: () => D(!0),
-      className: f(v, "rst:object-cover", d === "rejected" && "rst:opacity-50"),
+      className: g(v, "rst:object-cover", d === "rejected" && "rst:opacity-50"),
       "data-file-thumb": "image"
     }
   ) : /* @__PURE__ */ n(
     "span",
     {
       "aria-hidden": "true",
-      className: f(v, "rst:flex rst:items-center rst:justify-center rst:text-gray-500 rst:dark:text-gray-400"),
+      className: g(v, "rst:flex rst:items-center rst:justify-center rst:text-gray-500 rst:dark:text-gray-400"),
       "data-file-thumb": "placeholder",
-      children: /* @__PURE__ */ g("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      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" })
@@ -61,7 +62,7 @@ function wr({ file: s, status: d }) {
   );
 }
 const V = "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 Dr({
+function Rr({
   label: s,
   upload: d,
   onChange: T,
@@ -73,72 +74,72 @@ function Dr({
   concurrency: j = 3,
   helperText: S,
   errorMessage: R,
-  disabled: c = !1,
+  disabled: i = !1,
   strings: rr,
   className: tr
 }) {
-  const o = { ...Nr, ...rr }, C = vr(), F = `${C}-label`, X = `${C}-help`, _ = `${C}-error`, [z, er] = L([]), l = p(z), sr = p(0), x = p(/* @__PURE__ */ new Map()), O = p(null), J = p(null), h = p({ upload: d, onChange: T, concurrency: j, t: o, pump: () => {
-  } }), [A, nr] = L({ text: "", n: 0 }), y = p([]), b = p(null), M = U((r, e = !1) => {
+  const a = { ...wr, ...rr }, C = vr(), z = `${C}-label`, _ = `${C}-help`, J = `${C}-error`, [F, er] = L([]), u = f(F), sr = f(0), x = f(/* @__PURE__ */ new Map()), O = f(null), K = f(null), h = f({ upload: d, onChange: T, concurrency: j, t: a, pump: () => {
+  } }), [A, nr] = L({ text: "", n: 0 }), y = f([]), b = f(null), M = 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((i) => i.text).join(" ");
-      y.current = [], nr((i) => ({ text: t, n: i.n + 1 }));
+      const t = y.current.map((c) => c.text).join(" ");
+      y.current = [], nr((c) => ({ text: t, n: c.n + 1 }));
     }, 0));
-  }, []), H = p(null), [ar, or] = L(0), K = (r) => {
-    H.current = r, or((e) => e + 1);
+  }, []), H = f(null), [or, ar] = L(0), Q = (r) => {
+    H.current = r, ar((e) => e + 1);
   };
   Y(() => {
     const r = H.current;
     if (!r) return;
     H.current = null, (O.current?.querySelector(r) ?? O.current?.querySelector("[data-file-choose]"))?.focus();
-  }, [ar]);
+  }, [or]);
   const k = U((r) => {
-    l.current = r, er(r), h.current.onChange?.(r);
+    u.current = r, er(r), h.current.onChange?.(r);
   }, []), N = U(
     (r, e) => {
-      l.current.some((t) => t.id === r) && k(l.current.map((t) => t.id === r ? { ...t, ...e } : t));
+      u.current.some((t) => t.id === r) && k(u.current.map((t) => t.id === r ? { ...t, ...e } : t));
     },
     [k]
   );
   function w() {
-    const { concurrency: r } = h.current, e = l.current.filter((i) => i.status === "uploading" || i.status === "processing").length, t = l.current.filter((i) => i.status === "queued").slice(0, Math.max(0, Math.max(1, r) - e));
-    for (const i of t) ir(i);
+    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 ir(r) {
+  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, i = {
-      onProgress: (a) => {
+    const t = () => !e.signal.aborted && x.current.get(r.id) === e, c = {
+      onProgress: (o) => {
         if (!t()) return;
-        const u = Math.round(Math.min(1, Math.max(0, Number.isFinite(a) ? a : 0)) * 100) / 100, m = l.current.find((mr) => mr.id === r.id);
-        m?.status === "uploading" && m.progress !== u && N(r.id, { progress: u });
+        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 });
       },
       onProcessing: () => {
         t() && N(r.id, { status: "processing" });
       },
       signal: e.signal
     };
-    new Promise((a) => a(h.current.upload(r.file, i))).then(
-      (a) => {
+    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: a });
-        const u = l.current.filter((m) => m.status !== "rejected");
-        M(h.current.t.progress(u.filter((m) => m.status === "done").length, u.length), !0), w();
+        x.current.delete(r.id), N(r.id, { status: "done", progress: 1, result: o });
+        const l = u.current.filter((m) => m.status !== "rejected");
+        M(h.current.t.progress(l.filter((m) => m.status === "done").length, l.length), !0), w();
       },
-      (a) => {
+      (o) => {
         if (!t()) return;
         x.current.delete(r.id);
-        const u = h.current.t.uploadError(a);
-        N(r.id, { status: "failed", reason: u }), M(h.current.t.failedNotice(r.file.name, u)), w();
+        const l = h.current.t.uploadError(o);
+        N(r.id, { status: "failed", reason: l }), M(h.current.t.failedNotice(r.file.name, l)), w();
       }
     );
   }
   Y(() => {
-    h.current = { upload: d, onChange: T, concurrency: j, t: o, pump: w };
+    h.current = { upload: d, onChange: T, concurrency: j, t: a, pump: w };
   }), xr(() => {
     const r = x.current;
-    return l.current.some((t) => (t.status === "uploading" || t.status === "processing") && !r.has(t.id)) && (k(
-      l.current.map(
+    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
       )
     ), h.current.pump()), () => {
@@ -146,92 +147,92 @@ function Dr({
       r.clear(), b.current && clearTimeout(b.current), b.current = null, y.current = [];
     };
   }, [k]);
-  const cr = B ?? yr(D), dr = (r, e) => {
-    if (e.some((i) => br(i.file, r))) return o.duplicate(r);
+  const ir = B ?? br(D), dr = (r, e) => {
+    if (e.some((c) => kr(c.file, r))) return a.duplicate(r);
     const t = q?.(r);
     if (t) return t;
-    if (!kr(r, cr)) return o.wrongType(r);
-    if ($ !== void 0 && r.size > $) return o.tooLarge(r, $);
-    if (v !== void 0 && e.length >= v) return o.tooMany(v);
-  }, Q = (r) => {
-    if (c || r.length === 0) return;
-    const e = l.current.filter((a) => a.status !== "rejected"), t = [];
-    for (const a of r) {
-      const u = dr(a, [...e, ...t.filter((m) => m.status !== "rejected")]);
-      t.push({ id: `${C}-file-${sr.current++}`, file: a, status: u ? "rejected" : "queued", progress: null, reason: u });
+    if (!Nr(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 });
     }
-    k([...l.current, ...t]);
-    const i = t.filter((a) => a.status === "queued").length;
-    i && M(o.added(i));
-    for (const a of t) a.reason && M(o.rejectedNotice(a.file.name, a.reason));
+    k([...u.current, ...t]);
+    const c = t.filter((o) => o.status === "queued").length;
+    c && M(a.added(c));
+    for (const o of t) o.reason && M(a.rejectedNotice(o.file.name, o.reason));
     w();
-  }, lr = (r) => {
-    if (c) return;
-    const e = l.current, t = e.findIndex((a) => a.id === r);
+  }, 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 i = e[t + 1] ?? e[t - 1];
-    k(e.filter((a) => a.id !== r)), M(o.removed(e[t].file.name)), K(i ? `[data-file-remove="${i.id}"]` : "[data-file-choose]"), w();
-  }, ur = (r) => {
-    c || (N(r, { status: "queued", progress: null, reason: void 0 }), K(`[data-file-remove="${r}"]`), w());
-  }, [fr, W] = L(0), E = (r) => Array.from(r.dataTransfer?.types ?? []).includes("Files"), pr = {
+    const c = e[t + 1] ?? e[t - 1];
+    k(e.filter((o) => o.id !== r)), M(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] = L(0), E = (r) => Array.from(r.dataTransfer?.types ?? []).includes("Files"), pr = {
     onDragEnter: (r) => {
-      E(r) && (r.preventDefault(), W((e) => e + 1));
+      E(r) && (r.preventDefault(), P((e) => e + 1));
     },
     onDragOver: (r) => {
-      E(r) && (r.preventDefault(), r.dataTransfer.dropEffect = c ? "none" : "copy");
+      E(r) && (r.preventDefault(), r.dataTransfer.dropEffect = i ? "none" : "copy");
     },
     onDragLeave: (r) => {
-      E(r) && W((e) => Math.max(0, e - 1));
+      E(r) && P((e) => Math.max(0, e - 1));
     },
     onDrop: (r) => {
-      E(r) && (r.preventDefault(), W(0), Q(Array.from(r.dataTransfer.files)));
+      E(r) && (r.preventDefault(), P(0), X(Array.from(r.dataTransfer.files)));
     }
-  }, P = fr > 0 && !c, gr = (r) => {
+  }, W = fr > 0 && !i, gr = (r) => {
     switch (r.status) {
       case "queued":
-        return o.queued;
+        return a.queued;
       case "uploading":
-        return o.uploading(r.progress === null ? null : Math.round(r.progress * 100));
+        return a.uploading(r.progress === null ? null : Math.round(r.progress * 100));
       case "processing":
-        return o.processing;
+        return a.processing;
       case "done":
-        return o.done;
+        return a.done;
       case "failed":
-        return `${o.failed} ${r.reason ?? ""}`.trim();
+        return `${a.failed} ${r.reason ?? ""}`.trim();
       case "rejected":
-        return `${o.rejected} ${r.reason ?? ""}`.trim();
+        return `${a.rejected} ${r.reason ?? ""}`.trim();
     }
-  }, hr = [S ? X : null, R ? _ : null].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ g(
+  }, hr = [S ? _ : null, R ? J : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ p(
     "div",
     {
       ref: O,
       role: "group",
-      "aria-labelledby": F,
-      className: f("rst:font-ui rst:w-full", tr),
+      "aria-labelledby": z,
+      className: g("rst:font-ui rst:w-full", tr),
       "data-file-upload": "",
       children: [
         /* @__PURE__ */ n(
           "p",
           {
-            id: F,
-            className: f(
+            id: z,
+            className: g(
               "rst:mb-1.5 rst:text-left rst:text-sm rst:font-medium rst:leading-none rst:text-[var(--roster-control-text)]",
-              c && "rst:opacity-70"
+              i && "rst:opacity-70"
             ),
             children: s
           }
         ),
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ p(
           "div",
           {
             ...pr,
             "data-file-drop": "",
-            "data-dragging": P ? "" : void 0,
-            className: f(
+            "data-dragging": W ? "" : 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",
-              P ? "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"
+              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"
             ),
             children: [
               /* @__PURE__ */ n(
@@ -241,13 +242,13 @@ function Dr({
                   variant: "outline",
                   colorScheme: "neutral",
                   size: "lg",
-                  className: f("rst:px-5", c && V),
-                  "aria-disabled": c || void 0,
+                  className: g("rst:px-5", i && V),
+                  "aria-disabled": i || void 0,
                   "aria-describedby": hr,
-                  onClick: () => J.current?.click(),
+                  onClick: () => K.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: o.choose
+                  children: a.choose
                 }
               ),
               /* @__PURE__ */ n(
@@ -255,21 +256,21 @@ function Dr({
                 {
                   className: "rst:hidden rst:text-xs rst:text-gray-600 rst:pointer-fine:block rst:dark:text-gray-400",
                   "data-file-drop-hint": "",
-                  children: P ? o.dropHere : o.dropHint
+                  children: W ? a.dropHere : a.dropHint
                 }
               ),
               /* @__PURE__ */ n(
                 "input",
                 {
-                  ref: J,
+                  ref: K,
                   type: "file",
                   hidden: !0,
                   tabIndex: -1,
                   accept: D,
                   multiple: v !== 1,
-                  disabled: c,
+                  disabled: i,
                   onChange: (r) => {
-                    Q(Array.from(r.currentTarget.files ?? [])), r.currentTarget.value = "";
+                    X(Array.from(r.currentTarget.files ?? [])), r.currentTarget.value = "";
                   },
                   "data-file-input": ""
                 }
@@ -277,69 +278,47 @@ function Dr({
             ]
           }
         ),
-        S && /* @__PURE__ */ n("p", { id: X, className: "rst:mt-1.5 rst:text-left rst:text-xs rst:text-gray-500 rst:dark:text-gray-400", children: S }),
-        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": F, children: z.map((r) => {
+        S && /* @__PURE__ */ n("p", { id: _, className: "rst:mt-1.5 rst:text-left rst:text-xs rst:text-gray-500 rst:dark:text-gray-400", children: S }),
+        R && /* @__PURE__ */ n("p", { id: J, 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 }),
+        F.length > 0 && /* @__PURE__ */ n("ul", { className: "rst:mt-3 rst:flex rst:flex-col rst:gap-2", "aria-labelledby": z, children: F.map((r) => {
           const e = r.status === "failed" || r.status === "rejected", t = r.status === "uploading" || r.status === "processing" || r.status === "queued";
-          return /* @__PURE__ */ g(
+          return /* @__PURE__ */ p(
             "li",
             {
               "data-file-item": r.id,
               "data-status": r.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(wr, { file: r.file, status: r.status }),
-                /* @__PURE__ */ g("div", { className: "rst:min-w-0 rst:flex-1 rst:text-left", children: [
+                /* @__PURE__ */ n($r, { 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__ */ g(
+                  /* @__PURE__ */ p(
                     "p",
                     {
-                      className: f(
+                      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"
                       ),
                       "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__ */ g("span", { children: [
-                          /* @__PURE__ */ n("span", { className: "rst:tabular-nums", children: o.size(r.file.size) }),
+                        /* @__PURE__ */ p("span", { children: [
+                          /* @__PURE__ */ n("span", { className: "rst:tabular-nums", children: a.size(r.file.size) }),
                           /* @__PURE__ */ n("span", { "aria-hidden": "true", children: " · " }),
                           gr(r)
                         ] })
                       ]
                     }
                   ),
-                  t && /* @__PURE__ */ n(
-                    "div",
+                  t && /* @__PURE__ */ n("div", { className: "rst:mt-1.5", "data-file-progress": "", children: /* @__PURE__ */ n(
+                    yr,
                     {
-                      role: "progressbar",
-                      "aria-label": r.file.name,
-                      "aria-valuemin": 0,
-                      "aria-valuemax": 100,
-                      "aria-valuenow": r.status === "uploading" && r.progress !== null ? Math.round(r.progress * 100) : void 0,
-                      className: f(
-                        "rst:mt-1.5 rst:h-1.5 rst:overflow-hidden rst:rounded-full rst:bg-gray-200 rst:dark:bg-gray-700",
-                        /* Under way with no figure yet: the track pulses and the
-                           fill waits at zero, so the first figure grows it
-                           rather than shrinking a full bar. */
-                        r.status === "uploading" && r.progress === null && "rst:animate-pulse rst:motion-reduce:animate-none"
-                      ),
-                      "data-file-progress": "",
-                      children: /* @__PURE__ */ n(
-                        "div",
-                        {
-                          className: f(
-                            "rst:h-full rst:origin-left rst:rounded-full rst:bg-primary-600 rst:transition-transform rst:motion-reduce:transition-none rst:dark:bg-primary-400",
-                            /* On the server: full, and pulsing, since there's no figure to give. */
-                            r.status === "processing" && "rst:animate-pulse rst:motion-reduce:animate-none"
-                          ),
-                          style: {
-                            transform: `scaleX(${r.status === "processing" ? 1 : r.status === "uploading" ? r.progress ?? 0 : 0})`
-                          }
-                        }
-                      )
+                      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,
+                      announce: !1
                     }
-                  )
+                  ) })
                 ] }),
                 r.status === "failed" && /* @__PURE__ */ n(
                   G,
@@ -348,12 +327,12 @@ function Dr({
                     variant: "ghost",
                     colorScheme: "neutral",
                     size: "icon",
-                    className: f("rst:h-11 rst:w-11", c && V),
-                    "aria-disabled": c || void 0,
-                    "aria-label": o.retry(r.file.name),
-                    onClick: () => ur(r.id),
+                    className: g("rst:h-11 rst:w-11", i && V),
+                    "aria-disabled": i || void 0,
+                    "aria-label": a.retry(r.file.name),
+                    onClick: () => lr(r.id),
                     "data-file-retry": r.id,
-                    children: /* @__PURE__ */ g("svg", { ...I, "aria-hidden": "true", children: [
+                    children: /* @__PURE__ */ p("svg", { ...I, "aria-hidden": "true", children: [
                       /* @__PURE__ */ n("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }),
                       /* @__PURE__ */ n("path", { d: "M3 3v5h5" })
                     ] })
@@ -366,10 +345,10 @@ function Dr({
                     variant: "ghost",
                     colorScheme: "neutral",
                     size: "icon",
-                    className: f("rst:h-11 rst:w-11", c && V),
-                    "aria-disabled": c || void 0,
-                    "aria-label": o.remove(r.file.name),
-                    onClick: () => lr(r.id),
+                    className: g("rst:h-11 rst:w-11", i && V),
+                    "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" }) })
                   }
@@ -379,7 +358,7 @@ function Dr({
             r.id
           );
         }) }),
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ p(
           "div",
           {
             role: "status",
@@ -399,5 +378,5 @@ function Dr({
   );
 }
 export {
-  Dr as FileUpload
+  Rr as FileUpload
 };

package/dist/components/molecules/ProgressField/ProgressField.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),f=require("../../../lib/utils.cjs"),j=require("../../atoms/Progress/Progress.cjs"),h=require("../../atoms/Progress/progress-values.cjs"),y=s=>`${s}%`,N=(s,r)=>`${s} of ${r}`;function w({label:s,valueText:r,detail:n,labels:e,className:c,...a}){const{value:u,max:d,variant:o="continuous",segments:l,announce:m=!0}=a,{known:g,percent:x,done:p,applicable:v}=h.progressValues({value:u,max:d,variant:o,segments:l}),i=r??(o==="segmented"?(e?.count??N)(p,v):g?(e?.percent??y)(x):void 0);return t.jsxs("div",{className:f.cn("rst:font-ui rst:w-full rst:min-w-0",c),"data-progress-field":"",children:[t.jsxs("div",{"aria-hidden":m?!0:void 0,className:"rst:mb-1.5 rst:flex rst:items-baseline rst:justify-between rst:gap-3 rst:text-sm",children:[t.jsx("span",{className:"rst:min-w-0 rst:truncate rst:font-medium rst:text-[var(--roster-control-text)]","data-progress-label":"",children:s}),i!==void 0&&t.jsx("span",{className:"rst:shrink-0 rst:tabular-nums rst:text-gray-600 rst:dark:text-gray-400","data-progress-value":"",children:i})]}),t.jsx(j.Progress,{...a,label:s,valueText:r,labels:e}),n!==void 0&&t.jsx("p",{className:"rst:mt-1.5 rst:text-xs rst:text-gray-600 rst:dark:text-gray-400","data-progress-detail":"",children:n})]})}exports.ProgressField=w;

package/dist/components/molecules/ProgressField/ProgressField.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { ProgressLabels, ProgressProps } from '../../atoms/Progress/Progress';
+export interface ProgressFieldProps extends Pick<ProgressProps, "value" | "max" | "variant" | "segments" | "status" | "size" | "rounded" | "busy" | "announce" | "announceEvery"> {
+    /** What's progressing: "Uploading photos". Shown, and said with the value. */
+    label: string;
+    /** The value as shown and said, in place of the percent or the count: "3 of 8 files". */
+    valueText?: string;
+    /** A line under the bar: bytes, a step counter, a time left. */
+    detail?: ReactNode;
+    labels?: Partial<ProgressLabels>;
+    className?: string;
+}
+/**
+ * A progress bar with its label and value above it and an optional detail
+ * line below: the form to reach for when showing progress. Label left and
+ * value right, on one baseline, so a column of them lines up down a page.
+ *
+ * A screen reader hears the label and value together, politely, as they
+ * change (no more than once every 1.5 seconds); the visible pair is hidden
+ * from it so it isn't read twice.
+ */
+declare function ProgressField({ label, valueText, detail, labels, className, ...progress }: ProgressFieldProps): import("react/jsx-runtime").JSX.Element;
+export { ProgressField };

package/dist/components/molecules/ProgressField/ProgressField.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { cn as h } from "../../../lib/utils.js";
+import { Progress as N } from "../../atoms/Progress/Progress.js";
+import { progressValues as w } from "../../atoms/Progress/progress-values.js";
+const y = (t) => `${t}%`, k = (t, r) => `${t} of ${r}`;
+function C({
+  label: t,
+  valueText: r,
+  detail: n,
+  labels: e,
+  className: m,
+  ...a
+}) {
+  const { value: d, max: l, variant: o = "continuous", segments: u, announce: p = !0 } = a, { known: g, percent: x, done: f, applicable: v } = w({ value: d, max: l, variant: o, segments: u }), i = r ?? (o === "segmented" ? (e?.count ?? k)(f, v) : g ? (e?.percent ?? y)(x) : void 0);
+  return (
+    /* min-w-0: in a grid or flex column, a field otherwise refuses to be
+       narrower than its label on one line, and a long label pushes it out of
+       the column instead of truncating. */
+    /* @__PURE__ */ c("div", { className: h("rst:font-ui rst:w-full rst:min-w-0", m), "data-progress-field": "", children: [
+      /* @__PURE__ */ c("div", { "aria-hidden": p ? !0 : void 0, className: "rst:mb-1.5 rst:flex rst:items-baseline rst:justify-between rst:gap-3 rst:text-sm", children: [
+        /* @__PURE__ */ s("span", { className: "rst:min-w-0 rst:truncate rst:font-medium rst:text-[var(--roster-control-text)]", "data-progress-label": "", children: t }),
+        i !== void 0 && /* @__PURE__ */ s("span", { className: "rst:shrink-0 rst:tabular-nums rst:text-gray-600 rst:dark:text-gray-400", "data-progress-value": "", children: i })
+      ] }),
+      /* @__PURE__ */ s(N, { ...a, label: t, valueText: r, labels: e }),
+      n !== void 0 && /* @__PURE__ */ s("p", { className: "rst:mt-1.5 rst:text-xs rst:text-gray-600 rst:dark:text-gray-400", "data-progress-detail": "", children: n })
+    ] })
+  );
+}
+export {
+  C as ProgressField
+};

package/dist/components/molecules/SkeletonPresets/SkeletonPresets.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../lib/utils.cjs"),m=require("../../atoms/Card/Card.cjs"),j=require("../../atoms/Eyebrow/Eyebrow.cjs"),c=require("../../atoms/Stat/stat-variants.cjs"),h=require("../../organisms/Table/Table.cjs"),t=require("../../atoms/Skeleton/Skeleton.cjs");function k({media:r,lines:a=3,variant:s,padding:i,className:n}){return e.jsxs(m.Card,{variant:s,padding:i,className:n,"aria-hidden":"true","data-skeleton":"card",children:[r!==void 0&&e.jsx(t.Skeleton,{shape:"block",height:r,className:"rst:mb-4"}),e.jsx(t.Skeleton,{size:"lg",width:"45%"}),a>0&&e.jsx(t.Skeleton,{size:"md",lines:a,className:"rst:mt-2"})]})}function S({columns:r,className:a}){const s=["70%","50%","60%","40%"];return e.jsx(h.TableRow,{"aria-hidden":"true",className:a,"data-skeleton":"table-row",children:Array.from({length:Math.max(1,r)},(i,n)=>e.jsx(h.TableCell,{children:e.jsx(t.Skeleton,{size:"inherit",width:s[n%s.length]})},n))})}function w({size:r="md",withName:a=!1,className:s}){return a?e.jsxs("span",{"aria-hidden":"true",className:l.cn("rst:flex rst:items-center rst:gap-3",s),"data-skeleton":"avatar",children:[e.jsx(t.Skeleton,{shape:"circle",size:r}),e.jsx(t.Skeleton,{size:"md",width:"8rem"})]}):e.jsx(t.Skeleton,{shape:"circle",size:r,className:s})}function b({size:r="md",semantics:a="definition",source:s=!1,className:i}){const n=c.statValueVariants({size:r,colorScheme:"neutral"}),o=e.jsx(t.Skeleton,{size:"inherit",width:"2.5em"}),d=x=>e.jsx(j.Eyebrow,{size:"xs",children:e.jsx(t.Skeleton,{size:"inherit",width:"9em",className:x?"rst:inline-block rst:align-baseline":void 0})}),u=e.jsx("span",{className:c.statSourceClass,children:e.jsx(t.Skeleton,{size:"inherit",width:"12em"})});return a==="standalone"?e.jsxs("span",{"aria-hidden":"true",className:l.cn("rst:flex rst:flex-col rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("span",{className:n,children:o}),d(!1),s&&u]}):e.jsxs("div",{"aria-hidden":"true",className:l.cn("rst:grid rst:content-start rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("dt",{className:"rst:relative rst:col-start-1 rst:row-start-2",children:d(!0)}),s?e.jsxs("dd",{className:l.cn("rst:m-0",n,"rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"),children:[e.jsx("span",{className:"rst:row-start-1",children:o}),e.jsx("span",{className:l.cn(c.statSourceClass,"rst:row-start-3"),children:e.jsx(t.Skeleton,{size:"inherit",width:"12em"})})]}):e.jsx("dd",{className:l.cn("rst:m-0 rst:col-start-1 rst:row-start-1",n),children:o})]})}exports.SkeletonAvatar=w;exports.SkeletonCard=k;exports.SkeletonStat=b;exports.SkeletonTableRow=S;

package/dist/components/molecules/SkeletonPresets/SkeletonPresets.d.ts

@@ -0,0 +1,55 @@
+import { CSSProperties } from 'react';
+import { CardProps } from '../../atoms/Card/Card';
+export interface SkeletonCardProps extends Pick<CardProps, "variant" | "padding"> {
+    /** A media block above the text, at this height (an image, a chart). */
+    media?: CSSProperties["height"];
+    /** Body lines under the title. */
+    lines?: number;
+    className?: string;
+}
+/**
+ * A Card loading. Stands in for a Card holding an optional media block (with
+ * 16px below it), a `text-base` title, and `text-sm` body lines 8px under it.
+ */
+declare function SkeletonCard({ media, lines, variant, padding, className }: SkeletonCardProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonTableRowProps {
+    /** How many cells. */
+    columns: number;
+    className?: string;
+}
+/**
+ * A table row loading, inside Roster's Table: its own cells, at the table's
+ * size, each holding one line in the cell's text size. Stands in for a row of
+ * one-line cells.
+ */
+declare function SkeletonTableRow({ columns, className }: SkeletonTableRowProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonAvatarProps {
+    /** Avatar's sizes. */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /** A name line beside it, in `text-sm`. */
+    withName?: boolean;
+    className?: string;
+}
+/** An Avatar loading, and optionally the name beside it. */
+declare function SkeletonAvatar({ size, withName, className }: SkeletonAvatarProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonStatProps {
+    /** Stat's sizes. */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Stat's two markups, mirrored. `definition` (Stat's default) is a `dt` and
+     * `dd` pair for a `<dl>`: put this preset in the same `<dl>`. `standalone`
+     * is spans.
+     */
+    semantics?: "definition" | "standalone";
+    /** A source line under the figure, as a Stat with `source` has. */
+    source?: boolean;
+    className?: string;
+}
+/**
+ * A Stat loading. Stat's own markup in each of its forms, with lines in place
+ * of its words, so the figure that arrives is the height of what held it:
+ * the label is the real Eyebrow, inline in a `dt` where Stat's is, so it
+ * takes the same line box.
+ */
+declare function SkeletonStat({ size, semantics, source, className }: SkeletonStatProps): import("react/jsx-runtime").JSX.Element;
+export { SkeletonCard, SkeletonTableRow, SkeletonAvatar, SkeletonStat };