triafly-ui-kit 1.0.23 → 1.0.25

package/dist/components/Ui/Icons/index.js

@@ -0,0 +1,97 @@
+import { IconArrowBendUpRight as c, IconArrowClockwise as I, IconArrowDown as e, IconArrowLeft as r, IconArrowLineDown as i, IconArrowLineLeft as t, IconArrowLineRight as a, IconArrowLineUp as l, IconArrowRight as s, IconArrowUp as C, IconArrowsOut as w, IconArticle as h, IconAt as p, IconBellSimple as g, IconBookOpenText as u, IconCalendarBlank as S, IconCaretDown as A, IconCaretLeft as D, IconCaretRight as L, IconCaretUp as d, IconCaretUpDown as k, IconChartPieSlice as U, IconChatText as P, IconCheck as F, IconCheckCircle as T, IconChecks as f, IconCircleNotch as y, IconCopy as B, IconCornersOut as R, IconCsv as X, IconCube as m, IconDatabase as x, IconDotsNine as M, IconDotsThreeVertical as v, IconExport as H, IconEye as N, IconEyeSlash as O, IconFile as Q, IconFiles as E, IconFloppyDisk as G, IconFolderSimple as b, IconFolderSimpleX as W, IconFunnel as z, IconGauge as J, IconGear as V, IconGoogleDrive as Y, IconHand as j, IconHeadCircuit as q, IconHouse as K, IconIcon as Z, IconInfo as _, IconJoin as $, IconLanguage as oo, IconLink as no, IconList as co, IconLock as Io, IconLockOpen as eo, IconMariaDB as ro, IconMinus as io, IconMongoDB as to, IconMoon as ao, IconMySQL as lo, IconNavigationArrow as so, IconNotePencil as Co, IconPassword as wo, IconPen as ho, IconPlay as po, IconPlugsX as go, IconPlus as uo, IconPorsgteSQL as So, IconPresentationChart as Ao, IconQuestion as Do, IconQuestionFullfilled as Lo, IconRedo as ko, IconRoleX as Uo, IconSearch as Po, IconSearchX as Fo, IconSelection as To, IconServer as fo, IconSlidersHorizontal as yo, IconSticker as Bo, IconSun as Ro, IconThreeDot as Xo, IconTrash as mo, IconTriangleDown as xo, IconTriangleUp as Mo, IconUndo as vo, IconUploadSimple as Ho, IconUser as No, IconUserX as Oo, IconWarningCircle as Qo, IconWrench as Eo, IconX as Go, IconYandexDisk as bo } from "./Icons.js";
+export {
+  c as IconArrowBendUpRight,
+  I as IconArrowClockwise,
+  e as IconArrowDown,
+  r as IconArrowLeft,
+  i as IconArrowLineDown,
+  t as IconArrowLineLeft,
+  a as IconArrowLineRight,
+  l as IconArrowLineUp,
+  s as IconArrowRight,
+  C as IconArrowUp,
+  w as IconArrowsOut,
+  h as IconArticle,
+  p as IconAt,
+  g as IconBellSimple,
+  u as IconBookOpenText,
+  S as IconCalendarBlank,
+  A as IconCaretDown,
+  D as IconCaretLeft,
+  L as IconCaretRight,
+  d as IconCaretUp,
+  k as IconCaretUpDown,
+  U as IconChartPieSlice,
+  P as IconChatText,
+  F as IconCheck,
+  T as IconCheckCircle,
+  f as IconChecks,
+  y as IconCircleNotch,
+  B as IconCopy,
+  R as IconCornersOut,
+  X as IconCsv,
+  m as IconCube,
+  x as IconDatabase,
+  M as IconDotsNine,
+  v as IconDotsThreeVertical,
+  H as IconExport,
+  N as IconEye,
+  O as IconEyeSlash,
+  Q as IconFile,
+  E as IconFiles,
+  G as IconFloppyDisk,
+  b as IconFolderSimple,
+  W as IconFolderSimpleX,
+  z as IconFunnel,
+  J as IconGauge,
+  V as IconGear,
+  Y as IconGoogleDrive,
+  j as IconHand,
+  q as IconHeadCircuit,
+  K as IconHouse,
+  Z as IconIcon,
+  _ as IconInfo,
+  $ as IconJoin,
+  oo as IconLanguage,
+  no as IconLink,
+  co as IconList,
+  Io as IconLock,
+  eo as IconLockOpen,
+  ro as IconMariaDB,
+  io as IconMinus,
+  to as IconMongoDB,
+  ao as IconMoon,
+  lo as IconMySQL,
+  so as IconNavigationArrow,
+  Co as IconNotePencil,
+  wo as IconPassword,
+  ho as IconPen,
+  po as IconPlay,
+  go as IconPlugsX,
+  uo as IconPlus,
+  So as IconPorsgteSQL,
+  Ao as IconPresentationChart,
+  Do as IconQuestion,
+  Lo as IconQuestionFullfilled,
+  ko as IconRedo,
+  Uo as IconRoleX,
+  Po as IconSearch,
+  Fo as IconSearchX,
+  To as IconSelection,
+  fo as IconServer,
+  yo as IconSlidersHorizontal,
+  Bo as IconSticker,
+  Ro as IconSun,
+  Xo as IconThreeDot,
+  mo as IconTrash,
+  xo as IconTriangleDown,
+  Mo as IconTriangleUp,
+  vo as IconUndo,
+  Ho as IconUploadSimple,
+  No as IconUser,
+  Oo as IconUserX,
+  Qo as IconWarningCircle,
+  Eo as IconWrench,
+  Go as IconX,
+  bo as IconYandexDisk
+};

