fernandes-ui 0.1.0

data/app/views/ui/_radio_button.html.erb

@@ -0,0 +1,34 @@
+<%
+  # RadioButton - shadcn/ui inspired component for Rails
+  #
+  # @param name [String] The name attribute for the radio button
+  # @param id [String] The id attribute (auto-generated if not provided)
+  # @param value [String] The value attribute
+  # @param checked [Boolean] Whether the radio button is checked
+  # @param disabled [Boolean] Whether the radio button is disabled
+  # @param required [Boolean] Whether the radio button is required
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+  @disabled = local_assigns.fetch(:disabled, false)
+  @value = local_assigns.fetch(:value, nil)
+  @checked = local_assigns.fetch(:checked, false)
+  @name = local_assigns.fetch(:name, nil)
+  @id = local_assigns.fetch(:id, nil)
+  @required = local_assigns.fetch(:required, false)
+
+  # Extend behavior for shared logic
+  extend UI::RadioButtonBehavior
+
+  # Get HTML attributes from behavior (without @attributes merge for input)
+  input_attributes = radio_button_html_attributes
+-%>
+<div class="relative inline-flex items-center justify-center">
+  <%= tag :input, input_attributes %>
+  <%# Indicator dot - shown when checked %>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity" data-slot="radio-group-indicator">
+    <circle cx="12" cy="12" r="10"/>
+  </svg>
+</div>

data/app/views/ui/_responsive_dialog.html.erb

@@ -0,0 +1,44 @@
+<%# ResponsiveDialog Component - Combines Dialog (desktop) and Drawer (mobile) %>
+<%#
+  Hybrid CSS + Stimulus approach:
+  - Renders both Dialog and Drawer
+  - CSS hides one based on breakpoint (md:hidden / md:block)
+  - Stimulus controller syncs state between them
+
+  Usage:
+  <%= render "ui/responsive_dialog/responsive_dialog",
+             open: false,
+             breakpoint: 768,
+             direction: "bottom" do %>
+    <%# Content goes here - will be rendered in both Dialog and Drawer %>
+  <% end %>
+%>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @open = local_assigns.fetch(:open, false)
+  @breakpoint = local_assigns.fetch(:breakpoint, 768)
+  @direction = local_assigns.fetch(:direction, "bottom")
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::ResponsiveDialogBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = responsive_dialog_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%# Mobile: Drawer (hidden on md and up) %>
+  <div class="md:hidden" data-ui--responsive-dialog-target="drawer">
+    <%= render "ui/drawer/drawer", open: @open, direction: @direction do %>
+      <%= content || yield %>
+    <% end %>
+  </div>
+
+  <%# Desktop: Dialog (hidden below md) %>
+  <div class="hidden md:block" data-ui--responsive-dialog-target="dialog">
+    <%= render "ui/dialog/dialog", open: @open do %>
+      <%= content || yield %>
+    <% end %>
+  </div>
+<% end %>

data/app/views/ui/_scroll_area.html.erb

