@vendure-io/ui 2.0.0-beta.10 → 2.0.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendure-io/ui",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.12",
   "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/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 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",
+        "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/molecules/data-table/data-table-bulk-actions.tsx

@@ -9,11 +9,12 @@ import type { DataTableBulkActionContext } from '@vendure-io/ui/components/molec
 import { cn } from '@vendure-io/ui/lib/utils';
 import * as React from 'react';
 
-// The selection overlay that replaces the controls row while rows are selected.
-// The cross-page selection cache lives here (donor parity): `rows` only ever
-// holds the current page, so we accumulate `row.original` by id as pages are
-// seen, letting `bulkActions` receive every selected original — not just the
-// ones still on screen.
+// The selection bar that replaces the controls row inside the header band
+// while rows are selected (returns null with an empty selection; the core
+// decides where it renders). The cross-page selection cache lives here (donor
+// parity): `rows` only ever holds the current page, so we accumulate
+// `row.original` by id as pages are seen, letting `bulkActions` receive every
+// selected original — not just the ones still on screen.
 
 /**
  * Accumulate `row.original` keyed by row id across page changes. Populated during
@@ -53,12 +54,12 @@ function DataTableBulkActions<TData>({
   };
 
   return (
+    // A plain band row, not a box: it takes the controls row's place inside
+    // the header band, so it carries no chrome of its own. min-h-9 matches
+    // the controls row's h-9 inputs so the swap holds the band height steady.
     <div
       data-slot="data-table-bulk-actions"
-      className={cn(
-        'bg-muted/50 flex flex-wrap items-center gap-2 rounded-md border px-3 py-2',
-        className,
-      )}
+      className={cn('flex min-h-9 flex-wrap items-center gap-2', className)}
       {...props}
     >
       {render(ctx)}

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

@@ -182,7 +182,11 @@ export interface DataTableProps<TData> {
   header?: React.ReactNode;
   /** Controls row (search, faceted filters, custom buttons). Render-prop gets the live table. */
   toolbar?: React.ReactNode | ((table: Table<TData>) => React.ReactNode);
-  /** Overlay content when selection is non-empty. Only meaningful with `rowSelection` wired. */
+  /**
+   * Replaces the controls row inside the header band while selection is
+   * non-empty (title and applied-filter chips stay). Only meaningful with
+   * `rowSelection` wired.
+   */
   bulkActions?: (ctx: DataTableBulkActionContext<TData>) => React.ReactNode;
   /**
    * Per-row actions → appends an actions column. First arg is `row.original`
@@ -225,8 +229,31 @@ export interface DataTableProps<TData> {
    */
   setTableOptions?: (options: TableOptions<TData>) => TableOptions<TData>;
 
+  /**
+   * The table's frame. `'card'` (default) renders the band anatomy on a real
+   * `Card`: a `CardHeader` (border-b) hosting the header/controls/chips zones,
+   * `CardTable` hosting the table flush to the card edges, and a `CardFooter`
+   * (border-t) hosting pagination when it is wired — no footer means the last
+   * row sits flush against the card's bottom edge. `'plain'` renders the same
+   * band structure without any card chrome, for a table embedded in an
+   * existing card (e.g. a dashboard widget): it MUST sit inside a `Card`,
+   * whose spacing variables (`--card-px`/`--card-gap`) drive the bands and
+   * edge-cell alignment — the host card is the frame.
+   */
+  frame?: 'card' | 'plain';
+  /**
+   * Extra `<TableRow>`s appended inside `TableBody` after the data rows — e.g.
+   * an order table's subtotal/shipping/total rows. Rendered only alongside
+   * real rows, never with the skeleton or empty states, and has no interaction
+   * with selection, sorting, or pagination. Use the function form to receive
+   * `columnCount` for `colSpan`s — display columns (select, actions) are
+   * injected around your columns, so a hard-coded count desyncs. Rows are
+   * presentational: give them `hover:bg-transparent`.
+   */
+  footerRows?: React.ReactNode | ((ctx: { columnCount: number }) => React.ReactNode);
+
   labels?: DataTableLabels;
