@zag-js/slider 0.2.13 → 0.2.15

package/dist/slider.machine.js

@@ -24,357 +24,17 @@ __export(slider_machine_exports, {
 });
 module.exports = __toCommonJS(slider_machine_exports);
 var import_core = require("@zag-js/core");
-
-// ../../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    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() {
-  const agent = navigator.userAgentData;
-  return agent?.platform ?? navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-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;
-}
-function isWindow(value) {
-  return value?.toString() === "[object Window]";
-}
-function getDocument(el) {
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return el?.ownerDocument ?? document;
-}
-function getWindow(el) {
-  return el?.ownerDocument.defaultView ?? window;
-}
-function defineDomHelpers(helpers) {
-  const dom2 = {
-    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
-    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
-// ../../utilities/dom/src/event.ts
-var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
-var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
-var supportsMouseEvent = () => isDom() && window.onmousedown === null;
-var isMouseEvent = (v) => isObject(v) && hasProp(v, "button");
-var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
-var isLeftClick = (v) => v.button === 0;
-
-// ../../utilities/dom/src/get-element-offset.ts
-function getElementOffset(element) {
-  let left = 0;
-  let top = 0;
-  let el = element;
-  if (el.parentNode) {
-    do {
-      left += el.offsetLeft;
-      top += el.offsetTop;
-    } while ((el = el.offsetParent) && el.nodeType < 9);
-    el = element;
-    do {
-      left -= el.scrollLeft;
-      top -= el.scrollTop;
-    } while ((el = el.parentNode) && !/body/i.test(el.nodeName));
-  }
-  return {
-    top,
-    right: innerWidth - left - element.offsetWidth,
-    bottom: innerHeight - top - element.offsetHeight,
-    left
-  };
-}
-
-// ../../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/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?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
-  };
-}
-function addPointerEvent(target, event, listener, options) {
-  const type = getEventName(event) ?? 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) => {
-    const win = event.view ?? 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 ?? 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 ?? 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 ?? "";
-      }
-      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 })
-  );
-}
-
-// src/slider.machine.ts
+var import_dom_event2 = require("@zag-js/dom-event");
+var import_dom_query2 = require("@zag-js/dom-query");
 var import_element_size = require("@zag-js/element-size");
-
-// ../../utilities/form-utils/src/input-event.ts
-function getDescriptor(el, options) {
-  const { type, property = "value" } = options;
-  const proto = getWindow(el)[type].prototype;
-  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
-}
-function dispatchInputValueEvent(el, value) {
-  if (!el)
-    return;
-  const win = getWindow(el);
-  if (!(el instanceof win.HTMLInputElement))
-    return;
-  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
-  desc.set?.call(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;
-  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?.addEventListener("reset", callback, { passive: true });
-  return () => {
-    form?.removeEventListener("reset", callback);
-  };
-}
-function trackFieldsetDisabled(el, callback) {
-  const fieldset = 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?.());
-  };
-}
-
-// src/slider.machine.ts
+var import_form_utils2 = require("@zag-js/form-utils");
 var import_numeric_range4 = require("@zag-js/numeric-range");
+var import_utils = require("@zag-js/utils");
 
 // src/slider.dom.ts
+var import_dom_query = require("@zag-js/dom-query");
+var import_dom_event = require("@zag-js/dom-event");
+var import_form_utils = require("@zag-js/form-utils");
 var import_numeric_range2 = require("@zag-js/numeric-range");
 
 // src/slider.style.ts
@@ -490,7 +150,7 @@ var styles = {
 };
 
 // src/slider.dom.ts
