railsui 3.1.0

data/app/views/railsui/themes/shepherd/components/_toast.html.erb

@@ -0,0 +1,79 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/toast" %>
+
+<%= render "#{path}/base" %>
+
+<div class="prose prose-neutral dark:prose-invert mb-8 max-w-full">
+
+<p>Use toasts to deliver real-time updates to a user without disrupting their flow.</p>
+
+
+<h3>Options</h3>
+
+<ul>
+  <li>
+    <code>triggerOnLoad</code>(<code>data-railsui-toast-trigger-on-load-value="true"</code>): Make the toast notification appear as soon as initialized. Defaults to <code>false</code>.
+  </li>
+</ul>
+
+<h3>CSS</h3>
+
+<p>Toasts typically enter the screen from the left or right side of the viewport. This example accounts for those two variants by extending your Tailwind Theme variables to include new animation-based CSS variables.
+</div>
+
+<div class="not-prose">
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+
+<% end %>
+
+<% content_for :haml, flush: true do %>
+
+<% end %>
+
+<% content_for :js, flush: true do %>
+
+<% end %>
+<% content_for :css, flush: true do %>
+/* Add to app/assets/stylesheets/railsui/theme.css */
+
+--animate-toast-from-right: toast-from-right 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+--animate-toast-from-left: toast-from-left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+
+@keyframes toast-from-right {
+  0% {
+    transform: translateX(50%);
+    opacity: 0%;
+  }
+
+  100% {
+    transform: translateX(0);
+    opacity: 100%;
+  }
+}
+
+@keyframes toast-from-left {
+  0% {
+    transform: translateX(-50%);
+    opacity: 0%;
+  }
+
+  100% {
+    transform: translateX(0);
+    opacity: 100%;
+  }
+}
+<% end %>
+<%= render_snippet active_tab: :css, css_filename: "theme.css" %>
+</div>
+
+
+<%= system_pagination(prev_path: systems_components_tab_path, prev_text: "Tab", next_path: systems_components_tooltip_path, next_text: "Tooltip") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Simple", "#toast-simple" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/shepherd/components/_tooltip.html.erb

@@ -0,0 +1,77 @@
+<%= render "railsui/shared/usage_guide", title: "Tooltips usage guide" do %>
+
+<p>The short-form tutorial below represents how to pair Rails UI, Stimulus.js, and Tippy.js together.</p>
+
+<h2>1. Initializing the Stimulus.js controller</h2>
+
+<p>Leverage the Railsui Tooltip Stimulus controller from <a href="https://github.com/getrailsui/railsui-stimulus" target="_blank">railsui-stimulus</a> for drop-in tooltips.</p>
+
+<div class="not-prose">
+<%= content_for :js, flush: true do %>
+// Import components adhoc.
+import { RailsuiTooltip } from 'railsui-stimulus'
+application.register('railsui-tooltip', RailsuiTooltip)
+<% end %>
+  <%= render_snippet active_tab: "js", js_filename: "index.js" %>
+</div>
+
+<h2>2. Initialize the controller in your views</h2>
+
+<p>Add the data attribute <code>data-controller='railsui-tooltip'</code> to an HTML element.</p>
+
+<div class="not-prose">
+<% content_for :js, flush: true do %>
+
+<% end %>
+<% content_for :html, flush: true do %>
+<button data-controller="railsui-tooltip" class="btn btn-primary">Tooltip demo</button>
+<% end %>
+  <%= render_snippet %>
+</div>
+
+<h2>3. Pass content to the tooltip</h2>
+
+<p>Add the data attribute <code>data-tooltip-content-value='Your content here'</code> to an HTML element. Inside the data attribute you may pass as much copy as you like.</p>
+
+<div class="not-prose">
+  <button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="This is the content inside my tooltip!" class="btn btn-primary">Tooltip demo</button>
+  <% content_for :js, flush: true do %>
+
+  <% end %>
+<% content_for :html, flush: true do %>
+<button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="This is the content inside my tooltip!" class="btn btn-primary">Tooltip demo</button>
+<% end %>
+  <%= render_snippet %>
+</div>
+
+<h3>(optional) 4. Allow HTML in content</h3>
+
+<p>Add the data attribute <code>data-tooltip-allow-html-value="true"</code> to an HTML element. Inside the data attribute pass <code>true</code> to enable the option <code>allowHTML</code> for the tippy.js library.</p>
+
+<div class="not-prose">
+  <button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="This is the <strong>bold</strong> and <u>underlined</u> content inside my tooltip!" data-railsui-tooltip-allow-html-value="true" class="btn btn-primary">Tooltip with HTML demo</button>
+
+
+<% content_for :js, flush: true do %>
+
+<% end %>
+
+<% content_for :html, flush: true do %>
+<button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="This is the <strong>bold</strong> and <u>underlined</u> content inside my tooltip!" data-railsui-tooltip-allow-html-value="true" class="btn btn-primary">Tooltip with HTML demo</button>
+<% end %>
+
+<%= render_snippet %>
+</div>
+<% end %>
+
+<% path = "railsui/themes/#{Railsui.config.theme}/components/tooltip" %>
+
+<%= render "#{path}/base" %>
+
+<%= system_pagination(prev_path: systems_components_toast_path, prev_text: "Toast", next_path: systems_authentication_overview_path, next_text: "Authentication") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Base", "#tooltip-base" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/shepherd/components/accordion/_contained.html.erb

