railsui 3.1.0

data/app/views/railsui/systems/mailers/overview.html.erb

@@ -0,0 +1,54 @@
+<% content_for :header_description do %>
+  <p>Rails UI comes with ready-to-use mailer templates for generic email designs.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+
+<div class="mb-16 prose prose-neutral dark:prose-invert">
+  <div id="mailers-overview">
+    <p>Rails UI mailer templates are a starting point for you to tweak as the content you send your users evolves.</p>
+
+    <p>Many email clients are out in the wild, and each has different areas of support regarding CSS and HTML. Rails UI includes essential support with some clever hacks you can use to do more with your templates.</p>
+
+    <h3>Styling considerations</h3>
+
+    <p>It's recommended that CSS be inlined to work best inside any email, Tailwind CSS will not work well inside the templates. All included CSS resides inside the <%= link_to "mailer layout template",  systems_mailers_layout_path %> for this reason.</p>
+
+    <p>If you prefer to write your CSS in another stylesheet and include it in your layout, we recommend using something like <%= link_to "premailer", "https://github.com/premailer/premailer" %> to ensure any additional styles you include render correctly inline.</p>
+
+    <h3>Helpers</h3>
+
+    <p>Rails UI includes a few helpers to make your life easier when writing mailers. These are included in the <code>application_mailer.rb</code> file. Read more about them via links below:</p>
+
+    <ul>
+      <li>
+        <%= link_to "Email Action", systems_helpers_email_action_path %>
+      </li>
+      <li>
+        <%= link_to "Email Callout", systems_helpers_email_callout_path %>
+      </li>
+      <li>
+        <%= link_to "Email Spacer", systems_helpers_spacer_path %>
+      </li>
+    </ul>
+  </div>
+</div>
+
+
+<div id="mailers-templates">
+  <div class="mt-8 mb-6 prose prose-neutral dark:prose-invert">
+    <h3>Templates</h3>
+  </div>
+
+  <%= render layout: "railsui/shared/linkables" do %>
+    <%= render "railsui/shared/linkable", path: systems_mailers_layout_path, title: "Layout", description: "The backbone of your mailers." %>
+
+    <%= render "railsui/shared/linkable", path: systems_mailers_minimal_path, title: "Minimal", description: "A simple starting point for HTML-based email templates." %>
+
+    <%= render "railsui/shared/linkable", path: systems_mailers_promotion_path, title: "Promotion", description: "A simple promotional email template design." %>
+
+    <%= render "railsui/shared/linkable", path: systems_mailers_transactional_path, title: "Transactional", description: "The core use case for most SaaS app email templates" %>
+
+    <%= render "railsui/shared/linkable", path: systems_mailers_devise_path, title: "Devise", description: "Save time with pre-themed Devise templates." %>
+  <% end %>
+</div>

data/app/views/railsui/systems/mailers/promotion.html.erb

@@ -0,0 +1,2 @@
+<%= render "railsui/shared/header" %>
+<%= render "railsui/themes/#{Railsui.config.theme}/mailers/promotion" %>

data/app/views/railsui/systems/mailers/transactional.html.erb

@@ -0,0 +1,2 @@
+<%= render "railsui/shared/header" %>
+<%= render "railsui/themes/#{Railsui.config.theme}/mailers/transactional" %>

data/app/views/railsui/systems/mailers.html.erb

