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

package/dist/components/New/Tabs/Tabs.js

@@ -0,0 +1,95 @@
+import { jsx as u, jsxs as k } from "react/jsx-runtime";
+import { useRef as g, useCallback as w } from "react";
+import { mergeClasses as f } from "../../../utils/merge-classes.js";
+const A = ["ArrowRight", "ArrowLeft", "Home", "End"], R = ({
+  tabs: n,
+  activeTabId: i,
+  onTabChange: o,
+  ariaLabel: x,
+  className: m,
+  tabClassName: b
+}) => {
+  const p = g({}), a = n.find((e) => e.id === i), y = a && !a.disabled ? a.id : n.find((e) => !e.disabled)?.id, h = w(
+    (e) => {
+      if (!A.includes(e.key) || n.length === 0) return;
+      const r = n.filter((c) => !c.disabled);
+      if (r.length === 0) return;
+      const t = Math.max(
+        r.findIndex((c) => c.id === i),
+        0
+      ), s = r.length - 1;
+      let l = t;
+      switch (e.key) {
+        case "ArrowRight":
+          l = t === s ? 0 : t + 1;
+          break;
+        case "ArrowLeft":
+          l = t === 0 ? s : t - 1;
+          break;
+        case "Home":
+          l = 0;
+          break;
+        case "End":
+          l = s;
+          break;
+      }
+      e.preventDefault();
+      const d = r[l];
+      p.current[d.id]?.focus(), d.id !== i && o(d.id);
+    },
+    [n, i, o]
+  );
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": x,
+      onKeyDown: h,
+      className: f("flex justify-start gap-1", m),
+      children: n.map((e) => {
+        const r = i === e.id, t = !!e.disabled;
+        return /* @__PURE__ */ k(
+          "button",
+          {
+            ref: (s) => {
+              p.current[e.id] = s;
+            },
+            type: "button",
+            role: "tab",
+            "aria-selected": r,
+            disabled: t,
+            tabIndex: e.id === y ? 0 : -1,
+            onClick: () => o(e.id),
+            className: f(
+              "dial-small-paragraph-semi-text dial-kit-enhanced-target",
+              "border-b-2 border-transparent flex items-center gap-2 px-3 py-2 text-start",
+              "transition-colors motion-reduce:transition-none",
+              "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus",
+              t && "cursor-not-allowed border-control-disable-primary text-control-disable-primary",
+              !t && (r ? "dial-kit-tab-selected-underline text-primary" : "border-transparent text-secondary"),
+              b
+            ),
+            children: [
+              /* @__PURE__ */ u("span", { children: e.label }),
+              e.count != null && /* @__PURE__ */ u(
+                "span",
+                {
+                  className: f(
+                    "dial-tiny-semi-text rounded-full px-1.5 py-0.5",
+                    t && "bg-layer-sunken text-control-disable-primary",
+                    !t && (r ? "bg-control-accent-alpha text-accent" : "bg-layer-sunken text-secondary")
+                  ),
+                  children: e.count
+                }
+              )
+            ]
+          },
+          e.id
+        );
+      })
+    }
+  );
+};
+export {
+  R as Tabs
+};

package/dist/components/New/Tag/Tag.js

