@vertz/ui-primitives 0.2.23 → 0.2.25

package/dist/shared/chunk-r3ngaa64.js

@@ -0,0 +1,418 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/navigation-menu/navigation-menu-composed.tsx
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, ref, useContext } from "@vertz/ui";
+var NavigationMenuContext = createContext(undefined, "@vertz/ui-primitives::NavigationMenuContext");
+var NavigationMenuListContext = createContext(undefined, "@vertz/ui-primitives::NavigationMenuListContext");
+var NavigationMenuItemContext = createContext(undefined, "@vertz/ui-primitives::NavigationMenuItemContext");
+function useNavigationMenuContext(componentName) {
+  const ctx = useContext(NavigationMenuContext);
+  if (!ctx) {
+    throw new Error(`<NavigationMenu.${componentName}> must be used inside <NavigationMenu>. ` + "Ensure it is a direct or nested child of the NavigationMenu root component.");
+  }
+  return ctx;
+}
+function useNavigationMenuListContext(componentName) {
+  const ctx = useContext(NavigationMenuListContext);
+  if (ctx === undefined && !useContext(NavigationMenuContext)) {
+    throw new Error(`<NavigationMenu.${componentName}> must be used inside <NavigationMenu.List>. ` + "Ensure it is a direct or nested child of the NavigationMenu.List component.");
+  }
+}
+function useNavigationMenuItemContext(componentName) {
+  const ctx = useContext(NavigationMenuItemContext);
+  if (!ctx) {
+    throw new Error(`<NavigationMenu.${componentName}> must be used inside <NavigationMenu.Item>. ` + "Ensure it is a direct or nested child of the NavigationMenu.Item component.");
+  }
+  return ctx;
+}
+function NavMenuList(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useNavigationMenuContext("List");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-part", "nav-list");
+      __el0.setAttribute("data-navmenu-list", "");
+      __attr(__el0, "class", () => cn(ctx.classes?.list, __props.className ?? __props.class));
+      __on(__el0, "keydown", (event) => {
+        if (!isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End))
+          return;
+        const listEl = event.currentTarget;
+        const currentTriggers = [
+          ...listEl.querySelectorAll("[data-navmenu-trigger]")
+        ];
+        const focused = document.activeElement;
+        const currentIndex = currentTriggers.indexOf(focused);
+        if (currentIndex < 0)
+          return;
+        let nextIndex = -1;
+        if (isKey(event, Keys.ArrowRight)) {
+          event.preventDefault();
+          nextIndex = (currentIndex + 1) % currentTriggers.length;
+        } else if (isKey(event, Keys.ArrowLeft)) {
+          event.preventDefault();
+          nextIndex = (currentIndex - 1 + currentTriggers.length) % currentTriggers.length;
+        } else if (isKey(event, Keys.Home)) {
+          event.preventDefault();
+          nextIndex = 0;
+        } else if (isKey(event, Keys.End)) {
+          event.preventDefault();
+          nextIndex = currentTriggers.length - 1;
+        }
+        const nextTrigger = currentTriggers[nextIndex];
+        if (nextTrigger) {
+          for (let i = 0;i < currentTriggers.length; i++) {
+            currentTriggers[i]?.setAttribute("tabindex", i === nextIndex ? "0" : "-1");
+          }
+          nextTrigger.focus();
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function NavMenuItem(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    useNavigationMenuListContext("Item");
+    const ids = linkedIds("nav-menu");
+    const triggerRef = ref();
+    const contentRef = ref();
+    const itemCtx = {
+      value: __props.value,
+      triggerId: ids.triggerId,
+      contentId: ids.contentId,
+      triggerRef,
+      contentRef
+    };
+    const __mfResult0 = NavigationMenuItemContext.Provider({ get value() {
+      return itemCtx;
+    }, 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-navmenu-item", "");
+      __attr(__el0, "data-value", () => __props.value);
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function NavMenuTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useNavigationMenuContext("Trigger");
+    const itemCtx = useNavigationMenuItemContext("Trigger");
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      itemCtx.triggerRef.current = __el0;
+      __el0.setAttribute("type", "button");
+      {
+        const __v = itemCtx.triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = itemCtx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-navmenu-trigger", "");
+      {
+        const __v = itemCtx.value;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-expanded", "false");
+      __el0.setAttribute("data-state", "closed");
+      __attr(__el0, "class", () => cn(ctx.classes?.trigger, __props.className ?? __props.class));
+      __on(__el0, "click", () => {
+        if (ctx.getActiveItem() === itemCtx.value) {
+          ctx.closeAll();
+        } else {
+          ctx.openItem(itemCtx.value);
+        }
+      });
+      __on(__el0, "mouseenter", () => {
+        ctx.cancelTimers();
+        ctx.scheduleOpen(itemCtx.value);
+      });
+      __on(__el0, "mouseleave", () => {
+        ctx.cancelTimers();
+        ctx.scheduleClose();
+      });
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          ctx.openItem(itemCtx.value);
+          queueMicrotask(() => {
+            const content = itemCtx.contentRef.current;
+            if (content) {
+              const first = content.querySelector("a, button, [tabindex]");
+              if (first)
+                first.focus();
+            }
+          });
+        }
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          ctx.closeAll();
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function NavMenuContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useNavigationMenuContext("Content");
+    const itemCtx = useNavigationMenuItemContext("Content");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      itemCtx.contentRef.current = __el0;
+      {
+        const __v = itemCtx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-part", "nav-content");
+      __el0.setAttribute("data-navmenu-content", "");
+      {
+        const __v = itemCtx.value;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-value", __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));
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.content, __props.className ?? __props.class));
+      __on(__el0, "mouseenter", () => ctx.cancelTimers());
+      __on(__el0, "mouseleave", () => {
+        ctx.cancelTimers();
+        ctx.scheduleClose();
+      });
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          event.stopPropagation();
+          ctx.closeAll();
+          const trigger = itemCtx.triggerRef.current;
+          if (trigger)
+            trigger.focus();
+        }
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function NavMenuLink(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useNavigationMenuContext("Link");
+    useNavigationMenuListContext("Link");
+    const __mfResult0 = (() => {
+      const __el0 = __element("a");
+      __attr(__el0, "href", () => __props.href);
+      __el0.setAttribute("data-navmenu-link", "");
+      __attr(__el0, "class", () => cn(ctx.classes?.link, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function NavMenuViewport(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useNavigationMenuContext("Viewport");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-part", "nav-viewport");
+      __el0.setAttribute("data-navmenu-viewport", "");
+      __attr(__el0, "class", () => cn(ctx.classes?.viewport, __props.className ?? __props.class));
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedNavigationMenuRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let cancelTimers = function() {
+      if (state.openTimeout) {
+        clearTimeout(state.openTimeout);
+        state.openTimeout = null;
+      }
+      if (state.closeTimeout) {
+        clearTimeout(state.closeTimeout);
+        state.closeTimeout = null;
+      }
+    }, getRootEl = function() {
+      return rootRef.current ?? null;
+    }, openItem = function(value) {
+      cancelTimers();
+      const root = getRootEl();
+      if (!root)
+        return;
+      if (state.activeItem && state.activeItem !== value) {
+        const prevTrigger = root.querySelector(`[data-navmenu-trigger][data-value="${state.activeItem}"]`);
+        const prevContent = root.querySelector(`[data-navmenu-content][data-value="${state.activeItem}"]`);
+        if (prevTrigger) {
+          prevTrigger.setAttribute("aria-expanded", "false");
+          prevTrigger.setAttribute("data-state", "closed");
+        }
+        if (prevContent) {
+          prevContent.setAttribute("data-state", "closed");
+          prevContent.setAttribute("aria-hidden", "true");
+          prevContent.style.display = "none";
+        }
+      }
+      const trigger = root.querySelector(`[data-navmenu-trigger][data-value="${value}"]`);
+      const content = root.querySelector(`[data-navmenu-content][data-value="${value}"]`);
+      if (!trigger || !content)
+        return;
+      state.activeItem = value;
+      trigger.setAttribute("aria-expanded", "true");
+      trigger.setAttribute("data-state", "open");
+      content.setAttribute("aria-hidden", "false");
+      content.setAttribute("data-state", "open");
+      content.style.display = "";
+      const viewport = root.querySelector("[data-navmenu-viewport]");
+      if (viewport && content.parentElement !== viewport) {
+        viewport.appendChild(content);
+      }
+    }, closeAll = function() {
+      cancelTimers();
+      const root = getRootEl();
+      if (!root || !state.activeItem)
+        return;
+      const trigger = root.querySelector(`[data-navmenu-trigger][data-value="${state.activeItem}"]`);
+      const content = root.querySelector(`[data-navmenu-content][data-value="${state.activeItem}"]`);
+      if (trigger) {
+        trigger.setAttribute("aria-expanded", "false");
+        trigger.setAttribute("data-state", "closed");
+      }
+      if (content) {
+        content.setAttribute("data-state", "closed");
+        content.setAttribute("aria-hidden", "true");
+        content.style.display = "none";
+      }
+      state.activeItem = null;
+    }, scheduleOpen = function(value) {
+      state.openTimeout = setTimeout(() => {
+        openItem(value);
+        state.openTimeout = null;
+      }, __props.delayOpen ?? 200);
+    }, scheduleClose = function() {
+      state.closeTimeout = setTimeout(() => {
+        closeAll();
+        state.closeTimeout = null;
+      }, __props.delayClose ?? 300);
+    };
+    const rootId = `nav-menu-${linkedIds("nav-root").triggerId}`;
+    const rootRef = ref();
+    const state = { activeItem: null, openTimeout: null, closeTimeout: null };
+    const ctx = {
+      rootId,
+      rootRef,
+      classes: __props.classes,
+      orientation: __props.orientation ?? "horizontal",
+      getActiveItem: () => state.activeItem,
+      openItem,
+      closeAll,
+      scheduleOpen,
+      scheduleClose,
+      cancelTimers
+    };
+    const __mfResult0 = NavigationMenuContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("nav");
+      rootRef.current = __el0;
+      {
+        const __v = rootId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __attr(__el0, "class", () => cn(__props.classes?.root));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedNavigationMenu = Object.assign(ComposedNavigationMenuRoot, {
+  List: NavMenuList,
+  Item: NavMenuItem,
+  Trigger: NavMenuTrigger,
+  Content: NavMenuContent,
+  Link: NavMenuLink,
+  Viewport: NavMenuViewport
+});
+
+export { ComposedNavigationMenu };

package/dist/shared/chunk-r3pffzss.js

@@ -0,0 +1,13 @@
+// src/composed/with-styles.ts
+function withStyles(component, classes) {
+  const styled = (props) => component({ ...props, classes });
+  const subComponents = {};
+  for (const key of Object.getOwnPropertyNames(component)) {
+    if (key !== "length" && key !== "name" && key !== "prototype" && key !== "__classKeys" && key !== "__elementType") {
+      subComponents[key] = component[key];
+    }
+  }
+  return Object.assign(styled, subComponents);
+}
+
+export { withStyles };