@vertz/ui-primitives 0.2.14 → 0.2.16

package/dist/shared/chunk-8qfeqrrz.js

@@ -0,0 +1,179 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition,
+  virtualElement
+} from "./chunk-0mcr52hc.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/context-menu/context-menu.ts
+import { signal } from "@vertz/ui";
+var ContextMenu = {
+  Root(options = {}) {
+    const { onSelect, positioning } = options;
+    const state = {
+      open: signal(false),
+      activeIndex: signal(-1)
+    };
+    const items = [];
+    let floatingCleanup = null;
+    let dismissCleanup = null;
+    const trigger = document.createElement("div");
+    const contentId = uniqueId("ctx-menu");
+    const content = document.createElement("div");
+    content.setAttribute("role", "menu");
+    content.id = contentId;
+    content.style.position = "fixed";
+    setHidden(content, true);
+    setDataState(content, "closed");
+    function handleClickOutside(event) {
+      const target = event.target;
+      if (!trigger.contains(target) && !content.contains(target)) {
+        close();
+      }
+    }
+    function open(x, y) {
+      state.open.value = true;
+      setHidden(content, false);
+      setDataState(content, "open");
+      if (positioning) {
+        const result = createFloatingPosition(virtualElement(x, y), content, {
+          strategy: "fixed",
+          ...positioning
+        });
+        floatingCleanup = result.cleanup;
+        dismissCleanup = createDismiss({
+          onDismiss: close,
+          insideElements: [trigger, content],
+          escapeKey: false
+        });
+      } else {
+        content.style.left = `${x}px`;
+        content.style.top = `${y}px`;
+        document.addEventListener("mousedown", handleClickOutside);
+      }
+      state.activeIndex.value = 0;
+      updateActiveItem(0);
+      items[0]?.focus();
+    }
+    function close() {
+      state.open.value = false;
+      setDataState(content, "closed");
+      setHiddenAnimated(content, true);
+      if (positioning) {
+        floatingCleanup?.();
+        floatingCleanup = null;
+        dismissCleanup?.();
+        dismissCleanup = null;
+      } else {
+        document.removeEventListener("mousedown", handleClickOutside);
+      }
+    }
+    function updateActiveItem(index) {
+      for (let i = 0;i < items.length; i++) {
+        items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
+      }
+    }
+    trigger.addEventListener("contextmenu", (event) => {
+      event.preventDefault();
+      if (state.open.peek()) {
+        close();
+      }
+      open(event.clientX, event.clientY);
+    });
+    content.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        close();
+        return;
+      }
+      if (isKey(event, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        const active = items[state.activeIndex.peek()];
+        if (active) {
+          const val = active.getAttribute("data-value");
+          if (val !== null) {
+            onSelect?.(val);
+            close();
+          }
+        }
+        return;
+      }
+      const result = handleListNavigation(event, items, { orientation: "vertical" });
+      if (result) {
+        const idx = items.indexOf(result);
+        if (idx >= 0) {
+          state.activeIndex.value = idx;
+          updateActiveItem(idx);
+        }
+        return;
+      }
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        const char = event.key.toLowerCase();
+        const match = items.find((item) => item.textContent?.toLowerCase().startsWith(char));
+        if (match) {
+          const idx = items.indexOf(match);
+          state.activeIndex.value = idx;
+          updateActiveItem(idx);
+          match.focus();
+        }
+      }
+    });
+    function createItem(value, label, parent) {
+      const item = document.createElement("div");
+      item.setAttribute("role", "menuitem");
+      item.setAttribute("data-value", value);
+      item.setAttribute("tabindex", "-1");
+      item.textContent = label ?? value;
+      item.addEventListener("click", () => {
+        onSelect?.(value);
+        close();
+      });
+      items.push(item);
+      (parent ?? content).appendChild(item);
+      return item;
+    }
+    function Item(value, label) {
+      return createItem(value, label);
+    }
+    function Group(label) {
+      const el = document.createElement("div");
+      el.setAttribute("role", "group");
+      el.setAttribute("aria-label", label);
+      content.appendChild(el);
+      return {
+        el,
+        Item: (value, itemLabel) => createItem(value, itemLabel, el)
+      };
+    }
+    function Separator() {
+      const hr = document.createElement("hr");
+      hr.setAttribute("role", "separator");
+      content.appendChild(hr);
+      return hr;
+    }
+    function Label(text) {
+      const el = document.createElement("div");
+      el.setAttribute("role", "none");
+      el.textContent = text;
+      content.appendChild(el);
+      return el;
+    }
+    return { trigger, content, state, Item, Group, Separator, Label };
+  }
+};
+
+export { ContextMenu };

