@zag-js/slider 0.2.6 → 0.2.7

package/dist/chunk-3JMGYHB3.mjs

@@ -0,0 +1,469 @@
+import {
+  hasProp,
+  isIos,
+  isLeftClick,
+  isMouseEvent,
+  isObject,
+  isTouchEvent,
+  supportsMouseEvent,
+  supportsPointerEvent,
+  supportsTouchEvent
+} from "./chunk-SGCWELVB.mjs";
+import {
+  dom
+} from "./chunk-MR2MUD77.mjs";
+import {
+  utils
+} from "./chunk-FUTBDWTA.mjs";
+
+// src/slider.machine.ts
+import { createMachine } from "@zag-js/core";
+
+// ../../utilities/core/src/functions.ts
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
+};
+
+// ../../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/listener.ts
+var isRef = (v) => hasProp(v, "current");
+var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
+function extractInfo(event, type = "page") {
+  const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : 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) {
+  var _a;
+  const type = (_a = getEventName(event)) != null ? _a : 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) => {
+    var _a;
+    const win = (_a = event.view) != null ? _a : 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;
+}
+
+// ../../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) {
+    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);
+  };
+}
+
+// ../../utilities/dom/src/text-selection.ts
+var state = "default";
+var savedUserSelect = "";
+var modifiedElementMap = /* @__PURE__ */ new WeakMap();
+function disableTextSelection({ target, doc } = {}) {
+  const _document = doc != null ? 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 != null ? 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 != null ? targetOldUserSelect : "";
+      }
+      if (target.getAttribute("style") === "") {
+        target.removeAttribute("style");
+      }
+      modifiedElementMap.delete(target);
+    }
+  }
+}
+
+// ../../utilities/dom/src/pointer-event.ts
+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/src/form.ts
+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));
+}
+function trackFormControl(el, options) {
+  if (!el)
+    return;
+  const { onFieldsetDisabled, onFormReset } = options;
+  const cleanups = [
+    trackFormReset(el, onFormReset),
+    trackFieldsetDisabled(el, (disabled) => {
+      if (disabled)
+        onFieldsetDisabled();
+    })
+  ];
+  return () => {
+    cleanups.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
+  };
+}
+
+// src/slider.machine.ts
+import { trackElementSize } from "@zag-js/element-size";
+function machine(userContext) {
+  const ctx = compact(userContext);
+  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: ["trackFormControlState", "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: {
+        trackFormControlState(ctx2) {
+          return trackFormControl(dom.getHiddenInputEl(ctx2), {
+            onFieldsetDisabled() {
+              ctx2.disabled = true;
+            },
+            onFormReset() {
+              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 {
+  machine
+};

package/dist/chunk-3Y7IIPR5.mjs

@@ -0,0 +1,20 @@
+// src/slider.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("slider").parts(
+  "root",
+  "label",
+  "thumb",
+  "hiddenInput",
+  "output",
+  "track",
+  "range",
+  "control",
+  "markerGroup",
+  "marker"
+);
+var parts = anatomy.build();
+
+export {
+  anatomy,
+  parts
+};

package/dist/chunk-FUTBDWTA.mjs

@@ -0,0 +1,33 @@
+import {
+  clamp,
+  decrement,
+  increment,
+  percentToValue,
+  snapToStep
+} from "./chunk-GBYBRQZL.mjs";
+
+// 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);
+  }
+};
+
+export {
+  utils
+};

package/dist/chunk-GBYBRQZL.mjs

@@ -0,0 +1,56 @@
+// ../../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;
+}
+
+export {
+  valueToPercent,
+  percentToValue,
+  clamp,
+  increment,
+  decrement,
+  snapToStep
+};