@vertz/ui-primitives 0.2.16 → 0.2.18

package/dist/shared/chunk-m1ptgp1s.js

@@ -0,0 +1,142 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  focusFirst,
+  saveFocus
+} from "./chunk-e2v1c9ex.js";
+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 {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/popover/popover.tsx
+import { __element, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function PopoverRoot(options = {}) {
+  const { defaultOpen = false, onOpenChange, positioning, ...attrs } = options;
+  const ids = linkedIds("popover");
+  const state = { open: signal(defaultOpen) };
+  let restoreFocus = null;
+  let floatingCleanup = null;
+  let dismissCleanup = null;
+  function open() {
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(content, false);
+    setDataState(trigger, "open");
+    setDataState(content, "open");
+    restoreFocus = saveFocus();
+    queueMicrotask(() => focusFirst(content));
+    if (positioning) {
+      const result = createFloatingPosition(trigger, content, positioning);
+      floatingCleanup = result.cleanup;
+      dismissCleanup = createDismiss({
+        onDismiss: close,
+        insideElements: [trigger, content],
+        escapeKey: false
+      });
+    }
+    onOpenChange?.(true);
+  }
+  function close() {
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    setDataState(content, "closed");
+    setHiddenAnimated(content, true);
+    floatingCleanup?.();
+    floatingCleanup = null;
+    dismissCleanup?.();
+    dismissCleanup = 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);
+    }
+    __el0.setAttribute("aria-haspopup", "dialog");
+    {
+      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()) {
+        close();
+      } else {
+        open();
+      }
+    });
+    return __el0;
+  })();
+  const content = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("role", "dialog");
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el1.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      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);
+    }
+    __on(__el1, "keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        close();
+      }
+    });
+    return __el1;
+  })();
+  applyAttrs(trigger, attrs);
+  return { trigger, content, state };
+}
+var Popover = {
+  Root: PopoverRoot
+};
+
+export { Popover };

package/dist/shared/{chunk-9cqe2q6e.js → chunk-n9nwx58j.js}

@@ -2,15 +2,18 @@ import {
   Keys,
   isKey
 } from "./chunk-jctqs9m4.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
 
 // src/toggle/toggle.tsx
