@floegence/floe-webapp-core 0.87.4 → 0.88.0

package/dist/components/layout/MobileTabBar.js

@@ -1,53 +1,53 @@
-import { use as R, insert as f, createComponent as d, effect as _, className as y, setAttribute as v, template as m, Dynamic as j, memo as q, delegateEvents as B } from "solid-js/web";
-import { createSignal as E, onMount as z, onCleanup as D, Show as S, For as F } from "solid-js";
-import { cn as A } from "../../utils/cn.js";
+import { use as R, insert as u, createComponent as d, effect as _, className as A, setAttribute as v, template as m, Dynamic as j, memo as q, delegateEvents as B } from "solid-js/web";
+import { createSignal as E, onMount as z, onCleanup as D, Show as $, For as F } from "solid-js";
+import { cn as S } from "../../utils/cn.js";
 import { deferNonBlocking as W } from "../../utils/defer.js";
 var H = /* @__PURE__ */ m('<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none">'), N = /* @__PURE__ */ m('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), T = /* @__PURE__ */ m('<div data-floe-mobile-navigation-actions class="flex shrink-0 border-l border-[var(--floe-line)]">'), P = /* @__PURE__ */ m('<nav data-floe-shell-slot=mobile-tab-bar style=border-top-color:var(--bottom-bar-border)><div class="relative flex h-14"><div class="relative min-w-0 flex-1"><div class="h-full flex items-center overflow-x-auto scrollbar-hide snap-x snap-mandatory"role=tablist aria-orientation=horizontal style=-webkit-overflow-scrolling:touch>'), U = /* @__PURE__ */ m("<span>"), V = /* @__PURE__ */ m('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), G = /* @__PURE__ */ m("<button type=button><div></div><span>");
 function Y(e) {
   let a;
-  const [$, b] = E(!1), [i, h] = E(!1);
-  let u = null;
+  const [w, b] = E(!1), [i, h] = E(!1);
+  let f = null;
   const g = () => {
     a && (b(a.scrollLeft > 0), h(a.scrollLeft < a.scrollWidth - a.clientWidth - 1));
   }, t = () => {
-    if (u === null) {
+    if (f === null) {
       if (typeof requestAnimationFrame > "u") {
         g();
         return;
       }
-      u = requestAnimationFrame(() => {
-        u = null, g();
+      f = requestAnimationFrame(() => {
+        f = null, g();
       });
     }
-  }, o = () => e.items, I = (l) => {
-    const r = o()[l];
-    if (r) {
-      if (r.onClick) {
-        W(() => r.onClick());
+  }, o = () => e.items, I = (r) => {
+    const l = o()[r];
+    if (l) {
+      if (l.onClick) {
+        W(() => l.onClick());
         return;
       }
-      e.onSelect(r.id);
+      e.onSelect(l.id);
     }
   };
   return z(() => {
     g();
-    const l = e.items.findIndex((r) => r.id === e.activeId);
-    if (l > 0 && a) {
-      const r = a.scrollWidth / e.items.length;
-      a.scrollLeft = Math.max(0, r * l - a.clientWidth / 2 + r / 2);
+    const r = e.items.findIndex((l) => l.id === e.activeId);
+    if (r > 0 && a) {
+      const l = a.scrollWidth / e.items.length;
+      a.scrollLeft = Math.max(0, l * r - a.clientWidth / 2 + l / 2);
     }
   }), D(() => {
-    u !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(u), u = null);
+    f !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(f), f = null);
   }), (() => {
-    var l = P(), r = l.firstChild, x = r.firstChild, s = x.firstChild, w = e.ref;
-    typeof w == "function" ? R(w, l) : e.ref = l, f(x, d(S, {
+    var r = P(), l = r.firstChild, x = l.firstChild, s = x.firstChild, C = e.ref;
+    typeof C == "function" ? R(C, r) : e.ref = r, u(x, d($, {
       get when() {
-        return $();
+        return w();
       },
       get children() {
         return H();
       }
-    }), s), f(x, d(S, {
+    }), s), u(x, d($, {
       get when() {
         return i();
       },
@@ -55,8 +55,8 @@ function Y(e) {
         return N();
       }
     }), s), s.addEventListener("scroll", t);
-    var C = a;
-    return typeof C == "function" ? R(C, s) : a = s, f(s, d(F, {
+    var y = a;
+    return typeof y == "function" ? R(y, s) : a = s, u(s, d(F, {
       get each() {
         return e.items;
       },
@@ -78,13 +78,13 @@ function Y(e) {
         },
         onKeyboardSelect: (k) => I(k)
       })
-    })), f(r, d(S, {
+    })), u(l, d($, {
       get when() {
         return e.actions?.length;
       },
       get children() {
         var n = T();
-        return f(n, d(F, {
+        return u(n, d(F, {
           get each() {
             return e.actions;
           },
@@ -101,27 +101,27 @@ function Y(e) {
         })), n;
       }
     }), null), _((n) => {
-      var c = e.hidden, k = A(
+      var c = e.hidden, k = S(
         // Same safe-area rule as TopBar: keep the visual bar height stable, and
         // add safe-area padding on an outer wrapper (avoid squeezing content).
         "relative shrink-0 bg-background border-t border-[var(--floe-line)] safe-bottom safe-left safe-right",
         e.class
       ), L = e.ariaLabel;
-      return c !== n.e && (l.hidden = n.e = c), k !== n.t && y(l, n.t = k), L !== n.a && v(l, "aria-label", n.a = L), n;
+      return c !== n.e && (r.hidden = n.e = c), k !== n.t && A(r, n.t = k), L !== n.a && v(r, "aria-label", n.a = L), n;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), l;
+    }), r;
   })();
 }
 function M(e) {
   let a;
-  const $ = () => typeof e.item.ariaExpanded == "function" ? e.item.ariaExpanded() : e.item.ariaExpanded;
+  const w = () => typeof e.item.ariaExpanded == "function" ? e.item.ariaExpanded() : e.item.ariaExpanded;
   z(() => e.item.buttonRef?.(a ?? null)), D(() => e.item.buttonRef?.(null));
   const b = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
   return (() => {
-    var i = G(), h = i.firstChild, u = h.nextSibling;
+    var i = G(), h = i.firstChild, f = h.nextSibling;
     i.$$keydown = (t) => {
       if (e.action) return;
       let o = null;
@@ -146,23 +146,26 @@ function M(e) {
       t.preventDefault(), e.onKeyboardSelect(o);
     }, i.$$click = () => e.onClick();
     var g = a;
-    return typeof g == "function" ? R(g, i) : a = i, f(h, d(j, {
+    return typeof g == "function" ? R(g, i) : a = i, u(h, d(j, {
       get component() {
         return e.item.icon;
       },
-      class: "w-6 h-6"
-    }), null), f(h, d(S, {
+      class: "w-6 h-6",
+      get active() {
+        return e.isActive || w() === !0;
+      }
+    }), null), u(h, d($, {
       get when() {
         return b();
       },
       get children() {
         var t = U();
-        return f(t, (() => {
+        return u(t, (() => {
           var o = q(() => typeof b() == "number" && b() > 99);
           return () => o() ? "99+" : b();
-        })()), _(() => y(t, A("absolute -top-1 -right-2 min-w-4 h-4 px-1", "flex items-center justify-center", "text-caption font-medium rounded-full", "bg-primary text-primary-foreground"))), t;
+        })()), _(() => A(t, S("absolute -top-1 -right-2 min-w-4 h-4 px-1", "flex items-center justify-center", "text-caption font-medium rounded-full", "bg-primary text-primary-foreground"))), t;
       }
-    }), null), f(u, () => e.item.label), f(i, d(S, {
+    }), null), u(f, () => e.item.label), u(i, d($, {
       get when() {
         return e.isActive;
       },
@@ -170,8 +173,8 @@ function M(e) {
         return V();
       }
     }), null), _((t) => {
-      var o = A("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-[color,background-color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "hover:bg-[var(--floe-state-hover)] focus:outline-none focus-visible:bg-[var(--floe-state-press)]", e.action && "w-16 px-1", $() && "bg-[var(--floe-state-selected)] text-foreground", e.isActive ? "text-[var(--floe-accent-ink)]" : "text-[var(--floe-ink-soft)] active:text-foreground"), I = e.item.label, l = e.action ? void 0 : e.isActive, r = $(), x = e.item.ariaControls, s = e.item.ariaHasPopup, w = e.action ? void 0 : "tab", C = e.action || e.isActive ? 0 : -1, n = A("relative transition-transform duration-[var(--floe-duration-fast)]", e.isActive && "scale-110"), c = A("mt-1 text-caption font-medium truncate max-w-full", e.isActive && "font-semibold");
-      return o !== t.e && y(i, t.e = o), I !== t.t && v(i, "aria-label", t.t = I), l !== t.a && v(i, "aria-selected", t.a = l), r !== t.o && v(i, "aria-expanded", t.o = r), x !== t.i && v(i, "aria-controls", t.i = x), s !== t.n && v(i, "aria-haspopup", t.n = s), w !== t.s && v(i, "role", t.s = w), C !== t.h && v(i, "tabindex", t.h = C), n !== t.r && y(h, t.r = n), c !== t.d && y(u, t.d = c), t;
+      var o = S("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-[color,background-color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "hover:bg-[var(--floe-state-hover)] focus:outline-none focus-visible:bg-[var(--floe-state-press)]", e.action && "w-16 px-1", w() && "bg-[var(--floe-state-selected)] text-foreground", e.isActive ? "text-[var(--floe-accent-ink)]" : "text-[var(--floe-ink-soft)] active:text-foreground"), I = e.item.label, r = e.action ? void 0 : e.isActive, l = w(), x = e.item.ariaControls, s = e.item.ariaHasPopup, C = e.action ? void 0 : "tab", y = e.action || e.isActive ? 0 : -1, n = S("relative transition-transform duration-[var(--floe-duration-fast)]", e.isActive && "scale-110"), c = S("mt-1 text-caption font-medium truncate max-w-full", e.isActive && "font-semibold");
+      return o !== t.e && A(i, t.e = o), I !== t.t && v(i, "aria-label", t.t = I), r !== t.a && v(i, "aria-selected", t.a = r), l !== t.o && v(i, "aria-expanded", t.o = l), x !== t.i && v(i, "aria-controls", t.i = x), s !== t.n && v(i, "aria-haspopup", t.n = s), C !== t.s && v(i, "role", t.s = C), y !== t.h && v(i, "tabindex", t.h = y), n !== t.r && A(h, t.r = n), c !== t.d && A(f, t.d = c), t;
     }, {
       e: void 0,
       t: void 0,