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

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";

package/src/components/popover/popover.test.tsx

@@ -0,0 +1,175 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverPopup,
+  PopoverPrimitive,
+  PopoverRoot,
+  PopoverTitle,
+  PopoverTrigger,
+} from "../../components";
+
+describe("Popover primitives", () => {
+  it("PopoverTrigger renders with data-slot='popover-trigger'", () => {
+    render(
+      <PopoverRoot>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverPopup>Content</PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(document.querySelector('[data-slot="popover-trigger"]')).toBeTruthy();
+  });
+
+  it("PopoverPopup renders data-slot='popover-popup' when open", () => {
+    render(
+      <PopoverRoot defaultOpen>
+        <PopoverPopup>Content</PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(document.querySelector('[data-slot="popover-popup"]')).toBeTruthy();
+  });
+
+  it("PopoverPopup renders data-slot='popover-viewport' when open", () => {
+    render(
+      <PopoverRoot defaultOpen>
+        <PopoverPopup>Content</PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="popover-viewport"]'),
+    ).toBeTruthy();
+  });
+
+  it("PopoverPopup renders data-slot='popover-positioner' when open", () => {
+    render(
+      <PopoverRoot defaultOpen>
+        <PopoverPopup>Content</PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="popover-positioner"]'),
+    ).toBeTruthy();
+  });
+
+  it("PopoverTitle renders with data-slot='popover-title'", () => {
+    render(
+      <PopoverRoot defaultOpen>
+        <PopoverPopup>
+          <PopoverTitle>Title</PopoverTitle>
+        </PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(document.querySelector('[data-slot="popover-title"]')).toBeTruthy();
+  });
+
+  it("PopoverDescription renders with data-slot='popover-description'", () => {
+    render(
+      <PopoverRoot defaultOpen>
+        <PopoverPopup>
+          <PopoverDescription>Desc</PopoverDescription>
+        </PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="popover-description"]'),
+    ).toBeTruthy();
+  });
+
+  it("PopoverClose renders with data-slot='popover-close'", () => {
+    render(
+      <PopoverRoot defaultOpen>
+        <PopoverPopup>
+          <PopoverClose>Close</PopoverClose>
+        </PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(document.querySelector('[data-slot="popover-close"]')).toBeTruthy();
+  });
+});
+
+describe("Popover composite", () => {
+  it("renders children when defaultOpen", () => {
+    render(
+      <Popover defaultOpen>
+        <span data-testid="content">Content</span>
+      </Popover>,
+    );
+    expect(screen.getByTestId("content")).toBeTruthy();
+  });
+
+  it("renders title when provided", () => {
+    render(
+      <Popover defaultOpen title="My Title">
+        Content
+      </Popover>,
+    );
+    expect(screen.getByText("My Title")).toBeTruthy();
+  });
+
+  it("renders description when provided", () => {
+    render(
+      <Popover defaultOpen description="My Desc">
+        Content
+      </Popover>,
+    );
+    expect(screen.getByText("My Desc")).toBeTruthy();
+  });
+
+  it("does not render title/description wrapper when neither provided", () => {
+    render(
+      <Popover defaultOpen>
+        <span data-testid="content">Content</span>
+      </Popover>,
+    );
+    expect(
+      document.querySelector('[data-slot="popover-title"]'),
+    ).toBeNull();
+  });
+
+  it("opens on trigger click", async () => {
+    render(
+      <Popover trigger={<button>Open</button>}>
+        <span data-testid="popup-content">Hello</span>
+      </Popover>,
+    );
+    expect(screen.queryByTestId("popup-content")).toBeNull();
+    await userEvent.click(screen.getByRole("button", { name: "Open" }));
+    expect(screen.getByTestId("popup-content")).toBeTruthy();
+  });
+
+  it("applies className to popup", () => {
+    render(
+      <Popover defaultOpen className="custom-popup">
+        Content
+      </Popover>,
+    );
+    expect(document.querySelector('[data-slot="popover-popup"]')).toHaveClass(
+      "custom-popup",
+    );
+  });
+
+  it("applies classNames.viewport to viewport", () => {
+    render(
+      <Popover defaultOpen classNames={{ viewport: "custom-viewport" }}>
+        Content
+      </Popover>,
+    );
+    expect(
+      document.querySelector('[data-slot="popover-viewport"]'),
+    ).toHaveClass("custom-viewport");
+  });
+});
+
+describe("Popover exports", () => {
+  it("exports PopoverPrimitive", () => {
+    expect(PopoverPrimitive).toBeDefined();
+  });
+
+  it("exports PopoverContent as alias for PopoverPopup", () => {
+    expect(PopoverContent).toBe(PopoverPopup);
+  });
+});

package/src/components/progress/progress.test.tsx

@@ -1,6 +1,13 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { Progress } from "../../components";
+import {
+  Progress,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressRoot,
+  ProgressTrack,
+  ProgressValue,
+} from "../../components";
 
 describe("Progress component", () => {
   it("renders a progressbar", () => {
@@ -23,3 +30,97 @@ describe("Progress component", () => {
     );
   });
 });
+
+describe("Progress data-slots", () => {
+  it("renders root with data-slot='progress'", () => {
+    render(<Progress value={null} aria-label="Loading" />);
+    expect(document.querySelector('[data-slot="progress"]')).toBeTruthy();
+  });
+
+  it("renders track with data-slot='progress-track'", () => {
+    render(<Progress value={null} aria-label="Loading" />);
+    expect(document.querySelector('[data-slot="progress-track"]')).toBeTruthy();
+  });
+
+  it("renders indicator with data-slot='progress-indicator'", () => {
+    render(<Progress value={null} aria-label="Loading" />);
+    expect(
+      document.querySelector('[data-slot="progress-indicator"]'),
+    ).toBeTruthy();
+  });
+});
+
+describe("ProgressLabel", () => {
+  it("renders with data-slot='progress-label'", () => {
+    render(
+      <ProgressRoot value={null} aria-label="Loading">
+        <ProgressLabel>Loading…</ProgressLabel>
+        <ProgressTrack />
+      </ProgressRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="progress-label"]'),
+    ).toBeTruthy();
+  });
+});
+
+describe("ProgressValue", () => {
+  it("renders with data-slot='progress-value'", () => {
+    render(
+      <ProgressRoot value={50} aria-label="Loading">
+        <ProgressTrack>
+          <ProgressIndicator />
+        </ProgressTrack>
+        <ProgressValue />
+      </ProgressRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="progress-value"]'),
+    ).toBeTruthy();
+  });
+});
+
+describe("Progress size variants", () => {
+  it.each([
+    ["sm", "h-1"],
+    ["md", "h-1.5"],
+    ["lg", "h-2.5"],
+  ] as const)("size '%s' applies class '%s' to track", (size, cls) => {
+    render(<Progress value={null} size={size} aria-label="Loading" />);
+    expect(document.querySelector('[data-slot="progress-track"]')).toHaveClass(
+      cls,
+    );
+  });
+});
+
+describe("Progress indicator variants", () => {
+  it.each([
+    ["default", "bg-primary"],
+    ["success", "bg-success"],
+    ["error", "bg-error"],
+    ["warning", "bg-warning"],
+    ["info", "bg-info"],
+  ] as const)("variant '%s' applies class '%s' to indicator", (variant, cls) => {
+    render(<Progress value={null} variant={variant} aria-label="Loading" />);
+    expect(
+      document.querySelector('[data-slot="progress-indicator"]'),
+    ).toHaveClass(cls);
+  });
+});
+
+describe("Progress className", () => {
+  it("applies className to root", () => {
+    render(<Progress value={null} className="custom-root" aria-label="Loading" />);
+    expect(document.querySelector('[data-slot="progress"]')).toHaveClass(
+      "custom-root",
+    );
+  });
+});
+
+describe("Progress primitive exports", () => {
+  it("exports ProgressRoot", () => expect(ProgressRoot).toBeDefined());
+  it("exports ProgressTrack", () => expect(ProgressTrack).toBeDefined());
+  it("exports ProgressIndicator", () => expect(ProgressIndicator).toBeDefined());
+  it("exports ProgressLabel", () => expect(ProgressLabel).toBeDefined());
+  it("exports ProgressValue", () => expect(ProgressValue).toBeDefined());
+});

