fernandes-ui 0.1.0

data/app/view_components/ui/progress_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+    # ProgressComponent - ViewComponent 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::ProgressComponent.new(value: 60) %>
+    #
+    # @example Indeterminate progress (no value)
+    #   <%= render UI::ProgressComponent.new %>
+    #
+    # @example With custom classes
+    #   <%= render UI::ProgressComponent.new(value: 80, classes: "h-4") %>
+    class UI::ProgressComponent < ViewComponent::Base
+      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 call
+        attrs = progress_html_attributes
+
+        content_tag :div, **attrs.merge(@attributes) do
+          content_tag :div,
+            nil,
+            class: progress_indicator_classes,
+            style: progress_indicator_style,
+            data: { slot: "progress-indicator" }
+        end
+      end
+    end

data/app/view_components/ui/radio_button_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+    class UI::RadioButtonComponent < ViewComponent::Base
+      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 call
+        content_tag :div, class: "relative inline-flex items-center justify-center" do
+          safe_join([
+            content_tag(:input, nil, radio_button_html_attributes),
+            indicator_icon
+          ])
+        end
+      end
+
+      private
+
+      attr_reader :classes, :attributes
+
+      def indicator_icon
+        content_tag(
+          :svg,
+          content_tag(:circle, nil, cx: "12", cy: "12", r: "10"),
+          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" }
+        )
+      end
+    end

data/app/view_components/ui/resizable_handle_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+    # ResizableHandle component (ViewComponent)
+    # Draggable handle between resizable panels
+    #
+    # @example Basic handle
+    #   <%= render UI::HandleComponent.new %>
+    #
+    # @example Handle with visible grip icon
+    #   <%= render UI::HandleComponent.new(with_handle: true) %>
+    class UI::ResizableHandleComponent < ViewComponent::Base
+      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
+      end
+
+      def call
+        attrs = handle_html_attributes
+        attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+
+        content_tag :div, **attrs.merge(@attributes.except(:data)) do
+          if @with_handle
+            content_tag :div, class: grip_container_classes do
+              helpers.lucide_icon("grip-vertical", class: "h-2.5 w-2.5")
+            end
+          end
+        end
+      end
+    end

