@floegence/floe-webapp-core 0.35.21 → 0.35.23

package/dist/components/ui/Dropdown.js

@@ -1,237 +1,354 @@
-import { setAttribute as O, insert as m, createComponent as d, Portal as B, effect as E, className as S, setStyleProperty as _, template as C, memo as A, use as I, delegateEvents as D } from "solid-js/web";
-import { createSignal as L, createEffect as F, onCleanup as N, Show as y, Index as W } from "solid-js";
-import { cn as p } from "../../utils/cn.js";
-import { deferNonBlocking as z } from "../../utils/defer.js";
-import { ChevronDown as G, Check as V, ChevronRight as J } from "../icons/index.js";
-var q = /* @__PURE__ */ C("<div role=menu>"), K = /* @__PURE__ */ C("<div><div class=cursor-pointer>"), H = /* @__PURE__ */ C('<div class="my-1 h-px bg-border"role=separator>'), Q = /* @__PURE__ */ C("<div>"), U = /* @__PURE__ */ C('<button type=button role=menuitem><span class="w-3.5 h-3.5 flex items-center justify-center"></span><span class="flex-1 text-left">'), X = /* @__PURE__ */ C("<div class=relative>"), Y = /* @__PURE__ */ C('<span class="w-3.5 h-3.5 flex items-center justify-center">'), Z = /* @__PURE__ */ C("<button type=button><span>");
-const h = 8;
-let R = 0;
-function ee(e, r, c) {
-  const i = window.innerWidth, a = window.innerHeight;
-  let n;
-  switch (c) {
+import { setAttribute as b, insert as w, createComponent as m, Portal as U, use as P, effect as D, className as I, setStyleProperty as F, template as C, memo as j, delegateEvents as Y } from "solid-js/web";
+import { createSignal as _, createEffect as Z, onCleanup as R, Show as S, Index as z } from "solid-js";
+import { cn as A } from "../../utils/cn.js";
+import { deferNonBlocking as ee } from "../../utils/defer.js";
+import { ChevronDown as te, Check as ne, ChevronRight as re } from "../icons/index.js";
+var G = /* @__PURE__ */ C("<div role=menu>"), ie = /* @__PURE__ */ C("<div><div role=button aria-haspopup=menu data-floe-dropdown-trigger>"), V = /* @__PURE__ */ C('<div class="my-1 h-px bg-border"role=separator>'), oe = /* @__PURE__ */ C("<div>"), le = /* @__PURE__ */ C('<button type=button role=menuitem><span class="w-3.5 h-3.5 flex items-center justify-center"></span><span class="flex-1 text-left">'), ae = /* @__PURE__ */ C("<div class=relative>"), ue = /* @__PURE__ */ C('<span class="w-3.5 h-3.5 flex items-center justify-center">'), de = /* @__PURE__ */ C("<span>");
+const h = 8, J = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])';
+let se = 0, ce = 0;
+function fe(e, r) {
+  switch (e) {
+    case "Enter":
+    case " ":
+      return r.open ? {
+        nextOpen: !1
+      } : {
+        nextOpen: !0,
+        focusMode: r.hasSelection ? "selected" : "first"
+      };
+    case "ArrowDown":
+      return {
+        nextOpen: !0,
+        focusMode: r.hasSelection ? "selected" : "first"
+      };
+    case "ArrowUp":
+      return {
+        nextOpen: !0,
+        focusMode: "last"
+      };
+    default:
+      return null;
+  }
+}
+function me(e, r, i) {
+  return e <= 0 ? null : r < 0 ? i > 0 ? 0 : e - 1 : (r + i + e) % e;
+}
+function ve(e, r, i) {
+  const o = window.innerWidth, f = window.innerHeight;
+  let a;
+  switch (i) {
     case "center":
-      n = e.left + e.width / 2 - r.width / 2;
+      a = e.left + e.width / 2 - r.width / 2;
       break;
     case "end":
-      n = e.right - r.width;
+      a = e.right - r.width;
       break;
     default:
-      n = e.left;
+      a = e.left;
   }
-  let l = e.bottom + 4;
-  if (n + r.width > i - h && (n = i - r.width - h), n = Math.max(h, n), l + r.height > a - h) {
-    const s = e.top - h, g = a - e.bottom - h;
-    s > g && s >= r.height ? l = e.top - r.height - 4 : l = a - r.height - h;
+  let c = e.bottom + 4;
+  if (a + r.width > o - h && (a = o - r.width - h), a = Math.max(h, a), c + r.height > f - h) {
+    const g = e.top - h, k = f - e.bottom - h;
+    g > k && g >= r.height ? c = e.top - r.height - 4 : c = f - r.height - h;
   }
-  return l = Math.max(h, l), {
-    x: n,
-    y: l
+  return c = Math.max(h, c), {
+    x: a,
+    y: c
   };
 }
-function te(e, r) {
-  const c = window.innerWidth, i = window.innerHeight;
-  let a = e.right, n = e.top;
-  if (a + r.width > c - h) {
-    const l = e.left - r.width;
-    l >= h ? a = l : a = c - r.width - h;
+function he(e, r) {
+  const i = window.innerWidth, o = window.innerHeight;
+  let f = e.right, a = e.top;
+  if (f + r.width > i - h) {
+    const c = e.left - r.width;
+    c >= h ? f = c : f = i - r.width - h;
   }
-  return n + r.height > i - h && (n = i - r.height - h), a = Math.max(h, a), n = Math.max(h, n), {
-    x: a,
-    y: n
+  return a + r.height > o - h && (a = o - r.height - h), f = Math.max(h, f), a = Math.max(h, a), {
+    x: f,
+    y: a
   };
 }
-function ne(e) {
-  const [r, c] = L(!1), [i, a] = L({
+function Q(e) {
+  return !e || typeof HTMLElement > "u" ? [] : Array.from(e.querySelectorAll(J)).filter((r) => r instanceof HTMLElement);
+}
+function p(e, r = "first") {
+  const i = Q(e);
+  if (!i.length) return !1;
+  let o = i[0];
+  return r === "last" ? o = i[i.length - 1] : r === "selected" && (o = i.find((f) => f.getAttribute("data-floe-selected") === "true") ?? i[0]), o.focus(), !0;
+}
+function K(e, r, i) {
+  const o = Q(e);
+  if (!o.length) return !1;
+  const f = r ? o.indexOf(r) : -1, a = me(o.length, f, i);
+  return a === null ? !1 : (o[a]?.focus(), !0);
+}
+function ge(e) {
+  const [r, i] = _(!1), [o, f] = _({
     x: -9999,
     y: -9999
   });
-  let n, l;
-  const s = `floe-dropdown-${R += 1}`, g = () => {
-    if (!n || !l) return;
-    const f = n.getBoundingClientRect(), v = l.getBoundingClientRect(), b = ee(f, v, e.align ?? "start");
-    a(b);
+  let a, c;
+  const g = `floe-dropdown-${se += 1}`, k = `${g}-menu`, L = () => {
+    if (!a || !c) return;
+    const u = a.getBoundingClientRect(), l = c.getBoundingClientRect(), v = ve(u, l, e.align ?? "start");
+    f(v);
   };
-  F(() => {
+  Z(() => {
     if (!r()) {
-      a({
+      f({
         x: -9999,
         y: -9999
       });
       return;
     }
-    const f = (b) => {
-      const o = b.target;
-      o && typeof o.closest == "function" && o.closest(`[data-floe-dropdown="${s}"]`) || c(!1);
-    }, v = (b) => {
-      b.key === "Escape" && c(!1);
+    const u = (v) => {
+      const n = v.target;
+      n && typeof n.closest == "function" && n.closest(`[data-floe-dropdown="${g}"]`) || i(!1);
+    }, l = (v) => {
+      v.key === "Escape" && (i(!1), requestAnimationFrame(() => a?.focus()));
     };
-    document.addEventListener("mousedown", f), document.addEventListener("keydown", v), requestAnimationFrame(g), N(() => {
-      document.removeEventListener("mousedown", f), document.removeEventListener("keydown", v);
+    document.addEventListener("mousedown", u), document.addEventListener("keydown", l), requestAnimationFrame(() => {
+      L(), p(c, e.value ? "selected" : "first");
+    }), R(() => {
+      document.removeEventListener("mousedown", u), document.removeEventListener("keydown", l);
     });
   });
-  const P = (f) => {
-    const v = e.onSelect;
-    f.keepOpen || c(!1), z(() => v(f.id));
+  const x = (u) => {
+    const l = e.onSelect;
+    u.keepOpen || i(!1), ee(() => l(u.id));
+  }, O = (u, l = "first") => {
+    e.disabled || (i(u), requestAnimationFrame(() => {
+      L(), p(c, l);
+    }));
+  }, B = (u) => {
+    if (e.disabled) return;
+    const l = fe(u.key, {
+      open: r(),
+      hasSelection: !!e.value
+    });
+    if (l) {
+      if (u.preventDefault(), !l.nextOpen) {
+        i(!1);
+        return;
+      }
+      O(!0, l.focusMode ?? "first");
+    }
+  }, q = (u) => {
+    const l = u.target, v = l?.closest('[role="menu"]'), n = l?.closest(J);
+    switch (u.key) {
+      case "ArrowDown":
+        u.preventDefault(), K(v, n, 1);
+        return;
+      case "ArrowUp":
+        u.preventDefault(), K(v, n, -1);
+        return;
+      case "Home":
+        u.preventDefault(), p(v, "first");
+        return;
+      case "End":
+        u.preventDefault(), p(v, "last");
+        return;
+      case "Tab":
+        i(!1);
+        return;
+      default:
+        return;
+    }
   };
   return (() => {
-    var f = K(), v = f.firstChild;
-    O(f, "data-floe-dropdown", s), v.$$click = () => c((o) => !o);
-    var b = n;
-    return typeof b == "function" ? I(b, v) : n = v, m(v, () => e.trigger), m(f, d(y, {
+    var u = ie(), l = u.firstChild;
+    b(u, "data-floe-dropdown", g), l.$$keydown = B, l.$$click = () => {
+      if (!e.disabled) {
+        if (r()) {
+          i(!1);
+          return;
+        }
+        O(!0, e.value ? "selected" : "first");
+      }
+    };
+    var v = a;
+    return typeof v == "function" ? P(v, l) : a = l, b(l, "aria-controls", k), w(l, () => e.trigger), w(u, m(S, {
       get when() {
         return r();
       },
       get children() {
-        return d(B, {
+        return m(U, {
           get children() {
-            var o = q(), x = l;
-            return typeof x == "function" ? I(x, o) : l = o, O(o, "data-floe-dropdown", s), m(o, d(W, {
+            var n = G();
+            n.$$keydown = q;
+            var y = c;
+            return typeof y == "function" ? P(y, n) : c = n, b(n, "data-floe-dropdown", g), b(n, "id", k), w(n, m(z, {
               get each() {
                 return e.items;
               },
-              children: (t) => d(y, {
+              children: (t) => m(S, {
                 get when() {
                   return !t().separator;
                 },
                 get fallback() {
-                  return H();
+                  return V();
                 },
                 get children() {
-                  return d(j, {
+                  return m(X, {
                     get item() {
                       return t();
                     },
                     get selected() {
                       return e.value === t().id;
                     },
-                    onSelect: P,
-                    onCloseMenu: () => c(!1),
-                    dropdownId: s
+                    onSelect: x,
+                    onCloseMenu: () => i(!1),
+                    dropdownId: g
                   });
                 }
               })
-            })), E((t) => {
-              var $ = p("fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "animate-in fade-in slide-in-from-top-2"), u = `${i().x}px`, w = `${i().y}px`;
-              return $ !== t.e && S(o, t.e = $), u !== t.t && _(o, "left", t.t = u), w !== t.a && _(o, "top", t.a = w), t;
+            })), D((t) => {
+              var M = A("fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "animate-in fade-in slide-in-from-top-2"), d = `${o().x}px`, $ = `${o().y}px`;
+              return M !== t.e && I(n, t.e = M), d !== t.t && F(n, "left", t.t = d), $ !== t.a && F(n, "top", t.a = $), t;
             }, {
               e: void 0,
               t: void 0,
               a: void 0
-            }), o;
+            }), n;
           }
         });
       }
-    }), null), E(() => S(f, p("relative inline-block", e.class))), f;
+    }), null), D((n) => {
+      var y = A("relative inline-block", e.class), t = A("cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", e.triggerClass, e.disabled && "pointer-events-none opacity-50"), M = e.disabled ? -1 : 0, d = r(), $ = e.triggerAriaLabel, s = e.disabled ? "true" : void 0;
+      return y !== n.e && I(u, n.e = y), t !== n.t && I(l, n.t = t), M !== n.a && b(l, "tabindex", n.a = M), d !== n.o && b(l, "aria-expanded", n.o = d), $ !== n.i && b(l, "aria-label", n.i = $), s !== n.n && b(l, "aria-disabled", n.n = s), n;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    }), u;
   })();
 }
-function j(e) {
-  const [r, c] = L(!1), [i, a] = L({
+function X(e) {
+  const [r, i] = _(!1), [o, f] = _({
     x: -9999,
     y: -9999
   });
-  let n, l, s;
-  const g = () => e.item.children && e.item.children.length > 0, P = () => {
-    if (!n || !l) return;
-    const o = n.getBoundingClientRect(), x = l.getBoundingClientRect(), t = te(o, x);
-    a(t);
-  }, f = () => {
-    g() && (clearTimeout(s), s = setTimeout(() => {
-      c(!0), requestAnimationFrame(P);
+  let a, c, g, k;
+  const L = `floe-dropdown-item-${ce += 1}`, x = () => e.item.children && e.item.children.length > 0, O = () => {
+    if (!a || !g) return;
+    const n = a.getBoundingClientRect(), y = g.getBoundingClientRect(), t = he(n, y);
+    f(t);
+  }, B = () => {
+    x() && (clearTimeout(k), k = setTimeout(() => {
+      i(!0), requestAnimationFrame(O);
     }, 100));
-  }, v = () => {
-    g() && (clearTimeout(s), s = void 0, !e.item.keepOpen && (s = setTimeout(() => {
-      c(!1);
+  }, q = () => {
+    x() && (clearTimeout(k), k = void 0, !e.item.keepOpen && (k = setTimeout(() => {
+      i(!1);
     }, 150)));
-  }, b = (o) => {
+  }, u = (n) => {
     if (!e.item.disabled) {
       if (e.item.content && e.item.keepOpen) {
-        o.stopPropagation();
+        n.stopPropagation();
         return;
       }
-      g() ? (c((x) => !x), requestAnimationFrame(P)) : e.item.content || e.onSelect(e.item);
+      x() ? (i((y) => !y), requestAnimationFrame(O)) : e.item.content || e.onSelect(e.item);
     }
+  }, l = (n = "first") => {
+    x() && (i(!0), requestAnimationFrame(() => {
+      O(), p(g, n);
+    }));
+  }, v = () => {
+    i(!1), requestAnimationFrame(() => c?.focus());
   };
   return (() => {
-    var o = X();
-    o.addEventListener("mouseleave", v), o.addEventListener("mouseenter", f);
-    var x = n;
-    return typeof x == "function" ? I(x, o) : n = o, m(o, d(y, {
+    var n = ae();
+    n.addEventListener("mouseleave", q), n.addEventListener("mouseenter", B);
+    var y = a;
+    return typeof y == "function" ? P(y, n) : a = n, w(n, m(S, {
       get when() {
         return e.item.content;
       },
       get children() {
-        var t = Q();
-        return t.$$click = b, m(t, e.item.content), E(() => S(t, p("w-full px-2 py-1.5", e.item.disabled && "opacity-50 pointer-events-none"))), t;
+        var t = oe();
+        return t.$$click = u, w(t, e.item.content), D(() => I(t, A("w-full px-2 py-1.5", e.item.disabled && "opacity-50 pointer-events-none"))), t;
       }
-    }), null), m(o, d(y, {
+    }), null), w(n, m(S, {
       get when() {
         return !e.item.content;
       },
       get children() {
-        var t = U(), $ = t.firstChild, u = $.nextSibling;
-        return t.$$click = b, m($, d(y, {
+        var t = le(), M = t.firstChild, d = M.nextSibling;
+        t.$$keydown = (s) => {
+          e.item.disabled || x() && ((s.key === "ArrowRight" || s.key === "Enter" || s.key === " ") && (s.preventDefault(), l("first")), s.key === "ArrowLeft" && (s.preventDefault(), v()));
+        }, t.$$click = u;
+        var $ = c;
+        return typeof $ == "function" ? P($, t) : c = t, b(t, "id", L), w(M, m(S, {
           get when() {
-            return A(() => !!e.selected)() && !g();
+            return j(() => !!e.selected)() && !x();
           },
           get children() {
-            return d(V, {
+            return m(ne, {
               class: "w-3 h-3"
             });
           }
-        })), m(t, d(y, {
+        })), w(t, m(S, {
           get when() {
             return e.item.icon;
           },
           keyed: !0,
-          children: (w) => (() => {
-            var k = Y();
-            return m(k, w), k;
+          children: (s) => (() => {
+            var E = ue();
+            return w(E, s), E;
           })()
-        }), u), m(u, () => e.item.label), m(t, d(y, {
+        }), d), w(d, () => e.item.label), w(t, m(S, {
           get when() {
-            return g();
+            return x();
           },
           get children() {
-            return d(J, {
+            return m(re, {
               class: "w-3 h-3 text-muted-foreground"
             });
           }
-        }), null), E((w) => {
-          var k = p("w-full flex items-center gap-1.5 px-2 py-1 text-xs", "transition-colors duration-75", "focus:outline-none focus:bg-accent", e.item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), M = e.item.disabled;
-          return k !== w.e && S(t, w.e = k), M !== w.t && (t.disabled = w.t = M), w;
+        }), null), D((s) => {
+          var E = A("w-full flex items-center gap-1.5 px-2 py-1 text-xs", "transition-colors duration-75", "focus:outline-none focus:bg-accent", e.item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-accent cursor-pointer"), T = e.item.disabled, H = x() ? "menu" : void 0, W = x() ? r() : void 0, N = e.selected && !x() ? "true" : void 0;
+          return E !== s.e && I(t, s.e = E), T !== s.t && (t.disabled = s.t = T), H !== s.a && b(t, "aria-haspopup", s.a = H), W !== s.o && b(t, "aria-expanded", s.o = W), N !== s.i && b(t, "data-floe-selected", s.i = N), s;
         }, {
           e: void 0,
-          t: void 0
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0
         }), t;
       }
-    }), null), m(o, d(y, {
+    }), null), w(n, m(S, {
       get when() {
-        return A(() => !!r())() && g();
+        return j(() => !!r())() && x();
       },
       get children() {
-        return d(B, {
+        return m(U, {
           get children() {
-            var t = q();
-            t.addEventListener("mouseleave", v), t.addEventListener("mouseenter", () => {
-              clearTimeout(s);
+            var t = G();
+            t.$$keydown = (d) => {
+              d.key !== "ArrowLeft" && d.key !== "Escape" || (d.preventDefault(), d.stopPropagation(), v());
+            }, t.addEventListener("mouseleave", q), t.addEventListener("mouseenter", () => {
+              clearTimeout(k);
             });
-            var $ = l;
-            return typeof $ == "function" ? I($, t) : l = t, m(t, d(W, {
+            var M = g;
+            return typeof M == "function" ? P(M, t) : g = t, b(t, "aria-labelledby", L), w(t, m(z, {
               get each() {
                 return e.item.children;
               },
-              children: (u) => d(y, {
+              children: (d) => m(S, {
                 get when() {
-                  return !u().separator;
+                  return !d().separator;
                 },
                 get fallback() {
-                  return H();
+                  return V();
                 },
                 get children() {
-                  return d(j, {
+                  return m(X, {
                     get item() {
-                      return u();
+                      return d();
                     },
                     selected: !1,
                     get onSelect() {
@@ -246,9 +363,9 @@ function j(e) {
                   });
                 }
               })
-            })), E((u) => {
-              var w = p("fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "animate-in fade-in slide-in-from-left-1"), k = e.dropdownId, M = `${i().x}px`, T = `${i().y}px`;
-              return w !== u.e && S(t, u.e = w), k !== u.t && O(t, "data-floe-dropdown", u.t = k), M !== u.a && _(t, "left", u.a = M), T !== u.o && _(t, "top", u.o = T), u;
+            })), D((d) => {
+              var $ = A("fixed z-50 min-w-36 py-0.5", "bg-popover text-popover-foreground", "rounded border border-border shadow-md", "animate-in fade-in slide-in-from-left-1"), s = e.dropdownId, E = `${o().x}px`, T = `${o().y}px`;
+              return $ !== d.e && I(t, d.e = $), s !== d.t && b(t, "data-floe-dropdown", d.t = s), E !== d.a && F(t, "left", d.a = E), T !== d.o && F(t, "top", d.o = T), d;
             }, {
               e: void 0,
               t: void 0,
@@ -258,43 +375,44 @@ function j(e) {
           }
         });
       }
-    }), null), o;
+    }), null), n;
   })();
 }
-function ae(e) {
-  const r = () => e.options.find((i) => i.value === e.value), c = () => e.options.map((i) => ({
-    id: i.value,
-    label: i.label
+function Me(e) {
+  const r = () => e.options.find((o) => o.value === e.value), i = () => e.options.map((o) => ({
+    id: o.value,
+    label: o.label
   }));
-  return d(ne, {
+  return m(ge, {
+    get triggerClass() {
+      return A("flex items-center justify-between gap-2 h-8 px-2.5 w-full", "rounded border border-input bg-background text-xs shadow-sm", "transition-colors duration-100", e.class);
+    },
     get trigger() {
-      return (() => {
-        var i = Z(), a = i.firstChild;
-        return m(a, () => r()?.label ?? e.placeholder ?? "Select..."), m(i, d(G, {
-          class: "w-3.5 h-3.5 text-muted-foreground"
-        }), null), E((n) => {
-          var l = p("flex items-center justify-between gap-2 h-8 px-2.5 w-full cursor-pointer", "rounded border border-input bg-background text-xs shadow-sm", "transition-colors duration-100", "focus:outline-none focus:ring-1 focus:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50", e.class), s = e.disabled, g = p(!r() && "text-muted-foreground");
-          return l !== n.e && S(i, n.e = l), s !== n.t && (i.disabled = n.t = s), g !== n.a && S(a, n.a = g), n;
-        }, {
-          e: void 0,
-          t: void 0,
-          a: void 0
-        }), i;
-      })();
+      return [(() => {
+        var o = de();
+        return w(o, () => r()?.label ?? e.placeholder ?? "Select..."), D(() => I(o, A("truncate", !r() && "text-muted-foreground"))), o;
+      })(), m(te, {
+        class: "w-3.5 h-3.5 text-muted-foreground"
+      })];
     },
     get items() {
-      return c();
+      return i();
     },
     get value() {
       return e.value;
     },
     get onSelect() {
       return e.onChange;
+    },
+    get disabled() {
+      return e.disabled;
     }
   });
 }
-D(["click"]);
+Y(["click", "keydown"]);
 export {
-  ne as Dropdown,
-  ae as Select
+  ge as Dropdown,
+  Me as Select,
+  me as getWrappedMenuItemIndex,
+  fe as resolveDropdownTriggerKeyAction
 };

package/dist/components/ui/Tabs.d.ts

@@ -77,10 +77,14 @@ export interface TabsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onC
     features?: TabsFeatures;
     /** Optional class overrides for each visual slot */
     slotClassNames?: TabsSlotClassNames;
+    /** Accessible name for the tablist container. */
+    ariaLabel?: string;
 }
+export declare function resolveTabNavigationTargetId(items: Pick<TabItem, 'id' | 'disabled'>[], currentId: string, key: string): string | null;
 export declare function Tabs(props: TabsProps): JSX.Element;
 export interface TabPanelProps extends JSX.HTMLAttributes<HTMLDivElement> {
     active?: boolean;
     keepMounted?: boolean;
+    labelledBy?: string;
 }
 export declare function TabPanel(props: TabPanelProps): JSX.Element;