@vertz/ui-primitives 0.2.16 → 0.2.17

package/dist/shared/chunk-fv1y77tn.js

@@ -1,225 +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,
-  setSelected
-} from "./chunk-vvjyx7fe.js";
-import {
-  linkedIds
-} from "./chunk-8y1jf6xr.js";
-
-// src/select/select.ts
-import { signal } from "@vertz/ui";
-var Select = {
-  Root(options = {}) {
-    const { defaultValue = "", placeholder = "", onValueChange, positioning } = options;
-    const ids = linkedIds("select");
-    const state = {
-      open: signal(false),
-      value: signal(defaultValue),
-      activeIndex: signal(-1)
-    };
-    const items = [];
-    let floatingCleanup = null;
-    let dismissCleanup = null;
-    const trigger = document.createElement("button");
-    trigger.setAttribute("type", "button");
-    trigger.setAttribute("role", "combobox");
-    trigger.id = ids.triggerId;
-    trigger.setAttribute("aria-controls", ids.contentId);
-    trigger.setAttribute("aria-haspopup", "listbox");
-    setExpanded(trigger, false);
-    setDataState(trigger, "closed");
-    const triggerText = document.createElement("span");
-    triggerText.setAttribute("data-part", "value");
-    triggerText.textContent = defaultValue || placeholder;
-    trigger.appendChild(triggerText);
-    const content = document.createElement("div");
-    content.setAttribute("role", "listbox");
-    content.setAttribute("tabindex", "-1");
-    content.id = ids.contentId;
-    setHidden(content, true);
-    setDataState(content, "closed");
-    function open() {
-      state.open.value = true;
-      setExpanded(trigger, true);
-      setHidden(content, false);
-      setDataState(trigger, "open");
-      setDataState(content, "open");
-      if (positioning) {
-        const result = createFloatingPosition(trigger, content, positioning);
-        floatingCleanup = result.cleanup;
-        dismissCleanup = createDismiss({
-          onDismiss: close,
-          insideElements: [trigger, content],
-          escapeKey: false
-        });
-      } else {
-        const rect = trigger.getBoundingClientRect();
-        const side = window.innerHeight - rect.bottom >= rect.top ? "bottom" : "top";
-        content.setAttribute("data-side", side);
-      }
-      const selectedIdx = items.findIndex((item) => item.getAttribute("data-value") === state.value.peek());
-      if (selectedIdx >= 0) {
-        state.activeIndex.value = selectedIdx;
-        updateActiveItem(selectedIdx);
-        items[selectedIdx]?.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);
-      floatingCleanup?.();
-      floatingCleanup = null;
-      dismissCleanup?.();
-      dismissCleanup = null;
-      trigger.focus();
-    }
-    function selectItem(value) {
-      state.value.value = value;
-      for (const item of items) {
-        const isActive = item.getAttribute("data-value") === value;
-        setSelected(item, isActive);
-        setDataState(item, isActive ? "active" : "inactive");
-        if (isActive) {
-          triggerText.textContent = item.textContent ?? value;
-        }
-      }
-      onValueChange?.(value);
-      close();
-    }
-    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.ArrowUp, Keys.Enter, Keys.Space)) {
-        event.preventDefault();
-        if (!state.open.peek()) {
-          open();
-        }
-      }
-    });
-    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)
-            selectItem(val);
-        }
-        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", "option");
-      item.setAttribute("data-value", value);
-      item.setAttribute("tabindex", "-1");
-      item.textContent = label ?? value;
-      const isSelected = value === defaultValue;
-      setSelected(item, isSelected);
-      setDataState(item, isSelected ? "active" : "inactive");
-      if (isSelected) {
-        triggerText.textContent = item.textContent ?? value;
-      }
-      item.addEventListener("click", () => {
-        selectItem(value);
-      });
-      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;
-    }
-    return { trigger, content, state, Item, Group, Separator };
-  }
-};
-
-export { Select };

package/dist/shared/chunk-h42bk324.js

