Badge Signal code

@props([
    'variant' => 'green',
    'pulse' => true,
    'meta' => null,
])

@php
    /*
    | Bare status signal: no background, no border. A pinging indicator dot
    | beside letter-spaced micro-caps, so state reads like live telemetry
    | instead of another pill. Optional trailing meta for context.
    |
    | Variants: gray, brand, green, red, amber, blue
    |
    | Usage:
    |   <x-ui.badge-signal variant="green" meta="4 regions">Operational</x-ui.badge-signal>
    |   <x-ui.badge-signal variant="red" :pulse="false">Halted</x-ui.badge-signal>
    */
    $textColors = [
        'gray' => 'text-gray-600 dark:text-gray-300',
        'brand' => 'text-brand-700 dark:text-brand-300',
        'green' => 'text-green-700 dark:text-green-400',
        'red' => 'text-red-700 dark:text-red-400',
        'amber' => 'text-amber-700 dark:text-amber-400',
        'blue' => 'text-accent-700 dark:text-accent-400',
    ];

    $dotColors = [
        'gray' => 'bg-gray-400', 'brand' => 'bg-brand-500', 'green' => 'bg-green-500',
        'red' => 'bg-red-500', 'amber' => 'bg-amber-500', 'blue' => 'bg-accent-500',
    ];

    $dotColor = $dotColors[$variant] ?? $dotColors['green'];
@endphp

<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-2']) }}>
    <span class="relative flex h-2 w-2">
        @if ($pulse)
            <span class="absolute inline-flex h-full w-full rounded-full opacity-60 motion-safe:animate-ping {{ $dotColor }}"></span>
        @endif
        <span class="relative inline-flex h-2 w-2 rounded-full {{ $dotColor }}"></span>
    </span>
    <span class="text-[11px] font-bold uppercase leading-none tracking-[0.14em] {{ $textColors[$variant] ?? $textColors['green'] }}">{{ $slot }}</span>
    @if ($meta)
        <span class="text-xs font-medium leading-none text-gray-400 dark:text-gray-500">{{ $meta }}</span>
    @endif
</span>