prime-ui-kit 0.9.3 → 0.11.0

package/dist/components/message/MessageMedia.d.ts

@@ -0,0 +1,12 @@
+import { type GalleryProps } from "../gallery/Gallery";
+export type MessageMediaProps = Omit<GalleryProps, "children">;
+/**
+ * A photo, a video or an album in a message: a `Gallery` the message shapes. Alone in a message
+ * it is the shell itself (the message rounds and clips it and lays the meta on a pill over it);
+ * with a caption (`Message.Text` after it) it sits edge to edge at the top of the bubble. The gaps
+ * of an album show a neutral surface in both directions.
+ */
+export declare function MessageMedia({ className, items, ...rest }: MessageMediaProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageMedia {
+    var displayName: string;
+}

package/dist/components/message/MessageParts.d.ts

@@ -0,0 +1,206 @@
+import * as React from "react";
+import { type DropdownContentProps } from "../dropdown/Dropdown";
+import type { PaletteColor } from "../../internal/states";
+import type { MessageUser } from "./types";
+export type MessageLabels = {
+    /** The name of the message for assistive tech: who and when. */
+    message: string;
+    /** The author of an outgoing message. */
+    you: string;
+    /** Marks an edited message in its meta. */
+    edited: string;
+    sending: string;
+    sent: string;
+    read: string;
+    failed: string;
+    /** The retry button beside a failed message. */
+    retry: string;
+    /** The name of the context menu. */
+    menu: string;
+    /** The menu item that starts selection mode with this message. */
+    select: string;
+    /** Announced when the quick reaction is put: `{emoji}`. */
+    reactionAdded: string;
+    /** Announced when the quick reaction is taken back: `{emoji}`. */
+    reactionRemoved: string;
+    /** The name of the reaction bar. */
+    reactionBar: string;
+    /** The «⌄» of the reaction bar that shows every reaction. */
+    moreReactions: string;
+};
+export declare const MESSAGE_LABELS: MessageLabels;
+export type MessageRootContextValue = {
+    /** Puts or takes back a reaction through `onReactionToggle`; `null` — reactions are read-only. */
+    toggleReaction: ((emoji: string) => void) | null;
+    /** Reactions whose request is running, with the state they are shown in meanwhile. */
+    optimistic: ReadonlyMap<string, boolean>;
+    /** The menu of this message may start selection with it. */
+    startSelection: (() => void) | null;
+    labels: MessageLabels;
+    /**
+     * The meta's room at the end of the reactions row, while the row ends a bubble (the meta then
+     * sits on the row's last line); `null` under a picture or a circle.
+     */
+    rowSpacer: React.ReactNode;
+};
+/** `Message.Root` provides it to its parts. */
+export declare const MessageRootProvider: React.Provider<MessageRootContextValue>;
+export type MessageAvatarProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The author's picture in the gutter beside an incoming bubble of a group chat (`Chat.Messages
+ * type="group"`): put an `Avatar` in it on every message; the message shows it on the last of a
+ * run and keeps the gutter empty on the others.
+ */
+export declare function MessageAvatar({ className, ...rest }: MessageAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageAvatar {
+    var displayName: string;
+}
+export type MessageAuthorProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+    /**
+     * The author's hue: one per person in a group chat. Default: a hue stable per name
+     * (`hueOf(name)`); pass `hueOf(user.id)` to keep it per person.
+     */
+    color?: PaletteColor;
+    /** The member's own title in this chat, muted after the name («Админ», «Бухгалтерия»). */
+    tag?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** The name of the author when it is plain text (it names the message and picks the hue). */
+export declare function authorNameOf(children: React.ReactNode): string | undefined;
+/**
+ * The author's header at the top of the first bubble of a run in a group chat: the name in the
+ * author's hue (it ellipsizes first), an optional `Message.AuthorIcon` after it and the `tag` after
+ * them. Over a picture or a circle it stands on a pill at its top-start corner.
+ */
+export declare function MessageAuthor({ color, tag, className, children, ...rest }: MessageAuthorProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageAuthor {
+    var displayName: string;
+}
+export type MessageAuthorIconProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/**
+ * A small mark after the author's name (`<Icon name="…" />`: a crown of the chat's owner, a check
+ * of a verified member). Decorative: say what it means in the `tag` or the name if it matters.
+ */
+export declare function MessageAuthorIcon({ className, ...rest }: MessageAuthorIconProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageAuthorIcon {
+    var displayName: string;
+}
+export type MessageTextProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /**
+     * The text. A string renders its Markdown subset (**bold**, _italic_, ~~strike~~, `code`,
+     * ``` blocks, [links](url), bare URLs, `> ` quotes) as elements, never as HTML.
+     */
+    children: React.ReactNode;
+    /** Render a string as is, without its Markdown. Default `false`. */
+    plain?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The text of a message, wrapping anywhere; the meta stands at the end of its last line (its
+ * spacer closes the last line). Marks the matches of the chat's search (`Chat.Search`).
+ */
+export declare function MessageText({ plain, className, children, ...rest }: MessageTextProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageText {
+    var displayName: string;
+}
+export type MessageReplyLabels = {
+    /** Read before the quote: what it is. */
+    reply: string;
+};
+export type MessageReplyProps = Omit<React.HTMLAttributes<HTMLElement>, "color" | "onClick"> & {
+    /** Who wrote the quoted message. */
+    author: React.ReactNode;
+    /** The author's hue (the same as their `Message.Author`). Default `blue`. */
+    color?: PaletteColor;
+    /**
+     * The `value` of the quoted message: a press brings it into view in the group and flashes it,
+     * moving the focus to it. Makes the quote a button.
+     */
+    target?: string;
+    /**
+     * A press on the quote (after `target` is shown): load the original when it is not in the list
+     * yet. Makes the quote a button.
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    labels?: Partial<MessageReplyLabels>;
+    ref?: React.Ref<HTMLElement>;
+};
+/** The quoted message this one answers: the author's name over one line of its text. */
+export declare function MessageReply({ author, color, target, onClick, labels, className, children, ref, ...rest }: MessageReplyProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageReply {
+    var displayName: string;
+}
+export type MessageForwardedLabels = {
+    /** The header of a forwarded message; `{author}` is the original author. */
+    forwarded: string;
+};
+export type MessageForwardedProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Who wrote the original message. */
+    from: string;
+    labels?: Partial<MessageForwardedLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** «Переслано от Анны»: the header of a forwarded message, the original author in bold. */
+export declare function MessageForwarded({ from, labels, className, ...rest }: MessageForwardedProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageForwarded {
+    var displayName: string;
+}
+export type MessageReaction = {
+    emoji: string;
+    /** Everyone who put it, the reader included. */
+    count: number;
+    /** The reader's own reaction: filled with the accent, a press takes it back. */
+    selected?: boolean;
+    /**
+     * Who put it, in the order they put it (the reader joins at the end). While they fit (up to 3)
+     * the chip shows their avatars instead of the count; with 4 or more, the first two and a «+N»
+     * circle. Without it the chip shows the count.
+     */
+    users?: readonly MessageUser[];
+};
+/**
+ * The reactions as shown while toggles are pending: each pending emoji in its new state; the
+ * reader (`Chat.Messages reader`) joins or leaves its `users` with it.
+ */
+export declare function applyOptimistic(reactions: readonly MessageReaction[], optimistic: ReadonlyMap<string, boolean>, reader?: MessageUser): readonly MessageReaction[];
+export type MessageReactionsLabels = {
+    /** The name of a reaction chip without `users`: `{emoji}`, `{count}`. */
+    reaction: string;
+    /** The name of a chip with `users`: `{emoji}`, `{count}`, `{users}` — their names. */
+    reactionUsers: string;
+    /** The last name in `{users}` when not everyone is listed: `{count}` — how many more. */
+    moreUsers: string;
+    /** The name of the row. */
+    reactions: string;
+};
+export type MessageReactionsProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** The reactions to the message; a press on a chip calls `Message.Root onReactionToggle`. */
+    items: readonly MessageReaction[];
+    labels?: Partial<MessageReactionsLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * Reactions at the bottom of the bubble (under a picture or a circle): an emoji with the avatars
+ * of who reacted (`users`) or its count; the reader's own one is filled with the accent. A press
+ * goes to `Message.Root onReactionToggle`. Every message holds the row's place, closed: the first
+ * reaction opens it and the last one taken back closes it, each in one layout.
+ */
+export declare function MessageReactions({ items, labels: labelsProp, className, ...rest }: MessageReactionsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageReactions {
+    var displayName: string;
+}
+export type MessageMenuProps = Omit<DropdownContentProps, "side" | "align" | "matchTriggerWidth">;
+/**
+ * The context menu of the message: your `Dropdown.Item`s (Ответить, Копировать, Переслать,
+ * Изменить, Удалить — the last one `tone="danger"`). The kit adds «Выбрать» (when the group has
+ * a selection); reactions live on the reaction bar, not in the menu. Opens at the pointer
+ * on right click, on a long press, and from the keyboard (Enter, Shift+F10, the menu key).
+ */
+export declare function MessageMenu({ children, ...rest }: MessageMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageMenu {
+    var displayName: string;
+}

package/dist/components/message/MessageReactionBar.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import type { MessageReactionOption } from "./types";
+/** The reactions of the bar, the first seven in its row, the rest behind «⌄». */
+export declare const DEFAULT_REACTION_OPTIONS: readonly MessageReactionOption[];
+export type ReactionBarLabels = {
+    /** The name of the bar. */
+    bar: string;
+    /** The button that shows every reaction. */
+    more: string;
+};
+type ReactionBarProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The message's bubble: the bar opens above it. */
+    anchorRef: React.RefObject<HTMLElement | null>;
+    /** The bubble's side: the bar lines up with its start (incoming) or end (outgoing). */
+    align: "start" | "end";
+    options: readonly MessageReactionOption[];
+    /** The reader's own reactions: their buttons are pressed. */
+    selected: ReadonlySet<string>;
+    onPick: (emoji: string) => void;
+    /** Opened from the keyboard: focus moves to the first reaction. */
+    focusOnOpen: boolean;
+    labels: ReactionBarLabels;
+    onPointerEnter?: () => void;
+    onPointerLeave?: () => void;
+};
+/**
+ * The reaction bar of a message (a long press): a pill of quick reactions above the
+ * bubble, «⌄» glides the rest open under them. A floating layer — it grows from the bubble, the
+ * emoji arrive in a quick stagger, Escape and a press outside close it. A toolbar of toggle
+ * buttons named by the reactions; arrows move between them.
+ */
+export declare function ReactionBar({ open, onOpenChange, anchorRef, align, options, selected, onPick, focusOnOpen, labels, onPointerEnter, onPointerLeave, }: ReactionBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/message/MessageTyping.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export type MessageTypingLabels = {
+    /** Read while the other side types. */
+    typing: string;
+};
+export type MessageTypingProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /**
+     * The other side is typing. Keep the part mounted and switch this: it enters like an incoming
+     * message and leaves closing its height — or at once, when the reply arrives in the same update.
+     * Default `true`.
+     */
+    active?: boolean;
+    /** `Message.Avatar` of who types, for a group chat (`Chat.Messages type="group"`). */
+    children?: React.ReactNode;
+    labels?: Partial<MessageTypingLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * «Печатает…»: an incoming bubble of three dots that rise and fade in turn, at the end of the
+ * conversation while the other side types. A polite status for assistive tech.
+ */
+export declare function MessageTyping({ active, labels: labelsProp, className, children, ...rest }: MessageTypingProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace MessageTyping {
+    var displayName: string;
+}

package/dist/components/message/bubbleHug.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+type BubbleHugProps = {
+    bubble: React.RefObject<HTMLElement | null>;
+};
+/**
+ * Hugs its message's bubble. Rendered before the morph's snapshot in the message, so its layout
+ * effect runs first in a commit: the morph reads the hugged width as the new layout.
+ */
+export declare function BubbleHug({ bubble }: BubbleHugProps): null;
+export {};

package/dist/components/message/bubbleMorph.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+/** `end` — the bottom corner, the meta and the tail stay; `start` — the top stays. */
+export type MorphAnchor = "start" | "end";
+export type BubbleMorphElements = {
+    /** The message: the bubble, the tail and the reactions under a picture or a circle. */
+    column: HTMLElement | null;
+    bubble: HTMLElement | null;
+    /** The fill layer of a bubble shell (`null` under a picture or a circle). */
+    fill: HTMLElement | null;
+    /** The row of the list the message stands in (its windowed box, or the message itself). */
+    row: HTMLElement | null;
+    /** Holds the conversation's own anchoring while the message gives way itself (`Chat.Messages`). */
+    hold?: (() => void) | undefined;
+};
+export type BubbleMorph = {
+    /** Read the message as it looks now, before a change is committed. */
+    capture: (options?: {
+        anchor?: MorphAnchor;
+    }) => void;
+    /** Read the committed layout and play from the captured look to it. */
+    play: () => void;
+    /**
+     * A part is about to change the message from inside (a transcript): capture now and play as
+     * soon as the change is laid out — the frame it lands in.
+     */
+    expect: () => void;
+    dispose: () => void;
+};
+export declare function createBubbleMorph(elements: () => BubbleMorphElements): BubbleMorph;
+type MorphSnapshotProps = {
+    morph: BubbleMorph;
+};
+/**
+ * Captures the message right before each commit of `Message.Root` (`getSnapshotBeforeUpdate` runs
+ * before any DOM of the commit changes) and plays right after it, before paint.
+ */
+export declare class MorphSnapshot extends React.Component<MorphSnapshotProps> {
+    getSnapshotBeforeUpdate(): null;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    render(): null;
+}
+export {};

package/dist/components/message/formatMessageTime.d.ts

@@ -0,0 +1,2 @@
+/** «09:05»: hours and minutes, 24-hour — the default `Message.Root formatTime`. */
+export declare function formatMessageTime(date: Date): string;

package/dist/components/message/types.d.ts

@@ -0,0 +1,21 @@
+import type { PaletteColor } from "../../internal/states";
+/** Who wrote a message relative to the reader: `incoming` from others, `outgoing` from the reader. */
+export type MessageDirection = "incoming" | "outgoing";
+/** A person in the chat: a reactor of `MessageReaction.users`, the reader of `Chat.Messages`. */
+export type MessageUser = {
+    /** Stable id: the reader is matched by it. */
+    id: string;
+    /** The name read out in the chip's accessible name; the reader is «Вы». */
+    name: string;
+    /** Photo URL; without it the avatar shows the initials. */
+    src?: string;
+    /** Hue of the initials (`Avatar color`). Default `gray`. */
+    color?: PaletteColor;
+};
+/** Where a message stands in a run of consecutive messages of one author. */
+export type MessagePosition = "single" | "first" | "middle" | "last";
+/** A reaction the reader can put: the emoji and its name for assistive tech («Нравится»). */
+export type MessageReactionOption = {
+    emoji: string;
+    label: string;
+};

package/dist/components/modal/DialogGuard.d.ts

@@ -0,0 +1,21 @@
+export type DialogGuardProps = {
+    /**
+     * A request runs: Escape, a press outside, a swipe, the close button and `Close` do nothing; the
+     * close button and the `Close` child stay in place, disabled.
+     */
+    busy?: boolean;
+    /**
+     * Unsaved changes: any of those dismisses first asks «Не сохранять изменения?» (a ConfirmDialog
+     * with the Root's `labels.discard*`); confirming closes the dialog.
+     */
+    dirty?: boolean;
+};
+/**
+ * Holds a Modal or Drawer from inside its content, where the form state lives: put it anywhere in
+ * `Content`. Renders nothing but the «discard changes?» confirm when it is asked. Closing from code
+ * (`open={false}`) is never held.
+ */
+export declare function DialogGuard({ busy, dirty }: DialogGuardProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogGuard {
+    var displayName: string;
+}

package/dist/components/modal/DialogParts.d.ts

@@ -1,10 +1,22 @@
 /**
- * Shared header / body / footer parts of Modal and Drawer. Not exported from the package root:
- * consumers use them as `Modal.*` and `Drawer.*`. The owning content component provides the
- * shell context (ids, close handler, labels, default footer layout).
+ * Shared header / body / footer parts of Modal, Drawer and Sheet. Not exported from the package
+ * root: consumers use them as `Modal.*`, `Drawer.*` and `Sheet.*`. The owning content component
+ * provides the shell context (ids, close handler, labels, default footer layout).
  */
 import * as React from "react";
-import type { Tone } from "@/internal/states";
+import type { Tone } from "../../internal/states";
+/** System strings of the built-in «discard changes?» confirm (`Modal.Guard` / `Drawer.Guard dirty`). */
+export type DialogDiscardLabels = {
+    /** Title of the confirm a dismiss of a `dirty` dialog opens. */
+    discardTitle: string;
+    /** Its description. */
+    discardDescription: string;
+    /** Its confirm button: close and lose the changes. */
+    discardConfirm: string;
+    /** Its cancel button: back to the form. */
+    discardCancel: string;
+};
+export declare const DIALOG_DISCARD_LABELS: DialogDiscardLabels;
 export type DialogRootOptions = {
     open?: boolean;
     defaultOpen?: boolean;
@@ -12,32 +24,64 @@ export type DialogRootOptions = {
     closeOnEscape?: boolean;
     closeOnOutsideClick?: boolean;
     closeLabel: string;
+    discardLabels: DialogDiscardLabels;
     /** Modal only: Enter clicks `Modal.Confirm`. */
     confirmOnEnter?: boolean;
     onEnterConfirm?: (event: KeyboardEvent) => void;
 };
+/** What a `Guard` inside the content holds the dialog to. */
+export type DialogGuardState = {
+    /** A request runs: no way to dismiss; the close button is disabled. */
+    busy: boolean;
+    /** Unsaved changes: a dismiss asks first. */
+    dirty: boolean;
+};
 export type DialogRootState = {
     open: boolean;
     setOpen: (open: boolean) => void;
+    /**
+     * A person dismisses the dialog (Escape, scrim, swipe, the close button, `Close`): ignored while
+     * `busy`, asks «discard changes?» while `dirty`, else closes. `setOpen(false)` from code is never
+     * guarded.
+     */
+    requestClose: () => void;
+    busy: boolean;
+    dirty: boolean;
+    setGuard: (guard: DialogGuardState) => void;
+    /** The «discard changes?» confirm is open. */
+    confirmingClose: boolean;
+    setConfirmingClose: (open: boolean) => void;
     closeOnEscape: boolean;
     closeOnOutsideClick: boolean;
     closeLabel: string;
+    discardLabels: DialogDiscardLabels;
     confirmOnEnter: boolean;
     onEnterConfirm?: (event: KeyboardEvent) => void;
 };
 declare const DialogRootProvider: React.Provider<DialogRootState | null>, useDialogRootContext: () => DialogRootState;
 export { DialogRootProvider, useDialogRootContext };
-/** State of Modal.Root / Drawer.Root: open (controlled or not) and the dismiss policy. */
-export declare function useDialogRoot({ open, defaultOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, closeLabel, confirmOnEnter, onEnterConfirm, }: DialogRootOptions): DialogRootState;
+/** State of Modal.Root / Drawer.Root: open (controlled or not), the dismiss policy and the guard. */
+export declare function useDialogRoot({ open, defaultOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, closeLabel, discardLabels, confirmOnEnter, onEnterConfirm, }: DialogRootOptions): DialogRootState;
 /**
- * The modal layer of a Modal / Drawer panel: Escape and scrim clicks close it per the Root's
- * `closeOnEscape` / `closeOnOutsideClick`; focus returns to the opener (foundation §8).
+ * Registers a guard from inside the content (`Modal.Guard`, `Drawer.Guard`, ConfirmDialog while it
+ * runs); it is lifted when the part unmounts.
  */
-export declare function useDialogLayer<T extends HTMLElement>({ open, setOpen, closeOnEscape, closeOnOutsideClick, }: DialogRootState): {
+export declare function useDialogGuard({ busy, dirty }: DialogGuardState): DialogRootState;
+/**
+ * The modal layer of a Modal / Drawer panel: Escape and scrim clicks ask to close per the Root's
+ * `closeOnEscape` / `closeOnOutsideClick` (and its guard); focus returns to the opener
+ * (foundation §8).
+ */
+export declare function useDialogLayer<T extends HTMLElement>({ open, requestClose, closeOnEscape, closeOnOutsideClick, }: DialogRootState): {
     onClose: () => void;
     ref: React.RefObject<T | null>;
-    layer: import("@/internal/overlay/layerStack").LayerEntry;
+    layer: import("../../internal/overlay/layerStack").LayerEntry;
 };
+/**
+ * The content of a closing dialog: while the exit motion plays it keeps showing the last children
+ * it had open, so a record cleared together with `open` does not empty the panel mid-motion.
+ */
+export declare function useExitSnapshot<T>(open: boolean, children: T): T;
 /** Class for the `role="dialog"` element: hairline tokens and the `prime-dialog` container. */
 export declare const dialogShellClassName: string;
 /** Footer actions: `fill` — equal-width buttons in one row; `end` — auto-width, right-aligned. */
@@ -50,6 +94,8 @@ type DialogShellContextValue = {
     registerDescription: (present: boolean) => void;
     onClose: () => void;
     closeLabel: string;
+    /** The guard is busy: the close button stays in place, disabled. */
+    busy: boolean;
     footerLayout: DialogFooterLayout;
     /** Enter-confirm target (Modal only). */
     confirmRef?: React.MutableRefObject<HTMLElement | null>;
@@ -60,11 +106,12 @@ type UseDialogShellOptions = {
     ariaDescribedBy?: string;
     onClose: () => void;
     closeLabel: string;
+    busy: boolean;
     footerLayout: DialogFooterLayout;
     confirmRef?: React.MutableRefObject<HTMLElement | null>;
 };
 /** Builds the shell context and the resolved `aria-*` for the `role="dialog"` element. */
-export declare function useDialogShellValue({ ariaLabel, ariaLabelledBy, ariaDescribedBy, onClose, closeLabel, footerLayout, confirmRef, }: UseDialogShellOptions): {
+export declare function useDialogShellValue({ ariaLabel, ariaLabelledBy, ariaDescribedBy, onClose, closeLabel, busy, footerLayout, confirmRef, }: UseDialogShellOptions): {
     value: DialogShellContextValue;
     aria: {
         "aria-label": string | undefined;
@@ -101,18 +148,32 @@ export declare namespace DialogDescription {
     var displayName: string;
 }
 export type DialogHeaderProps = React.HTMLAttributes<HTMLElement> & {
-    /** Built-in close button (square ghost `s`, `labels.close`). Default `true`. */
+    /**
+     * Built-in close button (square ghost `s`, `labels.close`). Default `true`. While a `Guard` is
+     * `busy` it stays in place, disabled.
+     */
     showClose?: boolean;
     ref?: React.Ref<HTMLElement>;
 };
 /**
- * `[Icon] [Title + Description] [close]` in one row. Layout is a CSS grid, so child order
- * does not matter; text children stack in the middle column.
+ * `[Icon] [Title + Description] [Actions] [close]` in one row. Layout is a CSS grid, so child
+ * order does not matter; text children stack in the text column.
  */
 export declare function DialogHeader({ showClose, className, children, ...rest }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DialogHeader {
     var displayName: string;
 }
+export type DialogActionsProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * A row of controls at the end of the header, before the close button: a status Badge, a ⋯
+ * Dropdown, an icon button. Controls inside take tier `s`, the close button's tier.
+ */
+export declare function DialogActions({ className, children, ...rest }: DialogActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogActions {
+    var displayName: string;
+}
 export type DialogBodyProps = React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };
@@ -131,6 +192,17 @@ export declare function DialogFooter({ layout, className, ...rest }: DialogFoote
 export declare namespace DialogFooter {
     var displayName: string;
 }
+export type DialogMetaProps = React.HTMLAttributes<HTMLParagraphElement> & {
+    ref?: React.Ref<HTMLParagraphElement>;
+};
+/**
+ * Short status text at the start of the footer («Есть несохранённые изменения», «Сохранено в
+ * 14:02»): muted body-s; the buttons keep the end. Not part of the dialog's description.
+ */
+export declare function DialogMeta({ className, ...rest }: DialogMetaProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogMeta {
+    var displayName: string;
+}
 type SlotChild = React.ReactElement<{
     onClick?: React.MouseEventHandler;
     ref?: React.Ref<HTMLElement>;
@@ -146,7 +218,10 @@ export declare namespace DialogTrigger {
 export type DialogCloseProps = {
     children: SlotChild;
 };
-/** Adds "close the dialog" to the child's click (unless the child prevents default). */
+/**
+ * Adds "close the dialog" to the child's click (unless the child prevents default); the close
+ * goes through the guard, and the child is `disabled` while the guard is busy.
+ */
 export declare function DialogClose({ children }: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace DialogClose {
     var displayName: string;

package/dist/components/modal/Modal.d.ts

@@ -1,50 +1,9 @@
-import * as React from "react";
-import type { ControlSize } from "@/internal/states";
-import { DialogBody, DialogClose, DialogConfirm, DialogDescription, DialogFooter, DialogHeader, DialogIcon, DialogTitle, DialogTrigger } from "./DialogParts";
-export type { DialogBodyProps as ModalBodyProps, DialogCloseProps as ModalCloseProps, DialogConfirmProps as ModalConfirmProps, DialogDescriptionProps as ModalDescriptionProps, DialogFooterProps as ModalFooterProps, DialogHeaderProps as ModalHeaderProps, DialogIconProps as ModalIconProps, DialogTitleProps as ModalTitleProps, DialogTriggerProps as ModalTriggerProps, } from "./DialogParts";
-export type ModalLabels = {
-    /** `aria-label` of the header close button. */
-    close: string;
-};
-export type ModalRootProps = {
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    /** Escape closes the dialog. Default `true`. */
-    closeOnEscape?: boolean;
-    /**
-     * A click on the scrim (or, on a narrow viewport, a swipe down) closes the dialog. Default
-     * `true`; turn it off for destructive confirms.
-     */
-    closeOnOutsideClick?: boolean;
-    /** Enter clicks the action wrapped in `Modal.Confirm`. Default `true`. */
-    confirmOnEnter?: boolean;
-    /** Replaces the default Enter confirm (the `Modal.Confirm` click). */
-    onEnterConfirm?: (event: KeyboardEvent) => void;
-    labels?: Partial<ModalLabels>;
-    children?: React.ReactNode;
-};
-declare function ModalRoot({ confirmOnEnter, labels, children, ...options }: ModalRootProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ModalRoot {
-    var displayName: string;
-}
-export type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Dialog width: `s` 440 · `m` 560 · `l` 720 · `xl` 960. Below 640px of viewport the dialog is
-     * always a full-width bottom sheet with a grab handle.
-     */
-    size?: Exclude<ControlSize, "xs">;
-    /** Portal target. Default `document.body`. */
-    container?: HTMLElement | null;
-    /** Class on the full-screen scrim. */
-    overlayClassName?: string;
-    /** The `role="dialog"` panel. */
-    ref?: React.Ref<HTMLDivElement>;
-};
-declare function ModalContent({ container, ...props }: ModalContentProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace ModalContent {
-    var displayName: string;
-}
+import { DialogGuard } from "./DialogGuard";
+import { DialogActions, DialogBody, DialogClose, DialogConfirm, DialogDescription, DialogFooter, DialogHeader, DialogIcon, DialogMeta, DialogTitle, DialogTrigger } from "./DialogParts";
+import { ModalContent, ModalRoot } from "./ModalDialog";
+export type { DialogGuardProps as ModalGuardProps } from "./DialogGuard";
+export type { DialogActionsProps as ModalActionsProps, DialogBodyProps as ModalBodyProps, DialogCloseProps as ModalCloseProps, DialogConfirmProps as ModalConfirmProps, DialogDescriptionProps as ModalDescriptionProps, DialogFooterProps as ModalFooterProps, DialogHeaderProps as ModalHeaderProps, DialogIconProps as ModalIconProps, DialogMetaProps as ModalMetaProps, DialogTitleProps as ModalTitleProps, DialogTriggerProps as ModalTriggerProps, } from "./DialogParts";
+export type { ModalContentProps, ModalLabels, ModalRootProps } from "./ModalDialog";
 export declare const Modal: {
     Root: typeof ModalRoot;
     Trigger: typeof DialogTrigger;
@@ -53,8 +12,11 @@ export declare const Modal: {
     Icon: typeof DialogIcon;
     Title: typeof DialogTitle;
     Description: typeof DialogDescription;
+    Actions: typeof DialogActions;
     Body: typeof DialogBody;
     Footer: typeof DialogFooter;
+    Meta: typeof DialogMeta;
     Close: typeof DialogClose;
     Confirm: typeof DialogConfirm;
+    Guard: typeof DialogGuard;
 };