railsui 3.1.4 → 3.2.0

data/app/views/railsui/themes/corgie/components/dropdown/_dropdown.html.erb

@@ -0,0 +1,24 @@
+<div data-controller="railsui-dropdown"class="relative md:inline-block block md:w-auto w-full">
+  <button type="button" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" class="btn <%= local_assigns[:class] %> pr-2.5 gap-2">
+    <%= local_assigns[:label] %>
+    <%= icon "chevron-down", class:  "size-3" %>
+  </button>
+  <div
+    class="hidden dropdown-menu top-10"
+    data-railsui-dropdown-target="menu"
+    data-transition-enter-from="opacity-0 scale-95"
+    data-transition-enter-to="opacity-100 scale-100"
+    data-transition-leave-from="opacity-100 scale-100"
+    data-transition-leave-to="opacity-0 scale-95"
+    >
+    <div>
+      <a href="#" class="dropdown-item">Bookmark</a>
+    </div>
+    <div>
+      <a href="#" class="dropdown-item">Report</a>
+    </div>
+    <div>
+      <a href="#" class="dropdown-item">Export</a>
+    </div>
+  </div>
+</div>

data/app/views/railsui/themes/corgie/components/dropdown/_dropdown_w_icon.html.erb

@@ -0,0 +1,27 @@
+<div data-controller="railsui-dropdown" class="relative md:inline-block block md:w-auto w-full">
+  <button type="button" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" class="btn <%= local_assigns[:class] %> pr-2.5 gap-2">
+    <%= local_assigns[:label] %>
+    <%= icon "chevron-down", class:  "size-3" %>
+  </button>
+  <div
+    class="hidden dropdown-menu top-10"
+    data-railsui-dropdown-target="menu"
+    data-transition-enter-from="opacity-0 scale-95"
+    data-transition-enter-to="opacity-100 scale-100"
+    data-transition-leave-from="opacity-100 scale-100"
+    data-transition-leave-to="opacity-0 scale-95"
+    >
+    <a href="#" class="dropdown-item">
+      <%= icon "bookmark", class:  "size-4 dark:text-neutral-200 text-neutral-600 group-hover:text-primary-600 dark:group-hover:text-primary-300 flex-shrink-0" %>
+      <span>Bookmark</span>
+    </a>
+    <a href="#" class="dropdown-item">
+      <%= icon "flag", class:  "size-4 dark:text-neutral-200 text-neutral-600 group-hover:text-primary-600 dark:group-hover:text-primary-300 flex-shrink-0" %>
+      <span>Report</span>
+    </a>
+    <a href="#" class="dropdown-item">
+      <%= icon "arrow-down-tray", class:  "size-4 dark:text-neutral-200 text-neutral-600 group-hover:text-primary-600 dark:group-hover:text-primary-300 flex-shrink-0" %>
+      <span>Export</span>
+    </a>
+  </div>
+</div>

data/app/views/railsui/themes/corgie/components/dropdown/_right_aligned.html.erb

