poetry-ui 0.0.2

data/app/components/poetry/ui/file_input/style.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module FileInput
+      # Utility-only (the Separator/Spinner rule): the input variant wears
+      # the Input component's own chrome; the dropzone is structural
+      # utilities on semantic tokens, with the controller's data-dragging /
+      # data-populated (on the ROOT) driving the zone's states through
+      # group-data variants. data-slot selectors are the restyle seam.
+      class Style < Poetry::Core::Style
+        base "group/file-input flex w-full min-w-0 flex-col gap-2"
+
+        element :dropzone,
+                "flex min-h-32 w-full cursor-pointer flex-col items-center justify-center gap-1.5 " \
+                "rounded-lg border border-dashed border-input bg-transparent px-6 py-8 text-center " \
+                "transition-colors outline-none hover:bg-accent/30 " \
+                "has-focus-visible:border-ring has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50 " \
+                "group-data-[dragging]/file-input:border-primary " \
+                "group-data-[dragging]/file-input:bg-accent/40"
+        element :dropzone_disabled, "pointer-events-none cursor-not-allowed opacity-50"
+        element :icon, "size-5 text-muted-foreground"
+        element :prompt, "text-sm font-medium"
+        element :hint, "text-xs text-muted-foreground"
+        element :list, "flex flex-col gap-1 text-sm empty:hidden " \
+                       "[&>li]:flex [&>li]:items-baseline [&>li]:justify-between [&>li]:gap-4 " \
+                       "[&>li]:rounded-md [&>li]:border [&>li]:px-3 [&>li]:py-1.5 " \
+                       "[&_[data-slot=file-input-item-size]]:text-xs " \
+                       "[&_[data-slot=file-input-item-size]]:text-muted-foreground"
+        element :clear, "self-start text-sm font-medium text-muted-foreground underline-offset-4 " \
+                        "hover:text-foreground hover:underline"
+      end
+    end
+  end
+end

data/app/components/poetry/ui/hover_card/component.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div, **root_attributes.to_attributes) do %>
+  <%= trigger %>
+  <%= content_tag(:div, **Poetry::Core::HTML::Attributes.new(content_attributes).to_attributes) do %>
+    <%= defer ? render(Poetry::Ui::Deferred::Component.new(src: defer)) { content } : content %>
+  <% end %>
+<% end %>

data/app/components/poetry/ui/hover_card/component.rb