@@ -0,0 +1,60 @@
+<%# ScrollArea - Root container for scroll area %>
+<%
+  @as_child = local_assigns.fetch(:as_child, false)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+  @type = local_assigns.fetch(:type, "hover")
+  @scroll_hide_delay = local_assigns.fetch(:scroll_hide_delay, 600)
+
+  # Extend behavior for shared logic
+  extend ::UI::ScrollAreaBehavior
+
+  # Get HTML attributes from behavior
+  root_attrs = scroll_area_html_attributes.deep_merge(@attributes)
+
+  # Add Stimulus controller and values
+  root_attrs[:data] ||= {}
+  root_attrs[:data][:controller] = "ui--scroll-area"
+  root_attrs[:data][:ui__scroll_area_type_value] = @type
+  root_attrs[:data][:ui__scroll_area_scroll_hide_delay_value] = @scroll_hide_delay
+-%>
+<% if @as_child %>
+  <%# asChild mode: capture block and inject attributes into first element %>
+  <% captured_content = capture do %>
+    <%= yield %>
+    <%= render "ui/scroll_area/scrollbar", orientation: "vertical" %>
+    <%= render "ui/scroll_area/corner" %>
+  <% end %>
+  <%= raw captured_content.sub(/(<[a-z][a-z0-9]*)([\s>])/i) { |match|
+    tag_start = $1
+    tag_end = $2
+
+    # Build attributes string manually
+    attrs_array = root_attrs.map do |key, value|
+      key_name = key.to_s.gsub('_', '-')
+      if key == :data && value.is_a?(Hash)
+        # Handle data attributes
+        value.map { |k, v| "data-#{k.to_s.gsub('_', '-')}=\"#{ERB::Util.html_escape(v)}\"" }.join(" ")
+      elsif key == :style
+        "style=\"#{ERB::Util.html_escape(value)}\""
+      elsif value.is_a?(TrueClass)
+        key_name
+      elsif value.is_a?(FalseClass) || value.nil?
+        nil
+      else
+        "#{key_name}=\"#{ERB::Util.html_escape(value)}\""
+      end
+    end.compact.join(" ")
+
+    "#{tag_start} #{attrs_array}#{tag_end}"
+  } %>
+<% else %>
+  <%# Default mode: render as div %>
+  <%= content_tag :div, root_attrs do %>
+    <%= render "ui/scroll_area/viewport" do %>
+      <%= yield %>
+    <% end %>
+    <%= render "ui/scroll_area/scrollbar", orientation: "vertical" %>
+    <%= render "ui/scroll_area/corner" %>
+  <% end %>
+<% end %>

data/app/views/ui/_select.html.erb

@@ -0,0 +1,17 @@
+<%# Select Component - Radix-style custom select with trigger and dropdown %>
+<%
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+  @value = local_assigns.fetch(:value, nil)
+  @id = local_assigns.fetch(:id, nil)
+
+  # Extend behavior for shared logic
+  extend ::UI::SelectBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = select_html_attributes.deep_merge(@attributes)
+  all_attributes[:id] = @id if @id.present?
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= yield %>
+<% end %>

data/app/views/ui/_separator.html.erb

@@ -0,0 +1,20 @@
+<%
+  orientation ||= :horizontal
+  decorative = true if !defined?(decorative)
+  classes ||= ""
+
+  # Instance variables for behavior module
+  @orientation = orientation
+  @decorative = decorative
+  @classes = classes
+
+  # Include behavior module
+  extend UI::SeparatorBehavior
+
+  # Get HTML attributes from behavior
+  attrs = separator_html_attributes
+  all_classes = attrs[:class]
+  data_attrs = attrs[:data]
+  role_attr = attrs[:role]
+  aria_orientation_attr = attrs[:"aria-orientation"]
+%><div class="<%= all_classes %>" data-slot="<%= data_attrs[:slot] %>" data-orientation="<%= data_attrs[:orientation] %>"<% if role_attr %> role="<%= role_attr %>"<% end %><% if aria_orientation_attr %> aria-orientation="<%= aria_orientation_attr %>"<% end %>></div>

data/app/views/ui/_sheet.html.erb

@@ -0,0 +1,18 @@
+<%# Sheet Component - Root container for sheet %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @open = local_assigns.fetch(:open, false)
+  @close_on_escape = local_assigns.fetch(:close_on_escape, true)
+  @close_on_overlay_click = local_assigns.fetch(:close_on_overlay_click, true)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::SheetBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = sheet_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/_skeleton.html.erb

@@ -0,0 +1,19 @@
+<%
+# frozen_string_literal: true
+
+# UI::Skeleton - Loading placeholder component
+#
+# A simple skeleton component that shows a pulsing placeholder while content is loading.
+# This component is CSS-only with no JavaScript behavior.
+#
+# @param class [String] Additional CSS classes to apply
+# @param attributes [Hash] Additional HTML attributes
+#
+html_class = local_assigns.fetch(:class, "")
+attributes = local_assigns.except(:class)
+
+default_classes = "bg-accent animate-pulse rounded-md"
+merged_classes = [default_classes, html_class].compact_blank.join(" ")
+%>
+
+<div data-slot="skeleton" class="<%= merged_classes %>" <%= attributes.map { |k, v| "#{k}=\"#{v}\"" }.join(" ").html_safe %>></div>

data/app/views/ui/_slider.html.erb

