railsui 3.1.0

data/app/views/railsui/themes/shepherd/components/card/_list_item.html.erb

@@ -0,0 +1,62 @@
+<%# locals: property: image_url('themes/shepherd/property-1.jpg'), title: "Cozy Mountain A-Frame", nickname: "Nature's Nook", listings: "3" %>
+<li class="flex flex-wrap items-center justify-start space-y-3 md:space-y-0 py-6 md:py-4">
+  <div class="md:flex-1 w-full">
+    <a href="#" class="flex md:items-center items-start space-x-3" data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent">
+      <%= image_tag property, class: "md:w-16 w-24 md:h-10 h-16 rounded", alt: title %>
+      <div class="flex-1">
+        <h3 class="font-heading md:text-base text-lg leading-tight text-zinc-700 line-clamp-1 dark:text-zinc-50"><%= title %></h3>
+        <h4 class="font-light md:text-sm text-base text-zinc-500 leading-tight line-clamp-1 dark:text-zinc-300/80"><%= nickname %></h4>
+      </div>
+    </a>
+  </div>
+  <div class="md:w-2/12 w-1/3">
+    <span class="md:hidden text-zinc-600 dark:text-zinc-400 text-sm block mb-2">Listings</span>
+    <span class="block">3</span>
+  </div>
+  <div class="md:w-2/12 w-1/3">
+    <span class="md:hidden text-zinc-600 dark:text-zinc-400 text-sm block mb-2">Sync</span>
+    <%= icon "arrow-path", class: "size-5 text-zinc-600 dark:text-zinc-300/90" %>
+  </div>
+  <div class="md:w-2/12 w-1/3">
+    <span class="md:hidden text-zinc-600 dark:text-zinc-400 text-sm block mb-2">Hosts</span>
+    <%= image_tag demo_avatar_url(id: "32", variant: "men"), alt: "Host", class: "md:w-9 w-5 md:h-9 h-5 rounded-full flex-shrink-0" %>
+  </div>
+  <div class="md:w-1/12 w-full md:pt-0 pt-4">
+    <div data-controller="railsui-dropdown" class="relative md:flex md:justify-end justify-start">
+      <button
+        class="flex relative z-40 md:w-10 md:h-9 py-3 px-4 md:px-0 md:py-0 w-full md:rounded-xl rounded-full bg-white focus:ring-4 focus:ring-zinc-300/30 items-center md:justify-center justify-between border md:border-transparent focus:border-zinc-300 border-zinc-300/80  hover:border-zinc-300  dark:hover:bg-zinc-800 dark:hover:border-zinc-600 dark:focus:bg-zinc-800 dark:focus:border-zinc-500 dark:bg-zinc-700/60 dark:text-white dark:border-zinc-500/30 dark:shadow-zinc-950/40 dark:hover:bg-zinc-800/90 dark:focus:ring-zinc-700/80 dark:focus:border-zinc-400/80"
+        data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
+
+        <%= icon "ellipsis-horizontal", class:  "md:block hidden stroke-current size-6 flex-shrink-0 text-zinc-600/80 dark:text-zinc-200" %>
+
+        <span class="md:hidden block">Actions</span>
+
+        <%= icon "chevron-down", class: "md:hidden block size-4 stroke-current flex-shrink-0 text-zinc-600/80 dark:text-zinc-400" %>
+      </button>
+
+      <ul
+        class="hidden static origin-top-right md:absolute md:top-12 mt-3 md:mt-0 right-0 md:w-48 md:shadow-xl md:rounded-xl rounded-3xl py-2 w-full shadow-zinc-300/20 z-50 bg-white md:text-[15px] text-base border dark:bg-zinc-800 dark:shadow-zinc-950/20 dark:border-zinc-600"
+        data-transition-enter-active="transition ease-out duration-100"
+        data-transition-enter-from="transform opacity-0 scale-95"
+        data-transition-enter-to="transform opacity-100 scale-100"
+        data-transition-leave-active="transition ease-in duration-100"
+        data-transition-leave-from="transform opacity-100 scale-100"
+        data-transition-leave-to="transform opacity-0 scale-95" data-railsui-dropdown-target="menu">
+        <li>
+          <a href="#"
+            class="px-4 md:py-2 py-3 flex items-center justify-between hover:text-zinc-900 text-zinc-700 dark:text-zinc-200 dark:hover:text-white" data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent">
+            <span>Edit property</span>
+            <%= icon "chevron-right", class:  "md:hidden block size-5 stroke-current text-zinc-500/60 dark:text-zinc-400" %>
+          </a>
+        </li>
+        <li>
+          <a href="#"
+            class="px-4 md:py-2 py-3 flex hover:text-zinc-900 text-zinc-700 items-center justify-between dark:text-zinc-200 dark:hover:text-white" data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent">
+            <span>Re-sync</span>
+            <%= icon "chevron-right", class:  "md:hidden block size-5 stroke-current text-zinc-500/60 dark:text-zinc-400" %>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</li>

data/app/views/railsui/themes/shepherd/components/card/_property_card.html.erb

