@zag-js/slider 0.1.8 → 0.1.9

package/dist/index.js

@@ -48,10 +48,19 @@ var __pow = Math.pow;
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
-var isDom = () => typeof window !== "undefined";
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
+};
 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);
+var isDom = () => typeof window !== "undefined";
 function getPlatform() {
   var _a;
   const agent = navigator.userAgentData;
@@ -62,103 +71,7 @@ var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
 var isMac = () => pt(/^Mac/) && !isTouchDevice;
 var isApple = () => pt(/mac|iphone|ipad|ipod/i);
 var isIos = () => isApple() && !isMac();
-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;
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
-};
-var noop = () => {
-};
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-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 == null ? void 0 : node.addEventListener(eventName, handler, options);
-  return () => {
-    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
-  };
-}
-function addPointerEvent(target, event, listener, options) {
-  var _a;
-  const type = (_a = getEventName(event)) != null ? _a : 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) => {
-    var _a;
-    const win = (_a = event.view) != null ? _a : 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;
-}
-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);
-  };
-}
-function getOwnerWindow(el) {
+function getWindow(el) {
   var _a;
   return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
 }
@@ -166,9 +79,16 @@ function getNativeEvent(e) {
   var _a;
   return (_a = e.nativeEvent) != null ? _a : e;
 }
+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;
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 function observeAttributes(node, attributes, fn) {
   if (!node)
-    return noop;
+    return;
   const attrs = Array.isArray(attributes) ? attributes : [attributes];
   const win = node.ownerDocument.defaultView || window;
   const obs = new win.MutationObserver((changes) => {
@@ -206,20 +126,57 @@ function trackFieldsetDisabled(el, callback) {
   callback(fieldset.disabled);
   return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
 }
+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
+  };
+}
+var fallback = {
+  pageX: 0,
+  pageY: 0,
+  clientX: 0,
+  clientY: 0
+};
+function getEventPoint(event, type = "page") {
+  var _a, _b;
+  const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
+  return { x: point[`${type}X`], y: point[`${type}Y`] };
+}
+function getPointRelativeToNode(point, element) {
+  const offset = getElementOffset(element);
+  const x = point.x - offset.left;
+  const y = point.y - offset.top;
+  return { x, y };
+}
 function getDescriptor(el, options) {
   var _a;
   const { type, property } = options;
-  const win = getOwnerWindow(el);
-  const _type = type === "input" ? "HTMLInputElement" : "HTMLTextAreaElement";
-  const proto = win[_type].prototype;
+  const proto = getWindow(el)[type].prototype;
   return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
 }
 function dispatchInputValueEvent(el, value) {
   var _a;
-  const win = getOwnerWindow(el);
+  const win = getWindow(el);
   if (!(el instanceof win.HTMLInputElement))
     return;
-  const desc = getDescriptor(el, { type: "input", property: "value" });
+  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
   (_a = desc.set) == null ? void 0 : _a.call(el, value);
   const event = new win.Event("input", { bubbles: true });
   el.dispatchEvent(event);
@@ -261,6 +218,89 @@ function getEventStep(event) {
     return isSkipKey ? 10 : 1;
   }
 }
+var isRef = (v) => hasProp(v, "current");
+var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
+function extractInfo(event, type = "page") {
+  const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback2 : 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 == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
+function addPointerEvent(target, event, listener, options) {
+  var _a;
+  const type = (_a = getEventName(event)) != null ? _a : 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) => {
+    var _a;
+    const win = (_a = event.view) != null ? _a : 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;
+}
+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);
+  };
+}
 var state = "default";
 var savedUserSelect = "";
 var modifiedElementMap = /* @__PURE__ */ new WeakMap();
@@ -322,26 +362,7 @@ function trackPointerMove(opts) {
     }
     onPointerMove(info, event);
   };
-  return pipe(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
-}
-
-// ../../utilities/rect/dist/index.mjs
-var isArray2 = (v) => Array.isArray(v);
-var isObject2 = (v) => !(v == null || typeof v !== "object" || isArray2(v));
-var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-var isTouchEvent2 = (v) => isObject2(v) && hasProp2(v, "touches");
-var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
-function getEventPoint(e, t = "page") {
-  const p = isTouchEvent2(e) ? e.touches[0] || e.changedTouches[0] || fallback2 : e;
-  return { x: p[`${t}X`], y: p[`${t}Y`] };
-}
-function relativeToNode(p, el) {
-  const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
-  const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop;
-  return {
-    point: { x: dx, y: dy },
-    progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight }
-  };
+  return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
 }
 
 // ../../utilities/number/dist/index.mjs
