@spree/dashboard-ui 6.0.3 → 6.0.4

package/src/ui/input-group.tsx

@@ -2,7 +2,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import * as React from 'react'
 import { cn } from '../lib/utils'
 import { Button } from './button'
-import { Input } from './input'
+import { Input, NumberInput } from './input'
 import { Textarea } from './textarea'
 
 function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
@@ -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-md border border-border shadow-control 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',
+        'group/input-group relative flex w-full min-w-0 items-center rounded-xl border border-field-border shadow-control 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 not-has-disabled:not-focus-within:hover:bg-field-hover 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-field-focus 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}
@@ -20,7 +20,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
 }
 
 const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  "flex h-auto cursor-default group-focus-within/input-group:cursor-text items-center justify-center gap-2 py-1.5 text-base font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
@@ -60,7 +60,7 @@ function InputGroupAddon({
   )
 }
 
-const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
+const inputGroupButtonVariants = cva('flex items-center gap-2 text-base shadow-none', {
   variants: {
     size: {
       xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
@@ -97,7 +97,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
       className={cn(
-        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 text-base text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -106,11 +106,22 @@ function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
 }
 
 function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {
+  if (props.type === 'number') {
+    return (
+      <NumberInput
+        bare
+        data-slot="input-group-control"
+        className={cn('flex-1 self-stretch', className)}
+        {...props}
+      />
+    )
+  }
+
   return (
     <Input
       data-slot="input-group-control"
       className={cn(
-        'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus:border-0 focus:shadow-none focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0',
+        'flex-1 rounded-none border-0 bg-transparent not-disabled:not-read-only:not-focus:hover:bg-transparent shadow-none ring-0 focus:border-0 focus:shadow-none focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0',
         className,
       )}
       {...props}

package/src/ui/input.tsx

@@ -1,14 +1,30 @@
-import type * as React from 'react'
+import * as React from 'react'
 
 import { cn } from '../lib/utils'
+import { ChevronDownIcon, ChevronUpIcon } from '../spree/icons'
+
+const FIELD_BOX =
+  'rounded-xl border border-field-border shadow-control bg-card transition-[color,background-color,border-color,box-shadow] duration-100 ease-out'
+
+function Input({
+  className,
+  type,
+  stepper,
+  ...props
+}: React.ComponentProps<'input'> & {
+  /** `false` keeps a number field plain, where a column has no room for the buttons. */
+  stepper?: boolean
+}) {
+  if (type === 'number' && stepper !== false)
+    return <NumberInput className={className} {...props} />
 
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   return (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        'block w-full min-w-0 min-h-8 rounded-md border border-border shadow-control 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',
+        FIELD_BOX,
+        'block w-full min-w-0 min-h-8 cursor-default focus:cursor-text py-1.5 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none px-2.5 text-base font-normal leading-normal text-foreground outline-none placeholder:text-muted-foreground not-disabled:not-read-only:not-focus:hover:bg-field-hover focus:border-blue-500 focus:shadow-field-focus disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-base file:font-medium file:text-foreground',
         className,
       )}
       {...props}
@@ -16,4 +32,132 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   )
 }
 
-export { Input }
+// The two buttons stack into one pill 3px inside the field's edge. Its outer
+// corners follow the field's (radius-xl, less the 1px border and the 3px gap),
+// so the curves stay parallel; the corners where the buttons meet stay tight.
+const STEP_RADIUS_UP = 'rounded-t-[calc(var(--radius-xl)-4px)] rounded-b-[2px]'
+const STEP_RADIUS_DOWN = 'rounded-b-[calc(var(--radius-xl)-4px)] rounded-t-[2px]'
+
+type NumberInputProps = Omit<React.ComponentProps<'input'>, 'type'> & {
+  /** Drops the field's own box, for an input that sits inside an `InputGroup`. */
+  bare?: boolean
+}
+
+/**
+ * A number field with increase and decrease buttons. Every `<Input
+ * type="number">` renders this, so forms get it without opting in.
+ *
+ * `className` lands on the outer box, so width, margin and border classes
+ * work as they do on a plain input; text alignment and numeral style carry
+ * through to the value. The buttons are skipped by Tab — the arrow keys
+ * already step the value.
+ */
+function NumberInput({ className, bare, disabled, readOnly, ref, ...props }: NumberInputProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  // A form library passes its own ref; the buttons need the element too.
+  const setRef = (node: HTMLInputElement | null) => {
+    inputRef.current = node
+    if (typeof ref === 'function') ref(node)
+    else if (ref) ref.current = node
+  }
+  const repeat = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+  const interactive = !disabled && !readOnly
+
+  const step = (direction: 1 | -1) => {
+    const input = inputRef.current
+    if (!input) return
+    try {
+      direction === 1 ? input.stepUp() : input.stepDown()
+    } catch {
+      // `step="any"` has no step to take; move by one, inside min and max.
+      let next = (Number.parseFloat(input.value) || 0) + direction
+      if (input.min !== '') next = Math.max(next, Number(input.min))
+      if (input.max !== '') next = Math.min(next, Number(input.max))
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(
+        input,
+        String(next),
+      )
+    }
+    // The value changed outside React, so announce it the way typing would.
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+    input.dispatchEvent(new Event('change', { bubbles: true }))
+  }
+
+  const stopRepeat = () => {
+    if (repeat.current) clearTimeout(repeat.current)
+    repeat.current = null
+  }
+
+  // Holding a button keeps stepping, slowly at first.
+  const startRepeat = (direction: 1 | -1) => (event: React.PointerEvent) => {
+    if (event.button !== 0) return
+    event.preventDefault()
+    inputRef.current?.focus()
+    step(direction)
+    const tick = (delay: number) => {
+      repeat.current = setTimeout(() => {
+        step(direction)
+        tick(60)
+      }, delay)
+    }
+    tick(400)
+  }
+
+  React.useEffect(() => stopRepeat, [])
+
+  const button = (direction: 1 | -1) => (
+    <button
+      type="button"
+      tabIndex={-1}
+      aria-hidden
+      disabled={!interactive}
+      onPointerDown={startRepeat(direction)}
+      onPointerUp={stopRepeat}
+      onPointerLeave={stopRepeat}
+      onPointerCancel={stopRepeat}
+      className={cn(
+        'flex flex-1 cursor-pointer items-center justify-center bg-stepper text-muted-foreground transition-colors hover:bg-stepper-hover hover:text-foreground active:bg-stepper-active active:text-foreground disabled:cursor-not-allowed [&_svg]:size-3',
+        direction === 1 ? STEP_RADIUS_UP : STEP_RADIUS_DOWN,
+      )}
+    >
+      {direction === 1 ? (
+        <ChevronUpIcon strokeWidth={2.5} />
+      ) : (
+        <ChevronDownIcon strokeWidth={2.5} />
+      )}
+    </button>
+  )
+
+  return (
+    <span
+      data-slot="number-field"
+      className={cn(
+        'relative flex w-full min-w-0 items-stretch text-foreground',
+        !bare &&
+          cn(
+            FIELD_BOX,
+            'min-h-8 not-has-[input:disabled]:not-has-[input:read-only]:not-focus-within:hover:bg-field-hover focus-within:border-blue-500 focus-within:shadow-field-focus has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-muted has-[input:disabled]:text-muted-foreground has-aria-invalid:border-destructive',
+          ),
+        className,
+      )}
+    >
+      <input
+        ref={setRef}
+        type="number"
+        data-slot="input"
+        disabled={disabled}
+        readOnly={readOnly}
+        {...props}
+        className="block w-full min-w-0 flex-1 cursor-default focus:cursor-text appearance-none bg-transparent py-1.5 pl-2.5 pr-1 text-base font-normal leading-normal text-inherit [font-variant-numeric:inherit] [text-align:inherit] outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      />
+      {interactive && (
+        <span className="flex w-6 shrink-0 flex-col gap-px py-[3px] pr-[3px]">
+          {button(1)}
+          {button(-1)}
+        </span>
+      )}
+    </span>
+  )
+}
+
+export { Input, NumberInput }

package/src/ui/item.tsx

@@ -32,12 +32,13 @@ function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Sepa
 }
 
 const itemVariants = cva(
-  'group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted',
+  'group/item flex w-full flex-wrap items-center rounded-lg border text-base transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted',
   {
     variants: {
       variant: {
         default: 'border-transparent',
-        outline: 'border-border',
+        // A card in small: its corner, faint border, fill and soft lift.
+        outline: 'rounded-card border-card-edge bg-card shadow-card-lift',
         muted: 'border-transparent bg-muted/50',
       },
       size: {
@@ -46,6 +47,8 @@ const itemVariants = cva(
         xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
       },
     },
+    // An outline item takes a card's 14px inset, so the two line up.
+    compoundVariants: [{ variant: 'outline', size: 'default', className: 'px-3.5 py-3' }],
     defaultVariants: {
       variant: 'default',
       size: 'default',
@@ -127,7 +130,7 @@ function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="item-title"
       className={cn(
-        'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
+        'line-clamp-1 flex w-fit items-center gap-2 text-base font-medium underline-offset-4',
         className,
       )}
       {...props}
@@ -140,7 +143,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
     <p
       data-slot="item-description"
       className={cn(
-        'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+        'line-clamp-2 text-left text-base font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
         className,
       )}
       {...props}

package/src/ui/label.tsx

@@ -15,7 +15,7 @@ function Label({ className, children, ...props }: React.ComponentProps<'label'>)
       <Field.Label
         data-slot="label"
         className={cn(
-          'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+          'flex items-center gap-2 text-base font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
           className,
         )}
         {...props}

package/src/ui/media-preview.tsx

@@ -21,6 +21,12 @@ export interface MediaPreviewProps {
   /** Click handler for setting the focal point; images only. */
   onFocalPointClick?: (event: React.MouseEvent<HTMLElement>) => void
   className?: string
+  /**
+   * `width` fills its container's width (a panel); `stage` shrinks the frame
+   * to the picture and fits it within the viewport, for a full-screen editor —
+   * so a focal point click always lands on the image, never on letterboxing.
+   */
+  fit?: 'width' | 'stage'
 }
 
 /**
@@ -41,14 +47,23 @@ export function MediaPreview({
   focalPoint,
   onFocalPointClick,
   className = 'max-h-[60vh]',
+  fit = 'width',
 }: MediaPreviewProps) {
   const { t } = useTranslation()
 
   const isImage = mediaType === 'image'
+  const stage = fit === 'stage'
+  // The stage's own padding and the editor's top bar, so the picture fits.
+  const stageHeight = 'max-h-[calc(100dvh-9rem)]'
 
   if (mediaType === 'external_video' && embedUrl) {
     return (
-      <div className="aspect-video w-full shrink-0 overflow-hidden rounded-lg border border-border bg-black">
+      <div
+        className={cn(
+          'aspect-video w-full shrink-0 overflow-hidden rounded-lg border border-border bg-black',
+          stage && 'max-w-5xl',
+        )}
+      >
         <iframe
           src={embedUrl}
           title={alt || t('admin.components.media_preview.video_title')}
@@ -68,7 +83,10 @@ export function MediaPreview({
         controls
         playsInline
         preload="metadata"
-        className={cn('w-full shrink-0 rounded-lg bg-black', className)}
+        className={cn(
+          'shrink-0 rounded-lg bg-black',
+          stage ? cn('max-w-full', stageHeight) : cn('w-full', className),
+        )}
       />
     )
   }
@@ -80,11 +98,23 @@ export function MediaPreview({
       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"
+      className={cn(
+        'group relative shrink-0 overflow-hidden rounded-lg border border-border bg-muted disabled:cursor-default',
+        stage ? 'inline-block max-w-full border-0 bg-transparent' : 'block w-full',
+        canSetFocalPoint && 'cursor-crosshair',
+      )}
     >
       {previewUrl ? (
         <>
-          <img src={previewUrl} alt={alt} className={cn('w-full object-contain', className)} />
+          <img
+            src={previewUrl}
+            alt={alt}
+            className={
+              stage
+                ? cn('block h-auto w-auto max-w-full object-contain', stageHeight)
+                : cn('w-full object-contain', className)
+            }
+          />
           {isImage && focalPoint && (
             <span
               aria-hidden
@@ -96,7 +126,12 @@ export function MediaPreview({
       ) : (
         // 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">
+        <div
+          className={cn(
+            'flex aspect-square items-center justify-center text-muted-foreground',
+            stage ? 'w-64' : 'w-full',
+          )}
+        >
           {isImage ? <ImagePlusIcon className="size-8" /> : <FilmIcon className="size-8" />}
         </div>
       )}

package/src/ui/pagination.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next'
+import { cn } from '../lib/utils'
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -24,6 +25,11 @@ interface PaginationProps {
   onPageChange: (page: number) => void
   onPageSizeChange?: (size: number) => void
   pageSizeOptions?: number[]
+  /**
+   * For the foot of a card whose table runs edge to edge: a divider above and
+   * padding on every side, so the range and buttons don't touch the card edge.
+   */
+  inset?: boolean
 }
 
 export function Pagination({
@@ -31,6 +37,7 @@ export function Pagination({
   onPageChange,
   onPageSizeChange,
   pageSizeOptions = [10, 20, 25, 30, 50],
+  inset = false,
 }: PaginationProps) {
   const { t } = useTranslation()
   const showPageSize = Boolean(onPageSizeChange) && meta.count > 0
@@ -39,8 +46,13 @@ export function Pagination({
   if (!showPageSize && !showPageNav) return null
 
   return (
-    <div className="flex items-center justify-between ps-2 py-2">
-      <div className="whitespace-nowrap text-sm text-muted-foreground">
+    <div
+      className={cn(
+        'flex items-center justify-between',
+        inset ? 'border-border-subtle border-t px-4 py-2.5' : 'ps-2 py-2',
+      )}
+    >
+      <div className="whitespace-nowrap text-base text-muted-foreground">
         {t('admin.components.pagination.range', {
           from: meta.from,
           to: meta.to,
@@ -50,7 +62,7 @@ export function Pagination({
       <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">
+            <span className="text-base text-muted-foreground">
               {t('admin.components.pagination.rows_per_page')}
             </span>
             <Select
@@ -72,7 +84,7 @@ export function Pagination({
         )}
         {showPageNav && (
           <>
-            <span className="hidden whitespace-nowrap text-sm text-muted-foreground sm:inline">
+            <span className="hidden whitespace-nowrap text-base text-muted-foreground sm:inline">
               {t('admin.common.page_of', { page: meta.page, total: meta.pages })}
             </span>
             <div className="flex items-center gap-1">

package/src/ui/progress.tsx

@@ -57,7 +57,7 @@ function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
   return (
     <ProgressPrimitive.Label
       data-slot="progress-label"
-      className={cn('font-medium text-sm', className)}
+      className={cn('font-medium text-base', className)}
       {...props}
     />
   )
@@ -67,7 +67,7 @@ function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
   return (
     <ProgressPrimitive.Value
       data-slot="progress-value"
-      className={cn('ml-auto text-muted-foreground text-sm', className)}
+      className={cn('ml-auto text-muted-foreground text-base', className)}
       {...props}
     />
   )

package/src/ui/radio-group.tsx

@@ -18,8 +18,8 @@ function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof Rad
     <RadioPrimitive.Root
       data-slot="radio-group-item"
       className={cn(
-        'peer relative inline-block size-4 shrink-0 cursor-pointer rounded-full border border-border bg-card align-[-3px] outline-none transition-[color,background-color,border-color,box-shadow] duration-100 ease-out',
-        'focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]',
+        'peer relative inline-block size-4 shrink-0 cursor-pointer rounded-full border border-field-border shadow-control bg-card align-[-3px] outline-none transition-[color,background-color,border-color,box-shadow] duration-100 ease-out',
+        'focus:border-blue-500 focus:shadow-field-focus',
         'disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground',
         'aria-invalid:border-destructive aria-invalid:ring-destructive/20',
         'data-[checked]:border-blue-500 data-[checked]:bg-blue-500 data-[checked]:text-white',

package/src/ui/rich-text-editor.tsx

@@ -191,7 +191,7 @@ export function RichTextEditor({
         // in a form beside them without reading as a different kind of control.
         // `focus-within` rather than `focus`: the element that takes the caret
         // is Tiptap's inner contenteditable, not this wrapper.
-        'rounded-md border border-border shadow-control bg-card text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out focus-within:border-blue-500 focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]',
+        'rounded-xl border border-field-border shadow-control bg-card text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out focus-within:border-blue-500 focus-within:shadow-field-focus',
         disabled && 'pointer-events-none bg-muted text-muted-foreground shadow-none',
         className,
       )}
@@ -252,7 +252,7 @@ function EditorToolbar({
   return (
     <div
       data-slot="rich-text-editor-toolbar"
-      className="flex items-center gap-0.5 border-b border-border-subtle px-2 py-1.5"
+      className="flex items-center gap-0.5 rounded-t-[inherit] bg-secondary px-2 py-1.5"
     >
       <ToolbarButton
         active={toolbar.isBold}
@@ -375,7 +375,7 @@ function ToolbarButton({
       aria-label={title}
       aria-pressed={active}
       className={cn(
-        'inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors disabled:opacity-40 disabled:pointer-events-none',
+        'inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:bg-accent-strong-hover hover:text-foreground transition-colors disabled:opacity-40 disabled:pointer-events-none',
         active && 'bg-accent-strong text-foreground',
       )}
     >

package/src/ui/select.tsx

@@ -1,7 +1,8 @@
 import { Select as SelectPrimitive } from '@base-ui/react/select'
 import type * as React from 'react'
+import { fieldTriggerClassName } from '../lib/field-trigger'
 import { cn } from '../lib/utils'
-import { CheckIcon, ChevronDownIcon } from '../spree/icons'
+import { CheckIcon, ChevronDownIcon, ChevronsUpDownIcon } from '../spree/icons'
 
 function Select({
   children,
@@ -54,26 +55,16 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        // `min-h-8` matches `<Input>`'s own minimum, so a select and a text
-        // field on the same row are the same height. It also stops the trigger
-        // collapsing to chevron-height when the SelectValue render-prop returns
-        // an empty string (value unset and the placeholder not surfaced through
-        // the render-prop); `data-[size=sm]` keeps its own floor for the same
-        // reason.
-        //
-        // `sm` is the toolbar size, matching `Button size="sm" variant="outline"`
-        // exactly — height, gap, padding, text, icon size and the resting lift.
-        // A row mixing a select with a popover trigger (the dashboard's channel
-        // picker beside its date range) then reads as one set of controls
-        // rather than two. The default size is a form field and stays flat.
-        "group/select-trigger flex w-full min-h-8 cursor-pointer items-center justify-between gap-1.5 rounded-md border border-border shadow-control bg-card py-1.5 pr-2 pl-2.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none select-none 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 data-[placeholder]:text-muted-foreground data-[size=sm]:shadow-control data-[size=sm]:h-8 data-[size=sm]:min-h-8 data-[size=sm]:gap-2 data-[size=sm]:px-2 data-[size=sm]:py-1 data-[size=sm]:text-sm data-[size=sm]:[&_svg:not([class*='size-'])]:size-3.5 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        'group/select-trigger',
+        fieldTriggerClassName,
+        "data-[placeholder]:text-muted-foreground data-[size=sm]:[&_svg:not([class*='size-'])]:size-3.5 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5",
         className,
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon>
-        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground group-data-[size=sm]/select-trigger:size-3.5" />
+        <ChevronsUpDownIcon className="pointer-events-none size-4 text-muted-foreground group-data-[size=sm]/select-trigger:size-3.5" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   )
@@ -105,7 +96,7 @@ function SelectContent({
           data-slot="select-content"
           data-align-trigger={position === 'item-aligned'}
           className={cn(
-            'relative z-[100] max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 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]',
+            'relative z-[100] max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-x-hidden overflow-y-auto rounded-xl bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 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]',
             position === 'popper' &&
               'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
             className,

package/src/ui/sheet.tsx

@@ -129,13 +129,21 @@ function SheetContent({
           // `translate`; the rest are listed because `className` is merged, so
           // a caller can animate any of them — and a missing entry fails
           // silently, as a jump rather than an error.
-          'fixed z-50 flex flex-col border border-border bg-card text-foreground text-sm shadow-lg transition-[opacity,transform,translate,scale] duration-250 ease-out',
-          'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-[calc(100dvh-1rem)] data-[side=right]:max-h-[calc(100dvh-1rem)] data-[side=right]:w-[calc(100vw-1rem)] data-[side=right]:max-w-[600px] data-[side=right]:min-w-[320px] data-[side=right]:m-2 data-[side=right]:rounded-xl',
+          'fixed z-50 flex flex-col border border-border bg-card text-foreground text-base shadow-lg transition-[opacity,transform,translate,scale] duration-250 ease-out',
+          'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-[calc(100dvh-1rem)] data-[side=right]:max-h-[calc(100dvh-1rem)] data-[side=right]:w-[calc(100vw-1rem)] data-[side=right]:max-w-[600px] data-[side=right]:min-w-[320px] data-[side=right]:m-2 data-[side=right]:rounded-2xl',
           'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:sm:max-w-sm',
           'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t',
           'data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b',
           'data-[starting-style]:opacity-0 data-[side=right]:data-[starting-style]:translate-x-10 data-[side=left]:data-[starting-style]:-translate-x-10 data-[side=bottom]:data-[starting-style]:translate-y-10 data-[side=top]:data-[starting-style]:-translate-y-10',
           'data-[ending-style]:opacity-0 data-[side=right]:data-[ending-style]:translate-x-10 data-[side=left]:data-[ending-style]:-translate-x-10 data-[side=bottom]:data-[ending-style]:translate-y-10 data-[side=top]:data-[ending-style]:-translate-y-10',
+          // A sheet opened from inside this one stacks on top, as toasts do:
+          // this one shrinks from its outer edge and slides out far enough to
+          // peek from behind, a step per open sheet above it, and dims.
+          'after:pointer-events-none after:absolute after:inset-0 after:z-20 after:rounded-[inherit] after:bg-black/0 after:transition-colors after:duration-250',
+          'data-[nested-dialog-open]:after:bg-black/5 dark:data-[nested-dialog-open]:after:bg-black/30',
+          'data-[side=right]:origin-left data-[side=left]:origin-right',
+          'data-[nested-dialog-open]:scale-[calc(1-0.05*var(--nested-dialogs))]',
+          'data-[side=right]:data-[nested-dialog-open]:translate-x-[calc(-20px*var(--nested-dialogs))] data-[side=left]:data-[nested-dialog-open]:translate-x-[calc(20px*var(--nested-dialogs))]',
           className,
         )}
         {...props}
@@ -207,7 +215,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="sheet-footer"
       className={cn(
-        'flex flex-col-reverse gap-2 border-t border-border-subtle bg-muted/50 p-4 sm:flex-row sm:justify-end rounded-b-xl',
+        'flex flex-col-reverse gap-2 border-t border-border-subtle bg-muted/50 p-4 sm:flex-row sm:justify-end rounded-b-2xl',
         className,
       )}
       {...props}
@@ -219,7 +227,7 @@ function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPr
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn('text-lg font-medium', className)}
+      className={cn('text-lg font-semibold', className)}
       {...props}
     />
   )
@@ -232,7 +240,7 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-base text-muted-foreground', className)}
       {...props}
     />
   )