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

package/src/components/auto-complete/auto-complete.tsx

@@ -89,20 +89,18 @@ export function AutocompletePopup({
         side={side}
         sideOffset={sideOffset}
       >
-        <span
+        <AutocompletePrimitive.Popup
           className={cn(
-            "relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover shadow-lg/5 transition-[scale,opacity]",
+            "relative flex max-h-[min(var(--available-height),23rem)] min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) flex-1 flex-col rounded-lg border bg-popover text-foreground shadow-lg/5",
+            "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",
             className,
           )}
+          data-slot="autocomplete-popup"
+          {...props}
         >
-          <AutocompletePrimitive.Popup
-            className="flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground"
-            data-slot="autocomplete-popup"
-            {...props}
-          >
-            {children}
-          </AutocompletePrimitive.Popup>
-        </span>
+          {children}
+        </AutocompletePrimitive.Popup>
       </AutocompletePrimitive.Positioner>
     </AutocompletePrimitive.Portal>
   );

package/src/components/avatar/avatar.test.tsx

@@ -1,61 +1,341 @@
 import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { Avatar } from "../../components";
+import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
+import {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+  AvatarPrimitive,
+  AvatarRoot,
+} from "../../components";
 import { extractInitials } from "../../utils";
 
-describe("Avatar component", () => {
+// Base UI's Avatar uses `new window.Image()` to detect loading state, which
+// never resolves in jsdom. Mock it so a non-empty src completes synchronously
+// and Base UI's fast path (`image.complete && naturalWidth > 0`) renders the
+// underlying `<img>` immediately.
+const OriginalImage = globalThis.Image;
+beforeAll(() => {
+  class MockImage {
+    onload: (() => void) | null = null;
+    onerror: (() => void) | null = null;
+    referrerPolicy = "";
+    crossOrigin: string | null = null;
+    naturalWidth = 0;
+    complete = false;
+    set src(value: string) {
+      if (value) {
+        this.naturalWidth = 1;
+        this.complete = true;
+      }
+    }
+  }
+  vi.stubGlobal("Image", MockImage);
+});
+afterAll(() => {
+  vi.stubGlobal("Image", OriginalImage);
+});
+
+describe("Avatar composite", () => {
   const personName = "lorem ipsum";
   const imageSrc = "https://i.pravatar.cc/300";
 
-  it("renders correctly", () => {
+  it("renders the image with src and alt", () => {
     render(<Avatar alt={personName} src={imageSrc} />);
-    const image = screen.getByRole("img");
 
-    expect(image).toBeInTheDocument();
+    const image = screen.getByRole("img");
     expect(image).toHaveAttribute("alt", personName);
     expect(image).toHaveAttribute("src", imageSrc);
+    expect(image).toHaveAttribute("data-slot", "avatar-image");
   });
 
-  it("renders correctly without src", () => {
+  it("falls back to the alt initials when no src is provided", () => {
     render(<Avatar alt={personName} src="" />);
-    const nameInitials = extractInitials(personName);
 
-    const image = screen.queryByRole("img");
-    const fallbackText = screen.getByText(nameInitials);
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    expect(screen.getByText(extractInitials(personName))).toBeInTheDocument();
+  });
+
+  it("falls back to the alt initials when src is omitted", () => {
+    render(<Avatar alt={personName} />);
 
-    expect(image).not.toBeInTheDocument();
-    expect(fallbackText).toBeInTheDocument();
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    expect(screen.getByText(extractInitials(personName))).toBeInTheDocument();
   });
 
-  it("renders correctly with onError", () => {
-    render(<Avatar alt={personName} src="" />);
+  it("renders a custom fallback node when provided", () => {
+    render(<Avatar alt={personName} src="" fallback={<span>Custom</span>} />);
+
+    expect(screen.getByText("Custom")).toBeInTheDocument();
+    expect(
+      screen.queryByText(extractInitials(personName)),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders a badge when provided", () => {
+    render(<Avatar alt={personName} src={imageSrc} badge={<span>3</span>} />);
 
-    const nameInitials = extractInitials(personName);
-    const image = screen.queryByRole("img");
-    const fallbackText = screen.getByText(nameInitials);
+    const badge = document.querySelector('[data-slot="avatar-badge"]');
+    expect(badge).not.toBeNull();
+    expect(badge).toHaveTextContent("3");
+  });
+
+  it("omits the badge slot when no badge is provided", () => {
+    render(<Avatar alt={personName} src={imageSrc} />);
 
-    expect(image).not.toBeInTheDocument();
-    expect(fallbackText).toBeInTheDocument();
+    expect(document.querySelector('[data-slot="avatar-badge"]')).toBeNull();
   });
 
-  it("renders correctly with imageProps", () => {
-    const testClassName = "test-class";
+  it.each([
+    ["xs", "size-6", "text-[10px]"],
+    ["sm", "size-8", "text-xs"],
+    ["md", "size-10", "text-sm"],
+    ["lg", "size-14", "text-base"],
+    ["xl", "size-20", "text-xl"],
+  ] as const)(
+    "applies size '%s' classes and data-size attribute",
+    (size, sizeClass, textClass) => {
+      render(<Avatar alt={personName} src={imageSrc} size={size} />);
+
+      const root = document.querySelector('[data-slot="avatar"]');
+      expect(root).toHaveAttribute("data-size", size);
+      expect(root).toHaveClass(sizeClass, textClass);
+    },
+  );
+
+  it("defaults size to md when omitted", () => {
+    render(<Avatar alt={personName} src={imageSrc} />);
+
+    const root = document.querySelector('[data-slot="avatar"]');
+    expect(root).toHaveAttribute("data-size", "md");
+    expect(root).toHaveClass("size-10");
+  });
+
+  it("applies className to the root and classNames to each slot", () => {
     render(
       <Avatar
         alt={personName}
         src={imageSrc}
-        imageProps={{ className: testClassName }}
+        badge={<span>!</span>}
+        className="root-class"
+        classNames={{
+          image: "image-class",
+          fallback: "fallback-class",
+          badge: "badge-class",
+        }}
       />,
     );
 
+    expect(document.querySelector('[data-slot="avatar"]')).toHaveClass(
+      "root-class",
+    );
+    expect(document.querySelector('[data-slot="avatar-image"]')).toHaveClass(
+      "image-class",
+    );
+    expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass(
+      "badge-class",
+    );
+  });
+
+  it("applies classNames.fallback when the image is absent", () => {
+    render(
+      <Avatar
+        alt={personName}
+        src=""
+        classNames={{ fallback: "fallback-class" }}
+      />,
+    );
+
+    expect(document.querySelector('[data-slot="avatar-fallback"]')).toHaveClass(
+      "fallback-class",
+    );
+  });
+
+  it("forwards the delay prop to the underlying Fallback", () => {
+    // With a delay, Base UI defers rendering the fallback. Asserting that the
+    // fallback is absent right after mount proves the prop is being honored.
+    render(<Avatar alt={personName} src="" delay={500} />);
+
+    expect(
+      document.querySelector('[data-slot="avatar-fallback"]'),
+    ).toBeNull();
+  });
+
+  it("spreads extra props onto the AvatarRoot element", () => {
+    render(
+      <Avatar
+        alt={personName}
+        src={imageSrc}
+        data-testid="composite-root"
+        aria-label="user avatar"
+      />,
+    );
+
+    const root = screen.getByTestId("composite-root");
+    expect(root).toHaveAttribute("data-slot", "avatar");
+    expect(root).toHaveAttribute("aria-label", "user avatar");
+  });
+});
+
+describe("Avatar primitives", () => {
+  it("composes Root, Image, and Fallback directly", () => {
+    render(
+      <AvatarRoot>
+        <AvatarImage src="https://i.pravatar.cc/300" alt="user" />
+        <AvatarFallback>U</AvatarFallback>
+      </AvatarRoot>,
+    );
+
+    expect(screen.getByRole("img")).toHaveAttribute("alt", "user");
+  });
+
+  it("renders the Fallback when no Image is provided", () => {
+    render(
+      <AvatarRoot>
+        <AvatarFallback>FB</AvatarFallback>
+      </AvatarRoot>,
+    );
+
+    expect(screen.getByText("FB")).toBeInTheDocument();
+  });
+
+  it("merges custom className onto AvatarRoot alongside variant classes", () => {
+    render(
+      <AvatarRoot size="lg" className="ring-custom">
+        <AvatarFallback>L</AvatarFallback>
+      </AvatarRoot>,
+    );
+
+    const root = document.querySelector('[data-slot="avatar"]');
+    expect(root).toHaveClass("ring-custom", "size-14");
+    expect(root).toHaveAttribute("data-size", "lg");
+  });
+
+  it("applies the base image classes to AvatarImage", () => {
+    render(
+      <AvatarRoot>
+        <AvatarImage src="https://i.pravatar.cc/300" alt="user" />
+        <AvatarFallback>U</AvatarFallback>
+      </AvatarRoot>,
+    );
+
     const image = screen.getByRole("img");
-    expect(image).toHaveClass(testClassName);
+    expect(image).toHaveClass("size-full", "rounded-full", "object-cover");
   });
 
-  it("renders correctly with size variants", () => {
-    render(<Avatar alt={personName} src={imageSrc} size="sm" />);
-    const avatar = screen.getByRole("img").parentElement;
+  it("merges custom className onto AvatarFallback alongside base classes", () => {
+    render(
+      <AvatarRoot>
+        <AvatarFallback className="text-emerald-500">U</AvatarFallback>
+      </AvatarRoot>,
+    );
+
+    const fallback = document.querySelector('[data-slot="avatar-fallback"]');
+    expect(fallback).toHaveClass("text-emerald-500", "rounded-full");
+  });
+
+  it("renders AvatarBadge as an absolutely positioned slot", () => {
+    render(
+      <AvatarRoot>
+        <AvatarFallback>U</AvatarFallback>
+        <AvatarBadge>1</AvatarBadge>
+      </AvatarRoot>,
+    );
+
+    const badge = document.querySelector('[data-slot="avatar-badge"]');
+    expect(badge).toHaveTextContent("1");
+    expect(badge).toHaveClass("absolute");
+  });
+
+  it("applies size-scoped badge classes for every avatar size", () => {
+    render(
+      <AvatarRoot size="xl">
+        <AvatarFallback>X</AvatarFallback>
+        <AvatarBadge>!</AvatarBadge>
+      </AvatarRoot>,
+    );
+
+    const badge = document.querySelector('[data-slot="avatar-badge"]');
+    expect(badge).toHaveClass(
+      "group-data-[size=xl]/avatar:size-4",
+      "group-data-[size=xl]/avatar:[&>svg]:size-3",
+    );
+  });
+
+  it("merges custom className onto AvatarBadge", () => {
+    render(
+      <AvatarRoot>
+        <AvatarFallback>U</AvatarFallback>
+        <AvatarBadge className="bg-red-500">!</AvatarBadge>
+      </AvatarRoot>,
+    );
+
+    const badge = document.querySelector('[data-slot="avatar-badge"]');
+    expect(badge).toHaveClass("bg-red-500", "absolute");
+  });
+
+  it("renders AvatarGroup wrapping multiple avatars", () => {
+    render(
+      <AvatarGroup data-testid="group">
+        <AvatarRoot>
+          <AvatarFallback>A</AvatarFallback>
+        </AvatarRoot>
+        <AvatarRoot>
+          <AvatarFallback>B</AvatarFallback>
+        </AvatarRoot>
+      </AvatarGroup>,
+    );
+
+    const group = screen.getByTestId("group");
+    expect(group).toHaveAttribute("data-slot", "avatar-group");
+    expect(group.querySelectorAll('[data-slot="avatar"]')).toHaveLength(2);
+  });
+
+  it("merges custom className onto AvatarGroup alongside base classes", () => {
+    render(
+      <AvatarGroup data-testid="group" className="gap-4">
+        <AvatarRoot>
+          <AvatarFallback>A</AvatarFallback>
+        </AvatarRoot>
+      </AvatarGroup>,
+    );
+
+    const group = screen.getByTestId("group");
+    expect(group).toHaveClass("gap-4", "flex");
+  });
+
+  it("renders AvatarGroupCount with the chosen size", () => {
+    render(<AvatarGroupCount size="lg">+3</AvatarGroupCount>);
+
+    const count = document.querySelector('[data-slot="avatar-group-count"]');
+    expect(count).toHaveTextContent("+3");
+    expect(count).toHaveClass("size-14");
+  });
+
+  it("defaults AvatarGroupCount size to md when omitted", () => {
+    render(<AvatarGroupCount>+9</AvatarGroupCount>);
+
+    const count = document.querySelector('[data-slot="avatar-group-count"]');
+    expect(count).toHaveClass("size-10", "text-sm");
+  });
+
+  it("merges custom className onto AvatarGroupCount alongside variant classes", () => {
+    render(
+      <AvatarGroupCount size="sm" className="bg-blue-500">
+        +1
+      </AvatarGroupCount>,
+    );
+
+    const count = document.querySelector('[data-slot="avatar-group-count"]');
+    expect(count).toHaveClass("bg-blue-500", "size-8");
+  });
 
-    expect(avatar).toHaveClass("w-8 h-8");
+  it("exposes the Base UI namespace via AvatarPrimitive", () => {
+    expect(AvatarPrimitive).toBeDefined();
+    expect(AvatarPrimitive.Root).toBeDefined();
+    expect(AvatarPrimitive.Image).toBeDefined();
+    expect(AvatarPrimitive.Fallback).toBeDefined();
   });
 });

package/src/components/avatar/avatar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 import { cva, type VariantProps } from "class-variance-authority";
 import { type ComponentProps, type ReactNode } from "react";

package/src/components/button/button.test.tsx

@@ -1,7 +1,8 @@
-import { render, screen } from "@testing-library/react";
-import { createRef } from "react";
-import { describe, expect, it } from "vitest";
-import { Button } from "../../components";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createRef, useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { BaseButton, Button } from "../../components";
 
 describe("Button component", () => {
   it("should render correctly", () => {
@@ -9,6 +10,7 @@ describe("Button component", () => {
     const button = screen.getByRole("button");
 
     expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute("data-slot", "button");
   });
 
   it("should render children correctly", () => {
@@ -19,21 +21,25 @@ describe("Button component", () => {
   });
 
   it("should render as custom element via render prop", () => {
-    render(<Button render={<a href="#">Click me</a>}>Click me</Button>);
+    render(
+      <Button nativeButton={false} render={<a href="#">Click me</a>}>
+        Click me
+      </Button>,
+    );
 
-    // Base UI always applies role="button" even on custom elements
     const button = screen.getByRole("button");
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent("Click me");
     expect(button.tagName.toLowerCase()).toBe("a");
   });
 
-  it("should accept className prop", () => {
+  it("should accept className prop alongside variant classes", () => {
     const TEST_CLASS = "lorem";
     render(<Button className={TEST_CLASS} />);
     const button = screen.getByRole("button");
 
     expect(button).toHaveClass(TEST_CLASS);
+    expect(button).toHaveClass("inline-flex");
   });
 
   it("should accept ref prop", () => {
@@ -44,8 +50,198 @@ describe("Button component", () => {
     expect(ref.current).toBeInstanceOf(HTMLButtonElement);
   });
 
-  it("should set data-loading when loading", () => {
-    render(<Button loading />);
-    expect(screen.getByRole("button")).toHaveAttribute("data-loading");
+  it("defaults variant to 'default' on data-variant when omitted", () => {
+    render(<Button />);
+    const button = screen.getByRole("button");
+
+    expect(button).toHaveAttribute("data-variant", "default");
+    expect(button).toHaveClass("bg-primary");
+  });
+
+  it.each([
+    ["default", "bg-primary"],
+    ["outline", "border-border"],
+    ["secondary", "bg-secondary"],
+    ["ghost", "hover:bg-muted"],
+    ["error", "bg-error"],
+    ["success", "bg-success"],
+    ["warning", "bg-warning"],
+    ["link", "text-primary"],
+  ] as const)(
+    "applies variant '%s' classes and data-variant attribute",
+    (variant, expectedClass) => {
+      render(<Button variant={variant} />);
+      const button = screen.getByRole("button");
+
+      expect(button).toHaveAttribute("data-variant", variant);
+      expect(button).toHaveClass(expectedClass);
+    },
+  );
+
+  it.each([
+    ["default", "h-8"],
+    ["xs", "h-6"],
+    ["sm", "h-7"],
+    ["lg", "h-9"],
+    ["icon", "size-8"],
+    ["icon-xs", "size-6"],
+    ["icon-sm", "size-7"],
+    ["icon-lg", "size-9"],
+  ] as const)("applies size '%s' classes", (size, expectedClass) => {
+    render(<Button size={size} />);
+    const button = screen.getByRole("button");
+
+    expect(button).toHaveClass(expectedClass);
+  });
+});
+
+describe("BaseButton loading behavior", () => {
+  it("should set data-loading and aria-busy when loading is true", () => {
+    render(<BaseButton loading>Click me</BaseButton>);
+    const button = screen.getByRole("button");
+
+    expect(button).toHaveAttribute("data-loading");
+    expect(button).toHaveAttribute("aria-busy", "true");
+    expect(screen.getByTestId("btn-loader")).toBeInTheDocument();
+  });
+
+  it("should omit data-loading and aria-busy when loading is false", () => {
+    render(<BaseButton loading={false}>Click me</BaseButton>);
+    const button = screen.getByRole("button");
+
+    expect(button).not.toHaveAttribute("data-loading");
+    expect(button).not.toHaveAttribute("aria-busy");
+    expect(screen.queryByTestId("btn-loader")).not.toBeInTheDocument();
+  });
+
+  it("invokes a synchronous onClick handler on click", async () => {
+    const onClick = vi.fn();
+    render(<BaseButton onClick={onClick}>Click me</BaseButton>);
+
+    await userEvent.click(screen.getByRole("button"));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not blow up on click when onClick is not provided", async () => {
+    render(<BaseButton>Click me</BaseButton>);
+
+    await userEvent.click(screen.getByRole("button"));
+
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("toggles internal loading state across an async onClick lifecycle", async () => {
+    let resolve!: () => void;
+    const onClick = vi.fn(
+      () =>
+        new Promise<void>((res) => {
+          resolve = res;
+        }),
+    );
+
+    render(<BaseButton onClick={onClick}>Click me</BaseButton>);
+    const button = screen.getByRole("button");
+
+    await userEvent.click(button);
+
+    await waitFor(() => {
+      expect(button).toHaveAttribute("data-loading");
+    });
+    expect(button).toHaveAttribute("aria-busy", "true");
+    expect(screen.getByTestId("btn-loader")).toBeInTheDocument();
+
+    await act(async () => {
+      resolve();
+    });
+
+    await waitFor(() => {
+      expect(button).not.toHaveAttribute("data-loading");
+    });
+    expect(screen.queryByTestId("btn-loader")).not.toBeInTheDocument();
+  });
+
+  it("clears loading state even when the onClick promise rejects", async () => {
+    // The component re-throws via `await promise.finally(...)`, so the
+    // rejection escapes as an unhandled rejection on the Node process. Swallow
+    // the expected one for the duration of this test only.
+    const onUnhandled = (err: unknown) => {
+      if (err instanceof Error && err.message === "boom") return;
+      throw err;
+    };
+    process.on("unhandledRejection", onUnhandled);
+
+    const onClick = vi.fn(() => Promise.reject(new Error("boom")));
+    render(<BaseButton onClick={onClick}>Click me</BaseButton>);
+    const button = screen.getByRole("button");
+
+    try {
+      await userEvent.click(button);
+
+      await waitFor(() => {
+        expect(button).not.toHaveAttribute("data-loading");
+      });
+      expect(onClick).toHaveBeenCalledTimes(1);
+    } finally {
+      process.off("unhandledRejection", onUnhandled);
+    }
+  });
+
+  it("ignores clicks while already loading", async () => {
+    const onClick = vi.fn();
+    render(
+      <BaseButton loading onClick={onClick}>
+        Click me
+      </BaseButton>,
+    );
+
+    await userEvent.click(screen.getByRole("button"));
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("respects controlled loading state from parent", async () => {
+    function Wrapper() {
+      const [loading, setLoading] = useState(false);
+      return (
+        <>
+          <BaseButton loading={loading}>Action</BaseButton>
+          <button type="button" onClick={() => setLoading(true)}>
+            toggle
+          </button>
+        </>
+      );
+    }
+
+    render(<Wrapper />);
+    const action = screen.getByRole("button", { name: "Action" });
+
+    expect(action).not.toHaveAttribute("data-loading");
+
+    await userEvent.click(screen.getByRole("button", { name: "toggle" }));
+
+    expect(action).toHaveAttribute("data-loading");
+    expect(screen.getByTestId("btn-loader")).toBeInTheDocument();
+  });
+
+  it("hides the content wrapper while loading via CSS hook", () => {
+    render(<BaseButton loading>Visible label</BaseButton>);
+
+    const content = screen
+      .getByRole("button")
+      .querySelector("[data-content]");
+    expect(content).not.toBeNull();
+    expect(content).toHaveTextContent("Visible label");
+  });
+
+  it("forwards style and arbitrary props to the underlying button", () => {
+    render(
+      <BaseButton style={{ color: "rgb(0, 128, 0)" }} data-testid="bb">
+        Styled
+      </BaseButton>,
+    );
+
+    const button = screen.getByTestId("bb");
+    expect(button).toHaveStyle({ color: "rgb(0, 128, 0)" });
   });
 });

package/src/components/button/button.tsx

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

package/src/components/button/components/base-button.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { LoaderCircle } from "lucide-react";