prime-ui-kit 0.10.0 → 0.11.1

package/dist/components/media-viewer/MediaViewer.d.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+import type { MediaViewerItem, MediaViewerLabels } from "./types";
+export type { MediaViewerItem, MediaViewerLabels } from "./types";
+export type MediaViewerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** The photos and videos to page through, in order. */
+    items: readonly MediaViewerItem[];
+    /** Controlled visibility; together with `onOpenChange`. */
+    open?: boolean;
+    /** Initial visibility, uncontrolled. Default `false`. */
+    defaultOpen?: boolean;
+    /** Called on every open and close: the close button, Escape, a swipe, a click past the media. */
+    onOpenChange?: (open: boolean) => void;
+    /** The item on screen (controlled); together with `onIndexChange`. */
+    index?: number;
+    /** The item shown first, uncontrolled. Default `0`. */
+    defaultIndex?: number;
+    /** The page turned: a swipe, an arrow, a key, a thumbnail. */
+    onIndexChange?: (index: number) => void;
+    /** Past the last item comes the first (with three items or more). Default `false`. */
+    loop?: boolean;
+    /** How far a picture zooms, times its fitted size. Default `4`. */
+    maxZoom?: number;
+    /** A filmstrip of every item at the bottom. Default `false`. */
+    thumbnails?: boolean;
+    /**
+     * A video starts as soon as its page settles on screen; where the browser refuses sound, it
+     * starts muted. `false` — it waits for a press. Default `true`.
+     */
+    autoPlay?: boolean;
+    /** Escape closes the viewer. Default `true`. */
+    closeOnEscape?: boolean;
+    /** A vertical swipe, or a click on the stage past the media, closes the viewer. Default `true`. */
+    closeOnOutsideClick?: boolean;
+    /**
+     * The element item `index` opens from and closes into (its thumbnail). Without it the viewer
+     * finds the picture in the element that opened it; with neither, it fades.
+     */
+    getOrigin?: (index: number) => Element | null;
+    /** Actions for the item on screen, in the top bar before the close button. */
+    renderActions?: (item: MediaViewerItem, index: number) => React.ReactNode;
+    labels?: Partial<MediaViewerLabels>;
+    /** The `role="dialog"` element. */
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * A full-screen viewer for photos and videos: pages slide under the finger and settle with a
+ * spring, a pinch or a double tap zooms about the point, a zoomed picture pans with iOS momentum
+ * and bounces off its edges, a swipe up or down carries it away to close. It opens out of the
+ * thumbnail it was opened from and closes back into it. Only the page on screen and its
+ * neighbours are mounted.
+ */
+export declare function MediaViewer({ items, open: openProp, defaultOpen, onOpenChange, index: indexProp, defaultIndex, onIndexChange, ...rest }: MediaViewerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace MediaViewer {
+    var displayName: string;
+}

package/dist/components/media-viewer/ViewerVideo.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+import type { MediaViewerItem, MediaViewerLabels } from "./types";
+/** The sound of every video in one viewer: the level 0…1 and the mute. */
+export type Sound = {
+    volume: number;
+    muted: boolean;
+};
+/** What the viewer's keys and clicks do to the video on screen. */
+export type VideoControls = {
+    toggle: () => void;
+    /** Moves the position by `seconds` (negative: back). */
+    seekBy: (seconds: number) => void;
+    toggleMute: () => void;
+    /** Changes the level by `delta` (0…1 scale). */
+    volumeBy: (delta: number) => void;
+};
+type ViewerVideoProps = {
+    item: MediaViewerItem;
+    /** The page on screen, and the viewer is not closing: anything else pauses. */
+    active: boolean;
+    /** Start once the page is on screen. */
+    autoPlay: boolean;
+    /** Shared by the viewer's videos: a level set on one carries to the next. */
+    sound: Sound;
+    onSoundChange: (sound: Sound) => void;
+    /** Filled while the page is on screen: the viewer's keys reach the video through it. */
+    controlsRef: React.MutableRefObject<VideoControls | null>;
+    /** The video on screen started or stopped: the chrome stays while it stands still. */
+    onPlayingChange: (playing: boolean) => void;
+    /**
+     * The thumbnail the viewer opened from (a `<video>` showing its frame, or an `<img>`): drawn as
+     * the still the page flies with, until the video has a frame of its own.
+     */
+    still: HTMLElement | null;
+    labels: MediaViewerLabels;
+    /** The video reported its own size: the page refits it. */
+    onRatio: (ratio: number) => void;
+    onError: () => void;
+    /** The video box, sized and transformed by the engine. */
+    zoomRef: React.Ref<HTMLDivElement>;
+    boxStyle: React.CSSProperties;
+    /** Caption and other parts of the bottom bar, above the controls. */
+    caption: React.ReactNode;
+};
+/**
+ * A video page: the frame in its fitted box, a play disk in the middle while it stands still, and
+ * a bar at the bottom — play / pause, the time, a seek slider, the length and the sound button
+ * with its level — that steps aside with the rest of the chrome. With `autoPlay` it starts once its
+ * page settles (muted where the browser refuses sound); one sound at a time on the page; it pauses
+ * when its page leaves the screen.
+ */
+export declare function ViewerVideo({ item, active, autoPlay, sound, onSoundChange, controlsRef, onPlayingChange, still, labels, onRatio, onError, zoomRef, boxStyle, caption, }: ViewerVideoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/media-viewer/originShape.d.ts

@@ -0,0 +1,17 @@
+import type { MediaViewerItem } from "./types";
+import type { ViewerOrigin } from "./viewerEngine";
+/**
+ * The shape a picture has on the page, so the viewer flies out of it and back into it exactly: the
+ * box of the media element, the part that shows once every clipping ancestor (a scroller, a
+ * rounded album, a bubble) and the viewport have cut it, and the radius of each corner of that
+ * part — taken from the element itself (an `<img>` rounds its own picture) or from the clipping
+ * ancestor whose corner it is. An album rounds only its outer corners, so its inner tiles fly
+ * square and its corner tiles round on the outer side only. `null` when little of it shows.
+ */
+export declare function originShape(media: HTMLElement): ViewerOrigin | null;
+/**
+ * The thumbnail of `item` on the page: an `<img>` or `<video>` showing its `thumbnail`, `src` or
+ * `poster`. Of several, the one nearest the thumbnail the viewer opened from (inside the smallest
+ * ancestor they share), so a grid closes into its own tile. Read once, when the viewer closes.
+ */
+export declare function findItemMedia(item: MediaViewerItem | undefined, near: Element | null, viewer: Element | null): HTMLElement | null;

package/dist/components/media-viewer/physics.d.ts

@@ -0,0 +1,81 @@
+/**
+ * The physics of the media viewer, pure and frame-rate independent: the spring that settles every
+ * released gesture, the iOS momentum of a pan, the rubber band past an edge, and the geometry of
+ * zooming about a point. Lengths are px, times ms, velocities px/ms.
+ */
+export type Point = {
+    x: number;
+    y: number;
+};
+export type Size = {
+    width: number;
+    height: number;
+};
+/** A damped spring, mass 1. Stiffness in 1/s², damping in 1/s. */
+export type SpringConfig = {
+    stiffness: number;
+    damping: number;
+};
+/** Settles a released gesture: quick, with a trace of overshoot after a fast flick. */
+export declare const SETTLE_SPRING: SpringConfig;
+/** iOS `UIScrollView.DecelerationRate.normal`: the share of velocity kept per ms. */
+export declare const DECELERATION_RATE = 0.998;
+/** Spring state in px and px/ms. */
+export type SpringState = {
+    value: number;
+    velocity: number;
+};
+/** Advances a spring toward `target` by `dt` ms (semi-implicit Euler in fixed substeps). */
+export declare function stepSpring(state: SpringState, target: number, dt: number, config?: SpringConfig): SpringState;
+/** The spring is at rest on its target: under a hundredth of a px and nearly still. */
+export declare function springSettled(state: SpringState, target: number, epsilon?: number): boolean;
+/** Velocity left after `dt` ms of momentum. */
+export declare function decayVelocity(velocity: number, dt: number): number;
+/** Where momentum from `velocity` comes to rest, measured from where it starts. */
+export declare function projectMomentum(velocity: number): number;
+/**
+ * Distance shown for `overshoot` px dragged past an edge of a `dimension`-long viewport: the iOS
+ * curve, 1 : 1 at first, ever stiffer, never past the dimension.
+ */
+export declare function rubberBand(overshoot: number, dimension: number): number;
+/** `value` inside `[min, max]`, with the part past either bound rubber-banded over `dimension`. */
+export declare function rubberClamp(value: number, min: number, max: number, dimension: number): number;
+/** How many pages on each side of the current one stay mounted and painted, ready to slide in. */
+export declare const PAGE_RADIUS = 2;
+/**
+ * Where item `index` stands from the `current` page, in pages: negative before, positive after.
+ * With `loop` (three items or more) the shorter way round counts.
+ */
+export declare function pageOffset(index: number, current: number, count: number, loop: boolean): number;
+/** The items mounted around `current`: the page itself and `PAGE_RADIUS` on each side. */
+export declare function pageWindow(current: number, count: number, loop: boolean): number[];
+export declare const clamp: (value: number, min: number, max: number) => number;
+/** The largest box of `ratio` (width ÷ height) that fits inside `area` (`object-fit: contain`). */
+export declare function fitBox(ratio: number, area: Size): Size;
+/**
+ * How far the centre of a `box` scaled by `scale` may move from the centre of `area`, per axis:
+ * none while it is smaller than the area, else until its edge meets the area's edge.
+ */
+export declare function panLimit(box: Size, scale: number, area: Size): Point;
+/** A translation kept within `panLimit`. */
+export declare function clampPan(pan: Point, box: Size, scale: number, area: Size): Point;
+/**
+ * The translation that keeps `focus` (a point relative to the area's centre) over the same spot
+ * of the content while the scale goes from `from` to `to`.
+ */
+export declare function zoomAbout(pan: Point, from: number, to: number, focus: Point): Point;
+/** A scale past `[min, max]` softened like a rubber band: a pinch resists beyond its range. */
+export declare function softScale(scale: number, min: number, max: number): number;
+/** The scale at which the box covers the area: a portrait on a wide screen fills it edge to edge. */
+export declare function coverScale(box: Size, area: Size): number;
+/** `cubic-bezier(x1, y1, x2, y2)` as a function of time 0…1 (Newton, then bisection). */
+export declare function cubicBezier(x1: number, y1: number, x2: number, y2: number): (x: number) => number;
+/** `--prime-motion-easing-emphasized` (the iOS sheet curve): open and close glide on it. */
+export declare const emphasized: (x: number) => number;
+/** Velocity over the last stretch of a drag from timestamped samples, px/ms per axis. */
+export type Sample = {
+    t: number;
+    x: number;
+    y: number;
+};
+export declare function releaseVelocity(samples: readonly Sample[], now: number): Point;

package/dist/components/media-viewer/types.d.ts

@@ -0,0 +1,59 @@
+export type MediaViewerItem = {
+    /** Default `image`. */
+    type?: "image" | "video";
+    /** The full picture or the video file. */
+    src: string;
+    /**
+     * A small copy of the picture (the thumbnail it opens from): shown at once while `src` loads,
+     * and in the filmstrip.
+     */
+    thumbnail?: string;
+    /** A still of a video before it plays; the filmstrip shows it too. */
+    poster?: string;
+    /** What the picture shows: the image's `alt`, the name of its page and its thumbnail. */
+    alt?: string;
+    /** A line or two under the picture. */
+    caption?: string;
+    /**
+     * The natural size: the picture takes its final box before anything loads. Without it the box
+     * starts at 4 : 3 and refits when the file reports its own size.
+     */
+    width?: number;
+    height?: number;
+};
+export type MediaViewerLabels = {
+    /** The name of the dialog when no `aria-label` is given. */
+    viewer: string;
+    close: string;
+    previous: string;
+    next: string;
+    zoomIn: string;
+    zoomOut: string;
+    /** The counter and the name of a page: `{current}` and `{total}`. */
+    counter: string;
+    /** What a page is to assistive tech (`aria-roledescription`). */
+    slide: string;
+    /** The name of a page without `alt`. */
+    photo: string;
+    video: string;
+    /** The filmstrip. */
+    thumbnails: string;
+    /** A thumbnail of the filmstrip: `{name}` is the item's `alt`, else `photo` / `video`. */
+    show: string;
+    /** Read when the page changes: `{name}`, `{current}`, `{total}`. */
+    announcement: string;
+    loadError: string;
+    retry: string;
+    play: string;
+    pause: string;
+    mute: string;
+    unmute: string;
+    /** The sound level slider of a video. */
+    volume: string;
+    /** The value of the level slider: `{value}` in percent. */
+    volumeValue: string;
+    /** The seek slider of a video. */
+    seek: string;
+    /** The value of the seek slider: `{current}` and `{duration}` as m:ss. */
+    position: string;
+};

package/dist/components/media-viewer/viewerEngine.d.ts

@@ -0,0 +1,202 @@
+/**
+ * The gesture engine of MediaViewer: one imperative object per open viewer that turns pointers,
+ * the wheel and commands into transforms, written straight to the DOM once per frame — React
+ * renders only when the page, the zoom or the gesture state changes. The page track slides with a
+ * spring, a pinch zooms about the fingers, a pan coasts with iOS momentum and bounces off the edges,
+ * a vertical drag carries the picture away to close, a double tap zooms to a point, and open / close
+ * glide between the picture and the thumbnail it came from.
+ */
+import { type Point, type Size } from "./physics";
+/** A page of the viewer as the DOM has it: its slide, the box that zooms and its fitted size. */
+export type ViewerSlot = {
+    slide: HTMLElement;
+    zoom: HTMLElement;
+    /** The media fitted into the stage (`object-fit: contain`), px. */
+    box: Size;
+    /** Images zoom; a video stays at its fit. */
+    zoomable: boolean;
+};
+export type ViewerEngineCallbacks = {
+    /** A page change the engine settled on (a swipe, a step). */
+    onIndexChange: (index: number) => void;
+    /** The current page zoomed in or came back to its fit; `byGesture` — a pinch, a double tap, the wheel. */
+    onZoomChange: (zoomed: boolean, byGesture: boolean) => void;
+    /** A tap that is not part of a double tap: the target and the pointer type. */
+    onTap: (target: Element, pointerType: string) => void;
+    /**
+     * A far page (a thumbnail, Home / End) is borrowed as the neighbour it slides in from, or the
+     * borrowing ended (`null`): React keeps it mounted meanwhile.
+     */
+    onTransitChange: (target: number | null) => void;
+    /** A drag (page, pan, pinch, dismiss) started or ended: the chrome steps aside meanwhile. */
+    onGestureChange: (gesture: GestureKind | null) => void;
+    /** A vertical swipe let go far or fast enough to close. */
+    onDismiss: () => void;
+};
+export type GestureKind = "page" | "pan" | "pinch" | "dismiss";
+/** Four numbers clockwise from the top (insets) or from the top-left corner (radii). */
+type Quad = [number, number, number, number];
+/** A rect in viewport px. */
+export type ViewerRect = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+/**
+ * Where a picture opens from or closes into, as it is seen on the page: the box of its media
+ * element, the part of it that shows (cut by the scrollers and rounded frames around it), and the
+ * radius of each corner of that part (top-left, top-right, bottom-right, bottom-left).
+ */
+export type ViewerOrigin = {
+    rect: ViewerRect;
+    visible: ViewerRect;
+    radii: Quad;
+};
+export declare class ViewerEngine {
+    count: number;
+    index: number;
+    loop: boolean;
+    maxZoom: number;
+    canDismiss: boolean;
+    reducedMotion: boolean;
+    /** The page gap, px. */
+    gap: number;
+    area: Size;
+    rtl: boolean;
+    callbacks: ViewerEngineCallbacks;
+    private stage;
+    private backdrop;
+    private slots;
+    private pager;
+    /** Where the pager springs to, px, or `null` while it is held or at rest. */
+    private pagerTarget;
+    /** The page the running pager animation turns to: -1, +1, or 0 for a bounce back. */
+    private pendingStep;
+    /** A far page standing in as the neighbour on the side of `transitDir` while it slides in. */
+    private transit;
+    private transitDir;
+    /** The fractional page on screen last told to `positionListener`. */
+    private position;
+    /**
+     * Follows the page on screen as a fractional index on every frame: 2.4 is four tenths of the
+     * way from item 2 to the next one (the filmstrip glides along with it).
+     */
+    positionListener: ((position: number) => void) | null;
+    private scale;
+    private panX;
+    private panY;
+    private zoomTarget;
+    private coastX;
+    private coastY;
+    private zoomed;
+    private dismiss;
+    private dismissTarget;
+    private tween;
+    /** The pose a finished open or close leaves (closed: held until the viewer unmounts). */
+    private hold;
+    private pointers;
+    private drag;
+    private pinch;
+    private lastTap;
+    private tapTimer;
+    private wheelAccum;
+    private wheelLocked;
+    private wheelTimer;
+    private frame;
+    private lastFrame;
+    private gesture;
+    constructor(callbacks: ViewerEngineCallbacks);
+    attach(stage: HTMLElement, backdrop: HTMLElement): () => void;
+    /** Registers (or with `null` removes) the page of item `index`. */
+    setSlot(index: number, slot: ViewerSlot | null): void;
+    /** The page React shows changed from outside (a thumbnail, a controlled `index`): jump there. */
+    syncIndex(index: number): void;
+    /** The stage resized: the zoom keeps its scale but stays inside the new limits. */
+    setArea(area: Size): void;
+    get isZoomed(): boolean;
+    /** Paints the current state: after React mounted or moved a slide. */
+    paint: () => void;
+    /** The page on screen as a fractional index: the track's offset read in pages. */
+    private emitPosition;
+    /** Tells a listener that just subscribed where the track stands. */
+    replayPosition(): void;
+    /** Turns one page (`1` next, `-1` previous, in reading order); at an end the track bounces. */
+    step(direction: 1 | -1): void;
+    /**
+     * Slides to item `target`. A neighbour is one step; a far item is borrowed as the neighbour on its
+     * side and slides in the same way — never a cut or a fade, however far it is.
+     */
+    go(target: number): void;
+    private endTransit;
+    /** Zooms in by a step about `focus` (stage-centre relative), or to fit with `null`. */
+    zoomBy(factor: number | null, focus?: Point): void;
+    /**
+     * Opens from `origin` (a thumbnail's rect and corner radius) or, without one, rises from a
+     * slight shrink while it fades in; the backdrop fades in meanwhile.
+     */
+    open(origin: ViewerOrigin | null, duration: number, done: () => void): void;
+    /**
+     * Closes from wherever the picture is (zoomed, half swiped away) into `origin`, or with a slight
+     * shrink and a fade; the backdrop fades out. The final pose holds until the viewer unmounts.
+     */
+    close(origin: ViewerOrigin | null, duration: number, done: () => void): void;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    /** What a drag that left the slop is, from its direction and the zoom. */
+    private decide;
+    private movePage;
+    private slotsOffsetStart;
+    private movePan;
+    private releasePage;
+    private releasePan;
+    private coastFrom;
+    private releaseDismiss;
+    private tap;
+    /** Zoomed: back to the fit. At the fit: in to fill the stage (at least 2×) about the point. */
+    private doubleTap;
+    private startPinch;
+    private movePinch;
+    private endPinch;
+    private onWheel;
+    private animatePager;
+    private finishPager;
+    /** The page turned: the next one is now current, at rest where the track left it. */
+    private commitStep;
+    private animateZoom;
+    private resetZoom;
+    private resetZoomAnimated;
+    private startTween;
+    private tweenPose;
+    /**
+     * The pose that lays the current picture over `origin`: its box covers the origin's media box
+     * (`object-fit: cover`), cut to the part of it that shows, with that part's corners.
+     */
+    private originPose;
+    private schedule;
+    private tick;
+    /** One axis of a released pan: coasts on its momentum, then springs back inside the limits. */
+    private coastAxis;
+    private current;
+    private slotBox;
+    private limit;
+    private wrap;
+    /** Loop only with three items or more: two would be each other's both neighbours. */
+    private get looping();
+    private canStep;
+    /** The pager offset that shows the page `direction` away. */
+    private pagerFor;
+    /**
+     * Item `index` relative to the current page in pages, or `null` when it is not painted. A
+     * borrowed far page takes the place of the neighbour on its side.
+     */
+    relative(index: number): number | null;
+    private toStage;
+    private setZoomed;
+    private setGesture;
+    private cancelDrag;
+    private listen;
+    private unlisten;
+}
+export {};

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

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { MessageContact, MessageLinkPreview, MessageLocation } from "./MessageCards";
+import { MessageFile } from "./MessageFile";
+import { MessageMedia } from "./MessageMedia";
+import { MessageAuthor, MessageAuthorIcon, MessageAvatar, MessageForwarded, type MessageLabels, MessageMenu, MessageReactions, MessageReply, MessageText } from "./MessageParts";
+import { MessageTyping } from "./MessageTyping";
+import type { MessageDirection, MessagePosition } from "./types";
+export type { MessageAuthorIconProps, MessageAuthorProps, MessageAvatarProps, MessageForwardedLabels, MessageForwardedProps, MessageLabels, MessageMenuProps, MessageReaction, MessageReactionsLabels, MessageReactionsProps, MessageReplyLabels, MessageReplyProps, MessageTextProps, } from "./MessageParts";
+export type { MessageTypingLabels, MessageTypingProps } from "./MessageTyping";
+export type { MessageDirection, MessagePosition, MessageReactionOption, MessageUser, } from "./types";
+/** Delivery of an outgoing message: on its way, sent, read by the recipient, or failed. */
+export type MessageStatus = "sending" | "sent" | "read" | "failed";
+/**
+ * The shell a message stands in, decided by what its content parts declare (`defineMessagePart`):
+ * - `bubble` — a speech bubble with padding and the meta in its corner
+ *   (text, voice, file, contact, location, link preview, a picture with a caption);
+ * - `media` — a picture or an album without a caption is the shape itself: clipped to the
+ *   bubble's radius with no backing, the meta on a dark pill over it, reactions under it;
+ * - `round` — a video message: a circle, no backing, the meta on a pill over it, reactions under it.
+ */
+export type MessageShell = "bubble" | "media" | "round";
+type AsyncEvent<T> = (value: T) => void | Promise<unknown>;
+export type MessageRootProps = Omit<React.HTMLAttributes<HTMLElement>, "role"> & {
+    /** The id of the message: selection, `onNewMessage`, `onRead`, `current`, `Message.Reply target`. */
+    value?: string;
+    /** `incoming` on the start side on a surface fill, `outgoing` on the end side in the accent hue. */
+    direction?: MessageDirection;
+    /**
+     * The place in a run of one author's messages (`Chat.Messages items` sets it): sets the small gap inside a
+     * run and the tail on its last bubble. Default `single`.
+     */
+    position?: MessagePosition;
+    /** When it was sent: a `Date` (shown with `formatTime`) or the text to show. */
+    time?: Date | string;
+    /** Display of a `Date` time. Default «09:05». */
+    formatTime?: (date: Date) => string;
+    /** The text was edited: «изменено» before the time. */
+    edited?: boolean;
+    /** Delivery of an outgoing message: clock → ✓ → ✓✓, or failed with a retry. */
+    status?: MessageStatus;
+    /**
+     * Sends a failed message again (the retry button beside it). A returned promise shows `sending`
+     * until it settles; a rejection leaves it failed.
+     */
+    onRetry?: () => void | Promise<void>;
+    /**
+     * The reader puts or takes back a reaction: a chip of `Message.Reactions`, a double tap (the
+     * chat's quick reaction), `L`, or the reaction bar. A returned promise keeps the chip pending until it
+     * settles; update the reactions when it resolves. Without it reactions are read-only.
+     */
+    onReactionToggle?: AsyncEvent<string>;
+    labels?: Partial<MessageLabels>;
+    ref?: React.Ref<HTMLElement>;
+};
+/**
+ * One message: its parts in order (author, forwarded, reply, content, reactions) in the shell its
+ * content declares (`MessageShell`), the meta in the bottom-end corner. The layout is CSS only:
+ * the bubble fits its content, the meta's spacer closes the last line, and every size change (the
+ * reactions row, a transcript) is a disclosure that glides in layout. The row is a `role="article"`
+ * named «{author}, {time}» (an `option` in selection mode); right click, a long press, Enter or
+ * Shift+F10 open `Message.Menu` where the pointer is; a double tap puts the chat's quick reaction.
+ */
+declare function MessageRoot({ value: valueProp, direction, position, time: timeProp, formatTime, edited, status, onRetry, onReactionToggle, labels: labelsProp, className, style, children, onContextMenu, onKeyDown, onPointerDown, onMouseDown, onClick, onDoubleClick, "aria-label": ariaLabel, ref, ...rest }: MessageRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MessageRoot {
+    var displayName: string;
+}
+export declare const Message: {
+    Root: typeof MessageRoot;
+    Avatar: typeof MessageAvatar;
+    Author: typeof MessageAuthor;
+    AuthorIcon: typeof MessageAuthorIcon;
+    Forwarded: typeof MessageForwarded;
+    Reply: typeof MessageReply;
+    Text: typeof MessageText;
+    Media: typeof MessageMedia;
+    File: typeof MessageFile;
+    Location: typeof MessageLocation;
+    Contact: typeof MessageContact;
+    LinkPreview: typeof MessageLinkPreview;
+    Reactions: typeof MessageReactions;
+    Menu: typeof MessageMenu;
+    Typing: typeof MessageTyping;
+};

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

@@ -0,0 +1,64 @@
+import * as React from "react";
+import type { PaletteColor } from "../../internal/states";
+export type MessageLocationLabels = {
+    /** The name of the map link: `{place}`. */
+    openMap: string;
+    /** The mark of a live location. */
+    live: string;
+};
+export type MessageLocationProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** A map picture of the place (your static map service: the kit ships no map). */
+    src: string;
+    /** Opens the place in a map (a new tab). */
+    href?: string;
+    /** The place («Склад на Складочной»). */
+    title?: string;
+    /** Its address. */
+    address?: string;
+    /** A location shared live: a pulsing pin and a «Трансляция» mark. */
+    live?: boolean;
+    labels?: Partial<MessageLocationLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * A place: a 16 : 9 map picture with a pin, edge to edge at the top of the bubble (its box is
+ * final before the picture loads), then the place and its address.
+ */
+export declare function MessageLocation({ src, href, title, address, live, labels: labelsProp, className, ref, ...rest }: MessageLocationProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageLocation {
+    var displayName: string;
+}
+export type MessageContactProps = Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {
+    name: string;
+    phone?: string;
+    /** The person's photo; without it the initials. */
+    src?: string;
+    /** Hue of the initials. Default `blue`. */
+    color?: PaletteColor;
+    /** Actions under the card: `Button.Root`s («Написать», «Добавить»). */
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** A shared contact: avatar, name and phone, with the actions in a row under them. */
+export declare function MessageContact({ name, phone, src, color, className, children, ref, ...rest }: MessageContactProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageContact {
+    var displayName: string;
+}
+export type MessageLinkPreviewProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    href: string;
+    /** The site's name, in the accent color. */
+    site?: string;
+    title?: string;
+    description?: string;
+    /** The page's picture, full width under the text (16 : 9, its box final before it loads). */
+    image?: string;
+    ref?: React.Ref<HTMLAnchorElement>;
+};
+/**
+ * A card of the page a message links to: site, title, description and picture; the whole card
+ * opens the page. It spans the bubble (at least the card width), long words and URLs wrap.
+ */
+export declare function MessageLinkPreview({ href, site, title, description, image, className, ref, ...rest }: MessageLinkPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageLinkPreview {
+    var displayName: string;
+}

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

@@ -0,0 +1,36 @@
+import type * as React from "react";
+import { type TransferLabels, type TransferProps } from "../../internal/transfer";
+/**
+ * The file strings, and the transfer strings every transferring part shares; `download` (the
+ * link of `href` and the arrow of a `remote` file) takes `{name}`.
+ */
+export type MessageFileLabels = {
+    /** The line under the name while it transfers: `{done}`, `{total}`. */
+    transferred: string;
+} & TransferLabels;
+export type MessageFileProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & TransferProps & {
+    /** The file name, with its extension (the format tile reads it). */
+    name: string;
+    /** Bytes; shown as «1,2 МБ». */
+    fileSize?: number;
+    /** Display of `fileSize`. Default Russian digits with Б · КБ · МБ · ГБ. */
+    formatSize?: (bytes: number) => string;
+    /** Where to get it: the tile becomes the download button. */
+    href?: string;
+    /** A picture of the file (an image, the first page) in the tile instead of the format. */
+    preview?: string;
+    labels?: Partial<MessageFileLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * A document: a round tile with the format (or the file's picture), the name and the size (or
+ * «{done} из {total}», or the failure) beside it. The tile is the file's one action, in one spot:
+ * download, cancel, retry. While the file transfers, failed or is not fetched yet, the shared
+ * transfer disk (`internal/transferDisk`, size `xl`) covers the tile: the cross on the media shade
+ * with the ring of the share, the danger retry, the download arrow. The download of `href` is a
+ * link drawn as a `Button shape="circle"` (`asChild`) over the tile.
+ */
+export declare function MessageFile({ name, fileSize, formatSize, href, preview, transfer, transferProgress: progressProp, transferDirection, onCancel, onRetry, onDownload, labels: labelsProp, className, ref, ...rest }: MessageFileProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageFile {
+    var displayName: string;
+}