From d341db1e69206b09bef402cd9900d644a5f0d930 Mon Sep 17 00:00:00 2001
From: corb3nik <ian@atvh.dev>
Date: Tue, 30 Sep 2025 20:29:18 -0400
Subject: [PATCH 1/2] add stepper story

---
 .../primevue/src/stories/Stepper.story.vue    | 204 ++++++++++++++++++
 1 file changed, 204 insertions(+)
 create mode 100644 packages/primevue/src/stories/Stepper.story.vue

diff --git a/packages/primevue/src/stories/Stepper.story.vue b/packages/primevue/src/stories/Stepper.story.vue
new file mode 100644
index 0000000..3268d01
--- /dev/null
+++ b/packages/primevue/src/stories/Stepper.story.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import Button from "primevue/button";
+import Card from "primevue/card";
+import InputText from "primevue/inputtext";
+import Step from "primevue/step";
+import StepList from "primevue/steplist";
+import StepPanel from "primevue/steppanel";
+import StepPanels from "primevue/steppanels";
+import Stepper from "primevue/stepper";
+import InputTextarea from "primevue/textarea";
+import { ref } from "vue";
+
+const activeStep = ref(1);
+const linearActiveStep = ref(1);
+const iconActiveStep = ref(1);
+
+const nextStep = () => {
+  if (activeStep.value < 3) {
+    activeStep.value++;
+  }
+};
+
+const prevStep = () => {
+  if (activeStep.value > 1) {
+    activeStep.value--;
+  }
+};
+
+const nextLinearStep = () => {
+  if (linearActiveStep.value < 4) {
+    linearActiveStep.value++;
+  }
+};
+
+const prevLinearStep = () => {
+  if (linearActiveStep.value > 1) {
+    linearActiveStep.value--;
+  }
+};
+
+const nextIconStep = () => {
+  if (iconActiveStep.value < 3) {
+    iconActiveStep.value++;
+  }
+};
+
+const prevIconStep = () => {
+  if (iconActiveStep.value > 1) {
+    iconActiveStep.value--;
+  }
+};
+</script>
+
+<template>
+  <Story title="Stepper">
+    <Variant title="Basic">
+      <div class="w-full max-w-4xl">
+        <Stepper v-model:value="activeStep">
+          <StepList>
+            <Step :value="1">Personal Information</Step>
+            <Step :value="2">Contact Details</Step>
+            <Step :value="3">Review & Confirm</Step>
+          </StepList>
+
+          <StepPanels>
+            <StepPanel :value="1">
+              <Card class="p-4">
+                <template #content>
+                  <h3 class="text-lg font-semibold mb-4">
+                    Personal Information
+                  </h3>
+                  <div class="flex flex-col gap-4">
+                    <div>
+                      <label class="block text-sm font-medium mb-2"
+                        >First Name</label
+                      >
+                      <InputText
+                        placeholder="Enter your first name"
+                        class="w-full"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-sm font-medium mb-2"
+                        >Last Name</label
+                      >
+                      <InputText
+                        placeholder="Enter your last name"
+                        class="w-full"
+                      />
+                    </div>
+                  </div>
+                </template>
+              </Card>
+            </StepPanel>
+            <StepPanel :value="2">
+              <Card class="p-4">
+                <template #content>
+                  <h3 class="text-lg font-semibold mb-4">Contact Details</h3>
+                  <div class="flex flex-col gap-4">
+                    <div>
+                      <label class="block text-sm font-medium mb-2"
+                        >Email</label
+                      >
+                      <InputText
+                        placeholder="Enter your email"
+                        class="w-full"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-sm font-medium mb-2"
+                        >Phone</label
+                      >
+                      <InputText
+                        placeholder="Enter your phone number"
+                        class="w-full"
+                      />
+                    </div>
+                  </div>
+                </template>
+              </Card>
+            </StepPanel>
+            <StepPanel :value="3">
+              <Card class="p-4">
+                <template #content>
+                  <h3 class="text-lg font-semibold mb-4">Review & Confirm</h3>
+                  <p class="text-surface-600 dark:text-surface-300">
+                    Please review your information before proceeding.
+                  </p>
+                </template>
+              </Card>
+            </StepPanel>
+          </StepPanels>
+        </Stepper>
+
+        <div class="flex justify-between mt-6">
+          <Button
+            v-if="activeStep > 1"
+            label="Previous"
+            severity="contrast"
+            @click="prevStep"
+          />
+          <div v-else></div>
+          <Button
+            v-if="activeStep < 3"
+            label="Next"
+            icon="fas fa-arrow-right"
+            @click="nextStep"
+          />
+          <Button
+            v-else
+            label="Complete"
+            severity="success"
+            icon="fas fa-check"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled Steps">
+      <div class="w-full max-w-4xl">
+        <Stepper v-model:value="activeStep">
+          <StepList>
+            <Step :value="1">Step 1</Step>
+            <Step :value="2" :disabled="true">Step 2 (Disabled)</Step>
+            <Step :value="3" :disabled="true">Step 3 (Disabled)</Step>
+          </StepList>
+
+          <StepPanels>
+            <StepPanel :value="1">
+              <Card class="p-4">
+                <template #content>
+                  <h3 class="text-lg font-semibold mb-4">Step 1</h3>
+                  <p class="text-surface-600 dark:text-surface-300">
+                    This is the first step. The next steps are disabled.
+                  </p>
+                </template>
+              </Card>
+            </StepPanel>
+            <StepPanel :value="2">
+              <Card class="p-4">
+                <template #content>
+                  <h3 class="text-lg font-semibold mb-4">Step 2</h3>
+                  <p class="text-surface-600 dark:text-surface-300">
+                    This step is disabled and cannot be accessed.
+                  </p>
+                </template>
+              </Card>
+            </StepPanel>
+            <StepPanel :value="3">
+              <Card class="p-4">
+                <template #content>
+                  <h3 class="text-lg font-semibold mb-4">Step 3</h3>
+                  <p class="text-surface-600 dark:text-surface-300">
+                    This step is also disabled.
+                  </p>
+                </template>
+              </Card>
+            </StepPanel>
+          </StepPanels>
+        </Stepper>
+      </div>
+    </Variant>
+  </Story>
+</template>

