@epam/ai-dial-ui-kit 0.16.0-dev.6 → 0.16.0-dev.60

package/dist/components/ButtonDropdown/ButtonDropdown.js

@@ -1,33 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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/Checkbox/Checkbox.js

@@ -1,64 +0,0 @@
-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

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

package/dist/components/CollapsibleSidebar/CollapsibleSidebar.js

@@ -1,84 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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
-};

package/dist/components/DropdownIcon/DropdownIcon.js

@@ -1,103 +0,0 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { IconChevronDown as O } from "@tabler/icons-react";
-import { useState as j } from "react";
-import { DialDropdown as L } from "../Dropdown/Dropdown.js";
-import { DialIcon as m } from "../Icon/Icon.js";
-import { DIAL_ICON_SIZE as _ } from "../../constants/icon.js";
-import { DIAL_KIT_CLASS as p } from "../../constants/public-class-names.js";
-import { ElementSize as r } from "../../types/size.js";
-import { mergeClasses as o } from "../../utils/merge-classes.js";
-const F = ({
-  icon: f,
-  ariaLabel: b,
-  size: n = r.Standard,
-  disabled: a = !1,
-  className: u,
-  buttonClassName: x,
-  iconClassName: h,
-  caretIcon: y = /* @__PURE__ */ e(O, { size: _.SM }),
-  showCaret: t = !0,
-  placement: g = "bottom-start",
-  matchReferenceWidth: S = !1,
-  open: v,
-  onOpenChange: I,
-  defaultOpen: s = !1,
-  ...z
-}) => {
-  const i = n === r.Small, [C, D] = j(s), l = v ?? C, w = i ? "w-8 px-0" : "w-10 px-0", N = {
-    [r.Small]: "size-5",
-    [r.Standard]: "size-6",
-    [r.Large]: "size-7"
-  };
-  return /* @__PURE__ */ e(
-    L,
-    {
-      ...z,
-      disabled: a,
-      placement: g,
-      matchReferenceWidth: S,
-      className: u,
-      open: l,
-      onOpenChange: (c) => {
-        D(c), I?.(c);
-      },
-      defaultOpen: s,
-      children: /* @__PURE__ */ d(
-        "button",
-        {
-          type: "button",
-          "aria-label": b,
-          disabled: a,
-          className: o(
-            "group flex items-center justify-center rounded border border-transparent bg-layer-4 text-primary",
-            "enabled:hover:bg-accent-primary-alpha enabled:active:bg-controls-accent-primary-alpha-active",
-            "focus-visible:border-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:text-controls-secondary-disable disabled:opacity-75",
-            i ? "h-8 px-2" : "h-10 px-2",
-            t ? void 0 : w,
-            x
-          ),
-          children: [
-            /* @__PURE__ */ e(
-              m,
-              {
-                icon: f,
-                className: o(
-                  "flex items-center justify-center text-inherit",
-                  N[n],
-                  t && "-mr-2",
-                  h,
-                  p.dropdownIcon
-                )
-              }
-            ),
-            t && /* @__PURE__ */ d(
-              "div",
-              {
-                className: o(
-                  "relative z-10 inline-grid size-5 shrink-0 place-items-center",
-                  p.dropdownIconCaret
-                ),
-                children: [
-                  /* @__PURE__ */ e("div", { className: "absolute inset-0 rounded-full bg-layer-2" }),
-                  /* @__PURE__ */ e(
-                    m,
-                    {
-                      icon: y,
-                      className: o(
-                        "relative flex items-center justify-center text-secondary transition-transform group-hover:text-primary group-disabled:text-controls-secondary-disable",
-                        l && "rotate-180"
-                      )
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-export {
-  F as DialDropdownIcon
-};

package/dist/components/FileIcon/FileIcon.js

@@ -1,37 +0,0 @@
-import { jsxs as u, jsx as s } from "react/jsx-runtime";
-import N from "classnames";
-import { DialIcon as b } from "../Icon/Icon.js";
-import { fileIconFactories as a } from "./constants.js";
-import { BASE_ICON_PROPS as l } from "../../constants/icon.js";
-const j = ({
-  extension: o,
-  size: n = l.size,
-  stroke: c = l.stroke,
-  className: m,
-  decorative: f = !1,
-  label: r,
-  indicator: t
-}) => {
-  const i = (() => {
-    if (!o) return "";
-    const e = o.trim().toLowerCase();
-    return e.startsWith(".") ? e : `.${e}`;
-  })(), p = (a[i] ?? a.default)({
-    size: n,
-    stroke: c
-  }), d = typeof r == "string" ? r : `${i.slice(1).toUpperCase()} file icon`;
-  return /* @__PURE__ */ u(
-    "span",
-    {
-      className: N("inline-flex relative", m),
-      ...f ? { "aria-hidden": !0 } : { role: "img", "aria-label": d },
-      children: [
-        /* @__PURE__ */ s(b, { icon: p, className: "inline-block align-middle" }),
-        t && /* @__PURE__ */ s("span", { className: "absolute -bottom-0.5 -left-0.5", children: t })
-      ]
-    }
-  );
-};
-export {
-  j as DialFileIcon
-};

package/dist/components/FileIcon/constants.js

@@ -1,60 +0,0 @@
-import { jsx as c } from "react/jsx-runtime";
-import { IconFile as l, IconFileTypeZip as n, IconFileTypeXml as m, IconFileTypeXls as r, IconFileTypeVue as t, IconFileTypeTxt as I, IconFileTypeTsx as T, IconFileTypeTs as y, IconFileTypeSvg as F, IconFileTypeSql as g, IconFileTypeRs as f, IconFileTypePpt as v, IconFileTypePng as x, IconFileTypePhp as a, IconFileTypePdf as S, IconFileTypeJsx as d, IconFileTypeJs as z, IconFileTypeJpg as N, IconFileTypeHtml as P, IconFileTypeDocx as h, IconFileTypeDoc as C, IconFileTypeCsv as j, IconFileTypeCss as u, IconFileTypeBmp as b } from "@tabler/icons-react";
-import J from "../../assets/icons/file/cpp.svg.js";
-import k from "../../assets/icons/file/c.svg.js";
-import q from "../../assets/icons/file/cs.svg.js";
-import B from "../../assets/icons/file/ini.svg.js";
-import D from "../../assets/icons/file/json.svg.js";
-import O from "../../assets/icons/file/md.svg.js";
-import R from "../../assets/icons/file/py.svg.js";
-import { BASE_ICON_PROPS as s } from "../../constants/icon.js";
-const o = (e, i) => /* @__PURE__ */ c(
-  e,
-  {
-    size: i.size ?? s.size,
-    stroke: i.stroke ?? s.stroke,
-    className: i.className
-  }
-), p = (e, i) => /* @__PURE__ */ c(
-  e,
-  {
-    width: Number(i.size ?? s.size),
-    height: Number(i.size ?? s.size),
-    className: i.className
-  }
-), K = {
-  ".bmp": (e) => o(b, e),
-  ".cpp": (e) => p(J, e),
-  ".c": (e) => p(k, e),
-  ".cs": (e) => p(q, e),
-  ".css": (e) => o(u, e),
-  ".csv": (e) => o(j, e),
-  ".doc": (e) => o(C, e),
-  ".docx": (e) => o(h, e),
-  ".html": (e) => o(P, e),
-  ".ini": (e) => p(B, e),
-  ".jpg": (e) => o(N, e),
-  ".js": (e) => o(z, e),
-  ".json": (e) => p(D, e),
-  ".jsx": (e) => o(d, e),
-  ".md": (e) => p(O, e),
-  ".pdf": (e) => o(S, e),
-  ".php": (e) => o(a, e),
-  ".png": (e) => o(x, e),
-  ".ppt": (e) => o(v, e),
-  ".py": (e) => p(R, e),
-  ".rs": (e) => o(f, e),
-  ".sql": (e) => o(g, e),
-  ".svg": (e) => o(F, e),
-  ".ts": (e) => o(y, e),
-  ".tsx": (e) => o(T, e),
-  ".txt": (e) => o(I, e),
-  ".vue": (e) => o(t, e),
-  ".xls": (e) => o(r, e),
-  ".xml": (e) => o(m, e),
-  ".zip": (e) => o(n, e),
-  default: (e) => o(l, e)
-};
-export {
-  K as fileIconFactories
-};