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

package/dist/components/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,83 @@
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { DialEllipsisTooltip as y } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { mergeClasses as e } from "../../utils/merge-classes.js";
+import { breadcrumbItemWidthClassName as i, breadcrumbItemBaseClassName as D, breadcrumbLinkInteractiveClassName as j, breadcrumbLinkBaseClassName as f, breadcrumbCurrentClassName as k, defaultSeparator as S, breadcrumbSeparatorClassName as B } from "./constants.js";
+const A = ({
+  label: r,
+  href: m,
+  onClick: t,
+  disabled: s,
+  isLast: a,
+  isFirst: h,
+  separator: v = S,
+  className: x,
+  iconBefore: l,
+  labelClassName: o,
+  onBeforeNavigate: d,
+  ...u
+}) => {
+  const g = async (C) => {
+    if (d && !a && !await d()) {
+      C.preventDefault();
+      return;
+    }
+    t && t(C);
+  }, w = a ? i.last : h ? i.first : i.middle, I = e(
+    D,
+    w,
+    x
+  ), b = (!!m || !!t) && !a && !s, p = b ? e(
+    f,
+    j
+  ) : e(
+    f,
+    k,
+    s ? "pointer-events-none opacity-75" : ""
+  ), N = typeof r == "string" ? /* @__PURE__ */ n(
+    y,
+    {
+      className: e("cursor-pointer", o),
+      text: r,
+      id: "breadcrumb-item-content"
+    }
+  ) : /* @__PURE__ */ n(
+    "span",
+    {
+      className: e(
+        "flex-1 min-w-0 truncate cursor-pointer max-w-[300px]",
+        o
+      ),
+      "aria-label": "breadcrumb-item-content",
+      children: r
+    }
+  );
+  return /* @__PURE__ */ c(
+    "li",
+    {
+      ...u,
+      className: I,
+      "aria-label": u["aria-label"] || "breadcrumb-item",
+      children: [
+        b ? /* @__PURE__ */ c("a", { href: m, onClick: g, className: p, children: [
+          l,
+          N
+        ] }) : /* @__PURE__ */ c(
+          "span",
+          {
+            className: p,
+            "aria-current": a ? "page" : void 0,
+            "aria-disabled": s ? "true" : void 0,
+            children: [
+              l,
+              N
+            ]
+          }
+        ),
+        !a && /* @__PURE__ */ n("span", { className: B, "aria-label": "separator", children: v })
+      ]
+    }
+  );
+};
+export {
+  A as DialBreadcrumbItem
+};

package/dist/components/Breadcrumb/constants.js

@@ -0,0 +1,20 @@
+import { jsx as e } from "react/jsx-runtime";
+import { IconChevronRight as r } from "@tabler/icons-react";
+import { DIAL_ICON_SIZE as a } from "../../constants/icon.js";
+const m = "w-full overflow-hidden", i = "flex flex-nowrap items-center gap-2 min-w-0 px-0 py-0 whitespace-nowrap", o = "flex items-center gap-2 dial-small-text", c = {
+  first: "shrink-0",
+  middle: "shrink min-w-0 max-w-[30%]",
+  last: "shrink min-w-0 max-w-[51%]"
+}, l = "flex flex-1 items-center gap-1 min-w-0 transition-colors", d = "text-secondary hover:text-accent-primary", p = "text-primary cursor-default", x = "flex-none inline-flex items-center leading-none text-secondary", b = "items-center gap-1 min-w-0 transition-colors text-secondary hover:text-accent-primary", u = /* @__PURE__ */ e(r, { size: a.SM, "aria-hidden": "true" });
+export {
+  m as breadcrumbBaseClassName,
+  p as breadcrumbCurrentClassName,
+  b as breadcrumbEllipsisButtonClassName,
+  o as breadcrumbItemBaseClassName,
+  c as breadcrumbItemWidthClassName,
+  l as breadcrumbLinkBaseClassName,
+  d as breadcrumbLinkInteractiveClassName,
+  i as breadcrumbListClassName,
+  x as breadcrumbSeparatorClassName,
+  u as defaultSeparator
+};

