component.html.erb in lookbook-2.0.0.beta.0

- old
+ new

@@ -1,29 +1,18 @@
-<%= render_component_tag tag_name,
-  href: @href,
-  class: [
-    "block text-lookbook-icon-button-stroke focus:outline-none focus-visible:outline-none #{padding}",
-    {
-      "hover:text-lookbook-icon-button-stroke-hover": !@disabled,
-      "cursor-[not-allowed] opacity-50": @disabled
-    }
-  ],
-  disabled: @disabled,
+<%= lookbook_render button_component.new(
+  id: id,
+  icon: icon,
+  **button_attrs,
   "@keydown.esc.stop": "hideDropdown",
-  "@navigation:complete.window": "updateDropdown" do %>
-  <span x-ref="icon">
-    <%= icon || lookbook_render(:icon, name: @icon, size: icon_size, ":class": "{'animate-spin': _spinning}") %>
-  </span>
-  <% if @tooltip %>
-    <label class="hidden" x-ref="tooltip"><%= @tooltip %></label>
-  <% end %>
-  <% if content %>
-    <div x-ref="content"><%== content %></div>
-  <% end %>
-  <% if dropdown? %>
-    <div class="hidden" x-ref="dropdown">
-      <div class="bg-white divide-y divide-lookbook-divider text-left">
-        <%== dropdown %>
+  "@navigation:complete.window": "updateDropdown") do %>
+  <%= content %>
+<% end %>
+
+<% if dropdown? %>
+  <% content_for :dropdowns do %>
+    <div data-dropdown-id="<%= id %>">
+      <div class="divide-y divide-lookbook-divider text-left">
+        <%= dropdown %>
       </div>
     </div>
   <% end %>
 <% end %>
\ No newline at end of file