railsui 3.1.5 → 3.2.0

data/app/views/railsui/themes/shepherd/components/pagination/_pagy.html.erb

@@ -2,9 +2,11 @@
 <%= render layout: example, locals: { heading: "Pagy", section: "Pagination" } do %>
 
   <div class="prose prose-neutral dark:prose-invert my-6">
-    <p><%= link_to "Pagy", "https://github.com/ddnexus/pagy", target: :_blank %> is a popular pagination solution for Ruby/Rails developers. The nav partial <%= link_to "from the gem", "https://github.com/ddnexus/pagy/tree/master/lib/templates", target: :_blank %> comes ready to use with Rails UI.</p>
+    <p><%= link_to "Pagy", "https://github.com/ddnexus/pagy", target: :_blank %> is a popular pagination solution for Ruby/Rails developers. This implementation uses Pagy's default <code>pagy_nav</code> helper with custom CSS styling to match the Rails UI design system.</p>
 
-    <p>To make use of this UI you will need to render an alternative partial containing the code below with the <code>@pagy</code> instance variable passed through as a local variable inside the partial.</p>
+    <p>To use this design, include the CSS styles in your stylesheet and use the simple ERB snippet below. The <code>@pagy</code> instance variable should be passed to your view from the controller.</p>
+    
+    <p>The CSS overrides Pagy's default styling using Tailwind's <code>@apply</code> directive to apply Rails UI classes while maintaining all of Pagy's built-in functionality.</p>
   </div>
 
 <%= render preview "zinc" do %>
@@ -38,109 +40,62 @@
 
 <% content_for :example, flush: true do %>
 <% content_for :html, flush: true do %>
-<nav aria-label="pager" class="text-zinc-600 sm:text-sm text-base font-medium dark:text-zinc-300" role="navigation">
-  <div class="flex flex-wrap items-center sm:justify-between justify-center">
-    <span class="sm:flex-1 flex justify-start items-center sm:w-auto w-full">
-      <span class="btn btn-white flex items-center justify-center gap-2 group md:w-auto w-full md:mb-0 mb-3 select-none pointer-events-none opacity-60">Previous</span>
-    </span>
-    <span class="size-10 flex items-center justify-center border-t-2 border-primary-500 hover:bg-primary-50/50 text-primary-600 dark:text-primary-500 dark:border-primary-500 dark:hover:bg-primary-500/30">1</span>
-    <span>
-      <a class="size-10 flex items-center justify-center border-t-2 border-transparent rounded hover:bg-zinc-50 dark:hover:bg-zinc-500/30 dark:hover:text-zinc-200" href="#" rel="next">2</a>
-    </span>
-    <span>
-      <a class="size-10 flex items-center justify-center border-t-2 border-transparent rounded hover:bg-zinc-50 dark:hover:bg-zinc-500/30 dark:hover:text-zinc-200" href="#">3</a>
-    </span>
-    <span>
-      <a class="size-10 flex items-center justify-center border-t-2 border-transparent rounded hover:bg-zinc-50 dark:hover:bg-zinc-500/30 dark:hover:text-zinc-200" href="#">4</a>
-    </span>
-    <span>
-      <a class="size-10 flex items-center justify-center border-t-2 border-transparent rounded hover:bg-zinc-50 dark:hover:bg-zinc-500/30 dark:hover:text-zinc-200" href="#">5</a>
-    </span>
-    <span class="size-10 flex items-center justify-center border-t-2 border-transparent rounded pointer-events-none select-none">…</span>
-    <span>
-      <a class="size-10 flex items-center justify-center border-t-2 border-transparent rounded hover:bg-zinc-50 dark:hover:bg-zinc-500/30 dark:hover:text-zinc-200" href="#">14</a>
-    </span>
-    <span class="sm:flex-1 flex justify-end items-center sm:w-auto w-full">
-      <a class="btn btn-white flex items-center justify-center gap-2 group md:w-auto w-full md:mt-0 mt-3" href="#" rel="next" aria-label="next">Next</a>
-    </span>
-  </div>
-</nav>
+
 <% end %>
 
 <% content_for :erb, flush: true do %>