package/dist/shared/chunk-8y1jf6xr.js

@@ -0,0 +1,17 @@
+// src/utils/id.ts
+var counter = 0;
+function uniqueId(prefix = "vz") {
+  return `${prefix}-${++counter}`;
+}
+function linkedIds(prefix = "vz") {
+  const base = uniqueId(prefix);
+  return {
+    triggerId: `${base}-trigger`,
+    contentId: `${base}-content`
+  };
+}
+function resetIdCounter() {
+  counter = 0;
+}
+
+export { uniqueId, linkedIds, resetIdCounter };

package/dist/shared/chunk-9cqe2q6e.js

@@ -0,0 +1,56 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/toggle/toggle.tsx
+import { signal } from "@vertz/ui";
+import { __attr, __element, __on } from "@vertz/ui/internals";
+function ToggleRoot(options = {}) {
+  const { defaultPressed = false, disabled = false, onPressedChange } = options;
+  const pressed = signal(defaultPressed, "pressed");
+  function toggle() {
+    if (disabled)
+      return;
+    pressed.value = !pressed.value;
+    onPressedChange?.(pressed.value);
+  }
+  return (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("data-v-id", "ToggleRoot");
+    __el0.setAttribute("type", "button");
+    {
+      const __v = uniqueId("toggle");
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    __attr(__el0, "aria-pressed", () => pressed.value ? "true" : "false");
+    __attr(__el0, "data-state", () => pressed.value ? "on" : "off");
+    {
+      const __v = disabled;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("disabled", __v === true ? "" : __v);
+    }
+    {
+      const __v = disabled ? "true" : undefined;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+    }
+    __on(__el0, "click", toggle);
+    __on(__el0, "keydown", (e) => {
+      if (isKey(e, Keys.Space)) {
+        e.preventDefault();
+        toggle();
+      }
+    });
+    return __el0;
+  })();
+}
+var Toggle = {
+  Root: ToggleRoot
+};
+
+export { Toggle };

package/dist/shared/chunk-a6wp8c32.js

@@ -0,0 +1,32 @@
+// src/utils/dismiss.ts
+function createDismiss(options) {
+  const { onDismiss, insideElements, escapeKey = true, clickOutside = true } = options;
+  function handlePointerDown(event) {
+    const target = event.target;
+    const isInside = insideElements.some((el) => el.contains(target));
+    if (!isInside) {
+      onDismiss();
+    }
+  }
+  function handleKeyDown(event) {
+    if (event.key === "Escape") {
+      onDismiss();
+    }
+  }
+  if (clickOutside) {
+    document.addEventListener("pointerdown", handlePointerDown, true);
+  }
+  if (escapeKey) {
+    document.addEventListener("keydown", handleKeyDown);
+  }
+  return function cleanup() {
+    if (clickOutside) {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+    }
+    if (escapeKey) {
+      document.removeEventListener("keydown", handleKeyDown);
+    }
+  };
+}
+
+export { createDismiss };

package/dist/shared/chunk-bcfzteh0.js

