@boxcustodia/library 2.0.0-alpha.18 → 2.0.0-alpha.19

package/src/components/table/table.test.tsx

@@ -1,6 +1,18 @@
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
-import { ColumnDef, Table } from "../../components";
+import {
+  ColumnDef,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRoot,
+  TableRow,
+} from "../../components";
 import { click } from "../../utils/tests";
 
 describe("Table", () => {
@@ -89,3 +101,158 @@ describe("Table", () => {
     expect(onRowClick).toHaveBeenCalledWith(data[0]);
   });
 });
+
+describe("Table data-slots", () => {
+  it("TableRoot renders data-slot='table-container' and 'table'", () => {
+    render(
+      <TableRoot>
+        <tbody />
+      </TableRoot>,
+    );
+    expect(document.querySelector('[data-slot="table-container"]')).toBeTruthy();
+    expect(document.querySelector('[data-slot="table"]')).toBeTruthy();
+  });
+
+  it("TableHeader renders with data-slot='table-header'", () => {
+    render(
+      <table>
+        <TableHeader />
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-header"]')).toBeTruthy();
+  });
+
+  it("TableBody renders with data-slot='table-body'", () => {
+    render(
+      <table>
+        <TableBody />
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-body"]')).toBeTruthy();
+  });
+
+  it("TableFooter renders with data-slot='table-footer'", () => {
+    render(
+      <table>
+        <TableFooter />
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-footer"]')).toBeTruthy();
+  });
+
+  it("TableRow renders with data-slot='table-row'", () => {
+    render(
+      <table>
+        <tbody>
+          <TableRow />
+        </tbody>
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-row"]')).toBeTruthy();
+  });
+
+  it("TableHead renders with data-slot='table-head'", () => {
+    render(
+      <table>
+        <thead>
+          <tr>
+            <TableHead />
+          </tr>
+        </thead>
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-head"]')).toBeTruthy();
+  });
+
+  it("TableCell renders with data-slot='table-cell'", () => {
+    render(
+      <table>
+        <tbody>
+          <tr>
+            <TableCell />
+          </tr>
+        </tbody>
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-cell"]')).toBeTruthy();
+  });
+
+  it("TableCaption renders with data-slot='table-caption'", () => {
+    render(
+      <table>
+        <TableCaption>Caption text</TableCaption>
+      </table>,
+    );
+    expect(document.querySelector('[data-slot="table-caption"]')).toBeTruthy();
+  });
+});
+
+describe("Table composite extras", () => {
+  interface Person {
+    name: string;
+    age: number;
+  }
+  const data: Person[] = [
+    { name: "John", age: 30 },
+    { name: "Jane", age: 25 },
+  ];
+  const columns: ColumnDef<Person>[] = [
+    { header: "Name", key: "name" },
+    { header: "Age", key: "age" },
+  ];
+
+  it("renders empty tbody when data is empty", () => {
+    render(<Table data={[]} columns={columns} />);
+    expect(screen.queryByRole("row", { name: /john/i })).toBeNull();
+    expect(document.querySelector('[data-slot="table-body"]')).toBeTruthy();
+  });
+
+  it("fires onRowDoubleClick on double click", async () => {
+    const onRowDoubleClick = vi.fn();
+    render(
+      <Table
+        data={data}
+        columns={columns}
+        onRowDoubleClick={onRowDoubleClick}
+      />,
+    );
+    await userEvent.dblClick(screen.getByText("John"));
+    expect(onRowDoubleClick).toHaveBeenCalledWith(data[0]);
+  });
+
+  it("uses getRowKey for row keys", () => {
+    const getRowKey = vi.fn((row: Person) => row.name);
+    render(<Table data={data} columns={columns} getRowKey={getRowKey} />);
+    expect(getRowKey).toHaveBeenCalledWith(data[0], 0);
+    expect(getRowKey).toHaveBeenCalledWith(data[1], 1);
+  });
+
+  it("applies className to table element", () => {
+    render(<Table data={[]} columns={[]} className="custom-table" />);
+    expect(document.querySelector('[data-slot="table"]')).toHaveClass(
+      "custom-table",
+    );
+  });
+
+  it("applies classNames.container to outer div", () => {
+    render(
+      <Table data={[]} columns={[]} classNames={{ container: "cls-wrap" }} />,
+    );
+    expect(document.querySelector('[data-slot="table-container"]')).toHaveClass(
+      "cls-wrap",
+    );
+  });
+
+  it("applies classNames.thead to thead", () => {
+    render(<Table data={[]} columns={columns} classNames={{ thead: "cls-thead" }} />);
+    expect(document.querySelector('[data-slot="table-header"]')).toHaveClass(
+      "cls-thead",
+    );
+  });
+
+  it("applies classNames.td to body cells", () => {
+    render(<Table data={data} columns={columns} classNames={{ td: "cls-td" }} />);
+    const cells = document.querySelectorAll('[data-slot="table-cell"]');
+    expect(cells[0]).toHaveClass("cls-td");
+  });
+});

package/src/components/table/table.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { type ReactNode } from "react";
 import { cn } from "../../lib";

package/src/components/tabs/tabs.test.tsx

@@ -1,6 +1,12 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import { TabList, Tabs, TabsContent, TabsTrigger } from "../../components";
+import {
+  TabList,
+  Tabs,
+  TabsContent,
+  TabsPrimitive,
+  TabsTrigger,
+} from "../../components";
 import { click } from "../../utils/tests";
 
 describe("Tabs component", () => {
@@ -59,3 +65,134 @@ describe("Tabs component", () => {
     });
   });
 });
+
+describe("Tabs data-slots", () => {
+  it("sets data-slot='tabs' on root", () => {
+    render(<Tabs />);
+    expect(document.querySelector('[data-slot="tabs"]')).toBeInTheDocument();
+  });
+
+  it("sets data-slot='tabs-list' on list", () => {
+    render(
+      <Tabs>
+        <TabList />
+      </Tabs>,
+    );
+    expect(document.querySelector('[data-slot="tabs-list"]')).toBeInTheDocument();
+  });
+
+  it("sets data-slot='tab-indicator' inside list", () => {
+    render(
+      <Tabs>
+        <TabList />
+      </Tabs>,
+    );
+    expect(
+      document.querySelector('[data-slot="tab-indicator"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("sets data-slot='tabs-tab' on trigger", () => {
+    render(
+      <Tabs>
+        <TabList>
+          <TabsTrigger value="a">A</TabsTrigger>
+        </TabList>
+      </Tabs>,
+    );
+    expect(document.querySelector('[data-slot="tabs-tab"]')).toBeInTheDocument();
+  });
+
+  it("sets data-slot='tabs-content' on panel", () => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsContent value="a">Content</TabsContent>
+      </Tabs>,
+    );
+    expect(
+      document.querySelector('[data-slot="tabs-content"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Tabs variants", () => {
+  it.each([
+    ["underline", "underline"],
+    ["background", "background"],
+  ] as const)("sets data-variant='%s' on list", (variant, expected) => {
+    render(
+      <Tabs>
+        <TabList variant={variant} />
+      </Tabs>,
+    );
+    expect(document.querySelector('[data-slot="tabs-list"]')).toHaveAttribute(
+      "data-variant",
+      expected,
+    );
+  });
+
+  it("applies mx-auto when centered=true", () => {
+    render(
+      <Tabs>
+        <TabList centered />
+      </Tabs>,
+    );
+    expect(document.querySelector('[data-slot="tabs-list"]')).toHaveClass(
+      "mx-auto",
+    );
+  });
+});
+
+describe("Tabs classNames", () => {
+  it("applies className to root", () => {
+    render(<Tabs className="custom-root" />);
+    expect(document.querySelector('[data-slot="tabs"]')).toHaveClass(
+      "custom-root",
+    );
+  });
+
+  it("applies className to TabsList", () => {
+    render(
+      <Tabs>
+        <TabList className="custom-list" />
+      </Tabs>,
+    );
+    expect(document.querySelector('[data-slot="tabs-list"]')).toHaveClass(
+      "custom-list",
+    );
+  });
+
+  it("applies className to TabsTrigger", () => {
+    render(
+      <Tabs>
+        <TabList>
+          <TabsTrigger value="a" className="custom-tab">
+            A
+          </TabsTrigger>
+        </TabList>
+      </Tabs>,
+    );
+    expect(document.querySelector('[data-slot="tabs-tab"]')).toHaveClass(
+      "custom-tab",
+    );
+  });
+
+  it("applies className to TabsContent", () => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsContent value="a" className="custom-panel">
+          Content
+        </TabsContent>
+      </Tabs>,
+    );
+    expect(document.querySelector('[data-slot="tabs-content"]')).toHaveClass(
+      "custom-panel",
+    );
+  });
+});
+
+describe("Tabs exports", () => {
+  it("exports TabsPrimitive", () => {
+    expect(TabsPrimitive).toBeDefined();
+  });
+});

package/src/components/tag/tag.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { Tag } from "../../components";
+import { Tag, tagVariants } from "../../components";
 
 describe("Badge component", () => {
   it("should render children", () => {
@@ -16,3 +16,42 @@ describe("Badge component", () => {
     expect(component).toHaveClass("custom-class");
   });
 });
+
+describe("Tag variants", () => {
+  it.each([
+    ["default", "bg-primary"],
+    ["secondary", "bg-secondary"],
+    ["error", "bg-error/10"],
+    ["success", "bg-success/10"],
+    ["warning", "bg-warning/10"],
+    ["outline", "border-border"],
+    ["ghost", "hover:bg-muted"],
+    ["link", "text-primary"],
+  ] as const)("applies '%s' variant classes", (variant, cls) => {
+    render(<Tag variant={variant}>Label</Tag>);
+    expect(screen.getByText("Label")).toHaveClass(cls);
+  });
+});
+
+describe("Tag render prop", () => {
+  it("renders as anchor when render prop provided", () => {
+    render(
+      <Tag render={<a href="/test" />}>Link tag</Tag>,
+    );
+    expect(screen.getByRole("link")).toBeInTheDocument();
+    expect(screen.getByRole("link")).toHaveTextContent("Link tag");
+  });
+});
+
+describe("Tag exports", () => {
+  it("exports tagVariants function", () => {
+    expect(tagVariants).toBeDefined();
+    expect(typeof tagVariants).toBe("function");
+  });
+
+  it("tagVariants returns class string", () => {
+    const cls = tagVariants({ variant: "success" });
+    expect(typeof cls).toBe("string");
+    expect(cls).toContain("bg-success/10");
+  });
+});

package/src/components/tag/tag.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva, type VariantProps } from "class-variance-authority";

package/src/components/textarea/textarea.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Textarea } from "../../components";
+
+describe("Textarea component", () => {
+  it("renders a textarea element", () => {
+    render(<Textarea />);
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+  });
+
+  it("sets data-slot='textarea'", () => {
+    render(<Textarea />);
+    expect(screen.getByRole("textbox")).toHaveAttribute("data-slot", "textarea");
+  });
+
+  it("applies className", () => {
+    render(<Textarea className="custom-class" />);
+    expect(screen.getByRole("textbox")).toHaveClass("custom-class");
+  });
+
+  it("renders placeholder text", () => {
+    render(<Textarea placeholder="Enter text..." />);
+    expect(screen.getByPlaceholderText("Enter text...")).toBeInTheDocument();
+  });
+
+  it("fires onValueChange with value and event on input", async () => {
+    const onValueChange = vi.fn();
+    render(<Textarea onValueChange={onValueChange} />);
+    await userEvent.type(screen.getByRole("textbox"), "hi");
+    expect(onValueChange).toHaveBeenCalled();
+    const [value, event] = onValueChange.mock.calls[0];
+    expect(typeof value).toBe("string");
+    expect(event).toBeDefined();
+  });
+
+  it("does not crash when onValueChange is not provided", async () => {
+    render(<Textarea />);
+    await userEvent.type(screen.getByRole("textbox"), "hello");
+    expect(screen.getByRole("textbox")).toHaveValue("hello");
+  });
+
+  it("is disabled when disabled prop is passed", () => {
+    render(<Textarea disabled />);
+    expect(screen.getByRole("textbox")).toBeDisabled();
+  });
+
+  it("renders with defaultValue", () => {
+    render(<Textarea defaultValue="initial value" />);
+    expect(screen.getByRole("textbox")).toHaveValue("initial value");
+  });
+
+  it("passes name prop to underlying textarea", () => {
+    render(<Textarea name="my-field" />);
+    expect(screen.getByRole("textbox")).toHaveAttribute("name", "my-field");
+  });
+});

package/src/components/timeline/timeline.test.tsx

@@ -0,0 +1,202 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  Timeline,
+  TimelineContent,
+  TimelineDate,
+  TimelineHeader,
+  TimelineIndicator,
+  TimelineItem,
+  TimelineRoot,
+  TimelineSeparator,
+  TimelineTitle,
+} from "../../components";
+
+const defaultItems = [
+  { title: "Step 1", content: "Content 1", date: "Jan 1" },
+  { title: "Step 2", content: "Content 2", date: "Jan 2" },
+  { title: "Step 3", content: "Content 3", date: "Jan 3" },
+];
+
+describe("TimelineRoot", () => {
+  it("renders with data-slot='timeline'", () => {
+    render(<TimelineRoot />);
+    expect(document.querySelector('[data-slot="timeline"]')).toBeInTheDocument();
+  });
+
+  it("defaults to vertical orientation", () => {
+    render(<TimelineRoot />);
+    expect(document.querySelector('[data-slot="timeline"]')).toHaveAttribute(
+      "data-orientation",
+      "vertical",
+    );
+  });
+
+  it("sets data-orientation='horizontal'", () => {
+    render(<TimelineRoot orientation="horizontal" />);
+    expect(document.querySelector('[data-slot="timeline"]')).toHaveAttribute(
+      "data-orientation",
+      "horizontal",
+    );
+  });
+
+  it("applies className", () => {
+    render(<TimelineRoot className="custom-timeline" />);
+    expect(document.querySelector('[data-slot="timeline"]')).toHaveClass(
+      "custom-timeline",
+    );
+  });
+});
+
+describe("TimelineItem", () => {
+  it("renders with data-slot='timeline-item'", () => {
+    render(
+      <TimelineRoot>
+        <TimelineItem step={1} />
+      </TimelineRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="timeline-item"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("sets data-completed on items where step <= activeStep", () => {
+    render(
+      <TimelineRoot defaultValue={2}>
+        <TimelineItem step={1} />
+        <TimelineItem step={2} />
+        <TimelineItem step={3} />
+      </TimelineRoot>,
+    );
+    const completed = document.querySelectorAll("[data-completed]");
+    expect(completed).toHaveLength(2);
+  });
+
+  it("does not set data-completed when step > activeStep", () => {
+    render(
+      <TimelineRoot defaultValue={1}>
+        <TimelineItem step={2} />
+      </TimelineRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="timeline-item"]'),
+    ).not.toHaveAttribute("data-completed");
+  });
+});
+
+describe("Timeline sub-primitive data-slots", () => {
+  function renderFull() {
+    return render(
+      <TimelineRoot>
+        <TimelineItem step={1}>
+          <TimelineHeader>
+            <TimelineTitle>Title</TimelineTitle>
+            <TimelineDate>Jan 1</TimelineDate>
+          </TimelineHeader>
+          <TimelineIndicator />
+          <TimelineSeparator />
+          <TimelineContent>Content</TimelineContent>
+        </TimelineItem>
+      </TimelineRoot>,
+    );
+  }
+
+  it("renders data-slot='timeline-header'", () => {
+    renderFull();
+    expect(
+      document.querySelector('[data-slot="timeline-header"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders data-slot='timeline-title'", () => {
+    renderFull();
+    expect(
+      document.querySelector('[data-slot="timeline-title"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders data-slot='timeline-date'", () => {
+    renderFull();
+    expect(
+      document.querySelector('[data-slot="timeline-date"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders data-slot='timeline-content'", () => {
+    renderFull();
+    expect(
+      document.querySelector('[data-slot="timeline-content"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders data-slot='timeline-indicator'", () => {
+    renderFull();
+    expect(
+      document.querySelector('[data-slot="timeline-indicator"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders data-slot='timeline-separator'", () => {
+    renderFull();
+    expect(
+      document.querySelector('[data-slot="timeline-separator"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Timeline composite", () => {
+  it("renders all item titles", () => {
+    render(<Timeline items={defaultItems} />);
+    expect(screen.getByText("Step 1")).toBeInTheDocument();
+    expect(screen.getByText("Step 2")).toBeInTheDocument();
+    expect(screen.getByText("Step 3")).toBeInTheDocument();
+  });
+
+  it("renders item content", () => {
+    render(<Timeline items={defaultItems} />);
+    expect(screen.getByText("Content 1")).toBeInTheDocument();
+  });
+
+  it("renders item dates", () => {
+    render(<Timeline items={defaultItems} />);
+    expect(screen.getByText("Jan 1")).toBeInTheDocument();
+  });
+
+  it("skips undefined title/content/date fields", () => {
+    render(<Timeline items={[{ title: undefined, content: undefined }]} />);
+    expect(
+      document.querySelector('[data-slot="timeline-item"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders with variant='alternate'", () => {
+    render(<Timeline items={defaultItems} variant="alternate" />);
+    expect(screen.getByText("Step 1")).toBeInTheDocument();
+  });
+
+  it("renders with variant='date-left'", () => {
+    render(<Timeline items={defaultItems} variant="date-left" />);
+    expect(screen.getByText("Step 1")).toBeInTheDocument();
+  });
+
+  it("applies classNames.item to timeline items", () => {
+    render(
+      <Timeline items={[{ title: "T1" }]} classNames={{ item: "custom-item" }} />,
+    );
+    expect(document.querySelector('[data-slot="timeline-item"]')).toHaveClass(
+      "custom-item",
+    );
+  });
+
+  it("applies classNames.content to content slots", () => {
+    render(
+      <Timeline
+        items={[{ content: "C1" }]}
+        classNames={{ content: "custom-content" }}
+      />,
+    );
+    expect(document.querySelector('[data-slot="timeline-content"]')).toHaveClass(
+      "custom-content",
+    );
+  });
+});

package/src/components/timeline/timeline.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";