From 5492945a5383ea80e7be193337be40beedad6195 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Fri, 10 Jan 2025 15:27:50 +0000
Subject: [PATCH] fix(steps): invoke step complete

---
 .changeset/sharp-peaches-hunt.md             |  5 +++++
 CHANGELOG.md                                 |  2 ++
 packages/machines/steps/src/steps.connect.ts |  1 +
 packages/machines/steps/src/steps.machine.ts | 22 ++++++++++++++------
 packages/machines/steps/src/steps.types.ts   |  5 +++++
 5 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/sharp-peaches-hunt.md

diff --git a/.changeset/sharp-peaches-hunt.md b/.changeset/sharp-peaches-hunt.md
new file mode 100644
index 0000000000..159b006424
--- /dev/null
+++ b/.changeset/sharp-peaches-hunt.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/steps": patch
+---
+
+Fix issue where `onStepComplete` is not implemented
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad4529ceb7..5f79fa51cb 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/packages/machines/steps/src/steps.connect.ts b/packages/machines/steps/src/steps.connect.ts
index 0517b0dc74..238018dadf 100644
--- a/packages/machines/steps/src/steps.connect.ts
+++ b/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,
diff --git a/packages/machines/steps/src/steps.machine.ts b/packages/machines/steps/src/steps.machine.ts
index 4acd1bf5e0..44aa97a790 100644
--- a/packages/machines/steps/src/steps.machine.ts
+++ b/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?.()
+    }
   },
 }
diff --git a/packages/machines/steps/src/steps.types.ts b/packages/machines/steps/src/steps.types.ts
index 4a1aa871e4..1e6b2e7f7b 100644
--- a/packages/machines/steps/src/steps.types.ts
+++ b/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.
    */