better_ui 0.9.0 → 0.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c218661dc93efb93042ba9a4a5277091a7dac3de216acc162d50c8d36077bc8
-  data.tar.gz: b06ea500b4d3c547249664dcee953910457263029549d77af2a3314cef45ef58
+  metadata.gz: bfebd7a7f2bdd44a6d4e0bde15d4608c970ddab81a6d4cdd2454fead24711239
+  data.tar.gz: '09f376342d514046ba25b525f35d499be58493aadccca8b40ad71bbf2c3b2912'
 SHA512:
-  metadata.gz: 238ed43c059619f7f8ab17ffcc28aa6e6d461b1de72a7bfe57a9a188da44e4f810381ad2c0aac5118b79013855f985635f4bbc01355558640a7f3cb377695fd9
-  data.tar.gz: 5a8971012b178358d34198642446a423da9ccee69f6418f6d2cc3bc77529bb96a4185e5f281d14b0a6d83fd5195cc20255e61664c7fa4899ef2c06758b63b04e
+  metadata.gz: 48fcb5c0cfcea7748056c19b5f36791498e98dce7bd2a4af0d0e43d7f7f5374495b42bc73b4fd2ee1dbec6fa9dd219185206422580cbf07b32514f1fd58def54
+  data.tar.gz: 155edcbbfbbea18cfb4b4b7c4b26fb5b9fd4ae040818f94e00f82410e10d129a968b4d5b575c392a8b0ac708f45bbc1e441d29159d89fd1952cb9a5836cc9467

data/lib/better_ui/version.rb

@@ -1,3 +1,3 @@
 module BetterUi
-  VERSION = "0.9.0"
+  VERSION = "0.9.1"
 end

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

@@ -0,0 +1,17 @@
+<div class="p-8 space-y-8">
+  <h2 class="text-2xl font-bold mb-6">All Styles (Primary Variant)</h2>
+
+  <% (@styles || [:solid, :soft, :outline, :ghost]).each do |style| %>
+    <div class="space-y-2">
+      <h3 class="text-sm font-medium text-grayscale-600 capitalize"><%= style %> Style</h3>
+      <%= render BetterUi::ActionMessagesComponent.new(
+        variant: (@variant || :primary),
+        style: style,
+        messages: [
+          "This is a #{style} style message.",
+          "Each style has different visual appearance."
+        ]
+      ) %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,19 @@
+<div class="p-8 space-y-6">
+  <h2 class="text-2xl font-bold mb-6">All Variants (Soft Style)</h2>
+
+  <div class="space-y-4">
+    <% (@variants || BetterUi::ApplicationComponent::VARIANTS.keys).each do |variant| %>
+      <div>
+        <h3 class="text-sm font-medium text-grayscale-600 mb-2 capitalize"><%= variant %></h3>
+        <%= render BetterUi::ActionMessagesComponent.new(
+          variant: variant,
+          style: :soft,
+          messages: [
+            "This is a #{variant} message.",
+            "You can display multiple lines in the message list."
+          ]
+        ) %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/action_messages_component_preview/auto_dismiss.html.erb

@@ -0,0 +1,51 @@
+<div class="p-8 space-y-6">
+  <h2 class="text-2xl font-bold mb-6">Auto-Dismiss Messages</h2>
+  <p class="text-grayscale-600 mb-4">These messages will automatically disappear after the specified duration. Refresh the page to see them again.</p>
+
+  <div class="space-y-4">
+    <%= render BetterUi::ActionMessagesComponent.new(
+      variant: :success,
+      style: :soft,
+      auto_dismiss: 3,
+      title: "Quick Notice (3 seconds)",
+      messages: [
+        "This message will disappear in 3 seconds.",
+        "No user action required."
+      ]
+    ) %>
+
+    <%= render BetterUi::ActionMessagesComponent.new(
+      variant: :info,
+      style: :soft,
+      auto_dismiss: 5,
+      title: "Standard Notice (5 seconds)",
+      messages: [
+        "This message will disappear in 5 seconds.",
+        "Typical duration for informational messages."
+      ]
+    ) %>
+
+    <%= render BetterUi::ActionMessagesComponent.new(
+      variant: :warning,
+      style: :soft,
+      auto_dismiss: 10,
+      title: "Important Notice (10 seconds)",
+      messages: [
+        "This message will disappear in 10 seconds.",
+        "Longer duration for important information."
+      ]
+    ) %>
+
+    <%= render BetterUi::ActionMessagesComponent.new(
+      variant: :danger,
+      style: :soft,
+      dismissible: true,
+      auto_dismiss: 8,
+      title: "Combined (8 seconds + Manual Dismiss)",
+      messages: [
+        "This message auto-dismisses in 8 seconds.",
+        "But you can also dismiss it manually with the X button."
+      ]
+    ) %>
+  </div>
+</div>

