fernandes-ui 0.1.0

data/app/components/ui/dropdown_menu_label.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    # Label - Phlex implementation
+    #
+    # Label for menu sections to organize items.
+    # Uses DropdownMenuLabelBehavior concern for shared styling logic.
+    #
+    # @example Basic label
+    #   render UI::Label.new { "My Account" }
+    class UI::DropdownMenuLabel < Phlex::HTML
+      include UI::DropdownMenuLabelBehavior
+
+      # @param inset [Boolean] Whether to add left padding for alignment
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(inset: false, classes: "", **attributes)
+        @inset = inset
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**dropdown_menu_label_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/dropdown_menu_radio_group.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+    # RadioGroup - Phlex implementation
+    #
+    # Container for radio items providing semantic grouping.
+    # Uses DropdownMenuRadioGroupBehavior concern for shared styling logic.
+    #
+    # @example Radio group
+    #   render UI::RadioGroup.new do
+    #     render UI::RadioItem.new(value: "top", checked: true) { "Top" }
+    #     render UI::RadioItem.new(value: "bottom") { "Bottom" }
+    #   end
+    class UI::DropdownMenuRadioGroup < Phlex::HTML
+      include UI::DropdownMenuRadioGroupBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**dropdown_menu_radio_group_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/dropdown_menu_radio_item.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+    # RadioItem - Phlex implementation
+    #
+    # Menu item with radio state for exclusive selection within a group.
+    # Uses DropdownMenuRadioItemBehavior concern for shared styling logic.
+    #
+    # @example Radio item
+    #   render UI::RadioItem.new(value: "top", checked: true) { "Top" }
+    class UI::DropdownMenuRadioItem < Phlex::HTML
+      include UI::DropdownMenuRadioItemBehavior
+
+      # @param value [String] Value of the radio item
+      # @param checked [Boolean] Whether item is checked
+      # @param disabled [Boolean] Whether item is disabled
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(value:, checked: false, disabled: false, classes: "", **attributes)
+        @value = value
+        @checked = checked
+        @disabled = disabled
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**dropdown_menu_radio_item_html_attributes.deep_merge(@attributes)) do
+          render_radio_indicator
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def render_radio_indicator
+        span(class: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center") do
+          if @checked
+            span(data: { state: "checked" }) do
+              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"
+              ) do |s|
+                s.circle(cx: "12", cy: "12", r: "10")
+              end
+            end
+          end
+        end
+      end
+    end

data/app/components/ui/dropdown_menu_separator.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+    # Separator - Phlex implementation
+    #
+    # Visual separator between menu items.
+    # Uses DropdownMenuSeparatorBehavior concern for shared styling logic.
+    #
+    # @example Basic separator
+    #   render UI::Separator.new
+    class UI::DropdownMenuSeparator < Phlex::HTML
+      include UI::DropdownMenuSeparatorBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template
+        div(**dropdown_menu_separator_html_attributes.deep_merge(@attributes))
+      end
+    end

data/app/components/ui/dropdown_menu_shortcut.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Shortcut - Phlex implementation
+    #
+    # Keyboard shortcut indicator displayed at the end of menu items.
+    # Uses DropdownMenuShortcutBehavior concern for shared styling logic.
+    #
+    # @example Shortcut
+    #   render UI::Shortcut.new { "⌘K" }
+    class UI::DropdownMenuShortcut < Phlex::HTML
+      include UI::DropdownMenuShortcutBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        span(**dropdown_menu_shortcut_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/dropdown_menu_sub.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+    # Sub - Phlex implementation
+    #
+    # Container for submenu with relative positioning.
+    # Uses DropdownMenuSubBehavior concern for shared styling logic.
+    #
+    # @example Submenu
+    #   render UI::Sub.new do
+    #     render UI::SubTrigger.new { "More Options" }
+    #     render UI::SubContent.new { "Submenu items" }
+    #   end
+    class UI::DropdownMenuSub < Phlex::HTML
+      include UI::DropdownMenuSubBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**dropdown_menu_sub_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/dropdown_menu_sub_content.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+    # SubContent - Phlex implementation
+    #
+    # Submenu items container positioned to the right of the trigger.
+    # Uses DropdownMenuSubContentBehavior concern for shared styling logic.
+    #
+    # @example Submenu content
+    #   render UI::SubContent.new do
+    #     render UI::Item.new { "Submenu Item" }
+    #   end
+    class UI::DropdownMenuSubContent < Phlex::HTML
+      include UI::DropdownMenuSubContentBehavior
+
+      # @param side [String] Side to position submenu ("right", "left", "top", "bottom")
+      # @param align [String] Alignment relative to trigger ("start", "center", "end")
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(side: "right", align: "start", classes: "", **attributes)
+        @side = side
+        @align = align
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**dropdown_menu_sub_content_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/dropdown_menu_sub_trigger.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+    # SubTrigger - Phlex implementation
+    #
+    # Item that opens a submenu on hover.
+    # Uses DropdownMenuSubTriggerBehavior concern for shared styling logic.
+    #
+    # @example Submenu trigger
+    #   render UI::SubTrigger.new { "More Options" }
+    class UI::DropdownMenuSubTrigger < Phlex::HTML
+      include UI::DropdownMenuSubTriggerBehavior
+
+      # @param inset [Boolean] Whether to add left padding for alignment
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(inset: false, classes: "", **attributes)
+        @inset = inset
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**dropdown_menu_sub_trigger_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+          render_chevron_icon
+        end
+      end
+
+      private
+
+      def render_chevron_icon
+        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: "ml-auto lucide lucide-chevron-right"
+        ) do |s|
+          s.path(d: "m9 18 6-6-6-6")
+        end
+      end
+    end

