@elabs-ai/components-ui 4.0.0

package/src/components/model-picker/model-picker.test.tsx

@@ -0,0 +1,241 @@
+import { cleanup, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ModelPicker } from "./model-picker";
+import { countItems, modelPickerBody, showsInlineError } from "./model-picker-state";
+import type { ModelPickerGroup } from "./model-picker-state";
+
+afterEach(cleanup);
+
+// cmdk calls Element.scrollIntoView to keep the auto-highlighted item visible.
+// jsdom doesn't implement it and this package's vitest setup deliberately ships
+// no global stub (a stub there would only fix @elabs-ai/components-ui's
+// own tests while every other jsdom consumer still crashed), so third-party
+// libraries that don't feature-detect get a local, scoped stub — the same
+// pattern as combobox.test.tsx and tree.test.tsx.
+let originalScrollIntoView: typeof Element.prototype.scrollIntoView;
+beforeEach(() => {
+  originalScrollIntoView = Element.prototype.scrollIntoView;
+  Element.prototype.scrollIntoView = vi.fn();
+});
+afterEach(() => {
+  Element.prototype.scrollIntoView = originalScrollIntoView;
+});
+
+const groups: ModelPickerGroup[] = [
+  {
+    key: "apps-northwind",
+    label: "Apps · northwind",
+    items: [
+      {
+        id: "app-1",
+        label: "Sales overview",
+        description: "Updated 2 days ago",
+        // The visible label never says "northwind" — the keyword is what finds it.
+        keywords: ["northwind", "app-1"],
+        meta: ["not provisioned"],
+      },
+    ],
+  },
+  {
+    key: "assistants-personal",
+    label: "Assistants · personal",
+    items: [{ id: "asst-1", label: "Research helper", keywords: ["personal"] }],
+  },
+];
+
+const open = async () => {
+  await userEvent.click(screen.getAllByRole("combobox")[0]!);
+};
+
+// The two decisions that were unreachable inline ternaries in the app this came
+// from. Tested directly — that is why they are exported functions.
+describe("modelPickerBody / showsInlineError", () => {
+  it("lets a non-empty list win over every non-ready status", () => {
+    expect(modelPickerBody("error", 3)).toBe("list");
+    expect(modelPickerBody("stale", 3)).toBe("list");
+    expect(modelPickerBody("loading", 3)).toBe("list");
+  });
+
+  it("shows loading only while there is nothing to show", () => {
+    expect(modelPickerBody("loading", 0)).toBe("loading");
+    expect(modelPickerBody("idle", 0)).toBe("loading");
+  });
+
+  it("separates a failed load from a genuinely empty list", () => {
+    expect(modelPickerBody("error", 0)).toBe("error");
+    expect(modelPickerBody("stale", 0)).toBe("error");
+    expect(modelPickerBody("empty", 0)).toBe("empty");
+    expect(modelPickerBody("ready", 0)).toBe("empty");
+  });
+
+  it("shows the inline strip only over a list that still works", () => {
+    expect(showsInlineError("stale", 3)).toBe(true);
+    expect(showsInlineError("error", 3)).toBe(true);
+    // No list to preserve → the panel takes over instead.
+    expect(showsInlineError("error", 0)).toBe(false);
+    expect(showsInlineError("ready", 3)).toBe(false);
+  });
+
+  it("counts items across groups", () => {
+    expect(countItems(groups)).toBe(2);
+  });
+});
+
+describe("ModelPicker", () => {
+  it("renders grouped rows under caller-supplied headings", async () => {
+    render(<ModelPicker groups={groups} triggerLabel="Pick a target" />);
+    await open();
+    expect(screen.getByText("Apps · northwind")).toBeInTheDocument();
+    expect(screen.getByText("Assistants · personal")).toBeInTheDocument();
+    // Scoped to the list — the trigger label would otherwise match too.
+    const list = document.querySelector('[data-slot="model-picker-content"]')!;
+    expect(within(list as HTMLElement).getByText("Sales overview")).toBeInTheDocument();
+  });
+
+  it("matches hidden keywords, not just the visible label", async () => {
+    render(<ModelPicker groups={groups} triggerLabel="Pick" />);
+    await open();
+    await userEvent.type(screen.getByPlaceholderText("Search…"), "northwind");
+
+    // "Sales overview" contains no "northwind" anywhere on screen.
+    expect(await screen.findByText("Sales overview")).toBeInTheDocument();
+    expect(screen.queryByText("Research helper")).not.toBeInTheDocument();
+  });
+
+  it("marks the pinned row with data-picked, NOT data-selected", async () => {
+    render(<ModelPicker groups={groups} value="asst-1" triggerLabel="Research helper" />);
+    await open();
+
+    const picked = document.querySelector('[data-model-id="asst-1"]')!;
+    const other = document.querySelector('[data-model-id="app-1"]')!;
+    expect(picked).toHaveAttribute("data-picked", "true");
+    expect(other).toHaveAttribute("data-picked", "false");
+
+    // cmdk owns data-selected as the keyboard HIGHLIGHT. Asserting on it would
+    // report the highlighted row, not the pinned one — the trap this locks.
+    expect(picked.getAttribute("data-picked")).not.toBe(picked.getAttribute("data-selected"));
+  });
+
+  it("selects a row and closes", async () => {
+    const onSelect = vi.fn();
+    render(<ModelPicker groups={groups} triggerLabel="Pick" onSelect={onSelect} />);
+    await open();
+    await userEvent.click(screen.getByText("Research helper"));
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: "asst-1" }));
+  });
+
+  it("keeps a usable list and shows an inline error when a refresh fails", async () => {
+    const onRetry = vi.fn();
+    render(<ModelPicker groups={groups} status="stale" triggerLabel="Pick" onRetry={onRetry} />);
+    await open();
+
+    // The list is still there — the failure must not take it over.
+    expect(screen.getByText("Sales overview")).toBeInTheDocument();
+    const strip = document.querySelector('[data-slot="model-picker-stale"]')!;
+    expect(within(strip as HTMLElement).getByText("Couldn't refresh the list")).toBeInTheDocument();
+
+    await userEvent.click(within(strip as HTMLElement).getByRole("button", { name: "Retry" }));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows skeletons while loading with nothing to show", async () => {
+    render(<ModelPicker groups={[]} status="loading" triggerLabel="Pick" />);
+    await open();
+    expect(document.querySelector('[data-slot="model-picker-loading"]')).not.toBeNull();
+    expect(screen.getByRole("status")).toHaveTextContent("Loading…");
+  });
+
+  it("shows a retryable error panel when the load failed with no data", async () => {
+    const onRetry = vi.fn();
+    render(<ModelPicker groups={[]} status="error" triggerLabel="Pick" onRetry={onRetry} />);
+    await open();
+    expect(screen.getByText("Couldn't load the list")).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Retry" }));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  it("distinguishes empty from failed", async () => {
+    render(<ModelPicker groups={[]} status="empty" triggerLabel="Pick" />);
+    await open();
+    expect(screen.getByText("Nothing to show yet")).toBeInTheDocument();
+    expect(screen.queryByText("Couldn't load the list")).not.toBeInTheDocument();
+  });
+
+  it("names the trigger from its label, and lets aria-label name the CONTROL", async () => {
+    const { unmount } = render(<ModelPicker groups={groups} triggerLabel="Sales overview" />);
+    // Default: the name tells AT what is currently CHOSEN.
+    expect(screen.getAllByRole("combobox")[0]).toHaveAccessibleName("Sales overview");
+    unmount();
+
+    render(
+      <ModelPicker groups={groups} triggerLabel="Sales overview" aria-label="Target picker" />,
+    );
+    // Explicit: the name tells AT what the control is FOR.
+    expect(screen.getAllByRole("combobox")[0]).toHaveAccessibleName("Target picker");
+  });
+
+  it("renders caller-supplied meta badges verbatim", async () => {
+    render(<ModelPicker groups={groups} triggerLabel="Pick" />);
+    await open();
+    // Caller-built array, never derived from a flag — an absent flag means
+    // "undecided", and deriving from !flag mislabels every row.
+    expect(screen.getByText("not provisioned")).toBeInTheDocument();
+    expect(screen.queryByText("no modes")).not.toBeInTheDocument();
+  });
+
+  describe("controlled open / onOpenChange", () => {
+    it("shows the popover content with no interaction when open=true", () => {
+      render(<ModelPicker groups={groups} triggerLabel="Pick" open onOpenChange={vi.fn()} />);
+      // No click on the trigger — the content must already be there.
+      expect(screen.getByText("Apps · northwind")).toBeInTheDocument();
+    });
+
+    it("does not open on trigger click when open=false is held by the parent", async () => {
+      const onOpenChange = vi.fn();
+      render(
+        <ModelPicker
+          groups={groups}
+          triggerLabel="Pick"
+          open={false}
+          onOpenChange={onOpenChange}
+        />,
+      );
+      await open();
+      // The parent never updated `open`, so the popover must stay closed —
+      // this is the controlled contract, not a convenience default.
+      expect(screen.queryByText("Apps · northwind")).not.toBeInTheDocument();
+      expect(onOpenChange).toHaveBeenCalledWith(true);
+    });
+
+    it("calls onOpenChange(false) on row select instead of closing itself", async () => {
+      const onOpenChange = vi.fn();
+      const onSelect = vi.fn();
+      render(
+        <ModelPicker
+          groups={groups}
+          triggerLabel="Pick"
+          open
+          onOpenChange={onOpenChange}
+          onSelect={onSelect}
+        />,
+      );
+      await userEvent.click(screen.getByText("Research helper"));
+      expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: "asst-1" }));
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+      // Controlled: the parent hasn't updated `open`, so content stays mounted.
+      expect(screen.getByText("Apps · northwind")).toBeInTheDocument();
+    });
+  });
+
+  it("uncontrolled mode: trigger click still opens and closes on its own (regression)", async () => {
+    const onSelect = vi.fn();
+    render(<ModelPicker groups={groups} triggerLabel="Pick" onSelect={onSelect} />);
+    expect(screen.queryByText("Apps · northwind")).not.toBeInTheDocument();
+    await open();
+    expect(screen.getByText("Apps · northwind")).toBeInTheDocument();
+    await userEvent.click(screen.getByText("Research helper"));
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: "asst-1" }));
+    expect(screen.queryByText("Apps · northwind")).not.toBeInTheDocument();
+  });
+});

