@zag-js/slider 0.2.6 → 0.2.8

package/dist/index.js

@@ -43,10 +43,12 @@ var anatomy = (0, import_anatomy.createAnatomy)("slider").parts(
 );
 var parts = anatomy.build();
 
-// ../../utilities/dom/dist/index.mjs
+// ../../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 != null ? res : void 0;
@@ -56,9 +58,22 @@ var callAll = (...fns) => (...a) => {
     fn == null ? void 0 : 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() {
   var _a;
@@ -70,6 +85,8 @@ 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;
 }
@@ -84,6 +101,10 @@ function getDocument(el) {
     return el;
   return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
 }
+function getWindow(el) {
+  var _a;
+  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+}
 function defineDomHelpers(helpers) {
   const dom2 = {
     getRootNode: (ctx) => {
@@ -96,31 +117,15 @@ function defineDomHelpers(helpers) {
       return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
     },
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
-    createEmitter: (ctx, target) => {
-      const win = dom2.getWin(ctx);
-      return function emit(evt, detail, options) {
-        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
-        const eventName = `zag:${evt}`;
-        const init = { bubbles, cancelable, composed, detail };
-        const event = new win.CustomEvent(eventName, init);
-        target.dispatchEvent(event);
-      };
-    },
-    createListener: (target) => {
-      return function listen(evt, handler) {
-        const eventName = `zag:${evt}`;
-        const listener = (e) => handler(e);
-        target.addEventListener(eventName, listener);
-        return () => target.removeEventListener(eventName, listener);
-      };
-    }
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
   return {
     ...dom2,
     ...helpers
   };
 }
+
+// ../../utilities/dom/src/event.ts
 function getNativeEvent(e) {
   var _a;
   return (_a = e.nativeEvent) != null ? _a : e;
@@ -132,6 +137,8 @@ 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;
@@ -154,6 +161,8 @@ function getElementOffset(element) {
     left
   };
 }
+
+// ../../utilities/dom/src/get-event-point.ts
 var fallback = {
   pageX: 0,
   pageY: 0,
@@ -165,12 +174,16 @@ function getEventPoint(event, type = "page") {
   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`] };
 }
+
+// ../../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"
@@ -206,6 +219,8 @@ function getEventStep(event) {
     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") {
@@ -270,6 +285,25 @@ function getEventName(evt) {
     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) {
@@ -289,6 +323,8 @@ function raf(fn) {
     globalThis.cancelAnimationFrame(id);
   };
 }
+
+// ../../utilities/dom/src/text-selection.ts
 var state = "default";
 var savedUserSelect = "";
 var modifiedElementMap = /* @__PURE__ */ new WeakMap();
@@ -336,6 +372,8 @@ function restoreTextSelection({ target, doc } = {}) {
     }
   }
 }
+
+// ../../utilities/dom/src/pointer-event.ts
 var THRESHOLD = 5;
 function trackPointerMove(doc, opts) {
   const { onPointerMove, onPointerUp } = opts;
@@ -359,85 +397,10 @@ function trackPointerMove(doc, opts) {
   );
 }
 
-// ../../utilities/number/dist/index.mjs
-function round(v, t) {
-  let num = valueOf(v);
-  const p = 10 ** (t != null ? 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.connect.ts
+var import_numeric_range3 = require("@zag-js/numeric-range");
 
-// ../../utilities/form-utils/dist/index.mjs
-function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : 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();
-}
+// ../../utilities/form-utils/src/input-event.ts
 function getDescriptor(el, options) {
   var _a;
   const { type, property = "value" } = options;
@@ -456,6 +419,8 @@ function dispatchInputValueEvent(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;
@@ -497,46 +462,57 @@ function trackFormControl(el, options) {
   };
 }
 
+// src/slider.dom.ts
+var import_numeric_range2 = require("@zag-js/numeric-range");
+
 // src/slider.style.ts
+var import_numeric_range = require("@zag-js/numeric-range");
 function getVerticalThumbOffset(ctx) {
   var _a;
   const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
-  const getValue = transform([ctx.min, ctx.max], [-height / 2, height / 2]);
+  const getValue = (0, import_numeric_range.getValueTransformer)([ctx.min, ctx.max], [-height / 2, height / 2]);
   return parseFloat(getValue(ctx.value).toFixed(2));
 }
 function getHorizontalThumbOffset(ctx) {
   var _a;
   const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
   if (ctx.isRtl) {
-    const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
+    const getValue2 = (0, import_numeric_range.getValueTransformer)([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]);
+  const getValue = (0, import_numeric_range.getValueTransformer)([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")
+  const percent = (0, import_numeric_range.getValuePercent)(ctx.value, ctx.min, ctx.max) * 100;
+  if (ctx.thumbAlignment === "center") {
     return `${percent}%`;
+  }
   const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
   return `calc(${percent}% - ${offset}px)`;
 }
+function getVisibility(ctx) {
+  let visibility = "visible";
+  if (ctx.thumbAlignment === "contain" && !ctx.hasMeasuredThumbSize) {
+    visibility = "hidden";
+  }
+  return visibility;
+}
 function getThumbStyle(ctx) {
   const placementProp = ctx.isVertical ? "bottom" : ctx.isRtl ? "right" : "left";
   return {
-    visibility: ctx.hasMeasuredThumbSize ? "visible" : "hidden",
+    visibility: getVisibility(ctx),
     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}%`;
+  let end = `${100 - ctx.valuePercent}%`;
   if (ctx.origin === "center") {
-    const isNegative = percent < 50;
-    start = isNegative ? `${percent}%` : "50%";
+    const isNegative = ctx.valuePercent < 50;
+    start = isNegative ? `${ctx.valuePercent}%` : "50%";
     end = isNegative ? "50%" : end;
   }
   return { start, end };
@@ -575,7 +551,7 @@ function getMarkerStyle(ctx, percent) {
   return {
     position: "absolute",
     pointerEvents: "none",
-    [ctx.isHorizontal ? "left" : "bottom"]: `${ctx.isRtl ? 100 - percent : percent}%`
+    [ctx.isHorizontal ? "left" : "bottom"]: `${(ctx.isRtl ? 1 - percent : percent) * 100}%`
   };
 }
 function getLabelStyle() {
@@ -603,28 +579,6 @@ var styles = {
   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 != null ? step : ctx.step);
-    return utils.convert(ctx, value);
-  },
-  increment(ctx, step) {
-    let value = increment(ctx.value, step != null ? step : ctx.step);
-    return utils.convert(ctx, value);
-  }
-};
-
 // src/slider.dom.ts
 var dom = defineDomHelpers({
   ...styles,
@@ -675,7 +629,7 @@ var dom = defineDomHelpers({
     } else {
       percent = 1 - percentY;
     }
-    return utils.fromPercent(ctx, percent);
+    return (0, import_numeric_range2.getPercentValue)(percent, ctx.min, ctx.max, ctx.step);
   },
   dispatchChangeEvent(ctx) {
     const input = dom.getHiddenInputEl(ctx);
@@ -700,12 +654,15 @@ function connect(state2, send, normalize) {
     isFocused,
     isDragging,
     value: state2.context.value,
-    percent: valueToPercent(state2.context.value, state2.context),
+    percent: (0, import_numeric_range3.getValuePercent)(state2.context.value, state2.context.min, state2.context.max),
     setValue(value) {
       send({ type: "SET_VALUE", value });
     },
     getPercentValue(percent) {
-      return percentToValue(percent, state2.context);
+      return (0, import_numeric_range3.getPercentValue)(percent, state2.context.min, state2.context.max, state2.context.step);
+    },
+    getValuePercent(value) {
+      return (0, import_numeric_range3.getValuePercent)(value, state2.context.min, state2.context.max);
     },
     focus() {
       var _a2;
@@ -881,7 +838,7 @@ function connect(state2, send, normalize) {
       style: dom.getMarkerGroupStyle()
     }),
     getMarkerProps({ value }) {
-      const percent = valueToPercent(value, state2.context);
+      const percent = this.getValuePercent(value);
       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({
@@ -901,16 +858,31 @@ function connect(state2, send, normalize) {
 // src/slider.machine.ts
 var import_core = require("@zag-js/core");
 var import_element_size = require("@zag-js/element-size");
+var import_numeric_range5 = require("@zag-js/numeric-range");
 
-// ../../utilities/core/dist/index.mjs
-var isArray2 = (v) => Array.isArray(v);
-var isObject2 = (v) => !(v == null || typeof v !== "object" || isArray2(v));
-function compact(obj) {
-  if (obj === void 0)
-    return obj;
-  return Object.fromEntries(
-    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject2(value) ? compact(value) : value])
-  );
+// src/slider.utils.ts
+var import_numeric_range4 = require("@zag-js/numeric-range");
+function constrainValue(ctx, value) {
+  const snapValue = (0, import_numeric_range4.snapValueToStep)(value, ctx.min, ctx.max, ctx.step);
+  return (0, import_numeric_range4.clampValue)(snapValue, ctx.min, ctx.max);
+}
+function decrement(ctx, step) {
+  const index = 0;
+  const values = (0, import_numeric_range4.getPreviousStepValue)(index, {
+    ...ctx,
+    step: step != null ? step : ctx.step,
+    values: [ctx.value]
+  });
+  return values[index];
+}
+function increment(ctx, step) {
+  const index = 0;
+  const values = (0, import_numeric_range4.getNextStepValue)(index, {
+    ...ctx,
+    step: step != null ? step : ctx.step,
+    values: [ctx.value]
+  });
+  return values[index];
 }
 
 // src/slider.machine.ts
@@ -940,7 +912,8 @@ function machine(userContext) {
         isVertical: (ctx2) => ctx2.orientation === "vertical",
         isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
         isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
-        hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null
+        hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null,
+        valuePercent: (ctx2) => 100 * (0, import_numeric_range5.getValuePercent)(ctx2.value, ctx2.min, ctx2.max)
       },
       watch: {
         value: ["invokeOnChange", "dispatchChangeEvent"]
@@ -1067,7 +1040,7 @@ function machine(userContext) {
       },
       actions: {
         checkValue(ctx2) {
-          const value = utils.convert(ctx2, ctx2.value);
+          const value = constrainValue(ctx2, ctx2.value);
           ctx2.value = value;
           ctx2.initialValue = value;
         },
@@ -1090,7 +1063,7 @@ function machine(userContext) {
           const value = dom.getValueFromPoint(ctx2, evt.point);
           if (value == null)
             return;
-          ctx2.value = utils.clamp(ctx2, value);
+          ctx2.value = (0, import_numeric_range5.clampValue)(value, ctx2.min, ctx2.max);
         },
         focusThumb(ctx2) {
           raf(() => {
@@ -1099,10 +1072,10 @@ function machine(userContext) {
           });
         },
         decrement(ctx2, evt) {
-          ctx2.value = utils.decrement(ctx2, evt.step);
+          ctx2.value = decrement(ctx2, evt.step);
         },
         increment(ctx2, evt) {
-          ctx2.value = utils.increment(ctx2, evt.step);
+          ctx2.value = increment(ctx2, evt.step);
         },
         setToMin(ctx2) {
           ctx2.value = ctx2.min;
@@ -1111,7 +1084,7 @@ function machine(userContext) {
           ctx2.value = ctx2.max;
         },
         setValue(ctx2, evt) {
-          ctx2.value = utils.convert(ctx2, evt.value);
+          ctx2.value = constrainValue(ctx2, evt.value);
         }
       }
     }