@nxgt/material 2.7.1 → 2.9.0

package/dist/lib/components/ui/display/list-tile/partials/list-tile-body.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+type ListTileBodyProps = {
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    compact: boolean;
+    selected?: boolean;
+};
+export declare function ListTileBody({ leading, trailing, title, subtitle, compact, selected, }: ListTileBodyProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/display/list-tile/partials/list-tile-classes.d.ts

@@ -0,0 +1,10 @@
+type ListTileClassesOptions = {
+    compact: boolean;
+    selected: boolean;
+    interactive: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+/** The classes shared by the tile's three elements (link, button, div). */
+export declare function listTileClasses({ compact, selected, interactive, disabled, className, }: ListTileClassesOptions): string;
+export {};

package/dist/lib/components/ui/feedback/alert-dialog/alert-dialog.d.ts

@@ -5,7 +5,7 @@ declare function AlertDialog({ ...props }: ComponentProps<typeof AlertDialogPrim
 declare function AlertDialogTrigger({ children, asChild, ...props }: ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react").JSX.Element;
 declare function AlertDialogPortal({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react").JSX.Element;
 declare function AlertDialogOverlay({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react").JSX.Element;
-declare function AlertDialogContent({ className, onOpenAutoFocus, onCloseAutoFocus, ...props }: ComponentProps<typeof AlertDialogPrimitive.Content>): import("react").JSX.Element;
+declare function AlertDialogContent({ className, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ref, ...props }: ComponentProps<typeof AlertDialogPrimitive.Content>): import("react").JSX.Element;
 declare function AlertDialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 declare function AlertDialogFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 declare function AlertDialogTitle({ className, ...props }: ComponentProps<typeof AlertDialogPrimitive.Title>): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/toast/partials/toast-actions.d.ts

@@ -0,0 +1,3 @@
+import { ToastProps } from '../toast';
+/** The toast's `action` and, beside it, the small close (X) icon button. */
+export declare function ToastActions({ id, action, dismissLabel, }: Pick<ToastProps, 'id' | 'action' | 'dismissLabel'>): import("react").JSX.Element | null;

package/dist/lib/components/ui/feedback/toast/toast.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ExternalToast, toast as sonnerToast, Toaster } from 'sonner';
+import { ExternalToast, toast as sonnerToast } from 'sonner';
 /**
  * A toast's action: a labelled button that runs `onClick` and dismisses the
  * toast, or a render function given `dismiss` for anything else.
@@ -15,10 +15,34 @@ export type ToastProps = {
     icon?: ReactNode;
     className?: string;
     action?: ToastAction;
+    /**
+     * Live-region role of the toast. None by default: the Toaster's own
+     * `aria-live="polite"` region already announces every toast, and a role on
+     * each one nests a second live region (read twice by some screen readers).
+     * `toasts.error` sets `alert`, which interrupts. A Toast rendered outside a
+     * Toaster needs its own live region.
+     */
+    role?: 'status' | 'alert';
+    /**
+     * Accessible name of the small close (X) icon button shown beside the
+     * `action`. `toast()` defaults it to the translated
+     * `material.toast.buttons.close` whenever an `action` is given; pass your
+     * own to rename it, or `''` to hide the button. Escape closes a toast
+     * whenever focus is inside it, with or without this button.
+     */
+    dismissLabel?: string;
 };
 export type ToastMethodProps = Omit<ToastProps, 'id'> & {
     options?: ExternalToast;
 };
+/**
+ * Shows a toast. One with an `action` stays until dismissed (WCAG 2.2.1: an
+ * auto-dismissed action cannot be reached by a keyboard or screen-reader user
+ * in time) unless `options.duration` says otherwise, and gets a close (X)
+ * button named by `dismissLabel`, by default the translated
+ * `material.toast.buttons.close`.
+ */
 declare function toast({ options, ...props }: ToastMethodProps): string | number;
-export declare function Toast({ icon, title, description, action, className, id, }: ToastProps): import("react").JSX.Element;
-export { sonnerToast, Toaster, toast };
+export declare function Toast({ icon, title, description, action, className, id, role, dismissLabel, }: ToastProps): import("react").JSX.Element;
+export { Toaster, type ToasterProps } from './toaster';
+export { sonnerToast, toast };

package/dist/lib/components/ui/feedback/toast/toaster.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+import { Toaster as SonnerToaster } from 'sonner';
+/** Sonner's `Toaster` props, `ref` included (it is a forwardRef component). */
+export type ToasterProps = ComponentProps<typeof SonnerToaster>;
+/**
+ * Sonner's `Toaster`, with every prop forwarded, and two changes for phones.
+ *
+ * - **Top on a phone.** Under 600px, with no `position` given, toasts show
+ *   at the top (`top-center`): at the bottom, across the whole width, they
+ *   covered what a form keeps there, its submit button first. A `position`
+ *   applies on every screen. The server and the hydrating client render the
+ *   desktop default (`bottom-right`); a phone moves on once hydrated.
+ * - **A tap does not pause.** A toast pauses while a mouse hovers it (WCAG
+ *   2.2.1); a tap on a phone reads as a mouse that arrives and never leaves,
+ *   which paused the toast until the next tap elsewhere. The hover a tap
+ *   emulates is ignored (`@nxgt/material-core/touch-hover`): the toast
+ *   pauses while the finger is down, and its timer runs again once lifted.
+ */
+export declare function Toaster({ position, ...props }: ToasterProps): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/toast/toasts.d.ts

@@ -16,6 +16,9 @@ declare function dismiss(id?: string | number): string | number;
  * toasts - Semantic toast helpers built on top of {@link toast}.
  *
  * Each variant ships a default FontAwesome duotone icon and color mapping.
+ * A caller's `action` is kept: `toast()` shows it with a close icon button
+ * beside it and keeps the toast until dismissed unless `options.duration`
+ * says otherwise.
  * `success`/`info`/`error` default to a "Close" action button (sourced from
  * `material.toast.buttons.close`); `success`/`error` also default their title
  * to a translated "Success"/"Error" string. `loading` swaps the icon for

package/dist/lib/components/ui/forms/field-blur.d.ts

@@ -1,11 +1,16 @@
-import { ReactNode } from 'react';
+import { ReactNode, RefCallback } from 'react';
 /**
  * Calls `onBlur` (React Hook Form's `field.onBlur`) when focus leaves the
  * field rendered inside it and whatever overlay that field opened. The field
  * marks its root with `useFieldBlurRoot()`. Renders no element of its own, so
  * the form's layout is untouched. Not exported: the wrappers use it.
+ *
+ * `focusRef` (React Hook Form's `field.ref`) is what makes
+ * `shouldFocusError` and `setError(..., { shouldFocus: true })` work: see
+ * `useFieldBlur`.
  */
-export declare function FieldBlur({ onBlur, children, }: {
+export declare function FieldBlur({ onBlur, focusRef, children, }: {
     onBlur: () => void;
+    focusRef?: RefCallback<unknown>;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/forms/use-field-blur.d.ts

@@ -23,5 +23,12 @@ import { RefCallback } from 'react';
  * Returns a ref callback for the field's root element(s): every element it is
  * given counts as the field. `FieldBlur` hands it to the component through
  * context (`useFieldBlurRoot`). Browser-only: nothing runs on the server.
+ *
+ * `focusRef` is React Hook Form's `field.ref`. React Hook Form focuses the
+ * first invalid field (`shouldFocusError`, `setError(..., { shouldFocus:
+ * true })`) by calling `focus()` on what that ref is given, and a field made
+ * of several controls has no one element to give it: it is given a handle
+ * that focuses the first control inside the field's roots, looked up when
+ * `focus()` is called.
  */
-export declare function useFieldBlur(onBlur: () => void): RefCallback<Element>;
+export declare function useFieldBlur(onBlur: () => void, focusRef?: RefCallback<unknown>): RefCallback<Element>;

package/dist/lib/components/ui/layout/app-shell/activity-content.d.ts

@@ -1,9 +1,16 @@
 import { ComponentProps, ReactNode } from 'react';
+export type ActivityContentTitleElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
 export type ActivityContentProps = {
     title?: ReactNode;
     subtitle?: ReactNode;
     actions?: ReactNode;
     hideHeader?: boolean;
+    /**
+     * The element of the title. `'h1'` by default: a screen's title is the
+     * page's top heading — the shell around it renders none. Pass `'h2'` when
+     * the screen sits under a heading of your own, `'div'` for no heading.
+     */
+    titleAs?: ActivityContentTitleElement;
     /**
      * Replaces the header entirely. Without it the header is built from
      * `title`, `subtitle` and `actions`.
@@ -14,5 +21,7 @@ export type ActivityContentProps = {
  * One screen inside {@link ActivityLayout}: a header card, then the content.
  *
  * Every leaf route renders this; the layout itself is mounted once, higher up.
+ * The header wraps: on a narrow screen the actions go under the title instead
+ * of squeezing it.
  */
-export declare function ActivityContent({ title, subtitle, header, actions, hideHeader, children, className, ...props }: ActivityContentProps): import("react").JSX.Element;
+export declare function ActivityContent({ title, subtitle, header, actions, hideHeader, titleAs: Title, children, className, ...props }: ActivityContentProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/activity-layout.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, ReactNode } from 'react';
-import { MenuItem } from './types';
+import { AppShellLinkComponent, MenuItem } from './types';
 export type ActivityLayoutProps = {
     items: MenuItem[];
     /** Passed to the sidebar header. */
@@ -8,6 +8,26 @@ export type ActivityLayoutProps = {
     headerActions?: ReactNode;
     /** Passed to the header. An image URL, or a whole node. */
     avatar?: ReactNode;
+    /**
+     * The link each menu entry renders, given its `href`. Defaults to React
+     * Router's `Link`; pass another for a different router.
+     */
+    linkComponent?: AppShellLinkComponent;
+    /**
+     * The element of the content region. `'main'` (the default) makes it the
+     * page's `<main>` landmark; pass `'div'` when your app renders its own
+     * `<main>` around or inside the shell — a page has only one.
+     */
+    contentAs?: 'main' | 'div';
+    /**
+     * Who scrolls. `'document'` (the default): the page grows with its content
+     * and the browser scrolls it, the header and the sidebar staying in view.
+     * `'container'`: the shell is exactly one screen high and the content
+     * region scrolls inside it — for a screen that manages its own height
+     * (a full-height map, a kanban board). The region then starts each new
+     * location at the top, and Back returns to where that page was left.
+     */
+    scroll?: 'document' | 'container';
 } & ComponentProps<'div'>;
 /**
  * The application chrome: sidebar, header, breadcrumbs, and the routed content.
@@ -18,5 +38,9 @@ export type ActivityLayoutProps = {
  * `items` is a prop rather than a hook call so the shell holds no opinion
  * about how an app builds or filters its menu — which is exactly what kept
  * this component copied into three apps instead of shared.
+ *
+ * Sized `100%` wide and at least `100dvh` high: `100lvw` counted the
+ * scrollbar (a page a few pixels too wide) and `100lvh` the height behind a
+ * phone's toolbar (the bottom of the screen hidden).
  */
-export declare function ActivityLayout({ items, brand, headerActions, avatar, children, className, ...props }: ActivityLayoutProps): import("react").JSX.Element;
+export declare function ActivityLayout({ items, brand, headerActions, avatar, linkComponent, contentAs: Content, scroll, children, className, ...props }: ActivityLayoutProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/app-header.d.ts

@@ -1,9 +1,11 @@
 import { PropsWithChildren, ReactNode } from 'react';
-import { MenuItem } from './types';
+import { AppShellLinkComponent, MenuItem } from './types';
 export type AppHeaderProps = {
     className?: string;
     showMenuIcon?: boolean;
     items: MenuItem[];
+    /** The link of each menu entry; see {@link AppShellLinkComponent}. */
+    linkComponent?: AppShellLinkComponent;
     /** Rendered before the avatar — notifications, help, a theme toggle. */
     actions?: ReactNode;
     /** An image URL, or a whole node when the app renders its own. */
@@ -17,5 +19,9 @@ export type AppHeaderProps = {
  * `avatar` and `actions` are props rather than an auth hook — the shell has no
  * opinion about where a session comes from, and the two apps that will consume
  * it get theirs from entirely different places.
+ *
+ * It needs a React Router context, even used on its own outside
+ * {@link ActivityLayout}: the menu sheet reads the location to close when it
+ * changes, and `useLocation` throws outside a router.
  */
-export declare function AppHeader({ items, className, children, actions, avatar, showMenuIcon, }: AppHeaderProps): import("react").JSX.Element;
+export declare function AppHeader({ items, linkComponent, className, children, actions, avatar, showMenuIcon, }: AppHeaderProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/app-sidebar.d.ts

@@ -1,9 +1,15 @@
 import { SidebarProps } from '../sidebar/sidebar';
-import { MenuItem } from './types';
+import { AppShellLinkComponent, MenuItem } from './types';
 export type AppSidebarProps = {
     items: MenuItem[];
     /** Replaces the header block entirely — a logo, a product name, both. */
     brand?: React.ReactNode;
+    /**
+     * The link each entry renders, given its `href`. Defaults to React Router's
+     * `Link` (client-side navigation, router `basename`). Pass another to use a
+     * different router; see {@link AppShellLinkComponent}.
+     */
+    linkComponent?: AppShellLinkComponent;
 } & SidebarProps;
 /**
  * The application sidebar: a navigation entry per {@link MenuItem}, with the
@@ -14,4 +20,4 @@ export type AppSidebarProps = {
  * {@link findActiveMenuItem} for why that cannot be decided one entry at a
  * time once a menu is mounted anywhere but `/`.
  */
-export declare function AppSidebar({ items, brand, className, withToggleIcon, expanded, onExpandedChange, ...props }: AppSidebarProps): import("react").JSX.Element;
+export declare function AppSidebar({ items, brand, linkComponent, className, withToggleIcon, expanded, onExpandedChange, ...props }: AppSidebarProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/types.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { IconName } from '../../primitives/icon/icon';
+import { LinkComponent } from '../../primitives/link/link-component';
 /**
  * One entry in the application sidebar.
  *
@@ -22,3 +23,5 @@ export type MenuItem = {
      */
     footer?: boolean;
 };
+/** The link of a menu entry: one contract with the sidebar's, see {@link LinkComponent}. */
+export type AppShellLinkComponent = LinkComponent;

package/dist/lib/components/ui/layout/app-shell/use-content-scroll.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+/**
+ * The scroll position of the content region when it is the one that scrolls
+ * (`scroll="container"`). That box outlives navigations, so without this a new
+ * screen opens at the previous one's position — and React Router's
+ * `ScrollRestoration` only handles the window. A new pathname starts at the
+ * top (a query or hash change — a filter, a tab, an anchor — keeps the
+ * position); Back and Forward (a `POP`) return to where that entry was left.
+ */
+export declare function useContentScroll(box: RefObject<HTMLElement | null>, enabled: boolean): void;

package/dist/lib/components/ui/layout/app-shell/use-navigation-sheet.d.ts

@@ -0,0 +1,19 @@
+import { MouseEvent } from 'react';
+/**
+ * The open state of the header's menu sheet. It closes when a link inside it
+ * is followed and when the location changes (Back, a redirect), and focus then
+ * goes to `<main>`; closed by Escape, the close button or the overlay, focus
+ * returns to the menu button as usual.
+ */
+export declare function useNavigationSheet(): {
+    open: boolean;
+    setOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    /**
+     * On the sheet's content: a followed link closes it. Not
+     * `defaultPrevented`: a router's link prevents the default to navigate
+     * on the client. A modified click opens a new tab and leaves it open.
+     */
+    onClick(event: MouseEvent<HTMLElement>): void;
+    /** On the sheet's content: after a navigation, focus goes to `<main>`. */
+    onCloseAutoFocus(event: Event): void;
+};

package/dist/lib/components/ui/layout/sidebar/index.d.ts

@@ -1 +1,6 @@
 export * from './sidebar';
+export * from './sidebar-content';
+export * from './sidebar-footer';
+export * from './sidebar-header';
+export * from './sidebar-menu-item';
+export * from './sidebar-menu-label';

package/dist/lib/components/ui/layout/sidebar/sidebar-content.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from 'react';
+export declare function SidebarContent({ children, className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;

package/dist/lib/components/ui/layout/sidebar/sidebar-context.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Whether the enclosing `Sidebar` is expanded. An entry of an expanded
+ * sidebar shows its label, so it needs no tooltip repeating it — and one that
+ * opened on the first entry as a sheet moves focus in would cover the menu.
+ */
+export declare const SidebarExpandedContext: import('react').Context<boolean>;
+export declare function useSidebarExpanded(): boolean;

package/dist/lib/components/ui/layout/sidebar/sidebar-footer.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from 'react';
+export declare function SidebarFooter({ children, className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;

package/dist/lib/components/ui/layout/sidebar/sidebar-header.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from 'react';
+export declare function SidebarHeader({ children, className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;

package/dist/lib/components/ui/layout/sidebar/sidebar-menu-item-tooltip.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+/** The entry, wrapped in its tooltip when it has one (see `tooltip`). */
+export declare function MenuItemTooltip({ tooltip, label, children, }: {
+    tooltip?: ReactNode;
+    label?: ReactNode;
+    children: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;

package/dist/lib/components/ui/layout/sidebar/sidebar-menu-item.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps, ReactNode } from 'react';
+import { LinkComponent, LinkComponentProps } from '../../primitives/link/link-component';
+/**
+ * What the link of a `SidebarMenuItem` receives: the anchor's props plus the
+ * `href`. It is the neutral {@link LinkComponentProps} contract: spread every
+ * prop (the tooltip's handlers, `data-state`, ...) and forward `ref`. A link
+ * that forwards only a table's `DataTableLinkProps` is not enough here.
+ */
+export type SidebarLinkProps = LinkComponentProps;
+export type SidebarLinkComponent = LinkComponent;
+type SidebarMenuItemOwnProps = {
+    icon?: ReactNode;
+    active?: boolean;
+    /**
+     * Shown on hover and focus. Defaults to the label while the sidebar is
+     * collapsed, where the label is small; an expanded sidebar shows the label
+     * itself, so it gets no tooltip unless one is passed.
+     */
+    tooltip?: ReactNode;
+};
+export type SidebarMenuItemProps = SidebarMenuItemOwnProps & ((ComponentProps<'button'> & {
+    href?: undefined;
+    linkComponent?: undefined;
+}) | (Omit<ComponentProps<'a'>, 'href'> & {
+    /** Renders a real link instead of a `<button>`. */
+    href: string;
+    /** The link element; a plain `<a>` by default. */
+    linkComponent?: SidebarLinkComponent;
+}));
+export declare function SidebarMenuItem(props: SidebarMenuItemProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/layout/sidebar/sidebar-menu-label.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps, ReactNode } from 'react';
+export declare function SidebarMenuLabel({ children, className, actions, ...props }: {
+    actions?: ReactNode;
+} & ComponentProps<'div'>): import("react").JSX.Element;

package/dist/lib/components/ui/layout/sidebar/sidebar.d.ts

@@ -1,18 +1,7 @@
-import { ComponentProps, ReactNode } from 'react';
+import { ComponentProps } from 'react';
 export type SidebarProps = {
     expanded?: boolean;
     onExpandedChange?: (expanded: boolean) => void;
     withToggleIcon?: boolean;
 } & ComponentProps<'div'>;
 export declare function Sidebar({ expanded, children, className, onExpandedChange, withToggleIcon, ...props }: SidebarProps): import("react").JSX.Element;
-export declare function SidebarContent({ children, className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-export declare function SidebarHeader({ children, className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-export declare function SidebarFooter({ children, className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-export declare function SidebarMenuLabel({ children, className, actions, ...props }: {
-    actions?: ReactNode;
-} & ComponentProps<'div'>): import("react").JSX.Element;
-export declare function SidebarMenuItem({ icon, children, className, active, tooltip, ...props }: {
-    icon?: ReactNode;
-    active?: boolean;
-    tooltip?: ReactNode;
-} & ComponentProps<'button'>): import("react").JSX.Element;

package/dist/lib/components/ui/overlays/context-menu/context-menu-items.d.ts

@@ -0,0 +1,10 @@
+import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
+import { ComponentProps } from 'react';
+declare function ContextMenuRadioGroup({ ...props }: ComponentProps<typeof ContextMenuPrimitive.RadioGroup>): import("react").JSX.Element;
+declare function ContextMenuItem({ className, inset, variant, ...props }: ComponentProps<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'error';
+}): import("react").JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, ...props }: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>): import("react").JSX.Element;
+declare function ContextMenuRadioItem({ className, children, ...props }: ComponentProps<typeof ContextMenuPrimitive.RadioItem>): import("react").JSX.Element;
+export { ContextMenuCheckboxItem, ContextMenuItem, ContextMenuRadioGroup, ContextMenuRadioItem, };

package/dist/lib/components/ui/overlays/context-menu/context-menu-sub.d.ts

@@ -0,0 +1,8 @@
+import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
+import { ComponentProps } from 'react';
+declare function ContextMenuSub({ ...props }: ComponentProps<typeof ContextMenuPrimitive.Sub>): import("react").JSX.Element;
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react").JSX.Element;
+declare function ContextMenuSubContent({ className, ...props }: ComponentProps<typeof ContextMenuPrimitive.SubContent>): import("react").JSX.Element;
+export { ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger };

package/dist/lib/components/ui/overlays/context-menu/context-menu.d.ts

@@ -4,22 +4,12 @@ declare function ContextMenu({ ...props }: ComponentProps<typeof ContextMenuPrim
 declare function ContextMenuTrigger({ ...props }: ComponentProps<typeof ContextMenuPrimitive.Trigger>): import("react").JSX.Element;
 declare function ContextMenuGroup({ ...props }: ComponentProps<typeof ContextMenuPrimitive.Group>): import("react").JSX.Element;
 declare function ContextMenuPortal({ ...props }: ComponentProps<typeof ContextMenuPrimitive.Portal>): import("react").JSX.Element;
-declare function ContextMenuSub({ ...props }: ComponentProps<typeof ContextMenuPrimitive.Sub>): import("react").JSX.Element;
-declare function ContextMenuRadioGroup({ ...props }: ComponentProps<typeof ContextMenuPrimitive.RadioGroup>): import("react").JSX.Element;
-declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-}): import("react").JSX.Element;
-declare function ContextMenuSubContent({ className, ...props }: ComponentProps<typeof ContextMenuPrimitive.SubContent>): import("react").JSX.Element;
-declare function ContextMenuContent({ className, ...props }: ComponentProps<typeof ContextMenuPrimitive.Content>): import("react").JSX.Element;
-declare function ContextMenuItem({ className, inset, variant, ...props }: ComponentProps<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean;
-    variant?: 'default' | 'error';
-}): import("react").JSX.Element;
-declare function ContextMenuCheckboxItem({ className, children, checked, ...props }: ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>): import("react").JSX.Element;
-declare function ContextMenuRadioItem({ className, children, ...props }: ComponentProps<typeof ContextMenuPrimitive.RadioItem>): import("react").JSX.Element;
+declare function ContextMenuContent({ className, ref, ...props }: ComponentProps<typeof ContextMenuPrimitive.Content>): import("react").JSX.Element;
 declare function ContextMenuLabel({ className, inset, ...props }: ComponentProps<typeof ContextMenuPrimitive.Label> & {
     inset?: boolean;
 }): import("react").JSX.Element;
 declare function ContextMenuSeparator({ className, ...props }: ComponentProps<typeof ContextMenuPrimitive.Separator>): import("react").JSX.Element;
 declare function ContextMenuShortcut({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, };
+export { ContextMenuCheckboxItem, ContextMenuItem, ContextMenuRadioGroup, ContextMenuRadioItem, } from './context-menu-items';
+export { ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, } from './context-menu-sub';
+export { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuLabel, ContextMenuPortal, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, };

package/dist/lib/components/ui/overlays/dialog/dialog-outside.d.ts

@@ -1,5 +1,11 @@
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import { ComponentProps } from 'react';
 /**
  * A combobox inside a dialog portals its list outside the dialog's content;
  * a pointer or focus landing there is not "outside" and must not close it.
  */
 export declare function keepComboboxOverlay(event: Pick<Event, 'target' | 'preventDefault'>): void;
+type Outside = Pick<ComponentProps<typeof DialogPrimitive.Content>, 'onPointerDownOutside' | 'onFocusOutside' | 'onInteractOutside'>;
+/** `handlers`, each outside handler preceded by `keepComboboxOverlay`. */
+export declare function withComboboxOverlay<H extends Outside>(handlers: H): H;
+export {};

package/dist/lib/components/ui/overlays/dialog/dialog-scroll-content.d.ts

@@ -5,5 +5,5 @@ import { ComponentProps } from 'react';
  * and the content sits in it with a margin, instead of being clipped at the
  * viewport. It renders its own close button (top right).
  */
-declare function DialogScrollContent({ className, children, onInteractOutside, onPointerDownOutside, onFocusOutside, onOpenAutoFocus, onCloseAutoFocus, ...props }: ComponentProps<typeof DialogPrimitive.Content>): import("react").JSX.Element;
+declare function DialogScrollContent({ className, children, onInteractOutside, onPointerDownOutside, onFocusOutside, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ref, ...props }: ComponentProps<typeof DialogPrimitive.Content>): import("react").JSX.Element;
 export { DialogScrollContent };

package/dist/lib/components/ui/overlays/dialog/dialog.d.ts

@@ -6,7 +6,7 @@ declare function DialogTrigger({ asChild, ...props }: ComponentProps<typeof Dial
 declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): import("react").JSX.Element;
 declare function DialogClose({ className, color, children, type, variant, ...props }: ComponentProps<typeof DialogPrimitive.Close> & Partial<Pick<IconButtonProps, 'variant' | 'color'>>): import("react").JSX.Element;
 declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>): import("react").JSX.Element;
-declare function DialogContent({ className, children, onInteractOutside, onPointerDownOutside, onFocusOutside, onOpenAutoFocus, onCloseAutoFocus, ...props }: ComponentProps<typeof DialogPrimitive.Content>): import("react").JSX.Element;
+declare function DialogContent({ className, children, onInteractOutside, onPointerDownOutside, onFocusOutside, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ref, ...props }: ComponentProps<typeof DialogPrimitive.Content>): import("react").JSX.Element;
 declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 declare function DialogTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): import("react").JSX.Element;

package/dist/lib/components/ui/overlays/dialog/use-return-focus.d.ts

@@ -7,8 +7,9 @@ type AutoFocusHandler = (event: Event) => void;
  * Opening moves focus into the overlay, as a modal must: Radix focuses the
  * first element Tab reaches, or the content itself (it has `tabIndex={-1}`)
  * when there is none; `AlertDialogContent` focuses its Cancel. An
- * `onOpenAutoFocus` of yours that calls `event.preventDefault()` keeps focus
- * where it is. With `focusFallback`, focus that is still outside the content
+ * `onOpenAutoFocus` of yours that calls `event.preventDefault()` stops Radix
+ * moving it: focus what you want in the handler. Left on the page behind a
+ * modal one, which is inert, focus goes to the content (`inertOthers`). With `focusFallback`, focus that is still outside the content
  * once Radix is done (an `AlertDialogContent` with no Cancel, whose Radix
  * handler prevents the default and focuses nothing) goes to the first
  * element Tab reaches in it, or to the content.

package/dist/lib/components/ui/overlays/drawer/drawer.d.ts

@@ -6,7 +6,7 @@ declare function DrawerTrigger({ ...props }: ComponentProps<typeof DrawerPrimiti
 declare function DrawerPortal({ ...props }: ComponentProps<typeof DrawerPrimitive.Portal>): import("react").JSX.Element;
 declare function DrawerClose({ className, color, children, type, variant, ...props }: ComponentProps<typeof DrawerPrimitive.Close> & Pick<IconButtonProps, 'variant' | 'color'>): import("react").JSX.Element;
 declare function DrawerOverlay({ className, ...props }: ComponentProps<typeof DrawerPrimitive.Overlay>): import("react").JSX.Element;
-declare function DrawerContent({ className, children, onOpenAutoFocus, onCloseAutoFocus, ...props }: ComponentProps<typeof DrawerPrimitive.Content>): import("react").JSX.Element;
+declare function DrawerContent({ className, children, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ref, ...props }: ComponentProps<typeof DrawerPrimitive.Content>): import("react").JSX.Element;
 declare function DrawerHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 declare function DrawerFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 declare function DrawerTitle({ className, ...props }: ComponentProps<typeof DrawerPrimitive.Title>): import("react").JSX.Element;

package/dist/lib/components/ui/overlays/dropdown-menu/dropdown-menu-items.d.ts

@@ -0,0 +1,11 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+import { ComponentProps } from 'react';
+declare function DropdownMenuItem({ className, inset, variant, active, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    active?: boolean;
+    inset?: boolean;
+    variant?: 'default' | 'error';
+}): import("react").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react").JSX.Element;
+export { DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, };

package/dist/lib/components/ui/overlays/dropdown-menu/dropdown-menu-sub.d.ts

@@ -0,0 +1,8 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+import { ComponentProps } from 'react';
+declare function DropdownMenuSub({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react").JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react").JSX.Element;
+export { DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger };

package/dist/lib/components/ui/overlays/dropdown-menu/dropdown-menu.d.ts

@@ -1,33 +1,18 @@
 import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
 import { ComponentProps } from 'react';
-declare function DropdownMenu({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react").JSX.Element;
+declare function DropdownMenu(props: ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react").JSX.Element;
 declare function DropdownMenuPortal({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react").JSX.Element;
 declare function DropdownMenuTrigger({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react").JSX.Element;
-declare function DropdownMenuContent({ className, sideOffset, container, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Content> & {
-    /**
-     * Where the menu is portalled; `document.body` by default. Pass the
-     * fullscreen element for a menu opened in fullscreen, which shows nothing
-     * outside it.
-     */
+declare function DropdownMenuContent({ className, sideOffset, container, ref, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Content> & {
+    /** Where the menu is portalled (`document.body` by default), e.g. a fullscreen element. */
     container?: ComponentProps<typeof DropdownMenuPrimitive.Portal>['container'];
 }): import("react").JSX.Element;
 declare function DropdownMenuGroup({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react").JSX.Element;
-declare function DropdownMenuItem({ className, inset, variant, active, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-    active?: boolean;
-    inset?: boolean;
-    variant?: 'default' | 'error';
-}): import("react").JSX.Element;
-declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react").JSX.Element;
-declare function DropdownMenuRadioGroup({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react").JSX.Element;
-declare function DropdownMenuRadioItem({ className, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react").JSX.Element;
 declare function DropdownMenuLabel({ className, inset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean;
 }): import("react").JSX.Element;
 declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react").JSX.Element;
 declare function DropdownMenuShortcut({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function DropdownMenuSub({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react").JSX.Element;
-declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-}): import("react").JSX.Element;
-declare function DropdownMenuSubContent({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react").JSX.Element;
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };
+export { DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, } from './dropdown-menu-items';
+export { DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, } from './dropdown-menu-sub';
+export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, };

package/dist/lib/components/ui/overlays/popover/popover.d.ts

@@ -2,6 +2,6 @@ import { Popover as PopoverPrimitive } from 'radix-ui';
 import { ComponentProps } from 'react';
 declare function Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>): import("react").JSX.Element;
 declare function PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>): import("react").JSX.Element;
-declare function PopoverContent({ className, align, sideOffset, ...props }: ComponentProps<typeof PopoverPrimitive.Content>): import("react").JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ref, ...props }: ComponentProps<typeof PopoverPrimitive.Content>): import("react").JSX.Element;
 declare function PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>): import("react").JSX.Element;
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/lib/components/ui/overlays/sheet/sheet.d.ts

@@ -4,7 +4,7 @@ import { IconButtonProps } from '../../actions/icon-button/icon-button';
 declare function Sheet({ ...props }: ComponentProps<typeof SheetPrimitive.Root>): import("react").JSX.Element;
 declare function SheetTrigger({ ...props }: ComponentProps<typeof SheetPrimitive.Trigger>): import("react").JSX.Element;
 declare function SheetClose({ className, color, children, type, variant, ...props }: ComponentProps<typeof SheetPrimitive.Close> & Pick<IconButtonProps, 'variant' | 'color'>): import("react").JSX.Element;
-declare function SheetContent({ className, children, side, withCloseButton, onOpenAutoFocus, onCloseAutoFocus, ...props }: ComponentProps<typeof SheetPrimitive.Content> & {
+declare function SheetContent({ className, children, side, withCloseButton, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ref, ...props }: ComponentProps<typeof SheetPrimitive.Content> & {
     side?: 'top' | 'right' | 'bottom' | 'left';
     withCloseButton?: boolean;
 }): import("react").JSX.Element;