Stepper code

@props([
    'steps' => [],
    'current' => 1,
])

@php
    /*
    | Horizontal progress stepper for multi-step flows / wizards. Pass `steps` as
    | an array of labels (or [label => description]); `current` is the 1-based
    | active step. Completed steps show a check.
    |
    | Usage:
    |   <x-ui.stepper :current="2" :steps="['Account', 'Profile', 'Billing', 'Done']" />
    */
    $steps = array_values($steps);
    $total = count($steps);
    $current = (int) $current;
@endphp

<nav aria-label="Progress" {{ $attributes->merge(['class' => 'w-full']) }}>
    <ol class="flex items-center">
        @foreach ($steps as $i => $label)
            @php
                $number = $i + 1;
                $isComplete = $number < $current;
                $isCurrent = $number === $current;
                $isLast = $number === $total;
            @endphp
            <li class="flex items-center {{ $isLast ? '' : 'flex-1' }}">
                <div class="flex items-center gap-3">
                    @if ($isComplete)
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-600 text-white">
                            <x-ui.icon name="check" weight="bold" size="sm" />
                        </span>
                    @elseif ($isCurrent)
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 border-brand-600 bg-brand-50 dark:bg-brand-950/60 text-sm font-semibold text-brand-600 dark:text-brand-400">{{ $number }}</span>
                    @else
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 border-gray-200 dark:border-gray-700 text-sm font-semibold text-gray-400 dark:text-gray-500">{{ $number }}</span>
                    @endif

                    <span class="hidden sm:block">
                        <span class="block text-sm font-medium {{ $isCurrent || $isComplete ? 'text-gray-900 dark:text-white' : 'text-gray-400 dark:text-gray-500' }}">{{ $label }}</span>
                    </span>
                </div>

                @unless ($isLast)
                    <span class="mx-3 h-0.5 flex-1 rounded {{ $isComplete ? 'bg-brand-600' : 'bg-gray-200 dark:bg-gray-700' }}"></span>
                @endunless
            </li>
        @endforeach
    </ol>
</nav>