railsui 3.1.0

data/app/views/railsui/default/_link.html.erb

@@ -0,0 +1,9 @@
+<%# locals: (path: "#", icon: "", text: "") %>
+<li>
+  <%= link_to path, class: "flex flex-col items-center justify-center w-full hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg p-4 group transition ease-in-out duration-300 bg-neutral-200/40 hover:bg-neutral-200 h-[130px] text-base dark:bg-neutral-700/30", target: :_blank do %>
+    <div class="size-10 flex items-center justify-center shrink-0">
+      <%= icon icon, class: "stroke-current size-7 text-[var(--color-rails)]" %>
+    </div>
+    <span><%= text %></span>
+  <% end %>
+</li>

data/app/views/railsui/default/index.html.erb

@@ -0,0 +1,2 @@
+<!-- root path setup by client -->
+<%= render "railsui/default/launchpad" %>

data/app/views/railsui/default/start.html.erb

@@ -0,0 +1,2 @@
+<!-- fallback start at railsui/start which is accessible in the dev environment -->
+<%= render "railsui/default/launchpad" %>

data/app/views/railsui/routes/_nav.html.erb

@@ -0,0 +1,20 @@
+<div class="border-b border-neutral-200 dark:border-neutral-700/80 py-4">
+  <div class="container mx-auto md:px-6 px-4">
+    <div class="flex items-center gap-4">
+      <%= link_to railsui.root_path, class: "text-sm font-medium flex gap-2 items-center p-2 rounded-md hover:bg-neutral-100 -ml-2 transition ease-in-out duration-200 group dark:hover:bg-neutral-800" do %>
+        <%= icon "arrow-left", class: "size-4 stroke-neutral-400 group-hover:stroke-neutral-700 dark:group-hover:stroke-neutral-100" %>
+      <% end %>
+      <span class="h-6 bg-neutral-200 dark:bg-neutral-700/80 w-px"></span>
+      <div class="flex-1 flex justify-center items-center">
+        <svg class="w-24 h-auto fill-current text-neutral-800 dark:text-white" fill="currentColor" width="519" height="152" viewBox="0 0 519 152" xmlns="http://www.w3.org/2000/svg">
+          <path d="M143.867 132.581L141.376 130.101L136.809 133.614C132.242 129.275 128.713 123.077 126.014 115.227C122.277 104.278 119.371 97.0468 117.295 93.5344C112.105 85.0642 104.423 77.8334 93.8354 71.4291L122.9 50.7698L112.312 36.3086C104.838 26.1856 98.8179 18.1285 94.4584 12.5505L57.5055 36.9284C56.052 22.8801 47.3329 13.3769 33.4237 13.3769C23.8741 13.3769 14.9472 16.8889 6.85081 23.7065V26.3922C12.4561 24.946 16.8157 24.1197 20.1373 24.1197C31.7629 24.1197 37.3681 30.524 37.1605 43.3327L36.9529 52.2163L3.32161 77.2139C26.1577 88.3696 37.5757 102.831 37.5757 120.598C22.2133 125.35 9.75724 134.027 0 146.835L0.207601 147.868C16.1928 141.877 29.4793 138.985 40.4822 138.985C43.1809 138.985 45.8798 139.191 48.1634 139.398C53.7685 140.018 59.789 141.877 65.8096 145.183C68.0931 146.422 71.8297 148.695 77.4352 152L98.6104 130.721L95.9114 128.035L91.5518 131.961C85.5313 128.449 79.0957 125.556 72.4527 123.284V87.5436C82.0023 87.5436 89.6833 91.6754 95.2889 100.146C97.3649 103.245 101.309 112.128 107.329 126.796C112.105 138.571 117.295 146.422 122.9 150.76H124.976L143.867 132.581ZM102.347 60.2735L72.4527 82.1718V31.9702L78.8882 27.6317L102.347 60.2735ZM68.0931 121.837C65.1866 121.011 62.0726 120.598 58.751 120.598V41.4734L68.0931 35.2756V121.837ZM36.7453 80.5193L21.1753 68.1237L36.7453 57.7941V80.5193Z" />
+          <path d="M219.594 134.233L217.311 132.374L213.574 134.233C210.875 133.407 208.799 131.341 207.761 127.829V73.7015C209.214 68.1237 211.498 62.9588 214.82 57.794L214.404 56.9676L208.592 61.5129L179.113 51.8027C172.677 57.794 165.411 60.4799 157.729 59.86L155.031 59.6535L164.995 85.4776C151.294 97.6662 144.443 110.062 144.443 122.87C144.443 131.341 149.425 140.224 159.183 149.314H160.221L188.455 126.796C188.455 136.919 192.814 144.356 201.741 149.108L219.594 134.233ZM188.455 95.3938L167.071 85.0641L158.352 61.5129L188.455 72.6685V95.3938ZM188.662 121.424L173.092 134.646C164.995 126.589 161.051 117.912 161.051 108.616C161.051 102.212 163.127 95.3938 167.071 88.3695L188.662 99.1126V121.424Z" />
+          <path d="M253.326 21.6406H237.964L232.982 42.713H235.68L253.326 21.6406ZM258.724 134.233L256.648 132.374L252.911 134.853C249.59 133.2 247.721 130.928 247.098 128.242V71.0162L252.288 65.2314L236.303 52.0098L220.941 64.6119L226.961 71.0162V124.936L226.754 128.655C226.131 137.538 230.491 144.563 239.832 149.521L258.724 134.233Z" />
+          <path d="M309.559 132.994L307.068 130.308L302.085 134.027L286.93 124.523V37.5482C286.93 29.9043 290.252 23.7065 297.102 18.7483C289.421 19.7813 282.155 23.2933 275.72 29.2845L273.436 29.4911C269.492 26.3922 264.925 24.1197 259.735 22.8801C264.302 27.6317 266.585 31.9702 266.585 36.102V118.532C266.585 124.523 264.717 129.482 261.188 133.407C274.266 138.158 284.024 143.323 290.667 149.108L309.559 132.994Z" />
+          <path d="M385.458 46.638C385.458 41.4735 383.382 38.9944 379.23 38.9944C375.908 38.9944 374.247 40.0273 374.247 42.2998L375.285 44.1592C378.399 48.0845 379.853 50.5634 379.853 52.0098C379.853 55.9347 375.908 59.2406 371.964 59.2406L366.566 59.8601C360.131 59.8601 351.411 56.9677 339.993 51.3899C332.312 58.6206 323.8 64.4049 314.458 68.5368V100.352L334.388 111.301L309.684 146.422L312.382 148.282C319.648 145.183 326.499 143.53 333.35 143.53C340.201 143.53 347.259 145.389 354.318 148.901C360.131 144.976 364.283 142.497 366.566 141.051C370.926 138.365 375.493 136.299 380.06 134.853V96.8403L360.546 84.8577L379.437 59.4471C383.382 54.0758 385.458 49.7369 385.458 46.638ZM365.321 71.2227L345.183 97.6663L332.727 91.262L332.935 67.5038C340.616 70.6027 347.467 72.0492 353.695 72.0492C358.055 72.0492 361.999 71.8427 365.321 71.2227ZM362.829 105.724L362.622 133.2C354.941 129.482 347.467 127.622 340.201 127.622C335.011 127.622 330.444 128.035 326.707 128.862L349.75 99.1127L362.829 105.724Z" />
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M437.908 9.68399H486.564C499.107 9.68399 509.27 19.8006 509.27 32.28V83.9281C509.27 96.4076 499.107 106.524 486.564 106.524H437.908C425.368 106.524 415.202 96.4076 415.202 83.9281V32.28C415.202 19.8006 425.368 9.68399 437.908 9.68399ZM405.471 32.28C405.471 14.4522 419.993 0 437.908 0H486.564C504.479 0 519 14.4522 519 32.28V83.9281C519 101.756 504.479 116.208 486.564 116.208H437.908C419.993 116.208 405.471 101.756 405.471 83.9281V32.28ZM461.838 66.3149V36.3504H470.387V67.0257C470.387 77.1131 462.737 84.0139 451.243 84.0139C439.7 84.0139 432.098 77.1131 432.098 67.0257V36.3504H440.645V66.3149C440.645 72.207 444.746 76.4252 451.243 76.4252C457.716 76.4252 461.838 72.207 461.838 66.3149ZM478.706 36.3504H487.251V83.303H478.706V36.3504Z" />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,41 @@
+<div data-controller="railsui-search railsui-helper" data-railsui-helper-url-value="_url"
+data-railsui-helper-path-value="_path">
+  <div class="dark:text-neutral-100 text-neutral-800">
+    <%= render "railsui/routes/nav" %>
+
+    <nav aria-label="breadcrumb" class="my-6 font-medium flex dark:text-neutral-200 text-sm flex-1">
+      <ol class="flex flex-wrap items-center space-x-3">
+        <li>
+          <%= link_to "Rails UI", railsui.root_path, class: "hover:underline" %>
+        </li>
+
+        <li class="flex space-x-3">
+          <div class="flex items-center">
+            <span class="text-neutral-300 dark:text-neutral-500">/</span>
+          </div>
+          <a href="#" aria-current="page" class="text-underline">Routes</a>
+        </li>
+      </ol>
+    </nav>
+    <h1 class="md:text-6xl text-3xl font-extrabold tracking-tight text-neutral-900 dark:text-white">Routes</h1>
+
+    <div class="md:flex items-center justify-between md:pt-16 md:pb-24 py-4">
+      <%= form_tag railsui.routes_path, method: :get, data: { railsui_search_target: "form" } do %>
+        <div class="relative">
+          <%= text_field :query, nil, id: 'search', autofocus: true, placeholder: "Search routes", class: "border-b border-x-0 focus:bg-transparent border-t-0 border-neutral-300 focus:ring-0 block w-full md:w-[900px] flex-shrink-0 dark:bg-transparent dark:border-neutral-600 peer text-2xl px-3 py-5 text-neutral-800 font-medium dark:text-white placeholder:text-neutral-400 selection:bg-netural-300 dark:selection:bg-neutral-700/30 appearance-none focus:shadow-none focus:outline-hidden", data: { action: "keyup->railsui-search#search keyup.esc->railsui-search#clear" }, tabindex: 0 %>
+
+          <span class="absolute opacity-0 peer-focus:opacity-100 transition ease-in-out duration-200 right-4 top-[20px] text-sm -translate-x-2 peer-focus:translate-x-0 text-neutral-600 dark:text-neutral-400">Hit <span class="border border-neutral-400 text-neutral-600 inline-flex dark:text-neutral-100 leading-none items-center rounded px-1 py-0 h-5 font-mono text-xs">esc</span> to reset</span>
+        </div>
+      <% end %>
+
+      <div class="md:flex items-center justify-between md:pt-0 pt-6 z-50">
+        <div class="flex items-center md:w-auto w-full">
+          <button role="button" type="button" title="Returns a relative path (without the http or domain)" class="bg-transparent backdrop-blur-md rounded-l-md border border-neutral-300 font-medium text-sm text-neutral-700 px-5 py-2 border-r hover:bg-neutral-100 focus:ring-4 focus:ring-white/20 focus:bg-indigo-500 focus:text-white focus:border-indigo-600 dark:bg-neutral-800 dark:border-neutral-700/80 dark:text-neutral-100 md:w-auto w-full dark:hover:bg-neutral-800"
+          data-railsui-helper-target="btn" data-action="click->railsui-helper#togglePath">Path</button>
+          <button role="button" type="button" title="Returns an absolute URL (with the http and domain)" class="bg-transparent backdrop-blur-md rounded-r-md border-r border-y border-neutral-300 font-medium text-sm text-neutral-700 px-5 py-2 hover:bg-neutral-100 focus:ring-4 focus:ring-white/20 focus:bg-indigo-500 focus:text-white focus:border-indigo-600 dark:bg-neutral-800 dark:border-neutral-700/80 dark:text-neutral-100 md:w-auto w-full dark:hover:bg-neutral-800" data-railsui-helper-target="btn" data-action="click->railsui-helper#toggleUrl">URL</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <%= @routes.format(ActionDispatch::Routing::HtmlTableFormatter.new(self))%>
+</div>