@@ -0,0 +1,140 @@
+<%# Card - Property card %>
+<div id="card-property-card">
+<%= render layout: example, locals: { heading: "Property card", section: "Card" } do %>
+
+<%= render preview "zinc" do %>
+<div class="grid md:w-[300px]">
+<%= render "railsui/themes/shepherd/components/card/preview/property_card", property: image_url('themes/shepherd/property-1.jpg'), title: "Cozy Mountain A-Frame", subtitle: "Nature's Nook" %>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="border border-zinc-300 shadow-xs shadow-zinc-300/20 rounded-lg p-4 dark:shadow-zinc-950/50 dark:bg-zinc-800/90 dark:border-zinc-600/80 dark:focus:ring-zinc-600/30 dark:focus:border-zinc-600">
+  <div class="relative mb-4">
+    <img class="rounded h-[174px] w-full object-cover object-center dark:border dark:border-zinc-600/80 border-transparent" src="https://picsum.photos/600/600" alt="Image of Nature's Nook">
+    <%= image_tag demo_avatar_url(variant: "men", id: "32"), class: "size-10 rounded-full object-cover absolute bottom-2 right-2 border-2 border-white/90", alt: "Avatar" %>
+  </div>
+
+  <h3 class="text-lg font-normal text-zinc-900 dark:text-zinc-100 font-heading">Cozy Mountain A-Frame</h3>
+
+  <h4 class="text-sm text-zinc-500 font-normal dark:text-zinc-400">Nature's Nook</h4>
+
+  <div class="flex items-center pt-6">
+    <div class="flex-1 flex items-center gap-4">
+      <div class="flex items-center gap-2">
+        <%%= icon "home-modern", class: "size-5 text-zinc-600 stroke-current dark:text-zinc-300" %>
+        <span class="text-sm text-zinc-600 dark:text-zinc-300">3 Listings</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <%%= icon "arrow-path", class: "size-4 text-zinc-600 stroke-current dark:text-zinc-300" %>
+        <span class="text-sm text-zinc-600 dark:text-zinc-300">Syncing</span>
+      </div>
+    </div>
+    <div data-controller="railsui-dropdown" class="relative">
+      <button class="bg-transparent hover:bg-zinc-50 rounded-lg px-2 py-1 flex items-center justify-center border border-transparent focus:border-zinc-300/80 focus:bg-white focus:ring-4 focus:ring-zinc-300/20 transition ease-in-out duration-200 group dark:hover:bg-zinc-700 dark:focus:bg-zinc-700 dark:focus:border-zinc-500 dark:focus:ring-zinc-600/70" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
+        <%%= icon "ellipsis-horizontal", class:  "size-6 stroke-current text-zinc-500 dark:text-zinc-400 group-hover:text-zinc-600 group-focus:text-zinc-600 dark:group-hover:text-zinc-200 dark:group-focus:text-zinc-200" %>
+      </button>
+      <ul class="hidden origin-top-right absolute mt-3 top-8 right-0 shadow-xl rounded-xl py-2 md:w-[200px] w-[320px] shadow-zinc-950/20 z-50 bg-white md:text-[15px] text-base border dark:bg-zinc-800 dark:shadow-zinc-950/20 dark:border-zinc-600 font-heading dark:text-zinc-200 text-zinc-700 border-zinc-300" data-transition-enter-active="transition ease-out duration-100" data-transition-enter-from="transform opacity-0 scale-95"
+      data-transition-enter-to="transform opacity-100 scale-100"
+      data-transition-leave-active="transition ease-in duration-100"
+      data-transition-leave-from="transform opacity-100 scale-100"
+      data-transition-leave-to="transform opacity-0 scale-95" data-railsui-dropdown-target="menu">
+        <li>
+          <a href="#"
+    class="px-4 py-1.5 hover:text-zinc-950 flex items-center justify-between dark:hover:text-white">
+            <span>Edit property</span>
+            <%%= icon "chevron-right", class: "md:hidden block size-5 stroke-current text-zinc-500/60 dark:text-zinc-400" %>
+          </a>
+        </li>
+        <li>
+          <a href="#"
+    class="px-4 py-1.5 hover:text-zinc-950 flex items-center justify-between dark:hover:text-white">
+            <span>Re-sync</span>
+            <%%= icon "chevron-right", class: "md:hidden block size-5 stroke-current text-zinc-500/60 dark:text-zinc-400" %>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="border border-zinc-300 shadow-xs shadow-zinc-300/20 rounded-lg p-4 dark:shadow-zinc-950/50 dark:bg-zinc-800/90 dark:border-zinc-600/80 dark:focus:ring-zinc-600/30 dark:focus:border-zinc-600">
+  <div class="relative mb-4">
+    <%%= image_tag "https://picsum.photos/600/600", class: "rounded h-[174px] w-full object-cover object-center dark:border dark:border-zinc-600/80 border-transparent", alt: "Property image alt tag" %>
+    <%%= image_tag "path/to/avatar.png", class: "size-10 rounded-full object-cover absolute bottom-2 right-2 border-2 border-white/90", alt: "Avatar" %>
+  </div>
+
+  <h3 class="text-lg font-normal text-zinc-900 dark:text-zinc-100 font-heading">Cozy Mountain A-Frame</h3>
+
+  <h4 class="text-sm text-zinc-500 font-normal dark:text-zinc-400">Nature's Nook</h4>
+
+  <div class="flex items-center pt-6">
+    <div class="flex-1 flex items-center gap-4">
+      <div class="flex items-center gap-2">
+        <%%= icon "home-modern", class: "size-5 text-zinc-600 stroke-current dark:text-zinc-300" %>
+        <span class="text-sm text-zinc-600 dark:text-zinc-300">3 Listings</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <%%= icon "arrow-path", class: "size-4 text-zinc-600 stroke-current dark:text-zinc-300" %>
+        <span class="text-sm text-zinc-600 dark:text-zinc-300">Syncing</span>
+      </div>
+    </div>
+    <div data-controller="railsui-dropdown" class="relative">
+      <button class="bg-transparent hover:bg-zinc-50 rounded-lg px-2 py-1 flex items-center justify-center border border-transparent focus:border-zinc-300/80 focus:bg-white focus:ring-4 focus:ring-zinc-300/20 transition ease-in-out duration-200 group dark:hover:bg-zinc-700 dark:focus:bg-zinc-700 dark:focus:border-zinc-500 dark:focus:ring-zinc-600/70" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
+        <%%= icon "ellipsis-horizontal", class: "size-6 stroke-current text-zinc-500 dark:text-zinc-400 group-hover:text-zinc-600 group-focus:text-zinc-600 dark:group-hover:text-zinc-200 dark:group-focus:text-zinc-200" %>
+      </button>
+      <ul class="hidden origin-top-right absolute mt-3 top-8 right-0 shadow-xl rounded-xl py-2 md:w-[200px] w-[320px] shadow-zinc-950/20 z-50 bg-white md:text-[15px] text-base border dark:bg-zinc-800 dark:shadow-zinc-950/20 dark:border-zinc-600 font-heading dark:text-zinc-200 text-zinc-700" data-transition-enter-active="transition ease-out duration-100" data-transition-enter-from="transform opacity-0 scale-95" data-transition-enter-to="transform opacity-100 scale-100" data-transition-leave-active="transition ease-in duration-100" data-transition-leave-from="transform opacity-100 scale-100" data-transition-leave-to="transform opacity-0 scale-95" data-railsui-dropdown-target="menu">
+        <li>
+          <%%= link_to "Edit property", "#", class: "px-4 py-1.5 hover:text-zinc-950 flex items-center justify-between dark:hover:text-white" %>
+            <span>Edit property</span>
+            <%%= icon "chevron-right", class:  "md:hidden block size-5 stroke-current text-zinc-500/60 dark:text-zinc-400" %>
+          <%% end %>
+        </li>
+        <li>
+          <%%= link_to "Re-sync", "#", class: "px-4 py-1.5 hover:text-zinc-950 flex items-center justify-between dark:hover:text-white" %>
+            <span>Re-sync</span>
+            <%%= icon "chevron-right", class: "md:hidden block size-5 stroke-current text-zinc-500/60 dark:text-zinc-400" %>
+          <%% end %>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+.border.shadow-xs.rounded-lg.p-4.dark:focus:border-zinc-600{class: "border-zinc-300 shadow-zinc-300/20 dark:shadow-zinc-950/50 dark:bg-zinc-800/90 dark:border-zinc-600/80 dark:focus:ring-zinc-600/30"}
+  .relative.mb-4
+    = image_tag "https://picsum.photos/600/600", class: "rounded h-[174px] w-full object-cover object-center dark:border dark:border-zinc-600/80 border-transparent", alt: "Property image alt tag"
+    = image_tag "path/to/avatar.png", class: "size-10 rounded-full object-cover absolute bottom-2 right-2 border-2 border-white/90", alt: "Avatar"
+  %h3.text-lg.font-normal.text-zinc-900.dark:text-zinc-100.font-heading Cozy Mountain A-Frame
+  %h4.text-sm.text-zinc-500.font-normal.dark:text-zinc-400 Nature's Nook
+  .flex.items-center.pt-6
+    .flex-1.flex.items-center.gap-4
+      .flex.items-center.gap-2
+        = icon "home-modern", class: "size-5 text-zinc-600 stroke-current dark:text-zinc-300"
+        %span.text-sm.text-zinc-600.dark:text-zinc-300 3 Listings
+      .flex.items-center.gap-2
+        = icon "arrow-path", class: "size-4 text-zinc-600 stroke-current dark:text-zinc-300"
+        %span.text-sm.text-zinc-600.dark:text-zinc-300 Syncing
+    .relative{"data-controller" => "railsui-dropdown"}
+      %button.bg-transparent.hover:bg-zinc-50.rounded-lg.px-2.py-1.flex.items-center.justify-center.border.border-transparent.focus:bg-white.focus:ring-4.transition.ease-in-out.duration-200.group.dark:hover:bg-zinc-700.dark:focus:bg-zinc-700.dark:focus:border-zinc-500{class: "focus:border-zinc-300/80 focus:ring-zinc-300/20 dark:focus:ring-zinc-600/70", "data-action" => "click->railsui-dropdown#toggle click@window->railsui-dropdown#hide"}
+        = icon "ellipsis-horizontal", class: "size-6 stroke-current text-zinc-500 dark:text-zinc-400 group-hover:text-zinc-600 group-focus:text-zinc-600 dark:group-hover:text-zinc-200 dark:group-focus:text-zinc-200"
+      %ul.hidden.origin-top-right.absolute.mt-3.top-8.right-0.shadow-xl.rounded-xl.py-2.z-50.bg-white.text-base.border.dark:bg-zinc-800.dark:border-zinc-600.font-heading.dark:text-zinc-200.text-zinc-700{class: "md:w-[200px] w-[320px] shadow-zinc-950/20 md:text-[15px] dark:shadow-zinc-950/20", "data-railsui-dropdown-target" => "menu", "data-transition-enter-active" => "transition ease-out duration-100", "data-transition-enter-from" => "transform opacity-0 scale-95", "data-transition-enter-to" => "transform opacity-100 scale-100", "data-transition-leave-active" => "transition ease-in duration-100", "data-transition-leave-from" => "transform opacity-100 scale-100", "data-transition-leave-to" => "transform opacity-0 scale-95"}
+        %li
+          = link_to "Edit property", "#", class: "px-4 py-1.5 hover:text-zinc-950 flex items-center justify-between dark:hover:text-white"
+          %span Edit property
+          = icon "chevron-right", class:  "md:hidden block size-5 stroke-current text-zinc-500/60 dark:text-zinc-400"
+        %li
+          = link_to "Re-sync", "#", class: "px-4 py-1.5 hover:text-zinc-950 flex items-center justify-between dark:hover:text-white"
+          %span Re-sync
+          = icon "chevron-right", class: "md:hidden block size-5 stroke-current text-zinc-500/60 dark:text-zinc-400"
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/shepherd/components/card/_property_user_card.html.erb

