@handled-ai/design-system 0.9.28 → 0.10.0

package/src/components/__tests__/kbd-hint.test.tsx

@@ -0,0 +1,29 @@
+import { describe, it, expect } from "vitest";
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { KbdHint } from "../kbd-hint";
+
+describe("KbdHint", () => {
+  it("renders with data-slot='kbd-hint'", () => {
+    const { container } = render(<KbdHint>⌘K</KbdHint>);
+    const el = container.querySelector('[data-slot="kbd-hint"]');
+    expect(el).not.toBeNull();
+  });
+
+  it("renders children text", () => {
+    render(<KbdHint>⌘K</KbdHint>);
+    expect(screen.getByText("⌘K")).toBeDefined();
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(<KbdHint className="my-custom-class">⌘K</KbdHint>);
+    const el = container.querySelector('[data-slot="kbd-hint"]')!;
+    expect(el.classList.contains("my-custom-class")).toBe(true);
+  });
+
+  it("renders as <kbd> element", () => {
+    const { container } = render(<KbdHint>⌘K</KbdHint>);
+    const el = container.querySelector('[data-slot="kbd-hint"]')!;
+    expect(el.tagName).toBe("KBD");
+  });
+});

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

@@ -0,0 +1,92 @@
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { RichTextToolbar } from "../rich-text-toolbar";
+
+describe("RichTextToolbar", () => {
+  it("renders with data-slot='rich-text-toolbar'", () => {
+    const { container } = render(<RichTextToolbar />);
+    const el = container.querySelector('[data-slot="rich-text-toolbar"]');
+    expect(el).not.toBeNull();
+  });
+
+  it("has role='toolbar' and aria-label", () => {
+    const { container } = render(<RichTextToolbar />);
+    const el = container.querySelector('[data-slot="rich-text-toolbar"]')!;
+    expect(el.getAttribute("role")).toBe("toolbar");
+    expect(el.getAttribute("aria-label")).toBe("Rich text formatting");
+  });
+
+  it("font button has aria-haspopup", () => {
+    render(<RichTextToolbar />);
+    const fontBtn = screen.getByLabelText("Font family");
+    expect(fontBtn.getAttribute("aria-haspopup")).toBe("true");
+  });
+
+  it("renders all toolbar buttons with data-slot='rich-text-toolbar-button'", () => {
+    const { container } = render(<RichTextToolbar />);
+    const buttons = container.querySelectorAll('[data-slot="rich-text-toolbar-button"]');
+    // undo, redo, font, bold, italic, underline, align, list, delete = 9
+    expect(buttons.length).toBe(9);
+  });
+
+  it("fires onAction with 'bold' when Bold button clicked", () => {
+    const handler = vi.fn();
+    render(<RichTextToolbar onAction={handler} />);
+    fireEvent.click(screen.getByLabelText("Bold"));
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler).toHaveBeenCalledWith("bold");
+  });
+
+  it("fires onAction with 'undo' when Undo button clicked", () => {
+    const handler = vi.fn();
+    render(<RichTextToolbar onAction={handler} />);
+    fireEvent.click(screen.getByLabelText("Undo"));
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler).toHaveBeenCalledWith("undo");
+  });
+
+  it("fires onAction with 'font' when font button clicked", () => {
+    const handler = vi.fn();
+    render(<RichTextToolbar onAction={handler} />);
+    fireEvent.click(screen.getByLabelText("Font family"));
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler).toHaveBeenCalledWith("font");
+  });
+
+  it("fires onAction with 'delete' when Delete button clicked", () => {
+    const handler = vi.fn();
+    render(<RichTextToolbar onAction={handler} />);
+    fireEvent.click(screen.getByLabelText("Delete"));
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler).toHaveBeenCalledWith("delete");
+  });
+
+  it("all buttons have type='button'", () => {
+    const { container } = render(<RichTextToolbar />);
+    const buttons = container.querySelectorAll('[data-slot="rich-text-toolbar-button"]');
+    buttons.forEach((btn) => {
+      expect((btn as HTMLButtonElement).type).toBe("button");
+    });
+  });
+
+  it("all buttons have aria-label", () => {
+    const { container } = render(<RichTextToolbar />);
+    const buttons = container.querySelectorAll('[data-slot="rich-text-toolbar-button"]');
+    buttons.forEach((btn) => {
+      expect(btn.getAttribute("aria-label")).not.toBeNull();
+      expect(btn.getAttribute("aria-label")).not.toBe("");
+    });
+  });
+
+  it("renders 'Sans Serif' font picker text", () => {
+    render(<RichTextToolbar />);
+    expect(screen.getByText("Sans Serif")).toBeDefined();
+  });
+
+  it("delete button has hover:text-destructive class", () => {
+    render(<RichTextToolbar />);
+    const deleteBtn = screen.getByLabelText("Delete");
+    expect(deleteBtn.className).toContain("hover:text-destructive");
+  });
+});

