railsui 3.1.4 → 3.2.0

data/app/views/railsui/systems/forms/form_builder.html.erb

@@ -0,0 +1,171 @@
+<% content_for :head do %>
+  <script type="text/javascript" src="https://unpkg.com/trix@2.0.0/dist/trix.umd.min.js"></script>
+<% end %>
+
+<% content_for :header_description do %>
+<p>An optional Form Builder that applys consistent styling to your elements.</p>
+<% end %>
+
+<%= render "railsui/shared/header" %>
+
+<div class="prose dark:prose-invert">
+  <p>The Rails UI Form Builder extends the Ruby on Rails default form builder to automatically apply theme-appropriate CSS classes to all form elements based on your active theme (your active theme is <code><%= Railsui.config.theme.humanize %></code>). It provides a consistent, accessible, and beautiful form experience across your application with less key strokes and more consistency.</p>
+
+  <h2>Setup</h2>
+  <p>The Rails UI Form Builder is available when Rails UI is installed. Simply pass it as the <code>builder</code> parameter to your forms.</p>
+
+
+  <h2>Basic Usage</h2>
+  <p>Add <code>builder: Railsui::FormBuilder</code> to your <code>form_with</code> helper to apply automatic styling:</p>
+
+<div class="not-prose">
+<% content_for :erb, flush: true do %>
+<%%= form_with model: @user, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.text_field :name, label: "Full Name" %>
+  <%%= f.email_field :email, help: "We'll never share your email" %>
+  <%%= f.submit %>
+<%% end %>
+<% end %>
+<%= render_snippet active_tab: :erb %>
+</div>
+
+
+<div id="form-builder-field-options">
+<h2>Field Options</h2>
+<p>Rails UI Form Builder fields accept various options to customize their appearance and behavior:</p>
+
+<h3>Universal Options</h3>
+<p>These options are available for all field types:</p>
+
+<div class="not-prose">
+<table class="table-auto w-full border-collapse border border-neutral-300 dark:border-neutral-600 text-sm">
+  <thead>
+    <tr class="bg-neutral-50 dark:bg-neutral-800">
+      <th class="border border-neutral-300 dark:border-neutral-600 px-4 py-2 text-left font-semibold">Option</th>
+      <th class="border border-neutral-300 dark:border-neutral-600 px-4 py-2 text-left font-semibold">Type</th>
+      <th class="border border-neutral-300 dark:border-neutral-600 px-4 py-2 text-left font-semibold">Description</th>
+      <th class="border border-neutral-300 dark:border-neutral-600 px-4 py-2 text-left font-semibold">Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>label</code></td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">String or false</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">Sets label text or hides label</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>label: "Full Name"</code></td>
+    </tr>
+    <tr>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>placeholder</code></td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">String</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">Input placeholder text</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>placeholder: "John Doe"</code></td>
+    </tr>
+    <tr>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>help</code></td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">String</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">Help text below field</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>help: "We'll never share this"</code></td>
+    </tr>
+    <tr>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>class</code></td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">String</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">Custom CSS classes for input</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>class: "form-input text-lg"</code></td>
+    </tr>
+    <tr>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>wrapper</code></td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">Hash</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">Options for wrapper div</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>wrapper: { class: "max-w-md" }</code></td>
+    </tr>
+    <tr>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>label_options</code></td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">Hash</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">Options for label element</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>label_options: { class: "text-blue-600" }</code></td>
+    </tr>
+    <tr>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>skip_label</code></td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">Boolean</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">Skip rendering label entirely</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>skip_label: true</code></td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+<h3>Field-Specific Options</h3>
+
+<div class="not-prose">
+<table class="table-auto w-full border-collapse border border-neutral-300 dark:border-neutral-600 text-sm">
+  <thead>
+    <tr class="bg-neutral-50 dark:bg-neutral-800">
+      <th class="border border-neutral-300 dark:border-neutral-600 px-4 py-2 text-left font-semibold">Field Type</th>
+      <th class="border border-neutral-300 dark:border-neutral-600 px-4 py-2 text-left font-semibold">Additional Options</th>
+      <th class="border border-neutral-300 dark:border-neutral-600 px-4 py-2 text-left font-semibold">Example</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>text_area</code></td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>rows</code> - Number of visible lines</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>rows: 4</code></td>
+    </tr>
+    <tr>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>number_field</code></td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>min</code>, <code>max</code> - Value limits</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>min: 0, max: 100</code></td>
+    </tr>
+    <tr>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>range_field</code></td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>min</code>, <code>max</code>, <code>value</code> - Range settings</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>min: 0, max: 100, value: 25</code></td>
+    </tr>
+    <tr>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>select</code></td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2">Standard Rails select parameters plus Rails UI options</td>
+      <td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>{ prompt: "Choose..." }, { label: "Country" }</code></td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+<h3>Default CSS Classes</h3>
+
+<div class="not-prose">
+<table class="table-auto w-full border-collapse border border-neutral-300 dark:border-neutral-600 text-sm">
+  <thead>
+    <tr class="bg-neutral-50 dark:bg-neutral-800">
+      <th class="border border-neutral-300 dark:border-neutral-600 px-4 py-2 text-left font-semibold">Field Type</th>
+      <th class="border border-neutral-300 dark:border-neutral-600 px-4 py-2 text-left font-semibold">Default CSS Class</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>text_field</code>, <code>email_field</code>, <code>password_field</code>, etc.</td><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>form-input</code></td></tr>
+    <tr><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>text_area</code></td><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>form-textarea</code></td></tr>
+    <tr><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>rich_text_area</code></td><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>trix-content</code></td></tr>
+    <tr><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>select</code></td><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>form-select</code></td></tr>
+    <tr><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>check_box</code></td><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>form-input-checkbox</code></td></tr>
+    <tr><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>radio_button</code></td><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>form-input-radio</code></td></tr>
+    <tr><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>switch_field</code></td><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>form-input-switch</code></td></tr>
+    <tr><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>file_field</code></td><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>form-file</code></td></tr>
+    <tr><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>range_field</code></td><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>form-input-range</code></td></tr>
+    <tr><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>color_field</code></td><td class="border border-neutral-300 dark:border-neutral-600 px-4 py-2"><code>form-input-color</code></td></tr>
+  </tbody>
+</table>
+</div>
+
+<p><strong>Automatic Features:</strong></p>
+<ul>
+  <li>Error states automatically add <code>form-input-error</code> class</li>
+  <li>Required fields (with presence validators) get required styling</li>
+  <li>Labels automatically use <code>form-label</code> class</li>
+  <li>Help text automatically uses <code>form-help</code> class</li>
+  <li>Wrapper divs automatically use <code>form-group</code> class</li>
+</ul>
+
+<h2>Examples</h2>
+</div>
+</div>
+
+<%= render "railsui/themes/#{Railsui.config.theme}/forms/form_builder" %>