package/dist/components/Ui/Icons/utils/CreateIcon.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+const g = ({
+  displayName: r,
+  path: o,
+  viewBox: i = "0 0 24 24"
+}) => {
+  const n = ({ size: t = 20, color: l = "currentColor", className: c = "", viewBox: s }) => /* @__PURE__ */ e(
+    "svg",
+    {
+      width: t,
+      height: t,
+      viewBox: s || i,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: c,
+      children: typeof o == "string" ? /* @__PURE__ */ e("path", { d: o, fill: l }) : o
+    }
+  );
+  return n.displayName = r, n;
+};
+export {
+  g as createIcon
+};

package/dist/components/Ui/Loader/Loader.js

@@ -0,0 +1,7 @@
+import { jsx as c } from "react/jsx-runtime";
+import { IconCircleNotch as e } from "../Icons/Icons.js";
+import '../../../assets/src/components/Ui/Loader/Loader.css';/* empty css                                            */
+const s = ({ size: o, color: r, viewBox: m, className: t }) => /* @__PURE__ */ c(e, { size: o, color: r, viewBox: m, className: `loader ${t}` });
+export {
+  s as Loader
+};

package/dist/components/Ui/Loader/index.js

@@ -0,0 +1,4 @@
+import { Loader as e } from "./Loader.js";
+export {
+  e as Loader
+};

package/dist/components/Ui/ModalWindow/ModalWindow.js

@@ -0,0 +1,51 @@
+import { jsx as s, Fragment as h, jsxs as m } from "react/jsx-runtime";
+import { createElement as f } from "react";
+import { createPortal as u } from "react-dom";
+import '../../../assets/src/components/Ui/ModalWindow/ModalWindow.css';/* empty css                                                      */
+import { Button as v } from "../Button/Button.js";
+import { IconX as N } from "../Icons/Icons.js";
+const x = ({
+  isOpen: l,
+  onClose: i,
+  width: a,
+  size: r = "md",
+  iconHeader: o,
+  title: t,
+  children: d,
+  usePortal: e = !1,
+  foolHeight: c,
+  position: p = "center"
+}) => {
+  if (!l) return null;
+  const w = (o == null ? void 0 : o.size) ?? 20, n = /* @__PURE__ */ s(h, { children: /* @__PURE__ */ s("div", { className: `modal-window overlay position-${p}`, onClick: () => i(!1), children: /* @__PURE__ */ m(
+    "div",
+    {
+      className: `modal-window__body size-${r} ${c ? "foolHeight" : ""}`,
+      onClick: (_) => _.stopPropagation(),
+      style: {
+        width: `${a}`,
+        pointerEvents: "auto"
+      },
+      children: [
+        /* @__PURE__ */ m("div", { className: "modal-window__header", children: [
+          (o == null ? void 0 : o.view) && /* @__PURE__ */ s("div", { className: `modal-window__header__icon status-${o.status}`, children: f(o.icon, { size: w }) }),
+          t != null && t.toString() ? /* @__PURE__ */ s("span", { className: "modal-window__header__title", children: t }) : t,
+          /* @__PURE__ */ s(
+            v,
+            {
+              type: "button",
+              icon: /* @__PURE__ */ s(N, { size: 24 }),
+              className: "icon-button",
+              onClick: () => i(!1)
+            }
+          )
+        ] }),
+        d
+      ]
+    }
+  ) }) });
+  return e ? u(n, document.body) : n;
+};
+export {
+  x as ModalWindow
+};

