@epam/ai-dial-ui-kit 0.16.0-dev.60 → 0.16.0-dev.61

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

@@ -1,64 +1,66 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { DIAL_KIT_CLASS as g } from "../../../../constants/public-class-names.js";
-import { Badge as u } from "../../Badge/Badge.js";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { DIAL_KIT_CLASS as N } from "../../../../constants/public-class-names.js";
+import { Badge as g } from "../../Badge/Badge.js";
 import { BadgeColor as b, BadgeVariant as C } from "../../../../types/badge.js";
-import { EllipsisTooltip as m } from "../../EllipsisTooltip/EllipsisTooltip.js";
+import { EllipsisTooltip as x } from "../../EllipsisTooltip/EllipsisTooltip.js";
 import { Spinner as D } from "../../../Spinner/Spinner.js";
-import { AnalyticsCardVariant as c } from "../../../../types/analytics.js";
-import { mergeClasses as x } from "../../../../utils/merge-classes.js";
+import { AnalyticsCardVariant as o } from "../../../../types/analytics.js";
+import { mergeClasses as l } from "../../../../utils/merge-classes.js";
 const w = {
-  [c.Default]: {
+  [o.Default]: {
     container: "bg-layer-3",
     title: "dial-small-text text-secondary",
     value: "dial-display2-text text-primary",
+    compareDividerCell: "h-10",
     showDescription: !0
   },
-  [c.Compact]: {
+  [o.Compact]: {
     container: "bg-layer-2",
     title: "dial-tiny-text text-secondary",
     value: "dial-body-semi-text text-primary",
+    compareDividerCell: "h-6",
     showDescription: !1
   }
-}, _ = ({
-  title: o,
+}, T = ({
+  title: d,
   value: p,
-  description: i,
-  variant: f = c.Default,
-  error: r,
+  description: r,
+  variant: y = o.Default,
+  error: i,
   isLoading: n,
-  className: y,
+  className: f,
   delta: a,
-  deltaPositive: d,
-  deltaUnit: h,
-  compareValues: l
+  deltaPositive: m,
+  deltaUnit: v,
+  compareValues: s
 }) => {
-  const t = w[f], v = d !== void 0 ? d : (a ?? 0) >= 0, N = a === void 0 ? null : `${a >= 0 ? `+${a}` : String(a)}${h ?? ""}`;
-  return /* @__PURE__ */ s(
+  const t = w[y], h = m !== void 0 ? m : (a ?? 0) >= 0, u = a === void 0 ? null : `${a >= 0 ? `+${a}` : String(a)}${v ?? ""}`;
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: x(
+      className: l(
         "flex flex-col rounded-lg border border-secondary p-4",
-        r || n ? "gap-2" : "gap-1",
+        i || n ? "gap-2" : "gap-1",
         t.container,
-        y,
-        g.analyticsCard
+        f,
+        N.analyticsCard
       ),
       children: [
-        a !== void 0 ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ e("span", { className: t.title, children: o }),
+        a !== void 0 ? /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("span", { className: t.title, children: d }),
           /* @__PURE__ */ e(
             "span",
             {
-              className: x(
+              className: l(
                 "dial-tiny-semi-text rounded-[120px] border border-transparent px-2",
-                v ? "bg-success text-success" : "bg-error text-error"
+                h ? "bg-success text-success" : "bg-error text-error"
               ),
-              children: N
+              children: u
             }
           )
-        ] }) : /* @__PURE__ */ e("span", { className: t.title, children: o }),
-        r ? /* @__PURE__ */ e(
-          u,
+        ] }) : /* @__PURE__ */ e("span", { className: t.title, children: d }),
+        i ? /* @__PURE__ */ e(
+          g,
           {
             label: "Error",
             variant: C.Filled,
@@ -66,34 +68,40 @@ const w = {
             textClassName: "dial-tiny-semi-text",
             className: "self-start"
           }
-        ) : n ? /* @__PURE__ */ e(D, { size: 18, fullWidth: !1, className: "self-start" }) : l ? /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-            /* @__PURE__ */ e(
-              m,
-              {
-                text: l[0].title,
-                className: "dial-tiny-text text-secondary"
-              }
-            ),
-            /* @__PURE__ */ e("span", { className: t.value, children: l[0].value })
-          ] }),
-          /* @__PURE__ */ e("div", { className: "h-4 w-px flex-shrink-0 bg-controls-disable-accent" }),
-          /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-            /* @__PURE__ */ e(
-              m,
-              {
-                text: l[1].title,
-                className: "dial-tiny-text text-secondary"
-              }
-            ),
-            /* @__PURE__ */ e("span", { className: t.value, children: l[1].value })
-          ] })
+        ) : n ? /* @__PURE__ */ e(D, { size: 18, fullWidth: !1, className: "self-start" }) : s ? /* @__PURE__ */ c("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] gap-x-3 gap-y-0.5", children: [
+          /* @__PURE__ */ e(
+            x,
+            {
+              text: s[0].title,
+              className: "col-start-1 dial-tiny-text text-secondary"
+            }
+          ),
+          /* @__PURE__ */ e(
+            x,
+            {
+              text: s[1].title,
+              className: "col-start-3 dial-tiny-text text-secondary"
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: l("col-start-1 min-w-0", t.value), children: s[0].value }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: l(
+                "col-start-2 flex items-center self-start",
+                t.compareDividerCell
+              ),
+              children: /* @__PURE__ */ e("div", { className: "h-4 w-px bg-controls-disable-accent" })
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: l("col-start-3 min-w-0", t.value), children: s[1].value })
         ] }) : /* @__PURE__ */ e("span", { className: t.value, children: p }),
