@elabs-ai/components-ui 4.0.0

package/src/components/toolbar/index.ts

@@ -0,0 +1,14 @@
+export {
+  Toolbar,
+  ToolbarButton,
+  ToolbarSeparator,
+  ToolbarSlot,
+  ToolbarToggleGroup,
+  ToolbarToggleItem,
+  toolbarVariants,
+  type ToolbarButtonProps,
+  type ToolbarProps,
+  type ToolbarSeparatorProps,
+  type ToolbarToggleGroupProps,
+  type ToolbarToggleItemProps,
+} from "./toolbar";

package/src/components/toolbar/toolbar.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import {
+  AlignCenterIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  BoldIcon,
+  ItalicIcon,
+  Redo2Icon,
+  Undo2Icon,
+} from "lucide-react";
+
+import {
+  Toolbar,
+  ToolbarButton,
+  ToolbarSeparator,
+  ToolbarToggleGroup,
+  ToolbarToggleItem,
+} from "./toolbar";
+
+/**
+ * A dense row of controls that acts on the content beside it — and the only row
+ * in the system that claims `role="toolbar"`, because it is the only one that
+ * keeps the role's promise: **one tab stop, arrow keys move between controls**.
+ *
+ * For the ordinary control row above a list or table, reach for `ViewToolbar`
+ * instead — there every control is its own tab stop, which is what readers
+ * expect there.
+ */
+const meta = {
+  title: "Foundation/Toolbar",
+  component: Toolbar,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+  args: { "aria-label": "Formatting" },
+} satisfies Meta<typeof Toolbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Toolbar {...args}>
+      <ToolbarButton aria-label="Undo" size="icon-sm">
+        <Undo2Icon aria-hidden="true" />
+      </ToolbarButton>
+      <ToolbarButton aria-label="Redo" size="icon-sm">
+        <Redo2Icon aria-hidden="true" />
+      </ToolbarButton>
+      <ToolbarSeparator />
+      <ToolbarToggleGroup type="multiple" aria-label="Text style">
+        <ToolbarToggleItem value="bold" aria-label="Bold">
+          <BoldIcon aria-hidden="true" />
+        </ToolbarToggleItem>
+        <ToolbarToggleItem value="italic" aria-label="Italic">
+          <ItalicIcon aria-hidden="true" />
+        </ToolbarToggleItem>
+      </ToolbarToggleGroup>
+      <ToolbarSeparator />
+      <ToolbarToggleGroup type="single" defaultValue="left" aria-label="Alignment">
+        <ToolbarToggleItem value="left" aria-label="Align left">
+          <AlignLeftIcon aria-hidden="true" />
+        </ToolbarToggleItem>
+        <ToolbarToggleItem value="center" aria-label="Align centre">
+          <AlignCenterIcon aria-hidden="true" />
+        </ToolbarToggleItem>
+        <ToolbarToggleItem value="right" aria-label="Align right">
+          <AlignRightIcon aria-hidden="true" />
+        </ToolbarToggleItem>
+      </ToolbarToggleGroup>
+      <span className="flex-1" />
+      <ToolbarButton variant="outline">Publish</ToolbarButton>
+    </Toolbar>
+  ),
+};
+
+/**
+ * The behaviour the role promises, exercised: Tab reaches the toolbar ONCE, and
+ * the arrow keys walk it. A row that claims `role="toolbar"` without this tells
+ * a screen-reader user to press keys that do nothing.
+ */
+export const KeyboardNavigation: Story = {
+  ...Default,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const toolbar = canvas.getByRole("toolbar", { name: "Formatting" });
+
+    await userEvent.tab();
+    const undo = canvas.getByRole("button", { name: "Undo" });
+    await expect(undo).toHaveFocus();
+
+    await userEvent.keyboard("{ArrowRight}");
+    await expect(canvas.getByRole("button", { name: "Redo" })).toHaveFocus();
+
+    // Out of the toolbar in one Tab — the whole row is a single stop.
+    await userEvent.tab();
+    await expect(toolbar.contains(document.activeElement)).toBe(false);
+  },
+};
+
+/** A rail beside the content it acts on. Arrow keys follow the orientation. */
+export const Vertical: Story = {
+  args: { "aria-label": "Document", orientation: "vertical" },
+  render: (args) => (
+    <Toolbar {...args} className="w-fit">
+      <ToolbarButton aria-label="Undo" size="icon-sm">
+        <Undo2Icon aria-hidden="true" />
+      </ToolbarButton>
+      <ToolbarButton aria-label="Redo" size="icon-sm">
+        <Redo2Icon aria-hidden="true" />
+      </ToolbarButton>
+      <ToolbarSeparator />
+      <ToolbarToggleGroup type="multiple" aria-label="Text style">
+        <ToolbarToggleItem value="bold" aria-label="Bold">
+          <BoldIcon aria-hidden="true" />
+        </ToolbarToggleItem>
+      </ToolbarToggleGroup>
+    </Toolbar>
+  ),
+};
+
+/** Explicitly horizontal — the default, spelled out. */
+export const Horizontal: Story = {
+  ...Default,
+  args: { "aria-label": "Formatting", orientation: "horizontal" },
+};

