@epam/ai-dial-ui-kit 0.14.0-dev.9 → 0.14.1

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

@@ -0,0 +1,100 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { useId as h, 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";
+import { Label as k } from "../Label/Label.js";
+const A = ({
+  id: p,
+  name: u,
+  value: l,
+  labelProps: o,
+  isSelected: i = !1,
+  disabled: t,
+  onChange: s,
+  caption: c,
+  className: b,
+  ...n
+}) => {
+  const f = h(), a = p ?? f, d = c ? `${a}-caption` : void 0, g = y(
+    (x) => {
+      x.target.checked && s?.(l);
+    },
+    [s, l]
+  );
+  return /* @__PURE__ */ m("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ m("div", { className: r("flex items-center gap-2 ", b), children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ...n,
+          type: "radio",
+          id: a,
+          name: u,
+          value: l,
+          checked: i,
+          disabled: t,
+          onChange: g,
+          "aria-label": v(
+            typeof o?.label != "string" ? n["aria-label"] : void 0
+          ),
+          "aria-describedby": d,
+          className: "peer sr-only"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "label",
+        {
+          htmlFor: a,
+          className: r(
+            "group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200 hover:bg-control-accent-alpha-hover",
+            // 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",
+              i ? "border border-accent bg-control-neutral" : "border-default bg-control-neutral"
+            )
+          ),
+          children: i && /* @__PURE__ */ e(
+            "span",
+            {
+              className: r(
+                "size-3 rounded-full",
+                t ? "bg-control-disable-secondary" : "bg-control-accent"
+              )
+            }
+          )
+        }
+      ),
+      o && /* @__PURE__ */ e(
+        k,
+        {
+          size: N.Standard,
+          ...o,
+          htmlFor: a,
+          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",
+            o.className
+          )
+        }
+      )
+    ] }),
+    c && /* @__PURE__ */ e(
+      "span",
+      {
+        id: d,
+        className: "dial-tiny-text text-secondary ml-[26px]",
+        children: c
+      }
+    )
+  ] });
+};
+export {
+  A as Radio
+};

package/dist/components/New/RadioGroup/RadioGroup.js

@@ -0,0 +1,81 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { useId as T } from "react";
+import { ErrorText as y, CaptionText as G } from "../CaptionText/CaptionText.js";
+import { Label as w } from "../Label/Label.js";
+import { Radio as A } from "../Radio/Radio.js";
+import { RadioGroupOrientation as E } from "../../../types/radio-group.js";
+import { mergeClasses as i } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as v } from "../../../utils/accessible-name.js";
+import { selectedContentClassName as L, orientationClassMap as M, optionsWrapperBaseClassName as O, groupBaseClassName as S } from "./constants.js";
+const Q = ({
+  items: u,
+  value: f,
+  onChange: x,
+  name: N,
+  id: C,
+  orientation: I = E.Column,
+  labelProps: r,
+  disabled: s,
+  error: l,
+  caption: d,
+  ariaLabel: g,
+  className: $,
+  optionsClassName: h,
+  radioClassName: j,
+  contentClassName: B
+}) => {
+  const R = T(), o = C ?? R, n = `${o}-label`, t = l ? `${o}-error` : void 0, c = !l && d ? `${o}-caption` : void 0, p = v(r?.label);
+  return /* @__PURE__ */ b("div", { className: i(S, $), children: [
+    r && /* @__PURE__ */ e(w, { ...r, id: n }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-labelledby": p ? n : void 0,
+        "aria-label": p ? void 0 : v(g),
+        "aria-describedby": [t, c].filter(Boolean).join(" ") || void 0,
+        "aria-disabled": s || void 0,
+        className: i(
+          O,
+          M[I],
+          h
+        ),
+        children: u.map((a) => {
+          const m = a.value === f;
+          return /* @__PURE__ */ b("div", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ e(
+              A,
+              {
+                id: `${o}-${a.value}`,
+                name: N ?? o,
+                value: a.value,
+                labelProps: a.label == null ? void 0 : { label: a.label },
+                "aria-label": a["aria-label"],
+                caption: a.caption,
+                isSelected: m,
+                disabled: s || a.disabled,
+                onChange: x,
+                className: j
+              }
+            ),
+            m && a.content ? /* @__PURE__ */ e(
+              "div",
+              {
+                className: i(
+                  L,
+                  B
+                ),
+                children: a.content
+              }
+            ) : null
+          ] }, a.value);
+        })
+      }
+    ),
+    /* @__PURE__ */ e(y, { id: t, text: l }),
+    !l && /* @__PURE__ */ e(G, { id: c, text: d })
+  ] });
+};
+export {
+  Q as RadioGroup
+};

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