-        !r && !n && t.showDescription && i != null && i !== !1 && /* @__PURE__ */ e("span", { className: "dial-tiny-text text-secondary", children: i })
+        !i && !n && t.showDescription && r != null && r !== !1 && /* @__PURE__ */ e("span", { className: "mt-auto dial-tiny-text text-secondary", children: r })
       ]
     }
   );
 };
 export {
-  _ as AnalyticsCard
+  T as AnalyticsCard
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.60",
-  "generatedAt": "2026-11-01T23:48:06.567Z",
+  "version": "0.16.0-dev.61",
+  "generatedAt": "2026-11-02T10:43:43.156Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -1571,7 +1571,7 @@
       "name": "AnalyticsCard",
       "category": "Components_2_0/Analytics",
       "generation": "2.0",
-      "description": "A simple analytics summary card that displays a single metric as a title,\na prominent value, and an optional description.\naliases: MetricCard|StatCard|KpiCard\nDesign system 2.0\n\nTwo visual variants are available via the  enum:\n- `Default` — `bg-layer-3`, large `dial-display2-text` value, supports a description.\n- `Compact` — denser `bg-layer-2` card with a `dial-body-semi-text` value and no\n  description (the `description` prop is ignored in this variant).\n\n**Compare mode** — pass `compareValues` to split the value area 50/50 between two\nmetrics, each with its own sub-title. Long sub-titles truncate to a single line and\nshow the full text in a tooltip. Pair with `delta` to show a change badge next\nto the card title, and `deltaUnit` for a suffix such as `\"s\"`.",
+      "description": "A simple analytics summary card that displays a single metric as a title,\na prominent value, and an optional description.\naliases: MetricCard|StatCard|KpiCard\nDesign system 2.0\n\nTwo visual variants are available via the  enum:\n- `Default` — `bg-layer-3`, large `dial-display2-text` value, supports a description.\n- `Compact` — denser `bg-layer-2` card with a `dial-body-semi-text` value and no\n  description (the `description` prop is ignored in this variant).\n\n**Compare mode** — pass `compareValues` to split the value area 50/50 between two\nmetrics, each with its own sub-title. Long sub-titles truncate to a single line and\nshow the full text in a tooltip. Pair with `delta` to show a change badge next\nto the card title, and `deltaUnit` for a suffix such as `\"s\"`. The divider is\ncentred on the first line of the two values, so dividers line up across cards\nwhose values differ in height.\n\n**Description placement** — when the card is stretched to the height of its row\n(a grid or flex row with equal-height items), the description sits at the\nbottom of the card with the free space between it and the value.",
       "props": [
         {
           "name": "title",