package/dist/components/Ui/ModalWindow/index.js

@@ -0,0 +1,4 @@
+import { ModalWindow as r } from "./ModalWindow.js";
+export {
+  r as ModalWindow
+};

package/dist/components/Ui/Pagination/Pagination.js

@@ -0,0 +1,39 @@
+import { jsx as a } from "react/jsx-runtime";
+import p from "../../../_virtual/react-paginate.js";
+import '../../../assets/src/components/Ui/Pagination/Pagination.css';/* empty css                                                    */
+import { IconCaretRight as r, IconCaretLeft as t } from "../Icons/Icons.js";
+const c = ({
+  currentPage: i,
+  totalPages: e,
+  onPageChange: n
+}) => {
+  const s = (g) => {
+    n(g.selected + 1);
+  };
+  return /* @__PURE__ */ a("div", { className: "Pagination__Wrap", children: /* @__PURE__ */ a(
+    p,
+    {
+      previousLabel: /* @__PURE__ */ a(t, {}),
+      nextLabel: /* @__PURE__ */ a(r, {}),
+      breakLabel: "...",
+      pageCount: e,
+      marginPagesDisplayed: e > 7 ? 1 : 0,
+      pageRangeDisplayed: e > 7 ? 5 : e,
+      onPageChange: s,
+      containerClassName: "pagination",
+      pageClassName: "page-item",
+      pageLinkClassName: "page-link",
+      previousClassName: "page-item page-toggler",
+      previousLinkClassName: "page-link",
+      nextClassName: "page-item page-toggler",
+      nextLinkClassName: "page-link",
+      breakClassName: "page-item",
+      breakLinkClassName: "page-link",
+      activeClassName: "active",
+      forcePage: i - 1
+    }
+  ) });
+};
+export {
+  c as Pagination
+};

package/dist/components/Ui/Pagination/index.js

@@ -0,0 +1,4 @@
+import { Pagination as i } from "./Pagination.js";
+export {
+  i as Pagination
+};

package/dist/components/Ui/Radio/Radio.js

@@ -0,0 +1,31 @@
+import { jsx as a, jsxs as r } from "react/jsx-runtime";
+import '../../../assets/src/components/Ui/Radio/Radio.css';/* empty css                                          */
+const m = ({
+  label: s,
+  value: l,
+  name: d = "Radio",
+  isDisabled: e = !1,
+  isChecked: i,
+  radioId: c,
+  onChange: o
+}) => /* @__PURE__ */ a("div", { className: `radio ${e ? "disabled" : ""}`, children: /* @__PURE__ */ r("label", { className: "radio-label", children: [
+  /* @__PURE__ */ a(
+    "input",
+    {
+      className: "",
+      id: c,
+      type: "radio",
+      name: d,
+      value: l,
+      disabled: e,
+      checked: i,
+      onChange: o
+    }
+  ),
+  /* @__PURE__ */ a("span", { className: "checkmark" }),
+  /* @__PURE__ */ a("span", { className: "label", children: s })
+] }) });
+m.displayName = "Radio";
+export {
+  m as Radio
+};

package/dist/components/Ui/Radio/Radio.stories.js

@@ -0,0 +1,42 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Radio as a } from "./Radio.js";
+const d = {
+  title: "UIKit/Radio",
+  component: a
+}, e = {
+  render: (o) => /* @__PURE__ */ i(a, { ...o })
+}, l = {
+  ...e,
+  args: {
+    label: "Опция 1",
+    name: "options",
+    value: "3",
+    isChecked: !1,
+    radioId: "id1"
+  }
+}, r = {
+  ...e,
+  args: {
+    label: "Опция 2",
+    name: "options",
+    value: "1",
+    isChecked: !1,
+    isDisabled: !0,
+    radioId: "id2"
+  }
+}, n = {
+  ...e,
+  args: {
+    label: "Опция 3",
+    name: "options",
+    value: "2",
+    isChecked: !0,
+    radioId: "id3"
+  }
+};
+export {
+  n as Checked,
+  l as Default,
+  r as Disabled,
+  d as default
+};