@@ -1,58 +0,0 @@
-import {
-  Keys,
-  isKey
-} from "./chunk-jctqs9m4.js";
-import {
-  setChecked,
-  setDataState
-} from "./chunk-vvjyx7fe.js";
-import {
-  uniqueId
-} from "./chunk-8y1jf6xr.js";
-
-// src/checkbox/checkbox.ts
-import { signal } from "@vertz/ui";
-function dataStateFor(checked) {
-  if (checked === "mixed")
-    return "indeterminate";
-  return checked ? "checked" : "unchecked";
-}
-var Checkbox = {
-  Root(options = {}) {
-    const { defaultChecked = false, disabled = false, onCheckedChange } = options;
-    const state = {
-      checked: signal(defaultChecked),
-      disabled: signal(disabled)
-    };
-    const root = document.createElement("button");
-    root.setAttribute("type", "button");
-    root.setAttribute("role", "checkbox");
-    root.id = uniqueId("checkbox");
-    setChecked(root, defaultChecked);
-    setDataState(root, dataStateFor(defaultChecked));
-    if (disabled) {
-      root.disabled = true;
-      root.setAttribute("aria-disabled", "true");
-    }
-    function toggle() {
-      if (state.disabled.peek())
-        return;
-      const current = state.checked.peek();
-      const next = current === "mixed" ? true : !current;
-      state.checked.value = next;
-      setChecked(root, next);
-      setDataState(root, dataStateFor(next));
-      onCheckedChange?.(next);
-    }
-    root.addEventListener("click", toggle);
-    root.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Space)) {
-        event.preventDefault();
-        toggle();
-      }
-    });
-    return { root, state };
-  }
-};
-
-export { Checkbox };

package/dist/shared/chunk-h9m9x5my.js