@@ -0,0 +1,225 @@
+<%= render "railsui/shared/header" %>
+
+<%= render "railsui/shared/header" %>
+<div class="prose prose-neutral dark:prose-invert mb-16">
+  <div id="mailers-overview">
+    <p>Email templates are ready for use with Rails UI. They are a starting point for you to tweak as the content you send your users evolves.</p>
+
+    <p>Many email clients are out in the wild, and each has different areas of support regarding CSS and HTML. Rails UI includes essential support with some clever hacks you can use to do more with your templates.</p>
+
+    <h3>Styling considerations</h3>
+
+    <p>It's recommended that CSS be inlined to work best inside any email, Tailwind CSS will not work well inside the templates. All included CSS resides inside the <%= link_to "mailer layout template",  systems_mailers_layout_path %> for this reason.</p>
+
+    <p>If you prefer to write your CSS in another stylesheet and include it in your layout, we recommend using something like <%= link_to "premailer", "https://github.com/premailer/premailer" %> to ensure any additional styles you include render correctly inline.</p>
+  </div>
+
+  <div id="mailers-helpers">
+    <h3>Helpers</h3>
+
+    <p>Bundled with Rails UI is a small set of helpers. These helpers are useful for displaying buttons and adding dependable spacing between HTML elements in a given template, as you can't rely on CSS much of the time.</p>
+
+    <p>HTML emails require tables to layout a given design. Writing these is a chore, but they are more dependable across clients if appropriately authored. I hope these helpers should save you time and headache!</p>
+
+    <p>The helpers are added automatically when you install Rails UI and appended to your <code>application_helper.rb</code> file.</p>
+
+    <p>For context this is what they look like and are purely for extraction sake:</p>
+
+  <div class="not-prose">
+<% content_for :ruby, flush: true do %>
+def spacer(amount=16)
+  render "rui/shared/email_spacer", amount: amount
+end
+
+def email_action(action, url, options={})
+  align = options[:align] ||= "left"
+  theme = options[:theme] ||= "primary"
+  fullwidth = options[:fullwidth] ||= false
+  render "rui/shared/email_action", align: align, theme: theme, action: action, url: url, fullwidth: fullwidth
+end
+
+def email_callout(&block)
+  render "rui/shared/email_callout", block: block
+end
+<% end %>
+
+    <%= render_snippet active_tab: :ruby, ruby_filename: "application_helper.rb" %>
+     </div>
+<p>You'll find the partials referenced above inside the <code>rui/shared</code> view directory.</p>
+  </div>
+
+  <div id="mailers-spacers">
+    <h3>Spacers</h3>
+
+    <p>The spacer helper is an extraction for rendering a new table between elements inside an email template. Emails and margin/padding don't always behave across mail clients, so this is a sure way to get that extra space between elements.</p>
+
+    <p>The helper renders an empty table with some inline styles and height attributes intact. Rather than write this HTML by hand, the spacer helper makes it easy.</p>
+
+    <p>Pass an amount to the helper for more or less space to suit your needs. The amount passed will render in pixel units.</p>
+  </div>
+</div>
+
+<% content_for :html, flush: true do %>
+<!-- compiled output -->
+<p>Some text...</p>
+<table class="spacer">
+  <tbody>
+    <tr>
+      <td height="16" style="font-size:16px;line-height:16px;">&nbsp;</td>
+    </tr>
+  </tbody>
+</table>
+<p>Another paragraph</p>
+<% end %>
+<% content_for :erb, flush: true do %>
+<p>Some text....</p>
+<%%= spacer(16) %>
+<p>Another paragraph</p>
+<% end %>
+<%= render_snippet(active_tab: "erb") %>
+
+<div id="mailers-buttons">
+    <h3 class="font-bold text-xl mb-3">Buttons</h3>
+    <div class="primary dark:primary-invert">
+      <p>To make authoring buttons way easier in emails, we extracted the logic to do so out into another helper called <%= code("email_action") %>. The helper accepts two parameters and an options hash for further customization.</p>
+
+      <p>Rails UI supports two themes (primary, secondary) which can be customized in the <%= link_to "mailer layout", systems_mailers_layout_path %> css. </p>
+    </div>
+    <div class="mt-5 mb-8 first:mt-0 last:mb-0 bg-slate-800 rounded-xl shadow-lg overflow-hidden dark:ring-1 dark:ring-white/10 dark:ring-inset selection:bg-salmon-500 selection:bg-opacity-25 relative text-slate-200 p-6">
+      <code class="text-white text-lg">email_action(action, path, options)</code>
+      <h4 class="uppercase text-xs text-slate-400 font-semibold tracking-wider my-4 pb-2 border-b border-slate-700">Required parameters</h4>
+      <ul class="space-y-2">
+        <li>
+          <p><code class="text-pink-400 font-mono font-semibold">action</code>  <em class="text-slate-400">- required</em></p>
+          <p>The button label</p>
+        </li>
+        <li>
+          <p><code class="text-pink-400 font-mono font-semibold">path</code> <em class="text-slate-400">- required</em></p>
+          <p>The url for the button. Be sure to use url helpers and not path helpers in an email </p>
+        </li>
+      </ul>
+      <h4 class="uppercase text-xs text-slate-400 font-semibold tracking-wider my-4 pb-2 border-b border-slate-700">Additional options</h4>
+      <ul class="space-y-2">
+        <li>
+          <p><code class="text-pink-400 font-mono font-semibold">theme</code></p>
+          <p>
+            <span class="font-medium text-sky-400 font-mono">primary</span> or <span class="font-medium text-sky-400 font-mono">secondary</span>. Default: <span class="font-medium text-sky-400 font-mono">primary</span>.
+          </p>
+        </li>
+        <li>
+          <p><code class="text-pink-400 font-mono font-semibold">align</code></p>
+          <p>Align button to
+            <span class="font-medium text-sky-400 font-mono">center</span>, <span class="font-medium text-sky-400 font-mono">left</span>, or <span class="font-medium text-sky-400 font-mono">right</span>.
+            Default: <span class="font-medium text-sky-400 font-mono">left</span>
+          </p>
+        </li>
+        <li>
+          <p><code class="text-pink-400 font-mono font-semibold">fullwidth</code></p>
+          <p>(boolean) <span class="font-medium text-sky-400 font-mono">true</span> / <span class="font-medium text-sky-400 font-mono">false</span>
+          </p>
+        </li>
+      </ul>
+    </div>
+<% content_for :erb, flush: true do %>
+<!-- all available options shown in use -->
+<%%= email_action("View notification", root_url, theme: "primary", align: "center") %>
+<% end %>
+
+<% content_for :html, flush: true do %>
+<!-- what outputs from mail_action -->
+<table class="action" align="center">
+  <tr>
+    <td align="center">
+      <a href="<%= root_url %>" class="action__link  action__link--primary" target="_blank">View notification</a>
+      <div itemscope itemtype="http://schema.org/EmailMessage">
+        <div itemprop="potentialAction" itemscope itemtype="http://schema.org/ViewAction">
+          <link itemprop="target" href="#"/>
+          <meta itemprop="name" content="View notification"/>
+        </div>
+      </div>
+    </td>
+  </tr>
+</table>
+<% end %>
+
+<%= render_snippet(active_tab: "erb" ) %>
+
+</div>
+
+<%= divider %>
+
+<div id="mailers-callouts">
+<div class="prose prose-neutral dark:prose-invert">
+  <h3>Callouts</h3>
+  <p>Callouts help you highlight important information in an email. Rails UI has a simple helper that lets you add callouts easily. You can add your content and basic HTML to format it. You can change how callouts look in the <%= link_to "mailer layout", systems_mailers_layout_path %> CSS.</p>
+</div>
+
+<%= email_viewer("Callout example") do %>
+  <%= render layout: "railsui/themes/#{Railsui.config.theme.downcase}/mailers/mailer_preview" do %>
+    <h3>He made many woofs</h3>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+
+    <p>Facere provident quia eaque dolor. Saepe consequatur illum laborum suscipit ex accusantium exercitationem dolores, aliquid mollitia recusandae ipsa iusto quas, deleniti aut.</p>
+
+    <table class="callout">
+      <tbody>
+        <td>
+          <p>This is my neat email callout.</p>
+        </td>
+      </tbody>
+    </table>
+
+    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur veritatis quibusdam molestias nam culpa quasi facere nulla. Nisi, eius magni, tempora cupiditate atque sed optio iure necessitatibus ad minus ratione?</p>
+  <% end %>
+<% end %>
+
+<% content_for :html, flush: true do %>
+<table class="callout">
+  <tbody>
+    <td>
+      <p>This is my neat email callout.</p>
+    </td>
+  </tbody>
+</table>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= email_callout do %>
+  <p>This is my neat email callout.</p>
+<%% end %>
+<% end %>
+
+<%= render_snippet(active_tab: "erb" ) %>
+</div>
+
+<%= divider %>
+
+<div id="mailers-templates">
+  <div class="prose prose-neutral dark:prose-invert mt-8 mb-6">
+    <h3>Templates</h3>
+  </div>
+
+  <%= render layout: "railsui/shared/linkables" do %>
+    <%= render "railsui/shared/linkable", path: systems_mailers_layout_path, title: "Layout", description: "The backbone of your mailers." %>
+
+    <%= render "railsui/shared/linkable", path: systems_mailers_minimal_path, title: "Minimal", description: "A simple starting point for HTML-based email templates." %>
+
+    <%= render "railsui/shared/linkable", path: systems_mailers_promotion_path, title: "Promotion", description: "A simple promotional email template design." %>
+
+    <%= render "railsui/shared/linkable", path: systems_mailers_transactional_path, title: "Transactional", description: "The core use case for most SaaS app email templates" %>
+
+    <%= render "railsui/shared/linkable", path: systems_mailers_devise_path, title: "Devise", description: "Save time with pre-themed Devise templates." %>
+  <% end %>
+</div>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Overview", "#mailers-overview" %>
+    <%= component_link "Styling considerations", "#mailers-styling-considerations" %>
+    <%= component_link "Helpers", "#mailers-helpers" %>
+    <%= component_link "Spacers", "#mailers-spacers" %>
+    <%= component_link "Buttons", "#mailers-buttons" %>
+    <%= component_link "Callouts", "#mailers-callouts" %>
+    <%= component_link "Templates", "#mailers-templates" %>
+  <% end %>
+<% end %>

