@epam/ai-dial-ui-kit 0.14.0-dev.9 → 0.14.1

package/dist/components/New/ToggleIconButton/ToggleIconButton.js

@@ -0,0 +1,54 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useCallback as f } from "react";
+import { ButtonAppearance as b, ButtonVariant as B } from "../../../types/button.js";
+import { ElementSize as C } from "../../../types/size.js";
+import { mergeClasses as h } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as v } from "../../../utils/accessible-name.js";
+import { IconButton as x } from "../IconButton/IconButton.js";
+import { Tooltip as g } from "../Tooltip/Tooltip.js";
+const E = ({
+  icon: o,
+  selectedIcon: l,
+  isSelected: r = !1,
+  onToggle: t,
+  onClick: m,
+  tooltipProps: a,
+  size: s = C.Small,
+  className: c,
+  ...n
+}) => {
+  const p = f(
+    (u) => {
+      m?.(u), t?.(!r);
+    },
+    [m, t, r]
+  ), e = /* @__PURE__ */ i(
+    x,
+    {
+      ...n,
+      size: s,
+      variant: B.Primary,
+      appearance: b.Ghost,
+      icon: r ? l ?? o : o,
+      "aria-pressed": r,
+      "aria-label": v(
+        n["aria-label"],
+        a?.tooltip
+      ),
+      onClick: p,
+      className: h(
+        "!rounded",
+        // The glyph stays 16px at every size tier — only the tint square grows.
+        // CSS outranks the width/height attributes Tabler renders, so callers
+        // need not pass a size and the two icons can never disagree.
+        "[&_svg]:size-4",
+        r && "!text-accent",
+        c
+      )
+    }
+  );
+  return a ? /* @__PURE__ */ i(g, { asChild: !0, ...a, children: e }) : e;
+};
+export {
+  E as ToggleIconButton
+};

package/dist/components/New/Tooltip/Tooltip.js

@@ -0,0 +1,19 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { TooltipContainer as a } from "./TooltipContainer.js";
+import { TooltipContent as n } from "./TooltipContent.js";
+import { TooltipTrigger as T } from "./TooltipTrigger.js";
+const g = ({
+  hideTooltip: t = !1,
+  tooltip: o,
+  children: i,
+  asChild: s = !1,
+  triggerClassName: e,
+  contentClassName: l,
+  ...m
+}) => /* @__PURE__ */ p(a, { ...m, children: [
+  /* @__PURE__ */ r(T, { asChild: s, className: e, children: i }),
+  !t && !!o && /* @__PURE__ */ r(n, { className: l, children: o })
+] });
+export {
+  g as Tooltip
+};

package/dist/components/New/Tooltip/TooltipContainer.js

@@ -0,0 +1,12 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useTooltip as e, TooltipContext as p } from "./TooltipContext.js";
+const m = ({
+  children: o,
+  ...t
+}) => {
+  const r = e(t);
+  return /* @__PURE__ */ i(p.Provider, { value: r, children: o });
+};
+export {
+  m as TooltipContainer
+};

package/dist/components/New/Tooltip/TooltipContent.js

