Dropdown

<%= rui_dropdown(text: "Actions", color: :orange) do |dropdown| %>
  <% dropdown.with_item(text: "Edit", href: "#") %>
  <% dropdown.with_item(text: "Duplicate", href: "#") %>
  <% dropdown.with_divider %>
  <% dropdown.with_item(text: "Delete", href: "#", danger: true) %>
<% end %>

<%= rui_dropdown(text: "Settings", variant: :outline, color: :orange) do |dropdown| %>
  <% dropdown.with_header(text: "Account") %>
  <% dropdown.with_item(text: "Profile", href: "#") %>
  <% dropdown.with_item(text: "Preferences", href: "#") %>
  <% dropdown.with_divider %>
  <% dropdown.with_header(text: "System") %>
  <% dropdown.with_item(text: "Logout", href: "#", danger: true) %>
<% end %>

<%= rui_dropdown(
  :category,
  collection: { "Technology" => "tech", "Design" => "design", "Business" => "business" },
  label: "Category",
  help_text: "Select a category for your post"
) %>

<%= rui_dropdown(
  :priority,
  collection: [["Low", "low"], ["Medium", "medium"], ["High", "high"]],
  label: "Priority",
  color: :info,
  required: true
) %>

<%= rui_dropdown(text: "Solid", variant: :solid, color: :primary) %>
<%= rui_dropdown(text: "Outline", variant: :outline, color: :primary) %>
<%= rui_dropdown(text: "Ghost", variant: :ghost, color: :primary) %>
<%= rui_dropdown(text: "Soft", variant: :soft, color: :primary) %>

<%= rui_dropdown(text: "Zinc", color: :zinc) %>
<%= rui_dropdown(text: "Primary", color: :primary) %>
<%= rui_dropdown(text: "Success", color: :success) %>
<%= rui_dropdown(text: "Warning", color: :warning) %>
<%= rui_dropdown(text: "Danger", color: :danger) %>
<%= rui_dropdown(text: "Info", color: :info) %>

<%= rui_dropdown(text: "Red", color: :red) %>
<%= rui_dropdown(text: "Orange", color: :orange) %>
<%= rui_dropdown(text: "Yellow", color: :yellow) %>
<%= rui_dropdown(text: "Green", color: :green) %>
<%= rui_dropdown(text: "Blue", color: :blue) %>
<%= rui_dropdown(text: "Purple", color: :purple) %>
<%= rui_dropdown(text: "Pink", color: :pink) %>

<%= rui_dropdown(text: "XS", size: :xs) %>
<%= rui_dropdown(text: "SM", size: :sm) %>
<%= rui_dropdown(text: "Base", size: :base) %>
<%= rui_dropdown(text: "LG", size: :lg) %>
<%= rui_dropdown(text: "XL", size: :xl) %>

<%= rui_dropdown(text: "Square", shape: :square) %>
<%= rui_dropdown(text: "Rounded", shape: :rounded) %>
<%= rui_dropdown(text: "Pill", shape: :pill) %>

<%= rui_dropdown(text: "Small", width: :sm) %>
<%= rui_dropdown(text: "Base", width: :base) %>
<%= rui_dropdown(text: "Large", width: :lg) %>
<%= rui_dropdown(text: "XL", width: :xl) %>
<%= rui_dropdown(text: "Full", width: :full) %>

<%= rui_dropdown(text: "Bottom", placement: :bottom) %>
<%= rui_dropdown(text: "Top", placement: :top) %>
<%= rui_dropdown(text: "Right", placement: :right) %>
<%= rui_dropdown(text: "Left", placement: :left) %>

<%# Click trigger (default) %>
<%= rui_dropdown(text: "Click me", trigger: :click) do |d| %>
  <% d.with_item(text: "Option 1", href: "#") %>
<% end %>

<%# Hover trigger %>
<%= rui_dropdown(text: "Hover over me", trigger: :hover) do |d| %>
  <% d.with_item(text: "Option 1", href: "#") %>
<% end %>

<%# Vertical dots (common for row actions) %>
<%= rui_dropdown(trigger_icon: "more-vertical", variant: :ghost) do |d| %>
  <% d.with_item(text: "Edit", href: "#") %>
  <% d.with_item(text: "Delete", href: "#") %>
<% end %>

<%# Horizontal dots %>
<%= rui_dropdown(trigger_icon: "more-horizontal", variant: :ghost) do |d| %>
  <% d.with_item(text: "View details", href: "#") %>
<% end %>

<%# Settings icon with color %>
<%= rui_dropdown(trigger_icon: "settings", variant: :soft, color: :primary) do |d| %>
  <% d.with_item(text: "Profile", href: "#") %>
  <% d.with_item(text: "Preferences", href: "#") %>
