@vertz/ui-primitives 0.2.21 → 0.2.23

package/dist/shared/chunk-ww7k2azn.js

@@ -0,0 +1,297 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  createFloatingPosition
+} from "./chunk-0mcr52hc.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/menubar/menubar.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function MenubarRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let handleClickOutside = function(event) {
+      const target = event.target;
+      if (!root.contains(target)) {
+        closeAll();
+      }
+    }, closeAll = function() {
+      for (const [, menu] of menus) {
+        setExpanded(menu.trigger, false);
+        setDataState(menu.trigger, "closed");
+        setDataState(menu.content, "closed");
+        setHiddenAnimated(menu.content, true);
+      }
+      state.activeMenu.value = null;
+      if (positioning) {
+        floatingCleanup?.();
+        floatingCleanup = null;
+        dismissCleanup?.();
+        dismissCleanup = null;
+      } else {
+        document.removeEventListener("mousedown", handleClickOutside);
+      }
+    }, openMenu = function(value) {
+      const current = state.activeMenu.peek();
+      if (current && current !== value) {
+        const prev = menus.get(current);
+        if (prev) {
+          setExpanded(prev.trigger, false);
+          setDataState(prev.trigger, "closed");
+          setDataState(prev.content, "closed");
+          setHiddenAnimated(prev.content, true);
+        }
+        if (positioning) {
+          floatingCleanup?.();
+          floatingCleanup = null;
+        }
+      }
+      const menu = menus.get(value);
+      if (!menu)
+        return;
+      state.activeMenu.value = value;
+      setExpanded(menu.trigger, true);
+      setHidden(menu.content, false);
+      setDataState(menu.trigger, "open");
+      setDataState(menu.content, "open");
+      if (positioning) {
+        const result = createFloatingPosition(menu.trigger, menu.content, positioning);
+        floatingCleanup = result.cleanup;
+        if (!dismissCleanup) {
+          dismissCleanup = createDismiss({
+            onDismiss: closeAll,
+            insideElements: [root],
+            escapeKey: false
+          });
+        }
+      } else {
+        document.addEventListener("mousedown", handleClickOutside);
+      }
+      const firstItem = menu.items[0];
+      if (firstItem) {
+        firstItem.setAttribute("tabindex", "0");
+        firstItem.focus();
+      }
+    }, Menu = function(value, label) {
+      const ids = linkedIds("menubar-menu");
+      const menuItems = [];
+      const trigger = (() => {
+        const __el1 = __element("button");
+        __el1.setAttribute("type", "button");
+        __el1.setAttribute("role", "menuitem");
+        {
+          const __v = ids.triggerId;
+          if (__v != null && __v !== false)
+            __el1.setAttribute("id", __v === true ? "" : __v);
+        }
+        {
+          const __v = ids.contentId;
+          if (__v != null && __v !== false)
+            __el1.setAttribute("aria-controls", __v === true ? "" : __v);
+        }
+        __el1.setAttribute("aria-haspopup", "menu");
+        {
+          const __v = value;
+          if (__v != null && __v !== false)
+            __el1.setAttribute("data-value", __v === true ? "" : __v);
+        }
+        __el1.setAttribute("aria-expanded", "false");
+        __el1.setAttribute("data-state", "closed");
+        __on(__el1, "click", () => {
+          if (state.activeMenu.peek() === value) {
+            closeAll();
+          } else {
+            openMenu(value);
+          }
+        });
+        __on(__el1, "keydown", (event) => {
+          if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
+            event.preventDefault();
+            openMenu(value);
+          }
+        });
+        __enterChildren(__el1);
+        __insert(__el1, label ?? value);
+        __exitChildren();
+        return __el1;
+      })();
+      setRovingTabindex(triggers.concat(trigger), triggers.length);
+      const content = (() => {
+        const __el2 = __element("div");
+        __el2.setAttribute("role", "menu");
+        {
+          const __v = ids.contentId;
+          if (__v != null && __v !== false)
+            __el2.setAttribute("id", __v === true ? "" : __v);
+        }
+        __el2.setAttribute("aria-hidden", "true");
+        __el2.setAttribute("data-state", "closed");
+        {
+          const __v = { display: "none" };
+          if (__v != null && __v !== false)
+            __el2.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+        }
+        __on(__el2, "keydown", (event) => {
+          if (isKey(event, Keys.Escape)) {
+            event.preventDefault();
+            event.stopPropagation();
+            closeAll();
+            trigger.focus();
+            return;
+          }
+          if (isKey(event, Keys.Enter, Keys.Space)) {
+            event.preventDefault();
+            const active = document.activeElement;
+            const activeItem = menuItems.find((item) => item === active);
+            if (activeItem) {
+              const val = activeItem.getAttribute("data-value");
+              if (val !== null) {
+                onSelect?.(val);
+                closeAll();
+                trigger.focus();
+              }
+            }
+            return;
+          }
+          if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight)) {
+            event.preventDefault();
+            const triggerIdx = triggers.indexOf(trigger);
+            let nextIdx;
+            if (isKey(event, Keys.ArrowRight)) {
+              nextIdx = (triggerIdx + 1) % triggers.length;
+            } else {
+              nextIdx = (triggerIdx - 1 + triggers.length) % triggers.length;
+            }
+            const nextTrigger = triggers[nextIdx];
+            if (nextTrigger) {
+              nextTrigger.focus();
+              const nextValue = nextTrigger.getAttribute("data-value");
+              if (nextValue)
+                openMenu(nextValue);
+            }
+            return;
+          }
+          handleListNavigation(event, menuItems, { orientation: "vertical" });
+        });
+        return __el2;
+      })();
+      function createItem(val, itemLabel, parent) {
+        const item = (() => {
+          const __el3 = __element("div");
+          __el3.setAttribute("role", "menuitem");
+          {
+            const __v = val;
+            if (__v != null && __v !== false)
+              __el3.setAttribute("data-value", __v === true ? "" : __v);
+          }
+          __el3.setAttribute("tabindex", "-1");
+          __on(__el3, "click", () => {
+            onSelect?.(val);
+            closeAll();
+            trigger.focus();
+          });
+          __enterChildren(__el3);
+          __insert(__el3, itemLabel ?? val);
+          __exitChildren();
+          return __el3;
+        })();
+        menuItems.push(item);
+        (parent ?? content).appendChild(item);
+        return item;
+      }
+      function Item(val, itemLabel) {
+        return createItem(val, itemLabel);
+      }
+      function Group(groupLabel) {
+        const el = (() => {
+          const __el4 = __element("div");
+          __el4.setAttribute("role", "group");
+          {
+            const __v = groupLabel;
+            if (__v != null && __v !== false)
+              __el4.setAttribute("aria-label", __v === true ? "" : __v);
+          }
+          return __el4;
+        })();
+        content.appendChild(el);
+        return {
+          el,
+          Item: (val, l) => createItem(val, l, el)
+        };
+      }
+      function Separator() {
+        const hr = (() => {
+          const __el5 = __element("hr");
+          __el5.setAttribute("role", "separator");
+          return __el5;
+        })();
+        content.appendChild(hr);
+        return hr;
+      }
+      triggers.push(trigger);
+      setRovingTabindex(triggers, 0);
+      menus.set(value, { trigger, content, items: menuItems });
+      root.appendChild(trigger);
+      return { trigger, content, Item, Group, Separator };
+    };
+    const { onSelect, positioning, ...attrs } = options;
+    const state = { activeMenu: signal(null) };
+    const triggers = [];
+    const menus = new Map;
+    let floatingCleanup = null;
+    let dismissCleanup = null;
+    const root = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "menubar");
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End)) {
+          const focused = document.activeElement;
+          const triggerIndex = triggers.indexOf(focused);
+          if (triggerIndex >= 0) {
+            const result = handleListNavigation(event, triggers, { orientation: "horizontal" });
+            if (result && state.activeMenu.peek()) {
+              const newTrigger = result;
+              const menuValue = newTrigger.getAttribute("data-value");
+              if (menuValue)
+                openMenu(menuValue);
+            }
+          }
+        }
+      });
+      return __el0;
+    })();
+    applyAttrs(root, attrs);
+    const __mfResult0 = { root, state, Menu };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Menubar = {
+  Root: MenubarRoot
+};
+
+export { Menubar };

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

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

