@vertz/ui-primitives 0.2.14 → 0.2.16

package/dist/shared/chunk-0mcr52hc.js

@@ -0,0 +1,78 @@
+// src/utils/floating.ts
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+function createFloatingPosition(reference, floating, options = {}) {
+  const {
+    placement = "bottom-start",
+    strategy = "fixed",
+    offset: offsetValue = 4,
+    flip: enableFlip = true,
+    shift: enableShift = true,
+    middleware: extraMiddleware = [],
+    matchReferenceWidth = false,
+    portal = false
+  } = options;
+  if (portal && floating.parentElement !== document.body) {
+    document.body.appendChild(floating);
+  }
+  const mw = [];
+  mw.push(offset(offsetValue));
+  if (enableFlip)
+    mw.push(flip());
+  if (enableShift)
+    mw.push(shift());
+  if (matchReferenceWidth) {
+    mw.push({
+      name: "matchReferenceWidth",
+      fn({ rects }) {
+        floating.style.minWidth = `${rects.reference.width}px`;
+        return {};
+      }
+    });
+  }
+  mw.push(...extraMiddleware);
+  function updatePosition() {
+    computePosition(reference, floating, {
+      placement,
+      strategy,
+      middleware: mw
+    }).then((result) => {
+      floating.style.position = result.strategy;
+      floating.style.left = `${result.x}px`;
+      floating.style.top = `${result.y}px`;
+      const [side = "bottom", align = "center"] = result.placement.split("-");
+      floating.setAttribute("data-side", side);
+      floating.setAttribute("data-align", align);
+    });
+  }
+  const cleanupAutoUpdate = autoUpdate(reference, floating, updatePosition, {
+    animationFrame: true
+  });
+  return {
+    cleanup: cleanupAutoUpdate,
+    update() {
+      updatePosition();
+      return Promise.resolve();
+    }
+  };
+}
+function virtualElement(x, y) {
+  return {
+    getBoundingClientRect() {
+      return {
+        x,
+        y,
+        top: y,
+        left: x,
+        bottom: y,
+        right: x,
+        width: 0,
+        height: 0,
+        toJSON() {
+          return this;
+        }
+      };
+    }
+  };
+}
+
+export { createFloatingPosition, virtualElement };

package/dist/shared/chunk-2h5qpc00.js

@@ -0,0 +1,98 @@
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  handleListNavigation
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setHidden,
+  setSelected
+} from "./chunk-vvjyx7fe.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/tabs/tabs.ts
+import { signal } from "@vertz/ui";
+var Tabs = {
+  Root(options = {}) {
+    const { defaultValue = "", orientation = "horizontal", onValueChange } = options;
+    const state = { value: signal(defaultValue) };
+    const triggers = [];
+    const panels = [];
+    const tabValues = [];
+    const root = document.createElement("div");
+    const list = document.createElement("div");
+    list.setAttribute("role", "tablist");
+    if (orientation === "vertical") {
+      list.setAttribute("aria-orientation", "vertical");
+    }
+    root.appendChild(list);
+    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);
+    }
+    list.addEventListener("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);
+        }
+      }
+    });
+    function Tab(value, label) {
+      const baseId = uniqueId("tab");
+      const triggerId = `${baseId}-trigger`;
+      const panelId = `${baseId}-panel`;
+      const isActive = value === state.value.peek();
+      const trig = document.createElement("button");
+      trig.setAttribute("type", "button");
+      trig.setAttribute("role", "tab");
+      trig.id = triggerId;
+      trig.setAttribute("aria-controls", panelId);
+      trig.setAttribute("data-value", value);
+      trig.textContent = label ?? value;
+      setSelected(trig, isActive);
+      setDataState(trig, isActive ? "active" : "inactive");
+      const panel = document.createElement("div");
+      panel.setAttribute("role", "tabpanel");
+      panel.id = panelId;
+      panel.setAttribute("aria-labelledby", triggerId);
+      panel.setAttribute("tabindex", "0");
+      setHidden(panel, !isActive);
+      setDataState(panel, isActive ? "active" : "inactive");
+      trig.addEventListener("click", () => {
+        selectTab(value);
+        trig.focus();
+      });
+      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 };
+    }
+    return { root, list, state, Tab };
+  }
+};
+
+export { Tabs };

