fernandes-ui 0.1.0

data/app/components/ui/pagination_link.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Pagination Link component (Phlex)
+    # Clickable link for page numbers
+    class UI::PaginationLink < Phlex::HTML
+      include UI::PaginationLinkBehavior
+
+      # @param href [String] URL for the link
+      # @param active [Boolean] whether this link is for the current page
+      # @param size [String] size variant: "icon", "default", "sm", "lg"
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(href: "#", active: false, size: "icon", classes: "", attributes: {}, **)
+        @href = href
+        @active = active
+        @size = size
+        @classes = classes
+        @attributes = attributes
+        super()
+      end
+
+      def view_template(&block)
+        a(**link_html_attributes, &block)
+      end
+    end

data/app/components/ui/pagination_next.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+    # Pagination Next component (Phlex)
+    # Next page button with icon and text
+    class UI::PaginationNext < Phlex::HTML
+      include UI::PaginationNextBehavior
+
+      # @param href [String] URL for the next page
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(href: "#", classes: "", attributes: {}, **)
+        @href = href
+        @classes = classes
+        @attributes = attributes
+        super()
+      end
+
+      def view_template(&)
+        render UI::PaginationLink.new(
+          href: @href,
+          size: "default",
+          classes: next_classes,
+          attributes: next_attributes
+        ) do
+          span(class: "hidden sm:block") { "Next" }
+          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: "size-4") do |s|
+            s.path(d: "m9 18 6-6-6-6")
+          end
+        end
+      end
+    end

data/app/components/ui/pagination_previous.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+    # Pagination Previous component (Phlex)
+    # Previous page button with icon and text
+    class UI::PaginationPrevious < Phlex::HTML
+      include UI::PaginationPreviousBehavior
+
+      # @param href [String] URL for the previous page
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(href: "#", classes: "", attributes: {}, **)
+        @href = href
+        @classes = classes
+        @attributes = attributes
+        super()
+      end
+
+      def view_template(&)
+        render UI::PaginationLink.new(
+          href: @href,
+          size: "default",
+          classes: previous_classes,
+          attributes: previous_attributes
+        ) 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: "size-4") do |s|
+            s.path(d: "m15 18-6-6 6-6")
+          end
+          span(class: "hidden sm:block") { "Previous" }
+        end
+      end
+    end

data/app/components/ui/popover.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+    # Popover - Phlex implementation
+    #
+    # Container for popover trigger and content.
+    # Uses PopoverBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Popover.new do
+    #     render UI::Trigger.new do
+    #       button { "Click me" }
+    #     end
+    #     render UI::Content.new do
+    #       plain "Popover content"
+    #     end
+    #   end
+    class UI::Popover < Phlex::HTML
+      include UI::PopoverBehavior
+
+      # @param placement [String] Placement of the popover (e.g., "bottom", "top-start")
+      # @param offset [Integer] Distance in pixels from the trigger
+      # @param trigger [String] Trigger type ("click" or "hover")
+      # @param hover_delay [Integer] Delay in milliseconds for hover trigger
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(
+        placement: "bottom",
+        offset: 4,
+        trigger: "click",
+        hover_delay: 200,
+        classes: "",
+        align: nil,
+        side_offset: nil,
+        **attributes
+      )
+        @placement = placement
+        @offset = side_offset || offset
+        @trigger = trigger
+        @hover_delay = hover_delay
+        @classes = classes
+        @align = align
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**popover_html_attributes, &block)
+      end
+    end

data/app/components/ui/popover_content.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+    # Content - Phlex implementation
+    #
+    # The floating content panel.
+    # Uses PopoverContentBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Content.new do
+    #     plain "Popover content here"
+    #   end
+    class UI::PopoverContent < Phlex::HTML
+      include UI::PopoverContentBehavior
+
+      # @param side [String] Side of the trigger to show the content ("top", "bottom", "left", "right")
+      # @param align [String] Alignment relative to the trigger ("start", "center", "end")
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(side: "bottom", align: "center", classes: "", **attributes)
+        @side = side
+        @align = align
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**popover_content_html_attributes, &block)
+      end
+    end

