mimir-ui-kit 1.40.0 → 1.41.1

package/dist/assets/CardTrail.css

@@ -0,0 +1 @@
+._card-trail_pmokd_3{display:flex;flex-direction:column}._card-trail-header_pmokd_7{display:flex;align-items:flex-end;justify-content:space-between}._card-trail-header_pmokd_7:not(:last-child){margin-bottom:var(--mimir-space-xs)}._card-trail-header-title_pmokd_15{font-weight:var(--mimir-font-weight-text-medium);font-size:var(--mimir-size-text-l);font-family:var(--mimir-font-montserrat);line-height:var(--mimir-line-height-text-s1);letter-spacing:calc(var(--mimir-size-text-l) * -.02)}@media (max-width: 600px){._card-trail-header-title_pmokd_15{font-size:var(--mimir-size-text-m);letter-spacing:calc(var(--mimir-size-text-m) * -.02)}}._card-trail-header-merged-button_pmokd_28{margin-left:auto}._card-trail-list_pmokd_31{display:flex;padding:0;overflow:auto;white-space:nowrap;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}._card-trail-list_pmokd_31::-webkit-scrollbar{display:none}._card-trail-list-item_pmokd_43{scroll-snap-align:start;white-space:normal;white-space:initial}._card-trail-list-item_pmokd_43._pointer_pmokd_47{cursor:pointer}

package/dist/components/CardTrail/CardTrail.d.ts

@@ -0,0 +1,50 @@
+import { TButtonPropsWithoutStyles } from '../MergedButton';
+
+export type TProps = {
+    /**
+     * Заголовок списка.
+     */
+    title?: string;
+    /**
+     * Расстояние между карточками.
+     */
+    spaceBetween?: number;
+    /**
+     * Количество карточек для перелистывания.
+     */
+    scrollStep?: number;
+    /**
+     * Флаг, определяющий, нужно ли при клике на карточку скроллиться до нее.
+     */
+    scrollToCard?: boolean;
+    /**
+     * Дополнительные пропсы для кнопок переключения.
+     */
+    mergedButtonProps?: {
+        leftButton?: TButtonPropsWithoutStyles;
+        rightButton?: TButtonPropsWithoutStyles;
+    };
+    /**
+     * Класс, применяемый к обертке списка (section).
+     */
+    cardTrailClassName?: string;
+    /**
+     * Класс, применяемый к заголовку списка (header).
+     */
+    cardTrailHeaderClassName?: string;
+    /**
+     * Класс, применяемый к списку карточек (ul).
+     */
+    cardTrailListClassName?: string;
+    /**
+     * Класс, применяемый к кнопкам переключения (MergedButton).
+     */
+    cardTrailMergedButtonClassName?: string;
+    /**
+     * Класс, применяемый к карточке.
+     */
+    cardClassName?: string;
+};
+export declare const CardTrail: import('react').ForwardRefExoticComponent<TProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLUListElement>>;

package/dist/components/CardTrail/CardTrail.js

