@floegence/floe-webapp-core 0.77.1 → 0.77.2

package/dist/components/layout/MobileTabBar.d.ts

@@ -1,5 +1,6 @@
 import { type Component } from 'solid-js';
-export interface MobileTabBarItem {
+import type { ActivityBarItem } from './ActivityBar';
+export interface MobileTabBarItem extends Pick<ActivityBarItem, 'buttonRef' | 'ariaExpanded' | 'ariaControls' | 'ariaHasPopup'> {
     id: string;
     icon: Component<{
         class?: string;

package/dist/components/layout/MobileTabBar.js

@@ -1,160 +1,168 @@
-import { insert as c, createComponent as d, effect as $, className as v, setAttribute as A, template as b, Dynamic as W, memo as M, use as R, delegateEvents as z } from "solid-js/web";
-import { createSignal as L, onMount as D, onCleanup as E, Show as S, For as j } from "solid-js";
-import { cn as g } from "../../utils/cn.js";
-import { deferNonBlocking as _ } from "../../utils/defer.js";
-var q = /* @__PURE__ */ b('<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none">'), B = /* @__PURE__ */ b('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), K = /* @__PURE__ */ b('<nav data-floe-shell-slot=mobile-tab-bar style=border-top-color:var(--bottom-bar-border)><div class="relative h-14"><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>'), N = /* @__PURE__ */ b("<span>"), T = /* @__PURE__ */ b('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), H = /* @__PURE__ */ b("<button type=button role=tab><div></div><span>");
-function P(e) {
-  let i;
-  const [a, u] = L(!1), [h, t] = L(!1);
-  let n = null;
-  const s = () => {
-    i && (u(i.scrollLeft > 0), t(i.scrollLeft < i.scrollWidth - i.clientWidth - 1));
-  }, x = () => {
-    if (n === null) {
+import { insert as m, createComponent as v, effect as L, className as w, setAttribute as f, template as x, use as E, Dynamic as _, memo as z, delegateEvents as D } from "solid-js/web";
+import { createSignal as $, onMount as F, onCleanup as W, Show as S, For as j } from "solid-js";
+import { cn as y } from "../../utils/cn.js";
+import { deferNonBlocking as R } from "../../utils/defer.js";
+var q = /* @__PURE__ */ x('<div class="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-background to-transparent z-10 pointer-events-none">'), B = /* @__PURE__ */ x('<div class="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent z-10 pointer-events-none">'), H = /* @__PURE__ */ x('<nav data-floe-shell-slot=mobile-tab-bar style=border-top-color:var(--bottom-bar-border)><div class="relative h-14"><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>'), K = /* @__PURE__ */ x("<span>"), N = /* @__PURE__ */ x('<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-primary rounded-t">'), T = /* @__PURE__ */ x("<button type=button role=tab><div></div><span>");
+function O(e) {
+  let l;
+  const [I, b] = $(!1), [n, h] = $(!1);
+  let c = null;
+  const g = () => {
+    l && (b(l.scrollLeft > 0), h(l.scrollLeft < l.scrollWidth - l.clientWidth - 1));
+  }, t = () => {
+    if (c === null) {
       if (typeof requestAnimationFrame > "u") {
-        s();
+        g();
         return;
       }
-      n = requestAnimationFrame(() => {
-        n = null, s();
+      c = requestAnimationFrame(() => {
+        c = null, g();
       });
     }
-  }, k = () => e.items, w = (r) => {
-    const l = k()[r];
-    if (l) {
-      if (l.onClick) {
-        _(() => l.onClick());
+  }, o = () => e.items, C = (a) => {
+    const i = o()[a];
+    if (i) {
+      if (i.onClick) {
+        R(() => i.onClick());
         return;
       }
-      e.onSelect(l.id);
+      e.onSelect(i.id);
     }
   };
-  return D(() => {
-    s();
-    const r = e.items.findIndex((l) => l.id === e.activeId);
-    if (r > 0 && i) {
-      const l = i.scrollWidth / e.items.length;
-      i.scrollLeft = Math.max(0, l * r - i.clientWidth / 2 + l / 2);
+  return F(() => {
+    g();
+    const a = e.items.findIndex((i) => i.id === e.activeId);
+    if (a > 0 && l) {
+      const i = l.scrollWidth / e.items.length;
+      l.scrollLeft = Math.max(0, i * a - l.clientWidth / 2 + i / 2);
     }
-  }), E(() => {
-    n !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(n), n = null);
+  }), W(() => {
+    c !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(c), c = null);
   }), (() => {
-    var r = K(), l = r.firstChild, m = l.firstChild;
-    c(l, d(S, {
+    var a = H(), i = a.firstChild, d = i.firstChild;
+    m(i, v(S, {
       get when() {
-        return a();
+        return I();
       },
       get children() {
         return q();
       }
-    }), m), c(l, d(S, {
+    }), d), m(i, v(S, {
       get when() {
-        return h();
+        return n();
       },
       get children() {
         return B();
       }
-    }), m), m.addEventListener("scroll", x);
-    var I = i;
-    return typeof I == "function" ? R(I, m) : i = m, c(m, d(j, {
+    }), d), d.addEventListener("scroll", t);
+    var k = l;
+    return typeof k == "function" ? E(k, d) : l = d, m(d, v(j, {
       get each() {
         return e.items;
       },
-      children: (o, y) => d(U, {
-        item: o,
+      children: (r, s) => v(P, {
+        item: r,
         get isActive() {
-          return e.activeId === o.id;
+          return e.activeId === r.id;
         },
         get index() {
-          return y();
+          return s();
         },
         get itemCount() {
           return e.items.length;
         },
         onClick: () => {
           "vibrate" in navigator && navigator.vibrate(10);
-          const f = o.onClick, C = e.onSelect, F = o.id;
-          o.onClick ? _(() => f()) : C(F);
+          const u = r.onClick, A = e.onSelect, M = r.id;
+          r.onClick ? R(() => u()) : A(M);
         },
-        onKeyboardSelect: (f) => w(f)
+        onKeyboardSelect: (u) => C(u)
       })
-    })), $((o) => {
-      var y = e.hidden, f = g(
+    })), L((r) => {
+      var s = e.hidden, u = y(
         // 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-border safe-bottom safe-left safe-right",
         e.class
-      ), C = e.ariaLabel;
-      return y !== o.e && (r.hidden = o.e = y), f !== o.t && v(r, o.t = f), C !== o.a && A(r, "aria-label", o.a = C), o;
+      ), A = e.ariaLabel;
+      return s !== r.e && (a.hidden = r.e = s), u !== r.t && w(a, r.t = u), A !== r.a && f(a, "aria-label", r.a = A), r;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), r;
+    }), a;
   })();
 }
-function U(e) {
-  const i = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
+function P(e) {
+  let l;
+  const I = () => typeof e.item.ariaExpanded == "function" ? e.item.ariaExpanded() : e.item.ariaExpanded;
+  F(() => e.item.buttonRef?.(l ?? null)), W(() => e.item.buttonRef?.(null));
+  const b = () => typeof e.item.badge == "function" ? e.item.badge() : e.item.badge;
   return (() => {
-    var a = H(), u = a.firstChild, h = u.nextSibling;
-    return a.$$keydown = (t) => {
-      let n = null;
+    var n = T(), h = n.firstChild, c = h.nextSibling;
+    n.$$keydown = (t) => {
+      let o = null;
       switch (t.key) {
         case "ArrowRight":
         case "ArrowDown":
-          n = (e.index + 1) % e.itemCount;
+          o = (e.index + 1) % e.itemCount;
           break;
         case "ArrowLeft":
         case "ArrowUp":
-          n = (e.index - 1 + e.itemCount) % e.itemCount;
+          o = (e.index - 1 + e.itemCount) % e.itemCount;
           break;
         case "Home":
-          n = 0;
+          o = 0;
           break;
         case "End":
-          n = e.itemCount - 1;
+          o = e.itemCount - 1;
           break;
         default:
           return;
       }
-      t.preventDefault(), e.onKeyboardSelect(n);
-    }, a.$$click = () => e.onClick(), c(u, d(W, {
+      t.preventDefault(), e.onKeyboardSelect(o);
+    }, n.$$click = () => e.onClick();
+    var g = l;
+    return typeof g == "function" ? E(g, n) : l = n, m(h, v(_, {
       get component() {
         return e.item.icon;
       },
       class: "w-6 h-6"
-    }), null), c(u, d(S, {
+    }), null), m(h, v(S, {
       get when() {
-        return i();
+        return b();
       },
       get children() {
-        var t = N();
-        return c(t, (() => {
-          var n = M(() => typeof i() == "number" && i() > 99);
-          return () => n() ? "99+" : i();
-        })()), $(() => v(t, g("absolute -top-1 -right-2 min-w-4 h-4 px-1", "flex items-center justify-center", "text-[10px] font-medium rounded-full", "bg-primary text-primary-foreground"))), t;
+        var t = K();
+        return m(t, (() => {
+          var o = z(() => typeof b() == "number" && b() > 99);
+          return () => o() ? "99+" : b();
+        })()), L(() => w(t, y("absolute -top-1 -right-2 min-w-4 h-4 px-1", "flex items-center justify-center", "text-[10px] font-medium rounded-full", "bg-primary text-primary-foreground"))), t;
       }
-    }), null), c(h, () => e.item.label), c(a, d(S, {
+    }), null), m(c, () => e.item.label), m(n, v(S, {
       get when() {
         return e.isActive;
       },
       get children() {
-        return T();
+        return N();
       }
-    }), null), $((t) => {
-      var n = g("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-[color] duration-150", "focus:outline-none focus-visible:bg-muted", e.isActive ? "text-primary" : "text-muted-foreground active:text-foreground"), s = e.item.label, x = e.isActive, k = e.isActive ? 0 : -1, w = g("relative transition-transform duration-150", e.isActive && "scale-110"), r = g("mt-1 text-[10px] font-medium truncate max-w-full", e.isActive && "font-semibold");
-      return n !== t.e && v(a, t.e = n), s !== t.t && A(a, "aria-label", t.t = s), x !== t.a && A(a, "aria-selected", t.a = x), k !== t.o && A(a, "tabindex", t.o = k), w !== t.i && v(u, t.i = w), r !== t.n && v(h, t.n = r), t;
+    }), null), L((t) => {
+      var o = y("relative flex-shrink-0 flex flex-col items-center justify-center", "min-w-16 h-full px-4 snap-center", "transition-[color] duration-150", "focus:outline-none focus-visible:bg-muted", e.isActive ? "text-primary" : "text-muted-foreground active:text-foreground"), C = e.item.label, a = e.isActive, i = I(), d = e.item.ariaControls, k = e.item.ariaHasPopup, r = e.isActive ? 0 : -1, s = y("relative transition-transform duration-150", e.isActive && "scale-110"), u = y("mt-1 text-[10px] font-medium truncate max-w-full", e.isActive && "font-semibold");
+      return o !== t.e && w(n, t.e = o), C !== t.t && f(n, "aria-label", t.t = C), a !== t.a && f(n, "aria-selected", t.a = a), i !== t.o && f(n, "aria-expanded", t.o = i), d !== t.i && f(n, "aria-controls", t.i = d), k !== t.n && f(n, "aria-haspopup", t.n = k), r !== t.s && f(n, "tabindex", t.s = r), s !== t.h && w(h, t.h = s), u !== t.r && w(c, t.r = u), t;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0,
-      n: void 0
-    }), a;
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0
+    }), n;
   })();
 }
-z(["click", "keydown"]);
+D(["click", "keydown"]);
 export {
-  P as MobileTabBar
+  O as MobileTabBar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.77.1",
+  "version": "0.77.2",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",