@epam/ai-dial-ui-kit 0.14.0-dev.4 → 0.14.0-dev.41

package/dist/components/New/MenuItem/MenuItem.js

@@ -0,0 +1,108 @@
+import { jsxs as i, Fragment as g, jsx as t } from "react/jsx-runtime";
+import { DialIcon as k } from "../../Icon/Icon.js";
+import { CheckboxBox as H } from "../Checkbox/CheckboxBox.js";
+import { EllipsisTooltip as M } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { overlayItemDisabledClassName as T, overlayItemSelectedClassName as j, overlayItemHighlightClassName as D, overlayItemClassName as S } from "../constants/overlay.js";
+import { MenuItemMark as s } from "../../../types/menu-item.js";
+import { mergeClasses as e } from "../../../utils/merge-classes.js";
+import { menuItemCheckIcon as B } from "./constants.js";
+const L = ({
+  label: l,
+  icon: c,
+  description: f,
+  mark: o = s.None,
+  selected: r = !1,
+  danger: h = !1,
+  trailing: u,
+  rightControl: m,
+  ellipsisLabel: v = !1,
+  labelClassName: x,
+  children: d,
+  className: I,
+  disabled: a = !1,
+  type: C = "button",
+  ...w
+}) => {
+  const y = r && o === s.Highlight, b = r && (o === s.Checkbox || o === s.Tint), n = e(
+    h && "text-error",
+    a && "text-control-disable-primary"
+  ), p = e(
+    S,
+    // A row that opens a panel stays tinted while that panel is up, so the
+    // trail back to it is visible once the pointer has moved into it.
+    "aria-expanded:bg-control-accent-alpha-hover",
+    y && D,
+    b && j,
+    a && T,
+    h && "text-error",
+    I
+  ), N = /* @__PURE__ */ i(
+    "button",
+    {
+      type: C,
+      disabled: a,
+      "data-menu-item-row": m ? "" : void 0,
+      className: m ? "flex h-full min-w-0 flex-1 items-center gap-2 truncate text-start focus-visible:outline-none" : p,
+      ...w,
+      children: [
+        d ?? /* @__PURE__ */ i(g, { children: [
+          o === s.Checkbox && /* @__PURE__ */ t(H, { isSelected: r, disabled: a }),
+          c && /* @__PURE__ */ t(k, { icon: c, className: n }),
+          v ? /* @__PURE__ */ t(
+            M,
+            {
+              text: l,
+              className: e(n, x)
+            }
+          ) : /* @__PURE__ */ t(
+            "span",
+            {
+              className: e(
+                "min-w-0 flex-1 truncate text-start",
+                n,
+                x
+              ),
+              children: l
+            }
+          ),
+          f && /* @__PURE__ */ t(
+            "span",
+            {
+              className: e(
+                "shrink-0 text-secondary dial-small-text",
+                a && "text-control-disable-primary"
+              ),
+              children: f
+            }
+          ),
+          r && o === s.Check && B
+        ] }),
+        u && /* @__PURE__ */ t("span", { className: e("ml-auto shrink-0", n), children: u })
+      ]
+    }
+  );
+  return m ? (
+    /*
+      `role="none"` so the wrapper does not come between a listbox and its
+      options: the row inside it keeps the role, the state and the click.
+    */
+    /* @__PURE__ */ i(
+      "div",
+      {
+        role: "none",
+        className: e(
+          p,
+          "has-[[data-menu-item-row]:focus-visible]:outline",
+          "has-[[data-menu-item-row]:focus-visible]:outline-focus"
+        ),
+        children: [
+          N,
+          m
+        ]
+      }
+    )
+  ) : N;
+};
+export {
+  L as MenuItem
+};

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

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import { IconCheck as r } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as m } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as e } from "../../../constants/icon.js";
+const c = /* @__PURE__ */ o(
+  r,
+  {
+    size: e.SM,
+    stroke: m,
+    className: "shrink-0",
+    "aria-hidden": !0
+  }
+);
+export {
+  c as menuItemCheckIcon
+};

package/dist/components/New/NoDataContent/NoDataContent.js

