@floegence/floe-webapp-core 0.35.21 → 0.35.23

package/dist/components/layout/MobileTabBar.js

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