data/app/components/ui/popover_trigger.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+    # Trigger - Phlex implementation
+    #
+    # Button or element that triggers the popover.
+    # Uses PopoverTriggerBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Trigger.new do
+    #     button { "Click me" }
+    #   end
+    class UI::PopoverTrigger < Phlex::HTML
+      include UI::PopoverTriggerBehavior
+
+      # @param as_child [Boolean] If true, adds data attributes to child without 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 = popover_trigger_html_attributes.deep_merge(@attributes)
+
+        if @as_child
+          # asChild mode: yield attributes to block
+          # The caller is responsible for rendering an element with these attributes
+          yield(trigger_attrs) if block_given?
+        else
+          # Default mode: render as div
+          div(**trigger_attrs, &block)
+        end
+      end
+    end

data/app/components/ui/progress.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+    # Progress - Phlex implementation
+    #
+    # A progress indicator component for displaying task completion or loading status.
+    # Uses ProgressBehavior for shared styling logic.
+    #
+    # @example Basic usage with value
+    #   render UI::Progress.new(value: 60)
+    #
+    # @example Indeterminate progress (no value)
+    #   render UI::Progress.new
+    #
+    # @example With custom classes
+    #   render UI::Progress.new(value: 80, classes: "h-4")
+    class UI::Progress < Phlex::HTML
+      include UI::ProgressBehavior
+
+      # @param value [Numeric] Progress value between 0 and 100 (default: 0)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(value: 0, classes: "", **attributes)
+        @value = value
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template
+        div(**progress_html_attributes.deep_merge(@attributes)) do
+          div(
+            class: progress_indicator_classes,
+            style: progress_indicator_style,
+            data: { slot: "progress-indicator" }
+          )
+        end
+      end
+    end

data/app/components/ui/radio_button.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+    class UI::RadioButton < Phlex::HTML
+      include UI::RadioButtonBehavior
+
+      def initialize(
+        name: nil,
+        id: nil,
+        value: nil,
+        checked: false,
+        disabled: false,
+        required: false,
+        classes: "",
+        **attributes
+      )
+        @name = name
+        @id = id
+        @value = value
+        @checked = checked
+        @disabled = disabled
+        @required = required
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template
+        div(class: "relative inline-flex items-center justify-center") do
+          input(**radio_button_html_attributes)
+          indicator_icon
+        end
+      end
+
+      private
+
+      def indicator_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: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity",
+          data: { slot: "radio-group-indicator" }
+        ) { |s| s.circle(cx: "12", cy: "12", r: "10") }
+      end
+    end

data/app/components/ui/resizable_handle.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+    # ResizableHandle component (Phlex)
+    # Draggable handle between resizable panels
+    #
+    # @example Basic handle
+    #   render UI::Handle.new
+    #
+    # @example Handle with visible grip icon
+    #   render UI::Handle.new(with_handle: true)
+    class UI::ResizableHandle < Phlex::HTML
+      include UI::ResizableHandleBehavior
+
+      # @param with_handle [Boolean] show visible grip icon
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(with_handle: false, classes: "", attributes: {}, **)
+        @with_handle = with_handle
+        @classes = classes
+        @attributes = attributes
+        super()
+      end
+
+      def view_template
+        div(**handle_html_attributes) do
+          if @with_handle
+            div(class: grip_container_classes) do
+              render_grip_icon
+            end
+          end
+        end
+      end
+
+      private
+
+      def render_grip_icon
+        # GripVertical icon from lucide
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "10",
+          height: "10",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "h-2.5 w-2.5"
+        ) do |s|
+          s.circle(cx: "9", cy: "12", r: "1")
+          s.circle(cx: "9", cy: "5", r: "1")
+          s.circle(cx: "9", cy: "19", r: "1")
+          s.circle(cx: "15", cy: "12", r: "1")
+          s.circle(cx: "15", cy: "5", r: "1")
+          s.circle(cx: "15", cy: "19", r: "1")
+        end
+      end
+    end

data/app/components/ui/resizable_panel.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+    # ResizablePanel component (Phlex)
+    # Individual resizable panel within a panel group
+    #
+    # @example Basic usage
+    #   render UI::Panel.new(default_size: 50) do
+    #     "Panel content"
+    #   end
+    #
+    # @example With constraints
+    #   render UI::Panel.new(default_size: 50, min_size: 20, max_size: 80) do
+    #     "Constrained panel"
+    #   end
+    class UI::ResizablePanel < Phlex::HTML
+      include UI::ResizablePanelBehavior
+
+      # @param default_size [Integer, Float] initial size as percentage (0-100)
+      # @param min_size [Integer, Float, nil] minimum size as percentage
+      # @param max_size [Integer, Float, nil] maximum size as percentage
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(default_size: nil, min_size: nil, max_size: nil, classes: "", attributes: {}, **)
+        @default_size = default_size
+        @min_size = min_size
+        @max_size = max_size
+        @classes = classes
+        @attributes = attributes
+        super()
+      end
+
+      def view_template(&block)
+        div(**panel_html_attributes, &block)
+      end
+    end

