railsui 3.1.5 → 3.2.0

data/app/views/railsui/themes/corgie/components/tab/_base.html.erb

@@ -0,0 +1,101 @@
+<div id="tab-base">
+<%= render layout: example, locals: { heading: "Base", section: "Tab" } do %>
+
+<%= render preview('neutral') do %>
+<div data-controller="railsui-tabs"
+    data-railsui-tabs-active-tab="border-b border-neutral-600 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-white dark:border-neutral-400 py-3 px-4"
+    data-railsui-tabs-inactive-tab="border-b border-neutral-200 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-neutral-100 dark:border-neutral-600 py-3 px-4">
+  <div class="border-neutral-200 border-b text-neutral-600 dark:text-neutral-100 dark:border-neutral-600 font-medium text-sm font-tiktok">
+    <nav role="navigation" class="-mb-px">
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="border-b border-neutral-600 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-white dark:border-neutral-400 py-3 px-4">Activity</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="border-b border-neutral-200 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-neutral-100 dark:border-neutral-600 py-3 px-4">Account</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="border-b border-neutral-200 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-neutral-100 dark:border-neutral-600 py-3 px-4">Billing</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="border-b border-neutral-200 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-neutral-100 dark:border-neutral-600 py-3 px-4">Team</a>
+    </nav>
+  </div>
+   <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-tabs"
+    data-railsui-tabs-active-tab="border-b border-neutral-600 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-white dark:border-neutral-400 py-3 px-4"
+    data-railsui-tabs-inactive-tab="border-b border-neutral-200 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-neutral-100 dark:border-neutral-600 py-3 px-4">
+  <div class="border-neutral-200 border-b text-neutral-600 dark:text-neutral-100 dark:border-neutral-600 font-medium text-sm">
+    <nav role="navigation" class="-mb-px">
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="border-b border-neutral-600 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-white dark:border-neutral-400 py-3 px-4">Activity</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="border-b border-neutral-200 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-neutral-100 dark:border-neutral-600 py-3 px-4">Account</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="border-b border-neutral-200 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-neutral-100 dark:border-neutral-600 py-3 px-4">Billing</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="border-b border-neutral-200 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-neutral-100 dark:border-neutral-600 py-3 px-4">Team</a>
+    </nav>
+  </div>
+   <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div data-controller="railsui-tabs"
+    data-railsui-tabs-active-tab="border-b border-neutral-600 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-white dark:border-neutral-400 py-3 px-4"
+    data-railsui-tabs-inactive-tab="border-b border-neutral-200 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-neutral-100 dark:border-neutral-600 py-3 px-4">
+  <div class="border-neutral-200 border-b text-neutral-600 dark:text-neutral-100 dark:border-neutral-600 font-medium text-sm">
+    <nav role="navigation" class="-mb-px">
+      <%%= link_to "Activity", "#", data: { action: "click-railsui-tabs#change", railsui_tabs_target: "tab" }, class: "border-b border-neutral-600 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-white dark:border-neutral-400 py-3 px-4" %>
+      <%%= link_to "Account", "#", data: { action: "click-railsui-tabs#change", railsui_tabs_target: "tab"}, class: "border-b border-neutral-200 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-neutral-100 dark:border-neutral-600 py-3 px-4" %>
+      <%%= link_to "Billing", "#", data: { action: "click-railsui-tabs#change", railsui_tabs_target: "tab"}, class: "border-b border-neutral-200 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-neutral-100 dark:border-neutral-600 py-3 px-4" %>
+      <%%= link_to "Team", "#", data: { action: "click-railsui-tabs#change", railsui_tabs_target: "tab" }, class: "border-b border-neutral-200 inline-block bg-white text-neutral-600 dark:bg-transparent dark:text-neutral-100 dark:border-neutral-600 py-3 px-4" %>
+    </nav>
+  </div>
+   <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+
+<% content_for :js, flush: true do %>
+import { RailsuiTabs } from 'railsui-stimulus'
+application.register('railsui-tabs', RailsuiTabs)
+<% end %>
+
+<%= render_snippet html_filename: "tabs.html", erb_filename: "_tabs.html.erb", js_filename: "index.js" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/tab/_pills.html.erb

