@vendure-io/ui 2.0.0-beta.4 → 2.0.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendure-io/ui",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.6",
   "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",

package/src/components/atoms/sidebar.tsx

@@ -302,22 +302,32 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
   )
 }
 
-function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+function SidebarInset({
+  className,
+  render,
+  ...props
+}: useRender.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]: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}
-    />
-  )
+  return useRender({
+    defaultTagName: "main",
+    props: mergeProps<"main">(
+      {
+        className: cn(
+          "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
+    ),
+    render,
+    state: {
+      slot: "sidebar-inset",
+    },
+  })
 }
 
 function SidebarInput({

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

@@ -17,13 +17,14 @@ import type * as React from 'react';
 // The sidebar slot is deliberately unopinionated: drop the full `Sidebar` atom in
 // for a real app, or use `AppShellSidebar` for a lightweight rail. Content owns a
 // header + main anatomy so every consumer gets the same scroll boundary and skip
-// link target without coupling the design system to a router or auth provider.
+// link target without coupling the design system to a router or auth provider. The
+// shell is viewport-bound so the canvas inset remains visible while main scrolls.
 
 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)}
+      className={cn('bg-background text-foreground flex h-svh w-full overflow-hidden', className)}
       {...props}
     />
   );
@@ -72,16 +73,38 @@ function AppShellHeader({ className, ...props }: React.ComponentProps<'header'>)
   );
 }
 
-function AppShellMain({ className, id = 'main-content', ...props }: React.ComponentProps<'main'>) {
+interface AppShellMainProps extends React.ComponentProps<'main'> {
+  /** The element responsible for scrolling the main content region. */
+  scrollOwner?: 'main' | 'container';
+}
+
+function AppShellMain({
+  className,
+  id = 'main-content',
+  scrollOwner = 'main',
+  ...props
+}: AppShellMainProps) {
   return (
     <main
       id={id}
       tabIndex={-1}
       data-slot="app-shell-main"
-      className={cn('min-w-0 flex-1 overflow-auto outline-none', className)}
+      className={cn(
+        scrollOwner === 'main'
+          ? 'min-h-0 min-w-0 flex-1 overflow-auto outline-none'
+          : 'min-w-0 flex-1 outline-none',
+        className,
+      )}
       {...props}
     />
   );
 }
 
-export { AppShell, AppShellSidebar, AppShellContent, AppShellHeader, AppShellMain };
+export {
+  AppShell,
+  AppShellSidebar,
+  AppShellContent,
+  AppShellHeader,
+  AppShellMain,
+  type AppShellMainProps,
+};