better_ui 0.9.0 → 0.9.1

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

@@ -0,0 +1,163 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Drawer
+    # @label Nav Group
+    class NavGroupComponentPreview < ViewComponent::Preview
+      # @label Default
+      def default
+        render BetterUi::Drawer::NavGroupComponent.new(title: "Main") do |group|
+          group.with_item(label: "Dashboard", href: "#", active: true) do |item|
+            item.with_icon { dashboard_icon }
+          end
+          group.with_item(label: "Projects", href: "#") do |item|
+            item.with_icon { projects_icon }
+          end
+          group.with_item(label: "Team", href: "#") do |item|
+            item.with_icon { team_icon }
+          end
+        end
+      end
+
+      # @label Without Title
+      def without_title
+        render BetterUi::Drawer::NavGroupComponent.new do |group|
+          group.with_item(label: "Dashboard", href: "#", active: true) do |item|
+            item.with_icon { dashboard_icon }
+          end
+          group.with_item(label: "Settings", href: "#") do |item|
+            item.with_icon { settings_icon }
+          end
+        end
+      end
+
+      # @label With Badges
+      def with_badges
+        render BetterUi::Drawer::NavGroupComponent.new(title: "Messages") do |group|
+          group.with_item(label: "Inbox", href: "#", active: true) do |item|
+            item.with_icon { inbox_icon }
+            item.with_badge { "12" }
+          end
+          group.with_item(label: "Sent", href: "#") do |item|
+            item.with_icon { sent_icon }
+          end
+          group.with_item(label: "Drafts", href: "#") do |item|
+            item.with_icon { drafts_icon }
+            item.with_badge { "3" }
+          end
+        end
+      end
+
+      # @label Dark Variant
+      # @display bg_color #1f2937
+      def dark_variant
+        render BetterUi::Drawer::NavGroupComponent.new(title: "Main", variant: :dark) do |group|
+          group.with_item(label: "Dashboard", href: "#", active: true) do |item|
+            item.with_icon { dashboard_icon }
+          end
+          group.with_item(label: "Projects", href: "#") do |item|
+            item.with_icon { projects_icon }
+          end
+          group.with_item(label: "Team", href: "#") do |item|
+            item.with_icon { team_icon }
+          end
+        end
+      end
+
+      # @label Primary Variant
+      # @display bg_color #1d4ed8
+      def primary_variant
+        render BetterUi::Drawer::NavGroupComponent.new(title: "Main", variant: :primary) do |group|
+          group.with_item(label: "Dashboard", href: "#", active: true) do |item|
+            item.with_icon { dashboard_icon }
+          end
+          group.with_item(label: "Projects", href: "#") do |item|
+            item.with_icon { projects_icon }
+          end
+          group.with_item(label: "Team", href: "#") do |item|
+            item.with_icon { team_icon }
+          end
+        end
+      end
+
+      # @label With HTTP Method
+      def with_http_method
+        render BetterUi::Drawer::NavGroupComponent.new(title: "Account") do |group|
+          group.with_item(label: "Settings", href: "#") do |item|
+            item.with_icon { settings_icon }
+          end
+          group.with_item(label: "Help", href: "#") do |item|
+            item.with_icon { help_icon }
+          end
+          group.with_item(label: "Logout", href: "#", method: :delete) do |item|
+            item.with_icon { logout_icon }
+          end
+        end
+      end
+
+      # @label Complete Sidebar Navigation
+      def complete_navigation
+        render_with_template
+      end
+
+      # @label Playground
+      # @param title text
+      # @param variant select { choices: [light, dark, primary] }
+      def playground(title: "Navigation", variant: :light)
+        render BetterUi::Drawer::NavGroupComponent.new(
+          title: title.present? ? title : nil,
+          variant: variant.to_sym
+        ) do |group|
+          group.with_item(label: "Dashboard", href: "#", active: true) do |item|
+            item.with_icon { dashboard_icon }
+          end
+          group.with_item(label: "Projects", href: "#") do |item|
+            item.with_icon { projects_icon }
+          end
+          group.with_item(label: "Messages", href: "#") do |item|
+            item.with_icon { inbox_icon }
+            item.with_badge { "5" }
+          end
+        end
+      end
+
+      private
+
+      def dashboard_icon
+        "<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>".html_safe
+      end
+
+      def projects_icon
+        "<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='M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10'></path></svg>".html_safe
+      end
+
+      def team_icon
+        "<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>".html_safe
+      end
+
+      def settings_icon
+        "<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>".html_safe
+      end
+
+      def help_icon
+        "<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>".html_safe
+      end
+
+      def logout_icon
+        "<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>".html_safe
+      end
+
+      def inbox_icon
+        "<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='M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4'></path></svg>".html_safe
+      end
+
+      def sent_icon
+        "<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 19l9 2-9-18-9 18 9-2zm0 0v-8'></path></svg>".html_safe
+      end
+
+      def drafts_icon
+        "<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='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'></path></svg>".html_safe
+      end
+    end
+  end
+end

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

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Drawer
+    # @label Nav Item
+    class NavItemComponentPreview < ViewComponent::Preview
+      # @label Default
+      def default
+        render BetterUi::Drawer::NavItemComponent.new(label: "Dashboard", href: "#")
+      end
+
+      # @label With Icon
+      def with_icon
+        render BetterUi::Drawer::NavItemComponent.new(label: "Dashboard", 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='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>".html_safe
+          end
+        end
+      end
+
+      # @label Active State
+      def active_state
+        render BetterUi::Drawer::NavItemComponent.new(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>".html_safe
+          end
+        end
+      end
+
+      # @label With Badge
+      def with_badge
+        render BetterUi::Drawer::NavItemComponent.new(label: "Messages", 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='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'></path></svg>".html_safe
+          end
+          item.with_badge { "5" }
+        end
+      end
+
+      # @label With HTTP Method (Delete)
+      def with_http_method
+        render BetterUi::Drawer::NavItemComponent.new(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>".html_safe
+          end
+        end
+      end
+
+      # @label Dark Variant
+      # @display bg_color #1f2937
+      def dark_variant
+        render BetterUi::Drawer::NavItemComponent.new(label: "Dashboard", href: "#", variant: :dark, 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>".html_safe
+          end
+        end
+      end
+
+      # @label Primary Variant
+      # @display bg_color #1d4ed8
+      def primary_variant
+        render BetterUi::Drawer::NavItemComponent.new(label: "Dashboard", href: "#", variant: :primary, 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>".html_safe
+          end
+        end
+      end
+
+      # @label All Features
+      def all_features
+        render BetterUi::Drawer::NavItemComponent.new(
+          label: "Notifications",
+          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='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>".html_safe
+          end
+          item.with_badge { "99+" }
+        end
+      end
+
+      # @label Playground
+      # @param label text
+      # @param href text
+      # @param active toggle
+      # @param variant select { choices: [light, dark, primary] }
+      # @param method select { choices: [~, get, post, put, patch, delete] }
+      def playground(label: "Dashboard", href: "#", active: false, variant: :light, method: nil)
+        render BetterUi::Drawer::NavItemComponent.new(
+          label: label,
+          href: href,
+          active: active,
+          variant: variant.to_sym,
+          method: method.present? && method != "~" ? method.to_sym : nil
+        ) 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>".html_safe
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,212 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Drawer
+    # @label Sidebar
+    class SidebarComponentPreview < ViewComponent::Preview
+      # @label Default
+      def default
+        render BetterUi::Drawer::SidebarComponent.new 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>
+              <a href='#' class='block px-4 py-2 rounded-md hover:bg-grayscale-100'>Settings</a>
+            </nav>".html_safe
+          end
+        end
+      end
+
+      # @label With Header
+      def with_header
+        render BetterUi::Drawer::SidebarComponent.new do |sidebar|
+          sidebar.with_header 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'>B</div>
+              <span class='ml-2 font-semibold'>BetterUI</span>
+            </div>".html_safe
+          end
+          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>".html_safe
+          end
+        end
+      end
+
+      # @label With Footer
+      def with_footer
+        render BetterUi::Drawer::SidebarComponent.new 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>
+            </nav>".html_safe
+          end
+          sidebar.with_footer do
+            "<div class='flex items-center'>
+              <div class='w-8 h-8 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'>john@example.com</div>
+              </div>
+            </div>".html_safe
+          end
+        end
+      end
+
+      # @label Complete Sidebar
+      def complete_sidebar
+        render BetterUi::Drawer::SidebarComponent.new do |sidebar|
+          sidebar.with_header 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'>B</div>
+              <span class='ml-2 font-semibold'>BetterUI</span>
+            </div>".html_safe
+          end
+          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='M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10'></path></svg>
+                    Projects
+                  </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 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m12 5.198H9'></path></svg>
+                    Team
+                  </a>
+                </div>
+              </div>
+              <div>
+                <h3 class='px-4 text-xs font-semibold text-grayscale-500 uppercase tracking-wider'>Settings</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='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>
+                    Settings
+                  </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.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>
+                    Help
+                  </a>
+                </div>
+              </div>
+            </nav>".html_safe
+          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'>john@example.com</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>".html_safe
+          end
+        end
+      end
+
+      # @label Light Variant
+      def light_variant
+        render BetterUi::Drawer::SidebarComponent.new(variant: :light) do |sidebar|
+          sidebar.with_navigation { "Light Sidebar Navigation" }
+        end
+      end
+
+      # @label Dark Variant
+      # @display bg_color #374151
+      def dark_variant
+        render BetterUi::Drawer::SidebarComponent.new(variant: :dark) do |sidebar|
+          sidebar.with_navigation do
+            "<nav class='space-y-2'>
+              <a href='#' class='block px-4 py-2 rounded-md bg-white/10 text-white'>Dashboard</a>
+              <a href='#' class='block px-4 py-2 rounded-md hover:bg-white/5 text-grayscale-300'>Projects</a>
+              <a href='#' class='block px-4 py-2 rounded-md hover:bg-white/5 text-grayscale-300'>Team</a>
+            </nav>".html_safe
+          end
+        end
+      end
+
+      # @label Primary Variant
+      def primary_variant
+        render BetterUi::Drawer::SidebarComponent.new(variant: :primary) do |sidebar|
+          sidebar.with_navigation do
+            "<nav class='space-y-2'>
+              <a href='#' class='block px-4 py-2 rounded-md bg-white/20 text-white'>Dashboard</a>
+              <a href='#' class='block px-4 py-2 rounded-md hover:bg-white/10 text-primary-100'>Projects</a>
+              <a href='#' class='block px-4 py-2 rounded-md hover:bg-white/10 text-primary-100'>Team</a>
+            </nav>".html_safe
+          end
+        end
+      end
+
+      # @label Left Position
+      def left_position
+        render BetterUi::Drawer::SidebarComponent.new(position: :left) do |sidebar|
+          sidebar.with_navigation { "Left-positioned Sidebar (border on right)" }
+        end
+      end
+
+      # @label Right Position
+      def right_position
+        render BetterUi::Drawer::SidebarComponent.new(position: :right) do |sidebar|
+          sidebar.with_navigation { "Right-positioned Sidebar (border on left)" }
+        end
+      end
+
+      # @label Small Width (Icon Only)
+      def small_width
+        render BetterUi::Drawer::SidebarComponent.new(width: :sm) do |sidebar|
+          sidebar.with_navigation do
+            "<nav class='space-y-2'>
+              <a href='#' class='block p-2 rounded-md bg-primary-50 text-primary-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='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>
+              </a>
+              <a href='#' class='block p-2 rounded-md hover:bg-grayscale-100'>
+                <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='M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10'></path></svg>
+              </a>
+              <a href='#' class='block p-2 rounded-md hover:bg-grayscale-100'>
+                <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>
+              </a>
+            </nav>".html_safe
+          end
+        end
+      end
+
+      # @label Large Width
+      def large_width
+        render BetterUi::Drawer::SidebarComponent.new(width: :lg) do |sidebar|
+          sidebar.with_navigation { "Large Width Sidebar (320px)" }
+        end
+      end
+
+      # @label Playground
+      # @param variant select { choices: [light, dark, primary] }
+      # @param position select { choices: [left, right] }
+      # @param width select { choices: [sm, md, lg] }
+      # @param collapsible toggle
+      def playground(variant: :light, position: :left, width: :md, collapsible: true)
+        render BetterUi::Drawer::SidebarComponent.new(
+          variant: variant.to_sym,
+          position: position.to_sym,
+          width: width.to_sym,
+          collapsible: collapsible
+        ) do |sidebar|
+          sidebar.with_header { "Sidebar Header" }
+          sidebar.with_navigation { "Sidebar Navigation" }
+          sidebar.with_footer { "Sidebar Footer" }
+        end
+      end
+    end
+  end
+end

data/spec/components/previews/better_ui/dropdown/dropdown_component_preview/all_sizes.html.erb

@@ -0,0 +1,19 @@
+<div class="p-8">
+  <h3 class="text-lg font-semibold mb-4">Size Variants</h3>
+
+  <div class="flex gap-8 items-start">
+    <% [:sm, :md, :lg].each do |size| %>
+      <div>
+        <p class="text-sm text-grayscale-500 mb-2"><%= size %></p>
+        <%= render BetterUi::Dropdown::DropdownComponent.new(size: size) do |d| %>
+          <% d.with_trigger do %>
+            <%= render(BetterUi::ButtonComponent.new(variant: :secondary, style: :outline)) do %>Size: <%= size %><% end %>
+          <% end %>
+          <% d.with_item(href: "#") { "Action One" } %>
+          <% d.with_item(href: "#") { "Action Two" } %>
+          <% d.with_item(href: "#") { "Action Three" } %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/dropdown/dropdown_component_preview/default.html.erb

@@ -0,0 +1,12 @@
+<div class="p-8">
+  <h3 class="text-lg font-semibold mb-4">Default Dropdown</h3>
+
+  <%= render BetterUi::Dropdown::DropdownComponent.new do |d| %>
+    <% d.with_trigger do %>
+      <%= render(BetterUi::ButtonComponent.new(variant: :primary)) do %>Options<% end %>
+    <% end %>
+    <% d.with_item(href: "#edit") { "Edit" } %>
+    <% d.with_item(href: "#duplicate") { "Duplicate" } %>
+    <% d.with_item(href: "#archive") { "Archive" } %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/dropdown/dropdown_component_preview/disabled_items.html.erb

@@ -0,0 +1,14 @@
+<div class="p-8">
+  <h3 class="text-lg font-semibold mb-4">Disabled Items</h3>
+
+  <%= render BetterUi::Dropdown::DropdownComponent.new do |d| %>
+    <% d.with_trigger do %>
+      <%= render(BetterUi::ButtonComponent.new(variant: :primary)) do %>Actions<% end %>
+    <% end %>
+    <% d.with_item(href: "#edit") { "Edit" } %>
+    <% d.with_item(href: "#duplicate", disabled: true) { "Duplicate (disabled)" } %>
+    <% d.with_item(href: "#archive") { "Archive" } %>
+    <% d.with_divider %>
+    <% d.with_item(href: "#delete", variant: :danger, disabled: true) { "Delete (disabled)" } %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/dropdown/dropdown_component_preview/placement_options.html.erb

@@ -0,0 +1,16 @@
+<div class="p-8">
+  <h3 class="text-lg font-semibold mb-4">Placement Options</h3>
+
+  <div class="flex flex-wrap gap-8 items-center justify-center" style="min-height: 300px;">
+    <% [:bottom_start, :bottom_end, :top_start, :top_end].each do |placement| %>
+      <%= render BetterUi::Dropdown::DropdownComponent.new(placement: placement) do |d| %>
+        <% d.with_trigger do %>
+          <%= render(BetterUi::ButtonComponent.new(variant: :info, style: :outline, size: :sm)) do %><%= placement %><% end %>
+        <% end %>
+        <% d.with_item(href: "#") { "Action One" } %>
+        <% d.with_item(href: "#") { "Action Two" } %>
+        <% d.with_item(href: "#") { "Action Three" } %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/dropdown/dropdown_component_preview/playground.html.erb

@@ -0,0 +1,35 @@
+<div class="p-8 flex items-center justify-center" style="min-height: 300px;">
+  <h3 class="text-lg font-semibold mb-4">Playground</h3>
+
+  <%= render BetterUi::Dropdown::DropdownComponent.new(
+    size: @size,
+    placement: @placement,
+    shadow: @shadow,
+    auto_close: @auto_close,
+    close_on_item_click: @close_on_item_click
+  ) do |d| %>
+    <% d.with_trigger do %>
+      <%= render(BetterUi::ButtonComponent.new(variant: :primary)) do %>Open Dropdown<% end %>
+    <% end %>
+    <% d.with_header(text: "Actions") %>
+    <% d.with_item(href: "#edit") do |item| %>
+      <% item.with_icon do %>
+        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+        </svg>
+      <% end %>
+      Edit
+    <% end %>
+    <% d.with_item(href: "#duplicate") { "Duplicate" } %>
+    <% d.with_item(href: "#archive", disabled: true) { "Archive (disabled)" } %>
+    <% d.with_divider %>
+    <% d.with_item(href: "#delete", variant: :danger) do |item| %>
+      <% item.with_icon do %>
+        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+        </svg>
+      <% end %>
+      Delete
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/dropdown/dropdown_component_preview/with_dividers_and_headers.html.erb

@@ -0,0 +1,18 @@
+<div class="p-8">
+  <h3 class="text-lg font-semibold mb-4">With Dividers and Section Headers</h3>
+
+  <%= render BetterUi::Dropdown::DropdownComponent.new(size: :lg) do |d| %>
+    <% d.with_trigger do %>
+      <%= render(BetterUi::ButtonComponent.new(variant: :secondary, style: :outline)) do %>Account Menu<% end %>
+    <% end %>
+    <% d.with_header(text: "Account") %>
+    <% d.with_item(href: "#profile") { "My Profile" } %>
+    <% d.with_item(href: "#settings") { "Settings" } %>
+    <% d.with_divider %>
+    <% d.with_header(text: "Team") %>
+    <% d.with_item(href: "#members") { "Members" } %>
+    <% d.with_item(href: "#billing") { "Billing" } %>
+    <% d.with_divider %>
+    <% d.with_item(href: "#logout", variant: :danger) { "Sign Out" } %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/dropdown/dropdown_component_preview/with_icons.html.erb

@@ -0,0 +1,34 @@
+<div class="p-8">
+  <h3 class="text-lg font-semibold mb-4">With Icons</h3>
+
+  <%= render BetterUi::Dropdown::DropdownComponent.new do |d| %>
+    <% d.with_trigger do %>
+      <%= render(BetterUi::ButtonComponent.new(variant: :primary)) do %>Actions<% end %>
+    <% end %>
+    <% d.with_item(href: "#edit") do |item| %>
+      <% item.with_icon do %>
+        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+        </svg>
+      <% end %>
+      Edit
+    <% end %>
+    <% d.with_item(href: "#duplicate") do |item| %>
+      <% item.with_icon do %>
+        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
+        </svg>
+      <% end %>
+      Duplicate
+    <% end %>
+    <% d.with_divider %>
+    <% d.with_item(href: "#delete", variant: :danger) do |item| %>
+      <% item.with_icon do %>
+        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+        </svg>
+      <% end %>
+      Delete
+    <% end %>
+  <% end %>
+</div>