data/app/components/ui/resizable_panel_group.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+    # ResizablePanelGroup container component (Phlex)
+    # Wraps resizable panels with Stimulus controller
+    #
+    # @example Basic horizontal layout
+    #   render UI::PanelGroup.new(direction: "horizontal") do
+    #     render UI::Panel.new(default_size: 50) do
+    #       "Left panel content"
+    #     end
+    #     render UI::Handle.new
+    #     render UI::Panel.new(default_size: 50) do
+    #       "Right panel content"
+    #     end
+    #   end
+    #
+    # @example Vertical layout
+    #   render UI::PanelGroup.new(direction: "vertical") do
+    #     render UI::Panel.new(default_size: 30) { "Top" }
+    #     render UI::Handle.new
+    #     render UI::Panel.new(default_size: 70) { "Bottom" }
+    #   end
+    class UI::ResizablePanelGroup < Phlex::HTML
+      include UI::ResizablePanelGroupBehavior
+
+      # @param direction [String] "horizontal" or "vertical" layout
+      # @param keyboard_resize_by [Integer] percentage to resize by on keyboard input
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(direction: "horizontal", keyboard_resize_by: 10, classes: "", attributes: {}, **)
+        @direction = direction
+        @keyboard_resize_by = keyboard_resize_by
+        @classes = classes
+        @attributes = attributes
+        super()
+      end
+
+      def view_template(&block)
+        div(**panel_group_html_attributes, &block)
+      end
+    end

data/app/components/ui/responsive_dialog.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+    # ResponsiveDialog - Renders Dialog on desktop, Drawer on mobile
+    # Uses hybrid CSS + Stimulus approach for responsive switching at 768px (md breakpoint)
+    #
+    # This component renders BOTH Dialog and Drawer, hiding one with CSS.
+    # The responsive-dialog Stimulus controller handles state synchronization.
+    #
+    # @example Basic usage
+    #   render UI::ResponsiveDialog.new do |rd|
+    #     rd.with_trigger { "Edit Profile" }
+    #     rd.with_content do
+    #       # Shared content for both Dialog and Drawer
+    #       render_form
+    #     end
+    #   end
+    class UI::ResponsiveDialog < Phlex::HTML
+      include UI::ResponsiveDialogBehavior
+
+      def initialize(
+        open: false,
+        breakpoint: 768,
+        direction: "bottom",
+        classes: nil,
+        **attributes
+      )
+        @open = open
+        @breakpoint = breakpoint
+        @direction = direction
+        @classes = classes
+        @attributes = attributes
+        @trigger_content = nil
+        @content_block = nil
+      end
+
+      # Builder method for trigger
+      def with_trigger(&block)
+        @trigger_content = block
+      end
+
+      # Builder method for content
+      def with_content(&block)
+        @content_block = block
+      end
+
+      def view_template(&block)
+        # Allow block-based API
+        yield(self) if block_given?
+
+        div(**responsive_dialog_html_attributes) do
+          # Mobile: Drawer (hidden on md and up)
+          div(class: "md:hidden", data: { ui__responsive_dialog_target: "drawer" }) do
+            render_drawer
+          end
+
+          # Desktop: Dialog (hidden below md)
+          div(class: "hidden md:block", data: { ui__responsive_dialog_target: "dialog" }) do
+            render_dialog
+          end
+        end
+      end
+
+      private
+
+      def render_drawer
+        render UI::Drawer.new(open: @open, direction: @direction) do
+          render_trigger_for(:drawer)
+          render UI::DrawerOverlay.new(open: @open)
+          render UI::DrawerContent.new(open: @open, direction: @direction) do
+            render_shared_content
+          end
+        end
+      end
+
+      def render_dialog
+        render UI::Dialog.new(open: @open) do
+          render_trigger_for(:dialog)
+          render UI::DialogOverlay.new(open: @open)
+          render UI::DialogContent.new do
+            render_shared_content
+          end
+        end
+      end
+
+      def render_trigger_for(component_type)
+        return unless @trigger_content
+
+        if component_type == :drawer
+          render UI::DrawerTrigger.new(&@trigger_content)
+        else
+          render UI::DialogTrigger.new(&@trigger_content)
+        end
+      end
+
+      def render_shared_content
+        @content_block&.call
+      end
+    end

