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

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-none transition-colors hover:border-accent-alpha focus-within:border-accent-focus"
+  "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", C = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md", h = "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-none 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,
-  h 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,
-  C as calendarPopoverClassName
+  S as calendarNavIcons,
+  h as calendarPopoverClassName,
+  C as timePickerButtonClassName,
+  v as timePickerPopoverClassName
 };

package/dist/components/New/CaptionText/CaptionText.js

@@ -1,30 +1,35 @@
-import { jsx as n } from "react/jsx-runtime";
-import { mergeClasses as s } from "../../../utils/merge-classes.js";
-import { CaptionType as t } from "../../../types/caption.js";
-import { DIAL_KIT_CLASS as e } from "../../../constants/public-class-names.js";
-const a = ({
+import { jsx as t } from "react/jsx-runtime";
+import { mergeClasses as a } from "../../../utils/merge-classes.js";
+import { CaptionType as o } from "../../../types/caption.js";
+import { DIAL_KIT_CLASS as m } from "../../../constants/public-class-names.js";
+import { LiveRegionElement as c } from "../../../types/live-region.js";
+import { LiveRegion as l } from "../LiveRegion/LiveRegion.js";
+const x = ({
   text: r,
-  className: i,
-  variant: o = t.Description,
-  ...p
-}) => r ? /* @__PURE__ */ n(
-  "span",
-  {
-    ...p,
-    role: "alert",
-    className: s(
-      "dial-tiny-text",
-      o === t.Error ? "text-error" : "text-secondary",
-      i,
-      e.captionText,
-      o === t.Error && e.errorText
-    ),
-    children: r
-  }
-) : null, T = ({
+  className: p,
+  variant: e = o.Description,
+  announce: i,
+  ...s
+}) => {
+  const n = r ? /* @__PURE__ */ t(
+    "span",
+    {
+      ...s,
+      className: a(
+        "dial-tiny-text",
+        e === o.Error ? "text-error" : "text-secondary",
+        p,
+        m.captionText,
+        e === o.Error && m.errorText
+      ),
+      children: r
+    }
+  ) : null;
+  return i ? /* @__PURE__ */ t(l, { politeness: i, as: c.Span, atomic: !0, children: n }) : n;
+}, L = ({
   ...r
-}) => /* @__PURE__ */ n(a, { ...r, variant: t.Error });
+}) => /* @__PURE__ */ t(x, { ...r, variant: o.Error });
 export {
-  a as CaptionText,
-  T as ErrorText
+  x as CaptionText,
+  L as ErrorText
 };

package/dist/components/New/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import { jsxs as p, jsx as c } from "react/jsx-runtime";
+import { jsxs as d, jsx as c } from "react/jsx-runtime";
 import { useId as u, useCallback as x } from "react";
 import { ElementSize as v } from "../../../types/size.js";
 import { mergeClasses as f } from "../../../utils/merge-classes.js";
