Input Group code

@props([
    'prefix' => null,
    'suffix' => null,
    'size' => 'base',
])

@php
    /*
    | Inline input grouping for currency, units, compact buttons or fixed text.
    | Drop an <x-ui.input> in the default slot.
    |
    | Usage:
    |   <x-ui.input-group prefix="$" suffix="USD">
    |       <x-ui.input name="price" />
    |   </x-ui.input-group>
    */
    $segmentClass = [
        'sm' => 'px-3 py-1.5 text-sm',
        'base' => 'px-3.5 py-2.5 text-sm',
        'lg' => 'px-4 py-3 text-base',
    ][$size] ?? 'px-3.5 py-2.5 text-sm';
@endphp

<div
    {{ $attributes->merge([
        'class' => 'flex w-full items-stretch rounded-lg shadow-sm [&>input]:min-w-0 [&>input]:flex-1 [&>input]:rounded-none [&>input]:shadow-none [&>input:first-child]:rounded-s-lg [&>input:last-child]:rounded-e-lg [&>input:not(:first-child)]:border-s-0',
    ]) }}
>
    @if ($prefix || isset($before))
        <span class="{{ $segmentClass }} inline-flex items-center rounded-s-lg border border-gray-300 bg-gray-50 font-medium text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
            {{ $before ?? $prefix }}
        </span>
    @endif

    {{ $slot }}

    @if ($suffix || isset($after))
        <span class="{{ $segmentClass }} inline-flex items-center rounded-e-lg border border-s-0 border-gray-300 bg-gray-50 font-medium text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
            {{ $after ?? $suffix }}
        </span>
    @endif
</div>