@vertz/ui-primitives 0.2.16 → 0.2.18

package/dist/shared/chunk-7ffg0caj.js

@@ -0,0 +1,265 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.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/menu/menu.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function MenuRoot(options = {}) {
+  const { onSelect, positioning, ...attrs } = options;
+  const ids = linkedIds("menu");
+  const state = {
+    open: signal(false),
+    activeIndex: signal(-1)
+  };
+  const items = [];
+  let floatingCleanup = null;
+  let dismissCleanup = null;
+  function handleClickOutside(event) {
+    const target = event.target;
+    if (!trigger.contains(target) && !content.contains(target)) {
+      close();
+    }
+  }
+  function open(activateFirst = false) {
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(content, false);
+    setDataState(trigger, "open");
+    setDataState(content, "open");
+    if (positioning) {
+      const ref = positioning.referenceElement ?? trigger;
+      const result = createFloatingPosition(ref, content, positioning);
+      floatingCleanup = result.cleanup;
+      dismissCleanup = createDismiss({
+        onDismiss: close,
+        insideElements: [ref, trigger, content],
+        escapeKey: false
+      });
+    } else {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    if (activateFirst && items.length > 0) {
+      state.activeIndex.value = 0;
+      updateActiveItem(0);
+      items[0]?.focus();
+    } else {
+      state.activeIndex.value = -1;
+      updateActiveItem(-1);
+      content.focus();
+    }
+  }
+  function close() {
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    setDataState(content, "closed");
+    setHiddenAnimated(content, true);
+    if (positioning) {
+      floatingCleanup?.();
+      floatingCleanup = null;
+      dismissCleanup?.();
+      dismissCleanup = null;
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    trigger.focus();
+  }
+  function updateActiveItem(index) {
+    for (let i = 0;i < items.length; i++) {
+      items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
+    }
+  }
+  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", "menu");
+    __el0.setAttribute("aria-expanded", "false");
+    __el0.setAttribute("data-state", "closed");
+    __on(__el0, "click", () => {
+      if (state.open.peek()) {
+        close();
+      } else {
+        open();
+      }
+    });
+    __on(__el0, "keydown", (event) => {
+      if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        if (!state.open.peek())
+          open(true);
+      }
+    });
+    return __el0;
+  })();
+  const content = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("role", "menu");
+    __el1.setAttribute("tabindex", "-1");
+    {
+      const __v = ids.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, "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;
+      }
+      if (state.activeIndex.peek() === -1) {
+        if (isKey(event, Keys.ArrowDown)) {
+          event.preventDefault();
+          state.activeIndex.value = 0;
+          updateActiveItem(0);
+          items[0]?.focus();
+          return;
+        }
+        if (isKey(event, Keys.ArrowUp)) {
+          event.preventDefault();
+          const last = items.length - 1;
+          state.activeIndex.value = last;
+          updateActiveItem(last);
+          items[last]?.focus();
+          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;
+  })();
+  function createItem(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;
+  }
+  function Item(value, label) {
+    return createItem(value, label);
+  }
+  function Group(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)
+    };
+  }
+  function Separator() {
+    const hr = (() => {
+      const __el4 = __element("hr");
+      __el4.setAttribute("role", "separator");
+      return __el4;
+    })();
+    content.appendChild(hr);
+    return hr;
+  }
+  function Label(text) {
+    const el = (() => {
+      const __el5 = __element("div");
+      __el5.setAttribute("role", "none");
+      __enterChildren(__el5);
+      __insert(__el5, text);
+      __exitChildren();
+      return __el5;
+    })();
+    content.appendChild(el);
+    return el;
+  }
+  applyAttrs(trigger, attrs);
+  return { trigger, content, state, Item, Group, Separator, Label };
+}
+var Menu = {
+  Root: MenuRoot
+};
+
+export { Menu };

package/dist/shared/{chunk-w06tst6x.js → chunk-7kpsyjd7.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/switch/switch.tsx
-import { signal } from "@vertz/ui";
+import { computed, signal } from "@vertz/ui";
 import { __attr, __element, __on } from "@vertz/ui/internals";
 function SwitchRoot(options = {}) {
-  const { defaultChecked = false, disabled = false, onCheckedChange } = options;
+  const { defaultChecked = false, disabled = false, onCheckedChange, ...attrs } = options;
   const checked = signal(defaultChecked, "checked");
   function toggle() {
     if (disabled)
@@ -18,9 +21,8 @@ function SwitchRoot(options = {}) {
     checked.value = !checked.value;
     onCheckedChange?.(checked.value);
   }
-  return (() => {
+  const el = computed(() => (() => {
     const __el0 = __element("button");
-    __el0.setAttribute("data-v-id", "SwitchRoot");
     __el0.setAttribute("type", "button");
     __el0.setAttribute("role", "switch");
     {
@@ -48,7 +50,9 @@ function SwitchRoot(options = {}) {
       }
     });
     return __el0;
-  })();
+  })());
+  applyAttrs(el.value, attrs);
+  return el.value;
 }
 var Switch = {
   Root: SwitchRoot

package/dist/shared/chunk-7krvqrwq.js

@@ -0,0 +1,177 @@
+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 {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/dialog/dialog.tsx
+import { __element, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function DialogRoot(options = {}) {
+  const { modal = true, defaultOpen = false, onOpenChange, ...attrs } = options;
+  const ids = linkedIds("dialog");
+  const titleId = `${ids.contentId}-title`;
+  const state = { open: signal(defaultOpen) };
+  let restoreFocus = null;
+  let removeTrap = null;
+  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);
+  }
+  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()) {
+        closeDialog();
+      } else {
+        openDialog();
+      }
+    });
+    return __el0;
+  })();
+  const overlay = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("data-dialog-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);
+    }
+    __on(__el1, "click", () => closeDialog());
+    return __el1;
+  })();
+  const content = (() => {
+    const __el2 = __element("div");
+    __el2.setAttribute("role", "dialog");
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = modal ? "true" : undefined;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("aria-modal", __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);
+    }
+    __on(__el2, "keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        event.stopPropagation();
+        closeDialog();
+      }
+    });
+    return __el2;
+  })();
+  setLabelledBy(content, titleId);
+  const title = (() => {
+    const __el3 = __element("h2");
+    {
+      const __v = titleId;
+      if (__v != null && __v !== false)
+        __el3.setAttribute("id", __v === true ? "" : __v);
+    }
+    return __el3;
+  })();
+  const close = (() => {
+    const __el4 = __element("button");
+    __el4.setAttribute("type", "button");
+    __el4.setAttribute("aria-label", "Close");
+    __on(__el4, "click", () => closeDialog());
+    return __el4;
+  })();
+  applyAttrs(content, attrs);
+  return { trigger, overlay, content, title, close, state, show: openDialog, hide: closeDialog };
+}
+var Dialog = {
+  Root: DialogRoot
+};
+
+export { Dialog };

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