data/spec/components/previews/better_ui/action_messages_component_preview/dismissible.html.erb

@@ -0,0 +1,19 @@
+<div class="p-8 space-y-6">
+  <h2 class="text-2xl font-bold mb-6">Dismissible Messages</h2>
+  <p class="text-grayscale-600 mb-4">Click the X button to dismiss each message.</p>
+
+  <div class="space-y-4">
+    <% (@variants || [:info, :warning, :danger]).each do |variant| %>
+      <%= render BetterUi::ActionMessagesComponent.new(
+        variant: variant,
+        style: :soft,
+        dismissible: true,
+        title: "#{variant.to_s.capitalize} Message",
+        messages: [
+          "This is a dismissible #{variant} message.",
+          "Click the X button to close it and see the fade-out animation."
+        ]
+      ) %>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/action_messages_component_preview/with_title.html.erb

@@ -0,0 +1,17 @@
+<div class="p-8 space-y-6">
+  <h2 class="text-2xl font-bold mb-6">With Title</h2>
+
+  <div class="space-y-4">
+    <% (@variants || [:info, :success, :warning, :danger]).each do |variant| %>
+      <%= render BetterUi::ActionMessagesComponent.new(
+        variant: variant,
+        style: :soft,
+        title: variant.to_s.capitalize,
+        messages: [
+          "This is a #{variant} message with a title.",
+          "The title appears above the message list."
+        ]
+      ) %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,224 @@
+# frozen_string_literal: true
+
+module BetterUi
+  # Lookbook previews for ActionMessagesComponent
+  #
+  # Provides interactive examples of the component with different configurations:
+  #   - All variants showcase (9 color variants)
+  #   - All styles showcase (4 visual styles)
+  #   - Real-world examples (form errors, success messages)
+  #   - Feature demonstrations (dismissible, auto-dismiss, icons, titles)
+  #   - Interactive playground with configurable parameters
+  #
+  # View at: http://localhost:3000/lookbook
+  #
+  # @label Action Messages
+  class ActionMessagesComponentPreview < ViewComponent::Preview
+    # Basic component with default settings (info variant, soft style)
+    # @label Default
+    def default
+      render BetterUi::ActionMessagesComponent.new(
+        messages: [ "This is an informational message." ]
+      )
+    end
+
+    # Showcase all 9 color variants using soft style
+    # Demonstrates the full color palette available for messages
+    # @label All Variants
+    # @display bg_color #f5f5f5
+    def all_variants
+      @variants = ApplicationComponent::VARIANTS.keys
+      render_with_template
+    end
+
+    # Showcase all 4 visual styles using primary variant
+    # Demonstrates solid, soft, outline, and ghost appearances
+    # @label All Styles
+    # @display bg_color #f5f5f5
+    def all_styles
+      @styles = [ :solid, :soft, :outline, :ghost ]
+      @variant = :primary
+      render_with_template
+    end
+
+    # Real-world example: Form validation errors
+    # Common use case showing danger variant with multiple error messages
+    # @label Form Errors
+    def form_errors
+      render BetterUi::ActionMessagesComponent.new(
+        variant: :danger,
+        style: :soft,
+        title: "Please correct the following errors:",
+        messages: [
+          "Email can't be blank",
+          "Password is too short (minimum is 8 characters)",
+          "Password confirmation doesn't match Password"
+        ]
+      )
+    end
+
+    # Real-world example: Success notification
+    # Common use case showing success variant with confirmation message
+    # @label Success Message
+    def success_message
+      render BetterUi::ActionMessagesComponent.new(
+        variant: :success,
+        style: :soft,
+        title: "Success!",
+        messages: [ "Your changes have been saved successfully." ]
+      )
+    end
+
+    # Demonstrates title feature with common message types
+    # Shows how titles provide context for message lists
+    # @label With Title
+    # @display bg_color #f5f5f5
+    def with_title
+      @variants = [ :info, :success, :warning, :danger ]
+      render_with_template
+    end
+
+    # Demonstrates icon slot with custom SVG icon
+    # Icons are passed as block content to the component
+    # @label With Icon
+    def with_icon
+      render BetterUi::ActionMessagesComponent.new(
+        variant: :success,
+        style: :soft,
+        title: "Payment Successful",
+        messages: [
+          "Your payment has been processed.",
+          "You will receive a confirmation email shortly."
+        ]
+      ) do
+        tag.svg(
+          class: "w-6 h-6 text-success-600 mt-1",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          xmlns: "http://www.w3.org/2000/svg"
+        ) do
+          tag.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"
+          )
+        end
+      end
+    end
+
+    # Demonstrates manual dismiss functionality
+    # Click X button to see smooth fade-out animation
+    # @label Dismissible
+    # @display bg_color #f5f5f5
+    def dismissible
+      @variants = [ :info, :warning, :danger ]
+      render_with_template
+    end
+
+    # Demonstrates auto-dismiss feature with different durations
+    # Messages automatically disappear after configured seconds
+    # Refresh page to see the messages again
+    # @label Auto Dismiss
+    # @display bg_color #f5f5f5
+    def auto_dismiss
+      render_with_template
+    end
+
+    # Demonstrates multiple features working together
+    # Shows icon, title, dismissible button, and auto-dismiss all at once
+    # @label Combined Features
+    def combined
+      render BetterUi::ActionMessagesComponent.new(
+        variant: :warning,
+        style: :soft,
+        title: "Session Expiring",
+        dismissible: true,
+        auto_dismiss: 10,
+        messages: [
+          "Your session will expire in 10 seconds.",
+          "Please save your work to avoid losing data."
+        ]
+      ) do
+        tag.svg(
+          class: "w-6 h-6 text-warning-600 mt-1",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          xmlns: "http://www.w3.org/2000/svg"
+        ) do
+          tag.path(
+            stroke_linecap: "round",
+            stroke_linejoin: "round",
+            stroke_width: "2",
+            d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+          )
+        end
+      end
+    end
+
+    # Demonstrates component with many messages
+    # Shows how the component handles longer lists of items
+    # @label Multiple Messages
+    def multiple_messages
+      render BetterUi::ActionMessagesComponent.new(
+        variant: :info,
+        style: :soft,
+        title: "System Updates",
+        messages: [
+          "Database backup completed successfully",
+          "Cache cleared for all users",
+          "Email queue processed (142 emails sent)",
+          "Security scan completed - no issues found",
+          "Server maintenance scheduled for tonight at 2 AM"
+        ]
+      )
+    end
+
+    # Edge case: Component with empty messages array
+    # Shows that component handles empty state gracefully
+    # @label Empty Messages
+    def empty_messages
+      render BetterUi::ActionMessagesComponent.new(
+        variant: :info,
+        style: :soft,
+        title: "No new notifications",
+        messages: []
+      )
+    end
+
+    # Interactive playground with configurable parameters
+    # Experiment with different variants, styles, and features in real-time
+    # @label Playground
+    # @param variant select { choices: [primary, secondary, accent, success, danger, warning, info, light, dark] }
+    # @param style select { choices: [solid, soft, outline, ghost] }
+    # @param dismissible toggle
+    # @param auto_dismiss number
+    # @param title text
+    # @param message_1 text
+    # @param message_2 text
+    # @param message_3 text
+    def playground(
+      variant: :info,
+      style: :soft,
+      dismissible: false,
+      auto_dismiss: nil,
+      title: "Notification",
+      message_1: "This is the first message.",
+      message_2: "This is the second message.",
+      message_3: ""
+    )
+      messages = [ message_1, message_2, message_3 ].reject(&:blank?)
+
+      render BetterUi::ActionMessagesComponent.new(
+        variant: variant.to_sym,
+        style: style.to_sym,
+        dismissible: dismissible,
+        auto_dismiss: auto_dismiss&.to_f&.positive? ? auto_dismiss.to_f : nil,
+        title: title.present? ? title : nil,
+        messages: messages
+      )
+    end
+  end
+end

