add (Livewire) combobox component

app/Livewire/UI/Combobox.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Livewire\UI;
+
+use Livewire\Attributes\Modelable;
+use Livewire\Component;
+
+class Combobox extends Component
+{
+    #[Modelable]
+    public $value;
+
+    public $model;
+
+    public $searchable = [];
+
+    public int $limit = 5;
+
+    public $search = '';
+
+    public $show = false;
+
+    public $placeholder = '';
+
+    public $selected;
+
+    public $display = '';
+
+    public $results = [];
+
+    public function mount()
+    {
+        if ($this->value) {
+            $result = $this->model::findOrFail($this->value);
+            $this->selected = $result;
+        }
+
+        $this->results = collect([]);
+    }
+
+    public function updatedSearch($value)
+    {
+        $query = $this->model::query();
+
+        foreach ($this->searchable as $search) {
+            $query->where($search, 'like', "%$value%");
+        }
+
+        $this->results = $query->limit($this->limit)->get();
+    }
+
+    public function select($result)
+    {
+        $result = $this->results->find($result);
+
+        $this->value = $result->id;
+        $this->selected = $result;
+        $this->show = false;
+        $this->reset(['search', 'results']);
+    }
+
+    public function render()
+    {
+        return view('livewire.combobox.index');
+    }
+}

resources/views/livewire/combobox/index.blade.php

@@ -0,0 +1,41 @@
+<div>
+    <x-popover wire:model="show">
+        <x-popover.trigger>
+            <button
+                class="inline-flex items-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 w-[200px] justify-between"
+            >
+                @if ($selected)
+                    {{ $selected->{$display} }}
+                @else
+                    {{ __($placeholder) }}
+                @endif
+                <x-lucide-chevrons-up-down class="ml-2 size-4 shrink-0 opacity-50" />
+            </button>
+        </x-popover.trigger>
+        <x-popover.content class="w-[200px] p-0">
+            <div class="flex items-center border-b px-3">
+                <x-lucide-search class="size-4 mr-2 shrink-0 opacity-50" />
+                <x-input
+                    wire:model.live="search"
+                    placeholder="{{ __($placeholder) }}"
+                    class="py-3 px-0 outline-none border-none focus-visible:ring-0"
+                />
+            </div>
+            @foreach ($results as $result)
+                <div
+                    wire:click="select('{{ $result->id }}')"
+                    class="hover:bg-accent relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+                >
+                    {{ $result->{$display} }}
+
+                    @if ($value === $result->id)
+                        <x-lucide-check class="size-4 ml-auto h-4 w-4 opacity-100" />
+                    @endif
+                </div>
+            @endforeach
+            @if ($search && $results->isEmpty())
+                <p class="py-6 text-center text-sm">{{ __('No results found') }}</p>
+            @endif
+        </x-popover.content>
+    </x-popover>
+</div>

src/LaravelLuviServiceProvider.php

@@ -38,6 +38,10 @@ class LaravelLuviServiceProvider extends ServiceProvider
         'typography',
     ];
 
+    protected $livewireComponents = [
+        'combobox',
+    ];
+
     /**
      * Register any application services.
      */
@@ -57,6 +61,16 @@ public function boot(): void
             ], $component);
         }
 
+        foreach ($this->livewireComponents as $livewireComponent) {
+            $this->publishes([
+                __DIR__."/../resources/views/livewire/{$livewireComponent}" => resource_path("views/livewire/{$livewireComponent}"),
+            ], $livewireComponent);
+
+            $this->publishes([
+                __DIR__.'/../app/Livewire/UI/'.str($livewireComponent)->ucfirst().'.php' => app_path('Livewire/UI/'.str($livewireComponent)->ucfirst()).'.php',
+            ], $livewireComponent);
+        }
+
         $this->publishes([
             __DIR__.'/../App/Services/ButtonCvaService.php' => app_path('Services/ButtonCvaService.php'),
         ], 'button');