@ugurdemirel/landcraft 0.1.4 → 0.1.5

package/src/components/LanguageSwitcher/LanguageSwitcher.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { LanguageSwitcher } from "./LanguageSwitcher";
+
+const languages = [
+  { code: "tr", label: "Türkçe" },
+  { code: "en", label: "English" },
+];
+
+function trigger(container: HTMLElement): HTMLButtonElement {
+  // The dropdown trigger is the only button with aria-haspopup="listbox".
+  return container.querySelector('button[aria-haspopup="listbox"]')!;
+}
+
+describe("LanguageSwitcher", () => {
+  it("renders a trigger showing the current language (dropdown by default)", () => {
+    const { container } = render(
+      <LanguageSwitcher languages={languages} defaultValue="tr" />,
+    );
+    expect(trigger(container)).toBeInTheDocument();
+    expect(trigger(container)).toHaveTextContent("Türkçe");
+  });
+
+  it("opens a listbox and selects a language via onChange", () => {
+    const onChange = vi.fn();
+    const { container } = render(
+      <LanguageSwitcher languages={languages} defaultValue="en" onChange={onChange} />,
+    );
+
+    fireEvent.click(trigger(container));
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("option", { name: /Türkçe/ }));
+    expect(onChange).toHaveBeenCalledWith("tr");
+  });
+
+  it("marks the active option as selected", () => {
+    const { container } = render(
+      <LanguageSwitcher languages={languages} defaultValue="en" />,
+    );
+    fireEvent.click(trigger(container));
+
+    const enOption = screen.getByRole("option", { name: /English/ });
+    expect(enOption).toHaveAttribute("aria-selected", "true");
+    const trOption = screen.getByRole("option", { name: /Türkçe/ });
+    expect(trOption).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("collapses the dropdown after selecting a language", () => {
+    const { container } = render(
+      <LanguageSwitcher languages={languages} defaultValue="en" />,
+    );
+    fireEvent.click(trigger(container));
+    expect(trigger(container)).toHaveAttribute("aria-expanded", "true");
+
+    fireEvent.click(screen.getByRole("option", { name: /English/ }));
+    expect(trigger(container)).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("renders nothing when there are no languages", () => {
+    const { container } = render(<LanguageSwitcher languages={[]} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+});

package/src/components/LogoCloud/LogoCloud.test.tsx

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { LogoCloud } from "./LogoCloud";
+
+const logos = [{ name: "Acme" }, { name: "Globex" }];
+
+describe("LogoCloud", () => {
+  it("renders the title and logo names (quiet by default)", () => {
+    render(<LogoCloud title="Teams" logos={logos} />);
+    expect(screen.getByText("Teams")).toBeInTheDocument();
+    expect(screen.getByText("Acme")).toBeInTheDocument();
+    expect(screen.getByText("Globex")).toBeInTheDocument();
+  });
+
+  it("does not render a title when none is provided", () => {
+    render(<LogoCloud logos={logos} />);
+    expect(screen.queryByText("Teams")).not.toBeInTheDocument();
+  });
+
+  it("renders the marquee option (items duplicated for the loop)", () => {
+    render(<LogoCloud logos={logos} option="marquee" />);
+    expect(screen.getAllByText("Acme").length).toBeGreaterThan(1);
+  });
+
+  it("renders the strip option", () => {
+    render(<LogoCloud logos={logos} option="strip" />);
+    expect(screen.getByText("Acme")).toBeInTheDocument();
+  });
+
+  it("renders a logo image when src is provided", () => {
+    render(<LogoCloud logos={[{ name: "Acme", src: "/acme.png" }]} />);
+    const img = screen.getByAltText("Acme");
+    expect(img).toHaveAttribute("src", "/acme.png");
+  });
+});

package/src/components/MegaMenu/MegaMenu.test.tsx

@@ -0,0 +1,89 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MegaMenu } from "./MegaMenu";
+
+const items = [
+  {
+    label: "Product",
+    columns: [
+      {
+        title: "Build",
+        links: [
+          { label: "API Platform", description: "REST + GraphQL", href: "#api" },
+          { label: "Workflows", href: "#wf" },
+        ],
+      },
+    ],
+    featured: { title: "Get started", description: "See it live", cta: "Start", href: "#start" },
+  },
+  { label: "Pricing", href: "#pricing" },
+  { label: "Docs", href: "#docs" },
+];
+
+function desktopTrigger(container: HTMLElement): HTMLButtonElement {
+  // The desktop trigger is the one with aria-haspopup; the mobile accordion
+  // button does not set it, and it is hidden behind `lg:hidden` CSS.
+  return container.querySelector('button[aria-haspopup="true"]')!;
+}
+
+describe("MegaMenu", () => {
+  it("renders the brand and plain link items", () => {
+    render(<MegaMenu brand="Acurio" items={items} />);
+    expect(screen.getByText("Acurio")).toBeInTheDocument();
+    // Links render in both the desktop bar and the mobile panel.
+    const pricingLinks = screen.getAllByRole("link", { name: "Pricing" });
+    expect(pricingLinks.length).toBeGreaterThan(0);
+    expect(pricingLinks[0]).toHaveAttribute("href", "#pricing");
+    expect(screen.getAllByRole("link", { name: "Docs" }).length).toBeGreaterThan(0);
+  });
+
+  it("renders a trigger button for panel items (with columns/featured)", () => {
+    const { container } = render(<MegaMenu brand="Acurio" items={items} />);
+    const trigger = desktopTrigger(container);
+    expect(trigger).toHaveAttribute("aria-haspopup", "true");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("reveals the panel (column links + featured card) when the desktop trigger is clicked", () => {
+    const { container } = render(<MegaMenu brand="Acurio" items={items} />);
+    fireEvent.click(desktopTrigger(container));
+
+    expect(container.querySelector('[role="region"][aria-label="Product menu"]')).toBeInTheDocument();
+    // The column and featured links are present in the panel markup.
+    expect(container.querySelector('a[href="#api"]')).toBeInTheDocument();
+    expect(container.querySelector('a[href="#wf"]')).toBeInTheDocument();
+    expect(container.querySelector('a[href="#start"]')).toBeInTheDocument();
+  });
+
+  it("sets aria-expanded while the panel is open and closes on Escape", () => {
+    const { container } = render(<MegaMenu brand="Acurio" items={items} />);
+    const trigger = desktopTrigger(container);
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    fireEvent.keyDown(screen.getByRole("banner"), { key: "Escape" });
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("applies the inverse variant to the header shell", () => {
+    render(<MegaMenu brand="Acurio" items={items} variant="inverse" />);
+    expect(screen.getByRole("banner")).toHaveClass("bg-[#101010]/85");
+  });
+
+  it("toggles the mobile menu via the hamburger", () => {
+    render(<MegaMenu brand="Acurio" items={items} />);
+    const openBtn = screen.getByRole("button", { name: "Open menu" });
+    expect(openBtn).toHaveAttribute("aria-expanded", "false");
+
+    fireEvent.click(openBtn);
+    expect(screen.getByRole("button", { name: "Close menu" })).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+  });
+
+  it("does not render sticky when sticky is disabled", () => {
+    render(<MegaMenu brand="Acurio" items={items} sticky={false} />);
+    expect(screen.getByRole("banner")).not.toHaveClass("sticky");
+  });
+});

package/src/components/Modal.test.tsx

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Modal } from "./Modal";
+
+// The Modal drives the HTML Popover API, which jsdom doesn't implement, and a
+// `[popover]` element is treated as hidden by Testing Library's role queries.
+// Stub the popover surface and query the rendered structure directly.
+beforeEach(() => {
+  if (!HTMLElement.prototype.showPopover) {
+    HTMLElement.prototype.showPopover = vi.fn();
+  }
+  if (!HTMLElement.prototype.hidePopover) {
+    HTMLElement.prototype.hidePopover = vi.fn();
+  }
+  const originalMatches = Element.prototype.matches;
+  Element.prototype.matches = function (selector: string) {
+    if (selector === ":popover-open") return false;
+    return originalMatches.call(this, selector);
+  };
+});
+
+describe("Modal", () => {
+  it("renders the dialog with title and description when open", () => {
+    const onClose = vi.fn();
+    const { container } = render(
+      <Modal open onClose={onClose} title="Title" description="Description">
+        Body
+      </Modal>,
+    );
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+    expect(screen.getByText("Title")).toBeInTheDocument();
+    expect(screen.getByText("Description")).toBeInTheDocument();
+    expect(screen.getByText("Body")).toBeInTheDocument();
+  });
+
+  it("is marked as a modal dialog and links title via aria-labelledby", () => {
+    const onClose = vi.fn();
+    const { container } = render(
+      <Modal open onClose={onClose} title="Confirm">
+        Body
+      </Modal>,
+    );
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog).toHaveAttribute("aria-modal", "true");
+    const labelledBy = dialog!.getAttribute("aria-labelledby")!;
+    expect(document.getElementById(labelledBy)).toHaveTextContent("Confirm");
+  });
+
+  it("keeps its content in the DOM even when closed (hidden via popover)", () => {
+    const onClose = vi.fn();
+    const { container } = render(
+      <Modal open={false} onClose={onClose} title="Title">
+        Body
+      </Modal>,
+    );
+    // The component always renders the dialog markup; open/close is handled by
+    // the native popover, so the markup is present but hidden.
+    expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
+  });
+
+  it("calls onClose when the close button is pressed", async () => {
+    const onClose = vi.fn();
+    const { container } = render(<Modal open onClose={onClose} title="Title" />);
+    const user = userEvent.setup();
+    const closeBtn = container.querySelector('button[aria-label="Close dialog"]')!;
+    await user.click(closeBtn);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("renders a footer", () => {
+    const onClose = vi.fn();
+    render(
+      <Modal open onClose={onClose} footer={<button>Go</button>}>
+        Body
+      </Modal>,
+    );
+    expect(screen.getByText("Go")).toBeInTheDocument();
+  });
+});

package/src/components/Navbar/Navbar.test.tsx

@@ -0,0 +1,91 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Navbar } from "./Navbar";
+
+const links = [
+  { label: "Product", href: "#product" },
+  { label: "Pricing", href: "#pricing" },
+];
+
+describe("Navbar", () => {
+  it("renders brand, nav links and the action slot", () => {
+    render(<Navbar brand="Acurio" links={links} cta={<button>Start</button>} />);
+    const nav = screen.getByRole("navigation", { name: "Main navigation" });
+
+    expect(screen.getByText("Acurio")).toBeInTheDocument();
+    // Both the desktop list and the mobile panel render a "Product" link.
+    const productLinks = within(nav).getAllByRole("link", { name: "Product" });
+    expect(productLinks.length).toBeGreaterThan(0);
+    expect(productLinks[0]).toHaveAttribute("href", "#product");
+    expect(screen.getAllByRole("button", { name: "Start" }).length).toBeGreaterThan(0);
+  });
+
+  it("renders the brand href via brandHref", () => {
+    render(<Navbar brand="Acurio" links={links} brandHref="/" />);
+    const nav = screen.getByRole("navigation", { name: "Main navigation" });
+    expect(nav.querySelector('a[href="/"]')).toBeInTheDocument();
+  });
+
+  it("applies the classic variant shell", () => {
+    render(<Navbar brand="Acurio" links={links} variant="classic" />);
+    expect(screen.getByRole("banner")).toHaveClass("bg-background/85");
+  });
+
+  it("applies the inverse variant shell and on-secondary link tokens", () => {
+    render(<Navbar brand="Acurio" links={links} variant="inverse" />);
+    expect(screen.getByRole("banner")).toHaveClass("bg-[#101010]/85");
+    const productLinks = screen.getAllByRole("link", { name: "Product" });
+    expect(productLinks[0]).toHaveClass("text-on-secondary/60");
+  });
+
+  it("renders a custom logo instead of the wordmark", () => {
+    render(
+      <Navbar brand="Acurio" links={links} logo={<span data-testid="logo">Logo</span>} />,
+    );
+    expect(screen.getByTestId("logo")).toBeInTheDocument();
+    expect(screen.queryByText("Acurio")).not.toBeInTheDocument();
+  });
+
+  it("starts collapsed and toggles the mobile menu via the hamburger", async () => {
+    const user = userEvent.setup();
+    render(<Navbar brand="Acurio" links={links} />);
+    expect(screen.getByRole("button", { name: "Open menu" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+
+    await user.click(screen.getByRole("button", { name: "Open menu" }));
+    expect(screen.getByRole("button", { name: "Close menu" })).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+
+    await user.click(screen.getByRole("button", { name: "Close menu" }));
+    expect(screen.getByRole("button", { name: "Open menu" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+
+  it("closes the mobile menu when a mobile link is clicked", async () => {
+    const user = userEvent.setup();
+    render(<Navbar brand="Acurio" links={links} />);
+
+    await user.click(screen.getByRole("button", { name: "Open menu" }));
+    expect(screen.getByRole("button", { name: "Close menu" })).toBeInTheDocument();
+
+    // Two "Product" links exist (desktop + mobile); tapping one collapses.
+    const product = screen.getAllByRole("link", { name: "Product" })[1];
+    await user.click(product);
+    expect(screen.getByRole("button", { name: "Open menu" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+
+  it("is not sticky when sticky is disabled", () => {
+    render(<Navbar brand="Acurio" links={links} sticky={false} />);
+    expect(screen.getByRole("banner")).not.toHaveClass("sticky");
+  });
+});

package/src/components/Newsletter/Newsletter.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Newsletter } from "./Newsletter";
+
+describe("Newsletter", () => {
+  it("renders the field and submit button (inline by default)", () => {
+    render(<Newsletter />);
+    expect(screen.getByLabelText("Your email address")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Join" })).toBeInTheDocument();
+  });
+
+  it("calls onSubmit with a valid email and shows the success message", async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    render(<Newsletter onSubmit={onSubmit} successMessage="You're in!" />);
+    await user.type(screen.getByLabelText("Your email address"), "foo@bar.com");
+    await user.click(screen.getByRole("button", { name: "Join" }));
+
+    expect(onSubmit).toHaveBeenCalledWith("foo@bar.com");
+    expect(screen.getByRole("status")).toHaveTextContent("You're in!");
+  });
+
+  it("shows a validation error when an empty/invalid value is submitted", async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    render(<Newsletter onSubmit={onSubmit} />);
+    // Submit without entering a value; the component's own regex rejects it.
+    await user.click(screen.getByRole("button", { name: "Join" }));
+
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(screen.getByRole("alert")).toHaveTextContent("valid email");
+  });
+
+  it("renders the note text when provided", () => {
+    render(<Newsletter note="Once a month." />);
+    expect(screen.getByText("Once a month.")).toBeInTheDocument();
+  });
+
+  it("renders the card and underline options", () => {
+    const { container } = render(<Newsletter option="card" />);
+    expect(container.querySelector("form")).toBeInTheDocument();
+    render(<Newsletter option="underline" />);
+  });
+});

package/src/components/Pricing/Pricing.test.tsx

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Pricing } from "./Pricing";
+
+const plans = [
+  {
+    name: "Starter",
+    monthly: 9,
+    yearly: 90,
+    features: ["1 project"],
+    cta: "Get started",
+  },
+  {
+    name: "Pro",
+    monthly: 29,
+    yearly: 290,
+    highlighted: true,
+    features: ["Unlimited projects"],
+    cta: "Go Pro",
+  },
+];
+
+describe("Pricing", () => {
+  it("renders plan names, prices and the cards option by default", () => {
+    render(<Pricing plans={plans} />);
+    expect(screen.getByText("Starter")).toBeInTheDocument();
+    expect(screen.getByText("Pro")).toBeInTheDocument();
+    // Monthly price for the starter plan is $9 (default billing = monthly).
+    expect(screen.getByText("$9")).toBeInTheDocument();
+  });
+
+  it("switches between monthly and yearly billing via the toggle", () => {
+    render(<Pricing plans={[plans[0]]} />);
+    expect(screen.getByText("$9")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("switch"));
+    expect(screen.getByText("$90")).toBeInTheDocument();
+  });
+
+  it("renders the compact option", () => {
+    render(<Pricing plans={plans} option="compact" />);
+    expect(screen.getByText("Starter")).toBeInTheDocument();
+  });
+
+  it("renders the bento option", () => {
+    render(<Pricing plans={plans} option="bento" />);
+    expect(screen.getByText("Starter")).toBeInTheDocument();
+  });
+
+  it("calls onSelect with the plan and current billing when a plan button is pressed", () => {
+    const onSelect = vi.fn();
+    render(<Pricing plans={[plans[0]]} onSelect={onSelect} />);
+    fireEvent.click(screen.getByRole("button", { name: "Get started" }));
+    expect(onSelect).toHaveBeenCalledWith(plans[0], "monthly");
+  });
+
+  it("renders a price label for custom (null) pricing", () => {
+    render(
+      <Pricing
+        plans={[
+          { name: "Enterprise", monthly: null, yearly: null, features: [], cta: "Contact" },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Custom")).toBeInTheDocument();
+  });
+});

package/src/components/Prose.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Prose, ProseLead } from "./Prose";
+
+describe("Prose", () => {
+  it("renders an article element with prose classes", () => {
+    render(<Prose>Text</Prose>);
+    const article = screen.getByText("Text");
+    expect(article.tagName).toBe("ARTICLE");
+    expect(article).toHaveClass("prose");
+  });
+
+  it("applies the requested size", () => {
+    render(<Prose size="xl">Text</Prose>);
+    expect(screen.getByText("Text")).toHaveClass("prose-xl");
+  });
+
+  it("caps width by default and removes it when wide", () => {
+    render(<Prose>Capped</Prose>);
+    expect(screen.getByText("Capped")).toHaveClass("max-w-3xl");
+
+    render(<Prose wide>Wide</Prose>);
+    expect(screen.getByText("Wide")).not.toHaveClass("max-w-3xl");
+  });
+
+  it("renders children", () => {
+    render(
+      <Prose>
+        <h1>Heading</h1>
+      </Prose>,
+    );
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+
+  it("renders raw HTML via the html prop instead of children", () => {
+    render(<Prose html="<h2>CMS content</h2><p>A paragraph.</p>" />);
+    expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent("CMS content");
+    expect(screen.getByText("A paragraph.")).toBeInTheDocument();
+  });
+});
+
+describe("ProseLead", () => {
+  it("renders a lead-styled paragraph", () => {
+    render(<ProseLead>Intro</ProseLead>);
+    const p = screen.getByText("Intro");
+    expect(p.tagName).toBe("P");
+    expect(p).toHaveClass("lead");
+  });
+});

package/src/components/Section.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Section, SectionHeader } from "./Section";
+
+describe("Section", () => {
+  it("renders a section element with padding for the size", () => {
+    render(<Section size="lg">Body</Section>);
+    const section = screen.getByText("Body").closest("section");
+    expect(section).toBeInTheDocument();
+    expect(section).toHaveClass("py-24");
+  });
+
+  it("renders children", () => {
+    render(<Section>Body</Section>);
+    expect(screen.getByText("Body")).toBeInTheDocument();
+  });
+
+  it("forwards an id", () => {
+    render(<Section id="pricing">Pricing</Section>);
+    expect(screen.getByText("Pricing").closest("section")).toHaveAttribute("id", "pricing");
+  });
+
+  it("renders a SectionHeader with eyebrow/title/description when provided", () => {
+    render(
+      <Section eyebrow="E" title="T" description="D">
+        Body
+      </Section>,
+    );
+    expect(screen.getByText("E")).toBeInTheDocument();
+    expect(screen.getByText("T")).toBeInTheDocument();
+    expect(screen.getByText("D")).toBeInTheDocument();
+  });
+});
+
+describe("SectionHeader", () => {
+  it("renders eyebrow, title and description", () => {
+    render(<SectionHeader eyebrow="E" title="T" description="D" />);
+    expect(screen.getByText("E")).toBeInTheDocument();
+    expect(screen.getByText("T")).toBeInTheDocument();
+    expect(screen.getByText("D")).toBeInTheDocument();
+  });
+
+  it("centers by default and aligns left when requested", () => {
+    const { rerender } = render(<SectionHeader title="T" />);
+    expect(screen.getByText("T").parentElement).toHaveClass("text-center");
+
+    rerender(<SectionHeader title="T" align="left" />);
+    // left is the base; center adds mx-auto text-center.
+    expect(screen.getByText("T").parentElement).not.toHaveClass("text-center");
+  });
+});

package/src/components/Slot.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Slot } from "./Slot";
+
+describe("Slot", () => {
+  it("renders the single child with merged props", () => {
+    render(
+      <Slot className="btn" data-testid="slot">
+        <span>Hello</span>
+      </Slot>,
+    );
+    const el = screen.getByTestId("slot");
+    expect(el.tagName).toBe("SPAN");
+    expect(el).toHaveClass("btn");
+  });
+
+  it("forwards an onClick to the child and calls both handlers", () => {
+    const slotClick = vi.fn();
+    const childClick = vi.fn();
+    render(
+      <Slot onClick={slotClick}>
+        <button onClick={childClick}>Go</button>
+      </Slot>,
+    );
+    const btn = screen.getByRole("button", { name: "Go" });
+    btn.click();
+    expect(childClick).toHaveBeenCalledTimes(1);
+    expect(slotClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders nothing when there is no single valid child", () => {
+    const { container } = render(<Slot>text only</Slot>);
+    // A plain string is not a valid React element, so Slot returns null.
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("merges className with the child", () => {
+    render(
+      <Slot className="slot-class">
+        <div className="child-class">x</div>
+      </Slot>,
+    );
+    expect(screen.getByText("x")).toHaveClass("slot-class child-class");
+  });
+});

package/src/components/Stats/Stats.test.tsx

@@ -0,0 +1,47 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Stats } from "./Stats";
+
+const stats = [
+  { value: "12.4K", label: "Active users", delta: 18.2 },
+  { value: "98", suffix: "%", label: "Satisfaction", accent: true },
+  { value: "1.8", suffix: "ms", label: "Response" },
+];
+
+describe("Stats", () => {
+  it("renders labels and values with the editorial option by default", () => {
+    render(<Stats stats={stats} />);
+    expect(screen.getByText("Active users")).toBeInTheDocument();
+    expect(screen.getByText("12.4K")).toBeInTheDocument();
+    expect(screen.getByText("Satisfaction")).toBeInTheDocument();
+  });
+
+  it("renders a suffix inline with the value", () => {
+    render(<Stats stats={[stats[1]]} />);
+    expect(screen.getByText("%")).toBeInTheDocument();
+  });
+
+  it("renders delta badges for statistics that have a delta", () => {
+    render(<Stats stats={[stats[0]]} />);
+    expect(screen.getByText("18.2%")).toBeInTheDocument();
+  });
+
+  it("renders all option layouts", () => {
+    const { rerender } = render(<Stats stats={stats} option="editorial" />);
+    expect(screen.getByText("Active users")).toBeInTheDocument();
+
+    rerender(<Stats stats={stats} option="hairline" />);
+    expect(screen.getByText("Active users")).toBeInTheDocument();
+
+    rerender(<Stats stats={stats} option="cells" />);
+    expect(screen.getByText("Active users")).toBeInTheDocument();
+
+    rerender(<Stats stats={stats} option="ticker" />);
+    expect(screen.getByText("Active users")).toBeInTheDocument();
+  });
+
+  it("uses a downward delta badge for negative changes", () => {
+    render(<Stats stats={[{ value: "1.8", label: "Response", delta: -24.6 }]} />);
+    expect(screen.getByText("24.6%")).toBeInTheDocument();
+  });
+});