@epam/ai-dial-ui-kit 0.15.0-dev.4 → 0.15.0-dev.6

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

@@ -1,65 +1,65 @@
 import { jsx as e, jsxs as c, Fragment as O } from "react/jsx-runtime";
-import { useFloating as se, autoUpdate as ie, offset as oe, flip as ce, shift as de, useClick as me, useDismiss as pe, useRole as ue, useInteractions as fe, FloatingPortal as he, FloatingFocusManager as ge } from "@floating-ui/react";
-import { IconChevronDown as be } from "@tabler/icons-react";
-import { useId as xe, useState as E, useMemo as F, useEffect as ye } from "react";
-import { Label as ve } from "../Label/Label.js";
-import { StaticIconButton as j } from "../IconButton/IconButtonWrappers.js";
-import { DIAL_KIT_ICON_STROKE as Ne } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as De } from "../../../constants/icon.js";
-import { CalendarMode as N } from "../../../types/calendar.js";
-import { ElementSize as V } from "../../../types/size.js";
-import { useThemeScope as Ce } from "../ThemeScope/ThemeScope.js";
+import { useFloating as ie, autoUpdate as oe, offset as ce, flip as de, shift as me, useClick as pe, useDismiss as fe, useRole as ue, useInteractions as he, FloatingPortal as ge, FloatingFocusManager as be } from "@floating-ui/react";
+import { IconChevronDown as xe } from "@tabler/icons-react";
+import { useId as ye, useState as B, useMemo as F, useEffect as ve } from "react";
+import { Label as Ne } from "../Label/Label.js";
+import { StaticIconButton as V } from "../IconButton/IconButtonWrappers.js";
+import { DIAL_KIT_ICON_STROKE as De } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as Ce } from "../../../constants/icon.js";
+import { CalendarMode as D } from "../../../types/calendar.js";
+import { ElementSize as P } from "../../../types/size.js";
+import { useThemeScope as Ie } from "../ThemeScope/ThemeScope.js";
 import { mergeClasses as d } from "../../../utils/merge-classes.js";