data/app/components/ui/scroll_area.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+    # ScrollArea - Phlex implementation
+    #
+    # Augments native scroll functionality for custom, cross-browser styling.
+    # Root container with Stimulus controller.
+    #
+    # @example Basic usage
+    #   render UI::ScrollArea.new(classes: "h-[200px] w-[350px] rounded-md border p-4") do
+    #     div(class: "space-y-4") do
+    #       h3(class: "text-sm font-semibold") { "Tags" }
+    #       div(class: "space-y-1") do
+    #         # Content here
+    #       end
+    #     end
+    #   end
+    #
+    # @example Horizontal scrolling
+    #   render UI::ScrollArea.new(classes: "w-96 whitespace-nowrap rounded-md border") do
+    #     # Wide content here
+    #   end
+    class UI::ScrollArea < Phlex::HTML
+      include UI::ScrollAreaBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+      # @param type [String] Scrollbar visibility behavior ("hover", "scroll", "auto", "always")
+      # @param scroll_hide_delay [Integer] Delay in ms before hiding scrollbar on hover
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, type: "hover", scroll_hide_delay: 600, classes: "", **attributes)
+        @as_child = as_child
+        @type = type
+        @scroll_hide_delay = scroll_hide_delay
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        root_attrs = scroll_area_html_attributes.deep_merge(@attributes)
+
+        # Add Stimulus controller and values
+        root_attrs[:data] ||= {}
+        root_attrs[:data][:controller] = "ui--scroll-area"
+        root_attrs[:data][:ui__scroll_area_type_value] = @type
+        root_attrs[:data][:ui__scroll_area_scroll_hide_delay_value] = @scroll_hide_delay
+
+        if @as_child && block_given?
+          # asChild mode: yield attributes to block, but also render scrollbar and corner
+          yield(root_attrs)
+          render UI::Scrollbar.new(orientation: "vertical")
+          render UI::Corner.new
+        else
+          # Default mode: render as div with viewport, scrollbar, and corner
+          div(**root_attrs) do
+            render UI::Viewport.new(&block)
+            render UI::Scrollbar.new(orientation: "vertical")
+            render UI::Corner.new
+          end
+        end
+      end
+    end

data/app/components/ui/scroll_area_corner.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+    # Corner - Phlex implementation
+    #
+    # Intersection element between vertical and horizontal scrollbars.
+    #
+    # @example Default usage (automatically used by ScrollArea)
+    #   render UI::Corner.new
+    class UI::ScrollAreaCorner < Phlex::HTML
+      include UI::ScrollAreaCornerBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+      # @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)
+        corner_attrs = scroll_area_corner_html_attributes.deep_merge(@attributes)
+
+        if @as_child && block_given?
+          # asChild mode: yield attributes to block
+          yield(corner_attrs)
+        else
+          # Default mode: render as empty div
+          div(**corner_attrs)
+        end
+      end
+    end

data/app/components/ui/scroll_area_scrollbar.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+    # Scrollbar - Phlex implementation
+    #
+    # Custom scrollbar track that contains the draggable thumb.
+    #
+    # @example Vertical scrollbar (default)
+    #   render UI::Scrollbar.new(orientation: "vertical")
+    #
+    # @example Horizontal scrollbar
+    #   render UI::Scrollbar.new(orientation: "horizontal")
+    class UI::ScrollAreaScrollbar < Phlex::HTML
+      include UI::ScrollAreaScrollbarBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+      # @param orientation [String] "vertical" or "horizontal"
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, orientation: "vertical", classes: "", **attributes)
+        @as_child = as_child
+        @orientation = orientation
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        scrollbar_attrs = scroll_area_scrollbar_html_attributes.deep_merge(@attributes)
+
+        # Add Stimulus target
+        scrollbar_attrs[:data] ||= {}
+        scrollbar_attrs[:data][:"ui--scroll-area-target"] = "scrollbar"
+
+        if @as_child && block_given?
+          # asChild mode: yield attributes to block, but also render thumb if not provided
+          yield(scrollbar_attrs)
+          render UI::Thumb.new unless block_given?
+        else
+          # Default mode: render as div with thumb
+          div(**scrollbar_attrs) do
+            render UI::Thumb.new
+          end
+        end
+      end
+    end