data/app/views/railsui/themes/corgie/_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/corgie/_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/corgie/_forms.html.erb

@@ -0,0 +1,19 @@
+<%= render layout: "railsui/shared/linkables" do %>
+  <%= render "railsui/shared/linkable", path: systems_forms_form_builder_path, title: "Form Builder", description: "Automatically styled Rails forms with the Rails UI form builder." %>
+
+  <%= 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/corgie/_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-neutral-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-neutral-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-neutral-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-neutral-200 text-neutral-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-neutral-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-neutral-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-neutral-200 text-neutral-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 %>

data/app/views/railsui/themes/corgie/_nav.html.erb

@@ -0,0 +1,166 @@
+<div class="text-[14px] relative pb-4 pl-4">
+  <ul>
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mb-1 text-[14px]">Content</p>
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <%= system_nav_item(label: "Typography", path:  systems_content_typography_path) %>
+
+        <%= system_nav_item(label: "Table", path:  systems_content_table_path) %>
+
+        <%= system_nav_item(label: "Icon", path:  systems_icons_path) %>
+
+        <%= system_nav_item(label: "Image", path:  systems_content_image_path) %>
+
+        <%= system_nav_item(label: "Scaffold", path:  systems_scaffolds_path) %>
+      </ul>
+    </li>
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Forms</p>
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+
+        <%= system_nav_item(label: "Form Builder", path:  systems_forms_form_builder_path) %>
+
+        <%= system_nav_item(label: "Input", path:  systems_forms_input_path) %>
+
+        <%= system_nav_item(label: "Input Group", path:  systems_forms_input_group_path) %>
+
+        <%= system_nav_item(label: "Select", path:  systems_forms_select_path) %>
+
+        <%= system_nav_item(label: "Checkbox", path:  systems_forms_checkbox_path) %>
+
+        <%= system_nav_item(label: "Radio", path:  systems_forms_radio_path) %>
+
+        <%= system_nav_item(label: "Switch", path:  systems_forms_switch_path) %>
+
+        <%= system_nav_item(label: "ActionText", path:  systems_forms_action_text_path) %>
+
+        <%= system_nav_item(label: "Validation", path:  systems_forms_validation_path) %>
+      </ul>
+    </li>
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Components</p>
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+
+        <%= system_nav_item(label: "Accordion", path:  systems_components_accordion_path) %>
+
+        <%= system_nav_item(label: "Alert", path:  systems_components_alert_path) %>
+
+        <%= system_nav_item(label: "Avatar", path:  systems_components_avatar_path) %>
+
+        <%= system_nav_item(label: "Badge", path:  systems_components_badge_path) %>
+
+        <%= system_nav_item(label: "Breadcrumb", path:  systems_components_breadcrumb_path) %>
+
+        <%= system_nav_item(label: "Button", path:  systems_components_button_path) %>
+
+        <%= system_nav_item(label: "Card", path:  systems_components_card_path) %>
+
+        <%= system_nav_item(label: "Combobox", path:  systems_components_combobox_path) %>
+
+        <%= system_nav_item(label: "Dropdown", path:  systems_components_dropdown_path) %>
+
+        <%= system_nav_item(label: "Flash", path:  systems_components_flash_path) %>
+
+        <%= system_nav_item(label: "Modal", path:  systems_components_modal_path) %>
+
+        <%= system_nav_item(label: "Navigation", path:  systems_components_navigation_path) %>
+
+        <%= system_nav_item(label: "Pagination", path:  systems_components_pagination_path) %>
+
+        <%= system_nav_item(label: "Tab", path:  systems_components_tab_path) %>
+
+        <%= system_nav_item(label: "Toast", path:  systems_components_toast_path) %>
+
+        <%= system_nav_item(label: "Tooltip", path:  systems_components_tooltip_path) %>
+      </ul>
+    </li>
+
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Authentication</p>
+
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <%= system_nav_item(label: "Overview", path:  systems_authentication_overview_path) %>
+      </ul>
+
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <details class="marker:content-[''] group" <%= "open" if controller_name == "devise" %>>
+          <summary class="py-2 px-3 hover:bg-neutral-100/80 flex items-center justify-between dark:hover:bg-neutral-700/80">
+            <p class="font-medium">Devise</p>
+            <%= icon "plus", class: "size-4 stroke-neutral-400 group-open:hidden" %>
+            <%= icon "minus", class: "size-4 stroke-neutral-400 hidden group-open:block" %>
+          </summary>
+          <ul class="ml-2">
+            <%= system_nav_item(label: "Overview", path:  systems_authentication_devise_overview_path) %>
+
+            <%= system_nav_item(label: "Sign up", path:  systems_authentication_devise_signup_path) %>
+
+            <%= system_nav_item(label: "Sign in", path:  systems_authentication_devise_signin_path) %>
+
+            <%= system_nav_item(label: "Change password", path:  systems_authentication_devise_change_password_path) %>
+
+            <%= system_nav_item(label: "Reset password", path: systems_authentication_devise_reset_password_path) %>
+
+            <%= system_nav_item(label: "Confirmation", path:  systems_authentication_devise_confirmation_path) %>
+
+            <%= system_nav_item(label: "Edit account", path:  systems_authentication_devise_edit_path) %>
+
+            <%= system_nav_item(label: "Unlock", path:  systems_authentication_devise_unlocks_path) %>
+          </ul>
+        </details>
+
+        <details class="marker:content-[''] group" <%= "open" if controller_name == "static" %>>
+          <summary class="py-2 px-3 hover:bg-neutral-100/80 flex items-center justify-between dark:hover:bg-neutral-700/80">
+            <p class="font-medium">Static</p>
+            <%= icon "plus", class: "size-4 stroke-neutral-400 group-open:hidden" %>
+            <%= icon "minus", class: "size-4 stroke-neutral-400 hidden group-open:block" %>
+          </summary>
+          <ul class="ml-2">
+            <%= system_nav_item(label: "Overview", path:  systems_authentication_static_overview_path) %>
+
+            <%= system_nav_item(label: "Sign up", path:  systems_authentication_static_signup_path) %>
+
+            <%= system_nav_item(label: "Sign in", path:  systems_authentication_static_signin_path) %>
+
+            <%= system_nav_item(label: "Change password", path:  systems_authentication_static_change_password_path) %>
+
+            <%= system_nav_item(label: "Reset password", path: systems_authentication_static_reset_password_path) %>
+
+            <%= system_nav_item(label: "Confirmation", path:  systems_authentication_static_confirmation_path) %>
+
+            <%= system_nav_item(label: "Unlock", path:  systems_authentication_static_unlocks_path) %>
+          </ul>
+        </details>
+      </ul>
+    </li>
+
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Mailers</p>
+
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <%= system_nav_item(label: "Overview", path:  systems_mailers_overview_path) %>
+
+        <%= system_nav_item(label: "Layout", path:  systems_mailers_layout_path) %>
+
+        <%= system_nav_item(label: "Minimal", path:  systems_mailers_minimal_path) %>
+
+        <%= system_nav_item(label: "Promotion", path:  systems_mailers_promotion_path) %>
+
+        <%= system_nav_item(label: "Transactional", path:  systems_mailers_transactional_path) %>
+
+        <%= system_nav_item(label: "Devise", path:  systems_mailers_devise_path) %>
+      </ul>
+    </li>
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Helpers</p>
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <%= system_nav_item(label: "Overview", path:  systems_helpers_overview_path) %>
+        <%= system_nav_item(label: "Icon", path:  systems_helpers_icon_path) %>
+        <%= system_nav_item(label: "Nav Link", path:  systems_helpers_nav_link_path) %>
+        <%= system_nav_item(label: "Email Action", path:  systems_helpers_email_action_path) %>
+        <%= system_nav_item(label: "Email Callout", path:  systems_helpers_email_callout_path) %>
+        <%= system_nav_item(label: "Email Spacer", path:  systems_helpers_spacer_path) %>
+        <%= system_nav_item(label: "Demo Avatar", path:  systems_helpers_demo_avatar_path) %>
+        <%= system_nav_item(label: "Rails UI Head", path:  systems_helpers_railsui_head_path) %>
+    </li>
+  </ul>
+</div>