data/app/components/ui/dropdown_menu_trigger.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+    # Trigger - Phlex implementation
+    #
+    # Wrapper that adds toggle action to child element.
+    # Uses DropdownMenuTriggerBehavior concern for shared styling logic.
+    #
+    # Supports asChild pattern for composition without wrapper elements.
+    #
+    # @example Basic usage
+    #   render UI::Trigger.new { button { "Open Menu" } }
+    #
+    # @example With asChild - pass attributes to custom button
+    #   render UI::Trigger.new(as_child: true) do |trigger_attrs|
+    #     render UI::Button.new(**trigger_attrs) { "Menu" }
+    #   end
+    class UI::DropdownMenuTrigger < Phlex::HTML
+      include UI::DropdownMenuTriggerBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering wrapper
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, classes: "", **attributes)
+        @as_child = as_child
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        trigger_attrs = dropdown_menu_trigger_html_attributes.deep_merge(@attributes)
+
+        if @as_child
+          # Yield attributes to block - child receives trigger behavior
+          yield(trigger_attrs) if block_given?
+        else
+          # Default: render wrapper div with trigger behavior
+          div(**trigger_attrs) do
+            yield if block_given?
+          end
+        end
+      end
+    end

data/app/components/ui/empty.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Empty - Phlex implementation
+    #
+    # Displays empty states in applications with customizable media, titles, descriptions, and actions.
+    #
+    # @example Basic usage
+    #   render UI::Empty.new do
+    #     render UI::EmptyHeader.new do
+    #       render UI::EmptyTitle.new { "No results found" }
+    #       render UI::EmptyDescription.new { "Try adjusting your search criteria." }
+    #     end
+    #   end
+    class UI::Empty < Phlex::HTML
+      include UI::EmptyBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**empty_html_attributes.merge(@attributes), &block)
+      end
+    end

data/app/components/ui/empty_content.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+    # EmptyContent - Phlex implementation
+    #
+    # Displays the content of the empty state such as a button, input or a link.
+    #
+    # @example
+    #   render UI::EmptyContent.new do
+    #     render UI::Button.new { "Create Item" }
+    #   end
+    class UI::EmptyContent < Phlex::HTML
+      include UI::EmptyContentBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**empty_content_html_attributes.merge(@attributes), &block)
+      end
+    end

data/app/components/ui/empty_description.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+    # EmptyDescription - Phlex implementation
+    #
+    # Displays the description of the empty state.
+    #
+    # @example
+    #   render UI::EmptyDescription.new { "Try adjusting your search criteria." }
+    class UI::EmptyDescription < Phlex::HTML
+      include UI::EmptyDescriptionBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        p(**empty_description_html_attributes.merge(@attributes), &block)
+      end
+    end

data/app/components/ui/empty_header.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+    # EmptyHeader - Phlex implementation
+    #
+    # Wraps the empty media, title, and description.
+    #
+    # @example
+    #   render UI::EmptyHeader.new do
+    #     render UI::EmptyMedia.new(variant: "icon") { icon }
+    #     render UI::EmptyTitle.new { "No results" }
+    #     render UI::EmptyDescription.new { "Try adjusting your search." }
+    #   end
+    class UI::EmptyHeader < Phlex::HTML
+      include UI::EmptyHeaderBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**empty_header_html_attributes.merge(@attributes), &block)
+      end
+    end

