🎨 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/command/empty.blade.php

@@ -0,0 +1,9 @@
+@blaze
+
+<ui-option-empty class="data-hidden:hidden">
+    <div class="flex items-center justify-center h-10">
+        <div class="text-sm text-zinc-500 dark:text-zinc-400 font-medium">
+            {{ $slot }}
+        </div>
+    </div>
+</ui-option-empty>

resources/views/flux/command/index.blade.php

@@ -0,0 +1,16 @@
+@blaze
+
+@props([
+    'placeholder' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('w-full block rounded-xl overflow-hidden shadow-xs')
+    ->add('border border-zinc-200 dark:border-zinc-600')
+    ;
+@endphp
+
+<ui-select clear="action" {{ $attributes->class($classes)->merge(['filter' => true]) }} data-flux-command>
+    {{ $slot }}
+</ui-select>

resources/views/flux/command/input.blade.php

@@ -0,0 +1,51 @@
+@blaze
+
+@props([
+    'clearable' => null,
+    'closable' => null,
+    'icon' => 'magnifying-glass',
+])
+
+@php
+$classes = Flux::classes()
+    ->add('h-12 w-full flex items-center px-3 py-2')
+    ->add('font-medium text-base sm:text-sm text-zinc-800 dark:text-white')
+    ->add('ps-11') // Make room for magnifying glass icon...
+    ->add(($closable || $clearable) ? 'pe-11' : '') // Make room for close/clear button...
+    ->add('outline-hidden')
+    ->add('border-b border-zinc-200 dark:border-zinc-600')
+    ->add('bg-white dark:bg-zinc-700')
+    // The below reverts styles added by Tailwind Forms plugin
+    ->add('border-t-0 border-s-0 border-e-0 focus:ring-0 focus:border-zinc-200 dark:focus:border-zinc-600')
+    ;
+@endphp
+
+<div class="relative" data-flux-command-input>
+    <div class="absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400 ps-3.5 start-0 [&:has(+input:focus)]:text-zinc-800 dark:[&:has(+input:focus)]:text-zinc-400">
+        <?php if (is_string($icon) && $icon !== ''): ?>
+            <flux:icon :$icon variant="mini" />
+        <?php else: ?>
+            {{ $icon }}
+        <?php endif; ?>
+    </div>
+
+    <input type="text" {{ $attributes->class($classes) }} />
+
+    <?php if ($closable): ?>
+        <div class="absolute top-0 bottom-0 flex items-center justify-center pe-2 end-0">
+            <ui-close>
+                <flux:button square variant="subtle" size="sm" aria-label="Close command modal">
+                    <flux:icon.x-mark variant="micro" />
+                </flux:button>
+            </ui-close>
+        </div>
+    <?php elseif ($clearable): ?>
+        <div class="absolute top-0 bottom-0 flex items-center justify-center pe-2 end-0 [[data-flux-command-input]:has(input:placeholder-shown)_&]:hidden">
+            <flux:button square variant="subtle" size="sm" tabindex="-1" aria-label="Clear command input"
+                x-on:click="$el.closest('[data-flux-command-input]').querySelector('input').value = ''; $el.closest('[data-flux-command-input]').querySelector('input').dispatchEvent(new Event('input', { bubbles: false })); $el.closest('[data-flux-command-input]').querySelector('input').focus()"
+            >
+                <flux:icon.x-mark variant="micro" />
+            </flux:button>
+        </div>
+    <?php endif; ?>
+</div>

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

@@ -0,0 +1,38 @@
+@blaze
+
+@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+    'iconVariant' => 'outline',
+    'icon' => null,
+    'kbd' => null,
+])
+
+@php
+$classes = Flux::classes()
+    ->add('w-full group/item data-hidden:hidden h-10 flex items-center px-2 py-1.5 focus:outline-hidden')
+    ->add('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')
+    ;
+@endphp
+
+<ui-option action {{ $attributes->class($classes) }} data-flux-command-item>
+    <?php if ($icon): ?>
+        <div class="relative">
+            <?php if (is_string($icon) && $icon !== ''): ?>
+                <flux:icon :$icon :variant="$iconVariant" class="me-2 size-6 text-zinc-400 dark:text-zinc-400 group-data-active/item:text-zinc-800 dark:group-data-active/item:text-white" />
+            <?php else: ?>
+                {{ $icon }}
+            <?php endif; ?>
+        </div>
+    <?php endif; ?>
+
+    {{ $slot }}
+
+    <?php if ($kbd): ?>
+        <div class="inline-flex ms-auto rounded-sm bg-zinc-800/5 dark:bg-white/10 px-1 py-0.5">
+            <span class="font-medium text-xs text-zinc-500 dark:text-zinc-300">{{ $kbd }}</span>
+        </div>
+    <?php endif; ?>
+</ui-option>

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

@@ -0,0 +1,15 @@
+@blaze
+
+@php
+$classes = Flux::classes()
+    ->add('p-[.3125rem]')
+    ->add('overflow-y-auto')
+    ->add('bg-white dark:bg-zinc-700')
+    ;
+@endphp
+
+<ui-options {{ $attributes->class($classes) }} data-flux-command-items>
+    {{ $slot }}
+
+    <flux:command.empty>{!! __('No results found') !!}</flux:command.empty>
+</ui-options>