@@ -0,0 +1,160 @@
+<div id="accordion-contained">
+<%= render layout: example, locals: { heading: "Contained", section: "Accordion" } do %>
+
+<%= render preview "zinc" do %>
+<dl class="my-6 divide-y divide-zinc-100 rounded-lg shadow-xl shadow-zinc-100/50 border border-zinc-200 dark:divide-zinc-700 dark:border-zinc-700 dark:shadow-black/20">
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium font-heading leading-7 text-zinc-900 group-open:text-primary-500 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the first accordion item
+      <%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-600 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque explicabo voluptates odio atque reiciendis, dolore magni quos quibusdam numquam, ad distinctio minima reprehenderit nemo harum, in perferendis delectus tempora. <a href="#">Test</a>
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium font-heading leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the second accordion item
+      <%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates maxime temporibus porro aut quis adipisci aliquid vitae labore modi harum facere, commodi molestiae repellat dicta eos officiis enim quae ullam.
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium font-heading leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the third accordion item
+      <%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus excepturi aliquam quod deleniti sit mollitia at? Voluptates suscipit, perspiciatis fuga nesciunt atque, repellat minus distinctio iure cupiditate tenetur ipsam voluptatem?
+      </div>
+    </div>
+  </details>
+</dl>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<dl class="my-6 divide-y divide-zinc-100 rounded-lg shadow-xl shadow-zinc-100/50 border border-zinc-200 dark:divide-zinc-700 dark:border-zinc-700 dark:shadow-black/20">
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium font-heading leading-7 text-zinc-900 group-open:text-primary-500 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the first accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-600 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque explicabo voluptates odio atque reiciendis, dolore magni quos quibusdam numquam, ad distinctio minima reprehenderit nemo harum, in perferendis delectus tempora. <a href="#">Test</a>
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium font-heading leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the second accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates maxime temporibus porro aut quis adipisci aliquid vitae labore modi harum facere, commodi molestiae repellat dicta eos officiis enim quae ullam.
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium font-heading leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the third accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus excepturi aliquam quod deleniti sit mollitia at? Voluptates suscipit, perspiciatis fuga nesciunt atque, repellat minus distinctio iure cupiditate tenetur ipsam voluptatem?
+      </div>
+    </div>
+  </details>
+</dl>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<dl class="my-6 divide-y divide-zinc-100 rounded-lg shadow-xl shadow-zinc-100/50 border border-zinc-200 dark:divide-zinc-700 dark:border-zinc-700 dark:shadow-black/20">
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium font-heading leading-7 text-zinc-900 group-open:text-primary-500 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the first accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-600 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque explicabo voluptates odio atque reiciendis, dolore magni quos quibusdam numquam, ad distinctio minima reprehenderit nemo harum, in perferendis delectus tempora. <a href="#">Test</a>
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium font-heading leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the second accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates maxime temporibus porro aut quis adipisci aliquid vitae labore modi harum facere, commodi molestiae repellat dicta eos officiis enim quae ullam.
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium font-heading leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the third accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus excepturi aliquam quod deleniti sit mollitia at? Voluptates suscipit, perspiciatis fuga nesciunt atque, repellat minus distinctio iure cupiditate tenetur ipsam voluptatem?
+      </div>
+    </div>
+  </details>
+</dl>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+%dl.my-6.divide-y.divide-zinc-100.rounded-lg.shadow-xl.border.border-zinc-200.dark:divide-zinc-700.dark:border-zinc-700(class="shadow-zinc-100/50 dark:shadow-black/20")
+  %details.group.p-4(class="marker:content-['']")
+    %summary.flex.w-full.cursor-pointer.select-none.justify-between.text-left.text-base.font-medium.font-heading.leading-7.text-zinc-900.group-open:text-primary-500.dark:group-open:text-primary-300.dark:text-white(class="[&::-webkit-details-marker]:hidden")
+      This is the first accordion item
+      \#{icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-600 dark:group-open:text-primary-400 group-open:hidden block"}
+      \#{icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden"}
+    .pt-6.pb-6
+      .prose.prose-zinc.max-w-none.prose-a:font-semibold.prose-a:text-primary-600.hover:prose-a:text-primary-500.dark:prose-a:text-primary-400.dark:hover:prose-a:text-primary-300(class="dark:prose-invert")
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque explicabo voluptates odio atque reiciendis, dolore magni quos quibusdam numquam, ad distinctio minima reprehenderit nemo harum, in perferendis delectus tempora.
+        %a(href="#") Test
+  %details.group.p-4(class="marker:content-['']")
+    %summary.flex.w-full.cursor-pointer.select-none.justify-between.text-left.text-base.font-medium.font-heading.leading-7.text-zinc-900.group-open:text-primary-600.dark:group-open:text-primary-300.dark:text-white(class="[&::-webkit-details-marker]:hidden")
+      This is the second accordion item
+      \#{icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block"}
+      \#{icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden"}
+    .pt-6.pb-6
+      .prose.prose-zinc.max-w-none.prose-a:font-semibold.prose-a:text-primary-600.hover:prose-a:text-primary-500.dark:prose-a:text-primary-400.dark:hover:prose-a:text-primary-300(class="dark:prose-invert")
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates maxime temporibus porro aut quis adipisci aliquid vitae labore modi harum facere, commodi molestiae repellat dicta eos officiis enim quae ullam.
+  %details.group.p-4(class="marker:content-['']")
+    %summary.flex.w-full.cursor-pointer.select-none.justify-between.text-left.text-base.font-medium.font-heading.leading-7.text-zinc-900.group-open:text-primary-600.dark:group-open:text-primary-300.dark:text-white(class="[&::-webkit-details-marker]:hidden")
+      This is the third accordion item
+      \#{icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block"}
+      \#{icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden"}
+    .pt-6.pb-6
+      .prose.prose-zinc.max-w-none.prose-a:font-semibold.prose-a:text-primary-600.hover:prose-a:text-primary-500.dark:prose-a:text-primary-400.dark:hover:prose-a:text-primary-300(class="dark:prose-invert")
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus excepturi aliquam quod deleniti sit mollitia at? Voluptates suscipit, perspiciatis fuga nesciunt atque, repellat minus distinctio iure cupiditate tenetur ipsam voluptatem?
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/shepherd/components/accordion/_flush.html.erb

