@floegence/floe-webapp-core 0.86.25 → 0.86.28

package/dist/components/ui/Tabs.js

@@ -1,20 +1,20 @@
-import { createComponent as v, spread as de, mergeProps as ce, insert as f, effect as x, className as y, setStyleProperty as ne, memo as se, use as ae, setAttribute as k, template as w, delegateEvents as Ne } from "solid-js/web";
-import { splitProps as ue, Show as B, createSignal as L, untrack as le, createEffect as X, For as Le, onCleanup as ie } from "solid-js";
+import { createComponent as v, spread as ue, mergeProps as fe, insert as f, effect as y, className as k, setStyleProperty as ae, memo as le, use as ie, setAttribute as p, template as w, delegateEvents as Re } from "solid-js/web";
+import { splitProps as ve, Show as B, createSignal as L, untrack as de, createEffect as X, For as Te, onCleanup as ce } from "solid-js";
 import { cn as g } from "../../utils/cn.js";
-import { deferAfterPaint as M } from "../../utils/defer.js";
-import { createUIFirstSelection as Re } from "../../utils/uiFirstSelection.js";
-import { useViewActivation as Te } from "../../context/ViewActivationContext.js";
-import { X as ze, Plus as Ee, ChevronRight as He } from "../icons/index.js";
-var Pe = /* @__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">'), De = /* @__PURE__ */ w("<div>"), Me = /* @__PURE__ */ w('<button type=button aria-label="Add new tab">'), Oe = /* @__PURE__ */ w('<button type=button aria-label="Scroll right">'), We = /* @__PURE__ */ w("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), Fe = /* @__PURE__ */ w("<span class=flex-shrink-0>"), je = /* @__PURE__ */ w("<button type=button>"), Ge = /* @__PURE__ */ w('<div role=tab data-floe-surface-part=tab><span class="truncate max-w-32">'), Ue = /* @__PURE__ */ w("<div role=tabpanel>");
+import { deferAfterPaint as _ } from "../../utils/defer.js";
+import { createUIFirstSelection as ze } from "../../utils/uiFirstSelection.js";
+import { useViewActivation as Ee } from "../../context/ViewActivationContext.js";
+import { X as He, Plus as Pe, ChevronRight as De } from "../icons/index.js";
+var Me = /* @__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">'), Oe = /* @__PURE__ */ w("<div>"), We = /* @__PURE__ */ w('<button type=button aria-label="Add new tab">'), Fe = /* @__PURE__ */ w('<button type=button aria-label="Scroll right">'), je = /* @__PURE__ */ w("<div><div role=tablist data-floe-surface=inset data-floe-surface-part=tab-rail aria-orientation=horizontal>"), Ge = /* @__PURE__ */ w("<span class=flex-shrink-0>"), Ue = /* @__PURE__ */ w("<button type=button>"), Xe = /* @__PURE__ */ w('<div role=tab data-floe-surface-part=tab><span class="truncate max-w-32">'), Ve = /* @__PURE__ */ w("<div role=tabpanel>");
 const V = {
   x: 0,
   width: 0,
   visible: !1
 };
-function Xe(i, e, h) {
-  const d = i.filter((p) => !p.disabled);
+function qe(i, e, h) {
+  const d = i.filter((x) => !x.disabled);
   if (!d.length) return null;
-  const C = d.findIndex((p) => p.id === e);
+  const C = d.findIndex((x) => x.id === e);
   if (C < 0) return null;
   let b = null;
   switch (h) {
@@ -37,10 +37,10 @@ function Xe(i, e, h) {
   }
   return d[b]?.id ?? null;
 }
-function Ve(i) {
+function Ke(i) {
   return i === 1 || i === 2 || i === 3 || i === 4 ? i : 2;
 }
-function qe(i) {
+function Ye(i) {
   switch (i) {
     case 1:
       return {
@@ -64,7 +64,7 @@ function qe(i) {
       };
   }
 }
-function Ke(i) {
+function Je(i) {
   switch (i) {
     case "border":
       return {
@@ -83,11 +83,11 @@ function Ke(i) {
       };
   }
 }
-const Ye = (i) => (() => {
-  var e = Pe();
-  return x(() => k(e, "class", i.class)), e;
+const Qe = (i) => (() => {
+  var e = Me();
+  return y(() => p(e, "class", i.class)), e;
 })();
-function Je(i) {
+function Ze(i) {
   const {
     container: e,
     tab: h
@@ -98,19 +98,19 @@ function Je(i) {
       width: C,
       visible: C > 0
     };
-  const b = e.getBoundingClientRect(), p = h.getBoundingClientRect(), R = e.offsetWidth || e.clientWidth, I = b.width > 0 && R > 0 ? b.width / R : 1, T = Number.isFinite(I) && I > 0 ? I : 1, z = p.width / T;
+  const b = e.getBoundingClientRect(), x = h.getBoundingClientRect(), R = e.offsetWidth || e.clientWidth, I = b.width > 0 && R > 0 ? b.width / R : 1, T = Number.isFinite(I) && I > 0 ? I : 1, z = x.width / T;
   return {
-    x: (p.left - b.left + e.scrollLeft) / T,
+    x: (x.left - b.left + e.scrollLeft) / T,
     width: z,
     visible: z > 0
   };
 }
-function at(i) {
-  const [e, h] = ue(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), d = () => e.features?.indicator?.mode ?? "activeBorder", C = () => Ve(e.features?.indicator?.thicknessPx), b = () => e.features?.indicator?.colorToken ?? "primary", p = () => e.features?.indicator?.animated ?? !0, R = () => e.features?.containerBorder ?? !0, I = () => e.features?.scrollButtons ?? "auto", T = () => e.features?.closeButton?.dangerHover ?? !0, z = () => e.features?.closeButton?.enabledByDefault ?? e.closable ?? !1, fe = () => e.features?.addButton?.enabled ?? e.showAdd ?? !1, q = () => qe(C()), O = () => Ke(b());
+function it(i) {
+  const [e, h] = ve(i, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), d = () => e.features?.indicator?.mode ?? "activeBorder", C = () => Ke(e.features?.indicator?.thicknessPx), b = () => e.features?.indicator?.colorToken ?? "primary", x = () => e.features?.indicator?.animated ?? !0, R = () => e.features?.containerBorder ?? !0, I = () => e.features?.scrollButtons ?? "auto", T = () => e.features?.closeButton?.dangerHover ?? !0, z = () => e.features?.closeButton?.enabledByDefault ?? e.closable ?? !1, he = () => e.features?.addButton?.enabled ?? e.showAdd ?? !1, q = () => Ye(C()), O = () => Je(b());
   let u;
   const K = (() => {
     try {
-      return Te();
+      return Ee();
     } catch {
       return null;
     }
@@ -118,54 +118,54 @@ function at(i) {
   let W = !1;
   const [E, F] = L(V), H = /* @__PURE__ */ new Map();
   let j = !1;
-  const P = () => d() === "slider", Y = (n) => {
+  const P = () => d() === "slider", Y = (s) => {
     if (!u || !P()) return !1;
-    const o = H.get(n);
+    const o = H.get(s);
     if (!o) return !1;
-    const a = Je({
+    const a = Ze({
       container: u,
       tab: o
     });
     return F(a), a.visible;
-  }, ve = () => {
+  }, be = () => {
     if (!P()) {
       F(V);
       return;
     }
     Y(G()) || F(V);
-  }, _ = () => {
-    j || (j = !0, M(() => {
-      j = !1, le(() => {
-        S() && ve();
+  }, D = () => {
+    j || (j = !0, _(() => {
+      j = !1, de(() => {
+        S() && be();
       });
     }));
-  }, J = () => e.activeId !== void 0, he = () => e.onChange ?? e.onActiveIdChange, [be, ge] = L(le(() => e.defaultActiveId ?? e.items[0]?.id ?? "")), Q = Re({
-    committed: () => J() ? e.activeId : be(),
-    commit: (n) => {
-      J() || ge(n), he()?.(n);
+  }, J = () => e.activeId !== void 0, ge = () => e.onChange ?? e.onActiveIdChange, [me, we] = L(de(() => e.defaultActiveId ?? e.items[0]?.id ?? "")), Q = ze({
+    committed: () => J() ? e.activeId : me(),
+    commit: (s) => {
+      J() || we(s), ge()?.(s);
     }
   }), G = Q.visual;
   X(() => {
-    S() && (d(), G(), _());
+    S() && (d(), G(), D());
   });
-  const [Z, me] = L(!1), [ee, we] = L(!1), [Ce, pe] = L(!1), te = () => I() === "auto" && Ce(), xe = () => {
+  const [Z, Ce] = L(!1), [ee, pe] = L(!1), [xe, ye] = L(!1), te = () => I() === "auto" && xe(), ke = () => {
     if (!u) return;
     const {
-      scrollLeft: n,
+      scrollLeft: s,
       scrollWidth: o,
       clientWidth: a
     } = u, t = o > a;
-    pe(t), me(n > 0), we(n + a < o - 1);
-  }, D = () => {
-    W || (W = !0, M(() => {
-      W = !1, S() && xe();
+    ye(t), Ce(s > 0), pe(s + a < o - 1);
+  }, M = () => {
+    W || (W = !0, _(() => {
+      W = !1, S() && ke();
     }));
-  }, ye = () => {
+  }, Be = () => {
     u && u.scrollBy({
       left: -150,
       behavior: "smooth"
     });
-  }, ke = () => {
+  }, Ie = () => {
     u && u.scrollBy({
       left: 150,
       behavior: "smooth"
@@ -173,23 +173,23 @@ function at(i) {
   };
   X(() => {
     if (!u || !S()) return;
-    D(), _();
-    const n = () => D();
-    u.addEventListener("scroll", n);
+    M(), D();
+    const s = () => M();
+    u.addEventListener("scroll", s);
     const o = () => {
-      D(), _();
+      M(), D();
     };
     let a;
-    typeof ResizeObserver < "u" ? (a = new ResizeObserver(o), a.observe(u)) : typeof window < "u" && window.addEventListener("resize", o), ie(() => {
-      u?.removeEventListener("scroll", n), a?.disconnect(), typeof window < "u" && window.removeEventListener("resize", o);
+    typeof ResizeObserver < "u" ? (a = new ResizeObserver(o), a.observe(u)) : typeof window < "u" && window.addEventListener("resize", o), ce(() => {
+      u?.removeEventListener("scroll", s), a?.disconnect(), typeof window < "u" && window.removeEventListener("resize", o);
     });
   }), X(() => {
-    S() && (e.items.length, D(), _());
+    S() && (e.items.length, M(), D());
   });
-  const U = (n, o) => {
-    o || (Q.request(n), P() && Y(n));
-  }, Be = (n) => {
-    const o = e.items.find((t) => t.id === n);
+  const U = (s, o) => {
+    o || (Q.request(s), P() && Y(s));
+  }, Se = (s) => {
+    const o = e.items.find((t) => t.id === s);
     if (!o) return;
     U(o.id, o.disabled);
     const a = H.get(o.id);
@@ -199,42 +199,42 @@ function at(i) {
       block: "nearest",
       inline: "nearest"
     });
-  }, Ie = (n, o) => {
-    const a = Xe(e.items, o.id, n.key);
-    a && (n.preventDefault(), Be(a));
-  }, Se = (n, o) => {
-    n.stopPropagation();
+  }, Ae = (s, o) => {
+    const a = qe(e.items, o.id, s.key);
+    a && (s.preventDefault(), Se(a));
+  }, $e = (s, o) => {
+    s.stopPropagation();
     const a = e.onClose;
     if (!a) return;
     const t = o;
-    M(() => a(t));
-  }, Ae = {
+    _(() => a(t));
+  }, Ne = {
     sm: "h-7 px-2 text-[11px]",
     md: "h-8 px-3 text-xs"
-  }, $e = (n, o) => {
+  }, Le = (s, o) => {
     const a = "inline-flex items-center gap-1.5 font-medium transition-colors duration-120 whitespace-nowrap", t = o ? "cursor-not-allowed opacity-50" : "cursor-pointer", r = (() => {
       const c = d();
       return c === "none" || c === "slider" && E().visible ? "border-transparent" : O().tabBorderClass;
     })();
-    return g(a, t, Ae[e.size ?? "md"], "rounded-t", q().tabBorderClass, n ? g(r, "text-foreground bg-background", e.slotClassNames?.tabActive) : g("border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", e.slotClassNames?.tabInactive), o && "hover:bg-transparent hover:text-muted-foreground hover:border-transparent", e.slotClassNames?.tab);
+    return g(a, t, Ne[e.size ?? "md"], "rounded-t", q().tabBorderClass, s ? g(r, "text-foreground bg-background", e.slotClassNames?.tabActive) : g("border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", e.slotClassNames?.tabInactive), o && "hover:bg-transparent hover:text-muted-foreground hover:border-transparent", e.slotClassNames?.tab);
   };
   return (() => {
-    var n = We(), o = n.firstChild;
-    de(n, ce({
+    var s = je(), o = s.firstChild;
+    ue(s, fe({
       get class() {
         return g("relative flex items-center gap-0.5", R() && "border-b border-border", e.slotClassNames?.root, e.class);
       }
-    }, h), !1, !0), f(n, v(B, {
+    }, h), !1, !0), f(s, v(B, {
       get when() {
         return te();
       },
       get children() {
         var t = _e();
-        return t.$$click = ye, f(t, v(Ye, {
+        return t.$$click = Be, f(t, v(Qe, {
           class: "w-4 h-4"
-        })), x((r) => {
+        })), y((r) => {
           var c = !Z(), l = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-[color,background-color,opacity] duration-120", Z() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
-          return c !== r.e && (t.disabled = r.e = c), l !== r.t && y(t, r.t = l), r;
+          return c !== r.e && (t.disabled = r.e = c), l !== r.t && k(t, r.t = l), r;
         }, {
           e: void 0,
           t: void 0
@@ -242,105 +242,107 @@ function at(i) {
       }
     }), o);
     var a = u;
-    return typeof a == "function" ? ae(a, o) : u = o, f(o, v(B, {
+    return typeof a == "function" ? ie(a, o) : u = o, f(o, v(B, {
       get when() {
-        return se(() => !!P())() && E().visible;
+        return le(() => !!P())() && E().visible;
       },
       get children() {
-        var t = De();
-        return x((r) => {
-          var c = g("pointer-events-none absolute bottom-0 left-0 z-10", q().sliderHeightClass, O().sliderBgClass, p() ? "transition-[transform,width] duration-200 ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", e.slotClassNames?.indicator), l = `translate3d(${E().x}px, 0, 0)`, A = `${E().width}px`;
-          return c !== r.e && y(t, r.e = c), l !== r.t && ne(t, "transform", r.t = l), A !== r.a && ne(t, "width", r.a = A), r;
+        var t = Oe();
+        return y((r) => {
+          var c = g("pointer-events-none absolute bottom-0 left-0 z-10", q().sliderHeightClass, O().sliderBgClass, x() ? "transition-[transform,width] duration-200 ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", e.slotClassNames?.indicator), l = `translate3d(${E().x}px, 0, 0)`, A = `${E().width}px`;
+          return c !== r.e && k(t, r.e = c), l !== r.t && ae(t, "transform", r.t = l), A !== r.a && ae(t, "width", r.a = A), r;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         }), t;
       }
-    }), null), f(o, v(Le, {
+    }), null), f(o, v(Te, {
       get each() {
         return e.items;
       },
       children: (t) => {
         const r = () => t.id === G(), c = () => t.closable ?? z();
         return (() => {
-          var l = Ge(), A = l.firstChild;
-          return l.$$keydown = (s) => {
-            if (s.key === "Enter" || s.key === " ") {
-              s.preventDefault(), U(t.id, t.disabled);
+          var l = Xe(), A = l.firstChild;
+          return l.$$keydown = (n) => {
+            if (n.key === "Enter" || n.key === " ") {
+              n.preventDefault(), U(t.id, t.disabled);
               return;
             }
-            Ie(s, t);
-          }, l.$$click = () => U(t.id, t.disabled), ae((s) => {
-            H.set(t.id, s), ie(() => H.delete(t.id));
+            Ae(n, t);
+          }, l.$$click = () => U(t.id, t.disabled), ie((n) => {
+            H.set(t.id, n), ce(() => H.delete(t.id));
           }, l), f(l, v(B, {
             get when() {
               return t.icon;
             },
             get children() {
-              var s = Fe();
-              return f(s, () => t.icon), s;
+              var n = Ge();
+              return f(n, () => t.icon), n;
             }
           }), A), f(A, () => t.label), f(l, v(B, {
             get when() {
-              return se(() => !!c())() && !t.disabled;
+              return le(() => !!c())() && !t.disabled;
             },
             get children() {
-              var s = je();
-              return s.$$click = (m) => Se(m, t.id), f(s, v(ze, {
+              var n = Ue();
+              return n.$$click = (m) => $e(m, t.id), f(n, v(He, {
                 class: "w-3 h-3"
-              })), x((m) => {
+              })), y((m) => {
                 var $ = g("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded cursor-pointer", "bg-transparent text-muted-foreground", T() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-muted/80 hover:text-foreground", "transition-colors duration-120", "ml-1.5", e.slotClassNames?.closeButton), N = `Close ${t.label}`;
-                return $ !== m.e && y(s, m.e = $), N !== m.t && k(s, "aria-label", m.t = N), m;
+                return $ !== m.e && k(n, m.e = $), N !== m.t && p(n, "aria-label", m.t = N), m;
               }, {
                 e: void 0,
                 t: void 0
-              }), s;
+              }), n;
             }
-          }), null), x((s) => {
-            var m = $e(r(), t.disabled), $ = r() ? "raised" : "flat", N = r(), re = t.disabled, oe = t.disabled ? -1 : r() ? 0 : -1;
-            return m !== s.e && y(l, s.e = m), $ !== s.t && k(l, "data-floe-surface", s.t = $), N !== s.a && k(l, "aria-selected", s.a = N), re !== s.o && k(l, "aria-disabled", s.o = re), oe !== s.i && k(l, "tabindex", s.i = oe), s;
+          }), null), y((n) => {
+            var m = Le(r(), t.disabled), $ = t.domId, N = t.panelId, re = r() ? "raised" : "flat", oe = r(), ne = t.disabled, se = t.disabled ? -1 : r() ? 0 : -1;
+            return m !== n.e && k(l, n.e = m), $ !== n.t && p(l, "id", n.t = $), N !== n.a && p(l, "aria-controls", n.a = N), re !== n.o && p(l, "data-floe-surface", n.o = re), oe !== n.i && p(l, "aria-selected", n.i = oe), ne !== n.n && p(l, "aria-disabled", n.n = ne), se !== n.s && p(l, "tabindex", n.s = se), n;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
             o: void 0,
-            i: void 0
+            i: void 0,
+            n: void 0,
+            s: void 0
           }), l;
         })();
       }
-    }), null), f(n, v(B, {
+    }), null), f(s, v(B, {
       get when() {
-        return fe();
+        return he();
       },
       get children() {
-        var t = Me();
+        var t = We();
         return t.$$click = () => {
           const r = e.onAdd;
-          r && M(() => r());
-        }, f(t, v(Ee, {
+          r && _(() => r());
+        }, f(t, v(Pe, {
           get class() {
             return e.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4";
           }
-        })), 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-120", e.size === "sm" ? "w-6 h-6" : "w-7 h-7", e.slotClassNames?.addButton))), t;
+        })), y(() => k(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-120", e.size === "sm" ? "w-6 h-6" : "w-7 h-7", e.slotClassNames?.addButton))), t;
       }
-    }), null), f(n, v(B, {
+    }), null), f(s, v(B, {
       get when() {
         return te();
       },
       get children() {
-        var t = Oe();
-        return t.$$click = ke, f(t, v(He, {
+        var t = Fe();
+        return t.$$click = Ie, f(t, v(De, {
           class: "w-4 h-4"
-        })), x((r) => {
+        })), y((r) => {
           var c = !ee(), l = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-[color,background-color,opacity] duration-120", ee() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
-          return c !== r.e && (t.disabled = r.e = c), l !== r.t && y(t, r.t = l), r;
+          return c !== r.e && (t.disabled = r.e = c), l !== r.t && k(t, r.t = l), r;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
-    }), null), x((t) => {
+    }), null), y((t) => {
       var r = g(
         "relative flex-1 flex items-end gap-0.5 overflow-x-auto",
         "scrollbar-none",
@@ -348,22 +350,22 @@ function at(i) {
         "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
         e.slotClassNames?.scrollContainer
       ), c = e.ariaLabel;
-      return r !== t.e && y(o, t.e = r), c !== t.t && k(o, "aria-label", t.t = c), t;
+      return r !== t.e && k(o, t.e = r), c !== t.t && p(o, "aria-label", t.t = c), t;
     }, {
       e: void 0,
       t: void 0
-    }), n;
+    }), s;
   })();
 }
-function lt(i) {
-  const [e, h] = ue(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
+function dt(i) {
+  const [e, h] = ve(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
   return v(B, {
     get when() {
       return e.keepMounted || e.active;
     },
     get children() {
-      var d = Ue();
-      return de(d, ce({
+      var d = Ve();
+      return ue(d, fe({
         get "aria-labelledby"() {
           return e.labelledBy;
         },
@@ -380,9 +382,9 @@ function lt(i) {
     }
   });
 }
-Ne(["click", "keydown"]);
+Re(["click", "keydown"]);
 export {
-  lt as TabPanel,
-  at as Tabs,
-  Xe as resolveTabNavigationTargetId
+  dt as TabPanel,
+  it as Tabs,
+  qe as resolveTabNavigationTargetId
 };