ruby_ui_admin 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: b9d5449657a96e06d7fdec1b35f2acc22e61b18a8ee4f9af0dccc271210e3a04
+  data.tar.gz: cb13e7ee317cb31f45b529827d45c47a88f004db7b2470417de5ce38cddf69da
+SHA512:
+  metadata.gz: cb7446e9a905dbd81ae1e5eda43ea3a7887fde9abbd65a7741b66a9b1eaf3623e9919f87b24d81a865bbed78f2a6808d77a518f30d8c2e04f9aaed6f4a1e67d9
+  data.tar.gz: 406ab2ee12504cc014060f9416b4729253cb67343a3fa5ae728b297ce5110c6f5d466f7f169a0582f9249b756790f9bd2bee55def37b7b59f4b900e7dd3837f5

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright The ruby_ui_admin authors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,165 @@
+# RubyUI Admin
+
+`ruby_ui_admin` is a Rails admin dashboard engine, rendered with
+[RubyUI](https://rubyui.com) (Phlex) components, that even serves its own documentation as HTML
+inside your app at `<mount>/docs` (e.g. `/admin/docs`).
+
+![RubyUI Admin](/docs/assets/ruby-ui-admin.gif)
+
+## What is RubyUI Admin?
+
+RubyUI Admin turns your Active Record models into a complete, production-ready admin panel with
+very little code. You point it at a model, describe its fields in a compact Ruby DSL, and you get
+index / show / new / edit screens, pagination, filters, named scopes, bulk and custom actions,
+dashboards, and authorization — all rendered server-side.
+
+It grew out of three ideas:
+
+- **A UI built on your app's [RubyUI](https://rubyui.com) (Phlex) components.** Every screen is
+  composed from the same `RubyUI::*` components you've installed in your app — cards, tables,
+  dialogs, toasts, a collapsible sidebar — so the admin matches your design system and tracks your
+  RubyUI version. It's progressively enhanced with native Hotwire (Stimulus + Turbo).
+- **A resource DSL inspired by [Avo](https://github.com/avo-hq/avo).** You configure the admin in plain Ruby
+  classes — `fields`, `filters`, `scopes`, `actions`, policies — instead of generating and then
+  hand-editing views. If you've used Avo, the shape will feel familiar.
+- **Documentation you read inside the app.** The gem serves its own docs, rendered as HTML, at
+  `<mount>/docs` (e.g. `/admin/docs`) — so you can look things up without leaving the admin. It's on
+  in development by default and can be exposed in production (behind your auth gate) with
+  `config.docs_enabled = true`.
+
+### Requirements
+
+The admin renders **your host app's RubyUI components**, so it expects:
+
+- [RubyUI](https://rubyui.com) installed and its components generated into your app
+  (`app/components/ruby_ui/*` as `RubyUI::*`), at a version compatible with the admin — run
+  `rails g ruby_ui_admin:components` to generate exactly the ones the admin renders.
+- A **JavaScript bundler/importmap** that registers RubyUI's Stimulus controllers (and the admin's
+  own `rua--*` controllers — use `rails g ruby_ui_admin:assets` to copy them in), plus a **Tailwind
+  build** that covers `app/components/ruby_ui/**` and the admin's views. You wire these into the
+  admin layout via `config.head_assets`.
+
+This makes the admin part of your app's UI rather than a self-contained bundle. (See
+[Theming with RubyUI](docs/customization/theming-rubyui.md) and
+[JavaScript](docs/customization/javascript.md).)
+
+### Design principles
+
+- **Server-rendered, progressively enhanced.** Everything works without JavaScript; Stimulus and
+  Turbo only sharpen a few interactions (tabs, action modals, toasts, clickable rows).
+- **Your design system, not a fork.** The admin uses your own `RubyUI::*` components; if one needs a
+  change, change it in your app (or upstream a PR to RubyUI) — there's no vendored copy to maintain.
+- **Plain Ruby, and ejectable.** Resources, policies, and actions are just classes; any view can be
+  ejected and customized when you outgrow the defaults.
+
+## Features
+
+- Resources with a full field catalog, tabs & panels, and schema auto-discovery
+- CRUD with pagination, named scopes, filters and index customization
+- Custom actions (inline modals, with a no-JS page fallback) and bulk actions
+- Dashboards with metric / chart / partial cards
+- action_policy authorization: per-rule, record scopes, and field-level rules
+- Generators (`install`, `components`, `assets`, `resource`, `controller`, `action`, `filter`,
+  `policy`, `scope`, `dashboard`, `card`, `eject`, `locales`) and rake tasks
+- Renders your app's RubyUI/Phlex components, enhanced with native Hotwire (Stimulus + Turbo)
+- i18n (English + Brazilian Portuguese bundled)
+
+See [`docs/`](docs/README.md) for the full documentation.
+
+> Deferred / not yet built: inline association management (attach/detach + nested tables),
+> grid/map index views, and a few reserved config options.
+
+## Quick start
+
+New to the gem? The [**practical guide**](docs/getting-started/practical-guide.md) is a
+copy‑paste walkthrough from `rails new` to a working admin (two associated scaffolds,
+configuration, resources and filters).
+
+## Installation
+
+Add to your `Gemfile`:
+
+```ruby
+gem "ruby_ui_admin"
+```
+
+Mount the engine in `config/routes.rb`:
+
+```ruby
+mount_ruby_ui_admin at: "/admin"
+```
+
+Configure it in `config/initializers/ruby_ui_admin.rb`:
+
+```ruby
+RubyUIAdmin.configure do |config|
+  config.app_name = "My Admin"
+  config.current_user_method { current_user }     # resolve the signed-in admin
+  config.authenticate_with { redirect_to main_app.login_path unless current_user }
+  config.authorization_client = :action_policy
+  config.explicit_authorization = false           # allow rules a policy doesn't define
+end
+```
+
+## Defining a resource
+
+Resources live in `app/ruby_ui_admin/resources` and are namespaced under `RubyUIAdmin::Resources`:
+
+```ruby
+module RubyUIAdmin
+  module Resources
+    class Post < RubyUIAdmin::BaseResource
+      self.title = :title
+      self.includes = [:user]
+      self.authorization_policy = RubyUIAdmin::Policies::PostPolicy
+
+      def fields
+        field :id, as: :id
+        field :title, as: :text, link_to_record: true, sortable: true
+        field :body, as: :text, only_on: %i[show new edit]
+        field :published, as: :boolean
+        field :user, as: :belongs_to
+        field :created_at, as: :date_time, only_on: %i[index show]
+      end
+    end
+  end
+end
+```
+
+## Authorization
+
+Policies use action_policy and live in `app/ruby_ui_admin/policies`
+(`RubyUIAdmin::Policies::*`), inheriting `RubyUIAdmin::BasePolicy`:
+
+```ruby
+module RubyUIAdmin
+  module Policies
+    class PostPolicy < RubyUIAdmin::BasePolicy
+      def index? = true
+      def show? = true
+      def update? = true
+      def destroy? = user.admin?
+
+      relation_scope do |relation|
+        next relation if user.admin?
+        relation.where(published: true)
+      end
+    end
+  end
+end
+```
+
+## Documentation
+
+Full documentation lives in [`docs/`](docs/README.md).
+
+## Development
+
+```bash
+bin/setup            # bundle install
+bundle exec rake test    # run the minitest suite against test/dummy
+```
+
+## License
+
+MIT.

data/app/assets/stylesheets/ruby_ui_admin/application.tailwind.css

@@ -0,0 +1,111 @@
+@import "tailwindcss";
+
+/* Scan the engine's Phlex components so their utility classes are generated. */
+@source "../../../components/ruby_ui_admin";
+
+/* Safelist dynamic classes built via string interpolation (grid/col-span). */
+@source inline("md:grid-cols-{1,2,3,4}");
+@source inline("md:col-span-{2,3,4}");
+
+/* RubyUI design tokens (light). Host apps may override these. */
+:root {
+  --background: #ffffff;
+  --foreground: #0a0a0a;
+  --muted: #f4f4f5;
+  --muted-foreground: #71717a;
+  --border: #ededf0;
+  --input: #e4e4e7;
+  --ring: #18181b;
+  --primary: #18181b;
+  --primary-foreground: #fafafa;
+  --secondary: #f4f4f5;
+  --secondary-foreground: #18181b;
+  --accent: #f4f4f5;
+  --accent-foreground: #18181b;
+  --destructive: #ef4444;
+  --destructive-foreground: #fafafa;
+  --popover: #ffffff;
+  --popover-foreground: #0a0a0a;
+  --sidebar: #fafafa;
+  --sidebar-foreground: #3f3f46;
+  --sidebar-accent: #f4f4f5;
+  --sidebar-accent-foreground: #18181b;
+  --sidebar-border: #e5e7eb;
+  --sidebar-ring: #3b82f6;
+}
+
+.dark {
+  --background: #0a0a0a;
+  --foreground: #fafafa;
+  --muted: #262626;
+  --muted-foreground: #a1a1aa;
+  --border: #232327;
+  --input: #262626;
+  --ring: #d4d4d8;
+  --primary: #fafafa;
+  --primary-foreground: #18181b;
+  --secondary: #262626;
+  --secondary-foreground: #fafafa;
+  --accent: #262626;
+  --accent-foreground: #fafafa;
+  --destructive: #ef4444;
+  --destructive-foreground: #fafafa;
+  --popover: #0a0a0a;
+  --popover-foreground: #fafafa;
+  --sidebar: #18181b;
+  --sidebar-foreground: #f4f4f5;
+  --sidebar-accent: #27272a;
+  --sidebar-accent-foreground: #fafafa;
+  --sidebar-border: #27272a;
+  --sidebar-ring: #3b82f6;
+}
+
+/* Map the tokens to Tailwind theme colors (kept as var() refs so dark mode works). */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/* Tailwind v4 defaults a bare `border` to currentColor; restore the v3/shadcn behaviour
+   so `border` (cards, table separators, dividers) uses the soft `--border` token. Inputs
+   keep their own `border-input` color. */
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop {
+    border-color: var(--color-border, currentColor);
+  }
+}
+
+/* User-rendered links (raw `link_to` inside field blocks) underline on hover, matching
+   the framework's own links. Scoped to `.rua-rich` so it never touches buttons or nav. */
+@layer base {
+  .rua-rich a {
+    text-underline-offset: 4px;
+  }
+  .rua-rich a:hover {
+    text-decoration-line: underline;
+  }
+}