-<!-- Source: https://github.com/ddnexus/pagy/blob/master/lib/templates/nav.html.erb -->
-
-<%% link = pagy_link_proc(pagy) %>
-<nav aria-label="pager" class="text-zinc-600 sm:text-sm text-base font-medium" role="navigation">
-  <div class="flex flex-wrap items-center sm:justify-between justify-center">
-  <%% if pagy.prev %>
-    <div class="sm:flex-1 flex justify-start items-center sm:w-auto w-full">
-      <%%== link.call(pagy.prev, pagy_t('pagy.nav.prev'), 'aria-label="previous" class="btn btn-white flex items-center justify-center gap-2 group md:w-auto w-full md:mb-0 mb-3"') %>
-    </div>
-  <%% else %>
-    <div class="sm:flex-1 flex justify-start items-center sm:w-auto w-full">
-      <span class="btn btn-white flex items-center justify-center gap-2 group md:w-auto w-full md:mb-0 mb-3 select-none pointer-events-none opacity-60">
-        <%%== pagy_t('pagy.nav.prev') %>
-      </span>
-    </div>
-  <%% end %>
-
-  <!-- series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]  -->
-  <%% pagy.series.each do |item| %>
-    <%% if item.is_a?(Integer) %>
-      <%%== link.call(item, item, 'class="size-10 flex items-center justify-center border-t-2 border-transparent rounded hover:bg-zinc-50 dark:hover:bg-zinc-500/30 dark:hover:text-zinc-200"') %>
-    <%% elsif item.is_a?(String) %>
-      <span class="size-10 flex items-center justify-center border-t-2 border-primary-500 hover:bg-primary-50/50 text-primary-600 dark:text-primary-500 dark:border-primary-500 dark:hover:bg-primary-500/30"><%%= item %></span>
-    <%% elsif item == :gap %>
-      <span class="size-10 flex items-center justify-center border-t-2 border-transparent rounded pointer-events-none select-none"><%%== pagy_t('pagy.nav.gap') %></span>
-    <%% end %>
-  <%% end %>
-
-  <%% if pagy.next %>
-    <div class="sm:flex-1 flex justify-end items-center sm:w-auto w-full">
-      <%%== link.call(pagy.next, pagy_t('pagy.nav.next'), 'aria-label="next" class="btn btn-white flex items-center justify-center gap-2 group md:w-auto w-full md:mt-0 mt-3"') %>
-    </div>
-  <%% else %>
-    <div class="sm:flex-1 flex justify-end items-center sm:w-auto w-full">
-      <span class="btn btn-white flex items-center justify-center gap-2 group md:w-auto w-full md:mt-0 mt-3 select-none pointer-events-none opacity-60">
-        <%%== pagy_t('pagy.nav.next') %>
-      </span>
-    </div>
-  <%% end %>
-  </div>
-</nav>
+<%%== pagy_nav(pagy) %>
 <% end %>
 
