@zag-js/slider 0.2.13 → 0.2.15

package/dist/index.js

@@ -43,410 +43,15 @@ var anatomy = (0, import_anatomy.createAnatomy)("slider").parts(
 );
 var parts = anatomy.build();
 
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-
-// ../../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/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 getWindow(el) {
-  return el?.ownerDocument.defaultView ?? window;
-}
-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/event.ts
-function getNativeEvent(e) {
-  return e.nativeEvent ?? 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;
-
-// ../../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-event-point.ts
-var fallback = {
-  pageX: 0,
-  pageY: 0,
-  clientX: 0,
-  clientY: 0
-};
-function getEventPoint(event, type = "page") {
-  const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
-  return { x: point[`${type}X`], y: point[`${type}Y`] };
-}
-
-// ../../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 };
-}
-
-// ../../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;
-  }
-}
-
-// ../../utilities/dom/src/listener.ts
-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?.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/mutation-observer.ts
-function observeAttributes(node, attributes, fn) {
-  if (!node)
-    return;
-  const attrs = Array.isArray(attributes) ? attributes : [attributes];
-  const win = node.ownerDocument.defaultView || window;
-  const obs = new win.MutationObserver((changes) => {
-    for (const change of changes) {
-      if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
-        fn(change);
-      }
-    }
-  });
-  obs.observe(node, { attributes: true, attributeFilter: attrs });
-  return () => obs.disconnect();
-}
-
-// ../../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/slider.connect.ts
+var import_dom_event2 = require("@zag-js/dom-event");
+var import_dom_query2 = require("@zag-js/dom-query");
 var import_numeric_range3 = require("@zag-js/numeric-range");
 
-// ../../utilities/form-utils/src/input-event.ts
-function getDescriptor(el, options) {
-  const { type, property = "value" } = options;
-  const proto = getWindow(el)[type].prototype;
-  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
-}
-function dispatchInputValueEvent(el, value) {
-  if (!el)
-    return;
-  const win = getWindow(el);
-  if (!(el instanceof win.HTMLInputElement))
-    return;
-  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
-  desc.set?.call(el, value);
-  const event = new win.Event("input", { bubbles: true });
-  el.dispatchEvent(event);
-}
-
-// ../../utilities/form-utils/src/form.ts
-function getClosestForm(el) {
-  if (isFormElement(el))
-    return el.form;
-  else
-    return el.closest("form");
-}
-function isFormElement(el) {
-  return el.matches("textarea, input, select, button");
-}
-function trackFormReset(el, callback) {
-  if (!el)
-    return;
-  const form = getClosestForm(el);
-  form?.addEventListener("reset", callback, { passive: true });
-  return () => {
-    form?.removeEventListener("reset", callback);
-  };
-}
-function trackFieldsetDisabled(el, callback) {
-  const fieldset = el?.closest("fieldset");
-  if (!fieldset)
-    return;
-  callback(fieldset.disabled);
-  return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
-}
-function trackFormControl(el, options) {
-  if (!el)
-    return;
-  const { onFieldsetDisabled, onFormReset } = options;
-  const cleanups = [
-    trackFormReset(el, onFormReset),
-    trackFieldsetDisabled(el, (disabled) => {
-      if (disabled)
-        onFieldsetDisabled();
-    })
-  ];
-  return () => {
-    cleanups.forEach((cleanup) => cleanup?.());
-  };
-}
-
 // src/slider.dom.ts
+var import_dom_query = require("@zag-js/dom-query");
+var import_dom_event = require("@zag-js/dom-event");
+var import_form_utils = require("@zag-js/form-utils");
 var import_numeric_range2 = require("@zag-js/numeric-range");
 
 // src/slider.style.ts
@@ -562,7 +167,7 @@ var styles = {
 };
 
 // src/slider.dom.ts
