@elabs-ai/components-ui 4.1.0 → 4.2.0

package/src/components/accordion/accordion.tsx

@@ -9,7 +9,14 @@ export const AccordionItem = forwardRef<
   ElementRef<typeof AccordionPrimitive.Item>,
   ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(function AccordionItem({ className, ...props }, ref) {
-  return <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />;
+  return (
+    <AccordionPrimitive.Item
+      ref={ref}
+      data-slot="accordion-item"
+      className={cn("border-b", className)}
+      {...props}
+    />
+  );
 });
 
 export const AccordionTrigger = forwardRef<
@@ -17,11 +24,12 @@ export const AccordionTrigger = forwardRef<
   ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(function AccordionTrigger({ className, children, ...props }, ref) {
   return (
-    <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Header className="flex" data-slot="accordion-header">
       <AccordionPrimitive.Trigger
         ref={ref}
+        data-slot="accordion-trigger"
         className={cn(
-          "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline focus-ring [&[data-state=open]>svg]:rotate-180",
+          "flex flex-1 items-center justify-between py-4 text-body font-medium transition-all hover:underline focus-ring [&[data-state=open]>svg]:rotate-180",
           className,
         )}
         {...props}
@@ -40,7 +48,8 @@ export const AccordionContent = forwardRef<
   return (
     <AccordionPrimitive.Content
       ref={ref}
-      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      data-slot="accordion-content"
+      className="overflow-hidden text-body data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
       {...props}
     >
       <div className={cn("pb-4 pt-0 text-muted-foreground", className)}>{children}</div>

package/src/components/alert/alert.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/cn";
 
 export const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg]:text-current [&>svg~*]:ps-7",
+  "relative w-full rounded-lg border px-4 py-3 text-body [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg]:text-current [&>svg~*]:ps-7",
   {
     variants: {
       variant: {
@@ -34,7 +34,13 @@ export const Alert = forwardRef<
   ref,
 ) {
   return (
-    <div ref={ref} role={role} className={cn(alertVariants({ variant }), className)} {...props} />
+    <div
+      ref={ref}
+      role={role}
+      data-slot="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
   );
 });
 
@@ -56,6 +62,7 @@ export const AlertTitle = forwardRef<HTMLHeadingElement, AlertTitleProps>(functi
   return (
     <Tag
       ref={ref}
+      data-slot="alert-title"
       className={cn("mb-1 font-medium leading-none tracking-tight", className)}
       {...props}
     />
@@ -82,8 +89,9 @@ export const AlertDescription = forwardRef<HTMLParagraphElement, AlertDescriptio
     return (
       <div
         ref={ref}
+        data-slot="alert-description"
         className={cn(
-          "text-sm [&_p]:leading-relaxed text-muted-foreground",
+          "text-body [&_p]:leading-relaxed text-muted-foreground",
           measure && "max-w-prose",
           className,
         )}

package/src/components/alert-dialog/alert-dialog.test.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./alert-dialog";
+
+describe("AlertDialogContent overflow", () => {
+  it("caps height and scrolls a long body instead of overflowing the viewport", () => {
+    render(
+      <AlertDialog open>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Title</AlertDialogTitle>
+            <AlertDialogDescription>Description</AlertDialogDescription>
+          </AlertDialogHeader>
+          Body
+        </AlertDialogContent>
+      </AlertDialog>,
+    );
+    const content = screen.getByRole("alertdialog");
+    // Without a height ceiling + `overflow-y-auto`, a body longer than the
+    // viewport overflows past both edges — and the `-translate-y-1/2`
+    // centring pushes its top half off-screen, unreachable even by scrolling
+    // the page.
+    expect(content.className).toContain("max-h-[85dvh]");
+    expect(content.className).toContain("overflow-y-auto");
+  });
+});

package/src/components/alert-dialog/alert-dialog.tsx

@@ -19,8 +19,9 @@ const AlertDialogOverlay = forwardRef<
   return (
     <AlertDialogPrimitive.Overlay
       ref={ref}
+      data-slot="alert-dialog-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-foreground/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "fixed inset-0 z-50 bg-overlay backdrop-blur-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className,
       )}
       {...props}
@@ -37,8 +38,13 @@ export const AlertDialogContent = forwardRef<
       <AlertDialogOverlay />
       <AlertDialogPrimitive.Content
         ref={ref}
+        data-slot="alert-dialog-content"
         className={cn(
-          "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-card p-6 text-card-foreground shadow-ring-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          // `max-h` + `overflow-y-auto`: without a height ceiling, a long body
+          // (a big diff, a long list of items to confirm) overflows past both
+          // viewport edges with its actions unreachable — the `-translate-y-1/2`
+          // centring only makes this worse by pushing the top half off-screen.
+          "fixed left-1/2 top-1/2 z-50 grid max-h-[85dvh] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl bg-card p-6 text-card-foreground shadow-ring-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
           className,
         )}
         {...props}
@@ -48,11 +54,18 @@ export const AlertDialogContent = forwardRef<
 });
 
 export function AlertDialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("flex flex-col gap-1.5 text-start", className)} {...props} />;
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-1.5 text-start", className)}
+      {...props}
+    />
+  );
 }
 export function AlertDialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
+      data-slot="alert-dialog-footer"
       className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
       {...props}
     />
@@ -63,9 +76,11 @@ export const AlertDialogTitle = forwardRef<
   ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(function AlertDialogTitle({ className, ...props }, ref) {
   return (
+    // `text-title`, matching `DialogTitle` (#286) — was `text-lg font-semibold`.
     <AlertDialogPrimitive.Title
       ref={ref}
-      className={cn("text-lg font-semibold", className)}
+      data-slot="alert-dialog-title"
+      className={cn("text-title leading-none", className)}
       {...props}
     />
   );
@@ -77,7 +92,8 @@ export const AlertDialogDescription = forwardRef<
   return (
     <AlertDialogPrimitive.Description
       ref={ref}
-      className={cn("text-sm text-muted-foreground", className)}
+      data-slot="alert-dialog-description"
+      className={cn("text-body text-muted-foreground", className)}
       {...props}
     />
   );
@@ -87,7 +103,12 @@ export const AlertDialogAction = forwardRef<
   ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(function AlertDialogAction({ className, ...props }, ref) {
   return (
-    <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+    <AlertDialogPrimitive.Action
+      ref={ref}
+      data-slot="alert-dialog-action"
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
   );
 });
 export const AlertDialogCancel = forwardRef<
@@ -97,6 +118,7 @@ export const AlertDialogCancel = forwardRef<
   return (
     <AlertDialogPrimitive.Cancel
       ref={ref}
+      data-slot="alert-dialog-cancel"
       className={cn(buttonVariants({ variant: "outline" }), className)}
       {...props}
     />

package/src/components/app-shell/app-shell.test.tsx

@@ -0,0 +1,99 @@
+import { createRef } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AppShell } from "./app-shell";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "../sidebar";
+
+describe("AppShell", () => {
+  it("forwards a ref to the root element", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(
+      <AppShell ref={ref} mainId="main">
+        Content
+      </AppShell>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    // The forwarded node IS the shell root — the flex/overflow box that
+    // establishes the fixed-height viewport, not some inner wrapper.
+    expect(ref.current?.className).toContain("h-dvh");
+  });
+});
+
+describe("AppShell — mobile navigation (#review 2.1: sidebar disappears below md)", () => {
+  const originalInnerWidth = window.innerWidth;
+
+  afterEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: originalInnerWidth,
+    });
+  });
+
+  /**
+   * The `sidebar` slot is `hidden md:flex` with no fallback of its own (see
+   * `app-shell.tsx`'s module doc comment) — by design, because `<Sidebar>`
+   * already renders its own off-canvas `Sheet` below the mobile breakpoint,
+   * through a Radix portal that mounts into `document.body`, entirely
+   * unaffected by AppShell's `hidden md:flex` wrapper (a portal is not a
+   * descendant of that wrapper's DOM subtree). Composing `<AppShell>` with
+   * the real `<Sidebar>` primitive (not a bare custom `<nav>`) and placing a
+   * `<SidebarTrigger>` in `topNav` — both wrapped in ONE shared
+   * `<SidebarProvider>`, which is a plain React context and so is never
+   * blocked by AppShell's internal wrapper `<div>` — is therefore ALREADY a
+   * working mobile nav path with no AppShell code change: this test locks
+   * that composition rather than reworking AppShell into owning a second,
+   * competing `Sheet` (which would have to unmount `<Sidebar>` whenever ITS
+   * own drawer closes — see the doc comment for why that is a regression,
+   * not a fix). A consumer who instead passes a bare nav node still needs to
+   * bring its own responsive fallback, exactly as documented.
+   */
+  it("reaches sidebar navigation through Sidebar's own Sheet fallback at a mobile width", async () => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: 500,
+    });
+    const user = userEvent.setup();
+    render(
+      <SidebarProvider>
+        <AppShell
+          mainId="main"
+          topNav={<SidebarTrigger />}
+          sidebar={
+            <Sidebar>
+              <SidebarContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>Dashboard</SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarContent>
+            </Sidebar>
+          }
+        >
+          Main content
+        </AppShell>
+      </SidebarProvider>,
+    );
+
+    // Below `md`, the desktop sidebar branch renders nothing (it is inside
+    // AppShell's `hidden md:flex` slot AND `<Sidebar>` itself renders `null`
+    // desktop markup on mobile) — the nav item is reachable only once the
+    // trigger opens the portal-rendered Sheet.
+    expect(screen.queryByRole("button", { name: "Dashboard" })).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Toggle Sidebar" }));
+
+    expect(await screen.findByRole("button", { name: "Dashboard" })).toBeInTheDocument();
+  });
+});

