railsui 3.1.0

data/app/views/railsui/themes/hound/components/tab/_rounded.html.erb

@@ -0,0 +1,121 @@
+<div id="tab-rounded">
+<%= render layout: example, locals: { heading: "Rounded", section: "Tab" } do %>
+
+<%= render preview 'gray' do %>
+<div
+  data-controller="railsui-tabs"
+  data-railsui-tabs-active-tab="py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white"
+  data-railsui-tabs-inactive-tab="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300">
+  <div>
+    <nav role="navigation" class="flex items-center text-gray-600 space-x-1 font-medium text-sm">
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white">Activity</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300">Account</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300">Billing</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300">Team</a>
+    </nav>
+  </div>
+   <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div
+  data-controller="railsui-tabs"
+  data-railsui-tabs-active-tab="py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white"
+  data-railsui-tabs-inactive-tab="py-2 px-4 rounded-md inline-block dark:bg-slate-900 dark:text-slate-300">
+  <div>
+    <nav role="navigation" class="flex items-center text-gray-600 space-x-1 font-medium text-sm">
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white">Activity</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300">Account</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300">Billing</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300">Team</a>
+    </nav>
+  </div>
+   <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div
+  data-controller="railsui-tabs"
+  data-railsui-tabs-active-tab="py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white"
+  data-railsui-tabs-inactive-tab="py-2 px-4 rounded-md inline-block dark:bg-slate-900 dark:text-slate-300">
+  <div>
+    <nav role="navigation" class="flex items-center text-gray-600 space-x-1 font-medium text-sm">
+      <%%= link_to "Activity", "#", class: "py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
+      <%%= link_to "Account", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
+      <%%= link_to "Billing", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
+      <%%= link_to "Team", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
+    </nav>
+  </div>
+   <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+%div{"data-controller" => "railsui-tabs", "data-railsui-tabs-active-tab" => "py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white", "data-railsui-tabs-inactive-tab" => "py-2 px-4 rounded-md inline-block dark:bg-slate-900 dark:text-slate-300"}
+  %div
+    %nav.flex.items-center.text-gray-600.space-x-1.font-medium.text-sm{role: "navigation"}
+      = link_to "Activity", "#", class: "py-2 px-4 bg-primary-50 inline-block rounded-md text-primary-600 dark:bg-primary-600 dark:text-white", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
+      = link_to "Account", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
+      = link_to "Billing", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
+      = link_to "Team", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-slate-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
+  .p-4{"data-railsui-tabs-target" => "panel"}
+    Some activities...
+  .hidden.p-4{"data-railsui-tabs-target" => "panel"}
+    Account information...
+  .hidden.p-4{"data-railsui-tabs-target" => "panel"}
+    Billing information...
+  .hidden.p-4{"data-railsui-tabs-target" => "panel"}
+    Team information...
+<% end %>
+
+<% content_for :js, flush: true do %>
+import { RailsuiTabs } from 'railsui-stimulus'
+application.register('railsui-tabs', RailsuiTabs)
+<% end %>
+
+<%= render_snippet html_filename: "tabs.html", erb_filename: "_tabs.html.erb", haml_filename: "_tabs.html.haml", js_filename: "index.js" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/components/tab/_with_icons.html.erb