package/src/components/toolbar/toolbar.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { Toolbar, ToolbarButton, ToolbarSeparator } from "./toolbar";
+
+function Fixture() {
+  return (
+    <>
+      <button type="button">before</button>
+      <Toolbar aria-label="Document">
+        <ToolbarButton>First</ToolbarButton>
+        <ToolbarSeparator />
+        <ToolbarButton>Second</ToolbarButton>
+        <ToolbarButton>Third</ToolbarButton>
+      </Toolbar>
+      <button type="button">after</button>
+    </>
+  );
+}
+
+describe("Toolbar", () => {
+  it("is a named toolbar", () => {
+    render(<Fixture />);
+    expect(screen.getByRole("toolbar", { name: "Document" })).toBeInTheDocument();
+  });
+
+  it("is ONE tab stop — the promise the role makes", async () => {
+    render(<Fixture />);
+
+    await userEvent.tab();
+    expect(screen.getByRole("button", { name: "before" })).toHaveFocus();
+
+    await userEvent.tab();
+    expect(screen.getByRole("button", { name: "First" })).toHaveFocus();
+
+    // Not "Second": the whole row is a single stop, so Tab leaves it.
+    await userEvent.tab();
+    expect(screen.getByRole("button", { name: "after" })).toHaveFocus();
+  });
+
+  it("moves between controls with the arrow keys", async () => {
+    render(<Fixture />);
+
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.keyboard("{ArrowRight}");
+    expect(screen.getByRole("button", { name: "Second" })).toHaveFocus();
+
+    await userEvent.keyboard("{ArrowLeft}");
+    expect(screen.getByRole("button", { name: "First" })).toHaveFocus();
+  });
+
+  it("returns focus to the control the user left, not to the first one", async () => {
+    render(<Fixture />);
+
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.keyboard("{ArrowRight}{ArrowRight}");
+    expect(screen.getByRole("button", { name: "Third" })).toHaveFocus();
+
+    await userEvent.tab();
+    await userEvent.tab({ shift: true });
+    expect(screen.getByRole("button", { name: "Third" })).toHaveFocus();
+  });
+
+  it("keeps the separator out of the accessibility tree's control list", () => {
+    render(<Fixture />);
+    // Radix renders it as a real separator, not a focusable child.
+    expect(screen.getByRole("separator")).toBeInTheDocument();
+    expect(screen.getAllByRole("button")).toHaveLength(5);
+  });
+});

