@handled-ai/design-system 0.9.28 → 0.11.0

package/src/components/__tests__/sticky-action-bar.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { StickyActionBar } from "../sticky-action-bar";
+
+describe("StickyActionBar", () => {
+  it("renders with data-slot='sticky-action-bar'", () => {
+    const { container } = render(<StickyActionBar />);
+    const el = container.querySelector('[data-slot="sticky-action-bar"]');
+    expect(el).not.toBeNull();
+  });
+
+  it("renders left slot content", () => {
+    render(<StickyActionBar left={<span>Left Content</span>} />);
+    expect(screen.getByText("Left Content")).toBeDefined();
+  });
+
+  it("renders right slot content", () => {
+    render(<StickyActionBar right={<span>Right Content</span>} />);
+    expect(screen.getByText("Right Content")).toBeDefined();
+  });
+
+  it("applies border-t class when bordered=true (default)", () => {
+    const { container } = render(<StickyActionBar />);
+    const el = container.querySelector('[data-slot="sticky-action-bar"]')!;
+    expect(el.classList.contains("border-t")).toBe(true);
+  });
+
+  it("does not apply border-t class when bordered=false", () => {
+    const { container } = render(<StickyActionBar bordered={false} />);
+    const el = container.querySelector('[data-slot="sticky-action-bar"]')!;
+    expect(el.classList.contains("border-t")).toBe(false);
+  });
+
+  it("does not render left wrapper when left not provided", () => {
+    const { container } = render(<StickyActionBar />);
+    const leftSlot = container.querySelector('[data-slot="sticky-action-bar-left"]');
+    expect(leftSlot).toBeNull();
+  });
+
+  it("does not render right wrapper when right not provided", () => {
+    const { container } = render(<StickyActionBar />);
+    const rightSlot = container.querySelector('[data-slot="sticky-action-bar-right"]');
+    expect(rightSlot).toBeNull();
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(<StickyActionBar className="my-custom" />);
+    const el = container.querySelector('[data-slot="sticky-action-bar"]')!;
+    expect(el.classList.contains("my-custom")).toBe(true);
+  });
+});

package/src/components/__tests__/switch.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { Switch } from "../switch";
+
+describe("Switch", () => {
+  it("renders with data-slot='switch'", () => {
+    const { container } = render(<Switch />);
+    const el = container.querySelector('[data-slot="switch"]');
+    expect(el).not.toBeNull();
+  });
+
+  it("renders thumb with data-slot='switch-thumb'", () => {
+    const { container } = render(<Switch />);
+    const thumb = container.querySelector('[data-slot="switch-thumb"]');
+    expect(thumb).not.toBeNull();
+  });
+
+  it("toggles checked state on click", () => {
+    const { container } = render(<Switch defaultChecked={false} />);
+    const switchEl = container.querySelector('[data-slot="switch"]')!;
+    expect(switchEl.getAttribute("data-state")).toBe("unchecked");
+
+    fireEvent.click(switchEl);
+    expect(switchEl.getAttribute("data-state")).toBe("checked");
+  });
+
+  it("respects disabled prop", () => {
+    const { container } = render(<Switch disabled />);
+    const switchEl = container.querySelector('[data-slot="switch"]')!;
+    expect(switchEl).toHaveProperty("disabled", true);
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(<Switch className="my-custom-class" />);
+    const switchEl = container.querySelector('[data-slot="switch"]')!;
+    expect(switchEl.classList.contains("my-custom-class")).toBe(true);
+  });
+});

package/src/components/__tests__/variable-autocomplete.test.tsx

