@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/FileUpload.js

@@ -0,0 +1,128 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { useId as U, useRef as C, useState as y } from "react";
+import { cn as u } from "../lib/cn.js";
+import { formatBytes as c } from "../lib/format.js";
+import { Icon as i } from "./Icon.js";
+import { IconButton as F } from "./IconButton.js";
+import { Progress as L } from "./Progress.js";
+import { useUiLocale as O, useUiStrings as R } from "../lib/i18n/provider.js";
+function J({
+  files: m = [],
+  onFilesAdded: D,
+  onFileRemoved: k,
+  accept: w,
+  multiple: j = !0,
+  maxSize: t,
+  disabled: d = !1,
+  label: z,
+  hint: g,
+  className: B
+}) {
+  const x = U(), n = O(), o = R().fileUpload, l = C(0), [h, f] = y(!1), [b, _] = y([]);
+  function v(e) {
+    if (!e) return;
+    const p = Array.from(e), I = t ? p.filter((s) => s.size > t) : [], N = t ? p.filter((s) => s.size <= t) : p;
+    _(
+      I.map((s) => o.tooBig(s.name, c(s.size, n), c(t, n)))
+    ), N.length && D?.(N);
+  }
+  return /* @__PURE__ */ a("div", { className: u("flex w-full min-w-0 flex-col gap-3", B), children: [
+    /* @__PURE__ */ a(
+      "label",
+      {
+        htmlFor: x,
+        onDragEnter: (e) => {
+          e.preventDefault(), l.current++, f(!0);
+        },
+        onDragLeave: (e) => {
+          e.preventDefault(), l.current--, l.current <= 0 && f(!1);
+        },
+        onDragOver: (e) => e.preventDefault(),
+        onDrop: (e) => {
+          e.preventDefault(), l.current = 0, f(!1), d || v(e.dataTransfer.files);
+        },
+        className: u(
+          "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl px-6 py-10 text-center",
+          /* `dx-ground-sunken`: the interaction fills mix from the surface a
+             thing is painted ON, and this well is two ramp steps below the
+             default. Without it the hover lift is measured from the wrong
+             floor. tokens.css, "GROUND SCOPES". */
+          "dx-ground-sunken border-2 border-dashed border-border bg-surface-sunken",
+          "transition-[var(--tx-colors),scale] duration-(--dur-fast) ease-hover",
+          "hover:border-border-interactive hover:bg-surface-hover",
+          /* The zone grows very slightly under a dragged file. It is the only
+             feedback available at the moment the pointer is holding something
+             and the cursor itself cannot change. */
+          h && "scale-[1.01] border-control bg-control-subtle",
+          d && "pointer-events-none opacity-45",
+          "has-focus-visible:border-control has-focus-visible:shadow-[0_0_0_3px_var(--control-focus-halo)]"
+        ),
+        children: [
+          /* @__PURE__ */ r(
+            "span",
+            {
+              className: u(
+                "grid size-12 place-items-center rounded-full bg-surface-raised text-tertiary",
+                "transition-[var(--tx-colors),translate] duration-(--dur-base) ease-snappy",
+                h && "-translate-y-1 bg-control text-control-contrast"
+              ),
+              children: /* @__PURE__ */ r(i, { name: "upload", size: "lg" })
+            }
+          ),
+          /* @__PURE__ */ r("span", { className: "text-sm font-medium text-primary", children: z ?? o.dropOrBrowse }),
+          g && /* @__PURE__ */ r("span", { className: "text-2xs text-tertiary", children: g }),
+          t && /* @__PURE__ */ r("span", { className: "text-2xs text-tertiary", children: o.upTo(c(t, n)) }),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              id: x,
+              type: "file",
+              accept: w,
+              multiple: j,
+              disabled: d,
+              onChange: (e) => {
+                v(e.target.files), e.target.value = "";
+              },
+              className: "sr-only"
+            }
+          )
+        ]
+      }
+    ),
+    b.length > 0 && /* @__PURE__ */ r("ul", { role: "alert", className: "flex flex-col gap-1", children: b.map((e) => /* @__PURE__ */ a("li", { className: "flex items-start gap-1.5 text-2xs text-danger-text", children: [
+      /* @__PURE__ */ r(i, { name: "circle-alert", size: "xs", className: "mt-px shrink-0" }),
+      e
+    ] }, e)) }),
+    m.length > 0 && /* @__PURE__ */ r("ul", { className: "flex flex-col gap-2", children: m.map((e) => /* @__PURE__ */ a(
+      "li",
+      {
+        className: "flex items-center gap-3 rounded-lg border border-border bg-surface p-3 animate-rise-in",
+        children: [
+          /* @__PURE__ */ r("span", { className: "grid size-9 shrink-0 place-items-center rounded-md bg-surface-inset text-tertiary", children: /* @__PURE__ */ r(i, { name: e.error ? "circle-alert" : "file", size: "sm", className: e.error ? "text-danger" : void 0 }) }),
+          /* @__PURE__ */ a("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+            /* @__PURE__ */ a("span", { className: "flex items-baseline justify-between gap-3", children: [
+              /* @__PURE__ */ r("span", { className: "truncate text-sm font-medium text-primary", children: e.file.name }),
+              /* @__PURE__ */ r("span", { className: "shrink-0 font-mono text-2xs tabular-nums text-tertiary", children: c(e.file.size, n) })
+            ] }),
+            e.error ? /* @__PURE__ */ r("span", { className: "text-2xs text-danger-text", children: e.error }) : e.progress !== void 0 && e.progress < 100 && /* @__PURE__ */ r(L, { value: e.progress, size: "sm", showValue: !1 })
+          ] }),
+          /* @__PURE__ */ r(
+            F,
+            {
+              size: "xs",
+              tone: "danger",
+              label: o.remove(e.file.name),
+              icon: /* @__PURE__ */ r(i, { name: "x", size: "xs" }),
+              onClick: () => k?.(e.id)
+            }
+          )
+        ]
+      },
+      e.id
+    )) })
+  ] });
+}
+export {
+  J as FileUpload
+};
+//# sourceMappingURL=FileUpload.js.map

