@zag-js/steps 0.81.0 → 0.81.1

package/dist/index.d.mts

@@ -50,6 +50,7 @@ type ComputedContext = Readonly<{
     percent: number;
     hasNextStep: boolean;
     hasPrevStep: boolean;
+    completed: boolean;
 }>;
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
@@ -94,6 +95,10 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Whether the stepper has a previous step.
      */
     hasPrevStep: boolean;
+    /**
+     * Whether the stepper is completed.
+     */
+    isCompleted: boolean;
     /**
      * Function to set the value of the stepper.
      */

package/dist/index.d.ts

@@ -50,6 +50,7 @@ type ComputedContext = Readonly<{
     percent: number;
     hasNextStep: boolean;
     hasPrevStep: boolean;
+    completed: boolean;
 }>;
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
@@ -94,6 +95,10 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Whether the stepper has a previous step.
      */
     hasPrevStep: boolean;
+    /**
+     * Whether the stepper is completed.
+     */
+    isCompleted: boolean;
     /**
      * Function to set the value of the stepper.
      */

package/dist/index.js

@@ -62,6 +62,7 @@ function connect(state, send, normalize) {
     percent,
     hasNextStep,
     hasPrevStep,
+    isCompleted: state.context.completed,
     goToNextStep,
     goToPrevStep,
     resetStep,
@@ -212,7 +213,8 @@ function machine(userContext) {
       computed: {
         percent: (ctx2) => ctx2.step / ctx2.count * 100,
         hasNextStep: (ctx2) => ctx2.step < ctx2.count,
-        hasPrevStep: (ctx2) => ctx2.step > 0
+        hasPrevStep: (ctx2) => ctx2.step > 0,
+        completed: (ctx2) => ctx2.step === ctx2.count
       },
       states: {
         idle: {
@@ -246,21 +248,27 @@ function machine(userContext) {
         resetStep(ctx2) {
           set.value(ctx2, 0);
         },
-        setStep(ctx2, event) {
-          const value = event.value;
-          const inRange = value >= 0 && value < ctx2.count;
-          if (!inRange) throw new RangeError(`Index ${value} is out of bounds`);
-          set.value(ctx2, value);
+        setStep(ctx2, evt) {
+          set.value(ctx2, evt.value);
         }
       }
     }
   );
 }
+var validateStep = (ctx, step) => {
+  if (!utils.isValueWithinRange(step, 0, ctx.count)) {
+    throw new RangeError(`[zag-js/steps] step index ${step} is out of bounds`);
+  }
+};
 var set = {
   value(ctx, step) {
     if (utils.isEqual(ctx.step, step)) return;
+    validateStep(ctx, step);
     ctx.step = step;
     ctx.onStepChange?.({ step });
+    if (ctx.completed) {
+      ctx.onStepComplete?.();
+    }
   }
 };
 var props = types.createProps()([

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
 import { createScope, dataAttr } from '@zag-js/dom-query';
-import { createSplitProps, fromLength, compact, isEqual } from '@zag-js/utils';
+import { createSplitProps, fromLength, compact, isEqual, isValueWithinRange } from '@zag-js/utils';
 import { createMachine } from '@zag-js/core';
 import { createProps } from '@zag-js/types';
 
@@ -60,6 +60,7 @@ function connect(state, send, normalize) {
     percent,
     hasNextStep,
     hasPrevStep,
+    isCompleted: state.context.completed,
     goToNextStep,
     goToPrevStep,
     resetStep,
@@ -210,7 +211,8 @@ function machine(userContext) {
       computed: {
         percent: (ctx2) => ctx2.step / ctx2.count * 100,
         hasNextStep: (ctx2) => ctx2.step < ctx2.count,
-        hasPrevStep: (ctx2) => ctx2.step > 0
+        hasPrevStep: (ctx2) => ctx2.step > 0,
+        completed: (ctx2) => ctx2.step === ctx2.count
       },
       states: {
         idle: {
@@ -244,21 +246,27 @@ function machine(userContext) {
         resetStep(ctx2) {
           set.value(ctx2, 0);
         },
-        setStep(ctx2, event) {
-          const value = event.value;
-          const inRange = value >= 0 && value < ctx2.count;
-          if (!inRange) throw new RangeError(`Index ${value} is out of bounds`);
-          set.value(ctx2, value);
+        setStep(ctx2, evt) {
+          set.value(ctx2, evt.value);
         }
       }
     }
   );
 }
+var validateStep = (ctx, step) => {
+  if (!isValueWithinRange(step, 0, ctx.count)) {
+    throw new RangeError(`[zag-js/steps] step index ${step} is out of bounds`);
+  }
+};
 var set = {
   value(ctx, step) {
     if (isEqual(ctx.step, step)) return;
+    validateStep(ctx, step);
     ctx.step = step;
     ctx.onStepChange?.({ step });
+    if (ctx.completed) {
+      ctx.onStepComplete?.();
+    }
   }
 };
 var props = createProps()([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/steps",
-  "version": "0.81.0",
+  "version": "0.81.1",
   "description": "Core logic for the steps widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,11 +27,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.81.0",
-    "@zag-js/core": "0.81.0",
-    "@zag-js/dom-query": "0.81.0",
-    "@zag-js/utils": "0.81.0",
-    "@zag-js/types": "0.81.0"
+    "@zag-js/anatomy": "0.81.1",
+    "@zag-js/core": "0.81.1",
+    "@zag-js/dom-query": "0.81.1",
+    "@zag-js/utils": "0.81.1",
+    "@zag-js/types": "0.81.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"