@@ -0,0 +1,148 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated,
+  setSelected
+} from "./chunk-vvjyx7fe.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/combobox/combobox.ts
+import { signal } from "@vertz/ui";
+var Combobox = {
+  Root(options = {}) {
+    const { defaultValue = "", onValueChange, onInputChange } = options;
+    const ids = linkedIds("combobox");
+    const state = {
+      open: signal(false),
+      value: signal(defaultValue),
+      inputValue: signal(defaultValue),
+      activeIndex: signal(-1)
+    };
+    const optionElements = [];
+    const input = document.createElement("input");
+    input.setAttribute("type", "text");
+    input.setAttribute("role", "combobox");
+    input.setAttribute("aria-autocomplete", "list");
+    input.setAttribute("aria-controls", ids.contentId);
+    input.setAttribute("aria-haspopup", "listbox");
+    input.id = ids.triggerId;
+    input.value = defaultValue;
+    setExpanded(input, false);
+    const listbox = document.createElement("div");
+    listbox.setAttribute("role", "listbox");
+    listbox.id = ids.contentId;
+    setHidden(listbox, true);
+    setDataState(listbox, "closed");
+    function open() {
+      state.open.value = true;
+      setExpanded(input, true);
+      setHidden(listbox, false);
+      setDataState(listbox, "open");
+    }
+    function close() {
+      state.open.value = false;
+      state.activeIndex.value = -1;
+      setExpanded(input, false);
+      setDataState(listbox, "closed");
+      setHiddenAnimated(listbox, true);
+      updateActiveDescendant(-1);
+    }
+    function selectOption(value) {
+      state.value.value = value;
+      state.inputValue.value = value;
+      input.value = value;
+      for (const opt of optionElements) {
+        const isActive = opt.getAttribute("data-value") === value;
+        setSelected(opt, isActive);
+        setDataState(opt, isActive ? "active" : "inactive");
+      }
+      onValueChange?.(value);
+      close();
+      input.focus();
+    }
+    function updateActiveDescendant(index) {
+      const opt = optionElements[index];
+      if (index >= 0 && opt) {
+        input.setAttribute("aria-activedescendant", opt.id);
+        for (let i = 0;i < optionElements.length; i++) {
+          const el = optionElements[i];
+          if (el)
+            setDataState(el, i === index ? "active" : "inactive");
+        }
+      } else {
+        input.removeAttribute("aria-activedescendant");
+      }
+    }
+    input.addEventListener("input", () => {
+      state.inputValue.value = input.value;
+      onInputChange?.(input.value);
+      if (!state.open.peek())
+        open();
+    });
+    input.addEventListener("focus", () => {
+      if (!state.open.peek() && input.value.length > 0)
+        open();
+    });
+    input.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        close();
+        return;
+      }
+      if (isKey(event, Keys.ArrowDown)) {
+        event.preventDefault();
+        if (!state.open.peek()) {
+          open();
+        }
+        const next = Math.min(state.activeIndex.peek() + 1, optionElements.length - 1);
+        state.activeIndex.value = next;
+        updateActiveDescendant(next);
+        return;
+      }
+      if (isKey(event, Keys.ArrowUp)) {
+        event.preventDefault();
+        const prev = Math.max(state.activeIndex.peek() - 1, 0);
+        state.activeIndex.value = prev;
+        updateActiveDescendant(prev);
+        return;
+      }
+      if (isKey(event, Keys.Enter)) {
+        event.preventDefault();
+        const idx = state.activeIndex.peek();
+        if (idx >= 0 && idx < optionElements.length) {
+          const val = optionElements[idx]?.getAttribute("data-value");
+          if (val != null)
+            selectOption(val);
+        }
+        return;
+      }
+    });
+    function Option(value, label) {
+      const opt = document.createElement("div");
+      const optId = `${ids.contentId}-opt-${optionElements.length}`;
+      opt.setAttribute("role", "option");
+      opt.id = optId;
+      opt.setAttribute("data-value", value);
+      opt.textContent = label ?? value;
+      const isSelected = value === defaultValue;
+      setSelected(opt, isSelected);
+      setDataState(opt, isSelected ? "active" : "inactive");
+      opt.addEventListener("click", () => {
+        selectOption(value);
+      });
+      optionElements.push(opt);
+      listbox.appendChild(opt);
+      return opt;
+    }
+    return { input, listbox, state, Option };
+  }
+};
+
+export { Combobox };

