better_ui 0.9.0 → 0.9.1

data/spec/components/previews/better_ui/drawer/layout_component_preview/dark_theme.html.erb

@@ -0,0 +1,36 @@
+<%= render BetterUi::Drawer::LayoutComponent.new do |layout| %>
+  <% layout.with_header(variant: :dark) do |header| %>
+    <% header.with_mobile_menu_button do %>
+      <button class="p-2 text-white hover:bg-white/10 rounded-md lg:hidden" data-action="click->better-ui--drawer--layout#toggle">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
+      </button>
+    <% end %>
+    <% header.with_logo do %>
+      <div class="flex items-center">
+        <div class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center text-white font-bold">B</div>
+        <span class="ml-2 font-semibold text-lg">Dark Theme</span>
+      </div>
+    <% end %>
+    <% header.with_actions do %>
+      <div class="w-8 h-8 bg-white/20 rounded-full"></div>
+    <% end %>
+  <% end %>
+
+  <% layout.with_sidebar(variant: :dark) do |sidebar| %>
+    <% sidebar.with_navigation do %>
+      <nav class="space-y-1">
+        <a href="#" class="flex items-center px-4 py-2 rounded-md bg-white/10 text-white">Dashboard</a>
+        <a href="#" class="flex items-center px-4 py-2 rounded-md hover:bg-white/5 text-grayscale-300">Projects</a>
+        <a href="#" class="flex items-center px-4 py-2 rounded-md hover:bg-white/5 text-grayscale-300">Team</a>
+        <a href="#" class="flex items-center px-4 py-2 rounded-md hover:bg-white/5 text-grayscale-300">Settings</a>
+      </nav>
+    <% end %>
+  <% end %>
+
+  <% layout.with_main do %>
+    <div class="p-6 bg-grayscale-800 min-h-full">
+      <h1 class="text-2xl font-bold mb-4 text-white">Dark Theme Layout</h1>
+      <p class="text-grayscale-300">This demonstrates a dark-themed drawer layout. Both the header and sidebar use the dark variant.</p>
+    </div>
+  <% end %>
+<% end %>

data/spec/components/previews/better_ui/drawer/layout_component_preview/dashboard_example.html.erb

