@epam/ai-dial-ui-kit 0.15.0-dev.51 → 0.15.0-dev.52

package/dist/components/New/Slider/Slider.js

@@ -1,54 +1,66 @@
-import { jsxs as n, jsx as e, Fragment as k } from "react/jsx-runtime";
-import { useId as Z, useCallback as q } from "react";
-import { mergeClasses as a } from "../../../utils/merge-classes.js";
+import { jsxs as n, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { useId as Y, useState as P, useCallback as b } from "react";
+import { ElementSize as ee } from "../../../types/size.js";
+import { mergeClasses as s } from "../../../utils/merge-classes.js";
 import { resolveAccessibleName as D } from "../../../utils/accessible-name.js";
-import { ErrorText as J, CaptionText as K } from "../CaptionText/CaptionText.js";
-import { Label as O } from "../Label/Label.js";
-import { getTickPercents as Q } from "./utils.js";
-const R = 12, W = (t) => (t.toString().split(".")[1] ?? "").length, F = (t) => `calc(${t}% + ${(0.5 - t / 100) * R}px)`, X = (t, r) => t && r ? "grid-cols-[auto_minmax(0,1fr)_auto]" : t ? "grid-cols-[auto_minmax(0,1fr)]" : r ? "grid-cols-[minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)]", le = ({
-  id: t,
-  value: r,
-  min: m = 0,
-  max: g = 1,
-  step: h = 0.1,
-  disabled: i,
-  labelProps: s,
-  labels: l,
-  formatValue: x,
-  showValue: v = !1,
-  showTooltip: S = !1,
-  showTicks: j = !1,
-  leftContent: N,
-  rightContent: y,
-  caption: b,
-  error: c,
-  onChange: w,
-  containerClassName: z,
-  trackClassName: B,
-  fillClassName: E,
-  className: L,
-  ...I
+import { ErrorText as te, CaptionText as ne } from "../CaptionText/CaptionText.js";
+import { Label as re } from "../Label/Label.js";
+import { NumberInput as le } from "../NumberInput/NumberInput.js";
+import { getTickPercents as ae, getStepPrecision as ie, snapToStep as se } from "./utils.js";
+const oe = 12, L = (r) => `calc(${r}% + ${(0.5 - r / 100) * oe}px)`, ce = (r, t) => r && t ? "grid-cols-[auto_minmax(0,1fr)_auto]" : r ? "grid-cols-[auto_minmax(0,1fr)]" : t ? "grid-cols-[minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)]", Ne = ({
+  id: r,
+  value: t,
+  min: o = 0,
+  max: m = 1,
+  step: c = 0.1,
+  disabled: l,
+  labelProps: d,
+  labels: a,
+  formatValue: p,
+  showValue: y = !1,
+  showTooltip: A = !1,
+  showTicks: G = !1,
+  leftContent: I,
+  rightContent: S,
+  showValueInput: w = !1,
+  valueInputAriaLabel: H,
+  caption: C,
+  error: u,
+  onChange: f,
+  containerClassName: U,
+  trackClassName: V,
+  fillClassName: Z,
+  className: q,
+  ...T
 }) => {
-  const A = Z(), o = t ?? A, C = b && !c ? `${o}-caption` : void 0, T = c ? `${o}-error` : void 0, f = g - m, G = f > 0 ? Math.min(100, Math.max(0, (r - m) / f * 100)) : 0, _ = F(G), H = j && !i ? Q(f, h) : [], M = S && !i, u = N != null, $ = y != null, p = x ? x(r) : r.toFixed(W(h)), U = q(
-    (d) => {
-      w?.(Number(d.target.value));
+  const J = Y(), h = r ?? J, F = C && !u ? `${h}-caption` : void 0, _ = u ? `${h}-error` : void 0, x = m - o, K = x > 0 ? Math.min(100, Math.max(0, (t - o) / x * 100)) : 0, z = L(K), O = G && !l ? ae(x, c) : [], B = A && !l, g = I != null, M = w || S != null, $ = ie(c), [Q, k] = P(null), v = p ? p(t) : t.toFixed($), R = b(
+    (i) => {
+      f?.(Number(i.target.value));
     },
-    [w]
-  );
-  return /* @__PURE__ */ n("div", { className: a("flex flex-col gap-2", z), children: [
-    (s || v) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-      s && /* @__PURE__ */ e(O, { ...s, htmlFor: o }),
-      v && // The input already reports its value to assistive tech, so this is
+    [f]
+  ), W = b(
+    (i) => {
+      const N = i == null ? "" : String(i);
+      k(N);
+      const E = Number(N);
+      N !== "" && Number.isFinite(E) && f?.(se(E, o, m, c));
+    },
+    [m, o, f, c]
+  ), X = b(() => k(null), []);
+  return /* @__PURE__ */ n("div", { className: s("flex flex-col gap-2", U), children: [
+    (d || y) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      d && /* @__PURE__ */ e(re, { ...d, htmlFor: h }),
+      y && // The input already reports its value to assistive tech, so this is
       // a visual echo rather than a second announcement.
       /* @__PURE__ */ e(
         "span",
         {
           "aria-hidden": "true",
-          className: a(
+          className: s(
             "dial-small-text ml-auto",
-            i ? "text-control-disable-primary" : "text-primary"
+            l ? "text-control-disable-primary" : "text-primary"
           ),
-          children: p
+          children: v
         }
       )
     ] }),
@@ -56,55 +68,55 @@ const R = 12, W = (t) => (t.toString().split(".")[1] ?? "").length, F = (t) => `
       /* @__PURE__ */ n(
         "div",
         {
-          className: a(
+          className: s(
             "grid items-center gap-x-3 gap-y-1",
-            X(u, $),
+            ce(g, M),
             // Room for the value bubble, which hangs above the track row.
-            M && "mt-7"
+            B && "mt-7"
           ),
           children: [
-            u && /* @__PURE__ */ e("div", { className: "flex items-center", children: N }),
+            g && /* @__PURE__ */ e("div", { className: "flex items-center", children: I }),
             /* @__PURE__ */ n("div", { className: "relative flex h-6 items-center", children: [
               /* @__PURE__ */ e(
                 "div",
                 {
-                  className: a(
+                  className: s(
                     "pointer-events-none absolute inset-x-0 h-1 rounded-full",
-                    i ? "bg-control-disable-primary" : "bg-control-accent-muted",
-                    B
+                    l ? "bg-control-disable-primary" : "bg-control-accent-muted",
+                    V
                   )
                 }
               ),
-              H.map((d) => /* @__PURE__ */ e(
+              O.map((i) => /* @__PURE__ */ e(
                 "span",
                 {
                   "aria-hidden": "true",
-                  className: "pointer-events-none absolute size-0.5 -translate-x-1/2 rounded-full bg-control-neutral-default",
-                  style: { left: F(d) }
+                  className: "pointer-events-none absolute size-0.5 -translate-x-1/2 rounded-full border border-accent-focus",
+                  style: { left: L(i) }
                 },
-                d
+                i
               )),
               /* @__PURE__ */ e(
                 "div",
                 {
-                  className: a(
+                  className: s(
                     "pointer-events-none absolute left-0 h-1 rounded-full",
-                    i ? "bg-control-disable-secondary" : "bg-control-accent",
-                    E
+                    l ? "bg-control-disable-secondary" : "bg-control-accent",
+                    Z
                   ),
-                  style: { width: _ }
+                  style: { width: z }
                 }
               ),
-              M && // A visual echo like `showValue`: the input already announces
+              B && // A visual echo like `showValue`: the input already announces
               // its value, so the bubble stays out of the accessibility tree.
               /* @__PURE__ */ n(
                 "span",
                 {
                   "aria-hidden": "true",
                   className: "pointer-events-none absolute bottom-full mb-0.5 flex -translate-x-1/2 flex-col items-center",
-                  style: { left: _ },
+                  style: { left: z },
                   children: [
-                    /* @__PURE__ */ e("span", { className: "whitespace-nowrap rounded-md bg-control-inverted px-2 py-0.5 dial-small-text text-control-inverted shadow-xs", children: p }),
+                    /* @__PURE__ */ e("span", { className: "whitespace-nowrap rounded-md bg-control-inverted px-2 py-0.5 dial-small-text text-control-inverted shadow-xs", children: v }),
                     /* @__PURE__ */ e(
                       "svg",
                       {
@@ -121,53 +133,70 @@ const R = 12, W = (t) => (t.toString().split(".")[1] ?? "").length, F = (t) => `
               /* @__PURE__ */ e(
                 "input",
                 {
-                  ...I,
+                  ...T,
                   type: "range",
-                  id: o,
-                  value: r,
-                  min: m,
-                  max: g,
-                  step: h,
-                  disabled: i,
-                  onChange: U,
+                  id: h,
+                  value: t,
+                  min: o,
+                  max: m,
+                  step: c,
+                  disabled: l,
+                  onChange: R,
                   "aria-label": D(
-                    typeof s?.label != "string" ? I["aria-label"] : void 0
+                    typeof d?.label != "string" ? T["aria-label"] : void 0
                   ),
-                  "aria-valuetext": x ? p : void 0,
-                  "aria-describedby": T ?? C,
-                  className: a(
+                  "aria-valuetext": p ? v : void 0,
+                  "aria-describedby": _ ?? F,
+                  className: s(
                     "dial-kit-slider absolute inset-0 h-full w-full",
-                    L
+                    q
                   )
                 }
               )
             ] }),
-            $ && /* @__PURE__ */ e("div", { className: "flex items-center", children: y }),
-            l && /* @__PURE__ */ e(
+            M && /* @__PURE__ */ e("div", { className: "flex items-center", children: w ? /* @__PURE__ */ e(
+              le,
+              {
+                "aria-label": D(
+                  H ?? (typeof d?.label == "string" ? d.label : void 0)
+                ),
+                value: Q ?? t.toFixed($),
+                min: o,
+                max: m,
+                step: c,
+                disabled: l,
+                size: ee.Small,
+                containerClassName: "w-12",
+                className: "text-center",
+                onChange: W,
+                onBlur: X
+              }
+            ) : S }),
+            a && /* @__PURE__ */ e(
               "div",
               {
-                className: a(
+                className: s(
                   "dial-tiny-text flex text-secondary",
-                  u && "col-start-2"
+                  g && "col-start-2"
                 ),
-                children: l.length === 3 ? /* @__PURE__ */ n(k, { children: [
-                  /* @__PURE__ */ e("span", { children: l[0] }),
-                  /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: l[1] }),
-                  /* @__PURE__ */ e("span", { children: l[2] })
-                ] }) : /* @__PURE__ */ n(k, { children: [
-                  /* @__PURE__ */ e("span", { children: l[0] }),
-                  /* @__PURE__ */ e("span", { className: "ml-auto", children: l[1] })
+                children: a.length === 3 ? /* @__PURE__ */ n(j, { children: [
+                  /* @__PURE__ */ e("span", { children: a[0] }),
+                  /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: a[1] }),
+                  /* @__PURE__ */ e("span", { children: a[2] })
+                ] }) : /* @__PURE__ */ n(j, { children: [
+                  /* @__PURE__ */ e("span", { children: a[0] }),
+                  /* @__PURE__ */ e("span", { className: "ml-auto", children: a[1] })
                 ] })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ e(J, { id: T, text: c }),
-      !c && /* @__PURE__ */ e(K, { id: C, text: b })
+      /* @__PURE__ */ e(te, { id: _, text: u }),
+      !u && /* @__PURE__ */ e(ne, { id: F, text: C })
     ] })
   ] });
 };
 export {
-  le as Slider
+  Ne as Slider
 };

package/dist/components/New/Slider/utils.js

@@ -1,12 +1,20 @@
-const e = (r, t) => {
-  if (r <= 0 || t <= 0)
+const u = (t, n) => {
+  if (t <= 0 || n <= 0)
     return [];
-  const o = Math.floor(r / t + 1e-9);
+  const r = Math.floor(t / n + 1e-9);
   return Array.from(
-    { length: o + 1 },
-    (n, c) => c * t / r * 100
+    { length: r },
+    (o, e) => (e + 1) * n / t * 100
   );
+}, s = (t) => (t.toString().split(".")[1] ?? "").length, a = (t, n, r, o) => {
+  const e = Math.min(r, Math.max(n, t));
+  if (o <= 0)
+    return e;
+  const c = Math.round(Number(((e - n) / o).toFixed(9))), i = n + c * o;
+  return Number(Math.min(r, i).toFixed(s(o)));
 };
 export {
-  e as getTickPercents
+  s as getStepPrecision,
+  u as getTickPercents,
+  a as snapToStep
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.51",
-  "generatedAt": "2026-10-08T09:20:27.087Z",
+  "version": "0.15.0-dev.52",
+  "generatedAt": "2026-10-08T09:40:33.410Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -4159,7 +4159,7 @@
       "name": "AutocompleteTagInput",
       "category": "Components_2_0",
       "generation": "2.0",
-      "description": "A tag input that suggests values while typing and also accepts its own.\naliases: Autocomplete|Combobox|TagAutocomplete|ChipAutocomplete|MultiValueAutocomplete\nDesign system 2.0\n\nTyping opens a list of the `suggestions` that match the text (by label, value\nor description) and are not already tags, capped at `maxSuggestions`, with the\nfirst one highlighted. Enter or comma adds the highlighted suggestion, or the\ntyped text when nothing matches; clicking a suggestion adds it too. The arrow\nkeys move the highlight and wrap at the ends; Escape and leaving the field\nclose the list without adding what was typed. Backspace on an empty input\nremoves the last tag, and duplicate tags are ignored. Entered text is not\nvalidated — say what format is expected through `caption`.\n\nReach for  when there is nothing to suggest, and for a\nmultiple `Select` when only listed values are allowed.\n\nThe input follows the ARIA combobox pattern: it keeps focus while the list is\nopen, and the highlighted suggestion is announced through\n`aria-activedescendant`. The tags are a list named by `tagListLabel`, and each\nremove button is named after its tag.\n\nWorks controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).",
+      "description": "A tag input that suggests values while typing and also accepts its own.\naliases: Autocomplete|Combobox|TagAutocomplete|ChipAutocomplete|MultiValueAutocomplete\nDesign system 2.0\n\nTyping opens a list of the `suggestions` that match the text (by label, value\nor description) and are not already tags, capped at `maxSuggestions`, with the\nfirst one highlighted. Enter or comma adds the highlighted suggestion, or the\ntyped text when nothing matches; clicking a suggestion adds it too. The arrow\nkeys move the highlight and wrap at the ends; Escape and leaving the field\nclose the list without adding what was typed. Backspace on an empty input\nremoves the last tag, and duplicate tags are ignored. Entered text is not\nvalidated — say what format is expected through `caption`.\n\nWith `openOnFocus`, focusing or clicking the input opens the list of every\nsuggestion that is not yet a tag, uncapped by `maxSuggestions`, with nothing\nhighlighted, so Enter adds nothing the user did not choose. Picking one keeps\nthe list open for the next pick; typing filters it as usual.\n\nReach for  when there is nothing to suggest, and for a\nmultiple `Select` when only listed values are allowed.\n\nThe input follows the ARIA combobox pattern: it keeps focus while the list is\nopen, and the highlighted suggestion is announced through\n`aria-activedescendant`. The tags are a list named by `tagListLabel`, and each\nremove button is named after its tag.\n\nWorks controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).",
       "props": [
         {
           "name": "id",
@@ -4192,6 +4192,13 @@
           "defaultValue": "DEFAULT_MAX_SUGGESTIONS",
           "description": "How many matching suggestions the list shows at most."
         },
+        {
+          "name": "openOnFocus",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Opens the full list of suggestions that are not yet tags on focus or click, and keeps it open after a pick."
+        },
         {
           "name": "size",
           "type": "ElementSize",
@@ -4415,6 +4422,19 @@
           "required": false,
           "description": "Content after the track, vertically centred on it"
         },
+        {
+          "name": "showValueInput",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Renders a compact (24px), synced `NumberInput` after the track (clamped to `min`/`max`, snapped to `step`); replaces `rightContent`"
+        },
+        {
+          "name": "valueInputAriaLabel",
+          "type": "string",
+          "required": false,
+          "description": "Accessible name of the value input; defaults to a string `labelProps.label`"
+        },
         {
           "name": "caption",
           "type": "string",