mimir-ui-kit 1.38.24 → 1.38.25

package/dist/components/TabTrail/TabTrail.d.ts

@@ -44,5 +44,9 @@ export type TTabTrailProps = {
      * Вариант кнопок навигации
      */
     buttonsVariant?: ETabTrailButtonVariant | `${ETabTrailButtonVariant}`;
+    /**
+     * Автоматически показывать кнопки навигации при переполнении
+     */
+    autoShowButtons?: boolean;
 };
 export declare const TabTrail: import('react').ForwardRefExoticComponent<TTabTrailProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/TabTrail/TabTrail.js

@@ -1,284 +1,295 @@
-import { jsxs as Y, jsx as k } from "react/jsx-runtime";
+import { jsxs as Q, jsx as A } from "react/jsx-runtime";
 import { c as Ee } from "../../index-DIxK0V-G.js";
-import * as M from "react";
-import R, { useRef as U, useState as Q, createContext as oe, useReducer as ye, useMemo as S, useId as ie, useContext as ue, forwardRef as ke, useEffect as le } from "react";
-import { ETabTrailSize as Ae } from "./constants.js";
-import { TabButtons as Se } from "./TabButtons/TabButtons.js";
+import * as O from "react";
+import L, { useRef as G, useState as K, createContext as oe, useReducer as ke, useMemo as D, useId as ie, useContext as ue, forwardRef as ye, useEffect as X } from "react";
+import { ETabTrailSize as Se } from "./constants.js";
+import { TabButtons as Ae } from "./TabButtons/TabButtons.js";
 import { ETabTrailButtonVariant as Fe } from "./TabButtons/constants.js";
 import { NotificationBadge as De } from "../NotificationBadge/NotificationBadge.js";
