🎨 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/sidebar/search.blade.php

@@ -0,0 +1,56 @@
+@blaze
+
+@php $tooltipPosition = $tooltipPosition ??= $attributes->pluck('tooltip:position'); @endphp
+@php $tooltipKbd = $tooltipKbd ??= $attributes->pluck('tooltip:kbd'); @endphp
+@php $tooltip = $tooltip ??= $attributes->pluck('tooltip'); @endphp
+
+@props([
+    'tooltipPosition' => 'right',
+    'placeholder' => __('Search...'),
+    'tooltipKbd' => null,
+    'tooltip' => null,
+    'kbd' => null,
+])
+
+@php
+$tooltip = $tooltip ?? $placeholder;
+
+$tooltipKbd ??= $kbd;
+
+$tooltipClasses = Flux::classes()
+    ->add('w-full')
+    ->add('in-data-flux-sidebar-header:in-data-flux-sidebar-collapsed-desktop:in-data-flux-sidebar-active:hidden')
+    ;
+
+$classes = Flux::classes()
+    ->add('h-10 py-2 px-3 w-full rounded-lg disabled:shadow-none dark:shadow-none appearance-none text-base sm:text-sm leading-[1.375rem] bg-zinc-800/5 dark:bg-white/10 dark:disabled:bg-white/[7%] text-zinc-700 placeholder-zinc-500 disabled:placeholder-zinc-400 dark:text-zinc-200 dark:placeholder-white/60 dark:disabled:placeholder-white/40 border-0 relative flex items-center gap-3')
+    ->add('in-data-flux-sidebar-on-mobile:h-10 in-data-flux-sidebar-collapsed-desktop:px-3')
+    ->add('in-data-flux-sidebar-header:in-data-flux-sidebar-collapsed-desktop:in-data-flux-sidebar-active:hidden')
+    ;
+@endphp
+
+<flux:tooltip :position="$tooltipPosition" :class="$tooltipClasses">
+    <button
+        {{ $attributes->class($classes) }}
+        type="button"
+        data-flux-sidebar-search
+    >
+        <div class="flex items-center justify-center text-xs text-zinc-400/75 start-0">
+            <flux:icon class="size-4" icon="magnifying-glass" variant="outline" />
+        </div>
+
+        <div class="in-data-flux-sidebar-collapsed-desktop:hidden block self-center text-start flex-1 font-medium text-zinc-400 dark:text-white/40">
+            {{ $placeholder }}
+        </div>
+
+        <?php if ($kbd): ?>
+            <div class="in-data-flux-sidebar-collapsed-desktop:hidden absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400/75 pe-4 end-0">
+                {{ $kbd }}
+            </div>
+        <?php endif; ?>
+    </button>
+
+    <flux:tooltip.content :kbd="$tooltipKbd" class="not-in-data-flux-sidebar-collapsed-desktop:hidden cursor-default">
+        {{ $tooltip }}
+    </flux:tooltip.content>
+</flux:tooltip>