railsui 3.1.4 → 3.2.0

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

@@ -0,0 +1,92 @@
+<div id="accordion-flush">
+<%= render layout: example, locals: { heading: "Flush", section: "Accordion" } do %>
+
+<%= render preview('neutral') do %>
+<dl class="font-tiktok my-6 divide-y divide-neutral-100 dark:divide-neutral-700">
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-semibold leading-7 text-neutral-900 group-open:text-primary-600 [&::-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-neutral-600 dark:text-neutral-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-neutral-600 dark:text-neutral-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="py-6 font-tiktok">
+      <div class="prose prose-slate 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-semibold leading-7 text-neutral-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-neutral-600 dark:text-neutral-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-neutral-600 dark:text-neutral-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-slate 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-semibold leading-7 text-neutral-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-neutral-600 dark:text-neutral-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-neutral-600 dark:text-neutral-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-slate 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-neutral-100 dark:divide-neutral-700">
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-semibold leading-7 text-neutral-900 group-open:text-primary-600 [&::-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-neutral-600 dark:text-neutral-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-neutral-600 dark:text-neutral-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-slate 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...
+      </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-semibold leading-7 text-neutral-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-neutral-600 dark:text-neutral-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-neutral-600 dark:text-neutral-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-slate 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...
+      </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-semibold leading-7 text-neutral-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-neutral-600 dark:text-neutral-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-neutral-600 dark:text-neutral-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-slate 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...
+      </div>
+    </div>
+  </details>
+</dl>
+<% end %>
+
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

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

@@ -0,0 +1,45 @@
+<div id="alert-dismissable">
+<%= render layout: example, locals: { heading: "Dismissable", section: "Alert" } do %>
+
+<%= render preview('neutral') do %>
+<div class="bg-primary-50/90 text-primary-700 rounded p-4 text-sm flex justify-between items-center dark:bg-primary-50/10 dark:text-primary-100 font-tiktok">
+  <div class="flex-1">
+    <p class="text-primary-800 dark:text-primary-300 font-semibold">A dismissible notice</p>
+    <p class="leading-snug my-1 pr-4">Your account settings have been successfully updated. The changes will take effect immediately.</p>
+  </div>
+  <button type="button" class="size-8 rounded-full bg-transparent hover:bg-primary-700 transition ease-in-out duration-300 flex items-center justify-center group dark:hover:bg-primary-500">
+    <%= icon "x-mark", class: "size-5 text-primary-700 group-hover:text-primary-100 dark:text-primary-300 dark:group-hover:text-primary-100", title: "Dismiss" %>
+  </button>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="bg-primary-50/90 text-primary-700 rounded p-4 text-sm flex justify-between items-center dark:bg-primary-50/10 dark:text-primary-100">
+  <div class="flex-1">
+    <p class="text-primary-800 dark:text-primary-300 font-semibold">A dismissible notice</p>
+    <p class="leading-snug my-1 pr-4">Your account settings have been successfully updated. The changes will take effect immediately.</p>
+  </div>
+  <button type="button" class="size-8 rounded-full bg-transparent hover:bg-primary-700 transition ease-in-out duration-300 flex items-center justify-center group dark:hover:bg-primary-500">
+    <%%= icon "x-mark", class: "size-5 text-primary-700 group-hover:text-primary-100 dark:text-primary-300 dark:group-hover:text-primary-100", title: "Dismiss" %>
+  </button>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= tag.div class: "bg-primary-50/90 text-primary-700 rounded p-4 text-sm flex justify-between items-center dark:bg-primary-50/10 dark:text-primary-100" do %>
+  <%%= tag.div class: "flex-1" do %>
+    <%%= tag.p "A dismissible notice", class: "text-primary-800 dark:text-primary-300 font-semibold" %>
+    <%%= tag.p "Your account settings have been successfully updated. The changes will take effect immediately.", class: "leading-snug my-1 pr-4" %>
+  <%% end %>
+
+  <%%= tag.button class: "size-8 rounded-full bg-transparent hover:bg-primary-700 transition ease-in-out duration-300 flex items-center justify-center group dark:hover:bg-primary-500", type: "button" do %>
+    <%%= icon "x-mark", class: "size-5 text-primary-700 group-hover:text-primary-100 dark:text-primary-300 dark:group-hover:text-primary-100", title: "Dismiss" %>
+  <%% end %>
+<%% end %>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

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

@@ -0,0 +1,32 @@
+<div id="alert-border-accent">
+<%= render layout: example, locals: { heading: "Border accent", section: "Alert" } do %>
+
+<%= render preview('neutral') do %>
+<div class="bg-blue-50/90 text-blue-700 border-l-4 border-blue-700 py-4 pr-4 pl-6 text-sm dark:bg-blue-50/10 dark:text-blue-50 dark:border-blue-400 font-tiktok">
+  <p class="text-blue-800 dark:text-blue-400 font-semibold">Upcoming maintenance alert</p>
+  <p class="leading-snug my-1">We'll be undergoing routine maintenance on Jan 1, 2024 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 :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 pr-4 pl-6 text-sm dark:bg-blue-50/10 dark:text-blue-50 dark:border-blue-400">
+  <p class="text-blue-800 dark:text-blue-400 font-semibold">Upcoming maintenance alert</p>
+  <p class="leading-snug my-1">We'll be undergoing routine maintenance on Jan 1, 2024 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 %>
+<%%= tag.div class: "bg-blue-50/90 text-blue-700 border-l-4 border-blue-700 py-4 pr-4 pl-6 text-sm dark:bg-blue-50/10 dark:text-blue-50 dark:border-blue-400" do %>
+  <%%= tag.p "Upcoming maintenance alert", class: "text-blue-800 dark:text-blue-400 font-semibold" %>
+  <%%= tag.p  class: "leading-snug my-1" do %>
+    We'll be undergoing routine maintenance on Jan 1, 2024 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 %>
+<%% end %>
+<% end %>
+
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/alert/_with_actions.html.erb

@@ -0,0 +1,57 @@
+<div id="alert-with-actions">
+  <%= render layout: example, locals: { heading: "With actions", section: "Alert" } do %>
+
+<%= render preview('neutral') do %>
+  <div class="bg-primary-50/90 text-primary-700 p-4 rounded text-sm sm:flex md:items-center justify-between dark:bg-primary-50/10 dark:text-primary-50 dark:border dark:border-primary-400/30 font-tiktok">
+    <div class="flex items-start justify-between gap-3">
+      <%= icon "star", class:  "text-primary-500 size-5 flex-shrink-0 dark:text-primary-400", variant: :solid %>
+      <div class="flex-1">
+        <p class="text-primary-800 dark:text-primary-300 font-semibold">Your response is requested</p>
+        <p class="leading-snug my-1">Vote for your favorite dog breed today.</p>
+      </div>
+    </div>
+    <div class="flex items-center space-x-6 sm:pt-0 pt-3 sm:pl-0 sm:pr-4 pr-0 pl-8">
+      <a href="#" class="btn-link">Vote now</a>
+      <a href="#" class="btn-link">Dismiss</a>
+    </div>
+  </div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="bg-primary-50/90 text-primary-700 p-4 rounded text-sm sm:flex md:items-center justify-between dark:bg-primary-50/10 dark:text-primary-50 dark:border dark:border-primary-400/30">
+  <div class="flex items-start justify-between gap-3">
+    <%%= icon "star", class: "text-primary-500 size-5 flex-shrink-0 dark:text-primary-400", variant: :solid %>
+    <div class="flex-1">
+      <p class="text-primary-800 dark:text-primary-300 font-semibold">Your response is requested</p>
+      <p class="leading-snug my-1">Vote for your favorite dog breed today.</p>
+    </div>
+  </div>
+  <div class="flex items-center space-x-6 sm:pt-0 pt-3 sm:pl-0 sm:pr-4 pr-0 pl-8">
+    <a href="#" class="btn-link">Vote now</a>
+    <a href="#" class="btn-link">Dismiss</a>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= tag.div class:"bg-primary-50/90 text-primary-700 p-4 rounded text-sm sm:flex md:items-center justify-between dark:bg-primary-50/10 dark:text-primary-50 dark:border dark:border-primary-400/30" do %>
+  <%%= tag.div class: "flex items-start justify-between gap-3" do %>
+    <%%= icon "star", class:  "text-primary-500 size-5 flex-shrink-0 dark:text-primary-400", variant: :solid %>
+    <%%= tag.div class: "flex-1"  do %>
+      <%%= tag.p "Your response is requested", class: "text-primary-800 dark:text-primary-300 font-semibold" %>
+      <%%= tag.p "Vote for your favorite dog breed today.", class: "leading-snug my-1" %>
+    <%% end %>
+    <%%= tag.div class: "flex items-center space-x-6 sm:pt-0 pt-3 sm:pl-0 sm:pr-4 pr-0 pl-8" do %>
+      <%%= link_to "Vote now", "#", class: "btn-link" %>
+      <%%= link_to "Dismiss", "#", class: "btn-link" %>
+    <%% end %>
+  <%% end %>
+<%% end %>
+<% end %>
+
+
+    <%= render_snippet %>
+  <% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/alert/_with_description.html.erb

@@ -0,0 +1,41 @@
+<div id="alert-with-description">
+<%= render layout: example, locals: { heading: "With description", section: "Alert" } do %>
+
+<%= render preview('neutral') do %>
+<div class="bg-yellow-50/90 text-yellow-700 p-4 rounded flex items-start justify-between gap-3 text-sm dark:bg-yellow-300/10 dark:border dark:border-yellow-400/30 dark:text-yellow-50 dark:selection:bg-yellow-50/10 font-tiktok">
+  <%= icon "exclamation-triangle", class: "text-yellow-400 size-5 flex-shrink-0 dark:text-yellow-400/90", variant: :solid %>
+  <div class="flex-1">
+    <p class="text-yellow-800 dark:text-yellow-400/90 font-semibold">Action required</p>
+    <p class="leading-snug my-1">Your account password will expire in 3 days. Please update your password to maintain access to your account.</p>
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="bg-yellow-50/90 text-yellow-700 p-4 rounded flex items-start justify-between gap-3 text-sm dark:bg-yellow-300/10 dark:border dark:border-yellow-400/30 dark:text-yellow-50 dark:selection:bg-yellow-50/10">
+  <%%= icon "exclamation-triangle", class: "text-yellow-400 size-5 flex-shrink-0 dark:text-yellow-400/90", variant: :solid %>
+  <div class="flex-1">
+    <p class="text-yellow-800 dark:text-yellow-400/90 font-semibold">Action required</p>
+    <p class="leading-snug my-1">Your account password will expire in 3 days. Please update your password to maintain access to your account.</p>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= tag.div class:"bg-yellow-50/90 text-yellow-700 p-4 rounded flex items-start justify-between gap-3 text-sm dark:bg-yellow-300/10 dark:border dark:border-yellow-400/20 dark:text-yellow-50 dark:selection:bg-yellow-50/10" do %>
+  <%%= icon "exclamation-triangle", class: "text-yellow-400 size-5 flex-shrink-0 dark:text-yellow-400/90", variant: :solid %>
+  <%% tag.div class: "flex-1"  do %>
+    <%%= tag.p "Action required", class: "text-yellow-800 dark:text-yellow-400/90 font-semibold" %>
+    <%% tag.p class: "leading-snug my-1" do %>
+      Your account password will expire in 3 days. Please update your password to maintain access to your account.
+    <%% end %>
+  <%% end %>
+<%% end %>
+<% end %>
+
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/alert/_with_list.html.erb

@@ -0,0 +1,46 @@
+<div id="alert-with-list">
+  <%= render layout: example, locals: { heading: "With list", section: "Alert" } do %>
+
+<%= render preview('neutral') do %>
+  <div class="bg-rose-50/90 text-rose-700 p-4 rounded flex items-start justify-between space-x-3 text-sm dark:bg-rose-400/10 dark:border dark:border-rose-400/20 dark:text-rose-50 dark:selection:bg-rose-50/10 font-tiktok">
+    <%= icon "shield-exclamation", class: "text-rose-500 size-5 flex-shrink-0 dark:text-rose-400", variant: :solid %>
+    <div class="flex-1">
+      <p class="text-rose-800 font-semibold dark:text-rose-300">There was 1 error trying to process your request.</p>
+      <ul class="list-disc pl-4 mt-1">
+        <li>Your name must be as cool as Andy.</li>
+      </ul>
+    </div>
+  </div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="bg-rose-50/90 text-rose-700 p-4 rounded flex items-start justify-between space-x-3 text-sm dark:bg-rose-400/10 dark:border dark:border-rose-400/20 dark:text-rose-50 dark:selection:bg-rose-50/10">
+  <%%= icon "shield-exclamation", class: "text-rose-500 size-5 flex-shrink-0 dark:text-rose-400", variant: :solid %>
+  <div class="flex-1">
+    <p class="text-rose-800 font-semibold dark:text-rose-300">There was 1 error trying to process your request.</p>
+    <ul class="list-disc pl-4 mt-1">
+      <li>Your name must be as cool as Andy.</li>
+    </ul>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<%%= tag.div class:"bg-rose-50/90 text-rose-700 p-4 rounded flex items-start justify-between space-x-3 text-sm dark:bg-rose-400/10 dark:border dark:border-rose-400/20 dark:text-rose-50 dark:selection:bg-rose-50/10" do %>
+  <%%= icon "shield-exclamation", class: "text-rose-500 size-5 flex-shrink-0 dark:text-rose-400", variant: :solid %>
+  <%%= tag.div class: "flex-1"  do %>
+    <%%= tag.p "There was 1 error trying to process your request.", class: "text-rose-800 font-semibold dark:text-rose-300" %>
+    <%%= tag.ul class: "list-disc pl-4 mt-1" do %>
+      <%%= tag.li "Your name must be as cool as Andy" %>
+      <%% end %>
+    <%% end %>
+  <%% end %>
+<%% end %>
+<% end %>
+
+
+    <%= render_snippet %>
+  <% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/avatar/_circle.html.erb

@@ -0,0 +1,53 @@
+<div id="avatar-circle">
+<%= render layout: example, locals: { heading: "Circle", section: "Avatar" } do %>
+
+<%= render preview("neutral") do %>
+<div class="flex items-center gap-8 font-tiktok">
+  <%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-8 rounded-full object-cover" %>
+  <%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-12 rounded-full object-cover" %>
+  <%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-16 rounded-full object-cover" %>
+  <%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-20 rounded-full object-cover" %>
+  <%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-24 rounded-full object-cover" %>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<!-- size-8 -->
+<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-8 rounded-full object-cover" %>
+
+<!-- size-12-->
+<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-12 rounded-full object-cover" %>
+
+<!-- size-16-->
+<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-16 rounded-full object-cover" %>
+
+<!-- size-20-->
+<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-20 rounded-full object-cover" %>
+
+<!-- size-24-->
+<%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-24 rounded-full object-cover" %>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- size-8 -->
+<%%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-8 rounded-full object-cover" %>
+
+<!-- size-12-->
+<%%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-12 rounded-full object-cover" %>
+
+<!-- size-16-->
+<%%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-16 rounded-full object-cover" %>
+
+<!-- size-20-->
+<%%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-20 rounded-full object-cover" %>
+
+<!-- size-24-->
+<%%= image_tag demo_avatar_url(id: 50, variant: "women"), class: "size-24 rounded-full object-cover" %>
+<% end %>
+
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>

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

@@ -0,0 +1,53 @@
+<div id="avatar-rounded">
+<%= render layout: example, locals: { heading: "Rounded", section: "Avatar" } do %>
+
+<%= render preview("neutral") do %>
+<div class="flex items-center gap-8 font-tiktok">
+  <%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-8 rounded-md object-cover" %>
+  <%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-12 rounded-md object-cover" %>
+  <%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-16 rounded-md object-cover" %>
+  <%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-20 rounded-md object-cover" %>
+  <%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-24 rounded-md object-cover" %>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<!-- size-8 -->
+<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-8 rounded-md object-cover", alt: "Avatar" %>
+
+<!-- size-12 -->
+<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-12 rounded-md object-cover", alt: "Avatar" %>
+
+<!-- size-16 -->
+<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-16 rounded-md object-cover", alt: "Avatar" %>
+
+<!-- size-20 -->
+<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-20 rounded-md object-cover", alt: "Avatar" %>
+
+<!-- size-24 -->
+<%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-24 rounded-md object-cover", alt: "Avatar" %>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- size-8 -->
+<%%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-8 rounded-md object-cover", alt: "Avatar" %>
+
+<!-- size-12 -->
+<%%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-12 rounded-md object-cover", alt: "Avatar" %>
+
+<!-- size-16 -->
+<%%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-16 rounded-md object-cover", alt: "Avatar" %>
+
+<!-- size-20 -->
+<%%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-20 rounded-md object-cover", alt: "Avatar" %>
+
+<!-- size-24 -->
+<%%= image_tag demo_avatar_url(id: 35, variant: "men"), class: "size-24 rounded-md object-cover", alt: "Avatar" %>
+<% end %>
+
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/badge/_basic.html.erb

@@ -0,0 +1,70 @@
+<div id="badge-basic">
+<%= render layout: example, locals: { heading: "Basic", section: "Badge" } do %>
+
+<%= render preview('neutral') do %>
+<div class="font-tiktok">
+<span class="rounded bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs dark:bg-neutral-500/20 dark:text-neutral-200">Gray</span>
+
+<span class="rounded bg-red-100 text-red-800 font-medium px-2 py-1 text-xs dark:bg-red-500/20 dark:text-red-300">Red</span>
+
+<span class="rounded bg-orange-100 text-orange-700 font-medium px-2 py-1 text-xs dark:bg-orange-500/20 dark:text-orange-300">Orange</span>
+
+<span class="rounded bg-yellow-100 text-yellow-700 font-medium px-2 py-1 text-xs dark:text-yellow-300 dark:bg-yellow-500/20">Yellow</span>
+
+<span class="rounded bg-green-100 text-green-800 font-medium px-2 py-1 text-xs dark:text-green-300 dark:bg-green-500/20">Green</span>
+
+<span class="rounded bg-blue-100 text-blue-800 font-medium px-2 py-1 leading-tight text-xs dark:text-blue-300 dark:bg-blue-500/20">Blue</span>
+
+<span class="rounded bg-indigo-100 text-indigo-800 font-medium px-2 py-1 leading-tight text-xs dark:text-indigo-300 dark:bg-indigo-500/20">Indigo</span>
+
+<span class="rounded bg-purple-100 text-purple-800 font-medium px-2 py-1 leading-tight text-xs dark:text-purple-300 dark:bg-purple-500/20">Purple</span>
+
+<span class="rounded bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs dark:text-pink-300 dark:bg-pink-500/20">Pink</span>
+
+<span class="rounded bg-white-100 text-neutral-800 border border-neutral-200 font-medium px-2 py-1 leading-tight text-xs dark:border-none dark:bg-white/10 dark:text-white/80">White</span>
+</div>
+<% end %>
+
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<!-- Gray -->
+<span class="rounded bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs dark:bg-neutral-500/20 dark:text-neutral-200">Gray</span>
+
+<!-- Red -->
+<span class="rounded bg-red-100 text-red-800 font-medium px-2 py-1 text-xs dark:bg-red-500/20 dark:text-red-300">Red</span>
+
+<!-- Orange -->
+<span class="rounded bg-orange-100 text-orange-700 font-medium px-2 py-1 text-xs dark:bg-orange-500/20 dark:text-orange-300">Orange</span>
+
+<!-- Yellow -->
+<span class="rounded bg-yellow-100 text-yellow-700 font-medium px-2 py-1 text-xs dark:text-yellow-300 dark:bg-yellow-500/20">Yellow</span>
+
+<!-- Green -->
+<span class="rounded bg-green-100 text-green-800 font-medium px-2 py-1 text-xs dark:text-green-300 dark:bg-green-500/20">Green</span>
+
+<!-- Blue -->
+<span class="rounded bg-blue-100 text-blue-800 font-medium px-2 py-1 leading-tight text-xs dark:text-blue-300 dark:bg-blue-500/20">Blue</span>
+
+<!-- Indigo -->
+<span class="rounded bg-indigo-100 text-indigo-800 font-medium px-2 py-1 leading-tight text-xs dark:text-indigo-300 dark:bg-indigo-500/20">Indigo</span>
+
+<!-- Purple -->
+<span class="rounded bg-purple-100 text-purple-800 font-medium px-2 py-1 leading-tight text-xs dark:text-purple-300 dark:bg-purple-500/20">Purple</span>
+
+<!-- Pink -->
+<span class="rounded bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs dark:text-pink-300 dark:bg-pink-500/20">Pink</span>
+
+<!-- White -->
+<span class="rounded bg-white-100 text-neutral-800 border border-neutral-200 font-medium px-2 py-1 leading-tight text-xs dark:border-none dark:bg-white/10 dark:text-white/80">White</span>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+
+<% end %>
+
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/badge/_outline.html.erb

@@ -0,0 +1,67 @@
+<div id="badge-outline">
+<%= render layout: example, locals: { heading: "Outline", section: "Badge" } do %>
+
+<%= render preview('neutral') do %>
+<span class="rounded text-neutral-800 font-medium px-2 py-1 text-xs border border-neutral-800/60 bg-neutral-50/60 dark:bg-neutral-500/20 dark:text-neutral-200 dark:border-neutral-500/40">Gray</span>
+
+<span class="rounded bg-red-50/30 text-red-600 font-medium px-2 py-1 text-xs border border-red-600/60  dark:border-red-700/50 dark:bg-red-500/20 dark:text-red-300">Red</span>
+
+<span class="rounded bg-orange-50/30 text-orange-600 font-medium px-2 py-1 text-xs border border-orange-600/60  dark:border-orange-700/50 dark:bg-orange-500/20 dark:text-orange-300">Orange</span>
+
+<span class="rounded bg-yellow-50/30 text-yellow-700 font-medium px-2 py-1 text-xs border border-yellow-500/60 dark:text-yellow-300 dark:bg-yellow-500/20 dark:border-yellow-700/50">Yellow</span>
+
+<span class="rounded bg-green-50/30 text-green-700 font-medium px-2 py-1 text-xs border border-green-500/60 dark:text-green-300 dark:bg-green-500/20 dark:border-green-700/50">Green</span>
+
+<span class="rounded bg-blue-50/30 text-blue-800 font-medium px-2 py-1 leading-tight text-xs border border-blue-600/60 dark:text-blue-300 dark:bg-blue-500/20 dark:border-blue-700/50">Blue</span>
+
+<span class="rounded bg-indigo-50/30 text-indigo-800 font-medium px-2 py-1 leading-tight text-xs border border-indigo-600/60 dark:text-indigo-300 dark:bg-indigo-500/20 dark:border-indigo-700/50">Indigo</span>
+
+<span class="rounded bg-purple-50/30 text-purple-800 font-medium px-2 py-1 leading-tight text-xs border border-indigo-600/60 dark:text-purple-300 dark:bg-purple-500/20 dark:border-purple-700/50">Purple</span>
+
+<span class="rounded bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs border border-pink-600/60 dark:text-pink-300 dark:bg-pink-500/20 dark:border-pink-700/50">Pink</span>
+
+<span class="rounded bg-white-100 text-neutral-800 border border-neutral-400 font-medium px-2 py-1 leading-tight text-xs dark:bg-white/10 dark:text-white/80 dark:border-white/30">White</span>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<!-- Gray -->
+<span class="rounded text-neutral-800 font-medium px-2 py-1 text-xs border border-neutral-800/60 bg-neutral-50/60 dark:bg-neutral-500/20 dark:text-neutral-200 dark:border-neutral-500/40">Gray</span>
+
+<!-- Red -->
+<span class="rounded bg-red-50/30 text-red-600 font-medium px-2 py-1 text-xs border border-red-600/60  dark:border-red-700/50 dark:bg-red-500/20 dark:text-red-300">Red</span>
+
+<!-- Orange -->
+<span class="rounded bg-orange-50/30 text-orange-600 font-medium px-2 py-1 text-xs border border-orange-600/60  dark:border-orange-700/50 dark:bg-orange-500/20 dark:text-orange-300">Orange</span>
+
+<!-- Yellow -->
+<span class="rounded bg-yellow-50/30 text-yellow-700 font-medium px-2 py-1 text-xs border border-yellow-500/60 dark:text-yellow-300 dark:bg-yellow-500/20 dark:border-yellow-700/50">Yellow</span>
+
+<!-- Green -->
+<span class="rounded bg-green-50/30 text-green-700 font-medium px-2 py-1 text-xs border border-green-500/60 dark:text-green-300 dark:bg-green-500/20 dark:border-green-700/50">Green</span>
+
+<!-- Blue -->
+<span class="rounded bg-blue-50/30 text-blue-800 font-medium px-2 py-1 leading-tight text-xs border border-blue-600/60 dark:text-blue-300 dark:bg-blue-500/20 dark:border-blue-700/50">Blue</span>
+
+<!-- Indigo -->
+<span class="rounded bg-indigo-50/30 text-indigo-800 font-medium px-2 py-1 leading-tight text-xs border border-indigo-600/60 dark:text-indigo-300 dark:bg-indigo-500/20 dark:border-indigo-700/50">Indigo</span>
+
+<!-- Purple -->
+<span class="rounded bg-purple-50/30 text-purple-800 font-medium px-2 py-1 leading-tight text-xs border border-indigo-600/60 dark:text-purple-300 dark:bg-purple-500/20 dark:border-purple-700/50">Purple</span>
+
+<!-- Pink -->
+<span class="rounded bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs border border-pink-600/60 dark:text-pink-300 dark:bg-pink-500/20 dark:border-pink-700/50">Pink</span>
+
+<!-- White -->
+<span class="rounded bg-white-100 text-neutral-800 border border-neutral-400 font-medium px-2 py-1 leading-tight text-xs dark:bg-white/10 dark:text-white/80 dark:border-white/30">White</span>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+
+<% end %>
+
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/badge/_pill.html.erb

@@ -0,0 +1,67 @@
+<div id="badge-pill">
+<%= render layout: example, locals: { heading: "Pill", section: "Badge" } do %>
+
+<%= render preview('neutral') do %>
+<span class="rounded-full bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs dark:bg-neutral-500/20 dark:text-neutral-200">Gray</span>
+
+<span class="rounded-full bg-red-100 text-red-800 font-medium px-2 py-1 text-xs dark:bg-red-500/20 dark:text-red-300">Red</span>
+
+<span class="rounded-full bg-orange-100 text-orange-700 font-medium px-2 py-1 text-xs dark:bg-orange-500/20 dark:text-orange-300">Orange</span>
+
+<span class="rounded-full bg-yellow-100 text-yellow-700 font-medium px-2 py-1 text-xs dark:text-yellow-300 dark:bg-yellow-500/20">Yellow</span>
+
+<span class="rounded-full bg-green-100 text-green-800 font-medium px-2 py-1 text-xs dark:text-green-300 dark:bg-green-500/20">Green</span>
+
+<span class="rounded-full bg-blue-100 text-blue-800 font-medium px-2 py-1 leading-tight text-xs dark:text-blue-300 dark:bg-blue-500/20">Blue</span>
+
+<span class="rounded-full bg-indigo-100 text-indigo-800 font-medium px-2 py-1 leading-tight text-xs dark:text-indigo-300 dark:bg-indigo-500/20">Indigo</span>
+
+<span class="rounded-full bg-purple-100 text-purple-800 font-medium px-2 py-1 leading-tight text-xs dark:text-purple-300 dark:bg-purple-500/20">Purple</span>
+
+<span class="rounded-full bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs dark:text-pink-300 dark:bg-pink-500/20">Pink</span>
+
+<span class="rounded-full bg-white-100 text-neutral-800 border border-neutral-200 font-medium px-2 py-1 leading-tight text-xs dark:border-none dark:bg-white/10 dark:text-white/80">White</span>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<!-- Gray -->
+<span class="rounded-full bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs dark:bg-neutral-500/20 dark:text-neutral-200">Gray</span>
+
+<!-- Red -->
+<span class="rounded-full bg-red-100 text-red-800 font-medium px-2 py-1 text-xs dark:bg-red-500/20 dark:text-red-300">Red</span>
+
+<!-- Orange -->
+<span class="rounded-full bg-orange-100 text-orange-700 font-medium px-2 py-1 text-xs dark:bg-orange-500/20 dark:text-orange-300">Orange</span>
+
+<!-- Yellow -->
+<span class="rounded-full bg-yellow-100 text-yellow-700 font-medium px-2 py-1 text-xs dark:text-yellow-300 dark:bg-yellow-500/20">Yellow</span>
+
+<!-- Green -->
+<span class="rounded-full bg-green-100 text-green-800 font-medium px-2 py-1 text-xs dark:text-green-300 dark:bg-green-500/20">Green</span>
+
+<!-- Blue -->
+<span class="rounded-full bg-blue-100 text-blue-800 font-medium px-2 py-1 leading-tight text-xs dark:text-blue-300 dark:bg-blue-500/20">Blue</span>
+
+<!-- Indigo -->
+<span class="rounded-full bg-indigo-100 text-indigo-800 font-medium px-2 py-1 leading-tight text-xs dark:text-indigo-300 dark:bg-indigo-500/20">Indigo</span>
+
+<!-- Purple -->
+<span class="rounded-full bg-purple-100 text-purple-800 font-medium px-2 py-1 leading-tight text-xs dark:text-purple-300 dark:bg-purple-500/20">Purple</span>
+
+<!-- Pink -->
+<span class="rounded-full bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs dark:text-pink-300 dark:bg-pink-500/20">Pink</span>
+
+<!-- White -->
+<span class="rounded-full bg-white-100 text-neutral-800 border border-neutral-200 font-medium px-2 py-1 leading-tight text-xs dark:border-none dark:bg-white/10 dark:text-white/80">White</span>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+
+<% end %>
+
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>