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

package/src/components/scroll-area/scroll-area.test.tsx

@@ -0,0 +1,140 @@
+import { act, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ScrollArea, ScrollAreaPrimitive, ScrollBar } from "../../components";
+
+async function renderAndFlush(ui: React.ReactElement) {
+  let result: ReturnType<typeof render>;
+  await act(async () => {
+    result = render(ui);
+  });
+  return result!;
+}
+
+describe("ScrollArea", () => {
+  describe("rendering", () => {
+    it("renders children", async () => {
+      await renderAndFlush(
+        <ScrollArea>
+          <p data-testid="content">Content</p>
+        </ScrollArea>,
+      );
+      expect(screen.getByTestId("content")).toBeTruthy();
+    });
+
+    it("renders viewport with data-slot='scroll-area-viewport'", async () => {
+      await renderAndFlush(<ScrollArea />);
+      expect(
+        document.querySelector('[data-slot="scroll-area-viewport"]'),
+      ).toBeTruthy();
+    });
+  });
+
+  describe("props", () => {
+    it("applies className to root element", async () => {
+      const { container } = await renderAndFlush(
+        <ScrollArea className="custom-root" />,
+      );
+      expect(container.firstChild).toHaveClass("custom-root");
+    });
+
+    it("scrollFade adds fade classes to viewport", async () => {
+      await renderAndFlush(<ScrollArea scrollFade />);
+      const viewport = document.querySelector(
+        '[data-slot="scroll-area-viewport"]',
+      );
+      expect(viewport?.className).toContain("--fade-size");
+    });
+
+    it("scrollbarGutter adds gutter classes to viewport", async () => {
+      await renderAndFlush(<ScrollArea scrollbarGutter />);
+      const viewport = document.querySelector(
+        '[data-slot="scroll-area-viewport"]',
+      );
+      expect(viewport?.className).toContain("pe-2.5");
+    });
+
+    it("does not apply fade classes when scrollFade=false", async () => {
+      await renderAndFlush(<ScrollArea scrollFade={false} />);
+      const viewport = document.querySelector(
+        '[data-slot="scroll-area-viewport"]',
+      );
+      expect(viewport?.className).not.toContain("--fade-size");
+    });
+  });
+
+  describe("ScrollBar", () => {
+    // Base UI Scrollbar only renders when overflow is detected or keepMounted is set.
+    // Use keepMounted (passed through ...props) to force rendering in JSDOM.
+
+    it("renders with data-slot='scroll-area-scrollbar'", async () => {
+      await act(async () => {
+        render(
+          <ScrollAreaPrimitive.Root>
+            <ScrollBar keepMounted />
+          </ScrollAreaPrimitive.Root>,
+        );
+      });
+      expect(
+        document.querySelector('[data-slot="scroll-area-scrollbar"]'),
+      ).toBeTruthy();
+    });
+
+    it("renders thumb with data-slot='scroll-area-thumb'", async () => {
+      await act(async () => {
+        render(
+          <ScrollAreaPrimitive.Root>
+            <ScrollBar keepMounted />
+          </ScrollAreaPrimitive.Root>,
+        );
+      });
+      expect(
+        document.querySelector('[data-slot="scroll-area-thumb"]'),
+      ).toBeTruthy();
+    });
+
+    it("renders with vertical orientation by default", async () => {
+      await act(async () => {
+        render(
+          <ScrollAreaPrimitive.Root>
+            <ScrollBar keepMounted />
+          </ScrollAreaPrimitive.Root>,
+        );
+      });
+      expect(
+        document.querySelector('[data-slot="scroll-area-scrollbar"]'),
+      ).toHaveAttribute("data-orientation", "vertical");
+    });
+
+    it("renders horizontal scrollbar when orientation='horizontal'", async () => {
+      await act(async () => {
+        render(
+          <ScrollAreaPrimitive.Root>
+            <ScrollBar orientation="horizontal" keepMounted />
+          </ScrollAreaPrimitive.Root>,
+        );
+      });
+      expect(
+        document.querySelector('[data-slot="scroll-area-scrollbar"]'),
+      ).toHaveAttribute("data-orientation", "horizontal");
+    });
+
+    it("applies className to scrollbar", async () => {
+      await act(async () => {
+        render(
+          <ScrollAreaPrimitive.Root>
+            <ScrollBar keepMounted className="custom-scrollbar" />
+          </ScrollAreaPrimitive.Root>,
+        );
+      });
+      expect(
+        document.querySelector('[data-slot="scroll-area-scrollbar"]'),
+      ).toHaveClass("custom-scrollbar");
+    });
+  });
+
+  describe("exports", () => {
+    it("exports ScrollAreaPrimitive", () => {
+      expect(ScrollAreaPrimitive).toBeDefined();
+    });
+  });
+});

