triafly-ui-kit 1.0.76 → 1.0.79

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

@@ -1,32 +1,31 @@
 import { jsx as t, jsxs as u } from "react/jsx-runtime";
-import W, { forwardRef as X, useState as B, useMemo as Y, useCallback as w, useEffect as Z } from "react";
+import W, { forwardRef as X, useState as D, useMemo as Y, useCallback as b, useEffect as Z } from "react";
 import l from "../../../_virtual/index.js";
 import '../../../assets/src/components/Ui/Table/Table.css';/* empty css                                          */
 import { MemoizedRow as S } from "./MemoizedRow/MemoizedRow.js";
-import { IconCaretDown as C, IconCaretUp as K } from "../Icons/Icons.js";
+import { IconCaretDown as R, IconCaretUp as K } from "../Icons/Icons.js";
 import { Loader as ee } from "../Loader/Loader.js";
-import { TableSkeletonRow as te } from "./TableSkeletonRow/TableSkeletonRow.js";
-const D = {
-  asc: /* @__PURE__ */ t(C, { viewBox: "0 -6 24 24", "aria-hidden": "true" }),
+const T = {
+  asc: /* @__PURE__ */ t(R, { viewBox: "0 -6 24 24", "aria-hidden": "true" }),
   desc: /* @__PURE__ */ t(K, { viewBox: "0 -4 24 24", "aria-hidden": "true" }),
-  default: /* @__PURE__ */ t(C, { viewBox: "0 -6 24 24", "aria-hidden": "true" })
-}, ne = ({
-  columns: f,
+  default: /* @__PURE__ */ t(R, { viewBox: "0 -6 24 24", "aria-hidden": "true" })
+}, te = ({
+  columns: y,
   dataSource: i,
-  rowKey: o,
+  rowKey: c,
   tableClassName: A,
   theadClassName: j,
   trTheadClassNames: E,
   thTheadClassNames: L,
   tbodyClassName: M,
   wrapperClassName: $,
-  borderBottom: g = !1,
+  borderBottom: w = !1,
   stickyHeader: z = !1,
-  stickyLeft: y = !1,
+  stickyLeft: g = !1,
   bordered: m = !1,
   rowClassName: U,
   defaultSort: q,
-  onClickTr: d,
+  onClickTr: f,
   onClickTrHeader: F,
   loading: N = !1,
   hasMore: G = !1,
@@ -34,44 +33,44 @@ const D = {
   externalSorting: k = !0,
   containerRef: H
 }, J) => {
-  const x = W.useRef(null), [I, O] = B(i || []), [r, P] = B(
+  const x = W.useRef(null), [I, O] = D(i || []), [r, P] = D(
     q || null
-  ), _ = Y(() => k ? i : I, [i, I, k]), R = w((e, a) => {
-    O((c) => [...c].sort((p, T) => {
-      const n = p[e], s = T[e];
+  ), p = Y(() => k ? i : I, [i, I, k]), B = b((e, a) => {
+    O((o) => [...o].sort((d, C) => {
+      const n = d[e], s = C[e];
       return typeof n == "string" && typeof s == "string" ? a === "asc" ? n.localeCompare(s) : s.localeCompare(n) : typeof n == "number" && typeof s == "number" ? a === "asc" ? n - s : s - n : n instanceof Date && s instanceof Date ? a === "asc" ? n.getTime() - s.getTime() : s.getTime() - n.getTime() : 0;
     })), P({ key: e, order: a });
-  }, []), h = w(
-    (e) => typeof o == "function" ? o(e) : String(e[o]),
-    [o]
-  ), Q = w(
+  }, []), _ = b(
+    (e) => typeof c == "function" ? c(e) : String(e[c]),
+    [c]
+  ), Q = b(
     (e) => {
-      const c = (r == null ? void 0 : r.key) === e && r.order === "asc" ? "desc" : "asc";
-      R(e, c);
+      const o = (r == null ? void 0 : r.key) === e && r.order === "asc" ? "desc" : "asc";
+      B(e, o);
     },
-    [r, R]
+    [r, B]
   );
   return Z(() => {
     const e = x.current;
     if (!e) return;
-    const a = (c) => {
-      const b = c.target, p = b.closest("tr");
-      if (!p || b.closest("[data-no-bubble]")) return;
-      const n = p.dataset.id;
-      if (!(!n || !d)) {
-        const s = i == null ? void 0 : i.find((V) => h(V) === n);
-        s && d(s);
+    const a = (o) => {
+      const h = o.target, d = h.closest("tr");
+      if (!d || h.closest("[data-no-bubble]")) return;
+      const n = d.dataset.id;
+      if (!(!n || !f)) {
+        const s = i == null ? void 0 : i.find((V) => _(V) === n);
+        s && f(s);
       }
     };
     return e.addEventListener("click", a), () => e.removeEventListener("click", a);
-  }, [i, d, h]), /* @__PURE__ */ t("div", { className: l("table-component", $), children: /* @__PURE__ */ t(
+  }, [i, f, _]), /* @__PURE__ */ t("div", { className: l("table-component", $), children: /* @__PURE__ */ t(
     "div",
     {
       className: l(
         "table-component__wrapper",
         {
           bordered: m,
-          borderBottom: g
+          borderBottom: w
         },
         A
       ),
@@ -81,7 +80,7 @@ const D = {
         {
           className: l("table-component__wrapper__table", {
             bordered: m,
-            borderBottom: g
+            borderBottom: w
           }),
           ref: J,
           children: [
@@ -103,14 +102,14 @@ const D = {
                       E
                     ),
                     onClick: F,
-                    children: f.map((e, a) => /* @__PURE__ */ t(
+                    children: y.map((e, a) => /* @__PURE__ */ t(
                       "th",
                       {
                         className: l(
                           "table-component__wrapper__table__thead__th",
                           {
                             bordered: m,
-                            stickyLeft: y && a === 0
+                            stickyLeft: g && a === 0
                           },
                           L
                         ),
@@ -129,7 +128,7 @@ const D = {
                             className: "th-content",
                             children: [
                               e.title,
-                              e.sorted && /* @__PURE__ */ t("span", { className: "sort-icon", children: (r == null ? void 0 : r.key) === e.key ? D[r.order] : D.default })
+                              e.sorted && /* @__PURE__ */ t("span", { className: "sort-icon", children: (r == null ? void 0 : r.key) === e.key ? T[r.order] : T.default })
                             ]
                           }
                         )
@@ -146,20 +145,20 @@ const D = {
                 ref: x,
                 className: l("table-component__wrapper__table__tbody", M),
                 children: [
-                  _ == null ? void 0 : _.map((e) => /* @__PURE__ */ t(
+                  p == null ? void 0 : p.map((e) => /* @__PURE__ */ t(
                     S,
                     {
                       record: e,
-                      columns: f,
-                      rowKey: o,
+                      columns: y,
+                      rowKey: c,
                       rowClassName: U,
-                      stickyLeft: y,
+                      stickyLeft: g,
                       bordered: m
                     },
-                    h(e)
+                    _(e)
                   )),
                   N ? /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t("tr", { children: /* @__PURE__ */ t("div", { className: "loading_table_init", children: /* @__PURE__ */ t(ee, { className: "centered" }) }) }) }) : null,
-                  !N && G && v && /* @__PURE__ */ t("tr", { ref: v, children: /* @__PURE__ */ t(te, { colSpan: f.length }) })
+                  !N && G && v && /* @__PURE__ */ t("tr", { ref: v, style: { height: 1, visibility: "hidden" } })
                 ]
               },
               "tbody"
@@ -170,7 +169,7 @@ const D = {
     },
     "wrapper"
   ) }, "table-component");
-}, pe = X(ne);
+}, oe = X(te);
 export {
-  pe as Table
+  oe as Table
 };

package/dist/context/ToastContext/ToastContext.js

@@ -1,40 +1,38 @@
-import { jsxs as v, jsx as l } from "react/jsx-runtime";
-import { createContext as f, useState as h, useCallback as u, useMemo as w, useContext as g } from "react";
+import { jsxs as p, jsx as d } from "react/jsx-runtime";
+import { createContext as x, useState as f, useCallback as u, useMemo as h, useContext as w } from "react";
 import C from "react-dom";
-import m from "../../src/context/ToastContext/ToastContext.module.scss.js";
-const T = f(void 0), y = () => {
-  const o = g(T);
-  if (!o)
+import '../../assets/src/context/ToastContext/ToastContext.css';/* empty css                                               */
+const m = x(void 0), j = () => {
+  const e = w(m);
+  if (!e)
     throw new Error("useToast must be used within a ToastProvider");
-  return o;
-}, M = ({ children: o }) => {
-  const [r, n] = h([]), p = 3, c = 4e3, i = u((t) => {
-    n((e) => e.filter((s) => s.id !== t));
-  }, []), d = u(
+  return e;
+}, M = ({ children: e }) => {
+  const [l, a] = f([]), T = 3, n = 4e3, i = u((t) => {
+    a((o) => o.filter((s) => s.id !== t));
+  }, []), c = u(
     (t) => {
-      const e = {
+      const o = {
         id: Date.now(),
         message: t,
-        duration: c
+        duration: n
       };
-      n((s) => {
-        const a = [...s, e];
-        return a.length > p ? a.slice(1) : a;
-      }), setTimeout(() => i(e.id), c);
+      a((s) => {
+        const r = [...s, o];
+        return r.length > T ? r.slice(1) : r;
+      }), setTimeout(() => i(o.id), n);
     },
     [i]
-  );
-  console.log("тест addToast"), console.log("toasts", r);
-  const x = w(() => ({ addToast: d }), [d]);
-  return /* @__PURE__ */ v(T.Provider, { value: x, children: [
-    o,
+  ), v = h(() => ({ addToast: c }), [c]);
+  return /* @__PURE__ */ p(m.Provider, { value: v, children: [
+    e,
     C.createPortal(
-      /* @__PURE__ */ l("div", { className: m.Wrapper, children: r.map((t) => /* @__PURE__ */ l("div", { className: m.Toast, children: t.message }, t.id)) }),
+      /* @__PURE__ */ d("div", { className: "toast-provider", children: l.map((t) => /* @__PURE__ */ d("div", { className: "toast-provider__element", children: t.message }, t.id)) }),
       document.body
     )
   ] });
 };
 export {
   M as ToastProvider,
-  y as useToast
+  j as useToast
 };

package/dist/context/TriaflyContext/TriaflyProvider.js

@@ -1,27 +1,28 @@
-import { jsx as n } from "react/jsx-runtime";
-import { createContext as s, useMemo as m, useContext as a } from "react";
-import { useBreakpointValueTriafly as u } from "./hooks/useBreakpointValue/useBreakpointValue.js";
-import { useThemeLogic as f } from "./hooks/useTheme/useTheme.js";
-import { useModalState as l } from "./hooks/useModal/useModal.js";
-const t = s(void 0), y = () => {
-  const e = a(t);
+import { jsx as m } from "react/jsx-runtime";
+import { createContext as n, useMemo as a, useContext as u } from "react";
+import { useBreakpointValueTriafly as f } from "./hooks/useBreakpointValue/useBreakpointValue.js";
+import { useThemeLogic as l } from "./hooks/useTheme/useTheme.js";
+import { useModalState as c } from "./hooks/useModal/useModal.js";
+const i = n(void 0), y = () => {
+  const e = u(i);
   if (!e)
     throw new Error("useTriafly must be used within a TriaflyProvider");
   return e;
-}, h = ({ children: e }) => {
-  const { theme: o, toggleTheme: r } = f(), i = m(
+}, v = ({ children: e }) => {
+  const { theme: t, toggleTheme: o, setTheme: r } = l(), s = a(
     () => ({
-      theme: o,
-      toggleTheme: r,
-      useBreakpointValueTriafly: u,
-      useModalState: l
+      theme: t,
+      toggleTheme: o,
+      useBreakpointValueTriafly: f,
+      useModalState: c,
+      setTheme: r
     }),
-    [o, r]
+    [t, o, r]
   );
-  return /* @__PURE__ */ n(t.Provider, { value: i, children: e });
+  return /* @__PURE__ */ m(i.Provider, { value: s, children: e });
 };
 export {
-  t as TriaflyContext,
-  h as TriaflyProvider,
+  i as TriaflyContext,
+  v as TriaflyProvider,
   y as useTriafly
 };

package/dist/context/TriaflyContext/hooks/useTheme/useTheme.js

@@ -1,16 +1,16 @@
 import { useSyncExternalStore as n } from "react";
-const o = () => {
+const r = () => {
   const t = window.matchMedia("(prefers-color-scheme: dark)").matches;
   return localStorage.getItem("theme") || (t ? "dark" : "light");
-}, m = o();
+}, m = r();
 document.documentElement.setAttribute("data-theme", m);
 const c = () => {
-  const t = n((e) => (window.addEventListener("storage", e), () => window.removeEventListener("storage", e)), o), r = (e) => {
+  const t = n((e) => (window.addEventListener("storage", e), () => window.removeEventListener("storage", e)), r), o = (e) => {
     localStorage.setItem("theme", e), localStorage.setItem("chakra-ui-color-mode", e), document.documentElement.setAttribute("data-theme", e), window.dispatchEvent(new Event("storage"));
   };
   return { theme: t, toggleTheme: () => {
-    r(t === "light" ? "dark" : "light");
-  } };
+    o(t === "light" ? "dark" : "light");
+  }, setTheme: o };
 };
 export {
   c as useThemeLogic

package/dist/main.d.ts

@@ -74,13 +74,14 @@ declare type ButtonProps = {
     iconTail?: ReactElement;
 };
 
-export declare const ButtonsArray: React.FC<ButtonsArrayProps>;
+export declare const ButtonsArray: ForwardRefExoticComponent<ButtonsArrayProps & RefAttributes<HTMLDivElement>>;
 
 export declare interface ButtonsArrayProps {
     tabs: ButtonTab[];
     label?: string;
     onChange?: (key: string | number) => void;
     activeKey?: string | number | null | undefined;
+    isDisabled?: boolean;
 }
 
 declare interface ButtonTab {
@@ -1062,6 +1063,13 @@ declare type ModalWindowProps = {
     foolHeight?: boolean;
 };
 
+export declare const NumberInput: default_2.ForwardRefExoticComponent<NumberInputProps & default_2.RefAttributes<HTMLInputElement>>;
+
+declare interface NumberInputProps extends TextInputProps {
+    allowNegative?: boolean;
+    allowDecimal?: boolean;
+}
+
 declare type Option_2 = {
     value: string;
     label: string;
@@ -1123,7 +1131,7 @@ declare type SearchInputProps = {
     onChange?: (value: string) => void;
 };
 
-declare type SizeModal = "sm" | "md" | "lg" | "full";
+declare type SizeModal = "sm" | "md" | "lg" | "full" | "inner";
 
 declare type SizeUnit = "B" | "KB" | "MB" | "GB";
 
@@ -1269,6 +1277,7 @@ export declare const TriaflyContext: Context<TriaflyContextType | undefined>;
 declare interface TriaflyContextType {
     theme: Theme;
     toggleTheme: () => void;
+    setTheme: (newTheme: Theme) => void;
     useBreakpointValueTriafly: <T>(values: BreakpointValuesTriafly<T>) => T;
     useModalState: typeof useModalState;
 }
@@ -1292,6 +1301,7 @@ export declare const useModalState: () => UseModalReturn;
 export declare const useThemeLogic: () => {
     theme: Theme;
     toggleTheme: () => void;
+    setTheme: (newTheme: Theme) => void;
 };
 
 export declare const useToast: () => ToastContextType;

package/dist/main.js

@@ -16,8 +16,8 @@ import { DropdownMenu as B } from "./components/Ui/DropdownMenu/DropdownMenu.js"
 import { FileUpload as U } from "./components/Ui/FileUpload/FileUpload.js";
 import { Form as R } from "./components/Ui/Form/FormRoot/FormRoot.js";
 import { FormValidationError as X, useForm as b } from "./components/Ui/Form/useForm/useForm.js";
-import { Loader as E } from "./components/Ui/Loader/Loader.js";
-import { Pagination as N } from "./components/Ui/Pagination/Pagination.js";
+import { Loader as N } from "./components/Ui/Loader/Loader.js";
+import { Pagination as G } from "./components/Ui/Pagination/Pagination.js";
 import { Radio as Q } from "./components/Ui/Radio/Radio.js";
 import { SearchInput as W } from "./components/Ui/SearchInput/SearchInput.js";
 import { Skeleton as J } from "./components/Ui/Skeleton/Skeleton.js";
@@ -27,12 +27,13 @@ import { TextInput as _ } from "./components/Ui/TextInput/TextInput.js";
 import { TextareaInput as oo } from "./components/Ui/TextareaInput/TextareaInput.js";
 import { Tooltip as no } from "./components/Ui/Tooltip/Tooltip.js";
 import { Tabs as co } from "./components/Ui/Tabs/Tabs.js";
-import { IconArrowBendUpRight as Io, IconArrowClockwise as ao, IconArrowDown as io, IconArrowLeft as po, IconArrowLineDown as lo, IconArrowLineLeft as mo, IconArrowLineRight as fo, IconArrowLineUp as xo, IconArrowRight as so, IconArrowUp as uo, IconArrowsOut as Co, IconArticle as ho, IconAt as wo, IconBellSimple as To, IconBookOpenText as go, IconCalendarBlank as ko, IconCaretDown as So, IconCaretLeft as Ao, IconCaretRight as Do, IconCaretUp as Lo, IconCaretUpDown as Po, IconChartPieSlice as yo, IconChatText as Bo, IconCheck as Fo, IconCheckCircle as Uo, IconChecks as Mo, IconCircleNotch as Ro, IconClickHouse as vo, IconCopy as Xo, IconCornersOut as bo, IconCsv as Ho, IconCube as Eo, IconDatabase as Go, IconDotsNine as No, IconDotsThreeVertical as Oo, IconExport as Qo, IconEye as Vo, IconEyeSlash as Wo, IconFile as zo, IconFiles as Jo, IconFloppyDisk as Yo, IconFolderSimple as jo, IconFolderSimpleX as qo, IconFunnel as Ko, IconGauge as Zo, IconGear as _o, IconGitBranchX as $o, IconGoogleDrive as or, IconHand as rr, IconHeadCircuit as nr, IconHouse as er, IconIcon as cr, IconInfo as tr, IconJoin as Ir, IconLanguage as ar, IconLink as ir, IconList as pr, IconLock as lr, IconLockOpen as mr, IconMariaDB as fr, IconMinus as xr, IconMongoDB as sr, IconMoon as ur, IconMySQL as dr, IconNavigationArrow as Cr, IconNotePencil as hr, IconPassword as wr, IconPen as Tr, IconPlay as gr, IconPlugsX as kr, IconPlus as Sr, IconPorsgteSQL as Ar, IconPresentationChart as Dr, IconQuestion as Lr, IconQuestionFullfilled as Pr, IconRedo as yr, IconRoleX as Br, IconSearch as Fr, IconSearchX as Ur, IconSelection as Mr, IconServer as Rr, IconSlidersHorizontal as vr, IconSticker as Xr, IconSun as br, IconThreeDot as Hr, IconTrash as Er, IconTriangleDown as Gr, IconTriangleUp as Nr, IconUndo as Or, IconUploadSimple as Qr, IconUser as Vr, IconUserX as Wr, IconWarningCircle as zr, IconWrench as Jr, IconX as Yr, IconYandexDisk as jr } from "./components/Ui/Icons/Icons.js";
+import { IconArrowBendUpRight as Io, IconArrowClockwise as ao, IconArrowDown as io, IconArrowLeft as po, IconArrowLineDown as lo, IconArrowLineLeft as mo, IconArrowLineRight as fo, IconArrowLineUp as xo, IconArrowRight as so, IconArrowUp as uo, IconArrowsOut as Co, IconArticle as ho, IconAt as wo, IconBellSimple as To, IconBookOpenText as go, IconCalendarBlank as ko, IconCaretDown as So, IconCaretLeft as Ao, IconCaretRight as Do, IconCaretUp as Lo, IconCaretUpDown as Po, IconChartPieSlice as yo, IconChatText as Bo, IconCheck as Fo, IconCheckCircle as Uo, IconChecks as Mo, IconCircleNotch as Ro, IconClickHouse as vo, IconCopy as Xo, IconCornersOut as bo, IconCsv as Ho, IconCube as No, IconDatabase as Eo, IconDotsNine as Go, IconDotsThreeVertical as Oo, IconExport as Qo, IconEye as Vo, IconEyeSlash as Wo, IconFile as zo, IconFiles as Jo, IconFloppyDisk as Yo, IconFolderSimple as jo, IconFolderSimpleX as qo, IconFunnel as Ko, IconGauge as Zo, IconGear as _o, IconGitBranchX as $o, IconGoogleDrive as or, IconHand as rr, IconHeadCircuit as nr, IconHouse as er, IconIcon as cr, IconInfo as tr, IconJoin as Ir, IconLanguage as ar, IconLink as ir, IconList as pr, IconLock as lr, IconLockOpen as mr, IconMariaDB as fr, IconMinus as xr, IconMongoDB as sr, IconMoon as ur, IconMySQL as dr, IconNavigationArrow as Cr, IconNotePencil as hr, IconPassword as wr, IconPen as Tr, IconPlay as gr, IconPlugsX as kr, IconPlus as Sr, IconPorsgteSQL as Ar, IconPresentationChart as Dr, IconQuestion as Lr, IconQuestionFullfilled as Pr, IconRedo as yr, IconRoleX as Br, IconSearch as Fr, IconSearchX as Ur, IconSelection as Mr, IconServer as Rr, IconSlidersHorizontal as vr, IconSticker as Xr, IconSun as br, IconThreeDot as Hr, IconTrash as Nr, IconTriangleDown as Er, IconTriangleUp as Gr, IconUndo as Or, IconUploadSimple as Qr, IconUser as Vr, IconUserX as Wr, IconWarningCircle as zr, IconWrench as Jr, IconX as Yr, IconYandexDisk as jr } from "./components/Ui/Icons/Icons.js";
 import { ToastProvider as Kr, useToast as Zr } from "./context/ToastContext/ToastContext.js";
 import { TriaflyContext as $r, TriaflyProvider as on, useTriafly as rn } from "./context/TriaflyContext/TriaflyProvider.js";
 import { useBreakpointValueTriafly as en } from "./context/TriaflyContext/hooks/useBreakpointValue/useBreakpointValue.js";
 import { useThemeLogic as tn } from "./context/TriaflyContext/hooks/useTheme/useTheme.js";
 import { useModalState as an } from "./context/TriaflyContext/hooks/useModal/useModal.js";
+import { NumberInput as ln } from "./components/Ui/NumberInput/NumberInput.js";
 export {
   e as Accordeon,
   t as Alert,
@@ -81,9 +82,9 @@ export {
   Xo as IconCopy,
   bo as IconCornersOut,
   Ho as IconCsv,
-  Eo as IconCube,
-  Go as IconDatabase,
-  No as IconDotsNine,
+  No as IconCube,
+  Eo as IconDatabase,
+  Go as IconDotsNine,
   Oo as IconDotsThreeVertical,
   Qo as IconExport,
   Vo as IconEye,
@@ -135,9 +136,9 @@ export {
   Xr as IconSticker,
   br as IconSun,
   Hr as IconThreeDot,
-  Er as IconTrash,
-  Gr as IconTriangleDown,
-  Nr as IconTriangleUp,
+  Nr as IconTrash,
+  Er as IconTriangleDown,
+  Gr as IconTriangleUp,
   Or as IconUndo,
   Qr as IconUploadSimple,
   Vr as IconUser,
@@ -146,9 +147,10 @@ export {
   Jr as IconWrench,
   Yr as IconX,
   jr as IconYandexDisk,
-  E as Loader,
+  N as Loader,
   p as ModalWindow,
-  N as Pagination,
+  ln as NumberInput,
+  G as Pagination,
   Q as Radio,
   W as SearchInput,
   J as Skeleton,

package/dist/src/components/Ui/Tooltip/Tooltip.stories.module.css.js

@@ -1,4 +1,4 @@
-import '../../../../assets/src/components/Ui/Tooltip/Tooltip.stories.module.css';const i = "_container_x4z3a_1", o = "_trigger_x4z3a_27", t = "_clickTrigger_x4z3a_57 _trigger_x4z3a_27", n = "_positionsContainer_x4z3a_75", r = "_positionGroup_x4z3a_83", s = {
+import '../../../../assets/src/components/Ui/Tooltip/Tooltip.stories.module.css';const i = "_container_193w2_1", o = "_trigger_193w2_14", t = "_clickTrigger_193w2_29 _trigger_193w2_14", n = "_positionsContainer_193w2_38", r = "_positionGroup_193w2_42", s = {
   container: i,
   trigger: o,
   clickTrigger: t,