@@ -0,0 +1,188 @@
+<%= render BetterUi::Drawer::LayoutComponent.new do |layout| %>
+  <% layout.with_header do |header| %>
+    <% header.with_mobile_menu_button do %>
+      <button class="p-2 text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100 rounded-md lg:hidden" data-action="click->better-ui--drawer--layout#toggle">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
+      </button>
+    <% end %>
+    <% header.with_logo do %>
+      <div class="flex items-center">
+        <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold">A</div>
+        <span class="ml-2 font-semibold text-lg hidden sm:block">Acme Dashboard</span>
+      </div>
+    <% end %>
+    <% header.with_navigation do %>
+      <nav class="flex gap-6">
+        <a href="#" class="text-primary-600 font-medium">Overview</a>
+        <a href="#" class="text-grayscale-600 hover:text-grayscale-900">Analytics</a>
+        <a href="#" class="text-grayscale-600 hover:text-grayscale-900">Reports</a>
+      </nav>
+    <% end %>
+    <% header.with_actions do %>
+      <div class="flex items-center gap-4">
+        <button class="text-grayscale-600 hover:text-grayscale-900">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+        </button>
+        <button class="text-grayscale-600 hover:text-grayscale-900 relative">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
+          <span class="absolute -top-1 -right-1 w-2 h-2 bg-danger-500 rounded-full"></span>
+        </button>
+        <div class="flex items-center">
+          <div class="w-8 h-8 bg-primary-500 rounded-full"></div>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+
+  <% layout.with_sidebar do |sidebar| %>
+    <% sidebar.with_navigation do %>
+      <nav class="space-y-6">
+        <div>
+          <h3 class="px-4 text-xs font-semibold text-grayscale-500 uppercase tracking-wider">Main</h3>
+          <div class="mt-2 space-y-1">
+            <a href="#" class="flex items-center px-4 py-2 rounded-md bg-primary-50 text-primary-700">
+              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
+              Dashboard
+            </a>
+            <a href="#" class="flex items-center px-4 py-2 rounded-md hover:bg-grayscale-100">
+              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
+              Analytics
+            </a>
+            <a href="#" class="flex items-center px-4 py-2 rounded-md hover:bg-grayscale-100">
+              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+              Revenue
+            </a>
+            <a href="#" class="flex items-center px-4 py-2 rounded-md hover:bg-grayscale-100">
+              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
+              Customers
+            </a>
+          </div>
+        </div>
+        <div>
+          <h3 class="px-4 text-xs font-semibold text-grayscale-500 uppercase tracking-wider">Reports</h3>
+          <div class="mt-2 space-y-1">
+            <a href="#" class="flex items-center px-4 py-2 rounded-md hover:bg-grayscale-100">
+              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+              Monthly
+            </a>
+            <a href="#" class="flex items-center px-4 py-2 rounded-md hover:bg-grayscale-100">
+              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
+              Annual
+            </a>
+          </div>
+        </div>
+      </nav>
+    <% end %>
+    <% sidebar.with_footer do %>
+      <div class="flex items-center">
+        <div class="w-10 h-10 bg-grayscale-300 rounded-full"></div>
+        <div class="ml-3">
+          <div class="text-sm font-medium">John Doe</div>
+          <div class="text-xs text-grayscale-500">Admin</div>
+        </div>
+        <button class="ml-auto p-2 text-grayscale-500 hover:text-grayscale-700">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
+        </button>
+      </div>
+    <% end %>
+  <% end %>
+
+  <% layout.with_main do %>
+    <div class="p-6 bg-grayscale-50 min-h-full">
+      <div class="mb-6">
+        <h1 class="text-2xl font-bold text-grayscale-900">Dashboard Overview</h1>
+        <p class="text-grayscale-600">Welcome back, John! Here's what's happening with your store today.</p>
+      </div>
+
+      <!-- Stats Grid -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <div class="bg-white p-6 rounded-lg border border-grayscale-200">
+          <div class="flex items-center justify-between">
+            <div>
+              <div class="text-sm font-medium text-grayscale-500">Total Revenue</div>
+              <div class="text-2xl font-bold text-grayscale-900">$45,231</div>
+            </div>
+            <div class="w-12 h-12 bg-success-50 rounded-lg flex items-center justify-center">
+              <svg class="w-6 h-6 text-success-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+            </div>
+          </div>
+          <div class="mt-2 text-sm text-success-600">+20.1% from last month</div>
+        </div>
+        <div class="bg-white p-6 rounded-lg border border-grayscale-200">
+          <div class="flex items-center justify-between">
+            <div>
+              <div class="text-sm font-medium text-grayscale-500">Orders</div>
+              <div class="text-2xl font-bold text-grayscale-900">+2,350</div>
+            </div>
+            <div class="w-12 h-12 bg-primary-50 rounded-lg flex items-center justify-center">
+              <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
+            </div>
+          </div>
+          <div class="mt-2 text-sm text-success-600">+180 from yesterday</div>
+        </div>
+        <div class="bg-white p-6 rounded-lg border border-grayscale-200">
+          <div class="flex items-center justify-between">
+            <div>
+              <div class="text-sm font-medium text-grayscale-500">Customers</div>
+              <div class="text-2xl font-bold text-grayscale-900">+12,234</div>
+            </div>
+            <div class="w-12 h-12 bg-accent-50 rounded-lg flex items-center justify-center">
+              <svg class="w-6 h-6 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
+            </div>
+          </div>
+          <div class="mt-2 text-sm text-success-600">+19% from last month</div>
+        </div>
+        <div class="bg-white p-6 rounded-lg border border-grayscale-200">
+          <div class="flex items-center justify-between">
+            <div>
+              <div class="text-sm font-medium text-grayscale-500">Active Now</div>
+              <div class="text-2xl font-bold text-grayscale-900">+573</div>
+            </div>
+            <div class="w-12 h-12 bg-info-50 rounded-lg flex items-center justify-center">
+              <svg class="w-6 h-6 text-info-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
+            </div>
+          </div>
+          <div class="mt-2 text-sm text-success-600">+201 since last hour</div>
+        </div>
+      </div>
+
+      <!-- Recent Activity -->
+      <div class="bg-white rounded-lg border border-grayscale-200">
+        <div class="p-4 border-b border-grayscale-200">
+          <h2 class="text-lg font-semibold">Recent Activity</h2>
+        </div>
+        <div class="p-4">
+          <div class="space-y-4">
+            <div class="flex items-center">
+              <div class="w-10 h-10 bg-success-100 rounded-full flex items-center justify-center">
+                <svg class="w-5 h-5 text-success-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+              </div>
+              <div class="ml-4">
+                <div class="text-sm font-medium">Order #12345 completed</div>
+                <div class="text-xs text-grayscale-500">2 minutes ago</div>
+              </div>
+            </div>
+            <div class="flex items-center">
+              <div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
+                <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
+              </div>
+              <div class="ml-4">
+                <div class="text-sm font-medium">New customer registered</div>
+                <div class="text-xs text-grayscale-500">15 minutes ago</div>
+              </div>
+            </div>
+            <div class="flex items-center">
+              <div class="w-10 h-10 bg-warning-100 rounded-full flex items-center justify-center">
+                <svg class="w-5 h-5 text-warning-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
+              </div>
+              <div class="ml-4">
+                <div class="text-sm font-medium">Low stock alert: Product SKU-789</div>
+                <div class="text-xs text-grayscale-500">1 hour ago</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/spec/components/previews/better_ui/drawer/layout_component_preview/default.html.erb

