@vertz/ui-primitives 0.2.22 → 0.2.24

package/dist/shared/chunk-nsmvdxgp.js

@@ -0,0 +1,213 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createFloatingPosition,
+  resolveLayoutElement
+} from "./chunk-vef3sepw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/hover-card/hover-card-composed.tsx
+import { computed, signal } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, ref, useContext } from "@vertz/ui";
+var HoverCardContext = createContext(undefined, "@vertz/ui-primitives::HoverCardContext");
+function useHoverCardContext(componentName) {
+  const ctx = useContext(HoverCardContext);
+  if (!ctx) {
+    throw new Error(`<HoverCard.${componentName}> must be used inside <HoverCard>. ` + "Ensure it is a direct or nested child of the HoverCard root component.");
+  }
+  return ctx;
+}
+function HoverCardTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useHoverCardContext("Trigger");
+    const childNodes = computed(() => Array.isArray(__props.children) ? __props.children : [__props.children]);
+    const childEl = computed(() => childNodes.value.find((c) => c instanceof HTMLElement));
+    if (childEl.value) {
+      childEl.value.setAttribute("aria-haspopup", "dialog");
+      childEl.value.setAttribute("aria-expanded", ctx.isOpen() ? "true" : "false");
+      childEl.value.addEventListener("focus", () => ctx.showImmediate());
+      childEl.value.addEventListener("blur", () => ctx.hide());
+    }
+    const __mfResult0 = (() => {
+      const __el0 = __element("span");
+      ctx.triggerRef.current = __el0;
+      {
+        const __v = { display: "contents" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __el0.setAttribute("data-hovercard-trigger", "");
+      __on(__el0, "mouseenter", () => ctx.show());
+      __on(__el0, "mouseleave", () => ctx.hide());
+      __on(__el0, "focusin", () => ctx.showImmediate());
+      __on(__el0, "focusout", () => ctx.hide());
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function HoverCardContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useHoverCardContext("Content");
+    const isOpen = ctx.isOpen();
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      __el0.setAttribute("role", "dialog");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-hovercard-content", "");
+      {
+        const __v = isOpen ? "false" : "true";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-hidden", __v === true ? "" : __v);
+      }
+      {
+        const __v = isOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = { display: isOpen ? "" : "none" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.content, __props.className ?? __props.class));
+      __on(__el0, "mouseenter", () => ctx.cancelCloseTimer());
+      __on(__el0, "mouseleave", () => ctx.hide());
+      __on(__el0, "focusin", () => ctx.cancelCloseTimer());
+      __on(__el0, "focusout", () => ctx.hide());
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedHoverCardRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let cancelTimers = function() {
+      if (timers.open) {
+        clearTimeout(timers.open);
+        timers.open = null;
+      }
+      if (timers.close) {
+        clearTimeout(timers.close);
+        timers.close = null;
+      }
+    }, cancelCloseTimer = function() {
+      if (timers.close) {
+        clearTimeout(timers.close);
+        timers.close = null;
+      }
+    }, applyFloating = function() {
+      const triggerSpan = triggerRef.current;
+      const contentEl = contentRef.current;
+      if (!triggerSpan || !contentEl)
+        return;
+      const triggerEl = resolveLayoutElement(triggerSpan);
+      contentEl.style.position = "fixed";
+      const floatingOpts = __props.positioning ?? { placement: "bottom", offset: 4 };
+      const result = createFloatingPosition(triggerEl, contentEl, floatingOpts);
+      timers.floatingCleanup = result.cleanup;
+    }, cleanupFloating = function() {
+      timers.floatingCleanup?.();
+      timers.floatingCleanup = null;
+    }, show = function() {
+      cancelTimers();
+      if (isOpen.value)
+        return;
+      timers.open = setTimeout(() => {
+        timers.open = null;
+        isOpen.value = true;
+        applyFloating();
+        __props.onOpenChange?.(true);
+      }, __props.openDelay ?? 700);
+    }, showImmediate = function() {
+      cancelTimers();
+      isOpen.value = true;
+      applyFloating();
+      __props.onOpenChange?.(true);
+    }, hide = function() {
+      cancelTimers();
+      if (!isOpen.value)
+        return;
+      timers.close = setTimeout(() => {
+        timers.close = null;
+        isOpen.value = false;
+        cleanupFloating();
+        __props.onOpenChange?.(false);
+      }, __props.closeDelay ?? 300);
+    }, hideImmediate = function() {
+      cancelTimers();
+      isOpen.value = false;
+      cleanupFloating();
+      __props.onOpenChange?.(false);
+    };
+    const contentId = uniqueId("hovercard");
+    const triggerRef = ref();
+    const contentRef = ref();
+    const isOpen = signal(false, "isOpen");
+    const timers = { open: null, close: null, floatingCleanup: null };
+    const ctx = {
+      isOpen: () => isOpen.value,
+      contentId,
+      triggerRef,
+      contentRef,
+      classes: __props.classes,
+      show,
+      hide,
+      showImmediate,
+      hideImmediate,
+      cancelCloseTimer
+    };
+    const __mfResult0 = HoverCardContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("span");
+      {
+        const __v = { display: "contents" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __el0.setAttribute("data-hovercard-root", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedHoverCard = Object.assign(ComposedHoverCardRoot, {
+  Trigger: HoverCardTrigger,
+  Content: HoverCardContent
+});
+
+export { ComposedHoverCard };

package/dist/shared/{chunk-w9dag6ce.js → chunk-pdzmg245.js}

@@ -21,98 +21,150 @@ import {
 } from "./chunk-2db2dnp3.js";
 
 // src/navigation-menu/navigation-menu.tsx
-import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
 function NavMenuList(triggers, orientation) {
-  return (() => {
-    const __el0 = __element("div");
-    __on(__el0, "keydown", (event) => {
-      if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End)) {
-        handleListNavigation(event, triggers, {
-          orientation: orientation === "horizontal" ? "horizontal" : "vertical"
-        });
-      }
-    });
-    return __el0;
-  })();
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End)) {
+          handleListNavigation(event, triggers, {
+            orientation: orientation === "horizontal" ? "horizontal" : "vertical"
+          });
+        }
+      });
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
 }
 function NavMenuViewport() {
-  return (() => {
-    const __el0 = __element("div");
-    return __el0;
-  })();
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
 }
 function NavMenuNav(list, viewport) {
-  return (() => {
-    const __el0 = __element("nav");
-    __enterChildren(__el0);
-    __insert(__el0, list);
-    __insert(__el0, viewport);
-    __exitChildren();
-    return __el0;
-  })();
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("nav");
+      __enterChildren(__el0);
+      __insert(__el0, list);
+      __insert(__el0, viewport);
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
 }
 function NavMenuItemTrigger(triggerId, contentId, value, label, onClick, onMouseenter, onMouseleave, onKeydown) {
-  return (() => {
-    const __el0 = __element("button");
-    __el0.setAttribute("type", "button");
-    {
-      const __v = triggerId;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("id", __v === true ? "" : __v);
-    }
-    {
-      const __v = contentId;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("aria-controls", __v === true ? "" : __v);
-    }
-    {
-      const __v = value;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("data-value", __v === true ? "" : __v);
-    }
-    __el0.setAttribute("aria-expanded", "false");
-    __el0.setAttribute("data-state", "closed");
-    __on(__el0, "click", onClick);
-    __on(__el0, "mouseenter", onMouseenter);
-    __on(__el0, "mouseleave", onMouseleave);
-    __on(__el0, "keydown", onKeydown);
-    __enterChildren(__el0);
-    __insert(__el0, label ?? value);
-    __exitChildren();
-    return __el0;
-  })();
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      {
+        const __v = triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-expanded", "false");
+      __el0.setAttribute("data-state", "closed");
+      __on(__el0, "click", onClick);
+      __on(__el0, "mouseenter", onMouseenter);
+      __on(__el0, "mouseleave", onMouseleave);
+      __on(__el0, "keydown", onKeydown);
+      __enterChildren(__el0);
+      __insert(__el0, label ?? value);
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
 }
 function NavMenuItemContent(contentId, onMouseenter, onMouseleave, onKeydown) {
-  return (() => {
-    const __el0 = __element("div");
-    {
-      const __v = contentId;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("id", __v === true ? "" : __v);
-    }
-    __el0.setAttribute("aria-hidden", "true");
-    __el0.setAttribute("data-state", "closed");
-    __el0.setAttribute("style", "display: none");
-    __on(__el0, "mouseenter", onMouseenter);
-    __on(__el0, "mouseleave", onMouseleave);
-    __on(__el0, "keydown", onKeydown);
-    return __el0;
-  })();
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      {
+        const __v = contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-hidden", "true");
+      __el0.setAttribute("data-state", "closed");
+      {
+        const __v = { display: "none" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __on(__el0, "mouseenter", onMouseenter);
+      __on(__el0, "mouseleave", onMouseleave);
+      __on(__el0, "keydown", onKeydown);
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
 }
 function NavMenuLink(href, label) {
-  return (() => {
-    const __el0 = __element("a");
-    {
-      const __v = href;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("href", __v === true ? "" : __v);
-    }
-    __enterChildren(__el0);
-    __insert(__el0, label);
-    __exitChildren();
-    return __el0;
-  })();
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("a");
+      {
+        const __v = href;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("href", __v === true ? "" : __v);
+      }
+      __enterChildren(__el0);
+      __insert(__el0, label);
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
 }
 function NavigationMenuRoot(options = {}) {
   const { orientation = "horizontal", delayOpen = 200, delayClose = 300, ...attrs } = options;
@@ -218,14 +270,10 @@ function NavigationMenuRoot(options = {}) {
     triggers.push(trigger);
     setRovingTabindex(triggers, 0);
     items.set(value, { trigger, content: contentEl });
-    list.appendChild(trigger);
-    viewport.appendChild(contentEl);
     return { trigger, content: contentEl };
   }
   function Link(href, label) {
-    const a = NavMenuLink(href, label);
-    list.appendChild(a);
-    return a;
+    return NavMenuLink(href, label);
   }
   applyAttrs(root, attrs);
   return { root, list, viewport, state, Item, Link };