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

package/dist/components/New/Checkbox/CheckboxBox.js

@@ -1,17 +1,17 @@
 import { jsx as t } from "react/jsx-runtime";
-import { IconMinus as u, IconCheck as d } from "@tabler/icons-react";
-import { mergeClasses as b } from "../../../utils/merge-classes.js";
-import { CHECKBOX_ICON_PROPS as p } from "./constants.js";
-import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
-const v = ({
-  isSelected: n = !1,
-  isIndeterminate: c = !1,
+import { IconMinus as m, IconCheck as u } from "@tabler/icons-react";
+import { mergeClasses as h } from "../../../utils/merge-classes.js";
+import { CHECKBOX_ICON_PROPS as i } from "./constants.js";
+import { DIAL_KIT_CLASS as g } from "../../../constants/public-class-names.js";
+const k = ({
+  isSelected: c = !1,
+  isIndeterminate: n = !1,
   invalid: r = !1,
   disabled: a = !1,
-  htmlFor: s,
-  className: m
+  htmlFor: l,
+  className: p
 }) => {
-  const o = c || n, e = !!s, l = b(
+  const o = n || c, e = !!l, s = h(
     "grid size-[20px] shrink-0 place-items-center rounded 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
@@ -19,18 +19,25 @@ const v = ({
     // box is not a target at all — the row around it is.
     e && "dial-kit-minimum-target",
     e && "peer-focus-visible:outline peer-focus-visible:outline-focus",
-    a ? "border-transparent bg-control-disable-primary text-control-disable-primary" : b(
+    a ? "border-transparent bg-control-disable-primary text-control-disable-primary" : h(
       r && o && "border-transparent bg-control-error text-control-permanent",
       r && !o && "border-error bg-control-neutral",
-      !r && o && "border-transparent bg-control-accent text-control-permanent hover:bg-control-accent-hover",
-      !r && !o && "border-default bg-control-neutral hover:border-accent hover:bg-control-accent-alpha-hover"
+      !r && o && "border-transparent bg-control-accent text-control-permanent",
+      !r && !o && "border-default bg-control-neutral",
+      /*
+       * A control box reacts while either label of its `Checkbox` is hovered
+       * (the `group/choice` root); a decorative box only to its own hover,
+       * since the row around it owns the interaction.
+       */
+      !r && o && (e ? "group-has-[label:hover]/choice:bg-control-accent-hover" : "hover:bg-control-accent-hover"),
+      !r && !o && (e ? "group-has-[label:hover]/choice:border-accent group-has-[label:hover]/choice:bg-control-accent-alpha-hover" : "hover:border-accent hover:bg-control-accent-alpha-hover")
     ),
     a ? "cursor-not-allowed" : e && "cursor-pointer",
-    m,
-    f.checkboxBox
-  ), i = c ? /* @__PURE__ */ t(u, { ...p }) : n && /* @__PURE__ */ t(d, { ...p });
-  return e ? /* @__PURE__ */ t("label", { htmlFor: s, className: l, children: i }) : /* @__PURE__ */ t("span", { "aria-hidden": "true", className: l, children: i });
+    p,
+    g.checkboxBox
+  ), b = n ? /* @__PURE__ */ t(m, { ...i }) : c && /* @__PURE__ */ t(u, { ...i });
+  return e ? /* @__PURE__ */ t("label", { htmlFor: l, className: s, children: b }) : /* @__PURE__ */ t("span", { "aria-hidden": "true", className: s, children: b });
 };
 export {
-  v as CheckboxBox
+  k as CheckboxBox
 };

package/dist/components/New/ConfirmationPopup/ConfirmationPopup.js

@@ -1,79 +1,84 @@
-import { jsxs as x, jsx as r } from "react/jsx-runtime";
+import { jsxs as A, jsx as r } from "react/jsx-runtime";
 import { useCallback as I } from "react";
 import { Button as j } from "../Button/Button.js";
 import { NeutralButton as z } from "../Button/ButtonWrappers.js";
-import { Popup as A } from "../Popup/Popup.js";
-import { Spinner as _ } from "../../Spinner/Spinner.js";
-import { ConfirmationPopupVariant as D } from "../../../types/confirmation-popup.js";
-import { PopupSize as F } from "../../../types/popup.js";
-import { mergeClasses as f } from "../../../utils/merge-classes.js";
-import { actionsBaseClassName as K, defaultCancelLabel as L, defaultConfirmLabel as T, variantConfig as s, loaderContainerClassName as V, descriptionBaseClassName as q } from "./constants.js";
+import { Popup as _ } from "../Popup/Popup.js";
+import { popupMainActionButtonClassName as f } from "../Popup/constants.js";
+import { Spinner as D } from "../../Spinner/Spinner.js";
+import { ConfirmationPopupVariant as F } from "../../../types/confirmation-popup.js";
+import { PopupSize as K } from "../../../types/popup.js";
+import { mergeClasses as m } from "../../../utils/merge-classes.js";
+import { actionsBaseClassName as L, defaultCancelLabel as M, defaultConfirmLabel as T, variantConfig as p, loaderContainerClassName as V, descriptionBaseClassName as q } from "./constants.js";
 import { DIAL_KIT_CLASS as w } from "../../../constants/public-class-names.js";
-const X = ({
-  header: p,
+const Z = ({
+  header: u,
   description: a,
-  descriptionClassName: m,
-  open: u = !1,
-  confirmLabel: c = T,
-  cancelLabel: C = L,
+  descriptionClassName: t,
+  open: c = !1,
+  confirmLabel: C = T,
+  cancelLabel: N = M,
   isLoading: o = !1,
   disableConfirmButton: d = !1,
-  className: N,
-  confirmClassName: b,
-  onClose: t,
-  onConfirm: v,
-  onCancel: l,
+  className: b,
+  confirmClassName: v,
+  onClose: l,
+  onConfirm: B,
+  onCancel: n,
   children: e,
-  variant: n = D.Info,
-  size: P = F.Sm,
-  footer: i,
+  variant: i = F.Info,
+  size: P = K.Sm,
+  footer: s,
   hideClose: S,
-  ...B
+  ...h
 }) => {
-  const h = o ? null : /* @__PURE__ */ x("div", { className: K, children: [
+  const k = o ? null : /* @__PURE__ */ A("div", { className: L, children: [
     /* @__PURE__ */ r(
       z,
       {
-        label: C,
-        onClick: () => l ? l() : t?.()
+        className: f,
+        label: N,
+        onClick: () => n ? n() : l?.()
       }
     ),
     /* @__PURE__ */ r(
       j,
       {
-        variant: s[n].confirm.variant,
-        appearance: s[n].confirm.appearance,
-        className: b,
-        label: c,
+        variant: p[i].confirm.variant,
+        appearance: p[i].confirm.appearance,
+        className: m(
+          f,
+          v
+        ),
+        label: C,
         disabled: d,
-        onClick: v
+        onClick: B
       }
     )
-  ] }), k = I(() => o ? /* @__PURE__ */ r("div", { className: V, children: /* @__PURE__ */ r(_, { size: 40 }) }) : e ?? (a ? /* @__PURE__ */ r(
+  ] }), x = I(() => o ? /* @__PURE__ */ r("div", { className: V, children: /* @__PURE__ */ r(D, { size: 40 }) }) : e ?? (a ? /* @__PURE__ */ r(
     "div",
     {
-      className: f(
+      className: m(
         q,
-        m
+        t
       ),
       children: a
     }
-  ) : null), [e, a, o, m]);
+  ) : null), [e, a, o, t]);
   return /* @__PURE__ */ r(
-    A,
+    _,
     {
-      ...B,
-      open: u,
-      header: p,
-      className: f(N, w.confirmationPopup),
-      onClose: () => t?.(),
-      footer: i ?? h,
+      ...h,
+      open: c,
+      header: u,
+      className: m(b, w.confirmationPopup),
+      onClose: () => l?.(),
+      footer: s ?? k,
       size: P,
-      hideClose: S ?? (!o && i === void 0),
-      children: k()
+      hideClose: S ?? (!o && s === void 0),
+      children: x()
     }
   );
 };
 export {
-  X as ConfirmationPopup
+  Z as ConfirmationPopup
 };