@@ -0,0 +1,22 @@
+<%= render BetterUi::Drawer::LayoutComponent.new do |layout| %>
+  <% layout.with_header do |header| %>
+    <% header.with_logo { "BetterUI" } %>
+  <% end %>
+
+  <% layout.with_sidebar do |sidebar| %>
+    <% sidebar.with_navigation do %>
+      <nav class="space-y-2">
+        <a href="#" class="block px-4 py-2 rounded-md bg-primary-50 text-primary-700">Dashboard</a>
+        <a href="#" class="block px-4 py-2 rounded-md hover:bg-grayscale-100">Projects</a>
+        <a href="#" class="block px-4 py-2 rounded-md hover:bg-grayscale-100">Team</a>
+      </nav>
+    <% end %>
+  <% end %>
+
+  <% layout.with_main do %>
+    <div class="p-6">
+      <h1 class="text-2xl font-bold mb-4">Welcome to BetterUI</h1>
+      <p class="text-grayscale-600">This is the default drawer layout with header and sidebar.</p>
+    </div>
+  <% end %>
+<% end %>

data/spec/components/previews/better_ui/drawer/layout_component_preview/primary_theme.html.erb

@@ -0,0 +1,36 @@
+<%= render BetterUi::Drawer::LayoutComponent.new do |layout| %>
+  <% layout.with_header(variant: :primary) do |header| %>
+    <% header.with_mobile_menu_button do %>
+      <button class="p-2 text-white hover:bg-white/10 rounded-md lg:hidden" data-action="click->better-ui--drawer--layout#toggle">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
+      </button>
+    <% end %>
+    <% header.with_logo do %>
+      <div class="flex items-center">
+        <div class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center text-white font-bold">B</div>
+        <span class="ml-2 font-semibold text-lg">Primary Theme</span>
+      </div>
+    <% end %>
+    <% header.with_actions do %>
+      <div class="w-8 h-8 bg-white/20 rounded-full"></div>
+    <% end %>
+  <% end %>
+
+  <% layout.with_sidebar(variant: :primary) do |sidebar| %>
+    <% sidebar.with_navigation do %>
+      <nav class="space-y-1">
+        <a href="#" class="flex items-center px-4 py-2 rounded-md bg-white/20 text-white">Dashboard</a>
+        <a href="#" class="flex items-center px-4 py-2 rounded-md hover:bg-white/10 text-primary-100">Projects</a>
+        <a href="#" class="flex items-center px-4 py-2 rounded-md hover:bg-white/10 text-primary-100">Team</a>
+        <a href="#" class="flex items-center px-4 py-2 rounded-md hover:bg-white/10 text-primary-100">Settings</a>
+      </nav>
+    <% end %>
+  <% end %>
+
+  <% layout.with_main do %>
+    <div class="p-6">
+      <h1 class="text-2xl font-bold mb-4">Primary Theme Layout</h1>
+      <p class="text-grayscale-600">This demonstrates a primary-colored drawer layout. The header uses the primary variant and the sidebar uses the primary variant as well.</p>
+    </div>
+  <% end %>
+<% end %>

data/spec/components/previews/better_ui/drawer/layout_component_preview/right_sidebar.html.erb