-  className?: string; // outer div[data-slot="data-table"]
+  className?: string; // the frame root (data-slot="data-table")
 }
 
 /**

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

@@ -19,6 +19,7 @@ import {
   useReactTable,
   type VisibilityState,
 } from '@tanstack/react-table';
+import { Card, CardFooter, CardHeader, CardTable } from '@vendure-io/ui/components/atoms/card';
 import { Checkbox } from '@vendure-io/ui/components/atoms/checkbox';
 import {
   ContextMenu,
@@ -45,6 +46,7 @@ import {
 } from '@vendure-io/ui/components/molecules/data-table/data-table-filters';
 import {
   buildDisplayColumns,
+  getSelectedRowIds,
   resolveSlot,
 } from '@vendure-io/ui/components/molecules/data-table/data-table-helpers';
 import type {
@@ -59,13 +61,17 @@ import {
 } from '@vendure-io/ui/components/molecules/data-table/list-header';
 import { TablePagination } from '@vendure-io/ui/components/molecules/data-table/table-pagination';
 import { cn } from '@vendure-io/ui/lib/utils';
+import { AnimatePresence, motion } from 'motion/react';
 import * as React from 'react';
 
 // The composition root. Owns the single `useReactTable` instance and the
-// controlled/uncontrolled bridge, then lays out header → controls → chips →
-// bulk overlay → Table → footer. Every capability follows the Phase-1 rule
-// verbatim: a feature renders only if its config is wired — no feature flags, no
-// disabled placeholders. Only this folder imports TanStack; the composed
+// controlled/uncontrolled bridge, then lays out the card-framed table anatomy:
+// a CardHeader band (header → controls → chips → bulk overlay), a CardTable
+// hosting the Table flush to the card edges, and a CardFooter band for
+// pagination. `frame="plain"` keeps the band structure without the card
+// chrome. Every capability follows the Phase-1 rule verbatim: a feature
+// renders only if its config is wired — no feature flags, no disabled
+// placeholders. Only this folder imports TanStack; the composed
 // ListHeader/TablePagination/Chip primitives stay TanStack-free.
 
 /**
@@ -98,6 +104,16 @@ function headerLabelText<TData>(column: Column<TData, unknown>): string {
   return typeof header === 'string' ? header : column.id;
 }
 
+// The controls/bulk replace-on-select swap: the outgoing row drifts slightly
+// up as it fades, the incoming row rises in from below — a subtle vertical
+// hand-off (4px) rather than a plain crossfade.
+const bandRowFade = {
+  initial: { opacity: 0, y: 4 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -4 },
+  transition: { duration: 0.1, ease: 'easeOut' },
+} as const;
+
 function ariaSort<TData>(
   hasSorting: boolean,
   column: Column<TData, unknown>,
@@ -126,6 +142,8 @@ function DataTable<TData>({
   emptyState,
   renderRow,
   setTableOptions,
+  frame = 'card',
+  footerRows,
   labels,
   className,
 }: DataTableProps<TData>) {
@@ -307,7 +325,11 @@ function DataTable<TData>({
       ? table.getVisibleLeafColumns().find((column) => column.id !== selectColumnId)?.id
       : undefined;
   const columnClass = (id: string): string | undefined => {
-    if (id === selectColumnId) return 'relative w-0 p-0';
+    // `pl-0!`: the select cell is the first child, so CardTable's edge-cell
+    // padding would otherwise widen the zero-width cell and push the whole
+    // gutter arrangement out; important because CardTable's descendant rule
+    // out-specifies a plain utility on the cell.
+    if (id === selectColumnId) return 'relative w-0 p-0 pl-0!';
     if (id === leadingColumnId) return 'pl-8';
     // Actions cells drop vertical padding so a row-action button (taller than a
     // text line) sits inside the natural row height rather than inflating every
@@ -327,47 +349,76 @@ function DataTable<TData>({
     filters.showAppliedFilters !== false &&
     table.getState().columnFilters.length > 0;
   const showHeader = header != null || showControls || showChips;
-  const showBulk = rowSelection != null && bulkActions != null;
+  // Unlike the other zones, the bulk bar exists only while rows are selected,
+  // so it opens the header band on its own only then — a controls-less
+  // selectable table must not render an empty band. (Deliberate trade-off:
+  // for a table with no header content at all, the band pops in on first
+  // selection rather than reserving empty space.)
+  const showBulk =
+    rowSelection != null &&
+    bulkActions != null &&
+    getSelectedRowIds(table.getState().rowSelection).length > 0;
 
-  return (
-    <div data-slot="data-table" className={cn('flex flex-col gap-4', className)}>
-      {showHeader && (
-        <ListHeader>
-          {header}
-          {showControls && (
-            <ListHeaderControls>
-              {toolbarNode}
-              {hasFilterMenu && filters?.columns && (
-                <DataTableAddFilter table={table} columns={filters.columns} label={l.addFilter} />
-              )}
-              {showViewOptions && (
-                <DataTableViewOptions
+  const bands = (
+    <>
+      {(showHeader || showBulk) && (
+        <CardHeader className="border-b">
+          <ListHeader>
+            {header}
+            {/* Replace-on-select: while rows are selected the bulk bar takes
+                the controls row's place (title and applied-filter chips stay).
+                The swap fades out then in — one --transition-duration-fast
+                (100ms) per phase; mode="wait" keeps the rows sequential so
+                they never stack. */}
+            {(showControls || (rowSelection != null && bulkActions != null)) && (
+              <AnimatePresence initial={false} mode="wait">
+                {showBulk && bulkActions ? (
+                  <motion.div key="bulk-actions" {...bandRowFade}>
+                    <DataTableBulkActions
+                      table={table}
+                      cache={selectionCache}
+                      render={bulkActions}
+                    />
+                  </motion.div>
+                ) : showControls ? (
+                  <motion.div key="controls" {...bandRowFade}>
+                    <ListHeaderControls>
+                      {toolbarNode}
+                      {hasFilterMenu && filters?.columns && (
+                        <DataTableAddFilter
+                          table={table}
+                          columns={filters.columns}
+                          label={l.addFilter}
+                        />
+                      )}
+                      {showViewOptions && (
+                        <DataTableViewOptions
+                          table={table}
+                          triggerLabel={l.columnsTrigger}
+                          heading={l.columnsHeading}
+                        />
+                      )}
+                    </ListHeaderControls>
+                  </motion.div>
+                ) : null}
+              </AnimatePresence>
+            )}
+            {showChips && (
+              <ListHeaderChips>
+                <DataTableAppliedFilters
                   table={table}
-                  triggerLabel={l.columnsTrigger}
-                  heading={l.columnsHeading}
+                  columns={filters?.columns}
+                  inlineChipLimit={filters?.inlineChipLimit}
+                  removeLabel={l.removeFilter}
+                  collapsedLabel={l.filtersCollapsed}
                 />
-              )}
-            </ListHeaderControls>
-          )}
-          {showChips && (
-            <ListHeaderChips>
-              <DataTableAppliedFilters
-                table={table}
-                columns={filters?.columns}
-                inlineChipLimit={filters?.inlineChipLimit}
-                removeLabel={l.removeFilter}
-                collapsedLabel={l.filtersCollapsed}
-              />
-            </ListHeaderChips>
-          )}
-        </ListHeader>
-      )}
-
-      {showBulk && bulkActions && (
-        <DataTableBulkActions table={table} cache={selectionCache} render={bulkActions} />
+              </ListHeaderChips>
+            )}
+          </ListHeader>
+        </CardHeader>
       )}
 