package/src/components/model-picker/model-picker.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import { forwardRef, useCallback, useState, type HTMLAttributes, type ReactNode } from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Button } from "../button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../command";
+import { useLocale } from "../locale-provider";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Skeleton } from "../skeleton";
+import {
+  countItems,
+  modelPickerBody,
+  showsInlineError,
+  type ModelPickerGroup,
+  type ModelPickerItem,
+  type ModelPickerStatus,
+} from "./model-picker-state";
+
+export interface ModelPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  /** Grouped rows. Grouping and heading text are the caller's, never derived. */
+  groups: readonly ModelPickerGroup[];
+  /** The currently pinned row's id. */
+  value?: string;
+  /** Fires with the chosen row; the popover closes first. */
+  onSelect?: (item: ModelPickerItem) => void;
+  /** Drives the four bodies — see `modelPickerBody`. Default `"ready"`. */
+  status?: ModelPickerStatus;
+  /** Trigger text — usually the pinned row's label. */
+  triggerLabel: ReactNode;
+  /** Retry action for the error strip and the empty panel. Omit to hide it. */
+  onRetry?: () => void;
+  /** Search field placeholder. */
+  searchPlaceholder?: string;
+  disabled?: boolean;
+  /** Extra classes for the popover panel (default width `w-96`). */
+  contentClassName?: string;
+  /** Accessible name for the trigger — what the control is FOR, not what is chosen. */
+  "aria-label"?: string;
+  /**
+   * Controlled popover open state. Omit for the uncontrolled default (internal
+   * `useState(false)`, unchanged). `isControlled = open !== undefined` and the
+   * mode never flips mid-life — see `component-api.md` "Controlled/uncontrolled".
+   */
+  open?: boolean;
+  /** Fires whenever the popover would open/close — a trigger click, or a row select. */
+  onOpenChange?: (open: boolean) => void;
+}
+
+function Row({
+  item,
+  picked,
+  onChoose,
+}: {
+  item: ModelPickerItem;
+  picked: boolean;
+  onChoose: () => void;
+}) {
+  return (
+    <CommandItem
+      value={item.id}
+      // cmdk filters on value + keywords, so a hidden keyword ("northwind") finds
+      // a row whose visible label never mentions it.
+      keywords={item.keywords ?? []}
+      disabled={item.disabled}
+      onSelect={onChoose}
+      data-model-id={item.id}
+      // `data-picked`, NOT `data-selected`. cmdk OWNS `data-selected` on a
+      // CommandItem — it is the keyboard HIGHLIGHT, set on whichever row the
+      // arrow keys are currently on. Writing our own would be silently
+      // overwritten, and a test reading it would report the highlighted row as
+      // the pinned one.
+      data-picked={picked ? "true" : "false"}
+      className="gap-2"
+    >
+      {item.icon}
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate">{item.label}</span>
+        {item.description === undefined ? null : (
+          <span className="text-meta text-muted-foreground truncate">{item.description}</span>
+        )}
+      </span>
+      {(item.meta ?? []).map((m) => (
+        <span key={m} className="text-meta text-muted-foreground shrink-0">
+          {m}
+        </span>
+      ))}
+      {picked ? <Check className="size-3.5 shrink-0" aria-hidden="true" /> : null}
+    </CommandItem>
+  );
+}
+
+/**
+ * A compact pill that opens a grouped, searchable target list anchored under
+ * itself — sized to sit in a composer footer.
+ *
+ * The inline sibling of `@elabs-ai/components-ai`'s `ModelSelector`,
+ * which is the same `Command` internals in a modal `Dialog`. Reach for that one
+ * for a full command palette; reach for this one for an in-place picker.
+ *
+ * **`Command` lives inside a `Popover`, never a `DropdownMenu`, and that is not
+ * a stylistic choice.** `DropdownMenuContent` owns roving tabindex and its own
+ * typeahead, both of which fight a real `<input>` in its subtree: arrow keys move
+ * the menu's focus instead of cmdk's highlight, and keystrokes are swallowed
+ * before they reach `CommandInput`. `Popover` contributes positioning and
+ * dismissal and claims no keyboard, which is why every combobox is built on it.
+ * Do not "simplify" this back.
+ */
+export const ModelPicker = forwardRef<HTMLDivElement, ModelPickerProps>(function ModelPicker(
+  {
+    groups,
+    value,
+    onSelect,
+    status = "ready",
+    triggerLabel,
+    onRetry,
+    searchPlaceholder,
+    disabled,
+    contentClassName,
+    className,
+    open: openProp,
+    onOpenChange,
+    ...props
+  },
+  ref,
+) {
+  const { t } = useLocale();
+  // Controlled/uncontrolled per component-api.md: controlled iff `open` is
+  // provided; the mode never flips mid-life. Uncontrolled fallback is
+  // byte-identical to the old internal `useState(false)`.
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isControlled = openProp !== undefined;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange],
+  );
+  const count = countItems(groups);
+  const body = modelPickerBody(status, count);
+
+  return (
+    <div ref={ref} data-slot="model-picker" className={cn("inline-flex", className)} {...props}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            role="combobox"
+            aria-expanded={open}
+            // `role="combobox"` does NOT support name-from-content, so the
+            // visible label never becomes the accessible name on its own — the
+            // control would ship unnamed. Default to the label (telling AT what
+            // is currently CHOSEN, matching `Combobox`); an explicit `aria-label`
+            // wins and names what the control is FOR.
+            aria-label={
+              props["aria-label"] ??
+              (typeof triggerLabel === "string" ? triggerLabel : t("ui.modelPicker.label"))
+            }
+            disabled={disabled}
+            data-slot="model-picker-trigger"
+            className="max-w-88 justify-between gap-2"
+          >
+            <span className="truncate">{triggerLabel}</span>
+            <ChevronsUpDown className="size-3.5 shrink-0 opacity-50" aria-hidden="true" />
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          align="start"
+          data-slot="model-picker-content"
+          // Radix Popover.Content renders role="dialog"; without a name axe flags it.
+          aria-label={props["aria-label"] ?? t("ui.modelPicker.label")}
+          className={cn("w-96 p-0", contentClassName)}
+        >
+          <Command>
+            <CommandInput
+              placeholder={searchPlaceholder ?? t("ui.modelPicker.searchPlaceholder")}
+            />
+
+            {showsInlineError(status, count) ? (
+              // Above the list, never instead of it — the list still works.
+              <div
+                data-slot="model-picker-stale"
+                role="status"
+                className="border-border flex items-center justify-between gap-2 border-b px-3 py-2"
+              >
+                <span className="text-meta text-muted-foreground">
+                  {t("ui.modelPicker.refreshFailed")}
+                </span>
+                {onRetry ? (
+                  <Button variant="ghost" size="sm" onClick={onRetry}>
+                    {t("ui.modelPicker.retry")}
+                  </Button>
+                ) : null}
+              </div>
+            ) : null}
+
+            <CommandList>
+              {body === "loading" ? (
+                <div className="space-y-2 p-3" data-slot="model-picker-loading">
+                  <span className="sr-only" role="status">
+                    {t("loading")}
+                  </span>
+                  <Skeleton className="h-6 w-full" />
+                  <Skeleton className="h-6 w-4/5" />
+                  <Skeleton className="h-6 w-3/5" />
+                </div>
+              ) : null}
+
+              {body === "error" || body === "empty" ? (
+                <div className="space-y-2 p-4 text-center" data-slot="model-picker-state">
+                  <p className="text-body">
+                    {body === "error"
+                      ? t("ui.modelPicker.loadFailed")
+                      : t("ui.modelPicker.nothingYet")}
+                  </p>
+                  {onRetry ? (
+                    <Button variant="outline" size="sm" onClick={onRetry}>
+                      {t("ui.modelPicker.retry")}
+                    </Button>
+                  ) : null}
+                </div>
+              ) : null}
+
+              {body === "list" ? (
+                <>
+                  <CommandEmpty>{t("noResults")}</CommandEmpty>
+                  {groups.map((group) => (
+                    <CommandGroup key={group.key} heading={group.label}>
+                      {group.items.map((item) => (
+                        <Row
+                          key={item.id}
+                          item={item}
+                          picked={item.id === value}
+                          onChoose={() => {
+                            setOpen(false);
+                            onSelect?.(item);
+                          }}
+                        />
+                      ))}
+                    </CommandGroup>
+                  ))}
+                </>
+              ) : null}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+});
+
+export {
+  countItems,
+  modelPickerBody,
+  showsInlineError,
+  type ModelPickerGroup,
+  type ModelPickerItem,
+  type ModelPickerStatus,
+};

