@vertz/ui-primitives 0.2.15 → 0.2.16

package/dist/shared/chunk-h9m9x5my.js

@@ -0,0 +1,119 @@
+// 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-jctqs9m4.js

@@ -0,0 +1,60 @@
+// src/utils/keyboard.ts
+var Keys = {
+  Enter: "Enter",
+  Space: " ",
+  Escape: "Escape",
+  ArrowUp: "ArrowUp",
+  ArrowDown: "ArrowDown",
+  ArrowLeft: "ArrowLeft",
+  ArrowRight: "ArrowRight",
+  Home: "Home",
+  End: "End",
+  Tab: "Tab"
+};
+function isKey(event, ...keys) {
+  return keys.includes(event.key);
+}
+function handleListNavigation(event, items, options = {}) {
+  const { orientation = "vertical", loop = true } = options;
+  if (items.length === 0)
+    return null;
+  const prevKey = orientation === "vertical" ? Keys.ArrowUp : Keys.ArrowLeft;
+  const nextKey = orientation === "vertical" ? Keys.ArrowDown : Keys.ArrowRight;
+  const currentIndex = items.indexOf(document.activeElement);
+  let nextIndex = -1;
+  if (isKey(event, prevKey)) {
+    event.preventDefault();
+    if (currentIndex <= 0) {
+      nextIndex = loop ? items.length - 1 : 0;
+    } else {
+      nextIndex = currentIndex - 1;
+    }
+  } else if (isKey(event, nextKey)) {
+    event.preventDefault();
+    if (currentIndex >= items.length - 1) {
+      nextIndex = loop ? 0 : items.length - 1;
+    } else {
+      nextIndex = currentIndex + 1;
+    }
+  } else if (isKey(event, Keys.Home)) {
+    event.preventDefault();
+    nextIndex = 0;
+  } else if (isKey(event, Keys.End)) {
+    event.preventDefault();
+    nextIndex = items.length - 1;
+  }
+  const target = items[nextIndex];
+  if (target) {
+    target.focus();
+    return target;
+  }
+  return null;
+}
+function handleActivation(event, handler) {
+  if (isKey(event, Keys.Enter, Keys.Space)) {
+    event.preventDefault();
+    handler();
+  }
+}
+
+export { Keys, isKey, handleListNavigation, handleActivation };

package/dist/shared/chunk-n92bvn5d.js

