@epam/ai-dial-ui-kit 0.16.0-dev.47 → 0.16.0-dev.49

package/dist/components/New/Analytics/Bar/Bar.js

@@ -1,10 +1,10 @@
 import { jsx as a, jsxs as s } from "react/jsx-runtime";
-import { DIAL_KIT_CLASS as h } from "../../../../constants/public-class-names.js";
 import { Badge as S } from "../../Badge/Badge.js";
-import { BadgeColor as _, BadgeVariant as R } from "../../../../types/badge.js";
-import { Spinner as T } from "../../../Spinner/Spinner.js";
+import { Spinner as _ } from "../../../Spinner/Spinner.js";
+import { DIAL_KIT_CLASS as h } from "../../../../constants/public-class-names.js";
+import { BadgeColor as R, BadgeVariant as T } from "../../../../types/badge.js";
 import { mergeClasses as r } from "../../../../utils/merge-classes.js";
-import { getAnalyticsBarColor as j, DEFAULT_ANALYTICS_BAR_COLOR_MAP as k, getAnalyticsBarRatio as F } from "../../../Analytics/Bar/utils.js";
+import { getAnalyticsBarColor as j, DEFAULT_ANALYTICS_BAR_COLOR_MAP as k, getAnalyticsBarRatio as F } from "./utils.js";
 const K = ({
   value: e,
   maxValue: c = 1,
@@ -23,11 +23,11 @@ const K = ({
     S,
     {
       label: "Error",
-      variant: R.Filled,
-      color: _.Red,
+      variant: T.Filled,
+      color: R.Red,
       textClassName: "dial-tiny-semi-text"
     }
-  ) : t ? /* @__PURE__ */ a(T, { size: 18, fullWidth: !1 }) : /* @__PURE__ */ a(
+  ) : t ? /* @__PURE__ */ a(_, { size: 18, fullWidth: !1 }) : /* @__PURE__ */ a(
     "span",
     {
       className: r(

package/dist/components/New/Analytics/BarGroup/BarGroup.js

@@ -2,9 +2,9 @@ import { jsx as e, jsxs as f, Fragment as H } from "react/jsx-runtime";
 import { Fragment as J } from "react";
 import { Accordion as Q } from "../../Accordion/Accordion.js";
 import { AnalyticsBar as b } from "../Bar/Bar.js";
-import { DIAL_KIT_CLASS as R } from "../../../../constants/public-class-names.js";
-import { Spinner as U } from "../../../Spinner/Spinner.js";
 import { Tooltip as x } from "../../Tooltip/Tooltip.js";
+import { Spinner as R } from "../../../Spinner/Spinner.js";
+import { DIAL_KIT_CLASS as U } from "../../../../constants/public-class-names.js";
 import { mergeClasses as o } from "../../../../utils/merge-classes.js";
 const et = ({
   title: g,
@@ -38,7 +38,7 @@ const et = ({
       description: G,
       defaultExpanded: I,
       nonCollapsible: K,
-      className: o(z, R.analyticsBarGroup),
+      className: o(z, U.analyticsBarGroup),
       children: /* @__PURE__ */ e(
         "div",
         {
@@ -46,7 +46,7 @@ const et = ({
             "flex flex-col",
             r ? "gap-4" : a ? "gap-2" : "gap-3"
           ),
-          children: T ? /* @__PURE__ */ e(U, { size: 18, fullWidth: !1, className: "self-center" }) : r ? q.map((t) => {
+          children: T ? /* @__PURE__ */ e(R, { size: 18, fullWidth: !1, className: "self-center" }) : r ? q.map((t) => {
             const l = t in i ? i[t] : null, n = t in r ? r[t] : null, s = typeof l == "number" && typeof n == "number" ? parseFloat((n - l).toFixed(3)) : null, F = s != null && s !== 0, L = F && s > 0, S = F ? L ? `+${s}` : String(s) : null, O = C?.[t], $ = /* @__PURE__ */ e("span", { className: "dial-small-text text-secondary", children: t }), w = /* @__PURE__ */ f(H, { children: [
               /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
                 O ? /* @__PURE__ */ e(x, { tooltip: O, children: $ }) : $,

package/dist/components/New/Analytics/Histogram/Histogram.js

@@ -1,11 +1,11 @@
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { DEFAULT_ANALYTICS_BAR_COLOR_MAP as Y } from "../../../Analytics/Bar/utils.js";
-import { DIAL_KIT_CLASS as k } from "../../../../constants/public-class-names.js";
-import { Spinner as P } from "../../../Spinner/Spinner.js";
-import { TooltipPlacement as w } from "../../../../types/tooltip.js";
-import { Tooltip as A } from "../../Tooltip/Tooltip.js";
+import { DEFAULT_ANALYTICS_BAR_COLOR_MAP as Y } from "../Bar/utils.js";
+import { Tooltip as w } from "../../Tooltip/Tooltip.js";
+import { Spinner as k } from "../../../Spinner/Spinner.js";
+import { DIAL_KIT_CLASS as P } from "../../../../constants/public-class-names.js";
+import { TooltipPlacement as A } from "../../../../types/tooltip.js";
 import { mergeClasses as H } from "../../../../utils/merge-classes.js";
-import { buildHistogramColumns as T, formatHistogramColumnLabel as L, getHistogramYTicks as O, getHistogramYMax as R } from "../../../Analytics/Histogram/utils.js";
+import { buildHistogramColumns as T, formatHistogramColumnLabel as L, getHistogramYTicks as O, getHistogramYMax as R } from "./utils.js";
 const u = 128, D = (s, i) => {
   const l = L(s, i);
   return s === i ? `scored ${l}` : `scored between ${l}`;
@@ -48,9 +48,9 @@ const u = 128, D = (s, i) => {
       borderColor: e.color
     } : { backgroundColor: e.color };
     return /* @__PURE__ */ t(
-      A,
+      w,
       {
-        placement: w.Bottom,
+        placement: A.Bottom,
         tooltip: r,
         triggerClassName: "flex h-full flex-1 items-end",
         children: /* @__PURE__ */ t(
@@ -72,7 +72,7 @@ const u = 128, D = (s, i) => {
       className: H(
         "flex flex-col gap-2",
         I,
-        k.analyticsHistogram
+        P.analyticsHistogram
       ),
       children: [
         /* @__PURE__ */ t("span", { className: "dial-small-text text-primary", children: s }),
@@ -81,7 +81,7 @@ const u = 128, D = (s, i) => {
           {
             className: "flex items-center justify-center",
             style: { height: u },
-            children: /* @__PURE__ */ t(P, { size: 18, fullWidth: !1 })
+            children: /* @__PURE__ */ t(k, { size: 18, fullWidth: !1 })
           }
         ) : /* @__PURE__ */ n("div", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-1", children: [
           /* @__PURE__ */ t(
@@ -165,9 +165,9 @@ const u = 128, D = (s, i) => {
                     },
                     r
                   ) : /* @__PURE__ */ t(
-                    A,
+                    w,
                     {
-                      placement: w.Bottom,
+                      placement: A.Bottom,
                       tooltip: a,
                       triggerClassName: "flex h-full flex-1 items-end",
                       children: /* @__PURE__ */ t(

package/dist/components/New/LabelledText/LabelledText.js

@@ -0,0 +1,43 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { EllipsisTooltip as p } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { Label as x } from "../Label/Label.js";
+import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
+import { mergeClasses as n } from "../../../utils/merge-classes.js";
+const b = ({
+  label: s,
+  text: l,
+  tooltip: t,
+  children: e,
+  postfix: a,
+  className: r
+}) => {
+  const i = !!e || l != null;
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: n(
+        "flex flex-col gap-1",
+        !e && "max-w-[200px]",
+        r,
+        f.labelledText
+      ),
+      children: [
+        /* @__PURE__ */ o(x, { label: s }),
+        i && /* @__PURE__ */ m("div", { className: "flex min-w-0 items-center gap-2 text-primary", children: [
+          e ?? /* @__PURE__ */ o(
+            p,
+            {
+              text: l,
+              customTooltipContent: t,
+              className: "dial-small-text min-w-0 flex-1"
+            }
+          ),
+          !e && a
+        ] })
+      ]
+    }
+  );
+};
+export {
+  b as LabelledText
+};

package/dist/components/New/Steps/Steps.js

@@ -0,0 +1,84 @@
+import { jsx as o, jsxs as L } from "react/jsx-runtime";
+import { IconExclamationCircle as h, IconCheck as p } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as u } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as d } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as y } from "../../../constants/public-class-names.js";
+import { StepStatus as t } from "../../../models/step.js";
+import { mergeClasses as l } from "../../../utils/merge-classes.js";
+const A = {
+  [t.VALID]: "Completed",
+  [t.ERROR]: "Error"
+}, S = (e, s) => e.status === t.ERROR ? s ? "border-error text-primary" : "border-error text-error" : s ? e.status === t.VALID ? "border-success text-primary" : "border-accent text-primary" : e.status === t.VALID ? "border-primary text-primary" : "border-primary text-secondary", R = (e, s) => e.status === t.ERROR ? "bg-control-error text-control-permanent" : e.status === t.VALID && !s ? "bg-success text-success" : s ? e.status === t.VALID ? "bg-success text-success" : "bg-control-accent text-control-permanent" : "bg-layer-sunken text-secondary", N = ({
+  steps: e,
+  currentStep: s,
+  onChangeStep: m,
+  statusLabels: f,
+  ariaLabel: x,
+  className: I
+}) => {
+  const b = (r) => {
+    if (r === s) return;
+    const a = e.findIndex((n) => n.id === s), i = e.findIndex((n) => n.id === r);
+    (e.slice(0, i).every((n) => n.status === t.VALID) || i < a) && m(r);
+  };
+  return /* @__PURE__ */ o(
+    "ol",
+    {
+      "aria-label": x,
+      className: l(
+        "m-0 flex list-none gap-x-3 p-0",
+        I,
+        y.steps
+      ),
+      children: e.map((r, a) => {
+        const i = s === r.id, c = r.status ? f?.[r.status] ?? A[r.status] : void 0;
+        let n = a + 1;
+        return i && r.status === t.ERROR ? n = /* @__PURE__ */ o(
+          h,
+          {
+            "aria-hidden": "true",
+            size: d.SM,
+            stroke: u
+          }
+        ) : !i && r.status === t.VALID && (n = /* @__PURE__ */ o(
+          p,
+          {
+            "aria-hidden": "true",
+            size: d.SM,
+            stroke: u
+          }
+        )), /* @__PURE__ */ o("li", { className: "flex min-w-[180px] flex-1", children: /* @__PURE__ */ L(
+          "button",
+          {
+            type: "button",
+            "aria-current": i ? "step" : void 0,
+            onClick: () => b(r.id),
+            className: l(
+              "flex h-8 w-full cursor-pointer items-center border-t-2 text-start dial-tiny-text",
+              "focus-visible:outline focus-visible:outline-focus",
+              S(r, i)
+            ),
+            children: [
+              /* @__PURE__ */ o(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: l(
+                    "me-2 flex size-[22px] shrink-0 items-center justify-center rounded-full",
+                    R(r, i)
+                  ),
+                  children: n
+                }
+              ),
+              /* @__PURE__ */ o("span", { children: r.name }),
+              c && /* @__PURE__ */ o("span", { className: "sr-only", children: c })
+            ]
+          }
+        ) }, r.id);
+      })
+    }
+  );
+};
+export {
+  N as Steps
+};