@@ -0,0 +1,78 @@
+<%# Card - Property User card %>
+<div id="card-property-card">
+<%= render layout: example, locals: { heading: "Property user card", section: "Card" } do %>
+
+<%= render preview "zinc" do %>
+ <div class="grid md:w-[300px]">
+  <%= render "railsui/themes/shepherd/components/card/preview/property_user_card",
+    name: "Dannie White",
+    avatar_id: "78",
+    avatar_variant: "women",
+    property: image_url('themes/shepherd/property-3.jpg'),
+    title: "Mountain Vista Chalet",
+    booking_date: "Aug 24, 3pm"  %>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div
+  class="border border-zinc-300/90 shadow-sm shadow-zinc-300/20 rounded-lg p-4 dark:shadow-zinc-950/50 dark:bg-zinc-800/90 dark:border-zinc-600/80 dark:focus:ring-zinc-600/30 dark:focus:border-zinc-600">
+  <%= image_tag "https://picsum.photos/600/600", alt: "Image of Mountain Vista Chalet", class: "rounded-lg h-[174px] w-full object-cover object-center shadow dark:shadow-none dark:border dark:border-zinc-600/80 border-transparent mb-4" %>
+  <div class="flex items-center gap-3">
+    <%= image_tag demo_avatar_url(variant: "women", id: "78"), class: "size-10 rounded-full object-cover", alt: "Dannie White" %>
+    <div class="flex-1">
+      <p class="font-medium dark:text-white font-heading text-zinc-900">Dannie White</p>
+      <p class="font-light text-sm text-zinc-600 font-heading dark:text-zinc-400">Mountain Vista Chalet</p>
+    </div>
+  </div>
+  <div class="flex justify-between items-end pt-3">
+    <div class="flex items-center gap-2">
+      <%%= icon "clock", class: "size-5 text-zinc-500 stroke-current dark:text-zinc-300" %>
+      <span class="text-zinc-600 dark:text-zinc-400 text-sm">Aug 24, 3pm</span>
+    </div>
+    <a href="#" class="btn btn-white">View</a>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div
+  class="border border-zinc-300/90 shadow-sm shadow-zinc-300/20 rounded-lg p-4 dark:shadow-zinc-950/50 dark:bg-zinc-800/90 dark:border-zinc-600/80 dark:focus:ring-zinc-600/30 dark:focus:border-zinc-600">
+  <%%= image_tag "https://picsum.photos/600/600", alt: "Image of Mountain Vista Chalet", class: "rounded-lg h-[174px] w-full object-cover object-center shadow dark:shadow-none dark:border dark:border-zinc-600/80 border-transparent" %>
+  <div class="flex items-center gap-3 mt-4">
+    <%%= image_tag demo_avatar_url(variant: "women", id: "78"), class: "size-10 rounded-full object-cover", alt: "Dannie White" %>
+    <div class="flex-1">
+      <p class="font-medium dark:text-white font-heading text-zinc-900">Dannie White</p>
+      <p class="font-light text-sm text-zinc-600 font-heading dark:text-zinc-400">Mountain Vista Chalet</p>
+    </div>
+  </div>
+  <div class="flex justify-between items-end pt-3">
+    <div class="flex items-center gap-2">
+      <%%= icon "clock", class: "size-5 text-zinc-500 stroke-current dark:text-zinc-300" %>
+      <span class="text-zinc-600 dark:text-zinc-400 text-sm">Aug 24, 3pm</span>
+    </div>
+    <%%= link_to "View", "#", class: "btn btn-white" %>
+  </div>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+.border.shadow-sm.rounded-lg.p-4.dark:focus:border-zinc-600{class: "border-zinc-300/90 shadow-zinc-300/20 dark:shadow-zinc-950/50 dark:bg-zinc-800/90 dark:border-zinc-600/80 dark:focus:ring-zinc-600/30"}
+  = image_tag "https://picsum.photos/600/600", alt: "Image of Mountain Vista Chalet", class: "rounded-lg h-[174px] w-full object-cover object-center shadow dark:shadow-none dark:border dark:border-zinc-600/80 border-transparent mb-4"
+  .flex.items-center.gap-3
+    = image_tag demo_avatar_url(variant: "women", id: "78"), class: "size-10 rounded-full object-cover", alt: "Dannie White"
+    .flex-1
+      %p.font-medium.dark:text-white.font-heading.text-zinc-900 Dannie White
+      %p.font-light.text-sm.text-zinc-600.font-heading.dark:text-zinc-400 Mountain Vista Chalet
+  .flex.justify-between.items-end.pt-3
+    .flex.items-center.gap-2
+      = icon "clock", class: "size-5 text-zinc-500 stroke-current dark:text-zinc-300"
+      %span.text-zinc-600.dark:text-zinc-400.text-sm Aug 24, 3pm
+    = link_to "View", "#", class: "btn btn-white"
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/shepherd/components/card/_user_card_with_actions.html.erb