@@ -0,0 +1,201 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    # The HoverCard family - the pointer-hover link preview.
+    module HoverCard
+      # The placement vocabularies - shared with every popup surface.
+      SIDES = Poetry::Ui::PopperConsumer::SIDES
+      # The closed vocabulary for the align axis.
+      ALIGNS = Poetry::Ui::PopperConsumer::ALIGNS
+
+      # A rich preview that opens when a pointer hovers a LINK - for
+      # sighted pointer users, BY DESIGN not an interaction path. Focus
+      # never moves into the card, and it presents NO aria surface (no
+      # haspopup/expanded/describedby, role-less content): advertising a
+      # keyboard-unreachable surface to assistive technology is worse
+      # than silence.
+      #
+      # THE REACHABLE-ELSEWHERE RULE (non-negotiable): everything in a
+      # hover card must exist at the trigger link's destination - the
+      # trigger stays an <a href> because it is simultaneously the no-JS
+      # fallback, the touch path, and the keyboard path.
+      #
+      # @example A profile preview behind a real link
+      #   render Poetry::Ui::HoverCard::Component.new do |card|
+      #     card.with_trigger(href: "/users/nextjs") { "@nextjs" }
+      #     "Joined December 2021."
+      #   end
+      class Component < Poetry::Core::Component
+        include Poetry::Ui::ComposableTrigger
+        include Poetry::Ui::PopperConsumer
+
+        # Projected into the registry, llms.txt, and the agent surface.
+        AGENT_RULES = [
+          ComposableTrigger::AGENT_RULE,
+          "Use poetry_hover_card - never hand-roll hover-div previews.",
+          "THE REACHABLE-ELSEWHERE RULE (non-negotiable): every piece of information in a hover card " \
+          "MUST exist at the trigger link's destination (or another keyboard/touch-reachable surface). " \
+          "The card is pointer-only enrichment - keyboard and touch users never see inside it.",
+          "The trigger must be a REAL link with a real href - it is the fallback, the touch path, and " \
+          "the keyboard path all at once. For a button LOOK, pass variant:/size: (renders through " \
+          "Button, still an <a> via href:) - never swap the tag to :button.",
+          "NO interactive elements inside the card - they get tabindex=-1 stripped and become " \
+          "pointer-only traps. Actions belong in a Popover or at the destination.",
+          "Don't add aria-expanded/haspopup to the trigger - advertising an unreachable surface is " \
+          "worse than silence.",
+          "Never use HoverCard for hints (Tooltip) or for content users act on (Popover).",
+          "Prefer defer: for expensive previews - a lazy turbo-frame that fetches on first open."
+        ].freeze
+
+        # The slots before_render enforces, stated statically for render-free checks.
+        REQUIRED_SLOTS = { trigger: "the enriched link" }.freeze
+
+        renders_one :trigger,
+                    doc: "The enriched LINK: a real navigable <a> - THE no-JS fallback. tag: passthrough exists but " \
+                         "change it knowingly (an <a> is the contract's fallback story). NO " \
+                         "aria-haspopup/expanded/describedby - the card is invisible to the accessibility tree on " \
+                         "purpose. Built as a lazy anatomy part (rendered at render time, not at with_trigger " \
+                         "time). variant:/size: route through Button::Component - Button's href-implies-anchor " \
+                         "keeps the trigger a REAL <a> wearing button styling, so the reachable-elsewhere contract " \
+                         "holds.",
+                    renders: lambda { |href: nil, tag: :a, **options, &block|
+                      @trigger_href = href
+                      attrs = {
+                        "id" => trigger_id, "data-slot" => "hover-card-trigger"
+                      }.merge(stimulus_attributes_for(:trigger))
+                      # Trigger state: bare data-popup-open while open, NO attribute
+                      # while closed (absence IS the state).
+                      attrs["data-popup-open"] = "" if open
+                      next composed_trigger(attrs, options, &block) if options[:compose]
+                      if options.key?(:variant) || options.key?(:size)
+                        next Button::Component.new(href: href, **attrs, **options, &block)
+                      end
+
+                      attrs["href"] = href if href.present?
+                      Trigger.new(tag_name: tag, attributes: Poetry::Core::HTML::Attributes.merged(attrs, options))
+                    }
+
+        use_stimulus do
+          on :root do
+            controller :hover_card do
+              register
+              value :open
+              value :open_delay
+              value :close_delay
+            end
+            controller :popper do
+              register
+              value :side
+              value :align
+              value :side_offset
+              value :align_offset
+              value :avoid_collisions
+            end
+          end
+          # The trigger handlers: pointerenter/leave pair
+          # timers (touch excluded), focus opens immediately / blur closes,
+          # and the touchstart guard (a tap navigates, never focus-opens).
+          on :trigger do
+            controller :hover_card do
+              action :pointer_enter, on: :pointerenter
+              action :pointer_leave, on: :pointerleave
+              action :focus_open, on: :focus
+              action :blur_close, on: :blur
+              action :touch_guard, on: :touchstart
+            end
+            controller(:popper) { target :anchor }
+          end
+          on :content do
+            controller(:popper) { target :content }
+          end
+        end
+
+        option :open, :boolean, default: false, doc: "Renders the card already open on page load."
+        option :defer, :string,
+               doc: "Defer the card body to a lazy turbo-frame. The panel is hidden until hover, so the fetch fires " \
+                    "on first open for free; the component block (if any) becomes the frame's placeholder."
+        option :open_delay, :integer, default: 600, doc: "Hover-intent delay in ms before the card opens."
+        option :close_delay, :integer, default: 300,
+                                       doc: "Close-grace window in ms over the trigger+content pair."
+        # Placement defaults: bottom / center, 4px side offset.
+        popper_placement_options(side: :bottom, side_offset: 4)
+        option :content_class, :string,
+               doc: "The panel's class merge seam - e.g. content_class: \"w-80\" widens the card."
+
+        part "hover-card", "Root wrapper around the trigger link and the panel"
+        part "hover-card-trigger", "The enriched link itself - simultaneously the no-JS " \
+                                   "fallback, the touch path, and the keyboard path",
+             states: {
+               "data-popup-open" => "bare while the card is open; absent while closed " \
+                                    "(absence IS the closed state)"
+             }
+        part "hover-card-content", "The role-less preview panel (invisible to AT on purpose) - " \
+                                   "positioning, animation, and the open state ride here",
+             states: {
+               "data-open" => "card is open (the controller flips the pair at runtime)",
+               "data-closed" => "card is closed (the server-rendered state; hidden rides along)",
+               "data-side" => { condition: "always - the side (initial placement, re-resolved " \
+                                           "live by popper after flip)",
+                                values: SIDES.map(&:to_s) },
+               "data-align" => { condition: "always - the alignment (re-resolved live by popper)",
+                                 values: ALIGNS.map(&:to_s) }
+             },
+             vars: Poetry::Ui::PopperConsumer.content_vars
+
+        # Enforces the required trigger; warns when it has no href.
+        # @api private
+        def before_render
+          raise ArgumentError, "HoverCard requires with_trigger (the enriched link)" unless trigger?
+
+          return if @trigger_href.present?
+
+          # Lint-level warning, not an error (anchors-without-href exist in
+          # legacy hosts): a trigger without a real destination defeats the
+          # reachable-elsewhere contract.
+          Rails.logger&.warn(
+            "poetry HoverCard: trigger has no href - the link IS the keyboard/touch/no-JS path " \
+            "(the reachable-elsewhere rule)"
+          )
+        end
+
+        # The preview panel's attributes.
+        # @api private
+        def content_attributes
+          attrs = {
+            "id" => content_id,
+            "data-slot" => "hover-card-content", (open ? "data-open" : "data-closed") => "",
+            # Initial placement, re-resolved live by popper on open.
+            "data-side" => side, "data-align" => align,
+            "class" => css(:content, class: content_class)
+          }.merge(stimulus_attributes_for(:content))
+          attrs["hidden"] = true unless open
+          attrs
+        end
+
+        private :content_attributes
+      end
+
+      # The trigger anatomy part - renders the chosen tag carrying
+      # pre-built wiring. internal_component!: full machinery, no
+      # registry entry (the trigger is anatomy, not a component).
+      #
+      # @api private
+      class Trigger < Poetry::Core::Component
+        internal_component!
+
+        # Carries pre-built wiring only. (@attributes is Component's
+        # ActiveModel storage - the wiring rides its own ivar.)
+        def initialize(tag_name:, attributes:)
+          super({})
+          @tag_name = tag_name
+          @trigger_attributes = attributes
+        end
+
+        def call
+          content_tag(@tag_name, content, @trigger_attributes)
+        end
+      end
+    end
+  end
+end

