@epam/ai-dial-ui-kit 0.15.0-dev.6 → 0.15.0-dev.7

package/dist/components/DropdownIcon/DropdownIcon.js

@@ -1,44 +1,45 @@
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import { IconChevronDown as O } from "@tabler/icons-react";
 import { useState as j } from "react";
-import { DialDropdown as w } from "../Dropdown/Dropdown.js";
+import { DialDropdown as L } from "../Dropdown/Dropdown.js";
 import { DialIcon as m } from "../Icon/Icon.js";
-import { DIAL_ICON_SIZE as E } from "../../constants/icon.js";
+import { DIAL_ICON_SIZE as _ } from "../../constants/icon.js";
+import { DIAL_KIT_CLASS as p } from "../../constants/public-class-names.js";
 import { ElementSize as r } from "../../types/size.js";
 import { mergeClasses as o } from "../../utils/merge-classes.js";
 const F = ({
-  icon: p,
+  icon: f,
   ariaLabel: b,
   size: n = r.Standard,
   disabled: a = !1,
-  className: f,
-  buttonClassName: u,
-  iconClassName: x,
-  caretIcon: h = /* @__PURE__ */ e(O, { size: E.SM }),
+  className: u,
+  buttonClassName: x,
+  iconClassName: h,
+  caretIcon: y = /* @__PURE__ */ e(O, { size: _.SM }),
   showCaret: t = !0,
-  placement: y = "bottom-start",
-  matchReferenceWidth: g = !1,
+  placement: g = "bottom-start",
+  matchReferenceWidth: S = !1,
   open: v,
-  onOpenChange: S,
+  onOpenChange: I,
   defaultOpen: s = !1,
   ...z
 }) => {
-  const i = n === r.Small, [D, C] = j(s), l = v ?? D, I = i ? "w-8 px-0" : "w-10 px-0", N = {
+  const i = n === r.Small, [C, D] = j(s), l = v ?? C, w = i ? "w-8 px-0" : "w-10 px-0", N = {
     [r.Small]: "size-5",
     [r.Standard]: "size-6",
     [r.Large]: "size-7"
   };
   return /* @__PURE__ */ e(
-    w,
+    L,
     {
       ...z,
       disabled: a,
-      placement: y,
-      matchReferenceWidth: g,
-      className: f,
+      placement: g,
+      matchReferenceWidth: S,
+      className: u,
       open: l,
       onOpenChange: (c) => {
-        C(c), S?.(c);
+        D(c), I?.(c);
       },
       defaultOpen: s,
       children: /* @__PURE__ */ d(
@@ -52,35 +53,45 @@ const F = ({
             "enabled:hover:bg-accent-primary-alpha enabled:active:bg-controls-accent-primary-alpha-active",
             "focus-visible:border-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:text-controls-secondary-disable disabled:opacity-75",
             i ? "h-8 px-2" : "h-10 px-2",
-            t ? void 0 : I,
-            u
+            t ? void 0 : w,
+            x
           ),
           children: [
             /* @__PURE__ */ e(
               m,
               {
-                icon: p,
+                icon: f,
                 className: o(
+                  p.dropdownIcon,
                   "flex items-center justify-center text-inherit",
                   N[n],
                   t && "-mr-2",
-                  x
+                  h
                 )
               }
             ),
-            t && /* @__PURE__ */ d("div", { className: "relative z-10 inline-grid size-5 shrink-0 place-items-center", children: [
-              /* @__PURE__ */ e("div", { className: "absolute inset-0 rounded-full bg-layer-2" }),
-              /* @__PURE__ */ e(
-                m,
-                {
-                  icon: h,
-                  className: o(
-                    "relative flex items-center justify-center text-secondary transition-transform group-hover:text-primary group-disabled:text-controls-secondary-disable",
-                    l && "rotate-180"
+            t && /* @__PURE__ */ d(
+              "div",
+              {
+                className: o(
+                  p.dropdownIconCaret,
+                  "relative z-10 inline-grid size-5 shrink-0 place-items-center"
+                ),
+                children: [
+                  /* @__PURE__ */ e("div", { className: "absolute inset-0 rounded-full bg-layer-2" }),
+                  /* @__PURE__ */ e(
+                    m,
+                    {
+                      icon: y,
+                      className: o(
+                        "relative flex items-center justify-center text-secondary transition-transform group-hover:text-primary group-disabled:text-controls-secondary-disable",
+                        l && "rotate-180"
+                      )
+                    }
                   )
-                }
-              )
-            ] })
+                ]
+              }
+            )
           ]
         }
       )

package/dist/components/MarkdownEditor/MarkdownEditorContainer.js

@@ -1,26 +1,28 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { useId as g, useState as x, useEffect as J, useCallback as u } from "react";
-import { DialSwitch as S } from "../Switch/Switch.js";
-import { EditorThemes as b } from "../../types/editor.js";
+import "../../constants/editor.js";
+import { EditorThemes as S } from "../../types/editor.js";
+import "@monaco-editor/react";
+import { DialSwitch as b } from "../Switch/Switch.js";
 import { DialMarkdownEditor as v } from "./MarkdownEditor.js";
 import { DialLabel as y } from "../Label/Label.js";
-const z = ({
+const $ = ({
   value: s,
   onChangeValue: l,
-  label: i,
+  label: t,
   headerContent: d,
   switcherLabel: a,
   height: c = 300,
-  theme: m = b.dark,
+  theme: m = S.dark,
   onValidateJSON: f,
   preview: C = "edit"
 }) => {
-  const N = g(), [n, w] = x(!1), [p, D] = x(null);
+  const N = g(), [i, w] = x(!1), [p, D] = x(null);
   J(() => {
-    n && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
+    i && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
       D(() => o.DialJsonEditor);
     });
-  }, [n]);
+  }, [i]);
   const h = u(
     (o) => {
       l?.(o);
@@ -31,16 +33,16 @@ const z = ({
       f?.(o);
     },
     [f]
-  ), t = !!a;
+  ), n = !!a;
   return /* @__PURE__ */ e("div", { className: "size-full flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ r("div", { children: [
-    (i || d || t) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
-      i && /* @__PURE__ */ e(y, { label: i }),
+    (t || d || n) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
+      t && /* @__PURE__ */ e(y, { label: t }),
       /* @__PURE__ */ r("div", { className: "flex items-center gap-2 flex-1 justify-end", children: [
         d,
-        t && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
-          S,
+        n && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
+          b,
           {
-            isOn: n,
+            isOn: i,
             label: a,
             switchId: N,
             onChange: (o) => w(o)
@@ -48,7 +50,7 @@ const z = ({
         ) })
       ] })
     ] }),
-    t && n ? /* @__PURE__ */ e(
+    n && i ? /* @__PURE__ */ e(
       "div",
       {
         className: "border border-primary rounded",
@@ -76,5 +78,5 @@ const z = ({
   ] }) }) });
 };
 export {
-  z as DialMarkdownEditorContainer
+  $ as DialMarkdownEditorContainer
 };

package/dist/components/New/Accordion/Accordion.js

@@ -1,51 +1,53 @@
-import { jsxs as i, Fragment as _, jsx as e } from "react/jsx-runtime";
-import { IconChevronRight as j } from "@tabler/icons-react";
-import { useState as A, useId as C } from "react";
-import { DIAL_KIT_ICON_STROKE as S } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as k } from "../../../constants/icon.js";
-import { resolveAccessibleName as O } from "../../../utils/accessible-name.js";
-import { mergeClasses as n } from "../../../utils/merge-classes.js";
-const F = ({
+import { jsxs as a, Fragment as A, jsx as e } from "react/jsx-runtime";
+import { IconChevronRight as S } from "@tabler/icons-react";
+import { useState as C, useId as E } from "react";
+import { DIAL_KIT_ICON_STROKE as j } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as L } from "../../../constants/icon.js";
+import { resolveAccessibleName as T } from "../../../utils/accessible-name.js";
+import { mergeClasses as r } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as k } from "../../../constants/public-class-names.js";
+const Z = ({
   title: p,
   description: s,
   children: h,
-  expanded: l,
+  expanded: c,
   defaultExpanded: y = !1,
-  disabled: r,
+  disabled: n,
   nonCollapsible: o,
-  ariaLabel: v,
-  onToggle: I,
+  ariaLabel: I,
+  onToggle: v,
   className: g,
-  headerClassName: c,
+  headerClassName: l,
   contentClassName: N
 }) => {
-  const d = l !== void 0, [b, w] = A(y), t = o ? !0 : d ? l : b, m = C(), a = `accordion-header-${m}`, x = `accordion-content-${m}`, E = () => {
-    if (r) return;
+  const d = c !== void 0, [b, w] = C(y), t = o ? !0 : d ? c : b, m = E(), i = `accordion-header-${m}`, x = `accordion-content-${m}`, _ = () => {
+    if (n) return;
     const u = !t;
-    d || w(u), I?.(u);
-  }, f = /* @__PURE__ */ i(_, { children: [
-    /* @__PURE__ */ i("span", { className: "flex min-w-0 flex-col", children: [
+    d || w(u), v?.(u);
+  }, f = /* @__PURE__ */ a(A, { children: [
+    /* @__PURE__ */ a("span", { className: "flex min-w-0 flex-col", children: [
       /* @__PURE__ */ e("span", { className: "truncate dial-body-text text-primary", children: p }),
       s ? /* @__PURE__ */ e("span", { className: "truncate dial-tiny-text text-secondary", children: s }) : null
     ] }),
     !o && // Caret at the leading edge; it turns a quarter turn to point down when open.
     /* @__PURE__ */ e(
-      j,
+      S,
       {
-        size: k.SM,
-        stroke: S,
+        size: L.SM,
+        stroke: j,
         "aria-hidden": "true",
-        className: n(
+        className: r(
           "shrink-0 text-secondary transition-transform motion-reduce:transition-none",
           t && "rotate-90"
         )
       }
     )
   ] });
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: n(
+      className: r(
+        k.accordion,
         "flex flex-col gap-3 py-3 overflow-hidden bg-transparent ",
         g
       ),
@@ -53,30 +55,30 @@ const F = ({
         o ? /* @__PURE__ */ e(
           "div",
           {
-            id: a,
-            className: n(
+            id: i,
+            className: r(
               "flex w-full px-4 rounded-xl items-center justify-between dial-tiny-text",
-              c
+              l
             ),
             children: f
           }
         ) : /* @__PURE__ */ e(
           "button",
           {
-            id: a,
+            id: i,
             type: "button",
             "aria-expanded": t,
             "aria-controls": t ? x : void 0,
-            "aria-label": O(v),
-            disabled: r,
-            onClick: E,
-            className: n(
+            "aria-label": T(I),
+            disabled: n,
+            onClick: _,
+            className: r(
               "flex w-full px-4 rounded-xl items-center justify-between dial-tiny-text",
-              r ? "cursor-not-allowed opacity-75" : (
+              n ? "cursor-not-allowed opacity-75" : (
                 // Applied only to a header that can actually be operated.
                 "cursor-pointer hover:bg-control-accent-alpha-hover focus-visible:outline focus-visible:outline-focus"
               ),
-              c
+              l
             ),
             children: f
           }
@@ -86,8 +88,8 @@ const F = ({
           {
             id: x,
             role: "region",
-            "aria-labelledby": a,
-            className: n(
+            "aria-labelledby": i,
+            className: r(
               "px-4 dial-small-text text-primary",
               N
             ),
@@ -99,5 +101,5 @@ const F = ({
   );
 };
 export {
-  F as Accordion
+  Z as Accordion
 };

package/dist/components/New/ButtonDropdown/ButtonDropdown.js

@@ -2,16 +2,17 @@ import { jsx as r } from "react/jsx-runtime";
 import { useState as s, useMemo as u } from "react";
 import { ButtonAppearance as d, ButtonVariant as c } from "../../../types/button.js";
 import { Button as f } from "../Button/Button.js";
-import { Dropdown as h } from "../Dropdown/Dropdown.js";
-import { getButtonChevron as B } from "./constants.js";
-const g = ({
+import { Dropdown as D } from "../Dropdown/Dropdown.js";
+import { getButtonChevron as h } from "./constants.js";
+import { DIAL_KIT_CLASS as l } from "../../../constants/public-class-names.js";
+const I = ({
   variant: n,
   appearance: t,
   items: e,
   ...p
 }) => {
-  const [o, a] = s(!1), i = u(() => B(o), [o]);
-  return /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(h, { items: e, onOpenChange: (m) => a(m), children: /* @__PURE__ */ r(
+  const [o, a] = s(!1), i = u(() => h(o), [o]);
+  return /* @__PURE__ */ r("div", { className: l.buttonDropdown, children: /* @__PURE__ */ r(D, { items: e, onOpenChange: (m) => a(m), children: /* @__PURE__ */ r(
     f,
     {
       ...p,
@@ -24,5 +25,5 @@ const g = ({
   ) }) });
 };
 export {
-  g as ButtonDropdown
+  I as ButtonDropdown
 };