data/app/view_components/ui/resizable_panel_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+    # ResizablePanel component (ViewComponent)
+    # Individual resizable panel within a panel group
+    #
+    # @example Basic usage
+    #   <%= render UI::PanelComponent.new(default_size: 50) do %>
+    #     Panel content
+    #   <% end %>
+    #
+    # @example With constraints
+    #   <%= render UI::PanelComponent.new(default_size: 50, min_size: 20, max_size: 80) do %>
+    #     Constrained panel
+    #   <% end %>
+    class UI::ResizablePanelComponent < ViewComponent::Base
+      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
+      end
+
+      def call
+        attrs = panel_html_attributes
+        attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+
+        content_tag :div, **attrs.merge(@attributes.except(:data)) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/resizable_panel_group_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+    # ResizablePanelGroup container component (ViewComponent)
+    # Wraps resizable panels with Stimulus controller
+    #
+    # @example Basic horizontal layout
+    #   <%= render UI::PanelGroupComponent.new(direction: "horizontal") do %>
+    #     <%= render UI::PanelComponent.new(default_size: 50) do %>
+    #       Left panel content
+    #     <% end %>
+    #     <%= render UI::HandleComponent.new %>
+    #     <%= render UI::PanelComponent.new(default_size: 50) do %>
+    #       Right panel content
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example Vertical layout
+    #   <%= render UI::PanelGroupComponent.new(direction: "vertical") do %>
+    #     <%= render UI::PanelComponent.new(default_size: 30) { "Top" } %>
+    #     <%= render UI::HandleComponent.new %>
+    #     <%= render UI::PanelComponent.new(default_size: 70) { "Bottom" } %>
+    #   <% end %>
+    class UI::ResizablePanelGroupComponent < ViewComponent::Base
+      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
+      end
+
+      def call
+        attrs = panel_group_html_attributes
+        attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+
+        content_tag :div, **attrs.merge(@attributes.except(:data)) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/responsive_dialog_component.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+    # ResponsiveDialog component (ViewComponent)
+    # Combines Dialog (desktop) and Drawer (mobile) with responsive switching
+    #
+    # Hybrid CSS + Stimulus approach:
+    # - Renders both Dialog and Drawer
+    # - CSS hides one based on breakpoint (md:hidden / md:block)
+    # - Stimulus controller syncs state between them
+    #
+    # @example Basic usage
+    #   <%= render UI::ResponsiveDialogComponent.new do %>
+    #     <!-- Content will be rendered in both Dialog and Drawer -->
+    #     <form>...</form>
+    #   <% end %>
+    #
+    # @example With custom breakpoint
+    #   <%= render UI::ResponsiveDialogComponent.new(
+    #     breakpoint: 1024,
+    #     direction: "right"
+    #   ) do %>
+    #     <!-- Content -->
+    #   <% end %>
+    class UI::ResponsiveDialogComponent < ViewComponent::Base
+      include UI::ResponsiveDialogBehavior
+
+      # @param open [Boolean] whether the dialog/drawer is open
+      # @param breakpoint [Integer] responsive breakpoint in pixels (default: 768 = md)
+      # @param direction [String] drawer direction: "bottom", "top", "left", "right"
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(
+        open: false,
+        breakpoint: 768,
+        direction: "bottom",
+        classes: "",
+        attributes: {}
+      )
+        @open = open
+        @breakpoint = breakpoint
+        @direction = direction
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        attrs = responsive_dialog_html_attributes
+        attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+
+        content_tag :div, **attrs.merge(@attributes.except(:data)) do
+          # Mobile: Drawer (hidden on md and up)
+          mobile_wrapper + desktop_wrapper
+        end
+      end
+
+      private
+
+      def mobile_wrapper
+        content_tag :div, class: "md:hidden", data: { "ui--responsive-dialog-target": "drawer" } do
+          render_drawer
+        end
+      end
+
+      def desktop_wrapper
+        content_tag :div, class: "hidden md:block", data: { "ui--responsive-dialog-target": "dialog" } do
+          render_dialog
+        end
+      end
+
+      def render_drawer
+        render UI::DrawerComponent.new(open: @open, direction: @direction) do
+          content
+        end
+      end
+
+      def render_dialog
+        render UI::DialogComponent.new(open: @open) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/scroll_area_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+    # ScrollAreaComponent - ViewComponent implementation
+    #
+    # Augments native scroll functionality for custom, cross-browser styling.
+    # Root container with Stimulus controller.
+    #
+    # @example Basic usage
+    #   <%= render UI::ScrollAreaComponent.new(classes: "h-[200px] w-[350px] rounded-md border p-4") do %>
+    #     <div class="space-y-4">
+    #       <h3 class="text-sm font-semibold">Tags</h3>
+    #       <!-- Content here -->
+    #     </div>
+    #   <% end %>
+    class UI::ScrollAreaComponent < ViewComponent::Base
+      include UI::ScrollAreaBehavior
+
+      # @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(type: "hover", scroll_hide_delay: 600, classes: "", **attributes)
+        @type = type
+        @scroll_hide_delay = scroll_hide_delay
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        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
+
+        content_tag :div, **root_attrs do
+          safe_join([
+            render(UI::ViewportComponent.new) { content },
+            render(UI::ScrollbarComponent.new(orientation: "vertical")),
+            render(UI::CornerComponent.new)
+          ])
+        end
+      end
+    end

data/app/view_components/ui/scroll_area_corner_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+    # CornerComponent - ViewComponent implementation
+    #
+    # Intersection element between vertical and horizontal scrollbars.
+    #
+    # @example Default usage (automatically used by ScrollAreaComponent)
+    #   <%= render UI::CornerComponent.new %>
+    class UI::ScrollAreaCornerComponent < ViewComponent::Base
+      include UI::ScrollAreaCornerBehavior
+
+      # @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, nil, **scroll_area_corner_html_attributes.deep_merge(@attributes)
+      end
+    end

