Icon Button code

@props([
    'icon',
    'variant' => 'ghost',
    'size' => 'base',
    'iconWeight' => 'regular',
    'href' => null,
    'label' => null,
    'type' => 'button',
])

@php
    /*
    | A square, icon-only button. Always provide a `label` for accessibility.
    |
    | Usage:
    |   <x-ui.icon-button icon="bell" label="Notifications" />
    |   <x-ui.icon-button icon="trash" variant="danger" label="Delete" />
    */
    $base = 'inline-flex items-center justify-center rounded-lg transition-[box-shadow,border-color,color,transform] ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 cursor-pointer';

    $variants = [
        'primary' => 'bg-brand-600 text-white hover:bg-brand-500 active:bg-brand-700 focus:ring-brand-500',
        'accent' => 'bg-accent-600 text-white hover:bg-accent-500 active:bg-accent-700 focus:ring-accent-500',
        'secondary' => 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700 focus:ring-gray-400',
        'outline' => 'border border-brand-300 text-brand-700 hover:bg-brand-50 focus:ring-brand-500 dark:border-brand-700 dark:text-brand-300 dark:hover:bg-brand-950/40',
        'ghost' => 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:ring-gray-400',
        'danger' => 'text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 focus:ring-red-500',
    ];

    $sizes = [
        'sm' => 'w-8 h-8',
        'base' => 'w-9 h-9',
        'lg' => 'w-11 h-11',
    ];

    $iconSize = ['sm' => 'sm', 'base' => 'lg', 'lg' => 'xl'][$size] ?? 'lg';

    $classes = implode(' ', [
        $base,
        $variants[$variant] ?? $variants['ghost'],
        $sizes[$size] ?? $sizes['base'],
    ]);
@endphp

@if ($href)
    <a href="{{ $href }}" @if($label) aria-label="{{ $label }}" title="{{ $label }}" @endif {{ $attributes->merge(['class' => $classes]) }}>
        <x-ui.icon :name="$icon" :weight="$iconWeight" :size="$iconSize" />
    </a>
@else
    <button type="{{ $type }}" @if($label) aria-label="{{ $label }}" title="{{ $label }}" @endif {{ $attributes->merge(['class' => $classes]) }}>
        <x-ui.icon :name="$icon" :weight="$iconWeight" :size="$iconSize" />
    </button>
@endif