@blakesteve/roster 5.3.0 → 5.5.0

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

@@ -0,0 +1,403 @@
+"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 { 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 = {
+  choose: "Choose photos",
+  dropHint: "or drag them here",
+  dropHere: "Drop to add them",
+  queued: "Waiting",
+  uploading: (s) => s === null ? "Uploading" : `Uploading, ${s}%`,
+  processing: "Finishing up",
+  done: "Uploaded",
+  failed: "Didn't upload.",
+  rejected: "Not added.",
+  remove: (s) => `Remove ${s}`,
+  retry: (s) => `Try ${s} again`,
+  wrongType: () => "That type of file isn't accepted.",
+  tooLarge: (s, d) => `It's over ${Z(d)}.`,
+  tooMany: (s) => `Only ${s} 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.`
+};
+function wr({ 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;
+      const j = URL.createObjectURL(s);
+      return q.src = j, () => URL.revokeObjectURL(j);
+    },
+    [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(
+    "img",
+    {
+      ref: $,
+      alt: "",
+      onError: () => D(!0),
+      className: f(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"),
+      "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: [
+        /* @__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" })
+      ] })
+    }
+  );
+}
+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({
+  label: s,
+  upload: d,
+  onChange: T,
+  accept: D = "image/*",
+  types: B,
+  maxSize: $,
+  maxFiles: v,
+  validate: q,
+  concurrency: j = 3,
+  helperText: S,
+  errorMessage: R,
+  disabled: c = !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) => {
+    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 }));
+    }, 0));
+  }, []), H = p(null), [ar, or] = L(0), K = (r) => {
+    H.current = r, or((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]);
+  const k = U((r) => {
+    l.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));
+    },
+    [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);
+  }
+  function ir(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) => {
+        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 });
+      },
+      onProcessing: () => {
+        t() && N(r.id, { status: "processing" });
+      },
+      signal: e.signal
+    };
+    new Promise((a) => a(h.current.upload(r.file, i))).then(
+      (a) => {
+        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();
+      },
+      (a) => {
+        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();
+      }
+    );
+  }
+  Y(() => {
+    h.current = { upload: d, onChange: T, concurrency: j, t: o, 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(
+        (t) => (t.status === "uploading" || t.status === "processing") && !r.has(t.id) ? { ...t, status: "queued", progress: null } : t
+      )
+    ), h.current.pump()), () => {
+      for (const t of r.values()) t.abort();
+      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 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 });
+    }
+    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));
+    w();
+  }, lr = (r) => {
+    if (c) return;
+    const e = l.current, t = e.findIndex((a) => a.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 = {
+    onDragEnter: (r) => {
+      E(r) && (r.preventDefault(), W((e) => e + 1));
+    },
+    onDragOver: (r) => {
+      E(r) && (r.preventDefault(), r.dataTransfer.dropEffect = c ? "none" : "copy");
+    },
+    onDragLeave: (r) => {
+      E(r) && W((e) => Math.max(0, e - 1));
+    },
+    onDrop: (r) => {
+      E(r) && (r.preventDefault(), W(0), Q(Array.from(r.dataTransfer.files)));
+    }
+  }, P = fr > 0 && !c, gr = (r) => {
+    switch (r.status) {
+      case "queued":
+        return o.queued;
+      case "uploading":
+        return o.uploading(r.progress === null ? null : Math.round(r.progress * 100));
+      case "processing":
+        return o.processing;
+      case "done":
+        return o.done;
+      case "failed":
+        return `${o.failed} ${r.reason ?? ""}`.trim();
+      case "rejected":
+        return `${o.rejected} ${r.reason ?? ""}`.trim();
+    }
+  }, hr = [S ? X : null, R ? _ : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ref: O,
+      role: "group",
+      "aria-labelledby": F,
+      className: f("rst:font-ui rst:w-full", tr),
+      "data-file-upload": "",
+      children: [
+        /* @__PURE__ */ n(
+          "p",
+          {
+            id: F,
+            className: f(
+              "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"
+            ),
+            children: s
+          }
+        ),
+        /* @__PURE__ */ g(
+          "div",
+          {
+            ...pr,
+            "data-file-drop": "",
+            "data-dragging": P ? "" : void 0,
+            className: f(
+              "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"
+            ),
+            children: [
+              /* @__PURE__ */ n(
+                G,
+                {
+                  type: "button",
+                  variant: "outline",
+                  colorScheme: "neutral",
+                  size: "lg",
+                  className: f("rst:px-5", c && V),
+                  "aria-disabled": c || void 0,
+                  "aria-describedby": hr,
+                  onClick: () => J.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
+                }
+              ),
+              /* @__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: P ? o.dropHere : o.dropHint
+                }
+              ),
+              /* @__PURE__ */ n(
+                "input",
+                {
+                  ref: J,
+                  type: "file",
+                  hidden: !0,
+                  tabIndex: -1,
+                  accept: D,
+                  multiple: v !== 1,
+                  disabled: c,
+                  onChange: (r) => {
+                    Q(Array.from(r.currentTarget.files ?? [])), r.currentTarget.value = "";
+                  },
+                  "data-file-input": ""
+                }
+              )
+            ]
+          }
+        ),
+        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) => {
+          const e = r.status === "failed" || r.status === "rejected", t = r.status === "uploading" || r.status === "processing" || r.status === "queued";
+          return /* @__PURE__ */ g(
+            "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("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(
+                    "p",
+                    {
+                      className: f(
+                        "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__ */ n("span", { "aria-hidden": "true", children: " · " }),
+                          gr(r)
+                        ] })
+                      ]
+                    }
+                  ),
+                  t && /* @__PURE__ */ n(
+                    "div",
+                    {
+                      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})`
+                          }
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                r.status === "failed" && /* @__PURE__ */ n(
+                  G,
+                  {
+                    type: "button",
+                    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),
+                    "data-file-retry": r.id,
+                    children: /* @__PURE__ */ g("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" })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  G,
+                  {
+                    type: "button",
+                    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),
+                    "data-file-remove": r.id,
+                    children: /* @__PURE__ */ n("svg", { ...I, "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M18 6 6 18M6 6l12 12" }) })
+                  }
+                )
+              ]
+            },
+            r.id
+          );
+        }) }),
+        /* @__PURE__ */ g(
+          "div",
+          {
+            role: "status",
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            className: "rst:sr-only",
+            "data-file-live": "",
+            "data-file-live-n": A.n,
+            children: [
+              A.text,
+              A.n % 2 ? " " : ""
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Dr as FileUpload
+};

package/dist/components/molecules/FileUpload/file-rules.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s={jpg:"image/jpeg",jpeg:"image/jpeg",jfif:"image/jpeg",png:"image/png",gif:"image/gif",webp:"image/webp",avif:"image/avif",heic:"image/heic",heif:"image/heif",bmp:"image/bmp",tif:"image/tiff",tiff:"image/tiff",pdf:"application/pdf"},r=e=>{const t=e.lastIndexOf(".");return t>0?e.slice(t+1).toLowerCase():""};function a(e){return(e.type||s[r(e.name)]||"").toLowerCase()}function m(e,t){if(t.length===0)return!0;const n=a(e),f=r(e.name);return t.some(o=>{const i=o.trim().toLowerCase();return i?i.startsWith(".")?f===i.slice(1):i.endsWith("/*")?n.startsWith(i.slice(0,-1)):n===i:!1})}const p=e=>e.split(",").map(t=>t.trim()).filter(Boolean),c=(e,t)=>e.name===t.name&&e.size===t.size&&e.lastModified===t.lastModified;function g(e){if(e<1024)return`${e} B`;if(e<1024*1024)return`${Math.round(e/1024)} KB`;const t=e/(1024*1024);return`${t<9.95?t.toFixed(1).replace(/\.0$/,""):Math.round(t)} MB`}exports.acceptList=p;exports.formatBytes=g;exports.matchesType=m;exports.sameFile=c;exports.typeOf=a;

package/dist/components/molecules/FileUpload/file-rules.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The rules FileUpload checks a picked or dropped file against, kept apart
+ * from the component so they can be tested on their own.
+ */
+/** The file's type as reported, or as its extension implies when none is. */
+export declare function typeOf(file: Pick<File, "name" | "type">): string;
+/**
+ * Whether `file` matches one of `accepted`, written the way an `accept`
+ * attribute is: a type (`image/png`), a family (`image/*`) or an extension
+ * (`.png`). An empty list accepts anything.
+ */
+export declare function matchesType(file: Pick<File, "name" | "type">, accepted: readonly string[]): boolean;
+/** An `accept` attribute's value, as a list. */
+export declare const acceptList: (accept: string) => string[];
+/** The same file picked twice: same name, size and modified time. */
+export declare const sameFile: (a: File, b: File) => boolean;
+/**
+ * A byte count as a short size: "820 KB", "2.4 MB". In units of 1,024, the way
+ * a limit is usually written (`15 * 1024 * 1024`), so that limit reads back as
+ * "15 MB" rather than "15.7 MB".
+ */
+export declare function formatBytes(bytes: number): string;

package/dist/components/molecules/FileUpload/file-rules.js

@@ -0,0 +1,43 @@
+const o = {
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  jfif: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  webp: "image/webp",
+  avif: "image/avif",
+  heic: "image/heic",
+  heif: "image/heif",
+  bmp: "image/bmp",
+  tif: "image/tiff",
+  tiff: "image/tiff",
+  pdf: "application/pdf"
+}, r = (e) => {
+  const t = e.lastIndexOf(".");
+  return t > 0 ? e.slice(t + 1).toLowerCase() : "";
+};
+function s(e) {
+  return (e.type || o[r(e.name)] || "").toLowerCase();
+}
+function m(e, t) {
+  if (t.length === 0) return !0;
+  const n = s(e), a = r(e.name);
+  return t.some((f) => {
+    const i = f.trim().toLowerCase();
+    return i ? i.startsWith(".") ? a === i.slice(1) : i.endsWith("/*") ? n.startsWith(i.slice(0, -1)) : n === i : !1;
+  });
+}
+const p = (e) => e.split(",").map((t) => t.trim()).filter(Boolean), g = (e, t) => e.name === t.name && e.size === t.size && e.lastModified === t.lastModified;
+function c(e) {
+  if (e < 1024) return `${e} B`;
+  if (e < 1024 * 1024) return `${Math.round(e / 1024)} KB`;
+  const t = e / (1024 * 1024);
+  return `${t < 9.95 ? t.toFixed(1).replace(/\.0$/, "") : Math.round(t)} MB`;
+}
+export {
+  p as acceptList,
+  c as formatBytes,
+  m as matchesType,
+  g as sameFile,
+  s as typeOf
+};

package/dist/components/molecules/MediaPreview/MediaPreview.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m=require("react"),i=require("../../../lib/utils.cjs");function h({src:e,href:t,alt:s,unavailableLabel:n="Preview unavailable",openLabel:a="Open original",onUnavailable:u,className:o,...g}){const[x,b]=m.useState(null),f=!e||x===e,c="rst:font-ui rst:h-28 rst:w-36 rst:shrink-0 rst:rounded-md rst:border rst:border-[var(--roster-card-border)]";if(f){const d=r.jsxs(r.Fragment,{children:[r.jsx("span",{children:n}),t?r.jsxs("span",{className:"rst:font-semibold rst:underline",children:[a,r.jsx("span",{"aria-hidden":"true",children:" ↗"})]}):null]}),l=i.cn(c,"rst:flex rst:flex-col rst:items-center rst:justify-center rst:gap-1 rst:border-dashed rst:px-2 rst:text-center rst:text-xs rst:text-gray-600 rst:dark:text-gray-300",o);return t?r.jsx("a",{href:t,target:"_blank",rel:"noreferrer",className:i.cn(l,"rst:hover:bg-gray-50 rst:dark:hover:bg-gray-800 rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring"),"aria-label":`${n}. ${a}, in a new tab: ${s}`,children:d}):r.jsx("span",{role:"img","aria-label":`${n}: ${s}`,className:l,children:d})}return r.jsx("img",{...g,src:e,alt:s,className:i.cn(c,"rst:object-cover",o),onError:()=>{b(e),u?.()}})}exports.MediaPreview=h;

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

@@ -0,0 +1,27 @@
+import { ImgHTMLAttributes } from 'react';
+export interface MediaPreviewProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "onError"> {
+    /** The thumbnail. Missing or failing to load, the preview falls back. */
+    src?: string | null;
+    /** The original, opened from the fallback. Without it the fallback says so. */
+    href?: string | null;
+    /** What the image shows. Required: a preview in a queue is content. */
+    alt: string;
+    /** What the fallback says before "Open original". */
+    unavailableLabel?: string;
+    /** The link's own words. */
+    openLabel?: string;
+    /** Called once when the thumbnail fails, for an app that keeps a count. */
+    onUnavailable?: () => void;
+}
+/**
+ * A thumbnail that admits when it can't render.
+ *
+ * Previews fail in ordinary ways: a short-lived signed link that expired, or a
+ * format the browser can't draw, such as a photo straight off a phone. The
+ * browser's answer is a broken-image glyph, which tells a reviewer nothing
+ * and hides the one thing they may need to see before deciding. This swaps it
+ * for a card that says the preview is unavailable and links to the original,
+ * in the same footprint, so a row of previews doesn't jump.
+ */
+declare function MediaPreview({ src, href, alt, unavailableLabel, openLabel, onUnavailable, className, ...props }: MediaPreviewProps): import("react/jsx-runtime").JSX.Element;
+export { MediaPreview };

package/dist/components/molecules/MediaPreview/MediaPreview.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as r, jsxs as m, Fragment as x } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { cn as i } from "../../../lib/utils.js";
+function $({
+  src: e,
+  href: t,
+  alt: s,
+  unavailableLabel: n = "Preview unavailable",
+  openLabel: o = "Open original",
+  onUnavailable: g,
+  className: a,
+  ...u
+}) {
+  const [f, b] = p(null), h = !e || f === e, d = "rst:font-ui rst:h-28 rst:w-36 rst:shrink-0 rst:rounded-md rst:border rst:border-[var(--roster-card-border)]";
+  if (h) {
+    const l = /* @__PURE__ */ m(x, { children: [
+      /* @__PURE__ */ r("span", { children: n }),
+      t ? /* @__PURE__ */ m("span", { className: "rst:font-semibold rst:underline", children: [
+        o,
+        /* @__PURE__ */ r("span", { "aria-hidden": "true", children: " ↗" })
+      ] }) : null
+    ] }), c = i(
+      d,
+      "rst:flex rst:flex-col rst:items-center rst:justify-center rst:gap-1 rst:border-dashed rst:px-2 rst:text-center rst:text-xs rst:text-gray-600 rst:dark:text-gray-300",
+      a
+    );
+    return t ? /* @__PURE__ */ r(
+      "a",
+      {
+        href: t,
+        target: "_blank",
+        rel: "noreferrer",
+        className: i(c, "rst:hover:bg-gray-50 rst:dark:hover:bg-gray-800 rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring"),
+        "aria-label": `${n}. ${o}, in a new tab: ${s}`,
+        children: l
+      }
+    ) : /* @__PURE__ */ r("span", { role: "img", "aria-label": `${n}: ${s}`, className: c, children: l });
+  }
+  return /* @__PURE__ */ r(
+    "img",
+    {
+      ...u,
+      src: e,
+      alt: s,
+      className: i(d, "rst:object-cover", a),
+      onError: () => {
+        b(e), g?.();
+      }
+    }
+  );
+}
+export {
+  $ as MediaPreview
+};

package/dist/components/organisms/Dialog/Dialog.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),y=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),h=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),o=require("../../../node_modules/class-variance-authority/dist/index.cjs"),s=require("../../../lib/utils.cjs"),k=require("../../../internal/page-inert.cjs"),a=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.cjs"),d=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),j=o.cva("rst:relative rst:w-full rst:transform rst:overflow-hidden rst:rounded-2xl rst:p-6 rst:text-left rst:align-middle rst:elevation-overlay rst:transition-all rst:border",{variants:{size:{xs:"rst:max-w-xs",sm:"rst:max-w-sm",md:"rst:max-w-md",lg:"rst:max-w-lg",xl:"rst:max-w-xl","2xl":"rst:max-w-2xl","3xl":"rst:max-w-3xl",full:"rst:max-w-[95vw] rst:m-4"},variant:{white:"rst:bg-[var(--roster-popover-bg)] rst:border-[var(--roster-popover-border)] rst:text-[var(--roster-popover-text)]",slate:"rst:bg-gray-700 rst:border-gray-600 rst:text-gray-100 rst:dark:bg-gray-900 rst:dark:border-gray-800 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-gray-700,#44403c)] rst:dark:[--roster-ring-offset:var(--roster-gray-900,#1c1917)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",primary:"rst:bg-primary-700 rst:border-primary-600 rst:text-primary-700-ink rst:dark:text-white rst:dark:bg-primary-950 rst:dark:border-primary-900 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-primary-700,#084063)] rst:dark:[--roster-ring-offset:var(--roster-primary-950,#021724)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",glass:"rst:bg-white/80 rst:border-white/20 rst:backdrop-blur-xl rst:text-gray-900 rst:dark:bg-slate-900/80 rst:dark:border-slate-700/50 rst:dark:text-white"},status:{default:"",destructive:"rst:border-t-4 rst:border-t-error-500",success:"rst:border-t-4 rst:border-t-success-500"}},defaultVariants:{size:"md",variant:"white",status:"default"}}),w=o.cva("rst:text-xl rst:font-bold rst:leading-6 rst:text-inherit"),N=o.cva("rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75"),_=o.cva("rst:inline-flex rst:size-11 rst:shrink-0 rst:items-center rst:justify-center rst:-m-3 rst:cursor-pointer rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-50 rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:transition-opacity"),q=({isOpen:u,onClose:i,title:m,description:n,size:x,variant:l,status:g,children:b,className:f})=>{const[v,p]=t.useState(!1);t.useLayoutEffect(()=>{p(!0)},[]);const e=u&&v,c=t.useRef(null);return t.useLayoutEffect(()=>{if(e)return k.lockPage(c.current)},[e]),r.jsxs(r.Fragment,{children:[e&&r.jsx("span",{ref:c,hidden:!0}),r.jsxs(a.Dialog,{open:e,as:"div",className:"rst:font-ui rst:relative rst:z-50",onClose:i,children:[r.jsx(d.TransitionChild,{as:t.Fragment,enter:"rst:ease-out rst:duration-300",enterFrom:"rst:opacity-0",enterTo:"rst:opacity-100",leave:"rst:ease-in rst:duration-200",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:r.jsx(a.DialogBackdrop,{className:s.cn("rst:fixed rst:inset-0 rst:transition-opacity",l==="glass"?"rst:bg-[var(--roster-backdrop,color-mix(in_oklab,oklch(20.8%_0.042_265.755)_40%,transparent))] rst:dark:bg-[var(--roster-backdrop,color-mix(in_oklab,var(--roster-black,#1e1c1a)_60%,transparent))]":"rst:bg-[var(--roster-backdrop,color-mix(in_oklab,oklch(20.8%_0.042_265.755)_60%,transparent))] rst:dark:bg-[var(--roster-backdrop,color-mix(in_oklab,var(--roster-black,#1e1c1a)_80%,transparent))] rst:backdrop-blur-backdrop")})}),r.jsx("div",{className:"rst:fixed rst:inset-0 rst:overflow-y-auto",children:r.jsx("div",{className:"rst:flex rst:min-h-full rst:items-center rst:justify-center rst:p-4 rst:text-center",children:r.jsx(d.TransitionChild,{as:t.Fragment,enter:"rst:ease-out rst:duration-300",enterFrom:"rst:opacity-0 rst:scale-95",enterTo:"rst:opacity-100 rst:scale-100",leave:"rst:ease-in rst:duration-200",leaveFrom:"rst:opacity-100 rst:scale-100",leaveTo:"rst:opacity-0 rst:scale-95",children:r.jsxs(a.DialogPanel,{className:s.cn(j({size:x,variant:l,status:g}),f),children:[r.jsxs("div",{className:"rst:flex rst:items-start rst:justify-between",children:[r.jsxs("div",{children:[r.jsx(a.DialogTitle,{as:"h2",className:s.cn(w()),children:m}),n&&r.jsx("p",{className:s.cn(N()),children:n})]}),r.jsx("div",{className:"rst:ml-4 rst:flex rst:shrink-0",children:r.jsx("button",{type:"button",onClick:i,className:s.cn(_()),"aria-label":"Close dialog",children:r.jsx(y.FontAwesomeIcon,{icon:h.faXmark,className:"rst:h-5 rst:w-5"})})})]}),r.jsx("div",{className:"rst:mt-6",children:b})]})})})})]})]})};exports.Dialog=q;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),h=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),k=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),o=require("../../../node_modules/class-variance-authority/dist/index.cjs"),s=require("../../../lib/utils.cjs"),j=require("../../../internal/page-inert.cjs"),a=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.cjs"),d=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),w=o.cva("rst:relative rst:w-full rst:transform rst:overflow-hidden rst:rounded-2xl rst:p-6 rst:text-left rst:align-middle rst:elevation-overlay rst:transition-all rst:border",{variants:{size:{xs:"rst:max-w-xs",sm:"rst:max-w-sm",md:"rst:max-w-md",lg:"rst:max-w-lg",xl:"rst:max-w-xl","2xl":"rst:max-w-2xl","3xl":"rst:max-w-3xl",full:"rst:max-w-[95vw] rst:m-4"},variant:{white:"rst:bg-[var(--roster-popover-bg)] rst:border-[var(--roster-popover-border)] rst:text-[var(--roster-popover-text)]",slate:"rst:bg-gray-700 rst:border-gray-600 rst:text-gray-100 rst:dark:bg-gray-900 rst:dark:border-gray-800 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-gray-700,#44403c)] rst:dark:[--roster-ring-offset:var(--roster-gray-900,#1c1917)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",primary:"rst:bg-primary-700 rst:border-primary-600 rst:text-primary-700-ink rst:dark:text-white rst:dark:bg-primary-950 rst:dark:border-primary-900 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-primary-700,#084063)] rst:dark:[--roster-ring-offset:var(--roster-primary-950,#021724)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",glass:"rst:bg-white/80 rst:border-white/20 rst:backdrop-blur-xl rst:text-gray-900 rst:dark:bg-slate-900/80 rst:dark:border-slate-700/50 rst:dark:text-white"},status:{default:"",destructive:"rst:border-t-4 rst:border-t-error-500",success:"rst:border-t-4 rst:border-t-success-500"}},defaultVariants:{size:"md",variant:"white",status:"default"}}),N=o.cva("rst:text-xl rst:font-bold rst:leading-6 rst:text-inherit"),_=o.cva("rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75"),q=o.cva("rst:inline-flex rst:size-11 rst:shrink-0 rst:items-center rst:justify-center rst:-m-3 rst:cursor-pointer rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-50 rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:transition-opacity"),F=({isOpen:u,onClose:i,title:m,description:n,size:x,variant:l,status:g,children:f,className:v,onAfterClose:b})=>{const[p,y]=t.useState(!1);t.useLayoutEffect(()=>{y(!0)},[]);const e=u&&p,c=t.useRef(null);return t.useLayoutEffect(()=>{if(e)return j.lockPage(c.current)},[e]),r.jsxs(r.Fragment,{children:[e&&r.jsx("span",{ref:c,hidden:!0}),r.jsxs(a.Dialog,{open:e,as:"div",className:"rst:font-ui rst:relative rst:z-50",onClose:i,children:[r.jsx(d.TransitionChild,{as:t.Fragment,enter:"rst:ease-out rst:duration-300",enterFrom:"rst:opacity-0",enterTo:"rst:opacity-100",leave:"rst:ease-in rst:duration-200",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:r.jsx(a.DialogBackdrop,{className:s.cn("rst:fixed rst:inset-0 rst:transition-opacity",l==="glass"?"rst:bg-[var(--roster-backdrop,color-mix(in_oklab,oklch(20.8%_0.042_265.755)_40%,transparent))] rst:dark:bg-[var(--roster-backdrop,color-mix(in_oklab,var(--roster-black,#1e1c1a)_60%,transparent))]":"rst:bg-[var(--roster-backdrop,color-mix(in_oklab,oklch(20.8%_0.042_265.755)_60%,transparent))] rst:dark:bg-[var(--roster-backdrop,color-mix(in_oklab,var(--roster-black,#1e1c1a)_80%,transparent))] rst:backdrop-blur-backdrop")})}),r.jsx("div",{className:"rst:fixed rst:inset-0 rst:overflow-y-auto",children:r.jsx("div",{className:"rst:flex rst:min-h-full rst:items-center rst:justify-center rst:p-4 rst:text-center",children:r.jsx(d.TransitionChild,{as:t.Fragment,enter:"rst:ease-out rst:duration-300",enterFrom:"rst:opacity-0 rst:scale-95",enterTo:"rst:opacity-100 rst:scale-100",leave:"rst:ease-in rst:duration-200",leaveFrom:"rst:opacity-100 rst:scale-100",leaveTo:"rst:opacity-0 rst:scale-95",afterLeave:b,children:r.jsxs(a.DialogPanel,{className:s.cn(w({size:x,variant:l,status:g}),v),children:[r.jsxs("div",{className:"rst:flex rst:items-start rst:justify-between",children:[r.jsxs("div",{children:[r.jsx(a.DialogTitle,{as:"h2",className:s.cn(N()),children:m}),n&&r.jsx("p",{className:s.cn(_()),children:n})]}),r.jsx("div",{className:"rst:ml-4 rst:flex rst:shrink-0",children:r.jsx("button",{type:"button",onClick:i,className:s.cn(q()),"aria-label":"Close dialog",children:r.jsx(h.FontAwesomeIcon,{icon:k.faXmark,className:"rst:h-5 rst:w-5"})})})]}),r.jsx("div",{className:"rst:mt-6",children:f})]})})})})]})]})};exports.Dialog=F;

package/dist/components/organisms/Dialog/Dialog.d.ts

@@ -12,6 +12,14 @@ export interface DialogProps extends VariantProps<typeof dialogVariants> {
     description?: string;
     children: ReactNode;
     className?: string;
+    /**
+     * Called once the dialog has finished closing, after its leave transition.
+     * The place to move focus somewhere other than where it was before the
+     * dialog opened, for instance when that element no longer exists. Not
+     * called for a close cut short by reopening, nor when the dialog unmounts
+     * while open.
+     */
+    onAfterClose?: () => void;
 }
-declare const Dialog: ({ isOpen, onClose, title, description, size, variant, status, children, className, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const Dialog: ({ isOpen, onClose, title, description, size, variant, status, children, className, onAfterClose, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
 export { Dialog };