@@ -0,0 +1,102 @@
+<div id="tab-pill">
+<%= render layout: example, locals: { heading: "Pill", section: "Tab" } do %>
+
+<%= render preview('neutral') do %>
+<div data-controller="railsui-tabs"
+    data-railsui-tabs-active-tab="py-2 px-4 bg-neutral-50 inline-block rounded-full text-neutral-600 dark:bg-neutral-600 dark:text-white" data-railsui-tabs-inactive-tab="py-2 px-4 rounded-full inline-block dark:transparent dark:text-neutral-300">
+  <div class="text-neutral-600 dark:text-neutral-300 font-tiktok">
+    <nav role="navigation" class="flex items-center space-x-1 font-medium text-sm">
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 bg-neutral-50 inline-block rounded-full text-neutral-600 dark:bg-neutral-600 dark:text-white">Activity</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-full inline-block dark:transparent dark:text-neutral-300">Account</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-full inline-block dark:transparent dark:text-neutral-300">Billing</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-full inline-block dark:transparent dark:text-neutral-300">Team</a>
+    </nav>
+  </div>
+   <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div
+  data-controller="railsui-tabs"
+  data-tabs-active-tab="py-2 px-4 bg-neutral-50 inline-block rounded-full text-neutral-600 dark:bg-neutral-600 dark:text-white"
+  data-tabs-inactive-tab="py-2 px-4 rounded-full inline-block dark:bg-transparent dark:text-neutral-300">
+  <div class="text-neutral-600 dark:text-neutral-300">
+    <nav role="navigation" class="flex items-center space-x-1 font-medium text-sm">
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 bg-neutral-50 inline-block rounded-full text-neutral-600 dark:bg-neutral-600 dark:text-white">Activity</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-full inline-block dark:transparent dark:text-neutral-300">Account</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-full inline-block dark:transparent dark:text-neutral-300">Billing</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-full inline-block dark:transparent dark:text-neutral-300">Team</a>
+    </nav>
+  </div>
+   <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div
+  data-controller="railsui-tabs"
+  data-railsui-tabs-active-tab="py-2 px-4 bg-neutral-50 inline-block rounded-full text-neutral-600 dark:bg-neutral-600 dark:text-white"
+  data-railsui-tabs-inactive-tab="py-2 px-4 rounded-full inline-block dark:bg-transparent dark:text-neutral-300">
+  <div class="text-neutral-600 dark:text-neutral-300">
+    <nav role="navigation" class="flex items-center space-x-1 font-medium text-sm">
+      <%%= link_to "Activity", "#", class: "py-2 px-4 bg-neutral-50 inline-block rounded-full text-neutral-600 dark:bg-neutral-600 dark:text-white", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
+      <%%= link_to "Account", "#", class: "py-2 px-4 rounded-full inline-block dark:transparent dark:text-neutral-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
+      <%%= link_to "Billing", "#", class: "py-2 px-4 rounded-full inline-block dark:transparent dark:text-neutral-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
+      <%%= link_to "Team", "#", class: "py-2 px-4 rounded-full inline-block dark:transparent dark:text-neutral-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
+    </nav>
+  </div>
+   <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+
+<% content_for :js, flush: true do %>
+import { RailsuiTabs } from 'railsui-stimulus'
+application.register('railsui-tabs', RailsuiTabs)
+<% end %>
+
+<%= render_snippet html_filename: "tabs.html", erb_filename: "_tabs.html.erb", js_filename: "index.js" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/tab/_rounded.html.erb

