@floegence/floe-webapp-core 0.90.10 → 0.90.12

package/dist/components/ui/Dialog.js

@@ -6,8 +6,8 @@ import { X as de } from "../icons/index.js";
 import { useResolvedFloeConfig as se } from "../../context/FloeConfigContext.js";
 import { useOverlayMask as fe } from "../../hooks/useOverlayMask.js";
 import { resolveSurfacePortalHost as ce, DIALOG_SURFACE_BOUNDARY_ATTR as S, SURFACE_PORTAL_LAYER_ATTR as ue, DIALOG_SURFACE_HOST_ATTR as ge, isSurfacePortalMode as z, projectSurfacePortalRect as me, resolveSurfacePortalBoundaryRect as he, resolveSurfacePortalMount as ve } from "./dialogSurfaceScope.js";
-import { LOCAL_INTERACTION_SURFACE_ATTR as ye } from "./localInteractionSurface.js";
-import { createFloatingPresence as be } from "./floatingPresence.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as be } from "./localInteractionSurface.js";
+import { createFloatingPresence as ye } from "./floatingPresence.js";
 import { observeDialogHeight as we } from "./dialogHeightMotion.js";
 import { useDialogPlacement as pe } from "./DialogPlacementContext.js";
 import { observeViewport as xe, viewportStyle as $e } from "../../viewport.js";
