🎨 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/autocomplete/index.blade.php

@@ -0,0 +1,15 @@
+@blaze
+
+@props([
+    'filter' => true,
+    'disabled' => false,
+])
+
+<?php $containerAttributes = Flux::attributesAfter('container:', $attributes); ?>
+<ui-select autocomplete clear="esc" data-flux-autocomplete {{ $containerAttributes->merge(['filter' => $filter, 'disabled' => $disabled]) }}>
+    <flux:input :attributes="$attributes->except('filter')" />
+
+    <flux:autocomplete.items>
+        {{ $slot }}
+    </flux:autocomplete.items>
+</ui-select>

resources/views/flux/autocomplete/item.blade.php

@@ -0,0 +1,14 @@
+@blaze
+
+@php
+$classes = Flux::classes()
+    ->add('data-hidden:hidden flex items-center px-2 py-1.5 w-full focus:outline-hidden rounded-md')
+    ->add('text-start text-sm font-medium')
+    ->add('text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600')
+    ->add('scroll-my-[.3125rem]') // This is here so that when a user scrolls to the top or bottom of the list, the padding is included...
+    ;
+@endphp
+
+<ui-option {{ $attributes->class($classes) }} data-flux-autocomplete-item>
+    {{ $slot }}
+</ui-option>

resources/views/flux/autocomplete/items.blade.php

@@ -0,0 +1,17 @@
+@blaze
+
+@php
+$classes = Flux::classes()
+    ->add('[:where(&)]:max-h-[20rem]') // "[:where(&)]:" means it can be overriden without "!"...
+    ->add('p-[.3125rem] overflow-y-auto rounded-lg shadow-xs')
+    ->add('border border-zinc-200 dark:border-zinc-600')
+    ->add('bg-white dark:bg-zinc-700')
+    ->add('[&:not(:has(ui-empty[data-hidden]))]:hidden') // Hide this entire panel if there are no results...
+    ;
+@endphp
+
+<ui-options popover="manual" {{ $attributes->class($classes) }} data-flux-autocomplete-items>
+    {{ $slot }}
+
+    <ui-empty class="contents"></ui-empty>
+</ui-options>