@@ -0,0 +1,163 @@
+<div id="tab-with-icons">
+  <%= render layout: example, locals: { heading: "With icons", section: "Tab" } do %>
+
+    <%= render preview 'gray' do %>
+<div data-controller="railsui-tabs" data-railsui-tabs-active-tab="py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t" data-railsui-tabs-inactive-tab="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b border-transparent dark:border-slate-600">
+  <div class="border-slate-200 border-b text-slate-600 dark:text-slate-200 dark:border-slate-600 text-sm font-medium">
+    <nav role="navigation" class="-mb-px flex items-center flex-wrap">
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change"
+        class="py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t">
+        <%= icon "chat-bubble-oval-left-ellipsis", class:  "size-5" %>
+        <span>Activity</span>
+      </a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600">
+        <%= icon "user-circle", class:  "size-5" %>
+        <span>Account</span>
+      </a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600">
+        <%= icon "credit-card", class:  "size-5" %>
+        <span>Billing</span>
+      </a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600">
+        <%= icon "users", class:  "size-5" %>
+        <span>Team</span>
+      </a>
+    </nav>
+  </div>
+  <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-tabs" data-railsui-tabs-active-tab="py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t" data-railsui-tabs-inactive-tab="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b border-transparent dark:border-slate-600">
+  <div class="border-slate-200 border-b text-slate-600 dark:text-slate-200 dark:border-slate-600 text-sm font-medium">
+    <nav role="navigation" class="-mb-px flex items-center flex-wrap">
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change"
+        class="py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t">
+        <%%= icon "chat-bubble-oval-left-ellipsis", class: "size-5" %>
+        <span>Activity</span>
+      </a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600">
+        <%%= icon "user-circle", class: "size-5" %>
+        <span>Account</span>
+      </a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600">
+        <%%= icon "credit-card", class:  "size-5" %>
+        <span>Billing</span>
+      </a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600">
+        <%%= icon "users", class: "size-5" %>
+        <span>Team</span>
+      </a>
+    </nav>
+  </div>
+  <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div data-controller="railsui-tabs" data-railsui-tabs-active-tab="py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t" data-railsui-tabs-inactive-tab="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b border-transparent dark:border-slate-600">
+  <div class="border-slate-200 border-b text-slate-600 dark:text-slate-200 dark:border-slate-600 text-sm font-medium">
+    <nav role="navigation" class="-mb-px flex items-center flex-wrap">
+      <%%= link_to "#", class: "py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do %>
+        <%%= icon "chat-bubble-oval-left-ellipsis", class: "size-5" %>
+        <span>Activity</span>
+      <%% end %>
+
+      <%%= link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap   border-b bg-transparent dark:bg-transparent dark:border-slate-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do %>
+        <%%= icon "user-circle", class: "size-5" %>
+        <span>Account</span>
+      <%% end %>
+
+      <%%= link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do %>
+        <%%= icon "credit-card", class: "size-5" %>
+        <span>Billing</span>
+      <%% end %>
+
+      <%%= link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do %>
+        <%%= icon "users", class: "size-5" %>
+        <span>Team</span>
+      <%% end %>
+    </nav>
+  </div>
+
+  <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+%div{"data-controller" => "railsui-tabs", "data-railsui-tabs-active-tab" => "py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t", "data-railsui-tabs-inactive-tab" => "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b border-transparent dark:border-slate-600"}
+  .border-slate-200.border-b.text-slate-600.dark:text-slate-200.dark:border-slate-600.text-sm.font-medium
+    %nav.-mb-px.flex.items-center.flex-wrap{role: "navigation"}
+      = link_to "#", class: "py-3 px-4 border-b border-primary-500 flex items-center space-x-3 whitespace-nowrap text-primary-600 dark:text-primary-400 dark:border-primary-400 rounded-t", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do
+        = icon "chat-bubble-oval-left-ellipsis", class: "size-5"
+        %span Activity
+      = link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap   border-b bg-transparent dark:bg-transparent dark:border-slate-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do
+        = icon "user-circle", class: "size-5"
+        %span Account
+      = link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do
+        = icon "credit-card", class: "size-5"
+        %span Billing
+      = link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-slate-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do
+        = icon "users", class: "size-5"
+        %span Team
+  .p-4{"data-railsui-tabs-target" => "panel"}
+    Some activities...
+  .hidden.p-4{"data-railsui-tabs-target" => "panel"}
+    Account information...
+  .hidden.p-4{"data-railsui-tabs-target" => "panel"}
+    Billing information...
+  .hidden.p-4{"data-railsui-tabs-target" => "panel"}
+    Team information...
+<% end %>
+
+<% content_for :js, flush: true do %>
+import { RailsuiTabs } from 'railsui-stimulus'
+application.register('railsui-tabs', RailsuiTabs)
+<% end %>
+
+<%= render_snippet html_filename: "tabs.html", erb_filename: "_tabs.html.erb", haml_filename: "_tabs.html.haml", js_filename: "index.js" %>
+<% end %>
+<% end %>
+</div>

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