data/app/views/railsui/shared/_callout.html.erb

@@ -0,0 +1,8 @@
+<div class="pl-4 pr-6 py-3.5 flex items-start bg-white border border-neutral-300/70 backdrop-blur-sm gap-4 rounded-lg mb-6 dark:bg-neutral-800/60 dark:border-none">
+  <div class="bg-neutral-950 size-7 rounded-full flex items-center justify-center flex-shrink-0 relative top-0.5 border dark:border-neutral-600 border-white">
+    <svg class="size-3 fill-current text-white" width="333" height="325" viewBox="0 0 333 325" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M332.64 279.04L326.88 273.28L316.32 281.44C306.08 271.52 297.76 257.28 291.36 238.72C282.72 213.44 276 196.64 271.2 188.32C259.36 168.8 241.28 151.68 216.96 136.96L284.16 88.96L259.68 55.36C251.04 43.52 243.2 32.96 236.16 23.68C229.44 14.4 223.52 6.55999 218.4 0.159975L132.96 56.8C131.36 40.48 125.76 27.36 116.16 17.44C106.56 7.19998 93.6 2.07998 77.28 2.07998C55.2 2.07998 34.72 10.08 15.84 26.08V32.32C29.28 28.8 39.52 27.04 46.56 27.04C73.12 27.04 86.24 41.92 85.92 71.68L85.44 92.32L7.68 150.4C60.48 176.32 86.88 209.92 86.88 251.2C51.36 262.08 22.4 282.4 0 312.16L0.48 314.56C36.96 300.8 68 293.92 93.6 293.92C96.8 293.92 99.84 294.08 102.72 294.4C105.92 294.4 108.8 294.56 111.36 294.88C125.12 296.48 138.72 300.96 152.16 308.32C154.72 309.92 158.24 312 162.72 314.56C167.2 317.12 172.64 320.32 179.04 324.16L228 274.72L221.76 268.48L211.68 277.6C197.92 269.6 183.2 262.88 167.52 257.44V174.4C189.92 174.4 207.52 184.16 220.32 203.68C224.8 210.4 234.08 231.04 248.16 265.6C259.04 292.48 271.04 311.04 284.16 321.28H288.96L332.64 279.04ZM236.64 111.04L167.52 161.92V45.28L182.4 35.2L236.64 111.04ZM157.44 254.08C150.72 252.16 143.52 251.2 135.84 251.2V67.36L157.44 52.96V254.08ZM84.96 158.08L48.96 129.28L84.96 105.28V158.08Z"/></svg>
+  </div>
+  <div class="prose prose-neutral dark:prose-invert prose-a:font-semibold prose-a:underline prose-code:font-semibold prose-code:text-[15px] max-w-full">
+    <%= yield %>
+  </div>
+</div>