@@ -0,0 +1,44 @@
+<%= render BetterUi::Drawer::LayoutComponent.new(sidebar_position: :right) do |layout| %>
+  <% layout.with_header do |header| %>
+    <% header.with_logo { "Right Sidebar Layout" } %>
+    <% header.with_mobile_menu_button do %>
+      <button class="p-2 text-grayscale-600 hover:bg-grayscale-100 rounded-md lg:hidden" data-action="click->better-ui--drawer--layout#toggle">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
+      </button>
+    <% end %>
+  <% end %>
+
+  <% layout.with_sidebar(position: :right) do |sidebar| %>
+    <% sidebar.with_header { "Details" } %>
+    <% sidebar.with_navigation do %>
+      <div class="space-y-4">
+        <div>
+          <div class="text-sm font-medium text-grayscale-500">Status</div>
+          <div class="mt-1 text-success-600 font-medium">Active</div>
+        </div>
+        <div>
+          <div class="text-sm font-medium text-grayscale-500">Created</div>
+          <div class="mt-1">Dec 15, 2024</div>
+        </div>
+        <div>
+          <div class="text-sm font-medium text-grayscale-500">Modified</div>
+          <div class="mt-1">Dec 20, 2024</div>
+        </div>
+        <div>
+          <div class="text-sm font-medium text-grayscale-500">Owner</div>
+          <div class="mt-1 flex items-center">
+            <div class="w-6 h-6 bg-primary-500 rounded-full mr-2"></div>
+            John Doe
+          </div>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+
+  <% layout.with_main do %>
+    <div class="p-6">
+      <h1 class="text-2xl font-bold mb-4">Right Sidebar Layout</h1>
+      <p class="text-grayscale-600">This layout has the sidebar positioned on the right side. Useful for detail panels, property inspectors, or contextual information.</p>
+    </div>
+  <% end %>
+<% end %>

data/spec/components/previews/better_ui/drawer/layout_component_preview/with_header_only.html.erb

@@ -0,0 +1,20 @@
+<%= render BetterUi::Drawer::LayoutComponent.new do |layout| %>
+  <% layout.with_header do |header| %>
+    <% header.with_logo { "Header Only Layout" } %>
+    <% header.with_navigation do %>
+      <nav class="flex gap-6">
+        <a href="#" class="text-grayscale-600 hover:text-grayscale-900">Home</a>
+        <a href="#" class="text-grayscale-600 hover:text-grayscale-900">About</a>
+        <a href="#" class="text-grayscale-600 hover:text-grayscale-900">Contact</a>
+      </nav>
+    <% end %>
+    <% header.with_actions { "Login" } %>
+  <% end %>
+
+  <% layout.with_main do %>
+    <div class="p-6">
+      <h1 class="text-2xl font-bold mb-4">Layout with Header Only</h1>
+      <p class="text-grayscale-600">This layout has only a header, no sidebar. The main content takes up the full width.</p>
+    </div>
+  <% end %>
+<% end %>

data/spec/components/previews/better_ui/drawer/layout_component_preview/with_sidebar_only.html.erb

@@ -0,0 +1,21 @@
+<%= render BetterUi::Drawer::LayoutComponent.new do |layout| %>
+  <% layout.with_sidebar do |sidebar| %>
+    <% sidebar.with_header { "Sidebar Only" } %>
+    <% sidebar.with_navigation do %>
+      <nav class="space-y-2">
+        <a href="#" class="block px-4 py-2 rounded-md bg-primary-50 text-primary-700">Dashboard</a>
+        <a href="#" class="block px-4 py-2 rounded-md hover:bg-grayscale-100">Projects</a>
+        <a href="#" class="block px-4 py-2 rounded-md hover:bg-grayscale-100">Team</a>
+        <a href="#" class="block px-4 py-2 rounded-md hover:bg-grayscale-100">Settings</a>
+      </nav>
+    <% end %>
+    <% sidebar.with_footer { "v1.0.0" } %>
+  <% end %>
+
+  <% layout.with_main do %>
+    <div class="p-6">
+      <h1 class="text-2xl font-bold mb-4">Layout with Sidebar Only</h1>
+      <p class="text-grayscale-600">This layout has only a sidebar, no header. Useful for applications that don't need a top navigation.</p>
+    </div>
+  <% end %>
+<% end %>

