@epam/ai-dial-ui-kit 0.15.0-dev.3 → 0.15.0-dev.5

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

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

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.3",
-  "generatedAt": "2026-09-14T19:58:04.346Z",
+  "version": "0.15.0-dev.5",
+  "generatedAt": "2026-09-16T14:47:56.016Z",
   "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",
@@ -491,6 +497,13 @@
           "type": "string",
           "required": false,
           "description": "Additional classes merged onto the trigger field, overriding conflicting defaults"
+        },
+        {
+          "name": "showTimezone",
+          "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"
         }
       ],
       "examples": [
@@ -10686,6 +10699,16 @@
       "sourceFile": "utils/flat-to-hierarchy-convertor.ts",
       "description": "Helper to create a root folder wrapping flat items.\nUseful when you want the entire tree to be nested under a single root.",
       "signature": "function wrapInRootFolder(flatItems: FlatFileItem[], rootName = 'Prompts', rootPath = 'prompts/public/', rootFolderId = 'root'): DialFile[]"
+    },
+    {
+      "name": "getTimezoneLabel",
+      "sourceFile": "utils/timezone.ts",
+      "description": "Returns a timezone as a hint label for time-of-day fields, e.g.\n`(GMT+01:00) Europe/Berlin`: the UTC offset in effect at `options.date`\nrendered by `Intl` (`timeZoneName: 'longOffset'`), followed by the IANA\ntimezone name.",
+      "signature": "({\n  locale,\n  timeZone,\n  date = new Date(),\n}: TimezoneLabelOptions = {}) => string"
+    },
+    {
+      "name": "TimezoneLabelOptions",
+      "sourceFile": "utils/timezone.ts"
     }
   ],
   "constants": [