@@ -0,0 +1,159 @@
+<div id="accordion-flush">
+<%= render layout: example, locals: { heading: "Flush", section: "Accordion" } do %>
+
+<%= render preview "zinc" do %>
+<dl class="my-6 divide-y divide-zinc-100 dark:divide-zinc-700">
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white font-heading">
+      This is the first accordion item
+      <%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="py-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque explicabo voluptates odio atque reiciendis, dolore magni quos quibusdam numquam, ad distinctio minima reprehenderit nemo harum, in perferendis delectus tempora.
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white font-heading">
+      This is the second accordion item
+      <%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="py-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates maxime temporibus porro aut quis adipisci aliquid vitae labore modi harum facere, commodi molestiae repellat dicta eos officiis enim quae ullam.
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white font-heading">
+      This is the third accordion item
+      <%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="py-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus excepturi aliquam quod deleniti sit mollitia at? Voluptates suscipit, perspiciatis fuga nesciunt atque, repellat minus distinctio iure cupiditate tenetur ipsam voluptatem?
+      </div>
+    </div>
+  </details>
+</dl>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<dl class="my-6 divide-y divide-zinc-100 dark:divide-zinc-700">
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white font-heading">
+      This is the first accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="py-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque explicabo voluptates odio atque reiciendis, dolore magni quos quibusdam numquam, ad distinctio minima reprehenderit nemo harum, in perferendis delectus tempora.
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white font-heading">
+      This is the second accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="py-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates maxime temporibus porro aut quis adipisci aliquid vitae labore modi harum facere, commodi molestiae repellat dicta eos officiis enim quae ullam.
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white font-heading">
+      This is the third accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="py-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus excepturi aliquam quod deleniti sit mollitia at? Voluptates suscipit, perspiciatis fuga nesciunt atque, repellat minus distinctio iure cupiditate tenetur ipsam voluptatem?
+      </div>
+    </div>
+  </details>
+</dl>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<dl class="my-6 divide-y divide-zinc-100 dark:divide-zinc-700">
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white font-heading">
+      This is the first accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="py-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque explicabo voluptates odio atque reiciendis, dolore magni quos quibusdam numquam, ad distinctio minima reprehenderit nemo harum, in perferendis delectus tempora.
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white font-heading">
+      This is the second accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="py-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates maxime temporibus porro aut quis adipisci aliquid vitae labore modi harum facere, commodi molestiae repellat dicta eos officiis enim quae ullam.
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-medium leading-7 text-zinc-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white font-heading">
+      This is the third accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="py-6">
+      <div class="prose prose-zinc dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus excepturi aliquam quod deleniti sit mollitia at? Voluptates suscipit, perspiciatis fuga nesciunt atque, repellat minus distinctio iure cupiditate tenetur ipsam voluptatem?
+      </div>
+    </div>
+  </details>
+</dl>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+%dl.my-6.divide-y.divide-zinc-100.dark:divide-zinc-700
+  %details.group.p-4(class="marker:content-['']")
+    %summary.flex.w-full.cursor-pointer.select-none.justify-between.text-left.text-base.font-medium.leading-7.text-zinc-900.group-open:text-primary-600.dark:group-open:text-primary-300.dark:text-white.font-heading(class="[&::-webkit-details-marker]:hidden")
+      This is the first accordion item
+      \#{icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block"}
+      \#{icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden"}
+    .py-6
+      .prose.prose-zinc.max-w-none.prose-a:font-semibold.prose-a:text-primary-600.hover:prose-a:text-primary-500.dark:prose-a:text-primary-400.dark:hover:prose-a:text-primary-300(class="dark:prose-invert")
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque explicabo voluptates odio atque reiciendis, dolore magni quos quibusdam numquam, ad distinctio minima reprehenderit nemo harum, in perferendis delectus tempora.
+  %details.group.p-4(class="marker:content-['']")
+    %summary.flex.w-full.cursor-pointer.select-none.justify-between.text-left.text-base.font-medium.leading-7.text-zinc-900.group-open:text-primary-600.dark:group-open:text-primary-300.dark:text-white.font-heading(class="[&::-webkit-details-marker]:hidden")
+      This is the second accordion item
+      \#{icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block"}
+      \#{icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden"}
+    .py-6
+      .prose.prose-zinc.max-w-none.prose-a:font-semibold.prose-a:text-primary-600.hover:prose-a:text-primary-500.dark:prose-a:text-primary-400.dark:hover:prose-a:text-primary-300(class="dark:prose-invert")
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates maxime temporibus porro aut quis adipisci aliquid vitae labore modi harum facere, commodi molestiae repellat dicta eos officiis enim quae ullam.
+  %details.group.p-4(class="marker:content-['']")
+    %summary.flex.w-full.cursor-pointer.select-none.justify-between.text-left.text-base.font-medium.leading-7.text-zinc-900.group-open:text-primary-600.dark:group-open:text-primary-300.dark:text-white.font-heading(class="[&::-webkit-details-marker]:hidden")
+      This is the third accordion item
+      \#{icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block"}
+      \#{icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-zinc-600 dark:text-zinc-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden"}
+    .py-6
+      .prose.prose-zinc.max-w-none.prose-a:font-semibold.prose-a:text-primary-600.hover:prose-a:text-primary-500.dark:prose-a:text-primary-400.dark:hover:prose-a:text-primary-300(class="dark:prose-invert")
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus excepturi aliquam quod deleniti sit mollitia at? Voluptates suscipit, perspiciatis fuga nesciunt atque, repellat minus distinctio iure cupiditate tenetur ipsam voluptatem?
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/shepherd/components/alert/_dismissable.html.erb

