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

package/dist/components/New/InfoButton/InfoButton.js

@@ -0,0 +1,39 @@
+import { jsx as t } from "react/jsx-runtime";
+import { IconInfoCircle as n } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as l } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
+import { ElementSize as m } from "../../../types/size.js";
+import { mergeClasses as a } from "../../../utils/merge-classes.js";
+import { IconButton as c } from "../IconButton/IconButton.js";
+const S = ({
+  caption: o,
+  onClick: e,
+  "aria-label": r
+}) => {
+  if (!o) return null;
+  const i = a(
+    "text-secondary hover:text-control-accent-hover active:text-control-accent-active",
+    "focus-visible:outline focus-visible:outline-focus"
+  );
+  return /* @__PURE__ */ t(
+    c,
+    {
+      "aria-label": r,
+      className: i,
+      icon: /* @__PURE__ */ t(
+        n,
+        {
+          size: s.SM,
+          stroke: l,
+          "aria-hidden": "true"
+        }
+      ),
+      onClick: e,
+      size: m.Small,
+      tooltipProps: { tooltip: o }
+    }
+  );
+};
+export {
+  S as InfoButton
+};

package/dist/components/New/InlineSelect/InlineSelect.js

@@ -0,0 +1,96 @@
+import { jsx as c, jsxs as y } from "react/jsx-runtime";
+import { IconChevronDown as N } from "@tabler/icons-react";
+import { useState as p, useMemo as D, useCallback as O } from "react";
+import { Dropdown as _ } from "../Dropdown/Dropdown.js";
+import { DIAL_KIT_ICON_STROKE as K } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as E } from "../../../constants/icon.js";
+import { mergeClasses as f } from "../../../utils/merge-classes.js";
+import { ElementSize as T } from "../../../types/size.js";
+const j = ({
+  label: e,
+  size: a,
+  isOpen: n = !1,
+  "aria-label": t,
+  ...r
+}) => {
+  const l = a === T.Small ? "h-[32px]" : "h-[40px] dial-kit-enhanced-target";
+  return /* @__PURE__ */ y(
+    "button",
+    {
+      type: "button",
+      "aria-haspopup": "menu",
+      "aria-expanded": n,
+      "aria-label": t ? `${t} ${e}` : void 0,
+      className: f(
+        "dial-small-paragraph-text px-3 focus-visible:outline focus-visible:outline-focus",
+        "flex items-center gap-1 rounded-full text-primary disabled:text-control-disable-primary",
+        "hover:bg-control-accent-alpha-hover focus-visible:outline-offset-2 active:bg-control-accent-alpha-active",
+        l,
+        r.className
+      ),
+      ...r,
+      children: [
+        e,
+        /* @__PURE__ */ c(
+          N,
+          {
+            size: E.MD,
+            stroke: K,
+            "aria-hidden": !0,
+            className: f("transition-transform", n && "rotate-180")
+          }
+        )
+      ]
+    }
+  );
+}, Z = ({
+  items: e,
+  selectedKey: a,
+  defaultSelectedKey: n,
+  onSelect: t,
+  size: r,
+  disabled: l,
+  placement: d = "bottom-end",
+  matchReferenceWidth: u = !1,
+  listClassName: b,
+  ariaLabel: h
+}) => {
+  const [v, I] = p(!1), [x, g] = p(
+    n ?? e[0]?.key
+  ), s = a !== void 0, m = s ? a : x, C = D(() => {
+    const o = e.find((i) => i.key === m);
+    return o?.label ? String(o.label) : "";
+  }, [e, m]), S = O(
+    ({ key: o }) => {
+      const i = e.find((k) => k.key === o);
+      i && (s || g(o), t?.(i));
+    },
+    [e, s, t]
+  );
+  return /* @__PURE__ */ c(
+    _,
+    {
+      items: e,
+      placement: d,
+      matchReferenceWidth: u,
+      listClassName: b,
+      disabled: l,
+      onOpenChange: I,
+      onItemClick: S,
+      children: /* @__PURE__ */ c(
+        j,
+        {
+          label: C,
+          size: r,
+          isOpen: v,
+          disabled: l,
+          "aria-label": h
+        }
+      )
+    }
+  );
+};
+export {
+  Z as InlineSelect,
+  j as InlineSelectTrigger
+};

package/dist/components/New/Input/Button/InputButton.js

