Shoelace Rails UI

<%= sl_alert variant: "warning", open: true, closable: true do %>
  Hello from Shoelace!
<% end %>

<%# Simple components %>
<%= sl_button variant: "primary", size: "large" do %>
  Click me
<% end %>

<%= sl_badge variant: "success", pill: true do %>
  Online
<% end %>

<%= sl_spinner %>

<%= sl_divider %>

<%# Components without blocks %>
<%= sl_input type: "email", label: "Email", placeholder: "you@example.com",
            required: true, clearable: true, help_text: "We'll never share it" %>

<%= sl_avatar image: "avatar.jpg", label: "User", shape: "circle" %>

<%= sl_progress_bar value: 75, label: "Loading..." %>

<%= sl_rating value: 3, max: 5, readonly: true %>

<%= sl_qr_code value: "https://shoelace.style", size: 200 %>

<%# Nested components %>
<%= sl_details summary: "More info" do %>
  <%= sl_alert variant: "primary", open: true do %>
    Nested Shoelace components work perfectly.
  <% end %>
<% end %>

<%= sl_dialog label: "Confirm" do %>
  Are you sure?
  <%= sl_button variant: "primary" do %>Yes<% end %>
  <%= sl_button variant: "default" do %>Cancel<% end %>
<% end %>

<%= sl_drawer label: "Settings", placement: "end" do %>
  <%= sl_switch name: "notifications", checked: true do %>Notifications<% end %>
  <%= sl_switch name: "sounds" do %>Sounds<% end %>
<% end %>

<%# Tabs %>
<%= sl_tab_group do %>
  <%= sl_tab panel: "general", active: true do %>General<% end %>
  <%= sl_tab panel: "advanced" do %>Advanced<% end %>
  <%= sl_tab_panel name: "general", active: true do %>General settings here<% end %>
  <%= sl_tab_panel name: "advanced" do %>Advanced settings here<% end %>
<% end %>

<%# Trees %>
<%= sl_tree selection: "single" do %>
  <%= sl_tree_item expanded: true do %>
    Documents
    <%= sl_tree_item do %>Resume.pdf<% end %>
    <%= sl_tree_item do %>Cover Letter.pdf<% end %>
  <% end %>
<% end %>

<%# Works great with Hotwire / Turbo %>
<%= turbo_frame_tag :lazy_content, src: lazy_path, loading: :lazy do %>
  <%= sl_spinner %>
<% end %>

<sl-dropdown>
  <sl-button slot="trigger" caret>Dropdown</sl-button>
  <sl-menu>
    <%= sl_menu_item(value: "1") { "Option 1" } %>
    <%= sl_menu_item(value: "2") { "Option 2" } %>
    <sl-divider></sl-divider>
    <sl-menu-item disabled>Disabled</sl-menu-item>
  </sl-menu>
</sl-dropdown>

<%= sl_form_with model: @user do |f| %>
  <%= f.text_field :name %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.telephone_field :phone %>
  <%= f.url_field :website %>
  <%= f.number_field :age %>
  <%= f.text_area :bio %>
  <%= f.range_field :satisfaction %>
  <%= f.color_field :favorite_color %>
  <%= f.switch_field :notifications %>
  <%= f.check_box :terms %>
  <%= f.select :role, ["Admin", "User", "Guest"] %>
  <%= f.collection_select :team_id, Team.all, :id, :name %>
  <%= f.collection_radio_buttons :plan, Plan.all, :id, :name %>
  <%= f.submit %>
<% end %>