@@ -0,0 +1,50 @@
+<div id="alert-dismissable">
+<%= render layout: example, locals: { heading: "Dismissable", section: "Alert" } do %>
+
+<div class="bg-secondary-50/90 text-secondary-700 rounded-xl py-4 px-6 text-sm flex justify-between items-start dark:bg-secondary-50/10 dark:text-secondary-100 relative">
+  <div class="flex-1">
+    <p class="text-secondary-800 font-heading dark:text-secondary-300 font-medium">A dismissible notice</p>
+    <p class="my-1 pr-4">This alert contains important information. Please read it carefully and take any necessary actions before dismissing.</p>
+  </div>
+  <button type="button" class="size-8 rounded-full bg-transparent hover:bg-secondary-700/80 transition ease-in-out duration-300 flex items-center justify-center group dark:hover:bg-secondary-500/80 absolute top-2 right-2">
+    <%= icon "x-mark", class: "size-5 text-secondary-700 group-hover:text-secondary-100 dark:text-secondary-300 dark:group-hover:text-secondary-100", title: "Dismiss" %>
+  </button>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="bg-secondary-50/90 text-secondary-700 rounded-xl py-4 px-6 text-sm flex justify-between items-start dark:bg-secondary-50/10 dark:text-secondary-100 relative">
+  <div class="flex-1">
+    <p class="text-secondary-800 font-heading dark:text-secondary-300 font-medium">A dismissible notice</p>
+    <p class="my-1 pr-4">This alert contains important information. Please read it carefully and take any necessary actions before dismissing.</p>
+  </div>
+  <button type="button" class="size-8 rounded-full bg-transparent hover:bg-secondary-700/80 transition ease-in-out duration-300 flex items-center justify-center group dark:hover:bg-secondary-500/80 absolute top-2 right-2">
+    <%%= icon "x-mark", class: "size-5 text-secondary-700 group-hover:text-secondary-100 dark:text-secondary-300 dark:group-hover:text-secondary-100", title: "Dismiss" %>
+  </button>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="bg-secondary-50/90 text-secondary-700 rounded-xl py-4 px-6 text-sm flex justify-between items-start dark:bg-secondary-50/10 dark:text-secondary-100 relative">
+  <div class="flex-1">
+    <p class="text-secondary-800 font-heading dark:text-secondary-300 font-medium">A dismissible notice</p>
+    <p class="my-1 pr-4">This alert contains important information. Please read it carefully and take any necessary actions before dismissing.</p>
+  </div>
+  <button type="button" class="size-8 rounded-full bg-transparent hover:bg-secondary-700/80 transition ease-in-out duration-300 flex items-center justify-center group dark:hover:bg-secondary-500/80 absolute top-2 right-2">
+    <%%= icon "x-mark", class: "size-5 text-secondary-700 group-hover:text-secondary-100 dark:text-secondary-300 dark:group-hover:text-secondary-100", title: "Dismiss" %>
+  </button>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+.text-secondary-700.rounded-xl.py-4.px-6.flex.justify-between.items-center.dark:text-secondary-100.relative(class="bg-secondary-50/90 dark:bg-secondary-50/10")
+  .flex-1
+    %p.text-secondary-800.font-heading.dark:text-secondary-300.font-medium A dismissible notice
+    %p.my-1.pr-4 This alert contains important information. Please read it carefully and take any necessary actions before dismissing.
+  %button.w-8.h-8.rounded-full.bg-transparent.transition.ease-in-out.duration-300.flex.items-center.justify-center.absolute.top-2.right-2.group(class="hover:bg-secondary-700/80 dark:hover:bg-secondary-500/80" type="button")
+    = icon "x-mark", class: "size-5 text-secondary-700 group-hover:text-secondary-100 dark:text-secondary-300 dark:group-hover:text-secondary-100", title: "Dismiss"
+<% end %>
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/shepherd/components/alert/_with_accent_border.html.erb