@@ -0,0 +1,27 @@
+<%# Slider Component - Root container for range slider %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @min = local_assigns.fetch(:min, 0)
+  @max = local_assigns.fetch(:max, 100)
+  @step = local_assigns.fetch(:step, 1)
+  @value = local_assigns.fetch(:value, nil)
+  @center_point = local_assigns.fetch(:center_point, nil)
+  # If center_point is defined and no default_value provided, start at center
+  @default_value = local_assigns.fetch(:default_value, @center_point ? [@center_point] : [@min])
+  @disabled = local_assigns.fetch(:disabled, false)
+  @orientation = local_assigns.fetch(:orientation, "horizontal")
+  @inverted = local_assigns.fetch(:inverted, false)
+  @name = local_assigns.fetch(:name, "")
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::SliderBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = slider_html_attributes.deep_merge(@attributes.except(:data))
+  all_attributes[:data] = slider_html_attributes[:data].merge(@attributes.fetch(:data, {}))
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/_small.html.erb

@@ -0,0 +1,19 @@
+<%
+  # Small - ERB Partial
+  #
+  # A small text component with shadcn/ui styling.
+  #
+  # @param classes [String] Additional CSS classes to merge
+  # @param content [String] Text content (alternative to using block)
+  # @param attributes [Hash] Additional HTML attributes
+
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+  content_param = local_assigns.fetch(:content, nil)
+
+  extend UI::SmallBehavior
+  all_attributes = small_html_attributes.merge(@attributes)
+%>
+<%= content_tag :small, all_attributes do %>
+  <%= content_param || yield %>
+<% end %>

data/app/views/ui/_spinner.html.erb

@@ -0,0 +1,28 @@
+<%# Spinner Component - Loading indicator %>
+<%
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+  @size = local_assigns.fetch(:size, "default")
+
+  # Extend behavior for shared logic
+  extend UI::SpinnerBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = spinner_html_attributes.deep_merge(@attributes)
+
+  # SVG attributes
+  svg_attributes = all_attributes.merge(
+    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"
+  )
+-%>
+<%= content_tag :svg, svg_attributes do %>
+  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+<% end %>

data/app/views/ui/_switch.html.erb

@@ -0,0 +1,45 @@
+<%
+  # Switch - ERB Partial
+  #
+  # A toggle control that allows the user to switch between checked and unchecked states.
+  # Based on Radix UI Switch primitive.
+  #
+  # @param checked [Boolean] Whether the switch is checked (default: false)
+  # @param disabled [Boolean] Whether the switch is disabled (default: false)
+  # @param name [String] Name for form submission (creates hidden input)
+  # @param id [String] ID attribute
+  # @param value [String] Value when checked (default: "1")
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+
+  @checked = local_assigns.fetch(:checked, false)
+  @disabled = local_assigns.fetch(:disabled, false)
+  @name = local_assigns[:name]
+  @id = local_assigns[:id]
+  @value = local_assigns.fetch(:value, "1")
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  extend UI::SwitchBehavior
+  all_attributes = switch_html_attributes.deep_merge(@attributes)
+  all_attributes[:id] = @id if @id.present?
+%>
+<%= content_tag :button, all_attributes do %>
+  <%= content_tag :span,
+    "",
+    data: {
+      ui__switch_target: "thumb",
+      slot: "switch-thumb",
+      state: switch_state
+    },
+    class: switch_thumb_classes
+  %>
+  <% if @name.present? %>
+    <%= tag :input,
+      type: "hidden",
+      name: @name,
+      value: @checked ? @value : "0",
+      id: @id
+    %>
+  <% end %>
+<% end %>

data/app/views/ui/_table.html.erb

@@ -0,0 +1,18 @@
+<%
+  # Table - ERB Partial
+  #
+  # A table container with consistent styling.
+  # Uses TableBehavior module for shared styling logic.
+  #
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  extend UI::TableBehavior
+  all_attributes = table_html_attributes.deep_merge(@attributes)
+%>
+<%= content_tag :table, all_attributes do %>
+  <%= yield %>
+<% end %>

data/app/views/ui/_tabs.html.erb

