🎨 Add new Flux icons: implement multiple reusable icon components (e.g., hand-raised, hand-thumb-up, heart, hashtag, home) with variant support for improved UI consistency.

resources/views/flux/select/option/create.blade.php

@@ -0,0 +1,33 @@
+@blaze
+
+@props([
+    'modal' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('group/option overflow-hidden data-hidden:hidden group flex items-center px-2 py-1.5 w-full focus:outline-hidden')
+    ->add('rounded-md')
+    ->add('text-start text-sm font-medium select-none')
+    ->add('text-zinc-800 data-active:bg-zinc-100 [&[disabled]]:text-zinc-400 dark:text-white dark:data-active:bg-zinc-600 dark:[&[disabled]]:text-zinc-400')
+    ->add('[&[disabled]]:pointer-events-none')
+    ;
+
+if ($modal) {
+    $attributes = $attributes->merge(['x-on:click' => "\$dispatch('modal-show', { name: '{$modal}' })"]);
+}
+
+if ($attributes->whereStartsWith('wire:click')->isNotEmpty()) {
+    $attributes = $attributes->merge(['wire:loading.attr' => 'data-flux-loading']);
+}
+@endphp
+
+<ui-option-create {{ $attributes->class($classes) }} action data-flux-option-create>
+    <div class="w-6 shrink-0">
+        <flux:icon variant="mini" icon="plus" />
+    </div>
+
+    <span class="overflow-hidden text-nowrap text-ellipsis">{{ $slot }}</span>
+
+    <flux:icon.loading class="hidden [[data-flux-loading]>&]:block ms-auto text-zinc-400 [[data-flux-menu-item]:hover_&]:text-current" variant="micro" />
+</ui-option-create>

resources/views/flux/select/option/empty.blade.php

@@ -0,0 +1,14 @@
+@blaze
+
+@php
+$classes = Flux::classes()
+    ->add('data-hidden:hidden block items-center px-2 py-1.5 w-full')
+    ->add('rounded-md')
+    ->add('text-start text-sm font-medium')
+    ->add('text-zinc-500 data-active:bg-zinc-100 dark:text-zinc-300 dark:data-active:bg-zinc-600')
+    ;
+@endphp
+
+<ui-option-empty {{ $attributes->class($classes) }} data-flux-listbox-empty wire:ignore>
+    {{ $slot }}
+</ui-option-empty>

resources/views/flux/select/option/index.blade.php

@@ -0,0 +1,14 @@
+@aware([ 'variant' ])
+
+@props([
+    'variant' => 'default',
+])
+
+@php
+// This prevents variants picked up by `@aware()` from other wrapping components like flux::modal from being used here...
+$variant = $variant !== 'default' && Flux::componentExists('select.variants.' . $variant)
+    ? 'custom'
+    : 'default';
+@endphp
+
+<flux:delegate-component :component="'select.option.variants.' . $variant">{{ $slot }}</flux:delegate-component>

resources/views/flux/select/option/variants/custom.blade.php

@@ -0,0 +1,46 @@
+@aware([ 'indicator' ])
+
+@props([
+    'filterable' => null,
+    'indicator' => null,
+    'loading' => null,
+    'label' => null,
+    'value' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('group/option overflow-hidden data-hidden:hidden group flex items-center px-2 py-1.5 w-full focus:outline-hidden')
+    ->add('rounded-md')
+    ->add('text-start text-sm font-medium select-none')
+    ->add('text-zinc-800 data-active:bg-zinc-100 [&[disabled]]:text-zinc-400 dark:text-white dark:data-active:bg-zinc-600 dark:[&[disabled]]:text-zinc-400')
+    ;
+
+$livewireAction = $attributes->whereStartsWith('wire:click')->isNotEmpty();
+$alpineAction = $attributes->whereStartsWith('x-on:click')->isNotEmpty();
+
+$loading ??= $loading ?? $livewireAction;
+
+if ($loading) {
+    $attributes = $attributes->merge(['wire:loading.attr' => 'data-flux-loading']);
+}
+@endphp
+
+<ui-option
+    @if ($value !== null) value="{{ $value }}" @endif
+    @if ($value) wire:key="{{ $value }}" @endif
+    @if ($filterable === false) filter="manual" @endif
+    @if ($livewireAction || $alpineAction) action @endif
+    {{ $attributes->class($classes) }}
+    data-flux-option
+>
+    <div class="w-6 shrink-0 [ui-selected_&]:hidden">
+        <flux:select.indicator :variant="$indicator" />
+    </div>
+
+    {{ $label ?? $slot }}
+
+    <?php if ($loading): ?>
+        <flux:icon.loading class="hidden [[data-flux-loading]>&]:block ms-auto text-zinc-400 [[data-flux-menu-item]:hover_&]:text-current" variant="micro" />
+    <?php endif; ?>
+</ui-option>

resources/views/flux/select/option/variants/default.blade.php

@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'value' => null,
+])
+
+<option
+    {{ $attributes }}
+    @if (isset($value)) value="{{ $value }}" @endif
+    @if (isset($value)) wire:key="{{ $value }}" @endif
+>{{ $slot }}</option>