railsui 3.1.0

data/app/views/railsui/themes/hound/components/breadcrumb/_contained.html.erb

@@ -0,0 +1,86 @@
+<div id="breadcrumb-contained">
+  <%= render layout: example, locals: { heading: "Contained" } do %>
+
+    <%= render preview("gray") do %>
+      <nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 text-sm bg-white rounded items-center border-slate-300/80 border overflow-hidden sm:py-0 py-4 dark:bg-slate-800/70 dark:border-slate-700">
+        <ol class="flex items-center justify-star space-x-6 px-4 list-none">
+          <li class="sm:h-12 flex items-center justify-center">
+            <a href="#" class="hover:underline hover:text-slate-600 inline-block pl-2 group" data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent">
+              <%= icon "home", class:  "size-5 text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-200" %>
+              <span class="sr-only">Home</span>
+            </a>
+          </li>
+          <li class="sm:h-12 flex items-center space-x-2 justify-center">
+            <span class="transform rotate-[20deg] h-14 w-px bg-slate-300/50 dark:bg-slate-600/80 flex-shrink-0 sm:block hidden"></span>
+            <a href="#" class="hover:text-slate-700 sm:pl-4 dark:hover:text-slate-200 text-slate-600 dark:text-slate-300" data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent">Library</a>
+          </li>
+          <li class="sm:h-12 flex items-center space-x-2 justify-center">
+            <span class="transform rotate-[20deg] h-14 w-px bg-slate-300/50 dark:bg-slate-600/80 flex-shrink-0 sm:block hidden"></span>
+            <a href="#" aria-current="page" class="text-indigo-600 dark:text-indigo-400 sm:pl-4" data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent">Data</a>
+          </li>
+        </ol>
+      </nav>
+    <% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 text-sm bg-white rounded items-center border-slate-300/80 border overflow-hidden sm:py-0 py-4 dark:bg-slate-800/70 dark:border-slate-700">
+  <ol class="flex items-center justify-star space-x-6 px-4 list-none">
+    <li class="sm:h-12 flex items-center justify-center">
+      <a href="#" class="hover:underline hover:text-slate-600 inline-block pl-2 group">
+        <%%= icon "home", class:  "size-5 text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-200" %>
+        <span class="sr-only">Home</span>
+      </a>
+    </li>
+    <li class="sm:h-12 flex items-center space-x-2 justify-center">
+      <span class="transform rotate-[20deg] h-14 w-px bg-slate-300/50 dark:bg-slate-600/80 flex-shrink-0 sm:block hidden"></span>
+      <a href="#" class="hover:text-slate-700 sm:pl-4 dark:hover:text-slate-200 text-slate-600 dark:text-slate-300">Library</a>
+    </li>
+    <li class="sm:h-12 flex items-center space-x-2 justify-center">
+      <span class="transform rotate-[20deg] h-14 w-px bg-slate-300/50 dark:bg-slate-600/80 flex-shrink-0 sm:block hidden"></span>
+      <a href="#" aria-current="page" class="text-indigo-600 dark:text-indigo-400 sm:pl-4">Data</a>
+    </li>
+  </ol>
+</nav>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<nav aria-label="breadcrumb" class="my-6 font-medium flex text-slate-500 text-sm bg-white rounded items-center border-slate-300/80 border overflow-hidden sm:py-0 py-4 dark:bg-slate-800/70 dark:border-slate-700">
+  <ol class="flex items-center justify-star space-x-6 px-4 list-none">
+    <li class="sm:h-12 flex items-center justify-center">
+      <%%= link_to "#", class: "hover:underline hover:text-slate-600 inline-block pl-2 group" do %>
+        <%%= icon "home", class:  "size-5 text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-200" %>
+        <span class="sr-only">Home</span>
+        <%% end %>
+      </li>
+      <li class="sm:h-12 flex items-center space-x-2 justify-center">
+        <span class="transform rotate-[20deg] h-14 w-px bg-slate-300/50 dark:bg-slate-600/80 flex-shrink-0 sm:block hidden"></span>
+        <%%= link_to  "Library", "#", class: "hover:text-slate-700 sm:pl-4 dark:hover:text-slate-200 text-slate-600 dark:text-slate-300" %>
+      </li>
+      <li class="sm:h-12 flex items-center space-x-2 justify-center">
+        <span class="transform rotate-[20deg] h-14 w-px bg-slate-300/50 dark:bg-slate-600/80 flex-shrink-0 sm:block hidden"></span>
+        <a href="#" aria-current="page" class="text-indigo-600 dark:text-indigo-400 sm:pl-4">Data</a>
+      </li>
+    </ol>
+  </nav>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+  %nav.my-6.font-medium.flex.text-slate-500.text-sm.bg-white.rounded.items-center.border.overflow-hidden.sm:py-0.py-4.dark:border-slate-700(aria-label="breadcrumb" class="border-slate-300/80 dark:bg-slate-800/70")
+    %ol.flex.items-center.justify-star.space-x-6.px-4.list-none
+      %li.sm:h-12.flex.items-center.justify-center
+        = link_to "#", class: "hover:underline hover:text-slate-600 inline-block pl-2 group" do
+          = icon "home", class:  "size-5 text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-200"
+          %span.sr-only Home
+      %li.sm:h-12.flex.items-center.space-x-2.justify-center
+        %span.transform.h-14.w-px.flex-shrink-0.sm:block.hidden(class="rotate-[20deg] bg-slate-300/50 dark:bg-slate-600/80")
+        = link_to  "Library", "#", class: "hover:text-slate-700 sm:pl-4 dark:hover:text-slate-200 text-slate-600 dark:text-slate-300"
+      %li.sm:h-12.flex.items-center.space-x-2.justify-center
+        %span.transform.h-14.w-px.flex-shrink-0.sm:block.hidden(class="rotate-[20deg] bg-slate-300/50 dark:bg-slate-600/80")
+        %a.text-indigo-600.dark:text-indigo-400.sm:pl-4(aria-current="page" href="#") Data
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/components/button/_base.html.erb

