@epam/ai-dial-ui-kit 0.15.0-dev.4 → 0.15.0-dev.42

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

package/dist/components/New/Tabs/Tabs.js

@@ -1,83 +1,113 @@
-import { jsx as u, jsxs as k } from "react/jsx-runtime";
-import { useRef as g, useCallback as w } from "react";
-import { mergeClasses as f } from "../../../utils/merge-classes.js";
-const A = ["ArrowRight", "ArrowLeft", "Home", "End"], R = ({
+import { jsx as s, jsxs as I } from "react/jsx-runtime";
+import { useRef as j, useId as R, useCallback as _ } from "react";
+import { mergeClasses as l } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as a } from "../../../constants/public-class-names.js";
+import { TabOrientation as u } from "../../../types/tab.js";
+const z = {
+  [u.Horizontal]: { next: "ArrowRight", previous: "ArrowLeft" },
+  [u.Vertical]: { next: "ArrowDown", previous: "ArrowUp" }
+}, M = ({
   tabs: n,
-  activeTabId: i,
-  onTabChange: o,
-  ariaLabel: x,
-  className: m,
-  tabClassName: b
+  activeTabId: c,
+  onTabChange: f,
+  orientation: m = u.Horizontal,
+  sectionLabel: d,
+  ariaLabel: k,
+  className: v,
+  tabListClassName: D,
+  tabClassName: S,
+  sectionLabelClassName: H
 }) => {
-  const p = g({}), a = n.find((e) => e.id === i), y = a && !a.disabled ? a.id : n.find((e) => !e.disabled)?.id, h = w(
+  const w = j({}), A = R(), i = m === u.Vertical, h = n.find((e) => e.id === c), K = h && !h.disabled ? h.id : n.find((e) => !e.disabled)?.id, V = _(
     (e) => {
-      if (!A.includes(e.key) || n.length === 0) return;
-      const r = n.filter((c) => !c.disabled);
-      if (r.length === 0) return;
-      const t = Math.max(
-        r.findIndex((c) => c.id === i),
+      const { next: t, previous: r } = z[m];
+      if (![t, r, "Home", "End"].includes(e.key) || n.length === 0)
+        return;
+      const o = n.filter((g) => !g.disabled);
+      if (o.length === 0) return;
+      const p = Math.max(
+        o.findIndex((g) => g.id === c),
         0
-      ), s = r.length - 1;
-      let l = t;
-      switch (e.key) {
-        case "ArrowRight":
-          l = t === s ? 0 : t + 1;
-          break;
-        case "ArrowLeft":
-          l = t === 0 ? s : t - 1;
-          break;
-        case "Home":
-          l = 0;
-          break;
-        case "End":
-          l = s;
-          break;
-      }
-      e.preventDefault();
-      const d = r[l];
-      p.current[d.id]?.focus(), d.id !== i && o(d.id);
+      ), b = o.length - 1;
+      let x = p;
+      e.key === t ? x = p === b ? 0 : p + 1 : e.key === r ? x = p === 0 ? b : p - 1 : e.key === "Home" ? x = 0 : x = b, e.preventDefault();
+      const y = o[x];
+      w.current[y.id]?.focus(), y.id !== c && f(y.id);
     },
-    [n, i, o]
-  );
-  return /* @__PURE__ */ u(
+    [n, c, f, m]
+  ), N = /* @__PURE__ */ s(
     "div",
     {
       role: "tablist",
-      "aria-label": x,
-      onKeyDown: h,
-      className: f("flex justify-start gap-1", m),
+      "aria-orientation": i ? "vertical" : void 0,
+      "aria-label": k,
+      "aria-labelledby": !k && d ? A : void 0,
+      onKeyDown: V,
+      className: l(
+        i ? "flex flex-col gap-1 px-2" : "flex justify-start gap-1",
+        // Without a heading the list is the root, so it takes the caller's
+        // classes — and the root kit class below — itself.
+        !d && v,
+        D,
+        a.tabList,
+        !d && a.tabs
+      ),
       children: n.map((e) => {
-        const r = i === e.id, t = !!e.disabled;
-        return /* @__PURE__ */ k(
+        const t = c === e.id, r = !!e.disabled;
+        return /* @__PURE__ */ I(
           "button",
           {
-            ref: (s) => {
-              p.current[e.id] = s;
+            ref: (o) => {
+              w.current[e.id] = o;
             },
             type: "button",
             role: "tab",
-            "aria-selected": r,
-            disabled: t,
-            tabIndex: e.id === y ? 0 : -1,
-            onClick: () => o(e.id),
-            className: f(
-              "dial-small-paragraph-semi-text dial-kit-enhanced-target",
-              "border-b-2 border-transparent flex items-center gap-2 px-3 py-2 text-start",
+            "aria-selected": t,
+            disabled: r,
+            tabIndex: e.id === K ? 0 : -1,
+            onClick: () => f(e.id),
+            className: l(
+              "dial-kit-enhanced-target flex items-center gap-2 text-start",
               "transition-colors motion-reduce:transition-none",
-              "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus",
-              t && "cursor-not-allowed border-control-disable-primary text-control-disable-primary",
-              !t && (r ? "dial-kit-tab-selected-underline text-primary" : "border-transparent text-secondary"),
-              b
+              "focus-visible:outline focus-visible:outline-focus",
+              i ? [
+                "h-11 w-full rounded-lg px-3 desktop:h-10",
+                "focus-visible:-outline-offset-1",
+                t ? "dial-small-semi-text" : "dial-small-text text-secondary"
+              ] : [
+                "dial-small-paragraph-semi-text border-b-2 border-transparent px-3 py-2",
+                "focus-visible:outline-offset-2"
+              ],
+              r && (i ? "cursor-not-allowed text-control-disable-primary" : "cursor-not-allowed border-control-disable-primary text-control-disable-primary"),
+              !r && (i ? t ? "bg-control-accent-alpha text-accent hover:bg-control-accent-alpha-hover" : "hover:bg-control-accent-alpha-hover" : t ? "dial-kit-tab-selected-underline text-primary" : "border-transparent text-secondary"),
+              S,
+              a.tab,
+              t && a.tabSelected
             ),
             children: [
-              /* @__PURE__ */ u("span", { children: e.label }),
-              e.count != null && /* @__PURE__ */ u(
+              e.icon && // The label names the tab, so the icon beside it is decorative —
+              // and a Tabler icon is a bare `<svg>` that would otherwise be
+              // announced as an unnamed graphic.
+              /* @__PURE__ */ s("span", { "aria-hidden": "true", className: "flex shrink-0", children: e.icon }),
+              /* @__PURE__ */ s(
+                "span",
+                {
+                  className: l(
+                    i && !t && !r && "text-primary"
+                  ),
+                  children: e.label
+                }
+              ),
+              e.count != null && /* @__PURE__ */ s(
                 "span",
                 {
-                  className: f(
+                  className: l(
                     "dial-tiny-semi-text rounded-full px-1.5 py-0.5",
-                    t && "bg-layer-sunken text-control-disable-primary",
-                    !t && (r ? "bg-control-accent-alpha text-accent" : "bg-layer-sunken text-secondary")
+                    // In a rail the badge belongs at the far end of the row, not
+                    // hanging off the label.
+                    i && "ms-auto",
+                    r && "bg-layer-sunken text-control-disable-primary",
+                    !r && (t ? "bg-control-accent-alpha text-accent" : "bg-layer-sunken text-secondary")
                   ),
                   children: e.count
                 }
@@ -89,7 +119,41 @@ const A = ["ArrowRight", "ArrowLeft", "Home", "End"], R = ({
       })
     }
   );
+  return d ? /* @__PURE__ */ I(
+    "div",
+    {
+      className: l(
+        "flex flex-col gap-3",
+        v,
+        a.tabs
+      ),
+      children: [
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: l(
+              "flex h-16 shrink-0 items-center",
+              i ? "px-4" : "px-3"
+            ),
+            children: /* @__PURE__ */ s(
+              "span",
+              {
+                id: A,
+                className: l(
+                  "dial-h1-text text-primary",
+                  H,
+                  a.tabsSectionLabel
+                ),
+                children: d
+              }
+            )
+          }
+        ),
+        N
+      ]
+    }
+  ) : N;
 };
 export {
-  R as Tabs
+  M as Tabs
 };