@vertz/ui-primitives 0.2.16 → 0.2.18

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

@@ -0,0 +1,163 @@
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  handleListNavigation
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setHidden,
+  setSelected
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/tabs/tabs.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+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 = (() => {
+    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;
+  })();
+  const root = (() => {
+    const __el1 = __element("div");
+    __enterChildren(__el1);
+    __insert(__el1, list);
+    __exitChildren();
+    return __el1;
+  })();
+  function Tab(value, label) {
+    const baseId = uniqueId("tab");
+    const triggerId = `${baseId}-trigger`;
+    const panelId = `${baseId}-panel`;
+    const isActive = value === state.value.peek();
+    const trig = (() => {
+      const __el2 = __element("button");
+      __el2.setAttribute("type", "button");
+      __el2.setAttribute("role", "tab");
+      {
+        const __v = triggerId;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = panelId;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      {
+        const __v = isActive ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el2.setAttribute("aria-selected", __v === true ? "" : __v);
+      }
+      {
+        const __v = isActive ? "active" : "inactive";
+        if (__v != null && __v !== false)
+          __el2.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __on(__el2, "click", () => {
+        selectTab(value);
+        trig.focus();
+      });
+      __enterChildren(__el2);
+      __insert(__el2, label ?? value);
+      __exitChildren();
+      return __el2;
+    })();
+    const panel = (() => {
+      const __el3 = __element("div");
+      __el3.setAttribute("role", "tabpanel");
+      {
+        const __v = panelId;
+        if (__v != null && __v !== false)
+          __el3.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = triggerId;
+        if (__v != null && __v !== false)
+          __el3.setAttribute("aria-labelledby", __v === true ? "" : __v);
+      }
+      __el3.setAttribute("tabindex", "0");
+      {
+        const __v = isActive ? "false" : "true";
+        if (__v != null && __v !== false)
+          __el3.setAttribute("aria-hidden", __v === true ? "" : __v);
+      }
+      {
+        const __v = isActive ? "active" : "inactive";
+        if (__v != null && __v !== false)
+          __el3.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = isActive ? "" : "display: none";
+        if (__v != null && __v !== false)
+          __el3.setAttribute("style", __v === true ? "" : __v);
+      }
+      return __el3;
+    })();
+    triggers.push(trig);
+    panels.push(panel);
+    tabValues.push(value);
+    list.appendChild(trig);
+    root.appendChild(panel);
+    setRovingTabindex(triggers, triggers.findIndex((t) => tabValues[triggers.indexOf(t)] === state.value.peek()));
+    return { trigger: trig, panel };
+  }
+  applyAttrs(root, attrs);
+  return { root, list, state, Tab };
+}
+var Tabs = {
+  Root: TabsRoot
+};
+
+export { Tabs };

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

@@ -0,0 +1,218 @@
+import {
+  focusFirst,
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/navigation-menu/navigation-menu.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function NavigationMenuRoot(options = {}) {
+  const { orientation = "horizontal", delayOpen = 200, delayClose = 300, ...attrs } = options;
+  const state = { activeItem: signal(null) };
+  const triggers = [];
+  const items = new Map;
+  const openTimeout = signal(null, "openTimeout");
+  const closeTimeout = signal(null, "closeTimeout");
+  function cancelTimers() {
+    if (openTimeout.value) {
+      clearTimeout(openTimeout.value);
+      openTimeout.value = null;
+    }
+    if (closeTimeout.value) {
+      clearTimeout(closeTimeout.value);
+      closeTimeout.value = null;
+    }
+  }
+  function openItem(value) {
+    cancelTimers();
+    const current = state.activeItem.peek();
+    if (current && current !== value) {
+      const prev = items.get(current);
+      if (prev) {
+        setExpanded(prev.trigger, false);
+        setDataState(prev.trigger, "closed");
+        setDataState(prev.content, "closed");
+        setHiddenAnimated(prev.content, true);
+      }
+    }
+    const item = items.get(value);
+    if (!item)
+      return;
+    state.activeItem.value = value;
+    setExpanded(item.trigger, true);
+    setHidden(item.content, false);
+    setDataState(item.trigger, "open");
+    setDataState(item.content, "open");
+  }
+  function closeAll() {
+    cancelTimers();
+    const current = state.activeItem.peek();
+    if (current) {
+      const item = items.get(current);
+      if (item) {
+        setExpanded(item.trigger, false);
+        setDataState(item.trigger, "closed");
+        setDataState(item.content, "closed");
+        setHiddenAnimated(item.content, true);
+      }
+    }
+    state.activeItem.value = null;
+  }
+  const list = (() => {
+    const __el0 = __element("div");
+    __on(__el0, "keydown", (event) => {
+      if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End)) {
+        handleListNavigation(event, triggers, {
+          orientation: orientation === "horizontal" ? "horizontal" : "vertical"
+        });
+      }
+    });
+    return __el0;
+  })();
+  const viewport = (() => {
+    const __el1 = __element("div");
+    return __el1;
+  })();
+  const root = (() => {
+    const __el2 = __element("nav");
+    __enterChildren(__el2);
+    __insert(__el2, list);
+    __insert(__el2, viewport);
+    __exitChildren();
+    return __el2;
+  })();
+  function Item(value, label) {
+    const ids = linkedIds("nav-menu");
+    const trigger = (() => {
+      const __el3 = __element("button");
+      __el3.setAttribute("type", "button");
+      {
+        const __v = ids.triggerId;
+        if (__v != null && __v !== false)
+          __el3.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el3.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el3.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      __el3.setAttribute("aria-expanded", "false");
+      __el3.setAttribute("data-state", "closed");
+      __on(__el3, "click", () => {
+        if (state.activeItem.peek() === value) {
+          closeAll();
+        } else {
+          openItem(value);
+        }
+      });
+      __on(__el3, "mouseenter", () => {
+        cancelTimers();
+        openTimeout.value = setTimeout(() => {
+          openItem(value);
+          openTimeout.value = null;
+        }, delayOpen);
+      });
+      __on(__el3, "mouseleave", () => {
+        cancelTimers();
+        closeTimeout.value = setTimeout(() => {
+          closeAll();
+          closeTimeout.value = null;
+        }, delayClose);
+      });
+      __on(__el3, "keydown", (event) => {
+        if (isKey(event, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          openItem(value);
+          queueMicrotask(() => focusFirst(content));
+        }
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          closeAll();
+        }
+      });
+      __enterChildren(__el3);
+      __insert(__el3, label ?? value);
+      __exitChildren();
+      return __el3;
+    })();
+    const content = (() => {
+      const __el4 = __element("div");
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el4.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el4.setAttribute("aria-hidden", "true");
+      __el4.setAttribute("data-state", "closed");
+      __el4.setAttribute("style", "display: none");
+      __on(__el4, "mouseenter", () => cancelTimers());
+      __on(__el4, "mouseleave", () => {
+        cancelTimers();
+        closeTimeout.value = setTimeout(() => {
+          closeAll();
+          closeTimeout.value = null;
+        }, delayClose);
+      });
+      __on(__el4, "keydown", (event) => {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          event.stopPropagation();
+          closeAll();
+          trigger.focus();
+        }
+      });
+      return __el4;
+    })();
+    triggers.push(trigger);
+    setRovingTabindex(triggers, 0);
+    items.set(value, { trigger, content });
+    list.appendChild(trigger);
+    viewport.appendChild(content);
+    return { trigger, content };
+  }
+  function Link(href, label) {
+    const a = (() => {
+      const __el5 = __element("a");
+      {
+        const __v = href;
+        if (__v != null && __v !== false)
+          __el5.setAttribute("href", __v === true ? "" : __v);
+      }
+      __enterChildren(__el5);
+      __insert(__el5, label);
+      __exitChildren();
+      return __el5;
+    })();
+    list.appendChild(a);
+    return a;
+  }
+  applyAttrs(root, attrs);
+  return { root, list, viewport, state, Item, Link };
+}
+var NavigationMenu = {
+  Root: NavigationMenuRoot
+};
+
+export { NavigationMenu };

