better_ui 0.9.0 → 0.9.1

data/spec/components/previews/better_ui/table/table_component_preview.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Table
+    class TableComponentPreview < ViewComponent::Preview
+      # @label Default
+      # @display bg_color "#f5f5f5"
+      def default
+        render_with_template
+      end
+
+      # @label Bordered
+      # @display bg_color "#f5f5f5"
+      def bordered
+        render_with_template
+      end
+
+      # @label Striped
+      # @display bg_color "#f5f5f5"
+      def striped
+        render_with_template
+      end
+
+      # @label Hoverable
+      # @display bg_color "#f5f5f5"
+      def hoverable
+        render_with_template
+      end
+
+      # @label All Variants
+      # @display bg_color "#f5f5f5"
+      def all_variants
+        render_with_template
+      end
+
+      # @label All Sizes
+      # @display bg_color "#f5f5f5"
+      def all_sizes
+        render_with_template
+      end
+
+      # @label Collection Mode
+      # @display bg_color "#f5f5f5"
+      def collection_mode
+        render_with_template
+      end
+
+      # @label Empty State
+      # @display bg_color "#f5f5f5"
+      def empty_state
+        render_with_template
+      end
+
+      # @label With Footer
+      # @display bg_color "#f5f5f5"
+      def with_footer
+        render_with_template
+      end
+
+      # @label Inside Card
+      # @display bg_color "#f5f5f5"
+      def inside_card
+        render_with_template
+      end
+
+      # @label Highlighted Rows
+      # @display bg_color "#f5f5f5"
+      def highlighted
+        render_with_template
+      end
+
+      # @label Sortable Headers
+      # @display bg_color "#f5f5f5"
+      def sortable
+        render_with_template
+      end
+    end
+  end
+end

data/spec/components/previews/better_ui/tabs/container_component_preview/alignments.html.erb

@@ -0,0 +1,24 @@
+<div class="p-4 space-y-8">
+  <h3 class="text-lg font-semibold mb-4">Tab Alignments</h3>
+
+  <% %i[start center end].each do |alignment| %>
+    <div class="mb-6">
+      <p class="text-sm font-medium text-grayscale-500 mb-2 capitalize"><%= alignment %></p>
+      <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :pills, alignment: alignment) do |tabs| %>
+        <% tabs.with_tab(id: "#{alignment}-tab1", label: "First", active: true) %>
+        <% tabs.with_tab(id: "#{alignment}-tab2", label: "Second") %>
+        <% tabs.with_tab(id: "#{alignment}-tab3", label: "Third") %>
+
+        <% tabs.with_panel(id: "#{alignment}-tab1", active: true) do %>
+          <div class="p-3 text-sm text-grayscale-600">Alignment: <%= alignment %></div>
+        <% end %>
+        <% tabs.with_panel(id: "#{alignment}-tab2") do %>
+          <div class="p-3 text-sm text-grayscale-600">Tab Two content</div>
+        <% end %>
+        <% tabs.with_panel(id: "#{alignment}-tab3") do %>
+          <div class="p-3 text-sm text-grayscale-600">Tab Three content</div>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/tabs/container_component_preview/all_sizes.html.erb

@@ -0,0 +1,24 @@
+<div class="p-4 space-y-8">
+  <h3 class="text-lg font-semibold mb-4">All Sizes</h3>
+
+  <% %i[xs sm md lg xl].each do |size| %>
+    <div class="mb-6">
+      <p class="text-sm font-medium text-grayscale-500 mb-2 uppercase"><%= size %></p>
+      <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :underline, size: size) do |tabs| %>
+        <% tabs.with_tab(id: "#{size}-tab1", label: "Tab One", active: true) %>
+        <% tabs.with_tab(id: "#{size}-tab2", label: "Tab Two") %>
+        <% tabs.with_tab(id: "#{size}-tab3", label: "Tab Three") %>
+
+        <% tabs.with_panel(id: "#{size}-tab1", active: true) do %>
+          <div class="p-3 text-sm text-grayscale-600">Content for size <%= size %></div>
+        <% end %>
+        <% tabs.with_panel(id: "#{size}-tab2") do %>
+          <div class="p-3 text-sm text-grayscale-600">Tab Two content</div>
+        <% end %>
+        <% tabs.with_panel(id: "#{size}-tab3") do %>
+          <div class="p-3 text-sm text-grayscale-600">Tab Three content</div>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/tabs/container_component_preview/all_variants.html.erb

