@spree/dashboard-ui 0.13.1 → 1.0.0-beta.2

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

@@ -1,10 +1,16 @@
-import { format, startOfMonth, startOfYear, subDays } from 'date-fns'
-import { CalendarIcon, ChevronDownIcon } from 'lucide-react'
-import { useState } from 'react'
+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 {
+  DATE_RANGE_PRESET_KEYS,
+  type DateRangePresetKey,
+  matchDateRangePreset,
+  resolveDateRangePreset,
+} from '../lib/date-range-presets'
 import { cn } from '../lib/utils'
+import { CalendarIcon, ChevronDownIcon } from '../spree/icons'
 import { Button } from './button'
 import { Calendar } from './calendar'
 import { Popover, PopoverContent, PopoverTrigger } from './popover'
@@ -14,79 +20,58 @@ export interface DateRange {
   to: Date
 }
 
-type PresetKey = '7d' | '14d' | '30d' | '90d' | 'this_month' | 'ytd' | 'custom'
-
-interface Preset {
-  key: PresetKey
-  labelKey: string
-  value: () => DateRange
+const PRESET_LABEL_KEYS: Record<Exclude<DateRangePresetKey, 'custom'>, string> = {
+  '7d': 'admin.components.date_range_picker.presets.last_7_days',
+  '14d': 'admin.components.date_range_picker.presets.last_14_days',
+  '30d': 'admin.components.date_range_picker.presets.last_30_days',
+  '90d': 'admin.components.date_range_picker.presets.last_90_days',
+  this_month: 'admin.components.date_range_picker.presets.this_month',
+  ytd: 'admin.components.date_range_picker.presets.year_to_date',
 }
 
-const presets: Preset[] = [
-  {
-    key: '7d',
-    labelKey: 'admin.components.date_range_picker.presets.last_7_days',
-    value: () => ({ from: subDays(new Date(), 7), to: new Date() }),
-  },
-  {
-    key: '14d',
-    labelKey: 'admin.components.date_range_picker.presets.last_14_days',
-    value: () => ({ from: subDays(new Date(), 14), to: new Date() }),
-  },
-  {
-    key: '30d',
-    labelKey: 'admin.components.date_range_picker.presets.last_30_days',
-    value: () => ({ from: subDays(new Date(), 30), to: new Date() }),
-  },
-  {
-    key: '90d',
-    labelKey: 'admin.components.date_range_picker.presets.last_90_days',
-    value: () => ({ from: subDays(new Date(), 90), to: new Date() }),
-  },
-  {
-    key: 'this_month',
-    labelKey: 'admin.components.date_range_picker.presets.this_month',
-    value: () => ({ from: startOfMonth(new Date()), to: new Date() }),
-  },
-  {
-    key: 'ytd',
-    labelKey: 'admin.components.date_range_picker.presets.year_to_date',
-    value: () => ({ from: startOfYear(new Date()), to: new Date() }),
-  },
-]
-
-interface DateRangePickerProps {
+export interface DateRangePickerProps {
   value: DateRange
   onChange: (range: DateRange) => void
+  /**
+   * IANA timezone used to resolve relative presets ("last 30 days").
+   * Defaults to the browser zone. Pass the store timezone on admin
+   * surfaces so every merchant sees the same span.
+   */
+  timezone?: string
 }
 
-export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
+export function DateRangePicker({ value, onChange, timezone }: DateRangePickerProps) {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
-  const [activePreset, setActivePreset] = useState<PresetKey>('30d')
   const [calendarRange, setCalendarRange] = useState<DayPickerDateRange | undefined>()
+  const [month, setMonth] = useState<Date>(value.from)
 
-  const activePresetLabelKey =
-    presets.find((p) => p.key === activePreset)?.labelKey ??
-    'admin.components.date_range_picker.presets.last_30_days'
+  const zone = useMemo(
+    () => timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC',
+    [timezone],
+  )
+  // Derived from `value` so a remount — or a range written by the parent —
+  // keeps the trigger and the highlighted preset in sync. A second piece of
+  // preset state is what made "Last 90 days" revert to "Last 30 days"
+  // after the dashboard swapped the picker for a skeleton.
+  const activePreset = matchDateRangePreset(value, zone)
 
   const dateLocale = activeDateLocale()
   const triggerLabel =
     activePreset === 'custom'
       ? `${format(value.from, 'MMM d', { locale: dateLocale })} – ${format(value.to, 'MMM d', { locale: dateLocale })}`
-      : t(activePresetLabelKey)
+      : t(PRESET_LABEL_KEYS[activePreset])
 
-  function selectPreset(preset: Preset) {
-    const range = preset.value()
-    setActivePreset(preset.key)
+  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) {
-      setActivePreset('custom')
       onChange({ from: calendarRange.from, to: calendarRange.to })
       setOpen(false)
     }
@@ -101,6 +86,7 @@ export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
         setOpen(nextOpen)
         if (nextOpen) {
           setCalendarRange({ from: value.from, to: value.to })
+          setMonth(value.from)
         }
       }}
     >
@@ -114,25 +100,26 @@ export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
       <PopoverContent align="end" className="w-auto p-0">
         <div className="flex">
           <div className="flex flex-col border-r py-2">
-            {presets.map((preset) => (
+            {DATE_RANGE_PRESET_KEYS.map((key) => (
               <button
-                key={preset.key}
+                key={key}
                 type="button"
-                onClick={() => selectPreset(preset)}
+                onClick={() => selectPreset(key)}
                 className={cn(
                   'whitespace-nowrap px-4 py-1.5 text-left text-sm transition-colors hover:bg-accent',
-                  activePreset === preset.key && 'font-medium text-foreground',
-                  activePreset !== preset.key && 'text-muted-foreground',
+                  activePreset === key && 'font-medium text-foreground',
+                  activePreset !== key && 'text-muted-foreground',
                 )}
               >
-                {t(preset.labelKey)}
+                {t(PRESET_LABEL_KEYS[key])}
               </button>
             ))}
           </div>
           <div className="flex flex-col p-3">
             <Calendar
               mode="range"
-              defaultMonth={calendarRange?.from}
+              month={month}
+              onMonthChange={setMonth}
               selected={calendarRange}
               onSelect={setCalendarRange}
               numberOfMonths={2}

package/src/ui/dialog.tsx

@@ -1,8 +1,8 @@
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
 import i18n from 'i18next'
-import { XIcon } from 'lucide-react'
 import * as React from 'react'
 import { cn } from '../lib/utils'
+import { XIcon } from '../spree/icons'
 import { Button } from './button'
 
 function Dialog({
@@ -83,7 +83,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        'fixed inset-0 isolate z-50 bg-gray-100/75 dark:bg-black/60 duration-100 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 transition-opacity',
+        'fixed inset-0 isolate z-50 bg-background/60 dark:bg-black/60 duration-100 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 transition-opacity',
         className,
       )}
       {...props}
@@ -105,7 +105,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-[500px] data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform]',
+          '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]',
           className,
         )}
         style={{ maxHeight: '90vh' }}
@@ -132,7 +132,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn('flex flex-col gap-1.5 border-b p-4', className)}
+      className={cn('flex flex-col gap-1.5 border-b border-border-subtle p-4', className)}
       {...props}
     />
   )
