@epam/ai-dial-ui-kit 0.16.0-dev.7 → 0.16.0-dev.70

package/dist/components/New/TransferQueue/TransferQueueRow.js

@@ -1,82 +1,139 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { IconX as d, IconCheck as u, IconAlertCircleFilled as f, IconAlertTriangleFilled as g } from "@tabler/icons-react";
-import { EllipsisTooltip as I } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { FileIcon as h } from "../FileIcon/FileIcon.js";
-import { GhostIconButton as S } from "../IconButton/IconButtonWrappers.js";
-import { Tooltip as x } from "../Tooltip/Tooltip.js";
-import { DIAL_KIT_ICON_STROKE as m } from "../constants/icon.js";
-import { Spinner as y } from "../../Spinner/Spinner.js";
-import { DIAL_ICON_SIZE as t } from "../../../constants/icon.js";
-import { DialItemType as N } from "../../../types/item.js";
-import { ElementSize as T } from "../../../types/size.js";
-import { TransferQueueItemStatus as s } from "../../../types/transfer-queue.js";
-import { mergeClasses as i } from "../../../utils/merge-classes.js";
-import { STATUS_SLOT_CLASS as c } from "./constants.js";
-const p = ({ message: e, isError: a }) => /* @__PURE__ */ r(x, { tooltip: e, asChild: !0, children: /* @__PURE__ */ r(
+import { IconX as g, IconCheck as I, IconAlertCircleFilled as S, IconAlertTriangleFilled as N } from "@tabler/icons-react";
+import { EllipsisTooltip as x } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { FileIcon as y } from "../FileIcon/FileIcon.js";
+import { GhostIconButton as M } from "../IconButton/IconButtonWrappers.js";
+import { Tooltip as k } from "../Tooltip/Tooltip.js";
+import { DIAL_KIT_ICON_STROKE as u } from "../constants/icon.js";
+import { Spinner as T } from "../../Spinner/Spinner.js";
+import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
+import { DialItemType as v } from "../../../types/item.js";
+import { ElementSize as C } from "../../../types/size.js";
+import { TransferQueueItemStatus as n } from "../../../types/transfer-queue.js";
+import { mergeClasses as c } from "../../../utils/merge-classes.js";
+import { STATUS_SLOT_CLASS as m } from "./constants.js";
+const h = ({ message: e, isError: a }) => /* @__PURE__ */ r(k, { tooltip: e, asChild: !0, children: /* @__PURE__ */ r(
   "span",
   {
-    className: c,
+    className: m,
     role: "img",
     "aria-label": e,
     tabIndex: 0,
     children: /* @__PURE__ */ r(
-      a ? f : g,
+      a ? S : N,
       {
-        size: t.SM,
+        size: s.SM,
         className: a ? "text-error" : "text-warning-icon",
         "aria-hidden": !0
       }
     )
   }
-) }), j = ({
+) }), p = 2, d = (s.SM - p) / 2, f = 2 * Math.PI * d, L = ({ percent: e, label: a, className: o }) => {
+  const i = Math.min(100, Math.max(0, Math.round(e))), t = s.SM / 2;
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      role: "progressbar",
+      "aria-label": a,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": i,
+      className: c("flex", o),
+      children: /* @__PURE__ */ l(
+        "svg",
+        {
+          width: s.SM,
+          height: s.SM,
+          viewBox: `0 0 ${s.SM} ${s.SM}`,
+          className: "-rotate-90",
+          "aria-hidden": !0,
+          children: [
+            /* @__PURE__ */ r(
+              "circle",
+              {
+                cx: t,
+                cy: t,
+                r: d,
+                fill: "none",
+                strokeWidth: p,
+                className: "stroke-(--stroke-secondary,#d1dbea)"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "circle",
+              {
+                cx: t,
+                cy: t,
+                r: d,
+                fill: "none",
+                strokeWidth: p,
+                strokeLinecap: "round",
+                strokeDasharray: f,
+                strokeDashoffset: f * (1 - i / 100),
+                className: "stroke-(--stroke-accent,#1d4ed8) transition-[stroke-dashoffset] duration-200 motion-reduce:transition-none"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, U = ({
   item: e,
   labels: a,
   onCancel: o
 }) => {
-  const n = e.status === s.Canceled;
+  const i = e.status === n.Canceled, t = c(
+    "pointer-events-none col-start-1 row-start-1 transition-opacity",
+    o && "group-focus-within:opacity-0 group-hover:opacity-0"
+  );
   return /* @__PURE__ */ l("div", { className: "group flex items-center gap-2 px-4 py-2", children: [
     /* @__PURE__ */ r(
-      h,
+      y,
       {
-        type: N.File,
+        type: v.File,
         name: e.name,
-        size: t.MD,
-        className: i(n && "opacity-50"),
+        size: s.MD,
+        className: c(i && "opacity-50"),
         decorative: !0
       }
     ),
     /* @__PURE__ */ r(
-      I,
+      x,
       {
         text: e.name,
-        className: i(
+        className: c(
           "dial-small-text",
-          n ? "text-secondary" : "text-primary"
+          i ? "text-secondary" : "text-primary"
         )
       }
     ),
-    e.status === s.InProgress && /* @__PURE__ */ l("div", { className: i(c, "grid"), children: [
-      /* @__PURE__ */ r(
-        y,
+    e.status === n.InProgress && /* @__PURE__ */ l("div", { className: c(m, "grid"), children: [
+      typeof e.percent == "number" ? /* @__PURE__ */ r(
+        L,
         {
-          size: t.SM,
+          percent: e.percent,
+          label: a.itemProgressAriaLabel(e.name),
+          className: t
+        }
+      ) : /* @__PURE__ */ r(
+        T,
+        {
+          size: s.SM,
           ariaLabel: a.itemProgressAriaLabel(e.name),
-          className: i(
-            "pointer-events-none col-start-1 row-start-1 transition-opacity",
-            o && "group-focus-within:opacity-0 group-hover:opacity-0"
-          )
+          className: t
         }
       ),
       o && /* @__PURE__ */ r(
-        S,
+        M,
         {
           "aria-label": a.cancelItemAriaLabel(e.name),
-          size: T.Small,
+          size: C.Small,
           icon: /* @__PURE__ */ r(
-            d,
+            g,
             {
-              size: t.SM,
-              stroke: m,
+              size: s.SM,
+              stroke: u,
               className: "text-secondary",
               "aria-hidden": !0
             }
@@ -86,34 +143,34 @@ const p = ({ message: e, isError: a }) => /* @__PURE__ */ r(x, { tooltip: e, asC
         }
       )
     ] }),
-    e.status === s.Success && /* @__PURE__ */ r(
+    e.status === n.Success && /* @__PURE__ */ r(
       "span",
       {
-        className: c,
+        className: m,
         role: "img",
         "aria-label": a.successLabel,
         children: /* @__PURE__ */ r(
-          u,
+          I,
           {
-            size: t.SM,
-            stroke: m,
+            size: s.SM,
+            stroke: u,
             className: "text-accent",
             "aria-hidden": !0
           }
         )
       }
     ),
-    e.status === s.Warning && /* @__PURE__ */ r(
-      p,
+    e.status === n.Warning && /* @__PURE__ */ r(
+      h,
       {
         message: e.message || a.warningMessage,
         isError: !1
       }
     ),
-    e.status === s.Failed && /* @__PURE__ */ r(p, { message: e.message || a.failedMessage, isError: !0 }),
-    n && /* @__PURE__ */ r("span", { className: "dial-small-text shrink-0 text-secondary", children: a.canceledLabel })
+    e.status === n.Failed && /* @__PURE__ */ r(h, { message: e.message || a.failedMessage, isError: !0 }),
+    i && /* @__PURE__ */ r("span", { className: "dial-small-text shrink-0 text-secondary", children: a.canceledLabel })
   ] });
 };
 export {
-  j as TransferQueueRow
+  U as TransferQueueRow
 };

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,45 +1,50 @@
-import { jsx as i, jsxs as c } from "react/jsx-runtime";
-import { useId as y } from "react";
-import { Label as S } from "../New/Label/Label.js";
-import { ElementSize as f } from "../../types/size.js";
-import { resolveAccessibleName as B } from "../../utils/accessible-name.js";
-import { mergeClasses as h } from "../../utils/merge-classes.js";
-import { DIAL_KIT_CLASS as p } from "../../constants/public-class-names.js";
-const z = ({
-  value: s,
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import { useId as M } from "react";
+import { Label as y } from "../New/Label/Label.js";
+import { ProgressBarRole as i } from "../../types/progress-bar.js";
+import { ElementSize as h } from "../../types/size.js";
+import { resolveAccessibleName as S } from "../../utils/accessible-name.js";
+import { mergeClasses as p } from "../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as u } from "../../constants/public-class-names.js";
+const C = {
+  [i.Progressbar]: "Progress",
+  [i.Meter]: "Meter"
+}, k = ({
+  value: t,
   max: l = 100,
-  size: u = f.Standard,
-  labelProps: e,
-  valueLabel: r,
-  id: b,
-  className: g,
-  "aria-label": x,
-  ...v
+  size: b = h.Standard,
+  labelProps: r,
+  valueLabel: e,
+  role: n = i.Progressbar,
+  id: x,
+  className: N,
+  "aria-label": v,
+  ...w
 }) => {
-  const N = y(), t = b ?? N, a = !!e?.label, n = a ? e?.id ?? `${t}-label` : void 0, o = l > 0 ? l : 0, w = Number.isFinite(s) ? s : 0, d = Math.min(Math.max(w, 0), o), I = o > 0 ? d / o * 100 : 0, m = /* @__PURE__ */ i(
+  const A = M(), d = x ?? A, a = !!r?.label, m = a ? r?.id ?? `${d}-label` : void 0, o = l > 0 ? l : 0, B = Number.isFinite(t) ? t : 0, c = Math.min(Math.max(B, 0), o), I = o > 0 ? c / o * 100 : 0, f = /* @__PURE__ */ s(
     "div",
     {
-      ...v,
-      id: t,
-      role: "progressbar",
-      "aria-valuenow": d,
+      ...w,
+      id: d,
+      role: n,
+      "aria-valuenow": c,
       "aria-valuemin": 0,
       "aria-valuemax": o,
-      "aria-labelledby": n,
-      "aria-label": B(
-        x,
-        a ? void 0 : "Progress"
+      "aria-labelledby": m,
+      "aria-label": S(
+        v,
+        a ? void 0 : C[n]
       ),
-      className: h(
+      className: p(
         "w-full overflow-hidden rounded-full bg-control-disable-primary",
-        u === f.Small ? "h-1" : "h-2",
-        g,
+        b === h.Small ? "h-1" : "h-2",
+        N,
         /* The track is the component's root when there is no label and no
            readout to wrap it, and the public class belongs on whichever
            element that is. */
-        !a && !r && p.progressBar
+        !a && !e && u.progressBar
       ),
-      children: /* @__PURE__ */ i(
+      children: /* @__PURE__ */ s(
         "div",
         {
           style: { width: `${I}%` },
@@ -48,23 +53,23 @@ const z = ({
       )
     }
   );
-  return !a && !r ? m : /* @__PURE__ */ c(
+  return !a && !e ? f : /* @__PURE__ */ g(
     "div",
     {
-      className: h(
+      className: p(
         "flex w-full flex-col gap-1",
-        p.progressBar
+        u.progressBar
       ),
       children: [
-        /* @__PURE__ */ c("div", { className: "flex items-baseline gap-2", children: [
-          e && /* @__PURE__ */ i(S, { ...e, id: n }),
-          r && /* @__PURE__ */ i("span", { className: "dial-tiny-text text-secondary ml-auto shrink-0", children: r })
+        /* @__PURE__ */ g("div", { className: "flex items-baseline gap-2", children: [
+          r && /* @__PURE__ */ s(y, { ...r, id: m }),
+          e && /* @__PURE__ */ s("span", { className: "dial-tiny-text text-secondary ml-auto shrink-0", children: e })
         ] }),
-        m
+        f
       ]
     }
   );
 };
 export {
-  z as ProgressBar
+  k as ProgressBar
 };

package/dist/components/Spinner/Spinner.js

@@ -1,26 +1,31 @@
-import { jsx as r } from "react/jsx-runtime";
-import { mergeClasses as n } from "../../utils/merge-classes.js";
+import { jsx as s } from "react/jsx-runtime";
+import { mergeClasses as l } from "../../utils/merge-classes.js";
 import { DIAL_KIT_CLASS as o } from "../../constants/public-class-names.js";
-const d = ({
+const f = ({
   size: e = 40,
-  className: s,
+  className: i,
   fullWidth: t = !1,
-  ariaLabel: i = "Loading"
-}) => /* @__PURE__ */ r(
+  fullScreen: a = !1,
+  ariaLabel: n = "Loading",
+  focusRef: r
+}) => /* @__PURE__ */ s(
   "div",
   {
     role: "status",
-    className: n(
+    className: l(
       "flex items-center justify-center",
       { "size-full": t },
-      s,
+      { "fixed inset-0 z-popup bg-layer-base": a },
+      i,
       o.spinner
     ),
-    children: /* @__PURE__ */ r(
+    children: /* @__PURE__ */ s(
       "div",
       {
+        ref: r,
+        tabIndex: r ? -1 : void 0,
         role: "img",
-        "aria-label": i,
+        "aria-label": n,
         style: { width: e, height: e },
         className: "rounded-full border-2 border-secondary border-t-accent animate-spin-steps shrink-0"
       }
@@ -28,5 +33,5 @@ const d = ({
   }
 );
 export {
-  d as Spinner
+  f as Spinner
 };