@@ -0,0 +1,52 @@
+<div id="button-base">
+<%= render layout: example, locals: { heading: "Base", section: "Button" } do %>
+
+<%= render preview('gray') do %>
+  <div class="flex items-center gap-3 flex-wrap">
+  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-dark">Dark</button>
+  <button type="button" class="btn btn-light">Light</button>
+  <button type="button" class="btn btn-white">White</button>
+  <button type="button" class="btn btn-transparent">Transparent</button>
+  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-link">Link</button>
+  </div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-secondary">Secondary</button>
+<button type="button" class="btn btn-dark">Dark</button>
+<button type="button" class="btn btn-light">Light</button>
+<button type="button" class="btn btn-white">White</button>
+<button type="button" class="btn btn-transparent">Transparent</button>
+<button type="button" class="btn btn-danger">Danger</button>
+<button type="button" class="btn btn-link">Link</button>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= button_tag "Primary", type: "button", class: "btn btn-primary" %>
+<%%= button_tag "Secondary", type: "button", class: "btn btn-secondary" %>
+<%%= button_tag "Dark", type: "button", class: "btn btn-dark" %>
+<%%= button_tag "Light", type: "button", class: "btn btn-light" %>
+<%%= button_tag "Light", type: "button", class: "btn btn-white" %>
+<%%= button_tag "Danger", type: "button", class: "btn btn-danger" %>
+<%%= button_tag "Link", type: "button", class: "btn btn-link" %>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+= button_tag "Primary", type: "button", class: "btn btn-primary"
+= button_tag "Secondary", type: "button", class: "btn btn-secondary"
+= button_tag "Light", type: "button", class: "btn btn-light"
+= button_tag "Dark", type: "button", class: "btn btn-dark"
+= button_tag "White", type: "button", class: "btn btn-white"
+= button_tag "Transparent", type: "button", class: "btn btn-transparent"
+= button_tag "Danger", type: "button", class: "btn btn-danger"
+= button_tag "Link", type: "button", class: "btn btn-link"
+<% end %>
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/components/button/_expanded.html.erb

