@nucel/ui 0.2.0 → 0.3.0

package/src/lib/components/ui/FormField.test.ts

@@ -1,41 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/svelte";
-import FormField from "./FormField.svelte";
-
-describe("FormField", () => {
-  it("renders children (wrapper div is present)", () => {
-    const { container } = render(FormField, { props: {} });
-    expect(container.querySelector("div")).not.toBeNull();
-  });
-
-  it("renders label when label prop is given", () => {
-    render(FormField, { props: { label: "Username" } });
-    expect(screen.getByText("Username")).toBeInTheDocument();
-  });
-
-  it("does NOT render a label element when label prop is absent", () => {
-    const { container } = render(FormField, { props: {} });
-    expect(container.querySelector("label")).toBeNull();
-  });
-
-  it("renders error text when error prop is given", () => {
-    render(FormField, { props: { error: "This field is required" } });
-    expect(screen.getByText("This field is required")).toBeInTheDocument();
-  });
-
-  it("renders hint text when hint prop is given and error is absent", () => {
-    render(FormField, { props: { hint: "Must be between 3–20 characters" } });
-    expect(screen.getByText("Must be between 3–20 characters")).toBeInTheDocument();
-  });
-
-  it("does NOT render hint when error is also given", () => {
-    render(FormField, {
-      props: {
-        hint: "Some hint",
-        error: "Some error",
-      },
-    });
-    expect(screen.queryByText("Some hint")).toBeNull();
-    expect(screen.getByText("Some error")).toBeInTheDocument();
-  });
-});

package/src/lib/components/ui/PageHeader.test.ts

@@ -1,72 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/svelte";
-import PageHeader from "./PageHeader.svelte";
-
-describe("PageHeader", () => {
-  it("renders the title", () => {
-    render(PageHeader, { props: { title: "Repositories" } });
-    expect(screen.getByText("Repositories")).toBeInTheDocument();
-  });
-
-  it("title is rendered as an h1 element", () => {
-    render(PageHeader, { props: { title: "Repositories" } });
-    const h1 = screen.getByRole("heading", { level: 1 });
-    expect(h1).toBeInTheDocument();
-    expect(h1.textContent).toBe("Repositories");
-  });
-
-  it("renders the subtitle when provided", () => {
-    render(PageHeader, { props: { title: "Repositories", subtitle: "All repositories" } });
-    expect(screen.getByText("All repositories")).toBeInTheDocument();
-  });
-
-  it("does not render a subtitle element when subtitle is not given", () => {
-    render(PageHeader, { props: { title: "Repositories" } });
-    expect(screen.queryByText("All repositories")).not.toBeInTheDocument();
-  });
-
-  it("subtitle is rendered as a paragraph element", () => {
-    const { container } = render(PageHeader, {
-      props: { title: "Repositories", subtitle: "Some subtitle" },
-    });
-    const p = container.querySelector("p");
-    expect(p).not.toBeNull();
-    expect(p!.textContent).toBe("Some subtitle");
-  });
-
-  it("does not render a paragraph element when subtitle is absent", () => {
-    const { container } = render(PageHeader, { props: { title: "Only Title" } });
-    expect(container.querySelector("p")).toBeNull();
-  });
-
-  it("renders different title text correctly", () => {
-    render(PageHeader, { props: { title: "Issues" } });
-    expect(screen.getByText("Issues")).toBeInTheDocument();
-  });
-
-  it("renders without crashing when only title is provided", () => {
-    expect(() =>
-      render(PageHeader, { props: { title: "Test" } }),
-    ).not.toThrow();
-  });
-
-  it("renders without crashing when title and subtitle are provided", () => {
-    expect(() =>
-      render(PageHeader, { props: { title: "Test", subtitle: "A subtitle" } }),
-    ).not.toThrow();
-  });
-
-  it("h1 has tracking-tight class", () => {
-    const { container } = render(PageHeader, { props: { title: "Test" } });
-    const h1 = container.querySelector("h1");
-    expect(h1!.className).toContain("tracking-tight");
-  });
-
-  it("subtitle paragraph has text-muted-foreground class", () => {
-    const { container } = render(PageHeader, {
-      props: { title: "Test", subtitle: "Sub" },
-    });
-    const p = container.querySelector("p");
-    expect(p!.className).toContain("text-muted-foreground");
-  });
-});

package/src/lib/components/ui/ProgressRing.test.ts

