@blakesteve/roster 5.2.1 → 5.4.0

package/dist/components/molecules/CheckboxGroup/CheckboxGroup.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
 import P from "react";
 import { Description as _ } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
 import { Field as S } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
@@ -17,13 +17,13 @@ const Q = (s) => s.length > 0 && Array.isArray(s[0].options), U = {
   lg: "rst:text-base"
 }, or = ({
   options: s,
-  value: d,
+  value: c,
   onChange: k,
-  label: x,
-  helperText: c,
+  label: b,
+  helperText: l,
   errorMessage: i,
-  maxHeight: b,
-  disabled: l = !1,
+  maxHeight: p,
+  disabled: n = !1,
   variant: N,
   size: a = "md",
   columns: w,
@@ -33,16 +33,16 @@ const Q = (s) => s.length > 0 && Array.isArray(s[0].options), U = {
   panelClassName: L,
   "aria-describedby": j,
   "aria-invalid": A,
-  ...p
+  ...v
 }) => {
-  const n = !!i, v = R(n, { ...p, "aria-invalid": A }), B = V(p), m = b !== void 0, u = P.useId(), C = [j, c || i ? u : void 0].filter(Boolean).join(" ") || void 0, D = (r, f) => {
+  const o = !!i, u = R(o, { ...v, "aria-invalid": A }), B = V(v), m = p !== void 0, f = P.useId(), C = [j, l || i ? f : void 0].filter(Boolean).join(" ") || void 0, D = (r, x) => {
     k(
-      f ? [...d, r] : d.filter((O) => O !== r)
+      x ? [...c, r] : c.filter((O) => O !== r)
     );
-  }, F = (r) => /* @__PURE__ */ o(
+  }, F = (r) => /* @__PURE__ */ d(
     S,
     {
-      disabled: l || r.disabled,
+      disabled: n || r.disabled,
       className: "rst:flex rst:items-start rst:gap-2",
       children: [
         /* @__PURE__ */ t(
@@ -50,13 +50,14 @@ const Q = (s) => s.length > 0 && Array.isArray(s[0].options), U = {
           {
             size: a ?? "md",
             colorScheme: I,
-            checked: d.includes(r.value),
-            onChange: (f) => D(r.value, f),
-            "aria-invalid": v || void 0,
+            checked: c.includes(r.value),
+            onChange: (x) => D(r.value, x),
+            "aria-invalid": u || void 0,
+            "aria-describedby": o ? f : void 0,
             className: "rst:mt-0.5 rst:shrink-0"
           }
         ),
-        /* @__PURE__ */ o("div", { className: "rst:flex rst:min-w-0 rst:flex-col", children: [
+        /* @__PURE__ */ d("div", { className: "rst:flex rst:min-w-0 rst:flex-col", children: [
           /* @__PURE__ */ t(
             Z,
             {
@@ -75,30 +76,30 @@ const Q = (s) => s.length > 0 && Array.isArray(s[0].options), U = {
     },
     r.value
   ), y = (r) => /* @__PURE__ */ t("div", { className: e(K({ columns: w, size: a })), children: r.map(F) });
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ d(
     h,
     {
-      disabled: l,
+      disabled: n,
       className: e(
         "rst:font-ui rst:flex rst:flex-col rst:gap-1.5 rst:min-w-0",
         E
       ),
       ...B,
-      "aria-invalid": v || void 0,
+      "aria-invalid": u || void 0,
       "aria-describedby": C,
       children: [
-        x && /* @__PURE__ */ t(g, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left rst:data-disabled:opacity-50", children: x }),
+        b && /* @__PURE__ */ t(g, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left rst:data-disabled:opacity-50", children: b }),
         /* @__PURE__ */ t(
           "div",
           {
             className: e(
-              J({ variant: N, size: a, error: n }),
+              J({ variant: N, size: a, error: o }),
               m && "rst:overflow-y-auto rst:custom-scrollbar rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",
               /* Deprecated name first, so the current one wins when both are set. */
               L,
               G
             ),
-            style: m ? { maxHeight: b } : void 0,
+            style: m ? { maxHeight: p } : void 0,
             tabIndex: m ? 0 : void 0,
             children: Q(s) ? s.map((r) => (
               /* Nested fieldset per category, so the heading is the group's
@@ -111,7 +112,7 @@ const Q = (s) => s.length > 0 && Array.isArray(s[0].options), U = {
                                `as={Eyebrow}` overrides Legend's own `as="div"` — it is
                                spread after — so these render as <span>. The registration is
                                what matters and it is unchanged. */
-              /* @__PURE__ */ o(h, { className: "rst:flex rst:flex-col rst:gap-2", children: [
+              /* @__PURE__ */ d(h, { className: "rst:flex rst:flex-col rst:gap-2", children: [
                 /* @__PURE__ */ t(
                   g,
                   {
@@ -127,16 +128,16 @@ const Q = (s) => s.length > 0 && Array.isArray(s[0].options), U = {
             )) : y(s)
           }
         ),
-        (c || i) && /* @__PURE__ */ t(
+        (l || i) && /* @__PURE__ */ t(
           "p",
           {
-            id: u,
+            id: f,
             className: e(
               "rst:text-xs rst:text-left",
-              n ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400",
-              l && "rst:opacity-50"
+              o ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400",
+              n && "rst:opacity-50"
             ),
-            children: i || c
+            children: i || l
           }
         )
       ]

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/molecules/Toast/Toast.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),c=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),s=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),l=require("../../../lib/utils.cjs"),g=require("./toast-variants.cjs");function x(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const a in r)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(r,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:()=>r[a]})}}return t.default=r,Object.freeze(t)}const j=x(p),h={success:s.faCircleCheck,error:s.faCircleExclamation,amber:s.faTriangleExclamation,info:s.faCircleInfo,primary:s.faCircleInfo,neutral:s.faCircleInfo},u=j.forwardRef(({className:r,colorScheme:t="neutral",variant:a="soft",title:n,icon:i,onDismiss:o,dismissLabel:f="Dismiss",children:d,...m},b)=>e.jsxs("div",{ref:b,className:l.cn(g.toastVariants({colorScheme:t,variant:a}),r),...m,children:[i!==null&&e.jsx("span",{"aria-hidden":"true",className:"rst:mt-0.5 rst:shrink-0",children:i??e.jsx(c.FontAwesomeIcon,{icon:h[t??"neutral"],className:"rst:h-4 rst:w-4"})}),e.jsxs("div",{className:"rst:flex rst:min-w-0 rst:flex-col rst:gap-0.5",children:[n&&e.jsx("p",{className:"rst:font-semibold",children:n}),e.jsx("div",{className:"rst:min-w-0 rst:break-words",children:d})]}),o&&e.jsx("button",{type:"button",onClick:o,"aria-label":f,className:l.cn("rst:-mr-1 rst:ml-auto rst:shrink-0 rst:cursor-pointer rst:rounded rst:opacity-70 rst:hover:opacity-100","rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:ring-offset-background rst:focus-visible:ring-offset-2"),children:e.jsx(c.FontAwesomeIcon,{icon:s.faXmark,className:"rst:h-3.5 rst:w-3.5","aria-hidden":"true"})})]}));u.displayName="Toast";exports.Toast=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),c=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),r=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),l=require("../../../lib/utils.cjs"),g=require("./toast-variants.cjs");function x(s){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const a in s)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(s,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:()=>s[a]})}}return t.default=s,Object.freeze(t)}const j=x(p),h={success:r.faCircleCheck,error:r.faCircleExclamation,amber:r.faTriangleExclamation,info:r.faCircleInfo,primary:r.faCircleInfo,neutral:r.faCircleInfo},u=j.forwardRef(({className:s,colorScheme:t="neutral",variant:a="soft",title:n,icon:i,onDismiss:o,dismissLabel:f="Dismiss",children:d,...m},b)=>e.jsxs("div",{ref:b,className:l.cn(g.toastVariants({colorScheme:t,variant:a}),s),...m,children:[i!==null&&e.jsx("span",{"aria-hidden":"true",className:"rst:mt-0.5 rst:shrink-0",children:i??e.jsx(c.FontAwesomeIcon,{icon:h[t??"neutral"],className:"rst:h-4 rst:w-4"})}),e.jsxs("div",{className:"rst:flex rst:min-w-0 rst:flex-col rst:gap-0.5",children:[n&&e.jsx("p",{className:"rst:font-semibold",children:n}),e.jsx("div",{className:"rst:min-w-0 rst:break-words",children:d})]}),o&&e.jsx("button",{type:"button",onClick:o,"aria-label":f,className:l.cn("rst:-mr-1 rst:ml-auto rst:shrink-0 rst:cursor-pointer rst:rounded-sm rst:opacity-70 rst:hover:opacity-100","rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:ring-offset-background rst:focus-visible:ring-offset-2"),children:e.jsx(c.FontAwesomeIcon,{icon:r.faXmark,className:"rst:h-3.5 rst:w-3.5","aria-hidden":"true"})})]}));u.displayName="Toast";exports.Toast=u;

package/dist/components/molecules/Toast/Toast.js

@@ -48,7 +48,7 @@ const w = {
             onClick: e,
             "aria-label": f,
             className: l(
-              "rst:-mr-1 rst:ml-auto rst:shrink-0 rst:cursor-pointer rst:rounded rst:opacity-70 rst:hover:opacity-100",
+              "rst:-mr-1 rst:ml-auto rst:shrink-0 rst:cursor-pointer rst:rounded-sm rst:opacity-70 rst:hover:opacity-100",
               "rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:ring-offset-background rst:focus-visible:ring-offset-2"
             ),
             children: /* @__PURE__ */ r(n, { icon: v, className: "rst:h-3.5 rst:w-3.5", "aria-hidden": "true" })

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"),p=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"),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"),k=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-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"),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})=>{const[b,y]=t.useState(!1);t.useLayoutEffect(()=>{y(!0)},[]);const e=u&&b,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-slate-900/40 rst:dark:bg-black/60":"rst:bg-slate-900/60 rst:dark:bg-black/80 rst:backdrop-blur-sm")})}),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(k({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(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(q()),"aria-label":"Close dialog",children:r.jsx(p.FontAwesomeIcon,{icon:h.faXmark,className:"rst:h-5 rst:w-5"})})})]}),r.jsx("div",{className:"rst:mt-6",children:f})]})})})})]})]})};exports.Dialog=F;
+"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 };

package/dist/components/organisms/Dialog/Dialog.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsxs as t, Fragment as h, jsx as r } from "react/jsx-runtime";
-import { useState as k, useLayoutEffect as c, useRef as w, Fragment as d } from "react";
-import { FontAwesomeIcon as N } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { jsxs as t, Fragment as k, jsx as r } from "react/jsx-runtime";
+import { useState as w, useLayoutEffect as c, useRef as N, Fragment as d } from "react";
+import { FontAwesomeIcon as _ } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
 import { faXmark as F } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
 import { cva as a } from "../../../node_modules/class-variance-authority/dist/index.js";
 import { cn as s } from "../../../lib/utils.js";
 import { lockPage as T } from "../../../internal/page-inert.js";
 import { Dialog as j, DialogBackdrop as z, DialogPanel as D, DialogTitle as V } from "../../../node_modules/@headlessui/react/dist/components/dialog/dialog.js";
 import { TransitionChild as m } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-const C = /* @__PURE__ */ a(
+const L = /* @__PURE__ */ a(
   "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: {
@@ -56,9 +56,13 @@ const C = /* @__PURE__ */ a(
                    4.07 / 6.93 for the border.
         
                    `white` and `glass` are not here on purpose: both follow the page's
-                   scheme, so the page-level tokens are already right for them. */
+                   scheme, so the page-level tokens are already right for them.
+        
+                   `primary`'s text is its fill's ink token, as on every other solid
+                   fill, so a light primary gets dark text. Dark stays white: that
+                   fill is primary-950, which has no ink token. */
         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-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)]",
+        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: {
@@ -73,28 +77,29 @@ const C = /* @__PURE__ */ a(
       status: "default"
     }
   }
-), L = /* @__PURE__ */ a("rst:text-xl rst:font-bold rst:leading-6 rst:text-inherit"), P = /* @__PURE__ */ a("rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75"), R = /* @__PURE__ */ a(
+), C = /* @__PURE__ */ a("rst:text-xl rst:font-bold rst:leading-6 rst:text-inherit"), P = /* @__PURE__ */ a("rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75"), R = /* @__PURE__ */ a(
   "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"
 ), $ = ({
   isOpen: f,
   onClose: o,
-  title: g,
+  title: p,
   description: i,
-  size: p,
+  size: b,
   variant: n,
-  status: u,
+  status: g,
   children: v,
-  className: b
+  className: u,
+  onAfterClose: x
 }) => {
-  const [x, y] = k(!1);
+  const [y, h] = w(!1);
   c(() => {
-    y(!0);
+    h(!0);
   }, []);
-  const e = f && x, l = w(null);
+  const e = f && y, l = N(null);
   return c(() => {
     if (e)
       return T(l.current);
-  }, [e]), /* @__PURE__ */ t(h, { children: [
+  }, [e]), /* @__PURE__ */ t(k, { children: [
     e && /* @__PURE__ */ r("span", { ref: l, hidden: !0 }),
     /* @__PURE__ */ t(
       j,
@@ -119,7 +124,7 @@ const C = /* @__PURE__ */ a(
                 {
                   className: s(
                     "rst:fixed rst:inset-0 rst:transition-opacity",
-                    n === "glass" ? "rst:bg-slate-900/40 rst:dark:bg-black/60" : "rst:bg-slate-900/60 rst:dark:bg-black/80 rst:backdrop-blur-sm"
+                    n === "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"
                   )
                 }
               )
@@ -135,17 +140,18 @@ const C = /* @__PURE__ */ a(
               leave: "rst:ease-in rst:duration-200",
               leaveFrom: "rst:opacity-100 rst:scale-100",
               leaveTo: "rst:opacity-0 rst:scale-95",
+              afterLeave: x,
               children: /* @__PURE__ */ t(
                 D,
                 {
                   className: s(
-                    C({ size: p, variant: n, status: u }),
-                    b
+                    L({ size: b, variant: n, status: g }),
+                    u
                   ),
                   children: [
                     /* @__PURE__ */ t("div", { className: "rst:flex rst:items-start rst:justify-between", children: [
                       /* @__PURE__ */ t("div", { children: [
-                        /* @__PURE__ */ r(V, { as: "h2", className: s(L()), children: g }),
+                        /* @__PURE__ */ r(V, { as: "h2", className: s(C()), children: p }),
                         i && /* @__PURE__ */ r("p", { className: s(P()), children: i })
                       ] }),
                       /* @__PURE__ */ r("div", { className: "rst:ml-4 rst:flex rst:shrink-0", children: /* @__PURE__ */ r(
@@ -155,7 +161,7 @@ const C = /* @__PURE__ */ a(
                           onClick: o,
                           className: s(R()),
                           "aria-label": "Close dialog",
-                          children: /* @__PURE__ */ r(N, { icon: F, className: "rst:h-5 rst:w-5" })
+                          children: /* @__PURE__ */ r(_, { icon: F, className: "rst:h-5 rst:w-5" })
                         }
                       ) })
                     ] }),

package/dist/components/organisms/ModerationQueue/ModerationQueue.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("react"),z=require("../../../lib/utils.cjs"),xe=require("../../atoms/Button/Button.cjs"),Oe=require("../../atoms/Card/Card.cjs"),he=require("../../atoms/Spinner/Spinner.cjs"),Pe=require("../../atoms/Textarea/Textarea.cjs"),Z=require("../../molecules/Alert/Alert.cjs"),ze=require("../../molecules/EmptyState/EmptyState.cjs"),De=require("../../molecules/RadioGroup/RadioGroup.cjs"),He=require("./queue-actions.cjs"),pe={primary:{colorScheme:"primary",variant:"solid"},success:{colorScheme:"success",variant:"solid"},danger:{colorScheme:"error",variant:"soft"},neutral:{colorScheme:"neutral",variant:"outline"}},Ke={edit:He.editAction},R=o=>o.edit?o:null,Qe=o=>o===0?"None left.":`${o} left.`,Ge=o=>Math.min(6,Math.max(1,o)),We=o=>o instanceof Error&&o.message?o.message:"Something went wrong.";function B(o,f){const p={...o};return delete p[f],p}function _({busy:o=!1,blocked:f=!1,onClick:p,children:j,className:v,...y}){const g=o||f;return n.jsx(xe.Button,{size:"lg",...y,"aria-disabled":g||void 0,"aria-busy":o||void 0,startIcon:o?n.jsx(he.Spinner,{size:"sm",variant:"current"}):void 0,className:z.cn(f&&!o&&"rst:cursor-not-allowed rst:opacity-50",v),onClick:T=>{if(g){T.preventDefault();return}p?.(T)},children:j})}function Je({label:o,hideLabel:f=!1,headingLevel:p=2,itemHeadingLevel:j,items:v,getKey:y,itemLabel:g,renderMeta:T,renderContent:ve,actions:D,status:ee="ready",error:be,onRetry:te,empty:re={title:"Nothing waiting"},density:ne="comfortable",footer:ye,className:Se}){const je=typeof D=="function"?D(Ke):D,N=a.useId(),q=a.useRef(null),k=v.map(y),E=a.useRef(new Map);E.current=new Map(v.map((e,t)=>[k[t],e]));const[H,qe]=a.useState({}),$=a.useRef({}),se=e=>{$.current=e($.current),qe($.current)},[oe,F]=a.useState({}),[ce,ke]=a.useState({}),x=a.useRef({}),h=(e,t)=>{x.current=t?{...x.current,[e]:t}:B(x.current,e),ke(x.current)},[K,$e]=a.useState({text:"",n:0}),Q=a.useRef([]),w=a.useRef(null),ie=a.useCallback(e=>{Q.current.push(e),!w.current&&(w.current=setTimeout(()=>{w.current=null;const t=Q.current.join(" ");Q.current=[],$e(r=>({text:t,n:r.n+1}))},0))},[]);a.useLayoutEffect(()=>()=>{w.current&&clearTimeout(w.current)},[]);const[Re,Ne]=a.useState(0),G=a.useRef(null),S=a.useCallback(e=>{G.current=e,Ne(t=>t+1)},[]),ae=a.useCallback(e=>{const t=q.current;if(!t)return null;const r="key"in e?CSS.escape(e.key):"";switch(e.kind){case"item":return t.querySelector(`[data-queue-item="${r}"]`);case"empty":return t.querySelector("[data-queue-empty]");case"trigger":return t.querySelector(`[data-queue-item="${r}"] [data-queue-action="${CSS.escape(e.actionId)}"]`);case"step":return t.querySelector(`[data-queue-item="${r}"] [data-queue-step]`)}},[]);a.useLayoutEffect(()=>{const e=G.current;if(!e)return;G.current=null,(ae(e)??q.current?.querySelector("[data-queue-item]")??q.current?.querySelector("[data-queue-empty]"))?.focus()},[Re,ae]);const W=a.useRef(null),we=e=>()=>{W.current=e},Ce=e=>{e.relatedTarget&&!q.current?.contains(e.relatedTarget)&&(W.current=null)},A=e=>{if(W.current!==e)return!1;const t=document.activeElement;return!t||t===document.body?!0:q.current?.contains(t)?!!t.closest(`[data-queue-item="${CSS.escape(e)}"]`):!1},C=a.useRef(null),M=(e,t)=>{C.current=t,h(e.key,{...e,open:!1})},le=a.useRef(k),J=a.useRef(new Map),[,Ie]=a.useState(0),U=a.useRef(new Set),ue=(e,t,r)=>{const c=t.indexOf(e),d=t.slice(c+1).find(i=>r.has(i));if(d)return{kind:"item",key:d};const s=t.slice(0,c).reverse().find(i=>r.has(i));return s?{kind:"item",key:s}:{kind:"empty"}};a.useLayoutEffect(()=>{const e=le.current;le.current=k;const t=new Set(k),r=J.current;J.current=new Map;const c=[];let d=!1;for(const[s,i]of r){const l=t.has(s);c.push(i.announce??i.sentence),l||(d=!0),U.current.delete(s);const u=l?{kind:"trigger",key:s,actionId:i.actionId}:e.includes(s)?ue(s,e,t):null,m=x.current[s];if(m?.surface)M(m,u??{kind:"empty"});else{const I=A(s);m&&h(s,null),u&&I&&S(u)}}for(const s of e.filter(i=>!t.has(i))){if(r.has(s))continue;F(m=>s in m?B(m,s):m);const i=ue(s,e,t),l=C.current;if(l&&"key"in l&&l.key===s&&(C.current=i),$.current[s]){U.current.add(s),A(s)&&S(i);continue}const u=x.current[s];if(u&&!(u.surface&&!u.open))if(c.push(`${u.label} was decided elsewhere.`),d=!0,u.surface)M(u,i);else{const m=A(s);h(s,null),m&&S(i)}else!u&&A(s)&&S(i)}c.length&&ie(`${c.join(" ")}${d?` ${Qe(k.length)}`:""}`)});const L=async(e,t,r,c)=>{const d=E.current.get(e)??t,s=g(d),i=r.edit?R(r).run:r.run;se(l=>({...l,[e]:r.id})),F(l=>B(l,e));try{const l=await i(d,c);J.current.set(e,{actionId:r.id,sentence:`${r.done??r.label}: ${s}.`,announce:l?l.announce:void 0}),Ie(u=>u+1)}catch(l){const u=We(l);ie(`${r.label} didn't go through for ${s}. ${u}`);const m=x.current[e];U.current.delete(e)?m?.surface?M(m,{kind:"empty"}):m&&h(e,null):m?h(e,{...m,error:u}):F(I=>({...I,[e]:u}))}finally{se(l=>B(l,e))}},Be=(e,t)=>{const r=y(e),c=R(t);if(!t.confirm&&!t.reason&&!c){L(r,e,t,{});return}F(d=>B(d,r)),h(r,{key:r,label:g(e),item:e,action:t,draft:c?c.edit.initial(e):void 0,reason:{},surface:!!c?.edit.surface,open:!0}),c?.edit.surface||S({kind:"step",key:r})},V=e=>{const t=x.current[e];if(!t||$.current[e])return;const r={kind:"trigger",key:e,actionId:t.action.id};t.surface?M(t,r):(h(e,null),S(r))},Te=e=>{const t=x.current[e];!t||$.current[e]||ge(t,E.current.get(e)??t.item)||(t.action.edit?L(e,t.item,t.action,{draft:t.draft}):t.action.reason?L(e,t.item,t.action,{reason:Ue(t.reason)}):L(e,t.item,t.action,{}))},Ee=e=>{const t=C.current;C.current=null,h(e,null),t&&S(t)},Fe=`h${p}`,de=j??Ge(p+1),Ae=`h${de}`,X=`${N}-label`,fe=(e,t)=>{const{action:r}=e,c=R(r),d=E.current.get(e.key)??e.item,s=!!H[e.key],i=ge(e,d),l=`${N}-step-${t}-message`,u=n.jsx(_,{...pe[r.tone??"neutral"],busy:s,blocked:!!i,"aria-describedby":i?l:void 0,onClick:()=>Te(e.key),"data-queue-submit":"",children:c?c.edit.submitLabel:r.label}),m=n.jsx(_,{variant:"ghost",colorScheme:"neutral",blocked:s,onClick:()=>V(e.key),children:"Cancel"}),I=n.jsxs(n.Fragment,{children:[r.reason&&n.jsx(Ve,{id:`${N}-step-${t}`,step:r.reason,value:e.reason,disabled:s,onChange:Y=>h(e.key,{...x.current[e.key],reason:Y})}),c&&n.jsx(c.edit.Form,{item:d,value:e.draft,onChange:Y=>h(e.key,{...x.current[e.key],draft:Y})}),i&&n.jsx("p",{id:l,className:"rst:text-sm rst:text-error-600 rst:dark:text-error-400","data-queue-validation":"",children:i}),e.error&&n.jsx(Z.Alert,{colorScheme:"error",role:"group","aria-live":"off",children:e.error})]});return{submitButton:u,cancelButton:m,fields:I}},Me=(e,t)=>{const{submitButton:r,cancelButton:c,fields:d}=fe(e,t),s=`${N}-step-${t}-prompt`,i=R(e.action),l=e.action.confirm?.prompt??e.action.reason?.prompt??i?.edit.title;return n.jsxs("div",{role:"group","aria-labelledby":s,tabIndex:-1,"data-queue-step":"",onKeyDown:u=>{u.key==="Escape"&&(u.stopPropagation(),V(e.key))},className:"rst:flex rst:flex-col rst:gap-3 rst:rounded-lg rst:border rst:border-[var(--roster-card-border)] rst:p-4 rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",children:[n.jsx("p",{id:s,className:"rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]",children:l}),i?.edit.description&&n.jsx("p",{className:"rst:text-sm rst:text-gray-600 rst:dark:text-gray-300",children:i.edit.description}),d,n.jsxs("div",{className:"rst:flex rst:flex-wrap rst:gap-2",children:[r,c]})]})},Le=(e,t)=>{const r=H[t];return n.jsx("div",{role:"group","aria-label":`Decide: ${g(e)}`,className:"rst:flex rst:flex-wrap rst:gap-2",children:je.filter(c=>!c.hidden?.(e)).map(c=>n.jsx(_,{...pe[c.tone??"neutral"],"data-queue-action":c.id,busy:r===c.id,blocked:!!r&&r!==c.id,onClick:()=>Be(e,c),children:c.label},c.id))})},b=Object.values(ce).find(e=>e.surface)??null,O=b?R(b.action):null,me=O?.edit.surface,P=b?fe(b,-1):null;return n.jsxs("section",{ref:q,"aria-labelledby":X,onBlur:Ce,className:z.cn("rst:font-ui rst:flex rst:flex-col rst:gap-4",Se),children:[n.jsx(Fe,{id:X,className:z.cn("rst:text-lg rst:font-semibold rst:text-[var(--roster-control-text)]",f&&"rst:sr-only"),children:o}),n.jsxs("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"rst:sr-only","data-queue-live":"","data-queue-live-n":K.n,children:[K.text,K.n%2?" ":""]}),ee==="loading"?n.jsx("div",{className:"rst:flex rst:justify-center rst:py-12","aria-busy":"true",children:n.jsx(he.Spinner,{size:"lg",label:`Loading ${o}`})}):ee==="error"?n.jsx(Z.Alert,{colorScheme:"error",children:n.jsxs("div",{className:"rst:flex rst:flex-col rst:items-start rst:gap-3",children:[n.jsx("div",{children:be??"The queue couldn't load."}),te&&n.jsx(xe.Button,{size:"lg",variant:"outline",colorScheme:"neutral",onClick:te,children:"Retry"})]})}):v.length===0?n.jsx(ze.EmptyState,{title:re.title,description:re.description,headingLevel:de,tabIndex:-1,"data-queue-empty":"",className:"rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring"}):n.jsx("ul",{role:"list","aria-labelledby":X,className:"rst:m-0 rst:flex rst:list-none rst:flex-col rst:gap-3 rst:p-0",children:v.map((e,t)=>{const r=k[t],c=`${N}-item-${t}`,d=T?.(e),s=ce[r];return n.jsx("li",{children:n.jsx("article",{"data-queue-item":r,tabIndex:-1,"aria-labelledby":c,onFocus:we(r),className:"rst:rounded-xl rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",children:n.jsx(Oe.Card,{padding:ne==="compact"?"sm":"md",children:n.jsxs("div",{className:z.cn("rst:flex rst:flex-col",ne==="compact"?"rst:gap-3":"rst:gap-4"),children:[n.jsxs("div",{className:"rst:flex rst:flex-wrap rst:items-baseline rst:gap-x-3 rst:gap-y-1",children:[n.jsx(Ae,{id:c,className:"rst:text-base rst:font-semibold",children:g(e)}),d&&n.jsx("div",{className:"rst:flex rst:flex-wrap rst:items-center rst:gap-2 rst:text-sm rst:text-gray-600 rst:dark:text-gray-300",children:d})]}),n.jsx("div",{className:"rst:min-w-0",children:ve(e)}),oe[r]&&n.jsx(Z.Alert,{colorScheme:"error",role:"group","aria-live":"off",children:oe[r]}),s&&!s.surface?Me(s,t):Le(e,r)]})})})},r)})}),ye,me&&b&&O&&P&&n.jsx(me,{open:b.open,title:O.edit.title,description:O.edit.description,busy:!!H[b.key],onCancel:()=>V(b.key),onAfterClose:()=>Ee(b.key),submitButton:P.submitButton,cancelButton:P.cancelButton,children:n.jsx("div",{className:"rst:flex rst:flex-col rst:gap-4",children:P.fields})})]})}function ge(o,f){const p=R(o.action);if(p)return p.edit.validate?.(o.draft,f);if(o.action.reason){if(o.action.reason.required&&!o.reason.value)return"Pick a reason.";if(o.action.reason.note==="required"&&!o.reason.note?.trim())return"Add a note."}}function Ue(o){const f=o.note?.trim();return{...o.value?{value:o.value}:{},...f?{note:f}:{}}}function Ve({id:o,step:f,value:p,disabled:j,onChange:v}){const y=f.note??"optional";return n.jsxs(n.Fragment,{children:[f.options&&f.options.length>0&&n.jsx(De.RadioGroup,{label:f.required?"Reason":"Reason (optional)",options:f.options,value:p.value??"",onChange:g=>v({...p,value:g}),disabled:j}),y!=="none"&&n.jsx(Pe.Textarea,{id:`${o}-note`,label:f.noteLabel??(y==="required"?"Note":"Note (optional)"),rows:3,value:p.note??"",onChange:g=>v({...p,note:g.target.value}),disabled:j})]})}exports.ModerationQueue=Je;

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

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import { QueueAction, QueueActionKit, QueueCheckedEditAction, QueueHeadingLevel } from './queue-actions';
+export interface ModerationQueueProps<T> {
+    /** The queue's heading, and the list's accessible name. */
+    label: string;
+    /** Keep the heading for assistive technology only, when the page already titles the queue. */
+    hideLabel?: boolean;
+    /** The queue heading's level. `2` by default. */
+    headingLevel?: QueueHeadingLevel;
+    /** Each item's heading level. One below `headingLevel` by default. */
+    itemHeadingLevel?: QueueHeadingLevel;
+    /** What's waiting. Remove an item once its decision lands; the queue notices. */
+    items: readonly T[];
+    getKey: (item: T) => string;
+    /** The item's heading, and what announcements call it: "Recipe from Dana". */
+    itemLabel: (item: T) => string;
+    /** Beside the heading: badges, a time, who sent it. */
+    renderMeta?: (item: T) => ReactNode;
+    /** The item's body: its text, its previews, links out. */
+    renderContent: (item: T) => ReactNode;
+    /**
+     * What a reviewer can decide. A list, or a function returning one: the
+     * function form is handed `edit`, which types an edit action's draft, and
+     * is the one to use inline in JSX.
+     *
+     *   actions={(a) => [
+     *     { id: "approve", label: "Approve", run: (r) => approve(r.id) },
+     *     a.edit({ id: "edit", label: "Edit", edit: { initial: (r) => ({ … }), … },
+     *              run: (r, { draft }) => save(r.id, draft) }),
+     *   ]}
+     */
+    actions: readonly QueueAction<T>[] | ((kit: QueueActionKit<T>) => readonly QueueAction<T>[]);
+    /** `"loading"` before the first answer, `"error"` when the queue itself can't load. */
+    status?: "ready" | "loading" | "error";
+    /** The whole-queue error, shown with a Retry when `onRetry` is passed. */
+    error?: ReactNode;
+    onRetry?: () => void;
+    empty?: {
+        title: string;
+        description?: string;
+    };
+    density?: "comfortable" | "compact";
+    /** After the list: "Load more", if the app pages. */
+    footer?: ReactNode;
+    className?: string;
+}
+/**
+ * A queue of things waiting for a decision: submissions to approve, reports to
+ * resolve, claims to check before they publish.
+ *
+ * The app owns the data and every request; this owns the layout, the states,
+ * the steps and the keyboard. It never fetches. An action's `run` is the only
+ * path from a decision to the network, and the app says whether the item has
+ * left by removing it from `items`.
+ *
+ * What it promises, each pinned in ModerationQueue.checks.stories.tsx:
+ *   - Only the clicked action is busy, and it keeps focus while it is. That
+ *     item's other actions wait; every other item stays live.
+ *   - A decision that lands and removes the item is announced with how many
+ *     are left, and focus moves to the next item, the previous one, or the
+ *     empty state. Never to the page.
+ *   - A decision that fails leaves the item where it was, says why, and leaves
+ *     focus on the button that tried. A step stays open with its draft.
+ *   - Confirm, reason and edit steps open in place (an edit may open in a
+ *     Dialog or Sheet instead), take focus, and give it back on Escape.
+ *   - An item that disappears for any other reason, with its step open,
+ *     closes the step without deciding and is announced once as decided
+ *     elsewhere. Focus moves only if it was inside the item.
+ *   - Several outcomes in one render are said in one sentence.
+ */
+declare function ModerationQueue<T>({ label, hideLabel, headingLevel, itemHeadingLevel, items, getKey, itemLabel, renderMeta, renderContent, actions: actionsProp, status, error, onRetry, empty, density, footer, className, }: ModerationQueueProps<T>): import("react/jsx-runtime").JSX.Element;
+export type { QueueCheckedEditAction };
+export { ModerationQueue };