data/app/components/poetry/ui/hover_card/preview.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module HoverCard
+      # The HoverCard preview matrix: the ported hover-card-demo profile
+      # preview (the @nextjs card, w-80 override), the server-pinned open
+      # state, a placement sample, and custom delays. Every preview's card
+      # content is reachable at the trigger's href - the
+      # reachable-elsewhere audit runs against real destinations.
+      class Preview < Poetry::Core::Preview::Base
+        # The hover-card-demo port: a real profile link enriched with the
+        # profile preview. The trigger text is the link; the card is pure
+        # enhancement over navigation.
+        def default
+          profile_example
+        end
+
+        # Server-pinned open (controllable-state; the controller
+        # reconciles the layer + the tabindex strip on connect).
+        def open
+          profile_example(open: true)
+        end
+
+        # Placement sample (data-side re-resolves live on collision).
+        def side_right
+          render_component(side: :right, align: :start) do |card|
+            card.with_trigger(href: "https://github.com/vercel") { "@vercel" }
+            "Develop. Preview. Ship."
+          end
+        end
+
+        # Snappier delays for preview-dense surfaces (the docs recommend
+        # keeping open_delay >= ~300ms - accidental opens while mousing
+        # across text feel broken).
+        def fast
+          render_component(open_delay: 300, close_delay: 150) do |card|
+            card.with_trigger(href: "https://github.com/rails") { "@rails" }
+            "Ruby on Rails - the full-stack web framework."
+          end
+        end
+
+        private
+
+        def profile_example(**)
+          render_component(content_class: "w-80", **) do |card|
+            card.with_trigger(href: "https://github.com/nextjs", class: "text-sm font-medium underline-offset-4 hover:underline") { "@nextjs" }
+            # No text size here - the card's type scale is theme-owned
+            # (.cn-hover-card-content; mira/lyra run text-xs/relaxed).
+            tag.div(class: "flex flex-col gap-1") do
+              tag.h4("@nextjs", class: "font-semibold") +
+                tag.p("The React Framework - created and maintained by @vercel.") +
+                tag.div("Joined December 2021", class: "text-xs text-muted-foreground")
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/poetry/ui/hover_card/style.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module HoverCard
+      # Re-expressed through the cn-* theme layer. One element: the
+      # preview panel on the popover token scheme; the origin class binds
+      # through tokens/aliases.css and stays inline. Width is theme-side
+      # (mira/rhea widen to w-72; every fragment owns it) -
+      # caller w-* classes still win from the utilities layer.
+      class Style < Poetry::Core::Style
+        element :content, "cn-hover-card-content z-50 " \
+                          "origin-(--transform-origin) outline-hidden"
+      end
+    end
+  end
+end

