@spree/dashboard-ui 0.13.0 → 1.0.0-beta.1

package/src/ui/accordion.tsx

@@ -0,0 +1,83 @@
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+import { ChevronDownIcon } from '../spree/icons'
+
+/**
+ * Vertically stacked, expandable sections sharing one frame.
+ *
+ * One item is open at a time by default: a list of steps is read in order, and
+ * letting several stand open turns it back into the wall of text the collapse
+ * exists to avoid. Pass `multiple` where the sections are independent rather
+ * than sequential.
+ */
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+/** One section. `value` identifies it for `defaultValue` and controlled use. */
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      // Rules between items rather than around each: the group is one object,
+      // so the last item closes on the container's own edge.
+      className={cn('border-border-subtle border-b last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * The always-visible row that opens its section. Renders a chevron after the
+ * children, so callers pass only the label's own content.
+ */
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'group/accordion-trigger flex flex-1 cursor-pointer items-center gap-3 px-4 py-3.5 text-left text-base font-medium transition-colors outline-none hover:bg-accent/50 focus-visible:bg-accent',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="ms-auto size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-out group-data-[panel-open]/accordion-trigger:rotate-180 motion-reduce:transition-none" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+/**
+ * The revealed panel. Carries the section's padding, so `className` styles the
+ * content rather than the animated box around it.
+ */
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Panel>) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      // Height animates off Base UI's own `--accordion-panel-height`, which it
+      // measures for us — `height: auto` is not animatable, so without the
+      // variable the panel would snap open.
+      className="h-(--accordion-panel-height) overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 motion-reduce:transition-none"
+      {...props}
+    >
+      <div className={cn('px-4 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

package/src/ui/alert.tsx

@@ -0,0 +1,79 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '../lib/utils'
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+        // Custom colours, per the shadcn recipe: a tinted fill with matching
+        // text rather than the card background, so an advisory note reads as
+        // information instead of as a card of its own. Mirrors the `success`
+        // recipe in badge.tsx, including the dark-mode text bump for legibility.
+        info: 'border-blue-500/20 bg-blue-500/10 text-blue-800 *:data-[slot=alert-description]:text-blue-800/90 dark:text-blue-300 dark:*:data-[slot=alert-description]:text-blue-300/90',
+        // Amber rather than the `--color-warning` token, which is yellow-500 —
+        // a fill colour too light to read as body text. Amber is what the rest
+        // of the dashboard already uses to mark a warning.
+        warning:
+          'border-amber-500/20 bg-amber-500/10 text-amber-800 *:data-[slot=alert-description]:text-amber-800/90 dark:text-amber-300 dark:*:data-[slot=alert-description]:text-amber-300/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'font-semibold group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="alert-action" className={cn('absolute top-2 right-2', className)} {...props} />
+  )
+}
+
+export { Alert, AlertAction, AlertDescription, AlertTitle }

package/src/ui/attachment.tsx

@@ -12,7 +12,7 @@ import { Button } from './button'
 // `cn-*` preset classes flattened into plain utilities (this package predates
 // the shadcn CSS layer).
 const attachmentVariants = cva(
-  'group/attachment relative flex max-w-full min-w-0 shrink-0 flex-wrap rounded-lg border bg-card text-card-foreground transition-colors has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed',
+  'group/attachment relative flex max-w-full min-w-0 shrink-0 flex-wrap rounded-lg border bg-card text-card-foreground transition-colors has-[>a,>button]:hover:bg-accent/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed',
   {
     variants: {
       size: {

package/src/ui/badge.tsx

@@ -1,28 +1,39 @@
 import { cva, type VariantProps } from 'class-variance-authority'
-import { CheckIcon } from 'lucide-react'
-import * as React from 'react'
+import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '../lib/utils'
 import { Slot } from './slot'
 
 const badgeVariants = cva(
-  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
+  // No `border-transparent` here: it and a variant's `border-*` have the same
+  // specificity, so the one Tailwind emits last wins regardless of the order
+  // they appear in the class list — which silently erased the outline
+  // variant's border. Each variant states its own border colour instead.
+  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-sm border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow] duration-100 ease-out focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        default: 'border-transparent bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        // The four status variants below share one recipe: a tint from the
+        // status ramp, text from the same ramp's reading step, and a border
+        // that firms the shape up on busy surfaces. Both themes get real
+        // colours rather than one hue at reduced opacity — an opacity tint
+        // takes on whatever sits behind it, which turns a badge muddy over a
+        // striped table row and washes it out entirely on a dark card. Linked
+        // badges darken to the border step on hover, which is the next stop up
+        // the same ramp rather than a second colour.
         destructive:
-          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
-        // Mirrors the `destructive` recipe (tinted bg + matching text) with a
-        // green hue for "succeeded / completed / paid / shipped" states. Dark
-        // mode bumps text to `green-400` so it stays legible on dark fills.
-        success:
-          'bg-green-500/15 text-green-700 dark:bg-green-500/15 dark:text-green-400 [a]:hover:bg-green-500/25',
+          'border-danger-border bg-danger-bg text-danger focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-danger-border',
+        success: 'border-success-border bg-success-bg text-success [a]:hover:bg-success-border',
+        info: 'border-info-border bg-info-bg text-info [a]:hover:bg-info-border',
+        warning: 'border-warning-border bg-warning-bg text-warning [a]:hover:bg-warning-border',
         outline:
-          'border-border text-foreground/75 [a]:hover:bg-muted [a]:hover:text-muted-foreground',
-        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
-        link: 'text-primary underline-offset-4 hover:underline',
+          'border-border bg-card/50 text-foreground/75 [a]:hover:bg-accent [a]:hover:text-muted-foreground',
+        ghost:
+          'border-transparent hover:bg-accent hover:text-muted-foreground dark:hover:bg-accent/50',
+        link: 'border-transparent text-primary underline-offset-4 hover:underline',
       },
     },
     defaultVariants: {
@@ -49,61 +60,193 @@ function Badge({
   )
 }
 
-// Maps order/payment/etc. status strings to one of the canonical Badge
-// variants. Success-y states ("active", "paid", "shipped", …) route through
-// the `success` variant so the UI stays color-coded; everything else leans
-// on the canonical shadcn variants with shape + label carrying meaning.
-const statusVariantMap: Record<string, VariantProps<typeof badgeVariants>['variant']> = {
+/**
+ * Semantic tone of a status, independent of how it is drawn. `StatusBadge`
+ * renders it as a coloured dot, `Badge` as a tinted pill — same vocabulary,
+ * two presentations.
+ */
+type StatusTone = 'success' | 'warning' | 'destructive' | 'info' | 'neutral'
+
+/**
+ * Maps an order/payment/product status code to its semantic tone.
+ *
+ * Kept as one table because the same codes surface in tables, cards, page
+ * headers and filter menus — a local copy in any one of those is how two
+ * surfaces end up disagreeing about what "pending" looks like. Extend it
+ * rather than branching on status at a call site.
+ */
+const statusToneMap: Record<string, StatusTone> = {
   active: 'success',
+  authorized: 'info',
   complete: 'success',
   completed: 'success',
   paid: 'success',
-  shipped: 'success',
+  fulfilled: 'success',
+  delivered: 'success',
+  unfulfilled: 'warning',
+  proposed: 'warning',
   published: 'success',
   approved: 'success',
-  ready: 'success',
-  draft: 'outline',
-  pending: 'outline',
-  processing: 'outline',
-  inactive: 'outline',
-  cart: 'outline',
-  address: 'outline',
-  delivery: 'outline',
-  payment: 'outline',
-  confirm: 'outline',
-  resumed: 'secondary',
-  partial: 'secondary',
-  archived: 'secondary',
-  returned: 'secondary',
-  backorder: 'secondary',
-  balance_due: 'secondary',
-  credit_owed: 'secondary',
+  verified: 'success',
+  unverified: 'destructive',
+  unavailable: 'neutral',
+  unsupported: 'neutral',
+  revoked: 'destructive',
+  expired: 'destructive',
+  ready: 'warning',
+  available: 'success',
+  // Stock states, as the Inventory page's filter names them: sellable is
+  // good, nothing to sell is the problem, and the two middle states are units
+  // that exist but cannot be sold today — held by a checkout, or still on the
+  // road.
+  in_stock: 'success',
+  out_of_stock: 'destructive',
+  with_reserved: 'warning',
+  with_incoming: 'info',
+  draft: 'neutral',
+  pending: 'warning',
+  processing: 'warning',
+  inactive: 'neutral',
+  confirm: 'neutral',
+  resumed: 'neutral',
+  partial: 'info',
+  // What a carrier reports about a consignment in flight. `pending` and
+  // `delivered` are already above — they mean the same thing here.
+  pre_transit: 'info',
+  in_transit: 'info',
+  out_for_delivery: 'info',
+  available_for_pickup: 'warning',
+  return_to_sender: 'destructive',
+  failure: 'destructive',
+  unknown: 'neutral',
+  archived: 'neutral',
+  returned: 'success',
+  backorder: 'warning',
+  // Order payment status: amber while money is still owed either way, blue
+  // for a hold or a part refund, red once the authorisation is gone.
+  none: 'neutral',
+  partially_paid: 'warning',
+  partially_refunded: 'info',
+  overcharged: 'warning',
+  voided: 'destructive',
+  balance_due: 'warning',
+  credit_owed: 'warning',
   canceled: 'destructive',
+  suspended: 'destructive',
+  invited: 'info',
+  onboarding: 'warning',
+  incomplete: 'neutral',
+  ready_for_review: 'warning',
   failed: 'destructive',
   void: 'destructive',
   error: 'destructive',
   rejected: 'destructive',
+  used_up: 'destructive',
+  // Returns, exchanges and claims: amber while the merchant still owes an
+  // action, green once settled, muted when it went nowhere.
+  requested: 'warning',
+  open: 'warning',
+  received: 'warning',
+  refunded: 'success',
+  resolved: 'success',
+  denied: 'destructive',
+  // Inventory operations. `received` is deliberately absent: on a return it
+  // means the merchant still owes a refund, on a transfer or purchase order it
+  // means the job is done — one code, two tones, so those two callers pass
+  // `tone` explicitly.
+  ready_to_ship: 'warning',
+  ordered: 'info',
+  partially_received: 'info',
+  // Gift cards.
+  partially_redeemed: 'info',
+  redeemed: 'neutral',
+  // Price lists — `scheduled` is live-but-not-yet, which is the same shape as
+  // any other "waiting on the clock" state.
+  scheduled: 'info',
+  // Boolean filter values. A yes/no pair is a state like any other — "in
+  // stock: no" is the row an operator is looking for, and reading it in the
+  // same green/red the rest of the app uses saves them parsing the word.
+  true: 'success',
+  false: 'destructive',
+}
+
+// Dot fills, by tone. These read the same `--status-*` ramps the tinted Badge
+// variants use, but take the *reading* step rather than the fill step: a 6px
+// dot needs the saturated end of the ramp to register at all, where a pill can
+// rely on area.
+const dotToneClasses: Record<StatusTone, string> = {
+  success: 'bg-success',
+  warning: 'bg-warning',
+  destructive: 'bg-danger',
+  info: 'bg-info',
+  neutral: 'bg-muted-foreground/50',
+}
+
+/**
+ * Bare status dot. Decorative by construction — it carries no accessible name,
+ * so it must always sit beside text that says the same thing. Use it to align
+ * a status with its label in a menu or list; use `StatusBadge` when you want
+ * the dot and its label together.
+ */
+function StatusDot({
+  status,
+  tone: toneOverride,
+  className,
+}: {
+  status: string
+  tone?: StatusTone
+  className?: string
+}) {
+  const tone = toneOverride ?? statusToneMap[status] ?? 'neutral'
+  return (
+    <span
+      aria-hidden
+      className={cn('inline-block size-2 shrink-0 rounded-full', dotToneClasses[tone], className)}
+    />
+  )
 }
 
 /**
- * Status pill whose color is derived from the raw status code. Stays headless:
- * pass a translated `label` from the app layer; without one it humanizes the
- * code itself (`balance_due` → `balance due`) as a best-effort fallback.
+ * Status indicator: a coloured dot beside the label, rather than a tinted pill.
+ *
+ * A table column of pills reads as a column of coloured blocks — the eye lands
+ * on the fills instead of the words, and a row where three statuses sit side by
+ * side becomes a bar chart of nothing. A dot puts the colour where it belongs:
+ * a small mark that the label does the talking for. Colour is never the only
+ * channel, since the label is always rendered.
+ *
+ * Stays headless: pass a translated `label` from the app layer; without one it
+ * humanizes the code itself (`balance_due` → `balance due`) as a best-effort
+ * fallback.
+ *
+ * `tone` overrides the shared map, for the rare code that means different
+ * things in two domains — a `received` return still owes a refund, a
+ * `received` stock transfer is finished. Reach for it only then: everything
+ * else belongs in `statusToneMap`, or two surfaces will disagree.
  */
 function StatusBadge({
   status,
   label,
+  tone,
   className,
 }: {
   status: string
   label?: string
+  tone?: StatusTone
   className?: string
 }) {
-  const variant = statusVariantMap[status] ?? 'outline'
   return (
-    <Badge variant={variant} className={cn('capitalize', className)}>
+    <span
+      data-slot="status-badge"
+      data-status={status}
+      className={cn(
+        'inline-flex w-fit shrink-0 items-center gap-1.5 whitespace-nowrap text-sm capitalize',
+        className,
+      )}
+    >
+      <StatusDot status={status} tone={tone} />
       {label ?? status.replace(/_/g, ' ')}
-    </Badge>
+    </span>
   )
 }
 
@@ -140,22 +283,21 @@ function ActiveBadge({
   const { t } = useTranslation()
   const resolvedActiveLabel = activeLabel ?? t('admin.common.yes')
   const resolvedInactiveLabel = inactiveLabel ?? t('admin.common.no')
-  if (active) {
-    return (
-      <Badge variant="success" className={className}>
-        <CheckIcon />
-        {resolvedActiveLabel}
-      </Badge>
-    )
-  }
-  if (dashWhenInactive) {
+  if (dashWhenInactive && !active) {
     return <span className={cn('text-muted-foreground', className)}>—</span>
   }
+  // Boolean states read through the same map as every other status, so an
+  // "Active / Inactive" column and a "Paid / Failed" one agree on what green
+  // and red mean. The tick the active case used to carry is redundant beside
+  // a dot that already says the same thing.
   return (
-    <Badge variant="outline" className={className}>
-      {resolvedInactiveLabel}
-    </Badge>
+    <StatusBadge
+      status={active ? 'true' : 'false'}
+      label={active ? resolvedActiveLabel : resolvedInactiveLabel}
+      className={className}
+    />
   )
 }
 
-export { ActiveBadge, Badge, badgeVariants, StatusBadge }
+export type { StatusTone }
+export { ActiveBadge, Badge, badgeVariants, StatusBadge, StatusDot, statusToneMap }

package/src/ui/breadcrumb.tsx

@@ -1,7 +1,7 @@
 import i18n from 'i18next'
-import { ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react'
 import type * as React from 'react'
 import { cn } from '../lib/utils'
+import { ChevronRightIcon, MoreHorizontalIcon } from '../spree/icons'
 import { Slot } from './slot'
 
 function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {

package/src/ui/button.tsx

@@ -4,26 +4,38 @@ import { cn } from '../lib/utils'
 import { Slot } from './slot'
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-transparent text-sm font-medium whitespace-nowrap cursor-pointer select-none no-underline transition-[color,background-color,border-color,box-shadow] duration-100 ease-linear outline-none focus-visible:border-blue-500 focus-visible:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] disabled:pointer-events-none disabled:opacity-70 disabled:cursor-not-allowed aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-lg border border-transparent text-sm font-medium whitespace-nowrap cursor-pointer select-none no-underline transition-[color,background-color,border-color,box-shadow,transform,translate,scale] duration-100 ease-out outline-none active:scale-[0.98] motion-reduce:active:scale-100 focus-visible:border-blue-500 focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:pointer-events-none disabled:opacity-70 disabled:cursor-not-allowed aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default:
-          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/85 dark:bg-blue-600 dark:text-white dark:hover:bg-blue-500',
+        // `shadow-xs` like the outline and destructive variants: the primary
+        // action is the one thing on a page that should sit slightly above it,
+        // and it was the only variant with no lift at all.
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/85',
         outline:
-          'border-border bg-muted text-foreground shadow-xs hover:bg-accent hover:text-foreground aria-expanded:bg-accent',
-        ghost: 'hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent',
-        destructive: 'text-destructive bg-muted border-border shadow-xs hover:bg-destructive/10',
+          'border-border bg-card shadow-xs text-foreground hover:bg-accent hover:text-foreground aria-expanded:bg-accent',
+        // `group-hover/row:` — inside a hovered table row the row already wears
+        // --accent, so repeating it here leaves the button at 1.03:1 against its
+        // own background: invisible exactly when the pointer is on it. On a
+        // hovered row it steps to --accent-strong instead.
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent group-hover/row:hover:bg-accent-strong',
+        destructive: 'text-destructive bg-card border-border shadow-xs hover:bg-destructive/10',
+        // Ghost's chrome (none until hover) with destructive's colour. The
+        // inline remove buttons that sit inside a row or field want no box of
+        // their own, but still need the red tint on hover rather than ghost's
+        // neutral grey — several had been reproducing exactly this by hand.
+        'destructive-ghost': 'text-destructive hover:bg-destructive/10 hover:text-destructive',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
         default: 'h-9 px-3 py-1.5',
-        xs: "h-6 gap-1 rounded-lg px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-lg px-2 py-1 text-sm [&_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-md px-2 py-1 text-sm [&_svg:not([class*='size-'])]:size-3.5",
         lg: 'h-10 px-3 py-2 text-base',
         icon: 'size-9',
-        'icon-xs': "size-6 rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        'icon-sm': 'size-7 rounded-lg',
+        'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm': 'size-7 rounded-md',
         'icon-lg': 'size-10',
       },
     },

package/src/ui/calendar.tsx

@@ -1,8 +1,8 @@
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
 import type * as React from 'react'
 import { DayPicker } from 'react-day-picker'
 import { activeDateLocale } from '../lib/date-locale'
 import { cn } from '../lib/utils'
+import { ChevronLeftIcon, ChevronRightIcon } from '../spree/icons'
 
 function Calendar({
   className,

package/src/ui/card.tsx

@@ -2,12 +2,50 @@ import type * as React from 'react'
 
 import { cn } from '../lib/utils'
 
-function Card({ className, ...props }: React.ComponentProps<'div'>) {
+function Card({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & {
+  /**
+   * `nested` is one resource listed inside a card — a fulfillment on an order,
+   * a return, a rule. It sits on a recessed surface so it reads as a thing
+   * *within* the card rather than another card beside it, and carries its own
+   * horizontal padding so its sections divide edge to edge.
+   *
+   * The box is load-bearing once there is more than one of them: a fulfillment
+   * already divides its own rows, so grouping by rules alone would draw the
+   * boundary between two fulfillments as the same line at the same inset as
+   * the boundary between two items — and the panel's own actions would have no
+   * visible owner.
+   *
+   * `container` is the card those nested records sit in. Pair the two: the
+   * container recedes, the records stay raised. A `default` card wrapping
+   * `nested` ones puts the content in a well and the frame in front of it,
+   * which reads as the content being demoted.
+   */
+  variant?: 'default' | 'nested' | 'container'
+}) {
   return (
     <div
       data-slot="card"
+      data-variant={variant}
       className={cn(
-        'group/card flex flex-col min-w-0 break-words bg-card text-card-foreground border border-border rounded-xl shadow-sm',
+        // `overflow-x-clip`: a wide child (a table sized to its columns) otherwise
+        // propagates its width up through every `overflow: visible` ancestor to
+        // the document, laying the whole page out wider than the viewport. `clip`
+        // rather than `hidden` so `overflow-y` stays `visible` and sticky
+        // descendants keep resolving against the page.
+        'group/card flex flex-col min-w-0 overflow-x-clip break-words text-card-foreground shadow-xs',
+        variant === 'nested' &&
+          'rounded-lg border border-border-subtle bg-nested-raised px-3 shadow-none',
+        // Holds nested records rather than content, so it recedes and lets
+        // them be the raised, readable thing.
+        variant === 'container' && 'rounded-xl border border-border-card bg-card-container',
+        // `--border-card`, not `--border`: a card is a region of the sheet
+        // rather than a surface floating above it, so its edge is softer than
+        // the structural one the sheet, dialogs and dropdowns draw.
+        variant === 'default' && 'rounded-xl border border-border-card bg-card',
         className,
       )}
       {...props}
@@ -20,7 +58,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card-header"
       className={cn(
-        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] px-3 py-2.5 border-b border-border rounded-t-[calc(var(--radius-2xl)-1px)]',
+        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] px-3 py-2.5 border-b border-border-subtle rounded-t-[calc(var(--radius-2xl)-1px)] group-data-[variant=nested]/card:rounded-none group-data-[variant=nested]/card:px-0 group-data-[variant=nested]/card:py-2 group-data-[variant=nested]/card:items-center',
         className,
       )}
       {...props}
@@ -32,7 +70,9 @@ function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-title"
-      className={cn('text-lg font-medium flex items-center gap-2', className)}
+      // Same size and weight as SheetTitle and DialogTitle: a card, a sheet
+      // and a dialog heading are the same rank of thing.
+      className={cn('text-base font-semibold flex items-center gap-2', className)}
       {...props}
     />
   )
@@ -53,7 +93,13 @@ function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="card-content" className={cn('p-3', className)} {...props} />
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('p-3 group-data-[variant=nested]/card:px-0', className)}
+      {...props}
+    />
+  )
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
@@ -61,7 +107,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card-footer"
       className={cn(
-        'flex items-center p-3 bg-transparent border-t border-border rounded-b-[calc(var(--radius-xl)-1px)]',
+        'flex items-center p-3 bg-transparent border-t border-border-subtle rounded-b-[calc(var(--radius-xl)-1px)] group-data-[variant=nested]/card:rounded-none group-data-[variant=nested]/card:px-0',
         className,
       )}
       {...props}