@@ -0,0 +1,70 @@
+<%# Card - User card with actions %>
+<div id="card-user-card-with-actions">
+<%= render layout: example, locals: { heading: "User card with action", section: "Card" } do %>
+
+<%= render preview "zinc" do %>
+<div class="rounded-lg shadow-xs shadow-zinc-400/20 bg-white p-6 dark:bg-zinc-800 dark:text-white border border-zinc-300 dark:border-zinc-600/80 dark:shadow-zinc-950/40 flex items-center flex-wrap">
+  <%= image_tag demo_avatar_url(id: "32", variant: "men"), class: "object-cover size-12 rounded-full flex-shrink-0" %>
+  <div class="pl-3 flex-1 flex flex-col items-start space-y-px text-zinc-700">
+    <p class="font-medium dark:text-white font-heading">John Doe</p>
+    <p class="text-sm dark:text-zinc-300">Property Manager at <a href="#" class="underline" data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent">Pizza Hut</a></p>
+  </div>
+  <div class="flex items-center lg:pt-0 pt-3 gap-3 w-full lg:w-auto">
+    <a data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent" href="#" class="btn btn-white flex items-center gap-3 group">
+      <%= icon "envelope", class: "size-5 text-zinc-400 dark:text-zinc-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" %>
+      <span>Message</span>
+    </a>
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="rounded-lg shadow-xs shadow-zinc-400/20 bg-white p-6 dark:bg-zinc-800 dark:text-white border border-zinc-300 dark:border-zinc-600/80 dark:shadow-zinc-950/40 flex items-center flex-wrap">
+  <%= image_tag demo_avatar_url(id: "32", variant: "men"), class: "object-cover size-12 rounded-full flex-shrink-0" %>
+  <div class="pl-3 flex-1 flex flex-col items-start space-y-px text-zinc-700">
+    <p class="font-medium dark:text-white font-heading">John Doe</p>
+    <p class="text-sm dark:text-zinc-300">Property Manager at <a href="#" class="underline">Pizza Hut</a></p>
+  </div>
+  <div class="flex items-center lg:pt-0 pt-3 gap-3 w-full lg:w-auto">
+    <a href="#" class="btn btn-white flex items-center gap-3 group">
+      <%%= icon "envelope", class: "size-5 text-zinc-400 dark:text-zinc-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" %>
+      <span>Message</span>
+    </a>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="rounded-lg shadow-xs shadow-zinc-400/20 bg-white p-6 dark:bg-zinc-800 dark:text-white border border-zinc-300 dark:border-zinc-600/80 dark:shadow-zinc-950/40 flex items-center flex-wrap">
+  <%%= image_tag demo_avatar_url(id: "32", variant: "men"), class: "object-cover size-12 rounded-full flex-shrink-0" %>
+  <div class="pl-3 flex-1 flex flex-col items-start space-y-px text-zinc-700">
+    <p class="font-medium dark:text-white font-heading">John Doe</p>
+    <p class="text-sm dark:text-zinc-300">Property Manager at <%%= link_to "Pizza Hut", "#", class: "underline" %></p>
+  </div>
+  <div class="flex items-center lg:pt-0 pt-3 gap-3 w-full lg:w-auto">
+    <%%= link_to "#", class: "btn btn-white flex items-center gap-3 group" do %>
+      <%%= icon "envelope", class: "size-5 text-zinc-400 dark:text-zinc-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" %>
+      <span>Message</span>
+    <%% end %>
+  </div>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+.rounded-lg.shadow-xs.bg-white.p-6.dark:bg-zinc-800.dark:text-white.border.flex.items-center.flex-wrap{class: "shadow-zinc-400/20 dark:border-zinc-600/80 dark:shadow-zinc-950/40 border-zinc-300"}
+  = image_tag demo_avatar_url(id: "32", variant: "men"), class: "object-cover size-12 rounded-full flex-shrink-0"
+  .pl-3.flex-1.flex.flex-col.items-start.space-y-px.text-zinc-700
+    %p.font-medium.dark:text-white.font-heading John Doe
+    %p.text-sm.dark:text-zinc-300
+      Property Manager at #{link_to "Pizza Hut", "#", class: "underline"}
+  .flex.items-center.lg:pt-0.pt-3.gap-3.w-full.lg:w-auto
+    = link_to "#", class: "btn btn-white flex items-center gap-3 group" do
+      = icon "envelope", class: "size-5 text-zinc-400 dark:text-zinc-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+      %span Message
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/shepherd/components/card/_with_action.html.erb

