Tabs Card code

@props([
    'tabs' => [],
    'default' => null,
    'variant' => 'underline',
    'vertical' => false,
    'icons' => [],
    'compact' => false,
    'syncHash' => false,
    'flush' => false,
    'eyebrow' => null,
    'title' => null,
    'description' => null,
])

@php
    /*
    | A card composition for tabbed content. Panel names must match the keys in
    | `tabs`; interaction and accessibility are delegated to the shared tabs.
    |
    | Usage:
    |   <x-ui.tabs-card title="Workspace" :tabs="['summary' => 'Summary']">
    |       <x-slot:summary>...</x-slot:summary>
    |   </x-ui.tabs-card>
    */
    $hasHeader = $eyebrow || $title || $description || isset($actions);
    $tabsClass = $flush && ! $vertical
        ? '[&>[role=tablist]]:px-6 [&>div:last-child]:px-6 [&>div:last-child]:pb-6'
        : '';
@endphp

<x-ui.card padding="none" {{ $attributes->merge(['class' => 'overflow-hidden']) }}>
    @if ($hasHeader)
        <x-ui.card.header>
            @if ($eyebrow)
                <p class="mb-2 text-xs font-semibold uppercase tracking-[0.16em] text-brand-600 dark:text-brand-400">{{ $eyebrow }}</p>
            @endif

            @if ($title)
                <h3 class="text-base font-semibold text-gray-950 dark:text-white">{{ $title }}</h3>
            @endif

            @if ($description)
                <p class="mt-1 text-sm leading-6 text-gray-500 dark:text-gray-400">{{ $description }}</p>
            @endif

            @isset($actions)
                <x-slot:actions>{{ $actions }}</x-slot:actions>
            @endisset
        </x-ui.card.header>
    @endif

    <x-ui.card.body :padding="$flush ? 'none' : 'base'">
        <x-ui.tabs
            :tabs="$tabs"
            :default="$default"
            :variant="$variant"
            :vertical="$vertical"
            :icons="$icons"
            :compact="$compact"
            :sync-hash="$syncHash"
            :class="$tabsClass"
        >
            @foreach ($tabs as $key => $label)
                @slot($key)
                    {{ ${$key} ?? '' }}
                @endslot
            @endforeach
        </x-ui.tabs>
    </x-ui.card.body>

    @isset($footer)
        <x-ui.card.footer>{{ $footer }}</x-ui.card.footer>
    @endisset
</x-ui.card>