fernandes-ui 0.1.0

data/app/view_components/ui/hover_card_content_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+    # ContentComponent - ViewComponent implementation
+    #
+    # The content that appears on hover.
+    # Uses HoverCardContentBehavior for shared styling logic.
+    #
+    # @example Basic usage
+    #   <%= render UI::ContentComponent.new { "Hover card content" } %>
+    #
+    # @example With custom alignment
+    #   <%= render UI::ContentComponent.new(align: "start", side_offset: 8) do %>
+    #     Content here
+    #   <% end %>
+    class UI::HoverCardContentComponent < ViewComponent::Base
+      include UI::HoverCardContentBehavior
+
+      # @param align [String] Alignment of the content ("start", "center", "end")
+      # @param side_offset [Integer] Distance in pixels from the trigger
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(align: "center", side_offset: 4, classes: "", **attributes)
+        @align = align
+        @side_offset = side_offset
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        attrs = content_html_attributes
+
+        content_tag :div, **attrs.merge(@attributes) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/hover_card_trigger_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+    # TriggerComponent - ViewComponent implementation
+    #
+    # Element that triggers the hover card on hover.
+    # Uses HoverCardTriggerBehavior for shared styling logic.
+    # Supports asChild pattern for composition.
+    #
+    # @example Basic usage
+    #   <%= render UI::TriggerComponent.new { "Hover me" } %>
+    #
+    # @example With asChild - compose with Button (yields attributes)
+    #   <%= render UI::TriggerComponent.new(as_child: true) do |trigger_attrs| %>
+    #     <%= render UI::ButtonComponent.new(**trigger_attrs, variant: :link) { "@nextjs" } %>
+    #   <% end %>
+    #
+    # @example With custom tag
+    #   <%= render UI::TriggerComponent.new(tag: :a, href: "#") { "Link" } %>
+    class UI::HoverCardTriggerComponent < ViewComponent::Base
+      include UI::HoverCardTriggerBehavior
+
+      # @param as_child [Boolean] If true, yields attributes to block instead of wrapping
+      # @param tag [Symbol] HTML tag to use for the trigger (default: :span)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, tag: :span, classes: "", **attributes)
+        @as_child = as_child
+        @tag = tag
+        @classes = classes
+        @attributes = attributes
+      end
+
+      # Override render_in to pass trigger_attrs to block when as_child is true
+      def render_in(view_context, &block)
+        @view_context = view_context
+
+        if @as_child && block
+          # asChild pattern: call the block with trigger attributes
+          # Block should use these attrs on the actual trigger element
+          view_context.capture(trigger_html_attributes, &block)
+        else
+          super
+        end
+      end
+
+      def call
+        # Default: render with full styling and tabindex for keyboard focus
+        attrs = trigger_html_attributes.merge(@attributes)
+        attrs[:tabindex] ||= "0" if @tag == :span || @tag == :div
+        content_tag @tag, **attrs do
+          content
+        end
+      end
+    end

data/app/view_components/ui/inline_code_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module UI
+  class UI::InlineCodeComponent < ViewComponent::Base
+    def initialize(classes: nil, **attributes)
+      @classes = classes
+      @attributes = attributes
+    end
+
+    def call
+      extend UI::InlineCodeBehavior
+      attrs = inline_code_html_attributes
+      content_tag :code, **attrs.merge(@attributes) do
+        content
+      end
+    end
+  end
+end

data/app/view_components/ui/input_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+    class UI::InputComponent < ViewComponent::Base
+      include UI::InputBehavior
+
+      def initialize(type: "text", placeholder: nil, value: nil, name: nil, id: nil, classes: "", **attributes)
+        @type = type
+        @placeholder = placeholder
+        @value = value
+        @name = name
+        @id = id
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        tag.input(**input_html_attributes.merge(@attributes))
+      end
+
+      private
+
+      attr_reader :classes, :attributes
+    end

