shadcn_view_component 0.3.3

data/app/components/shadcn/mode_switcher/component.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ModeSwitcher
+    # Port of apps/v4/components/mode-switcher.tsx — the single button used in
+    # shadcn's own site header, which flips straight between light and dark
+    # rather than offering the three-way menu.
+    #
+    # The icon is the same half-filled circle upstream draws inline.
+    class Component < ApplicationViewComponent
+      ICON = %(<path stroke="none" d="M0 0h24v24H0z" fill="none"/>) +
+             %(<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/>) +
+             %(<path d="M12 3l0 18"/><path d="M12 9l4.65 -4.65"/>) +
+             %(<path d="M12 14.3l7.37 -7.37"/><path d="M12 19.6l8.85 -8.85"/>)
+
+      ICON_ATTRIBUTES = {
+        "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" => "size-4.5"
+      }.freeze
+
+      slot_name :"mode-switcher"
+
+      attr_reader :variant
+
+      def initialize(variant: :ghost, **attributes)
+        @variant = variant&.to_sym || :ghost
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          style: merged_style(CONTENTS_STYLE),
+          "data-controller" => "shadcn--theme"
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: button)
+      end
+
+      private
+
+      def button
+        render(Button::Component.new(
+          variant:,
+          size: :icon,
+          class: "group/toggle extend-touch-target size-8",
+          "data-action": "shadcn--theme#toggle"
+        )) do
+          safe_join([ tag.svg(raw(ICON), **ICON_ATTRIBUTES), label ])
+        end
+      end
+
+      def label
+        tag.span(shadcn_t("theme.toggle"), class: "sr-only")
+      end
+    end
+  end
+end

data/app/components/shadcn/mode_switcher/preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ModeSwitcher
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/mode_switcher/previews/default.html.erb

@@ -0,0 +1,5 @@
+<div class="flex items-center gap-3">
+  <%= render(Shadcn::ModeSwitcher::Component.new) %>
+  <%= render(Shadcn::ModeSwitcher::Component.new(variant: :outline)) %>
+  <span class="text-sm text-muted-foreground">Flips straight between light and dark.</span>
+</div>

data/app/components/shadcn/mode_toggle/component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ModeToggle
+    # Port of registry/new-york-v4/examples/mode-toggle.tsx — the dropdown
+    # shadcn documents for switching between light, dark and system.
+    #
+    # In React the items call next-themes' `setTheme`; here they hand the mode
+    # to the `shadcn--theme` Stimulus controller wrapping them.
+    class Component < ApplicationViewComponent
+      SUN_CLASSES = "h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all " \
+                    "dark:scale-0 dark:-rotate-90"
+
+      MOON_CLASSES = "absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all " \
+                     "dark:scale-100 dark:rotate-0"
+
+      MODES = %w[light dark system].freeze
+
+      slot_name :"mode-toggle"
+
+      attr_reader :variant, :align
+
+      def initialize(variant: :outline, align: :end, **attributes)
+        @variant = variant&.to_sym || :outline
+        @align = align&.to_sym || :end
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          style: merged_style(CONTENTS_STYLE),
+          "data-controller" => "shadcn--theme"
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: menu)
+      end
+
+      private
+
+      def menu
+        render(DropdownMenu::Component.new(align:)) do |dropdown|
+          dropdown.with_trigger(class: trigger_classes) { trigger_content }
+          dropdown.with_menu_content { items }
+        end
+      end
+
+      def trigger_classes
+        Button::Component.variant_classes(variant:, size: :icon)
+      end
+
+      def trigger_content
+        safe_join([
+          render(Icon::Component.new("sun", class: SUN_CLASSES)),
+          render(Icon::Component.new("moon", class: MOON_CLASSES)),
+          tag.span(shadcn_t("theme.toggle"), class: "sr-only")
+        ])
+      end
+
+      def items
+        safe_join(MODES.map { |mode| item(mode) })
+      end
+
+      # Only the extra action goes here: the item already carries the dropdown's
+      # own, and `data-action` is concatenated rather than replaced.
+      def item(mode)
+        render(DropdownMenu::Item::Component.new(
+          "data-mode": mode,
+          "data-action": "click->shadcn--theme#setMode"
+        )) { shadcn_t("theme.#{mode}") }
+      end
+    end
+  end
+end