@@ -0,0 +1,27 @@
+<div id="button-expanded">
+<%= render layout: example, locals: { heading: "Expanded display", section: "Button" } do %>
+
+  <div class="prose prose-neutral dark:prose-invert mb-6">
+    <p>If you need a button to span fullwidth add the appropriate Tailwind CSS width and margin classes to existing button classes.</p>
+  </div>
+
+<%= render preview 'gray' do %>
+  <button class="btn btn-primary w-full justify-center" type="button">Expanded button</button>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<button class="btn btn-primary w-full justify-center" type="button">Expanded button</button>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= button_tag "Expanded button", type: "button", class: "btn btn-primary w-full justify-center" %>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+= button_tag "Expanded button", type: "button", class: "btn btn-primary w-full justify-center"
+<% end %>
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/components/button/_sizes.html.erb

@@ -0,0 +1,36 @@
+<div id="button-sizes">
+<%= render layout: example, locals: { heading: "Sizes", section: "Button" } do %>
+
+  <div class="prose prose-neutral dark:prose-invert mb-6"><p>Choose from two additional buttons sizes outside of the default <code>.btn</code> class (<code>.btn-lg</code>, <code>.btn-sm</code>) or customize size with additional Tailwind CSS classes.</p></div>
+
+<%= render preview 'gray' do %>
+  <div class="flex items-center gap-2">
+    <button type="button" class="btn btn-primary btn-lg">Large button</button>
+    <button type="button" class="btn btn-primary">Base button</button>
+    <button type="button" class="btn btn-primary btn-sm">Small button</button>
+  </div>
+<% end %>
+
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<button type="button" class="btn btn-primary btn-lg">Large button</button>
+<button type="button" class="btn btn-primary">Base button</button>
+<button type="button" class="btn btn-primary btn-sm">Small button</button>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= button_tag "Large button", type: "button", class: "btn btn-primary btn-lg" %>
+<%%= button_tag "Base Button", type: "button", class: "btn btn-primary" %>
+<%%= button_tag "Small button", type: "button", class: "btn btn-primary btn-sm" %>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+= button_tag "Large button", type: "button", class: "btn btn-primary btn-lg"
+= button_tag "Base Button", type: "button", class: "btn btn-primary"
+= button_tag "Small button", type: "button", class: "btn btn-primary btn-sm"
+<% end %>
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/components/card/_base.html.erb

@@ -0,0 +1,36 @@
+<div id="card-base">
+<%= render layout: example, locals: { heading: "Base", section: "Card" } do %>
+
+<%= render preview 'gray' do %>
+<div class="flex justify-center items-center">
+  <div class="rounded-lg bg-white p-6 dark:bg-slate-800 dark:text-white border border-slate-300/70 dark:border-slate-600/70 md:w-[350px]">
+    <h3 class="text-xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">Create a message</h3>
+    <p class="prose prose-slate dark:prose-invert mt-2 mb-4">Send a message to your teammates.</p>
+    <button class="btn btn-primary">Start writing</button>
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="rounded-md bg-white p-6 dark:bg-slate-800 dark:text-white border border-slate-300/70 dark:border-slate-600/70 md:w-[350px]">
+  <h3 class="text-xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">Create a message</h3>
+  <p class="prose prose-slate dark:prose-invert mt-2 mb-4">Send a message to your teammates.</p>
+  <button class="btn btn-primary">Start writing</button>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+.rounded-md.bg-white.p-6.dark:bg-slate-800.dark:text-white.border(class="border-slate-300/70 dark:border-slate-600/70 md:w-[350px]")
+  %h3.text-xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight Create a message
+  %p.prose.prose-slate.dark:prose-invert.mt-2.mb-4 Send a message to your teammates.
+  %button.btn.btn-primary Start writing
+<% end %>
+<%= render_snippet(active_tab: :erb) %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/components/card/_user_card.html.erb

