@vertz/ui-primitives 0.2.15 → 0.2.17

package/dist/shared/chunk-4085nbdq.js

@@ -0,0 +1,196 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated,
+  setSelected
+} from "./chunk-vvjyx7fe.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/combobox/combobox.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function ComboboxRoot(options = {}) {
+  const { defaultValue = "", onValueChange, onInputChange, ...attrs } = options;
+  const ids = linkedIds("combobox");
+  const state = {
+    open: signal(false),
+    value: signal(defaultValue),
+    inputValue: signal(defaultValue),
+    activeIndex: signal(-1)
+  };
+  const optionElements = [];
+  function open() {
+    state.open.value = true;
+    setExpanded(input, true);
+    setHidden(listbox, false);
+    setDataState(listbox, "open");
+  }
+  function close() {
+    state.open.value = false;
+    state.activeIndex.value = -1;
+    setExpanded(input, false);
+    setDataState(listbox, "closed");
+    setHiddenAnimated(listbox, true);
+    updateActiveDescendant(-1);
+  }
+  function selectOption(value) {
+    state.value.value = value;
+    state.inputValue.value = value;
+    input.value = value;
+    for (const opt of optionElements) {
+      const isActive = opt.getAttribute("data-value") === value;
+      setSelected(opt, isActive);
+      setDataState(opt, isActive ? "active" : "inactive");
+    }
+    onValueChange?.(value);
+    close();
+    input.focus();
+  }
+  function updateActiveDescendant(index) {
+    const opt = optionElements[index];
+    if (index >= 0 && opt) {
+      input.setAttribute("aria-activedescendant", opt.id);
+      for (let i = 0;i < optionElements.length; i++) {
+        const el = optionElements[i];
+        if (el)
+          setDataState(el, i === index ? "active" : "inactive");
+      }
+    } else {
+      input.removeAttribute("aria-activedescendant");
+    }
+  }
+  const input = (() => {
+    const __el0 = __element("input");
+    __el0.setAttribute("type", "text");
+    __el0.setAttribute("role", "combobox");
+    __el0.setAttribute("aria-autocomplete", "list");
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+    }
+    __el0.setAttribute("aria-haspopup", "listbox");
+    {
+      const __v = ids.triggerId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultValue;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("value", __v === true ? "" : __v);
+    }
+    __el0.setAttribute("aria-expanded", "false");
+    __on(__el0, "input", () => {
+      state.inputValue.value = input.value;
+      onInputChange?.(input.value);
+      if (!state.open.peek())
+        open();
+    });
+    __on(__el0, "focus", () => {
+      if (!state.open.peek() && input.value.length > 0)
+        open();
+    });
+    __on(__el0, "keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        close();
+        return;
+      }
+      if (isKey(event, Keys.ArrowDown)) {
+        event.preventDefault();
+        if (!state.open.peek()) {
+          open();
+        }
+        const next = Math.min(state.activeIndex.peek() + 1, optionElements.length - 1);
+        state.activeIndex.value = next;
+        updateActiveDescendant(next);
+        return;
+      }
+      if (isKey(event, Keys.ArrowUp)) {
+        event.preventDefault();
+        const prev = Math.max(state.activeIndex.peek() - 1, 0);
+        state.activeIndex.value = prev;
+        updateActiveDescendant(prev);
+        return;
+      }
+      if (isKey(event, Keys.Enter)) {
+        event.preventDefault();
+        const idx = state.activeIndex.peek();
+        if (idx >= 0 && idx < optionElements.length) {
+          const val = optionElements[idx]?.getAttribute("data-value");
+          if (val != null)
+            selectOption(val);
+        }
+        return;
+      }
+    });
+    return __el0;
+  })();
+  const listbox = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("role", "listbox");
+    {
+      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");
+    return __el1;
+  })();
+  function Option(value, label) {
+    const optId = `${ids.contentId}-opt-${optionElements.length}`;
+    const isSelectedOpt = value === defaultValue;
+    const opt = (() => {
+      const __el2 = __element("div");
+      __el2.setAttribute("role", "option");
+      {
+        const __v = optId;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      {
+        const __v = isSelectedOpt ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el2.setAttribute("aria-selected", __v === true ? "" : __v);
+      }
+      {
+        const __v = isSelectedOpt ? "active" : "inactive";
+        if (__v != null && __v !== false)
+          __el2.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __on(__el2, "click", () => selectOption(value));
+      __enterChildren(__el2);
+      __insert(__el2, label ?? value);
+      __exitChildren();
+      return __el2;
+    })();
+    optionElements.push(opt);
+    listbox.appendChild(opt);
+    return opt;
+  }
+  applyAttrs(input, attrs);
+  return { input, listbox, state, Option };
+}
+var Combobox = {
+  Root: ComboboxRoot
+};
+
+export { Combobox };

package/dist/shared/chunk-4da5zksy.js

@@ -0,0 +1,46 @@
+import {
+  handleActivation
+} from "./chunk-jctqs9m4.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+
+// src/button/button.tsx
+import { __element, __on } from "@vertz/ui/internals";
+function ButtonRoot(options = {}) {
+  const { disabled = false, onClick, ...attrs } = options;
+  const el = (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("type", "button");
+    {
+      const __v = disabled;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("disabled", __v === true ? "" : __v);
+    }
+    {
+      const __v = disabled ? "true" : undefined;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+    }
+    __on(__el0, "click", () => {
+      if (disabled)
+        return;
+      onClick?.();
+    });
+    __on(__el0, "keydown", (event) => {
+      if (disabled)
+        return;
+      handleActivation(event, () => {
+        event.target.click();
+      });
+    });
+    return __el0;
+  })();
+  applyAttrs(el, attrs);
+  return el;
+}
+var Button = {
+  Root: ButtonRoot
+};
+
+export { Button };

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-7kpsyjd7.js

@@ -0,0 +1,61 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/switch/switch.tsx
+import { computed, signal } from "@vertz/ui";
+import { __attr, __element, __on } from "@vertz/ui/internals";
+function SwitchRoot(options = {}) {
+  const { defaultChecked = false, disabled = false, onCheckedChange, ...attrs } = options;
+  const checked = signal(defaultChecked, "checked");
+  function toggle() {
+    if (disabled)
+      return;
+    checked.value = !checked.value;
+    onCheckedChange?.(checked.value);
+  }
+  const el = computed(() => (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("type", "button");
+    __el0.setAttribute("role", "switch");
+    {
+      const __v = uniqueId("switch");
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    __attr(__el0, "aria-checked", () => checked.value ? "true" : "false");
+    __attr(__el0, "data-state", () => checked.value ? "checked" : "unchecked");
+    {
+      const __v = disabled;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("disabled", __v === true ? "" : __v);
+    }
+    {
+      const __v = disabled ? "true" : undefined;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+    }
+    __on(__el0, "click", toggle);
+    __on(__el0, "keydown", (e) => {
+      if (isKey(e, Keys.Space)) {
+        e.preventDefault();
+        toggle();
+      }
+    });
+    return __el0;
+  })());
+  applyAttrs(el.value, attrs);
+  return el.value;
+}
+var Switch = {
+  Root: SwitchRoot
+};
+
+export { Switch };