@@ -0,0 +1,139 @@
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { c as i } from "../../index-DIxK0V-G.js";
+import { forwardRef as D, useRef as I, useState as p, useEffect as x, Children as H } from "react";
+import { DEFAULT_SPACE_BETWEEN as R, DEFAULT_SCROLL_STEP as j } from "./constants.js";
+import { hasHorizontalScroll as _, isScrollAtEdge as C } from "./utils.js";
+import { useMergeRefs as F } from "../../hooks/useMergeRefs/useMergeRefs.js";
+import { useThrottledCallback as U } from "../../hooks/useThrottledCallback/index.js";
+import { MergedButton as $ } from "../MergedButton/MergedButton.js";
+import '../../assets/CardTrail.css';const q = "_pointer_pmokd_47", l = {
+  "card-trail": "_card-trail_pmokd_3",
+  "card-trail-header": "_card-trail-header_pmokd_7",
+  "card-trail-header-title": "_card-trail-header-title_pmokd_15",
+  "card-trail-header-merged-button": "_card-trail-header-merged-button_pmokd_28",
+  "card-trail-list": "_card-trail-list_pmokd_31",
+  "card-trail-list-item": "_card-trail-list-item_pmokd_43",
+  pointer: q
+}, Y = D((g, B) => {
+  const {
+    cardClassName: k,
+    cardTrailClassName: N,
+    cardTrailHeaderClassName: b,
+    cardTrailListClassName: S,
+    cardTrailMergedButtonClassName: E,
+    children: d,
+    title: m,
+    spaceBetween: s = R,
+    scrollStep: h = j,
+    mergedButtonProps: c,
+    scrollToCard: u = !1
+  } = g, t = I(null), [o, T] = p({
+    leftButton: !0,
+    rightButton: !1
+  }), [L, v] = p(
+    () => _(t == null ? void 0 : t.current)
+  ), y = F(t, B), A = U(() => {
+    const e = !C(t.current, "left"), r = !C(t.current, "right");
+    T({
+      leftButton: !e,
+      rightButton: !r
+    });
+  }, 300), W = (e) => () => {
+    var a;
+    if (!u)
+      return;
+    const r = (a = t == null ? void 0 : t.current) == null ? void 0 : a.querySelector(
+      `[data-active-card='${e}']`
+    );
+    r && (r == null || r.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center"
+    }));
+  }, w = () => {
+    var a;
+    if (!t.current || o.leftButton) return;
+    const e = t.current, r = ((a = e.children[0]) == null ? void 0 : a.clientWidth) ?? 0;
+    e.scrollBy({
+      left: -(r + s) * h,
+      behavior: "smooth"
+    });
+  }, M = () => {
+    var a;
+    if (!t.current || o.rightButton) return;
+    const e = t.current, r = ((a = e.children[0]) == null ? void 0 : a.clientWidth) ?? 0;
+    e.scrollBy({
+      left: (r + s) * h,
+      behavior: "smooth"
+    });
+  };
+  return x(() => {
+    v(_(t == null ? void 0 : t.current));
+  }, [d]), /* @__PURE__ */ f("section", { className: i(l["card-trail"], N), children: [
+    /* @__PURE__ */ f(
+      "header",
+      {
+        className: i(
+          l["card-trail-header"],
+          b
+        ),
+        children: [
+          m && /* @__PURE__ */ n("h3", { className: l["card-trail-header-title"], children: m }),
+          L && /* @__PURE__ */ n(
+            $,
+            {
+              buttonsWrapperClassName: i(
+                l["card-trail-header-merged-button"],
+                E
+              ),
+              buttons: [
+                {
+                  isIconButton: !0,
+                  iconName: "ArrowLeft16px",
+                  variant: "gray",
+                  onClick: w,
+                  disabled: o.leftButton,
+                  ...c == null ? void 0 : c.leftButton
+                },
+                {
+                  isIconButton: !0,
+                  iconName: "ArrowRight16px",
+                  variant: "gray",
+                  onClick: M,
+                  disabled: o.rightButton,
+                  ...c == null ? void 0 : c.rightButton
+                }
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ n(
+      "ul",
+      {
+        onScroll: A,
+        style: { gap: s },
+        className: i(l["card-trail-list"], S),
+        ref: y,
+        children: H.map(d, (e, r) => /* @__PURE__ */ n(
+          "li",
+          {
+            onClick: W(r),
+            "data-active-card": r,
+            "data-testid": `card-trail-item-${r}`,
+            className: i(
+              l["card-trail-list-item"],
+              { [l.pointer]: u },
+              k
+            ),
+            children: e
+          }
+        ))
+      }
+    )
+  ] });
+});
+export {
+  Y as CardTrail
+};

package/dist/components/CardTrail/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_SPACE_BETWEEN = 10;
+export declare const DEFAULT_SCROLL_STEP = 1;

package/dist/components/CardTrail/constants.js

@@ -0,0 +1,5 @@
+const E = 10, L = 1;
+export {
+  L as DEFAULT_SCROLL_STEP,
+  E as DEFAULT_SPACE_BETWEEN
+};

package/dist/components/CardTrail/index.d.ts

@@ -0,0 +1 @@
+export { CardTrail } from './CardTrail';

package/dist/components/CardTrail/index.js

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

package/dist/components/CardTrail/types.d.ts

@@ -0,0 +1 @@
+export type TSpaceBetween = '3xs' | '2xs' | '1xs' | 'xs' | 'xss' | 's' | '2s' | 'm' | '2m' | 'l' | '2l' | 'xl' | '1xl' | '2xl' | '2xxl' | 'xxl' | '3xl' | '4xl' | '5xl' | '4xxl' | '5xxl' | '6xl';

package/dist/components/CardTrail/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Проверяет, достигнут ли край скролла в контейнере
+ * @param container Элемент контейнера
+ * @param direction Направление проверки ('left' или 'right')
+ * @param tolerance Допустимая погрешность в пикселях (по умолчанию 1)
+ * @returns true, если скроллить дальше некуда
+ */
+export declare const isScrollAtEdge: (container: HTMLElement | null, direction: "left" | "right", tolerance?: number) => boolean;
+export declare const hasHorizontalScroll: (element: HTMLElement | null) => boolean;

package/dist/components/CardTrail/utils.js

@@ -0,0 +1,9 @@
+const c = (r, i, t = 1) => {
+  if (!r) return !0;
+  const { scrollLeft: l, scrollWidth: s, clientWidth: o } = r;
+  return i === "left" ? l <= t : l >= s - o - t;
+}, e = (r) => r ? r.scrollWidth > r.clientWidth : !1;
+export {
+  e as hasHorizontalScroll,
+  c as isScrollAtEdge
+};

package/dist/components/MergedButton/MergedButton.d.ts

@@ -10,9 +10,13 @@ type TProps = {
      * Массив кнопок,  который отрисуется в контейнере
      * */
     buttons: TButtonPropsWithoutStyles[];
+    /**
+     * Класс, применяемый к списку карточек (ul).
+     */
+    buttonsWrapperClassName?: string;
 };
 /**
  * Компонент объединенных кнопок, с округлением у первой и последней кнопки, а так же с другими variant, нежели у обычного Button.
  */
-export declare const MergedButton: import('react').MemoExoticComponent<({ buttons }: TProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const MergedButton: import('react').MemoExoticComponent<({ buttons, buttonsWrapperClassName }: TProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/components/MergedButton/MergedButton.js

@@ -1,48 +1,50 @@
 import { jsx as e } from "react/jsx-runtime";
-import { c as _ } from "../../index-DIxK0V-G.js";
-import { memo as l } from "react";
-import { EMergedButtonVariantRound as u } from "./constants.js";
-import { Button as g } from "../Button/Button.js";
-import '../../assets/MergedButton.css';const p = "_buttons_l320r_2", d = "_gray_l320r_28", B = "_white_l320r_36", I = "_transparent_l320r_44", o = {
-  buttons: p,
+import { c as s } from "../../index-DIxK0V-G.js";
+import { memo as u } from "react";
+import { EMergedButtonVariantRound as g } from "./constants.js";
+import { Button as p } from "../Button/Button.js";
+import '../../assets/MergedButton.css';const d = "_buttons_l320r_2", B = "_gray_l320r_28", I = "_white_l320r_36", f = "_transparent_l320r_44", o = {
+  buttons: d,
   "merged-button": "_merged-button_l320r_6",
-  gray: d,
-  white: B,
-  transparent: I,
+  gray: B,
+  white: I,
+  transparent: f,
   "is-icon": "_is-icon_l320r_53",
   "one-button": "_one-button_l320r_57"
-}, f = l(({ buttons: r }) => /* @__PURE__ */ e("div", { className: o.buttons, children: r.map(
-  ({
-    variant: s = u.White,
-    disabled: n,
-    className: c,
-    ...t
-  }, i) => {
-    const a = {
-      ...t,
-      isIconButton: t.isIconButton ?? !1,
-      iconName: t.isIconButton ? t.iconName : void 0,
-      leftIcon: t.isIconButton ? void 0 : t.leftIcon,
-      rightIcon: t.isIconButton ? void 0 : t.rightIcon
-    }, m = _(o["merged-button"], c, {
-      [o[s]]: !n,
-      [o.disabled]: n,
-      [o["is-icon"]]: t.isIconButton,
-      [o["one-button"]]: r.length === 1
-    });
-    return /* @__PURE__ */ e(
-      g,
-      {
-        clear: !0,
-        disabled: n,
-        className: m,
-        ...a
-      },
-      i
-    );
-  }
-) }));
-f.displayName = "MergedButton";
+}, h = u(
+  ({ buttons: r, buttonsWrapperClassName: c }) => /* @__PURE__ */ e("div", { className: s(o.buttons, c), children: r.map(
+    ({
+      variant: i = g.White,
+      disabled: n,
+      className: a,
+      ...t
+    }, m) => {
+      const _ = {
+        ...t,
+        isIconButton: t.isIconButton ?? !1,
+        iconName: t.isIconButton ? t.iconName : void 0,
+        leftIcon: t.isIconButton ? void 0 : t.leftIcon,
+        rightIcon: t.isIconButton ? void 0 : t.rightIcon
+      }, l = s(o["merged-button"], a, {
+        [o[i]]: !n,
+        [o.disabled]: n,
+        [o["is-icon"]]: t.isIconButton,
+        [o["one-button"]]: r.length === 1
+      });
+      return /* @__PURE__ */ e(
+        p,
+        {
+          clear: !0,
+          disabled: n,
+          className: l,
+          ..._
+        },
+        m
+      );
+    }
+  ) })
+);
+h.displayName = "MergedButton";
 export {
-  f as MergedButton
+  h as MergedButton
 };

package/dist/components/index.d.ts

@@ -71,3 +71,4 @@ export { EMessageShortReplyVariant, type TMessageShortReplyProps } from './Messa
 export { Table } from './Table';
 export { ESortDirection, ETableVariant, ETableDisplayMode, ETableScrollButtonVariant, ETableScrollIconName } from './Table';
 export { PromoSlider } from './PromoSlider';
+export { CardTrail } from './CardTrail';

package/dist/components/index.js

@@ -11,7 +11,7 @@ import { OtpInput as L } from "./OtpInput/OtpInput.js";
 import { RadioGroup as A } from "./RadioGroup/RadioGroup.js";
 import { DatePicker as U } from "./DatePicker/DatePicker.js";
 import { MergedButton as y } from "./MergedButton/MergedButton.js";
-import { EMergedButtonVariantRound as C } from "./MergedButton/constants.js";
+import { EMergedButtonVariantRound as D } from "./MergedButton/constants.js";
 import { AppImage as v } from "./Image/Image.js";
 import { Loader as N } from "./Loader/Loader.js";
 import { ELoaderSize as O } from "./Loader/constants.js";
@@ -36,7 +36,7 @@ import { TabTrail as bo } from "./TabTrail/TabTrail.js";
 import { ETabTrailSize as Mo } from "./TabTrail/constants.js";
 import { Pagination as Ro } from "./Pagination/Pagination.js";
 import { ToastProvider as wo } from "./Toasts/ToastsProvider.js";
-import { useToast as Do } from "./Toasts/hooks.js";
+import { useToast as Co } from "./Toasts/hooks.js";
 import { EToastPosition as Fo, EToastVariant as vo } from "./Toasts/constants.js";
 import { UploaderPhotos as No } from "./UploaderPhotos/UploaderPhotos.js";
 import { UploaderFiles as Oo } from "./UploaderFiles/UploaderFiles.js";
@@ -61,7 +61,7 @@ import { SkeletonBrick as Lr } from "./Skeleton/SkeletonBrick/SkeletonBrick.js";
 import { SkeletonText as Ar } from "./Skeleton/SkeletonText/SkeletonText.js";
 import { SkeletonCircle as Ur } from "./Skeleton/SkeletonCircle/SkeletonCircle.js";
 import { ESkeletonVariant as yr } from "./Skeleton/constants.js";
-import { Avatar as Cr } from "./Avatar/Avatar.js";
+import { Avatar as Dr } from "./Avatar/Avatar.js";
 import { EAvatarSize as vr } from "./Avatar/constants.js";
 import { MultiSelectSearch as Nr } from "./MultiSelectSearch/MultiSelectSearch.js";
 import { EMultiSelectSearchSize as Or } from "./MultiSelectSearch/constants.js";
@@ -73,13 +73,15 @@ import { EMessageShortReplyVariant as _r } from "./MessageShortReply/constants.j
 import { Table as oe } from "./Table/Table.js";
 import { ESortDirection as ee, ETableDisplayMode as te, ETableScrollButtonVariant as pe, ETableScrollIconName as ae, ETableVariant as ie } from "./Table/constants.js";
 import { PromoSlider as fe } from "./PromoSlider/PromoSlider.js";
-import { default as ne } from "./Slider/Slider.js";
-import { EProgressBarPosition as Ee } from "./Slider/constants.js";
+import { CardTrail as ne } from "./CardTrail/CardTrail.js";
+import { default as Ee } from "./Slider/Slider.js";
+import { EProgressBarPosition as se } from "./Slider/constants.js";
 export {
   go as Accordion,
   ko as AccordionItem,
-  Cr as Avatar,
+  Dr as Avatar,
   e as Button,
+  ne as CardTrail,
   lo as CheckboxMimir,
   tr as Chip,
   U as DatePicker,
@@ -108,11 +110,11 @@ export {
   Xo as ELinkSize,
   Yo as ELinkVariant,
   O as ELoaderSize,
-  C as EMergedButtonVariantRound,
+  D as EMergedButtonVariantRound,
   _r as EMessageShortReplyVariant,
   Or as EMultiSelectSearchSize,
   rr as ENotificationBadgeSize,
-  Ee as EProgressBarPosition,
+  se as EProgressBarPosition,
   xo as ESelectSearchSize,
   yr as ESkeletonVariant,
   ee as ESortDirection,
@@ -153,7 +155,7 @@ export {
   Lr as SkeletonBrick,
   Ur as SkeletonCircle,
   Ar as SkeletonText,
-  ne as Slider,
+  Ee as Slider,
   q as SliderLazy,
   _ as Steps,
   zr as Switcher,
@@ -171,5 +173,5 @@ export {
   to as Vote,
   k as getMaskedInputPhoneValue,
   P as getUnmaskedInputValue,
-  Do as useToast
+  Co as useToast
 };

package/dist/hooks/index.d.ts

@@ -5,3 +5,5 @@ export { useTimer } from './useTimer';
 export { useCopyToClipboard } from './useCopyToClipboard';
 export { useMergeRefs } from './useMergeRefs';
 export { useResizeObserver } from './useResizeObserver';
+export { useCallbackRef } from './useCallbackRef';
+export { useThrottledCallback } from './useThrottledCallback';

package/dist/hooks/index.js

@@ -1,19 +1,23 @@
 import { useMediaQuery as o } from "./useMediaQuery/useMediaQuery.js";
-import { EMediaQuery as s, EMinMediaQuery as u } from "./useMediaQuery/constants.js";
-import { useLockBodyScroll as m } from "./useLockBodyScroll/useLockBodyScroll.js";
+import { EMediaQuery as f, EMinMediaQuery as p } from "./useMediaQuery/constants.js";
+import { useLockBodyScroll as u } from "./useLockBodyScroll/useLockBodyScroll.js";
 import { useInterval as x } from "./useInterval/useInterval.js";
-import { useTimer as a } from "./useTimer/index.js";
-import { useCopyToClipboard as y } from "./useCopyToClipboard/useCopyToClipboard.js";
-import { useMergeRefs as l } from "./useMergeRefs/useMergeRefs.js";
-import { useResizeObserver as b } from "./useResizeObserver/useResizeObserver.js";
+import { useTimer as l } from "./useTimer/index.js";
+import { useCopyToClipboard as d } from "./useCopyToClipboard/useCopyToClipboard.js";
+import { useMergeRefs as M } from "./useMergeRefs/useMergeRefs.js";
+import { useResizeObserver as c } from "./useResizeObserver/useResizeObserver.js";
+import { useCallbackRef as k } from "./useCallbackRef/index.js";
+import { useThrottledCallback as R } from "./useThrottledCallback/index.js";
 export {
-  s as EMediaQuery,
-  u as EMinMediaQuery,
-  y as useCopyToClipboard,
+  f as EMediaQuery,
+  p as EMinMediaQuery,
+  k as useCallbackRef,
+  d as useCopyToClipboard,
   x as useInterval,
-  m as useLockBodyScroll,
+  u as useLockBodyScroll,
   o as useMediaQuery,
-  l as useMergeRefs,
-  b as useResizeObserver,
-  a as useTimer
+  M as useMergeRefs,
+  c as useResizeObserver,
+  R as useThrottledCallback,
+  l as useTimer
 };

package/dist/hooks/useCallbackRef/index.d.ts

@@ -0,0 +1 @@
+export declare function useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T | undefined): T;

package/dist/hooks/useCallbackRef/index.js

@@ -0,0 +1,13 @@
+import { useRef as n, useEffect as o, useMemo as f } from "react";
+function m(r) {
+  const e = n(r);
+  return o(() => {
+    e.current = r;
+  }), f(() => (...u) => {
+    var t;
+    return (t = e.current) == null ? void 0 : t.call(e, ...u);
+  }, []);
+}
+export {
+  m as useCallbackRef
+};

package/dist/hooks/useThrottledCallback/index.d.ts

@@ -0,0 +1,2 @@
+export declare function useThrottledCallbackWithClearTimeout<T extends (...args: unknown[]) => unknown>(callback: T, wait: number): readonly [(...args: Parameters<T>) => void, () => void];
+export declare function useThrottledCallback<T extends (...args: unknown[]) => unknown>(callback: T, wait: number): (...args: Parameters<T>) => void;

package/dist/hooks/useThrottledCallback/index.js

@@ -0,0 +1,27 @@
+import { useRef as c, useCallback as i, useEffect as T } from "react";
+import { useCallbackRef as b } from "../useCallbackRef/index.js";
+function k(u, e) {
+  const f = b(u), r = c(null), m = c(null), l = c(!0), o = c(e), s = c(-1), d = () => window.clearTimeout(s.current), n = i(
+    (...t) => {
+      f(...t), r.current = t, m.current = t, l.current = !1;
+    },
+    [f]
+  ), a = i(() => {
+    r.current && r.current !== m.current ? (n(...r.current), s.current = window.setTimeout(a, o.current)) : l.current = !0;
+  }, [n]), C = i(
+    (...t) => {
+      l.current ? (n(...t), s.current = window.setTimeout(a, o.current)) : r.current = t;
+    },
+    [n, a]
+  );
+  return T(() => {
+    o.current = e;
+  }, [e]), [C, d];
+}
+function w(u, e) {
+  return k(u, e)[0];
+}
+export {
+  w as useThrottledCallback,
+  k as useThrottledCallbackWithClearTimeout
+};

package/dist/index.js

@@ -1,15 +1,15 @@
 import { Button as e } from "./components/Button/Button.js";
 import { EButtonForm as p, EButtonSize as a, EButtonVariantBorderless as m, EButtonVariantDefault as i, EButtonVariantOutline as f, EButtonVariantRound as x } from "./components/Button/constants.js";
 import { I as l } from "./Input-DAmc_HxO.js";
-import { EInputSize as E, EInputStatus as S, EInputVariant as u } from "./components/Input/constants.js";
+import { EInputSize as u, EInputStatus as E, EInputVariant as S } from "./components/Input/constants.js";
 import { TextArea as c } from "./components/TextArea/TextArea.js";
 import { ETextAreaInputSize as I } from "./components/TextArea/constants.js";
 import { InputPassword as V } from "./components/InputPassword/InputPassword.js";
-import { InputPhoneNumber as B } from "./components/InputPhoneNumber/InputPhoneNumber.js";
-import { getMaskedInputPhoneValue as k, getUnmaskedInputValue as P } from "./components/InputPhoneNumber/utils.js";
-import { OtpInput as b } from "./components/OtpInput/OtpInput.js";
-import { RadioGroup as L } from "./components/RadioGroup/RadioGroup.js";
-import { DatePicker as A } from "./components/DatePicker/DatePicker.js";
+import { InputPhoneNumber as z } from "./components/InputPhoneNumber/InputPhoneNumber.js";
+import { getMaskedInputPhoneValue as B, getUnmaskedInputValue as P } from "./components/InputPhoneNumber/utils.js";
+import { OtpInput as M } from "./components/OtpInput/OtpInput.js";
+import { RadioGroup as C } from "./components/RadioGroup/RadioGroup.js";
+import { DatePicker as L } from "./components/DatePicker/DatePicker.js";
 import { MergedButton as D } from "./components/MergedButton/MergedButton.js";
 import { EMergedButtonVariantRound as w } from "./components/MergedButton/constants.js";
 import { AppImage as F } from "./components/Image/Image.js";
@@ -20,179 +20,185 @@ import { Drawer as H } from "./components/Drawer/Drawer.js";
 import { EDrawerPosition as K } from "./components/Drawer/constants.js";
 import { Dropdown as X } from "./components/Dropdown/Dropdown.js";
 import { Steps as _ } from "./components/Steps/Steps.js";
-import { EStepColor as oo, EStepsSize as ro } from "./components/Steps/constants.js";
-import { Vote as to } from "./components/Vote/Vote.js";
-import { EVoteSize as ao } from "./components/Vote/constants.js";
-import { SelectSearch as io } from "./components/SelectSearch/SelectSearch.js";
-import { ESelectSearchSize as xo } from "./components/SelectSearch/constants.js";
-import { CheckboxMimir as lo } from "./components/CheckboxMimir/CheckboxMimir.js";
-import { Tag as Eo } from "./components/Tag/Tag.js";
-import { ETagSize as uo, ETagType as co } from "./components/Tag/constants.js";
-import { Timer as Io } from "./components/Timer/Timer.js";
-import { Accordion as Vo } from "./components/Accordion/Accordion.js";
-import { EAccordionSize as Bo } from "./components/Accordion/constants.js";
-import { AccordionItem as ko } from "./components/Accordion/AccordionItem/AccordionItem.js";
-import { TabTrail as Mo } from "./components/TabTrail/TabTrail.js";
-import { ETabTrailSize as yo } from "./components/TabTrail/constants.js";
-import { Pagination as Ro } from "./components/Pagination/Pagination.js";
-import { ToastProvider as Co } from "./components/Toasts/ToastsProvider.js";
-import { useToast as Uo } from "./components/Toasts/hooks.js";
-import { EToastPosition as vo, EToastVariant as Fo } from "./components/Toasts/constants.js";
-import { UploaderPhotos as No } from "./components/UploaderPhotos/UploaderPhotos.js";
-import { UploaderFiles as Qo } from "./components/UploaderFiles/UploaderFiles.js";
-import { EUploaderFilesVariant as jo } from "./components/UploaderFiles/constants.js";
-import { Uploader as Ho } from "./components/Uploader/Uploader.js";
-import { Link as Ko } from "./components/AnchorLink/Link.js";
-import { ELinkSize as Xo, ELinkVariant as Yo } from "./components/AnchorLink/constants.js";
-import { NotificationBadge as $o } from "./components/NotificationBadge/NotificationBadge.js";
-import { ENotificationBadgeSize as rr } from "./components/NotificationBadge/constants.js";
-import { Chip as tr } from "./components/Chip/Chip.js";
-import { EChipSize as ar, EChipVariant as mr } from "./components/Chip/constants.js";
-import { UniversalUploader as fr } from "./components/UniversalUploader/UniversalUploader.js";
-import { EUploaderType as nr } from "./components/UniversalUploader/constants.js";
-import { InputRangeSlider as sr } from "./components/InputRangeSlider/InputRangeSlider.js";
-import { EInputRangeSliderBorderState as Sr, EInputRangeSliderPositions as ur } from "./components/InputRangeSlider/constants.js";
-import { GosZnak as cr } from "./components/GosZnak/GosZnak.js";
-import { EGosZnakSize as Ir, EGosZnakType as gr } from "./components/GosZnak/constants.js";
-import { Switcher as zr } from "./components/Switcher/Switcher.js";
-import { ELabelPositions as hr } from "./components/Switcher/constants.js";
-import { TwinSwitcher as Pr } from "./components/TwinSwitcher/TwinSwitcher.js";
-import { SkeletonBrick as br } from "./components/Skeleton/SkeletonBrick/SkeletonBrick.js";
-import { SkeletonText as Lr } from "./components/Skeleton/SkeletonText/SkeletonText.js";
-import { SkeletonCircle as Ar } from "./components/Skeleton/SkeletonCircle/SkeletonCircle.js";
-import { ESkeletonVariant as Dr } from "./components/Skeleton/constants.js";
-import { Avatar as wr } from "./components/Avatar/Avatar.js";
-import { EAvatarSize as Fr } from "./components/Avatar/constants.js";
-import { MultiSelectSearch as Nr } from "./components/MultiSelectSearch/MultiSelectSearch.js";
-import { EMultiSelectSearchSize as Qr } from "./components/MultiSelectSearch/constants.js";
-import { ListFiles as jr } from "./components/ListFiles/ListFiles.js";
-import { EFileItemVariant as Hr } from "./components/ListFiles/constants.js";
-import { ListPhotos as Kr } from "./components/ListPhotos/ListPhotos.js";
-import { MessageShortReply as Xr } from "./components/MessageShortReply/MessageShortReply.js";
-import { EMessageShortReplyVariant as _r } from "./components/MessageShortReply/constants.js";
-import { Table as oe } from "./components/Table/Table.js";
+import { EStepColor as rr, EStepsSize as or } from "./components/Steps/constants.js";
+import { Vote as tr } from "./components/Vote/Vote.js";
+import { EVoteSize as ar } from "./components/Vote/constants.js";
+import { SelectSearch as ir } from "./components/SelectSearch/SelectSearch.js";
+import { ESelectSearchSize as xr } from "./components/SelectSearch/constants.js";
+import { CheckboxMimir as lr } from "./components/CheckboxMimir/CheckboxMimir.js";
+import { Tag as ur } from "./components/Tag/Tag.js";
+import { ETagSize as Sr, ETagType as dr } from "./components/Tag/constants.js";
+import { Timer as Tr } from "./components/Timer/Timer.js";
+import { Accordion as gr } from "./components/Accordion/Accordion.js";
+import { EAccordionSize as kr } from "./components/Accordion/constants.js";
+import { AccordionItem as hr } from "./components/Accordion/AccordionItem/AccordionItem.js";
+import { TabTrail as Pr } from "./components/TabTrail/TabTrail.js";
+import { ETabTrailSize as Mr } from "./components/TabTrail/constants.js";
+import { Pagination as Cr } from "./components/Pagination/Pagination.js";
+import { ToastProvider as Lr } from "./components/Toasts/ToastsProvider.js";
+import { useToast as Dr } from "./components/Toasts/hooks.js";
+import { EToastPosition as wr, EToastVariant as vr } from "./components/Toasts/constants.js";
+import { UploaderPhotos as Gr } from "./components/UploaderPhotos/UploaderPhotos.js";
+import { UploaderFiles as Or } from "./components/UploaderFiles/UploaderFiles.js";
+import { EUploaderFilesVariant as Zr } from "./components/UploaderFiles/constants.js";
+import { Uploader as qr } from "./components/Uploader/Uploader.js";
+import { Link as Jr } from "./components/AnchorLink/Link.js";
+import { ELinkSize as Wr, ELinkVariant as Xr } from "./components/AnchorLink/constants.js";
+import { NotificationBadge as _r } from "./components/NotificationBadge/NotificationBadge.js";
+import { ENotificationBadgeSize as ro } from "./components/NotificationBadge/constants.js";
+import { Chip as eo } from "./components/Chip/Chip.js";
+import { EChipSize as po, EChipVariant as ao } from "./components/Chip/constants.js";
+import { UniversalUploader as io } from "./components/UniversalUploader/UniversalUploader.js";
+import { EUploaderType as xo } from "./components/UniversalUploader/constants.js";
+import { InputRangeSlider as lo } from "./components/InputRangeSlider/InputRangeSlider.js";
+import { EInputRangeSliderBorderState as uo, EInputRangeSliderPositions as Eo } from "./components/InputRangeSlider/constants.js";
+import { GosZnak as co } from "./components/GosZnak/GosZnak.js";
+import { EGosZnakSize as Io, EGosZnakType as go } from "./components/GosZnak/constants.js";
+import { Switcher as ko } from "./components/Switcher/Switcher.js";
+import { ELabelPositions as ho } from "./components/Switcher/constants.js";
+import { TwinSwitcher as Po } from "./components/TwinSwitcher/TwinSwitcher.js";
+import { SkeletonBrick as Mo } from "./components/Skeleton/SkeletonBrick/SkeletonBrick.js";
+import { SkeletonText as Co } from "./components/Skeleton/SkeletonText/SkeletonText.js";
+import { SkeletonCircle as Lo } from "./components/Skeleton/SkeletonCircle/SkeletonCircle.js";
+import { ESkeletonVariant as Do } from "./components/Skeleton/constants.js";
+import { Avatar as wo } from "./components/Avatar/Avatar.js";
+import { EAvatarSize as Fo } from "./components/Avatar/constants.js";
+import { MultiSelectSearch as No } from "./components/MultiSelectSearch/MultiSelectSearch.js";
+import { EMultiSelectSearchSize as Qo } from "./components/MultiSelectSearch/constants.js";
+import { ListFiles as jo } from "./components/ListFiles/ListFiles.js";
+import { EFileItemVariant as Ho } from "./components/ListFiles/constants.js";
+import { ListPhotos as Ko } from "./components/ListPhotos/ListPhotos.js";
+import { MessageShortReply as Xo } from "./components/MessageShortReply/MessageShortReply.js";
+import { EMessageShortReplyVariant as _o } from "./components/MessageShortReply/constants.js";
+import { Table as re } from "./components/Table/Table.js";
 import { ESortDirection as ee, ETableDisplayMode as te, ETableScrollButtonVariant as pe, ETableScrollIconName as ae, ETableVariant as me } from "./components/Table/constants.js";
 import { PromoSlider as fe } from "./components/PromoSlider/PromoSlider.js";
-import { useMediaQuery as ne } from "./hooks/useMediaQuery/useMediaQuery.js";
-import { EMediaQuery as se, EMinMediaQuery as Ee } from "./hooks/useMediaQuery/constants.js";
-import { useLockBodyScroll as ue } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
-import { useInterval as ce } from "./hooks/useInterval/useInterval.js";
-import { useTimer as Ie } from "./hooks/useTimer/index.js";
-import { useCopyToClipboard as Ve } from "./hooks/useCopyToClipboard/useCopyToClipboard.js";
+import { CardTrail as ne } from "./components/CardTrail/CardTrail.js";
+import { useMediaQuery as se } from "./hooks/useMediaQuery/useMediaQuery.js";
+import { EMediaQuery as Ee, EMinMediaQuery as Se } from "./hooks/useMediaQuery/constants.js";
+import { useLockBodyScroll as ce } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
+import { useInterval as Ie } from "./hooks/useInterval/useInterval.js";
+import { useTimer as Ve } from "./hooks/useTimer/index.js";
+import { useCopyToClipboard as ze } from "./hooks/useCopyToClipboard/useCopyToClipboard.js";
 import { useMergeRefs as Be } from "./hooks/useMergeRefs/useMergeRefs.js";
-import { useResizeObserver as ke } from "./hooks/useResizeObserver/useResizeObserver.js";
-import { Icon as Me } from "./icons/Icon.js";
-import { formating as ye } from "./utils/index.js";
-import { default as Re } from "./components/Slider/Slider.js";
-import { EProgressBarPosition as Ce } from "./components/Slider/constants.js";
-import { parseDate as Ue } from "./utils/formating/Date.js";
+import { useResizeObserver as be } from "./hooks/useResizeObserver/useResizeObserver.js";
+import { useCallbackRef as ye } from "./hooks/useCallbackRef/index.js";
+import { useThrottledCallback as Re } from "./hooks/useThrottledCallback/index.js";
+import { Icon as Ae } from "./icons/Icon.js";
+import { formating as Ue } from "./utils/index.js";
+import { default as ve } from "./components/Slider/Slider.js";
+import { EProgressBarPosition as Ge } from "./components/Slider/constants.js";
+import { parseDate as Oe } from "./utils/formating/Date.js";
 import './assets/index.css';export {
-  Vo as Accordion,
-  ko as AccordionItem,
-  wr as Avatar,
+  gr as Accordion,
+  hr as AccordionItem,
+  wo as Avatar,
   e as Button,
-  lo as CheckboxMimir,
-  tr as Chip,
-  A as DatePicker,
+  ne as CardTrail,
+  lr as CheckboxMimir,
+  eo as Chip,
+  L as DatePicker,
   H as Drawer,
   X as Dropdown,
-  Bo as EAccordionSize,
-  Fr as EAvatarSize,
+  kr as EAccordionSize,
+  Fo as EAvatarSize,
   p as EButtonForm,
   a as EButtonSize,
   m as EButtonVariantBorderless,
   i as EButtonVariantDefault,
   f as EButtonVariantOutline,
   x as EButtonVariantRound,
-  ar as EChipSize,
-  mr as EChipVariant,
+  po as EChipSize,
+  ao as EChipVariant,
   K as EDrawerPosition,
-  Hr as EFileItemVariant,
-  Ir as EGosZnakSize,
-  gr as EGosZnakType,
-  Sr as EInputRangeSliderBorderState,
-  ur as EInputRangeSliderPositions,
-  E as EInputSize,
-  S as EInputStatus,
-  u as EInputVariant,
-  hr as ELabelPositions,
-  Xo as ELinkSize,
-  Yo as ELinkVariant,
+  Ho as EFileItemVariant,
+  Io as EGosZnakSize,
+  go as EGosZnakType,
+  uo as EInputRangeSliderBorderState,
+  Eo as EInputRangeSliderPositions,
+  u as EInputSize,
+  E as EInputStatus,
+  S as EInputVariant,
+  ho as ELabelPositions,
+  Wr as ELinkSize,
+  Xr as ELinkVariant,
   Q as ELoaderSize,
-  se as EMediaQuery,
+  Ee as EMediaQuery,
   w as EMergedButtonVariantRound,
-  _r as EMessageShortReplyVariant,
-  Ee as EMinMediaQuery,
-  Qr as EMultiSelectSearchSize,
-  rr as ENotificationBadgeSize,
-  Ce as EProgressBarPosition,
-  xo as ESelectSearchSize,
-  Dr as ESkeletonVariant,
+  _o as EMessageShortReplyVariant,
+  Se as EMinMediaQuery,
+  Qo as EMultiSelectSearchSize,
+  ro as ENotificationBadgeSize,
+  Ge as EProgressBarPosition,
+  xr as ESelectSearchSize,
+  Do as ESkeletonVariant,
   ee as ESortDirection,
-  oo as EStepColor,
-  ro as EStepsSize,
-  yo as ETabTrailSize,
+  rr as EStepColor,
+  or as EStepsSize,
+  Mr as ETabTrailSize,
   te as ETableDisplayMode,
   pe as ETableScrollButtonVariant,
   ae as ETableScrollIconName,
   me as ETableVariant,
-  uo as ETagSize,
-  co as ETagType,
+  Sr as ETagSize,
+  dr as ETagType,
   I as ETextAreaInputSize,
-  vo as EToastPosition,
-  Fo as EToastVariant,
-  jo as EUploaderFilesVariant,
-  nr as EUploaderType,
-  ao as EVoteSize,
-  cr as GosZnak,
-  Me as Icon,
+  wr as EToastPosition,
+  vr as EToastVariant,
+  Zr as EUploaderFilesVariant,
+  xo as EUploaderType,
+  ar as EVoteSize,
+  co as GosZnak,
+  Ae as Icon,
   F as Image,
   l as Input,
   V as InputPassword,
-  B as InputPhoneNumber,
-  sr as InputRangeSlider,
-  Ko as Link,
-  jr as ListFiles,
-  Kr as ListPhotos,
+  z as InputPhoneNumber,
+  lo as InputRangeSlider,
+  Jr as Link,
+  jo as ListFiles,
+  Ko as ListPhotos,
   N as Loader,
   D as MergedButton,
-  Xr as MessageShortReply,
-  Nr as MultiSelectSearch,
-  $o as NotificationBadge,
-  b as OtpInput,
-  Ro as Pagination,
+  Xo as MessageShortReply,
+  No as MultiSelectSearch,
+  _r as NotificationBadge,
+  M as OtpInput,
+  Cr as Pagination,
   fe as PromoSlider,
-  L as RadioGroup,
-  io as SelectSearch,
-  br as SkeletonBrick,
-  Ar as SkeletonCircle,
-  Lr as SkeletonText,
-  Re as Slider,
+  C as RadioGroup,
+  ir as SelectSearch,
+  Mo as SkeletonBrick,
+  Lo as SkeletonCircle,
+  Co as SkeletonText,
+  ve as Slider,
   j as SliderLazy,
   _ as Steps,
-  zr as Switcher,
-  Mo as TabTrail,
-  oe as Table,
-  Eo as Tag,
+  ko as Switcher,
+  Pr as TabTrail,
+  re as Table,
+  ur as Tag,
   c as TextArea,
-  Io as Timer,
-  Co as ToastProvider,
-  Pr as TwinSwitcher,
-  fr as UniversalUploader,
-  Ho as Uploader,
-  Qo as UploaderFiles,
-  No as UploaderPhotos,
-  to as Vote,
-  ye as formating,
-  k as getMaskedInputPhoneValue,
+  Tr as Timer,
+  Lr as ToastProvider,
+  Po as TwinSwitcher,
+  io as UniversalUploader,
+  qr as Uploader,
+  Or as UploaderFiles,
+  Gr as UploaderPhotos,
+  tr as Vote,
+  Ue as formating,
+  B as getMaskedInputPhoneValue,
   P as getUnmaskedInputValue,
-  Ue as parseDate,
-  Ve as useCopyToClipboard,
-  ce as useInterval,
-  ue as useLockBodyScroll,
-  ne as useMediaQuery,
+  Oe as parseDate,
+  ye as useCallbackRef,
+  ze as useCopyToClipboard,
+  Ie as useInterval,
+  ce as useLockBodyScroll,
+  se as useMediaQuery,
   Be as useMergeRefs,
-  ke as useResizeObserver,
-  Ie as useTimer,
-  Uo as useToast
+  be as useResizeObserver,
+  Re as useThrottledCallback,
+  Ve as useTimer,
+  Dr as useToast
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.40.0",
+  "version": "1.41.1",
   "type": "module",
   "exports": {
     ".": {