@@ -0,0 +1,149 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setValueRange
+} from "./chunk-vvjyx7fe.js";
+
+// src/resizable-panel/resizable-panel.ts
+import { signal } from "@vertz/ui";
+var ResizablePanel = {
+  Root(options = {}) {
+    const { orientation = "horizontal", onResize } = options;
+    const state = { sizes: signal([]) };
+    const panels = [];
+    const handles = [];
+    const root = document.createElement("div");
+    root.style.display = "flex";
+    root.style.flexDirection = orientation === "horizontal" ? "row" : "column";
+    root.setAttribute("data-orientation", orientation);
+    function updateSizes(newSizes) {
+      state.sizes.value = [...newSizes];
+      for (let i = 0;i < panels.length; i++) {
+        const panel = panels[i];
+        if (!panel)
+          continue;
+        const size = newSizes[i] ?? 0;
+        panel.el.style.flex = `0 0 ${size}%`;
+      }
+      for (let i = 0;i < handles.length; i++) {
+        const handle = handles[i];
+        const leftPanel = panels[i];
+        if (handle && leftPanel) {
+          const size = newSizes[i] ?? 0;
+          setValueRange(handle, Math.round(size), Math.round(leftPanel.minSize), Math.round(leftPanel.maxSize));
+        }
+      }
+      onResize?.(newSizes);
+    }
+    function Panel(panelOptions = {}) {
+      const { defaultSize, minSize = 0, maxSize = 100 } = panelOptions;
+      const el = document.createElement("div");
+      el.setAttribute("data-panel", "");
+      panels.push({ el, minSize, maxSize });
+      const sizes = state.sizes.peek();
+      if (defaultSize != null) {
+        sizes.push(defaultSize);
+      } else {
+        const equalSize = 100 / panels.length;
+        sizes.length = 0;
+        for (let i = 0;i < panels.length; i++) {
+          sizes.push(equalSize);
+        }
+      }
+      updateSizes(sizes);
+      root.appendChild(el);
+      return el;
+    }
+    function Handle() {
+      const handleIndex = handles.length;
+      const handle = document.createElement("div");
+      handle.setAttribute("role", "separator");
+      handle.setAttribute("tabindex", "0");
+      handle.setAttribute("data-orientation", orientation);
+      setDataState(handle, "idle");
+      handles.push(handle);
+      const STEP = 5;
+      handle.addEventListener("keydown", (event) => {
+        const sizes = [...state.sizes.peek()];
+        const leftIdx = handleIndex;
+        const rightIdx = handleIndex + 1;
+        const leftPanel = panels[leftIdx];
+        const rightPanel = panels[rightIdx];
+        if (!leftPanel || !rightPanel)
+          return;
+        let leftSize = sizes[leftIdx] ?? 0;
+        let rightSize = sizes[rightIdx] ?? 0;
+        const growKey = orientation === "horizontal" ? Keys.ArrowRight : Keys.ArrowDown;
+        const shrinkKey = orientation === "horizontal" ? Keys.ArrowLeft : Keys.ArrowUp;
+        if (isKey(event, growKey)) {
+          event.preventDefault();
+          const delta = Math.min(STEP, rightSize - rightPanel.minSize, leftPanel.maxSize - leftSize);
+          leftSize += delta;
+          rightSize -= delta;
+        } else if (isKey(event, shrinkKey)) {
+          event.preventDefault();
+          const delta = Math.min(STEP, leftSize - leftPanel.minSize, rightPanel.maxSize - rightSize);
+          leftSize -= delta;
+          rightSize += delta;
+        } else if (isKey(event, Keys.Home)) {
+          event.preventDefault();
+          const delta = leftSize - leftPanel.minSize;
+          leftSize -= delta;
+          rightSize += delta;
+        } else if (isKey(event, Keys.End)) {
+          event.preventDefault();
+          const delta = rightSize - rightPanel.minSize;
+          leftSize += delta;
+          rightSize -= delta;
+        } else {
+          return;
+        }
+        sizes[leftIdx] = leftSize;
+        sizes[rightIdx] = rightSize;
+        updateSizes(sizes);
+      });
+      handle.addEventListener("pointerdown", (event) => {
+        event.preventDefault();
+        handle.setPointerCapture(event.pointerId);
+        setDataState(handle, "dragging");
+        const startPos = orientation === "horizontal" ? event.clientX : event.clientY;
+        const rootSize = orientation === "horizontal" ? root.offsetWidth : root.offsetHeight;
+        const startSizes = [...state.sizes.peek()];
+        function onMove(e) {
+          const currentPos = orientation === "horizontal" ? e.clientX : e.clientY;
+          const delta = (currentPos - startPos) / rootSize * 100;
+          const sizes = [...startSizes];
+          const leftIdx = handleIndex;
+          const rightIdx = handleIndex + 1;
+          const leftPanel = panels[leftIdx];
+          const rightPanel = panels[rightIdx];
+          if (!leftPanel || !rightPanel)
+            return;
+          let newLeft = (startSizes[leftIdx] ?? 0) + delta;
+          let newRight = (startSizes[rightIdx] ?? 0) - delta;
+          newLeft = Math.max(leftPanel.minSize, Math.min(leftPanel.maxSize, newLeft));
+          newRight = Math.max(rightPanel.minSize, Math.min(rightPanel.maxSize, newRight));
+          sizes[leftIdx] = newLeft;
+          sizes[rightIdx] = newRight;
+          updateSizes(sizes);
+        }
+        function onUp(e) {
+          handle.releasePointerCapture(e.pointerId);
+          setDataState(handle, "idle");
+          handle.removeEventListener("pointermove", onMove);
+          handle.removeEventListener("pointerup", onUp);
+        }
+        handle.addEventListener("pointermove", onMove);
+        handle.addEventListener("pointerup", onUp);
+      });
+      root.appendChild(handle);
+      return handle;
+    }
+    return { root, state, Panel, Handle };
+  }
+};
+
+export { ResizablePanel };

package/dist/shared/chunk-qpfqyrc5.js