<% end %>

<%# Plus icon for "Add new" actions %>
<%= rui_dropdown(trigger_icon: "plus", variant: :solid, color: :success, shape: :pill) do |d| %>
  <% d.with_item(text: "New document", href: "#") %>
  <% d.with_item(text: "Upload file", href: "#") %>
<% end %>

<%# Simple avatar trigger %>
<%= rui_dropdown(avatar: { src: user.avatar_url, alt: user.name }) do |d| %>
  <% d.with_item(text: "Profile", href: "#") %>
  <% d.with_item(text: "Settings", href: "#") %>
  <% d.with_divider %>
  <% d.with_item(text: "Sign out", href: "#") %>
<% end %>

<%# Avatar with name displayed %>
<%= rui_dropdown(avatar: { src: user.avatar_url, alt: user.name, name: user.name }) do |d| %>
  <% d.with_user_header(name: user.name, email: user.email, avatar: user.avatar_url, badge: "PRO") %>
  <% d.with_item(text: "Profile", href: "#") %>
  <% d.with_item(text: "Sign out", href: "#") %>
<% end %>

<%# Avatar placeholder (shows initials when no image) %>
<%= rui_dropdown(avatar: { name: user.name }) do |d| %>
  <% d.with_item(text: "Profile", href: "#") %>
<% end %>

<%= rui_dropdown(text: "Account Menu", color: :primary) do |d| %>
  <%# Rich user header with avatar, name, email, and badge %>
  <% d.with_user_header(
    name: "Bonnie Green",
    email: "bonnie@example.com",
    avatar: "https://example.com/avatar.jpg",
    badge: "Admin"
  ) %>
  <% d.with_item(text: "Dashboard", href: "#") %>
  <% d.with_item(text: "Profile", href: "#") %>
  <% d.with_item(text: "Settings", href: "#") %>
  <% d.with_divider %>
  <% d.with_item(text: "Sign out", href: "#") %>
<% end %>

<%# User header without avatar (shows initials) %>
<% d.with_user_header(name: "John Doe", email: "john@example.com", badge: "PRO") %>

<%= rui_dropdown(text: "Notifications", color: :primary) do |dropdown| %>
  <% dropdown.with_header(text: "Notification Settings") %>
  <% dropdown.with_checkbox_item(
    text: "Email notifications",
    name: "notifications[]",
    value: "email",
    checked: true,
    help_text: "Receive updates via email"
  ) %>
  <% dropdown.with_checkbox_item(
    text: "Push notifications",
    name: "notifications[]",
    value: "push",
    help_text: "Get push alerts on your device"
  ) %>
  <% dropdown.with_checkbox_item(
    text: "SMS notifications",
    name: "notifications[]",
    value: "sms",
    help_text: "Receive text messages"
  ) %>
  <% dropdown.with_divider %>
  <% dropdown.with_checkbox_item(
    text: "Marketing emails",
    name: "notifications[]",
    value: "marketing",
    disabled: true,
    help_text: "Promotional content and offers"
  ) %>
<% end %>

<%= rui_dropdown(text: "Account Type", color: :primary) do |dropdown| %>
  <% dropdown.with_header(text: "Select Account Type") %>
  <% dropdown.with_radio_item(
    text: "Individual",
    name: "account_type",
    value: "individual",
    checked: true,
    help_text: "Personal use, single user"
  ) %>
  <% dropdown.with_radio_item(
    text: "Team",
    name: "account_type",
    value: "team",
    help_text: "Up to 10 team members"
  ) %>
  <% dropdown.with_radio_item(
    text: "Enterprise",
    name: "account_type",
    value: "enterprise",
    help_text: "Unlimited members, custom features"
  ) %>
<% end %>

<%= rui_dropdown(text: "User Menu") do |dropdown| %>
  <% dropdown.with_header(text: "Signed in as") %>
  <% dropdown.with_item(text: "john@example.com", disabled: true) %>
  <% dropdown.with_divider %>
  <% dropdown.with_header(text: "Account") %>
  <% dropdown.with_item(text: "Your Profile", href: "#") %>
  <% dropdown.with_item(text: "Settings", href: "#") %>
  <% dropdown.with_divider %>
  <% dropdown.with_item(text: "Sign out", href: "#") %>
<% end %>

<%= rui_dropdown(text: "File Actions", color: :primary) do |d| %>
  <% d.with_item(text: "New File", href: "#", icon: "file-plus") %>
  <% d.with_item(text: "Open", href: "#", icon: "folder-open") %>
  <% d.with_item(text: "Save", href: "#", icon: "save") %>
  <% d.with_divider %>
  <% d.with_item(text: "Share", href: "#", icon: "share-2") %>
  <% d.with_item(text: "Download", href: "#", icon: "download") %>
  <% d.with_divider %>
  <% d.with_item(text: "Delete", href: "#", icon: "trash-2") %>
