ui_components 0.1.0

data/app/components/ui_components/daisy_ui/data_display/accordion/item_component.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Accordion
+        class ItemComponent < BaseComponent
+          ICONS = %w[arrow plus]
+
+          CSS_CLASSES_DEFAULT = %w[collapse bg-base-100 border border-base-300].freeze
+          CSS_CLASSES_VARIANTS = (ICONS.map { |key| "collapse-#{key}" }).freeze
+          CSS_CLASSES = (
+            CSS_CLASSES_DEFAULT +
+            CSS_CLASSES_VARIANTS +
+            AnchorComponent::CSS_CLASSES +
+            BodyComponent::CSS_CLASSES
+          ).freeze
+
+          erb_template <<-ERB
+            <%= tag.div(**set_options) do %>
+              <%= tag.input(**set_input_options) %>
+              <%= anchor %>
+              <%= body %>
+            <% end %>
+          ERB
+
+          renders_one :anchor, AnchorComponent
+          renders_one :body, BodyComponent
+
+          def initialize(
+              opener:,
+              toggle:,
+              opened: false,
+              icon: nil,
+              **args
+            )
+            @opener = opener
+            @toggle = toggle
+            @opened = opened
+            @icon = icon
+
+            super(**args)
+          end
+
+          private
+
+          def set_input_options
+            options = { type: (@toggle ? "checkbox" : "radio") }
+            options.merge!(name: @opener)
+            options.merge!(checked: "checked") if @opened
+            options.compact_blank!
+          end
+
+          def class_string
+            TailwindMerge::Merger.new.merge([
+              *CSS_CLASSES_DEFAULT,
+              icon_class,
+              @css_class
+            ])
+          end
+
+          def icon_class
+            "collapse-#{@icon}" if ICONS.include?(@icon)
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/accordion_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class AccordionComponent < BaseComponent
+        CSS_CLASSES = Accordion::ItemComponent::CSS_CLASSES
+
+        erb_template <<-ERB
+          <%= tag.div(**set_options) do %>
+            <% items.each do |item| %>
+              <%= item %>
+            <% end %>
+          <% end %>
+        ERB
+
+        renders_many :items, ->(**args) { Accordion::ItemComponent.new(**args.merge(opener: @opener, toggle: @toggle)) }
+
+        def initialize(
+            opener: "my_accordion",
+            toggle: false,
+            **args
+          )
+          @opener = opener
+          @toggle = toggle
+
+          super(**args)
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/avatar/box_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Avatar
+        class BoxComponent < BaseComponent
+          MASKS = %w[squircle hexagon triangle]
+
+          CSS_CLASSES_DEFAULT = %w[avatar w-24].freeze
+          CSS_CLASSES_VARIANTS = (
+            %w[mask bg-neutral text-neutral-content ring-primary ring-offset-base-100 ring ring-offset-2] +
+            MASKS.map { |key| "mask-#{key}" }
+          ).freeze
+          CSS_CLASSES = (CSS_CLASSES_DEFAULT + CSS_CLASSES_VARIANTS).freeze
+
+          erb_template <<-ERB
+            <%= tag.div(**set_options) { content } %>
+          ERB
+
+          def initialize(
+              placeholder: false,
+              with_ring: false,
+              mask: nil,
+              **args
+            )
+            @placeholder = placeholder
+            @with_ring = with_ring
+            @mask = mask
+
+            super(**args)
+          end
+
+          private
+
+          def class_string
+            TailwindMerge::Merger.new.merge([
+              *CSS_CLASSES_DEFAULT,
+              placeholder_class,
+              ring_class,
+              mask_class,
+              @css_class
+            ])
+          end
+
+          def placeholder_class
+            "bg-neutral text-neutral-content" if @placeholder
+          end
+
+          def ring_class
+            "ring-primary ring-offset-base-100 ring ring-offset-2" if @with_ring
+          end
+
+          def mask_class
+            "mask mask-#{@mask}" if MASKS.include?(@mask)
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/avatar/item_component.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      module Avatar
+        class ItemComponent < BaseComponent
+          STATUSES = %w[online offline]
+
+          CSS_CLASSES_DEFAULT = %w[avatar].freeze
+          CSS_CLASSES_VARIANTS = (
+            %w[avatar-placeholder] +
+            STATUSES.map { |key| "avatar-#{key}" }
+          ).freeze
+          CSS_CLASSES = (
+            CSS_CLASSES_DEFAULT +
+            CSS_CLASSES_VARIANTS +
+            BoxComponent::CSS_CLASSES
+          ).freeze
+
+          erb_template <<-ERB
+            <%= tag.div(**set_options) do %>
+              <%= box %>
+            <% end %>
+          ERB
+
+          renders_one :box, ->(**args) { BoxComponent.new(**args.merge(placeholder: @placeholder)) }
+
+          def initialize(
+              placeholder: false,
+              status: nil,
+              **args
+            )
+            @placeholder = placeholder
+            @status = status
+
+            super(**args)
+          end
+
+          private
+
+          def class_string
+            TailwindMerge::Merger.new.merge([
+              *CSS_CLASSES_DEFAULT,
+              placeholder_class,
+              status_class,
+              @css_class
+            ])
+          end
+
+          def placeholder_class
+            "avatar-placeholder" if @placeholder
+          end
+
+          def status_class
+            "avatar-#{@status}" if STATUSES.include?(@status)
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/avatar_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class AvatarComponent < BaseComponent
+        CSS_CLASSES = Avatar::ItemComponent::CSS_CLASSES
+
+        erb_template <<-ERB
+          <%= tag.div(**set_options) do %>
+            <% items.each do |item| %>
+              <%= item %>
+            <% end %>
+          <% end %>
+        ERB
+
+        renders_many :items, Avatar::ItemComponent
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/data_display/badge_component.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module DataDisplay
+      class BadgeComponent < BaseComponent
+        CSS_CLASSES_DEFAULT = %w[badge].freeze
+        CSS_CLASSES_VARIANTS = (
+          SIZES.map { |key| "badge-#{key}" } +
+          COLORS.map { |key| "badge-#{key}" } +
+          KINDS.map { |key| "badge-#{key}" }
+        ).freeze
+        CSS_CLASSES = (CSS_CLASSES_DEFAULT + CSS_CLASSES_VARIANTS).freeze
+
+        erb_template <<-ERB
+          <%= tag.div(**set_options) { content } %>
+        ERB
+
+        def initialize(
+            size: nil,
+            color: nil,
+            kind: nil,
+            **args
+          )
+          @size = size.to_s
+          @color = color.to_s
+          @kind = kind.to_s
+
+          super(**args)
+        end
+
+        private
+
+        def class_string
+          TailwindMerge::Merger.new.merge([
+            *CSS_CLASSES_DEFAULT,
+            size_class,
+            color_class,
+            kind_class,
+            @css_class
+          ])
+        end
+
+        def size_class
+          "badge-#{@size}" if SIZES.include?(@size)
+        end
+
+        def color_class
+          "badge-#{@color}" if COLORS.include?(@color)
+        end
+
+        def kind_class
+          "badge-#{@kind}" if KINDS.include?(@kind)
+        end
+      end
+    end
+  end
+end

