@vendure-io/ui 2.0.0-beta.1 → 2.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendure-io/ui",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.3",
   "description": "React component library for Vendure, built on shadcn/ui and Tailwind v4",
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://github.com/vendurehq/design/tree/main/packages/ui",
@@ -50,7 +50,7 @@
   "dependencies": {
     "@base-ui/react": "^1.2.0",
     "@tanstack/react-table": "^8.21.3",
-    "@vendure-io/design-tokens": "^2.0.0-beta.0",
+    "@vendure-io/design-tokens": "^2.0.0-beta.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

package/src/components/atoms/card.tsx

@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "bg-card text-card-foreground group/card flex flex-col gap-6 overflow-hidden rounded-xl py-6 text-sm has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "bg-card text-card-foreground group/card flex flex-col gap-6 overflow-hidden rounded-xl border border-border/60 py-6 text-sm has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className
       )}
       {...props}

package/src/components/atoms/sidebar.tsx

@@ -303,11 +303,16 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
 }
 
 function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  // The inset variant is our recessed content pane, built on the surface ramp: it
+  // steps up to --surface while the wrapper stays on --background, so the shell
+  // recedes and cards (--surface-raised) lift off the pane. A border carries the
+  // tier in light mode where the ramp collapses to white; flat by design, no drop
+  // shadow (see AGENTS.md "flat look"). The default variant stays flush on canvas.
   return (
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:bg-surface md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:border-border/60 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}
       {...props}

package/src/components/atoms/table.tsx

@@ -57,7 +57,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border/50 transition-colors",
         className
       )}
       {...props}

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

