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

package/src/components/menu/menu.test.tsx

@@ -0,0 +1,167 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Menu } from "../../components";
+
+const openMenu = async (label = "Open") => {
+  await userEvent.click(screen.getByRole("button", { name: label }));
+};
+
+describe("Menu trigger", () => {
+  it("renders trigger without opening popup", () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "item", label: "Copy" }]}
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Open" })).toBeInTheDocument();
+  });
+});
+
+describe("Menu item types", () => {
+  it("opens and renders 'item' label", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "item", label: "Copy" }]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Copy")).toBeInTheDocument();
+  });
+
+  it("renders item shortcut when provided", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "item", label: "Copy", shortcut: "⌘C" }]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("⌘C")).toBeInTheDocument();
+  });
+
+  it("renders 'separator' between items", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[
+          { type: "item", label: "Alpha" },
+          { type: "separator" },
+          { type: "item", label: "Beta" },
+        ]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Alpha")).toBeInTheDocument();
+    expect(screen.getByText("Beta")).toBeInTheDocument();
+  });
+
+  it("renders 'label' item", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "label", label: "Section" }]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Section")).toBeInTheDocument();
+  });
+
+  it("renders 'checkbox' item", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "checkbox", label: "Bold", checked: true }]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Bold")).toBeInTheDocument();
+  });
+
+  it("renders 'group' with label and nested items", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[
+          {
+            type: "group",
+            label: "Actions",
+            items: [{ type: "item", label: "Delete" }],
+          },
+        ]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Actions")).toBeInTheDocument();
+    expect(screen.getByText("Delete")).toBeInTheDocument();
+  });
+
+  it("renders 'radio-group' with radio items", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[
+          {
+            type: "radio-group",
+            value: "a",
+            items: [
+              { type: "radio", label: "Option A", value: "a" },
+              { type: "radio", label: "Option B", value: "b" },
+            ],
+          },
+        ]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Option A")).toBeInTheDocument();
+    expect(screen.getByText("Option B")).toBeInTheDocument();
+  });
+
+  it("renders 'submenu' trigger label", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[
+          {
+            type: "submenu",
+            label: "More",
+            items: [{ type: "item", label: "Sub item" }],
+          },
+        ]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("More")).toBeInTheDocument();
+  });
+});
+
+describe("Menu classNames", () => {
+  it("applies classNames.popup to popup content", async () => {
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "item", label: "X" }]}
+        classNames={{ popup: "popup-cls" }}
+      />,
+    );
+    await openMenu();
+    await screen.findByText("X");
+    expect(document.querySelector('[data-slot="menu-content"]')).toHaveClass(
+      "popup-cls",
+    );
+  });
+
+  it("fires onOpenChange when menu opens", async () => {
+    // Menu uses MenuRoot which proxies Base UI Root — just ensure no crash
+    render(
+      <Menu
+        trigger={<button type="button">Open</button>}
+        items={[{ type: "item", label: "Y" }]}
+      />,
+    );
+    await openMenu();
+    expect(await screen.findByText("Y")).toBeInTheDocument();
+  });
+});

package/src/components/number-input/number-input.test.tsx

@@ -3,12 +3,15 @@ import { createRef } from "react";
 import { describe, expect, it, vi } from "vitest";
 import {
   NumberInput,
+  NumberInputCursorIcon,
   NumberInputDecrement,
   NumberInputGroup,
   NumberInputIncrement,
   NumberInputInput,
   NumberInputPrimitive,
   NumberInputRoot,
+  NumberInputScrubArea,
+  NumberInputScrubAreaCursor,
 } from "../../components";
 import { click } from "../../utils/tests";
 
@@ -192,3 +195,62 @@ describe("NumberInput primitives", () => {
     expect(NumberInputPrimitive.Decrement).toBeDefined();
   });
 });