@@ -1,239 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/svelte";
-import ProgressRing from "./ProgressRing.svelte";
-
-describe("ProgressRing — rendering", () => {
-  it("renders nothing when limit === 0", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 0 } });
-    expect(container.querySelector("svg")).toBeNull();
-    expect(container.querySelector("span")).toBeNull();
-  });
-
-  it("renders an SVG when limit > 0", () => {
-    const { container } = render(ProgressRing, { props: { spent: 25, limit: 100 } });
-    expect(container.querySelector("svg")).not.toBeNull();
-  });
-
-  it("renders a span wrapper when limit > 0", () => {
-    const { container } = render(ProgressRing, { props: { spent: 10, limit: 100 } });
-    expect(container.querySelector("span")).not.toBeNull();
-  });
-
-  it("renders two circle elements inside the SVG", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 100 } });
-    expect(container.querySelectorAll("circle").length).toBe(2);
-  });
-
-  it("renders nothing when both spent and limit are 0", () => {
-    const { container } = render(ProgressRing, { props: { spent: 0, limit: 0 } });
-    expect(container.querySelector("svg")).toBeNull();
-  });
-
-  it("renders when spent > limit (clamped to 1)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 200, limit: 100 } });
-    expect(container.querySelector("svg")).not.toBeNull();
-  });
-
-  it("renders without crashing for fractional values", () => {
-    expect(() =>
-      render(ProgressRing, { props: { spent: 33.33, limit: 100 } }),
-    ).not.toThrow();
-  });
-});
-
-describe("ProgressRing — title attribute", () => {
-  it("title contains the percentage for 25%", () => {
-    const { container } = render(ProgressRing, { props: { spent: 25, limit: 100 } });
-    const span = container.querySelector("span");
-    expect(span?.getAttribute("title")).toContain("25%");
-  });
-
-  it("title contains the percentage for 50%", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 100 } });
-    const span = container.querySelector("span");
-    expect(span?.getAttribute("title")).toContain("50%");
-  });
-
-  it("title contains the percentage for 80%", () => {
-    const { container } = render(ProgressRing, { props: { spent: 80, limit: 100 } });
-    const span = container.querySelector("span");
-    expect(span?.getAttribute("title")).toContain("80%");
-  });
-
-  it("title contains the percentage for 100% when spent === limit", () => {
-    const { container } = render(ProgressRing, { props: { spent: 100, limit: 100 } });
-    const span = container.querySelector("span");
-    expect(span?.getAttribute("title")).toContain("100%");
-  });
-
-  it("title contains the spent value formatted with 2 decimal places", () => {
-    const { container } = render(ProgressRing, { props: { spent: 25, limit: 100 } });
-    const span = container.querySelector("span");
-    expect(span?.getAttribute("title")).toContain("25.00");
-  });
-
-  it("title contains the limit value formatted with 2 decimal places", () => {
-    const { container } = render(ProgressRing, { props: { spent: 25, limit: 100 } });
-    const span = container.querySelector("span");
-    expect(span?.getAttribute("title")).toContain("100.00");
-  });
-
-  it("title contains '$' signs for spent and limit", () => {
-    const { container } = render(ProgressRing, { props: { spent: 10, limit: 50 } });
-    const span = container.querySelector("span");
-    const title = span?.getAttribute("title") ?? "";
-    expect(title.match(/\$/g)?.length).toBeGreaterThanOrEqual(2);
-  });
-});
-
-describe("ProgressRing — color derivation", () => {
-  it("uses stroke-success class when pct < 0.5 (0%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 0, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasSuccess = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-success"),
-    );
-    expect(hasSuccess).toBe(true);
-  });
-
-  it("uses stroke-success class when pct < 0.5 (25%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 25, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasSuccess = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-success"),
-    );
-    expect(hasSuccess).toBe(true);
-  });
-
-  it("uses stroke-warning class when pct is 0.5 (exactly 50%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasWarning = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-warning"),
-    );
-    expect(hasWarning).toBe(true);
-  });
-
-  it("uses stroke-warning class when pct is 0.79 (79%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 79, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasWarning = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-warning"),
-    );
-    expect(hasWarning).toBe(true);
-  });
-
-  it("uses stroke-destructive class when pct is 0.8 (exactly 80%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 80, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasDestructive = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-destructive"),
-    );
-    expect(hasDestructive).toBe(true);
-  });
-
-  it("uses stroke-destructive class when pct is 1.0 (100%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 100, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasDestructive = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-destructive"),
-    );
-    expect(hasDestructive).toBe(true);
-  });
-
-  it("uses stroke-destructive class when spent > limit (clamped to 100%)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 150, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasDestructive = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-destructive"),
-    );
-    expect(hasDestructive).toBe(true);
-  });
-});
-
-describe("ProgressRing — bgColor derivation", () => {
-  it("uses stroke-success/20 bg class when pct < 0.5", () => {
-    const { container } = render(ProgressRing, { props: { spent: 10, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasBg = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-success/20"),
-    );
-    expect(hasBg).toBe(true);
-  });
-
-  it("uses stroke-warning/20 bg class when pct is in warning range", () => {
-    const { container } = render(ProgressRing, { props: { spent: 65, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasBg = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-warning/20"),
-    );
-    expect(hasBg).toBe(true);
-  });
-
-  it("uses stroke-destructive/20 bg class when pct >= 0.8", () => {
-    const { container } = render(ProgressRing, { props: { spent: 90, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasBg = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-destructive/20"),
-    );
-    expect(hasBg).toBe(true);
-  });
-});
-
-describe("ProgressRing — size and SVG attributes", () => {
-  it("SVG has correct width and height for default size (16)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 100 } });
-    const svg = container.querySelector("svg");
-    expect(svg?.getAttribute("width")).toBe("16");
-    expect(svg?.getAttribute("height")).toBe("16");
-  });
-
-  it("SVG has correct width for custom size", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 100, size: 40 } });
-    const svg = container.querySelector("svg");
-    expect(svg?.getAttribute("width")).toBe("40");
-    expect(svg?.getAttribute("height")).toBe("40");
-  });
-
-  it("SVG has -rotate-90 class", () => {
-    const { container } = render(ProgressRing, { props: { spent: 50, limit: 100 } });
-    const svg = container.querySelector("svg");
-    // SVG elements use SVGAnimatedString for className — use getAttribute instead
-    expect(svg?.getAttribute("class")).toContain("-rotate-90");
-  });
-
-  it("applies custom class to span wrapper", () => {
-    const { container } = render(ProgressRing, {
-      props: { spent: 50, limit: 100, class: "my-ring-class" },
-    });
-    const span = container.querySelector("span");
-    expect(span?.className).toContain("my-ring-class");
-  });
-});
-
-describe("ProgressRing — pct calculation", () => {
-  it("pct is 0 when limit === 0 (no SVG rendered)", () => {
-    // The component renders nothing when limit === 0 because pct would be 0
-    const { container } = render(ProgressRing, { props: { spent: 100, limit: 0 } });
-    expect(container.querySelector("svg")).toBeNull();
-  });
-
-  it("pct is clamped to 1 when spent > limit", () => {
-    // At 100% the destructive color should be used
-    const { container } = render(ProgressRing, { props: { spent: 999, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasDestructive = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-destructive"),
-    );
-    expect(hasDestructive).toBe(true);
-  });
-
-  it("pct is 0 when spent === 0 (success color)", () => {
-    const { container } = render(ProgressRing, { props: { spent: 0, limit: 100 } });
-    const circles = container.querySelectorAll("circle");
-    const hasSuccess = Array.from(circles).some((c) =>
-      c.getAttribute("class")?.includes("stroke-success"),
-    );
-    expect(hasSuccess).toBe(true);
-  });
-});

package/src/lib/components/ui/Section.test.ts

@@ -1,44 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/svelte";
-import Section from "./Section.svelte";
-
-describe("Section", () => {
-  it("renders a container div", () => {
-    const { container } = render(Section, { props: {} });
-    expect(container.querySelector("div")).not.toBeNull();
-  });
-
-  it("renders the title when given", () => {
-    const { container } = render(Section, {
-      props: { title: "My Section" },
-    });
-    const h3 = container.querySelector("h3");
-    expect(h3).not.toBeNull();
-    expect(h3!.textContent).toBe("My Section");
-  });
-
-  it("does NOT render an h3 when no title is given", () => {
-    const { container } = render(Section, {
-      props: {},
-    });
-    expect(container.querySelector("h3")).toBeNull();
-  });
-
-  it("the h3 has the uppercase class", () => {
-    const { container } = render(Section, {
-      props: { title: "Settings" },
-    });
-    const h3 = container.querySelector("h3");
-    expect(h3).not.toBeNull();
-    expect(h3!.className).toContain("uppercase");
-  });
-
-  it("extra class prop is merged into the container div", () => {
-    const { container } = render(Section, {
-      props: { class: "my-extra-class" },
-    });
-    const div = container.querySelector("div");
-    expect(div).not.toBeNull();
-    expect(div!.className).toContain("my-extra-class");
-  });
-});

package/src/lib/components/ui/StatusBadge.test.ts

@@ -1,150 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/svelte";
-import StatusBadge from "./StatusBadge.svelte";
-
-describe("StatusBadge — label rendering", () => {
-  it("renders 'open' as the label for status=open", () => {
-    render(StatusBadge, { props: { status: "open" } });
-    expect(screen.getByText("open")).toBeInTheDocument();
-  });
-
-  it("renders 'closed' as the label for status=closed", () => {
-    render(StatusBadge, { props: { status: "closed" } });
-    expect(screen.getByText("closed")).toBeInTheDocument();
-  });
-
-  it("renders 'running' as the label for status=running", () => {
-    render(StatusBadge, { props: { status: "running" } });
-    expect(screen.getByText("running")).toBeInTheDocument();
-  });
-
-  it("renders 'succeeded' as the label for status=succeeded", () => {
-    render(StatusBadge, { props: { status: "succeeded" } });
-    expect(screen.getByText("succeeded")).toBeInTheDocument();
-  });
-
-  it("renders 'failed' as the label for status=failed", () => {
-    render(StatusBadge, { props: { status: "failed" } });
-    expect(screen.getByText("failed")).toBeInTheDocument();
-  });
-
-  it("renders 'merged' as the label for status=merged", () => {
-    render(StatusBadge, { props: { status: "merged" } });
-    expect(screen.getByText("merged")).toBeInTheDocument();
-  });
-
-  it("renders custom label when label prop is provided", () => {
-    render(StatusBadge, { props: { status: "open", label: "In Progress" } });
-    expect(screen.getByText("In Progress")).toBeInTheDocument();
-  });
-
-  it("custom label overrides the default status label", () => {
-    render(StatusBadge, { props: { status: "open", label: "My Label" } });
-    expect(screen.queryByText("open")).not.toBeInTheDocument();
-    expect(screen.getByText("My Label")).toBeInTheDocument();
-  });
-
-  it("renders without crashing for any known status", () => {
-    const statuses = ["open", "closed", "running", "succeeded", "failed", "merged"];
-    for (const status of statuses) {
-      expect(() => render(StatusBadge, { props: { status } })).not.toThrow();
-    }
-  });
-});
-
-describe("StatusBadge — color classes", () => {
-  it("applies success color classes for status=open", () => {
-    const { container } = render(StatusBadge, { props: { status: "open" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("text-success");
-  });
-
-  it("applies purple color classes for status=merged", () => {
-    const { container } = render(StatusBadge, { props: { status: "merged" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("text-purple-400");
-  });
-
-  it("applies blue color classes for status=running", () => {
-    const { container } = render(StatusBadge, { props: { status: "running" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("text-blue-400");
-  });
-
-  it("applies success color classes for status=succeeded", () => {
-    const { container } = render(StatusBadge, { props: { status: "succeeded" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("text-success");
-  });
-
-  it("applies destructive color classes for status=failed", () => {
-    const { container } = render(StatusBadge, { props: { status: "failed" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("text-destructive");
-  });
-
-  it("uses secondary variant for status=closed", () => {
-    // closed maps to secondary variant (no extraClass)
-    const { container } = render(StatusBadge, { props: { status: "closed" } });
-    expect(container.firstElementChild).not.toBeNull();
-  });
-});
-
-describe("StatusBadge — structure", () => {
-  it("renders an inline-flex element", () => {
-    const { container } = render(StatusBadge, { props: { status: "open" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("inline-flex");
-  });
-
-  it("renders items-center class", () => {
-    const { container } = render(StatusBadge, { props: { status: "open" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("items-center");
-  });
-
-  it("contains a span with the label text", () => {
-    const { container } = render(StatusBadge, { props: { status: "open" } });
-    const span = container.querySelector("span");
-    expect(span).not.toBeNull();
-  });
-
-  it("renders without crashing for unknown status", () => {
-    expect(() => render(StatusBadge, { props: { status: "unknown" } })).not.toThrow();
-  });
-
-  it("renders custom label for any status", () => {
-    render(StatusBadge, { props: { status: "failed", label: "Broken" } });
-    expect(screen.getByText("Broken")).toBeInTheDocument();
-  });
-
-  it("background color class is present for status=open", () => {
-    const { container } = render(StatusBadge, { props: { status: "open" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("bg-success/10");
-  });
-
-  it("background color class is present for status=merged", () => {
-    const { container } = render(StatusBadge, { props: { status: "merged" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("bg-purple-500/10");
-  });
-
-  it("background color class is present for status=running", () => {
-    const { container } = render(StatusBadge, { props: { status: "running" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("bg-blue-500/10");
-  });
-
-  it("background color class is present for status=failed", () => {
-    const { container } = render(StatusBadge, { props: { status: "failed" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("bg-destructive/10");
-  });
-
-  it("background color class is present for status=succeeded", () => {
-    const { container } = render(StatusBadge, { props: { status: "succeeded" } });
-    const badge = container.firstElementChild;
-    expect(badge?.className).toContain("bg-success/10");
-  });
-});

package/src/lib/components/ui/StatusPill.test.ts

@@ -1,125 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/svelte";
-import StatusPill from "./StatusPill.svelte";
-
-describe("StatusPill", () => {
-  it("renders default label 'passed' for status=success", () => {
-    render(StatusPill, { props: { status: "success" } });
-    expect(screen.getByText("passed")).toBeInTheDocument();
-  });
-
-  it("renders default label 'failed' for status=failure", () => {
-    render(StatusPill, { props: { status: "failure" } });
-    expect(screen.getByText("failed")).toBeInTheDocument();
-  });
-
-  it("renders default label 'running' for status=running", () => {
-    render(StatusPill, { props: { status: "running" } });
-    expect(screen.getByText("running")).toBeInTheDocument();
-  });
-
-  it("renders default label 'pending' for status=pending", () => {
-    render(StatusPill, { props: { status: "pending" } });
-    expect(screen.getByText("pending")).toBeInTheDocument();
-  });
-
-  it("renders default label 'cancelled' for status=cancelled", () => {
-    render(StatusPill, { props: { status: "cancelled" } });
-    expect(screen.getByText("cancelled")).toBeInTheDocument();
-  });
-
-  it("renders default label 'warning' for status=warning", () => {
-    render(StatusPill, { props: { status: "warning" } });
-    expect(screen.getByText("warning")).toBeInTheDocument();
-  });
-
-  it("renders custom label when label prop is provided", () => {
-    render(StatusPill, { props: { status: "success", label: "Deployed" } });
-    expect(screen.getByText("Deployed")).toBeInTheDocument();
-  });
-
-  it("custom label overrides the default label", () => {
-    render(StatusPill, { props: { status: "success", label: "Custom" } });
-    expect(screen.queryByText("passed")).not.toBeInTheDocument();
-    expect(screen.getByText("Custom")).toBeInTheDocument();
-  });
-
-  it("size='xs' applies text-[10px] class", () => {
-    const { container } = render(StatusPill, { props: { status: "success", size: "xs" } });
-    const span = container.querySelector("span");
-    expect(span).not.toBeNull();
-    expect(span!.className).toContain("text-[10px]");
-  });
-
-  it("size='xs' applies px-1.5 class", () => {
-    const { container } = render(StatusPill, { props: { status: "success", size: "xs" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("px-1.5");
-  });
-
-  it("size='sm' (default) applies text-[11px] class", () => {
-    const { container } = render(StatusPill, { props: { status: "success" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-[11px]");
-  });
-
-  it("size='sm' applies px-2 class", () => {
-    const { container } = render(StatusPill, { props: { status: "success", size: "sm" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("px-2");
-  });
-
-  it("size='xs' does not apply text-[11px] class", () => {
-    const { container } = render(StatusPill, { props: { status: "running", size: "xs" } });
-    const span = container.querySelector("span");
-    expect(span!.className).not.toContain("text-[11px]");
-  });
-
-  it("root element is a span", () => {
-    const { container } = render(StatusPill, { props: { status: "success" } });
-    expect(container.firstElementChild?.tagName.toLowerCase()).toBe("span");
-  });
-
-  it("applies green color classes for success status", () => {
-    const { container } = render(StatusPill, { props: { status: "success" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-green-500");
-  });
-
-  it("applies destructive color classes for failure status", () => {
-    const { container } = render(StatusPill, { props: { status: "failure" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-destructive");
-  });
-
-  it("applies blue color classes for running status", () => {
-    const { container } = render(StatusPill, { props: { status: "running" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-blue-400");
-  });
-
-  it("applies yellow color classes for pending status", () => {
-    const { container } = render(StatusPill, { props: { status: "pending" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-yellow-500");
-  });
-
-  it("applies amber color classes for warning status", () => {
-    const { container } = render(StatusPill, { props: { status: "warning" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-amber-500");
-  });
-
-  it("applies muted color classes for cancelled status", () => {
-    const { container } = render(StatusPill, { props: { status: "cancelled" } });
-    const span = container.querySelector("span");
-    expect(span!.className).toContain("text-muted-foreground");
-  });
-
-  it("renders without crashing for all statuses", () => {
-    const statuses = ["success", "failure", "running", "pending", "cancelled", "warning"] as const;
-    for (const status of statuses) {
-      expect(() => render(StatusPill, { props: { status } })).not.toThrow();
-    }
-  });
-});