package/src/components/progress/progress.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
 import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";

package/src/components/radio-group/radio-group.test.tsx

@@ -0,0 +1,169 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Field } from "../../components";
+import {
+  RadioGroup,
+  RadioGroupPrimitive,
+  RadioGroupRoot,
+  RadioIndicator,
+  RadioPrimitive,
+  RadioRoot,
+} from "./radio-group";
+
+const items = [
+  { value: "a", label: "Option A" },
+  { value: "b", label: "Option B" },
+  { value: "c", label: "Option C", disabled: true },
+];
+
+describe("RadioGroup primitives", () => {
+  it("RadioGroupRoot renders with data-slot='radio-group'", () => {
+    render(<RadioGroupRoot />);
+    expect(document.querySelector('[data-slot="radio-group"]')).toBeTruthy();
+  });
+
+  it("RadioRoot renders with data-slot='radio'", () => {
+    render(
+      <RadioGroupRoot>
+        <RadioRoot value="a">
+          <RadioIndicator />
+        </RadioRoot>
+      </RadioGroupRoot>,
+    );
+    expect(document.querySelector('[data-slot="radio"]')).toBeTruthy();
+  });
+
+  it("RadioIndicator renders with data-slot='radio-indicator'", () => {
+    render(
+      <RadioGroupRoot>
+        <RadioRoot value="a">
+          <RadioIndicator keepMounted />
+        </RadioRoot>
+      </RadioGroupRoot>,
+    );
+    expect(document.querySelector('[data-slot="radio-indicator"]')).toBeTruthy();
+  });
+});
+
+describe("RadioGroup composite", () => {
+  it("renders items from items array", () => {
+    render(<RadioGroup items={items} />);
+    expect(screen.getByRole("radio", { name: "Option A" })).toBeTruthy();
+    expect(screen.getByRole("radio", { name: "Option B" })).toBeTruthy();
+  });
+
+  it("renders legend", () => {
+    render(<RadioGroup items={items} legend="Choose one" />);
+    expect(screen.getByText("Choose one")).toBeTruthy();
+  });
+
+  it("marks defaultValue as checked", () => {
+    render(<RadioGroup items={items} defaultValue="b" />);
+    expect(
+      screen.getByRole("radio", { name: "Option B" }),
+    ).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("fires onValueChange when selection changes", async () => {
+    const onValueChange = vi.fn();
+    render(<RadioGroup items={items} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole("radio", { name: "Option A" }));
+    expect(onValueChange).toHaveBeenCalledWith("a", expect.anything());
+  });
+
+  it("reflects controlled value", () => {
+    render(<RadioGroup items={items} value="a" onValueChange={vi.fn()} />);
+    expect(
+      screen.getByRole("radio", { name: "Option A" }),
+    ).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("disables specific item", () => {
+    render(<RadioGroup items={items} />);
+    expect(
+      screen.getByRole("radio", { name: "Option C" }),
+    ).toHaveAttribute("data-disabled");
+  });
+
+  it("disables all items when disabled prop is set", () => {
+    render(<RadioGroup items={items} disabled />);
+    for (const radio of screen.getAllByRole("radio")) {
+      expect(radio).toHaveAttribute("data-disabled");
+    }
+  });
+
+  it("renders children slot when items not provided", () => {
+    render(
+      <RadioGroup>
+        <RadioGroupRoot>
+          <RadioRoot value="x">
+            <RadioIndicator />
+          </RadioRoot>
+        </RadioGroupRoot>
+      </RadioGroup>,
+    );
+    expect(document.querySelector('[data-slot="radio"]')).toBeTruthy();
+  });
+});
+
+describe("RadioGroup.Item", () => {
+  it("renders with label", () => {
+    render(
+      <RadioGroupRoot>
+        <RadioGroup.Item value="x" label="My Option" />
+      </RadioGroupRoot>,
+    );
+    expect(screen.getByText("My Option")).toBeTruthy();
+  });
+
+  it("associates radio with label via htmlFor", () => {
+    render(
+      <RadioGroupRoot>
+        <RadioGroup.Item value="x" label="My Option" />
+      </RadioGroupRoot>,
+    );
+    expect(screen.getByRole("radio", { name: "My Option" })).toBeTruthy();
+  });
+});
+
+describe("RadioGroup.Legend", () => {
+  it("renders children as legend", () => {
+    render(
+      <RadioGroupRoot>
+        <RadioGroup.Legend>Group Title</RadioGroup.Legend>
+      </RadioGroupRoot>,
+    );
+    expect(screen.getByText("Group Title")).toBeTruthy();
+  });
+});
+
+describe("RadioGroup controlFirst", () => {
+  it("applies flex-row-reverse when controlFirst=false", () => {
+    render(<RadioGroup items={[{ value: "a", label: "A" }]} controlFirst={false} />);
+    const row = document.querySelector(".flex-row-reverse");
+    expect(row).toBeTruthy();
+  });
+});
+
+describe("RadioGroup Field integration", () => {
+  it("renders inside a Field without error", () => {
+    expect(() =>
+      render(
+        <Field name="preference">
+          <RadioGroup items={[{ value: "a", label: "A" }]} />
+        </Field>,
+      ),
+    ).not.toThrow();
+  });
+});
+
+describe("RadioGroup exports", () => {
+  it("exports RadioGroupPrimitive", () => {
+    expect(RadioGroupPrimitive).toBeDefined();
+  });
+
+  it("exports RadioPrimitive", () => {
+    expect(RadioPrimitive).toBeDefined();
+  });
+});

package/src/components/radio-group/radio-group.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Field as FieldBase } from "@base-ui/react/field";
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";