@@ -0,0 +1,60 @@
+import { cn } from '@vendure-io/ui/lib/utils';
+import type * as React from 'react';
+
+// AppShell — the recessed-surface app layout, built on the surface ramp.
+//
+// Nests three surface tiers so the chrome reads as "deep" the way Linear's does:
+//
+//   AppShell         → --background     the canvas the whole window sits on
+//   AppShellSidebar  → --sidebar        nav rail; equals the canvas, so it recedes
+//   AppShellContent  → --surface        the content pane, stepped forward + inset
+//
+// Cards dropped into the content pane resolve to --surface-raised (via the `card`
+// token), completing the third step. In dark mode each tier is a lightness step;
+// in light mode the ramp collapses to white, so the pane's border + shadow carry
+// the step instead. That asymmetry is intentional, not a gap.
+//
+// The sidebar slot is deliberately unopinionated: drop the full `Sidebar` atom in
+// for a real app, or use `AppShellSidebar` for a lightweight rail.
+
+function AppShell({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="app-shell"
+      className={cn('bg-background text-foreground flex min-h-svh w-full', className)}
+      {...props}
+    />
+  );
+}
+
+function AppShellSidebar({ className, ...props }: React.ComponentProps<'aside'>) {
+  return (
+    <aside
+      data-slot="app-shell-sidebar"
+      className={cn(
+        'bg-sidebar text-sidebar-foreground flex w-64 shrink-0 flex-col gap-1 p-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AppShellContent({ className, ...props }: React.ComponentProps<'main'>) {
+  return (
+    <main
+      data-slot="app-shell-content"
+      className={cn(
+        // The missing tier: step up to --surface and inset from the canvas so the
+        // shell frames the pane on all sides, including a gutter between the
+        // sidebar and the pane. Flat by design: the border carries the tier in
+        // light mode (see AGENTS.md "flat look"), so no drop shadow.
+        'bg-surface m-3 flex flex-1 flex-col overflow-hidden rounded-xl border border-border/60',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { AppShell, AppShellSidebar, AppShellContent };

package/src/components/molecules/data-table/data-table.tsx

@@ -367,95 +367,97 @@ function DataTable<TData>({
         <DataTableBulkActions table={table} cache={selectionCache} render={bulkActions} />
       )}
 
-      <Table>
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="group/header-row">
-              {headerGroup.headers.map((headerCell) => {
-                const content = headerCell.isPlaceholder
-                  ? null
-                  : flexRender(headerCell.column.columnDef.header, headerCell.getContext());
-                return (
-                  <TableHead
-                    key={headerCell.id}
-                    aria-sort={ariaSort(sorting != null, headerCell.column)}
-                    className={columnClass(headerCell.column.id)}
-                  >
-                    {sorting != null && !headerCell.isPlaceholder ? (
-                      <DataTableColumnHeader
-                        column={headerCell.column}
-                        sortLabel={l.sortLabel(headerLabelText(headerCell.column))}
-                      >
-                        {content}
-                      </DataTableColumnHeader>
-                    ) : (
-                      content
-                    )}
-                  </TableHead>
-                );
-              })}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {isLoading && rows.length === 0 ? (
-            Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (
-              <TableRow key={`skeleton-${rowIndex}`}>
-                {Array.from({ length: Math.max(columnCount, 1) }).map((__, cellIndex) => (
-                  <TableCell key={`skeleton-cell-${cellIndex}`}>
-                    <Skeleton className="h-4 w-full" />
-                  </TableCell>
-                ))}
+      <div className="bg-card overflow-hidden rounded-xl border border-border/60">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="group/header-row">
+                {headerGroup.headers.map((headerCell) => {
+                  const content = headerCell.isPlaceholder
+                    ? null
+                    : flexRender(headerCell.column.columnDef.header, headerCell.getContext());
+                  return (
+                    <TableHead
+                      key={headerCell.id}
+                      aria-sort={ariaSort(sorting != null, headerCell.column)}
+                      className={columnClass(headerCell.column.id)}
+                    >
+                      {sorting != null && !headerCell.isPlaceholder ? (
+                        <DataTableColumnHeader
+                          column={headerCell.column}
+                          sortLabel={l.sortLabel(headerLabelText(headerCell.column))}
+                        >
+                          {content}
+                        </DataTableColumnHeader>
+                      ) : (
+                        content
+                      )}
+                    </TableHead>
+                  );
+                })}
               </TableRow>
-            ))
-          ) : bodyRows.length === 0 ? (
-            <TableRow className="hover:bg-transparent">
-              <TableCell
-                colSpan={Math.max(columnCount, 1)}
-                className="text-muted-foreground h-24 text-center"
-              >
-                {emptyState ?? l.empty}
-              </TableCell>
-            </TableRow>
-          ) : (
-            bodyRows.map((row) => {
-              const rowNode = (
-                <TableRow
-                  className="group/row"
-                  data-state={row.getIsSelected() ? 'selected' : undefined}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id} className={columnClass(cell.column.id)}>
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isLoading && rows.length === 0 ? (
+              Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (
+                <TableRow key={`skeleton-${rowIndex}`}>
+                  {Array.from({ length: Math.max(columnCount, 1) }).map((__, cellIndex) => (
+                    <TableCell key={`skeleton-cell-${cellIndex}`}>
+                      <Skeleton className="h-4 w-full" />
                     </TableCell>
                   ))}
                 </TableRow>
-              );
-              // Right-click accelerator: the row itself is the context-menu
-              // trigger, so the consumer supplies only the items and the core
-              // owns the menu chrome.
-              const defaultRow = contextActions ? (
-                <ContextMenu>
-                  <ContextMenuTrigger render={rowNode} />
-                  <ContextMenuContent>
-                    {contextActions(row.original, { row, table })}
-                  </ContextMenuContent>
-                </ContextMenu>
-              ) : (
-                rowNode
-              );
-              // Row-render seam: consumers can swap the default row for a
-              // full-width utility row or a per-row wrapper the cell grid can't
-              // express. Returning `defaultRow` keeps the built-in rendering.
-              return (
-                <React.Fragment key={row.id}>
-                  {renderRow ? renderRow(row, { table, columnCount, defaultRow }) : defaultRow}
-                </React.Fragment>
-              );
-            })
-          )}
-        </TableBody>
-      </Table>
+              ))
+            ) : bodyRows.length === 0 ? (
+              <TableRow className="hover:bg-transparent">
+                <TableCell
+                  colSpan={Math.max(columnCount, 1)}
+                  className="text-muted-foreground h-24 text-center"
+                >
+                  {emptyState ?? l.empty}
+                </TableCell>
+              </TableRow>
+            ) : (
+              bodyRows.map((row) => {
+                const rowNode = (
+                  <TableRow
+                    className="group/row"
+                    data-state={row.getIsSelected() ? 'selected' : undefined}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id} className={columnClass(cell.column.id)}>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+                // Right-click accelerator: the row itself is the context-menu
+                // trigger, so the consumer supplies only the items and the core
+                // owns the menu chrome.
+                const defaultRow = contextActions ? (
+                  <ContextMenu>
+                    <ContextMenuTrigger render={rowNode} />
+                    <ContextMenuContent>
+                      {contextActions(row.original, { row, table })}
+                    </ContextMenuContent>
+                  </ContextMenu>
+                ) : (
+                  rowNode
+                );
+                // Row-render seam: consumers can swap the default row for a
+                // full-width utility row or a per-row wrapper the cell grid can't
+                // express. Returning `defaultRow` keeps the built-in rendering.
+                return (
+                  <React.Fragment key={row.id}>
+                    {renderRow ? renderRow(row, { table, columnCount, defaultRow }) : defaultRow}
+                  </React.Fragment>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
 
       {pagination && (
         <TablePagination