@vertz/ui-primitives 0.2.22 → 0.2.24

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

@@ -0,0 +1,215 @@
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  handleListNavigation
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setHidden,
+  setSelected
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/tabs/tabs.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function TabList(orientation, triggers, tabValues, selectTab) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "tablist");
+      {
+        const __v = orientation === "vertical" ? "vertical" : undefined;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-orientation", __v === true ? "" : __v);
+      }
+      __on(__el0, "keydown", (event) => {
+        const result = handleListNavigation(event, triggers, {
+          orientation
+        });
+        if (result) {
+          const idx = triggers.indexOf(result);
+          if (idx >= 0) {
+            const val = tabValues[idx];
+            if (val !== undefined)
+              selectTab(val);
+          }
+        }
+      });
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TabTrigger(triggerId, panelId, value, label, isActive, selectTab) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      __el0.setAttribute("role", "tab");
+      {
+        const __v = triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = panelId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      {
+        const __v = isActive ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-selected", __v === true ? "" : __v);
+      }
+      {
+        const __v = isActive ? "active" : "inactive";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __on(__el0, "click", () => {
+        selectTab(value);
+      });
+      __enterChildren(__el0);
+      __insert(__el0, label ?? value);
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TabsContainer(list) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __enterChildren(__el0);
+      __insert(__el0, list);
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TabPanel(panelId, triggerId, isActive) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "tabpanel");
+      {
+        const __v = panelId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-labelledby", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("tabindex", "0");
+      {
+        const __v = isActive ? "false" : "true";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-hidden", __v === true ? "" : __v);
+      }
+      {
+        const __v = isActive ? "active" : "inactive";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = { display: isActive ? "" : "none" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function TabsRoot(options = {}) {
+  const { defaultValue = "", orientation = "horizontal", onValueChange, ...attrs } = options;
+  const state = { value: signal(defaultValue) };
+  const triggers = [];
+  const panels = [];
+  const tabValues = [];
+  function selectTab(value) {
+    state.value.value = value;
+    for (let i = 0;i < tabValues.length; i++) {
+      const isActive = tabValues[i] === value;
+      const trig = triggers[i];
+      const panel = panels[i];
+      if (!trig || !panel)
+        continue;
+      setSelected(trig, isActive);
+      setDataState(trig, isActive ? "active" : "inactive");
+      trig.setAttribute("tabindex", isActive ? "0" : "-1");
+      setHidden(panel, !isActive);
+      setDataState(panel, isActive ? "active" : "inactive");
+    }
+    onValueChange?.(value);
+  }
+  const list = TabList(orientation, triggers, tabValues, selectTab);
+  const root = TabsContainer(list);
+  const cleanups = [];
+  function Tab(value, label) {
+    const baseId = uniqueId("tab");
+    const triggerId = `${baseId}-trigger`;
+    const panelId = `${baseId}-panel`;
+    const isActive = value === state.value.peek();
+    const trig = TabTrigger(triggerId, panelId, value, label, isActive, selectTab);
+    const handleClick = () => {
+      trig.focus();
+    };
+    trig.addEventListener("click", handleClick);
+    cleanups.push(() => trig.removeEventListener("click", handleClick));
+    const panel = TabPanel(panelId, triggerId, isActive);
+    triggers.push(trig);
+    panels.push(panel);
+    tabValues.push(value);
+    setRovingTabindex(triggers, triggers.findIndex((t) => tabValues[triggers.indexOf(t)] === state.value.peek()));
+    return { trigger: trig, panel };
+  }
+  function destroy() {
+    for (const cleanup of cleanups)
+      cleanup();
+    cleanups.length = 0;
+  }
+  applyAttrs(root, attrs);
+  return { root, list, state, Tab, destroy };
+}
+var Tabs = {
+  Root: TabsRoot
+};
+
+export { Tabs };

package/dist/shared/chunk-aa3w85hn.js

@@ -0,0 +1,321 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition,
+  virtualElement
+} from "./chunk-vef3sepw.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/context-menu/context-menu-composed.tsx
+import { computed, signal } from "@vertz/ui";
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { createContext, onMount, ref, useContext } from "@vertz/ui";
+var ContextMenuContext = createContext(undefined, "@vertz/ui-primitives::ContextMenuContext");
+function useContextMenuContext(componentName) {
+  const ctx = useContext(ContextMenuContext);
+  if (!ctx) {
+    throw new Error(`<ContextMenu.${componentName}> must be used inside <ContextMenu>. ` + "Ensure it is a direct or nested child of the ContextMenu root component.");
+  }
+  return ctx;
+}
+function ContextMenuTrigger(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContextMenuContext("Trigger");
+    const el = computed(() => (() => {
+      const __el0 = __element("div");
+      {
+        const __v = { display: "contents" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __el0.setAttribute("data-part", "trigger");
+      __el0.setAttribute("data-contextmenu-trigger", "");
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })());
+    onMount(() => {
+      const triggerEl = el.value;
+      function handleContextMenu(e) {
+        e.preventDefault();
+        ctx.open(e.clientX, e.clientY);
+      }
+      triggerEl.addEventListener("contextmenu", handleContextMenu);
+      return () => triggerEl.removeEventListener("contextmenu", handleContextMenu);
+    });
+    const __mfResult0 = el.value;
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ContextMenuContent(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContextMenuContext("Content");
+    const instanceIndex = ctx._contentCount.value++;
+    if (instanceIndex > 0) {
+      console.warn("Duplicate <ContextMenu.Content> detected – only the first is used");
+    }
+    const el = computed(() => (() => {
+      const __el0 = __element("div");
+      ctx.contentRef.current = __el0;
+      __el0.setAttribute("role", "menu");
+      __el0.setAttribute("tabindex", "-1");
+      {
+        const __v = ctx.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-contextmenu-content", "");
+      __el0.setAttribute("aria-hidden", "true");
+      __el0.setAttribute("data-state", "closed");
+      {
+        const __v = { display: "none" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __attr(__el0, "class", () => cn(ctx.classes?.content, __props.className ?? __props.class));
+      __on(__el0, "keydown", (event) => {
+        if (isKey(event, Keys.Escape, Keys.Tab)) {
+          event.preventDefault();
+          ctx.close();
+          return;
+        }
+        const el2 = event.currentTarget ?? event.target;
+        const items = [...el2.querySelectorAll('[role="menuitem"]')];
+        const focusedIdx = items.indexOf(document.activeElement);
+        if (isKey(event, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          const active = items[focusedIdx];
+          if (active) {
+            const val = active.getAttribute("data-value");
+            if (val !== null) {
+              ctx.onSelect?.(val);
+              ctx.close();
+            }
+          }
+          return;
+        }
+        handleListNavigation(event, items, { orientation: "vertical" });
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })());
+    const __mfResult0 = el.value;
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ContextMenuItem(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContextMenuContext("Item");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "menuitem");
+      __attr(__el0, "data-value", () => __props.value);
+      __el0.setAttribute("tabindex", "-1");
+      __attr(__el0, "class", () => cn(ctx.classes?.item, __props.className ?? __props.class));
+      __on(__el0, "click", () => {
+        ctx.onSelect?.(__props.value);
+        ctx.close();
+      });
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ContextMenuGroup(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContextMenuContext("Group");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "group");
+      __attr(__el0, "aria-label", () => __props.label);
+      __attr(__el0, "class", () => cn(ctx.classes?.group, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ContextMenuLabel(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const { classes } = useContextMenuContext("Label");
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "none");
+      __attr(__el0, "class", () => cn(classes?.label, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ContextMenuSeparator(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const { classes } = useContextMenuContext("Separator");
+    const __mfResult0 = (() => {
+      const __el0 = __element("hr");
+      __el0.setAttribute("role", "separator");
+      __attr(__el0, "class", () => cn(classes?.separator, __props.className ?? __props.class));
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function updateContentDOM(el, isOpen) {
+  el.setAttribute("data-state", isOpen ? "open" : "closed");
+  el.setAttribute("aria-hidden", isOpen ? "false" : "true");
+  el.style.display = isOpen ? "" : "none";
+}
+function ComposedContextMenuRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let getContentEl = function() {
+      return contentRef.current ?? null;
+    }, getItems = function() {
+      const content = getContentEl();
+      if (!content)
+        return [];
+      return [...content.querySelectorAll('[role="menuitem"]')];
+    }, updateActiveItem = function(items, index) {
+      items.forEach((item, i) => {
+        item.setAttribute("tabindex", i === index ? "0" : "-1");
+      });
+    }, open = function(x, y) {
+      isOpen.value = true;
+      state.activeIndex = -1;
+      __props.onOpenChange?.(true);
+      const contentEl = getContentEl();
+      if (contentEl) {
+        updateContentDOM(contentEl, true);
+      }
+      queueMicrotask(() => {
+        const el = contentEl ?? getContentEl();
+        if (!el)
+          return;
+        const effectivePositioning = {
+          ...__props.positioning ?? {},
+          placement: __props.positioning?.placement ?? "bottom-start"
+        };
+        const result = createFloatingPosition(virtualElement(x, y), el, effectivePositioning);
+        state.floatingCleanup = result.cleanup;
+        state.dismissCleanup = createDismiss({
+          onDismiss: close,
+          insideElements: [el],
+          escapeKey: false
+        });
+        const items = getItems();
+        updateActiveItem(items, -1);
+        el.focus();
+      });
+    }, close = function() {
+      isOpen.value = false;
+      state.floatingCleanup?.();
+      state.floatingCleanup = null;
+      state.dismissCleanup?.();
+      state.dismissCleanup = null;
+      __props.onOpenChange?.(false);
+      const contentEl = getContentEl();
+      if (contentEl) {
+        updateContentDOM(contentEl, false);
+      }
+    };
+    const ids = linkedIds("ctxmenu");
+    const contentRef = ref();
+    const isOpen = signal(false, "isOpen");
+    const state = { activeIndex: -1, floatingCleanup: null, dismissCleanup: null };
+    const ctx = {
+      isOpen,
+      contentId: ids.contentId,
+      contentRef,
+      classes: __props.classes,
+      onSelect: __props.onSelect,
+      open,
+      close,
+      _contentCount: { value: 0 }
+    };
+    const __mfResult0 = ContextMenuContext.Provider({ get value() {
+      return ctx;
+    }, children: () => (() => {
+      const __el0 = __element("span");
+      {
+        const __v = { display: "contents" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-contextmenu-root", __v === true ? "" : __v);
+      }
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedContextMenu = Object.assign(ComposedContextMenuRoot, {
+  Trigger: ContextMenuTrigger,
+  Content: ContextMenuContent,
+  Item: ContextMenuItem,
+  Group: ContextMenuGroup,
+  Label: ContextMenuLabel,
+  Separator: ContextMenuSeparator
+});
+
+export { ComposedContextMenu };