data/app/components/poetry/ui/icon/component.rb

@@ -0,0 +1,127 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    # The Icon family - inline SVG icons from the configured icon set.
+    module Icon
+      # The Icon component: template-less, rendering an icon's vendored,
+      # pre-sanitized inner markup from the configured icon set
+      # (`config.icon_library`, Lucide by default via poetry-lucide;
+      # override per render with `library:`).
+      #
+      # The ARIA contract:
+      # - `label:` given  -> standalone/informative: role="img" + aria-label
+      # - no `label:`     -> decorative: aria-hidden="true" + focusable="false"
+      #
+      # @example A decorative icon inside a labeled control
+      #   render Poetry::Ui::Icon::Component.new(name: :plus)
+      class Component < Poetry::Core::Component
+        # Projected into the registry, llms.txt, and the agent surface.
+        AGENT_RULES = [
+          "Icons are decorative by default (aria-hidden); pass label: when the icon stands alone.",
+          "Never inline raw <svg> markup where an icon exists - use poetry_icon."
+        ].freeze
+
+        option :name, :symbol, required: true, format: :"icon-name",
+                               doc: "The icon's name in the active set. format: :\"icon-name\" is the " \
+                                    "machine-readable value contract: the registry carries it, and literal names are " \
+                                    "validated against the icon set statically - a misspelled name is caught before " \
+                                    "it can crash a render."
+        option :label, :string,
+               doc: "The accessible name - given, the icon is standalone (role=img); absent, it is decorative " \
+                    "(aria-hidden)."
+        option :library, :symbol, doc: "Per-render icon set override (defaults to config.icon_library)."
+
+        validate :icon_must_exist
+
+        part "icon", "The <svg> root itself - the vendored icon markup renders inside; " \
+                     "ARIA (label: vs decorative) rides here"
+
+        # Renders the <svg> with the icon's inner markup.
+        # @api private
+        def call
+          # Vendored + sanitized at vendor time (the fetch pipeline) - the
+          # inner markup is trusted by construction; render never parses.
+          content_tag(:svg, resolved_markup.html_safe, **svg_attributes.to_attributes)
+        end
+
+        private
+
+        def icon_set
+          Poetry::Core::Icons.set(library)
+        end
+
+        # The missing-icon policy. poetry check catches literal
+        # names statically; a DYNAMIC name (a DB value, a user setting) only
+        # surfaces here - and a bad one should not 500 production. Dev/test
+        # keep the raise (config.raise_on_missing_icon nil = auto via
+        # Rails.env.local?); elsewhere the configured fallback renders and
+        # config.on_missing_icon fires (per render - dedup is the app's
+        # concern). A nil or itself-missing fallback re-raises the original.
+        def resolved_markup
+          icon_set.fetch(name)
+        rescue Poetry::Core::IconNotFound => e
+          raise if raise_on_missing_icon?
+
+          config = self.class.config
+          config.on_missing_icon&.call(name: name, library: library || config.icon_library, error: e)
+          fallback = config.icon_fallback
+          raise if fallback.nil?
+
+          begin
+            icon_set.fetch(fallback)
+          rescue Poetry::Core::IconNotFound
+            raise e
+          end
+        end
+
+        def raise_on_missing_icon?
+          configured = self.class.config.raise_on_missing_icon
+          return configured unless configured.nil?
+
+          !defined?(Rails.env) || Rails.env.local?
+        end
+
+        def icon_must_exist
+          return if name.blank? || icon_set.include?(name)
+
+          suggestion = Poetry::Core::Icons.suggest(name, icon_set.names)
+          hint = suggestion ? " - did you mean #{suggestion.to_sym.inspect}?" : ""
+          errors.add(:name, "unknown icon #{name.inspect} in the " \
+                            "#{library || self.class.config.icon_library} set#{hint}")
+        end
+
+        def svg_attributes
+          html_attributes.merge_if_not_set(default_svg_attributes.merge(aria_attributes))
+        end
+
+        def default_svg_attributes
+          {
+            "xmlns" => "http://www.w3.org/2000/svg",
+            # Lucide's intrinsic box. Without it a standalone icon fills its
+            # container (a standalone icon once rendered 352px wide);
+            # inside components the [&_svg]:size-4 rules still win
+            # (CSS beats presentation attributes).
+            "width" => "24",
+            "height" => "24",
+            "viewBox" => "0 0 24 24",
+            "fill" => "none",
+            "stroke" => "currentColor",
+            "stroke-width" => "2",
+            "stroke-linecap" => "round",
+            "stroke-linejoin" => "round",
+            "data-slot" => "icon"
+          }.merge(component_data_attributes)
+        end
+
+        def aria_attributes
+          if label.present?
+            { "role" => "img", "aria-label" => label }
+          else
+            { "aria-hidden" => "true", "focusable" => "false" }
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/poetry/ui/icon/preview.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module Icon
+      class Preview < Poetry::Core::Preview::Base
+        def decorative
+          render_component(name: :plus)
+        end
+
+        def standalone_labeled
+          render_component(name: :trash, label: "Delete")
+        end
+
+        def chevron
+          render_component(name: :"chevron-right")
+        end
+      end
+    end
+  end
+end