@@ -0,0 +1,114 @@
+<div id="toast-simple">
+<%= render layout: example, locals: { heading: "Simple", section: "Toast" } do %>
+
+<div class="relative bg-slate-100 border-slate-200 border rounded-lg p-10 w-full min-h-[280px] dark:bg-slate-900 dark:border-slate-700 overflow-hidden">
+  <div aria-live="assertive" class="pointer-events-none absolute flex items-center justify-end px-4 py-6 sm:p-6 top-0 right-0 left-0 w-full animate-toast-from-right" data-controller="toast">
+    <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/10 dark:bg-slate-950 dark:border dark:border-slate-700/80">
+      <div class="p-4">
+        <div class="flex items-start">
+          <div class="shrink-0">
+            <%= icon "hand-thumb-up", class: "size-6 text-blue-500 dark:text-blue-400" %>
+          </div>
+          <div class="ml-3 w-0 flex-1 pt-0.5">
+            <p class="text-sm font-medium text-slate-900 dark:text-white">Successfully liked!</p>
+            <p class="mt-1 text-sm text-slate-500 dark:text-slate-300">John Doe has been notified.</p>
+          </div>
+          <div class="ml-4 flex shrink-0">
+            <button type="button" class="inline-flex rounded-sm bg-white text-slate-400 hover:text-slate-500 focus:outline-hidden focus:ring-2 focus:ring-slate-50 dark:bg-transparent dark:focus:ring-slate-500 dark:hover:text-slate-100
+            dark:focus:text-slate-100" data-action="click->toast#hide">
+              <span class="sr-only">Close</span>
+              <%= icon "x-mark", class: "size-5 pointer-events-none" %>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true  do %>
+<div class="relative overflow-hidden">
+  <div aria-live="assertive" class="pointer-events-none absolute flex items-center justify-end px-4 py-6 sm:p-6 top-0 right-0 left-0 w-full animate-toast-from-right" data-controller="railsui-toast">
+    <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/10  dark:bg-slate-950 dark:border dark:border-slate-700/80">
+      <div class="p-4">
+        <div class="flex items-start">
+          <div class="shrink-0">
+            <%%= icon "hand-thumb-up", class: "size-6 text-blue-500 dark:text-blue-400" %>
+          </div>
+          <div class="ml-3 w-0 flex-1 pt-0.5">
+            <p class="text-sm font-medium text-slate-900 dark:text-white">Successfully liked!</p>
+            <p class="mt-1 text-sm text-slate-500 dark:text-slate-300">John Doe has been notified.</p>
+          </div>
+          <div class="ml-4 flex shrink-0">
+            <button type="button" class="inline-flex rounded-sm bg-white text-slate-400 hover:text-slate-500 focus:outline-hidden focus:ring-2 focus:ring-slate-50 dark:bg-transparent dark:focus:ring-slate-500 dark:hover:text-slate-100
+            dark:focus:text-slate-100" data-action="click->railsui-toast#hide">
+              <span class="sr-only">Close</span>
+              <%%= icon "x-mark", class: "size-5" %>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="relative overflow-hidden">
+  <div aria-live="assertive" class="pointer-events-none absolute flex items-center justify-end px-4 py-6 sm:p-6 top-0 right-0 left-0 w-full animate-toast-from-right" data-controller="railsui-toast">
+    <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/10  dark:bg-slate-950 dark:border dark:border-slate-700/80">
+      <div class="p-4">
+        <div class="flex items-start">
+          <div class="shrink-0">
+            <%%= icon "hand-thumb-up", class: "size-6 text-blue-500 dark:text-blue-400" %>
+          </div>
+          <div class="ml-3 w-0 flex-1 pt-0.5">
+            <p class="text-sm font-medium text-slate-900 dark:text-white">Successfully liked!</p>
+            <p class="mt-1 text-sm text-slate-500 dark:text-slate-300">John Doe has been notified.</p>
+          </div>
+          <div class="ml-4 flex shrink-0">
+            <button type="button" class="inline-flex rounded-sm bg-white text-slate-400 hover:text-slate-500 focus:outline-hidden focus:ring-2 focus:ring-slate-50 dark:bg-transparent dark:focus:ring-slate-500 dark:hover:text-slate-100
+            dark:focus:text-slate-100" data-action="click->railsui-toast#hide">
+              <span class="sr-only">Close</span>
+              <%%= icon "x-mark", class: "size-5" %>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+.relative.overflow-hidden
+  .pointer-events-none.absolute.flex.items-center.justify-end.px-4.py-6.sm:p-6.top-0.right-0.left-0.w-full.animate-toast-from-right(aria-live="assertive" data-controller="railsui-toast")
+    .pointer-events-auto.w-full.max-w-sm.overflow-hidden.rounded-md.bg-white.shadow-lg.ring-1.ring-black.dark:bg-slate-950.dark:border(class="dark:border-slate-700/80 ring-black/10")
+      .p-4
+        .flex.items-start
+          .shrink-0
+            = icon "hand-thumb-up", class: "size-6 text-blue-500 dark:text-blue-400"
+          .ml-3.w-0.flex-1(class="pt-0.5")
+            %p.text-sm.font-medium.text-slate-900.dark:text-white Successfully liked!
+            %p.mt-1.text-sm.text-slate-500.dark:text-slate-300 John Doe has been notified.
+          .ml-4.flex.shrink-0
+            %button.inline-flex.rounded-sm.bg-white.text-slate-400.hover:text-slate-500.focus:outline-hidden.focus:ring-2.focus:ring-slate-50.dark:bg-transparent.dark:focus:ring-slate-500.dark:hover:text-slate-100.dark:focus:text-slate-100(data-action="click->railsui-toast#hide" type="button")
+              %span.sr-only Close
+              = icon "x-mark", class: "size-5"
+<% end %>
+
+<% content_for :css, flush: true do %>
+
+<% end %>
+
+<% content_for :js, flush: true do %>
+import { RailsuiToast } from 'railsui-stimulus'
+application.register('railsui-toast', RailsuiToast)
+<% end %>
+
+<%= render_snippet js_filename: "index.js" %>
+
+<% end %>
+<% end %>
+</div>

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

