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

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
 };

package/dist/components/New/Tag/Tag.js

@@ -1,19 +1,19 @@
-import { jsxs as x, jsx as r } from "react/jsx-runtime";
-import { IconX as C } from "@tabler/icons-react";
+import { jsxs as k, jsx as r } from "react/jsx-runtime";
+import { IconX as x } from "@tabler/icons-react";
 import { DIAL_KIT_ICON_STROKE as _ } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as y } from "../../../constants/icon.js";
-import { ElementSize as D } from "../../../types/size.js";
+import { DIAL_ICON_SIZE as D } from "../../../constants/icon.js";
+import { ElementSize as T } from "../../../types/size.js";
 import { TagAppearance as d } from "../../../types/tag.js";
-import { mergeClasses as T } from "../../../utils/merge-classes.js";
+import { mergeClasses as y } from "../../../utils/merge-classes.js";
 import { GhostIconButton as A } from "../IconButton/IconButtonWrappers.js";
-import { tagInteractiveClassName as K, tagHoverClassName as L, tagStateClassNames as w, tagBaseClassName as z } from "./constants.js";
-import { DIAL_KIT_CLASS as E } from "../../../constants/public-class-names.js";
-const X = ({
+import { tagInteractiveClassName as K, tagHoverClassName as L, tagStateClassNames as w, tagShapeClassNames as z, tagBaseClassName as E } from "./constants.js";
+import { DIAL_KIT_CLASS as O } from "../../../constants/public-class-names.js";
+const Z = ({
   label: o,
-  icon: m,
-  appearance: l = d.Outlined,
+  icon: l,
+  appearance: s = d.Outlined,
   selected: i = !1,
-  disabled: t = !1,
+  disabled: a = !1,
   closable: p = !1,
   removeLabel: u,
   className: I,
@@ -21,45 +21,45 @@ const X = ({
   onClick: n,
   onRemove: c,
   onKeyDown: h,
-  ...s
+  ...m
 }) => {
-  const f = l === d.Selectable, a = !!n && !t, N = p && !!c && !t, S = f && i, k = (e) => {
-    h?.(e), !(!a || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
+  const f = s === d.Selectable, t = !!n && !a, N = p && !!c && !a, S = f && i, C = (e) => {
+    h?.(e), !(!t || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
   };
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ k(
     "span",
     {
-      ...s,
-      role: a ? "button" : s.role,
-      tabIndex: a ? 0 : s.tabIndex,
-      "aria-disabled": t || void 0,
-      "aria-pressed": f && a ? i : void 0,
-      onClick: t ? void 0 : n,
-      onKeyDown: k,
-      className: T(
-        z,
-        S ? "dial-tiny-semi-text" : "dial-tiny-text",
-        w[l][i ? "selected" : "default"],
+      ...m,
+      role: t ? "button" : m.role,
+      tabIndex: t ? 0 : m.tabIndex,
+      "aria-disabled": a || void 0,
+      "aria-pressed": f && t ? i : void 0,
+      onClick: a ? void 0 : n,
+      onKeyDown: C,
+      className: y(
+        E,
+        S ? "dial-tiny-semi-text" : z[s],
+        w[s][i ? "selected" : "default"],
         // The design defines no disabled tag, so a disabled one keeps its
         // colours and only stops responding.
-        t && "cursor-not-allowed",
-        a && [K, L],
+        a && "cursor-not-allowed",
+        t && [K, L],
         I,
-        E.tag
+        O.tag
       ),
       children: [
-        m && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: m }),
+        l && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: l }),
         /* @__PURE__ */ r("span", { className: "truncate", title: g ?? o, children: o }),
         N && /* @__PURE__ */ r(
           A,
           {
             className: "size-[16px] shrink-0 dial-kit-minimum-target",
-            size: D.Small,
+            size: T.Small,
             "aria-label": u ?? `Remove ${o}`,
             icon: /* @__PURE__ */ r(
-              C,
+              x,
               {
-                size: y.SM,
+                size: D.SM,
                 stroke: _,
                 "aria-hidden": "true"
               }
@@ -74,5 +74,5 @@ const X = ({
   );
 };
 export {
-  X as Tag
+  Z as Tag
 };

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

@@ -1,5 +1,9 @@
 import { TagAppearance as e } from "../../../types/tag.js";
 const a = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3", l = {
+  [e.Outlined]: "dial-tiny-text",
+  [e.Selectable]: "dial-tiny-text",
+  [e.Bordered]: "h-[24px] rounded-md border px-2 dial-small-text"
+}, r = {
   [e.Outlined]: {
     default: "bg-layer-raised text-primary",
     selected: "bg-control-accent-alpha text-primary"
@@ -7,11 +11,16 @@ const a = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3"
   [e.Selectable]: {
     default: "text-secondary",
     selected: "bg-control-accent-alpha text-primary"
+  },
+  [e.Bordered]: {
+    default: "border-tertiary bg-layer-sunken text-primary",
+    selected: "border-accent bg-control-accent-alpha text-primary"
   }
-}, c = "cursor-pointer outline-offset-0 focus-visible:outline focus-visible:outline-focus", o = "hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";
+}, o = "cursor-pointer outline-offset-0 focus-visible:outline focus-visible:outline-focus", c = "hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";
 export {
   a as tagBaseClassName,
-  o as tagHoverClassName,
-  c as tagInteractiveClassName,
-  l as tagStateClassNames
+  c as tagHoverClassName,
+  o as tagInteractiveClassName,
+  l as tagShapeClassNames,
+  r as tagStateClassNames
 };

package/dist/components/New/Textarea/Textarea.js

@@ -1,56 +1,60 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import "react";
-import { mergeClasses as n } from "../../../utils/merge-classes.js";
-import { ErrorText as v, CaptionText as N } from "../CaptionText/CaptionText.js";
-import { Label as b } from "../Label/Label.js";
-var C = /* @__PURE__ */ ((e) => (e.None = "none", e.Both = "both", e.Horizontal = "horizontal", e.Vertical = "vertical", e))(C || {});
-const s = {
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useId as I } from "react";
+import { mergeClasses as m } from "../../../utils/merge-classes.js";
+import { ErrorText as k, CaptionText as z } from "../CaptionText/CaptionText.js";
+import { Label as j } from "../Label/Label.js";
+var B = /* @__PURE__ */ ((e) => (e.None = "none", e.Both = "both", e.Horizontal = "horizontal", e.Vertical = "vertical", e))(B || {});
+const f = {
   none: "resize-none",
   both: "resize",
   horizontal: "resize-x",
   vertical: "resize-y"
-}, g = (e) => typeof e == "boolean" ? s[
+}, $ = (e) => typeof e == "boolean" ? f[
   e ? "both" : "none"
   /* None */
-] : s[e], E = ({
+] : f[e], V = ({
   className: e = "",
-  value: m,
-  onChange: c,
-  error: r,
-  containerClassName: x,
-  resize: p = !1,
-  labelProps: a,
-  caption: f,
-  id: o,
-  invalid: d,
+  value: x,
+  onChange: p,
+  error: t,
+  containerClassName: v,
+  resize: u = !1,
+  labelProps: o,
+  caption: r,
+  id: b,
+  invalid: n,
+  "aria-describedby": h,
+  "aria-invalid": N,
   ...l
 }) => {
-  const h = n(
+  const g = I(), i = b ?? g, s = t ? `${i}-error` : void 0, d = !t && r ? `${i}-caption` : void 0, C = m(
     "dial-kit-textarea dial-kit-input px-3 py-2",
-    d && "dial-kit-input-error",
+    n && "dial-kit-input-error",
     l.disabled && "dial-kit-input-disable",
-    g(p),
+    $(u),
     e
   );
-  return /* @__PURE__ */ i("div", { className: n("flex flex-col gap-2", x), children: [
-    a && /* @__PURE__ */ t(b, { ...a, htmlFor: o }),
-    /* @__PURE__ */ i("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ t(
+  return /* @__PURE__ */ c("div", { className: m("flex flex-col gap-2", v), children: [
+    o && /* @__PURE__ */ a(j, { ...o, htmlFor: i }),
+    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ a(
         "textarea",
         {
-          id: o,
-          value: m || "",
-          className: h,
-          onChange: (u) => c?.(u.currentTarget.value),
+          id: i,
+          value: x || "",
+          className: C,
+          onChange: (y) => p?.(y.currentTarget.value),
+          "aria-describedby": [h, s, d].filter(Boolean).join(" ") || void 0,
+          "aria-invalid": N ?? (t || n ? !0 : void 0),
           ...l
         }
       ),
-      /* @__PURE__ */ t(v, { text: r }),
-      !r && /* @__PURE__ */ t(N, { text: f })
+      /* @__PURE__ */ a(k, { id: s, text: t }),
+      !t && /* @__PURE__ */ a(z, { id: d, text: r })
     ] })
   ] });
 };
 export {
-  E as Textarea,
-  C as TextareaResize
+  V as Textarea,
+  B as TextareaResize
 };

package/dist/components/New/ToggleChip/ToggleChip.js

@@ -0,0 +1,54 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { useCallback as g } from "react";
+import { tagStateClassNames as h, tagInteractiveClassName as u, tagHoverClassName as N, tagBaseClassName as d } from "../Tag/constants.js";
+import { DIAL_KIT_CLASS as x } from "../../../constants/public-class-names.js";
+import { TagAppearance as b } from "../../../types/tag.js";
+import { mergeClasses as k } from "../../../utils/merge-classes.js";
+import { toggleChipDisabledClassNames as v, toggleChipLabelClassNames as A } from "./constants.js";
+const B = ({
+  label: e,
+  icon: s,
+  isSelected: a = !1,
+  onToggle: r,
+  onClick: m,
+  disabled: o = !1,
+  className: p,
+  title: n,
+  ...f
+}) => {
+  const C = g(
+    (l) => {
+      m?.(l), !l.defaultPrevented && r?.(!a);
+    },
+    [m, r, a]
+  ), t = a ? "selected" : "default";
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      ...f,
+      type: "button",
+      "aria-pressed": a,
+      disabled: o,
+      title: n ?? (typeof e == "string" ? e : void 0),
+      onClick: C,
+      className: k(
+        d,
+        A[t],
+        o ? v[t] : [
+          h[b.Selectable][t],
+          u,
+          N
+        ],
+        p,
+        x.toggleChip
+      ),
+      children: [
+        s && /* @__PURE__ */ i("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: s }),
+        /* @__PURE__ */ i("span", { className: "truncate", children: e })
+      ]
+    }
+  );
+};
+export {
+  B as ToggleChip
+};

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

@@ -0,0 +1,11 @@
+const e = {
+  default: "dial-tiny-text",
+  selected: "dial-tiny-semi-text"
+}, t = {
+  default: "cursor-not-allowed text-control-disable-primary",
+  selected: "cursor-not-allowed bg-control-disable-primary text-control-disable-primary"
+};
+export {
+  t as toggleChipDisabledClassNames,
+  e as toggleChipLabelClassNames
+};