package/dist/components/FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.js","sources":["../../src/components/FileUpload.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useId, useRef, useState } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { formatBytes } from \"../lib/format\";\nimport { useUiLocale, useUiStrings } from \"../lib/i18n\";\nimport { Icon } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { Progress } from \"./Progress\";\n\n/* ----------------------------------------------------------------------------\n   FILE UPLOAD\n\n   THE DROP ZONE IS THE EASY HALF, and the half most implementations stop at.\n   The parts that decide whether it feels reliable:\n\n     - It is a real <input type=\"file\"> with a <label>, so it is focusable, is\n       announced correctly, and opens the picker on Enter — none of which a\n       div with an onClick does.\n     - Drag state is counted, not toggled. `dragenter`/`dragleave` fire for\n       every CHILD element the pointer crosses, so a naive boolean flickers off\n       the moment the cursor moves over the icon inside the zone. A depth\n       counter is the fix, and its absence is the single most common bug in\n       hand-rolled drop zones.\n     - Rejected files say WHY. \"Invalid file\" tells someone nothing; naming the\n       limit they exceeded lets them fix it without guessing.\n\n   Upload progress belongs to the caller — this component knows about files,\n   not about your transport.\n   -------------------------------------------------------------------------- */\n\nexport type UploadFile = {\n  id: string;\n  file: File;\n  /** 0–100 while uploading; omit when the caller is not tracking it. */\n  progress?: number;\n  error?: string;\n};\n\nexport interface FileUploadProps {\n  files?: UploadFile[];\n  onFilesAdded?: (files: File[]) => void;\n  onFileRemoved?: (id: string) => void;\n  accept?: string;\n  multiple?: boolean;\n  /** Bytes. Files over this are rejected with a message naming the limit. */\n  maxSize?: number;\n  disabled?: boolean;\n  label?: ReactNode;\n  hint?: ReactNode;\n  className?: string;\n}\n\nexport function FileUpload({\n  files = [],\n  onFilesAdded,\n  onFileRemoved,\n  accept,\n  multiple = true,\n  maxSize,\n  disabled = false,\n  label,\n  hint,\n  className,\n}: FileUploadProps) {\n  const inputId = useId();\n  const locale = useUiLocale();\n  const strings = useUiStrings().fileUpload;\n  /* A COUNTER, not a boolean — see the note above. */\n  const dragDepth = useRef(0);\n  const [dragging, setDragging] = useState(false);\n  const [rejected, setRejected] = useState<string[]>([]);\n\n  function accept_(list: FileList | null) {\n    if (!list) return;\n    const incoming = Array.from(list);\n    const tooBig = maxSize ? incoming.filter((f) => f.size > maxSize) : [];\n    const ok = maxSize ? incoming.filter((f) => f.size <= maxSize) : incoming;\n\n    setRejected(\n      tooBig.map((f) => strings.tooBig(f.name, formatBytes(f.size, locale), formatBytes(maxSize!, locale))),\n    );\n    if (ok.length) onFilesAdded?.(ok);\n  }\n\n  return (\n    <div className={cn(\"flex w-full min-w-0 flex-col gap-3\", className)}>\n      <label\n        htmlFor={inputId}\n        onDragEnter={(e) => {\n          e.preventDefault();\n          dragDepth.current++;\n          setDragging(true);\n        }}\n        onDragLeave={(e) => {\n          e.preventDefault();\n          dragDepth.current--;\n          if (dragDepth.current <= 0) setDragging(false);\n        }}\n        onDragOver={(e) => e.preventDefault()}\n        onDrop={(e) => {\n          e.preventDefault();\n          dragDepth.current = 0;\n          setDragging(false);\n          if (!disabled) accept_(e.dataTransfer.files);\n        }}\n        className={cn(\n          \"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl px-6 py-10 text-center\",\n          /* `dx-ground-sunken`: the interaction fills mix from the surface a\n             thing is painted ON, and this well is two ramp steps below the\n             default. Without it the hover lift is measured from the wrong\n             floor. tokens.css, \"GROUND SCOPES\". */\n          \"dx-ground-sunken border-2 border-dashed border-border bg-surface-sunken\",\n          \"transition-[var(--tx-colors),scale] duration-(--dur-fast) ease-hover\",\n          \"hover:border-border-interactive hover:bg-surface-hover\",\n          /* The zone grows very slightly under a dragged file. It is the only\n             feedback available at the moment the pointer is holding something\n             and the cursor itself cannot change. */\n          dragging && \"scale-[1.01] border-control bg-control-subtle\",\n          disabled && \"pointer-events-none opacity-45\",\n          \"has-focus-visible:border-control has-focus-visible:shadow-[0_0_0_3px_var(--control-focus-halo)]\",\n        )}\n      >\n        <span\n          className={cn(\n            \"grid size-12 place-items-center rounded-full bg-surface-raised text-tertiary\",\n            \"transition-[var(--tx-colors),translate] duration-(--dur-base) ease-snappy\",\n            dragging && \"-translate-y-1 bg-control text-control-contrast\",\n          )}\n        >\n          <Icon name=\"upload\" size=\"lg\" />\n        </span>\n        <span className=\"text-sm font-medium text-primary\">{label ?? strings.dropOrBrowse}</span>\n        {hint && <span className=\"text-2xs text-tertiary\">{hint}</span>}\n        {maxSize && (\n          <span className=\"text-2xs text-tertiary\">{strings.upTo(formatBytes(maxSize, locale))}</span>\n        )}\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={(e) => {\n            accept_(e.target.files);\n            /* Cleared so re-picking the SAME file fires change again — without\n               this, removing a file and re-adding it silently does nothing. */\n            e.target.value = \"\";\n          }}\n          className=\"sr-only\"\n        />\n      </label>\n\n      {rejected.length > 0 && (\n        <ul role=\"alert\" className=\"flex flex-col gap-1\">\n          {rejected.map((message) => (\n            <li key={message} className=\"flex items-start gap-1.5 text-2xs text-danger-text\">\n              <Icon name=\"circle-alert\" size=\"xs\" className=\"mt-px shrink-0\" />\n              {message}\n            </li>\n          ))}\n        </ul>\n      )}\n\n      {files.length > 0 && (\n        <ul className=\"flex flex-col gap-2\">\n          {files.map((item) => (\n            <li\n              key={item.id}\n              className=\"flex items-center gap-3 rounded-lg border border-border bg-surface p-3 animate-rise-in\"\n            >\n              <span className=\"grid size-9 shrink-0 place-items-center rounded-md bg-surface-inset text-tertiary\">\n                <Icon name={item.error ? \"circle-alert\" : \"file\"} size=\"sm\" className={item.error ? \"text-danger\" : undefined} />\n              </span>\n              <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n                <span className=\"flex items-baseline justify-between gap-3\">\n                  <span className=\"truncate text-sm font-medium text-primary\">{item.file.name}</span>\n                  <span className=\"shrink-0 font-mono text-2xs tabular-nums text-tertiary\">\n                    {formatBytes(item.file.size, locale)}\n                  </span>\n                </span>\n                {item.error ? (\n                  <span className=\"text-2xs text-danger-text\">{item.error}</span>\n                ) : (\n                  item.progress !== undefined &&\n                  item.progress < 100 && (\n                    <Progress value={item.progress} size=\"sm\" showValue={false} />\n                  )\n                )}\n              </span>\n              {/* Destructive: removing a queued file discards it. The tone is\n                  an enhancement on top of the name, never the only signal. */}\n              <IconButton\n                size=\"xs\"\n                tone=\"danger\"\n                label={strings.remove(item.file.name)}\n                icon={<Icon name=\"x\" size=\"xs\" />}\n                onClick={() => onFileRemoved?.(item.id)}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"names":["FileUpload","files","onFilesAdded","onFileRemoved","accept","multiple","maxSize","disabled","label","hint","className","inputId","useId","locale","useUiLocale","strings","useUiStrings","dragDepth","useRef","dragging","setDragging","useState","rejected","setRejected","accept_","list","incoming","tooBig","f","ok","formatBytes","cn","jsxs","jsx","Icon","message","item","Progress","IconButton"],"mappings":";;;;;;;;AAoDO,SAASA,EAAW;AAAA,EACzB,OAAAC,IAAQ,CAAA;AAAA,EACR,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AACF,GAAoB;AAClB,QAAMC,IAAUC,EAAA,GACVC,IAASC,EAAA,GACTC,IAAUC,IAAe,YAEzBC,IAAYC,EAAO,CAAC,GACpB,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAUC,CAAW,IAAIF,EAAmB,CAAA,CAAE;AAErD,WAASG,EAAQC,GAAuB;AACtC,QAAI,CAACA,EAAM;AACX,UAAMC,IAAW,MAAM,KAAKD,CAAI,GAC1BE,IAASrB,IAAUoB,EAAS,OAAO,CAACE,MAAMA,EAAE,OAAOtB,CAAO,IAAI,CAAA,GAC9DuB,IAAKvB,IAAUoB,EAAS,OAAO,CAACE,MAAMA,EAAE,QAAQtB,CAAO,IAAIoB;AAEjE,IAAAH;AAAA,MACEI,EAAO,IAAI,CAACC,MAAMb,EAAQ,OAAOa,EAAE,MAAME,EAAYF,EAAE,MAAMf,CAAM,GAAGiB,EAAYxB,GAAUO,CAAM,CAAC,CAAC;AAAA,IAAA,GAElGgB,EAAG,UAAQ3B,IAAe2B,CAAE;AAAA,EAClC;AAEA,2BACG,OAAA,EAAI,WAAWE,EAAG,sCAAsCrB,CAAS,GAChE,UAAA;AAAA,IAAA,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASrB;AAAA,QACT,aAAa,CAAC,MAAM;AAClB,YAAE,eAAA,GACFM,EAAU,WACVG,EAAY,EAAI;AAAA,QAClB;AAAA,QACA,aAAa,CAAC,MAAM;AAClB,YAAE,eAAA,GACFH,EAAU,WACNA,EAAU,WAAW,KAAGG,EAAY,EAAK;AAAA,QAC/C;AAAA,QACA,YAAY,CAAC,MAAM,EAAE,eAAA;AAAA,QACrB,QAAQ,CAAC,MAAM;AACb,YAAE,eAAA,GACFH,EAAU,UAAU,GACpBG,EAAY,EAAK,GACZb,KAAUiB,EAAQ,EAAE,aAAa,KAAK;AAAA,QAC7C;AAAA,QACA,WAAWO;AAAA,UACT;AAAA;AAAA;AAAA;AAAA;AAAA,UAKA;AAAA,UACA;AAAA,UACA;AAAA;AAAA;AAAA;AAAA,UAIAZ,KAAY;AAAA,UACZZ,KAAY;AAAA,UACZ;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAA0B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF;AAAA,gBACT;AAAA,gBACA;AAAA,gBACAZ,KAAY;AAAA,cAAA;AAAA,cAGd,UAAA,gBAAAc,EAACC,GAAA,EAAK,MAAK,UAAS,MAAK,KAAA,CAAK;AAAA,YAAA;AAAA,UAAA;AAAA,4BAE/B,QAAA,EAAK,WAAU,oCAAoC,UAAA1B,KAASO,EAAQ,cAAa;AAAA,UACjFN,KAAQ,gBAAAwB,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAxB,GAAK;AAAA,UACvDH,KACC,gBAAA2B,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAlB,EAAQ,KAAKe,EAAYxB,GAASO,CAAM,CAAC,EAAA,CAAE;AAAA,UAEvF,gBAAAoB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAItB;AAAA,cACJ,MAAK;AAAA,cACL,QAAAP;AAAA,cACA,UAAAC;AAAA,cACA,UAAAE;AAAA,cACA,UAAU,CAAC,MAAM;AACf,gBAAAiB,EAAQ,EAAE,OAAO,KAAK,GAGtB,EAAE,OAAO,QAAQ;AAAA,cACnB;AAAA,cACA,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,IAGDF,EAAS,SAAS,KACjB,gBAAAW,EAAC,MAAA,EAAG,MAAK,SAAQ,WAAU,uBACxB,UAAAX,EAAS,IAAI,CAACa,MACb,gBAAAH,EAAC,MAAA,EAAiB,WAAU,sDAC1B,UAAA;AAAA,MAAA,gBAAAC,EAACC,KAAK,MAAK,gBAAe,MAAK,MAAK,WAAU,kBAAiB;AAAA,MAC9DC;AAAA,IAAA,KAFMA,CAGT,CACD,GACH;AAAA,IAGDlC,EAAM,SAAS,KACd,gBAAAgC,EAAC,MAAA,EAAG,WAAU,uBACX,UAAAhC,EAAM,IAAI,CAACmC,MACV,gBAAAJ;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAC,EAAC,UAAK,WAAU,qFACd,UAAA,gBAAAA,EAACC,GAAA,EAAK,MAAME,EAAK,QAAQ,iBAAiB,QAAQ,MAAK,MAAK,WAAWA,EAAK,QAAQ,gBAAgB,QAAW,GACjH;AAAA,UACA,gBAAAJ,EAAC,QAAA,EAAK,WAAU,sCACd,UAAA;AAAA,YAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,6CACd,UAAA;AAAA,cAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,6CAA6C,UAAAG,EAAK,KAAK,MAAK;AAAA,cAC5E,gBAAAH,EAAC,UAAK,WAAU,0DACb,YAAYG,EAAK,KAAK,MAAMvB,CAAM,EAAA,CACrC;AAAA,YAAA,GACF;AAAA,YACCuB,EAAK,QACJ,gBAAAH,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAAG,EAAK,OAAM,IAExDA,EAAK,aAAa,UAClBA,EAAK,WAAW,OACd,gBAAAH,EAACI,GAAA,EAAS,OAAOD,EAAK,UAAU,MAAK,MAAK,WAAW,GAAA,CAAO;AAAA,UAAA,GAGlE;AAAA,UAGA,gBAAAH;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAK;AAAA,cACL,OAAOvB,EAAQ,OAAOqB,EAAK,KAAK,IAAI;AAAA,cACpC,MAAM,gBAAAH,EAACC,GAAA,EAAK,MAAK,KAAI,MAAK,MAAK;AAAA,cAC/B,SAAS,MAAM/B,IAAgBiC,EAAK,EAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QACxC;AAAA,MAAA;AAAA,MA9BKA,EAAK;AAAA,IAAA,CAgCb,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/FilterMenu.js

