Badge Activity code

@props([
    'variant' => 'brand',
    'progress' => null,
    'icon' => 'spinner-gap',
    'shimmer' => null,
])

@php
    /*
    | Live-work pill: a shimmer sweep and spinning glyph say "in flight"
    | without a modal or toast. Pass `progress` to add an inline meter and
    | tabular percentage for determinate work — progress badges stay
    | stationary (no shimmer or spin) unless you opt back in.
    |
    | Variants: gray, brand, green, red, amber, blue
    |
    | Usage:
    |   <x-ui.badge-activity>Deploying</x-ui.badge-activity>
    |   <x-ui.badge-activity variant="blue" :progress="62">Indexing</x-ui.badge-activity>
    */
    $variants = [
        'gray' => 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300',
        'brand' => 'bg-brand-50 dark:bg-brand-950/60 text-brand-700 dark:text-brand-300',
        'green' => 'bg-green-50 dark:bg-green-950/60 text-green-700 dark:text-green-300',
        'red' => 'bg-red-50 dark:bg-red-950/60 text-red-700 dark:text-red-300',
        'amber' => 'bg-amber-50 dark:bg-amber-950/60 text-amber-700 dark:text-amber-300',
        'blue' => 'bg-accent-50 dark:bg-accent-950/60 text-accent-700 dark:text-accent-300',
    ];

    $clampedProgress = $progress === null ? null : max(0, min(100, (int) $progress));
    $shouldShimmer = $shimmer ?? $clampedProgress === null;
    $shouldSpin = $clampedProgress === null;
@endphp

<span {{ $attributes->merge(['class' => implode(' ', array_filter([
    'relative inline-flex items-center gap-1.5 overflow-hidden rounded-full px-2.5 py-1 text-xs font-medium',
    $shouldShimmer ? 'animate-shimmer' : null,
    $variants[$variant] ?? $variants['brand'],
]))]) }}>
    @if ($icon)
        <x-ui.icon :name="$icon" weight="bold" size="sm" :class="$shouldSpin ? 'motion-safe:animate-spin' : null" />
    @endif
    {{ $slot }}
    @if ($clampedProgress !== null)
        <span class="h-1 w-10 overflow-hidden rounded-full bg-current/15" role="progressbar" aria-valuenow="{{ $clampedProgress }}" aria-valuemin="0" aria-valuemax="100">
            <span class="block h-full rounded-full bg-current/70" style="width: {{ $clampedProgress }}%"></span>
        </span>
        <span class="text-[11px] font-semibold tabular-nums opacity-80">{{ $clampedProgress }}%</span>
    @endif
</span>