triafly-ui-kit 1.0.23 → 1.0.25

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

@@ -0,0 +1,161 @@
+import { jsx as t, jsxs as _ } from "react/jsx-runtime";
+import U, { useState as N, useEffect as q, useCallback as d } from "react";
+import o from "../../../_virtual/index.js";
+import '../../../assets/src/components/Ui/Table/Table.css';/* empty css                                          */
+import { IconCaretDown as w, IconCaretUp as F } from "../Icons/Icons.js";
+import { MemoizedRow as G } from "./MemoizedRow/MemoizedRow.js";
+import { Loader as H } from "../Loader/Loader.js";
+const y = {
+  asc: /* @__PURE__ */ t(w, { viewBox: "0 -6 24 24", "aria-hidden": "true" }),
+  desc: /* @__PURE__ */ t(F, { viewBox: "0 -4 24 24", "aria-hidden": "true" }),
+  default: /* @__PURE__ */ t(w, { viewBox: "0 -6 24 24", "aria-hidden": "true" })
+};
+function J({
+  columns: f,
+  dataSource: c,
+  rowKey: i,
+  tableClassName: v,
+  theadClassName: k,
+  trTheadClassNames: x,
+  thTheadClassNames: D,
+  tbodyClassName: I,
+  wrapperClassName: A,
+  borderBottom: u = !1,
+  stickyHeader: C = !1,
+  stickyLeft: h = !1,
+  bordered: l = !1,
+  rowClassName: j,
+  defaultSort: B,
+  onClickTr: m,
+  onClickTrHeader: R,
+  loading: S = !1
+}) {
+  const [T, b] = N(c), [n, z] = N(
+    B || null
+  );
+  q(() => {
+    b(c);
+  }, [c]);
+  const $ = d(
+    (e) => typeof i == "function" ? i(e) : typeof i == "string" && i in e ? String(e[i]) : "unknown",
+    [i]
+  ), g = d((e, a) => {
+    b((p) => [...p].sort((L, M) => {
+      const s = L[e], r = M[e];
+      return typeof s == "string" && typeof r == "string" ? a === "asc" ? s.localeCompare(r) : r.localeCompare(s) : typeof s == "number" && typeof r == "number" ? a === "asc" ? s - r : r - s : s instanceof Date && r instanceof Date ? a === "asc" ? s.getTime() - r.getTime() : r.getTime() - s.getTime() : 0;
+    })), z({ key: e, order: a });
+  }, []), E = d(
+    (e) => {
+      const p = (n == null ? void 0 : n.key) === e && n.order === "asc" ? "desc" : "asc";
+      g(e, p);
+    },
+    [n, g]
+  );
+  return /* @__PURE__ */ t("div", { className: o("table-component", A), children: /* @__PURE__ */ t(
+    "div",
+    {
+      className: o(
+        "table-component__wrapper",
+        {
+          bordered: l,
+          borderBottom: u
+        },
+        v
+      ),
+      children: /* @__PURE__ */ _(
+        "table",
+        {
+          className: o("table-component__wrapper__table", {
+            bordered: l,
+            borderBottom: u
+          }),
+          children: [
+            /* @__PURE__ */ t(
+              "thead",
+              {
+                className: o(
+                  "table-component__wrapper__table__thead",
+                  {
+                    stickyHeader: C
+                  },
+                  k
+                ),
+                children: /* @__PURE__ */ t(
+                  "tr",
+                  {
+                    className: o(
+                      "table-component__wrapper__table__thead__tr",
+                      x
+                    ),
+                    onClick: R,
+                    children: f.map((e, a) => /* @__PURE__ */ t(
+                      "th",
+                      {
+                        className: o(
+                          "table-component__wrapper__table__thead__th",
+                          {
+                            bordered: l,
+                            stickyLeft: h && a === 0
+                          },
+                          D
+                        ),
+                        style: {
+                          ...e.width ? { width: e.width } : {},
+                          ...e.align ? { textAlign: e.align } : {}
+                        },
+                        onClick: () => e.sorted && E(e.key),
+                        children: /* @__PURE__ */ _("div", { className: "th-content", children: [
+                          e.title,
+                          e.sorted && /* @__PURE__ */ t("span", { className: "sort-icon", children: (n == null ? void 0 : n.key) === e.key ? y[n.order] : y.default })
+                        ] })
+                      },
+                      `${e.key}-${a}`
+                    ))
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ _("tbody", { className: o("table-component__wrapper__table__tbody", I), children: [
+              T.map((e, a) => /* @__PURE__ */ t(
+                G,
+                {
+                  record: e,
+                  onClickTr: () => m == null ? void 0 : m(e),
+                  columns: f,
+                  rowKey: i,
+                  rowClassName: j,
+                  index: a,
+                  stickyLeft: h,
+                  bordered: l
+                },
+                $(e)
+              )),
+              S ? /* @__PURE__ */ t(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    backgroundColor: "rgba(255, 255, 255, 0.7)",
+                    zIndex: 10
+                  },
+                  children: /* @__PURE__ */ t(H, { className: "centered" })
+                }
+              ) : null
+            ] })
+          ]
+        }
+      )
+    }
+  ) });
+}
+const K = U.memo(J);
+export {
+  K as Table
+};

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

@@ -0,0 +1 @@
+

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

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

package/dist/components/Ui/Tabs/Tabs.js

@@ -0,0 +1,25 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as v } from "react";
+import '../../../assets/src/components/Ui/Tabs/Tabs.css';/* empty css                                        */
+const f = ({ items: s, defaultActiveKey: t, onChange: d }) => {
+  var c, b;
+  const [l, i] = v(t || ((c = s[0]) == null ? void 0 : c.key)), o = (a) => {
+    s.some((r) => r.key === a && !r.disabled) && (i(a), d == null || d(a));
+  };
+  return /* @__PURE__ */ n("div", { className: "tabs", children: [
+    /* @__PURE__ */ e("div", { className: "tabs-bar", children: s.map((a) => /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: () => !a.disabled && o(a.key),
+        className: `tab-button ${l === a.key ? "active" : ""} ${a.disabled ? "disabled" : ""}`,
+        disabled: a.disabled,
+        children: a.label
+      },
+      a.key
+    )) }),
+    /* @__PURE__ */ e("div", { className: "tabs-content", children: (b = s.find((a) => a.key === l)) == null ? void 0 : b.children })
+  ] });
+};
+export {
+  f as Tabs
+};

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

