@epam/ai-dial-ui-kit 0.15.0-dev.2 → 0.15.0-dev.21

package/dist/components/New/FolderPath/FolderPath.js

@@ -1,45 +1,46 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconFolder as p, IconChevronRight as I } from "@tabler/icons-react";
-import { DialBreadcrumb as f } from "../../Breadcrumb/Breadcrumb.js";
+import { jsx as r } from "react/jsx-runtime";
+import { IconFolder as I, IconChevronRight as f } from "@tabler/icons-react";
+import { DialBreadcrumb as h } from "../../Breadcrumb/Breadcrumb.js";
 import { DialIcon as t } from "../../Icon/Icon.js";
 import { DIAL_KIT_ICON_STROKE as s } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as h } from "../../../constants/icon.js";
-import { mergeClasses as x } from "../../../utils/merge-classes.js";
-const F = ({
-  segments: r,
-  labelClassName: l = "dial-small-text",
-  leafClassName: m = "dial-small-semi-text",
-  className: i,
-  ariaLabel: c = "Folder path"
+import { DIAL_ICON_SIZE as x } from "../../../constants/icon.js";
+import { mergeClasses as l } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as N } from "../../../constants/public-class-names.js";
+const y = ({
+  segments: e,
+  labelClassName: m = "dial-small-text",
+  leafClassName: i = "dial-small-semi-text",
+  className: c,
+  ariaLabel: d = "Folder path"
 }) => {
-  const n = /* @__PURE__ */ e(
+  const n = /* @__PURE__ */ r(
     t,
     {
-      icon: /* @__PURE__ */ e(
-        p,
+      icon: /* @__PURE__ */ r(
+        I,
         {
-          size: h.SM,
+          size: x.SM,
           stroke: s,
           "aria-hidden": "true"
         }
       ),
       className: "text-secondary"
     }
-  ), d = r.map((o, a) => ({
-    label: a === r.length - 1 ? /* @__PURE__ */ e("span", { className: m, children: o }) : o,
+  ), p = e.map((o, a) => ({
+    label: a === e.length - 1 ? /* @__PURE__ */ r("span", { className: i, children: o }) : o,
     disabled: !0,
     ...a === 0 ? { iconBefore: n } : {}
   }));
-  return /* @__PURE__ */ e(
-    f,
+  return /* @__PURE__ */ r(
+    h,
     {
-      className: i,
-      ariaLabel: c,
-      separator: /* @__PURE__ */ e(
+      className: l(c, N.folderPath),
+      ariaLabel: d,
+      separator: /* @__PURE__ */ r(
         t,
         {
-          icon: /* @__PURE__ */ e(
-            I,
+          icon: /* @__PURE__ */ r(
+            f,
             {
               size: 14,
               stroke: s,
@@ -50,9 +51,9 @@ const F = ({
           className: "text-secondary"
         }
       ),
-      pathItems: d,
-      labelClassName: x(
-        l,
+      pathItems: p,
+      labelClassName: l(
+        m,
         "text-secondary",
         "!cursor-default"
       )
@@ -60,5 +61,5 @@ const F = ({
   );
 };
 export {
-  F as FolderPath
+  y as FolderPath
 };

package/dist/components/New/Highlight/Highlight.js

@@ -1,50 +1,43 @@
-import { jsx as c, jsxs as h, Fragment as g } from "react/jsx-runtime";
-import { mergeClasses as s } from "../../../utils/merge-classes.js";
-import { EllipsisTooltip as t } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { jsx as a, jsxs as h, Fragment as g } from "react/jsx-runtime";
+import { mergeClasses as t } from "../../../utils/merge-classes.js";
+import { EllipsisTooltip as o } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { DIAL_KIT_CLASS as C } from "../../../constants/public-class-names.js";
 const i = {
   2: "line-clamp-2",
   3: "line-clamp-3",
   4: "line-clamp-4",
   5: "line-clamp-5",
   6: "line-clamp-6"
-}, C = (e) => e === 1 ? "!truncate !whitespace-nowrap" : `${i[e] ?? i[2]} !whitespace-normal`, d = ({
+}, N = (e) => e === 1 ? "!truncate !whitespace-nowrap" : `${i[e] ?? i[2]} !whitespace-normal`, S = ({
   text: e,
-  query: a,
-  markClassName: m,
-  className: n,
+  query: s,
+  markClassName: n,
+  className: m,
   maxLines: r = 2
 }) => {
-  const o = C(r);
-  if (!a.trim())
-    return /* @__PURE__ */ c(
-      t,
-      {
-        className: s(o, n),
-        text: e
-      }
-    );
-  const l = e.toLowerCase().indexOf(a.toLowerCase()), p = l === -1 ? e : /* @__PURE__ */ h(g, { children: [
+  const c = t(
+    N(r),
+    m,
+    C.highlight
+  );
+  if (!s.trim())
+    return /* @__PURE__ */ a(o, { className: c, text: e });
+  const l = e.toLowerCase().indexOf(s.toLowerCase()), p = l === -1 ? e : /* @__PURE__ */ h(g, { children: [
     e.slice(0, l),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ a(
       "mark",
       {
-        className: s(
+        className: t(
           "text-accent bg-control-accent-alpha-hover",
-          m
+          n
         ),
-        children: e.slice(l, l + a.length)
+        children: e.slice(l, l + s.length)
       }
     ),
-    e.slice(l + a.length)
+    e.slice(l + s.length)
   ] });
-  return /* @__PURE__ */ c(
-    t,
-    {
-      className: s(o, n),
-      text: p
-    }
-  );
+  return /* @__PURE__ */ a(o, { className: c, text: p });
 };
 export {
-  d as Highlight
+  S as Highlight
 };

package/dist/components/New/InfoButton/InfoButton.js

@@ -1,39 +1,41 @@
 import { jsx as t } from "react/jsx-runtime";
 import { IconInfoCircle as n } from "@tabler/icons-react";
 import { DIAL_KIT_ICON_STROKE as l } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
-import { ElementSize as m } from "../../../types/size.js";
+import { DIAL_ICON_SIZE as m } from "../../../constants/icon.js";
+import { ElementSize as s } from "../../../types/size.js";
 import { mergeClasses as a } from "../../../utils/merge-classes.js";
 import { IconButton as c } from "../IconButton/IconButton.js";
-const S = ({
+import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
+const b = ({
   caption: o,
-  onClick: e,
-  "aria-label": r
+  onClick: r,
+  "aria-label": e
 }) => {
   if (!o) return null;
   const i = a(
     "text-secondary hover:text-control-accent-hover active:text-control-accent-active",
-    "focus-visible:outline focus-visible:outline-focus"
+    "focus-visible:outline focus-visible:outline-focus",
+    f.infoButton
   );
   return /* @__PURE__ */ t(
     c,
     {
-      "aria-label": r,
+      "aria-label": e,
       className: i,
       icon: /* @__PURE__ */ t(
         n,
         {
-          size: s.SM,
+          size: m.SM,
           stroke: l,
           "aria-hidden": "true"
         }
       ),
-      onClick: e,
-      size: m.Small,
+      onClick: r,
+      size: s.Small,
       tooltipProps: { tooltip: o }
     }
   );
 };
 export {
-  S as InfoButton
+  b as InfoButton
 };

package/dist/components/New/InlineSelect/InlineSelect.js

@@ -1,88 +1,90 @@
-import { jsx as c, jsxs as y } from "react/jsx-runtime";
-import { IconChevronDown as N } from "@tabler/icons-react";
-import { useState as p, useMemo as D, useCallback as O } from "react";
-import { Dropdown as _ } from "../Dropdown/Dropdown.js";
-import { DIAL_KIT_ICON_STROKE as K } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as E } from "../../../constants/icon.js";
+import { jsx as s, jsxs as y } from "react/jsx-runtime";
+import { IconChevronDown as _ } from "@tabler/icons-react";
+import { useState as p, useMemo as D, useCallback as N } from "react";
+import { Dropdown as K } from "../Dropdown/Dropdown.js";
+import { DIAL_KIT_ICON_STROKE as O } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as A } from "../../../constants/icon.js";
 import { mergeClasses as f } from "../../../utils/merge-classes.js";
-import { ElementSize as T } from "../../../types/size.js";
-const j = ({
+import { ElementSize as L } from "../../../types/size.js";
+import { DIAL_KIT_CLASS as T } from "../../../constants/public-class-names.js";
+const E = ({
   label: e,
-  size: a,
-  isOpen: n = !1,
+  size: n,
+  isOpen: r = !1,
   "aria-label": t,
-  ...r
+  ...a
 }) => {
-  const l = a === T.Small ? "h-[32px]" : "h-[40px] dial-kit-enhanced-target";
+  const l = n === L.Small ? "h-[32px]" : "h-[40px] dial-kit-enhanced-target";
   return /* @__PURE__ */ y(
     "button",
     {
       type: "button",
       "aria-haspopup": "menu",
-      "aria-expanded": n,
+      "aria-expanded": r,
       "aria-label": t ? `${t} ${e}` : void 0,
       className: f(
         "dial-small-paragraph-text px-3 focus-visible:outline focus-visible:outline-focus",
         "flex items-center gap-1 rounded-full text-primary disabled:text-control-disable-primary",
         "hover:bg-control-accent-alpha-hover focus-visible:outline-offset-2 active:bg-control-accent-alpha-active",
         l,
-        r.className
+        a.className,
+        T.inlineSelect
       ),
-      ...r,
+      ...a,
       children: [
         e,
-        /* @__PURE__ */ c(
-          N,
+        /* @__PURE__ */ s(
+          _,
           {
-            size: E.MD,
-            stroke: K,
+            size: A.MD,
+            stroke: O,
             "aria-hidden": !0,
-            className: f("transition-transform", n && "rotate-180")
+            className: f("transition-transform", r && "rotate-180")
           }
         )
       ]
     }
   );
-}, Z = ({
+}, B = ({
   items: e,
-  selectedKey: a,
-  defaultSelectedKey: n,
+  selectedKey: n,
+  defaultSelectedKey: r,
   onSelect: t,
-  size: r,
+  size: a,
   disabled: l,
   placement: d = "bottom-end",
   matchReferenceWidth: u = !1,
   listClassName: b,
   ariaLabel: h
 }) => {
-  const [v, I] = p(!1), [x, g] = p(
-    n ?? e[0]?.key
-  ), s = a !== void 0, m = s ? a : x, C = D(() => {
+  const [I, v] = p(!1), [S, x] = p(
+    r ?? e[0]?.key
+  ), c = n !== void 0, m = c ? n : S, g = D(() => {
     const o = e.find((i) => i.key === m);
     return o?.label ? String(o.label) : "";
-  }, [e, m]), S = O(
+  }, [e, m]), C = N(
     ({ key: o }) => {
       const i = e.find((k) => k.key === o);
-      i && (s || g(o), t?.(i));
+      i && (c || x(o), t?.(i));
     },
-    [e, s, t]
+    [e, c, t]
   );
-  return /* @__PURE__ */ c(
-    _,
+  return /* @__PURE__ */ s(
+    K,
     {
       items: e,
       placement: d,
       matchReferenceWidth: u,
       listClassName: b,
       disabled: l,
-      onOpenChange: I,
-      onItemClick: S,
-      children: /* @__PURE__ */ c(
-        j,
+      onOpenChange: v,
+      onItemClick: C,
+      children: /* @__PURE__ */ s(
+        E,
         {
-          label: C,
-          size: r,
-          isOpen: v,
+          label: g,
+          size: a,
+          isOpen: I,
           disabled: l,
           "aria-label": h
         }
@@ -91,6 +93,6 @@ const j = ({
   );
 };
 export {
-  Z as InlineSelect,
-  j as InlineSelectTrigger
+  B as InlineSelect,
+  E as InlineSelectTrigger
 };

package/dist/components/New/InteractiveTooltip/InteractiveTooltip.js

@@ -1,57 +1,58 @@
-import { jsx as n, jsxs as w, Fragment as D } from "react/jsx-runtime";
-import { useFloatingNodeId as H, useFloating as U, autoUpdate as G, offset as Y, flip as k, shift as q, useHover as z, safePolygon as B, useFocus as J, useDismiss as K, useInteractions as Q, useMergeRefs as u, FloatingPortal as W, FloatingFocusManager as X } from "@floating-ui/react";
+import { jsx as n, jsxs as j, Fragment as w } from "react/jsx-runtime";
+import { useFloatingNodeId as H, useFloating as U, autoUpdate as G, offset as K, flip as Y, shift as k, useHover as q, safePolygon as z, useFocus as B, useDismiss as J, useInteractions as Q, useMergeRefs as u, FloatingPortal as W, FloatingFocusManager as X } from "@floating-ui/react";
 import { useState as Z, useRef as $, useMemo as d, isValidElement as ee, cloneElement as oe } from "react";
-import { useThemeScope as se } from "../ThemeScope/ThemeScope.js";
-import { useIsMobileScreen as te } from "../../../hooks/use-is-mobile-screen.js";
+import { useThemeScope as te } from "../ThemeScope/ThemeScope.js";
+import { useIsMobileScreen as se } from "../../../hooks/use-is-mobile-screen.js";
 import { TooltipPlacement as ne } from "../../../types/tooltip.js";
 import { mergeClasses as g } from "../../../utils/merge-classes.js";
 import { INTERACTIVE_TOOLTIP_GAP as le, INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY as ae, interactiveTooltipClassName as re } from "./constants.js";
+import { DIAL_KIT_CLASS as ie } from "../../../constants/public-class-names.js";
 const Re = ({
   content: a,
-  placement: R = ne.Right,
+  placement: T = ne.Right,
   children: e,
-  asChild: F = !1,
-  hideTooltip: T = !1,
-  initialOpen: h = !1,
-  open: s,
-  onOpenChange: I,
+  asChild: I = !1,
+  hideTooltip: R = !1,
+  initialOpen: F = !1,
+  open: t,
+  onOpenChange: h,
   triggerClassName: r,
   contentClassName: E
 }) => {
-  const P = te(), C = se(), [N, O] = Z(h), i = s ?? N, v = (m) => {
-    I?.(m), s == null && O(m);
-  }, M = H(), { refs: t, floatingStyles: _, context: o } = U({
-    nodeId: M,
-    placement: R,
+  const P = se(), C = te(), [v, N] = Z(F), i = t ?? v, O = (m) => {
+    h?.(m), t == null && N(m);
+  }, _ = H(), { refs: s, floatingStyles: S, context: o } = U({
+    nodeId: _,
+    placement: T,
     open: i,
-    onOpenChange: v,
+    onOpenChange: O,
     whileElementsMounted: G,
     middleware: [
-      Y(le),
+      K(le),
       /* No `fallbackAxisSideDirection`: a panel placed to the right should
        flip to the left when it does not fit, not drop to the perpendicular
        top/bottom axis, which reads as the panel landing in the wrong place.*/
-      k({ padding: 5 }),
-      q({ padding: 5 })
+      Y({ padding: 5 }),
+      k({ padding: 5 })
     ]
-  }), S = z(o, {
-    enabled: s == null,
+  }), A = q(o, {
+    enabled: t == null,
     /* Lets the pointer cross the gap between the trigger and the panel
        without closing it, so it can actually be reached and used. */
-    handleClose: B(),
+    handleClose: z(),
     delay: { open: ae, close: 0 }
-  }), V = J(o, { enabled: s == null }), b = K(o), { getReferenceProps: c, getFloatingProps: x } = Q([
-    S,
-    V,
-    b
-  ]), y = $(null), A = u(
-    d(() => [t.setFloating, y], [t.setFloating])
-  ), f = F && ee(e), l = f ? e.props?.ref : null, p = u(
+  }), M = B(o, { enabled: t == null }), L = J(o), { getReferenceProps: c, getFloatingProps: V } = Q([
+    A,
+    M,
+    L
+  ]), b = $(null), x = u(
+    d(() => [s.setFloating, b], [s.setFloating])
+  ), f = I && ee(e), l = f ? e.props?.ref : null, p = u(
     d(
-      () => [t.setReference, ...l ? [l] : []],
-      [t.setReference, l]
+      () => [s.setReference, ...l ? [l] : []],
+      [s.setReference, l]
     )
-  ), L = !T && !P && !!a, j = f ? oe(
+  ), y = !R && !P && !!a, D = f ? oe(
     e,
     c({
       ...e.props,
@@ -70,9 +71,9 @@ const Re = ({
       children: e
     }
   );
-  return /* @__PURE__ */ w(D, { children: [
-    j,
-    i && L && /* @__PURE__ */ n(W, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ j(w, { children: [
+    D,
+    i && y && /* @__PURE__ */ n(W, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ n(
       X,
       {
         context: o,
@@ -83,14 +84,15 @@ const Re = ({
         children: /* @__PURE__ */ n(
           "div",
           {
-            ref: A,
+            ref: x,
             "data-placement": o.placement,
-            style: _,
-            ...x(),
+            style: S,
+            ...V(),
             className: g(
               re,
               C,
-              E
+              E,
+              ie.interactiveTooltip
             ),
             children: a
           }

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

@@ -1,6 +1,6 @@
-const t = 8, a = 400, T = "z-[54] max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";
+const t = 8, a = 400, e = "z-interactive-tooltip max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";
 export {
   t as INTERACTIVE_TOOLTIP_GAP,
   a as INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY,
-  T as interactiveTooltipClassName
+  e as interactiveTooltipClassName
 };

package/dist/components/New/Label/Label.js

@@ -1,19 +1,24 @@
 import { jsxs as t, jsx as r, Fragment as d } from "react/jsx-runtime";
 import { mergeClasses as s } from "../../../utils/merge-classes.js";
-import { ElementSize as n } from "../../../types/size.js";
+import { ElementSize as a } from "../../../types/size.js";
 import { InfoButton as p } from "../InfoButton/InfoButton.js";
-const g = ({
+import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
+const N = ({
   label: e,
-  required: a,
+  required: n,
   className: i,
   containerClassName: l,
   caption: m,
-  size: o = n.Small,
+  size: o = a.Small,
   ...c
 }) => e ? /* @__PURE__ */ t(
   "span",
   {
-    className: s("flex items-center gap-0.5", l),
+    className: s(
+      "flex items-center gap-0.5",
+      l,
+      f.label
+    ),
     children: [
       /* @__PURE__ */ t(
         "label",
@@ -21,12 +26,12 @@ const g = ({
           ...c,
           className: s(
             "text-secondary flex items-center gap-0.5",
-            o === n.Small ? "dial-tiny-semi-text" : "dial-small-text",
+            o === a.Small ? "dial-tiny-semi-text" : "dial-small-text",
             i
           ),
           children: [
             typeof e == "string" ? /* @__PURE__ */ r("span", { className: "min-h-4", children: e }) : e,
-            a && /* @__PURE__ */ t(d, { children: [
+            n && /* @__PURE__ */ t(d, { children: [
               /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "text-error dial-tiny-text", children: "*" }),
               /* @__PURE__ */ r("span", { className: "sr-only", children: "(required)" })
             ] })
@@ -38,5 +43,5 @@ const g = ({
   }
 ) : null;
 export {
-  g as Label
+  N as Label
 };

package/dist/components/New/MenuItem/MenuItem.js

@@ -1,41 +1,43 @@
 import { jsxs as i, Fragment as g, jsx as t } from "react/jsx-runtime";
 import { DialIcon as k } from "../../Icon/Icon.js";
-import { CheckboxBox as H } from "../Checkbox/CheckboxBox.js";
-import { EllipsisTooltip as M } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { overlayItemDisabledClassName as T, overlayItemSelectedClassName as j, overlayItemHighlightClassName as D, overlayItemClassName as S } from "../constants/overlay.js";
-import { MenuItemMark as s } from "../../../types/menu-item.js";
+import { CheckboxBox as S } from "../Checkbox/CheckboxBox.js";
+import { EllipsisTooltip as T } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { overlayItemDisabledClassName as D, overlayItemSelectedClassName as H, overlayItemHighlightClassName as M, overlayItemClassName as j } from "../constants/overlay.js";
+import { DIAL_KIT_CLASS as A } from "../../../constants/public-class-names.js";
+import { MenuItemMark as o } from "../../../types/menu-item.js";
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
-import { menuItemCheckIcon as B } from "./constants.js";
-const L = ({
+import { menuItemCheckIcon as L } from "./constants.js";
+const O = ({
   label: l,
   icon: c,
   description: f,
-  mark: o = s.None,
+  mark: s = o.None,
   selected: r = !1,
-  danger: h = !1,
-  trailing: u,
+  danger: u = !1,
+  trailing: h,
   rightControl: m,
-  ellipsisLabel: v = !1,
+  ellipsisLabel: I = !1,
   labelClassName: x,
-  children: d,
-  className: I,
+  children: v,
+  className: d,
   disabled: a = !1,
   type: C = "button",
   ...w
 }) => {
-  const y = r && o === s.Highlight, b = r && (o === s.Checkbox || o === s.Tint), n = e(
-    h && "text-error",
+  const y = r && s === o.Highlight, b = r && (s === o.Checkbox || s === o.Tint), n = e(
+    u && "text-error",
     a && "text-control-disable-primary"
   ), p = e(
-    S,
+    j,
     // A row that opens a panel stays tinted while that panel is up, so the
     // trail back to it is visible once the pointer has moved into it.
     "aria-expanded:bg-control-accent-alpha-hover",
-    y && D,
-    b && j,
-    a && T,
-    h && "text-error",
-    I
+    y && M,
+    b && H,
+    a && D,
+    u && "text-error",
+    d,
+    A.menuItem
   ), N = /* @__PURE__ */ i(
     "button",
     {
@@ -45,11 +47,11 @@ const L = ({
       className: m ? "flex h-full min-w-0 flex-1 items-center gap-2 truncate text-start focus-visible:outline-none" : p,
       ...w,
       children: [
-        d ?? /* @__PURE__ */ i(g, { children: [
-          o === s.Checkbox && /* @__PURE__ */ t(H, { isSelected: r, disabled: a }),
+        v ?? /* @__PURE__ */ i(g, { children: [
+          s === o.Checkbox && /* @__PURE__ */ t(S, { isSelected: r, disabled: a }),
           c && /* @__PURE__ */ t(k, { icon: c, className: n }),
-          v ? /* @__PURE__ */ t(
-            M,
+          I ? /* @__PURE__ */ t(
+            T,
             {
               text: l,
               className: e(n, x)
@@ -75,9 +77,9 @@ const L = ({
               children: f
             }
           ),
-          r && o === s.Check && B
+          r && s === o.Check && L
         ] }),
-        u && /* @__PURE__ */ t("span", { className: e("ml-auto shrink-0", n), children: u })
+        h && /* @__PURE__ */ t("span", { className: e("ml-auto shrink-0", n), children: h })
       ]
     }
   );
@@ -104,5 +106,5 @@ const L = ({
   ) : N;
 };
 export {
-  L as MenuItem
+  O as MenuItem
 };