@@ -0,0 +1,34 @@
+<div id="alert-border-accent">
+<%= render layout: example, locals: { heading: "Border accent", section: "Alert" } do %>
+
+<div class="bg-blue-50/90 text-blue-700 border-l-4 border-blue-700 py-4 px-6 text-sm dark:bg-blue-50/10 dark:text-blue-50 dark:border-blue-400 rounded-r-xl rounded-l">
+  <p class="text-blue-800 dark:text-blue-400 font-medium font-heading">Upcoming maintenance alert</p>
+  <p class="my-1">We'll be undergoing routine maintenance on Jan 1 that affects your account. <a href="#" class="font-semibold underline text-blue-700  hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500">Read more about the update here</a>.</p>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="bg-blue-50/90 text-blue-700 border-l-4 border-blue-700 py-4 px-6 text-sm dark:bg-blue-50/10 dark:text-blue-50 dark:border-blue-400 rounded-r-xl rounded-l">
+  <p class="text-blue-800 dark:text-blue-400 font-medium font-heading">Upcoming maintenance alert</p>
+  <p class="my-1">We'll be undergoing routine maintenance on Jan 1 that affects your account. <a href="#" class="font-semibold underline text-blue-700  hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500">Read more about the update here</a>.</p>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="bg-blue-50/90 text-blue-700 border-l-4 border-blue-700 py-4 px-6 text-sm dark:bg-blue-50/10 dark:text-blue-50 dark:border-blue-400 rounded-r-xl rounded-l">
+  <p class="text-blue-800 dark:text-blue-400 font-medium font-heading">Upcoming maintenance alert</p>
+  <p class="my-1">We'll be undergoing routine maintenance on Jan 1 that affects your account. <%%= link_to "Read more about the update here", "#", class: "font-semibold underline text-blue-700 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" %>.</p>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+.text-blue-700.border-l-4.border-blue-700.py-4.px-6.text-sm.dark:text-blue-50.dark:border-blue-400.rounded-r-xl.rounded-l(class="bg-blue-50/90 dark:bg-blue-50/10")
+  %p.text-blue-800.dark:text-blue-400.font-medium.font-heading Upcoming maintenance alert
+  %p.my-1
+    We'll be undergoing routine maintenance on Jan 1 that affects your account. #{link_to "Read more about the update here", "#", class: "font-semibold underline text-blue-700  hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500"}.
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>