-<% content_for :haml, flush: true do %>
-/ Source: https://github.com/ddnexus/pagy/blob/master/lib/templates/nav.html.erb
-- link = pagy_link_proc(pagy)
-%nav.text-zinc-600.sm:text-sm.text-base.font-medium{"aria-label" => "pager", role: "navigation"}
-  .flex.flex-wrap.items-center.sm:justify-between.justify-center
-    - if pagy.prev
-      .sm:flex-1.flex.justify-start.items-center.sm:w-auto.w-full
-        != link.call(pagy.prev, pagy_t('pagy.nav.prev'), 'aria-label="previous" class="btn btn-white flex items-center justify-center gap-2 group md:w-auto w-full md:mb-0 mb-3"')
-    - else
-      .sm:flex-1.flex.justify-start.items-center.sm:w-auto.w-full
-        %span.btn.btn-white.flex.items-center.justify-center.gap-2.group.md:w-auto.w-full.md:mb-0.mb-3.select-none.pointer-events-none.opacity-60
-          != pagy_t('pagy.nav.prev')
-    / series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
-    - pagy.series.each do |item|
-      - if item.is_a?(Integer)
-        != link.call(item, item, 'class="size-10 flex items-center justify-center border-t-2 border-transparent rounded hover:bg-zinc-50 dark:hover:bg-zinc-500/30 dark:hover:text-zinc-200"')
-      - elsif item.is_a?(String)
-        %span.w-10.h-10.flex.items-center.justify-center.border-t-2.border-primary-500.text-primary-600.dark:text-primary-500.dark:border-primary-500{class: "hover:bg-primary-50/50 dark:hover:bg-primary-500/30"}= item
-      - elsif item == :gap
-        %span.w-10.h-10.flex.items-center.justify-center.border-t-2.border-transparent.rounded.pointer-events-none.select-none!= pagy_t('pagy.nav.gap')
-    - if pagy.next
-      .sm:flex-1.flex.justify-end.items-center.sm:w-auto.w-full
-        != link.call(pagy.next, pagy_t('pagy.nav.next'), 'aria-label="next" class="btn btn-white flex items-center justify-center gap-2 group md:w-auto w-full md:mt-0 mt-3"')
-    - else
-      .sm:flex-1.flex.justify-end.items-center.sm:w-auto.w-full
-        %span.btn.btn-white.flex.items-center.justify-center.gap-2.group.md:w-auto.w-full.md:mt-0.mt-3.select-none.pointer-events-none.opacity-60
-          != pagy_t('pagy.nav.next')
+<% content_for :css, flush: true do %>
+/* Custom Pagy Styles - Override defaults with shepherd theme design */
+.pagy nav {
+  @apply text-neutral-600 text-sm font-medium dark:text-neutral-300;
+}
+
+.pagy nav > div {
+  @apply flex flex-wrap items-center justify-between;
+}
+
+/* Previous/Next buttons */
+.pagy nav > div > span:first-child,
+.pagy nav > div > span:last-child {
+  @apply flex-1 flex justify-start items-center w-auto;
+}
+
+.pagy nav > div > span:last-child {
+  @apply justify-end;
+}
+
+.pagy nav a[aria-label*="prev"],
+.pagy nav a[aria-label*="next"] {
+  @apply btn btn-white flex items-center justify-center gap-2 group w-auto mb-0 mt-0;
+}
+
+.pagy nav span:disabled {
+  @apply btn btn-white flex items-center justify-center gap-2 group w-auto mb-0 mt-0 select-none pointer-events-none opacity-60;
+}
+
+/* Page number links */
+.pagy nav span:not(:first-child):not(:last-child) {
+  @apply size-10 flex items-center justify-center border-t-2 border-transparent rounded;
+}
+
+.pagy nav a:not([aria-label]) {
+  @apply size-10 flex items-center justify-center border-t-2 border-transparent rounded hover:bg-neutral-50 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200;
+}
+
+.pagy nav a.current {
+  @apply size-10 flex items-center justify-center border-t-2 border-primary-500 hover:bg-primary-50/50 text-primary-600 dark:text-primary-500 dark:border-primary-500 dark:hover:bg-primary-500/30;
+}
+
+.pagy nav span.gap {
+  @apply size-10 flex items-center justify-center border-t-2 border-transparent rounded pointer-events-none select-none;
+}
 <% end %>
 
-<%= render_snippet active_tab: "erb" %>
+
+<%= render_snippet active_tab: "css" %>
 <% end %>
 <% end %>
 </div>

data/app/views/railsui/themes/shepherd/components/pagination/_simple.html.erb

@@ -127,33 +127,6 @@
 </nav>
 <% end %>
 