@@ -0,0 +1,82 @@
+<div id="dropdown-right-aligned">
+  <%= render layout: example, locals: { heading: "Right aligned", section: "Dropdown" } do %>
+
+<%= render preview('neutral') do %>
+  <div data-controller="railsui-dropdown" class="relative md:inline-block block w-full md:w-auto">
+    <button type="button" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" class="btn btn-white pr-2.5 gap-2">
+      Right-aligned Dropdown Menu
+      <%= icon "chevron-down", class:  "size-3" %>
+    </button>
+    <ul
+class="hidden dropdown-menu top-10 right-0"
+data-railsui-dropdown-target="menu"
+data-transition-enter-from="opacity-0 scale-95"
+data-transition-enter-to="opacity-100 scale-100"
+data-transition-leave-from="opacity-100 scale-100"
+data-transition-leave-to="opacity-0 scale-95"
+>
+      <li>
+        <a href="#" class="dropdown-item">Bookmark</a>
+      </li>
+      <li>
+        <a href="#" class="dropdown-item">Report</a>
+      </li>
+      <li>
+        <a href="#" class="dropdown-item">Export</a>
+      </li>
+    </ul>
+  </div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-dropdown" class="relative inline-block">
+  <button type="button" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" class="btn btn-white pr-2.5 gap-2">
+    Right-aligned Dropdown Menu
+    <%%= icon "chevron-down", class:  "size-3 ml-2" %>
+  </button>
+  <ul class="hidden dropdown-menu top-10 right-0" data-railsui-dropdown-target="menu"
+    data-transition-enter-from="opacity-0 scale-95" data-transition-enter-to="opacity-100 scale-100"
+    data-transition-leave-from="opacity-100 scale-100"
+    data-transition-leave-to="opacity-0 scale-95">
+    <li>
+      <a href="#" class="dropdown-item">Bookmark</a>
+    </li>
+    <li>
+      <a href="#" class="dropdown-item">Report</a>
+    </li>
+    <li>
+      <a href="#" class="dropdown-item">Export</a>
+    </li>
+  </ul>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div data-controller="railsui-dropdown" class="relative inline-block">
+  <%%= button_tag data: { action: "click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" }, class: "btn btn-primary gap-2 pr-2.5" do %>
+    Right-aligned Dropdown Menu
+    <%%= icon "chevron-down", class:  "size-3" %>
+  <%% end %>
+  <div class="hidden dropdown-menu top-10 right-0" data-railsui-dropdown-target="menu" data-transition-enter-from="opacity-0 scale-95"
+  data-transition-enter-to="opacity-100 scale-100"
+  data-transition-leave-from="opacity-100 scale-100"
+  data-transition-leave-to="opacity-0 scale-95">
+    <div>
+      <%%= link_to "Bookmark", "#", class: "dropdown-item" %>
+    </div>
+    <div>
+      <%%= link_to "Report", "#", class: "dropdown-item" %>
+    </div>
+    <div>
+      <%%= link_to "Export", "#", class: "dropdown-item" %>
+    </div>
+  </div>
+</div>
+<% end %>
+
+
+  <%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/dropdown/_with_dividers.html.erb