@@ -0,0 +1,67 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Tabs as t } from "./Tabs.js";
+const n = {
+  title: "UIKit/Tabs",
+  component: t,
+  tags: ["autodocs"],
+  argTypes: {
+    items: {
+      control: "object",
+      description: "Массив объектов вкладок {label: string, content: ReactNode}"
+    }
+  }
+}, s = {
+  args: {
+    items: [
+      {
+        key: "profile",
+        label: "Профиль",
+        children: /* @__PURE__ */ e("div", { children: "Информация о пользователе" })
+      },
+      {
+        key: "settings",
+        label: "Настройки",
+        children: /* @__PURE__ */ e("div", { children: "Параметры аккаунта" })
+      },
+      {
+        key: "notifications",
+        label: "Уведомления",
+        children: /* @__PURE__ */ e("div", { children: "Настройки уведомлений" })
+      }
+    ]
+  }
+}, a = {
+  args: {
+    items: [
+      {
+        key: "favorites",
+        label: "Избранное",
+        children: /* @__PURE__ */ e("div", { children: "Ваши избранные элементы" })
+      },
+      {
+        key: "projects",
+        label: "Проекты",
+        children: /* @__PURE__ */ e("div", { children: "Список ваших проектов" })
+      }
+    ]
+  },
+  decorators: [
+    (i) => /* @__PURE__ */ e("div", { style: { maxWidth: "500px", margin: "0 auto" }, children: /* @__PURE__ */ e(i, {}) })
+  ]
+}, c = {
+  args: {
+    items: [
+      {
+        key: "single",
+        label: "Единственная вкладка",
+        children: /* @__PURE__ */ e("div", { children: "Контент единственной вкладки" })
+      }
+    ]
+  }
+};
+export {
+  s as Basic,
+  c as SingleTab,
+  a as StyledTabs,
+  n as default
+};

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

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

package/dist/components/Ui/TextInput/TextInput.js

