ui_components 0.1.0

data/app/views/ui_components/daisy_ui/action_components/modal.html.erb

@@ -0,0 +1,73 @@
+<% component = UiComponents::DaisyUi::Action::ModalComponent %>
+
+<div class="grid grid-cols gap-16 p-2 mt-6 mb-36">
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Actions > Modal</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Dropdown", daisy_ui_dropdown_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Swap >", daisy_ui_swap_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Dialog modal" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(opener: "my_modal_1") do |modal| $>
+                    <$= modal.with_anchor { "open modal" } $>
+                    <$= modal.with_dialog do |dialog| $>
+                      <$= dialog.with_box do |box| $>
+                        <$= box.with_title { "Hello!" } $>
+                        <$= box.with_body { "Press ESC key or click the button below to close" } $>
+                        <$= box.with_action do |action| $>
+                          <$= action.with_item { "Close" } $>
+                        <$ end $>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Dialog modal, closes when clicked outside" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(opener: "my_modal_2") do |modal| $>
+                    <$= modal.with_anchor { "open modal" } $>
+                    <$= modal.with_dialog(backdrop: true) do |dialog| $>
+                      <$= dialog.with_box do |box| $>
+                        <$= box.with_title { "Hello!" } $>
+                        <$= box.with_body { "Press ESC key or click outside to close" } $>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Dialog modal with a close button at corner" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(opener: "my_modal_3") do |modal| $>
+                    <$= modal.with_anchor { "open modal" } $>
+                    <$= modal.with_dialog do |dialog| $>
+                      <$= dialog.with_box do |box| $>
+                        <$= box.with_title { "Hello!" } $>
+                        <$= box.with_body { "Press ESC key or click on ✕ button to close" } $>
+                        <$= box.with_close { "X" } $>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+</div>

data/app/views/ui_components/daisy_ui/action_components/swap.html.erb

@@ -0,0 +1,97 @@
+<% component = UiComponents::DaisyUi::Action::SwapComponent %>
+
+<div class="grid grid-cols gap-16 p-2 mt-6 mb-36">
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Actions > Swap</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Modal", daisy_ui_modal_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Swap text" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |swap| $>
+                    <$= swap.with_on { "ON" } $>
+                    <$= swap.with_off { "OFF" } $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Swap volume icons" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |swap| $>
+                    <$= swap.with_on do $>
+                      <svg class="h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320Z"/></svg>
+                    <$ end $>
+                    <$= swap.with_off do $>
+                      <svg class="h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m616-320-56-56 104-104-104-104 56-56 104 104 104-104 56 56-104 104 104 104-56 56-104-104-104 104Zm-496-40v-240h160l200-200v640L280-360H120Z"/></svg>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Swap icons with rotate effect" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(effect: "rotate") do |swap| $>
+                    <$= swap.with_on do $>
+                      <svg class="h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M440-800v-120h80v120h-80Zm0 760v-120h80v120h-80Zm360-400v-80h120v80H800Zm-760 0v-80h120v80H40Zm708-252-56-56 70-72 58 58-72 70ZM198-140l-58-58 72-70 56 56-70 72Zm564 0-70-72 56-56 72 70-58 58ZM212-692l-72-70 58-58 70 72-56 56Zm268 452q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q67 0 113.5-46.5T640-480q0-67-46.5-113.5T480-640q-67 0-113.5 46.5T320-480q0 67 46.5 113.5T480-320Zm0-160Z"/></svg>
+                    <$ end $>
+                    <$= swap.with_off do $>
+                      <svg class="h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Swap icons with flip effect" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(effect: "flip") do |swap| $>
+                    <$= swap.with_on do $>
+                      <svg class="h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400h-66q-22 37-58.5 58.5T480-320q-43 0-79.5-21.5T342-400h-66q25 63 80.5 101.5T480-260Zm0 180q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                    <$ end $>
+                    <$= swap.with_off do $>
+                      <svg class="h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 100q-68 0-123.5 38.5T276-280h66q22-37 58.5-58.5T480-360q43 0 79.5 21.5T618-280h66q-25-63-80.5-101.5T480-420Zm0 340q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Activate using class name instead of checkbox" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(active: true) do |swap| $>
+                    <$= swap.with_on do $>
+                      <svg class="h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q68 0 123.5-38.5T684-400h-66q-22 37-58.5 58.5T480-320q-43 0-79.5-21.5T342-400h-66q25 63 80.5 101.5T480-260Zm0 180q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                    <$ end $>
+                    <$= swap.with_off do $>
+                      <svg class="h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 100q-68 0-123.5 38.5T276-280h66q22-37 58.5-58.5T480-360q43 0 79.5 21.5T618-280h66q-25-63-80.5-101.5T480-420Zm0 340q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+</div>