package/dist/components/Button/Button.js

@@ -0,0 +1,53 @@
+import { jsxs as S, jsx as i } from "react/jsx-runtime";
+import g from "classnames";
+import { DialIcon as c } from "../Icon/Icon.js";
+import { ButtonAppearance as s } from "../../types/button.js";
+import { getButtonClassNames as C } from "./utils.js";
+import { mergeClasses as k } from "../../utils/merge-classes.js";
+import { ElementSize as o } from "../../types/size.js";
+import { DialTooltip as B } from "../Tooltip/Tooltip.js";
+const E = ({
+  label: t,
+  variant: e,
+  appearance: n = s.Solid,
+  size: l = o.Standard,
+  className: d,
+  textClassName: f,
+  iconAfter: u,
+  iconBefore: p,
+  hideTitleOnMobile: x,
+  type: b = "button",
+  tooltipProps: m,
+  ...a
+}) => {
+  const h = g(
+    x ? "hidden sm:inline" : "inline",
+    f
+  ), N = k(
+    e && C(e, n),
+    l === o.Small ? "dial-tiny-semi-text" : "dial-small-semi-text",
+    n !== s.Link && (l === o.Small ? "h-[24px] px-2" : "h-[40px] px-3"),
+    // A link-appearance button sits inline in text, where WCAG 2.5.5 exempts
+    // it and an expanded target would overlap the surrounding copy.
+    l !== o.Small && n !== s.Link && "dial-kit-enhanced-target",
+    "disabled:cursor-not-allowed focus-visible:outline focus-visible:outline-focus outline-offset-0",
+    d
+  ), r = /* @__PURE__ */ S(
+    "button",
+    {
+      ...a,
+      type: b,
+      className: N,
+      "aria-label": typeof t == "string" && t || a["aria-label"],
+      children: [
+        /* @__PURE__ */ i(c, { icon: p }),
+        t && /* @__PURE__ */ i("span", { className: h, children: t }),
+        /* @__PURE__ */ i(c, { icon: u })
+      ]
+    }
+  );
+  return m ? /* @__PURE__ */ i(B, { ...m, children: r }) : r;
+};
+export {
+  E as DialButton
+};

package/dist/components/Button/ButtonWrappers.js

@@ -0,0 +1,40 @@
+import { jsx as i } from "react/jsx-runtime";
+import { ButtonAppearance as t, ButtonVariant as r } from "../../types/button.js";
+import { DialButton as p } from "./Button.js";
+const u = (n, o) => ({ appearance: a, ...e }) => /* @__PURE__ */ i(
+  p,
+  {
+    ...e,
+    variant: n,
+    appearance: a || o
+  }
+), B = (n, o) => ({ variant: a, ...e }) => /* @__PURE__ */ i(
+  p,
+  {
+    ...e,
+    variant: a || o,
+    appearance: n
+  }
+), D = u(
+  r.Primary,
+  t.Solid
+), y = u(
+  r.Neutral,
+  t.Outlined
+), P = u(
+  r.Danger,
+  t.Outlined
+), W = B(
+  t.Link,
+  r.Primary
+), d = B(
+  t.Ghost,
+  r.Primary
+);
+export {
+  P as DialDangerButton,
+  d as DialGhostButton,
+  W as DialLinkButton,
+  y as DialNeutralButton,
+  D as DialPrimaryButton
+};

package/dist/components/Button/constants.js

