@epam/ai-dial-ui-kit 0.16.0-dev.3 → 0.16.0-dev.33

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/Search/Search.js

@@ -52,7 +52,7 @@ const v = ({
       className: e.className,
       wrapperClassName: h(
         e.wrapperClassName,
-        a ? "!border-0 ps-5 [&>div]:!border-0" : ""
+        a ? "!border-0 !ps-5 [&>div]:!border-0" : ""
       ),
       ...f
     }

package/dist/components/Select/Select.js

@@ -410,7 +410,7 @@ const vt = ({
                 onKeyDown: (e) => {
                   e.stopPropagation();
                 },
-                className: "bg-transparent outline-none w-full dial-small-text",
+                className: "bg-transparent outline-hidden w-full dial-small-text",
                 ref: P,
                 disabled: c,
                 "aria-disabled": c,

package/dist/components/Select/constants.js

@@ -1,15 +1,15 @@
 import { jsx as e } from "react/jsx-runtime";
 import { DIAL_ICON_SIZE as t } from "../../constants/icon.js";
 import { IconChevronDown as a } from "@tabler/icons-react";
-const c = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer", r = "w-full rounded flex flex-col", n = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none", i = "bg-accent-primary-alpha", p = "bg-accent-primary-alpha border-l border-accent-primary border-1", m = "opacity-75", u = 352, f = 4, d = /* @__PURE__ */ e(a, { size: t.SM });
+const o = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer", n = "w-full rounded flex flex-col", r = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-hidden", i = "bg-accent-primary-alpha", p = "bg-accent-primary-alpha border-l border-accent-primary", m = "opacity-75", u = 352, d = 4, f = /* @__PURE__ */ e(a, { size: t.SM });
 export {
   u as dropdownMenuMaxHeight,
-  d as selectChevronIcon,
-  n as selectOptionBaseClassName,
+  f as selectChevronIcon,
+  r as selectOptionBaseClassName,
   m as selectOptionDisabledClassName,
   i as selectOptionSelectedClassName,
   p as selectOptionSingleSelectedClassName,
-  r as selectOverlayBaseClassName,
-  f as selectSubMenuGap,
-  c as selectTriggerBaseClassName
+  n as selectOverlayBaseClassName,
+  d as selectSubMenuGap,
+  o as selectTriggerBaseClassName
 };

package/dist/components/Slider/Slider.js

@@ -121,7 +121,7 @@ const m = (t) => (t.toString().split(".")[1] ?? "").length, q = ({
                   "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",
+                    "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-hidden focus-visible:ring-2 focus-visible:ring-focus",
                     P
                   ),
                   style: { left: `${v}%` },

package/dist/components/Steps/Step.js

@@ -1,30 +1,30 @@
-import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import { jsxs as f, jsx as r } 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 { StepStatus as e } from "../../models/step.js";
+import i 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,
+  currentStep: s,
   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;
+  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", c = () => s === t.id && t.status === e.ERROR ? /* @__PURE__ */ r(x, { stroke: 2, size: o.SM }) : s !== t.id && t.status === e.VALID ? /* @__PURE__ */ r(d, { stroke: 2, size: o.SM }) : n + 1;
   return /* @__PURE__ */ f(
     "button",
     {
-      className: r(a, p(t, e)),
+      className: i(a, p(t, s)),
       onClick: () => l(t.id),
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ r(
           "span",
           {
-            className: r(m, C(t, e)),
+            className: i(m, C(t, s)),
             children: c()
           }
         ),
-        /* @__PURE__ */ s("span", { children: t.name })
+        /* @__PURE__ */ r("span", { children: t.name })
       ]
     }
   );

package/dist/components/TagInput/TagInput.js

@@ -121,7 +121,7 @@ const k = 8, ne = 24, fe = ({
             onKeyDown: Q,
             onBlur: Y,
             className: v(
-              "dial-input outline-none !border-none w-full flex-1 !p-1 !h-auto",
+              "dial-input outline-hidden !border-none w-full flex-1 !p-1 !h-auto",
               i ? "min-w-0" : "min-w-[100px]"
             ),
             placeholder: X ?? "",