fernandes-ui 0.1.0

data/app/components/ui/field_legend.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+    # Legend - Phlex implementation
+    #
+    # Legend element for FieldSet with variant support.
+    # Uses FieldLegendBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Legend.new { "Personal Information" }
+    #
+    # @example With variant
+    #   render UI::Legend.new(variant: "label") { "Settings" }
+    class UI::FieldLegend < Phlex::HTML
+      include UI::FieldLegendBehavior
+
+      # @param variant [String] Style variant: "legend" or "label"
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(variant: "legend", classes: "", **attributes)
+        @variant = variant
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        legend(**field_legend_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/field_separator.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+    # Separator - Phlex implementation
+    #
+    # Visual divider to separate sections inside FieldGroup.
+    # Uses FieldSeparatorBehavior concern for shared styling logic.
+    #
+    # @example Basic separator (line only)
+    #   render UI::Separator.new
+    #
+    # @example With label
+    #   render UI::Separator.new { "OR" }
+    class UI::FieldSeparator < Phlex::HTML
+      include UI::FieldSeparatorBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+        @block_given = false
+      end
+
+      def view_template(&block)
+        @block_given = block_given?
+
+        div(**field_separator_html_attributes) do
+          if @block_given
+            render_with_label(&block)
+          else
+            render_line_only
+          end
+        end
+      end
+
+      private
+
+      def render_with_label(&block)
+        div(class: "border-border bg-background absolute inset-x-0 flex items-center") do
+          div(class: "border-border w-full border-t")
+        end
+        span(class: "bg-background text-muted-foreground relative px-2") do
+          yield if block_given?
+        end
+      end
+
+      def render_line_only
+        div(class: "border-border w-full border-t")
+      end
+    end

data/app/components/ui/field_set.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    # Set - Phlex implementation
+    #
+    # Semantic fieldset container for grouped fields.
+    # Uses FieldSetBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Set.new do
+    #     render UI::Legend.new { "Contact Information" }
+    #   end
+    class UI::FieldSet < Phlex::HTML
+      include UI::FieldSetBehavior
+
+      # @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)
+        fieldset(**field_set_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/field_title.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Title - Phlex implementation
+    #
+    # Title with label styling inside FieldContent.
+    # Uses FieldTitleBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Title.new { "Section Title" }
+    class UI::FieldTitle < Phlex::HTML
+      include UI::FieldTitleBehavior
+
+      # @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_title_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/h1.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module UI
+  class H1 < Phlex::HTML
+    def initialize(classes: nil, **attributes)
+      @classes = classes
+      @attributes = attributes
+    end
+
+    def view_template(&block)
+      extend UI::H1Behavior
+      h1(**h1_html_attributes.merge(@attributes), &block)
+    end
+  end
+end

data/app/components/ui/h2.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module UI
+  class H2 < Phlex::HTML
+    def initialize(classes: nil, **attributes)
+      @classes = classes
+      @attributes = attributes
+    end
+
+    def view_template(&block)
+      extend UI::H2Behavior
+      h2(**h2_html_attributes.merge(@attributes), &block)
+    end
+  end
+end

data/app/components/ui/h3.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module UI
+  class H3 < Phlex::HTML
+    def initialize(classes: nil, **attributes)
+      @classes = classes
+      @attributes = attributes
+    end
+
+    def view_template(&block)
+      extend UI::H3Behavior
+      h3(**h3_html_attributes.merge(@attributes), &block)
+    end
+  end
+end

data/app/components/ui/h4.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module UI
+  class H4 < Phlex::HTML
+    def initialize(classes: nil, **attributes)
+      @classes = classes
+      @attributes = attributes
+    end
+
+    def view_template(&block)
+      extend UI::H4Behavior
+      h4(**h4_html_attributes.merge(@attributes), &block)
+    end
+  end
+end

data/app/components/ui/hover_card.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+    # HoverCard - Phlex implementation
+    #
+    # Container for hover card trigger and content.
+    # Uses HoverCardBehavior for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::HoverCard.new do
+    #     render UI::Trigger.new { "Hover me" }
+    #     render UI::Content.new { "Hover card content" }
+    #   end
+    class UI::HoverCard < Phlex::HTML
+      include UI::HoverCardBehavior
+
+      # @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(**hover_card_html_attributes, &block)
+      end
+    end

data/app/components/ui/hover_card_content.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # Content - Phlex implementation
+    #
+    # The content that appears on hover.
+    # Uses HoverCardContentBehavior for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Content.new { "Hover card content here" }
+    #
+    # @example With custom alignment
+    #   render UI::Content.new(align: "start", side_offset: 8) do
+    #     plain "Content"
+    #   end
+    class UI::HoverCardContent < Phlex::HTML
+      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 view_template(&block)
+        div(**content_html_attributes, &block)
+      end
+    end

data/app/components/ui/hover_card_trigger.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+    # Trigger - Phlex 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::Trigger.new { "Hover me" }
+    #
+    # @example With asChild - compose with Button
+    #   render UI::Trigger.new(as_child: true) do |attrs|
+    #     render UI::Button.new(**attrs, variant: :link) { "@nextjs" }
+    #   end
+    #
+    # @example With custom tag
+    #   render UI::Trigger.new(tag: :a, href: "#") { "Link trigger" }
+    class UI::HoverCardTrigger < Phlex::HTML
+      include UI::HoverCardTriggerBehavior
+
+      # @param as_child [Boolean] If true, yields attributes to block instead of rendering wrapper
+      # @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
+
+      def view_template(&block)
+        trigger_attrs = trigger_html_attributes
+
+        if @as_child
+          # Yield attributes to block - child must accept and apply them
+          yield(trigger_attrs) if block_given?
+        else
+          # Add tabindex for keyboard focus on non-focusable elements
+          trigger_attrs[:tabindex] ||= "0" if [:span, :div].include?(@tag)
+          # Default: render as specified tag (span by default)
+          public_send(@tag, **trigger_attrs, &block)
+        end
+      end
+    end

data/app/components/ui/inline_code.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module UI
+  class UI::InlineCode < Phlex::HTML
+    def initialize(classes: nil, **attributes)
+      @classes = classes
+      @attributes = attributes
+    end
+
+    def view_template(&block)
+      extend UI::InlineCodeBehavior
+      code(**inline_code_html_attributes.merge(@attributes), &block)
+    end
+  end
+end

data/app/components/ui/input.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+    class UI::Input < Phlex::HTML
+      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 view_template
+        input(**input_html_attributes.deep_merge(@attributes))
+      end
+    end

data/app/components/ui/input_group.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+    # InputGroup - Phlex implementation
+    #
+    # A wrapper component for grouping inputs with addons, buttons, and text.
+    # Uses InputGroupBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::InputGroup.new do
+    #     render UI::Input.new(placeholder: "Enter text")
+    #   end
+    #
+    # @example With addons
+    #   render UI::InputGroup.new do
+    #     render UI::Addon.new(align: "inline-start") { "@" }
+    #     render UI::Input.new(placeholder: "username")
+    #   end
+    class UI::InputGroup < Phlex::HTML
+      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 view_template(&block)
+        div(**input_group_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/input_group_addon.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # Addon - Phlex 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::Addon.new(align: "inline-start") { "@" }
+    #
+    # @example Button addon
+    #   render UI::Addon.new(align: "inline-end") do
+    #     render UI::Button.new { "Submit" }
+    #   end
+    class UI::InputGroupAddon < Phlex::HTML
+      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 view_template(&block)
+        div(**input_group_addon_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/input_group_button.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+    # Button - Phlex implementation
+    #
+    # A button component specifically styled for use within input groups.
+    # Uses both ButtonBehavior and InputGroupButtonBehavior for styling.
+    #
+    # @example Basic button
+    #   render UI::Button.new { "Search" }
+    #
+    # @example Icon button
+    #   render UI::Button.new(size: "icon-xs") { unsafe_raw "<svg>...</svg>" }
+    class UI::InputGroupButton < Phlex::HTML
+      include UI::ButtonBehavior
+      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 view_template(&block)
+        # Use input_group_button_classes which includes button behavior + input group styling
+        button(
+          type: @type,
+          class: input_group_button_classes,
+          **@attributes.except(:type, :variant, :size)
+        ) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/input_group_input.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+    # Input - Phlex implementation
+    #
+    # An input element styled for use within input groups.
+    # Uses both InputBehavior and InputGroupInputBehavior for styling.
+    #
+    # @example Basic input
+    #   render UI::Input.new(
+    #     placeholder: "Enter text",
+    #     name: "username"
+    #   )
+    #
+    # @example With type
+    #   render UI::Input.new(
+    #     type: "email",
+    #     placeholder: "email@example.com"
+    #   )
+    class UI::InputGroupInput < Phlex::HTML
+      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 view_template
+        # Render the base Input component with InputGroup classes and attributes
+        render UI::Input.new(**input_group_input_attributes)
+      end
+    end

data/app/components/ui/input_group_text.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+    # Text - Phlex implementation
+    #
+    # A text element for displaying static text within input groups.
+    # Uses InputGroupTextBehavior concern for shared styling logic.
+    #
+    # @example Simple text
+    #   render UI::Text.new { "@" }
+    #
+    # @example With icon
+    #   render UI::Text.new do
+    #     unsafe_raw '<svg class="size-4">...</svg>'
+    #     plain "Username"
+    #   end
+    class UI::InputGroupText < Phlex::HTML
+      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 view_template(&block)
+        span(**input_group_text_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/input_group_textarea.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+    # Textarea - Phlex implementation
+    #
+    # A textarea element styled for use within input groups.
+    # Uses both TextareaBehavior and InputGroupTextareaBehavior for styling.
+    #
+    # @example Basic textarea
+    #   render UI::Textarea.new(
+    #     placeholder: "Enter your message",
+    #     rows: 3
+    #   )
+    #
+    # @example With name
+    #   render UI::Textarea.new(
+    #     placeholder: "Description",
+    #     name: "description"
+    #   )
+    class UI::InputGroupTextarea < Phlex::HTML
+      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 view_template
+        # Render the base Textarea component with InputGroup classes and attributes
+        render UI::Textarea.new(**input_group_textarea_attributes)
+      end
+    end

data/app/components/ui/input_otp.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+    # InputOtp - Phlex implementation
+    #
+    # Accessible one-time password container component.
+    # Supports both composition (with Group/Slot/Separator) and auto-generation.
+    #
+    # @example With composition
+    #   render UI::InputOtp.new(length: 6) do
+    #     render UI::Group.new do
+    #       render UI::Slot.new(index: 0)
+    #     end
+    #   end
+    #
+    # @example Auto-generated
+    #   render UI::InputOtp.new(length: 6)
+    class UI::InputOtp < Phlex::HTML
+      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 view_template(&block)
+        div(**input_otp_html_attributes.merge(@attributes)) do
+          if block_given?
+            yield
+          else
+            # Auto-generate inputs wrapped in Group
+            render Group.new do
+              @length.times do |i|
+                render Slot.new(
+                  index: i,
+                  name: @name ? "#{@name}[#{i}]" : nil,
+                  id: @id ? "#{@id}_#{i}" : nil,
+                  disabled: @disabled
+                )
+              end
+            end
+          end
+        end
+      end
+    end

data/app/components/ui/input_otp_group.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Group - Phlex implementation
+    #
+    # Container for grouping OTP input slots together visually.
+    #
+    # @example
+    #   render UI::Group.new do
+    #     render UI::Slot.new(index: 0)
+    #     render UI::Slot.new(index: 1)
+    #   end
+    class UI::InputOtpGroup < Phlex::HTML
+      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 view_template(&block)
+        div(**input_otp_group_html_attributes.merge(@attributes), &block)
+      end
+    end