data/spec/components/previews/better_ui/avatar_component_preview/all_shapes.html.erb

@@ -0,0 +1,26 @@
+<div class="flex flex-wrap items-center gap-6 p-4">
+  <% [:circle, :square, :rounded].each do |shape| %>
+    <div class="flex flex-col items-center gap-2">
+      <%= render BetterUi::AvatarComponent.new(
+        src: "https://i.pravatar.cc/150?u=#{shape}",
+        alt: "Avatar #{shape}",
+        size: :lg,
+        shape: shape
+      ) %>
+      <span class="text-sm text-grayscale-600"><%= shape %></span>
+    </div>
+  <% end %>
+</div>
+<div class="flex flex-wrap items-center gap-6 p-4 mt-4">
+  <% [:circle, :square, :rounded].each do |shape| %>
+    <div class="flex flex-col items-center gap-2">
+      <%= render BetterUi::AvatarComponent.new(
+        name: "John Doe",
+        variant: :primary,
+        size: :lg,
+        shape: shape
+      ) %>
+      <span class="text-sm text-grayscale-600"><%= shape %></span>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,24 @@
+<div class="flex flex-wrap items-end gap-6 p-4">
+  <% [:xs, :sm, :md, :lg, :xl].each do |size| %>
+    <div class="flex flex-col items-center gap-2">
+      <%= render BetterUi::AvatarComponent.new(
+        name: "John Doe",
+        variant: :primary,
+        size: size
+      ) %>
+      <span class="text-sm text-grayscale-600"><%= size %></span>
+    </div>
+  <% end %>
+</div>
+<div class="flex flex-wrap items-end gap-6 p-4 mt-4">
+  <% [:xs, :sm, :md, :lg, :xl].each do |size| %>
+    <div class="flex flex-col items-center gap-2">
+      <%= render BetterUi::AvatarComponent.new(
+        src: "https://i.pravatar.cc/150?u=#{size}",
+        alt: "Avatar #{size}",
+        size: size
+      ) %>
+      <span class="text-sm text-grayscale-600"><%= size %></span>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,12 @@
+<div class="flex flex-wrap items-center gap-6 p-4">
+  <% BetterUi::ApplicationComponent::VARIANTS.keys.each do |variant| %>
+    <div class="flex flex-col items-center gap-2">
+      <%= render BetterUi::AvatarComponent.new(
+        name: variant.to_s.capitalize,
+        variant: variant,
+        size: :lg
+      ) %>
+      <span class="text-sm text-grayscale-600"><%= variant %></span>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/avatar_component_preview/with_initials.html.erb