data/app/components/shadcn/mode_toggle/preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ModeToggle
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/mode_toggle/previews/default.html.erb

@@ -0,0 +1,20 @@
+<div class="flex flex-col gap-6">
+  <div class="flex items-center gap-3">
+    <%= render(Shadcn::ModeToggle::Component.new) %>
+    <span class="text-sm text-muted-foreground">Light / Dark / System</span>
+  </div>
+
+  <%= render(Shadcn::Card::Component.new(class: "w-full max-w-sm")) do |card| %>
+    <% card.with_header do |header| %>
+      <% header.with_title { "It follows the mode" } %>
+      <% header.with_description { "Every token swaps with the .dark class." } %>
+    <% end %>
+    <% card.with_card_content do %>
+      <div class="flex flex-wrap gap-2">
+        <%= render(Shadcn::Button::Component.new) { "Primary" } %>
+        <%= render(Shadcn::Button::Component.new(variant: :secondary)) { "Secondary" } %>
+        <%= render(Shadcn::Badge::Component.new) { "Badge" } %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/native_select/component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module NativeSelect
+    # Port of registry/new-york-v4/ui/native-select.tsx — a real <select> with
+    # the native chevron replaced by a lucide icon.
+    class Component < ApplicationViewComponent
+      WRAPPER_CLASSES = "group/native-select relative w-fit has-[select:disabled]:opacity-50"
+
+      ICON_CLASSES = "pointer-events-none absolute top-1/2 right-3.5 size-4 " \
+                     "-translate-y-1/2 text-muted-foreground opacity-50 select-none"
+
+      default_tag :select
+      slot_name :"native-select"
+
+      style do
+        base {
+          "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent " \
+          "px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none " \
+          "selection:bg-primary selection:text-primary-foreground " \
+          "placeholder:text-muted-foreground disabled:pointer-events-none " \
+          "disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 " \
+          "dark:bg-input/30 dark:hover:bg-input/50 " \
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20 " \
+          "dark:aria-invalid:ring-destructive/40"
+        }
+      end
+
+      attr_reader :size
+
+      def initialize(size: :default, **attributes)
+        @size = size&.to_sym || :default
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{ "data-size" => size }.merge(defaults))
+      end
+
+      def call
+        tag.div(class: WRAPPER_CLASSES, "data-slot": "native-select-wrapper") do
+          safe_join([ render_element(body: content), chevron ])
+        end
+      end
+
+      private
+
+      def chevron
+        render(Icon::Component.new(
+          "chevron-down",
+          class: ICON_CLASSES,
+          "aria-hidden": "true",
+          "data-slot": "native-select-icon"
+        ))
+      end
+    end
+  end
+end

data/app/components/shadcn/native_select/preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module NativeSelect
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "With Groups", "Disabled" and "Invalid".
+      def groups
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/native_select/previews/default.html.erb

@@ -0,0 +1,9 @@
+<div class="flex items-center gap-4">
+  <% %i[default sm].each do |size| %>
+    <%= render(Shadcn::NativeSelect::Component.new(size:, "aria-label": "Favourite fruit")) do %>
+      <% %w[Apple Banana Blueberry].each do |fruit| %>
+        <%= render(Shadcn::NativeSelect::Option::Component.new(value: fruit.downcase)) { fruit } %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/native_select/previews/groups.html.erb

