@zag-js/slider 0.2.7 → 0.2.8

package/dist/slider.connect.js

@@ -65,25 +65,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,
@@ -182,65 +164,8 @@ function getEventStep(event) {
   }
 }
 
-// ../../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");
 
 // src/slider.anatomy.ts
 var import_anatomy = require("@zag-js/anatomy");
@@ -278,46 +203,57 @@ function dispatchInputValueEvent(el, value) {
   el.dispatchEvent(event);
 }
 
+// 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 };
@@ -356,7 +292,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() {
@@ -384,28 +320,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,
@@ -456,7 +370,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);
@@ -481,12 +395,15 @@ function connect(state, send, normalize) {
     isFocused,
     isDragging,
     value: state.context.value,
-    percent: valueToPercent(state.context.value, state.context),
+    percent: (0, import_numeric_range3.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 (0, import_numeric_range3.getPercentValue)(percent, state.context.min, state.context.max, state.context.step);
+    },
+    getValuePercent(value) {
+      return (0, import_numeric_range3.getValuePercent)(value, state.context.min, state.context.max);
     },
     focus() {
       var _a2;
@@ -662,7 +579,7 @@ function connect(state, send, normalize) {
       style: dom.getMarkerGroupStyle()
     }),
     getMarkerProps({ value }) {
-      const percent = valueToPercent(value, state.context);
+      const percent = this.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({

package/dist/slider.connect.mjs

@@ -1,12 +1,10 @@
 import {
   connect
-} from "./chunk-YCRSV2RE.mjs";
+} from "./chunk-6D4ETNPG.mjs";
 import "./chunk-3Y7IIPR5.mjs";
 import "./chunk-SGCWELVB.mjs";
-import "./chunk-MR2MUD77.mjs";
-import "./chunk-MXJ3RGFD.mjs";
-import "./chunk-FUTBDWTA.mjs";
-import "./chunk-GBYBRQZL.mjs";
+import "./chunk-J5IGGBVE.mjs";
+import "./chunk-YREEXXZP.mjs";
 export {
   connect
 };

package/dist/slider.dom.d.ts

@@ -18,10 +18,6 @@ declare const dom: {
     getById: <T = HTMLElement>(ctx: {
         getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
     }, id: string) => T | null;
-    createEmitter: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
-    }, target: HTMLElement) => (evt: string, detail: Record<string, any>, options?: EventInit | undefined) => void;
-    createListener: (target: HTMLElement) => <T_1 = any>(evt: string, handler: (e: CustomEvent<T_1>) => void) => () => void;
 } & {
     getRootId: (ctx: MachineContext) => string;
     getThumbId: (ctx: MachineContext) => string;

package/dist/slider.dom.js

@@ -55,25 +55,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,
@@ -133,106 +115,57 @@ function dispatchInputValueEvent(el, value) {
   el.dispatchEvent(event);
 }
 
-// ../../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.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 };
@@ -271,7 +204,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() {
@@ -299,28 +232,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,
@@ -371,7 +282,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);

package/dist/slider.dom.mjs

@@ -1,9 +1,7 @@
 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";
 export {
   dom
 };