@@ -0,0 +1,93 @@
+<div id="dropdown-with-dividers">
+<%= render layout: example, locals: { heading: "With dividers", section: "Dropdown" } do %>
+
+<%= render preview('neutral') do %>
+<div data-controller="railsui-dropdown" class="relative md:inline-block block md:w-auto w-full">
+  <button type="button" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" class="btn btn-white gap-2 pr-2.5">
+    Dropdown with dividers
+    <%= icon "chevron-down", class: "size-3" %>
+  </button>
+  <div
+    class="hidden dropdown-menu top-10 divide-y divide-neutral-200 dark:divide-neutral-500/75"
+    data-railsui-dropdown-target="menu"
+    data-transition-enter-from="opacity-0 scale-95"
+    data-transition-enter-to="opacity-100 scale-100"
+    data-transition-leave-from="opacity-100 scale-100"
+    data-transition-leave-to="opacity-0 scale-95"
+    >
+    <div role="none" class="pb-1">
+      <a href="#" class="dropdown-item">Edit</a>
+    </div>
+    <div role="none" class="py-1">
+      <a href="#" class="dropdown-item">Share</a>
+      <a href="#" class="dropdown-item">Export</a>
+    </div>
+    <div role="none" class="pt-1">
+      <a href="#" class="dropdown-item">Delete</a>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-dropdown" class="relative inline-block">
+  <button type="button" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" class="btn btn-white gap-2 pr-2.5">
+    Dropdown with dividers
+    <%%= icon "chevron-down", class: "size-3" %>
+  </button>
+  <div
+    class="hidden dropdown-menu top-10 divide-y divide-neutral-200 dark:divide-neutral-500/75"
+    data-railsui-dropdown-target="menu"
+    data-transition-enter-from="opacity-0 scale-95"
+    data-transition-enter-to="opacity-100 scale-100"
+    data-transition-leave-from="opacity-100 scale-100"
+    data-transition-leave-to="opacity-0 scale-95"
+    >
+    <div role="none" class="pb-1">
+      <a href="#" class="dropdown-item">Edit</a>
+    </div>
+    <div role="none" class="py-1">
+      <a href="#" class="dropdown-item">Share</a>
+      <a href="#" class="dropdown-item">Export</a>
+    </div>
+    <div role="none" class="pt-1">
+      <a href="#" class="dropdown-item">Delete</a>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div data-controller="railsui-dropdown" class="relative inline-block">
+  <%%= button_tag data: { action: "click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" }, class: "btn btn-primary gap-2 pr-2.5" do %>
+    Dropdown with dividers
+    <%%= icon "chevron-down", class: "size-3" %>
+  <%% end %>
+  <div
+    class="hidden dropdown-menu top-10 divide-y divide-neutral-200 dark:divide-neutral-500/75"
+    data-railsui-dropdown-target="menu"
+    data-transition-enter-from="opacity-0 scale-95"
+    data-transition-enter-to="opacity-100 scale-100"
+    data-transition-leave-from="opacity-100 scale-100"
+    data-transition-leave-to="opacity-0 scale-95"
+    >
+    <div role="none" class="pb-1">
+      <%%= link_to "Edit", "#", class: "dropdown-item" %>
+    </div>
+    <div role="none" class="py-1">
+      <%%= link_to "Share", "#", class: "dropdown-item" %>
+      <%%= link_to "Export", "#", class: "dropdown-item" %>
+    </div>
+    <div role="none" class="pt-1">
+      <%%= link_to "Delete", "#", class: "dropdown-item" %>
+    </div>
+  </div>
+</div>
+<% end %>
+
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/dropdown/_with_icons.html.erb