@@ -0,0 +1,11 @@
+import { RadioGroupOrientation as o } from "../../../types/radio-group.js";
+const e = "flex flex-col gap-2", s = "flex", l = "mt-2 ml-[26px]", t = {
+  [o.Column]: "flex-col gap-y-3",
+  [o.Row]: "flex-row flex-wrap gap-x-4 gap-y-3"
+};
+export {
+  e as groupBaseClassName,
+  s as optionsWrapperBaseClassName,
+  t as orientationClassMap,
+  l as selectedContentClassName
+};

package/dist/components/New/RadioGroupPopupField/RadioGroupPopupField.js

@@ -0,0 +1,138 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { IconMaximize as oo } from "@tabler/icons-react";
+import { useId as eo, useState as j, useCallback as l } from "react";
+import { NeutralButton as ao, PrimaryButton as lo } from "../Button/ButtonWrappers.js";
+import { ErrorText as to, CaptionText as io } from "../CaptionText/CaptionText.js";
+import { Label as ro } from "../Label/Label.js";
+import { Popup as so } from "../Popup/Popup.js";
+import { RadioGroup as no } from "../RadioGroup/RadioGroup.js";
+import { DIAL_KIT_ICON_STROKE as co } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as po } from "../../../constants/icon.js";
+import { PopupSize as mo } from "../../../types/popup.js";
+import { RadioGroupOrientation as fo } from "../../../types/radio-group.js";
+import { mergeClasses as z } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as N } from "../../../utils/accessible-name.js";
+import { fieldPlaceholderClassName as uo, fieldValueClassName as No, fieldIconClassName as bo, fieldBaseClassName as Io, popupBodyClassName as Co, popupFooterClassName as xo, defaultCancelLabel as ho, defaultApplyLabel as vo } from "./constants.js";
+const Eo = ({
+  items: b,
+  value: t,
+  customValue: A,
+  header: I,
+  onApply: C,
+  id: E,
+  labelProps: p,
+  placeholder: F,
+  selectedValue: x,
+  onSelectionChange: h,
+  onCancel: v,
+  onClose: L,
+  isValid: G = !0,
+  applyButtonLabel: M = vo,
+  cancelButtonLabel: S = ho,
+  size: K = mo.Md,
+  portalId: w,
+  disabled: i,
+  invalid: U,
+  error: r,
+  caption: $,
+  ariaLabel: V,
+  className: Z,
+  fieldClassName: q
+}) => {
+  const H = eo(), e = E ?? H, k = `${e}-label`, y = `${e}-value`, D = r ? `${e}-error` : void 0, O = !r && $ ? `${e}-caption` : void 0, [T, g] = j(!1), a = x !== void 0, [J, B] = j(t), m = a ? x : J, Q = l(() => {
+    i || (a || B(t), g(!0));
+  }, [i, a, t]), s = l(() => {
+    g(!1), L?.();
+  }, [L]), P = l(() => {
+    v?.(), s();
+  }, [v, s]), W = l(() => {
+    C(m), s();
+  }, [C, m, s]), X = l(
+    (d) => {
+      a || B(d), h?.(d);
+    },
+    [a, h]
+  ), n = N(p?.label), f = n ? void 0 : N(V), u = n ? k : f && `${e}-name`, _ = N(I), Y = b.find((d) => d.value === t)?.label, R = A ?? Y;
+  return /* @__PURE__ */ c("div", { className: z("flex w-full flex-col gap-2", Z), children: [
+    p && /* @__PURE__ */ o(ro, { ...p, id: k, htmlFor: e }),
+    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+      f && /* @__PURE__ */ o("span", { id: u, className: "sr-only", children: f }),
+      /* @__PURE__ */ c(
+        "button",
+        {
+          type: "button",
+          id: e,
+          disabled: i,
+          "aria-haspopup": "dialog",
+          "aria-expanded": T,
+          "aria-labelledby": u ? `${u} ${y}` : void 0,
+          "aria-describedby": [D, O].filter(Boolean).join(" ") || void 0,
+          onClick: Q,
+          className: z(
+            Io,
+            U && "dial-kit-input-error",
+            i && "dial-kit-input-disable",
+            q
+          ),
+          children: [
+            /* @__PURE__ */ o(
+              "span",
+              {
+                id: y,
+                className: R == null ? uo : No,
+                children: R ?? F
+              }
+            ),
+            /* @__PURE__ */ o(
+              oo,
+              {
+                size: po.MD,
+                stroke: co,
+                "aria-hidden": "true",
+                className: bo
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ o(to, { id: D, text: r }),
+      !r && /* @__PURE__ */ o(io, { id: O, text: $ })
+    ] }),
+    /* @__PURE__ */ o(
+      so,
+      {
+        open: T,
+        header: I,
+        ariaLabel: _ ? void 0 : n,
+        portalId: w,
+        size: K,
+        onClose: P,
+        footer: /* @__PURE__ */ c("div", { className: xo, children: [
+          /* @__PURE__ */ o(ao, { label: S, onClick: P }),
+          /* @__PURE__ */ o(
+            lo,
+            {
+              label: M,
+              disabled: !G,
+              onClick: W
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ o("div", { className: Co, children: /* @__PURE__ */ o(
+          no,
+          {
+            id: `${e}-options`,
+            items: b,
+            value: m,
+            onChange: X,
+            orientation: fo.Column,
+            ariaLabel: n ?? _
+          }
+        ) })
+      }
+    )
+  ] });
+};
+export {
+  Eo as RadioGroupPopupField
+};

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

@@ -0,0 +1,11 @@
+const e = "dial-kit-input flex flex-row items-center justify-between gap-x-2 px-3 text-left", t = "min-w-0 flex-1 truncate text-primary", a = "min-w-0 flex-1 truncate text-secondary", l = "shrink-0 text-secondary", s = "px-6 pb-4", n = "flex justify-end gap-2 px-6 py-4 border-t border-tertiary", o = "Cancel", p = "Apply";
+export {
+  p as defaultApplyLabel,
+  o as defaultCancelLabel,
+  e as fieldBaseClassName,
+  l as fieldIconClassName,
+  a as fieldPlaceholderClassName,
+  t as fieldValueClassName,
+  s as popupBodyClassName,
+  n as popupFooterClassName
+};

package/dist/components/New/ResizableContainer/ConditionalResizableContainer.js

@@ -0,0 +1,6 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ResizableContainer as i } from "./ResizableContainer.js";
+const m = ({ enabled: o = !0, children: r, ...t }) => o ? /* @__PURE__ */ e(i, { ...t, children: r }) : r;
+export {
+  m as ConditionalResizableContainer
+};

package/dist/components/New/ResizableContainer/ResizableContainer.js

@@ -0,0 +1,106 @@
+import { jsx as c } from "react/jsx-runtime";
+import { Resizable as A } from "../../../node_modules/re-resizable/lib/index.js";
+import { useState as M, useRef as B, useCallback as d, useMemo as D } from "react";
+import { ResizableContainerSide as w } from "../../../types/resizable-container.js";
+import { mergeClasses as L } from "../../../utils/merge-classes.js";
+import { ResizeHandle as T } from "./components/ResizeHandle.js";
+const j = 16, q = ({
+  children: x,
+  minWidth: n,
+  maxWidth: s,
+  width: h,
+  defaultWidth: I,
+  onResizeStop: i,
+  onResize: l,
+  side: a = w.Right,
+  keyboardStep: u = j,
+  ariaLabel: g = "Resize panel",
+  className: _,
+  resizeHandlerClassName: p,
+  resizeHandler: z
+}) => {
+  const [m, C] = M(!1), [E, R] = M(I ?? n), r = h !== void 0, o = r ? h : E, f = B(null), b = d(() => {
+    C(!0);
+  }, []), v = d(() => {
+    C(!1);
+    const t = f.current?.resizable?.getBoundingClientRect(), e = t ? Math.round(t.width) : n;
+    r || R(e), i?.(e);
+  }, [i, r, n]), S = d(
+    (t) => {
+      const e = Math.min(s, Math.max(n, t));
+      e !== o && (r || (R(e), f.current?.updateSize({ width: e, height: "100%" })), l?.(e), i?.(e));
+    },
+    [s, n, o, r, l, i]
+  ), H = D(() => {
+    const t = a === w.Left, e = /* @__PURE__ */ c(
+      T,
+      {
+        side: a,
+        isResizing: m,
+        width: o,
+        minWidth: n,
+        maxWidth: s,
+        step: u,
+        ariaLabel: g,
+        onWidthChange: S,
+        customHandler: z,
+        handlerClassName: p
+      }
+    );
+    return {
+      size: r ? { width: o, height: "100%" } : void 0,
+      defaultSize: r ? void 0 : { width: o, height: "100%" },
+      minWidth: n,
+      maxWidth: s,
+      enable: {
+        left: t,
+        right: !t
+      },
+      handleClasses: {
+        right: "group",
+        left: "group"
+      },
+      handleStyles: {
+        right: { right: "-8px", zIndex: 10 },
+        left: { left: 0, zIndex: 10 }
+      },
+      handleComponent: {
+        left: t ? e : void 0,
+        right: t ? void 0 : e
+      },
+      onResizeStart: b,
+      onResize: (k, F, y) => {
+        l?.(Math.round(y.offsetWidth));
+      },
+      onResizeStop: v
+    };
+  }, [
+    a,
+    r,
+    o,
+    n,
+    s,
+    u,
+    g,
+    S,
+    z,
+    p,
+    m,
+    b,
+    v,
+    l
+  ]);
+  return /* @__PURE__ */ c(A, { ref: f, ...H, children: /* @__PURE__ */ c(
+    "div",
+    {
+      className: L(
+        "group flex size-full flex-col bg-layer-raised transition-all motion-reduce:transition-none",
+        _
+      ),
+      children: x
+    }
+  ) });
+};
+export {
+  q as ResizableContainer
+};

package/dist/components/New/ResizableContainer/components/ResizeHandle.js

@@ -0,0 +1,85 @@
+import { jsx as l } from "react/jsx-runtime";
+import { IconChevronLeft as y, IconChevronRight as h } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as I } from "../../constants/icon.js";
+import { DIAL_ICON_SIZE as d } from "../../../../constants/icon.js";
+import { ResizableContainerSide as C } from "../../../../types/resizable-container.js";
+import { mergeClasses as s } from "../../../../utils/merge-classes.js";
+const R = ({
+  side: c,
+  isResizing: f,
+  width: a,
+  minWidth: t,
+  maxWidth: i,
+  step: o,
+  ariaLabel: u,
+  onWidthChange: m,
+  customHandler: v,
+  handlerClassName: p
+}) => {
+  const r = c === C.Left, b = r ? y : h;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": u,
+      "aria-valuenow": a,
+      "aria-valuemin": t,
+      "aria-valuemax": i,
+      tabIndex: 0,
+      onKeyDown: (n) => {
+        let e;
+        switch (n.key) {
+          // A left-side handle is the panel's left edge, so moving it left grows
+          // the panel; a right-side handle works the other way round.
+          case "ArrowLeft":
+            e = a + (r ? o : -o);
+            break;
+          case "ArrowRight":
+            e = a + (r ? -o : o);
+            break;
+          case "Home":
+            e = t;
+            break;
+          case "End":
+            e = i;
+            break;
+          default:
+            return;
+        }
+        n.preventDefault(), m(e);
+      },
+      className: s(
+        "relative h-full w-0.5 cursor-col-resize bg-control-accent text-accent",
+        // Faded out rather than `invisible`: a `visibility: hidden` element
+        // cannot be focused, which would leave the handle keyboard-only in
+        // theory and unreachable in practice.
+        "opacity-0 transition-opacity motion-reduce:transition-none",
+        "group-hover:opacity-100 focus-visible:opacity-100",
+        "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus",
+        f && "opacity-100",
+        p
+      ),
+      children: v ?? // The chevron sits beside the line rather than on it — the line is 2px
+      // wide, so anything drawn inside it would be clipped to a sliver. It
+      // points away from the panel, and takes no pointer events of its own:
+      // the drag zone is the strip re-resizable puts around the line, and an
+      // icon hanging outside that strip must not look draggable.
+      /* @__PURE__ */ l(
+        b,
+        {
+          size: d.MD,
+          stroke: I,
+          "aria-hidden": "true",
+          className: s(
+            "pointer-events-none absolute top-1/2 -translate-y-1/2",
+            r ? "right-full" : "left-full"
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  R as ResizeHandle
+};

package/dist/components/New/Search/Search.js

@@ -0,0 +1,74 @@
+import { jsx as e } from "react/jsx-runtime";
+import { IconX as _, IconSearch as h } from "@tabler/icons-react";
+import { useRef as R, useCallback as k } from "react";
+import { useMergeRefs as E } from "@floating-ui/react";
+import { GhostIconButton as M } from "../IconButton/IconButtonWrappers.js";
+import { Input as N } from "../Input/Input.js";
+import { DIAL_KIT_ICON_STROKE as n } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as o } from "../../../constants/icon.js";
+import { ElementSize as r } from "../../../types/size.js";
+import { mergeClasses as A } from "../../../utils/merge-classes.js";
+const D = {
+  [r.Small]: o.SM,
+  [r.Standard]: o.MD,
+  [r.Large]: o.MD
+}, g = ({
+  size: s = r.Standard,
+  placeholder: c = "Search...",
+  withoutBorder: f = !1,
+  clearLabel: l = "Clear search",
+  disabled: a,
+  value: i,
+  onChange: t,
+  wrapperClassName: p,
+  inputRef: S,
+  ...u
+}) => {
+  const m = R(null), I = E([S, m]), d = !!i && !a, C = k(() => {
+    t?.(void 0), m.current?.focus();
+  }, [t]);
+  return /* @__PURE__ */ e(
+    N,
+    {
+      ...u,
+      size: s,
+      value: i,
+      disabled: a,
+      onChange: t,
+      placeholder: c,
+      inputRef: I,
+      wrapperClassName: A(
+        f && "dial-kit-input-borderless",
+        p
+      ),
+      iconBefore: /* @__PURE__ */ e(
+        h,
+        {
+          size: D[s],
+          stroke: n,
+          className: "text-secondary",
+          "aria-hidden": "true"
+        }
+      ),
+      iconAfter: d ? /* @__PURE__ */ e(
+        M,
+        {
+          size: r.Small,
+          "aria-label": l,
+          icon: /* @__PURE__ */ e(
+            _,
+            {
+              size: o.SM,
+              stroke: n,
+              "aria-hidden": "true"
+            }
+          ),
+          onClick: C
+        }
+      ) : void 0
+    }
+  );
+};
+export {
+  g as Search
+};