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

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

@@ -0,0 +1,212 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+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 "./utils.js";
+const u = 128, D = (s, i) => {
+  const l = L(s, i);
+  return s === i ? `scored ${l}` : `scored between ${l}`;
+}, _ = (s, i, l, o, c) => /* @__PURE__ */ n("div", { className: "flex flex-col gap-0.5", children: [
+  s && /* @__PURE__ */ t("strong", { children: s }),
+  /* @__PURE__ */ n("span", { children: [
+    i,
+    " out of ",
+    l,
+    " ",
+    o
+  ] }),
+  /* @__PURE__ */ t("span", { children: D(c.from, c.to) })
+] }), q = ({
+  title: s,
+  values: i,
+  colorMap: l = Y,
+  valueTitle: o = "values",
+  showCount: c,
+  isLoading: S,
+  className: I,
+  compareValues: h,
+  valueSetLabel: j,
+  compareValueSetLabel: B
+}) => {
+  const M = T(i, l), y = h ? T(h, l) : void 0, d = i.length, p = h?.length ?? 0, N = Math.max(d, p), b = R(N), m = O(N), v = (e) => e.map((r) => ({
+    ...r,
+    ratio: b > 0 ? r.count / b : 0
+  })), f = v(M), $ = y ? v(y) : void 0, C = (e, r, a, x) => {
+    if (e.count === 0)
+      return /* @__PURE__ */ t("div", { className: "flex h-full flex-1 items-end", "aria-hidden": "true", children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: "min-h-2 w-full rounded-xs",
+          style: { height: `${e.ratio * 100}%` }
+        }
+      ) });
+    const g = x ? {
+      backgroundImage: `repeating-linear-gradient(135deg, ${e.color} 0px, ${e.color} 1px, transparent 1px, transparent 4px)`,
+      borderColor: e.color
+    } : { backgroundColor: e.color };
+    return /* @__PURE__ */ t(
+      w,
+      {
+        placement: A.Bottom,
+        tooltip: r,
+        triggerClassName: "flex h-full flex-1 items-end",
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            role: "img",
+            "aria-label": a,
+            className: "flex min-h-2 w-full items-center justify-center rounded-xs border border-transparent",
+            style: { height: `${e.ratio * 100}%`, ...g },
+            children: c && /* @__PURE__ */ t("span", { className: "dial-tiny-semi-text text-primary", children: e.count })
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: H(
+        "flex flex-col gap-2",
+        I,
+        P.analyticsHistogram
+      ),
+      children: [
+        /* @__PURE__ */ t("span", { className: "dial-small-text text-primary", children: s }),
+        S ? /* @__PURE__ */ t(
+          "div",
+          {
+            className: "flex items-center justify-center",
+            style: { height: u },
+            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(
+            "div",
+            {
+              "data-histogram-y-axis": !0,
+              "aria-hidden": "true",
+              className: "relative",
+              style: { height: u },
+              children: m.map((e, r) => /* @__PURE__ */ t(
+                "span",
+                {
+                  className: "dial-tiny-text absolute right-0 whitespace-nowrap text-secondary",
+                  style: {
+                    top: `${r / (m.length - 1) * 100}%`,
+                    transform: "translateY(-50%)"
+                  },
+                  children: e
+                },
+                e
+              ))
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: "relative min-w-0", children: [
+            m.map((e, r) => /* @__PURE__ */ t(
+              "div",
+              {
+                "data-histogram-grid": !0,
+                className: "pointer-events-none absolute inset-x-0 border-t border-primary",
+                style: { top: `${r / (m.length - 1) * 100}%` }
+              },
+              e
+            )),
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: "relative flex items-end gap-1",
+                style: { height: u },
+                children: $ ? f.map((e, r) => {
+                  const a = $[r], x = `${e.count} out of ${d} ${o}`, g = `${a.count} out of ${p} ${o}`;
+                  return /* @__PURE__ */ n("div", { className: "flex h-full flex-1 items-end", children: [
+                    C(
+                      e,
+                      _(
+                        j,
+                        e.count,
+                        d,
+                        o,
+                        e
+                      ),
+                      x,
+                      !0
+                    ),
+                    C(
+                      a,
+                      _(
+                        B,
+                        a.count,
+                        p,
+                        o,
+                        a
+                      ),
+                      g,
+                      !1
+                    )
+                  ] }, r);
+                }) : f.map((e, r) => {
+                  const a = `${e.count} out of ${d} ${o}`;
+                  return e.count === 0 ? /* @__PURE__ */ t(
+                    "div",
+                    {
+                      className: "flex h-full flex-1 items-end",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ t(
+                        "div",
+                        {
+                          className: "min-h-2 w-full rounded-xs",
+                          style: { height: `${e.ratio * 100}%` }
+                        }
+                      )
+                    },
+                    r
+                  ) : /* @__PURE__ */ t(
+                    w,
+                    {
+                      placement: A.Bottom,
+                      tooltip: a,
+                      triggerClassName: "flex h-full flex-1 items-end",
+                      children: /* @__PURE__ */ t(
+                        "div",
+                        {
+                          role: "img",
+                          "aria-label": a,
+                          className: H(
+                            "flex min-h-2 w-full items-center justify-center rounded-xs border",
+                            "border-transparent"
+                          ),
+                          style: {
+                            height: `${e.ratio * 100}%`,
+                            backgroundColor: e.color
+                          },
+                          children: c && e.count > 0 && /* @__PURE__ */ t("span", { className: "dial-tiny-semi-text text-primary", children: e.count })
+                        }
+                      )
+                    },
+                    r
+                  );
+                })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t("div", {}),
+          /* @__PURE__ */ t("div", { "data-histogram-x-axis": !0, className: "flex gap-1", children: f.map((e, r) => /* @__PURE__ */ t(
+            "span",
+            {
+              className: "dial-caption-text flex-1 text-center text-secondary",
+              children: L(e.from, e.to)
+            },
+            r
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  q as AnalyticsHistogram
+};

package/dist/components/New/Avatar/Avatar.js

@@ -1,13 +1,13 @@
 import { jsx as a } from "react/jsx-runtime";
-import { useState as b } from "react";
-import { DIAL_KIT_CLASS as w } from "../../../constants/public-class-names.js";
+import { useState as w } from "react";
+import { DIAL_KIT_CLASS as I } from "../../../constants/public-class-names.js";
 import { AvatarShape as d } from "../../../types/avatar.js";
-import { pickAvatarColor as I, extractInitials as N } from "../../../utils/avatar.js";
+import { pickAvatarColor as N, extractInitials as j } from "../../../utils/avatar.js";
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
-const j = {
+const k = {
   [d.Circle]: "rounded-full",
   [d.Square]: "rounded-md"
-}, q = ({
+}, D = ({
   name: s,
   initials: c,
   src: r,
@@ -17,16 +17,17 @@ const j = {
   color: h,
   className: u,
   textClassName: l,
-  onImageError: S
+  imageClassName: S,
+  onImageError: p
 }) => {
-  const [p, v] = b(), g = !!r && p !== r, i = t !== "", m = (n) => e(
+  const [v, g] = w(), A = !!r && v !== r, i = t !== "", m = (n) => e(
     "inline-flex shrink-0 select-none items-center justify-center overflow-hidden",
-    j[f],
+    k[f],
     n,
     u,
-    w.avatar
+    I.avatar
   );
-  if (g)
+  if (A)
     return /* @__PURE__ */ a(
       "img",
       {
@@ -34,20 +35,20 @@ const j = {
         alt: t,
         width: o,
         height: o,
-        className: e(m(), "object-cover"),
+        className: e(m(S), "object-cover"),
         onError: (n) => {
-          v(r), S?.(n);
+          g(r), p?.(n);
         }
       }
     );
-  const { background: A, foreground: C } = h ?? I(s);
+  const { background: C, foreground: b } = h ?? N(s);
   return /* @__PURE__ */ a(
     "span",
     {
       role: i ? "img" : void 0,
       "aria-label": i ? t : void 0,
       "aria-hidden": i ? void 0 : !0,
-      className: m(e(A, C)),
+      className: m(e(C, b)),
       style: {
         width: o,
         height: o,
@@ -60,12 +61,12 @@ const j = {
             "leading-none",
             l ?? "font-semibold"
           ),
-          children: c ?? N(s)
+          children: c ?? j(s)
         }
       )
     }
   );
 };
 export {
-  q as Avatar
+  D as Avatar
 };

package/dist/components/New/BottomSheet/BottomSheet.js

@@ -1,86 +1,87 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { useFloating as k, useRole as A, useDismiss as O, useInteractions as w, FloatingPortal as z, FloatingOverlay as D, FloatingFocusManager as T } from "@floating-ui/react";
-import { IconArrowLeft as j } from "@tabler/icons-react";
-import { useId as B } from "react";
-import { CloseButton as E } from "../CloseButton/CloseButton.js";
-import { DIAL_KIT_ICON_STROKE as K } from "../constants/icon.js";
-import { GhostIconButton as P } from "../IconButton/IconButtonWrappers.js";
-import { useThemeScope as G } from "../ThemeScope/ThemeScope.js";
-import { DIAL_ICON_SIZE as R } from "../../../constants/icon.js";
-import { DIAL_KIT_CLASS as M } from "../../../constants/public-class-names.js";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useFloating as k, useRole as A, useDismiss as w, useInteractions as z, FloatingPortal as D, FloatingOverlay as T, FloatingFocusManager as j } from "@floating-ui/react";
+import { IconArrowLeft as B } from "@tabler/icons-react";
+import { useId as E } from "react";
+import { CloseButton as K } from "../CloseButton/CloseButton.js";
+import { DIAL_KIT_ICON_STROKE as P } from "../constants/icon.js";
+import { GhostIconButton as G } from "../IconButton/IconButtonWrappers.js";
+import { useThemeScope as R } from "../ThemeScope/ThemeScope.js";
+import { DIAL_ICON_SIZE as M } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as c } from "../../../constants/public-class-names.js";
 import { ElementSize as U } from "../../../types/size.js";
 import { mergeClasses as o } from "../../../utils/merge-classes.js";
 const te = ({
   open: i,
   onClose: a,
   title: t,
-  ariaLabel: c,
+  ariaLabel: d,
   onBack: s,
-  backAriaLabel: d = "Back",
-  closeAriaLabel: u = "Close",
-  closeOnOutsideClick: f = !0,
-  children: p,
-  className: h,
-  overlayClassName: b,
-  headerClassName: g,
-  style: x,
-  overlayStyle: I,
-  bodyClassName: S,
-  titleClassName: N,
-  portalId: v
+  backAriaLabel: u = "Back",
+  closeAriaLabel: f = "Close",
+  closeOnOutsideClick: p = !0,
+  children: h,
+  className: b,
+  overlayClassName: g,
+  headerClassName: x,
+  style: I,
+  overlayStyle: S,
+  bodyClassName: v,
+  titleClassName: y,
+  portalId: N
 }) => {
-  const y = G(), l = `bottom-sheet-title-${B()}`, { refs: n, context: r } = k({
+  const F = R(), l = `bottom-sheet-title-${E()}`, { refs: m, context: r } = k({
     open: i,
-    onOpenChange: (_) => {
-      _ || a();
+    onOpenChange: (O) => {
+      O || a();
     }
-  }), F = A(r, { role: "dialog" }), C = O(r, { outsidePress: f }), { getFloatingProps: L } = w([F, C]);
-  return i ? /* @__PURE__ */ e(z, { id: v, children: /* @__PURE__ */ e(
-    D,
+  }), C = A(r, { role: "dialog" }), L = w(r, { outsidePress: p }), { getFloatingProps: _ } = z([C, L]);
+  return i ? /* @__PURE__ */ e(D, { id: N, children: /* @__PURE__ */ e(
+    T,
     {
       lockScroll: !0,
-      style: I,
+      style: S,
       className: o(
         "z-popup flex items-end bg-backdrop",
-        y,
-        b
+        F,
+        g,
+        c.bottomSheetOverlay
       ),
-      children: /* @__PURE__ */ e(T, { context: r, initialFocus: n.floating, children: /* @__PURE__ */ m(
+      children: /* @__PURE__ */ e(j, { context: r, initialFocus: m.floating, children: /* @__PURE__ */ n(
         "div",
         {
-          ref: n.setFloating,
-          ...L(),
+          ref: m.setFloating,
+          ..._(),
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": t ? l : void 0,
-          "aria-label": t ? void 0 : c,
-          style: x,
+          "aria-label": t ? void 0 : d,
+          style: I,
           className: o(
-            "flex max-h-[85dvh] w-full flex-col rounded-t-lg bg-layer-raised outline-none",
+            "flex max-h-[85dvh] w-full flex-col rounded-t-lg bg-layer-raised outline-hidden",
             "animate-slideUp motion-reduce:animate-none",
-            h,
-            M.bottomSheet
+            b,
+            c.bottomSheet
           ),
           children: [
-            t && /* @__PURE__ */ m(
+            t && /* @__PURE__ */ n(
               "div",
               {
                 className: o(
                   "relative flex h-[60px] shrink-0 items-center justify-center border-b border-tertiary px-14",
-                  g
+                  x
                 ),
                 children: [
                   s && /* @__PURE__ */ e(
-                    P,
+                    G,
                     {
-                      "aria-label": d,
+                      "aria-label": u,
                       className: "absolute start-4",
                       onClick: s,
                       icon: /* @__PURE__ */ e(
-                        j,
+                        B,
                         {
-                          size: R.LG,
-                          stroke: K,
+                          size: M.LG,
+                          stroke: P,
                           className: "rtl:-scale-x-100",
                           "aria-hidden": "true"
                         }
@@ -93,15 +94,15 @@ const te = ({
                       id: l,
                       className: o(
                         "min-w-0 truncate text-primary",
-                        N ?? "dial-body-semi-text"
+                        y ?? "dial-body-semi-text"
                       ),
                       children: t
                     }
                   ),
                   /* @__PURE__ */ e(
-                    E,
+                    K,
                     {
-                      ariaLabel: u,
+                      ariaLabel: f,
                       onClose: a,
                       size: U.Standard,
                       className: "absolute end-4"
@@ -113,8 +114,8 @@ const te = ({
             /* @__PURE__ */ e(
               "div",
               {
-                className: o("min-h-0 overflow-y-auto", S),
-                children: p
+                className: o("min-h-0 overflow-y-auto", v),
+                children: h
               }
             )
           ]

package/dist/components/New/Breadcrumbs/constants.js

@@ -13,7 +13,7 @@ const c = "w-full overflow-hidden", f = "flex min-w-0 flex-nowrap items-center g
   first: "shrink-0",
   middle: "min-w-0 max-w-[30%] shrink",
   last: "min-w-0 max-w-[51%] shrink"
-}, p = "flex min-w-0 flex-1 items-center gap-1 rounded-sm transition-colors", C = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", S = "cursor-default text-primary", h = "cursor-default text-secondary", I = "inline-flex flex-none items-center leading-none text-secondary", g = "dial-kit-minimum-target flex shrink-0 items-center rounded-sm text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", w = 3, v = 4, _ = /* @__PURE__ */ t(
+}, p = "flex min-w-0 flex-1 items-center gap-1 rounded-xs transition-colors", C = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", S = "cursor-default text-primary", h = "cursor-default text-secondary", I = "inline-flex flex-none items-center leading-none text-secondary", g = "dial-kit-minimum-target flex shrink-0 items-center rounded-xs text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", w = 3, v = 4, _ = /* @__PURE__ */ t(
   s,
   {
     size: i.SM,