Badge Split code

@props([
    'label',
    'variant' => 'gray',
    'mono' => false,
])

@php
    /*
    | Two-segment key/value chip, shields.io style but softened to match the
    | Harbour hairline aesthetic. The muted left segment names the fact, the
    | tinted right segment carries the value.
    |
    | Variants: gray, brand, green, red, amber, blue
    |
    | Usage:
    |   <x-ui.badge-split label="build" variant="green">passing</x-ui.badge-split>
    |   <x-ui.badge-split label="php" variant="blue" mono>8.5</x-ui.badge-split>
    */
    $valueVariants = [
        'gray' => 'bg-white dark:bg-gray-950 text-gray-700 dark:text-gray-200',
        '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',
    ];
@endphp

<span {{ $attributes->merge(['class' => 'inline-flex items-stretch overflow-hidden rounded-md border border-gray-200 text-xs dark:border-gray-800']) }}>
    <span class="flex items-center bg-gray-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:bg-gray-900 dark:text-gray-400">{{ $label }}</span>
    <span @class([
        'flex items-center border-l border-gray-200 px-2 py-0.5 font-semibold dark:border-gray-800',
        'font-mono' => $mono,
        $valueVariants[$variant] ?? $valueVariants['gray'],
    ])>{{ $slot }}</span>
</span>