fernandes-ui 0.1.0

data/app/behaviors/ui/drawer_content_behavior.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Drawer Content component
+    # Handles draggable panel styling, direction variants, and animations
+    module UI::DrawerContentBehavior
+      # Base CSS classes for drawer content
+      # Direction-aware positioning with animations
+      def drawer_content_base_classes
+        [
+          # Base structure with group for child targeting
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+
+          # Pointer events control - prevent interaction when closed, enable when open
+          "data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none",
+
+          # Note: NO CSS transitions - JavaScript controls all animations via inline styles
+          # This prevents conflicts between CSS and JS transitions
+
+          # Bottom direction (default)
+          "data-[vaul-drawer-direction=bottom]:inset-x-0",
+          "data-[vaul-drawer-direction=bottom]:bottom-0",
+          "data-[vaul-drawer-direction=bottom]:mt-24",
+          "data-[vaul-drawer-direction=bottom]:max-h-[80vh]",
+          "data-[vaul-drawer-direction=bottom]:rounded-t-lg",
+          "data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=bottom]:data-[state=closed]:translate-y-full",
+          "data-[vaul-drawer-direction=bottom]:data-[state=open]:translate-y-0",
+
+          # Top direction
+          "data-[vaul-drawer-direction=top]:inset-x-0",
+          "data-[vaul-drawer-direction=top]:top-0",
+          "data-[vaul-drawer-direction=top]:mb-24",
+          "data-[vaul-drawer-direction=top]:max-h-[80vh]",
+          "data-[vaul-drawer-direction=top]:rounded-b-lg",
+          "data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=top]:data-[state=closed]:-translate-y-full",
+          "data-[vaul-drawer-direction=top]:data-[state=open]:translate-y-0",
+
+          # Right direction
+          "data-[vaul-drawer-direction=right]:inset-y-0",
+          "data-[vaul-drawer-direction=right]:right-0",
+          "data-[vaul-drawer-direction=right]:w-3/4",
+          "data-[vaul-drawer-direction=right]:border-l",
+          "data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=right]:data-[state=closed]:translate-x-full",
+          "data-[vaul-drawer-direction=right]:data-[state=open]:translate-x-0",
+
+          # Left direction
+          "data-[vaul-drawer-direction=left]:inset-y-0",
+          "data-[vaul-drawer-direction=left]:left-0",
+          "data-[vaul-drawer-direction=left]:w-3/4",
+          "data-[vaul-drawer-direction=left]:border-r",
+          "data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:data-[state=closed]:-translate-x-full",
+          "data-[vaul-drawer-direction=left]:data-[state=open]:translate-x-0"
+        ].join(" ")
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def drawer_content_classes
+        TailwindMerge::Merger.new.merge([drawer_content_base_classes, @classes].compact.join(" "))
+      end
+
+      # Data attributes for Stimulus target (go inside data: hash)
+      def drawer_content_data_attributes
+        attrs = {
+          ui__drawer_target: "content"
+        }
+
+        # Add action for pointer events (drag handling)
+        attrs[:action] = [
+          "pointerdown->ui--drawer#handlePointerDown",
+          "pointermove->ui--drawer#handlePointerMove",
+          "pointerup->ui--drawer#handlePointerUp",
+          "pointercancel->ui--drawer#handlePointerCancel"
+        ].join(" ")
+
+        attrs
+      end
+
+      # Merge user-provided data attributes
+      def merged_drawer_content_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(drawer_content_data_attributes)
+      end
+
+      # Build complete HTML attributes hash for drawer content
+      def drawer_content_html_attributes
+        direction = @direction || "bottom"
+
+        base_attrs = @attributes&.except(:data) || {}
+        attrs = base_attrs.merge(
+          class: drawer_content_classes,
+          role: "dialog",
+          "aria-modal": "true",
+          "data-state": @open ? "open" : "closed",
+          "data-vaul-drawer": "",
+          "data-vaul-drawer-direction": direction,
+          data: merged_drawer_content_data_attributes
+        )
+        # Add inert when closed to prevent focus on elements inside
+        attrs[:inert] = true unless @open
+        attrs
+      end
+    end