@@ -41,7 +41,7 @@ function Ie(e) {
   le(() => B(xe(window, W)));
   const f = ie(), F = () => `dialog-${f}-title`, L = () => `dialog-${f}-description`;
   let A;
-  const [O, Y] = T(null), [N, X] = T(0), [J, Q] = T(0), C = () => e.presentation === "side-drawer", h = () => e.presentation === "bottom-drawer", i = be({
+  const [O, Y] = T(null), [N, X] = T(0), [J, Q] = T(0), C = () => e.presentation === "side-drawer", h = () => e.presentation === "bottom-drawer", i = ye({
     open: () => e.open && !!O() && N() > 0,
     element: () => A
   }), v = () => i.mounted() && !!O() && N() > 0;
@@ -67,19 +67,19 @@ function Ie(e) {
     const t = R();
     if (!v() || !a() || typeof window > "u")
       return;
-    let l = !1, y = null, d = Z(I(t));
-    const b = () => {
+    let l = !1, b = null, d = Z(I(t));
+    const y = () => {
       if (l || !z(t))
         return;
       const o = Z(I(t));
       o !== d && (d = o, Q((w) => w + 1));
     }, k = () => {
-      l || (y = Be(() => {
-        b(), k();
+      l || (b = Be(() => {
+        y(), k();
       }));
     };
     k(), B(() => {
-      l = !0, y !== null && Fe(y);
+      l = !0, b !== null && Fe(b);
     });
   }), fe({
     open: v,
@@ -108,7 +108,7 @@ function Ie(e) {
           return te();
         },
         get children() {
-          var t = Re(), l = t.firstChild, y = l.nextSibling, d = y.firstChild, b = d.firstChild;
+          var t = Re(), l = t.firstChild, b = l.nextSibling, d = b.firstChild, y = d.firstChild;
           c(t, "data-floe-dialog-overlay-root", f), E(t, M({
             get "data-floe-dialog-mode"() {
               return a() ? "surface" : "global";
@@ -123,7 +123,7 @@ function Ie(e) {
               return i.exiting() ? "true" : void 0;
             }
           }, {
-            [ye]: "true"
+            [be]: "true"
           }, () => ({
             [ue]: "true",
             [S]: _()
@@ -247,7 +247,7 @@ function Ie(e) {
                 }
               });
             }
-          }), b), s(b, r(u, {
+          }), y), s(y, r(u, {
             get when() {
               return e.bodyDescription;
             },
@@ -255,7 +255,7 @@ function Ie(e) {
               var o = Se();
               return s(o, () => e.bodyDescription), P(() => c(o, "id", L())), o;
             }
-          }), null), s(b, () => e.children, null), s(d, r(u, {
+          }), null), s(y, () => e.children, null), s(d, r(u, {
             get when() {
               return e.footer;
             },
@@ -264,8 +264,8 @@ function Ie(e) {
               return s(o, () => e.footer), o;
             }
           }), null), P((o) => {
-            var w = g("pointer-events-none relative z-[1] flex h-full w-full", C() ? e.drawerSide === "left" ? "items-stretch justify-start" : "items-stretch justify-end" : h() ? "items-end justify-center" : "items-center justify-center"), p = g("min-h-0 flex-1 overflow-auto overscroll-contain px-[var(--floe-pad-group)] py-[var(--floe-pad-group)]", e.contentClass);
-            return w !== o.e && K(y, o.e = w), p !== o.t && K(b, o.t = p), o;
+            var w = g("pointer-events-none relative z-[1] flex h-full w-full", C() ? e.drawerSide === "left" ? "items-stretch justify-start" : "items-stretch justify-end" : h() ? "items-end justify-center" : "items-center justify-center"), p = g("min-h-0 flex-1 overflow-auto overscroll-contain px-[var(--floe-pad-group)] py-[var(--floe-pad-group)] [&.overflow-auto]:[scrollbar-gutter:stable]", e.contentClass);
+            return w !== o.e && K(b, o.e = w), p !== o.t && K(y, o.t = p), o;
           }, {
             e: void 0,
             t: void 0

package/dist/components/ui/SegmentedControl.js

@@ -1,8 +1,8 @@
-import { spread as C, mergeProps as w, insert as i, createComponent as g, memo as z, effect as _, setAttribute as m, 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 b } 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 data-floe-interactive=item><span class="inline-flex items-center gap-1.5">');
-const F = {
+import { use as $, spread as V, mergeProps as q, insert as k, createComponent as W, memo as B, effect as j, setAttribute as p, className as A, setStyleProperty as x, template as H, delegateEvents as G } from "solid-js/web";
+import { splitProps as I, createSignal as J, createEffect as K, onMount as Q, onCleanup as D, For as U, untrack as X } from "solid-js";
+import { cn as z } from "../../utils/cn.js";
+var Y = /* @__PURE__ */ H("<div role=group data-floe-surface=inset data-floe-surface-part=rail><span aria-hidden=true>"), Z = /* @__PURE__ */ H('<button type=button role=radio data-floe-surface-part=segment data-floe-interactive=item><span class="inline-flex items-center gap-1.5"><span class=floe-segmented-control__label>');
+const ee = {
   sm: {
     container: "p-0.5 gap-0.5",
     button: "h-[var(--floe-control-height-xs)] px-[var(--floe-control-padding-sm)] rounded-sm",
@@ -19,46 +19,113 @@ const F = {
     icon: "w-4 h-4"
   }
 };
-function B(h) {
-  const [o, x] = P(h, ["value", "onChange", "options", "size", "disabled", "class"]), y = () => o.size ?? "md", a = () => F[y()], k = (n, r) => {
-    o.disabled || r || n !== o.value && o.onChange(n);
+function ne(L) {
+  const [r, N] = I(L, ["value", "onChange", "options", "size", "disabled", "class"]);
+  let d, c;
+  const b = /* @__PURE__ */ new Map(), [s, S] = J();
+  let f, u, h;
+  const y = () => {
+    const o = b.get(r.value);
+    if (!d || !o) {
+      u?.cancel(), S(void 0), h = void 0;
+      return;
+    }
+    if (!o.offsetWidth || !d.getClientRects().length) return;
+    const n = {
+      x: o.offsetLeft,
+      y: o.offsetTop,
+      width: o.offsetWidth,
+      height: o.offsetHeight
+    }, v = X(s);
+    if (v && Object.keys(n).every((a) => n[a] === v[a]) && h === r.value) return;
+    const e = v && h !== r.value && c && !window.matchMedia("(prefers-reduced-motion: reduce), (forced-colors: active)").matches ? getComputedStyle(c) : void 0, l = e ? {
+      transform: e.transform,
+      width: e.width
+    } : void 0;
+    if (u?.cancel(), S(n), h = r.value, l && c) {
+      const a = getComputedStyle(d);
+      u = c.animate([l, {
+        transform: `translate(${n.x}px, ${n.y}px)`,
+        width: `${n.width}px`
+      }], {
+        duration: parseFloat(a.getPropertyValue("--floe-duration-base")) || 200,
+        easing: a.getPropertyValue("--floe-ease-out").trim() || "ease-out"
+      }), u.id = "floe-segmented-selection";
+    }
+  };
+  K(() => {
+    r.value, r.options, r.size, y();
+  }), Q(() => {
+    if (typeof ResizeObserver < "u") {
+      f = new ResizeObserver(y), f.observe(d);
+      for (const o of b.values()) f.observe(o);
+    }
+    y();
+  }), D(() => {
+    f?.disconnect(), u?.cancel();
+  });
+  const P = () => r.size ?? "md", w = () => ee[P()], T = (o, n) => {
+    r.disabled || n || o !== r.value && r.onChange(o);
   };
   return (() => {
-    var n = D();
-    return C(n, w({
+    var o = Y(), n = o.firstChild, v = d;
+    typeof v == "function" ? $(v, o) : d = o, V(o, q({
+      get "data-floe-segmented-pill"() {
+        return s() ? "true" : void 0;
+      },
+      get "data-floe-segmented-motion"() {
+        return s() ? "ready" : void 0;
+      },
       get class() {
-        return b("floe-segmented-control inline-flex items-center border", "rounded-group", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", a().container, o.disabled && "opacity-50 pointer-events-none", o.class);
+        return z("floe-segmented-control relative inline-flex items-center border", "rounded-group", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", w().container, r.disabled && "opacity-50 pointer-events-none", r.class);
       }
-    }, x), !1, !0), i(n, g(A, {
+    }, N), !1, !0);
+    var C = c;
+    return typeof C == "function" ? $(C, n) : c = n, k(o, W(U, {
       get each() {
-        return o.options;
+        return r.options;
       },
-      children: (r) => {
-        const l = () => o.value === r.value, s = () => o.disabled || r.disabled;
+      children: (e) => {
+        const l = () => r.value === e.value, a = () => r.disabled || e.disabled;
         return (() => {
-          var t = E(), c = t.firstChild;
-          return t.$$click = () => k(r.value, r.disabled), i(c, (() => {
-            var e = z(() => !!r.icon);
-            return () => e() && g(r.icon, {
+          var i = Z(), g = i.firstChild, m = g.firstChild;
+          return i.$$click = () => T(e.value, e.disabled), $((t) => {
+            b.set(e.value, t), f?.observe(t), D(() => {
+              f?.unobserve(t), b.delete(e.value);
+            });
+          }, i), k(g, (() => {
+            var t = B(() => !!e.icon);
+            return () => t() && W(e.icon, {
               get class() {
-                return a().icon;
+                return w().icon;
               }
             });
-          })(), null), i(c, () => r.label, null), _((e) => {
-            var d = l() ? "raised" : "flat", f = l(), u = s(), v = b("floe-segmented-control__item font-medium cursor-pointer border", "transition-[background-color,border-color,color,box-shadow] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--floe-plane)]", a().button, l() ? "text-[var(--primary-foreground)]" : "text-[var(--floe-ink-soft)] hover:text-foreground", s() && "cursor-not-allowed opacity-50");
-            return d !== e.e && m(t, "data-floe-surface", e.e = d), f !== e.t && m(t, "aria-checked", e.t = f), u !== e.a && (t.disabled = e.a = u), v !== e.o && $(t, e.o = v), e;
+          })(), m), k(m, () => e.label), j((t) => {
+            var _ = e.label, M = e.label, O = l() ? "raised" : "flat", R = l(), E = a(), F = z("floe-segmented-control__item relative font-medium cursor-pointer border", "transition-[background-color,border-color,color,box-shadow] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--floe-plane)]", w().button, l() ? "text-[var(--primary-foreground)]" : "text-[var(--floe-ink-soft)] hover:text-foreground", a() && "cursor-not-allowed opacity-50");
+            return _ !== t.e && p(i, "aria-label", t.e = _), M !== t.t && p(i, "title", t.t = M), O !== t.a && p(i, "data-floe-surface", t.a = O), R !== t.o && p(i, "aria-checked", t.o = R), E !== t.i && (i.disabled = t.i = E), F !== t.n && A(i, t.n = F), t;
           }, {
             e: void 0,
             t: void 0,
             a: void 0,
-            o: void 0
-          }), t;
+            o: void 0,
+            i: void 0,
+            n: void 0
+          }), i;
         })();
       }
-    })), n;
+    }), null), j((e) => {
+      var l = z("floe-segmented-control__pill", P() === "lg" ? "rounded-md" : "rounded-sm"), a = s() ? "visible" : "hidden", i = `translate(${s()?.x ?? 0}px, ${s()?.y ?? 0}px)`, g = `${s()?.width ?? 0}px`, m = `${s()?.height ?? 0}px`;
+      return l !== e.e && A(n, e.e = l), a !== e.t && x(n, "visibility", e.t = a), i !== e.a && x(n, "transform", e.a = i), g !== e.o && x(n, "width", e.o = g), m !== e.i && x(n, "height", e.i = m), e;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    }), o;
   })();
 }
-S(["click"]);
+G(["click"]);
 export {
-  B as SegmentedControl
+  ne as SegmentedControl
 };