@vertz/ui-primitives 0.2.15 → 0.2.17

package/dist/shared/chunk-jz0s6srh.js

@@ -0,0 +1,161 @@
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+
+// src/scroll-area/scroll-area.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function ScrollAreaRoot(options = {}) {
+  const { orientation = "vertical", type: _type, ...attrs } = options;
+  const state = {
+    scrollTop: signal(0),
+    scrollLeft: signal(0)
+  };
+  let isDraggingY = false;
+  let startY = 0;
+  let startScrollTop = 0;
+  let isDraggingX = false;
+  let startX = 0;
+  let startScrollLeft = 0;
+  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;
+  }
+  function update() {
+    syncThumbY();
+    syncThumbX();
+  }
+  function handleViewportScroll() {
+    if (orientation === "vertical" || orientation === "both")
+      syncThumbY();
+    if (orientation === "horizontal" || orientation === "both")
+      syncThumbX();
+  }
+  function handleThumbYDown(e) {
+    isDraggingY = true;
+    startY = e.clientY;
+    startScrollTop = viewport.scrollTop;
+    thumbY.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  }
+  function handleThumbYMove(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;
+    }
+  }
+  function handleThumbYUp(e) {
+    isDraggingY = false;
+    thumbY.releasePointerCapture(e.pointerId);
+  }
+  function handleThumbXDown(e) {
+    isDraggingX = true;
+    startX = e.clientX;
+    startScrollLeft = viewport.scrollLeft;
+    thumbX.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  }
+  function handleThumbXMove(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;
+    }
+  }
+  function handleThumbXUp(e) {
+    isDraggingX = false;
+    thumbX.releasePointerCapture(e.pointerId);
+  }
+  const thumbY = (() => {
+    const __el0 = __element("div");
+    __on(__el0, "pointerdown", handleThumbYDown);
+    __on(__el0, "pointermove", handleThumbYMove);
+    __on(__el0, "pointerup", handleThumbYUp);
+    return __el0;
+  })();
+  const scrollbarY = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("aria-hidden", "true");
+    __el1.setAttribute("data-orientation", "vertical");
+    __enterChildren(__el1);
+    __insert(__el1, thumbY);
+    __exitChildren();
+    return __el1;
+  })();
+  const thumbX = (() => {
+    const __el2 = __element("div");
+    __on(__el2, "pointerdown", handleThumbXDown);
+    __on(__el2, "pointermove", handleThumbXMove);
+    __on(__el2, "pointerup", handleThumbXUp);
+    return __el2;
+  })();
+  const scrollbarX = (() => {
+    const __el3 = __element("div");
+    __el3.setAttribute("aria-hidden", "true");
+    __el3.setAttribute("data-orientation", "horizontal");
+    __enterChildren(__el3);
+    __insert(__el3, thumbX);
+    __exitChildren();
+    return __el3;
+  })();
+  const content = (() => {
+    const __el4 = __element("div");
+    return __el4;
+  })();
+  const viewport = (() => {
+    const __el5 = __element("div");
+    __el5.setAttribute("style", "overflow: scroll;");
+    __on(__el5, "scroll", handleViewportScroll);
+    __enterChildren(__el5);
+    __insert(__el5, content);
+    __exitChildren();
+    return __el5;
+  })();
+  viewport.style.scrollbarWidth = "none";
+  const root = (() => {
+    const __el6 = __element("div");
+    __el6.setAttribute("style", "position: relative; overflow: hidden;");
+    __enterChildren(__el6);
+    __insert(__el6, viewport);
+    __exitChildren();
+    return __el6;
+  })();
+  if (orientation === "vertical" || orientation === "both")
+    root.appendChild(scrollbarY);
+  if (orientation === "horizontal" || orientation === "both")
+    root.appendChild(scrollbarX);
+  applyAttrs(root, attrs);
+  return { root, viewport, content, scrollbarY, thumbY, scrollbarX, thumbX, state, update };
+}
+var ScrollArea = {
+  Root: ScrollAreaRoot
+};
+
+export { ScrollArea };

package/dist/shared/chunk-kg27s15c.js