-<% content_for :haml, flush: true do %>
-%nav.text-zinc-600.sm:text-sm.text-base.font-medium.dark:text-zinc-300{"aria-label" => "Page navgiation"}
-  %ul.flex.flex-wrap.items-center.sm:justify-between.justify-center
-    %li.flex-1.flex.justify-start.items-center.sm:w-auto.w-full
-      = link_to "#", class: "btn btn-white flex items-center justify-center space-x-2 pl-3 group md:w-auto w-full md:mb-0 mb-3" do
-        = icon "arrow-small-left", class:  "size-4 text-zinc-400 group-hover:text-primary-500 dark:group-hover:text-zinc-200"
-        %span Previous
-    .flex.items-center.justify-center.sm:w-auto.w-full.sm:text-sm.text-lg
-      %li
-        = link_to "1", "#", class: "py-2 px-4 block border-t-2 border-transparent rounded hover:bg-zinc-50 dark:hover:bg-zinc-500/30 dark:hover:text-zinc-200"
-      %li
-        = link_to "2", "#", class: "py-2 px-4 border-t-2 block border-primary-500 hover:bg-primary-50/50 text-primary-600 dark:text-primary-500 dark:border-primary-500 dark:hover:bg-primary-500/30"
-      %li
-        = link_to "3", "#", class: "py-2 px-4 block border-t-2 border-transparent rounded hover:bg-zinc-50 dark:hover:bg-zinc-500/30 dark:hover:text-zinc-200"
-      %li
-        %span.py-2.px-4.block.border-t-2.border-transparent.rounded.pointer-events-none.select-none …
-      %li
-        = link_to "8", "#", class: "py-2 px-4 block border-t-2 border-transparent rounded hover:bg-zinc-50 dark:hover:bg-zinc-500/30 dark:hover:text-zinc-200"
-      %li
-        = link_to "9", "#", class: "py-2 px-4 block border-t-2 border-transparent rounded hover:bg-zinc-50 dark:hover:bg-zinc-500/30 dark:hover:text-zinc-200"
-      %li
-        = link_to "10", "#", class: "py-2 px-4 block border-t-2 border-transparent rounded hover:bg-zinc-50 dark:hover:bg-zinc-500/30 dark:hover:text-zinc-200"
-    %li.flex-1.flex.justify-end.items-center
-      = link_to "#", class: "btn btn-white flex items-center justify-center space-x-2 pr-3 group md:w-auto w-full md:mb-0 mb-3" do
-        %span Next
-        = icon "arrow-small-right", class: "size-4 text-zinc-400 group-hover:text-primary-500 dark:group-hover:text-zinc-200"
-<% end %>
 
       <%= render_snippet %>
     <% end %>

data/app/views/railsui/themes/shepherd/components/tab/_base.html.erb

@@ -87,30 +87,13 @@ data-railsui-tabs-inactive-tab="py-3 px-4 bg-white dark:bg-transparent inline-bl
 </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 inline-block bg-white whitespace-nowrap dark:bg-transparent dark:text-primary-500 text-primary-500", "data-railsui-tabs-inactive-tab" => "py-3 px-4 bg-white dark:bg-transparent inline-block whitespace-nowrap"}
-  .border-zinc-200.border-b.text-zinc-600.dark:text-zinc-100{class: "dark:border-zinc-600/80 text-[15px]"}
-    %nav.-mb-px.font-heading{role: "navigation"}
-      = link_to "Activity", "#", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" }, class: "py-3 px-4 border-b border-primary-500 inline-block bg-white whitespace-nowrap dark:bg-transparent dark:text-primary-500"
-      = link_to "Account", "#", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" }, class: "py-3 px-4 bg-white dark:bg-transparent inline-block whitespace-nowrap"
-      = link_to "Billing", "#", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" }, class: "py-3 px-4 bg-white dark:bg-transparent inline-block whitespace-nowrap"
-      = link_to "Team", "#", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" }, class: "py-3 px-4 bg-white dark:bg-transparent inline-block whitespace-nowrap"
-  .p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    %p Some activities...
-  .hidden.p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    %p Account information...
-  .hidden.p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    %p Billing information...
-  .hidden.p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    %p 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" %>
+<%= render_snippet html_filename: "tabs.html", erb_filename: "_tabs.html.erb", js_filename: "index.js" %>
 <% end %>
 <% end %>
 </div>