@@ -0,0 +1,85 @@
+<div id="dropdown-with-icon">
+  <%= render layout: example, locals: { heading: "With icons", section: "Dropdown" } do %>
+
+<%= render preview('neutral') do %>
+<div class="flex md:flex-row flex-col flex-wrap items-center justify-start md:space-x-3 space-x-0 space-y-3 md:space-y-0 w-full font-tiktok">
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/components/dropdown/dropdown_w_icon", label: "Dropdown", class: "btn-primary" %>
+
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/components/dropdown/dropdown_w_icon", label: "Dropdown", class: "btn-ghost" %>
+
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/components/dropdown/dropdown_w_icon", label: "Dropdown", class: "btn-white" %>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-dropdown" class="relative md:inline-block block md:w-auto w-full">
+  <button type="button" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" class="btn btn-primary pr-2.5 gap-2">
+    Dropdown
+    <%%= icon "chevron-down", class:  "size-3" %>
+  </button>
+  <ul class="hidden transition transform origin-top-right absolute left-0 top-10 bg-white rounded-lg shadow-xl shadow-neutral-900/10 border border-neutral-200 md:w-[200px] w-full z-50 py-2 dark:bg-neutral-700 dark:shadow-neutral-900/50 dark:border-neutral-500/60 md:text-sm text-base font-medium text-neutral-600 dark:text-neutral-200" data-railsui-dropdown-target="menu"
+  data-transition-enter-from="opacity-0 scale-95"
+  data-transition-enter-to="opacity-100 scale-100"
+  data-transition-leave-from="opacity-100 scale-100"
+  data-transition-leave-to="opacity-0 scale-95">
+  <li>
+    <a href="#" class="px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start gap-3">
+      <%%= icon "bookmark", class:  "size-4 dark:text-neutral-200 text-neutral-600 group-hover:text-primary-600 dark:group-hover:text-primary-300 flex-shrink-0" %>
+      <span>Bookmark</span>
+    </a>
+  </li>
+  <li>
+    <a href="#" class="px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start gap-3">
+      <%%= icon "flag", class:  "size-4 dark:text-neutral-200 text-neutral-600 group-hover:text-primary-600 dark:group-hover:text-primary-300 flex-shrink-0" %>
+      <span>Report</span>
+    </a>
+  </li>
+  <li>
+    <a href="#" class="px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start gap-3">
+      <%%= icon "arrow-down-tray", class:  "size-4 dark:text-neutral-200 text-neutral-600 group-hover:text-primary-600 dark:group-hover:text-primary-300 flex-shrink-0" %>
+      <span>Export</span>
+    </a>
+  </li>
+  </ul>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div data-controller="railsui-dropdown" class="relative md:inline-block block md:w-auto w-full">
+  <%%= button_tag data: { action: "click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" }, class: "btn btn-primary gap-2 pr-2.5" do %>
+    Dropdown
+    <%%= icon "chevron-down", class: "size-3" %>
+  <%% end %>
+  <ul class="hidden transition transform origin-top-right absolute left-0 top-10 bg-white rounded-lg shadow-xl shadow-neutral-900/10 border border-neutral-200 md:w-[200px] w-full z-50 py-2 dark:bg-neutral-700 dark:shadow-neutral-900/50 dark:border-neutral-500/60 md:text-sm text-base font-medium text-neutral-600 dark:text-neutral-200" data-railsui-dropdown-target="menu"
+  data-transition-enter-from="opacity-0 scale-95"
+  data-transition-enter-to="opacity-100 scale-100"
+  data-transition-leave-from="opacity-100 scale-100"
+  data-transition-leave-to="opacity-0 scale-95">
+    <li>
+      <%%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start gap-3" do %>
+        <%%= icon "bookmark", class: "size-4 dark:text-neutral-200 text-neutral-600 group-hover:text-primary-600 dark:group-hover:text-primary-300 flex-shrink-0" %>
+        <span>Bookmark</span>
+      <%% end %>
+    </li>
+    <li>
+      <%%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start gap-3" do %>
+        <%%= icon "flag", class: "size-4 dark:text-neutral-200 text-neutral-600 group-hover:text-primary-600 dark:group-hover:text-primary-300 flex-shrink-0" %>
+        <span>Report</span>
+      <%% end %>
+    </li>
+    <li>
+      <%%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start gap-3" do %>
+        <%%= icon "arrow-down-tray", class: "size-4 dark:text-neutral-200 text-neutral-600 group-hover:text-primary-600 dark:group-hover:text-primary-300 flex-shrink-0" %>
+        <span>Export</span>
+      <%% end %>
+    </li>
+  </ul>
+</div>
+<% end %>
+
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/dropdown/tutorial/_1.html.erb

@@ -0,0 +1,44 @@
+<h2>1. Initializing a dropdown</h2>
+
+<div class="prose prose-neutral max-w-full dark:prose-invert my-6">
+  <p>Use the <code>'data-controller="dropdown"</code> attribute to initialize a new dropdown component using <%= link_to "Stimulus.js", "https://stimulus.hotwired.dev/", target: :_blank %>.</p>
+</div>
+
+<div class="not-prose mt-6">
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-dropdown">
+  <button>Dropdown</button>
+  <div>
+    <a href="#">Menu list item 1</a>
+    <a href="#">Menu list item 2</a>
+  </div>
+</div>
+<% end %>
+
+<% content_for :js, flush: true do %>
+// Start Stimulus
+import { Application } from '@hotwired/stimulus'
+
+const application = Application.start()
+
+// Import component
+import { RailsuiDropdown } from 'railsui-stimulus'
+application.register('railsui-dropdown', RailsuiDropdown)
+<% end %>
+<%= render_snippet %>
+</div>
+
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :js, flush: true do %>
+
+<% end %>
+<div class="not-prose">
+  <%= render_snippet(active_tab: "js") %>
+</div>
+
+<div class="prose prose-neutral max-w-full dark:prose-invert my-6">
+  <p>Be sure the controller is registered inside <code>app/javascript/controllers/index.js</code>. (This should already be the case when you installed the <%= Railsui.config.theme.humanize %> theme.)</p>
+</div>

