@vertz/ui-primitives 0.2.15 → 0.2.16

package/dist/shared/chunk-cvbf1js1.js

@@ -0,0 +1,52 @@
+import {
+  setDataState
+} from "./chunk-vvjyx7fe.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/toast/toast.ts
+import { signal } from "@vertz/ui";
+var Toast = {
+  Root(options = {}) {
+    const { duration = 5000, politeness = "polite" } = options;
+    const state = { messages: signal([]) };
+    const region = document.createElement("div");
+    region.setAttribute("role", "status");
+    region.setAttribute("aria-live", politeness);
+    region.setAttribute("aria-atomic", "false");
+    setDataState(region, "empty");
+    function announce(content) {
+      const id = uniqueId("toast");
+      const el = document.createElement("div");
+      el.setAttribute("role", "status");
+      el.setAttribute("data-toast-id", id);
+      el.textContent = content;
+      setDataState(el, "open");
+      const msg = { id, content, el };
+      const messages = [...state.messages.peek(), msg];
+      state.messages.value = messages;
+      region.appendChild(el);
+      setDataState(region, "active");
+      if (duration > 0) {
+        setTimeout(() => dismiss(id), duration);
+      }
+      return msg;
+    }
+    function dismiss(id) {
+      const messages = state.messages.peek().filter((m) => m.id !== id);
+      state.messages.value = messages;
+      const el = region.querySelector(`[data-toast-id="${id}"]`);
+      if (el) {
+        setDataState(el, "closed");
+        el.remove();
+      }
+      if (messages.length === 0) {
+        setDataState(region, "empty");
+      }
+    }
+    return { region, state, announce, dismiss };
+  }
+};
+
+export { Toast };

package/dist/shared/chunk-dkhst4wv.js

@@ -0,0 +1,97 @@
+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 {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/popover/popover.ts
+import { signal } from "@vertz/ui";
+var Popover = {
+  Root(options = {}) {
+    const { defaultOpen = false, onOpenChange, positioning } = options;
+    const ids = linkedIds("popover");
+    const state = { open: signal(defaultOpen) };
+    let restoreFocus = null;
+    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", "dialog");
+    setExpanded(trigger, defaultOpen);
+    setDataState(trigger, defaultOpen ? "open" : "closed");
+    const content = document.createElement("div");
+    content.setAttribute("role", "dialog");
+    content.id = ids.contentId;
+    setHidden(content, !defaultOpen);
+    setDataState(content, defaultOpen ? "open" : "closed");
+    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);
+    }
+    trigger.addEventListener("click", () => {
+      if (state.open.peek()) {
+        close();
+      } else {
+        open();
+      }
+    });
+    content.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        close();
+      }
+    });
+    return { trigger, content, state };
+  }
+};
+
+export { Popover };

package/dist/shared/chunk-e2v1c9ex.js

@@ -0,0 +1,62 @@
+// src/utils/focus.ts
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  "[contenteditable]"
+].join(", ");
+function getFocusableElements(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+function trapFocus(container) {
+  function handleKeyDown(event) {
+    if (event.key !== "Tab")
+      return;
+    const focusable = getFocusableElements(container);
+    if (focusable.length === 0)
+      return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (!first || !last)
+      return;
+    if (event.shiftKey) {
+      if (document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  }
+  container.addEventListener("keydown", handleKeyDown);
+  return () => {
+    container.removeEventListener("keydown", handleKeyDown);
+  };
+}
+function focusFirst(container) {
+  const focusable = getFocusableElements(container);
+  if (focusable.length > 0) {
+    focusable[0]?.focus();
+  }
+}
+function saveFocus() {
+  const previously = document.activeElement;
+  return () => {
+    if (previously && typeof previously.focus === "function") {
+      previously.focus();
+    }
+  };
+}
+function setRovingTabindex(items, activeIndex) {
+  for (let i = 0;i < items.length; i++) {
+    items[i]?.setAttribute("tabindex", i === activeIndex ? "0" : "-1");
+  }
+}
+
+export { getFocusableElements, trapFocus, focusFirst, saveFocus, setRovingTabindex };

package/dist/shared/chunk-e3aj5yw4.js

@@ -0,0 +1,115 @@
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/accordion/accordion.ts
+import { signal } from "@vertz/ui";
+var Accordion = {
+  Root(options = {}) {
+    const { multiple = false, defaultValue = [], onValueChange } = options;
+    const state = { value: signal([...defaultValue]) };
+    const triggers = [];
+    const itemMap = new Map;
+    const root = document.createElement("div");
+    root.setAttribute("data-orientation", "vertical");
+    function updateItemState(val, open) {
+      const entry = itemMap.get(val);
+      if (!entry)
+        return;
+      const { trigger: t, content: c } = entry;
+      if (open) {
+        setHidden(c, false);
+      }
+      const height = c.scrollHeight;
+      c.style.setProperty("--accordion-content-height", `${height}px`);
+      setExpanded(t, open);
+      setDataState(t, open ? "open" : "closed");
+      setDataState(c, open ? "open" : "closed");
+      if (!open) {
+        setHiddenAnimated(c, true);
+      }
+    }
+    function toggleItem(value) {
+      const prev = [...state.value.peek()];
+      const current = [...prev];
+      const idx = current.indexOf(value);
+      if (idx >= 0) {
+        current.splice(idx, 1);
+      } else {
+        if (multiple) {
+          current.push(value);
+        } else {
+          current.length = 0;
+          current.push(value);
+        }
+      }
+      state.value.value = current;
+      onValueChange?.(current);
+      for (const v of prev) {
+        if (!current.includes(v)) {
+          updateItemState(v, false);
+        }
+      }
+      for (const v of current) {
+        if (!prev.includes(v)) {
+          updateItemState(v, true);
+        }
+      }
+    }
+    root.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
+        handleListNavigation(event, triggers, { orientation: "vertical" });
+      }
+    });
+    function Item(value) {
+      const baseId = uniqueId("accordion");
+      const triggerId = `${baseId}-trigger`;
+      const contentId = `${baseId}-content`;
+      const isOpen = state.value.peek().includes(value);
+      const item = document.createElement("div");
+      item.setAttribute("data-value", value);
+      const trigger = document.createElement("button");
+      trigger.setAttribute("type", "button");
+      trigger.id = triggerId;
+      trigger.setAttribute("aria-controls", contentId);
+      trigger.setAttribute("data-value", value);
+      setExpanded(trigger, isOpen);
+      setDataState(trigger, isOpen ? "open" : "closed");
+      const content = document.createElement("div");
+      content.setAttribute("role", "region");
+      content.id = contentId;
+      content.setAttribute("aria-labelledby", triggerId);
+      setHidden(content, !isOpen);
+      setDataState(content, isOpen ? "open" : "closed");
+      trigger.addEventListener("click", () => {
+        toggleItem(value);
+      });
+      itemMap.set(value, { trigger, content });
+      triggers.push(trigger);
+      item.appendChild(trigger);
+      item.appendChild(content);
+      root.appendChild(item);
+      if (isOpen) {
+        requestAnimationFrame(() => {
+          const height = content.scrollHeight;
+          content.style.setProperty("--accordion-content-height", `${height}px`);
+        });
+      }
+      return { item, trigger, content };
+    }
+    return { root, state, Item };
+  }
+};
+
+export { Accordion };

package/dist/shared/chunk-fv1y77tn.js

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

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