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

package/dist/components/New/Popup/Popup.js

@@ -1,160 +1,183 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useFloating as Q, useRole as U, useDismiss as W, useInteractions as X, FloatingPortal as Y, FloatingOverlay as ee, FloatingFocusManager as oe } from "@floating-ui/react";
-import { useRef as re, useId as se } from "react";
-import { Button as ae } from "../Button/Button.js";
-import { CloseButton as ie } from "../CloseButton/CloseButton.js";
-import { GhostIconButton as le } from "../IconButton/IconButtonWrappers.js";
-import { Tooltip as te } from "../Tooltip/Tooltip.js";
-import { DIAL_KIT_ICON_STROKE as ne } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as pe } from "../../../constants/icon.js";
-import { ButtonVariant as me } from "../../../types/button.js";
-import { PopupSize as ce } from "../../../types/popup.js";
-import { ElementSize as de } from "../../../types/size.js";
-import { useThemeScope as ue } from "../ThemeScope/ThemeScope.js";
-import { mergeClasses as r } from "../../../utils/merge-classes.js";
-import { IconChevronLeft as fe } from "@tabler/icons-react";
-import { popupActionsGroupClassName as l, popupHeaderDividerClassName as ge, popupHeaderClassName as he, popupSizeClassMap as Ne, popupBaseClassName as Ce, popupOverlayBaseClassName as ve, popupTitleClassName as Ie, popupFooterDividerClassName as Fe, popupFooterClassName as Se } from "./constants.js";
-import { DIAL_KIT_CLASS as xe } from "../../../constants/public-class-names.js";
-const je = ({
-  open: t = !1,
-  header: n,
-  ariaLabel: F,
-  portalId: S,
-  className: x,
-  overlayClassName: T,
-  overlayStyle: _,
-  titleClassName: b,
-  headerClassName: y,
-  bodyClassName: z,
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import { useFloating as X, useRole as Y, useDismiss as ee, useInteractions as oe, FloatingPortal as se, FloatingOverlay as re, FloatingFocusManager as ae } from "@floating-ui/react";
+import { useRef as ie, useId as le } from "react";
+import { Button as te } from "../Button/Button.js";
+import { CloseButton as ne } from "../CloseButton/CloseButton.js";
+import { GhostIconButton as pe } from "../IconButton/IconButtonWrappers.js";
+import { Tooltip as me } from "../Tooltip/Tooltip.js";
+import { DIAL_KIT_ICON_STROKE as ce } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as ue } from "../../../constants/icon.js";
+import { ButtonVariant as de } from "../../../types/button.js";
+import { PopupSize as fe } from "../../../types/popup.js";
+import { ElementSize as Ne } from "../../../types/size.js";
+import { useThemeScope as ge } from "../ThemeScope/ThemeScope.js";
+import { mergeClasses as s } from "../../../utils/merge-classes.js";
+import { IconChevronLeft as he } from "@tabler/icons-react";
+import { popupActionsGroupClassName as t, popupHeaderDividerClassName as Ce, popupHeaderClassName as ve, popupSizeClassMap as Ie, popupBaseClassName as Fe, popupOverlayBaseClassName as Se, popupTitleClassName as xe, popupMainActionsGroupClassName as Te, popupFooterDividerClassName as _e, popupFooterClassName as be, popupMainActionButtonClassName as F } from "./constants.js";
+import { DIAL_KIT_CLASS as ye } from "../../../constants/public-class-names.js";
+const Ve = ({
+  open: n = !1,
+  header: p,
+  ariaLabel: S,
+  portalId: x,
+  className: T,
+  overlayClassName: _,
+  overlayStyle: b,
+  titleClassName: y,
+  headerClassName: z,
+  bodyClassName: A,
   children: D,
-  footer: p,
-  footerClassName: B,
-  onClose: m,
-  onBack: c,
-  backAriaLabel: L = "Back",
+  footer: m,
+  footerClassName: M,
+  onClose: c,
+  onBack: u,
+  backAriaLabel: B = "Back",
   headerActions: d,
   headerDivider: P = !1,
-  mainButtons: u,
-  additionalButtons: f,
-  additionalButtonsOnLeft: g = !1,
-  footerDivider: A = !1,
-  size: M = ce.Md,
+  mainButtons: f,
+  additionalButtons: N,
+  additionalButtonsOnLeft: a = !1,
+  footerDivider: G = !1,
+  size: L = fe.Md,
   hideClose: R = !1,
   closeAriaLabel: w = "Close dialog",
   closeOnOutsideClick: E = !0,
-  preventKeyboardOnOpen: h = !1
+  preventKeyboardOnOpen: g = !1
 }) => {
-  const G = ue(), N = re(null), O = se(), { refs: C, context: a } = Q({
-    open: t,
+  const $ = ge(), h = ie(null), j = le(), { refs: C, context: i } = X({
+    open: n,
     onOpenChange: (e) => {
-      e || m?.(null);
+      e || c?.(null);
     }
-  }), $ = U(a, { role: "dialog" }), j = W(a, { outsidePress: E }), { getFloatingProps: k } = X([$, j]);
-  if (!t) return null;
-  const i = typeof n == "string" ? `popup-heading-${O}` : void 0, H = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
+  }), k = Y(i, { role: "dialog" }), H = ee(i, { outsidePress: E }), { getFloatingProps: K } = oe([k, H]);
+  if (!n) return null;
+  const l = typeof p == "string" ? `popup-heading-${j}` : void 0, O = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
     "h2",
     {
-      id: i,
-      className: r(Ie, b),
-      children: /* @__PURE__ */ o(te, { tooltip: e, triggerClassName: "truncate", children: e })
+      id: l,
+      className: s(xe, y),
+      children: /* @__PURE__ */ o(me, { tooltip: e, triggerClassName: "truncate", children: e })
     }
-  ) : e : /* @__PURE__ */ o("span", {}), v = R ? null : /* @__PURE__ */ o(ie, { ariaLabel: w, onClose: (e) => m?.(e) }), I = (e, V = []) => V.map(({ variant: Z = me.Neutral, ...q }, J) => /* @__PURE__ */ o(ae, { variant: Z, ...q }, `${e}-${J}`)), K = () => {
-    if (p !== void 0) return p;
-    if (!u?.length && !f?.length) return null;
-    const e = I("additional", f);
-    return /* @__PURE__ */ s(
+  ) : e : /* @__PURE__ */ o("span", {}), v = R ? null : /* @__PURE__ */ o(ne, { ariaLabel: w, onClose: (e) => c?.(e) }), I = (e, Z = [], q) => Z.map(
+    ({ variant: J = de.Neutral, className: Q, ...U }, W) => /* @__PURE__ */ o(
+      te,
+      {
+        variant: J,
+        className: s(q, Q),
+        ...U
+      },
+      `${e}-${W}`
+    )
+  ), V = () => {
+    if (m !== void 0) return m;
+    if (!f?.length && !N?.length) return null;
+    const e = I(
+      "additional",
+      N,
+      a ? void 0 : F
+    );
+    return /* @__PURE__ */ r(
       "div",
       {
-        className: r(
-          Se,
-          A && Fe,
-          B
+        className: s(
+          be,
+          G && _e,
+          M
         ),
         children: [
-          g && e.length > 0 && /* @__PURE__ */ o("div", { className: l, children: e }),
-          /* @__PURE__ */ s("div", { className: r(l, "ml-auto"), children: [
-            !g && e,
-            I("main", u)
-          ] })
+          a && e.length > 0 && /* @__PURE__ */ o("div", { className: t, children: e }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: s(
+                t,
+                Te
+              ),
+              children: [
+                !a && e,
+                I("main", f, F)
+              ]
+            }
+          )
         ]
       }
     );
   };
-  return /* @__PURE__ */ o(Y, { id: S, children: /* @__PURE__ */ o(
-    ee,
+  return /* @__PURE__ */ o(se, { id: x, children: /* @__PURE__ */ o(
+    re,
     {
-      style: _,
-      className: r(
-        ve,
-        G,
-        T
+      style: b,
+      className: s(
+        Se,
+        $,
+        _
       ),
       children: /* @__PURE__ */ o(
-        oe,
+        ae,
         {
-          context: a,
-          initialFocus: h ? N : C.floating,
-          children: /* @__PURE__ */ s(
+          context: i,
+          initialFocus: g ? h : C.floating,
+          children: /* @__PURE__ */ r(
             "div",
             {
               ref: C.setFloating,
-              ...k(),
+              ...K(),
               role: "dialog",
               "aria-modal": "true",
-              "aria-labelledby": i,
-              "aria-label": i ? void 0 : F,
-              className: r(
-                Ce,
-                Ne[M],
-                x,
-                xe.popup
+              "aria-labelledby": l,
+              "aria-label": l ? void 0 : S,
+              className: s(
+                Fe,
+                Ie[L],
+                T,
+                ye.popup
               ),
               children: [
-                h && /* @__PURE__ */ o(
+                g && /* @__PURE__ */ o(
                   "div",
                   {
-                    ref: N,
+                    ref: h,
                     tabIndex: -1,
                     "aria-hidden": !0,
                     className: "absolute size-px -m-px overflow-hidden opacity-0 pointer-events-none"
                   }
                 ),
-                /* @__PURE__ */ s(
+                /* @__PURE__ */ r(
                   "div",
                   {
-                    className: r(
-                      he,
-                      P && ge,
-                      y
+                    className: s(
+                      ve,
+                      P && Ce,
+                      z
                     ),
                     children: [
-                      c && /* @__PURE__ */ o(
-                        le,
+                      u && /* @__PURE__ */ o(
+                        pe,
                         {
-                          "aria-label": L,
-                          size: de.Small,
+                          "aria-label": B,
+                          size: Ne.Small,
                           className: "mr-2",
-                          onClick: c,
+                          onClick: u,
                           icon: /* @__PURE__ */ o(
-                            fe,
+                            he,
                             {
-                              size: pe.SM,
-                              stroke: ne,
+                              size: ue.SM,
+                              stroke: ce,
                               "aria-hidden": "true"
                             }
                           )
                         }
                       ),
-                      H(n),
-                      d ? /* @__PURE__ */ s("div", { className: l, children: [
+                      O(p),
+                      d ? /* @__PURE__ */ r("div", { className: t, children: [
                         d,
                         v
                       ] }) : v
                     ]
                   }
                 ),
-                /* @__PURE__ */ o("div", { className: r("grow overflow-auto", z), children: D }),
-                K()
+                /* @__PURE__ */ o("div", { className: s("grow overflow-auto", A), children: D }),
+                V()
               ]
             }
           )
@@ -164,5 +187,5 @@ const je = ({
   ) });
 };
 export {
-  je as Popup
+  Ve as Popup
 };

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

@@ -1,17 +1,19 @@
 import { PopupSize as e } from "../../../types/popup.js";
-const a = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", r = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", o = "flex flex-row items-center justify-between px-6 py-4", t = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary", s = "border-b border-tertiary", l = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", x = "flex shrink-0 flex-row items-center gap-2", i = {
+const o = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", a = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", s = "flex-1 min-w-0 mr-3 truncate dial-h3-text text-primary", l = "border-b border-tertiary", r = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", i = "flex shrink-0 flex-row items-center gap-2", x = "ml-auto mobile:flex-1", n = "mobile:flex-1", u = {
   [e.Sm]: "max-w-full md:max-w-[400px]",
   [e.Md]: "max-w-full md:max-w-[800px]",
   [e.Lg]: "max-w-full md:max-w-[1200px]"
 };
 export {
-  x as popupActionsGroupClassName,
-  r as popupBaseClassName,
-  l as popupFooterClassName,
+  i as popupActionsGroupClassName,
+  a as popupBaseClassName,
+  r as popupFooterClassName,
   m as popupFooterDividerClassName,
-  o as popupHeaderClassName,
-  s as popupHeaderDividerClassName,
-  a as popupOverlayBaseClassName,
-  i as popupSizeClassMap,
-  t as popupTitleClassName
+  t as popupHeaderClassName,
+  l as popupHeaderDividerClassName,
+  n as popupMainActionButtonClassName,
+  x as popupMainActionsGroupClassName,
+  o as popupOverlayBaseClassName,
+  u as popupSizeClassMap,
+  s as popupTitleClassName
 };

package/dist/components/New/Radio/Radio.js

@@ -1,5 +1,5 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { useId as h, useCallback as y } from "react";
+import { useId as x, useCallback as y } from "react";
 import { ElementSize as N } from "../../../types/size.js";
 import { mergeClasses as r } from "../../../utils/merge-classes.js";
 import { resolveAccessibleName as v } from "../../../utils/accessible-name.js";
@@ -11,15 +11,15 @@ const F = ({
   value: i,
   labelProps: o,
   isSelected: l = !1,
-  disabled: t,
+  disabled: a,
   onChange: s,
   caption: c,
-  className: f,
+  className: b,
   ...n
 }) => {
-  const b = h(), a = p ?? b, d = c ? `${a}-caption` : void 0, g = y(
-    (x) => {
-      x.target.checked && s?.(i);
+  const f = x(), t = p ?? f, d = c ? `${t}-caption` : void 0, g = y(
+    (h) => {
+      h.target.checked && s?.(i);
     },
     [s, i]
   );
@@ -28,8 +28,10 @@ const F = ({
       "div",
       {
         className: r(
-          "flex items-center gap-2 ",
-          f,
+          // Named group: the control shows its hover state while either of its
+          // two <label>s (the control or the text) is hovered.
+          "group/choice flex items-center gap-2",
+          b,
           k.radio
         ),
         children: [
@@ -38,11 +40,11 @@ const F = ({
             {
               ...n,
               type: "radio",
-              id: a,
+              id: t,
               name: u,
               value: i,
               checked: l,
-              disabled: t,
+              disabled: a,
               onChange: g,
               "aria-label": v(
                 typeof o?.label != "string" ? n["aria-label"] : void 0
@@ -54,16 +56,16 @@ const F = ({
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: a,
+              htmlFor: t,
               className: r(
-                "group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200 hover:bg-control-accent-alpha-hover",
+                "group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200",
                 // 20px is below the 24x24 minimum target, so grow the pointer target
                 // without touching the rendered size. The 44px enhanced target would
                 // overhang by 12px per side and swallow the adjacent label.
                 "dial-kit-minimum-target",
                 "peer-focus-visible:outline peer-focus-visible:outline-focus",
-                t ? "cursor-not-allowed border-default bg-control-disable-primary" : r(
-                  "cursor-pointer",
+                a ? "cursor-not-allowed border-default bg-control-disable-primary" : r(
+                  "cursor-pointer group-has-[label:hover]/choice:bg-control-accent-alpha-hover",
                   l ? "border border-accent bg-control-neutral" : "border-default bg-control-neutral"
                 )
               ),
@@ -72,7 +74,7 @@ const F = ({
                 {
                   className: r(
                     "size-3 rounded-full",
-                    t ? "bg-control-disable-secondary" : "bg-control-accent"
+                    a ? "bg-control-disable-secondary" : "bg-control-accent"
                   )
                 }
               )
@@ -83,12 +85,12 @@ const F = ({
             {
               size: N.Standard,
               ...o,
-              htmlFor: a,
+              htmlFor: t,
               className: r(
                 // `Label` defaults to the secondary colour; a radio's own label is
                 // primary while the control is usable.
                 "py-[1px]",
-                t ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
+                a ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
                 o.className
               )
             }

package/dist/components/New/SharedEntityIndicator/SharedEntityIndicator.js

@@ -15,7 +15,7 @@ const S = ({
     role: "img",
     "aria-label": o,
     className: n(
-      "flex shrink-0 rounded-sm bg-layer-raised text-accent",
+      "flex shrink-0 rounded-xs bg-layer-raised text-accent",
       i,
       s.sharedEntityIndicator
     ),

package/dist/components/New/SideDrawer/SideDrawer.js

@@ -68,7 +68,7 @@ const ne = ({
               inert: !t,
               style: w,
               className: r(
-                "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-none",
+                "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-hidden",
                 "desktop:w-[540px] desktop:rounded-s-xl desktop:border-s desktop:border-secondary",
                 "transition-transform duration-300 motion-reduce:transition-none",
                 t ? "translate-x-0" : "translate-x-full rtl:-translate-x-full",

package/dist/components/New/Switch/Switch.js

@@ -9,15 +9,15 @@ const C = ({
   id: d,
   labelProps: o,
   isOn: t = !1,
-  disabled: l,
+  disabled: c,
   onChange: a,
-  caption: c,
+  caption: s,
   className: u,
   ...i
 }) => {
-  const p = b(), s = d ?? p, n = c ? `${s}-caption` : void 0, f = g(
-    (h) => {
-      a?.(h.target.checked);
+  const p = b(), l = d ?? p, n = s ? `${l}-caption` : void 0, h = g(
+    (f) => {
+      a?.(f.target.checked);
     },
     [a]
   );
@@ -26,7 +26,9 @@ const C = ({
       "div",
       {
         className: r(
-          "flex items-center gap-2",
+          // Named group: the control shows its hover state while either of its
+          // two <label>s (the control or the text) is hovered.
+          "group/choice flex items-center gap-2",
           u,
           N.switch
         ),
@@ -37,11 +39,11 @@ const C = ({
               ...i,
               type: "checkbox",
               role: "switch",
-              id: s,
+              id: l,
               checked: t,
               "aria-checked": t,
-              disabled: l,
-              onChange: f,
+              disabled: c,
+              onChange: h,
               "aria-label": y(
                 typeof o?.label != "string" ? i["aria-label"] : void 0
               ),
@@ -52,14 +54,14 @@ const C = ({
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: s,
+              htmlFor: l,
               className: r(
                 "flex h-[18px] w-[36px] shrink-0 items-center rounded-full p-0.5 transition-colors duration-200",
                 "peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus",
                 t ? "justify-end" : "justify-start",
-                l ? "cursor-not-allowed bg-control-disable-primary" : r(
+                c ? "cursor-not-allowed bg-control-disable-primary" : r(
                   "cursor-pointer",
-                  t ? "bg-control-accent hover:bg-control-accent-hover" : "bg-control-neutral-default hover:bg-control-neutral-hover-strong"
+                  t ? "bg-control-accent group-has-[label:hover]/choice:bg-control-accent-hover" : "bg-control-neutral-default group-has-[label:hover]/choice:bg-control-neutral-hover-strong"
                 )
               ),
               children: /* @__PURE__ */ e(
@@ -67,7 +69,7 @@ const C = ({
                 {
                   className: r(
                     "size-3.5 shrink-0 rounded-full",
-                    l ? "bg-control-disable-secondary" : "bg-control-neutral"
+                    c ? "bg-control-disable-secondary" : "bg-control-neutral"
                   )
                 }
               )
@@ -78,12 +80,12 @@ const C = ({
             {
               size: x.Standard,
               ...o,
-              htmlFor: s,
+              htmlFor: l,
               className: r(
                 // `Label` defaults to the secondary colour; the switch's own label
                 // has always been primary while the control is usable.
                 "py-[1px]",
-                l ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
+                c ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
                 o.className
               )
             }
@@ -91,12 +93,12 @@ const C = ({
         ]
       }
     ),
-    c && /* @__PURE__ */ e(
+    s && /* @__PURE__ */ e(
       "span",
       {
         id: n,
         className: "dial-tiny-text text-secondary ml-[44px]",
-        children: c
+        children: s
       }
     )
   ] });