@epam/ai-dial-ui-kit 0.16.0-dev.4 → 0.16.0-dev.41

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

@@ -1,53 +1,44 @@
-import { jsx as s } from "react/jsx-runtime";
-import { IconSearch as a, IconX as r, IconChevronRight as c } from "@tabler/icons-react";
-import l from "../../../assets/icons/no-data.svg.js";
-import { overlayItemClassName as n, overlayListClassName as i, overlayGap as m, overlaySubMenuListClassName as h } from "../constants/overlay.js";
-import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as e } from "../../../constants/icon.js";
-import { mergeClasses as o } from "../../../utils/merge-classes.js";
-const N = o("w-full flex flex-col"), v = n, y = "!max-w-[var(--reference-width)]", x = o(
+import { jsx as e } from "react/jsx-runtime";
+import { IconSearch as a, IconX as r, IconChevronRight as l } from "@tabler/icons-react";
+import { overlayItemClassName as c, overlayListClassName as n, overlayGap as i, overlaySubMenuListClassName as m } from "../constants/overlay.js";
+import { DIAL_KIT_ICON_STROKE as s } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as o } from "../../../constants/icon.js";
+import { mergeClasses as t } from "../../../utils/merge-classes.js";
+const S = t("w-full flex flex-col"), d = c, N = "!max-w-[var(--reference-width)]", v = t(
   "max-h-[344px] overflow-y-auto py-1",
-  i
-), L = m, M = h, O = /* @__PURE__ */ s(
-  c,
+  n
+), x = i, y = m, M = /* @__PURE__ */ e(
+  l,
   {
-    size: e.SM,
-    stroke: t,
+    size: o.SM,
+    stroke: s,
     "aria-hidden": "true"
   }
-), w = "text-secondary transition-transform", _ = 8, b = /* @__PURE__ */ s(
+), O = "text-secondary transition-transform", L = 8, _ = /* @__PURE__ */ e(
   a,
   {
-    size: e.MD,
-    stroke: t,
+    size: o.MD,
+    stroke: s,
     "aria-hidden": "true"
   }
-), g = /* @__PURE__ */ s(
+), b = /* @__PURE__ */ e(
   r,
   {
-    size: e.SM,
-    stroke: t,
-    "aria-hidden": "true"
-  }
-), D = /* @__PURE__ */ s(
-  l,
-  {
-    width: e.LG,
-    height: e.LG,
+    size: o.SM,
+    stroke: s,
     "aria-hidden": "true"
   }
 );
 export {
-  g as selectCloseIcon,
-  D as selectEmptyStateIcon,
-  w as selectFieldIconClassName,
-  y as selectListWidthClassName,
-  v as selectOptionBaseClassName,
-  x as selectOptionsScrollClassName,
-  N as selectOverlayBaseClassName,
-  b as selectSearchIcon,
-  _ as selectSearchThreshold,
-  O as selectSubMenuCaretIcon,
-  M as selectSubMenuClassName,
-  L as selectSubMenuGap
+  b as selectCloseIcon,
+  O as selectFieldIconClassName,
+  N as selectListWidthClassName,
+  d as selectOptionBaseClassName,
+  v as selectOptionsScrollClassName,
+  S as selectOverlayBaseClassName,
+  _ as selectSearchIcon,
+  L as selectSearchThreshold,
+  M as selectSubMenuCaretIcon,
+  y as selectSubMenuClassName,
+  x as selectSubMenuGap
 };

package/dist/components/New/SelectedEntityCard/SelectedEntityCard.js