@@ -0,0 +1,256 @@
+import { jsx as o, jsxs as g, Fragment as G } from "react/jsx-runtime";
+import { useId as K, useState as f, useRef as L, useEffect as D, useCallback as X } from "react";
+import { cn as S } from "../lib/cn.js";
+import { formatDate as F } from "../lib/values/date.js";
+import { Badge as q, BADGE_TONE_TEXT as Q } from "./Badge.js";
+import { Button as T } from "./Button.js";
+import { SwitchField as Y } from "./Choice.js";
+import { DateField as P } from "./DateField.js";
+import { Icon as E } from "./Icon.js";
+import { IconButton as Z } from "./IconButton.js";
+import { Input as H } from "./Input.js";
+import { Popover as ee } from "./Popover.js";
+import { Toggle as te } from "./Toggle.js";
+import { useUiStrings as V, useUiLocale as ne } from "../lib/i18n/provider.js";
+import { useNumberFormat as W } from "../lib/i18n/number-format.js";
+function Ne(e) {
+  return { kind: "single", ...e };
+}
+function Oe(e) {
+  return { kind: "multiple", ...e };
+}
+function M(e) {
+  const n = e.options.find((r) => r.tone !== void 0 && r.color !== void 0);
+  if (n !== void 0)
+    throw new Error(`FilterMenu: filter ${JSON.stringify(e.key)} option ${JSON.stringify(n.value)} has both a tone and a color. A color replaces the tone; give one.`);
+  const t = e.options.filter((r) => r.icon !== void 0).length;
+  if (t !== 0 && t !== e.options.length)
+    throw new Error(
+      `FilterMenu: filter ${JSON.stringify(e.key)} gives an icon to ${t} of its ${e.options.length} options. Give every option an icon or none, so the chips stay one shape.`
+    );
+}
+function U(e, n) {
+  const t = e.options.find((r) => r.value === n);
+  if (t === void 0 && e.keepUnlisted === !0) return { value: n, label: n };
+  if (t === void 0)
+    throw new Error(
+      `FilterMenu: filter ${JSON.stringify(e.key)} is set to a value no option offers: no option carries the value ${JSON.stringify(n)}. The control would name a filter that is not on offer; pass an option for every value the filter can hold.`
+    );
+  return t;
+}
+function B(e) {
+  switch (e.kind) {
+    case "single":
+      return M(e), e.value === void 0 ? [] : [{ id: e.value, option: U(e, e.value), remove: () => e.onValueChange(void 0) }];
+    case "multiple":
+      return M(e), e.value.map((n) => ({
+        id: n,
+        option: U(e, n),
+        remove: () => e.onValueChange(e.value.filter((t) => t !== n))
+      }));
+    case "boolean":
+      return e.value ? [{ id: e.key, remove: () => e.onValueChange(!1) }] : [];
+    case "date-range":
+      return e.value.from === null && e.value.to === null ? [] : [{ id: e.key, remove: () => e.onValueChange({ from: null, to: null }) }];
+    case "text":
+      return e.value.trim() === "" ? [] : [{ id: e.key, remove: () => e.onValueChange("") }];
+  }
+}
+function Fe(e) {
+  return e.reduce((n, t) => n + B(t).length, 0);
+}
+function _(e, n) {
+  if (e.kind === "multiple") {
+    e.onValueChange(e.value.includes(n) ? e.value.filter((t) => t !== n) : [...e.value, n]);
+    return;
+  }
+  e.onValueChange(e.value === n ? void 0 : n);
+}
+function Se({ fields: e, onClearAll: n, "aria-label": t, icon: r = "filter", size: u = "sm", align: m = "end", className: s }) {
+  const l = V().filterMenu, i = W(), c = K(), v = e.map((h) => ({ field: h, entries: B(h) })), w = ae(), p = v.reduce((h, { entries: d }) => h + d.length, 0);
+  return /* @__PURE__ */ o(
+    ee,
+    {
+      align: m,
+      "aria-labelledby": c,
+      trigger: /* @__PURE__ */ o(
+        Z,
+        {
+          icon: /* @__PURE__ */ g(G, { children: [
+            /* @__PURE__ */ o(E, { name: r, size: "sm" }),
+            p > 0 && /* @__PURE__ */ o("span", { className: "text-xs font-semibold tabular-nums", children: i(p) })
+          ] }),
+          label: l.triggerName(t, p, i(p)),
+          variant: "outline",
+          size: u,
+          className: S(p > 0 && "aspect-auto w-auto gap-1 px-2", s)
+        }
+      ),
+      children: /* @__PURE__ */ g("div", { className: "flex w-full min-w-0 flex-col gap-3", children: [
+        /* @__PURE__ */ g("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ o("span", { id: c, className: "text-2xs font-medium uppercase tracking-wide text-tertiary", children: t }),
+          p > 0 && /* @__PURE__ */ o(T, { variant: "ghost", size: "xs", onClick: n, children: l.clearAll })
+        ] }),
+        v.map(({ field: h, entries: d }) => /* @__PURE__ */ o(re, { field: h, chosen: d.map((x) => x.id), loads: w }, h.key))
+      ] })
+    }
+  );
+}
+function ae() {
+  const [e, n] = f({}), t = L(/* @__PURE__ */ new Set()), r = L(!0);
+  D(() => (r.current = !0, () => {
+    r.current = !1;
+  }), []);
+  const u = X((m, s = !1) => {
+    const l = m.loadOptions;
+    if (l === void 0 || t.current.has(m.key) && !s) return;
+    t.current.add(m.key), n((c) => ({ ...c, [m.key]: { status: "loading" } }));
+    const i = (c) => {
+      r.current && n((v) => ({ ...v, [m.key]: c }));
+    };
+    l().then(
+      (c) => i({ status: "ready", options: c }),
+      () => i({ status: "failed" })
+    );
+  }, []);
+  return { stateOf: (m) => e[m], start: u };
+}
+function re({ field: e, chosen: n, loads: t }) {
+  const r = K();
+  return e.kind === "boolean" ? /* @__PURE__ */ o(Y, { label: e.label, size: "sm", checked: e.value, onCheckedChange: (u) => e.onValueChange(u), fieldClassName: "w-fit" }) : /* @__PURE__ */ g("div", { role: "group", "aria-labelledby": r, className: "flex min-w-0 flex-col gap-1.5", children: [
+    /* @__PURE__ */ o("span", { id: r, className: "text-xs font-medium text-secondary", children: e.label }),
+    e.kind === "date-range" ? /* @__PURE__ */ o(le, { field: e }) : e.kind === "text" ? /* @__PURE__ */ o(ie, { field: e }) : /* @__PURE__ */ o(oe, { field: e, chosen: n, loads: t })
+  ] });
+}
+function oe({ field: e, chosen: n, loads: t }) {
+  const r = V().filterMenu, u = W(), [m, s] = f(""), [l, i] = f([]), [c, v] = f(!1), [w, p] = f(null), h = L(!1), { start: d } = t, x = e.loadOptions !== void 0;
+  D(() => {
+    x && d(e);
+  }, [x, d, e.key]);
+  const b = t.stateOf(e.key), y = m.trim(), k = y.toLocaleLowerCase(), I = b?.status === "ready" ? b.options : e.options, C = l.length === 0 ? I : [...I, ...l.filter((a) => !I.some((z) => z.value === a.value))];
+  b?.status === "ready" && M({ ...e, options: C });
+  const N = e.searchable === !0 && k !== "" ? C.filter((a) => `${a.label} ${a.description ?? ""}`.toLocaleLowerCase().includes(k)) : C, R = e.searchable === !0 && e.maxShown !== void 0 && N.length > e.maxShown, $ = R ? N.slice(0, e.maxShown) : N, j = x && (b === void 0 || b.status === "loading"), J = x && b?.status === "failed", O = e.searchable === !0 && e.onCreate !== void 0 && y !== "" && !C.some((a) => a.label.toLocaleLowerCase() === k || a.value.toLocaleLowerCase() === k), A = () => {
+    !O || e.onCreate === void 0 || h.current || (h.current = !0, v(!0), p(null), e.onCreate(y).then(
+      (a) => {
+        h.current = !1, v(!1), i((z) => [...z, a]), s(""), _(e, a.value);
+      },
+      (a) => {
+        h.current = !1, v(!1), p(a instanceof Error ? a.message : String(a));
+      }
+    ));
+  };
+  return /* @__PURE__ */ g(G, { children: [
+    e.searchable === !0 && /* @__PURE__ */ o(
+      H,
+      {
+        type: "search",
+        size: "sm",
+        "aria-label": r.searchOptions(e.label),
+        placeholder: r.searchOptions(e.label),
+        leading: /* @__PURE__ */ o(E, { name: "search", size: "sm" }),
+        value: m,
+        onChange: (a) => {
+          s(a.target.value), p(null);
+        },
+        onKeyDown: (a) => {
+          a.key === "Enter" && O && (a.preventDefault(), A());
+        }
+      }
+    ),
+    w !== null && /* @__PURE__ */ o("span", { role: "alert", className: "text-xs text-danger-text", children: w }),
+    j && /* @__PURE__ */ o("span", { role: "status", className: "text-xs text-tertiary", children: r.loadingOptions }),
+    J && /* @__PURE__ */ g("div", { role: "alert", className: "flex min-w-0 flex-wrap items-center gap-2 text-xs text-tertiary", children: [
+      /* @__PURE__ */ o("span", { children: r.loadFailed(e.label) }),
+      /* @__PURE__ */ o(T, { variant: "ghost", size: "xs", onClick: () => t.start(e, !0), children: r.tryAgain })
+    ] }),
+    R && /* @__PURE__ */ o("span", { className: "text-xs text-tertiary", children: r.firstOfMatches(u($.length), u(N.length), y) }),
+    !j && !J && /* @__PURE__ */ g("div", { className: S("flex min-w-0 gap-1.5", e.layout === "list" ? "flex-col items-stretch" : "flex-wrap", e.searchable === !0 && "max-h-48 overflow-y-auto"), children: [
+      $.map((a) => /* @__PURE__ */ g(
+        te,
+        {
+          size: "sm",
+          pressed: n.includes(a.value),
+          onPressedChange: () => _(e, a.value),
+          className: S("border border-border", (a.description !== void 0 || e.layout === "list") && se),
+          children: [
+            a.color !== void 0 && /* @__PURE__ */ o("span", { "aria-hidden": "true", "data-option-color": a.color, className: "size-2 shrink-0 rounded-full bg-(--badge-color)", style: { "--badge-color": a.color } }),
+            a.icon !== void 0 && /* @__PURE__ */ o(E, { name: a.icon, size: "sm", className: a.tone === void 0 ? void 0 : Q[a.tone] }),
+            a.label,
+            a.description !== void 0 && /* @__PURE__ */ o("span", { className: "min-w-0 truncate font-normal text-tertiary", children: a.description })
+          ]
+        },
+        a.value
+      )),
+      O && /* @__PURE__ */ o(T, { variant: "ghost", size: "sm", disabled: c, "aria-busy": c, onClick: A, className: "justify-start", children: c ? r.creating : (e.createLabel ?? r.createOption)(y) }),
+      $.length === 0 && !O && /* @__PURE__ */ o("span", { className: "text-xs text-tertiary", children: r.noMatches })
+    ] })
+  ] });
+}
+const se = "min-w-0 max-w-full shrink justify-start";
+function le({ field: e }) {
+  const n = V().filterMenu;
+  return /* @__PURE__ */ g("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ o(P, { "aria-label": n.dateFrom(e.label), value: e.value.from, onValueChange: (t) => e.onValueChange({ ...e.value, from: t }) }),
+    /* @__PURE__ */ o(P, { "aria-label": n.dateTo(e.label), value: e.value.to, onValueChange: (t) => e.onValueChange({ ...e.value, to: t }) })
+  ] });
+}
+function ie({ field: e }) {
+  const [n, t] = f(e.value);
+  D(() => t(e.value), [e.value]);
+  const r = () => {
+    n !== e.value && e.onValueChange(n);
+  };
+  return /* @__PURE__ */ o(
+    H,
+    {
+      size: "sm",
+      "aria-label": e.label,
+      placeholder: e.placeholder,
+      value: n,
+      onChange: (u) => t(u.target.value),
+      onKeyDown: (u) => {
+        u.key === "Enter" && r();
+      },
+      onBlur: r
+    }
+  );
+}
+function Ee({ fields: e, className: n }) {
+  const t = V().filterMenu, r = ne(), u = e.flatMap((s) => B(s).map((l) => ({ field: s, entry: l })));
+  if (u.length === 0) return null;
+  const m = (s, l) => {
+    if (l.option !== void 0) return l.option.label;
+    if (s.kind === "date-range") {
+      const { from: i, to: c } = s.value;
+      return i !== null && c !== null ? t.dateRange(F(i, r), F(c, r)) : i !== null ? t.dateRangeFrom(F(i, r)) : c !== null ? t.dateRangeUntil(F(c, r)) : null;
+    }
+    return s.kind === "text" ? s.value.trim() : null;
+  };
+  return /* @__PURE__ */ o("div", { className: S("flex min-w-0 flex-wrap items-center gap-1.5", n), children: u.map(({ field: s, entry: l }) => {
+    const i = m(s, l);
+    return /* @__PURE__ */ o(
+      q,
+      {
+        "data-filter-chip": `${s.key}:${l.id}`,
+        tone: l.option?.tone ?? "neutral",
+        color: l.option?.color,
+        icon: l.option?.icon !== void 0 ? /* @__PURE__ */ o(E, { name: l.option.icon, size: "xs" }) : void 0,
+        dismiss: {
+          label: i === null ? t.removeFlag(s.label) : t.removeFilter(s.label, i),
+          onDismiss: l.remove
+        },
+        children: i === null ? s.label : t.chipLabel(s.label, i)
+      },
+      `${s.key}:${l.id}`
+    );
+  }) });
+}
+export {
+  Ee as FilterChips,
+  Se as FilterMenu,
+  se as OPTION_WITH_DESCRIPTION,
+  Fe as activeFilterCount,
+  Oe as multipleFilter,
+  Ne as singleFilter
+};
+//# sourceMappingURL=FilterMenu.js.map