data/app/components/ruby_ui_admin/ui/base.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+module RubyUIAdmin
+  module UI
+    # Base for all vendored UI primitives. Mirrors RubyUI::Base: merges default and
+    # user attributes and dedupes Tailwind classes.
+    class Base < Phlex::HTML
+      TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER)
+
+      attr_reader :attrs
+
+      def initialize(**user_attrs)
+        @attrs = mix(default_attrs, user_attrs)
+        @attrs[:class] = TAILWIND_MERGER.merge(@attrs[:class]) if @attrs[:class]
+      end
+
+      private
+
+      def default_attrs
+        {}
+      end
+    end
+  end
+end

data/app/components/ruby_ui_admin/ui/icon.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module RubyUIAdmin
+  module UI
+    # Inline Lucide icons (lucide.dev, ISC license) — vendored as SVG paths so the gem
+    # needs no icon dependency. Add entries to `render_paths` as needed.
+    #
+    #   render RubyUIAdmin::UI::Icon.new(:eye)
+    #   render RubyUIAdmin::UI::Icon.new(:trash, class: "size-5")
+    class Icon < Base
+      def initialize(name, **attrs)
+        @name = name.to_sym
+        super(**attrs)
+      end
+
+      def view_template
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          **attrs
+        ) { |s| render_paths(s) }
+      end
+
+      private
+
+      def render_paths(s)
+        case @name
+        when :eye # lucide: eye
+          s.path(d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0")
+          s.circle(cx: "12", cy: "12", r: "3")
+        when :pencil # lucide: square-pen
+          s.path(d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7")
+          s.path(d: "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z")
+        when :trash # lucide: trash-2
+          s.path(d: "M3 6h18")
+          s.path(d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2")
+          s.line(x1: "10", x2: "10", y1: "11", y2: "17")
+          s.line(x1: "14", x2: "14", y1: "11", y2: "17")
+        when :chevron_left # lucide: chevron-left
+          s.path(d: "m15 18-6-6 6-6")
+        when :chevron_right # lucide: chevron-right
+          s.path(d: "m9 18 6-6-6-6")
+        when :chevron_down # lucide: chevron-down
+          s.path(d: "m6 9 6 6 6-6")
+        when :circle # lucide: circle (generic leaf marker)
+          s.circle(cx: "12", cy: "12", r: "10")
+        when :layout_dashboard # lucide: layout-dashboard
+          s.rect(width: "7", height: "9", x: "3", y: "3", rx: "1")
+          s.rect(width: "7", height: "5", x: "14", y: "3", rx: "1")
+          s.rect(width: "7", height: "9", x: "14", y: "12", rx: "1")
+          s.rect(width: "7", height: "5", x: "3", y: "16", rx: "1")
+        when :link # lucide: link
+          s.path(d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71")
+          s.path(d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71")
+        when :log_out # lucide: log-out
+          s.path(d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4")
+          s.polyline(points: "16 17 21 12 16 7")
+          s.line(x1: "21", x2: "9", y1: "12", y2: "12")
+        when :download # lucide: download
+          s.path(d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4")
+          s.polyline(points: "7 10 12 15 17 10")
+          s.line(x1: "12", x2: "12", y1: "15", y2: "3")
+        when :file # lucide: file
+          s.path(d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z")
+          s.path(d: "M14 2v4a2 2 0 0 0 2 2h4")
+        end
+      end
+
+      def default_attrs
+        {class: "size-4", aria_hidden: "true"}
+      end
+    end
+  end
+end

data/app/components/ruby_ui_admin/ui/native_select.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+# Vendored from RubyUI (github.com/ruby-ui), namespaced under RubyUIAdmin::UI.
+# Adapted for this engine: full-width (to match the other form inputs), using the
+# engine's `input`/`background` tokens, and without RubyUI's FormField Stimulus hooks
+# (not used here). A styled native <select> with a custom chevron — no JS needed.
+module RubyUIAdmin
+  module UI
+    class NativeSelect < Base
+      def initialize(size: :default, **attrs)
+        @size = size
+        super(**attrs)
+      end
+
+      def view_template(&block)
+        div(class: "group/native-select relative w-full has-[select:disabled]:opacity-50") do
+          select(**attrs, &block)
+          render NativeSelectIcon.new
+        end
+      end
+
+      private
+
+      def default_attrs
+        {
+          class: [
+            "border-input bg-background text-foreground text-sm w-full min-w-0 appearance-none rounded-md border py-1 pr-8 pl-3 shadow-sm transition-[color,box-shadow] outline-none",
+            "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2",
+            "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+            "aria-invalid:ring-destructive/20 aria-invalid:border-destructive aria-invalid:ring-2",
+            (@size == :sm) ? "h-8" : "h-9"
+          ]
+        }
+      end
+    end
+  end
+end

data/app/components/ruby_ui_admin/ui/native_select_group.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+# Vendored from RubyUI (github.com/ruby-ui), namespaced under RubyUIAdmin::UI.
+module RubyUIAdmin
+  module UI
+    class NativeSelectGroup < Base
+      def view_template(&)
+        optgroup(**attrs, &)
+      end
+
+      private
+
+      def default_attrs
+        {}
+      end
+    end
+  end
+end

data/app/components/ruby_ui_admin/ui/native_select_icon.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+# Vendored from RubyUI (github.com/ruby-ui), namespaced under RubyUIAdmin::UI.
+module RubyUIAdmin
+  module UI
+    class NativeSelectIcon < Base
+      def view_template(&block)
+        span(**attrs) do
+          if block
+            block.call
+          else
+            icon
+          end
+        end
+      end
+
+      private
+
+      def icon
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "size-4",
+          aria_hidden: "true"
+        ) do |s|
+          s.path(d: "m6 9 6 6 6-6")
+        end
+      end
+
+      def default_attrs
+        {
+          class: "text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 select-none"
+        }
+      end
+    end
+  end
+end

data/app/components/ruby_ui_admin/ui/native_select_option.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+# Vendored from RubyUI (github.com/ruby-ui), namespaced under RubyUIAdmin::UI.
+module RubyUIAdmin
+  module UI
+    class NativeSelectOption < Base
+      def view_template(&)
+        option(**attrs, &)
+      end
+
+      private
+
+      def default_attrs
+        {}
+      end
+    end
+  end
+end

data/app/components/ruby_ui_admin/ui/pagination.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module RubyUIAdmin
+  module UI
+    # Orchestrates RubyUI's Pagination primitives (PaginationContent / PaginationItem /
+    # PaginationEllipsis) from a Pagy instance: numbered page links with gaps, plus
+    # Previous/Next. In countless mode (no total) it shows Previous/Next only.
+    class Pagination < Base
+      def initialize(pagy:, url_for_page:, countless: false, **attrs)
+        @pagy = pagy
+        @url_for_page = url_for_page
+        @countless = countless
+        super(**attrs)
+      end
+
+      def view_template
+        nav(**attrs) do
+          render PaginationContent.new do
+            render_edge(:prev)
+            render_series unless @countless
+            render_edge(:next)
+          end
+        end
+      end
+
+      private
+
+      def default_attrs
+        {aria: {label: "pagination"}, role: "navigation", class: "flex w-full justify-end py-4"}
+      end
+
+      # Pagy#series yields page numbers (Integer), the current page (String) and `:gap`.
+      def render_series
+        @pagy.series.each do |item|
+          if item == :gap
+            render PaginationEllipsis.new
+          elsif item.is_a?(String)
+            render(PaginationItem.new(href: @url_for_page.call(item), active: true)) { item }
+          else
+            render(PaginationItem.new(href: @url_for_page.call(item))) { item.to_s }
+          end
+        end
+      end
+
+      def render_edge(direction)
+        page = (direction == :prev) ? @pagy.prev : @pagy.next
+        item_attrs = page ? {href: @url_for_page.call(page)} : {href: "#", class: "pointer-events-none opacity-50"}
+        render(PaginationItem.new(**item_attrs)) { edge_content(direction) }
+      end
+
+      def edge_content(direction)
+        if direction == :prev
+          render RubyUIAdmin::UI::Icon.new(:chevron_left)
+          plain I18n.t("ruby_ui_admin.pagination.previous")
+        else
+          plain I18n.t("ruby_ui_admin.pagination.next")
+          render RubyUIAdmin::UI::Icon.new(:chevron_right)
+        end
+      end
+    end
+  end
+end

data/app/components/ruby_ui_admin/ui/pagination_content.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+# Vendored from RubyUI (github.com/ruby-ui), namespaced under RubyUIAdmin::UI.
+module RubyUIAdmin
+  module UI
+    class PaginationContent < Base
+      def view_template(&)
+        ul(**attrs, &)
+      end
+
+      private
+
+      def default_attrs
+        {class: "flex flex-row items-center gap-1"}
+      end
+    end
+  end
+end

data/app/components/ruby_ui_admin/ui/pagination_ellipsis.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+# Vendored from RubyUI (github.com/ruby-ui), namespaced under RubyUIAdmin::UI.
+module RubyUIAdmin
+  module UI
+    class PaginationEllipsis < Base
+      def view_template(&block)
+        li do
+          span(**attrs) do
+            icon
+            span(class: "sr-only") { "More pages" }
+          end
+        end
+      end
+
+      private
+
+      def icon
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "h-4 w-4"
+        ) do |s|
+          s.circle(cx: "12", cy: "12", r: "1")
+          s.circle(cx: "19", cy: "12", r: "1")
+          s.circle(cx: "5", cy: "12", r: "1")
+        end
+      end
+
+      def default_attrs
+        {
+          aria: {hidden: true},
+          class: "flex h-9 w-9 items-center justify-center"
+        }
+      end
+    end
+  end
+end