data/app/views/railsui/themes/corgie/_scaffolds.html.erb

@@ -0,0 +1,42 @@
+
+<div id="scaffolds-overview" class="prose dark:prose-invert my-6 max-w-full">
+  <p>Rails UI supplies pre-designed scaffolds in addition to the Rails defaults. To accomplish this you can run an alternative generator when scaffolding a new resource.</p>
+
+  <h3>Custom scaffold generator</h3>
+  <div class="not-prose">
+    <% content_for :bash, flush: true do %>
+    rails generate railsui:scaffold ModelName
+    <% end %>
+    <%= render_snippet active_tab: "bash" %>
+  </div>
+
+  <p>The custom scaffold generator performs the same function as the default but uses alternative view templates when generating. Below is an example of each template for the <%= Railsui.config.theme.humanize %> theme.</p>
+
+</div>
+
+<% content_for :bash, flush: true do %>
+
+<% end %>
+
+<%= render callout do %>
+  <p><strong>Note</strong>: Changing your Rails UI theme will not automatically update existing scaffolds to match the new theme.</p>
+<% end %>
+
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/index" %>
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/show" %>
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/new" %>
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/edit" %>
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/partial" %>
+
+<%= system_pagination(prev_path: systems_content_image_path, prev_text: "Image", next_path: systems_forms_path, next_text: "Forms") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Overview", "#scaffolds-overview" %>
+    <%= component_link "Index", "#scaffolds-index" %>
+		<%= component_link "Show", "#scaffolds-show" %>
+    <%= component_link "New", "#scaffolds-new" %>
+    <%= component_link "Edit", "#scaffolds-edit" %>
+    <%= component_link "Partial", "#scaffolds-partial" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/authentication/_overview.html.erb