package/dist/shared/chunk-31yptvbf.js

@@ -0,0 +1,151 @@
+import {
+  createFloatingPosition
+} from "./chunk-0mcr52hc.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/hover-card/hover-card.ts
+import { signal } from "@vertz/ui";
+var HoverCard = {
+  Root(options = {}) {
+    const { openDelay = 700, closeDelay = 300, onOpenChange, positioning } = options;
+    const contentId = uniqueId("hovercard");
+    const state = { open: signal(false) };
+    let openTimeout = null;
+    let closeTimeout = null;
+    let floatingCleanup = null;
+    const trigger = document.createElement("span");
+    trigger.setAttribute("aria-haspopup", "dialog");
+    trigger.setAttribute("aria-expanded", "false");
+    const content = document.createElement("div");
+    content.setAttribute("role", "dialog");
+    content.id = contentId;
+    setHidden(content, true);
+    setDataState(content, "closed");
+    function cancelTimers() {
+      if (openTimeout) {
+        clearTimeout(openTimeout);
+        openTimeout = null;
+      }
+      if (closeTimeout) {
+        clearTimeout(closeTimeout);
+        closeTimeout = null;
+      }
+    }
+    function show() {
+      cancelTimers();
+      if (state.open.peek())
+        return;
+      openTimeout = setTimeout(() => {
+        state.open.value = true;
+        setExpanded(trigger, true);
+        setHidden(content, false);
+        setDataState(content, "open");
+        if (positioning) {
+          const effectivePlacement = positioning.placement ?? "bottom";
+          const result = createFloatingPosition(trigger, content, {
+            ...positioning,
+            placement: effectivePlacement
+          });
+          floatingCleanup = result.cleanup;
+        }
+        onOpenChange?.(true);
+        openTimeout = null;
+      }, openDelay);
+    }
+    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);
+    }
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", hide);
+    trigger.addEventListener("focus", () => {
+      cancelTimers();
+      state.open.value = true;
+      setExpanded(trigger, true);
+      setHidden(content, false);
+      setDataState(content, "open");
+      if (positioning) {
+        floatingCleanup?.();
+        const effectivePlacement = positioning.placement ?? "bottom";
+        const result = createFloatingPosition(trigger, content, {
+          ...positioning,
+          placement: effectivePlacement
+        });
+        floatingCleanup = result.cleanup;
+      }
+      onOpenChange?.(true);
+    });
+    trigger.addEventListener("blur", (event) => {
+      const related = event.relatedTarget;
+      if (related && (trigger.contains(related) || content.contains(related)))
+        return;
+      hide();
+    });
+    content.addEventListener("mouseenter", () => {
+      if (closeTimeout) {
+        clearTimeout(closeTimeout);
+        closeTimeout = null;
+      }
+    });
+    content.addEventListener("mouseleave", hide);
+    content.addEventListener("focusin", () => {
+      if (closeTimeout) {
+        clearTimeout(closeTimeout);
+        closeTimeout = null;
+      }
+    });
+    content.addEventListener("focusout", (event) => {
+      const related = event.relatedTarget;
+      if (related && (trigger.contains(related) || content.contains(related)))
+        return;
+      hide();
+    });
+    function hideImmediate() {
+      cancelTimers();
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setDataState(content, "closed");
+      setHiddenAnimated(content, true);
+      floatingCleanup?.();
+      floatingCleanup = null;
+      onOpenChange?.(false);
+    }
+    content.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        hideImmediate();
+        trigger.focus();
+      }
+    });
+    trigger.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Escape) && state.open.peek()) {
+        hideImmediate();
+      }
+    });
+    return { trigger, content, state };
+  }
+};
+
+export { HoverCard };

package/dist/shared/chunk-34yfm2b0.js

