@epam/ai-dial-ui-kit 0.16.0-dev.55 → 0.16.0-dev.56

package/dist/components/New/Notification/Notification.js

@@ -1,65 +1,76 @@
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { useMemo as k } from "react";
-import { DialIcon as u } from "../../Icon/Icon.js";
-import { NotificationVariant as c, NotificationType as s } from "../../../types/notification.js";
-import { mergeClasses as d } from "../../../utils/merge-classes.js";
-import { CloseButton as v } from "../CloseButton/CloseButton.js";
-import { variantIcons as I, notificationVariantRoleMap as M, notificationVariantClassNameMap as T, alertBaseClassName as L } from "./constants.js";
-import { DIAL_KIT_CLASS as V } from "../../../constants/public-class-names.js";
-const R = ({
-  variant: e = c.Info,
-  type: i = s.Toast,
-  title: o,
+import { useMemo as M } from "react";
+import { DialIcon as S } from "../../Icon/Icon.js";
+import { NotificationVariant as d, NotificationSurface as p, NotificationType as i } from "../../../types/notification.js";
+import { mergeClasses as o } from "../../../utils/merge-classes.js";
+import { CloseButton as T } from "../CloseButton/CloseButton.js";
+import { variantIcons as v, notificationVariantRoleMap as L, notificationNeutralSurfaceIconClassNameMap as V, notificationNeutralSurfaceClassName as j, notificationVariantClassNameMap as y, alertBaseClassName as A } from "./constants.js";
+import { DIAL_KIT_CLASS as B } from "../../../constants/public-class-names.js";
+const G = ({
+  variant: e = d.Info,
+  type: s = i.Toast,
+  surface: N = p.Variant,
+  title: t,
   message: l,
-  action: t,
-  className: f,
+  action: n,
+  className: x,
   iconSize: m = 24,
-  iconStroke: n = 2,
-  closable: p = !1,
-  onClose: x,
-  children: h,
-  textClassName: N,
-  ...w
+  iconStroke: c = 2,
+  closable: h = !1,
+  onClose: u,
+  children: w,
+  textClassName: C,
+  ...g
 }) => {
-  const g = k(() => I({ size: m, stroke: n })[e], [e, m, n]), C = N ?? (i === s.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
+  const b = M(() => v({ size: m, stroke: c })[e], [e, m, c]), f = N === p.Neutral, k = C ?? (s === i.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
   return /* @__PURE__ */ r(
     "div",
     {
-      role: M[e],
-      ...w,
-      className: d(
-        L,
-        T[e],
-        i === s.Toast && "min-w-[200px] max-w-[600px] shadow-lg",
-        i === s.SectionMessage && e === c.Loading && "border-secondary",
-        f,
-        V.notification
+      role: L[e],
+      ...g,
+      className: o(
+        A,
+        f ? j : y[e],
+        s === i.Toast && "min-w-[200px] max-w-[600px] shadow-lg",
+        s === i.SectionMessage && e === d.Loading && "border-secondary",
+        x,
+        B.notification
       ),
       children: [
         /* @__PURE__ */ r("div", { className: "flex items-start gap-3 flex-1 min-w-0", children: [
-          /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "flex shrink-0", children: /* @__PURE__ */ a(u, { icon: g }) }),
-          o ? /* @__PURE__ */ r(
+          /* @__PURE__ */ a(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: o(
+                "flex shrink-0",
+                f && V[e]
+              ),
+              children: /* @__PURE__ */ a(S, { icon: b })
+            }
+          ),
+          t ? /* @__PURE__ */ r(
             "div",
             {
-              className: d(
+              className: o(
                 "flex min-w-0 text-primary break-words",
-                C
+                k
               ),
               children: [
-                /* @__PURE__ */ a("div", { className: "dial-small-paragraph-semi-text min-w-0 break-words", children: o }),
+                /* @__PURE__ */ a("div", { className: "dial-small-paragraph-semi-text min-w-0 break-words", children: t }),
                 /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 break-words", children: l })
               ]
             }
           ) : /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 text-primary break-words", children: l })
         ] }),
-        t != null && /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center", children: t }),
-        h,
-        p && /* @__PURE__ */ a(
-          v,
+        n != null && /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center", children: n }),
+        w,
+        h && /* @__PURE__ */ a(
+          T,
           {
             className: "shrink-0 self-start",
             ariaLabel: "Close notification",
-            onClose: (b) => x?.(b)
+            onClose: (I) => u?.(I)
           }
         )
       ]
@@ -67,5 +78,5 @@ const R = ({
   );
 };
 export {
-  R as Notification
+  G as Notification
 };

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

@@ -1,32 +1,41 @@
-import { jsx as i } from "react/jsx-runtime";
-import { Spinner as t } from "../../Spinner/Spinner.js";
+import { jsx as r } from "react/jsx-runtime";
+import { Spinner as n } from "../../Spinner/Spinner.js";
 import { NotificationVariant as e } from "../../../types/notification.js";
-import { IconCheck as n, IconCircleCheckFilled as a, IconAlertTriangleFilled as s, IconAlertCircleFilled as o, IconInfoCircleFilled as c } from "@tabler/icons-react";
-const m = (r) => ({
-  info: /* @__PURE__ */ i(c, { size: r.size }),
-  error: /* @__PURE__ */ i(o, { size: r.size }),
-  warning: /* @__PURE__ */ i(s, { size: r.size }),
-  success: /* @__PURE__ */ i(a, { size: r.size }),
-  loading: /* @__PURE__ */ i(t, { size: r.size }),
-  general: /* @__PURE__ */ i(n, { size: r.size, stroke: r.stroke })
-}), u = {
+import { IconCheck as i, IconCircleCheckFilled as a, IconAlertTriangleFilled as s, IconAlertCircleFilled as o, IconInfoCircleFilled as c } from "@tabler/icons-react";
+const x = (t) => ({
+  info: /* @__PURE__ */ r(c, { size: t.size }),
+  error: /* @__PURE__ */ r(o, { size: t.size }),
+  warning: /* @__PURE__ */ r(s, { size: t.size }),
+  success: /* @__PURE__ */ r(a, { size: t.size }),
+  loading: /* @__PURE__ */ r(n, { size: t.size }),
+  general: /* @__PURE__ */ r(i, { size: t.size, stroke: t.stroke })
+}), m = {
   [e.Info]: "bg-info text-info",
   [e.Success]: "bg-success text-success",
   [e.Warning]: "bg-warning text-warning",
   [e.Error]: "bg-error text-error",
   [e.Loading]: "bg-layer-raised text-info",
   [e.General]: "bg-layer-sunken text-primary"
-}, z = {
+}, d = "bg-layer-sunken text-primary", z = {
+  [e.Info]: "text-info",
+  [e.Success]: "text-success",
+  [e.Warning]: "text-warning-icon",
+  [e.Error]: "text-error",
+  [e.Loading]: "text-info",
+  [e.General]: "text-primary"
+}, I = {
   [e.Info]: "status",
   [e.Success]: "status",
   [e.Warning]: "alert",
   [e.Error]: "alert",
   [e.Loading]: "status",
   [e.General]: "status"
-}, x = "items-center justify-between rounded-xl relative gap-3 p-3 border flex border-transparent";
+}, b = "items-center justify-between rounded-xl relative gap-3 p-3 border flex border-transparent";
 export {
-  x as alertBaseClassName,
-  u as notificationVariantClassNameMap,
-  z as notificationVariantRoleMap,
-  m as variantIcons
+  b as alertBaseClassName,
+  d as notificationNeutralSurfaceClassName,
+  z as notificationNeutralSurfaceIconClassNameMap,
+  m as notificationVariantClassNameMap,
+  I as notificationVariantRoleMap,
+  x as variantIcons
 };

package/dist/components/New/ToggleChip/ToggleChip.js

@@ -0,0 +1,54 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { useCallback as g } from "react";
+import { tagStateClassNames as h, tagInteractiveClassName as u, tagHoverClassName as N, tagBaseClassName as d } from "../Tag/constants.js";
+import { DIAL_KIT_CLASS as x } from "../../../constants/public-class-names.js";
+import { TagAppearance as b } from "../../../types/tag.js";
+import { mergeClasses as k } from "../../../utils/merge-classes.js";
+import { toggleChipDisabledClassNames as v, toggleChipLabelClassNames as A } from "./constants.js";
+const B = ({
+  label: e,
+  icon: s,
+  isSelected: a = !1,
+  onToggle: r,
+  onClick: m,
+  disabled: o = !1,
+  className: p,
+  title: n,
+  ...f
+}) => {
+  const C = g(
+    (l) => {
+      m?.(l), !l.defaultPrevented && r?.(!a);
+    },
+    [m, r, a]
+  ), t = a ? "selected" : "default";
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      ...f,
+      type: "button",
+      "aria-pressed": a,
+      disabled: o,
+      title: n ?? (typeof e == "string" ? e : void 0),
+      onClick: C,
+      className: k(
+        d,
+        A[t],
+        o ? v[t] : [
+          h[b.Selectable][t],
+          u,
+          N
+        ],
+        p,
+        x.toggleChip
+      ),
+      children: [
+        s && /* @__PURE__ */ i("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: s }),
+        /* @__PURE__ */ i("span", { className: "truncate", children: e })
+      ]
+    }
+  );
+};
+export {
+  B as ToggleChip
+};

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

@@ -0,0 +1,11 @@
+const e = {
+  default: "dial-tiny-text",
+  selected: "dial-tiny-semi-text"
+}, t = {
+  default: "cursor-not-allowed text-control-disable-primary",
+  selected: "cursor-not-allowed bg-control-disable-primary text-control-disable-primary"
+};
+export {
+  t as toggleChipDisabledClassNames,
+  e as toggleChipLabelClassNames
+};

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
 };