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

package/dist/components/New/Slider/Slider.js

@@ -0,0 +1,112 @@
+import { jsxs as n, jsx as e, Fragment as C } from "react/jsx-runtime";
+import { useId as w, useCallback as A } from "react";
+import { mergeClasses as i } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as B } from "../../../utils/accessible-name.js";
+import { ErrorText as H, CaptionText as L } from "../CaptionText/CaptionText.js";
+import { Label as U } from "../Label/Label.js";
+const Z = 16, _ = (o) => (o.toString().split(".")[1] ?? "").length, O = ({
+  id: o,
+  value: r,
+  min: d = 0,
+  max: h = 1,
+  step: x = 0.1,
+  disabled: a,
+  labelProps: l,
+  labels: t,
+  formatValue: m,
+  showValue: p = !1,
+  caption: f,
+  error: c,
+  onChange: g,
+  containerClassName: $,
+  trackClassName: F,
+  fillClassName: M,
+  className: S,
+  ...u
+}) => {
+  const T = w(), s = o ?? T, v = f && !c ? `${s}-caption` : void 0, N = c ? `${s}-error` : void 0, y = h - d, b = y > 0 ? Math.min(100, Math.max(0, (r - d) / y * 100)) : 0, j = `calc(${b}% + ${(0.5 - b / 100) * Z}px)`, I = m ? m(r) : r.toFixed(_(x)), k = A(
+    (E) => {
+      g?.(Number(E.target.value));
+    },
+    [g]
+  );
+  return /* @__PURE__ */ n("div", { className: i("flex flex-col gap-2", $), children: [
+    (l || p) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      l && /* @__PURE__ */ e(U, { ...l, htmlFor: s }),
+      p && // The input already reports its value to assistive tech, so this is
+      // a visual echo rather than a second announcement.
+      /* @__PURE__ */ e(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: i(
+            "dial-small-text ml-auto",
+            a ? "text-control-disable-primary" : "text-primary"
+          ),
+          children: I
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ n("div", { className: "relative flex h-6 items-center", children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: i(
+              "pointer-events-none absolute inset-x-0 h-1 rounded-full",
+              a ? "bg-control-disable-primary" : "bg-control-neutral-active",
+              F
+            )
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: i(
+              "pointer-events-none absolute left-0 h-1 rounded-full",
+              a ? "bg-control-disable-secondary" : "bg-control-accent",
+              M
+            ),
+            style: { width: j }
+          }
+        ),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ...u,
+            type: "range",
+            id: s,
+            value: r,
+            min: d,
+            max: h,
+            step: x,
+            disabled: a,
+            onChange: k,
+            "aria-label": B(
+              typeof l?.label != "string" ? u["aria-label"] : void 0
+            ),
+            "aria-valuetext": m ? I : void 0,
+            "aria-describedby": N ?? v,
+            className: i(
+              "dial-kit-slider absolute inset-0 h-full w-full",
+              S
+            )
+          }
+        )
+      ] }),
+      t && /* @__PURE__ */ e("div", { className: "dial-tiny-text flex text-secondary", children: t.length === 3 ? /* @__PURE__ */ n(C, { children: [
+        /* @__PURE__ */ e("span", { children: t[0] }),
+        /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: t[1] }),
+        /* @__PURE__ */ e("span", { children: t[2] })
+      ] }) : /* @__PURE__ */ n(C, { children: [
+        /* @__PURE__ */ e("span", { children: t[0] }),
+        /* @__PURE__ */ e("span", { className: "ml-auto", children: t[1] })
+      ] }) }),
+      /* @__PURE__ */ e(H, { id: N, text: c }),
+      !c && /* @__PURE__ */ e(L, { id: v, text: f })
+    ] })
+  ] });
+};
+export {
+  O as Slider
+};

package/dist/components/New/Switch/Switch.js

@@ -0,0 +1,95 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useId as b, useCallback as g } from "react";
+import { ElementSize as x } from "../../../types/size.js";
+import { mergeClasses as r } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as y } from "../../../utils/accessible-name.js";
+import { Label as v } from "../Label/Label.js";
+const S = ({
+  id: m,
+  labelProps: o,
+  isOn: t = !1,
+  disabled: l,
+  onChange: a,
+  caption: c,
+  className: u,
+  ...i
+}) => {
+  const p = b(), s = m ?? p, n = c ? `${s}-caption` : void 0, f = g(
+    (h) => {
+      a?.(h.target.checked);
+    },
+    [a]
+  );
+  return /* @__PURE__ */ d("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ d("div", { className: r("flex items-center gap-2", u), children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ...i,
+          type: "checkbox",
+          role: "switch",
+          id: s,
+          checked: t,
+          "aria-checked": t,
+          disabled: l,
+          onChange: f,
+          "aria-label": y(
+            typeof o?.label != "string" ? i["aria-label"] : void 0
+          ),
+          "aria-describedby": n,
+          className: "peer sr-only"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "label",
+        {
+          htmlFor: s,
+          className: r(
+            "flex h-[18px] w-[36px] shrink-0 items-center rounded-full p-0.5 transition-colors duration-200",
+            "peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus",
+            t ? "justify-end" : "justify-start",
+            l ? "cursor-not-allowed bg-control-disable-primary" : r(
+              "cursor-pointer",
+              t ? "bg-control-accent hover:bg-control-accent-hover" : "bg-control-neutral-default hover:bg-control-neutral-hover-strong"
+            )
+          ),
+          children: /* @__PURE__ */ e(
+            "span",
+            {
+              className: r(
+                "size-3.5 shrink-0 rounded-full",
+                l ? "bg-control-disable-secondary" : "bg-control-neutral"
+              )
+            }
+          )
+        }
+      ),
+      o && /* @__PURE__ */ e(
+        v,
+        {
+          size: x.Standard,
+          ...o,
+          htmlFor: s,
+          className: r(
+            // `Label` defaults to the secondary colour; the switch's own label
+            // has always been primary while the control is usable.
+            "py-[1px]",
+            l ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
+            o.className
+          )
+        }
+      )
+    ] }),
+    c && /* @__PURE__ */ e(
+      "span",
+      {
+        id: n,
+        className: "dial-tiny-text text-secondary ml-[44px]",
+        children: c
+      }
+    )
+  ] });
+};
+export {
+  S as Switch
+};

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