<% end %>

<%# Disabled action dropdown %>
<%= rui_dropdown(text: "Disabled", disabled: true) do |d| %>
  <% d.with_item(text: "Option 1", href: "#") %>
<% end %>

<%# Disabled selection dropdown %>
<%= rui_dropdown(
  :status,
  collection: { "Active" => "active" },
  label: "Status",
  disabled: true,
  help_text: "This field is currently locked"
) %>

<%= rui_dropdown(
  :category,
  collection: { "Technology" => "tech", "Design" => "design" },
  label: "Category",
  required: true,
  error_message: "Please select a category"
) %>

<%# With form builder (auto-detects model errors) %>
<%= form_with(model: @post) do |f| %>
  <%= f.rui_dropdown(:category_id,
    collection: Category.all,
    label: "Category",
    required: true
  ) %>
  <%# Error is auto-displayed from @post.errors[:category_id] %>
<% end %>

<%= rui_dropdown(
  :status,
  collection: { "Draft" => "draft", "Published" => "published", "Archived" => "archived" },
  label: "Status"
) %>

<%= rui_dropdown(
  :priority,
  collection: [["Low", 1], ["Medium", 2], ["High", 3]],
  label: "Priority"
) %>

<%= rui_dropdown(
  :category_id,
  collection: Category.all,
  value_method: :id,
  text_method: :name,
  label: "Category"
) %>

<nav class="flex items-center gap-2">
  <%= rui_dropdown(text: "Products", variant: :ghost, trigger: :hover) do |d| %>
    <% d.with_item(text: "Analytics", href: "#", icon: "bar-chart-2") %>
    <% d.with_item(text: "Automation", href: "#", icon: "zap") %>
    <% d.with_item(text: "Integration", href: "#", icon: "link") %>
  <% end %>

  <%= rui_dropdown(text: "Solutions", variant: :ghost, trigger: :hover) do |d| %>
    <% d.with_item(text: "For Startups", href: "#") %>
    <% d.with_item(text: "For Enterprise", href: "#") %>
  <% end %>
</nav>

<%= rui_dropdown(avatar: { src: current_user.avatar_url, alt: current_user.name, name: current_user.name }) do |d| %>
  <% d.with_user_header(
    name: current_user.name,
    email: current_user.email,
    avatar: current_user.avatar_url,
    badge: current_user.role.humanize
  ) %>
  <% d.with_item(text: "Your Profile", href: profile_path, icon: "user") %>
  <% d.with_item(text: "Settings", href: "#", icon: "settings") %>
  <% d.with_divider %>
  <% d.with_item(text: "Sign out", href: logout_path, icon: "log-out", danger: true) %>
<% end %>

<table>
  <tbody>
    <% @projects.each do |project| %>
      <tr>
        <td><%= project.name %></td>
        <td><%= rui_badge(project.status, color: :success, size: :xs) %></td>
        <td class="text-right">
          <%= rui_dropdown(trigger_icon: "more-vertical", variant: :ghost, size: :sm, placement: :left) do |d| %>
            <% d.with_item(text: "View", href: project_path(project), icon: "eye") %>
            <% d.with_item(text: "Edit", href: edit_project_path(project), icon: "edit") %>
            <% d.with_divider %>
            <% d.with_item(text: "Delete", href: project_path(project), icon: "trash-2", danger: true) %>
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<%# Multi-select filter with checkboxes %>
<%= rui_dropdown(trigger_icon: "filter", text: "Filters", variant: :outline) do |d| %>
  <% d.with_header(text: "Status") %>
  <% d.with_checkbox_item(text: "Active", name: "status[]", value: "active", checked: true) %>
  <% d.with_checkbox_item(text: "Pending", name: "status[]", value: "pending") %>
  <% d.with_checkbox_item(text: "Archived", name: "status[]", value: "archived") %>
<% end %>

<%# Single-select sort with radios %>
<%= rui_dropdown(text: "Sort by", variant: :outline) do |d| %>
  <% d.with_radio_item(text: "Newest first", name: "sort", value: "newest", checked: true) %>
  <% d.with_radio_item(text: "Oldest first", name: "sort", value: "oldest") %>
  <% d.with_radio_item(text: "Name (A-Z)", name: "sort", value: "name_asc") %>
<% end %>

