@spree/dashboard-ui 6.0.2 → 6.0.4

package/src/spree/post-sale-fields.tsx

@@ -3,12 +3,41 @@ import { Field, FieldLabel } from '../ui/field'
 import { Input } from '../ui/input'
 import { Item, ItemActions, ItemContent, ItemTitle } from '../ui/item'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { ProductIdentity } from './product-identity'
 
 /** A unit on the order that a return, exchange or claim can name. */
 export type PostSaleUnit = {
   id: string
+  /** Also the quantity field's accessible name. */
   label: string
   quantity: number
+  /** Shown as the product it is — image, name, options — when known. */
+  product?: PostSaleUnitProduct
+}
+
+export type PostSaleUnitProduct = {
+  name: string
+  optionsText?: string | null
+  thumbnailUrl?: string | null
+}
+
+/**
+ * A unit as the product it is, the same row the order's item lists use, or
+ * its plain label when the caller has nothing more.
+ */
+export function PostSaleUnitLabel({ unit }: { unit: PostSaleUnit }) {
+  if (!unit.product) {
+    return <ItemTitle className="block truncate font-normal">{unit.label}</ItemTitle>
+  }
+
+  return (
+    <ProductIdentity
+      name={unit.product.name}
+      subtitle={unit.product.optionsText}
+      thumbnailUrl={unit.product.thumbnailUrl}
+      size="sm"
+    />
+  )
 }
 
 /** How many of each unit a record covers; zero means "not included". */