@@ -0,0 +1,5 @@
+
+<%= render layout: "railsui/shared/linkables" do %>
+  <%= render "railsui/shared/linkable", path: systems_authentication_devise_overview_path, title: "Devise", description: "Ready-to-use authentication patterns for Devise installs." %>
+  <%= render "railsui/shared/linkable", path: systems_authentication_static_overview_path, title: "Static", description: "Ready-to-use authentication patterns for generic authentication." %>
+<% end %>

data/app/views/railsui/themes/corgie/authentication/devise/_change_password.html.erb

@@ -0,0 +1,74 @@
+<%= render layout: example, locals: { heading: "Change password", section: "Authentication" } do %>
+
+<div class=" border border-neutral-200 rounded-3xl overflow-hidden dark:border-neutral-700">
+  <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+    <%= render "rui/shared/flash" %>
+    <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+      <div class="w-full max-w-sm space-y-8">
+        <div class="flex flex-col items-center justify-center gap-4">
+          <%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+            <!-- Corgie logo -->
+            <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+            <span class="h4 font-semibold">Corgie</span>
+          <% end %>
+
+          <% if content_for?(:title) %>
+            <p class="text-neutral-500 dark:text-neutral-400">
+              <%= yield :title %>
+            </p>
+          <% end %>
+        </div>
+
+        <%= form_with(url: "#", builder: Railsui::FormBuilder) do |f| %>
+          <%= f.form_group do %>
+            <%= f.password_field :password, label: "New password", placeholder: "Enter password", required: true %>
+          <% end %>
+
+          <%= f.form_group do %>
+            <%= f.password_field :password_confirmation, label: "Confirm password", placeholder: "Confirm password", required: true %>
+          <% end %>
+
+          <%= f.submit "Change password", class: "w-full btn btn-lg btn-primary" %>
+        <% end %>
+      </div>
+    </div>
+    <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+      <%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+    </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/passwords/edit.html.erb -->
+<%% content_for :title, "Change password" %>
+
+<%%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }, bulder: Railsui::FormBuilder) do |f| %>
+
+  <%%= render "rui/shared/error_messages", resource: f.object %>
+
+  <%%= f.hidden_field :reset_password_token %>
+
+  <%%= f.form_group do %>
+    <%%= f.password_field :password, label: "New password", autocomplete: "new-password, placeholder: "Enter password", required: true %>
+    <%% if @minimum_password_length
+      <%%= f.form_help "Must be at least <%%= @minimum_password_length %> characters long" %>
+    <%% end %>
+  <%% end %>
+
+  <%%= f.form_group do %>
+    <%%= f.password_field :password_confirmation, label: "Confirm password", placeholder: "Confirm password", required: true %>
+  <%% end %>
+
+  <%%= f.submit "Reset Password", class: "w-full btn btn-lg btn-primary" %>
+<%% end %>
+<% end %>
+
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_devise_signin_path, prev_text: "Sign in", next_path: systems_authentication_devise_reset_password_path, next_text: "Reset password") %>