@vertz/ui-primitives 0.2.14 → 0.2.16

package/dist/shared/chunk-tvpgeswh.js

@@ -0,0 +1,216 @@
+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 {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/menu/menu.ts
+import { signal } from "@vertz/ui";
+var Menu = {
+  Root(options = {}) {
+    const { onSelect, positioning } = options;
+    const ids = linkedIds("menu");
+    const state = {
+      open: signal(false),
+      activeIndex: signal(-1)
+    };
+    const items = [];
+    let floatingCleanup = null;
+    let dismissCleanup = null;
+    const trigger = document.createElement("button");
+    trigger.setAttribute("type", "button");
+    trigger.id = ids.triggerId;
+    trigger.setAttribute("aria-controls", ids.contentId);
+    trigger.setAttribute("aria-haspopup", "menu");
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    const content = document.createElement("div");
+    content.setAttribute("role", "menu");
+    content.setAttribute("tabindex", "-1");
+    content.id = ids.contentId;
+    setHidden(content, true);
+    setDataState(content, "closed");
+    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");
+      }
+    }
+    trigger.addEventListener("click", () => {
+      if (state.open.peek()) {
+        close();
+      } else {
+        open();
+      }
+    });
+    trigger.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        if (!state.open.peek())
+          open(true);
+      }
+    });
+    content.addEventListener("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();
+        }
+      }
+    });
+    function createItem(value, label, parent) {
+      const item = document.createElement("div");
+      item.setAttribute("role", "menuitem");
+      item.setAttribute("data-value", value);
+      item.setAttribute("tabindex", "-1");
+      item.textContent = label ?? value;
+      item.addEventListener("click", () => {
+        onSelect?.(value);
+        close();
+      });
+      items.push(item);
+      (parent ?? content).appendChild(item);
+      return item;
+    }
+    function Item(value, label) {
+      return createItem(value, label);
+    }
+    function Group(label) {
+      const el = document.createElement("div");
+      el.setAttribute("role", "group");
+      el.setAttribute("aria-label", label);
+      content.appendChild(el);
+      return {
+        el,
+        Item: (value, itemLabel) => createItem(value, itemLabel, el)
+      };
+    }
+    function Separator() {
+      const hr = document.createElement("hr");
+      hr.setAttribute("role", "separator");
+      content.appendChild(hr);
+      return hr;
+    }
+    function Label(text) {
+      const el = document.createElement("div");
+      el.setAttribute("role", "none");
+      el.textContent = text;
+      content.appendChild(el);
+      return el;
+    }
+    return { trigger, content, state, Item, Group, Separator, Label };
+  }
+};
+
+export { Menu };

package/dist/shared/chunk-vcp10kne.js