data/app/views/railsui/systems/scaffolds.html.erb

@@ -0,0 +1,2 @@
+<%= render "railsui/shared/header" %>
+<%= render "railsui/themes/#{Railsui.config.theme}/scaffolds" %>

data/app/views/railsui/systems/show.html.erb

@@ -0,0 +1,26 @@
+
+<div class="text-center">
+  <div class="flex items-center justify-center mb-3">
+    <div class="flex items-center gap-3">
+      <div class="w-20 h-px bg-gradient-to-r from-transparent to-neutral-200 dark:to-neutral-700"></div>
+      <p class="font-medium"><%= Railsui.config.application_name %></p>
+      <div class="w-20 h-px bg-gradient-to-l from-transparent to-neutral-200 dark:to-neutral-700"></div>
+    </div>
+  </div>
+  <h1 class="font-bold text-3xl mb-6 dark:text-white tracking-tight">Design patterns</h1>
+  <div class="prose prose-neutral dark:prose-invert mx-auto max-w-xl mb-10">
+    <p class="text-lg">Leverage a system of components and patterns to create a professionally designed Rails application.</p>
+  </div>
+</div>
+
+<%= render layout: "railsui/shared/linkables" do %>
+  <%= render "railsui/shared/linkable", path: systems_content_typography_path, title: "Content", description: "Ready-to-use content patterns for everyday markup and content." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_input_path, title: "Forms", description: "Form inputs, controls, and pre-designed patterns." %>
+
+  <%= render "railsui/shared/linkable", path: systems_components_accordion_path, title: "Components", description: "Customizable components that you can copy and paste into your apps." %>
+
+  <%= render "railsui/shared/linkable", path: systems_authentication_overview_path, title: "Authentication", description: "A customized authentication experience ready for your app." %>
+
+  <%= render "railsui/shared/linkable", path: systems_mailers_overview_path, title: "Mailers", description: "Some help getting those pesky email templates in good shape." %>
+<% end %>

