prime-ui-kit 0.17.0 → 0.18.0

package/dist/chunks/{chunk-2ODXLPW3.js → chunk-QFHE5GKW.js}

@@ -113,6 +113,7 @@ import * as React2 from "react";
 // src/internal/tokenDefaults.ts
 var TOKEN_DEFAULTS = {
   "--prime-gallery-max-size": 360,
+  "--prime-message-sticker": 160,
   "--prime-message-video-note-box": 268,
   "--prime-motion-duration-base": 380,
   "--prime-motion-duration-fast": 230,

package/dist/chunks/{chunk-SVFWPLNW.js → chunk-X3JT5CLR.js}

@@ -23,11 +23,11 @@ import {
   useInheritedDisabled,
   useLabels,
   useOpenState
-} from "./chunk-7WWZYGRC.js";
+} from "./chunk-OAXJWF3L.js";
 import {
   cx,
   useHostTier
-} from "./chunk-2ODXLPW3.js";
+} from "./chunk-QFHE5GKW.js";
 
 // src/components/color-field/ColorField.tsx
 import * as React3 from "react";
@@ -359,7 +359,15 @@ function SliderMeta({ label, className, ...rest }) {
     /* @__PURE__ */ jsx("output", { className: ColorPicker_default.sliderValue, "aria-live": "off", children: slider && channel ? sliderValueLabel(slider.value, channel, locale) : null })
   ] });
 }
