@floegence/floe-webapp-core 0.36.5 → 0.36.7

package/dist/components/ui/Tabs.js

@@ -1,41 +1,46 @@
-import { createComponent as v, spread as oe, mergeProps as se, insert as f, effect as w, className as p, setStyleProperty as Z, memo as ee, use as te, setAttribute as k, template as g, delegateEvents as Re } from "solid-js/web";
-import { splitProps as le, Show as x, createSignal as m, untrack as re, createEffect as E, For as Te, onCleanup as ne } from "solid-js";
-import { cn as h } from "../../utils/cn.js";
-import { deferAfterPaint as L } from "../../utils/defer.js";
-import { useViewActivation as He } from "../../context/ViewActivationContext.js";
-import { X as Ee, Plus as Pe, ChevronRight as _e } from "../icons/index.js";
-var Me = /* @__PURE__ */ g('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), Oe = /* @__PURE__ */ g('<button type=button aria-label="Scroll left">'), je = /* @__PURE__ */ g("<div>"), De = /* @__PURE__ */ g('<button type=button aria-label="Add new tab">'), Ve = /* @__PURE__ */ g('<button type=button aria-label="Scroll right">'), We = /* @__PURE__ */ g("<div><div role=tablist aria-orientation=horizontal>"), Fe = /* @__PURE__ */ g("<span class=flex-shrink-0>"), Ue = /* @__PURE__ */ g("<button type=button>"), Xe = /* @__PURE__ */ g('<div role=tab><span class="truncate max-w-32">'), qe = /* @__PURE__ */ g("<div role=tabpanel>");
-function Ke(d, t, y) {
-  const c = d.filter((I) => !I.disabled);
-  if (!c.length) return null;
-  const B = c.findIndex((I) => I.id === t);
-  if (B < 0) return null;
-  let C = null;
-  switch (y) {
+import { createComponent as v, spread as de, mergeProps as ce, insert as f, effect as x, className as y, setStyleProperty as oe, memo as se, use as le, setAttribute as I, template as w, delegateEvents as Ne } from "solid-js/web";
+import { splitProps as ue, Show as k, createSignal as B, untrack as ie, createEffect as O, For as Le, onCleanup as ae } from "solid-js";
+import { cn as g } from "../../utils/cn.js";
+import { deferAfterPaint as R } from "../../utils/defer.js";
+import { useViewActivation as Re } from "../../context/ViewActivationContext.js";
+import { X as Te, Plus as ze, ChevronRight as Ee } from "../icons/index.js";
+var He = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), _e = /* @__PURE__ */ w('<button type=button aria-label="Scroll left">'), Pe = /* @__PURE__ */ w("<div>"), De = /* @__PURE__ */ w('<button type=button aria-label="Add new tab">'), Me = /* @__PURE__ */ w('<button type=button aria-label="Scroll right">'), Oe = /* @__PURE__ */ w("<div><div role=tablist aria-orientation=horizontal>"), We = /* @__PURE__ */ w("<span class=flex-shrink-0>"), Fe = /* @__PURE__ */ w("<button type=button>"), je = /* @__PURE__ */ w('<div role=tab><span class="truncate max-w-32">'), Ge = /* @__PURE__ */ w("<div role=tabpanel>");
+const V = {
+  x: 0,
+  width: 0,
+  visible: !1
+};
+function Ue(a, e, h) {
+  const d = a.filter((p) => !p.disabled);
+  if (!d.length) return null;
+  const C = d.findIndex((p) => p.id === e);
+  if (C < 0) return null;
+  let b = null;
+  switch (h) {
     case "ArrowRight":
     case "ArrowDown":
-      C = (B + 1) % c.length;
+      b = (C + 1) % d.length;
       break;
     case "ArrowLeft":
     case "ArrowUp":
-      C = (B - 1 + c.length) % c.length;
+      b = (C - 1 + d.length) % d.length;
       break;
     case "Home":
-      C = 0;
+      b = 0;
       break;
     case "End":
-      C = c.length - 1;
+      b = d.length - 1;
       break;
     default:
       return null;
   }
-  return c[C]?.id ?? null;
+  return d[b]?.id ?? null;
 }
-function Ge(d) {
-  return d === 1 || d === 2 || d === 3 || d === 4 ? d : 2;
+function Xe(a) {
+  return a === 1 || a === 2 || a === 3 || a === 4 ? a : 2;
 }
-function Je(d) {
-  switch (d) {
+function Ve(a) {
+  switch (a) {
     case 1:
       return {
         tabBorderClass: "border-b",
@@ -58,8 +63,8 @@ function Je(d) {
       };
   }
 }
-function Qe(d) {
-  switch (d) {
+function qe(a) {
+  switch (a) {
     case "border":
       return {
         tabBorderClass: "border-border",
@@ -77,202 +82,223 @@ function Qe(d) {
       };
   }
 }
-const Ye = (d) => (() => {
-  var t = Me();
-  return w(() => k(t, "class", d.class)), t;
+const Ke = (a) => (() => {
+  var e = He();
+  return x(() => I(e, "class", a.class)), e;
 })();
-function st(d) {
-  const [t, y] = le(d, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), c = () => t.features?.indicator?.mode ?? "activeBorder", B = () => Ge(t.features?.indicator?.thicknessPx), C = () => t.features?.indicator?.colorToken ?? "primary", I = () => t.features?.indicator?.animated ?? !0, ae = () => t.features?.containerBorder ?? !0, ie = () => t.features?.scrollButtons ?? "auto", de = () => t.features?.closeButton?.dangerHover ?? !0, ce = () => t.features?.closeButton?.enabledByDefault ?? t.closable ?? !1, ue = () => t.features?.addButton?.enabled ?? t.showAdd ?? !1, V = () => Je(B()), P = () => Qe(C());
+function Ye(a) {
+  const {
+    container: e,
+    tab: h
+  } = a, d = h.offsetParent, C = h.offsetWidth;
+  if (d === e && Number.isFinite(h.offsetLeft) && Number.isFinite(C))
+    return {
+      x: h.offsetLeft,
+      width: C,
+      visible: C > 0
+    };
+  const b = e.getBoundingClientRect(), p = h.getBoundingClientRect(), T = e.offsetWidth || e.clientWidth, A = b.width > 0 && T > 0 ? b.width / T : 1, z = Number.isFinite(A) && A > 0 ? A : 1, E = p.width / z;
+  return {
+    x: (p.left - b.left + e.scrollLeft) / z,
+    width: E,
+    visible: E > 0
+  };
+}
+function nt(a) {
+  const [e, h] = ue(a, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), d = () => e.features?.indicator?.mode ?? "activeBorder", C = () => Xe(e.features?.indicator?.thicknessPx), b = () => e.features?.indicator?.colorToken ?? "primary", p = () => e.features?.indicator?.animated ?? !0, T = () => e.features?.containerBorder ?? !0, A = () => e.features?.scrollButtons ?? "auto", z = () => e.features?.closeButton?.dangerHover ?? !0, E = () => e.features?.closeButton?.enabledByDefault ?? e.closable ?? !1, fe = () => e.features?.addButton?.enabled ?? e.showAdd ?? !1, q = () => Ve(C()), W = () => qe(b());
   let u;
-  const W = (() => {
+  const K = (() => {
     try {
-      return He();
+      return Re();
     } catch {
       return null;
     }
-  })(), A = () => W ? W.active() : !0;
-  let _ = !1;
-  const [fe, ve] = m(0), [he, be] = m(0), [F, M] = m(!1), N = /* @__PURE__ */ new Map();
-  let O = !1;
-  const R = () => c() === "slider", U = (o) => {
-    if (!u || !R()) return !1;
-    const n = N.get(o);
-    if (!n) return !1;
-    const s = u.getBoundingClientRect(), e = n.getBoundingClientRect(), r = e.left - s.left + u.scrollLeft, a = e.width;
-    return ve(r), be(a), M(a > 0), a > 0;
-  }, ge = () => {
-    if (!R()) {
-      M(!1);
+  })(), S = () => K ? K.active() : !0;
+  let F = !1;
+  const [H, j] = B(V), _ = /* @__PURE__ */ new Map();
+  let G = !1;
+  const P = () => d() === "slider", Y = (o) => {
+    if (!u || !P()) return !1;
+    const r = _.get(o);
+    if (!r) return !1;
+    const s = Ye({
+      container: u,
+      tab: r
+    });
+    return j(s), s.visible;
+  }, ve = () => {
+    if (!P()) {
+      j(V);
       return;
     }
-    U(j()) || M(!1);
-  }, T = () => {
-    O || (O = !0, L(() => {
-      O = !1, re(() => {
-        A() && ge();
+    Y(U()) || j(V);
+  }, D = () => {
+    G || (G = !0, R(() => {
+      G = !1, ie(() => {
+        S() && ve();
       });
     }));
-  }, X = () => t.activeId !== void 0, me = () => t.onChange ?? t.onActiveIdChange, [we, Ce] = m(re(() => t.defaultActiveId ?? t.items[0]?.id ?? "")), q = () => X() ? t.activeId : we(), [j, K] = m(q());
-  E(() => {
-    K(q());
-  }), E(() => {
-    A() && (c(), j(), T());
+  }, J = () => e.activeId !== void 0, he = () => e.onChange ?? e.onActiveIdChange, [be, ge] = B(ie(() => e.defaultActiveId ?? e.items[0]?.id ?? "")), Q = () => J() ? e.activeId : be(), [U, Z] = B(Q());
+  O(() => {
+    Z(Q());
+  }), O(() => {
+    S() && (d(), U(), D());
   });
-  const [G, pe] = m(!1), [J, xe] = m(!1), [ke, ye] = m(!1), Q = () => ie() === "auto" && ke(), Be = () => {
+  const [ee, me] = B(!1), [te, we] = B(!1), [Ce, pe] = B(!1), re = () => A() === "auto" && Ce(), xe = () => {
     if (!u) return;
     const {
       scrollLeft: o,
-      scrollWidth: n,
+      scrollWidth: r,
       clientWidth: s
-    } = u, e = n > s;
-    ye(e), pe(o > 0), xe(o + s < n - 1);
-  }, H = () => {
-    _ || (_ = !0, L(() => {
-      _ = !1, A() && Be();
+    } = u, t = r > s;
+    pe(t), me(o > 0), we(o + s < r - 1);
+  }, M = () => {
+    F || (F = !0, R(() => {
+      F = !1, S() && xe();
     }));
-  }, Ie = () => {
+  }, ye = () => {
     u && u.scrollBy({
       left: -150,
       behavior: "smooth"
     });
-  }, Ae = () => {
+  }, ke = () => {
     u && u.scrollBy({
       left: 150,
       behavior: "smooth"
     });
   };
-  E(() => {
-    if (!u || !A()) return;
-    H(), T();
-    const o = () => H();
+  O(() => {
+    if (!u || !S()) return;
+    M(), D();
+    const o = () => M();
     u.addEventListener("scroll", o);
-    const n = () => {
-      H(), T();
+    const r = () => {
+      M(), D();
     };
     let s;
-    typeof ResizeObserver < "u" ? (s = new ResizeObserver(n), s.observe(u)) : typeof window < "u" && window.addEventListener("resize", n), ne(() => {
-      u?.removeEventListener("scroll", o), s?.disconnect(), typeof window < "u" && window.removeEventListener("resize", n);
+    typeof ResizeObserver < "u" ? (s = new ResizeObserver(r), s.observe(u)) : typeof window < "u" && window.addEventListener("resize", r), ae(() => {
+      u?.removeEventListener("scroll", o), s?.disconnect(), typeof window < "u" && window.removeEventListener("resize", r);
     });
-  }), E(() => {
-    A() && (t.items.length, H(), T());
+  }), O(() => {
+    S() && (e.items.length, M(), D());
   });
-  const D = (o, n) => {
-    if (n) return;
-    const s = me();
-    if (K(o), R() && U(o), X() || Ce(o), s) {
-      const e = o;
-      L(() => s(e));
+  const X = (o, r) => {
+    if (r) return;
+    const s = he();
+    if (Z(o), P() && Y(o), J() || ge(o), s) {
+      const t = o;
+      R(() => s(t));
     }
-  }, Se = (o) => {
-    const n = t.items.find((s) => s.id === o);
-    n && (D(n.id, n.disabled), requestAnimationFrame(() => {
-      const s = N.get(n.id);
+  }, Be = (o) => {
+    const r = e.items.find((s) => s.id === o);
+    r && (X(r.id, r.disabled), requestAnimationFrame(() => {
+      const s = _.get(r.id);
       s?.focus(), s?.scrollIntoView({
         block: "nearest",
         inline: "nearest"
       });
     }));
-  }, $e = (o, n) => {
-    const s = Ke(t.items, n.id, o.key);
-    s && (o.preventDefault(), Se(s));
-  }, ze = (o, n) => {
+  }, Ie = (o, r) => {
+    const s = Ue(e.items, r.id, o.key);
+    s && (o.preventDefault(), Be(s));
+  }, Ae = (o, r) => {
     o.stopPropagation();
-    const s = t.onClose;
+    const s = e.onClose;
     if (!s) return;
-    const e = n;
-    L(() => s(e));
-  }, Le = {
+    const t = r;
+    R(() => s(t));
+  }, Se = {
     sm: "h-7 px-2 text-[11px]",
     md: "h-8 px-3 text-xs"
-  }, Ne = (o, n) => {
-    const s = "inline-flex items-center gap-1.5 font-medium transition-colors duration-150 whitespace-nowrap", e = n ? "cursor-not-allowed opacity-50" : "cursor-pointer", r = (() => {
-      const a = c();
-      return a === "none" || a === "slider" && F() ? "border-transparent" : P().tabBorderClass;
+  }, $e = (o, r) => {
+    const s = "inline-flex items-center gap-1.5 font-medium transition-colors duration-150 whitespace-nowrap", t = r ? "cursor-not-allowed opacity-50" : "cursor-pointer", n = (() => {
+      const c = d();
+      return c === "none" || c === "slider" && H().visible ? "border-transparent" : W().tabBorderClass;
     })();
-    return h(s, e, Le[t.size ?? "md"], "rounded-t", V().tabBorderClass, o ? h(r, "text-foreground bg-background", t.slotClassNames?.tabActive) : h("border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", t.slotClassNames?.tabInactive), n && "hover:bg-transparent hover:text-muted-foreground hover:border-transparent", t.slotClassNames?.tab);
+    return g(s, t, Se[e.size ?? "md"], "rounded-t", q().tabBorderClass, o ? g(n, "text-foreground bg-background", e.slotClassNames?.tabActive) : g("border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", e.slotClassNames?.tabInactive), r && "hover:bg-transparent hover:text-muted-foreground hover:border-transparent", e.slotClassNames?.tab);
   };
   return (() => {
-    var o = We(), n = o.firstChild;
-    oe(o, se({
+    var o = Oe(), r = o.firstChild;
+    de(o, ce({
       get class() {
-        return h("relative flex items-center gap-0.5", ae() && "border-b border-border", t.slotClassNames?.root, t.class);
+        return g("relative flex items-center gap-0.5", T() && "border-b border-border", e.slotClassNames?.root, e.class);
       }
-    }, y), !1, !0), f(o, v(x, {
+    }, h), !1, !0), f(o, v(k, {
       get when() {
-        return Q();
+        return re();
       },
       get children() {
-        var e = Oe();
-        return e.$$click = Ie, f(e, v(Ye, {
+        var t = _e();
+        return t.$$click = ye, f(t, v(Ke, {
           class: "w-4 h-4"
-        })), w((r) => {
-          var a = !G(), i = h("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", G() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton);
-          return a !== r.e && (e.disabled = r.e = a), i !== r.t && p(e, r.t = i), r;
+        })), x((n) => {
+          var c = !ee(), i = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", ee() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
+          return c !== n.e && (t.disabled = n.e = c), i !== n.t && y(t, n.t = i), n;
         }, {
           e: void 0,
           t: void 0
-        }), e;
+        }), t;
       }
-    }), n);
+    }), r);
     var s = u;
-    return typeof s == "function" ? te(s, n) : u = n, f(n, v(x, {
+    return typeof s == "function" ? le(s, r) : u = r, f(r, v(k, {
       get when() {
-        return ee(() => !!R())() && F();
+        return se(() => !!P())() && H().visible;
       },
       get children() {
-        var e = je();
-        return w((r) => {
-          var a = h("pointer-events-none absolute bottom-0 left-0 z-10", V().sliderHeightClass, P().sliderBgClass, I() ? "transition-[transform,width] duration-200 ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", t.slotClassNames?.indicator), i = `translate3d(${fe()}px, 0, 0)`, S = `${he()}px`;
-          return a !== r.e && p(e, r.e = a), i !== r.t && Z(e, "transform", r.t = i), S !== r.a && Z(e, "width", r.a = S), r;
+        var t = Pe();
+        return x((n) => {
+          var c = g("pointer-events-none absolute bottom-0 left-0 z-10", q().sliderHeightClass, W().sliderBgClass, p() ? "transition-[transform,width] duration-200 ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", e.slotClassNames?.indicator), i = `translate3d(${H().x}px, 0, 0)`, $ = `${H().width}px`;
+          return c !== n.e && y(t, n.e = c), i !== n.t && oe(t, "transform", n.t = i), $ !== n.a && oe(t, "width", n.a = $), n;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
-        }), e;
+        }), t;
       }
-    }), null), f(n, v(Te, {
+    }), null), f(r, v(Le, {
       get each() {
-        return t.items;
+        return e.items;
       },
-      children: (e) => {
-        const r = () => e.id === j(), a = () => e.closable ?? ce();
+      children: (t) => {
+        const n = () => t.id === U(), c = () => t.closable ?? E();
         return (() => {
-          var i = Xe(), S = i.firstChild;
+          var i = je(), $ = i.firstChild;
           return i.$$keydown = (l) => {
             if (l.key === "Enter" || l.key === " ") {
-              l.preventDefault(), D(e.id, e.disabled);
+              l.preventDefault(), X(t.id, t.disabled);
               return;
             }
-            $e(l, e);
-          }, i.$$click = () => D(e.id, e.disabled), te((l) => {
-            N.set(e.id, l), ne(() => N.delete(e.id));
-          }, i), f(i, v(x, {
+            Ie(l, t);
+          }, i.$$click = () => X(t.id, t.disabled), le((l) => {
+            _.set(t.id, l), ae(() => _.delete(t.id));
+          }, i), f(i, v(k, {
             get when() {
-              return e.icon;
+              return t.icon;
             },
             get children() {
-              var l = Fe();
-              return f(l, () => e.icon), l;
+              var l = We();
+              return f(l, () => t.icon), l;
             }
-          }), S), f(S, () => e.label), f(i, v(x, {
+          }), $), f($, () => t.label), f(i, v(k, {
             get when() {
-              return ee(() => !!a())() && !e.disabled;
+              return se(() => !!c())() && !t.disabled;
             },
             get children() {
-              var l = Ue();
-              return l.$$click = (b) => ze(b, e.id), f(l, v(Ee, {
+              var l = Fe();
+              return l.$$click = (m) => Ae(m, t.id), f(l, v(Te, {
                 class: "w-3 h-3"
-              })), w((b) => {
-                var $ = h("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded cursor-pointer", "bg-transparent text-muted-foreground", de() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-muted/80 hover:text-foreground", "transition-colors duration-150", "ml-1.5", t.slotClassNames?.closeButton), z = `Close ${e.label}`;
-                return $ !== b.e && p(l, b.e = $), z !== b.t && k(l, "aria-label", b.t = z), b;
+              })), x((m) => {
+                var N = g("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded cursor-pointer", "bg-transparent text-muted-foreground", z() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-muted/80 hover:text-foreground", "transition-colors duration-150", "ml-1.5", e.slotClassNames?.closeButton), L = `Close ${t.label}`;
+                return N !== m.e && y(l, m.e = N), L !== m.t && I(l, "aria-label", m.t = L), m;
               }, {
                 e: void 0,
                 t: void 0
               }), l;
             }
-          }), null), w((l) => {
-            var b = Ne(r(), e.disabled), $ = r(), z = e.disabled, Y = e.disabled ? -1 : r() ? 0 : -1;
-            return b !== l.e && p(i, l.e = b), $ !== l.t && k(i, "aria-selected", l.t = $), z !== l.a && k(i, "aria-disabled", l.a = z), Y !== l.o && k(i, "tabindex", l.o = Y), l;
+          }), null), x((l) => {
+            var m = $e(n(), t.disabled), N = n(), L = t.disabled, ne = t.disabled ? -1 : n() ? 0 : -1;
+            return m !== l.e && y(i, l.e = m), N !== l.t && I(i, "aria-selected", l.t = N), L !== l.a && I(i, "aria-disabled", l.a = L), ne !== l.o && I(i, "tabindex", l.o = ne), l;
           }, {
             e: void 0,
             t: void 0,
@@ -281,80 +307,80 @@ function st(d) {
           }), i;
         })();
       }
-    }), null), f(o, v(x, {
+    }), null), f(o, v(k, {
       get when() {
-        return ue();
+        return fe();
       },
       get children() {
-        var e = De();
-        return e.$$click = () => {
-          const r = t.onAdd;
-          r && L(() => r());
-        }, f(e, v(Pe, {
+        var t = De();
+        return t.$$click = () => {
+          const n = e.onAdd;
+          n && R(() => n());
+        }, f(t, v(ze, {
           get class() {
-            return t.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4";
+            return e.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4";
           }
-        })), w(() => p(e, h("flex-shrink-0 flex items-center justify-center", "rounded hover:bg-muted/80 cursor-pointer", "text-muted-foreground hover:text-foreground", "transition-colors duration-150", t.size === "sm" ? "w-6 h-6" : "w-7 h-7", t.slotClassNames?.addButton))), e;
+        })), x(() => y(t, g("flex-shrink-0 flex items-center justify-center", "rounded hover:bg-muted/80 cursor-pointer", "text-muted-foreground hover:text-foreground", "transition-colors duration-150", e.size === "sm" ? "w-6 h-6" : "w-7 h-7", e.slotClassNames?.addButton))), t;
       }
-    }), null), f(o, v(x, {
+    }), null), f(o, v(k, {
       get when() {
-        return Q();
+        return re();
       },
       get children() {
-        var e = Ve();
-        return e.$$click = Ae, f(e, v(_e, {
+        var t = Me();
+        return t.$$click = ke, f(t, v(Ee, {
           class: "w-4 h-4"
-        })), w((r) => {
-          var a = !J(), i = h("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", J() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none", t.slotClassNames?.scrollButton);
-          return a !== r.e && (e.disabled = r.e = a), i !== r.t && p(e, r.t = i), r;
+        })), x((n) => {
+          var c = !te(), i = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", te() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
+          return c !== n.e && (t.disabled = n.e = c), i !== n.t && y(t, n.t = i), n;
         }, {
           e: void 0,
           t: void 0
-        }), e;
+        }), t;
       }
-    }), null), w((e) => {
-      var r = h(
+    }), null), x((t) => {
+      var n = g(
         "relative flex-1 flex items-end gap-0.5 overflow-x-auto",
         "scrollbar-none",
         // Hide scrollbar for all browsers
         "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
-        t.slotClassNames?.scrollContainer
-      ), a = t.ariaLabel;
-      return r !== e.e && p(n, e.e = r), a !== e.t && k(n, "aria-label", e.t = a), e;
+        e.slotClassNames?.scrollContainer
+      ), c = e.ariaLabel;
+      return n !== t.e && y(r, t.e = n), c !== t.t && I(r, "aria-label", t.t = c), t;
     }, {
       e: void 0,
       t: void 0
     }), o;
   })();
 }
-function lt(d) {
-  const [t, y] = le(d, ["active", "keepMounted", "labelledBy", "class", "children"]);
-  return v(x, {
+function ot(a) {
+  const [e, h] = ue(a, ["active", "keepMounted", "labelledBy", "class", "children"]);
+  return v(k, {
     get when() {
-      return t.keepMounted || t.active;
+      return e.keepMounted || e.active;
     },
     get children() {
-      var c = qe();
-      return oe(c, se({
+      var d = Ge();
+      return de(d, ce({
         get "aria-labelledby"() {
-          return t.labelledBy;
+          return e.labelledBy;
         },
         get "aria-hidden"() {
-          return !t.active && t.keepMounted ? "true" : void 0;
+          return !e.active && e.keepMounted ? "true" : void 0;
         },
         get tabIndex() {
-          return t.active ? 0 : -1;
+          return e.active ? 0 : -1;
         },
         get class() {
-          return h(!t.active && t.keepMounted && "hidden", t.class);
+          return g(!e.active && e.keepMounted && "hidden", e.class);
         }
-      }, y), !1, !0), f(c, () => t.children), c;
+      }, h), !1, !0), f(d, () => e.children), d;
     }
   });
 }
-Re(["click", "keydown"]);
+Ne(["click", "keydown"]);
 export {
-  lt as TabPanel,
-  st as Tabs,
-  Ke as resolveTabNavigationTargetId
+  ot as TabPanel,
+  nt as Tabs,
+  Ue as resolveTabNavigationTargetId
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.36.5",
+  "version": "0.36.7",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",