refactor: machines for nullable

Author: segunadebayo

.changeset/quiet-mayflies-do.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/carousel": patch
+---
+
+Enforce required `slideCount` to ensure machine works as expected

.xstate/angle-slider.js

@@ -10,9 +10,44 @@ const {
   choose
 } = actions;
 const fetchMachine = createMachine({
-  id: "angle-slider",
-  initial: "idle",
-  context: {},
+  props({
+    props
+  }) {
+    return {
+      step: 1,
+      defaultValue: 0,
+      ...props
+    };
+  },
+  context({
+    prop,
+    bindable
+  }) {
+    return {
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
+        onChange(value) {
+          prop("onValueChange")?.({
+            value,
+            valueAsDegree: `${value}deg`
+          });
+        }
+      }))
+    };
+  },
+  watch({
+    track,
+    context: {},
+    action
+  }) {
+    track([() => context.get("value")], () => {
+      action(["syncInputElement"]);
+    });
+  },
+  initialState() {
+    return "idle";
+  },
   on: {
     "VALUE.SET": {
       actions: ["setValue"]
@@ -59,18 +94,110 @@ const fetchMachine = createMachine({
       }
     },
     dragging: {
-      entry: "focusThumb",
-      activities: "trackPointerMove",
+      entry: ["focusThumb"],
+      effects: ["trackPointerMove"],
       on: {
         "DOC.POINTER_UP": {
           target: "focused",
-          actions: "invokeOnChangeEnd"
+          actions: ["invokeOnChangeEnd"]
         },
         "DOC.POINTER_MOVE": {
-          actions: "setPointerValue"
+          actions: ["setPointerValue"]
         }
       }
     }
+  },
+  implementations: {
+    effects: {
+      trackPointerMove({
+        scope,
+        send
+      }) {
+        return trackPointerMove(scope.getDoc(), {
+          onPointerMove(info) {
+            send({
+              type: "DOC.POINTER_MOVE",
+              point: info.point
+            });
+          },
+          onPointerUp() {
+            send({
+              type: "DOC.POINTER_UP"
+            });
+          }
+        });
+      }
+    },
+    actions: {
+      syncInputElement({
+        scope,
+        context
+      }) {
+        const inputEl = dom.getHiddenInputEl(scope);
+        setElementValue(inputEl, context.get("value").toString());
+      },
+      invokeOnChangeEnd({
+        context,
+        prop
+      }) {
+        prop("onValueChangeEnd")?.({
+          value: context.get("value"),
+          valueAsDegree: computed("valueAsDegree")
+        });
+      },
+      setPointerValue({
+        scope,
+        event,
+        context,
+        prop
+      }) {
+        const controlEl = dom.getControlEl(scope);
+        if (!controlEl) return;
+        const deg = getAngle(controlEl, event.point);
+        context.set("value", constrainAngle(deg, prop("step")));
+      },
+      setValueToMin({
+        context
+      }) {
+        context.set("value", MIN_VALUE);
+      },
+      setValueToMax({
+        context
+      }) {
+        context.set("value", MAX_VALUE);
+      },
+      setValue({
+        context,
+        event
+      }) {
+        context.set("value", clampAngle(event.value));
+      },
+      decrementValue({
+        context,
+        event,
+        prop
+      }) {
+        const value = snapValueToStep(context.get("value") - event.step, MIN_VALUE, MAX_VALUE, event.step ?? prop("step"));
+        context.set("value", value);
+      },
+      incrementValue({
+        context,
+        event,
+        prop
+      }) {
+        const value = snapValueToStep(context.get("value") + event.step, MIN_VALUE, MAX_VALUE, event.step ?? prop("step"));
+        context.set("value", value);
+      },
+      focusThumb({
+        scope
+      }) {
+        raf(() => {
+          dom.getThumbEl(scope)?.focus({
+            preventScroll: true
+          });
+        });
+      }
+    }
   }
 }, {
   actions: {

.xstate/hover-card.js

@@ -16,7 +16,7 @@ const fetchMachine = createMachine({
     return {
       openDelay: 700,
       closeDelay: 300,
-      ...compact(props),
+      ...props,
       positioning: {
         placement: "bottom",
         ...props.positioning

.xstate/rating-group.js

@@ -18,7 +18,7 @@ const fetchMachine = createMachine({
       count: 5,
       dir: "ltr",
       defaultValue: -1,
-      ...compact(props),
+      ...props,
       translations: {
         ratingValueText: index => `${index} stars`,
         ...props.translations

.xstate/slider.js

@@ -23,7 +23,7 @@ const fetchMachine = createMachine({
       origin: "start",
       orientation: "horizontal",
       minStepsBetweenThumbs: 0,
-      ...compact(props)
+      ...props
     };
   },
   initialState() {
@@ -75,7 +75,6 @@ const fetchMachine = createMachine({
       action(["syncInputElements"]);
     });
   },
-  entry: ["coarseValue"],
   effects: ["trackFormControlState", "trackThumbsSize"],
   on: {
     SET_VALUE: [{
@@ -309,13 +308,6 @@ const fetchMachine = createMachine({
         } = getRangeAtIndex(params, index);
         context.set("value", prev => setValueAtIndex(prev, index, max));
       },
-      coarseValue(params) {
-        const {
-          context
-        } = params;
-        const value = normalizeValues(params, context.get("value"));
-        context.set("value", value);
-      },
       setValueAtIndex(params) {
         const {
           context,