@vertz/ui-primitives 0.2.21 → 0.2.23

package/dist/shared/chunk-pzx0vpq1.js

@@ -0,0 +1,223 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition,
+  virtualElement
+} from "./chunk-0mcr52hc.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/context-menu/context-menu.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function ContextMenuRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let handleClickOutside = function(event) {
+      const target = event.target;
+      if (!trigger.contains(target) && !content.contains(target)) {
+        close();
+      }
+    }, updateActiveItem = function(index) {
+      for (let i = 0;i < items.length; i++) {
+        items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
+      }
+    }, openMenu = function(x, y) {
+      state.open.value = true;
+      setHidden(content, false);
+      setDataState(content, "open");
+      if (positioning) {
+        const result = createFloatingPosition(virtualElement(x, y), content, {
+          strategy: "fixed",
+          ...positioning
+        });
+        floatingCleanup = result.cleanup;
+        dismissCleanup = createDismiss({
+          onDismiss: close,
+          insideElements: [trigger, content],
+          escapeKey: false
+        });
+      } else {
+        content.style.left = `${x}px`;
+        content.style.top = `${y}px`;
+        document.addEventListener("mousedown", handleClickOutside);
+      }
+      state.activeIndex.value = 0;
+      updateActiveItem(0);
+      items[0]?.focus();
+    }, close = function() {
+      state.open.value = false;
+      setDataState(content, "closed");
+      setHiddenAnimated(content, true);
+      if (positioning) {
+        floatingCleanup?.();
+        floatingCleanup = null;
+        dismissCleanup?.();
+        dismissCleanup = null;
+      } else {
+        document.removeEventListener("mousedown", handleClickOutside);
+      }
+    }, createItem = function(value, label, parent) {
+      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);
+      (parent ?? content).appendChild(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;
+      })();
+      content.appendChild(el);
+      return {
+        el,
+        Item: (value, itemLabel) => createItem(value, itemLabel, el)
+      };
+    }, Separator = function() {
+      const hr = (() => {
+        const __el4 = __element("hr");
+        __el4.setAttribute("role", "separator");
+        return __el4;
+      })();
+      content.appendChild(hr);
+      return hr;
+    }, Label = function(text) {
+      const el = (() => {
+        const __el5 = __element("div");
+        __el5.setAttribute("role", "none");
+        __enterChildren(__el5);
+        __insert(__el5, text);
+        __exitChildren();
+        return __el5;
+      })();
+      content.appendChild(el);
+      return el;
+    };
+    const { onSelect, positioning, ...attrs } = options;
+    const state = {
+      open: signal(false),
+      activeIndex: signal(-1)
+    };
+    const items = [];
+    let floatingCleanup = null;
+    let dismissCleanup = null;
+    const trigger = (() => {
+      const __el0 = __element("div");
+      __on(__el0, "contextmenu", (event) => {
+        event.preventDefault();
+        if (state.open.peek()) {
+          close();
+        }
+        openMenu(event.clientX, event.clientY);
+      });
+      return __el0;
+    })();
+    const contentId = uniqueId("ctx-menu");
+    const content = (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("role", "menu");
+      {
+        const __v = contentId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = { position: "fixed", display: "none" };
+        if (__v != null && __v !== false)
+          __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __el1.setAttribute("aria-hidden", "true");
+      __el1.setAttribute("data-state", "closed");
+      __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;
+        }
+        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 ContextMenu = {
+  Root: ContextMenuRoot
+};
+
+export { ContextMenu };

package/dist/shared/chunk-tn0m98j8.js

@@ -0,0 +1,42 @@
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/badge/badge.tsx
+import { __discardMountFrame, __element, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
+function BadgeRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const { variant = "default", ...attrs } = options;
+    const badge = (() => {
+      const __el0 = __element("span");
+      {
+        const __v = uniqueId("badge");
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el0.setAttribute("data-slot", "badge");
+      {
+        const __v = variant;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-variant", __v === true ? "" : __v);
+      }
+      return __el0;
+    })();
+    applyAttrs(badge, attrs);
+    const __mfResult0 = { badge };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Badge = {
+  Root: BadgeRoot
+};
+
+export { Badge };

package/dist/shared/{chunk-g67tnd19.js → chunk-ttb2tt03.js}

@@ -10,46 +10,66 @@ import {
   setDescribedBy,
   setHidden,
   setHiddenAnimated
-} from "./chunk-vvjyx7fe.js";
+} from "./chunk-vevfhpc9.js";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
 import {
   applyAttrs
-} from "./chunk-q8dm19a5.js";
+} from "./chunk-2db2dnp3.js";
 
 // src/tooltip/tooltip.tsx
-import { __element, __on } from "@vertz/ui/internals";
+import { __discardMountFrame, __element, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
 function TooltipTrigger(show, hide) {
-  return (() => {
-    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;
-  })();
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      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;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
 }
 function TooltipContent(contentId) {
-  return (() => {
-    const __el0 = __element("div");
-    __el0.setAttribute("role", "tooltip");
-    {
-      const __v = contentId;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("id", __v === true ? "" : __v);
-    }
-    __el0.setAttribute("aria-hidden", "true");
-    __el0.setAttribute("data-state", "closed");
-    __el0.setAttribute("style", "display: none");
-    return __el0;
-  })();
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "tooltip");
+      {
+        const __v = contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __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));
+      }
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
 }
 function TooltipRoot(options = {}) {
   const { delay = 300, onOpenChange, positioning, ...attrs } = options;

package/dist/shared/{chunk-vvjyx7fe.js → chunk-vevfhpc9.js}

@@ -1,5 +1,5 @@
 // src/utils/aria.ts
-import { onAnimationsComplete } from "@vertz/ui/internals";
+import { onAnimationsComplete } from "@vertz/ui";
 var hideGeneration = new WeakMap;
 function setExpanded(el, expanded) {
   el.setAttribute("aria-expanded", String(expanded));

package/dist/shared/chunk-vy874zxe.js

@@ -0,0 +1,68 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/toggle/toggle.tsx
+import { computed, signal } from "@vertz/ui";
+import { __attr, __discardMountFrame, __element, __flushMountFrame, __on, __pushMountFrame } from "@vertz/ui/internals";
+function ToggleRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let toggle = function() {
+      if (disabled)
+        return;
+      pressed.value = !pressed.value;
+      onPressedChange?.(pressed.value);
+    };
+    const { defaultPressed = false, disabled = false, onPressedChange, ...attrs } = options;
+    const pressed = signal(defaultPressed, "pressed");
+    const el = computed(() => (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      {
+        const __v = uniqueId("toggle");
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      __attr(__el0, "aria-pressed", () => pressed.value ? "true" : "false");
+      __attr(__el0, "data-state", () => pressed.value ? "on" : "off");
+      {
+        const __v = disabled;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("disabled", __v === true ? "" : __v);
+      }
+      {
+        const __v = disabled ? "true" : undefined;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+      }
+      __on(__el0, "click", toggle);
+      __on(__el0, "keydown", (e) => {
+        if (isKey(e, Keys.Space)) {
+          e.preventDefault();
+          toggle();
+        }
+      });
+      return __el0;
+    })());
+    applyAttrs(el.value, attrs);
+    const __mfResult0 = el.value;
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Toggle = {
+  Root: ToggleRoot
+};
+
+export { Toggle };