@@ -0,0 +1,24 @@
+<div class="p-4 space-y-8">
+  <h3 class="text-lg font-semibold mb-4">All Color Variants (Underline Style)</h3>
+
+  <% BetterUi::ApplicationComponent::VARIANTS.keys.each do |variant| %>
+    <div class="mb-6">
+      <p class="text-sm font-medium text-grayscale-500 mb-2 capitalize"><%= variant %></p>
+      <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :underline, variant: variant) do |tabs| %>
+        <% tabs.with_tab(id: "#{variant}-tab1", label: "Tab One", active: true) %>
+        <% tabs.with_tab(id: "#{variant}-tab2", label: "Tab Two") %>
+        <% tabs.with_tab(id: "#{variant}-tab3", label: "Tab Three") %>
+
+        <% tabs.with_panel(id: "#{variant}-tab1", active: true) do %>
+          <div class="p-3 text-sm text-grayscale-600">Content for <%= variant %> variant, Tab One</div>
+        <% end %>
+        <% tabs.with_panel(id: "#{variant}-tab2") do %>
+          <div class="p-3 text-sm text-grayscale-600">Content for <%= variant %> variant, Tab Two</div>
+        <% end %>
+        <% tabs.with_panel(id: "#{variant}-tab3") do %>
+          <div class="p-3 text-sm text-grayscale-600">Content for <%= variant %> variant, Tab Three</div>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/tabs/container_component_preview/bordered_style.html.erb

@@ -0,0 +1,30 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Bordered Style</h3>
+
+  <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :bordered) do |tabs| %>
+    <% tabs.with_tab(id: "details", label: "Details", active: true) %>
+    <% tabs.with_tab(id: "reviews", label: "Reviews") %>
+    <% tabs.with_tab(id: "shipping", label: "Shipping") %>
+
+    <% tabs.with_panel(id: "details", active: true) do %>
+      <div class="p-4 border border-t-0 border-grayscale-200 rounded-b-lg">
+        <h4 class="font-medium mb-2">Product Details</h4>
+        <p class="text-grayscale-600">High-quality product with premium materials and craftsmanship.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "reviews") do %>
+      <div class="p-4 border border-t-0 border-grayscale-200 rounded-b-lg">
+        <h4 class="font-medium mb-2">Customer Reviews</h4>
+        <p class="text-grayscale-600">4.8 out of 5 stars (128 reviews)</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "shipping") do %>
+      <div class="p-4 border border-t-0 border-grayscale-200 rounded-b-lg">
+        <h4 class="font-medium mb-2">Shipping Information</h4>
+        <p class="text-grayscale-600">Free shipping on orders over $50. Delivery in 3-5 business days.</p>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/tabs/container_component_preview/default.html.erb

@@ -0,0 +1,30 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Underline Style (Default)</h3>
+
+  <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :underline) do |tabs| %>
+    <% tabs.with_tab(id: "profile", label: "Profile", active: true) %>
+    <% tabs.with_tab(id: "account", label: "Account") %>
+    <% tabs.with_tab(id: "notifications", label: "Notifications") %>
+
+    <% tabs.with_panel(id: "profile", active: true) do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Profile Settings</h4>
+        <p class="text-grayscale-600">Manage your profile information and preferences.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "account") do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Account Settings</h4>
+        <p class="text-grayscale-600">Update your account details and security settings.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "notifications") do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Notification Preferences</h4>
+        <p class="text-grayscale-600">Choose how you want to receive notifications.</p>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/tabs/container_component_preview/disabled_tab.html.erb