-var dom = defineDomHelpers({
+var dom = (0, import_dom_query.createScope)({
   ...styles,
   getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
   getThumbId: (ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
@@ -509,7 +169,7 @@ var dom = defineDomHelpers({
     const el = dom.getControlEl(ctx);
     if (!el)
       return;
-    const relativePoint = getPointRelativeToNode(point, el);
+    const relativePoint = (0, import_dom_event.getRelativePointValue)(point, el);
     const percentX = relativePoint.x / el.offsetWidth;
     const percentY = relativePoint.y / el.offsetHeight;
     let percent;
@@ -524,7 +184,7 @@ var dom = defineDomHelpers({
     const input = dom.getHiddenInputEl(ctx);
     if (!input)
       return;
-    dispatchInputValueEvent(input, ctx.value);
+    (0, import_form_utils.dispatchInputValueEvent)(input, ctx.value);
   }
 });
 
@@ -555,7 +215,7 @@ function increment(ctx, step) {
 
 // src/slider.machine.ts
 function machine(userContext) {
-  const ctx = compact(userContext);
+  const ctx = (0, import_utils.compact)(userContext);
   return (0, import_core.createMachine)(
     {
       id: "slider",
@@ -669,7 +329,7 @@ function machine(userContext) {
       },
       activities: {
         trackFormControlState(ctx2) {
-          return trackFormControl(dom.getHiddenInputEl(ctx2), {
+          return (0, import_form_utils2.trackFormControl)(dom.getHiddenInputEl(ctx2), {
             onFieldsetDisabled() {
               ctx2.disabled = true;
             },
@@ -681,7 +341,7 @@ function machine(userContext) {
           });
         },
         trackPointerMove(ctx2, _evt, { send }) {
-          return trackPointerMove(dom.getDoc(ctx2), {
+          return (0, import_dom_event2.trackPointerMove)(dom.getDoc(ctx2), {
             onPointerMove(info) {
               send({ type: "POINTER_MOVE", point: info.point });
             },
@@ -724,7 +384,7 @@ function machine(userContext) {
           ctx2.value = (0, import_numeric_range4.clampValue)(value, ctx2.min, ctx2.max);
         },
         focusThumb(ctx2) {
-          raf(() => dom.getThumbEl(ctx2)?.focus());
+          (0, import_dom_query2.raf)(() => dom.getThumbEl(ctx2)?.focus());
         },
         decrement(ctx2, evt) {
           ctx2.value = decrement(ctx2, evt.step);

package/dist/slider.machine.mjs

@@ -1,8 +1,7 @@
 import {
   machine
-} from "./chunk-5XVLG734.mjs";
-import "./chunk-3UP6QL6A.mjs";
-import "./chunk-55KEN77D.mjs";
+} from "./chunk-VTUEW45P.mjs";
+import "./chunk-5CWNUPC7.mjs";
 import "./chunk-IJAAAKZQ.mjs";
 import "./chunk-YGFSMEUO.mjs";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,16 +27,17 @@
   },
   "dependencies": {
     "@zag-js/anatomy": "0.1.4",
-    "@zag-js/core": "0.2.9",
+    "@zag-js/core": "0.2.10",
+    "@zag-js/dom-query": "0.1.4",
+    "@zag-js/dom-event": "0.0.1",
+    "@zag-js/form-utils": "0.2.5",
+    "@zag-js/utils": "0.3.3",
     "@zag-js/element-size": "0.3.2",
     "@zag-js/numeric-range": "0.1.1",
     "@zag-js/types": "0.3.4"
   },
   "devDependencies": {
-    "clean-package": "2.2.0",
-    "@zag-js/dom-utils": "0.2.4",
-    "@zag-js/form-utils": "0.2.4",
-    "@zag-js/utils": "0.3.3"
+    "clean-package": "2.2.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "main": "dist/index.js",

package/dist/chunk-3UP6QL6A.mjs

@@ -1,42 +0,0 @@
-// ../../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/dom/src/platform.ts
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  const agent = navigator.userAgentData;
-  return agent?.platform ?? navigator.platform;
-}
-var pt = (v) => isDom() && v.test(getPlatform());
-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/event.ts
-function getNativeEvent(e) {
-  return e.nativeEvent ?? e;
-}
-var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
-var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
-var supportsMouseEvent = () => isDom() && window.onmousedown === null;
-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;
-
-export {
-  isObject,
-  hasProp,
-  isIos,
-  getNativeEvent,
-  supportsPointerEvent,
-  supportsTouchEvent,
-  supportsMouseEvent,
-  isMouseEvent,
-  isTouchEvent,
-  isLeftClick,
-  isModifiedEvent
-};

package/dist/chunk-55KEN77D.mjs

@@ -1,128 +0,0 @@
-import {
-  styles
-} from "./chunk-IJAAAKZQ.mjs";
-
-// ../../utilities/dom/src/query.ts
-function isDocument(el) {
-  return el.nodeType === Node.DOCUMENT_NODE;
-}
-function isWindow(value) {
-  return value?.toString() === "[object Window]";
-}
-function getDocument(el) {
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return el?.ownerDocument ?? document;
-}
-function getWindow(el) {
-  return el?.ownerDocument.defaultView ?? window;
-}
-function defineDomHelpers(helpers) {
-  const dom2 = {
-    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
-    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
-// ../../utilities/dom/src/get-element-offset.ts
-function getElementOffset(element) {
-  let left = 0;
-  let top = 0;
-  let el = element;
-  if (el.parentNode) {
-    do {
-      left += el.offsetLeft;
-      top += el.offsetTop;
-    } while ((el = el.offsetParent) && el.nodeType < 9);
-    el = element;
-    do {
-      left -= el.scrollLeft;
-      top -= el.scrollTop;
-    } while ((el = el.parentNode) && !/body/i.test(el.nodeName));
-  }
-  return {
-    top,
-    right: innerWidth - left - element.offsetWidth,
-    bottom: innerHeight - top - element.offsetHeight,
-    left
-  };
-}
-
-// ../../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/form-utils/src/input-event.ts
-function getDescriptor(el, options) {
-  const { type, property = "value" } = options;
-  const proto = getWindow(el)[type].prototype;
-  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
-}
-function dispatchInputValueEvent(el, value) {
-  if (!el)
-    return;
-  const win = getWindow(el);
-  if (!(el instanceof win.HTMLInputElement))
-    return;
-  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
-  desc.set?.call(el, value);
-  const event = new win.Event("input", { bubbles: true });
-  el.dispatchEvent(event);
-}
-
-// src/slider.dom.ts
-import { getPercentValue } from "@zag-js/numeric-range";
-var dom = defineDomHelpers({
-  ...styles,
-  getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
-  getThumbId: (ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
-  getControlId: (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
-  getHiddenInputId: (ctx) => `slider:${ctx.id}:input`,
-  getOutputId: (ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
-  getTrackId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}track`,
-  getRangeId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:range`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
-  getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
-  getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
-  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
-  getValueFromPoint(ctx, point) {
-    const el = dom.getControlEl(ctx);
-    if (!el)
-      return;
-    const relativePoint = getPointRelativeToNode(point, el);
-    const percentX = relativePoint.x / el.offsetWidth;
-    const percentY = relativePoint.y / el.offsetHeight;
-    let percent;
-    if (ctx.isHorizontal) {
-      percent = ctx.isRtl ? 1 - percentX : percentX;
-    } else {
-      percent = 1 - percentY;
-    }
-    return getPercentValue(percent, ctx.min, ctx.max, ctx.step);
-  },
-  dispatchChangeEvent(ctx) {
-    const input = dom.getHiddenInputEl(ctx);
-    if (!input)
-      return;
-    dispatchInputValueEvent(input, ctx.value);
-  }
-});
-
-export {
-  dom
-};