@arbidocs/blocks 0.5.41 → 0.5.43

package/dist/{chunk-5V4HH7EH.cjs → chunk-XDMIVPJP.cjs}

@@ -708,22 +708,29 @@ function RecipientPicker({
   search,
   onSearchChange,
   hasNoKnownUsers,
-  labels
+  labels,
+  layout = "compose",
+  actionSlot,
+  beforeCandidates,
+  candidateHeading,
+  emptyContent,
+  triggerTestId
 }) {
   const openRef = react.useRef(isOpen);
   openRef.current = isOpen;
   const l = react.useMemo(() => ({ ...DEFAULT_RECIPIENT_PICKER_LABELS, ...labels }), [labels]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkULWRNGGE_cjs.ModalSectionTitle, { className: "mb-0 shrink-0 py-1.5", children: l.to }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-1.5", children: [
-      selected.map((recipient) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "flex items-center justify-between gap-2 rounded-md bg-muted/50 px-3 py-1.5",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+  const rows = selected.map((recipient) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: layout === "field" ? "flex items-center justify-between gap-2 py-1.5 px-3 bg-muted/50 rounded-md" : "flex items-center justify-between gap-2 rounded-md bg-muted/50 px-3 py-1.5",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: layout === "field" ? "flex items-center gap-2 min-w-0" : "flex items-center gap-2",
+            children: [
               recipient.identity,
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Tooltip, { children: [
+              recipient.onToggleMute && /* @__PURE__ */ jsxRuntime.jsxs(ui.Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   ui.TooltipTrigger,
                   {
@@ -737,78 +744,96 @@ function RecipientPicker({
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipContent, { className: "max-w-[250px]", children: recipient.muteTooltip })
               ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onRemove(recipient.id),
-                className: "p-1 text-muted-foreground hover:text-destructive pointer-coarse:p-3",
-                title: l.removeRecipient,
-                "aria-label": l.removeRecipient,
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
-              }
-            )
-          ]
-        },
-        recipient.id
-      )),
-      canAdd && /* @__PURE__ */ jsxRuntime.jsxs(ui.Popover, { open: isOpen, onOpenChange, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverTrigger, { asChild: true, children: selected.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
-          ui.Button,
-          {
-            variant: "outline",
-            size: "sm",
-            disabled: hasNoKnownUsers,
-            className: "w-full justify-start text-muted-foreground",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "mr-2 h-4 w-4" }),
-              l.selectRecipient
             ]
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            disabled: hasNoKnownUsers,
-            className: "h-7 w-7 rounded-full",
-            title: l.addRecipient,
-            "aria-label": l.addRecipient,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" })
-          }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          ui.PopoverContent,
+          "button",
           {
-            onCloseAutoFocus: (event) => {
-              if (openRef.current) event.preventDefault();
-            },
-            className: "w-72 p-0",
-            align: "start",
-            onPointerDownOutside: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Command, { shouldFilter: false, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.CommandInput,
-                {
-                  placeholder: l.searchUsers,
-                  value: search,
-                  onValueChange: onSearchChange
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.CommandList, { children: candidates.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.CommandEmpty, { children: hasNoKnownUsers ? l.noKnownUsers : l.noMatchingUsers }) : /* @__PURE__ */ jsxRuntime.jsx(ui.CommandGroup, { children: candidates.map((candidate) => /* @__PURE__ */ jsxRuntime.jsx(
-                ui.CommandItem,
-                {
-                  onSelect: () => onPick(candidate.id),
-                  className: "cursor-pointer justify-start",
-                  children: candidate.identity
-                },
-                candidate.id
-              )) }) })
-            ] })
+            type: "button",
+            onClick: () => onRemove(recipient.id),
+            className: layout === "field" ? "p-1 text-muted-foreground hover:text-destructive" : "p-1 text-muted-foreground hover:text-destructive pointer-coarse:p-3",
+            title: l.removeRecipient,
+            "aria-label": l.removeRecipient,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
           }
         )
-      ] }),
+      ]
+    },
+    recipient.id
+  ));
+  const picker = canAdd && /* @__PURE__ */ jsxRuntime.jsxs(ui.Popover, { open: isOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverTrigger, { asChild: true, children: layout === "field" || selected.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Button,
+      {
+        variant: "outline",
+        size: "sm",
+        disabled: layout === "compose" && hasNoKnownUsers,
+        className: layout === "field" ? "min-w-0 flex-1 justify-start text-muted-foreground" : "w-full justify-start text-muted-foreground",
+        "data-testid": triggerTestId,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronsUpDown,
+            {
+              className: layout === "field" ? "mr-2 h-4 w-4 shrink-0" : "mr-2 h-4 w-4"
+            }
+          ),
+          layout === "field" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: l.selectRecipient }) : l.selectRecipient
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        disabled: layout === "compose" && hasNoKnownUsers,
+        className: "h-7 w-7 rounded-full",
+        title: l.addRecipient,
+        "aria-label": l.addRecipient,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.PopoverContent,
+      {
+        onCloseAutoFocus: (event) => {
+          if (openRef.current) event.preventDefault();
+        },
+        className: "w-72 p-0",
+        align: "start",
+        onPointerDownOutside: layout === "compose" ? (e) => e.preventDefault() : void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Command, { shouldFilter: false, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.CommandInput, { placeholder: l.searchUsers, value: search, onValueChange: onSearchChange }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.CommandList, { children: [
+            beforeCandidates,
+            candidates.length === 0 ? emptyContent === null ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.CommandEmpty, { children: emptyContent ?? (hasNoKnownUsers ? l.noKnownUsers : l.noMatchingUsers) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.CommandGroup, { heading: candidateHeading, children: candidates.map((candidate) => /* @__PURE__ */ jsxRuntime.jsx(
+              ui.CommandItem,
+              {
+                value: candidate.value,
+                onSelect: () => onPick(candidate.id),
+                className: layout === "field" ? "cursor-pointer" : "cursor-pointer justify-start",
+                children: candidate.identity
+              },
+              candidate.id
+            )) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+  if (layout === "field")
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      rows,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        picker,
+        selected.length > 0 && actionSlot
+      ] })
+    ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkULWRNGGE_cjs.ModalSectionTitle, { className: "mb-0 shrink-0 py-1.5", children: l.to }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-1.5", children: [
+      rows,
+      picker,
       hasNoKnownUsers && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: l.addContactsHint })
     ] })
   ] }) });
@@ -1638,5 +1663,5 @@ exports.toAddContactsRow = toAddContactsRow;
 exports.toAddContactsRows = toAddContactsRows;
 exports.toggleMailFolder = toggleMailFolder;
 exports.validateContactForm = validateContactForm;
-//# sourceMappingURL=chunk-5V4HH7EH.cjs.map
-//# sourceMappingURL=chunk-5V4HH7EH.cjs.map
+//# sourceMappingURL=chunk-XDMIVPJP.cjs.map
+//# sourceMappingURL=chunk-XDMIVPJP.cjs.map