fluxbit_view_components 0.2.0 → 0.4.0

data/app/components/fluxbit/form/upload_image_component.html.erb

@@ -0,0 +1,50 @@
+<%= content_tag :div, **@wrapper_html do %>
+  <div id="<%= id %>" class="mt-6 grow lg:mt-0 lg:ml-6 lg:shrink-0 lg:grow-0">
+    <%= label %>
+    <div class="mt-1 lg:hidden">
+      <div class="flex items-center">
+        <div class="inline-block h-12 w-12 shrink-0 overflow-hidden <%= container_rounded_class %> relative" aria-hidden="true">
+          <%= image_element %>
+        </div>
+        <div class="ml-5 rounded-md shadow-xs">
+          <div class="group relative flex items-center justify-center rounded-md border border-slate-300 py-2 px-3 focus-within:ring-2 focus-within:ring-sky-500 focus-within:ring-offset-2 hover:bg-slate-50">
+            <label for="mobile-<%= id %>" class="pointer-events-none relative text-sm font-medium leading-4 text-slate-700">
+              <span><%= @title %></span>
+              <span class="sr-only"><%= @label %></span>
+            </label>
+            <%= input_element(input_id: "mobile-#{id}") %>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="relative hidden overflow-hidden <%= container_rounded_class %> lg:block w-40">
+      <div class="inline-block h-40 w-40 shrink-0 overflow-hidden <%= container_rounded_class %> relative" aria-hidden="true">
+        <%= image_element %>
+      </div>
+      <label for="desktop-<%= id %>" class="absolute inset-0 flex flex-col h-full w-full items-center justify-center bg-blue-800/75 text-sm font-medium text-white opacity-0 hover:opacity-100">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+        </svg>
+        <span><%= @title %></span>
+        <span class="sr-only"><%= @label %></span>
+        <%= input_element(input_id: "desktop-#{id}") %>
+      </label>
+    </div>
+    <%= help_text %>
+  </div>
+
+  <script>
+    function loadFile(event, id) {
+      const images = document.querySelectorAll('.img_photo_' + id);
+      if (event.target.files && event.target.files[0]) {
+        images.forEach(function(img) {
+          img.src = URL.createObjectURL(event.target.files[0]);
+          img.onload = function() {
+            URL.revokeObjectURL(img.src);
+          }
+        });
+      }
+    }
+  </script>
+<% end %>