@@ -0,0 +1,54 @@
+<div id="tooltip-base">
+<%= render layout: example, locals: { heading: "Base", section: "Tooltip" } do %>
+
+<%= render preview 'gray' do %>
+<button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="Hi, from the tips of tools" class="btn btn-primary">Hover here</button>
+<button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="We raised over $1 billion to engineer the greatest tooltip of our lives. <strong>What's super cool</strong> is that HTML can be embedded into the tooltip for max emphasis." data-railsui-tooltip-allow-html-value="true" class="btn btn-white">and here</button>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true  do %>
+<button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="This is the <strong>bold</strong> and <u>underlined</u> content inside my tooltip!" data-railsui-tooltip-allow-html-value="true" class="btn btn-primary">Tooltip with HTML demo</button>
+<% end %>
+
+<% content_for :erb, flush: true  do %>
+<%%= button_tag "#", class: "btn btn-primary", data: { controller: "railsui-tooltip", railsui_tooltip_content_value: "This is the <strong>bold</strong> and <u>underlined</u> content inside my tooltip!", railsui_tooltip_allow_html_value: "true" } %>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+%button.btn.btn-primary{"data-controller" => "railsui-tooltip", "data-railsui-tooltip-allow-html-value" => "true", "data-railsui-tooltip-content-value" => "This is the <strong>bold</strong> and <u>underlined</u> content inside my tooltip!"} Tooltip with HTML demo
+<% end %>
+
+<% content_for :js, flush: true do %>
+// https://github.com/getrailsui/railsui-stimulus/blob/main/src/railsui_tooltip.js
+
+import { Controller } from '@hotwired/stimulus'
+import tippy from 'tippy.js'
+
+export default class extends Controller {
+  static values = {
+    content: String,
+    allowHtml: { type: Boolean, default: false },
+  }
+
+  connect() {
+    let options = {}
+    if (this.hasContentValue) {
+      options['content'] = this.contentValue
+    }
+    if (this.hasAllowHtmlValue) {
+      options['allowHTML'] = this.allowHtmlValue
+    }
+    this.tippy = tippy(this.element, options)
+  }
+
+  disconnect() {
+    this.tippy.destroy()
+  }
+}
+<% end %>
+
+<%= render_snippet js_filename: "tooltip_controller.js" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/content/_image.html.erb

@@ -0,0 +1,31 @@
+<% path = "railsui/themes/hound/content/image" %>
+
+<%= render "#{path}/responsive" %>
+
+<%= divider %>
+
+<%= render "#{path}/object_cover" %>
+
+<%= divider %>
+
+<%= render "#{path}/object_contain" %>
+
+<%= divider %>
+
+<%= render "#{path}/object_fill" %>
+
+<%= divider %>
+
+<%= render "#{path}/object_scale_down" %>
+
+<%= system_pagination(prev_path: systems_icons_path, prev_text: "Icons", next_path: systems_scaffolds_path, next_text: "Scaffold") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Responsive", "#image-responsive" %>
+		<%= component_link "Object Cover", "#image-object-cover" %>
+    <%= component_link "Object Contain", "#image-object-contain" %>
+    <%= component_link "Object Fill", "#image-object-fill" %>
+    <%= component_link "Object Scale Down", "#image-object-scale-down" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/hound/content/_table.html.erb

