@handled-ai/design-system 0.18.36 → 0.18.37

package/src/components/email-preview-card.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import * as React from "react"
+import { Eye } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+export interface EmailPreviewCardProps {
+  from: { name: string; email: string }
+  to?: string
+  subject?: string
+  htmlBody?: string
+  textBody?: string
+  signatureHtml?: string | null
+  className?: string
+}
+
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join("")
+    .toUpperCase()
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;")
+}
+
+export function EmailPreviewCard({
+  from,
+  to,
+  subject,
+  htmlBody,
+  textBody,
+  signatureHtml,
+  className,
+}: EmailPreviewCardProps) {
+  const recipientLabel = to ? `${to}'s` : "the recipient's"
+  const bodyHtml = htmlBody ?? (textBody ? escapeHtml(textBody) : "")
+
+  return (
+    <div className={cn("p-4 bg-muted/30 min-h-full", className)}>
+      <div className="flex items-start gap-2 mb-3 py-2.5 px-3 border rounded-lg bg-background text-[11.5px] text-muted-foreground">
+        <Eye className="size-4 shrink-0 mt-0.5" />
+        <span>
+          This is how your email lands in {recipientLabel} inbox. Nothing has
+          been sent yet.
+        </span>
+      </div>
+
+      <div className="bg-background border rounded-xl shadow-sm overflow-hidden">
+        <div className="px-[18px] pt-4 pb-3 text-base font-semibold border-b border-border/50">
+          {subject || "(no subject)"}
+        </div>
+
+        <div className="flex items-center gap-3 px-[18px] pt-3">
+          <div className="flex size-9 shrink-0 items-center justify-center rounded-full bg-foreground text-background text-xs font-semibold">
+            {getInitials(from.name)}
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="text-sm">
+              <span className="font-semibold text-foreground">{from.name}</span>{" "}
+              <span className="text-muted-foreground">&lt;{from.email}&gt;</span>
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {to ? `to ${to}` : "to no recipient yet"}
+            </div>
+          </div>
+          <div className="text-xs text-muted-foreground shrink-0">just now</div>
+        </div>
+
+        <div
+          className="px-[18px] py-2 ml-[47px] text-[13.5px] leading-relaxed whitespace-pre-wrap"
+          dangerouslySetInnerHTML={{ __html: bodyHtml }}
+        />
+
+        {signatureHtml ? (
+          <div
+            className="ml-[47px] px-[18px] pt-3 mt-3 border-t border-border/50 pb-4 text-xs leading-relaxed text-muted-foreground"
+            dangerouslySetInnerHTML={{ __html: signatureHtml }}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/components/email-recipient-field.tsx

@@ -0,0 +1,456 @@
+"use client"
+
+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"
+import type { SuggestedContact } from "./suggested-actions"
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+function isValidEmail(value: string): boolean {
+  return EMAIL_REGEX.test(value.trim())
+}
+
+function contactEmail(contact: SuggestedContact): string | undefined {
+  return contact.email ?? contact.emails?.[0]
+}
+
+function getInitials(name: string, fallback: string): string {
+  const source = name?.trim() || fallback
+  return source
+    .split(/[\s@.]+/)
+    .map((part) => part[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join("")
+    .toUpperCase()
+}
+
+export interface RecipientChip {
+  id: string
+  email: string
+  name: string
+  confirmed: boolean
+}
+
+export interface EmailRecipientFieldProps {
+  label: string
+  recipients: RecipientChip[]
+  onRecipientsChange: (recipients: RecipientChip[]) => void
+  amber?: boolean
+  contacts?: SuggestedContact[]
+  showPicker?: boolean
+  showCcBcc?: boolean
+  ccBccOpen?: boolean
+  onCcBccToggle?: () => void
+  addedEmails?: Set<string>
+  placeholder?: string
+  contactToRecipient?: (contact: SuggestedContact) => RecipientChip
+}
+
+function RecipientChipPill({
+  recipient,
+  onConfirm,
+  onRemove,
+}: {
+  recipient: RecipientChip
+  onConfirm: () => void
+  onRemove: () => void
+}) {
+  const display = recipient.name || recipient.email
+
+  if (!recipient.confirmed) {
+    return (
+      <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">
+        <span className="truncate max-w-[180px]">{display}</span>
+        <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"
+        >
+          Confirm
+        </button>
+        <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"
+        >
+          <X className="size-3" />
+        </button>
+      </span>
+    )
+  }
+
+  return (
+    <span className="inline-flex items-center gap-1 h-6 px-2 rounded-md text-xs border border-border bg-muted/50 text-foreground">
+      <span className="inline-flex items-center justify-center size-[17px] rounded bg-emerald-50 text-emerald-700">
+        <Check className="size-3" />
+      </span>
+      <span className="truncate max-w-[180px]">{display}</span>
+      <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"
+      >
+        <X className="size-3" />
+      </button>
+    </span>
+  )
+}
+
+function ContactPickerPopover({
+  triggerRef,
+  contacts,
+  addedEmails,
+  onSelect,
+  onAddEmail,
+  onClose,
+}: {
+  triggerRef: React.RefObject<HTMLElement | null>
+  contacts: SuggestedContact[]
+  addedEmails: Set<string>
+  onSelect: (contact: SuggestedContact) => void
+  onAddEmail: (email: string) => void
+  onClose: () => void
+}) {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const searchRef = React.useRef<HTMLInputElement>(null)
+  const [query, setQuery] = React.useState("")
+  const [style, setStyle] = React.useState<React.CSSProperties>({
+    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(() => {
+    searchRef.current?.focus()
+    const trigger = triggerRef.current
+    return () => {
+      if (trigger && typeof trigger.focus === "function") {
+        trigger.focus()
+      }
+    }
+  }, [triggerRef])
+
+  React.useEffect(() => {
+    function handleMouseDown(event: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node) &&
+        !triggerRef.current?.contains(event.target as Node)
+      ) {
+        onClose()
+      }
+    }
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        event.stopPropagation()
+        onClose()
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown)
+    document.addEventListener("keydown", handleKeyDown)
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown)
+      document.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [onClose, triggerRef])
+
+  const normalizedQuery = query.trim().toLowerCase()
+  const filtered = normalizedQuery
+    ? contacts.filter((contact) => {
+        const email = contactEmail(contact) ?? ""
+        return (
+          contact.name.toLowerCase().includes(normalizedQuery) ||
+          contact.role.toLowerCase().includes(normalizedQuery) ||
+          email.toLowerCase().includes(normalizedQuery)
+        )
+      })
+    : contacts
+
+  const queryIsEmail = isValidEmail(query)
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.key === "Enter" && queryIsEmail) {
+      event.preventDefault()
+      onAddEmail(query.trim())
+      setQuery("")
+    }
+  }
+
+  return createPortal(
+    <div
+      ref={containerRef}
+      style={style}
+      className="bg-background border rounded-lg shadow-xl z-50 pointer-events-auto"
+    >
+      <div className="flex items-center gap-2 px-3 py-2.5 border-b border-border/50">
+        <Search className="size-4 text-muted-foreground shrink-0" />
+        <input
+          ref={searchRef}
+          autoFocus
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          onKeyDown={handleKeyDown}
+          className="flex-1 text-[13px] bg-transparent outline-none"
+          placeholder="Search contacts..."
+        />
+      </div>
+
+      <div role="listbox" className="max-h-[208px] overflow-y-auto p-1">
+        {filtered.length === 0 ? (
+          <div className="px-3 py-4 text-center text-[13px] text-muted-foreground">
+            <div>No contact matches &lsquo;{query}&rsquo;.</div>
+            {queryIsEmail ? (
+              <div className="mt-1">Press Enter to add {query}.</div>
+            ) : null}
+          </div>
+        ) : (
+          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 (
+              <div
+                key={`${contact.name}-${email ?? index}`}
+                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",
+                )}
+              >
+                <div className="flex size-7 shrink-0 items-center justify-center rounded-[7px] bg-muted text-[11px] font-medium text-muted-foreground">
+                  {getInitials(contact.name, email ?? "?")}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-1.5">
+                    <span className="truncate text-[13px] font-medium text-foreground">
+                      {contact.name}
+                    </span>
+                    <span className="truncate text-[11px] text-muted-foreground">
+                      {contact.role}
+                    </span>
+                  </div>
+                  {email ? (
+                    <div className="truncate text-[11px] text-muted-foreground">
+                      {email}
+                    </div>
+                  ) : null}
+                </div>
+                {alreadyAdded ? (
+                  <span className="shrink-0 text-[10.5px] font-medium text-muted-foreground">
+                    Added
+                  </span>
+                ) : noEmail ? (
+                  <span className="shrink-0 text-[10.5px] font-medium text-muted-foreground">
+                    No email
+                  </span>
+                ) : null}
+              </div>
+            )
+          })
+        )}
+      </div>
+
+      <div className="flex items-center gap-1.5 px-3 py-2 border-t border-border/50 text-[11px] text-muted-foreground">
+        <CornerDownLeft className="size-3 shrink-0" />
+        <span>Type an address and press Enter to add someone not listed.</span>
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+export function EmailRecipientField({
+  label,
+  recipients,
+  onRecipientsChange,
+  amber = false,
+  contacts = [],
+  showPicker = false,
+  showCcBcc = false,
+  ccBccOpen = false,
+  onCcBccToggle,
+  addedEmails,
+  placeholder,
+  contactToRecipient,
+}: EmailRecipientFieldProps) {
+  const [value, setValue] = React.useState("")
+  const [pickerOpen, setPickerOpen] = React.useState(false)
+  const contactsTriggerRef = React.useRef<HTMLButtonElement>(null)
+
+  const hasUnconfirmed = recipients.some((r) => !r.confirmed)
+  const state: "default" | "amber" =
+    amber && hasUnconfirmed ? "amber" : "default"
+  const amberRow = state === "amber"
+
+  const added = addedEmails ?? new Set<string>()
+
+  const resolvedPlaceholder =
+    placeholder ?? (recipients.length > 0 ? "Add another..." : "Add email...")
+
+  function addEmail(email: string) {
+    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: React.KeyboardEvent<HTMLInputElement>) {
+    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: string) {
+    onRecipientsChange(
+      recipients.map((r) => (r.id === id ? { ...r, confirmed: true } : r)),
+    )
+  }
+
+  function removeRecipient(id: string) {
+    onRecipientsChange(recipients.filter((r) => r.id !== id))
+  }
+
+  function selectContact(contact: SuggestedContact) {
+    const recipient =
+      contactToRecipient?.(contact) ??
+      ({
+        id: contactEmail(contact) ?? contact.name,
+        email: contactEmail(contact) ?? "",
+        name: contact.name,
+        confirmed: true,
+      } satisfies RecipientChip)
+    onRecipientsChange([...recipients, recipient])
+    setPickerOpen(false)
+  }
+
+  return (
+    <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",
+      )}
+    >
+      <div
+        className={cn(
+          "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground pt-[7px]",
+          amberRow && "text-amber-700",
+        )}
+      >
+        {label}
+      </div>
+
+      <div className="min-w-0">
+        <div className="flex flex-wrap gap-1.5 items-center">
+          {recipients.map((recipient) => (
+            <RecipientChipPill
+              key={recipient.id}
+              recipient={recipient}
+              onConfirm={() => confirmRecipient(recipient.id)}
+              onRemove={() => removeRecipient(recipient.id)}
+            />
+          ))}
+          <input
+            value={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"
+          />
+        </div>
+
+        {showPicker || showCcBcc ? (
+          <div className="flex gap-1.5 mt-2">
+            {showPicker ? (
+              <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]"
+              >
+                <Users className="size-3" />
+                Contacts
+                <ChevronDown className="size-3" />
+              </button>
+            ) : null}
+            {showCcBcc ? (
+              <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]"
+              >
+                <Plus className="size-3" />
+                {ccBccOpen ? "Hide Cc/Bcc" : "Add Cc/Bcc"}
+              </button>
+            ) : null}
+          </div>
+        ) : null}
+
+        {pickerOpen ? (
+          <ContactPickerPopover
+            triggerRef={contactsTriggerRef}
+            contacts={contacts}
+            addedEmails={added}
+            onSelect={selectContact}
+            onAddEmail={(email) => {
+              addEmail(email)
+              setPickerOpen(false)
+            }}
+            onClose={() => setPickerOpen(false)}
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/components/email-send-bar.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+export interface EmailSendBarAction {
+  key: string
+  label: string
+  icon?: React.ReactNode
+  onClick?: () => void
+  disabled?: boolean
+}
+
+export interface EmailSendBarProps {
+  primaryActions?: EmailSendBarAction[]
+  secondaryActions?: EmailSendBarAction[]
+  sendLabel?: string
+  sendIcon?: React.ReactNode
+  sendDisabled?: boolean
+  onSend?: () => void
+  sendHint?: React.ReactNode
+  className?: string
+}
+
+function GhostAction({ action }: { action: EmailSendBarAction }) {
+  return (
+    <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"
+    >
+      {action.icon ? (
+        <span className="text-muted-foreground/60 group-hover:text-muted-foreground">
+          {action.icon}
+        </span>
+      ) : null}
+      {action.label}
+    </button>
+  )
+}
+
+export function EmailSendBar({
+  primaryActions = [],
+  secondaryActions = [],
+  sendLabel = "Send",
+  sendIcon,
+  sendDisabled = false,
+  onSend,
+  sendHint,
+  className,
+}: EmailSendBarProps) {
+  const hasPrimary = primaryActions.length > 0
+  const hasSecondary = secondaryActions.length > 0
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-1.5 px-3.5 py-2.5 border-t bg-muted/20",
+        className,
+      )}
+    >
+      {primaryActions.map((action) => (
+        <GhostAction key={action.key} action={action} />
+      ))}
+
+      {hasPrimary && hasSecondary ? (
+        <div className="w-px h-[18px] bg-border mx-1" />
+      ) : null}
+
+      {secondaryActions.map((action) => (
+        <GhostAction key={action.key} action={action} />
+      ))}
+
+      <div className="flex-1" />
+
+      {sendHint ? (
+        <span className="text-[11px] text-muted-foreground mr-1">
+          {sendHint}
+        </span>
+      ) : null}
+
+      <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"
+      >
+        {sendIcon}
+        {sendLabel}
+      </button>
+    </div>
+  )
+}