data/app/controllers/ui_components/daisy_ui/action_components_controller.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    class ActionComponentsController < ApplicationController
+      def button; end
+
+      def dropdown; end
+
+      def modal; end
+
+      def swap; end
+    end
+  end
+end

data/app/controllers/ui_components/daisy_ui/application_controller.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    class ApplicationController < ActionController::Base
+      layout 'application'
+    end
+  end
+end

data/app/controllers/ui_components/daisy_ui/data_display_components_controller.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    class DataDisplayComponentsController < ApplicationController
+      def accordion; end
+
+      def avatar; end
+
+      def badge; end
+    end
+  end
+end

data/app/controllers/ui_components/daisy_ui/home_controller.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    class HomeController < ApplicationController
+      def index; end
+    end
+  end
+end

data/app/helpers/action/button_helper.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Action
+  module ButtonHelper
+    def action_button_handle_component_params(kind_key:, color_key:)
+      params = { kind: "#{kind_key}", color: "#{color_key}" }
+
+      params.delete(:color) if color_key == "default"
+
+      params.compact_blank.filter_map { |k, v| "#{k}: #{v.inspect}" }.join(", ")
+    end
+
+    def action_button_skip_kind(kind_key:, color_key:)
+      kind_key == "disabled" && color_key != "default" ||
+      kind_key == "link" && %w[primary secondary].include?(color_key)
+    end
+  end
+end