package/dist/components/FilterMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterMenu.js","sources":["../../src/components/FilterMenu.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState, type CSSProperties, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useNumberFormat, useUiLocale, useUiStrings } from \"../lib/i18n\";\nimport { formatDate } from \"../lib/values/date\";\nimport { Badge, BADGE_TONE_TEXT, type BadgeProps } from \"./Badge\";\nimport { Button } from \"./Button\";\nimport type { ButtonProps } from \"./Button\";\nimport { SwitchField } from \"./Choice\";\nimport { DateField } from \"./DateField\";\nimport { Icon, type IconName } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { Input } from \"./Input\";\nimport { Popover } from \"./Popover\";\nimport { Toggle } from \"./Toggle\";\n\n/* ============================================================================\n   FILTER MENU - the one control for narrowing a list (DX-5374): an icon button\n   that opens a popover of labelled filters, and a row of removable chips that\n   says which are on.\n\n   WHY NOT A ROW OF SELECTS. A list with five filters drawn as five full-width\n   dropdowns spends the whole top of the screen on controls that all say\n   \"Select...\", hides what is applied inside each closed box, and cannot show\n   two values of one filter. Here the closed control is one icon button (the\n   count of what is on beside the funnel), every filter is a labelled group\n   inside the popover - its options visible at a glance - and what is currently\n   applied is a chip row that is always on screen and takes a filter off with\n   one click.\n\n   THE TRIGGER IS ICON-ONLY, like SortMenu's. The funnel plus the number of\n   active filters; the control's name and that number are its accessible name\n   and tooltip.\n\n   A FIELD HAS A `kind`, AND THE KIND SAYS HOW IT IS DRAWN. Every filter a list\n   in the apps has needs one of these, so a screen never drops back to a loose\n   control beside the button:\n     single      one value of a closed set, as toggle chips (pressing the active one turns it off)\n     multiple    any number of values of a closed set, as toggle chips\n     boolean     an on/off switch (the label is the switch's)\n     date-range  a From and a To date box\n     text        a text box, applied on Enter or when it loses focus\n   `single` and `multiple` take `searchable` for a long set (every team, every\n   user): a search box over a scrolling list, so the popover does not grow with\n   the set.\n\n   STRUCTURE ONLY. This knows nothing of any list: a field is a key, a label,\n   a kind, its current value and the change callback. The caller keeps the state\n   (a URL, a store). `onClearAll` is ONE callback and not a loop over the\n   fields, because a caller that stores all of its filters in one object would\n   otherwise overwrite itself once per field.\n\n   OPTIONS CARRY AN ICON AND A TONE. An option's `icon` and `tone` draw in the\n   popover's chip and in the active chip, so a \"bug\" filter looks like the bug\n   it filters. Give every option of a field an icon, or none: a field that mixes\n   them throws, so the chips stay one shape. An option whose colour a person\n   chose carries a `color` instead of a `tone` (DXUI-74): a dot in the popover,\n   a `Badge` `color` on the chip.\n   ========================================================================= */\n\nexport type FilterTone = NonNullable<BadgeProps[\"tone\"]>;\n\nexport interface FilterOption<Value extends string = string> {\n  value: Value;\n  /** The option as a person names it (\"New\", \"Bug\"). */\n  label: string;\n  /** DX-5436: secondary text drawn after the label in the popover and matched by the search box; never on the active chip, which stays the label alone. */\n  description?: string;\n  /** A registered icon drawn before the label in the popover and on the active chip. */\n  icon?: IconName;\n  /** The colour of the icon and of the active chip. Absent, neutral. */\n  tone?: FilterTone;\n  /**\n   * DXUI-74: a CSS colour (hex, `rgb()`, `oklch()`, a `var()`) for an option whose colour a person chose and so cannot be one of the fixed `tone`s (a roadmap phase's).\n   * The active chip is a `Badge` in that `color`; the option in the popover leads with a dot of it. Give it instead of `tone`, never both: the option throws.\n   */\n  color?: string;\n}\n\ninterface FilterFieldBase {\n  /** Stable id of the filter. */\n  key: string;\n  /** The filter as a person names it (\"Status\"). Heads its group and prefixes its chips. */\n  label: string;\n}\n\ninterface OptionFilterBase<Value extends string> extends FilterFieldBase {\n  /** The options on offer. With `loadOptions` these are the ones known before it resolves (often none); once it resolves, its result is what the popover offers. */\n  options: readonly FilterOption<Value>[];\n  /** A search box over a scrolling list of the options, for a long set. */\n  searchable?: boolean;\n  /**\n   * DXUI-40: reads the options the first time the popover opens, once. The result is kept for as long as the menu is mounted;\n   * while it runs the popover says it is loading, and a rejection draws a Try again button that reads it again. The trigger and\n   * the chips never change shape: they draw from `options` and the applied values alone.\n   */\n  loadOptions?: () => Promise<readonly FilterOption<Value>[]>;\n  /** DXUI-40: a `searchable` field draws at most this many matches, with a \"First N of M\" line above them when more match. Absent, every match. */\n  maxShown?: number;\n  /** DXUI-40: `list` draws one option per line instead of wrapping chips. */\n  layout?: \"wrap\" | \"list\";\n  /** DXUI-40: an applied value that no option offers is kept and drawn as a chip by its value, instead of throwing. For a value that comes from a URL and may name something the list no longer has, or that is set before `loadOptions` resolves. */\n  keepUnlisted?: boolean;\n  /**\n   * DXUI-42: on a `searchable` field, typed text (trimmed, not blank) that matches no option exactly adds a `Create \"<text>\"` row. Choosing it\n   * (click, or Enter in the search box) awaits this with the trimmed text; the option it returns is applied to the field, the search clears,\n   * and a `loadOptions` field lists it without a reload. A rejection shows its message under the search box and applies nothing; the row\n   * cannot be chosen again while it runs. The caller must offer the returned option in `options` once it re-renders (its chip is drawn from\n   * there), or set `keepUnlisted`.\n   */\n  onCreate?: (text: string) => Promise<FilterOption<Value>>;\n  /** DXUI-42: the Create row's label for the typed text; absent, the library's localised string. */\n  createLabel?: (text: string) => string;\n}\n\n/*\n   The change callbacks are declared as METHODS on purpose: method parameters are checked bivariantly, so a\n   `FilterSingleField<\"new\" | \"done\">` is a `FilterField` (the `string` default) and a screen's fields stay typed by their own\n   value sets without a cast. `singleFilter` and `multipleFilter` give the inference.\n*/\n\n/** One value of a closed set at a time: pressing the active option turns the filter off. */\nexport interface FilterSingleField<Value extends string = string> extends OptionFilterBase<Value> {\n  kind: \"single\";\n  /** The chosen value; `undefined` is \"any\". */\n  value: Value | undefined;\n  onValueChange(value: Value | undefined): void;\n}\n\n/** Any number of values of a closed set at once. */\nexport interface FilterMultipleField<Value extends string = string> extends OptionFilterBase<Value> {\n  kind: \"multiple\";\n  value: readonly Value[];\n  onValueChange(value: Value[]): void;\n}\n\n/** An on/off switch. The filter is active while it is on. */\nexport interface FilterBooleanField extends FilterFieldBase {\n  kind: \"boolean\";\n  value: boolean;\n  onValueChange(value: boolean): void;\n}\n\n/** A calendar range as ISO dates (`2025-03-11`); either end may be open (`null`). */\nexport interface FilterDateRange {\n  from: string | null;\n  to: string | null;\n}\n\nexport interface FilterDateRangeField extends FilterFieldBase {\n  kind: \"date-range\";\n  value: FilterDateRange;\n  onValueChange(value: FilterDateRange): void;\n}\n\n/** Free text, reported when the person presses Enter or leaves the box. An empty (or blank) text is \"any\". */\nexport interface FilterTextField extends FilterFieldBase {\n  kind: \"text\";\n  value: string;\n  placeholder?: string;\n  onValueChange(value: string): void;\n}\n\nexport type FilterField<Value extends string = string> =\n  | FilterSingleField<Value>\n  | FilterMultipleField<Value>\n  | FilterBooleanField\n  | FilterDateRangeField\n  | FilterTextField;\n\n/** A single-value field, typed by its own value set: the value and the callback share `Value`, inferred from the options. */\nexport function singleFilter<Value extends string>(field: Omit<FilterSingleField<Value>, \"kind\">): FilterField {\n  return { kind: \"single\", ...field };\n}\n\n/** A multi-value field, typed by its own value set. */\nexport function multipleFilter<Value extends string>(field: Omit<FilterMultipleField<Value>, \"kind\">): FilterField {\n  return { kind: \"multiple\", ...field };\n}\n\n/** One value a field is set to: a chip, and the one step that turns it off. */\ninterface ActiveEntry {\n  /** The option's value, or the field's key for a field that has no options. */\n  id: string;\n  option?: FilterOption;\n  remove: () => void;\n}\n\nfunction checkOptions(field: OptionFilterBase<string>): void {\n  const both = field.options.find((option) => option.tone !== undefined && option.color !== undefined);\n  if (both !== undefined) {\n    throw new Error(`FilterMenu: filter ${JSON.stringify(field.key)} option ${JSON.stringify(both.value)} has both a tone and a color. A color replaces the tone; give one.`);\n  }\n  const withIcon = field.options.filter((option) => option.icon !== undefined).length;\n  if (withIcon !== 0 && withIcon !== field.options.length) {\n    throw new Error(\n      `FilterMenu: filter ${JSON.stringify(field.key)} gives an icon to ${withIcon} of its ${field.options.length} options. ` +\n        `Give every option an icon or none, so the chips stay one shape.`,\n    );\n  }\n}\n\nfunction optionOf(field: OptionFilterBase<string>, value: string): FilterOption {\n  const option = field.options.find((candidate) => candidate.value === value);\n  if (option === undefined && field.keepUnlisted === true) return { value, label: value };\n  if (option === undefined) {\n    throw new Error(\n      `FilterMenu: filter ${JSON.stringify(field.key)} is set to a value no option offers: no option carries the value ${JSON.stringify(value)}. ` +\n        `The control would name a filter that is not on offer; pass an option for every value the filter can hold.`,\n    );\n  }\n  return option;\n}\n\n/** What a field is set to, validated: a value no option offers throws here, so a stale value fails on the render and not only after the popover opens. */\nfunction activeEntries(field: FilterField): ActiveEntry[] {\n  switch (field.kind) {\n    case \"single\": {\n      checkOptions(field);\n      if (field.value === undefined) return [];\n      return [{ id: field.value, option: optionOf(field, field.value), remove: () => field.onValueChange(undefined) }];\n    }\n    case \"multiple\": {\n      checkOptions(field);\n      return field.value.map((value) => ({\n        id: value,\n        option: optionOf(field, value),\n        remove: () => field.onValueChange(field.value.filter((v) => v !== value)),\n      }));\n    }\n    case \"boolean\":\n      return field.value ? [{ id: field.key, remove: () => field.onValueChange(false) }] : [];\n    case \"date-range\":\n      return field.value.from === null && field.value.to === null\n        ? []\n        : [{ id: field.key, remove: () => field.onValueChange({ from: null, to: null }) }];\n    case \"text\":\n      return field.value.trim() === \"\" ? [] : [{ id: field.key, remove: () => field.onValueChange(\"\") }];\n  }\n}\n\n/** How many filters are on across the fields (each value of a `multiple` field counts; a date range counts once). */\nexport function activeFilterCount(fields: readonly FilterField[]): number {\n  return fields.reduce((sum, field) => sum + activeEntries(field).length, 0);\n}\n\nfunction toggleValue(field: FilterSingleField | FilterMultipleField, value: string): void {\n  if (field.kind === \"multiple\") {\n    field.onValueChange(field.value.includes(value) ? field.value.filter((v) => v !== value) : [...field.value, value]);\n    return;\n  }\n  field.onValueChange(field.value === value ? undefined : value);\n}\n\nexport interface FilterMenuProps {\n  fields: readonly FilterField[];\n  /** Turns every filter off in one step. */\n  onClearAll: () => void;\n  /** Names the control for assistive technology, e.g. \"Filter feedback\". The number of active filters is appended to it. */\n  \"aria-label\": string;\n  /** The button's icon: the funnel by default; a list that filters by one kind of thing names it instead (a thread's tags: `tag`). */\n  icon?: IconName;\n  size?: ButtonProps[\"size\"];\n  align?: \"start\" | \"center\" | \"end\";\n  className?: string;\n}\n\nexport function FilterMenu({ fields, onClearAll, \"aria-label\": ariaLabel, icon = \"filter\", size = \"sm\", align = \"end\", className }: FilterMenuProps) {\n  const strings = useUiStrings().filterMenu;\n  const fmt = useNumberFormat();\n  const nameId = useId();\n  const perField = fields.map((field) => ({ field, entries: activeEntries(field) }));\n  const loads = useOptionLoads();\n  const active = perField.reduce((sum, { entries }) => sum + entries.length, 0);\n\n  return (\n    <Popover\n      align={align}\n      aria-labelledby={nameId}\n      trigger={\n        <IconButton\n          icon={\n            <>\n              <Icon name={icon} size=\"sm\" />\n              {active > 0 && <span className=\"text-xs font-semibold tabular-nums\">{fmt(active)}</span>}\n            </>\n          }\n          label={strings.triggerName(ariaLabel, active, fmt(active))}\n          variant=\"outline\"\n          size={size}\n          className={cn(active > 0 && \"aspect-auto w-auto gap-1 px-2\", className)}\n        />\n      }\n    >\n      <div className=\"flex w-full min-w-0 flex-col gap-3\">\n        <div className=\"flex items-center justify-between gap-3\">\n          <span id={nameId} className=\"text-2xs font-medium uppercase tracking-wide text-tertiary\">\n            {ariaLabel}\n          </span>\n          {active > 0 && (\n            <Button variant=\"ghost\" size=\"xs\" onClick={onClearAll}>\n              {strings.clearAll}\n            </Button>\n          )}\n        </div>\n        {perField.map(({ field, entries }) => (\n          <FilterGroup key={field.key} field={field} chosen={entries.map((entry) => entry.id)} loads={loads} />\n        ))}\n      </div>\n    </Popover>\n  );\n}\n\ntype OptionLoad = { status: \"loading\" } | { status: \"failed\" } | { status: \"ready\"; options: readonly FilterOption[] };\n\ninterface OptionLoads {\n  stateOf: (key: string) => OptionLoad | undefined;\n  /** Starts the field's loader unless it already ran (or is running): the once-only guarantee. `retry` runs it again after a failure. */\n  start: (field: OptionFilterBase<string>, retry?: boolean) => void;\n}\n\n/** The loaded options of every field, kept by field key for as long as the menu is mounted. Field objects are rebuilt on every render of the caller, so the cache cannot live on them. */\nfunction useOptionLoads(): OptionLoads {\n  const [states, setStates] = useState<Record<string, OptionLoad>>({});\n  const started = useRef(new Set<string>());\n  const mounted = useRef(true);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const start = useCallback((field: OptionFilterBase<string>, retry = false) => {\n    const loader = field.loadOptions;\n    if (loader === undefined || (started.current.has(field.key) && !retry)) return;\n    started.current.add(field.key);\n    setStates((prev) => ({ ...prev, [field.key]: { status: \"loading\" } }));\n    const settle = (next: OptionLoad) => {\n      if (mounted.current) setStates((prev) => ({ ...prev, [field.key]: next }));\n    };\n    loader().then(\n      (options) => settle({ status: \"ready\", options }),\n      () => settle({ status: \"failed\" }),\n    );\n  }, []);\n  return { stateOf: (key) => states[key], start };\n}\n\nfunction FilterGroup({ field, chosen, loads }: { field: FilterField; chosen: readonly string[]; loads: OptionLoads }) {\n  const labelId = useId();\n  if (field.kind === \"boolean\") {\n    return <SwitchField label={field.label} size=\"sm\" checked={field.value} onCheckedChange={(checked) => field.onValueChange(checked)} fieldClassName=\"w-fit\" />;\n  }\n  return (\n    <div role=\"group\" aria-labelledby={labelId} className=\"flex min-w-0 flex-col gap-1.5\">\n      <span id={labelId} className=\"text-xs font-medium text-secondary\">\n        {field.label}\n      </span>\n      {field.kind === \"date-range\" ? (\n        <DateRangeInputs field={field} />\n      ) : field.kind === \"text\" ? (\n        <TextInput field={field} />\n      ) : (\n        <OptionToggles field={field} chosen={chosen} loads={loads} />\n      )}\n    </div>\n  );\n}\n\nfunction OptionToggles({ field, chosen, loads }: { field: FilterSingleField | FilterMultipleField; chosen: readonly string[]; loads: OptionLoads }) {\n  const strings = useUiStrings().filterMenu;\n  const fmt = useNumberFormat();\n  const [search, setSearch] = useState(\"\");\n  const [created, setCreated] = useState<readonly FilterOption[]>([]);\n  const [creating, setCreating] = useState(false);\n  const [createError, setCreateError] = useState<string | null>(null);\n  const createBusy = useRef(false);\n  const { start } = loads;\n  const hasLoader = field.loadOptions !== undefined;\n  // The groups mount when the popover opens, so this is the first-open read; the hook's once-only guard covers every later open.\n  useEffect(() => {\n    if (hasLoader) start(field);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- the loader is read from the field at mount; a new closure each render must not re-run it\n  }, [hasLoader, start, field.key]);\n  const load = loads.stateOf(field.key);\n  const trimmed = search.trim();\n  const needle = trimmed.toLocaleLowerCase();\n  const base = load?.status === \"ready\" ? load.options : field.options;\n  const loaded = created.length === 0 ? base : [...base, ...created.filter((option) => !base.some((known) => known.value === option.value))];\n  if (load?.status === \"ready\") checkOptions({ ...field, options: loaded });\n  const matches = field.searchable === true && needle !== \"\" ? loaded.filter((option) => `${option.label} ${option.description ?? \"\"}`.toLocaleLowerCase().includes(needle)) : loaded;\n  const capped = field.searchable === true && field.maxShown !== undefined && matches.length > field.maxShown;\n  const shown = capped ? matches.slice(0, field.maxShown) : matches;\n  const pending = hasLoader && (load === undefined || load.status === \"loading\");\n  const failed = hasLoader && load?.status === \"failed\";\n  const canCreate =\n    field.searchable === true &&\n    field.onCreate !== undefined &&\n    trimmed !== \"\" &&\n    !loaded.some((option) => option.label.toLocaleLowerCase() === needle || option.value.toLocaleLowerCase() === needle);\n  const create = () => {\n    if (!canCreate || field.onCreate === undefined || createBusy.current) return;\n    createBusy.current = true;\n    setCreating(true);\n    setCreateError(null);\n    field.onCreate(trimmed).then(\n      (option) => {\n        createBusy.current = false;\n        setCreating(false);\n        setCreated((prev) => [...prev, option]);\n        setSearch(\"\");\n        toggleValue(field, option.value);\n      },\n      (error: unknown) => {\n        createBusy.current = false;\n        setCreating(false);\n        setCreateError(error instanceof Error ? error.message : String(error));\n      },\n    );\n  };\n  return (\n    <>\n      {field.searchable === true && (\n        <Input\n          type=\"search\"\n          size=\"sm\"\n          aria-label={strings.searchOptions(field.label)}\n          placeholder={strings.searchOptions(field.label)}\n          leading={<Icon name=\"search\" size=\"sm\" />}\n          value={search}\n          onChange={(event) => {\n            setSearch(event.target.value);\n            setCreateError(null);\n          }}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\" && canCreate) {\n              event.preventDefault();\n              create();\n            }\n          }}\n        />\n      )}\n      {createError !== null && (\n        <span role=\"alert\" className=\"text-xs text-danger-text\">\n          {createError}\n        </span>\n      )}\n      {pending && (\n        <span role=\"status\" className=\"text-xs text-tertiary\">\n          {strings.loadingOptions}\n        </span>\n      )}\n      {failed && (\n        <div role=\"alert\" className=\"flex min-w-0 flex-wrap items-center gap-2 text-xs text-tertiary\">\n          <span>{strings.loadFailed(field.label)}</span>\n          <Button variant=\"ghost\" size=\"xs\" onClick={() => loads.start(field, true)}>\n            {strings.tryAgain}\n          </Button>\n        </div>\n      )}\n      {capped && <span className=\"text-xs text-tertiary\">{strings.firstOfMatches(fmt(shown.length), fmt(matches.length), trimmed)}</span>}\n      {!pending && !failed && (\n        <div className={cn(\"flex min-w-0 gap-1.5\", field.layout === \"list\" ? \"flex-col items-stretch\" : \"flex-wrap\", field.searchable === true && \"max-h-48 overflow-y-auto\")}>\n          {shown.map((option) => (\n            <Toggle\n              key={option.value}\n              size=\"sm\"\n              pressed={chosen.includes(option.value)}\n              onPressedChange={() => toggleValue(field, option.value)}\n              // DX-5436: a Toggle never shrinks by default, so one carrying a description is let shrink to the group's width and its description truncates.\n              className={cn(\"border border-border\", (option.description !== undefined || field.layout === \"list\") && OPTION_WITH_DESCRIPTION)}\n            >\n              {option.color !== undefined && (\n                <span aria-hidden=\"true\" data-option-color={option.color} className=\"size-2 shrink-0 rounded-full bg-(--badge-color)\" style={{ \"--badge-color\": option.color } as CSSProperties} />\n              )}\n              {option.icon !== undefined && (\n                <Icon name={option.icon} size=\"sm\" className={option.tone === undefined ? undefined : BADGE_TONE_TEXT[option.tone]} />\n              )}\n              {option.label}\n              {option.description !== undefined && <span className=\"min-w-0 truncate font-normal text-tertiary\">{option.description}</span>}\n            </Toggle>\n          ))}\n          {canCreate && (\n            <Button variant=\"ghost\" size=\"sm\" disabled={creating} aria-busy={creating} onClick={create} className=\"justify-start\">\n              {creating ? strings.creating : (field.createLabel ?? strings.createOption)(trimmed)}\n            </Button>\n          )}\n          {shown.length === 0 && !canCreate && <span className=\"text-xs text-tertiary\">{strings.noMatches}</span>}\n        </div>\n      )}\n    </>\n  );\n}\n\n/** An option toggle that carries a description: at most the group's width, and allowed to shrink so the description's `truncate` applies. */\nexport const OPTION_WITH_DESCRIPTION = \"min-w-0 max-w-full shrink justify-start\";\n\nfunction DateRangeInputs({ field }: { field: FilterDateRangeField }) {\n  const strings = useUiStrings().filterMenu;\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n      <DateField aria-label={strings.dateFrom(field.label)} value={field.value.from} onValueChange={(from) => field.onValueChange({ ...field.value, from })} />\n      <DateField aria-label={strings.dateTo(field.label)} value={field.value.to} onValueChange={(to) => field.onValueChange({ ...field.value, to })} />\n    </div>\n  );\n}\n\n/** A text filter keeps what is being typed until Enter or blur, so the list is asked once per search and not once per keystroke. */\nfunction TextInput({ field }: { field: FilterTextField }) {\n  const [draft, setDraft] = useState(field.value);\n  useEffect(() => setDraft(field.value), [field.value]);\n  const commit = () => {\n    if (draft !== field.value) field.onValueChange(draft);\n  };\n  return (\n    <Input\n      size=\"sm\"\n      aria-label={field.label}\n      placeholder={field.placeholder}\n      value={draft}\n      onChange={(event) => setDraft(event.target.value)}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\") commit();\n      }}\n      onBlur={commit}\n    />\n  );\n}\n\nexport interface FilterChipsProps {\n  fields: readonly FilterField[];\n  className?: string;\n}\n\n/** One removable chip per active filter value. Draws nothing while no filter is on. */\nexport function FilterChips({ fields, className }: FilterChipsProps): ReactNode {\n  const strings = useUiStrings().filterMenu;\n  const locale = useUiLocale();\n  const chips = fields.flatMap((field) => activeEntries(field).map((entry) => ({ field, entry })));\n  if (chips.length === 0) return null;\n\n  /** The value half of a chip: the option's label, or what the field is set to. A boolean has none: its chip is the label. */\n  const valueText = (field: FilterField, entry: ActiveEntry): string | null => {\n    if (entry.option !== undefined) return entry.option.label;\n    if (field.kind === \"date-range\") {\n      const { from, to } = field.value;\n      if (from !== null && to !== null) return strings.dateRange(formatDate(from, locale), formatDate(to, locale));\n      if (from !== null) return strings.dateRangeFrom(formatDate(from, locale));\n      if (to !== null) return strings.dateRangeUntil(formatDate(to, locale));\n      return null;\n    }\n    if (field.kind === \"text\") return field.value.trim();\n    return null;\n  };\n\n  return (\n    <div className={cn(\"flex min-w-0 flex-wrap items-center gap-1.5\", className)}>\n      {chips.map(({ field, entry }) => {\n        const value = valueText(field, entry);\n        return (\n          <Badge\n            key={`${field.key}:${entry.id}`}\n            data-filter-chip={`${field.key}:${entry.id}`}\n            tone={entry.option?.tone ?? \"neutral\"}\n            color={entry.option?.color}\n            icon={entry.option?.icon !== undefined ? <Icon name={entry.option.icon} size=\"xs\" /> : undefined}\n            dismiss={{\n              label: value === null ? strings.removeFlag(field.label) : strings.removeFilter(field.label, value),\n              onDismiss: entry.remove,\n            }}\n          >\n            {value === null ? field.label : strings.chipLabel(field.label, value)}\n          </Badge>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["singleFilter","field","multipleFilter","checkOptions","both","option","withIcon","optionOf","value","candidate","activeEntries","v","activeFilterCount","fields","sum","toggleValue","FilterMenu","onClearAll","ariaLabel","icon","size","align","className","strings","useUiStrings","fmt","useNumberFormat","nameId","useId","perField","loads","useOptionLoads","active","entries","jsx","Popover","IconButton","jsxs","Fragment","Icon","cn","Button","FilterGroup","entry","states","setStates","useState","started","useRef","mounted","useEffect","start","useCallback","retry","loader","prev","settle","next","options","key","chosen","labelId","SwitchField","checked","DateRangeInputs","TextInput","OptionToggles","search","setSearch","created","setCreated","creating","setCreating","createError","setCreateError","createBusy","hasLoader","load","trimmed","needle","base","loaded","known","matches","capped","shown","pending","failed","canCreate","create","error","Input","event","Toggle","OPTION_WITH_DESCRIPTION","BADGE_TONE_TEXT","DateField","from","to","draft","setDraft","commit","FilterChips","locale","useUiLocale","chips","valueText","formatDate","Badge"],"mappings":"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"}