data/app/views/railsui/themes/shepherd/components/tab/_pills.html.erb

@@ -89,30 +89,13 @@ data-railsui-tabs-inactive-tab="py-2 px-4 rounded-full dark:hover:bg-zinc-800/75
 </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 rounded-full text-primary-500 dark:bg-primary-500 dark:text-white", "data-railsui-tabs-inactive-tab" => "py-2 px-4 rounded-full dark:hover:bg-zinc-800/75 transition duration-200 ease-in-out"}
-  .text-zinc-600.dark:text-zinc-300
-    %nav.flex.items-center.space-x-1.font-heading.font-normal{class: "text-[15px]", role: "navigation"}
-      = link_to "Activity", "#", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }, class: "py-2 px-4 bg-primary-50 rounded-full text-primary-500 dark:bg-primary-500 dark:text-white transition duration-200 ease-in-out"
-      = link_to "Account", "#", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }, class: "py-2 px-4 rounded-full dark:hover:bg-zinc-800/75 transition duration-200 ease-in-out"
-      = link_to "Billing", "#", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }, class: "py-2 px-4 rounded-full dark:hover:bg-zinc-800/75 transition duration-200 ease-in-out"
-      = link_to "Team", "#", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }, class: "py-2 px-4 rounded-full dark:hover:bg-zinc-800/75 transition duration-200 ease-in-out"
-  .p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    %p Some activities...
-  .hidden.p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    %p Account information...
-  .hidden.p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    %p Billing information...
-  .hidden.p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    %p 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" %>
+<%= render_snippet html_filename: "tabs.html", erb_filename: "_tabs.html.erb", js_filename: "index.js" %>
 <% end %>
 <% end %>
 </div>

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

@@ -92,30 +92,13 @@
 </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 rounded text-primary-500 dark:bg-primary-500 dark:text-white", "data-railsui-tabs-inactive-tab" => "py-2 px-4 rounded-md dark:text-slate-200 dark:hover:bg-zinc-800/75 transition duration-200 ease-in-out"}
