Stepper

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

@php
    // Each step is a label, or ['label' => …, 'href' => …]; href makes a completed step a link back to it.
    $steps = array_values(array_map(
        static fn (string|array $step): array => is_string($step) ? ['label' => $step] : $step,
        $steps,
    ));
    $current = max(1, min(max(1, count($steps)), (int) $current));

    // Arrow-shaped segments: a notch cut into the start, a point on the end. The first has no notch, the last
    // no point. Mirrored in RTL (and the text flipped back) so the arrows point the way you read.
    $shape = static fn (bool $first, bool $last): string => match (true) {
        $first && $last => '',
        $first => '[clip-path:polygon(0_0,calc(100%-12px)_0,100%_50%,calc(100%-12px)_100%,0_100%)]',
        $last => '[clip-path:polygon(0_0,100%_0,100%_100%,0_100%,12px_50%)]',
        default => '[clip-path:polygon(0_0,calc(100%-12px)_0,100%_50%,calc(100%-12px)_100%,0_100%,12px_50%)]',
    };
    // Solid tints (mixed with the surface, not see-through) so the overlapping points stay clean on any background.
    $look = ['done' => 'bg-[color-mix(in_oklab,var(--color-primary)_15%,var(--color-surface))] text-primary', 'current' => 'bg-primary text-on-primary', 'upcoming' => 'bg-field text-foreground/60'];
    $spoken = ['done' => 'completed', 'current' => 'current step', 'upcoming' => 'not started'];
@endphp

<ol aria-label="{{ $label }}" {{ $attributes->class(['flex w-full']) }}>
    @foreach ($steps as $index => $step)
        @php
            $number = $index + 1;
            $state = match (true) {
                $number < $current => 'done',
                $number === $current => 'current',
                default => 'upcoming',
            };
            $link = $state === 'done' && ! empty($step['href']) ? $step['href'] : null;
        @endphp

        {{-- Segments overlap by the point's width so each point sits in the next one's notch. --}}
        <li @if ($state === 'current') aria-current="step" @endif @class(['min-w-0', 'flex-[2]' => $state === 'current', 'flex-1' => $state !== 'current', '-ms-2.5' => ! $loop->first])>
            <{{ $link ? 'a' : 'div' }}
                @if ($link) href="{{ $link }}" @endif
                @class([
                    $look[$state],
                    $shape($loop->first, $loop->last),
                    'flex h-10 items-center justify-center px-5 text-sm font-medium outline-none rtl:-scale-x-100',
                    'rounded-s-lg' => $loop->first,
                    'rounded-e-lg' => $loop->last,
                    'hover:bg-[color-mix(in_oklab,var(--color-primary)_25%,var(--color-surface))] focus-visible:underline' => $link,
                ])
            >
                <span class="truncate rtl:-scale-x-100">
                    {{-- On phones the others shrink to their number; the current step keeps its name. --}}
                    @if ($state === 'current')
                        {{ $step['label'] }}
                    @else
                        <span class="max-sm:sr-only">{{ $step['label'] }}</span><span class="sm:hidden" aria-hidden="true">{{ $number }}</span>
                    @endif
                    <span class="sr-only">, {{ $spoken[$state] }}</span>
                </span>
            </{{ $link ? 'a' : 'div' }}>
        </li>
    @endforeach
</ol>

@props([
    'total',
    'current' => 1,
    'label' => null,
])

@php
    $total = max(1, (int) $total);
    $current = max(1, min($total, (int) $current));
    $text = ($label ? $label.': ' : '').'Step '.$current.' of '.$total;
@endphp

{{-- Small dots for short wizards and carousels; the current one stretches into a pill. Decorative, like the
     bars: the progressbar role carries "Step 2 of 4" for screen readers. --}}
<div
    role="progressbar"
    aria-valuemin="1"
    aria-valuemax="{{ $total }}"
    aria-valuenow="{{ $current }}"
    aria-valuetext="{{ $text }}"
    aria-label="{{ $label ?? 'Progress' }}"
    {{ $attributes->class(['flex items-center justify-center gap-1.5']) }}
>
    @for ($step = 1; $step <= $total; $step++)
        <span aria-hidden="true" @class([
            'h-2 rounded-full transition-all duration-300 motion-reduce:transition-none',
            'bg-primary w-6' => $step === $current,
            'bg-primary/40 w-2' => $step < $current,
            'bg-muted/75 w-2' => $step > $current,
        ])></span>
    @endfor
