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

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

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();
+    });
+  });
+});