@floegence/floe-webapp-core 0.62.0 → 0.64.0

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

@@ -4,7 +4,8 @@ export interface DialogProps {
     onOpenChange: (open: boolean) => void;
     /** Dialog title - can be a string or JSX element for custom headers */
     title?: string | JSX.Element;
-    description?: string;
+    /** Plain-text guidance rendered at the start of the body, never in the header. */
+    bodyDescription?: string;
     /** Localized accessible name for the close button. */
     closeLabel?: string;
     /** Whether clicking the backdrop requests dismissal. Defaults to true. */
@@ -17,7 +18,7 @@ export interface DialogProps {
     class?: string;
     /** Bottom drawers retain the same modal and surface-placement contract. */
     presentation?: 'dialog' | 'bottom-drawer';
-    /** Undefined uses the default header; null leaves only accessible title/description. */
+    /** Undefined uses the default header; null leaves only the accessible title. */
     header?: JSX.Element;
     contentClass?: string;
     /** Includes the exit animation, so hosts can retain background input isolation. */
@@ -36,9 +37,9 @@ export interface ConfirmDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title: string;
-    /** Description displayed under title (header area). Use children for content area. */
-    description?: string;
-    /** Custom content in the dialog body. If not provided, an empty placeholder is used. */
+    /** Plain-text guidance rendered in the body; use children for rich content. */
+    bodyDescription?: string;
+    /** Optional custom content after the body description. */
     children?: JSX.Element;
     confirmText?: string;
     cancelText?: string;

package/dist/components/ui/Dialog.js

@@ -1,19 +1,19 @@
-import { createComponent as r, use as L, setAttribute as s, style as ee, Portal as te, spread as B, mergeProps as F, memo as C, insert as i, effect as A, className as N, template as c } from "solid-js/web";
-import { createUniqueId as ne, createSignal as I, createEffect as G, onCleanup as j, createMemo as q, Show as f, untrack as re } from "solid-js";
-import { cn as w } from "../../utils/cn.js";
-import { Button as E } from "./Button.js";
+import { createComponent as r, use as L, setAttribute as s, style as ee, Portal as te, spread as T, mergeProps as B, memo as _, insert as l, effect as D, className as N, template as g } from "solid-js/web";
+import { createUniqueId as ne, createSignal as F, createEffect as G, onCleanup as j, createMemo as q, Show as f, untrack as re } from "solid-js";
+import { cn as y } from "../../utils/cn.js";
+import { Button as I } from "./Button.js";
 import { X as oe } from "../icons/index.js";
-import { useResolvedFloeConfig as ie } from "../../context/FloeConfigContext.js";
+import { useResolvedFloeConfig as ae } from "../../context/FloeConfigContext.js";
 import { useOverlayMask as le } from "../../hooks/useOverlayMask.js";
-import { resolveSurfacePortalHost as ae, DIALOG_SURFACE_BOUNDARY_ATTR as O, SURFACE_PORTAL_LAYER_ATTR as de, DIALOG_SURFACE_HOST_ATTR as ce, isSurfacePortalMode as K, projectSurfacePortalRect as ue, resolveSurfacePortalBoundaryRect as se, resolveSurfacePortalMount as fe } from "./dialogSurfaceScope.js";
+import { resolveSurfacePortalHost as ie, DIALOG_SURFACE_BOUNDARY_ATTR as A, SURFACE_PORTAL_LAYER_ATTR as de, DIALOG_SURFACE_HOST_ATTR as ce, isSurfacePortalMode as K, projectSurfacePortalRect as ue, resolveSurfacePortalBoundaryRect as se, resolveSurfacePortalMount as fe } from "./dialogSurfaceScope.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as ge } from "./localInteractionSurface.js";
 import { createFloatingPresence as me } from "./floatingPresence.js";
 import { useDialogPlacement as he } from "./DialogPlacementContext.js";
-var be = /* @__PURE__ */ c("<span aria-hidden=true>"), we = /* @__PURE__ */ c('<h2 class="text-sm font-semibold">'), ve = /* @__PURE__ */ c('<p class="mt-0.5 text-xs text-muted-foreground">'), ye = /* @__PURE__ */ c('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), xe = /* @__PURE__ */ c('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), $e = /* @__PURE__ */ c("<div><div></div><div><div data-floe-surface=floating><div>"), _e = /* @__PURE__ */ c("<h2 class=sr-only>"), Ce = /* @__PURE__ */ c("<p class=sr-only>"), Ae = /* @__PURE__ */ c("<div>");
-const Oe = {
+var be = /* @__PURE__ */ g("<span aria-hidden=true>"), we = /* @__PURE__ */ g('<h2 class="text-sm font-semibold">'), ye = /* @__PURE__ */ g('<div data-floe-dialog-header class="flex items-start justify-between p-3 border-b border-border"><div>'), ve = /* @__PURE__ */ g('<p class="mb-3 shrink-0 text-sm text-muted-foreground last:mb-0">'), xe = /* @__PURE__ */ g('<div data-floe-dialog-footer class="flex items-center justify-end gap-2 p-3 border-t border-border">'), $e = /* @__PURE__ */ g("<div><div></div><div><div data-floe-surface=floating><div data-floe-dialog-body>"), Ce = /* @__PURE__ */ g("<h2 class=sr-only>");
+const _e = {
   display: "none"
 };
-function Re(e) {
+function Ae(e) {
   if (typeof queueMicrotask == "function") {
     queueMicrotask(e);
     return;
@@ -23,59 +23,59 @@ function Re(e) {
 function U(e) {
   return `${e.left}|${e.top}|${e.right}|${e.bottom}|${e.width}|${e.height}`;
 }
-function ke(e) {
+function Oe(e) {
   return typeof window < "u" && typeof window.requestAnimationFrame == "function" ? window.requestAnimationFrame(e) : window.setTimeout(() => e(Date.now()), 16);
 }
-function Pe(e) {
+function ke(e) {
   if (typeof window < "u" && typeof window.cancelAnimationFrame == "function") {
     window.cancelAnimationFrame(e);
     return;
   }
   window.clearTimeout(e);
 }
-function pe(e) {
-  const v = he(), g = ne(), p = () => `dialog-${g}-title`, S = () => `dialog-${g}-description`;
-  let T;
-  const [R, z] = I(null), [M, Z] = I(0), [V, W] = I(0), m = () => e.presentation === "bottom-drawer", u = me({
-    open: () => e.open && !!R() && M() > 0,
+function Re(e) {
+  const v = he(), c = ne(), P = () => `dialog-${c}-title`, E = () => `dialog-${c}-description`;
+  let p;
+  const [O, z] = F(null), [M, Z] = F(0), [V, W] = F(0), u = () => e.presentation === "bottom-drawer", d = me({
+    open: () => e.open && !!O() && M() > 0,
     get exitDurationMs() {
-      return m() ? 180 : 160;
+      return u() ? 180 : 160;
     }
-  }), y = () => u.mounted() && !!R() && M() > 0;
-  G(() => e.onPresenceChange?.(y())), j(() => e.onPresenceChange?.(!1));
+  }), x = () => d.mounted() && !!O() && M() > 0;
+  G(() => e.onPresenceChange?.(x())), j(() => e.onPresenceChange?.(!1));
   const Y = (n) => {
-    z(n), Re(() => {
-      re(R) === n && Z((d) => d + 1);
+    z(n), Ae(() => {
+      re(O) === n && Z((i) => i + 1);
     });
-  }, k = q(() => y() ? ae({
-    owner: R()
+  }, k = q(() => x() ? ie({
+    owner: O()
   }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), x = () => `dialog-boundary-${g}`, o = () => v.mode() === "auto" && K(k()), X = () => o() ? fe(k()) : void 0, H = () => e.globalZIndex ?? v.globalZIndex(), D = (n) => ue(se(n), n), J = () => D(k()), P = q(() => (V(), J())), Q = (n) => typeof Element < "u" && n instanceof Element ? !!n.closest(`[${O}="${x()}"]`) : typeof Node < "u" && n instanceof Node ? !!n.parentElement?.closest(`[${O}="${x()}"]`) : !1;
+  }), $ = () => `dialog-boundary-${c}`, o = () => v.mode() === "auto" && K(k()), X = () => o() ? fe(k()) : void 0, H = () => e.globalZIndex ?? v.globalZIndex(), S = (n) => ue(se(n), n), J = () => S(k()), R = q(() => (V(), J())), Q = (n) => typeof Element < "u" && n instanceof Element ? !!n.closest(`[${A}="${$()}"]`) : typeof Node < "u" && n instanceof Node ? !!n.parentElement?.closest(`[${A}="${$()}"]`) : !1;
   return G(() => {
     const n = k();
-    if (!y() || !o() || typeof window > "u")
+    if (!x() || !o() || typeof window > "u")
       return;
-    let d = !1, b = null, l = U(D(n));
-    const $ = () => {
-      if (d || !K(n))
+    let i = !1, m = null, a = U(S(n));
+    const h = () => {
+      if (i || !K(n))
         return;
-      const t = U(D(n));
-      t !== l && (l = t, W((h) => h + 1));
-    }, _ = () => {
-      d || (b = ke(() => {
-        $(), _();
+      const t = U(S(n));
+      t !== a && (a = t, W((b) => b + 1));
+    }, C = () => {
+      i || (m = Oe(() => {
+        h(), C();
       }));
     };
-    _(), j(() => {
-      d = !0, b !== null && Pe(b);
+    C(), j(() => {
+      i = !0, m !== null && ke(m);
     });
   }), le({
-    open: y,
-    root: () => T,
+    open: x,
+    root: () => p,
     containsTarget: Q,
     onClose: () => e.onOpenChange(!1),
     lockBodyScroll: () => !o(),
@@ -89,10 +89,10 @@ function pe(e) {
     restoreFocus: !0
   }), [(() => {
     var n = be();
-    return L(Y, n), s(n, "data-floe-dialog-owner-anchor", g), ee(n, Oe), n;
+    return L(Y, n), s(n, "data-floe-dialog-owner-anchor", c), ee(n, _e), n;
   })(), r(f, {
     get when() {
-      return y();
+      return x();
     },
     get children() {
       return r(te, {
@@ -100,8 +100,8 @@ function pe(e) {
           return X();
         },
         get children() {
-          var n = $e(), d = n.firstChild, b = d.nextSibling, l = b.firstChild, $ = l.firstChild;
-          s(n, "data-floe-dialog-overlay-root", g), B(n, F({
+          var n = $e(), i = n.firstChild, m = i.nextSibling, a = m.firstChild, h = a.firstChild;
+          s(n, "data-floe-dialog-overlay-root", c), T(n, B({
             get "data-floe-dialog-mode"() {
               return o() ? "surface" : "global";
             },
@@ -109,70 +109,70 @@ function pe(e) {
               return e.presentation ?? "dialog";
             },
             get "data-floating-presence"() {
-              return u.state();
+              return d.state();
             },
             get "aria-hidden"() {
-              return u.exiting() ? "true" : void 0;
+              return d.exiting() ? "true" : void 0;
             }
           }, {
             [ge]: "true"
           }, () => ({
             [de]: "true",
-            [O]: x()
+            [A]: $()
           }), {
             get class() {
-              return w(o() ? "absolute z-20 box-border p-3" : w("fixed inset-0 box-border p-4", H() === void 0 && "z-50"), m() && "floe-bottom-drawer-overlay", u.exiting() && !m() && "pointer-events-none");
+              return y(o() ? "absolute z-20 box-border p-3" : y("fixed inset-0 box-border p-4", H() === void 0 && "z-50"), u() && "floe-bottom-drawer-overlay", d.exiting() && !u() && "pointer-events-none");
             },
             get style() {
-              return C(() => !!o())() ? {
-                left: `${P().left}px`,
-                top: `${P().top}px`,
-                width: `${P().width}px`,
-                height: `${P().height}px`
+              return _(() => !!o())() ? {
+                left: `${R().left}px`,
+                top: `${R().top}px`,
+                width: `${R().width}px`,
+                height: `${R().height}px`
               } : {
                 "z-index": H()
               };
             }
-          }), !1, !0), s(d, "data-floe-dialog-backdrop", g), B(d, F(() => ({
-            [O]: x()
+          }), !1, !0), s(i, "data-floe-dialog-backdrop", c), T(i, B(() => ({
+            [A]: $()
           }), {
             get "data-floating-presence"() {
-              return u.state();
+              return d.state();
             },
             get class() {
-              return w("absolute inset-0 floe-floating-presence floe-floating-backdrop", e.closeOnBackdropClick === !1 ? "cursor-default" : "cursor-pointer", m() ? "floe-bottom-drawer-backdrop" : o() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
+              return y("absolute inset-0 floe-floating-presence floe-floating-backdrop", e.closeOnBackdropClick === !1 ? "cursor-default" : "cursor-pointer", u() ? "floe-bottom-drawer-backdrop" : o() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
             },
             onClick: () => {
-              !u.exiting() && e.closeOnBackdropClick !== !1 && e.onOpenChange(!1);
+              !d.exiting() && e.closeOnBackdropClick !== !1 && e.onOpenChange(!1);
             }
           }), !1, !1);
-          var _ = T;
-          return typeof _ == "function" ? L(_, l) : T = l, s(l, "data-floe-dialog-panel", g), B(l, F(() => ({
-            [O]: x(),
+          var C = p;
+          return typeof C == "function" ? L(C, a) : p = a, s(a, "data-floe-dialog-panel", c), T(a, B(() => ({
+            [A]: $(),
             [ce]: "true"
           }), {
             get class() {
-              return w(o() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "floe-floating-presence", m() ? "floe-bottom-drawer-panel" : "floe-floating-dialog-panel", "pointer-events-auto flex flex-col", e.class);
+              return y(o() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "floe-floating-presence", u() ? "floe-bottom-drawer-panel" : "floe-floating-dialog-panel", "pointer-events-auto flex flex-col", e.class);
             },
             get "data-floating-presence"() {
-              return u.state();
+              return d.state();
             },
             get inert() {
-              return C(() => !!m())() && u.exiting();
+              return _(() => !!u())() && d.exiting();
             },
             role: "dialog",
             get "aria-modal"() {
               return o() ? void 0 : "true";
             },
             get "aria-labelledby"() {
-              return C(() => !!e.title)() ? p() : void 0;
+              return _(() => !!e.title)() ? P() : void 0;
             },
             get "aria-describedby"() {
-              return C(() => !!e.description)() ? S() : void 0;
+              return _(() => !!e.bodyDescription)() ? E() : void 0;
             },
             onKeyDown: (t) => e.onKeyDown?.(t),
             tabIndex: -1
-          }), !1, !0), i(l, r(f, {
+          }), !1, !0), l(a, r(f, {
             get when() {
               return e.header === void 0;
             },
@@ -181,44 +181,28 @@ function pe(e) {
                 get when() {
                   return e.title;
                 },
-                get children() {
-                  var t = _e();
-                  return i(t, () => e.title), A(() => s(t, "id", p())), t;
-                }
-              }), r(f, {
-                get when() {
-                  return e.description;
-                },
                 get children() {
                   var t = Ce();
-                  return i(t, () => e.description), A(() => s(t, "id", S())), t;
+                  return l(t, () => e.title), D(() => s(t, "id", P())), t;
                 }
-              }), C(() => e.header)];
+              }), _(() => e.header)];
             },
             get children() {
               return r(f, {
                 get when() {
-                  return e.title || e.description;
+                  return e.title;
                 },
                 get children() {
-                  var t = ye(), h = t.firstChild;
-                  return i(h, r(f, {
+                  var t = ye(), b = t.firstChild;
+                  return l(b, r(f, {
                     get when() {
                       return e.title;
                     },
                     get children() {
-                      var a = we();
-                      return i(a, () => e.title), A(() => s(a, "id", p())), a;
+                      var w = we();
+                      return l(w, () => e.title), D(() => s(w, "id", P())), w;
                     }
-                  }), null), i(h, r(f, {
-                    get when() {
-                      return e.description;
-                    },
-                    get children() {
-                      var a = ve();
-                      return i(a, () => e.description), A(() => s(a, "id", S())), a;
-                    }
-                  }), null), i(t, r(E, {
+                  })), l(t, r(I, {
                     variant: "ghost-destructive",
                     size: "icon",
                     class: "-my-2 -mr-2 h-[46px] w-[46px] shrink-0 sm:my-0 sm:-mr-1 sm:h-6 sm:w-6",
@@ -235,17 +219,25 @@ function pe(e) {
                 }
               });
             }
-          }), $), i($, () => e.children), i(l, r(f, {
+          }), h), l(h, r(f, {
+            get when() {
+              return e.bodyDescription;
+            },
+            get children() {
+              var t = ve();
+              return l(t, () => e.bodyDescription), D(() => s(t, "id", E())), t;
+            }
+          }), null), l(h, () => e.children, null), l(a, r(f, {
             get when() {
               return e.footer;
             },
             get children() {
               var t = xe();
-              return i(t, () => e.footer), t;
+              return l(t, () => e.footer), t;
             }
-          }), null), A((t) => {
-            var h = w("pointer-events-none relative z-[1] flex h-full w-full justify-center", m() ? "items-end" : "items-center"), a = w("min-h-0 flex-1 overflow-auto overscroll-contain p-3", e.contentClass);
-            return h !== t.e && N(b, t.e = h), a !== t.t && N($, t.t = a), t;
+          }), null), D((t) => {
+            var b = y("pointer-events-none relative z-[1] flex h-full w-full justify-center", u() ? "items-end" : "items-center"), w = y("min-h-0 flex-1 overflow-auto overscroll-contain p-3", e.contentClass);
+            return b !== t.e && N(m, t.e = b), w !== t.t && N(h, t.t = w), t;
           }, {
             e: void 0,
             t: void 0
@@ -255,9 +247,9 @@ function pe(e) {
     }
   })];
 }
-function je(e) {
-  const v = ie();
-  return r(pe, {
+function Ne(e) {
+  const v = ae();
+  return r(Re, {
     get open() {
       return e.open;
     },
@@ -267,14 +259,14 @@ function je(e) {
     get title() {
       return e.title;
     },
-    get description() {
-      return e.description;
+    get bodyDescription() {
+      return e.bodyDescription;
     },
     get globalZIndex() {
       return e.globalZIndex;
     },
     get footer() {
-      return [r(E, {
+      return [r(I, {
         variant: "ghost",
         onClick: () => e.onOpenChange(!1),
         get disabled() {
@@ -283,7 +275,7 @@ function je(e) {
         get children() {
           return e.cancelText ?? v.config.strings.confirmDialog.cancel;
         }
-      }), r(E, {
+      }), r(I, {
         get variant() {
           return e.variant === "destructive" ? "destructive" : "primary";
         },
@@ -299,11 +291,11 @@ function je(e) {
       })];
     },
     get children() {
-      return e.children ?? Ae();
+      return e.children;
     }
   });
 }
 export {
-  je as ConfirmDialog,
-  pe as Dialog
+  Ne as ConfirmDialog,
+  Re as Dialog
 };