@@ -0,0 +1,175 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setHidden
+} from "./chunk-vvjyx7fe.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/command/command.ts
+import { signal } from "@vertz/ui";
+var Command = {
+  Root(options = {}) {
+    const { filter: customFilter, onSelect, onInputChange, placeholder } = options;
+    const listId = uniqueId("command-list");
+    const state = {
+      inputValue: signal(""),
+      activeIndex: signal(0)
+    };
+    const allItems = [];
+    const groups = new Map;
+    const root = document.createElement("div");
+    const input = document.createElement("input");
+    input.setAttribute("type", "text");
+    input.setAttribute("role", "combobox");
+    input.setAttribute("aria-autocomplete", "list");
+    input.setAttribute("aria-expanded", "true");
+    input.setAttribute("aria-controls", listId);
+    if (placeholder)
+      input.placeholder = placeholder;
+    const list = document.createElement("div");
+    list.setAttribute("role", "listbox");
+    list.id = listId;
+    const empty = document.createElement("div");
+    setHidden(empty, true);
+    const defaultFilter = (value, search) => {
+      return value.toLowerCase().includes(search.toLowerCase());
+    };
+    const filterFn = customFilter ?? defaultFilter;
+    function getVisibleItems() {
+      return allItems.filter((item) => item.getAttribute("aria-hidden") !== "true");
+    }
+    function updateActiveItem() {
+      const visible = getVisibleItems();
+      const activeIdx = state.activeIndex.peek();
+      for (const item of allItems) {
+        item.setAttribute("aria-selected", "false");
+      }
+      if (visible.length > 0 && activeIdx >= 0 && activeIdx < visible.length) {
+        visible[activeIdx]?.setAttribute("aria-selected", "true");
+      }
+    }
+    function runFilter() {
+      const search = state.inputValue.peek();
+      let visibleCount = 0;
+      for (const item of allItems) {
+        const value = item.getAttribute("data-value") ?? "";
+        const text = item.textContent ?? "";
+        const keywords = item.getAttribute("data-keywords") ?? "";
+        const searchable = `${value} ${text} ${keywords}`;
+        const matches = search === "" || filterFn(searchable, search);
+        setHidden(item, !matches);
+        if (matches)
+          visibleCount++;
+      }
+      for (const [groupEl, group] of groups) {
+        const hasVisible = group.items.some((item) => item.getAttribute("aria-hidden") !== "true");
+        setHidden(group.heading, !hasVisible);
+        if (!hasVisible) {
+          groupEl.style.display = "none";
+        } else {
+          groupEl.style.display = "";
+        }
+      }
+      setHidden(empty, visibleCount > 0);
+      state.activeIndex.value = 0;
+      updateActiveItem();
+    }
+    input.addEventListener("input", () => {
+      state.inputValue.value = input.value;
+      onInputChange?.(input.value);
+      runFilter();
+    });
+    input.addEventListener("keydown", (event) => {
+      const visible = getVisibleItems();
+      if (isKey(event, Keys.ArrowDown)) {
+        event.preventDefault();
+        const next = Math.min(state.activeIndex.peek() + 1, visible.length - 1);
+        state.activeIndex.value = next;
+        updateActiveItem();
+        return;
+      }
+      if (isKey(event, Keys.ArrowUp)) {
+        event.preventDefault();
+        const prev = Math.max(state.activeIndex.peek() - 1, 0);
+        state.activeIndex.value = prev;
+        updateActiveItem();
+        return;
+      }
+      if (isKey(event, Keys.Enter)) {
+        event.preventDefault();
+        const active = visible[state.activeIndex.peek()];
+        if (active) {
+          const val = active.getAttribute("data-value");
+          if (val !== null) {
+            onSelect?.(val);
+          }
+        }
+        return;
+      }
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        input.value = "";
+        state.inputValue.value = "";
+        onInputChange?.("");
+        runFilter();
+      }
+    });
+    function createItem(value, label, keywords, parent) {
+      const item = document.createElement("div");
+      item.setAttribute("role", "option");
+      item.setAttribute("data-value", value);
+      item.setAttribute("aria-selected", "false");
+      item.textContent = label ?? value;
+      if (keywords && keywords.length > 0) {
+        item.setAttribute("data-keywords", keywords.join(" "));
+      }
+      item.addEventListener("click", () => {
+        onSelect?.(value);
+      });
+      allItems.push(item);
+      (parent ?? list).appendChild(item);
+      updateActiveItem();
+      return item;
+    }
+    function Item(value, label, keywords) {
+      return createItem(value, label, keywords);
+    }
+    function Group(label) {
+      const headingId = uniqueId("command-group");
+      const el = document.createElement("div");
+      el.setAttribute("role", "group");
+      el.setAttribute("aria-labelledby", headingId);
+      const heading = document.createElement("div");
+      heading.id = headingId;
+      heading.textContent = label;
+      el.appendChild(heading);
+      const groupItems = [];
+      groups.set(el, { heading, items: groupItems });
+      list.appendChild(el);
+      return {
+        el,
+        Item: (value, itemLabel, keywords) => {
+          const item = createItem(value, itemLabel, keywords, el);
+          groupItems.push(item);
+          return item;
+        }
+      };
+    }
+    function Separator() {
+      const hr = document.createElement("hr");
+      hr.setAttribute("role", "separator");
+      list.appendChild(hr);
+      return hr;
+    }
+    root.appendChild(input);
+    root.appendChild(list);
+    root.appendChild(empty);
+    return { root, input, list, empty, state, Item, Group, Separator };
+  }
+};
+
+export { Command };

package/dist/shared/chunk-ve006hmy.js

@@ -0,0 +1,51 @@
+import {
+  handleActivation
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setDisabled
+} from "./chunk-vvjyx7fe.js";
+
+// src/button/button.ts
+import { signal } from "@vertz/ui";
+function createButtonRoot(state, options) {
+  const el = document.createElement("button");
+  el.setAttribute("type", "button");
+  el.setAttribute("role", "button");
+  setDataState(el, "idle");
+  if (options.disabled) {
+    el.disabled = true;
+    setDisabled(el, true);
+  }
+  el.addEventListener("click", () => {
+    if (state.disabled.peek())
+      return;
+    state.pressed.value = true;
+    setDataState(el, "pressed");
+    options.onPress?.();
+    queueMicrotask(() => {
+      state.pressed.value = false;
+      setDataState(el, "idle");
+    });
+  });
+  el.addEventListener("keydown", (event) => {
+    if (state.disabled.peek())
+      return;
+    handleActivation(event, () => {
+      el.click();
+    });
+  });
+  return el;
+}
+var Button = {
+  Root(options = {}) {
+    const state = {
+      disabled: signal(options.disabled ?? false),
+      pressed: signal(false)
+    };
+    const root = createButtonRoot(state, options);
+    return { root, state };
+  }
+};
+
+export { Button };

