@floegence/floe-webapp-core 0.52.13 → 0.53.1

package/dist/components/ui/SegmentedControl.js

@@ -1,4 +1,4 @@
-import { spread as _, mergeProps as k, insert as l, createComponent as v, memo as w, effect as z, setAttribute as b, className as $, template as p, delegateEvents as S } from "solid-js/web";
+import { spread as _, mergeProps as k, insert as a, createComponent as v, memo as w, effect as z, setAttribute as b, className as $, template as p, delegateEvents as S } from "solid-js/web";
 import { splitProps as P, For as A } from "solid-js";
 import { cn as g } from "../../utils/cn.js";
 var D = /* @__PURE__ */ p("<div role=group data-floe-surface=inset data-floe-surface-part=rail>"), E = /* @__PURE__ */ p('<button type=button role=radio data-floe-surface-part=segment><span class="inline-flex items-center gap-1.5">');
@@ -29,23 +29,23 @@ function B(x) {
       get class() {
         return g("floe-segmented-control inline-flex items-center rounded-lg border", s().container, t.disabled && "opacity-50 pointer-events-none", t.class);
       }
-    }, h), !1, !0), l(n, v(A, {
+    }, h), !1, !0), a(n, v(A, {
       get each() {
         return t.options;
       },
       children: (r) => {
-        const a = () => t.value === r.value, i = () => t.disabled || r.disabled;
+        const l = () => t.value === r.value, i = () => t.disabled || r.disabled;
         return (() => {
           var o = E(), c = o.firstChild;
-          return o.$$click = () => C(r.value, r.disabled), l(c, (() => {
+          return o.$$click = () => C(r.value, r.disabled), a(c, (() => {
             var e = w(() => !!r.icon);
             return () => e() && v(r.icon, {
               get class() {
                 return s().icon;
               }
             });
-          })(), null), l(c, () => r.label, null), z((e) => {
-            var d = a() ? "raised" : "flat", u = a(), f = i(), m = g("floe-segmented-control__item font-medium rounded-md transition-[background-color,border-color,color,box-shadow] duration-150 cursor-pointer", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", s().button, "border", a() && "floe-segmented-control__item--active", i() && "cursor-not-allowed opacity-50");
+          })(), null), a(c, () => r.label, null), z((e) => {
+            var d = l() ? "raised" : "flat", u = l(), f = i(), m = g("floe-segmented-control__item font-medium rounded-md transition-[background-color,border-color,color] duration-120 cursor-pointer", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", s().button, "border", l() && "floe-segmented-control__item--active", i() && "cursor-not-allowed opacity-50");
             return d !== e.e && b(o, "data-floe-surface", e.e = d), u !== e.t && b(o, "aria-checked", e.t = u), f !== e.a && (o.disabled = e.a = f), m !== e.o && $(o, e.o = m), e;
           }, {
             e: void 0,

package/dist/components/ui/Tabs.js

@@ -1,5 +1,5 @@
-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 le, 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 ae, createEffect as X, For as Le, onCleanup as ie } from "solid-js";
+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 { cn as g } from "../../utils/cn.js";
 import { deferAfterPaint as M } from "../../utils/defer.js";
 import { createUIFirstSelection as Re } from "../../utils/uiFirstSelection.js";
@@ -105,7 +105,7 @@ function Je(i) {
     visible: z > 0
   };
 }
-function lt(i) {
+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());
   let u;
   const K = (() => {
@@ -122,11 +122,11 @@ function lt(i) {
     if (!u || !P()) return !1;
     const o = H.get(n);
     if (!o) return !1;
-    const l = Je({
+    const a = Je({
       container: u,
       tab: o
     });
-    return F(l), l.visible;
+    return F(a), a.visible;
   }, ve = () => {
     if (!P()) {
       F(V);
@@ -135,11 +135,11 @@ function lt(i) {
     Y(G()) || F(V);
   }, _ = () => {
     j || (j = !0, M(() => {
-      j = !1, ae(() => {
+      j = !1, le(() => {
         S() && ve();
       });
     }));
-  }, J = () => e.activeId !== void 0, he = () => e.onChange ?? e.onActiveIdChange, [be, ge] = L(ae(() => e.defaultActiveId ?? e.items[0]?.id ?? "")), Q = Re({
+  }, 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);
@@ -153,9 +153,9 @@ function lt(i) {
     const {
       scrollLeft: n,
       scrollWidth: o,
-      clientWidth: l
-    } = u, t = o > l;
-    pe(t), me(n > 0), we(n + l < o - 1);
+      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();
@@ -179,9 +179,9 @@ function lt(i) {
     const o = () => {
       D(), _();
     };
-    let l;
-    typeof ResizeObserver < "u" ? (l = new ResizeObserver(o), l.observe(u)) : typeof window < "u" && window.addEventListener("resize", o), ie(() => {
-      u?.removeEventListener("scroll", n), l?.disconnect(), typeof window < "u" && window.removeEventListener("resize", o);
+    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);
     });
   }), X(() => {
     S() && (e.items.length, D(), _());
@@ -192,31 +192,31 @@ function lt(i) {
     const o = e.items.find((t) => t.id === n);
     if (!o) return;
     U(o.id, o.disabled);
-    const l = H.get(o.id);
-    l?.focus({
+    const a = H.get(o.id);
+    a?.focus({
       preventScroll: !0
-    }), l?.scrollIntoView({
+    }), a?.scrollIntoView({
       block: "nearest",
       inline: "nearest"
     });
   }, Ie = (n, o) => {
-    const l = Xe(e.items, o.id, n.key);
-    l && (n.preventDefault(), Be(l));
+    const a = Xe(e.items, o.id, n.key);
+    a && (n.preventDefault(), Be(a));
   }, Se = (n, o) => {
     n.stopPropagation();
-    const l = e.onClose;
-    if (!l) return;
+    const a = e.onClose;
+    if (!a) return;
     const t = o;
-    M(() => l(t));
+    M(() => a(t));
   }, Ae = {
     sm: "h-7 px-2 text-[11px]",
     md: "h-8 px-3 text-xs"
   }, $e = (n, o) => {
-    const l = "inline-flex items-center gap-1.5 font-medium transition-colors duration-150 whitespace-nowrap", t = o ? "cursor-not-allowed opacity-50" : "cursor-pointer", r = (() => {
+    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(l, 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, 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 (() => {
     var n = We(), o = n.firstChild;
@@ -233,24 +233,24 @@ function lt(i) {
         return t.$$click = ye, f(t, v(Ye, {
           class: "w-4 h-4"
         })), x((r) => {
-          var c = !Z(), a = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", 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), a !== r.t && y(t, r.t = a), 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;
         }, {
           e: void 0,
           t: void 0
         }), t;
       }
     }), o);
-    var l = u;
-    return typeof l == "function" ? le(l, o) : u = o, f(o, v(B, {
+    var a = u;
+    return typeof a == "function" ? ae(a, o) : u = o, f(o, v(B, {
       get when() {
         return se(() => !!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), a = `translate3d(${E().x}px, 0, 0)`, A = `${E().width}px`;
-          return c !== r.e && y(t, r.e = c), a !== r.t && ne(t, "transform", r.t = a), A !== r.a && ne(t, "width", r.a = A), 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;
         }, {
           e: void 0,
           t: void 0,
@@ -264,16 +264,16 @@ function lt(i) {
       children: (t) => {
         const r = () => t.id === G(), c = () => t.closable ?? z();
         return (() => {
-          var a = Ge(), A = a.firstChild;
-          return a.$$keydown = (s) => {
+          var l = Ge(), A = l.firstChild;
+          return l.$$keydown = (s) => {
             if (s.key === "Enter" || s.key === " ") {
               s.preventDefault(), U(t.id, t.disabled);
               return;
             }
             Ie(s, t);
-          }, a.$$click = () => U(t.id, t.disabled), le((s) => {
+          }, l.$$click = () => U(t.id, t.disabled), ae((s) => {
             H.set(t.id, s), ie(() => H.delete(t.id));
-          }, a), f(a, v(B, {
+          }, l), f(l, v(B, {
             get when() {
               return t.icon;
             },
@@ -281,7 +281,7 @@ function lt(i) {
               var s = Fe();
               return f(s, () => t.icon), s;
             }
-          }), A), f(A, () => t.label), f(a, v(B, {
+          }), A), f(A, () => t.label), f(l, v(B, {
             get when() {
               return se(() => !!c())() && !t.disabled;
             },
@@ -290,7 +290,7 @@ function lt(i) {
               return s.$$click = (m) => Se(m, t.id), f(s, v(ze, {
                 class: "w-3 h-3"
               })), x((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-150", "ml-1.5", e.slotClassNames?.closeButton), N = `Close ${t.label}`;
+                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;
               }, {
                 e: void 0,
@@ -299,14 +299,14 @@ function lt(i) {
             }
           }), 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(a, s.e = m), $ !== s.t && k(a, "data-floe-surface", s.t = $), N !== s.a && k(a, "aria-selected", s.a = N), re !== s.o && k(a, "aria-disabled", s.o = re), oe !== s.i && k(a, "tabindex", s.i = oe), s;
+            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;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
             o: void 0,
             i: void 0
-          }), a;
+          }), l;
         })();
       }
     }), null), f(n, v(B, {
@@ -322,7 +322,7 @@ function lt(i) {
           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-150", e.size === "sm" ? "w-6 h-6" : "w-7 h-7", e.slotClassNames?.addButton))), t;
+        })), 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;
       }
     }), null), f(n, v(B, {
       get when() {
@@ -333,8 +333,8 @@ function lt(i) {
         return t.$$click = ke, f(t, v(He, {
           class: "w-4 h-4"
         })), x((r) => {
-          var c = !ee(), a = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", 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), a !== r.t && y(t, r.t = a), 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;
         }, {
           e: void 0,
           t: void 0
@@ -355,7 +355,7 @@ function lt(i) {
     }), n;
   })();
 }
-function at(i) {
+function lt(i) {
   const [e, h] = ue(i, ["active", "keepMounted", "labelledBy", "class", "children"]);
   return v(B, {
     get when() {
@@ -382,7 +382,7 @@ function at(i) {
 }
 Ne(["click", "keydown"]);
 export {
-  at as TabPanel,
-  lt as Tabs,
+  lt as TabPanel,
+  at as Tabs,
   Xe as resolveTabNavigationTargetId
 };

package/dist/components/ui/floatingPresence.js

@@ -13,7 +13,7 @@ function F(e) {
   globalThis.clearTimeout(e);
 }
 function y(e) {
-  return h() ? Math.max(0, e.reducedMotionExitDurationMs ?? 1) : Math.max(0, e.exitDurationMs ?? 120);
+  return h() ? Math.max(0, e.reducedMotionExitDurationMs ?? 1) : Math.max(0, e.exitDurationMs ?? 160);
 }
 function A(e) {
   const o = g(() => e.open()), s = t(o), [a, m] = p(s), [l, i] = p(s ? "entering" : "exiting");