@elabs-ai/components-ui 4.0.0

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

@@ -0,0 +1,70 @@
+"use client";
+
+import { BellIcon } from "lucide-react";
+import { Avatar, AvatarFallback } from "../avatar";
+import { Button } from "../button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../dropdown-menu";
+
+export interface NavNotification {
+  id: string;
+  /** Two-letter fallback initials for the avatar. */
+  fallback: string;
+  text: string;
+  time: string;
+}
+
+export interface NavNotificationsProps {
+  notifications: NavNotification[];
+  /** Label for the "view all" footer item. @default "View all notifications" */
+  viewAllLabel?: string;
+}
+
+/**
+ * Sidebar notifications dropdown button. Shared primitive from sidebar-02 (issue #99).
+ * Renders a bell-icon ghost button that opens a dropdown listing recent notifications.
+ */
+export function NavNotifications({
+  notifications,
+  viewAllLabel = "View all notifications",
+}: NavNotificationsProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="rounded-full"
+          aria-label="Open notifications"
+        >
+          <BellIcon className="size-5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="right" className="my-6 w-80">
+        <DropdownMenuLabel>Notifications</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {notifications.map(({ id, fallback, text, time }) => (
+          <DropdownMenuItem key={id} className="flex items-start gap-3">
+            <Avatar className="size-8">
+              <AvatarFallback>{fallback}</AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col">
+              <span className="text-sm font-medium">{text}</span>
+              <span className="text-xs text-muted-foreground">{time}</span>
+            </div>
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="justify-center text-sm text-muted-foreground">
+          {viewAllLabel}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1 @@
+export { NavUser, type NavUserProps, type NavUserUser } from "./nav-user";

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

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { SidebarProvider } from "../sidebar";
+import { NavUser } from "./nav-user";
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return <SidebarProvider>{children}</SidebarProvider>;
+}
+
+describe("NavUser", () => {
+  it("renders the user name and email in the trigger", () => {
+    render(
+      <Wrapper>
+        <NavUser user={{ name: "Jane Doe", email: "jane@example.com" }} />
+      </Wrapper>,
+    );
+    expect(screen.getAllByText("Jane Doe").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("jane@example.com").length).toBeGreaterThan(0);
+  });
+
+  it("derives two-letter initials from the name", () => {
+    render(
+      <Wrapper>
+        <NavUser user={{ name: "John Smith", email: "j@example.com" }} />
+      </Wrapper>,
+    );
+    expect(screen.getAllByText("JS").length).toBeGreaterThan(0);
+  });
+});

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

@@ -0,0 +1,114 @@
+"use client";
+
+import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut, Sparkles } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../dropdown-menu";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "../sidebar";
+
+export interface NavUserUser {
+  name: string;
+  email: string;
+  /** URL for the user's avatar image. */
+  avatar?: string;
+}
+
+export interface NavUserProps {
+  user: NavUserUser;
+}
+
+/**
+ * Sidebar account / user menu. Shared primitive from sidebar-04 (issue #99).
+ * Renders a trigger showing name + email + avatar; the dropdown exposes
+ * account, billing, notifications and log-out actions.
+ *
+ * Wire your own action handlers by composing custom `DropdownMenuItem` children
+ * if you need more than the default actions — or extend via className.
+ */
+export function NavUser({ user }: NavUserProps) {
+  const { isMobile } = useSidebar();
+  const initials = user.name
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground md:h-8 md:p-0"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
+                <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-start text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ms-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
+                  <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-start text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/src/components/navigation-menu/index.ts

@@ -0,0 +1,10 @@
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+} from "./navigation-menu";

package/src/components/navigation-menu/navigation-menu.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor } from "storybook/test";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "./navigation-menu";
+const meta = {
+  title: "Navigation/NavigationMenu",
+  component: NavigationMenu,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+  argTypes: {
+    value: {
+      description: "Controlled value of the currently active item.",
+      control: "text",
+      table: { category: "State" },
+    },
+    defaultValue: {
+      description: "Uncontrolled initial active item value.",
+      control: "text",
+      table: { category: "State" },
+    },
+    onValueChange: {
+      description: "Callback when the active item changes.",
+      control: false,
+      table: { category: "Events" },
+    },
+    delayDuration: {
+      description: "Milliseconds to delay before content opens on pointer enter.",
+      control: "number",
+      table: { category: "Behaviour" },
+    },
+    skipDelayDuration: {
+      description: "Milliseconds before the close delay resets after leaving a trigger.",
+      control: "number",
+      table: { category: "Behaviour" },
+    },
+    dir: {
+      description: "Reading direction for the navigation menu.",
+      control: { type: "select" },
+      options: ["ltr", "rtl"],
+      table: { category: "Behaviour" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the navigation menu root.",
+      control: "text",
+      table: { category: "Styling" },
+    },
+  },
+} satisfies Meta<typeof NavigationMenu>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-56 gap-1 p-2">
+              <li>
+                <NavigationMenuLink className="block rounded-md p-2 text-body hover:bg-accent">
+                  Analytics
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink className="block rounded-md p-2 text-body hover:bg-accent">
+                  Data Integration
+                </NavigationMenuLink>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+  // Clicks the "Products" trigger, confirms the dropdown content appears in the
+  // viewport (NavigationMenu renders inline, not portalled), then presses Escape.
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: /products/i });
+    await userEvent.click(trigger);
+    const analytics = await canvas.findByText("Analytics");
+    await waitFor(() => expect(analytics).toBeVisible());
+    await waitFor(() => expect(canvas.getByText("Data Integration")).toBeVisible());
+    // Escape dismisses the open panel
+    await userEvent.keyboard("{Escape}");
+  },
+};