data/app/views/railsui/themes/corgie/components/dropdown/tutorial/_2.html.erb

@@ -0,0 +1,16 @@
+<h2>2. Triggering a dropdown</h2>
+
+<p>To trigger a dropdown to appear you will need some form of actionable target like a <code>button</code> or <code>a</code> element. Append the following attributes to your target. <code>data-action="railsui-dropdown#toggle click@window->railsui-dropdown#hide"</code> (see the base example below for a complete concept).</p>
+
+<div class="not-prose">
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-dropdown">
+  <button data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">Dropdown</button>
+  <div>
+    <a href="#">Menu list item 1</a>
+    <a href="#">Menu list item 2</a>
+  </div>
+</div>
+<% end %>
+<%= render_snippet %>
+</div>

data/app/views/railsui/themes/corgie/components/dropdown/tutorial/_3.html.erb

@@ -0,0 +1,16 @@
+  <h2>3. Defining the menu</h2>
+
+  <p>Each dropdown has a corresponding menu that gets hidden by default. The menu requires the following attribute to function <code>data-railsui-dropdown-target="menu"</code>. The element the target is appended to also requires the class name <code>class='hidden'</code> to be present.</p>
+
+<div class="not-prose mb-6">
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-dropdown">
+  <button data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">Dropdown</button>
+  <div class="hidden" data-railsui-dropdown-target="menu">
+    <a href="#">Menu list item 1</a>
+    <a href="#">Menu list item 2</a>
+  </div>
+</div>
+<% end %>
+<%= render_snippet %>
+</div>

data/app/views/railsui/themes/corgie/components/dropdown/tutorial/_4.html.erb

@@ -0,0 +1,27 @@
+<h2>4. Adding transitions and effects</h2>
+
+<p>Stimulus.js doesn't provide help in the context of animation and transitions so we reached for <%= link_to "stimulus-use", "https://stimulus-use.github.io/stimulus-use/", target: :_blank %> to help.</p>
+
+<p>Using the library you can leverage data attributes to add specific effects provided by Tailwind CSS classes at different states of a dropdown transition.</p>
+
+<div class="not-prose mb-6">
+<% content_for :js, flush: true do %>
+
+<% end %>
+
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-dropdown">
+  <button data-action="click->railsui-dropdown#toggle click@window->dropdown#hide">Dropdown</button>
+  <div
+    class="hidden"
+    data-railsui-dropdown-target="menu"
+    data-transition-enter-from="opacity-0 scale-95"
+    data-transition-enter-to="opacity-100 scale-100"
+    data-transition-leave-from="opacity-100 scale-100"
+    data-transition-leave-to="opacity-0 scale-95">
+    <a href="#">Menu list item 1</a>
+    <a href="#">Menu list item 2</a>
+  </div>
+</div>
+<% end %>
+<%= render_snippet %>

data/app/views/railsui/themes/corgie/components/dropdown/tutorial/_dependencies.html.erb

@@ -0,0 +1,3 @@
+<%= render callout do %>
+<p class="m-0 ml-2"><a href="https://stimulus.hotwired.dev/" target="_blank">Stimulus.js</a>, <a href="https://github.com/stimulus-use/stimulus-use">stimulus-use</a>, and <a href="https://github.com/getrailsui/railsui-stimulus">railsui-stimulus</a> are <strong>already installed</strong> as dependencies of the <%= Railsui::config.theme.titleize %> theme.</p>
+<% end %>