@@ -0,0 +1,282 @@
+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 {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/select/select.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function SelectRoot(options = {}) {
+  const { defaultValue = "", placeholder = "", onValueChange, positioning, ...attrs } = options;
+  const ids = linkedIds("select");
+  const state = {
+    open: signal(false),
+    value: signal(defaultValue),
+    activeIndex: signal(-1)
+  };
+  const items = [];
+  let floatingCleanup = null;
+  let dismissCleanup = null;
+  function updateActiveItem(index) {
+    for (let i = 0;i < items.length; i++) {
+      items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
+    }
+  }
+  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 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();
+  }
+  const triggerText = (() => {
+    const __el0 = __element("span");
+    __el0.setAttribute("data-part", "value");
+    __enterChildren(__el0);
+    __insert(__el0, defaultValue || placeholder);
+    __exitChildren();
+    return __el0;
+  })();
+  const trigger = (() => {
+    const __el1 = __element("button");
+    __el1.setAttribute("type", "button");
+    __el1.setAttribute("role", "combobox");
+    {
+      const __v = ids.triggerId;
+      if (__v != null && __v !== false)
+        __el1.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el1.setAttribute("aria-controls", __v === true ? "" : __v);
+    }
+    __el1.setAttribute("aria-haspopup", "listbox");
+    __el1.setAttribute("aria-expanded", "false");
+    __el1.setAttribute("data-state", "closed");
+    __on(__el1, "click", () => {
+      if (state.open.peek()) {
+        close();
+      } else {
+        open();
+      }
+    });
+    __on(__el1, "keydown", (event) => {
+      if (isKey(event, Keys.ArrowDown, Keys.ArrowUp, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        if (!state.open.peek()) {
+          open();
+        }
+      }
+    });
+    __enterChildren(__el1);
+    __insert(__el1, triggerText);
+    __exitChildren();
+    return __el1;
+  })();
+  const content = (() => {
+    const __el2 = __element("div");
+    __el2.setAttribute("role", "listbox");
+    __el2.setAttribute("tabindex", "-1");
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("id", __v === true ? "" : __v);
+    }
+    __el2.setAttribute("aria-hidden", "true");
+    __el2.setAttribute("data-state", "closed");
+    __el2.setAttribute("style", "display: none");
+    __on(__el2, "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();
+        }
+      }
+    });
+    return __el2;
+  })();
+  function createItem(value, label, parent) {
+    const isSelectedItem = value === defaultValue;
+    const item = (() => {
+      const __el3 = __element("div");
+      __el3.setAttribute("role", "option");
+      {
+        const __v = value;
+        if (__v != null && __v !== false)
+          __el3.setAttribute("data-value", __v === true ? "" : __v);
+      }
+      __el3.setAttribute("tabindex", "-1");
+      {
+        const __v = isSelectedItem ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el3.setAttribute("aria-selected", __v === true ? "" : __v);
+      }
+      {
+        const __v = isSelectedItem ? "active" : "inactive";
+        if (__v != null && __v !== false)
+          __el3.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __on(__el3, "click", () => selectItem(value));
+      __enterChildren(__el3);
+      __insert(__el3, label ?? value);
+      __exitChildren();
+      return __el3;
+    })();
+    if (isSelectedItem) {
+      triggerText.textContent = item.textContent ?? value;
+    }
+    items.push(item);
+    (parent ?? content).appendChild(item);
+    return item;
+  }
+  function Item(value, label) {
+    return createItem(value, label);
+  }
+  function Group(label) {
+    const el = (() => {
+      const __el4 = __element("div");
+      __el4.setAttribute("role", "group");
+      {
+        const __v = label;
+        if (__v != null && __v !== false)
+          __el4.setAttribute("aria-label", __v === true ? "" : __v);
+      }
+      return __el4;
+    })();
+    content.appendChild(el);
+    return {
+      el,
+      Item: (value, itemLabel) => createItem(value, itemLabel, el)
+    };
+  }
+  function Separator() {
+    const hr = (() => {
+      const __el5 = __element("hr");
+      __el5.setAttribute("role", "separator");
+      return __el5;
+    })();
+    content.appendChild(hr);
+    return hr;
+  }
+  applyAttrs(trigger, attrs);
+  return { trigger, content, state, Item, Group, Separator };
+}
+var Select = {
+  Root: SelectRoot
+};
+
+export { Select };

package/dist/shared/chunk-m1ptgp1s.js

@@ -0,0 +1,142 @@
+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 {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/popover/popover.tsx
+import { __element, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function PopoverRoot(options = {}) {
+  const { defaultOpen = false, onOpenChange, positioning, ...attrs } = options;
+  const ids = linkedIds("popover");
+  const state = { open: signal(defaultOpen) };
+  let restoreFocus = null;
+  let floatingCleanup = null;
+  let dismissCleanup = null;
+  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);
+  }
+  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", "dialog");
+    {
+      const __v = defaultOpen ? "true" : "false";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-expanded", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    __on(__el0, "click", () => {
+      if (state.open.peek()) {
+        close();
+      } else {
+        open();
+      }
+    });
+    return __el0;
+  })();
+  const content = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("role", "dialog");
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el1.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "false" : "true";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("aria-hidden", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "" : "display: none";
+      if (__v != null && __v !== false)
+        __el1.setAttribute("style", __v === true ? "" : __v);
+    }
+    __on(__el1, "keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        close();
+      }
+    });
+    return __el1;
+  })();
+  applyAttrs(trigger, attrs);
+  return { trigger, content, state };
+}
+var Popover = {
+  Root: PopoverRoot
+};
+
+export { Popover };

package/dist/shared/chunk-n9nwx58j.js

@@ -0,0 +1,60 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  applyAttrs
+} from "./chunk-dpsgb1xw.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/toggle/toggle.tsx
+import { computed, signal } from "@vertz/ui";
+import { __attr, __element, __on } from "@vertz/ui/internals";
+function ToggleRoot(options = {}) {
+  const { defaultPressed = false, disabled = false, onPressedChange, ...attrs } = options;
+  const pressed = signal(defaultPressed, "pressed");
+  function toggle() {
+    if (disabled)
+      return;
+    pressed.value = !pressed.value;
+    onPressedChange?.(pressed.value);
+  }
+  const el = computed(() => (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("type", "button");
+    {
+      const __v = uniqueId("toggle");
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    __attr(__el0, "aria-pressed", () => pressed.value ? "true" : "false");
+    __attr(__el0, "data-state", () => pressed.value ? "on" : "off");
+    {
+      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 Toggle = {
+  Root: ToggleRoot
+};
+
+export { Toggle };