@@ -0,0 +1,97 @@
+
+<%# Card - with action %>
+<div id="card-with-action">
+<%= render layout: example, locals: { heading: "With action", section: "Card" } do %>
+
+
+<%= render preview "zinc"  do %>
+<div class="rounded-lg shadow-xs shadow-zinc-400/20 bg-white p-6 dark:bg-zinc-800 dark:text-white border border-zinc-300 dark:border-zinc-600/80 dark:shadow-zinc-950/40">
+  <div class="pb-6 mb-4 flex items-center justify-between flex-wrap">
+    <h1 class="text-4xl font-semibold font-heading text-zinc-900 dark:text-zinc-100 tracking-tight">Posts</h1>
+    <a href="#" class="btn btn-primary" data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent">New post</a>
+  </div>
+  <div id="posts" class="divide-y divide-zinc-200 dark:divide-zinc-700 pointer-events-none opacity-40 select-none">
+    <!-- post 1 content -->
+    <article id="post_1" class="prose prose-zinc dark:prose-invert first:pt-0 py-6">
+      <div>
+        <p class="mb-0 font-semibold font-heading">
+          Title
+        </p>
+        <p class="my-0">
+          Example post title
+        </p>
+      </div>
+      <div>
+        <p class="mb-0 font-semibold font-heading">
+          Content
+        </p>
+        <p class="my-0">
+          Example post content
+        </p>
+      </div>
+      <time class="text-zinc-600 dark:text-zinc-400 text-xs mt-2" datetime="February 23, 2023 12:37">Created 1 minute ago</time>
+      <div class="not-prose mt-6">
+        <a href="#" class="btn btn-white inline-flex" data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent">View post</a>
+      </div>
+    </article>
+
+    <!-- post 2 content -->
+    <article id="post_2" class="prose prose-zinc dark:prose-invert first:pt-0 py-6">
+      <div>
+        <p class="mb-0 font-semibold font-heading">
+          Title
+        </p>
+        <p class="my-0">
+          Example post title 2
+        </p>
+      </div>
+      <div>
+        <p class="mb-0 font-semibold font-heading">
+          Content
+        </p>
+        <p class="my-0">
+          Example post content
+        </p>
+      </div>
+      <time class="text-zinc-600 dark:text-zinc-400 text-xs mt-2" datetime="February 23, 2023 12:37">Created 1 minute ago</time>
+      <div class="not-prose mt-6">
+        <a href="#" class="btn btn-white inline-flex" data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent">View post</a>
+      </div>
+    </article>
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="rounded-lg shadow-xs shadow-zinc-400/20 bg-white p-6 dark:bg-zinc-800 dark:text-white border border-zinc-300 dark:border-zinc-600/80 dark:shadow-zinc-950/40">
+  <div class="pb-6 mb-4 flex items-center justify-between flex-wrap">
+    <h1 class="text-4xl font-semibold font-heading text-zinc-900 dark:text-zinc-100 tracking-tight">Posts</h1>
+    <a href="#" class="btn btn-primary">New post</a>
+  </div>
+  <!-- content -->
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="rounded-lg shadow-xs shadow-zinc-400/20 bg-white p-6 dark:bg-zinc-800 dark:text-white border border-zinc-300 dark:border-zinc-600/80 dark:shadow-zinc-950/40">
+  <div class="pb-6 mb-4 flex items-center justify-between flex-wrap">
+    <h1 class="text-4xl font-semibold font-heading text-zinc-900 dark:text-zinc-100 tracking-tight">Posts</h1>
+    <%%= link_to "New post", "#", class: "btn btn-primary" %>
+  </div>
+  <!-- content -->
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+.rounded-lg.shadow-xs.bg-white.p-6.dark:bg-zinc-800.dark:text-white.border{class: "shadow-zinc-400/20 dark:border-zinc-600/80 dark:shadow-zinc-950/40 border-zinc-300"}
+  .pb-6.mb-4.flex.items-center.justify-between.flex-wrap
+    %h1.text-4xl.font-semibold.font-heading.text-zinc-900.dark:text-zinc-100.tracking-tight Posts
+    = link_to "New post", "#", class: "btn btn-primary"
+  / content
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/shepherd/components/card/_with_header.html.erb