data/app/view_components/ui/input_group_addon_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+    # InputGroupAddonComponent - ViewComponent implementation
+    #
+    # An addon element for input groups that can contain text, icons, or other elements.
+    # Uses InputGroupAddonBehavior concern for shared styling logic.
+    #
+    # @example Text addon
+    #   <%= render UI::InputGroupAddonComponent.new(align: "inline-start") do %>
+    #     @
+    #   <% end %>
+    #
+    # @example Button addon
+    #   <%= render UI::InputGroupAddonComponent.new(align: "inline-end") do %>
+    #     <%= render UI::InputGroupButtonComponent.new do %>
+    #       Submit
+    #     <% end %>
+    #   <% end %>
+    class UI::InputGroupAddonComponent < ViewComponent::Base
+      include UI::InputGroupAddonBehavior
+
+      # @param align [String] Alignment position: "inline-start", "inline-end", "block-start", "block-end"
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(align: "inline-start", classes: "", **attributes)
+        @align = align
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, **input_group_addon_html_attributes do
+          content
+        end
+      end
+    end

data/app/view_components/ui/input_group_button_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+    # InputGroupButtonComponent - ViewComponent implementation
+    #
+    # A button component specifically styled for use within input groups.
+    # Uses InputGroupButtonBehavior concern for shared styling logic.
+    #
+    # @example Basic button
+    #   <%= render UI::InputGroupButtonComponent.new do %>
+    #     Search
+    #   <% end %>
+    #
+    # @example Icon button
+    #   <%= render UI::InputGroupButtonComponent.new(size: "icon-xs") do %>
+    #     <svg>...</svg>
+    #   <% end %>
+    class UI::InputGroupButtonComponent < ViewComponent::Base
+      include UI::InputGroupButtonBehavior
+
+      # @param size [String] Size variant: "xs", "sm", "icon-xs", "icon-sm"
+      # @param variant [String] Button variant (default: "ghost")
+      # @param type [String] Button type attribute (default: "button")
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(size: "xs", variant: "ghost", type: "button", classes: "", **attributes)
+        @size = size
+        @variant = variant
+        @type = type
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render partial: "ui/button", locals: input_group_button_attributes.merge(content: content)
+      end
+    end

data/app/view_components/ui/input_group_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+    # InputGroupComponent - ViewComponent implementation
+    #
+    # A wrapper component for grouping inputs with addons, buttons, and text.
+    # Uses InputGroupBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   <%= render UI::InputGroupComponent.new do %>
+    #     <%= render UI::InputGroupInputComponent.new(placeholder: "Enter text") %>
+    #   <% end %>
+    #
+    # @example With addons
+    #   <%= render UI::InputGroupComponent.new do %>
+    #     <%= render UI::InputGroupAddonComponent.new(align: "inline-start") do %>
+    #       @
+    #     <% end %>
+    #     <%= render UI::InputGroupInputComponent.new(placeholder: "username") %>
+    #   <% end %>
+    class UI::InputGroupComponent < ViewComponent::Base
+      include UI::InputGroupBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, **input_group_html_attributes do
+          content
+        end
+      end
+    end

data/app/view_components/ui/input_group_input_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+    # InputGroupInputComponent - ViewComponent implementation
+    #
+    # An input element styled for use within input groups.
+    # Uses InputGroupInputBehavior concern for shared styling logic.
+    #
+    # @example Basic input
+    #   <%= render UI::InputGroupInputComponent.new(
+    #     placeholder: "Enter text",
+    #     name: "username"
+    #   ) %>
+    #
+    # @example With type
+    #   <%= render UI::InputGroupInputComponent.new(
+    #     type: "email",
+    #     placeholder: "email@example.com"
+    #   ) %>
+    class UI::InputGroupInputComponent < ViewComponent::Base
+      include UI::InputGroupInputBehavior
+
+      # @param type [String] Input type (default: "text")
+      # @param placeholder [String] Placeholder text
+      # @param value [String] Input value
+      # @param name [String] Input name attribute
+      # @param id [String] Input id attribute
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(type: "text", placeholder: nil, value: nil, name: nil, id: nil, classes: "", **attributes)
+        @type = type
+        @placeholder = placeholder
+        @value = value
+        @name = name
+        @id = id
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render partial: "ui/input", locals: input_group_input_attributes
+      end
+    end

