@vertz/ui-primitives 0.2.16 → 0.2.18

package/dist/shared/chunk-bcfzteh0.js

@@ -1,148 +0,0 @@
-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

@@ -1,235 +0,0 @@
-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 };

package/dist/shared/chunk-cvbf1js1.js

@@ -1,52 +0,0 @@
-import {
-  setDataState
-} from "./chunk-vvjyx7fe.js";
-import {
-  uniqueId
-} from "./chunk-8y1jf6xr.js";
-
-// src/toast/toast.ts
-import { signal } from "@vertz/ui";
-var Toast = {
-  Root(options = {}) {
-    const { duration = 5000, politeness = "polite" } = options;
-    const state = { messages: signal([]) };
-    const region = document.createElement("div");
-    region.setAttribute("role", "status");
-    region.setAttribute("aria-live", politeness);
-    region.setAttribute("aria-atomic", "false");
-    setDataState(region, "empty");
-    function announce(content) {
-      const id = uniqueId("toast");
-      const el = document.createElement("div");
-      el.setAttribute("role", "status");
-      el.setAttribute("data-toast-id", id);
-      el.textContent = content;
-      setDataState(el, "open");
-      const msg = { id, content, el };
-      const messages = [...state.messages.peek(), msg];
-      state.messages.value = messages;
-      region.appendChild(el);
-      setDataState(region, "active");
-      if (duration > 0) {
-        setTimeout(() => dismiss(id), duration);
-      }
-      return msg;
-    }
-    function dismiss(id) {
-      const messages = state.messages.peek().filter((m) => m.id !== id);
-      state.messages.value = messages;
-      const el = region.querySelector(`[data-toast-id="${id}"]`);
-      if (el) {
-        setDataState(el, "closed");
-        el.remove();
-      }
-      if (messages.length === 0) {
-        setDataState(region, "empty");
-      }
-    }
-    return { region, state, announce, dismiss };
-  }
-};
-
-export { Toast };

package/dist/shared/chunk-dkhst4wv.js

@@ -1,97 +0,0 @@
-import {
-  createDismiss
-} from "./chunk-a6wp8c32.js";
-import {
-  focusFirst,
-  saveFocus
-} from "./chunk-e2v1c9ex.js";
-import {
-  createFloatingPosition
-} from "./chunk-0mcr52hc.js";
-import {
-  Keys,
-  isKey
-} from "./chunk-jctqs9m4.js";
-import {
-  setDataState,
-  setExpanded,
-  setHidden,
-  setHiddenAnimated
-} from "./chunk-vvjyx7fe.js";
-import {
-  linkedIds
-} from "./chunk-8y1jf6xr.js";
-
-// src/popover/popover.ts
-import { signal } from "@vertz/ui";
-var Popover = {
-  Root(options = {}) {
-    const { defaultOpen = false, onOpenChange, positioning } = options;
-    const ids = linkedIds("popover");
-    const state = { open: signal(defaultOpen) };
-    let restoreFocus = null;
-    let floatingCleanup = null;
-    let dismissCleanup = null;
-    const trigger = document.createElement("button");
-    trigger.setAttribute("type", "button");
-    trigger.id = ids.triggerId;
-    trigger.setAttribute("aria-controls", ids.contentId);
-    trigger.setAttribute("aria-haspopup", "dialog");
-    setExpanded(trigger, defaultOpen);
-    setDataState(trigger, defaultOpen ? "open" : "closed");
-    const content = document.createElement("div");
-    content.setAttribute("role", "dialog");
-    content.id = ids.contentId;
-    setHidden(content, !defaultOpen);
-    setDataState(content, defaultOpen ? "open" : "closed");
-    function open() {
-      state.open.value = true;
-      setExpanded(trigger, true);
-      setHidden(content, false);
-      setDataState(trigger, "open");
-      setDataState(content, "open");
-      restoreFocus = saveFocus();
-      queueMicrotask(() => focusFirst(content));
-      if (positioning) {
-        const result = createFloatingPosition(trigger, content, positioning);
-        floatingCleanup = result.cleanup;
-        dismissCleanup = createDismiss({
-          onDismiss: close,
-          insideElements: [trigger, content],
-          escapeKey: false
-        });
-      }
-      onOpenChange?.(true);
-    }
-    function close() {
-      state.open.value = false;
-      setExpanded(trigger, false);
-      setDataState(trigger, "closed");
-      setDataState(content, "closed");
-      setHiddenAnimated(content, true);
-      floatingCleanup?.();
-      floatingCleanup = null;
-      dismissCleanup?.();
-      dismissCleanup = null;
-      restoreFocus?.();
-      restoreFocus = null;
-      onOpenChange?.(false);
-    }
-    trigger.addEventListener("click", () => {
-      if (state.open.peek()) {
-        close();
-      } else {
-        open();
-      }
-    });
-    content.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Escape)) {
-        event.preventDefault();
-        close();
-      }
-    });
-    return { trigger, content, state };
-  }
-};
-
-export { Popover };

