@handled-ai/design-system 0.9.27 → 0.10.0

package/src/components/__tests__/filter-chip.test.tsx

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { FilterChip } from "../filter-chip";
+
+describe("FilterChip", () => {
+  it("renders with data-slot='filter-chip'", () => {
+    const { container } = render(<FilterChip>Status</FilterChip>);
+    const el = container.querySelector('[data-slot="filter-chip"]');
+    expect(el).not.toBeNull();
+  });
+
+  it("renders children as label text", () => {
+    render(<FilterChip>Status</FilterChip>);
+    expect(screen.getByText("Status")).toBeDefined();
+  });
+
+  it("renders default Filter icon (svg present)", () => {
+    const { container } = render(<FilterChip>Status</FilterChip>);
+    const svgs = container.querySelectorAll("svg");
+    expect(svgs.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("renders ChevronDown icon", () => {
+    const { container } = render(<FilterChip>Status</FilterChip>);
+    // Filter + ChevronDown = at least 2 svgs
+    const svgs = container.querySelectorAll("svg");
+    expect(svgs.length).toBe(2);
+  });
+
+  it("fires onClick when clicked", () => {
+    const handler = vi.fn();
+    render(<FilterChip onClick={handler}>Status</FilterChip>);
+    fireEvent.click(screen.getByText("Status"));
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("has type='button'", () => {
+    const { container } = render(<FilterChip>Status</FilterChip>);
+    const btn = container.querySelector('[data-slot="filter-chip"]') as HTMLButtonElement;
+    expect(btn.type).toBe("button");
+  });
+
+  it("applies data-active attribute when active=true", () => {
+    const { container } = render(<FilterChip active>Status</FilterChip>);
+    const el = container.querySelector('[data-slot="filter-chip"]')!;
+    expect(el.getAttribute("data-active")).toBe("");
+  });
+
+  it("does not have data-active when active is false/undefined", () => {
+    const { container } = render(<FilterChip>Status</FilterChip>);
+    const el = container.querySelector('[data-slot="filter-chip"]')!;
+    expect(el.hasAttribute("data-active")).toBe(false);
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(<FilterChip className="my-custom">Status</FilterChip>);
+    const el = container.querySelector('[data-slot="filter-chip"]')!;
+    expect(el.classList.contains("my-custom")).toBe(true);
+  });
+
+  it("sets aria-pressed when active", () => {
+    const { container } = render(<FilterChip active>Status</FilterChip>);
+    const el = container.querySelector('[data-slot="filter-chip"]')!;
+    expect(el.getAttribute("aria-pressed")).toBe("true");
+  });
+
+  it("sets aria-pressed=false when not active", () => {
+    const { container } = render(<FilterChip active={false}>Status</FilterChip>);
+    const el = container.querySelector('[data-slot="filter-chip"]')!;
+    expect(el.getAttribute("aria-pressed")).toBe("false");
+  });
+});

package/src/components/__tests__/inline-banner.test.tsx

@@ -0,0 +1,110 @@
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { InlineBanner } from "../inline-banner";
+
+describe("InlineBanner", () => {
+  it("renders with data-slot='inline-banner'", () => {
+    const { container } = render(<InlineBanner>Test</InlineBanner>);
+    const el = container.querySelector('[data-slot="inline-banner"]');
+    expect(el).not.toBeNull();
+  });
+
+  it("defaults to variant='warning'", () => {
+    const { container } = render(<InlineBanner>Test</InlineBanner>);
+    const el = container.querySelector('[data-slot="inline-banner"]')!;
+    expect(el.getAttribute("data-variant")).toBe("warning");
+  });
+
+  it("renders children content", () => {
+    render(<InlineBanner>Important message</InlineBanner>);
+    expect(screen.getByText("Important message")).not.toBeNull();
+  });
+
+  it("shows dismiss button when onDismiss provided", () => {
+    const { container } = render(
+      <InlineBanner onDismiss={() => {}}>Test</InlineBanner>
+    );
+    const dismissBtn = container.querySelector('[data-slot="inline-banner-dismiss"]');
+    expect(dismissBtn).not.toBeNull();
+  });
+
+  it("dismiss button fires onDismiss on click", () => {
+    const onDismiss = vi.fn();
+    const { container } = render(
+      <InlineBanner onDismiss={onDismiss}>Test</InlineBanner>
+    );
+    const dismissBtn = container.querySelector('[data-slot="inline-banner-dismiss"]')!;
+    fireEvent.click(dismissBtn);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("dismiss button has aria-label='Dismiss'", () => {
+    const { container } = render(
+      <InlineBanner onDismiss={() => {}}>Test</InlineBanner>
+    );
+    const dismissBtn = container.querySelector('[data-slot="inline-banner-dismiss"]')!;
+    expect(dismissBtn.getAttribute("aria-label")).toBe("Dismiss");
+  });
+
+  it("dismiss button has type='button'", () => {
+    const { container } = render(
+      <InlineBanner onDismiss={() => {}}>Test</InlineBanner>
+    );
+    const dismissBtn = container.querySelector('[data-slot="inline-banner-dismiss"]')!;
+    expect(dismissBtn.getAttribute("type")).toBe("button");
+  });
+
+  it("hides dismiss button when onDismiss not provided", () => {
+    const { container } = render(<InlineBanner>Test</InlineBanner>);
+    const dismissBtn = container.querySelector('[data-slot="inline-banner-dismiss"]');
+    expect(dismissBtn).toBeNull();
+  });
+
+  it("sets data-variant attribute correctly", () => {
+    const variants = ["info", "warning", "destructive"] as const;
+    for (const variant of variants) {
+      const { container, unmount } = render(
+        <InlineBanner variant={variant}>Test</InlineBanner>
+      );
+      const el = container.querySelector('[data-slot="inline-banner"]')!;
+      expect(el.getAttribute("data-variant")).toBe(variant);
+      unmount();
+    }
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <InlineBanner className="my-custom-class">Test</InlineBanner>
+    );
+    const el = container.querySelector('[data-slot="inline-banner"]')!;
+    expect(el.classList.contains("my-custom-class")).toBe(true);
+  });
+
+  it("has role='alert' for warning variant", () => {
+    const { container } = render(<InlineBanner variant="warning">Test</InlineBanner>);
+    const el = container.querySelector('[data-slot="inline-banner"]')!;
+    expect(el.getAttribute("role")).toBe("alert");
+  });
+
+  it("has role='alert' for destructive variant", () => {
+    const { container } = render(<InlineBanner variant="destructive">Test</InlineBanner>);
+    const el = container.querySelector('[data-slot="inline-banner"]')!;
+    expect(el.getAttribute("role")).toBe("alert");
+  });
+
+  it("has role='status' for info variant", () => {
+    const { container } = render(<InlineBanner variant="info">Test</InlineBanner>);
+    const el = container.querySelector('[data-slot="inline-banner"]')!;
+    expect(el.getAttribute("role")).toBe("status");
+  });
+
+  it("renders custom icon when provided", () => {
+    const { container } = render(
+      <InlineBanner icon={<span data-testid="custom-icon">!</span>}>Test</InlineBanner>
+    );
+    expect(screen.getByTestId("custom-icon")).not.toBeNull();
+    const iconSlot = container.querySelector('[data-slot="inline-banner-icon"]');
+    expect(iconSlot).not.toBeNull();
+  });
+});

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);
+  });
+});