@@ -0,0 +1,16 @@
+<% path = "railsui/themes/hound/content/table" %>
+
+<%= render "#{path}/bordered" %>
+
+<%= divider %>
+
+<%= render "#{path}/borderless" %>
+
+<%= system_pagination(prev_path: systems_content_typography_path, prev_text: "Typography", next_path: systems_icons_path, next_text: "Icons") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Border", "#table-border" %>
+		<%= component_link "Borderless", "#table-borderless" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/hound/content/_typography.html.erb

@@ -0,0 +1,47 @@
+<% path = "railsui/themes/hound/content/typography" %>
+
+
+<%= render "#{path}/fonts" %>
+
+<%= divider %>
+
+<%= render "#{path}/headings" %>
+
+<%= divider %>
+
+<%= render "#{path}/display_headings" %>
+
+<%= divider %>
+
+<%= render "#{path}/blockquote" %>
+
+<%= divider %>
+
+<%= render "#{path}/lists" %>
+
+<%= divider %>
+
+<%= render "#{path}/lead_paragraph" %>
+
+<%= divider %>
+
+<%= render "#{path}/paragraphs" %>
+
+<%= divider %>
+
+<%= render "#{path}/inline_formatting" %>
+
+<%= system_pagination(prev_path: systems_content_path, prev_text: "Content", next_path: systems_content_table_path, next_text: "Table") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Fonts", "#typography-fonts" %>
+    <%= component_link "Headings", "#typography-headings" %>
+    <%= component_link "Display Headings", "#typography-display-headings" %>
+    <%= component_link "Blockquote", "#typography-blockquote" %>
+    <%= component_link "Lists", "#typography-lists" %>
+    <%= component_link "Lead paragraph", "#typography-lead-paragraph" %>
+    <%= component_link "Paragraphs", "#typography-paragraphs" %>
+    <%= component_link "Inline formatting", "#typography-inline-formatting" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/hound/content/image/_object_contain.html.erb

@@ -0,0 +1,36 @@
+<div id="image-object-contain">
+<%= render layout: example, locals: { heading: "Object Contain" } do %>
+  <div class="prose prose-neutral dark:prose-invert mb-6">
+    <p>Resize an element’s content to stay contained within its container using <code>.object-contain</code>.</p>
+  </div>
+
+  <%= render preview('gray') do %>
+    <div class="flex items-center justify-center">
+      <img src="https://picsum.photos/900/700" alt="" class="object-contain h-48 w-96 rounded-lg shadow-xl bg-blue-100">
+    </div>
+  <% end %>
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<div class="bg-slate-50...">
+  <img src="#" class="object-contain h-48 w-96">
+</div>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<div class="bg-slate-50...">
+  <%%= image_tag "#", class: "object-contain h-48 w-96" %>
+</div>
+<% end %>
+
+<%# .haml %>
+<% content_for :haml, flush: true do %>
+.bg-slate-50
+  image_tag "#", class: "object-contain h-48 w-96"
+<% end %>
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/content/image/_object_cover.html.erb

@@ -0,0 +1,38 @@
+<div id="image-object-cover">
+<%= render layout: example, locals: { heading: "Object Cover" } do %>
+
+<div class="prose prose-neutral dark:prose-invert mb-6 max-w-full">
+  <p>Resize an element's content to cover it's container using <code>.object-cover</code>.</p>
+</div>
+
+  <%= render preview('gray') do %>
+    <div class="flex items-center justify-center">
+      <img src="https://picsum.photos/900/700" alt="" class="object-cover h-48 w-96 rounded-lg shadow-xl">
+    </div>
+  <% end %>
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<div class="bg-slate-50...">
+  <img src="#" class="object-cover h-48 w-96">
+</div>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<div class="bg-slate-50...">
+  <%%= image_tag "#", class: "object-cover h-48 w-96" %>
+</div>
+<% end %>
+
+<%# .haml %>
+<% content_for :haml, flush: true do %>
+.bg-slate-50
+  image_tag "#", class: "object-cover h-48 w-96"
+<% end %>
+<%= render_snippet %>
+
+<% end %>
+<% end %>
+</div>