@@ -34,7 +63,7 @@ export function QuantityPicker({
       {units.map((unit) => (
         <Item key={unit.id} variant="outline" className="flex-nowrap border-border-subtle">
           <ItemContent className="min-w-0">
-            <ItemTitle className="block truncate font-normal">{unit.label}</ItemTitle>
+            <PostSaleUnitLabel unit={unit} />
           </ItemContent>
           <ItemActions>
             <Input

package/src/spree/product-identity.tsx

@@ -0,0 +1,74 @@
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import type { ReactNode } from 'react'
+import { cn } from '../lib/utils'
+import { Thumbnail } from '../ui/thumbnail'
+import { PackageIcon } from './icons'
+
+export interface ProductIdentityProps extends useRender.ComponentProps<'span'> {
+  name?: string | null
+  /** A second line: the SKU, option values or a variant's name. */
+  subtitle?: ReactNode
+  thumbnailUrl?: string | null
+  size?: 'sm' | 'md' | 'lg'
+  /** Badges and other markers shown after the name. */
+  badges?: ReactNode
+  /** Strikes the name through, for a row that is about to be removed. */
+  struckThrough?: boolean
+}
+
+/**
+ * A product or variant, the same way in every list: its image, its name and
+ * an optional second line.
+ *
+ * Pass `render` (a router link, or a button a table listens to) to make the
+ * whole block the target — image and name together, never the name alone.
+ */
+export function ProductIdentity({
+  name,
+  subtitle,
+  thumbnailUrl,
+  size = 'md',
+  badges,
+  struckThrough,
+  render,
+  className,
+  ...props
+}: ProductIdentityProps) {
+  const interactive = render !== undefined
+
+  return useRender({
+    defaultTagName: 'span',
+    render,
+    props: mergeProps<'span'>(
+      {
+        className: cn(
+          'flex min-w-0 items-center gap-3 text-left text-foreground',
+          interactive &&
+            'group cursor-pointer rounded-md no-underline outline-none focus-visible:shadow-field-focus',
+          className,
+        ),
+        children: (
+          <>
+            <Thumbnail src={thumbnailUrl} size={size} fallback={<PackageIcon />} />
+            <span className="flex min-w-0 flex-col">
+              <span className="flex min-w-0 items-center gap-2">
+                <span
+                  className={cn('truncate font-medium text-base', struckThrough && 'line-through')}
+                >
+                  {name ?? '—'}
+                </span>
+                {badges}
+              </span>
+              {subtitle && (
+                <span className="truncate text-muted-foreground text-xs">{subtitle}</span>
+              )}
+            </span>
+          </>
+        ),
+      },
+      props,
+    ),
+    state: { slot: 'product-identity' },
+  })
+}

package/src/spree/product-membership-list.tsx

@@ -15,16 +15,17 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { Fragment, type ReactNode, useEffect, useMemo, useState } from 'react'
+import { Fragment, type ReactElement, type ReactNode, useEffect, useMemo, useState } from 'react'
 import { cn } from '../lib/utils'
 import { Badge } from '../ui/badge'
 import { Button } from '../ui/button'
 import { Checkbox } from '../ui/checkbox'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/data-table'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle } from '../ui/empty'
 import { Pagination, type PaginationMeta } from '../ui/pagination'
-import { Thumbnail } from '../ui/thumbnail'
 import { DragHandle } from './drag-handle'
-import { Undo2Icon, XIcon } from './icons'
+import { PackageIcon, Undo2Icon, XIcon } from './icons'
+import { ProductIdentity } from './product-identity'
 import { SearchInput } from './search-input'
 
 /** One product row in a membership list. */
@@ -92,8 +93,8 @@ export interface ProductMembershipListProps {
    * (page offset already applied). A rejected promise rolls the row back.
    */
   onReorder?: (id: string, position: number) => Promise<unknown> | undefined
-  /** Row title cell — pass a link to the product page; defaults to plain text. */
-  renderTitle?: (row: ProductMembershipRow) => ReactNode
+  /** The element a row's image and name render as — a link to the product page. */
+  rowLink?: (row: ProductMembershipRow) => ReactElement
   /**
    * Extra columns between the product name and the remove button, for a
    * parent whose membership carries data of its own — a catalog's quantity
@@ -143,7 +144,7 @@ export function ProductMembershipList({
   onRestore,
   reorderable = false,
   onReorder,
-  renderTitle,
+  rowLink,
   renderSubRows,
   extraColumns,
 }: ProductMembershipListProps) {
@@ -229,17 +230,38 @@ export function ProductMembershipList({
   }
 
   if (loading) {
-    return <p className="p-6 text-muted-foreground text-sm">{labels.loading}</p>
+    return <p className="p-6 text-muted-foreground text-base">{labels.loading}</p>
   }
 
   if (order.length === 0) {
-    return <p className="p-6 text-muted-foreground text-sm">{labels.empty}</p>
+    return (
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <PackageIcon />
+          </EmptyMedia>
+          <EmptyTitle>{labels.empty}</EmptyTitle>
+        </EmptyHeader>
+      </Empty>
+    )
   }
 
+  // A single product column needs no heading; extra columns (prices) do.
+  const showHeader = !!extraColumns
+
   return (
     <>
-      <div className="border-border-subtle border-b p-3">
+      <div className="flex items-center gap-3 border-border-subtle border-b px-4 py-3">
+        {/* Select-all lives here when the table has no header row to hold it. */}
+        {curatable && !showHeader && visible.length > 0 && (
+          <Checkbox
+            checked={allSelected}
+            onCheckedChange={toggleAll}
+            aria-label={labels.selectAll}
+          />
+        )}
         <SearchInput
+          className="flex-1"
           value={query}
           onValueChange={setQuery}
           onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
@@ -248,32 +270,43 @@ export function ProductMembershipList({
         />
       </div>
       {visible.length === 0 ? (
-        <p className="p-6 text-muted-foreground text-sm">{labels.noMatches}</p>
+        <p className="p-6 text-muted-foreground text-base">{labels.noMatches}</p>
       ) : (
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
           <Table>
-            <TableHeader>
-              <TableRow>
-                {curatable && (
-                  <TableHead className="w-10">
-                    <Checkbox
-                      checked={allSelected}
-                      onCheckedChange={toggleAll}
-                      aria-label={labels.selectAll}
-                    />
-                  </TableHead>
-                )}
-                {reorderable && <TableHead className="w-8" />}
-                {/* `w-full max-w-0`: table layout sizes a column to its
+            {/* Without a header row, the column widths it set live here. */}
+            {!showHeader && (
+              <colgroup>
+                {curatable && <col className="w-10" />}
+                {reorderable && <col className="w-8" />}
+                <col className="w-full" />
+                <col className="w-10" />
+              </colgroup>
+            )}
+            {showHeader && (
+              <TableHeader>
+                <TableRow>
+                  {curatable && (
+                    <TableHead className="w-10">
+                      <Checkbox
+                        checked={allSelected}
+                        onCheckedChange={toggleAll}
+                        aria-label={labels.selectAll}
+                      />
+                    </TableHead>
+                  )}
+                  {reorderable && <TableHead className="w-8" />}
+                  {/* `w-full max-w-0`: table layout sizes a column to its
                     content, so a long product or variant name would push the
                     columns beside it out of the card — which clips them
                     rather than scrolling. This makes the product column take
                     whatever is left instead, and its content truncate. */}
-                <TableHead className="w-full max-w-0">{labels.columnProduct}</TableHead>
-                {extraColumns?.headers}
-                <TableHead className="w-10" />
-              </TableRow>
-            </TableHeader>
+                  <TableHead className="w-full max-w-0">{labels.columnProduct}</TableHead>
+                  {extraColumns?.headers}
+                  <TableHead className="w-10" />
+                </TableRow>
+              </TableHeader>
+            )}
             <SortableContext items={ids} strategy={verticalListSortingStrategy}>
               {/* No border-t: TableHead draws the rule as an inset shadow,
                   and a border alongside it stacks into a 2px line. */}
@@ -292,7 +325,7 @@ export function ProductMembershipList({
                     onRemove={onRemove ? () => onRemove(row.id) : undefined}
                     onRestore={onRestore ? () => onRestore(row.id) : undefined}
                     labels={labels}
-                    renderTitle={renderTitle}
+                    rowLink={rowLink}
                     extraCells={extraColumns?.renderCells(row)}
                     subRows={renderSubRows?.(row, subRowLayout)}
                   />
@@ -302,8 +335,7 @@ export function ProductMembershipList({
           </Table>
         </DndContext>
       )}
-      {/* Pagination brings its own top border + padding. */}
-      {meta && onPageChange && <Pagination meta={meta} onPageChange={onPageChange} />}
+      {meta && onPageChange && <Pagination inset meta={meta} onPageChange={onPageChange} />}
     </>
   )
 }
@@ -318,7 +350,7 @@ function MembershipRow({
   onRemove,
   onRestore,
   labels,
-  renderTitle,
+  rowLink,
   extraCells,
   subRows,
 }: {
@@ -331,7 +363,7 @@ function MembershipRow({
   onRemove?: () => void
   onRestore?: () => void
   labels: ProductMembershipListLabels
-  renderTitle?: (row: ProductMembershipRow) => ReactNode
+  rowLink?: ProductMembershipListProps['rowLink']
   extraCells?: ReactNode
   subRows?: ReactNode
 }) {
@@ -374,13 +406,19 @@ function MembershipRow({
           </TableCell>
         )}
         <TableCell className="max-w-0">
-          <span className={cn('flex min-w-0 items-center gap-3', removed && 'line-through')}>
-            <Thumbnail src={row.thumbnailUrl} size="sm" />
-            {renderTitle ? renderTitle(row) : <span className="truncate text-sm">{row.name}</span>}
-            {added && labels.pendingAddedBadge && (
-              <Badge variant="secondary">{labels.pendingAddedBadge}</Badge>
-            )}
-          </span>
+          <ProductIdentity
+            name={row.name}
+            thumbnailUrl={row.thumbnailUrl}
+            size="sm"
+            struckThrough={removed}
+            render={rowLink?.(row)}
+            badges={
+              added &&
+              labels.pendingAddedBadge && (
+                <Badge variant="secondary">{labels.pendingAddedBadge}</Badge>
+              )
+            }
+          />
         </TableCell>
         {extraCells}
         <TableCell className="text-right">
@@ -400,7 +438,7 @@ function MembershipRow({
               : onRemove && (
                   <Button
                     type="button"
-                    variant="ghost"
+                    variant="destructive-ghost"
                     size="icon"
                     onClick={onRemove}
                     aria-label={labels.remove}

package/src/spree/products/status-card.tsx

@@ -75,7 +75,7 @@ export function StatusCard<TFieldValues extends FieldValues>({
               </Select>
             )}
           />
-          {description && <p className="text-muted-foreground text-sm">{description}</p>}
+          {description && <p className="text-muted-foreground text-base">{description}</p>}
         </Field>
         {actions && <div className="flex flex-wrap gap-2">{actions}</div>}
       </CardContent>

package/src/spree/quantity-tier-editor.tsx

@@ -123,7 +123,7 @@ export function QuantityTierEditor({
               ) : (
                 <Button
                   type="button"
-                  variant="ghost"
+                  variant="destructive-ghost"
                   size="icon"
                   className="size-8 shrink-0"
                   disabled={disabled}

package/src/spree/return-dialogs.tsx

@@ -64,7 +64,7 @@ export function ReturnReceiveDialog({
         <DialogBody className="flex flex-col gap-4">
           {lines.map((line) => (
             <div key={line.id} className="flex flex-col gap-3">
-              <span className="font-medium text-sm">{line.label}</span>
+              <span className="font-medium text-base">{line.label}</span>
               <div className="flex flex-col gap-3">
                 <Field>
                   <FieldLabel htmlFor={`qty-${line.id}`}>
@@ -193,7 +193,7 @@ export function ReturnRefundDialog({
         </DialogHeader>
         <DialogBody className="flex flex-col gap-4">
           {owesNothing ? (
-            <p className="text-muted-foreground text-sm">
+            <p className="text-muted-foreground text-base">
               {t('admin.pages.orders.detail.returns.nothing_owed')}
             </p>
           ) : (

package/src/spree/search-input.tsx

@@ -35,7 +35,9 @@ export function SearchInput({
   const inputRef = useRef<HTMLInputElement>(null)
 
   return (
-    <InputGroup className={className}>
+    // The outline button's edge rather than a form field's, so the search box
+    // reads as one of the toolbar's controls beside the buttons it sits with.
+    <InputGroup className={cn('border-border/80', className)}>
       <InputGroupAddon>
         <SearchIcon className="size-4" />
       </InputGroupAddon>

package/src/spree/secret-input.tsx

@@ -70,7 +70,7 @@ export function SecretInput({
         <FieldLabel htmlFor={id}>{label}</FieldLabel>
         <div className="flex items-center gap-2">
           <div className="flex min-h-8 w-full min-w-0 items-center rounded-lg border border-border bg-muted/40 px-2.5 py-1.5">
-            <span className="font-mono text-sm tabular-nums text-muted-foreground" id={id}>
+            <span className="font-mono text-base tabular-nums text-muted-foreground" id={id}>
               {storedMask}
             </span>
           </div>

package/src/spree/section.tsx

@@ -0,0 +1,55 @@
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+
+/**
+ * A titled group of cards on a page — an order's fulfillments, its returns.
+ * The heading sits on the page with no frame of its own, and each record
+ * below it is a card: a card inside a card would box the records twice.
+ */
+function Section({ className, ...props }: React.ComponentProps<'section'>) {
+  return (
+    <section
+      data-slot="section"
+      className={cn('flex min-w-0 flex-col gap-3', className)}
+      {...props}
+    />
+  )
+}
+
+/** The heading row: a `SectionTitle`, then `SectionActions` at the end. */
+function SectionHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="section-header"
+      className={cn('flex min-h-8 flex-wrap items-center gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+/** A leading icon is set in a tile, so the heading reads as one without a frame. */
+function SectionTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+  return (
+    <h2
+      data-slot="section-title"
+      className={cn(
+        'flex min-w-0 flex-1 items-center gap-2 font-semibold text-base',
+        '[&>svg:first-child]:box-content [&>svg:first-child]:size-4 [&>svg:first-child]:shrink-0 [&>svg:first-child]:rounded-lg [&>svg:first-child]:bg-accent-strong [&>svg:first-child]:p-1.5',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function SectionActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="section-actions"
+      className={cn('flex shrink-0 items-center gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+export { Section, SectionActions, SectionHeader, SectionTitle }

package/src/spree/stat-item.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react'
+import { cn } from '../lib/utils'
+import { Item, ItemContent, ItemDescription, ItemTitle } from '../ui/item'
+
+/**
+ * One figure in a row of headline numbers at the top of a record page: a
+ * small label over a large value, each in its own outline item. Lay several
+ * out in a grid rather than inside a card.
+ */
+export function StatItem({
+  label,
+  value,
+  className,
+}: {
+  label: ReactNode
+  value: ReactNode
+  className?: string
+}) {
+  return (
+    <Item variant="outline" className={cn('items-start', className)}>
+      <ItemContent>
+        <ItemDescription>{label}</ItemDescription>
+        <ItemTitle className="text-lg font-semibold">{value}</ItemTitle>
+      </ItemContent>
+    </Item>
+  )
+}