@@ -0,0 +1,57 @@
+<%# Card - With header %>
+<div id="card-with-header">
+<%= render layout: example, locals: { heading: "With header", section: "Card" } do %>
+<%= render preview "zinc" do %>
+<div class="rounded-lg shadow-xs shadow-zinc-400/20 bg-white p-6 dark:bg-zinc-800 dark:text-white border border-zinc-300 dark:border-zinc-600/80 dark:shadow-zinc-950/40">
+  <div class="-mx-6 border-b border-zinc-200 dark:border-zinc-700 px-6 pb-4 mb-4">
+    <h3 class="text-3xl font-bold font-heading text-zinc-900 dark:text-zinc-100 tracking-tight">Properties</h3>
+    <p class="text-base text-zinc-700 tracking-normal mt-3 lg:mb-0 mb-3 dark:text-zinc-300">Group, manage, and study your properties using Shepherd.</p>
+  </div>
+
+  <div id="properties-list" class="opacity-25 pointer-events-none select-none">
+    <div class="text-left my-8" data-controller="railsui-select-all">
+      <div class="flex items-center justify-start">
+        <div class="font-medium md:w-auto md:block hidden flex-1">Property</div>
+        <div class="font-medium md:w-2/12 md:block hidden">Listings</div>
+        <div class="font-medium md:w-2/12 md:block hidden">Sync</div>
+        <div class="font-medium md:w-2/12 md:block hidden">Hosts</div>
+        <div class="md:w-1/12 md:block hidden"></div>
+      </div>
+      <ul class="divide-y divide-zinc-200/80 dark:divide-zinc-700">
+        <%= render "railsui/themes/shepherd/components/card/list_item", property: image_url('themes/shepherd/property-1.jpg'), title: "Cozy Mountain A-Frame", nickname: "Nature's Nook", listings: "3"  %>
+
+        <%= render "railsui/themes/shepherd/components/card/list_item", property: image_url('themes/shepherd/property-2.jpg'), title: "Alpine Retreat Haven", nickname: "The Haven", listings: "3" %>
+
+        <%= render "railsui/themes/shepherd/components/card/list_item",  property: image_url('themes/shepherd/property-3.jpg'), title: "Mountain Vista Chalet", nickname: "The Mountain Majesty", listings: "3" %>
+      </ul>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="rounded-lg shadow-xs shadow-zinc-400/20 bg-white p-6 dark:bg-zinc-800 dark:text-white border border-zinc-300 dark:border-zinc-600/80 dark:shadow-zinc-950/40">
+  <div class="-mx-6 border-b border-zinc-200 dark:border-zinc-700 px-6 pb-4 mb-4">
+    <h3 class="text-3xl font-bold font-heading text-zinc-900 dark:text-zinc-100 tracking-tight">Properties</h3>
+    <p class="text-base text-zinc-700 tracking-normal mt-3 lg:mb-0 mb-3 dark:text-zinc-300">Group, manage, and study your properties using Shepherd.</p>
+  </div>
+  <!-- content -->
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+
+<% end %>
+
+<% content_for :haml, flush: true do %>
+.rounded-lg.shadow-xs.bg-white.p-6.dark:bg-zinc-800.dark:text-white.border.border-zinc-300{class: "shadow-zinc-400/20 dark:border-zinc-600/80 dark:shadow-zinc-950/40"}
+  .-mx-6.border-b.border-zinc-200.dark:border-zinc-700.px-6.pb-4.mb-4
+    %h3.text-3xl.font-bold.font-heading.text-zinc-900.dark:text-zinc-100.tracking-tight Properties
+    %p.text-base.text-zinc-700.tracking-normal.mt-3.lg:mb-0.mb-3.dark:text-zinc-300 Group, manage, and study your properties using Shepherd.
+  / content
+<% end %>
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/shepherd/components/card/preview/_property_card.html.erb