@@ -1,119 +0,0 @@
-// src/scroll-area/scroll-area.ts
-import { signal } from "@vertz/ui";
-var ScrollArea = {
-  Root(options = {}) {
-    const { orientation = "vertical" } = options;
-    const state = {
-      scrollTop: signal(0),
-      scrollLeft: signal(0)
-    };
-    const root = document.createElement("div");
-    root.style.position = "relative";
-    root.style.overflow = "hidden";
-    const viewport = document.createElement("div");
-    viewport.style.overflow = "scroll";
-    viewport.style.scrollbarWidth = "none";
-    const content = document.createElement("div");
-    const scrollbarY = document.createElement("div");
-    scrollbarY.setAttribute("aria-hidden", "true");
-    scrollbarY.setAttribute("data-orientation", "vertical");
-    const thumbY = document.createElement("div");
-    scrollbarY.appendChild(thumbY);
-    const scrollbarX = document.createElement("div");
-    scrollbarX.setAttribute("aria-hidden", "true");
-    scrollbarX.setAttribute("data-orientation", "horizontal");
-    const thumbX = document.createElement("div");
-    scrollbarX.appendChild(thumbX);
-    function syncThumbY() {
-      const { scrollTop, scrollHeight, clientHeight } = viewport;
-      if (scrollHeight <= clientHeight) {
-        thumbY.style.height = "0";
-        return;
-      }
-      const ratio = clientHeight / scrollHeight;
-      thumbY.style.height = `${ratio * 100}%`;
-      const scrollRatio = scrollTop / (scrollHeight - clientHeight);
-      thumbY.style.transform = `translateY(${scrollRatio * (1 / ratio - 1) * 100}%)`;
-      state.scrollTop.value = scrollTop;
-    }
-    function syncThumbX() {
-      const { scrollLeft, scrollWidth, clientWidth } = viewport;
-      if (scrollWidth <= clientWidth) {
-        thumbX.style.width = "0";
-        return;
-      }
-      const ratio = clientWidth / scrollWidth;
-      thumbX.style.width = `${ratio * 100}%`;
-      const scrollRatio = scrollLeft / (scrollWidth - clientWidth);
-      thumbX.style.transform = `translateX(${scrollRatio * (1 / ratio - 1) * 100}%)`;
-      state.scrollLeft.value = scrollLeft;
-    }
-    viewport.addEventListener("scroll", () => {
-      if (orientation === "vertical" || orientation === "both")
-        syncThumbY();
-      if (orientation === "horizontal" || orientation === "both")
-        syncThumbX();
-    });
-    let isDraggingY = false;
-    let startY = 0;
-    let startScrollTop = 0;
-    thumbY.addEventListener("pointerdown", (e) => {
-      isDraggingY = true;
-      startY = e.clientY;
-      startScrollTop = viewport.scrollTop;
-      thumbY.setPointerCapture(e.pointerId);
-      e.preventDefault();
-    });
-    thumbY.addEventListener("pointermove", (e) => {
-      if (!isDraggingY)
-        return;
-      const delta = e.clientY - startY;
-      const scrollbarHeight = scrollbarY.clientHeight;
-      const scrollRange = viewport.scrollHeight - viewport.clientHeight;
-      if (scrollbarHeight > 0) {
-        viewport.scrollTop = startScrollTop + delta / scrollbarHeight * scrollRange;
-      }
-    });
-    thumbY.addEventListener("pointerup", (e) => {
-      isDraggingY = false;
-      thumbY.releasePointerCapture(e.pointerId);
-    });
-    let isDraggingX = false;
-    let startX = 0;
-    let startScrollLeft = 0;
-    thumbX.addEventListener("pointerdown", (e) => {
-      isDraggingX = true;
-      startX = e.clientX;
-      startScrollLeft = viewport.scrollLeft;
-      thumbX.setPointerCapture(e.pointerId);
-      e.preventDefault();
-    });
-    thumbX.addEventListener("pointermove", (e) => {
-      if (!isDraggingX)
-        return;
-      const delta = e.clientX - startX;
-      const scrollbarWidth = scrollbarX.clientWidth;
-      const scrollRange = viewport.scrollWidth - viewport.clientWidth;
-      if (scrollbarWidth > 0) {
-        viewport.scrollLeft = startScrollLeft + delta / scrollbarWidth * scrollRange;
-      }
-    });
-    thumbX.addEventListener("pointerup", (e) => {
-      isDraggingX = false;
-      thumbX.releasePointerCapture(e.pointerId);
-    });
-    function update() {
-      syncThumbY();
-      syncThumbX();
-    }
-    viewport.appendChild(content);
-    root.appendChild(viewport);
-    if (orientation === "vertical" || orientation === "both")
-      root.appendChild(scrollbarY);
-    if (orientation === "horizontal" || orientation === "both")
-      root.appendChild(scrollbarX);
-    return { root, viewport, content, scrollbarY, thumbY, scrollbarX, thumbX, state, update };
-  }
-};
-
-export { ScrollArea };

package/dist/shared/chunk-qq0e0gym.js