@@ -0,0 +1,38 @@
+import { jsx as o } from "react/jsx-runtime";
+import { ElementSize as r } from "../../../../types/size.js";
+import { mergeClasses as e } from "../../../../utils/merge-classes.js";
+import { IconButton as p } from "../../IconButton/IconButton.js";
+import { inputButtonClassName as i } from "./constants.js";
+const l = {
+  [r.Small]: "size-[24px]",
+  [r.Standard]: "size-[40px]",
+  [r.Large]: "size-[48px]"
+}, x = ({
+  icon: m,
+  onClick: a,
+  disabled: n,
+  size: t = r.Standard,
+  className: s
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: e("border-l border-tertiary", l[t]),
+    children: /* @__PURE__ */ o(
+      p,
+      {
+        className: e(
+          i,
+          t === r.Small && "p-1",
+          s
+        ),
+        icon: m,
+        onClick: a,
+        disabled: n,
+        size: t
+      }
+    )
+  }
+);
+export {
+  x as InputButton
+};

package/dist/components/New/Input/Button/constants.js

@@ -0,0 +1,4 @@
+const e = "bg-control-neutral-active flex items-center justify-center enabled:text-secondary enabled:hover:text-control-accent-hover enabled:active:bg-control-accent-alpha-active enabled:hover:bg-control-accent-alpha-hover enabled:active:text-control-accent-active";
+export {
+  e as inputButtonClassName
+};

package/dist/components/New/Input/Input.js