package/src/components/toolbar/toolbar.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+/**
+ * Toolbar — the ONE row that genuinely claims `role="toolbar"`.
+ *
+ * The role is a promise: a toolbar is a SINGLE tab stop, and the arrow keys move
+ * between its controls (WAI-ARIA APG). Four rows in this repo claim the role
+ * without implementing that, which is worse than not claiming it — a screen
+ * reader tells the user to press the arrow keys and nothing happens. This
+ * component delegates the roving tabindex to `@radix-ui/react-toolbar` so the
+ * promise is kept, and exists so no one has to hand-roll it again.
+ *
+ * When NOT to use it. A row of ordinary controls above a list or table is a
+ * `ViewToolbar` — that component deliberately does not claim the role, because
+ * every control there is an ordinary tab stop and readers expect Tab, not
+ * arrows. Reach for `Toolbar` when the row is DENSE and SECONDARY to the content
+ * it acts on (a document's page/zoom controls, a formatting bar): collapsing a
+ * dozen controls into one tab stop is what makes the content reachable again.
+ *
+ * Anatomy — a shell plus three composable parts. There is no `actions` prop and
+ * no items array: a toolbar's layout is the caller's, so groups are arranged
+ * with ordinary flex utilities and `ToolbarSeparator` between them.
+ */
+
+import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
+import { cva, type VariantProps } from "class-variance-authority";
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+
+import { cn } from "../../lib/cn";
+import { buttonVariants } from "../button";
+import { toggleVariants } from "../toggle";
+
+/* -------------------------------------------------------------------------- */
+/* Root                                                                        */
+/* -------------------------------------------------------------------------- */
+
+export const toolbarVariants = cva("flex items-center gap-1", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      // Radix already writes `aria-orientation`; this only lays it out.
+      vertical: "h-full flex-col",
+    },
+  },
+  defaultVariants: { orientation: "horizontal" },
+});
+
+export interface ToolbarProps
+  extends
+    Omit<ComponentPropsWithoutRef<typeof ToolbarPrimitive.Root>, "orientation">,
+    VariantProps<typeof toolbarVariants> {
+  /**
+   * What this toolbar acts on ("Document", "Formatting"). A toolbar is one tab
+   * stop with several controls inside it, so without a name a screen-reader
+   * user lands on an anonymous group — hence required, not optional.
+   */
+  "aria-label": string;
+}
+
+/**
+ * The row shell. Renders no surface of its own: a toolbar sits ON something
+ * (a card header, a document frame) and inherits that surface, so painting a
+ * background here would double the fill wherever it is placed.
+ */
+export const Toolbar = forwardRef<ElementRef<typeof ToolbarPrimitive.Root>, ToolbarProps>(
+  function Toolbar({ className, orientation, ...props }, ref) {
+    return (
+      <ToolbarPrimitive.Root
+        ref={ref}
+        data-slot="toolbar"
+        orientation={orientation ?? "horizontal"}
+        className={cn(toolbarVariants({ orientation }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+/* -------------------------------------------------------------------------- */
+/* Parts                                                                       */
+/* -------------------------------------------------------------------------- */
+
+export interface ToolbarButtonProps
+  extends
+    ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button>,
+    Pick<VariantProps<typeof buttonVariants>, "variant" | "size"> {}
+
+/**
+ * A control inside the toolbar. Styled with `buttonVariants` — the same ink,
+ * heights and focus ring as every other button in the system, not a parallel
+ * set. Icon-only controls take `size="icon-sm"` and MUST carry an `aria-label`;
+ * wrap in a `Tooltip` when the glyph needs a name on screen too.
+ */
+export const ToolbarButton = forwardRef<
+  ElementRef<typeof ToolbarPrimitive.Button>,
+  ToolbarButtonProps
+>(function ToolbarButton({ className, variant = "ghost", size = "sm", ...props }, ref) {
+  return (
+    <ToolbarPrimitive.Button
+      ref={ref}
+      data-slot="toolbar-button"
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+});
+
+export type ToolbarSeparatorProps = ComponentPropsWithoutRef<typeof ToolbarPrimitive.Separator>;
+
+/**
+ * The divider between two groups of controls. It is the ONLY cue between two
+ * same-fill regions of the row, so it takes the strong rung (WCAG 1.4.11,
+ * ADR 0010) — `Separator`'s subtle default would be a decorative hairline here.
+ */
+export const ToolbarSeparator = forwardRef<
+  ElementRef<typeof ToolbarPrimitive.Separator>,
+  ToolbarSeparatorProps
+>(function ToolbarSeparator({ className, ...props }, ref) {
+  return (
+    <ToolbarPrimitive.Separator
+      ref={ref}
+      data-slot="toolbar-separator"
+      className={cn(
+        "bg-border-strong mx-1 shrink-0",
+        "data-[orientation=horizontal]:h-5 data-[orientation=horizontal]:w-px",
+        "data-[orientation=vertical]:h-px data-[orientation=vertical]:w-5",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export type ToolbarToggleGroupProps = ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleGroup>;
+
+/** A set of mutually-exclusive or multi-select toggles (a view switcher, bold/italic). */
+export const ToolbarToggleGroup = forwardRef<
+  ElementRef<typeof ToolbarPrimitive.ToggleGroup>,
+  ToolbarToggleGroupProps
+>(function ToolbarToggleGroup({ className, ...props }, ref) {
+  return (
+    <ToolbarPrimitive.ToggleGroup
+      ref={ref}
+      data-slot="toolbar-toggle-group"
+      className={cn("flex items-center gap-1", className)}
+      {...props}
+    />
+  );
+});
+
+export interface ToolbarToggleItemProps
+  extends
+    ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleItem>,
+    Pick<VariantProps<typeof toggleVariants>, "size"> {}
+
+/** One toggle. Shares `Toggle`'s pressed styling, so state reads the same everywhere. */
+export const ToolbarToggleItem = forwardRef<
+  ElementRef<typeof ToolbarPrimitive.ToggleItem>,
+  ToolbarToggleItemProps
+>(function ToolbarToggleItem({ className, size = "sm", ...props }, ref) {
+  return (
+    <ToolbarPrimitive.ToggleItem
+      ref={ref}
+      data-slot="toolbar-toggle-item"
+      className={cn(toggleVariants({ size }), className)}
+      {...props}
+    />
+  );
+});
+
+/**
+ * An escape hatch for anything the parts above do not cover — a `Select`, an
+ * input, a `DropdownMenu` trigger. `asChild` hands the roving-tabindex wiring to
+ * whatever you render, so the control stays part of the arrow-key sequence
+ * instead of becoming a second tab stop inside a single-tab-stop row.
+ */
+export const ToolbarSlot = ToolbarPrimitive.Button;

package/src/components/tooltip/index.ts

@@ -0,0 +1 @@
+export { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from "./tooltip";

package/src/components/tooltip/tooltip.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor, within } from "storybook/test";
+import { Button } from "../button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+
+const meta = {
+  title: "Overlays/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  argTypes: {
+    open: {
+      description: "Controlled open state of the tooltip.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    defaultOpen: {
+      description: "Uncontrolled initial open state.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    onOpenChange: {
+      description: "Callback when the open state changes.",
+      control: false,
+      table: { category: "Events" },
+    },
+    delayDuration: {
+      description: "Milliseconds to wait before opening. Default 700.",
+      control: "number",
+      table: { category: "Behaviour" },
+    },
+    disableHoverableContent: {
+      description: "Prevent the tooltip content from being hoverable.",
+      control: "boolean",
+      table: { category: "Behaviour" },
+    },
+  },
+} satisfies Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Hover me</Button>
+        </TooltipTrigger>
+        <TooltipContent>Helpful context</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  ),
+  // Hovers over the trigger (delay zeroed for determinism) to open the portalled
+  // tooltip and confirms the content is visible. NOTE: Radix renders the visible
+  // tooltip content as a node separate from its clipped, sr-only role="tooltip"
+  // announcement span — so we assert on the visible CONTENT text, not getByRole.
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: /hover me/i });
+    await userEvent.hover(trigger);
+    const body = within(canvasElement.ownerDocument.body);
+    // Radix nests an sr-only role="tooltip" copy of the text INSIDE the visible
+    // popper content, so the text matches twice. Target the popper content node
+    // (the only one carrying data-side) and assert it is visible.
+    const content = await body.findByText("Helpful context", { selector: "[data-side]" });
+    // wait out the fade-in entrance animation before asserting visibility
+    await waitFor(() => expect(content).toBeVisible());
+  },
+};

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,27 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../lib/cn";
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+export const Tooltip = TooltipPrimitive.Root;
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+
+export const TooltipContent = forwardRef<
+  ElementRef<typeof TooltipPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(function TooltipContent({ className, sideOffset = 6, ...props }, ref) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 overflow-hidden rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md",
+          "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
+          className,
+        )}
+        {...props}
+      />
+    </TooltipPrimitive.Portal>
+  );
+});

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

@@ -0,0 +1 @@
+export { TopNav, type TopNavProps } from "./top-nav";

package/src/components/top-nav/top-nav.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../button";
+import { TopNav } from "./top-nav";
+const meta = {
+  title: "Layout/TopNav",
+  component: TopNav,
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof TopNav>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <TopNav
+      start={<span className="font-semibold">Dashboard</span>}
+      end={<Button size="sm">Invite</Button>}
+    />
+  ),
+};

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

@@ -0,0 +1,34 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export interface TopNavProps extends HTMLAttributes<HTMLElement> {
+  /** Left slot (brand on mobile, breadcrumbs, title). */
+  start?: ReactNode;
+  /** Right slot (search, actions, account menu). */
+  end?: ReactNode;
+}
+
+/** Application top bar. Sticky, single row, brand-neutral. */
+export const TopNav = forwardRef<HTMLElement, TopNavProps>(function TopNav(
+  { className, start, end, children, ...props },
+  ref,
+) {
+  return (
+    <header
+      ref={ref}
+      className={cn(
+        "sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-surface-elevated/80 px-4 backdrop-blur",
+        className,
+      )}
+      {...props}
+    >
+      {start ? <div className="flex items-center gap-2">{start}</div> : null}
+      {children ? (
+        <div className="flex flex-1 items-center">{children}</div>
+      ) : (
+        <div className="flex-1" />
+      )}
+      {end ? <div className="flex items-center gap-2">{end}</div> : null}
+    </header>
+  );
+});

package/src/components/transfer/index.ts

@@ -0,0 +1,2 @@
+export { Transfer } from "./transfer";
+export type { TransferItem, TransferProps } from "./transfer";