prime-ui-kit 0.17.0 → 0.18.0

package/dist/components/index.d.ts

@@ -6,7 +6,7 @@ export type { AccordionContentProps, AccordionHeaderProps, AccordionHeadingLevel
 export { Accordion } from "./accordion/Accordion";
 export type { AvatarFallbackProps, AvatarGroupProps, AvatarImageProps, AvatarOverflowProps, AvatarPresence, AvatarRootProps, AvatarSize, AvatarStatusLabels, AvatarStatusProps, } from "./avatar/Avatar";
 export { Avatar } from "./avatar/Avatar";
-export type { BadgeActionProps, BadgeDotProps, BadgeIconProps, BadgeLabels, BadgeRootProps, } from "./badge/Badge";
+export type { BadgeActionProps, BadgeDotProps, BadgeGroupProps, BadgeIconProps, BadgeLabels, BadgeRootProps, } from "./badge/Badge";
 export { Badge } from "./badge/Badge";
 export type { BannerActionsProps, BannerContentProps, BannerDescriptionProps, BannerIconProps, BannerLabels, BannerRootProps, BannerTitleProps, } from "./banner/Banner";
 export { Banner } from "./banner/Banner";
@@ -82,7 +82,7 @@ export type { LabelDescriptionProps, LabelIconProps, LabelLabels, LabelRootProps
 export { Label } from "./label/Label";
 export type { LinkButtonProps } from "./link-button/LinkButton";
 export { LinkButton } from "./link-button/LinkButton";
-export type { ListItemCountProps, ListItemDescriptionProps, ListItemIconProps, ListItemMetaProps, ListItemProps, ListItemTextProps, ListLabels, ListRootProps, } from "./list/List";
+export type { ListItemActionsProps, ListItemCountProps, ListItemDescriptionProps, ListItemIconProps, ListItemMetaProps, ListItemProps, ListItemTextProps, ListLabels, ListRootProps, } from "./list/List";
 export { List } from "./list/List";
 export type { LoginFormActionsProps, LoginFormBodyProps, LoginFormDescriptionProps, LoginFormFooterProps, LoginFormFormProps, LoginFormHeaderProps, LoginFormLogoProps, LoginFormRootProps, LoginFormTitleProps, } from "./login-form/LoginForm";
 export { LoginForm } from "./login-form/LoginForm";
@@ -94,7 +94,8 @@ export { Message } from "./message/Message";
 export type { MessageContactProps, MessageLinkPreviewProps, MessageLocationLabels, MessageLocationProps, } from "./message/MessageCards";
 export type { MessageFileLabels, MessageFileProps } from "./message/MessageFile";
 export type { MessageMediaProps } from "./message/MessageMedia";
-export type { ModalActionsProps, ModalBodyProps, ModalCloseProps, ModalConfirmProps, ModalContentProps, ModalDescriptionProps, ModalFooterProps, ModalGuardProps, ModalHeaderProps, ModalIconProps, ModalLabels, ModalMetaProps, ModalPlacement, ModalRootProps, ModalTitleProps, ModalTriggerProps, } from "./modal/Modal";
+export type { MessageStickerProps } from "./message/MessageSticker";
+export type { ModalActionsProps, ModalBodyProps, ModalCloseProps, ModalConfirmProps, ModalContentProps, ModalDescriptionProps, ModalFooterProps, ModalGuardProps, ModalHeaderProps, ModalIconProps, ModalLabels, ModalMetaProps, ModalPlacement, ModalRootProps, ModalSectionProps, ModalTitleProps, ModalTriggerProps, } from "./modal/Modal";
 export { Modal } from "./modal/Modal";
 export type { NativeSelectLabels, NativeSelectProps } from "./native-select/NativeSelect";
 export { NativeSelect } from "./native-select/NativeSelect";
@@ -112,6 +113,8 @@ export type { ProgressCircleLabels, ProgressCircleProps, } from "./progress-circ
 export { ProgressCircle } from "./progress-circle/ProgressCircle";
 export type { RadioGroupLabels, RadioGroupProps, RadioLabelProps, RadioRootProps, } from "./radio/Radio";
 export { Radio } from "./radio/Radio";
+export type { RichTextLabels, RichTextProps } from "./rich-text/RichText";
+export { RichText } from "./rich-text/RichText";
 export type { ScrollContainerAxis, ScrollContainerEdges, ScrollContainerProps, } from "./scroll-container/ScrollContainer";
 export { ScrollContainer } from "./scroll-container/ScrollContainer";
 export type { SegmentedControlCountProps, SegmentedControlDescriptionProps, SegmentedControlIconProps, SegmentedControlItemProps, SegmentedControlLabelProps, SegmentedControlLabels, SegmentedControlRootProps, } from "./segmented-control/SegmentedControl";

package/dist/components/input/Input.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { HintTone } from "../hint/Hint";
 import { type FieldActionButtonProps } from "../../internal/FieldAction";
 import { type FieldCommitHandler } from "../../internal/FieldCommit";
 import { type FieldFocusRingProps, type FieldRootDomProps } from "../../internal/FieldFrame";
@@ -32,6 +33,11 @@ export type InputLabels = {
     strengthHard: string;
 };
 export declare const INPUT_LABELS: InputLabels;
+/**
+ * Inside `Input.Wrapper`: a Select there drops its own frame and draws its trigger as the box's
+ * start segment, so the pick and the text read as one field.
+ */
+export declare const InputSegmentContext: React.Context<boolean>;
 export type InputRootProps = FieldRootDomProps & FieldFocusRingProps & {
     /**
      * Tier for height, padding, radius, text, label and hint. Without it the field takes the tier of its host (LoginForm, Popover, a panel with a size), else `m`. Also provided to nested controls via the control-size context.
@@ -57,6 +63,10 @@ export type InputRootProps = FieldRootDomProps & FieldFocusRingProps & {
      * Help text under the field. Hidden while `error` is shown.
      */
     hint?: React.ReactNode;
+    /**
+     * Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint.
+     */
+    hintTone?: HintTone;
     /**
      * Error message in the hint slot; implies `invalid`.
      */
@@ -85,6 +95,18 @@ export type InputRootProps = FieldRootDomProps & FieldFocusRingProps & {
      * Inline save: fires with a changed value on blur and Enter; Escape reverts. Return a Promise: the field shows a spinner and stays editable; a rejection restores the value — show why through `error`.
      */
     onCommit?: FieldCommitHandler;
+    /**
+     * Suggestions for free text (a combobox): a list under the box shows those containing the text; a pick goes into the field as typing would. Any text stays allowed; a value from a list only is `Select`.
+     */
+    suggestions?: readonly string[];
+    /**
+     * Escape closes the `suggestions` list; the text and the focus stay in the field.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * A press outside the field and the `suggestions` list closes the list.
+     */
+    closeOnOutsideClick?: boolean;
     /**
      * Built-in strings, see Labels.
      */
@@ -94,7 +116,7 @@ export type InputRootProps = FieldRootDomProps & FieldFocusRingProps & {
      */
     children: React.ReactNode;
 };
-declare function InputRoot({ size: sizeProp, invalid, focusRing, label, required, optional, hint, error, counter, reserveSupportRow, id, strength, getStrength, onCommit, labels: labelsProp, children, className, ...rest }: InputRootProps): import("react/jsx-runtime").JSX.Element;
+declare function InputRoot({ size: sizeProp, invalid, focusRing, label, required, optional, hint, hintTone, error, counter, reserveSupportRow, id, strength, getStrength, onCommit, suggestions, closeOnEscape, closeOnOutsideClick, labels: labelsProp, children, className, ...rest }: InputRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputRoot {
     var displayName: string;
 }
@@ -105,7 +127,7 @@ export type InputWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
 };
-declare function InputWrapper({ children, className, ...rest }: InputWrapperProps): import("react/jsx-runtime").JSX.Element;
+declare function InputWrapper({ children, className, ref, ...rest }: InputWrapperProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputWrapper {
     var displayName: string;
 }
@@ -117,7 +139,7 @@ export type InputFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>,
     ref?: React.Ref<HTMLInputElement>;
 };
 /** The `<input>`; its id comes from `Input.Root` so the label, hint and error stay linked. */
-declare function InputField({ className, "aria-describedby": ariaDescribedBy, required, disabled: disabledProp, type, onChange, onValueChange, onFocus, onBlur, onKeyDown, ref, ...rest }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function InputField({ className, "aria-describedby": ariaDescribedBy, required, disabled: disabledProp, type, onChange, onValueChange, onFocus, onBlur, onKeyDown, onClick, ref, ...rest }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputField {
     var displayName: string;
 }
@@ -147,7 +169,7 @@ export type InputAffixProps = Omit<React.HTMLAttributes<HTMLDivElement>, "childr
     children: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
 };
-declare function InputAffix({ side, children, className, ...rest }: InputAffixProps): import("react/jsx-runtime").JSX.Element;
+declare function InputAffix({ side, children, className, id, "aria-label": spokenText, ...rest }: InputAffixProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputAffix {
     var displayName: string;
 }
@@ -162,7 +184,7 @@ export type InputInlineAffixProps = Omit<React.HTMLAttributes<HTMLSpanElement>,
     children: React.ReactNode;
     ref?: React.Ref<HTMLSpanElement>;
 };
-declare function InputInlineAffix({ side, children, className, ...rest }: InputInlineAffixProps): import("react/jsx-runtime").JSX.Element;
+declare function InputInlineAffix({ side, children, className, id, "aria-label": spokenText, ...rest }: InputInlineAffixProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputInlineAffix {
     var displayName: string;
 }

package/dist/components/input/inputSuggestions.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { type Store } from "../../internal/listbox";
+import type { ControlSize } from "../../internal/states";
+/** The suggestion list of a free-text field (`Input.Root suggestions`): a combobox. */
+export type InputSuggestions = {
+    listboxId: string;
+    /** The name of the list: the field's label. */
+    labelledBy: string | undefined;
+    closeOnEscape: boolean;
+    closeOnOutsideClick: boolean;
+    /** The field box: the panel's anchor, as wide as it. */
+    anchorRef: React.RefObject<HTMLDivElement | null>;
+    matches: string[];
+    query: string;
+    shown: boolean;
+    highlight: Store<string | undefined>;
+    setOpen: (open: boolean) => void;
+    pick: (item: string) => void;
+    /** The input's combobox attributes and handlers, run after the consumer's. */
+    onInput: (value: string) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onClick: () => void;
+    onBlur: () => void;
+};
+/**
+ * Suggestions under a free-text field: the field keeps the focus and its text is the value; the
+ * list shows the suggestions that contain the text, the arrows move a virtual highlight
+ * (`aria-activedescendant`), Enter or a press puts the highlighted one into the field (as typing
+ * would), Escape closes the list. `null` without suggestions.
+ */
+export declare function useInputSuggestions(items: readonly string[] | undefined, inputRef: React.RefObject<HTMLInputElement | null>, listboxId: string, labelledBy: string | undefined, { closeOnEscape, closeOnOutsideClick }: {
+    closeOnEscape: boolean;
+    closeOnOutsideClick: boolean;
+}): InputSuggestions | null;
+/** The floating list of an `Input.Root` with `suggestions`, anchored to the field box. */
+export declare function InputSuggestionList({ suggest, size, }: {
+    suggest: InputSuggestions;
+    size: ControlSize;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/kanban/Kanban.d.ts

@@ -126,9 +126,9 @@ export type KanbanRootProps<T> = Omit<React.HTMLAttributes<HTMLDivElement>, "chi
      */
     renderColumnActions?: (column: KanbanColumn) => React.ReactNode;
     /**
-     * The meta line under a column's title and description: the stage's figures («12 сделок · 4,8 млн ₽»). Like `description`, it describes the column's list.
+     * The meta under a column's title and description: the stage's figures («12 сделок · 4,8 млн ₽»); an array is a line per entry, in order. Describes the column's list.
      */
-    renderColumnMeta?: (column: KanbanColumn) => React.ReactNode;
+    renderColumnMeta?: (column: KanbanColumn) => React.ReactNode | readonly React.ReactNode[];
     /**
      * A workflow rule: refuses card `id` in column `columnId` — `false`, or a string that says why (spoken and shown under the carried card). The column turns `danger` before the release.
      */
@@ -151,11 +151,6 @@ export type KanbanRootProps<T> = Omit<React.HTMLAttributes<HTMLDivElement>, "chi
     labels?: Partial<KanbanLabels>;
     ref?: React.Ref<HTMLDivElement>;
 };
-/**
- * A board of columns: cards move within and between columns by pointer, touch (a hold) and
- * keyboard (Alt + arrows, Dnd's linked lists). Its `Dnd.Root` joins a drag session already above
- * it.
- */
 declare function KanbanRoot<T>(props: KanbanRootProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace KanbanRoot {
     var displayName: string;
@@ -206,8 +201,8 @@ declare namespace KanbanItemDescription {
 export type KanbanItemBadgesProps = React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };
-/** A wrapping row of `Badge`s: labels, priority. */
-declare function KanbanItemBadges({ className, ...rest }: KanbanItemBadgesProps): import("react/jsx-runtime").JSX.Element;
+/** A wrapping row of `Badge`s: labels, priority (a `Badge.Group`). */
+declare function KanbanItemBadges(props: KanbanItemBadgesProps): import("react/jsx-runtime").JSX.Element;
 declare namespace KanbanItemBadges {
     var displayName: string;
 }

package/dist/components/list/List.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ControlSize, PaletteColor } from "../../internal/states";
+import { type ControlSize, type PaletteColor } from "../../internal/states";
 export type ListLabels = {
     /** `aria-label` of a row's drag handle (`onReorder`); `{label}` is the row's text. */
     reorderItem: string;
@@ -35,14 +35,15 @@ declare namespace ListRoot {
 }
 export type ListItemIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     /**
-     * An `Avatar.Root` or an `Icon`.
+     * An `Avatar.Root`, an `Icon`, or a `Badge.Dot` with `color` (a stage, a project): the large dot.
      */
     children: React.ReactNode;
     ref?: React.Ref<HTMLSpanElement>;
 };
 /**
- * The leading picture of a row: an avatar of the row tier, or an icon. After the text it is a
- * quiet trailing glyph. Decorative: the text names the row.
+ * The leading picture of a row: an avatar of the row tier, an icon, or a colour dot
+ * (`Badge.Dot color`) in a box as wide as an icon, so the rows' text lines up. After the text it is
+ * a quiet trailing glyph. Decorative: the text names the row.
  */
 declare function ListItemIcon({ className, children, ...rest }: ListItemIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ListItemIcon {
@@ -88,6 +89,18 @@ declare function ListItemCount({ color, className, ...rest }: ListItemCountProps
 declare namespace ListItemCount {
     var displayName: string;
 }
+export type ListItemActionsProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The row's own controls (a Switch, a Dropdown with its icon Button, an icon Button): at the end of
+ * the row, beside its button or link and never inside it, one tier below the row. The row's fills
+ * cover them.
+ */
+declare function ListItemActions({ className, ...rest }: ListItemActionsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ListItemActions {
+    var displayName: string;
+}
 type ListItemOwnProps = {
     /**
      * Stable id of the row; required in a reorderable list (`onReorder` reports it).
@@ -106,7 +119,7 @@ type ListItemOwnProps = {
      */
     asChild?: boolean;
     /**
-     * `List.ItemIcon`, `List.ItemText`, `List.ItemDescription`, `List.ItemMeta`, `List.ItemCount`; loose text becomes the text line.
+     * `List.ItemIcon`, `List.ItemText`, `List.ItemDescription`, `List.ItemMeta`, `List.ItemCount`, `List.ItemActions`; loose text becomes the text line.
      */
     children?: React.ReactNode;
 };
@@ -138,5 +151,6 @@ export declare const List: {
     ItemDescription: typeof ListItemDescription;
     ItemMeta: typeof ListItemMeta;
     ItemCount: typeof ListItemCount;
+    ItemActions: typeof ListItemActions;
 };
 export {};

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

@@ -4,6 +4,7 @@ import { MessageContact, MessageLinkPreview, MessageLocation } from "./MessageCa
 import { MessageFile } from "./MessageFile";
 import { MessageMedia } from "./MessageMedia";
 import { MessageAuthor, MessageAuthorIcon, MessageAvatar, MessageForwarded, type MessageLabels, MessageMenu, MessageReactions, MessageReply, MessageText } from "./MessageParts";
+import { MessageSticker } from "./MessageSticker";
 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";
@@ -50,9 +51,13 @@ export type MessageRootProps = Omit<React.HTMLAttributes<HTMLElement>, "role"> &
      */
     time?: Date | string;
     /**
-     * Display of a `Date` time.
+     * The IANA zone the time is read in (`"Asia/Vladivostok"`): a profile's zone, not the browser's.
      */
-    formatTime?: (date: Date) => string;
+    timeZone?: string;
+    /**
+     * Display of a `Date` time; gets the `timeZone` in force.
+     */
+    formatTime?: (date: Date, timeZone?: string) => string;
     /**
      * The text was edited: `labels.edited` before the time.
      */
@@ -61,6 +66,10 @@ export type MessageRootProps = Omit<React.HTMLAttributes<HTMLElement>, "role"> &
      * Delivery of an outgoing message: a clock, one check, two checks (accent), or a danger mark; the glyphs cross-fade from one state to the next. Named for assistive tech by `labels`.
      */
     status?: MessageStatus;
+    /**
+     * A picture of the message outside a chat (a bot's settings): no menu, reactions, retry or row focus, `Message.Actions` inert; links and players still work.
+     */
+    preview?: boolean;
     /**
      * Sends a failed message again: a ghost danger button beside the bubble. A returned promise shows `sending` until it settles; a rejection leaves it failed.
      */
@@ -82,8 +91,10 @@ export type MessageRootProps = Omit<React.HTMLAttributes<HTMLElement>, "role"> &
  * 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.
+ * A `preview` is the same message as a picture of itself: no menu, reactions, retry or row focus,
+ * its inline keyboard inert; its content (links, players, spoilers) still works.
  */
-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 function MessageRoot({ value: valueProp, direction, position, time: timeProp, timeZone: timeZoneProp, formatTime, edited, status, preview, 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;
 }
@@ -100,6 +111,7 @@ export declare const Message: {
     Location: typeof MessageLocation;
     Contact: typeof MessageContact;
     LinkPreview: typeof MessageLinkPreview;
+    Sticker: typeof MessageSticker;
     Reactions: typeof MessageReactions;
     Actions: typeof MessageActions;
     Menu: typeof MessageMenu;

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+export type MessageStickerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "role" | "aria-label"> & {
+    /**
+     * A still or animated picture (webp, gif, apng), decoded before it shows. Without it the children are the sticker.
+     */
+    src?: string;
+    /**
+     * Your player in the children is not ready yet: the `Skeleton` stays over the box.
+     */
+    loading?: boolean;
+    /**
+     * The sticker's name («Стикер «Класс»», or its emoji); shown in its box when `src` fails.
+     */
+    "aria-label": string;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * A sticker: a square picture with no bubble, the meta on a pill over its corner. The kit draws a
+ * still or animated image from `src` (webp, gif, apng); any other format — a Lottie (.tgs) or a
+ * video sticker — is the consumer's own player as children, which the sticker sizes to its box
+ * (the kit has no runtime dependencies). A `Skeleton` holds the box until the picture is decoded
+ * or `loading` ends, then fades out; a picture that fails shows its name instead.
+ */
+export declare function MessageSticker({ src, loading, className, children, "aria-label": ariaLabel, ref, ...rest }: MessageStickerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageSticker {
+    var displayName: string;
+}

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

@@ -1,2 +1,5 @@
-/** «09:05»: hours and minutes, 24-hour — the default `Message.Root formatTime`. */
-export declare function formatMessageTime(date: Date): string;
+/**
+ * «09:05»: hours and minutes, 24-hour, in `timeZone` or the browser's zone — the default
+ * `Message.Root formatTime`.
+ */
+export declare function formatMessageTime(date: Date, timeZone?: string): string;

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

@@ -1,8 +1,8 @@
 import { DialogGuard } from "../../internal/overlay/DialogGuard";
-import { DialogActions, DialogBody, DialogClose, DialogConfirm, DialogDescription, DialogFooter, DialogHeader, DialogIcon, DialogMeta, DialogTitle, DialogTrigger } from "../../internal/overlay/DialogParts";
+import { DialogActions, DialogBody, DialogClose, DialogConfirm, DialogDescription, DialogFooter, DialogHeader, DialogIcon, DialogMeta, DialogSection, DialogTitle, DialogTrigger } from "../../internal/overlay/DialogParts";
 import { ModalContent, ModalRoot } from "../../internal/overlay/ModalDialog";
 export type { DialogGuardProps as ModalGuardProps } from "../../internal/overlay/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 "../../internal/overlay/DialogParts";
+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, DialogSectionProps as ModalSectionProps, DialogTitleProps as ModalTitleProps, DialogTriggerProps as ModalTriggerProps, } from "../../internal/overlay/DialogParts";
 export type { ModalContentProps, ModalLabels, ModalPlacement, ModalRootProps, } from "../../internal/overlay/ModalDialog";
 export declare const Modal: {
     Root: typeof ModalRoot;
@@ -14,6 +14,7 @@ export declare const Modal: {
     Description: typeof DialogDescription;
     Actions: typeof DialogActions;
     Body: typeof DialogBody;
+    Section: typeof DialogSection;
     Footer: typeof DialogFooter;
     Meta: typeof DialogMeta;
     Close: typeof DialogClose;

package/dist/components/native-select/NativeSelect.d.ts

@@ -37,7 +37,7 @@ export type NativeSelectProps = FieldFrameProps & FieldFocusRingProps & Omit<Rea
  * The system `<select>` in the field look: the OS picker opens on touch devices. Options are
  * plain `<option>` / `<optgroup>` elements.
  */
-export declare function NativeSelect({ size: sizeProp, label, required, optional, hint, error, invalid, focusRing, disabled: disabledProp, placeholder, id, value, defaultValue, onChange, onValueChange, labels: labelsProp, className, children, "aria-describedby": ariaDescribedBy, ...rest }: NativeSelectProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function NativeSelect({ size: sizeProp, label, required, optional, hint, hintTone, error, invalid, focusRing, disabled: disabledProp, placeholder, id, value, defaultValue, onChange, onValueChange, labels: labelsProp, className, children, "aria-describedby": ariaDescribedBy, ...rest }: NativeSelectProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export declare namespace NativeSelect {
     var displayName: string;
 }

package/dist/components/radio/Radio.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { HintTone } from "../hint/Hint";
 import { type ChoiceLabelProps } from "../../internal/ChoiceField";
 import { type FieldRootDomProps } from "../../internal/FieldFrame";
 import type { ControlSize } from "../../internal/states";
@@ -48,6 +49,10 @@ export type RadioGroupProps = Omit<FieldRootDomProps, "dir"> & {
      * Help text under the options. Hidden while `error` is shown.
      */
     hint?: React.ReactNode;
+    /**
+     * Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint.
+     */
+    hintTone?: HintTone;
     /**
      * Error message under the options; implies `invalid`.
      */
@@ -77,7 +82,7 @@ export type RadioGroupProps = Omit<FieldRootDomProps, "dir"> & {
  * The field: label · radiogroup · hint or error. `className`, `ref` and the rest go to the frame,
  * `id` and the `aria-label*` / `aria-describedby` names to the radiogroup.
  */
-declare function RadioGroup({ id, value: valueProp, defaultValue, onValueChange, name: nameProp, size: sizeProp, disabled: disabledProp, label, required, optional, hint, error, invalid, orientation, labels: labelsProp, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, children, ...rest }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroup({ id, value: valueProp, defaultValue, onValueChange, name: nameProp, size: sizeProp, disabled: disabledProp, label, required, optional, hint, hintTone, error, invalid, orientation, labels: labelsProp, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, children, ...rest }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadioGroup {
     var displayName: string;
 }
@@ -90,13 +95,17 @@ export type RadioRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "
      * Description under the option text, linked through `aria-describedby`.
      */
     hint?: React.ReactNode;
+    /**
+     * Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint.
+     */
+    hintTone?: HintTone;
     /**
      * `Radio.Label`. Without it only the circle renders — give the root an `aria-label`.
      */
     children?: React.ReactNode;
     ref?: React.Ref<HTMLInputElement>;
 };
-declare function RadioRoot({ id, value, hint, disabled: disabledProp, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: RadioRootProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioRoot({ id, value, hint, hintTone, disabled: disabledProp, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: RadioRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadioRoot {
     var displayName: string;
 }

package/dist/components/rich-text/RichText.d.ts

@@ -0,0 +1,23 @@
+import type * as React from "react";
+export type RichTextLabels = {
+    /** The name of a masked `||spoiler||` until it is revealed. */
+    spoiler: string;
+};
+export declare const RICH_TEXT_LABELS: RichTextLabels;
+export type RichTextProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /**
+     * The source: `**bold**`, `_italic_`, `~~strike~~`, `||spoiler||`, inline and fenced code, links (`[label]` then the address in parentheses), bare URLs, `> ` quotes; line breaks are kept.
+     */
+    children: string;
+    /**
+     * Built-in strings, see Labels.
+     */
+    labels?: Partial<RichTextLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * Text in the chat's Markdown subset outside a message (a bot's welcome text, a template, a
+ * comment): bold, italic, strike, spoiler, inline and fenced code, links, quotes, kept line breaks —
+ * the same rendering as `Message.Text`, as React elements, never HTML. Takes the type of its host.
+ */
+export declare function RichText({ children, labels: labelsProp, className, ...rest }: RichTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/scroll-container/ScrollContainer.d.ts

@@ -33,7 +33,7 @@ export type ScrollContainerProps = React.HTMLAttributes<HTMLElement> & {
      */
     lock?: boolean;
     /**
-     * Scrolling comes to rest on the start of a child: `true` near one (strips of tiles and cards), `"mandatory"` always on one (board columns, a carousel). A Dnd drag inside turns it off; not with `anchor="end"`.
+     * Once a scroll ends, the region glides to the start of a child: `true` near one (strips of tiles), `"mandatory"` always (board columns, a carousel). Native scrolling meanwhile; any input stops the glide.
      */
     snap?: boolean | "mandatory";
     /**

package/dist/components/scroll-container/scrollGlide.d.ts

@@ -0,0 +1,26 @@
+export type ScrollAxis = "x" | "y";
+/** Distance from the start along `axis`, whatever the direction (RTL `scrollLeft` is negative). */
+export declare function scrollPosition(node: HTMLElement, axis: ScrollAxis): number;
+export declare function scrollMax(node: HTMLElement, axis: ScrollAxis): number;
+/**
+ * The positions the region comes to rest at along `axis` (distance from its start): every element
+ * within `SNAP_DEPTH` levels that has a `scroll-snap-align` on that axis, clamped to the range and
+ * clear of the region's `scroll-padding`.
+ */
+export declare function restPoints(node: HTMLElement, axis: ScrollAxis): number[];
+export type Glide = {
+    /** Glides `axis` to `to` on the kit's frames (instant under reduced motion). */
+    to: (axis: ScrollAxis, to: number) => void;
+    /** Stops where it is: the person takes over. */
+    stop: () => void;
+    /** Where a glide on `axis` is heading; `null` when none is. */
+    target: (axis: ScrollAxis) => number | null;
+    /** Whether a scroll event at this moment is the glide's own. */
+    owns: () => boolean;
+};
+/**
+ * A scroll glide on animation frames, never a smooth `scrollTo`: an engine finishes that against
+ * the person's input, while this stops the moment they take over. A new target retargets from where
+ * the glide is.
+ */
+export declare function createGlide(node: HTMLElement): Glide;

package/dist/components/scroll-container/useScrollMotion.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export type ScrollMotionOptions = {
+    axis: "vertical" | "horizontal" | "both";
+    /** Settle on a rest point once a scroll ends: near one, or always. */
+    snap: "proximity" | "mandatory" | null;
+    /** Nothing the person does moves the region: no wheel glide, no settling. */
+    lock: boolean;
+};
+/**
+ * How a ScrollContainer moves beyond the browser's own scrolling, which it never replaces: the
+ * trackpad, touch, the scrollbar and the keys scroll natively, momentum included.
+ *
+ * - Snapping (`snap`): once a scroll ends (no movement for a moment, nothing held), the region
+ *   glides to the nearest rest point — the start of a child with a `scroll-snap-align`. CSS scroll
+ *   snapping is not used: an engine snaps during the gesture, damps the trackpad's momentum and
+ *   pulls a scroll back to merged rest points at the end.
+ * - A mouse wheel over a strip that scrolls only sideways (`axis="horizontal"`) scrolls it — a
+ *   snapping strip a rest point per notch, a free one by the wheel's distance. A trackpad, Shift
+ *   + wheel, a gesture that began outside (it keeps scrolling the page) and a strip at its edge
+ *   (the wheel chains to the page) stay native.
+ * - Every glide runs on the kit's frames and stops the moment the person takes over (a wheel,
+ *   touch, press or key); each notch retargets from where the glide is heading, so a turn the
+ *   other way goes back mid-glide.
+ */
+export declare function useScrollMotion(ref: React.RefObject<HTMLElement | null>, { axis, snap, lock }: ScrollMotionOptions): void;

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -56,7 +56,7 @@ export type SegmentedControlRootProps = Omit<FieldRootDomProps, "dir"> & FieldFr
  * The field: label · radiogroup track · hint or error. `className`, `ref` and the rest go to the
  * frame; `id`, `onKeyDown` and the `aria-label*` / `aria-describedby` names to the radiogroup.
  */
-declare function SegmentedControlRoot({ value, defaultValue, onValueChange, disabled: disabledProp, size: sizeProp, fullWidth, label, required, optional, hint, error, invalid, reserveSupportRow, id, labels: labelsProp, children, className, onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: SegmentedControlRootProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControlRoot({ value, defaultValue, onValueChange, disabled: disabledProp, size: sizeProp, fullWidth, label, required, optional, hint, hintTone, error, invalid, reserveSupportRow, id, labels: labelsProp, children, className, onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: SegmentedControlRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SegmentedControlRoot {
     var displayName: string;
 }

package/dist/components/select/selectContext.d.ts

@@ -58,5 +58,12 @@ export type SelectContextValue = {
     describedBy: string | undefined;
     triggerRef: React.RefObject<HTMLButtonElement | null>;
     labels: SelectLabels;
+    /**
+     * The select is the start segment of a field box (`Input.Wrapper`): its trigger is a segment
+     * named by the root's `aria-label` and the picked value.
+     */
+    segment: {
+        label: string | undefined;
+    } | null;
 };
 export declare const SelectProvider: React.Provider<SelectContextValue | null>, useSelectContext: (part?: string) => SelectContextValue;

package/dist/components/slider/Slider.d.ts

@@ -88,4 +88,4 @@ export type SliderProps = FieldRootDomProps & FieldFrameProps & {
  * with a glass thumb, then hint or error. `className`, `ref` and the rest go to the frame, `id`
  * and `aria-label` to the range input.
  */
-export declare function Slider({ value: valueProp, defaultValue, onValueChange, onCommit, name, min, max, step, disabled: disabledProp, invalid, label, required, optional, hint, error, showValue, formatValue, size: sizeProp, tone, orientation, id, className, style, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slider({ value: valueProp, defaultValue, onValueChange, onCommit, name, min, max, step, disabled: disabledProp, invalid, label, required, optional, hint, hintTone, error, showValue, formatValue, size: sizeProp, tone, orientation, id, className, style, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/switch/Switch.d.ts

@@ -1,4 +1,5 @@
 import type * as React from "react";
+import type { HintTone } from "../hint/Hint";
 import { type ChoiceLabelProps } from "../../internal/ChoiceField";
 import type { ControlSize } from "../../internal/states";
 export type SwitchLabels = {
@@ -31,6 +32,10 @@ export type SwitchRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>,
      * Help text under the label text. Hidden while `error` is shown.
      */
     hint?: React.ReactNode;
+    /**
+     * Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint.
+     */
+    hintTone?: HintTone;
     /**
      * Error message in the hint slot; implies `invalid`.
      */
@@ -53,7 +58,7 @@ export type SwitchRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>,
     children?: React.ReactNode;
     ref?: React.Ref<HTMLInputElement>;
 };
-declare function SwitchRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, loading, invalid, hint, error, size: sizeProp, optional, labels: labelsProp, disabled: disabledProp, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: SwitchRootProps): import("react/jsx-runtime").JSX.Element;
+declare function SwitchRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, loading, invalid, hint, hintTone, error, size: sizeProp, optional, labels: labelsProp, disabled: disabledProp, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: SwitchRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SwitchRoot {
     var displayName: string;
 }

package/dist/components/tag-select/TagSelect.d.ts

@@ -142,7 +142,7 @@ export type TagSelectProps = FieldRootDomProps & FieldFrameProps & FieldFocusRin
  * A multi-value field shown as tag chips: pick from a list, type to filter, create new values.
  * At rest one row (extra chips fold into «+N»); focused or open it shows every chip.
  */
-export declare function TagSelect({ options, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, creatable, onCreate, fallbackColor, onOptionUpdate, onOptionDelete, disabled: disabledProp, name, placeholder, invalid: invalidProp, focusRing, size: sizeProp, label, required, optional, hint, error, id: idProp, labels: labelsProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: TagSelectProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function TagSelect({ options, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, creatable, onCreate, fallbackColor, onOptionUpdate, onOptionDelete, disabled: disabledProp, name, placeholder, invalid: invalidProp, focusRing, size: sizeProp, label, required, optional, hint, hintTone, error, id: idProp, labels: labelsProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: TagSelectProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export declare namespace TagSelect {
     var displayName: string;
 }

package/dist/components/textarea/Textarea.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { HintTone } from "../hint/Hint";
 import { type FieldActionButtonProps } from "../../internal/FieldAction";
 import { type FieldCommitHandler } from "../../internal/FieldCommit";
 import { type FieldFocusRingProps } from "../../internal/FieldFrame";
@@ -52,6 +53,10 @@ export type TextareaRootProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
      * Help text under the field. Hidden while `error` is shown.
      */
     hint?: React.ReactNode;
+    /**
+     * Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint.
+     */
+    hintTone?: HintTone;
     /**
      * Error message in the hint slot; implies `invalid`.
      */
@@ -95,7 +100,7 @@ export type TextareaRootProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
  * A multi-line field. `className` goes to the field frame, `id`, `ref` and the native attributes
  * to the `<textarea>` (it has no `Field` part).
  */
-declare function TextareaRoot({ id, className, size: sizeProp, invalid, focusRing, label, required, optional, hint, error, counter, reserveSupportRow, autoResize, rows, maxRows, disabled: disabledProp, readOnly, value, onInput, onChange, onValueChange, onFocus, onBlur, onKeyDown, onSelect, onCommit, formatting, labels: labelsProp, "aria-describedby": ariaDescribedBy, children, ref, ...rest }: TextareaRootProps): import("react/jsx-runtime").JSX.Element;
+declare function TextareaRoot({ id, className, size: sizeProp, invalid, focusRing, label, required, optional, hint, hintTone, error, counter, reserveSupportRow, autoResize, rows, maxRows, disabled: disabledProp, readOnly, value, onInput, onChange, onValueChange, onFocus, onBlur, onKeyDown, onSelect, onCommit, formatting, labels: labelsProp, "aria-describedby": ariaDescribedBy, children, ref, ...rest }: TextareaRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TextareaRoot {
     var displayName: string;
 }