data/app/views/railsui/themes/hound/_components.html.erb

@@ -0,0 +1,7 @@
+<%= render layout: "railsui/shared/linkables" do %>
+  <% components = ["Accordion", "Alert", "Badge", "Breadcrumb", "Button", "Card", "Dropdown", "Flash", "Modal", "Navigation", "Pagination", "Tab", "Toast", "Tooltip"] %>
+
+  <% components.each do |component| %>
+    <%= render "railsui/shared/linkable", path: eval("systems_components_#{component.downcase}_path"), title: component, description: "Documentation and examples for the #{component.downcase.singularize} component." %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/hound/_content.html.erb

@@ -0,0 +1,9 @@
+<%= render layout: "railsui/shared/linkables" do %>
+  <%= render "railsui/shared/linkable", path: systems_content_typography_path, title: "Typography", description: "Documentation and examples for typography and basic content." %>
+
+  <%= render "railsui/shared/linkable", path: systems_content_table_path, title: "Table", description: "Documentation and examples for opt-in styling of tables." %>
+
+  <%= render "railsui/shared/linkable", path: systems_content_image_path, title: "Image", description: "A starting point for styling and displaying images." %>
+
+  <%= render "railsui/shared/linkable", path: systems_scaffolds_path, title: "Scaffolds", description: "Pre-designed scaffold templates." %>
+<% end %>