@@ -0,0 +1,62 @@
+<div id="card-user-card">
+<%= render layout: example, locals: { heading: "User card", section: "Card" } do %>
+
+  <div class="rounded-md bg-white p-6 dark:bg-slate-800 dark:text-white border border-slate-300/70 dark:border-slate-600/70 py-4 px-6 flex items-center space-x-4 w-auto dark:shadow-slate-900/50">
+  <%= image_tag demo_avatar_url(id: rand(1..10).to_s, variant: [:men, :women].sample), class: "object-cover size-14 rounded-full flex-shrink-0" %>
+  <div class="flex-1 flex flex-col items-start space-y-px text-slate-900">
+    <p class="font-bold dark:text-white mb-1">John Doe</p>
+      <div class="flex flex-wrap items-center md:gap-4 gap-0">
+        <div class="flex items-center gap-2 pb-0.5">
+          <%= icon "envelope", class: "size-4 text-slate-500 dark:text-primary-400" %>
+          <p class="text-sm dark:text-slate-300">john.doe@example.com</p>
+        </div>
+        <div class="flex items-center gap-2">
+          <%= icon "phone", class: "size-4 text-slate-500 dark:text-primary-400" %>
+          <p class="text-sm dark:text-slate-300">+1-555-555-5555</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+ <div class="rounded-md bg-white p-6 dark:bg-slate-800 dark:text-white border border-slate-300/70 dark:border-slate-600/70 py-4 px-6 flex items-center space-x-4 w-auto dark:shadow-slate-900/50">
+  <%%= image_tag demo_avatar_url(id: rand(1..10).to_s, variant: [:men, :women].sample), class: "object-cover size-14 rounded-full flex-shrink-0" %>
+  <div class="flex-1 flex flex-col items-start space-y-px text-slate-900">
+    <p class="font-bold dark:text-white mb-1">John Doe</p>
+      <div class="flex flex-wrap items-center md:gap-4 gap-0">
+        <div class="flex items-center gap-2 pb-0.5">
+          <%%= icon "envelope", class: "size-4 text-slate-500 dark:text-primary-400" %>
+          <p class="text-sm dark:text-slate-300">john.doe@example.com</p>
+        </div>
+        <div class="flex items-center gap-2">
+          <%%= icon "phone", class: "size-4 text-slate-500 dark:text-primary-400" %>
+          <p class="text-sm dark:text-slate-300">+1-555-555-5555</p>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+.rounded-md.bg-white.p-6.dark:bg-slate-800.dark:text-white.border.py-4.px-6.flex.items-center.space-x-4.w-auto(class="border-slate-300/70 dark:border-slate-600/70 dark:shadow-slate-900/50")
+  = image_tag demo_avatar_url(id: rand(1..10).to_s, variant: [:men, :women].sample), class: "object-cover size-14 rounded-full flex-shrink-0"
+  .flex-1.flex.flex-col.items-start.space-y-px.text-slate-900
+    %p.font-bold.dark:text-white.mb-1 John Doe
+    .flex.flex-wrap.items-center.md:gap-4.gap-0
+      .flex.items-center.gap-2(class="pb-0.5")
+        = icon "envelope", class: "size-4 text-slate-500 dark:text-primary-400"
+        %p.text-sm.dark:text-slate-300 john.doe@example.com
+      .flex.items-center.gap-2
+        = icon "phone", class: "size-4 text-slate-500 dark:text-primary-400"
+        %p.text-sm.dark:text-slate-300 +1-555-555-5555
+<% end %>
+
+<%= render_snippet(active_tab: :erb) %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/components/card/_user_card_dropdown.html.erb