@@ -1,73 +0,0 @@
-import {
-  setRovingTabindex
-} from "./chunk-e2v1c9ex.js";
-import {
-  handleListNavigation
-} from "./chunk-jctqs9m4.js";
-import {
-  setChecked,
-  setDataState
-} from "./chunk-vvjyx7fe.js";
-import {
-  uniqueId
-} from "./chunk-8y1jf6xr.js";
-
-// src/radio/radio.ts
-import { signal } from "@vertz/ui";
-var Radio = {
-  Root(options = {}) {
-    const { defaultValue = "", onValueChange } = options;
-    const state = { value: signal(defaultValue) };
-    const items = [];
-    const itemValues = [];
-    const root = document.createElement("div");
-    root.setAttribute("role", "radiogroup");
-    root.id = uniqueId("radiogroup");
-    function selectItem(value) {
-      state.value.value = value;
-      for (let i = 0;i < items.length; i++) {
-        const item = items[i];
-        if (!item)
-          continue;
-        const isActive = itemValues[i] === value;
-        setChecked(item, isActive);
-        setDataState(item, isActive ? "checked" : "unchecked");
-      }
-      setRovingTabindex(items, itemValues.indexOf(value));
-      onValueChange?.(value);
-    }
-    root.addEventListener("keydown", (event) => {
-      const result = handleListNavigation(event, items, { orientation: "vertical" });
-      if (result) {
-        const idx = items.indexOf(result);
-        if (idx >= 0) {
-          const val = itemValues[idx];
-          if (val !== undefined)
-            selectItem(val);
-        }
-      }
-    });
-    function Item(value, label) {
-      const item = document.createElement("div");
-      item.setAttribute("role", "radio");
-      item.id = uniqueId("radio");
-      item.setAttribute("data-value", value);
-      item.textContent = label ?? value;
-      const isActive = value === state.value.peek();
-      setChecked(item, isActive);
-      setDataState(item, isActive ? "checked" : "unchecked");
-      item.addEventListener("click", () => {
-        selectItem(value);
-        item.focus();
-      });
-      items.push(item);
-      itemValues.push(value);
-      root.appendChild(item);
-      setRovingTabindex(items, itemValues.indexOf(state.value.peek()));
-      return item;
-    }
-    return { root, state, Item };
-  }
-};
-
-export { Radio };

package/dist/shared/chunk-tk1k1bet.js

@@ -1,93 +0,0 @@
-import {
-  setRovingTabindex
-} from "./chunk-e2v1c9ex.js";
-import {
-  Keys,
-  handleListNavigation,
-  isKey
-} from "./chunk-jctqs9m4.js";
-import {
-  setDataState,
-  setPressed
-} from "./chunk-vvjyx7fe.js";
-
-// src/toggle-group/toggle-group.ts
-import { signal } from "@vertz/ui";
-var ToggleGroup = {
-  Root(options = {}) {
-    const {
-      type = "single",
-      defaultValue = [],
-      orientation = "horizontal",
-      disabled = false,
-      onValueChange
-    } = options;
-    const state = {
-      value: signal([...defaultValue]),
-      disabled: signal(disabled)
-    };
-    const items = [];
-    const root = document.createElement("div");
-    root.setAttribute("role", "group");
-    root.setAttribute("data-orientation", orientation);
-    function toggleValue(itemValue) {
-      if (state.disabled.peek())
-        return;
-      const current = [...state.value.peek()];
-      const idx = current.indexOf(itemValue);
-      if (type === "single") {
-        if (idx >= 0) {
-          current.length = 0;
-        } else {
-          current.length = 0;
-          current.push(itemValue);
-        }
-      } else {
-        if (idx >= 0) {
-          current.splice(idx, 1);
-        } else {
-          current.push(itemValue);
-        }
-      }
-      state.value.value = current;
-      onValueChange?.(current);
-      for (const item of items) {
-        const val = item.getAttribute("data-value") ?? "";
-        const isOn = current.includes(val);
-        setPressed(item, isOn);
-        setDataState(item, isOn ? "on" : "off");
-      }
-    }
-    root.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
-        const result = handleListNavigation(event, items, { orientation });
-        if (result) {
-          const idx = items.indexOf(result);
-          if (idx >= 0) {
-            setRovingTabindex(items, idx);
-          }
-        }
-      }
-    });
-    function Item(value) {
-      const item = document.createElement("button");
-      item.setAttribute("type", "button");
-      item.setAttribute("data-value", value);
-      const isOn = state.value.peek().includes(value);
-      setPressed(item, isOn);
-      setDataState(item, isOn ? "on" : "off");
-      if (state.disabled.peek()) {
-        item.disabled = true;
-        item.setAttribute("aria-disabled", "true");
-      }
-      item.addEventListener("click", () => toggleValue(value));
-      items.push(item);
-      setRovingTabindex(items, 0);
-      root.appendChild(item);
-      return item;
-    }
-    return { root, state, Item };
-  }
-};
-
-export { ToggleGroup };