-import { getTimezoneLabel as Ie } from "../../../utils/timezone.js";
-import { DEFAULT_CALENDAR_LOCALE as Le, calendarModeDefaultPlaceholder as Te, calendarFieldIconClassName as Fe, calendarNavIcons as P, calendarDaySelectedClassName as Se, calendarDayTodayClassName as Me, calendarDayOutsideClassName as Oe, calendarDayButtonBaseClassName as we, calendarIcon as ke, calendarFieldDisabledClassName as q, calendarFieldInvalidClassName as H, calendarFieldBaseClassName as J, calendarPopoverClassName as Be } from "./constants.js";
-import { getWeekdayShortLabels as Ee, getWeekdayOptions as Ae, getMonthGrid as _e, formatTimeLabel as M, formatMonthLabel as Re, isSameDay as W, isDateOutOfRange as K, formatDayAriaLabel as ze, sanitizeTimeInput as $e, isCompleteTimeString as je, setTimeOnDate as U, formatDateLabel as Y } from "./utils.js";
-const G = ({
+import { getTimezoneLabel as Le } from "../../../utils/timezone.js";
+import { DEFAULT_CALENDAR_LOCALE as Te, calendarModeDefaultPlaceholder as Fe, calendarFieldIconClassName as Se, calendarNavIcons as W, calendarDaySelectedClassName as Me, calendarDayTodayClassName as Oe, calendarDayOutsideClassName as we, calendarDayButtonBaseClassName as ke, calendarIcon as Ee, calendarFieldDisabledClassName as H, calendarFieldInvalidClassName as J, calendarFieldBaseClassName as Q, calendarPopoverClassName as Ae } from "./constants.js";
+import { getWeekdayShortLabels as Be, getWeekdayOptions as _e, getMonthGrid as Re, formatTimeLabel as M, formatMonthLabel as ze, isSameDay as K, isDateOutOfRange as U, formatDayAriaLabel as $e, sanitizeTimeInput as je, isCompleteTimeString as Ve, setTimeOnDate as Y, formatDateLabel as G } from "./utils.js";
+const Z = ({
   id: s,
   disabled: a,
-  invalid: u,
-  trigger: i,
-  panelClassName: C,
-  fieldClassName: x,
-  panel: y,
-  labelledBy: I,
-  panelLabel: f
+  invalid: p,
+  trigger: C,
+  panelClassName: i,
+  fieldClassName: I,
+  panel: x,
+  labelledBy: y,
+  panelLabel: L
 }) => {
-  const D = Ce(), [m, l] = E(!1), { refs: h, floatingStyles: g, context: o } = se({
-    open: m,
-    onOpenChange: (L) => l(a ? !1 : L),
+  const f = Ie(), [u, h] = B(!1), { refs: l, floatingStyles: v, context: o } = ie({
+    open: u,
+    onOpenChange: (k) => h(a ? !1 : k),
     placement: "bottom-start",
-    whileElementsMounted: ie,
-    middleware: [oe(8), ce({ padding: 8 }), de({ padding: 8 })]
-  }), n = me(o, { enabled: !a }), w = pe(o), b = ue(o, { role: "dialog" }), { getReferenceProps: S, getFloatingProps: k } = fe([
+    whileElementsMounted: oe,
+    middleware: [ce(8), de({ padding: 8 }), me({ padding: 8 })]
+  }), g = pe(o, { enabled: !a }), n = fe(o), w = ue(o, { role: "dialog" }), { getReferenceProps: b, getFloatingProps: S } = he([
+    g,
     n,
-    w,
-    b
+    w
   ]);
   return /* @__PURE__ */ c(O, { children: [
     /* @__PURE__ */ e(
       "div",
       {
         id: s,
-        ref: h.setReference,
+        ref: l.setReference,
         role: "button",
         "aria-haspopup": "dialog",
-        "aria-expanded": m,
+        "aria-expanded": u,
         "aria-disabled": a,
-        "aria-labelledby": I,
+        "aria-labelledby": y,
         tabIndex: a ? -1 : 0,
         className: d(
-          J,
+          Q,
           "focus-visible:outline focus-visible:outline-focus",
-          u && H,
-          a && q,
-          x
+          p && J,
+          a && H,
+          I
         ),
-        ...S(),
-        children: i
+        ...b(),
+        children: C
       }
     ),
-    m && /* @__PURE__ */ e(he, { children: /* @__PURE__ */ e(
-      ge,
+    u && /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ e(
+      be,
       {
         context: o,
         modal: !1,
@@ -68,35 +68,36 @@ const G = ({
         children: /* @__PURE__ */ e(
           "div",
           {
-            ref: h.setFloating,
-            style: g,
-            "aria-label": f,
+            ref: l.setFloating,
+            style: v,
+            "aria-label": L,
             className: d(
-              Be,
-              D,
-              C
+              Ae,
+              f,
+              i
             ),
-            ...k(),
-            children: y(() => l(!1))
+            ...S(),
+            children: x(() => h(!1))
           }
         )
       }
     ) })
   ] });
-}, Z = ({
+}, q = ({
   id: s,
   value: a,
-  onChange: u,
+  onChange: p,
+  onBlur: C,
   disabled: i,
-  invalid: C,
+  invalid: I,
   className: x,
   ariaLabel: y,
-  placeholder: I = "--:--",
+  placeholder: L = "--:--",
   timezoneLabel: f
 }) => {
-  const [D, m] = E(a);
-  ye(() => {
-    m(a);
+  const [u, h] = B(a);
+  ve(() => {
+    h(a);
   }, [a]);
   const l = /* @__PURE__ */ e(
     "input",
@@ -106,17 +107,18 @@ const G = ({
       inputMode: "numeric",
       autoComplete: "off",
       "aria-label": y,
-      placeholder: I,
+      placeholder: L,
       disabled: i,
-      value: D,
-      onChange: (h) => {
-        const g = $e(h.target.value);
-        m(g), je(g) && u(g);
+      value: u,
+      onChange: (v) => {
+        const o = je(v.target.value);
+        h(o), Ve(o) && p(o);
       },
+      onBlur: C,
       className: d(
-        J,
-        C && H,
-        i && q,
+        Q,
+        I && J,
+        i && H,
         x
       )
     }
@@ -125,76 +127,78 @@ const G = ({
     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;
-}, at = ({
-  mode: s = N.Date,
+}, lt = ({
+  mode: s = D.Date,
   value: a,
-  onChange: u,
+  onChange: p,
+  onBlur: C,
   labelProps: i,
-  placeholder: C,
+  placeholder: I,
   disabled: x = !1,
   invalid: y = !1,
-  id: I,
+  id: L,
   className: f,
-  minDate: D,
-  maxDate: m,
-  locale: l = Le,
-  fieldClassName: h,
-  showTimezone: g = !1
+  minDate: u,
+  maxDate: h,
+  locale: l = Te,
+  fieldClassName: v,
+  showTimezone: o = !1
 }) => {
-  const o = C ?? Te[s], n = a instanceof Date ? a : null, w = xe(), b = I ?? w, S = i?.id ?? `${b}-label`, k = !!i?.label, L = typeof i?.label == "string" ? i.label : void 0, A = k ? `${S} ${b}` : void 0, B = i ? /* @__PURE__ */ e(ve, { ...i, id: S, htmlFor: b }) : null, [T, Q] = E(
+  const g = I ?? Fe[s], n = a instanceof Date ? a : null, w = ye(), b = L ?? w, S = i?.id ?? `${b}-label`, k = !!i?.label, E = typeof i?.label == "string" ? i.label : void 0, _ = k ? `${S} ${b}` : void 0, A = i ? /* @__PURE__ */ e(Ne, { ...i, id: S, htmlFor: b }) : null, [T, X] = B(
     () => n ?? /* @__PURE__ */ new Date()
-  ), X = F(() => /* @__PURE__ */ new Date(), []), ee = F(
-    () => g ? Ie({ locale: l }) : null,
-    [g, l]
-  ), te = F(
-    () => Ee(l),
+  ), ee = F(() => /* @__PURE__ */ new Date(), []), te = F(
+    () => o ? Le({ locale: l }) : null,
+    [o, l]
+  ), ae = F(
+    () => Be(l),
     [l]
-  ), _ = F(() => Ae(l), [l]), ae = F(
-    () => _e(T.getFullYear(), T.getMonth()),
+  ), R = F(() => _e(l), [l]), le = F(
+    () => Re(T.getFullYear(), T.getMonth()),
     [T]
-  ), R = (r) => {
-    Q(
+  ), z = (r) => {
+    X(
       (t) => new Date(t.getFullYear(), t.getMonth() + r, 1)
     );
-  }, le = (r, t) => {
-    if (K(r, D, m)) return;
-    const v = s === N.DateTime && n ? U(r, M(n)) : r;
-    u?.(v), s === N.Date && t();
-  }, ne = (r) => {
-    u?.(U(n ?? /* @__PURE__ */ new Date(), r));
-  }, re = () => n ? s === N.DateTime ? `${Y(n, l)}, ${M(n)}` : Y(n, l) : o;
-  if (s === N.Time) {
+  }, ne = (r, t) => {
+    if (U(r, u, h)) return;
+    const N = s === D.DateTime && n ? Y(r, M(n)) : r;
+    p?.(N), s === D.Date && t();
+  }, re = (r) => {
+    p?.(Y(n ?? /* @__PURE__ */ new Date(), r));
+  }, se = () => n ? s === D.DateTime ? `${G(n, l)}, ${M(n)}` : G(n, l) : g;
+  if (s === D.Time) {
     const r = typeof a == "string" ? a : n ? M(n) : "";
     return /* @__PURE__ */ c("div", { className: d("flex flex-col gap-y-3", f), children: [
-      B,
+      A,
       /* @__PURE__ */ e(
-        Z,
+        q,
         {
           id: b,
           value: r,
-          onChange: (t) => u?.(t),
+          onChange: (t) => p?.(t),
+          onBlur: C,
           disabled: x,
           invalid: y,
-          placeholder: o,
-          className: h,
-          timezoneLabel: ee
+          placeholder: g,
+          className: v,
+          timezoneLabel: te
         }
       )
     ] });
   }
-  if (s === N.Weekday) {
-    const r = typeof a == "string" ? a : void 0, t = _.find((v) => v.value === r);
+  if (s === D.Weekday) {
+    const r = typeof a == "string" ? a : void 0, t = R.find((N) => N.value === r);
     return /* @__PURE__ */ c("div", { className: d("flex flex-col gap-y-3", f), children: [
-      B,
+      A,
       /* @__PURE__ */ e(
-        G,
+        Z,
         {
           id: b,
           disabled: x,
           invalid: y,
-          labelledBy: A,
-          panelLabel: L ?? o,
-          fieldClassName: h,
+          labelledBy: _,
+          panelLabel: E ?? g,
+          fieldClassName: v,
           trigger: /* @__PURE__ */ c(O, { children: [
             /* @__PURE__ */ e(
               "span",
@@ -203,42 +207,42 @@ const G = ({
                   "truncate",
                   !t && "text-secondary"
                 ),
-                children: t?.label ?? o
+                children: t?.label ?? g
               }
             ),
             /* @__PURE__ */ e(
-              be,
+              xe,
               {
-                size: De.MD,
-                stroke: Ne,
+                size: Ce.MD,
+                stroke: De,
                 "aria-hidden": "true",
-                className: Fe
+                className: Se
               }
             )
           ] }),
-          panel: (v) => /* @__PURE__ */ e(
+          panel: (N) => /* @__PURE__ */ e(
             "div",
             {
               role: "listbox",
-              "aria-label": L ?? o,
+              "aria-label": E ?? g,
               className: "flex flex-col gap-0.5",
-              children: _.map((p) => /* @__PURE__ */ e(
+              children: R.map((m) => /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
                   role: "option",
-                  "aria-selected": p.value === r,
+                  "aria-selected": m.value === r,
                   className: d(
                     "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",
-                    p.value === r && "bg-control-accent-alpha-hover"
+                    m.value === r && "bg-control-accent-alpha-hover"
                   ),
                   onClick: () => {
-                    u?.(p.value), v();
+                    p?.(m.value), N();
                   },
-                  children: p.label
+                  children: m.label
                 },
-                p.value
+                m.value
               ))
             }
           )
@@ -247,16 +251,16 @@ const G = ({
     ] });
   }
   return /* @__PURE__ */ c("div", { className: d("flex flex-col gap-y-3", f), children: [
-    B,
+    A,
     /* @__PURE__ */ e(
-      G,
+      Z,
       {
         id: b,
         disabled: x,
         invalid: y,
-        labelledBy: A,
-        panelLabel: L ?? o,
-        fieldClassName: h,
+        labelledBy: _,
+        panelLabel: E ?? g,
+        fieldClassName: v,
         trigger: /* @__PURE__ */ c(O, { children: [
           /* @__PURE__ */ e(
             "span",
@@ -265,20 +269,20 @@ const G = ({
                 "truncate",
                 !n && "text-secondary"
               ),
-              children: re()
+              children: se()
             }
           ),
-          ke
+          Ee
         ] }),
         panel: (r) => /* @__PURE__ */ c(O, { children: [
           /* @__PURE__ */ c("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ e(
-              j,
+              V,
               {
                 "aria-label": "Previous month",
-                icon: P.prev,
-                size: V.Small,
-                onClick: () => R(-1)
+                icon: W.prev,
+                size: P.Small,
+                onClick: () => z(-1)
               }
             ),
             /* @__PURE__ */ e(
@@ -286,21 +290,21 @@ const G = ({
               {
                 className: "dial-small-semi-text text-primary",
                 "aria-live": "polite",
-                children: Re(T, l)
+                children: ze(T, l)
               }
             ),
             /* @__PURE__ */ e(
-              j,
+              V,
               {
                 "aria-label": "Next month",
-                icon: P.next,
-                size: V.Small,
-                onClick: () => R(1)
+                icon: W.next,
+                size: P.Small,
+                onClick: () => z(1)
               }
             )
           ] }),
           /* @__PURE__ */ c("div", { className: "grid grid-cols-7 gap-y-1 text-center", children: [
-            te.map((t) => /* @__PURE__ */ e(
+            ae.map((t) => /* @__PURE__ */ e(
               "div",
               {
                 "aria-hidden": "true",
@@ -309,38 +313,39 @@ const G = ({
               },
               t
             )),
-            ae.map((t) => {
-              const v = t.getMonth() !== T.getMonth(), p = W(t, n), z = W(t, X), $ = K(t, D, m);
+            le.map((t) => {
+              const N = t.getMonth() !== T.getMonth(), m = K(t, n), $ = K(t, ee), j = U(t, u, h);
               return /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  disabled: $,
-                  "aria-label": ze(t, l),
-                  "aria-pressed": p,
-                  "aria-current": z ? "date" : void 0,
+                  disabled: j,
+                  "aria-label": $e(t, l),
+                  "aria-pressed": m,
+                  "aria-current": $ ? "date" : void 0,
                   className: d(
-                    we,
-                    v && Oe,
-                    z && !p && Me,
-                    p && Se,
-                    $ && "cursor-not-allowed opacity-40 hover:bg-transparent"
+                    ke,
+                    N && we,
+                    $ && !m && Oe,
+                    m && Me,
+                    j && "cursor-not-allowed opacity-40 hover:bg-transparent"
                   ),
-                  onClick: () => le(t, r),
+                  onClick: () => ne(t, r),
                   children: t.getDate()
                 },
                 t.toISOString()
               );
             })
           ] }),
-          s === N.DateTime && /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-3 border-t border-secondary pt-3", children: [
+          s === D.DateTime && /* @__PURE__ */ c("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(
-              Z,
+              q,
               {
                 ariaLabel: "Time",
                 value: n ? M(n) : "",
-                onChange: ne,
+                onChange: re,
+                onBlur: C,
                 className: "w-[120px] px-3 py-1.5"
               }
             )
@@ -351,5 +356,5 @@ const G = ({
   ] });
 };
 export {
-  at as Calendar
+  lt as Calendar
 };

package/dist/components/New/Notification/Notification.js

@@ -1,11 +1,11 @@
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { useMemo as u } from "react";
-import { DialIcon as v } from "../../Icon/Icon.js";
+import { useMemo as C } from "react";
+import { DialIcon as k } from "../../Icon/Icon.js";
 import { NotificationVariant as n, NotificationType as s } from "../../../types/notification.js";
 import { mergeClasses as c } from "../../../utils/merge-classes.js";
-import { CloseButton as C } from "../CloseButton/CloseButton.js";
-import { variantIcons as k, notificationVariantRoleMap as M, notificationVariantClassNameMap as T, alertBaseClassName as I } from "./constants.js";
-const R = ({
+import { CloseButton as u } from "../CloseButton/CloseButton.js";
+import { variantIcons as M, notificationVariantRoleMap as v, notificationVariantClassNameMap as T, alertBaseClassName as I } from "./constants.js";
+const q = ({
   variant: e = n.Info,
   type: i = s.Toast,
   title: o,
@@ -13,18 +13,18 @@ const R = ({
   className: d,
   iconSize: t = 24,
   iconStroke: m = 2,
-  closable: p = !1,
-  onClose: f,
+  closable: f = !1,
+  onClose: p,
   children: x,
   textClassName: h,
-  ...N
+  ...w
 }) => {
-  const w = u(() => k({ size: t, stroke: m })[e], [e, t, m]), g = h ?? (i === s.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
+  const N = C(() => M({ size: t, stroke: m })[e], [e, t, m]), g = h ?? (i === s.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
   return /* @__PURE__ */ r(
     "div",
     {
-      role: M[e],
-      ...N,
+      role: v[e],
+      ...w,
       className: c(
         I,
         T[e],
@@ -34,7 +34,7 @@ const R = ({
       ),
       children: [
         /* @__PURE__ */ r("div", { className: "flex items-start gap-3 flex-1 min-w-0", children: [
-          /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "flex shrink-0", children: /* @__PURE__ */ a(v, { icon: w }) }),
+          /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "flex shrink-0", children: /* @__PURE__ */ a(k, { icon: N }) }),
           o ? /* @__PURE__ */ r(
             "div",
             {
@@ -50,18 +50,18 @@ const R = ({
           ) : /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 text-primary break-words", children: l })
         ] }),
         x,
-        p && /* @__PURE__ */ a("div", { className: "relative size-[40px]", children: /* @__PURE__ */ a(
-          C,
+        f && /* @__PURE__ */ a(
+          u,
           {
-            className: "absolute top-[-2px] right-0 size-auto hover:bg-transparent ",
+            className: "shrink-0 self-start",
             ariaLabel: "Close notification",
-            onClose: (b) => f?.(b)
+            onClose: (b) => p?.(b)
           }
-        ) })
+        )
       ]
     }
   );
 };
 export {
-  R as Notification
+  q as Notification
 };

package/dist/components/ProgressBar/ProgressBar.js

@@ -46,9 +46,7 @@ const A = ({
   return !l && !i ? c : /* @__PURE__ */ m("div", { className: "flex w-full flex-col gap-1", children: [
     /* @__PURE__ */ m("div", { className: "flex items-baseline gap-2", children: [
       e && /* @__PURE__ */ r(y, { ...e, id: n }),
-      i && // `ml-auto` rather than `justify-between` so the readout still sits
-      // at the end when there is no label beside it.
-      /* @__PURE__ */ r("span", { className: "dial-tiny-text text-secondary ml-auto shrink-0", children: i })
+      i && /* @__PURE__ */ r("span", { className: "dial-tiny-text text-secondary ml-auto shrink-0", children: i })
     ] }),
     c
   ] });

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.4",
-  "generatedAt": "2026-09-16T07:40:41.827Z",
+  "version": "0.15.0-dev.6",
+  "generatedAt": "2026-09-17T21:39:44.989Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -429,6 +429,12 @@
           "required": false,
           "description": "Callback fired with the next value when the selection changes"
         },
+        {
+          "name": "onBlur",
+          "type": "FocusEventHandler<HTMLInputElement>",
+          "required": false,
+          "description": "Called when the Calendar's input field loses focus, e.g. for on-blur validation"
+        },
         {
           "name": "labelProps",
           "type": "LabelProps",