@@ -0,0 +1,76 @@
+import { jsxs as C, jsx as r } from "react/jsx-runtime";
+import { IconX as S } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as y } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as D } from "../../../constants/icon.js";
+import { ElementSize as T } from "../../../types/size.js";
+import { TagAppearance as d } from "../../../types/tag.js";
+import { mergeClasses as _ } from "../../../utils/merge-classes.js";
+import { GhostIconButton as w } from "../IconButton/IconButtonWrappers.js";
+import { tagInteractiveClassName as z, tagHoverClassName as E, tagStateClassNames as K, tagBaseClassName as O } from "./constants.js";
+const H = ({
+  label: o,
+  icon: l,
+  appearance: n = d.Outlined,
+  selected: s = !1,
+  disabled: t = !1,
+  closable: p = !1,
+  removeLabel: u,
+  className: h,
+  title: I,
+  onClick: m,
+  onRemove: c,
+  onKeyDown: g,
+  ...i
+}) => {
+  const f = n === d.Selectable, a = !!m && !t, N = p && !!c && !t, k = f && s, x = (e) => {
+    g?.(e), !(!a || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
+  };
+  return /* @__PURE__ */ C(
+    "span",
+    {
+      ...i,
+      role: a ? "button" : i.role,
+      tabIndex: a ? 0 : i.tabIndex,
+      "aria-disabled": t || void 0,
+      "aria-pressed": f && a ? s : void 0,
+      onClick: t ? void 0 : m,
+      onKeyDown: x,
+      className: _(
+        O,
+        k ? "dial-tiny-semi-text" : "dial-tiny-text",
+        K[n][s ? "selected" : "default"],
+        // The design defines no disabled tag, so a disabled one keeps its
+        // colours and only stops responding.
+        t && "cursor-not-allowed",
+        a && [z, E],
+        h
+      ),
+      children: [
+        l && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: l }),
+        /* @__PURE__ */ r("span", { className: "truncate", title: I ?? o, children: o }),
+        N && /* @__PURE__ */ r(
+          w,
+          {
+            className: "size-[16px] shrink-0 dial-kit-minimum-target",
+            size: T.Small,
+            "aria-label": u ?? `Remove ${o}`,
+            icon: /* @__PURE__ */ r(
+              S,
+              {
+                size: D.SM,
+                stroke: y,
+                "aria-hidden": "true"
+              }
+            ),
+            onClick: (e) => {
+              e.stopPropagation(), c?.(e);
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  H as Tag
+};

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

@@ -0,0 +1,17 @@
+import { TagAppearance as e } from "../../../types/tag.js";
+const a = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3", l = {
+  [e.Outlined]: {
+    default: "bg-layer-raised text-primary",
+    selected: "bg-control-accent-alpha text-primary"
+  },
+  [e.Selectable]: {
+    default: "text-secondary",
+    selected: "bg-control-accent-alpha text-primary"
+  }
+}, c = "cursor-pointer outline-offset-0 focus-visible:outline focus-visible:outline-focus", o = "hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";
+export {
+  a as tagBaseClassName,
+  o as tagHoverClassName,
+  c as tagInteractiveClassName,
+  l as tagStateClassNames
+};

package/dist/components/New/TagInput/TagInput.js

@@ -0,0 +1,197 @@
+import { jsxs as D, jsx as a } from "react/jsx-runtime";
+import { useId as oe, useRef as R, useState as T, useCallback as v, useEffect as ae } from "react";
+import { ElementSize as L } from "../../../types/size.js";
+import { mergeClasses as c } from "../../../utils/merge-classes.js";
+import { Input as le } from "../Input/Input.js";
+import { Tag as d } from "../Tag/Tag.js";
+import { getVisibleTagCount as ce } from "./utils.js";
+const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
+  let o = r.length;
+  for (; o > 0 && r[o - 1] === ","; ) o--;
+  return r.slice(0, o);
+}, fe = () => {
+}, Te = ({
+  id: r,
+  value: o,
+  defaultValue: y,
+  size: N = L.Standard,
+  labelProps: j,
+  placeholder: A,
+  caption: B,
+  error: M,
+  invalid: G,
+  disabled: m = !1,
+  readOnly: p = !1,
+  collapseTagOverflow: s = !1,
+  ariaLabel: K,
+  tagListLabel: U = "Tags",
+  className: X,
+  fieldClassName: $,
+  tagClassName: u,
+  onChange: I
+}) => {
+  const z = oe(), F = r || z, q = N === L.Small, h = R(null), S = R([]), k = R(null), g = o !== void 0, [H, J] = T(
+    y ?? []
+  ), n = g ? o : H, i = n.length, [f, E] = T(""), [W, b] = T(i), l = !p && !m, w = v(
+    (e) => {
+      g || J(e), I?.(e);
+    },
+    [g, I]
+  ), Q = v(
+    (e) => (t) => {
+      S.current[e] = t;
+    },
+    []
+  ), x = v(() => {
+    const e = h.current;
+    if (!e || e.clientWidth === 0) {
+      b(n.length);
+      return;
+    }
+    const { paddingLeft: t, paddingRight: ie } = getComputedStyle(e);
+    b(
+      ce({
+        availableWidth: e.clientWidth - P(t) - P(ie) - (p ? 0 : pe),
+        tagWidths: n.map(
+          (de, re) => S.current[re]?.offsetWidth ?? 0
+        ),
+        overflowChipWidth: k.current?.offsetWidth ?? 0,
+        gap: me
+      })
+    );
+  }, [p, n]);
+  ae(() => {
+    if (!s) {
+      b(i);
+      return;
+    }
+    const e = h.current;
+    if (!e) return;
+    const t = new ResizeObserver(() => x());
+    return t.observe(e), x(), () => t.disconnect();
+  }, [s, x, i]);
+  const Y = c(
+    // A collapsed row shows a tag at its measured width or not at all; a
+    // wrapping row lets a long tag shrink and truncate instead.
+    s ? "shrink-0" : "min-w-0",
+    u
+  ), Z = (e) => {
+    const t = ue(e.trim()).trim();
+    !t || n.includes(t) || w([...n, t]);
+  }, O = (e) => {
+    w(n.filter((t) => t !== e));
+  }, V = () => {
+    Z(f), E("");
+  }, ee = (e) => {
+    if (l) {
+      if (e.key === "Enter" || e.key === ",") {
+        e.preventDefault(), V();
+        return;
+      }
+      e.key === "Backspace" && !f && i > 0 && (e.preventDefault(), w(n.slice(0, -1)));
+    }
+  }, te = () => {
+    l && f.trim() && V();
+  }, ne = s ? n.slice(0, W) : n, C = s ? n.slice(W) : [], _ = C.join(", "), se = i > 0 && /* @__PURE__ */ D(
+    "span",
+    {
+      role: "list",
+      "aria-label": U,
+      className: c(
+        "relative flex min-w-0 items-center gap-1",
+        s ? "flex-nowrap" : "flex-wrap"
+      ),
+      children: [
+        ne.map((e) => /* @__PURE__ */ a(
+          d,
+          {
+            role: "listitem",
+            label: e,
+            className: Y,
+            disabled: m,
+            closable: l,
+            onRemove: l ? () => O(e) : void 0
+          },
+          e
+        )),
+        C.length > 0 && /* @__PURE__ */ a(
+          d,
+          {
+            role: "listitem",
+            label: `+${C.length}`,
+            "aria-label": _,
+            title: _,
+            className: c("shrink-0", u),
+            disabled: m
+          }
+        ),
+        s && /* @__PURE__ */ D(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none invisible absolute left-0 top-0 h-0 overflow-hidden whitespace-nowrap",
+            children: [
+              n.map((e, t) => /* @__PURE__ */ a(
+                "span",
+                {
+                  ref: Q(t),
+                  className: "inline-flex",
+                  children: /* @__PURE__ */ a(
+                    d,
+                    {
+                      label: e,
+                      className: u,
+                      disabled: m,
+                      closable: l,
+                      onRemove: l ? fe : void 0
+                    }
+                  )
+                },
+                e
+              )),
+              /* @__PURE__ */ a("span", { ref: k, className: "inline-flex", children: /* @__PURE__ */ a(d, { label: `+${i}`, className: u }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ a(
+    le,
+    {
+      id: F,
+      size: N,
+      labelProps: j,
+      caption: B,
+      error: M,
+      invalid: G,
+      disabled: m,
+      readOnly: p,
+      value: f,
+      placeholder: i > 0 ? void 0 : A,
+      "aria-label": K,
+      wrapperRef: h,
+      onChange: (e) => E(e ?? ""),
+      onKeyDown: ee,
+      onBlur: te,
+      containerClassName: c("w-full", X),
+      wrapperClassName: c(
+        i > 0 && [
+          "!h-auto",
+          q ? "min-h-[24px] py-0.5" : "min-h-[40px] py-1.5",
+          s ? "flex-nowrap overflow-hidden" : "flex-wrap"
+        ],
+        $
+      ),
+      className: c(
+        "w-auto flex-1",
+        s ? "min-w-[24px]" : "min-w-[100px]",
+        p && "cursor-default"
+      ),
+      children: se
+    }
+  );
+};
+export {
+  Te as TagInput
+};

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

@@ -0,0 +1,21 @@
+const i = ({
+  availableWidth: r,
+  tagWidths: n,
+  overflowChipWidth: f,
+  gap: o
+}) => {
+  if (r <= 0) return n.length;
+  let t = 0, e = 0;
+  for (const c of n) {
+    const u = c + o;
+    if (t + u > r) break;
+    t += u, e++;
+  }
+  if (e === n.length) return e;
+  for (; e > 0 && t + f > r; )
+    e--, t -= n[e] + o;
+  return e;
+};
+export {
+  i as getVisibleTagCount
+};

package/dist/components/New/Textarea/Textarea.js

@@ -0,0 +1,55 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import "react";
+import { mergeClasses as n } from "../../../utils/merge-classes.js";
+import { ErrorText as u, CaptionText as v } from "../CaptionText/CaptionText.js";
+import { Label as N } from "../Label/Label.js";
+var b = /* @__PURE__ */ ((e) => (e.None = "none", e.Both = "both", e.Horizontal = "horizontal", e.Vertical = "vertical", e))(b || {});
+const s = {
+  none: "resize-none",
+  both: "resize",
+  horizontal: "resize-x",
+  vertical: "resize-y"
+}, C = (e) => typeof e == "boolean" ? s[
+  e ? "both" : "none"
+  /* None */
+] : s[e], B = ({
+  className: e = "",
+  value: m,
+  onChange: c,
+  error: r,
+  containerClassName: x,
+  resize: d = !1,
+  labelProps: o,
+  caption: f,
+  id: l,
+  ...a
+}) => {
+  const h = n(
+    "dial-kit-textarea dial-kit-input px-3 py-2",
+    a.invalid && "dial-kit-input-error",
+    a.disabled && "dial-kit-input-disable",
+    C(d),
+    e
+  );
+  return /* @__PURE__ */ i("div", { className: n("flex flex-col gap-2", x), children: [
+    o && /* @__PURE__ */ t(N, { ...o, htmlFor: l }),
+    /* @__PURE__ */ i("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ t(
+        "textarea",
+        {
+          id: l,
+          value: m || "",
+          className: h,
+          onChange: (p) => c?.(p.currentTarget.value),
+          ...a
+        }
+      ),
+      /* @__PURE__ */ t(u, { text: r }),
+      !r && /* @__PURE__ */ t(v, { text: f })
+    ] })
+  ] });
+};
+export {
+  B as Textarea,
+  b as TextareaResize
+};

package/dist/components/New/ThemeScope/ThemeScope.js

@@ -0,0 +1,14 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useContext as n, useMemo as i, createContext as m } from "react";
+import { mergeClasses as p } from "../../../utils/merge-classes.js";
+const o = m(""), d = ({ className: e, children: s }) => {
+  const t = n(o), c = i(
+    () => [t, e].filter(Boolean).join(" "),
+    [t, e]
+  );
+  return /* @__PURE__ */ r(o.Provider, { value: c, children: /* @__PURE__ */ r("div", { className: p("contents", e), children: s }) });
+}, f = () => n(o);
+export {
+  d as ThemeScope,
+  f as useThemeScope
+};

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
+};