@vertz/ui-primitives 0.2.21 → 0.2.23

package/dist/shared/chunk-e3h0ddmx.js

@@ -0,0 +1,168 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setValueRange
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/slider/slider.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function SliderRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let clamp = function(val) {
+      return Math.min(max, Math.max(min, val));
+    }, updatePosition = function(pct2) {
+      thumb.style.left = `${pct2}%`;
+      fill.style.width = `${pct2}%`;
+    }, setValue = function(val) {
+      if (state.disabled.peek())
+        return;
+      const clamped = clamp(val);
+      state.value.value = clamped;
+      setValueRange(thumb, clamped, min, max);
+      const pct2 = (clamped - min) / (max - min) * 100;
+      updatePosition(pct2);
+      setDataState(root, "active");
+      onValueChange?.(clamped);
+    }, valueFromPointer = function(event) {
+      const rect = track.getBoundingClientRect();
+      const pct2 = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+      const raw = min + pct2 * (max - min);
+      return Math.round(raw / step) * step;
+    };
+    const {
+      defaultValue = 0,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled = false,
+      onValueChange,
+      ...attrs
+    } = options;
+    const state = {
+      value: signal(defaultValue),
+      disabled: signal(disabled)
+    };
+    const fill = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("data-part", "fill");
+      {
+        const __v = { position: "absolute", height: "100%", borderRadius: "inherit" };
+        if (__v != null && __v !== false)
+          __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      return __el0;
+    })();
+    const thumb = (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("role", "slider");
+      {
+        const __v = disabled ? "-1" : "0";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("tabindex", __v === true ? "" : __v);
+      }
+      __el1.setAttribute("data-part", "thumb");
+      {
+        const __v = disabled ? "true" : undefined;
+        if (__v != null && __v !== false)
+          __el1.setAttribute("aria-disabled", __v === true ? "" : __v);
+      }
+      {
+        const __v = { position: "absolute", transform: "translate(-50%, -50%)" };
+        if (__v != null && __v !== false)
+          __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __on(__el1, "keydown", (event) => {
+        if (state.disabled.peek())
+          return;
+        const current = state.value.peek();
+        if (isKey(event, Keys.ArrowRight, Keys.ArrowUp)) {
+          event.preventDefault();
+          setValue(current + step);
+        } else if (isKey(event, Keys.ArrowLeft, Keys.ArrowDown)) {
+          event.preventDefault();
+          setValue(current - step);
+        } else if (isKey(event, Keys.Home)) {
+          event.preventDefault();
+          setValue(min);
+        } else if (isKey(event, Keys.End)) {
+          event.preventDefault();
+          setValue(max);
+        }
+      });
+      return __el1;
+    })();
+    setValueRange(thumb, defaultValue, min, max);
+    const track = (() => {
+      const __el2 = __element("div");
+      __el2.setAttribute("data-part", "track");
+      {
+        const __v = { position: "relative" };
+        if (__v != null && __v !== false)
+          __el2.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __enterChildren(__el2);
+      __insert(__el2, fill);
+      __insert(__el2, thumb);
+      __exitChildren();
+      return __el2;
+    })();
+    const root = (() => {
+      const __el3 = __element("div");
+      {
+        const __v = uniqueId("slider");
+        if (__v != null && __v !== false)
+          __el3.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = disabled ? "disabled" : "active";
+        if (__v != null && __v !== false)
+          __el3.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __on(__el3, "pointerdown", (event) => {
+        if (state.disabled.peek())
+          return;
+        event.preventDefault();
+        setValue(valueFromPointer(event));
+        thumb.focus();
+        function onMove(e) {
+          setValue(valueFromPointer(e));
+        }
+        function onUp() {
+          document.removeEventListener("pointermove", onMove);
+          document.removeEventListener("pointerup", onUp);
+        }
+        document.addEventListener("pointermove", onMove);
+        document.addEventListener("pointerup", onUp);
+      });
+      __enterChildren(__el3);
+      __insert(__el3, track);
+      __exitChildren();
+      return __el3;
+    })();
+    const pct = (defaultValue - min) / (max - min) * 100;
+    updatePosition(pct);
+    applyAttrs(root, attrs);
+    const __mfResult0 = { root, thumb, track, state };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Slider = {
+  Root: SliderRoot
+};
+
+export { Slider };

package/dist/shared/chunk-f2vx4tpw.js

@@ -0,0 +1,168 @@
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/scroll-area/scroll-area.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function ScrollAreaRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let syncThumbY = function() {
+      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;
+    }, syncThumbX = function() {
+      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;
+    }, update = function() {
+      syncThumbY();
+      syncThumbX();
+    }, handleViewportScroll = function() {
+      if (orientation === "vertical" || orientation === "both")
+        syncThumbY();
+      if (orientation === "horizontal" || orientation === "both")
+        syncThumbX();
+    }, handleThumbYDown = function(e) {
+      isDraggingY = true;
+      startY = e.clientY;
+      startScrollTop = viewport.scrollTop;
+      thumbY.setPointerCapture(e.pointerId);
+      e.preventDefault();
+    }, handleThumbYMove = function(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;
+      }
+    }, handleThumbYUp = function(e) {
+      isDraggingY = false;
+      thumbY.releasePointerCapture(e.pointerId);
+    }, handleThumbXDown = function(e) {
+      isDraggingX = true;
+      startX = e.clientX;
+      startScrollLeft = viewport.scrollLeft;
+      thumbX.setPointerCapture(e.pointerId);
+      e.preventDefault();
+    }, handleThumbXMove = function(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;
+      }
+    }, handleThumbXUp = function(e) {
+      isDraggingX = false;
+      thumbX.releasePointerCapture(e.pointerId);
+    };
+    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;
+    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");
+      {
+        const __v = { overflow: "scroll" };
+        if (__v != null && __v !== false)
+          __el5.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __on(__el5, "scroll", handleViewportScroll);
+      __enterChildren(__el5);
+      __insert(__el5, content);
+      __exitChildren();
+      return __el5;
+    })();
+    viewport.style.scrollbarWidth = "none";
+    const root = (() => {
+      const __el6 = __element("div");
+      {
+        const __v = { position: "relative", overflow: "hidden" };
+        if (__v != null && __v !== false)
+          __el6.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __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);
+    const __mfResult0 = { root, viewport, content, scrollbarY, thumbY, scrollbarX, thumbX, state, update };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ScrollArea = {
+  Root: ScrollAreaRoot
+};
+
+export { ScrollArea };

package/dist/shared/chunk-h3v10x04.js

@@ -0,0 +1,271 @@
+import {
+  createDismiss
+} from "./chunk-a6wp8c32.js";
+import {
+  createFloatingPosition
+} from "./chunk-0mcr52hc.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/menu/menu.tsx
+import { __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __insert, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function MenuRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let handleClickOutside = function(event) {
+      const target = event.target;
+      if (!trigger.contains(target) && !content.contains(target)) {
+        close();
+      }
+    }, open = function(activateFirst = false) {
+      state.open.value = true;
+      setExpanded(trigger, true);
+      setHidden(content, false);
+      setDataState(trigger, "open");
+      setDataState(content, "open");
+      onOpenChange?.(true);
+      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();
+      }
+    }, close = function() {
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setDataState(trigger, "closed");
+      setDataState(content, "closed");
+      setHiddenAnimated(content, true);
+      onOpenChange?.(false);
+      if (positioning) {
+        floatingCleanup?.();
+        floatingCleanup = null;
+        dismissCleanup?.();
+        dismissCleanup = null;
+      } else {
+        document.removeEventListener("mousedown", handleClickOutside);
+      }
+      trigger.focus();
+    }, updateActiveItem = function(index) {
+      for (let i = 0;i < items.length; i++) {
+        items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
+      }
+    }, createItem = function(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;
+    }, Item = function(value, label) {
+      return createItem(value, label);
+    }, Group = function(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)
+      };
+    }, Separator = function() {
+      const hr = (() => {
+        const __el4 = __element("hr");
+        __el4.setAttribute("role", "separator");
+        return __el4;
+      })();
+      content.appendChild(hr);
+      return hr;
+    }, Label = function(text) {
+      const el = (() => {
+        const __el5 = __element("div");
+        __el5.setAttribute("role", "none");
+        __enterChildren(__el5);
+        __insert(__el5, text);
+        __exitChildren();
+        return __el5;
+      })();
+      content.appendChild(el);
+      return el;
+    };
+    const { onSelect, onOpenChange, positioning, ...attrs } = options;
+    const ids = linkedIds("menu");
+    const state = {
+      open: signal(false),
+      activeIndex: signal(-1)
+    };
+    const items = [];
+    let floatingCleanup = null;
+    let dismissCleanup = null;
+    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");
+      {
+        const __v = { display: "none" };
+        if (__v != null && __v !== false)
+          __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __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;
+    })();
+    applyAttrs(trigger, attrs);
+    const __mfResult0 = { trigger, content, state, Item, Group, Separator, Label };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Menu = {
+  Root: MenuRoot
+};
+
+export { Menu };

