@handled-ai/design-system 0.9.27 → 0.10.0

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/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 }

package/src/components/empty-state.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode
+  title?: string
+  description: string
+  action?: React.ReactNode
+}
+
+function EmptyState({ icon, title, description, action, className, ...rest }: EmptyStateProps) {
+  return (
+    <div data-slot="empty-state" className={cn("flex flex-col items-center justify-center py-24 gap-3", className)} {...rest}>
+      {icon && (
+        <div data-slot="empty-state-icon" className="text-muted-foreground/30 [&>svg]:w-12 [&>svg]:h-12">
+          {icon}
+        </div>
+      )}
+      {title && (
+        <p data-slot="empty-state-title" className="text-sm font-medium text-muted-foreground">
+          {title}
+        </p>
+      )}
+      <p data-slot="empty-state-description" className="text-xs text-muted-foreground">
+        {description}
+      </p>
+      {action && (
+        <div data-slot="empty-state-action" className="mt-3">
+          {action}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { EmptyState, type EmptyStateProps }

package/src/components/filter-chip.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+import { Filter, ChevronDown } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+interface FilterChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode
+  active?: boolean
+}
+
+function FilterChip({ icon, children, onClick, active, className, ...rest }: FilterChipProps) {
+  return (
+    <button
+      type="button"
+      data-slot="filter-chip"
+      data-active={active ? "" : undefined}
+      aria-pressed={active}
+      onClick={onClick}
+      className={cn(
+        "text-[11px] px-2.5 py-1 rounded-md border border-border",
+        "text-muted-foreground hover:bg-muted/30 cursor-pointer",
+        "inline-flex items-center gap-1.5 transition-colors",
+        "data-[active]:border-foreground/20 data-[active]:text-foreground",
+        className
+      )}
+      {...rest}
+    >
+      {icon ?? <Filter size={10} />}
+      {children}
+      <ChevronDown size={10} />
+    </button>
+  )
+}
+
+export { FilterChip, type FilterChipProps }

package/src/components/inline-banner.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from "react"
+import { Info, AlertTriangle, ShieldAlert, X } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+interface InlineBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "info" | "warning" | "destructive"
+  icon?: React.ReactNode
+  onDismiss?: () => void
+}
+
+const variantConfig = {
+  info: {
+    icon: Info,
+    classes: "bg-status-info-bg border-status-info-border text-status-info-fg",
+  },
+  warning: {
+    icon: AlertTriangle,
+    classes: "bg-status-warning-bg border-status-warning-border text-status-warning-fg",
+  },
+  destructive: {
+    icon: ShieldAlert,
+    classes: "bg-status-destructive-bg border-status-destructive-border text-status-destructive-fg",
+  },
+}
+
+function InlineBanner({
+  variant = "warning",
+  icon,
+  children,
+  onDismiss,
+  className,
+  ...rest
+}: InlineBannerProps) {
+  const config = variantConfig[variant]
+  const DefaultIcon = config.icon
+
+  return (
+    <div
+      data-slot="inline-banner"
+      data-variant={variant}
+      role={variant === "destructive" || variant === "warning" ? "alert" : "status"}
+      className={cn("rounded-lg border px-3 py-2 flex items-center gap-2", config.classes, className)}
+      {...rest}
+    >
+      <span data-slot="inline-banner-icon" className="shrink-0">
+        {icon ?? <DefaultIcon size={14} />}
+      </span>
+      <div data-slot="inline-banner-content" className="flex-1 min-w-0">
+        {children}
+      </div>
+      {onDismiss && (
+        <button
+          type="button"
+          aria-label="Dismiss"
+          data-slot="inline-banner-dismiss"
+          onClick={onDismiss}
+          className="shrink-0 p-0.5 rounded hover:bg-black/5 transition-colors"
+        >
+          <X size={14} className="opacity-60" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export { InlineBanner, type InlineBannerProps }

package/src/components/kbd-hint.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function KbdHint({
+  className,
+  ...props
+}: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd-hint"
+      className={cn(
+        "inline-block text-[10px] leading-none text-muted-foreground/40 font-sans",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { KbdHint }

package/src/components/rich-text-toolbar.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import type { LucideIcon } from "lucide-react"
+import { Undo2, Redo2, Bold, Italic, Underline, AlignLeft, List, Trash2, ChevronDown } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+type RichTextAction =
+  | "undo" | "redo"
+  | "font"
+  | "bold" | "italic" | "underline"
+  | "align" | "list"
+  | "delete"
+
+interface RichTextToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  onAction?: (action: RichTextAction) => void
+}
+
+function ToolbarButton({
+  action,
+  icon: Icon,
+  label,
+  extraClassName,
+  onAction,
+}: {
+  action: RichTextAction
+  icon: LucideIcon
+  label: string
+  extraClassName?: string
+  onAction?: (action: RichTextAction) => void
+}) {
+  return (
+    <button
+      type="button"
+      data-slot="rich-text-toolbar-button"
+      onClick={() => onAction?.(action)}
+      aria-label={label}
+      className={cn("p-1.5 rounded hover:bg-muted/50 cursor-pointer text-muted-foreground", extraClassName)}
+    >
+      <Icon size={14} />
+    </button>
+  )
+}
+
+function RichTextToolbar({ onAction, className, ...rest }: RichTextToolbarProps) {
+  return (
+    <div
+      data-slot="rich-text-toolbar"
+      role="toolbar"
+      aria-label="Rich text formatting"
+      className={cn("px-3 py-1.5 flex items-center justify-between", className)}
+      {...rest}
+    >
+      <div className="flex items-center gap-0.5">
+        <ToolbarButton action="undo" icon={Undo2} label="Undo" onAction={onAction} />
+        <ToolbarButton action="redo" icon={Redo2} label="Redo" onAction={onAction} />
+
+        <div className="w-px h-4 bg-border mx-1" aria-hidden="true" />
+
+        <button
+          type="button"
+          data-slot="rich-text-toolbar-button"
+          onClick={() => onAction?.("font")}
+          aria-label="Font family"
+          aria-haspopup="true"
+          className="text-[11px] text-muted-foreground px-1.5 py-0.5 rounded hover:bg-muted/50 cursor-pointer flex items-center gap-1"
+        >
+          Sans Serif
+          <ChevronDown size={10} />
+        </button>
+
+        <div className="w-px h-4 bg-border mx-1" aria-hidden="true" />
+
+        <ToolbarButton action="bold" icon={Bold} label="Bold" onAction={onAction} />
+        <ToolbarButton action="italic" icon={Italic} label="Italic" onAction={onAction} />
+        <ToolbarButton action="underline" icon={Underline} label="Underline" onAction={onAction} />
+
+        <div className="w-px h-4 bg-border mx-1" aria-hidden="true" />
+
+        <ToolbarButton action="align" icon={AlignLeft} label="Align left" onAction={onAction} />
+        <ToolbarButton action="list" icon={List} label="List" onAction={onAction} />
+      </div>
+
+      <ToolbarButton action="delete" icon={Trash2} label="Delete" extraClassName="hover:text-destructive" onAction={onAction} />
+    </div>
+  )
+}
+
+export { RichTextToolbar, type RichTextToolbarProps, type RichTextAction }

package/src/components/signal-feedback-inline.tsx

@@ -71,7 +71,7 @@ const approveReasons = [
   "Actionable",
 ]
 
-type ApprovalState = "pending" | "confirming" | "approving-feedback" | "dismissing" | "approved" | "dismissed" | "auto-approved"
+type ApprovalState = "pending" | "confirming" | "creating" | "approving-feedback" | "dismissing" | "approved" | "dismissed" | "auto-approved"
 
 interface SignalApprovalLabels {
   approveButton?: string
@@ -82,6 +82,8 @@ interface SignalApprovalLabels {
   confirmPrompt?: string
   dismissPrompt?: string
   feedbackPrompt?: string
+  /** Label shown while the approve action is in progress (e.g. "Creating Opportunity..."). */
+  creatingStatus?: string
 }
 
 const DEFAULT_LABELS: Required<SignalApprovalLabels> = {
@@ -93,6 +95,7 @@ const DEFAULT_LABELS: Required<SignalApprovalLabels> = {
   confirmPrompt: "This will approve this action for",
   dismissPrompt: "What\u2019s the issue with this action?",
   feedbackPrompt: "Quick feedback \u2014 what made this action useful?",
+  creatingStatus: "Creating\u2026",
 }
 
 interface SignalApprovalContextValue {
@@ -128,7 +131,16 @@ interface RootProps {
   labels?: SignalApprovalLabels
   /** When true, the approve/create-opportunity button is hidden but the dismiss button remains. */
   hideApproveButton?: boolean
-  onApprove?: () => void
+  /**
+   * Called when the user confirms the approval action.
+   *
+   * - If the callback returns `void` (or `undefined`), the component transitions
+   *   directly to the feedback step (backward-compatible behavior).
+   * - If the callback returns a `Promise<boolean>`, the component shows a
+   *   "creating" loading state while the promise is pending. On `true` it
+   *   transitions to the feedback step; on `false` it reverts to "pending".
+   */
+  onApprove?: () => void | Promise<boolean>
   onApproveFeedback?: (reasons: string[], detail: string) => void
   onDismiss?: (reasons: string[], detail: string, subReason?: string) => void
 }
@@ -137,6 +149,13 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
   const labels = React.useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides])
   const [approvalState, setApprovalState] = React.useState<ApprovalState>(initialApprovalState ?? "pending")
 
+  // Guard against state updates after unmount (e.g. user navigates away while
+  // an async onApprove promise is still in flight).
+  const mountedRef = React.useRef(true)
+  React.useEffect(() => {
+    return () => { mountedRef.current = false }
+  }, [])
+
   const requestApproval = React.useCallback(() => {
     setApprovalState("confirming")
   }, [])
@@ -150,8 +169,23 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
   }, [])
 
   const approve = React.useCallback(() => {
-    setApprovalState("approving-feedback")
-    onApprove?.()
+    const result = onApprove?.()
+    // If the callback returns a Promise, show a loading state and wait for it.
+    if (result && typeof (result as Promise<boolean>).then === "function") {
+      setApprovalState("creating")
+      ;(result as Promise<boolean>).then((success) => {
+        if (mountedRef.current) {
+          setApprovalState(success ? "approving-feedback" : "pending")
+        }
+      }).catch(() => {
+        if (mountedRef.current) {
+          setApprovalState("pending")
+        }
+      })
+    } else {
+      // Synchronous / void — transition immediately (backward-compatible).
+      setApprovalState("approving-feedback")
+    }
   }, [onApprove])
 
   const submitApproveFeedback = React.useCallback(
@@ -439,6 +473,18 @@ function Actions() {
     setDetailText("")
   }
 
+  if (approvalState === "creating") {
+    return (
+      <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
+        <svg className="h-3.5 w-3.5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+        </svg>
+        <span>{labels.creatingStatus}</span>
+      </div>
+    )
+  }
+
   if (approvalState === "approved") {
     if (isEditing) {
       return (
@@ -728,7 +774,7 @@ function Gate({ children }: { children: React.ReactNode }) {
   const { approvalState, hideApproveButton } = useSignalApproval()
   // When the approve button is hidden, don't lock content behind approval
   const isLocked = !hideApproveButton &&
-    (approvalState === "pending" || approvalState === "confirming" || approvalState === "dismissing")
+    (approvalState === "pending" || approvalState === "confirming" || approvalState === "creating" || approvalState === "dismissing")
 
   return (
     <div className="relative">