@zag-js/slider 0.1.4 → 0.1.7

package/dist/index.mjs

@@ -42,19 +42,33 @@ function raf(fn) {
     globalThis.cancelAnimationFrame(id);
   };
 }
-var noop = () => {
-};
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-var platform = (v) => isDom() && v.test(navigator.platform);
-var isDom = () => !!(typeof window !== "undefined");
-var isMac = () => platform(/^Mac/);
-var isIPhone = () => platform(/^iPhone/);
-var isIPad = () => platform(/^iPad/) || isMac() && navigator.maxTouchPoints > 1;
-var isIos = () => isIPhone() || isIPad();
+var isDom = () => typeof window !== "undefined";
 var isArray = (v) => Array.isArray(v);
 var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-var isMouseEvent = (v) => isObject(v) && "button" in v;
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function getPlatform() {
+  var _a;
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : 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();
+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 runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var noop = () => {
+};
+var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
 function getListenerElements() {
   ;
   globalThis.__listenerElements__ = globalThis.__listenerElements__ || /* @__PURE__ */ new Map();
@@ -65,7 +79,7 @@ function getListenerCache() {
   globalThis.__listenerCache__ = globalThis.__listenerCache__ || /* @__PURE__ */ new Map();
   return globalThis.__listenerCache__;
 }
-function globalEventBus(node, type, handler, options) {
+function addGlobalEventListener(node, type, handler, options) {
   var _a;
   if (!node)
     return noop;
@@ -117,10 +131,7 @@ function globalEventBus(node, type, handler, options) {
     }
   };
 }
-var t = (v) => Object.prototype.toString.call(v).slice(8, -1);
-var isRef = (v) => t(v) === "Object" && "current" in v;
-var runIfFn = (fn) => t(fn) === "Function" ? fn() : fn;
-var isTouchEvent = (v) => t(v) === "Object" && !!v.touches;
+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;
@@ -133,7 +144,7 @@ function extractInfo(event, type = "page") {
 }
 function addDomEvent(target, event, listener, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
-  return globalEventBus(node, event, listener, options);
+  return addGlobalEventListener(node, event, listener, options);
 }
 function addPointerEvent(target, event, listener, options) {
   var _a;
@@ -156,9 +167,6 @@ function filterPrimaryPointer(fn) {
       fn(event);
   };
 }
-var supportsPointerEvent = () => typeof window !== "undefined" && window.onpointerdown === null;
-var supportsTouchEvent = () => typeof window !== "undefined" && window.ontouchstart === null;
-var supportsMouseEvent = () => typeof window !== "undefined" && window.onmousedown === null;
 var mouseEventNames = {
   pointerdown: "mousedown",
   pointermove: "mousemove",
@@ -188,66 +196,68 @@ function getOwnerWindow(el) {
   var _a;
   return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
 }
-function getNativeEvent(event) {
+function getNativeEvent(e) {
   var _a;
-  return (_a = event.nativeEvent) != null ? _a : event;
-}
-function getDescriptor(el, options) {
-  var _a;
-  const { type, property } = options;
-  const win = getOwnerWindow(el);
-  const _type = type === "input" ? "HTMLInputElement" : "HTMLTextAreaElement";
-  const proto = win[_type].prototype;
-  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+  return (_a = e.nativeEvent) != null ? _a : e;
 }
-function dispatchInputValueEvent(el, value) {
-  var _a;
-  const win = getOwnerWindow(el);
-  if (!(el instanceof win.HTMLInputElement))
-    return;
-  const desc = getDescriptor(el, { type: "input", property: "value" });
-  (_a = desc.set) == null ? void 0 : _a.call(el, value);
-  const event = new win.Event("input", { bubbles: true });
-  el.dispatchEvent(event);
-}
-function trackInputPropertyMutation(el, options) {
-  const { fn, property, type } = options;
-  if (!fn || !el)
-    return;
-  const { get, set } = getDescriptor(el, { property, type });
-  let run = true;
-  Object.defineProperty(el, property, {
-    get() {
-      return get == null ? void 0 : get.call(this);
-    },
-    set(value) {
-      if (run)
-        fn(value);
-      return set == null ? void 0 : set.call(this, value);
+function observeAttributes(node, attributes, fn) {
+  if (!node)
+    return noop;
+  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);
+      }
     }
   });
-  return function() {
-    run = false;
-  };
+  obs.observe(node, { attributes: true, attributeFilter: attrs });
+  return () => obs.disconnect();
 }
-function getClosestFormElement(el) {
+function getClosestForm(el) {
   if (isFormElement(el))
     return el.form;
   else
     return el.closest("form");
 }
 function isFormElement(el) {
-  return ["textarea", "input", "select", "button"].includes(el.localName);
+  return el.matches("textarea, input, select, button");
 }
 function trackFormReset(el, callback) {
   if (!el)
     return;
-  const form = getClosestFormElement(el);
+  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 getDescriptor(el, options) {
+  var _a;
+  const { type, property } = options;
+  const win = getOwnerWindow(el);
+  const _type = type === "input" ? "HTMLInputElement" : "HTMLTextAreaElement";
+  const proto = win[_type].prototype;
+  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+}
+function dispatchInputValueEvent(el, value) {
+  var _a;
+  const win = getOwnerWindow(el);
+  if (!(el instanceof win.HTMLInputElement))
+    return;
+  const desc = getDescriptor(el, { type: "input", property: "value" });
+  (_a = desc.set) == null ? void 0 : _a.call(el, value);
+  const event = new win.Event("input", { bubbles: true });
+  el.dispatchEvent(event);
+}
 var rtlKeyMap = {
   ArrowLeft: "ArrowRight",
   ArrowRight: "ArrowLeft",
@@ -403,11 +413,11 @@ findByTypeahead.defaultOptions = {
 
 // ../../utilities/number/dist/index.mjs
 var __pow2 = Math.pow;
-function round(v, t2) {
+function round(v, t) {
   let num = valueOf(v);
-  const p = __pow2(10, t2 != null ? t2 : 10);
+  const p = __pow2(10, t != null ? t : 10);
   num = Math.round(num * p) / p;
-  return t2 ? num.toFixed(t2) : v.toString();
+  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);
@@ -462,13 +472,16 @@ 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 isTouchEvent2 = (v) => isObject2(v) && "touches" in 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, t2 = "page") {
+function getEventPoint(e, t = "page") {
   const p = isTouchEvent2(e) ? e.touches[0] || e.changedTouches[0] || fallback2 : e;
-  return { x: p[`${t2}X`], y: p[`${t2}Y`] };
+  return { x: p[`${t}X`], y: p[`${t}Y`] };
 }
 function relativeToNode(p, el) {
   const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
@@ -604,6 +617,7 @@ var dom = {
     return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.uid}:label`;
   },
   getMarkerId: (ctx, value) => `slider:${ctx.uid}:marker:${value}`,
+  getRootEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getRootId(ctx)),
   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)),
@@ -646,11 +660,17 @@ var dom = {
 
 // ../../types/dist/index.mjs
 function createNormalizer(fn) {
-  return { button: fn, label: fn, input: fn, output: fn, element: fn };
+  return new Proxy({}, {
+    get() {
+      return fn;
+    }
+  });
 }
 var normalizeProp = createNormalizer((v) => v);
 
 // ../../utilities/core/dist/index.mjs
+var isDom3 = () => typeof window !== "undefined";
+var isTouchDevice3 = isDom3() && !!navigator.maxTouchPoints;
 var isLeftClick2 = (v) => v.button === 0;
 var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
 
@@ -896,7 +916,7 @@ function machine(ctx = {}) {
     watch: {
       value: ["invokeOnChange", "dispatchChangeEvent"]
     },
-    activities: ["trackFormReset", "trackScriptedUpdate"],
+    activities: ["trackFormReset", "trackFieldsetDisabled"],
     on: {
       SET_VALUE: {
         actions: "setValue"
@@ -984,17 +1004,12 @@ function machine(ctx = {}) {
       isVertical: (ctx2) => ctx2.isVertical
     },
     activities: {
-      trackScriptedUpdate(ctx2, _, { send }) {
+      trackFieldsetDisabled(ctx2) {
         let cleanup;
         nextTick(() => {
-          const el = dom.getInputEl(ctx2);
-          if (!el)
-            return;
-          cleanup = trackInputPropertyMutation(el, {
-            type: "input",
-            property: "value",
-            fn(value) {
-              send({ type: "SET_VALUE", value: parseFloat(value) });
+          cleanup = trackFieldsetDisabled(dom.getRootEl(ctx2), (disabled) => {
+            if (disabled != ctx2.disabled) {
+              ctx2.disabled = disabled;
             }
           });
         });
@@ -1003,15 +1018,13 @@ function machine(ctx = {}) {
       trackFormReset(ctx2) {
         let cleanup;
         nextTick(() => {
-          const el = dom.getInputEl(ctx2);
-          if (!el)
-            return;
-          cleanup = trackFormReset(el, () => {
-            if (ctx2.initialValue != null)
+          cleanup = trackFormReset(dom.getInputEl(ctx2), () => {
+            if (ctx2.initialValue != null) {
               ctx2.value = ctx2.initialValue;
+            }
           });
         });
-        return cleanup;
+        return () => cleanup == null ? void 0 : cleanup();
       },
       trackPointerMove(ctx2, _evt, { send }) {
         return trackPointerMove({
@@ -1067,7 +1080,7 @@ function machine(ctx = {}) {
         ctx2.value = utils.clamp(ctx2, value);
       },
       focusThumb(ctx2) {
-        nextTick(() => {
+        raf(() => {
           var _a;
           return (_a = dom.getThumbEl(ctx2)) == null ? void 0 : _a.focus();
         });