data/app/views/ui_components/daisy_ui/data_display_components/accordion.html.erb

@@ -0,0 +1,205 @@
+<% component = UiComponents::DaisyUi::DataDisplay::AccordionComponent %>
+
+<div class="grid grid-cols gap-16 p-2 mt-6 mb-36">
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Accordion</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Avatar >", daisy_ui_avatar_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Accordion using radio inputs" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |accordion| $>
+                    <$= accordion.with_item do |item| $>
+                      <$ item.with_anchor do $>
+                        How do I create an account?
+                      <$ end $>
+                      <$ item.with_body do $>
+                        Click the "Sign Up" button in the top right corner and follow the registration process.
+                      <$ end $>
+                    <$ end $>
+
+                    <$= accordion.with_item do |item| $>
+                      <$ item.with_anchor do $>
+                        I forgot my password. What should I do?
+                      <$ end $>
+                      <$ item.with_body do $>
+                        Click on "Forgot Password" on the login page and follow the instructions sent to your email.
+                      <$ end $>
+                    <$ end $>
+
+                    <$= accordion.with_item do |item| $>
+                      <$ item.with_anchor do $>
+                        How do I update my profile information?
+                      <$ end $>
+                      <$ item.with_body do $>
+                        Go to "My Account" settings and select "Edit Profile" to make changes.
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <% icons = %w[arrow plus] %>
+
+  <% icons.each_with_index do |key, index| %>
+    <%= render DocumentationComponent.new do |document| %>
+      <%= document.with_header { "# Accordion with #{key == "plus" ? "plus/minus" : key} icon" } %>
+      <%= document.with_body do |body| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new(opener: "my_accordion_#{index+1}") do |accordion| $>
+                      <$= accordion.with_item(icon: "#{key}") do |item| $>
+                        <$ item.with_anchor do $>
+                          How do I create an account?
+                        <$ end $>
+                        <$ item.with_body do $>
+                          Click the "Sign Up" button in the top right corner and follow the registration process.
+                        <$ end $>
+                      <$ end $>
+
+                      <$= accordion.with_item(icon: "#{key}") do |item| $>
+                        <$ item.with_anchor do $>
+                          I forgot my password. What should I do?
+                        <$ end $>
+                        <$ item.with_body do $>
+                          Click on "Forgot Password" on the login page and follow the instructions sent to your email.
+                        <$ end $>
+                      <$ end $>
+
+                      <$= accordion.with_item(icon: "#{key}") do |item| $>
+                        <$ item.with_anchor do $>
+                          How do I update my profile information?
+                        <$ end $>
+                        <$ item.with_body do $>
+                          Go to "My Account" settings and select "Edit Profile" to make changes.
+                        <$ end $>
+                      <$ end $>
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Accordion using checkbox inputs" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(opener: "my_accordion_3", toggle: true) do |accordion| $>
+                    <$= accordion.with_item do |item| $>
+                      <$ item.with_anchor do $>
+                        How do I create an account?
+                      <$ end $>
+                      <$ item.with_body do $>
+                        Click the "Sign Up" button in the top right corner and follow the registration process.
+                      <$ end $>
+                    <$ end $>
+
+                    <$= accordion.with_item do |item| $>
+                      <$ item.with_anchor do $>
+                        I forgot my password. What should I do?
+                      <$ end $>
+                      <$ item.with_body do $>
+                        Click on "Forgot Password" on the login page and follow the instructions sent to your email.
+                      <$ end $>
+                    <$ end $>
+
+                    <$= accordion.with_item do |item| $>
+                      <$ item.with_anchor do $>
+                        How do I update my profile information?
+                      <$ end $>
+                      <$ item.with_body do $>
+                        Go to "My Account" settings and select "Edit Profile" to make changes.
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Accordion opened" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(opener: "my_accordion_4") do |accordion| $>
+                    <$= accordion.with_item(opened: true) do |item| $>
+                      <$ item.with_anchor do $>
+                        How do I create an account?
+                      <$ end $>
+                      <$ item.with_body do $>
+                        Click the "Sign Up" button in the top right corner and follow the registration process.
+                      <$ end $>
+                    <$ end $>
+
+                    <$= accordion.with_item do |item| $>
+                      <$ item.with_anchor do $>
+                        I forgot my password. What should I do?
+                      <$ end $>
+                      <$ item.with_body do $>
+                        Click on "Forgot Password" on the login page and follow the instructions sent to your email.
+                      <$ end $>
+                    <$ end $>
+
+                    <$= accordion.with_item do |item| $>
+                      <$ item.with_anchor do $>
+                        How do I update my profile information?
+                      <$ end $>
+                      <$ item.with_body do $>
+                        Go to "My Account" settings and select "Edit Profile" to make changes.
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Using Accordion and Join together" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(opener: "my_accordion_5", css_class: "join join-vertical bg-base-100") do |accordion| $>
+                    <$= accordion.with_item(css_class: "join-item") do |item| $>
+                      <$ item.with_anchor do $>
+                        How do I create an account?
+                      <$ end $>
+                      <$ item.with_body do $>
+                        Click the "Sign Up" button in the top right corner and follow the registration process.
+                      <$ end $>
+                    <$ end $>
+
+                    <$= accordion.with_item(css_class: "join-item") do |item| $>
+                      <$ item.with_anchor do $>
+                        I forgot my password. What should I do?
+                      <$ end $>
+                      <$ item.with_body do $>
+                        Click on "Forgot Password" on the login page and follow the instructions sent to your email.
+                      <$ end $>
+                    <$ end $>
+
+                    <$= accordion.with_item(css_class: "join-item") do |item| $>
+                      <$ item.with_anchor do $>
+                        How do I update my profile information?
+                      <$ end $>
+                      <$ item.with_body do $>
+                        Go to "My Account" settings and select "Edit Profile" to make changes.
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+</div>