@@ -0,0 +1,134 @@
+<div id="card-user-card-with-dropdown">
+<%= render layout: example, locals: { heading: "User card with dropdown", section: "Card" } do %>
+<div class="rounded-md bg-white p-6 dark:bg-slate-800 dark:text-white border border-slate-300/70 dark:border-slate-600/70 dark:shadow-slate-900/50">
+<div class="flex flex-wrap items-center gap-4">
+  <%= image_tag demo_avatar_url(id: rand(1..100).to_s, variant: :men), class: "object-cover size-14 rounded-full flex-shrink-0" %>
+<div class="flex-1 flex flex-col items-start space-y-px text-slate-900 dark:text-white">
+  <p class="font-bold">Jared Doe</p>
+  <p class="dark:text-slate-400 text-sm"><%= Time.zone.now.strftime("%B %e at  %l:%M %p") %></p>
+</div>
+<div data-controller="railsui-dropdown" class="relative">
+  <button type="button" data-action="railsui-dropdown#toggle click@window->railsui-dropdown#hide" class="relative group border-transparent border transition ease-in-out focus:ring-4 w-8 h-8 flex items-center justify-center rounded-lg hover:border-slate-200 focus:ring-slate-50 hover:bg-white hover:shadow-sm focus:border-slate-200 dark:focus:border-slate-700 dark:hover:bg-slate-700/80 dark:hover:border-slate-700 dark:focus:ring-slate-400/50">
+    <%= icon "ellipsis-vertical", class:  "size-6 text-slate-500 group-hover:text-primary-500 dark:text-slate-200 dark:group-hover:text-primary-300" %>
+  </button>
+  <ul
+  class="hidden transition transform origin-to-right absolute right-0 top-9 bg-white rounded-lg shadow-xl shadow-slate-900/10 border border-slate-200 min-w-[200px] z-50 py-2 dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 text-sm font-medium text-slate-600 dark:text-slate-200"
+  data-railsui-dropdown-target="menu"
+  data-transition-enter-from="opacity-0 scale-95"
+  data-transition-enter-to="opacity-100 scale-100"
+  data-transition-leave-from="opacity-100 scale-100"
+  data-transition-leave-to="opacity-0 scale-95"
+  >
+    <li>
+      <a href="#" class="px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300">Follow</a>
+    </li>
+    <li>
+      <a href="#" class="px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300">Save for later</a>
+    </li>
+    <li>
+      <a href="#" class="px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300">Mute</a>
+    </li>
+  </ul>
+</div>
+</div>
+<div class="prose dark:prose-invert mt-4">
+<p>Just wanted to share my thoughts on the new product launch. The attention to detail and user experience is fantastic. The interface is intuitive and the performance improvements are noticeable. Great work by the entire team on this milestone achievement!</p>
+</div>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="rounded-md bg-white p-6 dark:bg-slate-800 dark:text-white border border-slate-300/70 dark:border-slate-600/70 dark:shadow-slate-900/50">
+  <div class="flex flex-wrap items-center gap-4">
+    <%= image_tag demo_avatar_url(id: "49"), class: "object-cover size-14 rounded-full flex-shrink-0" %>
+    <div class="flex-1 flex flex-col items-start space-y-px text-slate-900 dark:text-white">
+      <p class="font-bold">Jared Doe</p>
+      <p class="dark:text-slate-400 text-sm"><%%= Time.zone.now.strftime("%B %e at  %l:%M %p") %></p>
+    </div>
+    <div data-controller="dropdown" class="relative">
+      <button type="button" data-action="railsui-dropdown#toggle click@window->railsui-dropdown#hide" class="relative group border-transparent border transition ease-in-out focus:ring-4 w-8 h-8 flex items-center justify-center rounded-lg hover:border-slate-200 focus:ring-slate-50 hover:bg-white hover:shadow-sm focus:border-slate-200 dark:focus:border-slate-700 dark:hover:bg-slate-700/80 dark:hover:border-slate-700 dark:focus:ring-slate-400/50">
+        <%%= icon "ellipsis-vertical", class:  "size-6 text-slate-500 group-hover:text-primary-500 dark:text-slate-200 dark:group-hover:text-primary-300" %>
+      </button>
+      <ul class="hidden transition transform origin-to-right absolute right-0 top-9 bg-white rounded-lg shadow-xl shadow-slate-900/10 border border-slate-200 min-w-[200px] z-50 py-2 dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 text-sm font-medium text-slate-600 dark:text-slate-200"
+  data-railsui-dropdown-target="menu"
+  data-transition-enter-from="opacity-0 scale-95"
+  data-transition-enter-to="opacity-100 scale-100"
+  data-transition-leave-from="opacity-100 scale-100"
+  data-transition-leave-to="opacity-0 scale-95">
+        <li>
+          <%%= link_to "Follow", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300" %>
+        </li>
+        <li>
+          <%%= link_to "Save for later", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300" %>
+        </li>
+        <li>
+          <%%= link_to "Mute", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300" %>
+        </li>
+      </ul>
+    </div>
+    <div class="prose dark:prose-invert mt-4">
+      <p>Just wanted to share my thoughts on the new product launch. The attention to detail and user experience is fantastic. The interface is intuitive and the performance improvements are noticeable. Great work by the entire team on this milestone achievement!</p>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+.rounded-md.bg-white.p-6.dark:bg-slate-800.dark:text-white.border(class="border-slate-300/70 dark:border-slate-600/70 dark:shadow-slate-900/50")
+  .flex.flex-wrap.items-center.gap-4
+    %img.object-cover.size-14.rounded-full.flex-shrink-0(src="https://randomuser.me/api/portraits/men/49.jpg")/
+    .flex-1.flex.flex-col.items-start.space-y-px.text-slate-900.dark:text-white
+      %p.font-bold Jared Doe
+      %p.dark:text-slate-400.text-sm= Time.zone.now.strftime("%B %e at  %l:%M %p")
+      .relative(data-controller="dropdown")
+        %button.relative.group.border-transparent.border.transition.ease-in-out.focus:ring-4.w-8.h-8.flex.items-center.justify-center.rounded-lg.hover:border-slate-200.focus:ring-slate-50.hover:bg-white.hover:shadow-sm.focus:border-slate-200.dark:focus:border-slate-700.dark:hover:border-slate-700(class="dark:hover:bg-slate-700/80 dark:focus:ring-slate-400/50" data-action="dropdown#toggle click@window->dropdown#hide" type="button")
+          = icon "ellipsis-vertical", class:  "size-6 text-slate-500 group-hover:text-primary-500 dark:text-slate-200 dark:group-hover:text-primary-300"
+        %ul.hidden.transition.transform.origin-to-right.absolute.right-0.top-9.bg-white.rounded-lg.shadow-xl.border.border-slate-200.z-50.py-2.dark:bg-slate-700.text-sm.font-medium.text-slate-600.dark:text-slate-200(class="shadow-slate-900/10 min-w-[200px] dark:shadow-slate-900/50 dark:border-slate-500/60" data-dropdown-target="menu" data-transition-enter-from="opacity-0 scale-95" data-transition-enter-to="opacity-100 scale-100" data-transition-leave-from="opacity-100 scale-100" data-transition-leave-to="opacity-0 scale-95")
+          %li
+            = link_to "Follow", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300"
+          %li
+            = link_to "Save for later", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300"
+          %li
+            = link_to "Mute", "#", class: "px-4 py-[.4rem] hover:text-primary-600 block dark:hover:text-primary-300"
+      .prose.dark:prose-invert.mt-4
+        %p Just wanted to share my thoughts on the new product launch. The attention to detail and user experience is fantastic. The interface is intuitive and the performance improvements are noticeable. Great work by the entire team on this milestone achievement!
+<% end %>
+
+<% content_for :js, flush: true do %>
+// app/javascript/controllers/dropdown_controller.js
+
+import { Controller } from '@hotwired/stimulus'
+import { useTransition } from 'stimulus-use'
+
+export default class extends Controller {
+  static targets = ['menu', 'trigger']
+
+  connect() {
+    useTransition(this, {
+      element: this.menuTarget,
+    })
+  }
+
+  toggle() {
+    this.toggleTransition()
+  }
+
+  hide(event) {
+    if (
+      !this.element.contains(event.target) &&
+      !this.menuTarget.classList.contains('hidden')
+    ) {
+      this.leave()
+    }
+  }
+}
+<% end %>
+
+<%= render_snippet js_filename: "dropdown_controller.js", active_tab: :erb %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/components/card/_user_card_with_actions.html.erb

