@epam/ai-dial-ui-kit 0.15.0-dev.5 → 0.15.0-dev.51

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

@@ -0,0 +1,34 @@
+import { jsx as r } from "react/jsx-runtime";
+import { IconArrowUpRight as a } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as m } from "../constants/icon.js";
+import { Tooltip as d } from "../Tooltip/Tooltip.js";
+import { DIAL_KIT_CLASS as s } from "../../../constants/public-class-names.js";
+import { mergeClasses as n } from "../../../utils/merge-classes.js";
+const S = ({
+  label: o = "Shared",
+  tooltip: t,
+  size: e = 12,
+  className: i
+}) => /* @__PURE__ */ r(d, { tooltip: t || "Shared", asChild: !0, children: /* @__PURE__ */ r(
+  "span",
+  {
+    role: "img",
+    "aria-label": o,
+    className: n(
+      "flex shrink-0 rounded-sm bg-layer-raised text-accent",
+      i,
+      s.sharedEntityIndicator
+    ),
+    children: /* @__PURE__ */ r(
+      a,
+      {
+        size: e,
+        stroke: m,
+        "aria-hidden": "true"
+      }
+    )
+  }
+) });
+export {
+  S as SharedEntityIndicator
+};

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

@@ -0,0 +1,148 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useFloating as A, useRole as E, useDismiss as K, useInteractions as P, FloatingPortal as j, FloatingOverlay as M, FloatingFocusManager as R } from "@floating-ui/react";
+import { IconChevronLeft as B } from "@tabler/icons-react";
+import { useId as G } from "react";
+import { CloseButton as H } from "../CloseButton/CloseButton.js";
+import { DIAL_KIT_ICON_STROKE as Z } from "../constants/icon.js";
+import { GhostIconButton as $ } from "../IconButton/IconButtonWrappers.js";
+import { useThemeScope as q } from "../ThemeScope/ThemeScope.js";
+import { DIAL_ICON_SIZE as J } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as Q } from "../../../constants/public-class-names.js";
+import { ElementSize as U } from "../../../types/size.js";
+import { mergeClasses as r } from "../../../utils/merge-classes.js";
+const ne = ({
+  open: t,
+  onClose: l,
+  header: o,
+  ariaLabel: f,
+  headerActions: p,
+  onBack: i,
+  backAriaLabel: u = "Back",
+  backDisabled: x = !1,
+  closeAriaLabel: g = "Close",
+  closeDisabled: b = !1,
+  hideClose: n = !1,
+  closeOnOutsideClick: h = !0,
+  children: y,
+  className: I,
+  overlayClassName: v,
+  headerClassName: S,
+  style: w,
+  overlayStyle: N,
+  bodyClassName: k,
+  titleClassName: F,
+  portalId: C
+}) => {
+  const D = q(), d = `side-drawer-title-${G()}`, s = typeof o == "string", { refs: m, context: a } = A({
+    open: t,
+    onOpenChange: (z) => {
+      z || l();
+    }
+  }), _ = E(a, { role: "dialog" }), L = K(a, { outsidePress: h }), { getFloatingProps: T } = P([_, L]), O = o != null || i != null || !n;
+  return /* @__PURE__ */ e(j, { id: C, children: /* @__PURE__ */ e(
+    M,
+    {
+      lockScroll: t,
+      style: N,
+      className: r(
+        "z-popup bg-backdrop transition-opacity duration-300 motion-reduce:transition-none",
+        t ? "opacity-100" : "pointer-events-none opacity-0",
+        D,
+        v
+      ),
+      children: /* @__PURE__ */ e(
+        R,
+        {
+          context: a,
+          disabled: !t,
+          initialFocus: m.floating,
+          children: /* @__PURE__ */ c(
+            "div",
+            {
+              ref: m.setFloating,
+              ...T(),
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": s ? d : void 0,
+              "aria-label": s ? void 0 : f,
+              inert: !t,
+              style: w,
+              className: r(
+                "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-none",
+                "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",
+                I,
+                Q.sideDrawer
+              ),
+              children: [
+                O && /* @__PURE__ */ c(
+                  "div",
+                  {
+                    className: r(
+                      "flex shrink-0 items-center gap-2 border-b border-tertiary px-6 py-3",
+                      S
+                    ),
+                    children: [
+                      i && /* @__PURE__ */ e(
+                        $,
+                        {
+                          "aria-label": u,
+                          disabled: x,
+                          onClick: i,
+                          icon: /* @__PURE__ */ e(
+                            B,
+                            {
+                              size: J.MD,
+                              stroke: Z,
+                              className: "rtl:-scale-x-100",
+                              "aria-hidden": "true"
+                            }
+                          )
+                        }
+                      ),
+                      s ? /* @__PURE__ */ e(
+                        "h2",
+                        {
+                          id: d,
+                          className: r(
+                            "min-w-0 flex-1 truncate text-primary",
+                            F ?? "dial-h2-text"
+                          ),
+                          children: o
+                        }
+                      ) : /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: o }),
+                      p,
+                      !n && /* @__PURE__ */ e(
+                        H,
+                        {
+                          ariaLabel: g,
+                          onClose: l,
+                          disabled: b,
+                          size: U.Standard
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: r(
+                      "min-h-0 flex-1 overflow-y-auto",
+                      k
+                    ),
+                    children: y
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+};
+export {
+  ne as SideDrawer
+};

package/dist/components/New/Slider/Slider.js

@@ -1,112 +1,173 @@
-import { jsxs as n, jsx as e, Fragment as C } from "react/jsx-runtime";
-import { useId as w, useCallback as A } from "react";
-import { mergeClasses as i } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as B } from "../../../utils/accessible-name.js";
-import { ErrorText as H, CaptionText as L } from "../CaptionText/CaptionText.js";
-import { Label as U } from "../Label/Label.js";
-const Z = 16, _ = (o) => (o.toString().split(".")[1] ?? "").length, O = ({
-  id: o,
+import { jsxs as n, jsx as e, Fragment as k } from "react/jsx-runtime";
+import { useId as Z, useCallback as q } from "react";
+import { mergeClasses as a } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as D } from "../../../utils/accessible-name.js";
+import { ErrorText as J, CaptionText as K } from "../CaptionText/CaptionText.js";
+import { Label as O } from "../Label/Label.js";
+import { getTickPercents as Q } from "./utils.js";
+const R = 12, W = (t) => (t.toString().split(".")[1] ?? "").length, F = (t) => `calc(${t}% + ${(0.5 - t / 100) * R}px)`, X = (t, r) => t && r ? "grid-cols-[auto_minmax(0,1fr)_auto]" : t ? "grid-cols-[auto_minmax(0,1fr)]" : r ? "grid-cols-[minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)]", le = ({
+  id: t,
   value: r,
-  min: d = 0,
-  max: h = 1,
-  step: x = 0.1,
-  disabled: a,
-  labelProps: l,
-  labels: t,
-  formatValue: m,
-  showValue: p = !1,
-  caption: f,
+  min: m = 0,
+  max: g = 1,
+  step: h = 0.1,
+  disabled: i,
+  labelProps: s,
+  labels: l,
+  formatValue: x,
+  showValue: v = !1,
+  showTooltip: S = !1,
+  showTicks: j = !1,
+  leftContent: N,
+  rightContent: y,
+  caption: b,
   error: c,
-  onChange: g,
-  containerClassName: $,
-  trackClassName: F,
-  fillClassName: M,
-  className: S,
-  ...u
+  onChange: w,
+  containerClassName: z,
+  trackClassName: B,
+  fillClassName: E,
+  className: L,
+  ...I
 }) => {
-  const T = w(), s = o ?? T, v = f && !c ? `${s}-caption` : void 0, N = c ? `${s}-error` : void 0, y = h - d, b = y > 0 ? Math.min(100, Math.max(0, (r - d) / y * 100)) : 0, j = `calc(${b}% + ${(0.5 - b / 100) * Z}px)`, I = m ? m(r) : r.toFixed(_(x)), k = A(
-    (E) => {
-      g?.(Number(E.target.value));
+  const A = Z(), o = t ?? A, C = b && !c ? `${o}-caption` : void 0, T = c ? `${o}-error` : void 0, f = g - m, G = f > 0 ? Math.min(100, Math.max(0, (r - m) / f * 100)) : 0, _ = F(G), H = j && !i ? Q(f, h) : [], M = S && !i, u = N != null, $ = y != null, p = x ? x(r) : r.toFixed(W(h)), U = q(
+    (d) => {
+      w?.(Number(d.target.value));
     },
-    [g]
+    [w]
   );
-  return /* @__PURE__ */ n("div", { className: i("flex flex-col gap-2", $), children: [
-    (l || p) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-      l && /* @__PURE__ */ e(U, { ...l, htmlFor: s }),
-      p && // The input already reports its value to assistive tech, so this is
+  return /* @__PURE__ */ n("div", { className: a("flex flex-col gap-2", z), children: [
+    (s || v) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      s && /* @__PURE__ */ e(O, { ...s, htmlFor: o }),
+      v && // The input already reports its value to assistive tech, so this is
       // a visual echo rather than a second announcement.
       /* @__PURE__ */ e(
         "span",
         {
           "aria-hidden": "true",
-          className: i(
+          className: a(
             "dial-small-text ml-auto",
-            a ? "text-control-disable-primary" : "text-primary"
+            i ? "text-control-disable-primary" : "text-primary"
           ),
-          children: I
+          children: p
         }
       )
     ] }),
     /* @__PURE__ */ n("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ n("div", { className: "relative flex h-6 items-center", children: [
-        /* @__PURE__ */ e(
-          "div",
-          {
-            className: i(
-              "pointer-events-none absolute inset-x-0 h-1 rounded-full",
-              a ? "bg-control-disable-primary" : "bg-control-neutral-active",
-              F
-            )
-          }
-        ),
-        /* @__PURE__ */ e(
-          "div",
-          {
-            className: i(
-              "pointer-events-none absolute left-0 h-1 rounded-full",
-              a ? "bg-control-disable-secondary" : "bg-control-accent",
-              M
-            ),
-            style: { width: j }
-          }
-        ),
-        /* @__PURE__ */ e(
-          "input",
-          {
-            ...u,
-            type: "range",
-            id: s,
-            value: r,
-            min: d,
-            max: h,
-            step: x,
-            disabled: a,
-            onChange: k,
-            "aria-label": B(
-              typeof l?.label != "string" ? u["aria-label"] : void 0
-            ),
-            "aria-valuetext": m ? I : void 0,
-            "aria-describedby": N ?? v,
-            className: i(
-              "dial-kit-slider absolute inset-0 h-full w-full",
-              S
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: a(
+            "grid items-center gap-x-3 gap-y-1",
+            X(u, $),
+            // Room for the value bubble, which hangs above the track row.
+            M && "mt-7"
+          ),
+          children: [
+            u && /* @__PURE__ */ e("div", { className: "flex items-center", children: N }),
+            /* @__PURE__ */ n("div", { className: "relative flex h-6 items-center", children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: a(
+                    "pointer-events-none absolute inset-x-0 h-1 rounded-full",
+                    i ? "bg-control-disable-primary" : "bg-control-accent-muted",
+                    B
+                  )
+                }
+              ),
+              H.map((d) => /* @__PURE__ */ e(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute size-0.5 -translate-x-1/2 rounded-full bg-control-neutral-default",
+                  style: { left: F(d) }
+                },
+                d
+              )),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: a(
+                    "pointer-events-none absolute left-0 h-1 rounded-full",
+                    i ? "bg-control-disable-secondary" : "bg-control-accent",
+                    E
+                  ),
+                  style: { width: _ }
+                }
+              ),
+              M && // A visual echo like `showValue`: the input already announces
+              // its value, so the bubble stays out of the accessibility tree.
+              /* @__PURE__ */ n(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute bottom-full mb-0.5 flex -translate-x-1/2 flex-col items-center",
+                  style: { left: _ },
+                  children: [
+                    /* @__PURE__ */ e("span", { className: "whitespace-nowrap rounded-md bg-control-inverted px-2 py-0.5 dial-small-text text-control-inverted shadow-xs", children: p }),
+                    /* @__PURE__ */ e(
+                      "svg",
+                      {
+                        width: "8",
+                        height: "4",
+                        viewBox: "0 0 8 4",
+                        className: "fill-control-inverted",
+                        children: /* @__PURE__ */ e("path", { d: "M0 0h8L4 4z" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  ...I,
+                  type: "range",
+                  id: o,
+                  value: r,
+                  min: m,
+                  max: g,
+                  step: h,
+                  disabled: i,
+                  onChange: U,
+                  "aria-label": D(
+                    typeof s?.label != "string" ? I["aria-label"] : void 0
+                  ),
+                  "aria-valuetext": x ? p : void 0,
+                  "aria-describedby": T ?? C,
+                  className: a(
+                    "dial-kit-slider absolute inset-0 h-full w-full",
+                    L
+                  )
+                }
+              )
+            ] }),
+            $ && /* @__PURE__ */ e("div", { className: "flex items-center", children: y }),
+            l && /* @__PURE__ */ e(
+              "div",
+              {
+                className: a(
+                  "dial-tiny-text flex text-secondary",
+                  u && "col-start-2"
+                ),
+                children: l.length === 3 ? /* @__PURE__ */ n(k, { children: [
+                  /* @__PURE__ */ e("span", { children: l[0] }),
+                  /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: l[1] }),
+                  /* @__PURE__ */ e("span", { children: l[2] })
+                ] }) : /* @__PURE__ */ n(k, { children: [
+                  /* @__PURE__ */ e("span", { children: l[0] }),
+                  /* @__PURE__ */ e("span", { className: "ml-auto", children: l[1] })
+                ] })
+              }
             )
-          }
-        )
-      ] }),
-      t && /* @__PURE__ */ e("div", { className: "dial-tiny-text flex text-secondary", children: t.length === 3 ? /* @__PURE__ */ n(C, { children: [
-        /* @__PURE__ */ e("span", { children: t[0] }),
-        /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: t[1] }),
-        /* @__PURE__ */ e("span", { children: t[2] })
-      ] }) : /* @__PURE__ */ n(C, { children: [
-        /* @__PURE__ */ e("span", { children: t[0] }),
-        /* @__PURE__ */ e("span", { className: "ml-auto", children: t[1] })
-      ] }) }),
-      /* @__PURE__ */ e(H, { id: N, text: c }),
-      !c && /* @__PURE__ */ e(L, { id: v, text: f })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(J, { id: T, text: c }),
+      !c && /* @__PURE__ */ e(K, { id: C, text: b })
     ] })
   ] });
 };
 export {
-  O as Slider
+  le as Slider
 };

package/dist/components/New/Slider/utils.js

@@ -0,0 +1,12 @@
+const e = (r, t) => {
+  if (r <= 0 || t <= 0)
+    return [];
+  const o = Math.floor(r / t + 1e-9);
+  return Array.from(
+    { length: o + 1 },
+    (n, c) => c * t / r * 100
+  );
+};
+export {
+  e as getTickPercents
+};

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

@@ -1,11 +1,12 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { useId as b, useCallback as g } from "react";
 import { ElementSize as x } from "../../../types/size.js";
 import { mergeClasses as r } from "../../../utils/merge-classes.js";
 import { resolveAccessibleName as y } from "../../../utils/accessible-name.js";
 import { Label as v } from "../Label/Label.js";
-const S = ({
-  id: m,
+import { DIAL_KIT_CLASS as N } from "../../../constants/public-class-names.js";
+const C = ({
+  id: d,
   labelProps: o,
   isOn: t = !1,
   disabled: l,
@@ -14,72 +15,82 @@ const S = ({
   className: u,
   ...i
 }) => {
-  const p = b(), s = m ?? p, n = c ? `${s}-caption` : void 0, f = g(
+  const p = b(), s = d ?? p, n = c ? `${s}-caption` : void 0, f = g(
     (h) => {
       a?.(h.target.checked);
     },
     [a]
   );
-  return /* @__PURE__ */ d("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ d("div", { className: r("flex items-center gap-2", u), children: [
-      /* @__PURE__ */ e(
-        "input",
-        {
-          ...i,
-          type: "checkbox",
-          role: "switch",
-          id: s,
-          checked: t,
-          "aria-checked": t,
-          disabled: l,
-          onChange: f,
-          "aria-label": y(
-            typeof o?.label != "string" ? i["aria-label"] : void 0
+  return /* @__PURE__ */ m("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: r(
+          "flex items-center gap-2",
+          u,
+          N.switch
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ...i,
+              type: "checkbox",
+              role: "switch",
+              id: s,
+              checked: t,
+              "aria-checked": t,
+              disabled: l,
+              onChange: f,
+              "aria-label": y(
+                typeof o?.label != "string" ? i["aria-label"] : void 0
+              ),
+              "aria-describedby": n,
+              className: "peer sr-only"
+            }
           ),
-          "aria-describedby": n,
-          className: "peer sr-only"
-        }
-      ),
-      /* @__PURE__ */ e(
-        "label",
-        {
-          htmlFor: s,
-          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(
-              "cursor-pointer",
-              t ? "bg-control-accent hover:bg-control-accent-hover" : "bg-control-neutral-default hover:bg-control-neutral-hover-strong"
-            )
+          /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: s,
+              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(
+                  "cursor-pointer",
+                  t ? "bg-control-accent hover:bg-control-accent-hover" : "bg-control-neutral-default hover:bg-control-neutral-hover-strong"
+                )
+              ),
+              children: /* @__PURE__ */ e(
+                "span",
+                {
+                  className: r(
+                    "size-3.5 shrink-0 rounded-full",
+                    l ? "bg-control-disable-secondary" : "bg-control-neutral"
+                  )
+                }
+              )
+            }
           ),
-          children: /* @__PURE__ */ e(
-            "span",
+          o && /* @__PURE__ */ e(
+            v,
             {
+              size: x.Standard,
+              ...o,
+              htmlFor: s,
               className: r(
-                "size-3.5 shrink-0 rounded-full",
-                l ? "bg-control-disable-secondary" : "bg-control-neutral"
+                // `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",
+                o.className
               )
             }
           )
-        }
-      ),
-      o && /* @__PURE__ */ e(
-        v,
-        {
-          size: x.Standard,
-          ...o,
-          htmlFor: s,
-          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",
-            o.className
-          )
-        }
-      )
-    ] }),
+        ]
+      }
+    ),
     c && /* @__PURE__ */ e(
       "span",
       {
@@ -91,5 +102,5 @@ const S = ({
   ] });
 };
 export {
-  S as Switch
+  C as Switch
 };