package/dist/components/GatesSection.js

@@ -0,0 +1,79 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { cn as a } from "../lib/cn.js";
+import { BADGE_TONE_TEXT as h, Badge as m } from "./Badge.js";
+import { Icon as o } from "./Icon.js";
+import { Markdown as x } from "./Markdown.js";
+import { Popover as u } from "./Popover.js";
+import { ReadMore as p } from "./ReadMore.js";
+import { Collapsible as b } from "./Surface.js";
+import { RefText as N } from "../lib/syntax/markdown/refs.js";
+function v({ title: l, icon: i, aside: t }) {
+  return /* @__PURE__ */ n("h3", { className: "flex items-center gap-1.5 text-2xs font-semibold tracking-widest text-tertiary uppercase", children: [
+    i,
+    l,
+    t === void 0 ? null : /* @__PURE__ */ e("span", { className: "tabular tracking-normal normal-case", children: t })
+  ] });
+}
+function R({ phases: l, noVerdictLabel: i, className: t }) {
+  return /* @__PURE__ */ e("div", { className: a("flex flex-col gap-5", t), children: l.map((r) => /* @__PURE__ */ n("section", { "aria-label": r.title, className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ e(v, { title: r.title, icon: /* @__PURE__ */ e(o, { name: r.icon, size: "xs" }), aside: r.aside }),
+    /* @__PURE__ */ e("p", { className: "text-xs text-secondary", children: r.description }),
+    /* @__PURE__ */ e("ul", { className: "flex flex-col gap-2", children: r.gates.map((c) => /* @__PURE__ */ e(w, { gate: c, noVerdictLabel: i }, c.id)) })
+  ] }, r.id)) });
+}
+function y({ help: l, label: i }) {
+  return /* @__PURE__ */ e(
+    u,
+    {
+      openOnHover: !0,
+      openOnFocus: !0,
+      delay: 100,
+      side: "bottom",
+      align: "start",
+      width: "24rem",
+      "aria-label": i,
+      trigger: /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          "aria-label": i,
+          className: "inline-flex shrink-0 cursor-pointer rounded-full text-tertiary hover:text-primary focus-visible:text-primary",
+          children: /* @__PURE__ */ e(o, { name: "circle-help", size: "sm" })
+        }
+      ),
+      children: /* @__PURE__ */ e("div", { className: "text-sm text-secondary", children: l })
+    }
+  );
+}
+function w({ gate: l, noVerdictLabel: i }) {
+  const t = /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ n("div", { className: a("flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1", l.inactive && "opacity-70"), children: [
+      l.inactive ? null : /* @__PURE__ */ e(o, { name: l.icon, size: "sm", className: h[l.tone] }),
+      /* @__PURE__ */ e("span", { className: a("min-w-0 truncate text-sm", l.inactive ? "text-tertiary" : "text-primary"), children: l.name }),
+      l.helpLabel === void 0 ? null : /* @__PURE__ */ e(y, { help: l.help, label: l.helpLabel }),
+      l.inactive ? null : /* @__PURE__ */ e(m, { tone: l.tone, size: "sm", children: l.verdictLabel }),
+      l.inactive || l.signedOff === void 0 ? null : /* @__PURE__ */ e("span", { className: "text-xs text-tertiary", children: l.signedOff })
+    ] }),
+    l.control === void 0 ? null : /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center", children: l.control })
+  ] });
+  if (l.inactive)
+    return /* @__PURE__ */ e("li", { className: "rounded-md border border-border-subtle p-3", children: t });
+  const r = l.findings?.items ?? [], c = l.findings?.label, d = l.message?.trim() ?? "";
+  return /* @__PURE__ */ n("li", { className: "flex flex-col gap-2 rounded-md border border-border-subtle p-3", children: [
+    t,
+    d === "" ? /* @__PURE__ */ e("p", { className: "text-xs text-tertiary", children: i }) : /* @__PURE__ */ e("div", { className: "text-sm text-secondary", children: /* @__PURE__ */ e(p, { lines: 3, children: /* @__PURE__ */ e(x, { children: d }) }) }),
+    l.note === void 0 ? null : /* @__PURE__ */ e("div", { className: "text-xs text-secondary", children: l.note }),
+    r.length === 0 ? null : /* @__PURE__ */ e(b, { trigger: /* @__PURE__ */ e("span", { className: "text-xs font-semibold text-secondary", children: c }), children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-2 pt-2", children: r.map((s, f) => /* @__PURE__ */ n("li", { className: "flex flex-col gap-1 border-l-2 border-border pl-3", children: [
+      /* @__PURE__ */ n("span", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ e("span", { className: "text-sm font-medium text-primary", children: /* @__PURE__ */ e(N, { children: s.title }) }),
+        /* @__PURE__ */ e(m, { tone: "neutral", size: "sm", children: s.status })
+      ] }),
+      s.description.trim() === "" ? null : /* @__PURE__ */ e("div", { className: "text-sm text-secondary", children: /* @__PURE__ */ e(p, { lines: 3, children: /* @__PURE__ */ e(x, { children: s.description }) }) })
+    ] }, `${s.title}-${f}`)) }) })
+  ] });
+}
+export {
+  R as GatesSection,
+  v as SectionHeading
+};
+//# sourceMappingURL=GatesSection.js.map

