@vertz/ui-primitives 0.2.15 → 0.2.17

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-96d9nr7y.js

@@ -0,0 +1,19 @@
+import {
+  Menu
+} from "./chunk-7ffg0caj.js";
+
+// src/dropdown-menu/dropdown-menu.ts
+var DropdownMenu = {
+  Root(options = {}) {
+    const { positioning, ...rest } = options;
+    return Menu.Root({
+      ...rest,
+      positioning: {
+        placement: "bottom-start",
+        ...positioning
+      }
+    });
+  }
+};
+
+export { 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-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-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 };

package/dist/shared/chunk-bew4bjgf.js

@@ -0,0 +1,165 @@
+import {
+  createFloatingPosition
+} from "./chunk-0mcr52hc.js";
+import {
+  Keys,
+  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/hover-card/hover-card.tsx
+import { __element, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function HoverCardRoot(options = {}) {
+  const { openDelay = 700, closeDelay = 300, onOpenChange, positioning, ...attrs } = options;
+  const contentId = uniqueId("hovercard");
+  const state = { open: signal(false) };
+  let openTimeout = null;
+  let closeTimeout = null;
+  let floatingCleanup = null;
+  function cancelTimers() {
+    if (openTimeout) {
+      clearTimeout(openTimeout);
+      openTimeout = null;
+    }
+    if (closeTimeout) {
+      clearTimeout(closeTimeout);
+      closeTimeout = null;
+    }
+  }
+  function cancelCloseTimer() {
+    if (closeTimeout) {
+      clearTimeout(closeTimeout);
+      closeTimeout = null;
+    }
+  }
+  function positionContent() {
+    if (positioning) {
+      floatingCleanup?.();
+      const effectivePlacement = positioning.placement ?? "bottom";
+      const result = createFloatingPosition(trigger, content, {
+        ...positioning,
+        placement: effectivePlacement
+      });
+      floatingCleanup = result.cleanup;
+    }
+  }
+  function show() {
+    cancelTimers();
+    if (state.open.peek())
+      return;
+    openTimeout = setTimeout(() => {
+      state.open.value = true;
+      setExpanded(trigger, true);
+      setHidden(content, false);
+      setDataState(content, "open");
+      positionContent();
+      onOpenChange?.(true);
+      openTimeout = null;
+    }, openDelay);
+  }
+  function showImmediate() {
+    cancelTimers();
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(content, false);
+    setDataState(content, "open");
+    positionContent();
+    onOpenChange?.(true);
+  }
+  function hide() {
+    cancelTimers();
+    if (!state.open.peek())
+      return;
+    closeTimeout = setTimeout(() => {
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setDataState(content, "closed");
+      setHiddenAnimated(content, true);
+      floatingCleanup?.();
+      floatingCleanup = null;
+      onOpenChange?.(false);
+      closeTimeout = null;
+    }, closeDelay);
+  }
+  function hideImmediate() {
+    cancelTimers();
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(content, "closed");
+    setHiddenAnimated(content, true);
+    floatingCleanup?.();
+    floatingCleanup = null;
+    onOpenChange?.(false);
+  }
+  function handleTriggerBlur(event) {
+    const related = event.relatedTarget;
+    if (related && (trigger.contains(related) || content.contains(related)))
+      return;
+    hide();
+  }
+  function handleTriggerKeydown(event) {
+    if (isKey(event, Keys.Escape) && state.open.peek()) {
+      hideImmediate();
+    }
+  }
+  function handleContentFocusout(event) {
+    const related = event.relatedTarget;
+    if (related && (trigger.contains(related) || content.contains(related)))
+      return;
+    hide();
+  }
+  function handleContentKeydown(event) {
+    if (isKey(event, Keys.Escape)) {
+      hideImmediate();
+      trigger.focus();
+    }
+  }
+  const trigger = (() => {
+    const __el0 = __element("span");
+    __el0.setAttribute("aria-haspopup", "dialog");
+    __el0.setAttribute("aria-expanded", "false");
+    __on(__el0, "mouseenter", show);
+    __on(__el0, "mouseleave", hide);
+    __on(__el0, "focus", showImmediate);
+    __on(__el0, "blur", handleTriggerBlur);
+    __on(__el0, "keydown", handleTriggerKeydown);
+    return __el0;
+  })();
+  const content = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("role", "dialog");
+    {
+      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");
+    __on(__el1, "mouseenter", cancelCloseTimer);
+    __on(__el1, "mouseleave", hide);
+    __on(__el1, "focusin", cancelCloseTimer);
+    __on(__el1, "focusout", handleContentFocusout);
+    __on(__el1, "keydown", handleContentKeydown);
+    return __el1;
+  })();
+  applyAttrs(trigger, attrs);
+  return { trigger, content, state };
+}
+var HoverCard = {
+  Root: HoverCardRoot
+};
+
+export { HoverCard };

package/dist/shared/chunk-dpsgb1xw.js

@@ -0,0 +1,18 @@
+// src/utils/attrs.ts
+function applyAttrs(el, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value == null)
+      continue;
+    if (key === "class") {
+      const existing = el.getAttribute("class");
+      el.setAttribute("class", existing ? `${existing} ${String(value)}` : String(value));
+    } else if (key === "style") {
+      const existing = el.getAttribute("style");
+      el.setAttribute("style", existing ? `${existing}; ${String(value)}` : String(value));
+    } else {
+      el.setAttribute(key, String(value));
+    }
+  }
+}
+
+export { applyAttrs };

package/dist/shared/chunk-e2v1c9ex.js

@@ -0,0 +1,62 @@
+// src/utils/focus.ts
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  "[contenteditable]"
+].join(", ");
+function getFocusableElements(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+function trapFocus(container) {
+  function handleKeyDown(event) {
+    if (event.key !== "Tab")
+      return;
+    const focusable = getFocusableElements(container);
+    if (focusable.length === 0)
+      return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (!first || !last)
+      return;
+    if (event.shiftKey) {
+      if (document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  }
+  container.addEventListener("keydown", handleKeyDown);
+  return () => {
+    container.removeEventListener("keydown", handleKeyDown);
+  };
+}
+function focusFirst(container) {
+  const focusable = getFocusableElements(container);
+  if (focusable.length > 0) {
+    focusable[0]?.focus();
+  }
+}
+function saveFocus() {
+  const previously = document.activeElement;
+  return () => {
+    if (previously && typeof previously.focus === "function") {
+      previously.focus();
+    }
+  };
+}
+function setRovingTabindex(items, activeIndex) {
+  for (let i = 0;i < items.length; i++) {
+    items[i]?.setAttribute("tabindex", i === activeIndex ? "0" : "-1");
+  }
+}
+
+export { getFocusableElements, trapFocus, focusFirst, saveFocus, setRovingTabindex };