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

package/dist/components/New/NoDataContent/NoDataIllustration.js

@@ -0,0 +1,53 @@
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+const i = [12, 40, 68], t = () => /* @__PURE__ */ r(
+  "svg",
+  {
+    width: 121,
+    height: 97,
+    viewBox: "0 0 121 97",
+    fill: "none",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: [
+      /* @__PURE__ */ l(
+        "rect",
+        {
+          x: 0.5,
+          y: 0.5,
+          width: 120,
+          height: 96,
+          rx: 16,
+          className: "fill-layer-0 stroke-tertiary"
+        }
+      ),
+      i.map((e) => /* @__PURE__ */ r("g", { children: [
+        /* @__PURE__ */ l("circle", { cx: 20.5, cy: e + 8.5, r: 8, className: "fill-layer-1" }),
+        /* @__PURE__ */ l(
+          "rect",
+          {
+            x: 36.5,
+            y: e + 1,
+            width: 56,
+            height: 6,
+            rx: 3,
+            className: "fill-layer-1"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "rect",
+          {
+            x: 36.5,
+            y: e + 11,
+            width: 34,
+            height: 5,
+            rx: 2.5,
+            className: "fill-layer-2"
+          }
+        )
+      ] }, e))
+    ]
+  }
+);
+export {
+  t as NoDataIllustration
+};

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

@@ -1,65 +1,77 @@
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { useMemo as k } from "react";
-import { DialIcon as u } from "../../Icon/Icon.js";
-import { NotificationVariant as c, NotificationType as s } from "../../../types/notification.js";
-import { mergeClasses as d } from "../../../utils/merge-classes.js";
+import { useMemo as S } from "react";
+import { DialIcon as T } from "../../Icon/Icon.js";
+import { NotificationVariant as d, NotificationSurface as p, NotificationType as i } from "../../../types/notification.js";
+import { mergeClasses as o } from "../../../utils/merge-classes.js";
 import { CloseButton as v } from "../CloseButton/CloseButton.js";
-import { variantIcons as I, notificationVariantRoleMap as M, notificationVariantClassNameMap as T, alertBaseClassName as L } from "./constants.js";
-import { DIAL_KIT_CLASS as V } from "../../../constants/public-class-names.js";
-const R = ({
-  variant: e = c.Info,
-  type: i = s.Toast,
-  title: o,
+import { variantIcons as L, notificationVariantRoleMap as V, notificationNeutralSurfaceIconClassNameMap as j, notificationNeutralSurfaceClassName as y, notificationVariantClassNameMap as A, alertBaseClassName as B } from "./constants.js";
+import { DIAL_KIT_CLASS as D } from "../../../constants/public-class-names.js";
+const H = ({
+  variant: e = d.Info,
+  type: s = i.Toast,
+  surface: N = p.Variant,
+  title: t,
   message: l,
-  action: t,
-  className: f,
+  action: n,
+  className: x,
   iconSize: m = 24,
-  iconStroke: n = 2,
-  closable: p = !1,
-  onClose: x,
-  children: h,
-  textClassName: N,
-  ...w
+  iconStroke: c = 2,
+  closable: h = !1,
+  closeAriaLabel: u = "Close notification",
+  onClose: w,
+  children: C,
+  textClassName: g,
+  ...b
 }) => {
-  const g = k(() => I({ size: m, stroke: n })[e], [e, m, n]), C = N ?? (i === s.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
+  const k = S(() => L({ size: m, stroke: c })[e], [e, m, c]), f = N === p.Neutral, I = g ?? (s === i.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
   return /* @__PURE__ */ r(
     "div",
     {
-      role: M[e],
-      ...w,
-      className: d(
-        L,
-        T[e],
-        i === s.Toast && "min-w-[200px] max-w-[600px] shadow-lg",
-        i === s.SectionMessage && e === c.Loading && "border-secondary",
-        f,
-        V.notification
+      role: V[e],
+      ...b,
+      className: o(
+        B,
+        f ? y : A[e],
+        s === i.Toast && "min-w-[200px] max-w-[600px] shadow-lg",
+        s === i.SectionMessage && e === d.Loading && "border-secondary",
+        x,
+        D.notification
       ),
       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(u, { icon: g }) }),
-          o ? /* @__PURE__ */ r(
+          /* @__PURE__ */ a(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: o(
+                "flex shrink-0",
+                f && j[e]
+              ),
+              children: /* @__PURE__ */ a(T, { icon: k })
+            }
+          ),
+          t ? /* @__PURE__ */ r(
             "div",
             {
-              className: d(
+              className: o(
                 "flex min-w-0 text-primary break-words",
-                C
+                I
               ),
               children: [
-                /* @__PURE__ */ a("div", { className: "dial-small-paragraph-semi-text min-w-0 break-words", children: o }),
+                /* @__PURE__ */ a("div", { className: "dial-small-paragraph-semi-text min-w-0 break-words", children: t }),
                 /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 break-words", children: l })
               ]
             }
           ) : /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 text-primary break-words", children: l })
         ] }),
-        t != null && /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center", children: t }),
-        h,
-        p && /* @__PURE__ */ a(
+        n != null && /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center", children: n }),
+        C,
+        h && /* @__PURE__ */ a(
           v,
           {
             className: "shrink-0 self-start",
-            ariaLabel: "Close notification",
-            onClose: (b) => x?.(b)
+            ariaLabel: u,
+            onClose: (M) => w?.(M)
           }
         )
       ]
@@ -67,5 +79,5 @@ const R = ({
   );
 };
 export {
-  R as Notification
+  H as Notification
 };

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

@@ -1,32 +1,41 @@
-import { jsx as i } from "react/jsx-runtime";
-import { Spinner as t } from "../../Spinner/Spinner.js";
+import { jsx as r } from "react/jsx-runtime";
+import { Spinner as n } from "../../Spinner/Spinner.js";
 import { NotificationVariant as e } from "../../../types/notification.js";
-import { IconCheck as n, IconCircleCheckFilled as a, IconAlertTriangleFilled as s, IconAlertCircleFilled as o, IconInfoCircleFilled as c } from "@tabler/icons-react";
-const m = (r) => ({
-  info: /* @__PURE__ */ i(c, { size: r.size }),
-  error: /* @__PURE__ */ i(o, { size: r.size }),
-  warning: /* @__PURE__ */ i(s, { size: r.size }),
-  success: /* @__PURE__ */ i(a, { size: r.size }),
-  loading: /* @__PURE__ */ i(t, { size: r.size }),
-  general: /* @__PURE__ */ i(n, { size: r.size, stroke: r.stroke })
-}), u = {
+import { IconCheck as i, IconCircleCheckFilled as a, IconAlertTriangleFilled as s, IconAlertCircleFilled as o, IconInfoCircleFilled as c } from "@tabler/icons-react";
+const x = (t) => ({
+  info: /* @__PURE__ */ r(c, { size: t.size }),
+  error: /* @__PURE__ */ r(o, { size: t.size }),
+  warning: /* @__PURE__ */ r(s, { size: t.size }),
+  success: /* @__PURE__ */ r(a, { size: t.size }),
+  loading: /* @__PURE__ */ r(n, { size: t.size }),
+  general: /* @__PURE__ */ r(i, { size: t.size, stroke: t.stroke })
+}), m = {
   [e.Info]: "bg-info text-info",
   [e.Success]: "bg-success text-success",
   [e.Warning]: "bg-warning text-warning",
   [e.Error]: "bg-error text-error",
   [e.Loading]: "bg-layer-raised text-info",
   [e.General]: "bg-layer-sunken text-primary"
-}, z = {
+}, d = "bg-layer-sunken text-primary", z = {
+  [e.Info]: "text-info",
+  [e.Success]: "text-success",
+  [e.Warning]: "text-warning-icon",
+  [e.Error]: "text-error",
+  [e.Loading]: "text-info",
+  [e.General]: "text-primary"
+}, I = {
   [e.Info]: "status",
   [e.Success]: "status",
   [e.Warning]: "alert",
   [e.Error]: "alert",
   [e.Loading]: "status",
   [e.General]: "status"
-}, x = "items-center justify-between rounded-xl relative gap-3 p-3 border flex border-transparent";
+}, b = "items-center justify-between rounded-xl relative gap-3 p-3 border flex border-transparent";
 export {
-  x as alertBaseClassName,
-  u as notificationVariantClassNameMap,
-  z as notificationVariantRoleMap,
-  m as variantIcons
+  b as alertBaseClassName,
+  d as notificationNeutralSurfaceClassName,
+  z as notificationNeutralSurfaceIconClassNameMap,
+  m as notificationVariantClassNameMap,
+  I as notificationVariantRoleMap,
+  x as variantIcons
 };

package/dist/components/New/PasswordInput/PasswordInput.js

@@ -1,58 +1,59 @@
 import { jsx as e } from "react/jsx-runtime";
-import { IconEyeOff as c, IconEye as l } from "@tabler/icons-react";
-import { useState as u, useEffect as w } from "react";
-import { GhostIconButton as d } from "../IconButton/IconButtonWrappers.js";
-import { Input as C } from "../Input/Input.js";
-import { DIAL_KIT_ICON_STROKE as i } from "../constants/icon.js";
+import { IconEyeOff as c, IconEye as u } from "@tabler/icons-react";
+import { useState as w, useEffect as C } from "react";
+import { GhostIconButton as _ } from "../IconButton/IconButtonWrappers.js";
+import { Input as E } from "../Input/Input.js";
+import { DIAL_KIT_ICON_STROKE as a } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as m } from "../../../constants/icon.js";
-import { ElementSize as a } from "../../../types/size.js";
-import { DIAL_KIT_CLASS as _ } from "../../../constants/public-class-names.js";
-import { mergeClasses as E } from "../../../utils/merge-classes.js";
+import { ElementSize as p } from "../../../types/size.js";
+import { DIAL_KIT_CLASS as h } from "../../../constants/public-class-names.js";
+import { mergeClasses as A } from "../../../utils/merge-classes.js";
 const K = ({
-  showPasswordLabel: p = "Show password",
+  showPasswordLabel: n = "Show password",
   hidePasswordLabel: f = "Hide password",
-  disabled: r,
-  size: n = a.Standard,
+  disabled: s,
+  isToggleHidden: I,
+  size: l = p.Standard,
   ...t
 }) => {
-  const [I, s] = u(!1), o = I && !r;
-  return w(() => {
-    r && s(!1);
-  }, [r]), /* @__PURE__ */ e(
-    C,
+  const [d, i] = w(!1), o = !s && !I, r = d && o;
+  return C(() => {
+    o || i(!1);
+  }, [o]), /* @__PURE__ */ e(
+    E,
     {
       ...t,
-      wrapperClassName: E(
+      wrapperClassName: A(
         t.wrapperClassName,
-        _.passwordInput
+        h.passwordInput
       ),
-      size: n,
-      disabled: r,
-      type: o ? "text" : "password",
-      iconAfter: r ? void 0 : /* @__PURE__ */ e(
-        d,
+      size: l,
+      disabled: s,
+      type: r ? "text" : "password",
+      iconAfter: o ? /* @__PURE__ */ e(
+        _,
         {
-          size: a.Small,
-          "aria-label": o ? f : p,
-          "aria-pressed": o,
-          icon: o ? /* @__PURE__ */ e(
+          size: p.Small,
+          "aria-label": r ? f : n,
+          "aria-pressed": r,
+          icon: r ? /* @__PURE__ */ e(
             c,
             {
               size: m.SM,
-              stroke: i,
+              stroke: a,
               "aria-hidden": "true"
             }
           ) : /* @__PURE__ */ e(
-            l,
+            u,
             {
               size: m.SM,
-              stroke: i,
+              stroke: a,
               "aria-hidden": "true"
             }
           ),
-          onClick: () => s((S) => !S)
+          onClick: () => i((S) => !S)
         }
-      )
+      ) : void 0
     }
   );
 };

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

@@ -1,5 +1,5 @@
 import { PopupSize as e } from "../../../types/popup.js";
-const o = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", a = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", s = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary", l = "border-b border-tertiary", r = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", i = "flex shrink-0 flex-row items-center gap-2", x = "ml-auto mobile:flex-1", n = "mobile:flex-1", u = {
+const o = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", a = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", s = "flex-1 min-w-0 mr-3 truncate dial-h2-text text-primary", l = "border-b border-tertiary", r = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", i = "flex shrink-0 flex-row items-center gap-2", x = "ml-auto mobile:flex-1", n = "mobile:flex-1", u = {
   [e.Sm]: "max-w-full md:max-w-[400px]",
   [e.Md]: "max-w-full md:max-w-[800px]",
   [e.Lg]: "max-w-full md:max-w-[1200px]"

package/dist/components/New/Radio/Radio.js

@@ -1,5 +1,5 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { useId as h, useCallback as y } from "react";
+import { useId as x, useCallback as y } from "react";
 import { ElementSize as N } from "../../../types/size.js";
 import { mergeClasses as r } from "../../../utils/merge-classes.js";
 import { resolveAccessibleName as v } from "../../../utils/accessible-name.js";
@@ -11,15 +11,15 @@ const F = ({
   value: i,
   labelProps: o,
   isSelected: l = !1,
-  disabled: t,
+  disabled: a,
   onChange: s,
   caption: c,
-  className: f,
+  className: b,
   ...n
 }) => {
-  const b = h(), a = p ?? b, d = c ? `${a}-caption` : void 0, g = y(
-    (x) => {
-      x.target.checked && s?.(i);
+  const f = x(), t = p ?? f, d = c ? `${t}-caption` : void 0, g = y(
+    (h) => {
+      h.target.checked && s?.(i);
     },
     [s, i]
   );
@@ -28,8 +28,10 @@ const F = ({
       "div",
       {
         className: r(
-          "flex items-center gap-2 ",
-          f,
+          // 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",
+          b,
           k.radio
         ),
         children: [
@@ -38,11 +40,11 @@ const F = ({
             {
               ...n,
               type: "radio",
-              id: a,
+              id: t,
               name: u,
               value: i,
               checked: l,
-              disabled: t,
+              disabled: a,
               onChange: g,
               "aria-label": v(
                 typeof o?.label != "string" ? n["aria-label"] : void 0
@@ -54,16 +56,16 @@ const F = ({
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: a,
+              htmlFor: t,
               className: r(
-                "group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200 hover:bg-control-accent-alpha-hover",
+                "group grid size-[20px] shrink-0 place-items-center rounded-full 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
                 // overhang by 12px per side and swallow the adjacent label.
                 "dial-kit-minimum-target",
                 "peer-focus-visible:outline peer-focus-visible:outline-focus",
-                t ? "cursor-not-allowed border-default bg-control-disable-primary" : r(
-                  "cursor-pointer",
+                a ? "cursor-not-allowed border-default bg-control-disable-primary" : r(
+                  "cursor-pointer group-has-[label:hover]/choice:bg-control-accent-alpha-hover",
                   l ? "border border-accent bg-control-neutral" : "border-default bg-control-neutral"
                 )
               ),
@@ -72,7 +74,7 @@ const F = ({
                 {
                   className: r(
                     "size-3 rounded-full",
-                    t ? "bg-control-disable-secondary" : "bg-control-accent"
+                    a ? "bg-control-disable-secondary" : "bg-control-accent"
                   )
                 }
               )
@@ -83,12 +85,12 @@ const F = ({
             {
               size: N.Standard,
               ...o,
-              htmlFor: a,
+              htmlFor: t,
               className: r(
                 // `Label` defaults to the secondary colour; a radio's own label is
                 // primary while the control is usable.
                 "py-[1px]",
-                t ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
+                a ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
                 o.className
               )
             }

package/dist/components/New/ResizeHandle/ResizeHandle.js

@@ -0,0 +1,147 @@
+import { jsx as d } from "react/jsx-runtime";
+import { IconArrowsHorizontal as O } from "@tabler/icons-react";
+import { useState as T, useRef as a, useEffect as Y, useCallback as U } from "react";
+import { DIAL_KIT_ICON_STROKE as $ } from "../constants/icon.js";
+import { Tooltip as j } from "../Tooltip/Tooltip.js";
+import { DIAL_ICON_SIZE as q } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as B } from "../../../constants/public-class-names.js";
+import { TooltipPlacement as b } from "../../../types/tooltip.js";
+import { mergeClasses as L } from "../../../utils/merge-classes.js";
+const G = 16, V = 1e3, Z = 4, h = (r) => r == null ? !1 : (r.closest("[dir]")?.getAttribute("dir") ?? r.ownerDocument.defaultView?.getComputedStyle(r).direction) === "rtl", se = ({
+  width: r,
+  minWidth: o,
+  maxWidth: s,
+  defaultWidth: R,
+  onWidthChange: f,
+  label: w,
+  tooltip: z,
+  keyboardStep: g = G,
+  className: S
+}) => {
+  const [y, D] = T(!1), [I, m] = T(!1), [k, A] = T(!1), c = a(null), C = a(null), p = a({ x: 0, y: 0 }), l = a(null), u = a(void 0), i = a(void 0);
+  Y(
+    () => () => {
+      clearTimeout(u.current), i.current != null && cancelAnimationFrame(i.current);
+    },
+    []
+  );
+  const P = U(
+    (e) => {
+      const t = Number.isFinite(e) ? e : o;
+      return Math.round(Math.min(s, Math.max(o, t)));
+    },
+    [s, o]
+  ), E = (e) => {
+    C.current?.style.setProperty(
+      "transform",
+      `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`
+    ), A(!0);
+  }, x = (e) => {
+    p.current = { x: e.clientX, y: e.clientY }, clearTimeout(u.current), u.current = setTimeout(() => m(!0), V);
+  }, M = (e) => {
+    E(e), x(e);
+  }, H = () => {
+    A(!1), clearTimeout(u.current), m(!1);
+  }, K = (e) => {
+    e.button === 0 && (e.currentTarget.setPointerCapture(e.pointerId), l.current = { x: e.clientX, width: r }, D(!0));
+  }, N = (e) => {
+    E(e);
+    const t = l.current;
+    if (t == null) {
+      Math.hypot(
+        e.clientX - p.current.x,
+        e.clientY - p.current.y
+      ) > Z && (m(!1), x(e));
+      return;
+    }
+    const n = h(c.current) ? -1 : 1, F = P(t.width + (e.clientX - t.x) * n);
+    i.current != null && cancelAnimationFrame(i.current), i.current = requestAnimationFrame(() => f(F));
+  }, _ = (e) => {
+    l.current != null && (l.current = null, D(!1), e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId));
+  }, X = (e) => {
+    const t = h(c.current) ? -1 : 1;
+    let n;
+    switch (e.key) {
+      case "ArrowRight":
+        n = r + g * t;
+        break;
+      case "ArrowLeft":
+        n = r - g * t;
+        break;
+      case "Home":
+        n = o;
+        break;
+      case "End":
+        n = s;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault(), f(P(n));
+  }, v = () => {
+    R != null && f(P(R));
+  };
+  return (
+    /* A focusable separator is the ARIA window-splitter widget, so it is interactive. */
+    /* @__PURE__ */ d(
+      "div",
+      {
+        ref: c,
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": w,
+        "aria-valuenow": r,
+        "aria-valuemin": o,
+        "aria-valuemax": s,
+        tabIndex: 0,
+        className: L(
+          "absolute inset-y-0 end-0 -me-1 w-2 touch-none select-none",
+          "dial-resize-handle",
+          k && "dial-resize-handle-cursor-ready",
+          I && "dial-resize-handle-hover",
+          y && "dial-resize-handle-dragging",
+          S,
+          B.resizeHandle
+        ),
+        onPointerEnter: M,
+        onPointerLeave: H,
+        onPointerDown: K,
+        onPointerMove: N,
+        onPointerUp: _,
+        onPointerCancel: _,
+        onKeyDown: X,
+        onDoubleClick: v,
+        children: /* @__PURE__ */ d(
+          j,
+          {
+            tooltip: z,
+            open: I && !y,
+            placement: h(c.current) ? b.Left : b.Right,
+            asChild: !0,
+            children: /* @__PURE__ */ d(
+              "span",
+              {
+                ref: C,
+                "aria-hidden": "true",
+                className: L(
+                  "pointer-events-none fixed top-0 left-0 z-tooltip hidden text-secondary",
+                  "dial-resize-handle-arrow"
+                ),
+                children: /* @__PURE__ */ d(
+                  O,
+                  {
+                    size: q.LG,
+                    stroke: $
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    )
+  );
+};
+export {
+  se as ResizeHandle
+};