shadcn_view_component 0.3.3

data/app/components/shadcn/application_view_component.rb

@@ -0,0 +1,225 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Base class for every ported shadcn/ui component.
+  #
+  # It exists to make the React → ViewComponent mapping mechanical:
+  #
+  #   React                                  Ruby
+  #   ------------------------------------   ---------------------------------------
+  #   cva(base, {variants, defaultVariants})  style { base {} variants {} defaults {} }
+  #   cn(...)                                 TailwindMerge, wired as the style postprocessor
+  #   data-slot="card-header"                 slot_name :"card-header"
+  #   <div {...props} />                      **attributes, splatted through Rails' tag builder
+  #   asChild                                 as: :a / as: :span
+  #
+  # A component that is a single element carrying `data-slot` + classes needs no
+  # template at all: the inherited `#call` renders it. Components whose markup is
+  # richer (an icon, a nested wrapper, an indicator) get a sidecar
+  # `component.html.erb`, which overrides `#call`.
+  class ApplicationViewComponent < ViewComponent::Base
+    include ViewComponentContrib::StyleVariants
+
+    # `cn()`: concatenate, then let tailwind-merge drop conflicting utilities so
+    # that classes passed in by the caller win — exactly like shadcn's helper.
+    style_config.postprocess_with { |classes| ShadcnViewComponent.cn(classes) }
+
+    # Elements that must not be given a block/closing tag.
+    VOID_TAGS = %i[area base br col embed hr img input link meta source track wbr].freeze
+
+    class << self
+      # The element rendered by default, i.e. the tag in the TSX source.
+      def default_tag(value = nil)
+        return @default_tag = value.to_sym if value
+
+        @default_tag ||= superclass.respond_to?(:default_tag) ? superclass.default_tag : :div
+      end
+
+      # The `data-slot` value shadcn stamps on this part. Inherited, so that
+      # specialisations such as PaginationPrevious keep PaginationLink's slot.
+      def slot_name(value = nil)
+        return @slot_name = value.to_s if value
+        return @slot_name if defined?(@slot_name)
+
+        @slot_name = superclass.respond_to?(:slot_name) ? superclass.slot_name : nil
+      end
+    end
+
+    attr_reader :attributes
+
+    # @param as [Symbol, String, nil] render a different element (shadcn's `asChild`)
+    # @param attributes [Hash] anything else is forwarded to the element, like `{...props}`
+    def initialize(as: nil, **attributes)
+      @as = as
+      @attributes = attributes
+    end
+
+    def call
+      render_element(body: content)
+    end
+
+    def tag_name
+      (@as || self.class.default_tag).to_sym
+    end
+
+    # Renders the component's root element. `defaults` are the attributes the
+    # component itself contributes; see `#element_attributes` for how they rank
+    # against the caller's.
+    #
+    # The body comes either from a block (templates: `<%= render_element do %>`)
+    # or from `body:` — `#call` passes ViewComponent's already-captured `content`
+    # that way, because re-capturing it here would swallow it.
+    def render_element(body: nil, **defaults, &block)
+      attrs = element_attributes(**defaults)
+      return tag.public_send(tag_name, **attrs) if VOID_TAGS.include?(tag_name)
+
+      content_tag(tag_name, block ? capture(&block) : body, attrs)
+    end
+
+    # The full attribute hash for the root element.
+    #
+    # Precedence, lowest to highest: the `data-slot` marker, then the component's
+    # own `defaults` (what subclasses pass up through `super`), then whatever the
+    # caller gave us. The caller winning is the point — it is what `{...props}`
+    # does in every shadcn component, where the spread comes last.
+    def element_attributes(**defaults)
+      base = { "data-slot" => self.class.slot_name }.compact
+      merged = merge_attributes(base, defaults, attributes)
+      merged["class"] = css_classes(merged.delete("class"))
+      merged.compact
+    end
+
+    # Compiles the cva-equivalent style set. Caller classes go last so
+    # tailwind-merge resolves conflicts in their favour. Parts that carry no
+    # classes of their own still have to pass the caller's through.
+    #
+    # Without caller classes the result depends only on the component class and
+    # its variants, and the style blocks are static once loaded — so it is
+    # computed once. That is not just a saving on the merge: it keeps the
+    # library's own class strings out of tailwind_merge's LRU, which is a fixed
+    # size shared with everything the caller varies.
+    def css_classes(extra = nil)
+      return compile_classes(extra) if extra.present?
+
+      ShadcnViewComponent.class_cache.fetch_or_store([ self.class.name, style_variants ]) do
+        compile_classes(nil)
+      end
+    end
+
+    # Overridden by components that expose variants (button, badge, alert, …).
+    def style_variants
+      {}
+    end
+
+    # The user-visible strings the components render, looked up under
+    # `shadcn_view_component.*` and falling back to the bundled English — so the
+    # gem works untranslated and a host app can override any key.
+    #
+    # The fallback is the `locale: :en` default below, and it has to be there.
+    # This method used to be a bare `I18n.t` while the comment above it already
+    # claimed the English was a default; it was not, and the gem only looked
+    # untranslatable-proof because every app it had been tried in ran in
+    # English. A host running `it` got `I18n::MissingTranslationData` out of a
+    # searchable select — and with `config.i18n.raise_on_missing_translations`,
+    # which the Rails generators turn on in development and test, a raised page
+    # rather than a fallback string.
+    #
+    # A lambda, so the second lookup only happens when the first misses.
+    def shadcn_t(key, **interpolations)
+      full_key = "shadcn_view_component.#{key}"
+
+      I18n.t(full_key, **interpolations,
+             default: ->(*) { I18n.t(full_key, locale: :en, **interpolations) })
+    end
+
+    # Combines inline styles without dropping whatever the caller passed.
+    def merged_style(*declarations)
+      [ attributes[:style], *declarations ].compact.reject(&:empty?).join(";").presence
+    end
+
+    # Radix's context-only roots (Dialog, Popover, Select, …) render no element
+    # at all. We need somewhere to hang the Stimulus controller, so those roots
+    # emit a wrapper that is invisible to layout.
+    CONTENTS_STYLE = "display:contents"
+
+    private
+
+    def compile_classes(extra)
+      compiled = style(**style_variants, class: extra)
+      (compiled || ShadcnViewComponent.cn(extra)).presence
+    end
+
+    # Shallow merge, with three exceptions that are combined rather than
+    # replaced: `data:`/`aria:` hashes, `class`, and `data-action` — Stimulus
+    # reads a space-separated list, so an action passed in by the caller adds to
+    # the component's own instead of silently replacing it.
+    #
+    # Keys are normalised to strings so `class:` and `"class"` cannot end up as
+    # two separate attributes.
+    def merge_attributes(*hashes)
+      hashes.compact.map { |hash| normalize_attributes(hash) }.reduce({}) do |acc, hash|
+        hash.each do |name, value|
+          case name
+          when "data", "aria"
+            acc[name] = (acc[name] || {}).merge(value || {})
+          when "class"
+            acc["class"] = [ acc["class"], value ].compact
+          when "data-action"
+            append_action(acc, value)
+          when "data-controller"
+            append_controller(acc, value)
+          else
+            acc[name] = value
+          end
+        end
+        acc
+      end
+    end
+
+    # Stringifies the keys and lifts `data: { action: … }` — the idiomatic Rails
+    # spelling — out to a top-level `data-action`, so both spellings reach the
+    # concatenation rule above. Without this the two forms land in different
+    # branches and the element ends up with the attribute twice, which is invalid
+    # HTML: the browser keeps the first and the other action never fires.
+    def normalize_attributes(hash)
+      hash.each_with_object({}) do |(key, value), normalized|
+        name = key.to_s
+
+        if name == "data" && value.is_a?(Hash)
+          data = value.transform_keys(&:to_s)
+          action = data.delete("action")
+          controller = data.delete("controller")
+
+          append_action(normalized, action) if action
+          append_controller(normalized, controller) if controller
+          normalized["data"] = data unless data.empty?
+        elsif name == "data-action"
+          append_action(normalized, value)
+        elsif name == "data-controller"
+          append_controller(normalized, value)
+        else
+          normalized[name] = value
+        end
+      end
+    end
+
+    def append_action(hash, value)
+      hash["data-action"] = [ hash["data-action"], value ].compact.join(" ")
+    end
+
+    # The same treatment `data-action` gets, and for the same reason: Stimulus
+    # reads a space-separated list, so a controller a caller attaches has to add
+    # to the component's own rather than replace it.
+    #
+    # This was missed when `data-action` was fixed, and the failure is quieter.
+    # A host writing `data: { controller: "my-thing" }` got two `data-controller`
+    # attributes — invalid HTML, and the browser keeps the first, which is the
+    # component's. So `my-thing` never connected, with nothing logged and the
+    # component still working perfectly. Found in a host app wiring a dependent
+    # select: choosing a client was supposed to reload its locations, and simply
+    # stopped doing so.
+    def append_controller(hash, value)
+      hash["data-controller"] = [ hash["data-controller"], value ].compact.join(" ")
+    end
+  end
+end

data/app/components/shadcn/application_view_component_preview.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Base class for the sidecar `preview.rb` files rendered by Lookbook.
+  class ApplicationViewComponentPreview < ViewComponentContrib::Preview::Base
+    self.abstract_class = true
+  end
+end

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

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module AspectRatio
+    # Port of registry/new-york-v4/ui/aspect-ratio.tsx
+    #
+    # Radix wraps the content in a relatively positioned box whose bottom
+    # padding encodes the ratio, then absolutely positions the slot inside it.
+    class Component < ApplicationViewComponent
+      slot_name :"aspect-ratio"
+
+      attr_reader :ratio
+
+      def initialize(ratio: 1, **attributes)
+        @ratio = ratio
+        super(**attributes)
+      end
+
+      def call
+        wrapper_style = "position:relative;width:100%;padding-bottom:#{100.0 / ratio}%"
+
+        content_tag(:div, style: wrapper_style) do
+          render_element(body: content, style: inner_style)
+        end
+      end
+
+      private
+
+      def inner_style
+        [ attributes[:style], "position:absolute;top:0;right:0;bottom:0;left:0" ].compact.join(";")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module AspectRatio
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Square" and "Portrait", beside the default's 16/9.
+      def ratios
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<div class="w-[420px]">
+  <%= render(Shadcn::AspectRatio::Component.new(ratio: 16.0 / 9, class: "rounded-lg bg-muted")) do %>
+    <div class="flex size-full items-center justify-center text-sm text-foreground/70">16 / 9</div>
+  <% end %>
+</div>

data/app/components/shadcn/aspect_ratio/previews/ratios.html.erb

@@ -0,0 +1,12 @@
+<%# Upstream shows "Square" and "Portrait" as separate examples; here they sit
+    beside the 16/9 of the default so the argument's effect is the difference
+    between them rather than something to remember between pages. %>
+<div class="flex items-start gap-4">
+  <% [[1, "1 / 1"], [3.0 / 4, "3 / 4"], [16.0 / 9, "16 / 9"]].each do |ratio, label| %>
+    <div class="w-[180px]">
+      <%= render(Shadcn::AspectRatio::Component.new(ratio:, class: "rounded-lg bg-muted")) do %>
+        <div class="flex size-full items-center justify-center text-sm text-foreground/70"><%= label %></div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/shadcn/attachment/action/component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Attachment
+    module Action
+      # AttachmentAction — a Button with two different defaults, which is all
+      # upstream changes about it (attachment.tsx:144-159). Subclassed rather
+      # than declared with `part … from:`, because that restamps the slot and
+      # leaves the arguments alone, and these are arguments.
+      class Component < Button::Component
+        slot_name :"attachment-action"
+
+        def initialize(variant: :ghost, size: :"icon-xs", **attributes)
+          super
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Attachment
+    # Port of registry/new-york-v4/ui/attachment.tsx
+    #
+    # `state:` is not a cva variant upstream and is not one here: it is written
+    # as `data-state` and read by selectors on this element and on its children
+    # — `data-[state=idle]:border-dashed` here, and
+    # `group-data-[state=error]/attachment:…` on the media and the description
+    # (attachment.tsx:9 and :49). Only `size` and `orientation` choose classes.
+    class Component < ApplicationViewComponent
+      slot_name :attachment
+
+      style do
+        base {
+          "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap " \
+          "rounded-xl border bg-card text-card-foreground transition-colors " \
+          "focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 " \
+          "data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed"
+        }
+
+        variants {
+          size {
+            default {
+              "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 " \
+              "has-data-[slot=attachment-content]:py-2 " \
+              "has-data-[slot=attachment-media]:p-2"
+            }
+            sm {
+              "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 " \
+              "has-data-[slot=attachment-content]:py-1.5 " \
+              "has-data-[slot=attachment-media]:p-1.5"
+            }
+            xs {
+              "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 " \
+              "has-data-[slot=attachment-content]:py-1 " \
+              "has-data-[slot=attachment-media]:p-1"
+            }
+          }
+
+          orientation {
+            horizontal { "min-w-40 items-center" }
+            vertical { "w-24 flex-col has-data-[slot=attachment-content]:w-30" }
+          }
+        }
+
+        # Upstream's cva declares no `defaultVariants` — the defaults live on the
+        # function's own parameters instead (attachment.tsx:28-30). Same values,
+        # and here there is only one place to put them.
+        defaults { { size: :default, orientation: :horizontal } }
+      end
+
+      attr_reader :state, :size, :orientation
+
+      def initialize(state: :done, size: :default, orientation: :horizontal, **attributes)
+        @state = state&.to_sym || :done
+        @size = size&.to_sym || :default
+        @orientation = orientation&.to_sym || :horizontal
+        super(**attributes)
+      end
+
+      def style_variants
+        { size:, orientation: }
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          "data-state" => state,
+          "data-size" => size,
+          "data-orientation" => orientation
+        }.merge(defaults))
+      end
+    end
+  end
+end

data/app/components/shadcn/attachment/media/component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Attachment
+    module Media
+      # AttachmentMedia — the square thumbnail: an icon, or the file itself.
+      class Component < ApplicationViewComponent
+        slot_name :"attachment-media"
+
+        style do
+          base {
+            "relative flex aspect-square w-10 shrink-0 items-center justify-center " \
+            "overflow-hidden rounded-lg bg-muted text-foreground " \
+            "group-data-[orientation=vertical]/attachment:w-full " \
+            "group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 " \
+            "group-data-[size=xs]/attachment:rounded-md " \
+            "group-data-[state=error]/attachment:bg-destructive/10 " \
+            "group-data-[state=error]/attachment:text-destructive " \
+            "group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! " \
+            "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 " \
+            "group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 " \
+            "group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5"
+          }
+
+          variants {
+            variant {
+              icon { "" }
+              image {
+                "opacity-60 group-data-[state=done]/attachment:opacity-100 " \
+                "group-data-[state=idle]/attachment:opacity-100 " \
+                "*:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
+              }
+            }
+          }
+
+          defaults { { variant: :icon } }
+        end
+
+        attr_reader :variant
+
+        def initialize(variant: :icon, **attributes)
+          @variant = variant&.to_sym || :icon
+          super(**attributes)
+        end
+
+        def style_variants
+          { variant: }
+        end
+
+        def element_attributes(**defaults)
+          super(**{ "data-variant" => variant }.merge(defaults))
+        end
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,80 @@
+<%# Read from upstream's own demo: an attachment is a media square beside a
+    content column of title and description, and the two orientations rearrange
+    exactly that.
+
+    `state:` is the interesting argument. It is not a variant — it picks no
+    classes — it is written as `data-state` and read by selectors on this
+    element and on its children, which is how `error` reaches the description's
+    colour and how `uploading` and `processing` reach the title's `shimmer`.
+    That last one is shadcn's own CSS rather than Tailwind's; see the section at
+    the end of `shadcn.css`.
+
+    The media squares carry a file extension rather than a glyph. `Icon`'s
+    registry holds the eleven icons the *components* need and none of them is a
+    document, and the alternative — inlining lucide paths for a demo — is what
+    the sidebar preview does only because that demo is a copy of upstream's.
+    Recalling an SVG path from memory is the one thing not to do here. %>
+<div class="flex w-[420px] flex-col gap-6">
+  <%= render(Shadcn::Attachment::Component.new) do %>
+    <%= render(Shadcn::Attachment::Media::Component.new) do %>
+      <span class="text-[10px] font-medium">PDF</span>
+    <% end %>
+    <%= render(Shadcn::Attachment::Content::Component.new) do %>
+      <%= render(Shadcn::Attachment::Title::Component.new) { "quarterly-report.pdf" } %>
+      <%= render(Shadcn::Attachment::Description::Component.new) { "PDF · 2.4 MB" } %>
+    <% end %>
+    <%= render(Shadcn::Attachment::Actions::Component.new) do %>
+      <%= render(Shadcn::Attachment::Action::Component.new("aria-label": "Remove")) do %>
+        <%= render(Shadcn::Icon::Component.new("x")) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%# `uploading` and `error` are the two states that change what you see. %>
+  <%= render(Shadcn::Attachment::Component.new(state: :uploading, size: :sm)) do %>
+    <%= render(Shadcn::Attachment::Media::Component.new) do %>
+      <span class="text-[10px] font-medium">TXT</span>
+    <% end %>
+    <%= render(Shadcn::Attachment::Content::Component.new) do %>
+      <%= render(Shadcn::Attachment::Title::Component.new) { "notes.txt" } %>
+      <%= render(Shadcn::Attachment::Description::Component.new) { "Uploading…" } %>
+    <% end %>
+  <% end %>
+
+  <%= render(Shadcn::Attachment::Component.new(state: :error, size: :sm)) do %>
+    <%= render(Shadcn::Attachment::Media::Component.new) do %>
+      <span class="text-[10px] font-medium">ZIP</span>
+    <% end %>
+    <%= render(Shadcn::Attachment::Content::Component.new) do %>
+      <%= render(Shadcn::Attachment::Title::Component.new) { "archive.zip" } %>
+      <%= render(Shadcn::Attachment::Description::Component.new) { "Upload failed" } %>
+    <% end %>
+  <% end %>
+
+  <%# The vertical orientation is what the group scrolls, and the trigger is
+      what makes a whole card clickable — stretched over it at `z-10`, under the
+      actions' `z-20` so a close button still wins.
+
+      Six of them, so the row genuinely overflows and `scroll-fade-x` has
+      something to fade. That utility is driven by a scroll timeline, and it is
+      the one thing on this page a screenshot taken through the suite gets
+      wrong: the harness injects `animation-duration: 0s !important`, which
+      lands both 1ms interpolations on their end value and paints a fade on the
+      leading edge at rest. Measured with the duration handed back —
+      `--scroll-fade-s` is 0 at `scrollLeft: 0` and only the trailing edge
+      fades, which is correct. %>
+  <%= render(Shadcn::Attachment::Group::Component.new) do %>
+    <% [ "workspace.png", "desk-reference.jpg", "office-reference.jpg",
+         "whiteboard.png", "sketch-01.jpg", "sketch-02.jpg" ].each do |name| %>
+      <%= render(Shadcn::Attachment::Component.new(orientation: :vertical)) do %>
+        <%= render(Shadcn::Attachment::Media::Component.new(variant: :image)) do %>
+          <span class="text-[10px] font-medium">IMG</span>
+        <% end %>
+        <%= render(Shadcn::Attachment::Content::Component.new) do %>
+          <%= render(Shadcn::Attachment::Title::Component.new) { name } %>
+        <% end %>
+        <%= render(Shadcn::Attachment::Trigger::Component.new("aria-label": "Open #{name}")) %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Attachment
+    module Trigger
+      # AttachmentTrigger — a transparent button stretched over the whole
+      # attachment, so the card is clickable without nesting a button inside the
+      # actions that already sit on top of it (`attachment-actions` carries
+      # `z-20` against this one's `z-10`).
+      #
+      # Its own file for the `type`: upstream sets `type="button"` only when it
+      # is really a `<button>`, and leaves it off when `asChild` makes it
+      # something else (attachment.tsx:174). `as:` is this gem's `asChild`, so
+      # the same condition is `tag_name == :button`.
+      class Component < ApplicationViewComponent
+        default_tag :button
+        slot_name :"attachment-trigger"
+
+        style do
+          base { "absolute inset-0 z-10 outline-none" }
+        end
+
+        def element_attributes(**defaults)
+          return super(**defaults) if tag_name.to_sym != :button
+
+          super(**{ type: "button" }.merge(defaults))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/attachment.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # The parts of the Attachment 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`.
+  #
+  # `attachment-group` and `attachment-title` reach for three utilities that are
+  # shadcn's own CSS rather than Tailwind's — `scroll-fade-x`, `scrollbar-none`
+  # and `shimmer`. They are defined in `shadcn.css`; see the comment there for
+  # where they were read from and what could not be checked.
+  module Attachment
+    extend Parts
+
+    part :group, slot: "attachment-group",
+                 classes: "flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 " \
+                          "scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 " \
+                          "*:data-[slot=attachment]:flex-none " \
+                          "*:data-[slot=attachment]:snap-start"
+
+    part :content, slot: "attachment-content",
+                   classes: "max-w-full min-w-0 flex-1 leading-tight " \
+                            "group-data-[orientation=vertical]/attachment:px-1"
+
+    part :title, slot: "attachment-title", tag: :span,
+                 classes: "block max-w-full min-w-0 truncate font-medium " \
+                          "group-data-[state=processing]/attachment:shimmer " \
+                          "group-data-[state=uploading]/attachment:shimmer"
+
+    part :description, slot: "attachment-description", tag: :span,
+                       classes: "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground " \
+                                "group-data-[state=error]/attachment:text-destructive/80 " \
+                                "max-w-full"
+
+    part :actions, slot: "attachment-actions",
+                   classes: "relative z-20 flex shrink-0 items-center " \
+                            "group-data-[orientation=vertical]/attachment:absolute " \
+                            "group-data-[orientation=vertical]/attachment:top-3 " \
+                            "group-data-[orientation=vertical]/attachment:right-3 " \
+                            "group-data-[orientation=vertical]/attachment:gap-1"
+  end
+end

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Avatar
+    # Port of registry/new-york-v4/ui/avatar.tsx
+    #
+    # Radix swaps the image for the fallback based on the image's loading state;
+    # the `shadcn--avatar` Stimulus controller does the same here.
+    class Component < ApplicationViewComponent
+      renders_one :image, "Shadcn::Avatar::Image::Component"
+      renders_one :fallback, "Shadcn::Avatar::Fallback::Component"
+      renders_one :badge, "Shadcn::Avatar::Badge::Component"
+
+      default_tag :span
+      slot_name :avatar
+
+      style do
+        base {
+          "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full " \
+          "select-none data-[size=lg]:size-10 data-[size=sm]:size-6"
+        }
+      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,
+          "data-controller" => "shadcn--avatar"
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ image, fallback, badge, content ].compact))
+      end
+    end
+  end
+end