package/dist/shared/chunk-hdvdfd1c.js

@@ -0,0 +1,96 @@
+import {
+  setDataState
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/progress/progress.tsx
+import { __append, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { ref, signal } from "@vertz/ui";
+function dataStateFor(pct) {
+  if (pct >= 100)
+    return "complete";
+  if (pct > 0)
+    return "loading";
+  return "idle";
+}
+function ProgressBar(defaultValue, min, max, initialPct, indicatorRef) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __el0.setAttribute("role", "progressbar");
+      {
+        const __v = uniqueId("progress");
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = String(defaultValue);
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-valuenow", __v === true ? "" : __v);
+      }
+      {
+        const __v = String(min);
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-valuemin", __v === true ? "" : __v);
+      }
+      {
+        const __v = String(max);
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-valuemax", __v === true ? "" : __v);
+      }
+      {
+        const __v = dataStateFor(initialPct);
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __enterChildren(__el0);
+      __append(__el0, (() => {
+        const __el1 = __element("div");
+        indicatorRef.current = __el1;
+        __el1.setAttribute("data-part", "indicator");
+        {
+          const __v = { width: `${initialPct}%` };
+          if (__v != null && __v !== false)
+            __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+        }
+        return __el1;
+      })());
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ProgressRoot(options = {}) {
+  const { defaultValue = 0, min = 0, max = 100, ...attrs } = options;
+  const state = { value: signal(defaultValue) };
+  const indicatorRef = ref();
+  const initialPct = (defaultValue - min) / (max - min) * 100;
+  const root = ProgressBar(defaultValue, min, max, initialPct, indicatorRef);
+  const indicator = indicatorRef.current;
+  applyAttrs(root, attrs);
+  function setValue(val) {
+    const clamped = Math.min(max, Math.max(min, val));
+    state.value.value = clamped;
+    root.setAttribute("aria-valuenow", String(clamped));
+    const pct = (clamped - min) / (max - min) * 100;
+    indicator.style.width = `${pct}%`;
+    setDataState(root, dataStateFor(pct));
+  }
+  return { root, indicator, state, setValue };
+}
+var Progress = {
+  Root: ProgressRoot
+};
+
+export { Progress };