@elabs-ai/components-ui 4.0.0

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

@@ -0,0 +1,179 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+export const DropdownMenuSubTrigger = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }
+>(function DropdownMenuSubTrigger({ className, inset, children, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      ref={ref}
+      data-slot="dropdown-menu-sub-trigger"
+      className={cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
+        inset && "ps-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight className="ms-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+});
+
+export const DropdownMenuSubContent = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(function DropdownMenuSubContent({ className, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.SubContent
+        ref={ref}
+        data-slot="dropdown-menu-sub-content"
+        className={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+});
+
+export const DropdownMenuRadioItem = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(function DropdownMenuRadioItem({ className, children, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      ref={ref}
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute start-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Circle className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+});
+
+export const DropdownMenuCheckboxItem = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(function DropdownMenuCheckboxItem({ className, children, checked, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      ref={ref}
+      checked={checked}
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute start-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Check className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+});
+
+export const DropdownMenuContent = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(function DropdownMenuContent({ className, sideOffset = 6, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[10rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+});
+
+export const DropdownMenuItem = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { inset?: boolean }
+>(function DropdownMenuItem({ className, inset, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={cn(
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors duration-fast",
+        "focus:bg-accent focus:text-accent-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "[&_svg]:size-4 [&_svg]:shrink-0",
+        inset && "ps-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const DropdownMenuLabel = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
+>(function DropdownMenuLabel({ className, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Label
+      ref={ref}
+      className={cn("px-2 py-1.5 text-xs font-semibold text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+
+export const DropdownMenuSeparator = forwardRef<
+  ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(function DropdownMenuSeparator({ className, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      ref={ref}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+});
+
+export function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn("ms-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,17 @@
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuRadioGroup,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+} from "./dropdown-menu";

package/src/components/empty-state/empty-state.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../button";
+import { EmptyState } from "./empty-state";
+
+const meta = {
+  title: "States/EmptyState",
+  component: EmptyState,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '@deprecated — use `<StatePanel kind="empty" />` instead. Thin back-compat wrapper.',
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      description: "Heading text shown in the empty state.",
+      control: "text",
+      table: { category: "Content" },
+    },
+    description: {
+      description: "Supporting description shown below the title.",
+      control: "text",
+      table: { category: "Content" },
+    },
+    icon: {
+      description: "Icon or illustration shown above the title.",
+      control: false,
+      table: { category: "Content" },
+    },
+    actions: {
+      description: "Primary or secondary action buttons.",
+      control: false,
+      table: { category: "Content" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the container.",
+      control: "text",
+      table: { category: "Styling" },
+    },
+  },
+} satisfies Meta<typeof EmptyState>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "No projects yet",
+    description: "Create your first project to get started.",
+    actions: <Button size="sm">New project</Button>,
+  },
+};

package/src/components/empty-state/empty-state.test.tsx

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { EmptyState } from "./empty-state";
+
+describe("EmptyState", () => {
+  it("renders title and description", () => {
+    render(<EmptyState title="Empty" description="Nothing here" />);
+    expect(screen.getByText("Empty")).toBeInTheDocument();
+    expect(screen.getByText("Nothing here")).toBeInTheDocument();
+  });
+});

package/src/components/empty-state/empty-state.tsx

@@ -0,0 +1,30 @@
+/**
+ * @deprecated Use `StatePanel kind="empty"` from `@elabs-ai/components-ui` instead.
+ * This wrapper is kept for back-compat and will be removed in a future release.
+ */
+import { type ReactNode } from "react";
+import { StatePanel } from "../state-panel/state-panel";
+
+export interface EmptyStateProps {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Optional icon/illustration shown above the title. */
+  icon?: ReactNode;
+  /** Primary/secondary actions. */
+  actions?: ReactNode;
+  className?: string;
+}
+
+/** @deprecated Use `<StatePanel kind="empty" />` instead. */
+export function EmptyState({ title, description, icon, actions, className }: EmptyStateProps) {
+  return (
+    <StatePanel
+      kind="empty"
+      title={title}
+      description={description}
+      icon={icon}
+      actions={actions}
+      className={className}
+    />
+  );
+}

package/src/components/empty-state/index.ts

@@ -0,0 +1 @@
+export { EmptyState, type EmptyStateProps } from "./empty-state";

package/src/components/error-state/error-state.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../button";
+import { ErrorState } from "./error-state";
+
+const meta = {
+  title: "States/ErrorState",
+  component: ErrorState,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '@deprecated — use `<StatePanel kind="error" />` instead. Thin back-compat wrapper.',
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      description: 'Heading text. Defaults to "Something went wrong".',
+      control: "text",
+      table: { category: "Content" },
+    },
+    description: {
+      description: "Supporting description. Defaults to a generic error message.",
+      control: "text",
+      table: { category: "Content" },
+    },
+    actions: {
+      description: "Retry or support action buttons.",
+      control: false,
+      table: { category: "Content" },
+    },
+    className: {
+      description: "Additional CSS classes applied to the container.",
+      control: "text",
+      table: { category: "Styling" },
+    },
+  },
+} satisfies Meta<typeof ErrorState>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    actions: (
+      <Button size="sm" variant="outline">
+        Retry
+      </Button>
+    ),
+  },
+};

package/src/components/error-state/error-state.tsx

@@ -0,0 +1,27 @@
+/**
+ * @deprecated Use `StatePanel kind="error"` from `@elabs-ai/components-ui` instead.
+ * This wrapper is kept for back-compat and will be removed in a future release.
+ */
+import { type ReactNode } from "react";
+import { StatePanel } from "../state-panel/state-panel";
+
+export interface ErrorStateProps {
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Optional retry / support actions. */
+  actions?: ReactNode;
+  className?: string;
+}
+
+/** @deprecated Use `<StatePanel kind="error" />` instead. */
+export function ErrorState({ title, description, actions, className }: ErrorStateProps) {
+  return (
+    <StatePanel
+      kind="error"
+      title={title}
+      description={description}
+      actions={actions}
+      className={className}
+    />
+  );
+}

package/src/components/error-state/index.ts

@@ -0,0 +1 @@
+export { ErrorState, type ErrorStateProps } from "./error-state";

package/src/components/expand-dialog/expand-dialog.stories.tsx

@@ -0,0 +1,246 @@
+import { useState, type ReactNode } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor, within } from "storybook/test";
+import { Button } from "../button";
+import { Dialog, DialogTrigger } from "../dialog";
+import { Heading, Text } from "../typography";
+import { ExpandDialog } from "./expand-dialog";
+
+/**
+ * The one "make this bigger" surface: enlarged content on the inline-start, its
+ * context on the inline-end. Every expand affordance in the system — a chart, a
+ * table, an image, a document — opens this, so the gesture means the same thing
+ * everywhere.
+ */
+const meta = {
+  title: "Overlays/ExpandDialog",
+  component: ExpandDialog,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ExpandDialog>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function SampleView({ label = "Enlarged content" }: { label?: string }) {
+  return (
+    <div className="grid h-full min-h-64 place-items-center rounded-md bg-surface-muted">
+      <Text tone="muted">{label}</Text>
+    </div>
+  );
+}
+
+function SampleDetail() {
+  return (
+    <div className="flex flex-col gap-3 p-4">
+      <Heading level={3} size="subtitle">
+        Summary
+      </Heading>
+      <Text variant="caption" tone="muted">
+        Context that explains what is on the left — a data summary, capture metadata, the provenance
+        of a document.
+      </Text>
+    </div>
+  );
+}
+
+/*
+ * Opens from a trigger you own; state stays in your component. The trigger is
+ * `outline` rather than the default primary purely so these stories exercise
+ * ExpandDialog and not the known light primary-fill contrast exemption
+ * (#180) — the component itself has no opinion about the trigger.
+ */
+function Frame({ children, label = "Expand" }: { children: ReactNode; label?: string }) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">{label}</Button>
+      </DialogTrigger>
+      {children}
+    </Dialog>
+  );
+}
+
+export const Default: Story = {
+  render: () => (
+    <Frame>
+      <ExpandDialog title="Revenue by region" detail={<SampleDetail />}>
+        <SampleView />
+      </ExpandDialog>
+    </Frame>
+  ),
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("button", { name: /expand/i }));
+    const body = within(canvasElement.ownerDocument.body);
+    const dialog = await body.findByRole("dialog");
+    await waitFor(() => expect(within(dialog).getByText("Revenue by region")).toBeVisible());
+    // The context pane is a named region, so AT can jump straight to it.
+    await expect(within(dialog).getByRole("region", { name: "Details" })).toBeInTheDocument();
+  },
+};
+
+/** A description gives the dialog its `aria-describedby`; without one it opts out. */
+export const WithDescription: Story = {
+  render: () => (
+    <Frame>
+      <ExpandDialog
+        title="Revenue by region"
+        description="Trailing twelve months, in reporting currency."
+        detail={<SampleDetail />}
+      >
+        <SampleView />
+      </ExpandDialog>
+    </Frame>
+  ),
+};
+
+/** Header actions sit on the title row — never in a second toolbar strip above it. */
+export const WithActions: Story = {
+  render: () => (
+    <Frame>
+      <ExpandDialog
+        title="Revenue by region"
+        actions={
+          <Button size="sm" variant="outline">
+            Download
+          </Button>
+        }
+        detail={<SampleDetail />}
+      >
+        <SampleView />
+      </ExpandDialog>
+    </Frame>
+  ),
+};
+
+/**
+ * No `detail` → one full-width track and no region wrapper at all. The optional
+ * pane costs nothing when it is not asked for.
+ */
+export const NoDetail: Story = {
+  render: () => (
+    <Frame>
+      <ExpandDialog title="Q3 architecture diagram">
+        <SampleView label="Single pane" />
+      </ExpandDialog>
+    </Frame>
+  ),
+};
+
+/** Context below rather than beside — for wide content that needs the full width. */
+export const DetailBottom: Story = {
+  render: () => (
+    <Frame>
+      <ExpandDialog
+        title="Deployment timeline"
+        detailPlacement="bottom"
+        detailSize="minmax(0, 12rem)"
+        detail={<SampleDetail />}
+      >
+        <SampleView />
+      </ExpandDialog>
+    </Frame>
+  ),
+};
+
+/**
+ * `stackBelow` re-runs the placement decision at a breakpoint: a 2.5fr/1fr split
+ * on a phone leaves the context pane about 107px wide — present, unreadable. All
+ * three breakpoints render here; resize the preview to see them swap.
+ */
+export const StackBelowSm: Story = {
+  render: () => (
+    <Frame>
+      <ExpandDialog title="Stacks below sm" stackBelow="sm" detail={<SampleDetail />}>
+        <SampleView />
+      </ExpandDialog>
+    </Frame>
+  ),
+};
+
+export const StackBelowMd: Story = {
+  render: () => (
+    <Frame>
+      <ExpandDialog title="Stacks below md" stackBelow="md" detail={<SampleDetail />}>
+        <SampleView />
+      </ExpandDialog>
+    </Frame>
+  ),
+};
+
+export const StackBelowLg: Story = {
+  render: () => (
+    <Frame>
+      <ExpandDialog title="Stacks below lg" stackBelow="lg" detail={<SampleDetail />}>
+        <SampleView />
+      </ExpandDialog>
+    </Frame>
+  ),
+};
+
+/** Explicit `never` — the default, spelled out. */
+export const StackNever: Story = {
+  render: () => (
+    <Frame>
+      <ExpandDialog title="Never stacks" stackBelow="never" detail={<SampleDetail />}>
+        <SampleView />
+      </ExpandDialog>
+    </Frame>
+  ),
+};
+
+/** `detailPlacement="side"` spelled out, for the same reason. */
+export const DetailSide: Story = {
+  render: () => (
+    <Frame>
+      <ExpandDialog title="Detail beside" detailPlacement="side" detail={<SampleDetail />}>
+        <SampleView />
+      </ExpandDialog>
+    </Frame>
+  ),
+};
+
+/**
+ * Both panes overflow. Each is its own scroll owner and its own tab stop — a
+ * scroll container with no focusable child is unreachable by keyboard (WCAG
+ * 2.1.1; axe `scrollable-region-focusable`).
+ */
+export const LongContent: Story = {
+  render: () => (
+    <Frame>
+      <ExpandDialog
+        title="A long report"
+        detail={
+          <div className="flex flex-col gap-2 p-4">
+            {Array.from({ length: 40 }, (_, i) => (
+              <Text key={i} variant="caption" tone="muted">
+                Note {i + 1}
+              </Text>
+            ))}
+          </div>
+        }
+      >
+        <div className="flex flex-col gap-4">
+          {Array.from({ length: 40 }, (_, i) => (
+            <Text key={i}>Paragraph {i + 1}</Text>
+          ))}
+        </div>
+      </ExpandDialog>
+    </Frame>
+  ),
+};
+
+/** Controlled open state, for an app that drives it from a menu or a route. */
+export const Controlled: Story = {
+  render: function ControlledStory() {
+    const [open, setOpen] = useState(false);
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <Button variant="outline" onClick={() => setOpen(true)}>
+          Open from outside
+        </Button>
+        <ExpandDialog title="Controlled" detail={<SampleDetail />}>
+          <SampleView />
+        </ExpandDialog>
+      </Dialog>
+    );
+  },
+};