@epam/ai-dial-ui-kit 0.14.0-dev.5 → 0.14.0-dev.50

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,90 @@
+import { jsx as t, Fragment as $, jsxs as k } from "react/jsx-runtime";
+import "react";
+import { mergeClasses as n } from "../../utils/merge-classes.js";
+import { SkeletonVariant as i, SkeletonAvatarShape as N } from "../../types/skeleton.js";
+import { getAvatarSize as F } from "./utils.js";
+const G = ({
+  active: j = !0,
+  paragraph: u = !0,
+  avatar: m = !1,
+  showTitle: p = !0,
+  loading: S = !0,
+  children: g,
+  variant: o = i.Default,
+  width: l,
+  height: c,
+  overlay: s,
+  color: e,
+  className: h,
+  ...b
+}) => {
+  if (!S && g)
+    return /* @__PURE__ */ t($, { children: g });
+  const d = n(
+    "bg-layer-raised",
+    j && "animate-pulse",
+    h
+  );
+  if (o !== i.Default) {
+    const a = n(
+      d,
+      o === i.Circular && "rounded-full",
+      o === i.Rectangular && "rounded",
+      o === i.Text && "rounded",
+      !!s && "relative"
+    ), r = {};
+    return l && (r.width = typeof l == "number" ? `${l}px` : l), c && (r.height = typeof c == "number" ? `${c}px` : c), e && (r.backgroundColor = e), /* @__PURE__ */ t("div", { className: a, style: r, ...b, children: s && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: s }) });
+  }
+  const A = !!m, w = !!p, z = !!u, x = typeof m == "object" ? m : {}, W = typeof p == "object" ? p : {}, C = typeof u == "object" ? u : {}, y = F(x.size), D = x.shape ?? N.Circle, P = W.width ?? "38%", v = C.rows ?? 3, f = C.width, R = (a) => f ? Array.isArray(f) ? f[a] ?? "100%" : f : a === v - 1 ? "61%" : "100%";
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      ...b,
+      className: n("flex gap-4", !!s && "relative", h),
+      children: [
+        A && /* @__PURE__ */ t(
+          "div",
+          {
+            className: n(
+              d,
+              D === N.Circle ? "rounded-full" : "rounded",
+              "flex-shrink-0"
+            ),
+            style: {
+              width: y,
+              height: y,
+              ...e && { backgroundColor: e }
+            }
+          }
+        ),
+        /* @__PURE__ */ k("div", { className: "flex-1 flex flex-col gap-3", children: [
+          w && /* @__PURE__ */ t(
+            "div",
+            {
+              className: n(d, "h-4 rounded"),
+              style: {
+                width: P,
+                ...e && { backgroundColor: e }
+              }
+            }
+          ),
+          z && /* @__PURE__ */ t("div", { className: "flex flex-col gap-3", children: Array.from({ length: v }).map((a, r) => /* @__PURE__ */ t(
+            "div",
+            {
+              className: n(d, "h-4 rounded"),
+              style: {
+                width: R(r),
+                ...e && { backgroundColor: e }
+              }
+            },
+            r
+          )) })
+        ] }),
+        s && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: s })
+      ]
+    }
+  );
+};
+export {
+  G as Skeleton
+};

package/dist/components/Skeleton/utils.js

@@ -0,0 +1,16 @@
+import { SkeletonAvatarSize as r } from "../../types/skeleton.js";
+const a = (e) => {
+  if (typeof e == "number") return e;
+  switch (e) {
+    case r.Small:
+      return 32;
+    case r.Large:
+      return 64;
+    case r.Default:
+    default:
+      return 40;
+  }
+};
+export {
+  a as getAvatarSize
+};

package/dist/components/Slider/Slider.js

@@ -0,0 +1,158 @@
+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/Spinner/Spinner.js

@@ -0,0 +1,30 @@
+import { jsx as r } from "react/jsx-runtime";
+import { mergeClasses as a } from "../../utils/merge-classes.js";
+const o = ({
+  size: e = 40,
+  className: s,
+  fullWidth: t = !1,
+  ariaLabel: i = "Loading"
+}) => /* @__PURE__ */ r(
+  "div",
+  {
+    role: "status",
+    className: a(
+      "flex items-center justify-center",
+      { "size-full": t },
+      s
+    ),
+    children: /* @__PURE__ */ r(
+      "div",
+      {
+        role: "img",
+        "aria-label": i,
+        style: { width: e, height: e },
+        className: "rounded-full border-2 border-secondary border-t-accent animate-spin-steps shrink-0"
+      }
+    )
+  }
+);
+export {
+  o as Spinner
+};

package/dist/components/Steps/Step.js

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,70 @@
+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/Tab/Tab.js

@@ -0,0 +1,65 @@
+import { jsxs as y, jsx as l } from "react/jsx-runtime";
+import { IconCheck as f, IconExclamationCircle as g, IconAlertTriangle as C } from "@tabler/icons-react";
+import { DialEllipsisTooltip as N } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { DIAL_ICON_SIZE as I, BASE_ICON_PROPS as n } from "../../constants/icon.js";
+import { TabView as d } from "../../types/tab.js";
+import { mergeClasses as s } from "../../utils/merge-classes.js";
+const T = ({
+  tab: e,
+  active: r,
+  invalid: t,
+  className: o,
+  horizontal: a,
+  view: m = d.Default,
+  onClick: p
+}) => {
+  const i = m === d.Inline, c = s(
+    "rounded h-[38px] items-center flex flex-row border-transparent cursor-pointer dial-small-text hover:text-accent-primary",
+    { "border-b-2 px-4": a, "border-l-2 px-3": !a },
+    {
+      "bg-layer-4": a,
+      "bg-layer-1 text-secondary pointer-events-none": e.disabled,
+      "bg-accent-primary-alpha text-primary": r && !e.disabled,
+      "text-primary": !r && !e.disabled,
+      "border-b-accent-primary": r && a && !e.disabled,
+      "border-l-accent-primary": r && !a && !e.disabled
+    }
+  ), x = s(
+    "flex flex-row gap-1 h-6 items-center py-1 px-2 rounded cursor-pointer hover:bg-accent-primary-alpha",
+    r ? "dial-small-semi-text" : "dial-small-text",
+    {
+      "text-secondary pointer-events-none": e.disabled,
+      "bg-accent-primary-alpha text-primary": r && !e.disabled,
+      "text-secondary": !r && !e.disabled
+    }
+  ), b = s(
+    i ? x : c,
+    o
+  );
+  return /* @__PURE__ */ y(
+    "button",
+    {
+      role: "tab",
+      "aria-selected": r,
+      className: b,
+      onClick: () => p(e.id),
+      disabled: e.disabled,
+      children: [
+        i && r && !e.disabled && /* @__PURE__ */ l(f, { size: I.SM }),
+        /* @__PURE__ */ l(
+          N,
+          {
+            text: e.label,
+            contentClassName: "max-w-[200px]",
+            className: "max-w-[200px]"
+          }
+        ),
+        (t || e.invalid) && /* @__PURE__ */ l("div", { className: "text-error pl-1", children: /* @__PURE__ */ l(g, { ...n }) }),
+        e.warning && /* @__PURE__ */ l("div", { className: "text-warning pl-1", children: /* @__PURE__ */ l(C, { ...n }) })
+      ]
+    }
+  );
+};
+export {
+  T as DialTab
+};