@@ -0,0 +1,104 @@
+<div id="tab-rounded">
+<%= render layout: example, locals: { heading: "Rounded", section: "Tab" } do %>
+
+<%= render preview('neutral') do %>
+<div
+  data-controller="railsui-tabs"
+  data-railsui-tabs-active-tab="py-2 px-4 bg-neutral-50 inline-block rounded-md text-neutral-600 dark:bg-neutral-600 dark:text-white"
+  data-railsui-tabs-inactive-tab="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-neutral-300">
+  <div>
+    <nav role="navigation" class="flex items-center text-neutral-600 space-x-1 font-medium text-sm">
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 bg-neutral-50 inline-block rounded-md text-neutral-600 dark:bg-neutral-600 dark:text-white">Activity</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-neutral-300">Account</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-neutral-300">Billing</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-neutral-300">Team</a>
+    </nav>
+  </div>
+   <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div
+  data-controller="railsui-tabs"
+  data-railsui-tabs-active-tab="py-2 px-4 bg-neutral-50 inline-block rounded-md text-neutral-600 dark:bg-neutral-600 dark:text-white"
+  data-railsui-tabs-inactive-tab="py-2 px-4 rounded-md inline-block dark:bg-neutral-900 dark:text-neutral-300">
+  <div>
+    <nav role="navigation" class="flex items-center text-neutral-600 space-x-1 font-medium text-sm">
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 bg-neutral-50 inline-block rounded-md text-neutral-600 dark:bg-neutral-600 dark:text-white">Activity</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-neutral-300">Account</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-neutral-300">Billing</a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-neutral-300">Team</a>
+    </nav>
+  </div>
+   <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div
+  data-controller="railsui-tabs"
+  data-railsui-tabs-active-tab="py-2 px-4 bg-neutral-50 inline-block rounded-md text-neutral-600 dark:bg-neutral-600 dark:text-white"
+  data-railsui-tabs-inactive-tab="py-2 px-4 rounded-md inline-block dark:bg-neutral-900 dark:text-neutral-300">
+  <div>
+    <nav role="navigation" class="flex items-center text-neutral-600 space-x-1 font-medium text-sm">
+      <%%= link_to "Activity", "#", class: "py-2 px-4 bg-neutral-50 inline-block rounded-md text-neutral-600 dark:bg-neutral-600 dark:text-white", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
+      <%%= link_to "Account", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-neutral-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
+      <%%= link_to "Billing", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-neutral-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
+      <%%= link_to "Team", "#", class: "py-2 px-4 rounded-md inline-block dark:bg-transparent dark:text-neutral-300", data: { action: "click->railsui-tabs#change", railsui_tabs_target: "tab" } %>
+    </nav>
+  </div>
+   <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+
+<% content_for :js, flush: true do %>
+import { RailsuiTabs } from 'railsui-stimulus'
+application.register('railsui-tabs', RailsuiTabs)
+<% end %>
+
+<%= render_snippet html_filename: "tabs.html", erb_filename: "_tabs.html.erb", js_filename: "index.js" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/tab/_vertical.html.erb