data/app/view_components/ui/scroll_area_scrollbar_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+    # ScrollbarComponent - ViewComponent implementation
+    #
+    # Custom scrollbar track that contains the draggable thumb.
+    #
+    # @example Vertical scrollbar (default)
+    #   <%= render UI::ScrollbarComponent.new(orientation: "vertical") %>
+    #
+    # @example Horizontal scrollbar
+    #   <%= render UI::ScrollbarComponent.new(orientation: "horizontal") %>
+    class UI::ScrollAreaScrollbarComponent < ViewComponent::Base
+      include UI::ScrollAreaScrollbarBehavior
+
+      # @param orientation [String] "vertical" or "horizontal"
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(orientation: "vertical", classes: "", **attributes)
+        @orientation = orientation
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        scrollbar_attrs = scroll_area_scrollbar_html_attributes.deep_merge(@attributes)
+
+        # Add Stimulus target
+        scrollbar_attrs[:data] ||= {}
+        scrollbar_attrs[:data][:"ui--scroll-area-target"] = "scrollbar"
+
+        content_tag :div, **scrollbar_attrs do
+          render UI::ThumbComponent.new
+        end
+      end
+    end

data/app/view_components/ui/scroll_area_thumb_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+    # ThumbComponent - ViewComponent implementation
+    #
+    # Draggable scroll indicator inside the scrollbar.
+    #
+    # @example Default usage (automatically used by ScrollbarComponent)
+    #   <%= render UI::ThumbComponent.new %>
+    class UI::ScrollAreaThumbComponent < ViewComponent::Base
+      include UI::ScrollAreaThumbBehavior
+
+      # @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
+        thumb_attrs = scroll_area_thumb_html_attributes.deep_merge(@attributes)
+
+        # Add Stimulus target and action for drag
+        thumb_attrs[:data] ||= {}
+        thumb_attrs[:data][:"ui--scroll-area-target"] = "thumb"
+        thumb_attrs[:data][:action] = "pointerdown->ui--scroll-area#startDrag"
+
+        content_tag :div, nil, **thumb_attrs
+      end
+    end

data/app/view_components/ui/scroll_area_viewport_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    # ViewportComponent - ViewComponent implementation
+    #
+    # Scrollable content container with hidden native scrollbar.
+    #
+    # @example Basic usage (automatically used by ScrollAreaComponent)
+    #   <%= render UI::ViewportComponent.new do %>
+    #     <!-- Content here -->
+    #   <% end %>
+    class UI::ScrollAreaViewportComponent < ViewComponent::Base
+      include UI::ScrollAreaViewportBehavior
+
+      # @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
+        viewport_attrs = scroll_area_viewport_html_attributes.deep_merge(@attributes)
+
+        # Add Stimulus target
+        viewport_attrs[:data] ||= {}
+        viewport_attrs[:data][:"ui--scroll-area-target"] = "viewport"
+
+        content_tag :div, **viewport_attrs do
+          content_tag :div, content, style: "min-width: 100%; display: table;"
+        end
+      end
+    end

data/app/view_components/ui/select_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+    # SelectComponent - ViewComponent implementation
+    #
+    # A custom select component with keyboard navigation, scrollable viewport, and form integration.
+    # Root container that wraps trigger, content, and items.
+    #
+    # @example Basic usage
+    #   <%= render UI::SelectComponent.new(value: "apple") do %>
+    #     <%= render UI::TriggerComponent.new(placeholder: "Select a fruit...") %>
+    #     <%= render UI::ContentComponent.new do %>
+    #       <%= render UI::ItemComponent.new(value: "apple") { "Apple" } %>
+    #       <%= render UI::ItemComponent.new(value: "banana") { "Banana" } %>
+    #     <% end %>
+    #   <% end %>
+    class UI::SelectComponent < ViewComponent::Base
+      include UI::SelectBehavior
+
+      # @param value [String] Currently selected value
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(value: nil, classes: "", **attributes)
+        @value = value
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, content, **select_html_attributes.deep_merge(@attributes)
+      end
+    end