package/src/components/navigation-menu/navigation-menu.tsx

@@ -0,0 +1,99 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+export const NavigationMenu = forwardRef<
+  ElementRef<typeof NavigationMenuPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(function NavigationMenu({ className, children, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Root
+      ref={ref}
+      className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+      {...props}
+    >
+      {children}
+      <NavigationMenuViewport />
+    </NavigationMenuPrimitive.Root>
+  );
+});
+
+export const NavigationMenuList = forwardRef<
+  ElementRef<typeof NavigationMenuPrimitive.List>,
+  ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(function NavigationMenuList({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.List
+      ref={ref}
+      className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
+      {...props}
+    />
+  );
+});
+
+export const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+export const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent",
+);
+
+export const NavigationMenuTrigger = forwardRef<
+  ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(function NavigationMenuTrigger({ className, children, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      ref={ref}
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDown
+        className="relative top-px ms-1 size-3 transition-transform duration-base ease-standard group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+});
+
+export const NavigationMenuContent = forwardRef<
+  ElementRef<typeof NavigationMenuPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(function NavigationMenuContent({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "left-0 top-0 w-full p-2 md:absolute md:w-auto",
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out",
+        "data-[motion=from-end]:slide-in-from-right-2 data-[motion=from-start]:slide-in-from-left-2 data-[motion=to-end]:slide-out-to-right-2 data-[motion=to-start]:slide-out-to-left-2",
+        "data-[motion^=from-]:[--tw-ease:var(--ease-entrance)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+export const NavigationMenuViewport = forwardRef<
+  ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(function NavigationMenuViewport({ className, ...props }, ref) {
+  return (
+    <div className="absolute left-0 top-full flex justify-center">
+      <NavigationMenuPrimitive.Viewport
+        ref={ref}
+        className={cn(
+          "relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          "origin-top transition-[width,height] duration-base ease-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:zoom-in-90 data-[state=closed]:zoom-out-95",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+});

package/src/components/number-input/index.ts

@@ -0,0 +1 @@
+export { NumberInput, type NumberInputProps } from "./number-input";

package/src/components/number-input/number-input.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+import { useState } from "react";
+import { NumberInput } from "./number-input";
+
+const meta = {
+  title: "Forms/NumberInput",
+  component: NumberInput,
+  tags: ["autodocs"],
+  args: { step: 1 },
+  argTypes: {
+    value: {
+      description: "Controlled numeric value. Pass `null` for empty state.",
+      control: "number",
+      table: { category: "State" },
+    },
+    defaultValue: {
+      description: "Uncontrolled initial value.",
+      control: "number",
+      table: { category: "State" },
+    },
+    min: {
+      description: "Minimum allowed value.",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    max: {
+      description: "Maximum allowed value.",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    step: {
+      description: "Increment/decrement amount per click or arrow key.",
+      control: "number",
+      table: { category: "Behavior" },
+    },
+    clamp: {
+      description: "Clamp the value to [min, max] on blur (default true).",
+      control: "boolean",
+      table: { category: "Behavior" },
+    },
+    disabled: {
+      description: "Disables all interaction.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    readOnly: {
+      description: "Makes the input read-only.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    placeholder: {
+      description: "Placeholder text shown when the field is empty.",
+      control: "text",
+      table: { category: "Content" },
+    },
+    formatOptions: {
+      description: "`Intl.NumberFormat` options to format the displayed value.",
+      control: false,
+      table: { category: "Appearance" },
+    },
+    onValueChange: {
+      description: "Called when the numeric value changes.",
+      control: false,
+      table: { category: "Behavior" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the root element.",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof NumberInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { defaultValue: 5, min: 0, max: 10 },
+  // Clicks the Increase button and confirms the value increments.
+  play: async ({ canvas, userEvent }) => {
+    const input = canvas.getByRole("spinbutton");
+    await expect(input).toHaveValue(5);
+    const increaseBtn = canvas.getByRole("button", { name: /increase/i });
+    await userEvent.click(increaseBtn);
+    await expect(input).toHaveValue(6);
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [value, setValue] = useState<number | null>(3);
+    return (
+      <div className="flex flex-col gap-2">
+        <NumberInput value={value} onValueChange={setValue} min={0} max={20} />
+        <p className="text-body text-muted-foreground">Value: {value ?? "empty"}</p>
+      </div>
+    );
+  },
+};
+
+export const WithFormatOptions: Story = {
+  args: {
+    defaultValue: 1234.5,
+    formatOptions: { style: "currency", currency: "USD" },
+    step: 100,
+  },
+};
+
+export const NoClamp: Story = {
+  args: { defaultValue: 5, min: 0, max: 10, clamp: false },
+};
+
+export const Disabled: Story = {
+  args: { defaultValue: 5, disabled: true },
+};
+
+export const WithBounds: Story = {
+  args: { defaultValue: 0, min: 0, max: 100, step: 10 },
+};

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

@@ -0,0 +1,96 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { NumberInput } from "./number-input";
+
+describe("NumberInput", () => {
+  it("renders a spinbutton input", () => {
+    render(<NumberInput aria-label="Quantity" defaultValue={5} />);
+    expect(screen.getByRole("spinbutton", { name: "Quantity" })).toBeInTheDocument();
+  });
+
+  it("renders Increase and Decrease buttons", () => {
+    render(<NumberInput aria-label="Qty" />);
+    expect(screen.getByRole("button", { name: "Decrease" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Increase" })).toBeInTheDocument();
+  });
+
+  it("increments value when Increase is clicked (uncontrolled)", async () => {
+    const onValueChange = vi.fn();
+    render(<NumberInput aria-label="Qty" defaultValue={3} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole("button", { name: "Increase" }));
+    expect(onValueChange).toHaveBeenCalledWith(4);
+  });
+
+  it("decrements value when Decrease is clicked (uncontrolled)", async () => {
+    const onValueChange = vi.fn();
+    render(<NumberInput aria-label="Qty" defaultValue={3} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole("button", { name: "Decrease" }));
+    expect(onValueChange).toHaveBeenCalledWith(2);
+  });
+
+  it("clamps to max on Increase at boundary", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NumberInput
+        aria-label="Qty"
+        defaultValue={10}
+        min={0}
+        max={10}
+        onValueChange={onValueChange}
+      />,
+    );
+    const increaseBtn = screen.getByRole("button", { name: "Increase" });
+    expect(increaseBtn).toBeDisabled();
+  });
+
+  it("clamps to min on Decrease at boundary", async () => {
+    render(<NumberInput aria-label="Qty" defaultValue={0} min={0} max={10} />);
+    expect(screen.getByRole("button", { name: "Decrease" })).toBeDisabled();
+  });
+
+  it("is disabled when disabled prop is set", () => {
+    render(<NumberInput aria-label="Qty" defaultValue={5} disabled />);
+    expect(screen.getByRole("spinbutton", { name: "Qty" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Increase" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Decrease" })).toBeDisabled();
+  });
+
+  it("clamps value on blur when clamp=true", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NumberInput
+        aria-label="Qty"
+        defaultValue={5}
+        min={0}
+        max={10}
+        onValueChange={onValueChange}
+      />,
+    );
+    const input = screen.getByRole("spinbutton", { name: "Qty" });
+    await userEvent.clear(input);
+    await userEvent.type(input, "99");
+    await userEvent.tab(); // trigger blur
+    expect(onValueChange).toHaveBeenLastCalledWith(10);
+  });
+
+  it("calls onValueChange with null when cleared and blurred", async () => {
+    const onValueChange = vi.fn();
+    render(<NumberInput aria-label="Qty" defaultValue={5} onValueChange={onValueChange} />);
+    const input = screen.getByRole("spinbutton", { name: "Qty" });
+    await userEvent.clear(input);
+    await userEvent.tab();
+    expect(onValueChange).toHaveBeenLastCalledWith(null);
+  });
+
+  it("responds to keyboard ArrowUp/ArrowDown", async () => {
+    const onValueChange = vi.fn();
+    render(<NumberInput aria-label="Qty" defaultValue={5} onValueChange={onValueChange} />);
+    const input = screen.getByRole("spinbutton", { name: "Qty" });
+    input.focus();
+    await userEvent.keyboard("{ArrowUp}");
+    expect(onValueChange).toHaveBeenLastCalledWith(6);
+    await userEvent.keyboard("{ArrowDown}");
+    expect(onValueChange).toHaveBeenLastCalledWith(5);
+  });
+});