</div>

@props([
    // A count of steps, or their names with :steps (then total can be left out).
    'total' => null,
    'steps' => [],
    'current' => 1,
    'label' => null,
    // A line above the bars: the current step's name (or the label) and "Step 2 of 4".
    'showLabel' => false,
    // Step names under the bars from the sm breakpoint up; on phones they'd crowd each other.
    'showSteps' => false,
])

@php
    $steps = array_values($steps);
    $total = max(1, (int) ($total ?? count($steps)));
    $current = max(1, min($total, (int) $current));
    $name = $steps[$current - 1] ?? null;
    $text = ($label ? $label.': ' : '').'Step '.$current.' of '.$total.($name !== null ? ', '.$name : '');
@endphp

<div {{ $attributes->class(['w-full']) }}>
    @if ($showLabel)
        <div class="text-foreground mb-2 flex items-baseline justify-between gap-2 text-xs" aria-hidden="true">
            <span class="font-medium">{{ $name ?? $label }}</span>
            <span class="text-foreground/60 tabular-nums">Step {{ $current }} of {{ $total }}</span>
        </div>
    @endif

    {{-- The segments are decorative; the progressbar role carries the "Step 2 of 4" for screen readers. --}}
    <div
        role="progressbar"
        aria-valuemin="1"
        aria-valuemax="{{ $total }}"
        aria-valuenow="{{ $current }}"
        aria-valuetext="{{ $text }}"
        aria-label="{{ $label ?? 'Progress' }}"
        class="flex w-full items-center gap-2"
    >
        @for ($step = 1; $step <= $total; $step++)
            <span
                aria-hidden="true"
                @class([
                    'h-2 min-w-0 flex-1 rounded-full transition-colors duration-300 motion-reduce:transition-none',
                    'bg-primary' => $step <= $current,
                    // With names on show, a ring marks "you are here".
                    'ring-primary/25 ring-2' => $step === $current && ($showLabel || $showSteps),
                    // Upcoming segments at 3:1 against the page, so the bar's length reads before any label does.
                    'bg-muted/75' => $step > $current,
                ])
            ></span>
        @endfor
    </div>

    @if ($showSteps && $steps !== [])
        <ol class="text-foreground/60 mt-2 hidden gap-2 text-xs sm:flex" aria-hidden="true">
            @foreach ($steps as $i => $step)
                <li @class(['min-w-0 flex-1 truncate', 'text-foreground font-medium' => $i + 1 === $current])>{{ $step }}</li>
            @endforeach
        </ol>
    @endif
</div>

@props([
    'steps' => [],
    'current' => 1,
    'label' => 'Progress',
    // horizontal: a row that shows only the current step's name on phones. vertical: stacked, with descriptions.
    'orientation' => 'horizontal',
])

@php
    // Each step is a label, or an array: ['label' => …, 'description' => …, 'href' => …, 'locked' => bool,
    // 'error' => bool, 'optional' => bool]. `locked` marks a step that can't be reached yet (lock icon, dimmed);
    // `href` makes a completed step a link back to it; `error` flags a step that needs attention.
    $steps = array_values(array_map(
        static fn (string|array $step): array => is_string($step) ? ['label' => $step] : $step,
        $steps,
    ));
    $current = max(1, min(max(1, count($steps)), (int) $current));
    $vertical = $orientation === 'vertical';

    $stateOf = static fn (int $number, array $step): string => match (true) {
        ! empty($step['error']) => 'error',
        $number < $current => 'done',
        $number === $current => 'current',
        ! empty($step['locked']) => 'locked',
        default => 'upcoming',
    };
    // Outer ring, inner disc, and label, per state. The white gap between ring and disc is the padding.
    $ring = ['done' => 'border-foreground', 'current' => 'border-foreground', 'upcoming' => 'border-muted', 'locked' => 'border-line-strong', 'error' => 'border-error'];
    $disc = ['done' => 'bg-primary text-on-primary', 'current' => 'bg-foreground text-surface', 'upcoming' => 'bg-muted text-surface', 'locked' => 'bg-line-strong text-surface', 'error' => 'bg-error text-white'];
    $text = ['done' => 'text-foreground', 'current' => 'text-foreground', 'upcoming' => 'text-foreground', 'locked' => 'text-muted', 'error' => 'text-error'];
    $spoken = ['done' => 'completed', 'current' => 'current step', 'upcoming' => 'not started', 'locked' => 'locked', 'error' => 'needs attention'];