-var dom = defineDomHelpers({
+var dom = (0, import_dom_query.createScope)({
   ...styles,
   getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
   getThumbId: (ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
@@ -581,7 +186,7 @@ var dom = defineDomHelpers({
     const el = dom.getControlEl(ctx);
     if (!el)
       return;
-    const relativePoint = getPointRelativeToNode(point, el);
+    const relativePoint = (0, import_dom_event.getRelativePointValue)(point, el);
     const percentX = relativePoint.x / el.offsetWidth;
     const percentY = relativePoint.y / el.offsetHeight;
     let percent;
@@ -596,86 +201,116 @@ var dom = defineDomHelpers({
     const input = dom.getHiddenInputEl(ctx);
     if (!input)
       return;
-    dispatchInputValueEvent(input, ctx.value);
+    (0, import_form_utils.dispatchInputValueEvent)(input, ctx.value);
   }
 });
 
 // src/slider.connect.ts
-function connect(state2, send, normalize) {
-  const ariaLabel = state2.context["aria-label"];
-  const ariaLabelledBy = state2.context["aria-labelledby"];
-  const ariaValueText = state2.context.getAriaValueText?.(state2.context.value);
-  const isFocused = state2.matches("focus");
-  const isDragging = state2.matches("dragging");
-  const isDisabled = state2.context.disabled;
-  const isInteractive = state2.context.isInteractive;
-  const isInvalid = state2.context.invalid;
+function connect(state, send, normalize) {
+  const ariaLabel = state.context["aria-label"];
+  const ariaLabelledBy = state.context["aria-labelledby"];
+  const ariaValueText = state.context.getAriaValueText?.(state.context.value);
+  const isFocused = state.matches("focus");
+  const isDragging = state.matches("dragging");
+  const isDisabled = state.context.disabled;
+  const isInteractive = state.context.isInteractive;
+  const isInvalid = state.context.invalid;
   function getPercentValueFn(percent) {
-    return (0, import_numeric_range3.getPercentValue)(percent, state2.context.min, state2.context.max, state2.context.step);
+    return (0, import_numeric_range3.getPercentValue)(percent, state.context.min, state.context.max, state.context.step);
   }
   function getValuePercentFn(value) {
-    return (0, import_numeric_range3.getValuePercent)(value, state2.context.min, state2.context.max);
+    return (0, import_numeric_range3.getValuePercent)(value, state.context.min, state.context.max);
   }
   return {
+    /**
+     * Whether the slider is focused.
+     */
     isFocused,
+    /**
+     * Whether the slider is being dragged.
+     */
     isDragging,
-    value: state2.context.value,
-    percent: (0, import_numeric_range3.getValuePercent)(state2.context.value, state2.context.min, state2.context.max),
+    /**
+     * The value of the slider.
+     */
+    value: state.context.value,
+    /**
+     * The value of the slider as a percent.
+     */
+    percent: (0, import_numeric_range3.getValuePercent)(state.context.value, state.context.min, state.context.max),
+    /**
+     * Function to set the value of the slider.
+     */
     setValue(value) {
       send({ type: "SET_VALUE", value });
     },
+    /**
+     * Returns the value of the slider at the given percent.
+     */
     getPercentValue: getPercentValueFn,
+    /**
+     * Returns the percent of the slider at the given value.
+     */
     getValuePercent: getValuePercentFn,
+    /**
+     * Function to focus the slider.
+     */
     focus() {
-      dom.getThumbEl(state2.context)?.focus();
+      dom.getThumbEl(state.context)?.focus();
     },
+    /**
+     * Function to increment the value of the slider by the step.
+     */
     increment() {
       send("INCREMENT");
     },
+    /**
+     * Function to decrement the value of the slider by the step.
+     */
     decrement() {
       send("DECREMENT");
     },
     rootProps: normalize.element({
       ...parts.root.attrs,
-      "data-disabled": dataAttr(isDisabled),
-      "data-focus": dataAttr(isFocused),
-      "data-orientation": state2.context.orientation,
-      "data-invalid": dataAttr(isInvalid),
-      id: dom.getRootId(state2.context),
-      dir: state2.context.dir,
-      style: dom.getRootStyle(state2.context)
+      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
+      "data-orientation": state.context.orientation,
+      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
+      id: dom.getRootId(state.context),
+      dir: state.context.dir,
+      style: dom.getRootStyle(state.context)
     }),
     labelProps: normalize.label({
       ...parts.label.attrs,
-      "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
-      "data-focus": dataAttr(isFocused),
-      id: dom.getLabelId(state2.context),
-      htmlFor: dom.getHiddenInputId(state2.context),
+      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
+      id: dom.getLabelId(state.context),
+      htmlFor: dom.getHiddenInputId(state.context),
       onClick(event) {
         if (!isInteractive)
           return;
         event.preventDefault();
-        dom.getThumbEl(state2.context)?.focus();
+        dom.getThumbEl(state.context)?.focus();
       },
       style: dom.getLabelStyle()
     }),
     thumbProps: normalize.element({
       ...parts.thumb.attrs,
-      id: dom.getThumbId(state2.context),
-      "data-disabled": dataAttr(isDisabled),
-      "data-orientation": state2.context.orientation,
-      "data-focus": dataAttr(isFocused),
+      id: dom.getThumbId(state.context),
+      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-orientation": state.context.orientation,
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
       draggable: false,
-      "aria-invalid": isInvalid || void 0,
-      "data-invalid": dataAttr(isInvalid),
-      "aria-disabled": isDisabled || void 0,
+      "aria-invalid": (0, import_dom_query2.ariaAttr)(isInvalid),
+      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
+      "aria-disabled": (0, import_dom_query2.ariaAttr)(isDisabled),
       "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state2.context),
-      "aria-orientation": state2.context.orientation,
-      "aria-valuemax": state2.context.max,
-      "aria-valuemin": state2.context.min,
-      "aria-valuenow": state2.context.value,
+      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state.context),
+      "aria-orientation": state.context.orientation,
+      "aria-valuemax": state.context.max,
+      "aria-valuemin": state.context.min,
+      "aria-valuenow": state.context.value,
       "aria-valuetext": ariaValueText,
       role: "slider",
       tabIndex: isDisabled ? void 0 : 0,
@@ -692,24 +327,24 @@ function connect(state2, send, normalize) {
       onKeyDown(event) {
         if (!isInteractive)
           return;
-        const step = getEventStep(event) * state2.context.step;
+        const step = (0, import_dom_event2.getEventStep)(event) * state.context.step;
         let prevent = true;
         const keyMap = {
           ArrowUp() {
             send({ type: "ARROW_UP", step });
-            prevent = state2.context.isVertical;
+            prevent = state.context.isVertical;
           },
           ArrowDown() {
             send({ type: "ARROW_DOWN", step });
-            prevent = state2.context.isVertical;
+            prevent = state.context.isVertical;
           },
           ArrowLeft() {
             send({ type: "ARROW_LEFT", step });
-            prevent = state2.context.isHorizontal;
+            prevent = state.context.isHorizontal;
           },
           ArrowRight() {
             send({ type: "ARROW_RIGHT", step });
-            prevent = state2.context.isHorizontal;
+            prevent = state.context.isHorizontal;
           },
           PageUp() {
             send({ type: "PAGE_UP", step });
@@ -724,7 +359,7 @@ function connect(state2, send, normalize) {
             send("END");
           }
         };
-        const key = getEventKey(event, state2.context);
+        const key = (0, import_dom_event2.getEventKey)(event, state.context);
         const exec = keyMap[key];
         if (!exec)
           return;
@@ -733,57 +368,57 @@ function connect(state2, send, normalize) {
           event.preventDefault();
         }
       },
-      style: dom.getThumbStyle(state2.context)
+      style: dom.getThumbStyle(state.context)
     }),
     hiddenInputProps: normalize.input({
       ...parts.hiddenInput.attrs,
       type: "text",
-      defaultValue: state2.context.value,
-      name: state2.context.name,
-      form: state2.context.form,
-      id: dom.getHiddenInputId(state2.context),
+      defaultValue: state.context.value,
+      name: state.context.name,
+      form: state.context.form,
+      id: dom.getHiddenInputId(state.context),
       hidden: true
     }),
     outputProps: normalize.output({
       ...parts.output.attrs,
-      "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
-      id: dom.getOutputId(state2.context),
-      htmlFor: dom.getHiddenInputId(state2.context),
+      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
+      id: dom.getOutputId(state.context),
+      htmlFor: dom.getHiddenInputId(state.context),
       "aria-live": "off"
     }),
     trackProps: normalize.element({
       ...parts.track.attrs,
-      id: dom.getTrackId(state2.context),
-      "data-disabled": dataAttr(isDisabled),
-      "data-focus": dataAttr(isFocused),
-      "data-invalid": dataAttr(isInvalid),
-      "data-orientation": state2.context.orientation,
+      id: dom.getTrackId(state.context),
+      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
+      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
+      "data-orientation": state.context.orientation,
       style: dom.getTrackStyle()
     }),
     rangeProps: normalize.element({
       ...parts.range.attrs,
-      id: dom.getRangeId(state2.context),
-      "data-focus": dataAttr(isFocused),
-      "data-invalid": dataAttr(isInvalid),
-      "data-disabled": dataAttr(isDisabled),
-      "data-orientation": state2.context.orientation,
-      style: dom.getRangeStyle(state2.context)
+      id: dom.getRangeId(state.context),
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
+      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
+      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-orientation": state.context.orientation,
+      style: dom.getRangeStyle(state.context)
     }),
     controlProps: normalize.element({
       ...parts.control.attrs,
-      id: dom.getControlId(state2.context),
-      "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
-      "data-orientation": state2.context.orientation,
-      "data-focus": dataAttr(isFocused),
+      id: dom.getControlId(state.context),
+      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
+      "data-orientation": state.context.orientation,
+      "data-focus": (0, import_dom_query2.dataAttr)(isFocused),
       onPointerDown(event) {
         if (!isInteractive)
           return;
-        const evt = getNativeEvent(event);
-        if (!isLeftClick(evt) || isModifiedEvent(evt))
+        const evt = (0, import_dom_event2.getNativeEvent)(event);
+        if (!(0, import_dom_event2.isLeftClick)(evt) || (0, import_dom_event2.isModifiedEvent)(evt))
           return;
-        const point = getEventPoint(evt);
+        const point = { x: evt.clientX, y: evt.clientY };
         send({ type: "POINTER_DOWN", point });
         event.preventDefault();
         event.stopPropagation();
@@ -794,20 +429,20 @@ function connect(state2, send, normalize) {
       ...parts.markerGroup.attrs,
       role: "presentation",
       "aria-hidden": true,
-      "data-orientation": state2.context.orientation,
+      "data-orientation": state.context.orientation,
       style: dom.getMarkerGroupStyle()
     }),
     getMarkerProps({ value }) {
       const percent = getValuePercentFn(value);
-      const style = dom.getMarkerStyle(state2.context, percent);
-      const markerState = value > state2.context.value ? "over-value" : value < state2.context.value ? "under-value" : "at-value";
+      const style = dom.getMarkerStyle(state.context, percent);
+      const markerState = value > state.context.value ? "over-value" : value < state.context.value ? "under-value" : "at-value";
       return normalize.element({
         ...parts.marker.attrs,
         role: "presentation",
-        "data-orientation": state2.context.orientation,
-        id: dom.getMarkerId(state2.context, value),
+        "data-orientation": state.context.orientation,
+        id: dom.getMarkerId(state.context, value),
         "data-value": value,
-        "data-disabled": dataAttr(isDisabled),
+        "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
         "data-state": markerState,
         style
       });
@@ -817,8 +452,12 @@ function connect(state2, send, normalize) {
 
 // src/slider.machine.ts
 var import_core = require("@zag-js/core");
+var import_dom_event3 = require("@zag-js/dom-event");
+var import_dom_query3 = require("@zag-js/dom-query");
 var import_element_size = require("@zag-js/element-size");
+var import_form_utils2 = require("@zag-js/form-utils");
 var import_numeric_range5 = require("@zag-js/numeric-range");
+var import_utils = require("@zag-js/utils");
 
 // src/slider.utils.ts
 var import_numeric_range4 = require("@zag-js/numeric-range");
@@ -847,7 +486,7 @@ function increment(ctx, step) {
 
 // src/slider.machine.ts
 function machine(userContext) {
-  const ctx = compact(userContext);
+  const ctx = (0, import_utils.compact)(userContext);
   return (0, import_core.createMachine)(
     {
       id: "slider",
@@ -961,7 +600,7 @@ function machine(userContext) {
       },
       activities: {
         trackFormControlState(ctx2) {
-          return trackFormControl(dom.getHiddenInputEl(ctx2), {
+          return (0, import_form_utils2.trackFormControl)(dom.getHiddenInputEl(ctx2), {
             onFieldsetDisabled() {
               ctx2.disabled = true;
             },
@@ -973,7 +612,7 @@ function machine(userContext) {
           });
         },
         trackPointerMove(ctx2, _evt, { send }) {
-          return trackPointerMove(dom.getDoc(ctx2), {
+          return (0, import_dom_event3.trackPointerMove)(dom.getDoc(ctx2), {
             onPointerMove(info) {
               send({ type: "POINTER_MOVE", point: info.point });
             },
@@ -1016,7 +655,7 @@ function machine(userContext) {
           ctx2.value = (0, import_numeric_range5.clampValue)(value, ctx2.min, ctx2.max);
         },
         focusThumb(ctx2) {
-          raf(() => dom.getThumbEl(ctx2)?.focus());
+          (0, import_dom_query3.raf)(() => dom.getThumbEl(ctx2)?.focus());
         },
         decrement(ctx2, evt) {
           ctx2.value = decrement(ctx2, evt.step);