@spree/dashboard-ui 6.0.3 → 6.0.4

package/src/ui/data-table.tsx

@@ -35,16 +35,25 @@ interface TableProps extends React.ComponentProps<'table'> {
    */
   roundedBottom?: boolean
   /**
-   * Rounds the header's outer corners, for a table that starts a card. The
-   * header's own square corners otherwise sit on top of the card's radius and
-   * clip it — the mirror of the `roundedBottom` case, and unset by default
-   * because a table usually has a card header or some content above it.
+   * Rounds the header's outer corners, for a table that starts a card or any
+   * other bordered box. The header's own square corners otherwise sit on top
+   * of the card's radius and clip it — the mirror of the `roundedBottom` case,
+   * and unset by default because a table usually has a card header or some
+   * content above it. It also drops the header's top rule, which would double
+   * the box's own edge.
    *
    * Applied from `sm` up, matching where a full-bleed table gains its frame:
    * below that the table spans the page gutter with square edges, and curved
    * header cells there would round nothing.
    */
   roundedTop?: boolean
+  /**
+   * Draws the header as a free-standing rounded band, for a table with no
+   * card around it — a list page's main table. Rows then sit straight on the
+   * page, divided by their own rules; there is no frame for the header to
+   * round into, so this replaces `roundedTop`.
+   */
+  band?: boolean
   /**
    * Scrolls sideways at every width, not just on narrow viewports. For a table
    * in a bounded container — a card, a sheet, a dialog — where the default
@@ -83,6 +92,7 @@ function Table({
   stickyHeader = false,
   roundedBottom,
   roundedTop,
+  band = false,
   scrollX = false,
   ...props
 }: TableProps) {
@@ -148,14 +158,14 @@ function Table({
   // below that the table spans the page gutter with square edges, and rounded
   // cells there would round nothing.
   const alwaysRounded =
-    'sm:[&_tbody_tr:last-child_td:first-child]:rounded-bl-xl sm:[&_tbody_tr:last-child_td:last-child]:rounded-br-xl sm:[&_tbody_tr:last-child_td:only-child]:rounded-b-xl'
+    'sm:[&_tbody_tr:last-child_td:first-child]:rounded-bl-[calc(var(--radius-card)-1px)] sm:[&_tbody_tr:last-child_td:last-child]:rounded-br-[calc(var(--radius-card)-1px)] sm:[&_tbody_tr:last-child_td:only-child]:rounded-b-[calc(var(--radius-card)-1px)]'
   // Applied to the outermost wrapper, not the table: `in-[:last-child]` is
   // satisfied by *any* last-child ancestor, and the sticky variant nests two
   // more divs that are both last inside it. Gating on the wrapper the
   // pagination is actually a sibling of is the only test that means "nothing
   // follows this table".
   const roundedWhenLast =
-    'last:[&_tbody_tr:last-child_td:first-child]:rounded-bl-xl last:[&_tbody_tr:last-child_td:last-child]:rounded-br-xl last:[&_tbody_tr:last-child_td:only-child]:rounded-b-xl'
+    'last:[&_tbody_tr:last-child_td:first-child]:rounded-bl-[calc(var(--radius-card)-1px)] last:[&_tbody_tr:last-child_td:last-child]:rounded-br-[calc(var(--radius-card)-1px)] last:[&_tbody_tr:last-child_td:only-child]:rounded-b-[calc(var(--radius-card)-1px)]'
   // `true`/`false` decide on the table itself; unset defers to the wrapper's
   // own position among its siblings.
   // `thead` cells carry the header's background, so the radius belongs on the
@@ -169,9 +179,34 @@ function Table({
   // down to their order in the stylesheet — and the rounding did.
   const topRounded =
     roundedTop && !headerPinned
-      ? 'sm:[&_thead_tr:first-child_th:first-child]:rounded-tl-xl sm:[&_thead_tr:first-child_th:last-child]:rounded-tr-xl sm:[&_thead_tr:first-child_th:only-child]:rounded-t-xl'
+      ? '[&_thead_th]:shadow-[inset_0_-1px_0_0_var(--border-subtle)] sm:[&_thead_tr:first-child_th:first-child]:rounded-tl-[calc(var(--radius-card)-1px)] sm:[&_thead_tr:first-child_th:last-child]:rounded-tr-[calc(var(--radius-card)-1px)] sm:[&_thead_tr:first-child_th:only-child]:rounded-t-[calc(var(--radius-card)-1px)]'
       : undefined
-  const tableRoundedClasses = cn(roundedBottom === true ? alwaysRounded : undefined, topRounded)
+  // Both ends of the header band round, top and bottom, and the band drops
+  // the rule under it: it floats over the rows rather than capping a frame.
+  const bandClasses = band
+    ? cn(
+        '[&_thead_th]:shadow-none [&_thead_tr:first-child_th:first-child]:rounded-s-[10px] [&_thead_tr:first-child_th:last-child]:rounded-e-[10px] [&_thead_tr:first-child_th:only-child]:rounded-[10px]',
+        // Each row's fill and divider hang off its first cell — a row's own
+        // pseudo-element would become an extra table column — and stretch
+        // across the row, which is their positioning box. The divider runs
+        // along a row's top and the fill covers the rest; a filled row
+        // (hovered, selected, menu open) hides the dividers above and below
+        // it, so neighbouring filled rows read as separate rounded shapes
+        // split by a 2px gap.
+        '[&_tbody_tr]:relative [&_tbody_tr]:isolate [&_tbody_tr:hover]:bg-transparent [&_tbody_td]:border-b-0',
+        "[&_tbody_td:first-child]:before:absolute [&_tbody_td:first-child]:before:inset-x-0 [&_tbody_td:first-child]:before:top-0.5 [&_tbody_td:first-child]:before:bottom-0 [&_tbody_td:first-child]:before:-z-10 [&_tbody_td:first-child]:before:rounded-[10px] [&_tbody_td:first-child]:before:content-['']",
+        "[&_tbody_tr:not(:first-child)>td:first-child]:after:absolute [&_tbody_tr:not(:first-child)>td:first-child]:after:inset-x-0 [&_tbody_tr:not(:first-child)>td:first-child]:after:top-0 [&_tbody_tr:not(:first-child)>td:first-child]:after:h-px [&_tbody_tr:not(:first-child)>td:first-child]:after:bg-border-subtle [&_tbody_tr:not(:first-child)>td:first-child]:after:content-['']",
+        '[&_tbody_tr:hover>td:first-child]:before:bg-muted [&_tbody_tr:has([data-popup-open])>td:first-child]:before:bg-accent-strong/40',
+        '[&_tbody_tr[data-selected]>td:first-child]:before:bg-accent-strong/75 [&_tbody_tr[data-selected]:hover>td:first-child]:before:bg-accent-strong-hover',
+        '[&_tbody_tr:not(:first-child):is(:hover,[data-selected],:has([data-popup-open]))>td:first-child]:after:bg-transparent [&_tbody_tr:is(:hover,[data-selected],:has([data-popup-open]))+tr:not(:first-child)>td:first-child]:after:bg-transparent',
+        // A roomier header band with smaller labels.
+        'sm:[&_thead_th]:h-10 sm:[&_thead_th]:py-2.5 [&_thead_th]:font-medium [&_thead_th]:text-xs',
+      )
+    : undefined
+  const tableRoundedClasses = cn(
+    roundedBottom === true ? alwaysRounded : undefined,
+    band ? bandClasses : topRounded,
+  )
   const wrapperRoundedClasses = roundedBottom === undefined ? roundedWhenLast : undefined
 
   const kids = Children.toArray(children)
@@ -430,17 +465,21 @@ function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
 }
 
 /**
- * The bottom rule is an inset shadow rather than `border-b` so it stays flush
- * with the bulk action bar, which overlays this row and draws the same shadow.
- * Don't add a border alongside it — a border sits outside the padding box and
- * the shadow inside, so the two stack into a 2px line.
+ * The rules above and below are inset shadows rather than borders so they stay
+ * flush with the bulk action bar, which overlays this row and draws the same
+ * shadow. Don't add a border alongside them — a border sits outside the padding
+ * box and the shadow inside, so the two stack into a 2px line.
+ *
+ * The top rule separates the band from whatever sits above it in the card. A
+ * table that starts its card drops it (`roundedTop`), as the card's own edge is
+ * already there, and so does the free-standing `band`.
  */
 function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
   return (
     <th
       className={cn(
-        'text-left text-sm font-normal text-muted-foreground bg-muted px-3 py-2.5 h-9 sm:p-2 whitespace-nowrap first:pl-4 last:pr-4',
-        'shadow-[inset_0_-1px_0_0_var(--border-subtle)]',
+        'text-left text-base font-normal text-muted-foreground bg-muted px-3 py-2.5 h-9 sm:p-2 whitespace-nowrap first:pl-4 last:pr-4',
+        'shadow-[inset_0_1px_0_0_var(--border-subtle),inset_0_-1px_0_0_var(--border-subtle)]',
         className,
       )}
       {...props}
@@ -471,7 +510,11 @@ function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
         // `h-16` on touch is a floor, not a fixed height: a table cell treats
         // `height` as a minimum, so a row with a thumbnail or a wrapped
         // second line still grows past it.
-        'h-16 py-3 px-3 sm:h-auto sm:py-3 sm:px-2 border-b border-border-subtle align-middle first:pl-4 last:pr-4',
+        'h-16 py-3 px-3 sm:h-auto sm:py-3 sm:px-2 border-b border-border-subtle align-middle text-base first:pl-4 last:pr-4',
+        // Compact rows (the columns menu's density choice, set on <html>) fit
+        // about half as many again on a laptop screen. Desktop only: on touch
+        // the row stays a full-size target.
+        'sm:in-data-[table-density=compact]:py-1.5 sm:in-data-[table-density=compact]:[&_[data-slot=thumbnail]]:size-7',
         className,
       )}
       {...props}

