Badge code

@props([
    'variant' => 'gray',
    'size' => 'base',
    'icon' => null,
    'iconWeight' => 'fill',
    'dot' => false,
    'pill' => true,
    'pulseDot' => null,
    'pulseIcon' => null,
])

@php
    /*
    | Small status/label pill.
    |
    | Variants: gray, brand, green, red, amber, blue, outline
    | Sizes:    sm, base, lg
    |
    | Usage:
    |   <x-ui.badge variant="green" dot>Active</x-ui.badge>
    |   <x-ui.badge variant="brand" dot pulse-dot>Deploying</x-ui.badge>
    */
    $pulseIndicatorVariants = ['green', 'brand'];
    $shouldPulseDot = $dot && ($pulseDot ?? in_array($variant, $pulseIndicatorVariants, true));
    $shouldPulseIcon = $icon && ($pulseIcon ?? in_array($variant, $pulseIndicatorVariants, true));

    $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',
        'outline' => 'border border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-300',
    ];

    $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', 'outline' => 'bg-gray-400',
    ];

    $sizes = [
        'sm' => 'text-xs px-2 py-0.5 gap-1',
        'base' => 'text-xs px-2.5 py-1 gap-1.5',
        'lg' => 'text-sm px-3 py-1 gap-1.5',
    ];

    $classes = implode(' ', [
        'inline-flex items-center font-medium',
        $pill ? 'rounded-full' : 'rounded-md',
        $variants[$variant] ?? $variants['gray'],
        $sizes[$size] ?? $sizes['base'],
    ]);
@endphp

<span {{ $attributes->merge(['class' => $classes]) }}>
    @if ($dot)
        <span @class([
            'h-1.5 w-1.5 rounded-full',
            $dotColors[$variant] ?? $dotColors['gray'],
            'animate-pulse' => $shouldPulseDot,
        ])></span>
    @endif
    @if ($icon)
        <x-ui.icon :name="$icon" :weight="$iconWeight" size="sm" :class="$shouldPulseIcon ? 'animate-pulse' : null" />
    @endif
    {{ $slot }}
</span>