@@ -0,0 +1,22 @@
+<div class="flex flex-wrap items-center gap-6 p-4">
+  <% [
+    ["Alice", :primary],
+    ["Bob Smith", :secondary],
+    ["Charlie Brown", :accent],
+    ["Diana", :success],
+    ["Edward Norton", :danger],
+    ["Fiona Apple", :warning],
+    ["George", :info],
+    ["Helen Troy", :light],
+    ["Ivan Drago", :dark]
+  ].each do |name, variant| %>
+    <div class="flex flex-col items-center gap-2">
+      <%= render BetterUi::AvatarComponent.new(
+        name: name,
+        variant: variant,
+        size: :lg
+      ) %>
+      <span class="text-sm text-grayscale-600"><%= name %></span>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/avatar_component_preview/with_status.html.erb

@@ -0,0 +1,26 @@
+<div class="flex flex-wrap items-center gap-6 p-4">
+  <% [:online, :offline, :busy, :away].each do |status| %>
+    <div class="flex flex-col items-center gap-2">
+      <%= render BetterUi::AvatarComponent.new(
+        src: "https://i.pravatar.cc/150?u=#{status}",
+        alt: "User #{status}",
+        size: :lg,
+        status: status
+      ) %>
+      <span class="text-sm text-grayscale-600"><%= status %></span>
+    </div>
+  <% end %>
+</div>
+<div class="flex flex-wrap items-center gap-6 p-4 mt-4">
+  <% [:online, :offline, :busy, :away].each do |status| %>
+    <div class="flex flex-col items-center gap-2">
+      <%= render BetterUi::AvatarComponent.new(
+        name: "Jane Smith",
+        variant: :secondary,
+        size: :lg,
+        status: status
+      ) %>
+      <span class="text-sm text-grayscale-600"><%= status %></span>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module BetterUi
+  # @label Avatar
+  class AvatarComponentPreview < ViewComponent::Preview
+    # @label Default
+    # @display bg_color #f5f5f5
+    def default
+      render BetterUi::AvatarComponent.new(
+        src: "https://i.pravatar.cc/150?u=default",
+        alt: "Default avatar"
+      )
+    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 All Shapes
+    # @display bg_color #f5f5f5
+    def all_shapes
+      render_with_template
+    end
+
+    # @label With Status
+    # @display bg_color #f5f5f5
+    def with_status
+      render_with_template
+    end
+
+    # @label With Initials
+    # @display bg_color #f5f5f5
+    def with_initials
+      render_with_template
+    end
+
+    # @label Playground
+    # @param src text
+    # @param name text
+    # @param variant select { choices: [primary, secondary, accent, success, danger, warning, info, light, dark] }
+    # @param size select { choices: [xs, sm, md, lg, xl] }
+    # @param shape select { choices: [circle, square, rounded] }
+    # @param status select { choices: [~, online, offline, busy, away] }
+    def playground(
+      src: "",
+      name: "John Doe",
+      variant: :primary,
+      size: :md,
+      shape: :circle,
+      status: nil
+    )
+      resolved_src = src.present? ? src : nil
+      resolved_status = status.present? ? status.to_sym : nil
+
+      render BetterUi::AvatarComponent.new(
+        src: resolved_src,
+        name: name,
+        variant: variant.to_sym,
+        size: size.to_sym,
+        shape: shape.to_sym,
+        status: resolved_status
+      )
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+<div class="p-8">
+  <h3 class="text-lg font-semibold mb-6">Badge Sizes</h3>
+
+  <div class="space-y-6">
+    <% (@sizes || [:xs, :sm, :md, :lg]).each do |size| %>
+      <div class="flex items-center gap-4">
+        <span class="w-20 text-sm font-medium text-gray-600 uppercase"><%= size %></span>
+
+        <div class="flex flex-wrap gap-3 items-center">
+          <%= render BetterUi::BadgeComponent.new(size: size, variant: :primary) do %>
+            Solid <%= size.to_s.upcase %>
+          <% end %>
+
+          <%= render BetterUi::BadgeComponent.new(size: size, variant: :secondary, style: :outline) do %>
+            Outline <%= size.to_s.upcase %>
+          <% end %>
+
+          <%= render BetterUi::BadgeComponent.new(size: size, variant: :success, style: :soft) do %>
+            Soft <%= size.to_s.upcase %>
+          <% end %>
+
+          <%= render BetterUi::BadgeComponent.new(size: size, variant: :danger, style: :ghost) do %>
+            Ghost <%= size.to_s.upcase %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,26 @@
+<div class="p-8 space-y-8">
+  <% (@styles || [:solid, :outline, :soft, :ghost]).each do |style| %>
+    <div>
+      <h3 class="text-lg font-semibold mb-4 capitalize"><%= style %> Style</h3>
+      <div class="flex flex-wrap gap-3 items-center">
+        <% BetterUi::ApplicationComponent::VARIANTS.each do |variant, _| %>
+          <%= render BetterUi::BadgeComponent.new(variant: variant, style: style) do %>
+            <%= variant.to_s.capitalize %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <h3 class="text-lg font-semibold mb-4 mt-8">Pill vs Rounded</h3>
+  <div class="flex flex-wrap gap-3 items-center">
+    <% (@styles || [:solid, :outline, :soft, :ghost]).each do |style| %>
+      <%= render BetterUi::BadgeComponent.new(style: style, pill: true) do %>
+        Pill (<%= style %>)
+      <% end %>
+      <%= render BetterUi::BadgeComponent.new(style: style, pill: false) do %>
+        Rounded (<%= style %>)
+      <% end %>
+    <% end %>
+  </div>
+</div>

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

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