package/dist/shared/chunk-e3aj5yw4.js

@@ -1,115 +0,0 @@
-import {
-  Keys,
-  handleListNavigation,
-  isKey
-} from "./chunk-jctqs9m4.js";
-import {
-  setDataState,
-  setExpanded,
-  setHidden,
-  setHiddenAnimated
-} from "./chunk-vvjyx7fe.js";
-import {
-  uniqueId
-} from "./chunk-8y1jf6xr.js";
-
-// src/accordion/accordion.ts
-import { signal } from "@vertz/ui";
-var Accordion = {
-  Root(options = {}) {
-    const { multiple = false, defaultValue = [], onValueChange } = options;
-    const state = { value: signal([...defaultValue]) };
-    const triggers = [];
-    const itemMap = new Map;
-    const root = document.createElement("div");
-    root.setAttribute("data-orientation", "vertical");
-    function updateItemState(val, open) {
-      const entry = itemMap.get(val);
-      if (!entry)
-        return;
-      const { trigger: t, content: c } = entry;
-      if (open) {
-        setHidden(c, false);
-      }
-      const height = c.scrollHeight;
-      c.style.setProperty("--accordion-content-height", `${height}px`);
-      setExpanded(t, open);
-      setDataState(t, open ? "open" : "closed");
-      setDataState(c, open ? "open" : "closed");
-      if (!open) {
-        setHiddenAnimated(c, true);
-      }
-    }
-    function toggleItem(value) {
-      const prev = [...state.value.peek()];
-      const current = [...prev];
-      const idx = current.indexOf(value);
-      if (idx >= 0) {
-        current.splice(idx, 1);
-      } else {
-        if (multiple) {
-          current.push(value);
-        } else {
-          current.length = 0;
-          current.push(value);
-        }
-      }
-      state.value.value = current;
-      onValueChange?.(current);
-      for (const v of prev) {
-        if (!current.includes(v)) {
-          updateItemState(v, false);
-        }
-      }
-      for (const v of current) {
-        if (!prev.includes(v)) {
-          updateItemState(v, true);
-        }
-      }
-    }
-    root.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
-        handleListNavigation(event, triggers, { orientation: "vertical" });
-      }
-    });
-    function Item(value) {
-      const baseId = uniqueId("accordion");
-      const triggerId = `${baseId}-trigger`;
-      const contentId = `${baseId}-content`;
-      const isOpen = state.value.peek().includes(value);
-      const item = document.createElement("div");
-      item.setAttribute("data-value", value);
-      const trigger = document.createElement("button");
-      trigger.setAttribute("type", "button");
-      trigger.id = triggerId;
-      trigger.setAttribute("aria-controls", contentId);
-      trigger.setAttribute("data-value", value);
-      setExpanded(trigger, isOpen);
-      setDataState(trigger, isOpen ? "open" : "closed");
-      const content = document.createElement("div");
-      content.setAttribute("role", "region");
-      content.id = contentId;
-      content.setAttribute("aria-labelledby", triggerId);
-      setHidden(content, !isOpen);
-      setDataState(content, isOpen ? "open" : "closed");
-      trigger.addEventListener("click", () => {
-        toggleItem(value);
-      });
-      itemMap.set(value, { trigger, content });
-      triggers.push(trigger);
-      item.appendChild(trigger);
-      item.appendChild(content);
-      root.appendChild(item);
-      if (isOpen) {
-        requestAnimationFrame(() => {
-          const height = content.scrollHeight;
-          content.style.setProperty("--accordion-content-height", `${height}px`);
-        });
-      }
-      return { item, trigger, content };
-    }
-    return { root, state, Item };
-  }
-};
-
-export { Accordion };