@@ -160,7 +160,7 @@ function DialogFooter({
     <div
       data-slot="dialog-footer"
       className={cn(
-        'flex flex-col-reverse gap-2 border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+        'flex flex-col-reverse gap-2 border-t border-border-subtle bg-muted/50 p-4 sm:flex-row sm:justify-end',
         className,
       )}
       {...props}
@@ -177,7 +177,7 @@ function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn('text-base leading-none font-medium', className)}
+      className={cn('text-lg font-medium', className)}
       {...props}
     />
   )

package/src/ui/dropdown-menu.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { Menu as MenuPrimitive } from '@base-ui/react/menu'
-import { CheckIcon, ChevronRightIcon } from 'lucide-react'
 import * as React from 'react'
 import { cn } from '../lib/utils'
+import { CheckIcon, ChevronRightIcon } from '../spree/icons'
 
 function DropdownMenu({
   children,
@@ -81,7 +81,9 @@ function DropdownMenuContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            'z-50 max-h-[var(--available-height)] min-w-40 max-w-80 overflow-x-hidden overflow-y-auto rounded-2xl border border-border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform]',
+            // `origin-(--transform-origin)` so the menu grows out of its
+            // trigger rather than its own centre.
+            'z-50 max-h-[var(--available-height)] min-w-40 max-w-80 overflow-x-hidden overflow-y-auto rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-lg origin-(--transform-origin) duration-100 ease-out 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]',
             className,
           )}
           {...props}
