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

package/README.md

@@ -4,8 +4,8 @@ React component library for Vendure, built on [shadcn/ui](https://ui.shadcn.com/
 
 ## Install
 
-```bash
-npm install @vendure-io/ui
+```sh
+bun add @vendure-io/ui
 ```
 
 ### Peer dependencies
@@ -13,7 +13,7 @@ npm install @vendure-io/ui
 - `react` >= 19
 - `react-dom` >= 19
 
-Optional peers: `next`, `next-themes`, `react-hook-form`
+Optional peers: `next`, `next-themes`
 
 ## Usage
 
@@ -32,6 +32,9 @@ import { cn } from "@vendure-io/ui/lib/utils";
 | `@vendure-io/ui/lib/base-ui` | `@base-ui/react` primitive namespaces (see below) |
 | `@vendure-io/ui/hooks/*` | Shared React hooks |
 
+See the repository's [component guide](../../docs/ui-components.md) for the full
+atom and molecule inventory.
+
 ## Customizing wrapper components
 
 The components under `components/atoms/*` are thin wrappers around [`@base-ui/react`](https://base-ui.com/) primitives. To override a single subcomponent (e.g. swap `DialogTitle` for one with a different font) while re-using the rest, import the underlying primitive namespace from `@vendure-io/ui/lib/base-ui` rather than from `@base-ui/react` directly:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendure-io/ui",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.11",
   "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",
@@ -33,8 +33,7 @@
     "react": ">=19",
     "react-dom": ">=19",
     "next": ">=14",
-    "next-themes": "^0.4.6",
-    "react-hook-form": ">=7"
+    "next-themes": "^0.4.6"
   },
   "peerDependenciesMeta": {
     "next": {
@@ -42,15 +41,15 @@
     },
     "next-themes": {
       "optional": true
-    },
-    "react-hook-form": {
-      "optional": true
     }
   },
   "dependencies": {
     "@base-ui/react": "^1.2.0",
+    "@shikijs/langs": "^3.23.0",
+    "@shikijs/themes": "^3.23.0",
+    "@shikijs/transformers": "^3.22.0",
     "@tanstack/react-table": "^8.21.3",
-    "@vendure-io/design-tokens": "^2.0.0-beta.0",
+    "@vendure-io/design-tokens": "^2.0.0-beta.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -62,6 +61,7 @@
     "react-day-picker": "^9.14.0",
     "react-resizable-panels": "^4.7.0",
     "recharts": "2.15.4",
+    "shiki": "^3.22.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2"

package/src/components/atoms/button.tsx

@@ -6,11 +6,15 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@vendure-io/ui/lib/utils"
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all duration-(--transition-duration-fast) ease-(--ease-default) data-pressed:brightness-95 dark:data-pressed:brightness-110 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all duration-(--transition-duration-fast) ease-(--ease-default) data-pressed:brightness-95 dark:data-pressed:brightness-110 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        // Identity/marketing CTA only ("Start free trial", "Upgrade to Cloud"):
+        // a deliberate brand moment, not a louder `default` primary. Brand is a
+        // signature, not a wallpaper; see Button guidance before reaching for it.
+        brand: "bg-brand text-brand-foreground hover:bg-brand/80",
         outline:
           "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
         secondary:

package/src/components/atoms/card.tsx

@@ -2,6 +2,12 @@ import * as React from "react"
 
 import { cn } from "@vendure-io/ui/lib/utils"
 
+// The size variant publishes the card's spacing contract as CSS variables
+// (--card-px: horizontal content padding, --card-gap: vertical rhythm shared
+// by the root padding and the flex gap). Slots consume the variables instead
+// of `group-data-[size=sm]` hooks so that nested cards resolve to the NEAREST
+// card — a group selector matches any ancestor and leaks the outer card's
+// size into an inner one.
 function Card({
   className,
   size = "default",
@@ -12,7 +18,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 [--card-gap:--spacing(6)] [--card-px:--spacing(6)] data-[size=sm]:[--card-gap:--spacing(4)] data-[size=sm]:[--card-px:--spacing(4)] flex flex-col gap-(--card-gap) overflow-hidden rounded-xl border border-border/60 py-(--card-gap) text-sm has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className
       )}
       {...props}
@@ -20,12 +26,15 @@ function Card({
   )
 }
 
+// Band dividers (consumer-applied border-b / border-t on header/footer) render
+// at row-separator strength (border/50) so the card outline (border/60) stays
+// the strongest structural line.
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-header"
       className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-px) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:border-border/50 [.border-b]:pb-(--card-gap)",
         className
       )}
       {...props}
@@ -73,7 +82,32 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-content"
-      className={cn("px-6 group-data-[size=sm]/card:px-4", className)}
+      className={cn("px-(--card-px)", className)}
+      {...props}
+    />
+  )
+}
+
+// Hosts a Table full-bleed inside the card: negative vertical margins cancel
+// the card's flex gap against a border-b header / border-t footer, and cancel
+// the card's own padding when the table is the first/last child, so rows and
+// band dividers run edge to edge (the card's overflow-hidden clips the
+// corners). Edge cells get the card's content padding so cell content aligns
+// with CardHeader/CardFooter content. Two contract notes:
+// - The gap cancellation is unconditional: an adjacent CardHeader/CardFooter
+//   must carry its band border (border-b / border-t), otherwise the table
+//   sits directly against the band's content.
+// - The edge-cell selector ((0,2,1)) out-specifies a plain padding utility on
+//   the cell ((0,1,0)): a `pl-*`/`pr-*` on a first/last cell silently loses —
+//   override with the important modifier (`pl-0!`) when a cell must opt out.
+function CardTable({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-table"
+      className={cn(
+        "-my-(--card-gap) [&_tr>*:first-child]:pl-(--card-px) [&_tr>*:last-child]:pr-(--card-px)",
+        className
+      )}
       {...props}
     />
   )
@@ -84,7 +118,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4",
+        "flex items-center rounded-b-xl px-(--card-px) [.border-t]:border-border/50 [.border-t]:pt-(--card-gap)",
         className
       )}
       {...props}
@@ -100,4 +134,5 @@ export {
   CardAction,
   CardDescription,
   CardContent,
+  CardTable,
 }

package/src/components/atoms/scroll-area.tsx

@@ -39,7 +39,10 @@ function ScrollBar({
       data-orientation={orientation}
       orientation={orientation}
       className={cn(
-        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        // Overlay scrollbars: invisible at rest, fade in while the pointer is over
+        // the scroll area (data-hovering) or during active scrolling (data-scrolling).
+        // Base UI omits data-scrolling on programmatic scrolls, so route changes don't flash.
+        "flex touch-none p-px select-none opacity-0 transition-opacity data-hovering:opacity-100 data-scrolling:opacity-100 data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
         className
       )}
       {...props}

package/src/components/atoms/sidebar.tsx

@@ -302,17 +302,32 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
   )
 }
 
-function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
-  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",
-        className
-      )}
-      {...props}
-    />
-  )
+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 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/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/anonymized-token.tsx

@@ -53,9 +53,9 @@ interface AnonymizedTokenProps extends Omit<React.ComponentProps<'span'>, 'child
   copyable?: boolean;
   /** How long the check-mark feedback stays visible, in ms. */
   timeout?: CopyButtonProps['timeout'];
-  /** Called after a successful copy. Wire your toast here. */
+  /** Called after a successful copy. Wire your toast here. Falls back to `CopyFeedbackProvider`. */
   onCopied?: CopyButtonProps['onCopied'];
-  /** Called when the clipboard write fails. */
+  /** Called when the clipboard write fails. Falls back to `CopyFeedbackProvider`. */
   onCopyError?: CopyButtonProps['onCopyError'];
   /** Accessible label before copying. @default "Copy token" */
   copyLabel?: CopyButtonProps['copyLabel'];

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

@@ -0,0 +1,110 @@
+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. 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. 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 h-svh w-full overflow-hidden', 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<'div'>) {
+  return (
+    <div
+      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 min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-border/60',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AppShellHeader({ className, ...props }: React.ComponentProps<'header'>) {
+  return (
+    <header
+      data-slot="app-shell-header"
+      className={cn(
+        'flex h-12 shrink-0 items-center gap-2 border-b border-border/60 px-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+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(
+        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,
+  type AppShellMainProps,
+};