@epam/ai-dial-ui-kit 0.15.0-dev.3 → 0.15.0-dev.31

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/IconButton/IconButton.js

@@ -1,46 +1,48 @@
-import { jsx as r } from "react/jsx-runtime";
-import { ButtonAppearance as b } from "../../../types/button.js";
-import { mergeClasses as u } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as p } from "../../../utils/accessible-name.js";
-import { ElementSize as t } from "../../../types/size.js";
-import { Tooltip as S } from "../Tooltip/Tooltip.js";
-import { getButtonClassNames as f } from "../Button/utils.js";
-const g = {
-  [t.Small]: "size-[24px]",
-  [t.Standard]: "size-[40px] dial-kit-enhanced-target",
-  [t.Large]: "size-[48px] dial-kit-enhanced-target"
-}, B = ({
-  variant: a,
-  appearance: n = b.Solid,
-  size: l = t.Standard,
+import { jsx as o } from "react/jsx-runtime";
+import { ButtonAppearance as u } from "../../../types/button.js";
+import { mergeClasses as S } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as f } from "../../../utils/accessible-name.js";
+import { ElementSize as e } from "../../../types/size.js";
+import { Tooltip as g } from "../Tooltip/Tooltip.js";
+import { getButtonClassNames as p, getDisabledButtonProps as C } from "../Button/utils.js";
+const h = {
+  [e.Small]: "size-[24px]",
+  [e.Standard]: "size-[40px] dial-kit-enhanced-target",
+  [e.Large]: "size-[48px] dial-kit-enhanced-target"
+}, I = ({
+  variant: i,
+  appearance: r = u.Solid,
+  size: l = e.Standard,
   className: m,
   icon: s,
-  tooltipProps: e,
+  tooltipProps: t,
   type: c = "button",
-  ...o
+  disabled: d,
+  ...a
 }) => {
-  const d = u(
+  const b = S(
     "dial-kit-base-icon-button dial-kit-base-button",
-    a && f(a, n),
+    i && p(i, r),
     // 24px is below the AAA target size, so only the larger tiers get the
     // enhanced pointer target — see the accessibility rules in AGENTS.md.
-    g[l],
+    h[l],
     m
-  ), i = /* @__PURE__ */ r(
+  ), n = /* @__PURE__ */ o(
     "button",
     {
-      ...o,
+      ...a,
+      ...C(d, t, a.onClick),
       type: c,
-      className: d,
-      "aria-label": p(
-        o["aria-label"],
-        e?.tooltip
+      className: b,
+      "aria-label": f(
+        a["aria-label"],
+        t?.tooltip
       ),
       children: s
     }
   );
-  return e ? /* @__PURE__ */ r(S, { asChild: !0, ...e, children: i }) : i;
+  return t ? /* @__PURE__ */ o(g, { asChild: !0, ...t, children: n }) : n;
 };
 export {
-  B as IconButton
+  I as IconButton
 };

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,96 +1,114 @@
-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 { mergeClasses as f } from "../../../utils/merge-classes.js";
-import { ElementSize as T } from "../../../types/size.js";
-const j = ({
+import { jsx as s, jsxs as E } from "react/jsx-runtime";
+import { IconChevronDown as j } from "@tabler/icons-react";
+import { useState as b, useCallback as v, useMemo as w } from "react";
+import { Dropdown as z } from "../Dropdown/Dropdown.js";
+import { DIAL_KIT_ICON_STROKE as M } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as U } from "../../../constants/icon.js";
+import { mergeClasses as I } from "../../../utils/merge-classes.js";
+import { ElementSize as $ } from "../../../types/size.js";
+import { DIAL_KIT_CLASS as R } from "../../../constants/public-class-names.js";
+const Z = ({
   label: e,
-  size: a,
+  size: l,
   isOpen: n = !1,
+  labelClassName: a,
+  className: c,
   "aria-label": t,
-  ...r
+  ...m
 }) => {
-  const l = a === T.Small ? "h-[32px]" : "h-[40px] dial-kit-enhanced-target";
-  return /* @__PURE__ */ y(
+  const d = l === $.Small ? "h-[32px]" : "h-[40px] dial-kit-enhanced-target";
+  return /* @__PURE__ */ E(
     "button",
     {
       type: "button",
+      ...m,
       "aria-haspopup": "menu",
       "aria-expanded": n,
       "aria-label": t ? `${t} ${e}` : void 0,
-      className: f(
+      className: I(
         "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
+        d,
+        c,
+        R.inlineSelect
       ),
-      ...r,
       children: [
-        e,
-        /* @__PURE__ */ c(
-          N,
+        /* @__PURE__ */ s("span", { className: a, children: e }),
+        /* @__PURE__ */ s(
+          j,
           {
-            size: E.MD,
-            stroke: K,
+            size: U.MD,
+            stroke: M,
             "aria-hidden": !0,
-            className: f("transition-transform", n && "rotate-180")
+            className: I("transition-transform", n && "rotate-180")
           }
         )
       ]
     }
   );
-}, Z = ({
+}, W = ({
   items: e,
-  selectedKey: a,
+  selectedKey: l,
   defaultSelectedKey: n,
-  onSelect: t,
-  size: r,
-  disabled: l,
-  placement: d = "bottom-end",
-  matchReferenceWidth: u = !1,
-  listClassName: b,
-  ariaLabel: h
+  onSelect: a,
+  size: c,
+  disabled: t,
+  placement: m = "bottom-end",
+  matchReferenceWidth: d = !1,
+  listClassName: C,
+  listStyle: S,
+  ariaLabel: g,
+  triggerClassName: x,
+  triggerLabelClassName: N,
+  open: p,
+  onOpenChange: u
 }) => {
-  const [v, I] = p(!1), [x, g] = p(
+  const [k, y] = b(!1), r = p !== void 0, O = r ? p : k, _ = v(
+    (o) => {
+      r || y(o), u?.(o);
+    },
+    [r, u]
+  ), [D, K] = b(
     n ?? e[0]?.key
-  ), s = a !== void 0, m = s ? a : x, C = D(() => {
-    const o = e.find((i) => i.key === m);
+  ), f = l !== void 0, h = f ? l : D, A = w(() => {
+    const o = e.find((i) => i.key === h);
     return o?.label ? String(o.label) : "";
-  }, [e, m]), S = O(
+  }, [e, h]), L = v(
     ({ key: o }) => {
-      const i = e.find((k) => k.key === o);
-      i && (s || g(o), t?.(i));
+      const i = e.find((T) => T.key === o);
+      i && (f || K(o), a?.(i));
     },
-    [e, s, t]
+    [e, f, a]
   );
-  return /* @__PURE__ */ c(
-    _,
+  return /* @__PURE__ */ s(
+    z,
     {
       items: e,
-      placement: d,
-      matchReferenceWidth: u,
-      listClassName: b,
-      disabled: l,
-      onOpenChange: I,
-      onItemClick: S,
-      children: /* @__PURE__ */ c(
-        j,
+      placement: m,
+      matchReferenceWidth: d,
+      listClassName: C,
+      listStyle: S,
+      disabled: t,
+      open: r ? p : void 0,
+      onOpenChange: _,
+      onItemClick: L,
+      children: /* @__PURE__ */ s(
+        Z,
         {
-          label: C,
-          size: r,
-          isOpen: v,
-          disabled: l,
-          "aria-label": h
+          label: A,
+          size: c,
+          isOpen: O,
+          disabled: t,
+          "aria-label": g,
+          className: x,
+          labelClassName: N
         }
       )
     }
   );
 };
 export {
-  Z as InlineSelect,
-  j as InlineSelectTrigger
+  W as InlineSelect,
+  Z 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
 };