@@ -0,0 +1,145 @@
+<div id="tab-vertical">
+<%= render layout: example, locals: { heading: "Vertical", section: "Tab" } do %>
+
+  <div class="prose prose-neutral dark:prose-invert mb-6">
+    <p>Vertical tabs are in use in the settings modal</p>
+  </div>
+
+<%= render preview('neutral') do %>
+<div class="flex" data-controller="railsui-tabs"
+  data-railsui-tabs-active-tab="p-2 whitespace-nowrap flex items-center gap-3 rounded-lg bg-neutral-200/90 dark:bg-neutral-700/80 hover:bg-neutral-100 dark:hover:bg-neutral-700/80 w-full text-sm dark:backdrop-blur-sm transition-colors duration-100"
+  data-railsui-tabs-inactive-tab="p-2 whitespace-nowrap flex items-center gap-3 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700/80 dark:backdrop-blur-sm w-full text-sm transition-colors duration-100">
+
+  <!-- Sidebar Navigation -->
+  <div
+    class="flex flex-col w-full border-r bg-neutral-50 dark:bg-neutral-800/50 border-neutral-200 dark:border-neutral-700 shrink-0 md:w-45 pt-2">
+    <!-- Navigation Tabs -->
+    <nav
+      class="flex items-center px-2 pb-2 overflow-x-auto md:block md:py-0 md:space-y-1 md:flex-1 snap-x snap-mandatory shadow-transparent">
+      <%= render "rui/shared/settings/nav_item", nav_icon: "cog-6-tooth", label: "General" %>
+
+      <%= render "rui/shared/settings/nav_item", nav_icon: "credit-card", label: "Billing" %>
+
+      <%= render "rui/shared/settings/nav_item", nav_icon: "bell", label: "Notifications" %>
+
+      <%= render "rui/shared/settings/nav_item", nav_icon: "user-circle", label: "Personalization" %>
+
+      <%= render "rui/shared/settings/nav_item", nav_icon: "circle-stack", label: "Data controls" %>
+
+      <%= render "rui/shared/settings/nav_item", nav_icon: "lock-closed", label: "Security" %>
+    </nav>
+  </div>
+
+  <!-- Content Area -->
+  <div class="flex flex-col flex-1 md:overflow-hidden">
+    <!-- Tab Content -->
+    <div class="overflow-y-auto md:flex-1">
+
+      <!-- General Tab -->
+      <div data-railsui-tabs-target="panel" class="p-4 md:p-6">
+        <%= render "rui/shared/settings/panels/general" %>
+      </div>
+
+      <!-- Billing Tab -->
+      <div data-railsui-tabs-target="panel" class="p-4 md:p-6">
+        <%= render "rui/shared/settings/panels/billing" %>
+      </div>
+
+      <!-- Notifications Tab -->
+      <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+        <%= render "rui/shared/settings/panels/notifications" %>
+      </div>
+
+      <!-- Personalization Tab -->
+      <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+        <%= render "rui/shared/settings/panels/personalization" %>
+      </div>
+
+      <!-- Data Controls Tab -->
+      <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+        <%= render "rui/shared/settings/panels/data_controls" %>
+      </div>
+
+      <!-- Security Tab -->
+      <div data-railsui-tabs-target="panel" class="hidden px-4 py-6">
+        <%= render "rui/shared/settings/panels/security" %>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<div class="flex" data-controller="railsui-tabs"
+  data-railsui-tabs-active-tab="p-2 whitespace-nowrap flex items-center gap-3 rounded-lg bg-neutral-200/90 dark:bg-neutral-700/80 hover:bg-neutral-100 dark:hover:bg-neutral-700/80 w-full text-sm dark:backdrop-blur-sm transition-colors duration-100"
+  data-railsui-tabs-inactive-tab="p-2 whitespace-nowrap flex items-center gap-3 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700/80 dark:backdrop-blur-sm w-full text-sm transition-colors duration-100">
+
+  <!-- Sidebar Navigation -->
+  <div
+    class="flex flex-col w-full border-r bg-neutral-50 dark:bg-neutral-800/50 border-neutral-200 dark:border-neutral-700 shrink-0 md:w-45 pt-2">
+    <!-- Navigation Tabs -->
+    <nav
+      class="flex items-center px-2 pb-2 overflow-x-auto md:block md:py-0 md:space-y-1 md:flex-1 snap-x snap-mandatory shadow-transparent">
+      <%%= render "rui/shared/settings/nav_item", nav_icon: "cog-6-tooth", label: "General" %>
+
+      <%%= render "rui/shared/settings/nav_item", nav_icon: "credit-card", label: "Billing" %>
+
+      <%%= render "rui/shared/settings/nav_item", nav_icon: "bell", label: "Notifications" %>
+
+      <%%= render "rui/shared/settings/nav_item", nav_icon: "user-circle", label: "Personalization" %>
+
+      <%%= render "rui/shared/settings/nav_item", nav_icon: "circle-stack", label: "Data controls" %>
+
+      <%%= render "rui/shared/settings/nav_item", nav_icon: "lock-closed", label: "Security" %>
+    </nav>
+  </div>
+
+  <!-- Content Area -->
+  <div class="flex flex-col flex-1 md:overflow-hidden">
+    <!-- Tab Content -->
+    <div class="overflow-y-auto md:flex-1">
+
+      <!-- General Tab -->
+      <div data-railsui-tabs-target="panel" class="p-4 md:p-6">
+        <%%= render "rui/shared/settings/panels/general" %>
+      </div>
+
+      <!-- Billing Tab -->
+      <div data-railsui-tabs-target="panel" class="p-4 md:p-6">
+        <%%= render "rui/shared/settings/panels/billing" %>
+      </div>
+
+      <!-- Notifications Tab -->
+      <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+        <%%= render "rui/shared/settings/panels/notifications" %>
+      </div>
+
+      <!-- Personalization Tab -->
+      <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+        <%%= render "rui/shared/settings/panels/personalization" %>
+      </div>
+
+      <!-- Data Controls Tab -->
+      <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+        <%%= render "rui/shared/settings/panels/data_controls" %>
+      </div>
+
+      <!-- Security Tab -->
+      <div data-railsui-tabs-target="panel" class="hidden px-4 py-6">
+        <%%= render "rui/shared/settings/panels/security" %>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :js, flush: true do %>
+import { RailsuiTabs } from 'railsui-stimulus'
+application.register('railsui-tabs', RailsuiTabs)
+<% end %>
+
+<%= render_snippet html_filename: "tabs.html", erb_filename: "_tabs.html.erb", js_filename: "index.js" %>
+<% end %>
+<% end %>
+</div>

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