package/dist/shared/{chunk-qpfqyrc5.js → chunk-96d9nr7y.js}

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

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

@@ -0,0 +1,95 @@
+import {
+  createFloatingPosition
+} from "./chunk-0mcr52hc.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setDescribedBy,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/tooltip/tooltip.tsx
+import { __element, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function TooltipRoot(options = {}) {
+  const { delay = 300, onOpenChange, positioning, ...attrs } = options;
+  const contentId = uniqueId("tooltip");
+  const state = { open: signal(false) };
+  let showTimeout = null;
+  let floatingCleanup = null;
+  function show() {
+    if (showTimeout !== null)
+      return;
+    showTimeout = setTimeout(() => {
+      state.open.value = true;
+      setHidden(content, false);
+      setDataState(content, "open");
+      if (positioning) {
+        const effectivePlacement = positioning.placement ?? "top";
+        const result = createFloatingPosition(trigger, content, {
+          ...positioning,
+          placement: effectivePlacement
+        });
+        floatingCleanup = result.cleanup;
+      }
+      onOpenChange?.(true);
+      showTimeout = null;
+    }, delay);
+  }
+  function hide() {
+    if (showTimeout !== null) {
+      clearTimeout(showTimeout);
+      showTimeout = null;
+    }
+    state.open.value = false;
+    setDataState(content, "closed");
+    setHiddenAnimated(content, true);
+    floatingCleanup?.();
+    floatingCleanup = null;
+    onOpenChange?.(false);
+  }
+  const trigger = (() => {
+    const __el0 = __element("span");
+    __on(__el0, "mouseenter", show);
+    __on(__el0, "mouseleave", hide);
+    __on(__el0, "focus", show);
+    __on(__el0, "blur", hide);
+    __on(__el0, "keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        hide();
+      }
+    });
+    return __el0;
+  })();
+  setDescribedBy(trigger, contentId);
+  const content = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("role", "tooltip");
+    {
+      const __v = contentId;
+      if (__v != null && __v !== false)
+        __el1.setAttribute("id", __v === true ? "" : __v);
+    }
+    __el1.setAttribute("aria-hidden", "true");
+    __el1.setAttribute("data-state", "closed");
+    __el1.setAttribute("style", "display: none");
+    return __el1;
+  })();
+  applyAttrs(trigger, attrs);
+  return { trigger, content, state };
+}
+var Tooltip = {
+  Root: TooltipRoot
+};
+
+export { Tooltip };

