Implement stepper and progress bar

2026-02-02 11:24:47 -07:00
parent 9149883ae0
commit 462488ddce
13 changed files with 711 additions and 0 deletions
@@ -0,0 +1,50 @@
+import type { StepperViewProps } from "./Stepper.types";
+
+export function StepperView({
+  active,
+  totalSteps,
+  className,
+  stepperClasses,
+}: StepperViewProps) {
+  return (
+    <div
+      className={`${stepperClasses} ${className}`}
+      role="progressbar"
+      aria-valuenow={active}
+      aria-valuemin={1}
+      aria-valuemax={totalSteps}
+      aria-label={`Step ${active} of ${totalSteps}`}
+    >
+      {Array.from({ length: totalSteps }, (_, index) => {
+        const stepNumber = index + 1;
+        const isActive = stepNumber === active;
+
+        return (
+          <div
+            key={stepNumber}
+            className="shrink-0 w-[12px] h-[12px] flex items-center justify-center"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+              className={isActive ? "opacity-100" : "opacity-30"}
+            >
+              <circle
+                cx="6"
+                cy="6"
+                r="5.5"
+                fill="var(--color-surface-inverse-secondary)"
+                stroke="var(--color-surface-inverse-secondary)"
+                strokeWidth="1"
+              />
+            </svg>
+          </div>
+        );
+      })}
+    </div>
+  );
+}