@@ -0,0 +1,86 @@
+import { jsxs as d, jsx as e, Fragment as b } from "react/jsx-runtime";
+import { forwardRef as g, useState as A } from "react";
+import '../../../assets/src/components/Ui/TextInput/TextInput.css';/* empty css                                                  */
+import { IconX as F, IconCheck as R, IconSearch as T, IconLock as X, IconAt as q } from "../Icons/Icons.js";
+import { Loader as B } from "../Loader/Loader.js";
+const D = g(
+  ({
+    label: s,
+    placeholder: h = "",
+    value: n,
+    // Значение из пропсов
+    type: f = "text",
+    name: I = "TextInput",
+    id: v,
+    isDisabled: x = !1,
+    iconType: c,
+    errorMessage: l = !1,
+    hasError: N = !1,
+    onChange: a,
+    // Обработчик из пропсов
+    className: p,
+    isClearable: r,
+    isLoading: i,
+    onFocus: k,
+    onKeyDown: z,
+    onBlur: $
+  }, w) => {
+    const [C, o] = A(""), t = n !== void 0, u = t ? n : C, j = (m) => {
+      const V = m.target.value;
+      t || o(V), a && a(m);
+    }, L = () => {
+      t && a ? a({ target: { value: "" } }) : o("");
+    }, S = () => {
+      switch (c) {
+        case "email":
+          return /* @__PURE__ */ e(q, { className: "icon", size: 20 });
+        case "password":
+          return /* @__PURE__ */ e(X, { className: "icon", size: 20 });
+        case "search":
+          return /* @__PURE__ */ e(T, { className: "icon", size: 20 });
+        case "checkmark":
+          return /* @__PURE__ */ e(R, { className: "icon", size: 20 });
+        default:
+          return /* @__PURE__ */ e(b, {});
+      }
+    };
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        className: `text-input 
+        ${p} 
+        ${N && "invalid"}
+        ${r && "clearable"}`,
+        children: [
+          s && /* @__PURE__ */ e("label", { children: s }),
+          /* @__PURE__ */ d("div", { className: `input-container ${c ? `has-icon icon-${c}` : ""}`, children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                onBlur: $,
+                type: f,
+                value: u,
+                onChange: j,
+                placeholder: h,
+                name: I,
+                id: v,
+                disabled: x,
+                ref: w,
+                onFocus: k,
+                onKeyDown: z
+              }
+            ),
+            S(),
+            r && u && !i && /* @__PURE__ */ e("div", { className: "clear-value", onClick: L, children: /* @__PURE__ */ e(F, { size: 20 }) }),
+            i && /* @__PURE__ */ e(B, {})
+          ] }),
+          l && /* @__PURE__ */ e("span", { className: "helper-text", children: l })
+        ]
+      }
+    );
+  }
+);
+D.displayName = "TextInput";
+export {
+  D as TextInput
+};

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