@@ -0,0 +1,26 @@
+<%# Upstream's "With Groups", "Disabled" and "Invalid". The optgroup is the one
+    thing the styled Select cannot do with a real element — this is a `<select>`,
+    so the browser draws the grouping itself. %>
+<div class="flex items-start gap-4">
+  <%= render(Shadcn::NativeSelect::Component.new("aria-label": "Timezone")) do %>
+    <%= render(Shadcn::NativeSelect::OptGroup::Component.new(label: "Europe")) do %>
+      <% %w[London Paris Berlin].each do |city| %>
+        <%= render(Shadcn::NativeSelect::Option::Component.new(value: city.downcase)) { city } %>
+      <% end %>
+    <% end %>
+    <%= render(Shadcn::NativeSelect::OptGroup::Component.new(label: "Americas")) do %>
+      <% %w[Toronto Chicago].each do |city| %>
+        <%= render(Shadcn::NativeSelect::Option::Component.new(value: city.downcase)) { city } %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render(Shadcn::NativeSelect::Component.new("aria-label": "Disabled", disabled: true)) do %>
+    <%= render(Shadcn::NativeSelect::Option::Component.new(value: "one")) { "Not available" } %>
+  <% end %>
+
+  <%= render(Shadcn::NativeSelect::Component.new("aria-label": "Invalid", "aria-invalid": "true")) do %>
+    <%= render(Shadcn::NativeSelect::Option::Component.new(value: "")) { "Pick one" } %>
+    <%= render(Shadcn::NativeSelect::Option::Component.new(value: "one")) { "One" } %>
+  <% end %>
+</div>

data/app/components/shadcn/native_select.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the NativeSelect family that are just an element with a
+  # `data-slot` and a fixed set of classes. Anything with variants, slots or
+  # markup of its own keeps its own `component.rb`.
+  module NativeSelect
+    extend Parts
+
+    part :opt_group, tag: :optgroup, slot: "native-select-optgroup",
+                     classes: "bg-[Canvas] text-[CanvasText]"
+
+    part :option, tag: :option, slot: "native-select-option",
+                  classes: "bg-[Canvas] text-[CanvasText]"
+  end
+end

data/app/components/shadcn/navigation_menu/component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module NavigationMenu
+    # Port of registry/new-york-v4/ui/navigation-menu.tsx, whose behaviour is
+    # Radix's `NavigationMenu` — 1,403 lines against shadcn's 168, vendored at
+    # `vendor/radix/ui/navigation-menu.tsx`.
+    #
+    # **`data-viewport` is always `false` here, and that is the decision this
+    # port turns on.** Upstream's default renders every panel into one shared
+    # box that animates between their sizes — measured on the live demo, the
+    # content's parent is `navigation-menu-viewport`, which means React has
+    # moved it there through a portal. Nothing is portalled in this gem, for the
+    # reason in decisions/02-javascript.md, so that mode cannot be reproduced
+    # without giving up the rule every other component here was built on.
+    #
+    # `viewport={false}` is not a workaround: it is a configuration shadcn
+    # supports and ships classes for, and in it each panel stays inside its own
+    # item with its own border, background and shadow. See
+    # features/navigation-menu.md.
+    class Component < ApplicationViewComponent
+      slot_name :"navigation-menu"
+
+      style do
+        base {
+          "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center"
+        }
+      end
+
+      attr_reader :delay_duration, :skip_delay_duration
+
+      # Radix's own defaults (navigation-menu.tsx:136-137). `skip_delay_duration`
+      # is the grace period after a panel closes in which the next one opens at
+      # once — it is what stops a menu feeling sticky when you sweep across it.
+      def initialize(delay_duration: 200, skip_delay_duration: 300, **attributes)
+        @delay_duration = delay_duration
+        @skip_delay_duration = skip_delay_duration
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          "data-viewport" => "false",
+          "data-controller" => "shadcn--navigation-menu",
+          "data-shadcn--navigation-menu-delay-value" => delay_duration,
+          "data-shadcn--navigation-menu-skip-delay-value" => skip_delay_duration
+        }.merge(defaults))
+      end
+    end
+  end
+end