data/app/components/ui/empty_media.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+    # EmptyMedia - Phlex implementation
+    #
+    # Displays visual content like icons or avatars.
+    #
+    # @example Icon variant
+    #   render UI::EmptyMedia.new(variant: "icon") do
+    #     svg(class: "size-6") { path(d: "...") }
+    #   end
+    #
+    # @example Default variant (for larger images/avatars)
+    #   render UI::EmptyMedia.new(variant: "default") do
+    #     img(src: "/avatar.jpg", class: "size-20 rounded-full")
+    #   end
+    class UI::EmptyMedia < Phlex::HTML
+      include UI::EmptyMediaBehavior
+
+      def initialize(variant: "default", classes: "", **attributes)
+        @variant = variant
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**empty_media_html_attributes.merge(@attributes), &block)
+      end
+    end

data/app/components/ui/empty_title.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+    # EmptyTitle - Phlex implementation
+    #
+    # Displays the title of the empty state.
+    #
+    # @example
+    #   render UI::EmptyTitle.new { "No results found" }
+    class UI::EmptyTitle < Phlex::HTML
+      include UI::EmptyTitleBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        h3(**empty_title_html_attributes.merge(@attributes), &block)
+      end
+    end

data/app/components/ui/field.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+    # Field - Phlex implementation
+    #
+    # Core wrapper for a single form field with support for different orientations.
+    # Uses FieldBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Field.new { "Field content here" }
+    #
+    # @example With orientation
+    #   render UI::Field.new(orientation: "horizontal") { "Field content" }
+    #
+    # @example With validation state
+    #   render UI::Field.new(data_invalid: true) { "Field content" }
+    class UI::Field < Phlex::HTML
+      include UI::FieldBehavior
+
+      # @param orientation [String] Layout orientation: "vertical", "horizontal", or "responsive"
+      # @param data_invalid [Boolean] Whether field is in invalid state
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(orientation: "vertical", data_invalid: nil, classes: "", **attributes)
+        @orientation = orientation
+        @data_invalid = data_invalid
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**field_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/field_content.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Content - Phlex implementation
+    #
+    # Flex column that groups control and descriptions.
+    # Uses FieldContentBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Content.new { "Content here" }
+    class UI::FieldContent < Phlex::HTML
+      include UI::FieldContentBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**field_content_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/field_description.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Description - Phlex implementation
+    #
+    # Helper text for form fields.
+    # Uses FieldDescriptionBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Description.new { "Helper text" }
+    class UI::FieldDescription < Phlex::HTML
+      include UI::FieldDescriptionBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        p(**field_description_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/field_error.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+    # Error - Phlex implementation
+    #
+    # Error message display for form fields with accessibility support.
+    # Uses FieldErrorBehavior concern for shared styling logic.
+    #
+    # @example With single error
+    #   render UI::Error.new(errors: ["Email is required"])
+    #
+    # @example With multiple errors
+    #   render UI::Error.new(errors: ["Email is required", "Email is invalid"])
+    #
+    # @example With block
+    #   render UI::Error.new { "Error message" }
+    class UI::FieldError < Phlex::HTML
+      include UI::FieldErrorBehavior
+
+      # @param errors [Array] Array of error messages
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(errors: nil, classes: "", **attributes)
+        @errors = errors
+        @classes = classes
+        @attributes = attributes
+        @block_given = false
+      end
+
+      def view_template(&block)
+        @block_given = block_given?
+        return unless has_errors? || @block_given
+
+        if has_errors?
+          render_errors
+        else
+          render_content(&block)
+        end
+      end
+
+      private
+
+      def render_errors
+        if single_error?
+          p(**field_error_html_attributes) do
+            plain error_message(@errors.first)
+          end
+        else
+          ul(**field_error_html_attributes) do
+            @errors.each do |error|
+              li { plain error_message(error) }
+            end
+          end
+        end
+      end
+
+      def render_content(&block)
+        p(**field_error_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/field_group.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+    # Group - Phlex implementation
+    #
+    # Layout wrapper that stacks Field components.
+    # Uses FieldGroupBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Group.new do
+    #     render UI::Field.new { "Field 1" }
+    #     render UI::Field.new { "Field 2" }
+    #   end
+    class UI::FieldGroup < Phlex::HTML
+      include UI::FieldGroupBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**field_group_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/field_label.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    # Label - Phlex implementation
+    #
+    # Label styled for form fields with disability states.
+    # Uses FieldLabelBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Label.new(for_id: "email") { "Email Address" }
+    class UI::FieldLabel < Phlex::HTML
+      include UI::FieldLabelBehavior
+
+      # @param for_id [String] ID of the associated form control
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(for_id: nil, classes: "", **attributes)
+        @for_id = for_id
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        label(**field_label_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end