-      <div className="bg-card overflow-hidden rounded-xl border border-border/60">
+      <CardTable>
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -419,63 +470,94 @@ function DataTable<TData>({
                 </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>
-                );
-              })
+              <>
+                {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>
+                  );
+                })}
+                {typeof footerRows === 'function' ? footerRows({ columnCount }) : footerRows}
+              </>
             )}
           </TableBody>
         </Table>
-      </div>
+      </CardTable>
 
       {pagination && (
-        <TablePagination
-          page={pagination.page}
-          pageSize={pagination.pageSize}
-          totalItems={pagination.totalItems ?? table.getPrePaginationRowModel().rows.length}
-          onPageChange={pagination.onPageChange}
-          onPageSizeChange={pagination.onPageSizeChange}
-          pageSizeOptions={pagination.pageSizeOptions}
-          getPageHref={pagination.getPageHref}
-          formatRange={pagination.formatRange}
-          navLabel={l.pagination?.navLabel}
-          previousLabel={l.pagination?.previousLabel}
-          nextLabel={l.pagination?.nextLabel}
-          pageSizeLabel={l.pagination?.pageSizeLabel}
-        />
+        <CardFooter className="border-t">
+          <TablePagination
+            className="w-full"
+            page={pagination.page}
+            pageSize={pagination.pageSize}
+            totalItems={pagination.totalItems ?? table.getPrePaginationRowModel().rows.length}
+            onPageChange={pagination.onPageChange}
+            onPageSizeChange={pagination.onPageSizeChange}
+            pageSizeOptions={pagination.pageSizeOptions}
+            getPageHref={pagination.getPageHref}
+            formatRange={pagination.formatRange}
+            navLabel={l.pagination?.navLabel}
+            previousLabel={l.pagination?.previousLabel}
+            nextLabel={l.pagination?.nextLabel}
+            pageSizeLabel={l.pagination?.pageSizeLabel}
+          />
+        </CardFooter>
+      )}
+    </>
+  );
+
+  // `plain` renders a chrome-less stack instead of a Card so the bands and
+  // CardTable consume the HOST card's spacing variables (--card-px /
+  // --card-gap): edge cells align with the host's padding regardless of its
+  // size, and a trailing CardTable's negative margin reaches through the
+  // host's bottom padding so the last row sits flush against the host's edge.
+  // With no header band the leading CardTable's negative margin would eat the
+  // host's flex gap too and press the rows against the preceding content, so
+  // the stack restores that one gap as padding.
+  return frame === 'plain' ? (
+    <div
+      data-slot="data-table"
+      className={cn(
+        'flex flex-col gap-(--card-gap)',
+        !(showHeader || showBulk) && 'pt-(--card-gap)',
+        className,
       )}
+    >
+      {bands}
     </div>
+  ) : (
+    <Card data-slot="data-table" className={className}>
+      {bands}
+    </Card>
   );
 }
 