@@ -0,0 +1,19 @@
+import {
+  Menu
+} from "./chunk-tvpgeswh.js";
+
+// src/dropdown-menu/dropdown-menu.ts
+var DropdownMenu = {
+  Root(options = {}) {
+    const { positioning, ...rest } = options;
+    return Menu.Root({
+      ...rest,
+      positioning: {
+        placement: "bottom-start",
+        ...positioning
+      }
+    });
+  }
+};
+
+export { DropdownMenu };

package/dist/shared/chunk-qq0e0gym.js

@@ -0,0 +1,73 @@
+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-t1vkvsz2.js

@@ -0,0 +1,175 @@
+import {
+  focusFirst,
+  saveFocus,
+  trapFocus
+} from "./chunk-e2v1c9ex.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vvjyx7fe.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/sheet/sheet.tsx
+import { __element, __on } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function SheetRoot(options = {}) {
+  const { side = "right", defaultOpen = false, onOpenChange } = options;
+  const ids = linkedIds("sheet");
+  const state = { open: signal(defaultOpen) };
+  let restoreFocus = null;
+  let removeTrap = null;
+  function show() {
+    state.open.value = true;
+    setExpanded(trigger, true);
+    setHidden(overlay, false);
+    setHidden(content, false);
+    setDataState(trigger, "open");
+    setDataState(overlay, "open");
+    setDataState(content, "open");
+    restoreFocus = saveFocus();
+    removeTrap = trapFocus(content);
+    queueMicrotask(() => focusFirst(content));
+    onOpenChange?.(true);
+  }
+  function hide() {
+    state.open.value = false;
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    setDataState(overlay, "closed");
+    setDataState(content, "closed");
+    setHiddenAnimated(overlay, true);
+    setHiddenAnimated(content, true);
+    removeTrap?.();
+    removeTrap = null;
+    restoreFocus?.();
+    restoreFocus = null;
+    onOpenChange?.(false);
+  }
+  const SWIPE_THRESHOLD = 50;
+  let startX = 0;
+  let startY = 0;
+  function handlePointerDown(e) {
+    startX = e.clientX;
+    startY = e.clientY;
+  }
+  function handlePointerUp(e) {
+    if (!state.open.peek())
+      return;
+    const deltaX = e.clientX - startX;
+    const deltaY = e.clientY - startY;
+    const shouldDismiss = side === "right" && deltaX >= SWIPE_THRESHOLD || side === "left" && deltaX <= -SWIPE_THRESHOLD || side === "bottom" && deltaY >= SWIPE_THRESHOLD || side === "top" && deltaY <= -SWIPE_THRESHOLD;
+    if (shouldDismiss) {
+      hide();
+    }
+  }
+  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);
+    }
+    {
+      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", () => {
+      state.open.peek() ? hide() : show();
+    });
+    return __el0;
+  })();
+  const overlay = (() => {
+    const __el1 = __element("div");
+    __el1.setAttribute("data-sheet-overlay", "");
+    {
+      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, "click", () => hide());
+    return __el1;
+  })();
+  const content = (() => {
+    const __el2 = __element("div");
+    __el2.setAttribute("role", "dialog");
+    __el2.setAttribute("aria-modal", "true");
+    {
+      const __v = ids.contentId;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = side;
+      if (__v != null && __v !== false)
+        __el2.setAttribute("data-side", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "false" : "true";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("aria-hidden", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "open" : "closed";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    {
+      const __v = defaultOpen ? "" : "display: none";
+      if (__v != null && __v !== false)
+        __el2.setAttribute("style", __v === true ? "" : __v);
+    }
+    __on(__el2, "keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        event.stopPropagation();
+        hide();
+      }
+    });
+    __on(__el2, "pointerdown", handlePointerDown);
+    __on(__el2, "pointerup", handlePointerUp);
+    return __el2;
+  })();
+  const close = (() => {
+    const __el3 = __element("button");
+    __el3.setAttribute("type", "button");
+    __el3.setAttribute("aria-label", "Close");
+    __on(__el3, "click", () => hide());
+    return __el3;
+  })();
+  return { trigger, overlay, content, close, state, show, hide };
+}
+var Sheet = {
+  Root: SheetRoot
+};
+
+export { Sheet };

package/dist/shared/chunk-tk1k1bet.js

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