From ac1306edd98a48c3ca70efb4dfb6c17187f0b89c Mon Sep 17 00:00:00 2001
From: Mats Bosson <mats.bosson@gmail.com>
Date: Mon, 30 Mar 2026 03:48:47 +0700
Subject: [PATCH] Fix showcase Wizard nesting StepContent requires
 WizardStepContext provided by Wizard.Step.

---
 packages/showcase/src/sections/navigation.tsx | 40 +++++++++----------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/packages/showcase/src/sections/navigation.tsx b/packages/showcase/src/sections/navigation.tsx
index 6fd9bcd..8ff34a3 100644
--- a/packages/showcase/src/sections/navigation.tsx
+++ b/packages/showcase/src/sections/navigation.tsx
@@ -131,33 +131,29 @@ function NavigationMenuDemo() {
   return content;
 }
 
-/** Wizard step indicators helper for the wizard demo. */
-function WizardSteps() {
-  const content = (
-    <Wizard.StepList class="flex items-center gap-2 mb-4">
-      <For each={["Details", "Review", "Confirm"]}>
-        {(label, i) => (
-          <Wizard.Step index={i()} class="flex items-center gap-2">
-            <Wizard.StepTrigger class="w-7 h-7 rounded-full border-2 flex items-center justify-center text-xs font-medium data-[active]:border-indigo-600 data-[active]:text-indigo-600 data-[completed]:bg-indigo-600 data-[completed]:text-white data-[completed]:border-indigo-600 border-gray-300 text-gray-400">
-              {i() + 1}
-            </Wizard.StepTrigger>
-            <span class="text-sm text-gray-600">{label}</span>
-          </Wizard.Step>
-        )}
-      </For>
-    </Wizard.StepList>
-  );
-  return content;
-}
+const wizardSteps = ["Details", "Review", "Confirm"];
 
 /** Wizard demo with 3-step flow. */
 function WizardDemo() {
   const content = (
     <Wizard class="w-full max-w-md">
-      <WizardSteps />
-      <Wizard.StepContent index={0} class="p-4 border border-gray-200 rounded mb-4 text-sm text-gray-700">Step 1: Enter your details here.</Wizard.StepContent>
-      <Wizard.StepContent index={1} class="p-4 border border-gray-200 rounded mb-4 text-sm text-gray-700">Step 2: Review your information.</Wizard.StepContent>
-      <Wizard.StepContent index={2} class="p-4 border border-gray-200 rounded mb-4 text-sm text-gray-700">Step 3: Confirm and submit.</Wizard.StepContent>
+      <Wizard.StepList class="flex items-center gap-4 mb-4">
+        <For each={wizardSteps}>
+          {(label, i) => (
+            <Wizard.Step index={i()}>
+              <div class="flex items-center gap-2">
+                <Wizard.StepTrigger class="w-7 h-7 rounded-full border-2 flex items-center justify-center text-xs font-medium data-[active]:border-indigo-600 data-[active]:text-indigo-600 data-[completed]:bg-indigo-600 data-[completed]:text-white data-[completed]:border-indigo-600 border-gray-300 text-gray-400">
+                  {i() + 1}
+                </Wizard.StepTrigger>
+                <span class="text-sm text-gray-600">{label}</span>
+              </div>
+              <Wizard.StepContent class="p-4 border border-gray-200 rounded my-4 text-sm text-gray-700">
+                Step {i() + 1}: {label}
+              </Wizard.StepContent>
+            </Wizard.Step>
+          )}
+        </For>
+      </Wizard.StepList>
       <div class="flex gap-2">
         <Wizard.Prev class="px-3 py-1.5 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40">Previous</Wizard.Prev>
         <Wizard.Next class="px-3 py-1.5 text-sm bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:opacity-40">Next</Wizard.Next>