@epam/ai-dial-ui-kit 0.15.0-dev.5 → 0.15.0-dev.50

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

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

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

@@ -7,57 +7,58 @@ import { GhostIconButton as ie } from "../IconButton/IconButtonWrappers.js";
 import { Tooltip as le } from "../Tooltip/Tooltip.js";
 import { DIAL_KIT_ICON_STROKE as te } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as ne } from "../../../constants/icon.js";
-import { ButtonVariant as me } from "../../../types/button.js";
-import { PopupSize as pe } from "../../../types/popup.js";
+import { ButtonVariant as pe } from "../../../types/button.js";
+import { PopupSize as me } from "../../../types/popup.js";
 import { ElementSize as ce } from "../../../types/size.js";
 import { useThemeScope as de } from "../ThemeScope/ThemeScope.js";
 import { mergeClasses as r } from "../../../utils/merge-classes.js";
 import { IconChevronLeft as ue } from "@tabler/icons-react";
-import { popupActionsGroupClassName as l, popupHeaderDividerClassName as fe, popupHeaderClassName as ge, popupSizeClassMap as he, popupBaseClassName as Ne, popupOverlayBaseClassName as ve, popupTitleClassName as Ce, popupFooterDividerClassName as Ie, popupFooterClassName as Fe } from "./constants.js";
-const Oe = ({
+import { popupActionsGroupClassName as l, popupHeaderDividerClassName as fe, popupHeaderClassName as ge, popupSizeClassMap as he, popupBaseClassName as Ne, popupOverlayBaseClassName as Ce, popupTitleClassName as ve, popupFooterDividerClassName as Ie, popupFooterClassName as Fe } from "./constants.js";
+import { DIAL_KIT_CLASS as Se } from "../../../constants/public-class-names.js";
+const $e = ({
   open: t = !1,
   header: n,
   ariaLabel: F,
   portalId: S,
   className: x,
-  overlayClassName: b,
-  titleClassName: z,
-  headerClassName: T,
-  bodyClassName: y,
-  children: B,
-  footer: m,
-  footerClassName: D,
-  onClose: p,
+  overlayClassName: T,
+  titleClassName: _,
+  headerClassName: b,
+  bodyClassName: z,
+  children: D,
+  footer: p,
+  footerClassName: y,
+  onClose: m,
   onBack: c,
-  backAriaLabel: P = "Back",
+  backAriaLabel: B = "Back",
   headerActions: d,
-  headerDivider: _ = !1,
+  headerDivider: L = !1,
   mainButtons: u,
   additionalButtons: f,
   additionalButtonsOnLeft: g = !1,
-  footerDivider: M = !1,
-  size: R = pe.Md,
-  hideClose: w = !1,
-  closeAriaLabel: E = "Close dialog",
-  closeOnOutsideClick: G = !0,
+  footerDivider: P = !1,
+  size: A = me.Md,
+  hideClose: M = !1,
+  closeAriaLabel: R = "Close dialog",
+  closeOnOutsideClick: w = !0,
   preventKeyboardOnOpen: h = !1
 }) => {
-  const L = de(), N = oe(null), O = re(), { refs: v, context: a } = J({
+  const E = de(), N = oe(null), G = re(), { refs: C, context: a } = J({
     open: t,
     onOpenChange: (e) => {
-      e || p?.(null);
+      e || m?.(null);
     }
-  }), $ = Q(a, { role: "dialog" }), j = U(a, { outsidePress: G }), { getFloatingProps: k } = W([$, j]);
+  }), O = Q(a, { role: "dialog" }), $ = U(a, { outsidePress: w }), { getFloatingProps: j } = W([O, $]);
   if (!t) return null;
-  const i = typeof n == "string" ? `popup-heading-${O}` : void 0, A = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
+  const i = typeof n == "string" ? `popup-heading-${G}` : void 0, k = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
     "h2",
     {
       id: i,
-      className: r(Ce, z),
+      className: r(ve, _),
       children: /* @__PURE__ */ o(le, { tooltip: e, triggerClassName: "truncate", children: e })
     }
-  ) : e : /* @__PURE__ */ o("span", {}), C = w ? null : /* @__PURE__ */ o(ae, { ariaLabel: E, onClose: (e) => p?.(e) }), I = (e, K = []) => K.map(({ variant: V = me.Neutral, ...Z }, q) => /* @__PURE__ */ o(se, { variant: V, ...Z }, `${e}-${q}`)), H = () => {
-    if (m !== void 0) return m;
+  ) : e : /* @__PURE__ */ o("span", {}), v = M ? null : /* @__PURE__ */ o(ae, { ariaLabel: R, onClose: (e) => m?.(e) }), I = (e, K = []) => K.map(({ variant: V = pe.Neutral, ...Z }, q) => /* @__PURE__ */ o(se, { variant: V, ...Z }, `${e}-${q}`)), H = () => {
+    if (p !== void 0) return p;
     if (!u?.length && !f?.length) return null;
     const e = I("additional", f);
     return /* @__PURE__ */ s(
@@ -65,8 +66,8 @@ const Oe = ({
       {
         className: r(
           Fe,
-          M && Ie,
-          D
+          P && Ie,
+          y
         ),
         children: [
           g && e.length > 0 && /* @__PURE__ */ o("div", { className: l, children: e }),
@@ -82,28 +83,29 @@ const Oe = ({
     Y,
     {
       className: r(
-        ve,
-        L,
-        b
+        Ce,
+        E,
+        T
       ),
       children: /* @__PURE__ */ o(
         ee,
         {
           context: a,
-          initialFocus: h ? N : v.floating,
+          initialFocus: h ? N : C.floating,
           children: /* @__PURE__ */ s(
             "div",
             {
-              ref: v.setFloating,
-              ...k(),
+              ref: C.setFloating,
+              ...j(),
               role: "dialog",
               "aria-modal": "true",
               "aria-labelledby": i,
               "aria-label": i ? void 0 : F,
               className: r(
                 Ne,
-                he[R],
-                x
+                he[A],
+                x,
+                Se.popup
               ),
               children: [
                 h && /* @__PURE__ */ o(
@@ -120,14 +122,14 @@ const Oe = ({
                   {
                     className: r(
                       ge,
-                      _ && fe,
-                      T
+                      L && fe,
+                      b
                     ),
                     children: [
                       c && /* @__PURE__ */ o(
                         ie,
                         {
-                          "aria-label": P,
+                          "aria-label": B,
                           size: ce.Small,
                           className: "mr-2",
                           onClick: c,
@@ -141,15 +143,15 @@ const Oe = ({
                           )
                         }
                       ),
-                      A(n),
+                      k(n),
                       d ? /* @__PURE__ */ s("div", { className: l, children: [
                         d,
-                        C
-                      ] }) : C
+                        v
+                      ] }) : v
                     ]
                   }
                 ),
-                /* @__PURE__ */ o("div", { className: r("grow overflow-auto", y), children: B }),
+                /* @__PURE__ */ o("div", { className: r("grow overflow-auto", z), children: D }),
                 H()
               ]
             }
@@ -160,5 +162,5 @@ const Oe = ({
   ) });
 };
 export {
-  Oe as Popup
+  $e as Popup
 };

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

@@ -1,5 +1,5 @@
 import { PopupSize as e } from "../../../types/popup.js";
-const a = "z-[52] flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", r = "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", o = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary", s = "border-b border-tertiary", l = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", x = "flex shrink-0 flex-row items-center gap-2", i = {
+const a = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", r = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", o = "flex flex-row items-center justify-between px-6 py-4", t = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary", s = "border-b border-tertiary", l = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", x = "flex shrink-0 flex-row items-center gap-2", i = {
   [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]"
@@ -9,9 +9,9 @@ export {
   r as popupBaseClassName,
   l as popupFooterClassName,
   m as popupFooterDividerClassName,
-  t as popupHeaderClassName,
+  o as popupHeaderClassName,
   s as popupHeaderDividerClassName,
   a as popupOverlayBaseClassName,
   i as popupSizeClassMap,
-  o as popupTitleClassName
+  t as popupTitleClassName
 };

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

@@ -3,88 +3,99 @@ import { useId as h, 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";
-import { Label as k } from "../Label/Label.js";
-const A = ({
+import { Label as I } from "../Label/Label.js";
+import { DIAL_KIT_CLASS as k } from "../../../constants/public-class-names.js";
+const F = ({
   id: p,
   name: u,
-  value: l,
+  value: i,
   labelProps: o,
-  isSelected: i = !1,
+  isSelected: l = !1,
   disabled: t,
   onChange: s,
   caption: c,
-  className: b,
+  className: f,
   ...n
 }) => {
-  const f = h(), a = p ?? f, d = c ? `${a}-caption` : void 0, g = y(
+  const b = h(), a = p ?? b, d = c ? `${a}-caption` : void 0, g = y(
     (x) => {
-      x.target.checked && s?.(l);
+      x.target.checked && s?.(i);
     },
-    [s, l]
+    [s, i]
   );
   return /* @__PURE__ */ m("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ m("div", { className: r("flex items-center gap-2 ", b), children: [
-      /* @__PURE__ */ e(
-        "input",
-        {
-          ...n,
-          type: "radio",
-          id: a,
-          name: u,
-          value: l,
-          checked: i,
-          disabled: t,
-          onChange: g,
-          "aria-label": v(
-            typeof o?.label != "string" ? n["aria-label"] : void 0
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: r(
+          "flex items-center gap-2 ",
+          f,
+          k.radio
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ...n,
+              type: "radio",
+              id: a,
+              name: u,
+              value: i,
+              checked: l,
+              disabled: t,
+              onChange: g,
+              "aria-label": v(
+                typeof o?.label != "string" ? n["aria-label"] : void 0
+              ),
+              "aria-describedby": d,
+              className: "peer sr-only"
+            }
           ),
-          "aria-describedby": d,
-          className: "peer sr-only"
-        }
-      ),
-      /* @__PURE__ */ e(
-        "label",
-        {
-          htmlFor: a,
-          className: r(
-            "group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200 hover:bg-control-accent-alpha-hover",
-            // 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",
-              i ? "border border-accent bg-control-neutral" : "border-default bg-control-neutral"
-            )
+          /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: a,
+              className: r(
+                "group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200 hover:bg-control-accent-alpha-hover",
+                // 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",
+                  l ? "border border-accent bg-control-neutral" : "border-default bg-control-neutral"
+                )
+              ),
+              children: l && /* @__PURE__ */ e(
+                "span",
+                {
+                  className: r(
+                    "size-3 rounded-full",
+                    t ? "bg-control-disable-secondary" : "bg-control-accent"
+                  )
+                }
+              )
+            }
           ),
-          children: i && /* @__PURE__ */ e(
-            "span",
+          o && /* @__PURE__ */ e(
+            I,
             {
+              size: N.Standard,
+              ...o,
+              htmlFor: a,
               className: r(
-                "size-3 rounded-full",
-                t ? "bg-control-disable-secondary" : "bg-control-accent"
+                // `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",
+                o.className
               )
             }
           )
-        }
-      ),
-      o && /* @__PURE__ */ e(
-        k,
-        {
-          size: N.Standard,
-          ...o,
-          htmlFor: a,
-          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",
-            o.className
-          )
-        }
-      )
-    ] }),
+        ]
+      }
+    ),
     c && /* @__PURE__ */ e(
       "span",
       {
@@ -96,5 +107,5 @@ const A = ({
   ] });
 };
 export {
-  A as Radio
+  F as Radio
 };

package/dist/components/New/RadioGroup/RadioGroup.js

@@ -1,19 +1,20 @@
-import { jsxs as b, jsx as e } from "react/jsx-runtime";
-import { useId as T } from "react";
-import { ErrorText as y, CaptionText as G } from "../CaptionText/CaptionText.js";
-import { Label as w } from "../Label/Label.js";
-import { Radio as A } from "../Radio/Radio.js";
-import { RadioGroupOrientation as E } from "../../../types/radio-group.js";
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import { useId as B } from "react";
+import { ErrorText as G, CaptionText as L } from "../CaptionText/CaptionText.js";
+import { Label as R } from "../Label/Label.js";
+import { Radio as S } from "../Radio/Radio.js";
+import { RadioGroupOrientation as y } from "../../../types/radio-group.js";
 import { mergeClasses as i } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as v } from "../../../utils/accessible-name.js";
-import { selectedContentClassName as L, orientationClassMap as M, optionsWrapperBaseClassName as O, groupBaseClassName as S } from "./constants.js";
-const Q = ({
-  items: u,
+import { resolveAccessibleName as u } from "../../../utils/accessible-name.js";
+import { selectedContentClassName as _, orientationClassMap as w, optionsWrapperBaseClassName as D, groupBaseClassName as E } from "./constants.js";
+import { DIAL_KIT_CLASS as K } from "../../../constants/public-class-names.js";
+const U = ({
+  items: v,
   value: f,
   onChange: x,
-  name: N,
-  id: C,
-  orientation: I = E.Column,
+  name: C,
+  id: N,
+  orientation: I = y.Column,
   labelProps: r,
   disabled: s,
   error: l,
@@ -21,61 +22,71 @@ const Q = ({
   ariaLabel: g,
   className: $,
   optionsClassName: h,
-  radioClassName: j,
-  contentClassName: B
+  radioClassName: T,
+  contentClassName: j
 }) => {
-  const R = T(), o = C ?? R, n = `${o}-label`, t = l ? `${o}-error` : void 0, c = !l && d ? `${o}-caption` : void 0, p = v(r?.label);
-  return /* @__PURE__ */ b("div", { className: i(S, $), children: [
-    r && /* @__PURE__ */ e(w, { ...r, id: n }),
-    /* @__PURE__ */ e(
-      "div",
-      {
-        role: "radiogroup",
-        "aria-labelledby": p ? n : void 0,
-        "aria-label": p ? void 0 : v(g),
-        "aria-describedby": [t, c].filter(Boolean).join(" ") || void 0,
-        "aria-disabled": s || void 0,
-        className: i(
-          O,
-          M[I],
-          h
-        ),
-        children: u.map((a) => {
-          const m = a.value === f;
-          return /* @__PURE__ */ b("div", { className: "flex min-w-0 flex-col", children: [
-            /* @__PURE__ */ e(
-              A,
-              {
-                id: `${o}-${a.value}`,
-                name: N ?? o,
-                value: a.value,
-                labelProps: a.label == null ? void 0 : { label: a.label },
-                "aria-label": a["aria-label"],
-                caption: a.caption,
-                isSelected: m,
-                disabled: s || a.disabled,
-                onChange: x,
-                className: j
-              }
+  const A = B(), e = N ?? A, n = `${e}-label`, t = l ? `${e}-error` : void 0, c = !l && d ? `${e}-caption` : void 0, p = u(r?.label);
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: i(
+        E,
+        $,
+        K.radioGroup
+      ),
+      children: [
+        r && /* @__PURE__ */ o(R, { ...r, id: n }),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            role: "radiogroup",
+            "aria-labelledby": p ? n : void 0,
+            "aria-label": p ? void 0 : u(g),
+            "aria-describedby": [t, c].filter(Boolean).join(" ") || void 0,
+            "aria-disabled": s || void 0,
+            className: i(
+              D,
+              w[I],
+              h
             ),
-            m && a.content ? /* @__PURE__ */ e(
-              "div",
-              {
-                className: i(
-                  L,
-                  B
+            children: v.map((a) => {
+              const m = a.value === f;
+              return /* @__PURE__ */ b("div", { className: "flex min-w-0 flex-col", children: [
+                /* @__PURE__ */ o(
+                  S,
+                  {
+                    id: `${e}-${a.value}`,
+                    name: C ?? e,
+                    value: a.value,
+                    labelProps: a.label == null ? void 0 : { label: a.label },
+                    "aria-label": a["aria-label"],
+                    caption: a.caption,
+                    isSelected: m,
+                    disabled: s || a.disabled,
+                    onChange: x,
+                    className: T
+                  }
                 ),
-                children: a.content
-              }
-            ) : null
-          ] }, a.value);
-        })
-      }
-    ),
-    /* @__PURE__ */ e(y, { id: t, text: l }),
-    !l && /* @__PURE__ */ e(G, { id: c, text: d })
-  ] });
+                m && a.content ? /* @__PURE__ */ o(
+                  "div",
+                  {
+                    className: i(
+                      _,
+                      j
+                    ),
+                    children: a.content
+                  }
+                ) : null
+              ] }, a.value);
+            })
+          }
+        ),
+        /* @__PURE__ */ o(G, { id: t, text: l }),
+        !l && /* @__PURE__ */ o(L, { id: c, text: d })
+      ]
+    }
+  );
 };
 export {
-  Q as RadioGroup
+  U as RadioGroup
 };