data/app/views/railsui/shared/_code_example.html.erb

@@ -0,0 +1,29 @@
+<div data-controller="railsui-snippet" class="py-8">
+  <div class="flex justify-between items-end mt-4 mb-6">
+    <div class="flex-1">
+      <%= render "railsui/shared/code_example_heading", title: local_assigns[:section], subtitle: local_assigns[:heading] %>
+    </div>
+
+    <div class="flex gap-1 justify-center items-center px-1 py-1 rounded-lg bg-neutral-100 dark:bg-neutral-950">
+      <button data-railsui-snippet-target="previewBtn" data-action="click->railsui-snippet#togglePreview" class="bg-white px-3 py-1.5 rounded-md shadow-sm flex items-center justify-center gap-2 text-[13px] font-semibold focus:ring-4 focus:ring-blue-600 group dark:bg-neutral-800/90 dark:text-neutral-100">
+        <%= icon "eye", class:  "size-4 text-neutral-500 group-hover:text-neutral-800 dark:text-neutral-300 group-focus:text-neutral-800 pointer-events-none dark:group-hover:text-neutral-200 dark:group-focus:text-neutral-200" %>
+        <span>Preview</span>
+      </button>
+      <button data-railsui-snippet-target="codeBtn" data-action="click->railsui-snippet#toggleCode"
+        class="bg-transparent px-3 py-1.5 rounded-md shadow-none flex items-center justify-center gap-2 text-[13px] font-semibold">
+        <%= icon "code-bracket", class:  "size-4 text-neutral-500 dark:text-neutral-300 group-hover:text-neutral-800 group-focus:text-neutral-800 pointer-events-none dark:group-hover:text-neutral-200 dark:group-focus:text-neutral-200" %>
+        <span>Code</span>
+      </button>
+    </div>
+  </div>
+
+  <div>
+    <div data-railsui-snippet-target="preview">
+      <%= yield %>
+    </div>
+
+    <div data-railsui-snippet-target="code" class="hidden">
+      <%= yield :example %>
+    </div>
+  </div>
+</div>

data/app/views/railsui/shared/_code_example_heading.html.erb

@@ -0,0 +1 @@
+<%= heading text: local_assigns[:subtitle], class: "text-neutral-900 text-xl font-semibold dark:text-white scroll-mt-20 tracking-tight relative" %>

data/app/views/railsui/shared/_component_nav.html.erb

@@ -0,0 +1,8 @@
+<div class="md:pl-10">
+  <h4 class="text-neutral-500 dark:text-neutral-400 text-xs mb-2 font-medium"><%= local_assigns[:title] %></h4>
+  <nav role="component nav">
+    <ul class="font-normal text-[14px] leading-relaxed">
+      <%= yield %>
+    </ul>
+  </nav>
+</div>

data/app/views/railsui/shared/_email_action.html.erb

@@ -0,0 +1,15 @@
+<%# locals: (align: "center", url: root_url, action:, theme: "primary", fullwidth: false) %>
+
+<table class="action" align="<%= align %>">
+  <tr>
+    <td align="<%= align %>">
+      <a href="<%= url %>" class="action__link action__link--<%= theme %> <%= fullwidth == true ? "action__link--expanded" : nil %>" target="_blank"><%= action %></a>
+      <div itemscope itemtype="http://schema.org/EmailMessage">
+        <div itemprop="potentialAction" itemscope itemtype="http://schema.org/ViewAction">
+          <link itemprop="target" href="<%= url %>"/>
+          <meta itemprop="name" content="<%= action %>"/>
+        </div>
+      </div>
+    </td>
+  </tr>
+</table>

