# VelvetKit

## Accordion (`UI::Accordion`)

Sections that expand and collapse, one at a time or several.

Add it: `bin/rails generate velvetkit:add accordion`

Also adds: `icon`

Stimulus: `ui--accordion`

### Arguments

```ruby
UI::Accordion.new(type: :single, collapsible: true, default_value: nil, class: nil, **html_attrs)
```

Slots: `with_item`, `with_trigger`, `with_accordion_content`, `with_content`

### Example: Single (one open at a time)

```erb
<div class="max-w-md">
  <%= render(UI::Accordion.new(type: :single, default_value: "item-1")) do |accordion| %>
    <% accordion.with_item(value: "item-1") do |item| %>
      <% item.with_trigger { "What is a workspace?" } %>
      <% item.with_content do %>
        <p class="text-muted-foreground">A workspace holds your team, projects and billing in one place. Everyone you invite sees the same projects.</p>
      <% end %>
    <% end %>
    <% accordion.with_item(value: "item-2") do |item| %>
      <% item.with_trigger { "How do I get started?" } %>
      <% item.with_content do %>
        <p class="text-muted-foreground">Create an account, name your workspace and invite your team. A short setup guide walks you through each step.</p>
      <% end %>
    <% end %>
    <% accordion.with_item(value: "item-3") do |item| %>
      <% item.with_trigger { "Is my data secure?" } %>
      <% item.with_content do %>
        <p class="text-muted-foreground">Yes. We use industry-standard encryption and follow GDPR to ensure your data is protected.</p>
      <% end %>
    <% end %>
  <% end %>
</div>
```

### Example: Multiple (independent items)

```erb
<div class="max-w-md">
  <%= render(UI::Accordion.new(type: :multiple, default_value: ["item-1", "item-3"])) do |accordion| %>
    <% accordion.with_item(value: "item-1") do |item| %>
      <% item.with_trigger { "Features" } %>
      <% item.with_content do %>
        <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1">
          <li>Projects and tasks</li>
          <li>Time tracking</li>
          <li>Grade reporting</li>
          <li>Client portal</li>
        </ul>
      <% end %>
    <% end %>
    <% accordion.with_item(value: "item-2") do |item| %>
      <% item.with_trigger { "Pricing" } %>
      <% item.with_content do %>
        <p class="text-sm text-muted-foreground">We offer flexible pricing plans for teams of all sizes. Contact our sales team for a custom quote.</p>
      <% end %>
    <% end %>
    <% accordion.with_item(value: "item-3") do |item| %>
      <% item.with_trigger { "Support" } %>
      <% item.with_content do %>
        <p class="text-sm text-muted-foreground">24/7 support via email and chat. Premium plans include dedicated account managers and phone support.</p>
      <% end %>
    <% end %>
  <% end %>
</div>
```

### Example: FAQ Style

```erb
<div class="max-w-lg">
  <h2 class="text-xl font-semibold mb-4">Frequently Asked Questions</h2>
  <%= render(UI::Accordion.new(type: :single)) do |accordion| %>
    <% faqs = [
      { q: "How do I reset my password?", a: "Go to Settings &gt; Security and click 'Change Password'. You'll need to enter your current password and your new password." },
      { q: "Can I import data from another system?", a: "Yes, we import CSV and JSON files. Go to Admin &gt; Data Import and follow the wizard to map your fields." },
      { q: "What integrations are available?", a: "Most tools connect through our API and webhooks, and the integrations page lists ready-made ones." },
      { q: "Is there a mobile app?", a: "Yes, for iOS and Android. Search for it in your phone's app store." },
      { q: "How do I contact support?", a: 'Email us at support@example.com or use the live chat widget in the bottom-right corner of your dashboard.' }
    ] %>
    <% faqs.each_with_index do |faq, i| %>
      <% accordion.with_item(value: "faq-#{i}") do |item| %>
        <% item.with_trigger { faq[:q] } %>
        <% item.with_content do %>
          <p class="text-muted-foreground"><%= faq[:a].html_safe %></p>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
</div>
```