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

package/dist/components/New/CardShell/CardShell.js

@@ -1,7 +1,8 @@
 import { jsx as a } from "react/jsx-runtime";
 import "react";
 import { mergeClasses as t } from "../../../utils/merge-classes.js";
-const i = ({
+import { DIAL_KIT_CLASS as s } from "../../../constants/public-class-names.js";
+const m = ({
   className: r,
   children: e,
   ...o
@@ -12,11 +13,12 @@ const i = ({
     className: t(
       "relative flex flex-col gap-3 rounded-[20px] border-2 border-transparent p-5",
       "bg-layer-raised shadow-md transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-[3px] hover:shadow-lg motion-reduce:transition-none motion-reduce:hover:translate-y-0",
-      r
+      r,
+      s.cardShell
     ),
     children: e
   }
 );
 export {
-  i as CardShell
+  m as CardShell
 };

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

@@ -3,26 +3,27 @@ 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";
 import { resolveAccessibleName as C } from "../../../utils/accessible-name.js";
-import { Label as j } from "../Label/Label.js";
-import { CheckboxBox as z } from "./CheckboxBox.js";
-const T = ({
+import { Label as I } from "../Label/Label.js";
+import { CheckboxBox as A } from "./CheckboxBox.js";
+import { DIAL_KIT_CLASS as L } from "../../../constants/public-class-names.js";
+const D = ({
   id: h,
   labelProps: e,
   isSelected: t = !1,
   isIndeterminate: r = !1,
   invalid: i = !1,
   disabled: s,
-  onChange: m,
-  caption: l,
+  onChange: l,
+  caption: m,
   className: y,
   boxClassName: b,
   ...n
 }) => {
-  const g = u(), a = h ?? g, d = l ? `${a}-caption` : void 0, k = x(
+  const k = u(), a = h ?? k, d = m ? `${a}-caption` : void 0, g = x(
     (o) => {
-      m?.(o.target.checked);
+      l?.(o.target.checked);
     },
-    [m]
+    [l]
   ), N = x(
     (o) => {
       o && (o.indeterminate = r);
@@ -30,63 +31,73 @@ const T = ({
     [r]
   );
   return /* @__PURE__ */ p("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ p("div", { className: f("flex items-center gap-2", y), children: [
-      /* @__PURE__ */ c(
-        "input",
-        {
-          ...n,
-          ref: N,
-          type: "checkbox",
-          id: a,
-          checked: t,
-          disabled: s,
-          onChange: k,
-          "aria-checked": r ? "mixed" : t,
-          "aria-invalid": i || void 0,
-          "aria-label": C(
-            typeof e?.label != "string" ? n["aria-label"] : void 0
+    /* @__PURE__ */ p(
+      "div",
+      {
+        className: f(
+          "flex items-center gap-2",
+          y,
+          L.checkbox
+        ),
+        children: [
+          /* @__PURE__ */ c(
+            "input",
+            {
+              ...n,
+              ref: N,
+              type: "checkbox",
+              id: a,
+              checked: t,
+              disabled: s,
+              onChange: g,
+              "aria-checked": r ? "mixed" : t,
+              "aria-invalid": i || void 0,
+              "aria-label": C(
+                typeof e?.label != "string" ? n["aria-label"] : void 0
+              ),
+              "aria-describedby": d,
+              className: "peer sr-only"
+            }
+          ),
+          /* @__PURE__ */ c(
+            A,
+            {
+              htmlFor: a,
+              isSelected: t,
+              isIndeterminate: r,
+              invalid: i,
+              disabled: s,
+              className: b
+            }
           ),
-          "aria-describedby": d,
-          className: "peer sr-only"
-        }
-      ),
-      /* @__PURE__ */ c(
-        z,
-        {
-          htmlFor: a,
-          isSelected: t,
-          isIndeterminate: r,
-          invalid: i,
-          disabled: s,
-          className: b
-        }
-      ),
-      e && /* @__PURE__ */ c(
-        j,
-        {
-          size: v.Standard,
-          ...e,
-          htmlFor: a,
-          className: f(
-            // `Label` defaults to the secondary colour; a checkbox's own label
-            // is primary while the control is usable.
-            "py-[1px]",
-            s ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
-            e.className
+          e && /* @__PURE__ */ c(
+            I,
+            {
+              size: v.Standard,
+              ...e,
+              htmlFor: a,
+              className: f(
+                // `Label` defaults to the secondary colour; a checkbox's own label
+                // is primary while the control is usable.
+                "py-[1px]",
+                s ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
+                e.className
+              )
+            }
           )
-        }
-      )
-    ] }),
-    l && /* @__PURE__ */ c(
+        ]
+      }
+    ),
+    m && /* @__PURE__ */ c(
       "span",
       {
         id: d,
         className: "dial-tiny-text text-secondary ml-[28px]",
-        children: l
+        children: m
       }
     )
   ] });
 };
 export {
-  T as Checkbox
+  D as Checkbox
 };

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

@@ -2,7 +2,8 @@ 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";
-const C = ({
+import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
+const v = ({
   isSelected: n = !1,
   isIndeterminate: c = !1,
   invalid: r = !1,
@@ -25,10 +26,11 @@ const C = ({
       !r && !o && "border-default bg-control-neutral hover:border-accent hover:bg-control-accent-alpha-hover"
     ),
     a ? "cursor-not-allowed" : e && "cursor-pointer",
-    m
+    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 });
 };
 export {
-  C as CheckboxBox
+  v as CheckboxBox
 };

package/dist/components/New/CloseButton/CloseButton.js

@@ -1,27 +1,29 @@
 import { jsx as r } from "react/jsx-runtime";
-import { IconX as I } from "@tabler/icons-react";
+import { IconX as n } from "@tabler/icons-react";
 import { DIAL_KIT_ICON_STROKE as a } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as t } from "../../../constants/icon.js";
-import { ElementSize as m } from "../../../types/size.js";
-import { GhostIconButton as p } from "../IconButton/IconButtonWrappers.js";
-const u = ({
-  ariaLabel: i = "Close",
-  className: e,
-  size: o = m.Small,
+import { DIAL_ICON_SIZE as m } from "../../../constants/icon.js";
+import { ElementSize as t } from "../../../types/size.js";
+import { GhostIconButton as I } from "../IconButton/IconButtonWrappers.js";
+import { DIAL_KIT_CLASS as p } from "../../../constants/public-class-names.js";
+import { mergeClasses as f } from "../../../utils/merge-classes.js";
+const B = ({
+  ariaLabel: e = "Close",
+  className: i,
+  size: o = t.Small,
   onClose: l,
-  ...n
+  ...s
 }) => /* @__PURE__ */ r(
-  p,
+  I,
   {
-    ...n,
+    ...s,
     size: o,
-    "aria-label": i,
-    className: e,
+    "aria-label": e,
+    className: f(i, p.closeButton),
     onClick: l,
     icon: /* @__PURE__ */ r(
-      I,
+      n,
       {
-        size: o === m.Small ? t.SM : t.MD,
+        size: o === t.Small ? m.SM : m.MD,
         stroke: a,
         "aria-hidden": "true"
       }
@@ -29,5 +31,5 @@ const u = ({
   }
 );
 export {
-  u as CloseButton
+  B as CloseButton
 };

package/dist/components/New/CollapsibleSidebar/CollapsibleSidebar.js

@@ -1,39 +1,44 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { useState as w, useId as E } from "react";
-import { IconChevronsLeft as O, IconChevronsRight as k } from "@tabler/icons-react";
+import { useState as j, useId as w } from "react";
+import { IconChevronsLeft as E, IconChevronsRight as O } from "@tabler/icons-react";
 import { DIAL_KIT_ICON_STROKE as d } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as p } from "../../../constants/icon.js";
-import { ButtonAppearance as z, ButtonVariant as A } from "../../../types/button.js";
-import { ElementSize as B } from "../../../types/size.js";
+import { ButtonAppearance as k, ButtonVariant as z } from "../../../types/button.js";
+import { ElementSize as T } from "../../../types/size.js";
 import { mergeClasses as r } from "../../../utils/merge-classes.js";
-import { IconButton as P } from "../IconButton/IconButton.js";
-const T = 48, q = ({
+import { IconButton as B } from "../IconButton/IconButton.js";
+import { DIAL_KIT_CLASS as K } from "../../../constants/public-class-names.js";
+const P = 48, J = ({
   children: c,
   title: m,
   width: f = 280,
-  collapsedWidth: h = T,
+  collapsedWidth: b = P,
   isOpened: o,
-  defaultOpened: x = !0,
-  onToggle: b,
-  additionalButtons: u,
-  ariaLabel: I = "Sidebar",
-  collapseLabel: y = "Collapse sidebar",
-  expandLabel: C = "Expand sidebar",
-  className: v,
-  titleClassName: S,
-  contentClassName: g,
-  footerClassName: D
+  defaultOpened: h = !0,
+  onToggle: x,
+  additionalButtons: I,
+  ariaLabel: u = "Sidebar",
+  collapseLabel: C = "Collapse sidebar",
+  expandLabel: S = "Expand sidebar",
+  className: y,
+  titleClassName: v,
+  contentClassName: L,
+  footerClassName: _
 }) => {
-  const i = o !== void 0, [L, N] = w(x), e = i ? o : L, a = `collapsible-sidebar-content-${E()}`, n = e ? y : C, _ = (j) => {
+  const i = o !== void 0, [g, D] = j(h), e = i ? o : g, a = `collapsible-sidebar-content-${w()}`, n = e ? C : S, A = (N) => {
     const s = !e;
-    i || N(s), b?.(s, j);
+    i || D(s), x?.(s, N);
   };
   return /* @__PURE__ */ l(
     "aside",
     {
-      "aria-label": I,
-      style: { width: `${e ? f : h}px` },
-      className: r("flex flex-col justify-between", v),
+      "aria-label": u,
+      style: { width: `${e ? f : b}px` },
+      className: r(
+        "flex flex-col justify-between",
+        y,
+        K.collapsibleSidebar
+      ),
       children: [
         /* @__PURE__ */ t(
           "div",
@@ -42,7 +47,7 @@ const T = 48, q = ({
             hidden: !e,
             className: r(
               "min-h-0 flex-1 overflow-auto p-4",
-              g
+              L
             ),
             children: c
           }
@@ -53,7 +58,7 @@ const T = 48, q = ({
             hidden: e,
             className: r(
               "rotate-180 px-3 py-4 [writing-mode:tb-rl] dial-small-text text-primary",
-              S
+              v
             ),
             children: m
           }
@@ -64,30 +69,30 @@ const T = 48, q = ({
             className: r(
               "flex h-12 shrink-0 flex-row items-center gap-2 border-t border-tertiary py-1",
               e ? "justify-end px-2" : "justify-center",
-              D
+              _
             ),
             children: [
-              e && u,
+              e && I,
               /* @__PURE__ */ t(
-                P,
+                B,
                 {
-                  variant: A.Primary,
-                  appearance: z.Ghost,
-                  size: B.Standard,
-                  onClick: _,
+                  variant: z.Primary,
+                  appearance: k.Ghost,
+                  size: T.Standard,
+                  onClick: A,
                   "aria-label": n,
                   "aria-expanded": e,
                   "aria-controls": a,
                   tooltipProps: { tooltip: n },
                   icon: e ? /* @__PURE__ */ t(
-                    O,
+                    E,
                     {
                       size: p.MD,
                       stroke: d,
                       "aria-hidden": "true"
                     }
                   ) : /* @__PURE__ */ t(
-                    k,
+                    O,
                     {
                       size: p.MD,
                       stroke: d,
@@ -104,5 +109,5 @@ const T = 48, q = ({
   );
 };
 export {
-  q as CollapsibleSidebar
+  J as CollapsibleSidebar
 };

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

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

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

@@ -1,24 +1,21 @@
-import { ButtonAppearance as a, ButtonVariant as r } from "../../../types/button.js";
-import { ConfirmationPopupVariant as e } from "../../../types/confirmation-popup.js";
-const t = "flex justify-end gap-2 px-6 py-4 border-t border-tertiary", i = "text-secondary dial-small-paragraph-text px-6 pb-4", p = "px-6 py-4 h-[120px]", s = "Cancel", c = "Ok", l = {
-  [e.Info]: {
+import { ButtonAppearance as a, ButtonVariant as n } from "../../../types/button.js";
+import { ConfirmationPopupVariant as r } from "../../../types/confirmation-popup.js";
+const o = "flex justify-end gap-2 px-6 py-4 border-t border-tertiary", i = "text-secondary dial-small-paragraph-text px-6 pb-4", p = "px-6 py-4 h-[120px]", s = "Cancel", c = "Ok", l = {
+  [r.Info]: {
     confirm: {
-      variant: r.Primary,
+      variant: n.Primary,
       appearance: a.Solid
     }
   },
-  [e.Danger]: {
-    // Utilities rather than the legacy `.dial-danger-popup` SCSS rule, which is
-    // scoped as `div .dial-danger-popup` and only lands by accident of nesting.
-    container: "border-t-4 border-error",
+  [r.Danger]: {
     confirm: {
-      variant: r.Danger,
+      variant: n.Danger,
       appearance: a.Solid
     }
   }
 };
 export {
-  t as actionsBaseClassName,
+  o as actionsBaseClassName,
   s as defaultCancelLabel,
   c as defaultConfirmLabel,
   i as descriptionBaseClassName,