@handled-ai/design-system 0.18.35 → 0.18.37

package/dist/components/email-recipient-field.js

@@ -0,0 +1,400 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import {
+  Check,
+  ChevronDown,
+  CornerDownLeft,
+  Plus,
+  Search,
+  Users,
+  X
+} from "lucide-react";
+import { cn } from "../lib/utils.js";
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function isValidEmail(value) {
+  return EMAIL_REGEX.test(value.trim());
+}
+function contactEmail(contact) {
+  var _a, _b;
+  return (_b = contact.email) != null ? _b : (_a = contact.emails) == null ? void 0 : _a[0];
+}
+function getInitials(name, fallback) {
+  const source = (name == null ? void 0 : name.trim()) || fallback;
+  return source.split(/[\s@.]+/).map((part) => part[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+}
+function RecipientChipPill({
+  recipient,
+  onConfirm,
+  onRemove
+}) {
+  const display = recipient.name || recipient.email;
+  if (!recipient.confirmed) {
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-amber-300 bg-amber-50 text-amber-900", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate max-w-[180px]", children: display }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onConfirm,
+          className: "text-[10.5px] font-semibold px-[7px] py-0.5 rounded bg-amber-300/50 hover:bg-amber-300/85",
+          children: "Confirm"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Remove ${display}`,
+          onClick: onRemove,
+          className: "inline-flex items-center justify-center size-[17px] rounded text-amber-700/80 hover:bg-amber-300/40",
+          children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-border bg-muted/50 text-foreground", children: [
+    /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center size-[17px] rounded bg-emerald-50 text-emerald-700", children: /* @__PURE__ */ jsx(Check, { className: "size-3" }) }),
+    /* @__PURE__ */ jsx("span", { className: "truncate max-w-[180px]", children: display }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Remove ${display}`,
+        onClick: onRemove,
+        className: "inline-flex items-center justify-center size-[17px] rounded text-muted-foreground hover:bg-muted",
+        children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+      }
+    )
+  ] });
+}
+function ContactPickerPopover({
+  triggerRef,
+  contacts,
+  addedEmails,
+  onSelect,
+  onAddEmail,
+  onClose
+}) {
+  const containerRef = React.useRef(null);
+  const searchRef = React.useRef(null);
+  const [query, setQuery] = React.useState("");
+  const [style, setStyle] = React.useState({
+    position: "fixed",
+    top: -9999,
+    left: -9999
+  });
+  React.useEffect(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const width = Math.min(448, window.innerWidth - 32);
+    let left = rect.left;
+    if (left + width > window.innerWidth - 16) {
+      left = window.innerWidth - 16 - width;
+    }
+    if (left < 16) left = 16;
+    const popoverHeight = 280;
+    const spaceBelow = window.innerHeight - rect.bottom - 4;
+    const spaceAbove = rect.top - 4;
+    const placeAbove = spaceBelow < popoverHeight && spaceAbove > spaceBelow;
+    let top = placeAbove ? rect.top - popoverHeight - 4 : rect.bottom + 4;
+    if (top < 16) top = 16;
+    setStyle({ position: "fixed", top, left, width });
+  }, [triggerRef]);
+  React.useEffect(() => {
+    var _a;
+    (_a = searchRef.current) == null ? void 0 : _a.focus();
+    const trigger = triggerRef.current;
+    return () => {
+      if (trigger && typeof trigger.focus === "function") {
+        trigger.focus();
+      }
+    };
+  }, [triggerRef]);
+  React.useEffect(() => {
+    function handleMouseDown(event) {
+      var _a;
+      if (containerRef.current && !containerRef.current.contains(event.target) && !((_a = triggerRef.current) == null ? void 0 : _a.contains(event.target))) {
+        onClose();
+      }
+    }
+    function handleKeyDown2(event) {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        onClose();
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown2);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown2);
+    };
+  }, [onClose, triggerRef]);
+  const normalizedQuery = query.trim().toLowerCase();
+  const filtered = normalizedQuery ? contacts.filter((contact) => {
+    var _a;
+    const email = (_a = contactEmail(contact)) != null ? _a : "";
+    return contact.name.toLowerCase().includes(normalizedQuery) || contact.role.toLowerCase().includes(normalizedQuery) || email.toLowerCase().includes(normalizedQuery);
+  }) : contacts;
+  const queryIsEmail = isValidEmail(query);
+  function handleKeyDown(event) {
+    if (event.key === "Enter" && queryIsEmail) {
+      event.preventDefault();
+      onAddEmail(query.trim());
+      setQuery("");
+    }
+  }
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        style,
+        className: "bg-background border rounded-lg shadow-xl z-50 pointer-events-auto",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5 border-b border-border/50", children: [
+            /* @__PURE__ */ jsx(Search, { className: "size-4 text-muted-foreground shrink-0" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: searchRef,
+                autoFocus: true,
+                value: query,
+                onChange: (event) => setQuery(event.target.value),
+                onKeyDown: handleKeyDown,
+                className: "flex-1 text-[13px] bg-transparent outline-none",
+                placeholder: "Search contacts..."
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { role: "listbox", className: "max-h-[208px] overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "px-3 py-4 text-center text-[13px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              "No contact matches \u2018",
+              query,
+              "\u2019."
+            ] }),
+            queryIsEmail ? /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+              "Press Enter to add ",
+              query,
+              "."
+            ] }) : null
+          ] }) : filtered.map((contact, index) => {
+            const email = contactEmail(contact);
+            const noEmail = !email || !isValidEmail(email);
+            const alreadyAdded = email ? addedEmails.has(email.toLowerCase()) : false;
+            const disabled = noEmail || alreadyAdded;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "option",
+                "aria-selected": false,
+                "aria-disabled": disabled,
+                onClick: () => {
+                  if (!disabled) onSelect(contact);
+                },
+                className: cn(
+                  "flex items-center gap-2.5 px-2 py-1.5 rounded-md cursor-pointer hover:bg-muted/60",
+                  disabled && "opacity-45 pointer-events-none"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-[7px] bg-muted text-[11px] font-medium text-muted-foreground", children: getInitials(contact.name, email != null ? email : "?") }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] font-medium text-foreground", children: contact.name }),
+                      /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: contact.role })
+                    ] }),
+                    email ? /* @__PURE__ */ jsx("div", { className: "truncate text-[11px] text-muted-foreground", children: email }) : null
+                  ] }),
+                  alreadyAdded ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10.5px] font-medium text-muted-foreground", children: "Added" }) : noEmail ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10.5px] font-medium text-muted-foreground", children: "No email" }) : null
+                ]
+              },
+              `${contact.name}-${email != null ? email : index}`
+            );
+          }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 border-t border-border/50 text-[11px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(CornerDownLeft, { className: "size-3 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { children: "Type an address and press Enter to add someone not listed." })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+function EmailRecipientField({
+  label,
+  recipients,
+  onRecipientsChange,
+  amber = false,
+  contacts = [],
+  showPicker = false,
+  showCcBcc = false,
+  ccBccOpen = false,
+  onCcBccToggle,
+  addedEmails,
+  placeholder,
+  contactToRecipient
+}) {
+  const [value, setValue] = React.useState("");
+  const [pickerOpen, setPickerOpen] = React.useState(false);
+  const contactsTriggerRef = React.useRef(null);
+  const hasUnconfirmed = recipients.some((r) => !r.confirmed);
+  const state = amber && hasUnconfirmed ? "amber" : "default";
+  const amberRow = state === "amber";
+  const added = addedEmails != null ? addedEmails : /* @__PURE__ */ new Set();
+  const resolvedPlaceholder = placeholder != null ? placeholder : recipients.length > 0 ? "Add another..." : "Add email...";
+  function addEmail(email) {
+    const trimmed = email.trim();
+    if (!isValidEmail(trimmed)) return;
+    if (added.has(trimmed.toLowerCase())) return;
+    onRecipientsChange([
+      ...recipients,
+      { id: trimmed, email: trimmed, name: "", confirmed: false }
+    ]);
+    setValue("");
+  }
+  function handleKeyDown(event) {
+    if ((event.key === "Enter" || event.key === ",") && isValidEmail(value)) {
+      event.preventDefault();
+      addEmail(value);
+      return;
+    }
+    if (event.key === "Backspace" && value === "" && recipients.length > 0) {
+      event.preventDefault();
+      onRecipientsChange(recipients.slice(0, -1));
+    }
+  }
+  function confirmRecipient(id) {
+    onRecipientsChange(
+      recipients.map((r) => r.id === id ? __spreadProps(__spreadValues({}, r), { confirmed: true }) : r)
+    );
+  }
+  function removeRecipient(id) {
+    onRecipientsChange(recipients.filter((r) => r.id !== id));
+  }
+  function selectContact(contact) {
+    var _a, _b, _c;
+    const recipient = (_c = contactToRecipient == null ? void 0 : contactToRecipient(contact)) != null ? _c : {
+      id: (_a = contactEmail(contact)) != null ? _a : contact.name,
+      email: (_b = contactEmail(contact)) != null ? _b : "",
+      name: contact.name,
+      confirmed: true
+    };
+    onRecipientsChange([...recipients, recipient]);
+    setPickerOpen(false);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-[60px_1fr] gap-2 px-[18px] py-[9px] border-b border-border/70 items-start text-sm",
+        amberRow && "bg-amber-50/35 border-amber-200/80"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground pt-[7px]",
+              amberRow && "text-amber-700"
+            ),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5 items-center", children: [
+            recipients.map((recipient) => /* @__PURE__ */ jsx(
+              RecipientChipPill,
+              {
+                recipient,
+                onConfirm: () => confirmRecipient(recipient.id),
+                onRemove: () => removeRecipient(recipient.id)
+              },
+              recipient.id
+            )),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value,
+                onChange: (event) => setValue(event.target.value),
+                onKeyDown: handleKeyDown,
+                placeholder: resolvedPlaceholder,
+                className: "min-w-[130px] flex-1 h-6 text-[13px] bg-transparent border-0 outline-none placeholder:text-muted-foreground"
+              }
+            )
+          ] }),
+          showPicker || showCcBcc ? /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 mt-2", children: [
+            showPicker ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                ref: contactsTriggerRef,
+                type: "button",
+                onClick: () => setPickerOpen((open) => !open),
+                className: "inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]",
+                children: [
+                  /* @__PURE__ */ jsx(Users, { className: "size-3" }),
+                  "Contacts",
+                  /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" })
+                ]
+              }
+            ) : null,
+            showCcBcc ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onCcBccToggle,
+                className: "inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]",
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "size-3" }),
+                  ccBccOpen ? "Hide Cc/Bcc" : "Add Cc/Bcc"
+                ]
+              }
+            ) : null
+          ] }) : null,
+          pickerOpen ? /* @__PURE__ */ jsx(
+            ContactPickerPopover,
+            {
+              triggerRef: contactsTriggerRef,
+              contacts,
+              addedEmails: added,
+              onSelect: selectContact,
+              onAddEmail: (email) => {
+                addEmail(email);
+                setPickerOpen(false);
+              },
+              onClose: () => setPickerOpen(false)
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  EmailRecipientField
+};
+//# sourceMappingURL=email-recipient-field.js.map

package/dist/components/email-recipient-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/email-recipient-field.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { createPortal } from \"react-dom\"\nimport {\n  Check,\n  ChevronDown,\n  CornerDownLeft,\n  Plus,\n  Search,\n  Users,\n  X,\n} from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport type { SuggestedContact } from \"./suggested-actions\"\n\nconst EMAIL_REGEX = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nfunction isValidEmail(value: string): boolean {\n  return EMAIL_REGEX.test(value.trim())\n}\n\nfunction contactEmail(contact: SuggestedContact): string | undefined {\n  return contact.email ?? contact.emails?.[0]\n}\n\nfunction getInitials(name: string, fallback: string): string {\n  const source = name?.trim() || fallback\n  return source\n    .split(/[\\s@.]+/)\n    .map((part) => part[0])\n    .filter(Boolean)\n    .slice(0, 2)\n    .join(\"\")\n    .toUpperCase()\n}\n\nexport interface RecipientChip {\n  id: string\n  email: string\n  name: string\n  confirmed: boolean\n}\n\nexport interface EmailRecipientFieldProps {\n  label: string\n  recipients: RecipientChip[]\n  onRecipientsChange: (recipients: RecipientChip[]) => void\n  amber?: boolean\n  contacts?: SuggestedContact[]\n  showPicker?: boolean\n  showCcBcc?: boolean\n  ccBccOpen?: boolean\n  onCcBccToggle?: () => void\n  addedEmails?: Set<string>\n  placeholder?: string\n  contactToRecipient?: (contact: SuggestedContact) => RecipientChip\n}\n\nfunction RecipientChipPill({\n  recipient,\n  onConfirm,\n  onRemove,\n}: {\n  recipient: RecipientChip\n  onConfirm: () => void\n  onRemove: () => void\n}) {\n  const display = recipient.name || recipient.email\n\n  if (!recipient.confirmed) {\n    return (\n      <span className=\"inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-amber-300 bg-amber-50 text-amber-900\">\n        <span className=\"truncate max-w-[180px]\">{display}</span>\n        <button\n          type=\"button\"\n          onClick={onConfirm}\n          className=\"text-[10.5px] font-semibold px-[7px] py-0.5 rounded bg-amber-300/50 hover:bg-amber-300/85\"\n        >\n          Confirm\n        </button>\n        <button\n          type=\"button\"\n          aria-label={`Remove ${display}`}\n          onClick={onRemove}\n          className=\"inline-flex items-center justify-center size-[17px] rounded text-amber-700/80 hover:bg-amber-300/40\"\n        >\n          <X className=\"size-3\" />\n        </button>\n      </span>\n    )\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-border bg-muted/50 text-foreground\">\n      <span className=\"inline-flex items-center justify-center size-[17px] rounded bg-emerald-50 text-emerald-700\">\n        <Check className=\"size-3\" />\n      </span>\n      <span className=\"truncate max-w-[180px]\">{display}</span>\n      <button\n        type=\"button\"\n        aria-label={`Remove ${display}`}\n        onClick={onRemove}\n        className=\"inline-flex items-center justify-center size-[17px] rounded text-muted-foreground hover:bg-muted\"\n      >\n        <X className=\"size-3\" />\n      </button>\n    </span>\n  )\n}\n\nfunction ContactPickerPopover({\n  triggerRef,\n  contacts,\n  addedEmails,\n  onSelect,\n  onAddEmail,\n  onClose,\n}: {\n  triggerRef: React.RefObject<HTMLElement | null>\n  contacts: SuggestedContact[]\n  addedEmails: Set<string>\n  onSelect: (contact: SuggestedContact) => void\n  onAddEmail: (email: string) => void\n  onClose: () => void\n}) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const searchRef = React.useRef<HTMLInputElement>(null)\n  const [query, setQuery] = React.useState(\"\")\n  const [style, setStyle] = React.useState<React.CSSProperties>({\n    position: \"fixed\",\n    top: -9999,\n    left: -9999,\n  })\n\n  React.useEffect(() => {\n    const trigger = triggerRef.current\n    if (!trigger) return\n    const rect = trigger.getBoundingClientRect()\n    const width = Math.min(448, window.innerWidth - 32)\n    let left = rect.left\n    if (left + width > window.innerWidth - 16) {\n      left = window.innerWidth - 16 - width\n    }\n    if (left < 16) left = 16\n    const popoverHeight = 280\n    const spaceBelow = window.innerHeight - rect.bottom - 4\n    const spaceAbove = rect.top - 4\n    const placeAbove = spaceBelow < popoverHeight && spaceAbove > spaceBelow\n    let top = placeAbove ? rect.top - popoverHeight - 4 : rect.bottom + 4\n    if (top < 16) top = 16\n    setStyle({ position: \"fixed\", top, left, width })\n  }, [triggerRef])\n\n  React.useEffect(() => {\n    searchRef.current?.focus()\n    const trigger = triggerRef.current\n    return () => {\n      if (trigger && typeof trigger.focus === \"function\") {\n        trigger.focus()\n      }\n    }\n  }, [triggerRef])\n\n  React.useEffect(() => {\n    function handleMouseDown(event: MouseEvent) {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(event.target as Node) &&\n        !triggerRef.current?.contains(event.target as Node)\n      ) {\n        onClose()\n      }\n    }\n    function handleKeyDown(event: KeyboardEvent) {\n      if (event.key === \"Escape\") {\n        event.stopPropagation()\n        onClose()\n      }\n    }\n    document.addEventListener(\"mousedown\", handleMouseDown)\n    document.addEventListener(\"keydown\", handleKeyDown)\n    return () => {\n      document.removeEventListener(\"mousedown\", handleMouseDown)\n      document.removeEventListener(\"keydown\", handleKeyDown)\n    }\n  }, [onClose, triggerRef])\n\n  const normalizedQuery = query.trim().toLowerCase()\n  const filtered = normalizedQuery\n    ? contacts.filter((contact) => {\n        const email = contactEmail(contact) ?? \"\"\n        return (\n          contact.name.toLowerCase().includes(normalizedQuery) ||\n          contact.role.toLowerCase().includes(normalizedQuery) ||\n          email.toLowerCase().includes(normalizedQuery)\n        )\n      })\n    : contacts\n\n  const queryIsEmail = isValidEmail(query)\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (event.key === \"Enter\" && queryIsEmail) {\n      event.preventDefault()\n      onAddEmail(query.trim())\n      setQuery(\"\")\n    }\n  }\n\n  return createPortal(\n    <div\n      ref={containerRef}\n      style={style}\n      className=\"bg-background border rounded-lg shadow-xl z-50 pointer-events-auto\"\n    >\n      <div className=\"flex items-center gap-2 px-3 py-2.5 border-b border-border/50\">\n        <Search className=\"size-4 text-muted-foreground shrink-0\" />\n        <input\n          ref={searchRef}\n          autoFocus\n          value={query}\n          onChange={(event) => setQuery(event.target.value)}\n          onKeyDown={handleKeyDown}\n          className=\"flex-1 text-[13px] bg-transparent outline-none\"\n          placeholder=\"Search contacts...\"\n        />\n      </div>\n\n      <div role=\"listbox\" className=\"max-h-[208px] overflow-y-auto p-1\">\n        {filtered.length === 0 ? (\n          <div className=\"px-3 py-4 text-center text-[13px] text-muted-foreground\">\n            <div>No contact matches &lsquo;{query}&rsquo;.</div>\n            {queryIsEmail ? (\n              <div className=\"mt-1\">Press Enter to add {query}.</div>\n            ) : null}\n          </div>\n        ) : (\n          filtered.map((contact, index) => {\n            const email = contactEmail(contact)\n            const noEmail = !email || !isValidEmail(email)\n            const alreadyAdded = email\n              ? addedEmails.has(email.toLowerCase())\n              : false\n            const disabled = noEmail || alreadyAdded\n\n            return (\n              <div\n                key={`${contact.name}-${email ?? index}`}\n                role=\"option\"\n                aria-selected={false}\n                aria-disabled={disabled}\n                onClick={() => {\n                  if (!disabled) onSelect(contact)\n                }}\n                className={cn(\n                  \"flex items-center gap-2.5 px-2 py-1.5 rounded-md cursor-pointer hover:bg-muted/60\",\n                  disabled && \"opacity-45 pointer-events-none\",\n                )}\n              >\n                <div className=\"flex size-7 shrink-0 items-center justify-center rounded-[7px] bg-muted text-[11px] font-medium text-muted-foreground\">\n                  {getInitials(contact.name, email ?? \"?\")}\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-center gap-1.5\">\n                    <span className=\"truncate text-[13px] font-medium text-foreground\">\n                      {contact.name}\n                    </span>\n                    <span className=\"truncate text-[11px] text-muted-foreground\">\n                      {contact.role}\n                    </span>\n                  </div>\n                  {email ? (\n                    <div className=\"truncate text-[11px] text-muted-foreground\">\n                      {email}\n                    </div>\n                  ) : null}\n                </div>\n                {alreadyAdded ? (\n                  <span className=\"shrink-0 text-[10.5px] font-medium text-muted-foreground\">\n                    Added\n                  </span>\n                ) : noEmail ? (\n                  <span className=\"shrink-0 text-[10.5px] font-medium text-muted-foreground\">\n                    No email\n                  </span>\n                ) : null}\n              </div>\n            )\n          })\n        )}\n      </div>\n\n      <div className=\"flex items-center gap-1.5 px-3 py-2 border-t border-border/50 text-[11px] text-muted-foreground\">\n        <CornerDownLeft className=\"size-3 shrink-0\" />\n        <span>Type an address and press Enter to add someone not listed.</span>\n      </div>\n    </div>,\n    document.body,\n  )\n}\n\nexport function EmailRecipientField({\n  label,\n  recipients,\n  onRecipientsChange,\n  amber = false,\n  contacts = [],\n  showPicker = false,\n  showCcBcc = false,\n  ccBccOpen = false,\n  onCcBccToggle,\n  addedEmails,\n  placeholder,\n  contactToRecipient,\n}: EmailRecipientFieldProps) {\n  const [value, setValue] = React.useState(\"\")\n  const [pickerOpen, setPickerOpen] = React.useState(false)\n  const contactsTriggerRef = React.useRef<HTMLButtonElement>(null)\n\n  const hasUnconfirmed = recipients.some((r) => !r.confirmed)\n  const state: \"default\" | \"amber\" =\n    amber && hasUnconfirmed ? \"amber\" : \"default\"\n  const amberRow = state === \"amber\"\n\n  const added = addedEmails ?? new Set<string>()\n\n  const resolvedPlaceholder =\n    placeholder ?? (recipients.length > 0 ? \"Add another...\" : \"Add email...\")\n\n  function addEmail(email: string) {\n    const trimmed = email.trim()\n    if (!isValidEmail(trimmed)) return\n    if (added.has(trimmed.toLowerCase())) return\n    onRecipientsChange([\n      ...recipients,\n      { id: trimmed, email: trimmed, name: \"\", confirmed: false },\n    ])\n    setValue(\"\")\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if ((event.key === \"Enter\" || event.key === \",\") && isValidEmail(value)) {\n      event.preventDefault()\n      addEmail(value)\n      return\n    }\n    if (event.key === \"Backspace\" && value === \"\" && recipients.length > 0) {\n      event.preventDefault()\n      onRecipientsChange(recipients.slice(0, -1))\n    }\n  }\n\n  function confirmRecipient(id: string) {\n    onRecipientsChange(\n      recipients.map((r) => (r.id === id ? { ...r, confirmed: true } : r)),\n    )\n  }\n\n  function removeRecipient(id: string) {\n    onRecipientsChange(recipients.filter((r) => r.id !== id))\n  }\n\n  function selectContact(contact: SuggestedContact) {\n    const recipient =\n      contactToRecipient?.(contact) ??\n      ({\n        id: contactEmail(contact) ?? contact.name,\n        email: contactEmail(contact) ?? \"\",\n        name: contact.name,\n        confirmed: true,\n      } satisfies RecipientChip)\n    onRecipientsChange([...recipients, recipient])\n    setPickerOpen(false)\n  }\n\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-[60px_1fr] gap-2 px-[18px] py-[9px] border-b border-border/70 items-start text-sm\",\n        amberRow && \"bg-amber-50/35 border-amber-200/80\",\n      )}\n    >\n      <div\n        className={cn(\n          \"text-[11px] font-semibold uppercase tracking-wide text-muted-foreground pt-[7px]\",\n          amberRow && \"text-amber-700\",\n        )}\n      >\n        {label}\n      </div>\n\n      <div className=\"min-w-0\">\n        <div className=\"flex flex-wrap gap-1.5 items-center\">\n          {recipients.map((recipient) => (\n            <RecipientChipPill\n              key={recipient.id}\n              recipient={recipient}\n              onConfirm={() => confirmRecipient(recipient.id)}\n              onRemove={() => removeRecipient(recipient.id)}\n            />\n          ))}\n          <input\n            value={value}\n            onChange={(event) => setValue(event.target.value)}\n            onKeyDown={handleKeyDown}\n            placeholder={resolvedPlaceholder}\n            className=\"min-w-[130px] flex-1 h-6 text-[13px] bg-transparent border-0 outline-none placeholder:text-muted-foreground\"\n          />\n        </div>\n\n        {showPicker || showCcBcc ? (\n          <div className=\"flex gap-1.5 mt-2\">\n            {showPicker ? (\n              <button\n                ref={contactsTriggerRef}\n                type=\"button\"\n                onClick={() => setPickerOpen((open) => !open)}\n                className=\"inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]\"\n              >\n                <Users className=\"size-3\" />\n                Contacts\n                <ChevronDown className=\"size-3\" />\n              </button>\n            ) : null}\n            {showCcBcc ? (\n              <button\n                type=\"button\"\n                onClick={onCcBccToggle}\n                className=\"inline-flex items-center gap-1 h-6 px-2.5 rounded-md border border-border bg-background text-[11px] font-medium text-muted-foreground hover:bg-muted/60 hover:text-foreground transition-colors duration-[120ms]\"\n              >\n                <Plus className=\"size-3\" />\n                {ccBccOpen ? \"Hide Cc/Bcc\" : \"Add Cc/Bcc\"}\n              </button>\n            ) : null}\n          </div>\n        ) : null}\n\n        {pickerOpen ? (\n          <ContactPickerPopover\n            triggerRef={contactsTriggerRef}\n            contacts={contacts}\n            addedEmails={added}\n            onSelect={selectContact}\n            onAddEmail={(email) => {\n              addEmail(email)\n              setPickerOpen(false)\n            }}\n            onClose={() => setPickerOpen(false)}\n          />\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["handleKeyDown"]}

package/dist/components/email-send-bar.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+interface EmailSendBarAction {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+interface EmailSendBarProps {
+    primaryActions?: EmailSendBarAction[];
+    secondaryActions?: EmailSendBarAction[];
+    sendLabel?: string;
+    sendIcon?: React.ReactNode;
+    sendDisabled?: boolean;
+    onSend?: () => void;
+    sendHint?: React.ReactNode;
+    className?: string;
+}
+declare function EmailSendBar({ primaryActions, secondaryActions, sendLabel, sendIcon, sendDisabled, onSend, sendHint, className, }: EmailSendBarProps): React.JSX.Element;
+
+export { EmailSendBar, type EmailSendBarAction, type EmailSendBarProps };

package/dist/components/email-send-bar.js

@@ -0,0 +1,66 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function GhostAction({ action }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: action.onClick,
+      disabled: action.disabled,
+      className: "group inline-flex items-center gap-[7px] h-[30px] px-[11px] rounded-[7px] border border-transparent text-xs font-medium text-muted-foreground transition-all duration-[120ms] hover:bg-background hover:text-foreground hover:border-border hover:shadow-sm disabled:opacity-50 disabled:pointer-events-none",
+      children: [
+        action.icon ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 group-hover:text-muted-foreground", children: action.icon }) : null,
+        action.label
+      ]
+    }
+  );
+}
+function EmailSendBar({
+  primaryActions = [],
+  secondaryActions = [],
+  sendLabel = "Send",
+  sendIcon,
+  sendDisabled = false,
+  onSend,
+  sendHint,
+  className
+}) {
+  const hasPrimary = primaryActions.length > 0;
+  const hasSecondary = secondaryActions.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1.5 px-3.5 py-2.5 border-t bg-muted/20",
+        className
+      ),
+      children: [
+        primaryActions.map((action) => /* @__PURE__ */ jsx(GhostAction, { action }, action.key)),
+        hasPrimary && hasSecondary ? /* @__PURE__ */ jsx("div", { className: "w-px h-[18px] bg-border mx-1" }) : null,
+        secondaryActions.map((action) => /* @__PURE__ */ jsx(GhostAction, { action }, action.key)),
+        /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+        sendHint ? /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground mr-1", children: sendHint }) : null,
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onSend,
+            disabled: sendDisabled,
+            className: "inline-flex items-center gap-2 h-8 px-3.5 rounded-md bg-foreground text-background text-xs font-semibold shadow-sm hover:bg-foreground/90 disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none",
+            children: [
+              sendIcon,
+              sendLabel
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  EmailSendBar
+};
+//# sourceMappingURL=email-send-bar.js.map

package/dist/components/email-send-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/email-send-bar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface EmailSendBarAction {\n  key: string\n  label: string\n  icon?: React.ReactNode\n  onClick?: () => void\n  disabled?: boolean\n}\n\nexport interface EmailSendBarProps {\n  primaryActions?: EmailSendBarAction[]\n  secondaryActions?: EmailSendBarAction[]\n  sendLabel?: string\n  sendIcon?: React.ReactNode\n  sendDisabled?: boolean\n  onSend?: () => void\n  sendHint?: React.ReactNode\n  className?: string\n}\n\nfunction GhostAction({ action }: { action: EmailSendBarAction }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={action.onClick}\n      disabled={action.disabled}\n      className=\"group inline-flex items-center gap-[7px] h-[30px] px-[11px] rounded-[7px] border border-transparent text-xs font-medium text-muted-foreground transition-all duration-[120ms] hover:bg-background hover:text-foreground hover:border-border hover:shadow-sm disabled:opacity-50 disabled:pointer-events-none\"\n    >\n      {action.icon ? (\n        <span className=\"text-muted-foreground/60 group-hover:text-muted-foreground\">\n          {action.icon}\n        </span>\n      ) : null}\n      {action.label}\n    </button>\n  )\n}\n\nexport function EmailSendBar({\n  primaryActions = [],\n  secondaryActions = [],\n  sendLabel = \"Send\",\n  sendIcon,\n  sendDisabled = false,\n  onSend,\n  sendHint,\n  className,\n}: EmailSendBarProps) {\n  const hasPrimary = primaryActions.length > 0\n  const hasSecondary = secondaryActions.length > 0\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1.5 px-3.5 py-2.5 border-t bg-muted/20\",\n        className,\n      )}\n    >\n      {primaryActions.map((action) => (\n        <GhostAction key={action.key} action={action} />\n      ))}\n\n      {hasPrimary && hasSecondary ? (\n        <div className=\"w-px h-[18px] bg-border mx-1\" />\n      ) : null}\n\n      {secondaryActions.map((action) => (\n        <GhostAction key={action.key} action={action} />\n      ))}\n\n      <div className=\"flex-1\" />\n\n      {sendHint ? (\n        <span className=\"text-[11px] text-muted-foreground mr-1\">\n          {sendHint}\n        </span>\n      ) : null}\n\n      <button\n        type=\"button\"\n        onClick={onSend}\n        disabled={sendDisabled}\n        className=\"inline-flex items-center gap-2 h-8 px-3.5 rounded-md bg-foreground text-background text-xs font-semibold shadow-sm hover:bg-foreground/90 disabled:bg-muted disabled:text-muted-foreground disabled:shadow-none\"\n      >\n        {sendIcon}\n        {sendLabel}\n      </button>\n    </div>\n  )\n}\n"],"mappings":";AA2BI,SAOI,KAPJ;AAvBJ,SAAS,UAAU;AAqBnB,SAAS,YAAY,EAAE,OAAO,GAAmC;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,OAAO;AAAA,MAChB,UAAU,OAAO;AAAA,MACjB,WAAU;AAAA,MAET;AAAA,eAAO,OACN,oBAAC,UAAK,WAAU,8DACb,iBAAO,MACV,IACE;AAAA,QACH,OAAO;AAAA;AAAA;AAAA,EACV;AAEJ;AAEO,SAAS,aAAa;AAAA,EAC3B,iBAAiB,CAAC;AAAA,EAClB,mBAAmB,CAAC;AAAA,EACpB,YAAY;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,aAAa,eAAe,SAAS;AAC3C,QAAM,eAAe,iBAAiB,SAAS;AAE/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA,uBAAe,IAAI,CAAC,WACnB,oBAAC,eAA6B,UAAZ,OAAO,GAAqB,CAC/C;AAAA,QAEA,cAAc,eACb,oBAAC,SAAI,WAAU,gCAA+B,IAC5C;AAAA,QAEH,iBAAiB,IAAI,CAAC,WACrB,oBAAC,eAA6B,UAAZ,OAAO,GAAqB,CAC/C;AAAA,QAED,oBAAC,SAAI,WAAU,UAAS;AAAA,QAEvB,WACC,oBAAC,UAAK,WAAU,0CACb,oBACH,IACE;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,UAAU;AAAA,YACV,WAAU;AAAA,YAET;AAAA;AAAA,cACA;AAAA;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/pill.d.ts

@@ -12,7 +12,7 @@ import { VariantProps } from 'class-variance-authority';
  */
 type PillStatus = "success" | "warning" | "error" | "neutral" | "info";
 declare const pillVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "error" | "neutral" | "info" | "success" | "warning" | null | undefined;
+    variant?: "error" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "neutral" | "info" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface PillProps extends React.ComponentProps<"span">, VariantProps<typeof pillVariants> {
 }

package/dist/components/score-feedback.js

@@ -102,7 +102,7 @@ function Trigger({ className }) {
           className
         ),
         children: [
-          /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-foreground" }),
+          /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-emerald-500" }),
           /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: label })
         ]
       }