package/src/components/select/select.test.tsx

@@ -0,0 +1,357 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import {
+  Select,
+  SelectButton,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectLabel,
+  SelectPopup,
+  SelectRoot,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+// ─── helpers ──────────────────────────────────────────────────────────────────
+
+const fruits = [
+  { id: "1", name: "Apple" },
+  { id: "2", name: "Banana" },
+  { id: "3", name: "Cherry" },
+];
+
+function slot(name: string) {
+  return document.querySelector(`[data-slot="${name}"]`);
+}
+
+// ─── Primitives: data-slot ────────────────────────────────────────────────────
+
+describe("Select primitives — data-slots", () => {
+  it("SelectTrigger renders data-slot=select-trigger", () => {
+    render(
+      <SelectRoot>
+        <SelectTrigger />
+      </SelectRoot>,
+    );
+    expect(slot("select-trigger")).toBeInTheDocument();
+  });
+
+  it("SelectValue renders data-slot=select-value", () => {
+    render(
+      <SelectRoot>
+        <SelectTrigger>
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+      </SelectRoot>,
+    );
+    expect(slot("select-value")).toBeInTheDocument();
+  });
+
+  it("SelectButton renders data-slot=select-button with type=button by default", () => {
+    render(<SelectRoot><SelectButton>Open</SelectButton></SelectRoot>);
+    const btn = slot("select-button") as HTMLButtonElement;
+    expect(btn).toBeInTheDocument();
+    expect(btn.type).toBe("button");
+  });
+
+  it("SelectButton omits type when render prop is provided", () => {
+    render(
+      <SelectRoot>
+        <SelectButton render={<div data-testid="custom-render" />} />
+      </SelectRoot>,
+    );
+    expect(screen.getByTestId("custom-render")).toBeInTheDocument();
+  });
+
+  it("SelectLabel renders data-slot=select-label", () => {
+    render(
+      <SelectRoot>
+        <SelectLabel>Label</SelectLabel>
+        <SelectTrigger />
+      </SelectRoot>,
+    );
+    expect(slot("select-label")).toHaveTextContent("Label");
+  });
+
+  it("SelectSeparator renders data-slot=select-separator", () => {
+    render(
+      <SelectRoot defaultOpen>
+        <SelectTrigger />
+        <SelectPopup>
+          <SelectItem value="a">A</SelectItem>
+          <SelectSeparator className="sep-cls" />
+          <SelectItem value="b">B</SelectItem>
+        </SelectPopup>
+      </SelectRoot>,
+    );
+    const sep = slot("select-separator");
+    expect(sep).toBeInTheDocument();
+    expect(sep).toHaveClass("sep-cls");
+  });
+
+  it("SelectGroup renders data-slot=select-group", () => {
+    render(
+      <SelectRoot defaultOpen>
+        <SelectTrigger />
+        <SelectPopup>
+          <SelectGroup className="grp">
+            <SelectGroupLabel>Fruits</SelectGroupLabel>
+            <SelectItem value="a">A</SelectItem>
+          </SelectGroup>
+        </SelectPopup>
+      </SelectRoot>,
+    );
+    expect(slot("select-group")).toHaveClass("grp");
+    expect(slot("select-group-label")).toHaveTextContent("Fruits");
+  });
+
+  it("SelectItem renders data-slot=select-item", () => {
+    render(
+      <SelectRoot defaultOpen>
+        <SelectTrigger />
+        <SelectPopup>
+          <SelectItem value="apple">Apple</SelectItem>
+        </SelectPopup>
+      </SelectRoot>,
+    );
+    expect(slot("select-item")).toBeInTheDocument();
+  });
+
+  it("SelectTrigger merges className", () => {
+    render(
+      <SelectRoot>
+        <SelectTrigger className="custom-trigger" />
+      </SelectRoot>,
+    );
+    expect(slot("select-trigger")).toHaveClass("custom-trigger");
+  });
+});
+
+// ─── Composite Select — rendering ─────────────────────────────────────────────
+
+describe("Select composite — rendering", () => {
+  it("renders trigger with data-slot=select-trigger", () => {
+    render(<Select items={fruits} />);
+    expect(slot("select-trigger")).toBeInTheDocument();
+  });
+
+  it("shows placeholder in the trigger", () => {
+    render(<Select items={fruits} placeholder="Pick a fruit" />);
+    expect(slot("select-trigger")).toHaveTextContent("Pick a fruit");
+  });
+
+  it("shows items in popup when defaultOpen", () => {
+    render(<Select items={fruits} defaultOpen />);
+    const options = screen.getAllByRole("option");
+    expect(options.map((o) => o.textContent)).toContain("Apple");
+    expect(options).toHaveLength(fruits.length);
+  });
+
+  it("uses renderItem to customize item content", () => {
+    render(
+      <Select
+        items={fruits}
+        defaultOpen
+        renderItem={(item) => (
+          <span data-testid="custom-item">{item.name}!</span>
+        )}
+      />,
+    );
+    const custom = screen.getAllByTestId("custom-item");
+    expect(custom[0]).toHaveTextContent("Apple!");
+  });
+
+  it("applies classNames.popup and classNames.item", () => {
+    render(
+      <Select
+        items={fruits}
+        defaultOpen
+        classNames={{ popup: "popup-cls", item: "item-cls" }}
+      />,
+    );
+    expect(slot("select-list")).toHaveClass("popup-cls");
+    expect(slot("select-item")).toHaveClass("item-cls");
+  });
+
+  it("applies className to the trigger", () => {
+    render(<Select items={fruits} className="trigger-cls" />);
+    expect(slot("select-trigger")).toHaveClass("trigger-cls");
+  });
+});
+
+// ─── Composite Select — item shape defaults ───────────────────────────────────
+
+describe("Select defaultGetLabel / defaultGetId", () => {
+  it("handles { id, name } items", () => {
+    render(<Select items={fruits} defaultOpen />);
+    expect(screen.getByRole("option", { name: "Apple" })).toBeInTheDocument();
+  });
+
+  it("handles { label, value } items", () => {
+    const opts = [
+      { label: "One", value: "1" },
+      { label: "Two", value: "2" },
+    ];
+    render(<Select items={opts} defaultOpen />);
+    expect(screen.getByRole("option", { name: "One" })).toBeInTheDocument();
+  });
+
+  it("handles { title } items", () => {
+    const opts = [{ title: "Alpha" }, { title: "Beta" }];
+    render(<Select items={opts} defaultOpen />);
+    expect(screen.getByRole("option", { name: "Alpha" })).toBeInTheDocument();
+  });
+
+  it("handles plain string items", () => {
+    render(<Select items={["x", "y", "z"]} defaultOpen />);
+    expect(screen.getByRole("option", { name: "x" })).toBeInTheDocument();
+  });
+
+  it("handles plain number items", () => {
+    render(<Select items={[1, 2, 3]} defaultOpen />);
+    expect(screen.getByRole("option", { name: "1" })).toBeInTheDocument();
+  });
+
+  it("falls back to String(item) for objects without known keys", () => {
+    const weird = [{ foo: "bar" }];
+    render(<Select items={weird} defaultOpen />);
+    const options = screen.getAllByRole("option");
+    expect(options).toHaveLength(1);
+  });
+
+  it("respects custom getLabel and getId", () => {
+    const opts = [
+      { code: "AR", country: "Argentina" },
+      { code: "BR", country: "Brazil" },
+    ];
+    render(
+      <Select
+        items={opts}
+        defaultOpen
+        getLabel={(o) => o.country}
+        getId={(o) => o.code}
+      />,
+    );
+    expect(screen.getByRole("option", { name: "Argentina" })).toBeInTheDocument();
+  });
+});
+
+// ─── Composite Select — disabled ──────────────────────────────────────────────
+
+describe("Select disabled items", () => {
+  it("disables items via default getDisabled (item.disabled=true)", () => {
+    const items = [
+      { id: "1", name: "Active" },
+      { id: "2", name: "Disabled", disabled: true },
+    ];
+    render(<Select items={items} defaultOpen />);
+    const disabledItem = document.querySelector(
+      '[data-slot="select-item"][data-disabled]',
+    );
+    expect(disabledItem).toBeInTheDocument();
+  });
+
+  it("uses custom getDisabled", () => {
+    const items = [
+      { id: "1", name: "Active", blocked: false },
+      { id: "2", name: "Blocked", blocked: true },
+    ];
+    render(
+      <Select
+        items={items}
+        defaultOpen
+        getDisabled={(item) => item.blocked}
+      />,
+    );
+    expect(
+      document.querySelector('[data-slot="select-item"][data-disabled]'),
+    ).toBeInTheDocument();
+  });
+});
+
+// ─── Composite Select — value / onChange ─────────────────────────────────────
+
+describe("Select onValueChange", () => {
+  it("fires onValueChange with selected item object (single)", async () => {
+    const onChange = vi.fn();
+    render(
+      <Select items={fruits} defaultOpen onValueChange={onChange} />,
+    );
+
+    await userEvent.click(screen.getByRole("option", { name: "Banana" }));
+
+    expect(onChange).toHaveBeenCalledOnce();
+    expect(onChange.mock.calls[0][0]).toEqual({ id: "2", name: "Banana" });
+  });
+
+  it("accepts null as a controlled value without crashing", () => {
+    // The null branch in handleChange fires when Base UI passes null (e.g. programmatic
+    // clear). The composite does not expose a clear control, so we verify the component
+    // is stable with value={null} (the internal path is guarded against missing items).
+    expect(() =>
+      render(<Select items={fruits} value={null} onValueChange={vi.fn()} />),
+    ).not.toThrow();
+    expect(slot("select-trigger")).toBeInTheDocument();
+  });
+
+  it("fires onValueChange with array of items (multiple mode)", async () => {
+    const onChange = vi.fn();
+    render(
+      <Select
+        multiple
+        items={fruits}
+        defaultOpen
+        defaultValue={[]}
+        onValueChange={onChange}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole("option", { name: "Apple" }));
+
+    expect(onChange).toHaveBeenCalledOnce();
+    expect(onChange.mock.calls[0][0]).toEqual([fruits[0]]);
+  });
+
+  it("maps multiple selection back to item objects", async () => {
+    const onChange = vi.fn();
+    render(
+      <Select
+        multiple
+        items={fruits}
+        defaultOpen
+        defaultValue={[fruits[0]]}
+        onValueChange={onChange}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole("option", { name: "Banana" }));
+
+    expect(onChange).toHaveBeenCalled();
+    const selected: typeof fruits = onChange.mock.calls[0][0];
+    expect(selected.some((i) => i.name === "Banana")).toBe(true);
+  });
+});
+
+// ─── Composite Select — controlled value ─────────────────────────────────────
+
+describe("Select controlled value", () => {
+  it("reflects a controlled single value", () => {
+    render(<Select items={fruits} value={fruits[1]} />);
+    expect(slot("select-trigger")).toHaveTextContent("Banana");
+  });
+
+  it("reflects a controlled multiple value", () => {
+    render(
+      <Select multiple items={fruits} defaultValue={[fruits[0], fruits[2]]} />,
+    );
+    expect(slot("select-trigger")).toBeInTheDocument();
+  });
+
+  it("uses defaultValue for uncontrolled single", () => {
+    render(<Select items={fruits} defaultValue={fruits[2]} />);
+    expect(slot("select-trigger")).toHaveTextContent("Cherry");
+  });
+});

package/src/components/select/select.tsx

@@ -140,7 +140,7 @@ export function SelectPopup({
         sideOffset={sideOffset}
       >
         <SelectPrimitive.Popup
-          className="origin-(--transform-origin) text-foreground outline-none"
+          className="origin-(--transform-origin) text-foreground outline-none duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2"
           data-slot="select-popup"
           {...props}
         >

package/src/components/skeleton/skeleton.test.tsx

@@ -2,6 +2,8 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import { Skeleton } from "../../components";
 
+// ── New coverage ──────────────────────────────────────────────────────────────
+
 describe("Skeleton component", () => {
   const testId = "skeleton";
 
@@ -12,3 +14,38 @@ describe("Skeleton component", () => {
     expect(skeleton).toBeInTheDocument();
   });
 });
+
+describe("Skeleton", () => {
+  it("renders with data-slot='skeleton'", () => {
+    render(<Skeleton />);
+    expect(document.querySelector('[data-slot="skeleton"]')).toBeTruthy();
+  });
+
+  it("applies className", () => {
+    render(<Skeleton className="custom-cls" />);
+    expect(document.querySelector('[data-slot="skeleton"]')).toHaveClass(
+      "custom-cls",
+    );
+  });
+
+  it("renders children", () => {
+    render(
+      <Skeleton>
+        <span data-testid="child">loading</span>
+      </Skeleton>,
+    );
+    expect(screen.getByTestId("child")).toBeTruthy();
+  });
+
+  it("applies animate-skeleton class", () => {
+    render(<Skeleton />);
+    expect(document.querySelector('[data-slot="skeleton"]')).toHaveClass(
+      "animate-skeleton",
+    );
+  });
+
+  it("forwards additional props to div", () => {
+    render(<Skeleton aria-label="loading" data-testid="sk" />);
+    expect(screen.getByTestId("sk")).toHaveAttribute("aria-label", "loading");
+  });
+});

package/src/components/skeleton/skeleton.tsx

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

package/src/components/stack/stack.test.tsx

@@ -0,0 +1,134 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Stack } from "../../components";
+
+describe("Stack", () => {
+  describe("rendering", () => {
+    it("renders with data-slot='stack'", () => {
+      render(<Stack />);
+      expect(document.querySelector('[data-slot="stack"]')).toBeTruthy();
+    });
+
+    it("renders children", () => {
+      render(
+        <Stack>
+          <span data-testid="child">hello</span>
+        </Stack>,
+      );
+      expect(screen.getByTestId("child")).toBeTruthy();
+    });
+
+    it("renders as div by default", () => {
+      const { container } = render(<Stack />);
+      expect(container.firstChild?.nodeName).toBe("DIV");
+    });
+  });
+
+  describe("as prop", () => {
+    it("renders as custom element type", () => {
+      const { container } = render(<Stack as="section" />);
+      expect(container.firstChild?.nodeName).toBe("SECTION");
+    });
+  });
+
+  describe("inline prop", () => {
+    it("uses flex by default", () => {
+      render(<Stack />);
+      expect(document.querySelector('[data-slot="stack"]')).toHaveClass("flex");
+    });
+
+    it("uses inline-flex when inline=true", () => {
+      render(<Stack inline />);
+      expect(document.querySelector('[data-slot="stack"]')).toHaveClass(
+        "inline-flex",
+      );
+    });
+  });
+
+  describe("grow prop", () => {
+    it("applies flex-1 when grow=true", () => {
+      render(<Stack grow />);
+      expect(document.querySelector('[data-slot="stack"]')).toHaveClass(
+        "flex-1",
+      );
+    });
+
+    it("does not apply flex-1 by default", () => {
+      render(<Stack />);
+      expect(document.querySelector('[data-slot="stack"]')).not.toHaveClass(
+        "flex-1",
+      );
+    });
+  });
+
+  describe("direction prop", () => {
+    it("sets flexDirection to row by default", () => {
+      render(<Stack />);
+      expect(document.querySelector('[data-slot="stack"]')).toHaveStyle(
+        "flex-direction: row",
+      );
+    });
+
+    it("sets flexDirection to column when vertical", () => {
+      render(<Stack direction="vertical" />);
+      expect(document.querySelector('[data-slot="stack"]')).toHaveStyle(
+        "flex-direction: column",
+      );
+    });
+  });
+
+  describe("reverse prop", () => {
+    it("sets flexDirection to row-reverse when reverse=true", () => {
+      render(<Stack reverse />);
+      expect(document.querySelector('[data-slot="stack"]')).toHaveStyle(
+        "flex-direction: row-reverse",
+      );
+    });
+
+    it("sets flexDirection to column-reverse when vertical+reverse", () => {
+      render(<Stack direction="vertical" reverse />);
+      expect(document.querySelector('[data-slot="stack"]')).toHaveStyle(
+        "flex-direction: column-reverse",
+      );
+    });
+  });
+
+  describe("style props", () => {
+    it("sets justifyContent from justify prop", () => {
+      render(<Stack justify="center" />);
+      expect(document.querySelector('[data-slot="stack"]')).toHaveStyle(
+        "justify-content: center",
+      );
+    });
+
+    it("sets alignItems from align prop", () => {
+      render(<Stack align="flex-end" />);
+      expect(document.querySelector('[data-slot="stack"]')).toHaveStyle(
+        "align-items: flex-end",
+      );
+    });
+
+    it("sets flexWrap to wrap when wrap=true", () => {
+      render(<Stack wrap />);
+      expect(document.querySelector('[data-slot="stack"]')).toHaveStyle(
+        "flex-wrap: wrap",
+      );
+    });
+
+    it("sets custom gap value", () => {
+      render(<Stack gap={16} />);
+      expect(document.querySelector('[data-slot="stack"]')).toHaveStyle(
+        "gap: 16px",
+      );
+    });
+  });
+
+  describe("className", () => {
+    it("applies className", () => {
+      render(<Stack className="custom-stack" />);
+      expect(document.querySelector('[data-slot="stack"]')).toHaveClass(
+        "custom-stack",
+      );
+    });
+  });
+});