@@ -0,0 +1,155 @@
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { VariableAutocomplete, type VariableGroup } from "../variable-autocomplete";
+
+const sampleGroups: VariableGroup[] = [
+  {
+    label: "Contact",
+    variables: [
+      { name: "first_name", description: "Contact first name", source: "crm" },
+      { name: "last_name", description: "Contact last name", source: "crm" },
+      { name: "email", description: "Contact email" },
+    ],
+  },
+  {
+    label: "Company",
+    variables: [
+      { name: "company_name", source: "enrichment" },
+      { name: "company_size" },
+    ],
+  },
+];
+
+const defaultProps = {
+  groups: sampleGroups,
+  onSelect: vi.fn(),
+  onClose: vi.fn(),
+};
+
+describe("VariableAutocomplete", () => {
+  it("renders with data-slot='variable-autocomplete'", () => {
+    const { container } = render(<VariableAutocomplete {...defaultProps} />);
+    const el = container.querySelector('[data-slot="variable-autocomplete"]');
+    expect(el).not.toBeNull();
+  });
+
+  it("renders header with 'Insert variable' text", () => {
+    render(<VariableAutocomplete {...defaultProps} />);
+    expect(screen.getByText("Insert variable")).toBeDefined();
+  });
+
+  it("renders variable items with monospace names wrapped in {{ }}", () => {
+    render(<VariableAutocomplete {...defaultProps} />);
+    expect(screen.getByText("{{first_name}}")).toBeDefined();
+    expect(screen.getByText("{{last_name}}")).toBeDefined();
+    expect(screen.getByText("{{email}}")).toBeDefined();
+  });
+
+  it("renders variable description when provided", () => {
+    render(<VariableAutocomplete {...defaultProps} />);
+    expect(screen.getByText("Contact first name")).toBeDefined();
+    expect(screen.getByText("Contact last name")).toBeDefined();
+  });
+
+  it("renders variable source badge when provided", () => {
+    render(<VariableAutocomplete {...defaultProps} />);
+    const crmBadges = screen.getAllByText("crm");
+    expect(crmBadges.length).toBe(2);
+    expect(screen.getByText("enrichment")).toBeDefined();
+  });
+
+  it("renders group labels", () => {
+    render(<VariableAutocomplete {...defaultProps} />);
+    expect(screen.getByText("Contact")).toBeDefined();
+    expect(screen.getByText("Company")).toBeDefined();
+  });
+
+  it("filters variables by name (case-insensitive startsWith)", () => {
+    const { container } = render(
+      <VariableAutocomplete {...defaultProps} filter="FIRST" />
+    );
+    const items = container.querySelectorAll('[data-slot="variable-autocomplete-item"]');
+    expect(items.length).toBe(1);
+    expect(screen.getByText("{{first_name}}")).toBeDefined();
+  });
+
+  it("returns null when no matches", () => {
+    const { container } = render(
+      <VariableAutocomplete {...defaultProps} filter="zzz_no_match" />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("fires onSelect on item click", () => {
+    const onSelect = vi.fn();
+    const { container } = render(
+      <VariableAutocomplete {...defaultProps} onSelect={onSelect} />
+    );
+    const item = container.querySelector('[data-slot="variable-autocomplete-item"]')!;
+    fireEvent.click(item);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith({
+      name: "first_name",
+      description: "Contact first name",
+      source: "crm",
+    });
+  });
+
+  it("items use preventDefault on mousedown", () => {
+    const { container } = render(<VariableAutocomplete {...defaultProps} />);
+    const item = container.querySelector('[data-slot="variable-autocomplete-item"]')!;
+    const event = new MouseEvent("mousedown", { bubbles: true, cancelable: true });
+    const preventDefaultSpy = vi.spyOn(event, "preventDefault");
+    item.dispatchEvent(event);
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  it("fires onClose on Escape key", () => {
+    const onClose = vi.fn();
+    render(<VariableAutocomplete {...defaultProps} onClose={onClose} />);
+    const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true });
+    document.dispatchEvent(event);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("fires onClose on outside mousedown", () => {
+    const onClose = vi.fn();
+    render(<VariableAutocomplete {...defaultProps} onClose={onClose} />);
+    const event = new MouseEvent("mousedown", { bubbles: true });
+    document.dispatchEvent(event);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("respects maxResults prop", () => {
+    const { container } = render(
+      <VariableAutocomplete {...defaultProps} maxResults={2} />
+    );
+    const items = container.querySelectorAll('[data-slot="variable-autocomplete-item"]');
+    expect(items.length).toBe(2);
+  });
+
+  it("has listbox role on the scrollable list", () => {
+    const { container } = render(<VariableAutocomplete {...defaultProps} />);
+    const listbox = container.querySelector('[role="listbox"]');
+    expect(listbox).not.toBeNull();
+    expect(listbox!.getAttribute("aria-label")).toBe("Variables");
+  });
+
+  it("items are buttons with role='option'", () => {
+    const { container } = render(<VariableAutocomplete {...defaultProps} />);
+    const items = container.querySelectorAll('[data-slot="variable-autocomplete-item"]');
+    items.forEach((item) => {
+      expect(item.tagName).toBe("BUTTON");
+      expect(item.getAttribute("role")).toBe("option");
+    });
+  });
+
+  it("renders group containers with role='group'", () => {
+    const { container } = render(<VariableAutocomplete {...defaultProps} />);
+    const groups = container.querySelectorAll('[role="group"]');
+    expect(groups.length).toBe(2);
+    expect(groups[0].getAttribute("aria-label")).toBe("Contact");
+    expect(groups[1].getAttribute("aria-label")).toBe("Company");
+  });
+});

package/src/components/account-contacts-popover.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from "react"
+import {
+  Clock,
+  ExternalLink,
+} from "lucide-react"
+import type { SuggestedContact, SuggestedActionsIconMap } from "./suggested-actions"
+
+// ---------------------------------------------------------------------------
+// BrandIcon
+// ---------------------------------------------------------------------------
+
+export function BrandIcon({ src, alt, className }: { src: string; alt: string; className?: string }) {
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={`${className ?? ""} object-contain`}
+      draggable={false}
+    />
+  )
+}
+
+// ---------------------------------------------------------------------------
+// AccountContactsPopover
+// ---------------------------------------------------------------------------
+
+export interface AccountContactsPopoverProps {
+  contacts: SuggestedContact[]
+  onSelect: (contact: SuggestedContact) => void
+  onSelectTo?: (contact: SuggestedContact) => void
+  onSelectCc?: (contact: SuggestedContact) => void
+  onSelectBcc?: (contact: SuggestedContact) => void
+  onViewAll?: () => void
+  onOpenRecentActivity?: () => void
+  trigger: React.ReactNode
+  iconMap?: SuggestedActionsIconMap
+}
+
+export function AccountContactsPopover({
+  contacts,
+  onSelect,
+  onSelectTo,
+  onSelectCc,
+  onSelectBcc,
+  onViewAll,
+  onOpenRecentActivity,
+  trigger,
+  iconMap,
+}: AccountContactsPopoverProps) {
+  const [open, setOpen] = React.useState(false)
+  const triggerRef = React.useRef<HTMLDivElement>(null)
+  const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({})
+
+  React.useEffect(() => {
+    if (open && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect()
+      const popoverWidth = Math.min(448, window.innerWidth - 32)
+      let left = rect.right - popoverWidth
+      if (left < 16) left = 16
+      if (left + popoverWidth > window.innerWidth - 16) left = window.innerWidth - 16 - popoverWidth
+      setPopoverStyle({ position: "fixed", top: rect.bottom + 4, left })
+    }
+  }, [open])
+
+  return (
+    <div>
+      <div ref={triggerRef} onClick={() => setOpen(!open)}>{trigger}</div>
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <div style={popoverStyle} className="fixed bg-background border border-border rounded-lg shadow-xl z-50 w-[28rem] max-w-[calc(100vw-2rem)] py-2 animate-in fade-in slide-in-from-top-1 duration-150">
+            <div className="px-3 py-1.5 text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wide">
+              Account Contacts
+            </div>
+            <div className="max-h-48 overflow-y-auto">
+              {contacts.map((c, i) => (
+                <div
+                  key={i}
+                  role="button"
+                  onClick={() => { (onSelectTo ?? onSelect)(c); setOpen(false) }}
+                  className="flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer"
+                >
+                  <div className="w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0">
+                    {c.name.split(" ").map((n) => n[0]).join("")}
+                  </div>
+                  <div className="flex-1 min-w-0 overflow-hidden">
+                    <div className="truncate text-sm font-medium text-foreground">{c.name}</div>
+                    <div className="truncate text-xs text-muted-foreground leading-tight">
+                      {c.role} · {c.email ?? c.emails?.[0] ?? c.phone ?? c.phones?.[0] ?? ""}
+                    </div>
+                    {c.lastActivity && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onOpenRecentActivity?.()
+                          setOpen(false)
+                        }}
+                        className="mt-1.5 flex max-w-full items-center gap-1.5 overflow-hidden rounded-md border border-border/70 bg-muted/30 px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+                      >
+                        <Clock className="w-3 h-3 shrink-0" />
+                        <span className="shrink-0 font-medium">Last activity</span>
+                        <span className="shrink-0 text-muted-foreground/60">·</span>
+                        <span className="shrink-0">{c.lastActivity.date}</span>
+                        <span className="shrink-0 text-muted-foreground/60">·</span>
+                        <span className="truncate capitalize">{c.lastActivity.type}</span>
+                      </button>
+                    )}
+                  </div>
+                  <div className="ml-2 flex items-center gap-1.5 shrink-0">
+                    {onSelectTo && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onSelectTo(c)
+                          setOpen(false)
+                        }}
+                        className="h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40"
+                      >
+                        To
+                      </button>
+                    )}
+                    {onSelectCc && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onSelectCc(c)
+                          setOpen(false)
+                        }}
+                        className="h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40"
+                      >
+                        Cc
+                      </button>
+                    )}
+                    {onSelectBcc && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onSelectBcc(c)
+                          setOpen(false)
+                        }}
+                        className="h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40"
+                      >
+                        Bcc
+                      </button>
+                    )}
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        if (c.salesforceUrl) {
+                          window.open(c.salesforceUrl, "_blank", "noopener,noreferrer")
+                        } else {
+                          onViewAll?.()
+                        }
+                      }}
+                      className="h-7 w-7 inline-flex items-center justify-center rounded-md border border-border bg-background hover:bg-muted/40 transition-colors shrink-0"
+                      aria-label={`Open ${c.name} in Salesforce`}
+                    >
+                      {iconMap?.salesforce ? (
+                        <BrandIcon src={iconMap.salesforce} alt="Salesforce" className="w-3.5 h-3.5" />
+                      ) : (
+                        <ExternalLink className="w-3.5 h-3.5 text-muted-foreground" />
+                      )}
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+            {onViewAll && (
+              <>
+                <div className="h-px bg-border mx-3 my-1" />
+                <button
+                  onClick={() => { onViewAll(); setOpen(false) }}
+                  className="flex items-center gap-2 w-full px-3 py-2 text-left text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+                >
+                  <ExternalLink className="w-3 h-3" />
+                  View all contacts
+                </button>
+              </>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/compliance-badge.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import { Check, Clock, AlertTriangle, Minus } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+type ComplianceStatus = "verified" | "pending" | "changed_since_verified" | "never_verified"
+
+interface ComplianceBadgeProps extends React.HTMLAttributes<HTMLElement> {
+  status: ComplianceStatus
+  variant?: "line" | "pill"
+}
+
+const statusConfig = {
+  verified: {
+    line: { icon: Check, label: "Compliance verified", classes: "text-status-active-fg" },
+    pill: { icon: Check, label: "Verified", classes: "bg-status-active-bg text-status-active-fg" },
+  },
+  pending: {
+    line: { icon: Clock, label: "Pending compliance review", classes: "text-status-pending-fg" },
+    pill: { icon: AlertTriangle, label: "Pending review", classes: "bg-status-pending-bg text-status-pending-fg" },
+  },
+  changed_since_verified: {
+    line: { icon: AlertTriangle, label: "Changed since last verification", classes: "text-status-warning-fg" },
+    pill: { icon: AlertTriangle, label: "Changed", classes: "bg-status-warning-bg text-status-warning-fg" },
+  },
+  never_verified: {
+    line: { icon: Minus, label: "Never verified", classes: "text-muted-foreground" },
+    pill: { icon: Minus, label: "Never verified", classes: "bg-muted text-muted-foreground" },
+  },
+}
+
+function ComplianceBadge({ status, variant = "line", className, ...rest }: ComplianceBadgeProps) {
+  const config = statusConfig[status][variant]
+  const Icon = config.icon
+  const iconSize = variant === "line" ? 12 : 10
+
+  if (variant === "pill") {
+    return (
+      <span
+        data-slot="compliance-badge"
+        data-status={status}
+        data-variant="pill"
+        className={cn("text-[10px] px-2 py-0.5 rounded-full inline-flex w-fit items-center gap-1", config.classes, className)}
+        {...rest}
+      >
+        <Icon size={iconSize} />
+        <span>{config.label}</span>
+      </span>
+    )
+  }
+
+  return (
+    <div
+      data-slot="compliance-badge"
+      data-status={status}
+      data-variant="line"
+      className={cn("text-xs inline-flex w-fit items-center gap-1.5", config.classes, className)}
+      {...rest}
+    >
+      <Icon size={iconSize} />
+      <span>{config.label}</span>
+    </div>
+  )
+}
+
+export { ComplianceBadge, type ComplianceBadgeProps, type ComplianceStatus }

package/src/components/contact-chip.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import { X } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+interface ContactChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+  name: string
+  email?: string
+  verified?: boolean
+  onConfirm?: () => void
+  onRemove?: () => void
+}
+
+function ContactChip({
+  name,
+  email,
+  verified = true,
+  onConfirm,
+  onRemove,
+  className,
+  ...rest
+}: ContactChipProps) {
+  const isVerified = verified !== false
+
+  return (
+    <span
+      data-slot="contact-chip"
+      data-verified={isVerified ? "true" : "false"}
+      className={cn(
+        "inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs",
+        isVerified
+          ? "border border-border bg-background"
+          : "border border-status-warning-border bg-status-warning-bg",
+        className
+      )}
+      {...rest}
+    >
+      <span className="font-medium">{name}</span>
+      {email && <span className="text-muted-foreground">{email}</span>}
+      {!isVerified && onConfirm && (
+        <button
+          type="button"
+          data-slot="contact-chip-confirm"
+          onClick={onConfirm}
+          aria-label={`Confirm ${name}`}
+          className="text-[10px] px-1.5 py-0 rounded bg-status-warning-border/50 text-status-warning-fg hover:bg-status-warning-border cursor-pointer font-medium ml-1"
+        >
+          Confirm
+        </button>
+      )}
+      {onRemove && (
+        <button
+          type="button"
+          data-slot="contact-chip-remove"
+          onClick={onRemove}
+          aria-label={`Remove ${name}`}
+          className="inline-flex size-4 items-center justify-center rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+        >
+          <X size={12} />
+        </button>
+      )}
+    </span>
+  )
+}
+
+export { ContactChip, type ContactChipProps }