<%= rui_dropdown(text: "Options", color: :emerald) do |d| %>
  <% d.with_item(text: "New post", href: "#", icon: "plus") %>

  <%# Submenu with items array %>
  <% d.with_submenu(text: "Sort by", icon: "arrow-up-down", items: [
    { text: "Date", href: "#", checked: true },
    { text: "Name", href: "#" },
    { text: "Size", href: "#" }
  ]) %>

  <% d.with_submenu(text: "Filter", icon: "filter", items: [
    { text: "Draft", href: "#", checked: true },
    { text: "Published", href: "#" },
    { text: "Archived", href: "#" }
  ]) %>

  <% d.with_divider %>
  <% d.with_item(text: "Delete", href: "#", icon: "trash-2", danger: true) %>
<% end %>

<%= rui_dropdown(text: "Settings", variant: :outline) do |d| %>
  <% d.with_toggle_item(text: "Enable notifications", checked: true) %>
  <% d.with_toggle_item(text: "Enable 2FA authentication") %>
  <% d.with_toggle_item(text: "Subscribe to newsletter", checked: true) %>
<% end %>

<%# With form name for form submission %>
<% d.with_toggle_item(text: "Dark mode", name: "settings[dark_mode]", checked: false) %>

<%= rui_dropdown(text: "Select User", variant: :outline) do |d| %>
  <% d.with_avatar_item(text: "Leslie Livingston", avatar: "https://example.com/avatar1.jpg") %>
  <% d.with_avatar_item(text: "Michael Gough", avatar: "https://example.com/avatar2.jpg", selected: true) %>
  <% d.with_avatar_item(text: "Joseph Mcfall", avatar: "https://example.com/avatar3.jpg") %>
<% end %>

<%# Without avatar URL - uses initials from rui_avatar %>
<% d.with_avatar_item(text: "Jane Doe") %>

<%# With href for navigation %>
<% d.with_avatar_item(text: "View Profile", avatar: "...", href: "/users/1") %>

<%= rui_dropdown(text: "Search Users", variant: :outline) do |d| %>
  <% d.with_search(placeholder: "Search...") %>
  <% d.with_avatar_item(text: "Bonnie Green", avatar: "...") %>
  <% d.with_avatar_item(text: "Leslie Livingston", avatar: "...") %>
  <% d.with_avatar_item(text: "Michael Gough", avatar: "...") %>
<% end %>

<%# Search with checkboxes %>
<%= rui_dropdown(text: "Filter", variant: :outline) do |d| %>
  <% d.with_search(placeholder: "Type to filter...") %>
  <% d.with_checkbox_item(text: "Option A", checked: true) %>
  <% d.with_checkbox_item(text: "Option B") %>
<% end %>

<%# Primary footer action %>
<%= rui_dropdown(text: "Team", variant: :outline) do |d| %>
  <% d.with_avatar_item(text: "Alice Johnson", avatar: "...") %>
  <% d.with_avatar_item(text: "Bob Smith", avatar: "...") %>
  <% d.with_footer(text: "Add new user", icon: "user-plus", href: "#", color: :green) %>
<% end %>

<%# Danger footer action %>
<%= rui_dropdown(text: "Manage", variant: :outline) do |d| %>
  <% d.with_checkbox_item(text: "Item 1", checked: true) %>
  <% d.with_checkbox_item(text: "Item 2") %>
  <% d.with_footer(text: "Delete selected", icon: "trash-2", color: :danger) %>
<% end %>

<%= form_with(model: @post) do |f| %>
  <%= f.rui_dropdown(:category_id,
    collection: Category.all,
    label: "Category",
    required: true
  ) %>

  <%= f.rui_dropdown(:status,
    collection: Post.statuses,
    label: "Status",
    help_text: "Choose the publication status"
  ) %>

  <%= f.rui_button("Save Post") %>
<% end %>

<%# External trigger to open dropdown %>
<button data-action="menu#open">Open Menu</button>

<%# Close dropdown from inside %>
<%= rui_dropdown(title: "Options") do |d| %>
  <% d.with_item(text: "Cancel", data: { action: "menu#close" }) %>
<% end %>

<div data-controller="analytics"
     data-action="menu:opened->analytics#trackOpen
                  menu:closed->analytics#trackClose">
  <%= rui_dropdown(title: "Actions") do |d| %>
    <% d.with_item(text: "Edit") %>
    <% d.with_item(text: "Delete") %>
  <% end %>
</div>

// analytics_controller.js
trackOpen(event) {
  console.log("Dropdown opened")
}

// Get the menu controller
const dropdownElement = document.querySelector('[data-controller="menu"]')
const menuController = application.getControllerForElementAndIdentifier(
  dropdownElement,
  "menu"
)

// Open/close/toggle
menuController.open()
menuController.close()
menuController.toggle()

// Check open state
console.log("Is open:", menuController.openValue)