@@ -0,0 +1,50 @@
+<%# locals: property: image_url('themes/shepherd/property-1.jpg'), title: "Cozy Mountain A-Frame", subtitle: "Nature's Nook" %>
+
+<div class="border border-zinc-300 shadow-xs shadow-zinc-300/20 rounded-lg p-4 dark:shadow-zinc-950/50 dark:bg-zinc-800/90 dark:border-zinc-600/80 dark:focus:ring-zinc-600/30 dark:focus:border-zinc-600">
+  <div class="relative mb-4">
+    <%= image_tag property, class: "rounded h-[174px] w-full object-cover object-center dark:border dark:border-zinc-600/80 border-transparent", alt: "Image of Nature's Nook" %>
+    <%= image_tag demo_avatar_url(variant: "men", id: "32"), class: "size-10 rounded-full object-cover absolute bottom-2 right-2 border-2 border-white/90", alt: "Avatar" %>
+  </div>
+
+  <h3 class="text-lg font-normal text-zinc-900 dark:text-zinc-100 font-heading"><%= title %></h3>
+
+  <h4 class="text-sm text-zinc-500 font-normal dark:text-zinc-400"><%= subtitle %></h4>
+
+  <div class="flex items-center pt-6">
+    <div class="flex-1 flex items-center gap-4">
+      <div class="flex items-center gap-2">
+        <%= icon "home-modern", class: "size-5 text-zinc-600 stroke-current dark:text-zinc-300" %>
+        <span class="text-sm text-zinc-600 dark:text-zinc-300">3 Listings</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <%= icon "arrow-path", class: "size-4 text-zinc-600 stroke-current dark:text-zinc-300" %>
+        <span class="text-sm text-zinc-600 dark:text-zinc-300">Syncing</span>
+      </div>
+    </div>
+    <div data-controller="railsui-dropdown" class="relative">
+      <button class="bg-transparent hover:bg-zinc-50 rounded-lg px-2 py-1 flex items-center justify-center border border-transparent focus:border-zinc-300/80 focus:bg-white focus:ring-4 focus:ring-zinc-300/20 transition ease-in-out duration-200 group dark:hover:bg-zinc-700 dark:focus:bg-zinc-700 dark:focus:border-zinc-500 dark:focus:ring-zinc-600/70" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
+        <%= icon "ellipsis-horizontal", class:  "size-6 stroke-current text-zinc-500 dark:text-zinc-400 group-hover:text-zinc-600 group-focus:text-zinc-600 dark:group-hover:text-zinc-200 dark:group-focus:text-zinc-200" %>
+      </button>
+      <ul class="hidden origin-top-right absolute mt-3 top-8 right-0 shadow-lg rounded-xl py-2 md:w-[200px] w-[320px] shadow-zinc-950/20 z-50 bg-white md:text-[15px] text-base border dark:bg-zinc-800 dark:shadow-zinc-950/20 dark:border-zinc-600 font-heading dark:text-zinc-200 text-zinc-700 border-zinc-300" data-transition-enter-active="transition ease-out duration-100" data-transition-enter-from="transform opacity-0 scale-95"
+      data-transition-enter-to="transform opacity-100 scale-100"
+      data-transition-leave-active="transition ease-in duration-100"
+      data-transition-leave-from="transform opacity-100 scale-100"
+      data-transition-leave-to="transform opacity-0 scale-95" data-railsui-dropdown-target="menu">
+        <li>
+          <a href="#"
+    class="px-4 py-1.5 hover:text-zinc-950 flex items-center justify-between dark:hover:text-white">
+            <span>Edit property</span>
+            <%= icon "chevron-right", class: "md:hidden block size-5 stroke-current text-zinc-500/60 dark:text-zinc-400" %>
+          </a>
+        </li>
+        <li>
+          <a href="#"
+    class="px-4 py-1.5 hover:text-zinc-950 flex items-center justify-between dark:hover:text-white">
+            <span>Re-sync</span>
+            <%= icon "chevron-right", class: "md:hidden block size-5 stroke-current text-zinc-500/60 dark:text-zinc-400" %>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>