@endphp

<div {{ $attributes->class(['w-full']) }}>
    <ol aria-label="{{ $label }}" @class(['flex w-full', 'flex-col' => $vertical])>
        @foreach ($steps as $index => $step)
            @php
                $number = $index + 1;
                $state = $stateOf($number, $step);
                // A step that needs attention can be linked back to as well, so it can be fixed.
                $link = in_array($state, ['done', 'error'], true) && $number !== $current && ! empty($step['href']) ? $step['href'] : null;
                // The line leads up to the current step: dark after steps that are behind it.
                $lineDone = $number < $current;
            @endphp

            <li @if ($number === $current) aria-current="step" @endif @class([
                'relative flex min-w-0',
                'flex-1 flex-col items-center' => ! $vertical,
                'gap-3 pb-6 last:pb-0' => $vertical,
            ])>
                @unless ($loop->last)
                    {{-- Connector to the next step, from this circle's edge to the next one's (circles are 28px wide). --}}
                    <span aria-hidden="true" @class([
                        'absolute transition-colors duration-300',
                        'top-[13px] right-[calc(-50%+14px)] left-[calc(50%+14px)] h-0.5 rtl:right-[calc(50%+14px)] rtl:left-[calc(-50%+14px)]' => ! $vertical,
                        'start-[13px] top-8 bottom-1 w-0.5' => $vertical,
                        'bg-foreground' => $lineDone,
                        'bg-line-strong' => ! $lineDone,
                    ])></span>
                @endunless

                <{{ $link ? 'a' : 'div' }} @if ($link) href="{{ $link }}" @endif @class([
                    'flex max-w-full rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
                    'flex-col items-center gap-2' => ! $vertical,
                    'items-start gap-3' => $vertical,
                    'group/step cursor-pointer' => $link,
                ])>
                    <span aria-hidden="true" class="{{ $ring[$state] }} bg-surface relative grid size-7 shrink-0 place-items-center rounded-full border-2 p-0.5 transition-colors duration-300">
                        <span class="{{ $disc[$state] }} grid size-full place-items-center rounded-full text-xs font-bold transition-colors duration-300 group-hover/step:opacity-80">
                            @if ($state === 'done')
                                <x-widget.icon name="check" class="size-3.5 stroke-[3]" />
                            @elseif ($state === 'error')
                                <x-widget.icon name="circle-alert" class="size-3.5" />
                            @elseif ($state === 'locked')
                                <x-widget.icon name="lock" class="size-3" />
                            @else
                                {{ $number }}
                            @endif
                        </span>
                    </span>

                    {{-- On phones a row only has room for the circles; the names stay for screen readers, and the line below names the current step. --}}
                    <span @class([
                        'flex min-w-0 flex-col',
                        'items-center px-1 text-center' => ! $vertical,
                        'max-sm:sr-only' => ! $vertical,
                        'pt-1' => $vertical,
                    ])>
                        <span class="{{ $text[$state] }} text-sm font-medium break-words">
                            {{ $step['label'] }}<span class="sr-only">, {{ $spoken[$state] }}</span>
                        </span>
                        @if (! empty($step['optional']))
                            <span class="text-muted text-xs">Optional</span>
                        @endif
                        @if ($vertical && ! empty($step['description']))
                            <span class="text-foreground/60 mt-0.5 text-sm">{{ $step['description'] }}</span>
                        @endif
                    </span>
                </{{ $link ? 'a' : 'div' }}>
            </li>
        @endforeach
    </ol>

    @unless ($vertical)
        {{-- Phones: where you are, in words, since the other names are hidden. Screen readers already have the list. --}}
        <p class="mt-3 flex flex-col items-center gap-0.5 text-center sm:hidden" aria-hidden="true">
            <span class="text-foreground text-sm font-medium">{{ $steps[$current - 1]['label'] ?? '' }}</span>
            <span class="text-foreground/60 text-xs tabular-nums">Step {{ $current }} of {{ count($steps) }}</span>
        </p>
    @endunless
</div>