package/dist/shared/chunk-cr9sbwns.js

@@ -0,0 +1,235 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  createFloatingPosition
+} from "./chunk-0mcr52hc.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/menubar/menubar.ts
+import { signal } from "@vertz/ui";
+var Menubar = {
+  Root(options = {}) {
+    const { onSelect, positioning } = options;
+    const state = { activeMenu: signal(null) };
+    const triggers = [];
+    const menus = new Map;
+    let floatingCleanup = null;
+    let dismissCleanup = null;
+    const root = document.createElement("div");
+    root.setAttribute("role", "menubar");
+    function closeAll() {
+      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);
+      }
+    }
+    function openMenu(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();
+      }
+    }
+    function handleClickOutside(event) {
+      const target = event.target;
+      if (!root.contains(target)) {
+        closeAll();
+      }
+    }
+    root.addEventListener("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);
+          }
+        }
+      }
+    });
+    function Menu(value, label) {
+      const ids = linkedIds("menubar-menu");
+      const items = [];
+      const trigger = document.createElement("button");
+      trigger.setAttribute("type", "button");
+      trigger.setAttribute("role", "menuitem");
+      trigger.id = ids.triggerId;
+      trigger.setAttribute("aria-controls", ids.contentId);
+      trigger.setAttribute("aria-haspopup", "menu");
+      trigger.setAttribute("data-value", value);
+      trigger.textContent = label ?? value;
+      setExpanded(trigger, false);
+      setDataState(trigger, "closed");
+      setRovingTabindex(triggers.concat(trigger), triggers.length);
+      const content = document.createElement("div");
+      content.setAttribute("role", "menu");
+      content.id = ids.contentId;
+      setHidden(content, true);
+      setDataState(content, "closed");
+      trigger.addEventListener("click", () => {
+        if (state.activeMenu.peek() === value) {
+          closeAll();
+        } else {
+          openMenu(value);
+        }
+      });
+      trigger.addEventListener("keydown", (event) => {
+        if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          openMenu(value);
+        }
+      });
+      content.addEventListener("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 = items.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, items, { orientation: "vertical" });
+      });
+      function createItem(val, itemLabel, parent) {
+        const item = document.createElement("div");
+        item.setAttribute("role", "menuitem");
+        item.setAttribute("data-value", val);
+        item.setAttribute("tabindex", "-1");
+        item.textContent = itemLabel ?? val;
+        item.addEventListener("click", () => {
+          onSelect?.(val);
+          closeAll();
+          trigger.focus();
+        });
+        items.push(item);
+        (parent ?? content).appendChild(item);
+        return item;
+      }
+      function Item(val, itemLabel) {
+        return createItem(val, itemLabel);
+      }
+      function Group(groupLabel) {
+        const el = document.createElement("div");
+        el.setAttribute("role", "group");
+        el.setAttribute("aria-label", groupLabel);
+        content.appendChild(el);
+        return {
+          el,
+          Item: (val, l) => createItem(val, l, el)
+        };
+      }
+      function Separator() {
+        const hr = document.createElement("hr");
+        hr.setAttribute("role", "separator");
+        content.appendChild(hr);
+        return hr;
+      }
+      triggers.push(trigger);
+      setRovingTabindex(triggers, 0);
+      menus.set(value, { trigger, content, items });
+      root.appendChild(trigger);
+      return { trigger, content, Item, Group, Separator };
+    }
+    return { root, state, Menu };
+  }
+};
+
+export { Menubar };