@@ -0,0 +1,225 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { TextInput as l } from "./TextInput.js";
+const y = {
+  title: "UIKit/TextInput",
+  component: l,
+  tags: ["autodocs"],
+  argTypes: {
+    iconType: {
+      control: {
+        type: "select",
+        options: [void 0, "email", "password", "search", "checkmark"]
+      }
+    },
+    type: {
+      control: {
+        type: "select",
+        options: ["text", "password", "email", "search"]
+      }
+    },
+    className: {
+      control: {
+        type: "text",
+        description: "Комбинируйте классы: 'sm', 'rounded' через пробел"
+      }
+    }
+  }
+}, f = {
+  args: {
+    placeholder: "Введите текст...",
+    label: "Текстовое поле"
+  }
+}, v = {
+  args: {
+    placeholder: "Поиск...",
+    iconType: "search"
+  }
+}, N = {
+  args: {
+    label: "Email",
+    placeholder: "Введите email",
+    hasError: !0,
+    errorMessage: "Неверный формат email",
+    iconType: "email"
+  }
+}, k = {
+  args: {
+    label: "Заблокированное поле",
+    value: "Нельзя изменить",
+    isDisabled: !0
+  }
+}, C = {
+  args: {
+    label: "Поле с очисткой",
+    placeholder: "Введите и очистите",
+    isClearable: !0,
+    value: "Пример текста"
+  }
+}, T = {
+  args: {
+    label: "Поле с загрузкой",
+    isLoading: !0
+  }
+}, I = {
+  args: {
+    placeholder: "Маленькое поле...",
+    label: "Текстовое поле (sm)",
+    className: "sm"
+  }
+}, D = {
+  args: {
+    placeholder: "Маленькое и круглое...",
+    label: "Поле (sm + rounded)",
+    className: "sm rounded"
+  }
+}, S = {
+  render: () => /* @__PURE__ */ a("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px" }, children: [
+    /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+      /* @__PURE__ */ e("h3", { children: "Обычный размер (44px)" }),
+      /* @__PURE__ */ e(l, { label: "Обычное поле", placeholder: "Просто текст" }),
+      /* @__PURE__ */ e(l, { label: "С иконкой", iconType: "email", placeholder: "email@example.com" }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          label: "С ошибкой",
+          hasError: !0,
+          errorMessage: "Ошибка валидации",
+          value: "Неверное значение"
+        }
+      ),
+      /* @__PURE__ */ e(l, { label: "С очисткой", isClearable: !0, value: "Можно очистить" }),
+      /* @__PURE__ */ e(l, { label: "Загрузка", isLoading: !0 }),
+      /* @__PURE__ */ e(l, { label: "Закругленное", className: "rounded", placeholder: "rounded" })
+    ] }),
+    /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+      /* @__PURE__ */ e("h3", { children: "Маленький размер (36px)" }),
+      /* @__PURE__ */ e(l, { label: "Поле sm", className: "sm", placeholder: "Маленькое поле" }),
+      /* @__PURE__ */ e(l, { label: "С иконкой", className: "sm", iconType: "search", placeholder: "Поиск..." }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          label: "С ошибкой",
+          className: "sm",
+          hasError: !0,
+          errorMessage: "Маленькая ошибка",
+          value: "Ошибка"
+        }
+      ),
+      /* @__PURE__ */ e(l, { label: "С очисткой", className: "sm", isClearable: !0, value: "Можно очистить" }),
+      /* @__PURE__ */ e(l, { label: "Загрузка", className: "sm", isLoading: !0 }),
+      /* @__PURE__ */ e(l, { label: "Закругленное sm", className: "sm rounded", placeholder: "sm + rounded" })
+    ] })
+  ] })
+}, E = {
+  render: () => /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: "8px", maxWidth: "400px" }, children: [
+    /* @__PURE__ */ e(l, { label: "Обычный размер (44px)", value: "Текст" }),
+    /* @__PURE__ */ e(l, { label: "Маленький (36px)", className: "sm", value: "Текст" }),
+    /* @__PURE__ */ e(l, { label: "Обычный + rounded", className: "rounded", value: "Текст" }),
+    /* @__PURE__ */ e(l, { label: "Маленький + rounded", className: "sm rounded", value: "Текст" }),
+    /* @__PURE__ */ e("div", { style: { marginTop: "16px", height: "1px", background: "#eee" } }),
+    /* @__PURE__ */ e(
+      l,
+      {
+        label: "Комбинированный пример",
+        className: "sm rounded",
+        iconType: "password",
+        type: "password",
+        isClearable: !0,
+        value: "password123"
+      }
+    )
+  ] })
+}, w = {
+  render: function() {
+    const [i, p] = t(""), [r, m] = t(!1), [c, h] = t(!1), [o, n] = t(!1), d = [r ? "sm" : "", c ? "rounded" : ""].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          label: "Интерактивная демонстрация",
+          placeholder: "Попробуйте ввести текст",
+          value: i,
+          onChange: (s) => {
+            p(s.target.value), n(s.target.value.length > 0 && s.target.value.length < 3);
+          },
+          className: d,
+          hasError: o,
+          errorMessage: o ? "Слишком короткое значение" : "",
+          isClearable: !0,
+          iconType: "search"
+        }
+      ),
+      /* @__PURE__ */ a("div", { style: { display: "flex", flexWrap: "wrap", gap: "16px" }, children: [
+        /* @__PURE__ */ a("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "checkbox",
+              checked: r,
+              onChange: (s) => m(s.target.checked)
+            }
+          ),
+          "Маленький размер (sm)"
+        ] }),
+        /* @__PURE__ */ a("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "checkbox",
+              checked: c,
+              onChange: (s) => h(s.target.checked)
+            }
+          ),
+          "Закругленные углы"
+        ] }),
+        /* @__PURE__ */ a("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "checkbox",
+              checked: o,
+              onChange: (s) => n(s.target.checked)
+            }
+          ),
+          "Показать ошибку"
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { style: { background: "#f5f5f5", padding: "12px", borderRadius: "4px" }, children: [
+        /* @__PURE__ */ e("h4", { children: "Текущие параметры:" }),
+        /* @__PURE__ */ a("ul", { children: [
+          /* @__PURE__ */ a("li", { children: [
+            "Классы: ",
+            /* @__PURE__ */ e("strong", { children: d || "default" })
+          ] }),
+          /* @__PURE__ */ a("li", { children: [
+            "Высота: ",
+            /* @__PURE__ */ e("strong", { children: r ? "36px" : "44px" })
+          ] }),
+          c && /* @__PURE__ */ a("li", { children: [
+            "Радиус: ",
+            /* @__PURE__ */ e("strong", { children: r ? "18px" : "22px" })
+          ] }),
+          /* @__PURE__ */ a("li", { children: [
+            "Состояние: ",
+            o ? "❌ Ошибка" : "✅ Нормальное"
+          ] })
+        ] })
+      ] })
+    ] });
+  }
+};
+export {
+  S as AllStates,
+  C as Clearable,
+  f as Default,
+  k as Disabled,
+  w as InteractiveDemo,
+  T as Loading,
+  E as SizeComparison,
+  D as SmallRounded,
+  I as SmallSize,
+  N as WithError,
+  v as WithIcon,
+  y as default
+};

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

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