data/app/components/poetry/ui/input/component.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    # The Input family - the single-line native text control.
+    module Input
+      # The text Input - the styled native <input>. Template-less; error
+      # state is carried by aria-invalid (set by the Field/FormBuilder from
+      # model errors), which the classes style directly - state IS the
+      # accessibility attribute, never a parallel class.
+      #
+      # @example An email field
+      #   render Poetry::Ui::Input::Component.new(type: "email", name: "email",
+      #                                           placeholder: "you@example.com")
+      class Component < Poetry::Core::Component
+        # The mask controller identifier: masking is an Input OPTION,
+        # not a separate component.
+        MASK = %i[poetry core mask].freeze
+
+        # Projected into the registry, llms.txt, and the agent surface.
+        AGENT_RULES = [
+          "Inside a form, never render Input directly - use the FormBuilder's field (it wires ids, errors, and aria).",
+          "Error styling comes from aria-invalid, set from model errors - never hand-toggle error classes.",
+          "mask: formats as the user types ('(999) 999-9999'; 9=digit, a=letter, A=upper, " \
+          "*=alnum, #=sign/digit, \\\\ escapes, ? makes the rest optional) - the MASKED text " \
+          "submits; read data-raw for the bare value."
+        ].freeze
+
+        option :type, :string, default: "text", doc: "The native type attribute (text, email, password, file, ...)."
+        option :name, :string, doc: "The submitted param name."
+        option :value, :string, doc: "The current value."
+        option :placeholder, :string, doc: "Native placeholder text - not a substitute for a Label."
+        option :disabled, :boolean, default: false, doc: "Disables the native input."
+        option :invalid, :boolean, default: false,
+                                   doc: "Marks the input aria-invalid - the error skin keys on the attribute."
+        option :mask, :string,
+               doc: "Format-as-you-type mask descriptor ('(999) 999-9999'). Extra knobs (slot char, always-show, " \
+                    "auto-clear) ride Stimulus values via data: - one declarative option covers the common case."
+
+        part "input", "The <input> element itself - no inner anatomy; error state is " \
+                      "aria-invalid (set by Field/FormBuilder), never a parallel class",
+             states: {
+               "data-raw" => "mask: is set - the unmasked value, kept live by the mask " \
+                             "controller (the masked text is what submits)"
+             }
+
+        # Renders the <input> element.
+        # @api private
+        def call
+          tag.input(**root_attributes.to_attributes)
+        end
+
+        # The <input> element's attributes.
+        # @api private
+        def root_attributes
+          attrs = { "type" => type, "data-slot" => "input" }.merge(component_data_attributes)
+          attrs["name"] = name if name.present?
+          attrs["value"] = value if value.present?
+          attrs["placeholder"] = placeholder if placeholder.present?
+          attrs["disabled"] = true if disabled
+          attrs["aria-invalid"] = true if invalid
+          attrs.merge!(mask_attributes) if mask.present?
+          html_attributes.merge_if_not_set(attrs)
+        end
+
+        private
+
+        def mask_attributes
+          attrs = Poetry::Core::HTML::Attributes.new
+          masked = Poetry::Core::Stimulus::Builder.new(MASK, attrs)
+          masked.register_controller
+          masked.with_value(:mask, mask)
+          attrs.to_attributes
+        end
+
+        private :root_attributes
+      end
+    end
+  end
+end

