@vertz/ui-primitives 0.2.16 → 0.2.17

package/dist/shared/chunk-tvpgeswh.js

@@ -1,216 +0,0 @@
-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

@@ -1,175 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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-vx1ajy2z.js

@@ -1,115 +0,0 @@
-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 };

package/dist/shared/chunk-wnttq0gv.js

@@ -1,49 +0,0 @@
-import {
-  setDataState,
-  setValueRange
-} from "./chunk-vvjyx7fe.js";
-import {
-  uniqueId
-} from "./chunk-8y1jf6xr.js";
-
-// src/progress/progress.ts
-import { signal } from "@vertz/ui";
-var Progress = {
-  Root(options = {}) {
-    const { defaultValue = 0, min = 0, max = 100 } = options;
-    const state = { value: signal(defaultValue) };
-    const root = document.createElement("div");
-    root.setAttribute("role", "progressbar");
-    root.id = uniqueId("progress");
-    setValueRange(root, defaultValue, min, max);
-    const pct = (defaultValue - min) / (max - min) * 100;
-    if (pct >= 100) {
-      setDataState(root, "complete");
-    } else if (pct > 0) {
-      setDataState(root, "loading");
-    } else {
-      setDataState(root, "idle");
-    }
-    const indicator = document.createElement("div");
-    indicator.setAttribute("data-part", "indicator");
-    indicator.style.width = `${pct}%`;
-    root.appendChild(indicator);
-    function setValue(val) {
-      const clamped = Math.min(max, Math.max(min, val));
-      state.value.value = clamped;
-      setValueRange(root, clamped, min, max);
-      const p = (clamped - min) / (max - min) * 100;
-      indicator.style.width = `${p}%`;
-      if (p >= 100) {
-        setDataState(root, "complete");
-      } else if (p > 0) {
-        setDataState(root, "loading");
-      } else {
-        setDataState(root, "idle");
-      }
-    }
-    return { root, indicator, state, setValue };
-  }
-};
-
-export { Progress };

package/dist/shared/chunk-x6qzr3g6.js

@@ -1,100 +0,0 @@
-import {
-  Keys,
-  isKey
-} from "./chunk-jctqs9m4.js";
-import {
-  setDataState
-} from "./chunk-vvjyx7fe.js";
-
-// src/carousel/carousel.ts
-import { signal } from "@vertz/ui";
-var Carousel = {
-  Root(options = {}) {
-    const { orientation = "horizontal", loop = false, defaultIndex = 0, onSlideChange } = options;
-    const state = {
-      currentIndex: signal(defaultIndex),
-      slideCount: signal(0)
-    };
-    const slides = [];
-    const root = document.createElement("div");
-    root.setAttribute("role", "region");
-    root.setAttribute("aria-roledescription", "carousel");
-    root.setAttribute("data-orientation", orientation);
-    const viewport = document.createElement("div");
-    viewport.style.overflow = "hidden";
-    const prevButton = document.createElement("button");
-    prevButton.setAttribute("type", "button");
-    prevButton.setAttribute("aria-label", "Previous slide");
-    const nextButton = document.createElement("button");
-    nextButton.setAttribute("type", "button");
-    nextButton.setAttribute("aria-label", "Next slide");
-    function updateSlideVisibility() {
-      const current = state.currentIndex.peek();
-      for (let i = 0;i < slides.length; i++) {
-        const slide = slides[i];
-        if (!slide)
-          continue;
-        slide.setAttribute("aria-hidden", String(i !== current));
-        slide.setAttribute("aria-label", `Slide ${i + 1} of ${slides.length}`);
-        setDataState(slide, i === current ? "active" : "inactive");
-      }
-      if (!loop) {
-        prevButton.disabled = current <= 0;
-        nextButton.disabled = current >= slides.length - 1;
-      }
-      const translateProp = orientation === "horizontal" ? "translateX" : "translateY";
-      viewport.style.transform = `${translateProp}(-${current * 100}%)`;
-    }
-    function goTo(index) {
-      const total = slides.length;
-      if (total === 0)
-        return;
-      let next = index;
-      if (loop) {
-        next = (index % total + total) % total;
-      } else {
-        next = Math.max(0, Math.min(total - 1, index));
-      }
-      if (next === state.currentIndex.peek())
-        return;
-      state.currentIndex.value = next;
-      updateSlideVisibility();
-      onSlideChange?.(next);
-    }
-    function goNext() {
-      goTo(state.currentIndex.peek() + 1);
-    }
-    function goPrev() {
-      goTo(state.currentIndex.peek() - 1);
-    }
-    prevButton.addEventListener("click", goPrev);
-    nextButton.addEventListener("click", goNext);
-    root.addEventListener("keydown", (event) => {
-      const prevKey = orientation === "horizontal" ? Keys.ArrowLeft : Keys.ArrowUp;
-      const nextKey = orientation === "horizontal" ? Keys.ArrowRight : Keys.ArrowDown;
-      if (isKey(event, prevKey)) {
-        event.preventDefault();
-        goPrev();
-      }
-      if (isKey(event, nextKey)) {
-        event.preventDefault();
-        goNext();
-      }
-    });
-    function Slide() {
-      const slide = document.createElement("div");
-      slide.setAttribute("role", "group");
-      slide.setAttribute("aria-roledescription", "slide");
-      slides.push(slide);
-      state.slideCount.value = slides.length;
-      viewport.appendChild(slide);
-      updateSlideVisibility();
-      return slide;
-    }
-    root.appendChild(viewport);
-    updateSlideVisibility();
-    return { root, viewport, prevButton, nextButton, state, Slide, goTo, goNext, goPrev };
-  }
-};
-
-export { Carousel };