@spree/dashboard-ui 6.0.3 → 6.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-ui",
   "license": "MIT",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "description": "Spree Dashboard design system — shadcn primitives, headless composed components, and design tokens. Source-only package; consumers compile via their own Vite/Tailwind setup.",
   "author": "Vendo Connect Inc.",
   "homepage": "https://spreecommerce.org",
@@ -38,11 +38,11 @@
   ],
   "peerDependencies": {
     "@tanstack/react-router": "^1.169.2",
-    "i18next": "^26.2.0",
+    "i18next": "^26.2.0 || ^27.0.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-hook-form": "^7.75.0",
-    "react-i18next": "^17.0.8",
+    "react-i18next": "^17.0.8 || ^18.0.0",
     "tailwindcss": "^4.2.4"
   },
   "dependencies": {
@@ -61,41 +61,42 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/geist": "5.3.0",
     "@fontsource-variable/geist-mono": "5.3.0",
-    "@tanstack/react-hotkeys": "0.16.0",
+    "@fontsource-variable/inter": "5.3.0",
+    "@tanstack/react-hotkeys": "0.23.0",
     "@tanstack/react-table": "9.3.1",
-    "@tiptap/core": "3.32.0",
-    "@tiptap/extension-image": "3.32.0",
-    "@tiptap/extension-link": "3.32.0",
-    "@tiptap/extension-placeholder": "3.32.0",
-    "@tiptap/pm": "3.32.0",
-    "@tiptap/react": "3.32.0",
-    "@tiptap/starter-kit": "3.32.0",
+    "@tiptap/core": "3.32.2",
+    "@tiptap/extension-image": "3.32.2",
+    "@tiptap/extension-link": "3.32.2",
+    "@tiptap/extension-placeholder": "3.32.2",
+    "@tiptap/pm": "3.32.2",
+    "@tiptap/react": "3.32.2",
+    "@tiptap/starter-kit": "3.32.2",
     "@uiw/react-json-view": "1.12.2",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "date-fns": "4.4.0",
     "date-fns-tz": "3.2.0",
     "flag-icons": "7.6.0",
-    "lucide-react": "1.60.0",
+    "lucide-react": "1.71.0",
     "react-colorful": "5.8.1",
     "react-day-picker": "10.0.2",
     "recharts": "3.10.1",
     "tailwind-merge": "3.7.0",
     "tw-animate-css": "1.4.0",
-    "@spree/core": "^6.0.3"
+    "@spree/core": "^6.0.4"
   },
   "devDependencies": {
-    "@tanstack/react-router": "^1.170.45",
+    "@tanstack/react-router": "^1.170.46",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "i18next": "^26.5.3",
+    "i18next": "^27.1.1",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
-    "react-hook-form": "^7.90.0",
-    "react-i18next": "^17.1.0",
-    "tailwindcss": "^4.2.4",
+    "react-hook-form": "^7.91.0",
+    "react-i18next": "^18.0.1",
+    "tailwindcss": "^4.3.5",
     "typescript": "~7.0.2",
-    "vite": "^8.3.4"
+    "vite": "^8.3.7"
   },
   "scripts": {
     "lint": "biome check src",

package/src/index.ts

@@ -44,6 +44,7 @@ export * from './spree/color-picker'
 export * from './spree/confirm-dialog'
 export * from './spree/copy-to-clipboard-button'
 export * from './spree/country-flag'
+export * from './spree/currency-label'
 export * from './spree/data-grid'
 export * from './spree/delivery-form-dialog'
 export * from './spree/drag-handle'
@@ -61,6 +62,8 @@ export * from './spree/post-sale-create-dialogs'
 export * from './spree/post-sale-fields'
 export * from './spree/quantity-tier-editor'
 export * from './spree/return-dialogs'
+export * from './spree/section'
+export * from './spree/stat-item'
 
 // JsonPreviewDrawer and JsonValueView are intentionally NOT re-exported from
 // this barrel: they pull in `@uiw/react-json-view` (~30KB gzip), and
@@ -74,6 +77,7 @@ export * from './spree/return-dialogs'
 export * from './spree/external-link'
 export * from './spree/language-menu-items'
 export * from './spree/metadata/metadata-card'
+export * from './spree/product-identity'
 export * from './spree/product-membership-list'
 export * from './spree/products/status-card'
 export * from './spree/relative-time'
@@ -113,6 +117,7 @@ export * from './ui/command'
 export * from './ui/context-menu'
 export * from './ui/data-table'
 export * from './ui/date-picker'
+export * from './ui/date-range-panel'
 export * from './ui/date-range-picker'
 export * from './ui/dialog'
 export * from './ui/dropdown-menu'

package/src/lib/field-trigger.ts

@@ -0,0 +1,10 @@
+/**
+ * The look of a button that opens a picker: a select, a combobox, a date
+ * range. Shaped like a text field, so a picker and an input on one row read
+ * as the same kind of control. `data-size="sm"` is the toolbar size.
+ *
+ * `min-h-8` matches `<Input>`, and stops the trigger collapsing to the
+ * chevron's height when its value renders empty.
+ */
+export const fieldTriggerClassName =
+  "flex w-full min-h-8 cursor-pointer items-center justify-between gap-1.5 rounded-xl border border-field-border shadow-control bg-card py-1.5 pr-2 pl-2.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none select-none not-disabled:hover:bg-field-hover focus:border-blue-500 focus:shadow-field-focus disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive data-[size=sm]:h-8 data-[size=sm]:min-h-8 data-[size=sm]:gap-2 data-[size=sm]:px-2 data-[size=sm]:py-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"

package/src/lib/same-rich-text.ts

@@ -22,15 +22,24 @@ export function shouldEmitRichTextChange(next: string, previous: string): boolea
   if (!sameRichText(next, previous)) return true
   if (!visibleText(previous) && !hasImage(previous)) return false
 
-  const previousHtml = looksLikeHtml(previous.trim()) ? previous : `<p>${previous}</p>`
+  const previousHtml = wrapInline(previous.trim())
   return countParagraphs(next) !== countParagraphs(previousHtml)
 }
 
 function canonicalizeRichText(html: string): string {
   const withoutTrailingEmpty = stripTrailingEmptyParagraphs((html ?? '').trim())
   if (!visibleText(withoutTrailingEmpty) && !hasImage(withoutTrailingEmpty)) return ''
-  if (!looksLikeHtml(withoutTrailingEmpty)) return `<p>${withoutTrailingEmpty}</p>`
-  return withoutTrailingEmpty
+  return wrapInline(withoutTrailingEmpty)
+}
+
+// Block elements the editor keeps at the top level. Content that starts with
+// anything else — bare text, or inline markup such as `<strong>` — is what the
+// editor wraps in a paragraph on mount, which is not a change.
+const BLOCK_START = /^<(p|h[1-6]|ul|ol|li|blockquote|pre|div|hr|figure|table)[\s>/]/i
+
+function wrapInline(html: string): string {
+  if (looksLikeHtml(html) && BLOCK_START.test(html)) return html
+  return `<p>${html}</p>`
 }
 
 function stripTrailingEmptyParagraphs(html: string): string {

package/src/lib/utils.ts

@@ -1,5 +1,18 @@
 import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+// Theme values tailwind-merge cannot know about. Unregistered, `rounded-card`
+// and `shadow-card-lift` are treated as unknown classes, so a stock
+// `rounded-lg` or `shadow-xs` beside them is never dropped and whichever comes
+// later in the stylesheet silently wins.
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      radius: ['card'],
+      shadow: ['card-lift', 'control', 'field-focus'],
+    },
+  },
+})
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))