-import { n as W, M as se, W as V, s as j, y as q, o as A, H as z, $ as ce, b as Ne, D as de, a as G, u as Re, c as T, t as Me } from "../../keyboard-B0lm_zyn.js";
-import { w as Ce } from "../../use-active-press-86hajhdd.js";
-import { e as Le } from "../../use-resolve-button-type-DhFdPxnv.js";
-import { T as pe, s as Oe } from "../../hidden-DbgtYPOH.js";
-import { _ as B, T as J, P as N, F as I } from "../../focus-management-DE4t_lW3.js";
+import { n as z, M as le, W as U, s as j, y as V, o as F, H as q, $ as ce, b as Ne, D as de, a as W, u as Re, c as P, t as Le } from "../../keyboard-B0lm_zyn.js";
+import { w as Oe } from "../../use-active-press-86hajhdd.js";
+import { e as Me } from "../../use-resolve-button-type-DhFdPxnv.js";
+import { T as fe, s as Ce } from "../../hidden-DbgtYPOH.js";
+import { _ as B, T as J, P as R, F as w } from "../../focus-management-DE4t_lW3.js";
 import '../../assets/TabTrail.css';function Be() {
-  let e = U(!1);
-  return W(() => (e.current = !0, () => {
+  let e = G(!1);
+  return z(() => (e.current = !0, () => {
     e.current = !1;
   }), []), e;
 }
-function Ge({ onFocus: e }) {
-  let [t, n] = Q(!0), r = Be();
-  return t ? R.createElement(pe, { as: "button", type: "button", features: Oe.Focusable, onFocus: (l) => {
-    l.preventDefault();
-    let s, o = 50;
-    function d() {
+function We({ onFocus: e }) {
+  let [t, n] = K(!0), r = Be();
+  return t ? L.createElement(fe, { as: "button", type: "button", features: Ce.Focusable, onFocus: (s) => {
+    s.preventDefault();
+    let l, o = 50;
+    function b() {
       if (o-- <= 0) {
-        s && cancelAnimationFrame(s);
+        l && cancelAnimationFrame(l);
         return;
       }
       if (e()) {
-        if (cancelAnimationFrame(s), !r.current) return;
+        if (cancelAnimationFrame(l), !r.current) return;
         n(!1);
         return;
       }
-      s = requestAnimationFrame(d);
+      l = requestAnimationFrame(b);
     }
-    s = requestAnimationFrame(d);
+    l = requestAnimationFrame(b);
   } }) : null;
 }
-const fe = M.createContext(null);
-function Ue() {
+const pe = O.createContext(null);
+function Ge() {
   return { groups: /* @__PURE__ */ new Map(), get(e, t) {
     var n;
     let r = this.groups.get(e);
     r || (r = /* @__PURE__ */ new Map(), this.groups.set(e, r));
-    let l = (n = r.get(t)) != null ? n : 0;
-    r.set(t, l + 1);
-    let s = Array.from(r.keys()).indexOf(t);
+    let s = (n = r.get(t)) != null ? n : 0;
+    r.set(t, s + 1);
+    let l = Array.from(r.keys()).indexOf(t);
     function o() {
-      let d = r.get(t);
-      d > 1 ? r.set(t, d - 1) : r.delete(t);
+      let b = r.get(t);
+      b > 1 ? r.set(t, b - 1) : r.delete(t);
     }
-    return [s, o];
+    return [l, o];
   } };
 }
-function We({ children: e }) {
-  let t = M.useRef(Ue());
-  return M.createElement(fe.Provider, { value: t }, e);
+function ze({ children: e }) {
+  let t = O.useRef(Ge());
+  return O.createElement(pe.Provider, { value: t }, e);
 }
 function be(e) {
-  let t = M.useContext(fe);
+  let t = O.useContext(pe);
   if (!t) throw new Error("You must wrap your component in a <StableCollection>");
-  let n = M.useId(), [r, l] = t.current.get(e, n);
-  return M.useEffect(() => l, []), r;
+  let n = O.useId(), [r, s] = t.current.get(e, n);
+  return O.useEffect(() => s, []), r;
 }
-var Ve = ((e) => (e[e.Forwards = 0] = "Forwards", e[e.Backwards = 1] = "Backwards", e))(Ve || {}), qe = ((e) => (e[e.Less = -1] = "Less", e[e.Equal = 0] = "Equal", e[e.Greater = 1] = "Greater", e))(qe || {}), ze = ((e) => (e[e.SetSelectedIndex = 0] = "SetSelectedIndex", e[e.RegisterTab = 1] = "RegisterTab", e[e.UnregisterTab = 2] = "UnregisterTab", e[e.RegisterPanel = 3] = "RegisterPanel", e[e.UnregisterPanel = 4] = "UnregisterPanel", e))(ze || {});
+var Ue = ((e) => (e[e.Forwards = 0] = "Forwards", e[e.Backwards = 1] = "Backwards", e))(Ue || {}), Ve = ((e) => (e[e.Less = -1] = "Less", e[e.Equal = 0] = "Equal", e[e.Greater = 1] = "Greater", e))(Ve || {}), qe = ((e) => (e[e.SetSelectedIndex = 0] = "SetSelectedIndex", e[e.RegisterTab = 1] = "RegisterTab", e[e.UnregisterTab = 2] = "UnregisterTab", e[e.RegisterPanel = 3] = "RegisterPanel", e[e.UnregisterPanel = 4] = "UnregisterPanel", e))(qe || {});
 let He = { 0(e, t) {
   var n;
-  let r = B(e.tabs, (u) => u.current), l = B(e.panels, (u) => u.current), s = r.filter((u) => {
-    var m;
-    return !((m = u.current) != null && m.hasAttribute("disabled"));
-  }), o = { ...e, tabs: r, panels: l };
+  let r = B(e.tabs, (d) => d.current), s = B(e.panels, (d) => d.current), l = r.filter((d) => {
+    var v;
+    return !((v = d.current) != null && v.hasAttribute("disabled"));
+  }), o = { ...e, tabs: r, panels: s };
   if (t.index < 0 || t.index > r.length - 1) {
-    let u = G(Math.sign(t.index - e.selectedIndex), { [-1]: () => 1, 0: () => G(Math.sign(t.index), { [-1]: () => 0, 0: () => 0, 1: () => 1 }), 1: () => 0 });
-    if (s.length === 0) return o;
-    let m = G(u, { 0: () => r.indexOf(s[0]), 1: () => r.indexOf(s[s.length - 1]) });
-    return { ...o, selectedIndex: m === -1 ? e.selectedIndex : m };
+    let d = W(Math.sign(t.index - e.selectedIndex), { [-1]: () => 1, 0: () => W(Math.sign(t.index), { [-1]: () => 0, 0: () => 0, 1: () => 1 }), 1: () => 0 });
+    if (l.length === 0) return o;
+    let v = W(d, { 0: () => r.indexOf(l[0]), 1: () => r.indexOf(l[l.length - 1]) });
+    return { ...o, selectedIndex: v === -1 ? e.selectedIndex : v };
   }
-  let d = r.slice(0, t.index), p = [...r.slice(t.index), ...d].find((u) => s.includes(u));
-  if (!p) return o;
-  let b = (n = r.indexOf(p)) != null ? n : e.selectedIndex;
-  return b === -1 && (b = e.selectedIndex), { ...o, selectedIndex: b };
+  let b = r.slice(0, t.index), x = [...r.slice(t.index), ...b].find((d) => l.includes(d));
+  if (!x) return o;
+  let i = (n = r.indexOf(x)) != null ? n : e.selectedIndex;
+  return i === -1 && (i = e.selectedIndex), { ...o, selectedIndex: i };
 }, 1(e, t) {
   if (e.tabs.includes(t.tab)) return e;
-  let n = e.tabs[e.selectedIndex], r = B([...e.tabs, t.tab], (s) => s.current), l = e.selectedIndex;
-  return e.info.current.isControlled || (l = r.indexOf(n), l === -1 && (l = e.selectedIndex)), { ...e, tabs: r, selectedIndex: l };
+  let n = e.tabs[e.selectedIndex], r = B([...e.tabs, t.tab], (l) => l.current), s = e.selectedIndex;
+  return e.info.current.isControlled || (s = r.indexOf(n), s === -1 && (s = e.selectedIndex)), { ...e, tabs: r, selectedIndex: s };
 }, 2(e, t) {
   return { ...e, tabs: e.tabs.filter((n) => n !== t.tab) };
 }, 3(e, t) {
   return e.panels.includes(t.panel) ? e : { ...e, panels: B([...e.panels, t.panel], (n) => n.current) };
 }, 4(e, t) {
   return { ...e, panels: e.panels.filter((n) => n !== t.panel) };
-} }, X = oe(null);
-X.displayName = "TabsDataContext";
-function C(e) {
-  let t = ue(X);
+} }, Z = oe(null);
+Z.displayName = "TabsDataContext";
+function M(e) {
+  let t = ue(Z);
   if (t === null) {
     let n = new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);
-    throw Error.captureStackTrace && Error.captureStackTrace(n, C), n;
+    throw Error.captureStackTrace && Error.captureStackTrace(n, M), n;
   }
   return t;
 }
-let Z = oe(null);
-Z.displayName = "TabsActionsContext";
-function ee(e) {
-  let t = ue(Z);
+let ee = oe(null);
+ee.displayName = "TabsActionsContext";
+function te(e) {
+  let t = ue(ee);
   if (t === null) {
     let n = new Error(`<${e} /> is missing a parent <Tab.Group /> component.`);
-    throw Error.captureStackTrace && Error.captureStackTrace(n, ee), n;
+    throw Error.captureStackTrace && Error.captureStackTrace(n, te), n;
   }
   return t;
 }
 function je(e, t) {
-  return G(t.type, He, e, t);
+  return W(t.type, He, e, t);
 }
 let Je = "div";
 function Ke(e, t) {
-  let { defaultIndex: n = 0, vertical: r = !1, manual: l = !1, onChange: s, selectedIndex: o = null, ...d } = e;
-  const p = r ? "vertical" : "horizontal", b = l ? "manual" : "auto";
-  let u = o !== null, m = j({ isControlled: u }), $ = q(t), [f, a] = ye(je, { info: m, selectedIndex: o ?? n, tabs: [], panels: [] }), v = S(() => ({ selectedIndex: f.selectedIndex }), [f.selectedIndex]), w = j(s || (() => {
-  })), E = j(f.tabs), x = S(() => ({ orientation: p, activation: b, ...f }), [p, b, f]), F = A((c) => (a({ type: 1, tab: c }), () => a({ type: 2, tab: c }))), L = A((c) => (a({ type: 3, panel: c }), () => a({ type: 4, panel: c }))), g = A((c) => {
-    h.current !== c && w.current(c), u || a({ type: 0, index: c });
-  }), h = j(u ? e.selectedIndex : f.selectedIndex), O = S(() => ({ registerTab: F, registerPanel: L, change: g }), []);
-  W(() => {
-    a({ type: 0, index: o ?? n });
-  }, [o]), W(() => {
-    if (h.current === void 0 || f.tabs.length <= 0) return;
-    let c = B(f.tabs, (y) => y.current);
-    c.some((y, D) => f.tabs[D] !== y) && g(c.indexOf(f.tabs[h.current]));
+  let { defaultIndex: n = 0, vertical: r = !1, manual: s = !1, onChange: l, selectedIndex: o = null, ...b } = e;
+  const x = r ? "vertical" : "horizontal", i = s ? "manual" : "auto";
+  let d = o !== null, v = j({ isControlled: d }), E = V(t), [f, u] = ke(je, { info: v, selectedIndex: o ?? n, tabs: [], panels: [] }), y = D(() => ({ selectedIndex: f.selectedIndex }), [f.selectedIndex]), S = j(l || (() => {
+  })), T = j(f.tabs), a = D(() => ({ orientation: x, activation: i, ...f }), [x, i, f]), m = F((p) => (u({ type: 1, tab: p }), () => u({ type: 2, tab: p }))), I = F((p) => (u({ type: 3, panel: p }), () => u({ type: 4, panel: p }))), h = F((p) => {
+    g.current !== p && S.current(p), d || u({ type: 0, index: p });
+  }), g = j(d ? e.selectedIndex : f.selectedIndex), C = D(() => ({ registerTab: m, registerPanel: I, change: h }), []);
+  z(() => {
+    u({ type: 0, index: o ?? n });
+  }, [o]), z(() => {
+    if (g.current === void 0 || f.tabs.length <= 0) return;
+    let p = B(f.tabs, (k) => k.current);
+    p.some((k, N) => f.tabs[N] !== k) && h(p.indexOf(f.tabs[g.current]));
   });
-  let K = { ref: $ };
-  return R.createElement(We, null, R.createElement(Z.Provider, { value: O }, R.createElement(X.Provider, { value: x }, x.tabs.length <= 0 && R.createElement(Ge, { onFocus: () => {
-    var c, y;
-    for (let D of E.current) if (((c = D.current) == null ? void 0 : c.tabIndex) === 0) return (y = D.current) == null || y.focus(), !0;
+  let Y = { ref: E };
+  return L.createElement(ze, null, L.createElement(ee.Provider, { value: C }, L.createElement(Z.Provider, { value: a }, a.tabs.length <= 0 && L.createElement(We, { onFocus: () => {
+    var p, k;
+    for (let N of T.current) if (((p = N.current) == null ? void 0 : p.tabIndex) === 0) return (k = N.current) == null || k.focus(), !0;
     return !1;
-  } }), z({ ourProps: K, theirProps: d, slot: v, defaultTag: Je, name: "Tabs" }))));
+  } }), q({ ourProps: Y, theirProps: b, slot: y, defaultTag: Je, name: "Tabs" }))));
 }
 let Ye = "div";
 function Qe(e, t) {
-  let { orientation: n, selectedIndex: r } = C("Tab.List"), l = q(t), s = S(() => ({ selectedIndex: r }), [r]);
-  return z({ ourProps: { ref: l, role: "tablist", "aria-orientation": n }, theirProps: e, slot: s, defaultTag: Ye, name: "Tabs.List" });
+  let { orientation: n, selectedIndex: r } = M("Tab.List"), s = V(t), l = D(() => ({ selectedIndex: r }), [r]);
+  return q({ ourProps: { ref: s, role: "tablist", "aria-orientation": n }, theirProps: e, slot: l, defaultTag: Ye, name: "Tabs.List" });
 }
 let Xe = "button";
 function Ze(e, t) {
   var n, r;
-  let l = ie(), { id: s = `headlessui-tabs-tab-${l}`, disabled: o = !1, autoFocus: d = !1, ...p } = e, { orientation: b, activation: u, selectedIndex: m, tabs: $, panels: f } = C("Tab"), a = ee("Tab"), v = C("Tab"), [w, E] = Q(null), x = U(null), F = q(x, t, E);
-  W(() => a.registerTab(x), [a, x]);
-  let L = be("tabs"), g = $.indexOf(x);
-  g === -1 && (g = L);
-  let h = g === m, O = A((i) => {
-    var _;
-    let H = i();
-    if (H === J.Success && u === "auto") {
-      let $e = (_ = Re(x)) == null ? void 0 : _.activeElement, ae = v.tabs.findIndex((we) => we.current === $e);
-      ae !== -1 && a.change(ae);
+  let s = ie(), { id: l = `headlessui-tabs-tab-${s}`, disabled: o = !1, autoFocus: b = !1, ...x } = e, { orientation: i, activation: d, selectedIndex: v, tabs: E, panels: f } = M("Tab"), u = te("Tab"), y = M("Tab"), [S, T] = K(null), a = G(null), m = V(a, t, T);
+  z(() => u.registerTab(a), [u, a]);
+  let I = be("tabs"), h = E.indexOf(a);
+  h === -1 && (h = I);
+  let g = h === v, C = F((c) => {
+    var $;
+    let H = c();
+    if (H === J.Success && d === "auto") {
+      let _e = ($ = Re(a)) == null ? void 0 : $.activeElement, se = y.tabs.findIndex(($e) => $e.current === _e);
+      se !== -1 && u.change(se);
     }
     return H;
-  }), K = A((i) => {
-    let _ = $.map((H) => H.current).filter(Boolean);
-    if (i.key === T.Space || i.key === T.Enter) {
-      i.preventDefault(), i.stopPropagation(), a.change(g);
+  }), Y = F((c) => {
+    let $ = E.map((H) => H.current).filter(Boolean);
+    if (c.key === P.Space || c.key === P.Enter) {
+      c.preventDefault(), c.stopPropagation(), u.change(h);
       return;
     }
-    switch (i.key) {
-      case T.Home:
-      case T.PageUp:
-        return i.preventDefault(), i.stopPropagation(), O(() => N(_, I.First));
-      case T.End:
-      case T.PageDown:
-        return i.preventDefault(), i.stopPropagation(), O(() => N(_, I.Last));
+    switch (c.key) {
+      case P.Home:
+      case P.PageUp:
+        return c.preventDefault(), c.stopPropagation(), C(() => R($, w.First));
+      case P.End:
+      case P.PageDown:
+        return c.preventDefault(), c.stopPropagation(), C(() => R($, w.Last));
     }
-    if (O(() => G(b, { vertical() {
-      return i.key === T.ArrowUp ? N(_, I.Previous | I.WrapAround) : i.key === T.ArrowDown ? N(_, I.Next | I.WrapAround) : J.Error;
+    if (C(() => W(i, { vertical() {
+      return c.key === P.ArrowUp ? R($, w.Previous | w.WrapAround) : c.key === P.ArrowDown ? R($, w.Next | w.WrapAround) : J.Error;
     }, horizontal() {
-      return i.key === T.ArrowLeft ? N(_, I.Previous | I.WrapAround) : i.key === T.ArrowRight ? N(_, I.Next | I.WrapAround) : J.Error;
-    } })) === J.Success) return i.preventDefault();
-  }), c = U(!1), y = A(() => {
-    var i;
-    c.current || (c.current = !0, (i = x.current) == null || i.focus({ preventScroll: !0 }), a.change(g), Me(() => {
-      c.current = !1;
+      return c.key === P.ArrowLeft ? R($, w.Previous | w.WrapAround) : c.key === P.ArrowRight ? R($, w.Next | w.WrapAround) : J.Error;
+    } })) === J.Success) return c.preventDefault();
+  }), p = G(!1), k = F(() => {
+    var c;
+    p.current || (p.current = !0, (c = a.current) == null || c.focus({ preventScroll: !0 }), u.change(h), Le(() => {
+      p.current = !1;
     }));
-  }), D = A((i) => {
-    i.preventDefault();
-  }), { isFocusVisible: te, focusProps: he } = ce({ autoFocus: d }), { isHovered: re, hoverProps: Te } = Ne({ isDisabled: o }), { pressed: ne, pressProps: Ie } = Ce({ disabled: o }), Pe = S(() => ({ selected: h, hover: re, active: ne, focus: te, autofocus: d, disabled: o }), [h, re, te, ne, d, o]), _e = de({ ref: F, onKeyDown: K, onMouseDown: D, onClick: y, id: s, role: "tab", type: Le(e, w), "aria-controls": (r = (n = f[g]) == null ? void 0 : n.current) == null ? void 0 : r.id, "aria-selected": h, tabIndex: h ? 0 : -1, disabled: o || void 0, autoFocus: d }, he, Te, Ie);
-  return z({ ourProps: _e, theirProps: p, slot: Pe, defaultTag: Xe, name: "Tabs.Tab" });
+  }), N = F((c) => {
+    c.preventDefault();
+  }), { isFocusVisible: re, focusProps: ge } = ce({ autoFocus: b }), { isHovered: ne, hoverProps: Te } = Ne({ isDisabled: o }), { pressed: ae, pressProps: Ie } = Oe({ disabled: o }), Pe = D(() => ({ selected: g, hover: ne, active: ae, focus: re, autofocus: b, disabled: o }), [g, ne, re, ae, b, o]), we = de({ ref: m, onKeyDown: Y, onMouseDown: N, onClick: k, id: l, role: "tab", type: Me(e, S), "aria-controls": (r = (n = f[h]) == null ? void 0 : n.current) == null ? void 0 : r.id, "aria-selected": g, tabIndex: g ? 0 : -1, disabled: o || void 0, autoFocus: b }, ge, Te, Ie);
+  return q({ ourProps: we, theirProps: x, slot: Pe, defaultTag: Xe, name: "Tabs.Tab" });
 }
 let et = "div";
 function tt(e, t) {
-  let { selectedIndex: n } = C("Tab.Panels"), r = q(t), l = S(() => ({ selectedIndex: n }), [n]);
-  return z({ ourProps: { ref: r }, theirProps: e, slot: l, defaultTag: et, name: "Tabs.Panels" });
+  let { selectedIndex: n } = M("Tab.Panels"), r = V(t), s = D(() => ({ selectedIndex: n }), [n]);
+  return q({ ourProps: { ref: r }, theirProps: e, slot: s, defaultTag: et, name: "Tabs.Panels" });
 }
-let rt = "div", nt = se.RenderStrategy | se.Static;
+let rt = "div", nt = le.RenderStrategy | le.Static;
 function at(e, t) {
-  var n, r, l, s;
-  let o = ie(), { id: d = `headlessui-tabs-panel-${o}`, tabIndex: p = 0, ...b } = e, { selectedIndex: u, tabs: m, panels: $ } = C("Tab.Panel"), f = ee("Tab.Panel"), a = U(null), v = q(a, t);
-  W(() => f.registerPanel(a), [f, a]);
-  let w = be("panels"), E = $.indexOf(a);
-  E === -1 && (E = w);
-  let x = E === u, { isFocusVisible: F, focusProps: L } = ce(), g = S(() => ({ selected: x, focus: F }), [x, F]), h = de({ ref: v, id: d, role: "tabpanel", "aria-labelledby": (r = (n = m[E]) == null ? void 0 : n.current) == null ? void 0 : r.id, tabIndex: x ? p : -1 }, L);
-  return !x && ((l = b.unmount) == null || l) && !((s = b.static) != null && s) ? R.createElement(pe, { "aria-hidden": "true", ...h }) : z({ ourProps: h, theirProps: b, slot: g, defaultTag: rt, features: nt, visible: x, name: "Tabs.Panel" });
+  var n, r, s, l;
+  let o = ie(), { id: b = `headlessui-tabs-panel-${o}`, tabIndex: x = 0, ...i } = e, { selectedIndex: d, tabs: v, panels: E } = M("Tab.Panel"), f = te("Tab.Panel"), u = G(null), y = V(u, t);
+  z(() => f.registerPanel(u), [f, u]);
+  let S = be("panels"), T = E.indexOf(u);
+  T === -1 && (T = S);
+  let a = T === d, { isFocusVisible: m, focusProps: I } = ce(), h = D(() => ({ selected: a, focus: m }), [a, m]), g = de({ ref: y, id: b, role: "tabpanel", "aria-labelledby": (r = (n = v[T]) == null ? void 0 : n.current) == null ? void 0 : r.id, tabIndex: a ? x : -1 }, I);
+  return !a && ((s = i.unmount) == null || s) && !((l = i.static) != null && l) ? L.createElement(fe, { "aria-hidden": "true", ...g }) : q({ ourProps: g, theirProps: i, slot: h, defaultTag: rt, features: nt, visible: a, name: "Tabs.Panel" });
 }
-let lt = V(Ze), me = V(Ke), xe = V(Qe), ve = V(tt), ge = V(at), st = Object.assign(lt, { Group: me, List: xe, Panels: ve, Panel: ge });
-const ot = "_container_rlke5_2", it = "_group_rlke5_6", ut = "_tab_rlke5_16", ct = "_list_rlke5_51", dt = "_tabs_rlke5_62", pt = "_buttons_rlke5_68", ft = "_m_rlke5_75", bt = "_s_rlke5_83", P = {
+let st = U(Ze), me = U(Ke), ve = U(Qe), xe = U(tt), he = U(at), lt = Object.assign(st, { Group: me, List: ve, Panels: xe, Panel: he });
+const ot = "_container_rlke5_2", it = "_group_rlke5_6", ut = "_tab_rlke5_16", ct = "_list_rlke5_51", dt = "_tabs_rlke5_62", ft = "_buttons_rlke5_68", pt = "_m_rlke5_75", bt = "_s_rlke5_83", _ = {
   container: ot,
   group: it,
   "group-inner": "_group-inner_rlke5_9",
   tab: ut,
   list: ct,
   tabs: dt,
-  buttons: pt,
-  m: ft,
+  buttons: ft,
+  m: pt,
   s: bt
-}, yt = ke(
+}, kt = ye(
   ({
     categories: e,
-    size: t = Ae.M,
+    size: t = Se.M,
     showButtons: n = !0,
     className: r,
-    selectedTabIndex: l,
-    onTabChange: s,
-    buttonsVariant: o = Fe.WHITE
-  }, d) => {
-    const [p, b] = Q(l || 0), u = U(null);
-    le(() => {
-      l !== void 0 && l !== p && b(l);
-    }, [p, l]);
-    const m = (a) => {
-      b(a), s == null || s(a);
-    }, $ = () => {
-      const a = (p + 1) % e.length;
-      m(a);
-    }, f = () => {
-      const a = (p - 1 + e.length) % e.length;
-      m(a);
+    selectedTabIndex: s,
+    onTabChange: l,
+    buttonsVariant: o = Fe.WHITE,
+    autoShowButtons: b = !1
+  }, x) => {
+    const [i, d] = K(s || 0), [v, E] = K(!1), f = G(null);
+    X(() => {
+      s !== void 0 && s !== i && d(s);
+    }, [i, s]);
+    const u = (a) => {
+      d(a), l == null || l(a);
+    }, y = () => {
+      const a = (i + 1) % e.length;
+      u(a);
+    }, S = () => {
+      const a = (i - 1 + e.length) % e.length;
+      u(a);
     };
-    return le(() => {
-      var v;
-      const a = (v = u.current) == null ? void 0 : v.querySelector(
-        `.${P.tab}[data-active="true"]`
+    X(() => {
+      var m;
+      const a = (m = f.current) == null ? void 0 : m.querySelector(
+        `.${_.tab}[data-active="true"]`
       );
       a && typeof a.scrollIntoView == "function" && a.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
         inline: "center"
       });
-    }, [p]), /* @__PURE__ */ Y(
+    }, [i]), X(() => {
+      const a = () => {
+        if (f.current) {
+          const { scrollWidth: m, clientWidth: I } = f.current;
+          E(m > I);
+        }
+      };
+      return a(), window.addEventListener("resize", a), () => window.removeEventListener("resize", a);
+    }, [e]);
+    const T = b ? v : n;
+    return /* @__PURE__ */ Q(
       me,
       {
-        ref: d,
-        className: Ee(P.group, P[t], r),
-        selectedIndex: p,
-        onChange: m,
+        ref: x,
+        className: Ee(_.group, _[t], r),
+        selectedIndex: i,
+        onChange: u,
         children: [
-          /* @__PURE__ */ Y("div", { className: P["group-inner"], children: [
-            /* @__PURE__ */ k(xe, { ref: u, className: P.list, children: /* @__PURE__ */ k("div", { className: P.tabs, children: e.map(({ name: a, notificationCount: v }, w) => /* @__PURE__ */ Y(
-              st,
+          /* @__PURE__ */ Q("div", { className: _["group-inner"], children: [
+            /* @__PURE__ */ A(ve, { ref: f, className: _.list, children: /* @__PURE__ */ A("div", { className: _.tabs, children: e.map(({ name: a, notificationCount: m }, I) => /* @__PURE__ */ Q(
+              lt,
               {
-                className: `${P.tab} ${p === w ? 'data-active="true"' : ""}`,
-                "data-active": p === w,
+                className: `${_.tab} ${i === I ? 'data-active="true"' : ""}`,
+                "data-active": i === I,
                 children: [
                   a,
-                  v && /* @__PURE__ */ k(De, { count: v, size: "m" })
+                  m && /* @__PURE__ */ A(De, { count: m, size: "m" })
                 ]
               },
               a
             )) }) }),
-            n && /* @__PURE__ */ k("div", { className: P.buttons, children: /* @__PURE__ */ k(
-              Se,
+            T && /* @__PURE__ */ A("div", { className: _.buttons, children: /* @__PURE__ */ A(
+              Ae,
               {
-                handlePrevTab: f,
-                handleNextTab: $,
+                handlePrevTab: S,
+                handleNextTab: y,
                 buttonsVariant: o
               }
             ) })
           ] }),
-          /* @__PURE__ */ k(ve, { className: P.panels, children: e.map(({ name: a, content: v }) => /* @__PURE__ */ k(ge, { className: P.panel, children: v }, a)) })
+          /* @__PURE__ */ A(xe, { className: _.panels, children: e.map(({ name: a, content: m }) => /* @__PURE__ */ A(he, { className: _.panel, children: m }, a)) })
         ]
       }
     );
   }
 );
 export {
-  yt as TabTrail
+  kt as TabTrail
 };

package/package.json

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