@@ -0,0 +1,86 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { DIAL_KIT_CLASS as y } from "../../../constants/public-class-names.js";
+import { SkeletonVariant as a } from "../../../types/skeleton.js";
+import { mergeClasses as v } from "../../../utils/merge-classes.js";
+import { ErrorText as b } from "../CaptionText/CaptionText.js";
+import { EntityIdentity as g } from "../EntityIdentity/EntityIdentity.js";
+import { Skeleton as l } from "../../Skeleton/Skeleton.js";
+const s = "bg-control-neutral-active", C = ({ iconSize: t }) => /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ e("div", { className: "shrink-0 overflow-hidden rounded-[14px]", children: /* @__PURE__ */ e(
+    l,
+    {
+      variant: a.Rectangular,
+      width: t,
+      height: t,
+      className: s
+    }
+  ) }),
+  /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        variant: a.Text,
+        width: "30%",
+        height: 12,
+        className: s
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        variant: a.Text,
+        width: "60%",
+        height: 16,
+        className: s
+      }
+    )
+  ] })
+] }), _ = ({
+  entityId: t,
+  item: n,
+  isLoading: h = !1,
+  isDisabled: x = !1,
+  error: i,
+  details: o,
+  labels: d,
+  showType: f = !0,
+  iconSize: c = 44,
+  headingLevel: p = 4,
+  className: u
+}) => {
+  const m = o != null ? /* @__PURE__ */ e("span", { className: "dial-caption-text text-secondary", children: o }) : void 0, N = () => t ? h ? /* @__PURE__ */ e(C, { iconSize: c }) : n == null ? /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ e("span", { className: "dial-body-semi-text block truncate text-secondary", children: t }),
+    m
+  ] }) : /* @__PURE__ */ e(
+    g,
+    {
+      item: n,
+      labels: { type: d?.type },
+      hasFeaturedTag: !1,
+      iconSize: c,
+      headingLevel: p,
+      nameClassName: "dial-body-semi-text",
+      showType: f,
+      footer: m
+    }
+  ) : /* @__PURE__ */ e("span", { className: "dial-body-semi-text block truncate text-secondary", children: d?.placeholder ?? "Not selected" });
+  return /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: v(
+          "rounded-2xl border bg-layer-raised p-3",
+          i ? "border-error" : "border-tertiary",
+          x && "opacity-50",
+          u,
+          y.selectedEntityCard
+        ),
+        children: N()
+      }
+    ),
+    /* @__PURE__ */ e(b, { text: i, className: "mt-1 block" })
+  ] });
+};
+export {
+  _ as SelectedEntityCard
+};

package/dist/components/New/SharedEntityIndicator/SharedEntityIndicator.js

