@vitavision/ui 0.8.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitavision/ui",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "The vitavision instrument design system: Tailwind v4 tokens, theme, and React primitives.",
   "license": "MIT OR Apache-2.0",
   "repository": {
@@ -50,6 +50,8 @@
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.3.11",
     "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-select": "^2.3.7",
     "@radix-ui/react-slider": "^1.4.7",
     "@radix-ui/react-slot": "^1.3.3",

package/src/components/ui/DropdownMenu.tsx

@@ -0,0 +1,179 @@
+/*
+ * A menu of commands or toggles behind a trigger: a layers menu, an overflow menu.
+ *
+ * Use it for things a person *does* or *switches*. To pick one value from a set use `Select`,
+ * or a `Listbox` in a `Popover` when the options need more than a label.
+ */
+
+import * as RadixMenu from "@radix-ui/react-dropdown-menu";
+import { Check } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Kbd } from "./Kbd";
+import { cn } from "./cn";
+
+/** Props of `DropdownMenu`. */
+export interface DropdownMenuProps {
+  /** The element that opens it: one focusable element that accepts a ref (Radix `asChild`). */
+  trigger: ReactNode;
+  /** `MenuItem`, `MenuCheckboxItem`, `MenuLabel` and `MenuSeparator` elements. */
+  children: ReactNode;
+  /** Controlled open state. */
+  open?: boolean | undefined;
+  /** Called when it opens or closes. */
+  onOpenChange?: ((open: boolean) => void) | undefined;
+  /** Its alignment along the trigger. Defaults to `start`. */
+  align?: "start" | "center" | "end" | undefined;
+  /** The trigger's side it opens on. Defaults to `bottom`. */
+  side?: "top" | "right" | "bottom" | "left" | undefined;
+  /** Merged with the menu's own classes through `cn`. */
+  className?: string | undefined;
+}
+
+/**
+ * A menu (`role="menu"`) that opens from `trigger`, with arrow-key navigation, typeahead,
+ * Escape or a press outside to close, and focus returned to the trigger. It is non-modal: the
+ * page behind stays readable and operable. Toggling a `MenuCheckboxItem` keeps the menu open,
+ * so several layers can be switched in one visit.
+ */
+export function DropdownMenu({
+  trigger,
+  children,
+  open,
+  onOpenChange,
+  align = "start",
+  side = "bottom",
+  className,
+}: DropdownMenuProps) {
+  return (
+    <RadixMenu.Root
+      // Non-modal: a modal menu hides the rest of the page from assistive technology while
+      // its trigger stays focusable under it, and a layers menu is used next to the canvas
+      // it controls.
+      modal={false}
+      {...(open === undefined ? {} : { open })}
+      {...(onOpenChange === undefined ? {} : { onOpenChange })}
+    >
+      <RadixMenu.Trigger asChild>{trigger}</RadixMenu.Trigger>
+      <RadixMenu.Portal>
+        <RadixMenu.Content
+          side={side}
+          align={align}
+          sideOffset={6}
+          collisionPadding={8}
+          className={cn(
+            "z-50 min-w-44 rounded-panel border border-line bg-overlay p-1 text-sm text-fg shadow-lg shadow-black/25",
+            className,
+          )}
+        >
+          {children}
+        </RadixMenu.Content>
+      </RadixMenu.Portal>
+    </RadixMenu.Root>
+  );
+}
+
+const itemClasses = cn(
+  "relative flex h-7 cursor-default items-center gap-2 rounded-control pr-2 pl-7 text-sm outline-none select-none",
+  "data-[highlighted]:bg-raised data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+);
+
+/** Props of `MenuItem`. */
+export interface MenuItemProps {
+  /** The item's text. */
+  children: ReactNode;
+  /** Runs the command. */
+  onSelect?: (() => void) | undefined;
+  /** An icon before the text, in the indicator column. */
+  icon?: ReactNode;
+  /** `defect` for a destructive command. */
+  tone?: "defect" | undefined;
+  /** A shortcut shown at the end of the row, as a `Kbd`. Display only: binding it is the app's. */
+  shortcut?: string | undefined;
+  /** Blocks the item. */
+  disabled?: boolean | undefined;
+}
+
+/**
+ * A command. `onSelect` runs when it is clicked or chosen with Enter, and the menu then
+ * closes. `tone="defect"` marks a destructive command.
+ */
+export function MenuItem({ children, onSelect, shortcut, disabled, icon, tone }: MenuItemProps) {
+  return (
+    <RadixMenu.Item
+      {...(disabled === undefined ? {} : { disabled })}
+      onSelect={() => onSelect?.()}
+      className={cn(itemClasses, tone === "defect" && "text-defect")}
+    >
+      {icon && (
+        <span aria-hidden className="absolute left-2 flex size-3.5 items-center [&>svg]:size-3.5">
+          {icon}
+        </span>
+      )}
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+      {shortcut && <Kbd>{shortcut}</Kbd>}
+    </RadixMenu.Item>
+  );
+}
+
+/** Props of `MenuCheckboxItem`. */
+export interface MenuCheckboxItemProps {
+  /** The item's text. */
+  children: ReactNode;
+  /** Whether it is on. */
+  checked: boolean;
+  /** Called with the new state. */
+  onCheckedChange: (checked: boolean) => void;
+  /** A shortcut shown at the end of the row, as a `Kbd`. Display only: binding it is the app's. */
+  shortcut?: string | undefined;
+  /** Blocks the item. */
+  disabled?: boolean | undefined;
+}
+
+/**
+ * A toggle (`role="menuitemcheckbox"`): a layer on or off. A check marks it on. Choosing it
+ * leaves the menu open.
+ */
+export function MenuCheckboxItem({
+  children,
+  checked,
+  onCheckedChange,
+  shortcut,
+  disabled,
+}: MenuCheckboxItemProps) {
+  return (
+    <RadixMenu.CheckboxItem
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      {...(disabled === undefined ? {} : { disabled })}
+      // A toggle in a menu of toggles: keep the menu open for the next one.
+      onSelect={(event) => event.preventDefault()}
+      className={itemClasses}
+    >
+      <RadixMenu.ItemIndicator className="absolute left-2 flex items-center text-signal">
+        <Check className="size-3.5" aria-hidden />
+      </RadixMenu.ItemIndicator>
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+      {shortcut && <Kbd>{shortcut}</Kbd>}
+    </RadixMenu.CheckboxItem>
+  );
+}
+
+/** A heading over a group of items, in the eyebrow role. Not focusable. */
+export function MenuLabel({
+  children,
+}: {
+  /** The heading. */
+  children: ReactNode;
+}) {
+  return (
+    <RadixMenu.Label className="px-2 pt-1.5 pb-1 text-[11px] font-semibold tracking-wider text-fg-muted uppercase">
+      {children}
+    </RadixMenu.Label>
+  );
+}
+
+/** A divider between groups of items. */
+export function MenuSeparator() {
+  return <RadixMenu.Separator className="my-1 h-px bg-line" />;
+}

package/src/components/ui/Input.tsx

@@ -5,11 +5,12 @@
  * can still pick up the shared palette and focus treatment.
  */
 
-import { useId, type ComponentProps } from "react";
+import { useId, useState, type ComponentProps, type KeyboardEvent } from "react";
 
 import { byDensity, useDensity } from "./Density";
 import { useFieldDescription } from "./Field";
 import { cn, focusRingInset } from "./cn";
+import { formatNumber, parseNumber } from "./numberText";
 
 /**
  * The shared look of a text-like control — border, palette, placeholder, hover, disabled and
@@ -54,8 +55,40 @@ export function Input({ className, "aria-describedby": describedBy, ...rest }: C
   );
 }
 
-/** Props of `NumberInput`: every `<input>` prop, `ref` included, with numeric bounds and a `unit`. */
-export type NumberInputProps = Omit<ComponentProps<"input">, "min" | "max"> & {
+/**
+ * Props of `NumberInput`: every `<input>` prop, `ref` included, with numeric bounds, a `unit`,
+ * and an optional number-valued API (`onValueChange`, `precision`).
+ */
+export type NumberInputProps = Omit<ComponentProps<"input">, "min" | "max" | "value"> & {
+  /**
+   * The value. As text, it is the native input's `value`. With `onValueChange` it is a
+   * number, and `null` shows an empty field.
+   */
+  value?: string | number | readonly string[] | null | undefined;
+  /**
+   * Makes the field number-valued.
+   *
+   * - **While focused** it keeps the text as typed. A keystroke is reported only when the
+   *   text is a finite number inside `[min, max]` and differs from `value`. Empty, partial
+   *   (`-`, `1e`) and out-of-range text is never reported, so clearing a field to retype it
+   *   does not pass through 0, and typing `5` on the way to `50` does not report a value under
+   *   `min`.
+   * - **Enter** shows the value at `precision`. **Escape** restores the value the field had
+   *   on focus.
+   * - **On leaving**, the field shows `value` again.
+   */
+  onValueChange?: ((value: number) => void) | undefined;
+  /**
+   * Called when a number-valued field is committed empty (left, or Enter pressed, with no
+   * text), for a quantity that may be unset. Without it, emptying the field and leaving it
+   * restores `value`.
+   */
+  onClear?: (() => void) | undefined;
+  /**
+   * Decimals shown when a number-valued field is not being edited. Without it the number is
+   * shown as JavaScript prints it.
+   */
+  precision?: number | undefined;
   /** The smallest accepted value. */
   min?: number | undefined;
   /** The largest accepted value. */
@@ -80,12 +113,104 @@ export type NumberInputProps = Omit<ComponentProps<"input">, "min" | "max"> & {
  * With a `unit`, the input sits in a `relative` full-width wrapper carrying `data-unit`, keeps
  * room on its right for the unit, and is described by it; size such a field through its
  * container. Without one — or with `""` — the markup is exactly the plain input.
+ *
+ * With `onValueChange` the field is number-valued: `value` is a number (`null` shows empty), the
+ * typed text survives while the field has focus, and only finite numbers inside `[min, max]`
+ * are reported (see `onValueChange`; `onClear` reports an emptied field). Without it the field
+ * is the native text-valued input.
  */
-export function NumberInput({ unit, ...props }: NumberInputProps) {
+export function NumberInput({ onValueChange, onClear, precision, ...props }: NumberInputProps) {
+  if (onValueChange) {
+    return <ValueNumberInput {...props} onValueChange={onValueChange} onClear={onClear} precision={precision} />;
+  }
+  const { unit, ...rest } = props;
+  // A `null` text value is an empty field, not a switch to uncontrolled.
+  const text = (rest.value === null ? { ...rest, value: "" } : rest) as TextNumberInputProps;
   return unit === undefined || unit === "" ? (
-    <PlainNumberInput {...props} />
+    <PlainNumberInput {...text} />
   ) : (
-    <UnitNumberInput unit={unit} {...props} />
+    <UnitNumberInput unit={unit} {...text} />
+  );
+}
+
+type TextNumberInputProps = Omit<NumberInputProps, "unit" | "value" | "onValueChange" | "onClear" | "precision"> & {
+  value?: string | number | readonly string[] | undefined;
+};
+
+/** The number-valued field: formatted at rest, the typed text while focused. */
+function ValueNumberInput({
+  value,
+  onValueChange,
+  onClear,
+  precision,
+  step,
+  min,
+  max,
+  onFocus,
+  onBlur,
+  onChange,
+  onKeyDown,
+  ...rest
+}: Omit<NumberInputProps, "onValueChange"> & { onValueChange: (value: number) => void }) {
+  const numeric = typeof value === "number" ? value : null;
+  const show = (v: number | null) =>
+    v === null ? "" : precision === undefined ? String(v) : formatNumber(v, precision);
+  // Non-null while the field is being edited: the text as typed, and the value on focus.
+  const [draft, setDraft] = useState<{ text: string; initial: number | null } | null>(null);
+
+  /** The number `text` commits, or `null` while it is empty, partial or out of range. */
+  const parse = (text: string) => {
+    const parsed = parseNumber(text);
+    if (parsed === null) return null;
+    if ((min !== undefined && parsed < min) || (max !== undefined && parsed > max)) return null;
+    return parsed;
+  };
+
+  /** An emptied field, committed: cleared if the caller allows it and it was not already empty. */
+  const commitEmpty = (text: string) => {
+    if (text.trim() === "" && numeric !== null) onClear?.();
+  };
+
+  const keyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (draft && event.key === "Enter") {
+      commitEmpty(draft.text);
+      setDraft({ ...draft, text: draft.text.trim() === "" && onClear ? "" : show(numeric) });
+    } else if (draft && event.key === "Escape") {
+      event.preventDefault();
+      if (draft.initial !== numeric) {
+        if (draft.initial === null) onClear?.();
+        else onValueChange(draft.initial);
+      }
+      setDraft({ ...draft, text: show(draft.initial) });
+    }
+    onKeyDown?.(event);
+  };
+
+  return (
+    <NumberInput
+      {...rest}
+      value={draft?.text ?? show(numeric)}
+      step={step ?? "any"}
+      min={min}
+      max={max}
+      onFocus={(event) => {
+        setDraft({ text: show(numeric), initial: numeric });
+        onFocus?.(event);
+      }}
+      onBlur={(event) => {
+        if (draft) commitEmpty(draft.text);
+        setDraft(null);
+        onBlur?.(event);
+      }}
+      onKeyDown={keyDown}
+      onChange={(event) => {
+        const text = event.currentTarget.value;
+        setDraft((current) => ({ text, initial: current?.initial ?? numeric }));
+        const parsed = parse(text);
+        if (parsed !== null && parsed !== numeric) onValueChange(parsed);
+        onChange?.(event);
+      }}
+    />
   );
 }
 
@@ -93,7 +218,7 @@ function PlainNumberInput({
   className,
   "aria-describedby": describedBy,
   ...rest
-}: Omit<NumberInputProps, "unit">) {
+}: TextNumberInputProps) {
   return (
     <input
       {...useFieldDescription(describedBy)}
@@ -115,7 +240,7 @@ function UnitNumberInput({
   style,
   "aria-describedby": describedBy,
   ...rest
-}: Omit<NumberInputProps, "unit"> & { unit: string }) {
+}: TextNumberInputProps & { unit: string }) {
   const unitId = useId();
   return (
     <span data-unit={unit} className="relative flex w-full min-w-0 items-center">

package/src/components/ui/Kbd.tsx

@@ -0,0 +1,27 @@
+/*
+ * A key, as the keyboard shows it: the shortcut next to a command, the key a hint refers to.
+ */
+
+import type { ComponentProps } from "react";
+
+import { cn } from "./cn";
+
+/**
+ * A keyboard key or chord (`F`, `⌘K`, `[`), set in mono on a raised key cap.
+ *
+ * Renders `<kbd>`, which screen readers announce as text. Write the key as the user's keyboard
+ * labels it; for a chord, one `Kbd` with the whole chord reads better than several. Takes
+ * every `<kbd>` prop, `ref` included.
+ */
+export function Kbd({ className, ...rest }: ComponentProps<"kbd">) {
+  return (
+    <kbd
+      {...rest}
+      className={cn(
+        "inline-flex min-w-[1.5em] items-center justify-center rounded-control border border-line-strong",
+        "bg-raised px-1 font-mono text-[10px] leading-4 text-fg-muted",
+        className,
+      )}
+    />
+  );
+}

package/src/components/ui/Listbox.tsx

@@ -0,0 +1,160 @@
+/*
+ * Pick one of a list of options that need more than a label: a frame with its thumbnail and
+ * size, a model with its point counts.
+ *
+ * `Select` is the compact choice of a value by name. A `Listbox` shows its options in place —
+ * on its own in a panel, or inside a `Popover` behind a trigger — and each option can render
+ * whatever identifies it.
+ */
+
+import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
+
+import { cn, focusRing } from "./cn";
+import { moveActive, nearestEnabled, type ListboxKey } from "./listboxModel";
+
+/** One option of a `Listbox`. */
+export interface ListboxOption {
+  /** Its value, unique in the list. */
+  value: string;
+  /** Its name: the default rendering, and what a screen reader announces. */
+  label: string;
+  /** A second line under the label, in the default rendering. */
+  description?: string | undefined;
+  /** Shown but not choosable. */
+  disabled?: boolean | undefined;
+}
+
+/** What `renderOption` is told about an option. */
+export interface ListboxOptionState {
+  /** It is the value. */
+  selected: boolean;
+  /** It has the keyboard cursor or the pointer. */
+  active: boolean;
+}
+
+/** Props of `Listbox`. */
+export interface ListboxProps {
+  /** The options, in order. */
+  options: readonly ListboxOption[];
+  /** The selected value, or `null` for none. */
+  value: string | null;
+  /** Called with the value of the option chosen by click, Enter or Space. */
+  onValueChange?: ((value: string) => void) | undefined;
+  /**
+   * Renders an option's content (the row keeps its own padding, states and accessibility).
+   * Defaults to the label, with the description under it.
+   */
+  renderOption?: ((option: ListboxOption, state: ListboxOptionState) => ReactNode) | undefined;
+  /** Names the list. */
+  "aria-label": string;
+  /** Focus the list when it mounts, e.g. when it opens in a `Popover`. */
+  autoFocus?: boolean | undefined;
+  /** Merged with the list's own classes through `cn`. */
+  className?: string | undefined;
+}
+
+const KEYS = new Set<string>(["ArrowDown", "ArrowUp", "Home", "End", "PageDown", "PageUp"]);
+
+/**
+ * A single-select list (`role="listbox"`) of options that each render their own content.
+ *
+ * The list is one tab stop. The arrow keys, Home, End and Page keys move the active option
+ * (`aria-activedescendant`), skipping disabled ones, and Enter or Space choose it. A click
+ * chooses the option under the pointer. Controlled: the caller keeps `value`. Each option
+ * carries `aria-selected`, `data-selected` and `data-active`; the list scrolls the active
+ * option into view.
+ */
+export function Listbox({
+  options,
+  value,
+  onValueChange,
+  renderOption = defaultRender,
+  "aria-label": ariaLabel,
+  autoFocus,
+  className,
+}: ListboxProps) {
+  const id = useId();
+  const listRef = useRef<HTMLDivElement>(null);
+  const disabled = options.map((option) => option.disabled === true);
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  const [active, setActive] = useState(() => nearestEnabled(disabled, Math.max(0, selectedIndex)));
+  // Options can change under the list; keep the cursor on an enabled option that exists.
+  const current = active >= 0 && active < options.length && !disabled[active] ? active : nearestEnabled(disabled, active);
+
+  const optionId = (index: number) => `${id}-option-${index}`;
+
+  const activate = (index: number) => {
+    setActive(index);
+    listRef.current?.querySelector(`#${CSS.escape(optionId(index))}`)?.scrollIntoView({ block: "nearest" });
+  };
+
+  const choose = (index: number) => {
+    const option = options[index];
+    if (!option || option.disabled) return;
+    onValueChange?.(option.value);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (KEYS.has(event.key)) {
+      event.preventDefault();
+      const next = moveActive(disabled, current, event.key as ListboxKey);
+      if (next >= 0) activate(next);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      choose(current);
+    }
+  };
+
+  return (
+    <div
+      ref={listRef}
+      role="listbox"
+      aria-label={ariaLabel}
+      tabIndex={0}
+      autoFocus={autoFocus}
+      aria-activedescendant={current >= 0 ? optionId(current) : undefined}
+      onKeyDown={onKeyDown}
+      className={cn("flex flex-col gap-px rounded-control p-0.5 outline-none", focusRing, className)}
+    >
+      {options.map((option, index) => {
+        const selected = index === selectedIndex;
+        const isActive = index === current;
+        return (
+          <div
+            key={option.value}
+            id={optionId(index)}
+            role="option"
+            aria-selected={selected}
+            aria-disabled={option.disabled ? true : undefined}
+            data-selected={selected ? "" : undefined}
+            data-active={isActive ? "" : undefined}
+            onPointerMove={() => {
+              if (!option.disabled && !isActive) setActive(index);
+            }}
+            onClick={() => choose(index)}
+            className={cn(
+              "flex min-w-0 cursor-default items-center gap-2 rounded-control px-2 py-1 text-sm text-fg",
+              // Selected is a bar on the leading edge plus the accent text; active (keyboard
+              // cursor or pointer) is the raised fill. The two can coincide and each stays
+              // visible, and neither puts muted text on a tint it fails contrast on.
+              "data-[selected]:text-signal data-[selected]:shadow-[inset_2px_0_0_var(--color-signal)]",
+              "data-[active]:bg-raised",
+              option.disabled && "opacity-50",
+            )}
+          >
+            {renderOption(option, { selected, active: isActive })}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function defaultRender(option: ListboxOption) {
+  return (
+    <span className="flex min-w-0 flex-col">
+      <span className="truncate">{option.label}</span>
+      {option.description && <span className="truncate text-xs text-fg-muted">{option.description}</span>}
+    </span>
+  );
+}

package/src/components/ui/Popover.tsx

@@ -0,0 +1,96 @@
+/*
+ * Floating content anchored to a trigger: a picker, a small form, a list to choose from.
+ *
+ * A popover is for content a person works in. A *menu* of commands is `DropdownMenu`, and a
+ * short explanation is `Tooltip`. It closes on Escape, on a press outside, or when the caller
+ * sets `open` to false.
+ */
+
+import * as RadixPopover from "@radix-ui/react-popover";
+import type { ReactNode } from "react";
+
+import { cn } from "./cn";
+
+/** Props of `Popover`. */
+export interface PopoverProps {
+  /**
+   * The element that opens it: one focusable element that accepts a ref (Radix `asChild`).
+   * It carries `aria-expanded` and `data-state` (`open` / `closed`).
+   */
+  trigger: ReactNode;
+  /** The content. */
+  children: ReactNode;
+  /** Controlled open state. */
+  open?: boolean | undefined;
+  /** Initial open state when uncontrolled. */
+  defaultOpen?: boolean | undefined;
+  /** Called when it opens or closes. */
+  onOpenChange?: ((open: boolean) => void) | undefined;
+  /** The trigger's side it opens on. Defaults to `bottom`. */
+  side?: "top" | "right" | "bottom" | "left" | undefined;
+  /** Its alignment along that side. Defaults to `start`. */
+  align?: "start" | "center" | "end" | undefined;
+  /** Names the content (`aria-label`), when nothing inside it does. */
+  "aria-label"?: string | undefined;
+  /** Merged with the content's own classes through `cn`. */
+  className?: string | undefined;
+}
+
+/**
+ * Floating content anchored to `trigger`, on the `overlay` surface with a shadow (floating
+ * layers are the only ones that cast one).
+ *
+ * Controlled (`open` / `onOpenChange`) or not (`defaultOpen`). Focus moves into the content
+ * when it opens and back to the trigger when it closes. Escape and a press outside close it.
+ * The content carries `data-state` and `data-side`.
+ */
+export function Popover({
+  trigger,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  side = "bottom",
+  align = "start",
+  "aria-label": ariaLabel,
+  className,
+}: PopoverProps) {
+  return (
+    <RadixPopover.Root
+      {...(open === undefined ? {} : { open })}
+      {...(defaultOpen === undefined ? {} : { defaultOpen })}
+      {...(onOpenChange === undefined ? {} : { onOpenChange })}
+    >
+      <RadixPopover.Trigger asChild>{trigger}</RadixPopover.Trigger>
+      <RadixPopover.Portal>
+        <RadixPopover.Content
+          side={side}
+          align={align}
+          sideOffset={6}
+          collisionPadding={8}
+          aria-label={ariaLabel}
+          className={cn(
+            "z-50 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto",
+            "rounded-panel border border-line bg-overlay p-1 text-sm text-fg shadow-lg shadow-black/25",
+            className,
+          )}
+        >
+          {children}
+        </RadixPopover.Content>
+      </RadixPopover.Portal>
+    </RadixPopover.Root>
+  );
+}
+
+/**
+ * Closes the surrounding `Popover` when its child is activated. Wraps one element (Radix
+ * `asChild`).
+ */
+export function PopoverClose({
+  children,
+}: {
+  /** The one element that closes the popover. */
+  children: ReactNode;
+}) {
+  return <RadixPopover.Close asChild>{children}</RadixPopover.Close>;
+}