data/app/helpers/action/dropdown_helper.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Action
+  module DropdownHelper
+    def action_dropdown_handle_component_title(axis_key:, align_key:)
+      "# Dropdown #{axis_key} #{"(default)" if axis_key == "bottom"} /
+      aligns to #{align_key} #{"(default)" if align_key == "start"} of button horizontally"
+    end
+
+    def action_dropdown_handle_component_params(axis_key:, align_key:)
+      params = { axis: "#{axis_key}", align: "#{align_key}" }
+
+      params.delete(:axis) if axis_key == "bottom"
+      params.delete(:align) if align_key == "start"
+
+      params.filter_map { |k, v| "#{k}: #{v.inspect}" }.join(", ")
+    end
+  end
+end

data/app/helpers/data_display/badge_helper.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module DataDisplay
+  module BadgeHelper
+    def data_display_badge_handle_component_params(kind_key:, color_key:)
+      params = { kind: "#{kind_key}", color: "#{color_key}" }
+
+      params.delete(:color) if kind_key == "ghost" && color_key == "primary"
+
+      params.compact_blank.filter_map { |k, v| "#{k}: #{v.inspect}" }.join(", ")
+    end
+
+    def data_display_badge_skip_kind(kind_key:, color_key:)
+      kind_key == "ghost" && color_key != "primary"
+    end
+
+    def data_display_badge_icons
+      {
+        "info" => '<svg class="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>',
+        "success" => '<svg class="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q65 0 123 19t107 53l-58 59q-38-24-81-37.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-18-2-36t-6-35l65-65q11 32 17 66t6 70q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-56-216L254-466l56-56 114 114 400-401 56 56-456 457Z"/></svg>',
+        "warning" => '<svg class="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>',
+        "error" => '<svg class="size-[1em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z"/></svg>'
+      }
+    end
+  end
+end

data/app/views/ui_components/daisy_ui/action_components/button.html.erb

@@ -0,0 +1,114 @@
+<% component = UiComponents::DaisyUi::Action::ButtonComponent %>
+
+<div class="grid grid-cols gap-16 p-2 mt-6 mb-36">
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Actions > Button</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Dropdown >", daisy_ui_dropdown_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Button" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do $>
+                    Default
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <% sizes = { 'xs' => 'Xsmall', 'sm' => 'Small', 'md' => 'Medium', 'lg' => 'Large', 'xl' => 'Xlarge' } %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Button sizes" } %>
+    <%= document.with_body do |body| %>
+      <% sizes.each do |key, value| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new#{"(size: \"#{key}\")" if key != "md"} do $>
+                      #{value}
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% colors = { 'default' => 'Default', 'primary' => 'Primary', 'secondary' => 'Secondary', 'accent' => 'Accent', 'info' => 'Info', 'success' => 'Success', 'warning' => 'Warning', 'error' => 'Error' } %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Button colors" } %>
+    <%= document.with_body do |body| %>
+      <% colors.each do |key, value| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new#{"(color: \"#{key}\")" if key != "default"} do $>
+                      #{value}
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% kinds = { 'soft' => 'Soft', 'outline' => 'Outline', 'dash' => 'Dash', 'active' => 'Active', 'disabled' => 'Disabled', 'ghost' => 'Ghost', 'link' => 'Link' } %>
+
+  <% kinds.each do |kind_key, kind_value| %>
+    <%= render DocumentationComponent.new do |document| %>
+      <%= document.with_header { "# #{kind_value} buttons" } %>
+      <%= document.with_body do |body| %>
+        <% colors.each do |color_key, value| %>
+
+          <% next if action_button_skip_kind(kind_key:, color_key:) %>
+
+          <%= body.with_preview_example(
+            source: <<~ERB
+                      <$= render #{component}.new(#{action_button_handle_component_params(kind_key:, color_key:)}) do $>
+                        #{value}
+                      <$ end $>
+                    ERB
+          ) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% wide_sizes = { 'wide' => 'Wide', 'block' => 'Block' } %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Wide buttons" } %>
+    <%= document.with_body do |body| %>
+      <% wide_sizes.each do |key, value| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new(wide_size: "#{key}") do $>
+                      #{value}
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% shapes = { 'square' => 'Square', 'circle' => 'Circle' } %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Shape buttons" } %>
+    <%= document.with_body do |body| %>
+      <% shapes.each do |key, value| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new(shape: "#{key}") do $>
+                      <svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="currentColor"><path d="M720-120H280v-520l280-280 50 50q7 7 11.5 19t4.5 23v14l-44 174h258q32 0 56 24t24 56v80q0 7-2 15t-4 15L794-168q-9 20-30 34t-44 14Zm-360-80h360l120-280v-80H480l54-220-174 174v406Zm0-406v406-406Zm-80-34v80H160v360h120v80H80v-520h200Z"/></svg>
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/views/ui_components/daisy_ui/action_components/dropdown.html.erb