+
+describe("NumberInput scrub primitives", () => {
+  it("NumberInputScrubArea renders data-slot=number-input-scrub-area", () => {
+    render(
+      <NumberInputRoot name="amount">
+        <NumberInputGroup>
+          <NumberInputScrubArea>Drag</NumberInputScrubArea>
+          <NumberInputInput />
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="number-input-scrub-area"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("NumberInputScrubArea merges className", () => {
+    render(
+      <NumberInputRoot name="amount">
+        <NumberInputGroup>
+          <NumberInputScrubArea className="scrub-cls">Drag</NumberInputScrubArea>
+          <NumberInputInput />
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="number-input-scrub-area"]'),
+    ).toHaveClass("scrub-cls");
+  });
+
+  it("NumberInputScrubAreaCursor renders inside a ScrubArea without crashing", () => {
+    render(
+      <NumberInputRoot name="amount">
+        <NumberInputGroup>
+          <NumberInputScrubArea>
+            <NumberInputScrubAreaCursor />
+            Drag
+          </NumberInputScrubArea>
+          <NumberInputInput />
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="number-input-scrub-area"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("NumberInputCursorIcon renders an SVG element", () => {
+    const { container } = render(<NumberInputCursorIcon />);
+    expect(container.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("NumberInputCursorIcon forwards props to SVG", () => {
+    const { container } = render(
+      <NumberInputCursorIcon data-testid="cursor-icon" />,
+    );
+    expect(container.querySelector("[data-testid='cursor-icon']")).toBeInTheDocument();
+  });
+});

package/src/components/otp/otp.test.tsx

@@ -0,0 +1,103 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { OTP, OTPInput, OTPPrimitive, OTPRoot } from "./otp";
+
+describe("OTPRoot", () => {
+  it("renders with data-slot='otp'", () => {
+    render(<OTPRoot length={4} />);
+    expect(document.querySelector('[data-slot="otp"]')).toBeInTheDocument();
+  });
+
+  it("sets data-size='default' by default", () => {
+    render(<OTPRoot length={4} />);
+    expect(document.querySelector('[data-slot="otp"]')).toHaveAttribute(
+      "data-size",
+      "default",
+    );
+  });
+
+  it("sets data-size='lg' when size prop is 'lg'", () => {
+    render(<OTPRoot length={4} size="lg" />);
+    expect(document.querySelector('[data-slot="otp"]')).toHaveAttribute(
+      "data-size",
+      "lg",
+    );
+  });
+
+  it("forwards className", () => {
+    render(<OTPRoot length={4} className="otp-root-cls" />);
+    expect(document.querySelector('[data-slot="otp"]')).toHaveClass(
+      "otp-root-cls",
+    );
+  });
+});
+
+describe("OTPInput", () => {
+  it("renders with data-slot='otp-input' inside OTPRoot", () => {
+    render(
+      <OTPRoot length={1}>
+        <OTPInput />
+      </OTPRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="otp-input"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("OTP composite", () => {
+  it("renders the correct number of inputs", () => {
+    render(<OTP length={4} />);
+    const inputs = document.querySelectorAll('[data-slot="otp-input"]');
+    expect(inputs).toHaveLength(4);
+  });
+
+  it("assigns accessible aria-label to inputs after the first", () => {
+    // Base UI strips aria-label from the first OTP input (it uses its own labelling)
+    render(<OTP length={3} />);
+    expect(
+      screen.getByRole("textbox", { name: "Character 2 of 3" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("textbox", { name: "Character 3 of 3" }),
+    ).toBeInTheDocument();
+  });
+
+  it("inserts a separator after the split position", () => {
+    render(<OTP length={6} split={3} />);
+    expect(
+      document.querySelector('[data-slot="otp-input"]'),
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="separator"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("propagates aria-invalid to all inputs", () => {
+    render(<OTP length={3} aria-invalid />);
+    const inputs = document.querySelectorAll('[data-slot="otp-input"]');
+    expect(inputs).toHaveLength(3);
+    for (const input of inputs) {
+      expect(input).toHaveAttribute("aria-invalid", "true");
+    }
+  });
+
+  it("applies size prop to root", () => {
+    render(<OTP length={4} size="lg" />);
+    expect(document.querySelector('[data-slot="otp"]')).toHaveAttribute(
+      "data-size",
+      "lg",
+    );
+  });
+
+  it("forwards className to root", () => {
+    render(<OTP length={2} className="otp-cls" />);
+    expect(document.querySelector('[data-slot="otp"]')).toHaveClass("otp-cls");
+  });
+});
+
+describe("OTPPrimitive", () => {
+  it("is exported and defined", () => {
+    expect(OTPPrimitive).toBeDefined();
+  });
+});

package/src/components/otp/otp.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { OTPFieldPreview as OTPPrimitive } from "@base-ui/react/otp-field";
 import type React from "react";
 import { Fragment } from "react";

package/src/components/pagination/pagination.test.tsx

@@ -1,12 +1,16 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import {
   Pagination,
+  PaginationFirst,
+  PaginationLast,
   PaginationNext,
   PaginationPageInfo,
   PaginationPages,
   PaginationPrevious,
+  PaginationRange,
   PaginationRoot,
+  PaginationSizeSelect,
   PaginationTotal,
 } from "../../components";
 import { click } from "../../utils/tests";
@@ -138,4 +142,60 @@ describe("Pagination primitives", () => {
     );
     consoleError.mockRestore();
   });
+
+  it("PaginationFirst navigates to page 1 from non-first page", () => {
+    render(
+      <PaginationRoot
+        defaultCurrentPage={3}
+        defaultPageSize={10}
+        totalItems={30}
+      >
+        <PaginationFirst />
+        <PaginationPageInfo />
+      </PaginationRoot>,
+    );
+    click(screen.getByRole("button", { name: /primera página/i }));
+    expect(screen.getByText(/Página 1 de 3/)).toBeInTheDocument();
+  });
+
+  it("PaginationLast navigates to last page", () => {
+    render(
+      <PaginationRoot
+        defaultCurrentPage={1}
+        defaultPageSize={10}
+        totalItems={30}
+      >
+        <PaginationLast />
+        <PaginationPageInfo />
+      </PaginationRoot>,
+    );
+    click(screen.getByRole("button", { name: /última página/i }));
+    expect(screen.getByText(/Página 3 de 3/)).toBeInTheDocument();
+  });
+
+  it("PaginationSizeSelect changes page size and resets to page 1", () => {
+    render(
+      <PaginationRoot defaultPageSize={10} totalItems={50}>
+        <PaginationSizeSelect />
+        <PaginationRange />
+      </PaginationRoot>,
+    );
+    expect(screen.getByText(/1 - 10 de 50/)).toBeInTheDocument();
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "25" },
+    });
+    expect(screen.getByText(/1 - 25 de 50/)).toBeInTheDocument();
+  });
+
+  it("PaginationRange renders data-slot and range text", () => {
+    render(
+      <PaginationRoot defaultPageSize={10} totalItems={30}>
+        <PaginationRange />
+      </PaginationRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="pagination-range"]'),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/1 - 10 de 30/)).toBeInTheDocument();
+  });
 });

package/src/components/pagination/pagination.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import {
   ChevronLeft,

package/src/components/password/password.test.tsx

@@ -0,0 +1,115 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Password } from "../../components";
+
+describe("Password", () => {
+  describe("rendering", () => {
+    it("renders with data-slot='password'", () => {
+      render(<Password />);
+      expect(document.querySelector('[data-slot="password"]')).toBeTruthy();
+    });
+
+    it("renders toggle button with data-slot='password-toggle'", () => {
+      render(<Password />);
+      expect(document.querySelector('[data-slot="password-toggle"]')).toBeTruthy();
+    });
+
+    it("defaults to type='password'", () => {
+      render(<Password />);
+      expect(document.querySelector("input")).toHaveAttribute("type", "password");
+    });
+  });
+
+  describe("toggle visibility", () => {
+    it("reveals password on toggle click", async () => {
+      render(<Password />);
+      await userEvent.click(
+        document.querySelector('[data-slot="password-toggle"]') as HTMLButtonElement,
+      );
+      expect(document.querySelector("input")).toHaveAttribute("type", "text");
+    });
+
+    it("hides password on second toggle click", async () => {
+      render(<Password />);
+      const toggle = document.querySelector(
+        '[data-slot="password-toggle"]',
+      ) as HTMLButtonElement;
+      await userEvent.click(toggle);
+      await userEvent.click(toggle);
+      expect(document.querySelector("input")).toHaveAttribute("type", "password");
+    });
+
+    it("fires onShow when revealing password", async () => {
+      const onShow = vi.fn();
+      render(<Password onShow={onShow} />);
+      await userEvent.click(
+        document.querySelector('[data-slot="password-toggle"]') as HTMLButtonElement,
+      );
+      expect(onShow).toHaveBeenCalledTimes(1);
+    });
+
+    it("fires onHide when concealing password", async () => {
+      const onHide = vi.fn();
+      render(<Password onHide={onHide} />);
+      const toggle = document.querySelector(
+        '[data-slot="password-toggle"]',
+      ) as HTMLButtonElement;
+      await userEvent.click(toggle);
+      await userEvent.click(toggle);
+      expect(onHide).toHaveBeenCalledTimes(1);
+    });
+
+    it("disables toggle when toggleable=false", () => {
+      render(<Password toggleable={false} />);
+      expect(
+        document.querySelector('[data-slot="password-toggle"]'),
+      ).toBeDisabled();
+    });
+  });
+
+  describe("classNames", () => {
+    it("applies className to root", () => {
+      render(<Password className="custom-root" />);
+      expect(document.querySelector('[data-slot="password"]')).toHaveClass(
+        "custom-root",
+      );
+    });
+
+    it("applies classNames.input to input element", () => {
+      render(<Password classNames={{ input: "custom-input" }} />);
+      expect(document.querySelector("input")).toHaveClass("custom-input");
+    });
+
+    it("applies classNames.toggle to toggle button", () => {
+      render(<Password classNames={{ toggle: "custom-toggle" }} />);
+      expect(
+        document.querySelector('[data-slot="password-toggle"]'),
+      ).toHaveClass("custom-toggle");
+    });
+  });
+
+  describe("onValueChange", () => {
+    it("fires onValueChange with input value on change", async () => {
+      const onValueChange = vi.fn();
+      render(<Password onValueChange={onValueChange} />);
+      await userEvent.type(document.querySelector("input")!, "ab");
+      expect(onValueChange).toHaveBeenCalledWith("a", expect.any(Object));
+    });
+  });
+
+  describe("custom icons", () => {
+    it("renders custom showIcon when password hidden", () => {
+      render(<Password showIcon={<span data-testid="show-icon" />} />);
+      expect(screen.getByTestId("show-icon")).toBeTruthy();
+    });
+
+    it("renders custom hideIcon after toggle", async () => {
+      render(<Password hideIcon={<span data-testid="hide-icon" />} />);
+      await userEvent.click(
+        document.querySelector('[data-slot="password-toggle"]') as HTMLButtonElement,
+      );
+      expect(screen.getByTestId("hide-icon")).toBeTruthy();
+    });
+  });
+});

package/src/components/password/password.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Eye, EyeOff } from "lucide-react";
 import { type ChangeEvent, type ReactNode } from "react";
 import { useToggle } from "../../hooks";