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

package/src/ui/checkbox.tsx

@@ -1,7 +1,7 @@
 import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
-import { CheckIcon, MinusIcon } from 'lucide-react'
 import type * as React from 'react'
 import { cn } from '../lib/utils'
+import { CheckIcon, MinusIcon } from '../spree/icons'
 
 function Checkbox({
   className,
@@ -25,13 +25,21 @@ function Checkbox({
       disabled={disabled}
       name={name}
       className={cn(
-        'peer relative inline-block size-4 shrink-0 rounded-[4px] border border-input align-[-3px] shadow-xs outline-none transition-shadow',
-        'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
-        'disabled:cursor-not-allowed disabled:opacity-50',
+        'peer relative inline-block size-4 shrink-0 cursor-pointer rounded-[4px] border border-border bg-card align-[-3px] outline-none transition-[color,background-color,border-color,box-shadow] duration-100 ease-out',
+        // The 16px box is the right *visual* size in a dense table, but on its
+        // own it is a 16px target — under the 24px WCAG 2.2 asks for, on the
+        // control every bulk action starts from. A pseudo-element extends the
+        // pressable area to 34px without taking layout space, so column widths
+        // and row height are unchanged. `z-1` keeps it above the row-click
+        // bridge, which would otherwise swallow presses in the padded margin
+        // and navigate instead of selecting.
+        "before:absolute before:inset-[-9px] before:z-1 before:content-['']",
+        '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 aria-invalid:ring-destructive/20',
         'data-[checked]:border-blue-500 data-[checked]:bg-blue-500 data-[checked]:text-white',
         'data-[indeterminate]:border-blue-500 data-[indeterminate]:bg-blue-500 data-[indeterminate]:text-white',
-        'dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[checked]:bg-blue-500',
+        'dark:aria-invalid:ring-destructive/40 dark:data-[checked]:bg-blue-500',
         className,
       )}
       {...props}

package/src/ui/combobox.tsx

@@ -1,9 +1,10 @@
 'use client'
 
 import { Combobox as ComboboxPrimitive } from '@base-ui/react'
-import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react'
+import i18n from 'i18next'
 import * as React from 'react'
 import { cn } from '../lib/utils'
+import { CheckIcon, ChevronDownIcon, XIcon } from '../spree/icons'
 import { Button } from './button'
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './input-group'
 
@@ -26,6 +27,91 @@ function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Tr
   )
 }
 
+/**
+ * Button-shaped trigger for a searchable picker: the field renders the current
+ * selection (flag, formatted label) and the search box lives inside the popup,
+ * next to the results it filters.
+ *
+ * Preferred over the editable-input trigger (`<ComboboxInput>`) whenever the
+ * selection has a richer display than the raw query text. A text input has to
+ * show the typed query, so it erases the selected label the moment the user
+ * types, and the browser's address autofill treats a text field named after a
+ * country as part of an address form and covers the list with saved addresses.
+ * A button has nothing to autofill into, and the search box inside the popup
+ * sits outside the form's field flow where those heuristics don't reach.
+ *
+ * Deliberately matches `<SelectTrigger>` so a picker sitting beside a plain
+ * select is indistinguishable from it until opened.
+ */
+function ComboboxButtonTrigger({
+  className,
+  children,
+  size = 'default',
+  ...props
+}: ComboboxPrimitive.Trigger.Props & {
+  /** `sm` is the toolbar size — see `SelectTrigger`, which it matches exactly. */
+  size?: 'sm' | 'default'
+}) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-button-trigger"
+      data-size={size}
+      className={cn(
+        "group/combobox-trigger flex w-full min-h-8 cursor-pointer items-center justify-between gap-1.5 rounded-md border border-border 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-[size=sm]:shadow-xs 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="flex min-w-0 items-center gap-2 truncate">{children}</span>
+      <ChevronDownIcon className="pointer-events-none size-4 shrink-0 text-muted-foreground group-data-[size=sm]/combobox-trigger:size-3.5" />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+/**
+ * Placeholder text for a `<ComboboxButtonTrigger>` with nothing selected.
+ * A span rather than the trigger's own `data-placeholder`, because the
+ * trigger renders arbitrary children (a flag beside a name) rather than a
+ * single value string.
+ */
+function ComboboxTriggerPlaceholder({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="combobox-trigger-placeholder"
+      className={cn('truncate text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Search box for a button-triggered picker, rendered at the top of the popup.
+ * Autofill and spell-check are turned off across the board: this filters an
+ * on-screen list, so a password manager or a saved-address panel covering it
+ * is pure interference.
+ */
+function ComboboxSearch({ className, ...props }: ComboboxPrimitive.Input.Props) {
+  return (
+    <div className="border-b border-border p-1">
+      <ComboboxInput
+        data-slot="combobox-search"
+        className={cn(
+          'min-h-8 border-0 shadow-none has-[[data-slot=input-group-control]:focus-visible]:border-transparent has-[[data-slot=input-group-control]:focus-visible]:shadow-none',
+          className,
+        )}
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck={false}
+        data-1p-ignore
+        data-lpignore="true"
+        showTrigger={false}
+        {...props}
+      />
+    </div>
+  )
+}
+
 function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
   return (
     <ComboboxPrimitive.Clear
@@ -100,6 +186,12 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
+            // Deliberately keeps `animate-in`/`animate-out` keyframes where the
+            // other floating surfaces use transitions. Converting this one to
+            // `data-[starting-style]` transitions broke the multi-select chips
+            // picker: the list re-renders as the user filters, and options
+            // arriving mid-transition sit at `opacity-0` long enough to be
+            // unclickable. The keyframes make the panel opaque immediately.
             'group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
             className,
           )}
@@ -131,7 +223,7 @@ function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.
         // Padding + font sized to match `<Input>` (`py-1.5 px-2.5 text-base
         // leading-normal`) so the dropdown rows feel like a continuation of
         // the trigger field. `pr-8` keeps room for the check indicator.
-        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2.5 text-base font-normal leading-normal outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-pointer items-center gap-2 rounded-md py-1.5 pr-8 pl-2.5 text-base font-normal leading-normal outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -197,7 +289,13 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        'flex flex-wrap items-center gap-1 rounded-lg border border-border bg-card text-foreground shadow-xs px-2.5 py-1.5 text-base transition-all duration-100 ease-in-out focus-within:border-blue-500 focus-within:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] has-aria-invalid:border-destructive has-data-[slot=combobox-chip]:px-1',
+        // Keeps `transition-all` where the sibling inputs narrowed theirs: this
+        // element is the popup's anchor, and adding a chip reflows it
+        // (`flex-wrap`, `has-data-[slot=combobox-chip]:px-1`). Animating that
+        // resize lets the positioner follow the anchor smoothly; making it
+        // instant jumps the open popup out from under the pointer, so the next
+        // option click lands on nothing.
+        'flex flex-wrap items-center gap-1.5 rounded-md border border-border bg-card text-foreground px-2.5 py-1.5 text-base transition-all duration-100 ease-out focus-within:border-blue-500 focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] has-aria-invalid:border-destructive has-data-[slot=combobox-chip]:p-1.5',
         className,
       )}
       {...props}
@@ -217,7 +315,15 @@ function ComboboxChip({
     <ComboboxPrimitive.Chip
       data-slot="combobox-chip"
       className={cn(
-        'flex h-[calc(--spacing(5.25))] w-fit max-w-full items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
+        // Height comes from the content rather than a fixed 21px: the old value
+        // was shorter than the remove button inside it, and left the label with
+        // no vertical breathing room at any screen size.
+        //
+        // Fill matches the highlighted row in the list below (`bg-accent`): a
+        // chip and a selected option are the same thing at two moments, so they
+        // read as the same thing. `bg-muted` sat within 1.03:1 of the field it
+        // sits on, which left the chips barely visible.
+        'flex min-h-7 w-fit max-w-full items-center justify-center gap-1 rounded-sm bg-accent py-1 pl-2.5 pr-2 text-sm font-base text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-1',
         className,
       )}
       {...props}
@@ -225,9 +331,19 @@ function ComboboxChip({
       <span className="min-w-0 truncate">{children}</span>
       {showRemove && (
         <ComboboxPrimitive.ChipRemove
-          render={<Button variant="ghost" size="icon-xs" />}
-          className="opacity-50 hover:opacity-100"
+          render={<Button variant="ghost" size="icon-sm" />}
+          className="size-6 shrink-0 opacity-50 hover:opacity-100"
           data-slot="combobox-chip-remove"
+          // Names the chip it clears ("Remove Wholesale") rather than a bare
+          // "Remove": several sit side by side, and a dialog's own submit
+          // button is often called Remove too. An `aria-label` rather than an
+          // `sr-only` span, so the chip's text isn't duplicated as a second
+          // text node beside the one already visible.
+          aria-label={
+            typeof children === 'string'
+              ? i18n.t('admin.actions.remove_item', { label: children })
+              : i18n.t('admin.actions.remove')
+          }
         >
           <XIcon className="pointer-events-none" />
         </ComboboxPrimitive.ChipRemove>
@@ -252,6 +368,7 @@ function useComboboxAnchor() {
 
 export {
   Combobox,
+  ComboboxButtonTrigger,
   ComboboxChip,
   ComboboxChips,
   ComboboxChipsInput,
@@ -263,8 +380,10 @@ export {
   ComboboxItem,
   ComboboxLabel,
   ComboboxList,
+  ComboboxSearch,
   ComboboxSeparator,
   ComboboxTrigger,
+  ComboboxTriggerPlaceholder,
   ComboboxValue,
   useComboboxAnchor,
 }

package/src/ui/command.tsx

@@ -1,17 +1,23 @@
 import { Command as CommandPrimitive } from 'cmdk'
 import i18n from 'i18next'
-import { CheckIcon, SearchIcon } from 'lucide-react'
 import * as React from 'react'
 import { cn } from '../lib/utils'
+import {
+  CheckIcon,
+  CornerDownLeftIcon,
+  Loader2Icon,
+  MoveDownIcon,
+  MoveUpIcon,
+  SearchIcon,
+} from '../spree/icons'
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog'
-import { InputGroup, InputGroupAddon } from './input-group'
 
 function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
   return (
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        'flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground',
+        'flex size-full flex-col overflow-hidden rounded-2xl! bg-popover text-popover-foreground',
         className,
       )}
       {...props}
@@ -39,7 +45,14 @@ function CommandDialog({
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
       <DialogContent
-        className={cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className)}
+        // `-translate-x-1/2` must be restated alongside `translate-y-0`: in
+        // Tailwind v4 both compile to the standalone `translate` property, so
+        // setting only the Y axis wipes the base dialog's horizontal centring
+        // and the panel drifts off both edges of a narrow screen.
+        className={cn(
+          'top-1/3 -translate-x-1/2 translate-y-0 overflow-hidden rounded-xl! p-0',
+          className,
+        )}
         showCloseButton={showCloseButton}
       >
         {children}
@@ -48,35 +61,66 @@ function CommandDialog({
   )
 }
 
+/**
+ * The palette's search field — the top edge of the panel, spanning its full
+ * width above a single hairline.
+ *
+ * While `loading` is set, a spinner sits at the end of the field rather than in
+ * the results list, so rows don't shift down when a search starts and back up
+ * when it lands. The state is announced to screen readers as well as drawn.
+ */
 function CommandInput({
   className,
+  loading = false,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+}: React.ComponentProps<typeof CommandPrimitive.Input> & {
+  /** Shows a spinner at the end of the field while results are in flight. */
+  loading?: boolean
+}) {
   return (
-    <div data-slot="command-input-wrapper" className="p-1 pb-0">
-      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
-        <CommandPrimitive.Input
-          data-slot="command-input"
-          className={cn(
-            'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-            className,
-          )}
-          {...props}
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-14 shrink-0 items-center gap-3 border-b border-border px-5"
+    >
+      <SearchIcon className="size-5 shrink-0 text-muted-foreground" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        aria-busy={loading || undefined}
+        className={cn(
+          'h-full w-full bg-transparent text-base outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+      {loading && (
+        <Loader2Icon
+          data-slot="command-input-loading"
+          aria-hidden="true"
+          className="size-4 shrink-0 animate-spin text-muted-foreground"
         />
-        <InputGroupAddon>
-          <SearchIcon className="size-4 shrink-0 opacity-50" />
-        </InputGroupAddon>
-      </InputGroup>
+      )}
+      {/* The spinner is decorative, so the progress a sighted user reads from it
+          is announced here instead. Polite: it must not cut off the row count
+          the listbox announces when results land. */}
+      <span role="status" aria-live="polite" className="sr-only">
+        {loading ? i18n.t('admin.common.searching') : ''}
+      </span>
     </div>
   )
 }
 
+/**
+ * The results area. Its height is fixed rather than content-driven, so the
+ * panel stays put as results arrive instead of resizing under the cursor on
+ * every keystroke. Pass `className="h-…"` to change it, or `h-auto max-h-…`
+ * for the shrink-to-fit behaviour a short static menu wants.
+ */
 function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
   return (
     <CommandPrimitive.List
       data-slot="command-list"
       className={cn(
-        'no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none',
+        'h-80 min-h-0 scroll-py-2 overflow-x-hidden overflow-y-auto p-2 outline-none',
         className,
       )}
       {...props}
@@ -91,7 +135,7 @@ function CommandEmpty({
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
-      className={cn('py-6 text-center text-sm', className)}
+      className={cn('py-10 text-center text-sm text-muted-foreground', className)}
       {...props}
     />
   )
@@ -105,7 +149,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        'overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',
+        'overflow-hidden text-foreground not-last:pb-2 **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:pt-2 **:[[cmdk-group-heading]]:pb-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',
         className,
       )}
       {...props}
@@ -120,7 +164,7 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn('-mx-1 h-px bg-border', className)}
+      className={cn('-mx-2 my-1 h-px bg-border-subtle', className)}
       {...props}
     />
   )
@@ -135,7 +179,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        "group/command-item relative flex cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-accent-strong data-selected:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-selected:*:[svg]:text-foreground",
         className,
       )}
       {...props}
@@ -159,13 +203,95 @@ function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>)
   )
 }
 
+/** A single key cap — used for the palette's footer hints and inline shortcuts. */
+function CommandKey({ className, ...props }: React.ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      data-slot="command-key"
+      className={cn(
+        'inline-flex h-5 min-w-6 items-center justify-center rounded-sm bg-card border border-border px-1 font-sans text-xs text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+/** One key cap (or a pair) followed by the action it performs. */
+function CommandHint({
+  keys,
+  label,
+  className,
+  ...props
+}: Omit<React.ComponentProps<'div'>, 'children'> & {
+  keys: React.ReactNode[]
+  label: React.ReactNode
+}) {
+  return (
+    <div data-slot="command-hint" className={cn('flex items-center gap-1.5', className)} {...props}>
+      <span className="flex items-center gap-1">
+        {keys.map((key, index) => (
+          // Hints are static, ordered, and never reordered — index is a stable key.
+          // biome-ignore lint/suspicious/noArrayIndexKey: static list
+          <CommandKey key={index}>{key}</CommandKey>
+        ))}
+      </span>
+      <span className="text-xs text-muted-foreground">{label}</span>
+    </div>
+  )
+}
+
+/**
+ * Bottom bar of the palette. Renders the default navigate/select/close hints
+ * when given no children, so callers only pass children to replace them.
+ */
+function CommandFooter({ className, children, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="command-footer"
+      className={cn(
+        // Hidden on touch: the footer documents arrow/enter/esc shortcuts,
+        // which a phone has no keys for, and it costs 45px of a short viewport.
+        'hidden shrink-0 items-center justify-between gap-4 border-t border-border-subtle bg-muted px-4 py-2.5 text-muted-foreground md:flex capitalize',
+        className,
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <div className="flex items-center gap-4">
+            <CommandHint
+              keys={[
+                <MoveUpIcon key="up" className="size-3.5" />,
+                <MoveDownIcon key="down" className="size-3.5" />,
+              ]}
+              label={i18n.t('admin.components.command_palette.hints.navigate')}
+            />
+            <CommandHint
+              keys={[<CornerDownLeftIcon key="enter" className="size-3.5" />]}
+              label={i18n.t('admin.components.command_palette.hints.select')}
+            />
+          </div>
+          <CommandHint
+            keys={[i18n.t('admin.components.command_palette.hints.esc_key')]}
+            label={i18n.t('admin.components.command_palette.hints.close')}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+
 export {
   Command,
   CommandDialog,
   CommandEmpty,
+  CommandFooter,
   CommandGroup,
+  CommandHint,
   CommandInput,
   CommandItem,
+  CommandKey,
   CommandList,
   CommandSeparator,
   CommandShortcut,

package/src/ui/context-menu.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu'
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+
+/**
+ * Right-click menu. Styled to match {@link DropdownMenu} exactly — the same
+ * menu opened a different way should not look like a different menu.
+ *
+ * Always a shortcut to actions reachable another way: a right-click is
+ * undiscoverable on its own, and absent entirely on touch.
+ */
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+}
+
+function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+}
+
+function ContextMenuContent({
+  className,
+  children,
+  ...props
+}: {
+  className?: string
+  children?: React.ReactNode
+} & Omit<React.ComponentProps<typeof ContextMenuPrimitive.Popup>, 'className'>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner className="z-50">
+        <ContextMenuPrimitive.Popup
+          data-slot="context-menu-content"
+          className={cn(
+            // `origin-(--transform-origin)` so the menu grows out of the
+            // pointer 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}
+        >
+          {children}
+        </ContextMenuPrimitive.Popup>
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-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}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn('mx-1 my-1 h-px bg-border-subtle', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+}