Description List code

@props([
    'items' => [],
    'striped' => false,
    'compact' => false,
])

@php
    /*
    | Label / value pairs for detail views. Pass `items` as [label => value] or
    | compose <x-ui.description-list.item> children in the slot.
    |
    | Usage:
    |   <x-ui.description-list :items="['Name' => 'Ada Lovelace', 'Role' => 'Owner']" />
    |   <x-ui.description-list compact :items="['Member since' => 'Jan 1, 2026']" />
    */
    $listClass = $compact
        ? 'space-y-3'
        : 'divide-y divide-gray-200 dark:divide-gray-800';

    $rowClass = $compact
        ? 'flex items-center justify-between gap-4'
        : 'grid grid-cols-1 gap-1 px-2 py-3.5 sm:grid-cols-3 sm:gap-4';

    if (! $compact && $striped) {
        $rowClass .= ' odd:bg-gray-50/60 dark:odd:bg-gray-800/30';
    }

    $termClass = 'text-sm font-medium text-gray-500 dark:text-gray-400'.($compact ? ' shrink-0 whitespace-nowrap' : '');
    $detailClass = 'text-sm text-gray-900 dark:text-gray-100'.($compact ? ' min-w-0 truncate text-end' : ' sm:col-span-2');
@endphp

<dl {{ $attributes->merge(['class' => $listClass]) }}>
    @forelse ($items as $label => $value)
        <div @class([$rowClass])>
            <dt class="{{ $termClass }}">{{ $label }}</dt>
            <dd class="{{ $detailClass }}">{{ $value }}</dd>
        </div>
    @empty
        {{ $slot }}
    @endforelse
</dl>

@props([
    'label' => null,
    'compact' => false,
])

@php
    /*
    | A single row inside <x-ui.description-list>. Use when you need rich markup
    | in the value (badges, links) rather than a plain string.
    |
    | Usage:
    |   <x-ui.description-list compact>
    |       <x-ui.description-list.item label="Status" compact>
    |           <x-ui.badge variant="green" dot>Active</x-ui.badge>
    |       </x-ui.description-list.item>
    |   </x-ui.description-list>
    */
    $rowClass = $compact
        ? 'flex items-center justify-between gap-4'
        : 'grid grid-cols-1 gap-1 px-2 py-3.5 sm:grid-cols-3 sm:gap-4';

    $termClass = 'text-sm font-medium text-gray-500 dark:text-gray-400'.($compact ? ' shrink-0 whitespace-nowrap' : '');
    $detailClass = 'text-sm text-gray-900 dark:text-gray-100'.($compact ? ' min-w-0 truncate text-end' : ' sm:col-span-2');
@endphp

<div {{ $attributes->merge(['class' => $rowClass]) }}>
    <dt class="{{ $termClass }}">{{ $label }}</dt>
    <dd class="{{ $detailClass }}">{{ $slot }}</dd>
</div>