@@ -15,7 +15,7 @@ const S = ({
     role: "img",
     "aria-label": o,
     className: n(
-      "flex shrink-0 rounded-sm bg-layer-raised text-accent",
+      "flex shrink-0 rounded-xs bg-layer-raised text-accent",
       i,
       s.sharedEntityIndicator
     ),

package/dist/components/New/SideDrawer/SideDrawer.js

@@ -68,7 +68,7 @@ const ne = ({
               inert: !t,
               style: w,
               className: r(
-                "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-none",
+                "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-hidden",
                 "desktop:w-[540px] desktop:rounded-s-xl desktop:border-s desktop:border-secondary",
                 "transition-transform duration-300 motion-reduce:transition-none",
                 t ? "translate-x-0" : "translate-x-full rtl:-translate-x-full",

package/dist/components/New/StateScreen/StateScreen.js

@@ -0,0 +1,61 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useId as o } from "react";
+import { mergeClasses as t } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as x } from "../../../constants/public-class-names.js";
+const h = ({
+  title: i,
+  description: r,
+  icon: l,
+  action: s,
+  className: m,
+  titleClassName: n,
+  descriptionClassName: c
+}) => {
+  const a = o();
+  return /* @__PURE__ */ d(
+    "section",
+    {
+      "aria-labelledby": a,
+      className: t(
+        "flex size-full flex-col items-center justify-center px-4 text-center",
+        m,
+        x.stateScreen
+      ),
+      children: [
+        l != null && /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mb-4 flex size-14 items-center justify-center rounded-full border border-secondary text-secondary",
+            children: l
+          }
+        ),
+        /* @__PURE__ */ e(
+          "h1",
+          {
+            id: a,
+            className: t(
+              "dial-body-semi-text text-primary",
+              n
+            ),
+            children: i
+          }
+        ),
+        r != null && /* @__PURE__ */ e(
+          "p",
+          {
+            className: t(
+              "dial-small-text mt-2 text-secondary",
+              c
+            ),
+            children: r
+          }
+        ),
+        s != null && /* @__PURE__ */ e("div", { className: "mt-4", children: s })
+      ]
+    }
+  );
+};
+export {
+  h as StateScreen
+};

package/dist/components/New/Switch/Switch.js

@@ -9,15 +9,15 @@ const C = ({
   id: d,
   labelProps: o,
   isOn: t = !1,
-  disabled: l,
+  disabled: c,
   onChange: a,
-  caption: c,
+  caption: s,
   className: u,
   ...i
 }) => {
-  const p = b(), s = d ?? p, n = c ? `${s}-caption` : void 0, f = g(
-    (h) => {
-      a?.(h.target.checked);
+  const p = b(), l = d ?? p, n = s ? `${l}-caption` : void 0, h = g(
+    (f) => {
+      a?.(f.target.checked);
     },
     [a]
   );
@@ -26,7 +26,9 @@ const C = ({
       "div",
       {
         className: r(
-          "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",
           u,
           N.switch
         ),
@@ -37,11 +39,11 @@ const C = ({
               ...i,
               type: "checkbox",
               role: "switch",
-              id: s,
+              id: l,
               checked: t,
               "aria-checked": t,
-              disabled: l,
-              onChange: f,
+              disabled: c,
+              onChange: h,
               "aria-label": y(
                 typeof o?.label != "string" ? i["aria-label"] : void 0
               ),
@@ -52,14 +54,14 @@ const C = ({
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: s,
+              htmlFor: l,
               className: r(
                 "flex h-[18px] w-[36px] shrink-0 items-center rounded-full p-0.5 transition-colors duration-200",
                 "peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus",
                 t ? "justify-end" : "justify-start",
-                l ? "cursor-not-allowed bg-control-disable-primary" : r(
+                c ? "cursor-not-allowed bg-control-disable-primary" : r(
                   "cursor-pointer",
-                  t ? "bg-control-accent hover:bg-control-accent-hover" : "bg-control-neutral-default hover:bg-control-neutral-hover-strong"
+                  t ? "bg-control-accent group-has-[label:hover]/choice:bg-control-accent-hover" : "bg-control-neutral-default group-has-[label:hover]/choice:bg-control-neutral-hover-strong"
                 )
               ),
               children: /* @__PURE__ */ e(
@@ -67,7 +69,7 @@ const C = ({
                 {
                   className: r(
                     "size-3.5 shrink-0 rounded-full",
-                    l ? "bg-control-disable-secondary" : "bg-control-neutral"
+                    c ? "bg-control-disable-secondary" : "bg-control-neutral"
                   )
                 }
               )
@@ -78,12 +80,12 @@ const C = ({
             {
               size: x.Standard,
               ...o,
-              htmlFor: s,
+              htmlFor: l,
               className: r(
                 // `Label` defaults to the secondary colour; the switch's own label
                 // has always been primary while the control is usable.
                 "py-[1px]",
-                l ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
+                c ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
                 o.className
               )
             }
@@ -91,12 +93,12 @@ const C = ({
         ]
       }
     ),
-    c && /* @__PURE__ */ e(
+    s && /* @__PURE__ */ e(
       "span",
       {
         id: n,
         className: "dial-tiny-text text-secondary ml-[44px]",
-        children: c
+        children: s
       }
     )
   ] });

package/dist/components/New/Tabs/Tabs.js

@@ -1,49 +1,55 @@
-import { jsx as s, jsxs as I } from "react/jsx-runtime";
-import { useRef as j, useId as R, useCallback as _ } from "react";
-import { mergeClasses as l } from "../../../utils/merge-classes.js";
+import { jsx as t, jsxs as I, Fragment as O } from "react/jsx-runtime";
+import { IconExclamationCircle as z, IconAlertTriangle as H } from "@tabler/icons-react";
+import { useRef as R, useId as V, useCallback as j } from "react";
+import { mergeClasses as n } from "../../../utils/merge-classes.js";
 import { DIAL_KIT_CLASS as a } from "../../../constants/public-class-names.js";
-import { TabOrientation as u } from "../../../types/tab.js";
-const z = {
-  [u.Horizontal]: { next: "ArrowRight", previous: "ArrowLeft" },
-  [u.Vertical]: { next: "ArrowDown", previous: "ArrowUp" }
-}, M = ({
-  tabs: n,
+import { DIAL_ICON_SIZE as E } from "../../../constants/icon.js";
+import { DIAL_KIT_ICON_STROKE as _ } from "../constants/icon.js";
+import { TabOrientation as m, TabStatus as x } from "../../../types/tab.js";
+const M = {
+  [x.Error]: "Error",
+  [x.Warning]: "Warning"
+}, U = {
+  [m.Horizontal]: { next: "ArrowRight", previous: "ArrowLeft" },
+  [m.Vertical]: { next: "ArrowDown", previous: "ArrowUp" }
+}, P = ({
+  tabs: s,
   activeTabId: c,
   onTabChange: f,
-  orientation: m = u.Horizontal,
+  orientation: h = m.Horizontal,
   sectionLabel: d,
-  ariaLabel: k,
+  ariaLabel: A,
   className: v,
   tabListClassName: D,
-  tabClassName: S,
-  sectionLabelClassName: H
+  tabClassName: L,
+  sectionLabelClassName: T
 }) => {
-  const w = j({}), A = R(), i = m === u.Vertical, h = n.find((e) => e.id === c), K = h && !h.disabled ? h.id : n.find((e) => !e.disabled)?.id, V = _(
+  const N = R({}), S = V(), i = h === m.Vertical, y = s.find((e) => e.id === c), K = y && !y.disabled ? y.id : s.find((e) => !e.disabled)?.id, C = j(
     (e) => {
-      const { next: t, previous: r } = z[m];
-      if (![t, r, "Home", "End"].includes(e.key) || n.length === 0)
+      const { next: r, previous: l } = U[h];
+      if (![r, l, "Home", "End"].includes(e.key) || s.length === 0)
         return;
-      const o = n.filter((g) => !g.disabled);
+      const o = s.filter((k) => !k.disabled);
       if (o.length === 0) return;
-      const p = Math.max(
-        o.findIndex((g) => g.id === c),
+      const u = Math.max(
+        o.findIndex((k) => k.id === c),
         0
       ), b = o.length - 1;
-      let x = p;
-      e.key === t ? x = p === b ? 0 : p + 1 : e.key === r ? x = p === 0 ? b : p - 1 : e.key === "Home" ? x = 0 : x = b, e.preventDefault();
-      const y = o[x];
-      w.current[y.id]?.focus(), y.id !== c && f(y.id);
+      let p = u;
+      e.key === r ? p = u === b ? 0 : u + 1 : e.key === l ? p = u === 0 ? b : u - 1 : e.key === "Home" ? p = 0 : p = b, e.preventDefault();
+      const g = o[p];
+      N.current[g.id]?.focus(), g.id !== c && f(g.id);
     },
-    [n, c, f, m]
-  ), N = /* @__PURE__ */ s(
+    [s, c, f, h]
+  ), w = /* @__PURE__ */ t(
     "div",
     {
       role: "tablist",
       "aria-orientation": i ? "vertical" : void 0,
-      "aria-label": k,
-      "aria-labelledby": !k && d ? A : void 0,
-      onKeyDown: V,
-      className: l(
+      "aria-label": A,
+      "aria-labelledby": !A && d ? S : void 0,
+      onKeyDown: C,
+      className: n(
         i ? "flex flex-col gap-1 px-2" : "flex justify-start gap-1",
         // Without a heading the list is the root, so it takes the caller's
         // classes — and the root kit class below — itself.
@@ -52,62 +58,89 @@ const z = {
         a.tabList,
         !d && a.tabs
       ),
-      children: n.map((e) => {
-        const t = c === e.id, r = !!e.disabled;
+      children: s.map((e) => {
+        const r = c === e.id, l = !!e.disabled;
         return /* @__PURE__ */ I(
           "button",
           {
             ref: (o) => {
-              w.current[e.id] = o;
+              N.current[e.id] = o;
             },
             type: "button",
             role: "tab",
-            "aria-selected": t,
-            disabled: r,
+            "aria-selected": r,
+            disabled: l,
             tabIndex: e.id === K ? 0 : -1,
             onClick: () => f(e.id),
-            className: l(
+            className: n(
               "dial-kit-enhanced-target flex items-center gap-2 text-start",
               "transition-colors motion-reduce:transition-none",
               "focus-visible:outline focus-visible:outline-focus",
               i ? [
                 "h-11 w-full rounded-lg px-3 desktop:h-10",
                 "focus-visible:-outline-offset-1",
-                t ? "dial-small-semi-text" : "dial-small-text text-secondary"
+                r ? "dial-small-semi-text" : "dial-small-text text-secondary"
               ] : [
                 "dial-small-paragraph-semi-text border-b-2 border-transparent px-3 py-2",
                 "focus-visible:outline-offset-2"
               ],
-              r && (i ? "cursor-not-allowed text-control-disable-primary" : "cursor-not-allowed border-control-disable-primary text-control-disable-primary"),
-              !r && (i ? t ? "bg-control-accent-alpha text-accent hover:bg-control-accent-alpha-hover" : "hover:bg-control-accent-alpha-hover" : t ? "dial-kit-tab-selected-underline text-primary" : "border-transparent text-secondary"),
-              S,
+              l && (i ? "cursor-not-allowed text-control-disable-primary" : "cursor-not-allowed border-control-disable-primary text-control-disable-primary"),
+              !l && (i ? r ? "bg-control-accent-alpha text-accent hover:bg-control-accent-alpha-hover" : "hover:bg-control-accent-alpha-hover" : r ? "dial-kit-tab-selected-underline text-primary" : "border-transparent text-secondary"),
+              L,
               a.tab,
-              t && a.tabSelected
+              r && a.tabSelected
             ),
             children: [
               e.icon && // The label names the tab, so the icon beside it is decorative —
               // and a Tabler icon is a bare `<svg>` that would otherwise be
               // announced as an unnamed graphic.
-              /* @__PURE__ */ s("span", { "aria-hidden": "true", className: "flex shrink-0", children: e.icon }),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "flex shrink-0", children: e.icon }),
+              /* @__PURE__ */ t(
                 "span",
                 {
-                  className: l(
-                    i && !t && !r && "text-primary"
+                  className: n(
+                    i && !r && !l && "text-primary"
                   ),
                   children: e.label
                 }
               ),
-              e.count != null && /* @__PURE__ */ s(
+              e.status && /* @__PURE__ */ I(O, { children: [
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: n(
+                      "flex shrink-0",
+                      e.status === x.Error ? "text-error" : "text-warning",
+                      i && e.count == null && "ms-auto"
+                    ),
+                    children: e.status === x.Error ? /* @__PURE__ */ t(
+                      z,
+                      {
+                        size: E.SM,
+                        stroke: _
+                      }
+                    ) : /* @__PURE__ */ t(
+                      H,
+                      {
+                        size: E.SM,
+                        stroke: _
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ t("span", { className: "sr-only", children: e.statusLabel ?? M[e.status] })
+              ] }),
+              e.count != null && /* @__PURE__ */ t(
                 "span",
                 {
-                  className: l(
+                  className: n(
                     "dial-tiny-semi-text rounded-full px-1.5 py-0.5",
                     // In a rail the badge belongs at the far end of the row, not
                     // hanging off the label.
                     i && "ms-auto",
-                    r && "bg-layer-sunken text-control-disable-primary",
-                    !r && (t ? "bg-control-accent-alpha text-accent" : "bg-layer-sunken text-secondary")
+                    l && "bg-layer-sunken text-control-disable-primary",
+                    !l && (r ? "bg-control-accent-alpha text-accent" : "bg-layer-sunken text-secondary")
                   ),
                   children: e.count
                 }
@@ -122,26 +155,26 @@ const z = {
   return d ? /* @__PURE__ */ I(
     "div",
     {
-      className: l(
+      className: n(
         "flex flex-col gap-3",
         v,
         a.tabs
       ),
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ t(
           "div",
           {
-            className: l(
+            className: n(
               "flex h-16 shrink-0 items-center",
               i ? "px-4" : "px-3"
             ),
-            children: /* @__PURE__ */ s(
+            children: /* @__PURE__ */ t(
               "span",
               {
-                id: A,
-                className: l(
+                id: S,
+                className: n(
                   "dial-h1-text text-primary",
-                  H,
+                  T,
                   a.tabsSectionLabel
                 ),
                 children: d
@@ -149,11 +182,11 @@ const z = {
             )
           }
         ),
-        N
+        w
       ]
     }
-  ) : N;
+  ) : w;
 };
 export {
-  M as Tabs
+  P as Tabs
 };