@@ -0,0 +1,23 @@
+<%# Tabs Component - Root container for tabbed interface %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @default_value = local_assigns.fetch(:default_value, "")
+  @orientation = local_assigns.fetch(:orientation, "horizontal")
+  @activation_mode = local_assigns.fetch(:activation_mode, "automatic")
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Store context for child components
+  @_tabs_default_value = @default_value
+  @_tabs_orientation = @orientation
+
+  # Extend behavior for shared logic
+  extend UI::TabsBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = tabs_html_attributes.deep_merge(@attributes.except(:data))
+  all_attributes[:data] = tabs_html_attributes[:data].merge(@attributes.fetch(:data, {}))
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/_textarea.html.erb

@@ -0,0 +1,16 @@
+<%# Textarea - shadcn/ui inspired component for Rails %>
+<%
+  @name = local_assigns.fetch(:name, nil)
+  @placeholder = local_assigns.fetch(:placeholder, "")
+  @value = local_assigns.fetch(:value, "")
+  @rows = local_assigns.fetch(:rows, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::TextareaBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = textarea_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :textarea, @value, all_attributes %>

data/app/views/ui/_toggle.html.erb

@@ -0,0 +1,27 @@
+<%
+  # Toggle - ERB Partial
+  #
+  # A two-state button that can be either on or off.
+  #
+  # @param variant [String] Visual style variant (default, outline)
+  # @param size [String] Size variant (default, sm, lg)
+  # @param type [String] Button type attribute (button, submit, reset)
+  # @param pressed [Boolean] Whether the toggle is pressed/active
+  # @param disabled [Boolean] Whether the toggle is disabled
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+
+  @variant = local_assigns.fetch(:variant, "default")
+  @size = local_assigns.fetch(:size, "default")
+  @type = local_assigns.fetch(:type, "button")
+  @pressed = local_assigns.fetch(:pressed, false)
+  @disabled = local_assigns.fetch(:disabled, false)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  extend UI::ToggleBehavior
+  all_attributes = toggle_html_attributes.deep_merge(@attributes)
+%>
+<%= content_tag :button, all_attributes do %>
+  <%= yield %>
+<% end %>

data/app/views/ui/_toggle_group.html.erb

@@ -0,0 +1,38 @@
+<%
+  # ToggleGroup - ERB Partial
+  #
+  # A container for a set of toggle items that can be toggled on or off.
+  #
+  # @param type [String] Selection mode: "single" or "multiple"
+  # @param variant [String] Visual style variant (default, outline)
+  # @param size [String] Size variant (default, sm, lg)
+  # @param value [String, Array] Current selected value(s)
+  # @param spacing [Integer] Gap between items (0 means items touch)
+  # @param orientation [String] Layout direction (horizontal, vertical)
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+
+  @type = local_assigns.fetch(:type, "single")
+  @variant = local_assigns.fetch(:variant, "default")
+  @size = local_assigns.fetch(:size, "default")
+  @value = local_assigns.fetch(:value, nil)
+  @spacing = local_assigns.fetch(:spacing, 0)
+  @orientation = local_assigns.fetch(:orientation, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Store context for child items
+  @toggle_group_context = {
+    variant: @variant,
+    size: @size,
+    type: @type,
+    spacing: @spacing,
+    value: @value
+  }
+
+  extend UI::ToggleGroupBehavior
+  all_attributes = toggle_group_html_attributes.deep_merge(@attributes)
+%>
+<%= content_tag :div, all_attributes do %>
+  <%= yield %>
+<% end %>

data/app/views/ui/_tooltip.html.erb

@@ -0,0 +1,13 @@
+<%# Tooltip Component - Root container for tooltip %>
+<%
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::TooltipBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = tooltip_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= yield %>
+<% end %>

data/app/views/ui/accordion/_content.html.erb

@@ -0,0 +1,21 @@
+<%# Accordion Content Component - Collapsible content area %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Get context from parent item
+  @item_value = @_accordion_item_value || SecureRandom.hex(4)
+  @initial_open = @_accordion_item_initial_open || false
+
+  # Extend behavior for shared logic
+  extend UI::AccordionContentBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = content_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <div class="pt-0 pb-4">
+    <%= content || yield %>
+  </div>
+<% end %>

data/app/views/ui/accordion/_item.html.erb

@@ -0,0 +1,21 @@
+<%# Accordion Item Component - Individual collapsible item %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @value = local_assigns.fetch(:value, "")
+  @initial_open = local_assigns.fetch(:initial_open, false)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Store context for child components
+  @_accordion_item_value = @value
+  @_accordion_item_initial_open = @initial_open
+
+  # Extend behavior for shared logic
+  extend UI::AccordionItemBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = item_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/accordion/_trigger.html.erb

@@ -0,0 +1,23 @@
+<%# Accordion Trigger Component - Button to toggle accordion item %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Get context from parent item
+  @item_value = @_accordion_item_value || SecureRandom.hex(4)
+  @initial_open = @_accordion_item_initial_open || false
+
+  # Extend behavior for shared logic
+  extend UI::AccordionTriggerBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = trigger_html_attributes.deep_merge(@attributes)
+  @orientation ||= "vertical"
+-%>
+<%= content_tag :h3, class: "flex", "data-orientation": @orientation, "data-state": trigger_state do %>
+  <%= content_tag :button, all_attributes do %>
+    <%= content || yield %>
+    <%= caret_svg %>
+  <% end %>
+<% end %>

data/app/views/ui/alert/_description.html.erb

@@ -0,0 +1,13 @@
+<%
+  classes ||= ""
+
+  # Base CSS classes
+  base_classes = "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed"
+
+  # Merge all classes
+  require "tailwind_merge"
+  all_classes = TailwindMerge::Merger.new.merge([base_classes, classes].compact.join(" "))
+%>
+<div class="<%= all_classes %>" data-slot="alert-description">
+  <%= yield %>
+</div>

data/app/views/ui/alert/_title.html.erb

@@ -0,0 +1,13 @@
+<%
+  classes ||= ""
+
+  # Base CSS classes
+  base_classes = "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight"
+
+  # Merge all classes
+  require "tailwind_merge"
+  all_classes = TailwindMerge::Merger.new.merge([base_classes, classes].compact.join(" "))
+%>
+<div class="<%= all_classes %>" data-slot="alert-title">
+  <%= yield %>
+</div>

data/app/views/ui/avatar/_fallback.html.erb

@@ -0,0 +1,13 @@
+<%
+  classes ||= ""
+
+  # Include behavior module
+  extend UI::AvatarFallbackBehavior
+
+  # Get HTML attributes from behavior
+  attrs = avatar_fallback_html_attributes
+  all_classes = attrs[:class]
+  data_attrs = attrs[:data]
+%><span class="<%= all_classes %>" data-ui--avatar-target="fallback" data-slot="<%= data_attrs[:slot] %>">
+  <%= yield %>
+</span>

data/app/views/ui/avatar/_image.html.erb

@@ -0,0 +1,18 @@
+<%
+  src ||= ""
+  alt ||= ""
+  classes ||= ""
+
+  # Instance variables for behavior module
+  @src = src
+  @alt = alt
+  @classes = classes
+
+  # Include behavior module
+  extend UI::AvatarImageBehavior
+
+  # Get HTML attributes from behavior
+  attrs = avatar_image_html_attributes
+  all_classes = attrs[:class]
+  data_attrs = attrs[:data]
+%><img src="<%= attrs[:src] %>" alt="<%= attrs[:alt] %>" class="<%= all_classes %>" data-ui--avatar-target="image" data-slot="<%= data_attrs[:slot] %>">

data/app/views/ui/breadcrumb/_ellipsis.html.erb

@@ -0,0 +1,26 @@
+<%# Breadcrumb Ellipsis Component - Indicator for collapsed items %>
+<%
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::BreadcrumbEllipsisBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = breadcrumb_ellipsis_html_attributes.deep_merge(@attributes)
+
+  # Capture block content if provided
+  block_content = capture { yield } if block_given?
+-%>
+<%= content_tag :span, all_attributes do %>
+  <% if block_content.present? %>
+    <%= block_content %>
+  <% else %>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis h-4 w-4">
+      <circle cx="12" cy="12" r="1"/>
+      <circle cx="19" cy="12" r="1"/>
+      <circle cx="5" cy="12" r="1"/>
+    </svg>
+    <span class="sr-only">More</span>
+  <% end %>
+<% end %>

data/app/views/ui/breadcrumb/_item.html.erb

@@ -0,0 +1,14 @@
+<%# Breadcrumb Item Component - Individual breadcrumb entry %>
+<%
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::BreadcrumbItemBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = breadcrumb_item_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :li, all_attributes do %>
+  <%= yield %>
+<% end %>