@@ -0,0 +1,74 @@
+<div id="card-user-card-with-actions">
+<%= render layout: example, locals: { heading: "User card with actions", section: "Card" } do %>
+
+<div class="py-4 px-6 flex flex-wrap items-center w-auto dark:shadow-slate-900/50 rounded-md bg-white p-6 dark:bg-slate-800 dark:text-white border border-slate-300/70 dark:border-slate-600/70 gap-4" data-controller="railsui-prevent">
+<%= image_tag demo_avatar_url(id: rand(1..100).to_s, variant: :women), class: "object-cover size-14 rounded-full flex-shrink-0" %>
+  <div class="flex-1 flex flex-col items-start space-y-px text-slate-900">
+    <p class="font-bold dark:text-white">Jane Doe</p>
+    <p class="text-sm dark:text-slate-300">Software Architect at <a href="#" class="btn-link" data-action="click->railsui-prevent#prevent">Amazon</a></p>
+  </div>
+  <div class="grid gap-3 grid-cols-2 lg:pt-0 pt-3 w-full lg:w-auto">
+    <a data-action="click->railsui-prevent#prevent" href="#" class="btn btn-white flex items-center gap-2">
+      <%= icon "phone", class: "size-4 text-slate-500 dark:text-slate-400 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+      <span>Phone</span>
+    </a>
+    <a data-action="click->railsui-prevent#prevent" href="#" class="btn btn-white flex items-center gap-2">
+      <%= icon "envelope", class: "size-4 text-slate-500 dark:text-slate-400 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+      <span>Email</span>
+    </a>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+
+<% content_for :erb, flush: true do %>
+<div class="py-4 px-6 flex flex-wrap items-center w-auto dark:shadow-slate-900/50 rounded-md bg-white p-6 dark:bg-slate-800 dark:text-white border border-slate-300/70 dark:border-slate-600/70 gap-4">
+<%= image_tag demo_avatar_url(id: "32", variant: :women), class: "object-cover size-14 rounded-full flex-shrink-0" %>
+  <div class="flex-1 flex flex-col items-start space-y-px text-slate-900">
+    <p class="font-bold dark:text-white">Jane Doe</p>
+    <p class="text-sm dark:text-slate-300">Software Architect at <%= link_to "Amazon", "#", class: "btn-link" %></p>
+  </div>
+  <div class="grid gap-3 grid-cols-2 lg:pt-0 pt-3 w-full lg:w-auto">
+    <%%= link_to "#", class: "btn btn-white flex items-center gap-2 group" do %>
+      <%%= icon "phone", class: "size-4 text-slate-500 dark:text-slate-400 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+      <span>Phone</span>
+    <%% end %>
+
+    <!-- * The mail_to helper doesn't play too nicely with blocks so we have to rig it up a bit -->
+    <%% mail_content = capture do %>
+      <%%= icon "envelope", class: "size-4 text-slate-500 dark:text-slate-400 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+      <span>Email</span>
+    <%% end %>
+
+    <%%= mail_to "railsui@example.com", mail_content, class: "btn btn-white flex items-center gap-2 group" %>
+  </div>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+.py-4.px-6.flex.flex-wrap.items-center.w-auto.rounded-md.bg-white.p-6.dark:bg-slate-800.dark:text-white.border.gap-4(class="dark:shadow-slate-900/50 border-slate-300/70 dark:border-slate-600/70")
+  %img.object-cover.size-14.rounded-full.flex-shrink-0(src="https://randomuser.me/api/portraits/women/32.jpg")/
+  .flex-1.flex.flex-col.items-start.space-y-px.text-slate-900
+    %p.font-bold.dark:text-white Jane Doe
+    %p.text-sm.dark:text-slate-300
+      Software Architect at
+      %a.btn-link(href="#") Amazon
+  .grid.gap-3.grid-cols-2.lg:pt-0.pt-3.w-full.lg:w-auto
+    = link_to "#", class: "btn btn-white flex items-center gap-2 group" do
+      = icon "phone", class: "size-4 text-slate-500 dark:text-slate-400 group-hover:text-primary-600 dark:group-hover:text-primary-400"
+      %span Phone
+    / * The mail_to helper doesn't play too nicely with blocks so we have to rig it up a bit
+    - mail_content = capture do
+      = icon "envelope", class: "size-4 text-slate-500 dark:text-slate-400 group-hover:text-primary-600 dark:group-hover:text-primary-400"
+      %span Email
+    = mail_to "railsui@example.com", mail_content, class: "btn btn-white flex items-center gap-2 group"
+<% end %>
+
+<%= render_snippet(active_tab: :erb) %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/components/card/_with_action.html.erb