data/app/components/shadcn/navigation_menu/content/component.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module NavigationMenu
+    module Content
+      # A panel. It stays inside its own item — see the root for why — so every
+      # class here that reads `group-data-[viewport=false]/navigation-menu:` is
+      # the one doing the work: the border, the surface, the shadow and the
+      # zoom are all in that half of the string.
+      #
+      # `data-motion` is the direction the panel arrives from, which the
+      # controller sets by comparing the item you left with the one you reached.
+      class Component < ApplicationViewComponent
+        slot_name :"navigation-menu-content"
+
+        style do
+          base {
+            "top-0 left-0 w-full p-2 pr-2.5 " \
+            "data-[motion=from-end]:slide-in-from-right-52 " \
+            "data-[motion=from-start]:slide-in-from-left-52 " \
+            "data-[motion=to-end]:slide-out-to-right-52 " \
+            "data-[motion=to-start]:slide-out-to-left-52 " \
+            "data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in " \
+            "data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out " \
+            "md:absolute md:w-auto " \
+            "group-data-[viewport=false]/navigation-menu:top-full " \
+            "group-data-[viewport=false]/navigation-menu:mt-1.5 " \
+            "group-data-[viewport=false]/navigation-menu:overflow-hidden " \
+            "group-data-[viewport=false]/navigation-menu:rounded-md " \
+            "group-data-[viewport=false]/navigation-menu:border " \
+            "group-data-[viewport=false]/navigation-menu:bg-popover " \
+            "group-data-[viewport=false]/navigation-menu:text-popover-foreground " \
+            "group-data-[viewport=false]/navigation-menu:shadow " \
+            "group-data-[viewport=false]/navigation-menu:duration-200 " \
+            "**:data-[slot=navigation-menu-link]:focus:ring-0 " \
+            "**:data-[slot=navigation-menu-link]:focus:outline-none " \
+            "group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out " \
+            "group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 " \
+            "group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 " \
+            "group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in " \
+            "group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 " \
+            "group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95"
+          }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            hidden: true,
+            "data-state" => "closed",
+            "data-shadcn--navigation-menu-target" => "content",
+            "data-action" => "pointerenter->shadcn--navigation-menu#pointerEnter " \
+                             "pointerleave->shadcn--navigation-menu#pointerLeave"
+          }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/navigation_menu/preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module NavigationMenu
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/navigation_menu/previews/default.html.erb

