mimir-ui-kit 1.34.4-t → 1.34.4

package/dist/components/TabTrail/TabTrail.js

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

package/dist/components/TabTrail/constants.js

@@ -1,4 +1,8 @@
-var t = /* @__PURE__ */ ((r) => (r.M = "m", r.S = "s", r))(t || {});
+var ETabTrailSize = /* @__PURE__ */ ((ETabTrailSize2) => {
+  ETabTrailSize2["M"] = "m";
+  ETabTrailSize2["S"] = "s";
+  return ETabTrailSize2;
+})(ETabTrailSize || {});
 export {
-  t as ETabTrailSize
+  ETabTrailSize
 };

package/dist/components/TabTrail/index.js

@@ -1,6 +1,6 @@
-import { TabTrail as o } from "./TabTrail.js";
-import { ETabTrailSize as e } from "./constants.js";
+import { TabTrail } from "./TabTrail.js";
+import { ETabTrailSize } from "./constants.js";
 export {
-  e as ETabTrailSize,
-  o as TabTrail
+  ETabTrailSize,
+  TabTrail
 };