@@ -117,7 +119,7 @@ function DropdownMenuItem({
         data-variant={variant}
         render={children}
         className={cn(
-          "group/dropdown-menu-item relative flex cursor-default items-center gap-3 rounded-xl px-2.5 py-2 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-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",
           className,
         )}
         {...props}
@@ -131,7 +133,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-3 rounded-xl px-2.5 py-2 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-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",
         className,
       )}
       {...props}
@@ -158,7 +160,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-3 rounded-xl py-2 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-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",
         className,
       )}
       checked={checked}
@@ -197,7 +199,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-3 rounded-xl py-2 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-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",
         className,
       )}
       {...props}
@@ -228,7 +230,7 @@ function DropdownMenuLabel({
         data-slot="dropdown-menu-label"
         data-inset={inset}
         className={cn(
-          'px-2.5 py-2 text-sm font-normal text-muted-foreground data-inset:pl-7',
+          'px-2 py-1.5 text-sm font-normal text-muted-foreground data-inset:pl-7',
           className,
         )}
         {...props}
@@ -244,7 +246,7 @@ function DropdownMenuSeparator({
   return (
     <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      className={cn('mx-1 my-1 h-px bg-border-subtle', className)}
       {...props}
     />
   )
@@ -280,22 +282,25 @@ function DropdownMenuSubTrigger({
   className,
   inset,
   children,
+  hideChevron,
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {
   inset?: boolean
+  /** Suppress the default trailing chevron when the trigger renders its own affordance. */
+  hideChevron?: boolean
 }) {
   return (
     <MenuPrimitive.SubmenuTrigger
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center gap-3 rounded-xl px-2.5 py-2 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-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",
         className,
       )}
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto" />
+      {!hideChevron && <ChevronRightIcon className="ml-auto" />}
     </MenuPrimitive.SubmenuTrigger>
   )
 }
@@ -314,7 +319,9 @@ function DropdownMenuSubContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-sub-content"
           className={cn(
-            'z-50 min-w-[96px] overflow-hidden rounded-2xl border border-border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform]',
+            // `origin-(--transform-origin)` so the submenu grows out of its
+            // parent item rather than its own centre.
+            'z-50 min-w-[96px] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-lg origin-(--transform-origin) duration-100 ease-out 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]',
             className,
           )}
           {...props}

package/src/ui/field.tsx

@@ -9,7 +9,7 @@ function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
     <fieldset
       data-slot="field-set"
       className={cn(
-        'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 rounded-md p-3 border border-border-subtle shadow-xs bg-card',
         className,
       )}
       {...props}
@@ -27,7 +27,7 @@ function FieldLegend({
       data-slot="field-legend"
       data-variant={variant}
       className={cn(
-        'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+        'mb-1.5 font-semibold data-[variant=label]:text-sm data-[variant=legend]:text-base',
         className,
       )}
       {...props}
@@ -95,6 +95,14 @@ function FieldLabel({ className, ...props }: React.ComponentProps<typeof 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-500/30 has-data-checked:bg-blue-500/5 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',
+        // 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
+        // plain field labels keep their default cursor, and excluded on the
+        // checked card by `not-has-data-checked` — a competing hover rule of
+        // equal specificity would just race the selected tint and win.
+        'has-[>[data-slot=field]]:cursor-pointer has-[>[data-slot=field]]:transition-colors',
+        'has-[>[data-slot=field]]:not-has-data-checked:hover:border-border has-[>[data-slot=field]]:not-has-data-checked:hover:bg-accent/60',
         'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
         className,
       )}

package/src/ui/input-group.tsx

@@ -11,7 +11,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="input-group"
       role="group"
       className={cn(
-        'group/input-group relative flex w-full min-w-0 items-center rounded-lg border border-border bg-card text-foreground shadow-xs transition-all duration-100 ease-in-out outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:shadow-none has-disabled:bg-muted has-disabled:border-border has-disabled:opacity-50 has-disabled:shadow-none has-[[data-slot=input-group-control]:focus-visible]:border-blue-500 has-[[data-slot=input-group-control]:focus-visible]:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
+        'group/input-group relative flex w-full min-w-0 items-center rounded-md border border-border bg-card text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:shadow-none has-disabled:bg-muted has-disabled:cursor-not-allowed has-disabled:text-muted-foreground has-[[data-slot=input-group-control]:focus-visible]:border-blue-500 has-[[data-slot=input-group-control]:focus-visible]:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
         className,
       )}
       {...props}

package/src/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'block w-full min-w-0 min-h-8 rounded-lg border border-border bg-card py-1.5 px-2.5 text-base font-normal leading-normal text-foreground shadow-xs transition-all duration-100 ease-in-out outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:border-border disabled:text-muted-foreground disabled:shadow-none aria-invalid:border-destructive file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+        'block w-full min-w-0 min-h-8 rounded-md border border-border bg-card py-1.5 px-2.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
         className,
       )}
       {...props}

package/src/ui/media-preview.tsx

@@ -0,0 +1,105 @@
+import type * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '../lib/utils'
+import { FilmIcon, ImagePlusIcon } from '../spree/icons'
+
+export interface MediaPreviewProps {
+  mediaType?: 'image' | 'video' | 'external_video' | string
+  /** Still image URL — the image itself, or a video's poster. */
+  previewUrl?: string | null
+  /** Playable file for an uploaded video. */
+  videoUrl?: string | null
+  /**
+   * Player URL for an external video. Parsing the provider link is the
+   * caller's job — the server is the authority on what is embeddable, and
+   * this component only renders what it is handed.
+   */
+  embedUrl?: string | null
+  alt?: string
+  /** Normalized 0–1. Drawn as a marker over an image. */
+  focalPoint?: { x: number; y: number } | null
+  /** Click handler for setting the focal point; images only. */
+  onFocalPointClick?: (event: React.MouseEvent<HTMLElement>) => void
+  className?: string
+}
+
+/**
+ * What a media row looks like, whatever its kind: an external video as its
+ * provider's embed, an uploaded video as a player, an image as a picture —
+ * with a focal point marker when one is set.
+ *
+ * Headless by the package rule: everything arrives as props, so the same
+ * component serves a saved record and a form row that only has blob URLs
+ * because it has not been saved yet.
+ */
+export function MediaPreview({
+  mediaType = 'image',
+  previewUrl,
+  videoUrl,
+  embedUrl,
+  alt = '',
+  focalPoint,
+  onFocalPointClick,
+  className = 'max-h-[60vh]',
+}: MediaPreviewProps) {
+  const { t } = useTranslation()
+
+  const isImage = mediaType === 'image'
+
+  if (mediaType === 'external_video' && embedUrl) {
+    return (
+      <div className="aspect-video w-full shrink-0 overflow-hidden rounded-lg border border-border bg-black">
+        <iframe
+          src={embedUrl}
+          title={alt || t('admin.components.media_preview.video_title')}
+          allowFullScreen
+          className="size-full"
+        />
+      </div>
+    )
+  }
+
+  if (mediaType === 'video' && videoUrl) {
+    return (
+      // biome-ignore lint/a11y/useMediaCaption: merchant-supplied footage has no track to offer
+      <video
+        src={videoUrl}
+        poster={previewUrl ?? undefined}
+        controls
+        playsInline
+        preload="metadata"
+        className={cn('w-full shrink-0 rounded-lg bg-black', className)}
+      />
+    )
+  }
+
+  const canSetFocalPoint = isImage && !!previewUrl && !!onFocalPointClick
+
+  return (
+    <button
+      type="button"
+      disabled={!canSetFocalPoint}
+      onClick={onFocalPointClick}
+      className="group relative block w-full shrink-0 overflow-hidden rounded-lg border border-border bg-muted disabled:cursor-default"
+    >
+      {previewUrl ? (
+        <>
+          <img src={previewUrl} alt={alt} className={cn('w-full object-contain', className)} />
+          {isImage && focalPoint && (
+            <span
+              aria-hidden
+              className="pointer-events-none absolute size-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_2px_rgba(0,0,0,0.4)]"
+              style={{ left: `${focalPoint.x * 100}%`, top: `${focalPoint.y * 100}%` }}
+            />
+          )}
+        </>
+      ) : (
+        // A video with no poster has no still to show; say which kind of file
+        // it is rather than rendering a broken image.
+        <div className="flex aspect-square w-full items-center justify-center text-muted-foreground">
+          {isImage ? <ImagePlusIcon className="size-8" /> : <FilmIcon className="size-8" />}
+        </div>
+      )}
+    </button>
+  )
+}

package/src/ui/pagination.tsx

@@ -1,10 +1,10 @@
+import { useTranslation } from 'react-i18next'
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   ChevronsLeftIcon,
   ChevronsRightIcon,
-} from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+} from '../spree/icons'
 import { Button } from './button'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select'
 
