@campxdev/react-blueprint 3.0.0-alpha.7 → 3.0.0-alpha.9

package/src/components/Navigation/Stepper/VerticalStepper.tsx

@@ -1,6 +1,5 @@
 import { cn } from '@/lib/utils';
 import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
-import { Button } from '@/shadcn-components/Input/Button/Button';
 import { Check } from 'lucide-react';
 import React from 'react';
 import { StepperVariantProps } from './Stepper';
@@ -10,6 +9,48 @@ import {
   handleStepClick as handleStepClickUtil,
 } from './utils';
 
+/**
+ * Native HTML button component for step indicators
+ * Uses forwardRef to properly expose DOM node for positioning calculations
+ */
+interface StepIndicatorProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'secondary' | 'inactive';
+  children: React.ReactNode;
+}
+
+const StepIndicator = React.forwardRef<HTMLButtonElement, StepIndicatorProps>(
+  function StepIndicator(
+    { variant = 'default', className, children, ...props },
+    ref,
+  ) {
+    const baseStyles =
+      'inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 h-8 w-8 rounded-full duration-200';
+
+    const variantStyles = {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      secondary:
+        'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      inactive: 'bg-muted text-muted-foreground hover:bg-muted/80',
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          baseStyles,
+          variantStyles[variant],
+          'cursor-pointer',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
 const VerticalStepper: React.FC<StepperVariantProps> = ({
   activeStep,
   steps,
@@ -34,19 +75,18 @@ const VerticalStepper: React.FC<StepperVariantProps> = ({
               {/* Left side: Indicator + Connector */}
               <div className="flex flex-col items-center">
                 {/* Step Indicator */}
-                <Button
+                <StepIndicator
                   onClick={
                     isClickable ? () => handleStepClick(index) : () => {}
                   }
                   variant={state === 'inactive' ? 'secondary' : 'default'}
-                  className="h-8 w-8 rounded-full duration-200"
                 >
                   {state === 'completed' ? (
                     <Check className="w-4 h-4" />
                   ) : (
                     index + 1
                   )}
-                </Button>
+                </StepIndicator>
 
                 {/* Vertical Connector */}
                 {!isLast && (