prime-ui-kit 0.16.0 → 0.18.0

package/dist/components/color-picker/ColorPresets.d.ts

@@ -10,6 +10,10 @@ export type ColorPresetsLabels = {
     list: string;
     /** The "no color" swatch (`allowEmpty`) and the trigger name for an empty value. */
     empty: string;
+    /** Label of the hex field under the swatches (`allowCustom`). */
+    custom: string;
+    /** Error of the hex field when Enter finds no hex color in it. */
+    customInvalid: string;
 };
 export declare const COLOR_PRESETS_LABELS: ColorPresetsLabels;
 export type ColorPresetsRootProps = {
@@ -65,6 +69,10 @@ export type ColorPresetsRootProps = {
      * Adds the «no color» swatch after the presets (value `null`).
      */
     allowEmpty?: boolean;
+    /**
+     * Any color beyond the palette: a hex field under the swatches (`labels.custom`) shows the typed color, Enter picks it as `#rrggbb`; invalid text gets `labels.customInvalid`.
+     */
+    allowCustom?: boolean;
     /**
      * Close the panel after a pick (focus returns to the trigger).
      */
@@ -78,7 +86,7 @@ export type ColorPresetsRootProps = {
      */
     children: React.ReactNode;
 };
-declare function ColorPresetsRoot({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, presets, columns: columnsProp, size: sizeProp, disabled: disabledProp, allowEmpty, closeOnSelect, labels: labelsProp, children, }: ColorPresetsRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function ColorPresetsRoot({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, presets, columns: columnsProp, size: sizeProp, disabled: disabledProp, allowEmpty, allowCustom, closeOnSelect, labels: labelsProp, children, }: ColorPresetsRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare namespace ColorPresetsRoot {
     var displayName: string;
 }

package/dist/components/crossfade/Crossfade.d.ts

@@ -5,7 +5,7 @@ export type CrossfadeProps = React.HTMLAttributes<HTMLDivElement> & {
      */
     state: string | number;
     /**
-     * The region takes its parent's height (a flex or grid item, or a sized block) and every state stretches to it; the height never glides.
+     * The region takes its parent's height (a flex or grid item, or a sized block) and every state stretches to it; the height never glides. A `Crossfade` that is the child of a `Page.Cell` fills it unless `fill` is set.
      */
     fill?: boolean;
     ref?: React.Ref<HTMLDivElement>;

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

@@ -38,6 +38,8 @@ export type DataTableLabels = {
     expandGroup: string;
     /** `aria-label` of the toggle of an expanded group; `{group}` is the group key. */
     collapseGroup: string;
+    /** Name of the info glyph of a column with a `description` (the tooltip holds the text). */
+    columnInfo: string;
 };
 export declare const DATA_TABLE_LABELS: DataTableLabels;
 export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
@@ -184,7 +186,7 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     scrollHeight?: number | string;
     /**
-     * The table spans its container; `false` sizes it by its content.
+     * The table spans its container; `false` sizes the table and its surface by its content (up to the container's width, then it scrolls).
      */
     fullWidth?: boolean;
     /**

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

@@ -11,6 +11,8 @@ type HeadProps<Row> = {
     /** Sticky head and first column: the leading head cells stick to both edges. */
     stickyCorner: boolean;
     expandEnabled: boolean;
+    /** Name of the info glyph of a column with a `description`. */
+    infoLabel: string;
     /** A leading column of row handles (`onReorder`). */
     reorderable?: boolean;
     selectAll?: {
@@ -21,5 +23,5 @@ type HeadProps<Row> = {
         onToggle: () => void;
     };
 };
-export declare function Head<Row>({ columns, size, sort, onSort, stickyFirstColumn, stickyHeader, stickyCorner, expandEnabled, reorderable, selectAll, }: HeadProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function Head<Row>({ columns, size, sort, onSort, stickyFirstColumn, stickyHeader, stickyCorner, expandEnabled, infoLabel, reorderable, selectAll, }: HeadProps<Row>): 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 = {
@@ -14,16 +15,19 @@ export type FieldListLabels = {
     locked: 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.
+     * 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()`.
      */
     renderItem: (item: T, row: FieldListRow<T>) => React.ReactNode;
+    /**
+     * The totals row under the rows: one node per column (a fragment), `null` where a column has none. The first cell without a total reads `labels.totals`, the row's group name.
+     */
+    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.
      */
@@ -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";
@@ -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";
@@ -102,10 +103,6 @@ export type { NotificationAction, NotificationCardProps, NotificationDismissReas
 export { NotificationCard } from "./notification/Notification";
 export type { NotificationProviderProps } from "./notification/NotificationStore";
 export { NotificationProvider, useNotifications, } from "./notification/NotificationStore";
-export type { PageContentActionsProps, PageContentBackButtonProps, PageContentBodyProps, PageContentCellProps, PageContentCellRows, PageContentCellSpan, PageContentDescriptionMeasure, PageContentDescriptionProps, PageContentGridProps, PageContentHeaderProps, PageContentLabels, PageContentMaxWidth, PageContentPanelKind, PageContentPanelProps, PageContentRootAs, PageContentRootProps, PageContentSectionLayout, PageContentSectionProps, PageContentSplitProps, PageContentTitleProps, } from "./page-content/PageContent";
-export { PageContent } from "./page-content/PageContent";
-export type { PageToolbarActionsProps, PageToolbarChipsProps, PageToolbarRootProps, PageToolbarSectionsProps, PageToolbarToolsProps, PageToolbarViewProps, } from "./page-toolbar/PageToolbar";
-export { PageToolbar } from "./page-toolbar/PageToolbar";
 export type { PaginationLabels, PaginationProps } from "./pagination/Pagination";
 export { Pagination } from "./pagination/Pagination";
 export type { PopoverActionsProps, PopoverAnchorProps, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverHeaderProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps, } from "./popover/Popover";
@@ -116,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;
 }