data/app/behaviors/ui/drawer_description_behavior.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Drawer Description component
+    # ARIA-compliant description for drawer
+    module UI::DrawerDescriptionBehavior
+      # Base CSS classes for drawer description
+      def drawer_description_base_classes
+        "text-muted-foreground text-sm"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def drawer_description_classes
+        TailwindMerge::Merger.new.merge([drawer_description_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for description
+      def drawer_description_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(class: drawer_description_classes)
+      end
+    end

data/app/behaviors/ui/drawer_footer_behavior.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Drawer Footer component
+    # Action area for drawer (buttons, etc.)
+    module UI::DrawerFooterBehavior
+      # Base CSS classes for drawer footer
+      def drawer_footer_base_classes
+        "mt-auto flex flex-col gap-2 p-4"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def drawer_footer_classes
+        TailwindMerge::Merger.new.merge([drawer_footer_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for footer
+      def drawer_footer_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(class: drawer_footer_classes)
+      end
+    end

data/app/behaviors/ui/drawer_handle_behavior.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Drawer Handle component
+    # Visual affordance for drag gesture (shown on bottom/top drawers only)
+    module UI::DrawerHandleBehavior
+      # Base CSS classes for handle container
+      def drawer_handle_container_base_classes
+        [
+          "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full",
+          # Only show for bottom direction (matching shadcn/ui implementation)
+          "group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+        ].join(" ")
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def drawer_handle_classes
+        TailwindMerge::Merger.new.merge([drawer_handle_container_base_classes, @classes].compact.join(" "))
+      end
+
+      # Data attributes for handle (Stimulus target only)
+      def drawer_handle_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge({
+          ui__drawer_target: "handle"
+        })
+      end
+
+      # Build complete HTML attributes hash for handle
+      def drawer_handle_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: drawer_handle_classes,
+          "aria-hidden": "true",
+          "data-vaul-handle": "",
+          data: drawer_handle_data_attributes
+        )
+      end
+    end

data/app/behaviors/ui/drawer_header_behavior.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Drawer Header component
+    # Reuses Dialog header pattern with drawer-specific spacing
+    module UI::DrawerHeaderBehavior
+      # Base CSS classes for drawer header
+      def drawer_header_base_classes
+        [
+          "flex flex-col gap-0.5 p-4",
+          # Center text for bottom/top drawers, left-align on desktop
+          "group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center",
+          "group-data-[vaul-drawer-direction=top]/drawer-content:text-center",
+          "md:gap-1.5 md:text-left"
+        ].join(" ")
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def drawer_header_classes
+        TailwindMerge::Merger.new.merge([drawer_header_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for header
+      def drawer_header_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(class: drawer_header_classes)
+      end
+    end

data/app/behaviors/ui/drawer_overlay_behavior.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Drawer Overlay component
+    # Handles backdrop/overlay styling and attributes for Vaul drawer
+    module UI::DrawerOverlayBehavior
+      # Base CSS classes for overlay backdrop
+      # Animated background overlay with fade transition
+      def drawer_overlay_base_classes
+        [
+          "fixed inset-0 z-50 bg-black/50",
+          "transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
+          "data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
+          "data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none"
+        ].join(" ")
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def drawer_overlay_classes
+        TailwindMerge::Merger.new.merge([drawer_overlay_base_classes].compact.join(" "))
+      end
+
+      # Container wrapper classes
+      # Always visible to allow animations - control visibility via pointer-events
+      def drawer_overlay_container_base_classes
+        "fixed inset-0 z-50 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none"
+      end
+
+      # Merge container base classes with custom classes
+      def drawer_overlay_container_classes
+        TailwindMerge::Merger.new.merge([drawer_overlay_container_base_classes, @classes].compact.join(" "))
+      end
+
+      # Data attributes for container
+      def drawer_overlay_container_data_attributes
+        {
+          ui__drawer_target: "container"
+        }
+      end
+
+      # Data attributes for overlay backdrop (Stimulus only)
+      def drawer_overlay_data_attributes
+        {
+          ui__drawer_target: "overlay",
+          action: "click->ui--drawer#closeOnOverlayClick"
+        }
+      end
+
+      # Merge user-provided data attributes for container
+      def merged_drawer_overlay_container_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(drawer_overlay_container_data_attributes)
+      end
+
+      # Build complete HTML attributes hash for container wrapper
+      def drawer_overlay_container_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: drawer_overlay_container_classes,
+          "data-state": @open ? "open" : "closed",
+          data: merged_drawer_overlay_container_data_attributes
+        )
+      end
+
+      # Build complete HTML attributes hash for overlay backdrop
+      def drawer_overlay_html_attributes
+        {
+          class: drawer_overlay_classes,
+          "data-state": @open ? "open" : "closed",
+          "data-vaul-overlay": "",
+          data: drawer_overlay_data_attributes
+        }
+      end
+    end

data/app/behaviors/ui/drawer_title_behavior.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Drawer Title component
+    # ARIA-compliant heading for drawer
+    module UI::DrawerTitleBehavior
+      # Base CSS classes for drawer title
+      def drawer_title_base_classes
+        "text-foreground font-semibold"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def drawer_title_classes
+        TailwindMerge::Merger.new.merge([drawer_title_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for title
+      def drawer_title_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(
+          class: drawer_title_classes,
+          role: "heading"
+        )
+      end
+    end

data/app/behaviors/ui/drawer_trigger_behavior.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+    # Shared behavior for Drawer Trigger component
+    # Opens drawer on click, supports asChild pattern
+    module UI::DrawerTriggerBehavior
+      # Data attributes for trigger
+      def drawer_trigger_data_attributes
+        { action: "click->ui--drawer#open" }
+      end
+
+      # Build complete trigger attributes (for asChild pattern)
+      def drawer_trigger_html_attributes
+        {
+          data: drawer_trigger_data_attributes,
+          **@attributes
+        }
+      end
+    end

data/app/behaviors/ui/dropdown_menu_behavior.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+    # DropdownMenuBehavior
+    #
+    # Shared behavior for DropdownMenu component across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent styling and HTML attribute generation.
+    module UI::DropdownMenuBehavior
+      # Returns HTML attributes for the dropdown menu container
+      # When used with asChild, these attributes will be yielded to the child
+      def dropdown_menu_html_attributes
+        attrs = {
+          data: dropdown_menu_data_attributes
+        }
+
+        # Only add container classes if not using asChild
+        # When asChild is true, we don't render a wrapper
+        unless @as_child
+          attrs[:class] = dropdown_menu_classes
+        end
+
+        attrs
+      end
+
+      # Returns combined CSS classes for the dropdown menu
+      def dropdown_menu_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          "relative inline-block text-left",
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus controller
+      def dropdown_menu_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        (attributes_value&.fetch(:data, {}) || {}).merge({
+          controller: "ui--dropdown",
+          "ui--dropdown-placement-value": @placement,
+          "ui--dropdown-offset-value": @offset,
+          "ui--dropdown-flip-value": @flip
+        })
+      end
+    end

data/app/behaviors/ui/dropdown_menu_checkbox_item_behavior.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+    # DropdownMenuCheckboxItemBehavior
+    #
+    # Shared behavior for DropdownMenuCheckboxItem component across ERB, ViewComponent, and Phlex implementations.
+    module UI::DropdownMenuCheckboxItemBehavior
+      # Returns HTML attributes for the checkbox item
+      def dropdown_menu_checkbox_item_html_attributes
+        attrs = {
+          class: dropdown_menu_checkbox_item_classes,
+          data: dropdown_menu_checkbox_item_data_attributes,
+          role: "menuitemcheckbox",
+          "aria-checked": @checked,
+          tabindex: "-1"
+        }
+
+        attrs
+      end
+
+      # Returns combined CSS classes for the checkbox item
+      def dropdown_menu_checkbox_item_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+
+        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus
+      def dropdown_menu_checkbox_item_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        data_attrs = (attributes_value&.fetch(:data, {}) || {}).merge({
+          "ui--dropdown-target": "item",
+          action: "mouseenter->ui--dropdown#trackHoveredItem click->ui--dropdown#toggleCheckbox",
+          state: @checked ? "checked" : "unchecked"
+        })
+
+        data_attrs[:disabled] = true if @disabled
+        data_attrs
+      end
+
+      # Renders the checkbox indicator
+      def checkbox_indicator
+        # This will be implemented in the actual components
+        @checked
+      end
+    end

data/app/behaviors/ui/dropdown_menu_content_behavior.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+    # DropdownMenuContentBehavior
+    #
+    # Shared behavior for DropdownMenuContent component across ERB, ViewComponent, and Phlex implementations.
+    module UI::DropdownMenuContentBehavior
+      # Returns HTML attributes for the content container
+      def dropdown_menu_content_html_attributes
+        {
+          class: dropdown_menu_content_classes,
+          data: dropdown_menu_content_data_attributes,
+          role: "menu",
+          tabindex: "-1"
+        }
+      end
+
+      # Returns combined CSS classes for the content
+      def dropdown_menu_content_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--ui-dropdown-menu-content-available-height) min-w-[8rem] origin-(--ui-dropdown-menu-content-transform-origin) overflow-visible rounded-md border p-1 shadow-md absolute"
+
+        TailwindMerge::Merger.new.merge([
+          "hidden absolute",
+          base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus target
+      def dropdown_menu_content_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        (attributes_value&.fetch(:data, {}) || {}).merge({
+          "ui--dropdown-target": "content",
+          state: "closed"
+        })
+      end
+    end

data/app/behaviors/ui/dropdown_menu_item_behavior.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+    # DropdownMenuItemBehavior
+    #
+    # Shared behavior for DropdownMenuItem component across ERB, ViewComponent, and Phlex implementations.
+    module UI::DropdownMenuItemBehavior
+      # Returns HTML attributes for the menu item
+      def dropdown_menu_item_html_attributes
+        {
+          class: dropdown_menu_item_classes,
+          data: dropdown_menu_item_data_attributes,
+          role: "menuitem",
+          tabindex: "-1"
+        }.tap do |attrs|
+          attrs[:href] = @href if @href
+        end
+      end
+
+      # Returns combined CSS classes for the menu item
+      def dropdown_menu_item_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset=true]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+
+        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus target and actions
+      def dropdown_menu_item_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        existing_action = (attributes_value&.fetch(:data, {}) || {}).fetch(:action, "")
+        combined_action = [existing_action, "mouseenter->ui--dropdown#trackHoveredItem"].reject(&:empty?).join(" ")
+
+        (attributes_value&.fetch(:data, {}) || {}).merge({
+          "ui--dropdown-target": "item",
+          action: combined_action,
+          inset: @inset,
+          variant: @variant
+        })
+      end
+    end

data/app/behaviors/ui/dropdown_menu_label_behavior.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+    # DropdownMenuLabelBehavior
+    #
+    # Shared behavior for DropdownMenuLabel component across ERB, ViewComponent, and Phlex implementations.
+    module UI::DropdownMenuLabelBehavior
+      # Returns HTML attributes for the label
+      def dropdown_menu_label_html_attributes
+        {
+          class: dropdown_menu_label_classes,
+          data: dropdown_menu_label_data_attributes
+        }
+      end
+
+      # Returns combined CSS classes for the label
+      def dropdown_menu_label_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "px-2 py-1.5 text-sm font-medium data-[inset=true]:pl-8"
+
+        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+      end
+
+      # Returns data attributes
+      def dropdown_menu_label_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        data_attrs = (attributes_value&.fetch(:data, {}) || {}).dup
+        data_attrs[:inset] = @inset if @inset
+        data_attrs
+      end
+    end

data/app/behaviors/ui/dropdown_menu_radio_group_behavior.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+    # DropdownMenuRadioGroupBehavior
+    #
+    # Shared behavior for DropdownMenuRadioGroup component across ERB, ViewComponent, and Phlex implementations.
+    module UI::DropdownMenuRadioGroupBehavior
+      # Returns HTML attributes for the radio group
+      def dropdown_menu_radio_group_html_attributes
+        {
+          class: dropdown_menu_radio_group_classes,
+          role: "group"
+        }
+      end
+
+      # Returns combined CSS classes for the radio group
+      def dropdown_menu_radio_group_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([classes_value].compact.join(" "))
+      end
+    end

data/app/behaviors/ui/dropdown_menu_radio_item_behavior.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+    # DropdownMenuRadioItemBehavior
+    #
+    # Shared behavior for DropdownMenuRadioItem component across ERB, ViewComponent, and Phlex implementations.
+    module UI::DropdownMenuRadioItemBehavior
+      # Returns HTML attributes for the radio item
+      def dropdown_menu_radio_item_html_attributes
+        attrs = {
+          class: dropdown_menu_radio_item_classes,
+          data: dropdown_menu_radio_item_data_attributes,
+          role: "menuitemradio",
+          "aria-checked": @checked,
+          tabindex: "-1"
+        }
+
+        attrs
+      end
+
+      # Returns combined CSS classes for the radio item
+      def dropdown_menu_radio_item_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+
+        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus
+      def dropdown_menu_radio_item_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        data_attrs = (attributes_value&.fetch(:data, {}) || {}).merge({
+          "ui--dropdown-target": "item",
+          action: "mouseenter->ui--dropdown#trackHoveredItem click->ui--dropdown#selectRadio",
+          state: @checked ? "checked" : "unchecked"
+        })
+
+        data_attrs[:disabled] = true if @disabled
+        data_attrs
+      end
+
+      # Renders the radio indicator
+      def radio_indicator
+        # This will be implemented in the actual components
+        @checked
+      end
+    end

data/app/behaviors/ui/dropdown_menu_separator_behavior.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+    # DropdownMenuSeparatorBehavior
+    #
+    # Shared behavior for DropdownMenuSeparator component across ERB, ViewComponent, and Phlex implementations.
+    module UI::DropdownMenuSeparatorBehavior
+      # Returns HTML attributes for the separator
+      def dropdown_menu_separator_html_attributes
+        {
+          class: dropdown_menu_separator_classes,
+          role: "separator",
+          "aria-orientation": "horizontal"
+        }
+      end
+
+      # Returns combined CSS classes for the separator
+      def dropdown_menu_separator_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "bg-border -mx-1 my-1 h-px"
+
+        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+      end
+    end

data/app/behaviors/ui/dropdown_menu_shortcut_behavior.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+    # DropdownMenuShortcutBehavior
+    #
+    # Shared behavior for DropdownMenuShortcut component across ERB, ViewComponent, and Phlex implementations.
+    module UI::DropdownMenuShortcutBehavior
+      # Returns HTML attributes for the shortcut
+      def dropdown_menu_shortcut_html_attributes
+        {
+          class: dropdown_menu_shortcut_classes
+        }
+      end
+
+      # Returns combined CSS classes for the shortcut
+      def dropdown_menu_shortcut_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "text-muted-foreground ml-auto text-xs tracking-widest"
+
+        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+      end
+    end