@@ -0,0 +1,49 @@
+<%# Upstream's example, in the one configuration this port reproduces: each
+    panel stays inside its own item rather than being moved into a shared
+    viewport. shadcn supports both and ships the classes for this one — see
+    `features/navigation-menu.md` for why the other cannot be done here.
+
+    Three items so the panels have somewhere to slide *from*: `data-motion` is
+    computed by comparing the item you left with the one you reached, and with
+    two the direction is the same either way. The third item is a plain link,
+    which is what `Trigger::Component.new.css_classes` is for — upstream
+    exports the same string as `navigationMenuTriggerStyle`. %>
+<div class="flex h-72 items-start justify-center pt-6">
+  <%= render(Shadcn::NavigationMenu::Component.new) do %>
+    <%= render(Shadcn::NavigationMenu::List::Component.new) do %>
+      <% {
+           "Getting started" => [
+             [ "Introduction", "Re-usable components built with Radix and Tailwind." ],
+             [ "Installation", "How to install dependencies and structure your app." ]
+           ],
+           "Components" => [
+             [ "Accordion", "A vertically stacked set of interactive headings." ],
+             [ "Dialog", "A window overlaid on the primary window." ]
+           ]
+         }.each do |label, links| %>
+        <%= render(Shadcn::NavigationMenu::Item::Component.new) do %>
+          <%= render(Shadcn::NavigationMenu::Trigger::Component.new) { label } %>
+          <%= render(Shadcn::NavigationMenu::Content::Component.new(class: "md:w-[400px]")) do %>
+            <ul class="grid gap-1">
+              <% links.each do |title, blurb| %>
+                <li>
+                  <%= render(Shadcn::NavigationMenu::Link::Component.new(as: :a, href: "#")) do %>
+                    <div class="text-sm leading-none font-medium"><%= title %></div>
+                    <p class="text-sm leading-snug text-muted-foreground"><%= blurb %></p>
+                  <% end %>
+                </li>
+              <% end %>
+            </ul>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <%= render(Shadcn::NavigationMenu::Item::Component.new) do %>
+        <%= render(Shadcn::NavigationMenu::Link::Component.new(
+              as: :a, href: "#",
+              class: Shadcn::NavigationMenu::Trigger::Component.new.css_classes
+            )) { "Documentation" } %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/shadcn/navigation_menu/trigger/component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module NavigationMenu
+    module Trigger
+      # The button that opens a panel. Its classes are exported upstream as
+      # `navigationMenuTriggerStyle` so a plain link can borrow them; the same
+      # is available here as `Component.new.css_classes`, which is how the
+      # sidebar preview borrows the menu button's.
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"navigation-menu-trigger"
+
+        style do
+          base {
+            "group inline-flex h-9 w-max items-center justify-center rounded-md " \
+            "bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] " \
+            "outline-none hover:bg-accent hover:text-accent-foreground " \
+            "focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] " \
+            "focus-visible:ring-ring/50 focus-visible:outline-1 " \
+            "disabled:pointer-events-none disabled:opacity-50 " \
+            "data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground " \
+            "data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+          }
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            "data-state" => "closed",
+            "aria-expanded" => "false",
+            "data-shadcn--navigation-menu-target" => "trigger",
+            "data-action" => "pointerenter->shadcn--navigation-menu#pointerEnter " \
+                             "pointerleave->shadcn--navigation-menu#pointerLeave " \
+                             "click->shadcn--navigation-menu#toggle " \
+                             "keydown->shadcn--navigation-menu#keydown"
+          }.merge(defaults))
+        end
+
+        # The chevron is upstream's, and so is the space before it: shadcn
+        # writes `{children}{" "}` rather than a gap utility (navigation-menu.tsx:76).
+        def call
+          render_element(
+            body: safe_join([
+              content,
+              " ",
+              render(Shadcn::Icon::Component.new(
+                "chevron-down",
+                class: "relative top-[1px] ml-1 size-3 transition duration-300 " \
+                       "group-data-[state=open]:rotate-180",
+                "aria-hidden": true
+              ))
+            ])
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/navigation_menu.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the NavigationMenu family that are an element with a
+  # `data-slot` and a fixed set of classes.
+  module NavigationMenu
+    extend Parts
+
+    part :list, slot: "navigation-menu-list", tag: :ul,
+                classes: "group flex flex-1 list-none items-center justify-center gap-1"
+
+    part :item, slot: "navigation-menu-item", tag: :li, classes: "relative"
+
+    # The rows inside a panel. `data-active` is the caller's — this is a nav, so
+    # which link is current is the application's business, not the menu's.
+    part :link, slot: "navigation-menu-link",
+                classes: "flex flex-col gap-1 rounded-sm p-2 text-sm transition-all " \
+                         "outline-none hover:bg-accent hover:text-accent-foreground " \
+                         "focus:bg-accent focus:text-accent-foreground " \
+                         "focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+                         "focus-visible:outline-1 data-[active=true]:bg-accent/50 " \
+                         "data-[active=true]:text-accent-foreground " \
+                         "data-[active=true]:hover:bg-accent " \
+                         "data-[active=true]:focus:bg-accent " \
+                         "[&_svg:not([class*='size-'])]:size-4 " \
+                         "[&_svg:not([class*='text-'])]:text-muted-foreground"
+  end
+end

data/app/components/shadcn/pagination/component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Pagination
+    # Port of registry/new-york-v4/ui/pagination.tsx
+    class Component < ApplicationViewComponent
+      default_tag :nav
+      slot_name :pagination
+
+      style do
+        base { "mx-auto flex w-full justify-center" }
+      end
+
+      def element_attributes(**defaults)
+        super(**{ role: "navigation", "aria-label" => shadcn_t("pagination.label") }.merge(defaults))
+      end
+    end
+  end
+end

data/app/components/shadcn/pagination/ellipsis/component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Pagination
+    module Ellipsis
+      # PaginationEllipsis
+      class Component < ApplicationViewComponent
+        default_tag :span
+        slot_name :"pagination-ellipsis"
+
+        style do
+          base { "flex size-9 items-center justify-center" }
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "aria-hidden" => true }.merge(defaults))
+        end
+
+        def call
+          render_element(body: safe_join([
+            render(Icon::Component.new("more-horizontal", class: "size-4")),
+            tag.span(shadcn_t("pagination.more"), class: "sr-only")
+          ]))
+        end
+      end
+    end
+  end
+end