package/dist/shared/chunk-vq9tfzh8.js

@@ -0,0 +1,30 @@
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/badge/badge.tsx
+import { __element } from "@vertz/ui/internals";
+function BadgeRoot(options = {}) {
+  const { variant = "default" } = 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;
+  })();
+  return { badge };
+}
+var Badge = {
+  Root: BadgeRoot
+};
+
+export { Badge };

package/dist/shared/chunk-vvjyx7fe.js

@@ -0,0 +1,62 @@
+// src/utils/aria.ts
+import { onAnimationsComplete } from "@vertz/ui/internals";
+var hideGeneration = new WeakMap;
+function setExpanded(el, expanded) {
+  el.setAttribute("aria-expanded", String(expanded));
+}
+function toggleExpanded(el) {
+  const current = el.getAttribute("aria-expanded") === "true";
+  const next = !current;
+  setExpanded(el, next);
+  return next;
+}
+function setSelected(el, selected) {
+  el.setAttribute("aria-selected", String(selected));
+}
+function setHidden(el, hidden) {
+  el.setAttribute("aria-hidden", String(hidden));
+  el.style.display = hidden ? "none" : "";
+}
+function setHiddenAnimated(el, hidden) {
+  const gen = (hideGeneration.get(el) ?? 0) + 1;
+  hideGeneration.set(el, gen);
+  if (!hidden) {
+    el.setAttribute("aria-hidden", "false");
+    el.style.display = "";
+    return;
+  }
+  el.setAttribute("aria-hidden", "true");
+  onAnimationsComplete(el, () => {
+    if (hideGeneration.get(el) === gen) {
+      el.style.display = "none";
+    }
+  });
+}
+function setChecked(el, checked) {
+  el.setAttribute("aria-checked", String(checked));
+}
+function setDisabled(el, disabled) {
+  el.setAttribute("aria-disabled", String(disabled));
+}
+function setDataState(el, state) {
+  el.setAttribute("data-state", state);
+}
+function setControls(trigger, contentId) {
+  trigger.setAttribute("aria-controls", contentId);
+}
+function setLabelledBy(el, labelId) {
+  el.setAttribute("aria-labelledby", labelId);
+}
+function setDescribedBy(el, descriptionId) {
+  el.setAttribute("aria-describedby", descriptionId);
+}
+function setPressed(el, pressed) {
+  el.setAttribute("aria-pressed", String(pressed));
+}
+function setValueRange(el, now, min, max) {
+  el.setAttribute("aria-valuenow", String(now));
+  el.setAttribute("aria-valuemin", String(min));
+  el.setAttribute("aria-valuemax", String(max));
+}
+
+export { setExpanded, toggleExpanded, setSelected, setHidden, setHiddenAnimated, setChecked, setDisabled, setDataState, setControls, setLabelledBy, setDescribedBy, setPressed, setValueRange };

package/dist/shared/chunk-vx1ajy2z.js

@@ -0,0 +1,115 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setValueRange
+} from "./chunk-vvjyx7fe.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/slider/slider.ts
+import { signal } from "@vertz/ui";
+var Slider = {
+  Root(options = {}) {
+    const {
+      defaultValue = 0,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled = false,
+      onValueChange
+    } = options;
+    const state = {
+      value: signal(defaultValue),
+      disabled: signal(disabled)
+    };
+    const root = document.createElement("div");
+    root.id = uniqueId("slider");
+    setDataState(root, disabled ? "disabled" : "active");
+    const track = document.createElement("div");
+    track.setAttribute("data-part", "track");
+    const thumb = document.createElement("div");
+    thumb.setAttribute("role", "slider");
+    thumb.setAttribute("tabindex", disabled ? "-1" : "0");
+    thumb.setAttribute("data-part", "thumb");
+    setValueRange(thumb, defaultValue, min, max);
+    if (disabled) {
+      thumb.setAttribute("aria-disabled", "true");
+    }
+    function clamp(val) {
+      return Math.min(max, Math.max(min, val));
+    }
+    const fill = document.createElement("div");
+    fill.setAttribute("data-part", "fill");
+    fill.style.cssText = "position: absolute; height: 100%; border-radius: inherit;";
+    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;
+    }
+    thumb.addEventListener("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);
+      }
+    });
+    root.addEventListener("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);
+    });
+    thumb.style.position = "absolute";
+    thumb.style.transform = "translate(-50%, -50%)";
+    track.style.position = "relative";
+    track.appendChild(fill);
+    track.appendChild(thumb);
+    root.appendChild(track);
+    const pct = (defaultValue - min) / (max - min) * 100;
+    updatePosition(pct);
+    return { root, thumb, track, state };
+  }
+};
+
+export { Slider };