package/src/components/app-shell/app-shell.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { forwardRef, type ReactNode } from "react";
 import { cn } from "../../lib/cn";
 import { SkipLink } from "../skip-link";
 
@@ -22,17 +22,36 @@ export interface AppShellProps {
 /**
  * App-first layout: fixed-height viewport with an optional sidebar, a top bar,
  * and a scrollable main region. Pure layout — bring your own nav components.
+ *
+ * The `sidebar` slot is hidden below `md` with no fallback of its own: this
+ * shell does not know whether `sidebar` already manages its own responsive
+ * behavior. `<Sidebar>` (`../sidebar`) does — it renders as an offcanvas
+ * `Sheet` below the mobile breakpoint entirely on its own, through a Radix
+ * portal that is unaffected by this wrapper's `hidden md:flex` (a portal
+ * mounts into `document.body`, not into this DOM subtree) — pair it with a
+ * `<SidebarTrigger>` inside `topNav` for full mobile navigation. Wrapping an
+ * arbitrary `sidebar` node in a SECOND, shell-owned `Sheet` here would look
+ * like a fix but silently break that exact pattern: a Radix `Sheet`/`Dialog`
+ * only mounts its content while open, so `<Sidebar>` would be unmounted
+ * (not just hidden) whenever the shell's own drawer is closed — and with it,
+ * the very trigger a caller uses to open ITS mobile view. A bare nav node
+ * (no built-in responsive behavior of its own) has no such fallback; give it
+ * one explicitly, e.g. by rendering a `<Sheet>` alongside `topNav` in the
+ * consuming app.
+ *
+ * The `SidebarProvider` + `Sidebar` + `SidebarTrigger` composition above is
+ * regression-locked in `app-shell.test.tsx` at a mobile viewport width: no
+ * AppShell code change is needed to reach navigation below `md`, because
+ * `SidebarProvider` is a plain React context and is never blocked by this
+ * component's internal wrapper `<div>`.
  */
-export function AppShell({
-  sidebar,
-  topNav,
-  children,
-  className,
-  mainClassName,
-  mainId = "main-content",
-}: AppShellProps) {
+export const AppShell = forwardRef<HTMLDivElement, AppShellProps>(function AppShell(
+  { sidebar, topNav, children, className, mainClassName, mainId = "main-content" },
+  ref,
+) {
   return (
     <div
+      ref={ref}
       className={cn("flex h-dvh w-full overflow-hidden bg-background text-foreground", className)}
     >
       {/* The first focusable element of the shell, so a keyboard user can pass
@@ -61,4 +80,4 @@ export function AppShell({
       </div>
     </div>
   );
-}
+});

package/src/components/attribution-panel/attribution-panel.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useId, useMemo, type HTMLAttributes } from "react";
 import { cn } from "../../lib/cn";
 import { Badge } from "../badge";

package/src/components/attribution-panel/attributions.generated.ts

@@ -1,6 +1,6 @@
 // GENERATED by scripts/gen-attributions.mjs — DO NOT EDIT BY HAND.
-// Run `pnpm gen:attributions` after changing a dependency, a vendored font, or
-// scripts/attributions.sources.json. `pnpm attributions:check` fails on a stale copy.
+// Run `pnpm gen` after changing a dependency, a vendored font, or
+// scripts/attributions.sources.json. `pnpm gen:check` fails on a stale copy.
 //
 // 116 entries (data: 2, source: 18, font: 2, dependency: 94).
 

package/src/components/avatar/avatar.tsx

@@ -9,6 +9,7 @@ export const Avatar = forwardRef<
   return (
     <AvatarPrimitive.Root
       ref={ref}
+      data-slot="avatar"
       className={cn("relative flex size-9 shrink-0 overflow-hidden rounded-full", className)}
       {...props}
     />
@@ -21,6 +22,7 @@ export const AvatarImage = forwardRef<
   return (
     <AvatarPrimitive.Image
       ref={ref}
+      data-slot="avatar-image"
       className={cn(
         "aspect-square size-full animate-in fade-in duration-base ease-entrance",
         className,
@@ -36,8 +38,9 @@ export const AvatarFallback = forwardRef<
   return (
     <AvatarPrimitive.Fallback
       ref={ref}
+      data-slot="avatar-fallback"
       className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground",
+        "flex size-full items-center justify-center rounded-full bg-muted text-meta font-medium text-muted-foreground",
         className,
       )}
       {...props}

package/src/components/badge/badge.test.tsx

@@ -1,3 +1,4 @@
+import { createRef } from "react";
 import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { Badge } from "./badge";
@@ -7,4 +8,11 @@ describe("Badge", () => {
     render(<Badge>New</Badge>);
     expect(screen.getByText("New")).toBeInTheDocument();
   });
+
+  it("forwards its ref to the rendered <span>", () => {
+    const ref = createRef<HTMLSpanElement>();
+    render(<Badge ref={ref}>New</Badge>);
+    expect(ref.current).toBeInstanceOf(HTMLSpanElement);
+    expect(ref.current).toBe(screen.getByText("New"));
+  });
 });

package/src/components/badge/badge.tsx

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import { forwardRef, type HTMLAttributes } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/cn";
 
@@ -23,6 +23,16 @@ export const badgeVariants = cva(
 export interface BadgeProps
   extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
 
-export function Badge({ className, variant, ...props }: BadgeProps) {
-  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
+  { className, variant, ...props },
+  ref,
+) {
+  return (
+    <span
+      ref={ref}
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});

package/src/components/bento-grid/bento-grid.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
 
 import { BentoGrid, BentoGridItem } from "./bento-grid";
 
@@ -116,4 +116,25 @@ describe("BentoGridItem", () => {
     );
     expect(screen.getByTestId("item").className).toMatch(/from-primary/);
   });
+
+  it("cancels a pending spotlight rAF on unmount", () => {
+    const rafSpy = vi.spyOn(window, "requestAnimationFrame").mockReturnValue(7);
+    const cafSpy = vi.spyOn(window, "cancelAnimationFrame").mockImplementation(() => {});
+    const { unmount } = render(
+      <BentoGridItem spotlight data-testid="item">
+        content
+      </BentoGridItem>,
+    );
+    const item = screen.getByTestId("item");
+    fireEvent.mouseMove(item, { clientX: 10, clientY: 10 });
+    expect(rafSpy).toHaveBeenCalled();
+
+    unmount();
+    // A mouse move right before the tile unmounts (removed from the grid
+    // while hovered) must not leave a scheduled frame pending after teardown.
+    expect(cafSpy).toHaveBeenCalledWith(7);
+
+    rafSpy.mockRestore();
+    cafSpy.mockRestore();
+  });
 });

package/src/components/bento-grid/bento-grid.tsx

@@ -34,6 +34,7 @@ import {
   createContext,
   forwardRef,
   use,
+  useEffect,
   useRef,
   useCallback,
   type CSSProperties,
@@ -244,6 +245,15 @@ export const BentoGridItem = forwardRef<HTMLDivElement, BentoGridItemProps>(func
   // rAF ref so we only schedule one frame at a time.
   const rafRef = useRef<number>(0);
 
+  // Cancel a pending frame on unmount — otherwise a mouse move right before
+  // the tile unmounts (removed from the grid while hovered) still fires the
+  // scheduled callback after teardown.
+  useEffect(() => {
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+
   const handleMouseMove = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
       if (!spotlightOn || !tileRef.current || !overlayRef.current) return;

package/src/components/bounded-number/bounded-number.test.tsx

@@ -18,7 +18,7 @@ describe("BoundedNumber", () => {
   it("hides the empty label once a value is set", () => {
     render(<BoundedNumber aria-label="Limit" defaultValue={250} />);
     expect(screen.queryByText("No limit")).not.toBeInTheDocument();
-    expect(screen.getByRole("spinbutton", { name: "Limit" })).toHaveValue(250);
+    expect(screen.getByRole("spinbutton", { name: "Limit" })).toHaveValue("250");
   });
 
   it("hides the empty label while focused so the field reads as truly empty", async () => {