prime-ui-kit 0.17.0 → 0.19.0

package/dist/components/data-table/StateRows.d.ts

@@ -10,6 +10,8 @@ type StateRowsProps<Row> = {
     expandEnabled: boolean;
     /** A leading column of row handles (`onReorder`). */
     reorderable?: boolean;
+    /** A trailing cell under the head's column chooser. */
+    menuCell: boolean;
     loadError: React.ReactNode;
     empty: React.ReactNode;
     emptyLabel: string;
@@ -20,5 +22,5 @@ type StateRowsProps<Row> = {
  * in a sticky box of the visible width, so a wide table centres it in the viewport, not across
  * every column.
  */
-export declare function StateRows<Row>({ state, columns, size, totalColumns, selectable, expandEnabled, reorderable, loadError, empty, emptyLabel, skeletonRows, }: StateRowsProps<Row>): import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
+export declare function StateRows<Row>({ state, columns, size, totalColumns, selectable, expandEnabled, reorderable, menuCell, loadError, empty, emptyLabel, skeletonRows, }: StateRowsProps<Row>): import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
 export {};

package/dist/components/data-table/types.d.ts

@@ -32,6 +32,11 @@ export type DataTableColumn<Row> = {
      * empty, the `<th>` keeps `header` as its name.
      */
     hideHeader?: boolean;
+    /**
+     * What the column means, for a header that cannot say it all: an info glyph after the header
+     * opens it as a tooltip, and the header cell is described by it (`aria-describedby`).
+     */
+    description?: string;
     width?: string;
     minWidth?: string;
     maxWidth?: string;

package/dist/components/digit-input/DigitInput.d.ts

@@ -83,4 +83,4 @@ export type DigitInputProps = FieldRootDomProps & FieldFrameProps & FieldFocusRi
     labels?: Partial<DigitInputLabels>;
 };
 /** A one-time code or PIN split into cells, with the field label, hint and error. */
-export declare function DigitInput({ length, size: sizeProp, fullWidth, name, groupSize, mask, autoFocus, value: valueProp, defaultValue, onValueChange, onComplete, disabled: disabledProp, invalid, success, focusRing, label, required, optional, hint, error, id, "aria-describedby": ariaDescribedBy, labels: labelsProp, className, ...rest }: DigitInputProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function DigitInput({ length, size: sizeProp, fullWidth, name, groupSize, mask, autoFocus, value: valueProp, defaultValue, onValueChange, onComplete, disabled: disabledProp, invalid, success, focusRing, label, required, optional, hint, hintTone, error, id, "aria-describedby": ariaDescribedBy, labels: labelsProp, className, ...rest }: DigitInputProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/dist/components/drawer/Drawer.d.ts

@@ -1,9 +1,9 @@
 import type * as React from "react";
 import { DialogGuard } from "../../internal/overlay/DialogGuard";
-import { DialogActions, DialogBody, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogIcon, type DialogLabels, DialogMeta, DialogTitle, DialogTrigger } from "../../internal/overlay/DialogParts";
+import { DialogActions, DialogBody, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogIcon, type DialogLabels, DialogMeta, DialogSection, DialogTitle, DialogTrigger } from "../../internal/overlay/DialogParts";
 import { type ControlSize } from "../../internal/states";
 export type { DialogGuardProps as DrawerGuardProps } from "../../internal/overlay/DialogGuard";
-export type { DialogActionsProps as DrawerActionsProps, DialogBodyProps as DrawerBodyProps, DialogCloseProps as DrawerCloseProps, DialogDescriptionProps as DrawerDescriptionProps, DialogFooterProps as DrawerFooterProps, DialogHeaderProps as DrawerHeaderProps, DialogIconProps as DrawerIconProps, DialogMetaProps as DrawerMetaProps, DialogTitleProps as DrawerTitleProps, DialogTriggerProps as DrawerTriggerProps, } from "../../internal/overlay/DialogParts";
+export type { DialogActionsProps as DrawerActionsProps, DialogBodyProps as DrawerBodyProps, DialogCloseProps as DrawerCloseProps, DialogDescriptionProps as DrawerDescriptionProps, DialogFooterProps as DrawerFooterProps, DialogHeaderProps as DrawerHeaderProps, DialogIconProps as DrawerIconProps, DialogMetaProps as DrawerMetaProps, DialogSectionProps as DrawerSectionProps, DialogTitleProps as DrawerTitleProps, DialogTriggerProps as DrawerTriggerProps, } from "../../internal/overlay/DialogParts";
 export type DrawerSide = "left" | "right";
 export type DrawerLabels = DialogLabels;
 export type DrawerRootProps = {
@@ -69,6 +69,7 @@ export declare const Drawer: {
     Description: typeof DialogDescription;
     Actions: typeof DialogActions;
     Body: typeof DialogBody;
+    Section: typeof DialogSection;
     Footer: typeof DialogFooter;
     Meta: typeof DialogMeta;
     Close: typeof DialogClose;

package/dist/components/field-list/FieldList.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { HintTone } from "../hint/Hint";
 import { type FieldRootDomProps } from "../../internal/FieldFrame";
 import type { ControlSize } from "../../internal/states";
 export type FieldListLabels = {
@@ -10,20 +11,23 @@ export type FieldListLabels = {
     row: string;
     /** Name of a row with `getLabel` text; `{label}` is that text. */
     namedRow: string;
-    /** Spoken name of the lock on a `getLocked` row of a list without `reorderable`. */
-    locked: string;
+    /** Why the remove button of a `getLocked` row is off: its tooltip and description. */
+    lockedReason: string;
     /** Text beside the disabled add button once the list holds `max` rows; `{max}` is the limit. */
     maxReached: string;
+    /** Name of the totals row (`renderTotals`), shown in its first cell when that has no total. */
+    totals: string;
 };
 export declare const FIELD_LIST_LABELS: FieldListLabels;
 /** Width of a column: the same track in the heading row and in every row. */
-export type FieldListColumnWidth = "fill" | "compact" | "s" | "m";
+export type FieldListColumnWidth = "fill" | "compact" | "xs" | "s" | "m";
 export type FieldListColumn = {
     /** Column heading, shown once above the rows; it names the field of this column in every row. */
     label: string;
     /**
-     * `fill` (default) shares the free width; `compact` fits an icon-only control (an icon Select,
-     * a swatch button, a checkbox); `s` a short value (a quantity, a code); `m` an amount or a date.
+     * `fill` (default) shares the free width; `compact` is as wide as its widest control or heading
+     * (an icon Select, a swatch button, a checkbox); `xs` a number of a few digits (a share, a percent); `s` a short
+     * value (a quantity, a code); `m` an amount or a date.
      */
     width?: FieldListColumnWidth;
     /** A red `*` after the heading (decorative): every field of the column is required. */
@@ -48,21 +52,25 @@ export type FieldListProps<T extends object> = Omit<FieldRootDomProps, "onChange
      */
     defaultValue?: readonly T[];
     /**
-     * The new list after an edit (`row.update`), an added, removed or moved row.
+     * The new list after an edit (`row.update`), an add, a remove or a move. Return the save's promise: the new list shows while it is pending, the owner's again on a reject (say why with `error`).
      */
-    onValueChange?: (value: T[]) => void;
+    onValueChange?: (value: T[]) => void | Promise<void>;
     /**
      * Stable unique id of an item: the row key and the drag id.
      */
     getId: (item: T) => string;
     /**
-     * The columns in cell order: `label` (the heading; it names the field of the column in every row), `width` (`fill` | `compact` | `s` | `m`), `required` (a `*` after the heading).
+     * The columns in cell order: `label` (the heading; it names the field of the column in every row), `width` (`fill` | `compact` | `xs` | `s` | `m`), `required` (a `*` after the heading).
      */
     columns: readonly FieldListColumn[];
     /**
-     * The cells of a row, one element per column (a fragment): kit fields without `label`. `row` has `index`, `update(patch)` and `remove()`.
+     * The cells of a row, one element per column (a fragment): kit fields without `label`. `row` has `index`, `update(patch)` and `remove()`. In one column the remove is the field's last segment.
      */
     renderItem: (item: T, row: FieldListRow<T>) => React.ReactNode;
+    /**
+     * The totals row under the rows: one node per column (a fragment), `null` where none; each aligned as its column's field text. The first cell without a total reads `labels.totals`.
+     */
+    renderTotals?: (items: readonly T[]) => React.ReactNode;
     /**
      * A new empty item; with it the add button shows under the rows and focus goes to the new row's first field.
      */
@@ -76,11 +84,11 @@ export type FieldListProps<T extends object> = Omit<FieldRootDomProps, "onChange
      */
     getLabel?: (item: T) => string;
     /**
-     * Pinned rows: a lock in the lead column, no remove button, they hold their place while others move.
+     * Pinned rows: the remove button stays in its place, off, its tooltip says why (`labels.lockedReason`); with `reorderable` a lock takes the handle's place and the row holds it while others move.
      */
     getLocked?: (item: T) => boolean;
     /**
-     * Rows move by a leading handle: drag, a touch hold, Alt + ↑ / ↓.
+     * Rows move by a handle at the row's end, after the remove button: drag, a touch hold, Alt + ↑ / ↓.
      */
     reorderable?: boolean;
     /**
@@ -99,6 +107,10 @@ export type FieldListProps<T extends object> = Omit<FieldRootDomProps, "onChange
      * Help text under the list; hidden while `error` shows.
      */
     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;
     /**
      * A problem of the list as a whole («Добавьте хотя бы одну позицию»); a field's own error goes on that field.
      */
@@ -122,7 +134,7 @@ export type FieldListProps<T extends object> = Omit<FieldRootDomProps, "onChange
  * reorder and pinned rows. In a narrow container the rows stack into blocks and each field shows
  * its own label.
  */
-export declare function FieldList<T extends object>({ value: valueProp, defaultValue, onValueChange, getId, columns, renderItem, createItem, addLabel, getLabel, getLocked, reorderable, min, max, label, hint, error, disabled: disabledProp, size: sizeProp, labels: labelsProp, className, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: FieldListProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function FieldList<T extends object>({ value: valueProp, defaultValue, onValueChange, getId, columns, renderItem, renderTotals, createItem, addLabel, getLabel, getLocked, reorderable, min, max, label, hint, hintTone, error, disabled: disabledProp, size: sizeProp, labels: labelsProp, className, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: FieldListProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export declare namespace FieldList {
     var displayName: string;
 }

package/dist/components/hint/Hint.d.ts

@@ -1,10 +1,16 @@
 import type * as React from "react";
-import type { ControlSize } from "../../internal/states";
+import type { ControlSize, Tone } from "../../internal/states";
+/** The status a hint's words carry (a deadline that nears, a check that passed). */
+export type HintTone = Extract<Tone, "neutral" | "success" | "warning" | "danger">;
 export type HintRootProps = React.HTMLAttributes<HTMLParagraphElement> & {
     /**
      * Tier of the paired field: 12/16 for xs–m, 13/20 for l and xl. Without it the tier of its host, else `m`.
      */
     size?: ControlSize;
+    /**
+     * Status color of the text (a deadline that nears, a check that passed). The words carry the status, the color repeats it; `invalid` and `disabled` take over the color.
+     */
+    tone?: HintTone;
     /**
      * Error styling: danger text that drops in (fade + 4 px from above).
      */
@@ -15,7 +21,7 @@ export type HintRootProps = React.HTMLAttributes<HTMLParagraphElement> & {
     disabled?: boolean;
     ref?: React.Ref<HTMLParagraphElement>;
 };
-declare function HintRoot({ className, size: sizeProp, invalid, disabled: disabledProp, children, ...rest }: HintRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function HintRoot({ className, size: sizeProp, tone, invalid, disabled: disabledProp, children, ...rest }: HintRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare namespace HintRoot {
     var displayName: string;
 }

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";
@@ -40,7 +40,7 @@ export type { ConfirmDialogLabels, ConfirmDialogRootProps, ConfirmDialogTriggerP
 export { ConfirmDialog } from "./confirm-dialog/ConfirmDialog";
 export type { CrossfadeProps } from "./crossfade/Crossfade";
 export { Crossfade } from "./crossfade/Crossfade";
-export type { DataTableColumn, DataTableColumnsMenuProps, DataTableGroup, DataTableLabels, DataTableOrder, DataTableProps, DataTableRowClickEvent, DataTableSortState, } from "./data-table/DataTable";
+export type { DataTableColumn, DataTableGroup, DataTableLabels, DataTableOrder, DataTableProps, DataTableRowClickEvent, DataTableSortState, } from "./data-table/DataTable";
 export { DataTable } from "./data-table/DataTable";
 export type { DatepickerLabels, DatepickerPanelProps, DatepickerPreset, DatepickerRange, DatepickerRootProps, WeekStart, } from "./datepicker/Datepicker";
 export { Datepicker, DEFAULT_DATEPICKER_PRESETS, datepickerPresets, formatDatepickerValue, formatDateValue, YEARLESS_YEAR, } from "./datepicker/Datepicker";
@@ -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.
      */
@@ -141,6 +141,10 @@ export type KanbanRootProps<T> = Omit<React.HTMLAttributes<HTMLDivElement>, "chi
      * Columns show skeleton cards in the card geometry; the cards cross-fade in when it turns off.
      */
     loading?: boolean;
+    /**
+     * Placeholder columns a `loading` board draws while `columns` is empty (the stages are still loading); the columns fade in where they stood.
+     */
+    loadingColumns?: number;
     /**
      * Read-only board: no drag, no keyboard moves, no column grips; `onItemOpen` and `getItemHref` still open cards.
      */
@@ -151,11 +155,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 +205,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;
@@ -11,7 +11,7 @@ export type ListRootProps = Omit<React.HTMLAttributes<HTMLUListElement>, "childr
      */
     size?: ControlSize;
     /**
-     * Rows reorder by a leading handle (drag, touch hold, Alt + ↑ / ↓): item `value` `id` goes before `beforeId` (`null` = last). Apply with `moveBefore`; a returned promise keeps the row busy, a rejection moves it back.
+     * Rows reorder by an end handle (drag, touch hold, Alt + ↑ / ↓): item `value` `id` goes before `beforeId` (`null` = last). Apply with `moveBefore`; a returned promise keeps the row busy, a rejection moves it back.
      */
     onReorder?: (id: string, beforeId: string | null) => void | Promise<void>;
     /**
@@ -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,23 @@ declare function ListItemCount({ color, className, ...rest }: ListItemCountProps
 declare namespace ListItemCount {
     var displayName: string;
 }
+export type ListItemActionsProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * `"end"` after the row element: a plain settings row, label first. `"start"` before it, in the DOM too: the on / off of a reorderable row reads first and the grip keeps the end.
+     */
+    side?: "start" | "end";
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The row's own controls (a Switch, a Dropdown with its icon Button, an icon Button): beside its
+ * button or link and never inside it, one tier below the row — at its end, or leading it with
+ * `side="start"` (the on / off of a reorderable row, whose end edge is the grip's). The row's fills
+ * cover them.
+ */
+declare function ListItemActions({ side, 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 +124,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 +156,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;
 }