@zag-js/slider 0.2.7 → 0.2.9

package/dist/{chunk-3JMGYHB3.mjs → chunk-A2ZK6G4F.mjs}

@@ -11,10 +11,12 @@ import {
 } from "./chunk-SGCWELVB.mjs";
 import {
   dom
-} from "./chunk-MR2MUD77.mjs";
+} from "./chunk-J5IGGBVE.mjs";
 import {
-  utils
-} from "./chunk-FUTBDWTA.mjs";
+  constrainValue,
+  decrement,
+  increment
+} from "./chunk-DRAPR6JV.mjs";
 
 // src/slider.machine.ts
 import { createMachine } from "@zag-js/core";
@@ -216,6 +218,9 @@ function trackPointerMove(doc, opts) {
   );
 }
 
+// src/slider.machine.ts
+import { trackElementSize } from "@zag-js/element-size";
+
 // ../../utilities/form-utils/src/form.ts
 function getClosestForm(el) {
   if (isFormElement(el))
@@ -259,7 +264,7 @@ function trackFormControl(el, options) {
 }
 
 // src/slider.machine.ts
-import { trackElementSize } from "@zag-js/element-size";
+import { clampValue, getValuePercent } from "@zag-js/numeric-range";
 function machine(userContext) {
   const ctx = compact(userContext);
   return createMachine(
@@ -286,7 +291,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 * getValuePercent(ctx2.value, ctx2.min, ctx2.max)
       },
       watch: {
         value: ["invokeOnChange", "dispatchChangeEvent"]
@@ -413,7 +419,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;
         },
@@ -436,7 +442,7 @@ function machine(userContext) {
           const value = dom.getValueFromPoint(ctx2, evt.point);
           if (value == null)
             return;
-          ctx2.value = utils.clamp(ctx2, value);
+          ctx2.value = clampValue(value, ctx2.min, ctx2.max);
         },
         focusThumb(ctx2) {
           raf(() => {
@@ -445,10 +451,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;
@@ -457,7 +463,7 @@ function machine(userContext) {
           ctx2.value = ctx2.max;
         },
         setValue(ctx2, evt) {
-          ctx2.value = utils.convert(ctx2, evt.value);
+          ctx2.value = constrainValue(ctx2, evt.value);
         }
       }
     }

package/dist/chunk-DRAPR6JV.mjs

@@ -0,0 +1,34 @@
+// src/slider.utils.ts
+import { clampValue, getNextStepValue, getPreviousStepValue, snapValueToStep } from "@zag-js/numeric-range";
+function clampPercent(percent) {
+  return clampValue(percent, 0, 1);
+}
+function constrainValue(ctx, value) {
+  const snapValue = snapValueToStep(value, ctx.min, ctx.max, ctx.step);
+  return clampValue(snapValue, ctx.min, ctx.max);
+}
+function decrement(ctx, step) {
+  const index = 0;
+  const values = getPreviousStepValue(index, {
+    ...ctx,
+    step: step != null ? step : ctx.step,
+    values: [ctx.value]
+  });
+  return values[index];
+}
+function increment(ctx, step) {
+  const index = 0;
+  const values = getNextStepValue(index, {
+    ...ctx,
+    step: step != null ? step : ctx.step,
+    values: [ctx.value]
+  });
+  return values[index];
+}
+
+export {
+  clampPercent,
+  constrainValue,
+  decrement,
+  increment
+};

package/dist/{chunk-MR2MUD77.mjs → chunk-J5IGGBVE.mjs}

@@ -1,9 +1,6 @@
 import {
   styles
-} from "./chunk-MXJ3RGFD.mjs";
-import {
-  utils
-} from "./chunk-FUTBDWTA.mjs";
+} from "./chunk-YREEXXZP.mjs";
 
 // ../../utilities/dom/src/query.ts
 function isDocument(el) {
@@ -36,25 +33,7 @@ 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,
@@ -115,6 +94,7 @@ function dispatchInputValueEvent(el, value) {
 }
 
 // src/slider.dom.ts
+import { getPercentValue } from "@zag-js/numeric-range";
 var dom = defineDomHelpers({
   ...styles,
   getRootId: (ctx) => {
@@ -164,7 +144,7 @@ var dom = defineDomHelpers({
     } else {
       percent = 1 - percentY;
     }
-    return utils.fromPercent(ctx, percent);
+    return getPercentValue(percent, ctx.min, ctx.max, ctx.step);
   },
   dispatchChangeEvent(ctx) {
     const input = dom.getHiddenInputEl(ctx);

package/dist/{chunk-YCRSV2RE.mjs → chunk-WMQQQRK5.mjs}

@@ -9,11 +9,7 @@ import {
 } from "./chunk-SGCWELVB.mjs";
 import {
   dom
-} from "./chunk-MR2MUD77.mjs";
-import {
-  percentToValue,
-  valueToPercent
-} from "./chunk-GBYBRQZL.mjs";
+} from "./chunk-J5IGGBVE.mjs";
 
 // ../../utilities/dom/src/attrs.ts
 var dataAttr = (guard) => {
@@ -71,6 +67,7 @@ function getEventStep(event) {
 }
 
 // src/slider.connect.ts
+import { getPercentValue, getValuePercent } from "@zag-js/numeric-range";
 function connect(state, send, normalize) {
   var _a, _b;
   const ariaLabel = state.context["aria-label"];
@@ -81,16 +78,19 @@ function connect(state, send, normalize) {
   const isDisabled = state.context.disabled;
   const isInteractive = state.context.isInteractive;
   const isInvalid = state.context.invalid;
-  return {
+  const api = {
     isFocused,
     isDragging,
     value: state.context.value,
-    percent: valueToPercent(state.context.value, state.context),
+    percent: getValuePercent(state.context.value, state.context.min, state.context.max),
     setValue(value) {
       send({ type: "SET_VALUE", value });
     },
     getPercentValue(percent) {
-      return percentToValue(percent, state.context);
+      return getPercentValue(percent, state.context.min, state.context.max, state.context.step);
+    },
+    getValuePercent(value) {
+      return getValuePercent(value, state.context.min, state.context.max);
     },
     focus() {
       var _a2;
@@ -266,7 +266,7 @@ function connect(state, send, normalize) {
       style: dom.getMarkerGroupStyle()
     }),
     getMarkerProps({ value }) {
-      const percent = valueToPercent(value, state.context);
+      const percent = api.getValuePercent(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({
@@ -281,6 +281,7 @@ function connect(state, send, normalize) {
       });
     }
   };
+  return api;
 }
 
 export {

package/dist/{chunk-MXJ3RGFD.mjs → chunk-YREEXXZP.mjs}

@@ -1,59 +1,51 @@
-import {
-  valueToPercent
-} from "./chunk-GBYBRQZL.mjs";
-
-// ../../utilities/number/src/transform.ts
-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
+import { getValuePercent, getValueTransformer } from "@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 = 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 = 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 = 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 = 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 };
@@ -92,7 +84,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() {

package/dist/index.js

@@ -117,25 +117,7 @@ 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,
@@ -415,65 +397,8 @@ function trackPointerMove(doc, opts) {
   );
 }
 
-// ../../utilities/number/src/number.ts
-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;
-}
-
-// ../../utilities/number/src/transform.ts
-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/src/input-event.ts
 function getDescriptor(el, options) {
@@ -537,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 };
@@ -615,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() {
@@ -643,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,
@@ -715,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);
@@ -736,16 +650,19 @@ function connect(state2, send, normalize) {
   const isDisabled = state2.context.disabled;
   const isInteractive = state2.context.isInteractive;
   const isInvalid = state2.context.invalid;
-  return {
+  const api = {
     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;
@@ -921,7 +838,7 @@ function connect(state2, send, normalize) {
       style: dom.getMarkerGroupStyle()
     }),
     getMarkerProps({ value }) {
-      const percent = valueToPercent(value, state2.context);
+      const percent = api.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({
@@ -936,11 +853,40 @@ function connect(state2, send, normalize) {
       });
     }
   };
+  return api;
 }
 
 // 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");
+
+// 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
 function machine(userContext) {
   const ctx = compact(userContext);
   return (0, import_core.createMachine)(
@@ -967,7 +913,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"]
@@ -1094,7 +1041,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;
         },
@@ -1117,7 +1064,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(() => {
@@ -1126,10 +1073,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;
@@ -1138,7 +1085,7 @@ function machine(userContext) {
           ctx2.value = ctx2.max;
         },
         setValue(ctx2, evt) {
-          ctx2.value = utils.convert(ctx2, evt.value);
+          ctx2.value = constrainValue(ctx2, evt.value);
         }
       }
     }

package/dist/index.mjs

@@ -1,19 +1,18 @@
 import {
   connect
-} from "./chunk-YCRSV2RE.mjs";
+} from "./chunk-WMQQQRK5.mjs";
 import {
   anatomy
 } from "./chunk-3Y7IIPR5.mjs";
 import {
   machine
-} from "./chunk-3JMGYHB3.mjs";
+} from "./chunk-A2ZK6G4F.mjs";
 import "./chunk-SGCWELVB.mjs";
 import {
   dom
-} from "./chunk-MR2MUD77.mjs";
-import "./chunk-MXJ3RGFD.mjs";
-import "./chunk-FUTBDWTA.mjs";
-import "./chunk-GBYBRQZL.mjs";
+} from "./chunk-J5IGGBVE.mjs";
+import "./chunk-YREEXXZP.mjs";
+import "./chunk-DRAPR6JV.mjs";
 export {
   anatomy,
   connect,

package/dist/slider.connect.d.ts

@@ -9,6 +9,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
     percent: number;
     setValue(value: number): void;
     getPercentValue(percent: number): number;
+    getValuePercent(value: number): number;
     focus(): void;
     increment(): void;
     decrement(): void;