data/app/components/fluxbit/form/upload_image_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::UploadImageComponent` renders a stylized image upload field with live preview,
+# drag-and-drop UI, support for both mobile and desktop layouts, labels, helper text, and integration
+# with Rails form builders and Active Storage attachments. It provides custom title/subtitle, placeholder,
+# and image preview, and is fully configurable via props.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::UploadImageComponent.new(attribute: :avatar, label: "Profile photo")
+#
+# @see docs/03_Forms/UploadImage.md For detailed documentation and examples.
+class Fluxbit::Form::UploadImageComponent < Fluxbit::Form::FieldComponent
+  # Initializes the upload image component with the given properties.
+  #
+  # @param form [ActionView::Helpers::FormBuilder] The form builder (optional, for Rails forms)
+  # @param attribute [Symbol] The model attribute to be used in the form (required if using form builder)
+  # @param id [String] The id of the input element (optional)
+  # @param label [String] The label for the input field (optional)
+  # @param help_text [String] Additional help text for the input field (optional)
+  # @param helper_popover [String] Content for a popover helper (optional)
+  # @param helper_popover_placement [String] Placement of the popover (default: "right")
+  # @param image_path [String] Path to the image to be displayed (optional)
+  # @param image_placeholder [String] Placeholder image path if no image is attached (optional)
+  # @param title [Boolean, String] Whether to show a title (true for default, false to hide, or custom string)
+  # @param rounded [Boolean] Whether to show image as circle (true, default) or square with rounded edges (false)
+  # @param class [String] Additional CSS classes for the input element
+  # @param ... any other HTML attribute supported by file_field_tag
+  def initialize(**props)
+    super(**props)
+    @title = @props.delete(:title) || "Change"
+    @rounded = @props.delete(:rounded)
+    @rounded = true if @rounded.nil?
+    @image_path = @props.delete(:image_path) ||
+      (if @object&.send(@attribute).respond_to?(:attached?) && @object&.send(@attribute)&.send("attached?")
+        @object&.send(@attribute)&.variant(resize_to_fit: [ 160, 160 ])
+       end) || @props.delete(:image_placeholder) || ""
+
+    @props["class"] = "absolute inset-0 h-full w-full cursor-pointer rounded-md border-gray-300 opacity-0"
+  end
+
+  def input_element(input_id: nil)
+    @props["onchange"] = "loadFile(event, '#{id}')"
+    return file_field_tag @name, @props.merge(id: input_id || id) if @form.nil?
+
+    @form.file_field(@attribute, **@props, id: input_id || id)
+  end
+
+  def image_element
+    image_tag @image_path,
+              class: "img_photo_#{id} img_photo absolute inset-0 w-full h-full object-cover #{image_rounded_class}",
+              alt: @attribute&.to_s&.humanize
+  end
+
+  def container_rounded_class
+    @rounded ? "rounded-full" : "rounded-lg"
+  end
+
+  def image_rounded_class
+    @rounded ? "rounded-full" : "rounded-lg"
+  end
+end

data/app/components/fluxbit/gravatar_component.rb

@@ -24,6 +24,7 @@ class Fluxbit::GravatarComponent < Fluxbit::AvatarComponent
   # @option props [Symbol] :filetype (:png) The filetype of the Gravatar (:png, :jpg, :gif).
   # @option props [Symbol] :default (:identicon) The default image to use if no Gravatar is found.
   # @option props [Integer] :size (:md) The size of the Gravatar base on the size provided by AvatarComponent.
+  # @option props [Boolean] :url_only (false) If true, returns only the Gravatar URL instead of rendering the avatar component.
   # @option props [String] :remove_class ('') Classes to be removed from the default Gravatar class list.
   # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the Gravatar container.
   def initialize(**props)
@@ -37,10 +38,16 @@ class Fluxbit::GravatarComponent < Fluxbit::AvatarComponent
     }
     add class: gravatar_styles[:base], to: @props
     @email = @props.delete(:email)
+    @url_only = @props.delete(:url_only)
     src = gravatar_url
     super(src: src, **@props)
   end
 
+  def call
+    return gravatar_url.html_safe if @url_only
+    super
+  end
+
   # The raw MD5 hash of the users' email. Gravatar is particularly tricky as
   # it downcases all emails. This is really the guts of the module,
   # everything else is just convenience.

data/app/components/fluxbit/icon_helpers.rb

@@ -0,0 +1,167 @@
+# frozen_string_literal: true
+
+module Fluxbit
+  module IconHelpers
+    def chevron_right(**props)
+      add to: props, class: "w-2.5 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 6 10"
+      stroke_width = props.delete(:stroke_width) || 2
+
+      tag.svg(**props) do
+        tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "m1 9 4-4-4-4")
+      end
+    end
+
+    def chevron_left(**props)
+      add to: props, class: "w-2.5 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 6 10"
+      stroke_width = props.delete(:stroke_width) || 2
+
+      tag.svg(**props) do
+        tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "m5 1-4 4 4 4")
+      end
+    end
+
+    def chevron_up(**props)
+      add to: props, class: "w-2.5 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 10 6"
+      stroke_width = props.delete(:stroke_width) || 2
+
+      tag.svg(**props) do
+        tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "m1 5 4-4 4 4")
+      end
+    end
+
+    def chevron_down(**props)
+      add to: props, class: "w-2.5 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 10 6"
+      stroke_width = props.delete(:stroke_width) || 2
+
+      tag.svg(**props) do
+        tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "m1 1 4 4 4-4")
+      end
+    end
+
+    def close_icon(**props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 14 14"
+
+      tag.svg(**props) do
+        tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => 2, d: "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6")
+      end
+    end
+
+    def plus_icon(**props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "currentColor"
+      props[:viewBox] = "0 0 24 24"
+
+      tag.svg(**props) do
+        tag.path("fill-rule" => "evenodd", d: "M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z", "clip-rule" => "evenodd")
+      end
+    end
+
+    def chevron_double_left(**props)
+      add to: props, class: "w-3 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 10 10"
+      stroke_width = props.delete(:stroke_width) || 2
+
+      tag.svg(**props) do
+        safe_join [
+          tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "M4 1l-4 4 4 4"),
+          tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "M10 1l-4 4 4 4")
+        ]
+      end
+    end
+
+    def chevron_double_right(**props)
+      add to: props, class: "w-3 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 12 10"
+      stroke_width = props.delete(:stroke_width) || 2
+
+      tag.svg(**props) do
+        safe_join [
+          tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "M2 1l4 4-4 4"),
+          tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "M8 1l4 4-4 4")
+        ]
+      end
+    end
+
+    def ellipsis_horizontal(**props)
+      add to: props, class: "w-2.5 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "currentColor"
+      props[:viewBox] = "0 0 10 2"
+
+      tag.svg(**props) do
+        safe_join [
+          tag.circle(cx: 1, cy: 1, r: 1),
+          tag.circle(cx: 5, cy: 1, r: 1),
+          tag.circle(cx: 9, cy: 1, r: 1)
+        ]
+      end
+    end
+
+    def eye_icon(**props)
+      add to: props, class: "size-4", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 24 24"
+      props[:"stroke-width"] = "1.5"
+      props[:stroke] = "currentColor"
+
+      tag.svg(**props) do
+        safe_join [
+          tag.path("stroke-linecap" => "round", "stroke-linejoin" => "round", d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"),
+          tag.path("stroke-linecap" => "round", "stroke-linejoin" => "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z")
+        ]
+      end
+    end
+
+    def eye_slash_icon(**props)
+      add to: props, class: "size-4", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 24 24"
+      props[:"stroke-width"] = "1.5"
+      props[:stroke] = "currentColor"
+
+      tag.svg(**props) do
+        tag.path("stroke-linecap" => "round", "stroke-linejoin" => "round", d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88")
+      end
+    end
+  end
+end

data/app/components/fluxbit/link_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+##
+##
+# The `Fluxbit::LinkComponent` is a customizable link component that extends {Fluxbit::Component}.
+# It provides a straightforward way to generate anchor elements (`<a>`) with configurable colors
+# and styling options. Additional HTML attributes can be passed to further control the component's
+# behavior and appearance.
+#
+# Example usage:
+#   = render Fluxbit::LinkComponent.new(size: 2, spacing: :wider, line_height: :relaxed) do
+#     "My Heading"
+#
+class Fluxbit::LinkComponent < Fluxbit::Component
+  include Fluxbit::Config::LinkComponent
+
+  ##
+  # Initializes the link component with the provided options.
+  #
+  # @param [Symbol] color (:default) The color style for the heading. Must be one of the keys defined in +styles[:colors]+.
+  # @param [Hash] props Additional HTML attributes to be applied to the heading element, such as +class+, +id+, +data-*, etc.
+  #
+  # @return [Fluxbit::LinkComponent]
+  #
+  # @example
+  #   = render Fluxbit::LinkComponent.new(color: :primary) do
+  #     "My Heading"
+  #
+  def initialize(**props)
+    super
+    @props = props
+    @color = @props.delete(:color) || @@color
+
+    add to: @props, class: [ styles[:colors][@color], styles[:base] ]
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+    @href = @props.delete(:href) || "#"
+  end
+
+  def call
+    link_to content, @href, **@props
+  end
+end

data/app/components/fluxbit/modal_component.rb

@@ -23,10 +23,10 @@ class Fluxbit::ModalComponent < Fluxbit::Component
   # @option props [Boolean] :only_css (false) Determines if the modal can be closed by clicking the backdrop, using a CSS-based approach.
   # @option props [Boolean] :static (false) If true, the modal will not close when clicking the backdrop or pressing the ESC key.
   # @option props [String] :remove_class ('') Classes to be removed from the default modal class list.
-  # @option props [Hash] :content_props ({}) Additional HTML attributes and classes for the content wrapper inside the modal.
-  # @option props [Hash] :header_props ({}) Additional HTML attributes and classes for the header section.
-  # @option props [Hash] :footer_props ({}) Additional HTML attributes and classes for the footer section.
-  # @option props [Hash] :close_button_props ({}) Additional HTML attributes and classes for the close button element.
+  # @option props [Hash] :content_html ({}) Additional HTML attributes and classes for the content wrapper inside the modal.
+  # @option props [Hash] :header_html ({}) Additional HTML attributes and classes for the header section.
+  # @option props [Hash] :footer_html ({}) Additional HTML attributes and classes for the footer section.
+  # @option props [Hash] :close_button_html ({}) Additional HTML attributes and classes for the close button element.
   # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the modal container.
   def initialize(**props)
     super
@@ -50,39 +50,35 @@ class Fluxbit::ModalComponent < Fluxbit::Component
     @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
 
     # Content properties
-    @content_props = @props.delete(:content_props) || {}
-    add(class: content_classes, to: @content_props, first_element: true)
-    @content_props[:class] = remove_class(@content_props.delete(:remove_class) || "", @content_props[:class])
+    @content_html = @props.delete(:content_html) || {}
+    add(class: content_classes, to: @content_html, first_element: true)
+    @content_html[:class] = remove_class(@content_html.delete(:remove_class) || "", @content_html[:class])
 
     # Header properties
-    @header_props = @props.delete(:header_props) || {}
-    add(class: header_classes, to: @header_props, first_element: true)
-    @header_props[:class] = remove_class(@header_props.delete(:remove_class) || "", @header_props[:class])
+    @header_html = @props.delete(:header_html) || {}
+    add(class: header_classes, to: @header_html, first_element: true)
+    @header_html[:class] = remove_class(@header_html.delete(:remove_class) || "", @header_html[:class])
 
     # Footer properties
-    @footer_props = @props.delete(:footer_props) || {}
-    add(class: footer_classes, to: @footer_props, first_element: true)
-    @footer_props[:class] = remove_class(@footer_props.delete(:remove_class) || "", @footer_props[:class])
+    @footer_html = @props.delete(:footer_html) || {}
+    add(class: footer_classes, to: @footer_html, first_element: true)
+    @footer_html[:class] = remove_class(@footer_html.delete(:remove_class) || "", @footer_html[:class])
 
     # Close button properties
-    @close_button_props = @props.delete(:close_button_props) || {}
-    add(class: styles[:header][:close][:base], to: @close_button_props, first_element: true)
-    @close_button_props[:class] = remove_class(@close_button_props.delete(:remove_class) || "", @close_button_props[:class])
-    @close_button_props[:type] = "button"
-    @close_button_props["data-modal-hide"] = @props[:id]
-    @close_button_props["aria-label"] = "Close"
+    @close_button_html = @props.delete(:close_button_html) || {}
+    add(class: styles[:header][:close][:base], to: @close_button_html, first_element: true)
+    @close_button_html[:class] = remove_class(@close_button_html.delete(:remove_class) || "", @close_button_html[:class])
+    @close_button_html[:type] = "button"
+    @close_button_html["data-modal-hide"] = @props[:id]
   end
 
   def call
-    content_tag(
-      :div,
-      **@props
-    ) do
-      content_tag(:div, **@content_props) do
-        content_tag(:div, class: styles[:content][:inner]) do
+    tag.div(**@props) do
+      tag.div(**@content_html) do
+        tag.div(class: styles[:content][:inner]) do
           concat(header) if title? || @title.present? || @close_button
-          concat(content_tag(:div, content, class: body_classes))
-          concat(content_tag(:div, footer, **@footer_props)) if footer?
+          concat(tag.div(content, class: body_classes))
+          concat(tag.div(footer, **@footer_html)) if footer?
         end
       end
     end
@@ -114,7 +110,7 @@ class Fluxbit::ModalComponent < Fluxbit::Component
   def header
     return close_button if @close_button && !title? && !@title.present?
 
-    content_tag(:div, **@header_props) do
+    content_tag(:div, **@header_html) do
       concat(title) if title?
       concat(content_tag(:h3, @title, class: styles[:header][:title])) if @title.present?
       concat(close_button) if @close_button
@@ -126,12 +122,13 @@ class Fluxbit::ModalComponent < Fluxbit::Component
   end
 
   def close_button
+    @close_button_html["aria-label"] = t("fluxbit.modal.aria_close")
     content_tag(
       :button,
-      **@close_button_props
+      **@close_button_html
     ) do
-      concat content_tag(:span, "Dismiss", class: "sr-only")
-      concat anyicon(icon: "heroicons_outline:x-mark", class: "w-5 h-5")
+      concat content_tag(:span, t("fluxbit.modal.dismiss"), class: "sr-only")
+      concat close_icon(class: "size-3")
     end
   end
 

data/app/components/fluxbit/pagination_component.rb

@@ -0,0 +1,206 @@
+# The `Fluxbit::PaginationComponent` is a component for rendering customizable pagination controls.
+# It extends `Fluxbit::Component` and provides options for configuring the pagination's
+# appearance, behavior, and content areas. You can control the pagination's layout, item count,
+# and other interactive elements. The pagination is divided into different sections (previous, next, etc.),
+# each of which can be styled or customized through various properties.
+class Fluxbit::PaginationComponent < Fluxbit::Component
+  include Fluxbit::Config::PaginationComponent
+
+  def initialize(pagy = nil, **props)
+    @pagy = pagy
+
+    @props = props
+    @count = @props.delete(:count) || 0
+    @last = @props.delete(:last) || 1
+    @next = @props.delete(:next)
+    @page = @props.delete(:page) || 1
+    @prev = @props.delete(:prev)
+    @size = @props.delete(:size) || :default
+    @ends = @props.delete(:ends) || true
+    @request_path = @props.delete(:request_path) || nil
+
+    if @pagy
+      @count = @pagy.count
+      @last = @pagy.last
+      @next = @pagy.next
+      @page = @pagy.page
+      @prev = @pagy.prev
+      @size = @pagy.vars[:size]
+      @ends = @pagy.vars[:ends]
+      @request_path = @pagy.vars[:request_path]
+    end
+
+    unless @size.is_a?(Integer) && @size >= 0
+      raise ArgumentError, "expected :size to be an Integer >= 0, got #{@size.inspect} (#{@size.class})"
+    end
+
+    @show_first_last = options @props.delete(:show_first_last), default: @@show_first_last
+    @show_prev_next = options @props.delete(:show_prev_next), default: @@show_prev_next
+    @show_pages = options @props.delete(:show_pages), default: @@show_pages
+    @show_icons = options @props.delete(:show_icons), default: @@show_icons
+    @show_texts = options @props.delete(:show_texts), default: @@show_texts
+    @sizing = options @props.delete(:sizing), default: @@sizing
+    @aria_label = @props.delete(:aria_label) || translate("aria_label.nav", count: @last)
+    @show_texts = true if !@show_icons && !@show_texts
+
+    add(class: [ styles[:root], styles[:sizes][@sizing][:root] ], to: @props)
+    @page_link_style = [ styles[:page_link], styles[:sizes][@sizing][:page_link] ].join(" ")
+    @current_style = [ styles[:current], styles[:sizes][@sizing][:page_link] ].join(" ")
+    @props[:aria] ||= {}
+    @props[:aria][:label] = @aria_label unless @props[:aria][:label]
+  end
+
+  def call
+    tag.nav(**@props) do
+      concat first_button if @show_first_last
+      concat prev_button if @show_prev_next
+
+      if @show_pages
+        series.each do |item|
+          case item
+          when Integer
+            concat(tag.a(item.to_s, href: url_for(item), role: "link", class: @page_link_style, aria: { label: item.to_s }))
+          when String
+            concat(tag.a(item.to_s, role: "link", class: @current_style, aria: { disabled: true, current: "page" }))
+          when :gap
+            concat(tag.a(ellipsis_horizontal, role: "link", class: @page_link_style, aria: { disabled: true }))
+          end
+        end
+      end
+
+      concat next_button if @show_prev_next
+      concat last_button if @show_first_last
+    end
+  end
+
+  private
+
+  def translate(key, options = {})
+    I18n.t(key, **options.merge(scope: "fluxbit.pagination")) # , default: Fluxbit::DEFAULT_TRANSLATIONS["fluxbit.pagination.#{key}"]))
+  end
+
+  def first_button
+    props = { role: "link", class: @page_link_style, aria: { label: translate("aria_label.first") } }
+    if @page != 1
+      props[:href] = url_for(1)
+    else
+      props[:aria][:disabled] = true
+      add class: styles[:disabled], to: props, first_element: true
+    end
+    add class: styles[:previous], to: props
+
+    tag.a(**props) do
+      concat(chevron_double_left) if @show_icons
+      concat(tag.span(
+        translate("first"),
+        class: @show_texts ? (@show_icons ? styles[:text_with_icon_prev] : styles[:only_text]) : styles[:only_icon]
+      ))
+    end
+  end
+
+  def last_button
+    props = { role: "link", class: @page_link_style, aria: { label: translate("aria_label.last") } }
+    if @page != @last
+      props[:href] = url_for(@last)
+    else
+      props[:aria][:disabled] = true
+      add class: styles[:disabled], to: props, first_element: true
+    end
+    add class: styles[:next], to: props
+
+    tag.a(**props) do
+      concat(tag.span(
+        translate("last"),
+        class: @show_texts ? (@show_icons ? styles[:text_with_icon_next] : styles[:only_text]) : styles[:only_icon]
+      ))
+      concat(chevron_double_right) if @show_icons
+    end
+  end
+
+  def prev_button
+    props = { role: "link", class: @page_link_style, aria: { label: translate("aria_label.prev") } }
+    if prev_page = @prev
+      props[:href] = url_for(prev_page)
+    else
+      props[:aria][:disabled] = true
+      add class: styles[:disabled], to: props, first_element: true
+    end
+    add(class: styles[:previous], to: props) unless @show_first_last
+
+    tag.a(**props) do
+      concat(chevron_left) if @show_icons
+      concat(tag.span(
+        translate("prev"),
+        class: @show_texts ? (@show_icons ? styles[:text_with_icon_prev] : styles[:only_text]) : styles[:only_icon]
+        )
+      )
+    end
+  end
+
+  def next_button
+    props = { role: "link", class: @page_link_style, aria: { label: translate("aria_label.next") } }
+    if next_page = @next
+      props[:href] = url_for(next_page)
+    else
+      props[:aria][:disabled] = true
+      add class: styles[:disabled], to: props, first_element: true
+    end
+    add(class: styles[:next], to: props) unless @show_first_last
+
+    tag.a(**props) do
+      concat(tag.span(
+        translate("next"),
+        class: @show_texts ? (@show_icons ? styles[:text_with_icon_next] : styles[:only_text]) : styles[:only_icon]
+      ))
+      concat(chevron_right) if @show_icons
+    end
+  end
+
+  def series
+    return @pagy.series(size: @size) if @pagy && @pagy.respond_to?(:series, true)
+    return [] if @size.zero?
+
+    [].tap do |series|
+      if @size >= @last
+        series.push(*1..@last)
+      else
+        left  = ((@size - 1) / 2.0).floor            # left half might be 1 page shorter for even size
+        start = if @page <= left                     # beginning pages
+                  1
+        elsif @page > (@last - @size + left) # end pages
+                  @last - @size + 1
+        else                                 # intermediate pages
+                  @page - left
+        end
+        series.push(*start...start + @size)
+        # Set first and last pages plus gaps when needed, respecting the size
+        if @ends && @size >= 7
+          series[0]  = 1
+          series[1]  = :gap  unless series[1]  == 2
+          series[-2] = :gap  unless series[-2] == @last - 1
+          series[-1] = @last
+        end
+      end
+      series[series.index(@page)] = @page.to_s
+    end
+  end
+
+  def url_for(page)
+    vars = @pagy&.vars || {}
+    # Use current request parameters as base
+    params = (respond_to?(:request) ? request.GET : controller.request.GET).dup
+    params.merge!(vars[:params].transform_keys(&:to_s)) if vars[:params].is_a?(Hash)
+    # Set page and possibly limit
+    params[vars[:page_param].to_s] = page
+    params[vars[:limit_param].to_s] = vars[:limit] if vars[:limit_extra]
+    # Apply params proc if given
+    params = vars[:params].call(params) if vars[:params].is_a?(Proc)
+
+    # Build query string
+    query_str = params.any? ? "?#{Rack::Utils.build_nested_query(params)}" : ""
+    # Base path (use stored request_path or current path)
+    base_path = @request_path || (respond_to?(:request) ? request.path : controller.request.path)
+    base_path = "#{request.base_url}#{base_path}" if vars[:absolute]
+    "#{base_path}#{query_str}#{vars[:fragment] || ''}"
+  end
+end