data/app/views/railsui/themes/corgie/components/dropdown/tutorial/_tutorial.html.erb

@@ -0,0 +1,25 @@
+<div id="dropdown-usage">
+<%= render "railsui/shared/usage_guide", title: "Dropdown usage guide" do %>
+  <p class="pt-10">The short-form tutorial below represents how to pair Rails UI, Stimulus.js, and Ruby on Rails together to achieve a dropdown pattern using a set of elements working together.</p>
+
+  <% tutorial_path = "railsui/themes/#{Railsui.config.theme.downcase}/components/dropdown/tutorial" %>
+
+  <%= render "#{tutorial_path}/dependencies" %>
+
+  <hr class="border-neutral-200/50">
+
+  <%= render "#{tutorial_path}/1" %>
+
+  <hr class="border-neutral-200/50">
+
+  <%= render "#{tutorial_path}/2" %>
+
+  <hr class="border-neutral-200/50">
+
+  <%= render "#{tutorial_path}/3" %>
+
+  <hr class="border-neutral-200/50">
+
+  <%= render "#{tutorial_path}/4" %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/flash/_alert.html.erb

@@ -0,0 +1,29 @@
+<div id="flash-alert">
+<%= render layout: example, locals: { heading: "Alert", section: "Flash" } do %>
+
+<%= render preview('neutral') do %>
+<div class="bg-red-600 text-white text-center p-4" role="alert">
+  <p>A message commonly displayed when an error or exception occurs.</p>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="bg-red-600 text-white text-center p-4" role="alert">
+  <p>A message commonly displayed when an error or exception occurs.</p>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%% if notice %>
+<div class="bg-red-600 text-white text-center p-4" role="alert">
+  <p><%%= sanitize notice %></p>
+</div>
+<%% end %>
+<% end %>
+
+
+  <%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/flash/_dynamic.html.erb

@@ -0,0 +1,46 @@
+<div id="flash-dynamic">
+<%= render layout: example, locals: { heading: "Dynamic", section: "Flash" } do %>
+  <div class="prose dark:prose-invert max-w-full mb-6">
+    <p>For some flash messages you may want to have them hide after a brief period. This requires JavaScript but is fairly simple to implement with Stimulus.js or Vanilla JavaScript.</p>
+  </div>
+
+<%= render preview('neutral') do %>
+<div class="bg-neutral-200 text-neutral-700 text-center p-4" role="alert" data-controller="railsui-flash">
+   <p>A message commonly displayed after something changes.</p>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="bg-neutral-200 text-neutral-700 text-center p-4" role="alert" data-controller="railsui-flash">
+  <p>A message commonly displayed after something changes.</p>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%% if notice %>
+<div class="bg-neutral-200 text-neutral-700 text-center p-4" role="alert" data-controller="railsui-flash">
+  <p><%%= sanitize notice %></p>
+</div>
+<%% end %>
+<% end %>
+
+
+<% content_for :js, flush: true do %>
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    if (this.element) {
+      setTimeout(() => {
+        this.element.remove()
+      }, 4000)
+    }
+  }
+}
+<% end %>
+
+  <%= render_snippet active_tab: "js", js_filename: "railsui_flash_controller.js" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/flash/_notice.html.erb

@@ -0,0 +1,29 @@
+<div id="flash-notice">
+<%= render layout: example, locals: { heading: "Notice", section: "Flash" } do %>
+
+<%= render preview('neutral') do %>
+<div class="bg-neutral-200 text-neutral-700 text-center p-4" role="alert">
+  <p>A message commonly displayed after something changes.</p>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="bg-neutral-200 text-neutral-700 text-center p-4" role="alert">
+  <p>A message commonly displayed after something changes.</p>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%% if notice %>
+<div class="bg-neutral-200 text-neutral-700 text-center p-4" role="alert">
+  <p><%%= sanitize notice %></p>
+</div>
+<%% end %>
+<% end %>
+
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>