@@ -0,0 +1,54 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { IconClipboardX as c } from "@tabler/icons-react";
+import { mergeClasses as t } from "../../../utils/merge-classes.js";
+const d = 60, u = ({
+  title: r,
+  description: s,
+  icon: a,
+  live: l = !1,
+  className: i,
+  titleClassName: o,
+  descriptionClassName: m
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    role: l ? "status" : void 0,
+    className: t(
+      "flex size-full flex-col items-center justify-center gap-2 text-tertiary",
+      i
+    ),
+    children: [
+      a ?? /* @__PURE__ */ e(
+        c,
+        {
+          size: d,
+          stroke: 0.5,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "span",
+        {
+          className: t(
+            "dial-body-semi-text text-primary",
+            o
+          ),
+          children: r
+        }
+      ),
+      s && /* @__PURE__ */ e(
+        "span",
+        {
+          className: t(
+            "dial-small-text text-secondary",
+            m
+          ),
+          children: s
+        }
+      )
+    ]
+  }
+);
+export {
+  u as NoDataContent
+};

package/dist/components/New/Notification/Notification.js

@@ -0,0 +1,67 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { useMemo as u } from "react";
+import { DialIcon as v } from "../../Icon/Icon.js";
+import { NotificationVariant as n, NotificationType as s } from "../../../types/notification.js";
+import { mergeClasses as c } from "../../../utils/merge-classes.js";
+import { CloseButton as C } from "../CloseButton/CloseButton.js";
+import { variantIcons as k, notificationVariantRoleMap as M, notificationVariantClassNameMap as T, alertBaseClassName as I } from "./constants.js";
+const R = ({
+  variant: e = n.Info,
+  type: i = s.Toast,
+  title: o,
+  message: l,
+  className: d,
+  iconSize: t = 24,
+  iconStroke: m = 2,
+  closable: p = !1,
+  onClose: f,
+  children: x,
+  textClassName: h,
+  ...N
+}) => {
+  const w = u(() => k({ size: t, stroke: m })[e], [e, t, m]), g = h ?? (i === s.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      role: M[e],
+      ...N,
+      className: c(
+        I,
+        T[e],
+        i === s.Toast && "min-w-[200px] max-w-[600px] shadow-lg",
+        i === s.SectionMessage && e === n.Loading && "border-secondary",
+        d
+      ),
+      children: [
+        /* @__PURE__ */ r("div", { className: "flex items-start gap-3 flex-1 min-w-0", children: [
+          /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "flex shrink-0", children: /* @__PURE__ */ a(v, { icon: w }) }),
+          o ? /* @__PURE__ */ r(
+            "div",
+            {
+              className: c(
+                "flex min-w-0 text-primary break-words",
+                g
+              ),
+              children: [
+                /* @__PURE__ */ a("div", { className: "dial-small-paragraph-semi-text min-w-0 break-words", children: o }),
+                /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 break-words", children: l })
+              ]
+            }
+          ) : /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 text-primary break-words", children: l })
+        ] }),
+        x,
+        p && /* @__PURE__ */ a("div", { className: "relative size-[40px]", children: /* @__PURE__ */ a(
+          C,
+          {
+            className: "absolute top-[-2px] right-0 size-auto hover:bg-transparent ",
+            ariaLabel: "Close notification",
+            onClose: (b) => f?.(b)
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  R as Notification
+};

package/dist/components/New/Notification/NotificationWrapper.js

@@ -0,0 +1,61 @@
+import { jsx as c } from "react/jsx-runtime";
+import { NotificationVariant as o, NotificationType as t } from "../../../types/notification.js";
+import { Notification as f } from "./Notification.js";
+const i = (a, s) => ({ type: e, ...r }) => /* @__PURE__ */ c(f, { ...r, variant: a, type: e || s }), n = (a, s) => ({ variant: e, ...r }) => /* @__PURE__ */ c(
+  f,
+  {
+    ...r,
+    variant: e || s,
+    type: a
+  }
+), M = i(
+  o.Error,
+  t.Toast
+), S = i(
+  o.Info,
+  t.Toast
+), u = i(
+  o.Success,
+  t.Toast
+), W = i(
+  o.Warning,
+  t.Toast
+), m = i(
+  o.Loading,
+  t.Toast
+), d = i(
+  o.General,
+  t.Toast
+), l = n(
+  t.SectionMessage,
+  o.Error
+), E = n(
+  t.SectionMessage,
+  o.Info
+), G = n(
+  t.SectionMessage,
+  o.Success
+), I = n(
+  t.SectionMessage,
+  o.Warning
+), L = n(
+  t.SectionMessage,
+  o.Loading
+), y = n(
+  t.SectionMessage,
+  o.General
+);
+export {
+  l as ErrorMessageNotification,
+  M as ErrorToastNotification,
+  y as GeneralMessageNotification,
+  d as GeneralToastNotification,
+  E as InfoMessageNotification,
+  S as InfoToastNotification,
+  L as LoadingMessageNotification,
+  m as LoadingToastNotification,
+  G as SuccessMessageNotification,
+  u as SuccessToastNotification,
+  I as WarningMessageNotification,
+  W as WarningToastNotification
+};

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

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

package/dist/components/New/NumberInput/NumberInput.js

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

package/dist/components/New/PasswordInput/PasswordInput.js

@@ -0,0 +1,54 @@
+import { jsx as r } from "react/jsx-runtime";
+import { IconEyeOff as d, IconEye as S } from "@tabler/icons-react";
+import { useState as l } from "react";
+import { GhostIconButton as u } from "../IconButton/IconButtonWrappers.js";
+import { Input as w } from "../Input/Input.js";
+import { DIAL_KIT_ICON_STROKE as e } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as i } from "../../../constants/icon.js";
+import { ElementSize as s } from "../../../types/size.js";
+const A = ({
+  showPasswordLabel: m = "Show password",
+  hidePasswordLabel: a = "Hide password",
+  disabled: t,
+  size: n = s.Standard,
+  ...p
+}) => {
+  const [f, I] = l(!1), o = f && !t;
+  return /* @__PURE__ */ r(
+    w,
+    {
+      ...p,
+      size: n,
+      disabled: t,
+      type: o ? "text" : "password",
+      iconAfter: /* @__PURE__ */ r(
+        u,
+        {
+          size: s.Small,
+          disabled: t,
+          "aria-label": o ? a : m,
+          "aria-pressed": o,
+          icon: o ? /* @__PURE__ */ r(
+            d,
+            {
+              size: i.SM,
+              stroke: e,
+              "aria-hidden": "true"
+            }
+          ) : /* @__PURE__ */ r(
+            S,
+            {
+              size: i.SM,
+              stroke: e,
+              "aria-hidden": "true"
+            }
+          ),
+          onClick: () => I((c) => !c)
+        }
+      )
+    }
+  );
+};
+export {
+  A as PasswordInput
+};

package/dist/components/New/Popup/Popup.js

@@ -0,0 +1,164 @@
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useFloating as J, useRole as Q, useDismiss as U, useInteractions as W, FloatingPortal as X, FloatingOverlay as Y, FloatingFocusManager as ee } from "@floating-ui/react";
+import { useRef as oe, useId as re } from "react";
+import { Button as se } from "../Button/Button.js";
+import { CloseButton as ae } from "../CloseButton/CloseButton.js";
+import { GhostIconButton as ie } from "../IconButton/IconButtonWrappers.js";
+import { Tooltip as le } from "../Tooltip/Tooltip.js";
+import { DIAL_KIT_ICON_STROKE as te } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as ne } from "../../../constants/icon.js";
+import { ButtonVariant as me } from "../../../types/button.js";
+import { PopupSize as pe } from "../../../types/popup.js";
+import { ElementSize as ce } from "../../../types/size.js";
+import { useThemeScope as de } from "../ThemeScope/ThemeScope.js";
+import { mergeClasses as r } from "../../../utils/merge-classes.js";
+import { IconChevronLeft as ue } from "@tabler/icons-react";
+import { popupActionsGroupClassName as l, popupHeaderDividerClassName as fe, popupHeaderClassName as ge, popupSizeClassMap as he, popupBaseClassName as Ne, popupOverlayBaseClassName as ve, popupTitleClassName as Ce, popupFooterDividerClassName as Ie, popupFooterClassName as Fe } from "./constants.js";
+const Oe = ({
+  open: t = !1,
+  header: n,
+  ariaLabel: F,
+  portalId: S,
+  className: x,
+  overlayClassName: b,
+  titleClassName: z,
+  headerClassName: T,
+  bodyClassName: y,
+  children: B,
+  footer: m,
+  footerClassName: D,
+  onClose: p,
+  onBack: c,
+  backAriaLabel: P = "Back",
+  headerActions: d,
+  headerDivider: _ = !1,
+  mainButtons: u,
+  additionalButtons: f,
+  additionalButtonsOnLeft: g = !1,
+  footerDivider: M = !1,
+  size: R = pe.Md,
+  hideClose: w = !1,
+  closeAriaLabel: E = "Close dialog",
+  closeOnOutsideClick: G = !0,
+  preventKeyboardOnOpen: h = !1
+}) => {
+  const L = de(), N = oe(null), O = re(), { refs: v, context: a } = J({
+    open: t,
+    onOpenChange: (e) => {
+      e || p?.(null);
+    }
+  }), $ = Q(a, { role: "dialog" }), j = U(a, { outsidePress: G }), { getFloatingProps: k } = W([$, j]);
+  if (!t) return null;
+  const i = typeof n == "string" ? `popup-heading-${O}` : void 0, A = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
+    "h2",
+    {
+      id: i,
+      className: r(Ce, z),
+      children: /* @__PURE__ */ o(le, { tooltip: e, triggerClassName: "truncate", children: e })
+    }
+  ) : e : /* @__PURE__ */ o("span", {}), C = w ? null : /* @__PURE__ */ o(ae, { ariaLabel: E, onClose: (e) => p?.(e) }), I = (e, K = []) => K.map(({ variant: V = me.Neutral, ...Z }, q) => /* @__PURE__ */ o(se, { variant: V, ...Z }, `${e}-${q}`)), H = () => {
+    if (m !== void 0) return m;
+    if (!u?.length && !f?.length) return null;
+    const e = I("additional", f);
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        className: r(
+          Fe,
+          M && Ie,
+          D
+        ),
+        children: [
+          g && e.length > 0 && /* @__PURE__ */ o("div", { className: l, children: e }),
+          /* @__PURE__ */ s("div", { className: r(l, "ml-auto"), children: [
+            !g && e,
+            I("main", u)
+          ] })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ o(X, { id: S, children: /* @__PURE__ */ o(
+    Y,
+    {
+      className: r(
+        ve,
+        L,
+        b
+      ),
+      children: /* @__PURE__ */ o(
+        ee,
+        {
+          context: a,
+          initialFocus: h ? N : v.floating,
+          children: /* @__PURE__ */ s(
+            "div",
+            {
+              ref: v.setFloating,
+              ...k(),
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": i,
+              "aria-label": i ? void 0 : F,
+              className: r(
+                Ne,
+                he[R],
+                x
+              ),
+              children: [
+                h && /* @__PURE__ */ o(
+                  "div",
+                  {
+                    ref: N,
+                    tabIndex: -1,
+                    "aria-hidden": !0,
+                    className: "absolute size-px -m-px overflow-hidden opacity-0 pointer-events-none"
+                  }
+                ),
+                /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: r(
+                      ge,
+                      _ && fe,
+                      T
+                    ),
+                    children: [
+                      c && /* @__PURE__ */ o(
+                        ie,
+                        {
+                          "aria-label": P,
+                          size: ce.Small,
+                          className: "mr-2",
+                          onClick: c,
+                          icon: /* @__PURE__ */ o(
+                            ue,
+                            {
+                              size: ne.SM,
+                              stroke: te,
+                              "aria-hidden": "true"
+                            }
+                          )
+                        }
+                      ),
+                      A(n),
+                      d ? /* @__PURE__ */ s("div", { className: l, children: [
+                        d,
+                        C
+                      ] }) : C
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ o("div", { className: r("grow overflow-auto", y), children: B }),
+                H()
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+};
+export {
+  Oe as Popup
+};

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

@@ -0,0 +1,17 @@
+import { PopupSize as e } from "../../../types/popup.js";
+const a = "z-[52] flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", r = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", o = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary", s = "border-b border-tertiary", l = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", x = "flex shrink-0 flex-row items-center gap-2", i = {
+  [e.Sm]: "max-w-full md:max-w-[400px]",
+  [e.Md]: "max-w-full md:max-w-[800px]",
+  [e.Lg]: "max-w-full md:max-w-[1200px]"
+};
+export {
+  x as popupActionsGroupClassName,
+  r as popupBaseClassName,
+  l as popupFooterClassName,
+  m as popupFooterDividerClassName,
+  t as popupHeaderClassName,
+  s as popupHeaderDividerClassName,
+  a as popupOverlayBaseClassName,
+  i as popupSizeClassMap,
+  o as popupTitleClassName
+};