data/app/views/railsui/themes/hound/_forms.html.erb

@@ -0,0 +1,17 @@
+<%= render layout: "railsui/shared/linkables" do %>
+  <%= render "railsui/shared/linkable", path: systems_forms_input_path, title: "Input", description: "The building blocks of any given form." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_input_group_path, title: "Input Group", description: "Group inputs together for tailored user experiences." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_select_path, title: "Select", description: "Fancy select fields ready for action." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_checkbox_path, title: "Checkbox".html_safe, description: "Enhance your forms with additional controls." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_radio_path, title: "Radio".html_safe, description: "Switch between multiple named options with radios." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_switch_path, title: "Switch".html_safe, description: "A nicer version of a checkbox." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_action_text_path, title: "ActionText", description: "Custom-themed ActionText UI for your rich text needs." %>
+
+  <%= render "railsui/shared/linkable", path: systems_forms_validation_path, title: "Validation", description: "Error handling UI is taken care of with Rails UI." %>
+<% end %>

data/app/views/railsui/themes/hound/_icons.html.erb

@@ -0,0 +1,125 @@
+
+<div id="icons-overview">
+<div class="prose prose-neutral mt-6 max-w-full dark:prose-invert prose-a:font-semibold prose-a:underline">
+  <p><%= link_to "Heroicons", "https://heroicons.com/", target: :_blank %> are the default icons of choice for Rails UI. We chose these icons since they are open sourced, updated regularly, and cover a vast set of scenarios in the design world.</p>
+</div>
+
+<%= render "railsui/shared/usage_guide", title: "Icon usage guide" do %>
+
+<h3>Why SVG icons?</h3>
+
+<p>There are a lot of pros to using SVG icons rather than bitmap or font-based icons. The summarized take is they are more accessible, have lighter file sizes, and can scale infinitely, which is excellent for retina screens.</p>
+
+<p>The main downside is the way we have to render them in order to have more control. SVGs are essentially vector code and can be complex and cumbersome to drop into a new view whenever you require one. Because of this we bundled another gem called <a href="https://github.com/getrailsui/railsui_icon" target="_blank">railsui_icon</a> into Rails UI that solves for icons.</p>
+
+<h3>Dependencies</h3>
+
+<p><a href="https://github.com/getrailsui/railsui_icon" target="_blank">railsui_icon</a> contains all of <a href="https://heroicons.com">heroicons.com</a> with plans to expand. The gem is already included as a dependency for each Rails UI installation.</p>
+
+<h4 class="dark:text-slate-200">Options</h4>
+<ul>
+  <li>
+    <code>:variant</code> &mdash; Pass a style of icon you would like to render. (Defaults to <code>:outline</code>. Options include <code>:outline</code>,<code>:solid</code>, <code>:micro</code>, and <code>:mini</code>).
+  </li>
+  <li>
+    <code>:class</code> &mdash; Add CSS classes here. <code>stroke-current</code> and <code>stroke-fill</code> are appended by default based on the <code>:variant</code> option.
+  </li>
+  <li>
+    <code>:custom_path</code> &mdash; Pass a custom path to an icon. Treat paths as relative. A forward slash prefix is required: <code>/icon_name.svg</code>.
+  </li>
+</ul>
+
+<h3>Usage</h3>
+
+<p>Using and rendering a new icon is quite simple and doesn't pollute your markup. The default style is outline but you can render different variants as necessary. </p>
+
+<div class="not-prose">
+<% content_for :bash, flush: true do %>
+
+<% end %>
+
+<% content_for :ruby, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+  <%%= icon "academic-cap", class: "w-5 h-5 text-indigo-600" %>
+<% end %>
+<%= render_snippet active_tab: "erb", erb_filename: "index.html.erb" %>
+  </div>
+
+  <h3>Custom icons</h3>
+  <p>Need to add some of your own icons? You can add those to <code>app/assets/images</code>.</p>
+
+  <p>If you require something more custom, use the <code>custom_path</code> option to pass a unique path to the helper for rendering. Treat paths as relative. A forward slash prefix is required: <code>/icon_name.svg</code>.</p>
+
+<div class="not-prose">
+<% content_for :bash, flush: true do %>
+
+<% end %>
+
+<% content_for :ruby, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+  <%%= icon "eye-close", custom_path: "/eye-close.svg", class: "w-10 h-10 stroke-current text-pink-400" %>
+<% end %>
+<%= render_snippet active_tab: "erb" %>
+</div>
+<% end %>
+</div>
+
+<div id="icons-solid" class="my-10">
+  <div class="mb-6">
+    <%= render "railsui/shared/code_example_heading", title: "Icons", subtitle: "Solid" %>
+  </div>
+
+    <div class="grid grid-cols-4 md:grid-cols-5 lg:grid-cols-7 items-center justify-between sm:gap-4 gap-2 w-full">
+    <% @icon_names.each do |icon_name| %>
+      <div>
+        <div class="flex items-center justify-center size-20 rounded border border-slate-300 shadow-xs bg-white relative group hover:shadow-primary-500/20 hover:border-primary-300 dark:bg-neutral-900 dark:border-neutral-700/80 dark:shadow-neutral-500/20" data-controller="railsui-clipboard">
+          <%= icon icon_name, class: "fill-current text-slate-500 w-auto h-6 group-hover:transform group-hover:scale-125 transition ease-in-out duration-300 group-hover:text-primary-500 dark:text-white dark:group-hover:text-white", variant: :solid %>
+          <button class="block w-5 h-5 absolute right-1 bottom-1" type="button" data-action="click->railsui-clipboard#copy" aria-label="Copy icon label">
+            <%= icon "square-2-stack", class: "w-5 dark:text-slate-200 text-slate-400 opacity-0 group-hover:opacity-100 transition ease-in-out duration-300 group-hover:text-primary-500 dark:group-hover:text-primary-300" %>
+          </button>
+          <span class="hidden" data-railsui-clipboard-target="content"><%= icon_name %></span>
+        </div>
+        <div class="my-2 text-xs text-neutral-600 dark:text-neutral-100 truncate sm:max-w-[100px]"><%= icon_name %></div>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<div id="icons-outline" class="my-10">
+  <div class="mb-6">
+    <%= render "railsui/shared/code_example_heading", title: "Icons", subtitle: "Outline" %>
+  </div>
+
+    <div class="grid grid-cols-4 md:grid-cols-5 lg:grid-cols-7 items-center justify-between sm:gap-4 gap-2 w-full">
+    <% @icon_names.each do |icon_name| %>
+      <div>
+        <div class="flex items-center justify-center size-20 rounded border border-slate-300 shadow-xs bg-white relative group hover:shadow-primary-500/20 hover:border-primary-300 dark:bg-neutral-900 dark:border-neutral-700/80 dark:shadow-neutral-500/20" data-controller="railsui-clipboard">
+          <%= icon icon_name, class: "stroke-current text-slate-500 w-auto h-6 group-hover:transform group-hover:scale-125 transition ease-in-out duration-300 group-hover:text-primary-500 dark:text-white dark:group-hover:text-white" %>
+          <button class="block w-5 h-5 absolute right-1 bottom-1" type="button" data-action="click->railsui-clipboard#copy" aria-label="Copy icon label">
+            <%= icon "square-2-stack", class: "w-5 dark:text-slate-200 text-slate-400 opacity-0 group-hover:opacity-100 transition ease-in-out duration-300 group-hover:text-primary-500 dark:group-hover:text-primary-300" %>
+          </button>
+          <span class="hidden" data-railsui-clipboard-target="content">"<%= icon_name %></span>
+        </div>
+        <div class="my-2 text-xs text-neutral-600 dark:text-neutral-100 truncate sm:max-w-[100px]"><%= icon_name %></div>
+      </div>
+    <% end %>
+    </div>
+</div>
+
+<% unless local_assigns[:hide_pagination] %>
+  <%= system_pagination(prev_path: systems_content_table_path, prev_text: "Table", next_path: systems_content_image_path, next_text: "Image") %>
+<% end %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Overview", "#icons-overview" %>
+    <%= component_link "Solid", "#icons-solid" %>
+		<%= component_link "Outline", "#icons-outline" %>
+  <% end %>
+<% end %>