package/dist/shared/chunk-avxcmmk6.js

@@ -0,0 +1,178 @@
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/accordion/accordion.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function AccordionRoot(options = {}) {
+  const { multiple = false, defaultValue = [], onValueChange, ...attrs } = options;
+  const state = { value: signal([...defaultValue]) };
+  const triggers = [];
+  const itemMap = new Map;
+  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);
+      }
+    }
+  }
+  const root = (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("data-orientation", "vertical");
+    __on(__el0, "keydown", (event) => {
+      if (isKey(event, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
+        handleListNavigation(event, triggers, { orientation: "vertical" });
+      }
+    });
+    return __el0;
+  })();
+  function Item(value) {
+    const baseId = uniqueId("accordion");
+    const triggerId = `${baseId}-trigger`;
+    const contentId = `${baseId}-content`;
+    const isOpen = state.value.peek().includes(value);
+    const trigger = (() => {
+      const __el1 = __element("button");
+      __el1.setAttribute("type", "button");
+      {
+        const __v = triggerId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = contentId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      {
+        const __v = isOpen ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("aria-expanded", __v === true ? "" : __v);
+      }
+      {
+        const __v = isOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __on(__el1, "click", () => toggleItem(value));
+      return __el1;
+    })();
+    const content = (() => {
+      const __el2 = __element("div");
+      __el2.setAttribute("role", "region");
+      {
+        const __v = contentId;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = triggerId;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("aria-labelledby", __v === true ? "" : __v);
+      }
+      {
+        const __v = isOpen ? "false" : "true";
+        if (__v != null && __v !== false)
+          __el2.setAttribute("aria-hidden", __v === true ? "" : __v);
+      }
+      {
+        const __v = isOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el2.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = isOpen ? "" : "display: none";
+        if (__v != null && __v !== false)
+          __el2.setAttribute("style", __v === true ? "" : __v);
+      }
+      return __el2;
+    })();
+    const item = (() => {
+      const __el3 = __element("div");
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el3.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      __enterChildren(__el3);
+      __insert(__el3, trigger);
+      __insert(__el3, content);
+      __exitChildren();
+      return __el3;
+    })();
+    itemMap.set(value, { trigger, content });
+    triggers.push(trigger);
+    root.appendChild(item);
+    if (isOpen) {
+      requestAnimationFrame(() => {
+        const height = content.scrollHeight;
+        content.style.setProperty("--accordion-content-height", `${height}px`);
+      });
+    }
+    return { item, trigger, content };
+  }
+  applyAttrs(root, attrs);
+  return { root, state, Item };
+}
+var Accordion = {
+  Root: AccordionRoot
+};
+
+export { Accordion };