@@ -577,15 +598,17 @@ var dom = __spreadProps(__spreadValues({}, styles), {
   getControlEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getControlId(ctx)),
   getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
   getValueFromPoint(ctx, point) {
-    const control = dom.getControlEl(ctx);
-    if (!control)
+    const el = dom.getControlEl(ctx);
+    if (!el)
       return;
-    const { progress } = relativeToNode(point, control);
+    const relativePoint = getPointRelativeToNode(point, el);
+    const percentX = relativePoint.x / el.offsetWidth;
+    const percentY = relativePoint.y / el.offsetHeight;
     let percent;
     if (ctx.isHorizontal) {
-      percent = ctx.isRtl ? 1 - progress.x : progress.x;
+      percent = ctx.isRtl ? 1 - percentX : percentX;
     } else {
-      percent = 1 - progress.y;
+      percent = 1 - percentY;
     }
     return utils.fromPercent(ctx, percent);
   },
@@ -597,22 +620,8 @@ var dom = __spreadProps(__spreadValues({}, styles), {
   }
 });
 
-// ../../types/dist/index.mjs
-function createNormalizer(fn) {
-  return new Proxy({}, {
-    get() {
-      return fn;
-    }
-  });
-}
-var normalizeProp = createNormalizer((v) => v);
-
-// ../../utilities/core/dist/index.mjs
-var isLeftClick2 = (v) => v.button === 0;
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-
 // src/slider.connect.ts
-function connect(state2, send, normalize = normalizeProp) {
+function connect(state2, send, normalize) {
   var _a, _b;
   const ariaLabel = state2.context["aria-label"];
   const ariaLabelledBy = state2.context["aria-labelledby"];
@@ -789,7 +798,7 @@ function connect(state2, send, normalize = normalizeProp) {
         if (!isInteractive)
           return;
         const evt = getNativeEvent(event);
-        if (!isLeftClick2(evt) || isModifiedEvent(evt))
+        if (!isLeftClick(evt) || isModifiedEvent(evt))
           return;
         const point = getEventPoint(evt);
         send({ type: "POINTER_DOWN", point });

package/dist/index.mjs

@@ -1,4 +1,3 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -24,10 +23,19 @@ var __pow = Math.pow;
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
-var isDom = () => typeof window !== "undefined";
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
+};
 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);
+var isDom = () => typeof window !== "undefined";
 function getPlatform() {
   var _a;
   const agent = navigator.userAgentData;
@@ -38,103 +46,7 @@ var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
 var isMac = () => pt(/^Mac/) && !isTouchDevice;
 var isApple = () => pt(/mac|iphone|ipad|ipod/i);
 var isIos = () => isApple() && !isMac();
-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;
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
-};
-var noop = () => {
-};
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-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 == null ? void 0 : node.addEventListener(eventName, handler, options);
-  return () => {
-    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
-  };
-}
-function addPointerEvent(target, event, listener, options) {
-  var _a;
-  const type = (_a = getEventName(event)) != null ? _a : 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) => {
-    var _a;
-    const win = (_a = event.view) != null ? _a : 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;
-}
-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);
-  };
-}
-function getOwnerWindow(el) {
+function getWindow(el) {
   var _a;
   return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
 }
@@ -142,9 +54,16 @@ function getNativeEvent(e) {
   var _a;
   return (_a = e.nativeEvent) != null ? _a : e;
 }
+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;
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 function observeAttributes(node, attributes, fn) {
   if (!node)
-    return noop;
+    return;
   const attrs = Array.isArray(attributes) ? attributes : [attributes];
   const win = node.ownerDocument.defaultView || window;
   const obs = new win.MutationObserver((changes) => {
@@ -182,20 +101,57 @@ function trackFieldsetDisabled(el, callback) {
   callback(fieldset.disabled);
   return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
 }
+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
+  };
+}
+var fallback = {
+  pageX: 0,
+  pageY: 0,
+  clientX: 0,
+  clientY: 0
+};
+function getEventPoint(event, type = "page") {
+  var _a, _b;
+  const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
+  return { x: point[`${type}X`], y: point[`${type}Y`] };
+}
+function getPointRelativeToNode(point, element) {
+  const offset = getElementOffset(element);
+  const x = point.x - offset.left;
+  const y = point.y - offset.top;
+  return { x, y };
+}
 function getDescriptor(el, options) {
   var _a;
   const { type, property } = options;
-  const win = getOwnerWindow(el);
-  const _type = type === "input" ? "HTMLInputElement" : "HTMLTextAreaElement";
-  const proto = win[_type].prototype;
+  const proto = getWindow(el)[type].prototype;
   return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
 }
 function dispatchInputValueEvent(el, value) {
   var _a;
-  const win = getOwnerWindow(el);
+  const win = getWindow(el);
   if (!(el instanceof win.HTMLInputElement))
     return;
-  const desc = getDescriptor(el, { type: "input", property: "value" });
+  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
   (_a = desc.set) == null ? void 0 : _a.call(el, value);
   const event = new win.Event("input", { bubbles: true });
   el.dispatchEvent(event);
@@ -237,6 +193,89 @@ function getEventStep(event) {
     return isSkipKey ? 10 : 1;
   }
 }
+var isRef = (v) => hasProp(v, "current");
+var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
+function extractInfo(event, type = "page") {
+  const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback2 : 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 == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
+function addPointerEvent(target, event, listener, options) {
+  var _a;
+  const type = (_a = getEventName(event)) != null ? _a : 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) => {
+    var _a;
+    const win = (_a = event.view) != null ? _a : 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;
+}
+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);
+  };
+}
 var state = "default";
 var savedUserSelect = "";
 var modifiedElementMap = /* @__PURE__ */ new WeakMap();
