prime-ui-kit 0.16.0 → 0.18.0

package/dist/chunks/{chunk-U3Q2I3MY.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,
@@ -1747,9 +1748,8 @@ export {
   useOptionalControlSize,
   useControlSize,
   useHostTier,
-  cx,
-  fieldTier_default,
   TOKEN_DEFAULTS,
+  cx,
   motionToken,
   readCssDurationMs,
   readElementDurationMs,
@@ -1763,6 +1763,7 @@ export {
   HOVER_QUERY,
   prefersReducedMotion,
   usePresence,
+  fieldTier_default,
   iconBox_default,
   iconBoxClass,
   iconSlotClass,

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

@@ -3,6 +3,7 @@
 import {
   Button,
   ColorSwatches,
+  FieldActionButton,
   FieldFrame,
   Icon,
   Input,
@@ -22,11 +23,11 @@ import {
   useInheritedDisabled,
   useLabels,
   useOpenState
-} from "./chunk-4PSQ64S4.js";
+} from "./chunk-OAXJWF3L.js";
 import {
   cx,
   useHostTier
-} from "./chunk-U3Q2I3MY.js";
+} from "./chunk-QFHE5GKW.js";
 
 // src/components/color-field/ColorField.tsx
 import * as React3 from "react";
@@ -42,7 +43,8 @@ import {
   ColorPickerStateContext,
   ColorSliderStateContext,
   composeRenderProps,
-  parseColor
+  parseColor,
+  useLocale
 } from "react-aria-components";
 
 // src/hooks/useDraft.ts
@@ -75,6 +77,7 @@ var ColorPicker_default = {
   channelInput: "ColorPicker_channelInput",
   channelCellHex: "ColorPicker_channelCellHex",
   channelSuffix: "ColorPicker_channelSuffix",
+  swatchButton: "ColorPicker_swatchButton",
   eyeDropperSquare: "ColorPicker_eyeDropperSquare"
 };
 
@@ -84,6 +87,7 @@ var COLOR_PICKER_LABELS = {
   format: "\u0424\u043E\u0440\u043C\u0430\u0442 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0446\u0432\u0435\u0442\u0430",
   eyeDropper: "\u041F\u0438\u043F\u0435\u0442\u043A\u0430",
   hex: "Hex",
+  palette: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043F\u0430\u043B\u0438\u0442\u0440\u0443",
   hue: "\u041E\u0442\u0442\u0435\u043D\u043E\u043A, \u0433\u0440\u0430\u0434\u0443\u0441\u044B",
   saturation: "\u041D\u0430\u0441\u044B\u0449\u0435\u043D\u043D\u043E\u0441\u0442\u044C, \u043F\u0440\u043E\u0446\u0435\u043D\u0442\u044B",
   lightness: "\u042F\u0440\u043A\u043E\u0441\u0442\u044C, \u043F\u0440\u043E\u0446\u0435\u043D\u0442\u044B",
@@ -279,15 +283,21 @@ function ColorPickerRoot({
   );
 }
 ColorPickerRoot.displayName = "ColorPicker.Root";
+var SliderChannelContext = React2.createContext(null);
 function Slider({ className, disabled, ...props }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(SliderChannelContext.Provider, { value: props.channel, children: /* @__PURE__ */ jsx(
     AriaColorSlider,
     {
       className: composeRenderProps(className, (c) => cx(ColorPicker_default.slider, c)),
       isDisabled: useInheritedDisabled(disabled),
       ...props
     }
-  );
+  ) });
+}
+function sliderValueLabel(color, channel, locale) {
+  const raw = color.getChannelValue(channel);
+  const rounded = channel === "alpha" ? Math.round(raw * 100) / 100 : Math.round(raw);
+  return color.withChannelValue(channel, rounded).formatChannelValue(channel, locale);
 }
 function Area({ className, disabled, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -342,12 +352,22 @@ function Swatches(props) {
 Swatches.displayName = "ColorPicker.Swatches";
 function SliderMeta({ label, className, ...rest }) {
   const slider = React2.useContext(ColorSliderStateContext);
+  const channel = React2.useContext(SliderChannelContext);
+  const { locale } = useLocale();
   return /* @__PURE__ */ jsxs("div", { ...rest, className: cx(ColorPicker_default.sliderHeader, className), children: [
     /* @__PURE__ */ jsx("span", { className: ColorPicker_default.sliderLabel, children: label }),
-    /* @__PURE__ */ jsx("output", { className: ColorPicker_default.sliderValue, "aria-live": "off", children: slider?.getThumbValueLabel(0) })
+    /* @__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, ...rest }) {
+function HexInput({
+  label,
+  hint,
+  hintTone,
+  error,
+  focusRing,
+  children,
+  ...rest
+}) {
   const { labels } = useColorPickerContext();
   const { inputRef, text, setText, commit } = useColorDraft(toHexText, parseHex);
   return /* @__PURE__ */ jsx(
@@ -356,21 +376,25 @@ function HexInput({ label, hint, error, focusRing, ...rest }) {
       ...rest,
       label: label ?? labels.hex,
       hint,
+      hintTone,
       error,
       focusRing,
-      children: /* @__PURE__ */ jsx(Input.Wrapper, { children: /* @__PURE__ */ jsx(
-        Input.Field,
-        {
-          ref: inputRef,
-          autoCapitalize: "off",
-          autoCorrect: "off",
-          spellCheck: false,
-          value: text,
-          onBlur: commit,
-          onChange: (e) => setText(e.target.value),
-          onKeyDown: onCommitKeyDown(commit)
-        }
-      ) })
+      children: /* @__PURE__ */ jsxs(Input.Wrapper, { children: [
+        /* @__PURE__ */ jsx(
+          Input.Field,
+          {
+            ref: inputRef,
+            autoCapitalize: "off",
+            autoCorrect: "off",
+            spellCheck: false,
+            value: text,
+            onBlur: commit,
+            onChange: (e) => setText(e.target.value),
+            onKeyDown: onCommitKeyDown(commit)
+          }
+        ),
+        children
+      ] })
     }
   );
 }
@@ -419,10 +443,24 @@ function TriggerSwatch(props) {
   return /* @__PURE__ */ jsx(SwatchChip, { ...props, value: state.color.toString("css") });
 }
 TriggerSwatch.displayName = "ColorPicker.TriggerSwatch";
+function SwatchButton({ className, ...rest }) {
+  const { labels } = useColorPickerContext();
+  return /* @__PURE__ */ jsx(
+    FieldActionButton,
+    {
+      ...rest,
+      label: labels.palette,
+      className: cx(ColorPicker_default.swatchButton, className),
+      children: /* @__PURE__ */ jsx(TriggerSwatch, {})
+    }
+  );
+}
+SwatchButton.displayName = "ColorPicker.SwatchButton";
 var ColorPicker = {
   Root: ColorPickerRoot,
   Panel,
   TriggerSwatch,
+  SwatchButton,
   FormatSelect,
   ChannelStrip,
   HexInput,
@@ -478,6 +516,7 @@ function ColorField({
   required = false,
   optional,
   hint,
+  hintTone,
   error,
   className,
   "aria-label": ariaLabel,
@@ -528,6 +567,7 @@ function ColorField({
         required,
         optional,
         hint,
+        hintTone,
         error,
         disabled,
         optionalLabel: labels.optional,

package/dist/color-picker.d.ts

@@ -5,5 +5,5 @@
  */
 export type { ColorFieldLabels, ColorFieldProps } from "./components/color-field/ColorField";
 export { ColorField } from "./components/color-field/ColorField";
-export type { ColorPickerAreaProps, ColorPickerChannelStripProps, ColorPickerColorValue, ColorPickerEyeDropperButtonProps, ColorPickerFormatSelectProps, ColorPickerHexInputProps, ColorPickerLabels, ColorPickerPanelProps, ColorPickerRootProps, ColorPickerSliderMetaProps, ColorPickerSliderProps, ColorPickerSliderTrackProps, ColorPickerSwatchesProps, ColorPickerThumbProps, ColorPickerTriggerSwatchProps, ColorValueFormat, } from "./components/color-picker/ColorPicker";
+export type { ColorPickerAreaProps, ColorPickerChannelStripProps, ColorPickerColorValue, ColorPickerEyeDropperButtonProps, ColorPickerFormatSelectProps, ColorPickerHexInputProps, ColorPickerLabels, ColorPickerPanelProps, ColorPickerRootProps, ColorPickerSliderMetaProps, ColorPickerSliderProps, ColorPickerSliderTrackProps, ColorPickerSwatchButtonProps, ColorPickerSwatchesProps, ColorPickerThumbProps, ColorPickerTriggerSwatchProps, ColorValueFormat, } from "./components/color-picker/ColorPicker";
 export { ColorPicker, parseColor } from "./components/color-picker/ColorPicker";

package/dist/color-picker.js

@@ -4,9 +4,9 @@ import {
   ColorField,
   ColorPicker,
   parseColor
-} from "./chunks/chunk-HDBQICPW.js";
-import "./chunks/chunk-4PSQ64S4.js";
-import "./chunks/chunk-U3Q2I3MY.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

@@ -18,15 +18,19 @@ export type BreadcrumbRootProps = React.HTMLAttributes<HTMLElement> & {
     labels?: Partial<BreadcrumbLabels>;
     ref?: React.Ref<HTMLElement>;
 };
-declare function BreadcrumbRoot({ children, className, size: sizeProp, labels: labelsProp, ...rest }: BreadcrumbRootProps): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbRoot({ children, className, size: sizeProp, labels: labelsProp, ref, ...rest }: BreadcrumbRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BreadcrumbRoot {
     var displayName: string;
 }
 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/chart-frame/ChartFrame.d.ts

@@ -166,7 +166,7 @@ declare namespace ChartFrameDelta {
 }
 export type ChartFramePlotProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     /**
-     * Height of the plot area in px. `fill` takes the free height of a stretched panel (a `PageContent.Cell` with `rows`), the default height at least.
+     * Height of the plot area in px. `fill` takes the free height of a stretched panel (a `Page.Cell` with `rows`), the default height at least.
      */
     height?: number | "fill";
     /**

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/ChatRows.d.ts

@@ -2,7 +2,11 @@ import type * as React from "react";
 export type ChatSeparatorProps = React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };
-/** A date between messages («Сегодня», «12 марта»): a small pill that sticks while its day scrolls. */
+/**
+ * A date between messages («Сегодня», «12 марта»): a small pill that sticks while its day scrolls.
+ * An incoming bubble stands one step off the list's host, the pill one step above the bubble, so the
+ * two never share a fill while the bubbles pass under it.
+ */
 export declare function ChatSeparator({ className, children, ...rest }: ChatSeparatorProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ChatSeparator {
     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,8 @@ 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";
 export type { Color as ColorPickerColorValue } from "react-aria-components";
@@ -23,6 +25,8 @@ export type ColorPickerLabels = {
     eyeDropper: string;
     /** Hex field of `ChannelStrip` and the default `HexInput` label. */
     hex: string;
+    /** `ColorPicker.SwatchButton`: its name and tooltip. */
+    palette: string;
     hue: string;
     saturation: string;
     lightness: string;
@@ -79,10 +83,18 @@ 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.
      */
     error?: React.ReactNode;
+    /**
+     * End segments of the field box after the value: `ColorPicker.SwatchButton` (in a `Popover.Trigger`), so the hex and its swatch read as one field.
+     */
+    children?: React.ReactNode;
 };
 export { parseColor };
 /** Hex text of a color: `#rrggbb`, or `#rrggbbaa` when it is not opaque. */
@@ -158,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, ...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;
 }
@@ -181,10 +193,20 @@ declare function TriggerSwatch(props: ColorPickerTriggerSwatchProps): import("re
 declare namespace TriggerSwatch {
     var displayName: string;
 }
+export type ColorPickerSwatchButtonProps = Omit<FieldActionButtonProps, "label" | "children" | "asChild">;
+/**
+ * The current color as a button segment at the end of `HexInput` (named `labels.palette`, with a
+ * tooltip): the hex and its swatch read as one field. Wrap it in `Popover.Trigger` to open a panel.
+ */
+declare function SwatchButton({ className, ...rest }: ColorPickerSwatchButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SwatchButton {
+    var displayName: string;
+}
 export declare const ColorPicker: {
     Root: typeof ColorPickerRoot;
     Panel: typeof Panel;
     TriggerSwatch: typeof TriggerSwatch;
+    SwatchButton: typeof SwatchButton;
     FormatSelect: typeof FormatSelect;
     ChannelStrip: typeof ChannelStrip;
     HexInput: typeof HexInput;