data/app/views/railsui/shared/_email_callout.html.erb

@@ -0,0 +1,7 @@
+<table class="callout">
+  <tbody>
+    <td>
+      <%= capture(&block) %>
+    </td>
+  </tbody>
+</table>

data/app/views/railsui/shared/_email_spacer.html.erb

@@ -0,0 +1,7 @@
+<table class="spacer">
+  <tbody>
+    <tr>
+      <td height="<%= amount %>" style="font-size:<%= amount %>px;line-height:<%= amount %>px;">&nbsp;</td>
+    </tr>
+  </tbody>
+</table>

data/app/views/railsui/shared/_flash_messages.html.erb

@@ -0,0 +1,11 @@
+<% if notice %>
+  <div class="bg-gradient-to-br from-indigo-700 to-indigo-600 text-white text-center py-1.5 z-50 relative rounded-lg mb-3" role="alert" data-controller="railsui-flash">
+    <p><%= sanitize notice %></p>
+  </div>
+<% end %>
+
+<% if alert %>
+  <div class="bg-gradient-to-br from-red-600 to-red-400 text-white text-center py-1.5 z-50 relative rounded-lg mb-3" role="alert" data-controller="railsui-flash">
+    <p><%= sanitize alert %></p>
+  </div>
+<% end %>

data/app/views/railsui/shared/_footer.html.erb

@@ -0,0 +1,9 @@
+<footer class="py-4 mt-10 flex items-center justify-between col-span-12">
+  <div class="text-[13px] text-neutral-500 dark:text-neutral-400">
+    <p class="inline-block">Looking for more components and templates? <%= link_to "Get full access", "https:/railsui.com/pricing", class: "underline dark:hover:text-neutral-300", target: :_blank %></p>
+  </div>
+
+  <%= link_to "https://twitter.com/railsui_", target: :_blank, class: "group block" do %>
+    <%= icon "twitter", custom_path: "/twitter.svg", class: "fill-current text-neutral-400 dark:text-neutral-500 size-5 group-hover:text-neutral-900 dark:group-hover:text-neutral-300" %>
+  <% end %>
+</footer>

data/app/views/railsui/shared/_global_nav.html.erb

@@ -0,0 +1,58 @@
+ <nav class="text-sm md:pt-3 pt-0 bg-neutral-50/20 md:h-screen md:w-[280px] md:border-r border-neutral-200/90 flex-col flex dark:bg-neutral-900 dark:border-neutral-700/80 w-full overflow-y-auto scrollbar scrollbar-track-transparent md:pl-3 md:!pr-0 px-3 md:pb-10 overflow-x-hidden" data-railsui-scroll-target="scrollitem">
+  <div>
+    <div class="flex flex-wrap items-center gap-4 justify-between py-2 md:py-1 w-full">
+      <div class="flex items-center gap-2 md:mb-3">
+        <%= link_to main_app.root_path, class: "size-6 border border-transparent hover:border-neutral-300 dark:hover:border-neutral-500 rounded-md flex items-center justify-center hover:transition hover:ease-in-out hover:duration-300 relative -left-1", data: { controller: "railsui-tooltip", railsui_tooltip_content_value: "Back to app" } do %>
+
+          <%= icon "chevron-left", class: "size-4 stroke-neutral-400 group-hover:stroke-neutral-600" %>
+          <span class="sr-only">Back to app</span>
+        <% end %>
+
+        <%= link_to params[:controller].include?('systems') ? systems_path : root_path, class: "relative -left-0.5" do %>
+          <%= image_tag "railsui-logo.svg", class: "w-20 h-auto dark:invert" %>
+        <% end %>
+      </div>
+
+      <button role="toggle nav" class="md:hidden size-10 focus:ring-neutral-300/20 focus:ring-4 rounded-lg dark:focus:ring-neutral-600 flex items-center justify-center flex-shrink-0" data-action="click->railsui-toggle#toggle">
+        <%= icon "menu", custom_path: "/menu.svg", class: "stroke-current w-7 h-7 text-neutral-600 dark:text-neutral-300" %>
+      </button>
+    </div>
+
+    <div data-railsui-toggle-target="toggleable" class="md:block hidden">
+
+      <%= render "railsui/shared/global_nav_item", path: root_path, icon: "cog-6-tooth", label: "Configuration" %>
+
+      <% if params[:controller].include?('admin') %>
+        <div class="pl-8 font-normal text-[14px] -mx-2 pt-px">
+          <a href="#configuration" data-action="click->railsui-smooth#scroll" class="pl-1 pr-2 py-1.5 block relative hover:transition hover:duration-200 hover:ease-in-out dark:focus:text-white hover:bg-neutral-50/90 rounded transition dark:text-neutral-200 dark:hover:bg-neutral-800/70 dark:hover:text-white group">General</a>
+
+          <a href="#theme" data-action="click->railsui-smooth#scroll" class="pl-1 pr-2 py-1.5 block relative hover:transition hover:duration-200 hover:ease-in-out dark:focus:text-white hover:bg-neutral-50/90 rounded transition dark:text-neutral-200 dark:hover:bg-neutral-800/70 dark:hover:text-white group">Theme</a>
+
+          <% if Railsui.config.theme.present? %>
+            <a href="#color" data-action="click->railsui-smooth#scroll" class="pl-1 pr-2 py-1.5 block relative hover:transition hover:duration-200 hover:ease-in-out dark:focus:text-white hover:bg-neutral-50/90 rounded transition dark:text-neutral-200 dark:hover:bg-neutral-800/70 dark:hover:text-white group">Color</a>
+
+            <a href="#pages" data-action="click->railsui-smooth#scroll" class="pl-1 pr-2 py-1.5 block relative hover:transition hover:duration-200 hover:ease-in-out dark:focus:text-white hover:bg-neutral-50/90 rounded transition dark:text-neutral-200 dark:hover:bg-neutral-800/70 dark:hover:text-white group">Pages</a>
+          <% end %>
+        </div>
+      <% end %>
+
+      <% if Railsui.config.theme.present? %>
+        <%= render "railsui/shared/global_nav_item", path: systems_path, icon: "cube", label:"Components" %>
+
+        <% if params[:controller].include?('systems') %>
+          <%= render "railsui/shared/system_nav" %>
+        <% end %>
+      <% end %>
+
+      <%= render "railsui/shared/global_nav_item", path: "https://railsui.com/docs", icon: "document-magnifying-glass", label: "Docs" %>
+
+      <%= render "railsui/shared/global_nav_item", path: start_url, icon: "rocket-launch", label:"Launchpad" %>
+
+      <%= render "railsui/shared/global_nav_item", path: "https://github.com/getrailsui", icon: "command-line", label: "Source code" %>
+
+      <%= render "railsui/shared/global_nav_item", path: "https://railsui.com/pricing", icon: "lock-open", label: "Get full access" %>
+
+      <%= yield :additional_global_nav_items %>
+    </div>
+  </div>
+</nav>