@@ -298,26 +337,7 @@ function trackPointerMove(opts) {
     }
     onPointerMove(info, event);
   };
-  return pipe(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
-}
-
-// ../../utilities/rect/dist/index.mjs
-var isArray2 = (v) => Array.isArray(v);
-var isObject2 = (v) => !(v == null || typeof v !== "object" || isArray2(v));
-var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-var isTouchEvent2 = (v) => isObject2(v) && hasProp2(v, "touches");
-var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
-function getEventPoint(e, t = "page") {
-  const p = isTouchEvent2(e) ? e.touches[0] || e.changedTouches[0] || fallback2 : e;
-  return { x: p[`${t}X`], y: p[`${t}Y`] };
-}
-function relativeToNode(p, el) {
-  const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
-  const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop;
-  return {
-    point: { x: dx, y: dy },
-    progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight }
-  };
+  return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
 }
 
 // ../../utilities/number/dist/index.mjs
@@ -553,15 +573,17 @@ var dom = __spreadProps(__spreadValues({}, styles), {
   getControlEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getControlId(ctx)),
   getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
   getValueFromPoint(ctx, point) {
-    const control = dom.getControlEl(ctx);
-    if (!control)
+    const el = dom.getControlEl(ctx);
+    if (!el)
       return;
-    const { progress } = relativeToNode(point, control);
+    const relativePoint = getPointRelativeToNode(point, el);
+    const percentX = relativePoint.x / el.offsetWidth;
+    const percentY = relativePoint.y / el.offsetHeight;
     let percent;
     if (ctx.isHorizontal) {
-      percent = ctx.isRtl ? 1 - progress.x : progress.x;
+      percent = ctx.isRtl ? 1 - percentX : percentX;
     } else {
-      percent = 1 - progress.y;
+      percent = 1 - percentY;
     }
     return utils.fromPercent(ctx, percent);
   },
@@ -573,22 +595,8 @@ var dom = __spreadProps(__spreadValues({}, styles), {
   }
 });
 
-// ../../types/dist/index.mjs
-function createNormalizer(fn) {
-  return new Proxy({}, {
-    get() {
-      return fn;
-    }
-  });
-}
-var normalizeProp = createNormalizer((v) => v);
-
-// ../../utilities/core/dist/index.mjs
-var isLeftClick2 = (v) => v.button === 0;
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-
 // src/slider.connect.ts