@@ -0,0 +1,45 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { useMergeRefs as i, FloatingPortal as c, FloatingArrow as p } from "@floating-ui/react";
+import f from "classnames";
+import { useRef as g } from "react";
+import { useThemeScope as u } from "../ThemeScope/ThemeScope.js";
+import { useHasHover as x } from "../../../hooks/use-has-hover.js";
+import { arrowClassName as d, tooltipClassName as h } from "./constants.js";
+import { useTooltipContext as N } from "./TooltipContext.js";
+const T = ({
+  style: r,
+  ...t
+}) => {
+  const o = N(), s = x(), l = u(), a = g(null), n = i([o.refs.setFloating, a]);
+  return !o.open || !s ? null : /* @__PURE__ */ e(c, { id: "tooltip-portal", children: /* @__PURE__ */ m(
+    "div",
+    {
+      ref: n,
+      "data-placement": o.placement,
+      style: {
+        ...o.floatingStyles,
+        ...r
+      },
+      ...o.getFloatingProps(t),
+      className: f(
+        h,
+        l,
+        o.getFloatingProps(t).className
+      ),
+      children: [
+        t.children,
+        /* @__PURE__ */ e(
+          p,
+          {
+            ref: o.arrowRef,
+            context: o.context,
+            className: d
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  T as TooltipContent
+};

package/dist/components/New/Tooltip/TooltipContext.js

@@ -0,0 +1,67 @@
+import { useFloating as E, autoUpdate as R, offset as b, flip as C, shift as T, arrow as g, useHover as v, useFocus as A, useDismiss as H, useRole as I, useInteractions as _ } from "@floating-ui/react";
+import { useState as D, useRef as P, useEffect as y, useMemo as F, createContext as G, useContext as M } from "react";
+import { TooltipPlacement as S } from "../../../types/tooltip.js";
+import { ARROW_HEIGHT as U, ARROW_GAP as W, HOVER_OPEN_DELAY as k } from "./constants.js";
+const B = G(null), j = () => {
+  const n = M(B);
+  if (n == null)
+    throw new Error(
+      "Tooltip components must be wrapped in <TooltipContainer />"
+    );
+  return n;
+}, q = ({
+  initialOpen: n = !1,
+  placement: u = S.Bottom,
+  isTriggerClickable: a = !1,
+  open: s,
+  onOpenChange: f
+} = {}) => {
+  const [p, m] = D(n), r = P(null), t = s ?? p, o = f ?? m, e = E({
+    placement: u,
+    open: t,
+    onOpenChange: o,
+    whileElementsMounted: R,
+    middleware: [
+      b(U + W),
+      C({
+        fallbackAxisSideDirection: "start",
+        padding: 5
+      }),
+      T({ padding: 5 }),
+      g({ element: r })
+    ]
+  }), d = v(e.context, {
+    move: !1,
+    enabled: s == null,
+    mouseOnly: a,
+    delay: { open: k, close: 0 }
+  }), x = A(e.context, {
+    enabled: s == null
+  }), O = H(e.context), h = I(e.context, { role: "tooltip" }), l = _([d, x, O, h]);
+  return y(() => {
+    if (!t) return;
+    const c = e.refs.reference.current;
+    if (!(c instanceof Element)) return;
+    const i = new IntersectionObserver(
+      ([w]) => {
+        w.isIntersecting || o(!1);
+      },
+      { root: null, threshold: 0 }
+    );
+    return i.observe(c), () => i.disconnect();
+  }, [t, e.refs.reference, o]), F(
+    () => ({
+      open: t,
+      setOpen: o,
+      arrowRef: r,
+      ...l,
+      ...e
+    }),
+    [t, o, l, e]
+  );
+};
+export {
+  B as TooltipContext,
+  q as useTooltip,
+  j as useTooltipContext
+};

package/dist/components/New/Tooltip/TooltipTrigger.js

@@ -0,0 +1,45 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useMergeRefs as n } from "@floating-ui/react";
+import { isValidElement as c, cloneElement as i } from "react";
+import { mergeClasses as p } from "../../../utils/merge-classes.js";
+import { useTooltipContext as g } from "./TooltipContext.js";
+const P = ({
+  children: e,
+  asChild: f = !1,
+  ...s
+}) => {
+  const t = g(), o = f && c(e), r = o ? e.props?.ref : null, m = n([
+    t.refs.setReference,
+    ...r ? [r] : []
+  ]);
+  if (o) {
+    const a = e.props;
+    return i(
+      e,
+      t.getReferenceProps({
+        ...a,
+        ...s,
+        /*
+          `Tooltip` always forwards `triggerClassName`, so `className` is a
+          present-but-undefined key here even when the caller passes nothing —
+          spreading it over the child would wipe every class the child owns.
+          Merge the two instead of letting the trigger replace the child.
+        */
+        className: p(a.className, s.className) || void 0,
+        ref: m
+      })
+    );
+  }
+  return /* @__PURE__ */ l(
+    "span",
+    {
+      ref: m,
+      ...t.getReferenceProps(s),
+      className: s.className ?? "text-start",
+      children: e
+    }
+  );
+};
+export {
+  P as TooltipTrigger
+};

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

@@ -0,0 +1,8 @@
+const t = 7, o = 2, e = 500, r = "fill-control-inverted", s = "z-[55] max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";
+export {
+  o as ARROW_GAP,
+  t as ARROW_HEIGHT,
+  e as HOVER_OPEN_DELAY,
+  r as arrowClassName,
+  s as tooltipClassName
+};

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

@@ -0,0 +1,4 @@
+const I = 1.5;
+export {
+  I as DIAL_KIT_ICON_STROKE
+};

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

@@ -0,0 +1,27 @@
+import { mergeClasses as e } from "../../../utils/merge-classes.js";
+const a = "rounded-xl bg-layer-raised p-1 shadow-md", l = e(
+  a,
+  "w-max"
+), r = e(
+  "flex w-full cursor-pointer items-center gap-2 px-3 h-[40px] rounded-lg",
+  "dial-small-text text-primary truncate",
+  // Hover sits one step up the accent-alpha ramp from the selected tint, so a
+  // hovered row reads as hovered whether or not it is also selected.
+  "hover:bg-control-accent-alpha-hover",
+  "focus-visible:outline focus-visible:outline-focus"
+), t = "bg-control-accent-alpha", s = e(
+  t,
+  "text-accent"
+), n = e(
+  "cursor-not-allowed text-control-disable-primary",
+  "bg-transparent hover:bg-transparent"
+), c = 4;
+export {
+  c as overlayGap,
+  r as overlayItemClassName,
+  n as overlayItemDisabledClassName,
+  s as overlayItemHighlightClassName,
+  t as overlayItemSelectedClassName,
+  l as overlaySubMenuClassName,
+  a as overlaySurfaceClassName
+};

package/dist/components/NoDataContent/NoDataContent.js

@@ -0,0 +1,45 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { IconClipboardX as m } from "@tabler/icons-react";
+import { mergeClasses as t } from "../../utils/merge-classes.js";
+const x = ({
+  icon: l,
+  title: r,
+  description: a,
+  containerClassName: s,
+  titleClassName: i,
+  descriptionClassName: o
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: t(
+      "h-full w-full flex flex-col items-center justify-center text-secondary",
+      s
+    ),
+    "aria-label": "no-data-container",
+    children: [
+      l || /* @__PURE__ */ e(m, { width: 60, height: 60, stroke: 0.5 }),
+      /* @__PURE__ */ e(
+        "span",
+        {
+          className: t(
+            "dial-small-text mt-2 text-primary",
+            i
+          ),
+          "aria-label": "no-results-title",
+          children: r
+        }
+      ),
+      a && /* @__PURE__ */ e(
+        "span",
+        {
+          className: t("mt-1 text-primary", o),
+          "aria-label": "no-results-description",
+          children: a
+        }
+      )
+    ]
+  }
+);
+export {
+  x as DialNoDataContent
+};

package/dist/components/Notification/Notification.js

@@ -0,0 +1,67 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { IconX as N } from "@tabler/icons-react";
+import { useMemo as h } from "react";
+import { DialIcon as I } from "../Icon/Icon.js";
+import { DIAL_ICON_SIZE as v } from "../../constants/icon.js";
+import { NotificationVariant as u } from "../../types/notification.js";
+import { mergeClasses as r } from "../../utils/merge-classes.js";
+import { DialGhostIconButton as C } from "../IconButton/IconButtonWrappers.js";
+import { variantIcons as D, notificationVariantClassNameMap as g, alertBaseClassName as z } from "./constants.js";
+const A = ({
+  variant: a = u.Info,
+  title: l,
+  message: o,
+  className: m,
+  iconSize: s = 24,
+  iconStroke: t = 2,
+  closable: c = !1,
+  onClose: n,
+  children: f,
+  textClassName: d = "flex-col",
+  ...p
+}) => {
+  const x = h(() => D({ size: s, stroke: t })[a], [a, s, t]);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ...p,
+      role: "alert",
+      className: r(
+        z,
+        g[a],
+        m
+      ),
+      children: [
+        /* @__PURE__ */ e("div", { className: "flex items-start gap-3 flex-1 min-w-0", children: [
+          /* @__PURE__ */ i(I, { icon: x }),
+          l ? /* @__PURE__ */ e(
+            "div",
+            {
+              className: r(
+                "flex flex-col gap-1 text-primary",
+                d
+              ),
+              children: [
+                /* @__PURE__ */ i("div", { className: "dial-small-semi-text", children: l }),
+                /* @__PURE__ */ i("div", { className: "dial-small-text", children: o })
+              ]
+            }
+          ) : /* @__PURE__ */ i("div", { className: "dial-small-text text-primary", children: o })
+        ] }),
+        f,
+        c && /* @__PURE__ */ i("div", { className: "relative size-[40px]", children: /* @__PURE__ */ i(
+          C,
+          {
+            className: "absolute top-0 right-0 size-auto",
+            "aria-label": "Close notification",
+            icon: /* @__PURE__ */ i(N, { size: v.SM }),
+            onClick: n
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  A as DialNotification
+};

package/dist/components/Notification/constants.js

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Spinner as n } from "../Spinner/Spinner.js";
+import { NotificationVariant as i } from "../../types/notification.js";
+import { IconCheck as o, IconCircleCheckFilled as s, IconAlertTriangleFilled as t, IconAlertCircleFilled as a, IconInfoCircleFilled as c } from "@tabler/icons-react";
+const b = (e) => ({
+  info: /* @__PURE__ */ r(c, { size: e.size }),
+  error: /* @__PURE__ */ r(a, { size: e.size }),
+  warning: /* @__PURE__ */ r(t, { size: e.size }),
+  success: /* @__PURE__ */ r(s, { size: e.size }),
+  loading: /* @__PURE__ */ r(n, { size: e.size }),
+  general: /* @__PURE__ */ r(o, { size: e.size, stroke: e.stroke })
+}), m = {
+  [i.Info]: "bg-info border-info text-info",
+  [i.Success]: "bg-success border-success text-success",
+  [i.Warning]: "bg-warning border-warning text-warning",
+  [i.Error]: "bg-error border-error text-error",
+  [i.Loading]: "bg-info border-info text-info",
+  [i.General]: "bg-sunken border-secondary text-primary"
+}, z = "items-center justify-between relative gap-3 p-3 border border-solid dial-small-text-150 rounded shadow flex";
+export {
+  z as alertBaseClassName,
+  m as notificationVariantClassNameMap,
+  b as variantIcons
+};

package/dist/components/NumberInput/NumberInput.js

@@ -0,0 +1,41 @@
+import { jsx as f } from "react/jsx-runtime";
+import { DialInput as m } from "../Input/Input.js";
+import { handleKeyDown as h } from "../Input/utils.js";
+const y = /^0+\.(\d+)?$/, I = /^0+/, x = ({
+  integer: r,
+  onChange: o,
+  min: s,
+  max: a,
+  onKeyDown: i,
+  onPaste: d,
+  ...g
+}) => {
+  const c = (e) => !e || e === "-" ? e : String(e)?.match(y) ? String(e)?.replace(I, "0") : Number(e);
+  return /* @__PURE__ */ f(
+    m,
+    {
+      type: "number",
+      min: s,
+      max: a,
+      onChange: (e) => o?.(c(e)),
+      onKeyDown: r ? (e) => {
+        if ([".", "-", "+", "e", "E"].includes(e.key)) {
+          e.preventDefault();
+          return;
+        }
+        h(e, "number", s, a);
+      } : i,
+      onPaste: r ? (e) => {
+        const l = e.clipboardData.getData("text"), n = l.replace(/\D/g, "");
+        if (n !== l && (e.preventDefault(), n)) {
+          const t = e.currentTarget, D = t.selectionStart ?? 0, p = t.selectionEnd ?? 0, u = t.value.slice(0, D) + n + t.value.slice(p);
+          o?.(c(u));
+        }
+      } : d,
+      ...g
+    }
+  );
+};
+export {
+  x as DialNumberInput
+};

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,80 @@
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { IconCaretLeftFilled as u, IconCaretRightFilled as x } from "@tabler/icons-react";
+import { DialIconButton as o } from "../IconButton/IconButton.js";
+import { mergeClasses as n } from "../../utils/merge-classes.js";
+import { DIAL_ICON_SIZE as c } from "../../constants/icon.js";
+import { ElementSize as m } from "../../types/size.js";
+import { getPageRange as y, PageDisplayType as r, getPageDisplayType as b } from "./utils.js";
+const C = ({
+  page: e,
+  totalPages: t,
+  onPageChange: l,
+  className: p
+}) => {
+  const d = y(t);
+  return /* @__PURE__ */ f(
+    "nav",
+    {
+      "aria-label": "Pagination",
+      className: n("flex items-center gap-2", p),
+      children: [
+        /* @__PURE__ */ i(
+          o,
+          {
+            icon: /* @__PURE__ */ i(
+              u,
+              {
+                size: c.SM,
+                className: "text-secondary"
+              }
+            ),
+            size: m.Small,
+            className: "!p-0 items-center flex justify-center",
+            disabled: e <= 1,
+            onClick: () => l(e - 1),
+            "aria-label": "Previous page"
+          }
+        ),
+        /* @__PURE__ */ i("div", { className: "flex flex-row items-center gap-2", children: d.map((a) => {
+          const s = b(a, e, t);
+          return /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              onClick: () => l(a),
+              "aria-label": `Page ${a}`,
+              "aria-current": a === e ? "page" : void 0,
+              className: n(
+                "dial-pagination-dot rounded-full focus-visible:outline outline-offset-0 transition-all duration-300 ease-in-out",
+                s === r.Active && "h-[8px] w-[32px]",
+                s === r.Adjacent && "size-[8px]",
+                s === r.Far && "size-[4px]"
+              )
+            },
+            a
+          );
+        }) }),
+        /* @__PURE__ */ i(
+          o,
+          {
+            icon: /* @__PURE__ */ i(
+              x,
+              {
+                size: c.SM,
+                className: "text-secondary"
+              }
+            ),
+            size: m.Small,
+            className: "!p-0 items-center flex justify-center",
+            disabled: e >= t,
+            onClick: () => l(e + 1),
+            "aria-label": "Next page"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  C as DialPagination
+};

package/dist/components/Pagination/utils.js

@@ -0,0 +1,10 @@
+const a = 7, A = 2, c = (r) => r <= 0 ? [] : Array.from({ length: r }, (t, n) => n + 1);
+var e = /* @__PURE__ */ ((r) => (r.Active = "active", r.Adjacent = "adjacent", r.Far = "far", r))(e || {});
+const f = (r, t, n) => r === t ? "active" : n < 7 || Math.abs(r - t) <= 2 ? "adjacent" : "far";
+export {
+  A as ADJACENT_WINDOW,
+  a as MANY_PAGES_THRESHOLD,
+  e as PageDisplayType,
+  f as getPageDisplayType,
+  c as getPageRange
+};

package/dist/components/PasswordInput/Icons/HideIcon.js

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import { IconEyeOff as t } from "@tabler/icons-react";
+import { BASE_ICON_PROPS as e } from "../../../constants/icon.js";
+const f = ({ onClick: r }) => /* @__PURE__ */ o(
+  t,
+  {
+    ...e,
+    className: "text-primary",
+    onClick: r,
+    role: "button",
+    "aria-label": "hide"
+  }
+);
+export {
+  f as DialHideIcon
+};

package/dist/components/PasswordInput/Icons/ShowIcon.js

@@ -0,0 +1,16 @@
+import { jsx as r } from "react/jsx-runtime";
+import { IconEye as t } from "@tabler/icons-react";
+import { BASE_ICON_PROPS as m } from "../../../constants/icon.js";
+const l = ({ onClick: o }) => /* @__PURE__ */ r(
+  t,
+  {
+    ...m,
+    className: "text-primary",
+    onClick: o,
+    role: "button",
+    "aria-label": "show"
+  }
+);
+export {
+  l as DialShowIcon
+};

package/dist/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,21 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useState as i, useCallback as n } from "react";
+import { DialHideIcon as s } from "./Icons/HideIcon.js";
+import { DialShowIcon as m } from "./Icons/ShowIcon.js";
+import { DialInput as u } from "../Input/Input.js";
+const h = ({ ...t }) => {
+  const [e, l] = i(!1), a = n((r) => {
+    l(r);
+  }, []);
+  return /* @__PURE__ */ o(
+    u,
+    {
+      type: e ? "text" : "password",
+      ...t,
+      iconAfter: t.disabled ? null : e ? /* @__PURE__ */ o(s, { onClick: () => a(!1) }) : /* @__PURE__ */ o(m, { onClick: () => a(!0) })
+    }
+  );
+};
+export {
+  h as DialPasswordInput
+};