data/app/views/railsui/shared/_global_nav_item.html.erb

@@ -0,0 +1,16 @@
+<div>
+  <% unless current_page?(local_assigns[:path]) %>
+    <%= link_to local_assigns[:path],
+      class: "text-[14px] font-medium py-2.5 px-2 -mx-2 text-neutral-800 focus:text-neutral-600 hover:text-neutral-900 flex items-center gap-2 relative hover:transition hover:duration-200 hover:ease-in-out dark:focus:text-white hover:bg-neutral-50/80 rounded transition dark:text-neutral-200 dark:hover:bg-neutral-800/70 dark:hover:text-white group" do %>
+      <%= icon local_assigns[:icon], class: "size-5 stroke-current text-neutral-500 group-hover:text-neutral-800 dark:group-hover:text-neutral-300 dark:text-neutral-400", title: local_assigns[:label] %>
+      <span><%= local_assigns[:label] %></span>
+    <% end %>
+  <% else %>
+    <%= link_to local_assigns[:path],
+      class: "text-[14px] font-medium py-2.5 px-2 -mx-2 text-neutral-900 hover:text-neutral-950 flex items-center gap-2 relative hover:transition hover:duration-200 hover:ease-in-out dark:focus:text-white bg-neutral-200/70 rounded transition dark:text-neutral-200 dark:bg-neutral-800/70 dark:text-white group dark:hover:text-white" do %>
+      <%= icon local_assigns[:icon], class: "size-5 stroke-current text-neutral-500
+      group-hover:text-netural-800 dark:group-hover:text-neutral-300 dark:text-neutral-400", title: local_assigns[:label]  %>
+      <span><%= local_assigns[:label] %></span>
+    <% end %>
+  <% end %>
+</div>

data/app/views/railsui/shared/_header.html.erb

@@ -0,0 +1,19 @@
+<div class="mb-6">
+  <div class="text-neutral-500 dark:text-neutral-400 text-sm md:mb-2">
+    <div class="flex items-center gap-1.5">
+      <% unless params[:controller] == "railsui/systems" %>
+        <p class="text-neutral-500 dark:text-neutral-400 relative text-sm"><%= params[:controller].gsub("railsui/systems/", "").titleize %></p>
+      <% else %>
+        <p class="text-neutral-500 dark:text-neutral-400 text-sm relative">Module</p>
+      <% end %>
+      <%= icon "chevron-right", class: "size-3 text-neutral-500" %>
+      <div class="text-neutral-900 dark:text-white font-medium"><%= params[:action].titleize %></div>
+    </div>
+  </div>
+  <%= heading text: params[:action].titleize, id: params[:action], tag: "h1", class: "md:text-4xl text-3xl text-neutral-800 font-bold dark:text-neutral-100 tracking-tight relative" %>
+  <% if content_for?(:header_description).present? %>
+    <div class="prose prose-neutral dark:prose-invert mt-3 prose-lg prose-p:text-neutral-500 dark:prose-p:text-neutral-400">
+      <%= yield :header_description %>
+    </div>
+  <% end %>
+</div>

data/app/views/railsui/shared/_launcher.html.erb