@@ -0,0 +1,29 @@
+import { ButtonVariant as o, ButtonAppearance as t } from "../../types/button.js";
+const i = {
+  [o.Primary]: {
+    [t.Solid]: "dial-primary-solid-button",
+    [t.Ghost]: "dial-primary-ghost-button",
+    [t.Link]: "dial-primary-link-button"
+  },
+  [o.Neutral]: {
+    [t.Outlined]: "dial-neutral-outlined-button"
+  },
+  [o.Danger]: {
+    [t.Solid]: "dial-danger-solid-button",
+    [t.Ghost]: "dial-danger-ghost-button",
+    [t.Outlined]: "dial-danger-outlined-button"
+  },
+  [o.Success]: {
+    [t.Ghost]: "dial-success-ghost-button"
+  },
+  [o.Secondary]: {
+    [t.Ghost]: "dial-secondary-ghost-button"
+  },
+  [o.Tertiary]: {
+    [t.Ghost]: "dial-tertiary-ghost-button"
+  },
+  [o.Static]: {}
+};
+export {
+  i as variantClassMap
+};

package/dist/components/Button/utils.js

@@ -0,0 +1,11 @@
+import { ButtonVariant as o, ButtonAppearance as a } from "../../types/button.js";
+import { variantClassMap as i } from "./constants.js";
+const l = (t = o.Primary, r = a.Solid) => {
+  const n = i[t]?.[r];
+  return n || (console.warn(
+    `Could not find Button styles for variant: ${t} and appearance: ${r}. Using default primary solid button styles.`
+  ), i[o.Primary][a.Solid]);
+};
+export {
+  l as getButtonClassNames
+};

package/dist/components/ButtonDropdown/ButtonDropdown.js

@@ -0,0 +1,33 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useState as s, useMemo as u } from "react";
+import { DialButton as c } from "../Button/Button.js";
+import { DialDropdown as d } from "../Dropdown/Dropdown.js";
+import { ButtonAppearance as f, ButtonVariant as D } from "../../types/button.js";
+import { buttonChevronUp as l, buttonChevronDown as h } from "./constants.js";
+const x = ({
+  variant: n,
+  appearance: t,
+  items: e,
+  ...i
+}) => {
+  const [r, p] = s(!1), a = u(() => r ? l : h, [r]);
+  return /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+    d,
+    {
+      items: e,
+      onOpenChange: (m) => p(m),
+      children: /* @__PURE__ */ o(
+        c,
+        {
+          ...i,
+          iconAfter: a,
+          variant: n || D.Primary,
+          appearance: t || f.Solid
+        }
+      )
+    }
+  ) });
+};
+export {
+  x as DialButtonDropdown
+};

package/dist/components/ButtonDropdown/constants.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import { DIAL_ICON_SIZE as n } from "../../constants/icon.js";
+import { IconChevronUp as r, IconChevronDown as t } from "@tabler/icons-react";
+const i = /* @__PURE__ */ o(t, { size: n.SM }), s = /* @__PURE__ */ o(r, { size: n.SM });
+export {
+  i as buttonChevronDown,
+  s as buttonChevronUp
+};

package/dist/components/CaptionText/CaptionText.js