@@ -0,0 +1,182 @@
+import {
+  saveFocus,
+  trapFocus
+} from "./chunk-e2v1c9ex.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/alert-dialog/alert-dialog.tsx
+import { __element, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function AlertDialogRoot(options = {}) {
+  const { defaultOpen = false, onOpenChange, onAction } = options;
+  const ids = linkedIds("alertdialog");
+  const titleId = `${ids.contentId}-title`;
+  const descriptionId = `${ids.contentId}-description`;
+  const state = { open: signal(defaultOpen) };
+  let restoreFocus = null;
+  let removeTrap = null;
+  function show() {
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(overlay, false);
+    setHidden(content, false);
+    setDataState(trigger, "open");
+    setDataState(overlay, "open");
+    setDataState(content, "open");
+    restoreFocus = saveFocus();
+    removeTrap = trapFocus(content);
+    queueMicrotask(() => cancel.focus());
+    onOpenChange?.(true);
+  }
+  function hide() {
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    setDataState(overlay, "closed");
+    setDataState(content, "closed");
+    setHiddenAnimated(overlay, true);
+    setHiddenAnimated(content, true);
+    removeTrap?.();
+    removeTrap = null;
+    restoreFocus?.();
+    restoreFocus = null;
+    onOpenChange?.(false);
+  }
+  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);
+    }
+    {
+      const __v = defaultOpen ? "true" : "false";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-expanded", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    __on(__el0, "click", () => {
+      if (!state.open.peek())
+        show();
+    });
+    return __el0;
+  })();
+  const overlay = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("data-alertdialog-overlay", "");
+    {
+      const __v = defaultOpen ? "false" : "true";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("aria-hidden", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "" : "display: none";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("style", __v === true ? "" : __v);
+    }
+    return __el1;
+  })();
+  const content = (() => {
+    const __el2 = __element("div");
+    __el2.setAttribute("role", "alertdialog");
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("id", __v === true ? "" : __v);
+    }
+    __el2.setAttribute("aria-modal", "true");
+    {
+      const __v = titleId;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("aria-labelledby", __v === true ? "" : __v);
+    }
+    {
+      const __v = descriptionId;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("aria-describedby", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "false" : "true";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("aria-hidden", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "" : "display: none";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("style", __v === true ? "" : __v);
+    }
+    return __el2;
+  })();
+  const title = (() => {
+    const __el3 = __element("h2");
+    {
+      const __v = titleId;
+      if (__v != null && __v !== false)
+        __el3.setAttribute("id", __v === true ? "" : __v);
+    }
+    return __el3;
+  })();
+  const description = (() => {
+    const __el4 = __element("p");
+    {
+      const __v = descriptionId;
+      if (__v != null && __v !== false)
+        __el4.setAttribute("id", __v === true ? "" : __v);
+    }
+    return __el4;
+  })();
+  const cancel = (() => {
+    const __el5 = __element("button");
+    __el5.setAttribute("type", "button");
+    __on(__el5, "click", () => hide());
+    return __el5;
+  })();
+  const action = (() => {
+    const __el6 = __element("button");
+    __el6.setAttribute("type", "button");
+    __on(__el6, "click", () => {
+      onAction?.();
+      hide();
+    });
+    return __el6;
+  })();
+  if (defaultOpen) {
+    restoreFocus = saveFocus();
+    removeTrap = trapFocus(content);
+    queueMicrotask(() => cancel.focus());
+  }
+  return { trigger, overlay, content, title, description, cancel, action, state, show, hide };
+}
+var AlertDialog = {
+  Root: AlertDialogRoot
+};
+
+export { AlertDialog };

package/dist/shared/chunk-3pantb0p.js