-  %div
-    %nav.flex.items-center.text-zinc-600.space-x-1.font-medium.text-sm{role: "navigation"}
-      = link_to "Activity", "#", class: "py-3 px-4 bg-primary-50 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 transition duration-200 ease-in-out", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
-      = link_to "Billing", "#", class: "py-2 px-4 rounded-md transition duration-200 ease-in-out", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
-      = link_to "Team", "#", class: "py-2 px-4 rounded-md transition duration-200 ease-in-out", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" }
-  .p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    Some activities...
-  .hidden.p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    Account information...
-  .hidden.p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    Billing information...
-  .hidden.p-4.prose.prose-zinc.dark:prose-invert{"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" %>
+<%= render_snippet html_filename: "tabs.html", erb_filename: "_tabs.html.erb", js_filename: "index.js" %>
 <% end %>
 <% end %>
 </div>

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

@@ -129,31 +129,6 @@ data-railsui-tabs-inactive-tab="py-2 px-4 flex items-center space-x-3 whitespace
 </div>
 <% end %>
 
-<% content_for :haml, flush: true do %>
-%div{"data-controller" => "railsui-tabs", "data-railsui-tabs-active-tab" => "py-2 px-4 border-b border-zinc-300 border-primary-500 flex items-center space-x-3 bg-white whitespace-nowrap text-primary-500 dark:bg-primary-500 dark:text-white dark:border-primary-600 rounded-t", "data-railsui-tabs-inactive-tab" => "py-2 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-white dark:border-zinc-600 dark:bg-transparent"}
-  .border-zinc-300.border-b.text-zinc-600.dark:text-zinc-200.dark:border-zinc-600{class: "text-[15px]"}
-    %nav.-mb-px.flex.items-center.flex-wrap.font-heading{role: "navigation"}
-      = link_to "#", class: "py-2 px-4 border-b border-primary-500 flex items-center space-x-3 bg-white whitespace-nowrap text-primary-500 dark:bg-primary-500 dark:text-white 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-2 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-white dark:border-zinc-600 dark:bg-transparent", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do
-        = icon "user-circle", class: "size-5"
-        %span Account
-      = link_to "#", class: "py-2 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-white dark:border-zinc-600 dark:bg-transparent", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do
-        = icon "credit-card", class: "size-5"
-        %span Billing
-      = link_to "#", class: "py-2 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-white dark:border-zinc-600 dark:bg-transparent", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do
-        = icon "users", class: "size-5"
-        %span Team
-  .p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    Some activities...
-  .hidden.p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    Account information...
-  .hidden.p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    Billing information...
-  .hidden.p-4.prose.prose-zinc.dark:prose-invert{"data-railsui-tabs-target" => "panel"}
-    Team information...
-<% end %>
 
 <% content_for :js, flush: true do %>
 // Docs: https://github.com/getrailsui/railsui-stimulus/
@@ -161,7 +136,7 @@ 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" %>
+  <%= render_snippet html_filename: "tabs.html", erb_filename: "_tabs.html.erb", js_filename: "index.js" %>
 <% end %>
 <% end %>
 </div>

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

@@ -81,22 +81,6 @@
 </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.dark:bg-zinc-950.dark:border(class="dark:border-zinc-700/80 ring-black/5")
-      .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-zinc-900.dark:text-white Successfully liked!
-            %p.mt-1.text-sm.text-zinc-500.dark:text-zinc-300 John Doe has been notified.
-          .ml-4.flex.shrink-0
-            %button.inline-flex.rounded-sm.bg-white.text-zinc-400.hover:text-zinc-500.focus:outline-hidden.focus:ring-2.focus:ring-zinc-50.dark:bg-transparent.dark:focus:ring-zinc-500.dark:hover:text-zinc-100.dark:focus:text-zinc-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 %>
 

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

@@ -17,9 +17,6 @@
 <%%= 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 %>
 // Docs: https://github.com/getrailsui/railsui-stimulus

data/app/views/railsui/themes/shepherd/content/_image_old.html.erb

@@ -25,11 +25,6 @@
 </div>
 <% end %>
 
-<%# .haml %>
-<% content_for :haml, flush: true do %>
-.bg-slate-50
-  image_tag "#", class: "object-cover h-48 w-96"
-<% end %>
 <%= render_snippet %>
 </div>
 
@@ -60,11 +55,6 @@
 </div>
 <% end %>
 
-<%# .haml %>
-<% content_for :haml, flush: true do %>
-.bg-slate-50
-  image_tag "#", class: "object-contain h-48 w-96"
-<% end %>
 <%= render_snippet %>
 </div>
 
@@ -94,11 +84,6 @@
 </div>
 <% end %>
 
-<%# .haml %>
-<% content_for :haml, flush: true do %>
-.bg-slate-50
-  image_tag "#", class: "object-fill h-48 w-96"
-<% end %>
 <%= render_snippet %>
 </div>
 
@@ -128,11 +113,6 @@
 </div>
 <% end %>
 
-<%# .haml %>
-<% content_for :haml, flush: true do %>
-.bg-zinc-50
-  image_tag "#", class: "object-scale-down h-48 w-96"
-<% end %>
 <%= render_snippet %>
 </div>
 

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

@@ -23,11 +23,6 @@
 </div>
 <% end %>
 
-<%# .haml %>
-<% content_for :haml, flush: true do %>
-.bg-zinc-50
-  image_tag "#", class: "object-contain h-48 w-96"
-<% end %>
 <%= render_snippet %>
 <% end %>
 <% end %>

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

@@ -24,11 +24,6 @@
 </div>
 <% end %>
 
-<%# .haml %>
-<% content_for :haml, flush: true do %>
-.bg-zinc-50
-  image_tag "#", class: "object-cover h-48 w-96"
-<% end %>
 <%= render_snippet %>
 
 <% end %>

data/app/views/railsui/themes/shepherd/content/image/_object_fill.html.erb

@@ -25,11 +25,6 @@
 </div>
 <% end %>
 
-<%# .haml %>
-<% content_for :haml, flush: true do %>
-.bg-zinc-50
-  image_tag "#", class: "object-fill h-48 w-96"
-<% end %>
 <%= render_snippet %>
 <% end %>
 <% end %>

data/app/views/railsui/themes/shepherd/content/image/_object_scale_down.html.erb

@@ -25,11 +25,6 @@
 </div>
 <% end %>
 
-<%# .haml %>
-<% content_for :haml, flush: true do %>
-.bg-zinc-50
-  image_tag "#", class: "object-scale-down h-48 w-96"
-<% end %>
 <%= render_snippet %>
 <% end %>
 <% end %>

data/app/views/railsui/themes/shepherd/content/image/_responsive.html.erb

@@ -18,10 +18,6 @@
   <%%= image_tag "...", class: "max-w-full", alt:"..." %>
 <% end %>
 
-<%# .haml %>
-<% content_for :haml, flush: true do %>
-  %img.max-w-full{:alt => "...", :src => "..."}
-<% end %>
 <%= render_snippet %>
 <% end %>
 <% end %>

data/app/views/railsui/themes/shepherd/content/table/_bordered.html.erb

@@ -86,27 +86,6 @@
 <%% end %>
 <% end %>
 
-<%# .haml %>
-<% content_for :haml, flush: true do %>
-= tag.table class: "table-auto w-full border border-zinc-300 dark:border-zinc-700/80" do
-  = tag.thead do
-    = tag.tr do
-      = tag.th "First", scope: "col", class: "text-left p-3 border border-zinc-200 dark:border-zinc-700/80"
-      = tag.th "Last", scope: "col", class: "text-left p-3 border border-zinc-200 dark:border-zinc-700/80"
-      = tag.th "Handle", scope: "col", class: "text-left p-3 border border-zinc-200 dark:border-zinc-700/80"
-  = tag.tbody do
-    = tag.tr do
-      = tag.td "Andy", class: "p-3 border border-zinc-200 dark:border-zinc-700/80"
-      = tag.td "L.", class: "p-3 border border-zinc-200 dark:border-zinc-700/80"
-      = tag.td "@railsui_", class: "p-3 border border-zinc-200 dark:border-zinc-700/80"
-    = tag.tr do
-      = tag.td "Web", class: "p-3 border border-zinc-200 dark:border-zinc-700/80"
-      = tag.td "Crunch", class: "p-3 border border-zinc-200 dark:border-zinc-700/80"
-      = tag.td "@webcrunchblog", class: "p-3 border border-zinc-200 dark:border-zinc-700/80"
-    = tag.tr do
-      = tag.td "justalever", colspan: "2", class: "p-3 border border-zinc-200 dark:border-zinc-700/80"
-      = tag.td "@justalever", class: "p-3 border border-zinc-200 dark:border-zinc-700/80"
-<% end %>
 <%= render_snippet %>
 <% end %>
 <% end %>

data/app/views/railsui/themes/shepherd/content/table/_borderless.html.erb

@@ -87,27 +87,6 @@
 <%% end %>
 <% end %>
 
-<%# .haml %>
-<% content_for :haml, flush: true do %>
-%table.table-auto.w-full
-  %thead
-    %tr
-      %th.text-left.p-3.border-b-2.border-zinc-200(class="dark:border-zinc-700/80" scope="col") First
-      %th.text-left.p-3.border-b-2.border-zinc-200(class="dark:border-zinc-700/80" scope="col") Last
-      %th.text-left.p-3.border-b-2.border-zinc-200(class="dark:border-zinc-700/80" scope="col") Handle
-  %tbody
-    %tr
-      %td.p-3.text-left Andy
-      %td.p-3.text-left L.
-      %td.p-3.text-left @railsui_
-    %tr
-      %td.p-3.text-left Web
-      %td.p-3.text-left Crunch
-      %td.p-3.text-left @webcrunchblog
-    %tr
-      %td.p-3.text-left(colspan="2") justalever
-      %td.p-3.text-left @justalever
-<% end %>
 <%= render_snippet %>
 <% end %>
 <% end %>

data/app/views/railsui/themes/shepherd/content/typography/_blockquote.html.erb

@@ -34,15 +34,6 @@ Someone famous in
 <%% end %>
 <% end %>
 
-<%# .haml %>
-<% content_for :haml, flush: true do %>
-%figure.pl-6.border-l-2.border-primary-500.py-1
-  %blockquote.text-xl.font-heading.font-light.mb-1.text-zinc-800.dark:text-zinc-100
-    %p A well-known quote, contained in a blockquote element.
-  %figcaption.text-zinc-500.text-sm.dark:text-zinc-300
-    Someone famous in
-    %cite(title="Source Title") Source Title
-<% end %>
 
 <%= render_snippet %>
 <% end %>

data/app/views/railsui/themes/shepherd/content/typography/_display_headings.html.erb

@@ -64,15 +64,6 @@
 <%%= content_tag :h6, "A quick brown fox jumps over the lazy dog.", class: "display-6" %>
 <% end %>
 
-<%# .haml %>
-<% content_for :haml, flush: true do %>
-= content_tag :h1, "A quick brown fox jumps over the lazy dog.", class: "display-1"
-= content_tag :h2, "A quick brown fox jumps over the lazy dog.", class: "display-2"
-= content_tag :h3, "A quick brown fox jumps over the lazy dog.", class: "display-3"
-= content_tag :h4, "A quick brown fox jumps over the lazy dog.", class: "display-4"
-= content_tag :h5, "A quick brown fox jumps over the lazy dog.", class: "display-5"
-= content_tag :h6, "A quick brown fox jumps over the lazy dog.", class: "display-6"
-<% end %>
 
 <%= render_snippet %>
 <% end %>

data/app/views/railsui/themes/shepherd/content/typography/_headings.html.erb

@@ -63,18 +63,6 @@
 <%%= content_tag :h5, "A quick brown fox jumps over the lazy dog.", class: "h5" %>
 <%%= content_tag :h6, "A quick brown fox jumps over the lazy dog.", class: "h6" %>
   <% end %>
-<%# snippet content :haml %>
-  <% content_for :haml, flush: true do %>
-= content_tag :h1, "A quick brown fox jumps over the lazy dog.", class: "text-5xl font-semibold font-heading text-zinc-900 dark:text-zinc-100 -tracking-[0.03em]"
-= content_tag :h2, "A quick brown fox jumps over the lazy dog.", class: "text-4xl font-semibold font-heading text-zinc-900 dark:text-zinc-100 tracking-tight"
-= content_tag :h3, "A quick brown fox jumps over the lazy dog.", class: "h3"
-= content_tag :h4, "A quick brown fox jumps over the lazy dog.", class: "h4"
-= content_tag :h5, "A quick brown fox jumps over the lazy dog.", class: "h5"
-= content_tag :h6, "A quick brown fox jumps over the lazy dog.", class: "h6"
-        <% end %>
-    <%= render_snippet %>
-  <% end %>
-<% end %>
 </div>
 
 <div id="typography-responsive" class="prose prose-netural dark:prose-invert max-w-full prose-headings:tracking-tight">
@@ -86,9 +74,6 @@
   <h1 class="md:h1 h2">My sample title</h1>
 <% end %>
 
-<% content_for :haml, flush: true do %>
-
-<% end %>
 
 <% content_for :erb, flush: true do %>