@epam/ai-dial-ui-kit 0.16.0-dev.20 → 0.16.0-dev.21

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

@@ -0,0 +1,87 @@
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
+import { useMemo as p, useRef as x, useEffect as h } from "react";
+import { mergeClasses as b } from "../../../utils/merge-classes.js";
+const g = Array.from({ length: 24 }, (n, r) => String(r).padStart(2, "0")), y = Array.from(
+  { length: 60 },
+  (n, r) => String(r).padStart(2, "0")
+), S = "flex w-full shrink-0 items-center justify-center rounded-lg px-3 py-2 dial-small-text text-primary hover:bg-control-accent-alpha-hover focus:outline-hidden focus-visible:outline focus-visible:outline-focus", v = "bg-control-accent text-control-permanent hover:bg-control-accent", u = ({
+  label: n,
+  options: r,
+  selected: l,
+  onSelect: s
+}) => {
+  const t = x(null);
+  h(() => {
+    const e = t.current, o = e?.querySelector('[aria-selected="true"]');
+    !e || !o || (e.scrollTop = o.offsetTop - e.clientHeight / 2 + o.offsetHeight / 2);
+  }, []);
+  const f = (e) => {
+    const o = Array.from(
+      e.currentTarget.querySelectorAll("button")
+    ), a = o.indexOf(document.activeElement), i = {
+      ArrowDown: o[a + 1],
+      ArrowUp: o[a - 1],
+      Home: o[0],
+      End: o[o.length - 1]
+    }[e.key];
+    i && (e.preventDefault(), i.focus());
+  }, m = l ?? r[0];
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ref: t,
+      role: "listbox",
+      "aria-label": n,
+      tabIndex: -1,
+      className: "flex h-56 flex-1 flex-col gap-0.5 overflow-y-auto",
+      onKeyDown: f,
+      children: r.map((e) => /* @__PURE__ */ c(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": e === l,
+          tabIndex: e === m ? 0 : -1,
+          className: b(
+            S,
+            e === l && v
+          ),
+          onClick: () => s(e),
+          children: e
+        },
+        e
+      ))
+    }
+  );
+}, T = ({
+  value: n,
+  onSelect: r
+}) => {
+  const [l, s] = p(() => {
+    const t = /^(\d{2}):(\d{2})$/.exec(n);
+    return t ? [t[1], t[2]] : [void 0, void 0];
+  }, [n]);
+  return /* @__PURE__ */ d("div", { className: "flex w-[168px] gap-1", children: [
+    /* @__PURE__ */ c(
+      u,
+      {
+        label: "Hours",
+        options: g,
+        selected: l,
+        onSelect: (t) => r(`${t}:${s ?? "00"}`, !1)
+      }
+    ),
+    /* @__PURE__ */ c(
+      u,
+      {
+        label: "Minutes",
+        options: y,
+        selected: s,
+        onSelect: (t) => r(`${l ?? "00"}:${t}`, !0)
+      }
+    )
+  ] });
+};
+export {
+  T as TimePickerPanel
+};

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

@@ -1,57 +1,59 @@
 import { jsx as a } from "react/jsx-runtime";
-import { IconChevronRight as o, IconChevronLeft as n, IconCalendar as l } from "@tabler/icons-react";
-import { DIAL_KIT_ICON_STROKE as r } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as t } from "../../../constants/icon.js";
+import { IconChevronRight as o, IconChevronLeft as l, IconCalendar as n } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as r } from "../../../constants/icon.js";
 import { CalendarMode as e } from "../../../types/calendar.js";
-const u = "en-GB", f = {
+const p = "en-GB", f = {
   [e.Date]: "Select date",
   [e.DateTime]: "Select date and time",
   [e.Time]: "--:--",
   [e.Weekday]: "Select day"
-}, x = (
+}, b = (
   // TODO: check after design review for input
   "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-hidden transition-colors hover:border-accent-alpha focus-within:border-accent-focus"
 ), y = (
   // TODO: check after design review for input
   "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-primary hover:!border-transparent"
-), b = "!border-error", h = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md", C = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-hidden focus-visible:outline focus-visible:outline-focus", N = "bg-control-accent text-control-permanent", v = "text-accent dial-small-semi-text", D = "text-control-disable-primary", s = "text-secondary", I = /* @__PURE__ */ a(
-  l,
+), x = "!border-error", h = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md", v = "z-floating rounded-lg bg-layer-raised p-2 shadow-md", C = "absolute end-2 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center rounded-lg text-secondary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-hidden focus-visible:outline focus-visible:outline-focus disabled:cursor-not-allowed disabled:text-control-disable-primary disabled:hover:bg-transparent", g = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-hidden focus-visible:outline focus-visible:outline-focus", N = "bg-control-accent text-control-permanent", D = "text-accent dial-small-semi-text", I = "text-control-disable-primary", s = "text-secondary", w = /* @__PURE__ */ a(
+  n,
   {
-    size: t.MD,
-    stroke: r,
+    size: r.MD,
+    stroke: t,
     "aria-hidden": "true",
     className: s
   }
-), g = {
+), S = {
   prev: /* @__PURE__ */ a(
-    n,
+    l,
     {
-      size: t.SM,
-      stroke: r,
+      size: r.SM,
+      stroke: t,
       "aria-hidden": "true"
     }
   ),
   next: /* @__PURE__ */ a(
     o,
     {
-      size: t.SM,
-      stroke: r,
+      size: r.SM,
+      stroke: t,
       "aria-hidden": "true"
     }
   )
 };
 export {
-  u as DEFAULT_CALENDAR_LOCALE,
-  C as calendarDayButtonBaseClassName,
-  D as calendarDayOutsideClassName,
+  p as DEFAULT_CALENDAR_LOCALE,
+  g as calendarDayButtonBaseClassName,
+  I as calendarDayOutsideClassName,
   N as calendarDaySelectedClassName,
-  v as calendarDayTodayClassName,
-  x as calendarFieldBaseClassName,
+  D as calendarDayTodayClassName,
+  b as calendarFieldBaseClassName,
   y as calendarFieldDisabledClassName,
   s as calendarFieldIconClassName,
-  b as calendarFieldInvalidClassName,
-  I as calendarIcon,
+  x as calendarFieldInvalidClassName,
+  w as calendarIcon,
   f as calendarModeDefaultPlaceholder,
-  g as calendarNavIcons,
-  h as calendarPopoverClassName
+  S as calendarNavIcons,
+  h as calendarPopoverClassName,
+  C as timePickerButtonClassName,
+  v as timePickerPopoverClassName
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.20",
-  "generatedAt": "2026-10-20T10:24:28.217Z",
+  "version": "0.16.0-dev.21",
+  "generatedAt": "2026-10-20T14:10:43.721Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -423,7 +423,7 @@
     },
     {
       "name": "Calendar",
-      "category": "Components_2_0",
+      "category": "Components_2_0/Calendar",
       "generation": "2.0",
       "description": "A date/time picker supporting four selection modes.\naliases: DatePicker|DateTimePicker\nDesign system 2.0\n\nRenders a text-field trigger that opens a rounded month-grid popover for\nthe `date`/`datetime` modes, a masked `\"HH:mm\"` text field for `time`, and\na popover list of weekday names for `weekday`. Month/weekday names and\ndate formatting are localized via the `locale` prop.",
       "props": [
@@ -521,6 +521,13 @@
           "required": false,
           "defaultValue": "false",
           "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)"
+        },
+        {
+          "name": "showTimePicker",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "`time` mode only: shows a clock button that opens an hour/minute list popover next to the typeable field"
         }
       ],
       "examples": [