From 51d0d91cddc995b1719c08e65792a65145d300cb Mon Sep 17 00:00:00 2001
From: corb3nik <ian@atvh.dev>
Date: Tue, 30 Sep 2025 20:32:37 -0400
Subject: [PATCH 2/2] Fix stepper styling

---
 packages/primevue/package.json                |  2 +-
 packages/primevue/src/classic/step/index.ts   | 10 ++++---
 .../primevue/src/stories/Stepper.story.vue    | 27 -------------------
 3 files changed, 7 insertions(+), 32 deletions(-)

diff --git a/packages/primevue/package.json b/packages/primevue/package.json
index aea02de..33242d0 100644
--- a/packages/primevue/package.json
+++ b/packages/primevue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@caido/primevue",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Primevue themes for Caido",
   "main": "dist/primevue.mjs",
   "types": "dist/types/index.d.ts",
diff --git a/packages/primevue/src/classic/step/index.ts b/packages/primevue/src/classic/step/index.ts
index 8cb8e10..e96360c 100644
--- a/packages/primevue/src/classic/step/index.ts
+++ b/packages/primevue/src/classic/step/index.ts
@@ -6,13 +6,13 @@ export default {
         "cursor-default pointer-events-none select-none opacity-60":
           context.disabled,
       },
-      "[&_[data-pc-section=separator]]:has-[~[data-p-active=true]]:bg-primary",
+      "[&_[data-pc-section=separator]]:has-[~[data-p-active=true]]:bg-secondary-400",
     ],
   }),
   header: ({ props, context }) => ({
     class: [
       "inline-flex items-center border-0 cursor-pointer rounded-md outline-transparent bg-transparent p-0 gap-2",
-      "focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300",
+      "focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-secondary-400 dark:focus-visible:ring-secondary-300",
       { "!cursor-default": context.active },
       { "cursor-auto": props.linear },
     ],
@@ -28,7 +28,9 @@ export default {
       "border-solid border-2 border-surface-200 dark:border-surface-700",
 
       // Colors (Conditional)
-      context.active ? "text-primary" : "text-surface-900 dark:text-surface-0", // Adjust colors as needed
+      context.active
+        ? "text-secondary-400"
+        : "text-surface-900 dark:text-surface-0", // Adjust colors as needed
 
       // Size and Shape
       "min-w-[2rem]",
@@ -57,7 +59,7 @@ export default {
 
       // Text
       context.active
-        ? "text-primary"
+        ? "text-secondary-400"
         : "text-surface-700 dark:text-surface-0/80",
       "font-medium",
 
diff --git a/packages/primevue/src/stories/Stepper.story.vue b/packages/primevue/src/stories/Stepper.story.vue
index 3268d01..87feb8f 100644
--- a/packages/primevue/src/stories/Stepper.story.vue
+++ b/packages/primevue/src/stories/Stepper.story.vue
@@ -7,12 +7,9 @@ import StepList from "primevue/steplist";
 import StepPanel from "primevue/steppanel";
 import StepPanels from "primevue/steppanels";
 import Stepper from "primevue/stepper";
-import InputTextarea from "primevue/textarea";
 import { ref } from "vue";
 
 const activeStep = ref(1);
-const linearActiveStep = ref(1);
-const iconActiveStep = ref(1);
 
 const nextStep = () => {
   if (activeStep.value < 3) {
@@ -25,30 +22,6 @@ const prevStep = () => {
     activeStep.value--;
   }
 };
-
-const nextLinearStep = () => {
-  if (linearActiveStep.value < 4) {
-    linearActiveStep.value++;
-  }
-};
-
-const prevLinearStep = () => {
-  if (linearActiveStep.value > 1) {
-    linearActiveStep.value--;
-  }
-};
-
-const nextIconStep = () => {
-  if (iconActiveStep.value < 3) {
-    iconActiveStep.value++;
-  }
-};
-
-const prevIconStep = () => {
-  if (iconActiveStep.value > 1) {
-    iconActiveStep.value--;
-  }
-};
 </script>
 
 <template>