ui_components 0.1.1 → 0.1.2

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

@@ -0,0 +1,247 @@
+<% component = UiComponents::DaisyUi::DataDisplay::ListComponent %>
+
+<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 > List</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Kbd", daisy_ui_kbd_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Stat >", daisy_ui_stat_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# List (second column grows - default)" } %>
+    <%= doc.with_body(preview_options: { css_class: "p-4 bg-base-200 w-lg" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |list| $>
+                    <$= list.with_item(row: false, css_class: "p-4 pb-2 text-xs opacity-60 tracking-wide").with_content("Most played songs this week") $>
+                    <$= list.with_item do $>
+                      <div>
+                        <img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/>
+                      </div>
+
+                      <div>
+                        <div>Dio Lupa</div>
+                        <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
+                      </div>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-6" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
+                      <$ end $>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= list.with_item do $>
+                      <div>
+                        <img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/>
+                      </div>
+
+                      <div>
+                        <div>Ellie Beilish</div>
+                        <div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
+                      </div>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-6" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
+                      <$ end $>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= list.with_item do $>
+                      <div>
+                        <img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/>
+                      </div>
+
+                      <div>
+                        <div>Sabrino Gardener</div>
+                        <div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
+                      </div>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-6" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
+                      <$ end $>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# List (third column grows)" } %>
+    <%= doc.with_body(preview_options: { css_class: "p-4 bg-base-200 w-lg" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |list| $>
+                    <$= list.with_item(row: false, css_class: "p-4 pb-2 text-xs opacity-60 tracking-wide").with_content("Most played songs this week") $>
+                    <$= list.with_item do $>
+                      <div class="text-4xl font-thin opacity-30 tabular-nums">01</div>
+                      <div>
+                        <img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/>
+                      </div>
+
+                      <div class="list-col-grow">
+                        <div>Dio Lupa</div>
+                        <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
+                      </div>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-6" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
+                      <$ end $>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= list.with_item do $>
+                      <div class="text-4xl font-thin opacity-30 tabular-nums">02</div>
+                      <div>
+                        <img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/>
+                      </div>
+
+                      <div class="list-col-grow">
+                        <div>Ellie Beilish</div>
+                        <div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
+                      </div>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-6" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
+                      <$ end $>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= list.with_item do $>
+                      <div class="text-4xl font-thin opacity-30 tabular-nums">03</div>
+                      <div>
+                        <img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/>
+                      </div>
+
+                      <div class="list-col-grow">
+                        <div>Sabrino Gardener</div>
+                        <div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
+                      </div>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-6" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
+                      <$ end $>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# List (third column wraps to next row)" } %>
+    <%= doc.with_body(preview_options: { css_class: "p-4 bg-base-200 w-lg" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |list| $>
+                    <$= list.with_item(row: false, css_class: "p-4 pb-2 text-xs opacity-60 tracking-wide").with_content("Most played songs this week") $>
+                    <$= list.with_item do $>
+                      <div>
+                        <img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/>
+                      </div>
+
+                      <div>
+                        <div>Dio Lupa</div>
+                        <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
+                      </div>
+
+                      <p class="list-col-wrap text-xs">
+                        "Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa’s most iconic tracks.
+                      </p>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-6" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
+                      <$ end $>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= list.with_item do $>
+                      <div>
+                        <img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/4@94.webp"/>
+                      </div>
+
+                      <div>
+                        <div>Ellie Beilish</div>
+                        <div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
+                      </div>
+
+                      <p class="list-col-wrap text-xs">
+                        "Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim.
+                      </p>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-6" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
+                      <$ end $>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= list.with_item do $>
+                      <div>
+                        <img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/3@94.webp"/>
+                      </div>
+
+                      <div>
+                        <div>Sabrino Gardener</div>
+                        <div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
+                      </div>
+
+                      <p class="list-col-wrap text-xs">
+                        "Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song’s success propelled Sabrino into the spotlight, solidifying their status as a rising star.
+                      </p>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-6" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>
+                      <$ end $>
+
+                      <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(kind: "ghost", shape: "square") do $>
+                        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > List</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Kbd", daisy_ui_kbd_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Stat >", daisy_ui_stat_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1,208 @@
+<% component = UiComponents::DaisyUi::DataDisplay::StatComponent %>
+
+<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 > Stat</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< List", daisy_ui_list_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Status >", daisy_ui_status_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Stat" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |stat| $>
+                    <$= stat.with_item do |item| $>
+                      <$= item.with_title_content("Total Page Views") $>
+                      <$= item.with_value_content("89,400") $>
+                      <$= item.with_description_content("21% more than last month") $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Stat with icons or image" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |stat| $>
+                    <$= stat.with_item do |item| $>
+                      <$= item.with_figure(css_class: "text-primary") do $>
+                        <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="currentColor"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
+                      <$ end $>
+                      <$= item.with_title_content("Total Likes") $>
+                      <$= item.with_value(css_class: "text-primary").with_content("25.6K") $>
+                      <$= item.with_description_content("21% more than last month") $>
+                    <$ end $>
+
+                    <$= stat.with_item do |item| $>
+                      <$= item.with_figure(css_class: "text-secondary") do $>
+                        <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="currentColor"><path d="m422-232 207-248H469l29-227-185 267h139l-30 208ZM320-80l40-280H160l360-520h80l-40 320h240L400-80h-80Zm151-390Z"/></svg>
+                      <$ end $>
+                      <$= item.with_title_content("Page Views") $>
+                      <$= item.with_value(css_class: "text-secondary").with_content("2.6M") $>
+                      <$= item.with_description_content("21% more than last month") $>
+                    <$ end $>
+
+                    <$= stat.with_item do |item| $>
+                      <$= item.with_figure(css_class: "text-primary") do |figure| $>
+                        <$= figure.with_avatar do |avatar| $>
+                          <$= avatar.with_box(css_class: "w-16 rounded-full") do $>
+                            <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+                          <$ end $>
+                        <$ end $>
+                      <$ end $>
+                      <$= item.with_value_content("86%") $>
+                      <$= item.with_title_content("Tasks done") $>
+                      <$= item.with_description(css_class: "text-secondary").with_content("31 tasks remaining") $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Stat" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |stat| $>
+                    <$= stat.with_item do |item| $>
+                      <$= item.with_figure(css_class: "text-secondary") do $>
+                        <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="currentColor"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-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-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
+                      <$ end $>
+                      <$= item.with_title_content("Downloads") $>
+                      <$= item.with_value_content("31K") $>
+                      <$= item.with_description_content("Jan 1st - Feb 1st") $>
+                    <$ end $>
+
+                    <$= stat.with_item do |item| $>
+                      <$= item.with_figure(css_class: "text-secondary") do $>
+                        <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="currentColor"><path d="M200-160v-280h-80v-80h240v80h-80v280h-80Zm0-440v-200h80v200h-80Zm160 0v-80h80v-120h80v120h80v80H360Zm80 440v-360h80v360h-80Zm240 0v-120h-80v-80h240v80h-80v120h-80Zm0-280v-360h80v360h-80Z"/></svg>
+                      <$ end $>
+                      <$= item.with_title_content("New Users") $>
+                      <$= item.with_value_content("4,200") $>
+                      <$= item.with_description_content("↗︎ 400 (22%)") $>
+                    <$ end $>
+
+                    <$= stat.with_item do |item| $>
+                      <$= item.with_figure(css_class: "text-secondary") do $>
+                        <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" fill="currentColor"><path d="M200-80q-33 0-56.5-23.5T120-160v-451q-18-11-29-28.5T80-680v-120q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v120q0 23-11 40.5T840-611v451q0 33-23.5 56.5T760-80H200Zm0-520v440h560v-440H200Zm-40-80h640v-120H160v120Zm200 280h240v-80H360v80Zm120 20Z"/></svg>
+                      <$ end $>
+                      <$= item.with_title_content("New Registers") $>
+                      <$= item.with_value_content("1,200") $>
+                      <$= item.with_description_content("↘︎ 90 (14%)") $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Centered items" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |stat| $>
+                    <$= stat.with_item(css_class: "place-items-center") do |item| $>
+                      <$= item.with_title_content("Downloads") $>
+                      <$= item.with_value_content("31K") $>
+                      <$= item.with_description_content("From January 1st to February 1st") $>
+                    <$ end $>
+
+                    <$= stat.with_item(css_class: "place-items-center") do |item| $>
+                      <$= item.with_title_content("Users") $>
+                      <$= item.with_value(css_class: "text-secondary").with_content("4,200") $>
+                      <$= item.with_description(css_class: "text-secondary").with_content("↗︎ 40 (2%)") $>
+                    <$ end $>
+
+                    <$= stat.with_item(css_class: "place-items-center") do |item| $>
+                      <$= item.with_title_content("New Registers") $>
+                      <$= item.with_value_content("1,200") $>
+                      <$= item.with_description_content("↘︎ 90 (14%)") $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Vertical" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(vertical: true) do |stat| $>
+                    <$= stat.with_item do |item| $>
+                      <$= item.with_title_content("Downloads") $>
+                      <$= item.with_value_content("31K") $>
+                      <$= item.with_description_content("Jan 1st - Feb 1st") $>
+                    <$ end $>
+
+                    <$= stat.with_item do |item| $>
+                      <$= item.with_title_content("New Users") $>
+                      <$= item.with_value_content("4,200") $>
+                      <$= item.with_description_content("↗︎ 400 (22%)") $>
+                    <$ end $>
+
+                    <$= stat.with_item do |item| $>
+                      <$= item.with_title_content("New Registers") $>
+                      <$= item.with_value_content("1,200") $>
+                      <$= item.with_description_content("↘︎ 90 (14%)") $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# With custom colors and button" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |stat| $>
+                    <$= stat.with_item do |item| $>
+                      <$= item.with_title_content("Account balance") $>
+                      <$= item.with_value_content("$89,400") $>
+                      <$= item.with_action do $>
+                        <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(size: "xs", color: "success").with_content("Add funds") $>
+                      <$ end $>
+                    <$ end $>
+
+                    <$= stat.with_item do |item| $>
+                      <$= item.with_title_content("Current balance") $>
+                      <$= item.with_value_content("$89,400") $>
+                      <$= item.with_action do $>
+                        <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(size: "xs").with_content("Withdrawal") $>
+                        <$= render UiComponents::DaisyUi::Action::ButtonComponent.new(size: "xs").with_content("Deposit") $>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Stat</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< List", daisy_ui_list_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Status >", daisy_ui_status_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1,93 @@
+<% component = UiComponents::DaisyUi::DataDisplay::StatusComponent %>
+
+<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 > Status</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Stat", daisy_ui_stat_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Table >", daisy_ui_table_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Status" } %>
+    <%= doc.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <% sizes = %w[xs sm md lg xl] %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Status sizes" } %>
+    <%= doc.with_body do |body| %>
+      <% sizes.each do |value| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new(size: "#{value}") $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% colors = %w[neutral primary secondary accent info success warning error]  %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Status with colors" } %>
+    <%= doc.with_body do |body| %>
+      <% colors.each do |value| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new(color: "#{value}") $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Status with ping animation" } %>
+    <%= doc.with_body(preview_options: { css_class: "flex items-center gap-2" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <div class="inline-grid *:[grid-area:1/1]">
+                    <$= render #{component}.new(color: "error", animate: "ping") $>
+                    <$= render #{component}.new(color: "error") $>
+                  </div>
+                  Server is down
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Status with bounce animation" } %>
+    <%= doc.with_body(preview_options: { css_class: "flex items-center gap-2" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new(color: "info", animate: "bounce") $>
+                  Unread messages
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Status</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Stat", daisy_ui_stat_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Table >", daisy_ui_table_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+</div>