data/app/views/railsui/themes/shepherd/components/card/preview/_property_user_card.html.erb

@@ -0,0 +1,20 @@
+<%# locals: name: "Dannie White", avatar_id: "78", avatar_variant: "women", property: image_url('themes/shepherd/property-3.jpg'), title: "Mountain Vista Chalet",booking_date: "Aug 24, 3pm" %>
+<div
+  class="border border-zinc-300/90 shadow-xs shadow-zinc-300/20 rounded-lg p-4 dark:shadow-zinc-950/50 dark:bg-zinc-800/90 dark:border-zinc-600/80 dark:focus:ring-zinc-600/30 dark:focus:border-zinc-600">
+  <%= image_tag property, alt: "Image of #{title}", class: "rounded-lg h-[174px] w-full object-cover object-center shadow dark:shadow-none dark:border dark:border-zinc-600/80 border-transparent mb-4" %>
+  <div class="flex items-center gap-3">
+    <%= image_tag demo_avatar_url(variant: avatar_variant, id: avatar_id), class: "size-10 rounded-full object-cover", alt: name %>
+    <div class="flex-1">
+      <p class="font-medium dark:text-white font-heading text-zinc-900"><%= name %></p>
+      <p class="font-light text-sm text-zinc-600 font-heading dark:text-zinc-400"><%= title %></p>
+    </div>
+  </div>
+  <div class="flex justify-between items-end pt-3">
+    <div class="flex items-center gap-2">
+      <%= icon "clock", class: "size-5 text-zinc-500 stroke-current dark:text-zinc-300" %>
+      <span class="text-sm text-zinc-600 dark:text-zinc-300"><%= booking_date %></span>
+    </div>
+
+    <%= link_to "View", "#", class: "btn btn-white", data: { controller: "railsui-prevent", action: "click->railsui-prevent#prevent" } %>
+  </div>
+</div>