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

package/src/components/loader/loader.test.tsx

@@ -21,6 +21,68 @@ describe("Loader component", () => {
     render(<Loader size="lg" data-testid="loader" />);
 
     const loader = screen.getByTestId("loader");
-    expect(loader).toHaveClass("w-10 h-10");
+    expect(loader).toHaveClass("size-10");
+  });
+});
+
+describe("Loader data-slots", () => {
+  it("renders wrapper with data-slot='loader'", () => {
+    render(<Loader />);
+    expect(document.querySelector('[data-slot="loader"]')).toBeInTheDocument();
+  });
+
+  it("renders icon with data-slot='loader-icon'", () => {
+    render(<Loader />);
+    expect(
+      document.querySelector('[data-slot="loader-icon"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Loader variants", () => {
+  it.each([
+    ["primary", "text-primary"],
+    ["secondary", "text-secondary"],
+    ["ghost", "text-muted-foreground"],
+    ["error", "text-error"],
+    ["success", "text-success"],
+    ["warning", "text-warning"],
+    ["info", "text-info"],
+  ] as const)("variant '%s' applies '%s' to icon", (variant, cls) => {
+    render(<Loader variant={variant} />);
+    expect(document.querySelector('[data-slot="loader-icon"]')).toHaveClass(
+      cls,
+    );
+  });
+});
+
+describe("Loader sizes", () => {
+  it.each([
+    ["xs", "size-3"],
+    ["sm", "size-4"],
+    ["default", "size-7"],
+    ["lg", "size-10"],
+    ["xl", "size-14"],
+  ] as const)("size '%s' applies '%s' to icon", (size, cls) => {
+    render(<Loader size={size} />);
+    expect(document.querySelector('[data-slot="loader-icon"]')).toHaveClass(
+      cls,
+    );
+  });
+});
+
+describe("Loader center + classNames", () => {
+  it("center=true adds fixed overlay classes to wrapper", () => {
+    render(<Loader center />);
+    const wrapper = document.querySelector('[data-slot="loader"]');
+    expect(wrapper).toHaveClass("fixed");
+    expect(wrapper).toHaveClass("inset-0");
+  });
+
+  it("classNames.container adds class to wrapper", () => {
+    render(<Loader classNames={{ container: "overlay-cls" }} />);
+    expect(document.querySelector('[data-slot="loader"]')).toHaveClass(
+      "overlay-cls",
+    );
   });
 });

package/src/components/loader/loader.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cva, type VariantProps } from "class-variance-authority";
 import { LoaderCircle, type LucideProps } from "lucide-react";
 import { cn } from "../../lib";

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

@@ -1,87 +1,256 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { createRef } from "react";
 import { describe, expect, it, vi } from "vitest";
-import { NumberInput } from "../../components";
+import {
+  NumberInput,
+  NumberInputCursorIcon,
+  NumberInputDecrement,
+  NumberInputGroup,
+  NumberInputIncrement,
+  NumberInputInput,
+  NumberInputPrimitive,
+  NumberInputRoot,
+  NumberInputScrubArea,
+  NumberInputScrubAreaCursor,
+} from "../../components";
+import { click } from "../../utils/tests";
 
-describe("NumberInput component", () => {
-  it("se renderiza correctamente", () => {
-    render(<NumberInput name="cantidad" />);
+describe("NumberInput composite", () => {
+  it("renders an input with the group role", () => {
+    render(<NumberInput name="amount" />);
+
+    expect(screen.getByRole("group")).toBeInTheDocument();
     expect(screen.getByRole("textbox")).toBeInTheDocument();
   });
 
-  it("acepta y muestra el valor inicial correctamente", () => {
-    render(<NumberInput name="cantidad" value={10} />);
-    const input = screen.getByRole("textbox") as HTMLInputElement;
-    expect(input.value).toBe("10");
+  it("displays the controlled value", () => {
+    render(<NumberInput name="amount" value={10} />);
+
+    expect(screen.getByRole("textbox")).toHaveValue("10");
   });
 
-  it("deshabilita el input cuando la prop disabled es true", () => {
-    render(<NumberInput name="cantidad" disabled />);
+  it("respects the disabled prop", () => {
+    render(<NumberInput name="amount" disabled />);
+
     expect(screen.getByRole("textbox")).toBeDisabled();
   });
 
-  it("acepta la prop className en el contenedor visual", () => {
-    const TEST_CLASS = "mi-clase-personalizada";
-    render(<NumberInput name="cantidad" className={TEST_CLASS} />);
-    expect(screen.getByRole("group")).toHaveClass(TEST_CLASS);
+  it("forwards placeholder to the underlying input", () => {
+    render(<NumberInput name="amount" placeholder="Cantidad" />);
+
+    expect(screen.getByPlaceholderText("Cantidad")).toBeInTheDocument();
   });
 
-  it("acepta la prop ref al input visible via inputProps", () => {
-    const ref = createRef<HTMLInputElement>();
-    render(<NumberInput name="cantidad" inputProps={{ ref }} />);
-    expect(ref.current).not.toBeNull();
-    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  it("marks the input as invalid when invalid is true", () => {
+    render(<NumberInput name="amount" invalid />);
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("aria-invalid", "true");
+    expect(screen.getByRole("group")).toHaveAttribute("aria-invalid", "true");
   });
 
-  it("llama a onValueChange cuando el valor cambia", () => {
-    const handleChange = vi.fn();
-    render(<NumberInput name="cantidad" onValueChange={handleChange} />);
-    const input = screen.getByRole("textbox");
+  it("calls onValueChange when the value changes", () => {
+    const onValueChange = vi.fn();
+    render(<NumberInput name="amount" onValueChange={onValueChange} />);
+
+    fireEvent.input(screen.getByRole("textbox"), { target: { value: "5" } });
 
-    fireEvent.input(input, { target: { value: "5" } });
-    expect(handleChange).toHaveBeenCalledTimes(1);
+    expect(onValueChange).toHaveBeenCalled();
   });
 
-  it("respeta el valor mínimo", () => {
-    render(<NumberInput name="cantidad" min={0} />);
-    const input = screen.getByRole("textbox") as HTMLInputElement;
+  it("clamps to the min value on blur", () => {
+    render(<NumberInput name="amount" min={0} />);
 
+    const input = screen.getByRole("textbox");
     fireEvent.input(input, { target: { value: "-5" } });
     fireEvent.blur(input);
-    expect(input.value).toBe("0");
+
+    expect(input).toHaveValue("0");
   });
 
-  it("respeta el valor máximo", () => {
-    render(<NumberInput name="cantidad" max={100} />);
-    const input = screen.getByRole("textbox") as HTMLInputElement;
+  it("clamps to the max value on blur", () => {
+    render(<NumberInput name="amount" max={100} />);
 
+    const input = screen.getByRole("textbox");
     fireEvent.input(input, { target: { value: "150" } });
     fireEvent.blur(input);
-    expect(input.value).toBe("100");
+
+    expect(input).toHaveValue("100");
   });
 
-  it("incrementa el valor correctamente con los botones", () => {
-    render(<NumberInput name="cantidad" defaultValue={5} />);
-    const input = screen.getByRole("textbox") as HTMLInputElement;
-    const incrementButton = screen.getByTestId("increment-trigger");
+  it("increments the value via the increment button", () => {
+    render(<NumberInput name="amount" defaultValue={5} />);
+
+    click(screen.getByTestId("increment-trigger"));
 
-    fireEvent.click(incrementButton);
-    expect(input.value).toBe("6");
+    expect(screen.getByRole("textbox")).toHaveValue("6");
   });
 
-  it("decrementa el valor correctamente con los botones", () => {
-    render(<NumberInput name="cantidad" defaultValue={5} />);
-    const input = screen.getByRole("textbox") as HTMLInputElement;
-    const decrementButton = screen.getByTestId("decrement-trigger");
+  it("decrements the value via the decrement button", () => {
+    render(<NumberInput name="amount" defaultValue={5} />);
+
+    click(screen.getByTestId("decrement-trigger"));
 
-    fireEvent.click(decrementButton);
-    expect(input.value).toBe("4");
+    expect(screen.getByRole("textbox")).toHaveValue("4");
   });
 
-  it("oculta los botones cuando hideControls es true", () => {
-    render(<NumberInput name="cantidad" hideControls />);
+  it("hides the increment and decrement controls when hideControls is true", () => {
+    render(<NumberInput name="amount" hideControls />);
+
     expect(screen.queryByTestId("increment-trigger")).not.toBeInTheDocument();
     expect(screen.queryByTestId("decrement-trigger")).not.toBeInTheDocument();
     expect(screen.getByRole("textbox")).toBeInTheDocument();
   });
+
+  it("applies className to the group and classNames to each slot", () => {
+    render(
+      <NumberInput
+        name="amount"
+        className="group-class"
+        classNames={{
+          input: "input-class",
+          controls: "controls-class",
+          increment: "increment-class",
+          decrement: "decrement-class",
+        }}
+      />,
+    );
+
+    expect(
+      document.querySelector('[data-slot="number-input-group"]'),
+    ).toHaveClass("group-class");
+    expect(
+      document.querySelector('[data-slot="number-input-input"]'),
+    ).toHaveClass("input-class");
+    expect(screen.getByTestId("increment-trigger")).toHaveClass(
+      "increment-class",
+    );
+    expect(screen.getByTestId("decrement-trigger")).toHaveClass(
+      "decrement-class",
+    );
+    expect(screen.getByTestId("increment-trigger").parentElement).toHaveClass(
+      "controls-class",
+    );
+  });
+});
+
+describe("NumberInput primitives", () => {
+  const setup = (
+    children?: React.ReactNode,
+    rootProps?: React.ComponentProps<typeof NumberInputRoot>,
+  ) =>
+    render(
+      <NumberInputRoot name="amount" {...rootProps}>
+        <NumberInputGroup>
+          <NumberInputDecrement data-testid="decrement">-</NumberInputDecrement>
+          <NumberInputInput data-testid="input" />
+          <NumberInputIncrement data-testid="increment">+</NumberInputIncrement>
+          {children}
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+
+  it("composes Root, Group, Input, Increment, and Decrement directly", () => {
+    setup(undefined, { defaultValue: 2 });
+
+    expect(screen.getByTestId("input")).toHaveValue("2");
+
+    click(screen.getByTestId("increment"));
+    expect(screen.getByTestId("input")).toHaveValue("3");
+
+    click(screen.getByTestId("decrement"));
+    expect(screen.getByTestId("input")).toHaveValue("2");
+  });
+
+  it("forwards a ref to the underlying input via NumberInputInput", () => {
+    const ref = createRef<HTMLInputElement>();
+    render(
+      <NumberInputRoot name="amount">
+        <NumberInputGroup>
+          <NumberInputInput ref={ref} />
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  });
+
+  it("is controlled by the value prop on the Root", () => {
+    const onValueChange = vi.fn();
+    render(
+      <NumberInputRoot name="amount" value={7} onValueChange={onValueChange}>
+        <NumberInputGroup>
+          <NumberInputInput data-testid="input" />
+        </NumberInputGroup>
+      </NumberInputRoot>,
+    );
+
+    expect(screen.getByTestId("input")).toHaveValue("7");
+  });
+
+  it("exposes the Base UI namespace via NumberInputPrimitive", () => {
+    expect(NumberInputPrimitive).toBeDefined();
+    expect(NumberInputPrimitive.Root).toBeDefined();
+    expect(NumberInputPrimitive.Input).toBeDefined();
+    expect(NumberInputPrimitive.Increment).toBeDefined();
+    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";