data/spec/components/previews/better_ui/drawer/layout_component_preview.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Drawer
+    # @label Layout
+    class LayoutComponentPreview < ViewComponent::Preview
+      # @label Default
+      # @display max_height 600px
+      def default
+        render_with_template
+      end
+
+      # @label With Header Only
+      # @display max_height 400px
+      def with_header_only
+        render_with_template
+      end
+
+      # @label With Sidebar Only
+      # @display max_height 400px
+      def with_sidebar_only
+        render_with_template
+      end
+
+      # @label Complete Layout
+      # @display max_height 600px
+      def complete_layout
+        render_with_template
+      end
+
+      # @label Right Sidebar
+      # @display max_height 600px
+      def right_sidebar
+        render_with_template
+      end
+
+      # @label Dark Theme
+      # @display max_height 600px
+      # @display bg_color #111827
+      def dark_theme
+        render_with_template
+      end
+
+      # @label Primary Theme
+      # @display max_height 600px
+      def primary_theme
+        render_with_template
+      end
+
+      # @label Dashboard Example
+      # @display max_height 700px
+      def dashboard_example
+        render_with_template
+      end
+
+      # @label Playground
+      # @display max_height 600px
+      # @param sidebar_position select { choices: [left, right] }
+      # @param sidebar_breakpoint select { choices: [md, lg, xl] }
+      # @param header_variant select { choices: [light, dark, transparent, primary] }
+      # @param sidebar_variant select { choices: [light, dark, primary] }
+      def playground(sidebar_position: :left, sidebar_breakpoint: :lg, header_variant: :light, sidebar_variant: :light)
+        render BetterUi::Drawer::LayoutComponent.new(
+          sidebar_position: sidebar_position.to_sym,
+          sidebar_breakpoint: sidebar_breakpoint.to_sym
+        ) do |layout|
+          layout.with_header(variant: header_variant.to_sym) do |header|
+            header.with_mobile_menu_button do
+              "<button class='p-2 rounded-md lg:hidden' data-action='click->better-ui--drawer--layout#toggle'>
+                <svg class='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'></path></svg>
+              </button>".html_safe
+            end
+            header.with_logo { "Playground" }
+            header.with_actions { "Actions" }
+          end
+
+          layout.with_sidebar(variant: sidebar_variant.to_sym, position: sidebar_position.to_sym) do |sidebar|
+            sidebar.with_navigation { "Navigation" }
+          end
+
+          layout.with_main do
+            "<div class='p-6'>
+              <h1 class='text-2xl font-bold mb-4'>Main Content</h1>
+              <p>This is the main content area.</p>
+            </div>".html_safe
+          end
+        end
+      end
+    end
+  end
+end

data/spec/components/previews/better_ui/drawer/nav_group_component_preview/complete_navigation.html.erb

@@ -0,0 +1,55 @@
+<nav class="space-y-6 w-64 p-4 bg-white border rounded-lg">
+  <%= render BetterUi::Drawer::NavGroupComponent.new(title: "Main") do |group| %>
+    <% group.with_item(label: "Dashboard", href: "#", active: true) do |item| %>
+      <% item.with_icon do %>
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
+      <% end %>
+    <% end %>
+    <% group.with_item(label: "Analytics", href: "#") do |item| %>
+      <% item.with_icon do %>
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
+      <% end %>
+    <% end %>
+    <% group.with_item(label: "Revenue", href: "#") do |item| %>
+      <% item.with_icon do %>
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+      <% end %>
+    <% end %>
+    <% group.with_item(label: "Customers", href: "#") do |item| %>
+      <% item.with_icon do %>
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render BetterUi::Drawer::NavGroupComponent.new(title: "Reports") do |group| %>
+    <% group.with_item(label: "Monthly", href: "#") do |item| %>
+      <% item.with_icon do %>
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+      <% end %>
+    <% end %>
+    <% group.with_item(label: "Annual", href: "#") do |item| %>
+      <% item.with_icon do %>
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render BetterUi::Drawer::NavGroupComponent.new(title: "Settings") do |group| %>
+    <% group.with_item(label: "Settings", href: "#") do |item| %>
+      <% item.with_icon do %>
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+      <% end %>
+    <% end %>
+    <% group.with_item(label: "Help", href: "#") do |item| %>
+      <% item.with_icon do %>
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+      <% end %>
+    <% end %>
+    <% group.with_item(label: "Logout", href: "#", method: :delete) do |item| %>
+      <% item.with_icon do %>
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
+      <% end %>
+    <% end %>
+  <% end %>
+</nav>