data/app/view_components/ui/input_group_text_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+    # InputGroupTextComponent - ViewComponent implementation
+    #
+    # A text element for displaying static text within input groups.
+    # Uses InputGroupTextBehavior concern for shared styling logic.
+    #
+    # @example Simple text
+    #   <%= render UI::InputGroupTextComponent.new do %>
+    #     @
+    #   <% end %>
+    #
+    # @example With icon
+    #   <%= render UI::InputGroupTextComponent.new do %>
+    #     <svg class="size-4">...</svg>
+    #     Username
+    #   <% end %>
+    class UI::InputGroupTextComponent < ViewComponent::Base
+      include UI::InputGroupTextBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :span, **input_group_text_html_attributes do
+          content
+        end
+      end
+    end

data/app/view_components/ui/input_group_textarea_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+    # InputGroupTextareaComponent - ViewComponent implementation
+    #
+    # A textarea element styled for use within input groups.
+    # Uses InputGroupTextareaBehavior concern for shared styling logic.
+    #
+    # @example Basic textarea
+    #   <%= render UI::InputGroupTextareaComponent.new(
+    #     placeholder: "Enter your message",
+    #     rows: 3
+    #   ) %>
+    #
+    # @example With name
+    #   <%= render UI::InputGroupTextareaComponent.new(
+    #     placeholder: "Description",
+    #     name: "description"
+    #   ) %>
+    class UI::InputGroupTextareaComponent < ViewComponent::Base
+      include UI::InputGroupTextareaBehavior
+
+      # @param placeholder [String] Placeholder text
+      # @param value [String] Textarea value
+      # @param name [String] Textarea name attribute
+      # @param id [String] Textarea id attribute
+      # @param rows [Integer] Number of visible text lines
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(placeholder: nil, value: nil, name: nil, id: nil, rows: nil, classes: "", **attributes)
+        @placeholder = placeholder
+        @value = value
+        @name = name
+        @id = id
+        @rows = rows
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render partial: "ui/textarea", locals: input_group_textarea_attributes
+      end
+    end

data/app/view_components/ui/input_otp_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+    # InputOtpComponent - ViewComponent implementation
+    #
+    # Accessible one-time password container component.
+    # Supports both composition (with Group/Slot/Separator) and auto-generation.
+    #
+    # @example With composition
+    #   <%= render UI::InputOtpComponent.new(length: 6) do %>
+    #     <%= render UI::InputOtpGroupComponent.new do %>
+    #       <%= render UI::InputOtpSlotComponent.new(index: 0) %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example Auto-generated
+    #   <%= render UI::InputOtpComponent.new(length: 6) %>
+    class UI::InputOtpComponent < ViewComponent::Base
+      include UI::InputOtpBehavior
+
+      # @param length [Integer] Maximum number of OTP characters
+      # @param pattern [String] Regex pattern for valid characters (default: digits only)
+      # @param name [String] Form input name
+      # @param id [String] HTML id attribute
+      # @param disabled [Boolean] Whether inputs are disabled
+      # @param classes [String] Additional CSS classes
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(length: 6, pattern: "\\d", name: nil, id: nil, disabled: false, classes: "", **attributes)
+        @length = length
+        @pattern = pattern
+        @name = name
+        @id = id
+        @disabled = disabled
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        attrs = input_otp_html_attributes
+        attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+
+        content_tag :div, **attrs.merge(@attributes.except(:data)) do
+          if content.present?
+            content
+          else
+            # Auto-generate inputs wrapped in InputOtpGroupComponent
+            render(UI::InputOtpGroupComponent.new) do
+              safe_join(
+                @length.times.map do |i|
+                  render(UI::InputOtpSlotComponent.new(
+                    index: i,
+                    name: @name ? "#{@name}[#{i}]" : nil,
+                    id: @id ? "#{@id}_#{i}" : nil,
+                    disabled: @disabled
+                  ))
+                end
+              )
+            end
+          end
+        end
+      end
+    end

