@zag-js/slider 0.0.0-dev-20220605192656 → 0.0.0-dev-20220609054635

package/dist/index.js

@@ -435,6 +435,27 @@ findByTypeahead.defaultOptions = {
   timer: -1
 };
 
+// ../../utilities/rect/dist/index.mjs
+var isDom2 = () => typeof window !== "undefined";
+var isArray2 = (v) => Array.isArray(v);
+var isObject2 = (v) => !(v == null || typeof v !== "object" || isArray2(v));
+var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var isTouchDevice2 = isDom2() && !!navigator.maxTouchPoints;
+var isTouchEvent2 = (v) => isObject2(v) && hasProp2(v, "touches");
+var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
+function getEventPoint(e, t = "page") {
+  const p = isTouchEvent2(e) ? e.touches[0] || e.changedTouches[0] || fallback2 : e;
+  return { x: p[`${t}X`], y: p[`${t}Y`] };
+}
+function relativeToNode(p, el) {
+  const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
+  const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop;
+  return {
+    point: { x: dx, y: dy },
+    progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight }
+  };
+}
+
 // ../../utilities/number/dist/index.mjs
 var __pow2 = Math.pow;
 function round(v, t) {
@@ -495,50 +516,7 @@ var transform = (a, b) => {
   };
 };
 
-// ../../utilities/rect/dist/index.mjs
-var isDom2 = () => typeof window !== "undefined";
-var isArray2 = (v) => Array.isArray(v);
-var isObject2 = (v) => !(v == null || typeof v !== "object" || isArray2(v));
-var hasProp2 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-var isTouchDevice2 = isDom2() && !!navigator.maxTouchPoints;
-var isTouchEvent2 = (v) => isObject2(v) && hasProp2(v, "touches");
-var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
-function getEventPoint(e, t = "page") {
-  const p = isTouchEvent2(e) ? e.touches[0] || e.changedTouches[0] || fallback2 : e;
-  return { x: p[`${t}X`], y: p[`${t}Y`] };
-}
-function relativeToNode(p, el) {
-  const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
-  const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop;
-  return {
-    point: { x: dx, y: dy },
-    progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight }
-  };
-}
-
-// 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
+// src/slider.style.ts
 function getVerticalThumbOffset(ctx) {
   var _a;
   const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
@@ -555,54 +533,117 @@ function getHorizontalThumbOffset(ctx) {
   const getValue = transform([ctx.min, ctx.max], [-width / 2, width / 2]);
   return parseFloat(getValue(ctx.value).toFixed(2));
 }
-function getThumbStyle(ctx) {
+function getThumbOffset(ctx) {
   const percent = valueToPercent(ctx.value, ctx);
   const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
-  const style = {
+  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)",
-    "--slider-thumb-placement": `calc(${percent}% - ${offset}px)`
+    [placementProp]: "var(--slider-thumb-offset)"
   };
-  if (ctx.isVertical) {
-    style.bottom = "var(--slider-thumb-placement)";
-  } else {
-    style[ctx.isRtl ? "right" : "left"] = "var(--slider-thumb-placement)";
-  }
-  return style;
 }
-function getRangeStyle(ctx) {
+function getRangeOffsets(ctx) {
   const percent = valueToPercent(ctx.value, ctx);
-  const style = {
-    position: "absolute"
-  };
-  let startValue = "0%";
-  let endValue = `${100 - percent}%`;
+  let start = "0%";
+  let end = `${100 - percent}%`;
   if (ctx.origin === "center") {
     const isNegative = percent < 50;
-    startValue = isNegative ? `${percent}%` : "50%";
-    endValue = isNegative ? "50%" : endValue;
+    start = isNegative ? `${percent}%` : "50%";
+    end = isNegative ? "50%" : end;
   }
+  return { start, end };
+}
+function getRangeStyle(ctx) {
   if (ctx.isVertical) {
-    return __spreadProps(__spreadValues({}, style), {
-      bottom: startValue,
-      top: endValue
-    });
+    return {
+      position: "absolute",
+      bottom: "var(--slider-range-start)",
+      top: "var(--slider-range-end)"
+    };
   }
-  return __spreadProps(__spreadValues({}, style), {
-    [ctx.isRtl ? "right" : "left"]: startValue,
-    [ctx.isRtl ? "left" : "right"]: endValue
-  });
+  return {
+    position: "absolute",
+    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
+    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)"
+  };
 }
-function getControlStyle(ctx) {
+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 dom = {
+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 != 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 = __spreadProps(__spreadValues({}, styles), {
   getDoc: (ctx) => {
     var _a;
     return (_a = ctx.doc) != null ? _a : document;
@@ -630,7 +671,7 @@ var dom = {
   },
   getTrackId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:-${ctx.uid}track`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.uid}track`;
   },
   getRangeId: (ctx) => {
     var _a, _b;
@@ -645,9 +686,6 @@ var dom = {
   getThumbEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getThumbId(ctx)),
   getControlEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getControlId(ctx)),
   getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
-  getControlStyle,
-  getThumbStyle,
-  getRangeStyle,
   getValueFromPoint(ctx, point) {
     const control = dom.getControlEl(ctx);
     if (!control)
@@ -666,21 +704,8 @@ var dom = {
     if (!input)
       return;
     dispatchInputValueEvent(input, ctx.value);
-  },
-  getMarkerStyle(ctx, percent) {
-    const style = {
-      position: "absolute",
-      pointerEvents: "none"
-    };
-    if (ctx.isHorizontal) {
-      percent = ctx.isRtl ? 100 - percent : percent;
-      style.left = `${percent}%`;
-    } else {
-      style.bottom = `${percent}%`;
-    }
-    return style;
   }
-};
+});
 
 // ../../types/dist/index.mjs
 function createNormalizer(fn) {
@@ -735,7 +760,8 @@ function connect(state2, send, normalize = normalizeProp) {
       "data-disabled": dataAttr(isDisabled),
       "data-orientation": state2.context.orientation,
       id: dom.getRootId(state2.context),
-      dir: state2.context.dir
+      dir: state2.context.dir,
+      style: dom.getRootStyle(state2.context)
     }),
     labelProps: normalize.label({
       "data-part": "label",
@@ -750,9 +776,7 @@ function connect(state2, send, normalize = normalizeProp) {
         event.preventDefault();
         (_a2 = dom.getThumbEl(state2.context)) == null ? void 0 : _a2.focus();
       },
-      style: {
-        userSelect: "none"
-      }
+      style: dom.getLabelStyle()
     }),
     thumbProps: normalize.element({
       "data-part": "thumb",
@@ -852,7 +876,7 @@ function connect(state2, send, normalize = normalizeProp) {
       "data-invalid": dataAttr(isInvalid),
       "data-orientation": state2.context.orientation,
       "data-focus": dataAttr(isFocused),
-      style: { position: "relative" }
+      style: dom.getTrackStyle()
     }),
     rangeProps: normalize.element({
       "data-part": "range",
@@ -880,18 +904,14 @@ function connect(state2, send, normalize = normalizeProp) {
         event.preventDefault();
         event.stopPropagation();
       },
-      style: dom.getControlStyle(state2.context)
+      style: dom.getControlStyle()
     }),
     markerGroupProps: normalize.element({
       "data-part": "marker-group",
       role: "presentation",
       "aria-hidden": true,
       "data-orientation": state2.context.orientation,
-      style: {
-        userSelect: "none",
-        pointerEvents: "none",
-        position: "relative"
-      }
+      style: dom.getMarkerGroupStyle()
     }),
     getMarkerProps({ value }) {
       const percent = valueToPercent(value, state2.context);