better_ui 0.9.0 → 0.9.1

data/spec/components/previews/better_ui/button_component_preview/interactive.html.erb

@@ -0,0 +1,149 @@
+<div class="p-8 space-y-8">
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Click Counter Demo</h3>
+    <div class="flex items-center gap-4">
+      <%= render BetterUi::ButtonComponent.new(
+        variant: :primary,
+        data: {
+          action: "click->counter#increment"
+        }
+      ) do %>
+        Click Me!
+      <% end %>
+
+      <span class="text-lg">Clicks: <span data-counter-target="count">0</span></span>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Alert Demo</h3>
+    <div class="flex flex-wrap gap-3">
+      <%= render BetterUi::ButtonComponent.new(
+        variant: :info,
+        onclick: "alert('Primary button clicked!')"
+      ) do %>
+        Show Alert
+      <% end %>
+
+      <%= render BetterUi::ButtonComponent.new(
+        variant: :success,
+        style: :outline,
+        onclick: "console.log('Success button clicked')"
+      ) do %>
+        Log to Console
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Disabled Button Interaction</h3>
+    <div class="flex flex-wrap gap-3">
+      <%= render BetterUi::ButtonComponent.new(
+        variant: :primary,
+        disabled: true,
+        onclick: "alert('This should not fire')"
+      ) do %>
+        Disabled (Click Won't Work)
+      <% end %>
+
+      <%= render BetterUi::ButtonComponent.new(
+        variant: :primary,
+        show_loader: true,
+        onclick: "alert('This should not fire')"
+      ) do %>
+        Loading (Click Won't Work)
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Button with Custom Data Attributes</h3>
+    <%= render BetterUi::ButtonComponent.new(
+      variant: :primary,
+      data: {
+        turbo_method: :post,
+        turbo_confirm: "Are you sure?",
+        custom_value: "example"
+      }
+    ) do %>
+      Button with Data Attributes
+    <% end %>
+    <p class="text-sm text-gray-600 mt-2">Inspect this button to see data-turbo-method, data-turbo-confirm, and data-custom-value attributes</p>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Buttons with ARIA Labels</h3>
+    <div class="flex flex-wrap gap-3">
+      <%= render BetterUi::ButtonComponent.new(
+        variant: :danger,
+        aria: { label: "Delete item" },
+        title: "Delete"
+      ) do |button| %>
+        <% button.with_icon_before 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="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 %>
+
+      <%= render BetterUi::ButtonComponent.new(
+        variant: :primary,
+        aria: { label: "Edit item" },
+        title: "Edit"
+      ) do |button| %>
+        <% button.with_icon_before 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="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 %>
+      <% end %>
+    </div>
+    <p class="text-sm text-gray-600 mt-2">Hover over buttons to see tooltips (title) and inspect for aria-label attributes</p>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Focus State Demo</h3>
+    <p class="text-sm text-gray-600 mb-2">Tab through these buttons to see focus states:</p>
+    <div class="flex flex-wrap gap-3">
+      <% (@variants || BetterUi::ApplicationComponent::VARIANTS.keys).each do |variant| %>
+        <%= render BetterUi::ButtonComponent.new(variant: variant) do %>
+          <%= variant.to_s.capitalize %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<script data-turbo-track="reload">
+  // Simple counter controller for demo
+  if (!window.Stimulus) {
+    console.warn('Stimulus not loaded for interactive demo');
+  } else {
+    class CounterController extends window.Stimulus.Controller {
+      static targets = ["count"]
+
+      connect() {
+        this.count = 0;
+      }
+
+      increment() {
+        this.count++;
+        if (this.hasCountTarget) {
+          this.countTarget.textContent = this.count;
+        }
+      }
+    }
+
+    if (window.Stimulus.application) {
+      try {
+        window.Stimulus.application.register("counter", CounterController);
+      } catch(e) {
+        // Controller might already be registered
+      }
+    }
+  }
+</script>
+
+<div data-controller="counter">
+  <!-- Counter context for demo -->
+</div>

data/spec/components/previews/better_ui/button_component_preview/link_states.html.erb

@@ -0,0 +1,36 @@
+<div class="p-8 space-y-8">
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Normal Link</h3>
+    <div class="flex gap-3">
+      <%= render BetterUi::ButtonComponent.new(href: "#") { "Click Me" } %>
+      <%= render BetterUi::ButtonComponent.new(href: "#", style: :outline) { "Outline Link" } %>
+      <%= render BetterUi::ButtonComponent.new(href: "#", style: :ghost) { "Ghost Link" } %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Disabled Links</h3>
+    <div class="flex gap-3">
+      <%= render BetterUi::ButtonComponent.new(href: "#", disabled: true) { "Disabled" } %>
+      <%= render BetterUi::ButtonComponent.new(href: "#", disabled: true, style: :outline) { "Disabled Outline" } %>
+      <%= render BetterUi::ButtonComponent.new(href: "#", disabled: true, variant: :danger) { "Disabled Danger" } %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Loading Links</h3>
+    <div class="flex gap-3">
+      <%= render BetterUi::ButtonComponent.new(href: "#", show_loader: true) { "Loading..." } %>
+      <%= render BetterUi::ButtonComponent.new(href: "#", show_loader: true, variant: :success) { "Loading Success" } %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Show Loader on Click</h3>
+    <p class="text-sm text-gray-600 mb-2">Click the links to see the loading state</p>
+    <div class="flex gap-3">
+      <%= render BetterUi::ButtonComponent.new(href: "#", show_loader_on_click: true) { "Click to Load" } %>
+      <%= render BetterUi::ButtonComponent.new(href: "#", show_loader_on_click: true, variant: :info) { "Info Link" } %>
+    </div>
+  </div>
+</div>

data/spec/components/previews/better_ui/button_component_preview/loading_states.html.erb

@@ -0,0 +1,62 @@
+<div class="p-8 space-y-8">
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Loading States - All Styles</h3>
+    <div class="flex flex-wrap gap-3">
+      <%= render BetterUi::ButtonComponent.new(variant: :primary, style: :solid, show_loader: true) do %>
+      Saving
+      <% end %>
+
+      <%= render BetterUi::ButtonComponent.new(variant: :secondary, style: :outline, show_loader: true) do %>
+      Loading
+      <% end %>
+
+      <%= render BetterUi::ButtonComponent.new(variant: :success, style: :ghost, show_loader: true) do %>
+      Processing
+      <% end %>
+
+      <%= render BetterUi::ButtonComponent.new(variant: :info, style: :soft, show_loader: true) do %>
+      Updating
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Loading States - All Sizes</h3>
+    <div class="flex items-center flex-wrap gap-3">
+      <% (@sizes || [:xs, :sm, :md, :lg, :xl]).each do |size| %>
+      <%= render BetterUi::ButtonComponent.new(variant: :primary, size: size, show_loader: true) do %>
+      Loading <%= size.to_s.upcase %>
+      <% end %>
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Loading States - All Variants</h3>
+    <div class="flex flex-wrap gap-3">
+      <% (@variants || BetterUi::ApplicationComponent::VARIANTS.keys).each do |variant| %>
+      <%= render BetterUi::ButtonComponent.new(variant: variant, show_loader: true) do %>
+      <%= variant.to_s.capitalize %>
+      <% end %>
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Loading vs Normal States Comparison</h3>
+    <div class="grid grid-cols-2 gap-4">
+      <div>
+        <p class="text-sm text-gray-600 mb-2">Normal State</p>
+        <%= render BetterUi::ButtonComponent.new(variant: :primary, show_loader_on_click: true, type: :submit) do %>
+        Submit Form
+        <% end %>
+      </div>
+      <div>
+        <p class="text-sm text-gray-600 mb-2">Loading State</p>
+        <%= render BetterUi::ButtonComponent.new(variant: :primary, show_loader: true) do %>
+        Submit Form
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/spec/components/previews/better_ui/button_component_preview/turbo_method_links.html.erb

@@ -0,0 +1,98 @@
+<div class="p-8 space-y-6">
+  <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
+    <p class="text-sm text-yellow-800">
+      These links use <code class="bg-yellow-100 px-1 rounded">data-turbo-method</code> for non-GET requests via Turbo Drive.
+      Clicking them will trigger the specified HTTP method.
+    </p>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">DELETE Method Link</h3>
+    <p class="text-sm text-gray-600 mb-2">Commonly used for delete actions</p>
+    <%= render BetterUi::ButtonComponent.new(
+      href: "#",
+      method: :delete,
+      variant: :danger,
+      style: :outline
+    ) do |c|
+      c.with_icon_before 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
+      "Delete Item"
+    end %>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">POST Method Link</h3>
+    <p class="text-sm text-gray-600 mb-2">Commonly used for create actions</p>
+    <%= render BetterUi::ButtonComponent.new(
+      href: "#",
+      method: :post,
+      variant: :success
+    ) do |c|
+      c.with_icon_before 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 4v16m8-8H4"></path>
+        </svg>
+      <% end
+      "Create Item"
+    end %>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">PATCH Method Link</h3>
+    <p class="text-sm text-gray-600 mb-2">Commonly used for update actions</p>
+    <%= render BetterUi::ButtonComponent.new(
+      href: "#",
+      method: :patch,
+      variant: :info
+    ) do |c|
+      c.with_icon_before 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
+      "Update Item"
+    end %>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">PUT Method Link</h3>
+    <p class="text-sm text-gray-600 mb-2">Commonly used for full resource replacement</p>
+    <%= render BetterUi::ButtonComponent.new(
+      href: "#",
+      method: :put,
+      variant: :warning,
+      style: :soft
+    ) do |c|
+      c.with_icon_before 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+        </svg>
+      <% end
+      "Replace Item"
+    end %>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Combined with Loading State</h3>
+    <p class="text-sm text-gray-600 mb-2">Click to see loading state while request processes</p>
+    <div class="flex gap-3">
+      <%= render BetterUi::ButtonComponent.new(
+        href: "#",
+        method: :delete,
+        variant: :danger,
+        show_loader_on_click: true
+      ) { "Delete with Loading" } %>
+
+      <%= render BetterUi::ButtonComponent.new(
+        href: "#",
+        method: :post,
+        variant: :success,
+        show_loader_on_click: true
+      ) { "Create with Loading" } %>
+    </div>
+  </div>
+</div>

data/spec/components/previews/better_ui/button_component_preview/with_icons.html.erb

@@ -0,0 +1,123 @@
+<div class="p-8 space-y-8">
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Icon Before Text</h3>
+    <div class="flex flex-wrap gap-3">
+      <%= render BetterUi::ButtonComponent.new(variant: :primary) do |button| %>
+        <% button.with_icon_before 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="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>
+        <% end %>
+        Login
+      <% end %>
+
+      <%= render BetterUi::ButtonComponent.new(variant: :success, style: :outline) do |button| %>
+        <% button.with_icon_before 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+        <% end %>
+        Save
+      <% end %>
+
+      <%= render BetterUi::ButtonComponent.new(variant: :info, style: :ghost) do |button| %>
+        <% button.with_icon_before 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 4v16m8-8H4"></path>
+          </svg>
+        <% end %>
+        Add New
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Icon After Text</h3>
+    <div class="flex flex-wrap gap-3">
+      <%= render BetterUi::ButtonComponent.new(variant: :primary) do |button| %>
+        Continue
+        <% button.with_icon_after 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="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+          </svg>
+        <% end %>
+      <% end %>
+
+      <%= render BetterUi::ButtonComponent.new(variant: :secondary, style: :outline) do |button| %>
+        Next Page
+        <% button.with_icon_after 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 5l7 7-7 7"></path>
+          </svg>
+        <% end %>
+      <% end %>
+
+      <%= render BetterUi::ButtonComponent.new(variant: :info, style: :soft) do |button| %>
+        Download
+        <% button.with_icon_after 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+          </svg>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Icon Only Buttons</h3>
+    <div class="flex flex-wrap gap-3">
+      <%= render BetterUi::ButtonComponent.new(variant: :danger, size: :md, aria: { label: "Delete" }) do |button| %>
+        <% button.with_icon_before 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="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 %>
+
+      <%= render BetterUi::ButtonComponent.new(variant: :primary, size: :md, style: :outline, aria: { label: "Edit" }) do |button| %>
+        <% button.with_icon_before 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="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 %>
+      <% end %>
+
+      <%= render BetterUi::ButtonComponent.new(variant: :secondary, size: :md, style: :ghost, aria: { label: "Settings" }) do |button| %>
+        <% button.with_icon_before 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 %>
+
+      <%= render BetterUi::ButtonComponent.new(variant: :info, size: :sm, style: :soft, aria: { label: "Info" }) do |button| %>
+        <% button.with_icon_before 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Different Sizes with Icons</h3>
+    <div class="flex items-center flex-wrap gap-3">
+      <%
+        sizes = @sizes || [:xs, :sm, :md, :lg, :xl]
+        icon_sizes = @icon_sizes || { xs: "w-3 h-3", sm: "w-4 h-4", md: "w-5 h-5", lg: "w-6 h-6", xl: "w-7 h-7" }
+        sizes.each do |size|
+      %>
+        <%= render BetterUi::ButtonComponent.new(variant: :primary, size: size) do |button| %>
+          <% button.with_icon_before do %>
+            <svg class="<%= icon_sizes[size] %>" 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>
+          <% end %>
+          <%= size.to_s.upcase %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/spec/components/previews/better_ui/button_component_preview.rb

@@ -0,0 +1,155 @@
+# frozen_string_literal: true
+
+module BetterUi
+  class ButtonComponentPreview < ViewComponent::Preview
+    # @label Default
+    def default
+      render BetterUi::ButtonComponent.new do
+        "Click me"
+      end
+    end
+
+    # @label All Variants
+    # @display bg_color #f5f5f5
+    def all_variants
+      @variants = ApplicationComponent::VARIANTS.keys
+      @styles = [ :solid, :outline, :ghost, :soft ]
+      render_with_template
+    end
+
+    # @label All Sizes
+    def all_sizes
+      @sizes = [ :xs, :sm, :md, :lg, :xl ]
+      render_with_template
+    end
+
+    # @label With Icons
+    def with_icons
+      @sizes = [ :xs, :sm, :md, :lg, :xl ]
+      @icon_sizes = {
+        xs: "w-3 h-3",
+        sm: "w-4 h-4",
+        md: "w-5 h-5",
+        lg: "w-6 h-6",
+        xl: "w-7 h-7"
+      }
+      render_with_template
+    end
+
+    # @label Loading States
+    def loading_states
+      @variants = ApplicationComponent::VARIANTS.keys
+      @sizes = [ :xs, :sm, :md, :lg, :xl ]
+      render_with_template
+    end
+
+    # @label Form Integration
+    def form_integration
+      render_with_template
+    end
+
+    # @label Interactive Demo
+    def interactive
+      @variants = ApplicationComponent::VARIANTS.keys.take(5)
+      render_with_template
+    end
+
+    # @label Playground
+    # @param variant select { choices: [primary, secondary, accent, success, danger, warning, info, light, dark] }
+    # @param style select { choices: [solid, outline, ghost, soft] }
+    # @param size select { choices: [xs, sm, md, lg, xl] }
+    # @param show_loader toggle
+    # @param show_loader_on_click toggle
+    # @param disabled toggle
+    # @param icon_position select { choices: [none, before, after, both] }
+    def playground(variant: :primary, style: :solid, size: :md, show_loader: false, show_loader_on_click: false, disabled: false, icon_position: :none)
+      render BetterUi::ButtonComponent.new(
+        variant: variant,
+        style: style,
+        size: size,
+        show_loader: show_loader,
+        show_loader_on_click: show_loader_on_click,
+        disabled: disabled
+      ) do |button|
+        # Add icons based on selection
+        if [ :before, :both ].include?(icon_position)
+          button.with_icon_before 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="M5 13l4 4L19 7"></path>
+            </svg>'.html_safe
+          end
+        end
+
+        if [ :after, :both ].include?(icon_position)
+          button.with_icon_after 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="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+            </svg>'.html_safe
+          end
+        end
+
+        "Interactive Button"
+      end
+    end
+
+    # @label Auto-Loading Submit Button
+    def auto_loading_submit
+      render_with_template
+    end
+
+    # @label As Links
+    # @display bg_color #f5f5f5
+    def as_links
+      render_with_template
+    end
+
+    # @label Link States
+    def link_states
+      render_with_template
+    end
+
+    # @label External Links
+    def external_links
+      render_with_template
+    end
+
+    # @label Turbo Method Links
+    def turbo_method_links
+      render_with_template
+    end
+
+    # @label Link Playground
+    # @param variant select { choices: [primary, secondary, accent, success, danger, warning, info, light, dark] }
+    # @param style select { choices: [solid, outline, ghost, soft] }
+    # @param size select { choices: [xs, sm, md, lg, xl] }
+    # @param disabled toggle
+    # @param show_loader toggle
+    # @param show_loader_on_click toggle
+    # @param target select { choices: [none, blank, self] }
+    def link_playground(variant: :primary, style: :solid, size: :md, disabled: false, show_loader: false, show_loader_on_click: false, target: :none)
+      target_val = case target
+      when :blank then "_blank"
+      when :self then "_self"
+      else nil
+      end
+
+      # Convert to boolean - handles both true/false and "true"/"false"
+      disabled_bool = ActiveModel::Type::Boolean.new.cast(disabled)
+      show_loader_bool = ActiveModel::Type::Boolean.new.cast(show_loader)
+      show_loader_on_click_bool = ActiveModel::Type::Boolean.new.cast(show_loader_on_click)
+
+      render BetterUi::ButtonComponent.new(
+        href: "#",
+        variant: variant,
+        style: style,
+        size: size,
+        target: target_val,
+        disabled: disabled_bool,
+        show_loader: show_loader_bool,
+        show_loader_on_click: show_loader_on_click_bool
+      ) do
+        "Link Button"
+      end
+    end
+  end
+end

data/spec/components/previews/better_ui/card_component_preview/all_sizes.html.erb

@@ -0,0 +1,10 @@
+<div class="space-y-4 p-4">
+  <% [:xs, :sm, :md, :lg, :xl].each do |size| %>
+    <div>
+      <%= render BetterUi::CardComponent.new(size: size) do |card| %>
+        <% card.with_header { "Size: #{size.to_s.upcase}" } %>
+        <% card.with_body { "This card demonstrates the #{size} size variant with appropriate padding and text sizing." } %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,22 @@
+<div class="space-y-4 p-4">
+  <% [:solid, :outline, :ghost, :soft, :bordered].each do |style| %>
+    <div>
+      <%= render BetterUi::CardComponent.new(variant: :primary, style: style) do |card| %>
+        <% card.with_header { "#{style.to_s.capitalize} Style" } %>
+        <% card.with_body do %>
+          <% if style == :solid %>
+            Filled background with subtle border and dark text. Best for emphasis.
+          <% elsif style == :outline %>
+            White background with colored border. Clean and minimal.
+          <% elsif style == :ghost %>
+            Transparent background with colored text. Most subtle.
+          <% elsif style == :soft %>
+            Light colored background with subtle border. Gentle appearance.
+          <% elsif style == :bordered %>
+            White background with variant-colored border. Defaults to light variant.
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,10 @@
+<div class="space-y-4 p-4">
+  <% BetterUi::ApplicationComponent::VARIANTS.keys.each do |variant| %>
+    <div>
+      <%= render BetterUi::CardComponent.new(variant: variant, style: :solid) do |card| %>
+        <% card.with_header { variant.to_s.capitalize } %>
+        <% card.with_body { "This is a #{variant} card demonstrating the color variant with solid style." } %>
+      <% end %>
+    </div>
+  <% end %>
+</div>