-function connect(state2, send, normalize = normalizeProp) {
+function connect(state2, send, normalize) {
   var _a, _b;
   const ariaLabel = state2.context["aria-label"];
   const ariaLabelledBy = state2.context["aria-labelledby"];
@@ -765,7 +773,7 @@ function connect(state2, send, normalize = normalizeProp) {
         if (!isInteractive)
           return;
         const evt = getNativeEvent(event);
-        if (!isLeftClick2(evt) || isModifiedEvent(evt))
+        if (!isLeftClick(evt) || isModifiedEvent(evt))
           return;
         const point = getEventPoint(evt);
         send({ type: "POINTER_DOWN", point });

package/dist/slider.connect.d.ts

@@ -1,6 +1,6 @@
-import { PropTypes, ReactPropTypes } from "@zag-js/types";
+import type { NormalizeProps, PropTypes } from "@zag-js/types";
 import type { Send, State } from "./slider.types";
-export declare function connect<T extends PropTypes = ReactPropTypes>(state: State, send: Send, normalize?: import("@zag-js/types").NormalizeProps): {
+export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
     isFocused: boolean;
     isDragging: boolean;
     value: number;

package/dist/slider.dom.d.ts

@@ -1,5 +1,4 @@
-import type { Point } from "@zag-js/rect-utils";
-import type { MachineContext as Ctx } from "./slider.types";
+import type { MachineContext as Ctx, Point } from "./slider.types";
 export declare const dom: {
     getDoc: (ctx: Ctx) => Document;
     getRootNode: (ctx: Ctx) => Document | ShadowRoot;
@@ -19,12 +18,12 @@ export declare const dom: {
     getValueFromPoint(ctx: Ctx, point: Point): number | undefined;
     dispatchChangeEvent(ctx: Ctx): void;
     getThumbOffset: (ctx: import("./slider.types").SharedContext) => string;
-    getControlStyle: () => import("@zag-js/types").Style;
-    getThumbStyle: (ctx: import("./slider.types").SharedContext) => import("@zag-js/types").Style;
-    getRangeStyle: (ctx: Pick<import("./slider.types").SharedContext, "isVertical" | "isRtl">) => import("@zag-js/types").Style;
-    getRootStyle: (ctx: Ctx) => import("@zag-js/types").Style;
-    getMarkerStyle: (ctx: Pick<import("./slider.types").SharedContext, "isHorizontal" | "isRtl">, percent: number) => import("@zag-js/types").Style;
-    getLabelStyle: () => import("@zag-js/types").Style;
-    getTrackStyle: () => import("@zag-js/types").Style;
-    getMarkerGroupStyle: () => import("@zag-js/types").Style;
+    getControlStyle: () => JSX.CSSProperties;
+    getThumbStyle: (ctx: import("./slider.types").SharedContext) => JSX.CSSProperties;
+    getRangeStyle: (ctx: Pick<import("./slider.types").SharedContext, "isVertical" | "isRtl">) => JSX.CSSProperties;
+    getRootStyle: (ctx: Ctx) => JSX.CSSProperties;
+    getMarkerStyle: (ctx: Pick<import("./slider.types").SharedContext, "isHorizontal" | "isRtl">, percent: number) => JSX.CSSProperties;
+    getLabelStyle: () => JSX.CSSProperties;
+    getTrackStyle: () => JSX.CSSProperties;
+    getMarkerGroupStyle: () => JSX.CSSProperties;
 };

package/dist/slider.machine.d.ts

@@ -1,2 +1,2 @@
-import { MachineContext, MachineState, UserDefinedContext } from "./slider.types";
+import type { MachineContext, MachineState, UserDefinedContext } from "./slider.types";
 export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;

package/dist/slider.types.d.ts

@@ -166,4 +166,8 @@ export declare type SharedContext = {
     orientation?: "horizontal" | "vertical";
     readonly hasMeasuredThumbSize: boolean;
 };
+export declare type Point = {
+    x: number;
+    y: number;
+};
 export {};

package/dist/slider.utils.d.ts

@@ -1,4 +1,4 @@
-import { MachineContext as Ctx } from "./slider.types";
+import type { MachineContext as Ctx } from "./slider.types";
 export declare const utils: {
     fromPercent(ctx: Ctx, percent: number): number;
     clamp(ctx: Ctx, value: number): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,11 +29,10 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.6",
-    "@zag-js/dom-utils": "0.1.5",
+    "@zag-js/core": "0.1.7",
+    "@zag-js/dom-utils": "0.1.6",
     "@zag-js/number-utils": "0.1.2",
-    "@zag-js/rect-utils": "0.1.2",
-    "@zag-js/types": "0.2.0",
+    "@zag-js/types": "0.2.1",
     "@zag-js/utils": "0.1.2"
   },
   "scripts": {