@zag-js/slider 0.1.15 → 0.1.16

package/dist/index.js

@@ -1,4 +1,32 @@
-// ../../utilities/dom/dist/index.js
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  connect: () => connect,
+  machine: () => machine,
+  unstable__dom: () => dom
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../../utilities/dom/dist/index.mjs
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
@@ -286,7 +314,7 @@ function trackPointerMove(doc, opts) {
   );
 }
 
-// ../../utilities/form-utils/dist/index.js
+// ../../utilities/form-utils/dist/index.mjs
 function getWindow(el) {
   return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
 }
@@ -348,7 +376,7 @@ function trackFieldsetDisabled(el, callback) {
   return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
 }
 
-// ../../utilities/number/dist/index.js
+// ../../utilities/number/dist/index.mjs
 function round(v, t) {
   let num = valueOf(v);
   const p = 10 ** (t ?? 10);
@@ -806,10 +834,10 @@ function connect(state2, send, normalize) {
 }
 
 // src/slider.machine.ts
-import { createMachine } from "@zag-js/core";
-import { trackElementSize } from "@zag-js/element-size";
+var import_core = require("@zag-js/core");
+var import_element_size = require("@zag-js/element-size");
 function machine(ctx) {
-  return createMachine(
+  return (0, import_core.createMachine)(
     {
       id: "slider",
       initial: "unknown",
@@ -954,7 +982,7 @@ function machine(ctx) {
         trackThumbSize(ctx2, _evt) {
           if (ctx2.thumbAlignment !== "contain")
             return;
-          return trackElementSize(dom.getThumbEl(ctx2), (size) => {
+          return (0, import_element_size.trackElementSize)(dom.getThumbEl(ctx2), (size) => {
             if (size)
               ctx2.thumbSize = size;
           });
@@ -1012,8 +1040,9 @@ function machine(ctx) {
     }
   );
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   connect,
   machine,
-  dom as unstable__dom
-};
+  unstable__dom
+});

package/dist/index.mjs

@@ -0,0 +1,1019 @@
+// ../../utilities/dom/dist/index.mjs
+var dataAttr = (guard) => {
+  return guard ? "" : void 0;
+};
+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 == 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() {
+  const agent = navigator.userAgentData;
+  return (agent == null ? void 0 : 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();
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? 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
+  };
+}
+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;
+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") {
+  const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? 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 };
+}
+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;
+  }
+}
+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) {
+  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;
+}
+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();
+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);
+    }
+  }
+}
+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 })
+  );
+}
+
+// ../../utilities/form-utils/dist/index.mjs
+function getWindow(el) {
+  return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
+}
+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();
+}
+function getDescriptor(el, options) {
+  const { type, property } = options;
+  const proto = getWindow(el)[type].prototype;
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
+}
+function dispatchInputValueEvent(el, value) {
+  var _a;
+  if (!el)
+    return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement))
+    return;
+  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);
+}
+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 == null ? void 0 : form.addEventListener("reset", callback, { passive: true });
+  return () => {
+    form == null ? void 0 : form.removeEventListener("reset", callback);
+  };
+}
+function trackFieldsetDisabled(el, callback) {
+  const fieldset = el == null ? void 0 : el.closest("fieldset");
+  if (!fieldset)
+    return;
+  callback(fieldset.disabled);
+  return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
+}
+
+// ../../utilities/number/dist/index.mjs
+function round(v, t) {
+  let num = valueOf(v);
+  const p = 10 ** (t ?? 10);
+  num = Math.round(num * p) / p;
+  return t ? num.toFixed(t) : v.toString();
+}
+var valueToPercent = (v, r) => (valueOf(v) - r.min) * 100 / (r.max - r.min);
+var percentToValue = (v, r) => r.min + (r.max - r.min) * valueOf(v);
+function clamp(v, o) {
+  return Math.min(Math.max(valueOf(v), o.min), o.max);
+}
+function countDecimals(value) {
+  if (!Number.isFinite(value))
+    return 0;
+  let e = 1, p = 0;
+  while (Math.round(value * e) / e !== value) {
+    e *= 10;
+    p += 1;
+  }
+  return p;
+}
+var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
+var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
+function snapToStep(value, step) {
+  const num = valueOf(value);
+  const p = countDecimals(step);
+  const v = Math.round(num / step) * step;
+  return round(v, p);
+}
+function valueOf(v) {
+  if (typeof v === "number")
+    return v;
+  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
+  return !Number.isNaN(num) ? num : 0;
+}
+function decimalOperation(a, op, b) {
+  let result = op === "+" ? a + b : a - b;
+  if (a % 1 !== 0 || b % 1 !== 0) {
+    const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
+    a = Math.round(a * multiplier);
+    b = Math.round(b * multiplier);
+    result = op === "+" ? a + b : a - b;
+    result /= multiplier;
+  }
+  return result;
+}
+var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
+var transform = (a, b) => {
+  const i = { min: a[0], max: a[1] };
+  const o = { min: b[0], max: b[1] };
+  return (v) => {
+    if (i.min === i.max || o.min === o.max)
+      return o.min;
+    const ratio = (o.max - o.min) / (i.max - i.min);
+    return o.min + ratio * (v - i.min);
+  };
+};
+
+// src/slider.style.ts
+function getVerticalThumbOffset(ctx) {
+  const { height = 0 } = ctx.thumbSize ?? {};
+  const getValue = transform([ctx.min, ctx.max], [-height / 2, height / 2]);
+  return parseFloat(getValue(ctx.value).toFixed(2));
+}
+function getHorizontalThumbOffset(ctx) {
+  const { width = 0 } = ctx.thumbSize ?? {};
+  if (ctx.isRtl) {
+    const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
+    return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
+  }
+  const getValue = transform([ctx.min, ctx.max], [-width / 2, width / 2]);
+  return parseFloat(getValue(ctx.value).toFixed(2));
+}
+function getThumbOffset(ctx) {
+  const percent = valueToPercent(ctx.value, ctx);
+  if (ctx.thumbAlignment === "center")
+    return `${percent}%`;
+  const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
+  return `calc(${percent}% - ${offset}px)`;
+}
+function getThumbStyle(ctx) {
+  const placementProp = ctx.isVertical ? "bottom" : ctx.isRtl ? "right" : "left";
+  return {
+    visibility: ctx.hasMeasuredThumbSize ? "visible" : "hidden",
+    position: "absolute",
+    transform: "var(--slider-thumb-transform)",
+    [placementProp]: "var(--slider-thumb-offset)"
+  };
+}
+function getRangeOffsets(ctx) {
+  const percent = valueToPercent(ctx.value, ctx);
+  let start = "0%";
+  let end = `${100 - percent}%`;
+  if (ctx.origin === "center") {
+    const isNegative = percent < 50;
+    start = isNegative ? `${percent}%` : "50%";
+    end = isNegative ? "50%" : end;
+  }
+  return { start, end };
+}
+function getRangeStyle(ctx) {
+  if (ctx.isVertical) {
+    return {
+      position: "absolute",
+      bottom: "var(--slider-range-start)",
+      top: "var(--slider-range-end)"
+    };
+  }
+  return {
+    position: "absolute",
+    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
+    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)"
+  };
+}
+function getControlStyle() {
+  return {
+    touchAction: "none",
+    userSelect: "none",
+    position: "relative"
+  };
+}
+function getRootStyle(ctx) {
+  const range = getRangeOffsets(ctx);
+  return {
+    "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : "translateX(-50%)",
+    "--slider-thumb-offset": getThumbOffset(ctx),
+    "--slider-range-start": range.start,
+    "--slider-range-end": range.end
+  };
+}
+function getMarkerStyle(ctx, percent) {
+  return {
+    position: "absolute",
+    pointerEvents: "none",
+    [ctx.isHorizontal ? "left" : "bottom"]: `${ctx.isRtl ? 100 - percent : percent}%`
+  };
+}
+function getLabelStyle() {
+  return { userSelect: "none" };
+}
+function getTrackStyle() {
+  return { position: "relative" };
+}
+function getMarkerGroupStyle() {
+  return {
+    userSelect: "none",
+    pointerEvents: "none",
+    position: "relative"
+  };
+}
+var styles = {
+  getThumbOffset,
+  getControlStyle,
+  getThumbStyle,
+  getRangeStyle,
+  getRootStyle,
+  getMarkerStyle,
+  getLabelStyle,
+  getTrackStyle,
+  getMarkerGroupStyle
+};
+
+// src/slider.utils.ts
+var utils = {
+  fromPercent(ctx, percent) {
+    percent = clamp(percent, { min: 0, max: 1 });
+    return parseFloat(snapToStep(percentToValue(percent, ctx), ctx.step));
+  },
+  clamp(ctx, value) {
+    return clamp(value, ctx);
+  },
+  convert(ctx, value) {
+    return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
+  },
+  decrement(ctx, step) {
+    let value = decrement(ctx.value, step ?? ctx.step);
+    return utils.convert(ctx, value);
+  },
+  increment(ctx, step) {
+    let value = increment(ctx.value, step ?? ctx.step);
+    return utils.convert(ctx, value);
+  }
+};
+
+// src/slider.dom.ts
+var dom = defineDomHelpers({
+  ...styles,
+  getRootId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `slider:${ctx.id}`;
+  },
+  getThumbId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.thumb) ?? `slider:${ctx.id}:thumb`;
+  },
+  getControlId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.control) ?? `slider:${ctx.id}:control`;
+  },
+  getInputId: (ctx) => `slider:${ctx.id}:input`,
+  getOutputId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.output) ?? `slider:${ctx.id}:output`;
+  },
+  getTrackId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.track) ?? `slider:${ctx.id}track`;
+  },
+  getRangeId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.track) ?? `slider:${ctx.id}:range`;
+  },
+  getLabelId: (ctx) => {
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `slider:${ctx.id}:label`;
+  },
+  getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
+  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
+  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
+  getValueFromPoint(ctx, point) {
+    const el = dom.getControlEl(ctx);
+    if (!el)
+      return;
+    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 - percentX : percentX;
+    } else {
+      percent = 1 - percentY;
+    }
+    return utils.fromPercent(ctx, percent);
+  },
+  dispatchChangeEvent(ctx) {
+    const input = dom.getInputEl(ctx);
+    if (!input)
+      return;
+    dispatchInputValueEvent(input, ctx.value);
+  }
+});
+
+// src/slider.connect.ts
+function connect(state2, send, normalize) {
+  var _a, _b;
+  const ariaLabel = state2.context["aria-label"];
+  const ariaLabelledBy = state2.context["aria-labelledby"];
+  const ariaValueText = (_b = (_a = state2.context).getAriaValueText) == null ? void 0 : _b.call(_a, 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;
+  return {
+    isFocused,
+    isDragging,
+    value: state2.context.value,
+    percent: valueToPercent(state2.context.value, state2.context),
+    setValue(value) {
+      send({ type: "SET_VALUE", value });
+    },
+    getPercentValue(percent) {
+      return percentToValue(percent, state2.context);
+    },
+    focus() {
+      var _a2;
+      (_a2 = dom.getThumbEl(state2.context)) == null ? void 0 : _a2.focus();
+    },
+    increment() {
+      send("INCREMENT");
+    },
+    decrement() {
+      send("DECREMENT");
+    },
+    rootProps: normalize.element({
+      "data-part": "root",
+      "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)
+    }),
+    labelProps: normalize.label({
+      "data-part": "label",
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      "data-focus": dataAttr(isFocused),
+      id: dom.getLabelId(state2.context),
+      htmlFor: dom.getInputId(state2.context),
+      onClick(event) {
+        var _a2;
+        if (!isInteractive)
+          return;
+        event.preventDefault();
+        (_a2 = dom.getThumbEl(state2.context)) == null ? void 0 : _a2.focus();
+      },
+      style: dom.getLabelStyle()
+    }),
+    thumbProps: normalize.element({
+      "data-part": "thumb",
+      id: dom.getThumbId(state2.context),
+      "data-disabled": dataAttr(isDisabled),
+      "data-orientation": state2.context.orientation,
+      "data-focus": dataAttr(isFocused),
+      draggable: false,
+      "aria-invalid": isInvalid || void 0,
+      "data-invalid": dataAttr(isInvalid),
+      "aria-disabled": isDisabled || void 0,
+      "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-valuetext": ariaValueText,
+      role: "slider",
+      tabIndex: isDisabled ? void 0 : 0,
+      onBlur() {
+        if (!isInteractive)
+          return;
+        send("BLUR");
+      },
+      onFocus() {
+        if (!isInteractive)
+          return;
+        send("FOCUS");
+      },
+      onKeyDown(event) {
+        if (!isInteractive)
+          return;
+        const step = getEventStep(event) * state2.context.step;
+        let prevent = true;
+        const keyMap = {
+          ArrowUp() {
+            send({ type: "ARROW_UP", step });
+            prevent = state2.context.isVertical;
+          },
+          ArrowDown() {
+            send({ type: "ARROW_DOWN", step });
+            prevent = state2.context.isVertical;
+          },
+          ArrowLeft() {
+            send({ type: "ARROW_LEFT", step });
+            prevent = state2.context.isHorizontal;
+          },
+          ArrowRight() {
+            send({ type: "ARROW_RIGHT", step });
+            prevent = state2.context.isHorizontal;
+          },
+          PageUp() {
+            send({ type: "PAGE_UP", step });
+          },
+          PageDown() {
+            send({ type: "PAGE_DOWN", step });
+          },
+          Home() {
+            send("HOME");
+          },
+          End() {
+            send("END");
+          }
+        };
+        const key = getEventKey(event, state2.context);
+        const exec = keyMap[key];
+        if (!exec)
+          return;
+        exec(event);
+        if (prevent) {
+          event.preventDefault();
+        }
+      },
+      style: dom.getThumbStyle(state2.context)
+    }),
+    inputProps: normalize.input({
+      "data-part": "input",
+      type: "text",
+      defaultValue: state2.context.value,
+      name: state2.context.name,
+      id: dom.getInputId(state2.context),
+      hidden: true
+    }),
+    outputProps: normalize.output({
+      "data-part": "output",
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      id: dom.getOutputId(state2.context),
+      htmlFor: dom.getInputId(state2.context),
+      "aria-live": "off"
+    }),
+    trackProps: normalize.element({
+      "data-part": "track",
+      id: dom.getTrackId(state2.context),
+      "data-disabled": dataAttr(isDisabled),
+      "data-focus": dataAttr(isFocused),
+      "data-invalid": dataAttr(isInvalid),
+      "data-orientation": state2.context.orientation,
+      style: dom.getTrackStyle()
+    }),
+    rangeProps: normalize.element({
+      "data-part": "range",
+      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)
+    }),
+    controlProps: normalize.element({
+      "data-part": "control",
+      id: dom.getControlId(state2.context),
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      "data-orientation": state2.context.orientation,
+      "data-focus": dataAttr(isFocused),
+      onPointerDown(event) {
+        if (!isInteractive)
+          return;
+        const evt = getNativeEvent(event);
+        if (!isLeftClick(evt) || isModifiedEvent(evt))
+          return;
+        const point = getEventPoint(evt);
+        send({ type: "POINTER_DOWN", point });
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      style: dom.getControlStyle()
+    }),
+    markerGroupProps: normalize.element({
+      "data-part": "marker-group",
+      role: "presentation",
+      "aria-hidden": true,
+      "data-orientation": state2.context.orientation,
+      style: dom.getMarkerGroupStyle()
+    }),
+    getMarkerProps({ value }) {
+      const percent = valueToPercent(value, state2.context);
+      const style = dom.getMarkerStyle(state2.context, percent);
+      const markerState = value > state2.context.value ? "over-value" : value < state2.context.value ? "under-value" : "at-value";
+      return normalize.element({
+        "data-part": "marker",
+        role: "presentation",
+        "data-orientation": state2.context.orientation,
+        id: dom.getMarkerId(state2.context, value),
+        "data-value": value,
+        "data-disabled": dataAttr(isDisabled),
+        "data-state": markerState,
+        style
+      });
+    }
+  };
+}
+
+// src/slider.machine.ts
+import { createMachine } from "@zag-js/core";
+import { trackElementSize } from "@zag-js/element-size";
+function machine(ctx) {
+  return createMachine(
+    {
+      id: "slider",
+      initial: "unknown",
+      context: {
+        thumbSize: null,
+        thumbAlignment: "contain",
+        disabled: false,
+        threshold: 5,
+        dir: "ltr",
+        origin: "start",
+        orientation: "horizontal",
+        initialValue: null,
+        value: 0,
+        step: 1,
+        min: 0,
+        max: 100,
+        ...ctx
+      },
+      computed: {
+        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+        isVertical: (ctx2) => ctx2.orientation === "vertical",
+        isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
+        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readonly),
+        hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null
+      },
+      watch: {
+        value: ["invokeOnChange", "dispatchChangeEvent"]
+      },
+      activities: ["trackFormReset", "trackFieldsetDisabled", "trackThumbSize"],
+      on: {
+        SET_VALUE: {
+          actions: "setValue"
+        },
+        INCREMENT: {
+          actions: "increment"
+        },
+        DECREMENT: {
+          actions: "decrement"
+        }
+      },
+      states: {
+        unknown: {
+          on: {
+            SETUP: {
+              target: "idle",
+              actions: ["checkValue"]
+            }
+          }
+        },
+        idle: {
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+            },
+            FOCUS: "focus"
+          }
+        },
+        focus: {
+          entry: "focusThumb",
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+            },
+            ARROW_LEFT: {
+              guard: "isHorizontal",
+              actions: "decrement"
+            },
+            ARROW_RIGHT: {
+              guard: "isHorizontal",
+              actions: "increment"
+            },
+            ARROW_UP: {
+              guard: "isVertical",
+              actions: "increment"
+            },
+            ARROW_DOWN: {
+              guard: "isVertical",
+              actions: "decrement"
+            },
+            PAGE_UP: {
+              actions: "increment"
+            },
+            PAGE_DOWN: {
+              actions: "decrement"
+            },
+            HOME: {
+              actions: "setToMin"
+            },
+            END: {
+              actions: "setToMax"
+            },
+            BLUR: "idle"
+          }
+        },
+        dragging: {
+          entry: "focusThumb",
+          activities: "trackPointerMove",
+          on: {
+            POINTER_UP: {
+              target: "focus",
+              actions: "invokeOnChangeEnd"
+            },
+            POINTER_MOVE: {
+              actions: "setPointerValue"
+            }
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        isHorizontal: (ctx2) => ctx2.isHorizontal,
+        isVertical: (ctx2) => ctx2.isVertical
+      },
+      activities: {
+        trackFieldsetDisabled(ctx2) {
+          return trackFieldsetDisabled(dom.getRootEl(ctx2), (disabled) => {
+            if (disabled) {
+              ctx2.disabled = disabled;
+            }
+          });
+        },
+        trackFormReset(ctx2) {
+          return trackFormReset(dom.getInputEl(ctx2), () => {
+            if (ctx2.initialValue != null) {
+              ctx2.value = ctx2.initialValue;
+            }
+          });
+        },
+        trackPointerMove(ctx2, _evt, { send }) {
+          return trackPointerMove(dom.getDoc(ctx2), {
+            onPointerMove(info) {
+              send({ type: "POINTER_MOVE", point: info.point });
+            },
+            onPointerUp() {
+              send("POINTER_UP");
+            }
+          });
+        },
+        trackThumbSize(ctx2, _evt) {
+          if (ctx2.thumbAlignment !== "contain")
+            return;
+          return trackElementSize(dom.getThumbEl(ctx2), (size) => {
+            if (size)
+              ctx2.thumbSize = size;
+          });
+        }
+      },
+      actions: {
+        checkValue(ctx2) {
+          const value = utils.convert(ctx2, ctx2.value);
+          ctx2.value = value;
+          ctx2.initialValue = value;
+        },
+        invokeOnChangeStart(ctx2) {
+          var _a;
+          (_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+        },
+        invokeOnChangeEnd(ctx2) {
+          var _a;
+          (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+        },
+        invokeOnChange(ctx2) {
+          var _a;
+          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+        },
+        dispatchChangeEvent(ctx2) {
+          dom.dispatchChangeEvent(ctx2);
+        },
+        setPointerValue(ctx2, evt) {
+          const value = dom.getValueFromPoint(ctx2, evt.point);
+          if (value == null)
+            return;
+          ctx2.value = utils.clamp(ctx2, value);
+        },
+        focusThumb(ctx2) {
+          raf(() => {
+            var _a;
+            return (_a = dom.getThumbEl(ctx2)) == null ? void 0 : _a.focus();
+          });
+        },
+        decrement(ctx2, evt) {
+          ctx2.value = utils.decrement(ctx2, evt.step);
+        },
+        increment(ctx2, evt) {
+          ctx2.value = utils.increment(ctx2, evt.step);
+        },
+        setToMin(ctx2) {
+          ctx2.value = ctx2.min;
+        },
+        setToMax(ctx2) {
+          ctx2.value = ctx2.max;
+        },
+        setValue(ctx2, evt) {
+          ctx2.value = utils.convert(ctx2, evt.value);
+        }
+      }
+    }
+  );
+}
+export {
+  connect,
+  machine,
+  dom as unstable__dom
+};