@@ -0,0 +1,169 @@
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { useRef as _, useEffect as A } from "react";
+import { useMergeRefs as M } from "@floating-ui/react";
+import { DialIcon as C } from "../../Icon/Icon.js";
+import { Tooltip as W } from "../Tooltip/Tooltip.js";
+import { ElementSize as d } from "../../../types/size.js";
+import { mergeClasses as g } from "../../../utils/merge-classes.js";
+import { ErrorText as Z, CaptionText as $ } from "../CaptionText/CaptionText.js";
+import { Label as q } from "../Label/Label.js";
+import { InputButton as B } from "./Button/InputButton.js";
+import { handleKeyDown as H } from "./utils.js";
+const T = {
+  [d.Small]: {
+    field: "dial-kit-input-small gap-x-1",
+    paddingStart: "pl-2",
+    paddingEnd: "pr-2",
+    stackGap: "gap-1",
+    postfixText: "dial-tiny-text"
+  },
+  [d.Standard]: {
+    field: "gap-x-2 py-2",
+    paddingStart: "pl-3",
+    paddingEnd: "pr-3",
+    stackGap: "gap-2",
+    postfixText: "dial-small-text"
+  },
+  [d.Large]: {
+    field: "gap-x-2 py-3",
+    paddingStart: "pl-4",
+    paddingEnd: "pr-4",
+    stackGap: "gap-2",
+    postfixText: "dial-body-text"
+  }
+}, ae = ({
+  labelProps: p,
+  error: t,
+  caption: n,
+  id: c,
+  containerClassName: f,
+  size: u = d.Standard,
+  ...v
+}) => /* @__PURE__ */ x(
+  "div",
+  {
+    className: g(
+      "flex flex-col",
+      T[u].stackGap,
+      f
+    ),
+    children: [
+      p && /* @__PURE__ */ e(q, { ...p, htmlFor: c }),
+      /* @__PURE__ */ x("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ e(I, { id: c, size: u, ...v }),
+        /* @__PURE__ */ e(Z, { text: t }),
+        !t && /* @__PURE__ */ e($, { text: n })
+      ] })
+    ]
+  }
+), I = ({
+  invalid: p,
+  disabled: t,
+  prefix: n,
+  className: c,
+  postfix: f,
+  children: u,
+  iconBefore: v,
+  iconAfter: L,
+  wrapperClassName: b,
+  type: o,
+  inputRef: y,
+  value: N,
+  tooltipText: D,
+  min: l,
+  onChange: G,
+  max: s,
+  inputButtonProps: w,
+  wrapperRef: j,
+  size: S = d.Standard,
+  ...R
+}) => {
+  const m = T[S], E = _(null), F = M([y, E]), h = o === "number" || l !== void 0 || s !== void 0;
+  A(() => {
+    const a = E.current;
+    if (!a || !h || t) return;
+    const r = (i) => {
+      i.preventDefault();
+    };
+    return a.addEventListener("wheel", r, { passive: !1 }), () => {
+      a.removeEventListener("wheel", r);
+    };
+  }, [t, h, o]);
+  const K = (a) => {
+    H(a, o, l, s);
+  }, V = (a) => {
+    const r = a.currentTarget.value;
+    if (h && r !== "") {
+      const i = parseFloat(r);
+      if (isNaN(i) && r !== "-" && r !== "." || !isNaN(i) && (l !== void 0 && i < +l || s !== void 0 && i > +s))
+        return;
+    }
+    G?.(r || void 0);
+  }, k = () => /* @__PURE__ */ x(
+    "div",
+    {
+      ref: j,
+      className: g(
+        "dial-kit-input flex flex-row items-center justify-between",
+        m.field,
+        p && "dial-kit-input-error",
+        t && "dial-kit-input-disable",
+        !n && m.paddingStart,
+        !w && m.paddingEnd,
+        b
+      ),
+      "aria-label": "input-container",
+      children: [
+        n && /* @__PURE__ */ e("div", { className: "border-r border-secondary", children: /* @__PURE__ */ e(
+          I,
+          {
+            wrapperClassName: "!rounded-r-none",
+            className: "truncate",
+            value: n,
+            disabled: !0,
+            size: S,
+            id: `${n}_textBefore`
+          }
+        ) }),
+        /* @__PURE__ */ e(C, { icon: v }),
+        u,
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: F,
+            type: o,
+            autoComplete: o === "password" ? "new-password" : "off",
+            value: N ?? "",
+            className: g(
+              "border-0 bg-transparent w-full truncate",
+              t && "cursor-not-allowed",
+              c
+            ),
+            onChange: V,
+            onKeyDown: K,
+            min: l,
+            disabled: t,
+            max: s,
+            ...R
+          }
+        ),
+        f && /* @__PURE__ */ x(
+          "p",
+          {
+            className: g("text-secondary", m.postfixText),
+            children: [
+              " ",
+              f
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(C, { icon: L }),
+        w && /* @__PURE__ */ e(B, { size: S, ...w, disabled: t })
+      ]
+    }
+  );
+  return t && o !== "password" ? /* @__PURE__ */ e(W, { tooltip: D || N, children: k() }) : k();
+};
+export {
+  ae as Input
+};

package/dist/components/New/Input/utils.js

@@ -0,0 +1,37 @@
+const a = [
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Backspace",
+  "Delete",
+  "Tab",
+  "Enter",
+  "Escape",
+  "Home",
+  "End",
+  "Insert"
+], f = (e, u, r, t) => {
+  if ((u === "number" || r !== void 0 || t !== void 0) && !a.includes(e.key) && !(e.ctrlKey || e.metaKey) && !(e.key === "-" && (e.currentTarget.selectionStart ?? 0) === 0 && !e.currentTarget.value.includes("-")) && !(e.key === "." && u === "number" && !e.currentTarget.value.includes("."))) {
+    if (!/^[0-9]$/.test(e.key)) {
+      e.preventDefault();
+      return;
+    }
+    if ((r !== void 0 || t !== void 0) && e.currentTarget.selectionStart !== null) {
+      const c = e.currentTarget.value, i = e.currentTarget.selectionStart, o = e.currentTarget.selectionEnd ?? i, s = c.slice(0, i) + e.key + c.slice(o), n = parseFloat(s);
+      if (!isNaN(n)) {
+        if (r !== void 0 && n < +r) {
+          e.preventDefault();
+          return;
+        }
+        if (t !== void 0 && n > +t) {
+          e.preventDefault();
+          return;
+        }
+      }
+    }
+  }
+};
+export {
+  f as handleKeyDown
+};

package/dist/components/New/InteractiveTooltip/InteractiveTooltip.js

@@ -0,0 +1,104 @@
+import { jsx as n, jsxs as w, Fragment as D } from "react/jsx-runtime";
+import { useFloatingNodeId as H, useFloating as U, autoUpdate as G, offset as Y, flip as k, shift as q, useHover as z, safePolygon as B, useFocus as J, useDismiss as K, useInteractions as Q, useMergeRefs as u, FloatingPortal as W, FloatingFocusManager as X } from "@floating-ui/react";
+import { useState as Z, useRef as $, useMemo as d, isValidElement as ee, cloneElement as oe } from "react";
+import { useThemeScope as se } from "../ThemeScope/ThemeScope.js";
+import { useIsMobileScreen as te } from "../../../hooks/use-is-mobile-screen.js";
+import { TooltipPlacement as ne } from "../../../types/tooltip.js";
+import { mergeClasses as g } from "../../../utils/merge-classes.js";
+import { INTERACTIVE_TOOLTIP_GAP as le, INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY as ae, interactiveTooltipClassName as re } from "./constants.js";
+const Re = ({
+  content: a,
+  placement: R = ne.Right,
+  children: e,
+  asChild: F = !1,
+  hideTooltip: T = !1,
+  initialOpen: h = !1,
+  open: s,
+  onOpenChange: I,
+  triggerClassName: r,
+  contentClassName: E
+}) => {
+  const P = te(), C = se(), [N, O] = Z(h), i = s ?? N, v = (m) => {
+    I?.(m), s == null && O(m);
+  }, M = H(), { refs: t, floatingStyles: _, context: o } = U({
+    nodeId: M,
+    placement: R,
+    open: i,
+    onOpenChange: v,
+    whileElementsMounted: G,
+    middleware: [
+      Y(le),
+      /* No `fallbackAxisSideDirection`: a panel placed to the right should
+       flip to the left when it does not fit, not drop to the perpendicular
+       top/bottom axis, which reads as the panel landing in the wrong place.*/
+      k({ padding: 5 }),
+      q({ padding: 5 })
+    ]
+  }), S = z(o, {
+    enabled: s == null,
+    /* Lets the pointer cross the gap between the trigger and the panel
+       without closing it, so it can actually be reached and used. */
+    handleClose: B(),
+    delay: { open: ae, close: 0 }
+  }), V = J(o, { enabled: s == null }), b = K(o), { getReferenceProps: c, getFloatingProps: x } = Q([
+    S,
+    V,
+    b
+  ]), y = $(null), A = u(
+    d(() => [t.setFloating, y], [t.setFloating])
+  ), f = F && ee(e), l = f ? e.props?.ref : null, p = u(
+    d(
+      () => [t.setReference, ...l ? [l] : []],
+      [t.setReference, l]
+    )
+  ), L = !T && !P && !!a, j = f ? oe(
+    e,
+    c({
+      ...e.props,
+      ref: p,
+      className: g(
+        e.props.className,
+        r
+      ) || void 0
+    })
+  ) : /* @__PURE__ */ n(
+    "span",
+    {
+      ref: p,
+      ...c(),
+      className: r ?? "text-start",
+      children: e
+    }
+  );
+  return /* @__PURE__ */ w(D, { children: [
+    j,
+    i && L && /* @__PURE__ */ n(W, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ n(
+      X,
+      {
+        context: o,
+        modal: !1,
+        initialFocus: -1,
+        returnFocus: !1,
+        order: ["reference", "content"],
+        children: /* @__PURE__ */ n(
+          "div",
+          {
+            ref: A,
+            "data-placement": o.placement,
+            style: _,
+            ...x(),
+            className: g(
+              re,
+              C,
+              E
+            ),
+            children: a
+          }
+        )
+      }
+    ) })
+  ] });
+};
+export {
+  Re as InteractiveTooltip
+};

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