@@ -33,27 +33,29 @@ export function Pagination({
   pageSizeOptions = [10, 20, 25, 30, 50],
 }: PaginationProps) {
   const { t } = useTranslation()
+  const showPageSize = Boolean(onPageSizeChange) && meta.count > 0
+  const showPageNav = meta.pages > 1
 
-  if (meta.pages <= 1 && !onPageSizeChange) return null
+  if (!showPageSize && !showPageNav) return null
 
   return (
-    <div className="flex items-center justify-between border-t border-border px-4 py-3">
-      <div className="text-sm text-muted-foreground">
+    <div className="flex items-center justify-between ps-2 py-2">
+      <div className="whitespace-nowrap text-sm text-muted-foreground">
         {t('admin.components.pagination.range', {
           from: meta.from,
           to: meta.to,
           count: meta.count,
         })}
       </div>
-      <div className="flex items-center gap-6">
-        {onPageSizeChange && (
-          <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 sm:gap-6">
+        {showPageSize && (
+          <div className="hidden items-center gap-2 sm:flex">
             <span className="text-sm text-muted-foreground">
               {t('admin.components.pagination.rows_per_page')}
             </span>
             <Select
               value={`${meta.limit}`}
-              onValueChange={(value) => onPageSizeChange(Number(value))}
+              onValueChange={(value) => onPageSizeChange?.(Number(value))}
             >
               <SelectTrigger className="h-8 w-[70px]">
                 <SelectValue />
@@ -68,13 +70,14 @@ export function Pagination({
             </Select>
           </div>
         )}
-        {meta.pages > 1 && (
+        {showPageNav && (
           <>
-            <span className="text-sm text-muted-foreground">
+            <span className="hidden whitespace-nowrap text-sm text-muted-foreground sm:inline">
               {t('admin.common.page_of', { page: meta.page, total: meta.pages })}
             </span>
             <div className="flex items-center gap-1">
               <Button
+                type="button"
                 size="icon-sm"
                 variant="outline"
                 className="hidden lg:flex"
@@ -85,8 +88,10 @@ export function Pagination({
                 <ChevronsLeftIcon />
               </Button>
               <Button
+                type="button"
                 size="icon-sm"
                 variant="outline"
+                className="size-9 sm:size-8"
                 disabled={!meta.previous}
                 onClick={() => meta.previous && onPageChange(meta.previous)}
               >
@@ -94,8 +99,10 @@ export function Pagination({
                 <ChevronLeftIcon />
               </Button>
               <Button
+                type="button"
                 size="icon-sm"
                 variant="outline"
+                className="size-9 sm:size-8"
                 disabled={!meta.next}
                 onClick={() => meta.next && onPageChange(meta.next)}
               >
@@ -103,6 +110,7 @@ export function Pagination({
                 <ChevronRightIcon />
               </Button>
               <Button
+                type="button"
                 size="icon-sm"
                 className="hidden lg:flex"
                 variant="outline"

package/src/ui/popover.tsx

@@ -56,8 +56,10 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            'z-50 w-auto rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-md',
-            'duration-100 data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform]',
+            'z-50 w-auto rounded-xl border border-border bg-popover p-2 text-popover-foreground shadow-lg',
+            // `origin-(--transform-origin)` (published by Base UI's Positioner)
+            // so the panel grows out of its trigger rather than its own centre.
+            'origin-(--transform-origin) duration-100 ease-out 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]',
             className,
           )}
           {...props}

package/src/ui/progress.tsx

@@ -30,7 +30,7 @@ function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
   return (
     <ProgressPrimitive.Track
       data-slot="progress-track"
-      className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
+      className={cn('relative h-2 w-full overflow-hidden rounded-full bg-blue-500/20', className)}
       {...props}
     />
   )
@@ -41,7 +41,10 @@ function ProgressIndicator({ className, ...props }: ProgressPrimitive.Indicator.
     <ProgressPrimitive.Indicator
       data-slot="progress-indicator"
       className={cn(
-        'h-full rounded-full bg-primary transition-all',
+        // `width` is a layout property, but it's the right one here: a
+        // determinate bar has to grow, and `scaleX` would distort the fill's
+        // rounded ends. Narrowed from `transition-all` so only width animates.
+        'h-full rounded-full bg-blue-500 transition-[width] duration-200 ease-out',
         'data-[indeterminate]:w-1/3 data-[indeterminate]:animate-pulse',
         className,
       )}