@@ -0,0 +1,117 @@
+<% component = UiComponents::DaisyUi::Action::DropdownComponent %>
+
+<div class="grid grid-cols gap-16 p-2 mt-6 mb-36">
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Actions > Dropdown</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Button", daisy_ui_button_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Modal >", daisy_ui_modal_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Dropdown" } %>
+    <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |dropdown| $>
+                    <$= dropdown.with_anchor { "Click" } $>
+                    <$= dropdown.with_menu do |menu| $>
+                      <$= menu.with_item { "Item 1" } $>
+                      <$= menu.with_item { "Item 2" } $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <% aligns = %w[start center end] %>
+  <% axes = %w[top right bottom left] %>
+
+  <% axes.each do |axis_key| %>
+    <% aligns.each do |align_key| %>
+      <%= render DocumentationComponent.new do |document| %>
+        <%= document.with_header { action_dropdown_handle_component_title(axis_key:, align_key:) } %>
+        <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+          <% component_params = action_dropdown_handle_component_params(axis_key:, align_key:) %>
+
+          <%= body.with_preview_example(
+            source: <<~ERB
+                      <$= render #{component}.new#{"(#{component_params})" if component_params.present?} do |dropdown| $>
+                        <$= dropdown.with_anchor { "Click" } $>
+                        <$= dropdown.with_menu do |menu| $>
+                          <$= menu.with_item { "Item 1" } $>
+                          <$= menu.with_item { "Item 2" } $>
+                        <$ end $>
+                      <$ end $>
+                    ERB
+          ) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% events = %w[hover opened] %>
+
+  <% events.each do |key| %>
+    <%= render DocumentationComponent.new do |document| %>
+      <%= document.with_header { "# Dropdown - #{key}" } %>
+      <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new(#{key}: true) do |dropdown| $>
+                      <$= dropdown.with_anchor { "Click" } $>
+                      <$= dropdown.with_menu do |menu| $>
+                        <$= menu.with_item { "Item 1" } $>
+                        <$= menu.with_item { "Item 2" } $>
+                      <$ end $>
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Card as dropdown" } %>
+    <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do |dropdown| $>
+                    <$= dropdown.with_anchor(css_class: "m-1") { "Click" } $>
+                    <$= dropdown.with_card do |card| $>
+                      <$= card.with_item do $>
+                        <p>This is a card. You can use any element as a dropdown.</p>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Helper dropdown" } %>
+    <%= document.with_body(preview_options: { css_class: "text-center" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  A normal text and a helper dropdown
+                  <$= render #{component}.new do |dropdown| $>
+                    <$= dropdown.with_anchor(css_class: "btn-circle btn-ghost btn-xs text-info") do $>
+                      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
+                    <$ end $>
+
+                    <$= dropdown.with_card do |card| $>
+                      <$= card.with_item(options: { tabindex: "0" }) do $>
+                        <h2 class="card-title">You needed more info?</h2>
+                        <p>This is a card. You can use any element as a dropdown.</p>
+                      <$ end $>
+                    <$ end $>
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+</div>