feat(ui): polish core component surfaces

packages/ui/src/components/data-table.test.tsx

@@ -3,7 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 
 import { Button } from "./button";
-import { DataTable, type DataTableColumn } from "./data-table";
+import { DataTable, DataTableSearch, type DataTableColumn } from "./data-table";
 
 type ReleaseRow = {
   id: string;
@@ -103,11 +103,13 @@ describe("DataTable", () => {
       />
     );
 
+    const search = screen.getByRole("searchbox", { name: "Search rows" });
+    const searchControl = search.closest('[data-slot="control"]');
+
     expect(screen.getByRole("table").closest('[data-slot="root"]')).toBeInTheDocument();
-    expect(screen.getByRole("searchbox", { name: "Search rows" })).toHaveAttribute(
-      "data-slot",
-      "input"
-    );
+    expect(search).toHaveAttribute("data-slot", "input");
+    expect(searchControl).toBeInTheDocument();
+    expect(searchControl?.querySelector('[data-slot="prefix"]')).toBeTruthy();
     expect(
       screen.getByRole("button", { name: "Create lane" }).closest('[data-slot="actions"]')
     ).toBeInTheDocument();
@@ -207,6 +209,21 @@ describe("DataTable", () => {
     expect(screen.getByRole("button", { name: "Next" })).toBeDisabled();
   });
 
+  it("keeps search input and wrapper className semantics distinct", () => {
+    render(
+      <DataTableSearch
+        aria-label="Search rows"
+        className="search-input-override"
+        wrapperClassName="search-wrapper-override"
+      />
+    );
+
+    const search = screen.getByRole("searchbox", { name: "Search rows" });
+
+    expect(search).toHaveClass("search-input-override");
+    expect(search.closest('[data-slot="control"]')).toHaveClass("search-wrapper-override");
+  });
+
   it("renders loading status without dropping the table chrome", () => {
     render(<DataTable columns={columns} loading rows={rows} />);