Progress code

@props([
    'value' => 0,
    'max' => 100,
    'variant' => 'brand',
    'size' => 'base',
    'label' => null,
    'showValue' => false,
])

@php
    /*
    | Determinate progress bar.
    |
    | Usage:
    |   <x-ui.progress :value="64" label="Storage" show-value />
    */
    $percent = $max > 0 ? max(0, min(100, round(($value / $max) * 100))) : 0;

    $colors = [
        'brand' => 'bg-brand-600',
        'green' => 'bg-green-600',
        'red' => 'bg-red-600',
        'amber' => 'bg-amber-600',
        'gray' => 'bg-gray-700 dark:bg-gray-300',
    ];

    $heights = ['sm' => 'h-1.5', 'base' => 'h-2.5', 'lg' => 'h-4'];
    $providedAriaLabel = $attributes->get('aria-label');
    $providedAriaLabelledBy = $attributes->get('aria-labelledby');
    $providedAriaValueText = $attributes->get('aria-valuetext');
    $labelId = filled($label) ? 'progress-label-'.substr(md5(json_encode([$label, $value, $max])), 0, 10) : null;
    $progressLabelledBy = $providedAriaLabelledBy ?: ($providedAriaLabel ? null : $labelId);
@endphp

<div {{ $attributes->except(['aria-label', 'aria-labelledby', 'aria-valuetext'])->merge(['class' => 'w-full']) }}>
    @if ($label || $showValue)
        <div class="mb-1.5 flex items-center justify-between text-sm">
            @if ($label)
                <span @if ($labelId) id="{{ $labelId }}" @endif class="font-medium text-gray-700 dark:text-gray-300">{{ $label }}</span>
            @endif
            @if ($showValue)
                <span class="text-gray-500 dark:text-gray-400 tabular-nums">{{ $percent }}%</span>
            @endif
        </div>
    @endif

    <div class="w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800 {{ $heights[$size] ?? $heights['base'] }}"
         role="progressbar"
         aria-valuenow="{{ $percent }}"
         aria-valuemin="0"
         aria-valuemax="100"
         @if ($providedAriaLabel) aria-label="{{ $providedAriaLabel }}" @endif
         @if ($progressLabelledBy) aria-labelledby="{{ $progressLabelledBy }}" @endif
         @if ($providedAriaValueText) aria-valuetext="{{ $providedAriaValueText }}" @endif>
        <div class="{{ $heights[$size] ?? $heights['base'] }} rounded-full transition-all duration-500 {{ $colors[$variant] ?? $colors['brand'] }}" style="width: {{ $percent }}%"></div>
    </div>
</div>