fernandes-ui 0.1.0

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

@@ -0,0 +1,12 @@
+<%# Context Menu Separator Component - Visual divider between items %>
+<%
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::ContextMenuSeparatorBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = context_menu_separator_html_attributes.merge(@attributes)
+-%>
+<%= content_tag :div, "", **all_attributes %>

data/app/views/ui/context_menu/_shortcut.html.erb

@@ -0,0 +1,15 @@
+<%# Context Menu Shortcut Component - Keyboard shortcut display %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::ContextMenuShortcutBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = context_menu_shortcut_html_attributes.merge(@attributes)
+-%>
+<%= content_tag :span, all_attributes do %>
+  <%= content || yield %>
+<% end %>

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

@@ -0,0 +1,14 @@
+<%# Context Menu Trigger Component - The element that triggers the context menu on right-click %>
+<%
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::ContextMenuTriggerBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = context_menu_trigger_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= yield %>
+<% end %>

data/app/views/ui/date_picker/_input.html.erb

@@ -0,0 +1,47 @@
+<%#
+  DatePicker Input component (ERB)
+  An input field with calendar button for date picker.
+
+  @param placeholder [String] Placeholder text (default: "Select date")
+  @param value [String] Initial input value
+  @param id [String] Input ID for label association
+  @param classes [String] Additional CSS classes for input
+  @param icon_classes [String] Additional CSS classes for icon button
+  @param attributes [Hash] Additional HTML attributes
+
+  Basic usage:
+    render "ui/date_picker/date_picker_input", placeholder: "June 01, 2025"
+%>
+<%
+  @placeholder = local_assigns.fetch(:placeholder, "Select date")
+  @value = local_assigns.fetch(:value, "")
+  @id = local_assigns.fetch(:id, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @icon_classes = local_assigns.fetch(:icon_classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  extend UI::DatePickerInputBehavior
+
+  input_attributes = date_picker_input_html_attributes.deep_merge(@attributes.except(:data))
+  input_attributes[:id] = @id if @id
+  if @attributes[:data]
+    input_attributes[:data] = input_attributes[:data].merge(@attributes[:data])
+  end
+-%>
+<div class="relative flex gap-2">
+  <%= tag.input **input_attributes %>
+  <button
+    type="button"
+    class="<%= date_picker_icon_button_classes %>"
+    data-ui--datepicker-target="trigger"
+    data-ui--popover-target="trigger"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 opacity-50">
+      <path d="M8 2v4"/>
+      <path d="M16 2v4"/>
+      <rect width="18" height="18" x="3" y="4" rx="2"/>
+      <path d="M3 10h18"/>
+    </svg>
+    <span class="sr-only">Select date</span>
+  </button>
+</div>

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

@@ -0,0 +1,53 @@
+<%#
+  DatePicker Trigger component (ERB)
+  A button that triggers the date picker popover.
+
+  @param placeholder [String] Placeholder text when no date selected (default: "Select date")
+  @param selected [Date, Range, Array] Currently selected date(s) for display
+  @param icon [Symbol] Icon to show: :chevron (default), :calendar, or :none
+  @param classes [String] Additional CSS classes
+  @param attributes [Hash] Additional HTML attributes
+
+  Basic usage:
+    render "ui/date_picker/date_picker_trigger", placeholder: "Pick a date"
+
+  With calendar icon:
+    render "ui/date_picker/date_picker_trigger", icon: :calendar
+%>
+<%
+  @placeholder = local_assigns.fetch(:placeholder, "Select date")
+  @selected = local_assigns.fetch(:selected, nil)
+  @icon = local_assigns.fetch(:icon, :chevron)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  extend UI::DatePickerTriggerBehavior
+
+  all_attributes = date_picker_trigger_html_attributes.deep_merge(@attributes.except(:data))
+  if @attributes[:data]
+    all_attributes[:data] = all_attributes[:data].merge(@attributes[:data])
+  end
+
+  # Generate initial display text
+  display_text = if @selected.nil?
+    @placeholder
+  elsif @selected.is_a?(Date)
+    @selected.strftime("%B %d, %Y")
+  elsif @selected.is_a?(Range)
+    "#{@selected.begin.strftime('%B %d, %Y')} - #{@selected.end.strftime('%B %d, %Y')}"
+  elsif @selected.is_a?(Array) && @selected.any?
+    @selected.length == 1 ? @selected.first.strftime("%B %d, %Y") : "#{@selected.length} dates selected"
+  else
+    @placeholder
+  end
+-%>
+<%= content_tag :button, all_attributes do %>
+  <span data-ui--datepicker-target="label" class="text-left truncate flex-1 <%= 'text-muted-foreground' if @selected.nil? %>">
+    <%= display_text %>
+  </span>
+  <% if @icon == :chevron %>
+    <%= chevron_down_icon %>
+  <% elsif @icon == :calendar %>
+    <%= calendar_icon %>
+  <% end %>
+<% end %>

data/app/views/ui/dialog/_close.html.erb

@@ -0,0 +1,24 @@
+<%# Dialog Close Component - Closes dialog on click %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @as_child = local_assigns.fetch(:as_child, false)
+  @variant = local_assigns.fetch(:variant, :outline)
+  @size = local_assigns.fetch(:size, :default)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Build close attributes
+  close_attrs = {
+    data: { action: "click->ui--dialog#close" }
+  }.deep_merge(@attributes)
+-%>
+<% if @as_child %>
+  <%# asChild pattern: yield attributes to block %>
+  <%= yield(close_attrs) if block_given? %>
+  <%= content&.call(close_attrs) %>
+<% else %>
+  <%# Default: render as Button component %>
+  <%= render "ui/button", variant: @variant, size: @size, classes: @classes, attributes: close_attrs do %>
+    <%= content || yield %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,22 @@
+<%# Dialog Content Component - Main content area %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @open = local_assigns.fetch(:open, false)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DialogContentBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = dialog_content_html_attributes
+
+  # Merge user-provided attributes
+  if @attributes.present?
+    all_attributes = all_attributes.deep_merge(@attributes.except(:data))
+    all_attributes[:data] = all_attributes[:data].merge(@attributes.fetch(:data, {}))
+  end
+-%>
+<%= content_tag :div, **all_attributes do %>
+  <%= content || yield %>
+<% end %>

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

@@ -0,0 +1,14 @@
+<%# Dialog Description Component %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+
+  # Build description classes
+  description_classes = TailwindMerge::Merger.new.merge([
+    "text-muted-foreground text-sm",
+    @classes
+  ].compact.join(" "))
+-%>
+<%= content_tag :p, class: description_classes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/dialog/_footer.html.erb

@@ -0,0 +1,14 @@
+<%# Dialog Footer Component %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+
+  # Extend behavior for shared logic
+  extend UI::DialogFooterBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = dialog_footer_html_attributes
+-%>
+<%= content_tag :div, **all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/dialog/_header.html.erb

@@ -0,0 +1,14 @@
+<%# Dialog Header Component %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+
+  # Extend behavior for shared logic
+  extend UI::DialogHeaderBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = dialog_header_html_attributes
+-%>
+<%= content_tag :div, **all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/dialog/_overlay.html.erb

@@ -0,0 +1,19 @@
+<%# Dialog Overlay Component - Container and backdrop %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @open = local_assigns.fetch(:open, false)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DialogOverlayBehavior
+
+  # Get HTML attributes from behavior
+  container_attrs = dialog_overlay_container_html_attributes.deep_merge(@attributes.except(:data))
+  container_attrs[:data] = dialog_overlay_container_html_attributes[:data].merge(@attributes.fetch(:data, {}))
+  overlay_attrs = dialog_overlay_html_attributes
+-%>
+<%= content_tag :div, **container_attrs do %>
+  <%= content_tag :div, "", **overlay_attrs %>
+  <%= content || yield %>
+<% end %>

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

@@ -0,0 +1,14 @@
+<%# Dialog Title Component %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+
+  # Build title classes
+  title_classes = TailwindMerge::Merger.new.merge([
+    "text-lg font-semibold",
+    @classes
+  ].compact.join(" "))
+-%>
+<%= content_tag :h2, class: title_classes do %>
+  <%= content || yield %>
+<% end %>

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

@@ -0,0 +1,24 @@
+<%# Dialog Trigger Component - Opens dialog on click %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @as_child = local_assigns.fetch(:as_child, false)
+  @variant = local_assigns.fetch(:variant, :outline)
+  @size = local_assigns.fetch(:size, :default)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Build trigger attributes
+  trigger_attrs = {
+    data: { action: "click->ui--dialog#open" }
+  }.deep_merge(@attributes)
+-%>
+<% if @as_child %>
+  <%# asChild pattern: yield attributes to block %>
+  <%= yield(trigger_attrs) if block_given? %>
+  <%= content&.call(trigger_attrs) %>
+<% else %>
+  <%# Default: render as Button component %>
+  <%= render "ui/button", variant: @variant, size: @size, classes: @classes, attributes: trigger_attrs do %>
+    <%= content || yield %>
+  <% end %>
+<% end %>

data/app/views/ui/drawer/_close.html.erb

@@ -0,0 +1,17 @@
+<%# Drawer Close Component - Close button for drawer %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @variant = local_assigns.fetch(:variant, :outline)
+  @size = local_assigns.fetch(:size, :default)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DrawerCloseBehavior
+
+  # Merge close data attributes with user attributes
+  all_attributes = drawer_close_data_attributes.deep_merge(@attributes)
+-%>
+<%= render "ui/button", variant: @variant, size: @size, classes: @classes, attributes: all_attributes do %>
+  <%= content || yield %>
+<% end %>

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

@@ -0,0 +1,31 @@
+<%# Drawer Content Component - Main draggable panel %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @open = local_assigns.fetch(:open, false)
+  @direction = local_assigns.fetch(:direction, "bottom")
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DrawerContentBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = drawer_content_html_attributes
+
+  # Merge user-provided attributes
+  if @attributes.present?
+    all_attributes = all_attributes.deep_merge(@attributes)
+  end
+
+  # Add group class for handle visibility (matching Phlex implementation)
+  all_attributes[:class] = TailwindMerge::Merger.new.merge(["group/drawer-content", all_attributes[:class]].compact.join(" "))
+-%>
+<div class="<%= all_attributes[:class] %>"
+     role="<%= all_attributes[:role] %>"
+     aria-modal="<%= all_attributes[:"aria-modal"] %>"
+     data-state="<%= all_attributes[:"data-state"] %>"
+     data-vaul-drawer="<%= all_attributes[:"data-vaul-drawer"] %>"
+     data-vaul-drawer-direction="<%= all_attributes[:"data-vaul-drawer-direction"] %>"
+     <%= all_attributes[:data]&.map { |k, v| "data-#{k.to_s.dasherize}=\"#{v}\"" }&.join(" ")&.html_safe %>>
+  <%= content || yield %>
+</div>

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

@@ -0,0 +1,15 @@
+<%# Drawer Description Component - ARIA description for drawer %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DrawerDescriptionBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = drawer_description_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :p, all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/drawer/_footer.html.erb

@@ -0,0 +1,15 @@
+<%# Drawer Footer Component - Action area for drawer %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DrawerFooterBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = drawer_footer_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/drawer/_handle.html.erb

@@ -0,0 +1,12 @@
+<%# Drawer Handle Component - Visual drag affordance %>
+<%
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DrawerHandleBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = drawer_handle_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, "", all_attributes %>

data/app/views/ui/drawer/_header.html.erb

@@ -0,0 +1,15 @@
+<%# Drawer Header Component - Header section for drawer %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DrawerHeaderBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = drawer_header_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/drawer/_overlay.html.erb

@@ -0,0 +1,16 @@
+<%# Drawer Overlay Component - Backdrop for drawer %>
+<%
+  @open = local_assigns.fetch(:open, false)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DrawerOverlayBehavior
+
+  # Get HTML attributes from behavior
+  container_attributes = drawer_overlay_container_html_attributes.deep_merge(@attributes.except(:class))
+  overlay_attributes = drawer_overlay_html_attributes
+-%>
+<%= content_tag :div, container_attributes do %>
+  <%= content_tag :div, "", overlay_attributes %>
+<% end %>

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

@@ -0,0 +1,15 @@
+<%# Drawer Title Component - ARIA heading for drawer %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DrawerTitleBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = drawer_title_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= content || yield %>
+<% end %>

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

@@ -0,0 +1,25 @@
+<%# Drawer Trigger Component - Opens drawer on click %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @as_child = local_assigns.fetch(:as_child, false)
+  @variant = local_assigns.fetch(:variant, :outline)
+  @size = local_assigns.fetch(:size, :default)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DrawerTriggerBehavior
+
+  # Get trigger attributes
+  all_attributes = drawer_trigger_html_attributes
+-%>
+<% if @as_child %>
+  <%# asChild pattern: yield attributes to block %>
+  <%= yield(all_attributes) if block_given? %>
+  <%= content&.call(all_attributes) %>
+<% else %>
+  <%# Default: render as Button component %>
+  <%= render "ui/button", variant: @variant, size: @size, classes: @classes, attributes: all_attributes do %>
+    <%= content || yield %>
+  <% end %>
+<% end %>

data/app/views/ui/dropdown_menu/_checkbox_item.html.erb

@@ -0,0 +1,24 @@
+<%# Dropdown Menu Checkbox Item Component - Menu item with checkbox state %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+  @disabled = local_assigns.fetch(:disabled, false)
+  @checked = local_assigns.fetch(:checked, false)
+
+  # Extend behavior for shared logic
+  extend UI::DropdownMenuCheckboxItemBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = dropdown_menu_checkbox_item_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+    <% if @checked %>
+      <span data-state="checked">
+        <%= lucide_icon("check", class: "size-4") %>
+      </span>
+    <% end %>
+  </span>
+  <%= content || yield %>
+<% end %>

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

@@ -0,0 +1,15 @@
+<%# Dropdown Menu Content Component - Menu items container %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DropdownMenuContentBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = dropdown_menu_content_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= content || yield %>
+<% end %>

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

@@ -0,0 +1,24 @@
+<%# Dropdown Menu Item Component - Individual menu item %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+  @variant = local_assigns.fetch(:variant, "default")
+  @href = local_assigns.fetch(:href, nil)
+  @inset = local_assigns.fetch(:inset, false)
+
+  # Extend behavior for shared logic
+  extend UI::DropdownMenuItemBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = dropdown_menu_item_html_attributes.deep_merge(@attributes)
+-%>
+<% if @href %>
+  <%= content_tag :a, all_attributes.merge(href: @href) do %>
+    <%= content || yield %>
+  <% end %>
+<% else %>
+  <%= content_tag :div, all_attributes do %>
+    <%= content || yield %>
+  <% end %>
+<% end %>

data/app/views/ui/dropdown_menu/_label.html.erb

@@ -0,0 +1,16 @@
+<%# Dropdown Menu Label Component - Label for menu sections %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+  @inset = local_assigns.fetch(:inset, false)
+
+  # Extend behavior for shared logic
+  extend UI::DropdownMenuLabelBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = dropdown_menu_label_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/dropdown_menu/_radio_group.html.erb

@@ -0,0 +1,15 @@
+<%# Dropdown Menu Radio Group Component - Container for radio items %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DropdownMenuRadioGroupBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = dropdown_menu_radio_group_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/dropdown_menu/_radio_item.html.erb

@@ -0,0 +1,27 @@
+<%# Dropdown Menu Radio Item Component - Menu item with radio state %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @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)
+
+  # Extend behavior for shared logic
+  extend UI::DropdownMenuRadioItemBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = dropdown_menu_radio_item_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+    <% if @checked %>
+      <span data-state="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="lucide lucide-circle size-2 fill-current">
+          <circle cx="12" cy="12" r="10"></circle>
+        </svg>
+      </span>
+    <% end %>
+  </span>
+  <%= content || yield %>
+<% end %>

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

@@ -0,0 +1,12 @@
+<%# Dropdown Menu Separator Component - Visual separator %>
+<%
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DropdownMenuSeparatorBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = dropdown_menu_separator_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, "", all_attributes %>

data/app/views/ui/dropdown_menu/_shortcut.html.erb

@@ -0,0 +1,15 @@
+<%# Dropdown Menu Shortcut Component - Keyboard shortcut indicator %>
+<%
+  content ||= local_assigns.fetch(:content, nil)
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DropdownMenuShortcutBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = dropdown_menu_shortcut_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :span, all_attributes do %>
+  <%= content || yield %>
+<% end %>

data/app/views/ui/dropdown_menu/_sub.html.erb

@@ -0,0 +1,14 @@
+<%# Dropdown Menu Sub Component - Container for submenu %>
+<%
+  @classes = local_assigns.fetch(:classes, "")
+  @attributes = local_assigns.fetch(:attributes, {})
+
+  # Extend behavior for shared logic
+  extend UI::DropdownMenuSubBehavior
+
+  # Get HTML attributes from behavior
+  all_attributes = dropdown_menu_sub_html_attributes.deep_merge(@attributes)
+-%>
+<%= content_tag :div, all_attributes do %>
+  <%= yield %>
+<% end %>