-function HexInput({ label, hint, error, focusRing, children, ...rest }) {
+function HexInput({
+  label,
+  hint,
+  hintTone,
+  error,
+  focusRing,
+  children,
+  ...rest
+}) {
   const { labels } = useColorPickerContext();
   const { inputRef, text, setText, commit } = useColorDraft(toHexText, parseHex);
   return /* @__PURE__ */ jsx(
@@ -368,6 +376,7 @@ function HexInput({ label, hint, error, focusRing, children, ...rest }) {
       ...rest,
       label: label ?? labels.hex,
       hint,
+      hintTone,
       error,
       focusRing,
       children: /* @__PURE__ */ jsxs(Input.Wrapper, { children: [
@@ -507,6 +516,7 @@ function ColorField({
   required = false,
   optional,
   hint,
+  hintTone,
   error,
   className,
   "aria-label": ariaLabel,
@@ -557,6 +567,7 @@ function ColorField({
         required,
         optional,
         hint,
+        hintTone,
         error,
         disabled,
         optionalLabel: labels.optional,

package/dist/color-picker.js

@@ -4,9 +4,9 @@ import {
   ColorField,
   ColorPicker,
   parseColor
-} from "./chunks/chunk-SVFWPLNW.js";
-import "./chunks/chunk-7WWZYGRC.js";
-import "./chunks/chunk-2ODXLPW3.js";
+} from "./chunks/chunk-X3JT5CLR.js";
+import "./chunks/chunk-OAXJWF3L.js";
+import "./chunks/chunk-QFHE5GKW.js";
 export {
   ColorField,
   ColorPicker,

package/dist/components/badge/Badge.d.ts

@@ -127,6 +127,13 @@ export type BadgeActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement
     children?: React.ReactNode;
     ref?: React.Ref<HTMLButtonElement>;
 };
+export type BadgeGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Tier of every badge in the group; a badge's own `size` wins. Small tiers stand closer.
+     */
+    size?: ControlSize;
+    ref?: React.Ref<HTMLDivElement>;
+};
 declare function BadgeRoot({ color, tone, variant, size: sizeProp, shape, onRemove, pressed: pressedProp, defaultPressed, onPressedChange, loading, labels, disabled: disabledProp, children, className, ref, ...rest }: BadgeRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BadgeRoot {
     var displayName: string;
@@ -153,8 +160,18 @@ declare function BadgeAction({ label, onClick, persistent: _persistent, disabled
 declare namespace BadgeAction {
     var displayName: string;
 }
+/**
+ * A row of badges as one value (the tags of a record, the stages a deal went through): the badges
+ * wrap onto more lines, a chip gap apart. `size` sets the tier of every badge in it; without it the
+ * badges follow the host, as a lone badge does.
+ */
+declare function BadgeGroup({ size, className, ...rest }: BadgeGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BadgeGroup {
+    var displayName: string;
+}
 export declare const Badge: {
     Root: typeof BadgeRoot;
+    Group: typeof BadgeGroup;
     Icon: typeof BadgeIcon;
     Dot: typeof BadgeDot;
     Action: typeof BadgeAction;

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -24,9 +24,13 @@ declare namespace BreadcrumbRoot {
 }
 export type BreadcrumbItemProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, "aria-label"> & {
     /**
-     * Renders a link; without it the item is text.
+     * Renders a link; without it (and without `asChild`) the item is text.
      */
     href?: string;
+    /**
+     * The single child (a router `Link`) is the level's link with the same look; its own text is the level. In the «…» menu of a folded path it is the menu item.
+     */
+    asChild?: boolean;
     /**
      * Current page: `aria-current="page"` (on the link when `href` is set), primary text, medium weight. Usually the last item, without `href`.
      */
@@ -37,7 +41,12 @@ export type BreadcrumbItemProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, "a
     "aria-label"?: string;
     ref?: React.Ref<HTMLLIElement>;
 };
-declare function BreadcrumbItem({ href, current, children, className, "aria-label": ariaLabel, ...rest }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * One level of the path in its `<li>`: a link (`href`, or the consumer's router link with
+ * `asChild`) for a previous level, plain text for the current one. A press on the link goes
+ * through `Page.Guard` (`leaveGuardCapture`).
+ */
+declare function BreadcrumbItem({ href, asChild, current, children, className, "aria-label": ariaLabel, onClickCapture, ...rest }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BreadcrumbItem {
     var displayName: string;
 }

package/dist/components/button/Button.d.ts

@@ -37,7 +37,7 @@ type ButtonShapeProps = {
     "aria-label": string;
 };
 /**
- * A `<button>` runs the long-action modes; with `asChild` the child (a link) owns its content, so
+ * A `<button>` runs the long-action modes; with `asChild` the child (a link) owns its element, so
  * it takes none of them.
  */
 type ButtonElementProps = {

package/dist/components/button-group/ButtonGroup.d.ts

@@ -45,7 +45,7 @@ export type ButtonGroupRootProps = Omit<FieldRootDomProps, "dir"> & FieldFramePr
  * The field: label · the segments · hint or error. `className`, `ref` and the rest go to the frame;
  * `id`, `role` and the `aria-label*` / `aria-describedby` names to the `role="group"` element.
  */
-declare function ButtonGroupRoot({ orientation, size: sizeProp, fullWidth, label, required, optional, hint, error, invalid, reserveSupportRow, id, labels: labelsProp, children, className, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ButtonGroupRootProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonGroupRoot({ orientation, size: sizeProp, fullWidth, label, required, optional, hint, hintTone, error, invalid, reserveSupportRow, id, labels: labelsProp, children, className, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ButtonGroupRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ButtonGroupRoot {
     var displayName: string;
 }

package/dist/components/card/Card.d.ts

@@ -16,12 +16,16 @@ export type CardRootProps = DivProps & {
      * No raised shadow: a flat tile for dense grids.
      */
     flat?: boolean;
+    /**
+     * The KPI is loading: `Card.Value`, `Card.Delta` and `Card.Meta` show a Skeleton in their own geometry and the root sets `aria-busy`; the data fades in when it arrives. Labels and titles stay.
+     */
+    loading?: boolean;
     /**
      * The whole card is one link or button: pass that element as the only child with the parts inside it; it gets hover, press and the focus ring. Nothing interactive may sit inside it.
      */
     asChild?: boolean;
 };
-declare function CardRoot({ variant, flat, asChild, className, children, ...rest }: CardRootProps): import("react/jsx-runtime").JSX.Element;
+declare function CardRoot({ variant, flat, loading, asChild, className, children, ...rest }: CardRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CardRoot {
     var displayName: string;
 }
@@ -79,7 +83,7 @@ declare namespace CardLabel {
     var displayName: string;
 }
 export type CardValueProps = SpanProps;
-declare function CardValue({ className, ...rest }: CardValueProps): import("react/jsx-runtime").JSX.Element;
+declare function CardValue({ className, children, ...rest }: CardValueProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CardValue {
     var displayName: string;
 }
@@ -89,7 +93,7 @@ export type CardDeltaProps = SpanProps & {
      */
     tone?: Extract<Tone, "neutral" | "success" | "warning" | "danger">;
 };
-declare function CardDelta({ className, tone, ...rest }: CardDeltaProps): import("react/jsx-runtime").JSX.Element;
+declare function CardDelta({ className, tone, children, ...rest }: CardDeltaProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CardDelta {
     var displayName: string;
 }
@@ -98,7 +102,7 @@ export type CardMetaProps = SpanProps;
  * The reference line of a KPI («Лидов 120 · сделок 18»): caption, muted, tabular; it sits at the
  * bottom of the tile, so tiles in a row line their meta up.
  */
-declare function CardMeta({ className, ...rest }: CardMetaProps): import("react/jsx-runtime").JSX.Element;
+declare function CardMeta({ className, children, ...rest }: CardMetaProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CardMeta {
     var displayName: string;
 }

package/dist/components/chat/Chat.d.ts

@@ -186,9 +186,9 @@ export type ChatMessagesProps<T = unknown> = Omit<MessageListProps, "selected" |
      */
     now?: Date;
     /**
-     * The label of a date.
+     * The label of a date; gets the `timeZone`.
      */
-    formatDate?: (date: Date, now: Date) => string;
+    formatDate?: (date: Date, now: Date, timeZone?: string) => string;
 };
 /**
  * The conversation: the one message list of the kit, in its own scroller. A `role="log"` of rows
@@ -198,7 +198,7 @@ export type ChatMessagesProps<T = unknown> = Omit<MessageListProps, "selected" |
  * and `Message.Typing` close the list). Only the rows around the view render; the list opens at
  * the end and keeps the reader's place.
  */
-declare function ChatMessages<T>({ group, loading, hasOlder, onLoadOlder, items, getKey, getAuthor, getDate, isService, renderMessage, unread, groupWindow, now, formatDate, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: ChatMessagesProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function ChatMessages<T>({ group, loading, hasOlder, onLoadOlder, items, getKey, getAuthor, getDate, isService, renderMessage, unread, groupWindow, now, timeZone, formatDate, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: ChatMessagesProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace ChatMessages {
     var displayName: string;
 }

package/dist/components/chat/MessageList.d.ts

@@ -38,6 +38,10 @@ export type MessageListProps = React.HTMLAttributes<HTMLDivElement> & {
      * The reader (`{ id, name: «Вы», src?, color? }`): a reaction they put shows them among the chip's avatars at once, before the data comes back; matched by `id`.
      */
     reader?: MessageUser;
+    /**
+     * The IANA zone of the date separators, the runs and every message time (`"Asia/Vladivostok"`): a profile's zone, not the browser's.
+     */
+    timeZone?: string;
     /**
      * A message was added at the end after mount, sent or received: for a sound, a counter, a title badge. Not called for the first render, history or a message put back in the middle.
      */
@@ -76,7 +80,7 @@ export type MessageListProps = React.HTMLAttributes<HTMLDivElement> & {
  * `anchor="end"`); jumps, search, selection ranges, the keyboard and playing media reach or keep
  * rows that are not rendered.
  */
-export declare function MessageList({ group, selected: selectedProp, defaultSelected, onSelectedChange, quickReaction, reactionOptions, reader, onNewMessage, onRead, jumpTo, highlight, onMatchesChange, revealRef, labels: labelsProp, className, children, onKeyDown, onFocus, ref, ...rest }: MessageListProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageList({ group, selected: selectedProp, defaultSelected, onSelectedChange, quickReaction, reactionOptions, reader, timeZone, onNewMessage, onRead, jumpTo, highlight, onMatchesChange, revealRef, labels: labelsProp, className, children, onKeyDown, onFocus, ref, ...rest }: MessageListProps): import("react/jsx-runtime").JSX.Element;
 export type ChatSelectionBarProps = React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };

package/dist/components/chat/groupMessages.d.ts

@@ -7,7 +7,7 @@ import type { MessagePosition } from "../message/types";
 export type MessageListEntry<T> = {
     type: "date";
     key: string;
-    /** The start of the day (local time). */
+    /** The start of the day (in `timeZone`, else local time). */
     date: Date;
     /** «Сегодня», «Вчера», «12 марта», «12 марта 2025». */
     label: string;
@@ -37,11 +37,19 @@ export type GroupMessagesOptions<T> = {
     groupWindow?: number;
     /** «Today» for the date labels. Default: now. */
     now?: Date;
+    /**
+     * The zone the days are read in (an IANA name, `"Asia/Vladivostok"`): where a day starts and what
+     * «today» is. Default: the browser's zone.
+     */
+    timeZone?: string;
     /** The label of a date separator. Default `formatMessageDate`. */
-    formatDate?: (date: Date, now: Date) => string;
+    formatDate?: (date: Date, now: Date, timeZone?: string) => string;
 };
-/** «Сегодня», «Вчера», «12 марта» this year, «12 марта 2025» another year. */
-export declare function formatMessageDate(date: Date, now?: Date): string;
+/**
+ * «Сегодня», «Вчера», «12 марта» this year, «12 марта 2025» another year; days are read in
+ * `timeZone`, or the browser's zone.
+ */
+export declare function formatMessageDate(date: Date, now?: Date, timeZone?: string): string;
 /**
  * The rows of a chat from messages in time order: a date separator before the first message of
  * every day, and for every message its `position` in the run of one author (a new run starts with

package/dist/components/chat-list/ChatList.d.ts

@@ -140,17 +140,22 @@ type ChatListItemOwnProps = {
      */
     draft?: string;
     /**
-     * `ChatList.ItemIcon`, `ChatList.ItemText`, `ChatList.ItemDescription`, `ChatList.ItemMenu`.
+     * The one child element (a router `Link`) is the row; the parts go inside it.
+     */
+    asChild?: boolean;
+    /**
+     * `ChatList.ItemIcon`, `ChatList.ItemText`, `ChatList.ItemDescription`, `ChatList.ItemMenu` — inside the child element with `asChild`.
      */
     children?: React.ReactNode;
 };
-export type ChatListItemProps = ChatListItemOwnProps & Omit<ListItemProps, keyof ChatListItemOwnProps | "value" | "current" | "asChild" | "disabled">;
+export type ChatListItemProps = ChatListItemOwnProps & Omit<ListItemProps, keyof ChatListItemOwnProps | "value" | "current" | "disabled">;
 /**
- * A dialog: a `List.Item` row (a button, or a link with `href`) with the avatar, the name and the
- * time on the first line, the preview and the counts on the second. Its key and `current` come
- * from `ChatList.Root`.
+ * A dialog: a `List.Item` row (a button, a link with `href`, or the consumer's element with
+ * `asChild` — a router link, its children the parts) with the avatar, the name and the time on
+ * the first line, the preview and the counts on the second. Its key and `current` come from
+ * `ChatList.Root`.
  */
-declare function ChatListItem({ time, status, unread, mention, muted, pinned, typing, draft, className, children, onClick, onKeyDown, onFocus, onContextMenu, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ref, ...rest }: ChatListItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ChatListItem({ asChild, time, status, unread, mention, muted, pinned, typing, draft, className, children, onClick, onKeyDown, onFocus, onContextMenu, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ref, ...rest }: ChatListItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChatListItem {
     var displayName: string;
 }
@@ -216,9 +221,13 @@ export type ChatListRootProps<T = unknown> = Omit<React.HTMLAttributes<HTMLDivEl
      */
     now?: Date;
     /**
-     * Display of a row's `Date` time: «14:32» today, «пн» this week, «12 мар», «12.03.2025».
+     * The IANA zone the times of the rows are read in (`"Asia/Vladivostok"`): a profile's zone, not the browser's.
+     */
+    timeZone?: string;
+    /**
+     * Display of a row's `Date` time: «14:32» today, «пн» this week, «12 мар», «12.03.2025»; gets the `timeZone`.
      */
-    formatTime?: (date: Date, now: Date) => string;
+    formatTime?: (date: Date, now: Date, timeZone?: string) => string;
     /**
      * Built-in strings, see Labels.
      */
@@ -231,7 +240,7 @@ export type ChatListRootProps<T = unknown> = Omit<React.HTMLAttributes<HTMLDivEl
  * new places when the order changes, a long list rendered only around the view, placeholder rows
  * while loading and more dialogs loaded near the end. Draws no surface: put it in a pane.
  */
-declare function ChatListRoot<T>({ items, getKey, renderItem, value: valueProp, defaultValue, onValueChange, search: searchProp, defaultSearch, onSearchChange, loading, hasMore, onLoadMore, empty, size: sizeProp, now: nowProp, formatTime, labels: labelsProp, className, ref, ...rest }: ChatListRootProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function ChatListRoot<T>({ items, getKey, renderItem, value: valueProp, defaultValue, onValueChange, search: searchProp, defaultSearch, onSearchChange, loading, hasMore, onLoadMore, empty, size: sizeProp, now: nowProp, timeZone, formatTime, labels: labelsProp, className, ref, ...rest }: ChatListRootProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare namespace ChatListRoot {
     var displayName: string;
 }

package/dist/components/chat-list/formatChatTime.d.ts

@@ -1,6 +1,6 @@
 /**
  * The time of a dialog's last message, as a messenger shows it: today «14:32», within the last
- * six days the weekday «пн», earlier this year «12 мар», another year «12.03.2025». The default
- * `ChatList.Root formatTime`.
+ * six days the weekday «пн», earlier this year «12 мар», another year «12.03.2025». Days and the
+ * clock are read in `timeZone`, or the browser's zone. The default `ChatList.Root formatTime`.
  */
-export declare function formatChatTime(date: Date, now: Date): string;
+export declare function formatChatTime(date: Date, now: Date, timeZone?: string): string;

package/dist/components/checkbox/Checkbox.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 { ControlSize } from "../../internal/states";
 export type CheckboxShape = "square" | "circle";
@@ -32,6 +33,10 @@ export type CheckboxRootProps = 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`.
      */
@@ -59,7 +64,7 @@ export type CheckboxRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>
     /** The native checkbox input. */
     ref?: React.Ref<HTMLInputElement>;
 };
-declare function CheckboxRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, indeterminate, invalid, hint, error, size: sizeProp, shape, optional, labels: labelsProp, disabled: disabledProp, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: CheckboxRootProps): import("react/jsx-runtime").JSX.Element;
+declare function CheckboxRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, indeterminate, invalid, hint, hintTone, error, size: sizeProp, shape, optional, labels: labelsProp, disabled: disabledProp, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: CheckboxRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CheckboxRoot {
     var displayName: string;
 }

package/dist/components/color-field/ColorField.d.ts

@@ -77,7 +77,7 @@ export type ColorFieldProps = FieldRootDomProps & FieldFrameProps & FieldFocusRi
  * the ColorPicker panel (area, hue, optional opacity, channels with the eyedropper, presets) in a
  * Popover.
  */
-export declare function ColorField({ value: valueProp, defaultValue, onValueChange, presets, alpha, size: sizeProp, disabled: disabledProp, invalid: invalidProp, focusRing, name, id, label, required, optional, hint, error, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: ColorFieldProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function ColorField({ value: valueProp, defaultValue, onValueChange, presets, alpha, size: sizeProp, disabled: disabledProp, invalid: invalidProp, focusRing, name, id, label, required, optional, hint, hintTone, error, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: ColorFieldProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export declare namespace ColorField {
     var displayName: string;
 }

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

@@ -2,6 +2,7 @@ import * as React from "react";
 import { type ColorAreaProps as AriaColorAreaProps, type ColorSliderProps as AriaColorSliderProps, type ColorThumbProps as AriaColorThumbProps, type SliderTrackProps as AriaSliderTrackProps, type Color, parseColor } from "react-aria-components";
 import { Button } from "../button/Button";
 import { type ColorSwatchesColorProps } from "../color-swatches/ColorSwatches";
+import type { HintTone } from "../hint/Hint";
 import { type FieldActionButtonProps } from "../../internal/FieldAction";
 import type { FieldFocusRingProps, FieldRootDomProps } from "../../internal/FieldFrame";
 import type { ControlSize } from "../../internal/states";
@@ -82,6 +83,10 @@ export type ColorPickerHexInputProps = 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; marks the field invalid.
      */
@@ -165,7 +170,7 @@ export type ColorPickerSliderMetaProps = DivProps & {
  * React Aria's `SliderOutput` inside a color slider points `for` at an id no input carries.
  */
 declare function SliderMeta({ label, className, ...rest }: ColorPickerSliderMetaProps): import("react/jsx-runtime").JSX.Element;
-declare function HexInput({ label, hint, error, focusRing, children, ...rest }: ColorPickerHexInputProps): import("react/jsx-runtime").JSX.Element;
+declare function HexInput({ label, hint, hintTone, error, focusRing, children, ...rest }: ColorPickerHexInputProps): import("react/jsx-runtime").JSX.Element;
 declare namespace HexInput {
     var displayName: string;
 }

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"> & {

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;
 }