@@ -0,0 +1,119 @@
+<!-- Rails UI Launcher - Only visible in development -->
+<div data-controller="railsui-dropdown">
+  <div class="rui-launcher">
+    <button type="button" data-turbo="false" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
+      <svg class="rui-r" width="333" height="325" viewBox="0 0 333 325" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M332.64 279.04L326.88 273.28L316.32 281.44C306.08 271.52 297.76 257.28 291.36 238.72C282.72 213.44 276 196.64 271.2 188.32C259.36 168.8 241.28 151.68 216.96 136.96L284.16 88.96L259.68 55.36C251.04 43.52 243.2 32.96 236.16 23.68C229.44 14.4 223.52 6.55999 218.4 0.159975L132.96 56.8C131.36 40.48 125.76 27.36 116.16 17.44C106.56 7.19998 93.6 2.07998 77.28 2.07998C55.2 2.07998 34.72 10.08 15.84 26.08V32.32C29.28 28.8 39.52 27.04 46.56 27.04C73.12 27.04 86.24 41.92 85.92 71.68L85.44 92.32L7.68 150.4C60.48 176.32 86.88 209.92 86.88 251.2C51.36 262.08 22.4 282.4 0 312.16L0.48 314.56C36.96 300.8 68 293.92 93.6 293.92C96.8 293.92 99.84 294.08 102.72 294.4C105.92 294.4 108.8 294.56 111.36 294.88C125.12 296.48 138.72 300.96 152.16 308.32C154.72 309.92 158.24 312 162.72 314.56C167.2 317.12 172.64 320.32 179.04 324.16L228 274.72L221.76 268.48L211.68 277.6C197.92 269.6 183.2 262.88 167.52 257.44V174.4C189.92 174.4 207.52 184.16 220.32 203.68C224.8 210.4 234.08 231.04 248.16 265.6C259.04 292.48 271.04 311.04 284.16 321.28H288.96L332.64 279.04ZM236.64 111.04L167.52 161.92V45.28L182.4 35.2L236.64 111.04ZM157.44 254.08C150.72 252.16 143.52 251.2 135.84 251.2V67.36L157.44 52.96V254.08ZM84.96 158.08L48.96 129.28L84.96 105.28V158.08Z"/></svg>
+    </button>
+    <nav class="hidden" data-railsui-dropdown-target="menu">
+      <ul>
+        <li>
+          <%= link_to "Configuration", railsui.root_path, data: { turbo: false } %>
+        </li>
+
+        <li>
+          <%= link_to "Components", railsui.systems_path, data: { turbo: false } %>
+        </li>
+
+         <li>
+          <%= link_to "Pages", railsui.root_path(anchor: "pages"), data: { turbo: false } %>
+        </li>
+
+        <li>
+          <%= link_to "Docs", "https://railsui.com/docs", data: { turbo: false }, target: :_blank %>
+        </li>
+
+        <li>
+          <%= link_to "Launchpad", railsui.start_url, data: { turbo: false } %>
+        </li>
+
+        <li>
+          <%= link_to "Routes", railsui.routes_path, data: { turbo: false } %>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <style>
+    .rui-launcher {
+      position: fixed;
+      left: 6px;
+      bottom: 6px;
+      z-index: 9999;
+    }
+
+    .rui-launcher button {
+      border: none;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+      background: rgb(2,0,36);
+      background: linear-gradient(43deg, rgba(2,0,36,1) 0%, rgba(10,10,84,1) 64%, rgba(63,0,64,1) 100%);
+    }
+
+    .rui-launcher button:focus {
+      outline-color: #f1f5f9;
+      outline-offset: 4px;
+      outline-style: solid;
+    }
+
+    .rui-launcher button:hover {
+      box-shadow: none;
+    }
+
+    .rui-launcher nav.hidden {
+      display: none;
+      opacity: 0;
+    }
+
+    .rui-launcher nav {
+      position: absolute;
+      left: 0px;
+      bottom: 48px;
+      background: rgb(2,0,36);
+      background: linear-gradient(43deg, rgba(2,0,36,1) 0%, rgba(10,10,84,1) 64%, rgba(63,0,64,1) 100%);
+      border-radius: 6px;
+      min-width: 220px;
+      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+      padding: 0.6rem 0;
+      backdrop-filter: blur(12px);
+    }
+
+    .rui-launcher nav ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      font-weight: 500;
+      font-size: 15px;
+    }
+
+    .rui-launcher nav a {
+      text-decoration: none;
+      color: rgba(255, 255, 255, 0.8);
+      display: block;
+      padding: 0.3rem 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .rui-launcher nav a:hover {
+      text-decoration: underline
+    }
+
+    .rui-launcher .rui-r {
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+      fill: white;
+    }
+
+    @media screen and (max-width: 767px) {
+      .rui-launcher {
+        display: none;
+      }
+    }
+  </style>
+</div>

data/app/views/railsui/shared/_linkable.html.erb

@@ -0,0 +1,11 @@
+<div>
+  <%= link_to local_assigns[:path], class: "hover:bg-neutral-50/50 block px-4 md:py-3 py-1.5 md:px-8 group dark:hover:bg-neutral-800/40" do %>
+    <div class="md:prose-base prose-sm prose-neutral dark:prose-invert prose-headings:font-semibold flex items-center max-w-full">
+      <div class="flex-1">
+        <h3 class="mb-1 md:mt-4 mt-3"><%= local_assigns[:title] %></h3>
+        <p class="pt-0"><%= local_assigns[:description] %></p>
+      </div>
+      <%= icon "chevron-right", class: "size-6 text-neutral-300 group-hover:translate-x-1 group-hover:transform ease-in-out duration-200 group-hover:text-neutral-500 md:block hidden" %>
+    </div>
+  <% end %>
+</div>

data/app/views/railsui/shared/_linkables.html.erb

@@ -0,0 +1,3 @@
+<div class="divide-y divide-neutral-200/80 dark:divide-neutral-700/80 rounded-lg border-neutral-200/80 dark:border-neutral-700/80 border overflow-clip bg-white dark:bg-neutral-800/50">
+  <%= yield %>
+</div>

data/app/views/railsui/shared/_logo.html.erb

@@ -0,0 +1,4 @@
+<%= link_to root_path, class:"link text-xl tracking-tight font-black group transition ease-in-out duration-300 transform lg:justify-start flex justify-center #{local_assigns[:effects] == false ? "" : "hover:-rotate-2 hover:scale-105" }" do %>
+  <span class="sr-only">RailsUI</span>
+  <svg class="<%= local_assigns[:size] ||= "w-30" %> h-auto fill-current text-black dark:text-white" fill="none" height="34" viewBox="0 0 113 34" width="113" xmlns="http://www.w3.org/2000/svg"><g class=" fill-current"><path d="m31.1987 28.8915-.5402-.5403-.9905.7654c-.9904-.9454-1.7557-2.296-2.341-4.0068-.8104-2.386-1.4406-3.9617-1.8908-4.7271-1.1255-1.8458-2.7913-3.4215-5.0873-4.8171l6.3028-4.502-2.296-3.15134c-1.6207-2.20597-2.9263-3.96174-3.8717-5.17727l-8.0135 5.31233c-.3152-3.06135-2.206-5.13226-5.22232-5.13226-2.07091 0-4.00676.76534-5.76253 2.25099v.58526c1.21554-.31514 2.16095-.49522 2.88127-.49522 2.5211 0 3.73664 1.39562 3.69162 4.18684l-.04502 1.93587-7.293204 5.4474c4.952174 2.431 7.428264 5.5824 7.428264 9.4541-3.33146 1.0355-6.03265 2.9263-8.14858 5.7175l.0450198.2251c3.4665202-1.3055 6.3477902-1.9358 8.7338402-1.9358.58525 0 1.17051.045 1.66574.09 1.2155.1351 2.5211.5403 3.8267 1.2606.4952.2701 1.3055.7653 2.5211 1.4856l4.592-4.637-.5853-.5853-.9454.8554c-1.3056-.7653-2.7012-1.3956-4.1418-1.8908v-7.7884c2.0709 0 3.7366.9004 4.9522 2.7462.4502.6753 1.3055 2.6111 2.6111 5.8075 1.0355 2.5661 2.161 4.2769 3.3765 5.2223h.4502zm-9.004-15.7569-6.4828 4.772v-10.93975l1.3956-.94542zm-7.4282 13.4158c-.6303-.18-1.3056-.2701-2.0259-.2701v-17.24254l2.0259-1.3506zm-6.798-9.0039-3.37648-2.7012 3.37648-2.251z"/><path d="m47.6207 29.2516-.4952-.4051-.8104.4051c-.5852-.18-1.0354-.6302-1.2605-1.3956v-11.7952c.3151-1.2155.8103-2.341 1.5307-3.4665l-.0901-.1801-1.2605.9905-6.3928-2.116c-1.3956 1.3056-2.9713 1.8909-4.6371 1.7558l-.5852-.045 2.1609 5.6275c-2.9713 2.6561-4.4569 5.3573-4.4569 8.1485 0 1.8459 1.0804 3.7817 3.1964 5.7626h.2251l6.1227-4.9072c0 2.206.9454 3.8267 2.8812 4.8622zm-6.7529-8.4637-4.6371-2.251-1.8908-5.1322 6.5279 2.431zm.045 5.6725-3.3765 2.8813c-1.7558-1.7558-2.6112-3.6466-2.6112-5.6725 0-1.3956.4502-2.8813 1.3056-4.412l4.6821 2.3411z"/><path d="m54.9357 4.71586h-3.3314l-1.0805 4.59201h.5852zm1.1705 24.53574-.4502-.4051-.8103.5402c-.7203-.3602-1.1255-.8554-1.2606-1.4406v-12.4705l1.1255-1.2606-3.4665-2.8812-3.3315 2.7462 1.3056 1.3956v11.7501l-.045.8104c-.1351 1.9358.8104 3.4665 2.8362 4.547z"/><path d="m67.1301 28.9815-.5402-.5852-1.0805.8103-3.2865-2.0709v-18.95332c0-1.66573.7204-3.01633 2.206-4.0968-1.6657.2251-3.2414.99044-4.637 2.29601l-.4952.04502c-.8554-.6753-1.8458-1.17052-2.9713-1.44064.9904 1.03546 1.4856 1.98088 1.4856 2.88127v17.96286c0 1.3056-.4052 2.3861-1.1705 3.2415 2.8362 1.0354 4.9522 2.1609 6.3928 3.4215z"/><path d="m83.5894 10.1632c0-1.12544-.4502-1.66568-1.3506-1.66568-.7203 0-1.0805.2251-1.0805.72031l.2251.40518c.6753.85539.9905 1.39559.9905 1.71079 0 .8553-.8554 1.5757-1.7108 1.5757l-1.1705.135c-1.3956 0-3.2864-.6303-5.7625-1.8458-1.6658 1.5757-3.5116 2.8362-5.5375 3.7366v6.9331l4.3219 2.386-5.3573 7.6534.5852.4052c1.5757-.6753 3.0614-1.0355 4.547-1.0355 1.4857 0 3.0164.4052 4.547 1.1705 1.2606-.8553 2.161-1.3956 2.6562-1.7107.9454-.5853 1.9359-1.0355 2.9263-1.3506v-8.2836l-4.2319-2.6112 4.0968-5.5374c.8554-1.1705 1.3056-2.116 1.3056-2.7913zm-4.3669 5.3574-4.3669 5.7625-2.7012-1.3956.045-5.1773c1.6657.6753 3.1514.9905 4.502.9905.9454 0 1.8008-.045 2.5211-.1801zm-.5403 7.5183-.045 5.9876c-1.6657-.8103-3.2864-1.2155-4.8621-1.2155-1.1255 0-2.1159.09-2.9263.2701l4.9972-6.4828z"/></g><path clip-rule="evenodd" d="m94.9636 2.1103h10.5514c2.72 0 4.924 2.20457 4.924 4.92404v11.25496c0 2.7195-2.204 4.924-4.924 4.924h-10.5514c-2.7195 0-4.924-2.2045-4.924-4.924v-11.25496c0-2.71947 2.2045-4.92404 4.924-4.92404zm-7.0343 4.92404c0-3.88496 3.1493-7.03434 7.0343-7.03434h10.5514c3.885 0 7.034 3.14938 7.034 7.03434v11.25496c0 3.8849-3.149 7.0343-7.034 7.0343h-10.5514c-3.885 0-7.0343-3.1494-7.0343-7.0343zm12.2237 7.41676v-6.52975h1.854v6.68465c0 2.1982-1.659 3.702-4.1517 3.702-2.503 0-4.1517-1.5038-4.1517-3.702v-6.68465h1.8536v6.52975c0 1.284.8892 2.2032 2.2981 2.2032 1.4039 0 2.2977-.9192 2.2977-2.2032zm3.658-6.52975h1.853v10.23175h-1.853z" class="fill-current dark:text-white text-neutral-800 group-hover:text-orange-600 transition ease-in-out duration-300 group-hover:animate-pulse" fill-rule="evenodd"/></svg>
+<% end %>

data/app/views/railsui/shared/_logo_light.html.erb

@@ -0,0 +1,4 @@
+ <%= link_to root_path, class:"link text-xl tracking-tight font-black group transition ease-in-out duration-300 hover:-rotate-2 hover:scale-105 transform" do %>
+  <span class="sr-only">RailsUI</span>
+  <svg class="w-24 h-auto" fill="none" height="34" viewBox="0 0 113 34" width="113" xmlns="http://www.w3.org/2000/svg"><g class="fill-current text-white"><path d="m31.1987 28.8915-.5402-.5403-.9905.7654c-.9904-.9454-1.7557-2.296-2.341-4.0068-.8104-2.386-1.4406-3.9617-1.8908-4.7271-1.1255-1.8458-2.7913-3.4215-5.0873-4.8171l6.3028-4.502-2.296-3.15134c-1.6207-2.20597-2.9263-3.96174-3.8717-5.17727l-8.0135 5.31233c-.3152-3.06135-2.206-5.13226-5.22232-5.13226-2.07091 0-4.00676.76534-5.76253 2.25099v.58526c1.21554-.31514 2.16095-.49522 2.88127-.49522 2.5211 0 3.73664 1.39562 3.69162 4.18684l-.04502 1.93587-7.293204 5.4474c4.952174 2.431 7.428264 5.5824 7.428264 9.4541-3.33146 1.0355-6.03265 2.9263-8.14858 5.7175l.0450198.2251c3.4665202-1.3055 6.3477902-1.9358 8.7338402-1.9358.58525 0 1.17051.045 1.66574.09 1.2155.1351 2.5211.5403 3.8267 1.2606.4952.2701 1.3055.7653 2.5211 1.4856l4.592-4.637-.5853-.5853-.9454.8554c-1.3056-.7653-2.7012-1.3956-4.1418-1.8908v-7.7884c2.0709 0 3.7366.9004 4.9522 2.7462.4502.6753 1.3055 2.6111 2.6111 5.8075 1.0355 2.5661 2.161 4.2769 3.3765 5.2223h.4502zm-9.004-15.7569-6.4828 4.772v-10.93975l1.3956-.94542zm-7.4282 13.4158c-.6303-.18-1.3056-.2701-2.0259-.2701v-17.24254l2.0259-1.3506zm-6.798-9.0039-3.37648-2.7012 3.37648-2.251z"/><path d="m47.6207 29.2516-.4952-.4051-.8104.4051c-.5852-.18-1.0354-.6302-1.2605-1.3956v-11.7952c.3151-1.2155.8103-2.341 1.5307-3.4665l-.0901-.1801-1.2605.9905-6.3928-2.116c-1.3956 1.3056-2.9713 1.8909-4.6371 1.7558l-.5852-.045 2.1609 5.6275c-2.9713 2.6561-4.4569 5.3573-4.4569 8.1485 0 1.8459 1.0804 3.7817 3.1964 5.7626h.2251l6.1227-4.9072c0 2.206.9454 3.8267 2.8812 4.8622zm-6.7529-8.4637-4.6371-2.251-1.8908-5.1322 6.5279 2.431zm.045 5.6725-3.3765 2.8813c-1.7558-1.7558-2.6112-3.6466-2.6112-5.6725 0-1.3956.4502-2.8813 1.3056-4.412l4.6821 2.3411z"/><path d="m54.9357 4.71586h-3.3314l-1.0805 4.59201h.5852zm1.1705 24.53574-.4502-.4051-.8103.5402c-.7203-.3602-1.1255-.8554-1.2606-1.4406v-12.4705l1.1255-1.2606-3.4665-2.8812-3.3315 2.7462 1.3056 1.3956v11.7501l-.045.8104c-.1351 1.9358.8104 3.4665 2.8362 4.547z"/><path d="m67.1301 28.9815-.5402-.5852-1.0805.8103-3.2865-2.0709v-18.95332c0-1.66573.7204-3.01633 2.206-4.0968-1.6657.2251-3.2414.99044-4.637 2.29601l-.4952.04502c-.8554-.6753-1.8458-1.17052-2.9713-1.44064.9904 1.03546 1.4856 1.98088 1.4856 2.88127v17.96286c0 1.3056-.4052 2.3861-1.1705 3.2415 2.8362 1.0354 4.9522 2.1609 6.3928 3.4215z"/><path d="m83.5894 10.1632c0-1.12544-.4502-1.66568-1.3506-1.66568-.7203 0-1.0805.2251-1.0805.72031l.2251.40518c.6753.85539.9905 1.39559.9905 1.71079 0 .8553-.8554 1.5757-1.7108 1.5757l-1.1705.135c-1.3956 0-3.2864-.6303-5.7625-1.8458-1.6658 1.5757-3.5116 2.8362-5.5375 3.7366v6.9331l4.3219 2.386-5.3573 7.6534.5852.4052c1.5757-.6753 3.0614-1.0355 4.547-1.0355 1.4857 0 3.0164.4052 4.547 1.1705 1.2606-.8553 2.161-1.3956 2.6562-1.7107.9454-.5853 1.9359-1.0355 2.9263-1.3506v-8.2836l-4.2319-2.6112 4.0968-5.5374c.8554-1.1705 1.3056-2.116 1.3056-2.7913zm-4.3669 5.3574-4.3669 5.7625-2.7012-1.3956.045-5.1773c1.6657.6753 3.1514.9905 4.502.9905.9454 0 1.8008-.045 2.5211-.1801zm-.5403 7.5183-.045 5.9876c-1.6657-.8103-3.2864-1.2155-4.8621-1.2155-1.1255 0-2.1159.09-2.9263.2701l4.9972-6.4828z"/></g><path clip-rule="evenodd" d="m94.9636 2.1103h10.5514c2.72 0 4.924 2.20457 4.924 4.92404v11.25496c0 2.7195-2.204 4.924-4.924 4.924h-10.5514c-2.7195 0-4.924-2.2045-4.924-4.924v-11.25496c0-2.71947 2.2045-4.92404 4.924-4.92404zm-7.0343 4.92404c0-3.88496 3.1493-7.03434 7.0343-7.03434h10.5514c3.885 0 7.034 3.14938 7.034 7.03434v11.25496c0 3.8849-3.149 7.0343-7.034 7.0343h-10.5514c-3.885 0-7.0343-3.1494-7.0343-7.0343zm12.2237 7.41676v-6.52975h1.854v6.68465c0 2.1982-1.659 3.702-4.1517 3.702-2.503 0-4.1517-1.5038-4.1517-3.702v-6.68465h1.8536v6.52975c0 1.284.8892 2.2032 2.2981 2.2032 1.4039 0 2.2977-.9192 2.2977-2.2032zm3.658-6.52975h1.853v10.23175h-1.853z" class="fill-current dark:text-white text-white group-hover:text-orange-600 transition ease-in-out duration-300 group-hover:animate-pulse" fill-rule="evenodd"/></svg>
+<% end %>