@@ -0,0 +1,65 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Tabs with Disabled State</h3>
+
+  <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :underline) do |tabs| %>
+    <% tabs.with_tab(id: "active", label: "Active Tab", active: true) %>
+    <% tabs.with_tab(id: "enabled", label: "Enabled Tab") %>
+    <% tabs.with_tab(id: "disabled", label: "Disabled Tab", disabled: true) %>
+    <% tabs.with_tab(id: "another", label: "Another Tab") %>
+
+    <% tabs.with_panel(id: "active", active: true) do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Active Tab Content</h4>
+        <p class="text-grayscale-600">This is the currently active tab.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "enabled") do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Enabled Tab Content</h4>
+        <p class="text-grayscale-600">This tab can be selected.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "disabled") do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Disabled Tab Content</h4>
+        <p class="text-grayscale-600">This content cannot be accessed because the tab is disabled.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "another") do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Another Tab Content</h4>
+        <p class="text-grayscale-600">This is another selectable tab.</p>
+      </div>
+    <% end %>
+  <% end %>
+
+  <div class="mt-8">
+    <h4 class="text-md font-semibold mb-4">Pills Style with Disabled</h4>
+    <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :pills, variant: :success) do |tabs| %>
+      <% tabs.with_tab(id: "pills-active", label: "Active", active: true) %>
+      <% tabs.with_tab(id: "pills-disabled", label: "Coming Soon", disabled: true) %>
+      <% tabs.with_tab(id: "pills-enabled", label: "Enabled") %>
+
+      <% tabs.with_panel(id: "pills-active", active: true) do %>
+        <div class="p-4">
+          <p class="text-grayscale-600">The "Coming Soon" tab is disabled.</p>
+        </div>
+      <% end %>
+
+      <% tabs.with_panel(id: "pills-disabled") do %>
+        <div class="p-4">
+          <p class="text-grayscale-600">Disabled content.</p>
+        </div>
+      <% end %>
+
+      <% tabs.with_panel(id: "pills-enabled") do %>
+        <div class="p-4">
+          <p class="text-grayscale-600">Enabled tab content.</p>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/tabs/container_component_preview/pills_style.html.erb

@@ -0,0 +1,34 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Pills Style</h3>
+
+  <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :pills) do |tabs| %>
+    <% tabs.with_tab(id: "all", label: "All", active: true) %>
+    <% tabs.with_tab(id: "active", label: "Active") %>
+    <% tabs.with_tab(id: "draft", label: "Draft") %>
+    <% tabs.with_tab(id: "archived", label: "Archived") %>
+
+    <% tabs.with_panel(id: "all", active: true) do %>
+      <div class="p-4">
+        <p class="text-grayscale-600">Showing all items (15 total)</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "active") do %>
+      <div class="p-4">
+        <p class="text-grayscale-600">Showing active items (8 total)</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "draft") do %>
+      <div class="p-4">
+        <p class="text-grayscale-600">Showing draft items (4 total)</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "archived") do %>
+      <div class="p-4">
+        <p class="text-grayscale-600">Showing archived items (3 total)</p>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/tabs/container_component_preview/turbo_mode.html.erb

@@ -0,0 +1,40 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Turbo Mode Example</h3>
+
+  <div class="mb-4 p-4 bg-info-50 border border-info-200 rounded-lg">
+    <p class="text-sm text-info-800">
+      <strong>Note:</strong> Turbo mode tabs use anchor tags that navigate via Turbo Frames.
+      This example shows the HTML structure. In a real application, clicking tabs would
+      load content from the server into the turbo-frame.
+    </p>
+  </div>
+
+  <%= render BetterUi::Tabs::ContainerComponent.new(mode: :turbo, frame_id: "tab-content", style: :underline) do |tabs| %>
+    <% tabs.with_tab(id: "dashboard", label: "Dashboard", href: "#dashboard", active: true) %>
+    <% tabs.with_tab(id: "users", label: "Users", href: "#users") %>
+    <% tabs.with_tab(id: "settings", label: "Settings", href: "#settings") %>
+  <% end %>
+
+  <turbo-frame id="tab-content" class="block p-4 border border-grayscale-200 rounded-b-lg mt-0">
+    <div class="text-grayscale-600">
+      <p>This is a <code class="bg-grayscale-100 px-1 rounded">turbo-frame</code> element.</p>
+      <p class="mt-2">In Turbo mode, clicking a tab navigates to the href and the response is rendered inside this frame.</p>
+    </div>
+  </turbo-frame>
+
+  <div class="mt-8">
+    <h4 class="text-md font-semibold mb-4">Pills Style Turbo Mode</h4>
+
+    <%= render BetterUi::Tabs::ContainerComponent.new(mode: :turbo, frame_id: "pills-content", style: :pills, variant: :accent) do |tabs| %>
+      <% tabs.with_tab(id: "overview", label: "Overview", href: "#overview", active: true) %>
+      <% tabs.with_tab(id: "analytics", label: "Analytics", href: "#analytics") %>
+      <% tabs.with_tab(id: "reports", label: "Reports", href: "#reports") %>
+    <% end %>
+
+    <turbo-frame id="pills-content" class="block p-4 mt-4">
+      <div class="text-grayscale-600">
+        <p>Content loaded via Turbo Frame.</p>
+      </div>
+    </turbo-frame>
+  </div>
+</div>

