🎨 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/variants/combobox.blade.php

@@ -0,0 +1,56 @@
+@props([
+    'placeholder' => null,
+    'searchable' => null,
+    'clearable' => null,
+    'multiple' => null,
+    'invalid' => null,
+    'empty' => null,
+    'input' => null,
+    'size' => null,
+    'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+    $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+if ($searchable) {
+    throw new \Exception('Comboboxes do not support the searchable prop.');
+}
+
+if ($multiple) {
+    throw new \Exception('Comboboxes do not support the multiple prop.');
+}
+
+$invalid ??= ($name && $errors->has($name));
+
+$class = Flux::classes()
+    ->add('w-full');
+@endphp
+
+<ui-select autocomplete="strict" clear="esc" {{ $attributes->class($class)->merge(['filter' => true]) }} @if($showName) name="{{ $name }}" @endif data-flux-control data-flux-select>
+    <?php if ($input): ?> {{ $input }} <?php else: ?>
+        <flux:select.input :$placeholder :$invalid :$size :$clearable />
+    <?php endif; ?>
+
+    <flux:select.options>
+        <?php if ($empty): ?>
+            <?php if (is_string($empty)): ?>
+                <flux:select.option.empty>{!! __($empty) !!}</flux:select.option.empty>
+            <?php else: ?>
+                {{ $empty }}
+            <?php endif; ?>
+        <?php else: ?>
+            <flux:select.option.empty when-loading="{!! __('Loading...') !!}">
+                {!! __('No results found') !!}
+            </flux:select.option.empty>
+        <?php endif; ?>
+
+        {{ $slot }}
+    </flux:select.options>
+</ui-select>

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

@@ -0,0 +1,33 @@
+@props([
+    'invalid' => null,
+    'clear' => null,
+    'close' => null,
+    'size' => null,
+    'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+    $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$invalid ??= ($name && $errors->has($name));
+
+$class = Flux::classes()
+    ->add('w-full');
+@endphp
+
+<ui-select
+    clear="{{ $clear ?? 'close esc select' }}"
+    @if ($close) close="{{ $close }}" @endif
+    {{ $attributes->class($class)->merge(['filter' => true]) }}
+    @if($showName) name="{{ $name }}" @endif
+    data-flux-control
+    data-flux-select
+>
+    {{ $slot}}
+</ui-select>

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

@@ -0,0 +1,50 @@
+@blaze
+
+@props([
+    'name' => $attributes->whereStartsWith('wire:model')->first(),
+    'placeholder' => null,
+    'invalid' => null,
+    'size' => null,
+])
+
+@php
+$invalid ??= ($name && $errors->has($name));
+
+$classes = Flux::classes()
+    ->add('appearance-none') // Strip the browser's default <select> styles...
+    ->add('[:where(&)]:w-full ps-3 pe-10 block')
+    ->add(match ($size) {
+        default => 'h-10 py-2 text-base sm:text-sm leading-[1.375rem] rounded-lg',
+        'sm' => 'h-8 py-1.5 text-sm leading-[1.125rem] rounded-lg',
+        'xs' => 'h-6 text-xs leading-[1.125rem] rounded-lg',
+    })
+    ->add('shadow-xs border')
+    ->add('bg-white dark:bg-white/10 dark:disabled:bg-white/[7%]')
+    ->add('text-zinc-700 dark:text-zinc-300 disabled:text-zinc-500 dark:disabled:text-zinc-400')
+    // Make the placeholder match the text color of standard input placeholders...
+    ->add('has-[option.placeholder:checked]:text-zinc-400 dark:has-[option.placeholder:checked]:text-zinc-400')
+    // Options on Windows don't inherit dark mode styles, so we need to force them...
+    ->add('dark:[&>option]:bg-zinc-700 dark:[&>option]:text-white')
+    ->add('disabled:shadow-none')
+    ->add($invalid
+        ? 'border border-red-500'
+        : 'border border-zinc-200 border-b-zinc-300/80 dark:border-white/10'
+    )
+    ;
+@endphp
+
+<select
+    {{ $attributes->class($classes) }}
+    @if ($invalid) aria-invalid="true" data-invalid @endif
+    @isset ($name) name="{{ $name }}" @endisset
+    @if (is_numeric($size)) size="{{ $size }}" @endif
+    data-flux-control
+    data-flux-select-native
+    data-flux-group-target
+>
+    <?php if ($placeholder): ?>
+        <option value="" disabled selected class="placeholder">{{ $placeholder }}</option>
+    <?php endif; ?>
+
+    {{ $slot }}
+</select>

resources/views/flux/select/variants/listbox.blade.php

@@ -0,0 +1,52 @@
+@props([
+    'selectedSuffix' => null,
+    'placeholder' => null,
+    'searchable' => null,
+    'clearable' => null,
+    'invalid' => null,
+    'button' => null, // Deprecated...
+    'trigger' => null,
+    'search' => null, // Slot forwarding...
+    'empty' => null, // Slot forwarding...
+    'clear' => null,
+    'close' => null,
+    'name' => null,
+    'size' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+    $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$invalid ??= ($name && $errors->has($name));
+
+$class = Flux::classes()
+    ->add('w-full')
+    // The below reverts styles added by Tailwind Forms plugin
+    ->add('border-0 p-0 bg-transparent')
+    ;
+
+$trigger ??= $button;
+@endphp
+
+<ui-select
+    clear="{{ $clear ?? 'close esc select' }}"
+    @if ($close) close="{{ $close }}" @endif
+    {{ $attributes->class($class)->merge(['filter' => true]) }}
+    @if($showName) name="{{ $name }}" @endif
+    data-flux-control
+    data-flux-select
+>
+    <?php if ($trigger): ?> {{ $trigger }} <?php else: ?>
+        <flux:select.button :$placeholder :$invalid :$size :$clearable :suffix="$selectedSuffix" />
+    <?php endif; ?>
+
+    <flux:select.options :$search :$searchable :$empty>
+        {{ $slot }}
+    </flux:select.options>
+</ui-select>