package/src/components/nav-main/index.ts

@@ -0,0 +1 @@
+export { NavMain, type NavMainProps, type NavMainRoute, type NavMainSubItem } from "./nav-main";

package/src/components/nav-main/nav-main.tsx

@@ -0,0 +1,147 @@
+/**
+ * Shared collapsible sidebar navigation primitive (issue #99).
+ * Promoted from `packages/ui/src/blocks/sidebar-02/nav-main.tsx`.
+ *
+ * Renders a `SidebarMenu` of routes; each route with sub-items uses a
+ * `Collapsible` expand/collapse affordance. Collapses icon-only when the
+ * sidebar is in the `"collapsed"` state.
+ */
+"use client";
+
+import type React from "react";
+import { useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
+} from "../sidebar";
+import { cn } from "../../lib/cn";
+
+export type NavMainSubItem = {
+  title: string;
+  link: string;
+  icon?: React.ReactNode;
+};
+
+export type NavMainRoute = {
+  id: string;
+  title: string;
+  icon?: React.ReactNode;
+  link: string;
+  subs?: NavMainSubItem[];
+};
+
+export interface NavMainProps {
+  routes: NavMainRoute[];
+  className?: string;
+}
+
+/**
+ * Collapsible primary navigation list for sidebars.
+ *
+ * - Routes with `subs` render as an expandable group (one open at a time).
+ * - Routes without `subs` render as a simple link button.
+ * - Collapses to icon-only when the enclosing `Sidebar` is in `"collapsed"` state.
+ *
+ * @example
+ * ```tsx
+ * <NavMain routes={[
+ *   { id: "home", title: "Home", icon: <Home />, link: "#" },
+ *   { id: "settings", title: "Settings", icon: <Settings />, link: "#",
+ *     subs: [{ title: "General", link: "#" }] },
+ * ]} />
+ * ```
+ */
+export function NavMain({ routes, className }: NavMainProps) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const [openCollapsible, setOpenCollapsible] = useState<string | null>(null);
+
+  return (
+    <SidebarMenu className={className}>
+      {routes.map((route) => {
+        const isOpen = !isCollapsed && openCollapsible === route.id;
+        const hasSubRoutes = !!route.subs?.length;
+
+        return (
+          <SidebarMenuItem key={route.id}>
+            {hasSubRoutes ? (
+              <Collapsible
+                open={isOpen}
+                onOpenChange={(open) => setOpenCollapsible(open ? route.id : null)}
+                className="w-full"
+              >
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton
+                    tooltip={route.title}
+                    className={cn(
+                      "flex w-full items-center rounded-lg px-2 transition-colors",
+                      isOpen
+                        ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                        : "text-sidebar-muted-foreground",
+                      isCollapsed && "justify-center",
+                    )}
+                  >
+                    {route.icon}
+                    {!isCollapsed && (
+                      <span className="ms-2 flex-1 text-sm font-medium">{route.title}</span>
+                    )}
+                    {!isCollapsed && (
+                      <span className="ms-auto">
+                        {isOpen ? (
+                          <ChevronUp className="size-4" />
+                        ) : (
+                          <ChevronDown className="size-4" />
+                        )}
+                      </span>
+                    )}
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+                {!isCollapsed && (
+                  <CollapsibleContent>
+                    <SidebarMenuSub className="my-1 ms-3.5">
+                      {route.subs?.map((subRoute) => (
+                        <SidebarMenuSubItem
+                          key={`${route.id}-${subRoute.title}`}
+                          className="h-auto"
+                        >
+                          <SidebarMenuSubButton asChild>
+                            <a
+                              href={subRoute.link}
+                              className="flex items-center rounded-md px-4 py-1.5 text-sm font-medium text-sidebar-muted-foreground"
+                            >
+                              {subRoute.title}
+                            </a>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                )}
+              </Collapsible>
+            ) : (
+              <SidebarMenuButton tooltip={route.title} asChild>
+                <a
+                  href={route.link}
+                  className={cn(
+                    "flex items-center rounded-lg px-2 text-sidebar-muted-foreground",
+                    isCollapsed && "justify-center",
+                  )}
+                >
+                  {route.icon}
+                  {!isCollapsed && <span className="ms-2 text-sm font-medium">{route.title}</span>}
+                </a>
+              </SidebarMenuButton>
+            )}
+          </SidebarMenuItem>
+        );
+      })}
+    </SidebarMenu>
+  );
+}

package/src/components/nav-notifications/index.ts

@@ -0,0 +1,5 @@
+export {
+  NavNotifications,
+  type NavNotificationsProps,
+  type NavNotification,
+} from "./nav-notifications";

package/src/components/nav-notifications/nav-notifications.test.tsx

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { NavNotifications } from "./nav-notifications";
+
+describe("NavNotifications", () => {
+  const notifications = [
+    { id: "1", fallback: "AB", text: "New order received.", time: "10m ago" },
+    { id: "2", fallback: "CD", text: "Server upgrade completed.", time: "1h ago" },
+  ];
+
+  it("renders the notifications trigger button", () => {
+    render(<NavNotifications notifications={notifications} />);
+    expect(screen.getByRole("button", { name: "Open notifications" })).toBeInTheDocument();
+  });
+});