package/dist/components/Ui/Radio/index.js

@@ -0,0 +1,4 @@
+import { Radio as a } from "./Radio.js";
+export {
+  a as Radio
+};

package/dist/components/Ui/SearchInput/SearchData.js

@@ -0,0 +1,30 @@
+const e = [
+  "Apple",
+  "Banana",
+  "Cherry",
+  "Date",
+  "Elderberry",
+  "Fig",
+  "Grape",
+  "Honeydew",
+  "Kiwi",
+  "Lemon",
+  "Mango",
+  "Nectarine",
+  "Orange",
+  "Peach",
+  "Quince",
+  "Raspberry",
+  "Strawberry",
+  "Tangerine",
+  "Watermelon",
+  "Blueberry",
+  "Blackberry",
+  "Pineapple",
+  "Papaya",
+  "Apricot",
+  "Plum"
+];
+export {
+  e as demoSearchData
+};

package/dist/components/Ui/SearchInput/SearchInput.js

@@ -0,0 +1,110 @@
+import { jsxs as I, Fragment as T, jsx as l } from "react/jsx-runtime";
+import { useState as o, useRef as H, useEffect as w } from "react";
+import { TextInput as U } from "../TextInput/TextInput.js";
+import '../../../assets/src/components/Ui/SearchInput/SearchInput.css';/* empty css                                                      */
+import { IconCaretUpDown as q } from "../Icons/Icons.js";
+const z = ({
+  name: k = "SearchInput",
+  label: x,
+  placeholder: y = "",
+  type: N = "text",
+  id: $,
+  isDisabled: h = !1,
+  errorMessage: F = "",
+  hasError: V = !1,
+  className: D = "",
+  isClearable: E,
+  isLoading: L,
+  value: r = "",
+  onChange: s,
+  options: n = []
+}) => {
+  const [m, v] = o(r), [j, i] = o(""), [u, p] = o([]), [d, c] = o(!1), [g, A] = o(!1), [B, C] = o(!1), f = H(null);
+  w(() => {
+    if (r) {
+      const e = n.find((t) => t.value === r);
+      i(e ? e.label : r);
+    } else
+      i("");
+  }, [r, n]), w(() => {
+    if (m.trim() === "" && g) {
+      p(n);
+      return;
+    }
+    const e = n.filter(
+      (t) => t.label.toLowerCase().includes(m.toLowerCase())
+    );
+    p(e);
+  }, [m, n, g]), w(() => {
+    const e = (t) => {
+      f.current && !f.current.contains(t.target) && c(!1);
+    };
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, []);
+  const K = (e) => {
+    const t = e.target.value;
+    v(t), i(t), s == null || s(t), c(!0);
+  }, b = (e) => {
+    v(e.value), i(e.label), s == null || s(e.value), c(!1);
+  }, O = () => {
+    A(!0), c(!0), p(n);
+  }, P = (e) => {
+    e.key === "Enter" && u.length > 0 && d && b(u[0]);
+  }, S = (e) => {
+    var t;
+    if (e.stopPropagation(), !d) {
+      const a = (t = f.current) == null ? void 0 : t.getBoundingClientRect(), R = window.innerHeight - ((a == null ? void 0 : a.bottom) || 0);
+      C(R < 304);
+    }
+    c((a) => !a);
+  };
+  return /* @__PURE__ */ I(T, { children: [
+    /* @__PURE__ */ l(
+      U,
+      {
+        name: k,
+        label: x,
+        type: N,
+        className: `${D}`,
+        value: j,
+        onChange: K,
+        placeholder: y,
+        id: $,
+        isDisabled: h,
+        isClearable: E,
+        hasError: V,
+        errorMessage: F,
+        isLoading: L,
+        onFocus: O,
+        onKeyDown: P
+      }
+    ),
+    /* @__PURE__ */ I("div", { className: "dropdown-input-test", children: [
+      /* @__PURE__ */ l("div", { className: "caret", onClick: S, children: /* @__PURE__ */ l(q, {}) }),
+      d && g && u.length > 0 && /* @__PURE__ */ l(
+        "div",
+        {
+          className: `input-box
+        ${d ? "opened" : ""} 
+        ${h ? "disabled" : ""}`,
+          ref: f,
+          onClick: S,
+          children: /* @__PURE__ */ l("ul", { className: `options ${B ? "above" : ""}`, children: u.map((e, t) => /* @__PURE__ */ l(
+            "li",
+            {
+              onClick: () => b(e),
+              children: e.label
+            },
+            `${e.value}-${t}`
+          )) })
+        }
+      )
+    ] })
+  ] });
+};
+z.displayName = "SearchInput";
+export {
+  z as SearchInput
+};

package/dist/components/Ui/Skeleton/Skeleton.js

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import p from "../../../_virtual/index.js";
+import e from "../../../src/components/Ui/Skeleton/Skeleton.module.scss.js";
+const c = ({
+  width: s = "100%",
+  height: o = "100%",
+  borderRadius: t = "4px",
+  circle: r = !1,
+  animated: m = !0,
+  className: a,
+  style: l
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: p(e.skeleton, { [e.animated]: m }, a),
+    style: {
+      width: s,
+      height: o,
+      borderRadius: r ? "50%" : t,
+      ...l
+    }
+  }
+);
+export {
+  c as Skeleton
+};

package/dist/components/Ui/Skeleton/index.js

@@ -0,0 +1,4 @@
+import { Skeleton as r } from "./Skeleton.js";
+export {
+  r as Skeleton
+};

package/dist/components/Ui/Switch/Switch.js

@@ -0,0 +1,26 @@
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import '../../../assets/src/components/Ui/Switch/Switch.css';/* empty css                                            */
+const d = ({
+  label: s,
+  isDisabled: e,
+  isChecked: i = !1,
+  onChange: a,
+  name: t = "Switch"
+}) => /* @__PURE__ */ c("div", { className: "switch-container", children: /* @__PURE__ */ l("label", { className: `switch ${e ? "disabled" : ""}`, children: [
+  /* @__PURE__ */ c(
+    "input",
+    {
+      name: t,
+      type: "checkbox",
+      checked: i,
+      onChange: a,
+      disabled: e
+    }
+  ),
+  s,
+  /* @__PURE__ */ c("span", { className: "slider" })
+] }) });
+d.displayName = "Switch";
+export {
+  d as Switch
+};

package/dist/components/Ui/Switch/index.js

@@ -0,0 +1,4 @@
+import { Switch as t } from "./Switch.js";
+export {
+  t as Switch
+};

package/dist/components/Ui/Table/MemoizedRow/MemoizedRow.js

@@ -0,0 +1,50 @@
+import { jsx as p } from "react/jsx-runtime";
+import c from "react";
+import m from "../../../../_virtual/index2.js";
+import d from "../../../../_virtual/index.js";
+const h = c.memo(
+  ({
+    record: t,
+    columns: _,
+    rowKey: a,
+    rowClassName: n,
+    index: l,
+    stickyLeft: r,
+    onClickTr: b,
+    bordered: i
+  }) => {
+    const s = (e) => {
+      !e.target.closest("[data-no-bubble]") && b && b(t);
+    };
+    return /* @__PURE__ */ p(
+      "tr",
+      {
+        className: d(
+          "table-component__wrapper__table__tbody__tr",
+          n == null ? void 0 : n(t, l),
+          {
+            "table-component__wrapper__table__tbody__tr--hoverable": !!b
+          }
+        ),
+        onClick: s,
+        children: _.map((e, o) => /* @__PURE__ */ p(
+          "td",
+          {
+            className: d("table-component__wrapper__table__tbody__td", e.className, {
+              "table-component__wrapper__table__tbody__td--bordered": i,
+              "table-component__wrapper__table__tbody__td--sticky-left": r && o === 0
+            }),
+            align: e.align,
+            children: e.render ? e.render(t[e.dataIndex], t) : String(t[e.dataIndex] ?? "")
+          },
+          `${e.key}-${o}`
+        ))
+      },
+      typeof a == "function" ? a(t) : String(t[a])
+    );
+  },
+  (t, _) => m(t.columns, _.columns) && m(t.record, _.record)
+);
+export {
+  h as MemoizedRow
+};