@vertz/ui-primitives 0.2.22 → 0.2.24

package/dist/shared/chunk-qrm43tr3.js

@@ -0,0 +1,357 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/command/command-composed.tsx
+import { computed } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame } from "@vertz/ui/internals";
+import { createContext, useContext } from "@vertz/ui";
+var CommandContext = createContext(undefined, "@vertz/ui-primitives::CommandContext");
+function useCommandContext(componentName) {
+  const ctx = useContext(CommandContext);
+  if (!ctx) {
+    throw new Error(`<Command.${componentName}> must be used inside <Command>. ` + "Ensure it is a direct or nested child of the Command root component.");
+  }
+  return ctx;
+}
+function CommandInput(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useCommandContext("Input");
+    const __mfResult0 = (() => {
+      const __el0 = __element("input");
+      __el0.setAttribute("type", "text");
+      __el0.setAttribute("role", "combobox");
+      __el0.setAttribute("aria-autocomplete", "list");
+      __el0.setAttribute("aria-expanded", "true");
+      {
+        const __v = ctx.listId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-command-input", "");
+      {
+        const __v = ctx.placeholder;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("placeholder", __v === true ? "" : __v);
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.input, __props.className ?? __props.class));
+      __on(__el0, "input", (e) => {
+        ctx.handleInput(e.target);
+      });
+      __on(__el0, "keydown", (e) => {
+        ctx.handleKeydown(e, e.target);
+      });
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CommandList(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useCommandContext("List");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "listbox");
+      {
+        const __v = ctx.listId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.list, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CommandEmpty(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useCommandContext("Empty");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-part", "command-empty");
+      __el0.setAttribute("data-command-empty", "");
+      __el0.setAttribute("aria-hidden", "true");
+      __el0.setAttribute("style", "display: none");
+      __attr(__el0, "class", () => cn(ctx.classes?.empty, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CommandItem(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useCommandContext("Item");
+    const isInitialActive = ctx.claimInitialActive();
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "option");
+      __attr(__el0, "data-value", () => __props.value);
+      {
+        const __v = isInitialActive ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-selected", __v === true ? "" : __v);
+      }
+      __attr(__el0, "data-keywords", () => __props.keywords && __props.keywords.length > 0 ? __props.keywords.join(" ") : undefined);
+      __attr(__el0, "class", () => cn(ctx.classes?.item, __props.className ?? __props.class));
+      __on(__el0, "click", () => {
+        ctx.getOnSelect()?.(__props.value);
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CommandGroup(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useCommandContext("Group");
+    const headingId = uniqueId("command-group");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "group");
+      {
+        const __v = headingId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-labelledby", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-command-group", "");
+      __attr(__el0, "class", () => cn(ctx.classes?.group, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("div");
+        {
+          const __v = headingId;
+          if (__v != null && __v !== false)
+            __el1.setAttribute("id", __v === true ? "" : __v);
+        }
+        __el1.setAttribute("data-command-group-heading", "");
+        {
+          const __v = cn(ctx.classes?.groupHeading);
+          if (__v != null && __v !== false)
+            __el1.setAttribute("class", __v === true ? "" : __v);
+        }
+        __enterChildren(__el1);
+        __append(__el1, __child(() => __props.label));
+        __exitChildren();
+        return __el1;
+      })());
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function CommandSeparator(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useCommandContext("Separator");
+    const __mfResult0 = (() => {
+      const __el0 = __element("hr");
+      __el0.setAttribute("role", "separator");
+      __attr(__el0, "class", () => cn(ctx.classes?.separator, __props.className ?? __props.class));
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedCommandRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let claimInitialActive = function() {
+      if (state.initialClaimed)
+        return false;
+      state.initialClaimed = true;
+      return true;
+    }, findRoot = function(el) {
+      let current = el;
+      while (current) {
+        if (current.id === rootId)
+          return current;
+        current = current.parentElement;
+      }
+      return null;
+    }, getItemsFrom = function(root) {
+      return [...root.querySelectorAll('[role="option"]')];
+    }, getVisibleItemsFrom = function(root) {
+      return getItemsFrom(root).filter((item) => item.getAttribute("aria-hidden") !== "true");
+    }, updateActiveItemIn = function(root) {
+      const allItems = getItemsFrom(root);
+      const visible = getVisibleItemsFrom(root);
+      for (const item of allItems) {
+        item.setAttribute("aria-selected", "false");
+      }
+      if (visible.length > 0 && state.activeIndex >= 0 && state.activeIndex < visible.length) {
+        visible[state.activeIndex]?.setAttribute("aria-selected", "true");
+      }
+    }, runFilterFrom = function(inputEl, root) {
+      const search = inputEl.value ?? "";
+      const allItems = getItemsFrom(root);
+      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.value(searchable, search);
+        item.setAttribute("aria-hidden", String(!matches));
+        item.style.display = matches ? "" : "none";
+        if (matches)
+          visibleCount++;
+      }
+      const groups = root.querySelectorAll("[data-command-group]");
+      for (const group of groups) {
+        const groupItems = group.querySelectorAll('[role="option"]');
+        const hasVisible = [...groupItems].some((item) => item.getAttribute("aria-hidden") !== "true");
+        const heading = group.querySelector("[data-command-group-heading]");
+        if (heading) {
+          heading.setAttribute("aria-hidden", String(!hasVisible));
+          heading.style.display = hasVisible ? "" : "none";
+        }
+        group.style.display = hasVisible ? "" : "none";
+      }
+      const emptyEl = root.querySelector("[data-command-empty]");
+      if (emptyEl) {
+        const hide = visibleCount > 0;
+        emptyEl.setAttribute("aria-hidden", String(hide));
+        emptyEl.style.display = hide ? "none" : "";
+      }
+      state.activeIndex = 0;
+      updateActiveItemIn(root);
+    }, handleInput = function(inputEl) {
+      const root = findRoot(inputEl);
+      if (!root)
+        return;
+      __props.onInputChange?.(inputEl.value);
+      runFilterFrom(inputEl, root);
+    }, handleKeydown = function(event, inputEl) {
+      const root = findRoot(inputEl);
+      if (!root)
+        return;
+      const visible = getVisibleItemsFrom(root);
+      if (isKey(event, Keys.ArrowDown)) {
+        event.preventDefault();
+        const next = Math.min(state.activeIndex + 1, visible.length - 1);
+        state.activeIndex = next;
+        updateActiveItemIn(root);
+        return;
+      }
+      if (isKey(event, Keys.ArrowUp)) {
+        event.preventDefault();
+        const prev = Math.max(state.activeIndex - 1, 0);
+        state.activeIndex = prev;
+        updateActiveItemIn(root);
+        return;
+      }
+      if (isKey(event, Keys.Enter)) {
+        event.preventDefault();
+        const active = visible[state.activeIndex];
+        if (active) {
+          const val = active.getAttribute("data-value");
+          if (val !== null) {
+            __props.onSelect?.(val);
+          }
+        }
+        return;
+      }
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        inputEl.value = "";
+        __props.onInputChange?.("");
+        runFilterFrom(inputEl, root);
+      }
+    };
+    const rootId = uniqueId("command");
+    const listId = uniqueId("command-list");
+    const defaultFilter = (value, search) => value.toLowerCase().includes(search.toLowerCase());
+    const filterFn = computed(() => __props.filter ?? defaultFilter);
+    const state = {
+      activeIndex: 0,
+      initialClaimed: false
+    };
+    const ctx = {
+      rootId,
+      listId,
+      classes: __props.classes,
+      getOnSelect: () => __props.onSelect,
+      placeholder: __props.placeholder,
+      handleInput,
+      handleKeydown,
+      claimInitialActive
+    };
+    const __mfResult0 = CommandContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      {
+        const __v = rootId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __attr(__el0, "class", () => cn(__props.classes?.root));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedCommand = Object.assign(ComposedCommandRoot, {
+  Input: CommandInput,
+  List: CommandList,
+  Empty: CommandEmpty,
+  Item: CommandItem,
+  Group: CommandGroup,
+  Separator: CommandSeparator
+});
+
+export { ComposedCommand };

package/dist/shared/{chunk-jda3v59q.js → chunk-qsp7sfhp.js}

@@ -1,9 +1,9 @@
 import {
   Calendar
-} from "./chunk-k8nabsxm.js";
+} from "./chunk-b4zzg457.js";
 import {
   Popover
-} from "./chunk-9ezgd78r.js";
+} from "./chunk-585ysr70.js";
 
 // src/date-picker/date-picker.ts
 import { signal } from "@vertz/ui";

package/dist/shared/{chunk-dhyr0s9n.js → chunk-qwqnjjg8.js}

@@ -1,6 +1,6 @@
 import {
   Menu
-} from "./chunk-4rf1m34c.js";
+} from "./chunk-r0rz7z03.js";
 
 // src/dropdown-menu/dropdown-menu.ts
 var DropdownMenu = {

package/dist/shared/chunk-r0rz7z03.js

@@ -0,0 +1,266 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition
+} from "./chunk-vef3sepw.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/menu/menu.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function MenuRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let handleClickOutside = function(event) {
+      const target = event.target;
+      if (!trigger.contains(target) && !content.contains(target)) {
+        close();
+      }
+    }, open = function(activateFirst = false) {
+      state.open.value = true;
+      setExpanded(trigger, true);
+      setHidden(content, false);
+      setDataState(trigger, "open");
+      setDataState(content, "open");
+      onOpenChange?.(true);
+      if (positioning) {
+        const ref = positioning.referenceElement ?? trigger;
+        const result = createFloatingPosition(ref, content, positioning);
+        floatingCleanup = result.cleanup;
+        dismissCleanup = createDismiss({
+          onDismiss: close,
+          insideElements: [ref, trigger, content],
+          escapeKey: false
+        });
+      } else {
+        document.addEventListener("mousedown", handleClickOutside);
+      }
+      if (activateFirst && items.length > 0) {
+        state.activeIndex.value = 0;
+        updateActiveItem(0);
+        items[0]?.focus();
+      } else {
+        state.activeIndex.value = -1;
+        updateActiveItem(-1);
+        content.focus();
+      }
+    }, close = function() {
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setDataState(trigger, "closed");
+      setDataState(content, "closed");
+      setHiddenAnimated(content, true);
+      onOpenChange?.(false);
+      if (positioning) {
+        floatingCleanup?.();
+        floatingCleanup = null;
+        dismissCleanup?.();
+        dismissCleanup = null;
+      } else {
+        document.removeEventListener("mousedown", handleClickOutside);
+      }
+      trigger.focus();
+    }, updateActiveItem = function(index) {
+      for (let i = 0;i < items.length; i++) {
+        items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
+      }
+    }, createItem = function(value, label) {
+      const item = (() => {
+        const __el2 = __element("div");
+        __el2.setAttribute("role", "menuitem");
+        {
+          const __v = value;
+          if (__v != null && __v !== false)
+            __el2.setAttribute("data-value", __v === true ? "" : __v);
+        }
+        __el2.setAttribute("tabindex", "-1");
+        __on(__el2, "click", () => {
+          onSelect?.(value);
+          close();
+        });
+        __enterChildren(__el2);
+        __insert(__el2, label ?? value);
+        __exitChildren();
+        return __el2;
+      })();
+      items.push(item);
+      return item;
+    }, Item = function(value, label) {
+      return createItem(value, label);
+    }, Group = function(label) {
+      const el = (() => {
+        const __el3 = __element("div");
+        __el3.setAttribute("role", "group");
+        {
+          const __v = label;
+          if (__v != null && __v !== false)
+            __el3.setAttribute("aria-label", __v === true ? "" : __v);
+        }
+        return __el3;
+      })();
+      return {
+        el,
+        Item: (value, itemLabel) => createItem(value, itemLabel)
+      };
+    }, Separator = function() {
+      return (() => {
+        const __el4 = __element("hr");
+        __el4.setAttribute("data-v-id", "MenuRoot");
+        __el4.setAttribute("role", "separator");
+        return __el4;
+      })();
+    }, Label = function(text) {
+      return (() => {
+        const __el5 = __element("div");
+        __el5.setAttribute("role", "none");
+        __enterChildren(__el5);
+        __insert(__el5, text);
+        __exitChildren();
+        return __el5;
+      })();
+    };
+    const { onSelect, onOpenChange, positioning, ...attrs } = options;
+    const ids = linkedIds("menu");
+    const state = {
+      open: signal(false),
+      activeIndex: signal(-1)
+    };
+    const items = [];
+    let floatingCleanup = null;
+    let dismissCleanup = null;
+    const trigger = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      {
+        const __v = ids.triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("aria-haspopup", "menu");
+      __el0.setAttribute("aria-expanded", "false");
+      __el0.setAttribute("data-state", "closed");
+      __on(__el0, "click", () => {
+        if (state.open.peek()) {
+          close();
+        } else {
+          open();
+        }
+      });
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          if (!state.open.peek())
+            open(true);
+        }
+      });
+      return __el0;
+    })();
+    const content = (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("role", "menu");
+      __el1.setAttribute("tabindex", "-1");
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el1.setAttribute("aria-hidden", "true");
+      __el1.setAttribute("data-state", "closed");
+      {
+        const __v = { display: "none" };
+        if (__v != null && __v !== false)
+          __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __on(__el1, "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;
+        }
+        if (state.activeIndex.peek() === -1) {
+          if (isKey(event, Keys.ArrowDown)) {
+            event.preventDefault();
+            state.activeIndex.value = 0;
+            updateActiveItem(0);
+            items[0]?.focus();
+            return;
+          }
+          if (isKey(event, Keys.ArrowUp)) {
+            event.preventDefault();
+            const last = items.length - 1;
+            state.activeIndex.value = last;
+            updateActiveItem(last);
+            items[last]?.focus();
+            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();
+          }
+        }
+      });
+      return __el1;
+    })();
+    applyAttrs(trigger, attrs);
+    const __mfResult0 = { trigger, content, state, Item, Group, Separator, Label };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Menu = {
+  Root: MenuRoot
+};
+
+export { Menu };