aravint-ui-navigation 1.0.55 → 1.0.58

package/Readme.md

@@ -150,6 +150,28 @@ export default function ApprovalTracker() {
 }
 ```
 
+For workflows that provide a status for each step, pass `key`, `label`, and
+`status` instead. In this form, `currentStep` is not required:
+
+```tsx
+const steps = [
+  { key: "initiated", label: "Re-Initiated", status: "pending" },
+  { key: "enggManager", num: 1, label: "Engineering manager", status: "completed" },
+  { key: "buManager", num: 2, label: "BU Manager", status: "completed" },
+  {
+    key: "mfgPe",
+    num: 3,
+    label: "Manufacturing Process Engineer",
+    status: "rejected",
+    date: "01-10-2026",
+    time: "12:42PM",
+  },
+  { key: "cfoApproval", num: 4, label: "CFO approval", status: "pending" },
+];
+
+<Stepper steps={steps} />
+```
+
 ---
 
 ## Props
@@ -157,7 +179,7 @@ export default function ApprovalTracker() {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `steps` | `StepItem[]` | **Required** | List of workflow steps. |
-| `currentStep` | `number` | **Required** | Current active step (starts from `1`). |
+| `currentStep` | `number` | Optional for status-based steps | Current active step for legacy steps (starts from `1`). |
 | `completedColor` | `string` | `#059669` | Color of completed steps. |
 | `activeColor` | `string` | `#059669` | Color of the active step. |
 | `pendingColor` | `string` | `#9ca3af` | Color of pending steps. |
@@ -167,17 +189,31 @@ export default function ApprovalTracker() {
 
 ---
 
-## StepItem
+## Step Types
 
 ```ts
-interface StepItem {
+interface LegacyStepItem {
   id: string;
   title: string;
   date?: string;
   time?: string;
 }
+
+interface WorkflowStepItem {
+  key: string;
+  num?: number;
+  label: string;
+  status: "completed" | "active" | "current" | "pending" | "rejected";
+  date?: string;
+  time?: string;
+}
+
+type StepItem = LegacyStepItem | WorkflowStepItem;
 ```
 
+`WorkflowStepItem.status` takes precedence over `currentStep`. `active` is
+optional for workflows that distinguish an in-progress step from `pending`.
+
 ---
 
 ## Example