@epam/ai-dial-ui-kit 0.16.0-dev.2 → 0.16.0-dev.20

package/dist/components/LoadFileArea/EmptyFileArea.js

@@ -1,8 +1,8 @@
-import { jsx as t, jsxs as y, Fragment as B } from "react/jsx-runtime";
+import { jsx as t, jsxs as y, Fragment as z } from "react/jsx-runtime";
 import { DialErrorText as x } from "../CaptionText/CaptionText.js";
 import { ButtonAppearance as Q } from "../../types/button.js";
 import U from "classnames";
-import { useRef as C, useState as k, useCallback as G, useMemo as L, useEffect as W } from "react";
+import { useRef as B, useState as k, useCallback as C, useMemo as G, useEffect as W } from "react";
 import { DialPrimaryButton as X } from "../Button/ButtonWrappers.js";
 import { useDrop as Y } from "../../node_modules/react-dnd/dist/hooks/useDrop/useDrop.js";
 import { FILE as Z } from "../../node_modules/react-dnd-html5-backend/dist/NativeTypes.js";
@@ -13,45 +13,45 @@ const nr = ({
   emptyButtonLabel: O,
   acceptTypes: A,
   maxFilesCount: m,
-  multiple: M,
+  multiple: L,
   fileFormatError: j,
-  fileCountError: w,
-  fileSizeError: R,
+  fileCountError: R,
+  fileSizeError: g,
   getIsFileFormatError: n,
   getIsFileSizeError: a
 }) => {
-  const g = C(null), h = C(null), [c, D] = k([]), [i, f] = k(!1), [u, d] = k(!1), P = G(
+  const w = B(null), h = B(null), [c, D] = k([]), [i, f] = k(!1), [d, u] = k(!1), M = C(
     (r) => {
       const e = r.target.files;
       if (e && e.length > 0) {
         const o = Array.from(e), p = n?.(o), v = a?.(o);
-        p ? f(!0) : v ? d(!0) : l(o);
+        p ? f(!0) : v ? u(!0) : l(o);
       }
     },
     [n, a, l]
-  ), s = G(
+  ), s = C(
     (r) => m && r?.length > m,
     [m]
-  ), F = L(() => i || u || s(c), [i, u, s, c]), b = () => {
-    D([]), f(!1), d(!1);
-  }, S = L(() => i ? /* @__PURE__ */ t(x, { text: j }) : u ? /* @__PURE__ */ t(x, { text: R }) : s(c) ? /* @__PURE__ */ t(x, { text: w }) : null, [
-    w,
-    j,
+  ), F = G(() => i || d || s(c), [i, d, s, c]), b = () => {
+    D([]), f(!1), u(!1);
+  }, P = G(() => i ? /* @__PURE__ */ t(x, { text: j }) : d ? /* @__PURE__ */ t(x, { text: g }) : s(c) ? /* @__PURE__ */ t(x, { text: R }) : null, [
     R,
+    j,
+    g,
     c,
     s,
     i,
-    u
+    d
   ]);
   W(() => {
     b();
   }, [A]);
-  const [{ isOver: T, canDrop: K }, V] = Y(
+  const [{ isOver: S, canDrop: K }, T] = Y(
     () => ({
       accept: [Z],
       drop(r) {
         const e = r.files, o = n?.(e) ?? !1, p = a?.(e) ?? !1, v = s?.(e) ?? !1;
-        if (f(o), d(p), o || p || v) {
+        if (f(o), u(p), o || p || v) {
           D(e);
           return;
         }
@@ -63,27 +63,27 @@ const nr = ({
       })
     }),
     [l, n, a, s]
-  ), q = (r) => {
+  ), V = (r) => {
     (r.key === "Enter" || r.key === "Space") && (r.preventDefault(), h.current?.click());
-  }, z = (r) => {
+  }, q = (r) => {
     r?.preventDefault();
     const e = Array.from(r.dataTransfer?.items ?? []);
-    f(!!n?.(e)), d(!!a?.(e)), D(e);
+    f(!!n?.(e)), u(!!a?.(e)), D(e);
   }, H = (r) => {
     r.target === r.currentTarget && b();
   }, J = U(
-    "border border-dashed rounded w-full cursor-pointer relative h-full hover:border-hover",
+    "border border-dashed rounded size-full cursor-pointer relative hover:border-hover",
     !K && !F && "border-primary",
-    K && (T ? "border-accent-primary" : "border-hover"),
+    K && (S ? "border-accent-primary" : "border-hover"),
     F && "border-error"
   );
-  return V(g), /* @__PURE__ */ y(B, { children: [
+  return T(w), /* @__PURE__ */ y(z, { children: [
     /* @__PURE__ */ y(
       "div",
       {
         className: J,
-        ref: g,
-        onDragOver: z,
+        ref: w,
+        onDragOver: q,
         onDragLeave: H,
         children: [
           /* @__PURE__ */ y(
@@ -91,7 +91,7 @@ const nr = ({
             {
               htmlFor: "file",
               tabIndex: 0,
-              onKeyDown: q,
+              onKeyDown: V,
               className: "flex flex-col items-center cursor-pointer size-full text-secondary dial-tiny-text justify-center",
               children: [
                 E && /* @__PURE__ */ t("p", { className: "mb-1", children: E }),
@@ -110,19 +110,19 @@ const nr = ({
           /* @__PURE__ */ t(
             "input",
             {
-              multiple: M,
+              multiple: L,
               id: "file",
               type: "file",
               ref: h,
               hidden: !0,
               accept: A,
-              onChange: P
+              onChange: M
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ t(B, { children: S })
+    /* @__PURE__ */ t(z, { children: P })
   ] });
 };
 export {

package/dist/components/Loader/Loader.js

@@ -3,19 +3,19 @@ import e from "classnames";
 import { DialIcon as s } from "../Icon/Icon.js";
 import { loaderIconBaseClassName as t, loaderBaseClassName as d } from "./constants.js";
 import c from "../../assets/icons/loader.svg.js";
-const g = ({
+const h = ({
   size: o = 18,
   className: a,
-  iconClassName: l,
-  fullWidth: m = !0,
-  ariaLabel: i = "Loading"
+  iconClassName: i,
+  fullWidth: l = !0,
+  ariaLabel: m = "Loading"
 }) => /* @__PURE__ */ r(
   "div",
   {
     role: "status",
     className: e({
       [d]: !0,
-      "w-full h-full": m,
+      "size-full": l,
       [a || ""]: !!a
     }),
     children: /* @__PURE__ */ r(
@@ -26,9 +26,9 @@ const g = ({
           {
             width: o,
             height: o,
-            className: e(t, l),
+            className: e(t, i),
             role: "img",
-            "aria-label": i
+            "aria-label": m
           }
         )
       }
@@ -36,5 +36,5 @@ const g = ({
   }
 );
 export {
-  g as DialLoader
+  h as DialLoader
 };

package/dist/components/New/Avatar/Avatar.js

@@ -1,31 +1,32 @@
 import { jsx as a } from "react/jsx-runtime";
-import { useState as C } from "react";
-import { DIAL_KIT_CLASS as b } from "../../../constants/public-class-names.js";
+import { useState as b } from "react";
+import { DIAL_KIT_CLASS as w } from "../../../constants/public-class-names.js";
 import { AvatarShape as d } from "../../../types/avatar.js";
-import { pickAvatarColor as w, extractInitials as I } from "../../../utils/avatar.js";
+import { pickAvatarColor as I, extractInitials as N } from "../../../utils/avatar.js";
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
-const N = {
+const j = {
   [d.Circle]: "rounded-full",
   [d.Square]: "rounded-md"
-}, E = ({
+}, q = ({
   name: s,
   initials: c,
   src: r,
   alt: t = "",
   size: o = 32,
   shape: f = d.Circle,
-  className: h,
+  color: h,
+  className: u,
   textClassName: l,
-  onImageError: u
+  onImageError: S
 }) => {
-  const [S, p] = C(), v = !!r && S !== r, i = t !== "", m = (n) => e(
+  const [p, v] = b(), g = !!r && p !== r, i = t !== "", m = (n) => e(
     "inline-flex shrink-0 select-none items-center justify-center overflow-hidden",
-    N[f],
+    j[f],
     n,
-    h,
-    b.avatar
+    u,
+    w.avatar
   );
-  if (v)
+  if (g)
     return /* @__PURE__ */ a(
       "img",
       {
@@ -35,18 +36,18 @@ const N = {
         height: o,
         className: e(m(), "object-cover"),
         onError: (n) => {
-          p(r), u?.(n);
+          v(r), S?.(n);
         }
       }
     );
-  const { background: g, foreground: A } = w(s);
+  const { background: A, foreground: C } = h ?? I(s);
   return /* @__PURE__ */ a(
     "span",
     {
       role: i ? "img" : void 0,
       "aria-label": i ? t : void 0,
       "aria-hidden": i ? void 0 : !0,
-      className: m(e(g, A)),
+      className: m(e(A, C)),
       style: {
         width: o,
         height: o,
@@ -59,12 +60,12 @@ const N = {
             "leading-none",
             l ?? "font-semibold"
           ),
-          children: c ?? I(s)
+          children: c ?? N(s)
         }
       )
     }
   );
 };
 export {
-  E as Avatar
+  q as Avatar
 };

package/dist/components/New/BottomSheet/BottomSheet.js

@@ -1,86 +1,87 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { useFloating as k, useRole as A, useDismiss as O, useInteractions as w, FloatingPortal as z, FloatingOverlay as D, FloatingFocusManager as T } from "@floating-ui/react";
-import { IconArrowLeft as j } from "@tabler/icons-react";
-import { useId as B } from "react";
-import { CloseButton as E } from "../CloseButton/CloseButton.js";
-import { DIAL_KIT_ICON_STROKE as K } from "../constants/icon.js";
-import { GhostIconButton as P } from "../IconButton/IconButtonWrappers.js";
-import { useThemeScope as G } from "../ThemeScope/ThemeScope.js";
-import { DIAL_ICON_SIZE as R } from "../../../constants/icon.js";
-import { DIAL_KIT_CLASS as M } from "../../../constants/public-class-names.js";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useFloating as k, useRole as A, useDismiss as w, useInteractions as z, FloatingPortal as D, FloatingOverlay as T, FloatingFocusManager as j } from "@floating-ui/react";
+import { IconArrowLeft as B } from "@tabler/icons-react";
+import { useId as E } from "react";
+import { CloseButton as K } from "../CloseButton/CloseButton.js";
+import { DIAL_KIT_ICON_STROKE as P } from "../constants/icon.js";
+import { GhostIconButton as G } from "../IconButton/IconButtonWrappers.js";
+import { useThemeScope as R } from "../ThemeScope/ThemeScope.js";
+import { DIAL_ICON_SIZE as M } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as c } from "../../../constants/public-class-names.js";
 import { ElementSize as U } from "../../../types/size.js";
 import { mergeClasses as o } from "../../../utils/merge-classes.js";
 const te = ({
   open: i,
   onClose: a,
   title: t,
-  ariaLabel: c,
+  ariaLabel: d,
   onBack: s,
-  backAriaLabel: d = "Back",
-  closeAriaLabel: u = "Close",
-  closeOnOutsideClick: f = !0,
-  children: p,
-  className: h,
-  overlayClassName: b,
-  headerClassName: g,
-  style: x,
-  overlayStyle: I,
-  bodyClassName: S,
-  titleClassName: N,
-  portalId: v
+  backAriaLabel: u = "Back",
+  closeAriaLabel: f = "Close",
+  closeOnOutsideClick: p = !0,
+  children: h,
+  className: b,
+  overlayClassName: g,
+  headerClassName: x,
+  style: I,
+  overlayStyle: S,
+  bodyClassName: v,
+  titleClassName: y,
+  portalId: N
 }) => {
-  const y = G(), l = `bottom-sheet-title-${B()}`, { refs: n, context: r } = k({
+  const F = R(), l = `bottom-sheet-title-${E()}`, { refs: m, context: r } = k({
     open: i,
-    onOpenChange: (_) => {
-      _ || a();
+    onOpenChange: (O) => {
+      O || a();
     }
-  }), F = A(r, { role: "dialog" }), C = O(r, { outsidePress: f }), { getFloatingProps: L } = w([F, C]);
-  return i ? /* @__PURE__ */ e(z, { id: v, children: /* @__PURE__ */ e(
-    D,
+  }), C = A(r, { role: "dialog" }), L = w(r, { outsidePress: p }), { getFloatingProps: _ } = z([C, L]);
+  return i ? /* @__PURE__ */ e(D, { id: N, children: /* @__PURE__ */ e(
+    T,
     {
       lockScroll: !0,
-      style: I,
+      style: S,
       className: o(
         "z-popup flex items-end bg-backdrop",
-        y,
-        b
+        F,
+        g,
+        c.bottomSheetOverlay
       ),
-      children: /* @__PURE__ */ e(T, { context: r, initialFocus: n.floating, children: /* @__PURE__ */ m(
+      children: /* @__PURE__ */ e(j, { context: r, initialFocus: m.floating, children: /* @__PURE__ */ n(
         "div",
         {
-          ref: n.setFloating,
-          ...L(),
+          ref: m.setFloating,
+          ..._(),
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": t ? l : void 0,
-          "aria-label": t ? void 0 : c,
-          style: x,
+          "aria-label": t ? void 0 : d,
+          style: I,
           className: o(
-            "flex max-h-[85dvh] w-full flex-col rounded-t-lg bg-layer-raised outline-none",
+            "flex max-h-[85dvh] w-full flex-col rounded-t-lg bg-layer-raised outline-hidden",
             "animate-slideUp motion-reduce:animate-none",
-            h,
-            M.bottomSheet
+            b,
+            c.bottomSheet
           ),
           children: [
-            t && /* @__PURE__ */ m(
+            t && /* @__PURE__ */ n(
               "div",
               {
                 className: o(
                   "relative flex h-[60px] shrink-0 items-center justify-center border-b border-tertiary px-14",
-                  g
+                  x
                 ),
                 children: [
                   s && /* @__PURE__ */ e(
-                    P,
+                    G,
                     {
-                      "aria-label": d,
+                      "aria-label": u,
                       className: "absolute start-4",
                       onClick: s,
                       icon: /* @__PURE__ */ e(
-                        j,
+                        B,
                         {
-                          size: R.LG,
-                          stroke: K,
+                          size: M.LG,
+                          stroke: P,
                           className: "rtl:-scale-x-100",
                           "aria-hidden": "true"
                         }
@@ -93,15 +94,15 @@ const te = ({
                       id: l,
                       className: o(
                         "min-w-0 truncate text-primary",
-                        N ?? "dial-body-semi-text"
+                        y ?? "dial-body-semi-text"
                       ),
                       children: t
                     }
                   ),
                   /* @__PURE__ */ e(
-                    E,
+                    K,
                     {
-                      ariaLabel: u,
+                      ariaLabel: f,
                       onClose: a,
                       size: U.Standard,
                       className: "absolute end-4"
@@ -113,8 +114,8 @@ const te = ({
             /* @__PURE__ */ e(
               "div",
               {
-                className: o("min-h-0 overflow-y-auto", S),
-                children: p
+                className: o("min-h-0 overflow-y-auto", v),
+                children: h
               }
             )
           ]

package/dist/components/New/Breadcrumbs/constants.js

@@ -13,7 +13,7 @@ const c = "w-full overflow-hidden", f = "flex min-w-0 flex-nowrap items-center g
   first: "shrink-0",
   middle: "min-w-0 max-w-[30%] shrink",
   last: "min-w-0 max-w-[51%] shrink"
-}, p = "flex min-w-0 flex-1 items-center gap-1 rounded-sm transition-colors", C = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", S = "cursor-default text-primary", h = "cursor-default text-secondary", I = "inline-flex flex-none items-center leading-none text-secondary", g = "dial-kit-minimum-target flex shrink-0 items-center rounded-sm text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", w = 3, v = 4, _ = /* @__PURE__ */ t(
+}, p = "flex min-w-0 flex-1 items-center gap-1 rounded-xs transition-colors", C = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", S = "cursor-default text-primary", h = "cursor-default text-secondary", I = "inline-flex flex-none items-center leading-none text-secondary", g = "dial-kit-minimum-target flex shrink-0 items-center rounded-xs text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", w = 3, v = 4, _ = /* @__PURE__ */ t(
   s,
   {
     size: i.SM,