@epam/ai-dial-ui-kit 0.16.0-dev.11 → 0.16.0-dev.12

package/dist/CHANGELOG.md

@@ -30,6 +30,8 @@ Versions match the git tags on the `development` branch.
 
 - **`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).
 
+- **`Calendar` (2.0) — `showTimezone` now labels the `datetime` popover's time field too** — the timezone hint appeared only on the `time` mode field, so a `datetime` picker left the entered time-of-day unzoned. The popover footer's time field now shows the same hint at its trailing edge, capped at 60% of the field so it never covers the masked value, and stretches across the row's remaining width while the hint is present; with no hint the footer field keeps its compact fixed width. `time` mode is unchanged, and hosts that do not set `showTimezone` see no change.
+
 ### Fixed
 
 - **Package — test declarations no longer published** — `dist/` carried 36 `.d.ts` files for specs, tests and mocks (`*.spec.ts`, `*.test.tsx`, `__tests__/`, `__mocks__/`), because the declaration build excluded only `*.spec.tsx` and stories. They are no longer emitted; the declarations `package.json` `exports` points to are unchanged.

package/dist/components/New/Calendar/Calendar.js

@@ -1,68 +1,68 @@
-import { jsx as e, jsxs as c, Fragment as O } from "react/jsx-runtime";
+import { jsx as e, jsxs as d, Fragment as w } from "react/jsx-runtime";
 import { useFloating as oe, autoUpdate as ce, offset as de, flip as me, shift as pe, useClick as fe, useDismiss as ue, useRole as he, useInteractions as ge, FloatingPortal as be, FloatingFocusManager as xe } from "@floating-ui/react";
 import { IconChevronDown as ye } from "@tabler/icons-react";
-import { useId as ve, useState as B, useMemo as S, useEffect as Ne } from "react";
+import { useId as ve, useState as z, useMemo as S, useEffect as Ne } from "react";
 import { Label as De } from "../Label/Label.js";
-import { StaticIconButton as K } from "../IconButton/IconButtonWrappers.js";
+import { StaticIconButton as P } from "../IconButton/IconButtonWrappers.js";
 import { DIAL_KIT_ICON_STROKE as Ce } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as Ie } from "../../../constants/icon.js";
+import { DIAL_ICON_SIZE as Le } from "../../../constants/icon.js";
 import { CalendarMode as D } from "../../../types/calendar.js";
-import { ElementSize as P } from "../../../types/size.js";
-import { useThemeScope as Le } from "../ThemeScope/ThemeScope.js";
-import { mergeClasses as d } from "../../../utils/merge-classes.js";
+import { ElementSize as W } from "../../../types/size.js";
+import { useThemeScope as Ie } from "../ThemeScope/ThemeScope.js";
+import { mergeClasses as i } from "../../../utils/merge-classes.js";
 import { getTimezoneLabel as Te } from "../../../utils/timezone.js";
-import { DEFAULT_CALENDAR_LOCALE as Se, calendarModeDefaultPlaceholder as Fe, calendarFieldIconClassName as Me, calendarNavIcons as W, calendarDaySelectedClassName as Oe, calendarDayTodayClassName as we, calendarDayOutsideClassName as ke, calendarDayButtonBaseClassName as Ae, calendarIcon as _e, calendarFieldDisabledClassName as J, calendarFieldInvalidClassName as Q, calendarFieldBaseClassName as X, calendarPopoverClassName as Ee } from "./constants.js";
-import { getWeekdayShortLabels as Be, getWeekdayOptions as Re, getMonthGrid as ze, formatTimeLabel as M, formatMonthLabel as $e, isSameDay as U, isDateOutOfRange as Y, formatDayAriaLabel as je, sanitizeTimeInput as Ve, isCompleteTimeString as Ke, setTimeOnDate as G, formatDateLabel as Z } from "./utils.js";
-import { DIAL_KIT_CLASS as E } from "../../../constants/public-class-names.js";
-const q = ({
-  id: s,
+import { DEFAULT_CALENDAR_LOCALE as Se, calendarModeDefaultPlaceholder as Fe, calendarFieldIconClassName as Me, calendarNavIcons as U, calendarDaySelectedClassName as we, calendarDayTodayClassName as Oe, calendarDayOutsideClassName as ke, calendarDayButtonBaseClassName as Ae, calendarIcon as _e, calendarFieldDisabledClassName as Q, calendarFieldInvalidClassName as X, calendarFieldBaseClassName as ee, calendarPopoverClassName as Ee } from "./constants.js";
+import { getWeekdayShortLabels as Be, getWeekdayOptions as ze, getMonthGrid as Re, formatTimeLabel as M, formatMonthLabel as $e, isSameDay as Y, isDateOutOfRange as G, formatDayAriaLabel as je, sanitizeTimeInput as Ve, isCompleteTimeString as Ke, setTimeOnDate as Z, formatDateLabel as q } from "./utils.js";
+import { DIAL_KIT_CLASS as B } from "../../../constants/public-class-names.js";
+const H = ({
+  id: o,
   disabled: a,
-  invalid: p,
+  invalid: f,
   trigger: C,
-  panelClassName: i,
-  fieldClassName: I,
+  panelClassName: c,
+  fieldClassName: L,
   panel: x,
   labelledBy: y,
-  panelLabel: L
+  panelLabel: I
 }) => {
-  const f = Le(), [u, h] = B(!1), { refs: l, floatingStyles: v, context: o } = oe({
-    open: u,
-    onOpenChange: (k) => h(a ? !1 : k),
+  const u = Ie(), [h, v] = z(!1), { refs: l, floatingStyles: g, context: m } = oe({
+    open: h,
+    onOpenChange: (k) => v(a ? !1 : k),
     placement: "bottom-start",
     whileElementsMounted: ce,
     middleware: [de(8), me({ padding: 8 }), pe({ padding: 8 })]
-  }), g = fe(o, { enabled: !a }), n = ue(o), w = he(o, { role: "dialog" }), { getReferenceProps: b, getFloatingProps: F } = ge([
-    g,
+  }), s = fe(m, { enabled: !a }), n = ue(m), O = he(m, { role: "dialog" }), { getReferenceProps: b, getFloatingProps: F } = ge([
+    s,
     n,
-    w
+    O
   ]);
-  return /* @__PURE__ */ c(O, { children: [
+  return /* @__PURE__ */ d(w, { children: [
     /* @__PURE__ */ e(
       "div",
       {
-        id: s,
+        id: o,
         ref: l.setReference,
         role: "button",
         "aria-haspopup": "dialog",
-        "aria-expanded": u,
+        "aria-expanded": h,
         "aria-disabled": a,
         "aria-labelledby": y,
         tabIndex: a ? -1 : 0,
-        className: d(
-          X,
+        className: i(
+          ee,
           "focus-visible:outline focus-visible:outline-focus",
-          p && Q,
-          a && J,
-          I
+          f && X,
+          a && Q,
+          L
         ),
         ...b(),
         children: C
       }
     ),
-    u && /* @__PURE__ */ e(be, { children: /* @__PURE__ */ e(
+    h && /* @__PURE__ */ e(be, { children: /* @__PURE__ */ e(
       xe,
       {
-        context: o,
+        context: m,
         modal: !1,
         initialFocus: -1,
         returnFocus: !0,
@@ -70,169 +70,179 @@ const q = ({
           "div",
           {
             ref: l.setFloating,
-            style: v,
-            "aria-label": L,
-            className: d(
+            style: g,
+            "aria-label": I,
+            className: i(
               Ee,
-              f,
-              i
+              u,
+              c
             ),
             ...F(),
-            children: x(() => h(!1))
+            children: x(() => v(!1))
           }
         )
       }
     ) })
   ] });
-}, H = ({
-  id: s,
+}, J = ({
+  id: o,
   value: a,
-  onChange: p,
+  onChange: f,
   onBlur: C,
-  disabled: i,
-  invalid: I,
+  disabled: c,
+  invalid: L,
   className: x,
   ariaLabel: y,
-  placeholder: L = "--:--",
-  timezoneLabel: f
+  placeholder: I = "--:--",
+  timezoneLabel: u,
+  timezoneLabelClassName: h
 }) => {
-  const [u, h] = B(a);
+  const [v, l] = z(a);
   Ne(() => {
-    h(a);
+    l(a);
   }, [a]);
-  const l = /* @__PURE__ */ e(
+  const g = /* @__PURE__ */ e(
     "input",
     {
-      id: s,
+      id: o,
       type: "text",
       inputMode: "numeric",
       autoComplete: "off",
       "aria-label": y,
-      placeholder: L,
-      disabled: i,
-      value: u,
-      onChange: (v) => {
-        const o = Ve(v.target.value);
-        h(o), Ke(o) && p(o);
+      placeholder: I,
+      disabled: c,
+      value: v,
+      onChange: (m) => {
+        const s = Ve(m.target.value);
+        l(s), Ke(s) && f(s);
       },
       onBlur: C,
-      className: d(
-        X,
-        I && Q,
-        i && J,
+      className: i(
+        ee,
+        L && X,
+        c && Q,
         x
       )
     }
   );
-  return f ? /* @__PURE__ */ c("div", { className: "relative w-full", children: [
-    l,
-    /* @__PURE__ */ e("span", { className: "dial-small-paragraph-text pointer-events-none absolute end-4 top-1/2 -translate-y-1/2 truncate text-secondary", children: f })
-  ] }) : l;
+  return u ? /* @__PURE__ */ d("div", { className: "relative w-full", children: [
+    g,
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: i(
+          "dial-small-paragraph-text pointer-events-none absolute end-4 top-1/2 -translate-y-1/2 truncate text-secondary",
+          h
+        ),
+        children: u
+      }
+    )
+  ] }) : g;
 }, rt = ({
-  mode: s = D.Date,
+  mode: o = D.Date,
   value: a,
-  onChange: p,
+  onChange: f,
   onBlur: C,
-  labelProps: i,
-  placeholder: I,
+  labelProps: c,
+  placeholder: L,
   disabled: x = !1,
   invalid: y = !1,
-  id: L,
-  className: f,
-  minDate: u,
-  maxDate: h,
+  id: I,
+  className: u,
+  minDate: h,
+  maxDate: v,
   locale: l = Se,
-  fieldClassName: v,
-  showTimezone: o = !1
+  fieldClassName: g,
+  showTimezone: m = !1
 }) => {
-  const g = I ?? Fe[s], n = a instanceof Date ? a : null, w = ve(), b = L ?? w, F = i?.id ?? `${b}-label`, k = !!i?.label, A = typeof i?.label == "string" ? i.label : void 0, R = k ? `${F} ${b}` : void 0, _ = i ? /* @__PURE__ */ e(De, { ...i, id: F, htmlFor: b }) : null, [T, ee] = B(
+  const s = L ?? Fe[o], n = a instanceof Date ? a : null, O = ve(), b = I ?? O, F = c?.id ?? `${b}-label`, k = !!c?.label, A = typeof c?.label == "string" ? c.label : void 0, R = k ? `${F} ${b}` : void 0, _ = c ? /* @__PURE__ */ e(De, { ...c, id: F, htmlFor: b }) : null, [T, te] = z(
     () => n ?? /* @__PURE__ */ new Date()
-  ), te = S(() => /* @__PURE__ */ new Date(), []), ae = S(
-    () => o ? Te({ locale: l }) : null,
-    [o, l]
+  ), ae = S(() => /* @__PURE__ */ new Date(), []), E = S(
+    () => m ? Te({ locale: l }) : null,
+    [m, l]
   ), le = S(
     () => Be(l),
     [l]
-  ), z = S(() => Re(l), [l]), ne = S(
-    () => ze(T.getFullYear(), T.getMonth()),
+  ), $ = S(() => ze(l), [l]), ne = S(
+    () => Re(T.getFullYear(), T.getMonth()),
     [T]
-  ), $ = (r) => {
-    ee(
+  ), j = (r) => {
+    te(
       (t) => new Date(t.getFullYear(), t.getMonth() + r, 1)
     );
   }, re = (r, t) => {
-    if (Y(r, u, h)) return;
-    const N = s === D.DateTime && n ? G(r, M(n)) : r;
-    p?.(N), s === D.Date && t();
+    if (G(r, h, v)) return;
+    const N = o === D.DateTime && n ? Z(r, M(n)) : r;
+    f?.(N), o === D.Date && t();
   }, se = (r) => {
-    p?.(G(n ?? /* @__PURE__ */ new Date(), r));
-  }, ie = () => n ? s === D.DateTime ? `${Z(n, l)}, ${M(n)}` : Z(n, l) : g;
-  if (s === D.Time) {
+    f?.(Z(n ?? /* @__PURE__ */ new Date(), r));
+  }, ie = () => n ? o === D.DateTime ? `${q(n, l)}, ${M(n)}` : q(n, l) : s;
+  if (o === D.Time) {
     const r = typeof a == "string" ? a : n ? M(n) : "";
-    return /* @__PURE__ */ c(
+    return /* @__PURE__ */ d(
       "div",
       {
-        className: d(
+        className: i(
           "flex flex-col gap-y-3",
-          f,
-          E.calendar
+          u,
+          B.calendar
         ),
         children: [
           _,
           /* @__PURE__ */ e(
-            H,
+            J,
             {
               id: b,
               value: r,
-              onChange: (t) => p?.(t),
+              onChange: (t) => f?.(t),
               onBlur: C,
               disabled: x,
               invalid: y,
-              placeholder: g,
-              className: v,
-              timezoneLabel: ae
+              placeholder: s,
+              className: g,
+              timezoneLabel: E
             }
           )
         ]
       }
     );
   }
-  if (s === D.Weekday) {
-    const r = typeof a == "string" ? a : void 0, t = z.find((N) => N.value === r);
-    return /* @__PURE__ */ c(
+  if (o === D.Weekday) {
+    const r = typeof a == "string" ? a : void 0, t = $.find((N) => N.value === r);
+    return /* @__PURE__ */ d(
       "div",
       {
-        className: d(
+        className: i(
           "flex flex-col gap-y-3",
-          f,
-          E.calendar
+          u,
+          B.calendar
         ),
         children: [
           _,
           /* @__PURE__ */ e(
-            q,
+            H,
             {
               id: b,
               disabled: x,
               invalid: y,
               labelledBy: R,
-              panelLabel: A ?? g,
-              fieldClassName: v,
-              trigger: /* @__PURE__ */ c(O, { children: [
+              panelLabel: A ?? s,
+              fieldClassName: g,
+              trigger: /* @__PURE__ */ d(w, { children: [
                 /* @__PURE__ */ e(
                   "span",
                   {
-                    className: d(
+                    className: i(
                       "truncate",
                       !t && "text-secondary"
                     ),
-                    children: t?.label ?? g
+                    children: t?.label ?? s
                   }
                 ),
                 /* @__PURE__ */ e(
                   ye,
                   {
-                    size: Ie.MD,
+                    size: Le.MD,
                     stroke: Ce,
                     "aria-hidden": "true",
                     className: Me
@@ -243,25 +253,25 @@ const q = ({
                 "div",
                 {
                   role: "listbox",
-                  "aria-label": A ?? g,
+                  "aria-label": A ?? s,
                   className: "flex flex-col gap-0.5",
-                  children: z.map((m) => /* @__PURE__ */ e(
+                  children: $.map((p) => /* @__PURE__ */ e(
                     "button",
                     {
                       type: "button",
                       role: "option",
-                      "aria-selected": m.value === r,
-                      className: d(
+                      "aria-selected": p.value === r,
+                      className: i(
                         "flex w-full items-center rounded-lg px-3 py-2 text-left dial-small-text text-primary hover:bg-control-accent-alpha-hover",
                         "focus-visible:outline focus-visible:outline-focus",
-                        m.value === r && "bg-control-accent-alpha-hover"
+                        p.value === r && "bg-control-accent-alpha-hover"
                       ),
                       onClick: () => {
-                        p?.(m.value), N();
+                        f?.(p.value), N();
                       },
-                      children: m.label
+                      children: p.label
                     },
-                    m.value
+                    p.value
                   ))
                 }
               )
@@ -271,30 +281,30 @@ const q = ({
       }
     );
   }
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: d(
+      className: i(
         "flex flex-col gap-y-3",
-        f,
-        E.calendar
+        u,
+        B.calendar
       ),
       children: [
         _,
         /* @__PURE__ */ e(
-          q,
+          H,
           {
             id: b,
             disabled: x,
             invalid: y,
             labelledBy: R,
-            panelLabel: A ?? g,
-            fieldClassName: v,
-            trigger: /* @__PURE__ */ c(O, { children: [
+            panelLabel: A ?? s,
+            fieldClassName: g,
+            trigger: /* @__PURE__ */ d(w, { children: [
               /* @__PURE__ */ e(
                 "span",
                 {
-                  className: d(
+                  className: i(
                     "truncate",
                     !n && "text-secondary"
                   ),
@@ -303,15 +313,15 @@ const q = ({
               ),
               _e
             ] }),
-            panel: (r) => /* @__PURE__ */ c(O, { children: [
-              /* @__PURE__ */ c("div", { className: "flex items-center justify-between", children: [
+            panel: (r) => /* @__PURE__ */ d(w, { children: [
+              /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ e(
-                  K,
+                  P,
                   {
                     "aria-label": "Previous month",
-                    icon: W.prev,
-                    size: P.Small,
-                    onClick: () => $(-1)
+                    icon: U.prev,
+                    size: W.Small,
+                    onClick: () => j(-1)
                   }
                 ),
                 /* @__PURE__ */ e(
@@ -323,16 +333,16 @@ const q = ({
                   }
                 ),
                 /* @__PURE__ */ e(
-                  K,
+                  P,
                   {
                     "aria-label": "Next month",
-                    icon: W.next,
-                    size: P.Small,
-                    onClick: () => $(1)
+                    icon: U.next,
+                    size: W.Small,
+                    onClick: () => j(1)
                   }
                 )
               ] }),
-              /* @__PURE__ */ c("div", { className: "grid grid-cols-7 gap-y-1 text-center", children: [
+              /* @__PURE__ */ d("div", { className: "grid grid-cols-7 gap-y-1 text-center", children: [
                 le.map((t) => /* @__PURE__ */ e(
                   "div",
                   {
@@ -343,21 +353,21 @@ const q = ({
                   t
                 )),
                 ne.map((t) => {
-                  const N = t.getMonth() !== T.getMonth(), m = U(t, n), j = U(t, te), V = Y(t, u, h);
+                  const N = t.getMonth() !== T.getMonth(), p = Y(t, n), V = Y(t, ae), K = G(t, h, v);
                   return /* @__PURE__ */ e(
                     "button",
                     {
                       type: "button",
-                      disabled: V,
+                      disabled: K,
                       "aria-label": je(t, l),
-                      "aria-pressed": m,
-                      "aria-current": j ? "date" : void 0,
-                      className: d(
+                      "aria-pressed": p,
+                      "aria-current": V ? "date" : void 0,
+                      className: i(
                         Ae,
                         N && ke,
-                        j && !m && we,
-                        m && Oe,
-                        V && "cursor-not-allowed opacity-40 hover:bg-transparent"
+                        V && !p && Oe,
+                        p && we,
+                        K && "cursor-not-allowed opacity-40 hover:bg-transparent"
                       ),
                       onClick: () => re(t, r),
                       children: t.getDate()
@@ -366,16 +376,21 @@ const q = ({
                   );
                 })
               ] }),
-              s === D.DateTime && /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-3 border-t border-secondary pt-3", children: [
+              o === D.DateTime && /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-3 border-t border-secondary pt-3", children: [
                 /* @__PURE__ */ e("span", { className: "dial-small-text text-primary", children: "Time" }),
                 /* @__PURE__ */ e(
-                  H,
+                  J,
                   {
                     ariaLabel: "Time",
                     value: n ? M(n) : "",
                     onChange: se,
                     onBlur: C,
-                    className: "w-[120px] px-3 py-1.5"
+                    className: i(
+                      !E && "w-[120px]",
+                      "px-3 py-1.5"
+                    ),
+                    timezoneLabel: E,
+                    timezoneLabelClassName: "end-3 max-w-[60%]"
                   }
                 )
               ] })

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.11",
-  "generatedAt": "2026-10-15T06:35:43.091Z",
+  "version": "0.16.0-dev.12",
+  "generatedAt": "2026-10-18T12:30:06.437Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -520,7 +520,7 @@
           "type": "boolean",
           "required": false,
           "defaultValue": "false",
-          "description": "Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`) at the trailing edge of the `time` field"
+          "description": "Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`) at the trailing edge of the time fields (`time` mode and the `datetime` popover footer)"
         }
       ],
       "examples": [