Improve dropdown components and bump version to 0.1.7

- Remove fixed width constraints from select dropdowns for dynamic sizing
- Add clear button (X) outside dropdown for better UX in Select component
- Adjust dropdown alignment from end to start for consistency
- Fix padding adjustment when clearable option is active
- Continue CSS-based icon approach for better performance
- Improve clear selection text and icon in dropdown menu

Closes #1, #2, #3

Author: cpursley

README.md

@@ -22,7 +22,7 @@ Add to your `mix.exs`:
 ```elixir
 def deps do
   [
-    {:livefilter, "~> 0.1.6"}
+    {:livefilter, "~> 0.1.7"}
   ]
 end
 ```

lib/live_filter/components/search_select.ex

@@ -80,7 +80,7 @@ defmodule LiveFilter.Components.SearchSelect do
           </.button>
         </.dropdown_menu_trigger>
 
-        <.dropdown_menu_content align="start" class="w-[280px] p-0">
+        <.dropdown_menu_content align="start" class="p-0">
           <div :if={@searchable} class="p-2 pb-0">
             <div class="relative">
               <.icon

lib/live_filter/components/select.ex

@@ -11,7 +11,6 @@ defmodule LiveFilter.Components.Select do
   use Phoenix.Component
   import SaladUI.DropdownMenu
   import SaladUI.Button
-  import SaladUI.Icon
   import SaladUI.Separator
 
   @doc """
@@ -49,23 +48,24 @@ defmodule LiveFilter.Components.Select do
 
   def select(assigns) do
     ~H"""
-    <div id={"#{@id}-wrapper"}>
+    <div id={"#{@id}-wrapper"} class="relative inline-flex items-center">
       <.dropdown_menu id={@id}>
         <.dropdown_menu_trigger>
           <.button
             variant="outline"
             size={@size}
             class={[
               @class,
-              "gap-1 items-center"
+              "gap-1 items-center",
+              @clearable && @selected && "pr-8"
             ]}
           >
-            <.icon :if={@icon} name={@icon} class="h-4 w-4" />
+            <span :if={@icon} class={[@icon, "h-4 w-4"]} />
             {render_button_content(assigns)}
           </.button>
         </.dropdown_menu_trigger>
 
-        <.dropdown_menu_content align="end" class="w-[200px]">
+        <.dropdown_menu_content align="start">
           <%= for {value, label} <- @options do %>
             <.dropdown_menu_item
               phx-click={@on_change}
@@ -74,23 +74,35 @@ defmodule LiveFilter.Components.Select do
             >
               <span>{label}</span>
               <%= if @selected == value do %>
-                <.icon name="hero-check" class="ml-auto h-4 w-4" />
+                <span class="hero-check ml-auto h-4 w-4" />
               <% end %>
             </.dropdown_menu_item>
           <% end %>
 
           <%= if @clearable && @selected do %>
-            <.dropdown_menu_separator />
+            <.dropdown_menu_separator class="my-2" />
             <.dropdown_menu_item
               phx-click={@on_change}
               phx-value-value=""
               class="text-muted-foreground"
             >
-              <.icon name="hero-x-mark" class="mr-2 h-4 w-4" /> Clear
+              <span class="hero-x-circle mr-2 h-4 w-4" /> Clear selection
             </.dropdown_menu_item>
           <% end %>
         </.dropdown_menu_content>
       </.dropdown_menu>
+
+      <%= if @clearable && @selected do %>
+        <button
+          type="button"
+          class="absolute right-2 h-4 w-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 flex items-center justify-center"
+          phx-click={@on_change}
+          phx-value-value=""
+        >
+          <span class="hero-x-mark h-4 w-4" />
+          <span class="sr-only">Clear selection</span>
+        </button>
+      <% end %>
     </div>
     """
   end

mix.exs

@@ -1,7 +1,7 @@
 defmodule LiveFilter.MixProject do
   use Mix.Project
 
-  @version "0.1.6"
+  @version "0.1.7"
   @source_url "https://github.com/cpursley/livefilter"
 
   def project do