m9sh 0.2.1 → 0.2.2

data/app/views/docs/components/sidebar.html.erb

@@ -0,0 +1,597 @@
+<%= render Docs::ComponentPageComponent.new(title: "Sidebar") do |page| %>
+  <% page.with_header(
+    name: "Sidebar",
+    description: "A composable, themeable sidebar component with collapsible navigation and responsive behavior."
+  ) %>
+
+  <% page.with_installation(component_name: "sidebar") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: sidebar_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Basic Sidebar -->
+    <div class="my-6 space-y-4">
+      <h3 class="text-lg font-semibold">Basic Sidebar</h3>
+      <div class="rounded-lg border border-border bg-card overflow-hidden">
+        <div class="h-[500px] w-full">
+          <%= render M9sh::SidebarProviderComponent.new do %>
+        <%= render M9sh::SidebarComponent.new(collapsible: :none) do |sidebar| %>
+          <% sidebar.with_header do %>
+            <div class="flex items-center gap-2">
+              <div class="h-8 w-8 rounded-md bg-primary text-primary-foreground flex items-center justify-center font-bold">
+                M
+              </div>
+              <span class="font-semibold">My App</span>
+            </div>
+          <% end %>
+          <% sidebar.with_sidebar_content do %>
+            <%= render M9sh::SidebarGroupComponent.new do |group| %>
+              <% group.with_label do %>
+                Application
+              <% end %>
+              <% group.with_group_content do %>
+                <%= render M9sh::SidebarMenuComponent.new do %>
+                  <%= render M9sh::SidebarMenuItemComponent.new do %>
+                    <%= render M9sh::SidebarMenuButtonComponent.new(href: "#", active: true) do %>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
+                      Dashboard
+                    <% end %>
+                  <% end %>
+                  <%= render M9sh::SidebarMenuItemComponent.new do %>
+                    <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"/><path d="m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9"/><path d="M12 3v6"/></svg>
+                      Projects
+                    <% end %>
+                  <% end %>
+                  <%= render M9sh::SidebarMenuItemComponent.new do %>
+                    <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
+                      Settings
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+          <% sidebar.with_footer do %>
+            <div class="flex items-center gap-2">
+              <div class="h-8 w-8 rounded-full bg-muted flex items-center justify-center text-sm font-medium">
+                JD
+              </div>
+              <div class="flex-1 group-data-[state=collapsed]/sidebar:hidden">
+                <p class="text-sm font-medium">John Doe</p>
+                <p class="text-xs text-muted-foreground">john@example.com</p>
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+        <%= render M9sh::SidebarInsetComponent.new do %>
+          <header class="flex h-16 items-center gap-2 border-b px-4">
+            <%= render M9sh::SidebarTriggerComponent.new %>
+            <h1 class="text-lg font-semibold">Page Title</h1>
+          </header>
+          <div class="flex-1 p-4">
+            <p>Main content area</p>
+          </div>
+          <% end %>
+        <% end %>
+        </div>
+      </div>
+      <details class="rounded-lg border border-border" open="false">
+        <summary class="cursor-pointer px-4 py-2 space-x-1 text-sm font-medium hover:bg-accent">View Code</summary>
+        <div class="border-t border-border p-4">
+          <%= render Docs::CodeBlockComponent.new(
+            code: sidebar_usage_code,
+            language: "erb"
+          ) %>
+        </div>
+      </details>
+    </div>
+
+    <!-- Collapsible Icon Mode -->
+    <div class="my-6 space-y-4">
+      <h3 class="text-lg font-semibold">Collapsible Icon Mode</h3>
+      <div class="rounded-lg border border-border bg-card overflow-hidden">
+        <div class="h-[500px] w-full">
+          <%= render M9sh::SidebarProviderComponent.new(default_open: false) do %>
+        <%= render M9sh::SidebarComponent.new(collapsible: :icon) do |sidebar| %>
+          <% sidebar.with_header do %>
+            <div class="flex items-center gap-2">
+              <div class="h-8 w-8 rounded-md bg-primary text-primary-foreground flex items-center justify-center font-bold">
+                M
+              </div>
+              <span class="font-semibold group-data-[state=collapsed]/sidebar:hidden">My App</span>
+            </div>
+          <% end %>
+          <% sidebar.with_sidebar_content do %>
+            <%= render M9sh::SidebarGroupComponent.new do |group| %>
+              <% group.with_group_content do %>
+                <%= render M9sh::SidebarMenuComponent.new do %>
+                  <%= render M9sh::SidebarMenuItemComponent.new do %>
+                    <%= render M9sh::SidebarMenuButtonComponent.new(href: "#", active: true) do %>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
+                      Dashboard
+                    <% end %>
+                  <% end %>
+                  <%= render M9sh::SidebarMenuItemComponent.new do %>
+                    <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"/><path d="m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9"/><path d="M12 3v6"/></svg>
+                      Projects
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+        <%= render M9sh::SidebarInsetComponent.new do %>
+          <header class="flex h-16 items-center gap-2 border-b px-4">
+            <%= render M9sh::SidebarTriggerComponent.new %>
+            <h1 class="text-lg font-semibold">Collapsible (Icon Mode)</h1>
+          </header>
+          <div class="flex-1 p-4">
+            <p>Click the trigger to collapse the sidebar to icon-only mode.</p>
+          </div>
+          <% end %>
+        <% end %>
+        </div>
+      </div>
+      <details class="rounded-lg border border-border" open="false">
+        <summary class="cursor-pointer px-4 py-2 space-x-1 text-sm font-medium hover:bg-accent">View Code</summary>
+        <div class="border-t border-border p-4">
+          <%= render Docs::CodeBlockComponent.new(
+            code: sidebar_collapsible_code,
+            language: "erb"
+          ) %>
+        </div>
+      </details>
+    </div>
+
+    <!-- With Groups and Labels -->
+    <div class="my-6 space-y-4">
+      <h3 class="text-lg font-semibold">With Groups and Labels</h3>
+      <div class="rounded-lg border border-border bg-card overflow-hidden">
+        <div class="h-[500px] w-full">
+          <%= render M9sh::SidebarProviderComponent.new do %>
+        <%= render M9sh::SidebarComponent.new(collapsible: :none) do |sidebar| %>
+          <% sidebar.with_header do %>
+            <div class="flex items-center gap-2">
+              <div class="h-8 w-8 rounded-md bg-primary text-primary-foreground flex items-center justify-center font-bold">
+                M
+              </div>
+              <span class="font-semibold">My App</span>
+            </div>
+          <% end %>
+          <% sidebar.with_sidebar_content do %>
+            <%= render M9sh::SidebarGroupComponent.new do |group| %>
+              <% group.with_label do %>
+                Platform
+              <% end %>
+              <% group.with_group_content do %>
+                <%= render M9sh::SidebarMenuComponent.new do %>
+                  <%= render M9sh::SidebarMenuItemComponent.new do %>
+                    <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                      Dashboard
+                    <% end %>
+                  <% end %>
+                  <%= render M9sh::SidebarMenuItemComponent.new do %>
+                    <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                      Analytics
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+
+            <%= render M9sh::SidebarGroupComponent.new do |group| %>
+              <% group.with_label do %>
+                Settings
+              <% end %>
+              <% group.with_group_content do %>
+                <%= render M9sh::SidebarMenuComponent.new do %>
+                  <%= render M9sh::SidebarMenuItemComponent.new do %>
+                    <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                      Profile
+                    <% end %>
+                  <% end %>
+                  <%= render M9sh::SidebarMenuItemComponent.new do %>
+                    <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                      Preferences
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+        <%= render M9sh::SidebarInsetComponent.new do %>
+          <header class="flex h-16 items-center gap-2 border-b px-4">
+            <%= render M9sh::SidebarTriggerComponent.new %>
+            <h1 class="text-lg font-semibold">Grouped Navigation</h1>
+          </header>
+          <div class="flex-1 p-4">
+            <p>Sidebar with multiple groups and labels.</p>
+          </div>
+          <% end %>
+        <% end %>
+        </div>
+      </div>
+      <details class="rounded-lg border border-border" open="false">
+        <summary class="cursor-pointer px-4 py-2 space-x-1 text-sm font-medium hover:bg-accent">View Code</summary>
+        <div class="border-t border-border p-4">
+          <%= render Docs::CodeBlockComponent.new(
+            code: sidebar_with_groups_code,
+            language: "erb"
+          ) %>
+        </div>
+      </details>
+    </div>
+
+    <!-- App Sidebar with M9sh Components -->
+    <div class="my-6 space-y-4">
+      <h3 class="text-lg font-semibold">App Sidebar with Cards</h3>
+      <p class="text-sm text-muted-foreground">A complete example using M9sh components for sidebar navigation and content cards.</p>
+      <div class="rounded-lg border border-border bg-card overflow-hidden">
+        <div class="h-[700px] w-full">
+          <%= render M9sh::SidebarProviderComponent.new(background: :sidebar) do %>
+            <%= render M9sh::SidebarComponent.new(collapsible: :icon, show_border: false) do |sidebar| %>
+              <% sidebar.with_header do %>
+                <div class="flex items-center gap-3 px-3 py-3">
+                  <%= render M9sh::BadgeComponent.new(variant: :default, class_name: "h-8 w-8 text-base justify-center") do %>
+                    A
+                  <% end %>
+                  <span class="text-base font-semibold group-data-[state=collapsed]/sidebar:hidden">Acme Inc.</span>
+                </div>
+              <% end %>
+
+              <% sidebar.with_sidebar_content do %>
+                <%= render M9sh::SidebarGroupComponent.new do |group| %>
+                  <% group.with_group_content do %>
+                    <%= render M9sh::SidebarMenuComponent.new do %>
+                      <%= render M9sh::SidebarMenuItemComponent.new do %>
+                        <%= render M9sh::SidebarMenuButtonComponent.new(href: "#", active: true) do %>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
+                          Dashboard
+                        <% end %>
+                      <% end %>
+                      <%= render M9sh::SidebarMenuItemComponent.new do %>
+                        <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>
+                          Analytics
+                        <% end %>
+                      <% end %>
+                      <%= render M9sh::SidebarMenuItemComponent.new do %>
+                        <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"/><path d="m3 9 2.45-4.9A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.8 1.1L21 9"/><path d="M12 3v6"/></svg>
+                          Projects
+                        <% end %>
+                      <% end %>
+                      <%= render M9sh::SidebarMenuItemComponent.new do %>
+                        <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+                          Team
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+
+                <%= render M9sh::SidebarGroupComponent.new do |group| %>
+                  <% group.with_label do %>
+                    Documents
+                  <% end %>
+                  <% group.with_group_content do %>
+                    <%= render M9sh::SidebarMenuComponent.new do %>
+                      <%= render M9sh::SidebarMenuItemComponent.new do %>
+                        <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+                          Data Library
+                        <% end %>
+                      <% end %>
+                      <%= render M9sh::SidebarMenuItemComponent.new do %>
+                        <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+                          Reports
+                        <% end %>
+                      <% end %>
+                      <%= render M9sh::SidebarMenuItemComponent.new do %>
+                        <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" x2="8" y1="13" y2="13"/><line x1="16" x2="8" y1="17" y2="17"/><line x1="10" x2="8" y1="9" y2="9"/></svg>
+                          Documentation
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+
+              <% sidebar.with_footer do %>
+                <%= render M9sh::SidebarGroupComponent.new do |group| %>
+                  <% group.with_group_content do %>
+                    <%= render M9sh::SidebarMenuComponent.new do %>
+                      <%= render M9sh::SidebarMenuItemComponent.new do %>
+                        <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
+                          Settings
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+
+                <div class="px-2 py-2 mt-2">
+                  <div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-sidebar-accent cursor-pointer transition-colors">
+                    <%= render M9sh::AvatarComponent.new(src: "https://github.com/shadcn.png", alt: "User", class_name: "h-8 w-8") %>
+                    <div class="flex-1 min-w-0 group-data-[state=collapsed]/sidebar:hidden">
+                      <p class="text-sm font-medium truncate">John Doe</p>
+                      <p class="text-xs text-muted-foreground truncate">john@example.com</p>
+                    </div>
+                  </div>
+                </div>
+              <% end %>
+            <% end %>
+
+            <%= render M9sh::SidebarInsetComponent.new do %>
+              <%= render M9sh::MainComponent.new do %>
+                <header class="flex h-14 shrink-0 items-center gap-2 px-6 border-b">
+                  <%= render M9sh::SidebarTriggerComponent.new %>
+                  <%= render M9sh::SeparatorComponent.new(orientation: :vertical, class_name: "h-6 mx-2") %>
+                  <h1 class="text-base font-semibold">Dashboard</h1>
+                  <div class="ml-auto flex items-center gap-2">
+                    <%= render M9sh::BadgeComponent.new(variant: :success) do %>
+                      Live
+                    <% end %>
+                  </div>
+                </header>
+
+                <div class="flex-1 overflow-auto p-6">
+                  <div class="mx-auto max-w-6xl space-y-6">
+                    <!-- Revenue Card -->
+                    <%= render M9sh::CardComponent.new do |card| %>
+                      <% card.with_header do |header| %>
+                        <% header.with_title do %>
+                          Total Revenue
+                        <% end %>
+                        <% header.with_description do %>
+                          Trending up this month
+                        <% end %>
+                        <% header.with_action do %>
+                          <%= render M9sh::BadgeComponent.new(variant: :outline) do %>
+                            +12.5%
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                      <% card.with_body do %>
+                        <p class="text-4xl font-bold">$45,231.89</p>
+                        <p class="text-xs text-muted-foreground mt-2">+20.1% from last month</p>
+                      <% end %>
+                    <% end %>
+
+                    <!-- Stats Grid -->
+                    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                      <%= render M9sh::CardComponent.new do |card| %>
+                        <% card.with_header do |header| %>
+                          <% header.with_title class: "text-sm" do %>
+                            Active Users
+                          <% end %>
+                        <% end %>
+                        <% card.with_body do %>
+                          <div class="text-2xl font-bold">2,350</div>
+                          <p class="text-xs text-muted-foreground mt-1">
+                            <%= render M9sh::BadgeComponent.new(variant: :success, class_name: "text-[10px] px-1.5") do %>
+                              +12%
+                            <% end %>
+                            vs last week
+                          </p>
+                        <% end %>
+                      <% end %>
+
+                      <%= render M9sh::CardComponent.new do |card| %>
+                        <% card.with_header do |header| %>
+                          <% header.with_title class: "text-sm" do %>
+                            Projects
+                          <% end %>
+                        <% end %>
+                        <% card.with_body do %>
+                          <div class="text-2xl font-bold">18</div>
+                          <p class="text-xs text-muted-foreground mt-1">
+                            <%= render M9sh::BadgeComponent.new(variant: :warning, class_name: "text-[10px] px-1.5") do %>
+                              3 active
+                            <% end %>
+                          </p>
+                        <% end %>
+                      <% end %>
+
+                      <%= render M9sh::CardComponent.new do |card| %>
+                        <% card.with_header do |header| %>
+                          <% header.with_title class: "text-sm" do %>
+                            Team Members
+                          <% end %>
+                        <% end %>
+                        <% card.with_body do %>
+                          <div class="text-2xl font-bold">8</div>
+                          <p class="text-xs text-muted-foreground mt-1">4 online now</p>
+                        <% end %>
+                      <% end %>
+                    </div>
+
+                    <!-- Recent Activity Card -->
+                    <%= render M9sh::CardComponent.new do |card| %>
+                      <% card.with_header do |header| %>
+                        <% header.with_title do %>
+                          Recent Activity
+                        <% end %>
+                        <% header.with_description do %>
+                          Your team's latest updates
+                        <% end %>
+                      <% end %>
+                      <% card.with_body do %>
+                        <div class="space-y-4">
+                          <div class="flex items-start gap-4">
+                            <%= render M9sh::AvatarComponent.new(alt: "JD", fallback: "JD", class_name: "h-9 w-9") %>
+                            <div class="flex-1 space-y-1">
+                              <p class="text-sm font-medium">John deployed to production</p>
+                              <p class="text-xs text-muted-foreground">2 minutes ago</p>
+                            </div>
+                            <%= render M9sh::BadgeComponent.new(variant: :success) do %>
+                              Success
+                            <% end %>
+                          </div>
+
+                          <div class="flex items-start gap-4">
+                            <%= render M9sh::AvatarComponent.new(alt: "SK", fallback: "SK", class_name: "h-9 w-9") %>
+                            <div class="flex-1 space-y-1">
+                              <p class="text-sm font-medium">Sarah created new project "Dashboard v2"</p>
+                              <p class="text-xs text-muted-foreground">1 hour ago</p>
+                            </div>
+                            <%= render M9sh::BadgeComponent.new(variant: :default) do %>
+                              New
+                            <% end %>
+                          </div>
+
+                          <div class="flex items-start gap-4">
+                            <%= render M9sh::AvatarComponent.new(alt: "MC", fallback: "MC", class_name: "h-9 w-9") %>
+                            <div class="flex-1 space-y-1">
+                              <p class="text-sm font-medium">Mike updated documentation</p>
+                              <p class="text-xs text-muted-foreground">3 hours ago</p>
+                            </div>
+                            <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+                              Docs
+                            <% end %>
+                          </div>
+                        </div>
+                      <% end %>
+                    <% end %>
+
+                    <!-- Quick Actions -->
+                    <%= render M9sh::CardComponent.new do |card| %>
+                      <% card.with_header do |header| %>
+                        <% header.with_title do %>
+                          Quick Actions
+                        <% end %>
+                        <% header.with_description do %>
+                          Common tasks and shortcuts
+                        <% end %>
+                      <% end %>
+                      <% card.with_body do %>
+                        <div class="flex flex-wrap gap-2">
+                          <%= render M9sh::ButtonComponent.new(variant: :default) do %>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
+                            New Project
+                          <% end %>
+                          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+                            Invite Team
+                          <% end %>
+                          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
+                            Export Data
+                          <% end %>
+                        </div>
+                      <% end %>
+                    <% end %>
+                  </div>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+      <details class="rounded-lg border border-border" open="false">
+        <summary class="cursor-pointer px-4 py-2 space-x-1 text-sm font-medium hover:bg-accent">View Code</summary>
+        <div class="border-t border-border p-4">
+          <%= render Docs::CodeBlockComponent.new(
+            code: sidebar_app_code,
+            language: "erb"
+          ) %>
+        </div>
+      </details>
+    </div>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">SidebarProvider Component</h3>
+    <p class="text-sm text-muted-foreground mb-4">
+      Wraps the entire sidebar and main content area, managing the sidebar state.
+    </p>
+
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "default_open",
+          type: "Boolean",
+          default: "true",
+          description: "Initial open state of the sidebar"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Sidebar Component</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "side",
+          type: "Symbol",
+          default: ":left",
+          description: "Which side the sidebar appears on. Options: :left, :right"
+        },
+        {
+          name: "variant",
+          type: "Symbol",
+          default: ":sidebar",
+          description: "Visual variant of the sidebar. Options: :sidebar, :floating, :inset"
+        },
+        {
+          name: "collapsible",
+          type: "Symbol",
+          default: ":offcanvas",
+          description: "Collapse behavior. Options: :offcanvas (slides out), :icon (icon-only mode), :none (no collapse)"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">SidebarMenuButton Component</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "href",
+          type: "String",
+          default: "nil",
+          description: "URL for the menu item. If provided, renders as an anchor tag"
+        },
+        {
+          name: "active",
+          type: "Boolean",
+          default: "false",
+          description: "Whether this menu item is currently active"
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Features</h3>
+      <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1">
+        <li>Composable structure with header, content, and footer sections</li>
+        <li>Multiple collapsible modes: offcanvas, icon-only, or always visible</li>
+        <li>Keyboard shortcut support (Cmd/Ctrl + B to toggle)</li>
+        <li>Persistent state across page reloads using localStorage</li>
+        <li>Responsive design with mobile detection</li>
+        <li>Support for grouped navigation with labels</li>
+        <li>Active state management for menu items</li>
+        <li>Icon support in menu buttons</li>
+      </ul>
+    </div>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Keyboard Shortcuts</h3>
+      <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1">
+        <li><kbd class="px-2 py-1 text-xs font-semibold bg-muted rounded">⌘ B</kbd> or <kbd class="px-2 py-1 text-xs font-semibold bg-muted rounded">Ctrl B</kbd> - Toggle sidebar open/closed</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>