data/app/views/ui_components/daisy_ui/data_display_components/avatar.html.erb

@@ -0,0 +1,261 @@
+<% component = UiComponents::DaisyUi::DataDisplay::AvatarComponent %>
+
+<div class="grid grid-cols gap-16 p-2 mt-6 mb-36">
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Avatar</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Accordion", daisy_ui_accordion_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Badge >", daisy_ui_badge_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Avatar" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |avatar| $>
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "rounded") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Avatar in custom sizes" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |avatar| $>
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "rounded w-32") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "rounded w-20") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "rounded w-16") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "rounded w-8") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Avatar rounded" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |avatar| $>
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "rounded-xl") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "rounded-full") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Avatar with mask" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |avatar| $>
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(mask: "squircle") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(mask: "hexagon") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(mask: "triangle") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Avatar group" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(css_class: "avatar-group -space-x-6") do |avatar| $>
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "w-12") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "w-12") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "w-12") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "w-12") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Avatar group with counter" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(css_class: "avatar-group -space-x-6") do |avatar| $>
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "w-12") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "w-12") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(css_class: "w-12") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item(placeholder: true) do |item| $>
+                      <$= item.with_box(css_class: "w-12") do $>
+                        <span>+99</span>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Avatar with ring" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |avatar| $>
+                    <$= avatar.with_item do |item| $>
+                      <$= item.with_box(with_ring: true, css_class: "rounded-full") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Avatar with presence indicator" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |avatar| $>
+                    <$= avatar.with_item(status: "online") do |item| $>
+                      <$= item.with_box(css_class: "rounded-full") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item(status: "offline") do |item| $>
+                      <$= item.with_box(css_class: "rounded-full") do $>
+                        <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Avatar placeholder" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |avatar| $>
+                    <$= avatar.with_item(placeholder: true) do |item| $>
+                      <$= item.with_box(css_class: "rounded-full") do $>
+                        <span class="text-3xl">D</span>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item(placeholder: true, status: "online") do |item| $>
+                      <$= item.with_box(css_class: "rounded-full w-16") do $>
+                        <span class="text-xl">AI</span>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item(placeholder: true) do |item| $>
+                      <$= item.with_box(css_class: "rounded-full w-12") do $>
+                        <span>SY</span>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= avatar.with_item(placeholder: true) do |item| $>
+                      <$= item.with_box(css_class: "rounded-full w-8") do $>
+                        <span class="text-xs">UI</span>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+</div>