package/src/components/molecules/date-picker.tsx

@@ -75,7 +75,9 @@ function DatePicker({
               variant="outline"
               disabled={disabled}
               aria-invalid={invalid || undefined}
-              className="min-w-0 flex-1 justify-start font-normal"
+              // Pickers sit in forms next to Inputs, so mirror the Input/Select
+              // trigger look (transparent bg) instead of the outline button fill.
+              className="min-w-0 flex-1 justify-start border-input bg-transparent font-normal hover:bg-transparent aria-expanded:bg-transparent"
             />
           }
         >

package/src/components/molecules/date-range-picker.tsx

@@ -92,7 +92,9 @@ function DateRangePicker({
               variant="outline"
               disabled={disabled}
               aria-invalid={invalid || undefined}
-              className="min-w-0 flex-1 justify-start font-normal"
+              // Pickers sit in forms next to Inputs, so mirror the Input/Select
+              // trigger look (transparent bg) instead of the outline button fill.
+              className="min-w-0 flex-1 justify-start border-input bg-transparent font-normal hover:bg-transparent aria-expanded:bg-transparent"
             />
           }
         >

package/src/components/molecules/date-time-picker.tsx

@@ -84,7 +84,9 @@ function DateTimePicker({
               variant="outline"
               disabled={disabled}
               aria-invalid={invalid || undefined}
-              className="min-w-0 flex-1 justify-start font-normal"
+              // Pickers sit in forms next to Inputs, so mirror the Input/Select
+              // trigger look (transparent bg) instead of the outline button fill.
+              className="min-w-0 flex-1 justify-start border-input bg-transparent font-normal hover:bg-transparent aria-expanded:bg-transparent"
             />
           }
         >