@zag-js/splitter 0.2.12 → 0.2.14

package/dist/{chunk-AO5KCFS2.mjs → chunk-63NJ553U.mjs}

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-QY3R66FZ.mjs";
+} from "./chunk-BSW3DTW4.mjs";
 import {
   clamp,
   getHandleBounds,
@@ -11,259 +11,9 @@ import {
 
 // src/splitter.machine.ts
 import { createMachine } from "@zag-js/core";
-
-// ../../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn?.(...a);
-  });
-};
-
-// ../../utilities/core/src/guard.ts
-var isArray = (v) => Array.isArray(v);
-var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-
-// ../../utilities/core/src/object.ts
-function compact(obj) {
-  if (obj === void 0)
-    return obj;
-  return Object.fromEntries(
-    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
-  );
-}
-
-// ../../utilities/dom/src/platform.ts
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  const agent = navigator.userAgentData;
-  return agent?.platform ?? navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
-var isMac = () => pt(/^Mac/) && !isTouchDevice;
-var isApple = () => pt(/mac|iphone|ipad|ipod/i);
-var isIos = () => isApple() && !isMac();
-
-// ../../utilities/dom/src/event.ts
-var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
-var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
-var supportsMouseEvent = () => isDom() && window.onmousedown === null;
-var isMouseEvent = (v) => isObject(v) && hasProp(v, "button");
-var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
-var isLeftClick = (v) => v.button === 0;
-
-// ../../utilities/dom/src/get-element-offset.ts
-function getElementOffset(element) {
-  let left = 0;
-  let top = 0;
-  let el = element;
-  if (el.parentNode) {
-    do {
-      left += el.offsetLeft;
-      top += el.offsetTop;
-    } while ((el = el.offsetParent) && el.nodeType < 9);
-    el = element;
-    do {
-      left -= el.scrollLeft;
-      top -= el.scrollTop;
-    } while ((el = el.parentNode) && !/body/i.test(el.nodeName));
-  }
-  return {
-    top,
-    right: innerWidth - left - element.offsetWidth,
-    bottom: innerHeight - top - element.offsetHeight,
-    left
-  };
-}
-
-// ../../utilities/dom/src/get-point-relative-to-element.ts
-function getPointRelativeToNode(point, element) {
-  const offset = getElementOffset(element);
-  const x = point.x - offset.left;
-  const y = point.y - offset.top;
-  return { x, y };
-}
-var clampPercent = (value) => Math.max(0, Math.min(100, value));
-function getPointPercentRelativeToNode(point, element) {
-  const relativePoint = getPointRelativeToNode(point, element);
-  const x = relativePoint.x / element.offsetWidth * 100;
-  const y = relativePoint.y / element.offsetHeight * 100;
-  return { x: clampPercent(x), y: clampPercent(y) };
-}
-function normalizePointValue(point, options) {
-  const { dir = "ltr", orientation = "horizontal" } = options;
-  const { x, y } = point;
-  let result = { x, y };
-  if (orientation === "horizontal" && dir === "rtl") {
-    result = { x: 100 - x, y };
-  }
-  return orientation === "horizontal" ? result.x : result.y;
-}
-
-// ../../utilities/dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
-function extractInfo(event, type = "page") {
-  const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
-  return {
-    point: {
-      x: point[`${type}X`],
-      y: point[`${type}Y`]
-    }
-  };
-}
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
-  };
-}
-function addPointerEvent(target, event, listener, options) {
-  const type = getEventName(event) ?? event;
-  return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
-}
-function wrapHandler(fn, filter = false) {
-  const listener = (event) => {
-    fn(event, extractInfo(event));
-  };
-  return filter ? filterPrimaryPointer(listener) : listener;
-}
-function filterPrimaryPointer(fn) {
-  return (event) => {
-    const win = event.view ?? window;
-    const isMouseEvent2 = event instanceof win.MouseEvent;
-    const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
-    if (isPrimary)
-      fn(event);
-  };
-}
-var mouseEventNames = {
-  pointerdown: "mousedown",
-  pointermove: "mousemove",
-  pointerup: "mouseup",
-  pointercancel: "mousecancel",
-  pointerover: "mouseover",
-  pointerout: "mouseout",
-  pointerenter: "mouseenter",
-  pointerleave: "mouseleave"
-};
-var touchEventNames = {
-  pointerdown: "touchstart",
-  pointermove: "touchmove",
-  pointerup: "touchend",
-  pointercancel: "touchcancel"
-};
-function getEventName(evt) {
-  if (supportsPointerEvent())
-    return evt;
-  if (supportsTouchEvent())
-    return touchEventNames[evt];
-  if (supportsMouseEvent())
-    return mouseEventNames[evt];
-  return evt;
-}
-
-// ../../utilities/dom/src/next-tick.ts
-function nextTick(fn) {
-  const set = /* @__PURE__ */ new Set();
-  function raf2(fn2) {
-    const id = globalThis.requestAnimationFrame(fn2);
-    set.add(() => globalThis.cancelAnimationFrame(id));
-  }
-  raf2(() => raf2(fn));
-  return function cleanup() {
-    set.forEach(function(fn2) {
-      fn2();
-    });
-  };
-}
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
-  };
-}
-
-// ../../utilities/dom/src/text-selection.ts
-var state = "default";
-var savedUserSelect = "";
-var modifiedElementMap = /* @__PURE__ */ new WeakMap();
-function disableTextSelection({ target, doc } = {}) {
-  const _document = doc ?? document;
-  if (isIos()) {
-    if (state === "default") {
-      savedUserSelect = _document.documentElement.style.webkitUserSelect;
-      _document.documentElement.style.webkitUserSelect = "none";
-    }
-    state = "disabled";
-  } else if (target) {
-    modifiedElementMap.set(target, target.style.userSelect);
-    target.style.userSelect = "none";
-  }
-  return () => restoreTextSelection({ target, doc: _document });
-}
-function restoreTextSelection({ target, doc } = {}) {
-  const _document = doc ?? document;
-  if (isIos()) {
-    if (state !== "disabled")
-      return;
-    state = "restoring";
-    setTimeout(() => {
-      nextTick(() => {
-        if (state === "restoring") {
-          if (_document.documentElement.style.webkitUserSelect === "none") {
-            _document.documentElement.style.webkitUserSelect = savedUserSelect || "";
-          }
-          savedUserSelect = "";
-          state = "default";
-        }
-      });
-    }, 300);
-  } else {
-    if (target && modifiedElementMap.has(target)) {
-      let targetOldUserSelect = modifiedElementMap.get(target);
-      if (target.style.userSelect === "none") {
-        target.style.userSelect = targetOldUserSelect ?? "";
-      }
-      if (target.getAttribute("style") === "") {
-        target.removeAttribute("style");
-      }
-      modifiedElementMap.delete(target);
-    }
-  }
-}
-
-// ../../utilities/dom/src/pointer-event.ts
-var THRESHOLD = 5;
-function trackPointerMove(doc, opts) {
-  const { onPointerMove, onPointerUp } = opts;
-  const handlePointerMove = (event, info) => {
-    const { point: p } = info;
-    const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
-    if (distance < THRESHOLD)
-      return;
-    if (isMouseEvent(event) && isLeftClick(event)) {
-      onPointerUp();
-      return;
-    }
-    onPointerMove(info, event);
-  };
-  return callAll(
-    addPointerEvent(doc, "pointermove", handlePointerMove, false),
-    addPointerEvent(doc, "pointerup", onPointerUp, false),
-    addPointerEvent(doc, "pointercancel", onPointerUp, false),
-    addPointerEvent(doc, "contextmenu", onPointerUp, false),
-    disableTextSelection({ doc })
-  );
-}
-
-// src/splitter.machine.ts
+import { getRelativePointPercent, trackPointerMove } from "@zag-js/dom-event";
+import { raf } from "@zag-js/dom-query";
+import { compact } from "@zag-js/utils";
 function machine(userContext) {
   const ctx = compact(userContext);
   return createMachine(
@@ -521,8 +271,7 @@ function machine(userContext) {
           const rootEl = dom.getRootEl(ctx2);
           if (!panels || !rootEl || !bounds)
             return;
-          const percent = getPointPercentRelativeToNode(evt.point, rootEl);
-          let pointValue = normalizePointValue(percent, ctx2);
+          let pointValue = getRelativePointPercent(evt.point, rootEl).normalize(ctx2);
           ctx2.activeResizeState = {
             isAtMin: pointValue < bounds.min,
             isAtMax: pointValue > bounds.max

package/dist/{chunk-QY3R66FZ.mjs → chunk-BSW3DTW4.mjs}

@@ -1,38 +1,6 @@
-// ../../utilities/dom/src/query.ts
-function isDocument(el) {
-  return el.nodeType === Node.DOCUMENT_NODE;
-}
-function isWindow(value) {
-  return value?.toString() === "[object Window]";
-}
-function getDocument(el) {
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return el?.ownerDocument ?? document;
-}
-function defineDomHelpers(helpers) {
-  const dom2 = {
-    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
-    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
-// ../../utilities/dom/src/nodelist.ts
-function queryAll(root, selector) {
-  return Array.from(root?.querySelectorAll(selector) ?? []);
-}
-
 // src/splitter.dom.ts
-var dom = defineDomHelpers({
+import { createScope, queryAll } from "@zag-js/dom-query";
+var dom = createScope({
   getRootId: (ctx) => `splitter:${ctx.id}`,
   getResizeTriggerId: (ctx, id) => `splitter:${ctx.id}:splitter:${id}`,
   getToggleTriggerId: (ctx) => `splitter:${ctx.id}:toggle-btn`,

package/dist/{chunk-JYQICU6Y.mjs → chunk-CQT32RFW.mjs}

@@ -3,73 +3,72 @@ import {
 } from "./chunk-HPRMFGOY.mjs";
 import {
   dom
-} from "./chunk-QY3R66FZ.mjs";
+} from "./chunk-BSW3DTW4.mjs";
 import {
   getHandleBounds
 } from "./chunk-MV44GBQY.mjs";
 
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-
-// ../../utilities/dom/src/keyboard-event.ts
-var rtlKeyMap = {
-  ArrowLeft: "ArrowRight",
-  ArrowRight: "ArrowLeft"
-};
-var sameKeyMap = {
-  Up: "ArrowUp",
-  Down: "ArrowDown",
-  Esc: "Escape",
-  " ": "Space",
-  ",": "Comma",
-  Left: "ArrowLeft",
-  Right: "ArrowRight"
-};
-function getEventKey(event, options = {}) {
-  const { dir = "ltr", orientation = "horizontal" } = options;
-  let { key } = event;
-  key = sameKeyMap[key] ?? key;
-  const isRtl = dir === "rtl" && orientation === "horizontal";
-  if (isRtl && key in rtlKeyMap) {
-    key = rtlKeyMap[key];
-  }
-  return key;
-}
-var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
-var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
-function getEventStep(event) {
-  if (event.ctrlKey || event.metaKey) {
-    return 0.1;
-  } else {
-    const isPageKey = PAGE_KEYS.has(event.key);
-    const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
-    return isSkipKey ? 10 : 1;
-  }
-}
-
 // src/splitter.connect.ts
+import { getEventKey, getEventStep } from "@zag-js/dom-event";
+import { dataAttr } from "@zag-js/dom-query";
 function connect(state, send, normalize) {
   const isHorizontal = state.context.isHorizontal;
   const isFocused = state.hasTag("focus");
   const isDragging = state.matches("dragging");
   const api = {
+    /**
+     * Whether the splitter is focused.
+     */
     isFocused,
+    /**
+     * Whether the splitter is being dragged.
+     */
     isDragging,
+    /**
+     *  The bounds of the currently dragged splitter handle.
+     */
     bounds: getHandleBounds(state.context),
+    /**
+     * Function to collapse a panel.
+     */
     collapse(id) {
       send({ type: "COLLAPSE", id });
     },
+    /**
+     * Function to expand a panel.
+     */
     expand(id) {
       send({ type: "EXPAND", id });
     },
+    /**
+     * Function to toggle a panel between collapsed and expanded.
+     */
     toggle(id) {
       send({ type: "TOGGLE", id });
     },
+    /**
+     * Function to set the size of a panel.
+     */
     setSize(id, size) {
       send({ type: "SET_SIZE", id, size });
     },
+    /**
+     * Returns the state details for a resize trigger.
+     */
+    getResizeTriggerState(props) {
+      const { id, disabled } = props;
+      const ids = id.split(":");
+      const panelIds = ids.map((id2) => dom.getPanelId(state.context, id2));
+      const panels = getHandleBounds(state.context, id);
+      return {
+        isDisabled: !!disabled,
+        isFocused: state.context.activeResizeId === id && isFocused,
+        panelIds,
+        min: panels?.min,
+        max: panels?.max,
+        value: 0
+      };
+    },
     rootProps: normalize.element({
       ...parts.root.attrs,
       "data-orientation": state.context.orientation,
@@ -93,20 +92,14 @@ function connect(state, send, normalize) {
         style: dom.getPanelStyle(state.context, id)
       });
     },
-    getResizeTriggerState(props) {
-      const { id, disabled } = props;
-      const ids = id.split(":");
-      const panelIds = ids.map((id2) => dom.getPanelId(state.context, id2));
-      const panels = getHandleBounds(state.context, id);
-      return {
-        isDisabled: !!disabled,
-        isFocused: state.context.activeResizeId === id && isFocused,
-        panelIds,
-        min: panels?.min,
-        max: panels?.max,
-        value: 0
-      };
-    },
+    // toggleTriggerProps: normalize.element({
+    //   ...parts.toggleButton.attrs,
+    //   id: dom.getToggleButtonId(state.context),
+    //   "aria-label": state.context.isAtMin ? "Expand Primary Pane" : "Collapse Primary Pane",
+    //   onClick() {
+    //     send("TOGGLE")
+    //   },
+    // }),
     getResizeTriggerProps(props) {
       const { id, disabled, step = 1 } = props;
       const triggerState = api.getResizeTriggerState(props);