@epam/ai-dial-ui-kit 0.16.0-dev.5 → 0.16.0-dev.6

package/dist/CHANGELOG.md

@@ -13,12 +13,12 @@ Versions match the git tags on the `development` branch.
 
 - **`Popup` (2.0) — footer buttons split the row evenly on mobile** — below the `mobile` breakpoint (768px), where the popup fills the screen, the trailing `mainButtons` group now spans the footer and each of its buttons takes an equal share, so a Cancel/Confirm pair renders 50/50 and a single button fills the row. `additionalButtons` in the trailing group stretch with it; with `additionalButtonsOnLeft` they keep their natural width. Desktop is unchanged, a caller's `className` on a button still merges on top, and a custom `footer` node is not touched. The props are unchanged. Reported on the mobile dialogs in ai-dial-chat.
 
+- **`Avatar` (2.0) — `color`, with `AVATAR_PALETTE`, `AvatarColor` and `AvatarColorClasses` exported** — the colour pair was derived from `name` alone, so a host that needed every avatar of one kind to share a colour — every row of one entity type in its brand pairing — could only fight the component: a root `className` could at best force the background with `!important` arbitrary values, and the initials' foreground sits on an inner element no root class reaches, where the only prop landing there (`textClassName`) ties with the kit's own class at equal specificity and the winner is decided by stylesheet order. `color` takes an `AvatarColorClasses` pair and replaces both halves of the name-derived pick, background and initials foreground, applied with the component's own class cascade. `AVATAR_PALETTE` is exported as a record keyed by the new `AvatarColor` enum (one key per entry, named after its background token), so a host pins a colour directly — `color={AVATAR_PALETTE[AvatarColor.Violet1]}` — with no `.find` on class-name substrings and no new colour vocabulary; the `AvatarColorClasses` pair type is exported with it. A name that is a locale string no longer reshuffles the colour per translation. Without `color` the deterministic pick is unchanged, and a missing or broken image still falls back to the initials — on the overridden pair. Additive. Requested in [#928](https://github.com/epam/ai-dial-ui-kit/issues/928).
+
 ### Fixed
 
 - **`MarkdownEditor` (2.0) — toolbar no longer overflows on narrow cards** — on a phone-width card the formatting group did not wrap, so its last buttons ran past the card edge and the edit/preview/fullscreen group dropped onto a second line at the start. The formatting group now wraps inside the card and the mode group stays at the inline end. Wide toolbars are unchanged ([ai-dial-chat#9389](https://github.com/epam/ai-dial-chat/issues/9389)).
 
----
-
 ## [0.15.0]
 
 ### Breaking Changes

package/dist/_virtual/index2.js

@@ -1,7 +1,4 @@
-import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
-import { __require as r } from "../node_modules/fast-deep-equal/index.js";
-var t = r();
-const p = /* @__PURE__ */ e(t);
+var e = {};
 export {
-  p as default
+  e as __exports
 };

package/dist/_virtual/index3.js

@@ -1,4 +1,7 @@
-var e = {};
+import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
+import { __require as r } from "../node_modules/fast-deep-equal/index.js";
+var t = r();
+const p = /* @__PURE__ */ e(t);
 export {
-  e as __exports
+  p as default
 };

package/dist/components/New/Avatar/Avatar.js

@@ -1,31 +1,32 @@
 import { jsx as a } from "react/jsx-runtime";
-import { useState as C } from "react";
-import { DIAL_KIT_CLASS as b } from "../../../constants/public-class-names.js";
+import { useState as b } from "react";
+import { DIAL_KIT_CLASS as w } from "../../../constants/public-class-names.js";
 import { AvatarShape as d } from "../../../types/avatar.js";
-import { pickAvatarColor as w, extractInitials as I } from "../../../utils/avatar.js";
+import { pickAvatarColor as I, extractInitials as N } from "../../../utils/avatar.js";
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
-const N = {
+const j = {
   [d.Circle]: "rounded-full",
   [d.Square]: "rounded-md"
-}, E = ({
+}, q = ({
   name: s,
   initials: c,
   src: r,
   alt: t = "",
   size: o = 32,
   shape: f = d.Circle,
-  className: h,
+  color: h,
+  className: u,
   textClassName: l,
-  onImageError: u
+  onImageError: S
 }) => {
-  const [S, p] = C(), v = !!r && S !== r, i = t !== "", m = (n) => e(
+  const [p, v] = b(), g = !!r && p !== r, i = t !== "", m = (n) => e(
     "inline-flex shrink-0 select-none items-center justify-center overflow-hidden",
-    N[f],
+    j[f],
     n,
-    h,
-    b.avatar
+    u,
+    w.avatar
   );
-  if (v)
+  if (g)
     return /* @__PURE__ */ a(
       "img",
       {
@@ -35,18 +36,18 @@ const N = {
         height: o,
         className: e(m(), "object-cover"),
         onError: (n) => {
-          p(r), u?.(n);
+          v(r), S?.(n);
         }
       }
     );
-  const { background: g, foreground: A } = w(s);
+  const { background: A, foreground: C } = h ?? I(s);
   return /* @__PURE__ */ a(
     "span",
     {
       role: i ? "img" : void 0,
       "aria-label": i ? t : void 0,
       "aria-hidden": i ? void 0 : !0,
-      className: m(e(g, A)),
+      className: m(e(A, C)),
       style: {
         width: o,
         height: o,
@@ -59,12 +60,12 @@ const N = {
             "leading-none",
             l ?? "font-semibold"
           ),
-          children: c ?? I(s)
+          children: c ?? N(s)
         }
       )
     }
   );
 };
 export {
-  E as Avatar
+  q as Avatar
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.5",
-  "generatedAt": "2026-10-12T20:58:15.414Z",
+  "version": "0.16.0-dev.6",
+  "generatedAt": "2026-10-13T09:45:10.487Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -3660,7 +3660,7 @@
       "name": "Avatar",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A person's or an entity's picture, or its initials on a colour picked from\nits name.\naliases: UserAvatar|InitialsAvatar|ProfilePicture\nDesign system 2.0\n\nThe same name always gets the same colour, drawn from the theme's visual\ntokens, so a list of avatars stays stable between renders and sessions. An\nimage that is missing or fails to load falls back to the initials; a new\n`src` tries the image again.\n\nAn avatar with an `alt` is a `role=\"img\"` named by it, whether it shows the\nimage or the initials. Without one it is decorative and hidden from\nassistive technology, which is right when a visible name sits beside it.",
+      "description": "A person's or an entity's picture, or its initials on a colour picked from\nits name.\naliases: UserAvatar|InitialsAvatar|ProfilePicture\nDesign system 2.0\n\nThe same name always gets the same colour, drawn from the theme's visual\ntokens, so a list of avatars stays stable between renders and sessions; pass\n`color` to pin one entry of `AVATAR_PALETTE` instead, so every avatar of a\nkind shares one colour regardless of name or locale. An image that is\nmissing or fails to load falls back to the initials; a new `src` tries the\nimage again.\n\nAn avatar with an `alt` is a `role=\"img\"` named by it, whether it shows the\nimage or the initials. Without one it is decorative and hidden from\nassistive technology, which is right when a visible name sits beside it.",
       "props": [
         {
           "name": "name",
@@ -3701,6 +3701,12 @@
           "defaultValue": "AvatarShape.Circle",
           "description": "Outline of the avatar"
         },
+        {
+          "name": "color",
+          "type": "AvatarColorClasses",
+          "required": false,
+          "description": "Explicit colour pair overriding the deterministic pick from `name`"
+        },
         {
           "name": "className",
           "type": "string",
@@ -12018,6 +12024,41 @@
       "sourceFile": "types/badge.ts",
       "description": "How a `Badge` is drawn."
     },
+    {
+      "name": "AvatarColor",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Green1",
+          "value": "'green-1'"
+        },
+        {
+          "name": "Violet2",
+          "value": "'violet-2'"
+        },
+        {
+          "name": "Brown",
+          "value": "'brown'"
+        },
+        {
+          "name": "Red",
+          "value": "'red'"
+        },
+        {
+          "name": "Green2",
+          "value": "'green-2'"
+        },
+        {
+          "name": "Blue",
+          "value": "'blue'"
+        },
+        {
+          "name": "Violet1",
+          "value": "'violet-1'"
+        }
+      ],
+      "sourceFile": "types/avatar.ts"
+    },
     {
       "name": "AvatarShape",
       "kind": "enum",
@@ -12036,6 +12077,22 @@
       "sourceFile": "types/avatar.ts",
       "description": "The outline an `Avatar` is clipped to."
     },
+    {
+      "name": "AvatarColorClasses",
+      "kind": "interface",
+      "members": [
+        {
+          "name": "background",
+          "value": "string"
+        },
+        {
+          "name": "foreground",
+          "value": "string"
+        }
+      ],
+      "sourceFile": "utils/avatar.ts",
+      "description": "A background and text colour pair for an initials avatar, as Tailwind classes."
+    },
     {
       "name": "EntityIdentityItem",
       "kind": "interface",
@@ -12421,6 +12478,11 @@
       "description": "Class names of the enclosing `ThemeScope`s, outermost first, or `''` when the\ncaller sits outside any scope. Components rendering into a `FloatingPortal`\nmerge this onto their floating root so the tokens follow them out of the\nsubtree.",
       "signature": "() => string"
     },
+    {
+      "name": "AVATAR_PALETTE",
+      "sourceFile": "utils/avatar.ts",
+      "signature": "AVATAR_PALETTE: Record<AvatarColor, AvatarColorClasses>"
+    },
     {
       "name": "extractInitials",
       "sourceFile": "utils/avatar.ts",