@ailuracode/alpine-menu 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) ailuracode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# @ailuracode/alpine-menu
+
+Headless accessible menu store for Alpine.js — dropdowns, context menus, keyboard navigation, and roving tabindex. No markup or CSS included.
+
+**[Full documentation →](../../docs/plugins/menu.md)**
+
+## Install
+
+```bash
+npm install @ailuracode/alpine-menu alpinejs
+```
+
+## Setup
+
+```js
+Alpine.plugin(
+  menu({
+    onLockChange(locked) {
+      // compose with $store.scroll.lock() / unlock()
+    },
+  })
+);
+```
+
+## Store API
+
+```js
+$store.menu.open("user-menu");
+$store.menu.close("user-menu");
+$store.menu.toggle("user-menu");
+$store.menu.isOpen("user-menu");
+$store.menu.activeItem("user-menu");
+```

package/dist/global.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="@types/alpinejs" />
+
+export type MenuOrientation = "horizontal" | "vertical";
+
+export interface MenuStore {
+  instances: Record<string, import("./store.js").MenuInstance>;
+  open(id: string): void;
+  close(id: string): void;
+  toggle(id: string): void;
+  isOpen(id: string): boolean;
+  activeItem(id: string): string | null;
+  register(id: string, options?: import("./store.js").MenuInstanceOptions): void;
+  unregister(id: string): void;
+  registerItem(
+    menuId: string,
+    itemId: string,
+    options?: import("./store.js").MenuItemOptions
+  ): void;
+  unregisterItem(menuId: string, itemId: string): void;
+  bindMenu(menuId: string, container: HTMLElement | null): void;
+  bindTrigger(menuId: string, trigger: HTMLElement | null): void;
+  handleOutsideClick(menuId: string, event: MouseEvent): void;
+  setActiveItem(menuId: string, itemId: string | null): void;
+  selectItem(menuId: string, itemId: string): void;
+  handleKeydown(menuId: string, event: KeyboardEvent): void;
+  itemProps(menuId: string, itemId: string): Record<string, string | number | boolean | undefined>;
+  menuProps(menuId: string): Record<string, string | boolean | undefined>;
+  destroy(): void;
+}
+
+export interface MenuPluginOptions {
+  onLockChange?: (locked: boolean) => void;
+}
+
+export function menuOptions<const T extends MenuPluginOptions>(options: T): T;
+export function createMenuStore(config?: { onLockChange?: (locked: boolean) => void }): MenuStore;
+
+export default function menuPlugin(options?: MenuPluginOptions): import("alpinejs").PluginCallback;
+
+declare global {
+  namespace Alpine {
+    interface Stores {
+      menu: MenuStore;
+    }
+    interface Magics<T> {
+      $menu: MenuStore;
+    }
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,78 @@
+import AlpineType from 'alpinejs';
+
+type MenuOrientation = "vertical" | "horizontal";
+type MenuItemState = {
+    id: string;
+    disabled: boolean;
+    parentId: string | null;
+};
+type MenuInstance = {
+    open: boolean;
+    activeItemId: string | null;
+    orientation: MenuOrientation;
+    closeOnSelect: boolean;
+    items: MenuItemState[];
+    container: HTMLElement | null;
+    trigger: HTMLElement | null;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onSelect?: (itemId: string) => void;
+};
+type MenuItemOptions = {
+    disabled?: boolean;
+    parentId?: string | null;
+};
+type MenuInstanceOptions = {
+    orientation?: MenuOrientation;
+    closeOnSelect?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onSelect?: (itemId: string) => void;
+};
+type MenuStore = {
+    /** Reactive registry of menu instances. */
+    instances: Record<string, MenuInstance>;
+    open(id: string): void;
+    close(id: string): void;
+    toggle(id: string): void;
+    isOpen(id: string): boolean;
+    activeItem(id: string): string | null;
+    register(id: string, options?: MenuInstanceOptions): void;
+    unregister(id: string): void;
+    registerItem(menuId: string, itemId: string, options?: MenuItemOptions): void;
+    unregisterItem(menuId: string, itemId: string): void;
+    bindMenu(menuId: string, container: HTMLElement | null): void;
+    bindTrigger(menuId: string, trigger: HTMLElement | null): void;
+    handleOutsideClick(menuId: string, event: MouseEvent): void;
+    setActiveItem(menuId: string, itemId: string | null): void;
+    selectItem(menuId: string, itemId: string): void;
+    handleKeydown(menuId: string, event: KeyboardEvent): void;
+    itemProps(menuId: string, itemId: string): Record<string, string | number | boolean | undefined>;
+    menuProps(menuId: string): Record<string, string | boolean | undefined>;
+    destroy(): void;
+};
+type MenuStoreConfig = {
+    onLockChange?: (locked: boolean) => void;
+};
+/** Creates the headless menu store. */
+declare function createMenuStore(config?: MenuStoreConfig): MenuStore;
+
+interface MenuPluginOptions {
+    onLockChange?: (locked: boolean) => void;
+}
+/** Builds typed menu plugin options. */
+declare function menuOptions<const T extends MenuPluginOptions>(options: T): T;
+/** Alpine.js menu plugin. Registers `$store.menu`. */
+declare function menuPlugin(options?: MenuPluginOptions): AlpineType.PluginCallback;
+declare global {
+    namespace Alpine {
+        interface Stores {
+            menu: MenuStore;
+        }
+        interface Magics<T> {
+            $menu: MenuStore;
+        }
+    }
+}
+
+export { type MenuInstanceOptions, type MenuItemOptions, type MenuOrientation, type MenuPluginOptions, type MenuStore, createMenuStore, menuPlugin as default, menuOptions };

package/dist/index.js

@@ -0,0 +1,290 @@
+// src/store.ts
+function enabledItems(instance) {
+  return instance.items.filter((item) => !item.disabled);
+}
+function itemIndex(instance, itemId) {
+  return enabledItems(instance).findIndex((item) => item.id === itemId);
+}
+function moveActive(instance, delta) {
+  const items = enabledItems(instance);
+  if (items.length === 0) {
+    return null;
+  }
+  const currentIndex = instance.activeItemId ? itemIndex(instance, instance.activeItemId) : -1;
+  const nextIndex = (currentIndex + delta + items.length) % items.length;
+  return items[nextIndex]?.id ?? null;
+}
+function firstItem(instance) {
+  return enabledItems(instance)[0]?.id ?? null;
+}
+function lastItem(instance) {
+  const items = enabledItems(instance);
+  return items[items.length - 1]?.id ?? null;
+}
+function createInstance(options = {}) {
+  return {
+    open: false,
+    activeItemId: null,
+    orientation: options.orientation ?? "vertical",
+    closeOnSelect: options.closeOnSelect ?? true,
+    items: [],
+    container: null,
+    trigger: null,
+    onOpen: options.onOpen,
+    onClose: options.onClose,
+    onSelect: options.onSelect
+  };
+}
+function focusActiveItem(container) {
+  if (!container) {
+    return;
+  }
+  const active = container.querySelector('[role="menuitem"][tabindex="0"]');
+  active?.focus();
+}
+function focusActiveMenu(instance) {
+  focusActiveItem(instance.container);
+}
+function handleMenuKeydown(menuId, instance, event, selectItem, close) {
+  const vertical = instance.orientation === "vertical";
+  const horizontal = instance.orientation === "horizontal";
+  if (event.key === "ArrowDown" && vertical) {
+    event.preventDefault();
+    instance.activeItemId = moveActive(instance, 1);
+    return;
+  }
+  if (event.key === "ArrowUp" && vertical) {
+    event.preventDefault();
+    instance.activeItemId = moveActive(instance, -1);
+    return;
+  }
+  if (event.key === "ArrowRight" && horizontal) {
+    event.preventDefault();
+    instance.activeItemId = moveActive(instance, 1);
+    return;
+  }
+  if (event.key === "ArrowLeft" && horizontal) {
+    event.preventDefault();
+    instance.activeItemId = moveActive(instance, -1);
+    return;
+  }
+  if (event.key === "Home") {
+    event.preventDefault();
+    instance.activeItemId = firstItem(instance);
+    return;
+  }
+  if (event.key === "End") {
+    event.preventDefault();
+    instance.activeItemId = lastItem(instance);
+    return;
+  }
+  if ((event.key === "Enter" || event.key === " ") && instance.activeItemId) {
+    event.preventDefault();
+    selectItem(menuId, instance.activeItemId);
+    return;
+  }
+  if (event.key === "Escape") {
+    event.preventDefault();
+    close(menuId);
+  }
+}
+function createMenuStore(config = {}) {
+  let lockCount = 0;
+  function setLock(locked) {
+    if (locked) {
+      if (lockCount === 0) {
+        config.onLockChange?.(true);
+      }
+      lockCount++;
+      return;
+    }
+    if (lockCount === 0) {
+      return;
+    }
+    lockCount--;
+    if (lockCount === 0) {
+      config.onLockChange?.(false);
+    }
+  }
+  function getOrCreate(store2, id) {
+    store2.instances[id] ??= createInstance();
+    return store2.instances[id];
+  }
+  const store = {
+    instances: {},
+    register(id, options = {}) {
+      this.instances[id] = createInstance(options);
+    },
+    unregister(id) {
+      if (this.isOpen(id)) {
+        this.close(id);
+      }
+      delete this.instances[id];
+    },
+    registerItem(menuId, itemId, options = {}) {
+      const instance = getOrCreate(this, menuId);
+      const existing = instance.items.find((item) => item.id === itemId);
+      if (existing) {
+        existing.disabled = options.disabled ?? existing.disabled;
+        existing.parentId = options.parentId ?? existing.parentId;
+        return;
+      }
+      instance.items.push({
+        id: itemId,
+        disabled: options.disabled ?? false,
+        parentId: options.parentId ?? null
+      });
+    },
+    unregisterItem(menuId, itemId) {
+      const instance = this.instances[menuId];
+      if (!instance) {
+        return;
+      }
+      instance.items = instance.items.filter((item) => item.id !== itemId);
+      if (instance.activeItemId === itemId) {
+        instance.activeItemId = firstItem(instance);
+      }
+    },
+    open(id) {
+      const instance = getOrCreate(this, id);
+      if (instance.open) {
+        return;
+      }
+      instance.open = true;
+      if (!instance.activeItemId) {
+        instance.activeItemId = firstItem(instance);
+      }
+      setLock(true);
+      instance.onOpen?.();
+      queueMicrotask(() => focusActiveMenu(instance));
+    },
+    close(id) {
+      const instance = this.instances[id];
+      if (!instance?.open) {
+        return;
+      }
+      instance.open = false;
+      setLock(false);
+      instance.onClose?.();
+    },
+    toggle(id) {
+      if (this.isOpen(id)) {
+        this.close(id);
+      } else {
+        this.open(id);
+      }
+    },
+    isOpen(id) {
+      return this.instances[id]?.open ?? false;
+    },
+    activeItem(id) {
+      return this.instances[id]?.activeItemId ?? null;
+    },
+    setActiveItem(menuId, itemId) {
+      const instance = getOrCreate(this, menuId);
+      if (itemId === null) {
+        instance.activeItemId = null;
+        return;
+      }
+      const item = instance.items.find((entry) => entry.id === itemId);
+      if (item && !item.disabled) {
+        instance.activeItemId = itemId;
+      }
+    },
+    bindMenu(menuId, container) {
+      const instance = getOrCreate(this, menuId);
+      instance.container = container;
+      if (instance.open) {
+        queueMicrotask(() => focusActiveMenu(instance));
+      }
+    },
+    bindTrigger(menuId, trigger) {
+      const instance = getOrCreate(this, menuId);
+      instance.trigger = trigger;
+    },
+    handleOutsideClick(menuId, event) {
+      const instance = this.instances[menuId];
+      if (!instance?.open) {
+        return;
+      }
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (instance.trigger?.contains(target) || instance.container?.contains(target)) {
+        return;
+      }
+      this.close(menuId);
+    },
+    selectItem(menuId, itemId) {
+      const instance = this.instances[menuId];
+      const item = instance?.items.find((entry) => entry.id === itemId);
+      if (!(instance && item) || item.disabled) {
+        return;
+      }
+      instance.activeItemId = itemId;
+      instance.onSelect?.(itemId);
+      if (instance.closeOnSelect) {
+        this.close(menuId);
+      }
+    },
+    handleKeydown(menuId, event) {
+      const instance = this.instances[menuId];
+      if (instance?.open) {
+        handleMenuKeydown(
+          menuId,
+          instance,
+          event,
+          this.selectItem.bind(this),
+          this.close.bind(this)
+        );
+        queueMicrotask(() => focusActiveMenu(instance));
+      }
+    },
+    itemProps(menuId, itemId) {
+      const instance = this.instances[menuId];
+      const item = instance?.items.find((entry) => entry.id === itemId);
+      const active = instance?.activeItemId === itemId;
+      return {
+        role: "menuitem",
+        tabindex: active ? 0 : -1,
+        "aria-disabled": item?.disabled ?? false
+      };
+    },
+    menuProps(menuId) {
+      const instance = this.instances[menuId];
+      return {
+        role: "menu",
+        "aria-orientation": instance?.orientation
+      };
+    },
+    destroy() {
+      for (const id of Object.keys(this.instances)) {
+        this.unregister(id);
+      }
+      lockCount = 0;
+      config.onLockChange?.(false);
+    }
+  };
+  return store;
+}
+
+// src/index.ts
+function menuOptions(options) {
+  return options;
+}
+function menuPlugin(options = {}) {
+  return function registerMenu(Alpine) {
+    const store = createMenuStore({
+      onLockChange: options.onLockChange
+    });
+    Alpine.store("menu", store);
+    Alpine.magic("menu", () => Alpine.store("menu"));
+  };
+}
+export {
+  createMenuStore,
+  menuPlugin as default,
+  menuOptions
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/store.ts","../src/index.ts"],"sourcesContent":["export type MenuOrientation = \"vertical\" | \"horizontal\";\n\nexport type MenuItemState = {\n  id: string;\n  disabled: boolean;\n  parentId: string | null;\n};\n\nexport type MenuInstance = {\n  open: boolean;\n  activeItemId: string | null;\n  orientation: MenuOrientation;\n  closeOnSelect: boolean;\n  items: MenuItemState[];\n  container: HTMLElement | null;\n  trigger: HTMLElement | null;\n  onOpen?: () => void;\n  onClose?: () => void;\n  onSelect?: (itemId: string) => void;\n};\n\nexport type MenuItemOptions = {\n  disabled?: boolean;\n  parentId?: string | null;\n};\n\nexport type MenuInstanceOptions = {\n  orientation?: MenuOrientation;\n  closeOnSelect?: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n  onSelect?: (itemId: string) => void;\n};\n\nexport type MenuStore = {\n  /** Reactive registry of menu instances. */\n  instances: Record<string, MenuInstance>;\n  open(id: string): void;\n  close(id: string): void;\n  toggle(id: string): void;\n  isOpen(id: string): boolean;\n  activeItem(id: string): string | null;\n  register(id: string, options?: MenuInstanceOptions): void;\n  unregister(id: string): void;\n  registerItem(menuId: string, itemId: string, options?: MenuItemOptions): void;\n  unregisterItem(menuId: string, itemId: string): void;\n  bindMenu(menuId: string, container: HTMLElement | null): void;\n  bindTrigger(menuId: string, trigger: HTMLElement | null): void;\n  handleOutsideClick(menuId: string, event: MouseEvent): void;\n  setActiveItem(menuId: string, itemId: string | null): void;\n  selectItem(menuId: string, itemId: string): void;\n  handleKeydown(menuId: string, event: KeyboardEvent): void;\n  itemProps(menuId: string, itemId: string): Record<string, string | number | boolean | undefined>;\n  menuProps(menuId: string): Record<string, string | boolean | undefined>;\n  destroy(): void;\n};\n\ntype MenuStoreConfig = {\n  onLockChange?: (locked: boolean) => void;\n};\n\nfunction enabledItems(instance: MenuInstance): MenuItemState[] {\n  return instance.items.filter((item) => !item.disabled);\n}\n\nfunction itemIndex(instance: MenuInstance, itemId: string): number {\n  return enabledItems(instance).findIndex((item) => item.id === itemId);\n}\n\nfunction moveActive(instance: MenuInstance, delta: number): string | null {\n  const items = enabledItems(instance);\n  if (items.length === 0) {\n    return null;\n  }\n\n  const currentIndex = instance.activeItemId ? itemIndex(instance, instance.activeItemId) : -1;\n  const nextIndex = (currentIndex + delta + items.length) % items.length;\n  return items[nextIndex]?.id ?? null;\n}\n\nfunction firstItem(instance: MenuInstance): string | null {\n  return enabledItems(instance)[0]?.id ?? null;\n}\n\nfunction lastItem(instance: MenuInstance): string | null {\n  const items = enabledItems(instance);\n  return items[items.length - 1]?.id ?? null;\n}\n\nfunction createInstance(options: MenuInstanceOptions = {}): MenuInstance {\n  return {\n    open: false,\n    activeItemId: null,\n    orientation: options.orientation ?? \"vertical\",\n    closeOnSelect: options.closeOnSelect ?? true,\n    items: [],\n    container: null,\n    trigger: null,\n    onOpen: options.onOpen,\n    onClose: options.onClose,\n    onSelect: options.onSelect,\n  };\n}\n\nfunction focusActiveItem(container: HTMLElement | null): void {\n  if (!container) {\n    return;\n  }\n\n  const active = container.querySelector<HTMLElement>('[role=\"menuitem\"][tabindex=\"0\"]');\n  active?.focus();\n}\n\nfunction focusActiveMenu(instance: MenuInstance): void {\n  focusActiveItem(instance.container);\n}\n\nfunction handleMenuKeydown(\n  menuId: string,\n  instance: MenuInstance,\n  event: KeyboardEvent,\n  selectItem: (menuId: string, itemId: string) => void,\n  close: (menuId: string) => void\n): void {\n  const vertical = instance.orientation === \"vertical\";\n  const horizontal = instance.orientation === \"horizontal\";\n\n  if (event.key === \"ArrowDown\" && vertical) {\n    event.preventDefault();\n    instance.activeItemId = moveActive(instance, 1);\n    return;\n  }\n\n  if (event.key === \"ArrowUp\" && vertical) {\n    event.preventDefault();\n    instance.activeItemId = moveActive(instance, -1);\n    return;\n  }\n\n  if (event.key === \"ArrowRight\" && horizontal) {\n    event.preventDefault();\n    instance.activeItemId = moveActive(instance, 1);\n    return;\n  }\n\n  if (event.key === \"ArrowLeft\" && horizontal) {\n    event.preventDefault();\n    instance.activeItemId = moveActive(instance, -1);\n    return;\n  }\n\n  if (event.key === \"Home\") {\n    event.preventDefault();\n    instance.activeItemId = firstItem(instance);\n    return;\n  }\n\n  if (event.key === \"End\") {\n    event.preventDefault();\n    instance.activeItemId = lastItem(instance);\n    return;\n  }\n\n  if ((event.key === \"Enter\" || event.key === \" \") && instance.activeItemId) {\n    event.preventDefault();\n    selectItem(menuId, instance.activeItemId);\n    return;\n  }\n\n  if (event.key === \"Escape\") {\n    event.preventDefault();\n    close(menuId);\n  }\n}\n\n/** Creates the headless menu store. */\nexport function createMenuStore(config: MenuStoreConfig = {}): MenuStore {\n  let lockCount = 0;\n\n  function setLock(locked: boolean): void {\n    if (locked) {\n      if (lockCount === 0) {\n        config.onLockChange?.(true);\n      }\n      lockCount++;\n      return;\n    }\n\n    if (lockCount === 0) {\n      return;\n    }\n\n    lockCount--;\n    if (lockCount === 0) {\n      config.onLockChange?.(false);\n    }\n  }\n\n  function getOrCreate(store: MenuStore, id: string): MenuInstance {\n    store.instances[id] ??= createInstance();\n    return store.instances[id];\n  }\n\n  const store: MenuStore = {\n    instances: {},\n\n    register(id, options = {}) {\n      this.instances[id] = createInstance(options);\n    },\n\n    unregister(id) {\n      if (this.isOpen(id)) {\n        this.close(id);\n      }\n      delete this.instances[id];\n    },\n\n    registerItem(menuId, itemId, options = {}) {\n      const instance = getOrCreate(this, menuId);\n      const existing = instance.items.find((item) => item.id === itemId);\n      if (existing) {\n        existing.disabled = options.disabled ?? existing.disabled;\n        existing.parentId = options.parentId ?? existing.parentId;\n        return;\n      }\n\n      instance.items.push({\n        id: itemId,\n        disabled: options.disabled ?? false,\n        parentId: options.parentId ?? null,\n      });\n    },\n\n    unregisterItem(menuId, itemId) {\n      const instance = this.instances[menuId];\n      if (!instance) {\n        return;\n      }\n\n      instance.items = instance.items.filter((item) => item.id !== itemId);\n      if (instance.activeItemId === itemId) {\n        instance.activeItemId = firstItem(instance);\n      }\n    },\n\n    open(id) {\n      const instance = getOrCreate(this, id);\n      if (instance.open) {\n        return;\n      }\n\n      instance.open = true;\n      if (!instance.activeItemId) {\n        instance.activeItemId = firstItem(instance);\n      }\n\n      setLock(true);\n\n      instance.onOpen?.();\n      queueMicrotask(() => focusActiveMenu(instance));\n    },\n\n    close(id) {\n      const instance = this.instances[id];\n      if (!instance?.open) {\n        return;\n      }\n\n      instance.open = false;\n\n      setLock(false);\n\n      instance.onClose?.();\n    },\n\n    toggle(id) {\n      if (this.isOpen(id)) {\n        this.close(id);\n      } else {\n        this.open(id);\n      }\n    },\n\n    isOpen(id) {\n      return this.instances[id]?.open ?? false;\n    },\n\n    activeItem(id) {\n      return this.instances[id]?.activeItemId ?? null;\n    },\n\n    setActiveItem(menuId, itemId) {\n      const instance = getOrCreate(this, menuId);\n      if (itemId === null) {\n        instance.activeItemId = null;\n        return;\n      }\n\n      const item = instance.items.find((entry) => entry.id === itemId);\n      if (item && !item.disabled) {\n        instance.activeItemId = itemId;\n      }\n    },\n\n    bindMenu(menuId, container) {\n      const instance = getOrCreate(this, menuId);\n      instance.container = container;\n\n      if (instance.open) {\n        queueMicrotask(() => focusActiveMenu(instance));\n      }\n    },\n\n    bindTrigger(menuId, trigger) {\n      const instance = getOrCreate(this, menuId);\n      instance.trigger = trigger;\n    },\n\n    handleOutsideClick(menuId, event) {\n      const instance = this.instances[menuId];\n      if (!instance?.open) {\n        return;\n      }\n\n      const target = event.target;\n      if (!(target instanceof Node)) {\n        return;\n      }\n\n      if (instance.trigger?.contains(target) || instance.container?.contains(target)) {\n        return;\n      }\n\n      this.close(menuId);\n    },\n\n    selectItem(menuId, itemId) {\n      const instance = this.instances[menuId];\n      const item = instance?.items.find((entry) => entry.id === itemId);\n      if (!(instance && item) || item.disabled) {\n        return;\n      }\n\n      instance.activeItemId = itemId;\n      instance.onSelect?.(itemId);\n\n      if (instance.closeOnSelect) {\n        this.close(menuId);\n      }\n    },\n\n    handleKeydown(menuId, event) {\n      const instance = this.instances[menuId];\n      if (instance?.open) {\n        handleMenuKeydown(\n          menuId,\n          instance,\n          event,\n          this.selectItem.bind(this),\n          this.close.bind(this)\n        );\n        queueMicrotask(() => focusActiveMenu(instance));\n      }\n    },\n\n    itemProps(menuId, itemId) {\n      const instance = this.instances[menuId];\n      const item = instance?.items.find((entry) => entry.id === itemId);\n      const active = instance?.activeItemId === itemId;\n\n      return {\n        role: \"menuitem\",\n        tabindex: active ? 0 : -1,\n        \"aria-disabled\": item?.disabled ?? false,\n      };\n    },\n\n    menuProps(menuId) {\n      const instance = this.instances[menuId];\n      return {\n        role: \"menu\",\n        \"aria-orientation\": instance?.orientation,\n      };\n    },\n\n    destroy() {\n      for (const id of Object.keys(this.instances)) {\n        this.unregister(id);\n      }\n      lockCount = 0;\n      config.onLockChange?.(false);\n    },\n  };\n\n  return store;\n}\n","import type AlpineType from \"alpinejs\";\nimport { createMenuStore, type MenuStore } from \"./store.js\";\n\nexport {\n  createMenuStore,\n  type MenuInstanceOptions,\n  type MenuItemOptions,\n  type MenuOrientation,\n  type MenuStore,\n} from \"./store.js\";\n\nexport interface MenuPluginOptions {\n  onLockChange?: (locked: boolean) => void;\n}\n\n/** Builds typed menu plugin options. */\nexport function menuOptions<const T extends MenuPluginOptions>(options: T): T {\n  return options;\n}\n\n/** Alpine.js menu plugin. Registers `$store.menu`. */\nexport default function menuPlugin(options: MenuPluginOptions = {}): AlpineType.PluginCallback {\n  return function registerMenu(Alpine) {\n    const store = createMenuStore({\n      onLockChange: options.onLockChange,\n    });\n    Alpine.store(\"menu\", store);\n    Alpine.magic(\"menu\", () => Alpine.store(\"menu\"));\n  };\n}\n\ndeclare global {\n  namespace Alpine {\n    interface Stores {\n      menu: MenuStore;\n    }\n    interface Magics<T> {\n      $menu: MenuStore;\n    }\n  }\n}\n"],"mappings":"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","names":["store"]}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@ailuracode/alpine-menu",
+  "version": "0.1.0",
+  "description": "Alpine.js headless accessible menu store",
+  "type": "module",
+  "license": "MIT",
+  "author": "ailuracode",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ailuracode/alpinejs-toolkit.git",
+    "directory": "packages/menu"
+  },
+  "bugs": {
+    "url": "https://github.com/ailuracode/alpinejs-toolkit/issues"
+  },
+  "homepage": "https://github.com/ailuracode/alpinejs-toolkit/tree/master/packages/menu#readme",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./global": {
+      "types": "./dist/global.d.ts"
+    }
+  },
+  "types": "./dist/global.d.ts",
+  "peerDependencies": {
+    "alpinejs": "^3.0.0",
+    "@types/alpinejs": "^3.13.11"
+  },
+  "peerDependenciesMeta": {
+    "@types/alpinejs": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "alpinejs",
+    "alpine",
+    "plugin",
+    "menu",
+    "dropdown",
+    "accessibility",
+    "headless"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean --sourcemap --out-dir dist && cp src/global.d.ts dist/global.d.ts",
+    "test": "vitest run --config ../../vitest.config.ts test"
+  }
+}