data/spec/components/previews/better_ui/tabs/container_component_preview/vertical_left.html.erb

@@ -0,0 +1,38 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Vertical Tabs (Left Position)</h3>
+
+  <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :underline, position: :left) do |tabs| %>
+    <% tabs.with_tab(id: "general", label: "General", active: true) %>
+    <% tabs.with_tab(id: "security", label: "Security") %>
+    <% tabs.with_tab(id: "billing", label: "Billing") %>
+    <% tabs.with_tab(id: "team", label: "Team") %>
+
+    <% tabs.with_panel(id: "general", active: true) do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">General Settings</h4>
+        <p class="text-grayscale-600">Configure your general application settings and preferences.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "security") do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Security Settings</h4>
+        <p class="text-grayscale-600">Manage your security preferences and two-factor authentication.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "billing") do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Billing Information</h4>
+        <p class="text-grayscale-600">View and update your billing details and payment methods.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "team") do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Team Management</h4>
+        <p class="text-grayscale-600">Invite team members and manage their permissions.</p>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/tabs/container_component_preview/vertical_right.html.erb

@@ -0,0 +1,30 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Vertical Tabs (Right Position)</h3>
+
+  <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :pills, position: :right, variant: :accent) do |tabs| %>
+    <% tabs.with_tab(id: "overview", label: "Overview", active: true) %>
+    <% tabs.with_tab(id: "analytics", label: "Analytics") %>
+    <% tabs.with_tab(id: "reports", label: "Reports") %>
+
+    <% tabs.with_panel(id: "overview", active: true) do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Dashboard Overview</h4>
+        <p class="text-grayscale-600">View your dashboard metrics and key performance indicators.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "analytics") do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Analytics Dashboard</h4>
+        <p class="text-grayscale-600">Dive deep into your analytics data and trends.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "reports") do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Reports</h4>
+        <p class="text-grayscale-600">Generate and download custom reports.</p>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/tabs/container_component_preview/with_icons_and_badges.html.erb

@@ -0,0 +1,71 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Tabs with Icons and Badges</h3>
+
+  <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :underline) do |tabs| %>
+    <% tabs.with_tab(id: "inbox", label: "Inbox", active: true) do |tab| %>
+      <% tab.with_icon do %>
+        <svg class="w-4 h-4" 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>
+      <% end %>
+      <% tab.with_badge do %>
+        <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-full">12</span>
+      <% end %>
+    <% end %>
+
+    <% tabs.with_tab(id: "sent", label: "Sent") do |tab| %>
+      <% tab.with_icon do %>
+        <svg class="w-4 h-4" 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>
+      <% end %>
+    <% end %>
+
+    <% tabs.with_tab(id: "drafts", label: "Drafts") do |tab| %>
+      <% tab.with_icon do %>
+        <svg class="w-4 h-4" 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>
+      <% end %>
+      <% tab.with_badge do %>
+        <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium bg-warning-100 text-warning-800 rounded-full">3</span>
+      <% end %>
+    <% end %>
+
+    <% tabs.with_tab(id: "trash", label: "Trash") do |tab| %>
+      <% tab.with_icon do %>
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+        </svg>
+      <% end %>
+    <% end %>
+
+    <% tabs.with_panel(id: "inbox", active: true) do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Inbox</h4>
+        <p class="text-grayscale-600">You have 12 unread messages.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "sent") do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Sent Messages</h4>
+        <p class="text-grayscale-600">View your sent messages.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "drafts") do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Drafts</h4>
+        <p class="text-grayscale-600">You have 3 draft messages.</p>
+      </div>
+    <% end %>
+
+    <% tabs.with_panel(id: "trash") do %>
+      <div class="p-4">
+        <h4 class="font-medium mb-2">Trash</h4>
+        <p class="text-grayscale-600">Deleted messages appear here.</p>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/tabs/container_component_preview.rb

