fix(steps): invoke step complete

.changeset/sharp-peaches-hunt.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/steps": patch
+---
+
+Fix issue where `onStepComplete` is not implemented

CHANGELOG.md

@@ -15,6 +15,8 @@ See the [Changesets](./.changeset) for the latest changes.
 
 - **Tour**: Remove `zIndex` from elements in favor of userland control.
 
+- **Steps**: Fix issue where `onStepComplete` is not implemented
+
 ## [0.81.0](./#0.81.0) - 2025-01-07
 
 ### Fixed

packages/machines/steps/src/steps.connect.ts

@@ -45,6 +45,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     percent,
     hasNextStep,
     hasPrevStep,
+    isCompleted: state.context.completed,
     goToNextStep,
     goToPrevStep,
     resetStep,

packages/machines/steps/src/steps.machine.ts

@@ -1,5 +1,5 @@
 import { createMachine } from "@zag-js/core"
-import { compact, isEqual } from "@zag-js/utils"
+import { compact, isEqual, isValueWithinRange } from "@zag-js/utils"
 import type { MachineContext, MachineState, UserDefinedContext } from "./steps.types"
 
 export function machine(userContext: UserDefinedContext) {
@@ -21,6 +21,7 @@ export function machine(userContext: UserDefinedContext) {
         percent: (ctx) => (ctx.step / ctx.count) * 100,
         hasNextStep: (ctx) => ctx.step < ctx.count,
         hasPrevStep: (ctx) => ctx.step > 0,
+        completed: (ctx) => ctx.step === ctx.count,
       },
 
       states: {
@@ -55,21 +56,30 @@ export function machine(userContext: UserDefinedContext) {
         resetStep(ctx) {
           set.value(ctx, 0)
         },
-        setStep(ctx, event) {
-          const value = event.value
-          const inRange = value >= 0 && value < ctx.count
-          if (!inRange) throw new RangeError(`Index ${value} is out of bounds`)
-          set.value(ctx, value)
+        setStep(ctx, evt) {
+          set.value(ctx, evt.value)
         },
       },
     },
   )
 }
 
+const validateStep = (ctx: MachineContext, step: number) => {
+  if (!isValueWithinRange(step, 0, ctx.count)) {
+    throw new RangeError(`[zag-js/steps] step index ${step} is out of bounds`)
+  }
+}
+
 const set = {
   value(ctx: MachineContext, step: number) {
     if (isEqual(ctx.step, step)) return
+    validateStep(ctx, step)
+
     ctx.step = step
     ctx.onStepChange?.({ step })
+
+    if (ctx.completed) {
+      ctx.onStepComplete?.()
+    }
   },
 }

packages/machines/steps/src/steps.types.ts

@@ -57,6 +57,7 @@ type ComputedContext = Readonly<{
   percent: number
   hasNextStep: boolean
   hasPrevStep: boolean
+  completed: boolean
 }>
 
 export type UserDefinedContext = RequiredBy<PublicContext, "id">
@@ -113,6 +114,10 @@ export 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.
    */