@boxcustodia/library 2.0.0-alpha.18 → 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

@@ -48,6 +48,7 @@ describe("Avatar composite", () => {
     const image = screen.getByRole("img");
     expect(image).toHaveAttribute("alt", personName);
     expect(image).toHaveAttribute("src", imageSrc);
+    expect(image).toHaveAttribute("data-slot", "avatar-image");
   });
 
   it("falls back to the alt initials when no src is provided", () => {
@@ -57,10 +58,15 @@ describe("Avatar composite", () => {
     expect(screen.getByText(extractInitials(personName))).toBeInTheDocument();
   });
 
+  it("falls back to the alt initials when src is omitted", () => {
+    render(<Avatar alt={personName} />);
+
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    expect(screen.getByText(extractInitials(personName))).toBeInTheDocument();
+  });
+
   it("renders a custom fallback node when provided", () => {
-    render(
-      <Avatar alt={personName} src="" fallback={<span>Custom</span>} />,
-    );
+    render(<Avatar alt={personName} src="" fallback={<span>Custom</span>} />);
 
     expect(screen.getByText("Custom")).toBeInTheDocument();
     expect(
@@ -69,9 +75,7 @@ describe("Avatar composite", () => {
   });
 
   it("renders a badge when provided", () => {
-    render(
-      <Avatar alt={personName} src={imageSrc} badge={<span>3</span>} />,
-    );
+    render(<Avatar alt={personName} src={imageSrc} badge={<span>3</span>} />);
 
     const badge = document.querySelector('[data-slot="avatar-badge"]');
     expect(badge).not.toBeNull();
@@ -81,18 +85,25 @@ describe("Avatar composite", () => {
   it("omits the badge slot when no badge is provided", () => {
     render(<Avatar alt={personName} src={imageSrc} />);
 
-    expect(
-      document.querySelector('[data-slot="avatar-badge"]'),
-    ).toBeNull();
+    expect(document.querySelector('[data-slot="avatar-badge"]')).toBeNull();
   });
 
-  it("applies the size variant via data-size and class", () => {
-    render(<Avatar alt={personName} src={imageSrc} size="sm" />);
+  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", "sm");
-    expect(root).toHaveClass("size-8");
-  });
+      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} />);
@@ -106,7 +117,7 @@ describe("Avatar composite", () => {
     render(
       <Avatar
         alt={personName}
-        src=""
+        src={imageSrc}
         badge={<span>!</span>}
         className="root-class"
         classNames={{
@@ -120,13 +131,52 @@ describe("Avatar composite", () => {
     expect(document.querySelector('[data-slot="avatar"]')).toHaveClass(
       "root-class",
     );
-    expect(
-      document.querySelector('[data-slot="avatar-fallback"]'),
-    ).toHaveClass("fallback-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", () => {
@@ -151,6 +201,41 @@ describe("Avatar primitives", () => {
     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("size-full", "rounded-full", "object-cover");
+  });
+
+  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>
@@ -164,6 +249,33 @@ describe("Avatar primitives", () => {
     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">
@@ -181,6 +293,19 @@ describe("Avatar primitives", () => {
     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>);
 
@@ -189,6 +314,24 @@ describe("Avatar primitives", () => {
     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");
+  });
+
   it("exposes the Base UI namespace via AvatarPrimitive", () => {
     expect(AvatarPrimitive).toBeDefined();
     expect(AvatarPrimitive.Root).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";