package/dist/components/GatesSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GatesSection.js","sources":["../../src/components/GatesSection.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Badge, BADGE_TONE_TEXT, type BadgeProps } from \"./Badge\";\nimport { Icon, type IconName } from \"./Icon\";\nimport { Markdown } from \"./Markdown\";\nimport { Popover } from \"./Popover\";\nimport { ReadMore } from \"./ReadMore\";\nimport { Collapsible } from \"./Surface\";\nimport { RefText } from \"../lib/syntax/markdown\";\n\n/* ============================================================================\n   QUALITY GATES, PHASE BY PHASE (DX-5428, from danxbot's card detail) — each\n   gate's verdict, the reviewer's message and any findings, read-only: a verdict\n   is a reviewer's sign-off.\n\n   The component holds no gate vocabulary. The caller resolves every gate's tone,\n   icon and verdict word, every title and sentence, and hands over only what to\n   draw; a phase with no gates is the caller's to leave out.\n   ========================================================================= */\n\n/** One finding a gate's reviewer raised. */\nexport interface GatesSectionFinding {\n  title: string;\n  /** Its status word, in the caller's language. */\n  status: string;\n  /** Markdown; blank draws no body. */\n  description: string;\n}\n\n/** What every gate card has, carried or not. */\ninterface GatesSectionGateBase {\n  id: string;\n  /** DXUI-36: a readable label (\"Dependency Plan\"), drawn in the normal text font, never a code identifier in monospace. */\n  name: string;\n  /** DXUI-34: drawn at the right end of the header row (a host's on/off switch); the name truncates before it moves. */\n  control?: ReactNode;\n}\n\n/** DXUI-34: a help icon after the name opens a popover with `help` (rich content) on hover, keyboard focus and tap; its accessible name is `helpLabel`, e.g. \"About Dependency Review\". */\ntype GatesSectionGateHelp = { help: ReactNode; helpLabel: string } | { help?: undefined; helpLabel?: undefined };\n\n/** A gate the card carries: its verdict, message, note and findings are drawn. */\nexport type GatesSectionCarriedGate = GatesSectionGateBase & GatesSectionGateHelp & GatesSectionCarriedFields;\n\ninterface GatesSectionCarriedFields {\n  /** DXUI-34: omit, or false, for a carried gate. */\n  inactive?: false;\n  tone: NonNullable<BadgeProps[\"tone\"]>;\n  icon: IconName;\n  /** The verdict word the badge reads. */\n  verdictLabel: string;\n  /** When and by whom it was signed off, e.g. a `RelativeTime` with a prefix; omit while unsigned. */\n  signedOff?: ReactNode;\n  /** The reviewer's verdict, markdown; blank or omitted draws `noVerdictLabel` instead. */\n  message?: string;\n  /** Why this gate holds this card, drawn under the message; omit for none. */\n  note?: ReactNode;\n  /** What this gate's reviewer raised: the collapsible's trigger (\"2 findings\") and the findings under it. Omit, or give no items, for none. */\n  findings?: { label: string; items: readonly GatesSectionFinding[] };\n}\n\n/** DXUI-34: a gate the card does not carry (switched off): its header alone, muted, with no badge, verdict line, note or findings. */\nexport type GatesSectionInactiveGate = GatesSectionGateBase & GatesSectionGateHelp & { inactive: true };\n\nexport type GatesSectionGate = GatesSectionCarriedGate | GatesSectionInactiveGate;\n\nexport interface GatesSectionPhase {\n  id: string;\n  title: string;\n  description: string;\n  icon: IconName;\n  /** A short readout after the title, e.g. \"1/2 passed\". */\n  aside: string;\n  gates: readonly GatesSectionGate[];\n}\n\nexport interface GatesSectionProps {\n  phases: readonly GatesSectionPhase[];\n  /** Said under a gate whose reviewer left no message. */\n  noVerdictLabel: string;\n  className?: string;\n}\n\n/**\n * A labelled section's small-caps heading: an optional icon, the title, and an optional readout after it (\"1/2 passed\").\n * Exported so a host's own section wrapper (danxbot's card-tab `Subsection`) draws the very same heading.\n */\nexport function SectionHeading({ title, icon, aside }: { title: string; icon?: ReactNode; aside?: ReactNode }) {\n  return (\n    <h3 className=\"flex items-center gap-1.5 text-2xs font-semibold tracking-widest text-tertiary uppercase\">\n      {icon}\n      {title}\n      {aside === undefined ? null : <span className=\"tabular tracking-normal normal-case\">{aside}</span>}\n    </h3>\n  );\n}\n\nexport function GatesSection({ phases, noVerdictLabel, className }: GatesSectionProps) {\n  return (\n    <div className={cn(\"flex flex-col gap-5\", className)}>\n      {phases.map((phase) => (\n        <section key={phase.id} aria-label={phase.title} className=\"flex flex-col gap-2\">\n          <SectionHeading title={phase.title} icon={<Icon name={phase.icon} size=\"xs\" />} aside={phase.aside} />\n          <p className=\"text-xs text-secondary\">{phase.description}</p>\n          <ul className=\"flex flex-col gap-2\">\n            {phase.gates.map((gate) => (\n              <GateRow key={gate.id} gate={gate} noVerdictLabel={noVerdictLabel} />\n            ))}\n          </ul>\n        </section>\n      ))}\n    </div>\n  );\n}\n\n/** The help icon and its popover: opens on hover, on tap and click, and on keyboard focus. */\nfunction GateHelp({ help, label }: { help: ReactNode; label: string }) {\n  return (\n    <Popover\n      openOnHover\n      openOnFocus\n      delay={100}\n      side=\"bottom\"\n      align=\"start\"\n      width=\"24rem\"\n      aria-label={label}\n      trigger={\n        <button\n          type=\"button\"\n          aria-label={label}\n          className=\"inline-flex shrink-0 cursor-pointer rounded-full text-tertiary hover:text-primary focus-visible:text-primary\"\n        >\n          <Icon name=\"circle-help\" size=\"sm\" />\n        </button>\n      }\n    >\n      <div className=\"text-sm text-secondary\">{help}</div>\n    </Popover>\n  );\n}\n\nfunction GateRow({ gate, noVerdictLabel }: { gate: GatesSectionGate; noVerdictLabel: string }) {\n  const header = (\n    <div className=\"flex items-center gap-2\">\n      <div className={cn(\"flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1\", gate.inactive && \"opacity-70\")}>\n        {gate.inactive ? null : <Icon name={gate.icon} size=\"sm\" className={BADGE_TONE_TEXT[gate.tone]} />}\n        <span className={cn(\"min-w-0 truncate text-sm\", gate.inactive ? \"text-tertiary\" : \"text-primary\")}>{gate.name}</span>\n        {gate.helpLabel === undefined ? null : <GateHelp help={gate.help} label={gate.helpLabel} />}\n        {gate.inactive ? null : (\n          <Badge tone={gate.tone} size=\"sm\">\n            {gate.verdictLabel}\n          </Badge>\n        )}\n        {gate.inactive || gate.signedOff === undefined ? null : <span className=\"text-xs text-tertiary\">{gate.signedOff}</span>}\n      </div>\n      {gate.control === undefined ? null : <div className=\"flex shrink-0 items-center\">{gate.control}</div>}\n    </div>\n  );\n  if (gate.inactive) {\n    return <li className=\"rounded-md border border-border-subtle p-3\">{header}</li>;\n  }\n  const findings = gate.findings?.items ?? [];\n  const findingsLabel = gate.findings?.label;\n  const message = gate.message?.trim() ?? \"\";\n  return (\n    <li className=\"flex flex-col gap-2 rounded-md border border-border-subtle p-3\">\n      {header}\n      {message === \"\" ? (\n        <p className=\"text-xs text-tertiary\">{noVerdictLabel}</p>\n      ) : (\n        <div className=\"text-sm text-secondary\">\n          <ReadMore lines={3}>\n            <Markdown>{message}</Markdown>\n          </ReadMore>\n        </div>\n      )}\n      {gate.note === undefined ? null : <div className=\"text-xs text-secondary\">{gate.note}</div>}\n      {findings.length === 0 ? null : (\n        <Collapsible trigger={<span className=\"text-xs font-semibold text-secondary\">{findingsLabel}</span>}>\n          <ul className=\"flex flex-col gap-2 pt-2\">\n            {findings.map((finding, index) => (\n              <li key={`${finding.title}-${index}`} className=\"flex flex-col gap-1 border-l-2 border-border pl-3\">\n                <span className=\"flex flex-wrap items-center gap-2\">\n                  <span className=\"text-sm font-medium text-primary\">\n                    <RefText>{finding.title}</RefText>\n                  </span>\n                  <Badge tone=\"neutral\" size=\"sm\">\n                    {finding.status}\n                  </Badge>\n                </span>\n                {finding.description.trim() === \"\" ? null : (\n                  <div className=\"text-sm text-secondary\">\n                    <ReadMore lines={3}>\n                      <Markdown>{finding.description}</Markdown>\n                    </ReadMore>\n                  </div>\n                )}\n              </li>\n            ))}\n          </ul>\n        </Collapsible>\n      )}\n    </li>\n  );\n}\n"],"names":["SectionHeading","title","icon","aside","jsxs","GatesSection","phases","noVerdictLabel","className","cn","phase","jsx","Icon","gate","GateRow","GateHelp","help","label","Popover","header","BADGE_TONE_TEXT","Badge","findings","findingsLabel","message","ReadMore","Markdown","Collapsible","finding","index","RefText"],"mappings":"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"}