@@ -0,0 +1,151 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setValueRange
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/slider/slider.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function SliderRoot(options = {}) {
+  const {
+    defaultValue = 0,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    onValueChange,
+    ...attrs
+  } = options;
+  const state = {
+    value: signal(defaultValue),
+    disabled: signal(disabled)
+  };
+  function clamp(val) {
+    return Math.min(max, Math.max(min, val));
+  }
+  function updatePosition(pct2) {
+    thumb.style.left = `${pct2}%`;
+    fill.style.width = `${pct2}%`;
+  }
+  function setValue(val) {
+    if (state.disabled.peek())
+      return;
+    const clamped = clamp(val);
+    state.value.value = clamped;
+    setValueRange(thumb, clamped, min, max);
+    const pct2 = (clamped - min) / (max - min) * 100;
+    updatePosition(pct2);
+    setDataState(root, "active");
+    onValueChange?.(clamped);
+  }
+  function valueFromPointer(event) {
+    const rect = track.getBoundingClientRect();
+    const pct2 = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+    const raw = min + pct2 * (max - min);
+    return Math.round(raw / step) * step;
+  }
+  const fill = (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("data-part", "fill");
+    __el0.setAttribute("style", "position: absolute; height: 100%; border-radius: inherit;");
+    return __el0;
+  })();
+  const thumb = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("role", "slider");
+    {
+      const __v = disabled ? "-1" : "0";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("tabindex", __v === true ? "" : __v);
+    }
+    __el1.setAttribute("data-part", "thumb");
+    {
+      const __v = disabled ? "true" : undefined;
+      if (__v != null && __v !== false)
+        __el1.setAttribute("aria-disabled", __v === true ? "" : __v);
+    }
+    __el1.setAttribute("style", "position: absolute; transform: translate(-50%, -50%);");
+    __on(__el1, "keydown", (event) => {
+      if (state.disabled.peek())
+        return;
+      const current = state.value.peek();
+      if (isKey(event, Keys.ArrowRight, Keys.ArrowUp)) {
+        event.preventDefault();
+        setValue(current + step);
+      } else if (isKey(event, Keys.ArrowLeft, Keys.ArrowDown)) {
+        event.preventDefault();
+        setValue(current - step);
+      } else if (isKey(event, Keys.Home)) {
+        event.preventDefault();
+        setValue(min);
+      } else if (isKey(event, Keys.End)) {
+        event.preventDefault();
+        setValue(max);
+      }
+    });
+    return __el1;
+  })();
+  setValueRange(thumb, defaultValue, min, max);
+  const track = (() => {
+    const __el2 = __element("div");
+    __el2.setAttribute("data-part", "track");
+    __el2.setAttribute("style", "position: relative;");
+    __enterChildren(__el2);
+    __insert(__el2, fill);
+    __insert(__el2, thumb);
+    __exitChildren();
+    return __el2;
+  })();
+  const root = (() => {
+    const __el3 = __element("div");
+    {
+      const __v = uniqueId("slider");
+      if (__v != null && __v !== false)
+        __el3.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = disabled ? "disabled" : "active";
+      if (__v != null && __v !== false)
+        __el3.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    __on(__el3, "pointerdown", (event) => {
+      if (state.disabled.peek())
+        return;
+      event.preventDefault();
+      setValue(valueFromPointer(event));
+      thumb.focus();
+      function onMove(e) {
+        setValue(valueFromPointer(e));
+      }
+      function onUp() {
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+      }
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+    });
+    __enterChildren(__el3);
+    __insert(__el3, track);
+    __exitChildren();
+    return __el3;
+  })();
+  const pct = (defaultValue - min) / (max - min) * 100;
+  updatePosition(pct);
+  applyAttrs(root, attrs);
+  return { root, thumb, track, state };
+}
+var Slider = {
+  Root: SliderRoot
+};
+
+export { Slider };