@@ -11,31 +11,33 @@ const D = ({
   labelProps: e,
   isSelected: t = !1,
   isIndeterminate: r = !1,
-  invalid: i = !1,
+  invalid: m = !1,
   disabled: s,
   onChange: l,
-  caption: m,
+  caption: i,
   className: y,
   boxClassName: b,
   ...n
 }) => {
-  const k = u(), a = h ?? k, d = m ? `${a}-caption` : void 0, g = x(
-    (o) => {
-      l?.(o.target.checked);
+  const g = u(), o = h ?? g, p = i ? `${o}-caption` : void 0, k = x(
+    (a) => {
+      l?.(a.target.checked);
     },
     [l]
   ), N = x(
-    (o) => {
-      o && (o.indeterminate = r);
+    (a) => {
+      a && (a.indeterminate = r);
     },
     [r]
   );
-  return /* @__PURE__ */ p("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ p(
+  return /* @__PURE__ */ d("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ d(
       "div",
       {
         className: f(
-          "flex items-center gap-2",
+          // Named group: the control shows its hover state while either of its
+          // two <label>s (the control or the text) is hovered.
+          "group/choice flex items-center gap-2",
           y,
           L.checkbox
         ),
@@ -46,26 +48,26 @@ const D = ({
               ...n,
               ref: N,
               type: "checkbox",
-              id: a,
+              id: o,
               checked: t,
               disabled: s,
-              onChange: g,
+              onChange: k,
               "aria-checked": r ? "mixed" : t,
-              "aria-invalid": i || void 0,
+              "aria-invalid": m || void 0,
               "aria-label": C(
                 typeof e?.label != "string" ? n["aria-label"] : void 0
               ),
-              "aria-describedby": d,
+              "aria-describedby": p,
               className: "peer sr-only"
             }
           ),
           /* @__PURE__ */ c(
             A,
             {
-              htmlFor: a,
+              htmlFor: o,
               isSelected: t,
               isIndeterminate: r,
-              invalid: i,
+              invalid: m,
               disabled: s,
               className: b
             }
@@ -75,7 +77,7 @@ const D = ({
             {
               size: v.Standard,
               ...e,
-              htmlFor: a,
+              htmlFor: o,
               className: f(
                 // `Label` defaults to the secondary colour; a checkbox's own label
                 // is primary while the control is usable.
@@ -88,12 +90,12 @@ const D = ({
         ]
       }
     ),
-    m && /* @__PURE__ */ c(
+    i && /* @__PURE__ */ c(
       "span",
       {
-        id: d,
+        id: p,
         className: "dial-tiny-text text-secondary ml-[28px]",
-        children: m
+        children: i
       }
     )
   ] });

package/dist/components/New/Checkbox/CheckboxBox.js

@@ -1,17 +1,17 @@
 import { jsx as t } from "react/jsx-runtime";
-import { IconMinus as u, IconCheck as d } from "@tabler/icons-react";
-import { mergeClasses as b } from "../../../utils/merge-classes.js";
-import { CHECKBOX_ICON_PROPS as p } from "./constants.js";
-import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
-const v = ({
-  isSelected: n = !1,
-  isIndeterminate: c = !1,
+import { IconMinus as m, IconCheck as u } from "@tabler/icons-react";
+import { mergeClasses as h } from "../../../utils/merge-classes.js";
+import { CHECKBOX_ICON_PROPS as i } from "./constants.js";
+import { DIAL_KIT_CLASS as g } from "../../../constants/public-class-names.js";
+const k = ({
+  isSelected: c = !1,
+  isIndeterminate: n = !1,
   invalid: r = !1,
   disabled: a = !1,
-  htmlFor: s,
-  className: m
+  htmlFor: l,
+  className: p
 }) => {
-  const o = c || n, e = !!s, l = b(
+  const o = n || c, e = !!l, s = h(
     "grid size-[20px] shrink-0 place-items-center rounded border transition-colors duration-200",
     // 20px is below the 24x24 minimum target, so grow the pointer target
     // without touching the rendered size. The 44px enhanced target would
@@ -19,18 +19,25 @@ const v = ({
     // box is not a target at all — the row around it is.
     e && "dial-kit-minimum-target",
     e && "peer-focus-visible:outline peer-focus-visible:outline-focus",
-    a ? "border-transparent bg-control-disable-primary text-control-disable-primary" : b(
+    a ? "border-transparent bg-control-disable-primary text-control-disable-primary" : h(
       r && o && "border-transparent bg-control-error text-control-permanent",
       r && !o && "border-error bg-control-neutral",
-      !r && o && "border-transparent bg-control-accent text-control-permanent hover:bg-control-accent-hover",
-      !r && !o && "border-default bg-control-neutral hover:border-accent hover:bg-control-accent-alpha-hover"
+      !r && o && "border-transparent bg-control-accent text-control-permanent",
+      !r && !o && "border-default bg-control-neutral",
+      /*
+       * A control box reacts while either label of its `Checkbox` is hovered
+       * (the `group/choice` root); a decorative box only to its own hover,
+       * since the row around it owns the interaction.
+       */
+      !r && o && (e ? "group-has-[label:hover]/choice:bg-control-accent-hover" : "hover:bg-control-accent-hover"),
+      !r && !o && (e ? "group-has-[label:hover]/choice:border-accent group-has-[label:hover]/choice:bg-control-accent-alpha-hover" : "hover:border-accent hover:bg-control-accent-alpha-hover")
     ),
     a ? "cursor-not-allowed" : e && "cursor-pointer",
-    m,
-    f.checkboxBox
-  ), i = c ? /* @__PURE__ */ t(u, { ...p }) : n && /* @__PURE__ */ t(d, { ...p });
-  return e ? /* @__PURE__ */ t("label", { htmlFor: s, className: l, children: i }) : /* @__PURE__ */ t("span", { "aria-hidden": "true", className: l, children: i });
+    p,
+    g.checkboxBox
+  ), b = n ? /* @__PURE__ */ t(m, { ...i }) : c && /* @__PURE__ */ t(u, { ...i });
+  return e ? /* @__PURE__ */ t("label", { htmlFor: l, className: s, children: b }) : /* @__PURE__ */ t("span", { "aria-hidden": "true", className: s, children: b });
 };
 export {
-  v as CheckboxBox
+  k as CheckboxBox
 };

package/dist/components/New/ConfirmationPopup/ConfirmationPopup.js

@@ -1,79 +1,84 @@
-import { jsxs as x, jsx as r } from "react/jsx-runtime";
+import { jsxs as A, jsx as r } from "react/jsx-runtime";
 import { useCallback as I } from "react";
 import { Button as j } from "../Button/Button.js";
 import { NeutralButton as z } from "../Button/ButtonWrappers.js";
-import { Popup as A } from "../Popup/Popup.js";
-import { Spinner as _ } from "../../Spinner/Spinner.js";
-import { ConfirmationPopupVariant as D } from "../../../types/confirmation-popup.js";
-import { PopupSize as F } from "../../../types/popup.js";
-import { mergeClasses as f } from "../../../utils/merge-classes.js";
-import { actionsBaseClassName as K, defaultCancelLabel as L, defaultConfirmLabel as T, variantConfig as s, loaderContainerClassName as V, descriptionBaseClassName as q } from "./constants.js";
+import { Popup as _ } from "../Popup/Popup.js";
+import { popupMainActionButtonClassName as f } from "../Popup/constants.js";
+import { Spinner as D } from "../../Spinner/Spinner.js";
+import { ConfirmationPopupVariant as F } from "../../../types/confirmation-popup.js";
+import { PopupSize as K } from "../../../types/popup.js";
+import { mergeClasses as m } from "../../../utils/merge-classes.js";
+import { actionsBaseClassName as L, defaultCancelLabel as M, defaultConfirmLabel as T, variantConfig as p, loaderContainerClassName as V, descriptionBaseClassName as q } from "./constants.js";
 import { DIAL_KIT_CLASS as w } from "../../../constants/public-class-names.js";
-const X = ({
-  header: p,
+const Z = ({
+  header: u,
   description: a,
-  descriptionClassName: m,
-  open: u = !1,
-  confirmLabel: c = T,
-  cancelLabel: C = L,
+  descriptionClassName: t,
+  open: c = !1,
+  confirmLabel: C = T,
+  cancelLabel: N = M,
   isLoading: o = !1,
   disableConfirmButton: d = !1,
-  className: N,
-  confirmClassName: b,
-  onClose: t,
-  onConfirm: v,
-  onCancel: l,
+  className: b,
+  confirmClassName: v,
+  onClose: l,
+  onConfirm: B,
+  onCancel: n,
   children: e,
-  variant: n = D.Info,
-  size: P = F.Sm,
-  footer: i,
+  variant: i = F.Info,
+  size: P = K.Sm,
+  footer: s,
   hideClose: S,
-  ...B
+  ...h
 }) => {
-  const h = o ? null : /* @__PURE__ */ x("div", { className: K, children: [
+  const k = o ? null : /* @__PURE__ */ A("div", { className: L, children: [
     /* @__PURE__ */ r(
       z,
       {
-        label: C,
-        onClick: () => l ? l() : t?.()
+        className: f,
+        label: N,
+        onClick: () => n ? n() : l?.()
       }
     ),
     /* @__PURE__ */ r(
       j,
       {
-        variant: s[n].confirm.variant,
-        appearance: s[n].confirm.appearance,
-        className: b,
-        label: c,
+        variant: p[i].confirm.variant,
+        appearance: p[i].confirm.appearance,
+        className: m(
+          f,
+          v
+        ),
+        label: C,
         disabled: d,
-        onClick: v
+        onClick: B
       }
     )
-  ] }), k = I(() => o ? /* @__PURE__ */ r("div", { className: V, children: /* @__PURE__ */ r(_, { size: 40 }) }) : e ?? (a ? /* @__PURE__ */ r(
+  ] }), x = I(() => o ? /* @__PURE__ */ r("div", { className: V, children: /* @__PURE__ */ r(D, { size: 40 }) }) : e ?? (a ? /* @__PURE__ */ r(
     "div",
     {
-      className: f(
+      className: m(
         q,
-        m
+        t
       ),
       children: a
     }
-  ) : null), [e, a, o, m]);
+  ) : null), [e, a, o, t]);
   return /* @__PURE__ */ r(
-    A,
+    _,
     {
-      ...B,
-      open: u,
-      header: p,
-      className: f(N, w.confirmationPopup),
-      onClose: () => t?.(),
-      footer: i ?? h,
+      ...h,
+      open: c,
+      header: u,
+      className: m(b, w.confirmationPopup),
+      onClose: () => l?.(),
+      footer: s ?? k,
       size: P,
-      hideClose: S ?? (!o && i === void 0),
-      children: k()
+      hideClose: S ?? (!o && s === void 0),
+      children: x()
     }
   );
 };
 export {
-  X as ConfirmationPopup
+  Z as ConfirmationPopup
 };