@@ -0,0 +1,6 @@
+const t = 8, a = 400, T = "z-[54] max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";
+export {
+  t as INTERACTIVE_TOOLTIP_GAP,
+  a as INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY,
+  T as interactiveTooltipClassName
+};

package/dist/components/New/Label/Label.js

@@ -0,0 +1,42 @@
+import { jsxs as t, jsx as r, Fragment as d } from "react/jsx-runtime";
+import { mergeClasses as s } from "../../../utils/merge-classes.js";
+import { ElementSize as n } from "../../../types/size.js";
+import { InfoButton as p } from "../InfoButton/InfoButton.js";
+const g = ({
+  label: e,
+  required: a,
+  className: i,
+  containerClassName: l,
+  caption: m,
+  size: o = n.Small,
+  ...c
+}) => e ? /* @__PURE__ */ t(
+  "span",
+  {
+    className: s("flex items-center gap-0.5", l),
+    children: [
+      /* @__PURE__ */ t(
+        "label",
+        {
+          ...c,
+          className: s(
+            "text-secondary flex items-center gap-0.5",
+            o === n.Small ? "dial-tiny-semi-text" : "dial-small-text",
+            i
+          ),
+          children: [
+            typeof e == "string" ? /* @__PURE__ */ r("span", { className: "min-h-4", children: e }) : e,
+            a && /* @__PURE__ */ t(d, { children: [
+              /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "text-error dial-tiny-text", children: "*" }),
+              /* @__PURE__ */ r("span", { className: "sr-only", children: "(required)" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ r(p, { caption: m })
+    ]
+  }
+) : null;
+export {
+  g as Label
+};

package/dist/components/New/MarkdownEditor/MarkdownEditor.js

@@ -0,0 +1,41 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useMemo as r } from "react";
+import g from "@uiw/react-md-editor";
+import { EditorThemes as k } from "../../../types/editor.js";
+import { mergeClasses as w } from "../../../utils/merge-classes.js";
+import { getMarkdownFormattingCommands as x, getMarkdownExtraCommands as C } from "./constants.js";
+const b = ({
+  value: m,
+  onChange: t,
+  height: a = 300,
+  theme: e = k.light,
+  className: d,
+  placeholder: i,
+  defaultPreview: n = "edit",
+  id: s,
+  ariaLabel: l
+}) => {
+  const p = r(() => x(), []), c = r(() => C(), []);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "data-color-mode": e,
+      className: w("dial-kit-markdown-editor", d),
+      children: /* @__PURE__ */ o(
+        g,
+        {
+          value: m,
+          onChange: (f) => t?.(f || ""),
+          height: a,
+          preview: n,
+          commands: p,
+          extraCommands: c,
+          textareaProps: { placeholder: i, id: s, "aria-label": l }
+        }
+      )
+    }
+  );
+};
+export {
+  b as MarkdownEditor
+};

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

@@ -0,0 +1,64 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as a from "@uiw/react-md-editor";
+import { IconTextSize as C, IconBold as _, IconItalic as p, IconStrikethrough as T, IconList as k, IconListNumbers as x, IconQuote as E, IconLink as N, IconCode as S, IconTable as b, IconPencil as f, IconLayoutColumns as A, IconEye as M, IconMaximize as P } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as R } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as v } from "../../../constants/icon.js";
+const w = v.SM, e = {
+  size: w,
+  stroke: R
+}, t = (i, r) => ({
+  ...i,
+  icon: r
+}), K = () => {
+  const {
+    bold: i,
+    code: r,
+    divider: n,
+    group: c,
+    heading1: d,
+    heading2: m,
+    heading3: I,
+    italic: s,
+    link: l,
+    orderedListCommand: u,
+    quote: g,
+    strikethrough: L,
+    table: O,
+    unorderedListCommand: h
+  } = a;
+  return [
+    t(i, /* @__PURE__ */ o(_, { ...e })),
+    t(s, /* @__PURE__ */ o(p, { ...e })),
+    t(L, /* @__PURE__ */ o(T, { ...e })),
+    n,
+    c([d, m, I], {
+      name: "heading",
+      groupName: "heading",
+      icon: /* @__PURE__ */ o(C, { ...e }),
+      buttonProps: { "aria-label": "Text style", title: "Text style" }
+    }),
+    n,
+    t(h, /* @__PURE__ */ o(k, { ...e })),
+    t(u, /* @__PURE__ */ o(x, { ...e })),
+    n,
+    t(g, /* @__PURE__ */ o(E, { ...e })),
+    t(l, /* @__PURE__ */ o(N, { ...e })),
+    t(r, /* @__PURE__ */ o(S, { ...e })),
+    n,
+    t(O, /* @__PURE__ */ o(b, { ...e }))
+  ];
+}, Z = () => {
+  const { codeEdit: i, codeLive: r, codePreview: n, divider: c, fullscreen: d } = a;
+  return [
+    t(i, /* @__PURE__ */ o(f, { ...e })),
+    t(r, /* @__PURE__ */ o(A, { ...e })),
+    t(n, /* @__PURE__ */ o(M, { ...e })),
+    c,
+    t(d, /* @__PURE__ */ o(P, { ...e }))
+  ];
+};
+export {
+  w as MARKDOWN_TOOLBAR_ICON_SIZE,
+  Z as getMarkdownExtraCommands,
+  K as getMarkdownFormattingCommands
+};

package/dist/components/New/MarkdownEditor/lazy.js

@@ -0,0 +1,4 @@
+const o = () => import("./MarkdownEditor.js");
+export {
+  o as LazyMarkdownEditor
+};