@zag-js/slider 0.1.12 → 0.1.13

package/dist/index.js

@@ -837,6 +837,7 @@ function connect(state2, send, normalize) {
 
 // src/slider.machine.ts
 var import_core = require("@zag-js/core");
+var import_element_size = require("@zag-js/element-size");
 function machine(ctx) {
   return (0, import_core.createMachine)(
     {
@@ -867,7 +868,7 @@ function machine(ctx) {
       watch: {
         value: ["invokeOnChange", "dispatchChangeEvent"]
       },
-      activities: ["trackFormReset", "trackFieldsetDisabled"],
+      activities: ["trackFormReset", "trackFieldsetDisabled", "trackThumbSize"],
       on: {
         SET_VALUE: {
           actions: "setValue"
@@ -884,7 +885,7 @@ function machine(ctx) {
           on: {
             SETUP: {
               target: "idle",
-              actions: ["setThumbSize", "checkValue"]
+              actions: ["checkValue"]
             }
           }
         },
@@ -979,12 +980,21 @@ function machine(ctx) {
               send("POINTER_UP");
             }
           });
+        },
+        trackThumbSize(ctx2, _evt) {
+          if (ctx2.thumbAlignment !== "contain")
+            return;
+          return (0, import_element_size.trackElementSize)(dom.getThumbEl(ctx2), (size) => {
+            if (size)
+              ctx2.thumbSize = size;
+          });
         }
       },
       actions: {
         checkValue(ctx2) {
           const value = utils.convert(ctx2, ctx2.value);
-          Object.assign(ctx2, { value, initialValue: value });
+          ctx2.value = value;
+          ctx2.initialValue = value;
         },
         invokeOnChangeStart(ctx2) {
           var _a;
@@ -1001,16 +1011,6 @@ function machine(ctx) {
         dispatchChangeEvent(ctx2) {
           dom.dispatchChangeEvent(ctx2);
         },
-        setThumbSize(ctx2) {
-          if (ctx2.thumbAlignment !== "contain")
-            return;
-          raf(() => {
-            const el = dom.getThumbEl(ctx2);
-            if (!el)
-              return;
-            ctx2.thumbSize = { width: el.offsetWidth, height: el.offsetHeight };
-          });
-        },
         setPointerValue(ctx2, evt) {
           const value = dom.getValueFromPoint(ctx2, evt.point);
           if (value == null)

package/dist/index.mjs

@@ -809,6 +809,7 @@ function connect(state2, send, normalize) {
 
 // src/slider.machine.ts
 import { createMachine } from "@zag-js/core";
+import { trackElementSize } from "@zag-js/element-size";
 function machine(ctx) {
   return createMachine(
     {
@@ -839,7 +840,7 @@ function machine(ctx) {
       watch: {
         value: ["invokeOnChange", "dispatchChangeEvent"]
       },
-      activities: ["trackFormReset", "trackFieldsetDisabled"],
+      activities: ["trackFormReset", "trackFieldsetDisabled", "trackThumbSize"],
       on: {
         SET_VALUE: {
           actions: "setValue"
@@ -856,7 +857,7 @@ function machine(ctx) {
           on: {
             SETUP: {
               target: "idle",
-              actions: ["setThumbSize", "checkValue"]
+              actions: ["checkValue"]
             }
           }
         },
@@ -951,12 +952,21 @@ function machine(ctx) {
               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);
-          Object.assign(ctx2, { value, initialValue: value });
+          ctx2.value = value;
+          ctx2.initialValue = value;
         },
         invokeOnChangeStart(ctx2) {
           var _a;
@@ -973,16 +983,6 @@ function machine(ctx) {
         dispatchChangeEvent(ctx2) {
           dom.dispatchChangeEvent(ctx2);
         },
-        setThumbSize(ctx2) {
-          if (ctx2.thumbAlignment !== "contain")
-            return;
-          raf(() => {
-            const el = dom.getThumbEl(ctx2);
-            if (!el)
-              return;
-            ctx2.thumbSize = { width: el.offsetWidth, height: el.offsetHeight };
-          });
-        },
         setPointerValue(ctx2, evt) {
           const value = dom.getValueFromPoint(ctx2, evt.point);
           if (value == null)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,13 +30,13 @@
   },
   "dependencies": {
     "@zag-js/core": "0.1.9",
-    "@zag-js/types": "0.2.3"
+    "@zag-js/element-size": "0.2.0",
+    "@zag-js/types": "0.2.4"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.1.9",
+    "@zag-js/dom-utils": "0.1.10",
     "@zag-js/form-utils": "0.1.0",
-    "@zag-js/number-utils": "0.1.3",
-    "@zag-js/utils": "0.1.3"
+    "@zag-js/number-utils": "0.1.3"
   },
   "scripts": {
     "build-fast": "tsup src/index.ts --format=esm,cjs",