package/src/ui/date-picker.tsx

@@ -181,7 +181,7 @@ function DatePicker({
   const triggerChildren = (
     <>
       <CalendarIcon className="size-4 shrink-0 text-muted-foreground" />
-      <span className="flex-1 truncate">{triggerLabel}</span>
+      <span className="flex-1 truncate text-left">{triggerLabel}</span>
       {isValidDate && (
         <span
           role="button"
@@ -235,7 +235,7 @@ function DatePicker({
           <div
             role="dialog"
             aria-label={placeholder}
-            className="absolute top-full left-0 z-50 mt-2 w-auto rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-md"
+            className="absolute top-full left-0 z-50 mt-2 w-auto rounded-xl border border-border bg-popover p-0 text-popover-foreground shadow-md"
           >
             {panelChildren}
           </div>
@@ -252,7 +252,7 @@ function DatePicker({
           type="button"
           variant="outline"
           data-empty={!isValidDate}
-          className={className}
+          className={cn('justify-start', className)}
         >
           {triggerChildren}
         </Button>

package/src/ui/date-range-panel.tsx

@@ -0,0 +1,102 @@
+import { addMonths, startOfMonth, subMonths } from 'date-fns'
+import { useState } from 'react'
+import type { DateRange as DayPickerDateRange } from 'react-day-picker'
+import { useIsMobile } from '../hooks/use-mobile'
+import { cn } from '../lib/utils'
+import { CheckIcon } from '../spree/icons'
+import { Calendar } from './calendar'
+
+export interface DateRangePanelPreset<K extends string = string> {
+  key: K
+  label: string
+}
+
+export interface DateRangePanelProps<K extends string> {
+  presets: DateRangePanelPreset<K>[]
+  /** The preset the applied range matches, if any. */
+  activePreset?: string | null
+  /** Picking a preset applies it straight away; the caller closes the popover. */
+  onPresetSelect: (key: K) => void
+  /** Seeds the calendar's highlight. */
+  initialRange?: DayPickerDateRange
+  /** Called once a picked range has both ends; the caller closes the popover. */
+  onApply: (range: { from: Date; to: Date }) => void
+}
+
+/**
+ * Popover body for picking a date range: named ranges on the left, a range
+ * calendar on the right. Mount it inside a popover's content so it reseeds
+ * from `initialRange` each time it opens.
+ */
+export function DateRangePanel<K extends string>({
+  presets,
+  activePreset,
+  onPresetSelect,
+  initialRange,
+  onApply,
+}: DateRangePanelProps<K>) {
+  const isMobile = useIsMobile()
+  const months = isMobile ? 1 : 2
+  const [range, setRange] = useState<DayPickerDateRange | undefined>(initialRange)
+  // A click starts a new range and the next one ends and applies it, the way
+  // a preset applies on click; the same day twice picks that one day. DayPicker's own
+  // selection moves the nearest end of the applied range instead, so picking
+  // the 10th and then the 12th over "Last 30 days" kept its start.
+  const [pickingEnd, setPickingEnd] = useState(false)
+
+  function pickDay(day: Date) {
+    if (pickingEnd && range?.from) {
+      const picked =
+        day < range.from ? { from: day, to: range.from } : { from: range.from, to: day }
+      setRange(picked)
+      setPickingEnd(false)
+      onApply(picked)
+    } else {
+      setRange({ from: day, to: day })
+      setPickingEnd(true)
+    }
+  }
+  // The last month shown, so a range ending today keeps this month in view
+  // whether one month shows or two.
+  const [endMonth, setEndMonth] = useState(() =>
+    startOfMonth(initialRange?.to ?? initialRange?.from ?? new Date()),
+  )
+
+  return (
+    // Phones get the full popover width: the presets as a list, then one
+    // month with finger-sized days. Wider screens put them side by side.
+    <div className="flex w-[min(calc(100vw-2rem),24rem)] flex-col md:w-auto md:flex-row">
+      <div className="flex flex-col gap-0.5 border-b p-2 md:w-44 md:border-r md:border-b-0">
+        {presets.map((preset) => {
+          const active = preset.key === activePreset
+          return (
+            <button
+              key={preset.key}
+              type="button"
+              aria-pressed={active}
+              onClick={() => onPresetSelect(preset.key)}
+              className={cn(
+                'flex items-center justify-between gap-2 whitespace-nowrap rounded-lg px-3 py-2.5 text-left text-base md:px-2.5 md:py-1.5 transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50',
+                active ? 'bg-accent font-medium text-foreground' : 'text-muted-foreground',
+              )}
+            >
+              {preset.label}
+              {active && <CheckIcon className="size-3.5 shrink-0" />}
+            </button>
+          )
+        })}
+      </div>
+      <div className="flex flex-col p-3">
+        <Calendar
+          className="max-md:mx-auto max-md:[&_td>button]:size-10 max-md:[&_th]:w-10"
+          mode="range"
+          month={subMonths(endMonth, months - 1)}
+          onMonthChange={(first) => setEndMonth(addMonths(first, months - 1))}
+          selected={range}
+          onSelect={(_next, day) => pickDay(day)}
+          numberOfMonths={months}
+        />
+      </div>
+    </div>
+  )
+}

package/src/ui/date-range-picker.tsx

@@ -1,6 +1,5 @@
 import { format } from 'date-fns'
 import { useMemo, useState } from 'react'
-import type { DateRange as DayPickerDateRange } from 'react-day-picker'
 import { useTranslation } from 'react-i18next'
 import { activeDateLocale } from '../lib/date-locale'
 import {
@@ -9,10 +8,10 @@ import {
   matchDateRangePreset,
   resolveDateRangePreset,
 } from '../lib/date-range-presets'
+import { fieldTriggerClassName } from '../lib/field-trigger'
 import { cn } from '../lib/utils'
-import { CalendarIcon, ChevronDownIcon } from '../spree/icons'
-import { Button } from './button'
-import { Calendar } from './calendar'
+import { CalendarIcon, ChevronsUpDownIcon } from '../spree/icons'
+import { DateRangePanel } from './date-range-panel'
 import { Popover, PopoverContent, PopoverTrigger } from './popover'
 
 export interface DateRange {
@@ -43,8 +42,6 @@ export interface DateRangePickerProps {
 export function DateRangePicker({ value, onChange, timezone }: DateRangePickerProps) {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
-  const [calendarRange, setCalendarRange] = useState<DayPickerDateRange | undefined>()
-  const [month, setMonth] = useState<Date>(value.from)
 
   const zone = useMemo(
     () => timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC',
@@ -62,75 +59,39 @@ export function DateRangePicker({ value, onChange, timezone }: DateRangePickerPr
       ? `${format(value.from, 'MMM d', { locale: dateLocale })} – ${format(value.to, 'MMM d', { locale: dateLocale })}`
       : t(PRESET_LABEL_KEYS[activePreset])
 
-  function selectPreset(key: Exclude<DateRangePresetKey, 'custom'>) {
-    const range = resolveDateRangePreset(key, zone)
-    setCalendarRange({ from: range.from, to: range.to })
-    setMonth(range.from)
-    onChange(range)
-    setOpen(false)
-  }
-
-  function applyCustomRange() {
-    if (calendarRange?.from && calendarRange?.to) {
-      onChange({ from: calendarRange.from, to: calendarRange.to })
-      setOpen(false)
-    }
-  }
-
-  const canApply = calendarRange?.from && calendarRange?.to
-
   return (
-    <Popover
-      open={open}
-      onOpenChange={(nextOpen) => {
-        setOpen(nextOpen)
-        if (nextOpen) {
-          setCalendarRange({ from: value.from, to: value.to })
-          setMonth(value.from)
-        }
-      }}
-    >
+    <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button size="sm" variant="outline" className="h-8 gap-2 text-sm font-normal">
-          <CalendarIcon className="size-3.5" />
-          {triggerLabel}
-          <ChevronDownIcon className="size-3.5 text-muted-foreground" />
-        </Button>
+        {/* Field-shaped like the select and combobox triggers it sits beside. */}
+        <button
+          type="button"
+          data-size="sm"
+          className={cn(fieldTriggerClassName, 'w-auto shrink-0 whitespace-nowrap')}
+        >
+          <span className="flex items-center gap-2">
+            <CalendarIcon className="size-3.5" />
+            {triggerLabel}
+          </span>
+          <ChevronsUpDownIcon className="size-3.5 text-muted-foreground" />
+        </button>
       </PopoverTrigger>
-      <PopoverContent align="end" className="w-auto p-0">
-        <div className="flex">
-          <div className="flex flex-col border-r py-2">
-            {DATE_RANGE_PRESET_KEYS.map((key) => (
-              <button
-                key={key}
-                type="button"
-                onClick={() => selectPreset(key)}
-                className={cn(
-                  'whitespace-nowrap px-4 py-1.5 text-left text-sm transition-colors hover:bg-accent',
-                  activePreset === key && 'font-medium text-foreground',
-                  activePreset !== key && 'text-muted-foreground',
-                )}
-              >
-                {t(PRESET_LABEL_KEYS[key])}
-              </button>
-            ))}
-          </div>
-          <div className="flex flex-col p-3">
-            <Calendar
-              mode="range"
-              month={month}
-              onMonthChange={setMonth}
-              selected={calendarRange}
-              onSelect={setCalendarRange}
-              numberOfMonths={2}
-            />
-            <div className="flex justify-end border-t pt-3">
-              <Button size="sm" disabled={!canApply} onClick={applyCustomRange}>
-                {t('admin.actions.apply')}
-              </Button>
-            </div>
-          </div>
-        </div>
+      <PopoverContent align="end" className="w-auto max-w-[calc(100vw-1rem)] p-0">
+        <DateRangePanel
+          // Reseeds the calendar whenever the applied range changes, even if
+          // the popover reopens before its closing animation unmounts it.
+          key={`${value.from.getTime()}:${value.to.getTime()}`}
+          presets={DATE_RANGE_PRESET_KEYS.map((key) => ({ key, label: t(PRESET_LABEL_KEYS[key]) }))}
+          activePreset={activePreset}
+          onPresetSelect={(key) => {
+            onChange(resolveDateRangePreset(key, zone))
+            setOpen(false)
+          }}
+          initialRange={{ from: value.from, to: value.to }}
+          onApply={(range) => {
+            onChange(range)
+            setOpen(false)
+          }}
+        />
       </PopoverContent>
     </Popover>
   )

package/src/ui/dialog.tsx

@@ -113,7 +113,7 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          'fixed top-1/2 left-1/2 z-50 flex w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border border-border bg-card text-foreground text-sm shadow-lg duration-100 outline-none sm:max-w-[min(500px,calc(100%-2rem))] data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform,translate,scale]',
+          'fixed top-1/2 left-1/2 z-50 flex w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl border border-border bg-card text-foreground text-base shadow-lg duration-100 outline-none sm:max-w-[min(500px,calc(100%-2rem))] data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform,translate,scale]',
           fullScreen && 'inset-3 w-auto max-w-none translate-x-0 translate-y-0 sm:max-w-none',
           className,
         )}
@@ -186,7 +186,7 @@ function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn('text-lg font-medium', className)}
+      className={cn('text-lg font-semibold', className)}
       {...props}
     />
   )
@@ -200,7 +200,7 @@ function DialogDescription({
     <DialogPrimitive.Description
       data-slot="dialog-description"
       className={cn(
-        'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+        'text-base text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
         className,
       )}
       {...props}

package/src/ui/dropdown-menu.tsx

@@ -119,7 +119,7 @@ function DropdownMenuItem({
         data-variant={variant}
         render={children}
         className={cn(
-          "group/dropdown-menu-item relative flex cursor-pointer items-center gap-3 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "group/dropdown-menu-item relative flex cursor-pointer items-center gap-3 rounded-md px-2 py-1.5 text-base outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
           className,
         )}
         {...props}
@@ -133,7 +133,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-item relative flex cursor-pointer items-center gap-3 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item relative flex cursor-pointer items-center gap-3 rounded-md px-2 py-1.5 text-base outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -160,7 +160,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "group/checkbox-item relative flex cursor-pointer items-center gap-2.5 rounded-lg py-1.5 pr-2.5 pl-2.5 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/checkbox-item relative flex cursor-pointer items-center gap-2.5 rounded-md py-1.5 pr-2.5 pl-2.5 text-base outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       checked={checked}
@@ -203,7 +203,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-pointer items-center gap-3 rounded-lg py-1.5 pr-8 pl-2.5 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-pointer items-center gap-3 rounded-md py-1.5 pr-8 pl-2.5 text-base outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -234,7 +234,7 @@ function DropdownMenuLabel({
         data-slot="dropdown-menu-label"
         data-inset={inset}
         className={cn(
-          'px-2 py-1.5 text-sm font-normal text-muted-foreground data-inset:pl-7',
+          'px-2 py-1.5 text-base font-normal text-muted-foreground data-inset:pl-7',
           className,
         )}
         {...props}
@@ -298,7 +298,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-pointer items-center gap-3 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-pointer items-center gap-3 rounded-md px-2 py-1.5 text-base outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

package/src/ui/empty.tsx

@@ -59,7 +59,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="empty-title"
-      className={cn('cn-font-heading text-sm font-medium tracking-tight', className)}
+      className={cn('cn-font-heading text-base font-medium tracking-tight', className)}
       {...props}
     />
   )
@@ -70,7 +70,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
     <div
       data-slot="empty-description"
       className={cn(
-        'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+        'text-base/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
         className,
       )}
       {...props}
@@ -83,7 +83,7 @@ function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="empty-content"
       className={cn(
-        'flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance',
+        'flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-base text-balance',
         className,
       )}
       {...props}

package/src/ui/field.tsx

@@ -1,5 +1,6 @@
 import { cva, type VariantProps } from 'class-variance-authority'
 import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { cn } from '../lib/utils'
 import { Label } from './label'
 import { Separator } from './separator'
@@ -26,10 +27,7 @@ function FieldLegend({
     <legend
       data-slot="field-legend"
       data-variant={variant}
-      className={cn(
-        'mb-1.5 font-semibold data-[variant=label]:text-sm data-[variant=legend]:text-base',
-        className,
-      )}
+      className={cn('mb-1.5 font-semibold text-base', className)}
       {...props}
     />
   )
@@ -83,18 +81,36 @@ function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="field-content"
-      className={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className)}
+      className={cn('group/field-content flex flex-1 flex-col gap-0.5', className)}
       {...props}
     />
   )
 }
 
-function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+/**
+ * `optional` marks a field the form can be saved without. Forms mark the
+ * optional fields rather than the required ones: most fields are required,
+ * so the few that are not are the ones worth pointing out.
+ */
+function FieldLabel({
+  className,
+  optional = false,
+  children,
+  ...props
+}: React.ComponentProps<typeof Label> & { optional?: boolean }) {
+  const { t } = useTranslation()
+
   return (
     <Label
       data-slot="field-label"
       className={cn(
-        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-blue-100 has-data-checked:bg-blue-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-blue-500/20 dark:has-data-checked:bg-blue-500/10',
+        'group/field-label peer/field-label flex w-fit gap-2 group-data-[disabled=true]/field:opacity-50',
+        // A label wrapping a whole `Field` is a choice card: a card's corner,
+        // edge, fill, lift and inset. Checked, it takes a blue edge and tint;
+        // those rules repeat the card-label condition so they outrank the
+        // edge above rather than racing it on stylesheet order.
+        'has-[>[data-slot=field]]:rounded-card has-[>[data-slot=field]]:border has-[>[data-slot=field]]:border-card-edge has-[>[data-slot=field]]:bg-card has-[>[data-slot=field]]:shadow-card-lift *:data-[slot=field]:p-3.5',
+        'has-[>[data-slot=field]]:has-data-checked:border-blue-500 has-[>[data-slot=field]]:has-data-checked:bg-blue-50/70 dark:has-[>[data-slot=field]]:has-data-checked:bg-blue-500/10',
         // Card-shaped labels (the ones wrapping a whole `Field`) are clickable
         // targets, so they need the affordance a bare text label doesn't:
         // a pointer and a hover tint. Scoped by `has-[>[data-slot=field]]` so
@@ -107,7 +123,12 @@ function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>)
         className,
       )}
       {...props}
-    />
+    >
+      {children}
+      {optional && (
+        <span className="font-normal text-muted-foreground">{t('admin.common.optional')}</span>
+      )}
+    </Label>
   )
 }
 
@@ -116,7 +137,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="field-label"
       className={cn(
-        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+        'flex w-fit items-center gap-2 text-base font-medium group-data-[disabled=true]/field:opacity-50',
         className,
       )}
       {...props}
@@ -129,7 +150,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
     <p
       data-slot="field-description"
       className={cn(
-        'text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
+        'text-left text-base font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
         'last:mt-0 nth-last-2:-mt-1',
         '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
         className,
@@ -151,7 +172,7 @@ function FieldSeparator({
       data-slot="field-separator"
       data-content={!!children}
       className={cn(
-        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+        'relative -my-2 h-5 text-base group-data-[variant=outline]/field-group:-mb-2',
         className,
       )}
       {...props}
@@ -218,7 +239,7 @@ function FieldError({
     <div
       role="alert"
       data-slot="field-error"
-      className={cn('text-sm font-normal text-destructive', className)}
+      className={cn('text-base font-normal text-destructive', className)}
       {...props}
     >
       {content}