package/src/components/__tests__/step-timeline.test.tsx

@@ -0,0 +1,174 @@
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { StepTimeline, type TimelineStep } from "../step-timeline";
+
+const sampleSteps: TimelineStep[] = [
+  { id: "1", type: "email", label: "Send intro email" },
+  { id: "2", type: "call", label: "Follow-up call" },
+  { id: "3", type: "task", label: "Update CRM" },
+];
+
+describe("StepTimeline", () => {
+  it("renders with data-slot='step-timeline'", () => {
+    const { container } = render(<StepTimeline steps={sampleSteps} />);
+    const el = container.querySelector('[data-slot="step-timeline"]');
+    expect(el).not.toBeNull();
+  });
+
+  it("renders step cards with data-slot='step-timeline-step'", () => {
+    const { container } = render(<StepTimeline steps={sampleSteps} />);
+    const steps = container.querySelectorAll('[data-slot="step-timeline-step"]');
+    expect(steps.length).toBe(3);
+  });
+
+  it("renders step type label (uppercase type text)", () => {
+    render(<StepTimeline steps={sampleSteps} />);
+    expect(screen.getByText("email")).toBeDefined();
+    expect(screen.getByText("call")).toBeDefined();
+    expect(screen.getByText("task")).toBeDefined();
+  });
+
+  it("renders step label text", () => {
+    render(<StepTimeline steps={sampleSteps} />);
+    expect(screen.getByText("Send intro email")).toBeDefined();
+    expect(screen.getByText("Follow-up call")).toBeDefined();
+    expect(screen.getByText("Update CRM")).toBeDefined();
+  });
+
+  it("renders interactive header as button when onStepClick provided", () => {
+    const { container } = render(
+      <StepTimeline steps={[sampleSteps[0]]} onStepClick={() => {}} />
+    );
+    const card = container.querySelector('[data-slot="step-timeline-card"]');
+    const button = card!.querySelector("button");
+    expect(button).not.toBeNull();
+    expect(button!.type).toBe("button");
+  });
+
+  it("renders non-interactive header as div when no onStepClick or renderStepBody", () => {
+    const { container } = render(<StepTimeline steps={[sampleSteps[0]]} />);
+    const card = container.querySelector('[data-slot="step-timeline-card"]');
+    const button = card!.querySelector("button");
+    expect(button).toBeNull();
+  });
+
+  it("fires onStepClick with step id when header clicked", () => {
+    const handler = vi.fn();
+    render(<StepTimeline steps={sampleSteps} onStepClick={handler} />);
+    fireEvent.click(screen.getByText("Send intro email"));
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler).toHaveBeenCalledWith("1");
+  });
+
+  it("renders expanded body via renderStepBody when expandedStepId matches", () => {
+    render(
+      <StepTimeline
+        steps={sampleSteps}
+        expandedStepId="1"
+        renderStepBody={(step) => <div>Body for {step.label}</div>}
+      />
+    );
+    expect(screen.getByText("Body for Send intro email")).toBeDefined();
+  });
+
+  it("does not render body when step is not expanded", () => {
+    const { container } = render(
+      <StepTimeline
+        steps={sampleSteps}
+        expandedStepId="1"
+        renderStepBody={(step) => <div data-testid={`body-${step.id}`}>Body for {step.label}</div>}
+      />
+    );
+    // Step 1 body should exist
+    const body1 = container.querySelector('[data-testid="body-1"]');
+    expect(body1).not.toBeNull();
+    // Step 2 body should NOT exist
+    const body2 = container.querySelector('[data-testid="body-2"]');
+    expect(body2).toBeNull();
+  });
+
+  it("renders accessory via renderStepAccessory", () => {
+    render(
+      <StepTimeline
+        steps={[sampleSteps[0]]}
+        onStepClick={() => {}}
+        renderStepAccessory={(step) => <span>Accessory-{step.id}</span>}
+      />
+    );
+    expect(screen.getByText("Accessory-1")).toBeDefined();
+  });
+
+  it("shows 'Add Step' insert buttons when onInsert provided", () => {
+    render(<StepTimeline steps={sampleSteps} onInsert={() => {}} />);
+    const insertButtons = screen.getAllByText("+ Add Step");
+    // Between steps: (3-1)=2 inter-step buttons + 1 trailing = 3 total
+    expect(insertButtons.length).toBe(3);
+  });
+
+  it("hides insert buttons when onInsert not provided", () => {
+    const { container } = render(<StepTimeline steps={sampleSteps} />);
+    const insertButtons = container.querySelectorAll('[data-slot="step-timeline-insert"]');
+    expect(insertButtons.length).toBe(0);
+  });
+
+  it("fires onInsert with correct index when insert button clicked", () => {
+    const handler = vi.fn();
+    render(<StepTimeline steps={sampleSteps} onInsert={handler} />);
+    const insertButtons = screen.getAllByText("+ Add Step");
+    // First insert button is between step 0 and step 1, index=1
+    fireEvent.click(insertButtons[0]);
+    expect(handler).toHaveBeenCalledWith(1);
+    // Second insert button is between step 1 and step 2, index=2
+    fireEvent.click(insertButtons[1]);
+    expect(handler).toHaveBeenCalledWith(2);
+  });
+
+  it("shows trailing insert button (after last step) when onInsert provided", () => {
+    const handler = vi.fn();
+    render(<StepTimeline steps={sampleSteps} onInsert={handler} />);
+    const insertButtons = screen.getAllByText("+ Add Step");
+    // Last insert button should fire with steps.length (3)
+    fireEvent.click(insertButtons[insertButtons.length - 1]);
+    expect(handler).toHaveBeenCalledWith(3);
+  });
+
+  it("sets aria-expanded on the trigger button", () => {
+    const { container } = render(
+      <StepTimeline
+        steps={sampleSteps}
+        expandedStepId="1"
+        onStepClick={() => {}}
+        renderStepBody={(step) => <div>Body for {step.label}</div>}
+      />
+    );
+    const cards = container.querySelectorAll('[data-slot="step-timeline-card"]');
+    // First step is expanded
+    const expandedBtn = cards[0].querySelector("button[aria-expanded]");
+    expect(expandedBtn).not.toBeNull();
+    expect(expandedBtn!.getAttribute("aria-expanded")).toBe("true");
+    // Second step is not expanded
+    const collapsedBtn = cards[1].querySelector("button[aria-expanded]");
+    expect(collapsedBtn).not.toBeNull();
+    expect(collapsedBtn!.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("sets aria-controls linking trigger to body", () => {
+    const { container } = render(
+      <StepTimeline
+        steps={sampleSteps}
+        expandedStepId="1"
+        onStepClick={() => {}}
+        renderStepBody={(step) => <div>Body for {step.label}</div>}
+      />
+    );
+    const card = container.querySelectorAll('[data-slot="step-timeline-card"]')[0];
+    const btn = card.querySelector("button[aria-controls]");
+    expect(btn).not.toBeNull();
+    expect(btn!.getAttribute("aria-controls")).toBe("step-timeline-body-1");
+    // Body element should have matching id
+    const body = card.querySelector('[data-slot="step-timeline-body"]');
+    expect(body).not.toBeNull();
+    expect(body!.getAttribute("id")).toBe("step-timeline-body-1");
+  });
+});

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