package/src/spree/address-block.tsx

@@ -47,9 +47,9 @@ export function AddressBlock({
   const { t, i18n } = useTranslation()
   return (
     <div>
-      {title && <h6 className="font-semibold text-sm mb-1.5">{title}</h6>}
+      {title && <h6 className="font-semibold text-base mb-1.5">{title}</h6>}
       {address ? (
-        <div className="text-sm text-muted-foreground flex flex-col gap-0.5">
+        <div className="text-base text-muted-foreground flex flex-col gap-0.5">
           <div>{address.full_name}</div>
           {address.company && <div>{address.company}</div>}
           <div>{address.address1}</div>
@@ -63,7 +63,7 @@ export function AddressBlock({
           {address.phone && <div>{address.phone}</div>}
         </div>
       ) : (
-        <span className="text-sm text-muted-foreground">
+        <span className="text-base text-muted-foreground">
           {emptyText ?? t('admin.components.address_block.not_provided')}
         </span>
       )}

package/src/spree/address-book-row.tsx

@@ -1,5 +1,7 @@
+import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Badge } from '../ui/badge'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/data-table'
 import { Item, ItemActions, ItemContent, ItemTitle } from '../ui/item'
 import { AddressBlock, type AddressBlockValue } from './address-block'
 import { RowActions } from './row-actions'
@@ -94,3 +96,89 @@ export function AddressBookRow({
     </Item>
   )
 }
+
+/**
+ * An address book as a table, for a detail page's main column: one row per
+ * address, its labels and defaults beside it, the actions at the end. Fill it
+ * with `AddressBookTableRow`s; the card around it is the caller's.
+ */
+export function AddressBookTable({ children }: { children: ReactNode }) {
+  const { t } = useTranslation()
+  return (
+    <Table roundedTop>
+      <TableHeader>
+        <TableRow>
+          <TableHead>{t('admin.address_book.columns.address')}</TableHead>
+          <TableHead>{t('admin.address_book.columns.defaults')}</TableHead>
+          <TableHead className="w-10" />
+        </TableRow>
+      </TableHeader>
+      <TableBody>{children}</TableBody>
+    </Table>
+  )
+}
+
+/** One address in an `AddressBookTable`; takes the same props as `AddressBookRow`. */
+export function AddressBookTableRow({
+  address,
+  canEdit = true,
+  inheritedFrom,
+  onEdit,
+  onRemove,
+  onSetDefaultBilling,
+  onSetDefaultShipping,
+}: Parameters<typeof AddressBookRow>[0]) {
+  const { t } = useTranslation()
+  const inherited = inheritedFrom != null
+  const isDefaultBilling = !inherited && address.is_default_billing
+  const isDefaultShipping = !inherited && address.is_default_shipping
+
+  return (
+    <TableRow>
+      <TableCell>
+        {address.label && <div className="font-medium text-base">{address.label}</div>}
+        <AddressBlock address={address} />
+      </TableCell>
+      <TableCell>
+        <span className="flex flex-wrap gap-1.5">
+          {inherited && (
+            <Badge variant="secondary">
+              {t('admin.address_book.inherited_from', { name: inheritedFrom })}
+            </Badge>
+          )}
+          {isDefaultBilling && (
+            <Badge variant="outline">{t('admin.address_book.default_billing')}</Badge>
+          )}
+          {isDefaultShipping && (
+            <Badge variant="outline">{t('admin.address_book.default_shipping')}</Badge>
+          )}
+          {!inherited && !isDefaultBilling && !isDefaultShipping && (
+            <span className="text-muted-foreground">—</span>
+          )}
+        </span>
+      </TableCell>
+      <TableCell className="w-10 text-right">
+        {canEdit && !inherited && (
+          <RowActions
+            actions={[
+              { key: 'edit', onSelect: onEdit },
+              {
+                key: 'set_default_billing',
+                label: t('admin.address_book.set_default_billing'),
+                visible: !!onSetDefaultBilling && !address.is_default_billing,
+                onSelect: () => onSetDefaultBilling?.(),
+              },
+              {
+                key: 'set_default_shipping',
+                label: t('admin.address_book.set_default_shipping'),
+                visible: !!onSetDefaultShipping && !address.is_default_shipping,
+                onSelect: () => onSetDefaultShipping?.(),
+              },
+              { key: 'delete', destructive: true, onSelect: onRemove },
+            ]}
+          />
+        )}
+      </TableCell>
+    </TableRow>
+  )
+}

package/src/spree/bulk-price-table.tsx

@@ -290,7 +290,7 @@ export function BulkPriceTable({
                 return (
                   <Button
                     type="button"
-                    variant="ghost"
+                    variant="destructive-ghost"
                     aria-label={labels.tierRemove}
                     className="size-full min-h-9 rounded-none text-muted-foreground"
                     onClick={() => onTierRemove(r.id)}
@@ -350,9 +350,9 @@ export function BulkPriceTable({
           nests two scrollbars over the same content. */}
       <div className="min-h-0 flex-1">
         {isLoading ? (
-          <p className="text-sm text-muted-foreground">{labels.loading}</p>
+          <p className="text-base text-muted-foreground">{labels.loading}</p>
         ) : isEmpty ? (
-          <p className="text-sm text-muted-foreground">
+          <p className="text-base text-muted-foreground">
             {hasSearch
               ? (labels.emptySearchMessage ?? labels.emptyMessage ?? '')
               : (labels.emptyMessage ?? '')}

package/src/spree/claim-resolve-dialog.tsx

@@ -173,7 +173,7 @@ export function ClaimResolveDialog({
 
           {sendingReplacement && (
             <div className="flex flex-col gap-2">
-              <span className="font-medium text-sm">
+              <span className="font-medium text-base">
                 {t('admin.pages.orders.detail.claims.replacement_items')}
               </span>
               {lines.map((line) => (

package/src/spree/collapsible-card.tsx

@@ -41,10 +41,10 @@ export function CollapsibleCard({
     <Card>
       <Collapsible open={isOpen} onOpenChange={setOpen}>
         <CardHeader
-          className={cn('flex flex-row items-center gap-2 py-1.5', !isOpen && 'border-b-0')}
+          className={cn('flex flex-row items-center gap-2 py-2.5', !isOpen && 'border-b-0')}
         >
           <CollapsibleTrigger className="group -mx-1 flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md px-1 py-1 text-left hover:bg-accent/50">
-            <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[panel-open]:rotate-90 motion-reduce:transition-none" />
+            <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-out group-data-[panel-open]:rotate-90 motion-reduce:transition-none" />
             {/* CardTitle's styling on a span: a button may only hold phrasing content. */}
             <span
               data-slot="card-title"

package/src/spree/color-picker.tsx

@@ -163,7 +163,7 @@ export function ColorPicker({
           role="dialog"
           aria-label={t('admin.a11y.pick_color')}
           className={cn(
-            'absolute top-full z-50 mt-2 min-w-min rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-md',
+            'absolute top-full z-50 mt-2 min-w-min rounded-xl border border-border bg-popover p-3 text-popover-foreground shadow-md',
             panelAlign === 'end' ? 'right-0' : 'left-0',
           )}
         >

package/src/spree/currency-label.tsx

@@ -0,0 +1,71 @@
+import i18n from 'i18next'
+import type { ReactNode } from 'react'
+import { cn } from '../lib/utils'
+import { BanknoteIcon } from './icons'
+
+/**
+ * A currency's own symbol in the admin's language — `$`, `€`, `zł`, `R$` — or
+ * null when it has none beyond its code (CHF, AED), so a caller never shows
+ * the code twice.
+ */
+export function currencySymbol(code: string, locale: string = i18n.language): string | null {
+  try {
+    const symbol = new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: code,
+      currencyDisplay: 'narrowSymbol',
+    })
+      .formatToParts(0)
+      .find((part) => part.type === 'currency')?.value
+    return symbol && symbol !== code ? symbol : null
+  } catch {
+    return null
+  }
+}
+
+/**
+ * The currency's symbol in a small tile. Decorative: the code beside it is
+ * what assistive technology reads. A currency with no symbol of its own
+ * shows a banknote, so a column of tiles keeps one shape.
+ */
+export function CurrencySymbol({ code, className }: { code: string; className?: string }) {
+  const symbol = currencySymbol(code)
+  return (
+    <span
+      aria-hidden
+      data-slot="currency-symbol"
+      className={cn(
+        'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-md bg-accent-strong-hover px-1 font-medium text-[11px] text-foreground leading-none',
+        className,
+      )}
+    >
+      {symbol ?? <BanknoteIcon className="size-3 text-muted-foreground" />}
+    </span>
+  )
+}
+
+/**
+ * A currency as the dashboard shows it everywhere: its symbol tile, its code
+ * and, when given, its name (`[$] USD US Dollar`).
+ */
+export function CurrencyLabel({
+  code,
+  name,
+  className,
+}: {
+  code: string
+  /** The localized name, shown muted after the code. Skipped when it is the code itself. */
+  name?: ReactNode
+  className?: string
+}) {
+  return (
+    <span
+      data-slot="currency-label"
+      className={cn('inline-flex min-w-0 items-center gap-2', className)}
+    >
+      <CurrencySymbol code={code} />
+      <span className="shrink-0">{code}</span>
+      {name && name !== code && <span className="truncate text-muted-foreground">{name}</span>}
+    </span>
+  )
+}

package/src/spree/data-grid/cells.tsx

@@ -544,7 +544,7 @@ export function SelectCell<V extends string>({
         className={cn(
           // Strip the Select's standard chrome so the cell reads as a flat
           // grid slot. The cell's own ring/bg comes from below.
-          'h-9 min-h-0 w-full cursor-cell rounded-none border-0 bg-transparent px-3 text-sm shadow-none ring-inset transition-colors focus:border-0 focus:shadow-none',
+          'h-9 min-h-0 w-full cursor-cell rounded-none border-0 bg-transparent px-3 text-base shadow-none ring-inset transition-colors focus:border-0 focus:shadow-none',
           isSelected && 'bg-blue-500/10',
           isFocused && 'ring-2 ring-blue-500',
         )}
@@ -579,5 +579,5 @@ interface ReadOnlyCellProps {
 /** Plain non-editable cell — first column of a row (e.g. label / link).
  *  Not registered with the grid, so Tab/arrows skip it. */
 export function ReadOnlyCell({ children, className }: ReadOnlyCellProps) {
-  return <div className={cn('flex h-9 items-center px-3 text-sm', className)}>{children}</div>
+  return <div className={cn('flex h-9 items-center px-3 text-base', className)}>{children}</div>
 }

package/src/spree/data-grid/data-grid.tsx

@@ -236,7 +236,7 @@ function DataGridShell<T extends RowData>({
           // key after it lands on nothing (docs/plans/6.0-volume-pricing.md).
           tabIndex={-1}
           className={cn(
-            'w-full border-collapse text-sm outline-none [&_td]:border [&_th]:border [&_td]:border-border [&_th]:border-border',
+            'w-full border-collapse text-base outline-none [&_td]:border [&_th]:border [&_td]:border-border [&_th]:border-border',
             // Internal rules only. `border` on every cell also draws the grid's
             // outer edge — `border-collapse` merges neighbours, so the outermost
             // cells' outer sides become the table's own frame, doubling the
@@ -347,7 +347,7 @@ function DataGridRow<T extends RowData>({
   if (headerContent) {
     return (
       <tr>
-        <td colSpan={columnCount} className="bg-muted/60 px-3 py-2 text-sm">
+        <td colSpan={columnCount} className="bg-muted/60 px-3 py-2 text-base">
           {headerContent}
         </td>
       </tr>

package/src/spree/delivery-form-dialog.tsx

@@ -89,7 +89,7 @@ export function DeliveryFormDialog({
 
           <DialogBody className="flex flex-col gap-4">
             {errors.root?.message && (
-              <p className="text-destructive text-sm" role="alert">
+              <p className="text-destructive text-base" role="alert">
                 {errors.root.message}
               </p>
             )}

package/src/spree/drag-handle.tsx

@@ -45,7 +45,7 @@ export function DragHandle({ attributes, listeners, className, ...props }: DragH
       {...listeners}
       {...props}
     >
-      <GripVerticalIcon className="size-4" />
+      <GripVerticalIcon className="size-4 shrink-0" />
     </button>
   )
 }

package/src/spree/editable-note-card.tsx

@@ -79,7 +79,7 @@ export function EditableNoteCard({
             </div>
           </form>
         ) : (
-          (children ?? <p className="text-muted-foreground text-sm">{t('admin.common.none')}</p>)
+          (children ?? <p className="text-muted-foreground text-base">{t('admin.common.none')}</p>)
         )}
       </CardContent>
     </Card>
@@ -88,7 +88,7 @@ export function EditableNoteCard({
 
 /** A plain-text note as it reads when not being edited. */
 export function NoteText({ value }: { value: string }) {
-  return <p className="whitespace-pre-wrap text-muted-foreground text-sm">{value}</p>
+  return <p className="whitespace-pre-wrap text-muted-foreground text-base">{value}</p>
 }
 
 /** A rich-text note as it reads when not being edited. */

package/src/spree/form-actions.tsx

@@ -2,6 +2,7 @@ import { useHotkey } from '@tanstack/react-hotkeys'
 import { useEffect } from 'react'
 import { type FieldValues, type UseFormReturn, useFormState } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
+import { StatusDot } from '../ui/badge'
 import { Button } from '../ui/button'
 import { Loader2Icon } from './icons'
 
@@ -23,6 +24,7 @@ export function FormSaveButton<TFieldValues extends FieldValues>({
   label,
   savingLabel,
   dirty = false,
+  disabled = false,
 }: {
   form: UseFormReturn<TFieldValues, any, any>
   label?: string
@@ -32,12 +34,14 @@ export function FormSaveButton<TFieldValues extends FieldValues>({
    * saves from its own submit — counted as dirty alongside the form's own.
    */
   dirty?: boolean
+  /** Holds Save back for a reason the form state cannot see, such as an upload in flight. */
+  disabled?: boolean
 }) {
   const { t } = useTranslation()
   const { isDirty, isSubmitting } = useFormState({ control: form.control })
 
   return (
-    <Button type="submit" disabled={!(isDirty || dirty) || isSubmitting}>
+    <Button type="submit" disabled={!(isDirty || dirty) || isSubmitting || disabled}>
       {isSubmitting && <Loader2Icon className="animate-spin" />}
       <span>
         {isSubmitting
@@ -78,14 +82,23 @@ export function FormDiscardButton<TFieldValues extends FieldValues>({
   if (!isDirty && !dirty) return null
 
   return (
-    <Button
-      type="button"
-      variant="outline"
-      disabled={isSubmitting}
-      onClick={onDiscard ?? (() => form.reset())}
-    >
-      {label ?? t('admin.actions.discard')}
-    </Button>
+    <>
+      {/* Says why Save just woke up, so a change made far down a long form is
+          not missed in the sticky header. Hidden on phones, where the header
+          has no room for it. */}
+      <span className="hidden items-center gap-1.5 text-base text-muted-foreground sm:inline-flex">
+        <StatusDot status="pending" />
+        {t('admin.common.unsaved_label')}
+      </span>
+      <Button
+        type="button"
+        variant="outline"
+        disabled={isSubmitting}
+        onClick={onDiscard ?? (() => form.reset())}
+      >
+        {label ?? t('admin.actions.discard')}
+      </Button>
+    </>
   )
 }
 
@@ -99,12 +112,15 @@ export function FormActions<TFieldValues extends FieldValues>({
   discardLabel,
   onDiscard,
   dirty,
+  disabled,
 }: {
   form: UseFormReturn<TFieldValues, any, any>
   saveLabel?: string
   savingLabel?: string
   discardLabel?: string
   onDiscard?: () => void
+  /** Holds Save back, as on `FormSaveButton`. */
+  disabled?: boolean
   /**
    * Unsaved changes held outside the form — custom field drafts the page
    * saves from its own submit — counted as dirty alongside the form's own.
@@ -114,7 +130,13 @@ export function FormActions<TFieldValues extends FieldValues>({
   return (
     <>
       <FormDiscardButton form={form} label={discardLabel} onDiscard={onDiscard} dirty={dirty} />
-      <FormSaveButton form={form} label={saveLabel} savingLabel={savingLabel} dirty={dirty} />
+      <FormSaveButton
+        form={form}
+        label={saveLabel}
+        savingLabel={savingLabel}
+        dirty={dirty}
+        disabled={disabled}
+      />
     </>
   )
 }