@php
use Filament\Support\Enums\IconPosition;
@endphp
@props([
'active' => false,
'alpineActive' => null,
'badge' => null,
'badgeColor' => null,
'badgeTooltip' => null,
'badgeIcon' => null,
'badgeIconPosition' => IconPosition::Before,
'href' => null,
'icon' => null,
'iconColor' => 'gray',
'iconPosition' => IconPosition::Before,
'spaMode' => null,
'tag' => 'button',
'target' => null,
'type' => 'button',
])
@php
if (! $iconPosition instanceof IconPosition) {
$iconPosition = filled($iconPosition) ? (IconPosition::tryFrom($iconPosition) ?? $iconPosition) : null;
}
$hasAlpineActiveClasses = filled($alpineActive);
$inactiveItemClasses = 'hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5';
// @deprecated `fi-tabs-item-active` has been replaced by `fi-active`.
$activeItemClasses = 'fi-active fi-tabs-item-active bg-gray-50 dark:bg-white/5';
$inactiveLabelClasses = 'text-gray-500 group-hover:text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 dark:group-focus-visible:text-gray-200';
$activeLabelClasses = 'text-primary-600 dark:text-primary-400';
$iconClasses = 'fi-tabs-item-icon h-5 w-5 shrink-0 transition duration-75';
$inactiveIconClasses = 'text-gray-400 dark:text-gray-500';
$activeIconClasses = 'text-primary-600 dark:text-primary-400';
@endphp
<{{ $tag }}
@if ($tag === 'button')
type="{{ $type }}"
@elseif ($tag === 'a')
{{ \Filament\Support\generate_href_html($href, $target === '_blank', $spaMode) }}
@endif
@if ($hasAlpineActiveClasses)
x-bind:class="{
@js($inactiveItemClasses): {{-- format-ignore-start --}} ! ({{ $alpineActive }}) {{-- format-ignore-end --}},
@js($activeItemClasses): {{ $alpineActive }},
}"
@endif
{{
$attributes
->merge([
'aria-selected' => $active,
'role' => 'tab',
])
->class([
'fi-tabs-item group flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75',
$inactiveItemClasses => (! $hasAlpineActiveClasses) && (! $active),
$activeItemClasses => (! $hasAlpineActiveClasses) && $active,
])
}}
>
@if ($icon && $iconPosition === IconPosition::Before)
(! $hasAlpineActiveClasses) && (! $active),
$activeIconClasses => (! $hasAlpineActiveClasses) && $active,
])
/>
@endif
(! $hasAlpineActiveClasses) && (! $active),
$activeLabelClasses => (! $hasAlpineActiveClasses) && $active,
])
>
{{ $slot }}
@if ($icon && $iconPosition === IconPosition::After)
(! $hasAlpineActiveClasses) && (! $active),
$activeIconClasses => (! $hasAlpineActiveClasses) && $active,
])
/>
@endif
@if (filled($badge))
{{ $badge }}
@endif