data/app/view_components/ui/input_otp_group_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+    # GroupComponent - ViewComponent implementation
+    #
+    # Container for grouping OTP input slots together visually.
+    #
+    # @example
+    #   <%= render UI::GroupComponent.new do %>
+    #     <%= render UI::SlotComponent.new(index: 0) %>
+    #     <%= render UI::SlotComponent.new(index: 1) %>
+    #   <% end %>
+    class UI::InputOtpGroupComponent < ViewComponent::Base
+      include UI::InputOtpGroupBehavior
+
+      # @param classes [String] Additional CSS classes
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        attrs = input_otp_group_html_attributes
+
+        content_tag :div, **attrs.merge(@attributes) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/input_otp_separator_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+    # SeparatorComponent - ViewComponent implementation
+    #
+    # Visual divider between OTP input groups.
+    #
+    # @example
+    #   <%= render UI::SeparatorComponent.new %>
+    class UI::InputOtpSeparatorComponent < ViewComponent::Base
+      include UI::InputOtpSeparatorBehavior
+
+      # @param classes [String] Additional CSS classes
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        attrs = input_otp_separator_html_attributes
+
+        content_tag :div, **attrs.merge(@attributes) do
+          # Render dot or dash separator
+          content_tag :svg,
+            nil,
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "15",
+            height: "15",
+            viewBox: "0 0 15 15",
+            fill: "none",
+            class: "size-4 opacity-50" do
+            tag.rect(x: "4", y: "7", width: "7", height: "1", fill: "currentColor", rx: "0.5")
+          end
+        end
+      end
+    end

data/app/view_components/ui/input_otp_slot_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # SlotComponent - ViewComponent implementation
+    #
+    # Individual OTP input slot for a single character.
+    #
+    # @example
+    #   <%= render UI::SlotComponent.new(index: 0, value: "1") %>
+    class UI::InputOtpSlotComponent < ViewComponent::Base
+      include UI::InputOtpSlotBehavior
+
+      # @param index [Integer] Index of the slot in the OTP sequence
+      # @param value [String] Character value to display in the slot
+      # @param name [String] Form input name
+      # @param id [String] HTML id attribute
+      # @param disabled [Boolean] Whether input is disabled
+      # @param classes [String] Additional CSS classes
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(index: 0, value: "", name: nil, id: nil, disabled: false, classes: "", **attributes)
+        @index = index
+        @value = value
+        @name = name
+        @id = id
+        @disabled = disabled
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        tag.input(**input_otp_slot_html_attributes.merge(@attributes))
+      end
+    end

data/app/view_components/ui/item_actions_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+    class UI::ItemActionsComponent < ViewComponent::Base
+      include UI::ItemActionsBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, content, **item_actions_html_attributes
+      end
+
+      private
+
+      attr_reader :classes, :attributes
+    end

data/app/view_components/ui/item_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+    class UI::ItemComponent < ViewComponent::Base
+      include UI::ItemBehavior
+      include UI::SharedAsChildBehavior
+
+      def initialize(variant: "default", size: "default", as_child: false, classes: "", **attributes)
+        @variant = variant
+        @size = size
+        @as_child = as_child
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        item_attrs = item_html_attributes.merge(@attributes)
+
+        if @as_child
+          # Yield attributes to block - child element will receive them
+          yield(item_attrs) if block_given?
+        else
+          # Default: render as div
+          content_tag :div, content, **item_attrs
+        end
+      end
+
+      private
+
+      attr_reader :variant, :size, :as_child, :classes, :attributes
+    end

data/app/view_components/ui/item_content_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+    class UI::ItemContentComponent < ViewComponent::Base
+      include UI::ItemContentBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, content, **item_content_html_attributes
+      end
+
+      private
+
+      attr_reader :classes, :attributes
+    end

data/app/view_components/ui/item_description_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+    class UI::ItemDescriptionComponent < ViewComponent::Base
+      include UI::ItemDescriptionBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :p, content, **item_description_html_attributes
+      end
+
+      private
+
+      attr_reader :classes, :attributes
+    end

data/app/view_components/ui/item_footer_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+    class UI::ItemFooterComponent < ViewComponent::Base
+      include UI::ItemFooterBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, content, **item_footer_html_attributes
+      end
+
+      private
+
+      attr_reader :classes, :attributes
+    end

data/app/view_components/ui/item_group_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+    class UI::ItemGroupComponent < ViewComponent::Base
+      include UI::ItemGroupBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, content, **item_group_html_attributes
+      end
+
+      private
+
+      attr_reader :classes, :attributes
+    end

data/app/view_components/ui/item_header_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+    class UI::ItemHeaderComponent < ViewComponent::Base
+      include UI::ItemHeaderBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, content, **item_header_html_attributes
+      end
+
+      private
+
+      attr_reader :classes, :attributes
+    end