@epam/ai-dial-ui-kit 0.16.0-dev.5 → 0.16.0-dev.51

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

@@ -1,142 +0,0 @@
-import { jsx as t, jsxs as f, Fragment as J } from "react/jsx-runtime";
-import { Fragment as Q } from "react";
-import { DialAccordion as R } from "../../Accordion/Accordion.js";
-import { DialAnalyticsBar as b } from "../Bar/Bar.js";
-import { DialLoader as U } from "../../Loader/Loader.js";
-import { DialTooltip as g } from "../../Tooltip/Tooltip.js";
-import { mergeClasses as a } from "../../../utils/merge-classes.js";
-const k = ({
-  title: x,
-  titleTooltip: h,
-  description: S,
-  data: i,
-  compareData: r,
-  compareLabels: m,
-  maxValue: p,
-  colorMap: u,
-  defaultExpanded: E = !0,
-  nonCollapsible: G,
-  isLoading: K,
-  onBarClick: o,
-  inline: c,
-  barTitleClassName: N,
-  barValueClassName: P,
-  barClassName: v,
-  barDescriptions: C,
-  className: T
-}) => {
-  const W = Object.entries(i), q = c ? a("text-secondary", N) : N, j = m ? "dial-tiny-text text-secondary" : void 0, z = h ? /* @__PURE__ */ t(g, { tooltip: h, children: x }) : x, H = r ? [.../* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(r)])] : [], y = "cursor-pointer rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary", F = "group flex flex-col gap-1.5", I = a(
-    "flex flex-col gap-1.5 pl-2",
-    o && "group-hover:bg-accent-primary-alpha group-focus-visible:bg-accent-primary-alpha",
-    v
-  );
-  return /* @__PURE__ */ t(
-    R,
-    {
-      title: z,
-      description: S,
-      defaultExpanded: E,
-      nonCollapsible: G,
-      className: T,
-      children: /* @__PURE__ */ t(
-        "div",
-        {
-          className: a(
-            "flex flex-col",
-            r ? "gap-4" : c ? "gap-2" : "gap-3"
-          ),
-          children: K ? /* @__PURE__ */ t(U, { fullWidth: !1, className: "self-center" }) : r ? H.map((e) => {
-            const l = e in i ? i[e] : null, n = e in r ? r[e] : null, s = typeof l == "number" && typeof n == "number" ? parseFloat((n - l).toFixed(3)) : null, L = s != null && s !== 0, A = L && s > 0, D = L ? A ? `+${s}` : String(s) : null, O = C?.[e], $ = /* @__PURE__ */ t("span", { className: "dial-small-text text-secondary", children: e }), w = /* @__PURE__ */ f(J, { children: [
-              /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
-                O ? /* @__PURE__ */ t(g, { tooltip: O, children: $ }) : $,
-                D != null && /* @__PURE__ */ t(
-                  "span",
-                  {
-                    className: a(
-                      "dial-tiny-semi-text rounded-[120px] border border-transparent px-2",
-                      A ? "bg-success text-success" : "bg-error text-error"
-                    ),
-                    children: D
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ f("div", { className: I, children: [
-                /* @__PURE__ */ t(
-                  b,
-                  {
-                    title: m?.[0],
-                    value: l,
-                    maxValue: p,
-                    colorMap: u,
-                    inline: c,
-                    titleClassName: j,
-                    ariaLabel: e
-                  }
-                ),
-                /* @__PURE__ */ t(
-                  b,
-                  {
-                    title: m?.[1],
-                    value: n,
-                    maxValue: p,
-                    colorMap: u,
-                    inline: c,
-                    titleClassName: j,
-                    ariaLabel: `${e} compare`
-                  }
-                )
-              ] })
-            ] });
-            return o ? /* @__PURE__ */ t(
-              "button",
-              {
-                type: "button",
-                onClick: () => o(e, l),
-                className: a(
-                  F,
-                  y
-                ),
-                children: w
-              },
-              e
-            ) : /* @__PURE__ */ t("div", { className: F, children: w }, e);
-          }) : W.map(([e, l]) => {
-            const n = /* @__PURE__ */ t(
-              b,
-              {
-                title: e,
-                value: l,
-                maxValue: p,
-                colorMap: u,
-                inline: c,
-                titleClassName: q,
-                valueClassName: P,
-                className: v
-              }
-            ), d = o ? /* @__PURE__ */ t(
-              "button",
-              {
-                type: "button",
-                onClick: () => o(e, l),
-                className: y,
-                children: n
-              }
-            ) : n, s = C?.[e];
-            return s ? /* @__PURE__ */ t(
-              g,
-              {
-                tooltip: s,
-                triggerClassName: "flex flex-col",
-                children: d
-              },
-              e
-            ) : /* @__PURE__ */ t(Q, { children: d }, e);
-          })
-        }
-      )
-    }
-  );
-};
-export {
-  k as DialAnalyticsBarGroup
-};

package/dist/components/Analytics/ErrorTag/ErrorTag.js

@@ -1,19 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { DialTag as t } from "../../Tag/Tag.js";
-import { mergeClasses as a } from "../../../utils/merge-classes.js";
-const l = ({
-  label: r = "Error",
-  className: o
-}) => /* @__PURE__ */ e(
-  t,
-  {
-    label: r,
-    className: a(
-      "dial-tiny-semi-text cursor-default rounded-[120px] border-transparent bg-error text-error",
-      o
-    )
-  }
-);
-export {
-  l as DialAnalyticsErrorTag
-};

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

@@ -1,200 +0,0 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { DEFAULT_ANALYTICS_BAR_COLOR_MAP as D } from "../Bar/utils.js";
-import { DialLoader as I } from "../../Loader/Loader.js";
-import { DialTooltip as w } from "../../Tooltip/Tooltip.js";
-import { mergeClasses as H } from "../../../utils/merge-classes.js";
-import { buildHistogramColumns as A, formatHistogramColumnLabel as _, getHistogramYTicks as S, getHistogramYMax as B } from "./utils.js";
-const u = 128, O = (s, i) => {
-  const l = _(s, i);
-  return s === i ? `scored ${l}` : `scored between ${l}`;
-}, T = (s, i, l, o, d) => /* @__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: O(d.from, d.to) })
-] }), W = ({
-  title: s,
-  values: i,
-  colorMap: l = D,
-  valueTitle: o = "values",
-  showCount: d,
-  isLoading: L,
-  className: j,
-  compareValues: h,
-  valueSetLabel: M,
-  compareValueSetLabel: Y
-}) => {
-  const k = A(i, l), y = h ? A(h, l) : void 0, c = i.length, p = h?.length ?? 0, N = Math.max(c, p), b = B(N), m = S(N), v = (e) => e.map((r) => ({
-    ...r,
-    ratio: b > 0 ? r.count / b : 0
-  })), f = v(k), $ = y ? v(y) : void 0, C = (e, r, a, g) => {
-    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-sm",
-          style: { height: `${e.ratio * 100}%` }
-        }
-      ) });
-    const x = g ? {
-      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: "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-sm border border-transparent",
-            style: { height: `${e.ratio * 100}%`, ...x },
-            children: d && /* @__PURE__ */ t("span", { className: "dial-tiny-semi-text text-primary", children: e.count })
-          }
-        )
-      }
-    );
-  };
-  return /* @__PURE__ */ n("div", { className: H("flex flex-col gap-2", j), children: [
-    /* @__PURE__ */ t("span", { className: "dial-small-text text-primary", children: s }),
-    L ? /* @__PURE__ */ t(
-      "div",
-      {
-        className: "flex items-center justify-center",
-        style: { height: u },
-        children: /* @__PURE__ */ t(I, { 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], g = `${e.count} out of ${c} ${o}`, x = `${a.count} out of ${p} ${o}`;
-              return /* @__PURE__ */ n("div", { className: "flex h-full flex-1 items-end", children: [
-                C(
-                  e,
-                  T(
-                    M,
-                    e.count,
-                    c,
-                    o,
-                    e
-                  ),
-                  g,
-                  !0
-                ),
-                C(
-                  a,
-                  T(
-                    Y,
-                    a.count,
-                    p,
-                    o,
-                    a
-                  ),
-                  x,
-                  !1
-                )
-              ] }, r);
-            }) : f.map((e, r) => {
-              const a = `${e.count} out of ${c} ${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-sm",
-                      style: { height: `${e.ratio * 100}%` }
-                    }
-                  )
-                },
-                r
-              ) : /* @__PURE__ */ t(
-                w,
-                {
-                  placement: "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-sm border",
-                        "border-transparent"
-                      ),
-                      style: {
-                        height: `${e.ratio * 100}%`,
-                        backgroundColor: e.color
-                      },
-                      children: d && 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: _(e.from, e.to)
-        },
-        r
-      )) })
-    ] })
-  ] });
-};
-export {
-  W as DialAnalyticsHistogram
-};

package/dist/components/AutocompleteInput/AutocompleteInputValue.js

@@ -1,21 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { DialTagInput as i } from "../TagInput/TagInput.js";
-const u = ({
-  selectedItems: a,
-  placeholder: t,
-  collapseTagOverflow: r = !1,
-  listClassName: e,
-  listElementClassName: l
-}) => a?.length ? /* @__PURE__ */ n(
-  i,
-  {
-    readOnly: !0,
-    initialTags: a,
-    collapseTagOverflow: r,
-    containerClassName: e,
-    tagClassName: l
-  }
-) : t ? /* @__PURE__ */ n("span", { className: "text-secondary", children: t }) : null;
-export {
-  u as DialAutocompleteInputValue
-};

package/dist/components/ButtonDropdown/ButtonDropdown.js

@@ -1,33 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useState as s, useMemo as u } from "react";
-import { DialButton as c } from "../Button/Button.js";
-import { DialDropdown as d } from "../Dropdown/Dropdown.js";
-import { ButtonAppearance as f, ButtonVariant as D } from "../../types/button.js";
-import { buttonChevronUp as l, buttonChevronDown as h } from "./constants.js";
-const x = ({
-  variant: n,
-  appearance: t,
-  items: e,
-  ...i
-}) => {
-  const [r, p] = s(!1), a = u(() => r ? l : h, [r]);
-  return /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
-    d,
-    {
-      items: e,
-      onOpenChange: (m) => p(m),
-      children: /* @__PURE__ */ o(
-        c,
-        {
-          ...i,
-          iconAfter: a,
-          variant: n || D.Primary,
-          appearance: t || f.Solid
-        }
-      )
-    }
-  ) });
-};
-export {
-  x as DialButtonDropdown
-};

package/dist/components/ButtonDropdown/constants.js

@@ -1,8 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { DIAL_ICON_SIZE as n } from "../../constants/icon.js";
-import { IconChevronUp as r, IconChevronDown as t } from "@tabler/icons-react";
-const i = /* @__PURE__ */ o(t, { size: n.SM }), s = /* @__PURE__ */ o(r, { size: n.SM });
-export {
-  i as buttonChevronDown,
-  s as buttonChevronUp
-};

package/dist/components/Checkbox/Checkbox.js

@@ -1,64 +0,0 @@
-import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { IconMinus as y, IconCheck as N } from "@tabler/icons-react";
-import m from "classnames";
-import { useCallback as C } from "react";
-import { BASE_ICON_PROPS as l } from "../../constants/icon.js";
-import { DialEllipsisTooltip as k } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { ariaDescription as g } from "./constants.js";
-const S = ({
-  label: r,
-  id: e,
-  checked: o,
-  indeterminate: i,
-  disabled: s,
-  ariaLabel: f,
-  onChange: t,
-  className: p,
-  ...a
-}) => {
-  const b = C(
-    (u) => {
-      t?.(u.target.checked, e);
-    },
-    [t, e]
-  ), x = m(
-    "flex flex-row items-center cursor-pointer text-accent-primary small-medium min-w-0",
-    `${o || i ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded'}`,
-    s ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : "",
-    p
-  ), c = m(
-    "border rounded",
-    s ? "bg-layer-4 border-icon-secondary" : ""
-  ), d = () => i ? /* @__PURE__ */ n(y, { className: c, ...l }) : o ? /* @__PURE__ */ n(N, { className: c, ...l }) : null;
-  return /* @__PURE__ */ h(
-    "label",
-    {
-      ...a,
-      className: x,
-      htmlFor: e,
-      "aria-description": a["aria-description"] || g,
-      children: [
-        d(),
-        r && (typeof r == "string" ? /* @__PURE__ */ n(k, { text: r, className: "ml-2 text-primary" }) : r),
-        /* @__PURE__ */ n(
-          "input",
-          {
-            type: "checkbox",
-            role: "checkbox",
-            name: e,
-            onChange: b,
-            id: e,
-            checked: o,
-            "aria-checked": i ? "mixed" : o,
-            "aria-disabled": s || void 0,
-            "aria-label": r ? void 0 : f,
-            className: "invisible size-0"
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  S as DialCheckbox
-};

package/dist/components/Checkbox/constants.js

@@ -1,4 +0,0 @@
-const c = "checkbox-container";
-export {
-  c as ariaDescription
-};

package/dist/components/CollapsibleSidebar/CollapsibleSidebar.js

@@ -1,84 +0,0 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { useState as d, useMemo as z, useEffect as E } from "react";
-import { mergeClasses as s } from "../../utils/merge-classes.js";
-import { IconChevronsLeft as S, IconChevronsRight as W } from "@tabler/icons-react";
-import { DialIconButton as k } from "../IconButton/IconButton.js";
-import { ElementSize as L } from "../../types/size.js";
-const l = 48, V = ({
-  containerClassName: p,
-  children: b,
-  width: t = 280,
-  title: u,
-  iconSize: c = 24,
-  iconStroke: m = 1.5,
-  titleClassName: x,
-  additionalButtons: h,
-  isOpened: r,
-  onToggle: y
-}) => {
-  const [C, i] = d(t), [v, g] = d(!0), n = z(() => typeof r == "boolean", [r]), e = n ? r : v;
-  E(() => {
-    n && i(r ? t : l);
-  }, [n, r, t]);
-  const j = s([
-    "transform rotate-180 [writing-mode:tb-rl] py-4 px-3",
-    e && "hidden",
-    x
-  ]), I = s([
-    "flex flex-row gap-2 cursor-pointer text-secondary py-2 items-center",
-    e ? "justify-end px-4" : "justify-center"
-  ]), N = (D) => {
-    const a = !e;
-    if (n) {
-      i(a ? t : l), y?.(a, D);
-      return;
-    }
-    i(a ? t : l), g(a);
-  };
-  return /* @__PURE__ */ f(
-    "div",
-    {
-      className: s([
-        "rounded flex flex-col justify-between",
-        p
-      ]),
-      style: { width: `${C}px` },
-      "aria-label": "collapsible-sidebar",
-      children: [
-        /* @__PURE__ */ o(
-          "div",
-          {
-            className: s([
-              "flex-1 p-4 min-h-0 overflow-auto",
-              !e && "hidden"
-            ]),
-            children: b
-          }
-        ),
-        /* @__PURE__ */ o("div", { className: j, children: u }),
-        /* @__PURE__ */ f(
-          "div",
-          {
-            className: s("border-t border-tertiary h-12", I),
-            children: [
-              e && h,
-              /* @__PURE__ */ o(
-                k,
-                {
-                  className: "hover:text-accent-primary",
-                  onClick: N,
-                  "aria-label": "sidebar-state",
-                  size: L.Small,
-                  icon: e ? /* @__PURE__ */ o(S, { size: c, stroke: m }) : /* @__PURE__ */ o(W, { size: c, stroke: m })
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  V as DialCollapsibleSidebar
-};

package/dist/components/ConfirmationPopup/ConfirmationPopup.js

@@ -1,75 +0,0 @@
-import { jsxs as k, jsx as a } from "react/jsx-runtime";
-import s from "classnames";
-import { useCallback as j } from "react";
-import { DialButton as z } from "../Button/Button.js";
-import { DialPopup as S } from "../Popup/Popup.js";
-import { actionsBaseClassName as y, defaultCancelLabel as F, defaultConfirmLabel as I, variantConfig as t, descriptionBaseClassName as V } from "./constants.js";
-import { DialLoader as q } from "../Loader/Loader.js";
-import { ConfirmationPopupVariant as w } from "../../types/confirmation-popup.js";
-import { PopupSize as A } from "../../types/popup.js";
-import { DialNeutralButton as E } from "../Button/ButtonWrappers.js";
-const U = ({
-  header: p,
-  description: e,
-  descriptionClassName: m,
-  open: u = !1,
-  confirmLabel: c = I,
-  cancelLabel: C = F,
-  isLoading: r = !1,
-  disableConfirmButton: d = !1,
-  className: N,
-  confirmClassName: b,
-  onClose: i,
-  onConfirm: v,
-  onCancel: n,
-  children: o,
-  dividers: x = !1,
-  variant: l = w.Info,
-  size: D = A.Sm,
-  footer: f,
-  hideClose: h
-}) => {
-  const B = r ? null : /* @__PURE__ */ k("div", { className: y, children: [
-    /* @__PURE__ */ a(
-      E,
-      {
-        label: C,
-        onClick: () => n ? n() : i?.()
-      }
-    ),
-    /* @__PURE__ */ a(
-      z,
-      {
-        variant: t[l].confirm?.variant,
-        appearance: t[l].confirm?.appearance,
-        className: b,
-        label: c,
-        disabled: d,
-        onClick: () => v()
-      }
-    )
-  ] }), P = j(() => r ? /* @__PURE__ */ a("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ a(q, { size: 40 }) }) : o ?? (e ? /* @__PURE__ */ a(
-    "div",
-    {
-      className: s(V, m),
-      children: e
-    }
-  ) : null), [o, e, r, m]);
-  return /* @__PURE__ */ a(
-    S,
-    {
-      open: u,
-      header: p,
-      className: s(t[l].container, N),
-      dividers: x,
-      onClose: () => i?.(),
-      footer: f ?? B,
-      size: D,
-      hideClose: h ?? (!r && f === void 0),
-      children: P()
-    }
-  );
-};
-export {
-  U as DialConfirmationPopup
-};

package/dist/components/ConfirmationPopup/constants.js

@@ -1,32 +0,0 @@
-import { ButtonAppearance as a, ButtonVariant as n } from "../../types/button.js";
-import { ConfirmationPopupVariant as e } from "../../types/confirmation-popup.js";
-const o = "flex justify-end gap-2 px-6 py-4 border-t border-tertiary", i = "text-secondary dial-small-text px-6 pb-4", p = "Cancel", c = "Ok", l = {
-  [e.Info]: {
-    confirm: {
-      variant: n.Primary,
-      appearance: a.Solid
-    },
-    cancel: {
-      variant: n.Neutral,
-      appearance: a.Outlined
-    }
-  },
-  [e.Danger]: {
-    container: "dial-danger-popup",
-    confirm: {
-      variant: n.Danger,
-      appearance: a.Solid
-    },
-    cancel: {
-      variant: n.Neutral,
-      appearance: a.Outlined
-    }
-  }
-};
-export {
-  o as actionsBaseClassName,
-  p as defaultCancelLabel,
-  c as defaultConfirmLabel,
-  i as descriptionBaseClassName,
-  l as variantConfig
-};