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

package/dist/components/New/Tabs/Tabs.js

@@ -1,54 +1,59 @@
-import { jsx as u, jsxs as k } from "react/jsx-runtime";
-import { useRef as g, useCallback as w } from "react";
+import { jsx as u, jsxs as g } from "react/jsx-runtime";
+import { useRef as A, useCallback as w } from "react";
 import { mergeClasses as f } from "../../../utils/merge-classes.js";
-const A = ["ArrowRight", "ArrowLeft", "Home", "End"], R = ({
+import { DIAL_KIT_CLASS as m } from "../../../constants/public-class-names.js";
+const I = ["ArrowRight", "ArrowLeft", "Home", "End"], R = ({
   tabs: n,
   activeTabId: i,
-  onTabChange: o,
+  onTabChange: l,
   ariaLabel: x,
-  className: m,
-  tabClassName: b
+  className: b,
+  tabClassName: y
 }) => {
-  const p = g({}), a = n.find((e) => e.id === i), y = a && !a.disabled ? a.id : n.find((e) => !e.disabled)?.id, h = w(
+  const p = A({}), a = n.find((e) => e.id === i), h = a && !a.disabled ? a.id : n.find((e) => !e.disabled)?.id, k = w(
     (e) => {
-      if (!A.includes(e.key) || n.length === 0) return;
+      if (!I.includes(e.key) || n.length === 0) return;
       const r = n.filter((c) => !c.disabled);
       if (r.length === 0) return;
       const t = Math.max(
         r.findIndex((c) => c.id === i),
         0
       ), s = r.length - 1;
-      let l = t;
+      let o = t;
       switch (e.key) {
         case "ArrowRight":
-          l = t === s ? 0 : t + 1;
+          o = t === s ? 0 : t + 1;
           break;
         case "ArrowLeft":
-          l = t === 0 ? s : t - 1;
+          o = t === 0 ? s : t - 1;
           break;
         case "Home":
-          l = 0;
+          o = 0;
           break;
         case "End":
-          l = s;
+          o = s;
           break;
       }
       e.preventDefault();
-      const d = r[l];
-      p.current[d.id]?.focus(), d.id !== i && o(d.id);
+      const d = r[o];
+      p.current[d.id]?.focus(), d.id !== i && l(d.id);
     },
-    [n, i, o]
+    [n, i, l]
   );
   return /* @__PURE__ */ u(
     "div",
     {
       role: "tablist",
       "aria-label": x,
-      onKeyDown: h,
-      className: f("flex justify-start gap-1", m),
+      onKeyDown: k,
+      className: f(
+        m.tabs,
+        "flex justify-start gap-1",
+        b
+      ),
       children: n.map((e) => {
         const r = i === e.id, t = !!e.disabled;
-        return /* @__PURE__ */ k(
+        return /* @__PURE__ */ g(
           "button",
           {
             ref: (s) => {
@@ -58,16 +63,17 @@ const A = ["ArrowRight", "ArrowLeft", "Home", "End"], R = ({
             role: "tab",
             "aria-selected": r,
             disabled: t,
-            tabIndex: e.id === y ? 0 : -1,
-            onClick: () => o(e.id),
+            tabIndex: e.id === h ? 0 : -1,
+            onClick: () => l(e.id),
             className: f(
+              m.tab,
               "dial-small-paragraph-semi-text dial-kit-enhanced-target",
               "border-b-2 border-transparent flex items-center gap-2 px-3 py-2 text-start",
               "transition-colors motion-reduce:transition-none",
               "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus",
               t && "cursor-not-allowed border-control-disable-primary text-control-disable-primary",
               !t && (r ? "dial-kit-tab-selected-underline text-primary" : "border-transparent text-secondary"),
-              b
+              y
             ),
             children: [
               /* @__PURE__ */ u("span", { children: e.label }),

package/dist/components/New/Tag/Tag.js

@@ -1,64 +1,66 @@
-import { jsxs as C, jsx as r } from "react/jsx-runtime";
-import { IconX as S } from "@tabler/icons-react";
-import { DIAL_KIT_ICON_STROKE as y } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as D } from "../../../constants/icon.js";
-import { ElementSize as T } from "../../../types/size.js";
+import { jsxs as x, jsx as r } from "react/jsx-runtime";
+import { IconX as C } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as _ } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as y } from "../../../constants/icon.js";
+import { ElementSize as D } from "../../../types/size.js";
 import { TagAppearance as d } from "../../../types/tag.js";
-import { mergeClasses as _ } from "../../../utils/merge-classes.js";
-import { GhostIconButton as w } from "../IconButton/IconButtonWrappers.js";
-import { tagInteractiveClassName as z, tagHoverClassName as E, tagStateClassNames as K, tagBaseClassName as O } from "./constants.js";
-const H = ({
+import { mergeClasses as T } from "../../../utils/merge-classes.js";
+import { GhostIconButton as A } from "../IconButton/IconButtonWrappers.js";
+import { tagInteractiveClassName as K, tagHoverClassName as L, tagStateClassNames as w, tagBaseClassName as z } from "./constants.js";
+import { DIAL_KIT_CLASS as E } from "../../../constants/public-class-names.js";
+const X = ({
   label: o,
-  icon: l,
-  appearance: n = d.Outlined,
-  selected: s = !1,
+  icon: m,
+  appearance: l = d.Outlined,
+  selected: i = !1,
   disabled: t = !1,
   closable: p = !1,
   removeLabel: u,
-  className: h,
-  title: I,
-  onClick: m,
+  className: I,
+  title: g,
+  onClick: n,
   onRemove: c,
-  onKeyDown: g,
-  ...i
+  onKeyDown: h,
+  ...s
 }) => {
-  const f = n === d.Selectable, a = !!m && !t, N = p && !!c && !t, k = f && s, x = (e) => {
-    g?.(e), !(!a || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
+  const f = l === d.Selectable, a = !!n && !t, N = p && !!c && !t, S = f && i, k = (e) => {
+    h?.(e), !(!a || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
   };
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ x(
     "span",
     {
-      ...i,
-      role: a ? "button" : i.role,
-      tabIndex: a ? 0 : i.tabIndex,
+      ...s,
+      role: a ? "button" : s.role,
+      tabIndex: a ? 0 : s.tabIndex,
       "aria-disabled": t || void 0,
-      "aria-pressed": f && a ? s : void 0,
-      onClick: t ? void 0 : m,
-      onKeyDown: x,
-      className: _(
-        O,
-        k ? "dial-tiny-semi-text" : "dial-tiny-text",
-        K[n][s ? "selected" : "default"],
+      "aria-pressed": f && a ? i : void 0,
+      onClick: t ? void 0 : n,
+      onKeyDown: k,
+      className: T(
+        E.tag,
+        z,
+        S ? "dial-tiny-semi-text" : "dial-tiny-text",
+        w[l][i ? "selected" : "default"],
         // The design defines no disabled tag, so a disabled one keeps its
         // colours and only stops responding.
         t && "cursor-not-allowed",
-        a && [z, E],
-        h
+        a && [K, L],
+        I
       ),
       children: [
-        l && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: l }),
-        /* @__PURE__ */ r("span", { className: "truncate", title: I ?? o, children: o }),
+        m && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: m }),
+        /* @__PURE__ */ r("span", { className: "truncate", title: g ?? o, children: o }),
         N && /* @__PURE__ */ r(
-          w,
+          A,
           {
             className: "size-[16px] shrink-0 dial-kit-minimum-target",
-            size: T.Small,
+            size: D.Small,
             "aria-label": u ?? `Remove ${o}`,
             icon: /* @__PURE__ */ r(
-              S,
+              C,
               {
-                size: D.SM,
-                stroke: y,
+                size: y.SM,
+                stroke: _,
                 "aria-hidden": "true"
               }
             ),
@@ -72,5 +74,5 @@ const H = ({
   );
 };
 export {
-  H as Tag
+  X as Tag
 };

package/dist/components/New/TagInput/TagInput.js

@@ -1,48 +1,49 @@
 import { jsxs as D, jsx as a } from "react/jsx-runtime";
-import { useId as oe, useRef as R, useState as T, useCallback as v, useEffect as ae } from "react";
-import { ElementSize as L } from "../../../types/size.js";
+import { useId as oe, useRef as T, useState as I, useCallback as R, useEffect as ae } from "react";
+import { ElementSize as V } from "../../../types/size.js";
 import { mergeClasses as c } from "../../../utils/merge-classes.js";
 import { Input as le } from "../Input/Input.js";
 import { Tag as d } from "../Tag/Tag.js";
 import { getVisibleTagCount as ce } from "./utils.js";
-const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
+import { DIAL_KIT_CLASS as me } from "../../../constants/public-class-names.js";
+const pe = 4, ue = 24, A = (r) => parseFloat(r) || 0, fe = (r) => {
   let o = r.length;
   for (; o > 0 && r[o - 1] === ","; ) o--;
   return r.slice(0, o);
-}, fe = () => {
-}, Te = ({
+}, de = () => {
+}, ve = ({
   id: r,
   value: o,
-  defaultValue: y,
-  size: N = L.Standard,
-  labelProps: j,
-  placeholder: A,
+  defaultValue: P,
+  size: v = V.Standard,
+  labelProps: y,
+  placeholder: j,
   caption: B,
-  error: M,
-  invalid: G,
+  error: K,
+  invalid: M,
   disabled: m = !1,
   readOnly: p = !1,
   collapseTagOverflow: s = !1,
-  ariaLabel: K,
+  ariaLabel: G,
   tagListLabel: U = "Tags",
   className: X,
   fieldClassName: $,
   tagClassName: u,
-  onChange: I
+  onChange: N
 }) => {
-  const z = oe(), F = r || z, q = N === L.Small, h = R(null), S = R([]), k = R(null), g = o !== void 0, [H, J] = T(
-    y ?? []
-  ), n = g ? o : H, i = n.length, [f, E] = T(""), [W, b] = T(i), l = !p && !m, w = v(
+  const z = oe(), F = r || z, q = v === V.Small, h = T(null), S = T([]), _ = T(null), g = o !== void 0, [H, J] = I(
+    P ?? []
+  ), n = g ? o : H, i = n.length, [f, k] = I(""), [E, b] = I(i), l = !p && !m, w = R(
     (e) => {
-      g || J(e), I?.(e);
+      g || J(e), N?.(e);
     },
-    [g, I]
-  ), Q = v(
+    [g, N]
+  ), Q = R(
     (e) => (t) => {
       S.current[e] = t;
     },
     []
-  ), x = v(() => {
+  ), x = R(() => {
     const e = h.current;
     if (!e || e.clientWidth === 0) {
       b(n.length);
@@ -51,12 +52,12 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
     const { paddingLeft: t, paddingRight: ie } = getComputedStyle(e);
     b(
       ce({
-        availableWidth: e.clientWidth - P(t) - P(ie) - (p ? 0 : pe),
+        availableWidth: e.clientWidth - A(t) - A(ie) - (p ? 0 : ue),
         tagWidths: n.map(
-          (de, re) => S.current[re]?.offsetWidth ?? 0
+          (he, re) => S.current[re]?.offsetWidth ?? 0
         ),
-        overflowChipWidth: k.current?.offsetWidth ?? 0,
-        gap: me
+        overflowChipWidth: _.current?.offsetWidth ?? 0,
+        gap: pe
       })
     );
   }, [p, n]);
@@ -76,23 +77,23 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
     s ? "shrink-0" : "min-w-0",
     u
   ), Z = (e) => {
-    const t = ue(e.trim()).trim();
+    const t = fe(e.trim()).trim();
     !t || n.includes(t) || w([...n, t]);
   }, O = (e) => {
     w(n.filter((t) => t !== e));
-  }, V = () => {
-    Z(f), E("");
+  }, L = () => {
+    Z(f), k("");
   }, ee = (e) => {
     if (l) {
       if (e.key === "Enter" || e.key === ",") {
-        e.preventDefault(), V();
+        e.preventDefault(), L();
         return;
       }
       e.key === "Backspace" && !f && i > 0 && (e.preventDefault(), w(n.slice(0, -1)));
     }
   }, te = () => {
-    l && f.trim() && V();
-  }, ne = s ? n.slice(0, W) : n, C = s ? n.slice(W) : [], _ = C.join(", "), se = i > 0 && /* @__PURE__ */ D(
+    l && f.trim() && L();
+  }, ne = s ? n.slice(0, E) : n, C = s ? n.slice(E) : [], W = C.join(", "), se = i > 0 && /* @__PURE__ */ D(
     "span",
     {
       role: "list",
@@ -119,8 +120,8 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
           {
             role: "listitem",
             label: `+${C.length}`,
-            "aria-label": _,
-            title: _,
+            "aria-label": W,
+            title: W,
             className: c("shrink-0", u),
             disabled: m
           }
@@ -143,13 +144,13 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
                       className: u,
                       disabled: m,
                       closable: l,
-                      onRemove: l ? fe : void 0
+                      onRemove: l ? de : void 0
                     }
                   )
                 },
                 e
               )),
-              /* @__PURE__ */ a("span", { ref: k, className: "inline-flex", children: /* @__PURE__ */ a(d, { label: `+${i}`, className: u }) })
+              /* @__PURE__ */ a("span", { ref: _, className: "inline-flex", children: /* @__PURE__ */ a(d, { label: `+${i}`, className: u }) })
             ]
           }
         )
@@ -160,22 +161,23 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
     le,
     {
       id: F,
-      size: N,
-      labelProps: j,
+      size: v,
+      labelProps: y,
       caption: B,
-      error: M,
-      invalid: G,
+      error: K,
+      invalid: M,
       disabled: m,
       readOnly: p,
       value: f,
-      placeholder: i > 0 ? void 0 : A,
-      "aria-label": K,
+      placeholder: i > 0 ? void 0 : j,
+      "aria-label": G,
       wrapperRef: h,
-      onChange: (e) => E(e ?? ""),
+      onChange: (e) => k(e ?? ""),
       onKeyDown: ee,
       onBlur: te,
       containerClassName: c("w-full", X),
       wrapperClassName: c(
+        me.tagInput,
         i > 0 && [
           "!h-auto",
           q ? "min-h-[24px] py-0.5" : "min-h-[40px] py-1.5",
@@ -193,5 +195,5 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
   );
 };
 export {
-  Te as TagInput
+  ve as TagInput
 };

package/dist/components/New/ToggleIconButton/ToggleIconButton.js

@@ -1,54 +1,56 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useCallback as f } from "react";
-import { ButtonAppearance as b, ButtonVariant as B } from "../../../types/button.js";
+import { ButtonAppearance as B, ButtonVariant as b } from "../../../types/button.js";
 import { ElementSize as C } from "../../../types/size.js";
-import { mergeClasses as h } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as v } from "../../../utils/accessible-name.js";
-import { IconButton as x } from "../IconButton/IconButton.js";
-import { Tooltip as g } from "../Tooltip/Tooltip.js";
-const E = ({
-  icon: o,
+import { mergeClasses as I } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as g } from "../../../utils/accessible-name.js";
+import { IconButton as A } from "../IconButton/IconButton.js";
+import { Tooltip as h } from "../Tooltip/Tooltip.js";
+import { DIAL_KIT_CLASS as v } from "../../../constants/public-class-names.js";
+const y = ({
+  icon: t,
   selectedIcon: l,
-  isSelected: r = !1,
-  onToggle: t,
+  isSelected: o = !1,
+  onToggle: a,
   onClick: m,
-  tooltipProps: a,
+  tooltipProps: r,
   size: s = C.Small,
   className: c,
   ...n
 }) => {
   const p = f(
     (u) => {
-      m?.(u), t?.(!r);
+      m?.(u), a?.(!o);
     },
-    [m, t, r]
+    [m, a, o]
   ), e = /* @__PURE__ */ i(
-    x,
+    A,
     {
       ...n,
       size: s,
-      variant: B.Primary,
-      appearance: b.Ghost,
-      icon: r ? l ?? o : o,
-      "aria-pressed": r,
-      "aria-label": v(
+      variant: b.Primary,
+      appearance: B.Ghost,
+      icon: o ? l ?? t : t,
+      "aria-pressed": o,
+      "aria-label": g(
         n["aria-label"],
-        a?.tooltip
+        r?.tooltip
       ),
       onClick: p,
-      className: h(
+      className: I(
+        v.toggleIconButton,
         "!rounded",
         // The glyph stays 16px at every size tier — only the tint square grows.
         // CSS outranks the width/height attributes Tabler renders, so callers
         // need not pass a size and the two icons can never disagree.
         "[&_svg]:size-4",
-        r && "!text-accent",
+        o && "!text-accent",
         c
       )
     }
   );
-  return a ? /* @__PURE__ */ i(g, { asChild: !0, ...a, children: e }) : e;
+  return r ? /* @__PURE__ */ i(h, { asChild: !0, ...r, children: e }) : e;
 };
 export {
-  E as ToggleIconButton
+  y as ToggleIconButton
 };

package/dist/components/New/Tooltip/TooltipContent.js

@@ -1,20 +1,21 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { useMergeRefs as i, FloatingPortal as c, FloatingArrow as p } from "@floating-ui/react";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useMergeRefs as i, FloatingPortal as p, FloatingArrow as c } from "@floating-ui/react";
 import f from "classnames";
 import { useRef as g } from "react";
 import { useThemeScope as u } from "../ThemeScope/ThemeScope.js";
 import { useHasHover as x } from "../../../hooks/use-has-hover.js";
 import { arrowClassName as d, tooltipClassName as h } from "./constants.js";
 import { useTooltipContext as N } from "./TooltipContext.js";
-const T = ({
+import { DIAL_KIT_CLASS as C } from "../../../constants/public-class-names.js";
+const j = ({
   style: r,
   ...t
 }) => {
-  const o = N(), s = x(), l = u(), a = g(null), n = i([o.refs.setFloating, a]);
-  return !o.open || !s ? null : /* @__PURE__ */ e(c, { id: "tooltip-portal", children: /* @__PURE__ */ m(
+  const o = N(), s = x(), l = u(), a = g(null), m = i([o.refs.setFloating, a]);
+  return !o.open || !s ? null : /* @__PURE__ */ e(p, { id: "tooltip-portal", children: /* @__PURE__ */ n(
     "div",
     {
-      ref: n,
+      ref: m,
       "data-placement": o.placement,
       style: {
         ...o.floatingStyles,
@@ -22,6 +23,7 @@ const T = ({
       },
       ...o.getFloatingProps(t),
       className: f(
+        C.tooltip,
         h,
         l,
         o.getFloatingProps(t).className
@@ -29,7 +31,7 @@ const T = ({
       children: [
         t.children,
         /* @__PURE__ */ e(
-          p,
+          c,
           {
             ref: o.arrowRef,
             context: o.context,
@@ -41,5 +43,5 @@ const T = ({
   ) });
 };
 export {
-  T as TooltipContent
+  j as TooltipContent
 };

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,58 +1,70 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { useId as w } from "react";
-import { Label as y } from "../New/Label/Label.js";
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import { useId as y } from "react";
+import { Label as S } from "../New/Label/Label.js";
 import { ElementSize as f } from "../../types/size.js";
-import { resolveAccessibleName as I } from "../../utils/accessible-name.js";
-import { mergeClasses as M } from "../../utils/merge-classes.js";
-const A = ({
-  value: o,
-  max: s = 100,
+import { resolveAccessibleName as B } from "../../utils/accessible-name.js";
+import { mergeClasses as h } from "../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as p } from "../../constants/public-class-names.js";
+const z = ({
+  value: s,
+  max: l = 100,
   size: u = f.Standard,
   labelProps: e,
-  valueLabel: i,
-  id: h,
-  className: b,
-  "aria-label": p,
-  ...g
+  valueLabel: r,
+  id: b,
+  className: g,
+  "aria-label": x,
+  ...v
 }) => {
-  const x = w(), t = h ?? x, l = !!e?.label, n = l ? e?.id ?? `${t}-label` : void 0, a = s > 0 ? s : 0, v = Number.isFinite(o) ? o : 0, d = Math.min(Math.max(v, 0), a), N = a > 0 ? d / a * 100 : 0, c = /* @__PURE__ */ r(
+  const N = y(), t = b ?? N, a = !!e?.label, n = a ? e?.id ?? `${t}-label` : void 0, o = l > 0 ? l : 0, w = Number.isFinite(s) ? s : 0, d = Math.min(Math.max(w, 0), o), I = o > 0 ? d / o * 100 : 0, m = /* @__PURE__ */ i(
     "div",
     {
-      ...g,
+      ...v,
       id: t,
       role: "progressbar",
       "aria-valuenow": d,
       "aria-valuemin": 0,
-      "aria-valuemax": a,
+      "aria-valuemax": o,
       "aria-labelledby": n,
-      "aria-label": I(
-        p,
-        l ? void 0 : "Progress"
+      "aria-label": B(
+        x,
+        a ? void 0 : "Progress"
       ),
-      className: M(
+      className: h(
+        /* The track is the component's root when there is no label and no
+           readout to wrap it, and the public class belongs on whichever
+           element that is. */
+        !a && !r && p.progressBar,
         "w-full overflow-hidden rounded-full bg-control-disable-primary",
         u === f.Small ? "h-1" : "h-2",
-        b
+        g
       ),
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ i(
         "div",
         {
-          style: { width: `${N}%` },
+          style: { width: `${I}%` },
           className: "h-full rounded-full bg-control-accent transition-[width] duration-300 motion-reduce:transition-none"
         }
       )
     }
   );
-  return !l && !i ? c : /* @__PURE__ */ m("div", { className: "flex w-full flex-col gap-1", children: [
-    /* @__PURE__ */ m("div", { className: "flex items-baseline gap-2", children: [
-      e && /* @__PURE__ */ r(y, { ...e, id: n }),
-      i && // `ml-auto` rather than `justify-between` so the readout still sits
-      // at the end when there is no label beside it.
-      /* @__PURE__ */ r("span", { className: "dial-tiny-text text-secondary ml-auto shrink-0", children: i })
-    ] }),
-    c
-  ] });
+  return !a && !r ? m : /* @__PURE__ */ c(
+    "div",
+    {
+      className: h(
+        p.progressBar,
+        "flex w-full flex-col gap-1"
+      ),
+      children: [
+        /* @__PURE__ */ c("div", { className: "flex items-baseline gap-2", children: [
+          e && /* @__PURE__ */ i(S, { ...e, id: n }),
+          r && /* @__PURE__ */ i("span", { className: "dial-tiny-text text-secondary ml-auto shrink-0", children: r })
+        ] }),
+        m
+      ]
+    }
+  );
 };
 export {
-  A as ProgressBar
+  z as ProgressBar
 };