data/app/components/poetry/ui/input/preview.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module Input
+      # The Input preview matrix. Standalone inputs carry an aria-label so
+      # each state is accessible on its own; real forms wire the name via
+      # Field/FormBuilder instead (see the Field previews).
+      class Preview < Poetry::Core::Preview::Base
+        def default
+          render_component(type: "email", name: "email", placeholder: "you@example.com",
+                           "aria-label" => "Email")
+        end
+
+        def with_value
+          render_component(name: "city", value: "Lisbon", "aria-label" => "City")
+        end
+
+        def disabled
+          render_component(name: "plan", value: "Enterprise", disabled: true, "aria-label" => "Plan")
+        end
+
+        def invalid
+          render_component(type: "email", name: "email", value: "not-an-email", invalid: true,
+                           "aria-label" => "Email")
+        end
+
+        def masked
+          render_component(type: "tel", name: "phone", mask: "(999) 999-9999",
+                           placeholder: "(555) 000-0000", "aria-label" => "Phone")
+        end
+      end
+    end
+  end
+end

data/app/components/poetry/ui/input/style.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Poetry
+  module Ui
+    module Input
+      # Re-expressed through the cn-* theme layer: the field chrome
+      # (border, ring, invalid, dark treatments) rides themes/default.css.
+      # Placeholder color is theme-side: rhea's tinted field
+      # surface (bg-input/50) needs a darkened placeholder to hold AA, and
+      # an inline color would beat any theme's (layer order).
+      class Style < Poetry::Core::Style
+        base "cn-input w-full min-w-0 outline-none file:inline-flex file:border-0 " \
+             "file:bg-transparent file:text-foreground disabled:pointer-events-none " \
+             "disabled:cursor-not-allowed disabled:opacity-50"
+      end
+    end
+  end
+end

data/app/components/poetry/ui/input_group/button_preview.html.erb

@@ -0,0 +1,12 @@
+<%# A trailing action inside the field surface. %>
+<div class="w-80 p-4">
+  <%= poetry_label(for_id: "input-group-url", class: "sr-only") { "Page URL" } %>
+  <%= poetry_input_group do %>
+    <%= poetry_input_group_input(id: "input-group-url", name: "url", value: "https://poetry.example") %>
+    <%= poetry_input_group_addon(align: :"inline-end") do %>
+      <%= poetry_input_group_button(size: :"icon-xs", label: "Copy URL") do %>
+        <%= poetry_icon(name: :copy) %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>