package/dist/components/Ui/TextareaInput/TextareaInput.js

@@ -0,0 +1,69 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { forwardRef as C, useState as V } from "react";
+import '../../../assets/src/components/Ui/TextareaInput/TextareaInput.css';/* empty css                                                          */
+import $ from "../../../_virtual/index.js";
+import { IconX as b } from "../Icons/Icons.js";
+const g = C(
+  ({
+    label: c,
+    name: p = "TextareaInput",
+    placeholder: f,
+    errorMessage: i,
+    hasError: u = !1,
+    isDisabled: x,
+    charLimit: a,
+    onChange: l,
+    value: o,
+    // Значение из пропсов
+    resize: v = !1,
+    isClearable: d,
+    spellCheck: N = !1
+  }, h) => {
+    const [I, m] = V(""), t = o !== void 0, s = t ? o : I, w = (z) => {
+      const r = z.target.value;
+      (!a || r.length <= a) && (t || m(r), l && l(r));
+    }, T = () => {
+      t && l ? l("") : m("");
+    }, j = $({
+      "no-resize": !v
+    });
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        className: `textarea-input 
+      ${u && "invalid"}
+      ${d && "clearable"}`,
+        children: [
+          c && /* @__PURE__ */ e("label", { children: c }),
+          /* @__PURE__ */ n("div", { className: "textarea-wrapper", children: [
+            /* @__PURE__ */ e(
+              "textarea",
+              {
+                ref: h,
+                className: j,
+                value: s,
+                onChange: w,
+                name: p,
+                placeholder: f,
+                disabled: x,
+                spellCheck: N
+              }
+            ),
+            d && s && /* @__PURE__ */ e("div", { className: "clear-value", onClick: T, children: /* @__PURE__ */ e(b, { size: 20 }) })
+          ] }),
+          a && /* @__PURE__ */ n("p", { className: "char-limit", children: [
+            s.length,
+            "/",
+            a
+          ] }),
+          i && /* @__PURE__ */ e("span", { className: "helper-text", children: i })
+        ]
+      }
+    );
+  }
+);
+g.displayName = "TextareaInput";
+export {
+  g as TextareaInput,
+  g as default
+};

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

@@ -0,0 +1,19 @@
+import { jsx as a } from "react/jsx-runtime";
+import { TextareaInput as e } from "./TextareaInput.js";
+const l = {
+  title: "UIKit/TextareaInput",
+  component: e
+}, r = {
+  render: (t) => /* @__PURE__ */ a(e, { ...t })
+}, m = {
+  ...r,
+  args: {
+    label: "Введите текст:",
+    name: "textarea",
+    placeholder: "Ваш текст"
+  }
+};
+export {
+  m as Default,
+  l as default
+};

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

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