@@ -0,0 +1,130 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Tabs
+    # @label Tabs Container
+    class ContainerComponentPreview < ViewComponent::Preview
+      # @label Default (Underline)
+      # @display max_height 400px
+      def default
+        render_with_template
+      end
+
+      # @label Pills Style
+      # @display max_height 400px
+      def pills_style
+        render_with_template
+      end
+
+      # @label Bordered Style
+      # @display max_height 400px
+      def bordered_style
+        render_with_template
+      end
+
+      # @label All Variants (Underline)
+      # @display max_height 600px
+      def all_variants
+        render_with_template
+      end
+
+      # @label All Sizes
+      # @display max_height 800px
+      def all_sizes
+        render_with_template
+      end
+
+      # @label Alignments
+      # @display max_height 600px
+      def alignments
+        render_with_template
+      end
+
+      # @label Vertical Tabs (Left)
+      # @display max_height 400px
+      def vertical_left
+        render_with_template
+      end
+
+      # @label Vertical Tabs (Right)
+      # @display max_height 400px
+      def vertical_right
+        render_with_template
+      end
+
+      # @label With Icons and Badges
+      # @display max_height 400px
+      def with_icons_and_badges
+        render_with_template
+      end
+
+      # @label Disabled Tab
+      # @display max_height 400px
+      def disabled_tab
+        render_with_template
+      end
+
+      # @label Turbo Mode Example
+      # @display max_height 400px
+      def turbo_mode
+        render_with_template
+      end
+
+      # @label Playground
+      # @display max_height 500px
+      # @param mode select { choices: [js, turbo] }
+      # @param style select { choices: [underline, pills, bordered] }
+      # @param variant select { choices: [primary, secondary, accent, success, danger, warning, info, light, dark] }
+      # @param size select { choices: [xs, sm, md, lg, xl] }
+      # @param alignment select { choices: [start, center, end, stretch] }
+      # @param position select { choices: [top, bottom, left, right] }
+      def playground(
+        mode: :js,
+        style: :underline,
+        variant: :primary,
+        size: :md,
+        alignment: :start,
+        position: :top
+      )
+        render BetterUi::Tabs::ContainerComponent.new(
+          mode: mode.to_sym,
+          style: style.to_sym,
+          variant: variant.to_sym,
+          size: size.to_sym,
+          alignment: alignment.to_sym,
+          position: position.to_sym
+        ) do |tabs|
+          tabs.with_tab(id: "overview", label: "Overview", active: true)
+          tabs.with_tab(id: "features", label: "Features")
+          tabs.with_tab(id: "pricing", label: "Pricing")
+
+          tabs.with_panel(id: "overview", active: true) do
+            "<div class='p-4'>
+              <h3 class='text-lg font-semibold mb-2'>Overview</h3>
+              <p class='text-grayscale-600'>This is the overview panel content. Customize the tabs using the controls above.</p>
+            </div>".html_safe
+          end
+
+          tabs.with_panel(id: "features") do
+            "<div class='p-4'>
+              <h3 class='text-lg font-semibold mb-2'>Features</h3>
+              <ul class='list-disc list-inside text-grayscale-600'>
+                <li>Multiple styles: underline, pills, bordered</li>
+                <li>9 color variants</li>
+                <li>5 size options</li>
+                <li>Vertical and horizontal layouts</li>
+              </ul>
+            </div>".html_safe
+          end
+
+          tabs.with_panel(id: "pricing") do
+            "<div class='p-4'>
+              <h3 class='text-lg font-semibold mb-2'>Pricing</h3>
+              <p class='text-grayscale-600'>Contact us for pricing information.</p>
+            </div>".html_safe
+          end
+        end
+      end
+    end
+  end
+end

data/spec/components/previews/better_ui/tag_component_preview/all_styles.html.erb

@@ -0,0 +1,14 @@
+<div class="p-8 space-y-8">
+  <% [:xs, :sm, :md, :lg].each do |size| %>
+    <div>
+      <h3 class="text-lg font-semibold mb-4 capitalize">Size: <%= size %></h3>
+      <div class="flex flex-wrap gap-3">
+        <% [:solid, :outline, :soft].each do |style| %>
+          <%= render BetterUi::TagComponent.new(style: style, size: size) do %>
+            <%= style.to_s.capitalize %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/tag_component_preview/all_variants.html.erb

@@ -0,0 +1,14 @@
+<div class="p-8 space-y-8">
+  <% [:solid, :outline, :soft].each do |style| %>
+    <div>
+      <h3 class="text-lg font-semibold mb-4 capitalize"><%= style %> Tags</h3>
+      <div class="flex flex-wrap gap-3">
+        <% BetterUi::ApplicationComponent::VARIANTS.keys.each do |variant| %>
+          <%= render BetterUi::TagComponent.new(variant: variant, style: style) do %>
+            <%= variant.to_s.capitalize %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>