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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendure-io/ui",
-  "version": "2.0.0-beta.2",
+  "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,7 +367,7 @@ function DataTable<TData>({
         <DataTableBulkActions table={table} cache={selectionCache} render={bulkActions} />
       )}
 
-      <div className="bg-card overflow-hidden rounded-xl border">
+      <div className="bg-card overflow-hidden rounded-xl border border-border/60">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (