velvetkit 0.1.0.beta

data/registry/app/components/ui/accordion/item.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+class UI::Accordion::Item < UI::Base
+  renders_one :trigger, ->(**opts) {
+    UI::Accordion::Trigger.new(content_id: "ui-accordion-content-#{@uid}", **opts)
+  }
+  renders_one :accordion_content, ->(**opts) {
+    UI::Accordion::Content.new(trigger_id: "ui-accordion-trigger-#{@uid}", **opts)
+  }
+
+  alias_method :with_content, :with_accordion_content
+
+  def initialize(value:, class: nil, **html_attrs)
+    @uid        = SecureRandom.hex(6)
+    @value      = value
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  attr_reader :value
+
+  def set_accordion_context(accordion)
+    @accordion_context = accordion
+  end
+
+  def classes
+    cn("border-b last:border-b-0", @user_class)
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:class] = classes
+    opts[:data]  = {
+      "ui--accordion-target": "item",
+      value: @value,
+      state: "closed"
+    }.merge(opts[:data] || {})
+    opts
+  end
+end

data/registry/app/components/ui/accordion/trigger.html.erb

@@ -0,0 +1 @@
+<h3 class="contents"><%= tag.button(**html_options) do %><%= render(UI::Icon.new(name: "chevron-right", size: :sm, class: "shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90")) %><%= content %><% end %></h3>

data/registry/app/components/ui/accordion/trigger.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+class UI::Accordion::Trigger < UI::Base
+  def initialize(content_id: nil, disabled: false, class: nil, **html_attrs)
+    @content_id = content_id
+    @disabled   = disabled
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn(
+      "group flex w-full items-center gap-3 py-2 text-sm font-medium transition-all hover:underline text-left text-primary",
+      "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 rounded",
+      "disabled:pointer-events-none disabled:opacity-50",
+      UI::Base::FOCUS_RING,
+      @user_class
+    )
+  end
+
+  def trigger_id
+    @html_attrs[:id] || "ui-accordion-trigger-#{SecureRandom.hex(4)}"
+  end
+
+  def html_options
+    opts = @html_attrs.dup
+    opts[:id]               = trigger_id
+    opts[:class]            = classes
+    opts[:type]             = :button
+    opts[:"aria-expanded"]  = "false"
+    opts[:"aria-controls"]  = @content_id if @content_id
+    opts[:"data-ui--accordion-target"] = "trigger"
+    opts[:"data-action"]    = "click->ui--accordion#toggle keydown->ui--accordion#keydown"
+    opts[:disabled]         = true if @disabled
+    opts
+  end
+end

data/registry/app/components/ui/accordion.html.erb

@@ -0,0 +1,7 @@
+<%= tag.div(class: root_classes,
+            data: {
+              controller: "ui--accordion",
+              "ui--accordion-type-value": @type,
+              "ui--accordion-values-value": initial_values
+            }.merge(@html_attrs[:data] || {}),
+            **@html_attrs.except(:data)) do %><% items.each do |item| %><%= item %><% end %><% end %>

data/registry/app/components/ui/accordion.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class UI::Accordion < UI::Base
+  renders_many :items, ->(value:, **opts) {
+    UI::Accordion::Item.new(value: value, **opts).tap { |i| i.set_accordion_context(self) }
+  }
+
+  def initialize(type: :single, collapsible: true, default_value: nil,
+                 class: nil, **html_attrs)
+    @type          = type
+    @collapsible   = collapsible
+    @default_value = default_value
+    @user_class    = binding.local_variable_get(:class)
+    @html_attrs    = html_attrs
+    @id            = @html_attrs[:id] || "ui-accordion-#{SecureRandom.hex(4)}"
+    @html_attrs[:id] = @id
+  end
+
+  attr_reader :type, :collapsible, :default_value, :id
+
+  def root_classes
+    cn("w-full", @user_class)
+  end
+
+  def initial_values
+    vals = case type
+    when :single
+             @default_value ? [ @default_value.to_s ] : []
+    else
+             Array(@default_value).map(&:to_s)
+    end
+    vals.to_json
+  end
+end

data/registry/app/components/ui/alert/description.html.erb

@@ -0,0 +1 @@
+<%= tag.div class: classes, **@html_attrs do %><%= content %><% end %>

data/registry/app/components/ui/alert/description.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class UI::Alert::Description < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("text-sm leading-relaxed [&_p]:leading-relaxed", @user_class)
+  end
+end

data/registry/app/components/ui/alert/title.html.erb

@@ -0,0 +1 @@
+<%= tag.h5 class: classes, **@html_attrs do %><%= content %><% end %>

data/registry/app/components/ui/alert/title.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class UI::Alert::Title < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("font-medium leading-none tracking-tight", @user_class)
+  end
+end

data/registry/app/components/ui/alert.html.erb

@@ -0,0 +1,16 @@
+<%= tag.div role: "alert", aria: { live: "assertive", atomic: "true" }, class: classes, data: { controller: ("ui--alert" if dismissible?) }.compact, **@html_attrs do %>
+  <% if icon? %>
+    <%= icon %>
+  <% elsif default_icon_name %>
+    <%= render(UI::Icon.new(name: default_icon_name, size: :sm, class: "shrink-0", aria: { hidden: true })) %>
+  <% end %>
+  <div class="flex flex-col gap-1 min-w-0 flex-1">
+    <% if title? %><%= title %><% end %>
+    <% if description? %><%= description %><% end %>
+  </div>
+  <% if dismissible? %>
+    <%= render(UI::Button.new(variant: :ghost, size: :icon_sm, class: "shrink-0 -mr-1 -mt-1", aria: { label: t("ui.alert.close_label", default: "Close alert") }, data: { action: "click->ui--alert#dismiss" })) do %>
+      <%= render(UI::Icon.new(name: :x, size: :sm)) %>
+    <% end %>
+  <% end %>
+<% end %>

data/registry/app/components/ui/alert.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+class UI::Alert < UI::Base
+  DEFAULT_ICONS = {
+    default:     "info",
+    destructive: "circle-alert",
+    warning:     "circle-alert",
+    success:     "circle-check",
+    info:        "info"
+  }.freeze
+
+  variants(
+    base: "relative w-full rounded-md border p-4 " \
+          "flex items-start gap-3 " \
+          "[&>i]:translate-y-0.5 [&>i]:shrink-0",
+    variants: {
+      variant: {
+        default:     "bg-background text-foreground border-input",
+        destructive: "bg-destructive/10 text-destructive border-destructive/30",
+        warning:     "bg-amber-50 text-amber-800 border-amber-300 " \
+                     "dark:bg-amber-950/30 dark:text-amber-200 dark:border-amber-800",
+        success:     "bg-emerald-50 text-emerald-800 border-emerald-300 " \
+                     "dark:bg-emerald-950/30 dark:text-emerald-200 dark:border-emerald-800",
+        info:        "bg-sky-50 text-sky-800 border-sky-300 " \
+                     "dark:bg-sky-950/30 dark:text-sky-200 dark:border-sky-800"
+      }
+    },
+    defaults: { variant: :default }
+  )
+
+  renders_one :icon, ->(name:, **opts) {
+    UI::Icon.new(name: name, size: opts.delete(:size) || :sm, class: cn("shrink-0", opts.delete(:class)), **opts)
+  }
+  renders_one :title, UI::Alert::Title
+  renders_one :description, UI::Alert::Description
+
+  def initialize(variant: :default, dismissible: false, class: nil, **html_attrs)
+    @variant = variant
+    @dismissible = dismissible
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def dismissible?
+    @dismissible
+  end
+
+  def classes
+    cn(variant_classes(variant: @variant), @user_class)
+  end
+
+  def default_icon_name
+    DEFAULT_ICONS.fetch(@variant)
+  end
+end

data/registry/app/components/ui/avatar/fallback.html.erb

@@ -0,0 +1 @@
+<%= tag.span class: classes, **@html_attrs do %><%= content %><% end %>

data/registry/app/components/ui/avatar/fallback.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class UI::Avatar::Fallback < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("flex h-full w-full items-center justify-center font-medium", @user_class)
+  end
+end

data/registry/app/components/ui/avatar/image.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class UI::Avatar::Image < UI::Base
+  def initialize(src:, alt: "", class: nil, **html_attrs)
+    @src        = src
+    @alt        = alt
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  attr_reader :src
+
+  def classes
+    cn("aspect-square h-full w-full object-cover", @user_class)
+  end
+
+  def call
+    helpers.image_tag @src, alt: @alt, class: classes, **@html_attrs
+  end
+end

data/registry/app/components/ui/avatar.html.erb

@@ -0,0 +1 @@
+<%= tag.span class: classes, data: { slot: "avatar" }.merge((@html_attrs[:data] || {}).except(:slot)), **@html_attrs.except(:data), **a11y_attrs do %><% if image? %><%= image %><% end %><% if fallback? %><%= fallback %><% elsif content.present? %><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true"><%= content %></span><% end %><% end %>

data/registry/app/components/ui/avatar.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+class UI::Avatar < UI::Base
+  variants(
+    base: "relative flex shrink-0 overflow-hidden",
+    variants: {
+      shape: {
+        circle:  "rounded-full",
+        rounded: "rounded-md"
+      },
+      size: {
+        xxs:     "h-4 w-4 text-xs",
+        sm:      "h-6 w-6 text-xs",
+        md:      "h-8 w-8 text-sm",
+        default: "h-10 w-10 text-sm",
+        lg:      "h-12 w-12 text-base",
+        xl:      "h-16 w-16 text-lg"
+      },
+      color: {
+        default:     "bg-muted text-foreground/70",
+        primary:     "bg-primary text-primary-foreground",
+        destructive: "bg-destructive text-white",
+        amber:       "bg-amber-500 dark:bg-amber-600 text-white",
+        emerald:     "bg-emerald-500 dark:bg-emerald-600 text-white",
+        purple:      "bg-purple-500 dark:bg-purple-600 text-white",
+        sky:         "bg-sky-500 dark:bg-sky-600 text-white"
+      }
+    },
+    defaults: { shape: :circle, size: :default, color: :default }
+  )
+
+  renders_one :image, UI::Avatar::Image
+  renders_one :fallback, UI::Avatar::Fallback
+
+  def initialize(shape: :circle, size: :default, color: :default, alt: nil, class: nil, **html_attrs)
+    @shape      = shape
+    @size       = size
+    @color      = color
+    @alt        = alt
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn(variant_classes(shape: @shape, size: @size, color: @color), @user_class)
+  end
+
+  def has_image?
+    image? && @image.src.present?
+  end
+
+  def a11y_attrs
+    return {} unless @alt
+    { role: "img", "aria-label": @alt }
+  end
+end

data/registry/app/components/ui/avatar_group.html.erb

@@ -0,0 +1 @@
+<%= tag.div role: "list", aria: { label: "Avatars" }, class: classes, **@html_attrs do %><% visible_avatars.each do |avatar| %><%= avatar %><% end %><% if overflow_count > 0 %><span class="relative flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground ring-2 ring-background <%= overflow_size_classes %>" role="listitem" aria-label="<%= overflow_count %> more users">+<%= overflow_count %></span><% end %><% end %>

data/registry/app/components/ui/avatar_group.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class UI::AvatarGroup < UI::Base
+  renders_many :avatars, ->(shape: :circle, size: :default, **opts, &block) {
+    UI::Avatar.new(shape: shape, size: size, role: "listitem", class: "ring-2 ring-background", **opts, &block)
+  }
+
+  def initialize(max: 5, size: :default, class: nil, **html_attrs)
+    @max        = max
+    @size       = size
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("flex items-center -space-x-2", @user_class)
+  end
+
+  def visible_avatars
+    avatars.first(@max)
+  end
+
+  def overflow_count
+    [ avatars.size - @max, 0 ].max
+  end
+
+  def overflow_size_classes
+    case @size
+    when :sm      then "h-6 w-6 text-xs"
+    when :default then "h-10 w-10 text-sm"
+    when :lg      then "h-12 w-12 text-base"
+    when :xl      then "h-16 w-16 text-lg"
+    end
+  end
+end

data/registry/app/components/ui/badge.html.erb

@@ -0,0 +1 @@
+<%= tag.span class: classes, **@html_attrs do %><% if leading_icon? %><%= leading_icon %><% end %><%= content %><% end %>

data/registry/app/components/ui/badge.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+class UI::Badge < UI::Base
+  variants(
+    base: "inline-flex items-center justify-center gap-1 rounded-full font-medium whitespace-nowrap border border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1",
+    variants: {
+      variant: {
+        default:     "bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:   "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "bg-destructive text-white hover:bg-destructive/80",
+        outline:     "text-foreground border-input",
+        success:     "bg-emerald-500 dark:bg-emerald-600 text-white hover:bg-emerald-500/80 dark:hover:bg-emerald-600/80",
+        warning:     "bg-amber-500 dark:bg-amber-600 text-white hover:bg-amber-500/80 dark:hover:bg-amber-600/80"
+      },
+      size: {
+        sm:      "h-5 px-1.5 text-[10px] leading-none",
+        default: "h-6 px-2 text-xs leading-none",
+        lg:      "h-7 px-2.5 text-sm leading-none"
+      }
+    },
+    defaults: { variant: :default, size: :default }
+  )
+
+  renders_one :leading_icon, ->(name:, size: nil, **opts) {
+    UI::Icon.new(name: name, size: size || :xs, **opts)
+  }
+
+  def initialize(variant: :default, size: :default, class: nil, **html_attrs)
+    @variant = variant
+    @size = size
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn(variant_classes(variant: @variant, size: @size), @user_class)
+  end
+end

data/registry/app/components/ui/banner.html.erb

@@ -0,0 +1,10 @@
+<%= tag.div class: classes, data: { controller: "ui--banner", slot: "banner" }.merge(@html_attrs[:data] || {}), **@html_attrs.except(:data) do %><% if illustration? %>
+    <div class="shrink-0"><%= illustration %></div>
+  <% end %>
+  <% if leading_icon? %>
+    <%= leading_icon %>
+  <% end %>
+  <div class="flex-1 min-w-0"><% if title? %><%= title %><% end %><% if content.present? %>
+      <p class="text-sm text-foreground/80"><%= content %></p>
+    <% end %><% if action? %><%= action %><% end %></div>
+  <% if dismissible? %><%= render(UI::Button.new(variant: :ghost, size: :icon_sm, class: "absolute top-3 right-3 text-muted-foreground hover:text-foreground", data: { action: "click->ui--banner#dismiss" }, aria: { label: "Dismiss" })) do |btn| %><% btn.with_leading_icon(name: @dismiss_icon) %><% end %><% end %><% end %>

data/registry/app/components/ui/banner.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class UI::Banner < UI::Base
+  variants(
+    base: "relative flex gap-4 rounded-lg p-4",
+    variants: {
+      variant: {
+        introduction: "bg-primary/10 border border-primary/20 text-foreground",
+        promotion:    "bg-accent border border-accent-foreground/20 text-foreground"
+      }
+    },
+    defaults: { variant: :introduction }
+  )
+
+  renders_one :illustration
+  renders_one :leading_icon, ->(name:, **opts) {
+    UI::Icon.new(name: name, size: :default, class: "shrink-0 mt-0.5", **opts)
+  }
+  renders_one :title, ->(**opts, &block) {
+    tag.h4(class: "text-sm font-semibold mb-1", **opts, &block)
+  }
+  renders_one :action, ->(**opts, &block) {
+    tag.div(class: "mt-3", **opts, &block)
+  }
+
+  def initialize(variant: :introduction, dismissible: true, full_width: false,
+                 dismiss_icon: "x", class: nil, **html_attrs)
+    @variant      = variant
+    @dismissible  = dismissible
+    @full_width   = full_width
+    @dismiss_icon = dismiss_icon
+    @user_class   = binding.local_variable_get(:class)
+    @html_attrs   = html_attrs
+  end
+
+  def classes
+    cn(
+      variant_classes(variant: @variant),
+      { "w-full" => @full_width },
+      @user_class
+    )
+  end
+
+  def dismissible?
+    @dismissible
+  end
+end

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

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+module UI; end
+
+class UI::Base < ViewComponent::Base
+  # Shared focus ring, VelvetKit's signature: every interactive UI:: component
+  # includes it in its variant `base:` string. It shows on click as well as on
+  # Tab, and animates in. (The docs site keeps it on the clicked link across
+  # page visits, so a visit doesn't cut the animation off.)
+  FOCUS_RING = "transition-all focus:outline-none focus:ring-2 focus:ring-primary " \
+               "focus:ring-offset-1 ring-offset-background"
+
+  class_attribute :variant_config,
+                  instance_writer: false,
+                  default: { base: nil, variants: {}, defaults: {}, compound: [] }
+
+  def cn(*classes)
+    flattened = classes.flatten.compact.flat_map { |c|
+      case c
+      when String then c
+      when Hash   then c.select { |_, v| v }.keys.map(&:to_s)
+      else             nil
+      end
+    }.compact.reject(&:empty?).join(" ")
+
+    UI::Base.tailwind_merger.merge(flattened)
+  end
+
+  def self.tailwind_merger
+    @tailwind_merger ||= TailwindMerge::Merger.new
+  end
+
+  def self.variants(base:, variants: {}, defaults: {}, compound: [])
+    self.variant_config = {
+      base: base, variants: variants, defaults: defaults, compound: compound
+    }
+  end
+
+  def variant_classes(**props)
+    cfg = self.class.variant_config
+    selected = cfg[:defaults].merge(props.compact)
+    pieces = [ cfg[:base] ]
+    cfg[:variants].each do |key, map|
+      pieces << map[selected[key]]
+    end
+    cfg[:compound].each do |rule|
+      pieces << rule[:class] if rule[:when].all? { |k, v| selected[k] == v }
+    end
+    cn(*pieces)
+  end
+end

data/registry/app/components/ui/breadcrumb/auto_ellipsis.html.erb

@@ -0,0 +1,23 @@
+<%= tag.li class: "inline-flex items-center", data: { breadcrumb_target: "ellipsis" } do %>
+  <%= render(UI::Popover.new) do |popover| %>
+    <% popover.with_trigger(variant: :ghost, size: :icon_sm, aria: { label: t("ui.breadcrumb.ellipsis_label", default: "More breadcrumb pages") }) do %>
+      <%= render(UI::Icon.new(name: :ellipsis, size: :sm)) %>
+    <% end %>
+    <% popover.with_content(side: :bottom, align: :start, class: "w-auto min-w-0 p-1") do %>
+      <ul class="flex flex-col gap-0.5" aria-label="<%= t("ui.breadcrumb.collapsed_pages_label", default: "Collapsed breadcrumb pages") %>">
+        <% @items.each do |item| %>
+          <li>
+            <%= render(UI::Link.new(href: item.href, class: cn("justify-start rounded-sm px-3 py-1.5 font-normal", size_text_class))) do %>
+              <% if item.avatar_src %>
+                <%= render(UI::Avatar.new(size: :xxs, shape: :rounded)) do |avatar| %>
+                  <% avatar.with_image(src: item.avatar_src, alt: "") %>
+                <% end %>
+              <% end %>
+              <%= item.text %>
+            <% end %>
+          </li>
+        <% end %>
+      </ul>
+    <% end %>
+  <% end %>
+<% end %>

data/registry/app/components/ui/breadcrumb/auto_ellipsis.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class UI::Breadcrumb::AutoEllipsis < UI::Base
+  def initialize(items:, size: :sm)
+    @items = items
+    @size = size
+  end
+
+  def size_text_class
+    UI::Breadcrumb::SIZES[@size]
+  end
+end

data/registry/app/components/ui/breadcrumb/ellipsis.html.erb

@@ -0,0 +1,18 @@
+<%= tag.li class: "inline-flex items-center gap-1.5", **@html_attrs do %>
+  <% if content? %>
+    <%= render(UI::Popover.new) do |popover| %>
+      <% popover.with_trigger(variant: :ghost, size: :icon_sm, class: @user_class, aria: { label: t("ui.breadcrumb.ellipsis_label", default: "More breadcrumb pages") }) do %>
+        <%= render(UI::Icon.new(name: :ellipsis, size: :sm)) %>
+      <% end %>
+      <% popover.with_content(side: :bottom, align: :start, class: "w-auto min-w-0 p-1") do %>
+        <ul class="flex flex-col gap-0.5" aria-label="<%= t("ui.breadcrumb.collapsed_pages_label", default: "Collapsed breadcrumb pages") %>">
+          <%= content %>
+        </ul>
+      <% end %>
+    <% end %>
+  <% else %>
+    <span role="presentation" aria-hidden="true" class="<%= cn('text-muted-foreground/70', @user_class) %>">
+      <%= render(UI::Icon.new(name: :ellipsis, size: :sm)) %>
+    </span>
+  <% end %>
+<% end %>

data/registry/app/components/ui/breadcrumb/ellipsis.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class UI::Breadcrumb::Ellipsis < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+end

data/registry/app/components/ui/breadcrumb/item.html.erb

@@ -0,0 +1 @@
+<%= tag.li class: classes, **@html_attrs do %><%= content %><% end %>

data/registry/app/components/ui/breadcrumb/item.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class UI::Breadcrumb::Item < UI::Base
+  def initialize(class: nil, **html_attrs)
+    @user_class = binding.local_variable_get(:class)
+    @html_attrs = html_attrs
+  end
+
+  def classes
+    cn("inline-flex items-center gap-1.5 rounded", @user_class)
+  end
+end

data/registry/app/components/ui/breadcrumb/item_slot.html.erb

@@ -0,0 +1,10 @@
+<%= tag.li class: "inline-flex items-center gap-1.5", data: data_attrs do %>
+  <%= render(UI::Link.new(href: @href, variant: :link, size: :sm, truncate: !effective_current?, class: link_classes, **link_options)) do %>
+    <% if @avatar_src %>
+      <%= render(UI::Avatar.new(size: :xxs, class: "rounded border")) do |avatar| %>
+        <% avatar.with_image(src: @avatar_src, alt: "") %>
+      <% end %>
+    <% end %>
+    <%= @text %>
+  <% end %>
+<% end %>