@@ -0,0 +1,138 @@
+<div id="tab-with-icons">
+  <%= render layout: example, locals: { heading: "With icons", section: "Tab" } do %>
+
+    <%= render preview('neutral') do %>
+<div data-controller="railsui-tabs" data-railsui-tabs-active-tab="py-3 px-4 border-b border-neutral-500 flex items-center space-x-3 whitespace-nowrap text-neutral-600 dark:text-neutral-400 dark:border-neutral-400 rounded-t" data-railsui-tabs-inactive-tab="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b border-transparent dark:border-neutral-600">
+  <div class="border-neutral-200 border-b text-neutral-600 dark:text-neutral-200 dark:border-neutral-600 text-sm font-medium font-tiktok">
+    <nav role="navigation" class="-mb-px flex items-center flex-wrap">
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change"
+        class="py-3 px-4 border-b border-neutral-500 flex items-center space-x-3 whitespace-nowrap text-neutral-600 dark:text-neutral-400 dark:border-neutral-400 rounded-t">
+        <%= icon "chat-bubble-oval-left-ellipsis", class:  "size-5" %>
+        <span>Activity</span>
+      </a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-neutral-600">
+        <%= icon "user-circle", class:  "size-5" %>
+        <span>Account</span>
+      </a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-neutral-600">
+        <%= icon "credit-card", class:  "size-5" %>
+        <span>Billing</span>
+      </a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-neutral-600">
+        <%= icon "users", class:  "size-5" %>
+        <span>Team</span>
+      </a>
+    </nav>
+  </div>
+  <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-tabs" data-railsui-tabs-active-tab="py-3 px-4 border-b border-neutral-500 flex items-center space-x-3 whitespace-nowrap text-neutral-600 dark:text-neutral-400 dark:border-neutral-400 rounded-t" data-railsui-tabs-inactive-tab="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b border-transparent dark:border-neutral-600">
+  <div class="border-neutral-200 border-b text-neutral-600 dark:text-neutral-200 dark:border-neutral-600 text-sm font-medium">
+    <nav role="navigation" class="-mb-px flex items-center flex-wrap">
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change"
+        class="py-3 px-4 border-b border-neutral-500 flex items-center space-x-3 whitespace-nowrap text-neutral-600 dark:text-neutral-400 dark:border-neutral-400 rounded-t">
+        <%%= icon "chat-bubble-oval-left-ellipsis", class: "size-5" %>
+        <span>Activity</span>
+      </a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-neutral-600">
+        <%%= icon "user-circle", class: "size-5" %>
+        <span>Account</span>
+      </a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-neutral-600">
+        <%%= icon "credit-card", class:  "size-5" %>
+        <span>Billing</span>
+      </a>
+      <a href="#" data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change" class="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-neutral-600">
+        <%%= icon "users", class: "size-5" %>
+        <span>Team</span>
+      </a>
+    </nav>
+  </div>
+  <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div data-controller="railsui-tabs" data-railsui-tabs-active-tab="py-3 px-4 border-b border-neutral-500 flex items-center space-x-3 whitespace-nowrap text-neutral-600 dark:text-neutral-400 dark:border-neutral-400 rounded-t" data-railsui-tabs-inactive-tab="py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b border-transparent dark:border-neutral-600">
+  <div class="border-neutral-200 border-b text-neutral-600 dark:text-neutral-200 dark:border-neutral-600 text-sm font-medium">
+    <nav role="navigation" class="-mb-px flex items-center flex-wrap">
+      <%%= link_to "#", class: "py-3 px-4 border-b border-neutral-500 flex items-center space-x-3 whitespace-nowrap text-neutral-600 dark:text-neutral-400 dark:border-neutral-400 rounded-t", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do %>
+        <%%= icon "chat-bubble-oval-left-ellipsis", class: "size-5" %>
+        <span>Activity</span>
+      <%% end %>
+
+      <%%= link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap   border-b bg-transparent dark:bg-transparent dark:border-neutral-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do %>
+        <%%= icon "user-circle", class: "size-5" %>
+        <span>Account</span>
+      <%% end %>
+
+      <%%= link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-neutral-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do %>
+        <%%= icon "credit-card", class: "size-5" %>
+        <span>Billing</span>
+      <%% end %>
+
+      <%%= link_to "#", class: "py-3 px-4 flex items-center space-x-3 whitespace-nowrap border-b bg-transparent dark:bg-transparent dark:border-neutral-600", data: { railsui_tabs_target: "tab", action: "click->railsui-tabs#change" } do %>
+        <%%= icon "users", class: "size-5" %>
+        <span>Team</span>
+      <%% end %>
+    </nav>
+  </div>
+
+  <div class="p-4" data-railsui-tabs-target="panel">
+    Some activities...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Account information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Billing information...
+  </div>
+
+  <div class="hidden p-4" data-railsui-tabs-target="panel">
+    Team information...
+  </div>
+</div>
+<% end %>
+
+
+<% content_for :js, flush: true do %>
+import { RailsuiTabs } from 'railsui-stimulus'
+application.register('railsui-tabs', RailsuiTabs)
+<% end %>
+
+<%= render_snippet html_filename: "tabs.html", erb_filename: "_tabs.html.erb", js_filename: "index.js" %>
+<% end %>
+<% end %>
+</div>