@vertz/ui-primitives 0.2.20 → 0.2.21

package/dist/shared/{chunk-34yfm2b0.js → chunk-er9625ar.js}

@@ -13,53 +13,19 @@ import {
 } from "./chunk-8y1jf6xr.js";
 
 // src/alert-dialog/alert-dialog.tsx
-import { __element, __on } from "@vertz/ui/internals";
+import { __element, __on, __styleStr } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
-function AlertDialogRoot(options = {}) {
-  const { defaultOpen = false, onOpenChange, onAction } = options;
-  const ids = linkedIds("alertdialog");
-  const titleId = `${ids.contentId}-title`;
-  const descriptionId = `${ids.contentId}-description`;
-  const state = { open: signal(defaultOpen) };
-  let restoreFocus = null;
-  let removeTrap = null;
-  function show() {
-    state.open.value = true;
-    setExpanded(trigger, true);
-    setHidden(overlay, false);
-    setHidden(content, false);
-    setDataState(trigger, "open");
-    setDataState(overlay, "open");
-    setDataState(content, "open");
-    restoreFocus = saveFocus();
-    removeTrap = trapFocus(content);
-    queueMicrotask(() => cancel.focus());
-    onOpenChange?.(true);
-  }
-  function hide() {
-    state.open.value = false;
-    setExpanded(trigger, false);
-    setDataState(trigger, "closed");
-    setDataState(overlay, "closed");
-    setDataState(content, "closed");
-    setHiddenAnimated(overlay, true);
-    setHiddenAnimated(content, true);
-    removeTrap?.();
-    removeTrap = null;
-    restoreFocus?.();
-    restoreFocus = null;
-    onOpenChange?.(false);
-  }
-  const trigger = (() => {
+function AlertDialogTriggerEl(triggerId, contentId, defaultOpen, onClick) {
+  return (() => {
     const __el0 = __element("button");
     __el0.setAttribute("type", "button");
     {
-      const __v = ids.triggerId;
+      const __v = triggerId;
       if (__v != null && __v !== false)
         __el0.setAttribute("id", __v === true ? "" : __v);
     }
     {
-      const __v = ids.contentId;
+      const __v = contentId;
       if (__v != null && __v !== false)
         __el0.setAttribute("aria-controls", __v === true ? "" : __v);
     }
@@ -73,101 +39,157 @@ function AlertDialogRoot(options = {}) {
       if (__v != null && __v !== false)
         __el0.setAttribute("data-state", __v === true ? "" : __v);
     }
-    __on(__el0, "click", () => {
-      if (!state.open.peek())
-        show();
-    });
+    __on(__el0, "click", onClick);
     return __el0;
   })();
-  const overlay = (() => {
-    const __el1 = __element("div");
-    __el1.setAttribute("data-alertdialog-overlay", "");
+}
+function AlertDialogOverlayEl(defaultOpen) {
+  return (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("data-alertdialog-overlay", "");
     {
       const __v = defaultOpen ? "false" : "true";
       if (__v != null && __v !== false)
-        __el1.setAttribute("aria-hidden", __v === true ? "" : __v);
+        __el0.setAttribute("aria-hidden", __v === true ? "" : __v);
     }
     {
       const __v = defaultOpen ? "open" : "closed";
       if (__v != null && __v !== false)
-        __el1.setAttribute("data-state", __v === true ? "" : __v);
+        __el0.setAttribute("data-state", __v === true ? "" : __v);
     }
     {
       const __v = defaultOpen ? "" : "display: none";
       if (__v != null && __v !== false)
-        __el1.setAttribute("style", __v === true ? "" : __v);
+        __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
     }
-    return __el1;
+    return __el0;
   })();
-  const content = (() => {
-    const __el2 = __element("div");
-    __el2.setAttribute("role", "alertdialog");
+}
+function AlertDialogContentEl(contentId, titleId, descriptionId, defaultOpen) {
+  return (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("role", "alertdialog");
     {
-      const __v = ids.contentId;
+      const __v = contentId;
       if (__v != null && __v !== false)
-        __el2.setAttribute("id", __v === true ? "" : __v);
+        __el0.setAttribute("id", __v === true ? "" : __v);
     }
-    __el2.setAttribute("aria-modal", "true");
+    __el0.setAttribute("aria-modal", "true");
     {
       const __v = titleId;
       if (__v != null && __v !== false)
-        __el2.setAttribute("aria-labelledby", __v === true ? "" : __v);
+        __el0.setAttribute("aria-labelledby", __v === true ? "" : __v);
     }
     {
       const __v = descriptionId;
       if (__v != null && __v !== false)
-        __el2.setAttribute("aria-describedby", __v === true ? "" : __v);
+        __el0.setAttribute("aria-describedby", __v === true ? "" : __v);
     }
     {
       const __v = defaultOpen ? "false" : "true";
       if (__v != null && __v !== false)
-        __el2.setAttribute("aria-hidden", __v === true ? "" : __v);
+        __el0.setAttribute("aria-hidden", __v === true ? "" : __v);
     }
     {
       const __v = defaultOpen ? "open" : "closed";
       if (__v != null && __v !== false)
-        __el2.setAttribute("data-state", __v === true ? "" : __v);
+        __el0.setAttribute("data-state", __v === true ? "" : __v);
     }
     {
       const __v = defaultOpen ? "" : "display: none";
       if (__v != null && __v !== false)
-        __el2.setAttribute("style", __v === true ? "" : __v);
+        __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
     }
-    return __el2;
+    return __el0;
   })();
-  const title = (() => {
-    const __el3 = __element("h2");
+}
+function AlertDialogTitleEl(titleId) {
+  return (() => {
+    const __el0 = __element("h2");
     {
       const __v = titleId;
       if (__v != null && __v !== false)
-        __el3.setAttribute("id", __v === true ? "" : __v);
+        __el0.setAttribute("id", __v === true ? "" : __v);
     }
-    return __el3;
+    return __el0;
   })();
-  const description = (() => {
-    const __el4 = __element("p");
+}
+function AlertDialogDescriptionEl(descriptionId) {
+  return (() => {
+    const __el0 = __element("p");
     {
       const __v = descriptionId;
       if (__v != null && __v !== false)
-        __el4.setAttribute("id", __v === true ? "" : __v);
+        __el0.setAttribute("id", __v === true ? "" : __v);
     }
-    return __el4;
+    return __el0;
   })();
-  const cancel = (() => {
-    const __el5 = __element("button");
-    __el5.setAttribute("type", "button");
-    __on(__el5, "click", () => hide());
-    return __el5;
+}
+function AlertDialogCancelBtn(onClick) {
+  return (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("type", "button");
+    __on(__el0, "click", onClick);
+    return __el0;
   })();
-  const action = (() => {
-    const __el6 = __element("button");
-    __el6.setAttribute("type", "button");
-    __on(__el6, "click", () => {
-      onAction?.();
-      hide();
-    });
-    return __el6;
+}
+function AlertDialogActionBtn(onClick) {
+  return (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("type", "button");
+    __on(__el0, "click", onClick);
+    return __el0;
   })();
+}
+function AlertDialogRoot(options = {}) {
+  const { defaultOpen = false, onOpenChange, onAction } = options;
+  const ids = linkedIds("alertdialog");
+  const titleId = `${ids.contentId}-title`;
+  const descriptionId = `${ids.contentId}-description`;
+  const state = { open: signal(defaultOpen) };
+  let restoreFocus = null;
+  let removeTrap = null;
+  function show() {
+    if (state.open.peek())
+      return;
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(overlay, false);
+    setHidden(content, false);
+    setDataState(trigger, "open");
+    setDataState(overlay, "open");
+    setDataState(content, "open");
+    restoreFocus = saveFocus();
+    removeTrap = trapFocus(content);
+    queueMicrotask(() => cancel.focus());
+    onOpenChange?.(true);
+  }
+  function hide() {
+    if (!state.open.peek())
+      return;
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    setDataState(overlay, "closed");
+    setDataState(content, "closed");
+    setHiddenAnimated(overlay, true);
+    setHiddenAnimated(content, true);
+    removeTrap?.();
+    removeTrap = null;
+    restoreFocus?.();
+    restoreFocus = null;
+    onOpenChange?.(false);
+  }
+  const trigger = AlertDialogTriggerEl(ids.triggerId, ids.contentId, defaultOpen, show);
+  const overlay = AlertDialogOverlayEl(defaultOpen);
+  const content = AlertDialogContentEl(ids.contentId, titleId, descriptionId, defaultOpen);
+  const title = AlertDialogTitleEl(titleId);
+  const description = AlertDialogDescriptionEl(descriptionId);
+  const cancel = AlertDialogCancelBtn(() => hide());
+  const action = AlertDialogActionBtn(() => {
+    onAction?.();
+    hide();
+  });
   if (defaultOpen) {
     restoreFocus = saveFocus();
     removeTrap = trapFocus(content);

package/dist/shared/{chunk-tfyg0qrp.js → chunk-ewxzhtej.js}

@@ -4,15 +4,15 @@ import {
   setHidden,
   setHiddenAnimated
 } from "./chunk-vvjyx7fe.js";
-import {
-  applyAttrs
-} from "./chunk-dpsgb1xw.js";
 import {
   linkedIds
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-q8dm19a5.js";
 
 // src/collapsible/collapsible.tsx
-import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { __element, __enterChildren, __exitChildren, __insert, __on, __styleStr } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
 function CollapsibleRoot(options = {}) {
   const { defaultOpen = false, disabled = false, onOpenChange, ...attrs } = options;
@@ -95,7 +95,7 @@ function CollapsibleRoot(options = {}) {
     {
       const __v = defaultOpen ? "" : "display: none";
       if (__v != null && __v !== false)
-        __el1.setAttribute("style", __v === true ? "" : __v);
+        __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
     }
     return __el1;
   })();

package/dist/shared/{chunk-4085nbdq.js → chunk-ey4485fh.js}

@@ -1,7 +1,7 @@
 import {
   Keys,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState,
   setExpanded,
@@ -9,12 +9,12 @@ import {
   setHiddenAnimated,
   setSelected
 } from "./chunk-vvjyx7fe.js";
-import {
-  applyAttrs
-} from "./chunk-dpsgb1xw.js";
 import {
   linkedIds
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-q8dm19a5.js";
 
 // src/combobox/combobox.tsx
 import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";

package/dist/shared/{chunk-x2hz98qn.js → chunk-f501vw7e.js}

@@ -1,9 +1,9 @@
 import {
   Calendar
-} from "./chunk-18y8gfk0.js";
+} from "./chunk-pvy0tcd7.js";
 import {
   Popover
-} from "./chunk-m1ptgp1s.js";
+} from "./chunk-qfk1ycfw.js";
 
 // src/date-picker/date-picker.ts
 import { signal } from "@vertz/ui";

package/dist/shared/{chunk-9hj9p7s2.js → chunk-g67tnd19.js}

@@ -4,29 +4,60 @@ import {
 import {
   Keys,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState,
   setDescribedBy,
   setHidden,
   setHiddenAnimated
 } from "./chunk-vvjyx7fe.js";
-import {
-  applyAttrs
-} from "./chunk-dpsgb1xw.js";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-q8dm19a5.js";
 
 // src/tooltip/tooltip.tsx
 import { __element, __on } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
+function TooltipTrigger(show, hide) {
+  return (() => {
+    const __el0 = __element("span");
+    __on(__el0, "mouseenter", show);
+    __on(__el0, "mouseleave", hide);
+    __on(__el0, "focus", show);
+    __on(__el0, "blur", hide);
+    __on(__el0, "keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        hide();
+      }
+    });
+    return __el0;
+  })();
+}
+function TooltipContent(contentId) {
+  return (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("role", "tooltip");
+    {
+      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");
+    return __el0;
+  })();
+}
 function TooltipRoot(options = {}) {
   const { delay = 300, onOpenChange, positioning, ...attrs } = options;
   const contentId = uniqueId("tooltip");
   const state = { open: signal(false) };
   let showTimeout = null;
   let floatingCleanup = null;
+  const content = TooltipContent(contentId);
   function show() {
     if (showTimeout !== null)
       return;
@@ -58,33 +89,8 @@ function TooltipRoot(options = {}) {
     floatingCleanup = null;
     onOpenChange?.(false);
   }
-  const trigger = (() => {
-    const __el0 = __element("span");
-    __on(__el0, "mouseenter", show);
-    __on(__el0, "mouseleave", hide);
-    __on(__el0, "focus", show);
-    __on(__el0, "blur", hide);
-    __on(__el0, "keydown", (event) => {
-      if (isKey(event, Keys.Escape)) {
-        hide();
-      }
-    });
-    return __el0;
-  })();
+  const trigger = TooltipTrigger(show, hide);
   setDescribedBy(trigger, contentId);
-  const content = (() => {
-    const __el1 = __element("div");
-    __el1.setAttribute("role", "tooltip");
-    {
-      const __v = contentId;
-      if (__v != null && __v !== false)
-        __el1.setAttribute("id", __v === true ? "" : __v);
-    }
-    __el1.setAttribute("aria-hidden", "true");
-    __el1.setAttribute("data-state", "closed");
-    __el1.setAttribute("style", "display: none");
-    return __el1;
-  })();
   applyAttrs(trigger, attrs);
   return { trigger, content, state };
 }

package/dist/shared/{chunk-j4cm8avr.js → chunk-gbxbkmte.js}

@@ -1,17 +1,17 @@
 import {
   Keys,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState,
   setValueRange
 } from "./chunk-vvjyx7fe.js";
 import {
   applyAttrs
-} from "./chunk-dpsgb1xw.js";
+} from "./chunk-q8dm19a5.js";
 
 // src/resizable-panel/resizable-panel.tsx
-import { __element, __on } from "@vertz/ui/internals";
+import { __element, __on, __styleStr } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
 function ResizablePanelRoot(options = {}) {
   const { orientation = "horizontal", onResize, ...attrs } = options;
@@ -42,7 +42,7 @@ function ResizablePanelRoot(options = {}) {
     {
       const __v = `display: flex; flex-direction: ${orientation === "horizontal" ? "row" : "column"};`;
       if (__v != null && __v !== false)
-        __el0.setAttribute("style", __v === true ? "" : __v);
+        __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
     }
     {
       const __v = orientation;

package/dist/shared/chunk-gzgyfhz6.js

@@ -0,0 +1,237 @@
+import {
+  focusFirst,
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-q8dm19a5.js";
+
+// src/navigation-menu/navigation-menu.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } 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;
+  })();
+}
+function NavMenuViewport() {
+  return (() => {
+    const __el0 = __element("div");
+    return __el0;
+  })();
+}
+function NavMenuNav(list, viewport) {
+  return (() => {
+    const __el0 = __element("nav");
+    __enterChildren(__el0);
+    __insert(__el0, list);
+    __insert(__el0, viewport);
+    __exitChildren();
+    return __el0;
+  })();
+}
+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;
+  })();
+}
+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;
+  })();
+}
+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;
+  })();
+}
+function NavigationMenuRoot(options = {}) {
+  const { orientation = "horizontal", delayOpen = 200, delayClose = 300, ...attrs } = options;
+  const state = { activeItem: signal(null) };
+  const triggers = [];
+  const items = new Map;
+  let openTimeout = null;
+  let closeTimeout = null;
+  function cancelTimers() {
+    if (openTimeout) {
+      clearTimeout(openTimeout);
+      openTimeout = null;
+    }
+    if (closeTimeout) {
+      clearTimeout(closeTimeout);
+      closeTimeout = null;
+    }
+  }
+  function openItem(value) {
+    cancelTimers();
+    const current = state.activeItem.peek();
+    if (current && current !== value) {
+      const prev = items.get(current);
+      if (prev) {
+        setExpanded(prev.trigger, false);
+        setDataState(prev.trigger, "closed");
+        setDataState(prev.content, "closed");
+        setHiddenAnimated(prev.content, true);
+      }
+    }
+    const item = items.get(value);
+    if (!item)
+      return;
+    state.activeItem.value = value;
+    setExpanded(item.trigger, true);
+    setHidden(item.content, false);
+    setDataState(item.trigger, "open");
+    setDataState(item.content, "open");
+  }
+  function closeAll() {
+    cancelTimers();
+    const current = state.activeItem.peek();
+    if (current) {
+      const item = items.get(current);
+      if (item) {
+        setExpanded(item.trigger, false);
+        setDataState(item.trigger, "closed");
+        setDataState(item.content, "closed");
+        setHiddenAnimated(item.content, true);
+      }
+    }
+    state.activeItem.value = null;
+  }
+  const list = NavMenuList(triggers, orientation);
+  const viewport = NavMenuViewport();
+  const root = NavMenuNav(list, viewport);
+  function Item(value, label) {
+    const ids = linkedIds("nav-menu");
+    let contentEl;
+    const trigger = NavMenuItemTrigger(ids.triggerId, ids.contentId, value, label, () => {
+      if (state.activeItem.peek() === value) {
+        closeAll();
+      } else {
+        openItem(value);
+      }
+    }, () => {
+      cancelTimers();
+      openTimeout = setTimeout(() => {
+        openItem(value);
+        openTimeout = null;
+      }, delayOpen);
+    }, () => {
+      cancelTimers();
+      closeTimeout = setTimeout(() => {
+        closeAll();
+        closeTimeout = null;
+      }, delayClose);
+    }, (event) => {
+      if (isKey(event, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        openItem(value);
+        queueMicrotask(() => focusFirst(contentEl));
+      }
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        closeAll();
+      }
+    });
+    contentEl = NavMenuItemContent(ids.contentId, () => cancelTimers(), () => {
+      cancelTimers();
+      closeTimeout = setTimeout(() => {
+        closeAll();
+        closeTimeout = null;
+      }, delayClose);
+    }, (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        event.stopPropagation();
+        closeAll();
+        trigger.focus();
+      }
+    });
+    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;
+  }
+  applyAttrs(root, attrs);
+  return { root, list, viewport, state, Item, Link };
+}
+var NavigationMenu = {
+  Root: NavigationMenuRoot
+};
+
+export { NavigationMenu };