@@ -0,0 +1,62 @@
+<div id="card-with-action">
+<%= render layout: example, locals: { heading: "With action", section: "Card" } do %>
+
+<div class="rounded-md bg-white p-6 dark:bg-slate-800 dark:text-white border border-slate-300/70 dark:border-slate-600/70">
+  <div class="-mx-6 border-b border-slate-200 dark:border-slate-700 px-6 pb-4 mb-4 flex items-center justify-between flex-wrap">
+    <h1 class="text-2xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">Posts</h1>
+    <a href="#" class="btn btn-primary">New post</a>
+    </div>
+  <ul class="divide-y divide-slate-300/70 dark:divide-slate-600/70 last-child:pb-0 pointer-events-none select-none">
+    <li class="py-3 -mx-6 px-6">
+      <a href="#" class="btn-link">Post title 1</a>
+      <p class="text-slate-700 dark:text-slate-400">Lorem ipsum dolor sit amet consectetur...</p>
+    </li>
+    <li class="pt-3 -mx-6 px-6">
+      <a href="#" class="btn-link">Post title 2</a>
+      <p class="text-slate-700 dark:text-slate-400">Lorem ipsum dolor sit amet consectetur...</p>
+    </li>
+  </ul>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="rounded-md bg-white p-6 dark:bg-slate-800 dark:text-white border border-slate-300/70 dark:border-slate-600/70">
+  <div class="-mx-6 border-b border-slate-200 dark:border-slate-700 px-6 pb-4 mb-4 flex items-center justify-between flex-wrap">
+    <h1 class="text-2xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">Posts</h1>
+    <%%= link_to "New post", "#", class: "btn btn-primary" %>
+  </div>
+  <ul class="divide-slate-300/70 dark:divide-slate-600/70 last-child:pb-0 pointer-events-none select-none">
+    <li class="py-3 -mx-6 px-6">
+      <%%= link_to "Post title 1", "#", class: "btn-link" %>
+      <p class="text-slate-700 dark:text-slate-400">Lorem ipsum dolor sit amet consectetur...</p>
+    </li>
+    <li class="pt-3 -mx-6 px-6">
+      <%%= link_to "Post title 2", "#", class: "btn-link" %>
+      <p class="text-slate-700 dark:text-slate-400">Lorem ipsum dolor sit amet consectetur...</p>
+    </li>
+  </ul>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+.rounded-md.bg-white.p-6.dark:bg-slate-800.dark:text-white.border(class="border-slate-300/70 dark:border-slate-600/70")
+  .-mx-6.border-b.border-slate-200.dark:border-slate-700.px-6.pb-4.mb-4.flex.items-center.justify-between.flex-wrap
+    %h1.text-2xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight Posts
+    = link_to "New post", "#", class: "btn btn-primary"
+  %ul.last-child:pb-0.pointer-events-none.select-none(class="divide-slate-300/70 dark:divide-slate-600/70")
+    %li.py-3.-mx-6.px-6
+      = link_to "Post title 1", "#", class: "btn-link"
+      %p.text-slate-700.dark:text-slate-400 Lorem ipsum dolor sit amet consectetur...
+    %li.pt-3.-mx-6.px-6
+      = link_to "Post title 2", "#", class: "btn-link"
+      %p.text-slate-700.dark:text-slate-400 Lorem ipsum dolor sit amet consectetur...
+<% end %>
+
+<%= render_snippet(active_tab: :erb) %>
+<% end %>
+<% end %>
+</div>