package/dist/shared/chunk-xs6gp369.js

@@ -0,0 +1,245 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setHidden
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/command/command.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function CommandRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let getVisibleItems = function() {
+      return allItems.filter((item) => item.getAttribute("aria-hidden") !== "true");
+    }, updateActiveItem = function() {
+      const visible = getVisibleItems();
+      const activeIdx = state.activeIndex.peek();
+      for (const item of allItems) {
+        item.setAttribute("aria-selected", "false");
+      }
+      if (visible.length > 0 && activeIdx >= 0 && activeIdx < visible.length) {
+        visible[activeIdx]?.setAttribute("aria-selected", "true");
+      }
+    }, runFilter = function() {
+      const search = state.inputValue.peek();
+      let visibleCount = 0;
+      for (const item of allItems) {
+        const value = item.getAttribute("data-value") ?? "";
+        const text = item.textContent ?? "";
+        const keywords = item.getAttribute("data-keywords") ?? "";
+        const searchable = `${value} ${text} ${keywords}`;
+        const matches = search === "" || filterFn(searchable, search);
+        setHidden(item, !matches);
+        if (matches)
+          visibleCount++;
+      }
+      for (const [groupEl, group] of groups) {
+        const hasVisible = group.items.some((item) => item.getAttribute("aria-hidden") !== "true");
+        setHidden(group.heading, !hasVisible);
+        if (!hasVisible) {
+          groupEl.style.display = "none";
+        } else {
+          groupEl.style.display = "";
+        }
+      }
+      setHidden(empty, visibleCount > 0);
+      state.activeIndex.value = 0;
+      updateActiveItem();
+    }, createItem = function(value, label, keywords, parent) {
+      const item = (() => {
+        const __el4 = __element("div");
+        __el4.setAttribute("role", "option");
+        {
+          const __v = value;
+          if (__v != null && __v !== false)
+            __el4.setAttribute("data-value", __v === true ? "" : __v);
+        }
+        __el4.setAttribute("aria-selected", "false");
+        {
+          const __v = keywords && keywords.length > 0 ? keywords.join(" ") : undefined;
+          if (__v != null && __v !== false)
+            __el4.setAttribute("data-keywords", __v === true ? "" : __v);
+        }
+        __on(__el4, "click", () => {
+          onSelect?.(value);
+        });
+        __enterChildren(__el4);
+        __insert(__el4, label ?? value);
+        __exitChildren();
+        return __el4;
+      })();
+      allItems.push(item);
+      (parent ?? list).appendChild(item);
+      updateActiveItem();
+      return item;
+    }, Item = function(value, label, keywords) {
+      return createItem(value, label, keywords);
+    }, Group = function(label) {
+      const headingId = uniqueId("command-group");
+      const heading = (() => {
+        const __el5 = __element("div");
+        {
+          const __v = headingId;
+          if (__v != null && __v !== false)
+            __el5.setAttribute("id", __v === true ? "" : __v);
+        }
+        __enterChildren(__el5);
+        __insert(__el5, label);
+        __exitChildren();
+        return __el5;
+      })();
+      const el = (() => {
+        const __el6 = __element("div");
+        __el6.setAttribute("role", "group");
+        {
+          const __v = headingId;
+          if (__v != null && __v !== false)
+            __el6.setAttribute("aria-labelledby", __v === true ? "" : __v);
+        }
+        __enterChildren(__el6);
+        __insert(__el6, heading);
+        __exitChildren();
+        return __el6;
+      })();
+      const groupItems = [];
+      groups.set(el, { heading, items: groupItems });
+      list.appendChild(el);
+      return {
+        el,
+        Item: (value, itemLabel, keywords) => {
+          const item = createItem(value, itemLabel, keywords, el);
+          groupItems.push(item);
+          return item;
+        }
+      };
+    }, Separator = function() {
+      const hr = (() => {
+        const __el7 = __element("hr");
+        __el7.setAttribute("role", "separator");
+        return __el7;
+      })();
+      list.appendChild(hr);
+      return hr;
+    };
+    const { filter: customFilter, onSelect, onInputChange, placeholder, ...attrs } = options;
+    const listId = uniqueId("command-list");
+    const state = {
+      inputValue: signal(""),
+      activeIndex: signal(0)
+    };
+    const allItems = [];
+    const groups = new Map;
+    const defaultFilter = (value, search) => {
+      return value.toLowerCase().includes(search.toLowerCase());
+    };
+    const filterFn = customFilter ?? defaultFilter;
+    const input = (() => {
+      const __el0 = __element("input");
+      __el0.setAttribute("type", "text");
+      __el0.setAttribute("role", "combobox");
+      __el0.setAttribute("aria-autocomplete", "list");
+      __el0.setAttribute("aria-expanded", "true");
+      {
+        const __v = listId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      {
+        const __v = placeholder;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("placeholder", __v === true ? "" : __v);
+      }
+      __on(__el0, "input", () => {
+        state.inputValue.value = input.value;
+        onInputChange?.(input.value);
+        runFilter();
+      });
+      __on(__el0, "keydown", (event) => {
+        const visible = getVisibleItems();
+        if (isKey(event, Keys.ArrowDown)) {
+          event.preventDefault();
+          const next = Math.min(state.activeIndex.peek() + 1, visible.length - 1);
+          state.activeIndex.value = next;
+          updateActiveItem();
+          return;
+        }
+        if (isKey(event, Keys.ArrowUp)) {
+          event.preventDefault();
+          const prev = Math.max(state.activeIndex.peek() - 1, 0);
+          state.activeIndex.value = prev;
+          updateActiveItem();
+          return;
+        }
+        if (isKey(event, Keys.Enter)) {
+          event.preventDefault();
+          const active = visible[state.activeIndex.peek()];
+          if (active) {
+            const val = active.getAttribute("data-value");
+            if (val !== null) {
+              onSelect?.(val);
+            }
+          }
+          return;
+        }
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          input.value = "";
+          state.inputValue.value = "";
+          onInputChange?.("");
+          runFilter();
+        }
+      });
+      return __el0;
+    })();
+    const list = (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("role", "listbox");
+      {
+        const __v = listId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("id", __v === true ? "" : __v);
+      }
+      return __el1;
+    })();
+    const empty = (() => {
+      const __el2 = __element("div");
+      __el2.setAttribute("aria-hidden", "true");
+      {
+        const __v = { display: "none" };
+        if (__v != null && __v !== false)
+          __el2.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      return __el2;
+    })();
+    const root = (() => {
+      const __el3 = __element("div");
+      __enterChildren(__el3);
+      __insert(__el3, input);
+      __insert(__el3, list);
+      __insert(__el3, empty);
+      __exitChildren();
+      return __el3;
+    })();
+    applyAttrs(root, attrs);
+    const __mfResult0 = { root, input, list, empty, state, Item, Group, Separator };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Command = {
+  Root: CommandRoot
+};
+
+export { Command };