@@ -0,0 +1,27 @@
+import { jsx as e } from "react/jsx-runtime";
+import { mergeClasses as a } from "../../utils/merge-classes.js";
+import { CaptionType as t } from "../../types/caption.js";
+const s = ({
+  text: r,
+  className: o,
+  variant: i = t.Description,
+  ...n
+}) => r ? /* @__PURE__ */ e(
+  "span",
+  {
+    ...n,
+    role: "alert",
+    className: a(
+      "dial-tiny-text",
+      i === t.Error ? "text-error" : "text-secondary",
+      o
+    ),
+    children: r
+  }
+) : null, c = ({
+  ...r
+}) => /* @__PURE__ */ e(s, { ...r, variant: t.Error });
+export {
+  s as DialCaptionText,
+  c as DialErrorText
+};

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,64 @@
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { IconMinus as y, IconCheck as N } from "@tabler/icons-react";
+import m from "classnames";
+import { useCallback as C } from "react";
+import { BASE_ICON_PROPS as l } from "../../constants/icon.js";
+import { DialEllipsisTooltip as k } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { ariaDescription as g } from "./constants.js";
+const S = ({
+  label: r,
+  id: e,
+  checked: o,
+  indeterminate: i,
+  disabled: s,
+  ariaLabel: f,
+  onChange: t,
+  className: p,
+  ...a
+}) => {
+  const b = C(
+    (u) => {
+      t?.(u.target.checked, e);
+    },
+    [t, e]
+  ), x = m(
+    "flex flex-row items-center cursor-pointer text-accent-primary small-medium min-w-0",
+    `${o || i ? "" : 'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded'}`,
+    s ? "pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4" : "",
+    p
+  ), c = m(
+    "border rounded",
+    s ? "bg-layer-4 border-icon-secondary" : ""
+  ), d = () => i ? /* @__PURE__ */ n(y, { className: c, ...l }) : o ? /* @__PURE__ */ n(N, { className: c, ...l }) : null;
+  return /* @__PURE__ */ h(
+    "label",
+    {
+      ...a,
+      className: x,
+      htmlFor: e,
+      "aria-description": a["aria-description"] || g,
+      children: [
+        d(),
+        r && (typeof r == "string" ? /* @__PURE__ */ n(k, { text: r, className: "ml-2 text-primary" }) : r),
+        /* @__PURE__ */ n(
+          "input",
+          {
+            type: "checkbox",
+            role: "checkbox",
+            name: e,
+            onChange: b,
+            id: e,
+            checked: o,
+            "aria-checked": i ? "mixed" : o,
+            "aria-disabled": s || void 0,
+            "aria-label": r ? void 0 : f,
+            className: "invisible size-0"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  S as DialCheckbox
+};

package/dist/components/Checkbox/constants.js

@@ -0,0 +1,4 @@
+const c = "checkbox-container";
+export {
+  c as ariaDescription
+};

package/dist/components/CloseButton/CloseButton.js

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+import { IconX as s } from "@tabler/icons-react";
+import { mergeClasses as e } from "../../utils/merge-classes.js";
+import { DialGhostIconButton as l } from "../IconButton/IconButtonWrappers.js";
+const f = ({
+  ariaLabel: t,
+  className: r,
+  size: a = 24,
+  onClose: m,
+  ...i
+}) => /* @__PURE__ */ o(
+  l,
+  {
+    "aria-label": t,
+    className: e(
+      r,
+      "w-auto h-auto"
+      // Exception: DialCloseButton does not require a static size
+    ),
+    onClick: m,
+    icon: /* @__PURE__ */ o(s, { size: a }),
+    ...i
+  }
+);
+export {
+  f as DialCloseButton
+};

package/dist/components/CollapsibleSidebar/CollapsibleSidebar.js

@@ -0,0 +1,84 @@
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { useState as d, useMemo as z, useEffect as E } from "react";
+import { mergeClasses as s } from "../../utils/merge-classes.js";
+import { IconChevronsLeft as S, IconChevronsRight as W } from "@tabler/icons-react";
+import { DialIconButton as k } from "../IconButton/IconButton.js";
+import { ElementSize as L } from "../../types/size.js";
+const l = 48, V = ({
+  containerClassName: p,
+  children: b,
+  width: t = 280,
+  title: u,
+  iconSize: c = 24,
+  iconStroke: m = 1.5,
+  titleClassName: x,
+  additionalButtons: h,
+  isOpened: r,
+  onToggle: y
+}) => {
+  const [C, i] = d(t), [v, g] = d(!0), n = z(() => typeof r == "boolean", [r]), e = n ? r : v;
+  E(() => {
+    n && i(r ? t : l);
+  }, [n, r, t]);
+  const j = s([
+    "transform rotate-180 [writing-mode:tb-rl] py-4 px-3",
+    e && "hidden",
+    x
+  ]), I = s([
+    "flex flex-row gap-2 cursor-pointer text-secondary py-2 items-center",
+    e ? "justify-end px-4" : "justify-center"
+  ]), N = (D) => {
+    const a = !e;
+    if (n) {
+      i(a ? t : l), y?.(a, D);
+      return;
+    }
+    i(a ? t : l), g(a);
+  };
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: s([
+        "rounded flex flex-col justify-between",
+        p
+      ]),
+      style: { width: `${C}px` },
+      "aria-label": "collapsible-sidebar",
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: s([
+              "flex-1 p-4 min-h-0 overflow-auto",
+              !e && "hidden"
+            ]),
+            children: b
+          }
+        ),
+        /* @__PURE__ */ o("div", { className: j, children: u }),
+        /* @__PURE__ */ f(
+          "div",
+          {
+            className: s("border-t border-tertiary h-12", I),
+            children: [
+              e && h,
+              /* @__PURE__ */ o(
+                k,
+                {
+                  className: "hover:text-accent-primary",
+                  onClick: N,
+                  "aria-label": "sidebar-state",
+                  size: L.Small,
+                  icon: e ? /* @__PURE__ */ o(S, { size: c, stroke: m }) : /* @__PURE__ */ o(W, { size: c, stroke: m })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  V as DialCollapsibleSidebar
+};

package/dist/components/ConfirmationPopup/ConfirmationPopup.js

@@ -0,0 +1,75 @@
+import { jsxs as k, jsx as a } from "react/jsx-runtime";
+import s from "classnames";
+import { useCallback as j } from "react";
+import { DialButton as z } from "../Button/Button.js";
+import { DialPopup as S } from "../Popup/Popup.js";
+import { actionsBaseClassName as y, defaultCancelLabel as F, defaultConfirmLabel as I, variantConfig as t, descriptionBaseClassName as V } from "./constants.js";
+import { DialLoader as q } from "../Loader/Loader.js";
+import { ConfirmationPopupVariant as w } from "../../types/confirmation-popup.js";
+import { PopupSize as A } from "../../types/popup.js";
+import { DialNeutralButton as E } from "../Button/ButtonWrappers.js";
+const U = ({
+  header: p,
+  description: e,
+  descriptionClassName: m,
+  open: u = !1,
+  confirmLabel: c = I,
+  cancelLabel: C = F,
+  isLoading: r = !1,
+  disableConfirmButton: d = !1,
+  className: N,
+  confirmClassName: b,
+  onClose: i,
+  onConfirm: v,
+  onCancel: n,
+  children: o,
+  dividers: x = !1,
+  variant: l = w.Info,
+  size: D = A.Sm,
+  footer: f,
+  hideClose: h
+}) => {
+  const B = r ? null : /* @__PURE__ */ k("div", { className: y, children: [
+    /* @__PURE__ */ a(
+      E,
+      {
+        label: C,
+        onClick: () => n ? n() : i?.()
+      }
+    ),
+    /* @__PURE__ */ a(
+      z,
+      {
+        variant: t[l].confirm?.variant,
+        appearance: t[l].confirm?.appearance,
+        className: b,
+        label: c,
+        disabled: d,
+        onClick: () => v()
+      }
+    )
+  ] }), P = j(() => r ? /* @__PURE__ */ a("div", { className: "px-6 py-4 h-[120px]", children: /* @__PURE__ */ a(q, { size: 40 }) }) : o ?? (e ? /* @__PURE__ */ a(
+    "div",
+    {
+      className: s(V, m),
+      children: e
+    }
+  ) : null), [o, e, r, m]);
+  return /* @__PURE__ */ a(
+    S,
+    {
+      open: u,
+      header: p,
+      className: s(t[l].container, N),
+      dividers: x,
+      onClose: () => i?.(),
+      footer: f ?? B,
+      size: D,
+      hideClose: h ?? (!r && f === void 0),
+      children: P()
+    }
+  );
+};
+export {
+  U as DialConfirmationPopup
+};

package/dist/components/ConfirmationPopup/constants.js

@@ -0,0 +1,32 @@
+import { ButtonAppearance as a, ButtonVariant as n } from "../../types/button.js";
+import { ConfirmationPopupVariant as e } from "../../types/confirmation-popup.js";
+const o = "flex justify-end gap-2 px-6 py-4 border-t border-tertiary", i = "text-secondary dial-small-text px-6 pb-4", p = "Cancel", c = "Ok", l = {
+  [e.Info]: {
+    confirm: {
+      variant: n.Primary,
+      appearance: a.Solid
+    },
+    cancel: {
+      variant: n.Neutral,
+      appearance: a.Outlined
+    }
+  },
+  [e.Danger]: {
+    container: "dial-danger-popup",
+    confirm: {
+      variant: n.Danger,
+      appearance: a.Solid
+    },
+    cancel: {
+      variant: n.Neutral,
+      appearance: a.Outlined
+    }
+  }
+};
+export {
+  o as actionsBaseClassName,
+  p as defaultCancelLabel,
+  c as defaultConfirmLabel,
+  i as descriptionBaseClassName,
+  l as variantConfig
+};

package/dist/components/DraggableItem/DraggableItem.js

@@ -0,0 +1,61 @@
+import { jsxs as y, jsx as c } from "react/jsx-runtime";
+import { IconGripVertical as I } from "@tabler/icons-react";
+import { useRef as f } from "react";
+import { handleBaseClassName as N, containerBaseClassName as R, DRAG_TYPE as l } from "./constants.js";
+import { mergeClasses as h } from "../../utils/merge-classes.js";
+import { BASE_ICON_PROPS as C } from "../../constants/icon.js";
+import { useDrag as b } from "../../node_modules/react-dnd/dist/hooks/useDrag/useDrag.js";
+import { useDrop as B } from "../../node_modules/react-dnd/dist/hooks/useDrop/useDrop.js";
+const T = ({
+  id: e,
+  children: p,
+  className: g,
+  onFind: i,
+  onMove: t,
+  ariaLabel: m = "Drag item"
+}) => {
+  const o = f(null), s = f(null), n = typeof i == "function" ? i(e) : -1, [{ isDragging: d }, u, D] = b(
+    () => ({
+      type: l,
+      item: { id: e, originalIndex: n },
+      collect: (r) => {
+        const a = r.getItem();
+        return {
+          isDragging: r.isDragging() && a?.id === e
+        };
+      },
+      end: (r, a) => {
+        if (!r) return;
+        !a.didDrop() && typeof t == "function" && r.originalIndex > -1 && t(r.id, r.originalIndex);
+      }
+    }),
+    [e, n, t]
+  ), [, x] = B(
+    () => ({
+      accept: l,
+      hover: (r) => {
+        if (!(!r || r.id === e) && typeof i == "function" && typeof t == "function") {
+          const a = i(e);
+          t(r.id, a);
+        }
+      }
+    }),
+    [i, t, e]
+  );
+  return D(x(s)), u(o), /* @__PURE__ */ y(
+    "div",
+    {
+      ref: s,
+      className: h(R, g),
+      style: { opacity: d ? 0 : 1 },
+      "aria-roledescription": "Draggable item",
+      children: [
+        /* @__PURE__ */ c("div", { ref: o, className: N, "aria-label": m, children: /* @__PURE__ */ c(I, { ...C }) }),
+        p
+      ]
+    }
+  );
+};
+export {
+  T as DialDraggableItem
+};

package/dist/components/DraggableItem/constants.js

@@ -0,0 +1,6 @@
+const e = "column", s = "flex items-center", a = "mr-3 cursor-move text-secondary";
+export {
+  e as DRAG_TYPE,
+  s as containerBaseClassName,
+  a as handleBaseClassName
+};