@@ -0,0 +1,108 @@
+import {
+  focusFirst,
+  saveFocus,
+  trapFocus
+} from "./chunk-e2v1c9ex.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated,
+  setLabelledBy
+} from "./chunk-vvjyx7fe.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/dialog/dialog.ts
+import { signal } from "@vertz/ui";
+var Dialog = {
+  Root(options = {}) {
+    const { modal = true, defaultOpen = false, onOpenChange } = options;
+    const ids = linkedIds("dialog");
+    const titleId = `${ids.contentId}-title`;
+    const state = { open: signal(defaultOpen) };
+    let restoreFocus = null;
+    let removeTrap = null;
+    const trigger = document.createElement("button");
+    trigger.setAttribute("type", "button");
+    trigger.id = ids.triggerId;
+    trigger.setAttribute("aria-controls", ids.contentId);
+    setExpanded(trigger, defaultOpen);
+    setDataState(trigger, defaultOpen ? "open" : "closed");
+    const overlay = document.createElement("div");
+    overlay.setAttribute("data-dialog-overlay", "");
+    setHidden(overlay, !defaultOpen);
+    setDataState(overlay, defaultOpen ? "open" : "closed");
+    const content = document.createElement("div");
+    content.setAttribute("role", "dialog");
+    content.id = ids.contentId;
+    if (modal) {
+      content.setAttribute("aria-modal", "true");
+    }
+    setLabelledBy(content, titleId);
+    setHidden(content, !defaultOpen);
+    setDataState(content, defaultOpen ? "open" : "closed");
+    const title = document.createElement("h2");
+    title.id = titleId;
+    const close = document.createElement("button");
+    close.setAttribute("type", "button");
+    close.setAttribute("aria-label", "Close");
+    function openDialog() {
+      state.open.value = true;
+      setExpanded(trigger, true);
+      setHidden(overlay, false);
+      setHidden(content, false);
+      setDataState(trigger, "open");
+      setDataState(overlay, "open");
+      setDataState(content, "open");
+      restoreFocus = saveFocus();
+      if (modal) {
+        removeTrap = trapFocus(content);
+      }
+      queueMicrotask(() => focusFirst(content));
+      onOpenChange?.(true);
+    }
+    function closeDialog() {
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setDataState(trigger, "closed");
+      setDataState(overlay, "closed");
+      setDataState(content, "closed");
+      setHiddenAnimated(overlay, true);
+      setHiddenAnimated(content, true);
+      removeTrap?.();
+      removeTrap = null;
+      restoreFocus?.();
+      restoreFocus = null;
+      onOpenChange?.(false);
+    }
+    trigger.addEventListener("click", () => {
+      if (state.open.peek()) {
+        closeDialog();
+      } else {
+        openDialog();
+      }
+    });
+    close.addEventListener("click", () => {
+      closeDialog();
+    });
+    overlay.addEventListener("click", () => {
+      closeDialog();
+    });
+    content.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        event.stopPropagation();
+        closeDialog();
+      }
+    });
+    return { trigger, overlay, content, title, close, state, show: openDialog, hide: closeDialog };
+  }
+};
+
+export { Dialog };

package/dist/shared/chunk-3s6s6f06.js

@@ -0,0 +1,61 @@
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/collapsible/collapsible.ts
+import { signal } from "@vertz/ui";
+var Collapsible = {
+  Root(options = {}) {
+    const { defaultOpen = false, disabled = false, onOpenChange } = options;
+    const ids = linkedIds("collapsible");
+    const state = {
+      open: signal(defaultOpen),
+      disabled: signal(disabled)
+    };
+    const root = document.createElement("div");
+    const trigger = document.createElement("button");
+    trigger.setAttribute("type", "button");
+    trigger.id = ids.triggerId;
+    trigger.setAttribute("aria-controls", ids.contentId);
+    setExpanded(trigger, defaultOpen);
+    setDataState(trigger, defaultOpen ? "open" : "closed");
+    if (disabled) {
+      trigger.disabled = true;
+      trigger.setAttribute("aria-disabled", "true");
+    }
+    const content = document.createElement("div");
+    content.id = ids.contentId;
+    setHidden(content, !defaultOpen);
+    setDataState(content, defaultOpen ? "open" : "closed");
+    function toggle() {
+      if (state.disabled.peek())
+        return;
+      const next = !state.open.peek();
+      state.open.value = next;
+      if (next) {
+        setHidden(content, false);
+      }
+      const height = content.scrollHeight;
+      content.style.setProperty("--collapsible-content-height", `${height}px`);
+      setExpanded(trigger, next);
+      setDataState(trigger, next ? "open" : "closed");
+      setDataState(content, next ? "open" : "closed");
+      if (!next) {
+        setHiddenAnimated(content, true);
+      }
+      onOpenChange?.(next);
+    }
+    trigger.addEventListener("click", toggle);
+    root.appendChild(trigger);
+    root.appendChild(content);
+    return { root, trigger, content, state };
+  }
+};
+
+export { Collapsible };