package/package.json

@@ -1,8 +1,10 @@
 {
-  "type": "module",
   "name": "@zag-js/slider",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "Core logic for the slider widget implemented as a state machine",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "keywords": [
     "js",
     "machine",
@@ -15,8 +17,6 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/slider",
   "sideEffects": false,
   "files": [
@@ -29,19 +29,19 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.11",
-    "@zag-js/element-size": "0.2.2",
-    "@zag-js/types": "0.2.6"
+    "@zag-js/core": "0.1.12",
+    "@zag-js/element-size": "0.2.3",
+    "@zag-js/types": "0.2.7"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.1.12",
-    "@zag-js/form-utils": "0.1.2",
-    "@zag-js/number-utils": "0.1.5"
+    "@zag-js/dom-utils": "0.1.13",
+    "@zag-js/form-utils": "0.1.3",
+    "@zag-js/number-utils": "0.1.6"
   },
   "scripts": {
-    "build-fast": "tsup src/index.ts --format=esm",
+    "build-fast": "tsup src/index.ts --format=esm,cjs",
     "start": "pnpm build --watch",
-    "build": "tsup src/index.ts --format=esm --dts",
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
     "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
     "lint": "eslint src --ext .ts,.tsx",
     "test-ci": "pnpm test --ci --runInBand",