data/spec/components/previews/better_ui/badge_component_preview/counter_badges.html.erb

@@ -0,0 +1,39 @@
+<div class="p-8 space-y-8">
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Counter Badges (Solid)</h3>
+    <div class="flex flex-wrap gap-3 items-center">
+      <% BetterUi::ApplicationComponent::VARIANTS.each do |variant, _| %>
+        <%= render BetterUi::BadgeComponent.new(variant: variant, counter: rand(1..99)) %>
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Counter Badges (Outline)</h3>
+    <div class="flex flex-wrap gap-3 items-center">
+      <% BetterUi::ApplicationComponent::VARIANTS.each do |variant, _| %>
+        <%= render BetterUi::BadgeComponent.new(variant: variant, style: :outline, counter: rand(1..99)) %>
+      <% end %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Counter Sizes</h3>
+    <div class="flex flex-wrap gap-3 items-center">
+      <%= render BetterUi::BadgeComponent.new(size: :xs, variant: :danger, counter: 3) %>
+      <%= render BetterUi::BadgeComponent.new(size: :sm, variant: :danger, counter: 12) %>
+      <%= render BetterUi::BadgeComponent.new(size: :md, variant: :danger, counter: 42) %>
+      <%= render BetterUi::BadgeComponent.new(size: :lg, variant: :danger, counter: 99) %>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-4">Pill vs Rounded Counters</h3>
+    <div class="flex flex-wrap gap-3 items-center">
+      <%= render BetterUi::BadgeComponent.new(variant: :primary, counter: 7, pill: true) %>
+      <%= render BetterUi::BadgeComponent.new(variant: :primary, counter: 7, pill: false) %>
+      <%= render BetterUi::BadgeComponent.new(variant: :danger, counter: 99, pill: true) %>
+      <%= render BetterUi::BadgeComponent.new(variant: :danger, counter: 99, pill: false) %>
+    </div>
+  </div>
+</div>