@epam/ai-dial-ui-kit 0.16.0-dev.6 → 0.16.0-dev.60

package/dist/components/Slider/Slider.js

@@ -1,158 +0,0 @@
-import { jsxs as w, jsx as o, Fragment as D } from "react/jsx-runtime";
-import { useRef as z, useCallback as y } from "react";
-import { DialLabel as B } from "../Label/Label.js";
-import { mergeClasses as u } from "../../utils/merge-classes.js";
-const m = (t) => (t.toString().split(".")[1] ?? "").length, q = ({
-  value: t,
-  min: e = 0,
-  max: c = 1,
-  step: r = 0.1,
-  disabled: a = !1,
-  labelProps: g,
-  labels: s,
-  formatValue: M,
-  onChange: l,
-  className: F,
-  trackClassName: N,
-  fillClassName: A,
-  thumbClassName: P,
-  labelsClassName: R,
-  "aria-label": j,
-  "aria-labelledby": X,
-  ...b
-}) => {
-  const k = z(null), v = Math.max(
-    0,
-    Math.min(100, (t - e) / (c - e) * 100)
-  ), I = m(r), K = M ? M(t) : t.toFixed(I), h = y(
-    (n) => {
-      const p = k.current;
-      if (!p) return t;
-      const d = p.getBoundingClientRect(), x = (n - d.left) / d.width, i = e + x * (c - e), f = m(r), $ = parseFloat(
-        (Math.round((i - e) / r) * r + e).toFixed(f)
-      );
-      return Math.min(c, Math.max(e, $));
-    },
-    [e, c, r, t]
-  ), L = y(
-    (n) => {
-      a || (n.currentTarget.setPointerCapture(n.pointerId), l?.(h(n.clientX)));
-    },
-    [a, h, l]
-  ), S = y(
-    (n) => {
-      a || n.buttons === 0 || l?.(h(n.clientX));
-    },
-    [a, h, l]
-  ), V = y(
-    (n) => {
-      if (a) return;
-      const p = m(r), d = (f) => parseFloat((Math.round((f - e) / r) * r + e).toFixed(p)), x = (f) => Math.min(c, Math.max(e, f));
-      let i = t;
-      switch (n.key) {
-        case "ArrowRight":
-        case "ArrowUp":
-          i = x(d(t + r));
-          break;
-        case "ArrowLeft":
-        case "ArrowDown":
-          i = x(d(t - r));
-          break;
-        case "Home":
-          i = e;
-          break;
-        case "End":
-          i = c;
-          break;
-        default:
-          return;
-      }
-      n.preventDefault(), i !== t && l?.(i);
-    },
-    [a, t, r, e, c, l]
-  );
-  return /* @__PURE__ */ w(
-    "div",
-    {
-      className: u(
-        "flex flex-col",
-        a && "pointer-events-none opacity-50",
-        F
-      ),
-      ...b,
-      children: [
-        g && /* @__PURE__ */ o(B, { ...g, htmlFor: b.id }),
-        /* @__PURE__ */ w(
-          "div",
-          {
-            ref: k,
-            className: "relative flex h-[38px] cursor-pointer items-center",
-            onPointerDown: L,
-            onPointerMove: S,
-            children: [
-              /* @__PURE__ */ o(
-                "div",
-                {
-                  className: u(
-                    "pointer-events-none absolute inset-x-0 h-3 rounded-[10px] bg-layer-1",
-                    N
-                  )
-                }
-              ),
-              /* @__PURE__ */ o(
-                "div",
-                {
-                  className: u(
-                    "pointer-events-none absolute left-0 h-3 rounded-[10px] bg-controls-accent-primary",
-                    A
-                  ),
-                  style: { width: `${v}%` }
-                }
-              ),
-              /* @__PURE__ */ o(
-                "div",
-                {
-                  role: "slider",
-                  tabIndex: a ? -1 : 0,
-                  "aria-valuenow": t,
-                  "aria-valuemin": e,
-                  "aria-valuemax": c,
-                  "aria-disabled": a || void 0,
-                  "aria-label": j,
-                  "aria-labelledby": X,
-                  className: u(
-                    "dial-small-text absolute -translate-x-1/2 flex size-[38px] cursor-grab select-none items-center justify-center rounded-full bg-layer-3 text-primary shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-focus",
-                    P
-                  ),
-                  style: { left: `${v}%` },
-                  onKeyDown: V,
-                  children: K
-                }
-              )
-            ]
-          }
-        ),
-        s && /* @__PURE__ */ o(
-          "div",
-          {
-            className: u(
-              "dial-tiny-text flex text-secondary",
-              R
-            ),
-            children: s.length === 3 ? /* @__PURE__ */ w(D, { children: [
-              /* @__PURE__ */ o("span", { children: s[0] }),
-              /* @__PURE__ */ o("span", { className: "flex-1 text-center", children: s[1] }),
-              /* @__PURE__ */ o("span", { children: s[2] })
-            ] }) : /* @__PURE__ */ w(D, { children: [
-              /* @__PURE__ */ o("span", { children: s[0] }),
-              /* @__PURE__ */ o("span", { className: "ml-auto", children: s[1] })
-            ] })
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  q as DialSlider
-};

package/dist/components/Steps/Step.js

@@ -1,34 +0,0 @@
-import { jsxs as f, jsx as s } from "react/jsx-runtime";
-import { IconExclamationCircle as x, IconCheck as d } from "@tabler/icons-react";
-import { StepStatus as i } from "../../models/step.js";
-import r from "classnames";
-import { getCircleClass as C, getStepClass as p } from "./utils.js";
-import { DIAL_ICON_SIZE as o } from "../../constants/icon.js";
-const g = ({
-  step: t,
-  index: n,
-  currentStep: e,
-  onChangeStep: l
-}) => {
-  const a = "h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny-text cursor-pointer dial-step", m = "w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white", c = () => e === t.id && t.status === i.ERROR ? /* @__PURE__ */ s(x, { stroke: 2, size: o.SM }) : e !== t.id && t.status === i.VALID ? /* @__PURE__ */ s(d, { stroke: 2, size: o.SM }) : n + 1;
-  return /* @__PURE__ */ f(
-    "button",
-    {
-      className: r(a, p(t, e)),
-      onClick: () => l(t.id),
-      children: [
-        /* @__PURE__ */ s(
-          "span",
-          {
-            className: r(m, C(t, e)),
-            children: c()
-          }
-        ),
-        /* @__PURE__ */ s("span", { children: t.name })
-      ]
-    }
-  );
-};
-export {
-  g as DialStep
-};

package/dist/components/Steps/Steps.js

@@ -1,27 +0,0 @@
-import { jsx as d } from "react/jsx-runtime";
-import { StepStatus as f } from "../../models/step.js";
-import { DialStep as m } from "./Step.js";
-const u = ({
-  steps: n,
-  currentStep: t,
-  onChangeStep: o
-}) => {
-  const l = (i) => {
-    const a = n.findIndex((e) => e.id === t), r = n.findIndex((e) => e.id === i);
-    if (i === t) return;
-    (n.slice(0, r).every((e) => e.status === f.VALID) || r < a) && o(i);
-  };
-  return /* @__PURE__ */ d("div", { id: "steps", className: "flex gap-x-3", children: n.map((i, a) => /* @__PURE__ */ d(
-    m,
-    {
-      currentStep: t,
-      onChangeStep: l,
-      step: i,
-      index: a
-    },
-    i.id
-  )) });
-};
-export {
-  u as DialSteps
-};

package/dist/components/Steps/utils.js

@@ -1,42 +0,0 @@
-import { StepStatus as r } from "../../models/step.js";
-const c = (e, t) => {
-  if (t === e.id)
-    switch (e.status) {
-      case r.VALID:
-        return "border-accent-secondary text-primary";
-      case r.ERROR:
-        return "border-red-900 text-primary";
-      default:
-        return "border-accent-primary text-primary";
-    }
-  switch (e.status) {
-    case r.VALID:
-      return "border-primary text-primary";
-    case r.ERROR:
-      return "border-red-900 text-error";
-    default:
-      return "border-primary text-secondary";
-  }
-}, s = (e, t) => {
-  if (t === e.id)
-    switch (e.status) {
-      case r.VALID:
-        return "bg-accent-secondary";
-      case r.ERROR:
-        return "bg-red-400";
-      default:
-        return "bg-accent-primary";
-    }
-  switch (e.status) {
-    case r.VALID:
-      return "bg-accent-secondary";
-    case r.ERROR:
-      return "bg-red-400";
-    default:
-      return "bg-layer-4";
-  }
-};
-export {
-  s as getCircleClass,
-  c as getStepClass
-};

package/dist/components/Switch/Switch.js

@@ -1,70 +0,0 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import t from "classnames";
-import { useCallback as x } from "react";
-const y = ({
-  label: s,
-  switchId: c,
-  isOn: e = !1,
-  disabled: r,
-  onChange: o,
-  caption: l
-}) => {
-  const n = t(
-    "flex shrink-0 w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",
-    e ? "flex-row-reverse" : "flex-row",
-    r ? "pointer-events-none" : "",
-    r ? e ? "bg-controls-disable" : "bg-layer-4" : e ? "bg-accent-primary" : "bg-layer-4"
-  ), m = x(
-    (p) => {
-      p.stopPropagation(), o?.(!e);
-    },
-    [o, e]
-  );
-  return /* @__PURE__ */ i("div", { className: "flex flex-row items-start", role: "switch", children: [
-    /* @__PURE__ */ a(
-      "input",
-      {
-        type: "checkbox",
-        onChange: m,
-        id: c,
-        disabled: r,
-        className: "invisible size-0",
-        checked: e
-      }
-    ),
-    /* @__PURE__ */ a(
-      "label",
-      {
-        htmlFor: c,
-        className: n,
-        "aria-describedby": l && "caption",
-        children: /* @__PURE__ */ a(
-          "span",
-          {
-            className: t(
-              "size-3 rounded-full",
-              r ? "bg-controls-disable-accent" : "bg-controls-enable-primary"
-            )
-          }
-        )
-      }
-    ),
-    (s || l) && /* @__PURE__ */ i("div", { className: "flex flex-col gap-1 ml-2", children: [
-      s && /* @__PURE__ */ a(
-        "span",
-        {
-          className: t(
-            "dial-small-text py-[1px]",
-            r ? "text-secondary" : "text-primary"
-          ),
-          "aria-label": "switch-title",
-          children: s
-        }
-      ),
-      l && /* @__PURE__ */ a("span", { id: "caption", className: "dial-tiny-text text-secondary", children: l })
-    ] })
-  ] });
-};
-export {
-  y as DialSwitch
-};

package/dist/components/TagInput/TagInput.js

@@ -1,179 +0,0 @@
-import { jsxs as N, jsx as r } from "react/jsx-runtime";
-import { useRef as C, useState as d, useCallback as H, useEffect as D } from "react";
-import v from "classnames";
-import { DialLabel as y } from "../Label/Label.js";
-import { DialTag as x } from "../Tag/Tag.js";
-import { DialErrorText as O, DialCaptionText as ee } from "../CaptionText/CaptionText.js";
-import { DialTooltip as te } from "../Tooltip/Tooltip.js";
-const k = 8, ne = 24, fe = ({
-  initialTags: a = [],
-  label: I,
-  required: K,
-  elementId: E,
-  placeholder: X,
-  captionDescription: _,
-  errorText: P,
-  invalid: F,
-  disabled: c,
-  collapseTagOverflow: i = !1,
-  readOnly: s = !1,
-  containerClassName: J,
-  tagClassName: V,
-  onChange: $
-}) => {
-  const o = C(null), b = C([]), S = C(null), [n, w] = d(a), [h, R] = d(""), [T, U] = d(!1), [m, g] = d(a.length), q = H((e) => (t) => {
-    b.current[e] = t;
-  }, []), W = H(() => {
-    if (!i) return;
-    const e = o.current;
-    if (!e) return;
-    const t = e.offsetWidth;
-    if (t === 0) return;
-    const u = S.current?.offsetWidth ?? 0, z = t - (s ? 0 : ne) - k;
-    let p = 0, l = 0;
-    for (let f = 0; f < n.length; f++) {
-      const B = b.current[f];
-      if (!B) continue;
-      const G = B.offsetWidth + k;
-      if (p + G > z) break;
-      p += G, l++;
-    }
-    if (l < n.length && l > 0)
-      for (; p + u > z && l > 0; ) {
-        l--;
-        const f = b.current[l]?.offsetWidth ?? 0;
-        p -= f + k;
-      }
-    g(l);
-  }, [i, s, n.length]), j = (e) => {
-    const t = e.trim().replace(/,$/, "");
-    if (t && !n.includes(t)) {
-      const u = [t, ...n];
-      w(u), $?.(u);
-    }
-  }, Q = (e) => {
-    (e.key === "," || e.key === "Enter") && (e.preventDefault(), j(h), R(""));
-  }, Y = () => {
-    h.trim() && (j(h), R(""));
-  }, A = (e) => {
-    const t = n.filter((u, M) => M !== e);
-    w(t), $?.(t);
-  }, Z = () => P ? /* @__PURE__ */ r(O, { text: P }) : _ ? /* @__PURE__ */ r(ee, { text: _ }) : null;
-  D(() => {
-    if (i) return;
-    const e = new ResizeObserver(() => {
-      if (o.current) {
-        const t = o.current.scrollHeight > o.current.clientHeight + 10;
-        U(t);
-      }
-    });
-    return o.current && e.observe(o.current), () => e.disconnect();
-  }, [n, i]), D(() => {
-    if (!i) {
-      g(n.length);
-      return;
-    }
-    g(n.length);
-    const e = new ResizeObserver(() => {
-      W();
-    }), t = o.current;
-    return t && e.observe(t), W(), () => e.disconnect();
-  }, [i, W, n]), D(() => {
-    w(a);
-  }, [JSON.stringify(a)]);
-  const L = /* @__PURE__ */ N(
-    "div",
-    {
-      ref: o,
-      className: v(
-        "flex gap-2 items-center relative",
-        i ? "flex-nowrap overflow-hidden w-full min-w-0" : v("flex-wrap", T ? "flex-col-reverse" : "flex-row"),
-        J
-      ),
-      children: [
-        (i ? n.slice(0, m) : n).map(
-          (e, t) => /* @__PURE__ */ r(
-            x,
-            {
-              label: e,
-              className: V,
-              closable: !c && !s,
-              onRemove: !c && !s ? () => A(t) : void 0
-            },
-            e + t
-          )
-        ),
-        i && m < n.length && /* @__PURE__ */ r(
-          te,
-          {
-            tooltip: n.slice(m).join(", "),
-            triggerClassName: "inline-flex shrink-0 cursor-pointer",
-            children: /* @__PURE__ */ r(x, { label: `+${n.length - m}` })
-          }
-        ),
-        !s && /* @__PURE__ */ r(
-          "input",
-          {
-            id: E,
-            type: "text",
-            value: h,
-            onChange: (e) => R(e.target.value),
-            onKeyDown: Q,
-            onBlur: Y,
-            className: v(
-              "dial-input outline-none !border-none w-full flex-1 !p-1 !h-auto",
-              i ? "min-w-0" : "min-w-[100px]"
-            ),
-            placeholder: X ?? "",
-            disabled: c
-          }
-        ),
-        i && /* @__PURE__ */ N(
-          "div",
-          {
-            className: "absolute left-0 top-0 invisible pointer-events-none h-0 overflow-hidden whitespace-nowrap",
-            "aria-hidden": !0,
-            children: [
-              n.map((e, t) => /* @__PURE__ */ r(
-                "div",
-                {
-                  ref: q(t),
-                  className: "inline-flex shrink-0",
-                  children: /* @__PURE__ */ r(
-                    x,
-                    {
-                      label: e,
-                      className: V,
-                      closable: !c && !s,
-                      onRemove: !c && !s ? () => A(t) : void 0
-                    }
-                  )
-                },
-                `measure-${e}-${t}`
-              )),
-              /* @__PURE__ */ r("div", { ref: S, className: "inline-flex shrink-0", children: /* @__PURE__ */ r(x, { label: `+${n.length}` }) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-  return s ? L : /* @__PURE__ */ N("div", { className: "flex flex-col gap-2 w-full", children: [
-    /* @__PURE__ */ r(y, { label: I, required: K, htmlFor: E }),
-    /* @__PURE__ */ r(
-      "div",
-      {
-        className: v(
-          "dial-input min-h-[38px] p-[6px]",
-          F && "dial-input-error",
-          c && "dial-input-disable"
-        ),
-        children: L
-      }
-    ),
-    Z()
-  ] });
-};
-export {
-  fe as DialTagInput
-};

package/dist/components/Textarea/Textarea.js

@@ -1,43 +0,0 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import "react";
-import { mergeClasses as l } from "../../utils/merge-classes.js";
-import { DialErrorText as u, DialCaptionText as g } from "../CaptionText/CaptionText.js";
-import { DialLabel as v } from "../Label/Label.js";
-const b = ({
-  className: s = "",
-  value: o,
-  onChange: m,
-  error: t,
-  containerClassName: n,
-  resize: x = !1,
-  labelProps: i,
-  caption: d,
-  id: r,
-  ...a
-}) => {
-  const p = l(
-    "dial-textarea dial-input px-3 py-2",
-    a.invalid && "dial-input-error",
-    a.disabled && "dial-input-disable",
-    x ? "resize" : "resize-none",
-    s
-  );
-  return /* @__PURE__ */ f("div", { className: l("flex flex-col gap-y-1", n), children: [
-    i && /* @__PURE__ */ e(v, { ...i, htmlFor: r }),
-    /* @__PURE__ */ e(
-      "textarea",
-      {
-        id: r,
-        value: o || "",
-        className: p,
-        onChange: (c) => m?.(c.currentTarget.value),
-        ...a
-      }
-    ),
-    /* @__PURE__ */ e(u, { text: t }),
-    !t && /* @__PURE__ */ e(g, { text: d })
-  ] });
-};
-export {
-  b as DialTextarea
-};

package/dist/constants/editor.js

@@ -1,52 +0,0 @@
-import { EditorThemes as r } from "../types/editor.js";
-const e = {
-  [r.dark]: {
-    base: "vs-dark",
-    inherit: !1,
-    rules: [
-      { token: "string.key.json", foreground: "#37BABC" },
-      { token: "string.value.json", foreground: "#5C8DEA" },
-      { token: "number", foreground: "#D97C27" },
-      { token: "keyword.json", foreground: "#F4CE46" },
-      { token: "delimiter", foreground: "#EEF1F7" },
-      { token: "delimiter.bracket.json", foreground: "#A972FF" },
-      { token: "delimiter.parenthesis", foreground: "#A972FF" }
-    ],
-    colors: {
-      "editor.foreground": "#F76464",
-      "editor.background": "#161B2D",
-      "editorCursor.foreground": "#EEF1F7",
-      "editor.selectionBackground": "#5C8DEA2B",
-      "editorLineNumber.foreground": "#242C42",
-      "scrollbarSlider.background": "#242C42",
-      "scrollbarSlider.hoverBackground": "#242C42",
-      "scrollbarSlider.activeBackground": "#242C42"
-    }
-  },
-  [r.light]: {
-    base: "vs",
-    inherit: !1,
-    rules: [
-      { token: "string.key.json", foreground: "#009D9F" },
-      { token: "string.value.json", foreground: "#2764D9" },
-      { token: "number", foreground: "#B25500" },
-      { token: "keyword.json", foreground: "#3F3D25" },
-      { token: "delimiter", foreground: "#161B2D" },
-      { token: "delimiter.bracket.json", foreground: "#7E39EC" },
-      { token: "delimiter.parenthesis", foreground: "#7E39EC" }
-    ],
-    colors: {
-      "editor.foreground": "#AE2F2F",
-      "editor.background": "#EEF1F7",
-      "editorCursor.foreground": "#161B2D",
-      "editor.selectionBackground": "#5C8DEA2B",
-      "editorLineNumber.foreground": "#242C42",
-      "scrollbarSlider.background": "#242C42",
-      "scrollbarSlider.hoverBackground": "#242C42",
-      "scrollbarSlider.activeBackground": "#242C42"
-    }
-  }
-};
-export {
-  e as EDITOR_THEMES_CONFIG
-};