data/app/view_components/ui/select_content_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+    # ContentComponent - ViewComponent implementation
+    #
+    # Dropdown container that holds items and groups.
+    # Includes scroll buttons and viewport.
+    #
+    # @example Basic usage
+    #   <%= render UI::ContentComponent.new do %>
+    #     <%= render UI::ItemComponent.new(value: "apple") { "Apple" } %>
+    #     <%= render UI::ItemComponent.new(value: "banana") { "Banana" } %>
+    #   <% end %>
+    class UI::SelectContentComponent < ViewComponent::Base
+      include UI::SelectContentBehavior
+
+      # @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, **select_content_html_attributes.deep_merge(@attributes) do
+          safe_join([
+            render(UI::ScrollUpButtonComponent.new),
+            content_tag(:div,
+              content,
+              data: {
+                radix_select_viewport: true,
+                ui__select_target: "viewport",
+                action: "scroll->ui--select#handleScroll"
+              },
+              class: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 focus-visible:ring-ring/50 p-1",
+              style: "overflow-y: auto; overflow-x: hidden;"
+            ),
+            render(UI::ScrollDownButtonComponent.new)
+          ])
+        end
+      end
+    end

data/app/view_components/ui/select_group_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+    # GroupComponent - ViewComponent implementation
+    #
+    # Container for grouping select items with a label.
+    #
+    # @example Basic usage
+    #   <%= render UI::GroupComponent.new do %>
+    #     <%= render UI::LabelComponent.new { "North America" } %>
+    #     <%= render UI::ItemComponent.new(value: "america/new_york") { "Eastern Time" } %>
+    #     <%= render UI::ItemComponent.new(value: "america/chicago") { "Central Time" } %>
+    #   <% end %>
+    class UI::SelectGroupComponent < ViewComponent::Base
+      include UI::SelectGroupBehavior
+
+      # @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, content, **select_group_html_attributes.deep_merge(@attributes)
+      end
+    end

data/app/view_components/ui/select_item_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+    # ItemComponent - ViewComponent implementation
+    #
+    # Individual selectable option in the dropdown.
+    #
+    # @example Basic usage
+    #   <%= render UI::ItemComponent.new(value: "apple") { "Apple" } %>
+    #
+    # @example Disabled item
+    #   <%= render UI::ItemComponent.new(value: "angular", disabled: true) { "Angular (Coming Soon)" } %>
+    class UI::SelectItemComponent < ViewComponent::Base
+      include UI::SelectItemBehavior
+
+      # @param value [String] Value of this option
+      # @param disabled [Boolean] Whether the item is disabled
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(value: nil, disabled: false, classes: "", **attributes)
+        @value = value
+        @disabled = disabled
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, **select_item_html_attributes.deep_merge(@attributes) do
+          safe_join([
+            content_tag(:span, content, class: "flex-1"),
+            content_tag(:svg,
+              content_tag(:path, nil, d: "M20 6 9 17l-5-5"),
+              data: { ui__select_target: "itemCheck" },
+              class: "ml-auto size-4 opacity-0 transition-opacity",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              stroke_width: "2",
+              stroke_linecap: "round",
+              stroke_linejoin: "round"
+            )
+          ])
+        end
+      end
+    end

data/app/view_components/ui/select_label_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+    # LabelComponent - ViewComponent implementation
+    #
+    # Label for a group of select items.
+    #
+    # @example Basic usage
+    #   <%= render UI::LabelComponent.new { "North America" } %>
+    class UI::SelectLabelComponent < ViewComponent::Base
+      include UI::SelectLabelBehavior
+
+      # @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, content, **select_label_html_attributes.deep_merge(@attributes)
+      end
+    end

data/app/view_components/ui/select_scroll_down_button_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+    # ScrollDownButtonComponent - ViewComponent implementation
+    #
+    # Button that appears when content is scrollable downward.
+    # Automatically hidden when at bottom of list.
+    #
+    # @example Default usage (no customization needed)
+    #   <%= render UI::ScrollDownButtonComponent.new %>
+    class UI::SelectScrollDownButtonComponent < ViewComponent::Base
+      include UI::SelectScrollDownButtonBehavior
+
+      # @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, **select_scroll_down_button_html_attributes.deep_merge(@attributes) do
+          content_tag :svg, nil,
+            class: "size-4",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            stroke_width: "2",
+            stroke_linecap: "round",
+            stroke_linejoin: "round" do
+              content_tag :path, nil, d: "m6 9 6 6 6-6"
+            end
+        end
+      end
+    end