@@ -116,9 +116,9 @@ function Trigger({ className }) {
         onClick: () => handleThumbClick("up"),
         className: cn(
           "p-1.5 rounded transition-colors",
-          thumbState === "up" ? "bg-muted text-foreground" : "hover:bg-muted text-muted-foreground hover:text-foreground"
+          thumbState === "up" ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400" : "hover:bg-muted text-muted-foreground hover:text-foreground"
         ),
-        children: /* @__PURE__ */ jsx(ThumbsUp, { className: "w-3.5 h-3.5" })
+        children: /* @__PURE__ */ jsx(ThumbsUp, { className: "w-3.5 h-3.5", fill: thumbState === "up" ? "currentColor" : "none" })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -128,9 +128,9 @@ function Trigger({ className }) {
         onClick: () => handleThumbClick("down"),
         className: cn(
           "p-1.5 rounded transition-colors",
-          thumbState === "down" ? "bg-muted text-foreground" : "hover:bg-muted text-muted-foreground hover:text-foreground"
+          thumbState === "down" ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400" : "hover:bg-muted text-muted-foreground hover:text-foreground"
         ),
-        children: /* @__PURE__ */ jsx(ThumbsDown, { className: "w-3.5 h-3.5" })
+        children: /* @__PURE__ */ jsx(ThumbsDown, { className: "w-3.5 h-3.5", fill: thumbState === "down" ? "currentColor" : "none" })
       }
     )
   ] });
@@ -158,7 +158,7 @@ function Panel({ className }) {
           onClick: () => togglePill(pill),
           className: cn(
             "px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors",
-            selectedPills.includes(pill) ? thumbState === "up" ? "bg-muted text-foreground border-border" : "bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800" : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"
+            selectedPills.includes(pill) ? thumbState === "up" ? "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800" : "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800" : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"
           ),
           children: pill
         },