-import { signal } from "@vertz/ui";
+import { computed, signal } from "@vertz/ui";
 import { __attr, __element, __on } from "@vertz/ui/internals";
 function ToggleRoot(options = {}) {
-  const { defaultPressed = false, disabled = false, onPressedChange } = options;
+  const { defaultPressed = false, disabled = false, onPressedChange, ...attrs } = options;
   const pressed = signal(defaultPressed, "pressed");
   function toggle() {
     if (disabled)
@@ -18,9 +21,8 @@ function ToggleRoot(options = {}) {
     pressed.value = !pressed.value;
     onPressedChange?.(pressed.value);
   }
-  return (() => {
+  const el = computed(() => (() => {
     const __el0 = __element("button");
-    __el0.setAttribute("data-v-id", "ToggleRoot");
     __el0.setAttribute("type", "button");
     {
       const __v = uniqueId("toggle");
@@ -47,7 +49,9 @@ function ToggleRoot(options = {}) {
       }
     });
     return __el0;
-  })();
+  })());
+  applyAttrs(el.value, attrs);
+  return el.value;
 }
 var Toggle = {
   Root: ToggleRoot

package/dist/shared/chunk-ppcv3ehd.js

@@ -0,0 +1,85 @@
+import {
+  setDataState
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/progress/progress.tsx
+import { __append, __element, __enterChildren, __exitChildren } from "@vertz/ui/internals";
+import { ref, signal } from "@vertz/ui";
+function dataStateFor(pct) {
+  if (pct >= 100)
+    return "complete";
+  if (pct > 0)
+    return "loading";
+  return "idle";
+}
+function ProgressRoot(options = {}) {
+  const { defaultValue = 0, min = 0, max = 100, ...attrs } = options;
+  const state = { value: signal(defaultValue) };
+  const indicatorRef = ref();
+  const initialPct = (defaultValue - min) / (max - min) * 100;
+  const root = (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("role", "progressbar");
+    {
+      const __v = uniqueId("progress");
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = String(defaultValue);
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-valuenow", __v === true ? "" : __v);
+    }
+    {
+      const __v = String(min);
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-valuemin", __v === true ? "" : __v);
+    }
+    {
+      const __v = String(max);
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-valuemax", __v === true ? "" : __v);
+    }
+    {
+      const __v = dataStateFor(initialPct);
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    __enterChildren(__el0);
+    __append(__el0, (() => {
+      const __el1 = __element("div");
+      indicatorRef.current = __el1;
+      __el1.setAttribute("data-part", "indicator");
+      {
+        const __v = `width: ${initialPct}%`;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("style", __v === true ? "" : __v);
+      }
+      return __el1;
+    })());
+    __exitChildren();
+    return __el0;
+  })();
+  const indicator = indicatorRef.current;
+  applyAttrs(root, attrs);
+  function setValue(val) {
+    const clamped = Math.min(max, Math.max(min, val));
+    state.value.value = clamped;
+    root.setAttribute("aria-valuenow", String(clamped));
+    const pct = (clamped - min) / (max - min) * 100;
+    indicator.style.width = `${pct}%`;
+    setDataState(root, dataStateFor(pct));
+  }
+  return { root, indicator, state, setValue };
+}
+var Progress = {
+  Root: ProgressRoot
+};
+
+export { Progress };

package/dist/shared/{chunk-vq9tfzh8.js → chunk-rnjm61t0.js}

@@ -1,3 +1,6 @@
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
@@ -5,7 +8,7 @@ import {
 // src/badge/badge.tsx
 import { __element } from "@vertz/ui/internals";
 function BadgeRoot(options = {}) {
-  const { variant = "default" } = options;
+  const { variant = "default", ...attrs } = options;
   const badge = (() => {
     const __el0 = __element("span");
     {
@@ -21,6 +24,7 @@ function BadgeRoot(options = {}) {
     }
     return __el0;
   })();
+  applyAttrs(badge, attrs);
   return { badge };
 }
 var Badge = {

package/dist/shared/chunk-sqs8kyb2.js

@@ -0,0 +1,288 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  createFloatingPosition
+} from "./chunk-0mcr52hc.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/menubar/menubar.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function MenubarRoot(options = {}) {
+  const { onSelect, positioning, ...attrs } = options;
+  const state = { activeMenu: signal(null) };
+  const triggers = [];
+  const menus = new Map;
+  let floatingCleanup = null;
+  let dismissCleanup = null;
+  function handleClickOutside(event) {
+    const target = event.target;
+    if (!root.contains(target)) {
+      closeAll();
+    }
+  }
+  function closeAll() {
+    for (const [, menu] of menus) {
+      setExpanded(menu.trigger, false);
+      setDataState(menu.trigger, "closed");
+      setDataState(menu.content, "closed");
+      setHiddenAnimated(menu.content, true);
+    }
+    state.activeMenu.value = null;
+    if (positioning) {
+      floatingCleanup?.();
+      floatingCleanup = null;
+      dismissCleanup?.();
+      dismissCleanup = null;
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }
+  function openMenu(value) {
+    const current = state.activeMenu.peek();
+    if (current && current !== value) {
+      const prev = menus.get(current);
+      if (prev) {
+        setExpanded(prev.trigger, false);
+        setDataState(prev.trigger, "closed");
+        setDataState(prev.content, "closed");
+        setHiddenAnimated(prev.content, true);
+      }
+      if (positioning) {
+        floatingCleanup?.();
+        floatingCleanup = null;
+      }
+    }
+    const menu = menus.get(value);
+    if (!menu)
+      return;
+    state.activeMenu.value = value;
+    setExpanded(menu.trigger, true);
+    setHidden(menu.content, false);
+    setDataState(menu.trigger, "open");
+    setDataState(menu.content, "open");
+    if (positioning) {
+      const result = createFloatingPosition(menu.trigger, menu.content, positioning);
+      floatingCleanup = result.cleanup;
+      if (!dismissCleanup) {
+        dismissCleanup = createDismiss({
+          onDismiss: closeAll,
+          insideElements: [root],
+          escapeKey: false
+        });
+      }
+    } else {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    const firstItem = menu.items[0];
+    if (firstItem) {
+      firstItem.setAttribute("tabindex", "0");
+      firstItem.focus();
+    }
+  }
+  const root = (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("role", "menubar");
+    __on(__el0, "keydown", (event) => {
+      if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End)) {
+        const focused = document.activeElement;
+        const triggerIndex = triggers.indexOf(focused);
+        if (triggerIndex >= 0) {
+          const result = handleListNavigation(event, triggers, { orientation: "horizontal" });
+          if (result && state.activeMenu.peek()) {
+            const newTrigger = result;
+            const menuValue = newTrigger.getAttribute("data-value");
+            if (menuValue)
+              openMenu(menuValue);
+          }
+        }
+      }
+    });
+    return __el0;
+  })();
+  function Menu(value, label) {
+    const ids = linkedIds("menubar-menu");
+    const menuItems = [];
+    const trigger = (() => {
+      const __el1 = __element("button");
+      __el1.setAttribute("type", "button");
+      __el1.setAttribute("role", "menuitem");
+      {
+        const __v = ids.triggerId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      __el1.setAttribute("aria-haspopup", "menu");
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      __el1.setAttribute("aria-expanded", "false");
+      __el1.setAttribute("data-state", "closed");
+      __on(__el1, "click", () => {
+        if (state.activeMenu.peek() === value) {
+          closeAll();
+        } else {
+          openMenu(value);
+        }
+      });
+      __on(__el1, "keydown", (event) => {
+        if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          openMenu(value);
+        }
+      });
+      __enterChildren(__el1);
+      __insert(__el1, label ?? value);
+      __exitChildren();
+      return __el1;
+    })();
+    setRovingTabindex(triggers.concat(trigger), triggers.length);
+    const content = (() => {
+      const __el2 = __element("div");
+      __el2.setAttribute("role", "menu");
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("id", __v === true ? "" : __v);
+      }
+      __el2.setAttribute("aria-hidden", "true");
+      __el2.setAttribute("data-state", "closed");
+      __el2.setAttribute("style", "display: none");
+      __on(__el2, "keydown", (event) => {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          event.stopPropagation();
+          closeAll();
+          trigger.focus();
+          return;
+        }
+        if (isKey(event, Keys.Enter, Keys.Space)) {
+          event.preventDefault();
+          const active = document.activeElement;
+          const activeItem = menuItems.find((item) => item === active);
+          if (activeItem) {
+            const val = activeItem.getAttribute("data-value");
+            if (val !== null) {
+              onSelect?.(val);
+              closeAll();
+              trigger.focus();
+            }
+          }
+          return;
+        }
+        if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight)) {
+          event.preventDefault();
+          const triggerIdx = triggers.indexOf(trigger);
+          let nextIdx;
+          if (isKey(event, Keys.ArrowRight)) {
+            nextIdx = (triggerIdx + 1) % triggers.length;
+          } else {
+            nextIdx = (triggerIdx - 1 + triggers.length) % triggers.length;
+          }
+          const nextTrigger = triggers[nextIdx];
+          if (nextTrigger) {
+            nextTrigger.focus();
+            const nextValue = nextTrigger.getAttribute("data-value");
+            if (nextValue)
+              openMenu(nextValue);
+          }
+          return;
+        }
+        handleListNavigation(event, menuItems, { orientation: "vertical" });
+      });
+      return __el2;
+    })();
+    function createItem(val, itemLabel, parent) {
+      const item = (() => {
+        const __el3 = __element("div");
+        __el3.setAttribute("role", "menuitem");
+        {
+          const __v = val;
+          if (__v != null && __v !== false)
+            __el3.setAttribute("data-value", __v === true ? "" : __v);
+        }
+        __el3.setAttribute("tabindex", "-1");
+        __on(__el3, "click", () => {
+          onSelect?.(val);
+          closeAll();
+          trigger.focus();
+        });
+        __enterChildren(__el3);
+        __insert(__el3, itemLabel ?? val);
+        __exitChildren();
+        return __el3;
+      })();
+      menuItems.push(item);
+      (parent ?? content).appendChild(item);
+      return item;
+    }
+    function Item(val, itemLabel) {
+      return createItem(val, itemLabel);
+    }
+    function Group(groupLabel) {
+      const el = (() => {
+        const __el4 = __element("div");
+        __el4.setAttribute("role", "group");
+        {
+          const __v = groupLabel;
+          if (__v != null && __v !== false)
+            __el4.setAttribute("aria-label", __v === true ? "" : __v);
+        }
+        return __el4;
+      })();
+      content.appendChild(el);
+      return {
+        el,
+        Item: (val, l) => createItem(val, l, el)
+      };
+    }
+    function Separator() {
+      const hr = (() => {
+        const __el5 = __element("hr");
+        __el5.setAttribute("role", "separator");
+        return __el5;
+      })();
+      content.appendChild(hr);
+      return hr;
+    }
+    triggers.push(trigger);
+    setRovingTabindex(triggers, 0);
+    menus.set(value, { trigger, content, items: menuItems });
+    root.appendChild(trigger);
+    return { trigger, content, Item, Group, Separator };
+  }
+  applyAttrs(root, attrs);
+  return { root, state, Menu };
+}
+var Menubar = {
+  Root: MenubarRoot
+};
+
+export { Menubar };

package/dist/shared/chunk-tfyg0qrp.js

@@ -0,0 +1,117 @@
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/collapsible/collapsible.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function CollapsibleRoot(options = {}) {
+  const { defaultOpen = false, disabled = false, onOpenChange, ...attrs } = options;
+  const ids = linkedIds("collapsible");
+  const state = {
+    open: signal(defaultOpen),
+    disabled: signal(disabled)
+  };
+  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);
+  }
+  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);
+    }
+    {
+      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);
+    return __el0;
+  })();
+  const content = (() => {
+    const __el1 = __element("div");
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el1.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      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 root = (() => {
+    const __el2 = __element("div");
+    __enterChildren(__el2);
+    __insert(__el2, trigger);
+    __insert(__el2, content);
+    __exitChildren();
+    return __el2;
+  })();
+  applyAttrs(root, attrs);
+  return { root, trigger, content, state };
+}
+var Collapsible = {
+  Root: CollapsibleRoot
+};
+
+export { Collapsible };