easy-admin-rails 0.1.0

data/app/components/easy_admin/resources/show_page_actions_component.rb

@@ -0,0 +1,324 @@
+module EasyAdmin
+  module Resources
+    class ShowPageActionsComponent < BaseComponent
+      def initialize(record:, resource_class:, current_user: nil)
+        @record = record
+        @resource_class = resource_class
+        @current_user = current_user
+      end
+      
+      def view_template
+        div(class: "mt-4 sm:ml-16 sm:mt-0 sm:flex-none") do
+          # Desktop: Show buttons inline (hidden on mobile)
+          div(class: "hidden sm:flex sm:items-center sm:space-x-3") do
+            render_edit_action
+            render_row_actions
+            render_delete_action
+          end
+          
+          # Mobile: Show dropdown (hidden on desktop)
+          div(class: "sm:hidden relative") do
+            render_mobile_dropdown
+          end
+          
+          # Context menu container for this record
+          div(
+            id: "context-menu-#{@record.id}",
+            class: "fixed z-50 pointer-events-none"
+          )
+        end
+      end
+      
+      private
+      
+      def render_mobile_dropdown
+        div(
+          class: "relative",
+          data: { controller: "dropdown" }
+        ) do
+          # Dropdown trigger button
+          button(
+            type: "button",
+            class: "w-full flex items-center justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-colors duration-150",
+            data: { action: "click->dropdown#toggle" }
+          ) do
+            plain "Actions"
+            unsafe_raw <<~SVG
+              <svg class="ml-2 h-4 w-4 text-white transition-transform duration-200" data-dropdown-target="chevron" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
+              </svg>
+            SVG
+          end
+          
+          # Dropdown menu
+          div(
+            class: "absolute left-0 right-0 z-10 mt-2 origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none hidden",
+            data: { dropdown_target: "menu" }
+          ) do
+            div(class: "py-1") do
+              # Edit action in dropdown
+              render_mobile_edit_action
+              
+              # Custom row actions in dropdown
+              render_mobile_row_actions
+              
+              # Delete action in dropdown (with separator)
+              if has_actions_to_show?
+                div(class: "border-t border-gray-100 my-1")
+              end
+              render_mobile_delete_action
+            end
+          end
+        end
+      end
+      
+      def render_edit_action
+        a(
+          href: easy_admin_url_helpers.edit_resource_path(@resource_class.route_key, @record),
+          class: "inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 transition-colors duration-150"
+        ) do
+          unsafe_raw <<~SVG
+            <svg class="w-4 h-4 mr-2" 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"/>
+            </svg>
+          SVG
+          plain "Edit"
+        end
+      end
+      
+      def render_row_actions
+        return unless @resource_class.has_row_actions?
+        
+        available_actions = get_available_actions
+        
+        available_actions.each do |action_data|
+          action_instance = action_data[:instance]
+          action_class = action_data[:class]
+          
+          render_action_button(action_class, action_instance)
+        end
+      end
+      
+      def render_action_button(action_class, action_instance)
+        button_class = case action_instance.class.style
+        when :danger
+          "inline-flex items-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 transition-colors duration-150"
+        when :warning
+          "inline-flex items-center rounded-md bg-yellow-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-yellow-500 transition-colors duration-150"
+        when :success
+          "inline-flex items-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 transition-colors duration-150"
+        else
+          "inline-flex items-center rounded-md bg-gray-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 transition-colors duration-150"
+        end
+        
+        button(
+          type: "button",
+          class: button_class,
+          data: {
+            controller: "row-action",
+            action: "click->row-action#execute",
+            row_action_action_class_value: action_class.name,
+            row_action_execution_mode_value: action_instance.class.execution_mode.to_s,
+            row_action_confirm_value: action_instance.class.confirm_message,
+            row_action_record_id_value: @record.id,
+            row_action_resource_name_value: @resource_class.route_key
+          }
+        ) do
+          if action_instance.class.icon
+            span(class: "mr-2") { action_instance.class.icon }
+          else
+            render_default_icon(action_instance)
+          end
+          plain action_instance.class.label
+        end
+      end
+      
+      def render_delete_action
+        button(
+          type: "button",
+          class: "inline-flex items-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 transition-colors duration-150",
+          data: {
+            controller: "row-action",
+            action: "click->row-action#execute",
+            row_action_action_class_value: "EasyAdmin::DeleteAction",
+            row_action_execution_mode_value: "instant",
+            row_action_confirm_value: "Are you sure you want to delete this #{@resource_class.singular_title.downcase}?",
+            row_action_record_id_value: @record.id,
+            row_action_resource_name_value: @resource_class.route_key
+          }
+        ) do
+          unsafe_raw <<~SVG
+            <svg class="w-4 h-4 mr-2" 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"/>
+            </svg>
+          SVG
+          plain "Delete"
+        end
+      end
+      
+      def render_mobile_edit_action
+        a(
+          href: easy_admin_url_helpers.edit_resource_path(@resource_class.route_key, @record),
+          class: "group flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+        ) do
+          unsafe_raw <<~SVG
+            <svg class="mr-3 h-4 w-4 text-gray-400 group-hover:text-gray-500" 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"/>
+            </svg>
+          SVG
+          plain "Edit"
+        end
+      end
+      
+      def render_mobile_row_actions
+        return unless @resource_class.has_row_actions?
+        
+        available_actions = get_available_actions
+        
+        available_actions.each do |action_data|
+          action_instance = action_data[:instance]
+          action_class = action_data[:class]
+          
+          render_mobile_action_item(action_class, action_instance)
+        end
+      end
+      
+      def render_mobile_action_item(action_class, action_instance)
+        text_color = case action_instance.class.style
+        when :danger
+          "text-red-700 hover:bg-red-50 hover:text-red-900"
+        when :warning
+          "text-yellow-700 hover:bg-yellow-50 hover:text-yellow-900"
+        when :success
+          "text-green-700 hover:bg-green-50 hover:text-green-900"
+        else
+          "text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+        end
+        
+        button(
+          type: "button",
+          class: "group flex w-full items-center px-4 py-2 text-sm #{text_color}",
+          data: {
+            controller: "row-action",
+            action: "click->row-action#execute",
+            row_action_action_class_value: action_class.name,
+            row_action_execution_mode_value: action_instance.class.execution_mode.to_s,
+            row_action_confirm_value: action_instance.class.confirm_message,
+            row_action_record_id_value: @record.id,
+            row_action_resource_name_value: @resource_class.route_key
+          }
+        ) do
+          if action_instance.class.icon
+            span(class: "mr-3 text-base") { action_instance.class.icon }
+          else
+            render_mobile_default_icon(action_instance)
+          end
+          plain action_instance.class.label
+        end
+      end
+      
+      def render_mobile_delete_action
+        button(
+          type: "button",
+          class: "group flex w-full items-center px-4 py-2 text-sm text-red-700 hover:bg-red-50 hover:text-red-900",
+          data: {
+            controller: "row-action",
+            action: "click->row-action#execute",
+            row_action_action_class_value: "EasyAdmin::DeleteAction",
+            row_action_execution_mode_value: "instant",
+            row_action_confirm_value: "Are you sure you want to delete this #{@resource_class.singular_title.downcase}?",
+            row_action_record_id_value: @record.id,
+            row_action_resource_name_value: @resource_class.route_key
+          }
+        ) do
+          unsafe_raw <<~SVG
+            <svg class="mr-3 h-4 w-4 text-red-400 group-hover:text-red-500" 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"/>
+            </svg>
+          SVG
+          plain "Delete"
+        end
+      end
+      
+      def render_mobile_default_icon(action_instance)
+        icon_color = case action_instance.class.style
+        when :danger
+          "text-red-400 group-hover:text-red-500"
+        when :warning
+          "text-yellow-400 group-hover:text-yellow-500"
+        when :success
+          "text-green-400 group-hover:text-green-500"
+        else
+          "text-gray-400 group-hover:text-gray-500"
+        end
+        
+        case action_instance.class.style
+        when :danger
+          unsafe_raw <<~SVG
+            <svg class="mr-3 h-4 w-4 #{icon_color}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+            </svg>
+          SVG
+        when :success
+          unsafe_raw <<~SVG
+            <svg class="mr-3 h-4 w-4 #{icon_color}" 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"/>
+            </svg>
+          SVG
+        else
+          unsafe_raw <<~SVG
+            <svg class="mr-3 h-4 w-4 #{icon_color}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+            </svg>
+          SVG
+        end
+      end
+      
+      def has_actions_to_show?
+        @resource_class.has_row_actions? && get_available_actions.any?
+      end
+      
+      def get_available_actions
+        return [] unless @resource_class.has_row_actions?
+        
+        @resource_class.row_actions.map do |action_config|
+          action_instance = action_config[:class].new(
+            record: @record,
+            current_user: @current_user,
+            resource_class: @resource_class
+          )
+          
+          next unless action_instance.visible? && action_instance.permitted?
+          
+          {
+            class: action_config[:class],
+            instance: action_instance
+          }
+        end.compact
+      end
+
+      def render_default_icon(action_instance)
+        case action_instance.class.style
+        when :danger
+          unsafe_raw <<~SVG
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+            </svg>
+          SVG
+        when :success
+          unsafe_raw <<~SVG
+            <svg class="w-4 h-4 mr-2" 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"/>
+            </svg>
+          SVG
+        else
+          unsafe_raw <<~SVG
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+            </svg>
+          SVG
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/resources/table_cell_component.rb

@@ -0,0 +1,145 @@
+module EasyAdmin
+  module Resources
+    class TableCellComponent < BaseComponent
+      def initialize(record:, field_config:, resource_class:, mobile_hide: false)
+        @record = record
+        @field_config = field_config
+        @resource_class = resource_class
+        @mobile_hide = mobile_hide
+      end
+
+      def view_template
+        td(id: cell_id, class: cell_classes) do
+          div(class: "flex items-center justify-between group-hover:bg-transparent") do
+            div(class: "flex-1 text-gray-900 font-medium") do
+              render_field_value
+            end
+            
+            if field_editable?
+              div(class: "ml-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200") do
+                render_inline_edit_trigger
+              end
+            end
+          end
+        end
+      end
+
+      private
+
+      def render_field_value
+        # Use the existing field rendering logic from the Rails views
+        field_value = @record.public_send(@field_config[:name])
+        
+        # Use the same render_field helper that the ERB templates use
+        unsafe_raw render_field(
+          @field_config, 
+          action: :index, 
+          value: field_value, 
+          record: @record
+        )
+      end
+
+      def render_inline_edit_trigger
+        div do
+          if field_editable_via_menu?
+            render_context_menu_trigger
+          else
+            render_modal_trigger
+          end
+        end
+      end
+
+      def render_modal_trigger
+        # Simple modal trigger - create a field-like object for the component
+        field_obj = create_field_for_trigger
+        render EasyAdmin::Fields::InlineEditTriggerComponent.new(
+          record: @record,
+          field: field_obj
+        )
+      end
+
+      def render_context_menu_trigger
+        # Simple context menu trigger - create a field-like object for the component
+        field_obj = create_field_for_trigger
+        render EasyAdmin::Fields::InlineEditTriggerComponent.new(
+          record: @record,
+          field: field_obj,
+          position: :left
+        )
+      end
+
+      def create_field_for_trigger
+        # Create a simple object that has the methods the InlineEditTriggerComponent needs
+        OpenStruct.new(
+          name: field[:name],
+          type: field[:type],
+          label: field[:label] || field[:name].to_s.humanize,
+          editable: field[:editable]
+        ).tap do |f|
+          def f.editable?
+            editable.present?
+          end
+          
+          def f.editable_via_menu?
+            type == :belongs_to && editable&.dig(:via) == :menu_or_modal
+          end
+        end
+      end
+
+      def render_pencil_icon
+        unsafe_raw <<~SVG
+          <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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
+          </svg>
+        SVG
+      end
+
+      def cell_classes
+        [
+          "whitespace-nowrap px-6 py-4 text-sm relative",
+          @mobile_hide ? "mobile-hide" : nil
+        ].compact.join(" ")
+      end
+
+      def cell_id
+        "#{helpers.dom_id(@record)}_#{@field_config[:name]}"
+      end
+
+      def field
+        @field ||= @field_config
+      end
+
+      def field_editable?
+        field[:editable].present?
+      end
+
+      def field_editable_via_menu?
+        field[:type] == :belongs_to && field[:editable]&.dig(:via) == :menu_or_modal
+      end
+
+      def edit_field_url
+        easy_admin_url_helpers.edit_field_resource_path(
+          @resource_class.route_key,
+          id: @record.id,
+          field: @field_config[:name]
+        )
+      end
+
+      def belongs_to_reattach_url
+        easy_admin_url_helpers.belongs_to_reattach_resource_path(
+          @resource_class.route_key,
+          id: @record.id,
+          field: @field_config[:name]
+        )
+      end
+
+      def belongs_to_edit_attached_url
+        easy_admin_url_helpers.belongs_to_edit_attached_resource_path(
+          @resource_class.route_key,
+          id: @record.id,
+          field: @field_config[:name]
+        )
+      end
+    end
+  end
+end

data/app/components/easy_admin/resources/table_component.rb

@@ -0,0 +1,206 @@
+module EasyAdmin
+  module Resources
+    class TableComponent < BaseComponent
+      def initialize(resource_class:, records:, current_params: {}, current_user: nil)
+        @resource_class = resource_class
+        @records = records
+        @current_params = current_params
+        @current_user = current_user
+      end
+
+      def view_template
+        div(data: batch_actions_enabled? ? { 
+          controller: "batch-selection",
+          batch_selection_resource_name_value: @resource_class.route_key,
+          action: "batch-action:completed@window->batch-selection#clearSelection"
+        } : {}) do
+          table(class: "table-striped min-w-full divide-y divide-gray-300") do
+            render_table_header
+            render_table_body
+          end
+          
+          # Render batch action bar if enabled
+          render_batch_action_bar if batch_actions_enabled?
+          
+          # Context menu containers for each record
+          render_context_menu_containers
+        end
+      end
+
+      private
+
+      def render_table_header
+        thead(class: "bg-gray-50") do
+          tr do
+            # Checkbox column for batch actions
+            if batch_actions_enabled?
+              th(scope: "col", class: "relative w-16 sm:w-12 px-3 sm:px-6 py-3") do
+                div(class: "absolute left-2 sm:left-4 top-1/2 -mt-3") do
+                  render_ios_checkbox(
+                    target: "selectAll",
+                    action: "change->batch-selection#toggleAll",
+                    data: { select_all: true }
+                  )
+                end
+              end
+            end
+            
+            @resource_class.index_fields.each_with_index do |field, index|
+              render_header_cell(field, index)
+            end
+            th(scope: "col", class: "relative px-6 py-3") do
+              span(class: "sr-only") { "Actions" }
+            end
+          end
+        end
+      end
+
+      def render_header_cell(field, index)
+        th(
+          scope: "col",
+          class: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wide #{'mobile-hide' if index > 2}"
+        ) do
+          if field[:sortable]
+            render_sortable_header(field)
+          else
+            field[:label]
+          end
+        end
+      end
+
+      def render_sortable_header(field)
+        div(class: "flex items-center justify-between") do
+          next_direction = determine_next_direction(field)
+          
+          a(
+            href: sort_url(field[:name], next_direction),
+            class: "group hover:text-gray-900 transition-colors duration-150"
+          ) do
+            field[:label]
+          end
+          
+          span(class: "ml-2 flex-none text-gray-400 hover:text-gray-600") do
+            render_sort_icon(field)
+          end
+        end
+      end
+
+      def render_sort_icon(field)
+        if currently_sorted_by?(field)
+          if current_sort_ascending?
+            # Up arrow for ascending
+            unsafe_raw <<~SVG
+              <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z" clip-rule="evenodd"/>
+              </svg>
+            SVG
+          else
+            # Down arrow for descending
+            unsafe_raw <<~SVG
+              <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
+              </svg>
+            SVG
+          end
+        else
+          # Default down arrow for unsorted
+          unsafe_raw <<~SVG
+            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
+            </svg>
+          SVG
+        end
+      end
+
+      def render_table_body
+        tbody(id: "records-container", class: "divide-y divide-gray-200 bg-white") do
+          @records.each do |record|
+            render EasyAdmin::Resources::TableRowComponent.new(
+              record: record,
+              resource_class: @resource_class
+            )
+          end
+        end
+      end
+
+      def determine_next_direction(field)
+        if currently_sorted_by?(field) && current_sort_ascending?
+          'desc'
+        else
+          'asc'
+        end
+      end
+
+      def currently_sorted_by?(field)
+        @current_params[:sort] == field[:name].to_s
+      end
+
+      def current_sort_ascending?
+        @current_params[:direction] == 'asc'
+      end
+
+      def sort_url(field_name, direction)
+        # Build URL with current params but update sort and direction
+        updated_params = @current_params.merge(sort: field_name, direction: direction)
+        base_url = easy_admin_url_helpers.resources_path(@resource_class.route_key)
+        query_string = updated_params.present? ? updated_params.to_query : ""
+        query_string.present? ? "#{base_url}?#{query_string}" : base_url
+      end
+      
+      def batch_actions_enabled?
+        @resource_class.batch_actions_enabled
+      end
+      
+      def render_batch_action_bar
+        render EasyAdmin::BatchActionBarComponent.new(
+          resource_class: @resource_class,
+          current_user: @current_user
+        )
+      end
+      
+      def render_context_menu_containers
+        @records.each do |record|
+          div(
+            id: "context-menu-#{record.id}",
+            class: "fixed z-50 pointer-events-none"
+          )
+        end
+      end
+      
+      def render_ios_checkbox(target: nil, action: nil, value: nil, data: {})
+        label(class: "inline-flex items-center cursor-pointer group") do
+          input(
+            type: "checkbox",
+            value: value,
+            class: "sr-only peer",
+            data: data.merge({
+              batch_selection_target: target,
+              action: action
+            }.compact)
+          )
+          
+          # Custom checkbox design
+          div(
+            class: "relative w-6 h-6 bg-white border-2 border-gray-300 rounded-md 
+                   transition-all duration-200 ease-out
+                   peer-checked:bg-blue-500 peer-checked:border-blue-500
+                   peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-opacity-50
+                   group-hover:border-gray-400 peer-checked:group-hover:border-blue-600
+                   shadow-sm"
+          ) do
+            # Checkmark icon (hidden by default, shown when checked)
+            unsafe_raw <<~SVG
+              <svg class="absolute inset-0 w-4 h-4 m-auto text-white opacity-0 
+                         transition-opacity duration-200 ease-out
+                         peer-checked:opacity-100 pointer-events-none" 
+                   fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" 
+                      d="M5 13l4 4L19 7"/>
+              </svg>
+            SVG
+          end
+        end
+      end
+    end
+  end
+end